@artsy/palette 45.13.1 → 45.14.0-canary.1497.33070.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"Pill.js","names":["themeGet","React","forwardRef","styled","css","CloseIcon","Clickable","ClickableProps","Sup","Text","PILL_VARIANTS","BoxProps","ResponsiveValue","PILL_VARIANT_NAMES","Pill","_ref","forwardedRef","_rest$variant","children","Icon","_ref$iconPosition","iconPosition","rest","_objectWithoutProperties","_excluded","variant","compact","createElement","Container","_extends","ref","src","Thumbnail","srcSet","concat","alt","fill","ml","mr","overflowEllipsis","Fragment","count","selected","width","height","displayName","defaultProps","withConfig","componentId","props","_props$variant","states","default","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  \"badge\",\n  \"dotted\",\n  \"default\",\n  \"filter\",\n  \"gray\",\n  \"profile\",\n  \"search\",\n] as const\n\nexport type PillVariant = typeof PILL_VARIANT_NAMES[number]\n\nexport type PillState =\n  | \"active\"\n  | \"default\"\n  | \"disabled\"\n  | \"focus\"\n  | \"hover\"\n  | \"selected\"\n\n/** PillProps */\nexport type PillProps = ClickableProps & {\n  as?:\n    | keyof JSX.IntrinsicElements\n    | React.ComponentType<React.PropsWithChildren<unknown>>\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<\n    React.PropsWithChildren<BoxProps & { fill?: ResponsiveValue<string> }>\n  >\n  /** Optional: Icon positioning */\n  iconPosition?: \"left\" | \"right\"\n} & (\n    | {\n        variant?: Extract<\n          PillVariant,\n          \"badge\" | \"default\" | \"dotted\" | \"filter\" | \"gray\" | \"search\"\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\n      ? \"gray\"\n      : rest.variant ?? \"default\"\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.mono15\")};\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.mono30\")};\n  margin-left: -${themeGet(\"space.1\")};\n`\n"],"mappings":"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"}

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

@@ -0,0 +1,335 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+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); }
+import React, { useState } from "react";
+import { Flex } from "../Flex";
+import { Spacer } from "../Spacer";
+import { Pill, PillVariant, PILL_VARIANT_NAMES } from "./Pill";
+import { Box } from "../Box";
+import { Join } from "../Join";
+import GraphIcon from "@artsy/icons/GraphIcon";
+import ChevronSmallDownIcon from "@artsy/icons/ChevronSmallDownIcon";
+import styled from "styled-components";
+import { Popover } from "../Popover";
+import { STORYBOOK_PROPS_BLOCKLIST } from "../../utils/storybookBlocklist";
+export default {
+  component: Pill,
+  title: "Components/Pill",
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: "A pill-shaped button component with various visual variants for different use cases."
+      }
+    },
+    controls: {
+      exclude: STORYBOOK_PROPS_BLOCKLIST
+    }
+  }
+};
+var Display = styled(Box).withConfig({
+  displayName: "Pillstory__Display",
+  componentId: "sc-1n2t91w-0"
+})([""]);
+Display.displayName = "Pill";
+export var Default = {
+  args: {
+    children: "Default Pill"
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Basic pill component with default styling."
+      }
+    }
+  }
+};
+export var Variants = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement(Box, {
+      display: "flex",
+      flexDirection: "column",
+      gap: 2
+    }, PILL_VARIANT_NAMES.map(function (variant) {
+      return /*#__PURE__*/React.createElement(Display, _extends({
+        key: variant,
+        p: 1,
+        overflowX: "auto"
+      }, ["primaryWhite", "secondaryWhite"].includes(variant) ? {
+        bg: "mono100",
+        color: "mono0"
+      } : {
+        bg: "mono0",
+        color: "mono100"
+      }), /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(Join, {
+        separator: /*#__PURE__*/React.createElement(Spacer, {
+          x: 2
+        })
+      }, /*#__PURE__*/React.createElement(Pill, {
+        variant: variant
+      }, "Default"), /*#__PURE__*/React.createElement(Pill, {
+        variant: variant,
+        focus: true
+      }, "Focus"), /*#__PURE__*/React.createElement(Pill, {
+        variant: variant,
+        hover: true
+      }, "Hover"), /*#__PURE__*/React.createElement(Pill, {
+        variant: variant,
+        active: true
+      }, "Active"), /*#__PURE__*/React.createElement(Pill, {
+        variant: variant,
+        selected: true
+      }, "Selected"), /*#__PURE__*/React.createElement(Pill, {
+        variant: variant,
+        disabled: true
+      }, "Disabled"))));
+    }));
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "All available pill variants with different interaction states."
+      }
+    }
+  }
+};
+export var LinkExample = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement(Pill, {
+      variant: "profile",
+      as: "a"
+      // TODO: Need a decent way of typing the threaded polymorphic `as` prop
+      // @ts-expect-error MIGRATE_STRICT_MODE
+      ,
+      href: "#example"
+    }, "Artist Name");
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Pill rendered as a clickable link element."
+      }
+    }
+  }
+};
+export var LongExampleWithTruncation = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement(Pill, {
+      maxWidth: 300
+    }, "Studio Museum in Harlem Artist-in-Residence (AIR) Program");
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Pill with long text that gets truncated with ellipsis."
+      }
+    }
+  }
+};
+export var SearchWithCount = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement(Box, {
+      display: "flex",
+      gap: 2,
+      flexWrap: "wrap"
+    }, /*#__PURE__*/React.createElement(Pill, {
+      variant: "search",
+      count: 123
+    }, "Default"), /*#__PURE__*/React.createElement(Pill, {
+      variant: "search",
+      count: 123,
+      focus: true
+    }, "Focus"), /*#__PURE__*/React.createElement(Pill, {
+      variant: "search",
+      count: 123,
+      hover: true
+    }, "Hover"), /*#__PURE__*/React.createElement(Pill, {
+      variant: "search",
+      count: 123,
+      active: true
+    }, "Active"), /*#__PURE__*/React.createElement(Pill, {
+      variant: "search",
+      count: 123,
+      selected: true
+    }, "Selected"), /*#__PURE__*/React.createElement(Pill, {
+      variant: "search",
+      count: 123,
+      disabled: true
+    }, "Disabled"));
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Search variant pill with count indicator in different states."
+      }
+    }
+  }
+};
+export var ArtistWithImage = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement(Box, {
+      display: "flex",
+      gap: 2,
+      flexWrap: "wrap"
+    }, /*#__PURE__*/React.createElement(Pill, {
+      variant: "profile",
+      src: ["https://picsum.photos/seed/isa/30/30", "https://picsum.photos/seed/isa/60/60"]
+    }, "Default"), /*#__PURE__*/React.createElement(Pill, {
+      variant: "profile",
+      src: ["https://picsum.photos/seed/isa/30/30", "https://picsum.photos/seed/isa/60/60"],
+      focus: true
+    }, "Focus"), /*#__PURE__*/React.createElement(Pill, {
+      variant: "profile",
+      src: ["https://picsum.photos/seed/isa/30/30", "https://picsum.photos/seed/isa/60/60"],
+      hover: true
+    }, "Hover"), /*#__PURE__*/React.createElement(Pill, {
+      variant: "profile",
+      src: ["https://picsum.photos/seed/isa/30/30", "https://picsum.photos/seed/isa/60/60"],
+      selected: true
+    }, "Selected"), /*#__PURE__*/React.createElement(Pill, {
+      variant: "profile",
+      src: ["https://picsum.photos/seed/isa/30/30", "https://picsum.photos/seed/isa/60/60"],
+      disabled: true
+    }, "Disabled"));
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Profile variant pill with artist image in different states."
+      }
+    }
+  }
+};
+export var PillWithIcon = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement(Box, {
+      display: "flex",
+      flexDirection: "column",
+      gap: 2
+    }, /*#__PURE__*/React.createElement(Box, {
+      display: "flex",
+      gap: 2,
+      flexWrap: "wrap"
+    }, /*#__PURE__*/React.createElement(Pill, {
+      variant: "badge",
+      Icon: GraphIcon
+    }, "Badge with Icon"), /*#__PURE__*/React.createElement(Pill, {
+      variant: "badge",
+      Icon: GraphIcon,
+      focus: true
+    }, "Focus"), /*#__PURE__*/React.createElement(Pill, {
+      variant: "badge",
+      Icon: GraphIcon,
+      hover: true
+    }, "Hover"), /*#__PURE__*/React.createElement(Pill, {
+      variant: "badge",
+      Icon: GraphIcon,
+      selected: true
+    }, "Selected"), /*#__PURE__*/React.createElement(Pill, {
+      variant: "badge",
+      Icon: GraphIcon,
+      disabled: true
+    }, "Disabled")), /*#__PURE__*/React.createElement(Box, {
+      display: "flex",
+      gap: 2,
+      flexWrap: "wrap"
+    }, /*#__PURE__*/React.createElement(Pill, {
+      variant: "default",
+      Icon: ChevronSmallDownIcon,
+      iconPosition: "right"
+    }, "With Right Icon"), /*#__PURE__*/React.createElement(Pill, {
+      variant: "search",
+      Icon: GraphIcon
+    }, "Search with Icon"), /*#__PURE__*/React.createElement(Pill, {
+      variant: "filter",
+      Icon: GraphIcon
+    }, "Filter with Icon"), /*#__PURE__*/React.createElement(Pill, {
+      variant: "dotted",
+      Icon: GraphIcon
+    }, "Dotted with Icon")));
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Pills with various icons and icon positions."
+      }
+    }
+  }
+};
+export var Interactive = {
+  render: function render() {
+    var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      selected = _useState2[0],
+      setSelected = _useState2[1];
+    return /*#__PURE__*/React.createElement(Pill, {
+      selected: selected,
+      onClick: function onClick() {
+        return setSelected(function (prevActive) {
+          return !prevActive;
+        });
+      }
+    }, "Click to Toggle");
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Interactive pill that toggles selected state when clicked."
+      }
+    }
+  }
+};
+export var ProfileVariant = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement(Box, {
+      display: "flex",
+      gap: 2,
+      flexWrap: "wrap"
+    }, /*#__PURE__*/React.createElement(Pill, {
+      variant: "profile",
+      src: "https://picsum.photos/seed/isa/60/60"
+    }, "Standard Profile"), /*#__PURE__*/React.createElement(Pill, {
+      variant: "profile",
+      compact: true,
+      src: "https://picsum.photos/seed/isa/60/60"
+    }, "Compact Profile"), /*#__PURE__*/React.createElement(Pill, {
+      variant: "profile"
+    }, "Profile without Image"));
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Profile variant pills with different configurations."
+      }
+    }
+  }
+};
+export var PillWithPopover = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement(Popover, {
+      placement: "bottom",
+      popover: /*#__PURE__*/React.createElement(React.Fragment, null, "Popover Content")
+    }, function (_ref) {
+      var anchorRef = _ref.anchorRef,
+        onVisible = _ref.onVisible;
+      return /*#__PURE__*/React.createElement(Pill, {
+        ref: anchorRef,
+        onClick: function onClick() {
+          return onVisible();
+        }
+      }, "Click for Popover");
+    });
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Pill that triggers a popover when clicked."
+      }
+    }
+  }
+};
+//# sourceMappingURL=Pill.story.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Pill.story.js","names":["React","useState","Flex","Spacer","Pill","PillVariant","PILL_VARIANT_NAMES","Box","Join","GraphIcon","ChevronSmallDownIcon","styled","Popover","STORYBOOK_PROPS_BLOCKLIST","component","title","tags","parameters","docs","description","controls","exclude","Display","withConfig","displayName","componentId","Default","args","children","story","Variants","render","createElement","display","flexDirection","gap","map","variant","_extends","key","p","overflowX","includes","bg","color","separator","x","focus","hover","active","selected","disabled","LinkExample","as","href","LongExampleWithTruncation","maxWidth","SearchWithCount","flexWrap","count","ArtistWithImage","src","PillWithIcon","Icon","iconPosition","Interactive","_useState","_useState2","_slicedToArray","setSelected","onClick","prevActive","ProfileVariant","compact","PillWithPopover","placement","popover","Fragment","_ref","anchorRef","onVisible","ref"],"sources":["../../../../src/elements/Pill/Pill.story.tsx"],"sourcesContent":["import React, { useState } from \"react\"\nimport { Flex } from \"../Flex\"\nimport { Spacer } from \"../Spacer\"\nimport { Pill, PillVariant, PILL_VARIANT_NAMES } from \"./Pill\"\nimport { Box } from \"../Box\"\nimport { Join } from \"../Join\"\nimport GraphIcon from \"@artsy/icons/GraphIcon\"\nimport ChevronSmallDownIcon from \"@artsy/icons/ChevronSmallDownIcon\"\nimport styled from \"styled-components\"\nimport { Popover } from \"../Popover\"\nimport { STORYBOOK_PROPS_BLOCKLIST } from \"../../utils/storybookBlocklist\"\n\nexport default {\n  component: Pill,\n  title: \"Components/Pill\",\n  tags: [\"autodocs\"],\n  parameters: {\n    docs: {\n      description: {\n        component:\n          \"A pill-shaped button component with various visual variants for different use cases.\",\n      },\n    },\n    controls: {\n        exclude: STORYBOOK_PROPS_BLOCKLIST,\n      },\n  },\n}\n\nconst Display = styled(Box)``\nDisplay.displayName = \"Pill\"\n\nexport const Default = {\n  args: {\n    children: \"Default Pill\",\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Basic pill component with default styling.\",\n      },\n    },\n  },\n}\n\nexport const Variants = {\n  render: () => (\n    <Box display=\"flex\" flexDirection=\"column\" gap={2}>\n      {PILL_VARIANT_NAMES.map((variant) => (\n        <Display\n          key={variant}\n          p={1}\n          overflowX=\"auto\"\n          {...([\"primaryWhite\", \"secondaryWhite\"].includes(variant)\n            ? { bg: \"mono100\", color: \"mono0\" }\n            : { bg: \"mono0\", color: \"mono100\" })}\n        >\n          <Flex>\n            <Join separator={<Spacer x={2} />}>\n              <Pill variant={variant as PillVariant}>Default</Pill>\n              <Pill variant={variant as PillVariant} focus>\n                Focus\n              </Pill>\n              <Pill variant={variant as PillVariant} hover>\n                Hover\n              </Pill>\n              <Pill variant={variant as PillVariant} active>\n                Active\n              </Pill>\n              <Pill variant={variant as PillVariant} selected>\n                Selected\n              </Pill>\n              <Pill variant={variant as PillVariant} disabled>\n                Disabled\n              </Pill>\n            </Join>\n          </Flex>\n        </Display>\n      ))}\n    </Box>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"All available pill variants with different interaction states.\",\n      },\n    },\n  },\n}\n\nexport const LinkExample = {\n  render: () => (\n    <Pill\n      variant=\"profile\"\n      as=\"a\"\n      // TODO: Need a decent way of typing the threaded polymorphic `as` prop\n      // @ts-expect-error MIGRATE_STRICT_MODE\n      href=\"#example\"\n    >\n      Artist Name\n    </Pill>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"Pill rendered as a clickable link element.\",\n      },\n    },\n  },\n}\n\nexport const LongExampleWithTruncation = {\n  render: () => (\n    <Pill maxWidth={300}>\n      Studio Museum in Harlem Artist-in-Residence (AIR) Program\n    </Pill>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"Pill with long text that gets truncated with ellipsis.\",\n      },\n    },\n  },\n}\n\nexport const SearchWithCount = {\n  render: () => (\n    <Box display=\"flex\" gap={2} flexWrap=\"wrap\">\n      <Pill variant=\"search\" count={123}>\n        Default\n      </Pill>\n      <Pill variant=\"search\" count={123} focus>\n        Focus\n      </Pill>\n      <Pill variant=\"search\" count={123} hover>\n        Hover\n      </Pill>\n      <Pill variant=\"search\" count={123} active>\n        Active\n      </Pill>\n      <Pill variant=\"search\" count={123} selected>\n        Selected\n      </Pill>\n      <Pill variant=\"search\" count={123} disabled>\n        Disabled\n      </Pill>\n    </Box>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"Search variant pill with count indicator in different states.\",\n      },\n    },\n  },\n}\n\nexport const ArtistWithImage = {\n  render: () => (\n    <Box display=\"flex\" gap={2} flexWrap=\"wrap\">\n      <Pill\n        variant=\"profile\"\n        src={[\n          \"https://picsum.photos/seed/isa/30/30\",\n          \"https://picsum.photos/seed/isa/60/60\",\n        ]}\n      >\n        Default\n      </Pill>\n      <Pill\n        variant=\"profile\"\n        src={[\n          \"https://picsum.photos/seed/isa/30/30\",\n          \"https://picsum.photos/seed/isa/60/60\",\n        ]}\n        focus\n      >\n        Focus\n      </Pill>\n      <Pill\n        variant=\"profile\"\n        src={[\n          \"https://picsum.photos/seed/isa/30/30\",\n          \"https://picsum.photos/seed/isa/60/60\",\n        ]}\n        hover\n      >\n        Hover\n      </Pill>\n      <Pill\n        variant=\"profile\"\n        src={[\n          \"https://picsum.photos/seed/isa/30/30\",\n          \"https://picsum.photos/seed/isa/60/60\",\n        ]}\n        selected\n      >\n        Selected\n      </Pill>\n      <Pill\n        variant=\"profile\"\n        src={[\n          \"https://picsum.photos/seed/isa/30/30\",\n          \"https://picsum.photos/seed/isa/60/60\",\n        ]}\n        disabled\n      >\n        Disabled\n      </Pill>\n    </Box>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"Profile variant pill with artist image in different states.\",\n      },\n    },\n  },\n}\n\nexport const PillWithIcon = {\n  render: () => (\n    <Box display=\"flex\" flexDirection=\"column\" gap={2}>\n      <Box display=\"flex\" gap={2} flexWrap=\"wrap\">\n        <Pill variant=\"badge\" Icon={GraphIcon}>\n          Badge with Icon\n        </Pill>\n        <Pill variant=\"badge\" Icon={GraphIcon} focus>\n          Focus\n        </Pill>\n        <Pill variant=\"badge\" Icon={GraphIcon} hover>\n          Hover\n        </Pill>\n        <Pill variant=\"badge\" Icon={GraphIcon} selected>\n          Selected\n        </Pill>\n        <Pill variant=\"badge\" Icon={GraphIcon} disabled>\n          Disabled\n        </Pill>\n      </Box>\n      <Box display=\"flex\" gap={2} flexWrap=\"wrap\">\n        <Pill\n          variant=\"default\"\n          Icon={ChevronSmallDownIcon}\n          iconPosition=\"right\"\n        >\n          With Right Icon\n        </Pill>\n        <Pill variant=\"search\" Icon={GraphIcon}>\n          Search with Icon\n        </Pill>\n        <Pill variant=\"filter\" Icon={GraphIcon}>\n          Filter with Icon\n        </Pill>\n        <Pill variant=\"dotted\" Icon={GraphIcon}>\n          Dotted with Icon\n        </Pill>\n      </Box>\n    </Box>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"Pills with various icons and icon positions.\",\n      },\n    },\n  },\n}\n\nexport const Interactive = {\n  render: () => {\n    const [selected, setSelected] = useState(false)\n    return (\n      <Pill\n        selected={selected}\n        onClick={() => setSelected((prevActive) => !prevActive)}\n      >\n        Click to Toggle\n      </Pill>\n    )\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Interactive pill that toggles selected state when clicked.\",\n      },\n    },\n  },\n}\n\nexport const ProfileVariant = {\n  render: () => (\n    <Box display=\"flex\" gap={2} flexWrap=\"wrap\">\n      <Pill variant=\"profile\" src=\"https://picsum.photos/seed/isa/60/60\">\n        Standard Profile\n      </Pill>\n      <Pill\n        variant=\"profile\"\n        compact\n        src=\"https://picsum.photos/seed/isa/60/60\"\n      >\n        Compact Profile\n      </Pill>\n      <Pill variant=\"profile\">Profile without Image</Pill>\n    </Box>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"Profile variant pills with different configurations.\",\n      },\n    },\n  },\n}\n\nexport const PillWithPopover = {\n  render: () => (\n    <Popover placement=\"bottom\" popover={<>Popover Content</>}>\n      {({ anchorRef, onVisible }) => (\n        <Pill ref={anchorRef as any} onClick={() => onVisible()}>\n          Click for Popover\n        </Pill>\n      )}\n    </Popover>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"Pill that triggers a popover when clicked.\",\n      },\n    },\n  },\n}\n"],"mappings":"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"}

package/dist/esm/elements/Pill/index.js

@@ -0,0 +1,2 @@
+export * from "./Pill";
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/elements/Pill/index.ts"],"sourcesContent":["export * from \"./Pill\"\n"],"mappings":"AAAA"}

package/dist/esm/elements/Pill/tokens.js

@@ -0,0 +1,63 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+import { themeGet } from "@styled-system/theme-get";
+import { css, Interpolation } from "styled-components";
+import { Sup } from "../Sup";
+import { PillState, PillVariant } from "./Pill";
+var DEFAULT_STATES = {
+  default: css(["border-radius:15px;height:30px;padding:0 ", ";"], themeGet("space.2")),
+  focus: css(["background-color:", ";border-color:", ";color:", ";text-decoration:underline;"], themeGet("colors.mono5"), themeGet("colors.mono5"), themeGet("colors.blue100")),
+  hover: css(["background-color:", ";border-color:", ";color:", ";text-decoration:underline;"], themeGet("colors.mono5"), themeGet("colors.mono5"), themeGet("colors.blue100")),
+  active: css(["border-color:", ";background-color:", ";color:", ";text-decoration:underline;"], themeGet("colors.blue150"), themeGet("colors.blue150"), themeGet("colors.mono0")),
+  selected: css(["border-color:", ";background-color:", ";color:", ";"], themeGet("colors.blue100"), themeGet("colors.blue100"), themeGet("colors.mono0")),
+  disabled: css(["background-color:", ";border-color:", ";color:", ";text-decoration:none;"], themeGet("colors.mono5"), themeGet("colors.mono5"), themeGet("colors.mono60"))
+};
+export var PILL_VARIANTS = {
+  dotted: _objectSpread(_objectSpread({}, DEFAULT_STATES), {}, {
+    default: css(["", " border-style:dashed;"], DEFAULT_STATES.default)
+  }),
+  default: DEFAULT_STATES,
+  search: _objectSpread(_objectSpread({}, DEFAULT_STATES), {}, {
+    default: css(["", " ", "{color:", ";transition:color 0.25s ease;display:none;}@media (min-width:", "){height:40px;border-radius:20px;", "{display:inline;}}"], DEFAULT_STATES.default, Sup, themeGet("colors.blue100"), themeGet("breakpoints.0"), Sup),
+    focus: css(["", " text-decoration:none;span{text-decoration:underline;}"], DEFAULT_STATES.focus),
+    hover: css(["", " text-decoration:none;span{text-decoration:underline;}", "{color:", ";}"], DEFAULT_STATES.hover, Sup, themeGet("colors.blue100")),
+    active: css(["", " text-decoration:none;span{text-decoration:underline;}", "{color:", ";}"], DEFAULT_STATES.active, Sup, themeGet("colors.mono0")),
+    selected: css(["", " ", "{color:", ";}"], DEFAULT_STATES.selected, Sup, themeGet("colors.mono0")),
+    disabled: css(["", " ", "{color:", ";}"], DEFAULT_STATES.disabled, Sup, themeGet("colors.mono60"))
+  }),
+  filter: {
+    default: css(["height:30px;padding:0 ", ";"], themeGet("space.1")),
+    focus: css(["text-decoration:underline;"]),
+    hover: css(["color:", ";border-color:", ";text-decoration:underline;"], themeGet("colors.blue100"), themeGet("colors.blue100")),
+    active: css(["color:", ";border-color:", ";text-decoration:underline;"], themeGet("colors.blue150"), themeGet("colors.blue150")),
+    selected: css([""]),
+    disabled: css(["border-color:", ";"], themeGet("colors.mono60"))
+  },
+  badge: {
+    default: css(["border-radius:15px;height:30px;padding:0 15px;background-color:", ";border-color:", ";color:", ";"], themeGet("colors.blue10"), themeGet("colors.blue10"), themeGet("colors.blue100")),
+    hover: css(["background-color:", ";border-color:", ";color:", ";text-decoration:underline;"], themeGet("colors.blue100"), themeGet("colors.blue100"), themeGet("colors.mono0")),
+    focus: css(["background-color:", ";border-color:", ";color:", ";text-decoration:underline;"], themeGet("colors.blue100"), themeGet("colors.blue100"), themeGet("colors.mono0")),
+    active: css(["background-color:", ";border-color:", ";color:", ";text-decoration:underline;"], themeGet("colors.blue150"), themeGet("colors.blue150"), themeGet("colors.mono0")),
+    selected: css(["background-color:", ";border-color:", ";color:", ";text-decoration:underline;"], themeGet("colors.blue150"), themeGet("colors.blue150"), themeGet("colors.mono0")),
+    disabled: css(["background-color:", ";border-color:", ";color:", ";"], themeGet("colors.blue10"), themeGet("colors.blue10"), themeGet("colors.blue100"))
+  },
+  profile: _objectSpread(_objectSpread({}, DEFAULT_STATES), {}, {
+    default: css(["border-radius:25px;height:50px;padding:0 ", " 0 ", ";background-color:", ";border-color:", ";"], themeGet("space.2"), themeGet("space.2"), themeGet("colors.mono5"), themeGet("colors.mono5")),
+    active: css(["background-color:", ";border-color:", ";color:", ";text-decoration:underline;"], themeGet("colors.mono5"), themeGet("colors.mono5"), themeGet("colors.mono100")),
+    selected: css(["border-color:", ";color:", ";background-color:", ";border-color:", ";"], themeGet("colors.blue100"), themeGet("colors.mono100"), themeGet("colors.mono5"), themeGet("colors.mono5")),
+    disabled: css(["background-color:", ";border-color:", ";color:", ";"], themeGet("colors.mono5"), themeGet("colors.mono5"), themeGet("colors.mono60"))
+  }),
+  gray: {
+    default: css(["border-radius:15px;height:30px;padding:0 15px;background-color:", ";border-color:", ";color:", ";"], themeGet("colors.mono5"), themeGet("colors.mono5"), themeGet("colors.mono100")),
+    hover: css(["background-color:", ";border-color:", ";color:", ";text-decoration:underline;"], themeGet("colors.mono5"), themeGet("colors.mono5"), themeGet("colors.blue100")),
+    focus: css(["background-color:", ";border-color:", ";color:", ";text-decoration:underline;"], themeGet("colors.mono5"), themeGet("colors.mono5"), themeGet("colors.blue100")),
+    active: css(["background-color:", ";border-color:", ";color:", ";text-decoration:underline;"], themeGet("colors.mono5"), themeGet("colors.mono5"), themeGet("colors.mono100")),
+    selected: css(["border-color:", ";color:", ";background-color:", ";border-color:", ";"], themeGet("colors.blue100"), themeGet("colors.mono100"), themeGet("colors.mono5"), themeGet("colors.mono5")),
+    disabled: css(["background-color:", ";border-color:", ";color:", ";"], themeGet("colors.mono5"), themeGet("colors.mono5"), themeGet("colors.mono60"))
+  }
+};
+//# sourceMappingURL=tokens.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.js","names":["themeGet","css","Interpolation","Sup","PillState","PillVariant","DEFAULT_STATES","default","focus","hover","active","selected","disabled","PILL_VARIANTS","dotted","_objectSpread","search","filter","badge","profile","gray"],"sources":["../../../../src/elements/Pill/tokens.ts"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport { css, Interpolation } from \"styled-components\"\nimport { Sup } from \"../Sup\"\nimport { PillState, PillVariant } from \"./Pill\"\n\nconst DEFAULT_STATES = {\n  default: css`\n    border-radius: 15px;\n    height: 30px;\n    padding: 0 ${themeGet(\"space.2\")};\n  `,\n  focus: css`\n    background-color: ${themeGet(\"colors.mono5\")};\n    border-color: ${themeGet(\"colors.mono5\")};\n    color: ${themeGet(\"colors.blue100\")};\n    text-decoration: underline;\n  `,\n  hover: css`\n    background-color: ${themeGet(\"colors.mono5\")};\n    border-color: ${themeGet(\"colors.mono5\")};\n    color: ${themeGet(\"colors.blue100\")};\n    text-decoration: underline;\n  `,\n  active: css`\n    border-color: ${themeGet(\"colors.blue150\")};\n    background-color: ${themeGet(\"colors.blue150\")};\n    color: ${themeGet(\"colors.mono0\")};\n    text-decoration: underline;\n  `,\n  selected: css`\n    border-color: ${themeGet(\"colors.blue100\")};\n    background-color: ${themeGet(\"colors.blue100\")};\n    color: ${themeGet(\"colors.mono0\")};\n  `,\n  disabled: css`\n    background-color: ${themeGet(\"colors.mono5\")};\n    border-color: ${themeGet(\"colors.mono5\")};\n    color: ${themeGet(\"colors.mono60\")};\n    text-decoration: none;\n  `,\n}\n\nexport const PILL_VARIANTS: Record<\n  PillVariant,\n  Record<PillState, Interpolation<any>[]>\n> = {\n  dotted: {\n    ...DEFAULT_STATES,\n    default: css`\n      ${DEFAULT_STATES.default}\n      border-style: dashed;\n    `,\n  },\n\n  default: DEFAULT_STATES,\n\n  search: {\n    ...DEFAULT_STATES,\n    default: css`\n      ${DEFAULT_STATES.default}\n\n      ${Sup} {\n        color: ${themeGet(\"colors.blue100\")};\n        transition: color 0.25s ease;\n        display: none;\n      }\n\n      @media (min-width: ${themeGet(\"breakpoints.0\")}) {\n        height: 40px;\n        border-radius: 20px;\n\n        ${Sup} {\n          display: inline;\n        }\n      }\n    `,\n    focus: css`\n      ${DEFAULT_STATES.focus}\n      text-decoration: none;\n\n      span {\n        text-decoration: underline;\n      }\n    `,\n    hover: css`\n      ${DEFAULT_STATES.hover}\n      text-decoration: none;\n\n      span {\n        text-decoration: underline;\n      }\n\n      ${Sup} {\n        color: ${themeGet(\"colors.blue100\")};\n      }\n    `,\n    active: css`\n      ${DEFAULT_STATES.active}\n      text-decoration: none;\n\n      span {\n        text-decoration: underline;\n      }\n\n      ${Sup} {\n        color: ${themeGet(\"colors.mono0\")};\n      }\n    `,\n    selected: css`\n      ${DEFAULT_STATES.selected}\n\n      ${Sup} {\n        color: ${themeGet(\"colors.mono0\")};\n      }\n    `,\n    disabled: css`\n      ${DEFAULT_STATES.disabled}\n\n      ${Sup} {\n        color: ${themeGet(\"colors.mono60\")};\n      }\n    `,\n  },\n\n  filter: {\n    default: css`\n      height: 30px;\n      padding: 0 ${themeGet(\"space.1\")};\n    `,\n    focus: css`\n      text-decoration: underline;\n    `,\n    hover: css`\n      color: ${themeGet(\"colors.blue100\")};\n      border-color: ${themeGet(\"colors.blue100\")};\n      text-decoration: underline;\n    `,\n    active: css`\n      color: ${themeGet(\"colors.blue150\")};\n      border-color: ${themeGet(\"colors.blue150\")};\n      text-decoration: underline;\n    `,\n    selected: css`\n      /* Same as default state */\n    `,\n    disabled: css`\n      border-color: ${themeGet(\"colors.mono60\")};\n    `,\n  },\n\n  badge: {\n    default: css`\n      border-radius: 15px;\n      height: 30px;\n      padding: 0 15px;\n      background-color: ${themeGet(\"colors.blue10\")};\n      border-color: ${themeGet(\"colors.blue10\")};\n      color: ${themeGet(\"colors.blue100\")};\n    `,\n    hover: css`\n      background-color: ${themeGet(\"colors.blue100\")};\n      border-color: ${themeGet(\"colors.blue100\")};\n      color: ${themeGet(\"colors.mono0\")};\n      text-decoration: underline;\n    `,\n    focus: css`\n      background-color: ${themeGet(\"colors.blue100\")};\n      border-color: ${themeGet(\"colors.blue100\")};\n      color: ${themeGet(\"colors.mono0\")};\n      text-decoration: underline;\n    `,\n    active: css`\n      background-color: ${themeGet(\"colors.blue150\")};\n      border-color: ${themeGet(\"colors.blue150\")};\n      color: ${themeGet(\"colors.mono0\")};\n      text-decoration: underline;\n    `,\n    selected: css`\n      background-color: ${themeGet(\"colors.blue150\")};\n      border-color: ${themeGet(\"colors.blue150\")};\n      color: ${themeGet(\"colors.mono0\")};\n      text-decoration: underline;\n    `,\n    disabled: css`\n      background-color: ${themeGet(\"colors.blue10\")};\n      border-color: ${themeGet(\"colors.blue10\")};\n      color: ${themeGet(\"colors.blue100\")};\n    `,\n  },\n\n  profile: {\n    ...DEFAULT_STATES,\n    default: css`\n      border-radius: 25px;\n      height: 50px;\n      padding: 0 ${themeGet(\"space.2\")} 0 ${themeGet(\"space.2\")};\n      background-color: ${themeGet(\"colors.mono5\")};\n      border-color: ${themeGet(\"colors.mono5\")};\n    `,\n    active: css`\n      background-color: ${themeGet(\"colors.mono5\")};\n      border-color: ${themeGet(\"colors.mono5\")};\n      color: ${themeGet(\"colors.mono100\")};\n      text-decoration: underline;\n    `,\n    selected: css`\n      border-color: ${themeGet(\"colors.blue100\")};\n      color: ${themeGet(\"colors.mono100\")};\n      background-color: ${themeGet(\"colors.mono5\")};\n      border-color: ${themeGet(\"colors.mono5\")};\n    `,\n    disabled: css`\n      background-color: ${themeGet(\"colors.mono5\")};\n      border-color: ${themeGet(\"colors.mono5\")};\n      color: ${themeGet(\"colors.mono60\")};\n    `,\n  },\n\n  gray: {\n    default: css`\n      border-radius: 15px;\n      height: 30px;\n      padding: 0 15px;\n      background-color: ${themeGet(\"colors.mono5\")};\n      border-color: ${themeGet(\"colors.mono5\")};\n      color: ${themeGet(\"colors.mono100\")};\n    `,\n    hover: css`\n      background-color: ${themeGet(\"colors.mono5\")};\n      border-color: ${themeGet(\"colors.mono5\")};\n      color: ${themeGet(\"colors.blue100\")};\n      text-decoration: underline;\n    `,\n    focus: css`\n      background-color: ${themeGet(\"colors.mono5\")};\n      border-color: ${themeGet(\"colors.mono5\")};\n      color: ${themeGet(\"colors.blue100\")};\n      text-decoration: underline;\n    `,\n    active: css`\n      background-color: ${themeGet(\"colors.mono5\")};\n      border-color: ${themeGet(\"colors.mono5\")};\n      color: ${themeGet(\"colors.mono100\")};\n      text-decoration: underline;\n    `,\n    selected: css`\n      border-color: ${themeGet(\"colors.blue100\")};\n      color: ${themeGet(\"colors.mono100\")};\n      background-color: ${themeGet(\"colors.mono5\")};\n      border-color: ${themeGet(\"colors.mono5\")};\n    `,\n    disabled: css`\n      background-color: ${themeGet(\"colors.mono5\")};\n      border-color: ${themeGet(\"colors.mono5\")};\n      color: ${themeGet(\"colors.mono60\")};\n    `,\n  },\n}\n"],"mappings":"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"}