@artsy/palette 45.13.1 → 45.14.0-canary.1497.33070.0

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

@@ -0,0 +1,231 @@
+import React from "react";
+import { Button } from "../Button";
+import { EntityHeader } from "./EntityHeader";
+import { STORYBOOK_PROPS_BLOCKLIST } from "../../utils/storybookBlocklist";
+export default {
+  component: EntityHeader,
+  title: "Components/EntityHeader",
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: "A header component for displaying entity information including name, image, metadata, and action buttons."
+      }
+    },
+    controls: {
+      exclude: STORYBOOK_PROPS_BLOCKLIST
+    }
+  }
+};
+var FollowButton = function FollowButton() {
+  return /*#__PURE__*/React.createElement(Button, {
+    size: "small",
+    variant: "secondaryBlack",
+    onClick: function onClick() {
+      return alert("Follow");
+    }
+  }, "Follow");
+};
+FollowButton.displayName = "FollowButton";
+var imageProps = {
+  src: "https://picsum.photos/seed/example/110/110",
+  srcSet: "https://picsum.photos/seed/example/110/110 1x, https://picsum.photos/seed/example/220/220 2x",
+  lazyLoad: true
+};
+export var Default = {
+  args: {
+    name: "Francesca DiMattio",
+    initials: "FD",
+    image: imageProps,
+    meta: "American, b. 1979",
+    href: "http://www.artsy.net/artist/francesca-dimattio",
+    FollowButton: /*#__PURE__*/React.createElement(FollowButton, null),
+    maxWidth: 350
+  }
+};
+export var NameOnly = {
+  args: {
+    name: "Francesca DiMattio",
+    maxWidth: 350
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "EntityHeader with only a name."
+      }
+    }
+  }
+};
+export var SmallVariantWithInitials = {
+  args: {
+    smallVariant: true,
+    name: "Francesca DiMattio",
+    initials: "FD",
+    maxWidth: 350
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Small variant EntityHeader with initials."
+      }
+    }
+  }
+};
+export var WithInitials = {
+  args: {
+    name: "Francesca DiMattio",
+    initials: "FD",
+    maxWidth: 350
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "EntityHeader with initials displayed."
+      }
+    }
+  }
+};
+export var SmallVariantWithImage = {
+  args: {
+    smallVariant: true,
+    name: "Francesca DiMattio",
+    image: imageProps,
+    maxWidth: 350
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Small variant EntityHeader with image."
+      }
+    }
+  }
+};
+export var WithImage = {
+  args: {
+    name: "Francesca DiMattio",
+    image: imageProps,
+    maxWidth: 350
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "EntityHeader with image."
+      }
+    }
+  }
+};
+export var WithMetaAndHref = {
+  args: {
+    initials: "FD",
+    name: "Francesca DiMattio",
+    image: imageProps,
+    meta: "American, b. 1979",
+    href: "http://www.artsy.net/artist/francesca-dimattio",
+    maxWidth: 350
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "EntityHeader with metadata and link."
+      }
+    }
+  }
+};
+export var SmallVariantWithButton = {
+  args: {
+    smallVariant: true,
+    name: "Francesca DiMattio",
+    image: imageProps,
+    FollowButton: /*#__PURE__*/React.createElement(FollowButton, null),
+    maxWidth: 350
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Small variant EntityHeader with action button."
+      }
+    }
+  }
+};
+export var Complete = {
+  args: {
+    initials: "FD",
+    name: "Francesca DiMattio",
+    image: imageProps,
+    meta: "American, b. 1979",
+    href: "http://www.artsy.net/artist/francesca-dimattio",
+    FollowButton: /*#__PURE__*/React.createElement(FollowButton, null),
+    maxWidth: 350
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Complete EntityHeader with all features."
+      }
+    }
+  }
+};
+export var LongerName = {
+  args: {
+    initials: "FLD",
+    name: "Francesca Longer DiMattio",
+    image: imageProps,
+    meta: "American, b. Founded 1979",
+    href: "http://www.artsy.net/artist/francesca-dimattio",
+    FollowButton: /*#__PURE__*/React.createElement(FollowButton, null),
+    maxWidth: 350
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "EntityHeader with longer name to test text wrapping."
+      }
+    }
+  }
+};
+export var WithSingleLabel = {
+  args: {
+    initials: "FLD",
+    name: "Francesca Much Longer DiMattio",
+    image: imageProps,
+    meta: "American, b. Founded 1979",
+    href: "http://www.artsy.net/artist/francesca-dimattio",
+    FollowButton: /*#__PURE__*/React.createElement(FollowButton, null),
+    labels: [{
+      children: "Black Owned"
+    }],
+    maxWidth: 350
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "EntityHeader with a single label."
+      }
+    }
+  }
+};
+export var WithMultipleLabels = {
+  args: {
+    initials: "FLD",
+    name: "Francesca Much Longer DiMattio",
+    image: imageProps,
+    meta: "American, b. Founded 1979",
+    href: "http://www.artsy.net/artist/francesca-dimattio",
+    FollowButton: /*#__PURE__*/React.createElement(FollowButton, null),
+    labels: [{
+      children: "Black Owned"
+    }, {
+      children: "Women Owned",
+      variant: "brand"
+    }],
+    maxWidth: 350
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "EntityHeader with multiple labels in different variants."
+      }
+    }
+  }
+};
+//# sourceMappingURL=EntityHeader.story.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EntityHeader.story.js","names":["React","Button","EntityHeader","STORYBOOK_PROPS_BLOCKLIST","component","title","tags","parameters","docs","description","controls","exclude","FollowButton","createElement","size","variant","onClick","alert","displayName","imageProps","src","srcSet","lazyLoad","Default","args","name","initials","image","meta","href","maxWidth","NameOnly","story","SmallVariantWithInitials","smallVariant","WithInitials","SmallVariantWithImage","WithImage","WithMetaAndHref","SmallVariantWithButton","Complete","LongerName","WithSingleLabel","labels","children","WithMultipleLabels"],"sources":["../../../../src/elements/EntityHeader/EntityHeader.story.tsx"],"sourcesContent":["import React from \"react\"\nimport { Button } from \"../Button\"\nimport { EntityHeader } from \"./EntityHeader\"\nimport { STORYBOOK_PROPS_BLOCKLIST } from \"../../utils/storybookBlocklist\"\n\nexport default {\n  component: EntityHeader,\n  title: \"Components/EntityHeader\",\n  tags: [\"autodocs\"],\n  parameters: {\n    docs: {\n      description: {\n        component:\n          \"A header component for displaying entity information including name, image, metadata, and action buttons.\",\n      },\n    },\n    controls: {\n      exclude: STORYBOOK_PROPS_BLOCKLIST,\n    },\n  },\n}\n\nconst FollowButton = () => {\n  return (\n    <Button\n      size=\"small\"\n      variant=\"secondaryBlack\"\n      onClick={() => alert(\"Follow\")}\n    >\n      Follow\n    </Button>\n  )\n}\n\nconst imageProps = {\n  src: \"https://picsum.photos/seed/example/110/110\",\n  srcSet:\n    \"https://picsum.photos/seed/example/110/110 1x, https://picsum.photos/seed/example/220/220 2x\",\n  lazyLoad: true,\n}\n\nexport const Default = {\n  args: {\n    name: \"Francesca DiMattio\",\n    initials: \"FD\",\n    image: imageProps,\n    meta: \"American, b. 1979\",\n    href: \"http://www.artsy.net/artist/francesca-dimattio\",\n    FollowButton: <FollowButton />,\n    maxWidth: 350,\n  },\n}\n\nexport const NameOnly = {\n  args: {\n    name: \"Francesca DiMattio\",\n    maxWidth: 350,\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"EntityHeader with only a name.\",\n      },\n    },\n  },\n}\n\nexport const SmallVariantWithInitials = {\n  args: {\n    smallVariant: true,\n    name: \"Francesca DiMattio\",\n    initials: \"FD\",\n    maxWidth: 350,\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Small variant EntityHeader with initials.\",\n      },\n    },\n  },\n}\n\nexport const WithInitials = {\n  args: {\n    name: \"Francesca DiMattio\",\n    initials: \"FD\",\n    maxWidth: 350,\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"EntityHeader with initials displayed.\",\n      },\n    },\n  },\n}\n\nexport const SmallVariantWithImage = {\n  args: {\n    smallVariant: true,\n    name: \"Francesca DiMattio\",\n    image: imageProps,\n    maxWidth: 350,\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Small variant EntityHeader with image.\",\n      },\n    },\n  },\n}\n\nexport const WithImage = {\n  args: {\n    name: \"Francesca DiMattio\",\n    image: imageProps,\n    maxWidth: 350,\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"EntityHeader with image.\",\n      },\n    },\n  },\n}\n\nexport const WithMetaAndHref = {\n  args: {\n    initials: \"FD\",\n    name: \"Francesca DiMattio\",\n    image: imageProps,\n    meta: \"American, b. 1979\",\n    href: \"http://www.artsy.net/artist/francesca-dimattio\",\n    maxWidth: 350,\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"EntityHeader with metadata and link.\",\n      },\n    },\n  },\n}\n\nexport const SmallVariantWithButton = {\n  args: {\n    smallVariant: true,\n    name: \"Francesca DiMattio\",\n    image: imageProps,\n    FollowButton: <FollowButton />,\n    maxWidth: 350,\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Small variant EntityHeader with action button.\",\n      },\n    },\n  },\n}\n\nexport const Complete = {\n  args: {\n    initials: \"FD\",\n    name: \"Francesca DiMattio\",\n    image: imageProps,\n    meta: \"American, b. 1979\",\n    href: \"http://www.artsy.net/artist/francesca-dimattio\",\n    FollowButton: <FollowButton />,\n    maxWidth: 350,\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Complete EntityHeader with all features.\",\n      },\n    },\n  },\n}\n\nexport const LongerName = {\n  args: {\n    initials: \"FLD\",\n    name: \"Francesca Longer DiMattio\",\n    image: imageProps,\n    meta: \"American, b. Founded 1979\",\n    href: \"http://www.artsy.net/artist/francesca-dimattio\",\n    FollowButton: <FollowButton />,\n    maxWidth: 350,\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"EntityHeader with longer name to test text wrapping.\",\n      },\n    },\n  },\n}\n\nexport const WithSingleLabel = {\n  args: {\n    initials: \"FLD\",\n    name: \"Francesca Much Longer DiMattio\",\n    image: imageProps,\n    meta: \"American, b. Founded 1979\",\n    href: \"http://www.artsy.net/artist/francesca-dimattio\",\n    FollowButton: <FollowButton />,\n    labels: [{ children: \"Black Owned\" }],\n    maxWidth: 350,\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"EntityHeader with a single label.\",\n      },\n    },\n  },\n}\n\nexport const WithMultipleLabels = {\n  args: {\n    initials: \"FLD\",\n    name: \"Francesca Much Longer DiMattio\",\n    image: imageProps,\n    meta: \"American, b. Founded 1979\",\n    href: \"http://www.artsy.net/artist/francesca-dimattio\",\n    FollowButton: <FollowButton />,\n    labels: [\n      { children: \"Black Owned\" },\n      { children: \"Women Owned\", variant: \"brand\" },\n    ],\n    maxWidth: 350,\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"EntityHeader with multiple labels in different variants.\",\n      },\n    },\n  },\n}\n"],"mappings":"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"}

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

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

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

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

package/dist/esm/elements/Expandable/Expandable.js

@@ -0,0 +1,95 @@
+var _excluded = ["label", "expanded", "children", "disabled", "onClick", "onToggle", "borderColor"];
+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 _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 _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; }
+import React, { useEffect, useState } from "react";
+import { isText } from "../../helpers/isText";
+import ChevronUpIcon from "@artsy/icons/ChevronUpIcon";
+import ChevronDownIcon from "@artsy/icons/ChevronDownIcon";
+import { Box, splitBoxProps } from "../Box";
+import { Clickable, ClickableProps } from "../Clickable";
+import { Flex } from "../Flex";
+import { Text } from "../Text";
+/**
+ * A toggleable component used to show / hide content
+ */
+export var Expandable = function Expandable(_ref) {
+  var label = _ref.label,
+    expandedProp = _ref.expanded,
+    children = _ref.children,
+    disabled = _ref.disabled,
+    onClick = _ref.onClick,
+    onToggle = _ref.onToggle,
+    _ref$borderColor = _ref.borderColor,
+    borderColor = _ref$borderColor === void 0 ? "mono60" : _ref$borderColor,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _useState = useState(expandedProp),
+    _useState2 = _slicedToArray(_useState, 2),
+    expanded = _useState2[0],
+    setExpanded = _useState2[1];
+  useEffect(function () {
+    if (expandedProp !== undefined) {
+      setExpanded(expandedProp);
+    }
+  }, [expandedProp]);
+  var _splitBoxProps = splitBoxProps(rest),
+    _splitBoxProps2 = _slicedToArray(_splitBoxProps, 2),
+    boxProps = _splitBoxProps2[0],
+    clickableProps = _splitBoxProps2[1];
+  var handleClick = function handleClick(event) {
+    setExpanded(function (prevExpanded) {
+      var isExpanded = !prevExpanded;
+      onToggle && onToggle(isExpanded);
+      return isExpanded;
+    });
+    onClick && onClick(event);
+  };
+  return /*#__PURE__*/React.createElement(Box, boxProps, /*#__PURE__*/React.createElement(Clickable, _extends({
+    width: "100%",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    borderTop: "1px solid",
+    borderColor: borderColor,
+    pt: 2,
+    pb: 1,
+    disabled: disabled,
+    "aria-expanded": expanded,
+    onClick: handleClick
+  }, clickableProps), /*#__PURE__*/React.createElement(Flex, {
+    flex: 1,
+    display: "flex",
+    alignItems: "center"
+  }, isText(label) ? /*#__PURE__*/React.createElement(Text, {
+    variant: "sm-display"
+  }, label) : label), !disabled && /*#__PURE__*/React.createElement(React.Fragment, null, expanded ? /*#__PURE__*/React.createElement(ChevronUpIcon, {
+    width: 14,
+    height: 14,
+    ml: 1,
+    mr: 1,
+    "aria-hidden": "true"
+  }) : /*#__PURE__*/React.createElement(ChevronDownIcon, {
+    width: 14,
+    height: 14,
+    ml: 1,
+    mr: 1,
+    "aria-hidden": "true"
+  }))), /*#__PURE__*/React.createElement(Box, {
+    overflow: "hidden",
+    height: expanded ? "auto" : "0px",
+    style: {
+      visibility: expanded ? "visible" : "hidden"
+    }
+  }, typeof children === "function" ? children({
+    setExpanded: setExpanded,
+    expanded: !!expanded
+  }) : children));
+};
+Expandable.displayName = "Expandable";
+//# sourceMappingURL=Expandable.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Expandable.js","names":["React","useEffect","useState","isText","ChevronUpIcon","ChevronDownIcon","Box","splitBoxProps","Clickable","ClickableProps","Flex","Text","Expandable","_ref","label","expandedProp","expanded","children","disabled","onClick","onToggle","_ref$borderColor","borderColor","rest","_objectWithoutProperties","_excluded","_useState","_useState2","_slicedToArray","setExpanded","undefined","_splitBoxProps","_splitBoxProps2","boxProps","clickableProps","handleClick","event","prevExpanded","isExpanded","createElement","_extends","width","display","alignItems","justifyContent","borderTop","pt","pb","flex","variant","Fragment","height","ml","mr","overflow","style","visibility","displayName"],"sources":["../../../../src/elements/Expandable/Expandable.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\"\nimport { isText } from \"../../helpers/isText\"\nimport ChevronUpIcon from \"@artsy/icons/ChevronUpIcon\"\nimport ChevronDownIcon from \"@artsy/icons/ChevronDownIcon\"\nimport { Box, splitBoxProps } from \"../Box\"\nimport { Clickable, ClickableProps } from \"../Clickable\"\nimport { Flex } from \"../Flex\"\nimport { Text } from \"../Text\"\n\ntype ChildrenFunction = (props: {\n  setExpanded: React.Dispatch<React.SetStateAction<boolean | undefined>>\n  expanded: boolean\n}) => React.ReactNode\n\nexport interface ExpandableProps extends Omit<ClickableProps, \"children\"> {\n  label?: string | JSX.Element\n  expanded?: boolean\n  children: React.ReactNode | ChildrenFunction\n  onToggle?: (isExpanded: boolean) => void\n}\n\n/**\n * A toggleable component used to show / hide content\n */\nexport const Expandable = ({\n  label,\n  expanded: expandedProp,\n  children,\n  disabled,\n  onClick,\n  onToggle,\n  borderColor = \"mono60\",\n  ...rest\n}: ExpandableProps) => {\n  const [expanded, setExpanded] = useState(expandedProp)\n\n  useEffect(() => {\n    if (expandedProp !== undefined) {\n      setExpanded(expandedProp)\n    }\n  }, [expandedProp])\n\n  const [boxProps, clickableProps] = splitBoxProps(rest)\n\n  const handleClick = (\n    event: React.MouseEvent<HTMLButtonElement, MouseEvent>\n  ) => {\n    setExpanded((prevExpanded) => {\n      const isExpanded = !prevExpanded\n      onToggle && onToggle(isExpanded)\n      return isExpanded\n    })\n\n    onClick && onClick(event)\n  }\n\n  return (\n    <Box {...boxProps}>\n      <Clickable\n        width=\"100%\"\n        display=\"flex\"\n        alignItems=\"center\"\n        justifyContent=\"space-between\"\n        borderTop=\"1px solid\"\n        borderColor={borderColor}\n        pt={2}\n        pb={1}\n        disabled={disabled}\n        aria-expanded={expanded}\n        onClick={handleClick}\n        {...clickableProps}\n      >\n        <Flex flex={1} display=\"flex\" alignItems=\"center\">\n          {isText(label) ? <Text variant=\"sm-display\">{label}</Text> : label}\n        </Flex>\n\n        {!disabled && (\n          <>\n            {expanded ? (\n              <ChevronUpIcon\n                width={14}\n                height={14}\n                ml={1}\n                mr={1}\n                aria-hidden=\"true\"\n              />\n            ) : (\n              <ChevronDownIcon\n                width={14}\n                height={14}\n                ml={1}\n                mr={1}\n                aria-hidden=\"true\"\n              />\n            )}\n          </>\n        )}\n      </Clickable>\n\n      <Box\n        overflow=\"hidden\"\n        height={expanded ? \"auto\" : \"0px\"}\n        style={{ visibility: expanded ? \"visible\" : \"hidden\" }}\n      >\n        {typeof children === \"function\"\n          ? (children as ChildrenFunction)({ setExpanded, expanded: !!expanded })\n          : children}\n      </Box>\n    </Box>\n  )\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,127 @@
+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; }
+import { fn } from "@storybook/test";
+import React, { useState } from "react";
+import { Clickable } from "../Clickable";
+import { Flex } from "../Flex";
+import { Text } from "../Text";
+import { Expandable } from "./Expandable";
+import { Button } from "../Button";
+import { Box } from "../Box";
+import { STORYBOOK_PROPS_BLOCKLIST } from "../../utils/storybookBlocklist";
+import { Stack } from "../Stack";
+export default {
+  title: "Components/Expandable",
+  component: Expandable,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: "An expandable component that shows and hides content with a clickable label. Supports custom labels, disabled states, and configurable styling."
+      }
+    },
+    controls: {
+      exclude: STORYBOOK_PROPS_BLOCKLIST
+    }
+  }
+};
+export var Default = {
+  args: {
+    label: "Click to expand",
+    children: /*#__PURE__*/React.createElement(Text, null, "This is the expanded content"),
+    onToggle: fn()
+  }
+};
+export var Expanded = {
+  args: {
+    label: "Click to collapse",
+    expanded: true,
+    children: /*#__PURE__*/React.createElement(Text, null, "This content is initially expanded"),
+    onToggle: fn()
+  }
+};
+export var Disabled = {
+  args: {
+    label: "Disabled expandable",
+    disabled: true,
+    children: /*#__PURE__*/React.createElement(Text, null, "This content cannot be expanded"),
+    onToggle: fn()
+  }
+};
+export var DisabledExpanded = {
+  args: {
+    label: "Disabled and expanded",
+    disabled: true,
+    expanded: true,
+    children: /*#__PURE__*/React.createElement(Text, null, "This content is expanded but disabled"),
+    onToggle: fn()
+  }
+};
+export var CustomLabel = {
+  args: {
+    label: /*#__PURE__*/React.createElement(Flex, {
+      flex: 1,
+      justifyContent: "space-between"
+    }, /*#__PURE__*/React.createElement(Text, {
+      variant: "sm-display"
+    }, "Custom Heading"), /*#__PURE__*/React.createElement(Clickable, {
+      textDecoration: "underline",
+      onClick: function onClick(e) {
+        e.stopPropagation();
+        fn();
+      }
+    }, "Link in header")),
+    children: /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Text, null, "Expanded content with custom label"), /*#__PURE__*/React.createElement(Button, {
+      onClick: fn()
+    }, "Action Button")),
+    onToggle: fn()
+  }
+};
+export var ConfigurableColors = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement(Box, {
+      color: "mono0",
+      bg: "mono100"
+    }, /*#__PURE__*/React.createElement(Expandable, {
+      label: "Custom Colors",
+      maxWidth: 350,
+      borderColor: "mono30"
+    }, /*#__PURE__*/React.createElement(Text, null, "Expanded content with custom border color")));
+  }
+};
+export var Controlled = {
+  render: function render() {
+    var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isExpanded = _useState2[0],
+      setIsExpanded = _useState2[1];
+    return /*#__PURE__*/React.createElement(Stack, {
+      gap: 2
+    }, /*#__PURE__*/React.createElement(Button, {
+      size: "small",
+      variant: "secondaryBlack",
+      onClick: function onClick() {
+        return setIsExpanded(function (prev) {
+          return !prev;
+        });
+      },
+      width: "fit-content"
+    }, "Toggle"), /*#__PURE__*/React.createElement(Expandable, {
+      label: "Controlled Expandable",
+      expanded: isExpanded,
+      onToggle: setIsExpanded
+    }, /*#__PURE__*/React.createElement(Text, null, "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis numquam, officiis ullam asperiores voluptatum saepe ea ab nesciunt unde consequuntur enim. Asperiores adipisci repudiandae aut nam eos enim expedita quos!")));
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Demonstrates controlled mode where the parent component manages the expanded state via the expanded prop. Use the external buttons to control the expandable, and it will respond to prop changes."
+      }
+    }
+  }
+};
+//# sourceMappingURL=Expandable.story.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Expandable.story.js","names":["fn","React","useState","Clickable","Flex","Text","Expandable","Button","Box","STORYBOOK_PROPS_BLOCKLIST","Stack","title","component","tags","parameters","docs","description","controls","exclude","Default","args","label","children","createElement","onToggle","Expanded","expanded","Disabled","disabled","DisabledExpanded","CustomLabel","flex","justifyContent","variant","textDecoration","onClick","e","stopPropagation","ConfigurableColors","render","color","bg","maxWidth","borderColor","Controlled","_useState","_useState2","_slicedToArray","isExpanded","setIsExpanded","gap","size","prev","width","story"],"sources":["../../../../src/elements/Expandable/Expandable.story.tsx"],"sourcesContent":["import { fn } from \"@storybook/test\"\nimport React, { useState } from \"react\"\nimport { Clickable } from \"../Clickable\"\nimport { Flex } from \"../Flex\"\nimport { Text } from \"../Text\"\nimport { Expandable } from \"./Expandable\"\nimport { Button } from \"../Button\"\nimport { Box } from \"../Box\"\nimport { STORYBOOK_PROPS_BLOCKLIST } from \"../../utils/storybookBlocklist\"\nimport { Stack } from \"../Stack\"\n\nexport default {\n  title: \"Components/Expandable\",\n  component: Expandable,\n  tags: [\"autodocs\"],\n  parameters: {\n    docs: {\n      description: {\n        component:\n          \"An expandable component that shows and hides content with a clickable label. Supports custom labels, disabled states, and configurable styling.\",\n      },\n    },\n    controls: {\n      exclude: STORYBOOK_PROPS_BLOCKLIST,\n    },\n  },\n}\n\nexport const Default = {\n  args: {\n    label: \"Click to expand\",\n    children: <Text>This is the expanded content</Text>,\n    onToggle: fn(),\n  },\n}\n\nexport const Expanded = {\n  args: {\n    label: \"Click to collapse\",\n    expanded: true,\n    children: <Text>This content is initially expanded</Text>,\n    onToggle: fn(),\n  },\n}\n\nexport const Disabled = {\n  args: {\n    label: \"Disabled expandable\",\n    disabled: true,\n    children: <Text>This content cannot be expanded</Text>,\n    onToggle: fn(),\n  },\n}\n\nexport const DisabledExpanded = {\n  args: {\n    label: \"Disabled and expanded\",\n    disabled: true,\n    expanded: true,\n    children: <Text>This content is expanded but disabled</Text>,\n    onToggle: fn(),\n  },\n}\n\nexport const CustomLabel = {\n  args: {\n    label: (\n      <Flex flex={1} justifyContent=\"space-between\">\n        <Text variant=\"sm-display\">Custom Heading</Text>\n        <Clickable\n          textDecoration=\"underline\"\n          onClick={(e) => {\n            e.stopPropagation()\n            fn()\n          }}\n        >\n          Link in header\n        </Clickable>\n      </Flex>\n    ),\n    children: (\n      <Box>\n        <Text>Expanded content with custom label</Text>\n        <Button onClick={fn()}>Action Button</Button>\n      </Box>\n    ),\n    onToggle: fn(),\n  },\n}\n\nexport const ConfigurableColors = {\n  render: () => (\n    <Box color=\"mono0\" bg=\"mono100\">\n      <Expandable label=\"Custom Colors\" maxWidth={350} borderColor=\"mono30\">\n        <Text>Expanded content with custom border color</Text>\n      </Expandable>\n    </Box>\n  ),\n}\n\nexport const Controlled = {\n  render: () => {\n    const [isExpanded, setIsExpanded] = useState(false)\n\n    return (\n      <Stack gap={2}>\n        <Button\n          size=\"small\"\n          variant=\"secondaryBlack\"\n          onClick={() => setIsExpanded((prev) => !prev)}\n          width=\"fit-content\"\n        >\n          Toggle\n        </Button>\n\n        <Expandable\n          label=\"Controlled Expandable\"\n          expanded={isExpanded}\n          onToggle={setIsExpanded}\n        >\n          <Text>\n            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis\n            numquam, officiis ullam asperiores voluptatum saepe ea ab nesciunt\n            unde consequuntur enim. Asperiores adipisci repudiandae aut nam eos\n            enim expedita quos!\n          </Text>\n        </Expandable>\n      </Stack>\n    )\n  },\n  parameters: {\n    docs: {\n      description: {\n        story:\n          \"Demonstrates controlled mode where the parent component manages the expanded state via the expanded prop. Use the external buttons to control the expandable, and it will respond to prop changes.\",\n      },\n    },\n  },\n}\n"],"mappings":"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"}

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

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

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

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

package/dist/esm/elements/FilterSelect/Components/FilterInput.js

@@ -0,0 +1,48 @@
+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 * as React from "react";
+import CloseStrokeIcon from "@artsy/icons/CloseStrokeIcon";
+import SearchIcon from "@artsy/icons/SearchIcon";
+import { InputProps } from "../../Input";
+import { LabeledInput } from "../../LabeledInput";
+import { Clickable } from "../../Clickable";
+import { useRef } from "react";
+import { useFilterSelectContext } from "./FilterSelectContext";
+export var FilterInput = function FilterInput(props) {
+  var _useFilterSelectConte = useFilterSelectContext(),
+    query = _useFilterSelectConte.query,
+    setQuery = _useFilterSelectConte.setQuery,
+    placeholder = _useFilterSelectConte.placeholder;
+  var ref = useRef(null);
+  var handleChange = function handleChange(event) {
+    setQuery(event.target.value);
+  };
+  var handleClick = function handleClick() {
+    var _ref$current;
+    setQuery("");
+    (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.focus();
+  };
+  return /*#__PURE__*/React.createElement(LabeledInput, _extends({
+    ref: ref,
+    role: "search",
+    label: query !== "" ?
+    /*#__PURE__*/
+    // Active state
+    React.createElement(Clickable, {
+      display: "flex",
+      onClick: handleClick,
+      "aria-label": "Clear search input"
+    }, /*#__PURE__*/React.createElement(CloseStrokeIcon, null)) :
+    /*#__PURE__*/
+    // Resting state
+    React.createElement(SearchIcon, {
+      style: {
+        pointerEvents: "none"
+      }
+    }),
+    onChange: handleChange,
+    value: query,
+    placeholder: placeholder
+  }, props));
+};
+FilterInput.displayName = "FilterInput";
+//# sourceMappingURL=FilterInput.js.map

package/dist/esm/elements/FilterSelect/Components/FilterInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterInput.js","names":["React","CloseStrokeIcon","SearchIcon","InputProps","LabeledInput","Clickable","useRef","useFilterSelectContext","FilterInput","props","_useFilterSelectConte","query","setQuery","placeholder","ref","handleChange","event","target","value","handleClick","_ref$current","current","focus","createElement","_extends","role","label","display","onClick","style","pointerEvents","onChange","displayName"],"sources":["../../../../../src/elements/FilterSelect/Components/FilterInput.tsx"],"sourcesContent":["import * as React from \"react\"\nimport CloseStrokeIcon from \"@artsy/icons/CloseStrokeIcon\"\nimport SearchIcon from \"@artsy/icons/SearchIcon\"\nimport { InputProps } from \"../../Input\"\nimport { LabeledInput } from \"../../LabeledInput\"\nimport { Clickable } from \"../../Clickable\"\nimport { useRef } from \"react\"\nimport { useFilterSelectContext } from \"./FilterSelectContext\"\n\nexport type FilterInputProps = InputProps\n\nexport const FilterInput: React.FC<React.PropsWithChildren<InputProps>> = (\n  props\n) => {\n  const { query, setQuery, placeholder } = useFilterSelectContext()\n  const ref = useRef<HTMLInputElement | null>(null)\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    setQuery(event.target.value)\n  }\n\n  const handleClick = () => {\n    setQuery(\"\")\n    ref.current?.focus()\n  }\n\n  return (\n    <LabeledInput\n      ref={ref}\n      role=\"search\"\n      label={\n        query !== \"\" ? (\n          // Active state\n          <Clickable\n            display=\"flex\"\n            onClick={handleClick}\n            aria-label=\"Clear search input\"\n          >\n            <CloseStrokeIcon />\n          </Clickable>\n        ) : (\n          // Resting state\n          <SearchIcon style={{ pointerEvents: \"none\" }} />\n        )\n      }\n      onChange={handleChange}\n      value={query}\n      placeholder={placeholder}\n      {...props}\n    />\n  )\n}\n"],"mappings":";AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,eAAe,MAAM,8BAA8B;AAC1D,OAAOC,UAAU,MAAM,yBAAyB;AAChD,SAASC,UAAU;AACnB,SAASC,YAAY;AACrB,SAASC,SAAS;AAClB,SAASC,MAAM,QAAQ,OAAO;AAC9B,SAASC,sBAAsB;AAI/B,OAAO,IAAMC,WAA0D,GAAG,SAA7DA,WAA0DA,CACrEC,KAAK,EACF;EACH,IAAAC,qBAAA,GAAyCH,sBAAsB,EAAE;IAAzDI,KAAK,GAAAD,qBAAA,CAALC,KAAK;IAAEC,QAAQ,GAAAF,qBAAA,CAARE,QAAQ;IAAEC,WAAW,GAAAH,qBAAA,CAAXG,WAAW;EACpC,IAAMC,GAAG,GAAGR,MAAM,CAA0B,IAAI,CAAC;EAEjD,IAAMS,YAAY,GAAG,SAAfA,YAAYA,CAAIC,KAA0C,EAAK;IACnEJ,QAAQ,CAACI,KAAK,CAACC,MAAM,CAACC,KAAK,CAAC;EAC9B,CAAC;EAED,IAAMC,WAAW,GAAG,SAAdA,WAAWA,CAAA,EAAS;IAAA,IAAAC,YAAA;IACxBR,QAAQ,CAAC,EAAE,CAAC;IACZ,CAAAQ,YAAA,GAAAN,GAAG,CAACO,OAAO,cAAAD,YAAA,uBAAXA,YAAA,CAAaE,KAAK,EAAE;EACtB,CAAC;EAED,oBACEtB,KAAA,CAAAuB,aAAA,CAACnB,YAAY,EAAAoB,QAAA;IACXV,GAAG,EAAEA,GAAI;IACTW,IAAI,EAAC,QAAQ;IACbC,KAAK,EACHf,KAAK,KAAK,EAAE;IAAA;IACV;IACAX,KAAA,CAAAuB,aAAA,CAAClB,SAAS;MACRsB,OAAO,EAAC,MAAM;MACdC,OAAO,EAAET,WAAY;MACrB,cAAW;IAAoB,gBAE/BnB,KAAA,CAAAuB,aAAA,CAACtB,eAAe,OAAG,CACT;IAAA;IAEZ;IACAD,KAAA,CAAAuB,aAAA,CAACrB,UAAU;MAAC2B,KAAK,EAAE;QAAEC,aAAa,EAAE;MAAO;IAAE,EAEhD;IACDC,QAAQ,EAAEhB,YAAa;IACvBG,KAAK,EAAEP,KAAM;IACbE,WAAW,EAAEA;EAAY,GACrBJ,KAAK,EACT;AAEN,CAAC;AAxCYD,WAA0D,CAAAwB,WAAA"}