@traefik-labs/faency 12.3.8 → 13.0.0

package/dist/components/SidePanel/SidePanel.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SidePanel.cjs","names":[],"sources":["../../../components/SidePanel/SidePanel.tsx"],"sourcesContent":["import * as DialogPrimitive from '@radix-ui/react-dialog';\nimport { Cross1Icon } from '@radix-ui/react-icons';\nimport { VisuallyHidden } from '@radix-ui/react-visually-hidden';\nimport React, { ComponentProps } from 'react';\n\nimport { CSS, keyframes, styled, VariantProps } from '../../stitches.config';\nimport { IconButton } from '../IconButton';\nimport { overlayStyles } from '../Overlay';\n\nconst fadeIn = keyframes({\n  from: { opacity: '0' },\n  to: { opacity: '1' },\n});\n\nconst fadeOut = keyframes({\n  from: { opacity: '1' },\n  to: { opacity: '0' },\n});\n\nconst SidePanelOverlay = styled(DialogPrimitive.Overlay, overlayStyles, {\n  position: 'fixed',\n  top: 0,\n  right: 0,\n  bottom: 0,\n  left: 0,\n\n  '&[data-state=\"open\"]': {\n    animation: `${fadeIn} 150ms cubic-bezier(0.22, 1, 0.36, 1)`,\n  },\n\n  '&[data-state=\"closed\"]': {\n    animation: `${fadeOut} 150ms cubic-bezier(0.22, 1, 0.36, 1)`,\n  },\n});\n\nconst slideIn = keyframes({\n  from: { transform: '$$transformValue' },\n  to: { transform: 'translate3d(0,0,0)' },\n});\n\nconst slideOut = keyframes({\n  from: { transform: 'translate3d(0,0,0)' },\n  to: { transform: '$$transformValue' },\n});\n\nconst StyledContent = styled(DialogPrimitive.Content, {\n  backgroundColor: '$sidePanelBackground',\n  boxShadow: 'inset 0 0 0 1px $colors$deepBlue4',\n  position: 'fixed',\n  top: 0,\n  bottom: 0,\n  width: 375,\n  p: '$4',\n\n  '&[data-state=\"open\"]': {\n    animation: `${slideIn} 150ms cubic-bezier(0.22, 1, 0.36, 1)`,\n  },\n\n  '&[data-state=\"closed\"]': {\n    animation: `${slideOut} 150ms cubic-bezier(0.22, 1, 0.36, 1)`,\n  },\n\n  variants: {\n    side: {\n      top: {\n        $$transformValue: 'translate3d(0,-100%,0)',\n        width: '100%',\n        height: 250,\n        bottom: 'auto',\n      },\n      right: {\n        $$transformValue: 'translate3d(100%,0,0)',\n        right: 0,\n        maxWidth: '50%',\n      },\n      bottom: {\n        $$transformValue: 'translate3d(0,100%,0)',\n        width: '100%',\n        height: 250,\n        bottom: 0,\n        top: 'auto',\n      },\n      left: {\n        $$transformValue: 'translate3d(-100%,0,0)',\n        left: 0,\n        maxWidth: '50%',\n      },\n    },\n  },\n\n  defaultVariants: {\n    side: 'right',\n  },\n});\n\nconst StyledCloseButton = styled(DialogPrimitive.Close, {\n  position: 'absolute',\n  top: '$2',\n  right: '$2',\n  cursor: 'pointer',\n});\n\ninterface SidePanelCloseButtonProps\n  extends VariantProps<typeof IconButton>,\n    ComponentProps<typeof IconButton> {}\n\nconst SidePanelCloseIconButton = React.forwardRef<\n  React.ElementRef<typeof IconButton>,\n  SidePanelCloseButtonProps\n>((props, forwardedRef) => (\n  <StyledCloseButton asChild>\n    <IconButton ref={forwardedRef} css={{ color: '$hiContrast' }} {...props}>\n      <Cross1Icon />\n    </IconButton>\n  </StyledCloseButton>\n));\n\ntype SidePanelContentVariants = VariantProps<typeof StyledContent>;\ntype SidePanelContentPrimitiveProps = React.ComponentProps<typeof DialogPrimitive.Content>;\ntype SidePanelProps = SidePanelContentPrimitiveProps &\n  SidePanelContentVariants & {\n    css?: CSS;\n    description?: string;\n    noOverlay?: boolean;\n    noCloseIcon?: boolean;\n    open?: boolean;\n    defaultOpen?: boolean;\n    onOpenChange(open: boolean): void;\n  };\n\nexport const SidePanel = React.forwardRef<React.ElementRef<typeof StyledContent>, SidePanelProps>(\n  (\n    {\n      description,\n      noOverlay = false,\n      noCloseIcon = false,\n      children,\n      onOpenChange,\n      open = false,\n      defaultOpen = false,\n      ...props\n    },\n    forwardedRef,\n  ) => (\n    <DialogPrimitive.Root open={open} onOpenChange={onOpenChange} defaultOpen={defaultOpen}>\n      <DialogPrimitive.Portal>\n        {!noOverlay && <SidePanelOverlay />}\n        <StyledContent {...props} ref={forwardedRef}>\n          {description ? (\n            <VisuallyHidden asChild>\n              <DialogPrimitive.Description>{description}</DialogPrimitive.Description>\n            </VisuallyHidden>\n          ) : null}\n          {children}\n          {!noCloseIcon && <SidePanelCloseIconButton />}\n        </StyledContent>\n      </DialogPrimitive.Portal>\n    </DialogPrimitive.Root>\n  ),\n);\n"],"mappings":";;;;;;;;;;;;AASA,IAAM,SAAS,wBAAA,UAAU;CACvB,MAAM,EAAE,SAAS,IAAI;CACrB,IAAI,EAAE,SAAS,IAAI;AACrB,CAAC;AAED,IAAM,UAAU,wBAAA,UAAU;CACxB,MAAM,EAAE,SAAS,IAAI;CACrB,IAAI,EAAE,SAAS,IAAI;AACrB,CAAC;AAED,IAAM,mBAAmB,wBAAA,OAAO,uBAAgB,SAAS,gBAAA,eAAe;CACtE,UAAU;CACV,KAAK;CACL,OAAO;CACP,QAAQ;CACR,MAAM;CAEN,0BAAwB,EACtB,WAAW,GAAG,OAAO,uCACvB;CAEA,4BAA0B,EACxB,WAAW,GAAG,QAAQ,uCACxB;AACF,CAAC;AAED,IAAM,UAAU,wBAAA,UAAU;CACxB,MAAM,EAAE,WAAW,mBAAmB;CACtC,IAAI,EAAE,WAAW,qBAAqB;AACxC,CAAC;AAED,IAAM,WAAW,wBAAA,UAAU;CACzB,MAAM,EAAE,WAAW,qBAAqB;CACxC,IAAI,EAAE,WAAW,mBAAmB;AACtC,CAAC;AAED,IAAM,gBAAgB,wBAAA,OAAO,uBAAgB,SAAS;CACpD,iBAAiB;CACjB,WAAW;CACX,UAAU;CACV,KAAK;CACL,QAAQ;CACR,OAAO;CACP,GAAG;CAEH,0BAAwB,EACtB,WAAW,GAAG,QAAQ,uCACxB;CAEA,4BAA0B,EACxB,WAAW,GAAG,SAAS,uCACzB;CAEA,UAAU,EACR,MAAM;EACJ,KAAK;GACH,kBAAkB;GAClB,OAAO;GACP,QAAQ;GACR,QAAQ;EACV;EACA,OAAO;GACL,kBAAkB;GAClB,OAAO;GACP,UAAU;EACZ;EACA,QAAQ;GACN,kBAAkB;GAClB,OAAO;GACP,QAAQ;GACR,QAAQ;GACR,KAAK;EACP;EACA,MAAM;GACJ,kBAAkB;GAClB,MAAM;GACN,UAAU;EACZ;CACF,EACF;CAEA,iBAAiB,EACf,MAAM,QACR;AACF,CAAC;AAED,IAAM,oBAAoB,wBAAA,OAAO,uBAAgB,OAAO;CACtD,UAAU;CACV,KAAK;CACL,OAAO;CACP,QAAQ;AACV,CAAC;AAMD,IAAM,2BAA2B,MAAA,QAAM,YAGpC,OAAO,iBACR,iBAAA,GAAA,kBAAA,IAAA,CAAC,mBAAD;CAAmB,SAAA;WACjB,iBAAA,GAAA,kBAAA,IAAA,CAAC,mBAAA,YAAD;EAAY,KAAK;EAAc,KAAK,EAAE,OAAO,cAAc;EAAG,GAAI;YAChE,iBAAA,GAAA,kBAAA,IAAA,CAAC,sBAAA,YAAD,CAAa,CAAA;CACH,CAAA;AACK,CAAA,CACpB;AAeD,IAAa,YAAY,MAAA,QAAM,YAE3B,EACE,aACA,YAAY,OACZ,cAAc,OACd,UACA,cACA,OAAO,OACP,cAAc,OACd,GAAG,SAEL,iBAEA,iBAAA,GAAA,kBAAA,IAAA,CAAC,uBAAgB,MAAjB;CAA4B;CAAoB;CAA2B;WACzE,iBAAA,GAAA,kBAAA,KAAA,CAAC,uBAAgB,QAAjB,EAAA,UAAA,CACG,CAAC,aAAa,iBAAA,GAAA,kBAAA,IAAA,CAAC,kBAAD,CAAmB,CAAA,GAClC,iBAAA,GAAA,kBAAA,KAAA,CAAC,eAAD;EAAe,GAAI;EAAO,KAAK;YAA/B;GACG,cACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,gCAAA,gBAAD;IAAgB,SAAA;cACd,iBAAA,GAAA,kBAAA,IAAA,CAAC,uBAAgB,aAAjB,EAAA,UAA8B,YAAyC,CAAA;GACzD,CAAA,IACd;GACH;GACA,CAAC,eAAe,iBAAA,GAAA,kBAAA,IAAA,CAAC,0BAAD,CAA2B,CAAA;EAC/B;GACO,EAAA,CAAA;AACJ,CAAA,CAE1B"}
+{"version":3,"file":"SidePanel.cjs","names":["keyframes","styled","DialogPrimitive","overlayStyles","React","IconButton","Cross1Icon","VisuallyHidden"],"sources":["../../../components/SidePanel/SidePanel.tsx"],"sourcesContent":["import * as DialogPrimitive from '@radix-ui/react-dialog';\nimport { Cross1Icon } from '@radix-ui/react-icons';\nimport { VisuallyHidden } from '@radix-ui/react-visually-hidden';\nimport React, { ComponentProps } from 'react';\n\nimport { CSS, keyframes, styled, VariantProps } from '../../stitches.config';\nimport { IconButton } from '../IconButton';\nimport { overlayStyles } from '../Overlay';\n\nconst fadeIn = keyframes({\n  from: { opacity: '0' },\n  to: { opacity: '1' },\n});\n\nconst fadeOut = keyframes({\n  from: { opacity: '1' },\n  to: { opacity: '0' },\n});\n\nconst SidePanelOverlay = styled(DialogPrimitive.Overlay, overlayStyles, {\n  position: 'fixed',\n  top: 0,\n  right: 0,\n  bottom: 0,\n  left: 0,\n\n  '&[data-state=\"open\"]': {\n    animation: `${fadeIn} 150ms cubic-bezier(0.22, 1, 0.36, 1)`,\n  },\n\n  '&[data-state=\"closed\"]': {\n    animation: `${fadeOut} 150ms cubic-bezier(0.22, 1, 0.36, 1)`,\n  },\n});\n\nconst slideIn = keyframes({\n  from: { transform: '$$transformValue' },\n  to: { transform: 'translate3d(0,0,0)' },\n});\n\nconst slideOut = keyframes({\n  from: { transform: 'translate3d(0,0,0)' },\n  to: { transform: '$$transformValue' },\n});\n\nconst StyledContent = styled(DialogPrimitive.Content, {\n  backgroundColor: '$sidePanelBackground',\n  boxShadow: 'inset 0 0 0 1px $colors$deepBlue4',\n  position: 'fixed',\n  top: 0,\n  bottom: 0,\n  width: 375,\n  p: '$4',\n\n  '&[data-state=\"open\"]': {\n    animation: `${slideIn} 150ms cubic-bezier(0.22, 1, 0.36, 1)`,\n  },\n\n  '&[data-state=\"closed\"]': {\n    animation: `${slideOut} 150ms cubic-bezier(0.22, 1, 0.36, 1)`,\n  },\n\n  variants: {\n    side: {\n      top: {\n        $$transformValue: 'translate3d(0,-100%,0)',\n        width: '100%',\n        height: 250,\n        bottom: 'auto',\n      },\n      right: {\n        $$transformValue: 'translate3d(100%,0,0)',\n        right: 0,\n        maxWidth: '50%',\n      },\n      bottom: {\n        $$transformValue: 'translate3d(0,100%,0)',\n        width: '100%',\n        height: 250,\n        bottom: 0,\n        top: 'auto',\n      },\n      left: {\n        $$transformValue: 'translate3d(-100%,0,0)',\n        left: 0,\n        maxWidth: '50%',\n      },\n    },\n  },\n\n  defaultVariants: {\n    side: 'right',\n  },\n});\n\nconst StyledCloseButton = styled(DialogPrimitive.Close, {\n  position: 'absolute',\n  top: '$2',\n  right: '$2',\n  cursor: 'pointer',\n});\n\ninterface SidePanelCloseButtonProps\n  extends VariantProps<typeof IconButton>,\n    ComponentProps<typeof IconButton> {}\n\nconst SidePanelCloseIconButton = React.forwardRef<\n  React.ElementRef<typeof IconButton>,\n  SidePanelCloseButtonProps\n>((props, forwardedRef) => (\n  <StyledCloseButton asChild>\n    <IconButton ref={forwardedRef} css={{ color: '$hiContrast' }} {...props}>\n      <Cross1Icon />\n    </IconButton>\n  </StyledCloseButton>\n));\n\ntype SidePanelContentVariants = VariantProps<typeof StyledContent>;\ntype SidePanelContentPrimitiveProps = React.ComponentProps<typeof DialogPrimitive.Content>;\ntype SidePanelProps = SidePanelContentPrimitiveProps &\n  SidePanelContentVariants & {\n    css?: CSS;\n    description?: string;\n    noOverlay?: boolean;\n    noCloseIcon?: boolean;\n    open?: boolean;\n    defaultOpen?: boolean;\n    onOpenChange(open: boolean): void;\n  };\n\nexport const SidePanel = React.forwardRef<React.ElementRef<typeof StyledContent>, SidePanelProps>(\n  (\n    {\n      description,\n      noOverlay = false,\n      noCloseIcon = false,\n      children,\n      onOpenChange,\n      open = false,\n      defaultOpen = false,\n      ...props\n    },\n    forwardedRef,\n  ) => (\n    <DialogPrimitive.Root open={open} onOpenChange={onOpenChange} defaultOpen={defaultOpen}>\n      <DialogPrimitive.Portal>\n        {!noOverlay && <SidePanelOverlay />}\n        <StyledContent {...props} ref={forwardedRef}>\n          {description ? (\n            <VisuallyHidden asChild>\n              <DialogPrimitive.Description>{description}</DialogPrimitive.Description>\n            </VisuallyHidden>\n          ) : null}\n          {children}\n          {!noCloseIcon && <SidePanelCloseIconButton />}\n        </StyledContent>\n      </DialogPrimitive.Portal>\n    </DialogPrimitive.Root>\n  ),\n);\n"],"mappings":";;;;;;;;;;;;AASA,IAAM,SAASA,wBAAAA,UAAU;CACvB,MAAM,EAAE,SAAS,IAAI;CACrB,IAAI,EAAE,SAAS,IAAI;AACrB,CAAC;AAED,IAAM,UAAUA,wBAAAA,UAAU;CACxB,MAAM,EAAE,SAAS,IAAI;CACrB,IAAI,EAAE,SAAS,IAAI;AACrB,CAAC;AAED,IAAM,mBAAmBC,wBAAAA,OAAOC,uBAAgB,SAASC,gBAAAA,eAAe;CACtE,UAAU;CACV,KAAK;CACL,OAAO;CACP,QAAQ;CACR,MAAM;CAEN,0BAAwB,EACtB,WAAW,GAAG,OAAO,uCACvB;CAEA,4BAA0B,EACxB,WAAW,GAAG,QAAQ,uCACxB;AACF,CAAC;AAED,IAAM,UAAUH,wBAAAA,UAAU;CACxB,MAAM,EAAE,WAAW,mBAAmB;CACtC,IAAI,EAAE,WAAW,qBAAqB;AACxC,CAAC;AAED,IAAM,WAAWA,wBAAAA,UAAU;CACzB,MAAM,EAAE,WAAW,qBAAqB;CACxC,IAAI,EAAE,WAAW,mBAAmB;AACtC,CAAC;AAED,IAAM,gBAAgBC,wBAAAA,OAAOC,uBAAgB,SAAS;CACpD,iBAAiB;CACjB,WAAW;CACX,UAAU;CACV,KAAK;CACL,QAAQ;CACR,OAAO;CACP,GAAG;CAEH,0BAAwB,EACtB,WAAW,GAAG,QAAQ,uCACxB;CAEA,4BAA0B,EACxB,WAAW,GAAG,SAAS,uCACzB;CAEA,UAAU,EACR,MAAM;EACJ,KAAK;GACH,kBAAkB;GAClB,OAAO;GACP,QAAQ;GACR,QAAQ;EACV;EACA,OAAO;GACL,kBAAkB;GAClB,OAAO;GACP,UAAU;EACZ;EACA,QAAQ;GACN,kBAAkB;GAClB,OAAO;GACP,QAAQ;GACR,QAAQ;GACR,KAAK;EACP;EACA,MAAM;GACJ,kBAAkB;GAClB,MAAM;GACN,UAAU;EACZ;CACF,EACF;CAEA,iBAAiB,EACf,MAAM,QACR;AACF,CAAC;AAED,IAAM,oBAAoBD,wBAAAA,OAAOC,uBAAgB,OAAO;CACtD,UAAU;CACV,KAAK;CACL,OAAO;CACP,QAAQ;AACV,CAAC;AAMD,IAAM,2BAA2BE,MAAAA,QAAM,YAGpC,OAAO,iBACR,iBAAA,GAAA,kBAAA,IAAA,CAAC,mBAAD;CAAmB,SAAA;CACjB,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,mBAAAA,YAAD;EAAY,KAAK;EAAc,KAAK,EAAE,OAAO,cAAc;EAAG,GAAI;EAChE,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,sBAAAA,YAAD,CAAa,CAAA;CACH,CAAA;AACK,CAAA,CACpB;AAeD,IAAa,YAAYF,MAAAA,QAAM,YAE3B,EACE,aACA,YAAY,OACZ,cAAc,OACd,UACA,cACA,OAAO,OACP,cAAc,OACd,GAAG,SAEL,iBAEA,iBAAA,GAAA,kBAAA,IAAA,CAACF,uBAAgB,MAAjB;CAA4B;CAAoB;CAA2B;CACzE,UAAA,iBAAA,GAAA,kBAAA,KAAA,CAACA,uBAAgB,QAAjB,EAAA,UAAA,CACG,CAAC,aAAa,iBAAA,GAAA,kBAAA,IAAA,CAAC,kBAAD,CAAmB,CAAA,GAClC,iBAAA,GAAA,kBAAA,KAAA,CAAC,eAAD;EAAe,GAAI;EAAO,KAAK;EAA/B,UAAA;GACG,cACC,iBAAA,GAAA,kBAAA,IAAA,CAACK,gCAAAA,gBAAD;IAAgB,SAAA;IACd,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACL,uBAAgB,aAAjB,EAAA,UAA8B,YAAyC,CAAA;GACzD,CAAA,IACd;GACH;GACA,CAAC,eAAe,iBAAA,GAAA,kBAAA,IAAA,CAAC,0BAAD,CAA2B,CAAA;EAC/B;CACO,CAAA,CAAA,EAAA,CAAA;AACJ,CAAA,CAE1B"}

package/dist/components/SidePanel/SidePanel.js

@@ -6,7 +6,7 @@ import React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
-//#region components/SidePanel/SidePanel.tsx
+// components/SidePanel/SidePanel.tsx
 var fadeIn = keyframes({
 	from: { opacity: "0" },
 	to: { opacity: "1" }
@@ -101,7 +101,6 @@ var SidePanel = React.forwardRef(({ description, noOverlay = false, noCloseIcon
 		]
 	})] })
 }));
-//#endregion
 export { SidePanel };
 
 //# sourceMappingURL=SidePanel.js.map

package/dist/components/SidePanel/SidePanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"SidePanel.js","names":[],"sources":["../../../components/SidePanel/SidePanel.tsx"],"sourcesContent":["import * as DialogPrimitive from '@radix-ui/react-dialog';\nimport { Cross1Icon } from '@radix-ui/react-icons';\nimport { VisuallyHidden } from '@radix-ui/react-visually-hidden';\nimport React, { ComponentProps } from 'react';\n\nimport { CSS, keyframes, styled, VariantProps } from '../../stitches.config';\nimport { IconButton } from '../IconButton';\nimport { overlayStyles } from '../Overlay';\n\nconst fadeIn = keyframes({\n  from: { opacity: '0' },\n  to: { opacity: '1' },\n});\n\nconst fadeOut = keyframes({\n  from: { opacity: '1' },\n  to: { opacity: '0' },\n});\n\nconst SidePanelOverlay = styled(DialogPrimitive.Overlay, overlayStyles, {\n  position: 'fixed',\n  top: 0,\n  right: 0,\n  bottom: 0,\n  left: 0,\n\n  '&[data-state=\"open\"]': {\n    animation: `${fadeIn} 150ms cubic-bezier(0.22, 1, 0.36, 1)`,\n  },\n\n  '&[data-state=\"closed\"]': {\n    animation: `${fadeOut} 150ms cubic-bezier(0.22, 1, 0.36, 1)`,\n  },\n});\n\nconst slideIn = keyframes({\n  from: { transform: '$$transformValue' },\n  to: { transform: 'translate3d(0,0,0)' },\n});\n\nconst slideOut = keyframes({\n  from: { transform: 'translate3d(0,0,0)' },\n  to: { transform: '$$transformValue' },\n});\n\nconst StyledContent = styled(DialogPrimitive.Content, {\n  backgroundColor: '$sidePanelBackground',\n  boxShadow: 'inset 0 0 0 1px $colors$deepBlue4',\n  position: 'fixed',\n  top: 0,\n  bottom: 0,\n  width: 375,\n  p: '$4',\n\n  '&[data-state=\"open\"]': {\n    animation: `${slideIn} 150ms cubic-bezier(0.22, 1, 0.36, 1)`,\n  },\n\n  '&[data-state=\"closed\"]': {\n    animation: `${slideOut} 150ms cubic-bezier(0.22, 1, 0.36, 1)`,\n  },\n\n  variants: {\n    side: {\n      top: {\n        $$transformValue: 'translate3d(0,-100%,0)',\n        width: '100%',\n        height: 250,\n        bottom: 'auto',\n      },\n      right: {\n        $$transformValue: 'translate3d(100%,0,0)',\n        right: 0,\n        maxWidth: '50%',\n      },\n      bottom: {\n        $$transformValue: 'translate3d(0,100%,0)',\n        width: '100%',\n        height: 250,\n        bottom: 0,\n        top: 'auto',\n      },\n      left: {\n        $$transformValue: 'translate3d(-100%,0,0)',\n        left: 0,\n        maxWidth: '50%',\n      },\n    },\n  },\n\n  defaultVariants: {\n    side: 'right',\n  },\n});\n\nconst StyledCloseButton = styled(DialogPrimitive.Close, {\n  position: 'absolute',\n  top: '$2',\n  right: '$2',\n  cursor: 'pointer',\n});\n\ninterface SidePanelCloseButtonProps\n  extends VariantProps<typeof IconButton>,\n    ComponentProps<typeof IconButton> {}\n\nconst SidePanelCloseIconButton = React.forwardRef<\n  React.ElementRef<typeof IconButton>,\n  SidePanelCloseButtonProps\n>((props, forwardedRef) => (\n  <StyledCloseButton asChild>\n    <IconButton ref={forwardedRef} css={{ color: '$hiContrast' }} {...props}>\n      <Cross1Icon />\n    </IconButton>\n  </StyledCloseButton>\n));\n\ntype SidePanelContentVariants = VariantProps<typeof StyledContent>;\ntype SidePanelContentPrimitiveProps = React.ComponentProps<typeof DialogPrimitive.Content>;\ntype SidePanelProps = SidePanelContentPrimitiveProps &\n  SidePanelContentVariants & {\n    css?: CSS;\n    description?: string;\n    noOverlay?: boolean;\n    noCloseIcon?: boolean;\n    open?: boolean;\n    defaultOpen?: boolean;\n    onOpenChange(open: boolean): void;\n  };\n\nexport const SidePanel = React.forwardRef<React.ElementRef<typeof StyledContent>, SidePanelProps>(\n  (\n    {\n      description,\n      noOverlay = false,\n      noCloseIcon = false,\n      children,\n      onOpenChange,\n      open = false,\n      defaultOpen = false,\n      ...props\n    },\n    forwardedRef,\n  ) => (\n    <DialogPrimitive.Root open={open} onOpenChange={onOpenChange} defaultOpen={defaultOpen}>\n      <DialogPrimitive.Portal>\n        {!noOverlay && <SidePanelOverlay />}\n        <StyledContent {...props} ref={forwardedRef}>\n          {description ? (\n            <VisuallyHidden asChild>\n              <DialogPrimitive.Description>{description}</DialogPrimitive.Description>\n            </VisuallyHidden>\n          ) : null}\n          {children}\n          {!noCloseIcon && <SidePanelCloseIconButton />}\n        </StyledContent>\n      </DialogPrimitive.Portal>\n    </DialogPrimitive.Root>\n  ),\n);\n"],"mappings":";;;;;;;;;AASA,IAAM,SAAS,UAAU;CACvB,MAAM,EAAE,SAAS,IAAI;CACrB,IAAI,EAAE,SAAS,IAAI;AACrB,CAAC;AAED,IAAM,UAAU,UAAU;CACxB,MAAM,EAAE,SAAS,IAAI;CACrB,IAAI,EAAE,SAAS,IAAI;AACrB,CAAC;AAED,IAAM,mBAAmB,OAAO,gBAAgB,SAAS,eAAe;CACtE,UAAU;CACV,KAAK;CACL,OAAO;CACP,QAAQ;CACR,MAAM;CAEN,0BAAwB,EACtB,WAAW,GAAG,OAAO,uCACvB;CAEA,4BAA0B,EACxB,WAAW,GAAG,QAAQ,uCACxB;AACF,CAAC;AAED,IAAM,UAAU,UAAU;CACxB,MAAM,EAAE,WAAW,mBAAmB;CACtC,IAAI,EAAE,WAAW,qBAAqB;AACxC,CAAC;AAED,IAAM,WAAW,UAAU;CACzB,MAAM,EAAE,WAAW,qBAAqB;CACxC,IAAI,EAAE,WAAW,mBAAmB;AACtC,CAAC;AAED,IAAM,gBAAgB,OAAO,gBAAgB,SAAS;CACpD,iBAAiB;CACjB,WAAW;CACX,UAAU;CACV,KAAK;CACL,QAAQ;CACR,OAAO;CACP,GAAG;CAEH,0BAAwB,EACtB,WAAW,GAAG,QAAQ,uCACxB;CAEA,4BAA0B,EACxB,WAAW,GAAG,SAAS,uCACzB;CAEA,UAAU,EACR,MAAM;EACJ,KAAK;GACH,kBAAkB;GAClB,OAAO;GACP,QAAQ;GACR,QAAQ;EACV;EACA,OAAO;GACL,kBAAkB;GAClB,OAAO;GACP,UAAU;EACZ;EACA,QAAQ;GACN,kBAAkB;GAClB,OAAO;GACP,QAAQ;GACR,QAAQ;GACR,KAAK;EACP;EACA,MAAM;GACJ,kBAAkB;GAClB,MAAM;GACN,UAAU;EACZ;CACF,EACF;CAEA,iBAAiB,EACf,MAAM,QACR;AACF,CAAC;AAED,IAAM,oBAAoB,OAAO,gBAAgB,OAAO;CACtD,UAAU;CACV,KAAK;CACL,OAAO;CACP,QAAQ;AACV,CAAC;AAMD,IAAM,2BAA2B,MAAM,YAGpC,OAAO,iBACR,oBAAC,mBAAD;CAAmB,SAAA;WACjB,oBAAC,YAAD;EAAY,KAAK;EAAc,KAAK,EAAE,OAAO,cAAc;EAAG,GAAI;YAChE,oBAAC,YAAD,CAAa,CAAA;CACH,CAAA;AACK,CAAA,CACpB;AAeD,IAAa,YAAY,MAAM,YAE3B,EACE,aACA,YAAY,OACZ,cAAc,OACd,UACA,cACA,OAAO,OACP,cAAc,OACd,GAAG,SAEL,iBAEA,oBAAC,gBAAgB,MAAjB;CAA4B;CAAoB;CAA2B;WACzE,qBAAC,gBAAgB,QAAjB,EAAA,UAAA,CACG,CAAC,aAAa,oBAAC,kBAAD,CAAmB,CAAA,GAClC,qBAAC,eAAD;EAAe,GAAI;EAAO,KAAK;YAA/B;GACG,cACC,oBAAC,gBAAD;IAAgB,SAAA;cACd,oBAAC,gBAAgB,aAAjB,EAAA,UAA8B,YAAyC,CAAA;GACzD,CAAA,IACd;GACH;GACA,CAAC,eAAe,oBAAC,0BAAD,CAA2B,CAAA;EAC/B;GACO,EAAA,CAAA;AACJ,CAAA,CAE1B"}
+{"version":3,"file":"SidePanel.js","names":[],"sources":["../../../components/SidePanel/SidePanel.tsx"],"sourcesContent":["import * as DialogPrimitive from '@radix-ui/react-dialog';\nimport { Cross1Icon } from '@radix-ui/react-icons';\nimport { VisuallyHidden } from '@radix-ui/react-visually-hidden';\nimport React, { ComponentProps } from 'react';\n\nimport { CSS, keyframes, styled, VariantProps } from '../../stitches.config';\nimport { IconButton } from '../IconButton';\nimport { overlayStyles } from '../Overlay';\n\nconst fadeIn = keyframes({\n  from: { opacity: '0' },\n  to: { opacity: '1' },\n});\n\nconst fadeOut = keyframes({\n  from: { opacity: '1' },\n  to: { opacity: '0' },\n});\n\nconst SidePanelOverlay = styled(DialogPrimitive.Overlay, overlayStyles, {\n  position: 'fixed',\n  top: 0,\n  right: 0,\n  bottom: 0,\n  left: 0,\n\n  '&[data-state=\"open\"]': {\n    animation: `${fadeIn} 150ms cubic-bezier(0.22, 1, 0.36, 1)`,\n  },\n\n  '&[data-state=\"closed\"]': {\n    animation: `${fadeOut} 150ms cubic-bezier(0.22, 1, 0.36, 1)`,\n  },\n});\n\nconst slideIn = keyframes({\n  from: { transform: '$$transformValue' },\n  to: { transform: 'translate3d(0,0,0)' },\n});\n\nconst slideOut = keyframes({\n  from: { transform: 'translate3d(0,0,0)' },\n  to: { transform: '$$transformValue' },\n});\n\nconst StyledContent = styled(DialogPrimitive.Content, {\n  backgroundColor: '$sidePanelBackground',\n  boxShadow: 'inset 0 0 0 1px $colors$deepBlue4',\n  position: 'fixed',\n  top: 0,\n  bottom: 0,\n  width: 375,\n  p: '$4',\n\n  '&[data-state=\"open\"]': {\n    animation: `${slideIn} 150ms cubic-bezier(0.22, 1, 0.36, 1)`,\n  },\n\n  '&[data-state=\"closed\"]': {\n    animation: `${slideOut} 150ms cubic-bezier(0.22, 1, 0.36, 1)`,\n  },\n\n  variants: {\n    side: {\n      top: {\n        $$transformValue: 'translate3d(0,-100%,0)',\n        width: '100%',\n        height: 250,\n        bottom: 'auto',\n      },\n      right: {\n        $$transformValue: 'translate3d(100%,0,0)',\n        right: 0,\n        maxWidth: '50%',\n      },\n      bottom: {\n        $$transformValue: 'translate3d(0,100%,0)',\n        width: '100%',\n        height: 250,\n        bottom: 0,\n        top: 'auto',\n      },\n      left: {\n        $$transformValue: 'translate3d(-100%,0,0)',\n        left: 0,\n        maxWidth: '50%',\n      },\n    },\n  },\n\n  defaultVariants: {\n    side: 'right',\n  },\n});\n\nconst StyledCloseButton = styled(DialogPrimitive.Close, {\n  position: 'absolute',\n  top: '$2',\n  right: '$2',\n  cursor: 'pointer',\n});\n\ninterface SidePanelCloseButtonProps\n  extends VariantProps<typeof IconButton>,\n    ComponentProps<typeof IconButton> {}\n\nconst SidePanelCloseIconButton = React.forwardRef<\n  React.ElementRef<typeof IconButton>,\n  SidePanelCloseButtonProps\n>((props, forwardedRef) => (\n  <StyledCloseButton asChild>\n    <IconButton ref={forwardedRef} css={{ color: '$hiContrast' }} {...props}>\n      <Cross1Icon />\n    </IconButton>\n  </StyledCloseButton>\n));\n\ntype SidePanelContentVariants = VariantProps<typeof StyledContent>;\ntype SidePanelContentPrimitiveProps = React.ComponentProps<typeof DialogPrimitive.Content>;\ntype SidePanelProps = SidePanelContentPrimitiveProps &\n  SidePanelContentVariants & {\n    css?: CSS;\n    description?: string;\n    noOverlay?: boolean;\n    noCloseIcon?: boolean;\n    open?: boolean;\n    defaultOpen?: boolean;\n    onOpenChange(open: boolean): void;\n  };\n\nexport const SidePanel = React.forwardRef<React.ElementRef<typeof StyledContent>, SidePanelProps>(\n  (\n    {\n      description,\n      noOverlay = false,\n      noCloseIcon = false,\n      children,\n      onOpenChange,\n      open = false,\n      defaultOpen = false,\n      ...props\n    },\n    forwardedRef,\n  ) => (\n    <DialogPrimitive.Root open={open} onOpenChange={onOpenChange} defaultOpen={defaultOpen}>\n      <DialogPrimitive.Portal>\n        {!noOverlay && <SidePanelOverlay />}\n        <StyledContent {...props} ref={forwardedRef}>\n          {description ? (\n            <VisuallyHidden asChild>\n              <DialogPrimitive.Description>{description}</DialogPrimitive.Description>\n            </VisuallyHidden>\n          ) : null}\n          {children}\n          {!noCloseIcon && <SidePanelCloseIconButton />}\n        </StyledContent>\n      </DialogPrimitive.Portal>\n    </DialogPrimitive.Root>\n  ),\n);\n"],"mappings":";;;;;;;;;AASA,IAAM,SAAS,UAAU;CACvB,MAAM,EAAE,SAAS,IAAI;CACrB,IAAI,EAAE,SAAS,IAAI;AACrB,CAAC;AAED,IAAM,UAAU,UAAU;CACxB,MAAM,EAAE,SAAS,IAAI;CACrB,IAAI,EAAE,SAAS,IAAI;AACrB,CAAC;AAED,IAAM,mBAAmB,OAAO,gBAAgB,SAAS,eAAe;CACtE,UAAU;CACV,KAAK;CACL,OAAO;CACP,QAAQ;CACR,MAAM;CAEN,0BAAwB,EACtB,WAAW,GAAG,OAAO,uCACvB;CAEA,4BAA0B,EACxB,WAAW,GAAG,QAAQ,uCACxB;AACF,CAAC;AAED,IAAM,UAAU,UAAU;CACxB,MAAM,EAAE,WAAW,mBAAmB;CACtC,IAAI,EAAE,WAAW,qBAAqB;AACxC,CAAC;AAED,IAAM,WAAW,UAAU;CACzB,MAAM,EAAE,WAAW,qBAAqB;CACxC,IAAI,EAAE,WAAW,mBAAmB;AACtC,CAAC;AAED,IAAM,gBAAgB,OAAO,gBAAgB,SAAS;CACpD,iBAAiB;CACjB,WAAW;CACX,UAAU;CACV,KAAK;CACL,QAAQ;CACR,OAAO;CACP,GAAG;CAEH,0BAAwB,EACtB,WAAW,GAAG,QAAQ,uCACxB;CAEA,4BAA0B,EACxB,WAAW,GAAG,SAAS,uCACzB;CAEA,UAAU,EACR,MAAM;EACJ,KAAK;GACH,kBAAkB;GAClB,OAAO;GACP,QAAQ;GACR,QAAQ;EACV;EACA,OAAO;GACL,kBAAkB;GAClB,OAAO;GACP,UAAU;EACZ;EACA,QAAQ;GACN,kBAAkB;GAClB,OAAO;GACP,QAAQ;GACR,QAAQ;GACR,KAAK;EACP;EACA,MAAM;GACJ,kBAAkB;GAClB,MAAM;GACN,UAAU;EACZ;CACF,EACF;CAEA,iBAAiB,EACf,MAAM,QACR;AACF,CAAC;AAED,IAAM,oBAAoB,OAAO,gBAAgB,OAAO;CACtD,UAAU;CACV,KAAK;CACL,OAAO;CACP,QAAQ;AACV,CAAC;AAMD,IAAM,2BAA2B,MAAM,YAGpC,OAAO,iBACR,oBAAC,mBAAD;CAAmB,SAAA;CACjB,UAAA,oBAAC,YAAD;EAAY,KAAK;EAAc,KAAK,EAAE,OAAO,cAAc;EAAG,GAAI;EAChE,UAAA,oBAAC,YAAD,CAAa,CAAA;CACH,CAAA;AACK,CAAA,CACpB;AAeD,IAAa,YAAY,MAAM,YAE3B,EACE,aACA,YAAY,OACZ,cAAc,OACd,UACA,cACA,OAAO,OACP,cAAc,OACd,GAAG,SAEL,iBAEA,oBAAC,gBAAgB,MAAjB;CAA4B;CAAoB;CAA2B;CACzE,UAAA,qBAAC,gBAAgB,QAAjB,EAAA,UAAA,CACG,CAAC,aAAa,oBAAC,kBAAD,CAAmB,CAAA,GAClC,qBAAC,eAAD;EAAe,GAAI;EAAO,KAAK;EAA/B,UAAA;GACG,cACC,oBAAC,gBAAD;IAAgB,SAAA;IACd,UAAA,oBAAC,gBAAgB,aAAjB,EAAA,UAA8B,YAAyC,CAAA;GACzD,CAAA,IACd;GACH;GACA,CAAC,eAAe,oBAAC,0BAAD,CAA2B,CAAA;EAC/B;CACO,CAAA,CAAA,EAAA,CAAA;AACJ,CAAA,CAE1B"}

package/dist/components/SidePanel/SidePanel.themes.cjs

@@ -1,10 +1,9 @@
-//#region components/SidePanel/SidePanel.themes.ts
+// components/SidePanel/SidePanel.themes.ts
 var Theme;
 (function(_Theme) {
 	_Theme.getLight = () => ({ sidePanelBackground: "$deepBlue2" });
 	_Theme.getDark = () => ({ sidePanelBackground: "$deepBlue3" });
 })(Theme || (Theme = {}));
-//#endregion
 Object.defineProperty(exports, "Theme", {
 	enumerable: true,
 	get: function() {

package/dist/components/SidePanel/SidePanel.themes.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SidePanel.themes.cjs","names":[],"sources":["../../../components/SidePanel/SidePanel.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\n\nexport namespace Theme {\n  type Colors = {\n    sidePanelBackground: Property.Color;\n  };\n\n  type Factory = (primaryColor?: ColorInfo) => Colors;\n\n  export const getLight: Factory = () => ({\n    sidePanelBackground: '$deepBlue2',\n  });\n\n  export const getDark: Factory = () => ({\n    sidePanelBackground: '$deepBlue3',\n  });\n}\n"],"mappings":";AAIO,IAAA;;CAOQ,OAAA,kBAA2B,EACtC,qBAAqB,aACvB;CAEa,OAAA,iBAA0B,EACrC,qBAAqB,aACvB;GACD,UAAA,QAAA,CAAA,EAAD"}
+{"version":3,"file":"SidePanel.themes.cjs","names":[],"sources":["../../../components/SidePanel/SidePanel.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\n\nexport namespace Theme {\n  type Colors = {\n    sidePanelBackground: Property.Color;\n  };\n\n  type Factory = (primaryColor?: ColorInfo) => Colors;\n\n  export const getLight: Factory = () => ({\n    sidePanelBackground: '$deepBlue2',\n  });\n\n  export const getDark: Factory = () => ({\n    sidePanelBackground: '$deepBlue3',\n  });\n}\n"],"mappings":";AAIO,IAAU;CAAV,SAAA,QAAA;CAOQ,OAAA,kBAA2B,EACtC,qBAAqB,aACvB;CAEa,OAAA,iBAA0B,EACrC,qBAAqB,aACvB;AACD,EAAA,CAAA,UAAA,QAAA,CAAA,EAAD"}

package/dist/components/SidePanel/SidePanel.themes.js

@@ -1,10 +1,9 @@
-//#region components/SidePanel/SidePanel.themes.ts
+// components/SidePanel/SidePanel.themes.ts
 var Theme;
 (function(_Theme) {
 	_Theme.getLight = () => ({ sidePanelBackground: "$deepBlue2" });
 	_Theme.getDark = () => ({ sidePanelBackground: "$deepBlue3" });
 })(Theme || (Theme = {}));
-//#endregion
 export { Theme };
 
 //# sourceMappingURL=SidePanel.themes.js.map

package/dist/components/SidePanel/SidePanel.themes.js.map

@@ -1 +1 @@
-{"version":3,"file":"SidePanel.themes.js","names":[],"sources":["../../../components/SidePanel/SidePanel.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\n\nexport namespace Theme {\n  type Colors = {\n    sidePanelBackground: Property.Color;\n  };\n\n  type Factory = (primaryColor?: ColorInfo) => Colors;\n\n  export const getLight: Factory = () => ({\n    sidePanelBackground: '$deepBlue2',\n  });\n\n  export const getDark: Factory = () => ({\n    sidePanelBackground: '$deepBlue3',\n  });\n}\n"],"mappings":";AAIO,IAAA;;CAOQ,OAAA,kBAA2B,EACtC,qBAAqB,aACvB;CAEa,OAAA,iBAA0B,EACrC,qBAAqB,aACvB;GACD,UAAA,QAAA,CAAA,EAAD"}
+{"version":3,"file":"SidePanel.themes.js","names":[],"sources":["../../../components/SidePanel/SidePanel.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\n\nexport namespace Theme {\n  type Colors = {\n    sidePanelBackground: Property.Color;\n  };\n\n  type Factory = (primaryColor?: ColorInfo) => Colors;\n\n  export const getLight: Factory = () => ({\n    sidePanelBackground: '$deepBlue2',\n  });\n\n  export const getDark: Factory = () => ({\n    sidePanelBackground: '$deepBlue3',\n  });\n}\n"],"mappings":";AAIO,IAAU;CAAV,SAAA,QAAA;CAOQ,OAAA,kBAA2B,EACtC,qBAAqB,aACvB;CAEa,OAAA,iBAA0B,EACrC,qBAAqB,aACvB;AACD,EAAA,CAAA,UAAA,QAAA,CAAA,EAAD"}

package/dist/components/Skeleton/Skeleton.cjs

@@ -1,5 +1,5 @@
 const require_stitches_config = require("../../stitches.config.cjs");
-//#region components/Skeleton/Skeleton.tsx
+// components/Skeleton/Skeleton.tsx
 var pulse = require_stitches_config.keyframes({
 	"0%": { opacity: 0 },
 	"100%": { opacity: "100%" }
@@ -48,7 +48,6 @@ var Skeleton = require_stitches_config.styled("div", {
 	} },
 	defaultVariants: { variant: "text" }
 });
-//#endregion
 exports.Skeleton = Skeleton;
 
 //# sourceMappingURL=Skeleton.cjs.map

package/dist/components/Skeleton/Skeleton.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.cjs","names":[],"sources":["../../../components/Skeleton/Skeleton.tsx"],"sourcesContent":["import { keyframes, styled, VariantProps } from '../../stitches.config';\n\nconst pulse = keyframes({\n  '0%': { opacity: 0 },\n  '100%': { opacity: '100%' },\n});\n\nexport const Skeleton = styled('div', {\n  backgroundColor: '$skeletonBackground',\n  position: 'relative',\n  overflow: 'hidden',\n  borderRadius: '3px',\n  height: 'auto',\n  width: 'auto',\n  '&:not(:empty)': {\n    '& > *': {\n      visibility: 'hidden',\n      display: 'block',\n    },\n    maxWidth: 'fit-content',\n  },\n\n  '&::after': {\n    animationName: `${pulse}`,\n    animationDuration: '500ms',\n    animationDirection: 'alternate',\n    animationIterationCount: 'infinite',\n    animationTimingFunction: 'ease-in-out',\n    backgroundColor: '$skeletonAnimation',\n    borderRadius: 'inherit',\n    bottom: 0,\n    content: '\"\"',\n    left: 0,\n    position: 'absolute',\n    right: 0,\n    top: 0,\n  },\n\n  variants: {\n    variant: {\n      square: {\n        borderRadius: '$2',\n      },\n      circle: {\n        borderRadius: '$round',\n      },\n      badge: {\n        borderRadius: '$pill',\n        display: 'inline-flex',\n      },\n      button: {\n        borderRadius: '$3',\n        display: 'inline-flex',\n      },\n      text: {\n        '&:empty:before': {\n          content: '\"\\\\00a0\"', // adds a space character before element\n        },\n      },\n    },\n  },\n  defaultVariants: {\n    variant: 'text',\n  },\n});\n\nexport type SkeletonVariants = VariantProps<typeof Skeleton>;\nexport type SkeletonProps = SkeletonVariants & NonNullable<unknown>;\n"],"mappings":";;AAEA,IAAM,QAAQ,wBAAA,UAAU;CACtB,MAAM,EAAE,SAAS,EAAE;CACnB,QAAQ,EAAE,SAAS,OAAO;AAC5B,CAAC;AAED,IAAa,WAAW,wBAAA,OAAO,OAAO;CACpC,iBAAiB;CACjB,UAAU;CACV,UAAU;CACV,cAAc;CACd,QAAQ;CACR,OAAO;CACP,iBAAiB;EACf,SAAS;GACP,YAAY;GACZ,SAAS;EACX;EACA,UAAU;CACZ;CAEA,YAAY;EACV,eAAe,GAAG;EAClB,mBAAmB;EACnB,oBAAoB;EACpB,yBAAyB;EACzB,yBAAyB;EACzB,iBAAiB;EACjB,cAAc;EACd,QAAQ;EACR,SAAS;EACT,MAAM;EACN,UAAU;EACV,OAAO;EACP,KAAK;CACP;CAEA,UAAU,EACR,SAAS;EACP,QAAQ,EACN,cAAc,KAChB;EACA,QAAQ,EACN,cAAc,SAChB;EACA,OAAO;GACL,cAAc;GACd,SAAS;EACX;EACA,QAAQ;GACN,cAAc;GACd,SAAS;EACX;EACA,MAAM,EACJ,kBAAkB,EAChB,SAAS,aACX,EACF;CACF,EACF;CACA,iBAAiB,EACf,SAAS,OACX;AACF,CAAC"}
+{"version":3,"file":"Skeleton.cjs","names":["keyframes","styled"],"sources":["../../../components/Skeleton/Skeleton.tsx"],"sourcesContent":["import { keyframes, styled, VariantProps } from '../../stitches.config';\n\nconst pulse = keyframes({\n  '0%': { opacity: 0 },\n  '100%': { opacity: '100%' },\n});\n\nexport const Skeleton = styled('div', {\n  backgroundColor: '$skeletonBackground',\n  position: 'relative',\n  overflow: 'hidden',\n  borderRadius: '3px',\n  height: 'auto',\n  width: 'auto',\n  '&:not(:empty)': {\n    '& > *': {\n      visibility: 'hidden',\n      display: 'block',\n    },\n    maxWidth: 'fit-content',\n  },\n\n  '&::after': {\n    animationName: `${pulse}`,\n    animationDuration: '500ms',\n    animationDirection: 'alternate',\n    animationIterationCount: 'infinite',\n    animationTimingFunction: 'ease-in-out',\n    backgroundColor: '$skeletonAnimation',\n    borderRadius: 'inherit',\n    bottom: 0,\n    content: '\"\"',\n    left: 0,\n    position: 'absolute',\n    right: 0,\n    top: 0,\n  },\n\n  variants: {\n    variant: {\n      square: {\n        borderRadius: '$2',\n      },\n      circle: {\n        borderRadius: '$round',\n      },\n      badge: {\n        borderRadius: '$pill',\n        display: 'inline-flex',\n      },\n      button: {\n        borderRadius: '$3',\n        display: 'inline-flex',\n      },\n      text: {\n        '&:empty:before': {\n          content: '\"\\\\00a0\"', // adds a space character before element\n        },\n      },\n    },\n  },\n  defaultVariants: {\n    variant: 'text',\n  },\n});\n\nexport type SkeletonVariants = VariantProps<typeof Skeleton>;\nexport type SkeletonProps = SkeletonVariants & NonNullable<unknown>;\n"],"mappings":";;AAEA,IAAM,QAAQA,wBAAAA,UAAU;CACtB,MAAM,EAAE,SAAS,EAAE;CACnB,QAAQ,EAAE,SAAS,OAAO;AAC5B,CAAC;AAED,IAAa,WAAWC,wBAAAA,OAAO,OAAO;CACpC,iBAAiB;CACjB,UAAU;CACV,UAAU;CACV,cAAc;CACd,QAAQ;CACR,OAAO;CACP,iBAAiB;EACf,SAAS;GACP,YAAY;GACZ,SAAS;EACX;EACA,UAAU;CACZ;CAEA,YAAY;EACV,eAAe,GAAG;EAClB,mBAAmB;EACnB,oBAAoB;EACpB,yBAAyB;EACzB,yBAAyB;EACzB,iBAAiB;EACjB,cAAc;EACd,QAAQ;EACR,SAAS;EACT,MAAM;EACN,UAAU;EACV,OAAO;EACP,KAAK;CACP;CAEA,UAAU,EACR,SAAS;EACP,QAAQ,EACN,cAAc,KAChB;EACA,QAAQ,EACN,cAAc,SAChB;EACA,OAAO;GACL,cAAc;GACd,SAAS;EACX;EACA,QAAQ;GACN,cAAc;GACd,SAAS;EACX;EACA,MAAM,EACJ,kBAAkB,EAChB,SAAS,aACX,EACF;CACF,EACF;CACA,iBAAiB,EACf,SAAS,OACX;AACF,CAAC"}

package/dist/components/Skeleton/Skeleton.js

@@ -1,4 +1,9 @@
 import { keyframes, styled } from "../../stitches.config.js";
+// components/Skeleton/Skeleton.tsx
+var pulse = keyframes({
+	"0%": { opacity: 0 },
+	"100%": { opacity: "100%" }
+});
 var Skeleton = styled("div", {
 	backgroundColor: "$skeletonBackground",
 	position: "relative",
@@ -14,10 +19,7 @@ var Skeleton = styled("div", {
 		maxWidth: "fit-content"
 	},
 	"&::after": {
-		animationName: `${keyframes({
-			"0%": { opacity: 0 },
-			"100%": { opacity: "100%" }
-		})}`,
+		animationName: `${pulse}`,
 		animationDuration: "500ms",
 		animationDirection: "alternate",
 		animationIterationCount: "infinite",
@@ -46,7 +48,6 @@ var Skeleton = styled("div", {
 	} },
 	defaultVariants: { variant: "text" }
 });
-//#endregion
 export { Skeleton };
 
 //# sourceMappingURL=Skeleton.js.map

package/dist/components/Skeleton/Skeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.js","names":[],"sources":["../../../components/Skeleton/Skeleton.tsx"],"sourcesContent":["import { keyframes, styled, VariantProps } from '../../stitches.config';\n\nconst pulse = keyframes({\n  '0%': { opacity: 0 },\n  '100%': { opacity: '100%' },\n});\n\nexport const Skeleton = styled('div', {\n  backgroundColor: '$skeletonBackground',\n  position: 'relative',\n  overflow: 'hidden',\n  borderRadius: '3px',\n  height: 'auto',\n  width: 'auto',\n  '&:not(:empty)': {\n    '& > *': {\n      visibility: 'hidden',\n      display: 'block',\n    },\n    maxWidth: 'fit-content',\n  },\n\n  '&::after': {\n    animationName: `${pulse}`,\n    animationDuration: '500ms',\n    animationDirection: 'alternate',\n    animationIterationCount: 'infinite',\n    animationTimingFunction: 'ease-in-out',\n    backgroundColor: '$skeletonAnimation',\n    borderRadius: 'inherit',\n    bottom: 0,\n    content: '\"\"',\n    left: 0,\n    position: 'absolute',\n    right: 0,\n    top: 0,\n  },\n\n  variants: {\n    variant: {\n      square: {\n        borderRadius: '$2',\n      },\n      circle: {\n        borderRadius: '$round',\n      },\n      badge: {\n        borderRadius: '$pill',\n        display: 'inline-flex',\n      },\n      button: {\n        borderRadius: '$3',\n        display: 'inline-flex',\n      },\n      text: {\n        '&:empty:before': {\n          content: '\"\\\\00a0\"', // adds a space character before element\n        },\n      },\n    },\n  },\n  defaultVariants: {\n    variant: 'text',\n  },\n});\n\nexport type SkeletonVariants = VariantProps<typeof Skeleton>;\nexport type SkeletonProps = SkeletonVariants & NonNullable<unknown>;\n"],"mappings":";AAOA,IAAa,WAAW,OAAO,OAAO;CACpC,iBAAiB;CACjB,UAAU;CACV,UAAU;CACV,cAAc;CACd,QAAQ;CACR,OAAO;CACP,iBAAiB;EACf,SAAS;GACP,YAAY;GACZ,SAAS;EACX;EACA,UAAU;CACZ;CAEA,YAAY;EACV,eAAe,GArBL,UAAU;GACtB,MAAM,EAAE,SAAS,EAAE;GACnB,QAAQ,EAAE,SAAS,OAAO;EAC5B,CAkBsB;EAClB,mBAAmB;EACnB,oBAAoB;EACpB,yBAAyB;EACzB,yBAAyB;EACzB,iBAAiB;EACjB,cAAc;EACd,QAAQ;EACR,SAAS;EACT,MAAM;EACN,UAAU;EACV,OAAO;EACP,KAAK;CACP;CAEA,UAAU,EACR,SAAS;EACP,QAAQ,EACN,cAAc,KAChB;EACA,QAAQ,EACN,cAAc,SAChB;EACA,OAAO;GACL,cAAc;GACd,SAAS;EACX;EACA,QAAQ;GACN,cAAc;GACd,SAAS;EACX;EACA,MAAM,EACJ,kBAAkB,EAChB,SAAS,aACX,EACF;CACF,EACF;CACA,iBAAiB,EACf,SAAS,OACX;AACF,CAAC"}
+{"version":3,"file":"Skeleton.js","names":[],"sources":["../../../components/Skeleton/Skeleton.tsx"],"sourcesContent":["import { keyframes, styled, VariantProps } from '../../stitches.config';\n\nconst pulse = keyframes({\n  '0%': { opacity: 0 },\n  '100%': { opacity: '100%' },\n});\n\nexport const Skeleton = styled('div', {\n  backgroundColor: '$skeletonBackground',\n  position: 'relative',\n  overflow: 'hidden',\n  borderRadius: '3px',\n  height: 'auto',\n  width: 'auto',\n  '&:not(:empty)': {\n    '& > *': {\n      visibility: 'hidden',\n      display: 'block',\n    },\n    maxWidth: 'fit-content',\n  },\n\n  '&::after': {\n    animationName: `${pulse}`,\n    animationDuration: '500ms',\n    animationDirection: 'alternate',\n    animationIterationCount: 'infinite',\n    animationTimingFunction: 'ease-in-out',\n    backgroundColor: '$skeletonAnimation',\n    borderRadius: 'inherit',\n    bottom: 0,\n    content: '\"\"',\n    left: 0,\n    position: 'absolute',\n    right: 0,\n    top: 0,\n  },\n\n  variants: {\n    variant: {\n      square: {\n        borderRadius: '$2',\n      },\n      circle: {\n        borderRadius: '$round',\n      },\n      badge: {\n        borderRadius: '$pill',\n        display: 'inline-flex',\n      },\n      button: {\n        borderRadius: '$3',\n        display: 'inline-flex',\n      },\n      text: {\n        '&:empty:before': {\n          content: '\"\\\\00a0\"', // adds a space character before element\n        },\n      },\n    },\n  },\n  defaultVariants: {\n    variant: 'text',\n  },\n});\n\nexport type SkeletonVariants = VariantProps<typeof Skeleton>;\nexport type SkeletonProps = SkeletonVariants & NonNullable<unknown>;\n"],"mappings":";;AAEA,IAAM,QAAQ,UAAU;CACtB,MAAM,EAAE,SAAS,EAAE;CACnB,QAAQ,EAAE,SAAS,OAAO;AAC5B,CAAC;AAED,IAAa,WAAW,OAAO,OAAO;CACpC,iBAAiB;CACjB,UAAU;CACV,UAAU;CACV,cAAc;CACd,QAAQ;CACR,OAAO;CACP,iBAAiB;EACf,SAAS;GACP,YAAY;GACZ,SAAS;EACX;EACA,UAAU;CACZ;CAEA,YAAY;EACV,eAAe,GAAG;EAClB,mBAAmB;EACnB,oBAAoB;EACpB,yBAAyB;EACzB,yBAAyB;EACzB,iBAAiB;EACjB,cAAc;EACd,QAAQ;EACR,SAAS;EACT,MAAM;EACN,UAAU;EACV,OAAO;EACP,KAAK;CACP;CAEA,UAAU,EACR,SAAS;EACP,QAAQ,EACN,cAAc,KAChB;EACA,QAAQ,EACN,cAAc,SAChB;EACA,OAAO;GACL,cAAc;GACd,SAAS;EACX;EACA,QAAQ;GACN,cAAc;GACd,SAAS;EACX;EACA,MAAM,EACJ,kBAAkB,EAChB,SAAS,aACX,EACF;CACF,EACF;CACA,iBAAiB,EACf,SAAS,OACX;AACF,CAAC"}

package/dist/components/Skeleton/Skeleton.themes.cjs

@@ -1,4 +1,4 @@
-//#region components/Skeleton/Skeleton.themes.ts
+// components/Skeleton/Skeleton.themes.ts
 var Theme;
 (function(_Theme) {
 	_Theme.getLight = () => ({
@@ -10,7 +10,6 @@ var Theme;
 		skeletonAnimation: "$deepBlue4"
 	});
 })(Theme || (Theme = {}));
-//#endregion
 Object.defineProperty(exports, "Theme", {
 	enumerable: true,
 	get: function() {

package/dist/components/Skeleton/Skeleton.themes.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.themes.cjs","names":[],"sources":["../../../components/Skeleton/Skeleton.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\n\nexport namespace Theme {\n  type Colors = {\n    skeletonBackground: Property.Color;\n    skeletonAnimation: Property.Color;\n  };\n\n  type Factory = (primaryColor?: ColorInfo) => Colors;\n\n  export const getLight: Factory = () => ({\n    skeletonBackground: '$slate4',\n    skeletonAnimation: '$slate6',\n  });\n\n  export const getDark: Factory = () => ({\n    skeletonBackground: '$deepBlue3',\n    skeletonAnimation: '$deepBlue4',\n  });\n}\n"],"mappings":";AAIO,IAAA;;CAQQ,OAAA,kBAA2B;EACtC,oBAAoB;EACpB,mBAAmB;CACrB;CAEa,OAAA,iBAA0B;EACrC,oBAAoB;EACpB,mBAAmB;CACrB;GACD,UAAA,QAAA,CAAA,EAAD"}
+{"version":3,"file":"Skeleton.themes.cjs","names":[],"sources":["../../../components/Skeleton/Skeleton.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\n\nexport namespace Theme {\n  type Colors = {\n    skeletonBackground: Property.Color;\n    skeletonAnimation: Property.Color;\n  };\n\n  type Factory = (primaryColor?: ColorInfo) => Colors;\n\n  export const getLight: Factory = () => ({\n    skeletonBackground: '$slate4',\n    skeletonAnimation: '$slate6',\n  });\n\n  export const getDark: Factory = () => ({\n    skeletonBackground: '$deepBlue3',\n    skeletonAnimation: '$deepBlue4',\n  });\n}\n"],"mappings":";AAIO,IAAU;CAAV,SAAA,QAAA;CAQQ,OAAA,kBAA2B;EACtC,oBAAoB;EACpB,mBAAmB;CACrB;CAEa,OAAA,iBAA0B;EACrC,oBAAoB;EACpB,mBAAmB;CACrB;AACD,EAAA,CAAA,UAAA,QAAA,CAAA,EAAD"}

package/dist/components/Skeleton/Skeleton.themes.js

@@ -1,4 +1,4 @@
-//#region components/Skeleton/Skeleton.themes.ts
+// components/Skeleton/Skeleton.themes.ts
 var Theme;
 (function(_Theme) {
 	_Theme.getLight = () => ({
@@ -10,7 +10,6 @@ var Theme;
 		skeletonAnimation: "$deepBlue4"
 	});
 })(Theme || (Theme = {}));
-//#endregion
 export { Theme };
 
 //# sourceMappingURL=Skeleton.themes.js.map

package/dist/components/Skeleton/Skeleton.themes.js.map

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.themes.js","names":[],"sources":["../../../components/Skeleton/Skeleton.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\n\nexport namespace Theme {\n  type Colors = {\n    skeletonBackground: Property.Color;\n    skeletonAnimation: Property.Color;\n  };\n\n  type Factory = (primaryColor?: ColorInfo) => Colors;\n\n  export const getLight: Factory = () => ({\n    skeletonBackground: '$slate4',\n    skeletonAnimation: '$slate6',\n  });\n\n  export const getDark: Factory = () => ({\n    skeletonBackground: '$deepBlue3',\n    skeletonAnimation: '$deepBlue4',\n  });\n}\n"],"mappings":";AAIO,IAAA;;CAQQ,OAAA,kBAA2B;EACtC,oBAAoB;EACpB,mBAAmB;CACrB;CAEa,OAAA,iBAA0B;EACrC,oBAAoB;EACpB,mBAAmB;CACrB;GACD,UAAA,QAAA,CAAA,EAAD"}
+{"version":3,"file":"Skeleton.themes.js","names":[],"sources":["../../../components/Skeleton/Skeleton.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\n\nexport namespace Theme {\n  type Colors = {\n    skeletonBackground: Property.Color;\n    skeletonAnimation: Property.Color;\n  };\n\n  type Factory = (primaryColor?: ColorInfo) => Colors;\n\n  export const getLight: Factory = () => ({\n    skeletonBackground: '$slate4',\n    skeletonAnimation: '$slate6',\n  });\n\n  export const getDark: Factory = () => ({\n    skeletonBackground: '$deepBlue3',\n    skeletonAnimation: '$deepBlue4',\n  });\n}\n"],"mappings":";AAIO,IAAU;CAAV,SAAA,QAAA;CAQQ,OAAA,kBAA2B;EACtC,oBAAoB;EACpB,mBAAmB;CACrB;CAEa,OAAA,iBAA0B;EACrC,oBAAoB;EACpB,mBAAmB;CACrB;AACD,EAAA,CAAA,UAAA,QAAA,CAAA,EAAD"}

package/dist/components/Skeleton/Skeleton.vanilla.cjs

@@ -4,7 +4,7 @@ const require_Skeleton_vanilla_css = require("./Skeleton.vanilla.css.cjs");
 let react = require("react");
 let _vanilla_extract_dynamic = require("@vanilla-extract/dynamic");
 let react_jsx_runtime = require("react/jsx-runtime");
-//#region components/Skeleton/Skeleton.vanilla.tsx
+// components/Skeleton/Skeleton.vanilla.tsx
 var SkeletonVanillaImpl = (0, react.forwardRef)(({ as, className, css, style, variant, ...props }, ref) => {
 	const Component = as || "div";
 	const { colors } = require_themeContext.useVanillaExtractTheme();
@@ -14,16 +14,16 @@ var SkeletonVanillaImpl = (0, react.forwardRef)(({ as, className, css, style, va
 		...style,
 		...(0, _vanilla_extract_dynamic.assignInlineVars)(vars)
 	};
+	const recipeClass = require_Skeleton_vanilla_css.skeletonRecipe({ variant });
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, {
 		ref,
-		className: `${require_Skeleton_vanilla_css.skeletonRecipe({ variant })} ${className || ""}`.trim(),
+		className: `${recipeClass} ${className || ""}`.trim(),
 		style: mergedStyles,
 		...props
 	});
 });
 SkeletonVanillaImpl.displayName = "SkeletonVanilla";
 var SkeletonVanilla = SkeletonVanillaImpl;
-//#endregion
 exports.SkeletonVanilla = SkeletonVanilla;
 
 //# sourceMappingURL=Skeleton.vanilla.cjs.map

package/dist/components/Skeleton/Skeleton.vanilla.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.vanilla.cjs","names":[],"sources":["../../../components/Skeleton/Skeleton.vanilla.tsx"],"sourcesContent":["import { assignInlineVars } from '@vanilla-extract/dynamic';\nimport { RecipeVariants } from '@vanilla-extract/recipes';\nimport { ElementType, forwardRef } from 'react';\n\nimport { CSSProps, processCSSProp } from '../../styles/cssProps';\nimport {\n  PolymorphicComponent,\n  PolymorphicComponentProps,\n  PolymorphicRef,\n} from '../../styles/polymorphic';\nimport { useVanillaExtractTheme } from '../../styles/themeContext';\nimport { skeletonRecipe } from './Skeleton.vanilla.css';\n\ntype SkeletonRecipeVariants = NonNullable<RecipeVariants<typeof skeletonRecipe>>;\n\ninterface SkeletonVanillaOwnProps extends SkeletonRecipeVariants, CSSProps {}\n\nexport type SkeletonVanillaProps<C extends ElementType = 'div'> = PolymorphicComponentProps<\n  C,\n  SkeletonVanillaOwnProps\n>;\n\ntype SkeletonVanillaComponent = PolymorphicComponent<'div', SkeletonVanillaProps<ElementType>>;\n\nconst SkeletonVanillaImpl = forwardRef(\n  <C extends ElementType = 'div'>(\n    { as, className, css, style, variant, ...props }: SkeletonVanillaProps<C>,\n    ref?: PolymorphicRef<C>,\n  ) => {\n    const Component = as || 'div';\n    const { colors } = useVanillaExtractTheme();\n    const { style: cssStyles, vars } = processCSSProp(css, colors);\n\n    const mergedStyles = {\n      ...cssStyles,\n      ...style,\n      ...assignInlineVars(vars),\n    };\n\n    const recipeClass = skeletonRecipe({ variant });\n\n    return (\n      <Component\n        ref={ref}\n        className={`${recipeClass} ${className || ''}`.trim()}\n        style={mergedStyles}\n        {...props}\n      />\n    );\n  },\n);\n\nSkeletonVanillaImpl.displayName = 'SkeletonVanilla';\n\nexport const SkeletonVanilla = SkeletonVanillaImpl as SkeletonVanillaComponent;\n"],"mappings":";;;;;;;AAwBA,IAAM,uBAAA,GAAA,MAAA,WAAA,EAEF,EAAE,IAAI,WAAW,KAAK,OAAO,SAAS,GAAG,SACzC,QACG;CACH,MAAM,YAAY,MAAM;CACxB,MAAM,EAAE,WAAW,qBAAA,uBAAuB;CAC1C,MAAM,EAAE,OAAO,WAAW,SAAS,iBAAA,eAAe,KAAK,MAAM;CAE7D,MAAM,eAAe;EACnB,GAAG;EACH,GAAG;EACH,IAAA,GAAA,yBAAA,iBAAA,CAAoB,IAAI;CAC1B;CAIA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,WAAD;EACO;EACL,WAAW,GALK,6BAAA,eAAe,EAAE,QAAQ,CAK3B,EAAY,GAAG,aAAa,KAAK,KAAK;EACpD,OAAO;EACP,GAAI;CACL,CAAA;AAEL,CACF;AAEA,oBAAoB,cAAc;AAElC,IAAa,kBAAkB"}
+{"version":3,"file":"Skeleton.vanilla.cjs","names":["forwardRef","useVanillaExtractTheme","processCSSProp","assignInlineVars","skeletonRecipe"],"sources":["../../../components/Skeleton/Skeleton.vanilla.tsx"],"sourcesContent":["import { assignInlineVars } from '@vanilla-extract/dynamic';\nimport { RecipeVariants } from '@vanilla-extract/recipes';\nimport { ElementType, forwardRef } from 'react';\n\nimport { CSSProps, processCSSProp } from '../../styles/cssProps';\nimport {\n  PolymorphicComponent,\n  PolymorphicComponentProps,\n  PolymorphicRef,\n} from '../../styles/polymorphic';\nimport { useVanillaExtractTheme } from '../../styles/themeContext';\nimport { skeletonRecipe } from './Skeleton.vanilla.css';\n\ntype SkeletonRecipeVariants = NonNullable<RecipeVariants<typeof skeletonRecipe>>;\n\ninterface SkeletonVanillaOwnProps extends SkeletonRecipeVariants, CSSProps {}\n\nexport type SkeletonVanillaProps<C extends ElementType = 'div'> = PolymorphicComponentProps<\n  C,\n  SkeletonVanillaOwnProps\n>;\n\ntype SkeletonVanillaComponent = PolymorphicComponent<'div', SkeletonVanillaProps<ElementType>>;\n\nconst SkeletonVanillaImpl = forwardRef(\n  <C extends ElementType = 'div'>(\n    { as, className, css, style, variant, ...props }: SkeletonVanillaProps<C>,\n    ref?: PolymorphicRef<C>,\n  ) => {\n    const Component = as || 'div';\n    const { colors } = useVanillaExtractTheme();\n    const { style: cssStyles, vars } = processCSSProp(css, colors);\n\n    const mergedStyles = {\n      ...cssStyles,\n      ...style,\n      ...assignInlineVars(vars),\n    };\n\n    const recipeClass = skeletonRecipe({ variant });\n\n    return (\n      <Component\n        ref={ref}\n        className={`${recipeClass} ${className || ''}`.trim()}\n        style={mergedStyles}\n        {...props}\n      />\n    );\n  },\n);\n\nSkeletonVanillaImpl.displayName = 'SkeletonVanilla';\n\nexport const SkeletonVanilla = SkeletonVanillaImpl as SkeletonVanillaComponent;\n"],"mappings":";;;;;;;AAwBA,IAAM,uBAAA,GAAsBA,MAAAA,WAAAA,EAExB,EAAE,IAAI,WAAW,KAAK,OAAO,SAAS,GAAG,SACzC,QACG;CACH,MAAM,YAAY,MAAM;CACxB,MAAM,EAAE,WAAWC,qBAAAA,uBAAuB;CAC1C,MAAM,EAAE,OAAO,WAAW,SAASC,iBAAAA,eAAe,KAAK,MAAM;CAE7D,MAAM,eAAe;EACnB,GAAG;EACH,GAAG;EACH,IAAA,GAAGC,yBAAAA,iBAAAA,CAAiB,IAAI;CAC1B;CAEA,MAAM,cAAcC,6BAAAA,eAAe,EAAE,QAAQ,CAAC;CAE9C,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,WAAD;EACO;EACL,WAAW,GAAG,YAAY,GAAG,aAAa,KAAK,KAAK;EACpD,OAAO;EACP,GAAI;CACL,CAAA;AAEL,CACF;AAEA,oBAAoB,cAAc;AAElC,IAAa,kBAAkB"}

package/dist/components/Skeleton/Skeleton.vanilla.css.cjs

@@ -1,5 +1,5 @@
 ;/* empty css                                      */
-//#region components/Skeleton/Skeleton.vanilla.css.ts
+// components/Skeleton/Skeleton.vanilla.css.ts
 var skeletonRecipe = (0, require("@vanilla-extract/recipes/createRuntimeFn").createRuntimeFn)({
 	defaultClassName: "_12qsecm2 _12qsecm1",
 	variantClassNames: { variant: {
@@ -12,7 +12,6 @@ var skeletonRecipe = (0, require("@vanilla-extract/recipes/createRuntimeFn").cre
 	defaultVariants: { variant: "text" },
 	compoundVariants: []
 });
-//#endregion
 exports.skeletonRecipe = skeletonRecipe;
 
 //# sourceMappingURL=Skeleton.vanilla.css.cjs.map

package/dist/components/Skeleton/Skeleton.vanilla.css.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.vanilla.css.cjs","names":[],"sources":["../../../components/Skeleton/Skeleton.vanilla.css.ts"],"sourcesContent":["import { globalStyle, keyframes, style } from '@vanilla-extract/css';\nimport { recipe } from '@vanilla-extract/recipes';\n\nimport { tokens } from '../../styles/tokens.css';\n\nconst pulse = keyframes({\n  '0%': { opacity: 0 },\n  '100%': { opacity: 1 },\n});\n\nconst skeletonBase = style({\n  backgroundColor: tokens.colors.skeletonBackground,\n  position: 'relative',\n  overflow: 'hidden',\n  borderRadius: '3px',\n  height: 'auto',\n  width: 'auto',\n\n  selectors: {\n    '&:not(:empty)': {\n      maxWidth: 'fit-content',\n    },\n  },\n\n  '::after': {\n    animationName: pulse,\n    animationDuration: '500ms',\n    animationDirection: 'alternate',\n    animationIterationCount: 'infinite',\n    animationTimingFunction: 'ease-in-out',\n    backgroundColor: tokens.colors.skeletonAnimation,\n    borderRadius: 'inherit',\n    bottom: 0,\n    content: '\"\"',\n    left: 0,\n    position: 'absolute',\n    right: 0,\n    top: 0,\n  },\n});\n\n// Global styles for child elements inside skeleton\nglobalStyle(`${skeletonBase}:not(:empty) > *`, {\n  visibility: 'hidden',\n  display: 'block',\n});\n\nexport const skeletonRecipe = recipe({\n  base: skeletonBase,\n\n  variants: {\n    variant: {\n      square: {\n        borderRadius: tokens.radii['2'],\n      },\n      circle: {\n        borderRadius: tokens.radii.round,\n      },\n      badge: {\n        borderRadius: tokens.radii.pill,\n        display: 'inline-flex',\n      },\n      button: {\n        borderRadius: tokens.radii['3'],\n        display: 'inline-flex',\n      },\n      text: {\n        selectors: {\n          '&:empty::before': {\n            content: '\"\\\\00a0\"',\n          },\n        },\n      },\n    },\n  },\n\n  defaultVariants: {\n    variant: 'text',\n  },\n});\n"],"mappings":""}
+{"version":3,"file":"Skeleton.vanilla.css.cjs","names":["_7a468"],"sources":["../../../components/Skeleton/Skeleton.vanilla.css.ts"],"sourcesContent":["import { globalStyle, keyframes, style } from '@vanilla-extract/css';\nimport { recipe } from '@vanilla-extract/recipes';\n\nimport { tokens } from '../../styles/tokens.css';\n\nconst pulse = keyframes({\n  '0%': { opacity: 0 },\n  '100%': { opacity: 1 },\n});\n\nconst skeletonBase = style({\n  backgroundColor: tokens.colors.skeletonBackground,\n  position: 'relative',\n  overflow: 'hidden',\n  borderRadius: '3px',\n  height: 'auto',\n  width: 'auto',\n\n  selectors: {\n    '&:not(:empty)': {\n      maxWidth: 'fit-content',\n    },\n  },\n\n  '::after': {\n    animationName: pulse,\n    animationDuration: '500ms',\n    animationDirection: 'alternate',\n    animationIterationCount: 'infinite',\n    animationTimingFunction: 'ease-in-out',\n    backgroundColor: tokens.colors.skeletonAnimation,\n    borderRadius: 'inherit',\n    bottom: 0,\n    content: '\"\"',\n    left: 0,\n    position: 'absolute',\n    right: 0,\n    top: 0,\n  },\n});\n\n// Global styles for child elements inside skeleton\nglobalStyle(`${skeletonBase}:not(:empty) > *`, {\n  visibility: 'hidden',\n  display: 'block',\n});\n\nexport const skeletonRecipe = recipe({\n  base: skeletonBase,\n\n  variants: {\n    variant: {\n      square: {\n        borderRadius: tokens.radii['2'],\n      },\n      circle: {\n        borderRadius: tokens.radii.round,\n      },\n      badge: {\n        borderRadius: tokens.radii.pill,\n        display: 'inline-flex',\n      },\n      button: {\n        borderRadius: tokens.radii['3'],\n        display: 'inline-flex',\n      },\n      text: {\n        selectors: {\n          '&:empty::before': {\n            content: '\"\\\\00a0\"',\n          },\n        },\n      },\n    },\n  },\n\n  defaultVariants: {\n    variant: 'text',\n  },\n});\n"],"mappings":""}

package/dist/components/Skeleton/Skeleton.vanilla.css.js

@@ -1,6 +1,6 @@
 /* empty css                                    */
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
-//#region components/Skeleton/Skeleton.vanilla.css.ts
+// components/Skeleton/Skeleton.vanilla.css.ts
 var skeletonRecipe = createRuntimeFn({
 	defaultClassName: "_12qsecm2 _12qsecm1",
 	variantClassNames: { variant: {
@@ -13,7 +13,6 @@ var skeletonRecipe = createRuntimeFn({
 	defaultVariants: { variant: "text" },
 	compoundVariants: []
 });
-//#endregion
 export { skeletonRecipe };
 
 //# sourceMappingURL=Skeleton.vanilla.css.js.map

package/dist/components/Skeleton/Skeleton.vanilla.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.vanilla.css.js","names":[],"sources":["../../../components/Skeleton/Skeleton.vanilla.css.ts"],"sourcesContent":["import { globalStyle, keyframes, style } from '@vanilla-extract/css';\nimport { recipe } from '@vanilla-extract/recipes';\n\nimport { tokens } from '../../styles/tokens.css';\n\nconst pulse = keyframes({\n  '0%': { opacity: 0 },\n  '100%': { opacity: 1 },\n});\n\nconst skeletonBase = style({\n  backgroundColor: tokens.colors.skeletonBackground,\n  position: 'relative',\n  overflow: 'hidden',\n  borderRadius: '3px',\n  height: 'auto',\n  width: 'auto',\n\n  selectors: {\n    '&:not(:empty)': {\n      maxWidth: 'fit-content',\n    },\n  },\n\n  '::after': {\n    animationName: pulse,\n    animationDuration: '500ms',\n    animationDirection: 'alternate',\n    animationIterationCount: 'infinite',\n    animationTimingFunction: 'ease-in-out',\n    backgroundColor: tokens.colors.skeletonAnimation,\n    borderRadius: 'inherit',\n    bottom: 0,\n    content: '\"\"',\n    left: 0,\n    position: 'absolute',\n    right: 0,\n    top: 0,\n  },\n});\n\n// Global styles for child elements inside skeleton\nglobalStyle(`${skeletonBase}:not(:empty) > *`, {\n  visibility: 'hidden',\n  display: 'block',\n});\n\nexport const skeletonRecipe = recipe({\n  base: skeletonBase,\n\n  variants: {\n    variant: {\n      square: {\n        borderRadius: tokens.radii['2'],\n      },\n      circle: {\n        borderRadius: tokens.radii.round,\n      },\n      badge: {\n        borderRadius: tokens.radii.pill,\n        display: 'inline-flex',\n      },\n      button: {\n        borderRadius: tokens.radii['3'],\n        display: 'inline-flex',\n      },\n      text: {\n        selectors: {\n          '&:empty::before': {\n            content: '\"\\\\00a0\"',\n          },\n        },\n      },\n    },\n  },\n\n  defaultVariants: {\n    variant: 'text',\n  },\n});\n"],"mappings":""}
+{"version":3,"file":"Skeleton.vanilla.css.js","names":["_7a468"],"sources":["../../../components/Skeleton/Skeleton.vanilla.css.ts"],"sourcesContent":["import { globalStyle, keyframes, style } from '@vanilla-extract/css';\nimport { recipe } from '@vanilla-extract/recipes';\n\nimport { tokens } from '../../styles/tokens.css';\n\nconst pulse = keyframes({\n  '0%': { opacity: 0 },\n  '100%': { opacity: 1 },\n});\n\nconst skeletonBase = style({\n  backgroundColor: tokens.colors.skeletonBackground,\n  position: 'relative',\n  overflow: 'hidden',\n  borderRadius: '3px',\n  height: 'auto',\n  width: 'auto',\n\n  selectors: {\n    '&:not(:empty)': {\n      maxWidth: 'fit-content',\n    },\n  },\n\n  '::after': {\n    animationName: pulse,\n    animationDuration: '500ms',\n    animationDirection: 'alternate',\n    animationIterationCount: 'infinite',\n    animationTimingFunction: 'ease-in-out',\n    backgroundColor: tokens.colors.skeletonAnimation,\n    borderRadius: 'inherit',\n    bottom: 0,\n    content: '\"\"',\n    left: 0,\n    position: 'absolute',\n    right: 0,\n    top: 0,\n  },\n});\n\n// Global styles for child elements inside skeleton\nglobalStyle(`${skeletonBase}:not(:empty) > *`, {\n  visibility: 'hidden',\n  display: 'block',\n});\n\nexport const skeletonRecipe = recipe({\n  base: skeletonBase,\n\n  variants: {\n    variant: {\n      square: {\n        borderRadius: tokens.radii['2'],\n      },\n      circle: {\n        borderRadius: tokens.radii.round,\n      },\n      badge: {\n        borderRadius: tokens.radii.pill,\n        display: 'inline-flex',\n      },\n      button: {\n        borderRadius: tokens.radii['3'],\n        display: 'inline-flex',\n      },\n      text: {\n        selectors: {\n          '&:empty::before': {\n            content: '\"\\\\00a0\"',\n          },\n        },\n      },\n    },\n  },\n\n  defaultVariants: {\n    variant: 'text',\n  },\n});\n"],"mappings":""}

package/dist/components/Skeleton/Skeleton.vanilla.js

@@ -4,7 +4,7 @@ import { skeletonRecipe } from "./Skeleton.vanilla.css.js";
 import { forwardRef } from "react";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { jsx } from "react/jsx-runtime";
-//#region components/Skeleton/Skeleton.vanilla.tsx
+// components/Skeleton/Skeleton.vanilla.tsx
 var SkeletonVanillaImpl = forwardRef(({ as, className, css, style, variant, ...props }, ref) => {
 	const Component = as || "div";
 	const { colors } = useVanillaExtractTheme();
@@ -14,16 +14,16 @@ var SkeletonVanillaImpl = forwardRef(({ as, className, css, style, variant, ...p
 		...style,
 		...assignInlineVars(vars)
 	};
+	const recipeClass = skeletonRecipe({ variant });
 	return /* @__PURE__ */ jsx(Component, {
 		ref,
-		className: `${skeletonRecipe({ variant })} ${className || ""}`.trim(),
+		className: `${recipeClass} ${className || ""}`.trim(),
 		style: mergedStyles,
 		...props
 	});
 });
 SkeletonVanillaImpl.displayName = "SkeletonVanilla";
 var SkeletonVanilla = SkeletonVanillaImpl;
-//#endregion
 export { SkeletonVanilla };
 
 //# sourceMappingURL=Skeleton.vanilla.js.map

package/dist/components/Skeleton/Skeleton.vanilla.js.map

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.vanilla.js","names":[],"sources":["../../../components/Skeleton/Skeleton.vanilla.tsx"],"sourcesContent":["import { assignInlineVars } from '@vanilla-extract/dynamic';\nimport { RecipeVariants } from '@vanilla-extract/recipes';\nimport { ElementType, forwardRef } from 'react';\n\nimport { CSSProps, processCSSProp } from '../../styles/cssProps';\nimport {\n  PolymorphicComponent,\n  PolymorphicComponentProps,\n  PolymorphicRef,\n} from '../../styles/polymorphic';\nimport { useVanillaExtractTheme } from '../../styles/themeContext';\nimport { skeletonRecipe } from './Skeleton.vanilla.css';\n\ntype SkeletonRecipeVariants = NonNullable<RecipeVariants<typeof skeletonRecipe>>;\n\ninterface SkeletonVanillaOwnProps extends SkeletonRecipeVariants, CSSProps {}\n\nexport type SkeletonVanillaProps<C extends ElementType = 'div'> = PolymorphicComponentProps<\n  C,\n  SkeletonVanillaOwnProps\n>;\n\ntype SkeletonVanillaComponent = PolymorphicComponent<'div', SkeletonVanillaProps<ElementType>>;\n\nconst SkeletonVanillaImpl = forwardRef(\n  <C extends ElementType = 'div'>(\n    { as, className, css, style, variant, ...props }: SkeletonVanillaProps<C>,\n    ref?: PolymorphicRef<C>,\n  ) => {\n    const Component = as || 'div';\n    const { colors } = useVanillaExtractTheme();\n    const { style: cssStyles, vars } = processCSSProp(css, colors);\n\n    const mergedStyles = {\n      ...cssStyles,\n      ...style,\n      ...assignInlineVars(vars),\n    };\n\n    const recipeClass = skeletonRecipe({ variant });\n\n    return (\n      <Component\n        ref={ref}\n        className={`${recipeClass} ${className || ''}`.trim()}\n        style={mergedStyles}\n        {...props}\n      />\n    );\n  },\n);\n\nSkeletonVanillaImpl.displayName = 'SkeletonVanilla';\n\nexport const SkeletonVanilla = SkeletonVanillaImpl as SkeletonVanillaComponent;\n"],"mappings":";;;;;;;AAwBA,IAAM,sBAAsB,YAExB,EAAE,IAAI,WAAW,KAAK,OAAO,SAAS,GAAG,SACzC,QACG;CACH,MAAM,YAAY,MAAM;CACxB,MAAM,EAAE,WAAW,uBAAuB;CAC1C,MAAM,EAAE,OAAO,WAAW,SAAS,eAAe,KAAK,MAAM;CAE7D,MAAM,eAAe;EACnB,GAAG;EACH,GAAG;EACH,GAAG,iBAAiB,IAAI;CAC1B;CAIA,OACE,oBAAC,WAAD;EACO;EACL,WAAW,GALK,eAAe,EAAE,QAAQ,CAK3B,EAAY,GAAG,aAAa,KAAK,KAAK;EACpD,OAAO;EACP,GAAI;CACL,CAAA;AAEL,CACF;AAEA,oBAAoB,cAAc;AAElC,IAAa,kBAAkB"}
+{"version":3,"file":"Skeleton.vanilla.js","names":[],"sources":["../../../components/Skeleton/Skeleton.vanilla.tsx"],"sourcesContent":["import { assignInlineVars } from '@vanilla-extract/dynamic';\nimport { RecipeVariants } from '@vanilla-extract/recipes';\nimport { ElementType, forwardRef } from 'react';\n\nimport { CSSProps, processCSSProp } from '../../styles/cssProps';\nimport {\n  PolymorphicComponent,\n  PolymorphicComponentProps,\n  PolymorphicRef,\n} from '../../styles/polymorphic';\nimport { useVanillaExtractTheme } from '../../styles/themeContext';\nimport { skeletonRecipe } from './Skeleton.vanilla.css';\n\ntype SkeletonRecipeVariants = NonNullable<RecipeVariants<typeof skeletonRecipe>>;\n\ninterface SkeletonVanillaOwnProps extends SkeletonRecipeVariants, CSSProps {}\n\nexport type SkeletonVanillaProps<C extends ElementType = 'div'> = PolymorphicComponentProps<\n  C,\n  SkeletonVanillaOwnProps\n>;\n\ntype SkeletonVanillaComponent = PolymorphicComponent<'div', SkeletonVanillaProps<ElementType>>;\n\nconst SkeletonVanillaImpl = forwardRef(\n  <C extends ElementType = 'div'>(\n    { as, className, css, style, variant, ...props }: SkeletonVanillaProps<C>,\n    ref?: PolymorphicRef<C>,\n  ) => {\n    const Component = as || 'div';\n    const { colors } = useVanillaExtractTheme();\n    const { style: cssStyles, vars } = processCSSProp(css, colors);\n\n    const mergedStyles = {\n      ...cssStyles,\n      ...style,\n      ...assignInlineVars(vars),\n    };\n\n    const recipeClass = skeletonRecipe({ variant });\n\n    return (\n      <Component\n        ref={ref}\n        className={`${recipeClass} ${className || ''}`.trim()}\n        style={mergedStyles}\n        {...props}\n      />\n    );\n  },\n);\n\nSkeletonVanillaImpl.displayName = 'SkeletonVanilla';\n\nexport const SkeletonVanilla = SkeletonVanillaImpl as SkeletonVanillaComponent;\n"],"mappings":";;;;;;;AAwBA,IAAM,sBAAsB,YAExB,EAAE,IAAI,WAAW,KAAK,OAAO,SAAS,GAAG,SACzC,QACG;CACH,MAAM,YAAY,MAAM;CACxB,MAAM,EAAE,WAAW,uBAAuB;CAC1C,MAAM,EAAE,OAAO,WAAW,SAAS,eAAe,KAAK,MAAM;CAE7D,MAAM,eAAe;EACnB,GAAG;EACH,GAAG;EACH,GAAG,iBAAiB,IAAI;CAC1B;CAEA,MAAM,cAAc,eAAe,EAAE,QAAQ,CAAC;CAE9C,OACE,oBAAC,WAAD;EACO;EACL,WAAW,GAAG,YAAY,GAAG,aAAa,KAAK,KAAK;EACpD,OAAO;EACP,GAAI;CACL,CAAA;AAEL,CACF;AAEA,oBAAoB,cAAc;AAElC,IAAa,kBAAkB"}

package/dist/components/Switch/Switch.cjs

@@ -6,7 +6,7 @@ react = require_runtime.__toESM(react, 1);
 let react_jsx_runtime = require("react/jsx-runtime");
 let _radix_ui_react_switch = require("@radix-ui/react-switch");
 _radix_ui_react_switch = require_runtime.__toESM(_radix_ui_react_switch, 1);
-//#region components/Switch/Switch.tsx
+// components/Switch/Switch.tsx
 var THUMB_DIAMETER = 14;
 var LARGE_RATIO = 1.5;
 var THUMB_GAP = 2;
@@ -23,7 +23,7 @@ var StyledThumb = require_stitches_config.styled(_radix_ui_react_switch.Thumb, {
 	transition: "transform 100ms cubic-bezier(0.22, 1, 0.36, 1)",
 	transform: `translateX(${THUMB_GAP}px)`,
 	willChange: "transform",
-	"&[data-state=\"checked\"]": { transform: `translateX(${ROOT_WIDTH - THUMB_GAP - THUMB_DIAMETER}px)` }
+	"&[data-state=\"checked\"]": { transform: `translateX(16px)` }
 });
 var StyledSwitch = require_stitches_config.styled(_radix_ui_react_switch.Root, {
 	all: "unset",
@@ -67,7 +67,7 @@ var StyledSwitch = require_stitches_config.styled(_radix_ui_react_switch.Root, {
 				width: THUMB_DIAMETER * LARGE_RATIO,
 				height: THUMB_DIAMETER * LARGE_RATIO,
 				transform: `translateX(${LARGE_RATIO * THUMB_GAP})`,
-				"&[data-state=\"checked\"]": { transform: `translateX(${LARGE_RATIO * (ROOT_WIDTH - THUMB_GAP - THUMB_DIAMETER)}px)` }
+				"&[data-state=\"checked\"]": { transform: `translateX(${LARGE_RATIO * 16}px)` }
 			}
 		}
 	} },
@@ -78,7 +78,6 @@ var Switch = react.default.forwardRef((props, forwardedRef) => /* @__PURE__ */ (
 	ref: forwardedRef,
 	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledThumb, {})
 }));
-//#endregion
 exports.Switch = Switch;
 
 //# sourceMappingURL=Switch.cjs.map

package/dist/components/Switch/Switch.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.cjs","names":[],"sources":["../../../components/Switch/Switch.tsx"],"sourcesContent":["import * as SwitchPrimitive from '@radix-ui/react-switch';\nimport React from 'react';\n\nimport { CSS, styled, VariantProps } from '../../stitches.config';\nimport { elevationVariants } from '../Elevation';\n\n// CONSTANTS\nconst THUMB_DIAMETER = 14; // @FIXME: shouldn't this size be part of theme ?\nconst LARGE_RATIO = 1.5;\nconst THUMB_GAP = 2; // Gap between thumb and background\nconst ROOT_WIDTH = 32;\nconst ROOT_HEIGHT = 18;\n\n// COMPONENTS\nconst StyledThumb = styled(SwitchPrimitive.Thumb, {\n  position: 'absolute',\n  left: 0,\n  width: THUMB_DIAMETER,\n  height: THUMB_DIAMETER,\n  backgroundColor: '$switchThumb',\n  borderRadius: '$round',\n  boxShadow: 'rgba(0, 0, 0, 0.3) 0px 0px 1px, rgba(0, 0, 0, 0.2) 0px 1px 2px;',\n  transition: 'transform 100ms cubic-bezier(0.22, 1, 0.36, 1)',\n  transform: `translateX(${THUMB_GAP}px)`,\n  willChange: 'transform',\n\n  '&[data-state=\"checked\"]': {\n    transform: `translateX(${ROOT_WIDTH - THUMB_GAP - THUMB_DIAMETER}px)`,\n  },\n});\n\nconst StyledSwitch = styled(SwitchPrimitive.Root, {\n  all: 'unset',\n  boxSizing: 'border-box',\n  userSelect: 'none',\n  '&::before': {\n    boxSizing: 'border-box',\n  },\n  '&::after': {\n    boxSizing: 'border-box',\n  },\n\n  // Reset\n  alignItems: 'center',\n  display: 'inline-flex',\n  justifyContent: 'center',\n  lineHeight: '1',\n  margin: '0',\n  outline: 'none',\n  WebkitTapHighlightColor: 'rgba(0,0,0,0)',\n\n  backgroundColor: '$switchBackground',\n  borderRadius: '$pill',\n  position: 'relative',\n  '@hover': {\n    '&:hover': {\n      cursor: 'pointer',\n      [`& ${StyledThumb}`]: {\n        ...elevationVariants[1],\n      },\n    },\n  },\n  '&:focus': {\n    outline: '2px solid $switchFocusBorder',\n    [`& ${StyledThumb}`]: {\n      ...elevationVariants[2],\n    },\n  },\n  '&:disabled': {\n    pointerEvents: 'none',\n    opacity: 0.38,\n  },\n  '&[data-state=\"checked\"]': {\n    backgroundColor: '$switchActiveBackground',\n  },\n\n  variants: {\n    size: {\n      '1': {\n        width: ROOT_WIDTH,\n        height: ROOT_HEIGHT,\n        m: '$2',\n      },\n      '2': {\n        width: ROOT_WIDTH * LARGE_RATIO,\n        height: ROOT_HEIGHT * LARGE_RATIO,\n        [`& ${StyledThumb}`]: {\n          width: THUMB_DIAMETER * LARGE_RATIO,\n          height: THUMB_DIAMETER * LARGE_RATIO,\n          transform: `translateX(${LARGE_RATIO * THUMB_GAP})`,\n\n          '&[data-state=\"checked\"]': {\n            transform: `translateX(${LARGE_RATIO * (ROOT_WIDTH - THUMB_GAP - THUMB_DIAMETER)}px)`,\n          },\n        },\n      },\n    },\n  },\n  defaultVariants: {\n    size: '1',\n  },\n});\n\nexport type SwitchVariants = VariantProps<typeof StyledSwitch>;\ntype SwitchPrimitiveProps = Omit<React.ComponentProps<typeof SwitchPrimitive.Root>, 'as'>;\nexport type SwitchProps = SwitchPrimitiveProps & SwitchVariants & { css?: CSS };\n\nexport const Switch = React.forwardRef<React.ElementRef<typeof StyledSwitch>, SwitchProps>(\n  (props, forwardedRef) => (\n    <StyledSwitch {...props} ref={forwardedRef}>\n      <StyledThumb />\n    </StyledSwitch>\n  )\n);\n"],"mappings":";;;;;;;;;AAOA,IAAM,iBAAiB;AACvB,IAAM,cAAc;AACpB,IAAM,YAAY;AAClB,IAAM,aAAa;AACnB,IAAM,cAAc;AAGpB,IAAM,cAAc,wBAAA,OAAO,uBAAgB,OAAO;CAChD,UAAU;CACV,MAAM;CACN,OAAO;CACP,QAAQ;CACR,iBAAiB;CACjB,cAAc;CACd,WAAW;CACX,YAAY;CACZ,WAAW,cAAc,UAAU;CACnC,YAAY;CAEZ,6BAA2B,EACzB,WAAW,cAAc,aAAa,YAAY,eAAe,KACnE;AACF,CAAC;AAED,IAAM,eAAe,wBAAA,OAAO,uBAAgB,MAAM;CAChD,KAAK;CACL,WAAW;CACX,YAAY;CACZ,aAAa,EACX,WAAW,aACb;CACA,YAAY,EACV,WAAW,aACb;CAGA,YAAY;CACZ,SAAS;CACT,gBAAgB;CAChB,YAAY;CACZ,QAAQ;CACR,SAAS;CACT,yBAAyB;CAEzB,iBAAiB;CACjB,cAAc;CACd,UAAU;CACV,UAAU,EACR,WAAW;EACT,QAAQ;GACP,KAAK,gBAAgB,EACpB,GAAG,kBAAA,kBAAkB,GACvB;CACF,EACF;CACA,WAAW;EACT,SAAS;GACR,KAAK,gBAAgB,EACpB,GAAG,kBAAA,kBAAkB,GACvB;CACF;CACA,cAAc;EACZ,eAAe;EACf,SAAS;CACX;CACA,6BAA2B,EACzB,iBAAiB,0BACnB;CAEA,UAAU,EACR,MAAM;EACJ,KAAK;GACH,OAAO;GACP,QAAQ;GACR,GAAG;EACL;EACA,KAAK;GACH,OAAO,aAAa;GACpB,QAAQ,cAAc;IACrB,KAAK,gBAAgB;IACpB,OAAO,iBAAiB;IACxB,QAAQ,iBAAiB;IACzB,WAAW,cAAc,cAAc,UAAU;IAEjD,6BAA2B,EACzB,WAAW,cAAc,eAAe,aAAa,YAAY,gBAAgB,KACnF;GACF;EACF;CACF,EACF;CACA,iBAAiB,EACf,MAAM,IACR;AACF,CAAC;AAMD,IAAa,SAAS,MAAA,QAAM,YACzB,OAAO,iBACN,iBAAA,GAAA,kBAAA,IAAA,CAAC,cAAD;CAAc,GAAI;CAAO,KAAK;WAC5B,iBAAA,GAAA,kBAAA,IAAA,CAAC,aAAD,CAAc,CAAA;AACF,CAAA,CAElB"}
+{"version":3,"file":"Switch.cjs","names":["styled","SwitchPrimitive","elevationVariants","React"],"sources":["../../../components/Switch/Switch.tsx"],"sourcesContent":["import * as SwitchPrimitive from '@radix-ui/react-switch';\nimport React from 'react';\n\nimport { CSS, styled, VariantProps } from '../../stitches.config';\nimport { elevationVariants } from '../Elevation';\n\n// CONSTANTS\nconst THUMB_DIAMETER = 14; // @FIXME: shouldn't this size be part of theme ?\nconst LARGE_RATIO = 1.5;\nconst THUMB_GAP = 2; // Gap between thumb and background\nconst ROOT_WIDTH = 32;\nconst ROOT_HEIGHT = 18;\n\n// COMPONENTS\nconst StyledThumb = styled(SwitchPrimitive.Thumb, {\n  position: 'absolute',\n  left: 0,\n  width: THUMB_DIAMETER,\n  height: THUMB_DIAMETER,\n  backgroundColor: '$switchThumb',\n  borderRadius: '$round',\n  boxShadow: 'rgba(0, 0, 0, 0.3) 0px 0px 1px, rgba(0, 0, 0, 0.2) 0px 1px 2px;',\n  transition: 'transform 100ms cubic-bezier(0.22, 1, 0.36, 1)',\n  transform: `translateX(${THUMB_GAP}px)`,\n  willChange: 'transform',\n\n  '&[data-state=\"checked\"]': {\n    transform: `translateX(${ROOT_WIDTH - THUMB_GAP - THUMB_DIAMETER}px)`,\n  },\n});\n\nconst StyledSwitch = styled(SwitchPrimitive.Root, {\n  all: 'unset',\n  boxSizing: 'border-box',\n  userSelect: 'none',\n  '&::before': {\n    boxSizing: 'border-box',\n  },\n  '&::after': {\n    boxSizing: 'border-box',\n  },\n\n  // Reset\n  alignItems: 'center',\n  display: 'inline-flex',\n  justifyContent: 'center',\n  lineHeight: '1',\n  margin: '0',\n  outline: 'none',\n  WebkitTapHighlightColor: 'rgba(0,0,0,0)',\n\n  backgroundColor: '$switchBackground',\n  borderRadius: '$pill',\n  position: 'relative',\n  '@hover': {\n    '&:hover': {\n      cursor: 'pointer',\n      [`& ${StyledThumb}`]: {\n        ...elevationVariants[1],\n      },\n    },\n  },\n  '&:focus': {\n    outline: '2px solid $switchFocusBorder',\n    [`& ${StyledThumb}`]: {\n      ...elevationVariants[2],\n    },\n  },\n  '&:disabled': {\n    pointerEvents: 'none',\n    opacity: 0.38,\n  },\n  '&[data-state=\"checked\"]': {\n    backgroundColor: '$switchActiveBackground',\n  },\n\n  variants: {\n    size: {\n      '1': {\n        width: ROOT_WIDTH,\n        height: ROOT_HEIGHT,\n        m: '$2',\n      },\n      '2': {\n        width: ROOT_WIDTH * LARGE_RATIO,\n        height: ROOT_HEIGHT * LARGE_RATIO,\n        [`& ${StyledThumb}`]: {\n          width: THUMB_DIAMETER * LARGE_RATIO,\n          height: THUMB_DIAMETER * LARGE_RATIO,\n          transform: `translateX(${LARGE_RATIO * THUMB_GAP})`,\n\n          '&[data-state=\"checked\"]': {\n            transform: `translateX(${LARGE_RATIO * (ROOT_WIDTH - THUMB_GAP - THUMB_DIAMETER)}px)`,\n          },\n        },\n      },\n    },\n  },\n  defaultVariants: {\n    size: '1',\n  },\n});\n\nexport type SwitchVariants = VariantProps<typeof StyledSwitch>;\ntype SwitchPrimitiveProps = Omit<React.ComponentProps<typeof SwitchPrimitive.Root>, 'as'>;\nexport type SwitchProps = SwitchPrimitiveProps & SwitchVariants & { css?: CSS };\n\nexport const Switch = React.forwardRef<React.ElementRef<typeof StyledSwitch>, SwitchProps>(\n  (props, forwardedRef) => (\n    <StyledSwitch {...props} ref={forwardedRef}>\n      <StyledThumb />\n    </StyledSwitch>\n  )\n);\n"],"mappings":";;;;;;;;;AAOA,IAAM,iBAAiB;AACvB,IAAM,cAAc;AACpB,IAAM,YAAY;AAClB,IAAM,aAAa;AACnB,IAAM,cAAc;AAGpB,IAAM,cAAcA,wBAAAA,OAAOC,uBAAgB,OAAO;CAChD,UAAU;CACV,MAAM;CACN,OAAO;CACP,QAAQ;CACR,iBAAiB;CACjB,cAAc;CACd,WAAW;CACX,YAAY;CACZ,WAAW,cAAc,UAAU;CACnC,YAAY;CAEZ,6BAA2B,EACzB,WAAW,mBACb;AACF,CAAC;AAED,IAAM,eAAeD,wBAAAA,OAAOC,uBAAgB,MAAM;CAChD,KAAK;CACL,WAAW;CACX,YAAY;CACZ,aAAa,EACX,WAAW,aACb;CACA,YAAY,EACV,WAAW,aACb;CAGA,YAAY;CACZ,SAAS;CACT,gBAAgB;CAChB,YAAY;CACZ,QAAQ;CACR,SAAS;CACT,yBAAyB;CAEzB,iBAAiB;CACjB,cAAc;CACd,UAAU;CACV,UAAU,EACR,WAAW;EACT,QAAQ;GACP,KAAK,gBAAgB,EACpB,GAAGC,kBAAAA,kBAAkB,GACvB;CACF,EACF;CACA,WAAW;EACT,SAAS;GACR,KAAK,gBAAgB,EACpB,GAAGA,kBAAAA,kBAAkB,GACvB;CACF;CACA,cAAc;EACZ,eAAe;EACf,SAAS;CACX;CACA,6BAA2B,EACzB,iBAAiB,0BACnB;CAEA,UAAU,EACR,MAAM;EACJ,KAAK;GACH,OAAO;GACP,QAAQ;GACR,GAAG;EACL;EACA,KAAK;GACH,OAAO,aAAa;GACpB,QAAQ,cAAc;IACrB,KAAK,gBAAgB;IACpB,OAAO,iBAAiB;IACxB,QAAQ,iBAAiB;IACzB,WAAW,cAAc,cAAc,UAAU;IAEjD,6BAA2B,EACzB,WAAW,cAAc,cAAe,GAAyC,KACnF;GACF;EACF;CACF,EACF;CACA,iBAAiB,EACf,MAAM,IACR;AACF,CAAC;AAMD,IAAa,SAASC,MAAAA,QAAM,YACzB,OAAO,iBACN,iBAAA,GAAA,kBAAA,IAAA,CAAC,cAAD;CAAc,GAAI;CAAO,KAAK;CAC5B,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,aAAD,CAAc,CAAA;AACF,CAAA,CAElB"}

package/dist/components/Switch/Switch.js

@@ -3,7 +3,7 @@ import { elevationVariants } from "../Elevation/Elevation.js";
 import React from "react";
 import { jsx } from "react/jsx-runtime";
 import * as SwitchPrimitive from "@radix-ui/react-switch";
-//#region components/Switch/Switch.tsx
+// components/Switch/Switch.tsx
 var THUMB_DIAMETER = 14;
 var LARGE_RATIO = 1.5;
 var THUMB_GAP = 2;
@@ -20,7 +20,7 @@ var StyledThumb = styled(SwitchPrimitive.Thumb, {
 	transition: "transform 100ms cubic-bezier(0.22, 1, 0.36, 1)",
 	transform: `translateX(${THUMB_GAP}px)`,
 	willChange: "transform",
-	"&[data-state=\"checked\"]": { transform: `translateX(${ROOT_WIDTH - THUMB_GAP - THUMB_DIAMETER}px)` }
+	"&[data-state=\"checked\"]": { transform: `translateX(16px)` }
 });
 var StyledSwitch = styled(SwitchPrimitive.Root, {
 	all: "unset",
@@ -64,7 +64,7 @@ var StyledSwitch = styled(SwitchPrimitive.Root, {
 				width: THUMB_DIAMETER * LARGE_RATIO,
 				height: THUMB_DIAMETER * LARGE_RATIO,
 				transform: `translateX(${LARGE_RATIO * THUMB_GAP})`,
-				"&[data-state=\"checked\"]": { transform: `translateX(${LARGE_RATIO * (ROOT_WIDTH - THUMB_GAP - THUMB_DIAMETER)}px)` }
+				"&[data-state=\"checked\"]": { transform: `translateX(${LARGE_RATIO * 16}px)` }
 			}
 		}
 	} },
@@ -75,7 +75,6 @@ var Switch = React.forwardRef((props, forwardedRef) => /* @__PURE__ */ jsx(Style
 	ref: forwardedRef,
 	children: /* @__PURE__ */ jsx(StyledThumb, {})
 }));
-//#endregion
 export { Switch };
 
 //# sourceMappingURL=Switch.js.map

package/dist/components/Switch/Switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.js","names":[],"sources":["../../../components/Switch/Switch.tsx"],"sourcesContent":["import * as SwitchPrimitive from '@radix-ui/react-switch';\nimport React from 'react';\n\nimport { CSS, styled, VariantProps } from '../../stitches.config';\nimport { elevationVariants } from '../Elevation';\n\n// CONSTANTS\nconst THUMB_DIAMETER = 14; // @FIXME: shouldn't this size be part of theme ?\nconst LARGE_RATIO = 1.5;\nconst THUMB_GAP = 2; // Gap between thumb and background\nconst ROOT_WIDTH = 32;\nconst ROOT_HEIGHT = 18;\n\n// COMPONENTS\nconst StyledThumb = styled(SwitchPrimitive.Thumb, {\n  position: 'absolute',\n  left: 0,\n  width: THUMB_DIAMETER,\n  height: THUMB_DIAMETER,\n  backgroundColor: '$switchThumb',\n  borderRadius: '$round',\n  boxShadow: 'rgba(0, 0, 0, 0.3) 0px 0px 1px, rgba(0, 0, 0, 0.2) 0px 1px 2px;',\n  transition: 'transform 100ms cubic-bezier(0.22, 1, 0.36, 1)',\n  transform: `translateX(${THUMB_GAP}px)`,\n  willChange: 'transform',\n\n  '&[data-state=\"checked\"]': {\n    transform: `translateX(${ROOT_WIDTH - THUMB_GAP - THUMB_DIAMETER}px)`,\n  },\n});\n\nconst StyledSwitch = styled(SwitchPrimitive.Root, {\n  all: 'unset',\n  boxSizing: 'border-box',\n  userSelect: 'none',\n  '&::before': {\n    boxSizing: 'border-box',\n  },\n  '&::after': {\n    boxSizing: 'border-box',\n  },\n\n  // Reset\n  alignItems: 'center',\n  display: 'inline-flex',\n  justifyContent: 'center',\n  lineHeight: '1',\n  margin: '0',\n  outline: 'none',\n  WebkitTapHighlightColor: 'rgba(0,0,0,0)',\n\n  backgroundColor: '$switchBackground',\n  borderRadius: '$pill',\n  position: 'relative',\n  '@hover': {\n    '&:hover': {\n      cursor: 'pointer',\n      [`& ${StyledThumb}`]: {\n        ...elevationVariants[1],\n      },\n    },\n  },\n  '&:focus': {\n    outline: '2px solid $switchFocusBorder',\n    [`& ${StyledThumb}`]: {\n      ...elevationVariants[2],\n    },\n  },\n  '&:disabled': {\n    pointerEvents: 'none',\n    opacity: 0.38,\n  },\n  '&[data-state=\"checked\"]': {\n    backgroundColor: '$switchActiveBackground',\n  },\n\n  variants: {\n    size: {\n      '1': {\n        width: ROOT_WIDTH,\n        height: ROOT_HEIGHT,\n        m: '$2',\n      },\n      '2': {\n        width: ROOT_WIDTH * LARGE_RATIO,\n        height: ROOT_HEIGHT * LARGE_RATIO,\n        [`& ${StyledThumb}`]: {\n          width: THUMB_DIAMETER * LARGE_RATIO,\n          height: THUMB_DIAMETER * LARGE_RATIO,\n          transform: `translateX(${LARGE_RATIO * THUMB_GAP})`,\n\n          '&[data-state=\"checked\"]': {\n            transform: `translateX(${LARGE_RATIO * (ROOT_WIDTH - THUMB_GAP - THUMB_DIAMETER)}px)`,\n          },\n        },\n      },\n    },\n  },\n  defaultVariants: {\n    size: '1',\n  },\n});\n\nexport type SwitchVariants = VariantProps<typeof StyledSwitch>;\ntype SwitchPrimitiveProps = Omit<React.ComponentProps<typeof SwitchPrimitive.Root>, 'as'>;\nexport type SwitchProps = SwitchPrimitiveProps & SwitchVariants & { css?: CSS };\n\nexport const Switch = React.forwardRef<React.ElementRef<typeof StyledSwitch>, SwitchProps>(\n  (props, forwardedRef) => (\n    <StyledSwitch {...props} ref={forwardedRef}>\n      <StyledThumb />\n    </StyledSwitch>\n  )\n);\n"],"mappings":";;;;;;AAOA,IAAM,iBAAiB;AACvB,IAAM,cAAc;AACpB,IAAM,YAAY;AAClB,IAAM,aAAa;AACnB,IAAM,cAAc;AAGpB,IAAM,cAAc,OAAO,gBAAgB,OAAO;CAChD,UAAU;CACV,MAAM;CACN,OAAO;CACP,QAAQ;CACR,iBAAiB;CACjB,cAAc;CACd,WAAW;CACX,YAAY;CACZ,WAAW,cAAc,UAAU;CACnC,YAAY;CAEZ,6BAA2B,EACzB,WAAW,cAAc,aAAa,YAAY,eAAe,KACnE;AACF,CAAC;AAED,IAAM,eAAe,OAAO,gBAAgB,MAAM;CAChD,KAAK;CACL,WAAW;CACX,YAAY;CACZ,aAAa,EACX,WAAW,aACb;CACA,YAAY,EACV,WAAW,aACb;CAGA,YAAY;CACZ,SAAS;CACT,gBAAgB;CAChB,YAAY;CACZ,QAAQ;CACR,SAAS;CACT,yBAAyB;CAEzB,iBAAiB;CACjB,cAAc;CACd,UAAU;CACV,UAAU,EACR,WAAW;EACT,QAAQ;GACP,KAAK,gBAAgB,EACpB,GAAG,kBAAkB,GACvB;CACF,EACF;CACA,WAAW;EACT,SAAS;GACR,KAAK,gBAAgB,EACpB,GAAG,kBAAkB,GACvB;CACF;CACA,cAAc;EACZ,eAAe;EACf,SAAS;CACX;CACA,6BAA2B,EACzB,iBAAiB,0BACnB;CAEA,UAAU,EACR,MAAM;EACJ,KAAK;GACH,OAAO;GACP,QAAQ;GACR,GAAG;EACL;EACA,KAAK;GACH,OAAO,aAAa;GACpB,QAAQ,cAAc;IACrB,KAAK,gBAAgB;IACpB,OAAO,iBAAiB;IACxB,QAAQ,iBAAiB;IACzB,WAAW,cAAc,cAAc,UAAU;IAEjD,6BAA2B,EACzB,WAAW,cAAc,eAAe,aAAa,YAAY,gBAAgB,KACnF;GACF;EACF;CACF,EACF;CACA,iBAAiB,EACf,MAAM,IACR;AACF,CAAC;AAMD,IAAa,SAAS,MAAM,YACzB,OAAO,iBACN,oBAAC,cAAD;CAAc,GAAI;CAAO,KAAK;WAC5B,oBAAC,aAAD,CAAc,CAAA;AACF,CAAA,CAElB"}
+{"version":3,"file":"Switch.js","names":[],"sources":["../../../components/Switch/Switch.tsx"],"sourcesContent":["import * as SwitchPrimitive from '@radix-ui/react-switch';\nimport React from 'react';\n\nimport { CSS, styled, VariantProps } from '../../stitches.config';\nimport { elevationVariants } from '../Elevation';\n\n// CONSTANTS\nconst THUMB_DIAMETER = 14; // @FIXME: shouldn't this size be part of theme ?\nconst LARGE_RATIO = 1.5;\nconst THUMB_GAP = 2; // Gap between thumb and background\nconst ROOT_WIDTH = 32;\nconst ROOT_HEIGHT = 18;\n\n// COMPONENTS\nconst StyledThumb = styled(SwitchPrimitive.Thumb, {\n  position: 'absolute',\n  left: 0,\n  width: THUMB_DIAMETER,\n  height: THUMB_DIAMETER,\n  backgroundColor: '$switchThumb',\n  borderRadius: '$round',\n  boxShadow: 'rgba(0, 0, 0, 0.3) 0px 0px 1px, rgba(0, 0, 0, 0.2) 0px 1px 2px;',\n  transition: 'transform 100ms cubic-bezier(0.22, 1, 0.36, 1)',\n  transform: `translateX(${THUMB_GAP}px)`,\n  willChange: 'transform',\n\n  '&[data-state=\"checked\"]': {\n    transform: `translateX(${ROOT_WIDTH - THUMB_GAP - THUMB_DIAMETER}px)`,\n  },\n});\n\nconst StyledSwitch = styled(SwitchPrimitive.Root, {\n  all: 'unset',\n  boxSizing: 'border-box',\n  userSelect: 'none',\n  '&::before': {\n    boxSizing: 'border-box',\n  },\n  '&::after': {\n    boxSizing: 'border-box',\n  },\n\n  // Reset\n  alignItems: 'center',\n  display: 'inline-flex',\n  justifyContent: 'center',\n  lineHeight: '1',\n  margin: '0',\n  outline: 'none',\n  WebkitTapHighlightColor: 'rgba(0,0,0,0)',\n\n  backgroundColor: '$switchBackground',\n  borderRadius: '$pill',\n  position: 'relative',\n  '@hover': {\n    '&:hover': {\n      cursor: 'pointer',\n      [`& ${StyledThumb}`]: {\n        ...elevationVariants[1],\n      },\n    },\n  },\n  '&:focus': {\n    outline: '2px solid $switchFocusBorder',\n    [`& ${StyledThumb}`]: {\n      ...elevationVariants[2],\n    },\n  },\n  '&:disabled': {\n    pointerEvents: 'none',\n    opacity: 0.38,\n  },\n  '&[data-state=\"checked\"]': {\n    backgroundColor: '$switchActiveBackground',\n  },\n\n  variants: {\n    size: {\n      '1': {\n        width: ROOT_WIDTH,\n        height: ROOT_HEIGHT,\n        m: '$2',\n      },\n      '2': {\n        width: ROOT_WIDTH * LARGE_RATIO,\n        height: ROOT_HEIGHT * LARGE_RATIO,\n        [`& ${StyledThumb}`]: {\n          width: THUMB_DIAMETER * LARGE_RATIO,\n          height: THUMB_DIAMETER * LARGE_RATIO,\n          transform: `translateX(${LARGE_RATIO * THUMB_GAP})`,\n\n          '&[data-state=\"checked\"]': {\n            transform: `translateX(${LARGE_RATIO * (ROOT_WIDTH - THUMB_GAP - THUMB_DIAMETER)}px)`,\n          },\n        },\n      },\n    },\n  },\n  defaultVariants: {\n    size: '1',\n  },\n});\n\nexport type SwitchVariants = VariantProps<typeof StyledSwitch>;\ntype SwitchPrimitiveProps = Omit<React.ComponentProps<typeof SwitchPrimitive.Root>, 'as'>;\nexport type SwitchProps = SwitchPrimitiveProps & SwitchVariants & { css?: CSS };\n\nexport const Switch = React.forwardRef<React.ElementRef<typeof StyledSwitch>, SwitchProps>(\n  (props, forwardedRef) => (\n    <StyledSwitch {...props} ref={forwardedRef}>\n      <StyledThumb />\n    </StyledSwitch>\n  )\n);\n"],"mappings":";;;;;;AAOA,IAAM,iBAAiB;AACvB,IAAM,cAAc;AACpB,IAAM,YAAY;AAClB,IAAM,aAAa;AACnB,IAAM,cAAc;AAGpB,IAAM,cAAc,OAAO,gBAAgB,OAAO;CAChD,UAAU;CACV,MAAM;CACN,OAAO;CACP,QAAQ;CACR,iBAAiB;CACjB,cAAc;CACd,WAAW;CACX,YAAY;CACZ,WAAW,cAAc,UAAU;CACnC,YAAY;CAEZ,6BAA2B,EACzB,WAAW,mBACb;AACF,CAAC;AAED,IAAM,eAAe,OAAO,gBAAgB,MAAM;CAChD,KAAK;CACL,WAAW;CACX,YAAY;CACZ,aAAa,EACX,WAAW,aACb;CACA,YAAY,EACV,WAAW,aACb;CAGA,YAAY;CACZ,SAAS;CACT,gBAAgB;CAChB,YAAY;CACZ,QAAQ;CACR,SAAS;CACT,yBAAyB;CAEzB,iBAAiB;CACjB,cAAc;CACd,UAAU;CACV,UAAU,EACR,WAAW;EACT,QAAQ;GACP,KAAK,gBAAgB,EACpB,GAAG,kBAAkB,GACvB;CACF,EACF;CACA,WAAW;EACT,SAAS;GACR,KAAK,gBAAgB,EACpB,GAAG,kBAAkB,GACvB;CACF;CACA,cAAc;EACZ,eAAe;EACf,SAAS;CACX;CACA,6BAA2B,EACzB,iBAAiB,0BACnB;CAEA,UAAU,EACR,MAAM;EACJ,KAAK;GACH,OAAO;GACP,QAAQ;GACR,GAAG;EACL;EACA,KAAK;GACH,OAAO,aAAa;GACpB,QAAQ,cAAc;IACrB,KAAK,gBAAgB;IACpB,OAAO,iBAAiB;IACxB,QAAQ,iBAAiB;IACzB,WAAW,cAAc,cAAc,UAAU;IAEjD,6BAA2B,EACzB,WAAW,cAAc,cAAe,GAAyC,KACnF;GACF;EACF;CACF,EACF;CACA,iBAAiB,EACf,MAAM,IACR;AACF,CAAC;AAMD,IAAa,SAAS,MAAM,YACzB,OAAO,iBACN,oBAAC,cAAD;CAAc,GAAI;CAAO,KAAK;CAC5B,UAAA,oBAAC,aAAD,CAAc,CAAA;AACF,CAAA,CAElB"}

package/dist/components/Switch/Switch.themes.cjs

@@ -1,7 +1,7 @@
 const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
 let tinycolor2 = require("tinycolor2");
 tinycolor2 = require_runtime.__toESM(tinycolor2, 1);
-//#region components/Switch/Switch.themes.ts
+// components/Switch/Switch.themes.ts
 var Theme;
 (function(_Theme) {
 	_Theme.getLight = (primaryColor) => ({
@@ -17,7 +17,6 @@ var Theme;
 		switchThumb: (0, tinycolor2.default)("black").setAlpha(.87).toHslString()
 	});
 })(Theme || (Theme = {}));
-//#endregion
 Object.defineProperty(exports, "Theme", {
 	enumerable: true,
 	get: function() {

package/dist/components/Switch/Switch.themes.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.themes.cjs","names":[],"sources":["../../../components/Switch/Switch.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\nimport tinycolor from 'tinycolor2';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\n\nexport namespace Theme {\n  type Colors = {\n    switchBackground: Property.Color;\n    switchActiveBackground: Property.Color;\n    switchFocusBorder: Property.Color;\n    switchThumb: Property.Color;\n  };\n\n  type Factory = (primaryColor: ColorInfo) => Colors;\n\n  export const getLight: Factory = (primaryColor) => ({\n    switchBackground: tinycolor('black').setAlpha(0.2).toHslString(),\n    switchActiveBackground: '$primary',\n    switchFocusBorder: primaryColor.helpers.pickScale(8),\n    switchThumb: tinycolor('white').setAlpha(0.87).toHslString(),\n  });\n\n  export const getDark: Factory = (primaryColor) => ({\n    switchBackground: tinycolor('white').setAlpha(0.2).toHslString(),\n    switchActiveBackground: '$primary',\n    switchFocusBorder: primaryColor.helpers.pickScale(11),\n    switchThumb: tinycolor('black').setAlpha(0.87).toHslString(),\n  });\n}\n"],"mappings":";;;;AAKO,IAAA;;CAUQ,OAAA,YAAqB,kBAAkB;EAClD,mBAAA,GAAA,WAAA,QAAA,CAA4B,OAAO,CAAC,CAAC,SAAS,EAAG,CAAC,CAAC,YAAY;EAC/D,wBAAwB;EACxB,mBAAmB,aAAa,QAAQ,UAAU,CAAC;EACnD,cAAA,GAAA,WAAA,QAAA,CAAuB,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;CAC7D;CAEa,OAAA,WAAoB,kBAAkB;EACjD,mBAAA,GAAA,WAAA,QAAA,CAA4B,OAAO,CAAC,CAAC,SAAS,EAAG,CAAC,CAAC,YAAY;EAC/D,wBAAwB;EACxB,mBAAmB,aAAa,QAAQ,UAAU,EAAE;EACpD,cAAA,GAAA,WAAA,QAAA,CAAuB,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;CAC7D;GACD,UAAA,QAAA,CAAA,EAAD"}
+{"version":3,"file":"Switch.themes.cjs","names":["tinycolor"],"sources":["../../../components/Switch/Switch.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\nimport tinycolor from 'tinycolor2';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\n\nexport namespace Theme {\n  type Colors = {\n    switchBackground: Property.Color;\n    switchActiveBackground: Property.Color;\n    switchFocusBorder: Property.Color;\n    switchThumb: Property.Color;\n  };\n\n  type Factory = (primaryColor: ColorInfo) => Colors;\n\n  export const getLight: Factory = (primaryColor) => ({\n    switchBackground: tinycolor('black').setAlpha(0.2).toHslString(),\n    switchActiveBackground: '$primary',\n    switchFocusBorder: primaryColor.helpers.pickScale(8),\n    switchThumb: tinycolor('white').setAlpha(0.87).toHslString(),\n  });\n\n  export const getDark: Factory = (primaryColor) => ({\n    switchBackground: tinycolor('white').setAlpha(0.2).toHslString(),\n    switchActiveBackground: '$primary',\n    switchFocusBorder: primaryColor.helpers.pickScale(11),\n    switchThumb: tinycolor('black').setAlpha(0.87).toHslString(),\n  });\n}\n"],"mappings":";;;;AAKO,IAAU;CAAV,SAAA,QAAA;CAUQ,OAAA,YAAqB,kBAAkB;EAClD,mBAAA,GAAkBA,WAAAA,QAAAA,CAAU,OAAO,CAAC,CAAC,SAAS,EAAG,CAAC,CAAC,YAAY;EAC/D,wBAAwB;EACxB,mBAAmB,aAAa,QAAQ,UAAU,CAAC;EACnD,cAAA,GAAaA,WAAAA,QAAAA,CAAU,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;CAC7D;CAEa,OAAA,WAAoB,kBAAkB;EACjD,mBAAA,GAAkBA,WAAAA,QAAAA,CAAU,OAAO,CAAC,CAAC,SAAS,EAAG,CAAC,CAAC,YAAY;EAC/D,wBAAwB;EACxB,mBAAmB,aAAa,QAAQ,UAAU,EAAE;EACpD,cAAA,GAAaA,WAAAA,QAAAA,CAAU,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;CAC7D;AACD,EAAA,CAAA,UAAA,QAAA,CAAA,EAAD"}

package/dist/components/Switch/Switch.themes.js

@@ -1,5 +1,5 @@
 import tinycolor from "tinycolor2";
-//#region components/Switch/Switch.themes.ts
+// components/Switch/Switch.themes.ts
 var Theme;
 (function(_Theme) {
 	_Theme.getLight = (primaryColor) => ({
@@ -15,7 +15,6 @@ var Theme;
 		switchThumb: tinycolor("black").setAlpha(.87).toHslString()
 	});
 })(Theme || (Theme = {}));
-//#endregion
 export { Theme };
 
 //# sourceMappingURL=Switch.themes.js.map

package/dist/components/Switch/Switch.themes.js.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.themes.js","names":[],"sources":["../../../components/Switch/Switch.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\nimport tinycolor from 'tinycolor2';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\n\nexport namespace Theme {\n  type Colors = {\n    switchBackground: Property.Color;\n    switchActiveBackground: Property.Color;\n    switchFocusBorder: Property.Color;\n    switchThumb: Property.Color;\n  };\n\n  type Factory = (primaryColor: ColorInfo) => Colors;\n\n  export const getLight: Factory = (primaryColor) => ({\n    switchBackground: tinycolor('black').setAlpha(0.2).toHslString(),\n    switchActiveBackground: '$primary',\n    switchFocusBorder: primaryColor.helpers.pickScale(8),\n    switchThumb: tinycolor('white').setAlpha(0.87).toHslString(),\n  });\n\n  export const getDark: Factory = (primaryColor) => ({\n    switchBackground: tinycolor('white').setAlpha(0.2).toHslString(),\n    switchActiveBackground: '$primary',\n    switchFocusBorder: primaryColor.helpers.pickScale(11),\n    switchThumb: tinycolor('black').setAlpha(0.87).toHslString(),\n  });\n}\n"],"mappings":";;AAKO,IAAA;;CAUQ,OAAA,YAAqB,kBAAkB;EAClD,kBAAkB,UAAU,OAAO,CAAC,CAAC,SAAS,EAAG,CAAC,CAAC,YAAY;EAC/D,wBAAwB;EACxB,mBAAmB,aAAa,QAAQ,UAAU,CAAC;EACnD,aAAa,UAAU,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;CAC7D;CAEa,OAAA,WAAoB,kBAAkB;EACjD,kBAAkB,UAAU,OAAO,CAAC,CAAC,SAAS,EAAG,CAAC,CAAC,YAAY;EAC/D,wBAAwB;EACxB,mBAAmB,aAAa,QAAQ,UAAU,EAAE;EACpD,aAAa,UAAU,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;CAC7D;GACD,UAAA,QAAA,CAAA,EAAD"}
+{"version":3,"file":"Switch.themes.js","names":[],"sources":["../../../components/Switch/Switch.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\nimport tinycolor from 'tinycolor2';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\n\nexport namespace Theme {\n  type Colors = {\n    switchBackground: Property.Color;\n    switchActiveBackground: Property.Color;\n    switchFocusBorder: Property.Color;\n    switchThumb: Property.Color;\n  };\n\n  type Factory = (primaryColor: ColorInfo) => Colors;\n\n  export const getLight: Factory = (primaryColor) => ({\n    switchBackground: tinycolor('black').setAlpha(0.2).toHslString(),\n    switchActiveBackground: '$primary',\n    switchFocusBorder: primaryColor.helpers.pickScale(8),\n    switchThumb: tinycolor('white').setAlpha(0.87).toHslString(),\n  });\n\n  export const getDark: Factory = (primaryColor) => ({\n    switchBackground: tinycolor('white').setAlpha(0.2).toHslString(),\n    switchActiveBackground: '$primary',\n    switchFocusBorder: primaryColor.helpers.pickScale(11),\n    switchThumb: tinycolor('black').setAlpha(0.87).toHslString(),\n  });\n}\n"],"mappings":";;AAKO,IAAU;CAAV,SAAA,QAAA;CAUQ,OAAA,YAAqB,kBAAkB;EAClD,kBAAkB,UAAU,OAAO,CAAC,CAAC,SAAS,EAAG,CAAC,CAAC,YAAY;EAC/D,wBAAwB;EACxB,mBAAmB,aAAa,QAAQ,UAAU,CAAC;EACnD,aAAa,UAAU,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;CAC7D;CAEa,OAAA,WAAoB,kBAAkB;EACjD,kBAAkB,UAAU,OAAO,CAAC,CAAC,SAAS,EAAG,CAAC,CAAC,YAAY;EAC/D,wBAAwB;EACxB,mBAAmB,aAAa,QAAQ,UAAU,EAAE;EACpD,aAAa,UAAU,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;CAC7D;AACD,EAAA,CAAA,UAAA,QAAA,CAAA,EAAD"}

package/dist/components/Table/Table.cjs

@@ -9,7 +9,7 @@ let _radix_ui_react_icons = require("@radix-ui/react-icons");
 let react = require("react");
 react = require_runtime.__toESM(react, 1);
 let react_jsx_runtime = require("react/jsx-runtime");
-//#region components/Table/Table.tsx
+// components/Table/Table.tsx
 var Caption = require_stitches_config.styled("caption", require_Text.Text, {
 	display: "table-caption",
 	textAlign: "start",
@@ -203,7 +203,6 @@ var Table = require_stitches_config.styled("table", {
 	variants: { elevation: require_Elevation.elevationVariants },
 	defaultVariants: { elevation: 1 }
 });
-//#endregion
 exports.Caption = Caption;
 exports.StyledTr = StyledTr;
 exports.Table = Table;