@traefik-labs/faency 12.0.12 → 12.1.0

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

@@ -1,5 +1,5 @@
 /* empty css                                 */
-import { c as createRuntimeFn } from "../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js";
+import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
 var styledInputRecipe = createRuntimeFn({ defaultClassName: "_1st6suv1 _1st6suv0", variantClassNames: { size: { small: "_1st6suv2", medium: "_1st6suv3", large: "_1st6suv4" }, variant: { ghost: "_1st6suv5" }, state: { invalid: "_1st6suv6" }, cursor: { "default": "_1st6suv7", text: "_1st6suv8" }, startAdornment: { true: "_1st6suv9" }, endAdornment: { true: "_1st6suva" } }, defaultVariants: { size: "medium", cursor: "default" }, compoundVariants: [[{ variant: "ghost", state: "invalid" }, "_1st6suvb"], [{ startAdornment: true, size: "small" }, "_1st6suvc"], [{ startAdornment: true, size: "medium" }, "_1st6suvd"], [{ startAdornment: true, size: "large" }, "_1st6suve"], [{ endAdornment: true, size: "small" }, "_1st6suvf"], [{ endAdornment: true, size: "medium" }, "_1st6suvg"], [{ endAdornment: true, size: "large" }, "_1st6suvh"], [{ endAdornment: true, size: "small", state: "invalid" }, "_1st6suvi"], [{ endAdornment: true, size: "medium", state: "invalid" }, "_1st6suvj"], [{ endAdornment: true, size: "large", state: "invalid" }, "_1st6suvk"]] });
 var inputWrapperRecipe = createRuntimeFn({ defaultClassName: "_1st6suvm _1st6suvl", variantClassNames: { disabled: { true: "_1st6suvn" }, state: { invalid: "_1st6suvo" }, size: { small: "_1st6suvp", medium: "_1st6suvq", large: "_1st6suvr" } }, defaultVariants: { size: "medium", disabled: false }, compoundVariants: [] });
 var adornmentWrapperRecipe = createRuntimeFn({ defaultClassName: "_1st6suvt _1st6suvs", variantClassNames: { size: { small: "_1st6suvu", medium: "_1st6suvv", large: "_1st6suvw" }, variant: { start: "_1st6suvx", end: "_1st6suvy" } }, defaultVariants: { size: "medium" }, compoundVariants: [] });

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

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 ;/* empty css                                   */
-const createRuntimeFn62c9670f_esm = require("../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.cjs");
-var labelRecipe = createRuntimeFn62c9670f_esm.c({ defaultClassName: "_14umx1r1 _14umx1r0", variantClassNames: { size: { "0": "_14umx1r2", "1": "_14umx1r3", "2": "_14umx1r4", "3": "_14umx1r5", "4": "_14umx1r6", "5": "_14umx1r7", "6": "_14umx1r8", "7": "_14umx1r9", "8": "_14umx1ra", "9": "_14umx1rb", "10": "_14umx1rc", "11": "_14umx1rd", "12": "_14umx1re", inherit: "_14umx1rf" }, weight: { light: "_14umx1rg", regular: "_14umx1rh", medium: "_14umx1ri", semiBold: "_14umx1rj", bold: "_14umx1rk" }, variant: { red: "_14umx1rl", subtle: "_14umx1rm", "default": "_14umx1rn", contrast: "_14umx1ro", inherit: "_14umx1rp", invalid: "_14umx1rq" }, gradient: { true: "_14umx1rr" }, transform: { uppercase: "_14umx1rs", capitalize: "_14umx1rt", capitalizeWords: "_14umx1ru" }, noWrap: { true: "_14umx1rv" } }, defaultVariants: { size: "0", variant: "subtle", transform: "capitalize" }, compoundVariants: [] });
+const createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
+var labelRecipe = createRuntimeFn.createRuntimeFn({ defaultClassName: "_14umx1r1 _14umx1r0", variantClassNames: { size: { "0": "_14umx1r2", "1": "_14umx1r3", "2": "_14umx1r4", "3": "_14umx1r5", "4": "_14umx1r6", "5": "_14umx1r7", "6": "_14umx1r8", "7": "_14umx1r9", "8": "_14umx1ra", "9": "_14umx1rb", "10": "_14umx1rc", "11": "_14umx1rd", "12": "_14umx1re", inherit: "_14umx1rf" }, weight: { light: "_14umx1rg", regular: "_14umx1rh", medium: "_14umx1ri", semiBold: "_14umx1rj", bold: "_14umx1rk" }, variant: { red: "_14umx1rl", subtle: "_14umx1rm", "default": "_14umx1rn", contrast: "_14umx1ro", inherit: "_14umx1rp", invalid: "_14umx1rq" }, gradient: { true: "_14umx1rr" }, transform: { uppercase: "_14umx1rs", capitalize: "_14umx1rt", capitalizeWords: "_14umx1ru" }, noWrap: { true: "_14umx1rv" } }, defaultVariants: { size: "0", variant: "subtle", transform: "capitalize" }, compoundVariants: [] });
 exports.labelRecipe = labelRecipe;
 //# sourceMappingURL=Label.vanilla.css.cjs.map

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

@@ -1,5 +1,5 @@
 /* empty css                                 */
-import { c as createRuntimeFn } from "../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js";
+import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
 var labelRecipe = createRuntimeFn({ defaultClassName: "_14umx1r1 _14umx1r0", variantClassNames: { size: { "0": "_14umx1r2", "1": "_14umx1r3", "2": "_14umx1r4", "3": "_14umx1r5", "4": "_14umx1r6", "5": "_14umx1r7", "6": "_14umx1r8", "7": "_14umx1r9", "8": "_14umx1ra", "9": "_14umx1rb", "10": "_14umx1rc", "11": "_14umx1rd", "12": "_14umx1re", inherit: "_14umx1rf" }, weight: { light: "_14umx1rg", regular: "_14umx1rh", medium: "_14umx1ri", semiBold: "_14umx1rj", bold: "_14umx1rk" }, variant: { red: "_14umx1rl", subtle: "_14umx1rm", "default": "_14umx1rn", contrast: "_14umx1ro", inherit: "_14umx1rp", invalid: "_14umx1rq" }, gradient: { true: "_14umx1rr" }, transform: { uppercase: "_14umx1rs", capitalize: "_14umx1rt", capitalizeWords: "_14umx1ru" }, noWrap: { true: "_14umx1rv" } }, defaultVariants: { size: "0", variant: "subtle", transform: "capitalize" }, compoundVariants: [] });
 export {
   labelRecipe

package/dist/components/List/List.cjs

@@ -27,7 +27,9 @@ const StyledListItemButton = stitches_config.styled("button", Flex.Flex, {
   outline: "none",
   // CUSTOM
   flexGrow: 1,
+  width: "100%",
   p: "$2",
+  position: "relative",
   "&::before": {
     borderRadius: "inherit",
     boxSizing: "border-box",
@@ -85,17 +87,24 @@ const StyledUl = stitches_config.styled("ul", {
   m: "0 0 0 8px",
   p: 0,
   color: "$textDefault",
-  '&:has(li > span > input[type="checkbox"])': {
+  '&:has(> li > span > input[type="checkbox"])': {
     m: 0,
     listStyle: "none",
-    li: {
+    "> li": {
       marginLeft: 0,
-      span: {
+      "> span": {
         input: {
           margin: "0 3px 0 0"
         }
       }
     }
+  },
+  // Restore left-margin indentation when a nested checkbox list is inside a li
+  'li > &:has(> li > span > input[type="checkbox"])': {
+    marginLeft: "$2",
+    "> li": {
+      marginLeft: "$2"
+    }
   }
 });
 const StyledOl = stitches_config.styled("ol", {
@@ -112,13 +121,25 @@ const ListContext = React.createContext({
 });
 const Ul = React.forwardRef(
   ({ interactive, ...props }, forwardedRef) => {
-    const contextValue = React.useMemo(() => ({ interactive: !!interactive }), [interactive]);
+    const parentContext = React.useContext(ListContext);
+    const contextValue = React.useMemo(
+      () => ({
+        interactive: interactive !== void 0 ? !!interactive : parentContext.interactive
+      }),
+      [interactive, parentContext.interactive]
+    );
     return /* @__PURE__ */ jsxRuntime.jsx(ListContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(StyledUl, { role: "list", ref: forwardedRef, ...props }) });
   }
 );
 const Ol = React.forwardRef(
   ({ interactive, ...props }, forwardedRef) => {
-    const contextValue = React.useMemo(() => ({ interactive: !!interactive }), [interactive]);
+    const parentContext = React.useContext(ListContext);
+    const contextValue = React.useMemo(
+      () => ({
+        interactive: interactive !== void 0 ? !!interactive : parentContext.interactive
+      }),
+      [interactive, parentContext.interactive]
+    );
     return /* @__PURE__ */ jsxRuntime.jsx(ListContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(StyledOl, { role: "list", ref: forwardedRef, ...props }) });
   }
 );
@@ -136,6 +157,13 @@ const ControlsWrapper = stitches_config.styled("div", {
 const Li = React.forwardRef(
   ({ children, controls, align, justify, direction, gap, wrap, ...props }, forwardedRef) => {
     const { interactive } = React.useContext(ListContext);
+    const childArray = React.Children.toArray(children);
+    const nestedLists = childArray.filter(
+      (child) => React.isValidElement(child) && (child.type === Ul || child.type === Ol)
+    );
+    const inlineChildren = childArray.filter(
+      (child) => !(React.isValidElement(child) && (child.type === Ul || child.type === Ol))
+    );
     return /* @__PURE__ */ jsxRuntime.jsxs(StyledLi, { ...props, ref: forwardedRef, children: [
       interactive ? /* @__PURE__ */ jsxRuntime.jsx(
         StyledListItemButton,
@@ -145,7 +173,7 @@ const Li = React.forwardRef(
           direction,
           gap,
           wrap,
-          children
+          children: inlineChildren
         }
       ) : /* @__PURE__ */ jsxRuntime.jsx(
         StyledSpan,
@@ -156,9 +184,10 @@ const Li = React.forwardRef(
           gap,
           wrap,
           css: { flexGrow: 1 },
-          children
+          children: inlineChildren
         }
       ),
+      nestedLists,
       !!controls && /* @__PURE__ */ jsxRuntime.jsx(ControlsWrapper, { children: controls })
     ] });
   }

package/dist/components/List/List.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"List.cjs","sources":["../../../components/List/List.tsx"],"sourcesContent":["import React, { ComponentProps, createContext, ReactNode, useContext, useMemo } from 'react';\n\nimport { styled, VariantProps } from '../../stitches.config';\nimport { BUTTON_BASE_STYLES } from '../Button';\nimport { elevationVariants } from '../Elevation';\nimport { Flex } from '../Flex';\n\nconst LIST_ITEM_CONTENT_STYLES = {\n  bc: 'transparent',\n  c: 'inherit',\n  borderRadius: 'inherit',\n  fontFamily: '$rubik',\n  fontSize: '$3',\n  fontVariantNumeric: 'tabular-nums',\n};\n\nconst StyledSpan = styled('span', Flex, {\n  // APPLY BUTTON STYLES\n  ...LIST_ITEM_CONTENT_STYLES,\n  // CUSTOM\n  p: '$1',\n  gap: '$1',\n});\n\nconst StyledListItemButton = styled('button', Flex, {\n  ...BUTTON_BASE_STYLES,\n  ...LIST_ITEM_CONTENT_STYLES,\n  outline: 'none',\n\n  // CUSTOM\n  flexGrow: 1,\n  p: '$2',\n  '&::before': {\n    borderRadius: 'inherit',\n    boxSizing: 'border-box',\n    content: '\"\"',\n    position: 'absolute',\n    inset: 0,\n  },\n  '&::after': {\n    borderRadius: 'inherit',\n    boxSizing: 'border-box',\n    content: '\"\"',\n    position: 'absolute',\n    inset: 0,\n  },\n  '&:focus, &:focus-visible': {\n    boxShadow: 'inset 0 0 0 2px $colors$listItemFocusBorder',\n  },\n\n  '@hover': {\n    '&:hover': {\n      cursor: 'pointer',\n      '&::before': {\n        backgroundColor: '$listItemHoverBg',\n      },\n      '&::after': {\n        backgroundColor: '$primary',\n        opacity: 0.05,\n      },\n    },\n  },\n  '&:active': {\n    '&::before': {\n      backgroundColor: '$listItemActiveBg',\n    },\n    '&::after': {\n      backgroundColor: '$primary',\n      opacity: 0.05,\n    },\n  },\n});\n\nconst StyledLi = styled('li', {\n  m: '$2',\n  outline: 'none',\n  position: 'relative',\n  '&:focus-within': {\n    boxShadow: 'none',\n  },\n  variants: {\n    elevation: elevationVariants,\n  },\n  defaultVariants: {\n    elevation: '0',\n  },\n});\n\nconst StyledUl = styled('ul', {\n  m: '0 0 0 8px',\n  p: 0,\n  color: '$textDefault',\n\n  '&:has(li > span > input[type=\"checkbox\"])': {\n    m: 0,\n    listStyle: 'none',\n    li: {\n      marginLeft: 0,\n      span: {\n        input: {\n          margin: '0 3px 0 0',\n        },\n      },\n    },\n  },\n});\n\nconst StyledOl = styled('ol', {\n  m: '0 0 0 8px',\n  p: 0,\n  color: '$textDefault',\n\n  '> li::marker': {\n    fontSize: '$3',\n    fontFamily: '$rubik',\n  },\n});\n\nconst ListContext = createContext({\n  interactive: false,\n});\n\nexport interface ListProps extends ComponentProps<typeof StyledUl>, VariantProps<typeof StyledUl> {\n  interactive?: boolean;\n}\nexport const Ul = React.forwardRef<React.ElementRef<typeof StyledUl>, ListProps>(\n  ({ interactive, ...props }, forwardedRef) => {\n    const contextValue = useMemo(() => ({ interactive: !!interactive }), [interactive]);\n\n    return (\n      <ListContext.Provider value={contextValue}>\n        <StyledUl role=\"list\" ref={forwardedRef} {...props} />\n      </ListContext.Provider>\n    );\n  },\n);\n\nexport interface OrderedListProps\n  extends ComponentProps<typeof StyledOl>,\n    VariantProps<typeof StyledOl> {\n  interactive?: boolean;\n}\n\nexport const Ol = React.forwardRef<React.ElementRef<typeof StyledOl>, OrderedListProps>(\n  ({ interactive, ...props }, forwardedRef) => {\n    const contextValue = useMemo(() => ({ interactive: !!interactive }), [interactive]);\n\n    return (\n      <ListContext.Provider value={contextValue}>\n        <StyledOl role=\"list\" ref={forwardedRef} {...props} />\n      </ListContext.Provider>\n    );\n  },\n);\n\nconst ControlsWrapper = styled('div', {\n  position: 'absolute',\n  top: 0,\n  right: '$2',\n  zIndex: 1,\n  height: '100%',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  overflow: 'visible',\n});\n\nexport interface ListItemProps\n  extends ComponentProps<typeof StyledLi>,\n    VariantProps<typeof StyledLi>,\n    VariantProps<typeof Flex> {\n  controls?: ReactNode;\n}\nexport const Li = React.forwardRef<React.ElementRef<typeof StyledLi>, ListItemProps>(\n  ({ children, controls, align, justify, direction, gap, wrap, ...props }, forwardedRef) => {\n    const { interactive } = useContext(ListContext);\n    return (\n      <StyledLi {...props} ref={forwardedRef}>\n        {interactive ? (\n          <StyledListItemButton\n            align={align}\n            justify={justify}\n            direction={direction}\n            gap={gap}\n            wrap={wrap}\n          >\n            {children}\n          </StyledListItemButton>\n        ) : (\n          <StyledSpan\n            align={align || 'center'}\n            justify={justify}\n            direction={direction}\n            gap={gap}\n            wrap={wrap}\n            css={{ flexGrow: 1 }}\n          >\n            {children}\n          </StyledSpan>\n        )}\n        {!!controls && <ControlsWrapper>{controls}</ControlsWrapper>}\n      </StyledLi>\n    );\n  },\n);\n"],"names":["styled","Flex","BUTTON_BASE_STYLES","elevationVariants","createContext","useMemo","jsx","useContext","jsxs"],"mappings":"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"}
+{"version":3,"file":"List.cjs","sources":["../../../components/List/List.tsx"],"sourcesContent":["import React, { ComponentProps, createContext, ReactNode, useContext, useMemo } from 'react';\n\nimport { styled, VariantProps } from '../../stitches.config';\nimport { BUTTON_BASE_STYLES } from '../Button';\nimport { elevationVariants } from '../Elevation';\nimport { Flex } from '../Flex';\n\nconst LIST_ITEM_CONTENT_STYLES = {\n  bc: 'transparent',\n  c: 'inherit',\n  borderRadius: 'inherit',\n  fontFamily: '$rubik',\n  fontSize: '$3',\n  fontVariantNumeric: 'tabular-nums',\n};\n\nconst StyledSpan = styled('span', Flex, {\n  // APPLY BUTTON STYLES\n  ...LIST_ITEM_CONTENT_STYLES,\n  // CUSTOM\n  p: '$1',\n  gap: '$1',\n});\n\nconst StyledListItemButton = styled('button', Flex, {\n  ...BUTTON_BASE_STYLES,\n  ...LIST_ITEM_CONTENT_STYLES,\n  outline: 'none',\n\n  // CUSTOM\n  flexGrow: 1,\n  width: '100%',\n  p: '$2',\n  position: 'relative',\n  '&::before': {\n    borderRadius: 'inherit',\n    boxSizing: 'border-box',\n    content: '\"\"',\n    position: 'absolute',\n    inset: 0,\n  },\n  '&::after': {\n    borderRadius: 'inherit',\n    boxSizing: 'border-box',\n    content: '\"\"',\n    position: 'absolute',\n    inset: 0,\n  },\n  '&:focus, &:focus-visible': {\n    boxShadow: 'inset 0 0 0 2px $colors$listItemFocusBorder',\n  },\n\n  '@hover': {\n    '&:hover': {\n      cursor: 'pointer',\n      '&::before': {\n        backgroundColor: '$listItemHoverBg',\n      },\n      '&::after': {\n        backgroundColor: '$primary',\n        opacity: 0.05,\n      },\n    },\n  },\n  '&:active': {\n    '&::before': {\n      backgroundColor: '$listItemActiveBg',\n    },\n    '&::after': {\n      backgroundColor: '$primary',\n      opacity: 0.05,\n    },\n  },\n});\n\nconst StyledLi = styled('li', {\n  m: '$2',\n  outline: 'none',\n  position: 'relative',\n  '&:focus-within': {\n    boxShadow: 'none',\n  },\n  variants: {\n    elevation: elevationVariants,\n  },\n  defaultVariants: {\n    elevation: '0',\n  },\n});\n\nconst StyledUl = styled('ul', {\n  m: '0 0 0 8px',\n  p: 0,\n  color: '$textDefault',\n\n  '&:has(> li > span > input[type=\"checkbox\"])': {\n    m: 0,\n    listStyle: 'none',\n    '> li': {\n      marginLeft: 0,\n      '> span': {\n        input: {\n          margin: '0 3px 0 0',\n        },\n      },\n    },\n  },\n  // Restore left-margin indentation when a nested checkbox list is inside a li\n  'li > &:has(> li > span > input[type=\"checkbox\"])': {\n    marginLeft: '$2',\n    '> li': {\n      marginLeft: '$2',\n    },\n  },\n});\n\nconst StyledOl = styled('ol', {\n  m: '0 0 0 8px',\n  p: 0,\n  color: '$textDefault',\n\n  '> li::marker': {\n    fontSize: '$3',\n    fontFamily: '$rubik',\n  },\n});\n\nconst ListContext = createContext({\n  interactive: false,\n});\n\nexport interface ListProps extends ComponentProps<typeof StyledUl>, VariantProps<typeof StyledUl> {\n  interactive?: boolean;\n}\nexport const Ul = React.forwardRef<React.ElementRef<typeof StyledUl>, ListProps>(\n  ({ interactive, ...props }, forwardedRef) => {\n    const parentContext = useContext(ListContext);\n    const contextValue = useMemo(\n      () => ({\n        interactive: interactive !== undefined ? !!interactive : parentContext.interactive,\n      }),\n      [interactive, parentContext.interactive],\n    );\n\n    return (\n      <ListContext.Provider value={contextValue}>\n        <StyledUl role=\"list\" ref={forwardedRef} {...props} />\n      </ListContext.Provider>\n    );\n  },\n);\n\nexport interface OrderedListProps\n  extends ComponentProps<typeof StyledOl>,\n    VariantProps<typeof StyledOl> {\n  interactive?: boolean;\n}\n\nexport const Ol = React.forwardRef<React.ElementRef<typeof StyledOl>, OrderedListProps>(\n  ({ interactive, ...props }, forwardedRef) => {\n    const parentContext = useContext(ListContext);\n    const contextValue = useMemo(\n      () => ({\n        interactive: interactive !== undefined ? !!interactive : parentContext.interactive,\n      }),\n      [interactive, parentContext.interactive],\n    );\n\n    return (\n      <ListContext.Provider value={contextValue}>\n        <StyledOl role=\"list\" ref={forwardedRef} {...props} />\n      </ListContext.Provider>\n    );\n  },\n);\n\nconst ControlsWrapper = styled('div', {\n  position: 'absolute',\n  top: 0,\n  right: '$2',\n  zIndex: 1,\n  height: '100%',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  overflow: 'visible',\n});\n\nexport interface ListItemProps\n  extends ComponentProps<typeof StyledLi>,\n    VariantProps<typeof StyledLi>,\n    VariantProps<typeof Flex> {\n  controls?: ReactNode;\n}\nexport const Li = React.forwardRef<React.ElementRef<typeof StyledLi>, ListItemProps>(\n  ({ children, controls, align, justify, direction, gap, wrap, ...props }, forwardedRef) => {\n    const { interactive } = useContext(ListContext);\n\n    const childArray = React.Children.toArray(children);\n    const nestedLists = childArray.filter(\n      (child) => React.isValidElement(child) && (child.type === Ul || child.type === Ol),\n    );\n    const inlineChildren = childArray.filter(\n      (child) => !(React.isValidElement(child) && (child.type === Ul || child.type === Ol)),\n    );\n\n    return (\n      <StyledLi {...props} ref={forwardedRef}>\n        {interactive ? (\n          <StyledListItemButton\n            align={align}\n            justify={justify}\n            direction={direction}\n            gap={gap}\n            wrap={wrap}\n          >\n            {inlineChildren}\n          </StyledListItemButton>\n        ) : (\n          <StyledSpan\n            align={align || 'center'}\n            justify={justify}\n            direction={direction}\n            gap={gap}\n            wrap={wrap}\n            css={{ flexGrow: 1 }}\n          >\n            {inlineChildren}\n          </StyledSpan>\n        )}\n        {nestedLists}\n        {!!controls && <ControlsWrapper>{controls}</ControlsWrapper>}\n      </StyledLi>\n    );\n  },\n);\n"],"names":["styled","Flex","BUTTON_BASE_STYLES","elevationVariants","createContext","useContext","useMemo","jsx","jsxs"],"mappings":"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"}

package/dist/components/List/List.js

@@ -25,7 +25,9 @@ const StyledListItemButton = styled("button", Flex, {
   outline: "none",
   // CUSTOM
   flexGrow: 1,
+  width: "100%",
   p: "$2",
+  position: "relative",
   "&::before": {
     borderRadius: "inherit",
     boxSizing: "border-box",
@@ -83,17 +85,24 @@ const StyledUl = styled("ul", {
   m: "0 0 0 8px",
   p: 0,
   color: "$textDefault",
-  '&:has(li > span > input[type="checkbox"])': {
+  '&:has(> li > span > input[type="checkbox"])': {
     m: 0,
     listStyle: "none",
-    li: {
+    "> li": {
       marginLeft: 0,
-      span: {
+      "> span": {
         input: {
           margin: "0 3px 0 0"
         }
       }
     }
+  },
+  // Restore left-margin indentation when a nested checkbox list is inside a li
+  'li > &:has(> li > span > input[type="checkbox"])': {
+    marginLeft: "$2",
+    "> li": {
+      marginLeft: "$2"
+    }
   }
 });
 const StyledOl = styled("ol", {
@@ -110,13 +119,25 @@ const ListContext = createContext({
 });
 const Ul = React.forwardRef(
   ({ interactive, ...props }, forwardedRef) => {
-    const contextValue = useMemo(() => ({ interactive: !!interactive }), [interactive]);
+    const parentContext = useContext(ListContext);
+    const contextValue = useMemo(
+      () => ({
+        interactive: interactive !== void 0 ? !!interactive : parentContext.interactive
+      }),
+      [interactive, parentContext.interactive]
+    );
     return /* @__PURE__ */ jsx(ListContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(StyledUl, { role: "list", ref: forwardedRef, ...props }) });
   }
 );
 const Ol = React.forwardRef(
   ({ interactive, ...props }, forwardedRef) => {
-    const contextValue = useMemo(() => ({ interactive: !!interactive }), [interactive]);
+    const parentContext = useContext(ListContext);
+    const contextValue = useMemo(
+      () => ({
+        interactive: interactive !== void 0 ? !!interactive : parentContext.interactive
+      }),
+      [interactive, parentContext.interactive]
+    );
     return /* @__PURE__ */ jsx(ListContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(StyledOl, { role: "list", ref: forwardedRef, ...props }) });
   }
 );
@@ -134,6 +155,13 @@ const ControlsWrapper = styled("div", {
 const Li = React.forwardRef(
   ({ children, controls, align, justify, direction, gap, wrap, ...props }, forwardedRef) => {
     const { interactive } = useContext(ListContext);
+    const childArray = React.Children.toArray(children);
+    const nestedLists = childArray.filter(
+      (child) => React.isValidElement(child) && (child.type === Ul || child.type === Ol)
+    );
+    const inlineChildren = childArray.filter(
+      (child) => !(React.isValidElement(child) && (child.type === Ul || child.type === Ol))
+    );
     return /* @__PURE__ */ jsxs(StyledLi, { ...props, ref: forwardedRef, children: [
       interactive ? /* @__PURE__ */ jsx(
         StyledListItemButton,
@@ -143,7 +171,7 @@ const Li = React.forwardRef(
           direction,
           gap,
           wrap,
-          children
+          children: inlineChildren
         }
       ) : /* @__PURE__ */ jsx(
         StyledSpan,
@@ -154,9 +182,10 @@ const Li = React.forwardRef(
           gap,
           wrap,
           css: { flexGrow: 1 },
-          children
+          children: inlineChildren
         }
       ),
+      nestedLists,
       !!controls && /* @__PURE__ */ jsx(ControlsWrapper, { children: controls })
     ] });
   }

package/dist/components/List/List.js.map

@@ -1 +1 @@
-{"version":3,"file":"List.js","sources":["../../../components/List/List.tsx"],"sourcesContent":["import React, { ComponentProps, createContext, ReactNode, useContext, useMemo } from 'react';\n\nimport { styled, VariantProps } from '../../stitches.config';\nimport { BUTTON_BASE_STYLES } from '../Button';\nimport { elevationVariants } from '../Elevation';\nimport { Flex } from '../Flex';\n\nconst LIST_ITEM_CONTENT_STYLES = {\n  bc: 'transparent',\n  c: 'inherit',\n  borderRadius: 'inherit',\n  fontFamily: '$rubik',\n  fontSize: '$3',\n  fontVariantNumeric: 'tabular-nums',\n};\n\nconst StyledSpan = styled('span', Flex, {\n  // APPLY BUTTON STYLES\n  ...LIST_ITEM_CONTENT_STYLES,\n  // CUSTOM\n  p: '$1',\n  gap: '$1',\n});\n\nconst StyledListItemButton = styled('button', Flex, {\n  ...BUTTON_BASE_STYLES,\n  ...LIST_ITEM_CONTENT_STYLES,\n  outline: 'none',\n\n  // CUSTOM\n  flexGrow: 1,\n  p: '$2',\n  '&::before': {\n    borderRadius: 'inherit',\n    boxSizing: 'border-box',\n    content: '\"\"',\n    position: 'absolute',\n    inset: 0,\n  },\n  '&::after': {\n    borderRadius: 'inherit',\n    boxSizing: 'border-box',\n    content: '\"\"',\n    position: 'absolute',\n    inset: 0,\n  },\n  '&:focus, &:focus-visible': {\n    boxShadow: 'inset 0 0 0 2px $colors$listItemFocusBorder',\n  },\n\n  '@hover': {\n    '&:hover': {\n      cursor: 'pointer',\n      '&::before': {\n        backgroundColor: '$listItemHoverBg',\n      },\n      '&::after': {\n        backgroundColor: '$primary',\n        opacity: 0.05,\n      },\n    },\n  },\n  '&:active': {\n    '&::before': {\n      backgroundColor: '$listItemActiveBg',\n    },\n    '&::after': {\n      backgroundColor: '$primary',\n      opacity: 0.05,\n    },\n  },\n});\n\nconst StyledLi = styled('li', {\n  m: '$2',\n  outline: 'none',\n  position: 'relative',\n  '&:focus-within': {\n    boxShadow: 'none',\n  },\n  variants: {\n    elevation: elevationVariants,\n  },\n  defaultVariants: {\n    elevation: '0',\n  },\n});\n\nconst StyledUl = styled('ul', {\n  m: '0 0 0 8px',\n  p: 0,\n  color: '$textDefault',\n\n  '&:has(li > span > input[type=\"checkbox\"])': {\n    m: 0,\n    listStyle: 'none',\n    li: {\n      marginLeft: 0,\n      span: {\n        input: {\n          margin: '0 3px 0 0',\n        },\n      },\n    },\n  },\n});\n\nconst StyledOl = styled('ol', {\n  m: '0 0 0 8px',\n  p: 0,\n  color: '$textDefault',\n\n  '> li::marker': {\n    fontSize: '$3',\n    fontFamily: '$rubik',\n  },\n});\n\nconst ListContext = createContext({\n  interactive: false,\n});\n\nexport interface ListProps extends ComponentProps<typeof StyledUl>, VariantProps<typeof StyledUl> {\n  interactive?: boolean;\n}\nexport const Ul = React.forwardRef<React.ElementRef<typeof StyledUl>, ListProps>(\n  ({ interactive, ...props }, forwardedRef) => {\n    const contextValue = useMemo(() => ({ interactive: !!interactive }), [interactive]);\n\n    return (\n      <ListContext.Provider value={contextValue}>\n        <StyledUl role=\"list\" ref={forwardedRef} {...props} />\n      </ListContext.Provider>\n    );\n  },\n);\n\nexport interface OrderedListProps\n  extends ComponentProps<typeof StyledOl>,\n    VariantProps<typeof StyledOl> {\n  interactive?: boolean;\n}\n\nexport const Ol = React.forwardRef<React.ElementRef<typeof StyledOl>, OrderedListProps>(\n  ({ interactive, ...props }, forwardedRef) => {\n    const contextValue = useMemo(() => ({ interactive: !!interactive }), [interactive]);\n\n    return (\n      <ListContext.Provider value={contextValue}>\n        <StyledOl role=\"list\" ref={forwardedRef} {...props} />\n      </ListContext.Provider>\n    );\n  },\n);\n\nconst ControlsWrapper = styled('div', {\n  position: 'absolute',\n  top: 0,\n  right: '$2',\n  zIndex: 1,\n  height: '100%',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  overflow: 'visible',\n});\n\nexport interface ListItemProps\n  extends ComponentProps<typeof StyledLi>,\n    VariantProps<typeof StyledLi>,\n    VariantProps<typeof Flex> {\n  controls?: ReactNode;\n}\nexport const Li = React.forwardRef<React.ElementRef<typeof StyledLi>, ListItemProps>(\n  ({ children, controls, align, justify, direction, gap, wrap, ...props }, forwardedRef) => {\n    const { interactive } = useContext(ListContext);\n    return (\n      <StyledLi {...props} ref={forwardedRef}>\n        {interactive ? (\n          <StyledListItemButton\n            align={align}\n            justify={justify}\n            direction={direction}\n            gap={gap}\n            wrap={wrap}\n          >\n            {children}\n          </StyledListItemButton>\n        ) : (\n          <StyledSpan\n            align={align || 'center'}\n            justify={justify}\n            direction={direction}\n            gap={gap}\n            wrap={wrap}\n            css={{ flexGrow: 1 }}\n          >\n            {children}\n          </StyledSpan>\n        )}\n        {!!controls && <ControlsWrapper>{controls}</ControlsWrapper>}\n      </StyledLi>\n    );\n  },\n);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"List.js","sources":["../../../components/List/List.tsx"],"sourcesContent":["import React, { ComponentProps, createContext, ReactNode, useContext, useMemo } from 'react';\n\nimport { styled, VariantProps } from '../../stitches.config';\nimport { BUTTON_BASE_STYLES } from '../Button';\nimport { elevationVariants } from '../Elevation';\nimport { Flex } from '../Flex';\n\nconst LIST_ITEM_CONTENT_STYLES = {\n  bc: 'transparent',\n  c: 'inherit',\n  borderRadius: 'inherit',\n  fontFamily: '$rubik',\n  fontSize: '$3',\n  fontVariantNumeric: 'tabular-nums',\n};\n\nconst StyledSpan = styled('span', Flex, {\n  // APPLY BUTTON STYLES\n  ...LIST_ITEM_CONTENT_STYLES,\n  // CUSTOM\n  p: '$1',\n  gap: '$1',\n});\n\nconst StyledListItemButton = styled('button', Flex, {\n  ...BUTTON_BASE_STYLES,\n  ...LIST_ITEM_CONTENT_STYLES,\n  outline: 'none',\n\n  // CUSTOM\n  flexGrow: 1,\n  width: '100%',\n  p: '$2',\n  position: 'relative',\n  '&::before': {\n    borderRadius: 'inherit',\n    boxSizing: 'border-box',\n    content: '\"\"',\n    position: 'absolute',\n    inset: 0,\n  },\n  '&::after': {\n    borderRadius: 'inherit',\n    boxSizing: 'border-box',\n    content: '\"\"',\n    position: 'absolute',\n    inset: 0,\n  },\n  '&:focus, &:focus-visible': {\n    boxShadow: 'inset 0 0 0 2px $colors$listItemFocusBorder',\n  },\n\n  '@hover': {\n    '&:hover': {\n      cursor: 'pointer',\n      '&::before': {\n        backgroundColor: '$listItemHoverBg',\n      },\n      '&::after': {\n        backgroundColor: '$primary',\n        opacity: 0.05,\n      },\n    },\n  },\n  '&:active': {\n    '&::before': {\n      backgroundColor: '$listItemActiveBg',\n    },\n    '&::after': {\n      backgroundColor: '$primary',\n      opacity: 0.05,\n    },\n  },\n});\n\nconst StyledLi = styled('li', {\n  m: '$2',\n  outline: 'none',\n  position: 'relative',\n  '&:focus-within': {\n    boxShadow: 'none',\n  },\n  variants: {\n    elevation: elevationVariants,\n  },\n  defaultVariants: {\n    elevation: '0',\n  },\n});\n\nconst StyledUl = styled('ul', {\n  m: '0 0 0 8px',\n  p: 0,\n  color: '$textDefault',\n\n  '&:has(> li > span > input[type=\"checkbox\"])': {\n    m: 0,\n    listStyle: 'none',\n    '> li': {\n      marginLeft: 0,\n      '> span': {\n        input: {\n          margin: '0 3px 0 0',\n        },\n      },\n    },\n  },\n  // Restore left-margin indentation when a nested checkbox list is inside a li\n  'li > &:has(> li > span > input[type=\"checkbox\"])': {\n    marginLeft: '$2',\n    '> li': {\n      marginLeft: '$2',\n    },\n  },\n});\n\nconst StyledOl = styled('ol', {\n  m: '0 0 0 8px',\n  p: 0,\n  color: '$textDefault',\n\n  '> li::marker': {\n    fontSize: '$3',\n    fontFamily: '$rubik',\n  },\n});\n\nconst ListContext = createContext({\n  interactive: false,\n});\n\nexport interface ListProps extends ComponentProps<typeof StyledUl>, VariantProps<typeof StyledUl> {\n  interactive?: boolean;\n}\nexport const Ul = React.forwardRef<React.ElementRef<typeof StyledUl>, ListProps>(\n  ({ interactive, ...props }, forwardedRef) => {\n    const parentContext = useContext(ListContext);\n    const contextValue = useMemo(\n      () => ({\n        interactive: interactive !== undefined ? !!interactive : parentContext.interactive,\n      }),\n      [interactive, parentContext.interactive],\n    );\n\n    return (\n      <ListContext.Provider value={contextValue}>\n        <StyledUl role=\"list\" ref={forwardedRef} {...props} />\n      </ListContext.Provider>\n    );\n  },\n);\n\nexport interface OrderedListProps\n  extends ComponentProps<typeof StyledOl>,\n    VariantProps<typeof StyledOl> {\n  interactive?: boolean;\n}\n\nexport const Ol = React.forwardRef<React.ElementRef<typeof StyledOl>, OrderedListProps>(\n  ({ interactive, ...props }, forwardedRef) => {\n    const parentContext = useContext(ListContext);\n    const contextValue = useMemo(\n      () => ({\n        interactive: interactive !== undefined ? !!interactive : parentContext.interactive,\n      }),\n      [interactive, parentContext.interactive],\n    );\n\n    return (\n      <ListContext.Provider value={contextValue}>\n        <StyledOl role=\"list\" ref={forwardedRef} {...props} />\n      </ListContext.Provider>\n    );\n  },\n);\n\nconst ControlsWrapper = styled('div', {\n  position: 'absolute',\n  top: 0,\n  right: '$2',\n  zIndex: 1,\n  height: '100%',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  overflow: 'visible',\n});\n\nexport interface ListItemProps\n  extends ComponentProps<typeof StyledLi>,\n    VariantProps<typeof StyledLi>,\n    VariantProps<typeof Flex> {\n  controls?: ReactNode;\n}\nexport const Li = React.forwardRef<React.ElementRef<typeof StyledLi>, ListItemProps>(\n  ({ children, controls, align, justify, direction, gap, wrap, ...props }, forwardedRef) => {\n    const { interactive } = useContext(ListContext);\n\n    const childArray = React.Children.toArray(children);\n    const nestedLists = childArray.filter(\n      (child) => React.isValidElement(child) && (child.type === Ul || child.type === Ol),\n    );\n    const inlineChildren = childArray.filter(\n      (child) => !(React.isValidElement(child) && (child.type === Ul || child.type === Ol)),\n    );\n\n    return (\n      <StyledLi {...props} ref={forwardedRef}>\n        {interactive ? (\n          <StyledListItemButton\n            align={align}\n            justify={justify}\n            direction={direction}\n            gap={gap}\n            wrap={wrap}\n          >\n            {inlineChildren}\n          </StyledListItemButton>\n        ) : (\n          <StyledSpan\n            align={align || 'center'}\n            justify={justify}\n            direction={direction}\n            gap={gap}\n            wrap={wrap}\n            css={{ flexGrow: 1 }}\n          >\n            {inlineChildren}\n          </StyledSpan>\n        )}\n        {nestedLists}\n        {!!controls && <ControlsWrapper>{controls}</ControlsWrapper>}\n      </StyledLi>\n    );\n  },\n);\n"],"names":[],"mappings":"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"}

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

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 ;/* empty css                                       */
-const createRuntimeFn62c9670f_esm = require("../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.cjs");
-var paragraphRecipe = createRuntimeFn62c9670f_esm.c({ defaultClassName: "ssoibc1 ssoibc0", variantClassNames: { size: { "1": "ssoibc2", "2": "ssoibc3" } }, defaultVariants: { size: "1" }, compoundVariants: [] });
+const createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
+var paragraphRecipe = createRuntimeFn.createRuntimeFn({ defaultClassName: "ssoibc1 ssoibc0", variantClassNames: { size: { "1": "ssoibc2", "2": "ssoibc3" } }, defaultVariants: { size: "1" }, compoundVariants: [] });
 exports.paragraphRecipe = paragraphRecipe;
 //# sourceMappingURL=Paragraph.vanilla.css.cjs.map

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

@@ -1,5 +1,5 @@
 /* empty css                                     */
-import { c as createRuntimeFn } from "../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js";
+import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
 var paragraphRecipe = createRuntimeFn({ defaultClassName: "ssoibc1 ssoibc0", variantClassNames: { size: { "1": "ssoibc2", "2": "ssoibc3" } }, defaultVariants: { size: "1" }, compoundVariants: [] });
 export {
   paragraphRecipe

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

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 ;/* empty css                                      */
-const createRuntimeFn62c9670f_esm = require("../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.cjs");
-var skeletonRecipe = createRuntimeFn62c9670f_esm.c({ defaultClassName: "_12qsecm2 _12qsecm1", variantClassNames: { variant: { square: "_12qsecm3", circle: "_12qsecm4", badge: "_12qsecm5", button: "_12qsecm6", text: "_12qsecm7" } }, defaultVariants: { variant: "text" }, compoundVariants: [] });
+const createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
+var skeletonRecipe = createRuntimeFn.createRuntimeFn({ defaultClassName: "_12qsecm2 _12qsecm1", variantClassNames: { variant: { square: "_12qsecm3", circle: "_12qsecm4", badge: "_12qsecm5", button: "_12qsecm6", text: "_12qsecm7" } }, defaultVariants: { variant: "text" }, compoundVariants: [] });
 exports.skeletonRecipe = skeletonRecipe;
 //# sourceMappingURL=Skeleton.vanilla.css.cjs.map

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

@@ -1,5 +1,5 @@
 /* empty css                                    */
-import { c as createRuntimeFn } from "../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js";
+import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
 var skeletonRecipe = createRuntimeFn({ defaultClassName: "_12qsecm2 _12qsecm1", variantClassNames: { variant: { square: "_12qsecm3", circle: "_12qsecm4", badge: "_12qsecm5", button: "_12qsecm6", text: "_12qsecm7" } }, defaultVariants: { variant: "text" }, compoundVariants: [] });
 export {
   skeletonRecipe

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

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 ;/* empty css                                      */
-const createRuntimeFn62c9670f_esm = require("../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.cjs");
-var styledTextareaRecipe = createRuntimeFn62c9670f_esm.c({ defaultClassName: "q2igaw1 q2igaw0", variantClassNames: { variant: { ghost: "q2igaw2" }, state: { invalid: "q2igaw3" }, cursor: { "default": "q2igaw4", text: "q2igaw5" }, resize: { none: "q2igaw6", both: "q2igaw7", vertical: "q2igaw8", horizontal: "q2igaw9" }, endAdornment: { true: "q2igawa" } }, defaultVariants: { cursor: "default", resize: "both" }, compoundVariants: [[{ variant: "ghost", state: "invalid" }, "q2igawb"]] });
-var textareaWrapperRecipe = createRuntimeFn62c9670f_esm.c({ defaultClassName: "q2igawd q2igawc", variantClassNames: { disabled: { true: "q2igawe" }, state: { invalid: "q2igawf" } }, defaultVariants: { disabled: false }, compoundVariants: [] });
+const createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
+var styledTextareaRecipe = createRuntimeFn.createRuntimeFn({ defaultClassName: "q2igaw1 q2igaw0", variantClassNames: { variant: { ghost: "q2igaw2" }, state: { invalid: "q2igaw3" }, cursor: { "default": "q2igaw4", text: "q2igaw5" }, resize: { none: "q2igaw6", both: "q2igaw7", vertical: "q2igaw8", horizontal: "q2igaw9" }, endAdornment: { true: "q2igawa" } }, defaultVariants: { cursor: "default", resize: "both" }, compoundVariants: [[{ variant: "ghost", state: "invalid" }, "q2igawb"]] });
+var textareaWrapperRecipe = createRuntimeFn.createRuntimeFn({ defaultClassName: "q2igawd q2igawc", variantClassNames: { disabled: { true: "q2igawe" }, state: { invalid: "q2igawf" } }, defaultVariants: { disabled: false }, compoundVariants: [] });
 var adornmentWrapperEnd = "q2igawg";
 exports.adornmentWrapperEnd = adornmentWrapperEnd;
 exports.styledTextareaRecipe = styledTextareaRecipe;

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

@@ -1,5 +1,5 @@
 /* empty css                                    */
-import { c as createRuntimeFn } from "../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js";
+import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
 var styledTextareaRecipe = createRuntimeFn({ defaultClassName: "q2igaw1 q2igaw0", variantClassNames: { variant: { ghost: "q2igaw2" }, state: { invalid: "q2igaw3" }, cursor: { "default": "q2igaw4", text: "q2igaw5" }, resize: { none: "q2igaw6", both: "q2igaw7", vertical: "q2igaw8", horizontal: "q2igaw9" }, endAdornment: { true: "q2igawa" } }, defaultVariants: { cursor: "default", resize: "both" }, compoundVariants: [[{ variant: "ghost", state: "invalid" }, "q2igawb"]] });
 var textareaWrapperRecipe = createRuntimeFn({ defaultClassName: "q2igawd q2igawc", variantClassNames: { disabled: { true: "q2igawe" }, state: { invalid: "q2igawf" } }, defaultVariants: { disabled: false }, compoundVariants: [] });
 var adornmentWrapperEnd = "q2igawg";

package/dist/components/colorSchemeContext.cjs

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+function readDocumentTheme() {
+  const el = document.documentElement;
+  if (el.classList.contains("dark")) return "dark";
+  if (el.classList.contains("light")) return "light";
+  const attr = el.dataset.theme;
+  if (attr === "dark" || attr === "light") return attr;
+  return null;
+}
+const ColorSchemeContext = React.createContext("light");
+function ColorSchemeProvider({ children }) {
+  const [scheme, setScheme] = React.useState(() => {
+    if (typeof window === "undefined") return "light";
+    return readDocumentTheme() ?? (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
+  });
+  React.useEffect(() => {
+    const observer = new MutationObserver(() => {
+      const docTheme = readDocumentTheme();
+      if (docTheme) setScheme(docTheme);
+    });
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class", "data-theme"]
+    });
+    const mq = window.matchMedia("(prefers-color-scheme: dark)");
+    const mqHandler = (e) => {
+      if (!readDocumentTheme()) setScheme(e.matches ? "dark" : "light");
+    };
+    mq.addEventListener("change", mqHandler);
+    return () => {
+      observer.disconnect();
+      mq.removeEventListener("change", mqHandler);
+    };
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsx(ColorSchemeContext.Provider, { value: scheme, children });
+}
+function useColorScheme() {
+  return React.useContext(ColorSchemeContext);
+}
+exports.ColorSchemeProvider = ColorSchemeProvider;
+exports.useColorScheme = useColorScheme;
+//# sourceMappingURL=colorSchemeContext.cjs.map

package/dist/components/colorSchemeContext.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"colorSchemeContext.cjs","sources":["../../components/colorSchemeContext.tsx"],"sourcesContent":["import React, { createContext, useContext, useEffect, useState } from 'react';\n\nexport type ColorScheme = 'light' | 'dark';\n\nfunction readDocumentTheme(): ColorScheme | null {\n  const el = document.documentElement;\n  if (el.classList.contains('dark')) return 'dark';\n  if (el.classList.contains('light')) return 'light';\n  const attr = el.dataset.theme;\n  if (attr === 'dark' || attr === 'light') return attr;\n  return null;\n}\n\nconst ColorSchemeContext = createContext<ColorScheme>('light');\n\nexport function ColorSchemeProvider({ children }: { children: React.ReactNode }) {\n  const [scheme, setScheme] = useState<ColorScheme>(() => {\n    if (typeof window === 'undefined') return 'light';\n    return (\n      readDocumentTheme() ??\n      (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')\n    );\n  });\n\n  useEffect(() => {\n    const observer = new MutationObserver(() => {\n      const docTheme = readDocumentTheme();\n      if (docTheme) setScheme(docTheme);\n    });\n    observer.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: ['class', 'data-theme'],\n    });\n\n    const mq = window.matchMedia('(prefers-color-scheme: dark)');\n    const mqHandler = (e: MediaQueryListEvent) => {\n      if (!readDocumentTheme()) setScheme(e.matches ? 'dark' : 'light');\n    };\n    mq.addEventListener('change', mqHandler);\n\n    return () => {\n      observer.disconnect();\n      mq.removeEventListener('change', mqHandler);\n    };\n  }, []);\n\n  return <ColorSchemeContext.Provider value={scheme}>{children}</ColorSchemeContext.Provider>;\n}\n\nexport function useColorScheme(): ColorScheme {\n  return useContext(ColorSchemeContext);\n}\n"],"names":["createContext","useState","useEffect","useContext"],"mappings":";;;;AAIA,SAAS,oBAAwC;AAC/C,QAAM,KAAK,SAAS;AACpB,MAAI,GAAG,UAAU,SAAS,MAAM,EAAG,QAAO;AAC1C,MAAI,GAAG,UAAU,SAAS,OAAO,EAAG,QAAO;AAC3C,QAAM,OAAO,GAAG,QAAQ;AACxB,MAAI,SAAS,UAAU,SAAS,QAAS,QAAO;AAChD,SAAO;AACT;AAEA,MAAM,qBAAqBA,MAAAA,cAA2B,OAAO;AAEtD,SAAS,oBAAoB,EAAE,YAA2C;AAC/E,QAAM,CAAC,QAAQ,SAAS,IAAIC,MAAAA,SAAsB,MAAM;AACtD,QAAI,OAAO,WAAW,YAAa,QAAO;AAC1C,WACE,wBACC,OAAO,WAAW,8BAA8B,EAAE,UAAU,SAAS;AAAA,EAE1E,CAAC;AAEDC,QAAAA,UAAU,MAAM;AACd,UAAM,WAAW,IAAI,iBAAiB,MAAM;AAC1C,YAAM,WAAW,kBAAA;AACjB,UAAI,oBAAoB,QAAQ;AAAA,IAClC,CAAC;AACD,aAAS,QAAQ,SAAS,iBAAiB;AAAA,MACzC,YAAY;AAAA,MACZ,iBAAiB,CAAC,SAAS,YAAY;AAAA,IAAA,CACxC;AAED,UAAM,KAAK,OAAO,WAAW,8BAA8B;AAC3D,UAAM,YAAY,CAAC,MAA2B;AAC5C,UAAI,CAAC,kBAAA,aAA+B,EAAE,UAAU,SAAS,OAAO;AAAA,IAClE;AACA,OAAG,iBAAiB,UAAU,SAAS;AAEvC,WAAO,MAAM;AACX,eAAS,WAAA;AACT,SAAG,oBAAoB,UAAU,SAAS;AAAA,IAC5C;AAAA,EACF,GAAG,CAAA,CAAE;AAEL,wCAAQ,mBAAmB,UAAnB,EAA4B,OAAO,QAAS,UAAS;AAC/D;AAEO,SAAS,iBAA8B;AAC5C,SAAOC,MAAAA,WAAW,kBAAkB;AACtC;;;"}

package/dist/components/colorSchemeContext.js

@@ -0,0 +1,45 @@
+import { jsx } from "react/jsx-runtime";
+import { useContext, createContext, useState, useEffect } from "react";
+function readDocumentTheme() {
+  const el = document.documentElement;
+  if (el.classList.contains("dark")) return "dark";
+  if (el.classList.contains("light")) return "light";
+  const attr = el.dataset.theme;
+  if (attr === "dark" || attr === "light") return attr;
+  return null;
+}
+const ColorSchemeContext = createContext("light");
+function ColorSchemeProvider({ children }) {
+  const [scheme, setScheme] = useState(() => {
+    if (typeof window === "undefined") return "light";
+    return readDocumentTheme() ?? (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
+  });
+  useEffect(() => {
+    const observer = new MutationObserver(() => {
+      const docTheme = readDocumentTheme();
+      if (docTheme) setScheme(docTheme);
+    });
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class", "data-theme"]
+    });
+    const mq = window.matchMedia("(prefers-color-scheme: dark)");
+    const mqHandler = (e) => {
+      if (!readDocumentTheme()) setScheme(e.matches ? "dark" : "light");
+    };
+    mq.addEventListener("change", mqHandler);
+    return () => {
+      observer.disconnect();
+      mq.removeEventListener("change", mqHandler);
+    };
+  }, []);
+  return /* @__PURE__ */ jsx(ColorSchemeContext.Provider, { value: scheme, children });
+}
+function useColorScheme() {
+  return useContext(ColorSchemeContext);
+}
+export {
+  ColorSchemeProvider,
+  useColorScheme
+};
+//# sourceMappingURL=colorSchemeContext.js.map

package/dist/components/colorSchemeContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"colorSchemeContext.js","sources":["../../components/colorSchemeContext.tsx"],"sourcesContent":["import React, { createContext, useContext, useEffect, useState } from 'react';\n\nexport type ColorScheme = 'light' | 'dark';\n\nfunction readDocumentTheme(): ColorScheme | null {\n  const el = document.documentElement;\n  if (el.classList.contains('dark')) return 'dark';\n  if (el.classList.contains('light')) return 'light';\n  const attr = el.dataset.theme;\n  if (attr === 'dark' || attr === 'light') return attr;\n  return null;\n}\n\nconst ColorSchemeContext = createContext<ColorScheme>('light');\n\nexport function ColorSchemeProvider({ children }: { children: React.ReactNode }) {\n  const [scheme, setScheme] = useState<ColorScheme>(() => {\n    if (typeof window === 'undefined') return 'light';\n    return (\n      readDocumentTheme() ??\n      (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')\n    );\n  });\n\n  useEffect(() => {\n    const observer = new MutationObserver(() => {\n      const docTheme = readDocumentTheme();\n      if (docTheme) setScheme(docTheme);\n    });\n    observer.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: ['class', 'data-theme'],\n    });\n\n    const mq = window.matchMedia('(prefers-color-scheme: dark)');\n    const mqHandler = (e: MediaQueryListEvent) => {\n      if (!readDocumentTheme()) setScheme(e.matches ? 'dark' : 'light');\n    };\n    mq.addEventListener('change', mqHandler);\n\n    return () => {\n      observer.disconnect();\n      mq.removeEventListener('change', mqHandler);\n    };\n  }, []);\n\n  return <ColorSchemeContext.Provider value={scheme}>{children}</ColorSchemeContext.Provider>;\n}\n\nexport function useColorScheme(): ColorScheme {\n  return useContext(ColorSchemeContext);\n}\n"],"names":[],"mappings":";;AAIA,SAAS,oBAAwC;AAC/C,QAAM,KAAK,SAAS;AACpB,MAAI,GAAG,UAAU,SAAS,MAAM,EAAG,QAAO;AAC1C,MAAI,GAAG,UAAU,SAAS,OAAO,EAAG,QAAO;AAC3C,QAAM,OAAO,GAAG,QAAQ;AACxB,MAAI,SAAS,UAAU,SAAS,QAAS,QAAO;AAChD,SAAO;AACT;AAEA,MAAM,qBAAqB,cAA2B,OAAO;AAEtD,SAAS,oBAAoB,EAAE,YAA2C;AAC/E,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAsB,MAAM;AACtD,QAAI,OAAO,WAAW,YAAa,QAAO;AAC1C,WACE,wBACC,OAAO,WAAW,8BAA8B,EAAE,UAAU,SAAS;AAAA,EAE1E,CAAC;AAED,YAAU,MAAM;AACd,UAAM,WAAW,IAAI,iBAAiB,MAAM;AAC1C,YAAM,WAAW,kBAAA;AACjB,UAAI,oBAAoB,QAAQ;AAAA,IAClC,CAAC;AACD,aAAS,QAAQ,SAAS,iBAAiB;AAAA,MACzC,YAAY;AAAA,MACZ,iBAAiB,CAAC,SAAS,YAAY;AAAA,IAAA,CACxC;AAED,UAAM,KAAK,OAAO,WAAW,8BAA8B;AAC3D,UAAM,YAAY,CAAC,MAA2B;AAC5C,UAAI,CAAC,kBAAA,aAA+B,EAAE,UAAU,SAAS,OAAO;AAAA,IAClE;AACA,OAAG,iBAAiB,UAAU,SAAS;AAEvC,WAAO,MAAM;AACX,eAAS,WAAA;AACT,SAAG,oBAAoB,UAAU,SAAS;AAAA,IAC5C;AAAA,EACF,GAAG,CAAA,CAAE;AAEL,6BAAQ,mBAAmB,UAAnB,EAA4B,OAAO,QAAS,UAAS;AAC/D;AAEO,SAAS,iBAA8B;AAC5C,SAAO,WAAW,kBAAkB;AACtC;"}