@artsy/palette 45.13.1 → 45.14.0-canary.1497.33070.0

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

@@ -0,0 +1,209 @@
+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 { Box } from "../Box";
+import { ModalBase } from "../Modal";
+import { Range } from "./Range";
+import { LabeledInput } from "../LabeledInput";
+import { Flex } from "../Flex";
+import { Spacer } from "../Spacer";
+import { Text } from "../Text";
+import { Drawer } from "../Drawer";
+import { Button } from "../Button";
+import { STORYBOOK_PROPS_BLOCKLIST } from "../../utils/storybookBlocklist";
+export default {
+  component: Range,
+  title: "Components/Range",
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: "A dual-handle range slider component for selecting value ranges with customizable min/max/step values."
+      }
+    },
+    controls: {
+      exclude: STORYBOOK_PROPS_BLOCKLIST
+    }
+  }
+};
+export var Default = {
+  args: {
+    min: 0,
+    max: 5000,
+    step: 10,
+    onChange: fn(),
+    ariaLabels: ["Min price", "Max price"]
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Basic range slider with default settings."
+      }
+    }
+  }
+};
+export var WithInitialValue = {
+  args: {
+    min: 0,
+    max: 5000,
+    step: 10,
+    value: [1100, 3450],
+    onChange: fn(),
+    ariaLabels: ["Min price", "Max price"]
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Range slider with pre-selected values."
+      }
+    }
+  }
+};
+export var SmallRange = {
+  args: {
+    min: 0,
+    max: 10,
+    step: 1,
+    onChange: fn(),
+    ariaLabels: ["Min value", "Max value"]
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Range slider with small numeric range and step of 1."
+      }
+    }
+  }
+};
+export var WithinModal = {
+  render: function render() {
+    var _React$useState = React.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      open = _React$useState2[0],
+      setOpen = _React$useState2[1];
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+      onClick: function onClick() {
+        return setOpen(true);
+      }
+    }, "Open Modal"), open && /*#__PURE__*/React.createElement(ModalBase, {
+      width: "100%",
+      height: "100%",
+      dialogProps: {
+        width: 400,
+        height: 400,
+        bg: "mono5"
+      },
+      onClose: function onClose() {
+        return setOpen(false);
+      }
+    }, /*#__PURE__*/React.createElement(Box, {
+      width: 400,
+      height: 400
+    }, /*#__PURE__*/React.createElement(Range, {
+      min: 0,
+      max: 5000,
+      step: 10,
+      onChange: fn()
+    }))));
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Range slider displayed within a modal dialog."
+      }
+    }
+  }
+};
+export var WithinDrawer = {
+  render: function render() {
+    var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      open = _useState2[0],
+      setOpen = _useState2[1];
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+      onClick: function onClick() {
+        setOpen(true);
+      }
+    }, "Open"), /*#__PURE__*/React.createElement(Drawer, {
+      open: open,
+      onClose: function onClose() {
+        setOpen(false);
+      }
+    }, /*#__PURE__*/React.createElement(Box, {
+      width: 400,
+      p: 2
+    }, /*#__PURE__*/React.createElement(Range, {
+      min: 0,
+      max: 5000,
+      step: 10,
+      onChange: fn()
+    }))));
+  },
+  parameters: {
+    chromatic: {
+      disable: true
+    },
+    docs: {
+      description: {
+        story: "Range slider displayed within a drawer component."
+      }
+    }
+  }
+};
+export var InContext = {
+  render: function render() {
+    var _useState3 = useState([0, 50000]),
+      _useState4 = _slicedToArray(_useState3, 2),
+      _useState4$ = _slicedToArray(_useState4[0], 2),
+      min = _useState4$[0],
+      max = _useState4$[1],
+      setMinMax = _useState4[1];
+    return /*#__PURE__*/React.createElement(Box, {
+      p: 2,
+      border: "1px solid",
+      borderColor: "mono10",
+      width: 375
+    }, /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(LabeledInput, {
+      title: "Min",
+      label: "$USD",
+      flex: 1,
+      value: min
+    }), /*#__PURE__*/React.createElement(Spacer, {
+      x: 1
+    }), /*#__PURE__*/React.createElement(LabeledInput, {
+      title: "Max",
+      label: "$USD",
+      flex: 1,
+      value: max
+    })), /*#__PURE__*/React.createElement(Spacer, {
+      y: 1
+    }), /*#__PURE__*/React.createElement(Range, {
+      min: 0,
+      max: 50000,
+      step: 100,
+      value: [min, max],
+      onChange: setMinMax
+    }), /*#__PURE__*/React.createElement(Spacer, {
+      y: 0.5
+    }), /*#__PURE__*/React.createElement(Flex, {
+      justifyContent: "space-between"
+    }, /*#__PURE__*/React.createElement(Text, {
+      variant: "xs"
+    }, "$0"), /*#__PURE__*/React.createElement(Text, {
+      variant: "xs"
+    }, "$50000+")));
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Range slider integrated with input fields showing real-world price filtering usage."
+      }
+    }
+  }
+};
+//# sourceMappingURL=Range.story.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Range.story.js","names":["fn","React","useState","Box","ModalBase","Range","LabeledInput","Flex","Spacer","Text","Drawer","Button","STORYBOOK_PROPS_BLOCKLIST","component","title","tags","parameters","docs","description","controls","exclude","Default","args","min","max","step","onChange","ariaLabels","story","WithInitialValue","value","SmallRange","WithinModal","render","_React$useState","_React$useState2","_slicedToArray","open","setOpen","createElement","Fragment","onClick","width","height","dialogProps","bg","onClose","WithinDrawer","_useState","_useState2","p","chromatic","disable","InContext","_useState3","_useState4","_useState4$","setMinMax","border","borderColor","label","flex","x","y","justifyContent","variant"],"sources":["../../../../src/elements/Range/Range.story.tsx"],"sourcesContent":["import { fn } from \"@storybook/test\"\nimport React, { useState } from \"react\"\nimport { Box } from \"../Box\"\nimport { ModalBase } from \"../Modal\"\nimport { Range } from \"./Range\"\nimport { LabeledInput } from \"../LabeledInput\"\nimport { Flex } from \"../Flex\"\nimport { Spacer } from \"../Spacer\"\nimport { Text } from \"../Text\"\nimport { Drawer } from \"../Drawer\"\nimport { Button } from \"../Button\"\nimport { STORYBOOK_PROPS_BLOCKLIST } from \"../../utils/storybookBlocklist\"\n\nexport default {\n  component: Range,\n  title: \"Components/Range\",\n  tags: [\"autodocs\"],\n  parameters: {\n    docs: {\n      description: {\n        component:\n          \"A dual-handle range slider component for selecting value ranges with customizable min/max/step values.\",\n      },\n    },\n    controls: {\n        exclude: STORYBOOK_PROPS_BLOCKLIST,\n      },\n  },\n}\n\nexport const Default = {\n  args: {\n    min: 0,\n    max: 5000,\n    step: 10,\n    onChange: fn(),\n    ariaLabels: [\"Min price\", \"Max price\"],\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Basic range slider with default settings.\",\n      },\n    },\n  },\n}\n\nexport const WithInitialValue = {\n  args: {\n    min: 0,\n    max: 5000,\n    step: 10,\n    value: [1100, 3450],\n    onChange: fn(),\n    ariaLabels: [\"Min price\", \"Max price\"],\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Range slider with pre-selected values.\",\n      },\n    },\n  },\n}\n\nexport const SmallRange = {\n  args: {\n    min: 0,\n    max: 10,\n    step: 1,\n    onChange: fn(),\n    ariaLabels: [\"Min value\", \"Max value\"],\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Range slider with small numeric range and step of 1.\",\n      },\n    },\n  },\n}\n\nexport const WithinModal = {\n  render: () => {\n    const [open, setOpen] = React.useState(false)\n    return (\n      <>\n        <Button onClick={() => setOpen(true)}>Open Modal</Button>\n        {open && (\n          <ModalBase\n            width=\"100%\"\n            height=\"100%\"\n            dialogProps={{ width: 400, height: 400, bg: \"mono5\" }}\n            onClose={() => setOpen(false)}\n          >\n            <Box width={400} height={400}>\n              <Range min={0} max={5000} step={10} onChange={fn()} />\n            </Box>\n          </ModalBase>\n        )}\n      </>\n    )\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Range slider displayed within a modal dialog.\",\n      },\n    },\n  },\n}\n\nexport const WithinDrawer = {\n  render: () => {\n    const [open, setOpen] = useState(false)\n    return (\n      <>\n        <Button\n          onClick={() => {\n            setOpen(true)\n          }}\n        >\n          Open\n        </Button>\n        <Drawer\n          open={open}\n          onClose={() => {\n            setOpen(false)\n          }}\n        >\n          <Box width={400} p={2}>\n            <Range min={0} max={5000} step={10} onChange={fn()} />\n          </Box>\n        </Drawer>\n      </>\n    )\n  },\n  parameters: {\n    chromatic: { disable: true },\n    docs: {\n      description: {\n        story: \"Range slider displayed within a drawer component.\",\n      },\n    },\n  },\n}\n\nexport const InContext = {\n  render: () => {\n    const [[min, max], setMinMax] = useState<number[]>([0, 50000])\n\n    return (\n      <Box p={2} border=\"1px solid\" borderColor=\"mono10\" width={375}>\n        <Flex>\n          <LabeledInput title=\"Min\" label=\"$USD\" flex={1} value={min} />\n          <Spacer x={1} />\n          <LabeledInput title=\"Max\" label=\"$USD\" flex={1} value={max} />\n        </Flex>\n        <Spacer y={1} />\n        <Range\n          min={0}\n          max={50000}\n          step={100}\n          value={[min, max]}\n          onChange={setMinMax}\n        />\n        <Spacer y={0.5} />\n        <Flex justifyContent=\"space-between\">\n          <Text variant=\"xs\">$0</Text>\n          <Text variant=\"xs\">$50000+</Text>\n        </Flex>\n      </Box>\n    )\n  },\n  parameters: {\n    docs: {\n      description: {\n        story:\n          \"Range slider integrated with input fields showing real-world price filtering usage.\",\n      },\n    },\n  },\n}\n"],"mappings":"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"}

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

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

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

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

package/dist/esm/elements/ReadMore/ReadMore.js

@@ -0,0 +1,88 @@
+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 React, { useEffect, useRef, useState } from "react";
+import styled from "styled-components";
+import { Clickable } from "../Clickable";
+import { Text } from "../Text";
+import { Box } from "../Box";
+export var ReadMore = function ReadMore(_ref) {
+  var expandedHTML = _ref.content,
+    disabled = _ref.disabled,
+    defaultExpanded = _ref.defaultExpanded,
+    _ref$maxLines = _ref.maxLines,
+    maxLines = _ref$maxLines === void 0 ? Infinity : _ref$maxLines,
+    onReadLessClicked = _ref.onReadLessClicked,
+    onReadMoreClicked = _ref.onReadMoreClicked;
+  var ref = useRef(null);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    overflowing = _useState2[0],
+    setOverflowing = _useState2[1];
+  var _useState3 = useState(!!defaultExpanded),
+    _useState4 = _slicedToArray(_useState3, 2),
+    expanded = _useState4[0],
+    setExpanded = _useState4[1];
+  var maxLinesToShow = expanded ? Infinity : maxLines;
+  var handleClick = function handleClick() {
+    if (disabled) return;
+    setExpanded(function (prevExpanded) {
+      var nextExpanded = !prevExpanded;
+      nextExpanded ? onReadMoreClicked === null || onReadMoreClicked === void 0 ? void 0 : onReadMoreClicked() : onReadLessClicked === null || onReadLessClicked === void 0 ? void 0 : onReadLessClicked();
+      return nextExpanded;
+    });
+  };
+  var handleResize = function handleResize() {
+    if (!ref.current) return false;
+    var shouldExpand = ref.current.scrollHeight > ref.current.clientHeight;
+    setOverflowing(shouldExpand);
+    return shouldExpand;
+  };
+  var initialized = useRef(false);
+  useEffect(function () {
+    if (initialized.current) return;
+    var shouldExpand = handleResize();
+    if (!shouldExpand) setExpanded(true);
+    initialized.current = true;
+  }, []);
+  return /*#__PURE__*/React.createElement(Container, {
+    "aria-expanded": expanded
+  }, /*#__PURE__*/React.createElement(LineClamp, {
+    key: "".concat(expanded) // Forces a re-render on Mobile Safari
+    ,
+    ref: ref,
+    lineClamp: maxLinesToShow
+  }, /*#__PURE__*/React.createElement(Box, {
+    position: "relative",
+    dangerouslySetInnerHTML: {
+      __html: expandedHTML
+    }
+  })), overflowing && /*#__PURE__*/React.createElement(Clickable, {
+    cursor: "pointer",
+    textDecoration: "underline",
+    onClick: handleClick,
+    display: "block",
+    width: "100%"
+  }, /*#__PURE__*/React.createElement(Text, {
+    variant: "xs",
+    fontWeight: "bold"
+  }, "Read ", expanded ? "less" : "more")));
+};
+ReadMore.displayName = "ReadMore";
+var Container = styled.div.withConfig({
+  displayName: "ReadMore__Container",
+  componentId: "sc-1bqy0ya-0"
+})(["position:relative;"]);
+Container.displayName = "Container";
+var LineClamp = styled.div.withConfig({
+  displayName: "ReadMore__LineClamp",
+  componentId: "sc-1bqy0ya-1"
+})(["display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:", ";line-clamp:", ";overflow:hidden;"], function (props) {
+  return props.lineClamp;
+}, function (props) {
+  return props.lineClamp;
+});
+//# sourceMappingURL=ReadMore.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ReadMore.js","names":["React","useEffect","useRef","useState","styled","Clickable","Text","Box","ReadMore","_ref","expandedHTML","content","disabled","defaultExpanded","_ref$maxLines","maxLines","Infinity","onReadLessClicked","onReadMoreClicked","ref","_useState","_useState2","_slicedToArray","overflowing","setOverflowing","_useState3","_useState4","expanded","setExpanded","maxLinesToShow","handleClick","prevExpanded","nextExpanded","handleResize","current","shouldExpand","scrollHeight","clientHeight","initialized","createElement","Container","LineClamp","key","concat","lineClamp","position","dangerouslySetInnerHTML","__html","cursor","textDecoration","onClick","display","width","variant","fontWeight","displayName","div","withConfig","componentId","props"],"sources":["../../../../src/elements/ReadMore/ReadMore.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\"\nimport styled from \"styled-components\"\nimport { Clickable } from \"../Clickable\"\nimport { Text } from \"../Text\"\nimport { Box } from \"../Box\"\n\nexport interface ReadMoreProps {\n  content: string\n  disabled?: boolean\n  defaultExpanded?: boolean\n  maxLines?: number\n  onReadLessClicked?: () => void\n  onReadMoreClicked?: () => void\n}\n\nexport const ReadMore: React.FC<React.PropsWithChildren<ReadMoreProps>> = ({\n  content: expandedHTML,\n  disabled,\n  defaultExpanded,\n  maxLines = Infinity,\n  onReadLessClicked,\n  onReadMoreClicked,\n}) => {\n  const ref = useRef<HTMLDivElement>(null)\n\n  const [overflowing, setOverflowing] = useState(false)\n  const [expanded, setExpanded] = useState(!!defaultExpanded)\n\n  const maxLinesToShow = expanded ? Infinity : maxLines\n\n  const handleClick = () => {\n    if (disabled) return\n\n    setExpanded((prevExpanded) => {\n      const nextExpanded = !prevExpanded\n      nextExpanded ? onReadMoreClicked?.() : onReadLessClicked?.()\n      return nextExpanded\n    })\n  }\n\n  const handleResize = () => {\n    if (!ref.current) return false\n\n    const shouldExpand = ref.current.scrollHeight > ref.current.clientHeight\n    setOverflowing(shouldExpand)\n\n    return shouldExpand\n  }\n\n  const initialized = useRef(false)\n\n  useEffect(() => {\n    if (initialized.current) return\n\n    const shouldExpand = handleResize()\n    if (!shouldExpand) setExpanded(true)\n\n    initialized.current = true\n  }, [])\n\n  return (\n    <Container aria-expanded={expanded}>\n      <LineClamp\n        key={`${expanded}`} // Forces a re-render on Mobile Safari\n        ref={ref}\n        lineClamp={maxLinesToShow}\n      >\n        {/* LineClamp's `display` causes stacking of margins. Nested div ensures internal margins collapse. */}\n        <Box\n          position=\"relative\"\n          dangerouslySetInnerHTML={{\n            __html: expandedHTML,\n          }}\n        />\n      </LineClamp>\n\n      {overflowing && (\n        <Clickable\n          cursor=\"pointer\"\n          textDecoration=\"underline\"\n          onClick={handleClick}\n          display=\"block\"\n          width=\"100%\"\n        >\n          <Text variant=\"xs\" fontWeight=\"bold\">\n            Read {expanded ? \"less\" : \"more\"}\n          </Text>\n        </Clickable>\n      )}\n    </Container>\n  )\n}\n\nconst Container = styled.div`\n  position: relative;\n`\n\nContainer.displayName = \"Container\"\n\nconst LineClamp = styled.div<{ lineClamp: number }>`\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: ${(props) => props.lineClamp};\n  line-clamp: ${(props) => props.lineClamp};\n  overflow: hidden;\n`\n"],"mappings":"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"}

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

@@ -0,0 +1,128 @@
+import React from "react";
+import { HTML } from "../HTML";
+import { ReadMore } from "./ReadMore";
+import { STORYBOOK_PROPS_BLOCKLIST } from "../../utils/storybookBlocklist";
+export default {
+  component: ReadMore,
+  title: "Components/ReadMore",
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: "A component that truncates content and provides a 'read more' link to expand the full content."
+      }
+    },
+    controls: {
+      exclude: STORYBOOK_PROPS_BLOCKLIST
+    }
+  }
+};
+export var Default = {
+  args: {
+    maxLines: 2,
+    onReadMoreClicked: function onReadMoreClicked() {
+      return console.log("Read more clicked");
+    },
+    onReadLessClicked: function onReadLessClicked() {
+      return console.log("Read less clicked");
+    },
+    content: "<div>\n          Donald Judd, widely regarded as one of the most significant American\n          artists of <a href=\"#\">the post-war period</a>, is perhaps best-known\n          for the large-scale outdoor installations and long, spacious interiors\n          he designed in Marfa. Donald Judd, widely regarded as one of the most\n          significant American artists of the post-war period, is perhaps\n          best-known for the large-scale outdoor installations and long,\n          spacious interiors he designed in Marfa.\n        </div>"
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Read more component with character limit truncation."
+      }
+    }
+  }
+};
+export var ShortContent = {
+  args: {
+    maxLines: 3,
+    content: "<div>\n          Donald Judd, widely regarded as one of the most significant American\n          artists of <a href=\"#\">the post-war period</a>.\n        </div>"
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Read more with content shorter than the character limit."
+      }
+    }
+  }
+};
+export var AsString = {
+  args: {
+    maxLines: 2,
+    content: "Donald Judd, widely regarded as one of the most significant American artists of the post-war period, is perhaps best-known for the large-scale outdoor installations and long, spacious interiors he designed in Marfa. Donald Judd, widely regarded as one of the most significant American artists of the post-war period, is perhaps best-known for the large-scale outdoor installations and long, spacious interiors he designed in Marfa."
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Read more with plain string content instead of HTML."
+      }
+    }
+  }
+};
+export var CharacterCapWithHtml = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement(HTML, {
+      variant: "sm"
+    }, /*#__PURE__*/React.createElement(ReadMore, {
+      maxLines: 2,
+      content: "<p>\n          Donald Judd, widely regarded as one of the most significant American\n          artists of <a href=\"#\">the post-war period</a>, is perhaps\n          best-known for the large-scale outdoor installations and long,\n          spacious interiors he designed in Marfa. Donald Judd, widely\n          regarded as one of the most significant American artists of the\n          post-war period, is perhaps best-known for the large-scale outdoor\n          installations and long, spacious interiors he designed in Marfa.\n        </p>\n        <hr />\n        <p>\n          <strong>Lorem ipsum dolor</strong> sit amet consectetur adipisicing\n          elit. Ducimus eligendi obcaecati voluptate\n          <em>molestias vero nobis voluptatum</em>, tenetur dolorum assumenda.\n        </p>\n        <p>\n          Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis\n          eveniet aliquid laborum fugiat quibusdam id suscipit est temporibus\n          labore sint aliquam, laudantium tempore. Tenetur adipisci cumque\n          alias facilis animi. Illum.\n        </p>"
+    }));
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Character cap with HTML content."
+      }
+    }
+  }
+};
+export var WithCustomizableTypography = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement(HTML, null, /*#__PURE__*/React.createElement(ReadMore, {
+      maxLines: 3,
+      content: "\n            <p>\n              Donald Judd, widely regarded as one of the most significant\n              American artists of <a href=\"#\">the post-war period</a>, is\n              perhaps best-known for the large-scale outdoor installations and\n              long, spacious interiors he designed in Marfa. Donald Judd, widely\n              regarded as one of the most significant American artists of the\n              post-war period, is perhaps best-known for the large-scale outdoor\n              installations and long, spacious interiors he designed in Marfa.\n            </p>\n            <hr />\n            <p>\n              <strong>Lorem ipsum dolor</strong> sit amet consectetur\n              adipisicing elit. Ducimus eligendi obcaecati voluptate\n              <em>molestias vero nobis voluptatum</em>, tenetur dolorum\n              assumenda.\n            </p>\n            <p>\n              Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis\n              eveniet aliquid laborum fugiat quibusdam id suscipit est\n              temporibus labore sint aliquam, laudantium tempore. Tenetur\n              adipisci cumque alias facilis animi. Illum.\n            </p>"
+    }));
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "ReadMore with customizable typography using HTML wrapper."
+      }
+    }
+  }
+};
+export var WithCustomizableTypography2 = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement(HTML, {
+      variant: "lg"
+    }, /*#__PURE__*/React.createElement(ReadMore, {
+      maxLines: 3,
+      content: "<p>\n              Donald Judd, widely regarded as one of the most significant\n              American artists of <a href=\"#\">the post-war period</a>, is\n              perhaps best-known for the large-scale outdoor installations and\n              long, spacious interiors he designed in Marfa. Donald Judd, widely\n              regarded as one of the most significant American artists of the\n              post-war period, is perhaps best-known for the large-scale outdoor\n              installations and long, spacious interiors he designed in Marfa.\n            </p>\n            <hr />\n            <p>\n              <strong>Lorem ipsum dolor</strong> sit amet consectetur\n              adipisicing elit. Ducimus eligendi obcaecati voluptate\n              <em>molestias vero nobis voluptatum</em>, tenetur dolorum\n              assumenda.\n            </p>\n            <p>\n              Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis\n              eveniet aliquid laborum fugiat quibusdam id suscipit est\n              temporibus labore sint aliquam, laudantium tempore. Tenetur\n              adipisci cumque alias facilis animi. Illum.\n            </p>"
+    }));
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "ReadMore with customizable large typography using HTML wrapper."
+      }
+    }
+  }
+};
+export var CharacterCapWithHtmlDisabled = {
+  args: {
+    disabled: true,
+    maxLines: 3,
+    content: "<div>\n          Donald Judd, widely regarded as one of the most significant American\n          artists of <a href=\"#\">the post-war period</a>, is perhaps best-known\n          for the large-scale outdoor installations and long, spacious interiors\n          he designed in Marfa. Donald Judd, widely regarded as one of the most\n          significant American artists of the post-war period, is perhaps\n          best-known for the large-scale outdoor installations and long,\n          spacious interiors he designed in Marfa.\n        </div>"
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Character cap with HTML content when disabled."
+      }
+    }
+  }
+};
+//# sourceMappingURL=ReadMore.story.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ReadMore.story.js","names":["React","HTML","ReadMore","STORYBOOK_PROPS_BLOCKLIST","component","title","tags","parameters","docs","description","controls","exclude","Default","args","maxLines","onReadMoreClicked","console","log","onReadLessClicked","content","story","ShortContent","AsString","CharacterCapWithHtml","render","createElement","variant","WithCustomizableTypography","WithCustomizableTypography2","CharacterCapWithHtmlDisabled","disabled"],"sources":["../../../../src/elements/ReadMore/ReadMore.story.tsx"],"sourcesContent":["import React from \"react\"\nimport { HTML } from \"../HTML\"\nimport { ReadMore } from \"./ReadMore\"\nimport { STORYBOOK_PROPS_BLOCKLIST } from \"../../utils/storybookBlocklist\"\n\nexport default {\n  component: ReadMore,\n  title: \"Components/ReadMore\",\n  tags: [\"autodocs\"],\n  parameters: {\n    docs: {\n      description: {\n        component:\n          \"A component that truncates content and provides a 'read more' link to expand the full content.\",\n      },\n    },\n    controls: {\n      exclude: STORYBOOK_PROPS_BLOCKLIST,\n    },\n  },\n}\n\nexport const Default = {\n  args: {\n    maxLines: 2,\n    onReadMoreClicked: () => console.log(\"Read more clicked\"),\n    onReadLessClicked: () => console.log(\"Read less clicked\"),\n    content: `<div>\n          Donald Judd, widely regarded as one of the most significant American\n          artists of <a href=\"#\">the post-war period</a>, is perhaps best-known\n          for the large-scale outdoor installations and long, spacious interiors\n          he designed in Marfa. Donald Judd, widely regarded as one of the most\n          significant American artists of the post-war period, is perhaps\n          best-known for the large-scale outdoor installations and long,\n          spacious interiors he designed in Marfa.\n        </div>`,\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Read more component with character limit truncation.\",\n      },\n    },\n  },\n}\n\nexport const ShortContent = {\n  args: {\n    maxLines: 3,\n    content: `<div>\n          Donald Judd, widely regarded as one of the most significant American\n          artists of <a href=\"#\">the post-war period</a>.\n        </div>`,\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Read more with content shorter than the character limit.\",\n      },\n    },\n  },\n}\n\nexport const AsString = {\n  args: {\n    maxLines: 2,\n    content:\n      \"Donald Judd, widely regarded as one of the most significant American artists of the post-war period, is perhaps best-known for the large-scale outdoor installations and long, spacious interiors he designed in Marfa. Donald Judd, widely regarded as one of the most significant American artists of the post-war period, is perhaps best-known for the large-scale outdoor installations and long, spacious interiors he designed in Marfa.\",\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Read more with plain string content instead of HTML.\",\n      },\n    },\n  },\n}\n\nexport const CharacterCapWithHtml = {\n  render: () => (\n    <HTML variant=\"sm\">\n      <ReadMore\n        maxLines={2}\n        content={`<p>\n          Donald Judd, widely regarded as one of the most significant American\n          artists of <a href=\"#\">the post-war period</a>, is perhaps\n          best-known for the large-scale outdoor installations and long,\n          spacious interiors he designed in Marfa. Donald Judd, widely\n          regarded as one of the most significant American artists of the\n          post-war period, is perhaps best-known for the large-scale outdoor\n          installations and long, spacious interiors he designed in Marfa.\n        </p>\n        <hr />\n        <p>\n          <strong>Lorem ipsum dolor</strong> sit amet consectetur adipisicing\n          elit. Ducimus eligendi obcaecati voluptate\n          <em>molestias vero nobis voluptatum</em>, tenetur dolorum assumenda.\n        </p>\n        <p>\n          Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis\n          eveniet aliquid laborum fugiat quibusdam id suscipit est temporibus\n          labore sint aliquam, laudantium tempore. Tenetur adipisci cumque\n          alias facilis animi. Illum.\n        </p>`}\n      />\n    </HTML>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"Character cap with HTML content.\",\n      },\n    },\n  },\n}\n\nexport const WithCustomizableTypography = {\n  render: () => (\n    <HTML>\n      <ReadMore\n        maxLines={3}\n        content={`\n            <p>\n              Donald Judd, widely regarded as one of the most significant\n              American artists of <a href=\"#\">the post-war period</a>, is\n              perhaps best-known for the large-scale outdoor installations and\n              long, spacious interiors he designed in Marfa. Donald Judd, widely\n              regarded as one of the most significant American artists of the\n              post-war period, is perhaps best-known for the large-scale outdoor\n              installations and long, spacious interiors he designed in Marfa.\n            </p>\n            <hr />\n            <p>\n              <strong>Lorem ipsum dolor</strong> sit amet consectetur\n              adipisicing elit. Ducimus eligendi obcaecati voluptate\n              <em>molestias vero nobis voluptatum</em>, tenetur dolorum\n              assumenda.\n            </p>\n            <p>\n              Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis\n              eveniet aliquid laborum fugiat quibusdam id suscipit est\n              temporibus labore sint aliquam, laudantium tempore. Tenetur\n              adipisci cumque alias facilis animi. Illum.\n            </p>`}\n      />\n    </HTML>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"ReadMore with customizable typography using HTML wrapper.\",\n      },\n    },\n  },\n}\n\nexport const WithCustomizableTypography2 = {\n  render: () => (\n    <HTML variant=\"lg\">\n      <ReadMore\n        maxLines={3}\n        content={`<p>\n              Donald Judd, widely regarded as one of the most significant\n              American artists of <a href=\"#\">the post-war period</a>, is\n              perhaps best-known for the large-scale outdoor installations and\n              long, spacious interiors he designed in Marfa. Donald Judd, widely\n              regarded as one of the most significant American artists of the\n              post-war period, is perhaps best-known for the large-scale outdoor\n              installations and long, spacious interiors he designed in Marfa.\n            </p>\n            <hr />\n            <p>\n              <strong>Lorem ipsum dolor</strong> sit amet consectetur\n              adipisicing elit. Ducimus eligendi obcaecati voluptate\n              <em>molestias vero nobis voluptatum</em>, tenetur dolorum\n              assumenda.\n            </p>\n            <p>\n              Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis\n              eveniet aliquid laborum fugiat quibusdam id suscipit est\n              temporibus labore sint aliquam, laudantium tempore. Tenetur\n              adipisci cumque alias facilis animi. Illum.\n            </p>`}\n      />\n    </HTML>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story:\n          \"ReadMore with customizable large typography using HTML wrapper.\",\n      },\n    },\n  },\n}\n\nexport const CharacterCapWithHtmlDisabled = {\n  args: {\n    disabled: true,\n    maxLines: 3,\n    content: `<div>\n          Donald Judd, widely regarded as one of the most significant American\n          artists of <a href=\"#\">the post-war period</a>, is perhaps best-known\n          for the large-scale outdoor installations and long, spacious interiors\n          he designed in Marfa. Donald Judd, widely regarded as one of the most\n          significant American artists of the post-war period, is perhaps\n          best-known for the large-scale outdoor installations and long,\n          spacious interiors he designed in Marfa.\n        </div>`,\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Character cap with HTML content when disabled.\",\n      },\n    },\n  },\n}\n"],"mappings":"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"}

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

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

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

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

package/dist/esm/elements/ResponsiveBox/ResponsiveBox.js

@@ -0,0 +1,65 @@
+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); }
+var _excluded = ["aspectWidth", "aspectHeight"],
+  _excluded2 = ["aspectWidth", "aspectHeight", "children"];
+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 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); }
+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 { paddingBottom, scale } from "proportional-scale";
+import React from "react";
+import { Box, BoxProps } from "../Box";
+
+/** ResponsiveBoxMaxDimensions */
+
+var responsiveScale = function responsiveScale(args) {
+  if ("maxWidth" in args && args.maxWidth === "100%") {
+    return {
+      maxWidth: "100%",
+      paddingBottom: paddingBottom({
+        width: args.aspectWidth,
+        height: args.aspectHeight
+      })
+    };
+  }
+  var width = args.aspectWidth,
+    height = args.aspectHeight,
+    rest = _objectWithoutProperties(args, _excluded);
+  var scaled = scale(_objectSpread({
+    width: width,
+    height: height
+  }, rest));
+  return {
+    maxWidth: "".concat(scaled.width, "px"),
+    paddingBottom: scaled.paddingBottom
+  };
+};
+
+/** ResponsiveBoxProps */
+
+/** ResponsiveBox */
+export var ResponsiveBox = function ResponsiveBox(_ref) {
+  var aspectWidth = _ref.aspectWidth,
+    aspectHeight = _ref.aspectHeight,
+    children = _ref.children,
+    rest = _objectWithoutProperties(_ref, _excluded2);
+  var scaled = responsiveScale(_objectSpread({
+    aspectHeight: aspectHeight,
+    aspectWidth: aspectWidth
+  }, rest));
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    position: "relative",
+    width: "100%",
+    overflow: "hidden",
+    style: {
+      aspectRatio: "".concat(aspectWidth, " / ").concat(aspectHeight),
+      maxWidth: scaled.maxWidth
+    }
+  }, rest), children);
+};
+ResponsiveBox.displayName = "ResponsiveBox";
+ResponsiveBox.displayName = "ResponsiveBox";
+//# sourceMappingURL=ResponsiveBox.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ResponsiveBox.js","names":["paddingBottom","scale","React","Box","BoxProps","responsiveScale","args","maxWidth","width","aspectWidth","height","aspectHeight","rest","_objectWithoutProperties","_excluded","scaled","_objectSpread","concat","ResponsiveBox","_ref","children","_excluded2","createElement","_extends","position","overflow","style","aspectRatio","displayName"],"sources":["../../../../src/elements/ResponsiveBox/ResponsiveBox.tsx"],"sourcesContent":["import { paddingBottom, scale } from \"proportional-scale\"\nimport React from \"react\"\nimport { Box, BoxProps } from \"../Box\"\n\n/** ResponsiveBoxMaxDimensions */\nexport type ResponsiveBoxMaxDimensions =\n  | {\n      maxWidth: number\n      maxHeight: number\n    }\n  | { maxWidth: number }\n  | { maxHeight: number }\n  | { maxWidth: \"100%\" }\n\nexport interface ResponsiveBoxAspectDimensions {\n  aspectWidth: number\n  aspectHeight: number\n}\n\nconst responsiveScale = (\n  args: ResponsiveBoxAspectDimensions & ResponsiveBoxMaxDimensions\n) => {\n  if (\"maxWidth\" in args && args.maxWidth === \"100%\") {\n    return {\n      maxWidth: \"100%\",\n      paddingBottom: paddingBottom({\n        width: args.aspectWidth,\n        height: args.aspectHeight,\n      }),\n    }\n  }\n\n  const { aspectWidth: width, aspectHeight: height, ...rest } = args\n  const scaled = scale({ width, height, ...rest })\n\n  return {\n    maxWidth: `${scaled.width}px`,\n    paddingBottom: scaled.paddingBottom,\n  }\n}\n\n/** ResponsiveBoxProps */\nexport type ResponsiveBoxProps = Omit<BoxProps, \"maxWidth\" | \"maxHeight\"> &\n  ResponsiveBoxAspectDimensions &\n  ResponsiveBoxMaxDimensions\n\n/** ResponsiveBox */\nexport const ResponsiveBox: React.FC<React.PropsWithChildren<ResponsiveBoxProps>> = ({\n  aspectWidth,\n  aspectHeight,\n  children,\n  ...rest\n}) => {\n  const scaled = responsiveScale({ aspectHeight, aspectWidth, ...rest })\n\n  return (\n    <Box\n      position=\"relative\"\n      width=\"100%\"\n      overflow=\"hidden\"\n      style={{\n        aspectRatio: `${aspectWidth} / ${aspectHeight}`,\n        maxWidth: scaled.maxWidth,\n      }}\n      {...rest}\n    >\n      {children}\n    </Box>\n  )\n}\n\nResponsiveBox.displayName = \"ResponsiveBox\"\n"],"mappings":";;;;;;;;;;;AAAA,SAASA,aAAa,EAAEC,KAAK,QAAQ,oBAAoB;AACzD,OAAOC,KAAK,MAAM,OAAO;AACzB,SAASC,GAAG,EAAEC,QAAQ;;AAEtB;;AAeA,IAAMC,eAAe,GAAG,SAAlBA,eAAeA,CACnBC,IAAgE,EAC7D;EACH,IAAI,UAAU,IAAIA,IAAI,IAAIA,IAAI,CAACC,QAAQ,KAAK,MAAM,EAAE;IAClD,OAAO;MACLA,QAAQ,EAAE,MAAM;MAChBP,aAAa,EAAEA,aAAa,CAAC;QAC3BQ,KAAK,EAAEF,IAAI,CAACG,WAAW;QACvBC,MAAM,EAAEJ,IAAI,CAACK;MACf,CAAC;IACH,CAAC;EACH;EAEA,IAAqBH,KAAK,GAAoCF,IAAI,CAA1DG,WAAW;IAAuBC,MAAM,GAAcJ,IAAI,CAAtCK,YAAY;IAAaC,IAAI,GAAAC,wBAAA,CAAKP,IAAI,EAAAQ,SAAA;EAClE,IAAMC,MAAM,GAAGd,KAAK,CAAAe,aAAA;IAAGR,KAAK,EAALA,KAAK;IAAEE,MAAM,EAANA;EAAM,GAAKE,IAAI,EAAG;EAEhD,OAAO;IACLL,QAAQ,KAAAU,MAAA,CAAKF,MAAM,CAACP,KAAK,OAAI;IAC7BR,aAAa,EAAEe,MAAM,CAACf;EACxB,CAAC;AACH,CAAC;;AAED;;AAKA;AACA,OAAO,IAAMkB,aAAoE,GAAG,SAAvEA,aAAoEA,CAAAC,IAAA,EAK3E;EAAA,IAJJV,WAAW,GAAAU,IAAA,CAAXV,WAAW;IACXE,YAAY,GAAAQ,IAAA,CAAZR,YAAY;IACZS,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IACLR,IAAI,GAAAC,wBAAA,CAAAM,IAAA,EAAAE,UAAA;EAEP,IAAMN,MAAM,GAAGV,eAAe,CAAAW,aAAA;IAAGL,YAAY,EAAZA,YAAY;IAAEF,WAAW,EAAXA;EAAW,GAAKG,IAAI,EAAG;EAEtE,oBACEV,KAAA,CAAAoB,aAAA,CAACnB,GAAG,EAAAoB,QAAA;IACFC,QAAQ,EAAC,UAAU;IACnBhB,KAAK,EAAC,MAAM;IACZiB,QAAQ,EAAC,QAAQ;IACjBC,KAAK,EAAE;MACLC,WAAW,KAAAV,MAAA,CAAKR,WAAW,SAAAQ,MAAA,CAAMN,YAAY,CAAE;MAC/CJ,QAAQ,EAAEQ,MAAM,CAACR;IACnB;EAAE,GACEK,IAAI,GAEPQ,QAAQ,CACL;AAEV,CAAC;AAtBYF,aAAoE,CAAAU,WAAA;AAwBjFV,aAAa,CAACU,WAAW,GAAG,eAAe"}