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

package/dist/esm/elements/FilterSelect/Components/FilterSelectResultItem.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { Checkbox } from "../../Checkbox";
-import { useFilterSelectContext } from "./FilterSelectContext";
+import { Item, useFilterSelectContext } from "./FilterSelectContext";
 import { Radio } from "../../Radio";
 export var FilterSelectResultItem = function FilterSelectResultItem(props) {
   var _useFilterSelectConte = useFilterSelectContext(),

package/dist/esm/elements/FilterSelect/Components/FilterSelectResultItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterSelectResultItem.js","names":["React","Checkbox","useFilterSelectContext","Radio","FilterSelectResultItem","props","_useFilterSelectConte","renderItemLabel","selectedItems","toggleSelectedItem","multiselect","isSelected","find","item","value","label","Component","createElement","onSelect","selected","key","my","displayName"],"sources":["../../../../../src/elements/FilterSelect/Components/FilterSelectResultItem.tsx"],"sourcesContent":["import React from \"react\"\nimport { Checkbox } from \"../../Checkbox\"\nimport { Item, useFilterSelectContext } from \"./FilterSelectContext\"\nimport { Radio } from \"../../Radio\"\n\nexport const FilterSelectResultItem: React.FC<React.PropsWithChildren<Item>> = (props) => {\n  const {\n    renderItemLabel,\n    selectedItems,\n    toggleSelectedItem,\n    multiselect,\n  } = useFilterSelectContext()\n\n  const isSelected = !!selectedItems.find(\n    (item: Item) => item.value === props.value\n  )\n  const label = renderItemLabel ? renderItemLabel(props) : props.label\n  const Component = multiselect ? Checkbox : Radio\n\n  return (\n    <Component\n      onSelect={() => toggleSelectedItem(props)}\n      selected={isSelected}\n      key={props.value}\n      my={1}\n    >\n      {label}\n    </Component>\n  )\n}\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,QAAQ;AACjB,SAAeC,sBAAsB;AACrC,SAASC,KAAK;AAEd,OAAO,IAAMC,sBAA+D,GAAG,SAAlEA,sBAA+DA,CAAIC,KAAK,EAAK;EACxF,IAAAC,qBAAA,GAKIJ,sBAAsB,EAAE;IAJ1BK,eAAe,GAAAD,qBAAA,CAAfC,eAAe;IACfC,aAAa,GAAAF,qBAAA,CAAbE,aAAa;IACbC,kBAAkB,GAAAH,qBAAA,CAAlBG,kBAAkB;IAClBC,WAAW,GAAAJ,qBAAA,CAAXI,WAAW;EAGb,IAAMC,UAAU,GAAG,CAAC,CAACH,aAAa,CAACI,IAAI,CACrC,UAACC,IAAU;IAAA,OAAKA,IAAI,CAACC,KAAK,KAAKT,KAAK,CAACS,KAAK;EAAA,EAC3C;EACD,IAAMC,KAAK,GAAGR,eAAe,GAAGA,eAAe,CAACF,KAAK,CAAC,GAAGA,KAAK,CAACU,KAAK;EACpE,IAAMC,SAAS,GAAGN,WAAW,GAAGT,QAAQ,GAAGE,KAAK;EAEhD,oBACEH,KAAA,CAAAiB,aAAA,CAACD,SAAS;IACRE,QAAQ,EAAE,SAAVA,QAAQA,CAAA;MAAA,OAAQT,kBAAkB,CAACJ,KAAK,CAAC;IAAA,CAAC;IAC1Cc,QAAQ,EAAER,UAAW;IACrBS,GAAG,EAAEf,KAAK,CAACS,KAAM;IACjBO,EAAE,EAAE;EAAE,GAELN,KAAK,CACI;AAEhB,CAAC;AAxBYX,sBAA+D,CAAAkB,WAAA"}
+{"version":3,"file":"FilterSelectResultItem.js","names":["React","Checkbox","Item","useFilterSelectContext","Radio","FilterSelectResultItem","props","_useFilterSelectConte","renderItemLabel","selectedItems","toggleSelectedItem","multiselect","isSelected","find","item","value","label","Component","createElement","onSelect","selected","key","my","displayName"],"sources":["../../../../../src/elements/FilterSelect/Components/FilterSelectResultItem.tsx"],"sourcesContent":["import React from \"react\"\nimport { Checkbox } from \"../../Checkbox\"\nimport { Item, useFilterSelectContext } from \"./FilterSelectContext\"\nimport { Radio } from \"../../Radio\"\n\nexport const FilterSelectResultItem: React.FC<React.PropsWithChildren<Item>> = (props) => {\n  const {\n    renderItemLabel,\n    selectedItems,\n    toggleSelectedItem,\n    multiselect,\n  } = useFilterSelectContext()\n\n  const isSelected = !!selectedItems.find(\n    (item: Item) => item.value === props.value\n  )\n  const label = renderItemLabel ? renderItemLabel(props) : props.label\n  const Component = multiselect ? Checkbox : Radio\n\n  return (\n    <Component\n      onSelect={() => toggleSelectedItem(props)}\n      selected={isSelected}\n      key={props.value}\n      my={1}\n    >\n      {label}\n    </Component>\n  )\n}\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,QAAQ;AACjB,SAASC,IAAI,EAAEC,sBAAsB;AACrC,SAASC,KAAK;AAEd,OAAO,IAAMC,sBAA+D,GAAG,SAAlEA,sBAA+DA,CAAIC,KAAK,EAAK;EACxF,IAAAC,qBAAA,GAKIJ,sBAAsB,EAAE;IAJ1BK,eAAe,GAAAD,qBAAA,CAAfC,eAAe;IACfC,aAAa,GAAAF,qBAAA,CAAbE,aAAa;IACbC,kBAAkB,GAAAH,qBAAA,CAAlBG,kBAAkB;IAClBC,WAAW,GAAAJ,qBAAA,CAAXI,WAAW;EAGb,IAAMC,UAAU,GAAG,CAAC,CAACH,aAAa,CAACI,IAAI,CACrC,UAACC,IAAU;IAAA,OAAKA,IAAI,CAACC,KAAK,KAAKT,KAAK,CAACS,KAAK;EAAA,EAC3C;EACD,IAAMC,KAAK,GAAGR,eAAe,GAAGA,eAAe,CAACF,KAAK,CAAC,GAAGA,KAAK,CAACU,KAAK;EACpE,IAAMC,SAAS,GAAGN,WAAW,GAAGV,QAAQ,GAAGG,KAAK;EAEhD,oBACEJ,KAAA,CAAAkB,aAAA,CAACD,SAAS;IACRE,QAAQ,EAAE,SAAVA,QAAQA,CAAA;MAAA,OAAQT,kBAAkB,CAACJ,KAAK,CAAC;IAAA,CAAC;IAC1Cc,QAAQ,EAAER,UAAW;IACrBS,GAAG,EAAEf,KAAK,CAACS,KAAM;IACjBO,EAAE,EAAE;EAAE,GAELN,KAAK,CACI;AAEhB,CAAC;AAxBYX,sBAA+D,CAAAkB,WAAA"}

package/dist/esm/elements/FilterSelect/FilterSelect.js

@@ -10,7 +10,7 @@ import * as React from "react";
 import { ShowMore } from "../ShowMore";
 import { Flex } from "../Flex";
 import { FilterSelectResultItem } from "./Components/FilterSelectResultItem";
-import { FilterSelectContextProvider, useFilterSelectContext } from "./Components/FilterSelectContext";
+import { FilterSelectContextProvider, FilterSelectState, Items, useFilterSelectContext } from "./Components/FilterSelectContext";
 import { FilterInput } from "./Components/FilterInput";
 import { VisuallyHidden } from "../VisuallyHidden";
 import { Text } from "../Text";

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

@@ -1 +1 @@
-{"version":3,"file":"FilterSelect.js","names":["intersection","orderBy","uniqBy","React","ShowMore","Flex","FilterSelectResultItem","FilterSelectContextProvider","useFilterSelectContext","FilterInput","VisuallyHidden","Text","INITIAL_ITEMS_TO_SHOW","useUpdateEffect","Box","Clickable","Stack","FilterSelect","props","createElement","_FilterSelect","displayName","_useFilterSelectConte","enableSelectAll","filteredItems","initialItemsToShow","isFiltered","items","moveSelectedToTop","multiselect","onChange","order","query","selectedItems","console","error","length","orderItems","_toConsumableArray","itemsOrdered","filteredItemsOrdered","itemsSorted","concat","x","value","expanded","isBelowTheFoldSelected","showNoResults","showSelectAll","flexDirection","mb","variant","Fragment","SelectAll","map","item","_extends","key","initial","textDecoration","mt","textAlign","resultsSorted","selected","_ref","results","slice","_ref2","isSelected","_useFilterSelectConte2","onSelectAll","setSelectedItems","isClearDisabled","my","gap","className","onClick","disabled","color"],"sources":["../../../../src/elements/FilterSelect/FilterSelect.tsx"],"sourcesContent":["import { intersection, orderBy, uniqBy } from \"es-toolkit\"\nimport * as React from \"react\"\nimport { ShowMore } from \"../ShowMore\"\nimport { Flex } from \"../Flex\"\nimport { FilterSelectResultItem } from \"./Components/FilterSelectResultItem\"\nimport {\n  FilterSelectContextProvider,\n  FilterSelectState,\n  Items,\n  useFilterSelectContext,\n} from \"./Components/FilterSelectContext\"\nimport { FilterInput } from \"./Components/FilterInput\"\nimport { VisuallyHidden } from \"../VisuallyHidden\"\nimport { Text } from \"../Text\"\nimport { INITIAL_ITEMS_TO_SHOW } from \"../ShowMore\"\nimport { useUpdateEffect } from \"../../utils\"\nimport { Box } from \"../Box\"\nimport { Clickable } from \"../Clickable\"\nimport { Stack } from \"../Stack\"\n\nexport type FilterSelectProps = Partial<FilterSelectState>\n\nexport const FilterSelect: React.FC<\n  React.PropsWithChildren<FilterSelectProps>\n> = (props) => {\n  return (\n    <FilterSelectContextProvider {...props}>\n      <_FilterSelect />\n    </FilterSelectContextProvider>\n  )\n}\n\nconst _FilterSelect: React.FC<React.PropsWithChildren<unknown>> = () => {\n  const {\n    enableSelectAll,\n    filteredItems,\n    initialItemsToShow,\n    isFiltered,\n    items,\n    moveSelectedToTop,\n    multiselect,\n    onChange,\n    order,\n    query,\n    selectedItems,\n  } = useFilterSelectContext()\n\n  if (!multiselect && enableSelectAll) {\n    console.error(\n      \"FilterSelect: enableSelectAll is only available with multiselect mode.\"\n    )\n  }\n\n  // Dispatch change event\n  useUpdateEffect(() => {\n    if (onChange) {\n      onChange({\n        items,\n        filteredItems,\n        selectedItems,\n        query,\n      })\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [onChange, selectedItems])\n\n  if (items.length === 0) {\n    return null\n  }\n\n  const orderItems = (items: Items) => orderBy([...items], order[0], order[1])\n  const itemsOrdered = orderItems(items)\n  const filteredItemsOrdered = orderItems(filteredItems)\n  const itemsSorted =\n    multiselect && moveSelectedToTop\n      ? // Move selected items to the top\n        uniqBy(selectedItems.concat(itemsOrdered), (x) => x.value)\n      : itemsOrdered\n  const expanded = isBelowTheFoldSelected(selectedItems, itemsSorted)\n  const showNoResults = filteredItems.length === 0 && query !== \"\"\n  const showSelectAll = multiselect && enableSelectAll && !showNoResults\n\n  return (\n    <Flex flexDirection=\"column\">\n      <FilterInput mb={1} />\n\n      {query !== \"\" && (\n        <VisuallyHidden aria-live=\"polite\">\n          {`${filteredItems.length} result${\n            filteredItems.length === 1 ? \"\" : \"s\"\n          }`}\n        </VisuallyHidden>\n      )}\n\n      {showNoResults && <Text variant=\"sm\">No results.</Text>}\n\n      {isFiltered ? (\n        <>\n          {showSelectAll && <SelectAll />}\n          {filteredItemsOrdered.map((item) => (\n            <FilterSelectResultItem key={item.value} {...item} />\n          ))}\n        </>\n      ) : (\n        <ShowMore\n          expanded={expanded}\n          initial={initialItemsToShow}\n          variant={\"xs\"}\n          textDecoration=\"underline\"\n          mt={1}\n          textAlign=\"left\"\n        >\n          {itemsSorted.map((item) => {\n            return <FilterSelectResultItem key={item.value} {...item} />\n          })}\n        </ShowMore>\n      )}\n    </Flex>\n  )\n}\n\nexport const isBelowTheFoldSelected = (selectedItems, resultsSorted) => {\n  const selected = selectedItems.map(({ value }) => value)\n  const results = resultsSorted\n    .slice(INITIAL_ITEMS_TO_SHOW)\n    .map(({ value }) => value)\n  const isSelected = intersection(selected, results).length > 0\n  return isSelected\n}\n\nconst SelectAll: React.FC = () => {\n  const {\n    items,\n    filteredItems,\n    onSelectAll,\n    query,\n    selectedItems,\n    setSelectedItems,\n  } = useFilterSelectContext()\n\n  const isClearDisabled = selectedItems.length === 0\n\n  return (\n    <Box my={1}>\n      <Stack gap={2} flexDirection={\"row\"}>\n        <Clickable\n          data-testid=\"filterSelect-selectAll\"\n          className=\"selectAll\"\n          onClick={() => {\n            setSelectedItems(filteredItems)\n            onSelectAll?.({\n              items,\n              filteredItems,\n              selectedItems: filteredItems,\n              query,\n            })\n          }}\n          textDecoration=\"underline\"\n        >\n          <Text variant=\"xs\">Select all</Text>\n        </Clickable>\n\n        <Clickable\n          data-testid=\"filterSelect-clear\"\n          className=\"clear\"\n          onClick={() => setSelectedItems([])}\n          textDecoration=\"underline\"\n          disabled={isClearDisabled}\n          color={isClearDisabled ? \"mono60\" : \"mono100\"}\n        >\n          <Text variant=\"xs\">Clear</Text>\n        </Clickable>\n      </Stack>\n    </Box>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"FilterSelect.js","names":["intersection","orderBy","uniqBy","React","ShowMore","Flex","FilterSelectResultItem","FilterSelectContextProvider","FilterSelectState","Items","useFilterSelectContext","FilterInput","VisuallyHidden","Text","INITIAL_ITEMS_TO_SHOW","useUpdateEffect","Box","Clickable","Stack","FilterSelect","props","createElement","_FilterSelect","displayName","_useFilterSelectConte","enableSelectAll","filteredItems","initialItemsToShow","isFiltered","items","moveSelectedToTop","multiselect","onChange","order","query","selectedItems","console","error","length","orderItems","_toConsumableArray","itemsOrdered","filteredItemsOrdered","itemsSorted","concat","x","value","expanded","isBelowTheFoldSelected","showNoResults","showSelectAll","flexDirection","mb","variant","Fragment","SelectAll","map","item","_extends","key","initial","textDecoration","mt","textAlign","resultsSorted","selected","_ref","results","slice","_ref2","isSelected","_useFilterSelectConte2","onSelectAll","setSelectedItems","isClearDisabled","my","gap","className","onClick","disabled","color"],"sources":["../../../../src/elements/FilterSelect/FilterSelect.tsx"],"sourcesContent":["import { intersection, orderBy, uniqBy } from \"es-toolkit\"\nimport * as React from \"react\"\nimport { ShowMore } from \"../ShowMore\"\nimport { Flex } from \"../Flex\"\nimport { FilterSelectResultItem } from \"./Components/FilterSelectResultItem\"\nimport {\n  FilterSelectContextProvider,\n  FilterSelectState,\n  Items,\n  useFilterSelectContext,\n} from \"./Components/FilterSelectContext\"\nimport { FilterInput } from \"./Components/FilterInput\"\nimport { VisuallyHidden } from \"../VisuallyHidden\"\nimport { Text } from \"../Text\"\nimport { INITIAL_ITEMS_TO_SHOW } from \"../ShowMore\"\nimport { useUpdateEffect } from \"../../utils\"\nimport { Box } from \"../Box\"\nimport { Clickable } from \"../Clickable\"\nimport { Stack } from \"../Stack\"\n\nexport type FilterSelectProps = Partial<FilterSelectState>\n\nexport const FilterSelect: React.FC<\n  React.PropsWithChildren<FilterSelectProps>\n> = (props) => {\n  return (\n    <FilterSelectContextProvider {...props}>\n      <_FilterSelect />\n    </FilterSelectContextProvider>\n  )\n}\n\nconst _FilterSelect: React.FC<React.PropsWithChildren<unknown>> = () => {\n  const {\n    enableSelectAll,\n    filteredItems,\n    initialItemsToShow,\n    isFiltered,\n    items,\n    moveSelectedToTop,\n    multiselect,\n    onChange,\n    order,\n    query,\n    selectedItems,\n  } = useFilterSelectContext()\n\n  if (!multiselect && enableSelectAll) {\n    console.error(\n      \"FilterSelect: enableSelectAll is only available with multiselect mode.\"\n    )\n  }\n\n  // Dispatch change event\n  useUpdateEffect(() => {\n    if (onChange) {\n      onChange({\n        items,\n        filteredItems,\n        selectedItems,\n        query,\n      })\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [onChange, selectedItems])\n\n  if (items.length === 0) {\n    return null\n  }\n\n  const orderItems = (items: Items) => orderBy([...items], order[0], order[1])\n  const itemsOrdered = orderItems(items)\n  const filteredItemsOrdered = orderItems(filteredItems)\n  const itemsSorted =\n    multiselect && moveSelectedToTop\n      ? // Move selected items to the top\n        uniqBy(selectedItems.concat(itemsOrdered), (x) => x.value)\n      : itemsOrdered\n  const expanded = isBelowTheFoldSelected(selectedItems, itemsSorted)\n  const showNoResults = filteredItems.length === 0 && query !== \"\"\n  const showSelectAll = multiselect && enableSelectAll && !showNoResults\n\n  return (\n    <Flex flexDirection=\"column\">\n      <FilterInput mb={1} />\n\n      {query !== \"\" && (\n        <VisuallyHidden aria-live=\"polite\">\n          {`${filteredItems.length} result${\n            filteredItems.length === 1 ? \"\" : \"s\"\n          }`}\n        </VisuallyHidden>\n      )}\n\n      {showNoResults && <Text variant=\"sm\">No results.</Text>}\n\n      {isFiltered ? (\n        <>\n          {showSelectAll && <SelectAll />}\n          {filteredItemsOrdered.map((item) => (\n            <FilterSelectResultItem key={item.value} {...item} />\n          ))}\n        </>\n      ) : (\n        <ShowMore\n          expanded={expanded}\n          initial={initialItemsToShow}\n          variant={\"xs\"}\n          textDecoration=\"underline\"\n          mt={1}\n          textAlign=\"left\"\n        >\n          {itemsSorted.map((item) => {\n            return <FilterSelectResultItem key={item.value} {...item} />\n          })}\n        </ShowMore>\n      )}\n    </Flex>\n  )\n}\n\nexport const isBelowTheFoldSelected = (selectedItems, resultsSorted) => {\n  const selected = selectedItems.map(({ value }) => value)\n  const results = resultsSorted\n    .slice(INITIAL_ITEMS_TO_SHOW)\n    .map(({ value }) => value)\n  const isSelected = intersection(selected, results).length > 0\n  return isSelected\n}\n\nconst SelectAll: React.FC = () => {\n  const {\n    items,\n    filteredItems,\n    onSelectAll,\n    query,\n    selectedItems,\n    setSelectedItems,\n  } = useFilterSelectContext()\n\n  const isClearDisabled = selectedItems.length === 0\n\n  return (\n    <Box my={1}>\n      <Stack gap={2} flexDirection={\"row\"}>\n        <Clickable\n          data-testid=\"filterSelect-selectAll\"\n          className=\"selectAll\"\n          onClick={() => {\n            setSelectedItems(filteredItems)\n            onSelectAll?.({\n              items,\n              filteredItems,\n              selectedItems: filteredItems,\n              query,\n            })\n          }}\n          textDecoration=\"underline\"\n        >\n          <Text variant=\"xs\">Select all</Text>\n        </Clickable>\n\n        <Clickable\n          data-testid=\"filterSelect-clear\"\n          className=\"clear\"\n          onClick={() => setSelectedItems([])}\n          textDecoration=\"underline\"\n          disabled={isClearDisabled}\n          color={isClearDisabled ? \"mono60\" : \"mono100\"}\n        >\n          <Text variant=\"xs\">Clear</Text>\n        </Clickable>\n      </Stack>\n    </Box>\n  )\n}\n"],"mappings":"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"}

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

@@ -1,3 +1,3 @@
-export { FilterSelectChangeState, Items as FilterSelectItems } from "./Components/FilterSelectContext";
+export { FilterSelectChangeState, Item as FilterSelectItem, Items as FilterSelectItems } from "./Components/FilterSelectContext";
 export * from "./FilterSelect";
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["FilterSelectChangeState","Items","FilterSelectItems"],"sources":["../../../../src/elements/FilterSelect/index.tsx"],"sourcesContent":["export {\n  FilterSelectChangeState,\n  Items as FilterSelectItems,\n} from \"./Components/FilterSelectContext\"\nexport * from \"./FilterSelect\"\n"],"mappings":"AAAA,SACEA,uBAAuB,EACvBC,KAAK,IAAIC,iBAAiB;AAE5B"}
+{"version":3,"file":"index.js","names":["FilterSelectChangeState","Item","FilterSelectItem","Items","FilterSelectItems"],"sources":["../../../../src/elements/FilterSelect/index.tsx"],"sourcesContent":["export {\n  FilterSelectChangeState,\n  Item as FilterSelectItem,\n  Items as FilterSelectItems,\n} from \"./Components/FilterSelectContext\"\nexport * from \"./FilterSelect\"\n"],"mappings":"AAAA,SACEA,uBAAuB,EACvBC,IAAI,IAAIC,gBAAgB,EACxBC,KAAK,IAAIC,iBAAiB;AAE5B"}

package/dist/esm/elements/Flex/Flex.js

@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import { Box } from "../Box";
+import { Box, BoxProps } from "../Box";
 
 /**
  * Flex is Box with display: flex

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

@@ -1 +1 @@
-{"version":3,"file":"Flex.js","names":["styled","Box","Flex","withConfig","displayName","componentId","defaultProps","display"],"sources":["../../../../src/elements/Flex/Flex.tsx"],"sourcesContent":["import styled from \"styled-components\"\nimport { Box, BoxProps } from \"../Box\"\n\n/**\n * Flex is Box with display: flex\n */\nexport type FlexProps = BoxProps\n\n/**\n * Flex is Box with display: flex\n */\nexport const Flex = styled(Box)<FlexProps>``\n\nFlex.defaultProps = {\n  display: \"flex\",\n}\n\nFlex.displayName = \"Flex\"\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AACtC,SAASC,GAAG;;AAEZ;AACA;AACA;;AAGA;AACA;AACA;AACA,OAAO,IAAMC,IAAI,GAAGF,MAAM,CAACC,GAAG,CAAC,CAAAE,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,QAAa;AAE5CH,IAAI,CAACI,YAAY,GAAG;EAClBC,OAAO,EAAE;AACX,CAAC;AAEDL,IAAI,CAACE,WAAW,GAAG,MAAM"}
+{"version":3,"file":"Flex.js","names":["styled","Box","BoxProps","Flex","withConfig","displayName","componentId","defaultProps","display"],"sources":["../../../../src/elements/Flex/Flex.tsx"],"sourcesContent":["import styled from \"styled-components\"\nimport { Box, BoxProps } from \"../Box\"\n\n/**\n * Flex is Box with display: flex\n */\nexport type FlexProps = BoxProps\n\n/**\n * Flex is Box with display: flex\n */\nexport const Flex = styled(Box)<FlexProps>``\n\nFlex.defaultProps = {\n  display: \"flex\",\n}\n\nFlex.displayName = \"Flex\"\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AACtC,SAASC,GAAG,EAAEC,QAAQ;;AAEtB;AACA;AACA;;AAGA;AACA;AACA;AACA,OAAO,IAAMC,IAAI,GAAGH,MAAM,CAACC,GAAG,CAAC,CAAAG,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,QAAa;AAE5CH,IAAI,CAACI,YAAY,GAAG;EAClBC,OAAO,EAAE;AACX,CAAC;AAEDL,IAAI,CAACE,WAAW,GAAG,MAAM"}

package/dist/esm/elements/FullBleed/FullBleed.js

@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import { Box } from "../Box";
+import { Box, BoxProps } from "../Box";
 
 /** FullBleedProps */
 

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

@@ -1 +1 @@
-{"version":3,"file":"FullBleed.js","names":["styled","Box","FullBleed","withConfig","displayName","componentId","defaultProps","position","left","right","width","maxWidth","marginLeft","marginRight"],"sources":["../../../../src/elements/FullBleed/FullBleed.tsx"],"sourcesContent":["import styled from \"styled-components\"\nimport { Box, BoxProps } from \"../Box\"\n\n/** FullBleedProps */\nexport type FullBleedProps = BoxProps\n\n/**\n * Utility to break out of parent containers\n */\nexport const FullBleed = styled(Box)``\n\nFullBleed.defaultProps = {\n  position: \"relative\",\n  left: \"50%\",\n  right: \"50%\",\n  width: \"100vw\",\n  maxWidth: \"100vw\",\n  marginLeft: \"-50vw\",\n  marginRight: \"-50vw\",\n}\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AACtC,SAASC,GAAG;;AAEZ;;AAGA;AACA;AACA;AACA,OAAO,IAAMC,SAAS,GAAGF,MAAM,CAACC,GAAG,CAAC,CAAAE,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,QAAE;AAEtCH,SAAS,CAACI,YAAY,GAAG;EACvBC,QAAQ,EAAE,UAAU;EACpBC,IAAI,EAAE,KAAK;EACXC,KAAK,EAAE,KAAK;EACZC,KAAK,EAAE,OAAO;EACdC,QAAQ,EAAE,OAAO;EACjBC,UAAU,EAAE,OAAO;EACnBC,WAAW,EAAE;AACf,CAAC"}
+{"version":3,"file":"FullBleed.js","names":["styled","Box","BoxProps","FullBleed","withConfig","displayName","componentId","defaultProps","position","left","right","width","maxWidth","marginLeft","marginRight"],"sources":["../../../../src/elements/FullBleed/FullBleed.tsx"],"sourcesContent":["import styled from \"styled-components\"\nimport { Box, BoxProps } from \"../Box\"\n\n/** FullBleedProps */\nexport type FullBleedProps = BoxProps\n\n/**\n * Utility to break out of parent containers\n */\nexport const FullBleed = styled(Box)``\n\nFullBleed.defaultProps = {\n  position: \"relative\",\n  left: \"50%\",\n  right: \"50%\",\n  width: \"100vw\",\n  maxWidth: \"100vw\",\n  marginLeft: \"-50vw\",\n  marginRight: \"-50vw\",\n}\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AACtC,SAASC,GAAG,EAAEC,QAAQ;;AAEtB;;AAGA;AACA;AACA;AACA,OAAO,IAAMC,SAAS,GAAGH,MAAM,CAACC,GAAG,CAAC,CAAAG,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,QAAE;AAEtCH,SAAS,CAACI,YAAY,GAAG;EACvBC,QAAQ,EAAE,UAAU;EACpBC,IAAI,EAAE,KAAK;EACXC,KAAK,EAAE,KAAK;EACZC,KAAK,EAAE,OAAO;EACdC,QAAQ,EAAE,OAAO;EACjBC,UAAU,EAAE,OAAO;EACnBC,WAAW,EAAE;AACf,CAAC"}

package/dist/esm/elements/GridColumns/GridColumns.js

@@ -4,10 +4,10 @@ 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, { useMemo } from "react";
 import styled from "styled-components";
-import { gridColumn } from "styled-system";
-import { Box } from "../Box";
-import { CSSGrid } from "../CSSGrid";
-import { calculateGridColumn, GRID_COLUMN_FULL_WIDTHS } from "./calculateGridColumn";
+import { gridColumn, GridColumnProps } from "styled-system";
+import { Box, BoxProps } from "../Box";
+import { CSSGrid, CSSGridProps } from "../CSSGrid";
+import { calculateGridColumn, ColumnCell, GRID_COLUMN_FULL_WIDTHS } from "./calculateGridColumn";
 
 /** GridColumns implements `Box` and the common grid properties */
 

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

@@ -1 +1 @@
-{"version":3,"file":"GridColumns.js","names":["React","useMemo","styled","gridColumn","Box","CSSGrid","calculateGridColumn","GRID_COLUMN_FULL_WIDTHS","GridColumns","withConfig","displayName","componentId","defaultProps","gridColumnGap","gridRowGap","Cell","Column","_ref","span","start","wrap","rest","_objectWithoutProperties","_excluded","gridColumnValue","createElement","Fragment","_extends","ColumnWrap","_ref2","display","map","value","includes"],"sources":["../../../../src/elements/GridColumns/GridColumns.tsx"],"sourcesContent":["import React, { useMemo } from \"react\"\nimport styled from \"styled-components\"\nimport { gridColumn, GridColumnProps } from \"styled-system\"\nimport { Box, BoxProps } from \"../Box\"\nimport { CSSGrid, CSSGridProps } from \"../CSSGrid\"\nimport {\n  calculateGridColumn,\n  ColumnCell,\n  GRID_COLUMN_FULL_WIDTHS,\n} from \"./calculateGridColumn\"\n\n/** GridColumns implements `Box` and the common grid properties */\nexport type GridColumnsProps = Omit<CSSGridProps, \"gridTemplateColumns\">\n\n/**\n * A 12-column fluid grid\n */\nexport const GridColumns = styled(CSSGrid)`\n  grid-template-columns: repeat(12, 1fr);\n`\n\nGridColumns.defaultProps = {\n  gridColumnGap: [1, 2],\n  gridRowGap: [1, 2],\n}\n\ntype CellProps = ColumnCell & GridColumnProps & BoxProps\n\nconst Cell = styled(Box)<CellProps>`\n  ${gridColumn}\n`\n\n/** Column implements `Box` and `gridColumn` */\nexport type ColumnProps = CellProps & {\n  /** denotes whether or not to break to a new row after column */\n  wrap?: boolean\n  children?: React.ReactNode\n}\n\n/**\n * A column sits within the GridColumns and spans the columns,\n * sitting between gutters.\n */\nexport const Column: React.FC<React.PropsWithChildren<ColumnProps>> = ({\n  span,\n  start,\n  wrap,\n  ...rest\n}) => {\n  const gridColumnValue = useMemo(() => {\n    return calculateGridColumn({ span, start })\n  }, [span, start])\n\n  return (\n    <>\n      <Cell gridColumn={gridColumnValue} {...rest} />\n      {wrap && <ColumnWrap gridColumnValue={gridColumnValue} />}\n    </>\n  )\n}\n\nconst ColumnWrap: React.FC<React.PropsWithChildren<{ gridColumnValue: string[] }>> = ({\n  gridColumnValue,\n}) => {\n  return (\n    <Cell\n      // Spans the remainder of the columns until the end\n      gridColumn={[\"auto / -1\"]}\n      // Hides the break if the value presented is going to span the full\n      // width of the column anyway. Prevents duplicated row gaps.\n      display={gridColumnValue.map((value) => {\n        return GRID_COLUMN_FULL_WIDTHS.includes(value) ? \"none\" : \"block\"\n      })}\n    />\n  )\n}\n"],"mappings":";;;;AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAASC,UAAU,QAAyB,eAAe;AAC3D,SAASC,GAAG;AACZ,SAASC,OAAO;AAChB,SACEC,mBAAmB,EAEnBC,uBAAuB;;AAGzB;;AAGA;AACA;AACA;AACA,OAAO,IAAMC,WAAW,GAAGN,MAAM,CAACG,OAAO,CAAC,CAAAI,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,6CAEzC;AAEDH,WAAW,CAACI,YAAY,GAAG;EACzBC,aAAa,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;EACrBC,UAAU,EAAE,CAAC,CAAC,EAAE,CAAC;AACnB,CAAC;AAID,IAAMC,IAAI,GAAGb,MAAM,CAACE,GAAG,CAAC,CAAAK,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,aACpBR,UAAU,CACb;;AAED;;AAOA;AACA;AACA;AACA;AACA,OAAO,IAAMa,MAAsD,GAAG,SAAzDA,MAAsDA,CAAAC,IAAA,EAK7D;EAAA,IAJJC,IAAI,GAAAD,IAAA,CAAJC,IAAI;IACJC,KAAK,GAAAF,IAAA,CAALE,KAAK;IACLC,IAAI,GAAAH,IAAA,CAAJG,IAAI;IACDC,IAAI,GAAAC,wBAAA,CAAAL,IAAA,EAAAM,SAAA;EAEP,IAAMC,eAAe,GAAGvB,OAAO,CAAC,YAAM;IACpC,OAAOK,mBAAmB,CAAC;MAAEY,IAAI,EAAJA,IAAI;MAAEC,KAAK,EAALA;IAAM,CAAC,CAAC;EAC7C,CAAC,EAAE,CAACD,IAAI,EAAEC,KAAK,CAAC,CAAC;EAEjB,oBACEnB,KAAA,CAAAyB,aAAA,CAAAzB,KAAA,CAAA0B,QAAA,qBACE1B,KAAA,CAAAyB,aAAA,CAACV,IAAI,EAAAY,QAAA;IAACxB,UAAU,EAAEqB;EAAgB,GAAKH,IAAI,EAAI,EAC9CD,IAAI,iBAAIpB,KAAA,CAAAyB,aAAA,CAACG,UAAU;IAACJ,eAAe,EAAEA;EAAgB,EAAG,CACxD;AAEP,CAAC;AAED,IAAMI,UAA4E,GAAG,SAA/EA,UAA4EA,CAAAC,KAAA,EAE5E;EAAA,IADJL,eAAe,GAAAK,KAAA,CAAfL,eAAe;EAEf,oBACExB,KAAA,CAAAyB,aAAA,CAACV;EACC;EAAA;IACAZ,UAAU,EAAE,CAAC,WAAW;IACxB;IACA;IAAA;IACA2B,OAAO,EAAEN,eAAe,CAACO,GAAG,CAAC,UAACC,KAAK,EAAK;MACtC,OAAOzB,uBAAuB,CAAC0B,QAAQ,CAACD,KAAK,CAAC,GAAG,MAAM,GAAG,OAAO;IACnE,CAAC;EAAE,EACH;AAEN,CAAC;AAdKJ,UAA4E,CAAAlB,WAAA"}
+{"version":3,"file":"GridColumns.js","names":["React","useMemo","styled","gridColumn","GridColumnProps","Box","BoxProps","CSSGrid","CSSGridProps","calculateGridColumn","ColumnCell","GRID_COLUMN_FULL_WIDTHS","GridColumns","withConfig","displayName","componentId","defaultProps","gridColumnGap","gridRowGap","Cell","Column","_ref","span","start","wrap","rest","_objectWithoutProperties","_excluded","gridColumnValue","createElement","Fragment","_extends","ColumnWrap","_ref2","display","map","value","includes"],"sources":["../../../../src/elements/GridColumns/GridColumns.tsx"],"sourcesContent":["import React, { useMemo } from \"react\"\nimport styled from \"styled-components\"\nimport { gridColumn, GridColumnProps } from \"styled-system\"\nimport { Box, BoxProps } from \"../Box\"\nimport { CSSGrid, CSSGridProps } from \"../CSSGrid\"\nimport {\n  calculateGridColumn,\n  ColumnCell,\n  GRID_COLUMN_FULL_WIDTHS,\n} from \"./calculateGridColumn\"\n\n/** GridColumns implements `Box` and the common grid properties */\nexport type GridColumnsProps = Omit<CSSGridProps, \"gridTemplateColumns\">\n\n/**\n * A 12-column fluid grid\n */\nexport const GridColumns = styled(CSSGrid)`\n  grid-template-columns: repeat(12, 1fr);\n`\n\nGridColumns.defaultProps = {\n  gridColumnGap: [1, 2],\n  gridRowGap: [1, 2],\n}\n\ntype CellProps = ColumnCell & GridColumnProps & BoxProps\n\nconst Cell = styled(Box)<CellProps>`\n  ${gridColumn}\n`\n\n/** Column implements `Box` and `gridColumn` */\nexport type ColumnProps = CellProps & {\n  /** denotes whether or not to break to a new row after column */\n  wrap?: boolean\n  children?: React.ReactNode\n}\n\n/**\n * A column sits within the GridColumns and spans the columns,\n * sitting between gutters.\n */\nexport const Column: React.FC<React.PropsWithChildren<ColumnProps>> = ({\n  span,\n  start,\n  wrap,\n  ...rest\n}) => {\n  const gridColumnValue = useMemo(() => {\n    return calculateGridColumn({ span, start })\n  }, [span, start])\n\n  return (\n    <>\n      <Cell gridColumn={gridColumnValue} {...rest} />\n      {wrap && <ColumnWrap gridColumnValue={gridColumnValue} />}\n    </>\n  )\n}\n\nconst ColumnWrap: React.FC<React.PropsWithChildren<{ gridColumnValue: string[] }>> = ({\n  gridColumnValue,\n}) => {\n  return (\n    <Cell\n      // Spans the remainder of the columns until the end\n      gridColumn={[\"auto / -1\"]}\n      // Hides the break if the value presented is going to span the full\n      // width of the column anyway. Prevents duplicated row gaps.\n      display={gridColumnValue.map((value) => {\n        return GRID_COLUMN_FULL_WIDTHS.includes(value) ? \"none\" : \"block\"\n      })}\n    />\n  )\n}\n"],"mappings":";;;;AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAASC,UAAU,EAAEC,eAAe,QAAQ,eAAe;AAC3D,SAASC,GAAG,EAAEC,QAAQ;AACtB,SAASC,OAAO,EAAEC,YAAY;AAC9B,SACEC,mBAAmB,EACnBC,UAAU,EACVC,uBAAuB;;AAGzB;;AAGA;AACA;AACA;AACA,OAAO,IAAMC,WAAW,GAAGV,MAAM,CAACK,OAAO,CAAC,CAAAM,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,6CAEzC;AAEDH,WAAW,CAACI,YAAY,GAAG;EACzBC,aAAa,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;EACrBC,UAAU,EAAE,CAAC,CAAC,EAAE,CAAC;AACnB,CAAC;AAID,IAAMC,IAAI,GAAGjB,MAAM,CAACG,GAAG,CAAC,CAAAQ,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,aACpBZ,UAAU,CACb;;AAED;;AAOA;AACA;AACA;AACA;AACA,OAAO,IAAMiB,MAAsD,GAAG,SAAzDA,MAAsDA,CAAAC,IAAA,EAK7D;EAAA,IAJJC,IAAI,GAAAD,IAAA,CAAJC,IAAI;IACJC,KAAK,GAAAF,IAAA,CAALE,KAAK;IACLC,IAAI,GAAAH,IAAA,CAAJG,IAAI;IACDC,IAAI,GAAAC,wBAAA,CAAAL,IAAA,EAAAM,SAAA;EAEP,IAAMC,eAAe,GAAG3B,OAAO,CAAC,YAAM;IACpC,OAAOQ,mBAAmB,CAAC;MAAEa,IAAI,EAAJA,IAAI;MAAEC,KAAK,EAALA;IAAM,CAAC,CAAC;EAC7C,CAAC,EAAE,CAACD,IAAI,EAAEC,KAAK,CAAC,CAAC;EAEjB,oBACEvB,KAAA,CAAA6B,aAAA,CAAA7B,KAAA,CAAA8B,QAAA,qBACE9B,KAAA,CAAA6B,aAAA,CAACV,IAAI,EAAAY,QAAA;IAAC5B,UAAU,EAAEyB;EAAgB,GAAKH,IAAI,EAAI,EAC9CD,IAAI,iBAAIxB,KAAA,CAAA6B,aAAA,CAACG,UAAU;IAACJ,eAAe,EAAEA;EAAgB,EAAG,CACxD;AAEP,CAAC;AAED,IAAMI,UAA4E,GAAG,SAA/EA,UAA4EA,CAAAC,KAAA,EAE5E;EAAA,IADJL,eAAe,GAAAK,KAAA,CAAfL,eAAe;EAEf,oBACE5B,KAAA,CAAA6B,aAAA,CAACV;EACC;EAAA;IACAhB,UAAU,EAAE,CAAC,WAAW;IACxB;IACA;IAAA;IACA+B,OAAO,EAAEN,eAAe,CAACO,GAAG,CAAC,UAACC,KAAK,EAAK;MACtC,OAAOzB,uBAAuB,CAAC0B,QAAQ,CAACD,KAAK,CAAC,GAAG,MAAM,GAAG,OAAO;IACnE,CAAC;EAAE,EACH;AAEN,CAAC;AAdKJ,UAA4E,CAAAlB,WAAA"}

package/dist/esm/elements/HTML/HTML.js

@@ -4,9 +4,9 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import { themeGet } from "@styled-system/theme-get";
-import React from "react";
+import React, { HTMLAttributes } from "react";
 import styled, { css } from "styled-components";
-import { Text } from "../Text";
+import { Text, TextProps } from "../Text";
 
 /**
  * HTML

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

@@ -1 +1 @@
-{"version":3,"file":"HTML.js","names":["themeGet","React","styled","css","Text","htmlMixin","Container","withConfig","displayName","componentId","defaultProps","variant","HTML","props","html","htmlRest","_objectWithoutProperties","_excluded","createElement","_extends","dangerouslySetInnerHTML","__html","children","childrenRest","_excluded2"],"sources":["../../../../src/elements/HTML/HTML.tsx"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport React, { HTMLAttributes } from \"react\"\nimport styled, { css } from \"styled-components\"\nimport { Text, TextProps } from \"../Text\"\n\n/**\n * HTML\n */\nexport type HTMLProps = TextProps &\n  HTMLAttributes<HTMLDivElement | HTMLHeadingElement | HTMLParagraphElement> &\n  ({ html: string } | { children: React.ReactNode })\n\n/**\n * Sets reasonable defaults for tags that we might encounter in Markdown output.\n */\nexport const htmlMixin = css`\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  ul,\n  ol,\n  p,\n  blockquote,\n  pre,\n  hr {\n    margin: ${themeGet(\"space.1\")} 0;\n\n    &:first-child {\n      margin-top: 0;\n    }\n\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n\n  hr {\n    height: 1px;\n    width: 100%;\n    border: 0;\n    background-color: ${themeGet(\"colors.mono10\")};\n  }\n`\n\nconst Container = styled(Text)`\n  ${htmlMixin}\n`\n\nContainer.defaultProps = {\n  variant: \"sm\",\n}\n\n/**\n * Sets reasonable defaults for tags that we might encounter in Markdown output.\n * If `html` prop is passed; it's set as innerHTML, otherwise contents are wrapped\n * with default HTML styling.\n */\nexport const HTML: React.FC<React.PropsWithChildren<HTMLProps>> = (props) => {\n  if (\"html\" in props) {\n    const { html, ...htmlRest } = props\n    return (\n      <Container dangerouslySetInnerHTML={{ __html: html }} {...htmlRest} />\n    )\n  }\n\n  const { children, ...childrenRest } = props\n  return <Container {...childrenRest}>{children}</Container>\n}\n\nHTML.displayName = \"HTML\"\n"],"mappings":";;;;;AAAA,SAASA,QAAQ,QAAQ,0BAA0B;AACnD,OAAOC,KAAK,MAA0B,OAAO;AAC7C,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,IAAI;;AAEb;AACA;AACA;;AAKA;AACA;AACA;AACA,OAAO,IAAMC,SAAS,GAAGF,GAAG,kLAYdH,QAAQ,CAAC,SAAS,CAAC,EAeTA,QAAQ,CAAC,eAAe,CAAC,CAEhD;AAED,IAAMM,SAAS,GAAGJ,MAAM,CAACE,IAAI,CAAC,CAAAG,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,aAC1BJ,SAAS,CACZ;AAEDC,SAAS,CAACI,YAAY,GAAG;EACvBC,OAAO,EAAE;AACX,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMC,IAAkD,GAAG,SAArDA,IAAkDA,CAAIC,KAAK,EAAK;EAC3E,IAAI,MAAM,IAAIA,KAAK,EAAE;IACnB,IAAQC,IAAI,GAAkBD,KAAK,CAA3BC,IAAI;MAAKC,QAAQ,GAAAC,wBAAA,CAAKH,KAAK,EAAAI,SAAA;IACnC,oBACEhB,KAAA,CAAAiB,aAAA,CAACZ,SAAS,EAAAa,QAAA;MAACC,uBAAuB,EAAE;QAAEC,MAAM,EAAEP;MAAK;IAAE,GAAKC,QAAQ,EAAI;EAE1E;EAEA,IAAQO,QAAQ,GAAsBT,KAAK,CAAnCS,QAAQ;IAAKC,YAAY,GAAAP,wBAAA,CAAKH,KAAK,EAAAW,UAAA;EAC3C,oBAAOvB,KAAA,CAAAiB,aAAA,CAACZ,SAAS,EAAKiB,YAAY,EAAGD,QAAQ,CAAa;AAC5D,CAAC;AAVYV,IAAkD,CAAAJ,WAAA;AAY/DI,IAAI,CAACJ,WAAW,GAAG,MAAM"}
+{"version":3,"file":"HTML.js","names":["themeGet","React","HTMLAttributes","styled","css","Text","TextProps","htmlMixin","Container","withConfig","displayName","componentId","defaultProps","variant","HTML","props","html","htmlRest","_objectWithoutProperties","_excluded","createElement","_extends","dangerouslySetInnerHTML","__html","children","childrenRest","_excluded2"],"sources":["../../../../src/elements/HTML/HTML.tsx"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport React, { HTMLAttributes } from \"react\"\nimport styled, { css } from \"styled-components\"\nimport { Text, TextProps } from \"../Text\"\n\n/**\n * HTML\n */\nexport type HTMLProps = TextProps &\n  HTMLAttributes<HTMLDivElement | HTMLHeadingElement | HTMLParagraphElement> &\n  ({ html: string } | { children: React.ReactNode })\n\n/**\n * Sets reasonable defaults for tags that we might encounter in Markdown output.\n */\nexport const htmlMixin = css`\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  ul,\n  ol,\n  p,\n  blockquote,\n  pre,\n  hr {\n    margin: ${themeGet(\"space.1\")} 0;\n\n    &:first-child {\n      margin-top: 0;\n    }\n\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n\n  hr {\n    height: 1px;\n    width: 100%;\n    border: 0;\n    background-color: ${themeGet(\"colors.mono10\")};\n  }\n`\n\nconst Container = styled(Text)`\n  ${htmlMixin}\n`\n\nContainer.defaultProps = {\n  variant: \"sm\",\n}\n\n/**\n * Sets reasonable defaults for tags that we might encounter in Markdown output.\n * If `html` prop is passed; it's set as innerHTML, otherwise contents are wrapped\n * with default HTML styling.\n */\nexport const HTML: React.FC<React.PropsWithChildren<HTMLProps>> = (props) => {\n  if (\"html\" in props) {\n    const { html, ...htmlRest } = props\n    return (\n      <Container dangerouslySetInnerHTML={{ __html: html }} {...htmlRest} />\n    )\n  }\n\n  const { children, ...childrenRest } = props\n  return <Container {...childrenRest}>{children}</Container>\n}\n\nHTML.displayName = \"HTML\"\n"],"mappings":";;;;;AAAA,SAASA,QAAQ,QAAQ,0BAA0B;AACnD,OAAOC,KAAK,IAAIC,cAAc,QAAQ,OAAO;AAC7C,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,IAAI,EAAEC,SAAS;;AAExB;AACA;AACA;;AAKA;AACA;AACA;AACA,OAAO,IAAMC,SAAS,GAAGH,GAAG,kLAYdJ,QAAQ,CAAC,SAAS,CAAC,EAeTA,QAAQ,CAAC,eAAe,CAAC,CAEhD;AAED,IAAMQ,SAAS,GAAGL,MAAM,CAACE,IAAI,CAAC,CAAAI,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,aAC1BJ,SAAS,CACZ;AAEDC,SAAS,CAACI,YAAY,GAAG;EACvBC,OAAO,EAAE;AACX,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMC,IAAkD,GAAG,SAArDA,IAAkDA,CAAIC,KAAK,EAAK;EAC3E,IAAI,MAAM,IAAIA,KAAK,EAAE;IACnB,IAAQC,IAAI,GAAkBD,KAAK,CAA3BC,IAAI;MAAKC,QAAQ,GAAAC,wBAAA,CAAKH,KAAK,EAAAI,SAAA;IACnC,oBACElB,KAAA,CAAAmB,aAAA,CAACZ,SAAS,EAAAa,QAAA;MAACC,uBAAuB,EAAE;QAAEC,MAAM,EAAEP;MAAK;IAAE,GAAKC,QAAQ,EAAI;EAE1E;EAEA,IAAQO,QAAQ,GAAsBT,KAAK,CAAnCS,QAAQ;IAAKC,YAAY,GAAAP,wBAAA,CAAKH,KAAK,EAAAW,UAAA;EAC3C,oBAAOzB,KAAA,CAAAmB,aAAA,CAACZ,SAAS,EAAKiB,YAAY,EAAGD,QAAQ,CAAa;AAC5D,CAAC;AAVYV,IAAkD,CAAAJ,WAAA;AAY/DI,IAAI,CAACJ,WAAW,GAAG,MAAM"}

package/dist/esm/elements/HorizontalOverflow/HorizontalOverflow.js

@@ -13,10 +13,10 @@ import composeRefs from "@seznam/compose-react-refs";
 import { themeGet } from "@styled-system/theme-get";
 import React, { forwardRef, useEffect, useRef, useState } from "react";
 import styled from "styled-components";
-import { border, compose, justifyContent, padding } from "styled-system";
+import { border, BorderProps, compose, justifyContent, JustifyContentProps, padding, PaddingProps } from "styled-system";
 import { visuallyDisableScrollbar } from "../../helpers/visuallyDisableScrollbar";
 import { splitProps } from "../../utils/splitProps";
-import { Box } from "../Box";
+import { Box, BoxProps } from "../Box";
 var splitRailProps = splitProps(compose(padding, justifyContent, border));
 var Overlay = styled(Box).withConfig({
   displayName: "HorizontalOverflow__Overlay",

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

@@ -1 +1 @@
-{"version":3,"file":"HorizontalOverflow.js","names":["composeRefs","themeGet","React","forwardRef","useEffect","useRef","useState","styled","border","compose","justifyContent","padding","visuallyDisableScrollbar","splitProps","Box","splitRailProps","Overlay","withConfig","displayName","componentId","_ref2","atEnd","Viewport","Rail","HorizontalOverflow","_ref3","forwardedRef","children","rest","_objectWithoutProperties","_excluded","ref","updateAtEnd","window","addEventListener","removeEventListener","_splitRailProps","_splitRailProps2","_slicedToArray","railProps","_splitRailProps2$","_ref","boxProps","_excluded2","_useState","_useState2","setAtEnd","current","_ref$current","scrollLeft","scrollWidth","clientWidth","Math","abs","createElement","_extends","onScroll","display","verticalAlign"],"sources":["../../../../src/elements/HorizontalOverflow/HorizontalOverflow.tsx"],"sourcesContent":["import composeRefs from \"@seznam/compose-react-refs\"\nimport { themeGet } from \"@styled-system/theme-get\"\nimport React, { forwardRef, useEffect, useRef, useState } from \"react\"\nimport styled from \"styled-components\"\nimport {\n  border,\n  BorderProps,\n  compose,\n  justifyContent,\n  JustifyContentProps,\n  padding,\n  PaddingProps,\n} from \"styled-system\"\nimport { visuallyDisableScrollbar } from \"../../helpers/visuallyDisableScrollbar\"\nimport { splitProps } from \"../../utils/splitProps\"\nimport { Box, BoxProps } from \"../Box\"\n\nconst splitRailProps = splitProps<\n  PaddingProps & JustifyContentProps & BorderProps\n>(compose(padding, justifyContent, border))\n\nconst Overlay = styled(Box)<{ atEnd: boolean }>`\n  position: relative;\n\n  /* Fade-out gradient */\n  &::after {\n    display: block;\n    content: \"\";\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    width: ${themeGet(\"space.6\")};\n    z-index: 1;\n    pointer-events: none;\n    background: ${themeGet(\"effects.fadeRight\")};\n    /* Hide when scrolled all the way over */\n    transition: opacity 250ms;\n    opacity: ${({ atEnd }) => (atEnd ? 0 : 1)};\n  }\n`\n\nconst Viewport = styled(Box)`\n  height: 100%;\n  overflow-x: auto;\n  -webkit-overflow-scrolling: touch;\n  ${visuallyDisableScrollbar}\n`\n\nconst Rail = styled(Box)`\n  white-space: nowrap;\n  min-width: 100%;\n  height: 100%;\n`\n\nexport type HorizontalOverflowProps = BoxProps & { children: React.ReactNode }\n\nexport const HorizontalOverflow = forwardRef<\n  HTMLDivElement,\n  HorizontalOverflowProps\n>(({ children, ...rest }, forwardedRef) => {\n  const ref = useRef<HTMLDivElement | null>()\n\n  useEffect(() => {\n    updateAtEnd()\n    window.addEventListener(\"resize\", updateAtEnd)\n    return () => {\n      window.removeEventListener(\"resize\", updateAtEnd)\n    }\n  }, [])\n\n  // FIXME: REACT_18_UPGRADE\n  // @ts-ignore\n  const [railProps, { ref: _ref, ...boxProps }] = splitRailProps(rest)\n\n  const [atEnd, setAtEnd] = useState(false)\n\n  const updateAtEnd = () => {\n    if (!ref.current) return\n\n    const {\n      current: { scrollLeft, scrollWidth, clientWidth },\n    } = ref\n\n    // Check if we're at the end of the scroll (within 1px)\n    if (Math.abs(scrollLeft + clientWidth - scrollWidth) <= 1) {\n      setAtEnd(true)\n      return\n    }\n\n    setAtEnd(false)\n  }\n\n  return (\n    <Overlay atEnd={atEnd} {...boxProps}>\n      <Viewport\n        ref={composeRefs(ref, forwardedRef) as any}\n        onScroll={updateAtEnd}\n      >\n        <Rail display=\"inline-flex\" verticalAlign=\"top\" {...railProps}>\n          {children}\n        </Rail>\n      </Viewport>\n    </Overlay>\n  )\n})\n\nHorizontalOverflow.displayName = \"HorizontalOverflow\"\n"],"mappings":"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"}
+{"version":3,"file":"HorizontalOverflow.js","names":["composeRefs","themeGet","React","forwardRef","useEffect","useRef","useState","styled","border","BorderProps","compose","justifyContent","JustifyContentProps","padding","PaddingProps","visuallyDisableScrollbar","splitProps","Box","BoxProps","splitRailProps","Overlay","withConfig","displayName","componentId","_ref2","atEnd","Viewport","Rail","HorizontalOverflow","_ref3","forwardedRef","children","rest","_objectWithoutProperties","_excluded","ref","updateAtEnd","window","addEventListener","removeEventListener","_splitRailProps","_splitRailProps2","_slicedToArray","railProps","_splitRailProps2$","_ref","boxProps","_excluded2","_useState","_useState2","setAtEnd","current","_ref$current","scrollLeft","scrollWidth","clientWidth","Math","abs","createElement","_extends","onScroll","display","verticalAlign"],"sources":["../../../../src/elements/HorizontalOverflow/HorizontalOverflow.tsx"],"sourcesContent":["import composeRefs from \"@seznam/compose-react-refs\"\nimport { themeGet } from \"@styled-system/theme-get\"\nimport React, { forwardRef, useEffect, useRef, useState } from \"react\"\nimport styled from \"styled-components\"\nimport {\n  border,\n  BorderProps,\n  compose,\n  justifyContent,\n  JustifyContentProps,\n  padding,\n  PaddingProps,\n} from \"styled-system\"\nimport { visuallyDisableScrollbar } from \"../../helpers/visuallyDisableScrollbar\"\nimport { splitProps } from \"../../utils/splitProps\"\nimport { Box, BoxProps } from \"../Box\"\n\nconst splitRailProps = splitProps<\n  PaddingProps & JustifyContentProps & BorderProps\n>(compose(padding, justifyContent, border))\n\nconst Overlay = styled(Box)<{ atEnd: boolean }>`\n  position: relative;\n\n  /* Fade-out gradient */\n  &::after {\n    display: block;\n    content: \"\";\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    width: ${themeGet(\"space.6\")};\n    z-index: 1;\n    pointer-events: none;\n    background: ${themeGet(\"effects.fadeRight\")};\n    /* Hide when scrolled all the way over */\n    transition: opacity 250ms;\n    opacity: ${({ atEnd }) => (atEnd ? 0 : 1)};\n  }\n`\n\nconst Viewport = styled(Box)`\n  height: 100%;\n  overflow-x: auto;\n  -webkit-overflow-scrolling: touch;\n  ${visuallyDisableScrollbar}\n`\n\nconst Rail = styled(Box)`\n  white-space: nowrap;\n  min-width: 100%;\n  height: 100%;\n`\n\nexport type HorizontalOverflowProps = BoxProps & { children: React.ReactNode }\n\nexport const HorizontalOverflow = forwardRef<\n  HTMLDivElement,\n  HorizontalOverflowProps\n>(({ children, ...rest }, forwardedRef) => {\n  const ref = useRef<HTMLDivElement | null>()\n\n  useEffect(() => {\n    updateAtEnd()\n    window.addEventListener(\"resize\", updateAtEnd)\n    return () => {\n      window.removeEventListener(\"resize\", updateAtEnd)\n    }\n  }, [])\n\n  // FIXME: REACT_18_UPGRADE\n  // @ts-ignore\n  const [railProps, { ref: _ref, ...boxProps }] = splitRailProps(rest)\n\n  const [atEnd, setAtEnd] = useState(false)\n\n  const updateAtEnd = () => {\n    if (!ref.current) return\n\n    const {\n      current: { scrollLeft, scrollWidth, clientWidth },\n    } = ref\n\n    // Check if we're at the end of the scroll (within 1px)\n    if (Math.abs(scrollLeft + clientWidth - scrollWidth) <= 1) {\n      setAtEnd(true)\n      return\n    }\n\n    setAtEnd(false)\n  }\n\n  return (\n    <Overlay atEnd={atEnd} {...boxProps}>\n      <Viewport\n        ref={composeRefs(ref, forwardedRef) as any}\n        onScroll={updateAtEnd}\n      >\n        <Rail display=\"inline-flex\" verticalAlign=\"top\" {...railProps}>\n          {children}\n        </Rail>\n      </Viewport>\n    </Overlay>\n  )\n})\n\nHorizontalOverflow.displayName = \"HorizontalOverflow\"\n"],"mappings":"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"}

package/dist/esm/elements/Image/Image.js

@@ -15,7 +15,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import React, { useState, useRef, useEffect } from "react";
-import { Box, splitBoxProps } from "../Box";
+import { Box, BoxProps, splitBoxProps } from "../Box";
 import styled from "styled-components";
 import isPropValid from "@emotion/is-prop-valid";
 export var Image = function Image(_ref) {

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

@@ -1 +1 @@
-{"version":3,"file":"Image.js","names":["React","useState","useRef","useEffect","Box","splitBoxProps","styled","isPropValid","Image","_ref","className","height","_ref$lazyLoad","lazyLoad","onLoad","placeHolderURL","_ref$preventRightClic","preventRightClick","style","width","rest","_objectWithoutProperties","_excluded","_useState","_useState2","_slicedToArray","mode","setMode","imageRef","_imageRef$current","current","complete","_splitBoxProps","_splitBoxProps2","boxProps","imageProps","commonImgProps","_objectSpread","ref","loading","undefined","event","onContextMenu","e","preventDefault","lazyLoadStyle","transition","opacity","createElement","_extends","position","bg","backgroundImage","concat","backgroundSize","backgroundPosition","Img","as","top","left","display","displayName","withConfig","shouldForwardProp","prop","componentId"],"sources":["../../../../src/elements/Image/Image.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect } from \"react\"\nimport { Box, BoxProps, splitBoxProps } from \"../Box\"\nimport styled from \"styled-components\"\nimport isPropValid from \"@emotion/is-prop-valid\"\n\nexport interface ImageProps\n  extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, \"width\" | \"height\">,\n    BoxProps {\n  /** Flag for if image should be lazy loaded */\n  lazyLoad?: boolean\n  /** Flag indicating that right clicks should be prevented */\n  preventRightClick?: boolean\n  /** Currently, this is used by clients for BlurHash data,\n      decoded and represented as a data URL */\n  placeHolderURL?: string\n}\n\nexport const Image: React.FC<ImageProps> = ({\n  className,\n  height,\n  lazyLoad = false,\n  onLoad,\n  placeHolderURL,\n  preventRightClick = false,\n  style,\n  width,\n  ...rest\n}) => {\n  const [mode, setMode] = useState<\"Pending\" | \"Ready\">(\"Pending\")\n  const imageRef = useRef<HTMLImageElement>(null)\n\n  useEffect(() => {\n    if (imageRef.current?.complete) {\n      setMode(\"Ready\")\n    }\n  }, [])\n\n  const [boxProps, imageProps] = splitBoxProps(rest)\n\n  // Common image props\n  const commonImgProps = {\n    ref: imageRef as any,\n    loading: lazyLoad ? (\"lazy\" as const) : undefined,\n    onLoad: (event: React.SyntheticEvent<HTMLImageElement, Event>) => {\n      setMode(\"Ready\")\n      onLoad?.(event)\n    },\n    onContextMenu: preventRightClick ? (e) => e.preventDefault() : undefined,\n    ...imageProps,\n  }\n\n  // Common lazy loading style\n  const lazyLoadStyle = lazyLoad\n    ? {\n        transition: \"opacity 0.2s ease-in-out\",\n        opacity: mode === \"Ready\" ? 1 : 0,\n      }\n    : {}\n\n  // If there's a placeholder URL or lazy loading is enabled, use a wrapper container\n  if (placeHolderURL || lazyLoad) {\n    return (\n      <Box\n        className={className}\n        position=\"relative\"\n        width={width || \"100%\"}\n        height={height || \"100%\"}\n        bg={lazyLoad && !placeHolderURL ? \"mono10\" : undefined}\n        {...boxProps}\n        style={{\n          ...(placeHolderURL && {\n            backgroundImage: `url(${placeHolderURL})`,\n            backgroundSize: \"cover\",\n            backgroundPosition: \"center\",\n          }),\n        }}\n      >\n        <Img\n          as=\"img\"\n          position=\"absolute\"\n          top={0}\n          left={0}\n          width=\"100%\"\n          height=\"100%\"\n          display=\"block\"\n          style={{ ...lazyLoadStyle, ...style }}\n          {...commonImgProps}\n        />\n      </Box>\n    )\n  }\n\n  // If no placeholder and no lazy loading, render a direct img element\n  return (\n    <Img\n      // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n      // @ts-ignore\n      as=\"img\"\n      className={className}\n      width={width}\n      height={height}\n      display=\"block\"\n      style={style}\n      {...boxProps}\n      {...commonImgProps}\n    />\n  )\n}\n\n// Can be removed when styled-components is updated in Force\n// https://github.com/emotion-js/emotion/blob/b882bcba85132554992e4bd49e94c95939bbf810/packages/is-prop-valid/CHANGELOG.md#patch-changes\nconst Img = styled(Box).withConfig({\n  shouldForwardProp: (prop) => isPropValid(prop) || prop === \"fetchPriority\",\n})``\n"],"mappings":"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"}
+{"version":3,"file":"Image.js","names":["React","useState","useRef","useEffect","Box","BoxProps","splitBoxProps","styled","isPropValid","Image","_ref","className","height","_ref$lazyLoad","lazyLoad","onLoad","placeHolderURL","_ref$preventRightClic","preventRightClick","style","width","rest","_objectWithoutProperties","_excluded","_useState","_useState2","_slicedToArray","mode","setMode","imageRef","_imageRef$current","current","complete","_splitBoxProps","_splitBoxProps2","boxProps","imageProps","commonImgProps","_objectSpread","ref","loading","undefined","event","onContextMenu","e","preventDefault","lazyLoadStyle","transition","opacity","createElement","_extends","position","bg","backgroundImage","concat","backgroundSize","backgroundPosition","Img","as","top","left","display","displayName","withConfig","shouldForwardProp","prop","componentId"],"sources":["../../../../src/elements/Image/Image.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect } from \"react\"\nimport { Box, BoxProps, splitBoxProps } from \"../Box\"\nimport styled from \"styled-components\"\nimport isPropValid from \"@emotion/is-prop-valid\"\n\nexport interface ImageProps\n  extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, \"width\" | \"height\">,\n    BoxProps {\n  /** Flag for if image should be lazy loaded */\n  lazyLoad?: boolean\n  /** Flag indicating that right clicks should be prevented */\n  preventRightClick?: boolean\n  /** Currently, this is used by clients for BlurHash data,\n      decoded and represented as a data URL */\n  placeHolderURL?: string\n}\n\nexport const Image: React.FC<ImageProps> = ({\n  className,\n  height,\n  lazyLoad = false,\n  onLoad,\n  placeHolderURL,\n  preventRightClick = false,\n  style,\n  width,\n  ...rest\n}) => {\n  const [mode, setMode] = useState<\"Pending\" | \"Ready\">(\"Pending\")\n  const imageRef = useRef<HTMLImageElement>(null)\n\n  useEffect(() => {\n    if (imageRef.current?.complete) {\n      setMode(\"Ready\")\n    }\n  }, [])\n\n  const [boxProps, imageProps] = splitBoxProps(rest)\n\n  // Common image props\n  const commonImgProps = {\n    ref: imageRef as any,\n    loading: lazyLoad ? (\"lazy\" as const) : undefined,\n    onLoad: (event: React.SyntheticEvent<HTMLImageElement, Event>) => {\n      setMode(\"Ready\")\n      onLoad?.(event)\n    },\n    onContextMenu: preventRightClick ? (e) => e.preventDefault() : undefined,\n    ...imageProps,\n  }\n\n  // Common lazy loading style\n  const lazyLoadStyle = lazyLoad\n    ? {\n        transition: \"opacity 0.2s ease-in-out\",\n        opacity: mode === \"Ready\" ? 1 : 0,\n      }\n    : {}\n\n  // If there's a placeholder URL or lazy loading is enabled, use a wrapper container\n  if (placeHolderURL || lazyLoad) {\n    return (\n      <Box\n        className={className}\n        position=\"relative\"\n        width={width || \"100%\"}\n        height={height || \"100%\"}\n        bg={lazyLoad && !placeHolderURL ? \"mono10\" : undefined}\n        {...boxProps}\n        style={{\n          ...(placeHolderURL && {\n            backgroundImage: `url(${placeHolderURL})`,\n            backgroundSize: \"cover\",\n            backgroundPosition: \"center\",\n          }),\n        }}\n      >\n        <Img\n          as=\"img\"\n          position=\"absolute\"\n          top={0}\n          left={0}\n          width=\"100%\"\n          height=\"100%\"\n          display=\"block\"\n          style={{ ...lazyLoadStyle, ...style }}\n          {...commonImgProps}\n        />\n      </Box>\n    )\n  }\n\n  // If no placeholder and no lazy loading, render a direct img element\n  return (\n    <Img\n      // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n      // @ts-ignore\n      as=\"img\"\n      className={className}\n      width={width}\n      height={height}\n      display=\"block\"\n      style={style}\n      {...boxProps}\n      {...commonImgProps}\n    />\n  )\n}\n\n// Can be removed when styled-components is updated in Force\n// https://github.com/emotion-js/emotion/blob/b882bcba85132554992e4bd49e94c95939bbf810/packages/is-prop-valid/CHANGELOG.md#patch-changes\nconst Img = styled(Box).withConfig({\n  shouldForwardProp: (prop) => isPropValid(prop) || prop === \"fetchPriority\",\n})``\n"],"mappings":"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"}

package/dist/esm/elements/Input/Input.js

@@ -13,7 +13,7 @@ import React, { useCallback } from "react";
 import styled, { css } from "styled-components";
 import { height as systemHeight } from "styled-system";
 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 { INPUT_STATES } from "./tokens";

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

@@ -1 +1 @@
-{"version":3,"file":"Input.js","names":["themeGet","React","useCallback","styled","css","height","systemHeight","RequiredField","Box","splitBoxProps","Text","Tooltip","INPUT_STATES","FORM_ELEMENT_TRANSITION","Input","forwardRef","_ref","ref","children","className","description","disabled","error","required","focus","hover","title","labelOffset","showCounter","_ref$defaultValue","defaultValue","onChange","rest","_objectWithoutProperties","_excluded","_splitBoxProps","_splitBoxProps2","_slicedToArray","boxProps","inputProps","_React$useState","useState","value","_React$useState2","setValue","handleChange","event","nextValue","currentTarget","createElement","_extends","width","pointer","content","placement","variant","color","textAlign","position","mt","StyledInput","name","undefined","placeholder","StyledLabel","htmlFor","maxLength","display","mx","flex","String","length","ml","displayName","input","withConfig","componentId","props","default","active","completed","label","_ref2"],"sources":["../../../../src/elements/Input/Input.tsx"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport React, { useCallback } from \"react\"\nimport styled, { css } from \"styled-components\"\nimport { height as systemHeight } from \"styled-system\"\nimport { RequiredField } from \"../../shared/RequiredField\"\nimport { Box, BoxProps, splitBoxProps } from \"../Box\"\nimport { Text } from \"../Text\"\nimport { Tooltip } from \"../Tooltip\"\nimport { INPUT_STATES } from \"./tokens\"\nimport { FORM_ELEMENT_TRANSITION } from \"../../helpers\"\n\nexport interface InputProps\n  extends BoxProps,\n    Omit<\n      React.InputHTMLAttributes<HTMLInputElement>,\n      \"size\" | \"width\" | \"height\" | \"capture\"\n    > {\n  active?: boolean\n  description?: string\n  disabled?: boolean\n  error?: string | boolean\n  focus?: boolean\n  hover?: boolean\n  required?: boolean\n  title?: string\n  labelOffset?: number\n  showCounter?: boolean\n}\n\n/** Input component */\nexport const Input = React.forwardRef<HTMLInputElement, InputProps>(\n  (\n    {\n      children,\n      className,\n      description,\n      disabled,\n      error,\n      required,\n      focus,\n      hover,\n      title,\n      height,\n      labelOffset,\n      showCounter,\n      defaultValue = \"\",\n      onChange,\n      ...rest\n    },\n    ref\n  ) => {\n    const [boxProps, inputProps] = splitBoxProps(rest)\n    const [value, setValue] = React.useState(inputProps.value || defaultValue)\n\n    const handleChange = useCallback(\n      (event: React.ChangeEvent<HTMLInputElement>) => {\n        const nextValue = event.currentTarget.value\n        setValue(nextValue)\n        onChange?.(event)\n      },\n      [onChange]\n    )\n\n    return (\n      <Box width=\"100%\" className={className} {...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          <StyledInput\n            ref={ref as any}\n            disabled={disabled}\n            focus={focus}\n            hover={hover}\n            error={!!error}\n            required={required}\n            height={(height ?? 50) as any}\n            name={inputProps.name}\n            title={title}\n            labelOffset={labelOffset}\n            defaultValue={defaultValue || undefined}\n            onChange={handleChange}\n            placeholder={inputProps.placeholder || \" \"}\n            {...inputProps}\n          />\n\n          {!!title && (\n            <StyledLabel labelOffset={labelOffset} htmlFor={inputProps.name}>\n              {title}\n              <span />\n            </StyledLabel>\n          )}\n\n          {children}\n        </Box>\n\n        {(required || (inputProps?.maxLength && showCounter)) &&\n          !(error && typeof error === \"string\") && (\n            <Box display=\"flex\" mt={0.5} mx={1}>\n              {required && <RequiredField disabled={disabled} flex={1} />}\n\n              {!!inputProps?.maxLength && showCounter && (\n                <Text flex={1} variant=\"xs\" color=\"mono60\" textAlign=\"right\">\n                  {String(value).length}/{inputProps.maxLength}\n                </Text>\n              )}\n            </Box>\n          )}\n\n        {error && typeof error === \"string\" && (\n          <Text variant=\"xs\" mt={0.5} ml={1} color=\"red100\">\n            {error}\n          </Text>\n        )}\n      </Box>\n    )\n  }\n)\n\nInput.displayName = \"Input\"\n\ntype StyledInputProps = Pick<\n  InputProps,\n  \"disabled\" | \"error\" | \"hover\" | \"focus\" | \"active\" | \"title\" | \"labelOffset\"\n>\n\nconst StyledInput = styled.input<StyledInputProps>`\n  width: 100%;\n  padding: 0 ${themeGet(\"space.1\")};\n  appearance: none;\n  line-height: 1;\n  border: 1px solid;\n  border-radius: 3px;\n  transition: border-color 0.25s, color 0.25s;\n  font-family: ${themeGet(\"fonts.sans\")};\n  ${systemHeight};\n\n  ::placeholder {\n    transition: color 0.25s, opacity 0.25s;\n  }\n\n  ${(props) => {\n    return css`\n      ${INPUT_STATES.default}\n      ${props.hover && INPUT_STATES.hover}\n      ${props.focus && INPUT_STATES.focus}\n      ${props.active && INPUT_STATES.active}\n      ${props.disabled && INPUT_STATES.disabled}\n      ${props.error && INPUT_STATES.error}\n\n      &:hover {\n        ${INPUT_STATES.hover}\n      }\n\n      &:not(:placeholder-shown) {\n        ${INPUT_STATES.completed}\n        ${props.error && INPUT_STATES.error}\n      }\n\n      &:focus {\n        outline: none;\n        ${INPUT_STATES.focus}\n\n        &::placeholder {\n          transition: ${FORM_ELEMENT_TRANSITION};\n          opacity: 1;\n        }\n\n        :not(:placeholder-shown) {\n          ${INPUT_STATES.active}\n          ${props.error && INPUT_STATES.error}\n        }\n      }\n\n      &:disabled {\n        cursor: default;\n        ${INPUT_STATES.disabled}\n      }\n\n      ${props.title &&\n      css`\n        &::placeholder {\n          transition: ${FORM_ELEMENT_TRANSITION};\n          opacity: 0;\n        }\n      `}\n    `\n  }};\n`\n\nconst StyledLabel = styled.label<StyledInputProps>`\n  position: absolute;\n  top: 50%;\n  left: 5px;\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  ${({ labelOffset }) =>\n    !!labelOffset &&\n    css`\n      padding-left: ${labelOffset - 5}px;\n    `}\n`\n"],"mappings":"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"}
+{"version":3,"file":"Input.js","names":["themeGet","React","useCallback","styled","css","height","systemHeight","RequiredField","Box","BoxProps","splitBoxProps","Text","Tooltip","INPUT_STATES","FORM_ELEMENT_TRANSITION","Input","forwardRef","_ref","ref","children","className","description","disabled","error","required","focus","hover","title","labelOffset","showCounter","_ref$defaultValue","defaultValue","onChange","rest","_objectWithoutProperties","_excluded","_splitBoxProps","_splitBoxProps2","_slicedToArray","boxProps","inputProps","_React$useState","useState","value","_React$useState2","setValue","handleChange","event","nextValue","currentTarget","createElement","_extends","width","pointer","content","placement","variant","color","textAlign","position","mt","StyledInput","name","undefined","placeholder","StyledLabel","htmlFor","maxLength","display","mx","flex","String","length","ml","displayName","input","withConfig","componentId","props","default","active","completed","label","_ref2"],"sources":["../../../../src/elements/Input/Input.tsx"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport React, { useCallback } from \"react\"\nimport styled, { css } from \"styled-components\"\nimport { height as systemHeight } from \"styled-system\"\nimport { RequiredField } from \"../../shared/RequiredField\"\nimport { Box, BoxProps, splitBoxProps } from \"../Box\"\nimport { Text } from \"../Text\"\nimport { Tooltip } from \"../Tooltip\"\nimport { INPUT_STATES } from \"./tokens\"\nimport { FORM_ELEMENT_TRANSITION } from \"../../helpers\"\n\nexport interface InputProps\n  extends BoxProps,\n    Omit<\n      React.InputHTMLAttributes<HTMLInputElement>,\n      \"size\" | \"width\" | \"height\" | \"capture\"\n    > {\n  active?: boolean\n  description?: string\n  disabled?: boolean\n  error?: string | boolean\n  focus?: boolean\n  hover?: boolean\n  required?: boolean\n  title?: string\n  labelOffset?: number\n  showCounter?: boolean\n}\n\n/** Input component */\nexport const Input = React.forwardRef<HTMLInputElement, InputProps>(\n  (\n    {\n      children,\n      className,\n      description,\n      disabled,\n      error,\n      required,\n      focus,\n      hover,\n      title,\n      height,\n      labelOffset,\n      showCounter,\n      defaultValue = \"\",\n      onChange,\n      ...rest\n    },\n    ref\n  ) => {\n    const [boxProps, inputProps] = splitBoxProps(rest)\n    const [value, setValue] = React.useState(inputProps.value || defaultValue)\n\n    const handleChange = useCallback(\n      (event: React.ChangeEvent<HTMLInputElement>) => {\n        const nextValue = event.currentTarget.value\n        setValue(nextValue)\n        onChange?.(event)\n      },\n      [onChange]\n    )\n\n    return (\n      <Box width=\"100%\" className={className} {...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          <StyledInput\n            ref={ref as any}\n            disabled={disabled}\n            focus={focus}\n            hover={hover}\n            error={!!error}\n            required={required}\n            height={(height ?? 50) as any}\n            name={inputProps.name}\n            title={title}\n            labelOffset={labelOffset}\n            defaultValue={defaultValue || undefined}\n            onChange={handleChange}\n            placeholder={inputProps.placeholder || \" \"}\n            {...inputProps}\n          />\n\n          {!!title && (\n            <StyledLabel labelOffset={labelOffset} htmlFor={inputProps.name}>\n              {title}\n              <span />\n            </StyledLabel>\n          )}\n\n          {children}\n        </Box>\n\n        {(required || (inputProps?.maxLength && showCounter)) &&\n          !(error && typeof error === \"string\") && (\n            <Box display=\"flex\" mt={0.5} mx={1}>\n              {required && <RequiredField disabled={disabled} flex={1} />}\n\n              {!!inputProps?.maxLength && showCounter && (\n                <Text flex={1} variant=\"xs\" color=\"mono60\" textAlign=\"right\">\n                  {String(value).length}/{inputProps.maxLength}\n                </Text>\n              )}\n            </Box>\n          )}\n\n        {error && typeof error === \"string\" && (\n          <Text variant=\"xs\" mt={0.5} ml={1} color=\"red100\">\n            {error}\n          </Text>\n        )}\n      </Box>\n    )\n  }\n)\n\nInput.displayName = \"Input\"\n\ntype StyledInputProps = Pick<\n  InputProps,\n  \"disabled\" | \"error\" | \"hover\" | \"focus\" | \"active\" | \"title\" | \"labelOffset\"\n>\n\nconst StyledInput = styled.input<StyledInputProps>`\n  width: 100%;\n  padding: 0 ${themeGet(\"space.1\")};\n  appearance: none;\n  line-height: 1;\n  border: 1px solid;\n  border-radius: 3px;\n  transition: border-color 0.25s, color 0.25s;\n  font-family: ${themeGet(\"fonts.sans\")};\n  ${systemHeight};\n\n  ::placeholder {\n    transition: color 0.25s, opacity 0.25s;\n  }\n\n  ${(props) => {\n    return css`\n      ${INPUT_STATES.default}\n      ${props.hover && INPUT_STATES.hover}\n      ${props.focus && INPUT_STATES.focus}\n      ${props.active && INPUT_STATES.active}\n      ${props.disabled && INPUT_STATES.disabled}\n      ${props.error && INPUT_STATES.error}\n\n      &:hover {\n        ${INPUT_STATES.hover}\n      }\n\n      &:not(:placeholder-shown) {\n        ${INPUT_STATES.completed}\n        ${props.error && INPUT_STATES.error}\n      }\n\n      &:focus {\n        outline: none;\n        ${INPUT_STATES.focus}\n\n        &::placeholder {\n          transition: ${FORM_ELEMENT_TRANSITION};\n          opacity: 1;\n        }\n\n        :not(:placeholder-shown) {\n          ${INPUT_STATES.active}\n          ${props.error && INPUT_STATES.error}\n        }\n      }\n\n      &:disabled {\n        cursor: default;\n        ${INPUT_STATES.disabled}\n      }\n\n      ${props.title &&\n      css`\n        &::placeholder {\n          transition: ${FORM_ELEMENT_TRANSITION};\n          opacity: 0;\n        }\n      `}\n    `\n  }};\n`\n\nconst StyledLabel = styled.label<StyledInputProps>`\n  position: absolute;\n  top: 50%;\n  left: 5px;\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  ${({ labelOffset }) =>\n    !!labelOffset &&\n    css`\n      padding-left: ${labelOffset - 5}px;\n    `}\n`\n"],"mappings":"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"}

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

@@ -1,5 +1,6 @@
 import { themeGet } from "@styled-system/theme-get";
 import { css } from "styled-components";
+import { State } from "./types";
 export var INPUT_STATES = {
   default: css(["background-color:", ";font-size:", ";color:", ";border-color:", ";::placeholder{color:", ";}& + label{color:", ";font-size:", ";}"], themeGet("colors.mono0"), themeGet("textVariants.sm-display.fontSize"), 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:", ";padding:0 5px;& > 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/Input/tokens.js.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.js","names":["themeGet","css","INPUT_STATES","default","focus","hover","active","completed","disabled","error"],"sources":["../../../../src/elements/Input/tokens.ts"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport { css } from \"styled-components\"\nimport { State } from \"./types\"\n\nexport const INPUT_STATES: Record<State, any> = {\n  default: css`\n    background-color: ${themeGet(\"colors.mono0\")};\n    font-size: ${themeGet(\"textVariants.sm-display.fontSize\")};\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      padding: 0 5px;\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      padding: 0 5px;\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.blue60\")};\n      transform: translateY(-150%);\n      font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n      padding: 0 5px;\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    /* For Safari: */\n    -webkit-text-fill-color: ${themeGet(\"colors.mono30\")};\n    /* For iOS */\n    opacity: 1;\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      padding: 0 5px;\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,YAAgC,GAAG;EAC9CC,OAAO,EAAEF,GAAG,wIACUD,QAAQ,CAAC,cAAc,CAAC,EAC/BA,QAAQ,CAAC,kCAAkC,CAAC,EAChDA,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,oLACCD,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,CAQpD;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,0KACAD,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,CAQpD;EACDO,SAAS,EAAEN,GAAG,gJACHD,QAAQ,CAAC,gBAAgB,CAAC,EACnBA,QAAQ,CAAC,eAAe,CAAC,EAG9BA,QAAQ,CAAC,eAAe,CAAC,EAErBA,QAAQ,CAAC,0BAA0B,CAAC,CAQpD;EACDQ,QAAQ,EAAEP,GAAG,gSACFD,QAAQ,CAAC,eAAe,CAAC,EAClBA,QAAQ,CAAC,eAAe,CAAC,EAGdA,QAAQ,CAAC,eAAe,CAAC,EAKzCA,QAAQ,CAAC,eAAe,CAAC,EAIzBA,QAAQ,CAAC,eAAe,CAAC,EAErBA,QAAQ,CAAC,0BAA0B,CAAC,EASxCA,QAAQ,CAAC,eAAe,CAAC,CAErC;EACDS,KAAK,EAAER,GAAG,qIACQD,QAAQ,CAAC,eAAe,CAAC,EAG9BA,QAAQ,CAAC,eAAe,CAAC,EAErBA,QAAQ,CAAC,0BAA0B,CAAC;AASvD,CAAC"}
+{"version":3,"file":"tokens.js","names":["themeGet","css","State","INPUT_STATES","default","focus","hover","active","completed","disabled","error"],"sources":["../../../../src/elements/Input/tokens.ts"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport { css } from \"styled-components\"\nimport { State } from \"./types\"\n\nexport const INPUT_STATES: Record<State, any> = {\n  default: css`\n    background-color: ${themeGet(\"colors.mono0\")};\n    font-size: ${themeGet(\"textVariants.sm-display.fontSize\")};\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      padding: 0 5px;\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      padding: 0 5px;\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.blue60\")};\n      transform: translateY(-150%);\n      font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n      padding: 0 5px;\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    /* For Safari: */\n    -webkit-text-fill-color: ${themeGet(\"colors.mono30\")};\n    /* For iOS */\n    opacity: 1;\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      padding: 0 5px;\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,YAAgC,GAAG;EAC9CC,OAAO,EAAEH,GAAG,wIACUD,QAAQ,CAAC,cAAc,CAAC,EAC/BA,QAAQ,CAAC,kCAAkC,CAAC,EAChDA,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,oLACCD,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,CAQpD;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,0KACAD,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,CAQpD;EACDQ,SAAS,EAAEP,GAAG,gJACHD,QAAQ,CAAC,gBAAgB,CAAC,EACnBA,QAAQ,CAAC,eAAe,CAAC,EAG9BA,QAAQ,CAAC,eAAe,CAAC,EAErBA,QAAQ,CAAC,0BAA0B,CAAC,CAQpD;EACDS,QAAQ,EAAER,GAAG,gSACFD,QAAQ,CAAC,eAAe,CAAC,EAClBA,QAAQ,CAAC,eAAe,CAAC,EAGdA,QAAQ,CAAC,eAAe,CAAC,EAKzCA,QAAQ,CAAC,eAAe,CAAC,EAIzBA,QAAQ,CAAC,eAAe,CAAC,EAErBA,QAAQ,CAAC,0BAA0B,CAAC,EASxCA,QAAQ,CAAC,eAAe,CAAC,CAErC;EACDU,KAAK,EAAET,GAAG,qIACQD,QAAQ,CAAC,eAAe,CAAC,EAG9BA,QAAQ,CAAC,eAAe,CAAC,EAErBA,QAAQ,CAAC,0BAA0B,CAAC;AASvD,CAAC"}

package/dist/esm/elements/Label/Label.js

@@ -6,7 +6,7 @@ import { Text } from "../Text";
 import * as React from "react";
 import styled from "styled-components";
 import { variant } from "styled-system";
-import { Box } from "../Box";
+import { Box, BoxProps } from "../Box";
 export var LABEL_VARIANTS = {
   light: {
     backgroundColor: "mono10",

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

@@ -1 +1 @@
-{"version":3,"file":"Label.js","names":["Text","React","styled","variant","Box","LABEL_VARIANTS","light","backgroundColor","color","dark","brand","Label","_ref","children","_ref$variant","rest","_objectWithoutProperties","_excluded","createElement","Container","_extends","display","maxWidth","px","overflowEllipsis","displayName","withConfig","componentId","variants"],"sources":["../../../../src/elements/Label/Label.tsx"],"sourcesContent":["import { Text } from \"../Text\"\nimport * as React from \"react\"\nimport styled from \"styled-components\"\nimport { variant } from \"styled-system\"\nimport { Box, BoxProps } from \"../Box\"\n\nexport const LABEL_VARIANTS = {\n  light: {\n    backgroundColor: \"mono10\",\n    color: \"mono100\",\n  },\n  dark: {\n    backgroundColor: \"mono100\",\n    color: \"mono0\",\n  },\n  brand: {\n    backgroundColor: \"blue100\",\n    color: \"mono0\",\n  },\n}\n\nexport type LabelVariant = keyof typeof LABEL_VARIANTS\n\nexport interface LabelProps extends BoxProps {\n  variant?: LabelVariant\n  children: React.ReactNode\n}\n\nexport const Label: React.FC<React.PropsWithChildren<LabelProps>> = ({\n  children,\n  variant = \"light\",\n  ...rest\n}) => {\n  return (\n    <Container\n      display=\"inline-flex\"\n      maxWidth=\"100%\"\n      variant={variant}\n      {...rest}\n    >\n      <Text variant=\"xs\" px={0.5} overflowEllipsis>\n        {children}\n      </Text>\n    </Container>\n  )\n}\n\nconst Container = styled(Box)<{ variant: LabelVariant }>`\n  ${variant({ variants: LABEL_VARIANTS })}\n`\n"],"mappings":";;;;AAAA,SAASA,IAAI;AACb,OAAO,KAAKC,KAAK,MAAM,OAAO;AAC9B,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAASC,OAAO,QAAQ,eAAe;AACvC,SAASC,GAAG;AAEZ,OAAO,IAAMC,cAAc,GAAG;EAC5BC,KAAK,EAAE;IACLC,eAAe,EAAE,QAAQ;IACzBC,KAAK,EAAE;EACT,CAAC;EACDC,IAAI,EAAE;IACJF,eAAe,EAAE,SAAS;IAC1BC,KAAK,EAAE;EACT,CAAC;EACDE,KAAK,EAAE;IACLH,eAAe,EAAE,SAAS;IAC1BC,KAAK,EAAE;EACT;AACF,CAAC;AASD,OAAO,IAAMG,KAAoD,GAAG,SAAvDA,KAAoDA,CAAAC,IAAA,EAI3D;EAAA,IAHJC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IAAAC,YAAA,GAAAF,IAAA,CACRT,OAAO;IAAPA,OAAO,GAAAW,YAAA,cAAG,OAAO,GAAAA,YAAA;IACdC,IAAI,GAAAC,wBAAA,CAAAJ,IAAA,EAAAK,SAAA;EAEP,oBACEhB,KAAA,CAAAiB,aAAA,CAACC,SAAS,EAAAC,QAAA;IACRC,OAAO,EAAC,aAAa;IACrBC,QAAQ,EAAC,MAAM;IACfnB,OAAO,EAAEA;EAAQ,GACbY,IAAI,gBAERd,KAAA,CAAAiB,aAAA,CAAClB,IAAI;IAACG,OAAO,EAAC,IAAI;IAACoB,EAAE,EAAE,GAAI;IAACC,gBAAgB;EAAA,GACzCX,QAAQ,CACJ,CACG;AAEhB,CAAC;AAjBYF,KAAoD,CAAAc,WAAA;AAmBjE,IAAMN,SAAS,GAAGjB,MAAM,CAACE,GAAG,CAAC,CAAAsB,UAAA;EAAAD,WAAA;EAAAE,WAAA;AAAA,aACzBxB,OAAO,CAAC;EAAEyB,QAAQ,EAAEvB;AAAe,CAAC,CAAC,CACxC"}
+{"version":3,"file":"Label.js","names":["Text","React","styled","variant","Box","BoxProps","LABEL_VARIANTS","light","backgroundColor","color","dark","brand","Label","_ref","children","_ref$variant","rest","_objectWithoutProperties","_excluded","createElement","Container","_extends","display","maxWidth","px","overflowEllipsis","displayName","withConfig","componentId","variants"],"sources":["../../../../src/elements/Label/Label.tsx"],"sourcesContent":["import { Text } from \"../Text\"\nimport * as React from \"react\"\nimport styled from \"styled-components\"\nimport { variant } from \"styled-system\"\nimport { Box, BoxProps } from \"../Box\"\n\nexport const LABEL_VARIANTS = {\n  light: {\n    backgroundColor: \"mono10\",\n    color: \"mono100\",\n  },\n  dark: {\n    backgroundColor: \"mono100\",\n    color: \"mono0\",\n  },\n  brand: {\n    backgroundColor: \"blue100\",\n    color: \"mono0\",\n  },\n}\n\nexport type LabelVariant = keyof typeof LABEL_VARIANTS\n\nexport interface LabelProps extends BoxProps {\n  variant?: LabelVariant\n  children: React.ReactNode\n}\n\nexport const Label: React.FC<React.PropsWithChildren<LabelProps>> = ({\n  children,\n  variant = \"light\",\n  ...rest\n}) => {\n  return (\n    <Container\n      display=\"inline-flex\"\n      maxWidth=\"100%\"\n      variant={variant}\n      {...rest}\n    >\n      <Text variant=\"xs\" px={0.5} overflowEllipsis>\n        {children}\n      </Text>\n    </Container>\n  )\n}\n\nconst Container = styled(Box)<{ variant: LabelVariant }>`\n  ${variant({ variants: LABEL_VARIANTS })}\n`\n"],"mappings":";;;;AAAA,SAASA,IAAI;AACb,OAAO,KAAKC,KAAK,MAAM,OAAO;AAC9B,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAASC,OAAO,QAAQ,eAAe;AACvC,SAASC,GAAG,EAAEC,QAAQ;AAEtB,OAAO,IAAMC,cAAc,GAAG;EAC5BC,KAAK,EAAE;IACLC,eAAe,EAAE,QAAQ;IACzBC,KAAK,EAAE;EACT,CAAC;EACDC,IAAI,EAAE;IACJF,eAAe,EAAE,SAAS;IAC1BC,KAAK,EAAE;EACT,CAAC;EACDE,KAAK,EAAE;IACLH,eAAe,EAAE,SAAS;IAC1BC,KAAK,EAAE;EACT;AACF,CAAC;AASD,OAAO,IAAMG,KAAoD,GAAG,SAAvDA,KAAoDA,CAAAC,IAAA,EAI3D;EAAA,IAHJC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IAAAC,YAAA,GAAAF,IAAA,CACRV,OAAO;IAAPA,OAAO,GAAAY,YAAA,cAAG,OAAO,GAAAA,YAAA;IACdC,IAAI,GAAAC,wBAAA,CAAAJ,IAAA,EAAAK,SAAA;EAEP,oBACEjB,KAAA,CAAAkB,aAAA,CAACC,SAAS,EAAAC,QAAA;IACRC,OAAO,EAAC,aAAa;IACrBC,QAAQ,EAAC,MAAM;IACfpB,OAAO,EAAEA;EAAQ,GACba,IAAI,gBAERf,KAAA,CAAAkB,aAAA,CAACnB,IAAI;IAACG,OAAO,EAAC,IAAI;IAACqB,EAAE,EAAE,GAAI;IAACC,gBAAgB;EAAA,GACzCX,QAAQ,CACJ,CACG;AAEhB,CAAC;AAjBYF,KAAoD,CAAAc,WAAA;AAmBjE,IAAMN,SAAS,GAAGlB,MAAM,CAACE,GAAG,CAAC,CAAAuB,UAAA;EAAAD,WAAA;EAAAE,WAAA;AAAA,aACzBzB,OAAO,CAAC;EAAE0B,QAAQ,EAAEvB;AAAe,CAAC,CAAC,CACxC"}

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { Label, LABEL_VARIANTS } from "./Label";
+import { Label, LabelVariant, LABEL_VARIANTS } from "./Label";
 import { Box } from "../Box";
 import { STORYBOOK_PROPS_BLOCKLIST } from "../../utils/storybookBlocklist";
 export default {

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

@@ -1 +1 @@
-{"version":3,"file":"Label.story.js","names":["React","Label","LABEL_VARIANTS","Box","STORYBOOK_PROPS_BLOCKLIST","component","title","tags","parameters","docs","description","controls","exclude","Default","args","children","story","AllVariants","render","createElement","display","flexDirection","gap","Object","keys","map","variant","key","OverflowEllipsis","width","overflow"],"sources":["../../../../src/elements/Label/Label.story.tsx"],"sourcesContent":["import React from \"react\"\nimport { Label, LabelVariant, LABEL_VARIANTS } from \"./Label\"\nimport { Box } from \"../Box\"\nimport { STORYBOOK_PROPS_BLOCKLIST } from \"../../utils/storybookBlocklist\"\n\nexport default {\n  component: Label,\n  title: \"Components/Label\",\n  tags: [\"autodocs\"],\n  parameters: {\n    docs: {\n      description: {\n        component:\n          \"A label component with different visual variants for various use cases.\",\n      },\n    },\n    controls: {\n        exclude: STORYBOOK_PROPS_BLOCKLIST,\n      },\n  },\n}\n\nexport const Default = {\n  args: {\n    children: \"Example\",\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Basic label component with default styling.\",\n      },\n    },\n  },\n}\n\nexport const AllVariants = {\n  render: () => (\n    <Box display=\"flex\" flexDirection=\"column\" gap={1}>\n      {Object.keys(LABEL_VARIANTS).map((variant) => (\n        <Label key={variant} variant={variant as LabelVariant}>\n          {variant} Label\n        </Label>\n      ))}\n    </Box>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"All available label variants.\",\n      },\n    },\n  },\n}\n\nexport const OverflowEllipsis = {\n  render: () => (\n    <Box display=\"flex\" flexDirection=\"column\" gap={1}>\n      {Object.keys(LABEL_VARIANTS).map((variant) => (\n        <Box key={variant} width={75} overflow=\"hidden\">\n          <Label variant={variant as LabelVariant}>Longer Example</Label>\n        </Box>\n      ))}\n    </Box>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"Labels with text overflow demonstrating ellipsis behavior.\",\n      },\n    },\n  },\n}\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,KAAK,EAAgBC,cAAc;AAC5C,SAASC,GAAG;AACZ,SAASC,yBAAyB;AAElC,eAAe;EACbC,SAAS,EAAEJ,KAAK;EAChBK,KAAK,EAAE,kBAAkB;EACzBC,IAAI,EAAE,CAAC,UAAU,CAAC;EAClBC,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXL,SAAS,EACP;MACJ;IACF,CAAC;IACDM,QAAQ,EAAE;MACNC,OAAO,EAAER;IACX;EACJ;AACF,CAAC;AAED,OAAO,IAAMS,OAAO,GAAG;EACrBC,IAAI,EAAE;IACJC,QAAQ,EAAE;EACZ,CAAC;EACDP,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXM,KAAK,EAAE;MACT;IACF;EACF;AACF,CAAC;AAED,OAAO,IAAMC,WAAW,GAAG;EACzBC,MAAM,EAAE,SAARA,MAAMA,CAAA;IAAA,oBACJlB,KAAA,CAAAmB,aAAA,CAAChB,GAAG;MAACiB,OAAO,EAAC,MAAM;MAACC,aAAa,EAAC,QAAQ;MAACC,GAAG,EAAE;IAAE,GAC/CC,MAAM,CAACC,IAAI,CAACtB,cAAc,CAAC,CAACuB,GAAG,CAAC,UAACC,OAAO;MAAA,oBACvC1B,KAAA,CAAAmB,aAAA,CAAClB,KAAK;QAAC0B,GAAG,EAAED,OAAQ;QAACA,OAAO,EAAEA;MAAwB,GACnDA,OAAO,EAAC,QACX,CAAQ;IAAA,CACT,CAAC,CACE;EAAA,CACP;EACDlB,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXM,KAAK,EAAE;MACT;IACF;EACF;AACF,CAAC;AAED,OAAO,IAAMY,gBAAgB,GAAG;EAC9BV,MAAM,EAAE,SAARA,MAAMA,CAAA;IAAA,oBACJlB,KAAA,CAAAmB,aAAA,CAAChB,GAAG;MAACiB,OAAO,EAAC,MAAM;MAACC,aAAa,EAAC,QAAQ;MAACC,GAAG,EAAE;IAAE,GAC/CC,MAAM,CAACC,IAAI,CAACtB,cAAc,CAAC,CAACuB,GAAG,CAAC,UAACC,OAAO;MAAA,oBACvC1B,KAAA,CAAAmB,aAAA,CAAChB,GAAG;QAACwB,GAAG,EAAED,OAAQ;QAACG,KAAK,EAAE,EAAG;QAACC,QAAQ,EAAC;MAAQ,gBAC7C9B,KAAA,CAAAmB,aAAA,CAAClB,KAAK;QAACyB,OAAO,EAAEA;MAAwB,GAAC,gBAAc,CAAQ,CAC3D;IAAA,CACP,CAAC,CACE;EAAA,CACP;EACDlB,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXM,KAAK,EAAE;MACT;IACF;EACF;AACF,CAAC"}
+{"version":3,"file":"Label.story.js","names":["React","Label","LabelVariant","LABEL_VARIANTS","Box","STORYBOOK_PROPS_BLOCKLIST","component","title","tags","parameters","docs","description","controls","exclude","Default","args","children","story","AllVariants","render","createElement","display","flexDirection","gap","Object","keys","map","variant","key","OverflowEllipsis","width","overflow"],"sources":["../../../../src/elements/Label/Label.story.tsx"],"sourcesContent":["import React from \"react\"\nimport { Label, LabelVariant, LABEL_VARIANTS } from \"./Label\"\nimport { Box } from \"../Box\"\nimport { STORYBOOK_PROPS_BLOCKLIST } from \"../../utils/storybookBlocklist\"\n\nexport default {\n  component: Label,\n  title: \"Components/Label\",\n  tags: [\"autodocs\"],\n  parameters: {\n    docs: {\n      description: {\n        component:\n          \"A label component with different visual variants for various use cases.\",\n      },\n    },\n    controls: {\n        exclude: STORYBOOK_PROPS_BLOCKLIST,\n      },\n  },\n}\n\nexport const Default = {\n  args: {\n    children: \"Example\",\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Basic label component with default styling.\",\n      },\n    },\n  },\n}\n\nexport const AllVariants = {\n  render: () => (\n    <Box display=\"flex\" flexDirection=\"column\" gap={1}>\n      {Object.keys(LABEL_VARIANTS).map((variant) => (\n        <Label key={variant} variant={variant as LabelVariant}>\n          {variant} Label\n        </Label>\n      ))}\n    </Box>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"All available label variants.\",\n      },\n    },\n  },\n}\n\nexport const OverflowEllipsis = {\n  render: () => (\n    <Box display=\"flex\" flexDirection=\"column\" gap={1}>\n      {Object.keys(LABEL_VARIANTS).map((variant) => (\n        <Box key={variant} width={75} overflow=\"hidden\">\n          <Label variant={variant as LabelVariant}>Longer Example</Label>\n        </Box>\n      ))}\n    </Box>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"Labels with text overflow demonstrating ellipsis behavior.\",\n      },\n    },\n  },\n}\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,KAAK,EAAEC,YAAY,EAAEC,cAAc;AAC5C,SAASC,GAAG;AACZ,SAASC,yBAAyB;AAElC,eAAe;EACbC,SAAS,EAAEL,KAAK;EAChBM,KAAK,EAAE,kBAAkB;EACzBC,IAAI,EAAE,CAAC,UAAU,CAAC;EAClBC,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXL,SAAS,EACP;MACJ;IACF,CAAC;IACDM,QAAQ,EAAE;MACNC,OAAO,EAAER;IACX;EACJ;AACF,CAAC;AAED,OAAO,IAAMS,OAAO,GAAG;EACrBC,IAAI,EAAE;IACJC,QAAQ,EAAE;EACZ,CAAC;EACDP,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXM,KAAK,EAAE;MACT;IACF;EACF;AACF,CAAC;AAED,OAAO,IAAMC,WAAW,GAAG;EACzBC,MAAM,EAAE,SAARA,MAAMA,CAAA;IAAA,oBACJnB,KAAA,CAAAoB,aAAA,CAAChB,GAAG;MAACiB,OAAO,EAAC,MAAM;MAACC,aAAa,EAAC,QAAQ;MAACC,GAAG,EAAE;IAAE,GAC/CC,MAAM,CAACC,IAAI,CAACtB,cAAc,CAAC,CAACuB,GAAG,CAAC,UAACC,OAAO;MAAA,oBACvC3B,KAAA,CAAAoB,aAAA,CAACnB,KAAK;QAAC2B,GAAG,EAAED,OAAQ;QAACA,OAAO,EAAEA;MAAwB,GACnDA,OAAO,EAAC,QACX,CAAQ;IAAA,CACT,CAAC,CACE;EAAA,CACP;EACDlB,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXM,KAAK,EAAE;MACT;IACF;EACF;AACF,CAAC;AAED,OAAO,IAAMY,gBAAgB,GAAG;EAC9BV,MAAM,EAAE,SAARA,MAAMA,CAAA;IAAA,oBACJnB,KAAA,CAAAoB,aAAA,CAAChB,GAAG;MAACiB,OAAO,EAAC,MAAM;MAACC,aAAa,EAAC,QAAQ;MAACC,GAAG,EAAE;IAAE,GAC/CC,MAAM,CAACC,IAAI,CAACtB,cAAc,CAAC,CAACuB,GAAG,CAAC,UAACC,OAAO;MAAA,oBACvC3B,KAAA,CAAAoB,aAAA,CAAChB,GAAG;QAACwB,GAAG,EAAED,OAAQ;QAACG,KAAK,EAAE,EAAG;QAACC,QAAQ,EAAC;MAAQ,gBAC7C/B,KAAA,CAAAoB,aAAA,CAACnB,KAAK;QAAC0B,OAAO,EAAEA;MAAwB,GAAC,gBAAc,CAAQ,CAC3D;IAAA,CACP,CAAC,CACE;EAAA,CACP;EACDlB,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXM,KAAK,EAAE;MACT;IACF;EACF;AACF,CAAC"}

package/dist/esm/elements/LabeledInput/LabeledInput.js

@@ -15,7 +15,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import React, { useEffect, useRef, useState } from "react";
 import { isText as _isText } from "../../helpers/isText";
 import { Box, splitBoxProps } from "../Box";
-import { Input } from "../Input";
+import { Input, InputProps } from "../Input";
 import { Text } from "../Text";
 /** Input with a right-aligned or left-aligned label */
 export var LabeledInput = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {

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

@@ -1 +1 @@
-{"version":3,"file":"LabeledInput.js","names":["React","useEffect","useRef","useState","isText","_isText","Box","splitBoxProps","Input","Text","LabeledInput","forwardRef","_ref","forwardedRef","label","height","_ref$variant","variant","rest","_objectWithoutProperties","_excluded","labelRef","_useState","_useState2","_slicedToArray","offset","setOffset","current","offsetWidth","_splitBoxProps","_splitBoxProps2","boxProps","inputProps","isPrefix","createElement","_extends","position","ref","labelOffset","undefined","style","_defineProperty","display","alignItems","top","bottom","pointerEvents","color","lineHeight","displayName"],"sources":["../../../../src/elements/LabeledInput/LabeledInput.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\"\nimport { isText as _isText } from \"../../helpers/isText\"\nimport { Box, splitBoxProps } from \"../Box\"\nimport { Input, InputProps } from \"../Input\"\nimport { Text } from \"../Text\"\n\nexport interface LabeledInputProps extends InputProps {\n  label: React.ReactNode\n  variant?: \"suffix\" | \"prefix\"\n}\n\n/** Input with a right-aligned or left-aligned label */\nexport const LabeledInput = React.forwardRef<\n  HTMLInputElement,\n  LabeledInputProps\n>(({ label, height, variant = \"suffix\", ...rest }, forwardedRef) => {\n  const labelRef = useRef<HTMLDivElement | null>(null)\n  const [offset, setOffset] = useState(0)\n\n  useEffect(() => {\n    if (labelRef.current === null) return\n    setOffset(labelRef.current.offsetWidth)\n  }, [])\n\n  const [boxProps, inputProps] = splitBoxProps(rest)\n\n  const isText = _isText(label)\n\n  const isPrefix = variant === \"prefix\"\n\n  return (\n    <Box position=\"relative\" {...boxProps}>\n      <Input\n        ref={forwardedRef}\n        height={height}\n        labelOffset={isPrefix ? offset + 15 : undefined}\n        style={{ [isPrefix ? \"paddingLeft\" : \"paddingRight\"]: offset + 15 }}\n        {...inputProps}\n      >\n        <Box\n          ref={labelRef as any}\n          position=\"absolute\"\n          display=\"flex\"\n          alignItems=\"center\"\n          top={0}\n          bottom={0}\n          style={{ pointerEvents: isText ? \"none\" : undefined }}\n          {...{ [isPrefix ? \"left\" : \"right\"]: 1 }}\n        >\n          {isText ? (\n            <Text variant=\"sm-display\" color=\"mono60\" lineHeight={1}>\n              {label}\n            </Text>\n          ) : (\n            label\n          )}\n        </Box>\n      </Input>\n    </Box>\n  )\n})\n\nLabeledInput.displayName = \"LabeledInput\"\n"],"mappings":";;;;;;;;;;;;;;AAAA,OAAOA,KAAK,IAAIC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;AAC1D,SAASC,MAAM,IAAIC,OAAO;AAC1B,SAASC,GAAG,EAAEC,aAAa;AAC3B,SAASC,KAAK;AACd,SAASC,IAAI;AAOb;AACA,OAAO,IAAMC,YAAY,gBAAGV,KAAK,CAACW,UAAU,CAG1C,UAAAC,IAAA,EAAiDC,YAAY,EAAK;EAAA,IAA/DC,KAAK,GAAAF,IAAA,CAALE,KAAK;IAAEC,MAAM,GAAAH,IAAA,CAANG,MAAM;IAAAC,YAAA,GAAAJ,IAAA,CAAEK,OAAO;IAAPA,OAAO,GAAAD,YAAA,cAAG,QAAQ,GAAAA,YAAA;IAAKE,IAAI,GAAAC,wBAAA,CAAAP,IAAA,EAAAQ,SAAA;EAC7C,IAAMC,QAAQ,GAAGnB,MAAM,CAAwB,IAAI,CAAC;EACpD,IAAAoB,SAAA,GAA4BnB,QAAQ,CAAC,CAAC,CAAC;IAAAoB,UAAA,GAAAC,cAAA,CAAAF,SAAA;IAAhCG,MAAM,GAAAF,UAAA;IAAEG,SAAS,GAAAH,UAAA;EAExBtB,SAAS,CAAC,YAAM;IACd,IAAIoB,QAAQ,CAACM,OAAO,KAAK,IAAI,EAAE;IAC/BD,SAAS,CAACL,QAAQ,CAACM,OAAO,CAACC,WAAW,CAAC;EACzC,CAAC,EAAE,EAAE,CAAC;EAEN,IAAAC,cAAA,GAA+BtB,aAAa,CAACW,IAAI,CAAC;IAAAY,eAAA,GAAAN,cAAA,CAAAK,cAAA;IAA3CE,QAAQ,GAAAD,eAAA;IAAEE,UAAU,GAAAF,eAAA;EAE3B,IAAM1B,MAAM,GAAGC,OAAO,CAACS,KAAK,CAAC;EAE7B,IAAMmB,QAAQ,GAAGhB,OAAO,KAAK,QAAQ;EAErC,oBACEjB,KAAA,CAAAkC,aAAA,CAAC5B,GAAG,EAAA6B,QAAA;IAACC,QAAQ,EAAC;EAAU,GAAKL,QAAQ,gBACnC/B,KAAA,CAAAkC,aAAA,CAAC1B,KAAK,EAAA2B,QAAA;IACJE,GAAG,EAAExB,YAAa;IAClBE,MAAM,EAAEA,MAAO;IACfuB,WAAW,EAAEL,QAAQ,GAAGR,MAAM,GAAG,EAAE,GAAGc,SAAU;IAChDC,KAAK,EAAAC,eAAA,KAAKR,QAAQ,GAAG,aAAa,GAAG,cAAc,EAAGR,MAAM,GAAG,EAAE;EAAG,GAChEO,UAAU,gBAEdhC,KAAA,CAAAkC,aAAA,CAAC5B,GAAG,EAAA6B,QAAA;IACFE,GAAG,EAAEhB,QAAgB;IACrBe,QAAQ,EAAC,UAAU;IACnBM,OAAO,EAAC,MAAM;IACdC,UAAU,EAAC,QAAQ;IACnBC,GAAG,EAAE,CAAE;IACPC,MAAM,EAAE,CAAE;IACVL,KAAK,EAAE;MAAEM,aAAa,EAAE1C,MAAM,GAAG,MAAM,GAAGmC;IAAU;EAAE,GAAAE,eAAA,KAC/CR,QAAQ,GAAG,MAAM,GAAG,OAAO,EAAG,CAAC,IAErC7B,MAAM,gBACLJ,KAAA,CAAAkC,aAAA,CAACzB,IAAI;IAACQ,OAAO,EAAC,YAAY;IAAC8B,KAAK,EAAC,QAAQ;IAACC,UAAU,EAAE;EAAE,GACrDlC,KAAK,CACD,GAEPA,KACD,CACG,CACA,CACJ;AAEV,CAAC,CAAC;AAEFJ,YAAY,CAACuC,WAAW,GAAG,cAAc"}
+{"version":3,"file":"LabeledInput.js","names":["React","useEffect","useRef","useState","isText","_isText","Box","splitBoxProps","Input","InputProps","Text","LabeledInput","forwardRef","_ref","forwardedRef","label","height","_ref$variant","variant","rest","_objectWithoutProperties","_excluded","labelRef","_useState","_useState2","_slicedToArray","offset","setOffset","current","offsetWidth","_splitBoxProps","_splitBoxProps2","boxProps","inputProps","isPrefix","createElement","_extends","position","ref","labelOffset","undefined","style","_defineProperty","display","alignItems","top","bottom","pointerEvents","color","lineHeight","displayName"],"sources":["../../../../src/elements/LabeledInput/LabeledInput.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\"\nimport { isText as _isText } from \"../../helpers/isText\"\nimport { Box, splitBoxProps } from \"../Box\"\nimport { Input, InputProps } from \"../Input\"\nimport { Text } from \"../Text\"\n\nexport interface LabeledInputProps extends InputProps {\n  label: React.ReactNode\n  variant?: \"suffix\" | \"prefix\"\n}\n\n/** Input with a right-aligned or left-aligned label */\nexport const LabeledInput = React.forwardRef<\n  HTMLInputElement,\n  LabeledInputProps\n>(({ label, height, variant = \"suffix\", ...rest }, forwardedRef) => {\n  const labelRef = useRef<HTMLDivElement | null>(null)\n  const [offset, setOffset] = useState(0)\n\n  useEffect(() => {\n    if (labelRef.current === null) return\n    setOffset(labelRef.current.offsetWidth)\n  }, [])\n\n  const [boxProps, inputProps] = splitBoxProps(rest)\n\n  const isText = _isText(label)\n\n  const isPrefix = variant === \"prefix\"\n\n  return (\n    <Box position=\"relative\" {...boxProps}>\n      <Input\n        ref={forwardedRef}\n        height={height}\n        labelOffset={isPrefix ? offset + 15 : undefined}\n        style={{ [isPrefix ? \"paddingLeft\" : \"paddingRight\"]: offset + 15 }}\n        {...inputProps}\n      >\n        <Box\n          ref={labelRef as any}\n          position=\"absolute\"\n          display=\"flex\"\n          alignItems=\"center\"\n          top={0}\n          bottom={0}\n          style={{ pointerEvents: isText ? \"none\" : undefined }}\n          {...{ [isPrefix ? \"left\" : \"right\"]: 1 }}\n        >\n          {isText ? (\n            <Text variant=\"sm-display\" color=\"mono60\" lineHeight={1}>\n              {label}\n            </Text>\n          ) : (\n            label\n          )}\n        </Box>\n      </Input>\n    </Box>\n  )\n})\n\nLabeledInput.displayName = \"LabeledInput\"\n"],"mappings":";;;;;;;;;;;;;;AAAA,OAAOA,KAAK,IAAIC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;AAC1D,SAASC,MAAM,IAAIC,OAAO;AAC1B,SAASC,GAAG,EAAEC,aAAa;AAC3B,SAASC,KAAK,EAAEC,UAAU;AAC1B,SAASC,IAAI;AAOb;AACA,OAAO,IAAMC,YAAY,gBAAGX,KAAK,CAACY,UAAU,CAG1C,UAAAC,IAAA,EAAiDC,YAAY,EAAK;EAAA,IAA/DC,KAAK,GAAAF,IAAA,CAALE,KAAK;IAAEC,MAAM,GAAAH,IAAA,CAANG,MAAM;IAAAC,YAAA,GAAAJ,IAAA,CAAEK,OAAO;IAAPA,OAAO,GAAAD,YAAA,cAAG,QAAQ,GAAAA,YAAA;IAAKE,IAAI,GAAAC,wBAAA,CAAAP,IAAA,EAAAQ,SAAA;EAC7C,IAAMC,QAAQ,GAAGpB,MAAM,CAAwB,IAAI,CAAC;EACpD,IAAAqB,SAAA,GAA4BpB,QAAQ,CAAC,CAAC,CAAC;IAAAqB,UAAA,GAAAC,cAAA,CAAAF,SAAA;IAAhCG,MAAM,GAAAF,UAAA;IAAEG,SAAS,GAAAH,UAAA;EAExBvB,SAAS,CAAC,YAAM;IACd,IAAIqB,QAAQ,CAACM,OAAO,KAAK,IAAI,EAAE;IAC/BD,SAAS,CAACL,QAAQ,CAACM,OAAO,CAACC,WAAW,CAAC;EACzC,CAAC,EAAE,EAAE,CAAC;EAEN,IAAAC,cAAA,GAA+BvB,aAAa,CAACY,IAAI,CAAC;IAAAY,eAAA,GAAAN,cAAA,CAAAK,cAAA;IAA3CE,QAAQ,GAAAD,eAAA;IAAEE,UAAU,GAAAF,eAAA;EAE3B,IAAM3B,MAAM,GAAGC,OAAO,CAACU,KAAK,CAAC;EAE7B,IAAMmB,QAAQ,GAAGhB,OAAO,KAAK,QAAQ;EAErC,oBACElB,KAAA,CAAAmC,aAAA,CAAC7B,GAAG,EAAA8B,QAAA;IAACC,QAAQ,EAAC;EAAU,GAAKL,QAAQ,gBACnChC,KAAA,CAAAmC,aAAA,CAAC3B,KAAK,EAAA4B,QAAA;IACJE,GAAG,EAAExB,YAAa;IAClBE,MAAM,EAAEA,MAAO;IACfuB,WAAW,EAAEL,QAAQ,GAAGR,MAAM,GAAG,EAAE,GAAGc,SAAU;IAChDC,KAAK,EAAAC,eAAA,KAAKR,QAAQ,GAAG,aAAa,GAAG,cAAc,EAAGR,MAAM,GAAG,EAAE;EAAG,GAChEO,UAAU,gBAEdjC,KAAA,CAAAmC,aAAA,CAAC7B,GAAG,EAAA8B,QAAA;IACFE,GAAG,EAAEhB,QAAgB;IACrBe,QAAQ,EAAC,UAAU;IACnBM,OAAO,EAAC,MAAM;IACdC,UAAU,EAAC,QAAQ;IACnBC,GAAG,EAAE,CAAE;IACPC,MAAM,EAAE,CAAE;IACVL,KAAK,EAAE;MAAEM,aAAa,EAAE3C,MAAM,GAAG,MAAM,GAAGoC;IAAU;EAAE,GAAAE,eAAA,KAC/CR,QAAQ,GAAG,MAAM,GAAG,OAAO,EAAG,CAAC,IAErC9B,MAAM,gBACLJ,KAAA,CAAAmC,aAAA,CAACzB,IAAI;IAACQ,OAAO,EAAC,YAAY;IAAC8B,KAAK,EAAC,QAAQ;IAACC,UAAU,EAAE;EAAE,GACrDlC,KAAK,CACD,GAEPA,KACD,CACG,CACA,CACJ;AAEV,CAAC,CAAC;AAEFJ,YAAY,CAACuC,WAAW,GAAG,cAAc"}

package/dist/esm/elements/Link/Link.js

@@ -1,7 +1,7 @@
 import { themeGet } from "@styled-system/theme-get";
 import styled from "styled-components";
-import { compose, system } from "styled-system";
-import { boxMixin } from "../Box";
+import { compose, ResponsiveValue, system } from "styled-system";
+import { boxMixin, BoxProps } from "../Box";
 var textDecoration = system({
   textDecoration: true
 });

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

@@ -1 +1 @@
-{"version":3,"file":"Link.js","names":["themeGet","styled","compose","system","boxMixin","textDecoration","linkMixin","Link","a","withConfig","displayName","componentId","defaultProps"],"sources":["../../../../src/elements/Link/Link.tsx"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport styled from \"styled-components\"\nimport { compose, ResponsiveValue, system } from \"styled-system\"\nimport { boxMixin, BoxProps } from \"../Box\"\n\nconst textDecoration = system({ textDecoration: true })\n\nexport interface LinkProps extends BoxProps {\n  textDecoration?: ResponsiveValue<string>\n}\n\nconst linkMixin = compose(boxMixin, textDecoration)\n\n/**\n * Basic <a> tag styled with additional LinkProps\n *\n * Tip: If working on Force, please use <Link as={RouterLink}>.\n\n */\nexport const Link = styled.a<LinkProps>`\n  color: currentColor;\n  transition: color 0.25s;\n  &:hover {\n    color: ${themeGet(\"colors.blue100\")};\n  }\n  &:visited {\n    color: ${themeGet(\"colors.blue150\")};\n  }\n  ${linkMixin};\n`\n\nLink.displayName = \"Link\"\n\nLink.defaultProps = {\n  textDecoration: \"underline\",\n}\n"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,0BAA0B;AACnD,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAASC,OAAO,EAAmBC,MAAM,QAAQ,eAAe;AAChE,SAASC,QAAQ;AAEjB,IAAMC,cAAc,GAAGF,MAAM,CAAC;EAAEE,cAAc,EAAE;AAAK,CAAC,CAAC;AAMvD,IAAMC,SAAS,GAAGJ,OAAO,CAACE,QAAQ,EAAEC,cAAc,CAAC;;AAEnD;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,IAAME,IAAI,GAAGN,MAAM,CAACO,CAAC,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,kGAIfX,QAAQ,CAAC,gBAAgB,CAAC,EAG1BA,QAAQ,CAAC,gBAAgB,CAAC,EAEnCM,SAAS,CACZ;AAEDC,IAAI,CAACG,WAAW,GAAG,MAAM;AAEzBH,IAAI,CAACK,YAAY,GAAG;EAClBP,cAAc,EAAE;AAClB,CAAC"}
+{"version":3,"file":"Link.js","names":["themeGet","styled","compose","ResponsiveValue","system","boxMixin","BoxProps","textDecoration","linkMixin","Link","a","withConfig","displayName","componentId","defaultProps"],"sources":["../../../../src/elements/Link/Link.tsx"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport styled from \"styled-components\"\nimport { compose, ResponsiveValue, system } from \"styled-system\"\nimport { boxMixin, BoxProps } from \"../Box\"\n\nconst textDecoration = system({ textDecoration: true })\n\nexport interface LinkProps extends BoxProps {\n  textDecoration?: ResponsiveValue<string>\n}\n\nconst linkMixin = compose(boxMixin, textDecoration)\n\n/**\n * Basic <a> tag styled with additional LinkProps\n *\n * Tip: If working on Force, please use <Link as={RouterLink}>.\n\n */\nexport const Link = styled.a<LinkProps>`\n  color: currentColor;\n  transition: color 0.25s;\n  &:hover {\n    color: ${themeGet(\"colors.blue100\")};\n  }\n  &:visited {\n    color: ${themeGet(\"colors.blue150\")};\n  }\n  ${linkMixin};\n`\n\nLink.displayName = \"Link\"\n\nLink.defaultProps = {\n  textDecoration: \"underline\",\n}\n"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,0BAA0B;AACnD,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAASC,OAAO,EAAEC,eAAe,EAAEC,MAAM,QAAQ,eAAe;AAChE,SAASC,QAAQ,EAAEC,QAAQ;AAE3B,IAAMC,cAAc,GAAGH,MAAM,CAAC;EAAEG,cAAc,EAAE;AAAK,CAAC,CAAC;AAMvD,IAAMC,SAAS,GAAGN,OAAO,CAACG,QAAQ,EAAEE,cAAc,CAAC;;AAEnD;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,IAAME,IAAI,GAAGR,MAAM,CAACS,CAAC,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,kGAIfb,QAAQ,CAAC,gBAAgB,CAAC,EAG1BA,QAAQ,CAAC,gBAAgB,CAAC,EAEnCQ,SAAS,CACZ;AAEDC,IAAI,CAACG,WAAW,GAAG,MAAM;AAEzBH,IAAI,CAACK,YAAY,GAAG;EAClBP,cAAc,EAAE;AAClB,CAAC"}

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

@@ -12,7 +12,7 @@ import React, { useState, useEffect, useRef } from "react";
 import styled, { keyframes } from "styled-components";
 import { variant } from "styled-system";
 import { Flex } from "../Flex";
-import { Box } from "../Box";
+import { Box, BoxProps } from "../Box";
 import { Text } from "../Text";
 var VARIANTS = {
   defaultLight: {