@kimdw-rtk/ui 0.0.9 → 0.0.12

package/dist/components/Navigation/NavigationDrawer.css.js

@@ -1,52 +1,55 @@
-import { styleWithLayer, recipeWithLayer } from '../../utils/styleUtils.css.js';
-import { theme } from '../../themes/theme.css.js';
-import { navigationBarContainer } from './NavigationBar.css.js';
-
+import { recipeWithLayer, styleWithLayer } from "#styleUtils";
+import { theme } from "#themes";
+import { navigationBarContainer } from "./NavigationBar.css";
 const narrow = styleWithLayer({
-    display: 'none',
-    '@container': {
-        [`${navigationBarContainer} (max-width: 800px)`]: {
-            display: 'block',
-        },
-    },
+  display: "none",
+  "@container": {
+    [`${navigationBarContainer} (max-width: 800px)`]: {
+      display: "block"
+    }
+  }
 });
 const wide = styleWithLayer({
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    gap: '0.5em',
-    flexGrow: '1',
-    '@container': {
-        [`${navigationBarContainer} (max-width: 800px)`]: {
-            display: 'none',
-        },
-    },
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  gap: "0.5em",
+  flexGrow: "1",
+  "@container": {
+    [`${navigationBarContainer} (max-width: 800px)`]: {
+      display: "none"
+    }
+  }
 });
 const popup = recipeWithLayer({
-    base: {
-        position: 'absolute',
-        top: '100%',
-        height: 'calc(100vh - 100%)',
-        left: '0',
-        width: '100%',
-        zIndex: '100',
-        maxHeight: '100vh',
-        padding: '0.75em',
-        borderBottom: `1px solid rgb(${theme.color.border})`,
-        backgroundColor: `rgb(${theme.color.background})`,
-        transition: 'opacity 0.2s ease',
-    },
-    variants: {
-        isVisible: {
-            true: {
-                opacity: '1',
-            },
-            false: {
-                opacity: '0',
-                pointerEvents: 'none',
-            },
-        },
-    },
+  base: {
+    position: "absolute",
+    top: "100%",
+    height: "calc(100vh - 100%)",
+    left: "0",
+    width: "100%",
+    zIndex: "100",
+    maxHeight: "100vh",
+    padding: "0.75em",
+    borderBottom: `1px solid rgb(${theme.color.border})`,
+    backgroundColor: `rgb(${theme.color.background})`,
+    transition: "opacity 0.2s ease"
+  },
+  variants: {
+    isVisible: {
+      true: {
+        opacity: "1"
+      },
+      false: {
+        opacity: "0",
+        pointerEvents: "none"
+      }
+    }
+  }
 });
-
-export { narrow, popup, wide };
+export {
+  narrow,
+  popup,
+  wide
+};
+//# sourceMappingURL=NavigationDrawer.css.js.map

package/dist/components/Navigation/NavigationDrawer.css.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Navigation/NavigationDrawer.css.ts"],"sourcesContent":["import { recipeWithLayer, styleWithLayer } from '#styleUtils';\nimport { theme } from '#themes';\n\nimport { navigationBarContainer } from './NavigationBar.css';\n\nexport const narrow = styleWithLayer({\n  display: 'none',\n\n  '@container': {\n    [`${navigationBarContainer} (max-width: 800px)`]: {\n      display: 'block',\n    },\n  },\n});\n\nexport const wide = styleWithLayer({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'space-between',\n  gap: '0.5em',\n  flexGrow: '1',\n\n  '@container': {\n    [`${navigationBarContainer} (max-width: 800px)`]: {\n      display: 'none',\n    },\n  },\n});\n\nexport const popup = recipeWithLayer({\n  base: {\n    position: 'absolute',\n    top: '100%',\n    height: 'calc(100vh - 100%)',\n    left: '0',\n    width: '100%',\n    zIndex: '100',\n\n    maxHeight: '100vh',\n    padding: '0.75em',\n    borderBottom: `1px solid rgb(${theme.color.border})`,\n\n    backgroundColor: `rgb(${theme.color.background})`,\n\n    transition: 'opacity 0.2s ease',\n  },\n\n  variants: {\n    isVisible: {\n      true: {\n        opacity: '1',\n      },\n\n      false: {\n        opacity: '0',\n\n        pointerEvents: 'none',\n      },\n    },\n  },\n});\n"],"mappings":"AAAA,SAAS,iBAAiB,sBAAsB;AAChD,SAAS,aAAa;AAEtB,SAAS,8BAA8B;AAEhC,MAAM,SAAS,eAAe;AAAA,EACnC,SAAS;AAAA,EAET,cAAc;AAAA,IACZ,CAAC,GAAG,sBAAsB,qBAAqB,GAAG;AAAA,MAChD,SAAS;AAAA,IACX;AAAA,EACF;AACF,CAAC;AAEM,MAAM,OAAO,eAAe;AAAA,EACjC,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,KAAK;AAAA,EACL,UAAU;AAAA,EAEV,cAAc;AAAA,IACZ,CAAC,GAAG,sBAAsB,qBAAqB,GAAG;AAAA,MAChD,SAAS;AAAA,IACX;AAAA,EACF;AACF,CAAC;AAEM,MAAM,QAAQ,gBAAgB;AAAA,EACnC,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,KAAK;AAAA,IACL,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,OAAO;AAAA,IACP,QAAQ;AAAA,IAER,WAAW;AAAA,IACX,SAAS;AAAA,IACT,cAAc,iBAAiB,MAAM,MAAM,MAAM;AAAA,IAEjD,iBAAiB,OAAO,MAAM,MAAM,UAAU;AAAA,IAE9C,YAAY;AAAA,EACd;AAAA,EAEA,UAAU;AAAA,IACR,WAAW;AAAA,MACT,MAAM;AAAA,QACJ,SAAS;AAAA,MACX;AAAA,MAEA,OAAO;AAAA,QACL,SAAS;AAAA,QAET,eAAe;AAAA,MACjB;AAAA,IACF;AAAA,EACF;AACF,CAAC;","names":[]}

package/dist/components/Navigation/NavigationDrawer.d.ts

@@ -1,8 +1,10 @@
-import { type ReactNode } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
 interface NavigationDrawerProps {
     menu: ReactNode;
     aside: ReactNode;
 }
-export declare const NavigationDrawer: ({ menu, aside }: NavigationDrawerProps) => import("react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=NavigationDrawer.d.ts.map
+declare const NavigationDrawer: ({ menu, aside }: NavigationDrawerProps) => react_jsx_runtime.JSX.Element;
+
+export { NavigationDrawer };

package/dist/components/Navigation/NavigationDrawer.js

@@ -1,67 +1,58 @@
-import jsxRuntimeExports from '../../_virtual/jsx-runtime.js';
-import { useState, useEffect } from 'react';
-import '../Accordion/Accordion.js';
-import '../Accordion/AccordionContent.css.js';
-import '../Accordion/AccordionContext.js';
-import '../Accordion/AccordionTrigger.css.js';
-import '@kimdw-rtk/utils';
-import { Box } from '../Box/index.js';
-import { Button } from '../Button/index.js';
-import '../Card/Card.js';
-import '../Card/CardContent.js';
-import '../Card/CardInteraction.js';
-import '../Card/CardThumbnail.js';
-import '../Chip/Chip.js';
-import '../Dialog/Dialog.js';
-import '../Dialog/DialogContent.js';
-import '../Dialog/DialogFooter.js';
-import '../Dialog/DialogHeader.js';
-import './NavigationAside.js';
-import './NavigationBar.js';
-import './NavigationContainer.js';
-import { wide, narrow, popup } from './NavigationDrawer.css.js';
-import './NavigationItem.js';
-import './NavigationLogo.js';
-import './NavigationMenu.js';
-import '../Range/Range.js';
-import '../ScrollArea/ScrollArea.js';
-import '../Select/Select.js';
-import '../Select/SelectContext.js';
-import '../Select/SelectOption.css.js';
-import '../Skeleton/index.js';
-import '../Table/Table.js';
-import '../../styles/layers.css.js';
-import '../../styles/sprinkles.css.js';
-import '../../styles/globalStyle.css.js';
-import '../Table/TableCell.css.js';
-import '../Table/TableHead.css.js';
-import '../Table/TableRow.css.js';
-import '../Tabs/Tabs.js';
-import '../Tabs/TabsContent.js';
-import '../Tabs/TabsList.js';
-import '../Tabs/TabsTrigger.js';
-import '../TextField/index.js';
-import '../Toast/index.js';
-import '../Typography/index.js';
-import X from '../../node_modules/.pnpm/lucide-react@0.503.0_react@18.3.1/node_modules/lucide-react/dist/esm/icons/x.js';
-import AlignJustify from '../../node_modules/.pnpm/lucide-react@0.503.0_react@18.3.1/node_modules/lucide-react/dist/esm/icons/align-justify.js';
-
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { AlignJustifyIcon, XIcon } from "lucide-react";
+import { Box, Button } from "#components";
+import * as s from "./NavigationDrawer.css";
 const NavigationDrawer = ({ menu, aside }) => {
-    const [isExpanded, setIsExpanded] = useState(false);
-    const handleClick = () => {
-        setIsExpanded((prev) => !prev);
+  const [isExpanded, setIsExpanded] = useState(false);
+  const handleClick = () => {
+    setIsExpanded((prev) => !prev);
+  };
+  useEffect(() => {
+    if (isExpanded) {
+      document.body.style.overflow = "hidden";
+    }
+    return () => {
+      if (isExpanded) {
+        document.body.style.overflow = "auto";
+      }
     };
-    useEffect(() => {
-        if (isExpanded) {
-            document.body.style.overflow = 'hidden';
+  }, [isExpanded]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: s.wide, children: [
+      menu,
+      aside
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: s.narrow, children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "icon-md",
+          color: "secondary",
+          variant: "ghost",
+          onClick: handleClick,
+          children: isExpanded ? /* @__PURE__ */ jsx(XIcon, {}) : /* @__PURE__ */ jsx(AlignJustifyIcon, {})
         }
-        return () => {
-            if (isExpanded) {
-                document.body.style.overflow = 'auto';
-            }
-        };
-    }, [isExpanded]);
-    return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsxs("div", { className: wide, children: [menu, aside] }), jsxRuntimeExports.jsxs("div", { className: narrow, children: [jsxRuntimeExports.jsx(Button, { size: "icon-md", color: "secondary", variant: "ghost", onClick: handleClick, children: isExpanded ? jsxRuntimeExports.jsx(X, {}) : jsxRuntimeExports.jsx(AlignJustify, {}) }), jsxRuntimeExports.jsx("div", { className: popup({ isVisible: isExpanded }), children: jsxRuntimeExports.jsxs(Box, { flex: true, gap: "xl", flexDirection: "column-reverse", alignItems: "flex-end", paddingY: "lg", children: [jsxRuntimeExports.jsx(Box, { width: "100%", onClick: () => setIsExpanded(false), children: menu }), aside] }) })] })] }));
+      ),
+      /* @__PURE__ */ jsx("div", { className: s.popup({ isVisible: isExpanded }), children: /* @__PURE__ */ jsxs(
+        Box,
+        {
+          flex: true,
+          gap: "xl",
+          flexDirection: "column-reverse",
+          alignItems: "flex-end",
+          paddingY: "lg",
+          children: [
+            /* @__PURE__ */ jsx(Box, { width: "100%", onClick: () => setIsExpanded(false), children: menu }),
+            aside
+          ]
+        }
+      ) })
+    ] })
+  ] });
+};
+export {
+  NavigationDrawer
 };
-
-export { NavigationDrawer };
+//# sourceMappingURL=NavigationDrawer.js.map

package/dist/components/Navigation/NavigationDrawer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Navigation/NavigationDrawer.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useState, type ReactNode } from 'react';\n\nimport { AlignJustifyIcon, XIcon } from 'lucide-react';\n\nimport { Box, Button } from '#components';\n\nimport * as s from './NavigationDrawer.css';\n\ninterface NavigationDrawerProps {\n  menu: ReactNode;\n  aside: ReactNode;\n}\n\nexport const NavigationDrawer = ({ menu, aside }: NavigationDrawerProps) => {\n  const [isExpanded, setIsExpanded] = useState<boolean>(false);\n\n  const handleClick = () => {\n    setIsExpanded((prev) => !prev);\n  };\n\n  useEffect(() => {\n    if (isExpanded) {\n      document.body.style.overflow = 'hidden';\n    }\n\n    return () => {\n      if (isExpanded) {\n        document.body.style.overflow = 'auto';\n      }\n    };\n  }, [isExpanded]);\n\n  return (\n    <>\n      <div className={s.wide}>\n        {menu}\n        {aside}\n      </div>\n      <div className={s.narrow}>\n        <Button\n          size=\"icon-md\"\n          color=\"secondary\"\n          variant=\"ghost\"\n          onClick={handleClick}\n        >\n          {isExpanded ? <XIcon /> : <AlignJustifyIcon />}\n        </Button>\n        <div className={s.popup({ isVisible: isExpanded })}>\n          <Box\n            flex\n            gap=\"xl\"\n            flexDirection=\"column-reverse\"\n            alignItems=\"flex-end\"\n            paddingY=\"lg\"\n          >\n            <Box width=\"100%\" onClick={() => setIsExpanded(false)}>\n              {menu}\n            </Box>\n            {aside}\n          </Box>\n        </div>\n      </div>\n    </>\n  );\n};\n"],"mappings":";AAmCI,mBAYoB,KAXlB,YADF;AAjCJ,SAAS,WAAW,gBAAgC;AAEpD,SAAS,kBAAkB,aAAa;AAExC,SAAS,KAAK,cAAc;AAE5B,YAAY,OAAO;AAOZ,MAAM,mBAAmB,CAAC,EAAE,MAAM,MAAM,MAA6B;AAC1E,QAAM,CAAC,YAAY,aAAa,IAAI,SAAkB,KAAK;AAE3D,QAAM,cAAc,MAAM;AACxB,kBAAc,CAAC,SAAS,CAAC,IAAI;AAAA,EAC/B;AAEA,YAAU,MAAM;AACd,QAAI,YAAY;AACd,eAAS,KAAK,MAAM,WAAW;AAAA,IACjC;AAEA,WAAO,MAAM;AACX,UAAI,YAAY;AACd,iBAAS,KAAK,MAAM,WAAW;AAAA,MACjC;AAAA,IACF;AAAA,EACF,GAAG,CAAC,UAAU,CAAC;AAEf,SACE,iCACE;AAAA,yBAAC,SAAI,WAAW,EAAE,MACf;AAAA;AAAA,MACA;AAAA,OACH;AAAA,IACA,qBAAC,SAAI,WAAW,EAAE,QAChB;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,OAAM;AAAA,UACN,SAAQ;AAAA,UACR,SAAS;AAAA,UAER,uBAAa,oBAAC,SAAM,IAAK,oBAAC,oBAAiB;AAAA;AAAA,MAC9C;AAAA,MACA,oBAAC,SAAI,WAAW,EAAE,MAAM,EAAE,WAAW,WAAW,CAAC,GAC/C;AAAA,QAAC;AAAA;AAAA,UACC,MAAI;AAAA,UACJ,KAAI;AAAA,UACJ,eAAc;AAAA,UACd,YAAW;AAAA,UACX,UAAS;AAAA,UAET;AAAA,gCAAC,OAAI,OAAM,QAAO,SAAS,MAAM,cAAc,KAAK,GACjD,gBACH;AAAA,YACC;AAAA;AAAA;AAAA,MACH,GACF;AAAA,OACF;AAAA,KACF;AAEJ;","names":[]}

package/dist/components/Navigation/NavigationItem.css.d.ts

@@ -1,4 +1,6 @@
-export declare const container: import("@vanilla-extract/recipes").RuntimeFn<{
+import * as _vanilla_extract_recipes from '@vanilla-extract/recipes';
+
+declare const container: _vanilla_extract_recipes.RuntimeFn<{
     isSelected: {
         true: {
             color: `rgb(var(--${string}))`;
@@ -8,4 +10,5 @@ export declare const container: import("@vanilla-extract/recipes").RuntimeFn<{
         };
     };
 }>;
-//# sourceMappingURL=NavigationItem.css.d.ts.map
+
+export { container };

package/dist/components/Navigation/NavigationItem.css.js

@@ -1,38 +1,38 @@
-import { recipeWithLayer } from '../../utils/styleUtils.css.js';
-import { theme } from '../../themes/theme.css.js';
-import { spacing } from '../../tokens/semantic/spacing.js';
-import { typography } from '../../tokens/semantic/typography.js';
-import { narrow } from './NavigationDrawer.css.js';
-
+import { recipeWithLayer } from "#styleUtils";
+import { theme } from "#themes";
+import { spacing, typography } from "#tokens";
+import { narrow } from "./NavigationDrawer.css";
 const container = recipeWithLayer({
-    base: {
-        position: 'relative',
-        lineHeight: '0',
-        padding: spacing.lg,
-        fontSize: '0.9375em',
-        fontWeight: typography.weight.semiBold,
-        transition: 'color 0.2s ease',
-        cursor: 'pointer',
-        ':hover': {
-            color: `rgb(${theme.color.foreground})`,
-        },
-        selectors: {
-            [`${narrow} &`]: {
-                padding: `${spacing['2xl']} ${spacing.lg}`,
-                fontSize: '1.125em',
-            },
-        },
-    },
-    variants: {
-        isSelected: {
-            true: {
-                color: `rgb(${theme.color['secondary-foreground']})`,
-            },
-            false: {
-                color: `rgba(${theme.color['secondary-foreground']}, 0.5)`,
-            },
-        },
+  base: {
+    position: "relative",
+    lineHeight: "0",
+    padding: spacing.lg,
+    fontSize: "0.9375em",
+    fontWeight: typography.weight.semiBold,
+    transition: "color 0.2s ease",
+    cursor: "pointer",
+    ":hover": {
+      color: `rgb(${theme.color.foreground})`
     },
+    selectors: {
+      [`${narrow} &`]: {
+        padding: `${spacing["2xl"]} ${spacing.lg}`,
+        fontSize: "1.125em"
+      }
+    }
+  },
+  variants: {
+    isSelected: {
+      true: {
+        color: `rgb(${theme.color["secondary-foreground"]})`
+      },
+      false: {
+        color: `rgba(${theme.color["secondary-foreground"]}, 0.5)`
+      }
+    }
+  }
 });
-
-export { container };
+export {
+  container
+};
+//# sourceMappingURL=NavigationItem.css.js.map

package/dist/components/Navigation/NavigationItem.css.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Navigation/NavigationItem.css.ts"],"sourcesContent":["import { recipeWithLayer } from '#styleUtils';\nimport { theme } from '#themes';\nimport { spacing, typography } from '#tokens';\n\nimport { narrow } from './NavigationDrawer.css';\n\nexport const container = recipeWithLayer({\n  base: {\n    position: 'relative',\n\n    lineHeight: '0',\n    padding: spacing.lg,\n\n    fontSize: '0.9375em',\n    fontWeight: typography.weight.semiBold,\n\n    transition: 'color 0.2s ease',\n\n    cursor: 'pointer',\n\n    ':hover': {\n      color: `rgb(${theme.color.foreground})`,\n    },\n\n    selectors: {\n      [`${narrow} &`]: {\n        padding: `${spacing['2xl']} ${spacing.lg}`,\n\n        fontSize: '1.125em',\n      },\n    },\n  },\n  variants: {\n    isSelected: {\n      true: {\n        color: `rgb(${theme.color['secondary-foreground']})`,\n      },\n      false: {\n        color: `rgba(${theme.color['secondary-foreground']}, 0.5)`,\n      },\n    },\n  },\n});\n"],"mappings":"AAAA,SAAS,uBAAuB;AAChC,SAAS,aAAa;AACtB,SAAS,SAAS,kBAAkB;AAEpC,SAAS,cAAc;AAEhB,MAAM,YAAY,gBAAgB;AAAA,EACvC,MAAM;AAAA,IACJ,UAAU;AAAA,IAEV,YAAY;AAAA,IACZ,SAAS,QAAQ;AAAA,IAEjB,UAAU;AAAA,IACV,YAAY,WAAW,OAAO;AAAA,IAE9B,YAAY;AAAA,IAEZ,QAAQ;AAAA,IAER,UAAU;AAAA,MACR,OAAO,OAAO,MAAM,MAAM,UAAU;AAAA,IACtC;AAAA,IAEA,WAAW;AAAA,MACT,CAAC,GAAG,MAAM,IAAI,GAAG;AAAA,QACf,SAAS,GAAG,QAAQ,KAAK,CAAC,IAAI,QAAQ,EAAE;AAAA,QAExC,UAAU;AAAA,MACZ;AAAA,IACF;AAAA,EACF;AAAA,EACA,UAAU;AAAA,IACR,YAAY;AAAA,MACV,MAAM;AAAA,QACJ,OAAO,OAAO,MAAM,MAAM,sBAAsB,CAAC;AAAA,MACnD;AAAA,MACA,OAAO;AAAA,QACL,OAAO,QAAQ,MAAM,MAAM,sBAAsB,CAAC;AAAA,MACpD;AAAA,IACF;AAAA,EACF;AACF,CAAC;","names":[]}

package/dist/components/Navigation/NavigationItem.d.ts

@@ -1,6 +1,11 @@
-import type { UIComponent } from '#types';
-import * as s from './NavigationItem.css';
-type NavigationItemProps = UIComponent<'div', typeof s.container>;
-export declare const NavigationItem: import("react").ForwardRefExoticComponent<Omit<NavigationItemProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-export {};
-//# sourceMappingURL=NavigationItem.d.ts.map
+import * as react from 'react';
+import { UIComponent } from '../../types/ui.types.js';
+import { container } from './NavigationItem.css.js';
+import '@vanilla-extract/css';
+import '@vanilla-extract/recipes';
+import '../../styles/sprinkles.css.js';
+
+type NavigationItemProps = UIComponent<'div', typeof container>;
+declare const NavigationItem: react.ForwardRefExoticComponent<Omit<NavigationItemProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+
+export { NavigationItem };

package/dist/components/Navigation/NavigationItem.js

@@ -1,15 +1,23 @@
-import jsxRuntimeExports from '../../_virtual/jsx-runtime.js';
-import { forwardRef } from 'react';
-import { clsx } from '../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.js';
-import '../../styles/layers.css.js';
-import '../../styles/sprinkles.css.js';
-import '../../styles/globalStyle.css.js';
-import { sx } from '../../styles/sx.js';
-import { container } from './NavigationItem.css.js';
-
-const NavigationItem = forwardRef(({ style, className, sx: propSx, isSelected = false, ...props }, ref) => {
-    return (jsxRuntimeExports.jsx("div", { ref: ref, style: { ...style }, className: clsx(container({ isSelected }), className, sx(propSx)), ...props }));
-});
-NavigationItem.displayName = 'NavigationItem';
-
-export { NavigationItem };
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import clsx from "clsx";
+import { sx } from "#styles";
+import * as s from "./NavigationItem.css";
+const NavigationItem = forwardRef(
+  ({ style, className, sx: propSx, isSelected = false, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        style: { ...style },
+        className: clsx(s.container({ isSelected }), className, sx(propSx)),
+        ...props
+      }
+    );
+  }
+);
+NavigationItem.displayName = "NavigationItem";
+export {
+  NavigationItem
+};
+//# sourceMappingURL=NavigationItem.js.map

package/dist/components/Navigation/NavigationItem.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Navigation/NavigationItem.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport clsx from 'clsx';\n\nimport { sx } from '#styles';\nimport type { UIComponent } from '#types';\n\nimport * as s from './NavigationItem.css';\n\ntype NavigationItemProps = UIComponent<'div', typeof s.container>;\n\nexport const NavigationItem = forwardRef<HTMLDivElement, NavigationItemProps>(\n  ({ style, className, sx: propSx, isSelected = false, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        style={{ ...style }}\n        className={clsx(s.container({ isSelected }), className, sx(propSx))}\n        {...props}\n      />\n    );\n  },\n);\nNavigationItem.displayName = 'NavigationItem';\n"],"mappings":"AAcM;AAdN,SAAS,kBAAkB;AAE3B,OAAO,UAAU;AAEjB,SAAS,UAAU;AAGnB,YAAY,OAAO;AAIZ,MAAM,iBAAiB;AAAA,EAC5B,CAAC,EAAE,OAAO,WAAW,IAAI,QAAQ,aAAa,OAAO,GAAG,MAAM,GAAG,QAAQ;AACvE,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,OAAO,EAAE,GAAG,MAAM;AAAA,QAClB,WAAW,KAAK,EAAE,UAAU,EAAE,WAAW,CAAC,GAAG,WAAW,GAAG,MAAM,CAAC;AAAA,QACjE,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AACA,eAAe,cAAc;","names":[]}

package/dist/components/Navigation/NavigationLogo.css.d.ts

@@ -1,2 +1,3 @@
-export declare const navigationLogo: string;
-//# sourceMappingURL=NavigationLogo.css.d.ts.map
+declare const navigationLogo: string;
+
+export { navigationLogo };

package/dist/components/Navigation/NavigationLogo.css.js

@@ -1,7 +1,8 @@
-import { styleWithLayer } from '../../utils/styleUtils.css.js';
-
+import { styleWithLayer } from "#styleUtils";
 const navigationLogo = styleWithLayer({
-    marginRight: '0.5em',
+  marginRight: "0.5em"
 });
-
-export { navigationLogo };
+export {
+  navigationLogo
+};
+//# sourceMappingURL=NavigationLogo.css.js.map

package/dist/components/Navigation/NavigationLogo.css.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Navigation/NavigationLogo.css.ts"],"sourcesContent":["import { styleWithLayer } from '#styleUtils';\n\nexport const navigationLogo = styleWithLayer({\n  marginRight: '0.5em',\n});\n"],"mappings":"AAAA,SAAS,sBAAsB;AAExB,MAAM,iBAAiB,eAAe;AAAA,EAC3C,aAAa;AACf,CAAC;","names":[]}

package/dist/components/Navigation/NavigationLogo.d.ts

@@ -1,5 +1,10 @@
-import type { UIComponent } from '#types';
+import * as react from 'react';
+import { UIComponent } from '../../types/ui.types.js';
+import '@vanilla-extract/css';
+import '@vanilla-extract/recipes';
+import '../../styles/sprinkles.css.js';
+
 type NavigationLogoProps = UIComponent<'div'>;
-export declare const NavigationLogo: import("react").ForwardRefExoticComponent<Omit<NavigationLogoProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-export {};
-//# sourceMappingURL=NavigationLogo.d.ts.map
+declare const NavigationLogo: react.ForwardRefExoticComponent<Omit<NavigationLogoProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+
+export { NavigationLogo };

package/dist/components/Navigation/NavigationLogo.js

@@ -1,15 +1,27 @@
-import jsxRuntimeExports from '../../_virtual/jsx-runtime.js';
-import { forwardRef } from 'react';
-import { clsx } from '../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.js';
-import '../../styles/layers.css.js';
-import '../../styles/sprinkles.css.js';
-import '../../styles/globalStyle.css.js';
-import { sx } from '../../styles/sx.js';
-import { navigationLogo } from './NavigationLogo.css.js';
-
-const NavigationLogo = forwardRef(({ className, sx: propSx, ...props }, ref) => {
-    return (jsxRuntimeExports.jsx("div", { ref: ref, className: clsx(navigationLogo, className, sx({ marginRight: { mobile: 'lg', desktop: '3xl' } }), sx(propSx)), ...props }));
-});
-NavigationLogo.displayName = 'NavigationLogo';
-
-export { NavigationLogo };
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import clsx from "clsx";
+import { sx } from "#styles";
+import * as s from "./NavigationLogo.css";
+const NavigationLogo = forwardRef(
+  ({ className, sx: propSx, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: clsx(
+          s.navigationLogo,
+          className,
+          sx({ marginRight: { mobile: "lg", desktop: "3xl" } }),
+          sx(propSx)
+        ),
+        ...props
+      }
+    );
+  }
+);
+NavigationLogo.displayName = "NavigationLogo";
+export {
+  NavigationLogo
+};
+//# sourceMappingURL=NavigationLogo.js.map

package/dist/components/Navigation/NavigationLogo.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Navigation/NavigationLogo.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport clsx from 'clsx';\n\nimport { sx } from '#styles';\nimport type { UIComponent } from '#types';\n\nimport * as s from './NavigationLogo.css';\n\ntype NavigationLogoProps = UIComponent<'div'>;\n\nexport const NavigationLogo = forwardRef<HTMLDivElement, NavigationLogoProps>(\n  ({ className, sx: propSx, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        className={clsx(\n          s.navigationLogo,\n          className,\n          sx({ marginRight: { mobile: 'lg', desktop: '3xl' } }),\n          sx(propSx),\n        )}\n        {...props}\n      />\n    );\n  },\n);\nNavigationLogo.displayName = 'NavigationLogo';\n"],"mappings":"AAcM;AAdN,SAAS,kBAAkB;AAE3B,OAAO,UAAU;AAEjB,SAAS,UAAU;AAGnB,YAAY,OAAO;AAIZ,MAAM,iBAAiB;AAAA,EAC5B,CAAC,EAAE,WAAW,IAAI,QAAQ,GAAG,MAAM,GAAG,QAAQ;AAC5C,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT,EAAE;AAAA,UACF;AAAA,UACA,GAAG,EAAE,aAAa,EAAE,QAAQ,MAAM,SAAS,MAAM,EAAE,CAAC;AAAA,UACpD,GAAG,MAAM;AAAA,QACX;AAAA,QACC,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AACA,eAAe,cAAc;","names":[]}

package/dist/components/Navigation/NavigationMenu.css.d.ts

@@ -1,2 +1 @@
-export declare const navigationMenu: string;
-//# sourceMappingURL=NavigationMenu.css.d.ts.map
+export { n as navigationMenu } from '../../NavigationMenu.css-B_dOkuGn.js';

package/dist/components/Navigation/NavigationMenu.css.js

@@ -1,22 +1,23 @@
-import { styleWithLayer } from '../../utils/styleUtils.css.js';
-import { theme } from '../../themes/theme.css.js';
-import { spacing } from '../../tokens/semantic/spacing.js';
-import { narrow } from './NavigationDrawer.css.js';
-
+import { styleWithLayer } from "#styleUtils";
+import { theme } from "#themes";
+import { spacing } from "#tokens";
+import { narrow } from "./NavigationDrawer.css";
 const navigationMenu = styleWithLayer({
-    display: 'flex',
-    alignItems: 'center',
-    gap: '0.5em',
-    selectors: {
-        [`${narrow} &`]: {
-            flexDirection: 'column',
-            alignItems: 'stretch',
-            gap: '0',
-            width: '100%',
-            borderTop: `1px solid rgb(${theme.color['border.weak']})`,
-            paddingTop: spacing['md'],
-        },
-    },
+  display: "flex",
+  alignItems: "center",
+  gap: "0.5em",
+  selectors: {
+    [`${narrow} &`]: {
+      flexDirection: "column",
+      alignItems: "stretch",
+      gap: "0",
+      width: "100%",
+      borderTop: `1px solid rgb(${theme.color["border.weak"]})`,
+      paddingTop: spacing["md"]
+    }
+  }
 });
-
-export { navigationMenu };
+export {
+  navigationMenu
+};
+//# sourceMappingURL=NavigationMenu.css.js.map

package/dist/components/Navigation/NavigationMenu.css.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Navigation/NavigationMenu.css.ts"],"sourcesContent":["import { styleWithLayer } from '#styleUtils';\nimport { theme } from '#themes';\nimport { spacing } from '#tokens';\n\nimport { narrow } from './NavigationDrawer.css';\n\nexport const navigationMenu = styleWithLayer({\n  display: 'flex',\n  alignItems: 'center',\n  gap: '0.5em',\n\n  selectors: {\n    [`${narrow} &`]: {\n      flexDirection: 'column',\n      alignItems: 'stretch',\n      gap: '0',\n\n      width: '100%',\n      borderTop: `1px solid rgb(${theme.color['border.weak']})`,\n      paddingTop: spacing['md'],\n    },\n  },\n});\n"],"mappings":"AAAA,SAAS,sBAAsB;AAC/B,SAAS,aAAa;AACtB,SAAS,eAAe;AAExB,SAAS,cAAc;AAEhB,MAAM,iBAAiB,eAAe;AAAA,EAC3C,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,KAAK;AAAA,EAEL,WAAW;AAAA,IACT,CAAC,GAAG,MAAM,IAAI,GAAG;AAAA,MACf,eAAe;AAAA,MACf,YAAY;AAAA,MACZ,KAAK;AAAA,MAEL,OAAO;AAAA,MACP,WAAW,iBAAiB,MAAM,MAAM,aAAa,CAAC;AAAA,MACtD,YAAY,QAAQ,IAAI;AAAA,IAC1B;AAAA,EACF;AACF,CAAC;","names":[]}

package/dist/components/Navigation/NavigationMenu.d.ts

@@ -1,6 +1,11 @@
-import type { UIComponent } from '#types';
-import * as s from './NavigationMenu.css';
+import * as react from 'react';
+import { UIComponent } from '../../types/ui.types.js';
+export { N as navigationMenuCss } from '../../NavigationMenu.css-B_dOkuGn.js';
+import '@vanilla-extract/css';
+import '@vanilla-extract/recipes';
+import '../../styles/sprinkles.css.js';
+
 type NavigationMenuProps = UIComponent<'div'>;
-export declare const NavigationMenu: import("react").ForwardRefExoticComponent<Omit<NavigationMenuProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-export { s as navigationMenuCss };
-//# sourceMappingURL=NavigationMenu.d.ts.map
+declare const NavigationMenu: react.ForwardRefExoticComponent<Omit<NavigationMenuProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+
+export { NavigationMenu };

package/dist/components/Navigation/NavigationMenu.js

@@ -1,17 +1,23 @@
-import jsxRuntimeExports from '../../_virtual/jsx-runtime.js';
-import { forwardRef } from 'react';
-import { clsx } from '../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.js';
-import '../../styles/layers.css.js';
-import '../../styles/sprinkles.css.js';
-import '../../styles/globalStyle.css.js';
-import { sx } from '../../styles/sx.js';
-import { navigationMenu } from './NavigationMenu.css.js';
-import * as NavigationMenu_css from './NavigationMenu.css.js';
-export { NavigationMenu_css as navigationMenuCss };
-
-const NavigationMenu = forwardRef(({ className, sx: propSx, ...props }, ref) => {
-    return (jsxRuntimeExports.jsx("div", { ref: ref, className: clsx(navigationMenu, className, sx(propSx)), ...props }));
-});
-NavigationMenu.displayName = 'NavigationMenu';
-
-export { NavigationMenu };
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import clsx from "clsx";
+import { sx } from "#styles";
+import * as s from "./NavigationMenu.css";
+const NavigationMenu = forwardRef(
+  ({ className, sx: propSx, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: clsx(s.navigationMenu, className, sx(propSx)),
+        ...props
+      }
+    );
+  }
+);
+NavigationMenu.displayName = "NavigationMenu";
+export {
+  NavigationMenu,
+  s as navigationMenuCss
+};
+//# sourceMappingURL=NavigationMenu.js.map