@atom-learning/components 3.31.0 → 3.31.2

package/CHANGELOG.md

@@ -1,9 +1,9 @@
-# [3.31.0](https://github.com/Atom-Learning/components/compare/v3.30.1...v3.31.0) (2024-09-18)
+## [3.31.2](https://github.com/Atom-Learning/components/compare/v3.31.1...v3.31.2) (2024-09-18)
 
 
-### Features
+### Bug Fixes
 
-* focusVisibleStyleBlock allow boxShadow to be passed in ([cc6a85c](https://github.com/Atom-Learning/components/commit/cc6a85c554d596bcd386bedd5647fd263bd6262c))
+* responsive dialog size ([cb04a37](https://github.com/Atom-Learning/components/commit/cb04a372f056bb929d5916ad4483e2813735e839))
 
 # [1.4.0](https://github.com/Atom-Learning/components/compare/v1.3.0...v1.4.0) (2022-04-11)
 

package/dist/components/accordion/AccordionTrigger.js

@@ -1,2 +1,2 @@
-import{ChevronDown as n}from"@atom-learning/icons";import{Trigger as s}from"@radix-ui/react-accordion";import e from"react";import{ColorScheme as c}from"../../experiments/color-scheme/ColorScheme.js";import{styled as o}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import{focusVisibleStyleBlock as d}from"../../utilities/style/focus-visible-style-block.js";import"../../utilities/style/keyframe-animations.js";import{Icon as m}from"../icon/Icon.js";const l=o(m,{transition:"transform 300ms",'[data-state="open"] > &':{transform:"rotate(180deg)"},'[data-state="closed"] > &':{transform:"rotate(0deg)"}}),p=o(s,{border:0,py:"$3",px:"$4",width:"100%",display:"flex",justifyContent:"space-between",alignItems:"center",cursor:"pointer",bg:"$interactive2",color:"$interactiveForeground","&[data-disabled]":{opacity:.3,cursor:"not-allowed"},"&:not([data-disabled])":{"&:active, &:hover, &:focus-visible":{bg:"$interactive3"},"&:focus-visible":{...d()}},'&[data-state="open"]':{borderRadius:"$0 $0 0 0"},'&[data-state="closed"]':{borderRadius:"$0"}}),f=({children:t,colorScheme:a={},asChild:r,...i})=>e.createElement(c,{asChild:!0,accent:"grey1",interactive:"loContrast",...a},e.createElement(p,{asChild:r,...i},r?t:e.createElement(e.Fragment,null,t,e.createElement(l,{is:n,"data-testid":"accordion-chevron"}))));export{f as AccordionTrigger};
+import{ChevronDown as n}from"@atom-learning/icons";import{Trigger as s}from"@radix-ui/react-accordion";import e from"react";import{ColorScheme as c}from"../../experiments/color-scheme/ColorScheme.js";import{styled as r}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import{focusVisibleStyleBlock as d}from"../../utilities/style/focus-visible-style-block.js";import"../../utilities/style/keyframe-animations.js";import{Icon as m}from"../icon/Icon.js";const l=r(m,{transition:"transform 300ms",'[data-state="open"] > &':{transform:"rotate(180deg)"},'[data-state="closed"] > &':{transform:"rotate(0deg)"}}),p=r(s,{border:0,py:"$3",px:"$4",width:"100%",display:"flex",justifyContent:"space-between",alignItems:"center",cursor:"pointer",bg:"$interactive2",color:"$interactiveForeground","&[disabled]":{opacity:.3,cursor:"not-allowed"},"&:not([disabled])":{"&:active, &:hover, &:focus-visible":{bg:"$interactive3"},"&:focus-visible":{...d()}},'&[data-state="open"]':{borderRadius:"$0 $0 0 0"},'&[data-state="closed"]':{borderRadius:"$0"}}),f=({children:t,colorScheme:i={},asChild:o,...a})=>e.createElement(c,{asChild:!0,accent:"grey1",interactive:"loContrast",...i},e.createElement(p,{asChild:o,...a},o?t:e.createElement(e.Fragment,null,t,e.createElement(l,{is:n,"data-testid":"accordion-chevron"}))));export{f as AccordionTrigger};
 //# sourceMappingURL=AccordionTrigger.js.map

package/dist/components/accordion/AccordionTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionTrigger.js","sources":["../../../src/components/accordion/AccordionTrigger.tsx"],"sourcesContent":["import { ChevronDown } from '@atom-learning/icons'\nimport { Trigger } from '@radix-ui/react-accordion'\nimport React from 'react'\n\nimport { ColorScheme, TcolorScheme } from '~/experiments/color-scheme'\nimport { styled } from '~/stitches'\nimport { focusVisibleStyleBlock } from '~/utilities'\n\nimport { Icon } from '../icon'\n\nconst RotatingIcon = styled(Icon, {\n  transition: 'transform 300ms',\n  '[data-state=\"open\"] > &': {\n    transform: 'rotate(180deg)'\n  },\n  '[data-state=\"closed\"] > &': {\n    transform: 'rotate(0deg)'\n  }\n})\n\nconst StyledTrigger = styled(Trigger, {\n  border: 0,\n  py: '$3',\n  px: '$4',\n  width: '100%',\n  display: 'flex',\n  justifyContent: 'space-between',\n  alignItems: 'center',\n  cursor: 'pointer',\n  bg: '$interactive2',\n  color: '$interactiveForeground',\n  '&[data-disabled]': {\n    opacity: 0.3,\n    cursor: 'not-allowed'\n  },\n  '&:not([data-disabled])': {\n    '&:active, &:hover, &:focus-visible': {\n      bg: '$interactive3'\n    },\n    '&:focus-visible': {\n      ...focusVisibleStyleBlock()\n    }\n  },\n  '&[data-state=\"open\"]': {\n    borderRadius: '$0 $0 0 0'\n  },\n  '&[data-state=\"closed\"]': {\n    borderRadius: '$0'\n  }\n})\n\nexport const AccordionTrigger = ({\n  children,\n  colorScheme = {},\n  asChild,\n  ...remainingProps\n}: React.ComponentProps<typeof StyledTrigger> & {\n  colorScheme?: TcolorScheme\n}) => (\n  <ColorScheme asChild accent=\"grey1\" interactive=\"loContrast\" {...colorScheme}>\n    <StyledTrigger asChild={asChild} {...remainingProps}>\n      {asChild ? (\n        children\n      ) : (\n        <>\n          {children}\n          <RotatingIcon is={ChevronDown} data-testid=\"accordion-chevron\" />\n        </>\n      )}\n    </StyledTrigger>\n  </ColorScheme>\n)\n"],"names":["RotatingIcon","styled","Icon","StyledTrigger","Trigger","focusVisibleStyleBlock","AccordionTrigger","children","colorScheme","asChild","remainingProps","React","ColorScheme","ChevronDown"],"mappings":"8iBAUA,MAAMA,EAAeC,EAAOC,EAAM,CAChC,WAAY,kBACZ,0BAA2B,CACzB,UAAW,gBACb,EACA,4BAA6B,CAC3B,UAAW,cACb,CACF,CAAC,EAEKC,EAAgBF,EAAOG,EAAS,CACpC,OAAQ,EACR,GAAI,KACJ,GAAI,KACJ,MAAO,OACP,QAAS,OACT,eAAgB,gBAChB,WAAY,SACZ,OAAQ,UACR,GAAI,gBACJ,MAAO,yBACP,mBAAoB,CAClB,QAAS,GACT,OAAQ,aACV,EACA,yBAA0B,CACxB,qCAAsC,CACpC,GAAI,eACN,EACA,kBAAmB,CACjB,GAAGC,EACL,CAAA,CACF,EACA,uBAAwB,CACtB,aAAc,WAChB,EACA,yBAA0B,CACxB,aAAc,IAChB,CACF,CAAC,EAEYC,EAAmB,CAAC,CAC/B,SAAAC,EACA,YAAAC,EAAc,CAAC,EACf,QAAAC,KACGC,CACL,IAGEC,EAAA,cAACC,EAAA,CAAY,QAAO,GAAC,OAAO,QAAQ,YAAY,aAAc,GAAGJ,GAC/DG,EAAA,cAACR,EAAA,CAAc,QAASM,EAAU,GAAGC,CAClCD,EAAAA,EACCF,EAEAI,EAAA,cAAAA,EAAA,SAAA,KACGJ,EACDI,EAAA,cAACX,EAAA,CAAa,GAAIa,EAAa,cAAY,mBAAoB,CAAA,CACjE,CAEJ,CACF"}
+{"version":3,"file":"AccordionTrigger.js","sources":["../../../src/components/accordion/AccordionTrigger.tsx"],"sourcesContent":["import { ChevronDown } from '@atom-learning/icons'\nimport { Trigger } from '@radix-ui/react-accordion'\nimport React from 'react'\n\nimport { ColorScheme, TcolorScheme } from '~/experiments/color-scheme'\nimport { styled } from '~/stitches'\nimport { focusVisibleStyleBlock } from '~/utilities'\n\nimport { Icon } from '../icon'\n\nconst RotatingIcon = styled(Icon, {\n  transition: 'transform 300ms',\n  '[data-state=\"open\"] > &': {\n    transform: 'rotate(180deg)'\n  },\n  '[data-state=\"closed\"] > &': {\n    transform: 'rotate(0deg)'\n  }\n})\n\nconst StyledTrigger = styled(Trigger, {\n  border: 0,\n  py: '$3',\n  px: '$4',\n  width: '100%',\n  display: 'flex',\n  justifyContent: 'space-between',\n  alignItems: 'center',\n  cursor: 'pointer',\n  bg: '$interactive2',\n  color: '$interactiveForeground',\n  '&[disabled]': {\n    opacity: 0.3,\n    cursor: 'not-allowed'\n  },\n  '&:not([disabled])': {\n    '&:active, &:hover, &:focus-visible': {\n      bg: '$interactive3'\n    },\n    '&:focus-visible': {\n      ...focusVisibleStyleBlock()\n    }\n  },\n  '&[data-state=\"open\"]': {\n    borderRadius: '$0 $0 0 0'\n  },\n  '&[data-state=\"closed\"]': {\n    borderRadius: '$0'\n  }\n})\n\nexport const AccordionTrigger = ({\n  children,\n  colorScheme = {},\n  asChild,\n  ...remainingProps\n}: React.ComponentProps<typeof StyledTrigger> & {\n  colorScheme?: TcolorScheme\n}) => (\n  <ColorScheme asChild accent=\"grey1\" interactive=\"loContrast\" {...colorScheme}>\n    <StyledTrigger asChild={asChild} {...remainingProps}>\n      {asChild ? (\n        children\n      ) : (\n        <>\n          {children}\n          <RotatingIcon is={ChevronDown} data-testid=\"accordion-chevron\" />\n        </>\n      )}\n    </StyledTrigger>\n  </ColorScheme>\n)\n"],"names":["RotatingIcon","styled","Icon","StyledTrigger","Trigger","focusVisibleStyleBlock","AccordionTrigger","children","colorScheme","asChild","remainingProps","React","ColorScheme","ChevronDown"],"mappings":"8iBAUA,MAAMA,EAAeC,EAAOC,EAAM,CAChC,WAAY,kBACZ,0BAA2B,CACzB,UAAW,gBACb,EACA,4BAA6B,CAC3B,UAAW,cACb,CACF,CAAC,EAEKC,EAAgBF,EAAOG,EAAS,CACpC,OAAQ,EACR,GAAI,KACJ,GAAI,KACJ,MAAO,OACP,QAAS,OACT,eAAgB,gBAChB,WAAY,SACZ,OAAQ,UACR,GAAI,gBACJ,MAAO,yBACP,cAAe,CACb,QAAS,GACT,OAAQ,aACV,EACA,oBAAqB,CACnB,qCAAsC,CACpC,GAAI,eACN,EACA,kBAAmB,CACjB,GAAGC,EACL,CAAA,CACF,EACA,uBAAwB,CACtB,aAAc,WAChB,EACA,yBAA0B,CACxB,aAAc,IAChB,CACF,CAAC,EAEYC,EAAmB,CAAC,CAC/B,SAAAC,EACA,YAAAC,EAAc,CAAC,EACf,QAAAC,KACGC,CACL,IAGEC,EAAA,cAACC,EAAA,CAAY,QAAO,GAAC,OAAO,QAAQ,YAAY,aAAc,GAAGJ,GAC/DG,EAAA,cAACR,EAAA,CAAc,QAASM,EAAU,GAAGC,CAClCD,EAAAA,EACCF,EAEAI,EAAA,cAAAA,EAAA,SAAA,KACGJ,EACDI,EAAA,cAACX,EAAA,CAAa,GAAIa,EAAa,cAAY,mBAAoB,CAAA,CACjE,CAEJ,CACF"}

package/dist/components/chip/Chip.js

@@ -1,2 +1,2 @@
-import*as e from"react";import{Box as x}from"../box/Box.js";import{Flex as C}from"../flex/Flex.js";import{Icon as l}from"../icon/Icon.js";import{getTextVariant as s}from"../text/Text.js";import{styled as c}from"../../stitches.js";import{overrideStitchesVariantValue as g}from"../../utilities/override-stitches-variant-value/overrideStitchesVariantValue.js";const p={overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},d=c("span",{display:"inline-flex",alignItems:"center",px:"$1",flexGrow:1,...p,"& > *:not(:last-child)":{mr:"$1"}}),z={sm:"sm",md:"sm",lg:"md"},m=t=>{const r=e.useContext(a),{size:o}=r,n=e.useMemo(()=>g(o,i=>z[i]),[o]);return e.createElement(l,{...t,size:n})},u=({children:t,...r})=>{const o=e.Children.toArray(t),n=o.length<=1;return e.createElement(d,{...r},o.map((i,$)=>!n&&typeof i=="string"?e.createElement(x,{as:"span",css:p,key:i},i):e.isValidElement(i)&&i.type===l?e.createElement(m,{key:`icon-${$}`,...i.props}):i))},h=c(C,{px:"$2",border:"1px solid",borderRadius:"$0",alignItems:"center",fontFamily:"$body",maxWidth:"100%",borderColor:"$primary800",color:"$primary900",bg:"$primary100","&[data-disabled]":{opacity:"0.3",pointerEvents:"none"},variants:{size:{sm:{height:"$2",...s({size:"sm"})},md:{height:"$3",...s({size:"sm"})},lg:{height:"$4",...s({size:"md"})}}}}),a=e.createContext({}),y=({size:t,children:r})=>{const o=e.useMemo(()=>({size:t}),[t]);return e.createElement(a.Provider,{value:o},r)},f=e.forwardRef(({size:t="md",...r},o)=>e.createElement(y,{size:t},e.createElement(h,{ref:o,size:t,...r}))),E=Object.assign(f,{Content:u,Icon:m});f.displayName="Chip";export{E as Chip,m as ChipIcon,a as ChipRootContext,y as ChipRootProvider,d as StyledChipContent,h as StyledRoot};
+import*as e from"react";import{Box as x}from"../box/Box.js";import{Flex as C}from"../flex/Flex.js";import{Icon as l}from"../icon/Icon.js";import{getTextVariant as s}from"../text/Text.js";import{styled as c}from"../../stitches.js";import{overrideStitchesVariantValue as g}from"../../utilities/override-stitches-variant-value/overrideStitchesVariantValue.js";const p={overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},d=c("span",{display:"inline-flex",alignItems:"center",px:"$1",flexGrow:1,...p,"& > *:not(:last-child)":{mr:"$1"}}),z={sm:"sm",md:"sm",lg:"md"},m=t=>{const r=e.useContext(a),{size:o}=r,n=e.useMemo(()=>g(o,i=>z[i]),[o]);return e.createElement(l,{...t,size:n})},u=({children:t,...r})=>{const o=e.Children.toArray(t),n=o.length<=1;return e.createElement(d,{...r},o.map((i,$)=>!n&&typeof i=="string"?e.createElement(x,{as:"span",css:p,key:i},i):e.isValidElement(i)&&i.type===l?e.createElement(m,{key:`icon-${$}`,...i.props}):i))},h=c(C,{px:"$2",border:"1px solid",borderRadius:"$0",alignItems:"center",fontFamily:"$body",maxWidth:"100%",borderColor:"$primary800",color:"$primary900",bg:"$primary100","&[disabled]":{opacity:"0.3",pointerEvents:"none"},variants:{size:{sm:{height:"$2",...s({size:"sm"})},md:{height:"$3",...s({size:"sm"})},lg:{height:"$4",...s({size:"md"})}}}}),a=e.createContext({}),y=({size:t,children:r})=>{const o=e.useMemo(()=>({size:t}),[t]);return e.createElement(a.Provider,{value:o},r)},f=e.forwardRef(({size:t="md",...r},o)=>e.createElement(y,{size:t},e.createElement(h,{ref:o,size:t,...r}))),E=Object.assign(f,{Content:u,Icon:m});f.displayName="Chip";export{E as Chip,m as ChipIcon,a as ChipRootContext,y as ChipRootProvider,d as StyledChipContent,h as StyledRoot};
 //# sourceMappingURL=Chip.js.map

package/dist/components/chip/Chip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Chip.js","sources":["../../../src/components/chip/Chip.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Box } from '~/components/box'\nimport { Flex } from '~/components/flex'\nimport { Icon } from '~/components/icon'\nimport { getTextVariant } from '~/components/text'\nimport { styled } from '~/stitches'\nimport { overrideStitchesVariantValue } from '~/utilities/override-stitches-variant-value/overrideStitchesVariantValue'\n\nconst overflowElipsis = {\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap'\n}\nexport const StyledChipContent = styled('span', {\n  display: 'inline-flex',\n  alignItems: 'center',\n  px: '$1',\n  flexGrow: 1,\n  ...overflowElipsis,\n  '& > *:not(:last-child)': {\n    mr: '$1'\n  }\n})\n\nconst toIconSize = { sm: 'sm', md: 'sm', lg: 'md' }\n\nexport const ChipIcon = (props: React.ComponentProps<typeof Icon>) => {\n  const rootContext = React.useContext(ChipRootContext)\n  const { size } = rootContext\n  const iconSize = React.useMemo(\n    () => overrideStitchesVariantValue(size, (s) => toIconSize[s]),\n    [size]\n  )\n  return <Icon {...props} size={iconSize} />\n}\n\nconst ChipContent = ({ children, ...rest }) => {\n  const childrenArray = React.Children.toArray(children)\n  const isSingleChild = childrenArray.length <= 1\n  return (\n    <StyledChipContent {...rest}>\n      {\n        childrenArray.map((child, index) => {\n          if (!isSingleChild && typeof child === 'string')\n            return (\n              <Box as=\"span\" css={overflowElipsis} key={child}>\n                {child}\n              </Box>\n            )\n          if (React.isValidElement(child) && child.type === Icon) {\n            return <ChipIcon key={`icon-${index}`} {...child.props} />\n          }\n          return child\n        }) as React.ReactElement[]\n      }\n    </StyledChipContent>\n  )\n}\n\nexport const StyledRoot = styled(Flex, {\n  px: '$2',\n  border: '1px solid',\n  borderRadius: '$0',\n  alignItems: 'center',\n  fontFamily: '$body',\n  maxWidth: '100%',\n  borderColor: '$primary800',\n  color: '$primary900',\n  bg: '$primary100',\n  '&[data-disabled]': {\n    opacity: '0.3',\n    pointerEvents: 'none'\n  },\n  variants: {\n    size: {\n      sm: {\n        height: '$2',\n        ...getTextVariant({ size: 'sm' })\n      },\n      md: {\n        height: '$3',\n        ...getTextVariant({ size: 'sm' })\n      },\n      lg: {\n        height: '$4',\n        ...getTextVariant({ size: 'md' })\n      }\n    }\n  }\n})\n\nexport type TChipRootContext = React.ComponentProps<typeof StyledRoot>\nexport type TChipRootProviderProps = TChipRootContext\n\nexport const ChipRootContext = React.createContext<TChipRootContext>({})\n\nexport const ChipRootProvider = ({\n  size,\n  children\n}: TChipRootProviderProps) => {\n  const value = React.useMemo<TChipRootContext>(() => ({ size }), [size])\n  return (\n    <ChipRootContext.Provider value={value}>\n      {children}\n    </ChipRootContext.Provider>\n  )\n}\n\nexport type TChipRootProps = TChipRootProviderProps\n\nconst ChipRoot: React.ForwardRefExoticComponent<TChipRootProps> =\n  React.forwardRef(({ size = 'md', ...rest }, ref) => {\n    return (\n      <ChipRootProvider size={size}>\n        <StyledRoot ref={ref} size={size} {...rest} />\n      </ChipRootProvider>\n    )\n  })\n\nexport const Chip = Object.assign(ChipRoot, {\n  Content: ChipContent,\n  Icon: ChipIcon\n})\n\nChipRoot.displayName = 'Chip'\n"],"names":["overflowElipsis","StyledChipContent","styled","toIconSize","ChipIcon","props","rootContext","React","ChipRootContext","size","iconSize","overrideStitchesVariantValue","s","Icon","ChipContent","children","rest","childrenArray","isSingleChild","child","index","Box","StyledRoot","Flex","getTextVariant","ChipRootProvider","value","ChipRoot","ref","Chip"],"mappings":"qWASA,MAAMA,EAAkB,CACtB,SAAU,SACV,aAAc,WACd,WAAY,QACd,EACaC,EAAoBC,EAAO,OAAQ,CAC9C,QAAS,cACT,WAAY,SACZ,GAAI,KACJ,SAAU,EACV,GAAGF,EACH,yBAA0B,CACxB,GAAI,IACN,CACF,CAAC,EAEKG,EAAa,CAAE,GAAI,KAAM,GAAI,KAAM,GAAI,IAAK,EAErCC,EAAYC,GAA6C,CACpE,MAAMC,EAAcC,EAAM,WAAWC,CAAe,EAC9C,CAAE,KAAAC,CAAK,EAAIH,EACXI,EAAWH,EAAM,QACrB,IAAMI,EAA6BF,EAAOG,GAAMT,EAAWS,EAAE,EAC7D,CAACH,CAAI,CACP,EACA,OAAOF,EAAA,cAACM,EAAA,CAAM,GAAGR,EAAO,KAAMK,EAAU,CAC1C,EAEMI,EAAc,CAAC,CAAE,SAAAC,KAAaC,CAAK,IAAM,CAC7C,MAAMC,EAAgBV,EAAM,SAAS,QAAQQ,CAAQ,EAC/CG,EAAgBD,EAAc,QAAU,EAC9C,OACEV,EAAA,cAACN,GAAmB,GAAGe,CAAAA,EAEnBC,EAAc,IAAI,CAACE,EAAOC,IACpB,CAACF,GAAiB,OAAOC,GAAU,SAEnCZ,EAAA,cAACc,EAAA,CAAI,GAAG,OAAO,IAAKrB,EAAiB,IAAKmB,CACvCA,EAAAA,CACH,EAEAZ,EAAM,eAAeY,CAAK,GAAKA,EAAM,OAASN,EACzCN,EAAA,cAACH,EAAA,CAAS,IAAK,QAAQgB,IAAU,GAAGD,EAAM,KAAO,CAAA,EAEnDA,CACR,CAEL,CAEJ,EAEaG,EAAapB,EAAOqB,EAAM,CACrC,GAAI,KACJ,OAAQ,YACR,aAAc,KACd,WAAY,SACZ,WAAY,QACZ,SAAU,OACV,YAAa,cACb,MAAO,cACP,GAAI,cACJ,mBAAoB,CAClB,QAAS,MACT,cAAe,MACjB,EACA,SAAU,CACR,KAAM,CACJ,GAAI,CACF,OAAQ,KACR,GAAGC,EAAe,CAAE,KAAM,IAAK,CAAC,CAClC,EACA,GAAI,CACF,OAAQ,KACR,GAAGA,EAAe,CAAE,KAAM,IAAK,CAAC,CAClC,EACA,GAAI,CACF,OAAQ,KACR,GAAGA,EAAe,CAAE,KAAM,IAAK,CAAC,CAClC,CACF,CACF,CACF,CAAC,EAKYhB,EAAkBD,EAAM,cAAgC,CAAA,CAAE,EAE1DkB,EAAmB,CAAC,CAC/B,KAAAhB,EACA,SAAAM,CACF,IAA8B,CAC5B,MAAMW,EAAQnB,EAAM,QAA0B,KAAO,CAAE,KAAAE,CAAK,GAAI,CAACA,CAAI,CAAC,EACtE,OACEF,EAAA,cAACC,EAAgB,SAAhB,CAAyB,MAAOkB,GAC9BX,CACH,CAEJ,EAIMY,EACJpB,EAAM,WAAW,CAAC,CAAE,KAAAE,EAAO,QAASO,CAAK,EAAGY,IAExCrB,EAAA,cAACkB,GAAiB,KAAMhB,CAAAA,EACtBF,EAAA,cAACe,EAAA,CAAW,IAAKM,EAAK,KAAMnB,EAAO,GAAGO,EAAM,CAC9C,CAEH,EAEUa,EAAO,OAAO,OAAOF,EAAU,CAC1C,QAASb,EACT,KAAMV,CACR,CAAC,EAEDuB,EAAS,YAAc"}
+{"version":3,"file":"Chip.js","sources":["../../../src/components/chip/Chip.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Box } from '~/components/box'\nimport { Flex } from '~/components/flex'\nimport { Icon } from '~/components/icon'\nimport { getTextVariant } from '~/components/text'\nimport { styled } from '~/stitches'\nimport { overrideStitchesVariantValue } from '~/utilities/override-stitches-variant-value/overrideStitchesVariantValue'\n\nconst overflowElipsis = {\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap'\n}\nexport const StyledChipContent = styled('span', {\n  display: 'inline-flex',\n  alignItems: 'center',\n  px: '$1',\n  flexGrow: 1,\n  ...overflowElipsis,\n  '& > *:not(:last-child)': {\n    mr: '$1'\n  }\n})\n\nconst toIconSize = { sm: 'sm', md: 'sm', lg: 'md' }\n\nexport const ChipIcon = (props: React.ComponentProps<typeof Icon>) => {\n  const rootContext = React.useContext(ChipRootContext)\n  const { size } = rootContext\n  const iconSize = React.useMemo(\n    () => overrideStitchesVariantValue(size, (s) => toIconSize[s]),\n    [size]\n  )\n  return <Icon {...props} size={iconSize} />\n}\n\nconst ChipContent = ({ children, ...rest }) => {\n  const childrenArray = React.Children.toArray(children)\n  const isSingleChild = childrenArray.length <= 1\n  return (\n    <StyledChipContent {...rest}>\n      {\n        childrenArray.map((child, index) => {\n          if (!isSingleChild && typeof child === 'string')\n            return (\n              <Box as=\"span\" css={overflowElipsis} key={child}>\n                {child}\n              </Box>\n            )\n          if (React.isValidElement(child) && child.type === Icon) {\n            return <ChipIcon key={`icon-${index}`} {...child.props} />\n          }\n          return child\n        }) as React.ReactElement[]\n      }\n    </StyledChipContent>\n  )\n}\n\nexport const StyledRoot = styled(Flex, {\n  px: '$2',\n  border: '1px solid',\n  borderRadius: '$0',\n  alignItems: 'center',\n  fontFamily: '$body',\n  maxWidth: '100%',\n  borderColor: '$primary800',\n  color: '$primary900',\n  bg: '$primary100',\n  '&[disabled]': {\n    opacity: '0.3',\n    pointerEvents: 'none'\n  },\n  variants: {\n    size: {\n      sm: {\n        height: '$2',\n        ...getTextVariant({ size: 'sm' })\n      },\n      md: {\n        height: '$3',\n        ...getTextVariant({ size: 'sm' })\n      },\n      lg: {\n        height: '$4',\n        ...getTextVariant({ size: 'md' })\n      }\n    }\n  }\n})\n\nexport type TChipRootContext = React.ComponentProps<typeof StyledRoot>\nexport type TChipRootProviderProps = TChipRootContext\n\nexport const ChipRootContext = React.createContext<TChipRootContext>({})\n\nexport const ChipRootProvider = ({\n  size,\n  children\n}: TChipRootProviderProps) => {\n  const value = React.useMemo<TChipRootContext>(() => ({ size }), [size])\n  return (\n    <ChipRootContext.Provider value={value}>\n      {children}\n    </ChipRootContext.Provider>\n  )\n}\n\nexport type TChipRootProps = TChipRootProviderProps\n\nconst ChipRoot: React.ForwardRefExoticComponent<TChipRootProps> =\n  React.forwardRef(({ size = 'md', ...rest }, ref) => {\n    return (\n      <ChipRootProvider size={size}>\n        <StyledRoot ref={ref} size={size} {...rest} />\n      </ChipRootProvider>\n    )\n  })\n\nexport const Chip = Object.assign(ChipRoot, {\n  Content: ChipContent,\n  Icon: ChipIcon\n})\n\nChipRoot.displayName = 'Chip'\n"],"names":["overflowElipsis","StyledChipContent","styled","toIconSize","ChipIcon","props","rootContext","React","ChipRootContext","size","iconSize","overrideStitchesVariantValue","s","Icon","ChipContent","children","rest","childrenArray","isSingleChild","child","index","Box","StyledRoot","Flex","getTextVariant","ChipRootProvider","value","ChipRoot","ref","Chip"],"mappings":"qWASA,MAAMA,EAAkB,CACtB,SAAU,SACV,aAAc,WACd,WAAY,QACd,EACaC,EAAoBC,EAAO,OAAQ,CAC9C,QAAS,cACT,WAAY,SACZ,GAAI,KACJ,SAAU,EACV,GAAGF,EACH,yBAA0B,CACxB,GAAI,IACN,CACF,CAAC,EAEKG,EAAa,CAAE,GAAI,KAAM,GAAI,KAAM,GAAI,IAAK,EAErCC,EAAYC,GAA6C,CACpE,MAAMC,EAAcC,EAAM,WAAWC,CAAe,EAC9C,CAAE,KAAAC,CAAK,EAAIH,EACXI,EAAWH,EAAM,QACrB,IAAMI,EAA6BF,EAAOG,GAAMT,EAAWS,EAAE,EAC7D,CAACH,CAAI,CACP,EACA,OAAOF,EAAA,cAACM,EAAA,CAAM,GAAGR,EAAO,KAAMK,EAAU,CAC1C,EAEMI,EAAc,CAAC,CAAE,SAAAC,KAAaC,CAAK,IAAM,CAC7C,MAAMC,EAAgBV,EAAM,SAAS,QAAQQ,CAAQ,EAC/CG,EAAgBD,EAAc,QAAU,EAC9C,OACEV,EAAA,cAACN,GAAmB,GAAGe,CAAAA,EAEnBC,EAAc,IAAI,CAACE,EAAOC,IACpB,CAACF,GAAiB,OAAOC,GAAU,SAEnCZ,EAAA,cAACc,EAAA,CAAI,GAAG,OAAO,IAAKrB,EAAiB,IAAKmB,CACvCA,EAAAA,CACH,EAEAZ,EAAM,eAAeY,CAAK,GAAKA,EAAM,OAASN,EACzCN,EAAA,cAACH,EAAA,CAAS,IAAK,QAAQgB,IAAU,GAAGD,EAAM,KAAO,CAAA,EAEnDA,CACR,CAEL,CAEJ,EAEaG,EAAapB,EAAOqB,EAAM,CACrC,GAAI,KACJ,OAAQ,YACR,aAAc,KACd,WAAY,SACZ,WAAY,QACZ,SAAU,OACV,YAAa,cACb,MAAO,cACP,GAAI,cACJ,cAAe,CACb,QAAS,MACT,cAAe,MACjB,EACA,SAAU,CACR,KAAM,CACJ,GAAI,CACF,OAAQ,KACR,GAAGC,EAAe,CAAE,KAAM,IAAK,CAAC,CAClC,EACA,GAAI,CACF,OAAQ,KACR,GAAGA,EAAe,CAAE,KAAM,IAAK,CAAC,CAClC,EACA,GAAI,CACF,OAAQ,KACR,GAAGA,EAAe,CAAE,KAAM,IAAK,CAAC,CAClC,CACF,CACF,CACF,CAAC,EAKYhB,EAAkBD,EAAM,cAAgC,CAAA,CAAE,EAE1DkB,EAAmB,CAAC,CAC/B,KAAAhB,EACA,SAAAM,CACF,IAA8B,CAC5B,MAAMW,EAAQnB,EAAM,QAA0B,KAAO,CAAE,KAAAE,CAAK,GAAI,CAACA,CAAI,CAAC,EACtE,OACEF,EAAA,cAACC,EAAgB,SAAhB,CAAyB,MAAOkB,GAC9BX,CACH,CAEJ,EAIMY,EACJpB,EAAM,WAAW,CAAC,CAAE,KAAAE,EAAO,QAASO,CAAK,EAAGY,IAExCrB,EAAA,cAACkB,GAAiB,KAAMhB,CAAAA,EACtBF,EAAA,cAACe,EAAA,CAAW,IAAKM,EAAK,KAAMnB,EAAO,GAAGO,EAAM,CAC9C,CAEH,EAEUa,EAAO,OAAO,OAAOF,EAAU,CAC1C,QAASb,EACT,KAAMV,CACR,CAAC,EAEDuB,EAAS,YAAc"}

package/dist/components/dialog/DialogContent.js

@@ -1,2 +1,2 @@
-import{Close as f}from"@atom-learning/icons";import{Overlay as u,Content as v,Portal as x,Close as g}from"@radix-ui/react-dialog";import*as t from"react";import{DIALOG_Z_INDEX as b}from"../../constants/zIndices.js";import{keyframes as r,styled as s}from"../../stitches.js";import{backdropOverlay as w}from"../../utilities/style/backdrop-overlay.js";import{ActionIcon as D}from"../action-icon/ActionIcon.js";import{Icon as $}from"../icon/Icon.js";import{DialogBackground as l}from"./DialogBackground.js";const o="translate3d(-50%, -50%, 0)",n="translate3d(-50%, 50vh, 0)",m="modal_overlay",z=r({"0%":{transform:n},"100%":{transform:o}}),C=r({"0%":{transform:o},"100%":{transform:n}}),y=s(u,w),E=s(v,{bg:"white",borderRadius:"$1",boxShadow:"$3",boxSizing:"border-box",left:"50%",maxWidth:"90vw",maxHeight:"90vh",overflowY:"auto",p:"$5",position:"fixed",top:"50%",transform:o,zIndex:b,"&:focus":{outline:"none"},"@allowMotion":{'&[data-state="open"]':{animation:`${z} 550ms cubic-bezier(0.22, 1, 0.36, 1)`},'&[data-state="closed"]':{animation:`${C} 550ms cubic-bezier(0.22, 1, 0.36, 1)`}},variants:{size:{xs:{width:"380px"},sm:{width:"480px"},md:{width:"600px"},lg:{width:"800px"},xl:{width:"1100px"},fullscreen:{width:"100vw",height:"100vh",maxWidth:"100vw",maxHeight:"100vh",borderRadius:"unset","@supports (height: 100svh)":{height:"100svh",maxHeight:"100svh"}}}}}),I=({size:d="sm",children:i,closeDialogText:h="Close dialog",showCloseButton:p=!0,...c})=>t.createElement(x,null,t.createElement(y,{id:m},t.Children.map(i,e=>(e==null?void 0:e.type)===l&&e),t.createElement(E,{size:d,"aria-label":"Dialog",onPointerDownOutside:e=>{const a=e.target;(a==null?void 0:a.id)!==m&&e.preventDefault()},...c},p&&t.createElement(D,{as:g,css:{position:"absolute",right:"$4",top:"$4",size:"$5"},label:h,hasTooltip:!1,size:"md",theme:"neutral"},t.createElement($,{is:f})),t.Children.map(i,e=>(e==null?void 0:e.type)!==l&&e))));export{I as DialogContent};
+import{Close as g}from"@atom-learning/icons";import{Overlay as x,Content as f,Portal as v,Close as b}from"@radix-ui/react-dialog";import*as e from"react";import{DIALOG_Z_INDEX as w}from"../../constants/zIndices.js";import{keyframes as s,styled as l}from"../../stitches.js";import{backdropOverlay as $}from"../../utilities/style/backdrop-overlay.js";import{ActionIcon as z}from"../action-icon/ActionIcon.js";import{Icon as C}from"../icon/Icon.js";import{DialogBackground as n}from"./DialogBackground.js";const i="translate3d(-50%, -50%, 0)",m="translate3d(-50%, 50vh, 0)",d="modal_overlay",D=s({"0%":{transform:m},"100%":{transform:i}}),y=s({"0%":{transform:i},"100%":{transform:m}}),E=l(x,$),o={width:"auto",height:"auto",maxWidth:"auto",maxHeight:"auto","@supports (height: 100svh)":{height:"auto",maxHeight:"auto"}},I=l(f,{bg:"white",boxShadow:"$3",boxSizing:"border-box",left:"50%",maxWidth:"90vw",maxHeight:"90vh",overflowY:"auto",p:"$5",position:"fixed",top:"50%",transform:i,zIndex:w,"&:focus":{outline:"none"},"@allowMotion":{'&[data-state="open"]':{animation:`${D} 550ms cubic-bezier(0.22, 1, 0.36, 1)`},'&[data-state="closed"]':{animation:`${y} 550ms cubic-bezier(0.22, 1, 0.36, 1)`}},variants:{size:{xs:{...o,borderRadius:"$1",width:"380px"},sm:{...o,borderRadius:"$1",width:"480px"},md:{...o,borderRadius:"$1",width:"600px"},lg:{...o,borderRadius:"$1",width:"800px"},xl:{...o,borderRadius:"$1",width:"1100px"},fullscreen:{width:"100vw",height:"100vh",maxWidth:"100vw",maxHeight:"100vh","@supports (height: 100svh)":{height:"100svh",maxHeight:"100svh"}}}}}),H=({size:h="sm",children:a,closeDialogText:p="Close dialog",showCloseButton:u=!0,...c})=>e.createElement(v,null,e.createElement(E,{id:d},e.Children.map(a,t=>(t==null?void 0:t.type)===n&&t),e.createElement(I,{size:h,"aria-label":"Dialog",onPointerDownOutside:t=>{const r=t.target;(r==null?void 0:r.id)!==d&&t.preventDefault()},...c},u&&e.createElement(z,{as:b,css:{position:"absolute",right:"$4",top:"$4",size:"$5"},label:p,hasTooltip:!1,size:"md",theme:"neutral"},e.createElement(C,{is:g})),e.Children.map(a,t=>(t==null?void 0:t.type)!==n&&t))));export{H as DialogContent};
 //# sourceMappingURL=DialogContent.js.map

package/dist/components/dialog/DialogContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"DialogContent.js","sources":["../../../src/components/dialog/DialogContent.tsx"],"sourcesContent":["import { Close as CloseIcon } from '@atom-learning/icons'\nimport { Close, Content, Overlay, Portal } from '@radix-ui/react-dialog'\nimport * as React from 'react'\n\nimport { DIALOG_Z_INDEX } from '~/constants/zIndices'\nimport { keyframes, styled } from '~/stitches'\nimport { backdropOverlay } from '~/utilities/style/backdrop-overlay'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport { DialogBackground } from './DialogBackground'\n\nconst contentOnScreen = 'translate3d(-50%, -50%, 0)'\nconst contentOffScreen = 'translate3d(-50%, 50vh, 0)'\nconst modalOverlayId = 'modal_overlay'\n\nconst slideIn = keyframes({\n  '0%': { transform: contentOffScreen },\n  '100%': { transform: contentOnScreen }\n})\nconst slideOut = keyframes({\n  '0%': { transform: contentOnScreen },\n  '100%': { transform: contentOffScreen }\n})\n\nconst StyledDialogOverlay = styled(Overlay, backdropOverlay)\n\nconst StyledDialogContent = styled(Content, {\n  bg: 'white',\n  borderRadius: '$1',\n  boxShadow: '$3',\n  boxSizing: 'border-box',\n  left: '50%',\n  maxWidth: '90vw',\n  maxHeight: '90vh',\n  overflowY: 'auto',\n  p: '$5',\n  position: 'fixed',\n  top: '50%',\n  transform: contentOnScreen,\n  zIndex: DIALOG_Z_INDEX,\n  '&:focus': {\n    outline: 'none'\n  },\n  '@allowMotion': {\n    '&[data-state=\"open\"]': {\n      animation: `${slideIn} 550ms cubic-bezier(0.22, 1, 0.36, 1)`\n    },\n    '&[data-state=\"closed\"]': {\n      animation: `${slideOut} 550ms cubic-bezier(0.22, 1, 0.36, 1)`\n    }\n  },\n  variants: {\n    size: {\n      xs: { width: '380px' },\n      sm: { width: '480px' },\n      md: { width: '600px' },\n      lg: { width: '800px' },\n      xl: { width: '1100px' },\n      fullscreen: {\n        width: '100vw',\n        height: '100vh',\n        maxWidth: '100vw',\n        maxHeight: '100vh',\n        borderRadius: 'unset',\n        '@supports (height: 100svh)': {\n          height: '100svh',\n          maxHeight: '100svh'\n        }\n      }\n    }\n  }\n})\n\ntype DialogContentProps = React.ComponentProps<typeof StyledDialogContent> & {\n  closeDialogText?: string\n  showCloseButton?: boolean\n}\n\nexport const DialogContent = ({\n  size = 'sm',\n  children,\n  closeDialogText = 'Close dialog',\n  showCloseButton = true,\n  ...remainingProps\n}: DialogContentProps) => (\n  <Portal>\n    <StyledDialogOverlay id={modalOverlayId}>\n      {React.Children.map(\n        children,\n        (child?: React.ReactElement) =>\n          child?.type === DialogBackground && child\n      )}\n      <StyledDialogContent\n        size={size}\n        aria-label=\"Dialog\"\n        onPointerDownOutside={(event) => {\n          const element = event.target as HTMLElement\n          if (element?.id !== modalOverlayId) {\n            event.preventDefault()\n          }\n        }}\n        {...remainingProps}\n      >\n        {showCloseButton && (\n          <ActionIcon\n            as={Close}\n            css={{ position: 'absolute', right: '$4', top: '$4', size: '$5' }}\n            label={closeDialogText}\n            hasTooltip={false}\n            size=\"md\"\n            theme=\"neutral\"\n          >\n            <Icon is={CloseIcon} />\n          </ActionIcon>\n        )}\n        {React.Children.map(\n          children,\n          (child?: React.ReactElement) =>\n            child?.type !== DialogBackground && child\n        )}\n      </StyledDialogContent>\n    </StyledDialogOverlay>\n  </Portal>\n)\n"],"names":["contentOnScreen","contentOffScreen","modalOverlayId","slideIn","keyframes","slideOut","StyledDialogOverlay","styled","Overlay","backdropOverlay","StyledDialogContent","Content","DIALOG_Z_INDEX","DialogContent","size","children","closeDialogText","showCloseButton","remainingProps","React","Portal","child","DialogBackground","event","element","ActionIcon","Close","Icon","CloseIcon"],"mappings":"ufAYA,MAAMA,EAAkB,6BAClBC,EAAmB,6BACnBC,EAAiB,gBAEjBC,EAAUC,EAAU,CACxB,KAAM,CAAE,UAAWH,CAAiB,EACpC,OAAQ,CAAE,UAAWD,CAAgB,CACvC,CAAC,EACKK,EAAWD,EAAU,CACzB,KAAM,CAAE,UAAWJ,CAAgB,EACnC,OAAQ,CAAE,UAAWC,CAAiB,CACxC,CAAC,EAEKK,EAAsBC,EAAOC,EAASC,CAAe,EAErDC,EAAsBH,EAAOI,EAAS,CAC1C,GAAI,QACJ,aAAc,KACd,UAAW,KACX,UAAW,aACX,KAAM,MACN,SAAU,OACV,UAAW,OACX,UAAW,OACX,EAAG,KACH,SAAU,QACV,IAAK,MACL,UAAWX,EACX,OAAQY,EACR,UAAW,CACT,QAAS,MACX,EACA,eAAgB,CACd,uBAAwB,CACtB,UAAW,GAAGT,wCAChB,EACA,yBAA0B,CACxB,UAAW,GAAGE,wCAChB,CACF,EACA,SAAU,CACR,KAAM,CACJ,GAAI,CAAE,MAAO,OAAQ,EACrB,GAAI,CAAE,MAAO,OAAQ,EACrB,GAAI,CAAE,MAAO,OAAQ,EACrB,GAAI,CAAE,MAAO,OAAQ,EACrB,GAAI,CAAE,MAAO,QAAS,EACtB,WAAY,CACV,MAAO,QACP,OAAQ,QACR,SAAU,QACV,UAAW,QACX,aAAc,QACd,6BAA8B,CAC5B,OAAQ,SACR,UAAW,QACb,CACF,CACF,CACF,CACF,CAAC,EAOYQ,EAAgB,CAAC,CAC5B,KAAAC,EAAO,KACP,SAAAC,EACA,gBAAAC,EAAkB,eAClB,gBAAAC,EAAkB,MACfC,CACL,IACEC,EAAA,cAACC,EAAA,KACCD,EAAA,cAACb,EAAA,CAAoB,GAAIJ,CACtBiB,EAAAA,EAAM,SAAS,IACdJ,EACCM,IACCA,GAAA,KAAAA,OAAAA,EAAO,QAASC,GAAoBD,CACxC,EACAF,EAAA,cAACT,EAAA,CACC,KAAMI,EACN,aAAW,SACX,qBAAuBS,GAAU,CAC/B,MAAMC,EAAUD,EAAM,QAClBC,GAAA,KAAAA,OAAAA,EAAS,MAAOtB,GAClBqB,EAAM,eAAA,CAEV,EACC,GAAGL,CAEHD,EAAAA,GACCE,EAAA,cAACM,EAAA,CACC,GAAIC,EACJ,IAAK,CAAE,SAAU,WAAY,MAAO,KAAM,IAAK,KAAM,KAAM,IAAK,EAChE,MAAOV,EACP,WAAY,GACZ,KAAK,KACL,MAAM,SAENG,EAAAA,EAAA,cAACQ,EAAA,CAAK,GAAIC,CAAAA,CAAW,CACvB,EAEDT,EAAM,SAAS,IACdJ,EACCM,IACCA,GAAA,KAAA,OAAAA,EAAO,QAASC,GAAoBD,CACxC,CACF,CACF,CACF"}
+{"version":3,"file":"DialogContent.js","sources":["../../../src/components/dialog/DialogContent.tsx"],"sourcesContent":["import { Close as CloseIcon } from '@atom-learning/icons'\nimport { Close, Content, Overlay, Portal } from '@radix-ui/react-dialog'\nimport * as React from 'react'\n\nimport { DIALOG_Z_INDEX } from '~/constants/zIndices'\nimport { keyframes, styled } from '~/stitches'\nimport { backdropOverlay } from '~/utilities/style/backdrop-overlay'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport { DialogBackground } from './DialogBackground'\n\nconst contentOnScreen = 'translate3d(-50%, -50%, 0)'\nconst contentOffScreen = 'translate3d(-50%, 50vh, 0)'\nconst modalOverlayId = 'modal_overlay'\n\nconst slideIn = keyframes({\n  '0%': { transform: contentOffScreen },\n  '100%': { transform: contentOnScreen }\n})\nconst slideOut = keyframes({\n  '0%': { transform: contentOnScreen },\n  '100%': { transform: contentOffScreen }\n})\n\nconst StyledDialogOverlay = styled(Overlay, backdropOverlay)\n\nconst sizeReset = {\n  width: 'auto',\n  height: 'auto',\n  maxWidth: 'auto',\n  maxHeight: 'auto',\n  '@supports (height: 100svh)': {\n    height: 'auto',\n    maxHeight: 'auto'\n  }\n}\nconst StyledDialogContent = styled(Content, {\n  bg: 'white',\n  boxShadow: '$3',\n  boxSizing: 'border-box',\n  left: '50%',\n  maxWidth: '90vw',\n  maxHeight: '90vh',\n  overflowY: 'auto',\n  p: '$5',\n  position: 'fixed',\n  top: '50%',\n  transform: contentOnScreen,\n  zIndex: DIALOG_Z_INDEX,\n  '&:focus': {\n    outline: 'none'\n  },\n  '@allowMotion': {\n    '&[data-state=\"open\"]': {\n      animation: `${slideIn} 550ms cubic-bezier(0.22, 1, 0.36, 1)`\n    },\n    '&[data-state=\"closed\"]': {\n      animation: `${slideOut} 550ms cubic-bezier(0.22, 1, 0.36, 1)`\n    }\n  },\n  variants: {\n    size: {\n      xs: {\n        ...sizeReset,\n        borderRadius: '$1',\n        width: '380px'\n      },\n      sm: {\n        ...sizeReset,\n        borderRadius: '$1',\n        width: '480px'\n      },\n      md: {\n        ...sizeReset,\n        borderRadius: '$1',\n        width: '600px'\n      },\n      lg: {\n        ...sizeReset,\n        borderRadius: '$1',\n        width: '800px'\n      },\n      xl: {\n        ...sizeReset,\n        borderRadius: '$1',\n        width: '1100px'\n      },\n      fullscreen: {\n        width: '100vw',\n        height: '100vh',\n        maxWidth: '100vw',\n        maxHeight: '100vh',\n        '@supports (height: 100svh)': {\n          height: '100svh',\n          maxHeight: '100svh'\n        }\n      }\n    }\n  }\n})\n\ntype DialogContentProps = React.ComponentProps<typeof StyledDialogContent> & {\n  closeDialogText?: string\n  showCloseButton?: boolean\n}\n\nexport const DialogContent = ({\n  size = 'sm',\n  children,\n  closeDialogText = 'Close dialog',\n  showCloseButton = true,\n  ...remainingProps\n}: DialogContentProps) => (\n  <Portal>\n    <StyledDialogOverlay id={modalOverlayId}>\n      {React.Children.map(\n        children,\n        (child?: React.ReactElement) =>\n          child?.type === DialogBackground && child\n      )}\n      <StyledDialogContent\n        size={size}\n        aria-label=\"Dialog\"\n        onPointerDownOutside={(event) => {\n          const element = event.target as HTMLElement\n          if (element?.id !== modalOverlayId) {\n            event.preventDefault()\n          }\n        }}\n        {...remainingProps}\n      >\n        {showCloseButton && (\n          <ActionIcon\n            as={Close}\n            css={{ position: 'absolute', right: '$4', top: '$4', size: '$5' }}\n            label={closeDialogText}\n            hasTooltip={false}\n            size=\"md\"\n            theme=\"neutral\"\n          >\n            <Icon is={CloseIcon} />\n          </ActionIcon>\n        )}\n        {React.Children.map(\n          children,\n          (child?: React.ReactElement) =>\n            child?.type !== DialogBackground && child\n        )}\n      </StyledDialogContent>\n    </StyledDialogOverlay>\n  </Portal>\n)\n"],"names":["contentOnScreen","contentOffScreen","modalOverlayId","slideIn","keyframes","slideOut","StyledDialogOverlay","styled","Overlay","backdropOverlay","sizeReset","StyledDialogContent","Content","DIALOG_Z_INDEX","DialogContent","size","children","closeDialogText","showCloseButton","remainingProps","React","Portal","child","DialogBackground","event","element","ActionIcon","Close","Icon","CloseIcon"],"mappings":"ufAYA,MAAMA,EAAkB,6BAClBC,EAAmB,6BACnBC,EAAiB,gBAEjBC,EAAUC,EAAU,CACxB,KAAM,CAAE,UAAWH,CAAiB,EACpC,OAAQ,CAAE,UAAWD,CAAgB,CACvC,CAAC,EACKK,EAAWD,EAAU,CACzB,KAAM,CAAE,UAAWJ,CAAgB,EACnC,OAAQ,CAAE,UAAWC,CAAiB,CACxC,CAAC,EAEKK,EAAsBC,EAAOC,EAASC,CAAe,EAErDC,EAAY,CAChB,MAAO,OACP,OAAQ,OACR,SAAU,OACV,UAAW,OACX,6BAA8B,CAC5B,OAAQ,OACR,UAAW,MACb,CACF,EACMC,EAAsBJ,EAAOK,EAAS,CAC1C,GAAI,QACJ,UAAW,KACX,UAAW,aACX,KAAM,MACN,SAAU,OACV,UAAW,OACX,UAAW,OACX,EAAG,KACH,SAAU,QACV,IAAK,MACL,UAAWZ,EACX,OAAQa,EACR,UAAW,CACT,QAAS,MACX,EACA,eAAgB,CACd,uBAAwB,CACtB,UAAW,GAAGV,wCAChB,EACA,yBAA0B,CACxB,UAAW,GAAGE,wCAChB,CACF,EACA,SAAU,CACR,KAAM,CACJ,GAAI,CACF,GAAGK,EACH,aAAc,KACd,MAAO,OACT,EACA,GAAI,CACF,GAAGA,EACH,aAAc,KACd,MAAO,OACT,EACA,GAAI,CACF,GAAGA,EACH,aAAc,KACd,MAAO,OACT,EACA,GAAI,CACF,GAAGA,EACH,aAAc,KACd,MAAO,OACT,EACA,GAAI,CACF,GAAGA,EACH,aAAc,KACd,MAAO,QACT,EACA,WAAY,CACV,MAAO,QACP,OAAQ,QACR,SAAU,QACV,UAAW,QACX,6BAA8B,CAC5B,OAAQ,SACR,UAAW,QACb,CACF,CACF,CACF,CACF,CAAC,EAOYI,EAAgB,CAAC,CAC5B,KAAAC,EAAO,KACP,SAAAC,EACA,gBAAAC,EAAkB,eAClB,gBAAAC,EAAkB,MACfC,CACL,IACEC,EAAA,cAACC,EAAA,KACCD,EAAA,cAACd,EAAA,CAAoB,GAAIJ,GACtBkB,EAAM,SAAS,IACdJ,EACCM,IACCA,GAAA,KAAA,OAAAA,EAAO,QAASC,GAAoBD,CACxC,EACAF,EAAA,cAACT,EAAA,CACC,KAAMI,EACN,aAAW,SACX,qBAAuBS,GAAU,CAC/B,MAAMC,EAAUD,EAAM,QAClBC,GAAA,KAAAA,OAAAA,EAAS,MAAOvB,GAClBsB,EAAM,eAEV,CAAA,EACC,GAAGL,CAAAA,EAEHD,GACCE,EAAA,cAACM,EAAA,CACC,GAAIC,EACJ,IAAK,CAAE,SAAU,WAAY,MAAO,KAAM,IAAK,KAAM,KAAM,IAAK,EAChE,MAAOV,EACP,WAAY,GACZ,KAAK,KACL,MAAM,SAENG,EAAAA,EAAA,cAACQ,EAAA,CAAK,GAAIC,CAAAA,CAAW,CACvB,EAEDT,EAAM,SAAS,IACdJ,EACCM,IACCA,GAAA,YAAAA,EAAO,QAASC,GAAoBD,CACxC,CACF,CACF,CACF"}

package/dist/components/input/Input.js

@@ -1,2 +1,2 @@
-import*as r from"react";import{styled as m}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import"../../utilities/style/keyframe-animations.js";import{overrideStitchesVariantValue as l}from"../../utilities/override-stitches-variant-value/overrideStitchesVariantValue.js";import{disabledStyle as c}from"../../utilities/style/disabledStyle.js";import{Flex as b}from"../flex/Flex.js";import{Text as g}from"../text/Text.js";const s=m(b,{background:"white",color:"$grey1000",border:"1px solid $grey800",borderRadius:"$0",transition:"background 100ms ease-out, borderColor 100ms ease-out",width:"100%","&:focus-within":{borderColor:"$blue800"},variants:{size:{sm:{height:"$3"},md:{height:"$4"},lg:{height:"$5"},xl:{height:"$6"}},disabled:{true:c},state:{error:{borderColor:"$danger"}}}});s.displayName="InputBackground";const h=m.withConfig({shouldForwardStitchesProp:e=>["as"].includes(e)})(g,{appearance:"none",border:"none",background:"none",backgroundImage:"none",backgroundColor:"transparent",boxShadow:"none",boxSizing:"border-box","&:focus":{outline:"none"},px:"$3",size:"100%"}),f={sm:"sm",md:"md",lg:"md",xl:"lg"},a=r.forwardRef(({type:e="text",css:d,size:o,...t},n)=>{const i=r.useMemo(()=>l(o,u=>f[u]),[o]);return r.createElement(h,{ref:n,as:"input",type:e==="number"?"text":e,inputMode:e==="number"?"numeric":void 0,pattern:e==="number"?"[0-9]*":void 0,size:i,...t})});a.displayName="InputText";const p=r.forwardRef(({size:e="md",state:d,disabled:o,css:t,...n},i)=>r.createElement(s,{size:e,disabled:o,state:d,css:t},r.createElement(a,{size:e,ref:i,disabled:o,...n})));p.displayName="Input";export{p as Input,s as InputBackground,a as InputText};
+import*as r from"react";import{styled as l}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import"../../utilities/style/keyframe-animations.js";import{overrideStitchesVariantValue as u}from"../../utilities/override-stitches-variant-value/overrideStitchesVariantValue.js";import{disabledStyle as c}from"../../utilities/style/disabledStyle.js";import{Flex as b}from"../flex/Flex.js";import{Text as g}from"../text/Text.js";const d=l(b,{background:"white",color:"$grey1000",border:"1px solid $grey800",borderRadius:"$0",transition:"background 100ms ease-out, borderColor 100ms ease-out",width:"100%","&:focus-within":{borderColor:"$blue800"},variants:{size:{sm:{height:"$3"},md:{height:"$4"},lg:{height:"$5"},xl:{height:"$6"}},disabled:{true:c},state:{error:{borderColor:"$danger"}}}});d.displayName="InputBackground";const h=l.withConfig({shouldForwardStitchesProp:e=>["as"].includes(e)})(g,{appearance:"none",border:"none",background:"none",backgroundImage:"none",backgroundColor:"transparent",boxShadow:"none",boxSizing:"border-box","&:focus":{outline:"none"},px:"$3",size:"100%"}),f={sm:"sm",md:"md",lg:"md",xl:"lg"},m=r.forwardRef(({type:e="text",css:s,size:o,...t},n)=>{const i=r.useMemo(()=>u(o,a=>f[a]),[o]);return r.createElement(h,{ref:n,as:"input",type:e==="number"?"text":e,inputMode:e==="number"?"numeric":void 0,pattern:e==="number"?"[0-9]*":void 0,size:i,...t})});m.displayName="InputText";const p=r.forwardRef(({className:e,size:s="md",state:o,disabled:t,css:n,...i},a)=>r.createElement(d,{size:s,disabled:t,state:o,css:n,className:e},r.createElement(m,{size:s,ref:a,disabled:t,...i})));p.displayName="Input";export{p as Input,d as InputBackground,m as InputText};
 //# sourceMappingURL=Input.js.map

package/dist/components/input/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sources":["../../../src/components/input/Input.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/stitches'\nimport { disabledStyle } from '~/utilities'\nimport { overrideStitchesVariantValue } from '~/utilities/override-stitches-variant-value/overrideStitchesVariantValue'\n\nimport { Flex } from '../flex'\nimport { Text } from '../text'\n\nexport const InputBackground = styled(Flex, {\n  background: 'white',\n  color: '$grey1000',\n  border: '1px solid $grey800',\n  borderRadius: '$0',\n  transition: 'background 100ms ease-out, borderColor 100ms ease-out',\n  width: '100%',\n  '&:focus-within': {\n    borderColor: '$blue800'\n  },\n  variants: {\n    size: {\n      sm: {\n        height: '$3'\n      },\n      md: {\n        height: '$4'\n      },\n      lg: {\n        height: '$5'\n      },\n      xl: {\n        height: '$6'\n      }\n    },\n    disabled: {\n      true: disabledStyle\n    },\n    state: {\n      error: {\n        borderColor: '$danger'\n      }\n    }\n  }\n})\n\nInputBackground.displayName = 'InputBackground'\n\nconst StyledInputText = styled.withConfig({\n  shouldForwardStitchesProp: (propName) => ['as'].includes(propName)\n})(Text as unknown as 'input', {\n  // unsets\n  appearance: 'none',\n  border: 'none',\n  background: 'none',\n  backgroundImage: 'none',\n  backgroundColor: 'transparent',\n  boxShadow: 'none', // prevent default iOS default styling\n  boxSizing: 'border-box',\n  '&:focus': {\n    outline: 'none'\n  },\n  //\n  px: '$3',\n  size: '100%'\n})\n\nexport type InputTextProps = Omit<\n  React.ComponentProps<typeof StyledInputText>,\n  'size' | 'type' | 'as'\n> & {\n  size: React.ComponentProps<typeof Text>['size']\n  // override default 'type' property to prevent Input from being used to render\n  // checkboxes, radios etc — we have dedicated components for them\n  type?: 'text' | 'number' | 'email' | 'password' | 'tel' | 'url' | 'search'\n  as?: never\n}\n\nconst toTextSize = {\n  sm: 'sm',\n  md: 'md',\n  lg: 'md',\n  xl: 'lg'\n}\n\nexport const InputText: React.ForwardRefExoticComponent<InputTextProps> =\n  React.forwardRef(({ type = 'text', css, size, ...rest }, ref) => {\n    const textSize = React.useMemo(\n      () => overrideStitchesVariantValue(size, (s) => toTextSize[s]),\n      [size]\n    )\n\n    return (\n      <StyledInputText\n        ref={ref}\n        as=\"input\"\n        type={type === 'number' ? 'text' : type}\n        inputMode={type === 'number' ? 'numeric' : undefined}\n        pattern={type === 'number' ? '[0-9]*' : undefined}\n        size={textSize}\n        {...rest}\n      />\n    )\n  })\n\nInputText.displayName = 'InputText'\n\ntype InputBackgroundProps = React.ComponentProps<typeof InputBackground>\nexport type InputProps = Omit<\n  React.ComponentProps<typeof InputText>,\n  'size' | 'state'\n> & {\n  size?: InputBackgroundProps['size']\n  state?: InputBackgroundProps['state']\n}\n\nexport const Input: React.ForwardRefExoticComponent<InputProps> =\n  React.forwardRef(({ size = 'md', state, disabled, css, ...rest }, ref) => {\n    return (\n      <InputBackground size={size} disabled={disabled} state={state} css={css}>\n        <InputText size={size} ref={ref} disabled={disabled} {...rest} />\n      </InputBackground>\n    )\n  })\n\nInput.displayName = 'Input'\n"],"names":["InputBackground","styled","Flex","disabledStyle","StyledInputText","propName","Text","toTextSize","InputText","React","type","css","size","rest","ref","textSize","overrideStitchesVariantValue","s","Input","state","disabled"],"mappings":"+gBASO,MAAMA,EAAkBC,EAAOC,EAAM,CAC1C,WAAY,QACZ,MAAO,YACP,OAAQ,qBACR,aAAc,KACd,WAAY,wDACZ,MAAO,OACP,iBAAkB,CAChB,YAAa,UACf,EACA,SAAU,CACR,KAAM,CACJ,GAAI,CACF,OAAQ,IACV,EACA,GAAI,CACF,OAAQ,IACV,EACA,GAAI,CACF,OAAQ,IACV,EACA,GAAI,CACF,OAAQ,IACV,CACF,EACA,SAAU,CACR,KAAMC,CACR,EACA,MAAO,CACL,MAAO,CACL,YAAa,SACf,CACF,CACF,CACF,CAAC,EAEDH,EAAgB,YAAc,kBAE9B,MAAMI,EAAkBH,EAAO,WAAW,CACxC,0BAA4BI,GAAa,CAAC,IAAI,EAAE,SAASA,CAAQ,CACnE,CAAC,EAAEC,EAA4B,CAE7B,WAAY,OACZ,OAAQ,OACR,WAAY,OACZ,gBAAiB,OACjB,gBAAiB,cACjB,UAAW,OACX,UAAW,aACX,UAAW,CACT,QAAS,MACX,EAEA,GAAI,KACJ,KAAM,MACR,CAAC,EAaKC,EAAa,CACjB,GAAI,KACJ,GAAI,KACJ,GAAI,KACJ,GAAI,IACN,EAEaC,EACXC,EAAM,WAAW,CAAC,CAAE,KAAAC,EAAO,OAAQ,IAAAC,EAAK,KAAAC,KAASC,CAAK,EAAGC,IAAQ,CAC/D,MAAMC,EAAWN,EAAM,QACrB,IAAMO,EAA6BJ,EAAOK,GAAMV,EAAWU,EAAE,EAC7D,CAACL,CAAI,CACP,EAEA,OACEH,EAAA,cAACL,EAAA,CACC,IAAKU,EACL,GAAG,QACH,KAAMJ,IAAS,SAAW,OAASA,EACnC,UAAWA,IAAS,SAAW,UAAY,OAC3C,QAASA,IAAS,SAAW,SAAW,OACxC,KAAMK,EACL,GAAGF,CAAAA,CACN,CAEJ,CAAC,EAEHL,EAAU,YAAc,YAWX,MAAAU,EACXT,EAAM,WAAW,CAAC,CAAE,KAAAG,EAAO,KAAM,MAAAO,EAAO,SAAAC,EAAU,IAAAT,KAAQE,CAAK,EAAGC,IAE9DL,EAAA,cAACT,EAAgB,CAAA,KAAMY,EAAM,SAAUQ,EAAU,MAAOD,EAAO,IAAKR,CAClEF,EAAAA,EAAA,cAACD,EAAA,CAAU,KAAMI,EAAM,IAAKE,EAAK,SAAUM,EAAW,GAAGP,CAAAA,CAAM,CACjE,CAEH,EAEHK,EAAM,YAAc"}
+{"version":3,"file":"Input.js","sources":["../../../src/components/input/Input.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/stitches'\nimport { disabledStyle } from '~/utilities'\nimport { overrideStitchesVariantValue } from '~/utilities/override-stitches-variant-value/overrideStitchesVariantValue'\n\nimport { Flex } from '../flex'\nimport { Text } from '../text'\n\nexport const InputBackground = styled(Flex, {\n  background: 'white',\n  color: '$grey1000',\n  border: '1px solid $grey800',\n  borderRadius: '$0',\n  transition: 'background 100ms ease-out, borderColor 100ms ease-out',\n  width: '100%',\n  '&:focus-within': {\n    borderColor: '$blue800'\n  },\n  variants: {\n    size: {\n      sm: {\n        height: '$3'\n      },\n      md: {\n        height: '$4'\n      },\n      lg: {\n        height: '$5'\n      },\n      xl: {\n        height: '$6'\n      }\n    },\n    disabled: {\n      true: disabledStyle\n    },\n    state: {\n      error: {\n        borderColor: '$danger'\n      }\n    }\n  }\n})\n\nInputBackground.displayName = 'InputBackground'\n\nconst StyledInputText = styled.withConfig({\n  shouldForwardStitchesProp: (propName) => ['as'].includes(propName)\n})(Text as unknown as 'input', {\n  // unsets\n  appearance: 'none',\n  border: 'none',\n  background: 'none',\n  backgroundImage: 'none',\n  backgroundColor: 'transparent',\n  boxShadow: 'none', // prevent default iOS default styling\n  boxSizing: 'border-box',\n  '&:focus': {\n    outline: 'none'\n  },\n  //\n  px: '$3',\n  size: '100%'\n})\n\nexport type InputTextProps = Omit<\n  React.ComponentProps<typeof StyledInputText>,\n  'size' | 'type' | 'as'\n> & {\n  size: React.ComponentProps<typeof Text>['size']\n  // override default 'type' property to prevent Input from being used to render\n  // checkboxes, radios etc — we have dedicated components for them\n  type?: 'text' | 'number' | 'email' | 'password' | 'tel' | 'url' | 'search'\n  as?: never\n}\n\nconst toTextSize = {\n  sm: 'sm',\n  md: 'md',\n  lg: 'md',\n  xl: 'lg'\n}\n\nexport const InputText: React.ForwardRefExoticComponent<InputTextProps> =\n  React.forwardRef(({ type = 'text', css, size, ...rest }, ref) => {\n    const textSize = React.useMemo(\n      () => overrideStitchesVariantValue(size, (s) => toTextSize[s]),\n      [size]\n    )\n\n    return (\n      <StyledInputText\n        ref={ref}\n        as=\"input\"\n        type={type === 'number' ? 'text' : type}\n        inputMode={type === 'number' ? 'numeric' : undefined}\n        pattern={type === 'number' ? '[0-9]*' : undefined}\n        size={textSize}\n        {...rest}\n      />\n    )\n  })\n\nInputText.displayName = 'InputText'\n\ntype InputBackgroundProps = React.ComponentProps<typeof InputBackground>\nexport type InputProps = Omit<\n  React.ComponentProps<typeof InputText>,\n  'size' | 'state'\n> & {\n  size?: InputBackgroundProps['size']\n  state?: InputBackgroundProps['state']\n}\n\nexport const Input: React.ForwardRefExoticComponent<InputProps> =\n  React.forwardRef(\n    ({ className, size = 'md', state, disabled, css, ...rest }, ref) => {\n      return (\n        <InputBackground\n          size={size}\n          disabled={disabled}\n          state={state}\n          css={css}\n          className={className}\n        >\n          <InputText size={size} ref={ref} disabled={disabled} {...rest} />\n        </InputBackground>\n      )\n    }\n  )\n\nInput.displayName = 'Input'\n"],"names":["InputBackground","styled","Flex","disabledStyle","StyledInputText","propName","Text","toTextSize","InputText","React","type","css","size","rest","ref","textSize","overrideStitchesVariantValue","s","Input","className","state","disabled"],"mappings":"+gBASa,MAAAA,EAAkBC,EAAOC,EAAM,CAC1C,WAAY,QACZ,MAAO,YACP,OAAQ,qBACR,aAAc,KACd,WAAY,wDACZ,MAAO,OACP,iBAAkB,CAChB,YAAa,UACf,EACA,SAAU,CACR,KAAM,CACJ,GAAI,CACF,OAAQ,IACV,EACA,GAAI,CACF,OAAQ,IACV,EACA,GAAI,CACF,OAAQ,IACV,EACA,GAAI,CACF,OAAQ,IACV,CACF,EACA,SAAU,CACR,KAAMC,CACR,EACA,MAAO,CACL,MAAO,CACL,YAAa,SACf,CACF,CACF,CACF,CAAC,EAEDH,EAAgB,YAAc,kBAE9B,MAAMI,EAAkBH,EAAO,WAAW,CACxC,0BAA4BI,GAAa,CAAC,IAAI,EAAE,SAASA,CAAQ,CACnE,CAAC,EAAEC,EAA4B,CAE7B,WAAY,OACZ,OAAQ,OACR,WAAY,OACZ,gBAAiB,OACjB,gBAAiB,cACjB,UAAW,OACX,UAAW,aACX,UAAW,CACT,QAAS,MACX,EAEA,GAAI,KACJ,KAAM,MACR,CAAC,EAaKC,EAAa,CACjB,GAAI,KACJ,GAAI,KACJ,GAAI,KACJ,GAAI,IACN,EAEaC,EACXC,EAAM,WAAW,CAAC,CAAE,KAAAC,EAAO,OAAQ,IAAAC,EAAK,KAAAC,KAASC,CAAK,EAAGC,IAAQ,CAC/D,MAAMC,EAAWN,EAAM,QACrB,IAAMO,EAA6BJ,EAAOK,GAAMV,EAAWU,EAAE,EAC7D,CAACL,CAAI,CACP,EAEA,OACEH,EAAA,cAACL,EAAA,CACC,IAAKU,EACL,GAAG,QACH,KAAMJ,IAAS,SAAW,OAASA,EACnC,UAAWA,IAAS,SAAW,UAAY,OAC3C,QAASA,IAAS,SAAW,SAAW,OACxC,KAAMK,EACL,GAAGF,CACN,CAAA,CAEJ,CAAC,EAEHL,EAAU,YAAc,YAWjB,MAAMU,EACXT,EAAM,WACJ,CAAC,CAAE,UAAAU,EAAW,KAAAP,EAAO,KAAM,MAAAQ,EAAO,SAAAC,EAAU,IAAAV,KAAQE,CAAK,EAAGC,IAExDL,EAAA,cAACT,EAAA,CACC,KAAMY,EACN,SAAUS,EACV,MAAOD,EACP,IAAKT,EACL,UAAWQ,CAAAA,EAEXV,EAAA,cAACD,EAAU,CAAA,KAAMI,EAAM,IAAKE,EAAK,SAAUO,EAAW,GAAGR,CAAM,CAAA,CACjE,CAGN,EAEFK,EAAM,YAAc"}

package/dist/components/navigation-menu-vertical/NavigationMenuVertical.styles.d.ts

@@ -17,11 +17,11 @@ export declare const navigationMenuVerticalItemStyles: {
     '&[data-state=open]': {
         '--navigation-menu-vertical-item-font-weight': number;
     };
-    '&[data-disabled]': {
+    '&[disabled]': {
         opacity: number;
         cursor: string;
     };
-    '&:not([data-disabled])': {
+    '&:not([disabled])': {
         '&:hover': {
             bg: string;
         };

package/dist/components/navigation-menu-vertical/NavigationMenuVertical.styles.js

@@ -1,2 +1,2 @@
-import"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import{focusVisibleStyleBlock as t}from"../../utilities/style/focus-visible-style-block.js";import"../../utilities/style/keyframe-animations.js";import{resetButtonStyles as e,resetLinkStyles as i}from"../../utilities/style/reset.js";const o={...e,...i,cursor:"pointer",borderRadius:"$2",display:"flex",alignItems:"center",p:"$2",pl:"var(--navigation-menu-vertical-item-pl)",width:"100%",color:"$text",bg:"$background","--navigation-menu-vertical-item-font-weight":400,"&[data-active]":{bg:"$backgroundSelected",color:"$textSelected","--navigation-menu-vertical-item-font-weight":600},"&[data-state=open]":{"--navigation-menu-vertical-item-font-weight":600},"&[data-disabled]":{opacity:.3,cursor:"not-allowed"},"&:not([data-disabled])":{"&:hover":{bg:"$backgroundHover"},"&:active":{bg:"$backgroundActive"},"&:focus-visible":t()},variants:{size:{md:{minHeight:"$4"},lg:{minHeight:"$5"}}}};export{o as navigationMenuVerticalItemStyles};
+import"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import{focusVisibleStyleBlock as t}from"../../utilities/style/focus-visible-style-block.js";import"../../utilities/style/keyframe-animations.js";import{resetButtonStyles as e,resetLinkStyles as i}from"../../utilities/style/reset.js";const o={...e,...i,cursor:"pointer",borderRadius:"$2",display:"flex",alignItems:"center",p:"$2",pl:"var(--navigation-menu-vertical-item-pl)",width:"100%",color:"$text",bg:"$background","--navigation-menu-vertical-item-font-weight":400,"&[data-active]":{bg:"$backgroundSelected",color:"$textSelected","--navigation-menu-vertical-item-font-weight":600},"&[data-state=open]":{"--navigation-menu-vertical-item-font-weight":600},"&[disabled]":{opacity:.3,cursor:"not-allowed"},"&:not([disabled])":{"&:hover":{bg:"$backgroundHover"},"&:active":{bg:"$backgroundActive"},"&:focus-visible":t()},variants:{size:{md:{minHeight:"$4"},lg:{minHeight:"$5"}}}};export{o as navigationMenuVerticalItemStyles};
 //# sourceMappingURL=NavigationMenuVertical.styles.js.map

package/dist/components/navigation-menu-vertical/NavigationMenuVertical.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationMenuVertical.styles.js","sources":["../../../src/components/navigation-menu-vertical/NavigationMenuVertical.styles.ts"],"sourcesContent":["import { focusVisibleStyleBlock } from '~/utilities'\nimport { resetButtonStyles, resetLinkStyles } from '~/utilities/style/reset'\n\nexport const navigationMenuVerticalItemStyles = {\n  ...resetButtonStyles,\n  ...resetLinkStyles,\n  cursor: 'pointer',\n  borderRadius: '$2',\n  display: 'flex',\n  alignItems: 'center',\n  p: '$2',\n  pl: `var(--navigation-menu-vertical-item-pl)`,\n  width: '100%',\n  color: '$text',\n  bg: '$background',\n  '--navigation-menu-vertical-item-font-weight': 400,\n  '&[data-active]': {\n    bg: '$backgroundSelected',\n    color: '$textSelected',\n    '--navigation-menu-vertical-item-font-weight': 600\n  },\n  '&[data-state=open]': {\n    '--navigation-menu-vertical-item-font-weight': 600\n  },\n  '&[data-disabled]': {\n    opacity: 0.3,\n    cursor: 'not-allowed'\n  },\n  '&:not([data-disabled])': {\n    '&:hover': {\n      bg: '$backgroundHover'\n    },\n    '&:active': {\n      bg: '$backgroundActive'\n    },\n    '&:focus-visible': focusVisibleStyleBlock()\n  },\n  variants: {\n    size: {\n      md: {\n        minHeight: '$4'\n      },\n      lg: {\n        minHeight: '$5'\n      }\n    }\n  }\n}\n"],"names":["navigationMenuVerticalItemStyles","resetButtonStyles","resetLinkStyles","focusVisibleStyleBlock"],"mappings":"4YAGaA,EAAmC,CAC9C,GAAGC,EACH,GAAGC,EACH,OAAQ,UACR,aAAc,KACd,QAAS,OACT,WAAY,SACZ,EAAG,KACH,GAAI,0CACJ,MAAO,OACP,MAAO,QACP,GAAI,cACJ,8CAA+C,IAC/C,iBAAkB,CAChB,GAAI,sBACJ,MAAO,gBACP,8CAA+C,GACjD,EACA,qBAAsB,CACpB,8CAA+C,GACjD,EACA,mBAAoB,CAClB,QAAS,GACT,OAAQ,aACV,EACA,yBAA0B,CACxB,UAAW,CACT,GAAI,kBACN,EACA,WAAY,CACV,GAAI,mBACN,EACA,kBAAmBC,EAAuB,CAC5C,EACA,SAAU,CACR,KAAM,CACJ,GAAI,CACF,UAAW,IACb,EACA,GAAI,CACF,UAAW,IACb,CACF,CACF,CACF"}
+{"version":3,"file":"NavigationMenuVertical.styles.js","sources":["../../../src/components/navigation-menu-vertical/NavigationMenuVertical.styles.ts"],"sourcesContent":["import { focusVisibleStyleBlock } from '~/utilities'\nimport { resetButtonStyles, resetLinkStyles } from '~/utilities/style/reset'\n\nexport const navigationMenuVerticalItemStyles = {\n  ...resetButtonStyles,\n  ...resetLinkStyles,\n  cursor: 'pointer',\n  borderRadius: '$2',\n  display: 'flex',\n  alignItems: 'center',\n  p: '$2',\n  pl: `var(--navigation-menu-vertical-item-pl)`,\n  width: '100%',\n  color: '$text',\n  bg: '$background',\n  '--navigation-menu-vertical-item-font-weight': 400,\n  '&[data-active]': {\n    bg: '$backgroundSelected',\n    color: '$textSelected',\n    '--navigation-menu-vertical-item-font-weight': 600\n  },\n  '&[data-state=open]': {\n    '--navigation-menu-vertical-item-font-weight': 600\n  },\n  '&[disabled]': {\n    opacity: 0.3,\n    cursor: 'not-allowed'\n  },\n  '&:not([disabled])': {\n    '&:hover': {\n      bg: '$backgroundHover'\n    },\n    '&:active': {\n      bg: '$backgroundActive'\n    },\n    '&:focus-visible': focusVisibleStyleBlock()\n  },\n  variants: {\n    size: {\n      md: {\n        minHeight: '$4'\n      },\n      lg: {\n        minHeight: '$5'\n      }\n    }\n  }\n}\n"],"names":["navigationMenuVerticalItemStyles","resetButtonStyles","resetLinkStyles","focusVisibleStyleBlock"],"mappings":"4YAGaA,EAAmC,CAC9C,GAAGC,EACH,GAAGC,EACH,OAAQ,UACR,aAAc,KACd,QAAS,OACT,WAAY,SACZ,EAAG,KACH,GAAI,0CACJ,MAAO,OACP,MAAO,QACP,GAAI,cACJ,8CAA+C,IAC/C,iBAAkB,CAChB,GAAI,sBACJ,MAAO,gBACP,8CAA+C,GACjD,EACA,qBAAsB,CACpB,8CAA+C,GACjD,EACA,cAAe,CACb,QAAS,GACT,OAAQ,aACV,EACA,oBAAqB,CACnB,UAAW,CACT,GAAI,kBACN,EACA,WAAY,CACV,GAAI,mBACN,EACA,kBAAmBC,EAAuB,CAC5C,EACA,SAAU,CACR,KAAM,CACJ,GAAI,CACF,UAAW,IACb,EACA,GAAI,CACF,UAAW,IACb,CACF,CACF,CACF"}

package/dist/components/search-input/SearchInput.js

@@ -1,2 +1,2 @@
-import{Search as I,Close as $}from"@atom-learning/icons";import*as e from"react";import{ActionIcon as k}from"../action-icon/ActionIcon.js";import{Box as L}from"../box/Box.js";import{Icon as f}from"../icon/Icon.js";import{Input as x}from"../input/Input.js";import{styled as h}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import"../../utilities/style/keyframe-animations.js";import{getFieldIconSize as M}from"../../utilities/style/get-icon-size.js";import{useCallbackRef as N}from"../../utilities/hooks/useCallbackRef.js";var O=(t=>(t.SEARCH="SEARCH",t.CLEAR="CLEAR",t))(O||{});const T=h(f,{color:"$tonal300",position:"absolute",pointerEvents:"none",variants:{size:{sm:{right:"$2",size:"$1"},md:{right:10,size:20},lg:{right:10,size:20}}}}),V=h(x,{'&::-webkit-search-decoration, &::-webkit-search-cancel-button, &::-webkit-search-results-button, & input[type="search"]::-webkit-search-results-decoration':{display:"none"}}),E=e.forwardRef(({size:t="md",css:C,value:n,defaultValue:l="",onValueChange:s,clearText:b="Clear",onChange:c,...d},v)=>{const[m,R]=N(),[A,u]=e.useState(l),[g,p]=e.useState(l?"CLEAR":"SEARCH");e.useEffect(()=>{typeof n>"u"||(u(n),p(n?"CLEAR":"SEARCH"))},[n]);const S=e.useMemo(()=>M(t),[t]);e.useImperativeHandle(v,()=>m.current);const z=()=>{var r,o;const a=m.current;if(!a)return;const i=(r=Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype,"value"))==null?void 0:r.set;(o=i==null?void 0:i.call)==null||o.call(i,a,"");const H=new Event("input",{bubbles:!0});a.dispatchEvent(H),a.focus(),s==null||s("")},w=r=>{c==null||c(r);const o=r.target.value;u(o),s==null||s(o),p(o?"CLEAR":"SEARCH")},y=()=>g==="SEARCH"?e.createElement(T,{is:I,size:t,css:{size:t=="sm"?"$1":20,top:"50%",transform:"translateY(-50%)"}}):e.createElement(k,{label:b,theme:"neutral",size:S,css:{position:"absolute",top:"50%",transform:"translateY(-50%)",right:"$1"},onClick:z},e.createElement(f,{is:$}));return e.createElement(L,{css:{position:"relative",height:"max-content",...C}},e.createElement(V,{ref:R,size:t,type:"search",...d,value:A,onChange:w,css:{pr:t==="sm"?"$5":"$6"}}),y())});E.displayName="SearchInput";export{E as SearchInput};
+import{Search as H,Close as $}from"@atom-learning/icons";import*as t from"react";import{ActionIcon as k}from"../action-icon/ActionIcon.js";import{Icon as E}from"../icon/Icon.js";import{InputText as L,InputBackground as x}from"../input/Input.js";import{styled as f}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import"../../utilities/style/keyframe-animations.js";import{getFieldIconSize as T}from"../../utilities/style/get-icon-size.js";import{useCallbackRef as M}from"../../utilities/hooks/useCallbackRef.js";var N=(e=>(e.SEARCH="SEARCH",e.CLEAR="CLEAR",e))(N||{});const O=f(E,{color:"$tonal300",position:"absolute",pointerEvents:"none",variants:{size:{sm:{right:"$2",size:"$1"},md:{right:10,size:20},lg:{right:10,size:20}}}}),V=f(L,{"&::-webkit-search-decoration, &::-webkit-search-cancel-button, &::-webkit-search-results-button":{display:"none"}}),C=t.forwardRef(({size:e="md",css:h,value:n,defaultValue:i="",onValueChange:s,clearText:d="Clear",onChange:c,...b},v)=>{const[u,R]=M(),[A,m]=t.useState(i),[g,p]=t.useState(i?"CLEAR":"SEARCH");t.useEffect(()=>{typeof n>"u"||(m(n),p(n?"CLEAR":"SEARCH"))},[n]);const z=t.useMemo(()=>T(e),[e]);t.useImperativeHandle(v,()=>u.current);const S=()=>{var r,o;const a=u.current;if(!a)return;const l=(r=Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype,"value"))==null?void 0:r.set;(o=l==null?void 0:l.call)==null||o.call(l,a,"");const y=new Event("input",{bubbles:!0});a.dispatchEvent(y),a.focus(),s==null||s("")},w=r=>{c==null||c(r);const o=r.target.value;m(o),s==null||s(o),p(o?"CLEAR":"SEARCH")},I=()=>g==="SEARCH"?t.createElement(O,{is:H,size:e,css:{size:e=="sm"?"$1":20,top:"50%",transform:"translateY(-50%)"}}):t.createElement(k,{label:d,theme:"neutral",size:z,css:{position:"absolute",top:"50%",transform:"translateY(-50%)",right:"$1"},onClick:S},t.createElement(E,{is:$}));return t.createElement(x,{css:{position:"relative",...h},size:e},t.createElement(V,{ref:R,size:e,type:"search",...b,value:A,onChange:w,css:{pr:e==="sm"?"$5":"$6"}}),I())});C.displayName="SearchInput";export{C as SearchInput};
 //# sourceMappingURL=SearchInput.js.map

package/dist/components/search-input/SearchInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.js","sources":["../../../src/components/search-input/SearchInput.tsx"],"sourcesContent":["import { Close, Search } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { ActionIcon } from '~/components/action-icon'\nimport { Box } from '~/components/box/'\nimport { Icon } from '~/components/icon/'\nimport { Input } from '~/components/input/'\nimport { CSS, styled } from '~/stitches'\nimport { getFieldIconSize } from '~/utilities'\nimport { useCallbackRef } from '~/utilities/hooks/useCallbackRef'\n\nexport type SearchInputProps = React.ComponentProps<typeof Input> & {\n  size?: 'sm' | 'md' | 'lg'\n  css?: CSS\n  value?: string\n  defaultValue?: string\n  onValueChange?: (newValue: string) => void\n  clearText?: string\n  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void\n}\n\nenum INPUT_ICON {\n  SEARCH = 'SEARCH',\n  CLEAR = 'CLEAR'\n}\n\nconst StyledIcon = styled(Icon, {\n  color: '$tonal300',\n  position: 'absolute',\n  pointerEvents: 'none',\n  variants: {\n    size: {\n      sm: {\n        right: '$2',\n        size: '$1'\n      },\n      md: {\n        right: 10,\n        size: 20\n      },\n      lg: {\n        right: 10,\n        size: 20\n      }\n    }\n  }\n})\n\nconst StyledSearchInput = styled(Input, {\n  '&::-webkit-search-decoration, &::-webkit-search-cancel-button, &::-webkit-search-results-button, & input[type=\"search\"]::-webkit-search-results-decoration':\n    {\n      display: 'none'\n    }\n})\n\nexport const SearchInput: React.ForwardRefExoticComponent<SearchInputProps> =\n  React.forwardRef(\n    (\n      {\n        size = 'md',\n        css,\n        value,\n        defaultValue = '',\n        onValueChange,\n        clearText = 'Clear',\n        onChange,\n        ...remainingProps\n      },\n      ref\n    ) => {\n      const [inputElRef, setInputElRef] = useCallbackRef()\n      const [innerValue, setInnerValue] = React.useState(defaultValue)\n      const [activeIcon, setActiveIcon] = React.useState<INPUT_ICON>(\n        defaultValue ? INPUT_ICON.CLEAR : INPUT_ICON.SEARCH\n      )\n      React.useEffect(() => {\n        if (typeof value === 'undefined') return\n        setInnerValue(value)\n        setActiveIcon(value ? INPUT_ICON.CLEAR : INPUT_ICON.SEARCH)\n      }, [value])\n\n      const iconSize = React.useMemo(() => getFieldIconSize(size), [size])\n\n      React.useImperativeHandle(\n        ref,\n        () => inputElRef.current as HTMLInputElement\n      )\n\n      const handleClear = () => {\n        const inputEl = inputElRef.current\n        if (!inputEl) return\n\n        // https://stackoverflow.com/a/46012210\n        const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n          window.HTMLInputElement.prototype,\n          'value'\n        )?.set\n        nativeInputValueSetter?.call?.(inputEl, '')\n        const ev2 = new Event('input', {\n          bubbles: true\n        })\n        inputEl.dispatchEvent(ev2)\n        inputEl.focus()\n        onValueChange?.('')\n      }\n\n      const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        onChange?.(event)\n\n        const newValue = event.target.value\n        setInnerValue(newValue)\n        onValueChange?.(newValue)\n        setActiveIcon(newValue ? INPUT_ICON.CLEAR : INPUT_ICON.SEARCH)\n      }\n\n      const getIcon = () => {\n        if (activeIcon === INPUT_ICON.SEARCH)\n          return (\n            <StyledIcon\n              is={Search}\n              size={size}\n              css={{\n                size: size == 'sm' ? '$1' : 20,\n                top: '50%',\n                transform: 'translateY(-50%)'\n              }}\n            />\n          )\n\n        return (\n          <ActionIcon\n            label={clearText}\n            theme=\"neutral\"\n            size={iconSize}\n            css={{\n              position: 'absolute',\n              top: '50%',\n              transform: 'translateY(-50%)',\n              right: '$1'\n            }}\n            onClick={handleClear}\n          >\n            <Icon is={Close} />\n          </ActionIcon>\n        )\n      }\n\n      return (\n        <Box css={{ position: 'relative', height: 'max-content', ...css }}>\n          <StyledSearchInput\n            ref={setInputElRef}\n            size={size}\n            type=\"search\"\n            {...remainingProps}\n            value={innerValue}\n            onChange={handleOnChange}\n            css={{ pr: size === 'sm' ? '$5' : '$6' }}\n          />\n          {getIcon()}\n        </Box>\n      )\n    }\n  )\n\nSearchInput.displayName = 'SearchInput'\n"],"names":["INPUT_ICON","StyledIcon","styled","Icon","StyledSearchInput","Input","SearchInput","React","size","css","value","defaultValue","onValueChange","clearText","onChange","remainingProps","ref","inputElRef","setInputElRef","useCallbackRef","innerValue","setInnerValue","activeIcon","setActiveIcon","iconSize","getFieldIconSize","handleClear","_a","_b","inputEl","nativeInputValueSetter","ev2","handleOnChange","event","newValue","getIcon","Search","ActionIcon","Close","Box"],"mappings":"snBAqBA,IAAKA,GACHA,IAAAA,EAAA,OAAS,SACTA,EAAA,MAAQ,QAFLA,IAAAA,GAAA,CAAA,CAKL,EAAA,MAAMC,EAAaC,EAAOC,EAAM,CAC9B,MAAO,YACP,SAAU,WACV,cAAe,OACf,SAAU,CACR,KAAM,CACJ,GAAI,CACF,MAAO,KACP,KAAM,IACR,EACA,GAAI,CACF,MAAO,GACP,KAAM,EACR,EACA,GAAI,CACF,MAAO,GACP,KAAM,EACR,CACF,CACF,CACF,CAAC,EAEKC,EAAoBF,EAAOG,EAAO,CACtC,6JACE,CACE,QAAS,MACX,CACJ,CAAC,EAEYC,EACXC,EAAM,WACJ,CACE,CACE,KAAAC,EAAO,KACP,IAAAC,EACA,MAAAC,EACA,aAAAC,EAAe,GACf,cAAAC,EACA,UAAAC,EAAY,QACZ,SAAAC,KACGC,CACL,EACAC,IACG,CACH,KAAM,CAACC,EAAYC,CAAa,EAAIC,IAC9B,CAACC,EAAYC,CAAa,EAAId,EAAM,SAASI,CAAY,EACzD,CAACW,EAAYC,CAAa,EAAIhB,EAAM,SACxCI,EAAe,QAAmB,QACpC,EACAJ,EAAM,UAAU,IAAM,CAChB,OAAOG,EAAU,MACrBW,EAAcX,CAAK,EACnBa,EAAcb,EAAQ,QAAmB,QAAiB,EAC5D,EAAG,CAACA,CAAK,CAAC,EAEV,MAAMc,EAAWjB,EAAM,QAAQ,IAAMkB,EAAiBjB,CAAI,EAAG,CAACA,CAAI,CAAC,EAEnED,EAAM,oBACJS,EACA,IAAMC,EAAW,OACnB,EAEA,MAAMS,EAAc,IAAM,CAxFhC,IAAAC,EAAAC,EAyFQ,MAAMC,EAAUZ,EAAW,QAC3B,GAAI,CAACY,EAAS,OAGd,MAAMC,GAAyBH,EAAA,OAAO,yBACpC,OAAO,iBAAiB,UACxB,OACF,IAH+B,YAAAA,EAG5B,KACHC,EAAAE,GAAA,KAAA,OAAAA,EAAwB,OAAxB,MAAAF,EAAA,KAAAE,EAA+BD,EAAS,EACxC,EAAA,MAAME,EAAM,IAAI,MAAM,QAAS,CAC7B,QAAS,EACX,CAAC,EACDF,EAAQ,cAAcE,CAAG,EACzBF,EAAQ,QACRjB,GAAA,MAAAA,EAAgB,EAClB,CAAA,EAEMoB,EAAkBC,GAA+C,CACrEnB,GAAA,MAAAA,EAAWmB,GAEX,MAAMC,EAAWD,EAAM,OAAO,MAC9BZ,EAAca,CAAQ,EACtBtB,GAAA,MAAAA,EAAgBsB,GAChBX,EAAcW,EAAW,QAAmB,QAAiB,CAC/D,EAEMC,EAAU,IACVb,IAAe,SAEff,EAAA,cAACN,EAAA,CACC,GAAImC,EACJ,KAAM5B,EACN,IAAK,CACH,KAAMA,GAAQ,KAAO,KAAO,GAC5B,IAAK,MACL,UAAW,kBACb,CACF,CAAA,EAIFD,EAAA,cAAC8B,EAAA,CACC,MAAOxB,EACP,MAAM,UACN,KAAMW,EACN,IAAK,CACH,SAAU,WACV,IAAK,MACL,UAAW,mBACX,MAAO,IACT,EACA,QAASE,CAETnB,EAAAA,EAAA,cAACJ,EAAA,CAAK,GAAImC,CAAO,CAAA,CACnB,EAIJ,OACE/B,EAAA,cAACgC,EAAA,CAAI,IAAK,CAAE,SAAU,WAAY,OAAQ,cAAe,GAAG9B,CAAI,CAAA,EAC9DF,EAAA,cAACH,EAAA,CACC,IAAKc,EACL,KAAMV,EACN,KAAK,SACJ,GAAGO,EACJ,MAAOK,EACP,SAAUY,EACV,IAAK,CAAE,GAAIxB,IAAS,KAAO,KAAO,IAAK,CAAA,CACzC,EACC2B,EACH,CAAA,CAEJ,CACF,EAEF7B,EAAY,YAAc"}
+{"version":3,"file":"SearchInput.js","sources":["../../../src/components/search-input/SearchInput.tsx"],"sourcesContent":["import { Close, Search } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { ActionIcon } from '~/components/action-icon'\nimport { Icon } from '~/components/icon/'\nimport { Input, InputBackground, InputText } from '~/components/input/'\nimport { CSS, styled } from '~/stitches'\nimport { getFieldIconSize } from '~/utilities'\nimport { useCallbackRef } from '~/utilities/hooks/useCallbackRef'\n\nexport type SearchInputProps = React.ComponentProps<typeof Input> & {\n  size?: 'sm' | 'md' | 'lg'\n  css?: CSS\n  value?: string\n  defaultValue?: string\n  onValueChange?: (newValue: string) => void\n  clearText?: string\n  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void\n}\n\nenum INPUT_ICON {\n  SEARCH = 'SEARCH',\n  CLEAR = 'CLEAR'\n}\n\nconst StyledIcon = styled(Icon, {\n  color: '$tonal300',\n  position: 'absolute',\n  pointerEvents: 'none',\n  variants: {\n    size: {\n      sm: {\n        right: '$2',\n        size: '$1'\n      },\n      md: {\n        right: 10,\n        size: 20\n      },\n      lg: {\n        right: 10,\n        size: 20\n      }\n    }\n  }\n})\n\nconst StyledSearchInputText = styled(InputText, {\n  '&::-webkit-search-decoration, &::-webkit-search-cancel-button, &::-webkit-search-results-button':\n    {\n      display: 'none'\n    }\n})\n\nexport const SearchInput: React.ForwardRefExoticComponent<SearchInputProps> =\n  React.forwardRef(\n    (\n      {\n        size = 'md',\n        css,\n        value,\n        defaultValue = '',\n        onValueChange,\n        clearText = 'Clear',\n        onChange,\n        ...remainingProps\n      },\n      ref\n    ) => {\n      const [inputElRef, setInputElRef] = useCallbackRef()\n      const [innerValue, setInnerValue] = React.useState(defaultValue)\n      const [activeIcon, setActiveIcon] = React.useState<INPUT_ICON>(\n        defaultValue ? INPUT_ICON.CLEAR : INPUT_ICON.SEARCH\n      )\n      React.useEffect(() => {\n        if (typeof value === 'undefined') return\n        setInnerValue(value)\n        setActiveIcon(value ? INPUT_ICON.CLEAR : INPUT_ICON.SEARCH)\n      }, [value])\n\n      const iconSize = React.useMemo(() => getFieldIconSize(size), [size])\n\n      React.useImperativeHandle(\n        ref,\n        () => inputElRef.current as HTMLInputElement\n      )\n\n      const handleClear = () => {\n        const inputEl = inputElRef.current\n        if (!inputEl) return\n\n        // https://stackoverflow.com/a/46012210\n        const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n          window.HTMLInputElement.prototype,\n          'value'\n        )?.set\n        nativeInputValueSetter?.call?.(inputEl, '')\n        const ev2 = new Event('input', {\n          bubbles: true\n        })\n        inputEl.dispatchEvent(ev2)\n        inputEl.focus()\n        onValueChange?.('')\n      }\n\n      const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        onChange?.(event)\n\n        const newValue = event.target.value\n        setInnerValue(newValue)\n        onValueChange?.(newValue)\n        setActiveIcon(newValue ? INPUT_ICON.CLEAR : INPUT_ICON.SEARCH)\n      }\n\n      const getIcon = () => {\n        if (activeIcon === INPUT_ICON.SEARCH)\n          return (\n            <StyledIcon\n              is={Search}\n              size={size}\n              css={{\n                size: size == 'sm' ? '$1' : 20,\n                top: '50%',\n                transform: 'translateY(-50%)'\n              }}\n            />\n          )\n\n        return (\n          <ActionIcon\n            label={clearText}\n            theme=\"neutral\"\n            size={iconSize}\n            css={{\n              position: 'absolute',\n              top: '50%',\n              transform: 'translateY(-50%)',\n              right: '$1'\n            }}\n            onClick={handleClear}\n          >\n            <Icon is={Close} />\n          </ActionIcon>\n        )\n      }\n\n      return (\n        <InputBackground css={{ position: 'relative', ...css }} size={size}>\n          <StyledSearchInputText\n            ref={setInputElRef}\n            size={size}\n            type=\"search\"\n            {...remainingProps}\n            value={innerValue}\n            onChange={handleOnChange}\n            css={{ pr: size === 'sm' ? '$5' : '$6' }}\n          />\n          {getIcon()}\n        </InputBackground>\n      )\n    }\n  )\n\nSearchInput.displayName = 'SearchInput'\n"],"names":["INPUT_ICON","StyledIcon","styled","Icon","StyledSearchInputText","InputText","SearchInput","React","size","css","value","defaultValue","onValueChange","clearText","onChange","remainingProps","ref","inputElRef","setInputElRef","useCallbackRef","innerValue","setInnerValue","activeIcon","setActiveIcon","iconSize","getFieldIconSize","handleClear","_a","_b","inputEl","nativeInputValueSetter","ev2","handleOnChange","event","newValue","getIcon","Search","ActionIcon","Close","InputBackground"],"mappings":"2mBAoBA,IAAKA,GAAAA,IACHA,EAAA,OAAS,SACTA,EAAA,MAAQ,QAFLA,OAAA,CAAA,CAKL,EAAA,MAAMC,EAAaC,EAAOC,EAAM,CAC9B,MAAO,YACP,SAAU,WACV,cAAe,OACf,SAAU,CACR,KAAM,CACJ,GAAI,CACF,MAAO,KACP,KAAM,IACR,EACA,GAAI,CACF,MAAO,GACP,KAAM,EACR,EACA,GAAI,CACF,MAAO,GACP,KAAM,EACR,CACF,CACF,CACF,CAAC,EAEKC,EAAwBF,EAAOG,EAAW,CAC9C,kGACE,CACE,QAAS,MACX,CACJ,CAAC,EAEYC,EACXC,EAAM,WACJ,CACE,CACE,KAAAC,EAAO,KACP,IAAAC,EACA,MAAAC,EACA,aAAAC,EAAe,GACf,cAAAC,EACA,UAAAC,EAAY,QACZ,SAAAC,KACGC,CACL,EACAC,IACG,CACH,KAAM,CAACC,EAAYC,CAAa,EAAIC,IAC9B,CAACC,EAAYC,CAAa,EAAId,EAAM,SAASI,CAAY,EACzD,CAACW,EAAYC,CAAa,EAAIhB,EAAM,SACxCI,EAAe,QAAmB,QACpC,EACAJ,EAAM,UAAU,IAAM,CAChB,OAAOG,EAAU,MACrBW,EAAcX,CAAK,EACnBa,EAAcb,EAAQ,QAAmB,QAAiB,EAC5D,EAAG,CAACA,CAAK,CAAC,EAEV,MAAMc,EAAWjB,EAAM,QAAQ,IAAMkB,EAAiBjB,CAAI,EAAG,CAACA,CAAI,CAAC,EAEnED,EAAM,oBACJS,EACA,IAAMC,EAAW,OACnB,EAEA,MAAMS,EAAc,IAAM,CAvFhC,IAAAC,EAAAC,EAwFQ,MAAMC,EAAUZ,EAAW,QAC3B,GAAI,CAACY,EAAS,OAGd,MAAMC,GAAyBH,EAAA,OAAO,yBACpC,OAAO,iBAAiB,UACxB,OACF,IAH+B,KAAA,OAAAA,EAG5B,KACHC,EAAAE,GAAA,KAAAA,OAAAA,EAAwB,OAAxB,MAAAF,EAAA,KAAAE,EAA+BD,EAAS,IACxC,MAAME,EAAM,IAAI,MAAM,QAAS,CAC7B,QAAS,EACX,CAAC,EACDF,EAAQ,cAAcE,CAAG,EACzBF,EAAQ,QACRjB,GAAA,MAAAA,EAAgB,EAClB,CAAA,EAEMoB,EAAkBC,GAA+C,CACrEnB,GAAA,MAAAA,EAAWmB,GAEX,MAAMC,EAAWD,EAAM,OAAO,MAC9BZ,EAAca,CAAQ,EACtBtB,GAAA,MAAAA,EAAgBsB,GAChBX,EAAcW,EAAW,QAAmB,QAAiB,CAC/D,EAEMC,EAAU,IACVb,IAAe,SAEff,EAAA,cAACN,EAAA,CACC,GAAImC,EACJ,KAAM5B,EACN,IAAK,CACH,KAAMA,GAAQ,KAAO,KAAO,GAC5B,IAAK,MACL,UAAW,kBACb,CACF,CAAA,EAIFD,EAAA,cAAC8B,EAAA,CACC,MAAOxB,EACP,MAAM,UACN,KAAMW,EACN,IAAK,CACH,SAAU,WACV,IAAK,MACL,UAAW,mBACX,MAAO,IACT,EACA,QAASE,CAETnB,EAAAA,EAAA,cAACJ,EAAA,CAAK,GAAImC,CAAO,CAAA,CACnB,EAIJ,OACE/B,EAAA,cAACgC,EAAA,CAAgB,IAAK,CAAE,SAAU,WAAY,GAAG9B,CAAI,EAAG,KAAMD,CAAAA,EAC5DD,EAAA,cAACH,EAAA,CACC,IAAKc,EACL,KAAMV,EACN,KAAK,SACJ,GAAGO,EACJ,MAAOK,EACP,SAAUY,EACV,IAAK,CAAE,GAAIxB,IAAS,KAAO,KAAO,IAAK,CAAA,CACzC,EACC2B,EACH,CAAA,CAEJ,CACF,EAEF7B,EAAY,YAAc"}

package/dist/components/slider/Slider.js

@@ -1,2 +1,2 @@
-import{Track as $,Root as b,Range as g,Thumb as v}from"@radix-ui/react-slider";import*as e from"react";import{styled as t}from"../../stitches.js";import{CSSWrapper as y}from"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import"../../utilities/style/keyframe-animations.js";import{disabledStyle as a}from"../../utilities/style/disabledStyle.js";import{SliderSteps as S}from"./SliderSteps.js";import{SliderValue as x}from"./SliderValue.js";const o=t($,{borderRadius:"$round",flexGrow:1,position:"relative",'&[data-orientation="horizontal"]':{height:"$space$1"},'&[data-orientation="vertical"]':{width:"$space$1"}}),R=t(b,{alignItems:"center",display:"flex",position:"relative",touchAction:"none",userSelect:"none",cursor:"pointer",'&[data-orientation="horizontal"]':{height:"$1"},'&[data-orientation="vertical"]':{flexDirection:"column",width:"$1"},"&[data-disabled]":a,variants:{theme:{light:{[`${o}`]:{bg:"#fff"}},tonal:{[`${o}`]:{bg:"$tonal200"}}}}}),E=t(g,{bg:"$primary800",borderRadius:"$round",height:"100%",position:"absolute","&[data-disabled]":a}),k=t(v,{bg:"$primary900",borderRadius:"$round",display:"block",size:"$1","&:hover":{bg:"$primary1000"},"&:focus":{outline:"2px solid $primary900",outlineOffset:"2px"},"&[data-disabled]":a}),r=e.forwardRef(({value:l,defaultValue:n,min:d=0,max:m=100,theme:s="tonal",css:p,children:u,...c},f)=>{const i=l||n;return e.createElement(y,{css:p},e.createElement(R,{theme:s,defaultValue:n,value:l,min:d,max:m,ref:f,...c},e.createElement(o,null,e.createElement(E,null)),(i==null?void 0:i.length)&&i.map((w,h)=>e.createElement(k,{key:`thumb${h}`}))),u)});r.Value=x,r.Steps=S,r.displayName="Slider";export{r as Slider};
+import{Track as $,Root as b,Range as g,Thumb as v}from"@radix-ui/react-slider";import*as e from"react";import{styled as t}from"../../stitches.js";import{CSSWrapper as y}from"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import"../../utilities/style/keyframe-animations.js";import{disabledStyle as o}from"../../utilities/style/disabledStyle.js";import{SliderSteps as S}from"./SliderSteps.js";import{SliderValue as x}from"./SliderValue.js";const a=t($,{borderRadius:"$round",flexGrow:1,position:"relative",'&[data-orientation="horizontal"]':{height:"$space$1"},'&[data-orientation="vertical"]':{width:"$space$1"}}),R=t(b,{alignItems:"center",display:"flex",position:"relative",touchAction:"none",userSelect:"none",cursor:"pointer",'&[data-orientation="horizontal"]':{height:"$1"},'&[data-orientation="vertical"]':{flexDirection:"column",width:"$1"},"&[disabled]":o,variants:{theme:{light:{[`${a}`]:{bg:"#fff"}},tonal:{[`${a}`]:{bg:"$tonal200"}}}}}),E=t(g,{bg:"$primary800",borderRadius:"$round",height:"100%",position:"absolute","&[disabled]":o}),k=t(v,{bg:"$primary900",borderRadius:"$round",display:"block",size:"$1","&:hover":{bg:"$primary1000"},"&:focus":{outline:"2px solid $primary900",outlineOffset:"2px"},"&[disabled]":o}),r=e.forwardRef(({value:l,defaultValue:n,min:m=0,max:d=100,theme:s="tonal",css:p,children:u,...c},f)=>{const i=l||n;return e.createElement(y,{css:p},e.createElement(R,{theme:s,defaultValue:n,value:l,min:m,max:d,ref:f,...c},e.createElement(a,null,e.createElement(E,null)),(i==null?void 0:i.length)&&i.map((w,h)=>e.createElement(k,{key:`thumb${h}`}))),u)});r.Value=x,r.Steps=S,r.displayName="Slider";export{r as Slider};
 //# sourceMappingURL=Slider.js.map

package/dist/components/slider/Slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","sources":["../../../src/components/slider/Slider.tsx"],"sourcesContent":["import { Range, Root, Thumb, Track } from '@radix-ui/react-slider'\nimport * as React from 'react'\n\nimport { styled } from '~/stitches'\nimport { CSSWrapper, disabledStyle } from '~/utilities'\n\nimport { SliderSteps } from './SliderSteps'\nimport { SliderValue } from './SliderValue'\n\nconst StyledTrack = styled(Track, {\n  borderRadius: '$round',\n  flexGrow: 1,\n  position: 'relative',\n  '&[data-orientation=\"horizontal\"]': { height: '$space$1' },\n  '&[data-orientation=\"vertical\"]': { width: '$space$1' }\n})\n\nconst StyledSlider = styled(Root, {\n  alignItems: 'center',\n  display: 'flex',\n  position: 'relative',\n  touchAction: 'none',\n  userSelect: 'none',\n  cursor: 'pointer',\n  '&[data-orientation=\"horizontal\"]': {\n    height: '$1'\n  },\n  '&[data-orientation=\"vertical\"]': {\n    flexDirection: 'column',\n    width: '$1'\n  },\n  '&[data-disabled]': disabledStyle,\n  variants: {\n    theme: {\n      light: {\n        [`${StyledTrack}`]: { bg: '#fff' }\n      },\n      tonal: {\n        [`${StyledTrack}`]: { bg: '$tonal200' }\n      }\n    }\n  }\n})\n\nconst StyledRange = styled(Range, {\n  bg: '$primary800',\n  borderRadius: '$round',\n  height: '100%',\n  position: 'absolute',\n  '&[data-disabled]': disabledStyle\n})\n\nconst StyledThumb = styled(Thumb, {\n  bg: '$primary900',\n  borderRadius: '$round',\n  display: 'block',\n  size: '$1',\n  '&:hover': {\n    bg: '$primary1000'\n  },\n  '&:focus': {\n    outline: '2px solid $primary900',\n    outlineOffset: '2px'\n  },\n  '&[data-disabled]': disabledStyle\n})\n\nexport type SliderProps = React.ComponentProps<typeof StyledSlider>\n\ntype SliderType = React.ForwardRefExoticComponent<SliderProps> & {\n  Value: typeof SliderValue\n  Steps: typeof SliderSteps\n}\n\nexport const Slider: SliderType = React.forwardRef(\n  (\n    {\n      value,\n      defaultValue,\n      min = 0,\n      max = 100,\n      theme = 'tonal',\n      css,\n      children,\n      ...remainingProps\n    },\n    ref\n  ) => {\n    const values = value || defaultValue\n    return (\n      <CSSWrapper css={css}>\n        <StyledSlider\n          theme={theme}\n          defaultValue={defaultValue}\n          value={value}\n          min={min}\n          max={max}\n          ref={ref}\n          {...remainingProps}\n        >\n          <StyledTrack>\n            <StyledRange />\n          </StyledTrack>\n          {values?.length &&\n            values.map((_, i) => <StyledThumb key={`thumb${i}`} />)}\n        </StyledSlider>\n        {children}\n      </CSSWrapper>\n    )\n  }\n) as SliderType\n\nSlider.Value = SliderValue\nSlider.Steps = SliderSteps\n\nSlider.displayName = 'Slider'\n"],"names":["StyledTrack","styled","Track","StyledSlider","Root","disabledStyle","StyledRange","Range","StyledThumb","Thumb","Slider","React","value","defaultValue","min","max","theme","css","children","remainingProps","ref","values","CSSWrapper","_","i","SliderValue","SliderSteps"],"mappings":"ogBASA,MAAMA,EAAcC,EAAOC,EAAO,CAChC,aAAc,SACd,SAAU,EACV,SAAU,WACV,mCAAoC,CAAE,OAAQ,UAAW,EACzD,iCAAkC,CAAE,MAAO,UAAW,CACxD,CAAC,EAEKC,EAAeF,EAAOG,EAAM,CAChC,WAAY,SACZ,QAAS,OACT,SAAU,WACV,YAAa,OACb,WAAY,OACZ,OAAQ,UACR,mCAAoC,CAClC,OAAQ,IACV,EACA,iCAAkC,CAChC,cAAe,SACf,MAAO,IACT,EACA,mBAAoBC,EACpB,SAAU,CACR,MAAO,CACL,MAAO,CACL,CAAC,GAAGL,KAAgB,CAAE,GAAI,MAAO,CACnC,EACA,MAAO,CACL,CAAC,GAAGA,KAAgB,CAAE,GAAI,WAAY,CACxC,CACF,CACF,CACF,CAAC,EAEKM,EAAcL,EAAOM,EAAO,CAChC,GAAI,cACJ,aAAc,SACd,OAAQ,OACR,SAAU,WACV,mBAAoBF,CACtB,CAAC,EAEKG,EAAcP,EAAOQ,EAAO,CAChC,GAAI,cACJ,aAAc,SACd,QAAS,QACT,KAAM,KACN,UAAW,CACT,GAAI,cACN,EACA,UAAW,CACT,QAAS,wBACT,cAAe,KACjB,EACA,mBAAoBJ,CACtB,CAAC,EASYK,EAAqBC,EAAM,WACtC,CACE,CACE,MAAAC,EACA,aAAAC,EACA,IAAAC,EAAM,EACN,IAAAC,EAAM,IACN,MAAAC,EAAQ,QACR,IAAAC,EACA,SAAAC,KACGC,CACL,EACAC,IACG,CACH,MAAMC,EAAST,GAASC,EACxB,OACEF,EAAA,cAACW,EAAA,CAAW,IAAKL,CAAAA,EACfN,EAAA,cAACR,EAAA,CACC,MAAOa,EACP,aAAcH,EACd,MAAOD,EACP,IAAKE,EACL,IAAKC,EACL,IAAKK,EACJ,GAAGD,CAAAA,EAEJR,EAAA,cAACX,EAAA,KACCW,EAAA,cAACL,EAAA,IAAY,CACf,GACCe,GAAA,KAAA,OAAAA,EAAQ,SACPA,EAAO,IAAI,CAACE,EAAGC,IAAMb,EAAA,cAACH,EAAA,CAAY,IAAK,QAAQgB,GAAAA,CAAK,CAAE,CAC1D,EACCN,CACH,CAEJ,CACF,EAEAR,EAAO,MAAQe,EACff,EAAO,MAAQgB,EAEfhB,EAAO,YAAc"}
+{"version":3,"file":"Slider.js","sources":["../../../src/components/slider/Slider.tsx"],"sourcesContent":["import { Range, Root, Thumb, Track } from '@radix-ui/react-slider'\nimport * as React from 'react'\n\nimport { styled } from '~/stitches'\nimport { CSSWrapper, disabledStyle } from '~/utilities'\n\nimport { SliderSteps } from './SliderSteps'\nimport { SliderValue } from './SliderValue'\n\nconst StyledTrack = styled(Track, {\n  borderRadius: '$round',\n  flexGrow: 1,\n  position: 'relative',\n  '&[data-orientation=\"horizontal\"]': { height: '$space$1' },\n  '&[data-orientation=\"vertical\"]': { width: '$space$1' }\n})\n\nconst StyledSlider = styled(Root, {\n  alignItems: 'center',\n  display: 'flex',\n  position: 'relative',\n  touchAction: 'none',\n  userSelect: 'none',\n  cursor: 'pointer',\n  '&[data-orientation=\"horizontal\"]': {\n    height: '$1'\n  },\n  '&[data-orientation=\"vertical\"]': {\n    flexDirection: 'column',\n    width: '$1'\n  },\n  '&[disabled]': disabledStyle,\n  variants: {\n    theme: {\n      light: {\n        [`${StyledTrack}`]: { bg: '#fff' }\n      },\n      tonal: {\n        [`${StyledTrack}`]: { bg: '$tonal200' }\n      }\n    }\n  }\n})\n\nconst StyledRange = styled(Range, {\n  bg: '$primary800',\n  borderRadius: '$round',\n  height: '100%',\n  position: 'absolute',\n  '&[disabled]': disabledStyle\n})\n\nconst StyledThumb = styled(Thumb, {\n  bg: '$primary900',\n  borderRadius: '$round',\n  display: 'block',\n  size: '$1',\n  '&:hover': {\n    bg: '$primary1000'\n  },\n  '&:focus': {\n    outline: '2px solid $primary900',\n    outlineOffset: '2px'\n  },\n  '&[disabled]': disabledStyle\n})\n\nexport type SliderProps = React.ComponentProps<typeof StyledSlider>\n\ntype SliderType = React.ForwardRefExoticComponent<SliderProps> & {\n  Value: typeof SliderValue\n  Steps: typeof SliderSteps\n}\n\nexport const Slider: SliderType = React.forwardRef(\n  (\n    {\n      value,\n      defaultValue,\n      min = 0,\n      max = 100,\n      theme = 'tonal',\n      css,\n      children,\n      ...remainingProps\n    },\n    ref\n  ) => {\n    const values = value || defaultValue\n    return (\n      <CSSWrapper css={css}>\n        <StyledSlider\n          theme={theme}\n          defaultValue={defaultValue}\n          value={value}\n          min={min}\n          max={max}\n          ref={ref}\n          {...remainingProps}\n        >\n          <StyledTrack>\n            <StyledRange />\n          </StyledTrack>\n          {values?.length &&\n            values.map((_, i) => <StyledThumb key={`thumb${i}`} />)}\n        </StyledSlider>\n        {children}\n      </CSSWrapper>\n    )\n  }\n) as SliderType\n\nSlider.Value = SliderValue\nSlider.Steps = SliderSteps\n\nSlider.displayName = 'Slider'\n"],"names":["StyledTrack","styled","Track","StyledSlider","Root","disabledStyle","StyledRange","Range","StyledThumb","Thumb","Slider","React","value","defaultValue","min","max","theme","css","children","remainingProps","ref","values","CSSWrapper","_","i","SliderValue","SliderSteps"],"mappings":"ogBASA,MAAMA,EAAcC,EAAOC,EAAO,CAChC,aAAc,SACd,SAAU,EACV,SAAU,WACV,mCAAoC,CAAE,OAAQ,UAAW,EACzD,iCAAkC,CAAE,MAAO,UAAW,CACxD,CAAC,EAEKC,EAAeF,EAAOG,EAAM,CAChC,WAAY,SACZ,QAAS,OACT,SAAU,WACV,YAAa,OACb,WAAY,OACZ,OAAQ,UACR,mCAAoC,CAClC,OAAQ,IACV,EACA,iCAAkC,CAChC,cAAe,SACf,MAAO,IACT,EACA,cAAeC,EACf,SAAU,CACR,MAAO,CACL,MAAO,CACL,CAAC,GAAGL,KAAgB,CAAE,GAAI,MAAO,CACnC,EACA,MAAO,CACL,CAAC,GAAGA,KAAgB,CAAE,GAAI,WAAY,CACxC,CACF,CACF,CACF,CAAC,EAEKM,EAAcL,EAAOM,EAAO,CAChC,GAAI,cACJ,aAAc,SACd,OAAQ,OACR,SAAU,WACV,cAAeF,CACjB,CAAC,EAEKG,EAAcP,EAAOQ,EAAO,CAChC,GAAI,cACJ,aAAc,SACd,QAAS,QACT,KAAM,KACN,UAAW,CACT,GAAI,cACN,EACA,UAAW,CACT,QAAS,wBACT,cAAe,KACjB,EACA,cAAeJ,CACjB,CAAC,EASYK,EAAqBC,EAAM,WACtC,CACE,CACE,MAAAC,EACA,aAAAC,EACA,IAAAC,EAAM,EACN,IAAAC,EAAM,IACN,MAAAC,EAAQ,QACR,IAAAC,EACA,SAAAC,KACGC,CACL,EACAC,IACG,CACH,MAAMC,EAAST,GAASC,EACxB,OACEF,EAAA,cAACW,EAAA,CAAW,IAAKL,CAAAA,EACfN,EAAA,cAACR,EAAA,CACC,MAAOa,EACP,aAAcH,EACd,MAAOD,EACP,IAAKE,EACL,IAAKC,EACL,IAAKK,EACJ,GAAGD,CAAAA,EAEJR,EAAA,cAACX,EAAA,KACCW,EAAA,cAACL,EAAA,IAAY,CACf,GACCe,GAAA,KAAA,OAAAA,EAAQ,SACPA,EAAO,IAAI,CAACE,EAAGC,IAAMb,EAAA,cAACH,EAAA,CAAY,IAAK,QAAQgB,GAAAA,CAAK,CAAE,CAC1D,EACCN,CACH,CAEJ,CACF,EAEAR,EAAO,MAAQe,EACff,EAAO,MAAQgB,EAEfhB,EAAO,YAAc"}

package/dist/components/tabs/TabsTrigger.js

@@ -1,2 +1,2 @@
-import{Trigger as n}from"@radix-ui/react-tabs";import*as e from"react";import{styled as t}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import{focusVisibleStyleBlock as c}from"../../utilities/style/focus-visible-style-block.js";import"../../utilities/style/keyframe-animations.js";import{disabledStyle as l}from"../../utilities/style/disabledStyle.js";import{Text as s}from"../text/Text.js";const o=t("div",{position:"absolute",inset:0,height:"calc(100% + 2px)",opacity:0,bg:"$interactive1"}),m=t(n,{background:"none",border:"none",cursor:"pointer",flexShrink:0,p:"$4",userSelect:"none",borderBottom:"2px solid transparent",position:"relative",'&[data-state="active"]':{color:"$interactive1",fontWeight:600,letterSpacing:"-0.005em",borderColor:"currentColor"},"&[data-disabled]":l,"&:not([data-disabled])":{"&:hover, &:focus-visible":{color:"$interactive2",[`& ${o}`]:{opacity:.07}},"&:active":{color:"$interactive3"},"&:focus-visible":{...c()}}}),r=({children:i,...a})=>e.createElement(m,{...a},e.createElement(s,{size:"sm",as:"span"},i),e.createElement(o,null));r.displayName="TabsTrigger";export{r as TabsTrigger};
+import{Trigger as n}from"@radix-ui/react-tabs";import*as e from"react";import{styled as o}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import{focusVisibleStyleBlock as c}from"../../utilities/style/focus-visible-style-block.js";import"../../utilities/style/keyframe-animations.js";import{disabledStyle as l}from"../../utilities/style/disabledStyle.js";import{Text as s}from"../text/Text.js";const t=o("div",{position:"absolute",inset:0,height:"calc(100% + 2px)",opacity:0,bg:"$interactive1"}),m=o(n,{background:"none",border:"none",cursor:"pointer",flexShrink:0,p:"$4",userSelect:"none",borderBottom:"2px solid transparent",position:"relative",'&[data-state="active"]':{color:"$interactive1",fontWeight:600,letterSpacing:"-0.005em",borderColor:"currentColor"},"&[disabled]":l,"&:not([disabled])":{"&:hover, &:focus-visible":{color:"$interactive2",[`& ${t}`]:{opacity:.07}},"&:active":{color:"$interactive3"},"&:focus-visible":{...c()}}}),r=({children:i,...a})=>e.createElement(m,{...a},e.createElement(s,{size:"sm",as:"span"},i),e.createElement(t,null));r.displayName="TabsTrigger";export{r as TabsTrigger};
 //# sourceMappingURL=TabsTrigger.js.map

package/dist/components/tabs/TabsTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabsTrigger.js","sources":["../../../src/components/tabs/TabsTrigger.tsx"],"sourcesContent":["import { Trigger } from '@radix-ui/react-tabs'\nimport * as React from 'react'\n\nimport { styled } from '~/stitches'\nimport { disabledStyle, focusVisibleStyleBlock } from '~/utilities'\n\nimport { Text } from '../text'\n\nconst StyledTabsTriggerHoverBackground = styled('div', {\n  position: 'absolute',\n  inset: 0,\n  height: 'calc(100% + 2px)',\n  opacity: 0,\n  bg: '$interactive1'\n})\n\nconst StyledTabsTrigger = styled(Trigger, {\n  background: 'none',\n  border: 'none',\n  cursor: 'pointer',\n  flexShrink: 0,\n  p: '$4',\n  userSelect: 'none',\n  borderBottom: '2px solid transparent',\n  position: 'relative',\n  '&[data-state=\"active\"]': {\n    color: '$interactive1',\n    fontWeight: 600,\n    letterSpacing: '-0.005em',\n    borderColor: 'currentColor'\n  },\n  '&[data-disabled]': disabledStyle,\n  '&:not([data-disabled])': {\n    '&:hover, &:focus-visible': {\n      color: '$interactive2',\n      [`& ${StyledTabsTriggerHoverBackground}`]: {\n        opacity: 0.07\n      }\n    },\n    '&:active': {\n      color: '$interactive3'\n    },\n    '&:focus-visible': {\n      ...focusVisibleStyleBlock()\n    }\n  }\n})\n\nexport const TabsTrigger = ({\n  children,\n  ...rest\n}: React.ComponentProps<typeof StyledTabsTrigger> & { value: string }) => (\n  <StyledTabsTrigger {...rest}>\n    <Text size=\"sm\" as=\"span\">\n      {children}\n    </Text>\n    <StyledTabsTriggerHoverBackground />\n  </StyledTabsTrigger>\n)\n\nTabsTrigger.displayName = 'TabsTrigger'\n"],"names":["StyledTabsTriggerHoverBackground","styled","StyledTabsTrigger","Trigger","disabledStyle","focusVisibleStyleBlock","TabsTrigger","children","rest","React","Text"],"mappings":"ofAQA,MAAMA,EAAmCC,EAAO,MAAO,CACrD,SAAU,WACV,MAAO,EACP,OAAQ,mBACR,QAAS,EACT,GAAI,eACN,CAAC,EAEKC,EAAoBD,EAAOE,EAAS,CACxC,WAAY,OACZ,OAAQ,OACR,OAAQ,UACR,WAAY,EACZ,EAAG,KACH,WAAY,OACZ,aAAc,wBACd,SAAU,WACV,yBAA0B,CACxB,MAAO,gBACP,WAAY,IACZ,cAAe,WACf,YAAa,cACf,EACA,mBAAoBC,EACpB,yBAA0B,CACxB,2BAA4B,CAC1B,MAAO,gBACP,CAAC,KAAKJ,KAAqC,CACzC,QAAS,GACX,CACF,EACA,WAAY,CACV,MAAO,eACT,EACA,kBAAmB,CACjB,GAAGK,EACL,CAAA,CACF,CACF,CAAC,EAEYC,EAAc,CAAC,CAC1B,SAAAC,KACGC,CACL,IACEC,EAAA,cAACP,EAAA,CAAmB,GAAGM,GACrBC,EAAA,cAACC,EAAA,CAAK,KAAK,KAAK,GAAG,MAAA,EAChBH,CACH,EACAE,EAAA,cAACT,EAAA,IAAiC,CACpC,EAGFM,EAAY,YAAc"}
+{"version":3,"file":"TabsTrigger.js","sources":["../../../src/components/tabs/TabsTrigger.tsx"],"sourcesContent":["import { Trigger } from '@radix-ui/react-tabs'\nimport * as React from 'react'\n\nimport { styled } from '~/stitches'\nimport { disabledStyle, focusVisibleStyleBlock } from '~/utilities'\n\nimport { Text } from '../text'\n\nconst StyledTabsTriggerHoverBackground = styled('div', {\n  position: 'absolute',\n  inset: 0,\n  height: 'calc(100% + 2px)',\n  opacity: 0,\n  bg: '$interactive1'\n})\n\nconst StyledTabsTrigger = styled(Trigger, {\n  background: 'none',\n  border: 'none',\n  cursor: 'pointer',\n  flexShrink: 0,\n  p: '$4',\n  userSelect: 'none',\n  borderBottom: '2px solid transparent',\n  position: 'relative',\n  '&[data-state=\"active\"]': {\n    color: '$interactive1',\n    fontWeight: 600,\n    letterSpacing: '-0.005em',\n    borderColor: 'currentColor'\n  },\n  '&[disabled]': disabledStyle,\n  '&:not([disabled])': {\n    '&:hover, &:focus-visible': {\n      color: '$interactive2',\n      [`& ${StyledTabsTriggerHoverBackground}`]: {\n        opacity: 0.07\n      }\n    },\n    '&:active': {\n      color: '$interactive3'\n    },\n    '&:focus-visible': {\n      ...focusVisibleStyleBlock()\n    }\n  }\n})\n\nexport const TabsTrigger = ({\n  children,\n  ...rest\n}: React.ComponentProps<typeof StyledTabsTrigger> & { value: string }) => (\n  <StyledTabsTrigger {...rest}>\n    <Text size=\"sm\" as=\"span\">\n      {children}\n    </Text>\n    <StyledTabsTriggerHoverBackground />\n  </StyledTabsTrigger>\n)\n\nTabsTrigger.displayName = 'TabsTrigger'\n"],"names":["StyledTabsTriggerHoverBackground","styled","StyledTabsTrigger","Trigger","disabledStyle","focusVisibleStyleBlock","TabsTrigger","children","rest","React","Text"],"mappings":"ofAQA,MAAMA,EAAmCC,EAAO,MAAO,CACrD,SAAU,WACV,MAAO,EACP,OAAQ,mBACR,QAAS,EACT,GAAI,eACN,CAAC,EAEKC,EAAoBD,EAAOE,EAAS,CACxC,WAAY,OACZ,OAAQ,OACR,OAAQ,UACR,WAAY,EACZ,EAAG,KACH,WAAY,OACZ,aAAc,wBACd,SAAU,WACV,yBAA0B,CACxB,MAAO,gBACP,WAAY,IACZ,cAAe,WACf,YAAa,cACf,EACA,cAAeC,EACf,oBAAqB,CACnB,2BAA4B,CAC1B,MAAO,gBACP,CAAC,KAAKJ,KAAqC,CACzC,QAAS,GACX,CACF,EACA,WAAY,CACV,MAAO,eACT,EACA,kBAAmB,CACjB,GAAGK,EACL,CAAA,CACF,CACF,CAAC,EAEYC,EAAc,CAAC,CAC1B,SAAAC,KACGC,CACL,IACEC,EAAA,cAACP,EAAA,CAAmB,GAAGM,GACrBC,EAAA,cAACC,EAAA,CAAK,KAAK,KAAK,GAAG,MAAA,EAChBH,CACH,EACAE,EAAA,cAACT,EAAA,IAAiC,CACpC,EAGFM,EAAY,YAAc"}