@artsy/palette 45.13.1 → 45.14.0-canary.1497.33070.0

package/dist/esm/elements/Marquee/Marquee.js

@@ -0,0 +1,109 @@
+var _excluded = ["marqueeText", "divider", "speed", "variant", "color"];
+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, { useState, useEffect, useRef } from "react";
+import styled, { keyframes } from "styled-components";
+import { variant } from "styled-system";
+import { Flex } from "../Flex";
+import { Box, BoxProps } from "../Box";
+import { Text } from "../Text";
+var VARIANTS = {
+  defaultLight: {
+    backgroundColor: "mono10",
+    color: "mono100"
+  },
+  defaultDark: {
+    backgroundColor: "mono10",
+    color: "mono100"
+  },
+  brand: {
+    backgroundColor: "mono10",
+    color: "mono100"
+  }
+};
+var move = function move(props) {
+  return keyframes(["from{transform:translateX(0);}to{transform:translateX(-", "px);}"], props.offset);
+};
+var Container = styled(Box).withConfig({
+  displayName: "Marquee__Container",
+  componentId: "sc-7cbzx0-0"
+})(["", " width:100%;overflow-x:hidden;"], variant({
+  variants: VARIANTS
+}));
+var StyledText = styled(Text).withConfig({
+  displayName: "Marquee__StyledText",
+  componentId: "sc-7cbzx0-1"
+})(["", " white-space:nowrap;"], variant({
+  variants: VARIANTS
+}));
+var Inner = styled.div.withConfig({
+  displayName: "Marquee__Inner",
+  componentId: "sc-7cbzx0-2"
+})(["animation:", " ", " infinite linear;cursor:default;user-select:none;white-space:nowrap;"], move, function (props) {
+  return props.speed;
+});
+var Item = styled.div.withConfig({
+  displayName: "Marquee__Item",
+  componentId: "sc-7cbzx0-3"
+})(["display:inline-block;"]);
+export var Marquee = function Marquee(_ref) {
+  var marqueeText = _ref.marqueeText,
+    _ref$divider = _ref.divider,
+    divider = _ref$divider === void 0 ? true : _ref$divider,
+    _ref$speed = _ref.speed,
+    speed = _ref$speed === void 0 ? "10s" : _ref$speed,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? "defaultDark" : _ref$variant,
+    color = _ref.color,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var containerEl = useRef(null);
+  var childEl = useRef(null);
+  var _useState = useState(1),
+    _useState2 = _slicedToArray(_useState, 2),
+    amount = _useState2[0],
+    setAmount = _useState2[1];
+  var _useState3 = useState(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    offset = _useState4[0],
+    setOffset = _useState4[1];
+  useEffect(function () {
+    if (!childEl.current || !containerEl.current) {
+      return;
+    }
+    var containerWidth = containerEl.current.getBoundingClientRect().width;
+    var childWidth = childEl.current.getBoundingClientRect().width;
+    var targetAmount = Math.min(Math.ceil(containerWidth / childWidth), 100);
+    setOffset(targetAmount * childWidth);
+    setAmount(Math.ceil(targetAmount * 2));
+  }, []);
+  return /*#__PURE__*/React.createElement(Container, _extends({
+    ref: containerEl,
+    backgroundColor: color,
+    variant: variant
+  }, rest), /*#__PURE__*/React.createElement(Inner, {
+    speed: speed,
+    offset: offset
+  }, Array.from(Array(amount)).map(function (_, i) {
+    return /*#__PURE__*/React.createElement(Item, {
+      key: i,
+      ref: childEl
+    }, /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(StyledText, {
+      px: [2, 4],
+      py: 0.5,
+      variant: "xs"
+    }, marqueeText), divider && /*#__PURE__*/React.createElement(StyledText, {
+      px: [1, 4],
+      py: 0.5,
+      variant: "xs"
+    }, "\u2022")));
+  })));
+};
+Marquee.displayName = "Marquee";
+//# sourceMappingURL=Marquee.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Marquee.js","names":["React","useState","useEffect","useRef","styled","keyframes","variant","Flex","Box","BoxProps","Text","VARIANTS","defaultLight","backgroundColor","color","defaultDark","brand","move","props","offset","Container","withConfig","displayName","componentId","variants","StyledText","Inner","div","speed","Item","Marquee","_ref","marqueeText","_ref$divider","divider","_ref$speed","_ref$variant","rest","_objectWithoutProperties","_excluded","containerEl","childEl","_useState","_useState2","_slicedToArray","amount","setAmount","_useState3","_useState4","setOffset","current","containerWidth","getBoundingClientRect","width","childWidth","targetAmount","Math","min","ceil","createElement","_extends","ref","Array","from","map","_","i","key","px","py"],"sources":["../../../../src/elements/Marquee/Marquee.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef } from \"react\"\nimport styled, { keyframes } from \"styled-components\"\nimport { variant } from \"styled-system\"\nimport { Flex } from \"../Flex\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Text } from \"../Text\"\n\nconst VARIANTS = {\n  defaultLight: {\n    backgroundColor: \"mono10\",\n    color: \"mono100\",\n  },\n  defaultDark: {\n    backgroundColor: \"mono10\",\n    color: \"mono100\",\n  },\n  brand: {\n    backgroundColor: \"mono10\",\n    color: \"mono100\",\n  },\n}\n\nconst move = (props) => keyframes`\n  from {\n    transform: translateX(0);\n  }\n  to {\n    transform: translateX(-${props.offset}px);\n  }\n`\n\nconst Container = styled(Box)<{ variant: keyof typeof VARIANTS }>`\n  ${variant({ variants: VARIANTS })}\n  width: 100%;\n  overflow-x: hidden;\n`\nconst StyledText = styled(Text)`\n  ${variant({ variants: VARIANTS })}\n  white-space: nowrap;\n`\n\nconst Inner = styled.div<{ speed: string; offset: number }>`\n  animation: ${move} ${(props) => props.speed} infinite linear;\n  cursor: default;\n  user-select: none;\n  white-space: nowrap;\n`\n\nconst Item = styled.div`\n  display: inline-block;\n`\n\nexport interface MarqueeProps extends BoxProps {\n  variant?: keyof typeof VARIANTS\n  speed?: string\n  color?: string\n  marqueeText: string\n  divider?: boolean\n}\n\nexport const Marquee: React.FC<React.PropsWithChildren<MarqueeProps>> = ({\n  marqueeText,\n  divider = true,\n  speed = \"10s\",\n  variant = \"defaultDark\",\n  color,\n  ...rest\n}) => {\n  const containerEl = useRef<HTMLDivElement | null>(null)\n  const childEl = useRef<HTMLDivElement | null>(null)\n\n  const [amount, setAmount] = useState(1)\n  const [offset, setOffset] = useState(0)\n\n  useEffect(() => {\n    if (!childEl.current || !containerEl.current) {\n      return\n    }\n    const containerWidth = containerEl.current.getBoundingClientRect().width\n    const childWidth = childEl.current.getBoundingClientRect().width\n    const targetAmount = Math.min(Math.ceil(containerWidth / childWidth), 100)\n\n    setOffset(targetAmount * childWidth)\n    setAmount(Math.ceil(targetAmount * 2))\n  }, [])\n\n  return (\n    <Container\n      ref={containerEl as any}\n      backgroundColor={color}\n      variant={variant}\n      {...rest}\n    >\n      <Inner speed={speed} offset={offset}>\n        {Array.from(Array(amount)).map((_, i) => (\n          <Item key={i} ref={childEl as any}>\n            <Flex>\n              <StyledText px={[2, 4]} py={0.5} variant=\"xs\">\n                {marqueeText}\n              </StyledText>\n              {divider && (\n                <StyledText px={[1, 4]} py={0.5} variant=\"xs\">\n                  •\n                </StyledText>\n              )}\n            </Flex>\n          </Item>\n        ))}\n      </Inner>\n    </Container>\n  )\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,95 @@
+import React from "react";
+import { Marquee } from "./Marquee";
+import { STORYBOOK_PROPS_BLOCKLIST } from "../../utils/storybookBlocklist";
+export default {
+  component: Marquee,
+  title: "Components/Marquee",
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: "A scrolling marquee text component with different visual variants and speed options."
+      }
+    },
+    controls: {
+      exclude: STORYBOOK_PROPS_BLOCKLIST
+    }
+  }
+};
+export var Default = {
+  args: {
+    marqueeText: "Black Owned"
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Basic marquee with default settings."
+      }
+    }
+  }
+};
+export var Variants = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: "16px"
+      }
+    }, /*#__PURE__*/React.createElement(Marquee, {
+      variant: "defaultLight",
+      marqueeText: "Black Owned"
+    }), /*#__PURE__*/React.createElement(Marquee, {
+      variant: "defaultDark",
+      marqueeText: "Women Owned"
+    }), /*#__PURE__*/React.createElement(Marquee, {
+      variant: "brand",
+      marqueeText: "Black Owned"
+    }));
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Different visual variants of the marquee component."
+      }
+    }
+  }
+};
+export var Speeds = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: "16px"
+      }
+    }, /*#__PURE__*/React.createElement(Marquee, {
+      speed: "5s",
+      marqueeText: "Fast Speed (5s)"
+    }), /*#__PURE__*/React.createElement(Marquee, {
+      speed: "20s",
+      marqueeText: "Slow Speed (20s)"
+    }));
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Marquee with different animation speeds."
+      }
+    }
+  }
+};
+export var WithoutDivider = {
+  args: {
+    divider: false,
+    marqueeText: "No Divider"
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Marquee without the divider separator."
+      }
+    }
+  }
+};
+//# sourceMappingURL=Marquee.story.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Marquee.story.js","names":["React","Marquee","STORYBOOK_PROPS_BLOCKLIST","component","title","tags","parameters","docs","description","controls","exclude","Default","args","marqueeText","story","Variants","render","createElement","style","display","flexDirection","gap","variant","Speeds","speed","WithoutDivider","divider"],"sources":["../../../../src/elements/Marquee/Marquee.story.tsx"],"sourcesContent":["import React from \"react\"\nimport { Marquee } from \"./Marquee\"\nimport { STORYBOOK_PROPS_BLOCKLIST } from \"../../utils/storybookBlocklist\"\n\nexport default {\n  component: Marquee,\n  title: \"Components/Marquee\",\n  tags: [\"autodocs\"],\n  parameters: {\n    docs: {\n      description: {\n        component:\n          \"A scrolling marquee text component with different visual variants and speed options.\",\n      },\n    },\n    controls: {\n        exclude: STORYBOOK_PROPS_BLOCKLIST,\n      },\n  },\n}\n\nexport const Default = {\n  args: {\n    marqueeText: \"Black Owned\",\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Basic marquee with default settings.\",\n      },\n    },\n  },\n}\n\nexport const Variants = {\n  render: () => (\n    <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"16px\" }}>\n      <Marquee variant=\"defaultLight\" marqueeText=\"Black Owned\" />\n      <Marquee variant=\"defaultDark\" marqueeText=\"Women Owned\" />\n      <Marquee variant=\"brand\" marqueeText=\"Black Owned\" />\n    </div>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"Different visual variants of the marquee component.\",\n      },\n    },\n  },\n}\n\nexport const Speeds = {\n  render: () => (\n    <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"16px\" }}>\n      <Marquee speed=\"5s\" marqueeText=\"Fast Speed (5s)\" />\n      <Marquee speed=\"20s\" marqueeText=\"Slow Speed (20s)\" />\n    </div>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"Marquee with different animation speeds.\",\n      },\n    },\n  },\n}\n\nexport const WithoutDivider = {\n  args: {\n    divider: false,\n    marqueeText: \"No Divider\",\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Marquee without the divider separator.\",\n      },\n    },\n  },\n}\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,OAAO;AAChB,SAASC,yBAAyB;AAElC,eAAe;EACbC,SAAS,EAAEF,OAAO;EAClBG,KAAK,EAAE,oBAAoB;EAC3BC,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,WAAW,EAAE;EACf,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,oBACJhB,KAAA,CAAAiB,aAAA;MAAKC,KAAK,EAAE;QAAEC,OAAO,EAAE,MAAM;QAAEC,aAAa,EAAE,QAAQ;QAAEC,GAAG,EAAE;MAAO;IAAE,gBACpErB,KAAA,CAAAiB,aAAA,CAAChB,OAAO;MAACqB,OAAO,EAAC,cAAc;MAACT,WAAW,EAAC;IAAa,EAAG,eAC5Db,KAAA,CAAAiB,aAAA,CAAChB,OAAO;MAACqB,OAAO,EAAC,aAAa;MAACT,WAAW,EAAC;IAAa,EAAG,eAC3Db,KAAA,CAAAiB,aAAA,CAAChB,OAAO;MAACqB,OAAO,EAAC,OAAO;MAACT,WAAW,EAAC;IAAa,EAAG,CACjD;EAAA,CACP;EACDP,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXM,KAAK,EAAE;MACT;IACF;EACF;AACF,CAAC;AAED,OAAO,IAAMS,MAAM,GAAG;EACpBP,MAAM,EAAE,SAARA,MAAMA,CAAA;IAAA,oBACJhB,KAAA,CAAAiB,aAAA;MAAKC,KAAK,EAAE;QAAEC,OAAO,EAAE,MAAM;QAAEC,aAAa,EAAE,QAAQ;QAAEC,GAAG,EAAE;MAAO;IAAE,gBACpErB,KAAA,CAAAiB,aAAA,CAAChB,OAAO;MAACuB,KAAK,EAAC,IAAI;MAACX,WAAW,EAAC;IAAiB,EAAG,eACpDb,KAAA,CAAAiB,aAAA,CAAChB,OAAO;MAACuB,KAAK,EAAC,KAAK;MAACX,WAAW,EAAC;IAAkB,EAAG,CAClD;EAAA,CACP;EACDP,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXM,KAAK,EAAE;MACT;IACF;EACF;AACF,CAAC;AAED,OAAO,IAAMW,cAAc,GAAG;EAC5Bb,IAAI,EAAE;IACJc,OAAO,EAAE,KAAK;IACdb,WAAW,EAAE;EACf,CAAC;EACDP,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXM,KAAK,EAAE;MACT;IACF;EACF;AACF,CAAC"}

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

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

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

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

package/dist/esm/elements/Message/Message.js

@@ -0,0 +1,68 @@
+var _excluded = ["children", "title", "variant"];
+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 styled from "styled-components";
+import { variant } from "styled-system";
+import { Flex, FlexProps } from "../Flex";
+import { Text } from "../Text";
+export var MESSAGE_VARIANTS = {
+  default: {
+    backgroundColor: "mono5",
+    color: "mono100"
+  },
+  info: {
+    backgroundColor: "blue10",
+    color: "blue100"
+  },
+  success: {
+    backgroundColor: "green10",
+    color: "green150"
+  },
+  alert: {
+    backgroundColor: "orange10",
+    color: "orange150"
+  },
+  warning: {
+    backgroundColor: "yellow10",
+    color: "yellow150"
+  },
+  error: {
+    backgroundColor: "red10",
+    color: "red100"
+  }
+};
+var Container = styled(Flex).withConfig({
+  displayName: "Message__Container",
+  componentId: "sc-t49v7v-0"
+})(["", " flex-direction:column;"], variant({
+  variants: MESSAGE_VARIANTS
+}));
+
+/**
+ * `Message` is used for in-line communication. These should fill the allotted
+ * container or space they are placed and key for temporal messages and
+ * comments within flows. Additionally, they can be used to highlight particular
+ * messaging within a specific section of a page or screen.
+ */
+export var Message = function Message(_ref) {
+  var children = _ref.children,
+    title = _ref.title,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? "default" : _ref$variant,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var color = variant === "default" ? "mono60" : "mono100";
+  return /*#__PURE__*/React.createElement(Container, _extends({
+    p: 2,
+    variant: variant
+  }, rest), /*#__PURE__*/React.createElement(Text, {
+    variant: "sm-display",
+    color: "currentColor"
+  }, title), /*#__PURE__*/React.createElement(Text, {
+    variant: "sm-display",
+    color: color
+  }, children));
+};
+Message.displayName = "Message";
+//# sourceMappingURL=Message.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Message.js","names":["React","styled","variant","Flex","FlexProps","Text","MESSAGE_VARIANTS","default","backgroundColor","color","info","success","alert","warning","error","Container","withConfig","displayName","componentId","variants","Message","_ref","children","title","_ref$variant","rest","_objectWithoutProperties","_excluded","createElement","_extends","p"],"sources":["../../../../src/elements/Message/Message.tsx"],"sourcesContent":["import React from \"react\"\nimport styled from \"styled-components\"\nimport { variant } from \"styled-system\"\nimport { Flex, FlexProps } from \"../Flex\"\nimport { Text } from \"../Text\"\n\nexport const MESSAGE_VARIANTS = {\n  default: {\n    backgroundColor: \"mono5\",\n    color: \"mono100\",\n  },\n  info: {\n    backgroundColor: \"blue10\",\n    color: \"blue100\",\n  },\n  success: {\n    backgroundColor: \"green10\",\n    color: \"green150\",\n  },\n  alert: {\n    backgroundColor: \"orange10\",\n    color: \"orange150\",\n  },\n  warning: {\n    backgroundColor: \"yellow10\",\n    color: \"yellow150\",\n  },\n  error: {\n    backgroundColor: \"red10\",\n    color: \"red100\",\n  },\n}\n\nexport type MessageVariant = keyof typeof MESSAGE_VARIANTS\n\nexport interface MessageProps extends FlexProps {\n  children?: React.ReactNode\n  title?: string\n  variant?: MessageVariant\n}\n\nconst Container = styled(Flex)<MessageProps>`\n  ${variant({ variants: MESSAGE_VARIANTS })}\n  flex-direction: column;\n`\n\n/**\n * `Message` is used for in-line communication. These should fill the allotted\n * container or space they are placed and key for temporal messages and\n * comments within flows. Additionally, they can be used to highlight particular\n * messaging within a specific section of a page or screen.\n */\nexport const Message: React.FC<React.PropsWithChildren<MessageProps>> = ({\n  children,\n  title,\n  variant = \"default\",\n  ...rest\n}) => {\n  const color = variant === \"default\" ? \"mono60\" : \"mono100\"\n\n  return (\n    <Container p={2} variant={variant} {...rest}>\n      <Text variant=\"sm-display\" color=\"currentColor\">\n        {title}\n      </Text>\n\n      <Text variant=\"sm-display\" color={color}>\n        {children}\n      </Text>\n    </Container>\n  )\n}\n"],"mappings":";;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAASC,OAAO,QAAQ,eAAe;AACvC,SAASC,IAAI,EAAEC,SAAS;AACxB,SAASC,IAAI;AAEb,OAAO,IAAMC,gBAAgB,GAAG;EAC9BC,OAAO,EAAE;IACPC,eAAe,EAAE,OAAO;IACxBC,KAAK,EAAE;EACT,CAAC;EACDC,IAAI,EAAE;IACJF,eAAe,EAAE,QAAQ;IACzBC,KAAK,EAAE;EACT,CAAC;EACDE,OAAO,EAAE;IACPH,eAAe,EAAE,SAAS;IAC1BC,KAAK,EAAE;EACT,CAAC;EACDG,KAAK,EAAE;IACLJ,eAAe,EAAE,UAAU;IAC3BC,KAAK,EAAE;EACT,CAAC;EACDI,OAAO,EAAE;IACPL,eAAe,EAAE,UAAU;IAC3BC,KAAK,EAAE;EACT,CAAC;EACDK,KAAK,EAAE;IACLN,eAAe,EAAE,OAAO;IACxBC,KAAK,EAAE;EACT;AACF,CAAC;AAUD,IAAMM,SAAS,GAAGd,MAAM,CAACE,IAAI,CAAC,CAAAa,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,oCAC1BhB,OAAO,CAAC;EAAEiB,QAAQ,EAAEb;AAAiB,CAAC,CAAC,CAE1C;;AAED;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMc,OAAwD,GAAG,SAA3DA,OAAwDA,CAAAC,IAAA,EAK/D;EAAA,IAJJC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IACRC,KAAK,GAAAF,IAAA,CAALE,KAAK;IAAAC,YAAA,GAAAH,IAAA,CACLnB,OAAO;IAAPA,OAAO,GAAAsB,YAAA,cAAG,SAAS,GAAAA,YAAA;IAChBC,IAAI,GAAAC,wBAAA,CAAAL,IAAA,EAAAM,SAAA;EAEP,IAAMlB,KAAK,GAAGP,OAAO,KAAK,SAAS,GAAG,QAAQ,GAAG,SAAS;EAE1D,oBACEF,KAAA,CAAA4B,aAAA,CAACb,SAAS,EAAAc,QAAA;IAACC,CAAC,EAAE,CAAE;IAAC5B,OAAO,EAAEA;EAAQ,GAAKuB,IAAI,gBACzCzB,KAAA,CAAA4B,aAAA,CAACvB,IAAI;IAACH,OAAO,EAAC,YAAY;IAACO,KAAK,EAAC;EAAc,GAC5Cc,KAAK,CACD,eAEPvB,KAAA,CAAA4B,aAAA,CAACvB,IAAI;IAACH,OAAO,EAAC,YAAY;IAACO,KAAK,EAAEA;EAAM,GACrCa,QAAQ,CACJ,CACG;AAEhB,CAAC;AAnBYF,OAAwD,CAAAH,WAAA"}

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

@@ -0,0 +1,95 @@
+import React from "react";
+import { Text } from "../Text";
+import { Message, MESSAGE_VARIANTS, MessageVariant } from "./Message";
+import { STORYBOOK_PROPS_BLOCKLIST } from "../../utils/storybookBlocklist";
+export default {
+  component: Message,
+  title: "Components/Message",
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: "A message component with different variants for displaying information, warnings, or errors."
+      }
+    },
+    controls: {
+      exclude: STORYBOOK_PROPS_BLOCKLIST
+    }
+  }
+};
+export var Default = {
+  args: {
+    children: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis quae natus assumenda distinctio, voluptatum magni. Natus, aliquam neque odio debitis totam labore maiores, corrupti mollitia repudiandae optio illo, autem sunt."
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Basic message with default styling."
+      }
+    }
+  }
+};
+export var AllVariants = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: "16px"
+      }
+    }, Object.keys(MESSAGE_VARIANTS).map(function (variant) {
+      return /*#__PURE__*/React.createElement(Message, {
+        key: variant,
+        variant: variant,
+        title: "Message Title"
+      }, "Lorem ipsum dolor sit amet consectetur adipisicing elit.");
+    }));
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "All available message variants with titles."
+      }
+    }
+  }
+};
+export var WithoutTitle = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: "16px"
+      }
+    }, /*#__PURE__*/React.createElement(Message, {
+      variant: "info"
+    }, "Information message without title."), /*#__PURE__*/React.createElement(Message, {
+      variant: "warning"
+    }, "Warning message without title."), /*#__PURE__*/React.createElement(Message, {
+      variant: "error"
+    }, "Error message without title."));
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Messages without titles showing different variants."
+      }
+    }
+  }
+};
+export var WithCustomChildren = {
+  args: {
+    children: /*#__PURE__*/React.createElement(Text, {
+      variant: "lg-display",
+      color: "red100"
+    }, "custom children")
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Message with custom React children instead of plain text."
+      }
+    }
+  }
+};
+//# sourceMappingURL=Message.story.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Message.story.js","names":["React","Text","Message","MESSAGE_VARIANTS","MessageVariant","STORYBOOK_PROPS_BLOCKLIST","component","title","tags","parameters","docs","description","controls","exclude","Default","args","children","story","AllVariants","render","createElement","style","display","flexDirection","gap","Object","keys","map","variant","key","WithoutTitle","WithCustomChildren","color"],"sources":["../../../../src/elements/Message/Message.story.tsx"],"sourcesContent":["import React from \"react\"\nimport { Text } from \"../Text\"\nimport { Message, MESSAGE_VARIANTS, MessageVariant } from \"./Message\"\nimport { STORYBOOK_PROPS_BLOCKLIST } from \"../../utils/storybookBlocklist\"\n\nexport default {\n  component: Message,\n  title: \"Components/Message\",\n  tags: [\"autodocs\"],\n  parameters: {\n    docs: {\n      description: {\n        component:\n          \"A message component with different variants for displaying information, warnings, or errors.\",\n      },\n    },\n    controls: {\n        exclude: STORYBOOK_PROPS_BLOCKLIST,\n      },\n  },\n}\n\nexport const Default = {\n  args: {\n    children:\n      \"Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis quae natus assumenda distinctio, voluptatum magni. Natus, aliquam neque odio debitis totam labore maiores, corrupti mollitia repudiandae optio illo, autem sunt.\",\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Basic message with default styling.\",\n      },\n    },\n  },\n}\n\nexport const AllVariants = {\n  render: () => (\n    <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"16px\" }}>\n      {Object.keys(MESSAGE_VARIANTS).map((variant) => (\n        <Message\n          key={variant}\n          variant={variant as MessageVariant}\n          title=\"Message Title\"\n        >\n          Lorem ipsum dolor sit amet consectetur adipisicing elit.\n        </Message>\n      ))}\n    </div>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"All available message variants with titles.\",\n      },\n    },\n  },\n}\n\nexport const WithoutTitle = {\n  render: () => (\n    <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"16px\" }}>\n      <Message variant=\"info\">Information message without title.</Message>\n      <Message variant=\"warning\">Warning message without title.</Message>\n      <Message variant=\"error\">Error message without title.</Message>\n    </div>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"Messages without titles showing different variants.\",\n      },\n    },\n  },\n}\n\nexport const WithCustomChildren = {\n  args: {\n    children: (\n      <Text variant=\"lg-display\" color=\"red100\">\n        custom children\n      </Text>\n    ),\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Message with custom React children instead of plain text.\",\n      },\n    },\n  },\n}\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI;AACb,SAASC,OAAO,EAAEC,gBAAgB,EAAEC,cAAc;AAClD,SAASC,yBAAyB;AAElC,eAAe;EACbC,SAAS,EAAEJ,OAAO;EAClBK,KAAK,EAAE,oBAAoB;EAC3BC,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,QAAQ,EACN;EACJ,CAAC;EACDP,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXM,KAAK,EAAE;MACT;IACF;EACF;AACF,CAAC;AAED,OAAO,IAAMC,WAAW,GAAG;EACzBC,MAAM,EAAE,SAARA,MAAMA,CAAA;IAAA,oBACJnB,KAAA,CAAAoB,aAAA;MAAKC,KAAK,EAAE;QAAEC,OAAO,EAAE,MAAM;QAAEC,aAAa,EAAE,QAAQ;QAAEC,GAAG,EAAE;MAAO;IAAE,GACnEC,MAAM,CAACC,IAAI,CAACvB,gBAAgB,CAAC,CAACwB,GAAG,CAAC,UAACC,OAAO;MAAA,oBACzC5B,KAAA,CAAAoB,aAAA,CAAClB,OAAO;QACN2B,GAAG,EAAED,OAAQ;QACbA,OAAO,EAAEA,OAA0B;QACnCrB,KAAK,EAAC;MAAe,GACtB,0DAED,CAAU;IAAA,CACX,CAAC,CACE;EAAA,CACP;EACDE,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXM,KAAK,EAAE;MACT;IACF;EACF;AACF,CAAC;AAED,OAAO,IAAMa,YAAY,GAAG;EAC1BX,MAAM,EAAE,SAARA,MAAMA,CAAA;IAAA,oBACJnB,KAAA,CAAAoB,aAAA;MAAKC,KAAK,EAAE;QAAEC,OAAO,EAAE,MAAM;QAAEC,aAAa,EAAE,QAAQ;QAAEC,GAAG,EAAE;MAAO;IAAE,gBACpExB,KAAA,CAAAoB,aAAA,CAAClB,OAAO;MAAC0B,OAAO,EAAC;IAAM,GAAC,oCAAkC,CAAU,eACpE5B,KAAA,CAAAoB,aAAA,CAAClB,OAAO;MAAC0B,OAAO,EAAC;IAAS,GAAC,gCAA8B,CAAU,eACnE5B,KAAA,CAAAoB,aAAA,CAAClB,OAAO;MAAC0B,OAAO,EAAC;IAAO,GAAC,8BAA4B,CAAU,CAC3D;EAAA,CACP;EACDnB,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXM,KAAK,EAAE;MACT;IACF;EACF;AACF,CAAC;AAED,OAAO,IAAMc,kBAAkB,GAAG;EAChChB,IAAI,EAAE;IACJC,QAAQ,eACNhB,KAAA,CAAAoB,aAAA,CAACnB,IAAI;MAAC2B,OAAO,EAAC,YAAY;MAACI,KAAK,EAAC;IAAQ,GAAC,iBAE1C;EAEJ,CAAC;EACDvB,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXM,KAAK,EAAE;MACT;IACF;EACF;AACF,CAAC"}

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

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

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

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

package/dist/esm/elements/Modal/ModalBase.js

@@ -0,0 +1,134 @@
+var _excluded = ["children", "zIndex", "dialogProps", "onClose"];
+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, useRef, useState } from "react";
+import styled from "styled-components";
+import { zIndex as systemZIndex, ZIndexProps } from "styled-system";
+import { usePortal } from "../../utils/usePortal";
+import { Flex, FlexProps } from "../Flex";
+import { FocusOn } from "react-focus-on";
+import { useDidMount } from "../../utils";
+var Focus = styled(FocusOn).withConfig({
+  displayName: "ModalBase__Focus",
+  componentId: "sc-g18dlb-0"
+})(["width:100%;height:100%;display:flex;align-items:center;justify-content:center;"]);
+var Backdrop = styled.div.withConfig({
+  displayName: "ModalBase__Backdrop",
+  componentId: "sc-g18dlb-1"
+})(["width:100%;height:100%;display:flex;align-items:center;justify-content:center;"]);
+var Container = styled(Flex).withConfig({
+  displayName: "ModalBase__Container",
+  componentId: "sc-g18dlb-2"
+})(["position:fixed;top:0;right:0;bottom:0;left:0;align-items:center;justify-content:center;", ""], systemZIndex);
+var Dialog = styled(Flex).attrs({
+  role: "dialog"
+}).withConfig({
+  displayName: "ModalBase__Dialog",
+  componentId: "sc-g18dlb-3"
+})(["overflow-y:auto;-webkit-overflow-scrolling:touch;> *{max-height:100%;}"]);
+
+/** BaseModal */
+
+/**
+ * It seems we've landed on this value as the 'top'
+ */
+export var DEFAULT_MODAL_Z_INDEX = 9999;
+
+/**
+ * BaseModal
+ * Low-level modal that has no opinions about layout/overlay
+ * Modals content using a portal, locks scroll.
+ */
+export var ModalBase = function ModalBase(props) {
+  var isClient = useDidMount();
+  if (!isClient) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(_ModalBase, props);
+};
+ModalBase.displayName = "ModalBase";
+export var _ModalBase = function _ModalBase(_ref) {
+  var children = _ref.children,
+    _ref$zIndex = _ref.zIndex,
+    zIndex = _ref$zIndex === void 0 ? DEFAULT_MODAL_Z_INDEX : _ref$zIndex,
+    _ref$dialogProps = _ref.dialogProps,
+    dialogProps = _ref$dialogProps === void 0 ? {} : _ref$dialogProps,
+    _ref$onClose = _ref.onClose,
+    onClose = _ref$onClose === void 0 ? function () {
+      return null;
+    } : _ref$onClose,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var focusEl = useRef(null);
+  var backdropEl = useRef(null);
+  var handleMouseDown = function handleMouseDown(event) {
+    if (event.target === backdropEl.current) {
+      onClose();
+    }
+  };
+  useEffect(function () {
+    var handleKeydown = function handleKeydown(event) {
+      switch (event.key) {
+        case "Escape":
+          // Prevent <esc> from interfering with the returned focus
+          event.preventDefault();
+          event.stopPropagation();
+
+          // Handle close
+          return onClose();
+        default:
+          break;
+      }
+    };
+    document.addEventListener("keydown", handleKeydown);
+    return function () {
+      document.removeEventListener("keydown", handleKeydown);
+    };
+  }, [onClose]);
+
+  // Sets to `innerHeight` so as to simulate `100vh` on iOS
+  var _useState = useState(window.innerHeight),
+    _useState2 = _slicedToArray(_useState, 2),
+    maxHeight = _useState2[0],
+    setMaxHeight = _useState2[1];
+
+  // Keeps `maxHeight` in sync
+  useEffect(function () {
+    var updateMaxHeight = function updateMaxHeight() {
+      setMaxHeight(window.innerHeight);
+    };
+
+    // Due to the dialog being portaled; we need to wait until the next tick
+    // before we can perform any operations that rely on the sizing of elements.
+    // Presumably anything that relies on this also listens to resize for updates.
+    setTimeout(function () {
+      window.dispatchEvent(new Event("resize"));
+    }, 0);
+    window.addEventListener("resize", updateMaxHeight, {
+      passive: true
+    });
+    return function () {
+      window.removeEventListener("resize", updateMaxHeight);
+    };
+  }, []);
+  var _usePortal = usePortal(),
+    createPortal = _usePortal.createPortal;
+  return createPortal( /*#__PURE__*/React.createElement(Container, _extends({
+    zIndex: zIndex
+  }, rest), /*#__PURE__*/React.createElement(Focus, {
+    ref: focusEl
+  }, /*#__PURE__*/React.createElement(Backdrop, {
+    ref: backdropEl,
+    onMouseDown: handleMouseDown
+  }, /*#__PURE__*/React.createElement(Dialog, _extends({
+    maxHeight: maxHeight
+  }, dialogProps), children)))));
+};
+ModalBase.displayName = "ModalBase";
+//# sourceMappingURL=ModalBase.js.map

package/dist/esm/elements/Modal/ModalBase.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalBase.js","names":["React","useEffect","useRef","useState","styled","zIndex","systemZIndex","ZIndexProps","usePortal","Flex","FlexProps","FocusOn","useDidMount","Focus","withConfig","displayName","componentId","Backdrop","div","Container","Dialog","attrs","role","DEFAULT_MODAL_Z_INDEX","ModalBase","props","isClient","createElement","_ModalBase","_ref","children","_ref$zIndex","_ref$dialogProps","dialogProps","_ref$onClose","onClose","rest","_objectWithoutProperties","_excluded","focusEl","backdropEl","handleMouseDown","event","target","current","handleKeydown","key","preventDefault","stopPropagation","document","addEventListener","removeEventListener","_useState","window","innerHeight","_useState2","_slicedToArray","maxHeight","setMaxHeight","updateMaxHeight","setTimeout","dispatchEvent","Event","passive","_usePortal","createPortal","_extends","ref","onMouseDown"],"sources":["../../../../src/elements/Modal/ModalBase.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\"\nimport styled from \"styled-components\"\nimport { zIndex as systemZIndex, ZIndexProps } from \"styled-system\"\nimport { usePortal } from \"../../utils/usePortal\"\nimport { Flex, FlexProps } from \"../Flex\"\nimport { FocusOn } from \"react-focus-on\"\nimport { useDidMount } from \"../../utils\"\n\nconst Focus = styled(FocusOn)`\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n`\n\nconst Backdrop = styled.div`\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n`\n\nconst Container = styled(Flex)`\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  align-items: center;\n  justify-content: center;\n  ${systemZIndex}\n`\n\nconst Dialog = styled(Flex).attrs({ role: \"dialog\" })`\n  overflow-y: auto;\n  -webkit-overflow-scrolling: touch;\n\n  > * {\n    max-height: 100%;\n  }\n`\n\n/** BaseModal */\nexport type ModalBaseProps = React.HTMLAttributes<HTMLDivElement> &\n  FlexProps &\n  ZIndexProps & {\n    children?: React.ReactNode\n    dialogProps?: FlexProps\n    onClose?(): void\n  }\n\n/**\n * It seems we've landed on this value as the 'top'\n */\nexport const DEFAULT_MODAL_Z_INDEX = 9999\n\n/**\n * BaseModal\n * Low-level modal that has no opinions about layout/overlay\n * Modals content using a portal, locks scroll.\n */\nexport const ModalBase: React.FC<React.PropsWithChildren<ModalBaseProps>> = (\n  props\n) => {\n  const isClient = useDidMount()\n\n  if (!isClient) {\n    return null\n  }\n  return <_ModalBase {...props} />\n}\n\nexport const _ModalBase: React.FC<React.PropsWithChildren<ModalBaseProps>> = ({\n  children,\n  zIndex = DEFAULT_MODAL_Z_INDEX,\n  dialogProps = {},\n  onClose = () => null,\n  ...rest\n}) => {\n  const focusEl = useRef<HTMLDivElement | null>(null)\n  const backdropEl = useRef<HTMLDivElement | null>(null)\n\n  const handleMouseDown = (\n    event: React.MouseEvent<HTMLDivElement, MouseEvent>\n  ) => {\n    if (event.target === backdropEl.current) {\n      onClose()\n    }\n  }\n\n  useEffect(() => {\n    const handleKeydown = (event: KeyboardEvent) => {\n      switch (event.key) {\n        case \"Escape\":\n          // Prevent <esc> from interfering with the returned focus\n          event.preventDefault()\n          event.stopPropagation()\n\n          // Handle close\n          return onClose()\n        default:\n          break\n      }\n    }\n\n    document.addEventListener(\"keydown\", handleKeydown)\n    return () => {\n      document.removeEventListener(\"keydown\", handleKeydown)\n    }\n  }, [onClose])\n\n  // Sets to `innerHeight` so as to simulate `100vh` on iOS\n  const [maxHeight, setMaxHeight] = useState(window.innerHeight)\n\n  // Keeps `maxHeight` in sync\n  useEffect(() => {\n    const updateMaxHeight = () => {\n      setMaxHeight(window.innerHeight)\n    }\n\n    // Due to the dialog being portaled; we need to wait until the next tick\n    // before we can perform any operations that rely on the sizing of elements.\n    // Presumably anything that relies on this also listens to resize for updates.\n    setTimeout(() => {\n      window.dispatchEvent(new Event(\"resize\"))\n    }, 0)\n\n    window.addEventListener(\"resize\", updateMaxHeight, { passive: true })\n\n    return () => {\n      window.removeEventListener(\"resize\", updateMaxHeight)\n    }\n  }, [])\n\n  const { createPortal } = usePortal()\n\n  return createPortal(\n    <Container zIndex={zIndex} {...rest}>\n      <Focus ref={focusEl as any}>\n        <Backdrop ref={backdropEl as any} onMouseDown={handleMouseDown}>\n          <Dialog maxHeight={maxHeight} {...dialogProps}>\n            {children}\n          </Dialog>\n        </Backdrop>\n      </Focus>\n    </Container>\n  )\n}\n\nModalBase.displayName = \"ModalBase\"\n"],"mappings":"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"}