@kimdw-rtk/ui 0.0.17 → 0.0.20

package/dist/styles/sprinkles.css.mjs

@@ -1,139 +1,25 @@
-import "../chunk-IEP6GGEX.mjs";
-
-// src/styles/sprinkles.css.ts
-import { createSprinkles, defineProperties } from "@vanilla-extract/sprinkles";
-import { sprinklesLayer } from "#styles.mjs";
-import { theme } from "#themes.mjs";
-import { breakpoint, lightColor, spacing, typography } from "#tokens.mjs";
-var colors = Object.assign(
-  {},
-  ...[
-    ...Object.entries(lightColor).reduce(
-      (prev, [name, scales]) => [
-        ...prev,
-        ...Object.entries(scales).map(
-          ([scale, value]) => ({ [`${name}-${scale}`]: `rgb(${value})` })
-        )
-      ],
-      []
-    ),
-    ...Object.entries(theme.color).map(
-      ([name, value]) => ({ [name]: `rgb(${value})` })
-    )
-  ]
-);
-var colorProperties = defineProperties({
-  "@layer": sprinklesLayer,
-  properties: {
-    color: colors,
-    borderColor: colors,
-    backgroundColor: colors
-  }
-});
-var size = {
-  auto: "auto",
-  "0": "0",
-  "100%": "100%",
-  "5em": "5em",
-  "10em": "10em",
-  "15em": "15em",
-  "20em": "20em",
-  "25em": "25em"
-};
-var boxProperties = defineProperties({
-  "@layer": sprinklesLayer,
-  conditions: {
-    mobile: {},
-    desktop: { "@media": "screen and (min-width: 1024px)" }
-  },
-  defaultCondition: "mobile",
-  properties: {
-    display: ["flex", "block", "none", "inline", "inline-block", "inline-flex"],
-    flexDirection: ["row", "column", "row-reverse", "column-reverse"],
-    flexWrap: ["nowrap", "wrap", "wrap-reverse", "revert", "revert-layer"],
-    flexShrink: {
-      "0": 0,
-      "1": 1
-    },
-    flexGrow: {
-      "0": 0,
-      "1": 1
-    },
-    flexBasis: size,
-    justifyContent: [
-      "stretch",
-      "flex-start",
-      "center",
-      "flex-end",
-      "space-around",
-      "space-between"
-    ],
-    alignItems: ["stretch", "flex-start", "center", "flex-end"],
-    gap: spacing,
-    paddingTop: spacing,
-    paddingBottom: spacing,
-    paddingLeft: spacing,
-    paddingRight: spacing,
-    marginTop: spacing,
-    marginBottom: spacing,
-    marginLeft: spacing,
-    marginRight: spacing,
-    boxShadow: {
-      "border-sm": `0 0 0.5rem 0.0625rem rgba(${theme.color.border}, 0.33)`,
-      "border-md": `0 0 1rem 0.1875rem rgba(${theme.color.border}, 0.33)`,
-      "border-lg": `0 0 1.5rem 0.375rem rgba(${theme.color.border}, 0.33)`,
-      "accent-sm": `0 0 0.5rem 0.0625rem rgb(${theme.color.accent})`,
-      "accent-md": `0 0 1rem 0.125rem rgb(${theme.color.accent})`,
-      "accent-lg": `0 0 1.5rem 0.375rem rgb(${theme.color.accent})`
-    },
-    borderRadius: {
-      none: "0",
-      sm: `calc(${theme.borderRadius} * 0.75)`,
-      md: theme.borderRadius,
-      lg: `calc(${theme.borderRadius} * 1.5)`
-    },
-    width: size,
-    height: size
-  },
-  shorthands: {
-    padding: ["paddingTop", "paddingBottom", "paddingLeft", "paddingRight"],
-    paddingX: ["paddingLeft", "paddingRight"],
-    paddingY: ["paddingTop", "paddingBottom"],
-    margin: ["marginTop", "marginBottom", "marginLeft", "marginRight"],
-    marginX: ["marginLeft", "marginRight"],
-    marginY: ["marginTop", "marginBottom"]
-  }
-});
-var typographyProperties = defineProperties({
-  "@layer": sprinklesLayer,
-  conditions: {
-    mobile: {},
-    desktop: { "@media": `screen and (min-width: ${breakpoint.md}px)` }
-  },
-  defaultCondition: "mobile",
-  properties: {
-    lineHeight: typography.lineHeight,
-    fontSize: typography.size,
-    fontWeight: typography.weight,
-    wordBreak: ["break-all", "break-word", "keep-all"]
-  }
-});
-var miscProperties = defineProperties({
-  "@layer": sprinklesLayer,
-  properties: {
-    cursor: {
-      pointer: "pointer",
-      "not-allowed": "not-allowed",
-      default: "default"
-    }
-  }
-});
-var sprinkles = createSprinkles(
+import {
   boxProperties,
   colorProperties,
-  typographyProperties,
-  miscProperties
-);
+  miscProperties,
+  sprinkles,
+  typographyProperties
+} from "../chunk-XWN5CKME.mjs";
+import "../chunk-MRRMOBIN.mjs";
+import "../chunk-P7O6MVCQ.mjs";
+import "../chunk-ZDD3I6QG.mjs";
+import "../chunk-HRD45GAF.mjs";
+import "../chunk-BT3VUZN5.mjs";
+import "../chunk-5KF5EDYA.mjs";
+import "../chunk-MBHPGYUE.mjs";
+import "../chunk-RC3PXB5N.mjs";
+import "../chunk-AVNNHE4D.mjs";
+import "../chunk-XOG2JHIV.mjs";
+import "../chunk-7NZKF7UQ.mjs";
+import "../chunk-P64V75GF.mjs";
+import "../chunk-GAJYOAMV.mjs";
+import "../chunk-VSQF5NYH.mjs";
+import "../chunk-D57E6H3M.mjs";
 export {
   boxProperties,
   colorProperties,
@@ -141,4 +27,4 @@ export {
   sprinkles,
   typographyProperties
 };
-//# sourceMappingURL=sprinkles.css.mjs.map
+//# sourceMappingURL=sprinkles.css.mjs.map

package/dist/styles/sprinkles.css.mjs.map

@@ -1 +1,7 @@
-{"version":3,"sources":["../../src/styles/sprinkles.css.ts"],"sourcesContent":["import { createSprinkles, defineProperties } from '@vanilla-extract/sprinkles';\n\nimport { sprinklesLayer } from '#styles';\nimport { theme } from '#themes';\nimport { breakpoint, lightColor, spacing, typography } from '#tokens';\n\ntype ColorName = keyof typeof lightColor;\ntype ColorScale<C extends ColorName> = keyof (typeof lightColor)[C];\ntype Color = Record<`${ColorName}-${ColorScale<ColorName>}`, string>;\ntype SemanticColor = Record<keyof typeof theme.color, string>;\n\nconst colors = Object.assign(\n  {},\n  ...[\n    ...Object.entries(lightColor).reduce(\n      (prev, [name, scales]) => [\n        ...prev,\n        ...Object.entries(scales).map(\n          ([scale, value]) =>\n            ({ [`${name}-${scale}`]: `rgb(${value})` }) as Color,\n        ),\n      ],\n      [] as Color[],\n    ),\n    ...Object.entries(theme.color).map(\n      ([name, value]) => ({ [name]: `rgb(${value})` }) as SemanticColor,\n    ),\n  ],\n) as Record<keyof Color | keyof SemanticColor, string>;\n\nexport const colorProperties = defineProperties({\n  '@layer': sprinklesLayer,\n  properties: {\n    color: colors,\n    borderColor: colors,\n    backgroundColor: colors,\n  },\n});\n\nconst size = {\n  auto: 'auto',\n  '0': '0',\n  '100%': '100%',\n  '5em': '5em',\n  '10em': '10em',\n  '15em': '15em',\n  '20em': '20em',\n  '25em': '25em',\n};\n\nexport const boxProperties = defineProperties({\n  '@layer': sprinklesLayer,\n  conditions: {\n    mobile: {},\n    desktop: { '@media': 'screen and (min-width: 1024px)' },\n  },\n  defaultCondition: 'mobile',\n  properties: {\n    display: ['flex', 'block', 'none', 'inline', 'inline-block', 'inline-flex'],\n    flexDirection: ['row', 'column', 'row-reverse', 'column-reverse'],\n    flexWrap: ['nowrap', 'wrap', 'wrap-reverse', 'revert', 'revert-layer'],\n    flexShrink: {\n      '0': 0,\n      '1': 1,\n    },\n    flexGrow: {\n      '0': 0,\n      '1': 1,\n    },\n    flexBasis: size,\n    justifyContent: [\n      'stretch',\n      'flex-start',\n      'center',\n      'flex-end',\n      'space-around',\n      'space-between',\n    ],\n    alignItems: ['stretch', 'flex-start', 'center', 'flex-end'],\n    gap: spacing,\n    paddingTop: spacing,\n    paddingBottom: spacing,\n    paddingLeft: spacing,\n    paddingRight: spacing,\n    marginTop: spacing,\n    marginBottom: spacing,\n    marginLeft: spacing,\n    marginRight: spacing,\n    boxShadow: {\n      'border-sm': `0 0 0.5rem 0.0625rem rgba(${theme.color.border}, 0.33)`,\n      'border-md': `0 0 1rem 0.1875rem rgba(${theme.color.border}, 0.33)`,\n      'border-lg': `0 0 1.5rem 0.375rem rgba(${theme.color.border}, 0.33)`,\n      'accent-sm': `0 0 0.5rem 0.0625rem rgb(${theme.color.accent})`,\n      'accent-md': `0 0 1rem 0.125rem rgb(${theme.color.accent})`,\n      'accent-lg': `0 0 1.5rem 0.375rem rgb(${theme.color.accent})`,\n    },\n    borderRadius: {\n      none: '0',\n      sm: `calc(${theme.borderRadius} * 0.75)`,\n      md: theme.borderRadius,\n      lg: `calc(${theme.borderRadius} * 1.5)`,\n    },\n    width: size,\n    height: size,\n  },\n  shorthands: {\n    padding: ['paddingTop', 'paddingBottom', 'paddingLeft', 'paddingRight'],\n    paddingX: ['paddingLeft', 'paddingRight'],\n    paddingY: ['paddingTop', 'paddingBottom'],\n    margin: ['marginTop', 'marginBottom', 'marginLeft', 'marginRight'],\n    marginX: ['marginLeft', 'marginRight'],\n    marginY: ['marginTop', 'marginBottom'],\n  },\n});\n\nexport const typographyProperties = defineProperties({\n  '@layer': sprinklesLayer,\n  conditions: {\n    mobile: {},\n    desktop: { '@media': `screen and (min-width: ${breakpoint.md}px)` },\n  },\n  defaultCondition: 'mobile',\n  properties: {\n    lineHeight: typography.lineHeight,\n    fontSize: typography.size,\n    fontWeight: typography.weight,\n    wordBreak: ['break-all', 'break-word', 'keep-all'],\n  },\n});\n\nexport const miscProperties = defineProperties({\n  '@layer': sprinklesLayer,\n  properties: {\n    cursor: {\n      pointer: 'pointer',\n      'not-allowed': 'not-allowed',\n      default: 'default',\n    },\n  },\n});\n\nexport const sprinkles = createSprinkles(\n  boxProperties,\n  colorProperties,\n  typographyProperties,\n  miscProperties,\n);\n\nexport type SprinklesProps = Parameters<typeof sprinkles>[0];\n"],"mappings":"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","names":[]}
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/styles/sx.mjs

@@ -1,17 +1,22 @@
-import "../chunk-IEP6GGEX.mjs";
-
-// src/styles/sx.ts
-import { sprinkles } from "#styles.mjs";
-var sx = (param) => {
-  if (param === void 0) {
-    return "";
-  }
-  if (typeof param === "string") {
-    return param;
-  }
-  return sprinkles(param);
-};
+import {
+  sx
+} from "../chunk-XWN5CKME.mjs";
+import "../chunk-MRRMOBIN.mjs";
+import "../chunk-P7O6MVCQ.mjs";
+import "../chunk-ZDD3I6QG.mjs";
+import "../chunk-HRD45GAF.mjs";
+import "../chunk-BT3VUZN5.mjs";
+import "../chunk-5KF5EDYA.mjs";
+import "../chunk-MBHPGYUE.mjs";
+import "../chunk-RC3PXB5N.mjs";
+import "../chunk-AVNNHE4D.mjs";
+import "../chunk-XOG2JHIV.mjs";
+import "../chunk-7NZKF7UQ.mjs";
+import "../chunk-P64V75GF.mjs";
+import "../chunk-GAJYOAMV.mjs";
+import "../chunk-VSQF5NYH.mjs";
+import "../chunk-D57E6H3M.mjs";
 export {
   sx
 };
-//# sourceMappingURL=sx.mjs.map
+//# sourceMappingURL=sx.mjs.map

package/dist/styles/sx.mjs.map

@@ -1 +1,7 @@
-{"version":3,"sources":["../../src/styles/sx.ts"],"sourcesContent":["import { sprinkles } from '#styles';\n\nexport const sx = (param?: Parameters<typeof sprinkles>[0] | string) => {\n  if (param === undefined) {\n    return '';\n  }\n\n  if (typeof param === 'string') {\n    return param;\n  }\n\n  return sprinkles(param);\n};\n"],"mappings":";;;AAAA,SAAS,iBAAiB;AAEnB,IAAM,KAAK,CAAC,UAAqD;AACtE,MAAI,UAAU,QAAW;AACvB,WAAO;AAAA,EACT;AAEA,MAAI,OAAO,UAAU,UAAU;AAC7B,WAAO;AAAA,EACT;AAEA,SAAO,UAAU,KAAK;AACxB;","names":[]}
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/tests/uiTest.mjs

@@ -1,55 +1,26 @@
 import {
-  react_esm_exports,
-  render
-} from "../chunk-Y4CBEQ5S.mjs";
-import "../chunk-IEP6GGEX.mjs";
-
-// src/tests/uiTest.tsx
-import React from "react";
-import { sprinkles } from "#styles.mjs";
-import { jsx } from "react/jsx-runtime";
-var uiTest = (Component, name) => {
-  describe(`${name} UI`, () => {
-    test("\uCEF4\uD3EC\uB10C\uD2B8\uAC00 \uB80C\uB354\uB9C1\uB41C\uB2E4.", () => {
-      render(/* @__PURE__ */ jsx(Component, { "data-testid": "component" }));
-      expect(react_esm_exports.screen.getByTestId("component")).toBeInTheDocument();
-    });
-    test("sprinkles\uC744 \uC0AC\uC6A9\uD560 \uC218 \uC788\uB2E4.", () => {
-      render(
-        /* @__PURE__ */ jsx(
-          Component,
-          {
-            className: sprinkles({ margin: "md" }),
-            "data-testid": "component"
-          }
-        )
-      );
-      expect(react_esm_exports.screen.getByTestId("component")).toHaveClass(
-        sprinkles({ margin: "md" })
-      );
-    });
-    test("sx\uB97C \uC0AC\uC6A9\uD560 \uC218 \uC788\uB2E4.", () => {
-      render(/* @__PURE__ */ jsx(Component, { sx: { margin: "md" }, "data-testid": "component" }));
-      expect(react_esm_exports.screen.getByTestId("component")).toHaveClass(
-        sprinkles({ margin: "md" })
-      );
-    });
-    test("className\uC744 \uC801\uC6A9\uD560 \uC218 \uC788\uB2E4.", () => {
-      render(/* @__PURE__ */ jsx(Component, { className: "test", "data-testid": "component" }));
-      expect(react_esm_exports.screen.getByTestId("component")).toHaveClass("test");
-    });
-    test("inline style\uC744 \uC801\uC6A9\uD560 \uC218 \uC788\uB2E4.", () => {
-      render(/* @__PURE__ */ jsx(Component, { style: { color: "red" }, "data-testid": "component" }));
-      expect(react_esm_exports.screen.getByTestId("component")).toHaveStyle({ color: "red" });
-    });
-    test("ref\uB97C \uC801\uC6A9\uD560 \uC218 \uC788\uB2E4.", () => {
-      const ref = React.createRef();
-      render(/* @__PURE__ */ jsx(Component, { ref }));
-      expect(ref.current).not.toBeNull();
-    });
-  });
-};
+  uiTest
+} from "../chunk-XTY6JSSK.mjs";
+import "../chunk-KFFUBVOO.mjs";
+import "../chunk-3BVACFSH.mjs";
+import "../chunk-QB7MZLGH.mjs";
+import "../chunk-XWN5CKME.mjs";
+import "../chunk-MRRMOBIN.mjs";
+import "../chunk-P7O6MVCQ.mjs";
+import "../chunk-ZDD3I6QG.mjs";
+import "../chunk-HRD45GAF.mjs";
+import "../chunk-BT3VUZN5.mjs";
+import "../chunk-5KF5EDYA.mjs";
+import "../chunk-MBHPGYUE.mjs";
+import "../chunk-RC3PXB5N.mjs";
+import "../chunk-AVNNHE4D.mjs";
+import "../chunk-XOG2JHIV.mjs";
+import "../chunk-7NZKF7UQ.mjs";
+import "../chunk-P64V75GF.mjs";
+import "../chunk-GAJYOAMV.mjs";
+import "../chunk-VSQF5NYH.mjs";
+import "../chunk-D57E6H3M.mjs";
 export {
   uiTest
 };
-//# sourceMappingURL=uiTest.mjs.map
+//# sourceMappingURL=uiTest.mjs.map

package/dist/tests/uiTest.mjs.map

@@ -1 +1,7 @@
-{"version":3,"sources":["../../src/tests/uiTest.tsx"],"sourcesContent":["import React from 'react';\n\nimport { render, screen } from '@testing-library/react';\n\nimport { sprinkles } from '#styles';\n\n//eslint-disable-next-line\nexport const uiTest = <T extends HTMLElement>(\n  // eslint-disable-next-line\n  Component: React.ComponentType<any>,\n  name: string,\n) => {\n  describe(`${name} UI`, () => {\n    test('컴포넌트가 렌더링된다.', () => {\n      render(<Component data-testid=\"component\" />);\n      expect(screen.getByTestId('component')).toBeInTheDocument();\n    });\n\n    test('sprinkles을 사용할 수 있다.', () => {\n      render(\n        <Component\n          className={sprinkles({ margin: 'md' })}\n          data-testid=\"component\"\n        />,\n      );\n      expect(screen.getByTestId('component')).toHaveClass(\n        sprinkles({ margin: 'md' }),\n      );\n    });\n\n    test('sx를 사용할 수 있다.', () => {\n      render(<Component sx={{ margin: 'md' }} data-testid=\"component\" />);\n      expect(screen.getByTestId('component')).toHaveClass(\n        sprinkles({ margin: 'md' }),\n      );\n    });\n\n    test('className을 적용할 수 있다.', () => {\n      render(<Component className=\"test\" data-testid=\"component\" />);\n      expect(screen.getByTestId('component')).toHaveClass('test');\n    });\n\n    test('inline style을 적용할 수 있다.', () => {\n      render(<Component style={{ color: 'red' }} data-testid=\"component\" />);\n      expect(screen.getByTestId('component')).toHaveStyle({ color: 'red' });\n    });\n\n    test('ref를 적용할 수 있다.', () => {\n      const ref = React.createRef<T>();\n      render(<Component ref={ref} />);\n\n      expect(ref.current).not.toBeNull();\n    });\n  });\n};\n"],"mappings":";;;;;;;AAAA,OAAO,WAAW;AAIlB,SAAS,iBAAiB;AAUb;AAPN,IAAM,SAAS,CAEpB,WACA,SACG;AACH,WAAS,GAAG,IAAI,OAAO,MAAM;AAC3B,SAAK,kEAAgB,MAAM;AACzB,aAAO,oBAAC,aAAU,eAAY,aAAY,CAAE;AAC5C,aAAO,yBAAO,YAAY,WAAW,CAAC,EAAE,kBAAkB;AAAA,IAC5D,CAAC;AAED,SAAK,2DAAwB,MAAM;AACjC;AAAA,QACE;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,UAAU,EAAE,QAAQ,KAAK,CAAC;AAAA,YACrC,eAAY;AAAA;AAAA,QACd;AAAA,MACF;AACA,aAAO,yBAAO,YAAY,WAAW,CAAC,EAAE;AAAA,QACtC,UAAU,EAAE,QAAQ,KAAK,CAAC;AAAA,MAC5B;AAAA,IACF,CAAC;AAED,SAAK,oDAAiB,MAAM;AAC1B,aAAO,oBAAC,aAAU,IAAI,EAAE,QAAQ,KAAK,GAAG,eAAY,aAAY,CAAE;AAClE,aAAO,yBAAO,YAAY,WAAW,CAAC,EAAE;AAAA,QACtC,UAAU,EAAE,QAAQ,KAAK,CAAC;AAAA,MAC5B;AAAA,IACF,CAAC;AAED,SAAK,2DAAwB,MAAM;AACjC,aAAO,oBAAC,aAAU,WAAU,QAAO,eAAY,aAAY,CAAE;AAC7D,aAAO,yBAAO,YAAY,WAAW,CAAC,EAAE,YAAY,MAAM;AAAA,IAC5D,CAAC;AAED,SAAK,8DAA2B,MAAM;AACpC,aAAO,oBAAC,aAAU,OAAO,EAAE,OAAO,MAAM,GAAG,eAAY,aAAY,CAAE;AACrE,aAAO,yBAAO,YAAY,WAAW,CAAC,EAAE,YAAY,EAAE,OAAO,MAAM,CAAC;AAAA,IACtE,CAAC;AAED,SAAK,qDAAkB,MAAM;AAC3B,YAAM,MAAM,MAAM,UAAa;AAC/B,aAAO,oBAAC,aAAU,KAAU,CAAE;AAE9B,aAAO,IAAI,OAAO,EAAE,IAAI,SAAS;AAAA,IACnC,CAAC;AAAA,EACH,CAAC;AACH;","names":[]}
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/themes/darkTheme.css.mjs

@@ -1,36 +1,9 @@
-import "../chunk-IEP6GGEX.mjs";
-
-// src/themes/darkTheme.css.ts
-import { darkColor } from "../tokens/scale/color.mjs";
-var darkThemeVars = {
-  borderRadius: "6px",
-  color: {
-    background: "12, 12, 14",
-    foreground: "238, 238, 238",
-    primary: "36, 81, 173",
-    "primary-foreground": "238, 238, 238",
-    secondary: "32, 38, 45",
-    "secondary-foreground": "212, 212, 213",
-    muted: "30, 36, 44",
-    "muted-foreground": "102, 112, 133",
-    accent: "41, 52, 67",
-    "accent-foreground": "186, 212, 255",
-    border: "38, 43, 51",
-    "border.weak": "32, 32, 32",
-    card: "23, 23, 25",
-    "card-foreground": "238, 238, 238",
-    "card.gradient": "255, 255, 255",
-    success: "22, 163, 74",
-    "success-foreground": "255, 255, 255",
-    danger: "220, 38, 38",
-    "danger-foreground": "255, 255, 255",
-    warning: "202, 138, 4",
-    "warning-foreground": "30, 23, 0",
-    shadow: "0, 0, 0",
-    ...darkColor
-  }
-};
+import {
+  darkThemeVars
+} from "../chunk-BT3VUZN5.mjs";
+import "../chunk-GAJYOAMV.mjs";
+import "../chunk-D57E6H3M.mjs";
 export {
   darkThemeVars
 };
-//# sourceMappingURL=darkTheme.css.mjs.map
+//# sourceMappingURL=darkTheme.css.mjs.map

package/dist/themes/darkTheme.css.mjs.map

@@ -1 +1,7 @@
-{"version":3,"sources":["../../src/themes/darkTheme.css.ts"],"sourcesContent":["import { darkColor } from '../tokens/scale/color';\n\nexport const darkThemeVars = {\n  borderRadius: '6px',\n  color: {\n    background: '12, 12, 14',\n    foreground: '238, 238, 238',\n    primary: '36, 81, 173',\n    'primary-foreground': '238, 238, 238',\n    secondary: '32, 38, 45',\n    'secondary-foreground': '212, 212, 213',\n    muted: '30, 36, 44',\n    'muted-foreground': '102, 112, 133',\n    accent: '41, 52, 67',\n    'accent-foreground': '186, 212, 255',\n    border: '38, 43, 51',\n    'border.weak': '32, 32, 32',\n    card: '23, 23, 25',\n    'card-foreground': '238, 238, 238',\n    'card.gradient': '255, 255, 255',\n    success: '22, 163, 74',\n    'success-foreground': '255, 255, 255',\n    danger: '220, 38, 38',\n    'danger-foreground': '255, 255, 255',\n    warning: '202, 138, 4',\n    'warning-foreground': '30, 23, 0',\n    shadow: '0, 0, 0',\n    ...darkColor,\n  },\n};\n"],"mappings":";;;AAAA,SAAS,iBAAiB;AAEnB,IAAM,gBAAgB;AAAA,EAC3B,cAAc;AAAA,EACd,OAAO;AAAA,IACL,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,sBAAsB;AAAA,IACtB,WAAW;AAAA,IACX,wBAAwB;AAAA,IACxB,OAAO;AAAA,IACP,oBAAoB;AAAA,IACpB,QAAQ;AAAA,IACR,qBAAqB;AAAA,IACrB,QAAQ;AAAA,IACR,eAAe;AAAA,IACf,MAAM;AAAA,IACN,mBAAmB;AAAA,IACnB,iBAAiB;AAAA,IACjB,SAAS;AAAA,IACT,sBAAsB;AAAA,IACtB,QAAQ;AAAA,IACR,qBAAqB;AAAA,IACrB,SAAS;AAAA,IACT,sBAAsB;AAAA,IACtB,QAAQ;AAAA,IACR,GAAG;AAAA,EACL;AACF;","names":[]}
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/themes/index.mjs

@@ -1,10 +1,24 @@
-import "../chunk-IEP6GGEX.mjs";
-
-// src/themes/index.ts
-export * from "./darkTheme.css.mjs";
-export * from "./lightTheme.css.mjs";
-import { theme } from "./theme.css.mjs";
+import "../chunk-HRD45GAF.mjs";
+import {
+  darkThemeVars
+} from "../chunk-BT3VUZN5.mjs";
+import {
+  lightThemeVars
+} from "../chunk-5KF5EDYA.mjs";
+import {
+  theme
+} from "../chunk-MBHPGYUE.mjs";
+import "../chunk-RC3PXB5N.mjs";
+import "../chunk-AVNNHE4D.mjs";
+import "../chunk-XOG2JHIV.mjs";
+import "../chunk-7NZKF7UQ.mjs";
+import "../chunk-P64V75GF.mjs";
+import "../chunk-GAJYOAMV.mjs";
+import "../chunk-VSQF5NYH.mjs";
+import "../chunk-D57E6H3M.mjs";
 export {
+  darkThemeVars,
+  lightThemeVars,
   theme
 };
-//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map

package/dist/themes/index.mjs.map

@@ -1 +1,7 @@
-{"version":3,"sources":["../../src/themes/index.ts"],"sourcesContent":["export * from './darkTheme.css';\nexport * from './lightTheme.css';\nexport { theme } from './theme.css';\n"],"mappings":";;;AAAA,cAAc;AACd,cAAc;AACd,SAAS,aAAa;","names":[]}
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/themes/lightTheme.css.mjs

@@ -1,36 +1,9 @@
-import "../chunk-IEP6GGEX.mjs";
-
-// src/themes/lightTheme.css.ts
-import { lightColor } from "../tokens/scale/color.mjs";
-var lightThemeVars = {
-  borderRadius: "6px",
-  color: {
-    background: "255, 255, 255",
-    foreground: "10, 10, 11",
-    primary: "42, 122, 255",
-    "primary-foreground": "240, 248, 255",
-    secondary: "240, 242, 245",
-    "secondary-foreground": "48, 48, 49",
-    muted: "234, 239, 245",
-    "muted-foreground": "120, 120, 120",
-    accent: "216, 226, 239",
-    "accent-foreground": "32, 32, 33",
-    border: "203, 213, 225",
-    "border.weak": "220, 229, 237",
-    card: "244, 247, 255",
-    "card-foreground": "10, 10, 11",
-    "card.gradient": "179, 195, 255",
-    success: "34, 197, 94",
-    "success-foreground": "255, 255, 255",
-    danger: "239, 68, 68",
-    "danger-foreground": "255, 255, 255",
-    warning: "251, 191, 36",
-    "warning-foreground": "49, 36, 0",
-    shadow: "188, 188, 188",
-    ...lightColor
-  }
-};
+import {
+  lightThemeVars
+} from "../chunk-5KF5EDYA.mjs";
+import "../chunk-GAJYOAMV.mjs";
+import "../chunk-D57E6H3M.mjs";
 export {
   lightThemeVars
 };
-//# sourceMappingURL=lightTheme.css.mjs.map
+//# sourceMappingURL=lightTheme.css.mjs.map

package/dist/themes/lightTheme.css.mjs.map

@@ -1 +1,7 @@
-{"version":3,"sources":["../../src/themes/lightTheme.css.ts"],"sourcesContent":["import { lightColor } from '../tokens/scale/color';\n\nexport const lightThemeVars = {\n  borderRadius: '6px',\n  color: {\n    background: '255, 255, 255',\n    foreground: '10, 10, 11',\n    primary: '42, 122, 255',\n    'primary-foreground': '240, 248, 255',\n    secondary: '240, 242, 245',\n    'secondary-foreground': '48, 48, 49',\n    muted: '234, 239, 245',\n    'muted-foreground': '120, 120, 120',\n    accent: '216, 226, 239',\n    'accent-foreground': '32, 32, 33',\n    border: '203, 213, 225',\n    'border.weak': '220, 229, 237',\n    card: '244, 247, 255',\n    'card-foreground': '10, 10, 11',\n    'card.gradient': '179, 195, 255',\n    success: '34, 197, 94',\n    'success-foreground': '255, 255, 255',\n    danger: '239, 68, 68',\n    'danger-foreground': '255, 255, 255',\n    warning: '251, 191, 36',\n    'warning-foreground': '49, 36, 0',\n    shadow: '188, 188, 188',\n    ...lightColor,\n  },\n};\n"],"mappings":";;;AAAA,SAAS,kBAAkB;AAEpB,IAAM,iBAAiB;AAAA,EAC5B,cAAc;AAAA,EACd,OAAO;AAAA,IACL,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,sBAAsB;AAAA,IACtB,WAAW;AAAA,IACX,wBAAwB;AAAA,IACxB,OAAO;AAAA,IACP,oBAAoB;AAAA,IACpB,QAAQ;AAAA,IACR,qBAAqB;AAAA,IACrB,QAAQ;AAAA,IACR,eAAe;AAAA,IACf,MAAM;AAAA,IACN,mBAAmB;AAAA,IACnB,iBAAiB;AAAA,IACjB,SAAS;AAAA,IACT,sBAAsB;AAAA,IACtB,QAAQ;AAAA,IACR,qBAAqB;AAAA,IACrB,SAAS;AAAA,IACT,sBAAsB;AAAA,IACtB,QAAQ;AAAA,IACR,GAAG;AAAA,EACL;AACF;","names":[]}
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/themes/theme.css.mjs

@@ -1,31 +1,15 @@
-import "../chunk-IEP6GGEX.mjs";
-
-// src/themes/theme.css.ts
-import { createThemeContract } from "@vanilla-extract/css";
-import { semanticColor } from "#tokens.mjs";
-import { lightColor } from "../tokens/scale/color.mjs";
-var semanticColors = semanticColor.reduce(
-  (prev, current) => ({
-    ...prev,
-    [current]: null,
-    [`${current}-foreground`]: null
-  }),
-  {}
-);
-var theme = createThemeContract({
-  borderRadius: null,
-  color: {
-    background: null,
-    foreground: null,
-    border: null,
-    "border.weak": null,
-    "card.gradient": null,
-    shadow: null,
-    ...semanticColors,
-    ...lightColor
-  }
-});
+import {
+  theme
+} from "../chunk-MBHPGYUE.mjs";
+import "../chunk-RC3PXB5N.mjs";
+import "../chunk-AVNNHE4D.mjs";
+import "../chunk-XOG2JHIV.mjs";
+import "../chunk-7NZKF7UQ.mjs";
+import "../chunk-P64V75GF.mjs";
+import "../chunk-GAJYOAMV.mjs";
+import "../chunk-VSQF5NYH.mjs";
+import "../chunk-D57E6H3M.mjs";
 export {
   theme
 };
-//# sourceMappingURL=theme.css.mjs.map
+//# sourceMappingURL=theme.css.mjs.map

package/dist/themes/theme.css.mjs.map

@@ -1 +1,7 @@
-{"version":3,"sources":["../../src/themes/theme.css.ts"],"sourcesContent":["import { createThemeContract } from '@vanilla-extract/css';\n\nimport { semanticColor } from '#tokens';\n\nimport { lightColor } from '../tokens/scale/color';\n\nconst semanticColors = semanticColor.reduce(\n  (prev, current) => ({\n    ...prev,\n    [current]: null,\n    [`${current}-foreground`]: null,\n  }),\n  {},\n) as Record<\n  | (typeof semanticColor)[number]\n  | `${(typeof semanticColor)[number]}-foreground`,\n  null\n>;\n\nexport const theme = createThemeContract({\n  borderRadius: null,\n  color: {\n    background: null,\n    foreground: null,\n    border: null,\n    'border.weak': null,\n    'card.gradient': null,\n    shadow: null,\n    ...semanticColors,\n    ...lightColor,\n  },\n});\n"],"mappings":";;;AAAA,SAAS,2BAA2B;AAEpC,SAAS,qBAAqB;AAE9B,SAAS,kBAAkB;AAE3B,IAAM,iBAAiB,cAAc;AAAA,EACnC,CAAC,MAAM,aAAa;AAAA,IAClB,GAAG;AAAA,IACH,CAAC,OAAO,GAAG;AAAA,IACX,CAAC,GAAG,OAAO,aAAa,GAAG;AAAA,EAC7B;AAAA,EACA,CAAC;AACH;AAMO,IAAM,QAAQ,oBAAoB;AAAA,EACvC,cAAc;AAAA,EACd,OAAO;AAAA,IACL,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR,eAAe;AAAA,IACf,iBAAiB;AAAA,IACjB,QAAQ;AAAA,IACR,GAAG;AAAA,IACH,GAAG;AAAA,EACL;AACF,CAAC;","names":[]}
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/tokens/index.mjs

@@ -1,11 +1,21 @@
-import "../chunk-IEP6GGEX.mjs";
-
-// src/tokens/index.ts
-import { lightColor, darkColor } from "./scale/color.mjs";
-import { breakpoint } from "./semantic/breakpoint.mjs";
-import { semanticColor } from "./semantic/color.mjs";
-import { spacing } from "./semantic/spacing.mjs";
-import { typography } from "./semantic/typography.mjs";
+import "../chunk-RC3PXB5N.mjs";
+import {
+  breakpoint
+} from "../chunk-AVNNHE4D.mjs";
+import {
+  semanticColor
+} from "../chunk-XOG2JHIV.mjs";
+import {
+  spacing
+} from "../chunk-7NZKF7UQ.mjs";
+import {
+  typography
+} from "../chunk-P64V75GF.mjs";
+import {
+  darkColor,
+  lightColor
+} from "../chunk-GAJYOAMV.mjs";
+import "../chunk-D57E6H3M.mjs";
 export {
   breakpoint,
   darkColor,
@@ -14,4 +24,4 @@ export {
   spacing,
   typography
 };
-//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map

package/dist/tokens/index.mjs.map

@@ -1 +1,7 @@
-{"version":3,"sources":["../../src/tokens/index.ts"],"sourcesContent":["export { lightColor, darkColor } from './scale/color';\nexport { breakpoint } from './semantic/breakpoint';\nexport { semanticColor } from './semantic/color';\nexport { spacing } from './semantic/spacing';\nexport { typography } from './semantic/typography';\n"],"mappings":";;;AAAA,SAAS,YAAY,iBAAiB;AACtC,SAAS,kBAAkB;AAC3B,SAAS,qBAAqB;AAC9B,SAAS,eAAe;AACxB,SAAS,kBAAkB;","names":[]}
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}