@artsy/palette 45.13.1 → 45.14.0-canary.1497.33065.0

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

@@ -0,0 +1,436 @@
+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 from "react";
+import { States } from "storybook-states";
+import { POSITION } from "../../utils";
+import { Box } from "../Box";
+import { Button } from "../Button";
+import { Flex } from "../Flex";
+import { Spacer } from "../Spacer";
+import { Text } from "../Text";
+import { Popover } from "./Popover";
+import { STORYBOOK_PROPS_BLOCKLIST } from "../../utils/storybookBlocklist";
+var CONTENT = "Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi eius autem aliquid cumque, mollitia incidunt totam. Id ut quae hic in quisquam, cupiditate iure nobis, provident minus voluptatem tenetur consequatur.";
+export default {
+  component: Popover,
+  title: "Components/Popover",
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: "A floating popover component that can be positioned relative to an anchor element."
+      }
+    },
+    controls: {
+      exclude: STORYBOOK_PROPS_BLOCKLIST
+    }
+  }
+};
+export var Default = {
+  args: {
+    placement: "bottom",
+    popover: /*#__PURE__*/React.createElement(Text, {
+      variant: "xs",
+      width: 300
+    }, CONTENT),
+    children: function children(_ref) {
+      var onVisible = _ref.onVisible,
+        anchorRef = _ref.anchorRef;
+      return /*#__PURE__*/React.createElement(Box, {
+        textAlign: "center"
+      }, /*#__PURE__*/React.createElement(Button, {
+        ref: anchorRef,
+        variant: "secondaryBlack",
+        size: "small",
+        onClick: onVisible
+      }, "Click to display popover"));
+    }
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Default popover."
+      }
+    }
+  }
+};
+export var Visible = {
+  tags: ["!autodocs"],
+  args: {
+    placement: "bottom",
+    visible: true,
+    popover: /*#__PURE__*/React.createElement(Text, {
+      variant: "xs",
+      width: 300
+    }, CONTENT),
+    children: function children(_ref2) {
+      var onVisible = _ref2.onVisible,
+        anchorRef = _ref2.anchorRef;
+      return /*#__PURE__*/React.createElement(Box, {
+        textAlign: "center"
+      }, /*#__PURE__*/React.createElement(Button, {
+        ref: anchorRef,
+        variant: "secondaryBlack",
+        size: "small",
+        onClick: onVisible
+      }, "Popover Visible"));
+    }
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Popover visible state."
+      }
+    }
+  }
+};
+export var WithContentInteraction = {
+  tags: ["!autodocs"],
+  args: {
+    placement: "bottom",
+    visible: true,
+    popover: /*#__PURE__*/React.createElement(Text, {
+      variant: "xs",
+      width: 300
+    }, "| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | \u2014 (Content interaction with close button.)"),
+    children: function children(_ref3) {
+      var onVisible = _ref3.onVisible,
+        anchorRef = _ref3.anchorRef;
+      return /*#__PURE__*/React.createElement(Box, {
+        textAlign: "center"
+      }, /*#__PURE__*/React.createElement(Button, {
+        ref: anchorRef,
+        variant: "secondaryBlack",
+        size: "small",
+        onClick: onVisible
+      }, "Popover With Content Interaction"));
+    }
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Popover with content interaction."
+      }
+    }
+  }
+};
+export var Pointer = {
+  tags: ["!autodocs"],
+  args: {
+    placement: "bottom",
+    pointer: true,
+    visible: true,
+    p: 0,
+    popover: /*#__PURE__*/React.createElement(React.Fragment, null, new Array(4).fill(0).map(function (_, i) {
+      return /*#__PURE__*/React.createElement(Text, {
+        key: i,
+        variant: "sm-display",
+        overflowEllipsis: true,
+        bg: "red10",
+        px: 1,
+        py: 0.5
+      }, "Example Item");
+    })),
+    children: function children(_ref4) {
+      var onVisible = _ref4.onVisible,
+        anchorRef = _ref4.anchorRef;
+      return /*#__PURE__*/React.createElement(Box, {
+        textAlign: "center"
+      }, /*#__PURE__*/React.createElement(Button, {
+        ref: anchorRef,
+        variant: "secondaryBlack",
+        size: "small",
+        onClick: onVisible
+      }, "Popover With Pointer"));
+    }
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Popover with pointer and multiple items."
+      }
+    }
+  }
+};
+export var DarkVariant = {
+  tags: ["!autodocs"],
+  args: {
+    placement: "bottom",
+    variant: "defaultDark",
+    visible: true,
+    pointer: true,
+    zIndex: 99,
+    popover: /*#__PURE__*/React.createElement(Text, {
+      variant: "xs",
+      width: 300
+    }, CONTENT),
+    children: function children(_ref5) {
+      var onVisible = _ref5.onVisible,
+        anchorRef = _ref5.anchorRef;
+      return /*#__PURE__*/React.createElement(Box, {
+        textAlign: "center"
+      }, /*#__PURE__*/React.createElement(Button, {
+        ref: anchorRef,
+        variant: "secondaryBlack",
+        size: "small",
+        onClick: onVisible
+      }, "Popover Dark Variant"));
+    }
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Popover with dark variant styling."
+      }
+    }
+  }
+};
+export var HideCloseButton = {
+  tags: ["!autodocs"],
+  args: {
+    placement: "bottom",
+    showCloseButton: false,
+    visible: true,
+    popover: /*#__PURE__*/React.createElement(Text, {
+      variant: "xs",
+      width: 300
+    }, CONTENT),
+    children: function children(_ref6) {
+      var onVisible = _ref6.onVisible,
+        anchorRef = _ref6.anchorRef;
+      return /*#__PURE__*/React.createElement(Box, {
+        textAlign: "center"
+      }, /*#__PURE__*/React.createElement(Button, {
+        ref: anchorRef,
+        variant: "secondaryBlack",
+        size: "small",
+        onClick: onVisible
+      }, "Popover Without Close Button"));
+    }
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Popover with close button hidden."
+      }
+    }
+  }
+};
+export var IgnoreClickOutside = {
+  tags: ["!autodocs"],
+  args: {
+    placement: "bottom",
+    visible: true,
+    ignoreClickOutside: true,
+    popover: /*#__PURE__*/React.createElement(Text, {
+      variant: "xs",
+      width: 300
+    }, CONTENT),
+    children: function children(_ref7) {
+      var onVisible = _ref7.onVisible,
+        anchorRef = _ref7.anchorRef;
+      return /*#__PURE__*/React.createElement(Box, {
+        textAlign: "center"
+      }, /*#__PURE__*/React.createElement(Button, {
+        ref: anchorRef,
+        variant: "secondaryBlack",
+        size: "small",
+        onClick: onVisible
+      }, "Popover Ignore Click Outside"));
+    }
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Popover with ignoreClickOutside enabled."
+      }
+    }
+  }
+};
+export var Placement = {
+  tags: ["!autodocs"],
+  render: function render() {
+    return /*#__PURE__*/React.createElement(States, {
+      states: Object.keys(POSITION).map(function (placement) {
+        return {
+          placement: placement
+        };
+      })
+    }, function (props) {
+      return /*#__PURE__*/React.createElement(Popover, _extends({
+        popover: /*#__PURE__*/React.createElement(Text, {
+          variant: "xs"
+        }, JSON.stringify(props)),
+        visible: true,
+        variant: "defaultDark",
+        pointer: true
+      }, props), function (_ref8) {
+        var anchorRef = _ref8.anchorRef;
+        return /*#__PURE__*/React.createElement(Text, {
+          ref: anchorRef,
+          variant: "xs",
+          textAlign: "center",
+          p: 1,
+          maxWidth: "50%",
+          mx: "auto",
+          bg: "mono10"
+        }, JSON.stringify(props));
+      });
+    });
+  },
+  parameters: {
+    chromatic: {
+      disable: true
+    },
+    docs: {
+      description: {
+        story: "Popover shown in all available placement positions."
+      }
+    }
+  }
+};
+export var ManageFocus = {
+  tags: ["!autodocs"],
+  render: function render() {
+    return /*#__PURE__*/React.createElement(States, {
+      states: [{
+        visible: true,
+        manageFocus: false
+      }, {
+        visible: true,
+        manageFocus: true
+      }]
+    }, /*#__PURE__*/React.createElement(Popover, {
+      placement: "bottom",
+      popover: /*#__PURE__*/React.createElement(Text, {
+        variant: "xs",
+        width: 300
+      }, CONTENT)
+    }, function (_ref9) {
+      var onVisible = _ref9.onVisible,
+        anchorRef = _ref9.anchorRef;
+      return /*#__PURE__*/React.createElement(Box, {
+        textAlign: "center"
+      }, /*#__PURE__*/React.createElement(Button, {
+        ref: anchorRef,
+        variant: "secondaryBlack",
+        size: "small",
+        onClick: onVisible
+      }, "Click to display popover"));
+    }));
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Popover with different focus management settings."
+      }
+    }
+  }
+};
+export var PopoverActions = {
+  tags: ["!autodocs"],
+  render: function render() {
+    return /*#__PURE__*/React.createElement(States, {
+      states: [{
+        visible: true
+      }]
+    }, /*#__PURE__*/React.createElement(Popover, {
+      placement: "bottom",
+      popover: function popover(_ref10) {
+        var onHide = _ref10.onHide,
+          onDismiss = _ref10.onDismiss;
+        return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text, {
+          variant: "xs",
+          width: 300
+        }, CONTENT), /*#__PURE__*/React.createElement(Spacer, {
+          y: 2
+        }), /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(Button, {
+          flex: 1,
+          size: "small",
+          variant: "secondaryBlack",
+          onClick: onHide
+        }, "Hide"), /*#__PURE__*/React.createElement(Spacer, {
+          x: 1
+        }), /*#__PURE__*/React.createElement(Button, {
+          flex: 1,
+          size: "small",
+          variant: "secondaryBlack",
+          onClick: onDismiss
+        }, "Dismiss")));
+      }
+    }, function (_ref11) {
+      var onVisible = _ref11.onVisible,
+        anchorRef = _ref11.anchorRef;
+      return /*#__PURE__*/React.createElement(Box, {
+        textAlign: "center"
+      }, /*#__PURE__*/React.createElement(Button, {
+        ref: anchorRef,
+        variant: "secondaryBlack",
+        size: "small",
+        onClick: onVisible
+      }, "Click to display popover"));
+    }));
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Popover with action buttons (Hide and Dismiss)."
+      }
+    }
+  }
+};
+export var CrashAtSpecificZoomLevels = {
+  tags: ["!autodocs"],
+  render: function render() {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
+      height: 100
+    }, "Zoom to 90% in Chrome, click, then scroll."), /*#__PURE__*/React.createElement(Box, {
+      height: 2000,
+      bg: "mono5"
+    }, /*#__PURE__*/React.createElement(Box, {
+      height: 200
+    }), /*#__PURE__*/React.createElement(Popover, {
+      placement: "top",
+      popover: function popover(_ref12) {
+        var onHide = _ref12.onHide,
+          onDismiss = _ref12.onDismiss;
+        return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text, {
+          variant: "xs",
+          width: 300
+        }, CONTENT), /*#__PURE__*/React.createElement(Spacer, {
+          y: 2
+        }), /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(Button, {
+          flex: 1,
+          size: "small",
+          variant: "secondaryBlack",
+          onClick: onHide
+        }, "Hide"), /*#__PURE__*/React.createElement(Spacer, {
+          x: 1
+        }), /*#__PURE__*/React.createElement(Button, {
+          flex: 1,
+          size: "small",
+          variant: "secondaryBlack",
+          onClick: onDismiss
+        }, "Dismiss")));
+      }
+    }, function (_ref13) {
+      var onVisible = _ref13.onVisible,
+        anchorRef = _ref13.anchorRef;
+      return /*#__PURE__*/React.createElement(Box, {
+        textAlign: "center"
+      }, /*#__PURE__*/React.createElement(Button, {
+        ref: anchorRef,
+        variant: "secondaryBlack",
+        size: "small",
+        onClick: onVisible
+      }, "Click to display popover"));
+    })));
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Test case for popover behavior at specific zoom levels."
+      }
+    }
+  }
+};
+//# sourceMappingURL=Popover.story.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.story.js","names":["React","States","POSITION","Box","Button","Flex","Spacer","Text","Popover","STORYBOOK_PROPS_BLOCKLIST","CONTENT","component","title","tags","parameters","docs","description","controls","exclude","Default","args","placement","popover","createElement","variant","width","children","_ref","onVisible","anchorRef","textAlign","ref","size","onClick","story","Visible","visible","_ref2","WithContentInteraction","_ref3","Pointer","pointer","p","Fragment","Array","fill","map","_","i","key","overflowEllipsis","bg","px","py","_ref4","DarkVariant","zIndex","_ref5","HideCloseButton","showCloseButton","_ref6","IgnoreClickOutside","ignoreClickOutside","_ref7","Placement","render","states","Object","keys","props","_extends","JSON","stringify","_ref8","maxWidth","mx","chromatic","disable","ManageFocus","manageFocus","_ref9","PopoverActions","_ref10","onHide","onDismiss","y","flex","x","_ref11","CrashAtSpecificZoomLevels","height","_ref12","_ref13"],"sources":["../../../../src/elements/Popover/Popover.story.tsx"],"sourcesContent":["import React from \"react\"\nimport { States } from \"storybook-states\"\nimport { Position, POSITION } from \"../../utils\"\nimport { Box } from \"../Box\"\nimport { Button } from \"../Button\"\nimport { Flex } from \"../Flex\"\nimport { Spacer } from \"../Spacer\"\nimport { Text } from \"../Text\"\nimport { Popover, PopoverProps } from \"./Popover\"\nimport { STORYBOOK_PROPS_BLOCKLIST } from \"../../utils/storybookBlocklist\"\n\nconst CONTENT =\n  \"Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi eius autem aliquid cumque, mollitia incidunt totam. Id ut quae hic in quisquam, cupiditate iure nobis, provident minus voluptatem tenetur consequatur.\"\n\nexport default {\n  component: Popover,\n  title: \"Components/Popover\",\n  tags: [\"autodocs\"],\n  parameters: {\n    docs: {\n      description: {\n        component:\n          \"A floating popover component that can be positioned relative to an anchor element.\",\n      },\n    },\n    controls: {\n      exclude: STORYBOOK_PROPS_BLOCKLIST,\n    },\n  },\n}\n\nexport const Default = {\n  args: {\n    placement: \"bottom\",\n    popover: (\n      <Text variant=\"xs\" width={300}>\n        {CONTENT}\n      </Text>\n    ),\n    children: ({ onVisible, anchorRef }) => (\n      <Box textAlign=\"center\">\n        <Button\n          ref={anchorRef}\n          variant=\"secondaryBlack\"\n          size=\"small\"\n          onClick={onVisible}\n        >\n          Click to display popover\n        </Button>\n      </Box>\n    ),\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Default popover.\",\n      },\n    },\n  },\n}\n\nexport const Visible = {\n  tags: [\"!autodocs\"],\n  args: {\n    placement: \"bottom\",\n    visible: true,\n    popover: (\n      <Text variant=\"xs\" width={300}>\n        {CONTENT}\n      </Text>\n    ),\n    children: ({ onVisible, anchorRef }) => (\n      <Box textAlign=\"center\">\n        <Button\n          ref={anchorRef}\n          variant=\"secondaryBlack\"\n          size=\"small\"\n          onClick={onVisible}\n        >\n          Popover Visible\n        </Button>\n      </Box>\n    ),\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Popover visible state.\",\n      },\n    },\n  },\n}\n\nexport const WithContentInteraction = {\n  tags: [\"!autodocs\"],\n  args: {\n    placement: \"bottom\",\n    visible: true,\n    popover: (\n      <Text variant=\"xs\" width={300}>\n        | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |\n        | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |\n        | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |\n        | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |\n        | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |\n        | | | | | | | | | | | | | | | | | | | | | — (Content interaction with\n        close button.)\n      </Text>\n    ),\n    children: ({ onVisible, anchorRef }) => (\n      <Box textAlign=\"center\">\n        <Button\n          ref={anchorRef}\n          variant=\"secondaryBlack\"\n          size=\"small\"\n          onClick={onVisible}\n        >\n          Popover With Content Interaction\n        </Button>\n      </Box>\n    ),\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Popover with content interaction.\",\n      },\n    },\n  },\n}\n\nexport const Pointer = {\n  tags: [\"!autodocs\"],\n  args: {\n    placement: \"bottom\",\n    pointer: true,\n    visible: true,\n    p: 0,\n    popover: (\n      <>\n        {new Array(4).fill(0).map((_, i) => (\n          <Text\n            key={i}\n            variant=\"sm-display\"\n            overflowEllipsis\n            bg=\"red10\"\n            px={1}\n            py={0.5}\n          >\n            Example Item\n          </Text>\n        ))}\n      </>\n    ),\n    children: ({ onVisible, anchorRef }) => (\n      <Box textAlign=\"center\">\n        <Button\n          ref={anchorRef}\n          variant=\"secondaryBlack\"\n          size=\"small\"\n          onClick={onVisible}\n        >\n          Popover With Pointer\n        </Button>\n      </Box>\n    ),\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Popover with pointer and multiple items.\",\n      },\n    },\n  },\n}\n\nexport const DarkVariant = {\n  tags: [\"!autodocs\"],\n  args: {\n    placement: \"bottom\",\n    variant: \"defaultDark\",\n    visible: true,\n    pointer: true,\n    zIndex: 99,\n    popover: (\n      <Text variant=\"xs\" width={300}>\n        {CONTENT}\n      </Text>\n    ),\n    children: ({ onVisible, anchorRef }) => (\n      <Box textAlign=\"center\">\n        <Button\n          ref={anchorRef}\n          variant=\"secondaryBlack\"\n          size=\"small\"\n          onClick={onVisible}\n        >\n          Popover Dark Variant\n        </Button>\n      </Box>\n    ),\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Popover with dark variant styling.\",\n      },\n    },\n  },\n}\n\nexport const HideCloseButton = {\n  tags: [\"!autodocs\"],\n  args: {\n    placement: \"bottom\",\n    showCloseButton: false,\n    visible: true,\n    popover: (\n      <Text variant=\"xs\" width={300}>\n        {CONTENT}\n      </Text>\n    ),\n    children: ({ onVisible, anchorRef }) => (\n      <Box textAlign=\"center\">\n        <Button\n          ref={anchorRef}\n          variant=\"secondaryBlack\"\n          size=\"small\"\n          onClick={onVisible}\n        >\n          Popover Without Close Button\n        </Button>\n      </Box>\n    ),\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Popover with close button hidden.\",\n      },\n    },\n  },\n}\n\nexport const IgnoreClickOutside = {\n  tags: [\"!autodocs\"],\n  args: {\n    placement: \"bottom\",\n    visible: true,\n    ignoreClickOutside: true,\n    popover: (\n      <Text variant=\"xs\" width={300}>\n        {CONTENT}\n      </Text>\n    ),\n    children: ({ onVisible, anchorRef }) => (\n      <Box textAlign=\"center\">\n        <Button\n          ref={anchorRef}\n          variant=\"secondaryBlack\"\n          size=\"small\"\n          onClick={onVisible}\n        >\n          Popover Ignore Click Outside\n        </Button>\n      </Box>\n    ),\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Popover with ignoreClickOutside enabled.\",\n      },\n    },\n  },\n}\n\nexport const Placement = {\n  tags: [\"!autodocs\"],\n  render: () => (\n    <States<Partial<PopoverProps>>\n      states={Object.keys(POSITION).map((placement) => ({\n        placement: placement as Position,\n      }))}\n    >\n      {(props) => (\n        <Popover\n          popover={<Text variant=\"xs\">{JSON.stringify(props)}</Text>}\n          visible\n          variant=\"defaultDark\"\n          pointer\n          {...props}\n        >\n          {({ anchorRef }) => (\n            <Text\n              ref={anchorRef as any}\n              variant=\"xs\"\n              textAlign=\"center\"\n              p={1}\n              maxWidth=\"50%\"\n              mx=\"auto\"\n              bg=\"mono10\"\n            >\n              {JSON.stringify(props)}\n            </Text>\n          )}\n        </Popover>\n      )}\n    </States>\n  ),\n  parameters: {\n    chromatic: { disable: true },\n    docs: {\n      description: {\n        story: \"Popover shown in all available placement positions.\",\n      },\n    },\n  },\n}\n\nexport const ManageFocus = {\n  tags: [\"!autodocs\"],\n  render: () => (\n    <States<Partial<PopoverProps>>\n      states={[\n        { visible: true, manageFocus: false },\n        { visible: true, manageFocus: true },\n      ]}\n    >\n      <Popover\n        placement=\"bottom\"\n        popover={\n          <Text variant=\"xs\" width={300}>\n            {CONTENT}\n          </Text>\n        }\n      >\n        {({ onVisible, anchorRef }) => (\n          <Box textAlign=\"center\">\n            <Button\n              ref={anchorRef}\n              variant=\"secondaryBlack\"\n              size=\"small\"\n              onClick={onVisible}\n            >\n              Click to display popover\n            </Button>\n          </Box>\n        )}\n      </Popover>\n    </States>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"Popover with different focus management settings.\",\n      },\n    },\n  },\n}\n\nexport const PopoverActions = {\n  tags: [\"!autodocs\"],\n  render: () => (\n    <States<Partial<PopoverProps>> states={[{ visible: true }]}>\n      <Popover\n        placement=\"bottom\"\n        popover={({ onHide, onDismiss }) => (\n          <>\n            <Text variant=\"xs\" width={300}>\n              {CONTENT}\n            </Text>\n\n            <Spacer y={2} />\n\n            <Flex>\n              <Button\n                flex={1}\n                size=\"small\"\n                variant=\"secondaryBlack\"\n                onClick={onHide}\n              >\n                Hide\n              </Button>\n\n              <Spacer x={1} />\n\n              <Button\n                flex={1}\n                size=\"small\"\n                variant=\"secondaryBlack\"\n                onClick={onDismiss}\n              >\n                Dismiss\n              </Button>\n            </Flex>\n          </>\n        )}\n      >\n        {({ onVisible, anchorRef }) => (\n          <Box textAlign=\"center\">\n            <Button\n              ref={anchorRef}\n              variant=\"secondaryBlack\"\n              size=\"small\"\n              onClick={onVisible}\n            >\n              Click to display popover\n            </Button>\n          </Box>\n        )}\n      </Popover>\n    </States>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"Popover with action buttons (Hide and Dismiss).\",\n      },\n    },\n  },\n}\n\nexport const CrashAtSpecificZoomLevels = {\n  tags: [\"!autodocs\"],\n  render: () => (\n    <>\n      <Box height={100}>Zoom to 90% in Chrome, click, then scroll.</Box>\n\n      <Box height={2000} bg=\"mono5\">\n        <Box height={200} />\n\n        <Popover\n          placement=\"top\"\n          popover={({ onHide, onDismiss }) => (\n            <>\n              <Text variant=\"xs\" width={300}>\n                {CONTENT}\n              </Text>\n\n              <Spacer y={2} />\n\n              <Flex>\n                <Button\n                  flex={1}\n                  size=\"small\"\n                  variant=\"secondaryBlack\"\n                  onClick={onHide}\n                >\n                  Hide\n                </Button>\n\n                <Spacer x={1} />\n\n                <Button\n                  flex={1}\n                  size=\"small\"\n                  variant=\"secondaryBlack\"\n                  onClick={onDismiss}\n                >\n                  Dismiss\n                </Button>\n              </Flex>\n            </>\n          )}\n        >\n          {({ onVisible, anchorRef }) => (\n            <Box textAlign=\"center\">\n              <Button\n                ref={anchorRef}\n                variant=\"secondaryBlack\"\n                size=\"small\"\n                onClick={onVisible}\n              >\n                Click to display popover\n              </Button>\n            </Box>\n          )}\n        </Popover>\n      </Box>\n    </>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"Test case for popover behavior at specific zoom levels.\",\n      },\n    },\n  },\n}\n"],"mappings":"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"}

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

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

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

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

package/dist/esm/elements/ProgressBar/ProgressBar.js

@@ -0,0 +1,41 @@
+var _excluded = ["percentComplete", "highlight", "showBackground", "transition"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import React from "react";
+import { Box } from "../Box";
+/** ProgressBar */
+export var ProgressBar = function ProgressBar(_ref) {
+  var percentComplete = _ref.percentComplete,
+    _ref$highlight = _ref.highlight,
+    highlight = _ref$highlight === void 0 ? "brand" : _ref$highlight,
+    _ref$showBackground = _ref.showBackground,
+    showBackground = _ref$showBackground === void 0 ? true : _ref$showBackground,
+    _ref$transition = _ref.transition,
+    transition = _ref$transition === void 0 ? "transform 1s ease" : _ref$transition,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    tabIndex: 0,
+    role: "progressbar",
+    "aria-valuenow": percentComplete,
+    "aria-valuemin": 0,
+    "aria-valuemax": 100,
+    height: "2px",
+    position: "relative",
+    overflow: "hidden",
+    mt: 0.5,
+    mb: 1,
+    bg: showBackground ? "mono30" : "transparent"
+  }, rest), /*#__PURE__*/React.createElement(Box, {
+    bg: highlight,
+    width: "100%",
+    height: "100%",
+    style: {
+      transition: transition,
+      transform: "translateX(-".concat(100 - percentComplete, "%)"),
+      backfaceVisibility: "hidden"
+    }
+  }));
+};
+ProgressBar.displayName = "ProgressBar";
+//# sourceMappingURL=ProgressBar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBar.js","names":["React","Box","ProgressBar","_ref","percentComplete","_ref$highlight","highlight","_ref$showBackground","showBackground","_ref$transition","transition","rest","_objectWithoutProperties","_excluded","createElement","_extends","tabIndex","role","height","position","overflow","mt","mb","bg","width","style","transform","concat","backfaceVisibility","displayName"],"sources":["../../../../src/elements/ProgressBar/ProgressBar.tsx"],"sourcesContent":["import React from \"react\"\nimport { Color } from \"../../themes/types\"\nimport { Box, BoxProps } from \"../Box\"\n\nexport interface ProgressBarProps extends BoxProps {\n  percentComplete: number\n  highlight?: Color\n  showBackground?: boolean\n  transition?: string\n}\n\n/** ProgressBar */\nexport const ProgressBar: React.FC<\n  React.PropsWithChildren<ProgressBarProps>\n> = ({\n  percentComplete,\n  highlight = \"brand\",\n  showBackground = true,\n  transition = \"transform 1s ease\",\n  ...rest\n}) => {\n  return (\n    <Box\n      tabIndex={0}\n      role=\"progressbar\"\n      aria-valuenow={percentComplete}\n      aria-valuemin={0}\n      aria-valuemax={100}\n      height=\"2px\"\n      position=\"relative\"\n      overflow=\"hidden\"\n      mt={0.5}\n      mb={1}\n      bg={showBackground ? \"mono30\" : \"transparent\"}\n      {...rest}\n    >\n      <Box\n        bg={highlight}\n        width=\"100%\"\n        height=\"100%\"\n        style={{\n          transition,\n          transform: `translateX(-${100 - percentComplete}%)`,\n          backfaceVisibility: \"hidden\",\n        }}\n      />\n    </Box>\n  )\n}\n"],"mappings":";;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,GAAG;AASZ;AACA,OAAO,IAAMC,WAEZ,GAAG,SAFSA,WAEZA,CAAAC,IAAA,EAMK;EAAA,IALJC,eAAe,GAAAD,IAAA,CAAfC,eAAe;IAAAC,cAAA,GAAAF,IAAA,CACfG,SAAS;IAATA,SAAS,GAAAD,cAAA,cAAG,OAAO,GAAAA,cAAA;IAAAE,mBAAA,GAAAJ,IAAA,CACnBK,cAAc;IAAdA,cAAc,GAAAD,mBAAA,cAAG,IAAI,GAAAA,mBAAA;IAAAE,eAAA,GAAAN,IAAA,CACrBO,UAAU;IAAVA,UAAU,GAAAD,eAAA,cAAG,mBAAmB,GAAAA,eAAA;IAC7BE,IAAI,GAAAC,wBAAA,CAAAT,IAAA,EAAAU,SAAA;EAEP,oBACEb,KAAA,CAAAc,aAAA,CAACb,GAAG,EAAAc,QAAA;IACFC,QAAQ,EAAE,CAAE;IACZC,IAAI,EAAC,aAAa;IAClB,iBAAeb,eAAgB;IAC/B,iBAAe,CAAE;IACjB,iBAAe,GAAI;IACnBc,MAAM,EAAC,KAAK;IACZC,QAAQ,EAAC,UAAU;IACnBC,QAAQ,EAAC,QAAQ;IACjBC,EAAE,EAAE,GAAI;IACRC,EAAE,EAAE,CAAE;IACNC,EAAE,EAAEf,cAAc,GAAG,QAAQ,GAAG;EAAc,GAC1CG,IAAI,gBAERX,KAAA,CAAAc,aAAA,CAACb,GAAG;IACFsB,EAAE,EAAEjB,SAAU;IACdkB,KAAK,EAAC,MAAM;IACZN,MAAM,EAAC,MAAM;IACbO,KAAK,EAAE;MACLf,UAAU,EAAVA,UAAU;MACVgB,SAAS,iBAAAC,MAAA,CAAiB,GAAG,GAAGvB,eAAe,OAAI;MACnDwB,kBAAkB,EAAE;IACtB;EAAE,EACF,CACE;AAEV,CAAC;AApCY1B,WAEZ,CAAA2B,WAAA"}

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

@@ -0,0 +1,98 @@
+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, useState } from "react";
+import { ProgressBar } from "./ProgressBar";
+import { STORYBOOK_PROPS_BLOCKLIST } from "../../utils/storybookBlocklist";
+export default {
+  component: ProgressBar,
+  title: "Components/ProgressBar",
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: "A progress bar component that displays completion percentage with customizable colors and background."
+      }
+    },
+    controls: {
+      exclude: STORYBOOK_PROPS_BLOCKLIST
+    }
+  }
+};
+export var Default = {
+  args: {
+    percentComplete: 40
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Basic progress bar showing completion percentage."
+      }
+    }
+  }
+};
+export var Variants = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: "16px"
+      }
+    }, /*#__PURE__*/React.createElement(ProgressBar, {
+      percentComplete: 0
+    }), /*#__PURE__*/React.createElement(ProgressBar, {
+      percentComplete: 1
+    }), /*#__PURE__*/React.createElement(ProgressBar, {
+      percentComplete: 50
+    }), /*#__PURE__*/React.createElement(ProgressBar, {
+      percentComplete: 100
+    }), /*#__PURE__*/React.createElement(ProgressBar, {
+      percentComplete: 50,
+      highlight: "red100"
+    }), /*#__PURE__*/React.createElement(ProgressBar, {
+      percentComplete: 50,
+      showBackground: false
+    }));
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Different progress bar configurations and states."
+      }
+    }
+  }
+};
+export var AnimatedDemo = {
+  render: function render() {
+    var _useState = useState(0),
+      _useState2 = _slicedToArray(_useState, 2),
+      progress = _useState2[0],
+      setProgress = _useState2[1];
+    useEffect(function () {
+      var timer = setInterval(function () {
+        return setProgress(Math.floor(Math.random() * Math.floor(100)));
+      }, 500);
+      return function () {
+        return clearInterval(timer);
+      };
+    }, []);
+    return /*#__PURE__*/React.createElement(ProgressBar, {
+      percentComplete: progress
+    });
+  },
+  parameters: {
+    chromatic: {
+      disable: true
+    },
+    docs: {
+      description: {
+        story: "Animated progress bar with randomly changing values."
+      }
+    }
+  }
+};
+//# sourceMappingURL=ProgressBar.story.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBar.story.js","names":["React","useEffect","useState","ProgressBar","STORYBOOK_PROPS_BLOCKLIST","component","title","tags","parameters","docs","description","controls","exclude","Default","args","percentComplete","story","Variants","render","createElement","style","display","flexDirection","gap","highlight","showBackground","AnimatedDemo","_useState","_useState2","_slicedToArray","progress","setProgress","timer","setInterval","Math","floor","random","clearInterval","chromatic","disable"],"sources":["../../../../src/elements/ProgressBar/ProgressBar.story.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\"\nimport { ProgressBar } from \"./ProgressBar\"\nimport { STORYBOOK_PROPS_BLOCKLIST } from \"../../utils/storybookBlocklist\"\n\nexport default {\n  component: ProgressBar,\n  title: \"Components/ProgressBar\",\n  tags: [\"autodocs\"],\n  parameters: {\n    docs: {\n      description: {\n        component:\n          \"A progress bar component that displays completion percentage with customizable colors and background.\",\n      },\n    },\n    controls: {\n        exclude: STORYBOOK_PROPS_BLOCKLIST,\n      },\n  },\n}\n\nexport const Default = {\n  args: {\n    percentComplete: 40,\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Basic progress bar showing completion percentage.\",\n      },\n    },\n  },\n}\n\nexport const Variants = {\n  render: () => (\n    <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"16px\" }}>\n      <ProgressBar percentComplete={0} />\n      <ProgressBar percentComplete={1} />\n      <ProgressBar percentComplete={50} />\n      <ProgressBar percentComplete={100} />\n      <ProgressBar percentComplete={50} highlight=\"red100\" />\n      <ProgressBar percentComplete={50} showBackground={false} />\n    </div>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"Different progress bar configurations and states.\",\n      },\n    },\n  },\n}\n\nexport const AnimatedDemo = {\n  render: () => {\n    const [progress, setProgress] = useState(0)\n\n    useEffect(() => {\n      const timer = setInterval(\n        () => setProgress(Math.floor(Math.random() * Math.floor(100))),\n        500\n      )\n      return () => clearInterval(timer)\n    }, [])\n\n    return <ProgressBar percentComplete={progress} />\n  },\n  parameters: {\n    chromatic: { disable: true },\n    docs: {\n      description: {\n        story: \"Animated progress bar with randomly changing values.\",\n      },\n    },\n  },\n}\n"],"mappings":";;;;;;AAAA,OAAOA,KAAK,IAAIC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAClD,SAASC,WAAW;AACpB,SAASC,yBAAyB;AAElC,eAAe;EACbC,SAAS,EAAEF,WAAW;EACtBG,KAAK,EAAE,wBAAwB;EAC/BC,IAAI,EAAE,CAAC,UAAU,CAAC;EAClBC,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXL,SAAS,EACP;MACJ;IACF,CAAC;IACDM,QAAQ,EAAE;MACNC,OAAO,EAAER;IACX;EACJ;AACF,CAAC;AAED,OAAO,IAAMS,OAAO,GAAG;EACrBC,IAAI,EAAE;IACJC,eAAe,EAAE;EACnB,CAAC;EACDP,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXM,KAAK,EAAE;MACT;IACF;EACF;AACF,CAAC;AAED,OAAO,IAAMC,QAAQ,GAAG;EACtBC,MAAM,EAAE,SAARA,MAAMA,CAAA;IAAA,oBACJlB,KAAA,CAAAmB,aAAA;MAAKC,KAAK,EAAE;QAAEC,OAAO,EAAE,MAAM;QAAEC,aAAa,EAAE,QAAQ;QAAEC,GAAG,EAAE;MAAO;IAAE,gBACpEvB,KAAA,CAAAmB,aAAA,CAAChB,WAAW;MAACY,eAAe,EAAE;IAAE,EAAG,eACnCf,KAAA,CAAAmB,aAAA,CAAChB,WAAW;MAACY,eAAe,EAAE;IAAE,EAAG,eACnCf,KAAA,CAAAmB,aAAA,CAAChB,WAAW;MAACY,eAAe,EAAE;IAAG,EAAG,eACpCf,KAAA,CAAAmB,aAAA,CAAChB,WAAW;MAACY,eAAe,EAAE;IAAI,EAAG,eACrCf,KAAA,CAAAmB,aAAA,CAAChB,WAAW;MAACY,eAAe,EAAE,EAAG;MAACS,SAAS,EAAC;IAAQ,EAAG,eACvDxB,KAAA,CAAAmB,aAAA,CAAChB,WAAW;MAACY,eAAe,EAAE,EAAG;MAACU,cAAc,EAAE;IAAM,EAAG,CACvD;EAAA,CACP;EACDjB,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXM,KAAK,EAAE;MACT;IACF;EACF;AACF,CAAC;AAED,OAAO,IAAMU,YAAY,GAAG;EAC1BR,MAAM,EAAE,SAARA,MAAMA,CAAA,EAAQ;IACZ,IAAAS,SAAA,GAAgCzB,QAAQ,CAAC,CAAC,CAAC;MAAA0B,UAAA,GAAAC,cAAA,CAAAF,SAAA;MAApCG,QAAQ,GAAAF,UAAA;MAAEG,WAAW,GAAAH,UAAA;IAE5B3B,SAAS,CAAC,YAAM;MACd,IAAM+B,KAAK,GAAGC,WAAW,CACvB;QAAA,OAAMF,WAAW,CAACG,IAAI,CAACC,KAAK,CAACD,IAAI,CAACE,MAAM,EAAE,GAAGF,IAAI,CAACC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC;MAAA,GAC9D,GAAG,CACJ;MACD,OAAO;QAAA,OAAME,aAAa,CAACL,KAAK,CAAC;MAAA;IACnC,CAAC,EAAE,EAAE,CAAC;IAEN,oBAAOhC,KAAA,CAAAmB,aAAA,CAAChB,WAAW;MAACY,eAAe,EAAEe;IAAS,EAAG;EACnD,CAAC;EACDtB,UAAU,EAAE;IACV8B,SAAS,EAAE;MAAEC,OAAO,EAAE;IAAK,CAAC;IAC5B9B,IAAI,EAAE;MACJC,WAAW,EAAE;QACXM,KAAK,EAAE;MACT;IACF;EACF;AACF,CAAC"}

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

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

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

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