@artsy/palette 45.14.0-canary.1497.33065.0 → 45.14.0-canary.1497.33070.0

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

@@ -1 +1 @@
-{"version":3,"file":"Marquee.js","names":["React","useState","useEffect","useRef","styled","keyframes","variant","Flex","Box","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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"}
+{"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/Message/Message.js

@@ -5,7 +5,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import React from "react";
 import styled from "styled-components";
 import { variant } from "styled-system";
-import { Flex } from "../Flex";
+import { Flex, FlexProps } from "../Flex";
 import { Text } from "../Text";
 export var MESSAGE_VARIANTS = {
   default: {

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

@@ -1 +1 @@
-{"version":3,"file":"Message.js","names":["React","styled","variant","Flex","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;AACb,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,GAAGb,MAAM,CAACE,IAAI,CAAC,CAAAY,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,oCAC1Bf,OAAO,CAAC;EAAEgB,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,CACLlB,OAAO;IAAPA,OAAO,GAAAqB,YAAA,cAAG,SAAS,GAAAA,YAAA;IAChBC,IAAI,GAAAC,wBAAA,CAAAL,IAAA,EAAAM,SAAA;EAEP,IAAMlB,KAAK,GAAGN,OAAO,KAAK,SAAS,GAAG,QAAQ,GAAG,SAAS;EAE1D,oBACEF,KAAA,CAAA2B,aAAA,CAACb,SAAS,EAAAc,QAAA;IAACC,CAAC,EAAE,CAAE;IAAC3B,OAAO,EAAEA;EAAQ,GAAKsB,IAAI,gBACzCxB,KAAA,CAAA2B,aAAA,CAACvB,IAAI;IAACF,OAAO,EAAC,YAAY;IAACM,KAAK,EAAC;EAAc,GAC5Cc,KAAK,CACD,eAEPtB,KAAA,CAAA2B,aAAA,CAACvB,IAAI;IAACF,OAAO,EAAC,YAAY;IAACM,KAAK,EAAEA;EAAM,GACrCa,QAAQ,CACJ,CACG;AAEhB,CAAC;AAnBYF,OAAwD,CAAAH,WAAA"}
+{"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

@@ -1,6 +1,6 @@
 import React from "react";
 import { Text } from "../Text";
-import { Message, MESSAGE_VARIANTS } from "./Message";
+import { Message, MESSAGE_VARIANTS, MessageVariant } from "./Message";
 import { STORYBOOK_PROPS_BLOCKLIST } from "../../utils/storybookBlocklist";
 export default {
   component: Message,

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

@@ -1 +1 @@
-{"version":3,"file":"Message.story.js","names":["React","Text","Message","MESSAGE_VARIANTS","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;AAClC,SAASC,yBAAyB;AAElC,eAAe;EACbC,SAAS,EAAEH,OAAO;EAClBI,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,oBACJlB,KAAA,CAAAmB,aAAA;MAAKC,KAAK,EAAE;QAAEC,OAAO,EAAE,MAAM;QAAEC,aAAa,EAAE,QAAQ;QAAEC,GAAG,EAAE;MAAO;IAAE,GACnEC,MAAM,CAACC,IAAI,CAACtB,gBAAgB,CAAC,CAACuB,GAAG,CAAC,UAACC,OAAO;MAAA,oBACzC3B,KAAA,CAAAmB,aAAA,CAACjB,OAAO;QACN0B,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,oBACJlB,KAAA,CAAAmB,aAAA;MAAKC,KAAK,EAAE;QAAEC,OAAO,EAAE,MAAM;QAAEC,aAAa,EAAE,QAAQ;QAAEC,GAAG,EAAE;MAAO;IAAE,gBACpEvB,KAAA,CAAAmB,aAAA,CAACjB,OAAO;MAACyB,OAAO,EAAC;IAAM,GAAC,oCAAkC,CAAU,eACpE3B,KAAA,CAAAmB,aAAA,CAACjB,OAAO;MAACyB,OAAO,EAAC;IAAS,GAAC,gCAA8B,CAAU,eACnE3B,KAAA,CAAAmB,aAAA,CAACjB,OAAO;MAACyB,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,eACNf,KAAA,CAAAmB,aAAA,CAAClB,IAAI;MAAC0B,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"}
+{"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/Modal/ModalBase.js

@@ -10,9 +10,9 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 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 } from "styled-system";
+import { zIndex as systemZIndex, ZIndexProps } from "styled-system";
 import { usePortal } from "../../utils/usePortal";
-import { Flex } from "../Flex";
+import { Flex, FlexProps } from "../Flex";
 import { FocusOn } from "react-focus-on";
 import { useDidMount } from "../../utils";
 var Focus = styled(FocusOn).withConfig({

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

@@ -1 +1 @@
-{"version":3,"file":"ModalBase.js","names":["React","useEffect","useRef","useState","styled","zIndex","systemZIndex","usePortal","Flex","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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"}
+{"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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"}

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

@@ -15,7 +15,7 @@ import { Button } from "../Button";
 import { Input } from "../Input";
 import { Join } from "../Join";
 import { Spacer } from "../Spacer";
-import { ModalBase } from "./ModalBase";
+import { ModalBase, ModalBaseProps } from "./ModalBase";
 import { STORYBOOK_PROPS_BLOCKLIST } from "../../utils/storybookBlocklist";
 var Example = function Example() {
   var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},

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

@@ -1 +1 @@
-{"version":3,"file":"ModalBase.story.js","names":["React","useEffect","useState","Text","Box","Button","Input","Join","Spacer","ModalBase","STORYBOOK_PROPS_BLOCKLIST","Example","_ref","arguments","length","undefined","bodyChildren","dialogChildren","defer","rest","_objectWithoutProperties","_excluded","_useState","_useState2","_slicedToArray","open","setOpen","label","handleClose","_useState3","_useState4","deferred","setDeferred","setTimeout","createElement","Fragment","variant","onClick","_extends","onClose","background","p","width","height","style","border","textAlign","color","separator","y","placeholder","component","title","tags","parameters","docs","description","controls","exclude","Default","render","story","DeferredFocusables","Fullscreen","dialogProps","alignItems","justifyContent","Scrolling","Array","from","map","_","i","key"],"sources":["../../../../src/elements/Modal/ModalBase.story.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\"\nimport { Text } from \"../Text\"\nimport { Box } from \"../Box\"\nimport { Button } from \"../Button\"\nimport { Input } from \"../Input\"\nimport { Join } from \"../Join\"\nimport { Spacer } from \"../Spacer\"\nimport { ModalBase, ModalBaseProps } from \"./ModalBase\"\nimport { STORYBOOK_PROPS_BLOCKLIST } from \"../../utils/storybookBlocklist\"\n\nconst Example: React.FC<\n  React.PropsWithChildren<\n    ModalBaseProps & {\n      dialogChildren?: JSX.Element\n      bodyChildren?: JSX.Element\n      /** Simulates an input being added after render */\n      defer?: boolean\n    }\n  >\n> = ({ bodyChildren, dialogChildren, defer, ...rest } = {}) => {\n  const [open, setOpen] = useState(false)\n  const label = open ? \"opened\" : \"open\"\n  const handleClose = () => setOpen(false)\n\n  const [deferred, setDeferred] = useState(false)\n\n  useEffect(() => {\n    if (defer && open) {\n      setTimeout(() => {\n        setDeferred(true)\n      }, 1000)\n    }\n  }, [defer, open])\n\n  return (\n    <>\n      <Button variant=\"primaryGray\" onClick={() => setOpen(true)}>\n        {label}\n      </Button>\n\n      {bodyChildren}\n\n      {open && (\n        <ModalBase onClose={handleClose} {...rest}>\n          <Box\n            background=\"black\"\n            p={4}\n            width=\"100%\"\n            height=\"100%\"\n            style={{ border: \"2px solid red\" }}\n          >\n            <Box textAlign=\"center\">\n              <Text variant=\"sm-display\" color=\"mono0\">\n                <Join separator={<Spacer y={2} />}>\n                  <>Some example content. Click outside to close.</>\n                  <Button variant=\"primaryWhite\" onClick={handleClose}>\n                    Or click here to close.\n                  </Button>\n                  <Input placeholder=\"Just an example for focusing\" />\n                  <Input placeholder=\"Just an example for focusing\" />\n                  {dialogChildren}\n                  {deferred && <Input placeholder=\"Deferred input\" />}\n                </Join>\n              </Text>\n            </Box>\n          </Box>\n        </ModalBase>\n      )}\n    </>\n  )\n}\n\nexport default {\n  component: ModalBase,\n  title: \"Components/ModalBase\",\n  tags: [\"autodocs\"],\n  parameters: {\n    docs: {\n      description: {\n        component:\n          \"A base modal component that handles focus management, backdrop clicks, and accessibility.\",\n      },\n      controls: {\n        exclude: STORYBOOK_PROPS_BLOCKLIST,\n      },\n    },\n  },\n}\n\nexport const Default = {\n  render: () => <Example />,\n  parameters: {\n    docs: {\n      description: {\n        story: \"Default ModalBase with basic functionality.\",\n      },\n    },\n  },\n}\n\nexport const DeferredFocusables = {\n  render: () => <Example defer />,\n  parameters: {\n    docs: {\n      description: {\n        story:\n          \"ModalBase with deferred focusable elements that are added after render.\",\n      },\n    },\n  },\n}\n\nexport const Fullscreen = {\n  render: () => (\n    <Example\n      dialogProps={{\n        width: \"100%\",\n        height: \"100%\",\n        background: \"black\",\n        alignItems: \"center\",\n        justifyContent: \"center\",\n      }}\n    />\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"ModalBase in fullscreen mode.\",\n      },\n    },\n  },\n}\n\nexport const Scrolling = {\n  render: () => (\n    <Example\n      bodyChildren={\n        <>\n          {Array.from(Array(100)).map((_, i) => (\n            <div key={i}>content should not scroll when modal is open</div>\n          ))}\n        </>\n      }\n      dialogChildren={\n        <>\n          {Array.from(Array(100)).map((_, i) => (\n            <div key={i}>content should be scrollable</div>\n          ))}\n        </>\n      }\n    />\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story:\n          \"ModalBase with scrollable content inside while body scroll is prevented.\",\n      },\n    },\n  },\n}\n"],"mappings":"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"}
+{"version":3,"file":"ModalBase.story.js","names":["React","useEffect","useState","Text","Box","Button","Input","Join","Spacer","ModalBase","ModalBaseProps","STORYBOOK_PROPS_BLOCKLIST","Example","_ref","arguments","length","undefined","bodyChildren","dialogChildren","defer","rest","_objectWithoutProperties","_excluded","_useState","_useState2","_slicedToArray","open","setOpen","label","handleClose","_useState3","_useState4","deferred","setDeferred","setTimeout","createElement","Fragment","variant","onClick","_extends","onClose","background","p","width","height","style","border","textAlign","color","separator","y","placeholder","component","title","tags","parameters","docs","description","controls","exclude","Default","render","story","DeferredFocusables","Fullscreen","dialogProps","alignItems","justifyContent","Scrolling","Array","from","map","_","i","key"],"sources":["../../../../src/elements/Modal/ModalBase.story.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\"\nimport { Text } from \"../Text\"\nimport { Box } from \"../Box\"\nimport { Button } from \"../Button\"\nimport { Input } from \"../Input\"\nimport { Join } from \"../Join\"\nimport { Spacer } from \"../Spacer\"\nimport { ModalBase, ModalBaseProps } from \"./ModalBase\"\nimport { STORYBOOK_PROPS_BLOCKLIST } from \"../../utils/storybookBlocklist\"\n\nconst Example: React.FC<\n  React.PropsWithChildren<\n    ModalBaseProps & {\n      dialogChildren?: JSX.Element\n      bodyChildren?: JSX.Element\n      /** Simulates an input being added after render */\n      defer?: boolean\n    }\n  >\n> = ({ bodyChildren, dialogChildren, defer, ...rest } = {}) => {\n  const [open, setOpen] = useState(false)\n  const label = open ? \"opened\" : \"open\"\n  const handleClose = () => setOpen(false)\n\n  const [deferred, setDeferred] = useState(false)\n\n  useEffect(() => {\n    if (defer && open) {\n      setTimeout(() => {\n        setDeferred(true)\n      }, 1000)\n    }\n  }, [defer, open])\n\n  return (\n    <>\n      <Button variant=\"primaryGray\" onClick={() => setOpen(true)}>\n        {label}\n      </Button>\n\n      {bodyChildren}\n\n      {open && (\n        <ModalBase onClose={handleClose} {...rest}>\n          <Box\n            background=\"black\"\n            p={4}\n            width=\"100%\"\n            height=\"100%\"\n            style={{ border: \"2px solid red\" }}\n          >\n            <Box textAlign=\"center\">\n              <Text variant=\"sm-display\" color=\"mono0\">\n                <Join separator={<Spacer y={2} />}>\n                  <>Some example content. Click outside to close.</>\n                  <Button variant=\"primaryWhite\" onClick={handleClose}>\n                    Or click here to close.\n                  </Button>\n                  <Input placeholder=\"Just an example for focusing\" />\n                  <Input placeholder=\"Just an example for focusing\" />\n                  {dialogChildren}\n                  {deferred && <Input placeholder=\"Deferred input\" />}\n                </Join>\n              </Text>\n            </Box>\n          </Box>\n        </ModalBase>\n      )}\n    </>\n  )\n}\n\nexport default {\n  component: ModalBase,\n  title: \"Components/ModalBase\",\n  tags: [\"autodocs\"],\n  parameters: {\n    docs: {\n      description: {\n        component:\n          \"A base modal component that handles focus management, backdrop clicks, and accessibility.\",\n      },\n      controls: {\n        exclude: STORYBOOK_PROPS_BLOCKLIST,\n      },\n    },\n  },\n}\n\nexport const Default = {\n  render: () => <Example />,\n  parameters: {\n    docs: {\n      description: {\n        story: \"Default ModalBase with basic functionality.\",\n      },\n    },\n  },\n}\n\nexport const DeferredFocusables = {\n  render: () => <Example defer />,\n  parameters: {\n    docs: {\n      description: {\n        story:\n          \"ModalBase with deferred focusable elements that are added after render.\",\n      },\n    },\n  },\n}\n\nexport const Fullscreen = {\n  render: () => (\n    <Example\n      dialogProps={{\n        width: \"100%\",\n        height: \"100%\",\n        background: \"black\",\n        alignItems: \"center\",\n        justifyContent: \"center\",\n      }}\n    />\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"ModalBase in fullscreen mode.\",\n      },\n    },\n  },\n}\n\nexport const Scrolling = {\n  render: () => (\n    <Example\n      bodyChildren={\n        <>\n          {Array.from(Array(100)).map((_, i) => (\n            <div key={i}>content should not scroll when modal is open</div>\n          ))}\n        </>\n      }\n      dialogChildren={\n        <>\n          {Array.from(Array(100)).map((_, i) => (\n            <div key={i}>content should be scrollable</div>\n          ))}\n        </>\n      }\n    />\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story:\n          \"ModalBase with scrollable content inside while body scroll is prevented.\",\n      },\n    },\n  },\n}\n"],"mappings":";;;;;;;;;;AAAA,OAAOA,KAAK,IAAIC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAClD,SAASC,IAAI;AACb,SAASC,GAAG;AACZ,SAASC,MAAM;AACf,SAASC,KAAK;AACd,SAASC,IAAI;AACb,SAASC,MAAM;AACf,SAASC,SAAS,EAAEC,cAAc;AAClC,SAASC,yBAAyB;AAElC,IAAMC,OASL,GAAG,SATEA,OASLA,CAAA,EAA8D;EAAA,IAAAC,IAAA,GAAAC,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAP,CAAC,CAAC;IAAnDG,YAAY,GAAAJ,IAAA,CAAZI,YAAY;IAAEC,cAAc,GAAAL,IAAA,CAAdK,cAAc;IAAEC,KAAK,GAAAN,IAAA,CAALM,KAAK;IAAKC,IAAI,GAAAC,wBAAA,CAAAR,IAAA,EAAAS,SAAA;EACjD,IAAAC,SAAA,GAAwBrB,QAAQ,CAAC,KAAK,CAAC;IAAAsB,UAAA,GAAAC,cAAA,CAAAF,SAAA;IAAhCG,IAAI,GAAAF,UAAA;IAAEG,OAAO,GAAAH,UAAA;EACpB,IAAMI,KAAK,GAAGF,IAAI,GAAG,QAAQ,GAAG,MAAM;EACtC,IAAMG,WAAW,GAAG,SAAdA,WAAWA,CAAA;IAAA,OAASF,OAAO,CAAC,KAAK,CAAC;EAAA;EAExC,IAAAG,UAAA,GAAgC5B,QAAQ,CAAC,KAAK,CAAC;IAAA6B,UAAA,GAAAN,cAAA,CAAAK,UAAA;IAAxCE,QAAQ,GAAAD,UAAA;IAAEE,WAAW,GAAAF,UAAA;EAE5B9B,SAAS,CAAC,YAAM;IACd,IAAIkB,KAAK,IAAIO,IAAI,EAAE;MACjBQ,UAAU,CAAC,YAAM;QACfD,WAAW,CAAC,IAAI,CAAC;MACnB,CAAC,EAAE,IAAI,CAAC;IACV;EACF,CAAC,EAAE,CAACd,KAAK,EAAEO,IAAI,CAAC,CAAC;EAEjB,oBACE1B,KAAA,CAAAmC,aAAA,CAAAnC,KAAA,CAAAoC,QAAA,qBACEpC,KAAA,CAAAmC,aAAA,CAAC9B,MAAM;IAACgC,OAAO,EAAC,aAAa;IAACC,OAAO,EAAE,SAATA,OAAOA,CAAA;MAAA,OAAQX,OAAO,CAAC,IAAI,CAAC;IAAA;EAAC,GACxDC,KAAK,CACC,EAERX,YAAY,EAEZS,IAAI,iBACH1B,KAAA,CAAAmC,aAAA,CAAC1B,SAAS,EAAA8B,QAAA;IAACC,OAAO,EAAEX;EAAY,GAAKT,IAAI,gBACvCpB,KAAA,CAAAmC,aAAA,CAAC/B,GAAG;IACFqC,UAAU,EAAC,OAAO;IAClBC,CAAC,EAAE,CAAE;IACLC,KAAK,EAAC,MAAM;IACZC,MAAM,EAAC,MAAM;IACbC,KAAK,EAAE;MAAEC,MAAM,EAAE;IAAgB;EAAE,gBAEnC9C,KAAA,CAAAmC,aAAA,CAAC/B,GAAG;IAAC2C,SAAS,EAAC;EAAQ,gBACrB/C,KAAA,CAAAmC,aAAA,CAAChC,IAAI;IAACkC,OAAO,EAAC,YAAY;IAACW,KAAK,EAAC;EAAO,gBACtChD,KAAA,CAAAmC,aAAA,CAAC5B,IAAI;IAAC0C,SAAS,eAAEjD,KAAA,CAAAmC,aAAA,CAAC3B,MAAM;MAAC0C,CAAC,EAAE;IAAE;EAAI,gBAChClD,KAAA,CAAAmC,aAAA,CAAAnC,KAAA,CAAAoC,QAAA,QAAE,+CAA6C,CAAG,eAClDpC,KAAA,CAAAmC,aAAA,CAAC9B,MAAM;IAACgC,OAAO,EAAC,cAAc;IAACC,OAAO,EAAET;EAAY,GAAC,yBAErD,CAAS,eACT7B,KAAA,CAAAmC,aAAA,CAAC7B,KAAK;IAAC6C,WAAW,EAAC;EAA8B,EAAG,eACpDnD,KAAA,CAAAmC,aAAA,CAAC7B,KAAK;IAAC6C,WAAW,EAAC;EAA8B,EAAG,EACnDjC,cAAc,EACdc,QAAQ,iBAAIhC,KAAA,CAAAmC,aAAA,CAAC7B,KAAK;IAAC6C,WAAW,EAAC;EAAgB,EAAG,CAC9C,CACF,CACH,CACF,CAET,CACA;AAEP,CAAC;AAED,eAAe;EACbC,SAAS,EAAE3C,SAAS;EACpB4C,KAAK,EAAE,sBAAsB;EAC7BC,IAAI,EAAE,CAAC,UAAU,CAAC;EAClBC,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXL,SAAS,EACP;MACJ,CAAC;MACDM,QAAQ,EAAE;QACRC,OAAO,EAAEhD;MACX;IACF;EACF;AACF,CAAC;AAED,OAAO,IAAMiD,OAAO,GAAG;EACrBC,MAAM,EAAE,SAARA,MAAMA,CAAA;IAAA,oBAAQ7D,KAAA,CAAAmC,aAAA,CAACvB,OAAO,OAAG;EAAA;EACzB2C,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXK,KAAK,EAAE;MACT;IACF;EACF;AACF,CAAC;AAED,OAAO,IAAMC,kBAAkB,GAAG;EAChCF,MAAM,EAAE,SAARA,MAAMA,CAAA;IAAA,oBAAQ7D,KAAA,CAAAmC,aAAA,CAACvB,OAAO;MAACO,KAAK;IAAA,EAAG;EAAA;EAC/BoC,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXK,KAAK,EACH;MACJ;IACF;EACF;AACF,CAAC;AAED,OAAO,IAAME,UAAU,GAAG;EACxBH,MAAM,EAAE,SAARA,MAAMA,CAAA;IAAA,oBACJ7D,KAAA,CAAAmC,aAAA,CAACvB,OAAO;MACNqD,WAAW,EAAE;QACXtB,KAAK,EAAE,MAAM;QACbC,MAAM,EAAE,MAAM;QACdH,UAAU,EAAE,OAAO;QACnByB,UAAU,EAAE,QAAQ;QACpBC,cAAc,EAAE;MAClB;IAAE,EACF;EAAA,CACH;EACDZ,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXK,KAAK,EAAE;MACT;IACF;EACF;AACF,CAAC;AAED,OAAO,IAAMM,SAAS,GAAG;EACvBP,MAAM,EAAE,SAARA,MAAMA,CAAA;IAAA,oBACJ7D,KAAA,CAAAmC,aAAA,CAACvB,OAAO;MACNK,YAAY,eACVjB,KAAA,CAAAmC,aAAA,CAAAnC,KAAA,CAAAoC,QAAA,QACGiC,KAAK,CAACC,IAAI,CAACD,KAAK,CAAC,GAAG,CAAC,CAAC,CAACE,GAAG,CAAC,UAACC,CAAC,EAAEC,CAAC;QAAA,oBAC/BzE,KAAA,CAAAmC,aAAA;UAAKuC,GAAG,EAAED;QAAE,GAAC,8CAA4C,CAAM;MAAA,CAChE,CAAC,CAEL;MACDvD,cAAc,eACZlB,KAAA,CAAAmC,aAAA,CAAAnC,KAAA,CAAAoC,QAAA,QACGiC,KAAK,CAACC,IAAI,CAACD,KAAK,CAAC,GAAG,CAAC,CAAC,CAACE,GAAG,CAAC,UAACC,CAAC,EAAEC,CAAC;QAAA,oBAC/BzE,KAAA,CAAAmC,aAAA;UAAKuC,GAAG,EAAED;QAAE,GAAC,8BAA4B,CAAM;MAAA,CAChD,CAAC;IAEL,EACD;EAAA,CACH;EACDlB,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXK,KAAK,EACH;MACJ;IACF;EACF;AACF,CAAC"}

package/dist/esm/elements/ModalDialog/ModalDialog.js

@@ -10,8 +10,8 @@ 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 from "react";
-import { ModalBase } from "../Modal";
-import { ModalDialogContent } from "./ModalDialogContent";
+import { ModalBase, ModalBaseProps } from "../Modal";
+import { ModalDialogContent, ModalDialogContentProps } from "./ModalDialogContent";
 import { splitBoxProps } from "../Box";
 import { useDidMount } from "../../utils/useDidMount";
 import { useTheme } from "../../Theme";

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

@@ -1 +1 @@
-{"version":3,"file":"ModalDialog.js","names":["React","ModalBase","ModalDialogContent","splitBoxProps","useDidMount","useTheme","ModalDialog","_ref","children","footer","hasLogo","leftPanel","onClose","rightPanel","title","header","zIndex","rest","_objectWithoutProperties","_excluded","isMounted","clearCallStack","_splitBoxProps","_splitBoxProps2","_slicedToArray","_splitBoxProps2$","width","boxProps","_excluded2","modalProps","_useTheme","theme","createElement","_extends","style","backgroundColor","effects","backdrop","transition","dialogProps","opacity","transform","displayName"],"sources":["../../../../src/elements/ModalDialog/ModalDialog.tsx"],"sourcesContent":["import React from \"react\"\nimport { ModalBase, ModalBaseProps } from \"../Modal\"\nimport {\n  ModalDialogContent,\n  ModalDialogContentProps,\n} from \"./ModalDialogContent\"\nimport { splitBoxProps } from \"../Box\"\nimport { useDidMount } from \"../../utils/useDidMount\"\nimport { useTheme } from \"../../Theme\"\n\nexport type ModalDialogProps = Omit<ModalBaseProps, \"title\"> &\n  ModalDialogContentProps & {\n    leftPanel?: React.ReactNode\n    rightPanel?: React.ReactNode\n  }\n\nexport const ModalDialog: React.FC<React.PropsWithChildren<ModalDialogProps>> = ({\n  children,\n  footer,\n  hasLogo,\n  leftPanel,\n  onClose,\n  rightPanel,\n  title,\n  header,\n  zIndex,\n  ...rest\n}) => {\n  const isMounted = useDidMount({ clearCallStack: true })\n\n  const [{ width, ...boxProps }, modalProps] = splitBoxProps(rest)\n\n  const { theme } = useTheme()\n\n  return (\n    <ModalBase\n      onClose={onClose}\n      style={\n        isMounted\n          ? {\n              backgroundColor: theme.effects.backdrop,\n              transition: \"background-color 250ms\",\n            }\n          : { backgroundColor: \"transparent\" }\n      }\n      dialogProps={{ width: width ?? 480 }}\n      zIndex={zIndex}\n      {...modalProps}\n    >\n      <ModalDialogContent\n        footer={footer}\n        hasLogo={hasLogo}\n        leftPanel={leftPanel}\n        onClose={onClose}\n        rightPanel={rightPanel}\n        title={title}\n        header={header}\n        width=\"100%\"\n        style={\n          isMounted\n            ? {\n                opacity: 1,\n                transition: \"opacity 250ms, transform 250ms\",\n              }\n            : { opacity: 0, transform: \"translateY(10px)\" }\n        }\n        {...boxProps}\n      >\n        {children}\n      </ModalDialogContent>\n    </ModalBase>\n  )\n}\n"],"mappings":";;;;;;;;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,SAAS;AAClB,SACEC,kBAAkB;AAGpB,SAASC,aAAa;AACtB,SAASC,WAAW;AACpB,SAASC,QAAQ;AAQjB,OAAO,IAAMC,WAAgE,GAAG,SAAnEA,WAAgEA,CAAAC,IAAA,EAWvE;EAAA,IAVJC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IACRC,MAAM,GAAAF,IAAA,CAANE,MAAM;IACNC,OAAO,GAAAH,IAAA,CAAPG,OAAO;IACPC,SAAS,GAAAJ,IAAA,CAATI,SAAS;IACTC,OAAO,GAAAL,IAAA,CAAPK,OAAO;IACPC,UAAU,GAAAN,IAAA,CAAVM,UAAU;IACVC,KAAK,GAAAP,IAAA,CAALO,KAAK;IACLC,MAAM,GAAAR,IAAA,CAANQ,MAAM;IACNC,MAAM,GAAAT,IAAA,CAANS,MAAM;IACHC,IAAI,GAAAC,wBAAA,CAAAX,IAAA,EAAAY,SAAA;EAEP,IAAMC,SAAS,GAAGhB,WAAW,CAAC;IAAEiB,cAAc,EAAE;EAAK,CAAC,CAAC;EAEvD,IAAAC,cAAA,GAA6CnB,aAAa,CAACc,IAAI,CAAC;IAAAM,eAAA,GAAAC,cAAA,CAAAF,cAAA;IAAAG,gBAAA,GAAAF,eAAA;IAAvDG,KAAK,GAAAD,gBAAA,CAALC,KAAK;IAAKC,QAAQ,GAAAT,wBAAA,CAAAO,gBAAA,EAAAG,UAAA;IAAIC,UAAU,GAAAN,eAAA;EAEzC,IAAAO,SAAA,GAAkBzB,QAAQ,EAAE;IAApB0B,KAAK,GAAAD,SAAA,CAALC,KAAK;EAEb,oBACE/B,KAAA,CAAAgC,aAAA,CAAC/B,SAAS,EAAAgC,QAAA;IACRrB,OAAO,EAAEA,OAAQ;IACjBsB,KAAK,EACHd,SAAS,GACL;MACEe,eAAe,EAAEJ,KAAK,CAACK,OAAO,CAACC,QAAQ;MACvCC,UAAU,EAAE;IACd,CAAC,GACD;MAAEH,eAAe,EAAE;IAAc,CACtC;IACDI,WAAW,EAAE;MAAEb,KAAK,EAAEA,KAAK,aAALA,KAAK,cAALA,KAAK,GAAI;IAAI,CAAE;IACrCV,MAAM,EAAEA;EAAO,GACXa,UAAU,gBAEd7B,KAAA,CAAAgC,aAAA,CAAC9B,kBAAkB,EAAA+B,QAAA;IACjBxB,MAAM,EAAEA,MAAO;IACfC,OAAO,EAAEA,OAAQ;IACjBC,SAAS,EAAEA,SAAU;IACrBC,OAAO,EAAEA,OAAQ;IACjBC,UAAU,EAAEA,UAAW;IACvBC,KAAK,EAAEA,KAAM;IACbC,MAAM,EAAEA,MAAO;IACfW,KAAK,EAAC,MAAM;IACZQ,KAAK,EACHd,SAAS,GACL;MACEoB,OAAO,EAAE,CAAC;MACVF,UAAU,EAAE;IACd,CAAC,GACD;MAAEE,OAAO,EAAE,CAAC;MAAEC,SAAS,EAAE;IAAmB;EACjD,GACGd,QAAQ,GAEXnB,QAAQ,CACU,CACX;AAEhB,CAAC;AAxDYF,WAAgE,CAAAoC,WAAA"}
+{"version":3,"file":"ModalDialog.js","names":["React","ModalBase","ModalBaseProps","ModalDialogContent","ModalDialogContentProps","splitBoxProps","useDidMount","useTheme","ModalDialog","_ref","children","footer","hasLogo","leftPanel","onClose","rightPanel","title","header","zIndex","rest","_objectWithoutProperties","_excluded","isMounted","clearCallStack","_splitBoxProps","_splitBoxProps2","_slicedToArray","_splitBoxProps2$","width","boxProps","_excluded2","modalProps","_useTheme","theme","createElement","_extends","style","backgroundColor","effects","backdrop","transition","dialogProps","opacity","transform","displayName"],"sources":["../../../../src/elements/ModalDialog/ModalDialog.tsx"],"sourcesContent":["import React from \"react\"\nimport { ModalBase, ModalBaseProps } from \"../Modal\"\nimport {\n  ModalDialogContent,\n  ModalDialogContentProps,\n} from \"./ModalDialogContent\"\nimport { splitBoxProps } from \"../Box\"\nimport { useDidMount } from \"../../utils/useDidMount\"\nimport { useTheme } from \"../../Theme\"\n\nexport type ModalDialogProps = Omit<ModalBaseProps, \"title\"> &\n  ModalDialogContentProps & {\n    leftPanel?: React.ReactNode\n    rightPanel?: React.ReactNode\n  }\n\nexport const ModalDialog: React.FC<React.PropsWithChildren<ModalDialogProps>> = ({\n  children,\n  footer,\n  hasLogo,\n  leftPanel,\n  onClose,\n  rightPanel,\n  title,\n  header,\n  zIndex,\n  ...rest\n}) => {\n  const isMounted = useDidMount({ clearCallStack: true })\n\n  const [{ width, ...boxProps }, modalProps] = splitBoxProps(rest)\n\n  const { theme } = useTheme()\n\n  return (\n    <ModalBase\n      onClose={onClose}\n      style={\n        isMounted\n          ? {\n              backgroundColor: theme.effects.backdrop,\n              transition: \"background-color 250ms\",\n            }\n          : { backgroundColor: \"transparent\" }\n      }\n      dialogProps={{ width: width ?? 480 }}\n      zIndex={zIndex}\n      {...modalProps}\n    >\n      <ModalDialogContent\n        footer={footer}\n        hasLogo={hasLogo}\n        leftPanel={leftPanel}\n        onClose={onClose}\n        rightPanel={rightPanel}\n        title={title}\n        header={header}\n        width=\"100%\"\n        style={\n          isMounted\n            ? {\n                opacity: 1,\n                transition: \"opacity 250ms, transform 250ms\",\n              }\n            : { opacity: 0, transform: \"translateY(10px)\" }\n        }\n        {...boxProps}\n      >\n        {children}\n      </ModalDialogContent>\n    </ModalBase>\n  )\n}\n"],"mappings":";;;;;;;;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,SAAS,EAAEC,cAAc;AAClC,SACEC,kBAAkB,EAClBC,uBAAuB;AAEzB,SAASC,aAAa;AACtB,SAASC,WAAW;AACpB,SAASC,QAAQ;AAQjB,OAAO,IAAMC,WAAgE,GAAG,SAAnEA,WAAgEA,CAAAC,IAAA,EAWvE;EAAA,IAVJC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IACRC,MAAM,GAAAF,IAAA,CAANE,MAAM;IACNC,OAAO,GAAAH,IAAA,CAAPG,OAAO;IACPC,SAAS,GAAAJ,IAAA,CAATI,SAAS;IACTC,OAAO,GAAAL,IAAA,CAAPK,OAAO;IACPC,UAAU,GAAAN,IAAA,CAAVM,UAAU;IACVC,KAAK,GAAAP,IAAA,CAALO,KAAK;IACLC,MAAM,GAAAR,IAAA,CAANQ,MAAM;IACNC,MAAM,GAAAT,IAAA,CAANS,MAAM;IACHC,IAAI,GAAAC,wBAAA,CAAAX,IAAA,EAAAY,SAAA;EAEP,IAAMC,SAAS,GAAGhB,WAAW,CAAC;IAAEiB,cAAc,EAAE;EAAK,CAAC,CAAC;EAEvD,IAAAC,cAAA,GAA6CnB,aAAa,CAACc,IAAI,CAAC;IAAAM,eAAA,GAAAC,cAAA,CAAAF,cAAA;IAAAG,gBAAA,GAAAF,eAAA;IAAvDG,KAAK,GAAAD,gBAAA,CAALC,KAAK;IAAKC,QAAQ,GAAAT,wBAAA,CAAAO,gBAAA,EAAAG,UAAA;IAAIC,UAAU,GAAAN,eAAA;EAEzC,IAAAO,SAAA,GAAkBzB,QAAQ,EAAE;IAApB0B,KAAK,GAAAD,SAAA,CAALC,KAAK;EAEb,oBACEjC,KAAA,CAAAkC,aAAA,CAACjC,SAAS,EAAAkC,QAAA;IACRrB,OAAO,EAAEA,OAAQ;IACjBsB,KAAK,EACHd,SAAS,GACL;MACEe,eAAe,EAAEJ,KAAK,CAACK,OAAO,CAACC,QAAQ;MACvCC,UAAU,EAAE;IACd,CAAC,GACD;MAAEH,eAAe,EAAE;IAAc,CACtC;IACDI,WAAW,EAAE;MAAEb,KAAK,EAAEA,KAAK,aAALA,KAAK,cAALA,KAAK,GAAI;IAAI,CAAE;IACrCV,MAAM,EAAEA;EAAO,GACXa,UAAU,gBAEd/B,KAAA,CAAAkC,aAAA,CAAC/B,kBAAkB,EAAAgC,QAAA;IACjBxB,MAAM,EAAEA,MAAO;IACfC,OAAO,EAAEA,OAAQ;IACjBC,SAAS,EAAEA,SAAU;IACrBC,OAAO,EAAEA,OAAQ;IACjBC,UAAU,EAAEA,UAAW;IACvBC,KAAK,EAAEA,KAAM;IACbC,MAAM,EAAEA,MAAO;IACfW,KAAK,EAAC,MAAM;IACZQ,KAAK,EACHd,SAAS,GACL;MACEoB,OAAO,EAAE,CAAC;MACVF,UAAU,EAAE;IACd,CAAC,GACD;MAAEE,OAAO,EAAE,CAAC;MAAEC,SAAS,EAAE;IAAmB;EACjD,GACGd,QAAQ,GAEXnB,QAAQ,CACU,CACX;AAEhB,CAAC;AAxDYF,WAAgE,CAAAoC,WAAA"}

package/dist/esm/elements/ModalDialog/ModalDialogContent.js

@@ -2,9 +2,9 @@ var _excluded = ["children", "footer", "hasLogo", "leftPanel", "onClose", "right
 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, { isValidElement } from "react";
-import { Clickable } from "../Clickable";
-import { Box } from "../Box";
+import React, { FC, isValidElement } from "react";
+import { Clickable, ClickableProps } from "../Clickable";
+import { Box, BoxProps } from "../Box";
 import { Flex } from "../Flex";
 import { Text } from "../Text";
 import CloseIcon from "@artsy/icons/CloseIcon";

package/dist/esm/elements/ModalDialog/ModalDialogContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalDialogContent.js","names":["React","isValidElement","Clickable","Box","Flex","Text","CloseIcon","ArtsyLogoIcon","useSentinelVisibility","Spacer","styled","themeGet","useTheme","ModalDialogContent","_ref","children","footer","hasLogo","leftPanel","onClose","rightPanel","title","header","rest","_objectWithoutProperties","_excluded","_useSentinelVisibilit","topSentinel","sentinel","isAtTop","isSentinelVisible","_useSentinelVisibilit2","bottomSentinel","isAtBottom","_useTheme","theme","createElement","_extends","bg","m","style","boxShadow","effects","dropShadow","flexDirection","overflow","width","zIndex","transition","undefined","alignItems","justifyContent","display","height","y","variant","lineClamp","hyphenate","ModalClose","onClick","px","pb","flex","WebkitOverflowScrolling","p","displayName","props","Close","ml","fill","withConfig","componentId"],"sources":["../../../../src/elements/ModalDialog/ModalDialogContent.tsx"],"sourcesContent":["import React, { FC, isValidElement } from \"react\"\nimport { Clickable, ClickableProps } from \"../Clickable\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Flex } from \"../Flex\"\nimport { Text } from \"../Text\"\nimport CloseIcon from \"@artsy/icons/CloseIcon\"\nimport ArtsyLogoIcon from \"@artsy/icons/ArtsyLogoIcon\"\nimport { useSentinelVisibility } from \"../../utils/useSentinelVisibility\"\nimport { Spacer } from \"../Spacer\"\nimport styled from \"styled-components\"\nimport { themeGet } from \"@styled-system/theme-get\"\nimport { useTheme } from \"../../Theme\"\n\nexport interface ModalDialogContentProps\n  extends BoxProps,\n    Omit<React.HTMLAttributes<HTMLDivElement>, \"title\"> {\n  children: React.ReactNode\n  footer?: React.ReactNode\n  hasLogo?: boolean\n  leftPanel?: React.ReactNode\n  onClose: () => void\n  rightPanel?: React.ReactNode\n  title?: React.ReactNode\n  header?: React.ReactNode\n}\n\nexport const ModalDialogContent: React.FC<\n  React.PropsWithChildren<ModalDialogContentProps>\n> = ({\n  children,\n  footer,\n  hasLogo,\n  leftPanel,\n  onClose,\n  rightPanel,\n  title,\n  header,\n  ...rest\n}) => {\n  const {\n    sentinel: topSentinel,\n    isSentinelVisible: isAtTop,\n  } = useSentinelVisibility()\n\n  const {\n    sentinel: bottomSentinel,\n    isSentinelVisible: isAtBottom,\n  } = useSentinelVisibility()\n\n  const { theme } = useTheme()\n\n  return (\n    <Flex\n      bg=\"mono0\"\n      m={2}\n      style={{ boxShadow: theme.effects.dropShadow }}\n      {...rest}\n    >\n      {leftPanel}\n\n      <Flex flexDirection=\"column\" overflow=\"hidden\" width=\"100%\">\n        <Flex\n          flexDirection=\"column\"\n          zIndex={1}\n          style={{\n            transition: \"box-shadow 250ms\",\n            boxShadow: isAtTop ? theme.effects.dropShadow : undefined,\n          }}\n        >\n          {isValidElement(title) ? (\n            title\n          ) : (\n            <Flex alignItems=\"flex-start\" justifyContent=\"space-between\">\n              {(title || hasLogo) && (\n                <Box m={2}>\n                  {hasLogo && (\n                    <ArtsyLogoIcon display=\"block\" width={75} height={26} />\n                  )}\n\n                  {hasLogo && title && <Spacer y={2} />}\n\n                  {title && (\n                    <Text variant=\"lg-display\" lineClamp={6} hyphenate>\n                      {title}\n                    </Text>\n                  )}\n                </Box>\n              )}\n\n              <ModalClose onClick={onClose} />\n            </Flex>\n          )}\n\n          {header && (\n            <Box px={2} pb={2}>\n              {header}\n            </Box>\n          )}\n        </Flex>\n\n        <Box\n          px={2}\n          pb={2}\n          flex={1}\n          overflow=\"auto\"\n          style={{ WebkitOverflowScrolling: \"touch\" }}\n        >\n          {topSentinel}\n          {children}\n          {bottomSentinel}\n        </Box>\n\n        {footer && (\n          <Box\n            p={2}\n            style={{\n              transition: \"box-shadow 250ms\",\n              boxShadow: isAtBottom ? theme.effects.dropShadow : undefined,\n            }}\n          >\n            {footer}\n          </Box>\n        )}\n      </Flex>\n\n      {rightPanel}\n    </Flex>\n  )\n}\n\nexport type ModalCloseProps = ClickableProps\n\nexport const ModalClose: FC<React.PropsWithChildren<ModalCloseProps>> = (\n  props\n) => {\n  return (\n    <Close p={2} ml=\"auto\" aria-label=\"Close\" {...props}>\n      <CloseIcon fill=\"currentColor\" display=\"block\" />\n    </Close>\n  )\n}\n\nconst Close = styled(Clickable)`\n  color: ${themeGet(\"colors.mono100\")};\n\n  &:focus,\n  &:focus-visible {\n    outline: none;\n    color: ${themeGet(\"colors.mono60\")};\n  }\n`\n"],"mappings":"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"}
+{"version":3,"file":"ModalDialogContent.js","names":["React","FC","isValidElement","Clickable","ClickableProps","Box","BoxProps","Flex","Text","CloseIcon","ArtsyLogoIcon","useSentinelVisibility","Spacer","styled","themeGet","useTheme","ModalDialogContent","_ref","children","footer","hasLogo","leftPanel","onClose","rightPanel","title","header","rest","_objectWithoutProperties","_excluded","_useSentinelVisibilit","topSentinel","sentinel","isAtTop","isSentinelVisible","_useSentinelVisibilit2","bottomSentinel","isAtBottom","_useTheme","theme","createElement","_extends","bg","m","style","boxShadow","effects","dropShadow","flexDirection","overflow","width","zIndex","transition","undefined","alignItems","justifyContent","display","height","y","variant","lineClamp","hyphenate","ModalClose","onClick","px","pb","flex","WebkitOverflowScrolling","p","displayName","props","Close","ml","fill","withConfig","componentId"],"sources":["../../../../src/elements/ModalDialog/ModalDialogContent.tsx"],"sourcesContent":["import React, { FC, isValidElement } from \"react\"\nimport { Clickable, ClickableProps } from \"../Clickable\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Flex } from \"../Flex\"\nimport { Text } from \"../Text\"\nimport CloseIcon from \"@artsy/icons/CloseIcon\"\nimport ArtsyLogoIcon from \"@artsy/icons/ArtsyLogoIcon\"\nimport { useSentinelVisibility } from \"../../utils/useSentinelVisibility\"\nimport { Spacer } from \"../Spacer\"\nimport styled from \"styled-components\"\nimport { themeGet } from \"@styled-system/theme-get\"\nimport { useTheme } from \"../../Theme\"\n\nexport interface ModalDialogContentProps\n  extends BoxProps,\n    Omit<React.HTMLAttributes<HTMLDivElement>, \"title\"> {\n  children: React.ReactNode\n  footer?: React.ReactNode\n  hasLogo?: boolean\n  leftPanel?: React.ReactNode\n  onClose: () => void\n  rightPanel?: React.ReactNode\n  title?: React.ReactNode\n  header?: React.ReactNode\n}\n\nexport const ModalDialogContent: React.FC<\n  React.PropsWithChildren<ModalDialogContentProps>\n> = ({\n  children,\n  footer,\n  hasLogo,\n  leftPanel,\n  onClose,\n  rightPanel,\n  title,\n  header,\n  ...rest\n}) => {\n  const {\n    sentinel: topSentinel,\n    isSentinelVisible: isAtTop,\n  } = useSentinelVisibility()\n\n  const {\n    sentinel: bottomSentinel,\n    isSentinelVisible: isAtBottom,\n  } = useSentinelVisibility()\n\n  const { theme } = useTheme()\n\n  return (\n    <Flex\n      bg=\"mono0\"\n      m={2}\n      style={{ boxShadow: theme.effects.dropShadow }}\n      {...rest}\n    >\n      {leftPanel}\n\n      <Flex flexDirection=\"column\" overflow=\"hidden\" width=\"100%\">\n        <Flex\n          flexDirection=\"column\"\n          zIndex={1}\n          style={{\n            transition: \"box-shadow 250ms\",\n            boxShadow: isAtTop ? theme.effects.dropShadow : undefined,\n          }}\n        >\n          {isValidElement(title) ? (\n            title\n          ) : (\n            <Flex alignItems=\"flex-start\" justifyContent=\"space-between\">\n              {(title || hasLogo) && (\n                <Box m={2}>\n                  {hasLogo && (\n                    <ArtsyLogoIcon display=\"block\" width={75} height={26} />\n                  )}\n\n                  {hasLogo && title && <Spacer y={2} />}\n\n                  {title && (\n                    <Text variant=\"lg-display\" lineClamp={6} hyphenate>\n                      {title}\n                    </Text>\n                  )}\n                </Box>\n              )}\n\n              <ModalClose onClick={onClose} />\n            </Flex>\n          )}\n\n          {header && (\n            <Box px={2} pb={2}>\n              {header}\n            </Box>\n          )}\n        </Flex>\n\n        <Box\n          px={2}\n          pb={2}\n          flex={1}\n          overflow=\"auto\"\n          style={{ WebkitOverflowScrolling: \"touch\" }}\n        >\n          {topSentinel}\n          {children}\n          {bottomSentinel}\n        </Box>\n\n        {footer && (\n          <Box\n            p={2}\n            style={{\n              transition: \"box-shadow 250ms\",\n              boxShadow: isAtBottom ? theme.effects.dropShadow : undefined,\n            }}\n          >\n            {footer}\n          </Box>\n        )}\n      </Flex>\n\n      {rightPanel}\n    </Flex>\n  )\n}\n\nexport type ModalCloseProps = ClickableProps\n\nexport const ModalClose: FC<React.PropsWithChildren<ModalCloseProps>> = (\n  props\n) => {\n  return (\n    <Close p={2} ml=\"auto\" aria-label=\"Close\" {...props}>\n      <CloseIcon fill=\"currentColor\" display=\"block\" />\n    </Close>\n  )\n}\n\nconst Close = styled(Clickable)`\n  color: ${themeGet(\"colors.mono100\")};\n\n  &:focus,\n  &:focus-visible {\n    outline: none;\n    color: ${themeGet(\"colors.mono60\")};\n  }\n`\n"],"mappings":"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"}

package/dist/esm/elements/MultiSelect/MultiSelect.js

@@ -20,10 +20,10 @@ import { RequiredField } from "../../shared/RequiredField";
 import { useClickOutside, usePosition } from "../../utils";
 import { useUpdateEffect } from "../../utils/useUpdateEffect";
 import { useWidthOf } from "../../utils/useWidthOf";
-import { Box } from "../Box";
+import { Box, BoxProps } from "../Box";
 import { Checkbox } from "../Checkbox";
 import { Clickable } from "../Clickable";
-import { caretMixin } from "../Select";
+import { caretMixin, Option } from "../Select";
 import { Text } from "../Text";
 import { Tooltip } from "../Tooltip";
 import { MULTISELECT_STATES } from "./tokens";

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

@@ -1 +1 @@
-{"version":3,"file":"MultiSelect.js","names":["themeGet","React","useEffect","useState","styled","css","FORM_ELEMENT_TRANSITION","RequiredField","useClickOutside","usePosition","useUpdateEffect","useWidthOf","Box","Checkbox","Clickable","caretMixin","Text","Tooltip","MULTISELECT_STATES","MultiSelect","_ref","_ref$autoOpen","autoOpen","complete","description","disabled","error","focus","hover","_ref$selected","selected","_ref$name","name","options","required","title","onBlur","onFocus","onSelect","rest","_objectWithoutProperties","_excluded","selectedOptions","valuesToOptions","_useState","_useState2","_slicedToArray","visible","setVisible","_useState3","_useState4","selection","setSelection","newSelectedOptions","toString","tooltipRef","current","anchorRef","handleVisible","handleHide","handleKeydown","event","key","document","addEventListener","removeEventListener","_usePosition","position","offset","active","_useWidthOf","ref","width","onClickOutside","when","type","handleSelect","option","prevSelection","nextSelection","concat","_toConsumableArray","filter","_ref2","value","createElement","_extends","pointer","content","placement","variant","color","textAlign","Container","mt","onClick","length","lineHeight","overflowEllipsis","reverse","map","s","text","join","StyledLabel","htmlFor","Options","tabIndex","zIndex","bg","height","px","o","includes","ml","displayName","values","withConfig","componentId","props","default","completed","label"],"sources":["../../../../src/elements/MultiSelect/MultiSelect.tsx"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport React, { useEffect, useState } from \"react\"\nimport styled, { css } from \"styled-components\"\nimport { FORM_ELEMENT_TRANSITION } from \"../../helpers\"\nimport { RequiredField } from \"../../shared/RequiredField\"\nimport { useClickOutside, usePosition } from \"../../utils\"\nimport { useUpdateEffect } from \"../../utils/useUpdateEffect\"\nimport { useWidthOf } from \"../../utils/useWidthOf\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Checkbox } from \"../Checkbox\"\nimport { Clickable } from \"../Clickable\"\nimport { caretMixin, Option } from \"../Select\"\nimport { Text } from \"../Text\"\nimport { Tooltip } from \"../Tooltip\"\nimport { MULTISELECT_STATES } from \"./tokens\"\n\nexport interface MultiSelectProps extends BoxProps {\n  /** Whether to open the dropdown automatically on mount or render (default: false) */\n  autoOpen?: boolean\n  complete?: boolean\n  description?: string\n  disabled?: boolean\n  error?: string | boolean\n  focus?: boolean\n  hover?: boolean\n  /** Selected values (updating the list will refresh the internal selection and re-render the component) */\n  selected?: Option[\"value\"][]\n  name?: string\n  options: Option[]\n  required?: boolean\n  title?: string\n  onBlur?: (selection: Option[]) => void\n  onFocus?: () => void\n  onSelect?: (selection: Option[]) => void\n\n  visible?: boolean\n}\n\n/** A drop-down multi-select menu */\nexport const MultiSelect: React.FC<\n  React.PropsWithChildren<MultiSelectProps>\n> = ({\n  autoOpen = false,\n  complete,\n  description,\n  disabled,\n  error,\n  focus,\n  hover,\n  selected = [],\n  name = \"Select\",\n  options,\n  required,\n  title,\n  onBlur,\n  onFocus,\n  onSelect,\n  ...rest\n}) => {\n  const selectedOptions = valuesToOptions(selected, options)\n\n  const [visible, setVisible] = useState(autoOpen)\n  const [selection, setSelection] = useState<Option[]>(selectedOptions || [])\n\n  useEffect(() => {\n    const newSelectedOptions = valuesToOptions(selected, options)\n    setSelection(newSelectedOptions)\n  }, [selected.toString()])\n\n  // Yields focus back and forth between popover and anchor\n  useUpdateEffect(() => {\n    if (visible && tooltipRef.current) {\n      tooltipRef.current.focus()\n      return\n    }\n\n    if (!anchorRef.current) return\n    anchorRef.current.focus()\n  }, [visible])\n\n  const handleVisible = () => {\n    setVisible(true)\n    onFocus?.()\n  }\n\n  const handleHide = () => {\n    setVisible(false)\n    onBlur?.(selection)\n  }\n\n  useEffect(() => {\n    const handleKeydown = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") {\n        handleHide()\n      }\n    }\n\n    document.addEventListener(\"keydown\", handleKeydown)\n    return () => {\n      document.removeEventListener(\"keydown\", handleKeydown)\n    }\n  }, [])\n  const { anchorRef, tooltipRef } = usePosition({\n    position: \"bottom\",\n    offset: 10,\n    active: visible,\n  })\n\n  const { width } = useWidthOf({ ref: anchorRef })\n\n  useClickOutside({\n    ref: tooltipRef,\n    onClickOutside: handleHide,\n    when: visible,\n    type: \"click\",\n  })\n\n  const handleSelect = (option: Option) => {\n    return (selected: boolean) => {\n      const prevSelection = selection\n      const nextSelection = selected\n        ? [...prevSelection, option]\n        : prevSelection.filter(({ value }) => option.value !== value)\n\n      setSelection(nextSelection)\n      onSelect?.(nextSelection)\n    }\n  }\n\n  return (\n    <Box width=\"100%\" {...rest}>\n      {!!description && (\n        <Tooltip pointer content={description} placement=\"top-end\">\n          <Text variant=\"xs\" color=\"mono60\" textAlign=\"right\">\n            <u>What is this?</u>\n          </Text>\n        </Tooltip>\n      )}\n\n      <Container\n        mt={!!title && !description ? 1 : 0}\n        ref={anchorRef as any}\n        onClick={handleVisible}\n        complete={complete || selection.length > 0}\n        disabled={!!disabled}\n        error={error}\n        focus={!!focus}\n        hover={!!hover}\n        title={title}\n        visible={visible}\n        {...rest}\n      >\n        <Text variant=\"sm\" lineHeight={1} overflowEllipsis>\n          {selection.length > 0\n            ? [...selection]\n                .reverse()\n                .map((s) => s.text)\n                .join(\", \")\n            : name}\n        </Text>\n\n        {!!title && <StyledLabel htmlFor={name}>{title}</StyledLabel>}\n      </Container>\n\n      {visible && (\n        <Options\n          tabIndex={0}\n          ref={tooltipRef as any}\n          zIndex={1}\n          bg=\"mono0\"\n          width={width}\n        >\n          {options.map((option) => {\n            return (\n              <Checkbox\n                key={option.value}\n                height={50}\n                px={1}\n                selected={selection.map((o) => o.value).includes(option.value)}\n                onSelect={handleSelect(option)}\n              >\n                {option.text}\n              </Checkbox>\n            )\n          })}\n        </Options>\n      )}\n\n      {required && !(error && typeof error === \"string\") && (\n        <RequiredField mt={0.5} ml={1} disabled={disabled} />\n      )}\n\n      {error && typeof error === \"string\" && (\n        <Text variant=\"xs\" mt={0.5} ml={1} color=\"red100\">\n          {error}\n        </Text>\n      )}\n    </Box>\n  )\n}\n\nconst valuesToOptions = (\n  values: Option[\"value\"][],\n  options: Option[]\n): Option[] => {\n  return options.filter((option) => values.includes(option.value))\n}\n\nconst Options = styled(Box)`\n  position: fixed;\n  z-index: 1;\n  max-height: 300px;\n  text-align: left;\n  box-shadow: ${themeGet(\"effects.dropShadow\")};\n  overflow-y: auto;\n  -webkit-overflow-scrolling: touch;\n`\n\ntype ContainerProps = Pick<\n  MultiSelectProps,\n  \"complete\" | \"disabled\" | \"error\" | \"hover\" | \"focus\" | \"visible\"\n>\n\nconst Container = styled(Clickable)<ContainerProps>`\n  position: relative;\n  width: 100%;\n  /* 24px = space.1 + 4px-wide caret + space.1 */\n  padding: 16px 24px 16px ${themeGet(\"space.1\")};\n  font-family: ${themeGet(\"fonts.sans\")};\n  border: 1px solid;\n  border-radius: 3px;\n  border-color: ${themeGet(\"colors.mono30\")};\n  cursor: pointer;\n  line-height: 1;\n  transition: color 0.25s, background-color 0.25s, border-color 0.25s;\n  background-color: ${themeGet(\"colors.mono0\")};\n\n  ${(props) => {\n    return css`\n      ${MULTISELECT_STATES.default}\n      ${props.complete && MULTISELECT_STATES.completed}\n      ${props.hover && MULTISELECT_STATES.hover}\n      ${props.focus && MULTISELECT_STATES.focus}\n      ${props.disabled && MULTISELECT_STATES.disabled}\n      ${props.error && MULTISELECT_STATES.error}\n\n      &:hover {\n        ${MULTISELECT_STATES.hover}\n      }\n\n      ${props.visible && MULTISELECT_STATES.focus}\n\n      &:disabled {\n        cursor: default;\n        ${MULTISELECT_STATES.disabled}\n      }\n\n      // Hide text behind title when it's visible\n      ${props.title &&\n      !props.complete &&\n      !props.visible &&\n      css`\n        color: transparent !important;\n      `}\n    `\n  }}\n\n  ${caretMixin}\n`\n\nconst StyledLabel = styled.label`\n  position: absolute;\n  top: 50%;\n  left: 5px;\n  padding: 0 5px;\n  pointer-events: none;\n  transform: translateY(-50%);\n  transition: ${FORM_ELEMENT_TRANSITION};\n  transition-property: color, transform, padding, font-size;\n  background-color: ${themeGet(\"colors.mono0\")};\n  font-family: ${themeGet(\"fonts.sans\")};\n`\n"],"mappings":"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"}
+{"version":3,"file":"MultiSelect.js","names":["themeGet","React","useEffect","useState","styled","css","FORM_ELEMENT_TRANSITION","RequiredField","useClickOutside","usePosition","useUpdateEffect","useWidthOf","Box","BoxProps","Checkbox","Clickable","caretMixin","Option","Text","Tooltip","MULTISELECT_STATES","MultiSelect","_ref","_ref$autoOpen","autoOpen","complete","description","disabled","error","focus","hover","_ref$selected","selected","_ref$name","name","options","required","title","onBlur","onFocus","onSelect","rest","_objectWithoutProperties","_excluded","selectedOptions","valuesToOptions","_useState","_useState2","_slicedToArray","visible","setVisible","_useState3","_useState4","selection","setSelection","newSelectedOptions","toString","tooltipRef","current","anchorRef","handleVisible","handleHide","handleKeydown","event","key","document","addEventListener","removeEventListener","_usePosition","position","offset","active","_useWidthOf","ref","width","onClickOutside","when","type","handleSelect","option","prevSelection","nextSelection","concat","_toConsumableArray","filter","_ref2","value","createElement","_extends","pointer","content","placement","variant","color","textAlign","Container","mt","onClick","length","lineHeight","overflowEllipsis","reverse","map","s","text","join","StyledLabel","htmlFor","Options","tabIndex","zIndex","bg","height","px","o","includes","ml","displayName","values","withConfig","componentId","props","default","completed","label"],"sources":["../../../../src/elements/MultiSelect/MultiSelect.tsx"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport React, { useEffect, useState } from \"react\"\nimport styled, { css } from \"styled-components\"\nimport { FORM_ELEMENT_TRANSITION } from \"../../helpers\"\nimport { RequiredField } from \"../../shared/RequiredField\"\nimport { useClickOutside, usePosition } from \"../../utils\"\nimport { useUpdateEffect } from \"../../utils/useUpdateEffect\"\nimport { useWidthOf } from \"../../utils/useWidthOf\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Checkbox } from \"../Checkbox\"\nimport { Clickable } from \"../Clickable\"\nimport { caretMixin, Option } from \"../Select\"\nimport { Text } from \"../Text\"\nimport { Tooltip } from \"../Tooltip\"\nimport { MULTISELECT_STATES } from \"./tokens\"\n\nexport interface MultiSelectProps extends BoxProps {\n  /** Whether to open the dropdown automatically on mount or render (default: false) */\n  autoOpen?: boolean\n  complete?: boolean\n  description?: string\n  disabled?: boolean\n  error?: string | boolean\n  focus?: boolean\n  hover?: boolean\n  /** Selected values (updating the list will refresh the internal selection and re-render the component) */\n  selected?: Option[\"value\"][]\n  name?: string\n  options: Option[]\n  required?: boolean\n  title?: string\n  onBlur?: (selection: Option[]) => void\n  onFocus?: () => void\n  onSelect?: (selection: Option[]) => void\n\n  visible?: boolean\n}\n\n/** A drop-down multi-select menu */\nexport const MultiSelect: React.FC<\n  React.PropsWithChildren<MultiSelectProps>\n> = ({\n  autoOpen = false,\n  complete,\n  description,\n  disabled,\n  error,\n  focus,\n  hover,\n  selected = [],\n  name = \"Select\",\n  options,\n  required,\n  title,\n  onBlur,\n  onFocus,\n  onSelect,\n  ...rest\n}) => {\n  const selectedOptions = valuesToOptions(selected, options)\n\n  const [visible, setVisible] = useState(autoOpen)\n  const [selection, setSelection] = useState<Option[]>(selectedOptions || [])\n\n  useEffect(() => {\n    const newSelectedOptions = valuesToOptions(selected, options)\n    setSelection(newSelectedOptions)\n  }, [selected.toString()])\n\n  // Yields focus back and forth between popover and anchor\n  useUpdateEffect(() => {\n    if (visible && tooltipRef.current) {\n      tooltipRef.current.focus()\n      return\n    }\n\n    if (!anchorRef.current) return\n    anchorRef.current.focus()\n  }, [visible])\n\n  const handleVisible = () => {\n    setVisible(true)\n    onFocus?.()\n  }\n\n  const handleHide = () => {\n    setVisible(false)\n    onBlur?.(selection)\n  }\n\n  useEffect(() => {\n    const handleKeydown = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") {\n        handleHide()\n      }\n    }\n\n    document.addEventListener(\"keydown\", handleKeydown)\n    return () => {\n      document.removeEventListener(\"keydown\", handleKeydown)\n    }\n  }, [])\n  const { anchorRef, tooltipRef } = usePosition({\n    position: \"bottom\",\n    offset: 10,\n    active: visible,\n  })\n\n  const { width } = useWidthOf({ ref: anchorRef })\n\n  useClickOutside({\n    ref: tooltipRef,\n    onClickOutside: handleHide,\n    when: visible,\n    type: \"click\",\n  })\n\n  const handleSelect = (option: Option) => {\n    return (selected: boolean) => {\n      const prevSelection = selection\n      const nextSelection = selected\n        ? [...prevSelection, option]\n        : prevSelection.filter(({ value }) => option.value !== value)\n\n      setSelection(nextSelection)\n      onSelect?.(nextSelection)\n    }\n  }\n\n  return (\n    <Box width=\"100%\" {...rest}>\n      {!!description && (\n        <Tooltip pointer content={description} placement=\"top-end\">\n          <Text variant=\"xs\" color=\"mono60\" textAlign=\"right\">\n            <u>What is this?</u>\n          </Text>\n        </Tooltip>\n      )}\n\n      <Container\n        mt={!!title && !description ? 1 : 0}\n        ref={anchorRef as any}\n        onClick={handleVisible}\n        complete={complete || selection.length > 0}\n        disabled={!!disabled}\n        error={error}\n        focus={!!focus}\n        hover={!!hover}\n        title={title}\n        visible={visible}\n        {...rest}\n      >\n        <Text variant=\"sm\" lineHeight={1} overflowEllipsis>\n          {selection.length > 0\n            ? [...selection]\n                .reverse()\n                .map((s) => s.text)\n                .join(\", \")\n            : name}\n        </Text>\n\n        {!!title && <StyledLabel htmlFor={name}>{title}</StyledLabel>}\n      </Container>\n\n      {visible && (\n        <Options\n          tabIndex={0}\n          ref={tooltipRef as any}\n          zIndex={1}\n          bg=\"mono0\"\n          width={width}\n        >\n          {options.map((option) => {\n            return (\n              <Checkbox\n                key={option.value}\n                height={50}\n                px={1}\n                selected={selection.map((o) => o.value).includes(option.value)}\n                onSelect={handleSelect(option)}\n              >\n                {option.text}\n              </Checkbox>\n            )\n          })}\n        </Options>\n      )}\n\n      {required && !(error && typeof error === \"string\") && (\n        <RequiredField mt={0.5} ml={1} disabled={disabled} />\n      )}\n\n      {error && typeof error === \"string\" && (\n        <Text variant=\"xs\" mt={0.5} ml={1} color=\"red100\">\n          {error}\n        </Text>\n      )}\n    </Box>\n  )\n}\n\nconst valuesToOptions = (\n  values: Option[\"value\"][],\n  options: Option[]\n): Option[] => {\n  return options.filter((option) => values.includes(option.value))\n}\n\nconst Options = styled(Box)`\n  position: fixed;\n  z-index: 1;\n  max-height: 300px;\n  text-align: left;\n  box-shadow: ${themeGet(\"effects.dropShadow\")};\n  overflow-y: auto;\n  -webkit-overflow-scrolling: touch;\n`\n\ntype ContainerProps = Pick<\n  MultiSelectProps,\n  \"complete\" | \"disabled\" | \"error\" | \"hover\" | \"focus\" | \"visible\"\n>\n\nconst Container = styled(Clickable)<ContainerProps>`\n  position: relative;\n  width: 100%;\n  /* 24px = space.1 + 4px-wide caret + space.1 */\n  padding: 16px 24px 16px ${themeGet(\"space.1\")};\n  font-family: ${themeGet(\"fonts.sans\")};\n  border: 1px solid;\n  border-radius: 3px;\n  border-color: ${themeGet(\"colors.mono30\")};\n  cursor: pointer;\n  line-height: 1;\n  transition: color 0.25s, background-color 0.25s, border-color 0.25s;\n  background-color: ${themeGet(\"colors.mono0\")};\n\n  ${(props) => {\n    return css`\n      ${MULTISELECT_STATES.default}\n      ${props.complete && MULTISELECT_STATES.completed}\n      ${props.hover && MULTISELECT_STATES.hover}\n      ${props.focus && MULTISELECT_STATES.focus}\n      ${props.disabled && MULTISELECT_STATES.disabled}\n      ${props.error && MULTISELECT_STATES.error}\n\n      &:hover {\n        ${MULTISELECT_STATES.hover}\n      }\n\n      ${props.visible && MULTISELECT_STATES.focus}\n\n      &:disabled {\n        cursor: default;\n        ${MULTISELECT_STATES.disabled}\n      }\n\n      // Hide text behind title when it's visible\n      ${props.title &&\n      !props.complete &&\n      !props.visible &&\n      css`\n        color: transparent !important;\n      `}\n    `\n  }}\n\n  ${caretMixin}\n`\n\nconst StyledLabel = styled.label`\n  position: absolute;\n  top: 50%;\n  left: 5px;\n  padding: 0 5px;\n  pointer-events: none;\n  transform: translateY(-50%);\n  transition: ${FORM_ELEMENT_TRANSITION};\n  transition-property: color, transform, padding, font-size;\n  background-color: ${themeGet(\"colors.mono0\")};\n  font-family: ${themeGet(\"fonts.sans\")};\n`\n"],"mappings":"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"}

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

@@ -1,5 +1,6 @@
 import { themeGet } from "@styled-system/theme-get";
-import { css } from "styled-components";
+import { css, ExecutionContext } from "styled-components";
+import { State } from "../Select/types";
 export var MULTISELECT_STATES = {
   default: css(["height:50px;font-size:", ";color:", ";border-color:", ";& > label{color:", ";font-size:", ";}"], themeGet("textVariants.sm-display.fontSize"), themeGet("colors.mono100"), themeGet("colors.mono30"), themeGet("colors.mono60"), themeGet("textVariants.sm-display.fontSize")),
   focus: css(["color:", ";border-color:", ";text-decoration:underline;& > label{color:", ";transform:translateY(-250%);font-size:", ";}"], themeGet("colors.mono100"), themeGet("colors.blue100"), themeGet("colors.blue100"), themeGet("textVariants.xs.fontSize")),

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

@@ -1 +1 @@
-{"version":3,"file":"tokens.js","names":["themeGet","css","MULTISELECT_STATES","default","focus","hover","_ref","complete","completed","disabled","error"],"sources":["../../../../src/elements/MultiSelect/tokens.ts"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport { css, ExecutionContext } from \"styled-components\"\nimport { State } from \"../Select/types\"\n\ninterface MultiSelectProps extends ExecutionContext {\n  complete?: boolean\n}\n\nexport const MULTISELECT_STATES: Record<State, any> = {\n  default: css`\n    height: 50px;\n    font-size: ${themeGet(\"textVariants.sm-display.fontSize\")};\n    color: ${themeGet(\"colors.mono100\")};\n    border-color: ${themeGet(\"colors.mono30\")};\n\n    & > label {\n      color: ${themeGet(\"colors.mono60\")};\n      font-size: ${themeGet(\"textVariants.sm-display.fontSize\")};\n    }\n  `,\n  focus: css`\n    color: ${themeGet(\"colors.mono100\")};\n    border-color: ${themeGet(\"colors.blue100\")};\n    text-decoration: underline;\n\n    & > label {\n      color: ${themeGet(\"colors.blue100\")};\n      transform: translateY(-250%);\n      font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n    }\n  `,\n  hover: css`\n    color: ${themeGet(\"colors.blue100\")};\n    border-color: ${themeGet(\"colors.mono60\")};\n    text-decoration: underline;\n\n    & > label {\n      color: ${themeGet(\"colors.blue100\")};\n\n      ${({ complete }: MultiSelectProps) =>\n        !complete &&\n        css`\n          text-decoration: underline;\n        `}\n    }\n  `,\n  completed: css`\n    border-color: ${themeGet(\"colors.mono60\")};\n    text-decoration: none;\n\n    & > label {\n      color: ${themeGet(\"colors.mono60\")};\n      transform: translateY(-250%);\n      font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n    }\n  `,\n  disabled: css`\n    color: ${themeGet(\"colors.mono30\")};\n    border-color: ${themeGet(\"colors.mono30\")};\n    text-decoration: none;\n\n    & > label {\n      color: ${themeGet(\"colors.mono30\")};\n      text-decoration: none;\n    }\n  `,\n  error: css`\n    color: ${themeGet(\"colors.mono100\")};\n    border-color: ${themeGet(\"colors.red100\")};\n\n    & > label {\n      color: ${themeGet(\"colors.red100\")};\n    }\n  `,\n}\n"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,0BAA0B;AACnD,SAASC,GAAG,QAA0B,mBAAmB;AAOzD,OAAO,IAAMC,kBAAsC,GAAG;EACpDC,OAAO,EAAEF,GAAG,oGAEGD,QAAQ,CAAC,kCAAkC,CAAC,EAChDA,QAAQ,CAAC,gBAAgB,CAAC,EACnBA,QAAQ,CAAC,eAAe,CAAC,EAG9BA,QAAQ,CAAC,eAAe,CAAC,EACrBA,QAAQ,CAAC,kCAAkC,CAAC,CAE5D;EACDI,KAAK,EAAEH,GAAG,+HACCD,QAAQ,CAAC,gBAAgB,CAAC,EACnBA,QAAQ,CAAC,gBAAgB,CAAC,EAI/BA,QAAQ,CAAC,gBAAgB,CAAC,EAEtBA,QAAQ,CAAC,0BAA0B,CAAC,CAEpD;EACDK,KAAK,EAAEJ,GAAG,wFACCD,QAAQ,CAAC,gBAAgB,CAAC,EACnBA,QAAQ,CAAC,eAAe,CAAC,EAI9BA,QAAQ,CAAC,gBAAgB,CAAC,EAEjC,UAAAM,IAAA;IAAA,IAAGC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IAAA,OACX,CAACA,QAAQ,IACTN,GAAG,gCAEF;EAAA,EAEN;EACDO,SAAS,EAAEP,GAAG,+GACID,QAAQ,CAAC,eAAe,CAAC,EAI9BA,QAAQ,CAAC,eAAe,CAAC,EAErBA,QAAQ,CAAC,0BAA0B,CAAC,CAEpD;EACDS,QAAQ,EAAER,GAAG,oGACFD,QAAQ,CAAC,eAAe,CAAC,EAClBA,QAAQ,CAAC,eAAe,CAAC,EAI9BA,QAAQ,CAAC,eAAe,CAAC,CAGrC;EACDU,KAAK,EAAET,GAAG,0DACCD,QAAQ,CAAC,gBAAgB,CAAC,EACnBA,QAAQ,CAAC,eAAe,CAAC,EAG9BA,QAAQ,CAAC,eAAe,CAAC;AAGxC,CAAC"}
+{"version":3,"file":"tokens.js","names":["themeGet","css","ExecutionContext","State","MULTISELECT_STATES","default","focus","hover","_ref","complete","completed","disabled","error"],"sources":["../../../../src/elements/MultiSelect/tokens.ts"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport { css, ExecutionContext } from \"styled-components\"\nimport { State } from \"../Select/types\"\n\ninterface MultiSelectProps extends ExecutionContext {\n  complete?: boolean\n}\n\nexport const MULTISELECT_STATES: Record<State, any> = {\n  default: css`\n    height: 50px;\n    font-size: ${themeGet(\"textVariants.sm-display.fontSize\")};\n    color: ${themeGet(\"colors.mono100\")};\n    border-color: ${themeGet(\"colors.mono30\")};\n\n    & > label {\n      color: ${themeGet(\"colors.mono60\")};\n      font-size: ${themeGet(\"textVariants.sm-display.fontSize\")};\n    }\n  `,\n  focus: css`\n    color: ${themeGet(\"colors.mono100\")};\n    border-color: ${themeGet(\"colors.blue100\")};\n    text-decoration: underline;\n\n    & > label {\n      color: ${themeGet(\"colors.blue100\")};\n      transform: translateY(-250%);\n      font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n    }\n  `,\n  hover: css`\n    color: ${themeGet(\"colors.blue100\")};\n    border-color: ${themeGet(\"colors.mono60\")};\n    text-decoration: underline;\n\n    & > label {\n      color: ${themeGet(\"colors.blue100\")};\n\n      ${({ complete }: MultiSelectProps) =>\n        !complete &&\n        css`\n          text-decoration: underline;\n        `}\n    }\n  `,\n  completed: css`\n    border-color: ${themeGet(\"colors.mono60\")};\n    text-decoration: none;\n\n    & > label {\n      color: ${themeGet(\"colors.mono60\")};\n      transform: translateY(-250%);\n      font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n    }\n  `,\n  disabled: css`\n    color: ${themeGet(\"colors.mono30\")};\n    border-color: ${themeGet(\"colors.mono30\")};\n    text-decoration: none;\n\n    & > label {\n      color: ${themeGet(\"colors.mono30\")};\n      text-decoration: none;\n    }\n  `,\n  error: css`\n    color: ${themeGet(\"colors.mono100\")};\n    border-color: ${themeGet(\"colors.red100\")};\n\n    & > label {\n      color: ${themeGet(\"colors.red100\")};\n    }\n  `,\n}\n"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,0BAA0B;AACnD,SAASC,GAAG,EAAEC,gBAAgB,QAAQ,mBAAmB;AACzD,SAASC,KAAK;AAMd,OAAO,IAAMC,kBAAsC,GAAG;EACpDC,OAAO,EAAEJ,GAAG,oGAEGD,QAAQ,CAAC,kCAAkC,CAAC,EAChDA,QAAQ,CAAC,gBAAgB,CAAC,EACnBA,QAAQ,CAAC,eAAe,CAAC,EAG9BA,QAAQ,CAAC,eAAe,CAAC,EACrBA,QAAQ,CAAC,kCAAkC,CAAC,CAE5D;EACDM,KAAK,EAAEL,GAAG,+HACCD,QAAQ,CAAC,gBAAgB,CAAC,EACnBA,QAAQ,CAAC,gBAAgB,CAAC,EAI/BA,QAAQ,CAAC,gBAAgB,CAAC,EAEtBA,QAAQ,CAAC,0BAA0B,CAAC,CAEpD;EACDO,KAAK,EAAEN,GAAG,wFACCD,QAAQ,CAAC,gBAAgB,CAAC,EACnBA,QAAQ,CAAC,eAAe,CAAC,EAI9BA,QAAQ,CAAC,gBAAgB,CAAC,EAEjC,UAAAQ,IAAA;IAAA,IAAGC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IAAA,OACX,CAACA,QAAQ,IACTR,GAAG,gCAEF;EAAA,EAEN;EACDS,SAAS,EAAET,GAAG,+GACID,QAAQ,CAAC,eAAe,CAAC,EAI9BA,QAAQ,CAAC,eAAe,CAAC,EAErBA,QAAQ,CAAC,0BAA0B,CAAC,CAEpD;EACDW,QAAQ,EAAEV,GAAG,oGACFD,QAAQ,CAAC,eAAe,CAAC,EAClBA,QAAQ,CAAC,eAAe,CAAC,EAI9BA,QAAQ,CAAC,eAAe,CAAC,CAGrC;EACDY,KAAK,EAAEX,GAAG,0DACCD,QAAQ,CAAC,gBAAgB,CAAC,EACnBA,QAAQ,CAAC,eAAe,CAAC,EAG9BA,QAAQ,CAAC,eAAe,CAAC;AAGxC,CAAC"}

package/dist/esm/elements/Pagination/Pagination.js

@@ -4,13 +4,13 @@ var _excluded = ["getHref", "hasNextPage", "onClick", "onNext", "pageCursors"],
 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 React, { FC } from "react";
 import ChevronLeftIcon from "@artsy/icons/ChevronLeftIcon";
 import ChevronRightIcon from "@artsy/icons/ChevronRightIcon";
-import { Flex } from "../Flex";
+import { Flex, FlexProps } from "../Flex";
 import { Text } from "../Text";
 import styled from "styled-components";
-import { Box, boxMixin } from "../Box";
+import { Box, boxMixin, BoxProps } from "../Box";
 import { SkeletonBox } from "../Skeleton";
 export var PageLink = styled.a.withConfig({
   displayName: "Pagination__PageLink",

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

@@ -1 +1 @@
-{"version":3,"file":"Pagination.js","names":["React","ChevronLeftIcon","ChevronRightIcon","Flex","Text","styled","Box","boxMixin","SkeletonBox","PageLink","a","withConfig","displayName","componentId","Pagination","_ref","getHref","hasNextPage","onClick","onNext","_ref$pageCursors","pageCursors","around","first","last","previous","rest","_objectWithoutProperties","_excluded","handlePrevClick","event","cursor","page","handleNextClick","nextPage","createElement","PaginationContainer","NextPrevButton","disabled","pr","mr","height","width","Fragment","Page","pageCursor","alignItems","p","color","map","key","pl","ml","_ref2","_ref2$pageCursor","isCurrent","_excluded2","handleClick","href","_extends","borderRadius","display","_ref3","children","_excluded3","py","style","opacity","pointerEvents","attrs","as","variant","PaginationSkeleton"],"sources":["../../../../src/elements/Pagination/Pagination.tsx"],"sourcesContent":["import React, { FC } from \"react\"\nimport ChevronLeftIcon from \"@artsy/icons/ChevronLeftIcon\"\nimport ChevronRightIcon from \"@artsy/icons/ChevronRightIcon\"\nimport { Flex, FlexProps } from \"../Flex\"\nimport { Text } from \"../Text\"\nimport styled from \"styled-components\"\nimport { Box, boxMixin, BoxProps } from \"../Box\"\nimport { SkeletonBox } from \"../Skeleton\"\n\ninterface PageCursor {\n  cursor: string\n  isCurrent: boolean\n  page: number\n}\n\nexport interface PageCursors {\n  around: PageCursor[]\n  first: PageCursor\n  last: PageCursor\n  previous: PageCursor\n}\n\nexport const PageLink = styled.a<BoxProps>`\n  text-decoration: none;\n  &:hover {\n    text-decoration: underline;\n  }\n  ${boxMixin}\n`\n\nexport interface PaginationProps extends FlexProps {\n  getHref?: (page: number) => string\n  hasNextPage: boolean\n  onClick?: (cursor: string, page: number, event: React.MouseEvent) => void\n  onNext?: (event: React.MouseEvent, page: number) => void\n  pageCursors: PageCursors\n  scrollTo?: string\n}\n\n/** Pagination */\nexport const Pagination: React.FC<React.PropsWithChildren<PaginationProps>> = ({\n  getHref,\n  hasNextPage,\n  onClick,\n  onNext,\n  pageCursors: { around, first, last, previous },\n  ...rest\n}) => {\n  const handlePrevClick = (event: React.MouseEvent) => {\n    if (previous) {\n      onClick && onClick(previous.cursor, previous.page, event)\n    }\n  }\n\n  const handleNextClick = (event: React.MouseEvent) => {\n    onNext && onNext(event, nextPage)\n  }\n\n  const nextPage = (previous?.page || 0) + 2\n\n  return (\n    <PaginationContainer {...rest}>\n      <NextPrevButton\n        data-testid=\"prev\"\n        aria-label=\"Previous\"\n        getHref={getHref}\n        onClick={handlePrevClick}\n        page={previous?.page}\n        disabled={!previous}\n        pr={0.5}\n      >\n        <ChevronLeftIcon mr={0.5} height={12} width={12} />\n\n        <span>Prev</span>\n      </NextPrevButton>\n\n      <Flex>\n        {first && (\n          <>\n            <Page onClick={onClick} pageCursor={first} getHref={getHref} />\n            <Flex alignItems=\"center\" p={0.5} color=\"mono60\">\n              …\n            </Flex>\n          </>\n        )}\n\n        {around.map((pageCursor) => {\n          return (\n            <Page\n              getHref={getHref}\n              key={pageCursor.page}\n              onClick={onClick}\n              pageCursor={pageCursor}\n            />\n          )\n        })}\n\n        {last && (\n          <>\n            <Flex alignItems=\"center\" p={0.5} color=\"mono60\">\n              …\n            </Flex>\n\n            <Page onClick={onClick} pageCursor={last} getHref={getHref} />\n          </>\n        )}\n      </Flex>\n\n      <NextPrevButton\n        data-testid=\"next\"\n        getHref={getHref}\n        onClick={handleNextClick}\n        page={nextPage}\n        disabled={!hasNextPage}\n        pl={0.5}\n      >\n        <span>Next</span>\n\n        <ChevronRightIcon ml={0.5} height={12} width={12} />\n      </NextPrevButton>\n    </PaginationContainer>\n  )\n}\n\ninterface PageProps extends BoxProps {\n  getHref?: (page: number) => string\n  onClick?: (cursor: string, page: number, event: React.MouseEvent) => void\n  pageCursor: PageCursor\n}\n\nconst Page: React.FC<React.PropsWithChildren<PageProps>> = ({\n  getHref,\n  onClick,\n  pageCursor: { cursor, isCurrent, page },\n  ...rest\n}) => {\n  const handleClick = (\n    event: React.MouseEvent<HTMLAnchorElement, MouseEvent>\n  ) => {\n    onClick && onClick(cursor, page, event)\n  }\n\n  const href = page && typeof getHref !== \"undefined\" ? getHref(page) : \"\"\n\n  return (\n    <PageLink\n      href={href}\n      onClick={handleClick}\n      borderRadius={2}\n      display=\"flex\"\n      alignItems=\"center\"\n      p={0.5}\n      {...(isCurrent\n        ? { color: \"mono100\", \"aria-current\": \"page\" }\n        : { color: \"mono60\" })}\n      {...rest}\n    >\n      {page}\n    </PageLink>\n  )\n}\n\nexport interface NextPrevButtonProps extends BoxProps {\n  disabled: boolean\n  getHref?: (page: number) => string\n  onClick?: (event: React.MouseEvent) => void\n  page?: number\n}\n\nconst NextPrevButton: React.FC<\n  React.PropsWithChildren<NextPrevButtonProps>\n> = ({ disabled, getHref, onClick, page, children, ...rest }) => {\n  const href =\n    !disabled && page && typeof getHref !== \"undefined\" ? getHref(page) : \"\"\n\n  if (disabled) {\n    return (\n      <Flex\n        display=\"flex\"\n        alignItems=\"center\"\n        color=\"mono30\"\n        py={0.5}\n        {...rest}\n      >\n        {children}\n      </Flex>\n    )\n  }\n\n  return (\n    <PageLink\n      href={href}\n      onClick={onClick}\n      display=\"flex\"\n      alignItems=\"center\"\n      py={0.5}\n      style={\n        !disabled\n          ? {\n              opacity: 1,\n              pointerEvents: \"inherit\",\n            }\n          : {\n              opacity: 0.1,\n              pointerEvents: \"none\",\n            }\n      }\n      {...rest}\n    >\n      {children}\n    </PageLink>\n  )\n}\n\nconst PaginationContainer = styled(Text).attrs({\n  as: \"nav\",\n  \"aria-label\": \"Pagination\",\n  variant: \"sm\",\n})`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  line-height: 1;\n`\n\nexport const PaginationSkeleton: FC<React.PropsWithChildren<unknown>> = () => {\n  return (\n    <PaginationContainer aria-hidden>\n      <NextPrevButton disabled pr={0.5}>\n        <ChevronLeftIcon mr={0.5} height={12} width={12} />\n\n        <span>Prev</span>\n      </NextPrevButton>\n\n      <SkeletonBox width={100}>\n        <Box opacity={0}>0</Box>\n      </SkeletonBox>\n\n      <NextPrevButton disabled pl={0.5}>\n        <span>Next</span>\n\n        <ChevronRightIcon ml={0.5} height={12} width={12} />\n      </NextPrevButton>\n    </PaginationContainer>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"Pagination.js","names":["React","FC","ChevronLeftIcon","ChevronRightIcon","Flex","FlexProps","Text","styled","Box","boxMixin","BoxProps","SkeletonBox","PageLink","a","withConfig","displayName","componentId","Pagination","_ref","getHref","hasNextPage","onClick","onNext","_ref$pageCursors","pageCursors","around","first","last","previous","rest","_objectWithoutProperties","_excluded","handlePrevClick","event","cursor","page","handleNextClick","nextPage","createElement","PaginationContainer","NextPrevButton","disabled","pr","mr","height","width","Fragment","Page","pageCursor","alignItems","p","color","map","key","pl","ml","_ref2","_ref2$pageCursor","isCurrent","_excluded2","handleClick","href","_extends","borderRadius","display","_ref3","children","_excluded3","py","style","opacity","pointerEvents","attrs","as","variant","PaginationSkeleton"],"sources":["../../../../src/elements/Pagination/Pagination.tsx"],"sourcesContent":["import React, { FC } from \"react\"\nimport ChevronLeftIcon from \"@artsy/icons/ChevronLeftIcon\"\nimport ChevronRightIcon from \"@artsy/icons/ChevronRightIcon\"\nimport { Flex, FlexProps } from \"../Flex\"\nimport { Text } from \"../Text\"\nimport styled from \"styled-components\"\nimport { Box, boxMixin, BoxProps } from \"../Box\"\nimport { SkeletonBox } from \"../Skeleton\"\n\ninterface PageCursor {\n  cursor: string\n  isCurrent: boolean\n  page: number\n}\n\nexport interface PageCursors {\n  around: PageCursor[]\n  first: PageCursor\n  last: PageCursor\n  previous: PageCursor\n}\n\nexport const PageLink = styled.a<BoxProps>`\n  text-decoration: none;\n  &:hover {\n    text-decoration: underline;\n  }\n  ${boxMixin}\n`\n\nexport interface PaginationProps extends FlexProps {\n  getHref?: (page: number) => string\n  hasNextPage: boolean\n  onClick?: (cursor: string, page: number, event: React.MouseEvent) => void\n  onNext?: (event: React.MouseEvent, page: number) => void\n  pageCursors: PageCursors\n  scrollTo?: string\n}\n\n/** Pagination */\nexport const Pagination: React.FC<React.PropsWithChildren<PaginationProps>> = ({\n  getHref,\n  hasNextPage,\n  onClick,\n  onNext,\n  pageCursors: { around, first, last, previous },\n  ...rest\n}) => {\n  const handlePrevClick = (event: React.MouseEvent) => {\n    if (previous) {\n      onClick && onClick(previous.cursor, previous.page, event)\n    }\n  }\n\n  const handleNextClick = (event: React.MouseEvent) => {\n    onNext && onNext(event, nextPage)\n  }\n\n  const nextPage = (previous?.page || 0) + 2\n\n  return (\n    <PaginationContainer {...rest}>\n      <NextPrevButton\n        data-testid=\"prev\"\n        aria-label=\"Previous\"\n        getHref={getHref}\n        onClick={handlePrevClick}\n        page={previous?.page}\n        disabled={!previous}\n        pr={0.5}\n      >\n        <ChevronLeftIcon mr={0.5} height={12} width={12} />\n\n        <span>Prev</span>\n      </NextPrevButton>\n\n      <Flex>\n        {first && (\n          <>\n            <Page onClick={onClick} pageCursor={first} getHref={getHref} />\n            <Flex alignItems=\"center\" p={0.5} color=\"mono60\">\n              …\n            </Flex>\n          </>\n        )}\n\n        {around.map((pageCursor) => {\n          return (\n            <Page\n              getHref={getHref}\n              key={pageCursor.page}\n              onClick={onClick}\n              pageCursor={pageCursor}\n            />\n          )\n        })}\n\n        {last && (\n          <>\n            <Flex alignItems=\"center\" p={0.5} color=\"mono60\">\n              …\n            </Flex>\n\n            <Page onClick={onClick} pageCursor={last} getHref={getHref} />\n          </>\n        )}\n      </Flex>\n\n      <NextPrevButton\n        data-testid=\"next\"\n        getHref={getHref}\n        onClick={handleNextClick}\n        page={nextPage}\n        disabled={!hasNextPage}\n        pl={0.5}\n      >\n        <span>Next</span>\n\n        <ChevronRightIcon ml={0.5} height={12} width={12} />\n      </NextPrevButton>\n    </PaginationContainer>\n  )\n}\n\ninterface PageProps extends BoxProps {\n  getHref?: (page: number) => string\n  onClick?: (cursor: string, page: number, event: React.MouseEvent) => void\n  pageCursor: PageCursor\n}\n\nconst Page: React.FC<React.PropsWithChildren<PageProps>> = ({\n  getHref,\n  onClick,\n  pageCursor: { cursor, isCurrent, page },\n  ...rest\n}) => {\n  const handleClick = (\n    event: React.MouseEvent<HTMLAnchorElement, MouseEvent>\n  ) => {\n    onClick && onClick(cursor, page, event)\n  }\n\n  const href = page && typeof getHref !== \"undefined\" ? getHref(page) : \"\"\n\n  return (\n    <PageLink\n      href={href}\n      onClick={handleClick}\n      borderRadius={2}\n      display=\"flex\"\n      alignItems=\"center\"\n      p={0.5}\n      {...(isCurrent\n        ? { color: \"mono100\", \"aria-current\": \"page\" }\n        : { color: \"mono60\" })}\n      {...rest}\n    >\n      {page}\n    </PageLink>\n  )\n}\n\nexport interface NextPrevButtonProps extends BoxProps {\n  disabled: boolean\n  getHref?: (page: number) => string\n  onClick?: (event: React.MouseEvent) => void\n  page?: number\n}\n\nconst NextPrevButton: React.FC<\n  React.PropsWithChildren<NextPrevButtonProps>\n> = ({ disabled, getHref, onClick, page, children, ...rest }) => {\n  const href =\n    !disabled && page && typeof getHref !== \"undefined\" ? getHref(page) : \"\"\n\n  if (disabled) {\n    return (\n      <Flex\n        display=\"flex\"\n        alignItems=\"center\"\n        color=\"mono30\"\n        py={0.5}\n        {...rest}\n      >\n        {children}\n      </Flex>\n    )\n  }\n\n  return (\n    <PageLink\n      href={href}\n      onClick={onClick}\n      display=\"flex\"\n      alignItems=\"center\"\n      py={0.5}\n      style={\n        !disabled\n          ? {\n              opacity: 1,\n              pointerEvents: \"inherit\",\n            }\n          : {\n              opacity: 0.1,\n              pointerEvents: \"none\",\n            }\n      }\n      {...rest}\n    >\n      {children}\n    </PageLink>\n  )\n}\n\nconst PaginationContainer = styled(Text).attrs({\n  as: \"nav\",\n  \"aria-label\": \"Pagination\",\n  variant: \"sm\",\n})`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  line-height: 1;\n`\n\nexport const PaginationSkeleton: FC<React.PropsWithChildren<unknown>> = () => {\n  return (\n    <PaginationContainer aria-hidden>\n      <NextPrevButton disabled pr={0.5}>\n        <ChevronLeftIcon mr={0.5} height={12} width={12} />\n\n        <span>Prev</span>\n      </NextPrevButton>\n\n      <SkeletonBox width={100}>\n        <Box opacity={0}>0</Box>\n      </SkeletonBox>\n\n      <NextPrevButton disabled pl={0.5}>\n        <span>Next</span>\n\n        <ChevronRightIcon ml={0.5} height={12} width={12} />\n      </NextPrevButton>\n    </PaginationContainer>\n  )\n}\n"],"mappings":"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"}

package/dist/esm/elements/PasswordInput/PasswordInput.js

@@ -9,6 +9,7 @@ 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 } from "react";
+import { InputProps } from "../Input";
 import { LabeledInput } from "../LabeledInput";
 import { Clickable } from "../Clickable";
 import ShowIcon from "@artsy/icons/ShowIcon";