@artsy/palette 36.1.1 → 37.0.0-canary.1250.28823.0

package/dist/elements/BorderedRadio/BorderedRadio.d.ts

@@ -115,14 +115,14 @@ export declare const BorderedRadio: import("styled-components").StyledComponentC
     suppressHydrationWarning?: boolean | undefined;
     accessKey?: string | undefined;
     className?: string | undefined;
-    contentEditable?: "inherit" | (boolean | "true" | "false") | undefined;
+    contentEditable?: "inherit" | (boolean | "false" | "true") | undefined;
     contextMenu?: string | undefined;
     dir?: string | undefined;
-    draggable?: (boolean | "true" | "false") | undefined;
+    draggable?: (boolean | "false" | "true") | undefined;
     id?: string | undefined;
     lang?: string | undefined;
     placeholder?: string | undefined;
-    spellCheck?: (boolean | "true" | "false") | undefined;
+    spellCheck?: (boolean | "false" | "true") | undefined;
     tabIndex?: number | undefined;
     radioGroup?: string | undefined;
     role?: string | undefined;
@@ -147,47 +147,47 @@ export declare const BorderedRadio: import("styled-components").StyledComponentC
     inputMode?: "none" | "text" | "search" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
     is?: string | undefined;
     'aria-activedescendant'?: string | undefined;
-    'aria-atomic'?: boolean | "true" | "false" | undefined;
+    'aria-atomic'?: boolean | "false" | "true" | undefined;
     'aria-autocomplete'?: "none" | "inline" | "list" | "both" | undefined;
-    'aria-busy'?: boolean | "true" | "false" | undefined;
-    'aria-checked'?: boolean | "true" | "false" | "mixed" | undefined;
+    'aria-busy'?: boolean | "false" | "true" | undefined;
+    'aria-checked'?: boolean | "false" | "true" | "mixed" | undefined;
     'aria-colcount'?: number | undefined;
     'aria-colindex'?: number | undefined;
     'aria-colspan'?: number | undefined;
     'aria-controls'?: string | undefined;
-    'aria-current'?: boolean | "time" | "step" | "true" | "false" | "page" | "location" | "date" | undefined;
+    'aria-current'?: boolean | "time" | "false" | "true" | "page" | "step" | "location" | "date" | undefined;
     'aria-describedby'?: string | undefined;
     'aria-details'?: string | undefined;
-    'aria-disabled'?: boolean | "true" | "false" | undefined;
+    'aria-disabled'?: boolean | "false" | "true" | undefined;
     'aria-dropeffect'?: "none" | "link" | "copy" | "execute" | "move" | "popup" | undefined;
     'aria-errormessage'?: string | undefined;
-    'aria-expanded'?: boolean | "true" | "false" | undefined;
+    'aria-expanded'?: boolean | "false" | "true" | undefined;
     'aria-flowto'?: string | undefined;
-    'aria-grabbed'?: boolean | "true" | "false" | undefined;
-    'aria-haspopup'?: boolean | "grid" | "dialog" | "menu" | "true" | "false" | "listbox" | "tree" | undefined;
-    'aria-hidden'?: boolean | "true" | "false" | undefined;
-    'aria-invalid'?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
+    'aria-grabbed'?: boolean | "false" | "true" | undefined;
+    'aria-haspopup'?: boolean | "grid" | "dialog" | "menu" | "false" | "true" | "listbox" | "tree" | undefined;
+    'aria-hidden'?: boolean | "false" | "true" | undefined;
+    'aria-invalid'?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
     'aria-keyshortcuts'?: string | undefined;
     'aria-label'?: string | undefined;
     'aria-labelledby'?: string | undefined;
     'aria-level'?: number | undefined;
     'aria-live'?: "off" | "assertive" | "polite" | undefined;
-    'aria-modal'?: boolean | "true" | "false" | undefined;
-    'aria-multiline'?: boolean | "true" | "false" | undefined;
-    'aria-multiselectable'?: boolean | "true" | "false" | undefined;
+    'aria-modal'?: boolean | "false" | "true" | undefined;
+    'aria-multiline'?: boolean | "false" | "true" | undefined;
+    'aria-multiselectable'?: boolean | "false" | "true" | undefined;
     'aria-orientation'?: "horizontal" | "vertical" | undefined;
     'aria-owns'?: string | undefined;
     'aria-placeholder'?: string | undefined;
     'aria-posinset'?: number | undefined;
-    'aria-pressed'?: boolean | "true" | "false" | "mixed" | undefined;
-    'aria-readonly'?: boolean | "true" | "false" | undefined;
+    'aria-pressed'?: boolean | "false" | "true" | "mixed" | undefined;
+    'aria-readonly'?: boolean | "false" | "true" | undefined;
     'aria-relevant'?: "all" | "text" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
-    'aria-required'?: boolean | "true" | "false" | undefined;
+    'aria-required'?: boolean | "false" | "true" | undefined;
     'aria-roledescription'?: string | undefined;
     'aria-rowcount'?: number | undefined;
     'aria-rowindex'?: number | undefined;
     'aria-rowspan'?: number | undefined;
-    'aria-selected'?: boolean | "true" | "false" | undefined;
+    'aria-selected'?: boolean | "false" | "true" | undefined;
     'aria-setsize'?: number | undefined;
     'aria-sort'?: "none" | "ascending" | "descending" | "other" | undefined;
     'aria-valuemax'?: number | undefined;

package/dist/elements/Input/Input.d.ts

@@ -9,6 +9,9 @@ export interface InputProps extends BoxProps, Omit<React.InputHTMLAttributes<HTM
     hover?: boolean;
     required?: boolean;
     title?: string;
+    prefixOffset?: number;
+    suffixOffset?: number;
+    showCounter?: boolean;
 }
 /** Input component */
 export declare const Input: React.ForwardRefExoticComponent<InputProps & {

package/dist/elements/Input/Input.js

@@ -9,10 +9,12 @@ var _themeGet = require("@styled-system/theme-get");
 var _react = _interopRequireDefault(require("react"));
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _styledSystem = require("styled-system");
+var _RequiredField = require("../../shared/RequiredField");
 var _Box = require("../Box");
 var _Text = require("../Text");
+var _Tooltip = require("../Tooltip");
 var _tokens = require("./tokens");
-var _excluded = ["children", "className", "description", "disabled", "error", "required", "focus", "hover", "title", "height"];
+var _excluded = ["children", "className", "description", "disabled", "error", "required", "focus", "hover", "title", "height", "prefixOffset", "suffixOffset", "showCounter"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -37,25 +39,35 @@ var Input = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     hover = _ref.hover,
     title = _ref.title,
     height = _ref.height,
+    prefixOffset = _ref.prefixOffset,
+    suffixOffset = _ref.suffixOffset,
+    showCounter = _ref.showCounter,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _splitBoxProps = (0, _Box.splitBoxProps)(rest),
     _splitBoxProps2 = _slicedToArray(_splitBoxProps, 2),
     boxProps = _splitBoxProps2[0],
     inputProps = _splitBoxProps2[1];
+  var _React$useState = _react.default.useState(0),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    charCount = _React$useState2[0],
+    setCharCount = _React$useState2[1];
+  var inputName = inputProps.name || "palette-input";
+  var countChars = function countChars(e) {
+    setCharCount(e.target.value.length);
+  };
   return /*#__PURE__*/_react.default.createElement(_Box.Box, _extends({
     width: "100%",
     className: className
-  }, boxProps), (title || description) && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, title && /*#__PURE__*/_react.default.createElement(_Text.Text, {
-    variant: "xs"
-  }, title, required && /*#__PURE__*/_react.default.createElement(_Box.Box, {
-    as: "span",
-    color: "brand"
-  }, "*")), description && /*#__PURE__*/_react.default.createElement(_Text.Text, {
+  }, boxProps), !!description && /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
+    pointer: true,
+    content: description,
+    placement: "top-end"
+  }, /*#__PURE__*/_react.default.createElement(_Text.Text, {
     variant: "xs",
-    color: "black60"
-  }, description)), /*#__PURE__*/_react.default.createElement(_Box.Box, {
-    position: "relative",
-    mt: title || description ? 0.5 : 0
+    color: "black60",
+    textAlign: "right"
+  }, /*#__PURE__*/_react.default.createElement("u", null, "What is this?"))), /*#__PURE__*/_react.default.createElement(_Box.Box, {
+    position: "relative"
   }, /*#__PURE__*/_react.default.createElement(StyledInput, _extends({
     ref: ref,
     disabled: disabled,
@@ -63,10 +75,35 @@ var Input = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     hover: hover,
     error: !!error,
     required: required,
-    height: height !== null && height !== void 0 ? height : 50
-  }, inputProps)), children), error && typeof error === "string" && /*#__PURE__*/_react.default.createElement(_Text.Text, {
+    height: height !== null && height !== void 0 ? height : 50,
+    name: inputName,
+    title: title,
+    suffixOffset: suffixOffset,
+    prefixOffset: prefixOffset,
+    onChange: function onChange(e) {
+      var _inputProps$onChange;
+      (_inputProps$onChange = inputProps.onChange) === null || _inputProps$onChange === void 0 ? void 0 : _inputProps$onChange.call(inputProps, e);
+      if (inputProps.maxLength) countChars(e);
+    },
+    placeholder: inputProps.placeholder || " "
+  }, inputProps)), !!title && /*#__PURE__*/_react.default.createElement(StyledLabel, {
+    prefixOffset: prefixOffset,
+    htmlFor: inputName
+  }, title), children), (required || (inputProps === null || inputProps === void 0 ? void 0 : inputProps.maxLength) && showCounter) && !(error && typeof error === "string") && /*#__PURE__*/_react.default.createElement(_Box.Box, {
+    display: "flex",
+    mt: 0.5,
+    mx: 1
+  }, required && /*#__PURE__*/_react.default.createElement(_RequiredField.RequiredField, {
+    flex: 1
+  }), !!(inputProps !== null && inputProps !== void 0 && inputProps.maxLength) && showCounter && /*#__PURE__*/_react.default.createElement(_Text.Text, {
+    flex: 1,
+    variant: "xs",
+    color: "black60",
+    textAlign: "right"
+  }, charCount, "/", inputProps.maxLength)), error && typeof error === "string" && /*#__PURE__*/_react.default.createElement(_Text.Text, {
     variant: "xs",
     mt: 0.5,
+    ml: 1,
     color: "red100"
   }, error));
 });
@@ -75,7 +112,14 @@ Input.displayName = "Input";
 var StyledInput = _styledComponents.default.input.withConfig({
   displayName: "Input__StyledInput",
   componentId: "bysdh7-0"
-})(["width:100%;padding:0 ", ";appearance:none;line-height:1;border:0;border-bottom:1px solid;border-radius:0;transition:border-color 0.25s,color 0.25s;font-family:", ";", ";::placeholder{transition:color 0.25s;}", ";"], (0, _themeGet.themeGet)("space.1"), (0, _themeGet.themeGet)("fonts.sans"), _styledSystem.height, function (props) {
-  return (0, _styledComponents.css)(["", " ", " ", " ", " ", " ", " &:hover{", "}&:focus{outline:none;", ":not(:placeholder-shown){", " ", "}}&:disabled{cursor:default;", "}"], _tokens.INPUT_STATES.default, props.hover && _tokens.INPUT_STATES.hover, props.focus && _tokens.INPUT_STATES.focus, props.active && _tokens.INPUT_STATES.active, props.disabled && _tokens.INPUT_STATES.disabled, props.error && _tokens.INPUT_STATES.error, _tokens.INPUT_STATES.hover, _tokens.INPUT_STATES.focus, _tokens.INPUT_STATES.active, props.error && _tokens.INPUT_STATES.error, _tokens.INPUT_STATES.disabled);
+})(["width:100%;padding:0 ", ";appearance:none;line-height:1;border:1px solid;border-radius:3px;transition:border-color 0.25s,color 0.25s;font-family:", ";", ";::placeholder{transition:color 0.25s,opacity 0.25s;}&:-webkit-autofill,&:-webkit-autofill:hover,&:-webkit-autofill:focus{-webkit-box-shadow:0 0 0px 100px ", " inset;}", ";"], (0, _themeGet.themeGet)("space.1"), (0, _themeGet.themeGet)("fonts.sans"), _styledSystem.height, (0, _themeGet.themeGet)("colors.white100"), function (props) {
+  return (0, _styledComponents.css)(["", " ", " ", " ", " ", " ", " ", " ", " &:hover{", "}&:not(:placeholder-shown){", " ", "}&:focus{outline:none;", ":not(:placeholder-shown){", " ", "}}&:disabled{cursor:default;", "}", ""], _tokens.INPUT_STATES.default, props.hover && _tokens.INPUT_STATES.hover, props.focus && _tokens.INPUT_STATES.focus, props.active && _tokens.INPUT_STATES.active, props.disabled && _tokens.INPUT_STATES.disabled, props.error && _tokens.INPUT_STATES.error, !!props.prefixOffset && (0, _styledComponents.css)(["padding-left:", "px;"], props.prefixOffset), !!props.suffixOffset && (0, _styledComponents.css)(["padding-right:", "px;"], props.suffixOffset), _tokens.INPUT_STATES.hover, _tokens.INPUT_STATES.completed, props.error && _tokens.INPUT_STATES.error, _tokens.INPUT_STATES.focus, _tokens.INPUT_STATES.active, props.error && _tokens.INPUT_STATES.error, _tokens.INPUT_STATES.disabled, props.title && (0, _styledComponents.css)(["::placeholder{opacity:0;}"]));
+});
+var StyledLabel = _styledComponents.default.label.withConfig({
+  displayName: "Input__StyledLabel",
+  componentId: "bysdh7-1"
+})(["position:absolute;top:50%;left:5px;padding:0 5px;background-color:", ";transform:translateY(-50%);transition:0.25s cubic-bezier(0.64,0.05,0.36,1);transition-property:color,transform,padding,font-size;font-family:", ";pointer-events:none;", ""], (0, _themeGet.themeGet)("colors.white100"), (0, _themeGet.themeGet)("fonts.sans"), function (_ref2) {
+  var prefixOffset = _ref2.prefixOffset;
+  return !!prefixOffset && (0, _styledComponents.css)(["padding-left:", "px;"], prefixOffset - 5);
 });
 //# sourceMappingURL=Input.js.map

package/dist/elements/Input/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","names":["_themeGet","require","_react","_interopRequireDefault","_styledComponents","_interopRequireWildcard","_styledSystem","_Box","_Text","_tokens","_excluded","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","_typeof","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","_slicedToArray","arr","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","TypeError","o","minLen","_arrayLikeToArray","n","toString","slice","constructor","name","Array","from","test","len","arr2","_i","Symbol","iterator","_s","_e","_x","_r","_arr","_n","_d","next","done","push","value","err","return","isArray","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","Input","React","forwardRef","_ref","ref","children","className","description","disabled","error","required","focus","hover","title","height","rest","_splitBoxProps","splitBoxProps","_splitBoxProps2","boxProps","inputProps","createElement","Box","width","Fragment","Text","variant","as","color","position","mt","StyledInput","exports","displayName","styled","input","withConfig","componentId","themeGet","systemHeight","props","css","INPUT_STATES","active"],"sources":["../../../src/elements/Input/Input.tsx"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport React from \"react\"\nimport styled, { css } from \"styled-components\"\nimport { height as systemHeight } from \"styled-system\"\nimport { Box, BoxProps, splitBoxProps } from \"../Box\"\nimport { Text } from \"../Text\"\nimport { INPUT_STATES } from \"./tokens\"\n\nexport interface InputProps\n  extends BoxProps,\n    Omit<\n      React.InputHTMLAttributes<HTMLInputElement>,\n      \"size\" | \"width\" | \"height\" | \"capture\"\n    > {\n  active?: boolean\n  description?: string\n  disabled?: boolean\n  error?: string | boolean\n  focus?: boolean\n  hover?: boolean\n  required?: boolean\n  title?: string\n}\n\n/** Input component */\nexport const Input: React.ForwardRefExoticComponent<\n  InputProps & { ref?: React.Ref<HTMLInputElement> }\n> = React.forwardRef(\n  (\n    {\n      children,\n      className,\n      description,\n      disabled,\n      error,\n      required,\n      focus,\n      hover,\n      title,\n      height,\n      ...rest\n    },\n    ref\n  ) => {\n    const [boxProps, inputProps] = splitBoxProps(rest)\n\n    return (\n      <Box width=\"100%\" className={className} {...boxProps}>\n        {(title || description) && (\n          <>\n            {title && (\n              <Text variant=\"xs\">\n                {title}\n                {required && (\n                  <Box as=\"span\" color=\"brand\">\n                    *\n                  </Box>\n                )}\n              </Text>\n            )}\n\n            {description && (\n              <Text variant=\"xs\" color=\"black60\">\n                {description}\n              </Text>\n            )}\n          </>\n        )}\n\n        <Box position=\"relative\" mt={title || description ? 0.5 : 0}>\n          <StyledInput\n            ref={ref as any}\n            disabled={disabled}\n            focus={focus}\n            hover={hover}\n            error={!!error}\n            required={required}\n            height={(height ?? 50) as any}\n            {...inputProps}\n          />\n\n          {children}\n        </Box>\n\n        {error && typeof error === \"string\" && (\n          <Text variant=\"xs\" mt={0.5} color=\"red100\">\n            {error}\n          </Text>\n        )}\n      </Box>\n    )\n  }\n)\n\nInput.displayName = \"Input\"\n\ntype StyledInputProps = Pick<\n  InputProps,\n  \"disabled\" | \"error\" | \"hover\" | \"focus\" | \"active\"\n>\n\nconst StyledInput = styled.input<StyledInputProps>`\n  width: 100%;\n  padding: 0 ${themeGet(\"space.1\")};\n  appearance: none;\n  line-height: 1;\n  border: 0;\n  border-bottom: 1px solid;\n  border-radius: 0;\n  transition: border-color 0.25s, color 0.25s;\n  font-family: ${themeGet(\"fonts.sans\")};\n  ${systemHeight};\n\n  ::placeholder {\n    transition: color 0.25s;\n  }\n\n  ${(props) => {\n    return css`\n      ${INPUT_STATES.default}\n      ${props.hover && INPUT_STATES.hover}\n      ${props.focus && INPUT_STATES.focus}\n      ${props.active && INPUT_STATES.active}\n      ${props.disabled && INPUT_STATES.disabled}\n      ${props.error && INPUT_STATES.error}\n\n      &:hover {\n        ${INPUT_STATES.hover}\n      }\n\n      &:focus {\n        outline: none;\n        ${INPUT_STATES.focus}\n\n        :not(:placeholder-shown) {\n          ${INPUT_STATES.active}\n          ${props.error && INPUT_STATES.error}\n        }\n      }\n\n      &:disabled {\n        cursor: default;\n        ${INPUT_STATES.disabled}\n      }\n    `\n  }};\n`\n"],"mappings":"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"}
+{"version":3,"file":"Input.js","names":["_themeGet","require","_react","_interopRequireDefault","_styledComponents","_interopRequireWildcard","_styledSystem","_RequiredField","_Box","_Text","_Tooltip","_tokens","_excluded","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","_typeof","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","_slicedToArray","arr","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","TypeError","o","minLen","_arrayLikeToArray","n","toString","slice","constructor","name","Array","from","test","len","arr2","_i","Symbol","iterator","_s","_e","_x","_r","_arr","_n","_d","next","done","push","value","err","return","isArray","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","Input","React","forwardRef","_ref","ref","children","className","description","disabled","error","required","focus","hover","title","height","prefixOffset","suffixOffset","showCounter","rest","_splitBoxProps","splitBoxProps","_splitBoxProps2","boxProps","inputProps","_React$useState","useState","_React$useState2","charCount","setCharCount","inputName","countChars","e","createElement","Box","width","Tooltip","pointer","content","placement","Text","variant","color","textAlign","position","StyledInput","onChange","_inputProps$onChange","maxLength","placeholder","StyledLabel","htmlFor","display","mt","mx","RequiredField","flex","ml","exports","displayName","styled","input","withConfig","componentId","themeGet","systemHeight","props","css","INPUT_STATES","active","completed","label","_ref2"],"sources":["../../../src/elements/Input/Input.tsx"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport React from \"react\"\nimport styled, { css } from \"styled-components\"\nimport { height as systemHeight } from \"styled-system\"\nimport { RequiredField } from \"../../shared/RequiredField\"\nimport { Box, BoxProps, splitBoxProps } from \"../Box\"\nimport { Text } from \"../Text\"\nimport { Tooltip } from \"../Tooltip\"\nimport { INPUT_STATES } from \"./tokens\"\n\nexport interface InputProps\n  extends BoxProps,\n    Omit<\n      React.InputHTMLAttributes<HTMLInputElement>,\n      \"size\" | \"width\" | \"height\" | \"capture\"\n    > {\n  active?: boolean\n  description?: string\n  disabled?: boolean\n  error?: string | boolean\n  focus?: boolean\n  hover?: boolean\n  required?: boolean\n  title?: string\n  prefixOffset?: number\n  suffixOffset?: number\n  showCounter?: boolean\n}\n\n/** Input component */\nexport const Input: React.ForwardRefExoticComponent<\n  InputProps & { ref?: React.Ref<HTMLInputElement> }\n> = React.forwardRef(\n  (\n    {\n      children,\n      className,\n      description,\n      disabled,\n      error,\n      required,\n      focus,\n      hover,\n      title,\n      height,\n      prefixOffset,\n      suffixOffset,\n      showCounter,\n      ...rest\n    },\n    ref\n  ) => {\n    const [boxProps, inputProps] = splitBoxProps(rest)\n    const [charCount, setCharCount] = React.useState(0)\n\n    const inputName = inputProps.name || \"palette-input\"\n\n    const countChars = (e: React.ChangeEvent<HTMLInputElement>) => {\n      setCharCount(e.target.value.length)\n    }\n\n    return (\n      <Box width=\"100%\" className={className} {...boxProps}>\n        {!!description && (\n          <Tooltip pointer content={description} placement=\"top-end\">\n            <Text variant=\"xs\" color=\"black60\" textAlign=\"right\">\n              <u>What is this?</u>\n            </Text>\n          </Tooltip>\n        )}\n\n        <Box position=\"relative\">\n          <StyledInput\n            ref={ref as any}\n            disabled={disabled}\n            focus={focus}\n            hover={hover}\n            error={!!error}\n            required={required}\n            height={(height ?? 50) as any}\n            name={inputName}\n            title={title}\n            suffixOffset={suffixOffset}\n            prefixOffset={prefixOffset}\n            onChange={(e) => {\n              inputProps.onChange?.(e)\n              if (inputProps.maxLength) countChars(e)\n            }}\n            placeholder={inputProps.placeholder || \" \"}\n            {...inputProps}\n          />\n\n          {!!title && (\n            <StyledLabel prefixOffset={prefixOffset} htmlFor={inputName}>\n              {title}\n            </StyledLabel>\n          )}\n\n          {children}\n        </Box>\n\n        {(required || (inputProps?.maxLength && showCounter)) &&\n          !(error && typeof error === \"string\") && (\n            <Box display=\"flex\" mt={0.5} mx={1}>\n              {required && <RequiredField flex={1} />}\n\n              {!!inputProps?.maxLength && showCounter && (\n                <Text flex={1} variant=\"xs\" color=\"black60\" textAlign=\"right\">\n                  {charCount}/{inputProps.maxLength}\n                </Text>\n              )}\n            </Box>\n          )}\n\n        {error && typeof error === \"string\" && (\n          <Text variant=\"xs\" mt={0.5} ml={1} color=\"red100\">\n            {error}\n          </Text>\n        )}\n      </Box>\n    )\n  }\n)\n\nInput.displayName = \"Input\"\n\ntype StyledInputProps = Pick<\n  InputProps,\n  | \"disabled\"\n  | \"error\"\n  | \"hover\"\n  | \"focus\"\n  | \"active\"\n  | \"title\"\n  | \"suffixOffset\"\n  | \"prefixOffset\"\n>\n\nconst StyledInput = styled.input<StyledInputProps>`\n  width: 100%;\n  padding: 0 ${themeGet(\"space.1\")};\n  appearance: none;\n  line-height: 1;\n  border: 1px solid;\n  border-radius: 3px;\n  transition: border-color 0.25s, color 0.25s;\n  font-family: ${themeGet(\"fonts.sans\")};\n  ${systemHeight};\n\n  ::placeholder {\n    transition: color 0.25s, opacity 0.25s;\n  }\n\n  &:-webkit-autofill,\n  &:-webkit-autofill:hover,\n  &:-webkit-autofill:focus {\n    -webkit-box-shadow: 0 0 0px 100px ${themeGet(\"colors.white100\")} inset;\n  }\n\n  ${(props) => {\n    return css`\n      ${INPUT_STATES.default}\n      ${props.hover && INPUT_STATES.hover}\n      ${props.focus && INPUT_STATES.focus}\n      ${props.active && INPUT_STATES.active}\n      ${props.disabled && INPUT_STATES.disabled}\n      ${props.error && INPUT_STATES.error}\n      ${!!props.prefixOffset &&\n      css`\n        padding-left: ${props.prefixOffset}px;\n      `}\n      ${!!props.suffixOffset &&\n      css`\n        padding-right: ${props.suffixOffset}px;\n      `}\n\n      &:hover {\n        ${INPUT_STATES.hover}\n      }\n\n      &:not(:placeholder-shown) {\n        ${INPUT_STATES.completed}\n        ${props.error && INPUT_STATES.error}\n      }\n\n      &:focus {\n        outline: none;\n        ${INPUT_STATES.focus}\n\n        :not(:placeholder-shown) {\n          ${INPUT_STATES.active}\n          ${props.error && INPUT_STATES.error}\n        }\n      }\n\n      &:disabled {\n        cursor: default;\n        ${INPUT_STATES.disabled}\n      }\n\n      ${props.title &&\n      css`\n        ::placeholder {\n          opacity: 0;\n        }\n      `}\n    `\n  }};\n`\n\nconst StyledLabel = styled.label<StyledInputProps>`\n  position: absolute;\n  top: 50%;\n  left: 5px;\n  padding: 0 5px;\n  background-color: ${themeGet(\"colors.white100\")};\n  transform: translateY(-50%);\n  transition: 0.25s cubic-bezier(0.64, 0.05, 0.36, 1);\n  transition-property: color, transform, padding, font-size;\n  font-family: ${themeGet(\"fonts.sans\")};\n  pointer-events: none;\n\n  ${({ prefixOffset }) =>\n    !!prefixOffset &&\n    css`\n      padding-left: ${prefixOffset - 5}px;\n    `}\n`\n"],"mappings":";;;;;;;AAAA,IAAAA,SAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,iBAAA,GAAAC,uBAAA,CAAAJ,OAAA;AACA,IAAAK,aAAA,GAAAL,OAAA;AACA,IAAAM,cAAA,GAAAN,OAAA;AACA,IAAAO,IAAA,GAAAP,OAAA;AACA,IAAAQ,KAAA,GAAAR,OAAA;AACA,IAAAS,QAAA,GAAAT,OAAA;AACA,IAAAU,OAAA,GAAAV,OAAA;AAAuC,IAAAW,SAAA;AAAA,SAAAC,yBAAAC,WAAA,eAAAC,OAAA,kCAAAC,iBAAA,OAAAD,OAAA,QAAAE,gBAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,yBAAAC,WAAA,WAAAA,WAAA,GAAAG,gBAAA,GAAAD,iBAAA,KAAAF,WAAA;AAAA,SAAAT,wBAAAa,GAAA,EAAAJ,WAAA,SAAAA,WAAA,IAAAI,GAAA,IAAAA,GAAA,CAAAC,UAAA,WAAAD,GAAA,QAAAA,GAAA,aAAAE,OAAA,CAAAF,GAAA,yBAAAA,GAAA,4BAAAG,OAAA,EAAAH,GAAA,UAAAI,KAAA,GAAAT,wBAAA,CAAAC,WAAA,OAAAQ,KAAA,IAAAA,KAAA,CAAAC,GAAA,CAAAL,GAAA,YAAAI,KAAA,CAAAE,GAAA,CAAAN,GAAA,SAAAO,MAAA,WAAAC,qBAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,GAAA,IAAAZ,GAAA,QAAAY,GAAA,kBAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAf,GAAA,EAAAY,GAAA,SAAAI,IAAA,GAAAR,qBAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAX,GAAA,EAAAY,GAAA,cAAAI,IAAA,KAAAA,IAAA,CAAAV,GAAA,IAAAU,IAAA,CAAAC,GAAA,KAAAR,MAAA,CAAAC,cAAA,CAAAH,MAAA,EAAAK,GAAA,EAAAI,IAAA,YAAAT,MAAA,CAAAK,GAAA,IAAAZ,GAAA,CAAAY,GAAA,SAAAL,MAAA,CAAAJ,OAAA,GAAAH,GAAA,MAAAI,KAAA,IAAAA,KAAA,CAAAa,GAAA,CAAAjB,GAAA,EAAAO,MAAA,YAAAA,MAAA;AAAA,SAAAtB,uBAAAe,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAG,OAAA,EAAAH,GAAA;AAAA,SAAAkB,SAAA,IAAAA,QAAA,GAAAT,MAAA,CAAAU,MAAA,GAAAV,MAAA,CAAAU,MAAA,CAAAC,IAAA,eAAAC,MAAA,aAAAC,CAAA,MAAAA,CAAA,GAAAC,SAAA,CAAAC,MAAA,EAAAF,CAAA,UAAAG,MAAA,GAAAF,SAAA,CAAAD,CAAA,YAAAV,GAAA,IAAAa,MAAA,QAAAhB,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAU,MAAA,EAAAb,GAAA,KAAAS,MAAA,CAAAT,GAAA,IAAAa,MAAA,CAAAb,GAAA,gBAAAS,MAAA,YAAAH,QAAA,CAAAQ,KAAA,OAAAH,SAAA;AAAA,SAAAI,eAAAC,GAAA,EAAAN,CAAA,WAAAO,eAAA,CAAAD,GAAA,KAAAE,qBAAA,CAAAF,GAAA,EAAAN,CAAA,KAAAS,2BAAA,CAAAH,GAAA,EAAAN,CAAA,KAAAU,gBAAA;AAAA,SAAAA,iBAAA,cAAAC,SAAA;AAAA,SAAAF,4BAAAG,CAAA,EAAAC,MAAA,SAAAD,CAAA,qBAAAA,CAAA,sBAAAE,iBAAA,CAAAF,CAAA,EAAAC,MAAA,OAAAE,CAAA,GAAA5B,MAAA,CAAAI,SAAA,CAAAyB,QAAA,CAAAvB,IAAA,CAAAmB,CAAA,EAAAK,KAAA,aAAAF,CAAA,iBAAAH,CAAA,CAAAM,WAAA,EAAAH,CAAA,GAAAH,CAAA,CAAAM,WAAA,CAAAC,IAAA,MAAAJ,CAAA,cAAAA,CAAA,mBAAAK,KAAA,CAAAC,IAAA,CAAAT,CAAA,OAAAG,CAAA,+DAAAO,IAAA,CAAAP,CAAA,UAAAD,iBAAA,CAAAF,CAAA,EAAAC,MAAA;AAAA,SAAAC,kBAAAR,GAAA,EAAAiB,GAAA,QAAAA,GAAA,YAAAA,GAAA,GAAAjB,GAAA,CAAAJ,MAAA,EAAAqB,GAAA,GAAAjB,GAAA,CAAAJ,MAAA,WAAAF,CAAA,MAAAwB,IAAA,OAAAJ,KAAA,CAAAG,GAAA,GAAAvB,CAAA,GAAAuB,GAAA,EAAAvB,CAAA,MAAAwB,IAAA,CAAAxB,CAAA,IAAAM,GAAA,CAAAN,CAAA,YAAAwB,IAAA;AAAA,SAAAhB,sBAAAF,GAAA,EAAAN,CAAA,QAAAyB,EAAA,WAAAnB,GAAA,gCAAAoB,MAAA,IAAApB,GAAA,CAAAoB,MAAA,CAAAC,QAAA,KAAArB,GAAA,4BAAAmB,EAAA,QAAAG,EAAA,EAAAC,EAAA,EAAAC,EAAA,EAAAC,EAAA,EAAAC,IAAA,OAAAC,EAAA,OAAAC,EAAA,iBAAAJ,EAAA,IAAAL,EAAA,GAAAA,EAAA,CAAAhC,IAAA,CAAAa,GAAA,GAAA6B,IAAA,QAAAnC,CAAA,QAAAb,MAAA,CAAAsC,EAAA,MAAAA,EAAA,UAAAQ,EAAA,uBAAAA,EAAA,IAAAL,EAAA,GAAAE,EAAA,CAAArC,IAAA,CAAAgC,EAAA,GAAAW,IAAA,MAAAJ,IAAA,CAAAK,IAAA,CAAAT,EAAA,CAAAU,KAAA,GAAAN,IAAA,CAAA9B,MAAA,KAAAF,CAAA,GAAAiC,EAAA,sBAAAM,GAAA,IAAAL,EAAA,OAAAL,EAAA,GAAAU,GAAA,yBAAAN,EAAA,YAAAR,EAAA,CAAAe,MAAA,KAAAT,EAAA,GAAAN,EAAA,CAAAe,MAAA,IAAArD,MAAA,CAAA4C,EAAA,MAAAA,EAAA,2BAAAG,EAAA,QAAAL,EAAA,aAAAG,IAAA;AAAA,SAAAzB,gBAAAD,GAAA,QAAAc,KAAA,CAAAqB,OAAA,CAAAnC,GAAA,UAAAA,GAAA;AAAA,SAAAoC,yBAAAvC,MAAA,EAAAwC,QAAA,QAAAxC,MAAA,yBAAAJ,MAAA,GAAA6C,6BAAA,CAAAzC,MAAA,EAAAwC,QAAA,OAAArD,GAAA,EAAAU,CAAA,MAAAb,MAAA,CAAA0D,qBAAA,QAAAC,gBAAA,GAAA3D,MAAA,CAAA0D,qBAAA,CAAA1C,MAAA,QAAAH,CAAA,MAAAA,CAAA,GAAA8C,gBAAA,CAAA5C,MAAA,EAAAF,CAAA,MAAAV,GAAA,GAAAwD,gBAAA,CAAA9C,CAAA,OAAA2C,QAAA,CAAAI,OAAA,CAAAzD,GAAA,uBAAAH,MAAA,CAAAI,SAAA,CAAAyD,oBAAA,CAAAvD,IAAA,CAAAU,MAAA,EAAAb,GAAA,aAAAS,MAAA,CAAAT,GAAA,IAAAa,MAAA,CAAAb,GAAA,cAAAS,MAAA;AAAA,SAAA6C,8BAAAzC,MAAA,EAAAwC,QAAA,QAAAxC,MAAA,yBAAAJ,MAAA,WAAAkD,UAAA,GAAA9D,MAAA,CAAA+D,IAAA,CAAA/C,MAAA,OAAAb,GAAA,EAAAU,CAAA,OAAAA,CAAA,MAAAA,CAAA,GAAAiD,UAAA,CAAA/C,MAAA,EAAAF,CAAA,MAAAV,GAAA,GAAA2D,UAAA,CAAAjD,CAAA,OAAA2C,QAAA,CAAAI,OAAA,CAAAzD,GAAA,kBAAAS,MAAA,CAAAT,GAAA,IAAAa,MAAA,CAAAb,GAAA,YAAAS,MAAA;AAqBvC;AACO,IAAMoD,KAEZ,gBAAGC,cAAK,CAACC,UAAU,CAClB,UAAAC,IAAA,EAiBEC,GAAG,EACA;EAAA,IAhBDC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IACRC,SAAS,GAAAH,IAAA,CAATG,SAAS;IACTC,WAAW,GAAAJ,IAAA,CAAXI,WAAW;IACXC,QAAQ,GAAAL,IAAA,CAARK,QAAQ;IACRC,KAAK,GAAAN,IAAA,CAALM,KAAK;IACLC,QAAQ,GAAAP,IAAA,CAARO,QAAQ;IACRC,KAAK,GAAAR,IAAA,CAALQ,KAAK;IACLC,KAAK,GAAAT,IAAA,CAALS,KAAK;IACLC,KAAK,GAAAV,IAAA,CAALU,KAAK;IACLC,MAAM,GAAAX,IAAA,CAANW,MAAM;IACNC,YAAY,GAAAZ,IAAA,CAAZY,YAAY;IACZC,YAAY,GAAAb,IAAA,CAAZa,YAAY;IACZC,WAAW,GAAAd,IAAA,CAAXc,WAAW;IACRC,IAAI,GAAA3B,wBAAA,CAAAY,IAAA,EAAAlF,SAAA;EAIT,IAAAkG,cAAA,GAA+B,IAAAC,kBAAa,EAACF,IAAI,CAAC;IAAAG,eAAA,GAAAnE,cAAA,CAAAiE,cAAA;IAA3CG,QAAQ,GAAAD,eAAA;IAAEE,UAAU,GAAAF,eAAA;EAC3B,IAAAG,eAAA,GAAkCvB,cAAK,CAACwB,QAAQ,CAAC,CAAC,CAAC;IAAAC,gBAAA,GAAAxE,cAAA,CAAAsE,eAAA;IAA5CG,SAAS,GAAAD,gBAAA;IAAEE,YAAY,GAAAF,gBAAA;EAE9B,IAAMG,SAAS,GAAGN,UAAU,CAACvD,IAAI,IAAI,eAAe;EAEpD,IAAM8D,UAAU,GAAG,SAAbA,UAAUA,CAAIC,CAAsC,EAAK;IAC7DH,YAAY,CAACG,CAAC,CAACnF,MAAM,CAACuC,KAAK,CAACpC,MAAM,CAAC;EACrC,CAAC;EAED,oBACExC,MAAA,CAAAmB,OAAA,CAAAsG,aAAA,CAACnH,IAAA,CAAAoH,GAAG,EAAAxF,QAAA;IAACyF,KAAK,EAAC,MAAM;IAAC5B,SAAS,EAAEA;EAAU,GAAKgB,QAAQ,GACjD,CAAC,CAACf,WAAW,iBACZhG,MAAA,CAAAmB,OAAA,CAAAsG,aAAA,CAACjH,QAAA,CAAAoH,OAAO;IAACC,OAAO;IAACC,OAAO,EAAE9B,WAAY;IAAC+B,SAAS,EAAC;EAAS,gBACxD/H,MAAA,CAAAmB,OAAA,CAAAsG,aAAA,CAAClH,KAAA,CAAAyH,IAAI;IAACC,OAAO,EAAC,IAAI;IAACC,KAAK,EAAC,SAAS;IAACC,SAAS,EAAC;EAAO,gBAClDnI,MAAA,CAAAmB,OAAA,CAAAsG,aAAA,YAAG,eAAa,CAAI,CACf,CAEV,eAEDzH,MAAA,CAAAmB,OAAA,CAAAsG,aAAA,CAACnH,IAAA,CAAAoH,GAAG;IAACU,QAAQ,EAAC;EAAU,gBACtBpI,MAAA,CAAAmB,OAAA,CAAAsG,aAAA,CAACY,WAAW,EAAAnG,QAAA;IACV2D,GAAG,EAAEA,GAAW;IAChBI,QAAQ,EAAEA,QAAS;IACnBG,KAAK,EAAEA,KAAM;IACbC,KAAK,EAAEA,KAAM;IACbH,KAAK,EAAE,CAAC,CAACA,KAAM;IACfC,QAAQ,EAAEA,QAAS;IACnBI,MAAM,EAAGA,MAAM,aAANA,MAAM,cAANA,MAAM,GAAI,EAAW;IAC9B9C,IAAI,EAAE6D,SAAU;IAChBhB,KAAK,EAAEA,KAAM;IACbG,YAAY,EAAEA,YAAa;IAC3BD,YAAY,EAAEA,YAAa;IAC3B8B,QAAQ,EAAE,SAAAA,SAACd,CAAC,EAAK;MAAA,IAAAe,oBAAA;MACf,CAAAA,oBAAA,GAAAvB,UAAU,CAACsB,QAAQ,cAAAC,oBAAA,uBAAnBA,oBAAA,CAAAxG,IAAA,CAAAiF,UAAU,EAAYQ,CAAC,CAAC;MACxB,IAAIR,UAAU,CAACwB,SAAS,EAAEjB,UAAU,CAACC,CAAC,CAAC;IACzC,CAAE;IACFiB,WAAW,EAAEzB,UAAU,CAACyB,WAAW,IAAI;EAAI,GACvCzB,UAAU,EACd,EAED,CAAC,CAACV,KAAK,iBACNtG,MAAA,CAAAmB,OAAA,CAAAsG,aAAA,CAACiB,WAAW;IAAClC,YAAY,EAAEA,YAAa;IAACmC,OAAO,EAAErB;EAAU,GACzDhB,KAAK,CAET,EAEAR,QAAQ,CACL,EAEL,CAACK,QAAQ,IAAK,CAAAa,UAAU,aAAVA,UAAU,uBAAVA,UAAU,CAAEwB,SAAS,KAAI9B,WAAY,KAClD,EAAER,KAAK,IAAI,OAAOA,KAAK,KAAK,QAAQ,CAAC,iBACnClG,MAAA,CAAAmB,OAAA,CAAAsG,aAAA,CAACnH,IAAA,CAAAoH,GAAG;IAACkB,OAAO,EAAC,MAAM;IAACC,EAAE,EAAE,GAAI;IAACC,EAAE,EAAE;EAAE,GAChC3C,QAAQ,iBAAInG,MAAA,CAAAmB,OAAA,CAAAsG,aAAA,CAACpH,cAAA,CAAA0I,aAAa;IAACC,IAAI,EAAE;EAAE,EAAG,EAEtC,CAAC,EAAChC,UAAU,aAAVA,UAAU,eAAVA,UAAU,CAAEwB,SAAS,KAAI9B,WAAW,iBACrC1G,MAAA,CAAAmB,OAAA,CAAAsG,aAAA,CAAClH,KAAA,CAAAyH,IAAI;IAACgB,IAAI,EAAE,CAAE;IAACf,OAAO,EAAC,IAAI;IAACC,KAAK,EAAC,SAAS;IAACC,SAAS,EAAC;EAAO,GAC1Df,SAAS,EAAC,GAAC,EAACJ,UAAU,CAACwB,SAAS,CAEpC,CAEJ,EAEFtC,KAAK,IAAI,OAAOA,KAAK,KAAK,QAAQ,iBACjClG,MAAA,CAAAmB,OAAA,CAAAsG,aAAA,CAAClH,KAAA,CAAAyH,IAAI;IAACC,OAAO,EAAC,IAAI;IAACY,EAAE,EAAE,GAAI;IAACI,EAAE,EAAE,CAAE;IAACf,KAAK,EAAC;EAAQ,GAC9ChC,KAAK,CAET,CACG;AAEV,CAAC,CACF;AAAAgD,OAAA,CAAAzD,KAAA,GAAAA,KAAA;AAEDA,KAAK,CAAC0D,WAAW,GAAG,OAAO;AAc3B,IAAMd,WAAW,GAAGe,yBAAM,CAACC,KAAK,CAAAC,UAAA;EAAAH,WAAA;EAAAI,WAAA;AAAA,+UAEjB,IAAAC,kBAAQ,EAAC,SAAS,CAAC,EAMjB,IAAAA,kBAAQ,EAAC,YAAY,CAAC,EACnCC,oBAAY,EASwB,IAAAD,kBAAQ,EAAC,iBAAiB,CAAC,EAG/D,UAACE,KAAK,EAAK;EACX,WAAOC,qBAAG,iMACNC,oBAAY,CAACzI,OAAO,EACpBuI,KAAK,CAACrD,KAAK,IAAIuD,oBAAY,CAACvD,KAAK,EACjCqD,KAAK,CAACtD,KAAK,IAAIwD,oBAAY,CAACxD,KAAK,EACjCsD,KAAK,CAACG,MAAM,IAAID,oBAAY,CAACC,MAAM,EACnCH,KAAK,CAACzD,QAAQ,IAAI2D,oBAAY,CAAC3D,QAAQ,EACvCyD,KAAK,CAACxD,KAAK,IAAI0D,oBAAY,CAAC1D,KAAK,EACjC,CAAC,CAACwD,KAAK,CAAClD,YAAY,QACtBmD,qBAAG,4BACeD,KAAK,CAAClD,YAAY,CACnC,EACC,CAAC,CAACkD,KAAK,CAACjD,YAAY,QACtBkD,qBAAG,6BACgBD,KAAK,CAACjD,YAAY,CACpC,EAGGmD,oBAAY,CAACvD,KAAK,EAIlBuD,oBAAY,CAACE,SAAS,EACtBJ,KAAK,CAACxD,KAAK,IAAI0D,oBAAY,CAAC1D,KAAK,EAKjC0D,oBAAY,CAACxD,KAAK,EAGhBwD,oBAAY,CAACC,MAAM,EACnBH,KAAK,CAACxD,KAAK,IAAI0D,oBAAY,CAAC1D,KAAK,EAMnC0D,oBAAY,CAAC3D,QAAQ,EAGvByD,KAAK,CAACpD,KAAK,QACbqD,qBAAG,gCAIF;AAEL,CAAC,CACF;AAED,IAAMjB,WAAW,GAAGU,yBAAM,CAACW,KAAK,CAAAT,UAAA;EAAAH,WAAA;EAAAI,WAAA;AAAA,0PAKV,IAAAC,kBAAQ,EAAC,iBAAiB,CAAC,EAIhC,IAAAA,kBAAQ,EAAC,YAAY,CAAC,EAGnC,UAAAQ,KAAA;EAAA,IAAGxD,YAAY,GAAAwD,KAAA,CAAZxD,YAAY;EAAA,OACf,CAAC,CAACA,YAAY,QACdmD,qBAAG,4BACenD,YAAY,GAAG,CAAC,CACjC;AAAA,EACJ"}

package/dist/elements/Input/Input.story.js

@@ -32,9 +32,23 @@ var Default = function Default() {
     }, {
       title: "Your offer",
       name: "offer"
+    }, {
+      title: "Your offer with a big title",
+      name: "offer-big-title"
+    }, {
+      title: "Your offer with a really really long title",
+      name: "offer-really-long-title"
     }, {
       title: "Your offer",
       required: true
+    }, {
+      title: "Your offer",
+      maxLength: 50
+    }, {
+      title: "Your offer",
+      required: true,
+      maxLength: 50,
+      showCounter: true
     }, {
       title: "Your offer",
       description: "This is my description"

package/dist/elements/Input/Input.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.story.js","names":["_react","_interopRequireDefault","require","_storybookStates","_styledComponents","_Button","_Input","obj","__esModule","default","_default","title","exports","Default","createElement","States","states","focus","hover","active","error","disabled","value","name","required","description","width","Input","placeholder","displayName","StyledInput","styled","withConfig","componentId","Styled","Required","mt","type","Button","CustomHeight","height"],"sources":["../../../src/elements/Input/Input.story.tsx"],"sourcesContent":["import React from \"react\"\nimport { States } from \"storybook-states\"\nimport styled from \"styled-components\"\nimport { Button } from \"../Button\"\nimport { Input, InputProps } from \"./Input\"\n\nexport default {\n  title: \"Components/Input\",\n}\n\nexport const Default = () => {\n  return (\n    <States<InputProps>\n      states={[\n        {},\n        { focus: true },\n        { hover: true },\n        { active: true },\n        { error: \"Something went wrong.\" },\n        { disabled: true },\n        { disabled: true, value: \"Example value\" },\n        { title: \"Your offer\", name: \"offer\" },\n        { title: \"Your offer\", required: true },\n        { title: \"Your offer\", description: \"This is my description\" },\n        { width: \"50%\" },\n      ]}\n    >\n      <Input placeholder=\"Start typing…\" />\n    </States>\n  )\n}\n\nconst StyledInput = styled(Input)`\n  border: 1px solid red;\n\n  > input {\n    border: 2px solid green;\n  }\n`\n\nexport const Styled = () => {\n  return <StyledInput placeholder=\"style should target container div\" />\n}\n\nexport const Required = () => {\n  return (\n    <form>\n      <Input\n        title=\"Example\"\n        required\n        placeholder=\"Submission should be blocked unless this has a value\"\n      />\n\n      <Input\n        mt={1}\n        title=\"Email\"\n        required\n        placeholder=\"Requires a valid email\"\n        type=\"email\"\n      />\n\n      <Button mt={1}>Submit</Button>\n    </form>\n  )\n}\n\nexport const CustomHeight = () => {\n  return <Input height={40} placeholder=\"Input is 40px in height\" />\n}\n"],"mappings":"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"}
+{"version":3,"file":"Input.story.js","names":["_react","_interopRequireDefault","require","_storybookStates","_styledComponents","_Button","_Input","obj","__esModule","default","_default","title","exports","Default","createElement","States","states","focus","hover","active","error","disabled","value","name","required","maxLength","showCounter","description","width","Input","placeholder","displayName","StyledInput","styled","withConfig","componentId","Styled","Required","mt","type","Button","CustomHeight","height"],"sources":["../../../src/elements/Input/Input.story.tsx"],"sourcesContent":["import React from \"react\"\nimport { States } from \"storybook-states\"\nimport styled from \"styled-components\"\nimport { Button } from \"../Button\"\nimport { Input, InputProps } from \"./Input\"\n\nexport default {\n  title: \"Components/Input\",\n}\n\nexport const Default = () => {\n  return (\n    <States<InputProps>\n      states={[\n        {},\n        { focus: true },\n        { hover: true },\n        { active: true },\n        { error: \"Something went wrong.\" },\n        { disabled: true },\n        { disabled: true, value: \"Example value\" },\n        { title: \"Your offer\", name: \"offer\" },\n        { title: \"Your offer with a big title\", name: \"offer-big-title\" },\n        {\n          title: \"Your offer with a really really long title\",\n          name: \"offer-really-long-title\",\n        },\n        { title: \"Your offer\", required: true },\n        { title: \"Your offer\", maxLength: 50 },\n        {\n          title: \"Your offer\",\n          required: true,\n          maxLength: 50,\n          showCounter: true,\n        },\n        { title: \"Your offer\", description: \"This is my description\" },\n        { width: \"50%\" },\n      ]}\n    >\n      <Input placeholder=\"Start typing…\" />\n    </States>\n  )\n}\n\nconst StyledInput = styled(Input)`\n  border: 1px solid red;\n\n  > input {\n    border: 2px solid green;\n  }\n`\n\nexport const Styled = () => {\n  return <StyledInput placeholder=\"style should target container div\" />\n}\n\nexport const Required = () => {\n  return (\n    <form>\n      <Input\n        title=\"Example\"\n        required\n        placeholder=\"Submission should be blocked unless this has a value\"\n      />\n\n      <Input\n        mt={1}\n        title=\"Email\"\n        required\n        placeholder=\"Requires a valid email\"\n        type=\"email\"\n      />\n\n      <Button mt={1}>Submit</Button>\n    </form>\n  )\n}\n\nexport const CustomHeight = () => {\n  return <Input height={40} placeholder=\"Input is 40px in height\" />\n}\n"],"mappings":"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"}

package/dist/elements/Input/tokens.js

@@ -7,12 +7,13 @@ exports.INPUT_STATES = void 0;
 var _themeGet = require("@styled-system/theme-get");
 var _styledComponents = require("styled-components");
 var INPUT_STATES = {
-  default: (0, _styledComponents.css)(["font-size:", ";color:", ";border-color:", ";::placeholder{color:", ";}"], (0, _themeGet.themeGet)("textVariants.sm.fontSize"), (0, _themeGet.themeGet)("colors.black100"), (0, _themeGet.themeGet)("colors.black30"), (0, _themeGet.themeGet)("colors.black60")),
-  focus: (0, _styledComponents.css)(["color:", ";border-color:", ";::placeholder{color:", ";}"], (0, _themeGet.themeGet)("colors.black100"), (0, _themeGet.themeGet)("colors.black60"), (0, _themeGet.themeGet)("colors.black100")),
-  hover: (0, _styledComponents.css)(["color:", ";border-color:", ";::placeholder{color:", ";}"], (0, _themeGet.themeGet)("colors.black100"), (0, _themeGet.themeGet)("colors.black60"), (0, _themeGet.themeGet)("colors.black100")),
-  active: (0, _styledComponents.css)(["color:", ";border-color:", ";::placeholder{color:", ";}"], (0, _themeGet.themeGet)("colors.black100"), (0, _themeGet.themeGet)("colors.blue100"), (0, _themeGet.themeGet)("colors.black100")),
-  disabled: (0, _styledComponents.css)(["color:", ";border-color:", ";background-color:transparent;-webkit-text-fill-color:", ";opacity:1;::placeholder{color:", ";}"], (0, _themeGet.themeGet)("colors.black30"), (0, _themeGet.themeGet)("colors.black30"), (0, _themeGet.themeGet)("colors.black30"), (0, _themeGet.themeGet)("colors.black30")),
-  error: (0, _styledComponents.css)(["border-color:", ";"], (0, _themeGet.themeGet)("colors.red100"))
+  default: (0, _styledComponents.css)(["font-size:", ";color:", ";border-color:", ";::placeholder{color:", ";}& + label{color:", ";font-size:", ";}"], (0, _themeGet.themeGet)("textVariants.sm-display.fontSize"), (0, _themeGet.themeGet)("colors.black100"), (0, _themeGet.themeGet)("colors.black30"), (0, _themeGet.themeGet)("colors.black60"), (0, _themeGet.themeGet)("colors.black60"), (0, _themeGet.themeGet)("textVariants.sm-display.fontSize")),
+  focus: (0, _styledComponents.css)(["color:", ";border-color:", ";::placeholder{color:", ";opacity:1;}& + label{color:", ";transform:translateY(-150%);font-size:", ";padding:0 5px;}"], (0, _themeGet.themeGet)("colors.black100"), (0, _themeGet.themeGet)("colors.blue100"), (0, _themeGet.themeGet)("colors.black60"), (0, _themeGet.themeGet)("colors.blue100"), (0, _themeGet.themeGet)("textVariants.xs.fontSize")),
+  hover: (0, _styledComponents.css)(["color:", ";border-color:", ";::placeholder{color:", ";}& + label{color:", ";}"], (0, _themeGet.themeGet)("colors.black100"), (0, _themeGet.themeGet)("colors.black60"), (0, _themeGet.themeGet)("colors.black100"), (0, _themeGet.themeGet)("colors.black100")),
+  active: (0, _styledComponents.css)(["color:", ";border-color:", ";::placeholder{color:", ";}& + label{color:", ";transform:translateY(-150%);font-size:", ";padding:0 5px;}"], (0, _themeGet.themeGet)("colors.black100"), (0, _themeGet.themeGet)("colors.blue100"), (0, _themeGet.themeGet)("colors.black100"), (0, _themeGet.themeGet)("colors.blue100"), (0, _themeGet.themeGet)("textVariants.xs.fontSize")),
+  completed: (0, _styledComponents.css)(["color:", ";border-color:", ";& + label{color:", ";transform:translateY(-150%);font-size:", ";padding:0 5px;}"], (0, _themeGet.themeGet)("colors.black100"), (0, _themeGet.themeGet)("colors.black60"), (0, _themeGet.themeGet)("colors.blue60"), (0, _themeGet.themeGet)("textVariants.xs.fontSize")),
+  disabled: (0, _styledComponents.css)(["color:", ";border-color:", ";background-color:transparent;-webkit-text-fill-color:", ";opacity:1;::placeholder{color:", ";}&:not(:placeholder-shown) + label{color:", ";transform:translateY(-150%);font-size:", ";}&:placeholder-shown + label{color:", ";}"], (0, _themeGet.themeGet)("colors.black30"), (0, _themeGet.themeGet)("colors.black30"), (0, _themeGet.themeGet)("colors.black30"), (0, _themeGet.themeGet)("colors.black30"), (0, _themeGet.themeGet)("colors.black30"), (0, _themeGet.themeGet)("textVariants.xs.fontSize"), (0, _themeGet.themeGet)("colors.black30")),
+  error: (0, _styledComponents.css)(["border-color:", ";& + label{color:", ";transform:translateY(-150%);font-size:", ";padding:0 5px;}"], (0, _themeGet.themeGet)("colors.red100"), (0, _themeGet.themeGet)("colors.red100"), (0, _themeGet.themeGet)("textVariants.xs.fontSize"))
 };
 exports.INPUT_STATES = INPUT_STATES;
 //# sourceMappingURL=tokens.js.map

package/dist/elements/Input/tokens.js.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.js","names":["_themeGet","require","_styledComponents","INPUT_STATES","default","css","themeGet","focus","hover","active","disabled","error","exports"],"sources":["../../../src/elements/Input/tokens.ts"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport { css } from \"styled-components\"\nimport { State } from \"./types\"\n\nexport const INPUT_STATES: Record<State, any> = {\n  default: css`\n    font-size: ${themeGet(\"textVariants.sm.fontSize\")};\n    color: ${themeGet(\"colors.black100\")};\n    border-color: ${themeGet(\"colors.black30\")};\n\n    ::placeholder {\n      color: ${themeGet(\"colors.black60\")};\n    }\n  `,\n  focus: css`\n    color: ${themeGet(\"colors.black100\")};\n    border-color: ${themeGet(\"colors.black60\")};\n\n    ::placeholder {\n      color: ${themeGet(\"colors.black100\")};\n    }\n  `,\n  hover: css`\n    color: ${themeGet(\"colors.black100\")};\n    border-color: ${themeGet(\"colors.black60\")};\n\n    ::placeholder {\n      color: ${themeGet(\"colors.black100\")};\n    }\n  `,\n  active: css`\n    color: ${themeGet(\"colors.black100\")};\n    border-color: ${themeGet(\"colors.blue100\")};\n\n    ::placeholder {\n      color: ${themeGet(\"colors.black100\")};\n    }\n  `,\n  disabled: css`\n    color: ${themeGet(\"colors.black30\")};\n    border-color: ${themeGet(\"colors.black30\")};\n    background-color: transparent;\n    /* For Safari: */\n    -webkit-text-fill-color: ${themeGet(\"colors.black30\")};\n    /* For iOS */\n    opacity: 1;\n\n    ::placeholder {\n      color: ${themeGet(\"colors.black30\")};\n    }\n  `,\n  error: css`\n    border-color: ${themeGet(\"colors.red100\")};\n  `,\n}\n"],"mappings":";;;;;;AAAA,IAAAA,SAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAD,OAAA;AAGO,IAAME,YAAgC,GAAG;EAC9CC,OAAO,MAAEC,qBAAG,8EACG,IAAAC,kBAAQ,EAAC,0BAA0B,CAAC,EACxC,IAAAA,kBAAQ,EAAC,iBAAiB,CAAC,EACpB,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAG/B,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,CAEtC;EACDC,KAAK,MAAEF,qBAAG,+DACC,IAAAC,kBAAQ,EAAC,iBAAiB,CAAC,EACpB,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAG/B,IAAAA,kBAAQ,EAAC,iBAAiB,CAAC,CAEvC;EACDE,KAAK,MAAEH,qBAAG,+DACC,IAAAC,kBAAQ,EAAC,iBAAiB,CAAC,EACpB,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAG/B,IAAAA,kBAAQ,EAAC,iBAAiB,CAAC,CAEvC;EACDG,MAAM,MAAEJ,qBAAG,+DACA,IAAAC,kBAAQ,EAAC,iBAAiB,CAAC,EACpB,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAG/B,IAAAA,kBAAQ,EAAC,iBAAiB,CAAC,CAEvC;EACDI,QAAQ,MAAEL,qBAAG,mIACF,IAAAC,kBAAQ,EAAC,gBAAgB,CAAC,EACnB,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAGf,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAK1C,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,CAEtC;EACDK,KAAK,MAAEN,qBAAG,0BACQ,IAAAC,kBAAQ,EAAC,eAAe,CAAC;AAE7C,CAAC;AAAAM,OAAA,CAAAT,YAAA,GAAAA,YAAA"}
+{"version":3,"file":"tokens.js","names":["_themeGet","require","_styledComponents","INPUT_STATES","default","css","themeGet","focus","hover","active","completed","disabled","error","exports"],"sources":["../../../src/elements/Input/tokens.ts"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport { css } from \"styled-components\"\nimport { State } from \"./types\"\n\nexport const INPUT_STATES: Record<State, any> = {\n  default: css`\n    font-size: ${themeGet(\"textVariants.sm-display.fontSize\")};\n    color: ${themeGet(\"colors.black100\")};\n    border-color: ${themeGet(\"colors.black30\")};\n\n    ::placeholder {\n      color: ${themeGet(\"colors.black60\")};\n    }\n\n    & + label {\n      color: ${themeGet(\"colors.black60\")};\n      font-size: ${themeGet(\"textVariants.sm-display.fontSize\")};\n    }\n  `,\n  focus: css`\n    color: ${themeGet(\"colors.black100\")};\n    border-color: ${themeGet(\"colors.blue100\")};\n\n    ::placeholder {\n      color: ${themeGet(\"colors.black60\")};\n      opacity: 1;\n    }\n\n    & + label {\n      color: ${themeGet(\"colors.blue100\")};\n      transform: translateY(-150%);\n      font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n      padding: 0 5px;\n    }\n  `,\n  hover: css`\n    color: ${themeGet(\"colors.black100\")};\n    border-color: ${themeGet(\"colors.black60\")};\n\n    ::placeholder {\n      color: ${themeGet(\"colors.black100\")};\n    }\n\n    & + label {\n      color: ${themeGet(\"colors.black100\")};\n    }\n  `,\n  active: css`\n    color: ${themeGet(\"colors.black100\")};\n    border-color: ${themeGet(\"colors.blue100\")};\n\n    ::placeholder {\n      color: ${themeGet(\"colors.black100\")};\n    }\n\n    & + label {\n      color: ${themeGet(\"colors.blue100\")};\n      transform: translateY(-150%);\n      font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n      padding: 0 5px;\n    }\n  `,\n  completed: css`\n    color: ${themeGet(\"colors.black100\")};\n    border-color: ${themeGet(\"colors.black60\")};\n\n    & + label {\n      color: ${themeGet(\"colors.blue60\")};\n      transform: translateY(-150%);\n      font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n      padding: 0 5px;\n    }\n  `,\n  disabled: css`\n    color: ${themeGet(\"colors.black30\")};\n    border-color: ${themeGet(\"colors.black30\")};\n    background-color: transparent;\n    /* For Safari: */\n    -webkit-text-fill-color: ${themeGet(\"colors.black30\")};\n    /* For iOS */\n    opacity: 1;\n\n    ::placeholder {\n      color: ${themeGet(\"colors.black30\")};\n    }\n\n    &:not(:placeholder-shown) + label {\n      color: ${themeGet(\"colors.black30\")};\n      transform: translateY(-150%);\n      font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n    }\n\n    &:placeholder-shown + label {\n      color: ${themeGet(\"colors.black30\")};\n    }\n  `,\n  error: css`\n    border-color: ${themeGet(\"colors.red100\")};\n\n    & + label {\n      color: ${themeGet(\"colors.red100\")};\n      transform: translateY(-150%);\n      font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n      padding: 0 5px;\n    }\n  `,\n}\n"],"mappings":";;;;;;AAAA,IAAAA,SAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAD,OAAA;AAGO,IAAME,YAAgC,GAAG;EAC9CC,OAAO,MAAEC,qBAAG,mHACG,IAAAC,kBAAQ,EAAC,kCAAkC,CAAC,EAChD,IAAAA,kBAAQ,EAAC,iBAAiB,CAAC,EACpB,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAG/B,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAI1B,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EACtB,IAAAA,kBAAQ,EAAC,kCAAkC,CAAC,CAE5D;EACDC,KAAK,MAAEF,qBAAG,wJACC,IAAAC,kBAAQ,EAAC,iBAAiB,CAAC,EACpB,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAG/B,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAK1B,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAEtB,IAAAA,kBAAQ,EAAC,0BAA0B,CAAC,CAGpD;EACDE,KAAK,MAAEH,qBAAG,qFACC,IAAAC,kBAAQ,EAAC,iBAAiB,CAAC,EACpB,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAG/B,IAAAA,kBAAQ,EAAC,iBAAiB,CAAC,EAI3B,IAAAA,kBAAQ,EAAC,iBAAiB,CAAC,CAEvC;EACDG,MAAM,MAAEJ,qBAAG,8IACA,IAAAC,kBAAQ,EAAC,iBAAiB,CAAC,EACpB,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAG/B,IAAAA,kBAAQ,EAAC,iBAAiB,CAAC,EAI3B,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAEtB,IAAAA,kBAAQ,EAAC,0BAA0B,CAAC,CAGpD;EACDI,SAAS,MAAEL,qBAAG,oHACH,IAAAC,kBAAQ,EAAC,iBAAiB,CAAC,EACpB,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAG/B,IAAAA,kBAAQ,EAAC,eAAe,CAAC,EAErB,IAAAA,kBAAQ,EAAC,0BAA0B,CAAC,CAGpD;EACDK,QAAQ,MAAEN,qBAAG,oQACF,IAAAC,kBAAQ,EAAC,gBAAgB,CAAC,EACnB,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAGf,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAK1C,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAI1B,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAEtB,IAAAA,kBAAQ,EAAC,0BAA0B,CAAC,EAIxC,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,CAEtC;EACDM,KAAK,MAAEP,qBAAG,yGACQ,IAAAC,kBAAQ,EAAC,eAAe,CAAC,EAG9B,IAAAA,kBAAQ,EAAC,eAAe,CAAC,EAErB,IAAAA,kBAAQ,EAAC,0BAA0B,CAAC;AAIvD,CAAC;AAAAO,OAAA,CAAAV,YAAA,GAAAA,YAAA"}

package/dist/elements/Input/types.d.ts

@@ -1 +1 @@
-export declare type State = "active" | "default" | "disabled" | "error" | "focus" | "hover";
+export declare type State = "active" | "default" | "disabled" | "error" | "focus" | "hover" | "completed";

package/dist/elements/Input/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":[],"sources":["../../../src/elements/Input/types.ts"],"sourcesContent":["export type State =\n  | \"active\"\n  | \"default\"\n  | \"disabled\"\n  | \"error\"\n  | \"focus\"\n  | \"hover\"\n"],"mappings":""}
+{"version":3,"file":"types.js","names":[],"sources":["../../../src/elements/Input/types.ts"],"sourcesContent":["export type State =\n  | \"active\"\n  | \"default\"\n  | \"disabled\"\n  | \"error\"\n  | \"focus\"\n  | \"hover\"\n  | \"completed\"\n"],"mappings":""}

package/dist/elements/Label/Label.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Label = exports.LABEL_VARIANTS = void 0;
-var _palette = require("@artsy/palette");
+var _Text = require("../Text");
 var React = _interopRequireWildcard(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _styledSystem = require("styled-system");
@@ -38,7 +38,7 @@ var Label = function Label(_ref) {
   return /*#__PURE__*/React.createElement(Container, _extends({
     display: "inline-flex",
     maxWidth: "100%"
-  }, rest), /*#__PURE__*/React.createElement(_palette.Text, {
+  }, rest), /*#__PURE__*/React.createElement(_Text.Text, {
     variant: "xs",
     px: 0.5,
     overflowEllipsis: true

package/dist/elements/Label/Label.js.map

@@ -1 +1 @@
-{"version":3,"file":"Label.js","names":["_palette","require","React","_interopRequireWildcard","_styledComponents","_interopRequireDefault","_styledSystem","_Box","_excluded","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","_typeof","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","LABEL_VARIANTS","light","backgroundColor","color","dark","brand","exports","Label","_ref","children","rest","createElement","Container","display","maxWidth","Text","variant","px","overflowEllipsis","displayName","defaultProps","styled","Box","withConfig","componentId","variants"],"sources":["../../../src/elements/Label/Label.tsx"],"sourcesContent":["import { Text } from \"@artsy/palette\"\nimport * as React from \"react\"\nimport styled from \"styled-components\"\nimport { variant } from \"styled-system\"\nimport { Box, BoxProps } from \"../Box\"\n\nexport const LABEL_VARIANTS = {\n  light: {\n    backgroundColor: \"black10\",\n    color: \"black100\",\n  },\n  dark: {\n    backgroundColor: \"black100\",\n    color: \"white100\",\n  },\n  brand: {\n    backgroundColor: \"blue100\",\n    color: \"white100\",\n  },\n}\n\nexport type LabelVariant = keyof typeof LABEL_VARIANTS\n\nexport interface LabelProps extends BoxProps {\n  variant?: LabelVariant\n  children: React.ReactNode\n}\n\nexport const Label: React.FC<LabelProps> = ({ children, ...rest }) => {\n  return (\n    <Container display=\"inline-flex\" maxWidth=\"100%\" {...rest}>\n      <Text variant=\"xs\" px={0.5} overflowEllipsis>\n        {children}\n      </Text>\n    </Container>\n  )\n}\n\nLabel.defaultProps = {\n  variant: \"light\",\n}\n\nconst Container = styled(Box)`\n  ${variant({ variants: LABEL_VARIANTS })}\n`\n"],"mappings":"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"}
+{"version":3,"file":"Label.js","names":["_Text","require","React","_interopRequireWildcard","_styledComponents","_interopRequireDefault","_styledSystem","_Box","_excluded","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","_typeof","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","LABEL_VARIANTS","light","backgroundColor","color","dark","brand","exports","Label","_ref","children","rest","createElement","Container","display","maxWidth","Text","variant","px","overflowEllipsis","displayName","defaultProps","styled","Box","withConfig","componentId","variants"],"sources":["../../../src/elements/Label/Label.tsx"],"sourcesContent":["import { Text } from \"../Text\"\nimport * as React from \"react\"\nimport styled from \"styled-components\"\nimport { variant } from \"styled-system\"\nimport { Box, BoxProps } from \"../Box\"\n\nexport const LABEL_VARIANTS = {\n  light: {\n    backgroundColor: \"black10\",\n    color: \"black100\",\n  },\n  dark: {\n    backgroundColor: \"black100\",\n    color: \"white100\",\n  },\n  brand: {\n    backgroundColor: \"blue100\",\n    color: \"white100\",\n  },\n}\n\nexport type LabelVariant = keyof typeof LABEL_VARIANTS\n\nexport interface LabelProps extends BoxProps {\n  variant?: LabelVariant\n  children: React.ReactNode\n}\n\nexport const Label: React.FC<LabelProps> = ({ children, ...rest }) => {\n  return (\n    <Container display=\"inline-flex\" maxWidth=\"100%\" {...rest}>\n      <Text variant=\"xs\" px={0.5} overflowEllipsis>\n        {children}\n      </Text>\n    </Container>\n  )\n}\n\nLabel.defaultProps = {\n  variant: \"light\",\n}\n\nconst Container = styled(Box)`\n  ${variant({ variants: LABEL_VARIANTS })}\n`\n"],"mappings":"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"}

package/dist/elements/LabeledInput/LabeledInput.d.ts

@@ -2,8 +2,9 @@ import React from "react";
 import { InputProps } from "../Input";
 export interface LabeledInputProps extends InputProps {
     label: React.ReactNode;
+    variant?: "suffix" | "prefix";
 }
-/** Input with a right-aligned label */
+/** Input with a right-aligned or left-aligned label */
 export declare const LabeledInput: React.ForwardRefExoticComponent<LabeledInputProps & {
     ref?: React.Ref<HTMLInputElement>;
 }>;

package/dist/elements/LabeledInput/LabeledInput.js

@@ -10,10 +10,13 @@ var _isText2 = require("../../helpers/isText");
 var _Box = require("../Box");
 var _Input = require("../Input");
 var _Text = require("../Text");
-var _excluded = ["label", "height"];
+var _excluded = ["label", "height", "variant"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
@@ -22,10 +25,12 @@ function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefine
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-/** Input with a right-aligned label */
+/** Input with a right-aligned or left-aligned label */
 var LabeledInput = /*#__PURE__*/_react.default.forwardRef(function (_ref, forwardedRef) {
   var label = _ref.label,
     height = _ref.height,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? "suffix" : _ref$variant,
     rest = _objectWithoutProperties(_ref, _excluded);
   var labelRef = (0, _react.useRef)(null);
   var _useState = (0, _react.useState)(0),
@@ -41,27 +46,24 @@ var LabeledInput = /*#__PURE__*/_react.default.forwardRef(function (_ref, forwar
     boxProps = _splitBoxProps2[0],
     inputProps = _splitBoxProps2[1];
   var isText = (0, _isText2.isText)(label);
+  var isPrefix = variant === "prefix";
   return /*#__PURE__*/_react.default.createElement(_Box.Box, _extends({
     position: "relative"
   }, boxProps), /*#__PURE__*/_react.default.createElement(_Input.Input, _extends({
     ref: forwardedRef,
-    height: height,
-    style: {
-      paddingRight: "".concat(offset + 10, "px")
-    }
-  }, inputProps), /*#__PURE__*/_react.default.createElement(_Box.Box, {
+    height: height
+  }, _defineProperty({}, isPrefix ? "prefixOffset" : "suffixOffset", offset + 15), inputProps), /*#__PURE__*/_react.default.createElement(_Box.Box, _extends({
     ref: labelRef,
     position: "absolute",
     display: "flex",
     alignItems: "center",
-    right: 1,
     top: 0,
     bottom: 0,
     style: {
       pointerEvents: isText ? "none" : undefined
     }
-  }, isText ? /*#__PURE__*/_react.default.createElement(_Text.Text, {
-    variant: "xs",
+  }, _defineProperty({}, isPrefix ? "left" : "right", 1)), isText ? /*#__PURE__*/_react.default.createElement(_Text.Text, {
+    variant: "sm-display",
     color: "black60",
     lineHeight: 1
   }, label) : label)));