@artsy/palette 36.1.3 → 37.0.0-canary.1250.29027.0

package/dist/elements/Select/Select.js

@@ -9,10 +9,11 @@ var _themeGet = require("@styled-system/theme-get");
 var _react = _interopRequireWildcard(require("react"));
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _Box = require("../Box");
-var _Flex = require("../Flex");
 var _Text = require("../Text");
 var _tokens = require("./tokens");
-var _excluded = ["description", "disabled", "error", "focus", "hover", "id", "name", "options", "required", "selected", "title", "variant", "onSelect"];
+var _Tooltip = require("../Tooltip");
+var _RequiredField = require("../../shared/RequiredField");
+var _excluded = ["description", "disabled", "error", "focus", "hover", "id", "name", "options", "required", "selected", "title", "onSelect"];
 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); }
@@ -37,8 +38,6 @@ var Select = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     required = _ref.required,
     selected = _ref.selected,
     title = _ref.title,
-    _ref$variant = _ref.variant,
-    variant = _ref$variant === void 0 ? "default" : _ref$variant,
     onSelect = _ref.onSelect,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _splitBoxProps = (0, _Box.splitBoxProps)(rest),
@@ -47,32 +46,20 @@ var Select = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     selectProps = _splitBoxProps2[1];
   return /*#__PURE__*/_react.default.createElement(_Box.Box, _extends({
     width: "100%"
-  }, boxProps), /*#__PURE__*/_react.default.createElement(_Flex.Flex, _extends({
-    as: "label"
-  }, variant === "inline" ? {
-    flexDirection: "row",
-    alignItems: "center"
-  } : {
-    flexDirection: "column",
-    alignItems: "flex-start"
-  }, id ? {
-    for: id
-  } : {}), /*#__PURE__*/_react.default.createElement("div", null, title && /*#__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",
-    lineHeight: variant === "inline" && description === undefined ? 1 : undefined
-  }, title, required && /*#__PURE__*/_react.default.createElement(_Box.Box, {
-    as: "span",
-    color: "brand"
-  }, "*")), description && /*#__PURE__*/_react.default.createElement(_Text.Text, {
-    variant: "xs",
-    color: "black60"
-  }, description)), /*#__PURE__*/_react.default.createElement(Container, {
-    variant: variant,
+    color: "black60",
+    textAlign: "right"
+  }, /*#__PURE__*/_react.default.createElement("u", null, "What is this?"))), /*#__PURE__*/_react.default.createElement(Container, {
     disabled: !!disabled,
     hover: !!hover,
     error: error,
     focus: !!focus,
-    mt: variant !== "inline" && (title || description) ? 0.5 : 0
+    title: title
   }, /*#__PURE__*/_react.default.createElement("select", _extends({
     ref: ref,
     id: id,
@@ -89,9 +76,15 @@ var Select = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       value: value,
       key: value
     }, text);
-  })))), error && typeof error === "string" && /*#__PURE__*/_react.default.createElement(_Text.Text, {
+  })), !!title && /*#__PURE__*/_react.default.createElement(StyledLabel, {
+    htmlFor: id
+  }, title, /*#__PURE__*/_react.default.createElement("span", null))), required && !(error && typeof error === "string") && /*#__PURE__*/_react.default.createElement(_RequiredField.RequiredField, {
+    mt: 0.5,
+    ml: 1
+  }), error && typeof error === "string" && /*#__PURE__*/_react.default.createElement(_Text.Text, {
     variant: "xs",
     mt: 0.5,
+    ml: 1,
     color: "red100"
   }, error));
 });
@@ -108,7 +101,11 @@ exports.caretMixin = caretMixin;
 var Container = (0, _styledComponents.default)(_Box.Box).withConfig({
   displayName: "Select__Container",
   componentId: "sc-1weszjl-0"
-})(["position:relative;width:100%;> select{", ";width:100%;padding:0 24px 0 ", ";font-family:", ";border:0;border-bottom:1px solid;cursor:pointer;line-height:1;transition:color 0.25s,background-color 0.25s,border-color 0.25s;", ";}", ""], resetMixin, (0, _themeGet.themeGet)("space.1"), (0, _themeGet.themeGet)("fonts.sans"), function (props) {
-  return (0, _styledComponents.css)(["", " ", " ", " ", " ", " &:hover{", "}&:focus{", "}&:disabled{cursor:default;", "}"], _tokens.SELECT_STATES.default, props.hover && _tokens.SELECT_STATES.hover, props.focus && _tokens.SELECT_STATES.focus, props.disabled && _tokens.SELECT_STATES.disabled, props.error && _tokens.SELECT_STATES.error, _tokens.SELECT_STATES.hover, _tokens.SELECT_STATES.focus, _tokens.SELECT_STATES.disabled);
+})(["position:relative;width:100%;> select{", ";width:100%;padding:0 24px 0 ", ";font-family:", ";border:1px solid;border-radius:3px;border-color:", ";cursor:pointer;line-height:1;transition:color 0.25s,background-color 0.25s,border-color 0.25s;", ";}", ""], resetMixin, (0, _themeGet.themeGet)("space.1"), (0, _themeGet.themeGet)("fonts.sans"), (0, _themeGet.themeGet)("colors.black30"), function (props) {
+  return (0, _styledComponents.css)(["", " ", " ", " ", " ", " &:hover{", "}&:focus{", "}&:disabled{cursor:default;", "}&:not(:has(option[value=\"\"]:checked)):not(:focus){", " ", "}&:not(:focus):has(option[value=\"\"]:checked){", "}"], _tokens.SELECT_STATES.default, props.hover && _tokens.SELECT_STATES.hover, props.focus && _tokens.SELECT_STATES.focus, props.disabled && _tokens.SELECT_STATES.disabled, props.error && _tokens.SELECT_STATES.error, _tokens.SELECT_STATES.hover, _tokens.SELECT_STATES.focus, _tokens.SELECT_STATES.disabled, !(props.disabled || props.focus) && _tokens.SELECT_STATES.completed, props.error && _tokens.SELECT_STATES.error, props.title && (0, _styledComponents.css)(["color:transparent;"]));
 }, caretMixin);
+var StyledLabel = _styledComponents.default.label.withConfig({
+  displayName: "Select__StyledLabel",
+  componentId: "sc-1weszjl-1"
+})(["position:absolute;top:50%;left:5px;padding:0 5px;pointer-events:none;transform:translateY(-50%);transition:0.25s cubic-bezier(0.64,0.05,0.36,1);transision-property:color,font-size,transform;background-color:transparent;font-family:", ";& > span{background-color:", ";height:100%;width:100%;display:block;position:absolute;top:0;left:0;z-index:-1;transition:0.25s cubic-bezier(0.64,0.05,0.36,1);transition-property:height,top;transition-delay:0.1s;}"], (0, _themeGet.themeGet)("fonts.sans"), (0, _themeGet.themeGet)("colors.white100"));
 //# sourceMappingURL=Select.js.map

package/dist/elements/Select/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","names":["_themeGet","require","_react","_interopRequireWildcard","_styledComponents","_Box","_Flex","_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","Select","forwardRef","_ref","ref","description","disabled","error","focus","hover","id","options","required","selected","title","_ref$variant","variant","onSelect","rest","_splitBoxProps","splitBoxProps","_splitBoxProps2","boxProps","selectProps","createElement","Box","width","Flex","as","flexDirection","alignItems","for","Text","lineHeight","undefined","color","Container","mt","onChange","event","map","_ref2","text","exports","displayName","resetMixin","css","caretMixin","themeGet","_ref3","styled","withConfig","componentId","props","SELECT_STATES"],"sources":["../../../src/elements/Select/Select.tsx"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport React, { forwardRef, ForwardRefExoticComponent, Ref } from \"react\"\nimport styled, { css } from \"styled-components\"\nimport { Box, BoxProps, splitBoxProps } from \"../Box\"\nimport { Flex } from \"../Flex\"\nimport { Text } from \"../Text\"\nimport { Variant } from \"./types\"\nimport { SELECT_STATES } from \"./tokens\"\n\nexport interface Option {\n  value: string\n  text: string\n}\n\nexport interface SelectProps\n  extends BoxProps,\n    Omit<React.SelectHTMLAttributes<HTMLSelectElement>, \"onSelect\" | \"size\"> {\n  description?: string\n  disabled?: boolean\n  error?: string | boolean\n  focus?: boolean\n  hover?: boolean\n  name?: string\n  options: Option[]\n  required?: boolean\n  selected?: string\n  title?: string\n  variant?: Variant\n  onSelect?: (value: string) => void\n}\n\n/** A drop-down select menu */\nexport const Select: ForwardRefExoticComponent<\n  SelectProps & { ref?: Ref<HTMLElement> }\n> = forwardRef(\n  (\n    {\n      description,\n      disabled,\n      error,\n      focus,\n      hover,\n      id,\n      name,\n      options,\n      required,\n      selected,\n      title,\n      variant = \"default\",\n      onSelect,\n      ...rest\n    },\n    ref\n  ) => {\n    const [boxProps, selectProps] = splitBoxProps(rest)\n\n    return (\n      <Box width=\"100%\" {...boxProps}>\n        <Flex\n          as=\"label\"\n          {...(variant === \"inline\"\n            ? {\n                flexDirection: \"row\",\n                alignItems: \"center\",\n              }\n            : {\n                flexDirection: \"column\",\n                alignItems: \"flex-start\",\n              })}\n          {...(id ? { for: id } : {})}\n        >\n          <div>\n            {title && (\n              <Text\n                variant=\"xs\"\n                lineHeight={\n                  variant === \"inline\" && description === undefined\n                    ? 1\n                    : undefined\n                }\n              >\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          </div>\n\n          <Container\n            variant={variant}\n            disabled={!!disabled}\n            hover={!!hover}\n            error={error!}\n            focus={!!focus}\n            mt={variant !== \"inline\" && (title || description) ? 0.5 : 0}\n          >\n            <select\n              ref={ref as any}\n              id={id}\n              disabled={disabled}\n              name={name}\n              value={selected}\n              onChange={(event) => {\n                onSelect && onSelect(event.target.value)\n              }}\n              {...selectProps}\n            >\n              {options.map(({ value, text }) => {\n                return (\n                  <option value={value} key={value}>\n                    {text}\n                  </option>\n                )\n              })}\n            </select>\n          </Container>\n        </Flex>\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\nSelect.displayName = \"Select\"\n\nconst resetMixin = css`\n  appearance: none;\n  background: none;\n  border: none;\n  outline: 0;\n  text-indent: 0.01px;\n  text-overflow: \"\";\n  border-radius: 0;\n\n  &:-moz-focusring {\n    color: transparent;\n    text-shadow: 0 0 0 black;\n  }\n\n  option:not(:checked) {\n    color: black; /* prevent <option>s from becoming transparent as well */\n  }\n`\n\n/** Creates a small caret */\nexport const caretMixin = css`\n  &::after {\n    content: \"\";\n    cursor: inherit;\n    width: 0;\n    height: 0;\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    right: ${themeGet(\"space.1\")};\n    pointer-events: none;\n    border-left: 4px solid transparent;\n    border-right: 4px solid transparent;\n    border-top: 4px solid\n      ${({ disabled }) => {\n        return disabled\n          ? themeGet(\"colors.black10\")\n          : themeGet(\"colors.black100\")\n      }};\n  }\n`\n\ntype ContainerProps = Required<\n  Pick<SelectProps, \"variant\" | \"disabled\" | \"error\" | \"hover\" | \"focus\">\n>\n\nconst Container = styled(Box)<ContainerProps>`\n  position: relative;\n  width: 100%;\n\n  > select {\n    ${resetMixin};\n    width: 100%;\n    /* 24px = space.1 + 4px-wide caret + space.1 */\n    padding: 0 24px 0 ${themeGet(\"space.1\")};\n    font-family: ${themeGet(\"fonts.sans\")};\n    border: 0;\n    border-bottom: 1px solid;\n    cursor: pointer;\n    line-height: 1;\n    transition: color 0.25s, background-color 0.25s, border-color 0.25s;\n\n    ${(props) => {\n      return css`\n        ${SELECT_STATES.default}\n\n        ${props.hover && SELECT_STATES.hover}\n        ${props.focus && SELECT_STATES.focus}\n        ${props.disabled && SELECT_STATES.disabled}\n        ${props.error && SELECT_STATES.error}\n\n        &:hover {\n          ${SELECT_STATES.hover}\n        }\n\n        &:focus {\n          ${SELECT_STATES.focus}\n        }\n\n        &:disabled {\n          cursor: default;\n          ${SELECT_STATES.disabled}\n        }\n      `\n    }};\n  }\n\n  ${caretMixin}\n`\n"],"mappings":"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"}
+{"version":3,"file":"Select.js","names":["_themeGet","require","_react","_interopRequireWildcard","_styledComponents","_Box","_Text","_tokens","_Tooltip","_RequiredField","_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","Select","forwardRef","_ref","ref","description","disabled","error","focus","hover","id","options","required","selected","title","onSelect","rest","_splitBoxProps","splitBoxProps","_splitBoxProps2","boxProps","selectProps","createElement","Box","width","Tooltip","pointer","content","placement","Text","variant","color","textAlign","Container","onChange","event","map","_ref2","text","StyledLabel","htmlFor","RequiredField","mt","ml","exports","displayName","resetMixin","css","caretMixin","themeGet","_ref3","styled","withConfig","componentId","props","SELECT_STATES","completed","label"],"sources":["../../../src/elements/Select/Select.tsx"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport React, { forwardRef, ForwardRefExoticComponent, Ref } from \"react\"\nimport styled, { css } from \"styled-components\"\nimport { Box, BoxProps, splitBoxProps } from \"../Box\"\nimport { Text } from \"../Text\"\nimport { SELECT_STATES } from \"./tokens\"\nimport { Tooltip } from \"../Tooltip\"\nimport { RequiredField } from \"../../shared/RequiredField\"\n\nexport interface Option {\n  value: string\n  text: string\n}\n\nexport interface SelectProps\n  extends BoxProps,\n    Omit<React.SelectHTMLAttributes<HTMLSelectElement>, \"onSelect\" | \"size\"> {\n  description?: string\n  disabled?: boolean\n  error?: string | boolean\n  focus?: boolean\n  hover?: boolean\n  name?: string\n  options: Option[]\n  required?: boolean\n  selected?: string\n  title?: string\n  onSelect?: (value: string) => void\n}\n\n/** A drop-down select menu */\nexport const Select: ForwardRefExoticComponent<\n  SelectProps & { ref?: Ref<HTMLElement> }\n> = forwardRef(\n  (\n    {\n      description,\n      disabled,\n      error,\n      focus,\n      hover,\n      id,\n      name,\n      options,\n      required,\n      selected,\n      title,\n      onSelect,\n      ...rest\n    },\n    ref\n  ) => {\n    const [boxProps, selectProps] = splitBoxProps(rest)\n\n    return (\n      <Box width=\"100%\" {...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        <Container\n          disabled={!!disabled}\n          hover={!!hover}\n          error={error!}\n          focus={!!focus}\n          title={title}\n        >\n          <select\n            ref={ref as any}\n            id={id}\n            disabled={disabled}\n            name={name}\n            value={selected}\n            onChange={(event) => {\n              onSelect && onSelect(event.target.value)\n            }}\n            {...selectProps}\n          >\n            {options.map(({ value, text }) => {\n              return (\n                <option value={value} key={value}>\n                  {text}\n                </option>\n              )\n            })}\n          </select>\n\n          {!!title && (\n            <StyledLabel htmlFor={id}>\n              {title}\n              <span />\n            </StyledLabel>\n          )}\n        </Container>\n\n        {required && !(error && typeof error === \"string\") && (\n          <RequiredField mt={0.5} ml={1} />\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\nSelect.displayName = \"Select\"\n\nconst resetMixin = css`\n  appearance: none;\n  background: none;\n  border: none;\n  outline: 0;\n  text-indent: 0.01px;\n  text-overflow: \"\";\n  border-radius: 0;\n\n  &:-moz-focusring {\n    color: transparent;\n    text-shadow: 0 0 0 black;\n  }\n\n  option:not(:checked) {\n    color: black; /* prevent <option>s from becoming transparent as well */\n  }\n`\n\n/** Creates a small caret */\nexport const caretMixin = css`\n  &::after {\n    content: \"\";\n    cursor: inherit;\n    width: 0;\n    height: 0;\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    right: ${themeGet(\"space.1\")};\n    pointer-events: none;\n    border-left: 4px solid transparent;\n    border-right: 4px solid transparent;\n    border-top: 4px solid\n      ${({ disabled }) => {\n        return disabled\n          ? themeGet(\"colors.black10\")\n          : themeGet(\"colors.black100\")\n      }};\n  }\n`\n\ntype ContainerProps = Required<\n  Pick<SelectProps, \"disabled\" | \"error\" | \"hover\" | \"focus\">\n>\n\nconst Container = styled(Box)<ContainerProps>`\n  position: relative;\n  width: 100%;\n\n  > select {\n    ${resetMixin};\n    width: 100%;\n    /* 24px = space.1 + 4px-wide caret + space.1 */\n    padding: 0 24px 0 ${themeGet(\"space.1\")};\n    font-family: ${themeGet(\"fonts.sans\")};\n    border: 1px solid;\n    border-radius: 3px;\n    border-color: ${themeGet(\"colors.black30\")};\n    cursor: pointer;\n    line-height: 1;\n    transition: color 0.25s, background-color 0.25s, border-color 0.25s;\n\n    ${(props) => {\n      return css`\n        ${SELECT_STATES.default}\n\n        ${props.hover && SELECT_STATES.hover}\n        ${props.focus && SELECT_STATES.focus}\n        ${props.disabled && SELECT_STATES.disabled}\n        ${props.error && SELECT_STATES.error}\n\n        &:hover {\n          ${SELECT_STATES.hover}\n        }\n\n        &:focus {\n          ${SELECT_STATES.focus}\n        }\n\n        &:disabled {\n          cursor: default;\n          ${SELECT_STATES.disabled}\n        }\n\n        &:not(:has(option[value=\"\"]:checked)):not(:focus) {\n          ${!(props.disabled || props.focus) && SELECT_STATES.completed}\n          ${props.error && SELECT_STATES.error}\n        }\n\n        &:not(:focus):has(option[value=\"\"]:checked) {\n          ${props.title &&\n          css`\n            color: transparent;\n          `}\n        }\n      `\n    }};\n  }\n\n  ${caretMixin}\n`\n\nconst StyledLabel = styled.label`\n  position: absolute;\n  top: 50%;\n  left: 5px;\n  padding: 0 5px;\n  pointer-events: none;\n  transform: translateY(-50%);\n  transition: 0.25s cubic-bezier(0.64, 0.05, 0.36, 1);\n  transision-property: color, font-size, transform;\n  background-color: transparent;\n  font-family: ${themeGet(\"fonts.sans\")};\n\n  & > span {\n    background-color: ${themeGet(\"colors.white100\")};\n    height: 100%;\n    width: 100%;\n    display: block;\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: -1;\n    transition: 0.25s cubic-bezier(0.64, 0.05, 0.36, 1);\n    transition-property: height, top;\n    transition-delay: 0.1s;\n  }\n`\n"],"mappings":"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"}

package/dist/elements/Select/Select.story.d.ts

@@ -3,4 +3,3 @@ declare const _default: {
 };
 export default _default;
 export declare const Default: () => JSX.Element;
-export declare const Example: () => JSX.Element;

package/dist/elements/Select/Select.story.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.Example = exports.Default = void 0;
+exports.default = exports.Default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _storybookStates = require("storybook-states");
 var _Select = require("./Select");
@@ -13,6 +13,9 @@ var _default = {
 };
 exports.default = _default;
 var OPTIONS = [{
+  text: "Please select",
+  value: ""
+}, {
   text: "Default",
   value: "-decayed_merch"
 }, {
@@ -36,9 +39,7 @@ var OPTIONS = [{
 }];
 var Default = function Default() {
   return /*#__PURE__*/_react.default.createElement(_storybookStates.States, {
-    states: [
-    // variant="default"
-    {}, {
+    states: [{}, {
       focus: true
     }, {
       hover: true
@@ -46,35 +47,28 @@ var Default = function Default() {
       error: "Something went wrong."
     }, {
       disabled: true
-    },
-    // variant="inline"
-    {
-      variant: "inline"
     }, {
-      variant: "inline",
+      title: "Sort"
+    }, {
+      title: "Sort",
+      description: "A description of sorting"
+    }, {
+      title: "Sort",
       focus: true
     }, {
-      variant: "inline",
+      title: "Sort",
       hover: true
     }, {
-      variant: "inline",
+      title: "Sort",
       error: "Something went wrong."
     }, {
-      variant: "inline",
+      title: "Sort",
       disabled: true
     }, {
-      variant: "inline",
-      title: "Sort:"
+      title: "Sort",
+      required: true
     }, {
-      variant: "inline",
-      title: "Sort:",
-      description: "A description of sorting"
-    },
-    // variant="default"
-    {
       selected: "lastValue"
-    }, {
-      title: "Pick something"
     }, {
       title: "Pick something",
       required: true,
@@ -89,16 +83,4 @@ var Default = function Default() {
 };
 exports.Default = Default;
 Default.displayName = "Default";
-var Example = function Example() {
-  return /*#__PURE__*/_react.default.createElement(_Select.Select, {
-    display: "inline-flex",
-    variant: "inline",
-    title: "Sort:",
-    options: OPTIONS,
-    selected: "-year",
-    autoComplete: "year"
-  });
-};
-exports.Example = Example;
-Example.displayName = "Example";
 //# sourceMappingURL=Select.story.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Select.story.js","names":["_react","_interopRequireDefault","require","_storybookStates","_Select","obj","__esModule","default","_default","title","exports","OPTIONS","text","value","Default","createElement","States","states","focus","hover","error","disabled","variant","description","selected","required","id","Select","options","displayName","Example","display","autoComplete"],"sources":["../../../src/elements/Select/Select.story.tsx"],"sourcesContent":["import React from \"react\"\nimport { States } from \"storybook-states\"\nimport { Select, SelectProps } from \"./Select\"\n\nexport default {\n  title: \"Components/Select\",\n}\n\nconst OPTIONS = [\n  { text: \"Default\", value: \"-decayed_merch\" },\n  { text: \"Price (desc.)\", value: \"-has_price,-prices\" },\n  { text: \"Price (asc.)\", value: \"-has_price,prices\" },\n  { text: \"Recently updated\", value: \"-partner_updated_at\" },\n  { text: \"Recently added\", value: \"-published_at\" },\n  { text: \"Artwork year (desc.)\", value: \"-year\" },\n  { text: \"Artwork year (asc.)\", value: \"year\" },\n]\n\nexport const Default = () => {\n  return (\n    <States<Partial<SelectProps>>\n      states={[\n        // variant=\"default\"\n        {},\n        { focus: true },\n        { hover: true },\n        { error: \"Something went wrong.\" },\n        { disabled: true },\n\n        // variant=\"inline\"\n        { variant: \"inline\" },\n        { variant: \"inline\", focus: true },\n        { variant: \"inline\", hover: true },\n        { variant: \"inline\", error: \"Something went wrong.\" },\n        { variant: \"inline\", disabled: true },\n        { variant: \"inline\", title: \"Sort:\" },\n        {\n          variant: \"inline\",\n          title: \"Sort:\",\n          description: \"A description of sorting\",\n        },\n\n        // variant=\"default\"\n        { selected: \"lastValue\" },\n        { title: \"Pick something\" },\n        { title: \"Pick something\", required: true, id: \"pick\" },\n        { title: \"Pick something\", description: \"This matters a lot.\" },\n      ]}\n    >\n      <Select options={OPTIONS} />\n    </States>\n  )\n}\n\nexport const Example = () => {\n  return (\n    <Select\n      display=\"inline-flex\"\n      variant=\"inline\"\n      title=\"Sort:\"\n      options={OPTIONS}\n      selected=\"-year\"\n      autoComplete=\"year\"\n    />\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"Select.story.js","names":["_react","_interopRequireDefault","require","_storybookStates","_Select","obj","__esModule","default","_default","title","exports","OPTIONS","text","value","Default","createElement","States","states","focus","hover","error","disabled","description","required","selected","id","Select","options","displayName"],"sources":["../../../src/elements/Select/Select.story.tsx"],"sourcesContent":["import React from \"react\"\nimport { States } from \"storybook-states\"\nimport { Select, SelectProps } from \"./Select\"\n\nexport default {\n  title: \"Components/Select\",\n}\n\nconst OPTIONS = [\n  { text: \"Please select\", value: \"\" },\n  { text: \"Default\", value: \"-decayed_merch\" },\n  { text: \"Price (desc.)\", value: \"-has_price,-prices\" },\n  { text: \"Price (asc.)\", value: \"-has_price,prices\" },\n  { text: \"Recently updated\", value: \"-partner_updated_at\" },\n  { text: \"Recently added\", value: \"-published_at\" },\n  { text: \"Artwork year (desc.)\", value: \"-year\" },\n  { text: \"Artwork year (asc.)\", value: \"year\" },\n]\n\nexport const Default = () => {\n  return (\n    <States<Partial<SelectProps>>\n      states={[\n        {},\n        { focus: true },\n        { hover: true },\n        { error: \"Something went wrong.\" },\n        { disabled: true },\n        { title: \"Sort\" },\n        { title: \"Sort\", description: \"A description of sorting\" },\n        { title: \"Sort\", focus: true },\n        { title: \"Sort\", hover: true },\n        { title: \"Sort\", error: \"Something went wrong.\" },\n        { title: \"Sort\", disabled: true },\n        { title: \"Sort\", required: true },\n        { selected: \"lastValue\" },\n        { title: \"Pick something\", required: true, id: \"pick\" },\n        { title: \"Pick something\", description: \"This matters a lot.\" },\n      ]}\n    >\n      <Select options={OPTIONS} />\n    </States>\n  )\n}\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,gBAAA,GAAAD,OAAA;AACA,IAAAE,OAAA,GAAAF,OAAA;AAA8C,SAAAD,uBAAAI,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAAA,IAAAG,QAAA,GAE/B;EACbC,KAAK,EAAE;AACT,CAAC;AAAAC,OAAA,CAAAH,OAAA,GAAAC,QAAA;AAED,IAAMG,OAAO,GAAG,CACd;EAAEC,IAAI,EAAE,eAAe;EAAEC,KAAK,EAAE;AAAG,CAAC,EACpC;EAAED,IAAI,EAAE,SAAS;EAAEC,KAAK,EAAE;AAAiB,CAAC,EAC5C;EAAED,IAAI,EAAE,eAAe;EAAEC,KAAK,EAAE;AAAqB,CAAC,EACtD;EAAED,IAAI,EAAE,cAAc;EAAEC,KAAK,EAAE;AAAoB,CAAC,EACpD;EAAED,IAAI,EAAE,kBAAkB;EAAEC,KAAK,EAAE;AAAsB,CAAC,EAC1D;EAAED,IAAI,EAAE,gBAAgB;EAAEC,KAAK,EAAE;AAAgB,CAAC,EAClD;EAAED,IAAI,EAAE,sBAAsB;EAAEC,KAAK,EAAE;AAAQ,CAAC,EAChD;EAAED,IAAI,EAAE,qBAAqB;EAAEC,KAAK,EAAE;AAAO,CAAC,CAC/C;AAEM,IAAMC,OAAO,GAAG,SAAVA,OAAOA,CAAA,EAAS;EAC3B,oBACEd,MAAA,CAAAO,OAAA,CAAAQ,aAAA,CAACZ,gBAAA,CAAAa,MAAM;IACLC,MAAM,EAAE,CACN,CAAC,CAAC,EACF;MAAEC,KAAK,EAAE;IAAK,CAAC,EACf;MAAEC,KAAK,EAAE;IAAK,CAAC,EACf;MAAEC,KAAK,EAAE;IAAwB,CAAC,EAClC;MAAEC,QAAQ,EAAE;IAAK,CAAC,EAClB;MAAEZ,KAAK,EAAE;IAAO,CAAC,EACjB;MAAEA,KAAK,EAAE,MAAM;MAAEa,WAAW,EAAE;IAA2B,CAAC,EAC1D;MAAEb,KAAK,EAAE,MAAM;MAAES,KAAK,EAAE;IAAK,CAAC,EAC9B;MAAET,KAAK,EAAE,MAAM;MAAEU,KAAK,EAAE;IAAK,CAAC,EAC9B;MAAEV,KAAK,EAAE,MAAM;MAAEW,KAAK,EAAE;IAAwB,CAAC,EACjD;MAAEX,KAAK,EAAE,MAAM;MAAEY,QAAQ,EAAE;IAAK,CAAC,EACjC;MAAEZ,KAAK,EAAE,MAAM;MAAEc,QAAQ,EAAE;IAAK,CAAC,EACjC;MAAEC,QAAQ,EAAE;IAAY,CAAC,EACzB;MAAEf,KAAK,EAAE,gBAAgB;MAAEc,QAAQ,EAAE,IAAI;MAAEE,EAAE,EAAE;IAAO,CAAC,EACvD;MAAEhB,KAAK,EAAE,gBAAgB;MAAEa,WAAW,EAAE;IAAsB,CAAC;EAC/D,gBAEFtB,MAAA,CAAAO,OAAA,CAAAQ,aAAA,CAACX,OAAA,CAAAsB,MAAM;IAACC,OAAO,EAAEhB;EAAQ,EAAG,CACrB;AAEb,CAAC;AAAAD,OAAA,CAAAI,OAAA,GAAAA,OAAA;AAxBYA,OAAO,CAAAc,WAAA"}

package/dist/elements/Select/tokens.d.ts

@@ -1,7 +1,2 @@
-export declare const SELECT_STATES: {
-    default: import("styled-components").FlattenInterpolation<any>[];
-    focus: import("styled-components").FlattenInterpolation<any>[];
-    hover: import("styled-components").FlattenInterpolation<any>[];
-    disabled: import("styled-components").FlattenInterpolation<any>[];
-    error: import("styled-components").FlattenInterpolation<any>[];
-};
+import { State } from "./types";
+export declare const SELECT_STATES: Record<State, any>;

package/dist/elements/Select/tokens.js

@@ -7,11 +7,12 @@ exports.SELECT_STATES = void 0;
 var _themeGet = require("@styled-system/theme-get");
 var _styledComponents = require("styled-components");
 var SELECT_STATES = {
-  default: (0, _styledComponents.css)(["height:50px;font-size:", ";color:", ";border-color:", ";"], (0, _themeGet.themeGet)("textVariants.sm.fontSize"), (0, _themeGet.themeGet)("colors.black100"), (0, _themeGet.themeGet)("colors.black60")),
-  focus: (0, _styledComponents.css)(["color:", ";border-color:", ";text-decoration:underline;"], (0, _themeGet.themeGet)("colors.blue100"), (0, _themeGet.themeGet)("colors.black60")),
-  hover: (0, _styledComponents.css)(["color:", ";border-color:", ";text-decoration:underline;"], (0, _themeGet.themeGet)("colors.blue100"), (0, _themeGet.themeGet)("colors.black60")),
-  disabled: (0, _styledComponents.css)(["color:", ";border-color:", ";text-decoration:none;"], (0, _themeGet.themeGet)("colors.black30"), (0, _themeGet.themeGet)("colors.black30")),
-  error: (0, _styledComponents.css)(["color:", ";border-color:", ";"], (0, _themeGet.themeGet)("colors.black100"), (0, _themeGet.themeGet)("colors.red100"))
+  default: (0, _styledComponents.css)(["height:50px;font-size:", ";color:", ";border-color:", ";+ label{color:", ";font-size:", ";}&:not(:has(option[value=\"\"]:checked)) + label{transform:translateY(-150%);font-size:", ";& > span{height:2px;top:50%;}}"], (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)("textVariants.sm-display.fontSize"), (0, _themeGet.themeGet)("textVariants.xs.fontSize")),
+  focus: (0, _styledComponents.css)(["color:", ";border-color:", ";text-decoration:underline;+ label{color:", ";transform:translateY(-150%);font-size:", ";& > span{height:2px;top:50%;}}&:has(option[value=\"\"]:checked) + label{text-decoration:underline;}"], (0, _themeGet.themeGet)("colors.black100"), (0, _themeGet.themeGet)("colors.blue100"), (0, _themeGet.themeGet)("colors.blue100"), (0, _themeGet.themeGet)("textVariants.xs.fontSize")),
+  hover: (0, _styledComponents.css)(["color:", ";border-color:", ";text-decoration:underline;+ label{color:", ";}&:has(option[value=\"\"]:checked):not(:disabled) + label{color:", ";text-decoration:underline;}"], (0, _themeGet.themeGet)("colors.blue100"), (0, _themeGet.themeGet)("colors.black60"), (0, _themeGet.themeGet)("colors.black60"), (0, _themeGet.themeGet)("colors.blue100")),
+  completed: (0, _styledComponents.css)(["border-color:", ";text-decoration:none;+ label{color:", ";}&:not(:has(option[value=\"\"]:checked)) + label{transform:translateY(-150%);font-size:", ";& > span{height:2px;top:50%;}}"], (0, _themeGet.themeGet)("colors.black60"), (0, _themeGet.themeGet)("colors.black60"), (0, _themeGet.themeGet)("textVariants.xs.fontSize")),
+  disabled: (0, _styledComponents.css)(["color:", ";border-color:", ";text-decoration:none;+ label{color:", ";text-decoration:none;}&:not(:has(option[value=\"\"]:checked)) + label{transform:translateY(-150%);font-size:", ";& > span{height:2px;top:50%;}}"], (0, _themeGet.themeGet)("colors.black30"), (0, _themeGet.themeGet)("colors.black30"), (0, _themeGet.themeGet)("colors.black30"), (0, _themeGet.themeGet)("textVariants.xs.fontSize")),
+  error: (0, _styledComponents.css)(["color:", ";border-color:", ";+ label{color:", ";}"], (0, _themeGet.themeGet)("colors.black100"), (0, _themeGet.themeGet)("colors.red100"), (0, _themeGet.themeGet)("colors.red100"))
 };
 exports.SELECT_STATES = SELECT_STATES;
 //# sourceMappingURL=tokens.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"tokens.js","names":["_themeGet","require","_styledComponents","SELECT_STATES","default","css","themeGet","focus","hover","disabled","error","exports"],"sources":["../../../src/elements/Select/tokens.ts"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport { css } from \"styled-components\"\n\nexport const SELECT_STATES = {\n  default: css`\n    height: 50px;\n    font-size: ${themeGet(\"textVariants.sm.fontSize\")};\n    color: ${themeGet(\"colors.black100\")};\n    border-color: ${themeGet(\"colors.black60\")};\n  `,\n  focus: css`\n    color: ${themeGet(\"colors.blue100\")};\n    border-color: ${themeGet(\"colors.black60\")};\n    text-decoration: underline;\n  `,\n  hover: css`\n    color: ${themeGet(\"colors.blue100\")};\n    border-color: ${themeGet(\"colors.black60\")};\n    text-decoration: underline;\n  `,\n  disabled: css`\n    color: ${themeGet(\"colors.black30\")};\n    border-color: ${themeGet(\"colors.black30\")};\n    text-decoration: none;\n  `,\n  error: css`\n    color: ${themeGet(\"colors.black100\")};\n    border-color: ${themeGet(\"colors.red100\")};\n  `,\n}\n"],"mappings":";;;;;;AAAA,IAAAA,SAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAD,OAAA;AAEO,IAAME,aAAa,GAAG;EAC3BC,OAAO,MAAEC,qBAAG,gEAEG,IAAAC,kBAAQ,EAAC,0BAA0B,CAAC,EACxC,IAAAA,kBAAQ,EAAC,iBAAiB,CAAC,EACpB,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,CAC3C;EACDC,KAAK,MAAEF,qBAAG,+DACC,IAAAC,kBAAQ,EAAC,gBAAgB,CAAC,EACnB,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,CAE3C;EACDE,KAAK,MAAEH,qBAAG,+DACC,IAAAC,kBAAQ,EAAC,gBAAgB,CAAC,EACnB,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,CAE3C;EACDG,QAAQ,MAAEJ,qBAAG,0DACF,IAAAC,kBAAQ,EAAC,gBAAgB,CAAC,EACnB,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,CAE3C;EACDI,KAAK,MAAEL,qBAAG,qCACC,IAAAC,kBAAQ,EAAC,iBAAiB,CAAC,EACpB,IAAAA,kBAAQ,EAAC,eAAe,CAAC;AAE7C,CAAC;AAAAK,OAAA,CAAAR,aAAA,GAAAA,aAAA"}
+{"version":3,"file":"tokens.js","names":["_themeGet","require","_styledComponents","SELECT_STATES","default","css","themeGet","focus","hover","completed","disabled","error","exports"],"sources":["../../../src/elements/Select/tokens.ts"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport { css } from \"styled-components\"\nimport { State } from \"./types\"\n\nexport const SELECT_STATES: Record<State, any> = {\n  default: css`\n    height: 50px;\n    font-size: ${themeGet(\"textVariants.sm-display.fontSize\")};\n    color: ${themeGet(\"colors.black100\")};\n    border-color: ${themeGet(\"colors.black30\")};\n\n    + label {\n      color: ${themeGet(\"colors.black60\")};\n      font-size: ${themeGet(\"textVariants.sm-display.fontSize\")};\n    }\n\n    &:not(:has(option[value=\"\"]:checked)) + label {\n      transform: translateY(-150%);\n      font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n\n      & > span {\n        height: 2px;\n        top: 50%;\n      }\n    }\n  `,\n  focus: css`\n    color: ${themeGet(\"colors.black100\")};\n    border-color: ${themeGet(\"colors.blue100\")};\n    text-decoration: underline;\n\n    + label {\n      color: ${themeGet(\"colors.blue100\")};\n      transform: translateY(-150%);\n      font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n\n      & > span {\n        height: 2px;\n        top: 50%;\n      }\n    }\n\n    &:has(option[value=\"\"]:checked) + label {\n      text-decoration: underline;\n    }\n  `,\n  hover: css`\n    color: ${themeGet(\"colors.blue100\")};\n    border-color: ${themeGet(\"colors.black60\")};\n    text-decoration: underline;\n\n    + label {\n      color: ${themeGet(\"colors.black60\")};\n    }\n\n    &:has(option[value=\"\"]:checked):not(:disabled) + label {\n      color: ${themeGet(\"colors.blue100\")};\n      text-decoration: underline;\n    }\n  `,\n  completed: css`\n    border-color: ${themeGet(\"colors.black60\")};\n    text-decoration: none;\n\n    + label {\n      color: ${themeGet(\"colors.black60\")};\n    }\n\n    &:not(:has(option[value=\"\"]:checked)) + label {\n      transform: translateY(-150%);\n      font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n\n      & > span {\n        height: 2px;\n        top: 50%;\n      }\n    }\n  `,\n  disabled: css`\n    color: ${themeGet(\"colors.black30\")};\n    border-color: ${themeGet(\"colors.black30\")};\n    text-decoration: none;\n\n    + label {\n      color: ${themeGet(\"colors.black30\")};\n      text-decoration: none;\n    }\n\n    &:not(:has(option[value=\"\"]:checked)) + label {\n      transform: translateY(-150%);\n      font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n\n      & > span {\n        height: 2px;\n        top: 50%;\n      }\n    }\n  `,\n  error: css`\n    color: ${themeGet(\"colors.black100\")};\n    border-color: ${themeGet(\"colors.red100\")};\n\n    + label {\n      color: ${themeGet(\"colors.red100\")};\n    }\n  `,\n}\n"],"mappings":";;;;;;AAAA,IAAAA,SAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAD,OAAA;AAGO,IAAME,aAAiC,GAAG;EAC/CC,OAAO,MAAEC,qBAAG,4NAEG,IAAAC,kBAAQ,EAAC,kCAAkC,CAAC,EAChD,IAAAA,kBAAQ,EAAC,iBAAiB,CAAC,EACpB,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAG/B,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EACtB,IAAAA,kBAAQ,EAAC,kCAAkC,CAAC,EAK5C,IAAAA,kBAAQ,EAAC,0BAA0B,CAAC,CAOpD;EACDC,KAAK,MAAEF,qBAAG,gOACC,IAAAC,kBAAQ,EAAC,iBAAiB,CAAC,EACpB,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAI/B,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAEtB,IAAAA,kBAAQ,EAAC,0BAA0B,CAAC,CAWpD;EACDE,KAAK,MAAEH,qBAAG,kLACC,IAAAC,kBAAQ,EAAC,gBAAgB,CAAC,EACnB,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAI/B,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAI1B,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,CAGtC;EACDG,SAAS,MAAEJ,qBAAG,4LACI,IAAAC,kBAAQ,EAAC,gBAAgB,CAAC,EAI/B,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAKtB,IAAAA,kBAAQ,EAAC,0BAA0B,CAAC,CAOpD;EACDI,QAAQ,MAAEL,qBAAG,4NACF,IAAAC,kBAAQ,EAAC,gBAAgB,CAAC,EACnB,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAI/B,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAMtB,IAAAA,kBAAQ,EAAC,0BAA0B,CAAC,CAOpD;EACDK,KAAK,MAAEN,qBAAG,yDACC,IAAAC,kBAAQ,EAAC,iBAAiB,CAAC,EACpB,IAAAA,kBAAQ,EAAC,eAAe,CAAC,EAG9B,IAAAA,kBAAQ,EAAC,eAAe,CAAC;AAGxC,CAAC;AAAAM,OAAA,CAAAT,aAAA,GAAAA,aAAA"}

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

@@ -1,2 +1 @@
-export declare type Variant = "default" | "inline";
-export declare type State = "default" | "focus" | "hover" | "disabled" | "error";
+export declare type State = "default" | "focus" | "hover" | "disabled" | "error" | "completed";

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

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

package/dist/elements/TextArea/TextArea.d.ts

@@ -6,7 +6,7 @@ export interface TextAreaProps extends BoxProps, Omit<React.TextareaHTMLAttribut
     defaultValue?: string;
     description?: React.ReactNode;
     required?: boolean;
-    title?: React.ReactNode;
+    title?: string;
     disabled?: boolean;
     error?: string | boolean;
     focus?: boolean;

package/dist/elements/TextArea/TextArea.js

@@ -8,9 +8,10 @@ exports.TextArea = void 0;
 var _themeGet = require("@styled-system/theme-get");
 var _react = _interopRequireWildcard(require("react"));
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _RequiredField = require("../../shared/RequiredField");
 var _Box = require("../Box");
-var _Spacer = require("../Spacer");
-var _Text = require("../Text/Text");
+var _Text = require("../Text");
+var _Tooltip = require("../Tooltip");
 var _tokens = require("./tokens");
 var _excluded = ["error", "disabled", "focus", "hover", "characterLimit", "title", "description", "defaultValue", "required", "onChange"];
 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); }
@@ -62,17 +63,15 @@ var TextArea = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   }, [characterLimitExceeded, error, value]);
   return /*#__PURE__*/_react.default.createElement(_Box.Box, _extends({
     width: "100%"
-  }, boxProps), (title || description) && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", 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(_Spacer.Spacer, {
-    y: 0.5
-  })), /*#__PURE__*/_react.default.createElement(_Box.Box, {
+    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(StyledTextArea, _extends({
     ref: ref,
@@ -82,22 +81,27 @@ var TextArea = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     error: hasError,
     onChange: handleChange,
     defaultValue: defaultValue,
-    required: required
-  }, inputProps)), typeof characterLimit !== "undefined" && /*#__PURE__*/_react.default.createElement(_Text.Text, {
-    position: "absolute",
-    bottom: 0,
-    left: 0,
-    px: 1,
-    py: 0.5,
+    required: required,
+    title: title,
+    placeholder: inputProps.placeholder || " "
+  }, inputProps)), !!title && /*#__PURE__*/_react.default.createElement(StyledLabel, {
+    htmlFor: inputProps.name
+  }, title, /*#__PURE__*/_react.default.createElement("span", null))), (required || characterLimit) && !(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
+  }), typeof characterLimit !== "undefined" && /*#__PURE__*/_react.default.createElement(_Text.Text, {
+    flex: 1,
     variant: "xs",
     color: characterLimitExceeded(value) ? "red100" : "black60",
-    style: {
-      pointerEvents: "none"
-    }
-  }, characterLimit - value.length, " characters remaining")), error && typeof error === "string" && /*#__PURE__*/_react.default.createElement(_Text.Text, {
+    textAlign: "right"
+  }, value.length, "/", characterLimit)), error && typeof error === "string" && /*#__PURE__*/_react.default.createElement(_Text.Text, {
     variant: "xs",
     color: "red100",
-    mt: 0.5
+    mt: 0.5,
+    ml: 1
   }, error));
 });
 exports.TextArea = TextArea;
@@ -105,7 +109,11 @@ TextArea.displayName = "TextArea";
 var StyledTextArea = _styledComponents.default.textarea.withConfig({
   displayName: "TextArea__StyledTextArea",
   componentId: "tnq35k-0"
-})(["appearance:none;display:block;width:100%;padding:", ";resize:vertical;transition:border-color 0.25s,color 0.25s;outline:none;border:1px solid;font-family:", ";::placeholder{transition:color 0.25s;}", ""], (0, _themeGet.themeGet)("space.1"), (0, _themeGet.themeGet)("fonts.sans"), function (props) {
-  return (0, _styledComponents.css)(["", " ", " ", " ", " ", " ", " &:hover{", "}&:focus{outline:none;", ":not(:placeholder-shown){", " ", "}}&:disabled{cursor:default;", "}"], _tokens.TEXTAREA_STATES.default, props.hover && _tokens.TEXTAREA_STATES.hover, props.focus && _tokens.TEXTAREA_STATES.focus, props.active && _tokens.TEXTAREA_STATES.active, props.disabled && _tokens.TEXTAREA_STATES.disabled, props.error && _tokens.TEXTAREA_STATES.error, _tokens.TEXTAREA_STATES.hover, _tokens.TEXTAREA_STATES.focus, _tokens.TEXTAREA_STATES.active, props.error && _tokens.TEXTAREA_STATES.error, _tokens.TEXTAREA_STATES.disabled);
+})(["appearance:none;display:block;width:100%;padding:", ";resize:vertical;transition:border-color 0.25s,color 0.25s;outline:none;border:1px solid;border-radius:3px;font-family:", ";::placeholder{transition:color 0.25s,opacity 0.25s;}&:-webkit-autofill,&:-webkit-autofill:hover,&:-webkit-autofill:focus{-webkit-box-shadow:0 0 0px 1000px ", " inset;}", ""], (0, _themeGet.themeGet)("space.1"), (0, _themeGet.themeGet)("fonts.sans"), (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.TEXTAREA_STATES.default, props.hover && _tokens.TEXTAREA_STATES.hover, props.focus && _tokens.TEXTAREA_STATES.focus, props.active && _tokens.TEXTAREA_STATES.active, props.disabled && _tokens.TEXTAREA_STATES.disabled, props.error && _tokens.TEXTAREA_STATES.error, _tokens.TEXTAREA_STATES.hover, _tokens.TEXTAREA_STATES.completed, props.error && _tokens.TEXTAREA_STATES.error, _tokens.TEXTAREA_STATES.focus, !!props.placeholder && _tokens.TEXTAREA_STATES.active, props.error && _tokens.TEXTAREA_STATES.error, _tokens.TEXTAREA_STATES.disabled, props.title && (0, _styledComponents.css)(["::placeholder{opacity:0;}"]));
 });
+var StyledLabel = _styledComponents.default.label.withConfig({
+  displayName: "TextArea__StyledLabel",
+  componentId: "tnq35k-1"
+})(["position:absolute;top:25px;left:6px;padding:0 5px;background-color:transparent;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;& > span{background-color:", ";height:100%;width:100%;display:block;position:absolute;top:0;left:0;z-index:-1;transition:0.25s cubic-bezier(0.64,0.05,0.36,1);transition-property:height,top;transition-delay:0.1s;}"], (0, _themeGet.themeGet)("fonts.sans"), (0, _themeGet.themeGet)("colors.white100"));
 //# sourceMappingURL=TextArea.js.map

package/dist/elements/TextArea/TextArea.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.js","names":["_themeGet","require","_react","_interopRequireWildcard","_styledComponents","_Box","_Spacer","_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","TextArea","React","forwardRef","_ref","ref","error","disabled","focus","hover","characterLimit","title","description","_ref$defaultValue","defaultValue","required","onChange","rest","_splitBoxProps","splitBoxProps","_splitBoxProps2","boxProps","inputProps","_useState","useState","_useState2","setValue","characterLimitExceeded","useCallback","text","Boolean","handleChange","event","nextValue","currentTarget","exceedsCharacterLimit","hasError","useMemo","createElement","Box","width","Fragment","Text","variant","as","color","Spacer","y","position","StyledTextArea","bottom","left","px","py","style","pointerEvents","mt","exports","displayName","styled","textarea","withConfig","componentId","themeGet","props","css","TEXTAREA_STATES","active"],"sources":["../../../src/elements/TextArea/TextArea.tsx"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport React, { useCallback, useMemo, useState } from \"react\"\nimport styled, { css } from \"styled-components\"\nimport { Box, BoxProps, splitBoxProps } from \"../Box\"\nimport { Spacer } from \"../Spacer\"\nimport { Text } from \"../Text/Text\"\nimport { TEXTAREA_STATES } from \"./tokens\"\n\nexport interface TextAreaProps\n  extends BoxProps,\n    Omit<\n      React.TextareaHTMLAttributes<HTMLTextAreaElement>,\n      \"onChange\" | \"title\"\n    > {\n  active?: boolean\n  characterLimit?: number\n  defaultValue?: string\n  description?: React.ReactNode\n  required?: boolean\n  title?: React.ReactNode\n  disabled?: boolean\n  error?: string | boolean\n  focus?: boolean\n  hover?: boolean\n  onChange?(result: TextAreaChange): void\n}\n\nexport interface TextAreaChange {\n  value: string\n  exceedsCharacterLimit: boolean\n}\n\n/** TextArea */\nexport const TextArea: React.ForwardRefExoticComponent<\n  TextAreaProps & { ref?: React.Ref<HTMLTextAreaElement> }\n> = React.forwardRef(\n  (\n    {\n      error,\n      disabled,\n      focus,\n      hover,\n      characterLimit,\n      title,\n      description,\n      defaultValue = \"\",\n      required,\n      onChange,\n      ...rest\n    },\n    ref\n  ) => {\n    const [boxProps, inputProps] = splitBoxProps(rest)\n\n    const [value, setValue] = useState(defaultValue)\n\n    const characterLimitExceeded = useCallback(\n      (text: string) => {\n        return Boolean(characterLimit && text.length > characterLimit)\n      },\n      [characterLimit]\n    )\n\n    const handleChange = useCallback(\n      (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n        const nextValue = event.currentTarget.value\n        setValue(nextValue)\n        onChange?.({\n          value: nextValue,\n          exceedsCharacterLimit: characterLimitExceeded(nextValue),\n        })\n      },\n      [characterLimitExceeded, onChange]\n    )\n\n    const hasError = useMemo(\n      () => Boolean(error || characterLimitExceeded(value)),\n      [characterLimitExceeded, error, value]\n    )\n\n    return (\n      <Box width=\"100%\" {...boxProps}>\n        {(title || description) && (\n          <>\n            <div>\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            </div>\n\n            <Spacer y={0.5} />\n          </>\n        )}\n\n        <Box position=\"relative\">\n          <StyledTextArea\n            ref={ref as any}\n            disabled={disabled}\n            focus={focus}\n            hover={hover}\n            error={hasError}\n            onChange={handleChange}\n            defaultValue={defaultValue}\n            required={required}\n            {...inputProps}\n          />\n\n          {typeof characterLimit !== \"undefined\" && (\n            <Text\n              position=\"absolute\"\n              bottom={0}\n              left={0}\n              px={1}\n              py={0.5}\n              variant=\"xs\"\n              color={characterLimitExceeded(value) ? \"red100\" : \"black60\"}\n              style={{ pointerEvents: \"none\" }}\n            >\n              {characterLimit - value.length} characters remaining\n            </Text>\n          )}\n        </Box>\n\n        {error && typeof error === \"string\" && (\n          <Text variant=\"xs\" color=\"red100\" mt={0.5}>\n            {error}\n          </Text>\n        )}\n      </Box>\n    )\n  }\n)\n\nTextArea.displayName = \"TextArea\"\n\ntype StyledTextAreaProps = Pick<\n  TextAreaProps,\n  \"disabled\" | \"error\" | \"hover\" | \"focus\" | \"active\"\n>\n\nconst StyledTextArea = styled.textarea<StyledTextAreaProps>`\n  appearance: none;\n  display: block;\n  width: 100%;\n  padding: ${themeGet(\"space.1\")};\n  resize: vertical;\n  transition: border-color 0.25s, color 0.25s;\n  outline: none;\n  border: 1px solid;\n  font-family: ${themeGet(\"fonts.sans\")};\n\n  ::placeholder {\n    transition: color 0.25s;\n  }\n\n  ${(props) => {\n    return css`\n      ${TEXTAREA_STATES.default}\n      ${props.hover && TEXTAREA_STATES.hover}\n      ${props.focus && TEXTAREA_STATES.focus}\n      ${props.active && TEXTAREA_STATES.active}\n      ${props.disabled && TEXTAREA_STATES.disabled}\n      ${props.error && TEXTAREA_STATES.error}\n\n      &:hover {\n        ${TEXTAREA_STATES.hover}\n      }\n\n      &:focus {\n        outline: none;\n        ${TEXTAREA_STATES.focus}\n\n        :not(:placeholder-shown) {\n          ${TEXTAREA_STATES.active}\n          ${props.error && TEXTAREA_STATES.error}\n        }\n      }\n\n      &:disabled {\n        cursor: default;\n        ${TEXTAREA_STATES.disabled}\n      }\n    `\n  }}\n`\n"],"mappings":"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"}
+{"version":3,"file":"TextArea.js","names":["_themeGet","require","_react","_interopRequireWildcard","_styledComponents","_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","TextArea","React","forwardRef","_ref","ref","error","disabled","focus","hover","characterLimit","title","description","_ref$defaultValue","defaultValue","required","onChange","rest","_splitBoxProps","splitBoxProps","_splitBoxProps2","boxProps","inputProps","_useState","useState","_useState2","setValue","characterLimitExceeded","useCallback","text","Boolean","handleChange","event","nextValue","currentTarget","exceedsCharacterLimit","hasError","useMemo","createElement","Box","width","Tooltip","pointer","content","placement","Text","variant","color","textAlign","position","StyledTextArea","placeholder","StyledLabel","htmlFor","display","mt","mx","RequiredField","flex","ml","exports","displayName","styled","textarea","withConfig","componentId","themeGet","props","css","TEXTAREA_STATES","active","completed","label"],"sources":["../../../src/elements/TextArea/TextArea.tsx"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport React, { useCallback, useMemo, useState } from \"react\"\nimport styled, { css } from \"styled-components\"\nimport { RequiredField } from \"../../shared/RequiredField\"\nimport { Box, BoxProps, splitBoxProps } from \"../Box\"\nimport { Text } from \"../Text\"\nimport { Tooltip } from \"../Tooltip\"\nimport { TEXTAREA_STATES } from \"./tokens\"\n\nexport interface TextAreaProps\n  extends BoxProps,\n    Omit<\n      React.TextareaHTMLAttributes<HTMLTextAreaElement>,\n      \"onChange\" | \"title\"\n    > {\n  active?: boolean\n  characterLimit?: number\n  defaultValue?: string\n  description?: React.ReactNode\n  required?: boolean\n  title?: string\n  disabled?: boolean\n  error?: string | boolean\n  focus?: boolean\n  hover?: boolean\n  onChange?(result: TextAreaChange): void\n}\n\nexport interface TextAreaChange {\n  value: string\n  exceedsCharacterLimit: boolean\n}\n\n/** TextArea */\nexport const TextArea: React.ForwardRefExoticComponent<\n  TextAreaProps & { ref?: React.Ref<HTMLTextAreaElement> }\n> = React.forwardRef(\n  (\n    {\n      error,\n      disabled,\n      focus,\n      hover,\n      characterLimit,\n      title,\n      description,\n      defaultValue = \"\",\n      required,\n      onChange,\n      ...rest\n    },\n    ref\n  ) => {\n    const [boxProps, inputProps] = splitBoxProps(rest)\n\n    const [value, setValue] = useState(defaultValue)\n\n    const characterLimitExceeded = useCallback(\n      (text: string) => {\n        return Boolean(characterLimit && text.length > characterLimit)\n      },\n      [characterLimit]\n    )\n\n    const handleChange = useCallback(\n      (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n        const nextValue = event.currentTarget.value\n        setValue(nextValue)\n        onChange?.({\n          value: nextValue,\n          exceedsCharacterLimit: characterLimitExceeded(nextValue),\n        })\n      },\n      [characterLimitExceeded, onChange]\n    )\n\n    const hasError = useMemo(\n      () => Boolean(error || characterLimitExceeded(value)),\n      [characterLimitExceeded, error, value]\n    )\n\n    return (\n      <Box width=\"100%\" {...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          <StyledTextArea\n            ref={ref as any}\n            disabled={disabled}\n            focus={focus}\n            hover={hover}\n            error={hasError}\n            onChange={handleChange}\n            defaultValue={defaultValue}\n            required={required}\n            title={title}\n            placeholder={inputProps.placeholder || \" \"}\n            {...inputProps}\n          />\n\n          {!!title && (\n            <StyledLabel htmlFor={inputProps.name}>\n              {title}\n              <span />\n            </StyledLabel>\n          )}\n        </Box>\n\n        {(required || characterLimit) && !(error && typeof error === \"string\") && (\n          <Box display=\"flex\" mt={0.5} mx={1}>\n            {required && <RequiredField flex={1} />}\n\n            {typeof characterLimit !== \"undefined\" && (\n              <Text\n                flex={1}\n                variant=\"xs\"\n                color={characterLimitExceeded(value) ? \"red100\" : \"black60\"}\n                textAlign=\"right\"\n              >\n                {value.length}/{characterLimit}\n              </Text>\n            )}\n          </Box>\n        )}\n\n        {error && typeof error === \"string\" && (\n          <Text variant=\"xs\" color=\"red100\" mt={0.5} ml={1}>\n            {error}\n          </Text>\n        )}\n      </Box>\n    )\n  }\n)\n\nTextArea.displayName = \"TextArea\"\n\ntype StyledTextAreaProps = Pick<\n  TextAreaProps,\n  \"disabled\" | \"error\" | \"hover\" | \"focus\" | \"active\" | \"title\"\n>\n\nconst StyledTextArea = styled.textarea<StyledTextAreaProps>`\n  appearance: none;\n  display: block;\n  width: 100%;\n  padding: ${themeGet(\"space.1\")};\n  resize: vertical;\n  transition: border-color 0.25s, color 0.25s;\n  outline: none;\n  border: 1px solid;\n  border-radius: 3px;\n  font-family: ${themeGet(\"fonts.sans\")};\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    // 1000px since the textarea dimensions are adjustable\n    -webkit-box-shadow: 0 0 0px 1000px ${themeGet(\"colors.white100\")} inset;\n  }\n\n  ${(props) => {\n    return css`\n      ${TEXTAREA_STATES.default}\n      ${props.hover && TEXTAREA_STATES.hover}\n      ${props.focus && TEXTAREA_STATES.focus}\n      ${props.active && TEXTAREA_STATES.active}\n      ${props.disabled && TEXTAREA_STATES.disabled}\n      ${props.error && TEXTAREA_STATES.error}\n\n      &:hover {\n        ${TEXTAREA_STATES.hover}\n      }\n\n      &:not(:placeholder-shown) {\n        ${TEXTAREA_STATES.completed}\n        ${props.error && TEXTAREA_STATES.error}\n      }\n\n      &:focus {\n        outline: none;\n        ${TEXTAREA_STATES.focus}\n\n        :not(:placeholder-shown) {\n          ${!!props.placeholder && TEXTAREA_STATES.active}\n          ${props.error && TEXTAREA_STATES.error}\n        }\n      }\n\n      &:disabled {\n        cursor: default;\n        ${TEXTAREA_STATES.disabled}\n      }\n\n      ${props.title &&\n      css`\n        ::placeholder {\n          opacity: 0;\n        }\n      `}\n    `\n  }}\n`\nconst StyledLabel = styled.label`\n  position: absolute;\n  top: 25px;\n  left: 6px;\n  padding: 0 5px;\n  background-color: transparent;\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  & > span {\n    background-color: ${themeGet(\"colors.white100\")};\n    height: 100%;\n    width: 100%;\n    display: block;\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: -1;\n    transition: 0.25s cubic-bezier(0.64, 0.05, 0.36, 1);\n    transition-property: height, top;\n    transition-delay: 0.1s;\n  }\n`\n"],"mappings":"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"}

package/dist/elements/TextArea/tokens.js

@@ -7,12 +7,13 @@ exports.TEXTAREA_STATES = void 0;
 var _themeGet = require("@styled-system/theme-get");
 var _styledComponents = require("styled-components");
 var TEXTAREA_STATES = {
-  default: (0, _styledComponents.css)(["min-height:", ";font-size:", ";line-height:", ";color:", ";border-color:", ";::placeholder{color:", ";}"], (0, _themeGet.themeGet)("space.12"), (0, _themeGet.themeGet)("textVariants.sm.fontSize"), (0, _themeGet.themeGet)("textVariants.sm.lineHeight"), (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;::placeholder{color:", ";}"], (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)(["min-height:", ";font-size:", ";line-height:", ";color:", ";border-color:", ";::placeholder{color:", ";}& + label{color:", ";font-size:", ";}"], (0, _themeGet.themeGet)("space.12"), (0, _themeGet.themeGet)("textVariants.sm-display.fontSize"), (0, _themeGet.themeGet)("textVariants.sm.lineHeight"), (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:", ";& > span{height:2px;top:50%;}}"], (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:", ";& > span{height:2px;top:50%;}}"], (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:", ";& > span{height:2px;top:50%;}}"], (0, _themeGet.themeGet)("colors.black100"), (0, _themeGet.themeGet)("colors.black60"), (0, _themeGet.themeGet)("colors.black60"), (0, _themeGet.themeGet)("textVariants.xs.fontSize")),
+  disabled: (0, _styledComponents.css)(["color:", ";border-color:", ";background-color:transparent;::placeholder{color:", ";}&:not(:placeholder-shown) + label{color:", ";transform:translateY(-150%);font-size:", ";& > span{height:2px;top:50%;}}&: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)("textVariants.xs.fontSize"), (0, _themeGet.themeGet)("colors.black30")),
+  error: (0, _styledComponents.css)(["border-color:", ";& + label{color:", ";transform:translateY(-150%);font-size:", ";& > span{height:2px;top:50%;}}"], (0, _themeGet.themeGet)("colors.red100"), (0, _themeGet.themeGet)("colors.red100"), (0, _themeGet.themeGet)("textVariants.xs.fontSize"))
 };
 exports.TEXTAREA_STATES = TEXTAREA_STATES;
 //# sourceMappingURL=tokens.js.map