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

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

@@ -1 +1 @@
-{"version":3,"file":"Stack.js","names":["styled","Box","Stack","withConfig","displayName","componentId","defaultProps","display","flexDirection"],"sources":["../../../../src/elements/Stack/Stack.tsx"],"sourcesContent":["import styled from \"styled-components\"\nimport { Box, BoxProps } from \"../Box\"\nimport { ResponsiveValue } from \"styled-system\"\n\nexport type StackProps = BoxProps & {\n  gap: ResponsiveValue<string | number>\n}\n\n/**\n * `Stack` is `Box` with` display: flex` and `flex-direction: column`.\n * `gap` is required\n */\nexport const Stack = styled(Box)<StackProps>``\n\nStack.defaultProps = {\n  display: \"flex\",\n  flexDirection: \"column\",\n}\n\nStack.displayName = \"Stack\"\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AACtC,SAASC,GAAG;AAOZ;AACA;AACA;AACA;AACA,OAAO,IAAMC,KAAK,GAAGF,MAAM,CAACC,GAAG,CAAC,CAAAE,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,QAAc;AAE9CH,KAAK,CAACI,YAAY,GAAG;EACnBC,OAAO,EAAE,MAAM;EACfC,aAAa,EAAE;AACjB,CAAC;AAEDN,KAAK,CAACE,WAAW,GAAG,OAAO"}
+{"version":3,"file":"Stack.js","names":["styled","Box","BoxProps","ResponsiveValue","Stack","withConfig","displayName","componentId","defaultProps","display","flexDirection"],"sources":["../../../../src/elements/Stack/Stack.tsx"],"sourcesContent":["import styled from \"styled-components\"\nimport { Box, BoxProps } from \"../Box\"\nimport { ResponsiveValue } from \"styled-system\"\n\nexport type StackProps = BoxProps & {\n  gap: ResponsiveValue<string | number>\n}\n\n/**\n * `Stack` is `Box` with` display: flex` and `flex-direction: column`.\n * `gap` is required\n */\nexport const Stack = styled(Box)<StackProps>``\n\nStack.defaultProps = {\n  display: \"flex\",\n  flexDirection: \"column\",\n}\n\nStack.displayName = \"Stack\"\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AACtC,SAASC,GAAG,EAAEC,QAAQ;AACtB,SAASC,eAAe,QAAQ,eAAe;AAM/C;AACA;AACA;AACA;AACA,OAAO,IAAMC,KAAK,GAAGJ,MAAM,CAACC,GAAG,CAAC,CAAAI,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,QAAc;AAE9CH,KAAK,CAACI,YAAY,GAAG;EACnBC,OAAO,EAAE,MAAM;EACfC,aAAa,EAAE;AACjB,CAAC;AAEDN,KAAK,CAACE,WAAW,GAAG,OAAO"}

package/dist/esm/elements/StackableBorderBox/StackableBorderBox.js

@@ -5,7 +5,7 @@ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key i
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 import styled from "styled-components";
-import { BorderBox } from "../BorderBox";
+import { BorderBox, BorderBoxProps } from "../BorderBox";
 /**
  * A stackable border box is a BorderBox that shares borders with its siblings.
  */

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

@@ -1 +1 @@
-{"version":3,"file":"StackableBorderBox.js","names":["styled","BorderBox","StackableBorderBox","withConfig","displayName","componentId","defaultProps","_objectSpread"],"sources":["../../../../src/elements/StackableBorderBox/StackableBorderBox.tsx"],"sourcesContent":["import styled from \"styled-components\"\nimport { BorderBox, BorderBoxProps } from \"../BorderBox\"\n\nexport type StackableBorderBoxProps = BorderBoxProps\n\n/**\n * A stackable border box is a BorderBox that shares borders with its siblings.\n */\nexport const StackableBorderBox = styled(BorderBox)<BorderBoxProps>`\n  &:not(:first-child) {\n    border-top-left-radius: 0;\n    border-top-right-radius: 0;\n  }\n  &:not(:last-child) {\n    border-bottom: 0;\n    border-bottom-left-radius: 0;\n    border-bottom-right-radius: 0;\n  }\n`\n\nStackableBorderBox.displayName = \"StackableBorderBox\"\n\nStackableBorderBox.defaultProps = {\n  ...BorderBox.defaultProps,\n}\n"],"mappings":";;;;;;AAAA,OAAOA,MAAM,MAAM,mBAAmB;AACtC,SAASC,SAAS;AAIlB;AACA;AACA;AACA,OAAO,IAAMC,kBAAkB,GAAGF,MAAM,CAACC,SAAS,CAAC,CAAAE,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,6KAUlD;AAEDH,kBAAkB,CAACE,WAAW,GAAG,oBAAoB;AAErDF,kBAAkB,CAACI,YAAY,GAAAC,aAAA,KAC1BN,SAAS,CAACK,YAAY,CAC1B"}
+{"version":3,"file":"StackableBorderBox.js","names":["styled","BorderBox","BorderBoxProps","StackableBorderBox","withConfig","displayName","componentId","defaultProps","_objectSpread"],"sources":["../../../../src/elements/StackableBorderBox/StackableBorderBox.tsx"],"sourcesContent":["import styled from \"styled-components\"\nimport { BorderBox, BorderBoxProps } from \"../BorderBox\"\n\nexport type StackableBorderBoxProps = BorderBoxProps\n\n/**\n * A stackable border box is a BorderBox that shares borders with its siblings.\n */\nexport const StackableBorderBox = styled(BorderBox)<BorderBoxProps>`\n  &:not(:first-child) {\n    border-top-left-radius: 0;\n    border-top-right-radius: 0;\n  }\n  &:not(:last-child) {\n    border-bottom: 0;\n    border-bottom-left-radius: 0;\n    border-bottom-right-radius: 0;\n  }\n`\n\nStackableBorderBox.displayName = \"StackableBorderBox\"\n\nStackableBorderBox.defaultProps = {\n  ...BorderBox.defaultProps,\n}\n"],"mappings":";;;;;;AAAA,OAAOA,MAAM,MAAM,mBAAmB;AACtC,SAASC,SAAS,EAAEC,cAAc;AAIlC;AACA;AACA;AACA,OAAO,IAAMC,kBAAkB,GAAGH,MAAM,CAACC,SAAS,CAAC,CAAAG,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,6KAUlD;AAEDH,kBAAkB,CAACE,WAAW,GAAG,oBAAoB;AAErDF,kBAAkB,CAACI,YAAY,GAAAC,aAAA,KAC1BP,SAAS,CAACM,YAAY,CAC1B"}

package/dist/esm/elements/Stepper/Stepper.js

@@ -9,7 +9,7 @@ import { BaseTab, BaseTabs } from "../BaseTabs";
 import { Box } from "../Box";
 import { Clickable } from "../Clickable";
 import { Flex } from "../Flex";
-import { useTabs } from "../Tabs";
+import { TabProps, TabsProps, useTabs } from "../Tabs";
 /** Stepper */
 export var Stepper = function Stepper(_ref) {
   var currentStepIndex = _ref.currentStepIndex,

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

@@ -1 +1 @@
-{"version":3,"file":"Stepper.js","names":["React","CheckmarkIcon","ChevronRightIcon","BaseTab","BaseTabs","Box","Clickable","Flex","useTabs","Stepper","_ref","currentStepIndex","disableNavigation","_ref$initialTabIndex","initialTabIndex","children","_ref$mb","mb","onChange","rest","_objectWithoutProperties","_excluded","_useTabs","tabs","activeTabIndex","handleClick","ref","createElement","Fragment","_extends","fill","map","tab","i","key","as","disabled","onClick","active","variant","justifyContent","alignItems","flex","color","undefined","child","props","name","width","height","ml","Step","_ref2"],"sources":["../../../../src/elements/Stepper/Stepper.tsx"],"sourcesContent":["import React from \"react\"\nimport CheckmarkIcon from \"@artsy/icons/CheckmarkIcon\"\nimport ChevronRightIcon from \"@artsy/icons/ChevronRightIcon\"\nimport { BaseTab, BaseTabs } from \"../BaseTabs\"\nimport { Box } from \"../Box\"\nimport { Clickable } from \"../Clickable\"\nimport { Flex } from \"../Flex\"\nimport { TabProps, TabsProps, useTabs } from \"../Tabs\"\n\nexport interface StepperProps extends TabsProps {\n  /** The step user currently is at (e.g. previous steps completed) */\n  currentStepIndex: number\n  /** Prevents the tabs from being directly clickable */\n  disableNavigation?: boolean\n}\n\n/** Stepper */\nexport const Stepper: React.FC<React.PropsWithChildren<StepperProps>> = ({\n  currentStepIndex,\n  disableNavigation,\n  initialTabIndex = 0,\n  children,\n  mb = 2,\n  onChange,\n  ...rest\n}) => {\n  const { tabs, activeTabIndex, handleClick, ref } = useTabs({\n    children,\n    initialTabIndex,\n    onChange,\n  })\n\n  return (\n    <>\n      <BaseTabs ref={ref} fill mb={mb} {...rest}>\n        {tabs.map((tab, i) => {\n          return (\n            <BaseTab\n              key={i}\n              as={Clickable}\n              ref={tab.ref as any}\n              aria-selected={i === activeTabIndex}\n              disabled={disableNavigation || i > currentStepIndex}\n              onClick={handleClick(i)}\n              active={i === activeTabIndex}\n              variant=\"sm\"\n              justifyContent=\"flex-start\"\n            >\n              <Flex alignItems=\"center\" justifyContent=\"space-between\" flex={1}>\n                <Flex alignItems=\"center\">\n                  <Box color={i > currentStepIndex ? \"mono30\" : undefined}>\n                    {tab.child.props.name}\n                  </Box>\n\n                  {currentStepIndex > i && (\n                    <CheckmarkIcon\n                      width={16}\n                      height={16}\n                      color=\"green100\"\n                      ml={1}\n                    />\n                  )}\n                </Flex>\n\n                <ChevronRightIcon fill=\"mono60\" height={10} ml={1} />\n              </Flex>\n            </BaseTab>\n          )\n        })}\n      </BaseTabs>\n\n      {tabs[activeTabIndex].child}\n    </>\n  )\n}\n\n/** StepProps */\nexport type StepProps = TabProps\n\n/**\n * An individual step.\n * Does nothing on its own; props are dealt with inside of Steps.\n */\nexport const Step: React.FC<React.PropsWithChildren<StepProps>> = ({\n  children,\n}) => <>{children}</>\n"],"mappings":"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"}
+{"version":3,"file":"Stepper.js","names":["React","CheckmarkIcon","ChevronRightIcon","BaseTab","BaseTabs","Box","Clickable","Flex","TabProps","TabsProps","useTabs","Stepper","_ref","currentStepIndex","disableNavigation","_ref$initialTabIndex","initialTabIndex","children","_ref$mb","mb","onChange","rest","_objectWithoutProperties","_excluded","_useTabs","tabs","activeTabIndex","handleClick","ref","createElement","Fragment","_extends","fill","map","tab","i","key","as","disabled","onClick","active","variant","justifyContent","alignItems","flex","color","undefined","child","props","name","width","height","ml","Step","_ref2"],"sources":["../../../../src/elements/Stepper/Stepper.tsx"],"sourcesContent":["import React from \"react\"\nimport CheckmarkIcon from \"@artsy/icons/CheckmarkIcon\"\nimport ChevronRightIcon from \"@artsy/icons/ChevronRightIcon\"\nimport { BaseTab, BaseTabs } from \"../BaseTabs\"\nimport { Box } from \"../Box\"\nimport { Clickable } from \"../Clickable\"\nimport { Flex } from \"../Flex\"\nimport { TabProps, TabsProps, useTabs } from \"../Tabs\"\n\nexport interface StepperProps extends TabsProps {\n  /** The step user currently is at (e.g. previous steps completed) */\n  currentStepIndex: number\n  /** Prevents the tabs from being directly clickable */\n  disableNavigation?: boolean\n}\n\n/** Stepper */\nexport const Stepper: React.FC<React.PropsWithChildren<StepperProps>> = ({\n  currentStepIndex,\n  disableNavigation,\n  initialTabIndex = 0,\n  children,\n  mb = 2,\n  onChange,\n  ...rest\n}) => {\n  const { tabs, activeTabIndex, handleClick, ref } = useTabs({\n    children,\n    initialTabIndex,\n    onChange,\n  })\n\n  return (\n    <>\n      <BaseTabs ref={ref} fill mb={mb} {...rest}>\n        {tabs.map((tab, i) => {\n          return (\n            <BaseTab\n              key={i}\n              as={Clickable}\n              ref={tab.ref as any}\n              aria-selected={i === activeTabIndex}\n              disabled={disableNavigation || i > currentStepIndex}\n              onClick={handleClick(i)}\n              active={i === activeTabIndex}\n              variant=\"sm\"\n              justifyContent=\"flex-start\"\n            >\n              <Flex alignItems=\"center\" justifyContent=\"space-between\" flex={1}>\n                <Flex alignItems=\"center\">\n                  <Box color={i > currentStepIndex ? \"mono30\" : undefined}>\n                    {tab.child.props.name}\n                  </Box>\n\n                  {currentStepIndex > i && (\n                    <CheckmarkIcon\n                      width={16}\n                      height={16}\n                      color=\"green100\"\n                      ml={1}\n                    />\n                  )}\n                </Flex>\n\n                <ChevronRightIcon fill=\"mono60\" height={10} ml={1} />\n              </Flex>\n            </BaseTab>\n          )\n        })}\n      </BaseTabs>\n\n      {tabs[activeTabIndex].child}\n    </>\n  )\n}\n\n/** StepProps */\nexport type StepProps = TabProps\n\n/**\n * An individual step.\n * Does nothing on its own; props are dealt with inside of Steps.\n */\nexport const Step: React.FC<React.PropsWithChildren<StepProps>> = ({\n  children,\n}) => <>{children}</>\n"],"mappings":";;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,aAAa,MAAM,4BAA4B;AACtD,OAAOC,gBAAgB,MAAM,+BAA+B;AAC5D,SAASC,OAAO,EAAEC,QAAQ;AAC1B,SAASC,GAAG;AACZ,SAASC,SAAS;AAClB,SAASC,IAAI;AACb,SAASC,QAAQ,EAAEC,SAAS,EAAEC,OAAO;AASrC;AACA,OAAO,IAAMC,OAAwD,GAAG,SAA3DA,OAAwDA,CAAAC,IAAA,EAQ/D;EAAA,IAPJC,gBAAgB,GAAAD,IAAA,CAAhBC,gBAAgB;IAChBC,iBAAiB,GAAAF,IAAA,CAAjBE,iBAAiB;IAAAC,oBAAA,GAAAH,IAAA,CACjBI,eAAe;IAAfA,eAAe,GAAAD,oBAAA,cAAG,CAAC,GAAAA,oBAAA;IACnBE,QAAQ,GAAAL,IAAA,CAARK,QAAQ;IAAAC,OAAA,GAAAN,IAAA,CACRO,EAAE;IAAFA,EAAE,GAAAD,OAAA,cAAG,CAAC,GAAAA,OAAA;IACNE,QAAQ,GAAAR,IAAA,CAARQ,QAAQ;IACLC,IAAI,GAAAC,wBAAA,CAAAV,IAAA,EAAAW,SAAA;EAEP,IAAAC,QAAA,GAAmDd,OAAO,CAAC;MACzDO,QAAQ,EAARA,QAAQ;MACRD,eAAe,EAAfA,eAAe;MACfI,QAAQ,EAARA;IACF,CAAC,CAAC;IAJMK,IAAI,GAAAD,QAAA,CAAJC,IAAI;IAAEC,cAAc,GAAAF,QAAA,CAAdE,cAAc;IAAEC,WAAW,GAAAH,QAAA,CAAXG,WAAW;IAAEC,GAAG,GAAAJ,QAAA,CAAHI,GAAG;EAM9C,oBACE5B,KAAA,CAAA6B,aAAA,CAAA7B,KAAA,CAAA8B,QAAA,qBACE9B,KAAA,CAAA6B,aAAA,CAACzB,QAAQ,EAAA2B,QAAA;IAACH,GAAG,EAAEA,GAAI;IAACI,IAAI;IAACb,EAAE,EAAEA;EAAG,GAAKE,IAAI,GACtCI,IAAI,CAACQ,GAAG,CAAC,UAACC,GAAG,EAAEC,CAAC,EAAK;IACpB,oBACEnC,KAAA,CAAA6B,aAAA,CAAC1B,OAAO;MACNiC,GAAG,EAAED,CAAE;MACPE,EAAE,EAAE/B,SAAU;MACdsB,GAAG,EAAEM,GAAG,CAACN,GAAW;MACpB,iBAAeO,CAAC,KAAKT,cAAe;MACpCY,QAAQ,EAAExB,iBAAiB,IAAIqB,CAAC,GAAGtB,gBAAiB;MACpD0B,OAAO,EAAEZ,WAAW,CAACQ,CAAC,CAAE;MACxBK,MAAM,EAAEL,CAAC,KAAKT,cAAe;MAC7Be,OAAO,EAAC,IAAI;MACZC,cAAc,EAAC;IAAY,gBAE3B1C,KAAA,CAAA6B,aAAA,CAACtB,IAAI;MAACoC,UAAU,EAAC,QAAQ;MAACD,cAAc,EAAC,eAAe;MAACE,IAAI,EAAE;IAAE,gBAC/D5C,KAAA,CAAA6B,aAAA,CAACtB,IAAI;MAACoC,UAAU,EAAC;IAAQ,gBACvB3C,KAAA,CAAA6B,aAAA,CAACxB,GAAG;MAACwC,KAAK,EAAEV,CAAC,GAAGtB,gBAAgB,GAAG,QAAQ,GAAGiC;IAAU,GACrDZ,GAAG,CAACa,KAAK,CAACC,KAAK,CAACC,IAAI,CACjB,EAELpC,gBAAgB,GAAGsB,CAAC,iBACnBnC,KAAA,CAAA6B,aAAA,CAAC5B,aAAa;MACZiD,KAAK,EAAE,EAAG;MACVC,MAAM,EAAE,EAAG;MACXN,KAAK,EAAC,UAAU;MAChBO,EAAE,EAAE;IAAE,EAET,CACI,eAEPpD,KAAA,CAAA6B,aAAA,CAAC3B,gBAAgB;MAAC8B,IAAI,EAAC,QAAQ;MAACmB,MAAM,EAAE,EAAG;MAACC,EAAE,EAAE;IAAE,EAAG,CAChD,CACC;EAEd,CAAC,CAAC,CACO,EAEV3B,IAAI,CAACC,cAAc,CAAC,CAACqB,KAAK,CAC1B;AAEP,CAAC;;AAED;;AAGA;AACA;AACA;AACA;AACA,OAAO,IAAMM,IAAkD,GAAG,SAArDA,IAAkDA,CAAAC,KAAA;EAAA,IAC7DrC,QAAQ,GAAAqC,KAAA,CAARrC,QAAQ;EAAA,oBACJjB,KAAA,CAAA6B,aAAA,CAAA7B,KAAA,CAAA8B,QAAA,QAAGb,QAAQ,CAAI;AAAA"}

package/dist/esm/elements/Sup/Sup.js

@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import { Text } from "../Text";
+import { Text, TextProps } from "../Text";
 export var Sup = styled(Text).withConfig({
   displayName: "Sup",
   componentId: "sc-1g83qfs-0"

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

@@ -1 +1 @@
-{"version":3,"file":"Sup.js","names":["styled","Text","Sup","withConfig","displayName","componentId"],"sources":["../../../../src/elements/Sup/Sup.tsx"],"sourcesContent":["import styled from \"styled-components\"\nimport { Text, TextProps } from \"../Text\"\n\nexport type SupProps = TextProps\n\nexport const Sup = styled(Text)`\n  display: inline;\n  vertical-align: super;\n  font-size: 75% !important;\n  line-height: 0 !important; // Avoids shifting the line-height\n  font-weight: inherit !important;\n`\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AACtC,SAASC,IAAI;AAIb,OAAO,IAAMC,GAAG,GAAGF,MAAM,CAACC,IAAI,CAAC,CAAAE,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,6HAM9B"}
+{"version":3,"file":"Sup.js","names":["styled","Text","TextProps","Sup","withConfig","displayName","componentId"],"sources":["../../../../src/elements/Sup/Sup.tsx"],"sourcesContent":["import styled from \"styled-components\"\nimport { Text, TextProps } from \"../Text\"\n\nexport type SupProps = TextProps\n\nexport const Sup = styled(Text)`\n  display: inline;\n  vertical-align: super;\n  font-size: 75% !important;\n  line-height: 0 !important; // Avoids shifting the line-height\n  font-weight: inherit !important;\n`\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AACtC,SAASC,IAAI,EAAEC,SAAS;AAIxB,OAAO,IAAMC,GAAG,GAAGH,MAAM,CAACC,IAAI,CAAC,CAAAG,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,6HAM9B"}

package/dist/esm/elements/Swiper/Swiper.js

@@ -6,7 +6,7 @@ import React, { Children, createRef, isValidElement, useEffect, useMemo, useRef
 import styled from "styled-components";
 import { useCursor } from "use-cursor";
 import { visuallyDisableScrollbar } from "../../helpers/visuallyDisableScrollbar";
-import { Box } from "../Box";
+import { Box, BoxProps } from "../Box";
 import { CELL_GAP_PADDING_AMOUNT } from "../Carousel";
 import { activeIndex } from "./activeIndex";
 import { percentage } from "./percentage";

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

@@ -1 +1 @@
-{"version":3,"file":"Swiper.js","names":["React","Children","createRef","isValidElement","useEffect","useMemo","useRef","styled","useCursor","visuallyDisableScrollbar","Box","CELL_GAP_PADDING_AMOUNT","activeIndex","percentage","Container","withConfig","displayName","componentId","SwiperRail","defaultProps","display","SwiperCell","Swiper","_ref","_ref$initialIndex","initialIndex","children","_ref$snap","snap","_ref$Rail","Rail","_ref$Cell","Cell","onChange","onPageCountChange","rest","_objectWithoutProperties","_excluded","containerRef","cells","toArray","filter","map","child","ref","_useCursor","initialCursor","max","length","index","cursor","setCursor","cell","current","scrollIntoView","inline","block","rail","handleScroll","progress","viewport","clientWidth","total","scrollWidth","left","scrollLeft","page","addEventListener","passive","removeEventListener","createElement","_extends","mx","my","as","_ref2","i","isLast","key","pr","undefined","style","scrollSnapAlign"],"sources":["../../../../src/elements/Swiper/Swiper.tsx"],"sourcesContent":["import React, {\n  Children,\n  createRef,\n  isValidElement,\n  useEffect,\n  useMemo,\n  useRef,\n} from \"react\"\nimport styled from \"styled-components\"\nimport { useCursor } from \"use-cursor\"\nimport { visuallyDisableScrollbar } from \"../../helpers/visuallyDisableScrollbar\"\nimport { Box, BoxProps } from \"../Box\"\nimport { CELL_GAP_PADDING_AMOUNT } from \"../Carousel\"\nimport { activeIndex } from \"./activeIndex\"\nimport { percentage } from \"./percentage\"\n\nconst Container = styled(Box)`\n  display: flex;\n  height: 100%;\n  padding: 0;\n  list-style: none;\n  overflow-y: hidden;\n  overflow-x: scroll;\n  -webkit-overflow-scrolling: touch;\n  scroll-snap-type: x mandatory;\n  ${visuallyDisableScrollbar}\n`\n\n/** SwiperRailProps */\nexport type SwiperRailProps = BoxProps\n\n/** A `SwiperRail` slides back and forth within the viewport */\nexport const SwiperRail = styled(Box)<{ as?: React.ElementType }>`\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  white-space: nowrap;\n`\n\nSwiperRail.defaultProps = {\n  display: \"flex\",\n}\n\n/** SwiperCellProps */\nexport type SwiperCellProps = BoxProps\n\n/** A `SwiperCell` wraps a single child in the carousel */\nexport const SwiperCell = styled(Box)<{ as?: React.ElementType }>`\n  white-space: normal;\n`\n\ntype ScrollSnapAlign = \"none\" | \"start\" | \"end\" | \"center\"\n\n/** SwiperProps */\nexport type SwiperProps = BoxProps & {\n  initialIndex?: number\n  snap?: ScrollSnapAlign\n  children: React.ReactNode\n  Rail?: typeof SwiperRail | React.FC<React.PropsWithChildren<SwiperRailProps>>\n  /**\n   * If providing a custom `Cell` you must forward a ref so\n   * that cell widths can be calculated.\n   */\n  Cell?: React.ForwardRefExoticComponent<SwiperCellProps>\n  onChange?(index: number): void\n  onPageCountChange?(count: number): void\n}\n\n/**\n * A `Swiper` is like a `Carousel` but for touch devices. It accepts children\n * or a series of children that are JSX elements. It presents them in a\n * horizontal rail and when the width exceeds the width of the viewport, allows\n * for horitonzal swiping (or scrolling) with the option to snap to elements.\n */\nexport const Swiper: React.FC<React.PropsWithChildren<SwiperProps>> = ({\n  initialIndex = 0,\n  children,\n  snap = \"none\",\n  Rail = SwiperRail,\n  Cell = SwiperCell,\n  onChange,\n  onPageCountChange,\n  ...rest\n}) => {\n  const containerRef = useRef<HTMLDivElement | null>(null)\n\n  const cells = useMemo(\n    () =>\n      Children.toArray(children)\n        .filter(isValidElement)\n        .map((child) => ({ child, ref: createRef<HTMLDivElement>() })),\n    [children]\n  )\n\n  const { index, cursor, setCursor } = useCursor({\n    initialCursor: initialIndex,\n    max: cells.length,\n  })\n\n  useEffect(() => {\n    /**\n     * If on initial mount there is an `initialIndex` other than `0`,\n     * scroll it into view. The dependency array is left empty as we explicitly\n     * only want this to run on mount, and ignore any updates to `initialIndex`,\n     * which are handled separately below.\n     */\n    if (initialIndex === 0) return\n    const cell = cells[initialIndex]\n    if (!cell) return\n    cell.ref.current!.scrollIntoView({ inline: \"start\", block: \"nearest\" })\n  }, [])\n\n  useEffect(() => {\n    /**\n     * Since `cursor` tracks progress, if `cursor` and `initialIndex` are out\n     * of sync then that means the index has been changed programmatically\n     * and we should scroll the cell corresponding with that index into view.\n     */\n    if (initialIndex !== cursor) {\n      const cell = cells[initialIndex]\n      if (!cell) return\n      cell.ref.current!.scrollIntoView({ inline: \"start\", block: \"nearest\" })\n    }\n  }, [initialIndex])\n\n  useEffect(() => {\n    // Not mounted\n    if (!containerRef.current) return\n\n    // No need to track progress\n    if (!onChange) return\n\n    const { current: rail } = containerRef\n\n    const handleScroll = () => {\n      const progress = percentage({\n        viewport: rail.clientWidth,\n        total: rail.scrollWidth,\n        left: rail.scrollLeft,\n      })\n\n      const page = activeIndex({ progress, length: cells.length })\n\n      setCursor(page)\n    }\n\n    rail.addEventListener(\"scroll\", handleScroll, { passive: true })\n    return () => {\n      rail.removeEventListener(\"scroll\", handleScroll)\n    }\n  }, [cells])\n\n  useEffect(() => {\n    onChange && onChange(index)\n  }, [onChange, index])\n\n  useEffect(() => {\n    onPageCountChange && onPageCountChange(cells.length)\n  }, [onPageCountChange, cells.length])\n\n  return (\n    <Container ref={containerRef as any} mx={0} my={0} {...rest}>\n      <Rail as=\"ul\">\n        {cells.map(({ child, ref }, i) => {\n          const isLast = i === cells.length - 1\n\n          return (\n            <Cell\n              as=\"li\"\n              key={i}\n              ref={ref}\n              pr={!isLast ? CELL_GAP_PADDING_AMOUNT : undefined}\n              style={{ scrollSnapAlign: snap }}\n            >\n              {child}\n            </Cell>\n          )\n        })}\n      </Rail>\n    </Container>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"Swiper.js","names":["React","Children","createRef","isValidElement","useEffect","useMemo","useRef","styled","useCursor","visuallyDisableScrollbar","Box","BoxProps","CELL_GAP_PADDING_AMOUNT","activeIndex","percentage","Container","withConfig","displayName","componentId","SwiperRail","defaultProps","display","SwiperCell","Swiper","_ref","_ref$initialIndex","initialIndex","children","_ref$snap","snap","_ref$Rail","Rail","_ref$Cell","Cell","onChange","onPageCountChange","rest","_objectWithoutProperties","_excluded","containerRef","cells","toArray","filter","map","child","ref","_useCursor","initialCursor","max","length","index","cursor","setCursor","cell","current","scrollIntoView","inline","block","rail","handleScroll","progress","viewport","clientWidth","total","scrollWidth","left","scrollLeft","page","addEventListener","passive","removeEventListener","createElement","_extends","mx","my","as","_ref2","i","isLast","key","pr","undefined","style","scrollSnapAlign"],"sources":["../../../../src/elements/Swiper/Swiper.tsx"],"sourcesContent":["import React, {\n  Children,\n  createRef,\n  isValidElement,\n  useEffect,\n  useMemo,\n  useRef,\n} from \"react\"\nimport styled from \"styled-components\"\nimport { useCursor } from \"use-cursor\"\nimport { visuallyDisableScrollbar } from \"../../helpers/visuallyDisableScrollbar\"\nimport { Box, BoxProps } from \"../Box\"\nimport { CELL_GAP_PADDING_AMOUNT } from \"../Carousel\"\nimport { activeIndex } from \"./activeIndex\"\nimport { percentage } from \"./percentage\"\n\nconst Container = styled(Box)`\n  display: flex;\n  height: 100%;\n  padding: 0;\n  list-style: none;\n  overflow-y: hidden;\n  overflow-x: scroll;\n  -webkit-overflow-scrolling: touch;\n  scroll-snap-type: x mandatory;\n  ${visuallyDisableScrollbar}\n`\n\n/** SwiperRailProps */\nexport type SwiperRailProps = BoxProps\n\n/** A `SwiperRail` slides back and forth within the viewport */\nexport const SwiperRail = styled(Box)<{ as?: React.ElementType }>`\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  white-space: nowrap;\n`\n\nSwiperRail.defaultProps = {\n  display: \"flex\",\n}\n\n/** SwiperCellProps */\nexport type SwiperCellProps = BoxProps\n\n/** A `SwiperCell` wraps a single child in the carousel */\nexport const SwiperCell = styled(Box)<{ as?: React.ElementType }>`\n  white-space: normal;\n`\n\ntype ScrollSnapAlign = \"none\" | \"start\" | \"end\" | \"center\"\n\n/** SwiperProps */\nexport type SwiperProps = BoxProps & {\n  initialIndex?: number\n  snap?: ScrollSnapAlign\n  children: React.ReactNode\n  Rail?: typeof SwiperRail | React.FC<React.PropsWithChildren<SwiperRailProps>>\n  /**\n   * If providing a custom `Cell` you must forward a ref so\n   * that cell widths can be calculated.\n   */\n  Cell?: React.ForwardRefExoticComponent<SwiperCellProps>\n  onChange?(index: number): void\n  onPageCountChange?(count: number): void\n}\n\n/**\n * A `Swiper` is like a `Carousel` but for touch devices. It accepts children\n * or a series of children that are JSX elements. It presents them in a\n * horizontal rail and when the width exceeds the width of the viewport, allows\n * for horitonzal swiping (or scrolling) with the option to snap to elements.\n */\nexport const Swiper: React.FC<React.PropsWithChildren<SwiperProps>> = ({\n  initialIndex = 0,\n  children,\n  snap = \"none\",\n  Rail = SwiperRail,\n  Cell = SwiperCell,\n  onChange,\n  onPageCountChange,\n  ...rest\n}) => {\n  const containerRef = useRef<HTMLDivElement | null>(null)\n\n  const cells = useMemo(\n    () =>\n      Children.toArray(children)\n        .filter(isValidElement)\n        .map((child) => ({ child, ref: createRef<HTMLDivElement>() })),\n    [children]\n  )\n\n  const { index, cursor, setCursor } = useCursor({\n    initialCursor: initialIndex,\n    max: cells.length,\n  })\n\n  useEffect(() => {\n    /**\n     * If on initial mount there is an `initialIndex` other than `0`,\n     * scroll it into view. The dependency array is left empty as we explicitly\n     * only want this to run on mount, and ignore any updates to `initialIndex`,\n     * which are handled separately below.\n     */\n    if (initialIndex === 0) return\n    const cell = cells[initialIndex]\n    if (!cell) return\n    cell.ref.current!.scrollIntoView({ inline: \"start\", block: \"nearest\" })\n  }, [])\n\n  useEffect(() => {\n    /**\n     * Since `cursor` tracks progress, if `cursor` and `initialIndex` are out\n     * of sync then that means the index has been changed programmatically\n     * and we should scroll the cell corresponding with that index into view.\n     */\n    if (initialIndex !== cursor) {\n      const cell = cells[initialIndex]\n      if (!cell) return\n      cell.ref.current!.scrollIntoView({ inline: \"start\", block: \"nearest\" })\n    }\n  }, [initialIndex])\n\n  useEffect(() => {\n    // Not mounted\n    if (!containerRef.current) return\n\n    // No need to track progress\n    if (!onChange) return\n\n    const { current: rail } = containerRef\n\n    const handleScroll = () => {\n      const progress = percentage({\n        viewport: rail.clientWidth,\n        total: rail.scrollWidth,\n        left: rail.scrollLeft,\n      })\n\n      const page = activeIndex({ progress, length: cells.length })\n\n      setCursor(page)\n    }\n\n    rail.addEventListener(\"scroll\", handleScroll, { passive: true })\n    return () => {\n      rail.removeEventListener(\"scroll\", handleScroll)\n    }\n  }, [cells])\n\n  useEffect(() => {\n    onChange && onChange(index)\n  }, [onChange, index])\n\n  useEffect(() => {\n    onPageCountChange && onPageCountChange(cells.length)\n  }, [onPageCountChange, cells.length])\n\n  return (\n    <Container ref={containerRef as any} mx={0} my={0} {...rest}>\n      <Rail as=\"ul\">\n        {cells.map(({ child, ref }, i) => {\n          const isLast = i === cells.length - 1\n\n          return (\n            <Cell\n              as=\"li\"\n              key={i}\n              ref={ref}\n              pr={!isLast ? CELL_GAP_PADDING_AMOUNT : undefined}\n              style={{ scrollSnapAlign: snap }}\n            >\n              {child}\n            </Cell>\n          )\n        })}\n      </Rail>\n    </Container>\n  )\n}\n"],"mappings":"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"}

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

@@ -18,7 +18,7 @@ import { CarouselBar } from "../CarouselBar";
 import { Clickable } from "../Clickable";
 import { ProgressDots } from "../ProgressDots";
 import { Text } from "../Text";
-import { Swiper, SwiperCell, SwiperRail } from "./";
+import { Swiper, SwiperCell, SwiperProps, SwiperRail } from "./";
 import { STORYBOOK_PROPS_BLOCKLIST } from "../../utils/storybookBlocklist";
 var LOREM = "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quis dicta sunt nihil perspiciatis aperiam asperiores, earum facere repellendus in veniam, mollitia, ducimus delectus perferendis beatae facilis molestiae et ad quaerat!";
 var Demo = function Demo(_ref) {

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

@@ -1 +1 @@
-{"version":3,"file":"Swiper.story.js","names":["React","useEffect","useState","Box","CarouselBar","Clickable","ProgressDots","Text","Swiper","SwiperCell","SwiperRail","STORYBOOK_PROPS_BLOCKLIST","LOREM","Demo","_ref","_ref$widths","widths","Array","from","map","_","_ref$heights","heights","rest","_objectWithoutProperties","_excluded","createElement","mx","my","width","i","key","height","length","bg","border","borderColor","p","textAlign","variant","displayName","component","title","tags","parameters","docs","description","controls","exclude","Simple","render","WithHorizontalMargins","Fragment","SimpleWithLeftEdgeSnapping","snap","ProgressBarExample","_useState","_useState2","_slicedToArray","index","setIndex","progress","onChange","percentComplete","ProgressDotsExample","_useState3","_useState4","amount","activeIndex","CustomRailAndCells","Cell","forwardRef","props","ref","_extends","display","pr","Rail","DynamicItems","_useState5","_useState6","_useState7","_useState8","setWidths","interval","setInterval","prevWidths","concat","_toConsumableArray","clearInterval","chromatic","disable","SwiperWithText","InitialIndexOnMount","initialIndex","NavigateViaProps","_useState9","_useState10","resetIndex","justifyContent","onClick","OverwritingDefaultMargins","mt","ml","ConditionalChildren"],"sources":["../../../../src/elements/Swiper/Swiper.story.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\"\nimport { Box } from \"../Box\"\nimport { CarouselBar } from \"../CarouselBar\"\nimport { Clickable } from \"../Clickable\"\nimport { ProgressDots } from \"../ProgressDots\"\nimport { Text } from \"../Text\"\nimport { Swiper, SwiperCell, SwiperProps, SwiperRail } from \"./\"\nimport { STORYBOOK_PROPS_BLOCKLIST } from \"../../utils/storybookBlocklist\"\n\nconst LOREM =\n  \"Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quis dicta sunt nihil perspiciatis aperiam asperiores, earum facere repellendus in veniam, mollitia, ducimus delectus perferendis beatae facilis molestiae et ad quaerat!\"\n\nconst Demo = ({\n  widths = Array.from(Array(25)).map((_) => 300),\n  heights = [400],\n  ...rest\n}: {\n  widths?: Array<number | string>\n  heights?: number[]\n} & Omit<SwiperProps, \"children\">) => {\n  return (\n    <Box mx={[2, 4]} my={2}>\n      <Swiper {...rest}>\n        {widths.map((width, i) => (\n          <Clickable\n            key={i}\n            width={width}\n            height={heights[i % heights.length]}\n            bg=\"mono10\"\n            border=\"1px solid\"\n            borderColor=\"mono30\"\n            p={1}\n            textAlign=\"center\"\n          >\n            <Text variant=\"xs\">{i + 1}</Text>\n          </Clickable>\n        ))}\n      </Swiper>\n    </Box>\n  )\n}\n\nexport default {\n  component: Swiper,\n  title: \"Components/Swiper\",\n  tags: [\"autodocs\"],\n  parameters: {\n    docs: {\n      description: {\n        component:\n          \"A swiper/carousel component with horizontal scrolling, navigation, and progress indicators.\",\n      },\n      controls: {\n        exclude: STORYBOOK_PROPS_BLOCKLIST,\n      },\n    },\n  },\n}\n\nexport const Simple = {\n  render: () => <Demo />,\n}\n\nexport const WithHorizontalMargins = {\n  render: () => {\n    return (\n      <>\n        <Text>Should be flush with horizontal edges</Text>\n        <Demo mx={[-2, -4]} />\n      </>\n    )\n  },\n}\n\nexport const SimpleWithLeftEdgeSnapping = {\n  render: () => <Demo snap=\"start\" />,\n}\n\nexport const ProgressBarExample = {\n  render: () => {\n    const widths = Array.from(Array(10)).map((_) => 300)\n    const [index, setIndex] = useState(0)\n    const progress = (index * 100) / (widths.length - 1)\n\n    return (\n      <>\n        <Demo widths={widths} onChange={setIndex} />\n        <CarouselBar percentComplete={progress} />\n      </>\n    )\n  },\n}\n\nexport const ProgressDotsExample = {\n  render: () => {\n    const widths = Array.from(Array(10)).map((_) => 300)\n    const [index, setIndex] = useState(0)\n\n    return (\n      <>\n        <Demo widths={widths} onChange={setIndex} />\n        <ProgressDots\n          variant=\"dash\"\n          amount={widths.length}\n          activeIndex={index}\n        />\n      </>\n    )\n  },\n}\n\nexport const CustomRailAndCells = {\n  render: () => {\n    return (\n      <Demo\n        snap=\"start\"\n        widths={[\"100%\", \"100%\", \"100%\", \"100%\"]}\n        // eslint-disable-next-line react/display-name\n        Cell={React.forwardRef((props, ref) => {\n          return (\n            <SwiperCell\n              {...props}\n              ref={ref as any}\n              display=\"inline-flex\"\n              width=\"100%\"\n              pr={0}\n            />\n          )\n        })}\n        Rail={(props) => {\n          return <SwiperRail {...props} display=\"block\" />\n        }}\n      />\n    )\n  },\n}\n\nexport const DynamicItems = {\n  render: () => {\n    const [index, setIndex] = useState(0)\n    const [widths, setWidths] = useState([300])\n    useEffect(() => {\n      const interval = setInterval(() => {\n        setWidths((prevWidths) => [...prevWidths, 300])\n      }, 500)\n      return () => clearInterval(interval)\n    }, [])\n\n    return (\n      <>\n        <Demo widths={widths} onChange={setIndex} />\n        <ProgressDots amount={widths.length} activeIndex={index} />\n      </>\n    )\n  },\n  parameters: { chromatic: { disable: true } },\n}\n\nexport const SwiperWithText = {\n  render: () => {\n    return (\n      <Box mx={[2, 4]} my={2}>\n        <Swiper>\n          <Text bg=\"mono10\" p={1} width={300}>\n            {LOREM}\n          </Text>\n\n          <Text bg=\"mono10\" p={1} width={300}>\n            {LOREM}\n          </Text>\n\n          <Text bg=\"mono10\" p={1} width={300}>\n            {LOREM}\n          </Text>\n\n          <Text bg=\"mono10\" p={1} width={300}>\n            {LOREM}\n          </Text>\n\n          <Text bg=\"mono10\" p={1} width={300}>\n            {LOREM}\n          </Text>\n        </Swiper>\n      </Box>\n    )\n  },\n}\n\nexport const InitialIndexOnMount = {\n  render: () => <Demo initialIndex={3} />,\n}\n\nexport const NavigateViaProps = {\n  render: () => {\n    const [initialIndex, resetIndex] = useState(0)\n    return (\n      <Box>\n        <Demo initialIndex={initialIndex} onChange={resetIndex} />\n        <Box display=\"flex\" justifyContent=\"space-around\">\n          <Clickable onClick={() => resetIndex(0)}>\n            Navigate to page 1\n          </Clickable>\n          <Clickable onClick={() => resetIndex(1)}>\n            Navigate to page 2\n          </Clickable>\n          <Clickable onClick={() => resetIndex(2)}>\n            Navigate to page 3\n          </Clickable>\n          <Clickable onClick={() => resetIndex(3)}>\n            Navigate to page 4\n          </Clickable>\n        </Box>\n      </Box>\n    )\n  },\n}\n\nexport const OverwritingDefaultMargins = {\n  render: () => <Demo mt={6} ml={6} />,\n}\n\nexport const ConditionalChildren = {\n  render: () => {\n    return (\n      <Box mx={[2, 4]} my={2}>\n        <Swiper>\n          <Box bg=\"mono10\" width={300} height={300} p={2}>\n            <Text variant=\"xs\">1</Text>\n          </Box>\n\n          <Box bg=\"mono10\" width={300} height={300} p={2}>\n            <Text variant=\"xs\">2</Text>\n          </Box>\n\n          {false && (\n            <Box bg=\"mono10\" width={300} height={300} p={2}>\n              <Text variant=\"xs\">3</Text>\n            </Box>\n          )}\n\n          {true && (\n            <Box bg=\"mono10\" width={300} height={300} p={2}>\n              <Text variant=\"xs\">4</Text>\n            </Box>\n          )}\n\n          <Box bg=\"mono10\" width={300} height={300} p={2}>\n            <Text variant=\"xs\">5</Text>\n          </Box>\n\n          <Box bg=\"mono10\" width={300} height={300} p={2}>\n            <Text variant=\"xs\">6</Text>\n          </Box>\n        </Swiper>\n      </Box>\n    )\n  },\n}\n"],"mappings":"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"}
+{"version":3,"file":"Swiper.story.js","names":["React","useEffect","useState","Box","CarouselBar","Clickable","ProgressDots","Text","Swiper","SwiperCell","SwiperProps","SwiperRail","STORYBOOK_PROPS_BLOCKLIST","LOREM","Demo","_ref","_ref$widths","widths","Array","from","map","_","_ref$heights","heights","rest","_objectWithoutProperties","_excluded","createElement","mx","my","width","i","key","height","length","bg","border","borderColor","p","textAlign","variant","displayName","component","title","tags","parameters","docs","description","controls","exclude","Simple","render","WithHorizontalMargins","Fragment","SimpleWithLeftEdgeSnapping","snap","ProgressBarExample","_useState","_useState2","_slicedToArray","index","setIndex","progress","onChange","percentComplete","ProgressDotsExample","_useState3","_useState4","amount","activeIndex","CustomRailAndCells","Cell","forwardRef","props","ref","_extends","display","pr","Rail","DynamicItems","_useState5","_useState6","_useState7","_useState8","setWidths","interval","setInterval","prevWidths","concat","_toConsumableArray","clearInterval","chromatic","disable","SwiperWithText","InitialIndexOnMount","initialIndex","NavigateViaProps","_useState9","_useState10","resetIndex","justifyContent","onClick","OverwritingDefaultMargins","mt","ml","ConditionalChildren"],"sources":["../../../../src/elements/Swiper/Swiper.story.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\"\nimport { Box } from \"../Box\"\nimport { CarouselBar } from \"../CarouselBar\"\nimport { Clickable } from \"../Clickable\"\nimport { ProgressDots } from \"../ProgressDots\"\nimport { Text } from \"../Text\"\nimport { Swiper, SwiperCell, SwiperProps, SwiperRail } from \"./\"\nimport { STORYBOOK_PROPS_BLOCKLIST } from \"../../utils/storybookBlocklist\"\n\nconst LOREM =\n  \"Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quis dicta sunt nihil perspiciatis aperiam asperiores, earum facere repellendus in veniam, mollitia, ducimus delectus perferendis beatae facilis molestiae et ad quaerat!\"\n\nconst Demo = ({\n  widths = Array.from(Array(25)).map((_) => 300),\n  heights = [400],\n  ...rest\n}: {\n  widths?: Array<number | string>\n  heights?: number[]\n} & Omit<SwiperProps, \"children\">) => {\n  return (\n    <Box mx={[2, 4]} my={2}>\n      <Swiper {...rest}>\n        {widths.map((width, i) => (\n          <Clickable\n            key={i}\n            width={width}\n            height={heights[i % heights.length]}\n            bg=\"mono10\"\n            border=\"1px solid\"\n            borderColor=\"mono30\"\n            p={1}\n            textAlign=\"center\"\n          >\n            <Text variant=\"xs\">{i + 1}</Text>\n          </Clickable>\n        ))}\n      </Swiper>\n    </Box>\n  )\n}\n\nexport default {\n  component: Swiper,\n  title: \"Components/Swiper\",\n  tags: [\"autodocs\"],\n  parameters: {\n    docs: {\n      description: {\n        component:\n          \"A swiper/carousel component with horizontal scrolling, navigation, and progress indicators.\",\n      },\n      controls: {\n        exclude: STORYBOOK_PROPS_BLOCKLIST,\n      },\n    },\n  },\n}\n\nexport const Simple = {\n  render: () => <Demo />,\n}\n\nexport const WithHorizontalMargins = {\n  render: () => {\n    return (\n      <>\n        <Text>Should be flush with horizontal edges</Text>\n        <Demo mx={[-2, -4]} />\n      </>\n    )\n  },\n}\n\nexport const SimpleWithLeftEdgeSnapping = {\n  render: () => <Demo snap=\"start\" />,\n}\n\nexport const ProgressBarExample = {\n  render: () => {\n    const widths = Array.from(Array(10)).map((_) => 300)\n    const [index, setIndex] = useState(0)\n    const progress = (index * 100) / (widths.length - 1)\n\n    return (\n      <>\n        <Demo widths={widths} onChange={setIndex} />\n        <CarouselBar percentComplete={progress} />\n      </>\n    )\n  },\n}\n\nexport const ProgressDotsExample = {\n  render: () => {\n    const widths = Array.from(Array(10)).map((_) => 300)\n    const [index, setIndex] = useState(0)\n\n    return (\n      <>\n        <Demo widths={widths} onChange={setIndex} />\n        <ProgressDots\n          variant=\"dash\"\n          amount={widths.length}\n          activeIndex={index}\n        />\n      </>\n    )\n  },\n}\n\nexport const CustomRailAndCells = {\n  render: () => {\n    return (\n      <Demo\n        snap=\"start\"\n        widths={[\"100%\", \"100%\", \"100%\", \"100%\"]}\n        // eslint-disable-next-line react/display-name\n        Cell={React.forwardRef((props, ref) => {\n          return (\n            <SwiperCell\n              {...props}\n              ref={ref as any}\n              display=\"inline-flex\"\n              width=\"100%\"\n              pr={0}\n            />\n          )\n        })}\n        Rail={(props) => {\n          return <SwiperRail {...props} display=\"block\" />\n        }}\n      />\n    )\n  },\n}\n\nexport const DynamicItems = {\n  render: () => {\n    const [index, setIndex] = useState(0)\n    const [widths, setWidths] = useState([300])\n    useEffect(() => {\n      const interval = setInterval(() => {\n        setWidths((prevWidths) => [...prevWidths, 300])\n      }, 500)\n      return () => clearInterval(interval)\n    }, [])\n\n    return (\n      <>\n        <Demo widths={widths} onChange={setIndex} />\n        <ProgressDots amount={widths.length} activeIndex={index} />\n      </>\n    )\n  },\n  parameters: { chromatic: { disable: true } },\n}\n\nexport const SwiperWithText = {\n  render: () => {\n    return (\n      <Box mx={[2, 4]} my={2}>\n        <Swiper>\n          <Text bg=\"mono10\" p={1} width={300}>\n            {LOREM}\n          </Text>\n\n          <Text bg=\"mono10\" p={1} width={300}>\n            {LOREM}\n          </Text>\n\n          <Text bg=\"mono10\" p={1} width={300}>\n            {LOREM}\n          </Text>\n\n          <Text bg=\"mono10\" p={1} width={300}>\n            {LOREM}\n          </Text>\n\n          <Text bg=\"mono10\" p={1} width={300}>\n            {LOREM}\n          </Text>\n        </Swiper>\n      </Box>\n    )\n  },\n}\n\nexport const InitialIndexOnMount = {\n  render: () => <Demo initialIndex={3} />,\n}\n\nexport const NavigateViaProps = {\n  render: () => {\n    const [initialIndex, resetIndex] = useState(0)\n    return (\n      <Box>\n        <Demo initialIndex={initialIndex} onChange={resetIndex} />\n        <Box display=\"flex\" justifyContent=\"space-around\">\n          <Clickable onClick={() => resetIndex(0)}>\n            Navigate to page 1\n          </Clickable>\n          <Clickable onClick={() => resetIndex(1)}>\n            Navigate to page 2\n          </Clickable>\n          <Clickable onClick={() => resetIndex(2)}>\n            Navigate to page 3\n          </Clickable>\n          <Clickable onClick={() => resetIndex(3)}>\n            Navigate to page 4\n          </Clickable>\n        </Box>\n      </Box>\n    )\n  },\n}\n\nexport const OverwritingDefaultMargins = {\n  render: () => <Demo mt={6} ml={6} />,\n}\n\nexport const ConditionalChildren = {\n  render: () => {\n    return (\n      <Box mx={[2, 4]} my={2}>\n        <Swiper>\n          <Box bg=\"mono10\" width={300} height={300} p={2}>\n            <Text variant=\"xs\">1</Text>\n          </Box>\n\n          <Box bg=\"mono10\" width={300} height={300} p={2}>\n            <Text variant=\"xs\">2</Text>\n          </Box>\n\n          {false && (\n            <Box bg=\"mono10\" width={300} height={300} p={2}>\n              <Text variant=\"xs\">3</Text>\n            </Box>\n          )}\n\n          {true && (\n            <Box bg=\"mono10\" width={300} height={300} p={2}>\n              <Text variant=\"xs\">4</Text>\n            </Box>\n          )}\n\n          <Box bg=\"mono10\" width={300} height={300} p={2}>\n            <Text variant=\"xs\">5</Text>\n          </Box>\n\n          <Box bg=\"mono10\" width={300} height={300} p={2}>\n            <Text variant=\"xs\">6</Text>\n          </Box>\n        </Swiper>\n      </Box>\n    )\n  },\n}\n"],"mappings":"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"}

package/dist/esm/elements/Tabs/Tabs.js

@@ -13,7 +13,7 @@ import styled from "styled-components";
 import { themeGet } from "@styled-system/theme-get";
 import { flattenChildren } from "../../helpers/flattenChildren";
 import { useUpdateEffect } from "../../utils/useUpdateEffect";
-import { BaseTabs } from "../BaseTabs";
+import { BaseTabs, BaseTabsProps } from "../BaseTabs";
 import { BaseTab } from "../BaseTabs";
 import { Clickable } from "../Clickable";
 import { usePrevious } from "../../utils/usePrevious";

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

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","names":["React","createRef","useCallback","useEffect","useMemo","useRef","useState","styled","themeGet","flattenChildren","useUpdateEffect","BaseTabs","BaseTab","Clickable","usePrevious","useTabs","_ref","children","_ref$initialTabIndex","initialTabIndex","onChange","tabs","map","child","ref","previousInitialTabIndex","_useState","_useState2","_slicedToArray","activeTabIndex","setActiveTabIndex","safeActiveTabIndex","length","Math","min","_ref$current$scrollTo","_ref$current","current","tab","position","offsetLeft","scrollTo","call","left","behavior","handleClick","index","_tabs$index$child$pro","tabIndex","name","props","data","Container","withConfig","displayName","componentId","Tabs","_ref2","_tabs$activeTabIndex","_ref2$initialTabIndex","_ref2$mb","mb","rest","_objectWithoutProperties","_excluded","_useTabs","createElement","Fragment","_extends","i","key","onClick","flex","active","variant","Tab","_ref3"],"sources":["../../../../src/elements/Tabs/Tabs.tsx"],"sourcesContent":["import React, {\n  createRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\"\nimport styled from \"styled-components\"\nimport { themeGet } from \"@styled-system/theme-get\"\nimport { flattenChildren } from \"../../helpers/flattenChildren\"\nimport { useUpdateEffect } from \"../../utils/useUpdateEffect\"\nimport { BaseTabs, BaseTabsProps } from \"../BaseTabs\"\nimport { BaseTab } from \"../BaseTabs\"\nimport { Clickable } from \"../Clickable\"\nimport { usePrevious } from \"../../utils/usePrevious\"\n\nexport interface TabLike extends JSX.Element {\n  props: TabProps\n}\n\nexport interface TabInfo extends TabProps {\n  /** Index of the newly selected Tab */\n  tabIndex: number\n  /**\n   * Arbitrary data that can be associated with a Tab.\n   * Will be passed to the parent <Tabs>'s onChange handler.\n   */\n  data: any\n}\n\nexport interface TabsProps extends BaseTabsProps {\n  /** Index of the Tab that should be pre-selected */\n  initialTabIndex?: number\n  /** @deprecated */\n  autoScroll?: boolean\n  /** Function that will be called when a new Tab is selected */\n  onChange?: (tabInfo?: TabInfo) => void\n}\n\n/** Tabs functionality */\nexport const useTabs = ({\n  children,\n  initialTabIndex = 0,\n  onChange,\n}: TabsProps) => {\n  const tabs = useMemo(\n    () =>\n      flattenChildren<TabLike>(children).map((child) => ({\n        child,\n        ref: createRef<HTMLButtonElement | null>(),\n      })),\n    [children]\n  )\n\n  const previousInitialTabIndex = usePrevious(initialTabIndex)\n  const [activeTabIndex, setActiveTabIndex] = useState<number>(initialTabIndex)\n\n  // If the `initialTabIndex` changes; update the active one\n  useUpdateEffect(() => {\n    // Only update if the `initialTabIndex` has changed externally\n    if (initialTabIndex === previousInitialTabIndex) return\n    setActiveTabIndex(initialTabIndex)\n  }, [initialTabIndex, tabs])\n\n  // Compute a safe index for rendering (clamped to valid range)\n  // Ensures we never access an out-of-bounds index during removal\n  const safeActiveTabIndex =\n    tabs.length === 0 ? 0 : Math.min(activeTabIndex, tabs.length - 1)\n\n  // Ref of the tabs viewport\n  const ref = useRef<HTMLDivElement | null>(null)\n\n  // Scroll to active tab when `activeTabIndex` changes\n  useEffect(() => {\n    if (!ref.current) return\n    if (tabs.length === 0 || safeActiveTabIndex >= tabs.length) return\n    const tab = tabs[safeActiveTabIndex].ref.current\n    if (!tab) return\n    const position = tab.offsetLeft\n    ref.current.scrollTo?.({ left: position, behavior: \"smooth\" })\n  }, [safeActiveTabIndex, tabs.length])\n\n  const handleClick = useCallback(\n    (index: number) => {\n      return () => {\n        if (index === activeTabIndex) return\n\n        setActiveTabIndex(index)\n\n        if (!onChange) return\n\n        onChange({\n          tabIndex: index,\n          name: tabs[index].child.props.name,\n          data: tabs[index].child.props.data ?? {},\n        })\n      }\n    },\n    [activeTabIndex, onChange, tabs]\n  )\n\n  return {\n    activeTabIndex: safeActiveTabIndex,\n    handleClick,\n    ref,\n    tabs,\n  }\n}\n\nconst Container = styled(Clickable)`\n  &:focus-visible {\n    outline: none;\n    z-index: 2;\n    box-shadow: inset 0 0 0 1px ${themeGet(\"colors.blue100\")};\n  }\n`\n\n/** A tab bar navigation component */\nexport const Tabs: React.FC<React.PropsWithChildren<TabsProps>> = ({\n  children,\n  initialTabIndex = 0,\n  mb = 2,\n  onChange,\n  ...rest\n}) => {\n  const { tabs, activeTabIndex, handleClick, ref } = useTabs({\n    children,\n    initialTabIndex,\n    onChange,\n  })\n\n  if (tabs.length === 0) return null\n\n  return (\n    <>\n      <BaseTabs ref={ref} mb={mb} {...rest}>\n        {tabs.map((tab, i) => {\n          return (\n            <Container\n              key={i}\n              ref={tab.ref as any}\n              aria-selected={i === activeTabIndex}\n              onClick={handleClick(i)}\n              flex={1}\n            >\n              <BaseTab active={i === activeTabIndex} variant=\"sm\">\n                <span>{tab.child.props.name}</span>\n              </BaseTab>\n            </Container>\n          )\n        })}\n      </BaseTabs>\n\n      {tabs[activeTabIndex]?.child}\n    </>\n  )\n}\n\nexport interface TabProps {\n  /** Display name of the Tab */\n  name: string | JSX.Element\n  /**\n   * Arbitrary data that can be associated with a Tab.\n   * Will be passed to the parent <Tabs>'s onChange handler.\n   */\n  data?: any\n}\n\n/**\n * An individual tab.\n * Does nothing on its own; props are dealt with inside of Tabs.\n */\nexport const Tab: React.FC<React.PropsWithChildren<TabProps>> = ({\n  children,\n}) => <>{children}</>\n"],"mappings":"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"}
+{"version":3,"file":"Tabs.js","names":["React","createRef","useCallback","useEffect","useMemo","useRef","useState","styled","themeGet","flattenChildren","useUpdateEffect","BaseTabs","BaseTabsProps","BaseTab","Clickable","usePrevious","useTabs","_ref","children","_ref$initialTabIndex","initialTabIndex","onChange","tabs","map","child","ref","previousInitialTabIndex","_useState","_useState2","_slicedToArray","activeTabIndex","setActiveTabIndex","safeActiveTabIndex","length","Math","min","_ref$current$scrollTo","_ref$current","current","tab","position","offsetLeft","scrollTo","call","left","behavior","handleClick","index","_tabs$index$child$pro","tabIndex","name","props","data","Container","withConfig","displayName","componentId","Tabs","_ref2","_tabs$activeTabIndex","_ref2$initialTabIndex","_ref2$mb","mb","rest","_objectWithoutProperties","_excluded","_useTabs","createElement","Fragment","_extends","i","key","onClick","flex","active","variant","Tab","_ref3"],"sources":["../../../../src/elements/Tabs/Tabs.tsx"],"sourcesContent":["import React, {\n  createRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\"\nimport styled from \"styled-components\"\nimport { themeGet } from \"@styled-system/theme-get\"\nimport { flattenChildren } from \"../../helpers/flattenChildren\"\nimport { useUpdateEffect } from \"../../utils/useUpdateEffect\"\nimport { BaseTabs, BaseTabsProps } from \"../BaseTabs\"\nimport { BaseTab } from \"../BaseTabs\"\nimport { Clickable } from \"../Clickable\"\nimport { usePrevious } from \"../../utils/usePrevious\"\n\nexport interface TabLike extends JSX.Element {\n  props: TabProps\n}\n\nexport interface TabInfo extends TabProps {\n  /** Index of the newly selected Tab */\n  tabIndex: number\n  /**\n   * Arbitrary data that can be associated with a Tab.\n   * Will be passed to the parent <Tabs>'s onChange handler.\n   */\n  data: any\n}\n\nexport interface TabsProps extends BaseTabsProps {\n  /** Index of the Tab that should be pre-selected */\n  initialTabIndex?: number\n  /** @deprecated */\n  autoScroll?: boolean\n  /** Function that will be called when a new Tab is selected */\n  onChange?: (tabInfo?: TabInfo) => void\n}\n\n/** Tabs functionality */\nexport const useTabs = ({\n  children,\n  initialTabIndex = 0,\n  onChange,\n}: TabsProps) => {\n  const tabs = useMemo(\n    () =>\n      flattenChildren<TabLike>(children).map((child) => ({\n        child,\n        ref: createRef<HTMLButtonElement | null>(),\n      })),\n    [children]\n  )\n\n  const previousInitialTabIndex = usePrevious(initialTabIndex)\n  const [activeTabIndex, setActiveTabIndex] = useState<number>(initialTabIndex)\n\n  // If the `initialTabIndex` changes; update the active one\n  useUpdateEffect(() => {\n    // Only update if the `initialTabIndex` has changed externally\n    if (initialTabIndex === previousInitialTabIndex) return\n    setActiveTabIndex(initialTabIndex)\n  }, [initialTabIndex, tabs])\n\n  // Compute a safe index for rendering (clamped to valid range)\n  // Ensures we never access an out-of-bounds index during removal\n  const safeActiveTabIndex =\n    tabs.length === 0 ? 0 : Math.min(activeTabIndex, tabs.length - 1)\n\n  // Ref of the tabs viewport\n  const ref = useRef<HTMLDivElement | null>(null)\n\n  // Scroll to active tab when `activeTabIndex` changes\n  useEffect(() => {\n    if (!ref.current) return\n    if (tabs.length === 0 || safeActiveTabIndex >= tabs.length) return\n    const tab = tabs[safeActiveTabIndex].ref.current\n    if (!tab) return\n    const position = tab.offsetLeft\n    ref.current.scrollTo?.({ left: position, behavior: \"smooth\" })\n  }, [safeActiveTabIndex, tabs.length])\n\n  const handleClick = useCallback(\n    (index: number) => {\n      return () => {\n        if (index === activeTabIndex) return\n\n        setActiveTabIndex(index)\n\n        if (!onChange) return\n\n        onChange({\n          tabIndex: index,\n          name: tabs[index].child.props.name,\n          data: tabs[index].child.props.data ?? {},\n        })\n      }\n    },\n    [activeTabIndex, onChange, tabs]\n  )\n\n  return {\n    activeTabIndex: safeActiveTabIndex,\n    handleClick,\n    ref,\n    tabs,\n  }\n}\n\nconst Container = styled(Clickable)`\n  &:focus-visible {\n    outline: none;\n    z-index: 2;\n    box-shadow: inset 0 0 0 1px ${themeGet(\"colors.blue100\")};\n  }\n`\n\n/** A tab bar navigation component */\nexport const Tabs: React.FC<React.PropsWithChildren<TabsProps>> = ({\n  children,\n  initialTabIndex = 0,\n  mb = 2,\n  onChange,\n  ...rest\n}) => {\n  const { tabs, activeTabIndex, handleClick, ref } = useTabs({\n    children,\n    initialTabIndex,\n    onChange,\n  })\n\n  if (tabs.length === 0) return null\n\n  return (\n    <>\n      <BaseTabs ref={ref} mb={mb} {...rest}>\n        {tabs.map((tab, i) => {\n          return (\n            <Container\n              key={i}\n              ref={tab.ref as any}\n              aria-selected={i === activeTabIndex}\n              onClick={handleClick(i)}\n              flex={1}\n            >\n              <BaseTab active={i === activeTabIndex} variant=\"sm\">\n                <span>{tab.child.props.name}</span>\n              </BaseTab>\n            </Container>\n          )\n        })}\n      </BaseTabs>\n\n      {tabs[activeTabIndex]?.child}\n    </>\n  )\n}\n\nexport interface TabProps {\n  /** Display name of the Tab */\n  name: string | JSX.Element\n  /**\n   * Arbitrary data that can be associated with a Tab.\n   * Will be passed to the parent <Tabs>'s onChange handler.\n   */\n  data?: any\n}\n\n/**\n * An individual tab.\n * Does nothing on its own; props are dealt with inside of Tabs.\n */\nexport const Tab: React.FC<React.PropsWithChildren<TabProps>> = ({\n  children,\n}) => <>{children}</>\n"],"mappings":"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"}

package/dist/esm/elements/Text/Text.js

@@ -1,7 +1,8 @@
-import { TEXT_VARIANTS } from "@artsy/palette-tokens/dist/typography/v3";
+import { TEXT_VARIANTS, TextVariant } from "@artsy/palette-tokens/dist/typography/v3";
 import styled, { css } from "styled-components";
-import { color, compose, style, system, typography, variant } from "styled-system";
-import { Box } from "../Box";
+import { color, ColorProps, compose, ResponsiveValue, style, system, typography, TypographyProps, variant } from "styled-system";
+import { Color } from "../../Theme";
+import { Box, BoxProps } from "../Box";
 
 /** BaseTextProps */
 

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

@@ -1 +1 @@
-{"version":3,"file":"Text.js","names":["TEXT_VARIANTS","styled","css","color","compose","style","system","typography","variant","Box","textColor","prop","cssProperty","key","textTransform","textMixin","overflowEllipsisMixin","hyphenate","Text","withConfig","displayName","componentId","variants","props","overflowEllipsis","lineClamp","defaultProps","fontFamily"],"sources":["../../../../src/elements/Text/Text.tsx"],"sourcesContent":["import {\n  TEXT_VARIANTS,\n  TextVariant,\n} from \"@artsy/palette-tokens/dist/typography/v3\"\nimport styled, { css } from \"styled-components\"\nimport {\n  color,\n  ColorProps,\n  compose,\n  ResponsiveValue,\n  style,\n  system,\n  typography,\n  TypographyProps,\n  variant,\n} from \"styled-system\"\nimport { Color } from \"../../Theme\"\nimport { Box, BoxProps } from \"../Box\"\n\n/** BaseTextProps */\nexport type BaseTextProps = TypographyProps &\n  Omit<ColorProps, \"color\"> & {\n    /**\n     * @description\n     * Variants of the text. Possible to pass an array that\n     * behaves accordingly to the media breakpoints [\"sm\", \"md\", \"lg\", \"xl\"]\n     * @example\n     * \"sm\"\n     * \"md\"\n     * [\"md\", \"sm\"]\n     * @see {@link TextVariant}\n     */\n    variant?: ResponsiveValue<TextVariant>\n    textColor?: ResponsiveValue<Color>\n    /**\n     * Max number of lines before truncating the content with an ellipsis at the end of the last line.\n     * Overwriting display is required for this.\n     */\n    lineClamp?: number\n  }\n\nconst textColor = style({\n  prop: \"textColor\",\n  cssProperty: \"color\",\n  key: \"colors\",\n})\n\nexport type TextTransform =\n  | \"none\"\n  | \"capitalize\"\n  | \"uppercase\"\n  | \"lowercase\"\n  | \"initial\"\n  | \"inherit\"\n\nconst textTransform = system({ textTransform: true })\n\n/** styled functions for Text */\nexport const textMixin = compose(typography, color, textColor, textTransform)\n\n/** Adds ellipsis to overflowing text */\nexport const overflowEllipsisMixin = css`\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n`\n\n/** Adds hyphenation to overflowing text */\nexport const hyphenate = css`\n  word-wrap: break-word;\n  word-break: break-word;\n  hyphens: auto;\n`\n\n/** TextProps */\nexport type TextProps = BaseTextProps &\n  BoxProps & {\n    hyphenate?: boolean\n    overflowEllipsis?: boolean\n    textTransform?: ResponsiveValue<TextTransform>\n    lineClamp?: ResponsiveValue<number>\n  }\n\n/** Text */\nexport const Text = styled(Box)<TextProps>`\n  && {\n    ${variant({ variants: TEXT_VARIANTS })}\n    ${textMixin}\n\n    ${(props) => {\n      return css`\n        ${props.hyphenate && hyphenate}\n        ${props.overflowEllipsis && overflowEllipsisMixin}\n        ${props.lineClamp &&\n        css`\n          display: -webkit-box;\n          -webkit-box-orient: vertical;\n          -webkit-line-clamp: ${props.lineClamp};\n          line-clamp: ${props.lineClamp};\n          overflow: hidden;\n        `}\n      `\n    }}\n  }\n`\n\nText.displayName = \"Text\"\n\nText.defaultProps = {\n  fontFamily: \"sans\",\n  variant: \"sm\",\n}\n"],"mappings":"AAAA,SACEA,aAAa,QAER,0CAA0C;AACjD,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SACEC,KAAK,EAELC,OAAO,EAEPC,KAAK,EACLC,MAAM,EACNC,UAAU,EAEVC,OAAO,QACF,eAAe;AAEtB,SAASC,GAAG;;AAEZ;;AAsBA,IAAMC,SAAS,GAAGL,KAAK,CAAC;EACtBM,IAAI,EAAE,WAAW;EACjBC,WAAW,EAAE,OAAO;EACpBC,GAAG,EAAE;AACP,CAAC,CAAC;AAUF,IAAMC,aAAa,GAAGR,MAAM,CAAC;EAAEQ,aAAa,EAAE;AAAK,CAAC,CAAC;;AAErD;AACA,OAAO,IAAMC,SAAS,GAAGX,OAAO,CAACG,UAAU,EAAEJ,KAAK,EAAEO,SAAS,EAAEI,aAAa,CAAC;;AAE7E;AACA,OAAO,IAAME,qBAAqB,GAAGd,GAAG,gEAIvC;;AAED;AACA,OAAO,IAAMe,SAAS,GAAGf,GAAG,8DAI3B;;AAED;;AASA;AACA,OAAO,IAAMgB,IAAI,GAAGjB,MAAM,CAACQ,GAAG,CAAC,CAAAU,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,2BAEzBb,OAAO,CAAC;EAAEc,QAAQ,EAAEtB;AAAc,CAAC,CAAC,EACpCe,SAAS,EAET,UAACQ,KAAK,EAAK;EACX,OAAOrB,GAAG,qBACNqB,KAAK,CAACN,SAAS,IAAIA,SAAS,EAC5BM,KAAK,CAACC,gBAAgB,IAAIR,qBAAqB,EAC/CO,KAAK,CAACE,SAAS,IACjBvB,GAAG,+GAGqBqB,KAAK,CAACE,SAAS,EACvBF,KAAK,CAACE,SAAS,CAE9B;AAEL,CAAC,CAEJ;AAEDP,IAAI,CAACE,WAAW,GAAG,MAAM;AAEzBF,IAAI,CAACQ,YAAY,GAAG;EAClBC,UAAU,EAAE,MAAM;EAClBnB,OAAO,EAAE;AACX,CAAC"}
+{"version":3,"file":"Text.js","names":["TEXT_VARIANTS","TextVariant","styled","css","color","ColorProps","compose","ResponsiveValue","style","system","typography","TypographyProps","variant","Color","Box","BoxProps","textColor","prop","cssProperty","key","textTransform","textMixin","overflowEllipsisMixin","hyphenate","Text","withConfig","displayName","componentId","variants","props","overflowEllipsis","lineClamp","defaultProps","fontFamily"],"sources":["../../../../src/elements/Text/Text.tsx"],"sourcesContent":["import {\n  TEXT_VARIANTS,\n  TextVariant,\n} from \"@artsy/palette-tokens/dist/typography/v3\"\nimport styled, { css } from \"styled-components\"\nimport {\n  color,\n  ColorProps,\n  compose,\n  ResponsiveValue,\n  style,\n  system,\n  typography,\n  TypographyProps,\n  variant,\n} from \"styled-system\"\nimport { Color } from \"../../Theme\"\nimport { Box, BoxProps } from \"../Box\"\n\n/** BaseTextProps */\nexport type BaseTextProps = TypographyProps &\n  Omit<ColorProps, \"color\"> & {\n    /**\n     * @description\n     * Variants of the text. Possible to pass an array that\n     * behaves accordingly to the media breakpoints [\"sm\", \"md\", \"lg\", \"xl\"]\n     * @example\n     * \"sm\"\n     * \"md\"\n     * [\"md\", \"sm\"]\n     * @see {@link TextVariant}\n     */\n    variant?: ResponsiveValue<TextVariant>\n    textColor?: ResponsiveValue<Color>\n    /**\n     * Max number of lines before truncating the content with an ellipsis at the end of the last line.\n     * Overwriting display is required for this.\n     */\n    lineClamp?: number\n  }\n\nconst textColor = style({\n  prop: \"textColor\",\n  cssProperty: \"color\",\n  key: \"colors\",\n})\n\nexport type TextTransform =\n  | \"none\"\n  | \"capitalize\"\n  | \"uppercase\"\n  | \"lowercase\"\n  | \"initial\"\n  | \"inherit\"\n\nconst textTransform = system({ textTransform: true })\n\n/** styled functions for Text */\nexport const textMixin = compose(typography, color, textColor, textTransform)\n\n/** Adds ellipsis to overflowing text */\nexport const overflowEllipsisMixin = css`\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n`\n\n/** Adds hyphenation to overflowing text */\nexport const hyphenate = css`\n  word-wrap: break-word;\n  word-break: break-word;\n  hyphens: auto;\n`\n\n/** TextProps */\nexport type TextProps = BaseTextProps &\n  BoxProps & {\n    hyphenate?: boolean\n    overflowEllipsis?: boolean\n    textTransform?: ResponsiveValue<TextTransform>\n    lineClamp?: ResponsiveValue<number>\n  }\n\n/** Text */\nexport const Text = styled(Box)<TextProps>`\n  && {\n    ${variant({ variants: TEXT_VARIANTS })}\n    ${textMixin}\n\n    ${(props) => {\n      return css`\n        ${props.hyphenate && hyphenate}\n        ${props.overflowEllipsis && overflowEllipsisMixin}\n        ${props.lineClamp &&\n        css`\n          display: -webkit-box;\n          -webkit-box-orient: vertical;\n          -webkit-line-clamp: ${props.lineClamp};\n          line-clamp: ${props.lineClamp};\n          overflow: hidden;\n        `}\n      `\n    }}\n  }\n`\n\nText.displayName = \"Text\"\n\nText.defaultProps = {\n  fontFamily: \"sans\",\n  variant: \"sm\",\n}\n"],"mappings":"AAAA,SACEA,aAAa,EACbC,WAAW,QACN,0CAA0C;AACjD,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SACEC,KAAK,EACLC,UAAU,EACVC,OAAO,EACPC,eAAe,EACfC,KAAK,EACLC,MAAM,EACNC,UAAU,EACVC,eAAe,EACfC,OAAO,QACF,eAAe;AACtB,SAASC,KAAK;AACd,SAASC,GAAG,EAAEC,QAAQ;;AAEtB;;AAsBA,IAAMC,SAAS,GAAGR,KAAK,CAAC;EACtBS,IAAI,EAAE,WAAW;EACjBC,WAAW,EAAE,OAAO;EACpBC,GAAG,EAAE;AACP,CAAC,CAAC;AAUF,IAAMC,aAAa,GAAGX,MAAM,CAAC;EAAEW,aAAa,EAAE;AAAK,CAAC,CAAC;;AAErD;AACA,OAAO,IAAMC,SAAS,GAAGf,OAAO,CAACI,UAAU,EAAEN,KAAK,EAAEY,SAAS,EAAEI,aAAa,CAAC;;AAE7E;AACA,OAAO,IAAME,qBAAqB,GAAGnB,GAAG,gEAIvC;;AAED;AACA,OAAO,IAAMoB,SAAS,GAAGpB,GAAG,8DAI3B;;AAED;;AASA;AACA,OAAO,IAAMqB,IAAI,GAAGtB,MAAM,CAACY,GAAG,CAAC,CAAAW,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,2BAEzBf,OAAO,CAAC;EAAEgB,QAAQ,EAAE5B;AAAc,CAAC,CAAC,EACpCqB,SAAS,EAET,UAACQ,KAAK,EAAK;EACX,OAAO1B,GAAG,qBACN0B,KAAK,CAACN,SAAS,IAAIA,SAAS,EAC5BM,KAAK,CAACC,gBAAgB,IAAIR,qBAAqB,EAC/CO,KAAK,CAACE,SAAS,IACjB5B,GAAG,+GAGqB0B,KAAK,CAACE,SAAS,EACvBF,KAAK,CAACE,SAAS,CAE9B;AAEL,CAAC,CAEJ;AAEDP,IAAI,CAACE,WAAW,GAAG,MAAM;AAEzBF,IAAI,CAACQ,YAAY,GAAG;EAClBC,UAAU,EAAE,MAAM;EAClBrB,OAAO,EAAE;AACX,CAAC"}

package/dist/esm/elements/TextArea/TextArea.js

@@ -12,7 +12,7 @@ import { themeGet } from "@styled-system/theme-get";
 import React, { useCallback, useMemo, useState } from "react";
 import styled, { css } from "styled-components";
 import { RequiredField } from "../../shared/RequiredField";
-import { Box, splitBoxProps } from "../Box";
+import { Box, BoxProps, splitBoxProps } from "../Box";
 import { Text } from "../Text";
 import { Tooltip } from "../Tooltip";
 import { TEXTAREA_STATES } from "./tokens";

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

@@ -1 +1 @@
-{"version":3,"file":"TextArea.js","names":["themeGet","React","useCallback","useMemo","useState","styled","css","RequiredField","Box","splitBoxProps","Text","Tooltip","TEXTAREA_STATES","FORM_ELEMENT_TRANSITION","TextArea","forwardRef","_ref","ref","error","disabled","focus","hover","characterLimit","characterLimitHelper","title","description","_ref$defaultValue","defaultValue","required","onChange","rest","_objectWithoutProperties","_excluded","_splitBoxProps","_splitBoxProps2","_slicedToArray","boxProps","inputProps","_useState","_useState2","value","setValue","characterLimitExceeded","text","Boolean","length","characterLimitReached","handleChange","event","nextValue","currentTarget","exceedsCharacterLimit","hasError","showCharacterLimitReached","createElement","_extends","width","pointer","content","placement","variant","color","textAlign","position","mt","StyledTextArea","placeholder","StyledLabel","htmlFor","name","display","mx","flex","ml","displayName","textarea","withConfig","componentId","props","default","active","completed","label"],"sources":["../../../../src/elements/TextArea/TextArea.tsx"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport React, { useCallback, useMemo, useState } from \"react\"\nimport styled, { css } from \"styled-components\"\nimport { RequiredField } from \"../../shared/RequiredField\"\nimport { Box, BoxProps, splitBoxProps } from \"../Box\"\nimport { Text } from \"../Text\"\nimport { Tooltip } from \"../Tooltip\"\nimport { TEXTAREA_STATES } from \"./tokens\"\nimport { FORM_ELEMENT_TRANSITION } from \"../../helpers\"\n\nexport interface TextAreaProps\n  extends BoxProps,\n    Omit<\n      React.TextareaHTMLAttributes<HTMLTextAreaElement>,\n      \"onChange\" | \"title\"\n    > {\n  active?: boolean\n  characterLimit?: number\n  characterLimitHelper?: boolean\n  defaultValue?: string\n  description?: React.ReactNode\n  required?: boolean\n  title?: string\n  disabled?: boolean\n  error?: string | boolean\n  focus?: boolean\n  hover?: boolean\n  onChange?(result: TextAreaChange): void\n}\n\nexport interface TextAreaChange {\n  value: string\n  exceedsCharacterLimit: boolean\n}\n\n/** TextArea */\nexport const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(\n  (\n    {\n      error,\n      disabled,\n      focus,\n      hover,\n      characterLimit,\n      characterLimitHelper,\n      title,\n      description,\n      defaultValue = \"\",\n      required,\n      onChange,\n      ...rest\n    },\n    ref\n  ) => {\n    const [boxProps, inputProps] = splitBoxProps(rest)\n\n    const [value, setValue] = useState(defaultValue)\n\n    const characterLimitExceeded = useCallback(\n      (text: string) => {\n        return Boolean(characterLimit && text.length > characterLimit)\n      },\n      [characterLimit]\n    )\n\n    const characterLimitReached = useCallback(\n      (text: string) => {\n        return Boolean(characterLimit && text.length >= characterLimit)\n      },\n      [characterLimit]\n    )\n\n    const handleChange = useCallback(\n      (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n        const nextValue = event.currentTarget.value\n        setValue(nextValue)\n        onChange?.({\n          value: nextValue,\n          exceedsCharacterLimit: characterLimitExceeded(nextValue),\n        })\n      },\n      [characterLimitExceeded, onChange]\n    )\n\n    const hasError = useMemo(\n      () => Boolean(error || characterLimitExceeded(value)),\n      [characterLimitExceeded, error, value]\n    )\n\n    const showCharacterLimitReached =\n      characterLimitHelper &&\n      typeof characterLimit !== \"undefined\" &&\n      characterLimitReached(value)\n\n    return (\n      <Box width=\"100%\" {...boxProps}>\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        <Box position=\"relative\" mt={!!title && !description ? 1 : 0}>\n          <StyledTextArea\n            ref={ref as any}\n            disabled={disabled}\n            focus={focus}\n            hover={hover}\n            error={hasError}\n            onChange={handleChange}\n            defaultValue={defaultValue}\n            required={required}\n            title={title}\n            placeholder={inputProps.placeholder || \" \"}\n            {...inputProps}\n          />\n\n          {!!title && (\n            <StyledLabel htmlFor={inputProps.name}>\n              {title}\n              <span />\n            </StyledLabel>\n          )}\n        </Box>\n\n        {(required || characterLimit) && !(error && typeof error === \"string\") && (\n          <Box display=\"flex\" mt={0.5} mx={1}>\n            {required && !showCharacterLimitReached && (\n              <RequiredField flex={1} disabled={disabled} />\n            )}\n\n            {showCharacterLimitReached && (\n              <Text flex={1} variant=\"xs\" color=\"mono60\" textAlign=\"left\">\n                Character limit reached\n              </Text>\n            )}\n\n            {typeof characterLimit !== \"undefined\" && (\n              <Text\n                flex={1}\n                variant=\"xs\"\n                color={characterLimitExceeded(value) ? \"red100\" : \"mono60\"}\n                textAlign=\"right\"\n              >\n                {value.length}/{characterLimit}\n              </Text>\n            )}\n          </Box>\n        )}\n\n        {error && typeof error === \"string\" && (\n          <Text variant=\"xs\" color=\"red100\" mt={0.5} ml={1}>\n            {error}\n          </Text>\n        )}\n      </Box>\n    )\n  }\n)\n\nTextArea.displayName = \"TextArea\"\n\ntype StyledTextAreaProps = Pick<\n  TextAreaProps,\n  \"disabled\" | \"error\" | \"hover\" | \"focus\" | \"active\" | \"title\"\n>\n\nconst StyledTextArea = styled.textarea<StyledTextAreaProps>`\n  appearance: none;\n  display: block;\n  width: 100%;\n  background-color: ${themeGet(\"colors.mono0\")};\n  padding: ${themeGet(\"space.1\")};\n  resize: vertical;\n  transition: border-color 0.25s, color 0.25s;\n  outline: none;\n  border: 1px solid;\n  border-radius: 3px;\n  font-family: ${themeGet(\"fonts.sans\")};\n\n  &::placeholder {\n    transition: color 0.25s, opacity 0.25s;\n  }\n\n  ${(props) => {\n    return css`\n      ${TEXTAREA_STATES.default}\n      ${props.hover && TEXTAREA_STATES.hover}\n      ${props.focus && TEXTAREA_STATES.focus}\n      ${props.active && TEXTAREA_STATES.active}\n      ${props.disabled && TEXTAREA_STATES.disabled}\n      ${props.error && TEXTAREA_STATES.error}\n\n      &:hover {\n        ${TEXTAREA_STATES.hover}\n      }\n\n      &:not(:placeholder-shown) {\n        ${TEXTAREA_STATES.completed}\n        ${props.error && TEXTAREA_STATES.error}\n      }\n\n      &:focus {\n        outline: none;\n        ${TEXTAREA_STATES.focus}\n\n        :not(:placeholder-shown) {\n          ${!!props.placeholder && TEXTAREA_STATES.active}\n          ${props.error && TEXTAREA_STATES.error}\n        }\n\n        &::placeholder {\n          opacity: 1;\n        }\n      }\n\n      &:disabled {\n        cursor: default;\n        ${TEXTAREA_STATES.disabled}\n      }\n\n      ${props.title &&\n      css`\n        &::placeholder {\n          opacity: 0;\n        }\n      `}\n    `\n  }}\n`\nconst StyledLabel = styled.label`\n  position: absolute;\n  top: 25px;\n  left: 6px;\n  padding: 0 5px;\n  background-color: transparent;\n  transform: translateY(-50%);\n  transition: ${FORM_ELEMENT_TRANSITION};\n  transition-property: color, transform, padding, font-size;\n  font-family: ${themeGet(\"fonts.sans\")};\n  pointer-events: none;\n\n  & > span {\n    background-color: ${themeGet(\"colors.mono0\")};\n    height: 100%;\n    width: 100%;\n    display: block;\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: -1;\n    transition: ${FORM_ELEMENT_TRANSITION};\n    transition-property: height, top;\n    transition-delay: 0.1s;\n  }\n`\n"],"mappings":"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"}
+{"version":3,"file":"TextArea.js","names":["themeGet","React","useCallback","useMemo","useState","styled","css","RequiredField","Box","BoxProps","splitBoxProps","Text","Tooltip","TEXTAREA_STATES","FORM_ELEMENT_TRANSITION","TextArea","forwardRef","_ref","ref","error","disabled","focus","hover","characterLimit","characterLimitHelper","title","description","_ref$defaultValue","defaultValue","required","onChange","rest","_objectWithoutProperties","_excluded","_splitBoxProps","_splitBoxProps2","_slicedToArray","boxProps","inputProps","_useState","_useState2","value","setValue","characterLimitExceeded","text","Boolean","length","characterLimitReached","handleChange","event","nextValue","currentTarget","exceedsCharacterLimit","hasError","showCharacterLimitReached","createElement","_extends","width","pointer","content","placement","variant","color","textAlign","position","mt","StyledTextArea","placeholder","StyledLabel","htmlFor","name","display","mx","flex","ml","displayName","textarea","withConfig","componentId","props","default","active","completed","label"],"sources":["../../../../src/elements/TextArea/TextArea.tsx"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport React, { useCallback, useMemo, useState } from \"react\"\nimport styled, { css } from \"styled-components\"\nimport { RequiredField } from \"../../shared/RequiredField\"\nimport { Box, BoxProps, splitBoxProps } from \"../Box\"\nimport { Text } from \"../Text\"\nimport { Tooltip } from \"../Tooltip\"\nimport { TEXTAREA_STATES } from \"./tokens\"\nimport { FORM_ELEMENT_TRANSITION } from \"../../helpers\"\n\nexport interface TextAreaProps\n  extends BoxProps,\n    Omit<\n      React.TextareaHTMLAttributes<HTMLTextAreaElement>,\n      \"onChange\" | \"title\"\n    > {\n  active?: boolean\n  characterLimit?: number\n  characterLimitHelper?: boolean\n  defaultValue?: string\n  description?: React.ReactNode\n  required?: boolean\n  title?: string\n  disabled?: boolean\n  error?: string | boolean\n  focus?: boolean\n  hover?: boolean\n  onChange?(result: TextAreaChange): void\n}\n\nexport interface TextAreaChange {\n  value: string\n  exceedsCharacterLimit: boolean\n}\n\n/** TextArea */\nexport const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(\n  (\n    {\n      error,\n      disabled,\n      focus,\n      hover,\n      characterLimit,\n      characterLimitHelper,\n      title,\n      description,\n      defaultValue = \"\",\n      required,\n      onChange,\n      ...rest\n    },\n    ref\n  ) => {\n    const [boxProps, inputProps] = splitBoxProps(rest)\n\n    const [value, setValue] = useState(defaultValue)\n\n    const characterLimitExceeded = useCallback(\n      (text: string) => {\n        return Boolean(characterLimit && text.length > characterLimit)\n      },\n      [characterLimit]\n    )\n\n    const characterLimitReached = useCallback(\n      (text: string) => {\n        return Boolean(characterLimit && text.length >= characterLimit)\n      },\n      [characterLimit]\n    )\n\n    const handleChange = useCallback(\n      (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n        const nextValue = event.currentTarget.value\n        setValue(nextValue)\n        onChange?.({\n          value: nextValue,\n          exceedsCharacterLimit: characterLimitExceeded(nextValue),\n        })\n      },\n      [characterLimitExceeded, onChange]\n    )\n\n    const hasError = useMemo(\n      () => Boolean(error || characterLimitExceeded(value)),\n      [characterLimitExceeded, error, value]\n    )\n\n    const showCharacterLimitReached =\n      characterLimitHelper &&\n      typeof characterLimit !== \"undefined\" &&\n      characterLimitReached(value)\n\n    return (\n      <Box width=\"100%\" {...boxProps}>\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        <Box position=\"relative\" mt={!!title && !description ? 1 : 0}>\n          <StyledTextArea\n            ref={ref as any}\n            disabled={disabled}\n            focus={focus}\n            hover={hover}\n            error={hasError}\n            onChange={handleChange}\n            defaultValue={defaultValue}\n            required={required}\n            title={title}\n            placeholder={inputProps.placeholder || \" \"}\n            {...inputProps}\n          />\n\n          {!!title && (\n            <StyledLabel htmlFor={inputProps.name}>\n              {title}\n              <span />\n            </StyledLabel>\n          )}\n        </Box>\n\n        {(required || characterLimit) && !(error && typeof error === \"string\") && (\n          <Box display=\"flex\" mt={0.5} mx={1}>\n            {required && !showCharacterLimitReached && (\n              <RequiredField flex={1} disabled={disabled} />\n            )}\n\n            {showCharacterLimitReached && (\n              <Text flex={1} variant=\"xs\" color=\"mono60\" textAlign=\"left\">\n                Character limit reached\n              </Text>\n            )}\n\n            {typeof characterLimit !== \"undefined\" && (\n              <Text\n                flex={1}\n                variant=\"xs\"\n                color={characterLimitExceeded(value) ? \"red100\" : \"mono60\"}\n                textAlign=\"right\"\n              >\n                {value.length}/{characterLimit}\n              </Text>\n            )}\n          </Box>\n        )}\n\n        {error && typeof error === \"string\" && (\n          <Text variant=\"xs\" color=\"red100\" mt={0.5} ml={1}>\n            {error}\n          </Text>\n        )}\n      </Box>\n    )\n  }\n)\n\nTextArea.displayName = \"TextArea\"\n\ntype StyledTextAreaProps = Pick<\n  TextAreaProps,\n  \"disabled\" | \"error\" | \"hover\" | \"focus\" | \"active\" | \"title\"\n>\n\nconst StyledTextArea = styled.textarea<StyledTextAreaProps>`\n  appearance: none;\n  display: block;\n  width: 100%;\n  background-color: ${themeGet(\"colors.mono0\")};\n  padding: ${themeGet(\"space.1\")};\n  resize: vertical;\n  transition: border-color 0.25s, color 0.25s;\n  outline: none;\n  border: 1px solid;\n  border-radius: 3px;\n  font-family: ${themeGet(\"fonts.sans\")};\n\n  &::placeholder {\n    transition: color 0.25s, opacity 0.25s;\n  }\n\n  ${(props) => {\n    return css`\n      ${TEXTAREA_STATES.default}\n      ${props.hover && TEXTAREA_STATES.hover}\n      ${props.focus && TEXTAREA_STATES.focus}\n      ${props.active && TEXTAREA_STATES.active}\n      ${props.disabled && TEXTAREA_STATES.disabled}\n      ${props.error && TEXTAREA_STATES.error}\n\n      &:hover {\n        ${TEXTAREA_STATES.hover}\n      }\n\n      &:not(:placeholder-shown) {\n        ${TEXTAREA_STATES.completed}\n        ${props.error && TEXTAREA_STATES.error}\n      }\n\n      &:focus {\n        outline: none;\n        ${TEXTAREA_STATES.focus}\n\n        :not(:placeholder-shown) {\n          ${!!props.placeholder && TEXTAREA_STATES.active}\n          ${props.error && TEXTAREA_STATES.error}\n        }\n\n        &::placeholder {\n          opacity: 1;\n        }\n      }\n\n      &:disabled {\n        cursor: default;\n        ${TEXTAREA_STATES.disabled}\n      }\n\n      ${props.title &&\n      css`\n        &::placeholder {\n          opacity: 0;\n        }\n      `}\n    `\n  }}\n`\nconst StyledLabel = styled.label`\n  position: absolute;\n  top: 25px;\n  left: 6px;\n  padding: 0 5px;\n  background-color: transparent;\n  transform: translateY(-50%);\n  transition: ${FORM_ELEMENT_TRANSITION};\n  transition-property: color, transform, padding, font-size;\n  font-family: ${themeGet(\"fonts.sans\")};\n  pointer-events: none;\n\n  & > span {\n    background-color: ${themeGet(\"colors.mono0\")};\n    height: 100%;\n    width: 100%;\n    display: block;\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: -1;\n    transition: ${FORM_ELEMENT_TRANSITION};\n    transition-property: height, top;\n    transition-delay: 0.1s;\n  }\n`\n"],"mappings":"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"}

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

@@ -1,5 +1,6 @@
 import { themeGet } from "@styled-system/theme-get";
 import { css } from "styled-components";
+import { State } from "./types";
 export var TEXTAREA_STATES = {
   default: css(["min-height:", ";font-size:", ";line-height:", ";color:", ";border-color:", ";::placeholder{color:", ";}& + label{color:", ";font-size:", ";}"], themeGet("space.12"), themeGet("textVariants.sm-display.fontSize"), themeGet("textVariants.sm.lineHeight"), themeGet("colors.mono100"), themeGet("colors.mono30"), themeGet("colors.mono60"), themeGet("colors.mono60"), themeGet("textVariants.sm-display.fontSize")),
   focus: css(["color:", ";border-color:", ";::placeholder{color:", ";opacity:1;}& + label{color:", ";transform:translateY(-150%);font-size:", ";& > span{height:2px;top:50%;}}"], themeGet("colors.mono100"), themeGet("colors.blue100"), themeGet("colors.mono60"), themeGet("colors.blue100"), themeGet("textVariants.xs.fontSize")),

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

@@ -1 +1 @@
-{"version":3,"file":"tokens.js","names":["themeGet","css","TEXTAREA_STATES","default","focus","hover","active","completed","disabled","error"],"sources":["../../../../src/elements/TextArea/tokens.ts"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport { css } from \"styled-components\"\nimport { State } from \"./types\"\n\nexport const TEXTAREA_STATES: Record<State, any> = {\n  default: css`\n    min-height: ${themeGet(\"space.12\")};\n    font-size: ${themeGet(\"textVariants.sm-display.fontSize\")};\n    line-height: ${themeGet(\"textVariants.sm.lineHeight\")};\n    color: ${themeGet(\"colors.mono100\")};\n    border-color: ${themeGet(\"colors.mono30\")};\n\n    ::placeholder {\n      color: ${themeGet(\"colors.mono60\")};\n    }\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\n    ::placeholder {\n      color: ${themeGet(\"colors.mono60\")};\n      opacity: 1;\n    }\n\n    & + label {\n      color: ${themeGet(\"colors.blue100\")};\n      transform: translateY(-150%);\n      font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n\n      & > span {\n        height: 2px;\n        top: 50%;\n      }\n    }\n  `,\n  hover: css`\n    color: ${themeGet(\"colors.mono100\")};\n    border-color: ${themeGet(\"colors.mono60\")};\n\n    ::placeholder {\n      color: ${themeGet(\"colors.mono100\")};\n    }\n\n    & + label {\n      color: ${themeGet(\"colors.mono100\")};\n    }\n  `,\n  active: css`\n    color: ${themeGet(\"colors.mono100\")};\n    border-color: ${themeGet(\"colors.blue100\")};\n\n    ::placeholder {\n      color: ${themeGet(\"colors.mono100\")};\n    }\n\n    & + label {\n      color: ${themeGet(\"colors.blue100\")};\n      transform: translateY(-150%);\n      font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n\n      & > span {\n        height: 2px;\n        top: 50%;\n      }\n    }\n  `,\n  completed: css`\n    color: ${themeGet(\"colors.mono100\")};\n    border-color: ${themeGet(\"colors.mono60\")};\n\n    & + label {\n      color: ${themeGet(\"colors.mono60\")};\n      transform: translateY(-150%);\n      font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n\n      & > span {\n        height: 2px;\n        top: 50%;\n      }\n    }\n  `,\n  disabled: css`\n    color: ${themeGet(\"colors.mono30\")};\n    border-color: ${themeGet(\"colors.mono30\")};\n    background-color: transparent;\n\n    ::placeholder {\n      color: ${themeGet(\"colors.mono30\")};\n    }\n\n    &:not(:placeholder-shown) + label {\n      color: ${themeGet(\"colors.mono30\")};\n      transform: translateY(-150%);\n      font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n\n      & > span {\n        height: 2px;\n        top: 50%;\n      }\n    }\n\n    &:placeholder-shown + label {\n      color: ${themeGet(\"colors.mono30\")};\n    }\n  `,\n  error: css`\n    border-color: ${themeGet(\"colors.red100\")};\n\n    & + label {\n      color: ${themeGet(\"colors.red100\")};\n      transform: translateY(-150%);\n      font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n\n      & > span {\n        height: 2px;\n        top: 50%;\n      }\n    }\n  `,\n}\n"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,0BAA0B;AACnD,SAASC,GAAG,QAAQ,mBAAmB;AAGvC,OAAO,IAAMC,eAAmC,GAAG;EACjDC,OAAO,EAAEF,GAAG,mJACID,QAAQ,CAAC,UAAU,CAAC,EACrBA,QAAQ,CAAC,kCAAkC,CAAC,EAC1CA,QAAQ,CAAC,4BAA4B,CAAC,EAC5CA,QAAQ,CAAC,gBAAgB,CAAC,EACnBA,QAAQ,CAAC,eAAe,CAAC,EAG9BA,QAAQ,CAAC,eAAe,CAAC,EAIzBA,QAAQ,CAAC,eAAe,CAAC,EACrBA,QAAQ,CAAC,kCAAkC,CAAC,CAE5D;EACDI,KAAK,EAAEH,GAAG,sKACCD,QAAQ,CAAC,gBAAgB,CAAC,EACnBA,QAAQ,CAAC,gBAAgB,CAAC,EAG/BA,QAAQ,CAAC,eAAe,CAAC,EAKzBA,QAAQ,CAAC,gBAAgB,CAAC,EAEtBA,QAAQ,CAAC,0BAA0B,CAAC,CAOpD;EACDK,KAAK,EAAEJ,GAAG,oFACCD,QAAQ,CAAC,gBAAgB,CAAC,EACnBA,QAAQ,CAAC,eAAe,CAAC,EAG9BA,QAAQ,CAAC,gBAAgB,CAAC,EAI1BA,QAAQ,CAAC,gBAAgB,CAAC,CAEtC;EACDM,MAAM,EAAEL,GAAG,4JACAD,QAAQ,CAAC,gBAAgB,CAAC,EACnBA,QAAQ,CAAC,gBAAgB,CAAC,EAG/BA,QAAQ,CAAC,gBAAgB,CAAC,EAI1BA,QAAQ,CAAC,gBAAgB,CAAC,EAEtBA,QAAQ,CAAC,0BAA0B,CAAC,CAOpD;EACDO,SAAS,EAAEN,GAAG,kIACHD,QAAQ,CAAC,gBAAgB,CAAC,EACnBA,QAAQ,CAAC,eAAe,CAAC,EAG9BA,QAAQ,CAAC,eAAe,CAAC,EAErBA,QAAQ,CAAC,0BAA0B,CAAC,CAOpD;EACDQ,QAAQ,EAAEP,GAAG,yPACFD,QAAQ,CAAC,eAAe,CAAC,EAClBA,QAAQ,CAAC,eAAe,CAAC,EAI9BA,QAAQ,CAAC,eAAe,CAAC,EAIzBA,QAAQ,CAAC,eAAe,CAAC,EAErBA,QAAQ,CAAC,0BAA0B,CAAC,EASxCA,QAAQ,CAAC,eAAe,CAAC,CAErC;EACDS,KAAK,EAAER,GAAG,uHACQD,QAAQ,CAAC,eAAe,CAAC,EAG9BA,QAAQ,CAAC,eAAe,CAAC,EAErBA,QAAQ,CAAC,0BAA0B,CAAC;AAQvD,CAAC"}
+{"version":3,"file":"tokens.js","names":["themeGet","css","State","TEXTAREA_STATES","default","focus","hover","active","completed","disabled","error"],"sources":["../../../../src/elements/TextArea/tokens.ts"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport { css } from \"styled-components\"\nimport { State } from \"./types\"\n\nexport const TEXTAREA_STATES: Record<State, any> = {\n  default: css`\n    min-height: ${themeGet(\"space.12\")};\n    font-size: ${themeGet(\"textVariants.sm-display.fontSize\")};\n    line-height: ${themeGet(\"textVariants.sm.lineHeight\")};\n    color: ${themeGet(\"colors.mono100\")};\n    border-color: ${themeGet(\"colors.mono30\")};\n\n    ::placeholder {\n      color: ${themeGet(\"colors.mono60\")};\n    }\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\n    ::placeholder {\n      color: ${themeGet(\"colors.mono60\")};\n      opacity: 1;\n    }\n\n    & + label {\n      color: ${themeGet(\"colors.blue100\")};\n      transform: translateY(-150%);\n      font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n\n      & > span {\n        height: 2px;\n        top: 50%;\n      }\n    }\n  `,\n  hover: css`\n    color: ${themeGet(\"colors.mono100\")};\n    border-color: ${themeGet(\"colors.mono60\")};\n\n    ::placeholder {\n      color: ${themeGet(\"colors.mono100\")};\n    }\n\n    & + label {\n      color: ${themeGet(\"colors.mono100\")};\n    }\n  `,\n  active: css`\n    color: ${themeGet(\"colors.mono100\")};\n    border-color: ${themeGet(\"colors.blue100\")};\n\n    ::placeholder {\n      color: ${themeGet(\"colors.mono100\")};\n    }\n\n    & + label {\n      color: ${themeGet(\"colors.blue100\")};\n      transform: translateY(-150%);\n      font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n\n      & > span {\n        height: 2px;\n        top: 50%;\n      }\n    }\n  `,\n  completed: css`\n    color: ${themeGet(\"colors.mono100\")};\n    border-color: ${themeGet(\"colors.mono60\")};\n\n    & + label {\n      color: ${themeGet(\"colors.mono60\")};\n      transform: translateY(-150%);\n      font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n\n      & > span {\n        height: 2px;\n        top: 50%;\n      }\n    }\n  `,\n  disabled: css`\n    color: ${themeGet(\"colors.mono30\")};\n    border-color: ${themeGet(\"colors.mono30\")};\n    background-color: transparent;\n\n    ::placeholder {\n      color: ${themeGet(\"colors.mono30\")};\n    }\n\n    &:not(:placeholder-shown) + label {\n      color: ${themeGet(\"colors.mono30\")};\n      transform: translateY(-150%);\n      font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n\n      & > span {\n        height: 2px;\n        top: 50%;\n      }\n    }\n\n    &:placeholder-shown + label {\n      color: ${themeGet(\"colors.mono30\")};\n    }\n  `,\n  error: css`\n    border-color: ${themeGet(\"colors.red100\")};\n\n    & + label {\n      color: ${themeGet(\"colors.red100\")};\n      transform: translateY(-150%);\n      font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n\n      & > span {\n        height: 2px;\n        top: 50%;\n      }\n    }\n  `,\n}\n"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,0BAA0B;AACnD,SAASC,GAAG,QAAQ,mBAAmB;AACvC,SAASC,KAAK;AAEd,OAAO,IAAMC,eAAmC,GAAG;EACjDC,OAAO,EAAEH,GAAG,mJACID,QAAQ,CAAC,UAAU,CAAC,EACrBA,QAAQ,CAAC,kCAAkC,CAAC,EAC1CA,QAAQ,CAAC,4BAA4B,CAAC,EAC5CA,QAAQ,CAAC,gBAAgB,CAAC,EACnBA,QAAQ,CAAC,eAAe,CAAC,EAG9BA,QAAQ,CAAC,eAAe,CAAC,EAIzBA,QAAQ,CAAC,eAAe,CAAC,EACrBA,QAAQ,CAAC,kCAAkC,CAAC,CAE5D;EACDK,KAAK,EAAEJ,GAAG,sKACCD,QAAQ,CAAC,gBAAgB,CAAC,EACnBA,QAAQ,CAAC,gBAAgB,CAAC,EAG/BA,QAAQ,CAAC,eAAe,CAAC,EAKzBA,QAAQ,CAAC,gBAAgB,CAAC,EAEtBA,QAAQ,CAAC,0BAA0B,CAAC,CAOpD;EACDM,KAAK,EAAEL,GAAG,oFACCD,QAAQ,CAAC,gBAAgB,CAAC,EACnBA,QAAQ,CAAC,eAAe,CAAC,EAG9BA,QAAQ,CAAC,gBAAgB,CAAC,EAI1BA,QAAQ,CAAC,gBAAgB,CAAC,CAEtC;EACDO,MAAM,EAAEN,GAAG,4JACAD,QAAQ,CAAC,gBAAgB,CAAC,EACnBA,QAAQ,CAAC,gBAAgB,CAAC,EAG/BA,QAAQ,CAAC,gBAAgB,CAAC,EAI1BA,QAAQ,CAAC,gBAAgB,CAAC,EAEtBA,QAAQ,CAAC,0BAA0B,CAAC,CAOpD;EACDQ,SAAS,EAAEP,GAAG,kIACHD,QAAQ,CAAC,gBAAgB,CAAC,EACnBA,QAAQ,CAAC,eAAe,CAAC,EAG9BA,QAAQ,CAAC,eAAe,CAAC,EAErBA,QAAQ,CAAC,0BAA0B,CAAC,CAOpD;EACDS,QAAQ,EAAER,GAAG,yPACFD,QAAQ,CAAC,eAAe,CAAC,EAClBA,QAAQ,CAAC,eAAe,CAAC,EAI9BA,QAAQ,CAAC,eAAe,CAAC,EAIzBA,QAAQ,CAAC,eAAe,CAAC,EAErBA,QAAQ,CAAC,0BAA0B,CAAC,EASxCA,QAAQ,CAAC,eAAe,CAAC,CAErC;EACDU,KAAK,EAAET,GAAG,uHACQD,QAAQ,CAAC,eAAe,CAAC,EAG9BA,QAAQ,CAAC,eAAe,CAAC,EAErBA,QAAQ,CAAC,0BAA0B,CAAC;AAQvD,CAAC"}

package/dist/esm/elements/Toasts/Toast.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 { Box } from "../Box";
+import { Box, BoxProps } from "../Box";
 import { Flex } from "../Flex";
 import { Clickable } from "../Clickable";
 import { Text } from "../Text";

package/dist/esm/elements/Toasts/Toast.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.js","names":["React","styled","variant","Box","Flex","Clickable","Text","Toast","_ref","id","action","description","message","onClose","rest","_objectWithoutProperties","_excluded","handleClick","createElement","Container","_extends","width","px","py","bg","color","role","tabIndex","onClick","onKeyPress","event","key","style","cursor","alignItems","justifyContent","textDecoration","label","displayName","TOAST_VARIANTS","backgroundColor","alert","success","error","withConfig","componentId","variants"],"sources":["../../../../src/elements/Toasts/Toast.tsx"],"sourcesContent":["import React from \"react\"\nimport styled from \"styled-components\"\nimport { variant } from \"styled-system\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Flex } from \"../Flex\"\nimport { Clickable } from \"../Clickable\"\nimport { Text } from \"../Text\"\n\nexport type ToastVariant = keyof typeof TOAST_VARIANTS\n\nexport interface ToastProps extends BoxProps {\n  id: string\n  action?: {\n    label: string\n    onClick(): void\n  }\n  description?: string\n  message: string\n  onClose?(id: string): void\n  variant?: ToastVariant\n}\n\nexport const Toast: React.FC<React.PropsWithChildren<ToastProps>> = ({\n  id,\n  action,\n  description,\n  message,\n  onClose,\n  ...rest\n}) => {\n  const handleClick = () => {\n    onClose?.(id)\n  }\n\n  return (\n    <Container\n      width=\"100%\"\n      px={2}\n      py={1}\n      bg=\"mono100\"\n      color=\"mono0\"\n      role=\"button\"\n      tabIndex={0}\n      onClick={handleClick}\n      onKeyPress={(event) => {\n        if (event.key === \"Enter\" || event.key === \" \") {\n          onClose?.(id)\n        }\n      }}\n      style={{ cursor: \"pointer\" }}\n      {...rest}\n    >\n      <Flex alignItems=\"flex-start\" justifyContent=\"space-between\">\n        <Text variant=\"sm-display\">{message}</Text>\n\n        {action && (\n          <Clickable onClick={action.onClick} textDecoration=\"underline\">\n            <Text variant=\"xs\">{action.label}</Text>\n          </Clickable>\n        )}\n      </Flex>\n\n      {description && <Text variant=\"xs\">{description}</Text>}\n    </Container>\n  )\n}\n\nexport const TOAST_VARIANTS = {\n  message: {\n    backgroundColor: \"mono100\",\n    color: \"mono0\",\n  },\n  alert: {\n    backgroundColor: \"blue100\",\n    color: \"mono0\",\n  },\n  success: {\n    backgroundColor: \"green100\",\n    color: \"mono0\",\n  },\n  error: {\n    backgroundColor: \"red100\",\n    color: \"mono0\",\n  },\n}\n\nconst Container = styled(Box)`\n  ${variant({ variants: TOAST_VARIANTS })}\n  user-select: none;\n`\n"],"mappings":";;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAASC,OAAO,QAAQ,eAAe;AACvC,SAASC,GAAG;AACZ,SAASC,IAAI;AACb,SAASC,SAAS;AAClB,SAASC,IAAI;AAgBb,OAAO,IAAMC,KAAoD,GAAG,SAAvDA,KAAoDA,CAAAC,IAAA,EAO3D;EAAA,IANJC,EAAE,GAAAD,IAAA,CAAFC,EAAE;IACFC,MAAM,GAAAF,IAAA,CAANE,MAAM;IACNC,WAAW,GAAAH,IAAA,CAAXG,WAAW;IACXC,OAAO,GAAAJ,IAAA,CAAPI,OAAO;IACPC,OAAO,GAAAL,IAAA,CAAPK,OAAO;IACJC,IAAI,GAAAC,wBAAA,CAAAP,IAAA,EAAAQ,SAAA;EAEP,IAAMC,WAAW,GAAG,SAAdA,WAAWA,CAAA,EAAS;IACxBJ,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAGJ,EAAE,CAAC;EACf,CAAC;EAED,oBACET,KAAA,CAAAkB,aAAA,CAACC,SAAS,EAAAC,QAAA;IACRC,KAAK,EAAC,MAAM;IACZC,EAAE,EAAE,CAAE;IACNC,EAAE,EAAE,CAAE;IACNC,EAAE,EAAC,SAAS;IACZC,KAAK,EAAC,OAAO;IACbC,IAAI,EAAC,QAAQ;IACbC,QAAQ,EAAE,CAAE;IACZC,OAAO,EAAEX,WAAY;IACrBY,UAAU,EAAE,SAAZA,UAAUA,CAAGC,KAAK,EAAK;MACrB,IAAIA,KAAK,CAACC,GAAG,KAAK,OAAO,IAAID,KAAK,CAACC,GAAG,KAAK,GAAG,EAAE;QAC9ClB,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAGJ,EAAE,CAAC;MACf;IACF,CAAE;IACFuB,KAAK,EAAE;MAAEC,MAAM,EAAE;IAAU;EAAE,GACzBnB,IAAI,gBAERd,KAAA,CAAAkB,aAAA,CAACd,IAAI;IAAC8B,UAAU,EAAC,YAAY;IAACC,cAAc,EAAC;EAAe,gBAC1DnC,KAAA,CAAAkB,aAAA,CAACZ,IAAI;IAACJ,OAAO,EAAC;EAAY,GAAEU,OAAO,CAAQ,EAE1CF,MAAM,iBACLV,KAAA,CAAAkB,aAAA,CAACb,SAAS;IAACuB,OAAO,EAAElB,MAAM,CAACkB,OAAQ;IAACQ,cAAc,EAAC;EAAW,gBAC5DpC,KAAA,CAAAkB,aAAA,CAACZ,IAAI;IAACJ,OAAO,EAAC;EAAI,GAAEQ,MAAM,CAAC2B,KAAK,CAAQ,CAE3C,CACI,EAEN1B,WAAW,iBAAIX,KAAA,CAAAkB,aAAA,CAACZ,IAAI;IAACJ,OAAO,EAAC;EAAI,GAAES,WAAW,CAAQ,CAC7C;AAEhB,CAAC;AA3CYJ,KAAoD,CAAA+B,WAAA;AA6CjE,OAAO,IAAMC,cAAc,GAAG;EAC5B3B,OAAO,EAAE;IACP4B,eAAe,EAAE,SAAS;IAC1Bf,KAAK,EAAE;EACT,CAAC;EACDgB,KAAK,EAAE;IACLD,eAAe,EAAE,SAAS;IAC1Bf,KAAK,EAAE;EACT,CAAC;EACDiB,OAAO,EAAE;IACPF,eAAe,EAAE,UAAU;IAC3Bf,KAAK,EAAE;EACT,CAAC;EACDkB,KAAK,EAAE;IACLH,eAAe,EAAE,QAAQ;IACzBf,KAAK,EAAE;EACT;AACF,CAAC;AAED,IAAMN,SAAS,GAAGlB,MAAM,CAACE,GAAG,CAAC,CAAAyC,UAAA;EAAAN,WAAA;EAAAO,WAAA;AAAA,+BACzB3C,OAAO,CAAC;EAAE4C,QAAQ,EAAEP;AAAe,CAAC,CAAC,CAExC"}
+{"version":3,"file":"Toast.js","names":["React","styled","variant","Box","BoxProps","Flex","Clickable","Text","Toast","_ref","id","action","description","message","onClose","rest","_objectWithoutProperties","_excluded","handleClick","createElement","Container","_extends","width","px","py","bg","color","role","tabIndex","onClick","onKeyPress","event","key","style","cursor","alignItems","justifyContent","textDecoration","label","displayName","TOAST_VARIANTS","backgroundColor","alert","success","error","withConfig","componentId","variants"],"sources":["../../../../src/elements/Toasts/Toast.tsx"],"sourcesContent":["import React from \"react\"\nimport styled from \"styled-components\"\nimport { variant } from \"styled-system\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Flex } from \"../Flex\"\nimport { Clickable } from \"../Clickable\"\nimport { Text } from \"../Text\"\n\nexport type ToastVariant = keyof typeof TOAST_VARIANTS\n\nexport interface ToastProps extends BoxProps {\n  id: string\n  action?: {\n    label: string\n    onClick(): void\n  }\n  description?: string\n  message: string\n  onClose?(id: string): void\n  variant?: ToastVariant\n}\n\nexport const Toast: React.FC<React.PropsWithChildren<ToastProps>> = ({\n  id,\n  action,\n  description,\n  message,\n  onClose,\n  ...rest\n}) => {\n  const handleClick = () => {\n    onClose?.(id)\n  }\n\n  return (\n    <Container\n      width=\"100%\"\n      px={2}\n      py={1}\n      bg=\"mono100\"\n      color=\"mono0\"\n      role=\"button\"\n      tabIndex={0}\n      onClick={handleClick}\n      onKeyPress={(event) => {\n        if (event.key === \"Enter\" || event.key === \" \") {\n          onClose?.(id)\n        }\n      }}\n      style={{ cursor: \"pointer\" }}\n      {...rest}\n    >\n      <Flex alignItems=\"flex-start\" justifyContent=\"space-between\">\n        <Text variant=\"sm-display\">{message}</Text>\n\n        {action && (\n          <Clickable onClick={action.onClick} textDecoration=\"underline\">\n            <Text variant=\"xs\">{action.label}</Text>\n          </Clickable>\n        )}\n      </Flex>\n\n      {description && <Text variant=\"xs\">{description}</Text>}\n    </Container>\n  )\n}\n\nexport const TOAST_VARIANTS = {\n  message: {\n    backgroundColor: \"mono100\",\n    color: \"mono0\",\n  },\n  alert: {\n    backgroundColor: \"blue100\",\n    color: \"mono0\",\n  },\n  success: {\n    backgroundColor: \"green100\",\n    color: \"mono0\",\n  },\n  error: {\n    backgroundColor: \"red100\",\n    color: \"mono0\",\n  },\n}\n\nconst Container = styled(Box)`\n  ${variant({ variants: TOAST_VARIANTS })}\n  user-select: none;\n`\n"],"mappings":";;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAASC,OAAO,QAAQ,eAAe;AACvC,SAASC,GAAG,EAAEC,QAAQ;AACtB,SAASC,IAAI;AACb,SAASC,SAAS;AAClB,SAASC,IAAI;AAgBb,OAAO,IAAMC,KAAoD,GAAG,SAAvDA,KAAoDA,CAAAC,IAAA,EAO3D;EAAA,IANJC,EAAE,GAAAD,IAAA,CAAFC,EAAE;IACFC,MAAM,GAAAF,IAAA,CAANE,MAAM;IACNC,WAAW,GAAAH,IAAA,CAAXG,WAAW;IACXC,OAAO,GAAAJ,IAAA,CAAPI,OAAO;IACPC,OAAO,GAAAL,IAAA,CAAPK,OAAO;IACJC,IAAI,GAAAC,wBAAA,CAAAP,IAAA,EAAAQ,SAAA;EAEP,IAAMC,WAAW,GAAG,SAAdA,WAAWA,CAAA,EAAS;IACxBJ,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAGJ,EAAE,CAAC;EACf,CAAC;EAED,oBACEV,KAAA,CAAAmB,aAAA,CAACC,SAAS,EAAAC,QAAA;IACRC,KAAK,EAAC,MAAM;IACZC,EAAE,EAAE,CAAE;IACNC,EAAE,EAAE,CAAE;IACNC,EAAE,EAAC,SAAS;IACZC,KAAK,EAAC,OAAO;IACbC,IAAI,EAAC,QAAQ;IACbC,QAAQ,EAAE,CAAE;IACZC,OAAO,EAAEX,WAAY;IACrBY,UAAU,EAAE,SAAZA,UAAUA,CAAGC,KAAK,EAAK;MACrB,IAAIA,KAAK,CAACC,GAAG,KAAK,OAAO,IAAID,KAAK,CAACC,GAAG,KAAK,GAAG,EAAE;QAC9ClB,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAGJ,EAAE,CAAC;MACf;IACF,CAAE;IACFuB,KAAK,EAAE;MAAEC,MAAM,EAAE;IAAU;EAAE,GACzBnB,IAAI,gBAERf,KAAA,CAAAmB,aAAA,CAACd,IAAI;IAAC8B,UAAU,EAAC,YAAY;IAACC,cAAc,EAAC;EAAe,gBAC1DpC,KAAA,CAAAmB,aAAA,CAACZ,IAAI;IAACL,OAAO,EAAC;EAAY,GAAEW,OAAO,CAAQ,EAE1CF,MAAM,iBACLX,KAAA,CAAAmB,aAAA,CAACb,SAAS;IAACuB,OAAO,EAAElB,MAAM,CAACkB,OAAQ;IAACQ,cAAc,EAAC;EAAW,gBAC5DrC,KAAA,CAAAmB,aAAA,CAACZ,IAAI;IAACL,OAAO,EAAC;EAAI,GAAES,MAAM,CAAC2B,KAAK,CAAQ,CAE3C,CACI,EAEN1B,WAAW,iBAAIZ,KAAA,CAAAmB,aAAA,CAACZ,IAAI;IAACL,OAAO,EAAC;EAAI,GAAEU,WAAW,CAAQ,CAC7C;AAEhB,CAAC;AA3CYJ,KAAoD,CAAA+B,WAAA;AA6CjE,OAAO,IAAMC,cAAc,GAAG;EAC5B3B,OAAO,EAAE;IACP4B,eAAe,EAAE,SAAS;IAC1Bf,KAAK,EAAE;EACT,CAAC;EACDgB,KAAK,EAAE;IACLD,eAAe,EAAE,SAAS;IAC1Bf,KAAK,EAAE;EACT,CAAC;EACDiB,OAAO,EAAE;IACPF,eAAe,EAAE,UAAU;IAC3Bf,KAAK,EAAE;EACT,CAAC;EACDkB,KAAK,EAAE;IACLH,eAAe,EAAE,QAAQ;IACzBf,KAAK,EAAE;EACT;AACF,CAAC;AAED,IAAMN,SAAS,GAAGnB,MAAM,CAACE,GAAG,CAAC,CAAA0C,UAAA;EAAAN,WAAA;EAAAO,WAAA;AAAA,+BACzB5C,OAAO,CAAC;EAAE6C,QAAQ,EAAEP;AAAe,CAAC,CAAC,CAExC"}

package/dist/esm/elements/Toasts/Toasts.js

@@ -5,7 +5,7 @@ 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 from "react";
 import { VisuallyHidden } from "../VisuallyHidden";
-import { Box } from "../Box";
+import { Box, BoxProps } from "../Box";
 import { Join } from "../Join";
 import { Spacer } from "../Spacer";
 import { Toast } from "./Toast";

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

@@ -1 +1 @@
-{"version":3,"file":"Toasts.js","names":["React","VisuallyHidden","Box","Join","Spacer","Toast","useToasts","Toasts","_ref","_ref$limit","limit","rest","_objectWithoutProperties","_excluded","_useToasts","toasts","createElement","Fragment","separator","y","takeRight","map","_ref2","id","_excluded2","_extends","key","toast","i","message","description","xs","arguments","length","undefined","slice"],"sources":["../../../../src/elements/Toasts/Toasts.tsx"],"sourcesContent":["import React from \"react\"\nimport { VisuallyHidden } from \"../VisuallyHidden\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Join } from \"../Join\"\nimport { Spacer } from \"../Spacer\"\nimport { Toast } from \"./Toast\"\nimport { useToasts } from \"./useToasts\"\n\nexport interface ToastsProps extends BoxProps {\n  limit?: number\n}\n\nexport const Toasts: React.FC<React.PropsWithChildren<ToastsProps>> = ({ limit = 5, ...rest }) => {\n  const { toasts } = useToasts()\n\n  return (\n    <>\n      <Box {...rest}>\n        <Join separator={<Spacer y={1} />}>\n          {takeRight(toasts, limit).map(({ id, ...rest }) => (\n            <Toast key={id} id={id} {...rest} />\n          ))}\n        </Join>\n      </Box>\n\n      <VisuallyHidden\n        aria-live=\"assertive\"\n        aria-atomic=\"true\"\n        aria-relevant=\"additions\"\n      >\n        {toasts.map((toast, i) => {\n          return (\n            <div key={i}>\n              {toast.message} - {toast.description}\n            </div>\n          )\n        })}\n      </VisuallyHidden>\n    </>\n  )\n}\n\nconst takeRight = <T,>(xs: T[], limit = 1) => {\n  if (xs.length < limit) {\n    return xs\n  }\n\n  return xs.slice(xs.length - limit, xs.length)\n}\n"],"mappings":";;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,cAAc;AACvB,SAASC,GAAG;AACZ,SAASC,IAAI;AACb,SAASC,MAAM;AACf,SAASC,KAAK;AACd,SAASC,SAAS;AAMlB,OAAO,IAAMC,MAAsD,GAAG,SAAzDA,MAAsDA,CAAAC,IAAA,EAA+B;EAAA,IAAAC,UAAA,GAAAD,IAAA,CAAzBE,KAAK;IAALA,KAAK,GAAAD,UAAA,cAAG,CAAC,GAAAA,UAAA;IAAKE,IAAI,GAAAC,wBAAA,CAAAJ,IAAA,EAAAK,SAAA;EACzF,IAAAC,UAAA,GAAmBR,SAAS,EAAE;IAAtBS,MAAM,GAAAD,UAAA,CAANC,MAAM;EAEd,oBACEf,KAAA,CAAAgB,aAAA,CAAAhB,KAAA,CAAAiB,QAAA,qBACEjB,KAAA,CAAAgB,aAAA,CAACd,GAAG,EAAKS,IAAI,eACXX,KAAA,CAAAgB,aAAA,CAACb,IAAI;IAACe,SAAS,eAAElB,KAAA,CAAAgB,aAAA,CAACZ,MAAM;MAACe,CAAC,EAAE;IAAE;EAAI,GAC/BC,SAAS,CAACL,MAAM,EAAEL,KAAK,CAAC,CAACW,GAAG,CAAC,UAAAC,KAAA;IAAA,IAAGC,EAAE,GAAAD,KAAA,CAAFC,EAAE;MAAKZ,IAAI,GAAAC,wBAAA,CAAAU,KAAA,EAAAE,UAAA;IAAA,oBAC1CxB,KAAA,CAAAgB,aAAA,CAACX,KAAK,EAAAoB,QAAA;MAACC,GAAG,EAAEH,EAAG;MAACA,EAAE,EAAEA;IAAG,GAAKZ,IAAI,EAAI;EAAA,CACrC,CAAC,CACG,CACH,eAENX,KAAA,CAAAgB,aAAA,CAACf,cAAc;IACb,aAAU,WAAW;IACrB,eAAY,MAAM;IAClB,iBAAc;EAAW,GAExBc,MAAM,CAACM,GAAG,CAAC,UAACM,KAAK,EAAEC,CAAC,EAAK;IACxB,oBACE5B,KAAA,CAAAgB,aAAA;MAAKU,GAAG,EAAEE;IAAE,GACTD,KAAK,CAACE,OAAO,EAAC,KAAG,EAACF,KAAK,CAACG,WAAW,CAChC;EAEV,CAAC,CAAC,CACa,CAChB;AAEP,CAAC;AAED,IAAMV,SAAS,GAAG,SAAZA,SAASA,CAAQW,EAAO,EAAgB;EAAA,IAAdrB,KAAK,GAAAsB,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAG,CAAC;EACvC,IAAID,EAAE,CAACE,MAAM,GAAGvB,KAAK,EAAE;IACrB,OAAOqB,EAAE;EACX;EAEA,OAAOA,EAAE,CAACI,KAAK,CAACJ,EAAE,CAACE,MAAM,GAAGvB,KAAK,EAAEqB,EAAE,CAACE,MAAM,CAAC;AAC/C,CAAC"}
+{"version":3,"file":"Toasts.js","names":["React","VisuallyHidden","Box","BoxProps","Join","Spacer","Toast","useToasts","Toasts","_ref","_ref$limit","limit","rest","_objectWithoutProperties","_excluded","_useToasts","toasts","createElement","Fragment","separator","y","takeRight","map","_ref2","id","_excluded2","_extends","key","toast","i","message","description","xs","arguments","length","undefined","slice"],"sources":["../../../../src/elements/Toasts/Toasts.tsx"],"sourcesContent":["import React from \"react\"\nimport { VisuallyHidden } from \"../VisuallyHidden\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Join } from \"../Join\"\nimport { Spacer } from \"../Spacer\"\nimport { Toast } from \"./Toast\"\nimport { useToasts } from \"./useToasts\"\n\nexport interface ToastsProps extends BoxProps {\n  limit?: number\n}\n\nexport const Toasts: React.FC<React.PropsWithChildren<ToastsProps>> = ({ limit = 5, ...rest }) => {\n  const { toasts } = useToasts()\n\n  return (\n    <>\n      <Box {...rest}>\n        <Join separator={<Spacer y={1} />}>\n          {takeRight(toasts, limit).map(({ id, ...rest }) => (\n            <Toast key={id} id={id} {...rest} />\n          ))}\n        </Join>\n      </Box>\n\n      <VisuallyHidden\n        aria-live=\"assertive\"\n        aria-atomic=\"true\"\n        aria-relevant=\"additions\"\n      >\n        {toasts.map((toast, i) => {\n          return (\n            <div key={i}>\n              {toast.message} - {toast.description}\n            </div>\n          )\n        })}\n      </VisuallyHidden>\n    </>\n  )\n}\n\nconst takeRight = <T,>(xs: T[], limit = 1) => {\n  if (xs.length < limit) {\n    return xs\n  }\n\n  return xs.slice(xs.length - limit, xs.length)\n}\n"],"mappings":";;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,cAAc;AACvB,SAASC,GAAG,EAAEC,QAAQ;AACtB,SAASC,IAAI;AACb,SAASC,MAAM;AACf,SAASC,KAAK;AACd,SAASC,SAAS;AAMlB,OAAO,IAAMC,MAAsD,GAAG,SAAzDA,MAAsDA,CAAAC,IAAA,EAA+B;EAAA,IAAAC,UAAA,GAAAD,IAAA,CAAzBE,KAAK;IAALA,KAAK,GAAAD,UAAA,cAAG,CAAC,GAAAA,UAAA;IAAKE,IAAI,GAAAC,wBAAA,CAAAJ,IAAA,EAAAK,SAAA;EACzF,IAAAC,UAAA,GAAmBR,SAAS,EAAE;IAAtBS,MAAM,GAAAD,UAAA,CAANC,MAAM;EAEd,oBACEhB,KAAA,CAAAiB,aAAA,CAAAjB,KAAA,CAAAkB,QAAA,qBACElB,KAAA,CAAAiB,aAAA,CAACf,GAAG,EAAKU,IAAI,eACXZ,KAAA,CAAAiB,aAAA,CAACb,IAAI;IAACe,SAAS,eAAEnB,KAAA,CAAAiB,aAAA,CAACZ,MAAM;MAACe,CAAC,EAAE;IAAE;EAAI,GAC/BC,SAAS,CAACL,MAAM,EAAEL,KAAK,CAAC,CAACW,GAAG,CAAC,UAAAC,KAAA;IAAA,IAAGC,EAAE,GAAAD,KAAA,CAAFC,EAAE;MAAKZ,IAAI,GAAAC,wBAAA,CAAAU,KAAA,EAAAE,UAAA;IAAA,oBAC1CzB,KAAA,CAAAiB,aAAA,CAACX,KAAK,EAAAoB,QAAA;MAACC,GAAG,EAAEH,EAAG;MAACA,EAAE,EAAEA;IAAG,GAAKZ,IAAI,EAAI;EAAA,CACrC,CAAC,CACG,CACH,eAENZ,KAAA,CAAAiB,aAAA,CAAChB,cAAc;IACb,aAAU,WAAW;IACrB,eAAY,MAAM;IAClB,iBAAc;EAAW,GAExBe,MAAM,CAACM,GAAG,CAAC,UAACM,KAAK,EAAEC,CAAC,EAAK;IACxB,oBACE7B,KAAA,CAAAiB,aAAA;MAAKU,GAAG,EAAEE;IAAE,GACTD,KAAK,CAACE,OAAO,EAAC,KAAG,EAACF,KAAK,CAACG,WAAW,CAChC;EAEV,CAAC,CAAC,CACa,CAChB;AAEP,CAAC;AAED,IAAMV,SAAS,GAAG,SAAZA,SAASA,CAAQW,EAAO,EAAgB;EAAA,IAAdrB,KAAK,GAAAsB,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAG,CAAC;EACvC,IAAID,EAAE,CAACE,MAAM,GAAGvB,KAAK,EAAE;IACrB,OAAOqB,EAAE;EACX;EAEA,OAAOA,EAAE,CAACI,KAAK,CAACJ,EAAE,CAACE,MAAM,GAAGvB,KAAK,EAAEqB,EAAE,CAACE,MAAM,CAAC;AAC/C,CAAC"}

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

@@ -12,7 +12,7 @@ import React, { useState } from "react";
 import { Flex } from "../Flex";
 import { Button } from "../Button";
 import { Text } from "../Text";
-import { TOAST_VARIANTS } from "./Toast";
+import { ToastVariant, TOAST_VARIANTS } from "./Toast";
 import { Toasts } from "./Toasts";
 import { ToastsProvider, useToasts } from "./useToasts";
 import { Separator } from "../Separator";