@helpscout/hsds-react/components/EditableField/EditableField.css.js

React component library for Help Scout's Design System

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.ComposedMaskUI = exports.EditableFieldCompositeUI = exports.TruncatedUI = exports.FieldButtonUI = exports.EditableFieldActionsUI = exports.MaskValueUI = exports.MaskOptionUI = exports.EditableFieldMaskUI = exports.ValidationIconUI = exports.FocusIndicatorUI = exports.OptionsDropdownUI = exports.TriggerUI = exports.OptionsWrapperUI = exports.InputUI = exports.InputWrapperUI = exports.EditableFieldInputUI = exports.AddButtonUI = exports.FieldUI = exports.LabelTextUI = exports.EditableFieldUI = void 0;

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _color = require("../../styles/utilities/color");

var _constants = require("../../styles/configs/constants");

var _EditableField = require("./EditableField.utils");

var _DropList = require("../DropList/DropList.css");

var field = _EditableField.SIZES.field,
    fieldLabel = _EditableField.SIZES.fieldLabel,
    floatingLabel = _EditableField.SIZES.floatingLabel,
    focusIndicator = _EditableField.SIZES.focusIndicator,
    input = _EditableField.SIZES.input,
    mask = _EditableField.SIZES.mask,
    compositeMask = _EditableField.SIZES.compositeMask;
var EditableFieldUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "EditableFieldcss__EditableFieldUI",
  componentId: "n1yzma-0"
})(["position:relative;margin-bottom:40px;"]);
exports.EditableFieldUI = EditableFieldUI;
var LabelTextUI = (0, _styledComponents.default)('span').withConfig({
  displayName: "EditableFieldcss__LabelTextUI",
  componentId: "n1yzma-1"
})(["display:block;margin-bottom:5px;color:", ";font-size:", ";font-weight:500;letter-spacing:0.7px;text-transform:uppercase;"], (0, _color.getColor)('grey.800'), fieldLabel.font.medium);
exports.LabelTextUI = LabelTextUI;
var FieldUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "EditableFieldcss__FieldUI",
  componentId: "n1yzma-2"
})(["position:relative;height:", ";margin-bottom:2px;width:auto;transition:width 0.2s ease-in-out;.", " &{height:", ";}&:hover .", "{opacity:1;}&:hover .", ",&:hover .", "{border-bottom:1px dashed ", ";}&:hover .", "{width:100%;}&.is-empty:hover .", "{width:auto;}&.is-active:hover .", "{display:none;cursor:initial;}&:hover .", "{border-bottom:1px dashed ", ";}&.", ",.", " &:hover{.", ",.", "{border-bottom:1px solid ", ";}}.is-temporary-value{position:absolute;left:-99999px;font-size:", ";visibility:hidden;width:auto;height:auto;}", "{width:auto;max-width:200px;min-width:75;}"], field.height, _EditableField.STATES_CLASSNAMES.isLarge, field.height.large, _EditableField.ACTIONS_CLASSNAMES.actions, _EditableField.MASK_CLASSNAMES.option, _EditableField.MASK_CLASSNAMES.value, _EditableField.COLOURS.mask.border, _EditableField.MASK_CLASSNAMES.value, _EditableField.MASK_CLASSNAMES.value, _EditableField.ACTIONS_CLASSNAMES.actions, _EditableField.STATES_CLASSNAMES.withPlaceholder, _EditableField.COLOURS.mask.placeholder.border.hover, _EditableField.STATES_CLASSNAMES.fieldDisabled + ':hover', _EditableField.STATES_CLASSNAMES.fieldDisabled, _EditableField.MASK_CLASSNAMES.option, _EditableField.MASK_CLASSNAMES.value, _EditableField.COLOURS.invisible, field.font.medium, _DropList.DropListWrapperUI);
exports.FieldUI = FieldUI;
var AddButtonUI = (0, _styledComponents.default)('button').withConfig({
  displayName: "EditableFieldcss__AddButtonUI",
  componentId: "n1yzma-3"
})(["display:block;height:20px;width:20px;padding:0;margin:9px 0 0 0;border:none;color:", ";background-color:", ";cursor:pointer;border-radius:3px;&:hover{color:white;background-color:", ";}&:focus{outline:0;color:white;background-color:", ";box-shadow:0 0 0 1px white,0 0 0 3px ", ";transform:translateZ(0);}&:disabled{cursor:not-allowed;color:#c6d0d8;background-color:", ";}.", "{position:relative;left:-2px;top:-2px;}&::-moz-focus-inner{border:0;}"], (0, _color.getColor)('grey.800'), (0, _color.getColor)('grey.300'), (0, _color.getColor)('blue.500'), (0, _color.getColor)('blue.500'), (0, _color.getColor)('blue.500'), (0, _color.getColor)('grey.300'), _EditableField.OTHERCOMPONENTS_CLASSNAMES.icon);
/**
 * ========================================
 * INPUT
 * ========================================
 */

exports.AddButtonUI = AddButtonUI;
var resetHSAppInputRules = "\nborder-radius: 0;\ndisplay: block;\nmargin: 0;\nvertical-align: baseline;\nborder: none;\ntransition: none;\n\n&:focus {\n  border: none;\n  outline: 0;\n}\n";
var EditableFieldInputUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "EditableFieldcss__EditableFieldInputUI",
  componentId: "n1yzma-4"
})(["display:flex;height:", ";width:100%;max-width:100%;position:absolute;top:0;left:0;z-index:1;border-bottom:1px solid ", ";.", " &{height:", ";}.", " &:hover{cursor:initial;border-bottom:1px solid ", ";}.", " &{pointer-events:none;z-index:2;border-bottom-color:", " !important;}&.", "{position:relative;}&.", "{.", "{padding-right:24px;}}"], field.height.medium, _EditableField.COLOURS.invisible, _EditableField.STATES_CLASSNAMES.isLarge, field.height.large, _EditableField.STATES_CLASSNAMES.fieldDisabled, _EditableField.COLOURS.invisible, _EditableField.STATES_CLASSNAMES.isActive, _EditableField.COLOURS.invisible, _EditableField.STATES_CLASSNAMES.isInline, _EditableField.STATES_CLASSNAMES.withValidation, _EditableField.INPUT_CLASSNAMES.input);
exports.EditableFieldInputUI = EditableFieldInputUI;
var InputWrapperUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "EditableFieldcss__InputWrapperUI",
  componentId: "n1yzma-5"
})(["position:relative;height:", ";width:100%;.", " &{height:", ";}.", " &{width:calc(100% - 70px);}.", " &{width:100%;}&::before{opacity:0;will-change:transform,font-size;transition-property:transform,font-size;transition-timing-function:linear;transition-duration:0.2s;pointer-events:none;}.", " &,.", " &{&::before{content:", ";opacity:", ";transform:", ";transform-origin:center left;position:absolute;z-index:5;top:0;left:0;height:", ";line-height:", ";font-family:", ";font-size:", ";color:", ";}}"], input.height.medium, _EditableField.STATES_CLASSNAMES.isLarge, field.height.large, _EditableField.STATES_CLASSNAMES.hasOptions, _EditableField.STATES_CLASSNAMES.isEmpty, _EditableField.STATES_CLASSNAMES.withFloatingLabels, _EditableField.STATES_CLASSNAMES.hasActiveFields, function (_ref) {
  var withPlaceholder = _ref.withPlaceholder;
  return "\"" + withPlaceholder + "\"";
}, function (_ref2) {
  var value = _ref2.value;
  return "" + (value ? '1' : '0');
}, function (_ref3) {
  var value = _ref3.value;
  return "translateY(" + (value ? -15 : -10) + "px)";
}, field.height.medium, field.lineHeight.medium, _constants.FONT_FAMILY, function (_ref4) {
  var value = _ref4.value;
  return "" + (value ? floatingLabel.font.medium : field.font.medium);
}, _EditableField.COLOURS.input.placeholder);
exports.InputWrapperUI = InputWrapperUI;
var InputUI = (0, _styledComponents.default)('input').withConfig({
  displayName: "EditableFieldcss__InputUI",
  componentId: "n1yzma-6"
})(["&.", "{", " width:100%;height:", ";line-height:", ";padding:0;border:none;color:", ";font-family:", ";font-size:", ";background:white;pointer-events:auto;.", " &{height:", ";line-height:", ";font-size:", ";}.", " &{outline:none;color:", ";z-index:2;cursor:initial;& + .", "{transform:scaleX(1);height:", ";background-color:", ";}&::placeholder{color:", ";opacity:1;}}.", " &:focus{outline:none;& + .", "{transform:scaleX(1);background-color:", ";height:", ";}}.", " &{cursor:pointer;}.", " &{cursor:not-allowed;pointer-events:none;display:none;color:", ";}.", " &:focus{cursor:initial;}.", " &{color:", ";& + .", "{transform:scaleX(1);height:", ";background-color:", ";}&::placeholder{color:", ";opacity:1;}}&::placeholder{color:", ";}&[type='number']::-webkit-inner-spin-button,&[type='number']::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}&[type='number']{-moz-appearance:textfield;}}"], _EditableField.INPUT_CLASSNAMES.input, resetHSAppInputRules, field.height.medium, field.height.medium, _EditableField.COLOURS.invisible, _constants.FONT_FAMILY, field.font.medium, _EditableField.STATES_CLASSNAMES.isLarge, field.height.large, field.height.large, field.font.large, _EditableField.STATES_CLASSNAMES.isActive, _EditableField.COLOURS.input.regular, _EditableField.INPUT_CLASSNAMES.focusIndicator, focusIndicator.inactive, _EditableField.COLOURS.focusIndicator.inactive, _EditableField.COLOURS.input.placeholder, _EditableField.STATES_CLASSNAMES.isActive, _EditableField.INPUT_CLASSNAMES.focusIndicator, _EditableField.COLOURS.focusIndicator.active, focusIndicator.active, _EditableField.STATES_CLASSNAMES.isEmpty, _EditableField.STATES_CLASSNAMES.fieldDisabled, _EditableField.COLOURS.input.placeholder, _EditableField.STATES_CLASSNAMES.isEmpty, _EditableField.STATES_CLASSNAMES.hasActiveFields, _EditableField.COLOURS.input.regular, _EditableField.INPUT_CLASSNAMES.focusIndicator, focusIndicator.inactive, _EditableField.COLOURS.focusIndicator.inactive, _EditableField.COLOURS.input.placeholder, _EditableField.COLOURS.invisible);
exports.InputUI = InputUI;
var OptionsWrapperUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "EditableFieldcss__OptionsWrapperUI",
  componentId: "n1yzma-7"
})(["position:relative;width:60px;height:", ";margin-right:20px;font-family:", ";font-size:", ";pointer-events:auto;.", " &{height:", ";}.", " &{width:0;margin-right:0;}.", ".", " &{width:60px;margin-right:20px;}"], field.height.medium, _constants.FONT_FAMILY, field.font.medium, _EditableField.STATES_CLASSNAMES.isLarge, field.height.large, _EditableField.STATES_CLASSNAMES.isEmpty, _EditableField.STATES_CLASSNAMES.isActive, _EditableField.STATES_CLASSNAMES.isEmpty);
exports.OptionsWrapperUI = OptionsWrapperUI;
var TriggerUI = (0, _styledComponents.default)('button').withConfig({
  displayName: "EditableFieldcss__TriggerUI",
  componentId: "n1yzma-8"
})(["position:relative;width:100%;min-width:70px;border:0;background:transparent;padding:0;margin:0;text-align:left;height:", ";line-height:", ";cursor:pointer;.is-active &:focus{outline:0;.", "{transform:scaleX(1);background-color:", ";height:", ";}}"], input.height.medium, field.height.medium, _EditableField.INPUT_CLASSNAMES.focusIndicator, _EditableField.COLOURS.focusIndicator.active, focusIndicator.active);
exports.TriggerUI = TriggerUI;
var OptionsDropdownUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "EditableFieldcss__OptionsDropdownUI",
  componentId: "n1yzma-9"
})(["width:70px;height:", ";line-height:", ";margin-bottom:5px;font-family:", ";font-size:", ";color:", ";background:white;.", " &{height:", ";line-height:", ";font-size:", ";}&:hover .", "{color:", ";}.", " &:hover .", "{color:", ";}.", " &{color:", ";& + .", "{transform:scaleX(1);height:", ";background-color:", ";}}&.menu-open + .", "{transform:scaleX(1);background-color:", ";height:", ";}& .", "{position:absolute;right:-5px;top:3px;}& .", "{width:60px;}"], input.height.medium, field.height.medium, _constants.FONT_FAMILY, field.font.medium, _EditableField.COLOURS.invisible, _EditableField.STATES_CLASSNAMES.isLarge, field.height.large, field.height.large, field.font.large, _EditableField.OTHERCOMPONENTS_CLASSNAMES.icon, (0, _color.getColor)('charcoal.200'), _EditableField.STATES_CLASSNAMES.isActive, _EditableField.OTHERCOMPONENTS_CLASSNAMES.icon, (0, _color.getColor)('charcoal.800'), _EditableField.STATES_CLASSNAMES.isActive, (0, _color.getColor)('charcoal.800'), _EditableField.INPUT_CLASSNAMES.focusIndicator, focusIndicator.inactive, _EditableField.COLOURS.focusIndicator.inactive, _EditableField.INPUT_CLASSNAMES.focusIndicator, _EditableField.COLOURS.focusIndicator.active, focusIndicator.active, _EditableField.OTHERCOMPONENTS_CLASSNAMES.icon, _EditableField.OTHERCOMPONENTS_CLASSNAMES.truncate);
exports.OptionsDropdownUI = OptionsDropdownUI;
var FocusIndicatorUI = (0, _styledComponents.default)('span').withConfig({
  displayName: "EditableFieldcss__FocusIndicatorUI",
  componentId: "n1yzma-10"
})(["position:absolute;bottom:-1px;left:0;right:0;height:", ";background-color:", ";transform-origin:bottom left;transform:scaleX(0);transition:transform 0.3s ease,background-color 0.3s ease;z-index:3;will-change:transform,background-color;.", " &{transform:scaleX(1);}"], focusIndicator.active, function (_ref5) {
  var color = _ref5.color;
  return color;
}, _EditableField.STATES_CLASSNAMES.withValidation);
exports.FocusIndicatorUI = FocusIndicatorUI;
var ValidationIconUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "EditableFieldcss__ValidationIconUI",
  componentId: "n1yzma-11"
})(["position:absolute;width:24px;height:24px;bottom:-1px;right:0;z-index:10;pointer-events:all;.", "{color:", ";}"], _EditableField.OTHERCOMPONENTS_CLASSNAMES.icon, function (_ref6) {
  var color = _ref6.color;
  return color;
});
/**
 * ========================================
 * MASK
 * ========================================
 */

exports.ValidationIconUI = ValidationIconUI;
var EditableFieldMaskUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "EditableFieldcss__EditableFieldMaskUI",
  componentId: "n1yzma-12"
})(["position:relative;display:inline-block;width:100%;max-width:100%;height:", ";z-index:2;pointer-events:none;white-space:nowrap;font-family:", ";.", " &{height:", ";}.", " &{z-index:1;}&.", "{pointer-events:all;}"], mask.height.medium, _constants.FONT_FAMILY, _EditableField.STATES_CLASSNAMES.isLarge, field.height.large, _EditableField.STATES_CLASSNAMES.isActive, _EditableField.STATES_CLASSNAMES.fieldDisabled);
exports.EditableFieldMaskUI = EditableFieldMaskUI;
var MaskOptionUI = (0, _styledComponents.default)('span').withConfig({
  displayName: "EditableFieldcss__MaskOptionUI",
  componentId: "n1yzma-13"
})(["display:inline-block;vertical-align:bottom;position:relative;width:70px;height:", ";line-height:", ";margin-right:10px;color:", ";font-family:", ";font-size:", ";font-weight:500;z-index:2;pointer-events:none;white-space:nowrap;border-bottom:1px solid ", ";.", " &{height:", ";line-height:", ";font-size:", ";}.", " &{display:none;}.", " &{z-index:1;display:inline-block;}& .", "{color:", ";}.", " &{color:", ";pointer-events:all;cursor:default;}&:focus{outline:none;border-bottom:1px dashed ", ";}.", "{width:60px;}"], mask.height.medium, field.lineHeight.medium, _EditableField.COLOURS.mask.regular, _constants.FONT_FAMILY, field.font.medium, _EditableField.COLOURS.invisible, _EditableField.STATES_CLASSNAMES.isLarge, field.height.large, field.height.large, field.font.large, _EditableField.STATES_CLASSNAMES.isEmpty, _EditableField.STATES_CLASSNAMES.isActive, _EditableField.STATES_CLASSNAMES.isPlaceholder, _EditableField.COLOURS.mask.placeholder.regular, _EditableField.STATES_CLASSNAMES.fieldDisabled, _EditableField.COLOURS.mask.disabled, _EditableField.COLOURS.mask.focused, _EditableField.OTHERCOMPONENTS_CLASSNAMES.truncate);
exports.MaskOptionUI = MaskOptionUI;
var MaskValueUI = (0, _styledComponents.default)('span').withConfig({
  displayName: "EditableFieldcss__MaskValueUI",
  componentId: "n1yzma-14"
})(["display:inline-block;vertical-align:bottom;height:", ";line-height:", ";width:100%;max-width:100%;color:", ";font-family:", ";font-size:", ";z-index:2;pointer-events:none;white-space:nowrap;border-bottom:1px solid ", ";.", " &{height:", ";line-height:", ";font-size:", ";}.", ".", " &{width:calc(100% - 80px);}.", ".", " &{width:auto;}.", " &{z-index:1;border-bottom:none !important;}.", " &{border-bottom:none !important;}&.", "{font-weight:500;}&.", "{width:auto;border-bottom:1px dashed ", ";}& .", "{color:", ";}.", " &.", "{border-bottom:1px solid ", ";}.", " &{color:", ";}.", " & .", "{color:", ";}.", "{width:", ";}&:focus{outline:0;border-bottom:1px dashed ", ";.", "{width:100%;}}"], mask.height.medium, field.lineHeight.medium, _EditableField.COLOURS.mask.regular, _constants.FONT_FAMILY, field.font.medium, _EditableField.COLOURS.invisible, _EditableField.STATES_CLASSNAMES.isLarge, field.height.large, field.height.large, field.font.large, _EditableField.EDITABLEFIELD_CLASSNAMES.field, _EditableField.STATES_CLASSNAMES.hasOptions, _EditableField.STATES_CLASSNAMES.hasOptions, _EditableField.STATES_CLASSNAMES.isEmpty, _EditableField.STATES_CLASSNAMES.isActive, _EditableField.STATES_CLASSNAMES.withValidation, _EditableField.STATES_CLASSNAMES.isEmphasized, _EditableField.STATES_CLASSNAMES.withPlaceholder, _EditableField.COLOURS.mask.placeholder.border.regular, _EditableField.STATES_CLASSNAMES.isPlaceholder, _EditableField.COLOURS.mask.placeholder.regular, _EditableField.STATES_CLASSNAMES.fieldDisabled, _EditableField.STATES_CLASSNAMES.withPlaceholder, _EditableField.COLOURS.invisible, _EditableField.STATES_CLASSNAMES.fieldDisabled, _EditableField.COLOURS.mask.disabled, _EditableField.STATES_CLASSNAMES.fieldDisabled, _EditableField.STATES_CLASSNAMES.isPlaceholder, _EditableField.COLOURS.mask.placeholder.disabled, _EditableField.TRUNCATED_CLASSNAMES.component, function (_ref7) {
  var numberOfActions = _ref7.numberOfActions;
  return "calc(100% - " + numberOfActions * 20 + "px)";
}, _EditableField.COLOURS.mask.focused, _EditableField.OTHERCOMPONENTS_CLASSNAMES.truncate);
/**
 * ========================================
 * ACTIONS
 * ========================================
 */

exports.MaskValueUI = MaskValueUI;
var EditableFieldActionsUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "EditableFieldcss__EditableFieldActionsUI",
  componentId: "n1yzma-15"
})(["", " height:21px;position:absolute;top:1px;left:", ";z-index:4;opacity:0;text-align:right;&:hover{opacity:1;}.", " &,&.", "{display:none;}"], function (_ref8) {
  var numberOfActions = _ref8.numberOfActions;
  return "width: " + (numberOfActions * 25 + 5) + "px;";
}, function (_ref9) {
  var numberOfActions = _ref9.numberOfActions;
  return "calc(100% - " + (numberOfActions * 25 + 5) + "px)";
}, _EditableField.STATES_CLASSNAMES.fieldDisabled, _EditableField.STATES_CLASSNAMES.withValidation);
exports.EditableFieldActionsUI = EditableFieldActionsUI;
var FieldButtonUI = (0, _styledComponents.default)('button').withConfig({
  displayName: "EditableFieldcss__FieldButtonUI",
  componentId: "n1yzma-16"
})(["&.", "{display:inline-block;vertical-align:middle;height:21px;width:20px;padding:0;margin:0;border:none;background-color:", ";color:", ";font-size:12px;text-align:center;overflow:hidden;&:hover,&:focus{cursor:pointer;color:", ";}&:focus{outline:none;}&.action-delete{&:focus,&:hover{color:", ";}}.", "{width:24px;transform:translateX(3px);}}"], _EditableField.ACTIONS_CLASSNAMES.fieldButton, _EditableField.COLOURS.invisible, _EditableField.COLOURS.button.regular, _EditableField.COLOURS.button.hover, _EditableField.COLOURS.button.delete, _EditableField.OTHERCOMPONENTS_CLASSNAMES.icon);
/**
 * ========================================
 * TRUNCATED
 * ========================================
 */

exports.FieldButtonUI = FieldButtonUI;
var TruncatedUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "EditableFieldcss__TruncatedUI",
  componentId: "n1yzma-17"
})(["display:flex;width:100%;max-width:100%;overflow:hidden;.", "{flex-shrink:2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.", "{max-width:90%;flex-shrink:0;}"], _EditableField.TRUNCATED_CLASSNAMES.firstChunk, _EditableField.TRUNCATED_CLASSNAMES.secondChunk);
/**
 * ========================================
 * COMPOSITE
 * ========================================
 */

exports.TruncatedUI = TruncatedUI;
var EditableFieldCompositeUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "EditableFieldcss__EditableFieldCompositeUI",
  componentId: "n1yzma-18"
})(["display:flex;position:relative;.", "{margin-right:10px;margin-bottom:0;&:last-child{margin-right:0;}input{pointer-events:none;}}&.", "{.", "{input{pointer-events:auto;}}}"], _EditableField.EDITABLEFIELD_CLASSNAMES.component, _EditableField.STATES_CLASSNAMES.hasActiveFields, _EditableField.EDITABLEFIELD_CLASSNAMES.component);
exports.EditableFieldCompositeUI = EditableFieldCompositeUI;
var ComposedMaskUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "EditableFieldcss__ComposedMaskUI",
  componentId: "n1yzma-19"
})(["position:absolute;display:flex;z-index:3;width:auto;top:0;left:0;height:", ";line-height:", ";font-family:", ";font-size:", ";span{display:inline-block;height:", ";line-height:", ";}&:hover{border-bottom:1px dashed ", ";}&:focus{outline:0;border-bottom:1px dashed ", ";}&.", "{display:none;}& .is-placeholder{color:", ";border-bottom:1px dashed ", ";&:hover{border-bottom:1px dashed ", ";}}.", " &{height:", ";line-height:", ";font-size:", ";span{height:", ";line-height:", ";}}"], compositeMask.height.medium, compositeMask.lineHeight.medium, _constants.FONT_FAMILY, compositeMask.font.medium, compositeMask.height.medium, compositeMask.lineHeight.medium, _EditableField.COLOURS.mask.border, _EditableField.COLOURS.mask.focused, _EditableField.STATES_CLASSNAMES.isHidden, _EditableField.COLOURS.mask.placeholder.regular, _EditableField.COLOURS.mask.placeholder.border.regular, _EditableField.COLOURS.mask.placeholder.border.hover, _EditableField.STATES_CLASSNAMES.isLarge, compositeMask.height.large, compositeMask.lineHeight.large, compositeMask.font.large, compositeMask.height.large, compositeMask.lineHeight.large);
exports.ComposedMaskUI = ComposedMaskUI;