@artsy/palette 37.0.0-canary.1250.29294.0 → 37.0.0-canary.1250.29340.0

package/dist/elements/Button/Button.js

@@ -71,10 +71,12 @@ var Button = /*#__PURE__*/_react.default.forwardRef(function (_ref, forwardedRef
   }, !success && Icon && /*#__PURE__*/_react.default.createElement(Icon, {
     fill: "currentColor",
     mr: 0.5,
+    ml: -0.5,
     "aria-hidden": "true"
   }), success && /*#__PURE__*/_react.default.createElement(_CheckmarkIcon.default, {
     fill: "currentColor",
     mr: 0.5,
+    ml: -0.5,
     "aria-hidden": "true"
   }), children));
 });

package/dist/elements/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","names":["_composeReactRefs","_interopRequireDefault","require","_react","_interopRequireWildcard","_styledComponents","_styledSystem","_CheckmarkIcon","_themes","_Box","_Spinner","_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","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","Button","React","forwardRef","_ref","forwardedRef","children","loading","success","_ref$size","size","onClick","_ref$alignItems","alignItems","_ref$justifyContent","justifyContent","Icon","rest","ref","useRef","handleClick","event","useEffect","current","_ref$current","blur","createElement","Container","composeRefs","tabIndex","display","Spinner","color","Text","lineHeight","variant","getTextVariant","opacity","width","fill","mr","exports","displayName","defaultProps","buttonMixin","css","styled","button","withConfig","componentId","prop","variants","BUTTON_SIZES","props","hover","BUTTON_VARIANTS","active","focus","disabled","THEME","mediaQueries","boxMixin","BUTTON_TEXT_SIZES","Array","isArray","map","s","large"],"sources":["../../../src/elements/Button/Button.tsx"],"sourcesContent":["import composeRefs from \"@seznam/compose-react-refs\"\nimport React, { useEffect, useRef } from \"react\"\nimport styled, { css } from \"styled-components\"\nimport { ResponsiveValue, variant } from \"styled-system\"\nimport CheckmarkIcon from \"@artsy/icons/CheckmarkIcon\"\nimport { TextVariant } from \"@artsy/palette-tokens/dist/typography/v3\"\nimport { THEME } from \"../../themes\"\nimport { boxMixin, BoxProps } from \"../Box\"\nimport { Spinner } from \"../Spinner\"\nimport { Text, TextProps } from \"../Text\"\nimport { BUTTON_SIZES, BUTTON_TEXT_SIZES, BUTTON_VARIANTS } from \"./tokens\"\nimport { ButtonSize, ButtonVariant } from \"./types\"\n\nexport interface ButtonProps\n  extends BoxProps,\n    React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /**\n   * @description\n   * The theme of the button. It's possible to pass an array that\n   * behaves accordingly to the media breakpoints [\"sm\", \"md\", \"lg\", \"xl\"]\n   * @example\n   * \"primaryBlack\"\n   * \"primaryWhite\"\n   * [\"primaryGray\", \"secondaryBlack\"]\n   * @see {@link ButtonVariant}\n   */\n  variant?: ResponsiveValue<ButtonVariant>\n  /** Size of the button */\n  size?: ResponsiveValue<ButtonSize>\n  /** Displays a loader in the button */\n  loading?: boolean\n  /** Forces hover state */\n  hover?: boolean\n  /** Forces focus state */\n  focus?: boolean\n  /** Forces active state */\n  active?: boolean\n  /** Forces success state */\n  success?: boolean\n  /** Optional icon slot */\n  Icon?: React.FunctionComponent<BoxProps & { fill?: ResponsiveValue<string> }>\n}\n\nexport const Button: React.ForwardRefExoticComponent<\n  ButtonProps & { ref?: React.Ref<HTMLElement> }\n> = React.forwardRef(\n  (\n    {\n      children,\n      loading,\n      success,\n      size = \"large\",\n      onClick,\n      alignItems = \"center\",\n      justifyContent = \"center\",\n      Icon,\n      ...rest\n    },\n    forwardedRef\n  ) => {\n    const ref = useRef<HTMLButtonElement | null>(null)\n\n    const handleClick = (\n      event: React.MouseEvent<HTMLButtonElement, MouseEvent>\n    ) => {\n      if (!loading && onClick) {\n        onClick(event)\n      }\n    }\n\n    useEffect(() => {\n      if (loading && ref.current !== null) {\n        ref.current?.blur()\n      }\n    }, [loading])\n\n    return (\n      <Container\n        ref={composeRefs(ref, forwardedRef) as any}\n        onClick={handleClick}\n        size={size}\n        loading={loading}\n        success={success}\n        tabIndex={loading ? -1 : 0}\n        display=\"inline-flex\"\n        alignItems={alignItems}\n        justifyContent={justifyContent}\n        {...rest}\n      >\n        {loading && <Spinner size={size} color=\"currentColor\" />}\n\n        <Text\n          lineHeight={1}\n          variant={getTextVariant(size)}\n          opacity={loading ? 0 : 1}\n          display=\"flex\"\n          alignItems={alignItems}\n          justifyContent={justifyContent}\n          width=\"100%\"\n        >\n          {!success && Icon && (\n            <Icon fill=\"currentColor\" mr={0.5} aria-hidden=\"true\" />\n          )}\n\n          {success && (\n            <CheckmarkIcon fill=\"currentColor\" mr={0.5} aria-hidden=\"true\" />\n          )}\n\n          {children}\n        </Text>\n      </Container>\n    )\n  }\n)\n\nButton.displayName = \"Button\"\n\nButton.defaultProps = {\n  size: \"large\",\n  variant: \"primaryBlack\",\n}\n\ntype ContainerProps = Pick<\n  ButtonProps,\n  \"active\" | \"disabled\" | \"focus\" | \"hover\" | \"loading\" | \"size\" | \"success\"\n>\n\nexport const buttonMixin = css`\n  cursor: pointer;\n  position: relative;\n  white-space: nowrap;\n  font-weight: normal;\n  text-align: center;\n  border: 1px solid;\n  text-decoration: none;\n  transition: color 0.25s ease, border-color 0.25s ease,\n    background-color 0.25s ease, box-shadow 0.25s ease;\n`\n\nconst Container = styled.button<ContainerProps & ButtonProps>`\n  ${buttonMixin};\n\n  /* Handle sizing */\n  ${variant({ prop: \"size\", variants: BUTTON_SIZES })}\n\n  ${(props) => {\n    // Handle props driven states\n    if (props.hover) {\n      return variant({ variants: BUTTON_VARIANTS.hover })\n    }\n\n    if (props.active) {\n      return variant({ variants: BUTTON_VARIANTS.active })\n    }\n\n    if (props.success) {\n      return variant({ variants: BUTTON_VARIANTS.success })\n    }\n\n    if (props.focus) {\n      return css`\n        outline: 0;\n        ${variant({ variants: BUTTON_VARIANTS.focus })}\n      `\n    }\n\n    if (props.loading) {\n      return css`\n        cursor: auto;\n        transition: none;\n        pointer-events: none;\n        ${variant({ variants: BUTTON_VARIANTS.loading })}\n      `\n    }\n\n    if (props.disabled) {\n      return css`\n        pointer-events: none;\n        ${variant({ variants: BUTTON_VARIANTS.disabled })}\n      `\n    }\n\n    return variant({ variants: BUTTON_VARIANTS.default })\n  }}\n\n  ${() => {\n    // Handle pseudo classes\n    return css`\n      @media ${THEME.mediaQueries.hover} {\n        &:hover {\n          ${variant({ variants: BUTTON_VARIANTS.hover })}\n        }\n      }\n\n      &:focus {\n        outline: 0;\n        ${variant({ variants: BUTTON_VARIANTS.focus })}\n      }\n\n      &:active {\n        ${variant({ variants: BUTTON_VARIANTS.active })}\n      }\n\n      &:disabled {\n        pointer-events: none;\n        ${variant({ variants: BUTTON_VARIANTS.disabled })}\n      }\n    `\n  }};\n\n  ${boxMixin};\n`\n\nconst getTextVariant = (\n  size: ResponsiveValue<ButtonSize>\n): TextProps[\"variant\"] => {\n  if (typeof size === \"string\") {\n    return BUTTON_TEXT_SIZES[size]\n  }\n\n  if (Array.isArray(size)) {\n    return size.map((s) => BUTTON_TEXT_SIZES[s!] as TextVariant)\n  }\n\n  return BUTTON_TEXT_SIZES.large\n}\n"],"mappings":"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"}
+{"version":3,"file":"Button.js","names":["_composeReactRefs","_interopRequireDefault","require","_react","_interopRequireWildcard","_styledComponents","_styledSystem","_CheckmarkIcon","_themes","_Box","_Spinner","_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","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","Button","React","forwardRef","_ref","forwardedRef","children","loading","success","_ref$size","size","onClick","_ref$alignItems","alignItems","_ref$justifyContent","justifyContent","Icon","rest","ref","useRef","handleClick","event","useEffect","current","_ref$current","blur","createElement","Container","composeRefs","tabIndex","display","Spinner","color","Text","lineHeight","variant","getTextVariant","opacity","width","fill","mr","ml","exports","displayName","defaultProps","buttonMixin","css","styled","button","withConfig","componentId","prop","variants","BUTTON_SIZES","props","hover","BUTTON_VARIANTS","active","focus","disabled","THEME","mediaQueries","boxMixin","BUTTON_TEXT_SIZES","Array","isArray","map","s","large"],"sources":["../../../src/elements/Button/Button.tsx"],"sourcesContent":["import composeRefs from \"@seznam/compose-react-refs\"\nimport React, { useEffect, useRef } from \"react\"\nimport styled, { css } from \"styled-components\"\nimport { ResponsiveValue, variant } from \"styled-system\"\nimport CheckmarkIcon from \"@artsy/icons/CheckmarkIcon\"\nimport { TextVariant } from \"@artsy/palette-tokens/dist/typography/v3\"\nimport { THEME } from \"../../themes\"\nimport { boxMixin, BoxProps } from \"../Box\"\nimport { Spinner } from \"../Spinner\"\nimport { Text, TextProps } from \"../Text\"\nimport { BUTTON_SIZES, BUTTON_TEXT_SIZES, BUTTON_VARIANTS } from \"./tokens\"\nimport { ButtonSize, ButtonVariant } from \"./types\"\n\nexport interface ButtonProps\n  extends BoxProps,\n    React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /**\n   * @description\n   * The theme of the button. It's possible to pass an array that\n   * behaves accordingly to the media breakpoints [\"sm\", \"md\", \"lg\", \"xl\"]\n   * @example\n   * \"primaryBlack\"\n   * \"primaryWhite\"\n   * [\"primaryGray\", \"secondaryBlack\"]\n   * @see {@link ButtonVariant}\n   */\n  variant?: ResponsiveValue<ButtonVariant>\n  /** Size of the button */\n  size?: ResponsiveValue<ButtonSize>\n  /** Displays a loader in the button */\n  loading?: boolean\n  /** Forces hover state */\n  hover?: boolean\n  /** Forces focus state */\n  focus?: boolean\n  /** Forces active state */\n  active?: boolean\n  /** Forces success state */\n  success?: boolean\n  /** Optional icon slot */\n  Icon?: React.FunctionComponent<BoxProps & { fill?: ResponsiveValue<string> }>\n}\n\nexport const Button: React.ForwardRefExoticComponent<\n  ButtonProps & { ref?: React.Ref<HTMLElement> }\n> = React.forwardRef(\n  (\n    {\n      children,\n      loading,\n      success,\n      size = \"large\",\n      onClick,\n      alignItems = \"center\",\n      justifyContent = \"center\",\n      Icon,\n      ...rest\n    },\n    forwardedRef\n  ) => {\n    const ref = useRef<HTMLButtonElement | null>(null)\n\n    const handleClick = (\n      event: React.MouseEvent<HTMLButtonElement, MouseEvent>\n    ) => {\n      if (!loading && onClick) {\n        onClick(event)\n      }\n    }\n\n    useEffect(() => {\n      if (loading && ref.current !== null) {\n        ref.current?.blur()\n      }\n    }, [loading])\n\n    return (\n      <Container\n        ref={composeRefs(ref, forwardedRef) as any}\n        onClick={handleClick}\n        size={size}\n        loading={loading}\n        success={success}\n        tabIndex={loading ? -1 : 0}\n        display=\"inline-flex\"\n        alignItems={alignItems}\n        justifyContent={justifyContent}\n        {...rest}\n      >\n        {loading && <Spinner size={size} color=\"currentColor\" />}\n\n        <Text\n          lineHeight={1}\n          variant={getTextVariant(size)}\n          opacity={loading ? 0 : 1}\n          display=\"flex\"\n          alignItems={alignItems}\n          justifyContent={justifyContent}\n          width=\"100%\"\n        >\n          {!success && Icon && (\n            <Icon fill=\"currentColor\" mr={0.5} ml={-0.5} aria-hidden=\"true\" />\n          )}\n\n          {success && (\n            <CheckmarkIcon\n              fill=\"currentColor\"\n              mr={0.5}\n              ml={-0.5}\n              aria-hidden=\"true\"\n            />\n          )}\n\n          {children}\n        </Text>\n      </Container>\n    )\n  }\n)\n\nButton.displayName = \"Button\"\n\nButton.defaultProps = {\n  size: \"large\",\n  variant: \"primaryBlack\",\n}\n\ntype ContainerProps = Pick<\n  ButtonProps,\n  \"active\" | \"disabled\" | \"focus\" | \"hover\" | \"loading\" | \"size\" | \"success\"\n>\n\nexport const buttonMixin = css`\n  cursor: pointer;\n  position: relative;\n  white-space: nowrap;\n  font-weight: normal;\n  text-align: center;\n  border: 1px solid;\n  text-decoration: none;\n  transition: color 0.25s ease, border-color 0.25s ease,\n    background-color 0.25s ease, box-shadow 0.25s ease;\n`\n\nconst Container = styled.button<ContainerProps & ButtonProps>`\n  ${buttonMixin};\n\n  /* Handle sizing */\n  ${variant({ prop: \"size\", variants: BUTTON_SIZES })}\n\n  ${(props) => {\n    // Handle props driven states\n    if (props.hover) {\n      return variant({ variants: BUTTON_VARIANTS.hover })\n    }\n\n    if (props.active) {\n      return variant({ variants: BUTTON_VARIANTS.active })\n    }\n\n    if (props.success) {\n      return variant({ variants: BUTTON_VARIANTS.success })\n    }\n\n    if (props.focus) {\n      return css`\n        outline: 0;\n        ${variant({ variants: BUTTON_VARIANTS.focus })}\n      `\n    }\n\n    if (props.loading) {\n      return css`\n        cursor: auto;\n        transition: none;\n        pointer-events: none;\n        ${variant({ variants: BUTTON_VARIANTS.loading })}\n      `\n    }\n\n    if (props.disabled) {\n      return css`\n        pointer-events: none;\n        ${variant({ variants: BUTTON_VARIANTS.disabled })}\n      `\n    }\n\n    return variant({ variants: BUTTON_VARIANTS.default })\n  }}\n\n  ${() => {\n    // Handle pseudo classes\n    return css`\n      @media ${THEME.mediaQueries.hover} {\n        &:hover {\n          ${variant({ variants: BUTTON_VARIANTS.hover })}\n        }\n      }\n\n      &:focus {\n        outline: 0;\n        ${variant({ variants: BUTTON_VARIANTS.focus })}\n      }\n\n      &:active {\n        ${variant({ variants: BUTTON_VARIANTS.active })}\n      }\n\n      &:disabled {\n        pointer-events: none;\n        ${variant({ variants: BUTTON_VARIANTS.disabled })}\n      }\n    `\n  }};\n\n  ${boxMixin};\n`\n\nconst getTextVariant = (\n  size: ResponsiveValue<ButtonSize>\n): TextProps[\"variant\"] => {\n  if (typeof size === \"string\") {\n    return BUTTON_TEXT_SIZES[size]\n  }\n\n  if (Array.isArray(size)) {\n    return size.map((s) => BUTTON_TEXT_SIZES[s!] as TextVariant)\n  }\n\n  return BUTTON_TEXT_SIZES.large\n}\n"],"mappings":"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"}

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

@@ -9,8 +9,7 @@ export interface InputProps extends BoxProps, Omit<React.InputHTMLAttributes<HTM
     hover?: boolean;
     required?: boolean;
     title?: string;
-    prefixOffset?: number;
-    suffixOffset?: number;
+    labelOffset?: number;
     showCounter?: boolean;
 }
 /** Input component */

package/dist/elements/Input/Input.js

@@ -15,7 +15,7 @@ var _Text = require("../Text");
 var _Tooltip = require("../Tooltip");
 var _tokens = require("./tokens");
 var _helpers = require("../../helpers");
-var _excluded = ["children", "className", "description", "disabled", "error", "required", "focus", "hover", "title", "height", "prefixOffset", "suffixOffset", "showCounter"];
+var _excluded = ["children", "className", "description", "disabled", "error", "required", "focus", "hover", "title", "height", "labelOffset", "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 }; }
@@ -40,8 +40,7 @@ var Input = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     hover = _ref.hover,
     title = _ref.title,
     height = _ref.height,
-    prefixOffset = _ref.prefixOffset,
-    suffixOffset = _ref.suffixOffset,
+    labelOffset = _ref.labelOffset,
     showCounter = _ref.showCounter,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _splitBoxProps = (0, _Box.splitBoxProps)(rest),
@@ -78,8 +77,7 @@ var Input = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     height: height !== null && height !== void 0 ? height : 50,
     name: inputProps.name,
     title: title,
-    suffixOffset: suffixOffset,
-    prefixOffset: prefixOffset,
+    labelOffset: labelOffset,
     onChange: function onChange(e) {
       var _inputProps$onChange;
       (_inputProps$onChange = inputProps.onChange) === null || _inputProps$onChange === void 0 ? void 0 : _inputProps$onChange.call(inputProps, e);
@@ -89,7 +87,7 @@ var Input = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     },
     placeholder: inputProps.placeholder || " "
   }, inputProps)), !!title && /*#__PURE__*/_react.default.createElement(StyledLabel, {
-    prefixOffset: prefixOffset,
+    labelOffset: labelOffset,
     htmlFor: inputProps.name
   }, title, /*#__PURE__*/_react.default.createElement("span", null)), children), (required || (inputProps === null || inputProps === void 0 ? void 0 : inputProps.maxLength) && showCounter) && !(error && typeof error === "string") && /*#__PURE__*/_react.default.createElement(_Box.Box, {
     display: "flex",
@@ -115,13 +113,13 @@ var StyledInput = _styledComponents.default.input.withConfig({
   displayName: "Input__StyledInput",
   componentId: "bysdh7-0"
 })(["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;}", ";"], (0, _themeGet.themeGet)("space.1"), (0, _themeGet.themeGet)("fonts.sans"), _styledSystem.height, 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;}"]));
+  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, _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:transparent;transform:translateY(-50%);transition:", ";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:", ";transition-property:height,top;transition-delay:0.1s;}", ""], _helpers.FORM_ELEMENT_TRANSITION, (0, _themeGet.themeGet)("fonts.sans"), (0, _themeGet.themeGet)("colors.white100"), _helpers.FORM_ELEMENT_TRANSITION, function (_ref2) {
-  var prefixOffset = _ref2.prefixOffset;
-  return !!prefixOffset && (0, _styledComponents.css)(["padding-left:", "px;"], prefixOffset - 5);
+  var labelOffset = _ref2.labelOffset;
+  return !!labelOffset && (0, _styledComponents.css)(["padding-left:", "px;"], labelOffset - 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","_RequiredField","_Box","_Text","_Tooltip","_tokens","_helpers","_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","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","FORM_ELEMENT_TRANSITION","_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\"\nimport { FORM_ELEMENT_TRANSITION } from \"../../helpers\"\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 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={inputProps.name}\n            title={title}\n            suffixOffset={suffixOffset}\n            prefixOffset={prefixOffset}\n            onChange={(e) => {\n              inputProps.onChange?.(e)\n              if (inputProps.maxLength) {\n                countChars(e)\n              }\n            }}\n            placeholder={inputProps.placeholder || \" \"}\n            {...inputProps}\n          />\n\n          {!!title && (\n            <StyledLabel prefixOffset={prefixOffset} htmlFor={inputProps.name}>\n              {title}\n              <span />\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  ${(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: transparent;\n  transform: translateY(-50%);\n  transition: ${FORM_ELEMENT_TRANSITION};\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: ${FORM_ELEMENT_TRANSITION};\n    transition-property: height, top;\n    transition-delay: 0.1s;\n  }\n\n  ${({ prefixOffset }) =>\n    !!prefixOffset &&\n    css`\n      padding-left: ${prefixOffset - 5}px;\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","_helpers","_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","labelOffset","showCounter","rest","_splitBoxProps","splitBoxProps","_splitBoxProps2","boxProps","inputProps","_React$useState","useState","_React$useState2","charCount","setCharCount","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","FORM_ELEMENT_TRANSITION","_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\"\nimport { FORM_ELEMENT_TRANSITION } from \"../../helpers\"\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  labelOffset?: 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      labelOffset,\n      showCounter,\n      ...rest\n    },\n    ref\n  ) => {\n    const [boxProps, inputProps] = splitBoxProps(rest)\n    const [charCount, setCharCount] = React.useState(0)\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={inputProps.name}\n            title={title}\n            labelOffset={labelOffset}\n            onChange={(e) => {\n              inputProps.onChange?.(e)\n              if (inputProps.maxLength) {\n                countChars(e)\n              }\n            }}\n            placeholder={inputProps.placeholder || \" \"}\n            {...inputProps}\n          />\n\n          {!!title && (\n            <StyledLabel labelOffset={labelOffset} htmlFor={inputProps.name}>\n              {title}\n              <span />\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\" | \"error\" | \"hover\" | \"focus\" | \"active\" | \"title\" | \"labelOffset\"\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  ${(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      &: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: transparent;\n  transform: translateY(-50%);\n  transition: ${FORM_ELEMENT_TRANSITION};\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: ${FORM_ELEMENT_TRANSITION};\n    transition-property: height, top;\n    transition-delay: 0.1s;\n  }\n\n  ${({ labelOffset }) =>\n    !!labelOffset &&\n    css`\n      padding-left: ${labelOffset - 5}px;\n    `}\n`\n"],"mappings":"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"}

package/dist/elements/LabeledInput/LabeledInput.js

@@ -51,8 +51,10 @@ var LabeledInput = /*#__PURE__*/_react.default.forwardRef(function (_ref, forwar
     position: "relative"
   }, boxProps), /*#__PURE__*/_react.default.createElement(_Input.Input, _extends({
     ref: forwardedRef,
-    height: height
-  }, _defineProperty({}, isPrefix ? "prefixOffset" : "suffixOffset", offset + 15), inputProps), /*#__PURE__*/_react.default.createElement(_Box.Box, _extends({
+    height: height,
+    labelOffset: isPrefix ? offset + 15 : undefined,
+    style: _defineProperty({}, isPrefix ? "paddingLeft" : "paddingRight", offset + 15)
+  }, inputProps), /*#__PURE__*/_react.default.createElement(_Box.Box, _extends({
     ref: labelRef,
     position: "absolute",
     display: "flex",

package/dist/elements/LabeledInput/LabeledInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"LabeledInput.js","names":["_react","_interopRequireWildcard","require","_isText2","_Box","_Input","_Text","_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","_defineProperty","value","_toPropertyKey","enumerable","configurable","writable","arg","_toPrimitive","String","input","hint","prim","Symbol","toPrimitive","undefined","res","TypeError","Number","_slicedToArray","arr","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","o","minLen","_arrayLikeToArray","n","toString","slice","constructor","name","Array","from","test","len","arr2","_i","iterator","_s","_e","_x","_r","_arr","_n","_d","next","done","push","err","return","isArray","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","LabeledInput","React","forwardRef","_ref","forwardedRef","label","height","_ref$variant","variant","rest","labelRef","useRef","_useState","useState","_useState2","offset","setOffset","useEffect","current","offsetWidth","_splitBoxProps","splitBoxProps","_splitBoxProps2","boxProps","inputProps","isText","_isText","isPrefix","createElement","Box","position","Input","ref","display","alignItems","top","bottom","style","pointerEvents","Text","color","lineHeight","exports","displayName"],"sources":["../../../src/elements/LabeledInput/LabeledInput.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\"\nimport { isText as _isText } from \"../../helpers/isText\"\nimport { Box, splitBoxProps } from \"../Box\"\nimport { Input, InputProps } from \"../Input\"\nimport { Text } from \"../Text\"\n\nexport interface LabeledInputProps extends InputProps {\n  label: React.ReactNode\n  variant?: \"suffix\" | \"prefix\"\n}\n\n/** Input with a right-aligned or left-aligned label */\nexport const LabeledInput: React.ForwardRefExoticComponent<\n  LabeledInputProps & { ref?: React.Ref<HTMLInputElement> }\n> = React.forwardRef(\n  ({ label, height, variant = \"suffix\", ...rest }, forwardedRef) => {\n    const labelRef = useRef<HTMLDivElement | null>(null)\n    const [offset, setOffset] = useState(0)\n\n    useEffect(() => {\n      if (labelRef.current === null) return\n      setOffset(labelRef.current.offsetWidth)\n    }, [])\n\n    const [boxProps, inputProps] = splitBoxProps(rest)\n\n    const isText = _isText(label)\n\n    const isPrefix = variant === \"prefix\"\n\n    return (\n      <Box position=\"relative\" {...boxProps}>\n        <Input\n          ref={forwardedRef}\n          height={height}\n          {...{ [isPrefix ? \"prefixOffset\" : \"suffixOffset\"]: offset + 15 }}\n          {...inputProps}\n        >\n          <Box\n            ref={labelRef as any}\n            position=\"absolute\"\n            display=\"flex\"\n            alignItems=\"center\"\n            top={0}\n            bottom={0}\n            style={{ pointerEvents: isText ? \"none\" : undefined }}\n            {...{ [isPrefix ? \"left\" : \"right\"]: 1 }}\n          >\n            {isText ? (\n              <Text variant=\"sm-display\" color=\"black60\" lineHeight={1}>\n                {label}\n              </Text>\n            ) : (\n              label\n            )}\n          </Box>\n        </Input>\n      </Box>\n    )\n  }\n)\n\nLabeledInput.displayName = \"LabeledInput\"\n"],"mappings":"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"}
+{"version":3,"file":"LabeledInput.js","names":["_react","_interopRequireWildcard","require","_isText2","_Box","_Input","_Text","_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","_defineProperty","value","_toPropertyKey","enumerable","configurable","writable","arg","_toPrimitive","String","input","hint","prim","Symbol","toPrimitive","undefined","res","TypeError","Number","_slicedToArray","arr","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","o","minLen","_arrayLikeToArray","n","toString","slice","constructor","name","Array","from","test","len","arr2","_i","iterator","_s","_e","_x","_r","_arr","_n","_d","next","done","push","err","return","isArray","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","LabeledInput","React","forwardRef","_ref","forwardedRef","label","height","_ref$variant","variant","rest","labelRef","useRef","_useState","useState","_useState2","offset","setOffset","useEffect","current","offsetWidth","_splitBoxProps","splitBoxProps","_splitBoxProps2","boxProps","inputProps","isText","_isText","isPrefix","createElement","Box","position","Input","ref","labelOffset","style","display","alignItems","top","bottom","pointerEvents","Text","color","lineHeight","exports","displayName"],"sources":["../../../src/elements/LabeledInput/LabeledInput.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\"\nimport { isText as _isText } from \"../../helpers/isText\"\nimport { Box, splitBoxProps } from \"../Box\"\nimport { Input, InputProps } from \"../Input\"\nimport { Text } from \"../Text\"\n\nexport interface LabeledInputProps extends InputProps {\n  label: React.ReactNode\n  variant?: \"suffix\" | \"prefix\"\n}\n\n/** Input with a right-aligned or left-aligned label */\nexport const LabeledInput: React.ForwardRefExoticComponent<\n  LabeledInputProps & { ref?: React.Ref<HTMLInputElement> }\n> = React.forwardRef(\n  ({ label, height, variant = \"suffix\", ...rest }, forwardedRef) => {\n    const labelRef = useRef<HTMLDivElement | null>(null)\n    const [offset, setOffset] = useState(0)\n\n    useEffect(() => {\n      if (labelRef.current === null) return\n      setOffset(labelRef.current.offsetWidth)\n    }, [])\n\n    const [boxProps, inputProps] = splitBoxProps(rest)\n\n    const isText = _isText(label)\n\n    const isPrefix = variant === \"prefix\"\n\n    return (\n      <Box position=\"relative\" {...boxProps}>\n        <Input\n          ref={forwardedRef}\n          height={height}\n          labelOffset={isPrefix ? offset + 15 : undefined}\n          style={{ [isPrefix ? \"paddingLeft\" : \"paddingRight\"]: offset + 15 }}\n          {...inputProps}\n        >\n          <Box\n            ref={labelRef as any}\n            position=\"absolute\"\n            display=\"flex\"\n            alignItems=\"center\"\n            top={0}\n            bottom={0}\n            style={{ pointerEvents: isText ? \"none\" : undefined }}\n            {...{ [isPrefix ? \"left\" : \"right\"]: 1 }}\n          >\n            {isText ? (\n              <Text variant=\"sm-display\" color=\"black60\" lineHeight={1}>\n                {label}\n              </Text>\n            ) : (\n              label\n            )}\n          </Box>\n        </Input>\n      </Box>\n    )\n  }\n)\n\nLabeledInput.displayName = \"LabeledInput\"\n"],"mappings":"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"}

package/dist/elements/MultiSelect/tokens.js

@@ -9,7 +9,7 @@ var _styledComponents = require("styled-components");
 var MULTISELECT_STATES = {
   default: (0, _styledComponents.css)(["height:50px;font-size:", ";color:", ";border-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)("textVariants.sm-display.fontSize")),
   focus: (0, _styledComponents.css)(["color:", ";border-color:", ";text-decoration:underline;& > label{color:", ";transform:translateY(-250%);font-size:", ";}"], (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:", ";", ")}}"], (0, _themeGet.themeGet)("colors.blue100"), (0, _themeGet.themeGet)("colors.black60"), (0, _themeGet.themeGet)("colors.blue100"), function (_ref) {
+  hover: (0, _styledComponents.css)(["color:", ";border-color:", ";text-decoration:underline;& > label{color:", ";", "}"], (0, _themeGet.themeGet)("colors.blue100"), (0, _themeGet.themeGet)("colors.black60"), (0, _themeGet.themeGet)("colors.blue100"), function (_ref) {
     var complete = _ref.complete;
     return !complete && (0, _styledComponents.css)(["text-decoration:underline;"]);
   }),

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

@@ -1 +1 @@
-{"version":3,"file":"tokens.js","names":["_themeGet","require","_styledComponents","MULTISELECT_STATES","default","css","themeGet","focus","hover","_ref","complete","completed","disabled","error","exports"],"sources":["../../../src/elements/MultiSelect/tokens.ts"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport { css } from \"styled-components\"\nimport { State } from \"../Select/types\"\n\nexport const MULTISELECT_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  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(-250%);\n      font-size: ${themeGet(\"textVariants.xs.fontSize\")};\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.blue100\")};\n\n      ${({ complete }) =>\n        !complete &&\n        css`\n          text-decoration: underline;\n        `})}\n    }\n  `,\n  completed: css`\n    border-color: ${themeGet(\"colors.black60\")};\n    text-decoration: none;\n\n    & > label {\n      color: ${themeGet(\"colors.black60\")};\n      transform: translateY(-250%);\n      font-size: ${themeGet(\"textVariants.xs.fontSize\")};\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  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,kBAAsC,GAAG;EACpDC,OAAO,MAAEC,qBAAG,qGAEG,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,CAE5D;EACDC,KAAK,MAAEF,qBAAG,gIACC,IAAAC,kBAAQ,EAAC,iBAAiB,CAAC,EACpB,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAI/B,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAEtB,IAAAA,kBAAQ,EAAC,0BAA0B,CAAC,CAEpD;EACDE,KAAK,MAAEH,qBAAG,2FACC,IAAAC,kBAAQ,EAAC,gBAAgB,CAAC,EACnB,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAI/B,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAEjC,UAAAG,IAAA;IAAA,IAAGC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IAAA,OACX,CAACA,QAAQ,QACTL,qBAAG,iCAEF;EAAA,EAEN;EACDM,SAAS,MAAEN,qBAAG,gHACI,IAAAC,kBAAQ,EAAC,gBAAgB,CAAC,EAI/B,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAEtB,IAAAA,kBAAQ,EAAC,0BAA0B,CAAC,CAEpD;EACDM,QAAQ,MAAEP,qBAAG,qGACF,IAAAC,kBAAQ,EAAC,gBAAgB,CAAC,EACnB,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAI/B,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,CAGtC;EACDO,KAAK,MAAER,qBAAG,2DACC,IAAAC,kBAAQ,EAAC,iBAAiB,CAAC,EACpB,IAAAA,kBAAQ,EAAC,eAAe,CAAC,EAG9B,IAAAA,kBAAQ,EAAC,eAAe,CAAC;AAGxC,CAAC;AAAAQ,OAAA,CAAAX,kBAAA,GAAAA,kBAAA"}
+{"version":3,"file":"tokens.js","names":["_themeGet","require","_styledComponents","MULTISELECT_STATES","default","css","themeGet","focus","hover","_ref","complete","completed","disabled","error","exports"],"sources":["../../../src/elements/MultiSelect/tokens.ts"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport { css } from \"styled-components\"\nimport { State } from \"../Select/types\"\n\nexport const MULTISELECT_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  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(-250%);\n      font-size: ${themeGet(\"textVariants.xs.fontSize\")};\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.blue100\")};\n\n      ${({ complete }) =>\n        !complete &&\n        css`\n          text-decoration: underline;\n        `}\n    }\n  `,\n  completed: css`\n    border-color: ${themeGet(\"colors.black60\")};\n    text-decoration: none;\n\n    & > label {\n      color: ${themeGet(\"colors.black60\")};\n      transform: translateY(-250%);\n      font-size: ${themeGet(\"textVariants.xs.fontSize\")};\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  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,kBAAsC,GAAG;EACpDC,OAAO,MAAEC,qBAAG,qGAEG,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,CAE5D;EACDC,KAAK,MAAEF,qBAAG,gIACC,IAAAC,kBAAQ,EAAC,iBAAiB,CAAC,EACpB,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAI/B,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAEtB,IAAAA,kBAAQ,EAAC,0BAA0B,CAAC,CAEpD;EACDE,KAAK,MAAEH,qBAAG,yFACC,IAAAC,kBAAQ,EAAC,gBAAgB,CAAC,EACnB,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAI/B,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAEjC,UAAAG,IAAA;IAAA,IAAGC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IAAA,OACX,CAACA,QAAQ,QACTL,qBAAG,iCAEF;EAAA,EAEN;EACDM,SAAS,MAAEN,qBAAG,gHACI,IAAAC,kBAAQ,EAAC,gBAAgB,CAAC,EAI/B,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAEtB,IAAAA,kBAAQ,EAAC,0BAA0B,CAAC,CAEpD;EACDM,QAAQ,MAAEP,qBAAG,qGACF,IAAAC,kBAAQ,EAAC,gBAAgB,CAAC,EACnB,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAI/B,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,CAGtC;EACDO,KAAK,MAAER,qBAAG,2DACC,IAAAC,kBAAQ,EAAC,iBAAiB,CAAC,EACpB,IAAAA,kBAAQ,EAAC,eAAe,CAAC,EAG9B,IAAAA,kBAAQ,EAAC,eAAe,CAAC;AAGxC,CAAC;AAAAQ,OAAA,CAAAX,kBAAA,GAAAA,kBAAA"}

package/dist/elements/Pill/Pill.d.ts

@@ -20,6 +20,8 @@ export declare type PillProps = ClickableProps & {
     Icon?: React.FunctionComponent<BoxProps & {
         fill?: ResponsiveValue<string>;
     }>;
+    /** Optional: Icon positioning */
+    iconPosition?: "left" | "right";
 } & ({
     variant?: Extract<PillVariant, "default" | "search" | "badge" | "filter" | "gray">;
 } | {
@@ -43,4 +45,4 @@ export declare type PillProps = ClickableProps & {
  * It may be used for things like active filters, search states,
  * or to denote an profile entity (possibly in the context of a card).
  */
-export declare const Pill: React.FC<PillProps>;
+export declare const Pill: React.ForwardRefExoticComponent<PillProps & React.RefAttributes<HTMLAnchorElement & HTMLButtonElement>>;

package/dist/elements/Pill/Pill.js

@@ -6,17 +6,17 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Pill = exports.PILL_VARIANT_NAMES = void 0;
 var _themeGet = require("@styled-system/theme-get");
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _CloseIcon = _interopRequireDefault(require("@artsy/icons/CloseIcon"));
 var _Clickable = require("../Clickable");
 var _Sup = require("../Sup");
 var _Text = require("../Text");
 var _tokens = require("./tokens");
-var _excluded = ["children", "Icon"];
+var _excluded = ["children", "Icon", "iconPosition"];
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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 }; }
 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 _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; }
@@ -29,12 +29,16 @@ exports.PILL_VARIANT_NAMES = PILL_VARIANT_NAMES;
  * It may be used for things like active filters, search states,
  * or to denote an profile entity (possibly in the context of a card).
  */
-var Pill = function Pill(_ref) {
+var Pill = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, forwardedRef) {
   var children = _ref.children,
     Icon = _ref.Icon,
+    _ref$iconPosition = _ref.iconPosition,
+    iconPosition = _ref$iconPosition === void 0 ? "left" : _ref$iconPosition,
     rest = _objectWithoutProperties(_ref, _excluded);
   var variant = rest.variant === "profile" && rest.compact ? "gray" : rest.variant;
-  return /*#__PURE__*/_react.default.createElement(Container, _extends({}, rest, {
+  return /*#__PURE__*/_react.default.createElement(Container, _extends({
+    ref: forwardedRef
+  }, rest, {
     variant: variant
   }), rest.variant === "profile" && rest.src && !rest.compact && /*#__PURE__*/_react.default.createElement(Thumbnail, _extends({}, rest.src ? {
     src: typeof rest.src === "string" ? rest.src : rest.src[0]
@@ -43,20 +47,24 @@ var Pill = function Pill(_ref) {
   } : {}, {
     // Intentionally empty string
     alt: ""
-  })), Icon && /*#__PURE__*/_react.default.createElement(Icon, {
+  })), Icon && iconPosition === "left" && /*#__PURE__*/_react.default.createElement(Icon, {
     fill: "currentColor",
     ml: -0.5,
     mr: 0.5
   }), /*#__PURE__*/_react.default.createElement(_Text.Text, {
     variant: rest.variant === "search" ? ["xs", "sm-display"] : "xs",
     overflowEllipsis: true
-  }, /*#__PURE__*/_react.default.createElement("span", null, children), rest.variant === "search" && "count" in rest && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, " ", /*#__PURE__*/_react.default.createElement(_Sup.Sup, null, rest.count))), (rest.variant === "filter" && !rest.disabled || rest.variant === "profile" && rest.selected) && /*#__PURE__*/_react.default.createElement(_CloseIcon.default, {
+  }, /*#__PURE__*/_react.default.createElement("span", null, children), rest.variant === "search" && "count" in rest && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, " ", /*#__PURE__*/_react.default.createElement(_Sup.Sup, null, rest.count))), Icon && iconPosition === "right" && /*#__PURE__*/_react.default.createElement(Icon, {
+    fill: "currentColor",
+    ml: 0.5,
+    mr: -0.5
+  }), (rest.variant === "gray" && rest.selected || rest.variant === "filter" && rest.selected || rest.variant === "profile" && rest.selected) && /*#__PURE__*/_react.default.createElement(_CloseIcon.default, {
     fill: "currentColor",
     ml: 0.5,
     width: 15,
     height: 15
   }));
-};
+});
 exports.Pill = Pill;
 Pill.displayName = "Pill";
 Pill.defaultProps = {

package/dist/elements/Pill/Pill.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pill.js","names":["_themeGet","require","_react","_interopRequireDefault","_styledComponents","_interopRequireWildcard","_CloseIcon","_Clickable","_Sup","_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","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","PILL_VARIANT_NAMES","exports","Pill","_ref","children","Icon","rest","variant","compact","createElement","Container","src","Thumbnail","srcSet","concat","alt","fill","ml","mr","Text","overflowEllipsis","Fragment","Sup","count","disabled","selected","width","height","displayName","defaultProps","styled","Clickable","withConfig","componentId","themeGet","props","_props$variant","states","PILL_VARIANTS","css","focus","hover","active","img"],"sources":["../../../src/elements/Pill/Pill.tsx"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport React from \"react\"\nimport styled from \"styled-components\"\nimport { css } from \"styled-components\"\nimport CloseIcon from \"@artsy/icons/CloseIcon\"\nimport { Clickable, ClickableProps } from \"../Clickable\"\nimport { Sup } from \"../Sup\"\nimport { Text } from \"../Text\"\nimport { PILL_VARIANTS } from \"./tokens\"\nimport { BoxProps } from \"../Box\"\nimport { ResponsiveValue } from \"styled-system\"\n\nexport const PILL_VARIANT_NAMES = [\n  \"default\",\n  \"search\",\n  \"filter\",\n  \"profile\",\n  \"badge\",\n  \"gray\",\n] as const\n\nexport type PillVariant = typeof PILL_VARIANT_NAMES[number]\n\nexport type PillState =\n  | \"default\"\n  | \"hover\"\n  | \"focus\"\n  | \"active\"\n  | \"selected\"\n  | \"disabled\"\n\n/** PillProps */\nexport type PillProps = ClickableProps & {\n  as?: keyof JSX.IntrinsicElements | React.ComponentType\n  /** Forces focus state */\n  focus?: boolean\n  /** Forces hover state */\n  hover?: boolean\n  /** Forces active state. This is for working with :active; not denoting a selected state */\n  active?: boolean\n  /** Forces selected state. Use this state to denote the selected state */\n  selected?: boolean\n  /** Optional icon slot */\n  Icon?: React.FunctionComponent<BoxProps & { fill?: ResponsiveValue<string> }>\n} & (\n    | {\n        variant?: Extract<\n          PillVariant,\n          \"default\" | \"search\" | \"badge\" | \"filter\" | \"gray\"\n        >\n      }\n    | {\n        /** `\"profile\"` pills have an optional `src` */\n        variant?: Extract<PillVariant, \"profile\">\n        /**\n         * Optional avatar; 1x or [1x, 2x]\n         * Should target 30x30 @1x, 60x60 @2x\n         */\n        src?: string | [string, string]\n        /** Optionally switch into a condensed form */\n        compact?: boolean\n      }\n    | {\n        /** `search` pills have an optional `count` */\n        variant?: Extract<PillVariant, \"search\">\n        /** Optional count */\n        count?: number\n      }\n  )\n\n/**\n * A Pill is a non-CTA button.\n * It may be used for things like active filters, search states,\n * or to denote an profile entity (possibly in the context of a card).\n */\nexport const Pill: React.FC<PillProps> = ({ children, Icon, ...rest }) => {\n  const variant =\n    rest.variant === \"profile\" && rest.compact ? \"gray\" : rest.variant\n\n  return (\n    <Container {...rest} variant={variant}>\n      {rest.variant === \"profile\" && rest.src && !rest.compact && (\n        <Thumbnail\n          {...(rest.src\n            ? { src: typeof rest.src === \"string\" ? rest.src : rest.src[0] }\n            : {})}\n          {...(rest.src && typeof rest.src !== \"string\" && rest.src[1]\n            ? { srcSet: `${rest.src[0]} 1x, ${rest.src[1]} 2x` }\n            : {})}\n          // Intentionally empty string\n          alt=\"\"\n        />\n      )}\n\n      {Icon && <Icon fill=\"currentColor\" ml={-0.5} mr={0.5} />}\n\n      <Text\n        variant={rest.variant === \"search\" ? [\"xs\", \"sm-display\"] : \"xs\"}\n        overflowEllipsis\n      >\n        <span>{children}</span>\n\n        {rest.variant === \"search\" && \"count\" in rest && (\n          <>\n            {\" \"}\n            <Sup>{rest.count}</Sup>\n          </>\n        )}\n      </Text>\n\n      {((rest.variant === \"filter\" && !rest.disabled) ||\n        (rest.variant === \"profile\" && rest.selected)) && (\n        <CloseIcon fill=\"currentColor\" ml={0.5} width={15} height={15} />\n      )}\n    </Container>\n  )\n}\n\nPill.defaultProps = {\n  variant: \"default\",\n}\n\nconst Container = styled(Clickable)<PillProps>`\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  text-decoration: none;\n  white-space: nowrap;\n  border: 1px solid ${themeGet(\"colors.black15\")};\n  transition: color 0.25s ease, border-color 0.25s ease,\n    background-color 0.25s ease, box-shadow 0.25s ease;\n\n  ${(props) => {\n    const states = PILL_VARIANTS[props.variant ?? \"search\"]\n\n    return css`\n      ${states.default}\n      ${props.focus && states.focus}\n      ${props.hover && states.hover}\n      ${props.selected && states.selected}\n      ${props.active && states.active}\n      ${props.disabled && states.disabled}\n\n      &:hover {\n        ${states.hover}\n      }\n\n      &:focus {\n        outline: 0;\n        ${states.focus}\n        ${props.selected && states.selected}\n      }\n\n      &:active {\n        ${states.active}\n        ${props.selected && states.selected}\n      }\n\n      &:disabled {\n        pointer-events: none;\n        ${states.disabled}\n      }\n    `\n  }}\n`\n\nconst Thumbnail = styled.img`\n  display: block;\n  border-radius: 50%;\n  width: 30px;\n  height: 30px;\n  margin-right: ${themeGet(\"space.1\")};\n  background-color: ${themeGet(\"colors.black30\")};\n  margin-left: -${themeGet(\"space.1\")};\n`\n"],"mappings":"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"}
+{"version":3,"file":"Pill.js","names":["_themeGet","require","_react","_interopRequireWildcard","_styledComponents","_CloseIcon","_interopRequireDefault","_Clickable","_Sup","_Text","_tokens","_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","PILL_VARIANT_NAMES","exports","Pill","forwardRef","_ref","forwardedRef","children","Icon","_ref$iconPosition","iconPosition","rest","variant","compact","createElement","Container","ref","src","Thumbnail","srcSet","concat","alt","fill","ml","mr","Text","overflowEllipsis","Fragment","Sup","count","selected","width","height","displayName","defaultProps","styled","Clickable","withConfig","componentId","themeGet","props","_props$variant","states","PILL_VARIANTS","css","focus","hover","active","disabled","img"],"sources":["../../../src/elements/Pill/Pill.tsx"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport React, { forwardRef } from \"react\"\nimport styled from \"styled-components\"\nimport { css } from \"styled-components\"\nimport CloseIcon from \"@artsy/icons/CloseIcon\"\nimport { Clickable, ClickableProps } from \"../Clickable\"\nimport { Sup } from \"../Sup\"\nimport { Text } from \"../Text\"\nimport { PILL_VARIANTS } from \"./tokens\"\nimport { BoxProps } from \"../Box\"\nimport { ResponsiveValue } from \"styled-system\"\n\nexport const PILL_VARIANT_NAMES = [\n  \"default\",\n  \"search\",\n  \"filter\",\n  \"profile\",\n  \"badge\",\n  \"gray\",\n] as const\n\nexport type PillVariant = typeof PILL_VARIANT_NAMES[number]\n\nexport type PillState =\n  | \"default\"\n  | \"hover\"\n  | \"focus\"\n  | \"active\"\n  | \"selected\"\n  | \"disabled\"\n\n/** PillProps */\nexport type PillProps = ClickableProps & {\n  as?: keyof JSX.IntrinsicElements | React.ComponentType\n  /** Forces focus state */\n  focus?: boolean\n  /** Forces hover state */\n  hover?: boolean\n  /** Forces active state. This is for working with :active; not denoting a selected state */\n  active?: boolean\n  /** Forces selected state. Use this state to denote the selected state */\n  selected?: boolean\n  /** Optional icon slot */\n  Icon?: React.FunctionComponent<BoxProps & { fill?: ResponsiveValue<string> }>\n  /** Optional: Icon positioning */\n  iconPosition?: \"left\" | \"right\"\n} & (\n    | {\n        variant?: Extract<\n          PillVariant,\n          \"default\" | \"search\" | \"badge\" | \"filter\" | \"gray\"\n        >\n      }\n    | {\n        /** `\"profile\"` pills have an optional `src` */\n        variant?: Extract<PillVariant, \"profile\">\n        /**\n         * Optional avatar; 1x or [1x, 2x]\n         * Should target 30x30 @1x, 60x60 @2x\n         */\n        src?: string | [string, string]\n        /** Optionally switch into a condensed form */\n        compact?: boolean\n      }\n    | {\n        /** `search` pills have an optional `count` */\n        variant?: Extract<PillVariant, \"search\">\n        /** Optional count */\n        count?: number\n      }\n  )\n\n/**\n * A Pill is a non-CTA button.\n * It may be used for things like active filters, search states,\n * or to denote an profile entity (possibly in the context of a card).\n */\nexport const Pill = forwardRef<\n  HTMLAnchorElement & HTMLButtonElement,\n  PillProps\n>(({ children, Icon, iconPosition = \"left\", ...rest }, forwardedRef) => {\n  const variant =\n    rest.variant === \"profile\" && rest.compact ? \"gray\" : rest.variant\n\n  return (\n    <Container ref={forwardedRef as any} {...rest} variant={variant}>\n      {rest.variant === \"profile\" && rest.src && !rest.compact && (\n        <Thumbnail\n          {...(rest.src\n            ? { src: typeof rest.src === \"string\" ? rest.src : rest.src[0] }\n            : {})}\n          {...(rest.src && typeof rest.src !== \"string\" && rest.src[1]\n            ? { srcSet: `${rest.src[0]} 1x, ${rest.src[1]} 2x` }\n            : {})}\n          // Intentionally empty string\n          alt=\"\"\n        />\n      )}\n\n      {Icon && iconPosition === \"left\" && (\n        <Icon fill=\"currentColor\" ml={-0.5} mr={0.5} />\n      )}\n\n      <Text\n        variant={rest.variant === \"search\" ? [\"xs\", \"sm-display\"] : \"xs\"}\n        overflowEllipsis\n      >\n        <span>{children}</span>\n\n        {rest.variant === \"search\" && \"count\" in rest && (\n          <>\n            {\" \"}\n            <Sup>{rest.count}</Sup>\n          </>\n        )}\n      </Text>\n\n      {Icon && iconPosition === \"right\" && (\n        <Icon fill=\"currentColor\" ml={0.5} mr={-0.5} />\n      )}\n\n      {((rest.variant === \"gray\" && rest.selected) ||\n        (rest.variant === \"filter\" && rest.selected) ||\n        (rest.variant === \"profile\" && rest.selected)) && (\n        <CloseIcon fill=\"currentColor\" ml={0.5} width={15} height={15} />\n      )}\n    </Container>\n  )\n})\n\nPill.displayName = \"Pill\"\n\nPill.defaultProps = {\n  variant: \"default\",\n}\n\nconst Container = styled(Clickable)<PillProps>`\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  text-decoration: none;\n  white-space: nowrap;\n  border: 1px solid ${themeGet(\"colors.black15\")};\n  transition: color 0.25s ease, border-color 0.25s ease,\n    background-color 0.25s ease, box-shadow 0.25s ease;\n\n  ${(props) => {\n    const states = PILL_VARIANTS[props.variant ?? \"search\"]\n\n    return css`\n      ${states.default}\n      ${props.focus && states.focus}\n      ${props.hover && states.hover}\n      ${props.selected && states.selected}\n      ${props.active && states.active}\n      ${props.disabled && states.disabled}\n\n      &:hover {\n        ${states.hover}\n      }\n\n      &:focus {\n        outline: 0;\n        ${states.focus}\n        ${props.selected && states.selected}\n      }\n\n      &:active {\n        ${states.active}\n        ${props.selected && states.selected}\n      }\n\n      &:disabled {\n        pointer-events: none;\n        ${states.disabled}\n      }\n    `\n  }}\n`\n\nconst Thumbnail = styled.img`\n  display: block;\n  border-radius: 50%;\n  width: 30px;\n  height: 30px;\n  margin-right: ${themeGet(\"space.1\")};\n  background-color: ${themeGet(\"colors.black30\")};\n  margin-left: -${themeGet(\"space.1\")};\n`\n"],"mappings":"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"}

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

@@ -10,3 +10,4 @@ export declare const ArtistWithImage: () => JSX.Element;
 export declare const PillWithIcon: () => JSX.Element;
 export declare const Demo: () => JSX.Element;
 export declare const ProfileVariant: () => JSX.Element;
+export declare const PillWithPopover: () => JSX.Element;

package/dist/elements/Pill/Pill.story.js

@@ -4,7 +4,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.Variants = exports.SearchWithCount = exports.ProfileVariant = exports.PillWithIcon = exports.LongExampleWithTruncation = exports.LinkExample = exports.Demo = exports.ArtistWithImage = void 0;
+exports.default = exports.Variants = exports.SearchWithCount = exports.ProfileVariant = exports.PillWithPopover = exports.PillWithIcon = exports.LongExampleWithTruncation = exports.LinkExample = exports.Demo = exports.ArtistWithImage = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _storybookStates = require("storybook-states");
 var _Flex = require("../Flex");
@@ -13,7 +13,9 @@ var _Pill = require("./Pill");
 var _Box = require("../Box");
 var _Join = require("../Join");
 var _GraphIcon = _interopRequireDefault(require("@artsy/icons/GraphIcon"));
+var _ChevronSmallDownIcon = _interopRequireDefault(require("@artsy/icons/ChevronSmallDownIcon"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _Popover = require("../Popover");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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; }
@@ -130,7 +132,11 @@ exports.ArtistWithImage = ArtistWithImage;
 ArtistWithImage.displayName = "ArtistWithImage";
 var PillWithIcon = function PillWithIcon() {
   return /*#__PURE__*/_react.default.createElement(_storybookStates.States, {
-    states: [{}, {
+    states: [{
+      iconPosition: "right",
+      Icon: _ChevronSmallDownIcon.default,
+      variant: "default"
+    }, {}, {
       focus: true
     }, {
       hover: true
@@ -215,4 +221,20 @@ var ProfileVariant = function ProfileVariant() {
 };
 exports.ProfileVariant = ProfileVariant;
 ProfileVariant.displayName = "ProfileVariant";
+var PillWithPopover = function PillWithPopover() {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Popover.Popover, {
+    placement: "bottom",
+    popover: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "Content")
+  }, function (_ref) {
+    var anchorRef = _ref.anchorRef,
+      onVisible = _ref.onVisible;
+    return /*#__PURE__*/_react.default.createElement(_Pill.Pill, {
+      ref: anchorRef,
+      onClick: function onClick() {
+        return onVisible();
+      }
+    }, "Example");
+  }));
+};
+exports.PillWithPopover = PillWithPopover;
 //# sourceMappingURL=Pill.story.js.map