@stokelp/ui 2.104.1 → 2.105.0

package/dist/components/app/mobile-navigation/MobileNavigation.cjs

@@ -1,2 +1,2 @@
-"use client";const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../utils/slots.cjs"),n=require("../../icon/Icon.cjs");let r=require("@stokelp/styled-system/jsx"),i=require("@stokelp/styled-system/recipes");var a=e.__exportAll({Item:()=>l,ItemIcon:()=>u,ItemLabel:()=>d,Root:()=>c}),{withProvider:o,withContext:s}=t.createStyleContext(i.mobileNavigation,{dataAttr:!0}),c=o((0,r.styled)(`nav`),`root`),l=s((0,r.styled)(`a`),`item`),u=s(n.Icon,`itemIcon`,{defaultProps:{size:`sm`}}),d=s((0,r.styled)(`span`),`itemLabel`);Object.defineProperty(exports,"MobileNavigation_exports",{enumerable:!0,get:function(){return a}});
+"use client";const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../utils/slots.cjs"),n=require("../../icon/Icon.cjs");let r=require("@stokelp/styled-system/jsx"),i=require("@stokelp/styled-system/recipes");var a=e.__exportAll({Item:()=>u,ItemIcon:()=>d,ItemLabel:()=>f,Root:()=>l}),{withProvider:o,withContext:s}=t.createStyleContext(i.mobileNavigation,{dataAttr:!0}),c=e=>(0,r.styled)(e),l=o(c(`nav`),`root`),u=s(c(`a`),`item`),d=s(n.Icon,`itemIcon`,{defaultProps:{size:`sm`}}),f=s(c(`span`),`itemLabel`);Object.defineProperty(exports,"MobileNavigation_exports",{enumerable:!0,get:function(){return a}});
 //# sourceMappingURL=MobileNavigation.cjs.map

package/dist/components/app/mobile-navigation/MobileNavigation.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"MobileNavigation.cjs","names":[],"sources":["../../../../src/components/app/mobile-navigation/MobileNavigation.tsx"],"sourcesContent":["import { styled } from '@stokelp/styled-system/jsx'\nimport { mobileNavigation } from '@stokelp/styled-system/recipes'\nimport { createStyleContext } from '~/utils/slots'\nimport { Icon } from '~/components/icon/Icon'\nimport { ComponentProps } from 'react'\n\nconst { withProvider, withContext } = createStyleContext(mobileNavigation, {\n  dataAttr: true,\n})\n\nexport const Root = withProvider(styled('nav'), 'root')\nexport const Item = withContext(styled('a'), 'item')\nexport const ItemIcon = withContext(Icon, 'itemIcon', {\n  defaultProps: {\n    size: 'sm',\n  },\n})\nexport const ItemLabel = withContext(styled('span'), 'itemLabel')\n\nexport interface MobileNavigationProps extends ComponentProps<typeof Root> {}\nexport interface MobileNavigationItemProps extends ComponentProps<typeof Item> {}\nexport interface MobileNavigationItemIconProps extends ComponentProps<typeof ItemIcon> {}\nexport interface MobileNavigationItemLabelProps extends ComponentProps<typeof ItemLabel> {}\n"],"mappings":"mTAMM,CAAE,eAAc,eAAgB,EAAA,mBAAmB,EAAA,iBAAkB,CACzE,SAAU,EACZ,CAAC,EAEY,EAAO,GAAA,EAAA,EAAA,QAAoB,KAAK,EAAG,MAAM,EACzC,EAAO,GAAA,EAAA,EAAA,QAAmB,GAAG,EAAG,MAAM,EACtC,EAAW,EAAY,EAAA,KAAM,WAAY,CACpD,aAAc,CACZ,KAAM,IACR,CACF,CAAC,EACY,EAAY,GAAA,EAAA,EAAA,QAAmB,MAAM,EAAG,WAAW"}
+{"version":3,"file":"MobileNavigation.cjs","names":[],"sources":["../../../../src/components/app/mobile-navigation/MobileNavigation.tsx"],"sourcesContent":["import { styled } from '@stokelp/styled-system/jsx'\nimport { mobileNavigation } from '@stokelp/styled-system/recipes'\nimport type { StyledComponent } from '@stokelp/styled-system/types'\nimport { createStyleContext } from '~/utils/slots'\nimport { Icon } from '~/components/icon/Icon'\nimport { ComponentProps, type JSX } from 'react'\n\nconst { withProvider, withContext } = createStyleContext(mobileNavigation, {\n  dataAttr: true,\n})\n\n// See Table.tsx for why we pin the literal tag.\nconst styledTag = <T extends keyof JSX.IntrinsicElements>(tag: T): StyledComponent<T, {}> =>\n  styled(tag) as StyledComponent<T, {}>\n\nexport const Root = withProvider(styledTag('nav'), 'root')\nexport const Item = withContext(styledTag('a'), 'item')\nexport const ItemIcon = withContext(Icon, 'itemIcon', {\n  defaultProps: {\n    size: 'sm',\n  },\n})\nexport const ItemLabel = withContext(styledTag('span'), 'itemLabel')\n\nexport interface MobileNavigationProps extends ComponentProps<typeof Root> {}\nexport interface MobileNavigationItemProps extends ComponentProps<typeof Item> {}\nexport interface MobileNavigationItemIconProps extends ComponentProps<typeof ItemIcon> {}\nexport interface MobileNavigationItemLabelProps extends ComponentProps<typeof ItemLabel> {}\n"],"mappings":"mTAOM,CAAE,eAAc,eAAgB,EAAA,mBAAmB,EAAA,iBAAkB,CACzE,SAAU,EACZ,CAAC,EAGK,EAAoD,IAAA,EAAA,EAAA,QACjD,CAAG,EAEC,EAAO,EAAa,EAAU,KAAK,EAAG,MAAM,EAC5C,EAAO,EAAY,EAAU,GAAG,EAAG,MAAM,EACzC,EAAW,EAAY,EAAA,KAAM,WAAY,CACpD,aAAc,CACZ,KAAM,IACR,CACF,CAAC,EACY,EAAY,EAAY,EAAU,MAAM,EAAG,WAAW"}

package/dist/components/app/mobile-navigation/MobileNavigation.d.ts

@@ -1,11 +1,11 @@
+import { StyledComponent } from '@stokelp/styled-system/types';
 import { ComponentProps, FC } from 'react';
 import { ComponentVariants } from '../../../utils/slots';
-import { StyledComponent } from '@stokelp/styled-system/types';
 import { MobileNavigationRecipe } from '@stokelp/styled-system/recipes';
-export declare const Root: ComponentVariants<StyledComponent<string, {}>, MobileNavigationRecipe>;
-export declare const Item: StyledComponent<string, {}>;
+export declare const Root: ComponentVariants<StyledComponent<"nav", {}>, MobileNavigationRecipe>;
+export declare const Item: StyledComponent<"a", {}>;
 export declare const ItemIcon: FC<any>;
-export declare const ItemLabel: StyledComponent<string, {}>;
+export declare const ItemLabel: StyledComponent<"span", {}>;
 export interface MobileNavigationProps extends ComponentProps<typeof Root> {
 }
 export interface MobileNavigationItemProps extends ComponentProps<typeof Item> {

package/dist/components/app/mobile-navigation/MobileNavigation.js

@@ -6,11 +6,11 @@ import { styled as r } from "@stokelp/styled-system/jsx";
 import { mobileNavigation as i } from "@stokelp/styled-system/recipes";
 //#region src/components/app/mobile-navigation/MobileNavigation.tsx
 var a = /* @__PURE__ */ e({
-	Item: () => l,
-	ItemIcon: () => u,
-	ItemLabel: () => d,
-	Root: () => c
-}), { withProvider: o, withContext: s } = t(i, { dataAttr: !0 }), c = o(r("nav"), "root"), l = s(r("a"), "item"), u = s(n, "itemIcon", { defaultProps: { size: "sm" } }), d = s(r("span"), "itemLabel");
+	Item: () => u,
+	ItemIcon: () => d,
+	ItemLabel: () => f,
+	Root: () => l
+}), { withProvider: o, withContext: s } = t(i, { dataAttr: !0 }), c = (e) => r(e), l = o(c("nav"), "root"), u = s(c("a"), "item"), d = s(n, "itemIcon", { defaultProps: { size: "sm" } }), f = s(c("span"), "itemLabel");
 //#endregion
 export { a as MobileNavigation_exports };
 

package/dist/components/app/mobile-navigation/MobileNavigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"MobileNavigation.js","names":[],"sources":["../../../../src/components/app/mobile-navigation/MobileNavigation.tsx"],"sourcesContent":["import { styled } from '@stokelp/styled-system/jsx'\nimport { mobileNavigation } from '@stokelp/styled-system/recipes'\nimport { createStyleContext } from '~/utils/slots'\nimport { Icon } from '~/components/icon/Icon'\nimport { ComponentProps } from 'react'\n\nconst { withProvider, withContext } = createStyleContext(mobileNavigation, {\n  dataAttr: true,\n})\n\nexport const Root = withProvider(styled('nav'), 'root')\nexport const Item = withContext(styled('a'), 'item')\nexport const ItemIcon = withContext(Icon, 'itemIcon', {\n  defaultProps: {\n    size: 'sm',\n  },\n})\nexport const ItemLabel = withContext(styled('span'), 'itemLabel')\n\nexport interface MobileNavigationProps extends ComponentProps<typeof Root> {}\nexport interface MobileNavigationItemProps extends ComponentProps<typeof Item> {}\nexport interface MobileNavigationItemIconProps extends ComponentProps<typeof ItemIcon> {}\nexport interface MobileNavigationItemLabelProps extends ComponentProps<typeof ItemLabel> {}\n"],"mappings":";;;;;;;;;;;;IAMM,EAAE,iBAAc,mBAAgB,EAAmB,GAAkB,EACzE,UAAU,GACZ,CAAC,GAEY,IAAO,EAAa,EAAO,KAAK,GAAG,MAAM,GACzC,IAAO,EAAY,EAAO,GAAG,GAAG,MAAM,GACtC,IAAW,EAAY,GAAM,YAAY,EACpD,cAAc,EACZ,MAAM,KACR,EACF,CAAC,GACY,IAAY,EAAY,EAAO,MAAM,GAAG,WAAW"}
+{"version":3,"file":"MobileNavigation.js","names":[],"sources":["../../../../src/components/app/mobile-navigation/MobileNavigation.tsx"],"sourcesContent":["import { styled } from '@stokelp/styled-system/jsx'\nimport { mobileNavigation } from '@stokelp/styled-system/recipes'\nimport type { StyledComponent } from '@stokelp/styled-system/types'\nimport { createStyleContext } from '~/utils/slots'\nimport { Icon } from '~/components/icon/Icon'\nimport { ComponentProps, type JSX } from 'react'\n\nconst { withProvider, withContext } = createStyleContext(mobileNavigation, {\n  dataAttr: true,\n})\n\n// See Table.tsx for why we pin the literal tag.\nconst styledTag = <T extends keyof JSX.IntrinsicElements>(tag: T): StyledComponent<T, {}> =>\n  styled(tag) as StyledComponent<T, {}>\n\nexport const Root = withProvider(styledTag('nav'), 'root')\nexport const Item = withContext(styledTag('a'), 'item')\nexport const ItemIcon = withContext(Icon, 'itemIcon', {\n  defaultProps: {\n    size: 'sm',\n  },\n})\nexport const ItemLabel = withContext(styledTag('span'), 'itemLabel')\n\nexport interface MobileNavigationProps extends ComponentProps<typeof Root> {}\nexport interface MobileNavigationItemProps extends ComponentProps<typeof Item> {}\nexport interface MobileNavigationItemIconProps extends ComponentProps<typeof ItemIcon> {}\nexport interface MobileNavigationItemLabelProps extends ComponentProps<typeof ItemLabel> {}\n"],"mappings":";;;;;;;;;;;;IAOM,EAAE,iBAAc,mBAAgB,EAAmB,GAAkB,EACzE,UAAU,GACZ,CAAC,GAGK,KAAoD,MACxD,EAAO,CAAG,GAEC,IAAO,EAAa,EAAU,KAAK,GAAG,MAAM,GAC5C,IAAO,EAAY,EAAU,GAAG,GAAG,MAAM,GACzC,IAAW,EAAY,GAAM,YAAY,EACpD,cAAc,EACZ,MAAM,KACR,EACF,CAAC,GACY,IAAY,EAAY,EAAU,MAAM,GAAG,WAAW"}

package/dist/components/app/navigation/AppNavigation.cjs

@@ -1,2 +1,2 @@
-"use client";const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../utils/slots.cjs"),n=require("../../tag/Tag.cjs"),r=require("../../icon/Icon.cjs"),i=require("../../../node_modules/.pnpm/@heroicons_react@2.2.0_react@19.2.6/node_modules/@heroicons/react/24/outline/esm/ArrowLeftCircleIcon.cjs");let a=require("@stokelp/styled-system/jsx"),o=require("@stokelp/styled-system/recipes"),s=require("react/jsx-runtime");var c=e.__exportAll({Body:()=>p,Footer:()=>b,Header:()=>f,Item:()=>m,ItemAlpha:()=>y,ItemContent:()=>g,ItemIcon:()=>v,ItemLabel:()=>_,ItemSubItems:()=>h,MiniaturizeTrigger:()=>x,Root:()=>d}),{withProvider:l,withContext:u}=t.createStyleContext(o.appNavigation,{dataAttr:!0}),d=l((0,a.styled)(`nav`),`root`,{defaultProps:{}}),f=u((0,a.styled)(`header`),`header`),p=u((0,a.styled)(`main`),`body`),m=u((0,a.styled)(`div`),`item`),h=u((0,a.styled)(`div`),`itemSubItems`),g=u((0,a.styled)(`div`),`itemContent`),_=u((0,a.styled)(`p`),`itemLabel`),v=u(r.Icon,`itemIcon`,{defaultProps:{size:`sm`}}),y=u(n.Tag,`itemAlpha`,{defaultProps:{severity:`success`}}),b=u((0,a.styled)(`footer`),`footer`),x=u((0,a.styled)(`div`),`miniaturizeTrigger`,{defaultProps:{onClick:e=>{e.preventDefault();let t=localStorage.getItem(`isMiniaturizeNav`)===`closed`?`open`:`closed`;localStorage.setItem(`isMiniaturizeNav`,t),e.currentTarget.setAttribute(`data-state`,t),window.dispatchEvent(new Event(`storage`))},className:`app-navigation__miniaturizeTrigger`,"data-state":typeof localStorage<`u`&&localStorage.getItem(`isMiniaturizeNav`)||`open`,children:(0,s.jsx)(r.Icon,{children:(0,s.jsx)(i.default,{})})}});Object.defineProperty(exports,"AppNavigation_exports",{enumerable:!0,get:function(){return c}});
+"use client";const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../utils/slots.cjs"),n=require("../../tag/Tag.cjs"),r=require("../../icon/Icon.cjs"),i=require("../../../node_modules/.pnpm/@heroicons_react@2.2.0_react@19.2.6/node_modules/@heroicons/react/24/outline/esm/ArrowLeftCircleIcon.cjs");let a=require("@stokelp/styled-system/jsx"),o=require("@stokelp/styled-system/recipes"),s=require("react/jsx-runtime");var c=e.__exportAll({Body:()=>m,Footer:()=>x,Header:()=>p,Item:()=>h,ItemAlpha:()=>b,ItemContent:()=>_,ItemIcon:()=>y,ItemLabel:()=>v,ItemSubItems:()=>g,MiniaturizeTrigger:()=>S,Root:()=>f}),{withProvider:l,withContext:u}=t.createStyleContext(o.appNavigation,{dataAttr:!0}),d=e=>(0,a.styled)(e),f=l(d(`nav`),`root`,{defaultProps:{}}),p=u(d(`header`),`header`),m=u(d(`main`),`body`),h=u(d(`div`),`item`),g=u(d(`div`),`itemSubItems`),_=u(d(`div`),`itemContent`),v=u(d(`p`),`itemLabel`),y=u(r.Icon,`itemIcon`,{defaultProps:{size:`sm`}}),b=u(n.Tag,`itemAlpha`,{defaultProps:{severity:`success`}}),x=u(d(`footer`),`footer`),S=u(d(`div`),`miniaturizeTrigger`,{defaultProps:{onClick:e=>{e.preventDefault();let t=localStorage.getItem(`isMiniaturizeNav`)===`closed`?`open`:`closed`;localStorage.setItem(`isMiniaturizeNav`,t),e.currentTarget.setAttribute(`data-state`,t),window.dispatchEvent(new Event(`storage`))},className:`app-navigation__miniaturizeTrigger`,"data-state":typeof localStorage<`u`&&localStorage.getItem(`isMiniaturizeNav`)||`open`,children:(0,s.jsx)(r.Icon,{children:(0,s.jsx)(i.default,{})})}});Object.defineProperty(exports,"AppNavigation_exports",{enumerable:!0,get:function(){return c}});
 //# sourceMappingURL=AppNavigation.cjs.map

package/dist/components/app/navigation/AppNavigation.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AppNavigation.cjs","names":[],"sources":["../../../../src/components/app/navigation/AppNavigation.tsx"],"sourcesContent":["import { styled } from '@stokelp/styled-system/jsx'\nimport { appNavigation } from '@stokelp/styled-system/recipes'\nimport { createStyleContext } from '~/utils/slots'\nimport { Icon } from '~/components/icon/Icon'\nimport { ComponentProps, type MouseEvent } from 'react'\nimport { ArrowLeftCircleIcon } from '@heroicons/react/24/outline'\nimport { Tag } from '~/components'\n\nconst { withProvider, withContext } = createStyleContext(appNavigation, {\n  dataAttr: true,\n})\n\nexport const Root = withProvider(styled('nav'), 'root', {\n  defaultProps: {\n    //'data-state': localStorage.getItem('isMiniaturizeNav') || 'open',\n  },\n})\nexport const Header = withContext(styled('header'), 'header')\nexport const Body = withContext(styled('main'), 'body')\n\nexport const Item = withContext(styled('div'), 'item')\nexport const ItemSubItems = withContext(styled('div'), 'itemSubItems')\nexport const ItemContent = withContext(styled('div'), 'itemContent')\nexport const ItemLabel = withContext(styled('p'), 'itemLabel')\nexport const ItemIcon = withContext(Icon, 'itemIcon', {\n  defaultProps: {\n    size: 'sm',\n  },\n})\nexport const ItemAlpha = withContext(Tag, 'itemAlpha', {\n  defaultProps: {\n    severity: 'success',\n  },\n})\n\nexport const Footer = withContext(styled('footer'), 'footer')\n\nexport const MiniaturizeTrigger = withContext(styled('div'), 'miniaturizeTrigger', {\n  defaultProps: {\n    onClick: (e: MouseEvent<HTMLDivElement>) => {\n      e.preventDefault()\n      const currentState = localStorage.getItem('isMiniaturizeNav')\n      const newState = currentState === 'closed' ? 'open' : 'closed'\n      localStorage.setItem('isMiniaturizeNav', newState)\n      e.currentTarget.setAttribute('data-state', newState)\n      window.dispatchEvent(new Event('storage'))\n    },\n    className: 'app-navigation__miniaturizeTrigger',\n    ...{\n      'data-state': typeof localStorage !== 'undefined' ? localStorage.getItem('isMiniaturizeNav') || 'open' : 'open',\n    },\n    children: (\n      <Icon>\n        <ArrowLeftCircleIcon />\n      </Icon>\n    ),\n  },\n})\n\nexport interface AppNavigationProps extends ComponentProps<typeof Root> {}\nexport interface AppNavigationHeaderProps extends ComponentProps<typeof Header> {}\nexport interface AppNavigationBodyProps extends ComponentProps<typeof Body> {}\nexport interface AppNavigationItemProps extends ComponentProps<typeof Item> {}\nexport interface AppNavigationItemSubItemsProps extends ComponentProps<typeof ItemSubItems> {}\nexport interface AppNavigationItemContentProps extends ComponentProps<typeof ItemContent> {}\nexport type AppNavigationItemLabelProps = ComponentProps<typeof ItemLabel>\nexport interface AppNavigationItemIconProps extends ComponentProps<typeof ItemIcon> {}\nexport interface AppNavigationFooterProps extends ComponentProps<typeof Footer> {}\nexport interface AppNavigationMiniaturizeTriggerProps extends ComponentProps<typeof MiniaturizeTrigger> {}\n"],"mappings":"snBAQM,CAAE,eAAc,eAAgB,EAAA,mBAAmB,EAAA,cAAe,CACtE,SAAU,EACZ,CAAC,EAEY,EAAO,GAAA,EAAA,EAAA,QAAoB,KAAK,EAAG,OAAQ,CACtD,aAAc,CAEd,CACF,CAAC,EACY,EAAS,GAAA,EAAA,EAAA,QAAmB,QAAQ,EAAG,QAAQ,EAC/C,EAAO,GAAA,EAAA,EAAA,QAAmB,MAAM,EAAG,MAAM,EAEzC,EAAO,GAAA,EAAA,EAAA,QAAmB,KAAK,EAAG,MAAM,EACxC,EAAe,GAAA,EAAA,EAAA,QAAmB,KAAK,EAAG,cAAc,EACxD,EAAc,GAAA,EAAA,EAAA,QAAmB,KAAK,EAAG,aAAa,EACtD,EAAY,GAAA,EAAA,EAAA,QAAmB,GAAG,EAAG,WAAW,EAChD,EAAW,EAAY,EAAA,KAAM,WAAY,CACpD,aAAc,CACZ,KAAM,IACR,CACF,CAAC,EACY,EAAY,EAAY,EAAA,IAAK,YAAa,CACrD,aAAc,CACZ,SAAU,SACZ,CACF,CAAC,EAEY,EAAS,GAAA,EAAA,EAAA,QAAmB,QAAQ,EAAG,QAAQ,EAE/C,EAAqB,GAAA,EAAA,EAAA,QAAmB,KAAK,EAAG,qBAAsB,CACjF,aAAc,CACZ,QAAU,GAAkC,CAC1C,EAAE,eAAe,EAEjB,IAAM,EADe,aAAa,QAAQ,kBACzB,IAAiB,SAAW,OAAS,SACtD,aAAa,QAAQ,mBAAoB,CAAQ,EACjD,EAAE,cAAc,aAAa,aAAc,CAAQ,EACnD,OAAO,cAAc,IAAI,MAAM,SAAS,CAAC,CAC3C,EACA,UAAW,qCAET,aAAc,OAAO,aAAiB,KAAc,aAAa,QAAQ,kBAAkB,GAAc,OAE3G,UACE,EAAA,EAAA,KAAC,EAAA,KAAD,CAAA,UACE,EAAA,EAAA,KAAC,EAAA,QAAD,CAAsB,CAAA,CAClB,CAAA,CAEV,CACF,CAAC"}
+{"version":3,"file":"AppNavigation.cjs","names":[],"sources":["../../../../src/components/app/navigation/AppNavigation.tsx"],"sourcesContent":["import { styled } from '@stokelp/styled-system/jsx'\nimport { appNavigation } from '@stokelp/styled-system/recipes'\nimport type { StyledComponent } from '@stokelp/styled-system/types'\nimport { createStyleContext } from '~/utils/slots'\nimport { Icon } from '~/components/icon/Icon'\nimport { ComponentProps, type JSX, type MouseEvent } from 'react'\nimport { ArrowLeftCircleIcon } from '@heroicons/react/24/outline'\nimport { Tag } from '~/components'\n\nconst { withProvider, withContext } = createStyleContext(appNavigation, {\n  dataAttr: true,\n})\n\n// See Table.tsx for why we wrap `styled(tag)` to pin the literal tag.\nconst styledTag = <T extends keyof JSX.IntrinsicElements>(tag: T): StyledComponent<T, {}> =>\n  styled(tag) as StyledComponent<T, {}>\n\nexport const Root = withProvider(styledTag('nav'), 'root', {\n  defaultProps: {\n    //'data-state': localStorage.getItem('isMiniaturizeNav') || 'open',\n  },\n})\nexport const Header = withContext(styledTag('header'), 'header')\nexport const Body = withContext(styledTag('main'), 'body')\n\nexport const Item = withContext(styledTag('div'), 'item')\nexport const ItemSubItems = withContext(styledTag('div'), 'itemSubItems')\nexport const ItemContent = withContext(styledTag('div'), 'itemContent')\nexport const ItemLabel = withContext(styledTag('p'), 'itemLabel')\nexport const ItemIcon = withContext(Icon, 'itemIcon', {\n  defaultProps: {\n    size: 'sm',\n  },\n})\nexport const ItemAlpha = withContext(Tag, 'itemAlpha', {\n  defaultProps: {\n    severity: 'success',\n  },\n})\n\nexport const Footer = withContext(styledTag('footer'), 'footer')\n\nexport const MiniaturizeTrigger = withContext(styledTag('div'), 'miniaturizeTrigger', {\n  defaultProps: {\n    onClick: (e: MouseEvent<HTMLDivElement>) => {\n      e.preventDefault()\n      const currentState = localStorage.getItem('isMiniaturizeNav')\n      const newState = currentState === 'closed' ? 'open' : 'closed'\n      localStorage.setItem('isMiniaturizeNav', newState)\n      e.currentTarget.setAttribute('data-state', newState)\n      window.dispatchEvent(new Event('storage'))\n    },\n    className: 'app-navigation__miniaturizeTrigger',\n    ...{\n      'data-state': typeof localStorage !== 'undefined' ? localStorage.getItem('isMiniaturizeNav') || 'open' : 'open',\n    },\n    children: (\n      <Icon>\n        <ArrowLeftCircleIcon />\n      </Icon>\n    ),\n  },\n})\n\nexport interface AppNavigationProps extends ComponentProps<typeof Root> {}\nexport interface AppNavigationHeaderProps extends ComponentProps<typeof Header> {}\nexport interface AppNavigationBodyProps extends ComponentProps<typeof Body> {}\nexport interface AppNavigationItemProps extends ComponentProps<typeof Item> {}\nexport interface AppNavigationItemSubItemsProps extends ComponentProps<typeof ItemSubItems> {}\nexport interface AppNavigationItemContentProps extends ComponentProps<typeof ItemContent> {}\nexport type AppNavigationItemLabelProps = ComponentProps<typeof ItemLabel>\nexport interface AppNavigationItemIconProps extends ComponentProps<typeof ItemIcon> {}\nexport interface AppNavigationFooterProps extends ComponentProps<typeof Footer> {}\nexport interface AppNavigationMiniaturizeTriggerProps extends ComponentProps<typeof MiniaturizeTrigger> {}\n"],"mappings":"snBASM,CAAE,eAAc,eAAgB,EAAA,mBAAmB,EAAA,cAAe,CACtE,SAAU,EACZ,CAAC,EAGK,EAAoD,IAAA,EAAA,EAAA,QACjD,CAAG,EAEC,EAAO,EAAa,EAAU,KAAK,EAAG,OAAQ,CACzD,aAAc,CAEd,CACF,CAAC,EACY,EAAS,EAAY,EAAU,QAAQ,EAAG,QAAQ,EAClD,EAAO,EAAY,EAAU,MAAM,EAAG,MAAM,EAE5C,EAAO,EAAY,EAAU,KAAK,EAAG,MAAM,EAC3C,EAAe,EAAY,EAAU,KAAK,EAAG,cAAc,EAC3D,EAAc,EAAY,EAAU,KAAK,EAAG,aAAa,EACzD,EAAY,EAAY,EAAU,GAAG,EAAG,WAAW,EACnD,EAAW,EAAY,EAAA,KAAM,WAAY,CACpD,aAAc,CACZ,KAAM,IACR,CACF,CAAC,EACY,EAAY,EAAY,EAAA,IAAK,YAAa,CACrD,aAAc,CACZ,SAAU,SACZ,CACF,CAAC,EAEY,EAAS,EAAY,EAAU,QAAQ,EAAG,QAAQ,EAElD,EAAqB,EAAY,EAAU,KAAK,EAAG,qBAAsB,CACpF,aAAc,CACZ,QAAU,GAAkC,CAC1C,EAAE,eAAe,EAEjB,IAAM,EADe,aAAa,QAAQ,kBACzB,IAAiB,SAAW,OAAS,SACtD,aAAa,QAAQ,mBAAoB,CAAQ,EACjD,EAAE,cAAc,aAAa,aAAc,CAAQ,EACnD,OAAO,cAAc,IAAI,MAAM,SAAS,CAAC,CAC3C,EACA,UAAW,qCAET,aAAc,OAAO,aAAiB,KAAc,aAAa,QAAQ,kBAAkB,GAAc,OAE3G,UACE,EAAA,EAAA,KAAC,EAAA,KAAD,CAAA,UACE,EAAA,EAAA,KAAC,EAAA,QAAD,CAAsB,CAAA,CAClB,CAAA,CAEV,CACF,CAAC"}

package/dist/components/app/navigation/AppNavigation.d.ts

@@ -1,19 +1,19 @@
+import { StyledComponent } from '@stokelp/styled-system/types';
 import { ComponentProps, FC, ForwardRefExoticComponent, RefAttributes } from 'react';
 import { ComponentVariants } from '../../../utils/slots';
-import { StyledComponent } from '@stokelp/styled-system/types';
 import { AppNavigationRecipe } from '@stokelp/styled-system/recipes';
 import { TagProps } from '../..';
-export declare const Root: ComponentVariants<StyledComponent<string, {}>, AppNavigationRecipe>;
-export declare const Header: StyledComponent<string, {}>;
-export declare const Body: StyledComponent<string, {}>;
-export declare const Item: StyledComponent<string, {}>;
-export declare const ItemSubItems: StyledComponent<string, {}>;
-export declare const ItemContent: StyledComponent<string, {}>;
-export declare const ItemLabel: StyledComponent<string, {}>;
+export declare const Root: ComponentVariants<StyledComponent<"nav", {}>, AppNavigationRecipe>;
+export declare const Header: StyledComponent<"header", {}>;
+export declare const Body: StyledComponent<"main", {}>;
+export declare const Item: StyledComponent<"div", {}>;
+export declare const ItemSubItems: StyledComponent<"div", {}>;
+export declare const ItemContent: StyledComponent<"div", {}>;
+export declare const ItemLabel: StyledComponent<"p", {}>;
 export declare const ItemIcon: FC<any>;
 export declare const ItemAlpha: ForwardRefExoticComponent< TagProps & RefAttributes<HTMLDivElement>>;
-export declare const Footer: StyledComponent<string, {}>;
-export declare const MiniaturizeTrigger: StyledComponent<string, {}>;
+export declare const Footer: StyledComponent<"footer", {}>;
+export declare const MiniaturizeTrigger: StyledComponent<"div", {}>;
 export interface AppNavigationProps extends ComponentProps<typeof Root> {
 }
 export interface AppNavigationHeaderProps extends ComponentProps<typeof Header> {

package/dist/components/app/navigation/AppNavigation.js

@@ -9,18 +9,18 @@ import { appNavigation as o } from "@stokelp/styled-system/recipes";
 import { jsx as s } from "react/jsx-runtime";
 //#region src/components/app/navigation/AppNavigation.tsx
 var c = /* @__PURE__ */ e({
-	Body: () => p,
-	Footer: () => b,
-	Header: () => f,
-	Item: () => m,
-	ItemAlpha: () => y,
-	ItemContent: () => g,
-	ItemIcon: () => v,
-	ItemLabel: () => _,
-	ItemSubItems: () => h,
-	MiniaturizeTrigger: () => x,
-	Root: () => d
-}), { withProvider: l, withContext: u } = t(o, { dataAttr: !0 }), d = l(a("nav"), "root", { defaultProps: {} }), f = u(a("header"), "header"), p = u(a("main"), "body"), m = u(a("div"), "item"), h = u(a("div"), "itemSubItems"), g = u(a("div"), "itemContent"), _ = u(a("p"), "itemLabel"), v = u(r, "itemIcon", { defaultProps: { size: "sm" } }), y = u(n, "itemAlpha", { defaultProps: { severity: "success" } }), b = u(a("footer"), "footer"), x = u(a("div"), "miniaturizeTrigger", { defaultProps: {
+	Body: () => m,
+	Footer: () => x,
+	Header: () => p,
+	Item: () => h,
+	ItemAlpha: () => b,
+	ItemContent: () => _,
+	ItemIcon: () => y,
+	ItemLabel: () => v,
+	ItemSubItems: () => g,
+	MiniaturizeTrigger: () => S,
+	Root: () => f
+}), { withProvider: l, withContext: u } = t(o, { dataAttr: !0 }), d = (e) => a(e), f = l(d("nav"), "root", { defaultProps: {} }), p = u(d("header"), "header"), m = u(d("main"), "body"), h = u(d("div"), "item"), g = u(d("div"), "itemSubItems"), _ = u(d("div"), "itemContent"), v = u(d("p"), "itemLabel"), y = u(r, "itemIcon", { defaultProps: { size: "sm" } }), b = u(n, "itemAlpha", { defaultProps: { severity: "success" } }), x = u(d("footer"), "footer"), S = u(d("div"), "miniaturizeTrigger", { defaultProps: {
 	onClick: (e) => {
 		e.preventDefault();
 		let t = localStorage.getItem("isMiniaturizeNav") === "closed" ? "open" : "closed";

package/dist/components/app/navigation/AppNavigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppNavigation.js","names":[],"sources":["../../../../src/components/app/navigation/AppNavigation.tsx"],"sourcesContent":["import { styled } from '@stokelp/styled-system/jsx'\nimport { appNavigation } from '@stokelp/styled-system/recipes'\nimport { createStyleContext } from '~/utils/slots'\nimport { Icon } from '~/components/icon/Icon'\nimport { ComponentProps, type MouseEvent } from 'react'\nimport { ArrowLeftCircleIcon } from '@heroicons/react/24/outline'\nimport { Tag } from '~/components'\n\nconst { withProvider, withContext } = createStyleContext(appNavigation, {\n  dataAttr: true,\n})\n\nexport const Root = withProvider(styled('nav'), 'root', {\n  defaultProps: {\n    //'data-state': localStorage.getItem('isMiniaturizeNav') || 'open',\n  },\n})\nexport const Header = withContext(styled('header'), 'header')\nexport const Body = withContext(styled('main'), 'body')\n\nexport const Item = withContext(styled('div'), 'item')\nexport const ItemSubItems = withContext(styled('div'), 'itemSubItems')\nexport const ItemContent = withContext(styled('div'), 'itemContent')\nexport const ItemLabel = withContext(styled('p'), 'itemLabel')\nexport const ItemIcon = withContext(Icon, 'itemIcon', {\n  defaultProps: {\n    size: 'sm',\n  },\n})\nexport const ItemAlpha = withContext(Tag, 'itemAlpha', {\n  defaultProps: {\n    severity: 'success',\n  },\n})\n\nexport const Footer = withContext(styled('footer'), 'footer')\n\nexport const MiniaturizeTrigger = withContext(styled('div'), 'miniaturizeTrigger', {\n  defaultProps: {\n    onClick: (e: MouseEvent<HTMLDivElement>) => {\n      e.preventDefault()\n      const currentState = localStorage.getItem('isMiniaturizeNav')\n      const newState = currentState === 'closed' ? 'open' : 'closed'\n      localStorage.setItem('isMiniaturizeNav', newState)\n      e.currentTarget.setAttribute('data-state', newState)\n      window.dispatchEvent(new Event('storage'))\n    },\n    className: 'app-navigation__miniaturizeTrigger',\n    ...{\n      'data-state': typeof localStorage !== 'undefined' ? localStorage.getItem('isMiniaturizeNav') || 'open' : 'open',\n    },\n    children: (\n      <Icon>\n        <ArrowLeftCircleIcon />\n      </Icon>\n    ),\n  },\n})\n\nexport interface AppNavigationProps extends ComponentProps<typeof Root> {}\nexport interface AppNavigationHeaderProps extends ComponentProps<typeof Header> {}\nexport interface AppNavigationBodyProps extends ComponentProps<typeof Body> {}\nexport interface AppNavigationItemProps extends ComponentProps<typeof Item> {}\nexport interface AppNavigationItemSubItemsProps extends ComponentProps<typeof ItemSubItems> {}\nexport interface AppNavigationItemContentProps extends ComponentProps<typeof ItemContent> {}\nexport type AppNavigationItemLabelProps = ComponentProps<typeof ItemLabel>\nexport interface AppNavigationItemIconProps extends ComponentProps<typeof ItemIcon> {}\nexport interface AppNavigationFooterProps extends ComponentProps<typeof Footer> {}\nexport interface AppNavigationMiniaturizeTriggerProps extends ComponentProps<typeof MiniaturizeTrigger> {}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;IAQM,EAAE,iBAAc,mBAAgB,EAAmB,GAAe,EACtE,UAAU,GACZ,CAAC,GAEY,IAAO,EAAa,EAAO,KAAK,GAAG,QAAQ,EACtD,cAAc,CAEd,EACF,CAAC,GACY,IAAS,EAAY,EAAO,QAAQ,GAAG,QAAQ,GAC/C,IAAO,EAAY,EAAO,MAAM,GAAG,MAAM,GAEzC,IAAO,EAAY,EAAO,KAAK,GAAG,MAAM,GACxC,IAAe,EAAY,EAAO,KAAK,GAAG,cAAc,GACxD,IAAc,EAAY,EAAO,KAAK,GAAG,aAAa,GACtD,IAAY,EAAY,EAAO,GAAG,GAAG,WAAW,GAChD,IAAW,EAAY,GAAM,YAAY,EACpD,cAAc,EACZ,MAAM,KACR,EACF,CAAC,GACY,IAAY,EAAY,GAAK,aAAa,EACrD,cAAc,EACZ,UAAU,UACZ,EACF,CAAC,GAEY,IAAS,EAAY,EAAO,QAAQ,GAAG,QAAQ,GAE/C,IAAqB,EAAY,EAAO,KAAK,GAAG,sBAAsB,EACjF,cAAc;CACZ,UAAU,MAAkC;EAC1C,EAAE,eAAe;EAEjB,IAAM,IADe,aAAa,QAAQ,kBACzB,MAAiB,WAAW,SAAS;EAGtD,AAFA,aAAa,QAAQ,oBAAoB,CAAQ,GACjD,EAAE,cAAc,aAAa,cAAc,CAAQ,GACnD,OAAO,cAAc,IAAI,MAAM,SAAS,CAAC;CAC3C;CACA,WAAW;CAET,cAAc,OAAO,eAAiB,OAAc,aAAa,QAAQ,kBAAkB,KAAc;CAE3G,UACE,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD,CAAsB,CAAA,EAClB,CAAA;AAEV,EACF,CAAC"}
+{"version":3,"file":"AppNavigation.js","names":[],"sources":["../../../../src/components/app/navigation/AppNavigation.tsx"],"sourcesContent":["import { styled } from '@stokelp/styled-system/jsx'\nimport { appNavigation } from '@stokelp/styled-system/recipes'\nimport type { StyledComponent } from '@stokelp/styled-system/types'\nimport { createStyleContext } from '~/utils/slots'\nimport { Icon } from '~/components/icon/Icon'\nimport { ComponentProps, type JSX, type MouseEvent } from 'react'\nimport { ArrowLeftCircleIcon } from '@heroicons/react/24/outline'\nimport { Tag } from '~/components'\n\nconst { withProvider, withContext } = createStyleContext(appNavigation, {\n  dataAttr: true,\n})\n\n// See Table.tsx for why we wrap `styled(tag)` to pin the literal tag.\nconst styledTag = <T extends keyof JSX.IntrinsicElements>(tag: T): StyledComponent<T, {}> =>\n  styled(tag) as StyledComponent<T, {}>\n\nexport const Root = withProvider(styledTag('nav'), 'root', {\n  defaultProps: {\n    //'data-state': localStorage.getItem('isMiniaturizeNav') || 'open',\n  },\n})\nexport const Header = withContext(styledTag('header'), 'header')\nexport const Body = withContext(styledTag('main'), 'body')\n\nexport const Item = withContext(styledTag('div'), 'item')\nexport const ItemSubItems = withContext(styledTag('div'), 'itemSubItems')\nexport const ItemContent = withContext(styledTag('div'), 'itemContent')\nexport const ItemLabel = withContext(styledTag('p'), 'itemLabel')\nexport const ItemIcon = withContext(Icon, 'itemIcon', {\n  defaultProps: {\n    size: 'sm',\n  },\n})\nexport const ItemAlpha = withContext(Tag, 'itemAlpha', {\n  defaultProps: {\n    severity: 'success',\n  },\n})\n\nexport const Footer = withContext(styledTag('footer'), 'footer')\n\nexport const MiniaturizeTrigger = withContext(styledTag('div'), 'miniaturizeTrigger', {\n  defaultProps: {\n    onClick: (e: MouseEvent<HTMLDivElement>) => {\n      e.preventDefault()\n      const currentState = localStorage.getItem('isMiniaturizeNav')\n      const newState = currentState === 'closed' ? 'open' : 'closed'\n      localStorage.setItem('isMiniaturizeNav', newState)\n      e.currentTarget.setAttribute('data-state', newState)\n      window.dispatchEvent(new Event('storage'))\n    },\n    className: 'app-navigation__miniaturizeTrigger',\n    ...{\n      'data-state': typeof localStorage !== 'undefined' ? localStorage.getItem('isMiniaturizeNav') || 'open' : 'open',\n    },\n    children: (\n      <Icon>\n        <ArrowLeftCircleIcon />\n      </Icon>\n    ),\n  },\n})\n\nexport interface AppNavigationProps extends ComponentProps<typeof Root> {}\nexport interface AppNavigationHeaderProps extends ComponentProps<typeof Header> {}\nexport interface AppNavigationBodyProps extends ComponentProps<typeof Body> {}\nexport interface AppNavigationItemProps extends ComponentProps<typeof Item> {}\nexport interface AppNavigationItemSubItemsProps extends ComponentProps<typeof ItemSubItems> {}\nexport interface AppNavigationItemContentProps extends ComponentProps<typeof ItemContent> {}\nexport type AppNavigationItemLabelProps = ComponentProps<typeof ItemLabel>\nexport interface AppNavigationItemIconProps extends ComponentProps<typeof ItemIcon> {}\nexport interface AppNavigationFooterProps extends ComponentProps<typeof Footer> {}\nexport interface AppNavigationMiniaturizeTriggerProps extends ComponentProps<typeof MiniaturizeTrigger> {}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;IASM,EAAE,iBAAc,mBAAgB,EAAmB,GAAe,EACtE,UAAU,GACZ,CAAC,GAGK,KAAoD,MACxD,EAAO,CAAG,GAEC,IAAO,EAAa,EAAU,KAAK,GAAG,QAAQ,EACzD,cAAc,CAEd,EACF,CAAC,GACY,IAAS,EAAY,EAAU,QAAQ,GAAG,QAAQ,GAClD,IAAO,EAAY,EAAU,MAAM,GAAG,MAAM,GAE5C,IAAO,EAAY,EAAU,KAAK,GAAG,MAAM,GAC3C,IAAe,EAAY,EAAU,KAAK,GAAG,cAAc,GAC3D,IAAc,EAAY,EAAU,KAAK,GAAG,aAAa,GACzD,IAAY,EAAY,EAAU,GAAG,GAAG,WAAW,GACnD,IAAW,EAAY,GAAM,YAAY,EACpD,cAAc,EACZ,MAAM,KACR,EACF,CAAC,GACY,IAAY,EAAY,GAAK,aAAa,EACrD,cAAc,EACZ,UAAU,UACZ,EACF,CAAC,GAEY,IAAS,EAAY,EAAU,QAAQ,GAAG,QAAQ,GAElD,IAAqB,EAAY,EAAU,KAAK,GAAG,sBAAsB,EACpF,cAAc;CACZ,UAAU,MAAkC;EAC1C,EAAE,eAAe;EAEjB,IAAM,IADe,aAAa,QAAQ,kBACzB,MAAiB,WAAW,SAAS;EAGtD,AAFA,aAAa,QAAQ,oBAAoB,CAAQ,GACjD,EAAE,cAAc,aAAa,cAAc,CAAQ,GACnD,OAAO,cAAc,IAAI,MAAM,SAAS,CAAC;CAC3C;CACA,WAAW;CAET,cAAc,OAAO,eAAiB,OAAc,aAAa,QAAQ,kBAAkB,KAAc;CAE3G,UACE,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD,CAAsB,CAAA,EAClB,CAAA;AAEV,EACF,CAAC"}

package/dist/components/breadcrumb/Breadcrumb.cjs

@@ -1,2 +1,2 @@
-"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../utils/slots.cjs");let n=require("@ark-ui/react"),r=require("@stokelp/styled-system/jsx"),i=require("@stokelp/styled-system/recipes"),a=require("react"),o=require("react/jsx-runtime"),s=require("react-is");s=e.__toESM(s,1);var{withProvider:c,withContext:l}=t.createStyleContext(i.breadcrumb),u=c((0,r.styled)(`nav`),`root`),d=l((0,r.styled)(`ol`),`list`),f=l((0,r.styled)(`li`),`item`),p=l((0,r.styled)(n.ark.a),`link`),m=(0,o.jsx)(`svg`,{width:`16`,height:`16`,viewBox:`0 0 24 24`,fill:`none`,xmlns:`http://www.w3.org/2000/svg`,children:(0,o.jsx)(`path`,{fillRule:`evenodd`,clipRule:`evenodd`,d:`M16.2803 11.4741C16.5732 11.767 16.5732 12.2418 16.2803 12.5347L8.78033 20.0347C8.48744 20.3276 8.01256 20.3276 7.71967 20.0347C7.42678 19.7418 7.42678 19.267 7.71967 18.9741L14.6893 12.0044L7.71967 5.03472C7.42678 4.74183 7.42678 4.26696 7.71967 3.97406C8.01256 3.68117 8.48744 3.68117 8.78033 3.97406L16.2803 11.4741Z`,fill:`#1E3A76`})}),h=(0,a.forwardRef)(({children:e,separator:t=m,...n},r)=>{let i=a.Children.toArray(s.isFragment(e)?void 0:e);return(0,o.jsx)(u,{...n,"aria-label":n[`aria-label`]??`breadcrumb`,ref:r,children:(0,o.jsx)(d,{children:i.map((e,n)=>(0,a.cloneElement)(e,{"aria-current":n===i.length-1?`page`:void 0,children:n===i.length-1?e.props.children:(0,o.jsxs)(o.Fragment,{children:[e.props.children,t?(0,o.jsx)(o.Fragment,{children:typeof t==`object`?(0,a.cloneElement)(t):(0,o.jsx)(`span`,{role:`presentation`,children:t})}):null]})}))})})});exports.Breadcrumb=h,exports.BreadcrumbItem=f,exports.BreadcrumbLink=p;
+"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../utils/slots.cjs");let n=require("@ark-ui/react"),r=require("@stokelp/styled-system/jsx"),i=require("@stokelp/styled-system/recipes"),a=require("react"),o=require("react/jsx-runtime"),s=require("react-is");s=e.__toESM(s,1);var{withProvider:c,withContext:l}=t.createStyleContext(i.breadcrumb),u=e=>(0,r.styled)(e),d=c(u(`nav`),`root`),f=l(u(`ol`),`list`),p=l(u(`li`),`item`),m=l((0,r.styled)(n.ark.a),`link`),h=(0,o.jsx)(`svg`,{width:`16`,height:`16`,viewBox:`0 0 24 24`,fill:`none`,xmlns:`http://www.w3.org/2000/svg`,children:(0,o.jsx)(`path`,{fillRule:`evenodd`,clipRule:`evenodd`,d:`M16.2803 11.4741C16.5732 11.767 16.5732 12.2418 16.2803 12.5347L8.78033 20.0347C8.48744 20.3276 8.01256 20.3276 7.71967 20.0347C7.42678 19.7418 7.42678 19.267 7.71967 18.9741L14.6893 12.0044L7.71967 5.03472C7.42678 4.74183 7.42678 4.26696 7.71967 3.97406C8.01256 3.68117 8.48744 3.68117 8.78033 3.97406L16.2803 11.4741Z`,fill:`#1E3A76`})}),g=(0,a.forwardRef)(({children:e,separator:t=h,...n},r)=>{let i=a.Children.toArray(s.isFragment(e)?void 0:e);return(0,o.jsx)(d,{...n,"aria-label":n[`aria-label`]??`breadcrumb`,ref:r,children:(0,o.jsx)(f,{children:i.map((e,n)=>(0,a.cloneElement)(e,{"aria-current":n===i.length-1?`page`:void 0,children:n===i.length-1?e.props.children:(0,o.jsxs)(o.Fragment,{children:[e.props.children,t?(0,o.jsx)(o.Fragment,{children:typeof t==`object`?(0,a.cloneElement)(t):(0,o.jsx)(`span`,{role:`presentation`,children:t})}):null]})}))})})});exports.Breadcrumb=g,exports.BreadcrumbItem=p,exports.BreadcrumbLink=m;
 //# sourceMappingURL=Breadcrumb.cjs.map

package/dist/components/breadcrumb/Breadcrumb.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumb.cjs","names":[],"sources":["../../../src/components/breadcrumb/Breadcrumb.tsx"],"sourcesContent":["import { styled } from '@stokelp/styled-system/jsx'\nimport { breadcrumb } from '@stokelp/styled-system/recipes'\nimport { createStyleContext } from '~/utils/slots'\nimport { ark } from '@ark-ui/react'\nimport * as ReactIs from 'react-is'\nimport { Children, cloneElement, ComponentProps, type FC, forwardRef, ReactElement, ReactNode } from 'react'\n\nconst { withProvider, withContext } = createStyleContext(breadcrumb)\n\nconst StyledBreadcrumb = withProvider(styled('nav'), 'root')\nconst StyledBreadcrumbList = withContext(styled('ol'), 'list')\n\nexport const BreadcrumbItem = withContext(styled('li'), 'item')\nexport const BreadcrumbLink = withContext(styled(ark.a), 'link')\n\nconst DefaultSeparator = (\n  <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path\n      fillRule=\"evenodd\"\n      clipRule=\"evenodd\"\n      d=\"M16.2803 11.4741C16.5732 11.767 16.5732 12.2418 16.2803 12.5347L8.78033 20.0347C8.48744 20.3276 8.01256 20.3276 7.71967 20.0347C7.42678 19.7418 7.42678 19.267 7.71967 18.9741L14.6893 12.0044L7.71967 5.03472C7.42678 4.74183 7.42678 4.26696 7.71967 3.97406C8.01256 3.68117 8.48744 3.68117 8.78033 3.97406L16.2803 11.4741Z\"\n      fill=\"#1E3A76\"\n    />\n  </svg>\n)\n\nexport const Breadcrumb = forwardRef<HTMLElement, BreadcrumbProps>(\n  ({ children, separator = DefaultSeparator, ...props }, ref) => {\n    const child = Children.toArray(\n      ReactIs.isFragment(children) ? undefined : children,\n    ) as ReactElement<BreadcrumbItemProps>[]\n\n    return (\n      <StyledBreadcrumb {...props} aria-label={props['aria-label'] ?? 'breadcrumb'} ref={ref}>\n        <StyledBreadcrumbList>\n          {child.map((item, index) => {\n            return cloneElement<BreadcrumbItemProps>(item, {\n              'aria-current': index === child.length - 1 ? 'page' : undefined,\n              children:\n                index === child.length - 1 ? (\n                  item.props.children\n                ) : (\n                  <>\n                    {item.props.children}\n                    {separator ? (\n                      <>\n                        {typeof separator === 'object' ? (\n                          cloneElement(separator as ReactElement)\n                        ) : (\n                          <span role=\"presentation\">{separator}</span>\n                        )}\n                      </>\n                    ) : null}\n                  </>\n                ),\n            })\n          })}\n        </StyledBreadcrumbList>\n      </StyledBreadcrumb>\n    )\n  },\n) as FC<BreadcrumbProps>\n\nexport type BreadcrumbLinkProps = ComponentProps<typeof BreadcrumbLink>\nexport type BreadcrumbItemProps = ComponentProps<typeof BreadcrumbItem>\nexport type BreadcrumbProps = ComponentProps<typeof StyledBreadcrumb> & {\n  separator?: ReactNode\n}\n"],"mappings":"oTAOA,GAAM,CAAE,eAAc,eAAgB,EAAA,mBAAmB,EAAA,UAAU,EAE7D,EAAmB,GAAA,EAAA,EAAA,QAAoB,KAAK,EAAG,MAAM,EACrD,EAAuB,GAAA,EAAA,EAAA,QAAmB,IAAI,EAAG,MAAM,EAEhD,EAAiB,GAAA,EAAA,EAAA,QAAmB,IAAI,EAAG,MAAM,EACjD,EAAiB,GAAA,EAAA,EAAA,QAAmB,EAAA,IAAI,CAAC,EAAG,MAAM,EAEzD,GACJ,EAAA,EAAA,KAAC,MAAD,CAAK,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OAAO,MAAM,uCAChE,EAAA,EAAA,KAAC,OAAD,CACE,SAAS,UACT,SAAS,UACT,EAAE,kUACF,KAAK,SACN,CAAA,CACE,CAAA,EAGM,GAAA,EAAA,EAAA,aACV,CAAE,WAAU,YAAY,EAAkB,GAAG,GAAS,IAAQ,CAC7D,IAAM,EAAQ,EAAA,SAAS,QACrB,EAAQ,WAAW,CAAQ,EAAI,IAAA,GAAY,CAC7C,EAEA,OACE,EAAA,EAAA,KAAC,EAAD,CAAkB,GAAI,EAAO,aAAY,EAAM,eAAiB,aAAmB,gBACjF,EAAA,EAAA,KAAC,EAAD,CAAA,SACG,EAAM,KAAK,EAAM,KAChB,EAAA,EAAA,cAAyC,EAAM,CAC7C,eAAgB,IAAU,EAAM,OAAS,EAAI,OAAS,IAAA,GACtD,SACE,IAAU,EAAM,OAAS,EACvB,EAAK,MAAM,UAEX,EAAA,EAAA,MAAA,EAAA,SAAA,CAAA,SAAA,CACG,EAAK,MAAM,SACX,GACC,EAAA,EAAA,KAAA,EAAA,SAAA,CAAA,SACG,OAAO,GAAc,UAAA,EAAA,EAAA,cACP,CAAyB,GAEtC,EAAA,EAAA,KAAC,OAAD,CAAM,KAAK,wBAAgB,CAAgB,CAAA,CAE7C,CAAA,EACA,IACJ,CAAA,CAAA,CAER,CAAC,CACF,CACmB,CAAA,CACN,CAAA,CAEtB,CACF"}
+{"version":3,"file":"Breadcrumb.cjs","names":[],"sources":["../../../src/components/breadcrumb/Breadcrumb.tsx"],"sourcesContent":["import { styled } from '@stokelp/styled-system/jsx'\nimport { breadcrumb } from '@stokelp/styled-system/recipes'\nimport type { StyledComponent } from '@stokelp/styled-system/types'\nimport { createStyleContext } from '~/utils/slots'\nimport { ark } from '@ark-ui/react'\nimport * as ReactIs from 'react-is'\nimport { Children, cloneElement, ComponentProps, type FC, forwardRef, type JSX, ReactElement, ReactNode } from 'react'\n\nconst { withProvider, withContext } = createStyleContext(breadcrumb)\n\n// See Table.tsx for why we pin the literal tag.\nconst styledTag = <T extends keyof JSX.IntrinsicElements>(tag: T): StyledComponent<T, {}> =>\n  styled(tag) as StyledComponent<T, {}>\n\nconst StyledBreadcrumb = withProvider(styledTag('nav'), 'root')\nconst StyledBreadcrumbList = withContext(styledTag('ol'), 'list')\n\nexport const BreadcrumbItem = withContext(styledTag('li'), 'item')\nexport const BreadcrumbLink = withContext(styled(ark.a), 'link')\n\nconst DefaultSeparator = (\n  <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path\n      fillRule=\"evenodd\"\n      clipRule=\"evenodd\"\n      d=\"M16.2803 11.4741C16.5732 11.767 16.5732 12.2418 16.2803 12.5347L8.78033 20.0347C8.48744 20.3276 8.01256 20.3276 7.71967 20.0347C7.42678 19.7418 7.42678 19.267 7.71967 18.9741L14.6893 12.0044L7.71967 5.03472C7.42678 4.74183 7.42678 4.26696 7.71967 3.97406C8.01256 3.68117 8.48744 3.68117 8.78033 3.97406L16.2803 11.4741Z\"\n      fill=\"#1E3A76\"\n    />\n  </svg>\n)\n\nexport const Breadcrumb = forwardRef<HTMLElement, BreadcrumbProps>(\n  ({ children, separator = DefaultSeparator, ...props }, ref) => {\n    const child = Children.toArray(\n      ReactIs.isFragment(children) ? undefined : children,\n    ) as ReactElement<BreadcrumbItemProps>[]\n\n    return (\n      <StyledBreadcrumb {...props} aria-label={props['aria-label'] ?? 'breadcrumb'} ref={ref}>\n        <StyledBreadcrumbList>\n          {child.map((item, index) => {\n            return cloneElement<BreadcrumbItemProps>(item, {\n              'aria-current': index === child.length - 1 ? 'page' : undefined,\n              children:\n                index === child.length - 1 ? (\n                  item.props.children\n                ) : (\n                  <>\n                    {item.props.children}\n                    {separator ? (\n                      <>\n                        {typeof separator === 'object' ? (\n                          cloneElement(separator as ReactElement)\n                        ) : (\n                          <span role=\"presentation\">{separator}</span>\n                        )}\n                      </>\n                    ) : null}\n                  </>\n                ),\n            })\n          })}\n        </StyledBreadcrumbList>\n      </StyledBreadcrumb>\n    )\n  },\n) as FC<BreadcrumbProps>\n\nexport type BreadcrumbLinkProps = ComponentProps<typeof BreadcrumbLink>\nexport type BreadcrumbItemProps = ComponentProps<typeof BreadcrumbItem>\nexport type BreadcrumbProps = ComponentProps<typeof StyledBreadcrumb> & {\n  separator?: ReactNode\n}\n"],"mappings":"oTAQA,GAAM,CAAE,eAAc,eAAgB,EAAA,mBAAmB,EAAA,UAAU,EAG7D,EAAoD,IAAA,EAAA,EAAA,QACjD,CAAG,EAEN,EAAmB,EAAa,EAAU,KAAK,EAAG,MAAM,EACxD,EAAuB,EAAY,EAAU,IAAI,EAAG,MAAM,EAEnD,EAAiB,EAAY,EAAU,IAAI,EAAG,MAAM,EACpD,EAAiB,GAAA,EAAA,EAAA,QAAmB,EAAA,IAAI,CAAC,EAAG,MAAM,EAEzD,GACJ,EAAA,EAAA,KAAC,MAAD,CAAK,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OAAO,MAAM,uCAChE,EAAA,EAAA,KAAC,OAAD,CACE,SAAS,UACT,SAAS,UACT,EAAE,kUACF,KAAK,SACN,CAAA,CACE,CAAA,EAGM,GAAA,EAAA,EAAA,aACV,CAAE,WAAU,YAAY,EAAkB,GAAG,GAAS,IAAQ,CAC7D,IAAM,EAAQ,EAAA,SAAS,QACrB,EAAQ,WAAW,CAAQ,EAAI,IAAA,GAAY,CAC7C,EAEA,OACE,EAAA,EAAA,KAAC,EAAD,CAAkB,GAAI,EAAO,aAAY,EAAM,eAAiB,aAAmB,gBACjF,EAAA,EAAA,KAAC,EAAD,CAAA,SACG,EAAM,KAAK,EAAM,KAChB,EAAA,EAAA,cAAyC,EAAM,CAC7C,eAAgB,IAAU,EAAM,OAAS,EAAI,OAAS,IAAA,GACtD,SACE,IAAU,EAAM,OAAS,EACvB,EAAK,MAAM,UAEX,EAAA,EAAA,MAAA,EAAA,SAAA,CAAA,SAAA,CACG,EAAK,MAAM,SACX,GACC,EAAA,EAAA,KAAA,EAAA,SAAA,CAAA,SACG,OAAO,GAAc,UAAA,EAAA,EAAA,cACP,CAAyB,GAEtC,EAAA,EAAA,KAAC,OAAD,CAAM,KAAK,wBAAgB,CAAgB,CAAA,CAE7C,CAAA,EACA,IACJ,CAAA,CAAA,CAER,CAAC,CACF,CACmB,CAAA,CACN,CAAA,CAEtB,CACF"}

package/dist/components/breadcrumb/Breadcrumb.d.ts

@@ -1,11 +1,11 @@
+import { StyledComponent } from '@stokelp/styled-system/types';
 import { ComponentProps, FC, ReactNode, ForwardRefExoticComponent, ClassAttributes, AnchorHTMLAttributes } from 'react';
 import { ComponentVariants } from '../../utils/slots';
-import { StyledComponent } from '@stokelp/styled-system/types';
 import { BreadcrumbRecipe } from '@stokelp/styled-system/recipes';
 import { PolymorphicProps } from '@ark-ui/react';
-declare const StyledBreadcrumb: ComponentVariants<StyledComponent<string, {}>, BreadcrumbRecipe>;
-export declare const BreadcrumbItem: StyledComponent<string, {}>;
-export declare const BreadcrumbLink: StyledComponent<ForwardRefExoticComponent< ClassAttributes<HTMLAnchorElement> & AnchorHTMLAttributes<HTMLAnchorElement> & PolymorphicProps>, {}>;
+declare const StyledBreadcrumb: ComponentVariants<StyledComponent<"nav", {}>, BreadcrumbRecipe>;
+export declare const BreadcrumbItem: StyledComponent<"li", {}>;
+export declare const BreadcrumbLink: StyledComponent< ForwardRefExoticComponent< ClassAttributes<HTMLAnchorElement> & AnchorHTMLAttributes<HTMLAnchorElement> & PolymorphicProps>, {}>;
 export declare const Breadcrumb: FC<BreadcrumbProps>;
 export type BreadcrumbLinkProps = ComponentProps<typeof BreadcrumbLink>;
 export type BreadcrumbItemProps = ComponentProps<typeof BreadcrumbItem>;

package/dist/components/breadcrumb/Breadcrumb.js

@@ -7,7 +7,7 @@ import { Children as i, cloneElement as a, forwardRef as o } from "react";
 import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
 import * as u from "react-is";
 //#region src/components/breadcrumb/Breadcrumb.tsx
-var { withProvider: d, withContext: f } = e(r), p = d(n("nav"), "root"), m = f(n("ol"), "list"), h = f(n("li"), "item"), g = f(n(t.a), "link"), _ = /* @__PURE__ */ c("svg", {
+var { withProvider: d, withContext: f } = e(r), p = (e) => n(e), m = d(p("nav"), "root"), h = f(p("ol"), "list"), g = f(p("li"), "item"), _ = f(n(t.a), "link"), v = /* @__PURE__ */ c("svg", {
 	width: "16",
 	height: "16",
 	viewBox: "0 0 24 24",
@@ -19,13 +19,13 @@ var { withProvider: d, withContext: f } = e(r), p = d(n("nav"), "root"), m = f(n
 		d: "M16.2803 11.4741C16.5732 11.767 16.5732 12.2418 16.2803 12.5347L8.78033 20.0347C8.48744 20.3276 8.01256 20.3276 7.71967 20.0347C7.42678 19.7418 7.42678 19.267 7.71967 18.9741L14.6893 12.0044L7.71967 5.03472C7.42678 4.74183 7.42678 4.26696 7.71967 3.97406C8.01256 3.68117 8.48744 3.68117 8.78033 3.97406L16.2803 11.4741Z",
 		fill: "#1E3A76"
 	})
-}), v = o(({ children: e, separator: t = _, ...n }, r) => {
+}), y = o(({ children: e, separator: t = v, ...n }, r) => {
 	let o = i.toArray(u.isFragment(e) ? void 0 : e);
-	return /* @__PURE__ */ c(p, {
+	return /* @__PURE__ */ c(m, {
 		...n,
 		"aria-label": n["aria-label"] ?? "breadcrumb",
 		ref: r,
-		children: /* @__PURE__ */ c(m, { children: o.map((e, n) => a(e, {
+		children: /* @__PURE__ */ c(h, { children: o.map((e, n) => a(e, {
 			"aria-current": n === o.length - 1 ? "page" : void 0,
 			children: n === o.length - 1 ? e.props.children : /* @__PURE__ */ l(s, { children: [e.props.children, t ? /* @__PURE__ */ c(s, { children: typeof t == "object" ? a(t) : /* @__PURE__ */ c("span", {
 				role: "presentation",
@@ -35,6 +35,6 @@ var { withProvider: d, withContext: f } = e(r), p = d(n("nav"), "root"), m = f(n
 	});
 });
 //#endregion
-export { v as Breadcrumb, h as BreadcrumbItem, g as BreadcrumbLink };
+export { y as Breadcrumb, g as BreadcrumbItem, _ as BreadcrumbLink };
 
 //# sourceMappingURL=Breadcrumb.js.map

package/dist/components/breadcrumb/Breadcrumb.js.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumb.js","names":[],"sources":["../../../src/components/breadcrumb/Breadcrumb.tsx"],"sourcesContent":["import { styled } from '@stokelp/styled-system/jsx'\nimport { breadcrumb } from '@stokelp/styled-system/recipes'\nimport { createStyleContext } from '~/utils/slots'\nimport { ark } from '@ark-ui/react'\nimport * as ReactIs from 'react-is'\nimport { Children, cloneElement, ComponentProps, type FC, forwardRef, ReactElement, ReactNode } from 'react'\n\nconst { withProvider, withContext } = createStyleContext(breadcrumb)\n\nconst StyledBreadcrumb = withProvider(styled('nav'), 'root')\nconst StyledBreadcrumbList = withContext(styled('ol'), 'list')\n\nexport const BreadcrumbItem = withContext(styled('li'), 'item')\nexport const BreadcrumbLink = withContext(styled(ark.a), 'link')\n\nconst DefaultSeparator = (\n  <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path\n      fillRule=\"evenodd\"\n      clipRule=\"evenodd\"\n      d=\"M16.2803 11.4741C16.5732 11.767 16.5732 12.2418 16.2803 12.5347L8.78033 20.0347C8.48744 20.3276 8.01256 20.3276 7.71967 20.0347C7.42678 19.7418 7.42678 19.267 7.71967 18.9741L14.6893 12.0044L7.71967 5.03472C7.42678 4.74183 7.42678 4.26696 7.71967 3.97406C8.01256 3.68117 8.48744 3.68117 8.78033 3.97406L16.2803 11.4741Z\"\n      fill=\"#1E3A76\"\n    />\n  </svg>\n)\n\nexport const Breadcrumb = forwardRef<HTMLElement, BreadcrumbProps>(\n  ({ children, separator = DefaultSeparator, ...props }, ref) => {\n    const child = Children.toArray(\n      ReactIs.isFragment(children) ? undefined : children,\n    ) as ReactElement<BreadcrumbItemProps>[]\n\n    return (\n      <StyledBreadcrumb {...props} aria-label={props['aria-label'] ?? 'breadcrumb'} ref={ref}>\n        <StyledBreadcrumbList>\n          {child.map((item, index) => {\n            return cloneElement<BreadcrumbItemProps>(item, {\n              'aria-current': index === child.length - 1 ? 'page' : undefined,\n              children:\n                index === child.length - 1 ? (\n                  item.props.children\n                ) : (\n                  <>\n                    {item.props.children}\n                    {separator ? (\n                      <>\n                        {typeof separator === 'object' ? (\n                          cloneElement(separator as ReactElement)\n                        ) : (\n                          <span role=\"presentation\">{separator}</span>\n                        )}\n                      </>\n                    ) : null}\n                  </>\n                ),\n            })\n          })}\n        </StyledBreadcrumbList>\n      </StyledBreadcrumb>\n    )\n  },\n) as FC<BreadcrumbProps>\n\nexport type BreadcrumbLinkProps = ComponentProps<typeof BreadcrumbLink>\nexport type BreadcrumbItemProps = ComponentProps<typeof BreadcrumbItem>\nexport type BreadcrumbProps = ComponentProps<typeof StyledBreadcrumb> & {\n  separator?: ReactNode\n}\n"],"mappings":";;;;;;;;;AAOA,IAAM,EAAE,iBAAc,mBAAgB,EAAmB,CAAU,GAE7D,IAAmB,EAAa,EAAO,KAAK,GAAG,MAAM,GACrD,IAAuB,EAAY,EAAO,IAAI,GAAG,MAAM,GAEhD,IAAiB,EAAY,EAAO,IAAI,GAAG,MAAM,GACjD,IAAiB,EAAY,EAAO,EAAI,CAAC,GAAG,MAAM,GAEzD,IACJ,kBAAC,OAAD;CAAK,OAAM;CAAK,QAAO;CAAK,SAAQ;CAAY,MAAK;CAAO,OAAM;WAChE,kBAAC,QAAD;EACE,UAAS;EACT,UAAS;EACT,GAAE;EACF,MAAK;CACN,CAAA;AACE,CAAA,GAGM,IAAa,GACvB,EAAE,aAAU,eAAY,GAAkB,GAAG,KAAS,MAAQ;CAC7D,IAAM,IAAQ,EAAS,QACrB,EAAQ,WAAW,CAAQ,IAAI,KAAA,IAAY,CAC7C;CAEA,OACE,kBAAC,GAAD;EAAkB,GAAI;EAAO,cAAY,EAAM,iBAAiB;EAAmB;YACjF,kBAAC,GAAD,EAAA,UACG,EAAM,KAAK,GAAM,MACT,EAAkC,GAAM;GAC7C,gBAAgB,MAAU,EAAM,SAAS,IAAI,SAAS,KAAA;GACtD,UACE,MAAU,EAAM,SAAS,IACvB,EAAK,MAAM,WAEX,kBAAA,GAAA,EAAA,UAAA,CACG,EAAK,MAAM,UACX,IACC,kBAAA,GAAA,EAAA,UACG,OAAO,KAAc,WACpB,EAAa,CAAyB,IAEtC,kBAAC,QAAD;IAAM,MAAK;cAAgB;GAAgB,CAAA,EAE7C,CAAA,IACA,IACJ,EAAA,CAAA;EAER,CAAC,CACF,EACmB,CAAA;CACN,CAAA;AAEtB,CACF"}
+{"version":3,"file":"Breadcrumb.js","names":[],"sources":["../../../src/components/breadcrumb/Breadcrumb.tsx"],"sourcesContent":["import { styled } from '@stokelp/styled-system/jsx'\nimport { breadcrumb } from '@stokelp/styled-system/recipes'\nimport type { StyledComponent } from '@stokelp/styled-system/types'\nimport { createStyleContext } from '~/utils/slots'\nimport { ark } from '@ark-ui/react'\nimport * as ReactIs from 'react-is'\nimport { Children, cloneElement, ComponentProps, type FC, forwardRef, type JSX, ReactElement, ReactNode } from 'react'\n\nconst { withProvider, withContext } = createStyleContext(breadcrumb)\n\n// See Table.tsx for why we pin the literal tag.\nconst styledTag = <T extends keyof JSX.IntrinsicElements>(tag: T): StyledComponent<T, {}> =>\n  styled(tag) as StyledComponent<T, {}>\n\nconst StyledBreadcrumb = withProvider(styledTag('nav'), 'root')\nconst StyledBreadcrumbList = withContext(styledTag('ol'), 'list')\n\nexport const BreadcrumbItem = withContext(styledTag('li'), 'item')\nexport const BreadcrumbLink = withContext(styled(ark.a), 'link')\n\nconst DefaultSeparator = (\n  <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path\n      fillRule=\"evenodd\"\n      clipRule=\"evenodd\"\n      d=\"M16.2803 11.4741C16.5732 11.767 16.5732 12.2418 16.2803 12.5347L8.78033 20.0347C8.48744 20.3276 8.01256 20.3276 7.71967 20.0347C7.42678 19.7418 7.42678 19.267 7.71967 18.9741L14.6893 12.0044L7.71967 5.03472C7.42678 4.74183 7.42678 4.26696 7.71967 3.97406C8.01256 3.68117 8.48744 3.68117 8.78033 3.97406L16.2803 11.4741Z\"\n      fill=\"#1E3A76\"\n    />\n  </svg>\n)\n\nexport const Breadcrumb = forwardRef<HTMLElement, BreadcrumbProps>(\n  ({ children, separator = DefaultSeparator, ...props }, ref) => {\n    const child = Children.toArray(\n      ReactIs.isFragment(children) ? undefined : children,\n    ) as ReactElement<BreadcrumbItemProps>[]\n\n    return (\n      <StyledBreadcrumb {...props} aria-label={props['aria-label'] ?? 'breadcrumb'} ref={ref}>\n        <StyledBreadcrumbList>\n          {child.map((item, index) => {\n            return cloneElement<BreadcrumbItemProps>(item, {\n              'aria-current': index === child.length - 1 ? 'page' : undefined,\n              children:\n                index === child.length - 1 ? (\n                  item.props.children\n                ) : (\n                  <>\n                    {item.props.children}\n                    {separator ? (\n                      <>\n                        {typeof separator === 'object' ? (\n                          cloneElement(separator as ReactElement)\n                        ) : (\n                          <span role=\"presentation\">{separator}</span>\n                        )}\n                      </>\n                    ) : null}\n                  </>\n                ),\n            })\n          })}\n        </StyledBreadcrumbList>\n      </StyledBreadcrumb>\n    )\n  },\n) as FC<BreadcrumbProps>\n\nexport type BreadcrumbLinkProps = ComponentProps<typeof BreadcrumbLink>\nexport type BreadcrumbItemProps = ComponentProps<typeof BreadcrumbItem>\nexport type BreadcrumbProps = ComponentProps<typeof StyledBreadcrumb> & {\n  separator?: ReactNode\n}\n"],"mappings":";;;;;;;;;AAQA,IAAM,EAAE,iBAAc,mBAAgB,EAAmB,CAAU,GAG7D,KAAoD,MACxD,EAAO,CAAG,GAEN,IAAmB,EAAa,EAAU,KAAK,GAAG,MAAM,GACxD,IAAuB,EAAY,EAAU,IAAI,GAAG,MAAM,GAEnD,IAAiB,EAAY,EAAU,IAAI,GAAG,MAAM,GACpD,IAAiB,EAAY,EAAO,EAAI,CAAC,GAAG,MAAM,GAEzD,IACJ,kBAAC,OAAD;CAAK,OAAM;CAAK,QAAO;CAAK,SAAQ;CAAY,MAAK;CAAO,OAAM;WAChE,kBAAC,QAAD;EACE,UAAS;EACT,UAAS;EACT,GAAE;EACF,MAAK;CACN,CAAA;AACE,CAAA,GAGM,IAAa,GACvB,EAAE,aAAU,eAAY,GAAkB,GAAG,KAAS,MAAQ;CAC7D,IAAM,IAAQ,EAAS,QACrB,EAAQ,WAAW,CAAQ,IAAI,KAAA,IAAY,CAC7C;CAEA,OACE,kBAAC,GAAD;EAAkB,GAAI;EAAO,cAAY,EAAM,iBAAiB;EAAmB;YACjF,kBAAC,GAAD,EAAA,UACG,EAAM,KAAK,GAAM,MACT,EAAkC,GAAM;GAC7C,gBAAgB,MAAU,EAAM,SAAS,IAAI,SAAS,KAAA;GACtD,UACE,MAAU,EAAM,SAAS,IACvB,EAAK,MAAM,WAEX,kBAAA,GAAA,EAAA,UAAA,CACG,EAAK,MAAM,UACX,IACC,kBAAA,GAAA,EAAA,UACG,OAAO,KAAc,WACpB,EAAa,CAAyB,IAEtC,kBAAC,QAAD;IAAM,MAAK;cAAgB;GAAgB,CAAA,EAE7C,CAAA,IACA,IACJ,EAAA,CAAA;EAER,CAAC,CACF,EACmB,CAAA;CACN,CAAA;AAEtB,CACF"}

package/dist/components/button/Button.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Button.cjs","names":[],"sources":["../../../src/components/button/Button.tsx"],"sourcesContent":["import { ark } from '@ark-ui/react'\nimport { styled } from '@stokelp/styled-system/jsx'\nimport { button } from '@stokelp/styled-system/recipes'\nimport type { ComponentProps } from 'react'\n\nexport const Button = styled(ark.button, button)\nexport interface ButtonProps extends ComponentProps<typeof Button> {}\n"],"mappings":"gIAKA,IAAa,GAAA,EAAA,EAAA,QAAgB,EAAA,IAAI,OAAQ,EAAA,MAAM"}
+{"version":3,"file":"Button.cjs","names":[],"sources":["../../../src/components/button/Button.tsx"],"sourcesContent":["import { ark, type HTMLArkProps } from '@ark-ui/react'\nimport { styled } from '@stokelp/styled-system/jsx'\nimport { button, type ButtonVariantProps } from '@stokelp/styled-system/recipes'\nimport type { JsxStyleProps } from '@stokelp/styled-system/types'\nimport type { ComponentProps, JSX } from 'react'\n\n// We need three things from the Button typing:\n// 1. Native `<button>` HTML attrs (including a properly-typed onClick event)\n// 2. ark's polymorphic `asChild` prop\n// 3. The button recipe's variant props\n//\n// `styled(ark.button, button)` runtime is correct, but TS d.ts emit widens\n// the inferred component type and consumers lose onClick typing (TS7006).\n// This explicit cast pins all three layers.\ntype ButtonComponentProps = HTMLArkProps<'button'> & JsxStyleProps & ButtonVariantProps\ntype ButtonComponent = ((props: ButtonComponentProps) => JSX.Element) & { displayName?: string }\n\nexport const Button = styled(ark.button, button) as unknown as ButtonComponent\nexport type ButtonProps = ComponentProps<typeof Button>\n"],"mappings":"gIAiBA,IAAa,GAAA,EAAA,EAAA,QAAgB,EAAA,IAAI,OAAQ,EAAA,MAAM"}

package/dist/components/button/Button.d.ts

@@ -1,11 +1,11 @@
-import { ComponentProps } from 'react';
-import { StyledComponent } from '@stokelp/styled-system/types';
-export declare const Button: StyledComponent<any, {
-    [x: string]: unknown;
-    [x: number]: unknown;
-    size?: unknown;
-    variant?: unknown;
-    severity?: unknown;
-}>;
-export interface ButtonProps extends ComponentProps<typeof Button> {
-}
+import { HTMLArkProps } from '@ark-ui/react';
+import { ButtonVariantProps } from '@stokelp/styled-system/recipes';
+import { JsxStyleProps } from '@stokelp/styled-system/types';
+import { ComponentProps, JSX } from 'react';
+type ButtonComponentProps = HTMLArkProps<'button'> & JsxStyleProps & ButtonVariantProps;
+type ButtonComponent = ((props: ButtonComponentProps) => JSX.Element) & {
+    displayName?: string;
+};
+export declare const Button: ButtonComponent;
+export type ButtonProps = ComponentProps<typeof Button>;
+export {};

package/dist/components/button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","names":[],"sources":["../../../src/components/button/Button.tsx"],"sourcesContent":["import { ark } from '@ark-ui/react'\nimport { styled } from '@stokelp/styled-system/jsx'\nimport { button } from '@stokelp/styled-system/recipes'\nimport type { ComponentProps } from 'react'\n\nexport const Button = styled(ark.button, button)\nexport interface ButtonProps extends ComponentProps<typeof Button> {}\n"],"mappings":";;;;;AAKA,IAAa,IAAS,EAAO,EAAI,QAAQ,CAAM"}
+{"version":3,"file":"Button.js","names":[],"sources":["../../../src/components/button/Button.tsx"],"sourcesContent":["import { ark, type HTMLArkProps } from '@ark-ui/react'\nimport { styled } from '@stokelp/styled-system/jsx'\nimport { button, type ButtonVariantProps } from '@stokelp/styled-system/recipes'\nimport type { JsxStyleProps } from '@stokelp/styled-system/types'\nimport type { ComponentProps, JSX } from 'react'\n\n// We need three things from the Button typing:\n// 1. Native `<button>` HTML attrs (including a properly-typed onClick event)\n// 2. ark's polymorphic `asChild` prop\n// 3. The button recipe's variant props\n//\n// `styled(ark.button, button)` runtime is correct, but TS d.ts emit widens\n// the inferred component type and consumers lose onClick typing (TS7006).\n// This explicit cast pins all three layers.\ntype ButtonComponentProps = HTMLArkProps<'button'> & JsxStyleProps & ButtonVariantProps\ntype ButtonComponent = ((props: ButtonComponentProps) => JSX.Element) & { displayName?: string }\n\nexport const Button = styled(ark.button, button) as unknown as ButtonComponent\nexport type ButtonProps = ComponentProps<typeof Button>\n"],"mappings":";;;;;AAiBA,IAAa,IAAS,EAAO,EAAI,QAAQ,CAAM"}

package/dist/components/checkbox-card/CheckboxCard.cjs

@@ -1,2 +1,2 @@
-"use client";const e=require("../../utils/slots.cjs"),t=require("../../shared/assets/icons.cjs");let n=require("@ark-ui/react"),r=require("@stokelp/styled-system/jsx"),i=require("@stokelp/styled-system/recipes"),a=require("react"),o=require("react/jsx-runtime"),s=require("@stokelp/styled-system/css");var{withProvider:c,withContext:l}=e.createStyleContext(i.checkboxCard,{dataAttr:!0}),u=c((0,r.styled)(n.Checkbox.Root)),d=l((0,r.styled)(n.Checkbox.Label),`title`),f=l((0,r.styled)(`div`),`content`),p=l((0,r.styled)(`p`),`description`),m=l((0,r.styled)(n.ark.img),`image`),h=(0,a.forwardRef)((e,a)=>{let[c,l]=i.checkboxCard.splitVariantProps(e),[d,f]=(0,r.splitCssProps)(l),{children:p,className:m,...h}=f,g=(0,i.checkboxCard)(c);return(0,o.jsxs)(u,{ref:a,className:(0,s.cx)(g.root,(0,s.css)(d),m),...h,value:h.value,children:[(0,o.jsxs)(n.Checkbox.Control,{className:g.control,children:[(0,o.jsx)(n.Checkbox.Indicator,{children:(0,o.jsx)(t.CheckIcon,{})}),(0,o.jsx)(n.Checkbox.Indicator,{indeterminate:!0,children:(0,o.jsx)(t.MinusIcon,{})})]}),p,(0,o.jsx)(n.Checkbox.HiddenInput,{})]})});h.displayName=`CheckboxCard`,exports.CheckboxCard=h,exports.CheckboxCardContent=f,exports.CheckboxCardDescription=p,exports.CheckboxCardImage=m,exports.CheckboxCardTitle=d;
+"use client";const e=require("../../utils/slots.cjs"),t=require("../../shared/assets/icons.cjs");let n=require("@ark-ui/react"),r=require("@stokelp/styled-system/jsx"),i=require("@stokelp/styled-system/recipes"),a=require("react"),o=require("react/jsx-runtime"),s=require("@stokelp/styled-system/css");var{withProvider:c,withContext:l}=e.createStyleContext(i.checkboxCard,{dataAttr:!0}),u=e=>(0,r.styled)(e),d=c((0,r.styled)(n.Checkbox.Root)),f=l((0,r.styled)(n.Checkbox.Label),`title`),p=l(u(`div`),`content`),m=l(u(`p`),`description`),h=l((0,r.styled)(n.ark.img),`image`),g=(0,a.forwardRef)((e,a)=>{let[c,l]=i.checkboxCard.splitVariantProps(e),[u,f]=(0,r.splitCssProps)(l),{children:p,className:m,...h}=f,g=(0,i.checkboxCard)(c);return(0,o.jsxs)(d,{ref:a,className:(0,s.cx)(g.root,(0,s.css)(u),m),...h,value:h.value,children:[(0,o.jsxs)(n.Checkbox.Control,{className:g.control,children:[(0,o.jsx)(n.Checkbox.Indicator,{children:(0,o.jsx)(t.CheckIcon,{})}),(0,o.jsx)(n.Checkbox.Indicator,{indeterminate:!0,children:(0,o.jsx)(t.MinusIcon,{})})]}),p,(0,o.jsx)(n.Checkbox.HiddenInput,{})]})});g.displayName=`CheckboxCard`,exports.CheckboxCard=g,exports.CheckboxCardContent=p,exports.CheckboxCardDescription=m,exports.CheckboxCardImage=h,exports.CheckboxCardTitle=f;
 //# sourceMappingURL=CheckboxCard.cjs.map

package/dist/components/checkbox-card/CheckboxCard.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxCard.cjs","names":[],"sources":["../../../src/components/checkbox-card/CheckboxCard.tsx"],"sourcesContent":["import { ark, Checkbox as ArkCheckbox, type CheckboxRootProps } from '@ark-ui/react'\nimport { css, cx } from '@stokelp/styled-system/css'\nimport { splitCssProps, styled } from '@stokelp/styled-system/jsx'\nimport { checkboxCard, type CheckboxCardVariantProps } from '@stokelp/styled-system/recipes'\nimport type { Assign, JsxStyleProps } from '@stokelp/styled-system/types'\nimport { ComponentProps, forwardRef } from 'react'\nimport { createStyleContext } from '~/utils/slots'\nimport { type CheckboxProps } from '~/components/checkbox'\nimport { CheckIcon, MinusIcon } from '~/shared/assets/icons'\n\ntype StyledCheckboxRootProps = Assign<JsxStyleProps, CheckboxRootProps>\n\nexport interface CheckboxCardProps extends Omit<StyledCheckboxRootProps, 'value'>, CheckboxCardVariantProps {\n  value?: string | number\n}\n\nconst { withProvider, withContext } = createStyleContext(checkboxCard, {\n  dataAttr: true,\n})\n\nconst CheckboxCardRoot = withProvider(styled(ArkCheckbox.Root))\n\nexport const CheckboxCardTitle = withContext(styled(ArkCheckbox.Label), 'title')\nexport const CheckboxCardContent = withContext(styled('div'), 'content')\nexport const CheckboxCardDescription = withContext(styled('p'), 'description')\nexport const CheckboxCardImage = withContext(styled(ark.img), 'image')\n\nexport type CheckboxCardTitleProps = ComponentProps<typeof CheckboxCardTitle>\nexport type CheckboxCardContentProps = ComponentProps<typeof CheckboxCardContent>\nexport type CheckboxCardDescriptionProps = ComponentProps<typeof CheckboxCardDescription>\nexport type CheckboxCardImageProps = ComponentProps<typeof CheckboxCardImage>\n\nexport const CheckboxCard = forwardRef<HTMLLabelElement, CheckboxProps>((props, ref) => {\n  const [variantProps, checkboxProps] = checkboxCard.splitVariantProps(props)\n  const [cssProps, localProps] = splitCssProps(checkboxProps)\n  const { children, className, ...rootProps } = localProps\n  const styles = checkboxCard(variantProps)\n\n  return (\n    <CheckboxCardRoot\n      ref={ref}\n      className={cx(styles.root, css(cssProps), className)}\n      {...rootProps}\n      value={rootProps.value as string | undefined}\n    >\n      <ArkCheckbox.Control className={styles.control}>\n        <ArkCheckbox.Indicator>\n          <CheckIcon />\n        </ArkCheckbox.Indicator>\n        <ArkCheckbox.Indicator indeterminate>\n          <MinusIcon />\n        </ArkCheckbox.Indicator>\n      </ArkCheckbox.Control>\n      {children}\n      <ArkCheckbox.HiddenInput />\n    </CheckboxCardRoot>\n  )\n})\n\nCheckboxCard.displayName = 'CheckboxCard'\n"],"mappings":"8SAgBA,GAAM,CAAE,eAAc,eAAgB,EAAA,mBAAmB,EAAA,aAAc,CACrE,SAAU,EACZ,CAAC,EAEK,EAAmB,GAAA,EAAA,EAAA,QAAoB,EAAA,SAAY,IAAI,CAAC,EAEjD,EAAoB,GAAA,EAAA,EAAA,QAAmB,EAAA,SAAY,KAAK,EAAG,OAAO,EAClE,EAAsB,GAAA,EAAA,EAAA,QAAmB,KAAK,EAAG,SAAS,EAC1D,EAA0B,GAAA,EAAA,EAAA,QAAmB,GAAG,EAAG,aAAa,EAChE,EAAoB,GAAA,EAAA,EAAA,QAAmB,EAAA,IAAI,GAAG,EAAG,OAAO,EAOxD,GAAA,EAAA,EAAA,aAA4D,EAAO,IAAQ,CACtF,GAAM,CAAC,EAAc,GAAiB,EAAA,aAAa,kBAAkB,CAAK,EACpE,CAAC,EAAU,IAAA,EAAA,EAAA,eAA4B,CAAa,EACpD,CAAE,WAAU,YAAW,GAAG,GAAc,EACxC,GAAA,EAAA,EAAA,cAAsB,CAAY,EAExC,OACE,EAAA,EAAA,MAAC,EAAD,CACO,MACL,WAAA,EAAA,EAAA,IAAc,EAAO,MAAA,EAAA,EAAA,KAAU,CAAQ,EAAG,CAAS,EACnD,GAAI,EACJ,MAAO,EAAU,eAJnB,EAME,EAAA,EAAA,MAAC,EAAA,SAAY,QAAb,CAAqB,UAAW,EAAO,iBAAvC,EACE,EAAA,EAAA,KAAC,EAAA,SAAY,UAAb,CAAA,UACE,EAAA,EAAA,KAAC,EAAA,UAAD,CAAY,CAAA,CACS,CAAA,GACvB,EAAA,EAAA,KAAC,EAAA,SAAY,UAAb,CAAuB,cAAA,aACrB,EAAA,EAAA,KAAC,EAAA,UAAD,CAAY,CAAA,CACS,CAAA,CACJ,IACpB,GACD,EAAA,EAAA,KAAC,EAAA,SAAY,YAAb,CAA0B,CAAA,CACV,GAEtB,CAAC,EAED,EAAa,YAAc"}
+{"version":3,"file":"CheckboxCard.cjs","names":[],"sources":["../../../src/components/checkbox-card/CheckboxCard.tsx"],"sourcesContent":["import { ark, Checkbox as ArkCheckbox, type CheckboxRootProps } from '@ark-ui/react'\nimport { css, cx } from '@stokelp/styled-system/css'\nimport { splitCssProps, styled } from '@stokelp/styled-system/jsx'\nimport { checkboxCard, type CheckboxCardVariantProps } from '@stokelp/styled-system/recipes'\nimport type { Assign, JsxStyleProps, StyledComponent } from '@stokelp/styled-system/types'\nimport { ComponentProps, forwardRef, type JSX } from 'react'\nimport { createStyleContext } from '~/utils/slots'\nimport { type CheckboxProps } from '~/components/checkbox'\nimport { CheckIcon, MinusIcon } from '~/shared/assets/icons'\n\ntype StyledCheckboxRootProps = Assign<JsxStyleProps, CheckboxRootProps>\n\nexport interface CheckboxCardProps extends Omit<StyledCheckboxRootProps, 'value'>, CheckboxCardVariantProps {\n  value?: string | number\n}\n\nconst { withProvider, withContext } = createStyleContext(checkboxCard, {\n  dataAttr: true,\n})\n\n// See Table.tsx for why we pin the literal tag.\nconst styledTag = <T extends keyof JSX.IntrinsicElements>(tag: T): StyledComponent<T, {}> =>\n  styled(tag) as StyledComponent<T, {}>\n\nconst CheckboxCardRoot = withProvider(styled(ArkCheckbox.Root))\n\nexport const CheckboxCardTitle = withContext(styled(ArkCheckbox.Label), 'title')\nexport const CheckboxCardContent = withContext(styledTag('div'), 'content')\nexport const CheckboxCardDescription = withContext(styledTag('p'), 'description')\nexport const CheckboxCardImage = withContext(styled(ark.img), 'image')\n\nexport type CheckboxCardTitleProps = ComponentProps<typeof CheckboxCardTitle>\nexport type CheckboxCardContentProps = ComponentProps<typeof CheckboxCardContent>\nexport type CheckboxCardDescriptionProps = ComponentProps<typeof CheckboxCardDescription>\nexport type CheckboxCardImageProps = ComponentProps<typeof CheckboxCardImage>\n\nexport const CheckboxCard = forwardRef<HTMLLabelElement, CheckboxProps>((props, ref) => {\n  const [variantProps, checkboxProps] = checkboxCard.splitVariantProps(props)\n  const [cssProps, localProps] = splitCssProps(checkboxProps)\n  const { children, className, ...rootProps } = localProps\n  const styles = checkboxCard(variantProps)\n\n  return (\n    <CheckboxCardRoot\n      ref={ref}\n      className={cx(styles.root, css(cssProps), className)}\n      {...rootProps}\n      value={rootProps.value as string | undefined}\n    >\n      <ArkCheckbox.Control className={styles.control}>\n        <ArkCheckbox.Indicator>\n          <CheckIcon />\n        </ArkCheckbox.Indicator>\n        <ArkCheckbox.Indicator indeterminate>\n          <MinusIcon />\n        </ArkCheckbox.Indicator>\n      </ArkCheckbox.Control>\n      {children}\n      <ArkCheckbox.HiddenInput />\n    </CheckboxCardRoot>\n  )\n})\n\nCheckboxCard.displayName = 'CheckboxCard'\n"],"mappings":"8SAgBA,GAAM,CAAE,eAAc,eAAgB,EAAA,mBAAmB,EAAA,aAAc,CACrE,SAAU,EACZ,CAAC,EAGK,EAAoD,IAAA,EAAA,EAAA,QACjD,CAAG,EAEN,EAAmB,GAAA,EAAA,EAAA,QAAoB,EAAA,SAAY,IAAI,CAAC,EAEjD,EAAoB,GAAA,EAAA,EAAA,QAAmB,EAAA,SAAY,KAAK,EAAG,OAAO,EAClE,EAAsB,EAAY,EAAU,KAAK,EAAG,SAAS,EAC7D,EAA0B,EAAY,EAAU,GAAG,EAAG,aAAa,EACnE,EAAoB,GAAA,EAAA,EAAA,QAAmB,EAAA,IAAI,GAAG,EAAG,OAAO,EAOxD,GAAA,EAAA,EAAA,aAA4D,EAAO,IAAQ,CACtF,GAAM,CAAC,EAAc,GAAiB,EAAA,aAAa,kBAAkB,CAAK,EACpE,CAAC,EAAU,IAAA,EAAA,EAAA,eAA4B,CAAa,EACpD,CAAE,WAAU,YAAW,GAAG,GAAc,EACxC,GAAA,EAAA,EAAA,cAAsB,CAAY,EAExC,OACE,EAAA,EAAA,MAAC,EAAD,CACO,MACL,WAAA,EAAA,EAAA,IAAc,EAAO,MAAA,EAAA,EAAA,KAAU,CAAQ,EAAG,CAAS,EACnD,GAAI,EACJ,MAAO,EAAU,eAJnB,EAME,EAAA,EAAA,MAAC,EAAA,SAAY,QAAb,CAAqB,UAAW,EAAO,iBAAvC,EACE,EAAA,EAAA,KAAC,EAAA,SAAY,UAAb,CAAA,UACE,EAAA,EAAA,KAAC,EAAA,UAAD,CAAY,CAAA,CACS,CAAA,GACvB,EAAA,EAAA,KAAC,EAAA,SAAY,UAAb,CAAuB,cAAA,aACrB,EAAA,EAAA,KAAC,EAAA,UAAD,CAAY,CAAA,CACS,CAAA,CACJ,IACpB,GACD,EAAA,EAAA,KAAC,EAAA,SAAY,YAAb,CAA0B,CAAA,CACV,GAEtB,CAAC,EAED,EAAa,YAAc"}

package/dist/components/checkbox-card/CheckboxCard.d.ts

@@ -7,10 +7,10 @@ type StyledCheckboxRootProps = Assign<JsxStyleProps, CheckboxRootProps>;
 export interface CheckboxCardProps extends Omit<StyledCheckboxRootProps, 'value'>, CheckboxCardVariantProps {
     value?: string | number;
 }
-export declare const CheckboxCardTitle: StyledComponent<ForwardRefExoticComponent<ArkCheckbox.LabelProps & RefAttributes<HTMLSpanElement>>, {}>;
-export declare const CheckboxCardContent: StyledComponent<string, {}>;
-export declare const CheckboxCardDescription: StyledComponent<string, {}>;
-export declare const CheckboxCardImage: StyledComponent<ForwardRefExoticComponent< ClassAttributes<HTMLImageElement> & ImgHTMLAttributes<HTMLImageElement> & PolymorphicProps>, {}>;
+export declare const CheckboxCardTitle: StyledComponent< ForwardRefExoticComponent<ArkCheckbox.LabelProps & RefAttributes<HTMLSpanElement>>, {}>;
+export declare const CheckboxCardContent: StyledComponent<"div", {}>;
+export declare const CheckboxCardDescription: StyledComponent<"p", {}>;
+export declare const CheckboxCardImage: StyledComponent< ForwardRefExoticComponent< ClassAttributes<HTMLImageElement> & ImgHTMLAttributes<HTMLImageElement> & PolymorphicProps>, {}>;
 export type CheckboxCardTitleProps = ComponentProps<typeof CheckboxCardTitle>;
 export type CheckboxCardContentProps = ComponentProps<typeof CheckboxCardContent>;
 export type CheckboxCardDescriptionProps = ComponentProps<typeof CheckboxCardDescription>;

package/dist/components/checkbox-card/CheckboxCard.js

@@ -8,9 +8,9 @@ import { forwardRef as c } from "react";
 import { jsx as l, jsxs as u } from "react/jsx-runtime";
 import { css as d, cx as f } from "@stokelp/styled-system/css";
 //#region src/components/checkbox-card/CheckboxCard.tsx
-var { withProvider: p, withContext: m } = e(s, { dataAttr: !0 }), h = p(o(r.Root)), g = m(o(r.Label), "title"), _ = m(o("div"), "content"), v = m(o("p"), "description"), y = m(o(i.img), "image"), b = c((e, i) => {
-	let [o, c] = s.splitVariantProps(e), [p, m] = a(c), { children: g, className: _, ...v } = m, y = s(o);
-	return /* @__PURE__ */ u(h, {
+var { withProvider: p, withContext: m } = e(s, { dataAttr: !0 }), h = (e) => o(e), g = p(o(r.Root)), _ = m(o(r.Label), "title"), v = m(h("div"), "content"), y = m(h("p"), "description"), b = m(o(i.img), "image"), x = c((e, i) => {
+	let [o, c] = s.splitVariantProps(e), [p, m] = a(c), { children: h, className: _, ...v } = m, y = s(o);
+	return /* @__PURE__ */ u(g, {
 		ref: i,
 		className: f(y.root, d(p), _),
 		...v,
@@ -23,13 +23,13 @@ var { withProvider: p, withContext: m } = e(s, { dataAttr: !0 }), h = p(o(r.Root
 					children: /* @__PURE__ */ l(n, {})
 				})]
 			}),
-			g,
+			h,
 			/* @__PURE__ */ l(r.HiddenInput, {})
 		]
 	});
 });
-b.displayName = "CheckboxCard";
+x.displayName = "CheckboxCard";
 //#endregion
-export { b as CheckboxCard, _ as CheckboxCardContent, v as CheckboxCardDescription, y as CheckboxCardImage, g as CheckboxCardTitle };
+export { x as CheckboxCard, v as CheckboxCardContent, y as CheckboxCardDescription, b as CheckboxCardImage, _ as CheckboxCardTitle };
 
 //# sourceMappingURL=CheckboxCard.js.map

package/dist/components/checkbox-card/CheckboxCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxCard.js","names":[],"sources":["../../../src/components/checkbox-card/CheckboxCard.tsx"],"sourcesContent":["import { ark, Checkbox as ArkCheckbox, type CheckboxRootProps } from '@ark-ui/react'\nimport { css, cx } from '@stokelp/styled-system/css'\nimport { splitCssProps, styled } from '@stokelp/styled-system/jsx'\nimport { checkboxCard, type CheckboxCardVariantProps } from '@stokelp/styled-system/recipes'\nimport type { Assign, JsxStyleProps } from '@stokelp/styled-system/types'\nimport { ComponentProps, forwardRef } from 'react'\nimport { createStyleContext } from '~/utils/slots'\nimport { type CheckboxProps } from '~/components/checkbox'\nimport { CheckIcon, MinusIcon } from '~/shared/assets/icons'\n\ntype StyledCheckboxRootProps = Assign<JsxStyleProps, CheckboxRootProps>\n\nexport interface CheckboxCardProps extends Omit<StyledCheckboxRootProps, 'value'>, CheckboxCardVariantProps {\n  value?: string | number\n}\n\nconst { withProvider, withContext } = createStyleContext(checkboxCard, {\n  dataAttr: true,\n})\n\nconst CheckboxCardRoot = withProvider(styled(ArkCheckbox.Root))\n\nexport const CheckboxCardTitle = withContext(styled(ArkCheckbox.Label), 'title')\nexport const CheckboxCardContent = withContext(styled('div'), 'content')\nexport const CheckboxCardDescription = withContext(styled('p'), 'description')\nexport const CheckboxCardImage = withContext(styled(ark.img), 'image')\n\nexport type CheckboxCardTitleProps = ComponentProps<typeof CheckboxCardTitle>\nexport type CheckboxCardContentProps = ComponentProps<typeof CheckboxCardContent>\nexport type CheckboxCardDescriptionProps = ComponentProps<typeof CheckboxCardDescription>\nexport type CheckboxCardImageProps = ComponentProps<typeof CheckboxCardImage>\n\nexport const CheckboxCard = forwardRef<HTMLLabelElement, CheckboxProps>((props, ref) => {\n  const [variantProps, checkboxProps] = checkboxCard.splitVariantProps(props)\n  const [cssProps, localProps] = splitCssProps(checkboxProps)\n  const { children, className, ...rootProps } = localProps\n  const styles = checkboxCard(variantProps)\n\n  return (\n    <CheckboxCardRoot\n      ref={ref}\n      className={cx(styles.root, css(cssProps), className)}\n      {...rootProps}\n      value={rootProps.value as string | undefined}\n    >\n      <ArkCheckbox.Control className={styles.control}>\n        <ArkCheckbox.Indicator>\n          <CheckIcon />\n        </ArkCheckbox.Indicator>\n        <ArkCheckbox.Indicator indeterminate>\n          <MinusIcon />\n        </ArkCheckbox.Indicator>\n      </ArkCheckbox.Control>\n      {children}\n      <ArkCheckbox.HiddenInput />\n    </CheckboxCardRoot>\n  )\n})\n\nCheckboxCard.displayName = 'CheckboxCard'\n"],"mappings":";;;;;;;;;;AAgBA,IAAM,EAAE,iBAAc,mBAAgB,EAAmB,GAAc,EACrE,UAAU,GACZ,CAAC,GAEK,IAAmB,EAAa,EAAO,EAAY,IAAI,CAAC,GAEjD,IAAoB,EAAY,EAAO,EAAY,KAAK,GAAG,OAAO,GAClE,IAAsB,EAAY,EAAO,KAAK,GAAG,SAAS,GAC1D,IAA0B,EAAY,EAAO,GAAG,GAAG,aAAa,GAChE,IAAoB,EAAY,EAAO,EAAI,GAAG,GAAG,OAAO,GAOxD,IAAe,GAA6C,GAAO,MAAQ;CACtF,IAAM,CAAC,GAAc,KAAiB,EAAa,kBAAkB,CAAK,GACpE,CAAC,GAAU,KAAc,EAAc,CAAa,GACpD,EAAE,aAAU,cAAW,GAAG,MAAc,GACxC,IAAS,EAAa,CAAY;CAExC,OACE,kBAAC,GAAD;EACO;EACL,WAAW,EAAG,EAAO,MAAM,EAAI,CAAQ,GAAG,CAAS;EACnD,GAAI;EACJ,OAAO,EAAU;YAJnB;GAME,kBAAC,EAAY,SAAb;IAAqB,WAAW,EAAO;cAAvC,CACE,kBAAC,EAAY,WAAb,EAAA,UACE,kBAAC,GAAD,CAAY,CAAA,EACS,CAAA,GACvB,kBAAC,EAAY,WAAb;KAAuB,eAAA;eACrB,kBAAC,GAAD,CAAY,CAAA;IACS,CAAA,CACJ;;GACpB;GACD,kBAAC,EAAY,aAAb,CAA0B,CAAA;EACV;;AAEtB,CAAC;AAED,EAAa,cAAc"}
+{"version":3,"file":"CheckboxCard.js","names":[],"sources":["../../../src/components/checkbox-card/CheckboxCard.tsx"],"sourcesContent":["import { ark, Checkbox as ArkCheckbox, type CheckboxRootProps } from '@ark-ui/react'\nimport { css, cx } from '@stokelp/styled-system/css'\nimport { splitCssProps, styled } from '@stokelp/styled-system/jsx'\nimport { checkboxCard, type CheckboxCardVariantProps } from '@stokelp/styled-system/recipes'\nimport type { Assign, JsxStyleProps, StyledComponent } from '@stokelp/styled-system/types'\nimport { ComponentProps, forwardRef, type JSX } from 'react'\nimport { createStyleContext } from '~/utils/slots'\nimport { type CheckboxProps } from '~/components/checkbox'\nimport { CheckIcon, MinusIcon } from '~/shared/assets/icons'\n\ntype StyledCheckboxRootProps = Assign<JsxStyleProps, CheckboxRootProps>\n\nexport interface CheckboxCardProps extends Omit<StyledCheckboxRootProps, 'value'>, CheckboxCardVariantProps {\n  value?: string | number\n}\n\nconst { withProvider, withContext } = createStyleContext(checkboxCard, {\n  dataAttr: true,\n})\n\n// See Table.tsx for why we pin the literal tag.\nconst styledTag = <T extends keyof JSX.IntrinsicElements>(tag: T): StyledComponent<T, {}> =>\n  styled(tag) as StyledComponent<T, {}>\n\nconst CheckboxCardRoot = withProvider(styled(ArkCheckbox.Root))\n\nexport const CheckboxCardTitle = withContext(styled(ArkCheckbox.Label), 'title')\nexport const CheckboxCardContent = withContext(styledTag('div'), 'content')\nexport const CheckboxCardDescription = withContext(styledTag('p'), 'description')\nexport const CheckboxCardImage = withContext(styled(ark.img), 'image')\n\nexport type CheckboxCardTitleProps = ComponentProps<typeof CheckboxCardTitle>\nexport type CheckboxCardContentProps = ComponentProps<typeof CheckboxCardContent>\nexport type CheckboxCardDescriptionProps = ComponentProps<typeof CheckboxCardDescription>\nexport type CheckboxCardImageProps = ComponentProps<typeof CheckboxCardImage>\n\nexport const CheckboxCard = forwardRef<HTMLLabelElement, CheckboxProps>((props, ref) => {\n  const [variantProps, checkboxProps] = checkboxCard.splitVariantProps(props)\n  const [cssProps, localProps] = splitCssProps(checkboxProps)\n  const { children, className, ...rootProps } = localProps\n  const styles = checkboxCard(variantProps)\n\n  return (\n    <CheckboxCardRoot\n      ref={ref}\n      className={cx(styles.root, css(cssProps), className)}\n      {...rootProps}\n      value={rootProps.value as string | undefined}\n    >\n      <ArkCheckbox.Control className={styles.control}>\n        <ArkCheckbox.Indicator>\n          <CheckIcon />\n        </ArkCheckbox.Indicator>\n        <ArkCheckbox.Indicator indeterminate>\n          <MinusIcon />\n        </ArkCheckbox.Indicator>\n      </ArkCheckbox.Control>\n      {children}\n      <ArkCheckbox.HiddenInput />\n    </CheckboxCardRoot>\n  )\n})\n\nCheckboxCard.displayName = 'CheckboxCard'\n"],"mappings":";;;;;;;;;;AAgBA,IAAM,EAAE,iBAAc,mBAAgB,EAAmB,GAAc,EACrE,UAAU,GACZ,CAAC,GAGK,KAAoD,MACxD,EAAO,CAAG,GAEN,IAAmB,EAAa,EAAO,EAAY,IAAI,CAAC,GAEjD,IAAoB,EAAY,EAAO,EAAY,KAAK,GAAG,OAAO,GAClE,IAAsB,EAAY,EAAU,KAAK,GAAG,SAAS,GAC7D,IAA0B,EAAY,EAAU,GAAG,GAAG,aAAa,GACnE,IAAoB,EAAY,EAAO,EAAI,GAAG,GAAG,OAAO,GAOxD,IAAe,GAA6C,GAAO,MAAQ;CACtF,IAAM,CAAC,GAAc,KAAiB,EAAa,kBAAkB,CAAK,GACpE,CAAC,GAAU,KAAc,EAAc,CAAa,GACpD,EAAE,aAAU,cAAW,GAAG,MAAc,GACxC,IAAS,EAAa,CAAY;CAExC,OACE,kBAAC,GAAD;EACO;EACL,WAAW,EAAG,EAAO,MAAM,EAAI,CAAQ,GAAG,CAAS;EACnD,GAAI;EACJ,OAAO,EAAU;YAJnB;GAME,kBAAC,EAAY,SAAb;IAAqB,WAAW,EAAO;cAAvC,CACE,kBAAC,EAAY,WAAb,EAAA,UACE,kBAAC,GAAD,CAAY,CAAA,EACS,CAAA,GACvB,kBAAC,EAAY,WAAb;KAAuB,eAAA;eACrB,kBAAC,GAAD,CAAY,CAAA;IACS,CAAA,CACJ;;GACpB;GACD,kBAAC,EAAY,aAAb,CAA0B,CAAA;EACV;;AAEtB,CAAC;AAED,EAAa,cAAc"}

package/dist/components/drawer/Drawer.cjs

@@ -1,2 +1,2 @@
-"use client";const e=require("../../utils/slots.cjs"),t=require("../icon-button/IconButton.cjs");let n=require("@ark-ui/react"),r=require("@stokelp/styled-system/jsx"),i=require("@stokelp/styled-system/recipes"),a=require("react"),o=require("react/jsx-runtime"),s=require("usehooks-ts"),c=require("@stokelp/styled-system/tokens");var{withProvider:l,withContext:u}=e.createStyleContext(i.drawer),d=l(n.Dialog.Root,void 0,{defaultProps:{unmountOnExit:!0,lazyMount:!0}}),f=u((0,r.styled)(n.ark.main),`body`),p=u((0,r.styled)(n.Dialog.CloseTrigger),`closeTrigger`),m=u((0,r.styled)(n.ark.footer),`footer`),h=(0,a.forwardRef)(({children:e,showCloseTrigger:r=!0,...i},a)=>(0,o.jsxs)(n.ark.header,{...i,ref:a,children:[e,r&&(0,o.jsx)(p,{asChild:!0,children:(0,o.jsx)(t.IconButton,{ml:`auto`,"aria-label":`close`,variant:`tertiary`,children:(0,o.jsx)(`svg`,{width:`16`,height:`16`,viewBox:`0 0 16 16`,fill:`none`,xmlns:`http://www.w3.org/2000/svg`,children:(0,o.jsx)(`path`,{fillRule:`evenodd`,clipRule:`evenodd`,d:`M3.64645 3.64645C3.84171 3.45118 4.15829 3.45118 4.35355 3.64645L8 7.29289L11.6464 3.64645C11.8417 3.45118 12.1583 3.45118 12.3536 3.64645C12.5488 3.84171 12.5488 4.15829 12.3536 4.35355L8.70711 8L12.3536 11.6464C12.5488 11.8417 12.5488 12.1583 12.3536 12.3536C12.1583 12.5488 11.8417 12.5488 11.6464 12.3536L8 8.70711L4.35355 12.3536C4.15829 12.5488 3.84171 12.5488 3.64645 12.3536C3.45118 12.1583 3.45118 11.8417 3.64645 11.6464L7.29289 8L3.64645 4.35355C3.45118 4.15829 3.45118 3.84171 3.64645 3.64645Z`,fill:`currentColor`})})})})]}));h.displayName=`DrawerHeader`;var g=u(h,`header`),_=u((0,r.styled)(n.Dialog.Title),`title`),v=u((0,r.styled)(n.Dialog.Trigger),`trigger`),y=u((0,r.styled)(n.Dialog.Positioner),`positioner`),b=u((0,r.styled)(n.Dialog.Backdrop),`backdrop`),x=(0,a.forwardRef)(({children:e,...t},r)=>{let i=(0,s.useMediaQuery)(`(max-width: ${(0,c.token)(`breakpoints.md`)})`,{defaultValue:!1}),{open:l,getContentProps:u}=(0,n.useDialogContext)();return(0,a.useLayoutEffect)(()=>{if(!l)return;let{id:e}=u();if(!e)return;let t=document.getElementById(e);if(t){let e=t.querySelector(`footer`);e&&(i?t.style.setProperty(`--footer-height`,`${Math.ceil(e.clientHeight)}px`):t.style.setProperty(`--footer-height`,`70px`))}},[l,i]),(0,a.useEffect)(()=>{if(process.env.NODE_ENV===`production`||l)return;let e=window.setTimeout(()=>{let e=document.body;document.querySelector(`[data-scope="dialog"][data-state="open"]`)||(e.style.pointerEvents===`none`&&(e.style.pointerEvents=``),e.hasAttribute(`data-inert`)&&e.removeAttribute(`data-inert`),e.getAttribute(`style`)===``&&e.removeAttribute(`style`))},350);return()=>window.clearTimeout(e)},[l]),(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(b,{}),(0,o.jsx)(y,{children:(0,o.jsx)(n.Dialog.Content,{ref:r,...t,children:e})})]})});x.displayName=n.Dialog.Content.displayName;var S=u((0,r.styled)(x),`content`),C=n.Dialog.Context;exports.Drawer=d,exports.DrawerBody=f,exports.DrawerCloseTrigger=p,exports.DrawerContent=S,exports.DrawerContext=C,exports.DrawerFooter=m,exports.DrawerHeader=g,exports.DrawerTitle=_,exports.DrawerTrigger=v;
+"use client";const e=require("../../utils/slots.cjs"),t=require("../icon-button/IconButton.cjs");let n=require("@ark-ui/react"),r=require("@stokelp/styled-system/jsx"),i=require("@stokelp/styled-system/recipes"),a=require("react"),o=require("react/jsx-runtime"),s=require("usehooks-ts"),c=require("@stokelp/styled-system/tokens");var{withProvider:l,withContext:u}=e.createStyleContext(i.drawer),d=l(n.Dialog.Root,void 0,{defaultProps:{unmountOnExit:!0,lazyMount:!0}}),f=u((0,r.styled)(n.ark.main),`body`),p=u((0,r.styled)(n.Dialog.CloseTrigger),`closeTrigger`),m=u((0,r.styled)(n.ark.footer),`footer`),h=(0,a.forwardRef)(({children:e,showCloseTrigger:r=!0,...i},a)=>(0,o.jsxs)(n.ark.header,{...i,ref:a,children:[e,r&&(0,o.jsx)(p,{asChild:!0,children:(0,o.jsx)(t.IconButton,{ml:`auto`,"aria-label":`close`,variant:`tertiary`,children:(0,o.jsx)(`svg`,{width:`16`,height:`16`,viewBox:`0 0 16 16`,fill:`none`,xmlns:`http://www.w3.org/2000/svg`,children:(0,o.jsx)(`path`,{fillRule:`evenodd`,clipRule:`evenodd`,d:`M3.64645 3.64645C3.84171 3.45118 4.15829 3.45118 4.35355 3.64645L8 7.29289L11.6464 3.64645C11.8417 3.45118 12.1583 3.45118 12.3536 3.64645C12.5488 3.84171 12.5488 4.15829 12.3536 4.35355L8.70711 8L12.3536 11.6464C12.5488 11.8417 12.5488 12.1583 12.3536 12.3536C12.1583 12.5488 11.8417 12.5488 11.6464 12.3536L8 8.70711L4.35355 12.3536C4.15829 12.5488 3.84171 12.5488 3.64645 12.3536C3.45118 12.1583 3.45118 11.8417 3.64645 11.6464L7.29289 8L3.64645 4.35355C3.45118 4.15829 3.45118 3.84171 3.64645 3.64645Z`,fill:`currentColor`})})})})]}));h.displayName=`DrawerHeader`;var g=u(h,`header`),_=u((0,r.styled)(n.Dialog.Title),`title`),v=u((0,r.styled)(n.Dialog.Trigger),`trigger`),y=u((0,r.styled)(n.Dialog.Positioner),`positioner`),b=u((0,r.styled)(n.Dialog.Backdrop),`backdrop`),x=(0,a.forwardRef)(({children:e,...t},r)=>{let i=(0,s.useMediaQuery)(`(max-width: ${(0,c.token)(`breakpoints.md`)})`,{defaultValue:!1}),{open:l,getContentProps:u}=(0,n.useDialogContext)();return(0,a.useLayoutEffect)(()=>{if(!l)return;let{id:e}=u();if(!e)return;let t=document.getElementById(e);if(t){let e=t.querySelector(`footer`);e&&(i?t.style.setProperty(`--footer-height`,`${Math.ceil(e.clientHeight)}px`):t.style.setProperty(`--footer-height`,`70px`))}},[l,i]),(0,a.useEffect)(()=>{process.env.NODE_ENV!==`production`&&(l||window.setTimeout(()=>{let e=document.body;document.querySelector(`[data-scope="dialog"][data-state="open"]`)||(e.style.pointerEvents===`none`&&(e.style.pointerEvents=``),e.hasAttribute(`data-inert`)&&e.removeAttribute(`data-inert`),e.getAttribute(`style`)===``&&e.removeAttribute(`style`))},350))},[l]),(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(b,{}),(0,o.jsx)(y,{children:(0,o.jsx)(n.Dialog.Content,{ref:r,...t,children:e})})]})});x.displayName=n.Dialog.Content.displayName;var S=u((0,r.styled)(x),`content`),C=n.Dialog.Context;exports.Drawer=d,exports.DrawerBody=f,exports.DrawerCloseTrigger=p,exports.DrawerContent=S,exports.DrawerContext=C,exports.DrawerFooter=m,exports.DrawerHeader=g,exports.DrawerTitle=_,exports.DrawerTrigger=v;
 //# sourceMappingURL=Drawer.cjs.map

package/dist/components/drawer/Drawer.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.cjs","names":[],"sources":["../../../src/components/drawer/Drawer.tsx"],"sourcesContent":["import { ark, Dialog as ArkDrawer, useDialogContext } from '@ark-ui/react'\nimport { useMediaQuery } from 'usehooks-ts'\nimport { styled } from '@stokelp/styled-system/jsx'\nimport { drawer } from '@stokelp/styled-system/recipes'\nimport { token } from '@stokelp/styled-system/tokens'\nimport { ComponentProps, ComponentPropsWithoutRef, ElementRef, forwardRef, useEffect, useLayoutEffect } from 'react'\n\nimport { createStyleContext } from '~/utils/slots'\nimport { IconButton } from '~/components/icon-button'\n\nconst { withProvider, withContext } = createStyleContext(drawer)\n\nexport const Drawer = withProvider(ArkDrawer.Root, undefined, {\n  defaultProps: {\n    unmountOnExit: true,\n    lazyMount: true,\n  },\n})\nexport const DrawerBody = withContext(styled(ark.main), 'body')\nexport const DrawerCloseTrigger = withContext(styled(ArkDrawer.CloseTrigger), 'closeTrigger')\nexport const DrawerFooter = withContext(styled(ark.footer), 'footer')\n\ntype HeaderProps = ComponentPropsWithoutRef<typeof ark.header> & {\n  showCloseTrigger?: boolean\n}\n\nconst Header = forwardRef<ElementRef<typeof ark.header>, HeaderProps>(\n  ({ children, showCloseTrigger = true, ...props }, ref) => (\n    <ark.header {...props} ref={ref}>\n      {children}\n      {showCloseTrigger && (\n        <DrawerCloseTrigger asChild>\n          <IconButton ml=\"auto\" aria-label=\"close\" variant=\"tertiary\">\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                fillRule=\"evenodd\"\n                clipRule=\"evenodd\"\n                d=\"M3.64645 3.64645C3.84171 3.45118 4.15829 3.45118 4.35355 3.64645L8 7.29289L11.6464 3.64645C11.8417 3.45118 12.1583 3.45118 12.3536 3.64645C12.5488 3.84171 12.5488 4.15829 12.3536 4.35355L8.70711 8L12.3536 11.6464C12.5488 11.8417 12.5488 12.1583 12.3536 12.3536C12.1583 12.5488 11.8417 12.5488 11.6464 12.3536L8 8.70711L4.35355 12.3536C4.15829 12.5488 3.84171 12.5488 3.64645 12.3536C3.45118 12.1583 3.45118 11.8417 3.64645 11.6464L7.29289 8L3.64645 4.35355C3.45118 4.15829 3.45118 3.84171 3.64645 3.64645Z\"\n                fill=\"currentColor\"\n              />\n            </svg>\n          </IconButton>\n        </DrawerCloseTrigger>\n      )}\n    </ark.header>\n  ),\n)\nHeader.displayName = 'DrawerHeader'\n\nexport const DrawerHeader = withContext(Header, 'header')\nexport const DrawerTitle = withContext(styled(ArkDrawer.Title), 'title')\nexport const DrawerTrigger = withContext(styled(ArkDrawer.Trigger), 'trigger')\n\nconst DrawerPositioner = withContext(styled(ArkDrawer.Positioner), 'positioner')\nconst DrawerBackdrop = withContext(styled(ArkDrawer.Backdrop), 'backdrop')\n\nconst Content = forwardRef<ElementRef<typeof ArkDrawer.Content>, ComponentPropsWithoutRef<typeof ArkDrawer.Content>>(\n  ({ children, ...props }, ref) => {\n    const isMobile = useMediaQuery(`(max-width: ${token('breakpoints.md')})`, {\n      defaultValue: false,\n    })\n    const { open, getContentProps } = useDialogContext()\n\n    useLayoutEffect(() => {\n      if (!open) return\n      const { id } = getContentProps()\n      if (!id) return\n      const $content = document.getElementById(id)\n      if ($content) {\n        const $footer = $content.querySelector('footer')\n        if ($footer) {\n          if (isMobile) {\n            $content.style.setProperty('--footer-height', `${Math.ceil($footer.clientHeight)}px`)\n          } else {\n            $content.style.setProperty('--footer-height', `70px`)\n          }\n        }\n      }\n    }, [open, isMobile])\n\n    // Workaround: in React StrictMode (Next.js dev), @zag-js/dismissable's\n    // disablePointerEventsOutside cleanup can leave `<body>` with\n    // `pointer-events: none` / `data-inert`, freezing the page after close.\n    // Gated inside the effect body so consumer bundlers DCE it in production.\n    useEffect(() => {\n      if (process.env.NODE_ENV === 'production') return\n      if (open) return\n      const id = window.setTimeout(() => {\n        const body = document.body\n        const stillOpen = document.querySelector('[data-scope=\"dialog\"][data-state=\"open\"]')\n        if (stillOpen) return\n        if (body.style.pointerEvents === 'none') body.style.pointerEvents = ''\n        if (body.hasAttribute('data-inert')) body.removeAttribute('data-inert')\n        if (body.getAttribute('style') === '') body.removeAttribute('style')\n      }, 350)\n      return () => window.clearTimeout(id)\n    }, [open])\n\n    return (\n      <>\n        <DrawerBackdrop />\n        <DrawerPositioner>\n          <ArkDrawer.Content ref={ref} {...props}>\n            {children}\n          </ArkDrawer.Content>\n        </DrawerPositioner>\n      </>\n    )\n  },\n)\nContent.displayName = ArkDrawer.Content.displayName\n\nexport const DrawerContent = withContext(styled(Content), 'content')\nexport const DrawerContext = ArkDrawer.Context\n\nexport interface DrawerProps extends ComponentProps<typeof Drawer> {}\nexport interface DrawerBackdropProps extends ComponentProps<typeof DrawerBackdrop> {}\nexport interface DrawerBodyProps extends ComponentProps<typeof DrawerBody> {}\nexport interface DrawerCloseTriggerProps extends ComponentProps<typeof DrawerCloseTrigger> {}\nexport interface DrawerContentProps extends ComponentProps<typeof DrawerContent> {}\nexport interface DrawerFooterProps extends ComponentProps<typeof DrawerFooter> {}\nexport interface DrawerHeaderProps extends ComponentProps<typeof DrawerHeader> {}\nexport interface DrawerPositionerProps extends ComponentProps<typeof DrawerPositioner> {}\nexport interface DrawerTitleProps extends ComponentProps<typeof DrawerTitle> {}\nexport interface DrawerTriggerProps extends ComponentProps<typeof DrawerTrigger> {}\nexport interface DrawerContextProps extends ComponentProps<typeof DrawerContext> {}\n"],"mappings":"0UAUA,GAAM,CAAE,eAAc,eAAgB,EAAA,mBAAmB,EAAA,MAAM,EAElD,EAAS,EAAa,EAAA,OAAU,KAAM,IAAA,GAAW,CAC5D,aAAc,CACZ,cAAe,GACf,UAAW,EACb,CACF,CAAC,EACY,EAAa,GAAA,EAAA,EAAA,QAAmB,EAAA,IAAI,IAAI,EAAG,MAAM,EACjD,EAAqB,GAAA,EAAA,EAAA,QAAmB,EAAA,OAAU,YAAY,EAAG,cAAc,EAC/E,EAAe,GAAA,EAAA,EAAA,QAAmB,EAAA,IAAI,MAAM,EAAG,QAAQ,EAM9D,GAAA,EAAA,EAAA,aACH,CAAE,WAAU,mBAAmB,GAAM,GAAG,GAAS,KAChD,EAAA,EAAA,MAAC,EAAA,IAAI,OAAL,CAAY,GAAI,EAAY,eAA5B,CACG,EACA,IACC,EAAA,EAAA,KAAC,EAAD,CAAoB,QAAA,aAClB,EAAA,EAAA,KAAC,EAAA,WAAD,CAAY,GAAG,OAAO,aAAW,QAAQ,QAAQ,qBAC/C,EAAA,EAAA,KAAC,MAAD,CAAK,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OAAO,MAAM,uCAChE,EAAA,EAAA,KAAC,OAAD,CACE,SAAS,UACT,SAAS,UACT,EAAE,4fACF,KAAK,cACN,CAAA,CACE,CAAA,CACK,CAAA,CACM,CAAA,CAEZ,GAEhB,EACA,EAAO,YAAc,eAErB,IAAa,EAAe,EAAY,EAAQ,QAAQ,EAC3C,EAAc,GAAA,EAAA,EAAA,QAAmB,EAAA,OAAU,KAAK,EAAG,OAAO,EAC1D,EAAgB,GAAA,EAAA,EAAA,QAAmB,EAAA,OAAU,OAAO,EAAG,SAAS,EAEvE,EAAmB,GAAA,EAAA,EAAA,QAAmB,EAAA,OAAU,UAAU,EAAG,YAAY,EACzE,EAAiB,GAAA,EAAA,EAAA,QAAmB,EAAA,OAAU,QAAQ,EAAG,UAAU,EAEnE,GAAA,EAAA,EAAA,aACH,CAAE,WAAU,GAAG,GAAS,IAAQ,CAC/B,IAAM,GAAA,EAAA,EAAA,eAAyB,gBAAA,EAAA,EAAA,OAAqB,gBAAgB,EAAE,GAAI,CACxE,aAAc,EAChB,CAAC,EACK,CAAE,OAAM,oBAAA,EAAA,EAAA,kBAAqC,EAqCnD,OAnCA,EAAA,EAAA,qBAAsB,CACpB,GAAI,CAAC,EAAM,OACX,GAAM,CAAE,MAAO,EAAgB,EAC/B,GAAI,CAAC,EAAI,OACT,IAAM,EAAW,SAAS,eAAe,CAAE,EAC3C,GAAI,EAAU,CACZ,IAAM,EAAU,EAAS,cAAc,QAAQ,EAC3C,IACE,EACF,EAAS,MAAM,YAAY,kBAAmB,GAAG,KAAK,KAAK,EAAQ,YAAY,EAAE,GAAG,EAEpF,EAAS,MAAM,YAAY,kBAAmB,MAAM,EAG1D,CACF,EAAG,CAAC,EAAM,CAAQ,CAAC,GAMnB,EAAA,EAAA,eAAgB,CAEd,GADA,QAAA,IAAA,WAA6B,cACzB,EAAM,OACV,IAAM,EAAK,OAAO,eAAiB,CACjC,IAAM,EAAO,SAAS,KACJ,SAAS,cAAc,0CACrC,IACA,EAAK,MAAM,gBAAkB,SAAQ,EAAK,MAAM,cAAgB,IAChE,EAAK,aAAa,YAAY,GAAG,EAAK,gBAAgB,YAAY,EAClE,EAAK,aAAa,OAAO,IAAM,IAAI,EAAK,gBAAgB,OAAO,EACrE,EAAG,GAAG,EACN,UAAa,OAAO,aAAa,CAAE,CACrC,EAAG,CAAC,CAAI,CAAC,GAGP,EAAA,EAAA,MAAA,EAAA,SAAA,CAAA,SAAA,EACE,EAAA,EAAA,KAAC,EAAD,CAAiB,CAAA,GACjB,EAAA,EAAA,KAAC,EAAD,CAAA,UACE,EAAA,EAAA,KAAC,EAAA,OAAU,QAAX,CAAwB,MAAK,GAAI,EAC9B,UACgB,CAAA,CACH,CAAA,CAClB,CAAA,CAAA,CAEN,CACF,EACA,EAAQ,YAAc,EAAA,OAAU,QAAQ,YAExC,IAAa,EAAgB,GAAA,EAAA,EAAA,QAAmB,CAAO,EAAG,SAAS,EACtD,EAAgB,EAAA,OAAU"}
+{"version":3,"file":"Drawer.cjs","names":[],"sources":["../../../src/components/drawer/Drawer.tsx"],"sourcesContent":["import { ark, Dialog as ArkDrawer, useDialogContext } from '@ark-ui/react'\nimport { useMediaQuery } from 'usehooks-ts'\nimport { styled } from '@stokelp/styled-system/jsx'\nimport { drawer } from '@stokelp/styled-system/recipes'\nimport { token } from '@stokelp/styled-system/tokens'\nimport { ComponentProps, ComponentPropsWithoutRef, ElementRef, forwardRef, useEffect, useLayoutEffect } from 'react'\n\nimport { createStyleContext } from '~/utils/slots'\nimport { IconButton } from '~/components/icon-button'\n\nconst { withProvider, withContext } = createStyleContext(drawer)\n\nexport const Drawer = withProvider(ArkDrawer.Root, undefined, {\n  defaultProps: {\n    unmountOnExit: true,\n    lazyMount: true,\n  },\n})\nexport const DrawerBody = withContext(styled(ark.main), 'body')\nexport const DrawerCloseTrigger = withContext(styled(ArkDrawer.CloseTrigger), 'closeTrigger')\nexport const DrawerFooter = withContext(styled(ark.footer), 'footer')\n\ntype HeaderProps = ComponentPropsWithoutRef<typeof ark.header> & {\n  showCloseTrigger?: boolean\n}\n\nconst Header = forwardRef<ElementRef<typeof ark.header>, HeaderProps>(\n  ({ children, showCloseTrigger = true, ...props }, ref) => (\n    <ark.header {...props} ref={ref}>\n      {children}\n      {showCloseTrigger && (\n        <DrawerCloseTrigger asChild>\n          <IconButton ml=\"auto\" aria-label=\"close\" variant=\"tertiary\">\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                fillRule=\"evenodd\"\n                clipRule=\"evenodd\"\n                d=\"M3.64645 3.64645C3.84171 3.45118 4.15829 3.45118 4.35355 3.64645L8 7.29289L11.6464 3.64645C11.8417 3.45118 12.1583 3.45118 12.3536 3.64645C12.5488 3.84171 12.5488 4.15829 12.3536 4.35355L8.70711 8L12.3536 11.6464C12.5488 11.8417 12.5488 12.1583 12.3536 12.3536C12.1583 12.5488 11.8417 12.5488 11.6464 12.3536L8 8.70711L4.35355 12.3536C4.15829 12.5488 3.84171 12.5488 3.64645 12.3536C3.45118 12.1583 3.45118 11.8417 3.64645 11.6464L7.29289 8L3.64645 4.35355C3.45118 4.15829 3.45118 3.84171 3.64645 3.64645Z\"\n                fill=\"currentColor\"\n              />\n            </svg>\n          </IconButton>\n        </DrawerCloseTrigger>\n      )}\n    </ark.header>\n  ),\n)\nHeader.displayName = 'DrawerHeader'\n\nexport const DrawerHeader = withContext(Header, 'header')\nexport const DrawerTitle = withContext(styled(ArkDrawer.Title), 'title')\nexport const DrawerTrigger = withContext(styled(ArkDrawer.Trigger), 'trigger')\n\nconst DrawerPositioner = withContext(styled(ArkDrawer.Positioner), 'positioner')\nconst DrawerBackdrop = withContext(styled(ArkDrawer.Backdrop), 'backdrop')\n\nconst Content = forwardRef<ElementRef<typeof ArkDrawer.Content>, ComponentPropsWithoutRef<typeof ArkDrawer.Content>>(\n  ({ children, ...props }, ref) => {\n    const isMobile = useMediaQuery(`(max-width: ${token('breakpoints.md')})`, {\n      defaultValue: false,\n    })\n    const { open, getContentProps } = useDialogContext()\n\n    useLayoutEffect(() => {\n      if (!open) return\n      const { id } = getContentProps()\n      if (!id) return\n      const $content = document.getElementById(id)\n      if ($content) {\n        const $footer = $content.querySelector('footer')\n        if ($footer) {\n          if (isMobile) {\n            $content.style.setProperty('--footer-height', `${Math.ceil($footer.clientHeight)}px`)\n          } else {\n            $content.style.setProperty('--footer-height', `70px`)\n          }\n        }\n      }\n    }, [open, isMobile])\n\n    // Workaround: in React StrictMode (Next.js dev), @zag-js/dismissable's\n    // disablePointerEventsOutside cleanup can leave `<body>` with\n    // `pointer-events: none` / `data-inert`, freezing the page after close.\n    // Gated inside the effect body so consumer bundlers DCE it in production.\n    // The timer is intentionally fire-and-forget — with unmountOnExit, Content\n    // unmounts after the exit animation (~200ms), so a cleanup-bound timer\n    // would be canceled before it fires. The restore is idempotent and the\n    // stillOpen guard prevents it from clobbering a freshly-opened dialog.\n    useEffect(() => {\n      if (process.env.NODE_ENV === 'production') return\n      if (open) return\n      window.setTimeout(() => {\n        const body = document.body\n        const stillOpen = document.querySelector('[data-scope=\"dialog\"][data-state=\"open\"]')\n        if (stillOpen) return\n        if (body.style.pointerEvents === 'none') body.style.pointerEvents = ''\n        if (body.hasAttribute('data-inert')) body.removeAttribute('data-inert')\n        if (body.getAttribute('style') === '') body.removeAttribute('style')\n      }, 350)\n    }, [open])\n\n    return (\n      <>\n        <DrawerBackdrop />\n        <DrawerPositioner>\n          <ArkDrawer.Content ref={ref} {...props}>\n            {children}\n          </ArkDrawer.Content>\n        </DrawerPositioner>\n      </>\n    )\n  },\n)\nContent.displayName = ArkDrawer.Content.displayName\n\nexport const DrawerContent = withContext(styled(Content), 'content')\nexport const DrawerContext = ArkDrawer.Context\n\nexport interface DrawerProps extends ComponentProps<typeof Drawer> {}\nexport interface DrawerBackdropProps extends ComponentProps<typeof DrawerBackdrop> {}\nexport interface DrawerBodyProps extends ComponentProps<typeof DrawerBody> {}\nexport interface DrawerCloseTriggerProps extends ComponentProps<typeof DrawerCloseTrigger> {}\nexport interface DrawerContentProps extends ComponentProps<typeof DrawerContent> {}\nexport interface DrawerFooterProps extends ComponentProps<typeof DrawerFooter> {}\nexport interface DrawerHeaderProps extends ComponentProps<typeof DrawerHeader> {}\nexport interface DrawerPositionerProps extends ComponentProps<typeof DrawerPositioner> {}\nexport interface DrawerTitleProps extends ComponentProps<typeof DrawerTitle> {}\nexport interface DrawerTriggerProps extends ComponentProps<typeof DrawerTrigger> {}\nexport interface DrawerContextProps extends ComponentProps<typeof DrawerContext> {}\n"],"mappings":"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"}

package/dist/components/drawer/Drawer.js

@@ -50,12 +50,10 @@ var S = g(x, "header"), C = g(a(n.Title), "title"), w = g(a(n.Trigger), "trigger
 			e && (a ? t.style.setProperty("--footer-height", `${Math.ceil(e.clientHeight)}px`) : t.style.setProperty("--footer-height", "70px"));
 		}
 	}, [o, a]), c(() => {
-		if (process.env.NODE_ENV === "production" || o) return;
-		let e = window.setTimeout(() => {
+		process.env.NODE_ENV !== "production" && (o || window.setTimeout(() => {
 			let e = document.body;
 			document.querySelector("[data-scope=\"dialog\"][data-state=\"open\"]") || (e.style.pointerEvents === "none" && (e.style.pointerEvents = ""), e.hasAttribute("data-inert") && e.removeAttribute("data-inert"), e.getAttribute("style") === "" && e.removeAttribute("style"));
-		}, 350);
-		return () => window.clearTimeout(e);
+		}, 350));
 	}, [o]), /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ d(E, {}), /* @__PURE__ */ d(T, { children: /* @__PURE__ */ d(n.Content, {
 		ref: r,
 		...t,

package/dist/components/drawer/Drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.js","names":[],"sources":["../../../src/components/drawer/Drawer.tsx"],"sourcesContent":["import { ark, Dialog as ArkDrawer, useDialogContext } from '@ark-ui/react'\nimport { useMediaQuery } from 'usehooks-ts'\nimport { styled } from '@stokelp/styled-system/jsx'\nimport { drawer } from '@stokelp/styled-system/recipes'\nimport { token } from '@stokelp/styled-system/tokens'\nimport { ComponentProps, ComponentPropsWithoutRef, ElementRef, forwardRef, useEffect, useLayoutEffect } from 'react'\n\nimport { createStyleContext } from '~/utils/slots'\nimport { IconButton } from '~/components/icon-button'\n\nconst { withProvider, withContext } = createStyleContext(drawer)\n\nexport const Drawer = withProvider(ArkDrawer.Root, undefined, {\n  defaultProps: {\n    unmountOnExit: true,\n    lazyMount: true,\n  },\n})\nexport const DrawerBody = withContext(styled(ark.main), 'body')\nexport const DrawerCloseTrigger = withContext(styled(ArkDrawer.CloseTrigger), 'closeTrigger')\nexport const DrawerFooter = withContext(styled(ark.footer), 'footer')\n\ntype HeaderProps = ComponentPropsWithoutRef<typeof ark.header> & {\n  showCloseTrigger?: boolean\n}\n\nconst Header = forwardRef<ElementRef<typeof ark.header>, HeaderProps>(\n  ({ children, showCloseTrigger = true, ...props }, ref) => (\n    <ark.header {...props} ref={ref}>\n      {children}\n      {showCloseTrigger && (\n        <DrawerCloseTrigger asChild>\n          <IconButton ml=\"auto\" aria-label=\"close\" variant=\"tertiary\">\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                fillRule=\"evenodd\"\n                clipRule=\"evenodd\"\n                d=\"M3.64645 3.64645C3.84171 3.45118 4.15829 3.45118 4.35355 3.64645L8 7.29289L11.6464 3.64645C11.8417 3.45118 12.1583 3.45118 12.3536 3.64645C12.5488 3.84171 12.5488 4.15829 12.3536 4.35355L8.70711 8L12.3536 11.6464C12.5488 11.8417 12.5488 12.1583 12.3536 12.3536C12.1583 12.5488 11.8417 12.5488 11.6464 12.3536L8 8.70711L4.35355 12.3536C4.15829 12.5488 3.84171 12.5488 3.64645 12.3536C3.45118 12.1583 3.45118 11.8417 3.64645 11.6464L7.29289 8L3.64645 4.35355C3.45118 4.15829 3.45118 3.84171 3.64645 3.64645Z\"\n                fill=\"currentColor\"\n              />\n            </svg>\n          </IconButton>\n        </DrawerCloseTrigger>\n      )}\n    </ark.header>\n  ),\n)\nHeader.displayName = 'DrawerHeader'\n\nexport const DrawerHeader = withContext(Header, 'header')\nexport const DrawerTitle = withContext(styled(ArkDrawer.Title), 'title')\nexport const DrawerTrigger = withContext(styled(ArkDrawer.Trigger), 'trigger')\n\nconst DrawerPositioner = withContext(styled(ArkDrawer.Positioner), 'positioner')\nconst DrawerBackdrop = withContext(styled(ArkDrawer.Backdrop), 'backdrop')\n\nconst Content = forwardRef<ElementRef<typeof ArkDrawer.Content>, ComponentPropsWithoutRef<typeof ArkDrawer.Content>>(\n  ({ children, ...props }, ref) => {\n    const isMobile = useMediaQuery(`(max-width: ${token('breakpoints.md')})`, {\n      defaultValue: false,\n    })\n    const { open, getContentProps } = useDialogContext()\n\n    useLayoutEffect(() => {\n      if (!open) return\n      const { id } = getContentProps()\n      if (!id) return\n      const $content = document.getElementById(id)\n      if ($content) {\n        const $footer = $content.querySelector('footer')\n        if ($footer) {\n          if (isMobile) {\n            $content.style.setProperty('--footer-height', `${Math.ceil($footer.clientHeight)}px`)\n          } else {\n            $content.style.setProperty('--footer-height', `70px`)\n          }\n        }\n      }\n    }, [open, isMobile])\n\n    // Workaround: in React StrictMode (Next.js dev), @zag-js/dismissable's\n    // disablePointerEventsOutside cleanup can leave `<body>` with\n    // `pointer-events: none` / `data-inert`, freezing the page after close.\n    // Gated inside the effect body so consumer bundlers DCE it in production.\n    useEffect(() => {\n      if (process.env.NODE_ENV === 'production') return\n      if (open) return\n      const id = window.setTimeout(() => {\n        const body = document.body\n        const stillOpen = document.querySelector('[data-scope=\"dialog\"][data-state=\"open\"]')\n        if (stillOpen) return\n        if (body.style.pointerEvents === 'none') body.style.pointerEvents = ''\n        if (body.hasAttribute('data-inert')) body.removeAttribute('data-inert')\n        if (body.getAttribute('style') === '') body.removeAttribute('style')\n      }, 350)\n      return () => window.clearTimeout(id)\n    }, [open])\n\n    return (\n      <>\n        <DrawerBackdrop />\n        <DrawerPositioner>\n          <ArkDrawer.Content ref={ref} {...props}>\n            {children}\n          </ArkDrawer.Content>\n        </DrawerPositioner>\n      </>\n    )\n  },\n)\nContent.displayName = ArkDrawer.Content.displayName\n\nexport const DrawerContent = withContext(styled(Content), 'content')\nexport const DrawerContext = ArkDrawer.Context\n\nexport interface DrawerProps extends ComponentProps<typeof Drawer> {}\nexport interface DrawerBackdropProps extends ComponentProps<typeof DrawerBackdrop> {}\nexport interface DrawerBodyProps extends ComponentProps<typeof DrawerBody> {}\nexport interface DrawerCloseTriggerProps extends ComponentProps<typeof DrawerCloseTrigger> {}\nexport interface DrawerContentProps extends ComponentProps<typeof DrawerContent> {}\nexport interface DrawerFooterProps extends ComponentProps<typeof DrawerFooter> {}\nexport interface DrawerHeaderProps extends ComponentProps<typeof DrawerHeader> {}\nexport interface DrawerPositionerProps extends ComponentProps<typeof DrawerPositioner> {}\nexport interface DrawerTitleProps extends ComponentProps<typeof DrawerTitle> {}\nexport interface DrawerTriggerProps extends ComponentProps<typeof DrawerTrigger> {}\nexport interface DrawerContextProps extends ComponentProps<typeof DrawerContext> {}\n"],"mappings":";;;;;;;;;;;AAUA,IAAM,EAAE,iBAAc,mBAAgB,EAAmB,CAAM,GAElD,IAAS,EAAa,EAAU,MAAM,KAAA,GAAW,EAC5D,cAAc;CACZ,eAAe;CACf,WAAW;AACb,EACF,CAAC,GACY,IAAa,EAAY,EAAO,EAAI,IAAI,GAAG,MAAM,GACjD,IAAqB,EAAY,EAAO,EAAU,YAAY,GAAG,cAAc,GAC/E,IAAe,EAAY,EAAO,EAAI,MAAM,GAAG,QAAQ,GAM9D,IAAS,GACZ,EAAE,aAAU,sBAAmB,IAAM,GAAG,KAAS,MAChD,kBAAC,EAAI,QAAL;CAAY,GAAI;CAAY;WAA5B,CACG,GACA,KACC,kBAAC,GAAD;EAAoB,SAAA;YAClB,kBAAC,GAAD;GAAY,IAAG;GAAO,cAAW;GAAQ,SAAQ;aAC/C,kBAAC,OAAD;IAAK,OAAM;IAAK,QAAO;IAAK,SAAQ;IAAY,MAAK;IAAO,OAAM;cAChE,kBAAC,QAAD;KACE,UAAS;KACT,UAAS;KACT,GAAE;KACF,MAAK;IACN,CAAA;GACE,CAAA;EACK,CAAA;CACM,CAAA,CAEZ;EAEhB;AACA,EAAO,cAAc;AAErB,IAAa,IAAe,EAAY,GAAQ,QAAQ,GAC3C,IAAc,EAAY,EAAO,EAAU,KAAK,GAAG,OAAO,GAC1D,IAAgB,EAAY,EAAO,EAAU,OAAO,GAAG,SAAS,GAEvE,IAAmB,EAAY,EAAO,EAAU,UAAU,GAAG,YAAY,GACzE,IAAiB,EAAY,EAAO,EAAU,QAAQ,GAAG,UAAU,GAEnE,IAAU,GACb,EAAE,aAAU,GAAG,KAAS,MAAQ;CAC/B,IAAM,IAAW,EAAc,eAAe,EAAM,gBAAgB,EAAE,IAAI,EACxE,cAAc,GAChB,CAAC,GACK,EAAE,SAAM,uBAAoB,EAAiB;CAqCnD,OAnCA,QAAsB;EACpB,IAAI,CAAC,GAAM;EACX,IAAM,EAAE,UAAO,EAAgB;EAC/B,IAAI,CAAC,GAAI;EACT,IAAM,IAAW,SAAS,eAAe,CAAE;EAC3C,IAAI,GAAU;GACZ,IAAM,IAAU,EAAS,cAAc,QAAQ;GAC/C,AAAI,MACE,IACF,EAAS,MAAM,YAAY,mBAAmB,GAAG,KAAK,KAAK,EAAQ,YAAY,EAAE,GAAG,IAEpF,EAAS,MAAM,YAAY,mBAAmB,MAAM;EAG1D;CACF,GAAG,CAAC,GAAM,CAAQ,CAAC,GAMnB,QAAgB;EAEd,IADA,QAAA,IAAA,aAA6B,gBACzB,GAAM;EACV,IAAM,IAAK,OAAO,iBAAiB;GACjC,IAAM,IAAO,SAAS;GACJ,SAAS,cAAc,8CACrC,MACA,EAAK,MAAM,kBAAkB,WAAQ,EAAK,MAAM,gBAAgB,KAChE,EAAK,aAAa,YAAY,KAAG,EAAK,gBAAgB,YAAY,GAClE,EAAK,aAAa,OAAO,MAAM,MAAI,EAAK,gBAAgB,OAAO;EACrE,GAAG,GAAG;EACN,aAAa,OAAO,aAAa,CAAE;CACrC,GAAG,CAAC,CAAI,CAAC,GAGP,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD,CAAiB,CAAA,GACjB,kBAAC,GAAD,EAAA,UACE,kBAAC,EAAU,SAAX;EAAwB;EAAK,GAAI;EAC9B;CACgB,CAAA,EACH,CAAA,CAClB,EAAA,CAAA;AAEN,CACF;AACA,EAAQ,cAAc,EAAU,QAAQ;AAExC,IAAa,IAAgB,EAAY,EAAO,CAAO,GAAG,SAAS,GACtD,IAAgB,EAAU"}
+{"version":3,"file":"Drawer.js","names":[],"sources":["../../../src/components/drawer/Drawer.tsx"],"sourcesContent":["import { ark, Dialog as ArkDrawer, useDialogContext } from '@ark-ui/react'\nimport { useMediaQuery } from 'usehooks-ts'\nimport { styled } from '@stokelp/styled-system/jsx'\nimport { drawer } from '@stokelp/styled-system/recipes'\nimport { token } from '@stokelp/styled-system/tokens'\nimport { ComponentProps, ComponentPropsWithoutRef, ElementRef, forwardRef, useEffect, useLayoutEffect } from 'react'\n\nimport { createStyleContext } from '~/utils/slots'\nimport { IconButton } from '~/components/icon-button'\n\nconst { withProvider, withContext } = createStyleContext(drawer)\n\nexport const Drawer = withProvider(ArkDrawer.Root, undefined, {\n  defaultProps: {\n    unmountOnExit: true,\n    lazyMount: true,\n  },\n})\nexport const DrawerBody = withContext(styled(ark.main), 'body')\nexport const DrawerCloseTrigger = withContext(styled(ArkDrawer.CloseTrigger), 'closeTrigger')\nexport const DrawerFooter = withContext(styled(ark.footer), 'footer')\n\ntype HeaderProps = ComponentPropsWithoutRef<typeof ark.header> & {\n  showCloseTrigger?: boolean\n}\n\nconst Header = forwardRef<ElementRef<typeof ark.header>, HeaderProps>(\n  ({ children, showCloseTrigger = true, ...props }, ref) => (\n    <ark.header {...props} ref={ref}>\n      {children}\n      {showCloseTrigger && (\n        <DrawerCloseTrigger asChild>\n          <IconButton ml=\"auto\" aria-label=\"close\" variant=\"tertiary\">\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                fillRule=\"evenodd\"\n                clipRule=\"evenodd\"\n                d=\"M3.64645 3.64645C3.84171 3.45118 4.15829 3.45118 4.35355 3.64645L8 7.29289L11.6464 3.64645C11.8417 3.45118 12.1583 3.45118 12.3536 3.64645C12.5488 3.84171 12.5488 4.15829 12.3536 4.35355L8.70711 8L12.3536 11.6464C12.5488 11.8417 12.5488 12.1583 12.3536 12.3536C12.1583 12.5488 11.8417 12.5488 11.6464 12.3536L8 8.70711L4.35355 12.3536C4.15829 12.5488 3.84171 12.5488 3.64645 12.3536C3.45118 12.1583 3.45118 11.8417 3.64645 11.6464L7.29289 8L3.64645 4.35355C3.45118 4.15829 3.45118 3.84171 3.64645 3.64645Z\"\n                fill=\"currentColor\"\n              />\n            </svg>\n          </IconButton>\n        </DrawerCloseTrigger>\n      )}\n    </ark.header>\n  ),\n)\nHeader.displayName = 'DrawerHeader'\n\nexport const DrawerHeader = withContext(Header, 'header')\nexport const DrawerTitle = withContext(styled(ArkDrawer.Title), 'title')\nexport const DrawerTrigger = withContext(styled(ArkDrawer.Trigger), 'trigger')\n\nconst DrawerPositioner = withContext(styled(ArkDrawer.Positioner), 'positioner')\nconst DrawerBackdrop = withContext(styled(ArkDrawer.Backdrop), 'backdrop')\n\nconst Content = forwardRef<ElementRef<typeof ArkDrawer.Content>, ComponentPropsWithoutRef<typeof ArkDrawer.Content>>(\n  ({ children, ...props }, ref) => {\n    const isMobile = useMediaQuery(`(max-width: ${token('breakpoints.md')})`, {\n      defaultValue: false,\n    })\n    const { open, getContentProps } = useDialogContext()\n\n    useLayoutEffect(() => {\n      if (!open) return\n      const { id } = getContentProps()\n      if (!id) return\n      const $content = document.getElementById(id)\n      if ($content) {\n        const $footer = $content.querySelector('footer')\n        if ($footer) {\n          if (isMobile) {\n            $content.style.setProperty('--footer-height', `${Math.ceil($footer.clientHeight)}px`)\n          } else {\n            $content.style.setProperty('--footer-height', `70px`)\n          }\n        }\n      }\n    }, [open, isMobile])\n\n    // Workaround: in React StrictMode (Next.js dev), @zag-js/dismissable's\n    // disablePointerEventsOutside cleanup can leave `<body>` with\n    // `pointer-events: none` / `data-inert`, freezing the page after close.\n    // Gated inside the effect body so consumer bundlers DCE it in production.\n    // The timer is intentionally fire-and-forget — with unmountOnExit, Content\n    // unmounts after the exit animation (~200ms), so a cleanup-bound timer\n    // would be canceled before it fires. The restore is idempotent and the\n    // stillOpen guard prevents it from clobbering a freshly-opened dialog.\n    useEffect(() => {\n      if (process.env.NODE_ENV === 'production') return\n      if (open) return\n      window.setTimeout(() => {\n        const body = document.body\n        const stillOpen = document.querySelector('[data-scope=\"dialog\"][data-state=\"open\"]')\n        if (stillOpen) return\n        if (body.style.pointerEvents === 'none') body.style.pointerEvents = ''\n        if (body.hasAttribute('data-inert')) body.removeAttribute('data-inert')\n        if (body.getAttribute('style') === '') body.removeAttribute('style')\n      }, 350)\n    }, [open])\n\n    return (\n      <>\n        <DrawerBackdrop />\n        <DrawerPositioner>\n          <ArkDrawer.Content ref={ref} {...props}>\n            {children}\n          </ArkDrawer.Content>\n        </DrawerPositioner>\n      </>\n    )\n  },\n)\nContent.displayName = ArkDrawer.Content.displayName\n\nexport const DrawerContent = withContext(styled(Content), 'content')\nexport const DrawerContext = ArkDrawer.Context\n\nexport interface DrawerProps extends ComponentProps<typeof Drawer> {}\nexport interface DrawerBackdropProps extends ComponentProps<typeof DrawerBackdrop> {}\nexport interface DrawerBodyProps extends ComponentProps<typeof DrawerBody> {}\nexport interface DrawerCloseTriggerProps extends ComponentProps<typeof DrawerCloseTrigger> {}\nexport interface DrawerContentProps extends ComponentProps<typeof DrawerContent> {}\nexport interface DrawerFooterProps extends ComponentProps<typeof DrawerFooter> {}\nexport interface DrawerHeaderProps extends ComponentProps<typeof DrawerHeader> {}\nexport interface DrawerPositionerProps extends ComponentProps<typeof DrawerPositioner> {}\nexport interface DrawerTitleProps extends ComponentProps<typeof DrawerTitle> {}\nexport interface DrawerTriggerProps extends ComponentProps<typeof DrawerTrigger> {}\nexport interface DrawerContextProps extends ComponentProps<typeof DrawerContext> {}\n"],"mappings":";;;;;;;;;;;AAUA,IAAM,EAAE,iBAAc,mBAAgB,EAAmB,CAAM,GAElD,IAAS,EAAa,EAAU,MAAM,KAAA,GAAW,EAC5D,cAAc;CACZ,eAAe;CACf,WAAW;AACb,EACF,CAAC,GACY,IAAa,EAAY,EAAO,EAAI,IAAI,GAAG,MAAM,GACjD,IAAqB,EAAY,EAAO,EAAU,YAAY,GAAG,cAAc,GAC/E,IAAe,EAAY,EAAO,EAAI,MAAM,GAAG,QAAQ,GAM9D,IAAS,GACZ,EAAE,aAAU,sBAAmB,IAAM,GAAG,KAAS,MAChD,kBAAC,EAAI,QAAL;CAAY,GAAI;CAAY;WAA5B,CACG,GACA,KACC,kBAAC,GAAD;EAAoB,SAAA;YAClB,kBAAC,GAAD;GAAY,IAAG;GAAO,cAAW;GAAQ,SAAQ;aAC/C,kBAAC,OAAD;IAAK,OAAM;IAAK,QAAO;IAAK,SAAQ;IAAY,MAAK;IAAO,OAAM;cAChE,kBAAC,QAAD;KACE,UAAS;KACT,UAAS;KACT,GAAE;KACF,MAAK;IACN,CAAA;GACE,CAAA;EACK,CAAA;CACM,CAAA,CAEZ;EAEhB;AACA,EAAO,cAAc;AAErB,IAAa,IAAe,EAAY,GAAQ,QAAQ,GAC3C,IAAc,EAAY,EAAO,EAAU,KAAK,GAAG,OAAO,GAC1D,IAAgB,EAAY,EAAO,EAAU,OAAO,GAAG,SAAS,GAEvE,IAAmB,EAAY,EAAO,EAAU,UAAU,GAAG,YAAY,GACzE,IAAiB,EAAY,EAAO,EAAU,QAAQ,GAAG,UAAU,GAEnE,IAAU,GACb,EAAE,aAAU,GAAG,KAAS,MAAQ;CAC/B,IAAM,IAAW,EAAc,eAAe,EAAM,gBAAgB,EAAE,IAAI,EACxE,cAAc,GAChB,CAAC,GACK,EAAE,SAAM,uBAAoB,EAAiB;CAwCnD,OAtCA,QAAsB;EACpB,IAAI,CAAC,GAAM;EACX,IAAM,EAAE,UAAO,EAAgB;EAC/B,IAAI,CAAC,GAAI;EACT,IAAM,IAAW,SAAS,eAAe,CAAE;EAC3C,IAAI,GAAU;GACZ,IAAM,IAAU,EAAS,cAAc,QAAQ;GAC/C,AAAI,MACE,IACF,EAAS,MAAM,YAAY,mBAAmB,GAAG,KAAK,KAAK,EAAQ,YAAY,EAAE,GAAG,IAEpF,EAAS,MAAM,YAAY,mBAAmB,MAAM;EAG1D;CACF,GAAG,CAAC,GAAM,CAAQ,CAAC,GAUnB,QAAgB;EACd,QAAA,IAAA,aAA6B,iBACzB,KACJ,OAAO,iBAAiB;GACtB,IAAM,IAAO,SAAS;GACJ,SAAS,cAAc,8CACrC,MACA,EAAK,MAAM,kBAAkB,WAAQ,EAAK,MAAM,gBAAgB,KAChE,EAAK,aAAa,YAAY,KAAG,EAAK,gBAAgB,YAAY,GAClE,EAAK,aAAa,OAAO,MAAM,MAAI,EAAK,gBAAgB,OAAO;EACrE,GAAG,GAAG;CACR,GAAG,CAAC,CAAI,CAAC,GAGP,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD,CAAiB,CAAA,GACjB,kBAAC,GAAD,EAAA,UACE,kBAAC,EAAU,SAAX;EAAwB;EAAK,GAAI;EAC9B;CACgB,CAAA,EACH,CAAA,CAClB,EAAA,CAAA;AAEN,CACF;AACA,EAAQ,cAAc,EAAU,QAAQ;AAExC,IAAa,IAAgB,EAAY,EAAO,CAAO,GAAG,SAAS,GACtD,IAAgB,EAAU"}

package/dist/components/form/FormControl.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FormControl.cjs","names":[],"sources":["../../../src/components/form/FormControl.tsx"],"sourcesContent":["import type { ComponentProps, FC } from 'react'\n\nimport { styled } from '@stokelp/styled-system/jsx'\nimport { formControl } from '@stokelp/styled-system/recipes'\n\nconst StyledFormControl = styled('div', formControl, {\n  defaultProps: {\n    role: 'group',\n  },\n})\n\nexport type FormControlProps = ComponentProps<typeof StyledFormControl> & {\n  isInvalid?: boolean\n  isRequired?: boolean\n}\n\nexport const FormControl: FC<FormControlProps> = ({ isInvalid, isRequired, ...props }) => {\n  const invalidProps = {\n    ...(isInvalid ? { 'aria-invalid': true } : {}),\n    ...(isRequired ? { 'aria-required': true } : {}),\n  }\n\n  return <StyledFormControl {...invalidProps} {...props} />\n}\n"],"mappings":"oIAKA,IAAM,GAAA,EAAA,EAAA,QAA2B,MAAO,EAAA,YAAa,CACnD,aAAc,CACZ,KAAM,OACR,CACF,CAAC,EAOY,GAAqC,CAAE,YAAW,aAAY,GAAG,MAMrE,EAAA,EAAA,KAAC,EAAD,CAJL,GAAI,EAAY,CAAE,eAAgB,EAAK,EAAI,CAAC,EAC5C,GAAI,EAAa,CAAE,gBAAiB,EAAK,EAAI,CAAC,EAGJ,GAAI,CAAQ,CAAA"}
+{"version":3,"file":"FormControl.cjs","names":[],"sources":["../../../src/components/form/FormControl.tsx"],"sourcesContent":["import type { ComponentProps, FC } from 'react'\n\nimport { styled } from '@stokelp/styled-system/jsx'\nimport { formControl, type FormControlVariantProps } from '@stokelp/styled-system/recipes'\nimport type { StyledComponent } from '@stokelp/styled-system/types'\n\n// Explicit `as` cast pins the literal `'div'` against TS's d.ts emit-time\n// widening (which would otherwise produce `StyledComponent<string, …>` and\n// strip every native HTML attribute — children, id, role, aria-*, etc. —\n// from consumer typings). Same pattern as IconButton.tsx.\nconst StyledFormControl = styled('div', formControl, {\n  defaultProps: {\n    role: 'group',\n  },\n}) as StyledComponent<'div', FormControlVariantProps>\n\nexport type FormControlProps = ComponentProps<typeof StyledFormControl> & {\n  isInvalid?: boolean\n  isRequired?: boolean\n}\n\nexport const FormControl: FC<FormControlProps> = ({ isInvalid, isRequired, ...props }) => {\n  const invalidProps = {\n    ...(isInvalid ? { 'aria-invalid': true } : {}),\n    ...(isRequired ? { 'aria-required': true } : {}),\n  }\n\n  return <StyledFormControl {...invalidProps} {...props} />\n}\n"],"mappings":"oIAUA,IAAM,GAAA,EAAA,EAAA,QAA2B,MAAO,EAAA,YAAa,CACnD,aAAc,CACZ,KAAM,OACR,CACF,CAAC,EAOY,GAAqC,CAAE,YAAW,aAAY,GAAG,MAMrE,EAAA,EAAA,KAAC,EAAD,CAJL,GAAI,EAAY,CAAE,eAAgB,EAAK,EAAI,CAAC,EAC5C,GAAI,EAAa,CAAE,gBAAiB,EAAK,EAAI,CAAC,EAGJ,GAAI,CAAQ,CAAA"}

package/dist/components/form/FormControl.d.ts

@@ -1,7 +1,7 @@
 import { ComponentProps, FC } from 'react';
-import { StyledComponent } from '@stokelp/styled-system/types';
 import { FormControlVariantProps } from '@stokelp/styled-system/recipes';
-declare const StyledFormControl: StyledComponent<string, FormControlVariantProps>;
+import { StyledComponent } from '@stokelp/styled-system/types';
+declare const StyledFormControl: StyledComponent<"div", FormControlVariantProps>;
 export type FormControlProps = ComponentProps<typeof StyledFormControl> & {
     isInvalid?: boolean;
     isRequired?: boolean;

package/dist/components/form/FormControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormControl.js","names":[],"sources":["../../../src/components/form/FormControl.tsx"],"sourcesContent":["import type { ComponentProps, FC } from 'react'\n\nimport { styled } from '@stokelp/styled-system/jsx'\nimport { formControl } from '@stokelp/styled-system/recipes'\n\nconst StyledFormControl = styled('div', formControl, {\n  defaultProps: {\n    role: 'group',\n  },\n})\n\nexport type FormControlProps = ComponentProps<typeof StyledFormControl> & {\n  isInvalid?: boolean\n  isRequired?: boolean\n}\n\nexport const FormControl: FC<FormControlProps> = ({ isInvalid, isRequired, ...props }) => {\n  const invalidProps = {\n    ...(isInvalid ? { 'aria-invalid': true } : {}),\n    ...(isRequired ? { 'aria-required': true } : {}),\n  }\n\n  return <StyledFormControl {...invalidProps} {...props} />\n}\n"],"mappings":";;;;;AAKA,IAAM,IAAoB,EAAO,OAAO,GAAa,EACnD,cAAc,EACZ,MAAM,QACR,EACF,CAAC,GAOY,KAAqC,EAAE,cAAW,eAAY,GAAG,QAMrE,kBAAC,GAAD;CAJL,GAAI,IAAY,EAAE,gBAAgB,GAAK,IAAI,CAAC;CAC5C,GAAI,IAAa,EAAE,iBAAiB,GAAK,IAAI,CAAC;CAGJ,GAAI;AAAQ,CAAA"}
+{"version":3,"file":"FormControl.js","names":[],"sources":["../../../src/components/form/FormControl.tsx"],"sourcesContent":["import type { ComponentProps, FC } from 'react'\n\nimport { styled } from '@stokelp/styled-system/jsx'\nimport { formControl, type FormControlVariantProps } from '@stokelp/styled-system/recipes'\nimport type { StyledComponent } from '@stokelp/styled-system/types'\n\n// Explicit `as` cast pins the literal `'div'` against TS's d.ts emit-time\n// widening (which would otherwise produce `StyledComponent<string, …>` and\n// strip every native HTML attribute — children, id, role, aria-*, etc. —\n// from consumer typings). Same pattern as IconButton.tsx.\nconst StyledFormControl = styled('div', formControl, {\n  defaultProps: {\n    role: 'group',\n  },\n}) as StyledComponent<'div', FormControlVariantProps>\n\nexport type FormControlProps = ComponentProps<typeof StyledFormControl> & {\n  isInvalid?: boolean\n  isRequired?: boolean\n}\n\nexport const FormControl: FC<FormControlProps> = ({ isInvalid, isRequired, ...props }) => {\n  const invalidProps = {\n    ...(isInvalid ? { 'aria-invalid': true } : {}),\n    ...(isRequired ? { 'aria-required': true } : {}),\n  }\n\n  return <StyledFormControl {...invalidProps} {...props} />\n}\n"],"mappings":";;;;;AAUA,IAAM,IAAoB,EAAO,OAAO,GAAa,EACnD,cAAc,EACZ,MAAM,QACR,EACF,CAAC,GAOY,KAAqC,EAAE,cAAW,eAAY,GAAG,QAMrE,kBAAC,GAAD;CAJL,GAAI,IAAY,EAAE,gBAAgB,GAAK,IAAI,CAAC;CAC5C,GAAI,IAAa,EAAE,iBAAiB,GAAK,IAAI,CAAC;CAGJ,GAAI;AAAQ,CAAA"}

package/dist/components/form/FormHelperText.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FormHelperText.cjs","names":[],"sources":["../../../src/components/form/FormHelperText.tsx"],"sourcesContent":["import type { ComponentProps } from 'react'\n\nimport { styled } from '@stokelp/styled-system/jsx'\nimport { formHelperText } from '@stokelp/styled-system/recipes'\n\nexport const FormHelperText = styled('p', formHelperText, {\n  dataAttr: true,\n})\n\nexport interface FormHelperTextProps extends ComponentProps<typeof FormHelperText> {}\n"],"mappings":"qGAKA,IAAa,GAAA,EAAA,EAAA,QAAwB,IAAK,EAAA,eAAgB,CACxD,SAAU,EACZ,CAAC"}
+{"version":3,"file":"FormHelperText.cjs","names":[],"sources":["../../../src/components/form/FormHelperText.tsx"],"sourcesContent":["import type { ComponentProps } from 'react'\n\nimport { styled } from '@stokelp/styled-system/jsx'\nimport { formHelperText, type FormHelperTextVariantProps } from '@stokelp/styled-system/recipes'\nimport type { StyledComponent } from '@stokelp/styled-system/types'\n\n// See FormControl.tsx for why we pin the literal tag with an `as` cast.\nexport const FormHelperText = styled('p', formHelperText, {\n  dataAttr: true,\n}) as StyledComponent<'p', FormHelperTextVariantProps>\n\nexport interface FormHelperTextProps extends ComponentProps<typeof FormHelperText> {}\n"],"mappings":"qGAOA,IAAa,GAAA,EAAA,EAAA,QAAwB,IAAK,EAAA,eAAgB,CACxD,SAAU,EACZ,CAAC"}

package/dist/components/form/FormHelperText.d.ts

@@ -1,6 +1,6 @@
 import { ComponentProps } from 'react';
-import { StyledComponent } from '@stokelp/styled-system/types';
 import { FormHelperTextVariantProps } from '@stokelp/styled-system/recipes';
-export declare const FormHelperText: StyledComponent<string, FormHelperTextVariantProps>;
+import { StyledComponent } from '@stokelp/styled-system/types';
+export declare const FormHelperText: StyledComponent<"p", FormHelperTextVariantProps>;
 export interface FormHelperTextProps extends ComponentProps<typeof FormHelperText> {
 }

package/dist/components/form/FormHelperText.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormHelperText.js","names":[],"sources":["../../../src/components/form/FormHelperText.tsx"],"sourcesContent":["import type { ComponentProps } from 'react'\n\nimport { styled } from '@stokelp/styled-system/jsx'\nimport { formHelperText } from '@stokelp/styled-system/recipes'\n\nexport const FormHelperText = styled('p', formHelperText, {\n  dataAttr: true,\n})\n\nexport interface FormHelperTextProps extends ComponentProps<typeof FormHelperText> {}\n"],"mappings":";;;;AAKA,IAAa,IAAiB,EAAO,KAAK,GAAgB,EACxD,UAAU,GACZ,CAAC"}
+{"version":3,"file":"FormHelperText.js","names":[],"sources":["../../../src/components/form/FormHelperText.tsx"],"sourcesContent":["import type { ComponentProps } from 'react'\n\nimport { styled } from '@stokelp/styled-system/jsx'\nimport { formHelperText, type FormHelperTextVariantProps } from '@stokelp/styled-system/recipes'\nimport type { StyledComponent } from '@stokelp/styled-system/types'\n\n// See FormControl.tsx for why we pin the literal tag with an `as` cast.\nexport const FormHelperText = styled('p', formHelperText, {\n  dataAttr: true,\n}) as StyledComponent<'p', FormHelperTextVariantProps>\n\nexport interface FormHelperTextProps extends ComponentProps<typeof FormHelperText> {}\n"],"mappings":";;;;AAOA,IAAa,IAAiB,EAAO,KAAK,GAAgB,EACxD,UAAU,GACZ,CAAC"}

package/dist/components/form/FormLabel.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FormLabel.cjs","names":[],"sources":["../../../src/components/form/FormLabel.tsx"],"sourcesContent":["import type { ComponentProps, FC, ReactNode } from 'react'\n\nimport { splitCssProps, styled } from '@stokelp/styled-system/jsx'\nimport { formLabel } from '@stokelp/styled-system/recipes'\nimport { css, cx } from '@stokelp/styled-system/css'\nimport { Tooltip } from '~/components/tooltip/Tooltip'\n\nconst StyledFormLabel = styled('label', formLabel)\n\nexport type FormLabelProps = ComponentProps<typeof StyledFormLabel> & {\n  addon?: ReactNode\n  tooltipInformation?: ReactNode\n}\n\nexport const FormLabel: FC<FormLabelProps> = props => {\n  const [variantProps, labelProps] = formLabel.splitVariantProps(props)\n  const [cssProps, localProps] = splitCssProps(labelProps)\n  const { children, className, addon, tooltipInformation, ...rootProps } = localProps\n  const styles = formLabel(variantProps)\n\n  return (\n    <StyledFormLabel className={cx(styles.root, css(cssProps), className)} {...rootProps}>\n      {children}\n      {addon ? <span className={styles.addon}>{addon}</span> : null}\n      {tooltipInformation ? (\n        <Tooltip label={tooltipInformation}>\n          <svg\n            className={styles.icon}\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 16 16\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M7.33337 4.66659H8.66671V5.99992H7.33337V4.66659ZM7.33337 7.33325H8.66671V11.3333H7.33337V7.33325ZM8.00004 1.33325C4.32004 1.33325 1.33337 4.31992 1.33337 7.99992C1.33337 11.6799 4.32004 14.6666 8.00004 14.6666C11.68 14.6666 14.6667 11.6799 14.6667 7.99992C14.6667 4.31992 11.68 1.33325 8.00004 1.33325ZM8.00004 13.3333C5.06004 13.3333 2.66671 10.9399 2.66671 7.99992C2.66671 5.05992 5.06004 2.66659 8.00004 2.66659C10.94 2.66659 13.3334 5.05992 13.3334 7.99992C13.3334 10.9399 10.94 13.3333 8.00004 13.3333Z\"\n              fill=\"currentColor\"\n            />\n          </svg>\n        </Tooltip>\n      ) : null}\n    </StyledFormLabel>\n  )\n}\n"],"mappings":"sNAOA,IAAM,GAAA,EAAA,EAAA,QAAyB,QAAS,EAAA,SAAS,EAOpC,EAAgC,GAAS,CACpD,GAAM,CAAC,EAAc,GAAc,EAAA,UAAU,kBAAkB,CAAK,EAC9D,CAAC,EAAU,IAAA,EAAA,EAAA,eAA4B,CAAU,EACjD,CAAE,WAAU,YAAW,QAAO,qBAAoB,GAAG,GAAc,EACnE,GAAA,EAAA,EAAA,WAAmB,CAAY,EAErC,OACE,EAAA,EAAA,MAAC,EAAD,CAAiB,WAAA,EAAA,EAAA,IAAc,EAAO,MAAA,EAAA,EAAA,KAAU,CAAQ,EAAG,CAAS,EAAG,GAAI,WAA3E,CACG,EACA,GAAQ,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAO,eAAQ,CAAY,CAAA,EAAI,KACxD,GACC,EAAA,EAAA,KAAC,EAAA,QAAD,CAAS,MAAO,YACd,EAAA,EAAA,KAAC,MAAD,CACE,UAAW,EAAO,KAClB,MAAM,KACN,OAAO,KACP,QAAQ,YACR,KAAK,OACL,MAAM,uCAEN,EAAA,EAAA,KAAC,OAAD,CACE,EAAE,+fACF,KAAK,cACN,CAAA,CACE,CAAA,CACE,CAAA,EACP,IACW,GAErB"}
+{"version":3,"file":"FormLabel.cjs","names":[],"sources":["../../../src/components/form/FormLabel.tsx"],"sourcesContent":["import type { ComponentProps, FC, ReactNode } from 'react'\n\nimport { splitCssProps, styled } from '@stokelp/styled-system/jsx'\nimport { formLabel, type FormLabelVariantProps } from '@stokelp/styled-system/recipes'\nimport type { StyledComponent } from '@stokelp/styled-system/types'\nimport { css, cx } from '@stokelp/styled-system/css'\nimport { Tooltip } from '~/components/tooltip/Tooltip'\n\n// See FormControl.tsx for why we pin the literal tag with an `as` cast.\nconst StyledFormLabel = styled('label', formLabel) as StyledComponent<'label', FormLabelVariantProps>\n\nexport type FormLabelProps = ComponentProps<typeof StyledFormLabel> & {\n  addon?: ReactNode\n  tooltipInformation?: ReactNode\n}\n\nexport const FormLabel: FC<FormLabelProps> = props => {\n  const [variantProps, labelProps] = formLabel.splitVariantProps(props)\n  const [cssProps, localProps] = splitCssProps(labelProps)\n  const { children, className, addon, tooltipInformation, ...rootProps } = localProps\n  const styles = formLabel(variantProps)\n\n  return (\n    <StyledFormLabel className={cx(styles.root, css(cssProps), className)} {...rootProps}>\n      {children}\n      {addon ? <span className={styles.addon}>{addon}</span> : null}\n      {tooltipInformation ? (\n        <Tooltip label={tooltipInformation}>\n          <svg\n            className={styles.icon}\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 16 16\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M7.33337 4.66659H8.66671V5.99992H7.33337V4.66659ZM7.33337 7.33325H8.66671V11.3333H7.33337V7.33325ZM8.00004 1.33325C4.32004 1.33325 1.33337 4.31992 1.33337 7.99992C1.33337 11.6799 4.32004 14.6666 8.00004 14.6666C11.68 14.6666 14.6667 11.6799 14.6667 7.99992C14.6667 4.31992 11.68 1.33325 8.00004 1.33325ZM8.00004 13.3333C5.06004 13.3333 2.66671 10.9399 2.66671 7.99992C2.66671 5.05992 5.06004 2.66659 8.00004 2.66659C10.94 2.66659 13.3334 5.05992 13.3334 7.99992C13.3334 10.9399 10.94 13.3333 8.00004 13.3333Z\"\n              fill=\"currentColor\"\n            />\n          </svg>\n        </Tooltip>\n      ) : null}\n    </StyledFormLabel>\n  )\n}\n"],"mappings":"sNASA,IAAM,GAAA,EAAA,EAAA,QAAyB,QAAS,EAAA,SAAS,EAOpC,EAAgC,GAAS,CACpD,GAAM,CAAC,EAAc,GAAc,EAAA,UAAU,kBAAkB,CAAK,EAC9D,CAAC,EAAU,IAAA,EAAA,EAAA,eAA4B,CAAU,EACjD,CAAE,WAAU,YAAW,QAAO,qBAAoB,GAAG,GAAc,EACnE,GAAA,EAAA,EAAA,WAAmB,CAAY,EAErC,OACE,EAAA,EAAA,MAAC,EAAD,CAAiB,WAAA,EAAA,EAAA,IAAc,EAAO,MAAA,EAAA,EAAA,KAAU,CAAQ,EAAG,CAAS,EAAG,GAAI,WAA3E,CACG,EACA,GAAQ,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAO,eAAQ,CAAY,CAAA,EAAI,KACxD,GACC,EAAA,EAAA,KAAC,EAAA,QAAD,CAAS,MAAO,YACd,EAAA,EAAA,KAAC,MAAD,CACE,UAAW,EAAO,KAClB,MAAM,KACN,OAAO,KACP,QAAQ,YACR,KAAK,OACL,MAAM,uCAEN,EAAA,EAAA,KAAC,OAAD,CACE,EAAE,+fACF,KAAK,cACN,CAAA,CACE,CAAA,CACE,CAAA,EACP,IACW,GAErB"}

package/dist/components/form/FormLabel.d.ts

@@ -1,7 +1,7 @@
 import { ComponentProps, FC, ReactNode } from 'react';
-import { StyledComponent } from '@stokelp/styled-system/types';
 import { FormLabelVariantProps } from '@stokelp/styled-system/recipes';
-declare const StyledFormLabel: StyledComponent<string, FormLabelVariantProps>;
+import { StyledComponent } from '@stokelp/styled-system/types';
+declare const StyledFormLabel: StyledComponent<"label", FormLabelVariantProps>;
 export type FormLabelProps = ComponentProps<typeof StyledFormLabel> & {
     addon?: ReactNode;
     tooltipInformation?: ReactNode;

package/dist/components/form/FormLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormLabel.js","names":[],"sources":["../../../src/components/form/FormLabel.tsx"],"sourcesContent":["import type { ComponentProps, FC, ReactNode } from 'react'\n\nimport { splitCssProps, styled } from '@stokelp/styled-system/jsx'\nimport { formLabel } from '@stokelp/styled-system/recipes'\nimport { css, cx } from '@stokelp/styled-system/css'\nimport { Tooltip } from '~/components/tooltip/Tooltip'\n\nconst StyledFormLabel = styled('label', formLabel)\n\nexport type FormLabelProps = ComponentProps<typeof StyledFormLabel> & {\n  addon?: ReactNode\n  tooltipInformation?: ReactNode\n}\n\nexport const FormLabel: FC<FormLabelProps> = props => {\n  const [variantProps, labelProps] = formLabel.splitVariantProps(props)\n  const [cssProps, localProps] = splitCssProps(labelProps)\n  const { children, className, addon, tooltipInformation, ...rootProps } = localProps\n  const styles = formLabel(variantProps)\n\n  return (\n    <StyledFormLabel className={cx(styles.root, css(cssProps), className)} {...rootProps}>\n      {children}\n      {addon ? <span className={styles.addon}>{addon}</span> : null}\n      {tooltipInformation ? (\n        <Tooltip label={tooltipInformation}>\n          <svg\n            className={styles.icon}\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 16 16\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M7.33337 4.66659H8.66671V5.99992H7.33337V4.66659ZM7.33337 7.33325H8.66671V11.3333H7.33337V7.33325ZM8.00004 1.33325C4.32004 1.33325 1.33337 4.31992 1.33337 7.99992C1.33337 11.6799 4.32004 14.6666 8.00004 14.6666C11.68 14.6666 14.6667 11.6799 14.6667 7.99992C14.6667 4.31992 11.68 1.33325 8.00004 1.33325ZM8.00004 13.3333C5.06004 13.3333 2.66671 10.9399 2.66671 7.99992C2.66671 5.05992 5.06004 2.66659 8.00004 2.66659C10.94 2.66659 13.3334 5.05992 13.3334 7.99992C13.3334 10.9399 10.94 13.3333 8.00004 13.3333Z\"\n              fill=\"currentColor\"\n            />\n          </svg>\n        </Tooltip>\n      ) : null}\n    </StyledFormLabel>\n  )\n}\n"],"mappings":";;;;;;;AAOA,IAAM,IAAkB,EAAO,SAAS,CAAS,GAOpC,KAAgC,MAAS;CACpD,IAAM,CAAC,GAAc,KAAc,EAAU,kBAAkB,CAAK,GAC9D,CAAC,GAAU,KAAc,EAAc,CAAU,GACjD,EAAE,aAAU,cAAW,UAAO,uBAAoB,GAAG,MAAc,GACnE,IAAS,EAAU,CAAY;CAErC,OACE,kBAAC,GAAD;EAAiB,WAAW,EAAG,EAAO,MAAM,EAAI,CAAQ,GAAG,CAAS;EAAG,GAAI;YAA3E;GACG;GACA,IAAQ,kBAAC,QAAD;IAAM,WAAW,EAAO;cAAQ;GAAY,CAAA,IAAI;GACxD,IACC,kBAAC,GAAD;IAAS,OAAO;cACd,kBAAC,OAAD;KACE,WAAW,EAAO;KAClB,OAAM;KACN,QAAO;KACP,SAAQ;KACR,MAAK;KACL,OAAM;eAEN,kBAAC,QAAD;MACE,GAAE;MACF,MAAK;KACN,CAAA;IACE,CAAA;GACE,CAAA,IACP;EACW;;AAErB"}
+{"version":3,"file":"FormLabel.js","names":[],"sources":["../../../src/components/form/FormLabel.tsx"],"sourcesContent":["import type { ComponentProps, FC, ReactNode } from 'react'\n\nimport { splitCssProps, styled } from '@stokelp/styled-system/jsx'\nimport { formLabel, type FormLabelVariantProps } from '@stokelp/styled-system/recipes'\nimport type { StyledComponent } from '@stokelp/styled-system/types'\nimport { css, cx } from '@stokelp/styled-system/css'\nimport { Tooltip } from '~/components/tooltip/Tooltip'\n\n// See FormControl.tsx for why we pin the literal tag with an `as` cast.\nconst StyledFormLabel = styled('label', formLabel) as StyledComponent<'label', FormLabelVariantProps>\n\nexport type FormLabelProps = ComponentProps<typeof StyledFormLabel> & {\n  addon?: ReactNode\n  tooltipInformation?: ReactNode\n}\n\nexport const FormLabel: FC<FormLabelProps> = props => {\n  const [variantProps, labelProps] = formLabel.splitVariantProps(props)\n  const [cssProps, localProps] = splitCssProps(labelProps)\n  const { children, className, addon, tooltipInformation, ...rootProps } = localProps\n  const styles = formLabel(variantProps)\n\n  return (\n    <StyledFormLabel className={cx(styles.root, css(cssProps), className)} {...rootProps}>\n      {children}\n      {addon ? <span className={styles.addon}>{addon}</span> : null}\n      {tooltipInformation ? (\n        <Tooltip label={tooltipInformation}>\n          <svg\n            className={styles.icon}\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 16 16\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M7.33337 4.66659H8.66671V5.99992H7.33337V4.66659ZM7.33337 7.33325H8.66671V11.3333H7.33337V7.33325ZM8.00004 1.33325C4.32004 1.33325 1.33337 4.31992 1.33337 7.99992C1.33337 11.6799 4.32004 14.6666 8.00004 14.6666C11.68 14.6666 14.6667 11.6799 14.6667 7.99992C14.6667 4.31992 11.68 1.33325 8.00004 1.33325ZM8.00004 13.3333C5.06004 13.3333 2.66671 10.9399 2.66671 7.99992C2.66671 5.05992 5.06004 2.66659 8.00004 2.66659C10.94 2.66659 13.3334 5.05992 13.3334 7.99992C13.3334 10.9399 10.94 13.3333 8.00004 13.3333Z\"\n              fill=\"currentColor\"\n            />\n          </svg>\n        </Tooltip>\n      ) : null}\n    </StyledFormLabel>\n  )\n}\n"],"mappings":";;;;;;;AASA,IAAM,IAAkB,EAAO,SAAS,CAAS,GAOpC,KAAgC,MAAS;CACpD,IAAM,CAAC,GAAc,KAAc,EAAU,kBAAkB,CAAK,GAC9D,CAAC,GAAU,KAAc,EAAc,CAAU,GACjD,EAAE,aAAU,cAAW,UAAO,uBAAoB,GAAG,MAAc,GACnE,IAAS,EAAU,CAAY;CAErC,OACE,kBAAC,GAAD;EAAiB,WAAW,EAAG,EAAO,MAAM,EAAI,CAAQ,GAAG,CAAS;EAAG,GAAI;YAA3E;GACG;GACA,IAAQ,kBAAC,QAAD;IAAM,WAAW,EAAO;cAAQ;GAAY,CAAA,IAAI;GACxD,IACC,kBAAC,GAAD;IAAS,OAAO;cACd,kBAAC,OAAD;KACE,WAAW,EAAO;KAClB,OAAM;KACN,QAAO;KACP,SAAQ;KACR,MAAK;KACL,OAAM;eAEN,kBAAC,QAAD;MACE,GAAE;MACF,MAAK;KACN,CAAA;IACE,CAAA;GACE,CAAA,IACP;EACW;;AAErB"}

package/dist/components/input/HighlightedInput.d.ts

@@ -3,7 +3,7 @@ import { ComponentVariants } from '../../utils/slots';
 import { StyledComponent } from '@stokelp/styled-system/types';
 import { HighlightedInputRecipe, InputVariantProps } from '@stokelp/styled-system/recipes';
 export declare const Root: ComponentVariants<StyledComponent<string, {}>, HighlightedInputRecipe>;
-export declare const InputSlot: StyledComponent<string, InputVariantProps>;
+export declare const InputSlot: StyledComponent<"input", InputVariantProps>;
 export declare const Renderer: StyledComponent<string, {}>;
 export declare const Highlight: StyledComponent<string, {}>;
 export type HighlightedInputRootProps = ComponentProps<typeof Root>;

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

@@ -1 +1 @@
-{"version":3,"file":"Input.cjs","names":[],"sources":["../../../src/components/input/Input.tsx"],"sourcesContent":["import type { ComponentProps, WheelEvent } from 'react'\n\nimport { styled } from '@stokelp/styled-system/jsx'\nimport { input } from '@stokelp/styled-system/recipes'\n\nexport const Input = styled('input', input, {\n  defaultProps: {\n    onWheel: (event: WheelEvent<HTMLInputElement>) => {\n      if (event.currentTarget.type === 'number') {\n        event.currentTarget.blur()\n      }\n    },\n  },\n  dataAttr: true,\n})\n\nexport type InputProps = ComponentProps<typeof Input>\n"],"mappings":"qGAKA,IAAa,GAAA,EAAA,EAAA,QAAe,QAAS,EAAA,MAAO,CAC1C,aAAc,CACZ,QAAU,GAAwC,CAC5C,EAAM,cAAc,OAAS,UAC/B,EAAM,cAAc,KAAK,CAE7B,CACF,EACA,SAAU,EACZ,CAAC"}
+{"version":3,"file":"Input.cjs","names":[],"sources":["../../../src/components/input/Input.tsx"],"sourcesContent":["import type { ComponentProps, WheelEvent } from 'react'\n\nimport { styled } from '@stokelp/styled-system/jsx'\nimport { input, type InputVariantProps } from '@stokelp/styled-system/recipes'\nimport type { StyledComponent } from '@stokelp/styled-system/types'\n\n// See FormControl.tsx for why we pin the literal tag with an `as` cast.\n// Without this, `Input` becomes `StyledComponent<string, …>` and loses every\n// native HTML input attribute (type, placeholder, value, ref, etc.) in the\n// emitted d.ts.\nexport const Input = styled('input', input, {\n  defaultProps: {\n    onWheel: (event: WheelEvent<HTMLInputElement>) => {\n      if (event.currentTarget.type === 'number') {\n        event.currentTarget.blur()\n      }\n    },\n  },\n  dataAttr: true,\n}) as StyledComponent<'input', InputVariantProps>\n\nexport type InputProps = ComponentProps<typeof Input>\n"],"mappings":"qGAUA,IAAa,GAAA,EAAA,EAAA,QAAe,QAAS,EAAA,MAAO,CAC1C,aAAc,CACZ,QAAU,GAAwC,CAC5C,EAAM,cAAc,OAAS,UAC/B,EAAM,cAAc,KAAK,CAE7B,CACF,EACA,SAAU,EACZ,CAAC"}

package/dist/components/input/Input.d.ts

@@ -1,5 +1,5 @@
 import { ComponentProps } from 'react';
-import { StyledComponent } from '@stokelp/styled-system/types';
 import { InputVariantProps } from '@stokelp/styled-system/recipes';
-export declare const Input: StyledComponent<string, InputVariantProps>;
+import { StyledComponent } from '@stokelp/styled-system/types';
+export declare const Input: StyledComponent<"input", InputVariantProps>;
 export type InputProps = ComponentProps<typeof Input>;

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

@@ -1 +1 @@
-{"version":3,"file":"Input.js","names":[],"sources":["../../../src/components/input/Input.tsx"],"sourcesContent":["import type { ComponentProps, WheelEvent } from 'react'\n\nimport { styled } from '@stokelp/styled-system/jsx'\nimport { input } from '@stokelp/styled-system/recipes'\n\nexport const Input = styled('input', input, {\n  defaultProps: {\n    onWheel: (event: WheelEvent<HTMLInputElement>) => {\n      if (event.currentTarget.type === 'number') {\n        event.currentTarget.blur()\n      }\n    },\n  },\n  dataAttr: true,\n})\n\nexport type InputProps = ComponentProps<typeof Input>\n"],"mappings":";;;;AAKA,IAAa,IAAQ,EAAO,SAAS,GAAO;CAC1C,cAAc,EACZ,UAAU,MAAwC;EAChD,AAAI,EAAM,cAAc,SAAS,YAC/B,EAAM,cAAc,KAAK;CAE7B,EACF;CACA,UAAU;AACZ,CAAC"}
+{"version":3,"file":"Input.js","names":[],"sources":["../../../src/components/input/Input.tsx"],"sourcesContent":["import type { ComponentProps, WheelEvent } from 'react'\n\nimport { styled } from '@stokelp/styled-system/jsx'\nimport { input, type InputVariantProps } from '@stokelp/styled-system/recipes'\nimport type { StyledComponent } from '@stokelp/styled-system/types'\n\n// See FormControl.tsx for why we pin the literal tag with an `as` cast.\n// Without this, `Input` becomes `StyledComponent<string, …>` and loses every\n// native HTML input attribute (type, placeholder, value, ref, etc.) in the\n// emitted d.ts.\nexport const Input = styled('input', input, {\n  defaultProps: {\n    onWheel: (event: WheelEvent<HTMLInputElement>) => {\n      if (event.currentTarget.type === 'number') {\n        event.currentTarget.blur()\n      }\n    },\n  },\n  dataAttr: true,\n}) as StyledComponent<'input', InputVariantProps>\n\nexport type InputProps = ComponentProps<typeof Input>\n"],"mappings":";;;;AAUA,IAAa,IAAQ,EAAO,SAAS,GAAO;CAC1C,cAAc,EACZ,UAAU,MAAwC;EAChD,AAAI,EAAM,cAAc,SAAS,YAC/B,EAAM,cAAc,KAAK;CAE7B,EACF;CACA,UAAU;AACZ,CAAC"}

package/dist/components/input/InputGroup.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"InputGroup.cjs","names":[],"sources":["../../../src/components/input/InputGroup.tsx"],"sourcesContent":["import type { ComponentProps } from 'react'\n\nimport { styled } from '@stokelp/styled-system/jsx'\nimport { inputGroup } from '@stokelp/styled-system/recipes'\n\nexport const InputGroup = styled('div', inputGroup, {\n  dataAttr: true,\n})\n\nexport interface InputGroupProps extends ComponentProps<typeof InputGroup> {}\n"],"mappings":"qGAKA,IAAa,GAAA,EAAA,EAAA,QAAoB,MAAO,EAAA,WAAY,CAClD,SAAU,EACZ,CAAC"}
+{"version":3,"file":"InputGroup.cjs","names":[],"sources":["../../../src/components/input/InputGroup.tsx"],"sourcesContent":["import type { ComponentProps } from 'react'\n\nimport { styled } from '@stokelp/styled-system/jsx'\nimport { inputGroup, type InputGroupVariantProps } from '@stokelp/styled-system/recipes'\nimport type { StyledComponent } from '@stokelp/styled-system/types'\n\n// See FormControl.tsx for why we pin the literal tag with an `as` cast.\nexport const InputGroup = styled('div', inputGroup, {\n  dataAttr: true,\n}) as StyledComponent<'div', InputGroupVariantProps>\n\nexport interface InputGroupProps extends ComponentProps<typeof InputGroup> {}\n"],"mappings":"qGAOA,IAAa,GAAA,EAAA,EAAA,QAAoB,MAAO,EAAA,WAAY,CAClD,SAAU,EACZ,CAAC"}

package/dist/components/input/InputGroup.d.ts

@@ -1,6 +1,6 @@
 import { ComponentProps } from 'react';
-import { StyledComponent } from '@stokelp/styled-system/types';
 import { InputGroupVariantProps } from '@stokelp/styled-system/recipes';
-export declare const InputGroup: StyledComponent<string, InputGroupVariantProps>;
+import { StyledComponent } from '@stokelp/styled-system/types';
+export declare const InputGroup: StyledComponent<"div", InputGroupVariantProps>;
 export interface InputGroupProps extends ComponentProps<typeof InputGroup> {
 }

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

@@ -1 +1 @@
-{"version":3,"file":"InputGroup.js","names":[],"sources":["../../../src/components/input/InputGroup.tsx"],"sourcesContent":["import type { ComponentProps } from 'react'\n\nimport { styled } from '@stokelp/styled-system/jsx'\nimport { inputGroup } from '@stokelp/styled-system/recipes'\n\nexport const InputGroup = styled('div', inputGroup, {\n  dataAttr: true,\n})\n\nexport interface InputGroupProps extends ComponentProps<typeof InputGroup> {}\n"],"mappings":";;;;AAKA,IAAa,IAAa,EAAO,OAAO,GAAY,EAClD,UAAU,GACZ,CAAC"}
+{"version":3,"file":"InputGroup.js","names":[],"sources":["../../../src/components/input/InputGroup.tsx"],"sourcesContent":["import type { ComponentProps } from 'react'\n\nimport { styled } from '@stokelp/styled-system/jsx'\nimport { inputGroup, type InputGroupVariantProps } from '@stokelp/styled-system/recipes'\nimport type { StyledComponent } from '@stokelp/styled-system/types'\n\n// See FormControl.tsx for why we pin the literal tag with an `as` cast.\nexport const InputGroup = styled('div', inputGroup, {\n  dataAttr: true,\n}) as StyledComponent<'div', InputGroupVariantProps>\n\nexport interface InputGroupProps extends ComponentProps<typeof InputGroup> {}\n"],"mappings":";;;;AAOA,IAAa,IAAa,EAAO,OAAO,GAAY,EAClD,UAAU,GACZ,CAAC"}

package/dist/components/table/Table.cjs

@@ -1,2 +1,2 @@
-"use client";const e=require("../../utils/slots.cjs"),t=require("./TableProvider.cjs");let n=require("@stokelp/styled-system/jsx"),r=require("@stokelp/styled-system/recipes"),i=require("react"),a=require("react/jsx-runtime");var{withProvider:o,withContext:s}=e.createStyleContext(r.table),c=(0,n.styled)(`div`,r.tableContainer),l=o((0,n.styled)(`table`),`root`),u=(0,i.forwardRef)(({children:e,onSortChange:n,descriptor:r,...i},o)=>(0,a.jsx)(t.TableProvider,{descriptor:r,onSortChange:n,children:(0,a.jsx)(l,{ref:o,...i,children:e})}));u.displayName=`Table`;var d=s((0,n.styled)(`thead`),`thead`),f=s((0,n.styled)(`div`),`sortIndicatorRoot`),p=s((0,n.styled)(`svg`),`sortIndicator`),m=s((0,n.styled)(`tbody`),`tbody`),h=s((0,n.styled)(`tr`),`tr`),g=s((0,n.styled)(`th`),`th`),_=(0,i.forwardRef)(({children:e,addon:n,sortKey:r,onClick:i,...o},s)=>{let{dispatch:c,sortDescriptor:l}=t.useTable(),u=e=>{r&&(l===null?c({type:`UPDATE_SORT_DESCRIPTOR`,payload:{key:r,direction:`asc`}}):l.key===r?l.direction===`asc`?c({type:`UPDATE_SORT_DESCRIPTOR`,payload:{key:r,direction:`desc`}}):c({type:`CLEAR_SORT_DESCRIPTOR`}):c({type:`UPDATE_SORT_DESCRIPTOR`,payload:{key:r,direction:`asc`}})),i?.(e)};return(0,a.jsxs)(g,{ref:s,...o,...r?{"data-sortable":!0}:{},role:`group`,onClick:u,children:[e,n?(0,a.jsxs)(`span`,{className:`th__addon`,children:[`\xA0`,n]}):null,l&&l.key===r?(0,a.jsxs)(f,{"data-state":`active`,children:[(0,a.jsx)(p,{"data-active":l.direction===`asc`?!0:void 0,viewBox:`0 0 8 8`,fill:`none`,xmlns:`http://www.w3.org/2000/svg`,children:(0,a.jsx)(`path`,{d:`M2.33334 4.83332L4.00001 3.16666L5.66668 4.83332H2.33334Z`,fill:`currentColor`})}),(0,a.jsx)(p,{"data-active":l.direction===`desc`?!0:void 0,viewBox:`0 0 8 8`,fill:`none`,xmlns:`http://www.w3.org/2000/svg`,children:(0,a.jsx)(`path`,{d:`M2.33333 3.16666L3.99999 4.83332L5.66666 3.16666H2.33333Z`,fill:`currentColor`})})]}):r?(0,a.jsxs)(f,{"data-state":`idle`,children:[(0,a.jsx)(p,{"data-active":!0,viewBox:`0 0 8 8`,fill:`none`,xmlns:`http://www.w3.org/2000/svg`,children:(0,a.jsx)(`path`,{d:`M2.33334 4.83332L4.00001 3.16666L5.66668 4.83332H2.33334Z`,fill:`currentColor`})}),(0,a.jsx)(p,{"data-active":!0,viewBox:`0 0 8 8`,fill:`none`,xmlns:`http://www.w3.org/2000/svg`,children:(0,a.jsx)(`path`,{d:`M2.33333 3.16666L3.99999 4.83332L5.66666 3.16666H2.33333Z`,fill:`currentColor`})})]}):null]})});_.displayName=`Th`;var v=s((0,n.styled)(`td`),`td`),y=(0,n.styled)(`td`,r.tableGroupTitle),b=(0,i.forwardRef)((e,t)=>{let n=(0,i.useRef)(null);return(0,i.useLayoutEffect)(()=>{if(n.current){let e=n.current?.closest(`table`)?.querySelector(`thead > tr`);e&&n.current.setAttribute(`colspan`,e.children.length.toString())}},[]),(0,a.jsx)(`tr`,{ref:t,className:`table_tr__group__title`,children:(0,a.jsx)(y,{ref:n,...e})})});b.displayName=`TableGroupTitle`;var x=(0,n.styled)(`td`,r.tableEmptyRow),S=(0,i.forwardRef)((e,t)=>{let n=(0,i.useRef)(null);return(0,i.useLayoutEffect)(()=>{if(n.current){let e=n.current?.closest(`table`)?.querySelector(`thead > tr`);e&&n.current.setAttribute(`colspan`,e.children.length.toString())}},[]),(0,a.jsx)(`tr`,{ref:t,className:`table_tr__empty`,children:(0,a.jsx)(x,{ref:n,...e})})});S.displayName=`TableEmptyRow`,exports.Table=u,exports.TableContainer=c,exports.TableEmptyRow=S,exports.TableGroupTitle=b,exports.Tbody=m,exports.Td=v,exports.Th=_,exports.Thead=d,exports.Tr=h;
+"use client";const e=require("../../utils/slots.cjs"),t=require("./TableProvider.cjs");let n=require("@stokelp/styled-system/jsx"),r=require("@stokelp/styled-system/recipes"),i=require("react"),a=require("react/jsx-runtime");var{withProvider:o,withContext:s}=e.createStyleContext(r.table),c=e=>(0,n.styled)(e),l=(0,n.styled)(`div`,r.tableContainer),u=o(c(`table`),`root`),d=(0,i.forwardRef)(({children:e,onSortChange:n,descriptor:r,...i},o)=>(0,a.jsx)(t.TableProvider,{descriptor:r,onSortChange:n,children:(0,a.jsx)(u,{ref:o,...i,children:e})}));d.displayName=`Table`;var f=s(c(`thead`),`thead`),p=s(c(`div`),`sortIndicatorRoot`),m=s(c(`svg`),`sortIndicator`),h=s(c(`tbody`),`tbody`),g=s(c(`tr`),`tr`),_=s(c(`th`),`th`),v=(0,i.forwardRef)(({children:e,addon:n,sortKey:r,onClick:i,...o},s)=>{let{dispatch:c,sortDescriptor:l}=t.useTable(),u=e=>{r&&(l===null?c({type:`UPDATE_SORT_DESCRIPTOR`,payload:{key:r,direction:`asc`}}):l.key===r?l.direction===`asc`?c({type:`UPDATE_SORT_DESCRIPTOR`,payload:{key:r,direction:`desc`}}):c({type:`CLEAR_SORT_DESCRIPTOR`}):c({type:`UPDATE_SORT_DESCRIPTOR`,payload:{key:r,direction:`asc`}})),i?.(e)};return(0,a.jsxs)(_,{ref:s,...o,...r?{"data-sortable":!0}:{},role:`group`,onClick:u,children:[e,n?(0,a.jsxs)(`span`,{className:`th__addon`,children:[`\xA0`,n]}):null,l&&l.key===r?(0,a.jsxs)(p,{"data-state":`active`,children:[(0,a.jsx)(m,{"data-active":l.direction===`asc`?!0:void 0,viewBox:`0 0 8 8`,fill:`none`,xmlns:`http://www.w3.org/2000/svg`,children:(0,a.jsx)(`path`,{d:`M2.33334 4.83332L4.00001 3.16666L5.66668 4.83332H2.33334Z`,fill:`currentColor`})}),(0,a.jsx)(m,{"data-active":l.direction===`desc`?!0:void 0,viewBox:`0 0 8 8`,fill:`none`,xmlns:`http://www.w3.org/2000/svg`,children:(0,a.jsx)(`path`,{d:`M2.33333 3.16666L3.99999 4.83332L5.66666 3.16666H2.33333Z`,fill:`currentColor`})})]}):r?(0,a.jsxs)(p,{"data-state":`idle`,children:[(0,a.jsx)(m,{"data-active":!0,viewBox:`0 0 8 8`,fill:`none`,xmlns:`http://www.w3.org/2000/svg`,children:(0,a.jsx)(`path`,{d:`M2.33334 4.83332L4.00001 3.16666L5.66668 4.83332H2.33334Z`,fill:`currentColor`})}),(0,a.jsx)(m,{"data-active":!0,viewBox:`0 0 8 8`,fill:`none`,xmlns:`http://www.w3.org/2000/svg`,children:(0,a.jsx)(`path`,{d:`M2.33333 3.16666L3.99999 4.83332L5.66666 3.16666H2.33333Z`,fill:`currentColor`})})]}):null]})});v.displayName=`Th`;var y=s(c(`td`),`td`),b=(0,n.styled)(`td`,r.tableGroupTitle),x=(0,i.forwardRef)((e,t)=>{let n=(0,i.useRef)(null);return(0,i.useLayoutEffect)(()=>{if(n.current){let e=n.current?.closest(`table`)?.querySelector(`thead > tr`);e&&n.current.setAttribute(`colspan`,e.children.length.toString())}},[]),(0,a.jsx)(`tr`,{ref:t,className:`table_tr__group__title`,children:(0,a.jsx)(b,{ref:n,...e})})});x.displayName=`TableGroupTitle`;var S=(0,n.styled)(`td`,r.tableEmptyRow),C=(0,i.forwardRef)((e,t)=>{let n=(0,i.useRef)(null);return(0,i.useLayoutEffect)(()=>{if(n.current){let e=n.current?.closest(`table`)?.querySelector(`thead > tr`);e&&n.current.setAttribute(`colspan`,e.children.length.toString())}},[]),(0,a.jsx)(`tr`,{ref:t,className:`table_tr__empty`,children:(0,a.jsx)(S,{ref:n,...e})})});C.displayName=`TableEmptyRow`,exports.Table=d,exports.TableContainer=l,exports.TableEmptyRow=C,exports.TableGroupTitle=x,exports.Tbody=h,exports.Td=y,exports.Th=v,exports.Thead=f,exports.Tr=g;
 //# sourceMappingURL=Table.cjs.map

package/dist/components/table/Table.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Table.cjs","names":[],"sources":["../../../src/components/table/Table.tsx"],"sourcesContent":["import type { ComponentProps, ElementRef, FC, MouseEvent, ReactNode } from 'react'\nimport { forwardRef, useLayoutEffect, useRef } from 'react'\nimport { styled } from '@stokelp/styled-system/jsx'\nimport { table, tableContainer, tableEmptyRow, tableGroupTitle } from '@stokelp/styled-system/recipes'\nimport { createStyleContext } from '~/utils/slots'\nimport { TableProvider, type TableProviderProps, useTable } from './TableProvider'\n\nconst { withProvider, withContext } = createStyleContext(table)\n\nexport const TableContainer = styled('div', tableContainer)\n\nconst StyledTable = withProvider(styled('table'), 'root')\ntype StyledTableProps = ComponentProps<typeof StyledTable>\n\nexport type TableProps = StyledTableProps & Pick<TableProviderProps, 'onSortChange' | 'descriptor'>\n\nexport const Table = forwardRef<ElementRef<typeof StyledTable>, TableProps>(\n  ({ children, onSortChange, descriptor, ...props }, ref) => {\n    return (\n      <TableProvider descriptor={descriptor} onSortChange={onSortChange}>\n        <StyledTable ref={ref} {...props}>\n          {children}\n        </StyledTable>\n      </TableProvider>\n    )\n  },\n) as FC<TableProps>\n\nTable.displayName = 'Table'\n\nexport const Thead = withContext(styled('thead'), 'thead')\nconst SortIndicatorRoot = withContext(styled('div'), 'sortIndicatorRoot')\nconst SortIndicator = withContext(styled('svg'), 'sortIndicator')\nexport const Tbody = withContext(styled('tbody'), 'tbody')\nexport const Tr = withContext(styled('tr'), 'tr')\nconst StyledTh = withContext(styled('th'), 'th')\n\ntype StyledThProps = ComponentProps<typeof StyledTh>\n\nexport type ThProps = StyledThProps & {\n  addon?: ReactNode\n  sortKey?: string\n}\n\nexport const Th = forwardRef<ElementRef<typeof StyledTh>, ThProps>(\n  ({ children, addon, sortKey, onClick, ...props }, ref) => {\n    const { dispatch, sortDescriptor } = useTable()\n\n    const handleOnClick = (e: MouseEvent<HTMLTableCellElement>) => {\n      if (sortKey) {\n        if (sortDescriptor === null) {\n          dispatch({\n            type: 'UPDATE_SORT_DESCRIPTOR',\n            payload: {\n              key: sortKey,\n              direction: 'asc',\n            },\n          })\n        } else if (sortDescriptor.key === sortKey) {\n          if (sortDescriptor.direction === 'asc') {\n            dispatch({\n              type: 'UPDATE_SORT_DESCRIPTOR',\n              payload: {\n                key: sortKey,\n                direction: 'desc',\n              },\n            })\n          } else {\n            dispatch({\n              type: 'CLEAR_SORT_DESCRIPTOR',\n            })\n          }\n        } else {\n          dispatch({\n            type: 'UPDATE_SORT_DESCRIPTOR',\n            payload: {\n              key: sortKey,\n              direction: 'asc',\n            },\n          })\n        }\n      }\n      onClick?.(e)\n    }\n\n    return (\n      <StyledTh\n        ref={ref}\n        {...props}\n        {...(sortKey ? { 'data-sortable': true } : {})}\n        role=\"group\"\n        onClick={handleOnClick}\n      >\n        {children}\n        {addon ? <span className=\"th__addon\">&nbsp;{addon}</span> : null}\n        {sortDescriptor && sortDescriptor.key === sortKey ? (\n          <SortIndicatorRoot data-state=\"active\">\n            <SortIndicator\n              data-active={sortDescriptor.direction === 'asc' ? true : undefined}\n              viewBox=\"0 0 8 8\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path d=\"M2.33334 4.83332L4.00001 3.16666L5.66668 4.83332H2.33334Z\" fill=\"currentColor\" />\n            </SortIndicator>\n            <SortIndicator\n              data-active={sortDescriptor.direction === 'desc' ? true : undefined}\n              viewBox=\"0 0 8 8\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path d=\"M2.33333 3.16666L3.99999 4.83332L5.66666 3.16666H2.33333Z\" fill=\"currentColor\" />\n            </SortIndicator>\n          </SortIndicatorRoot>\n        ) : sortKey ? (\n          <SortIndicatorRoot data-state=\"idle\">\n            <SortIndicator data-active={true} viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path d=\"M2.33334 4.83332L4.00001 3.16666L5.66668 4.83332H2.33334Z\" fill=\"currentColor\" />\n            </SortIndicator>\n            <SortIndicator data-active={true} viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path d=\"M2.33333 3.16666L3.99999 4.83332L5.66666 3.16666H2.33333Z\" fill=\"currentColor\" />\n            </SortIndicator>\n          </SortIndicatorRoot>\n        ) : null}\n      </StyledTh>\n    )\n  },\n) as FC<ThProps>\n\nTh.displayName = 'Th'\n\nexport const Td = withContext(styled('td'), 'td')\n\nconst StyledTableGroupTitle = styled('td', tableGroupTitle)\nexport type TableGroupTitleProps = ComponentProps<typeof StyledTableGroupTitle>\nexport const TableGroupTitle = forwardRef<HTMLTableRowElement, TableGroupTitleProps>((props, ref) => {\n  const $td = useRef<ElementRef<typeof StyledTableGroupTitle>>(null)\n  useLayoutEffect(() => {\n    if ($td.current) {\n      const tableColumns = $td.current?.closest('table')?.querySelector('thead > tr')\n      if (tableColumns) {\n        $td.current.setAttribute('colspan', tableColumns.children.length.toString())\n      }\n    }\n  }, [])\n\n  return (\n    <tr ref={ref} className=\"table_tr__group__title\">\n      <StyledTableGroupTitle ref={$td} {...props} />\n    </tr>\n  )\n}) as FC<TableGroupTitleProps>\nTableGroupTitle.displayName = 'TableGroupTitle'\n\nconst StyledTableEmptyRow = styled('td', tableEmptyRow)\nexport type TableEmptyRowProps = ComponentProps<typeof StyledTableEmptyRow>\nexport const TableEmptyRow = forwardRef<HTMLTableRowElement, TableEmptyRowProps>((props, ref) => {\n  const $td = useRef<ElementRef<typeof StyledTableEmptyRow>>(null)\n  useLayoutEffect(() => {\n    if ($td.current) {\n      const tableColumns = $td.current?.closest('table')?.querySelector('thead > tr')\n      if (tableColumns) {\n        $td.current.setAttribute('colspan', tableColumns.children.length.toString())\n      }\n    }\n  }, [])\n\n  return (\n    <tr ref={ref} className=\"table_tr__empty\">\n      <StyledTableEmptyRow ref={$td} {...props} />\n    </tr>\n  )\n}) as FC<TableEmptyRowProps>\nTableEmptyRow.displayName = 'TableEmptyRow'\n\nexport interface TheadProps extends ComponentProps<typeof Thead> {}\n\nexport interface TbodyProps extends ComponentProps<typeof Tbody> {}\n\nexport interface TrProps extends ComponentProps<typeof Tr> {}\n\nexport interface TdProps extends ComponentProps<typeof Td> {}\n\nexport interface TableContainerProps extends ComponentProps<typeof TableContainer> {}\n"],"mappings":"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"}
+{"version":3,"file":"Table.cjs","names":[],"sources":["../../../src/components/table/Table.tsx"],"sourcesContent":["import type { ComponentProps, ElementRef, FC, JSX, MouseEvent, ReactNode } from 'react'\nimport { forwardRef, useLayoutEffect, useRef } from 'react'\nimport { styled } from '@stokelp/styled-system/jsx'\nimport {\n  table,\n  tableContainer,\n  tableEmptyRow,\n  tableGroupTitle,\n  type TableContainerVariantProps,\n  type TableEmptyRowVariantProps,\n  type TableGroupTitleVariantProps,\n} from '@stokelp/styled-system/recipes'\nimport type { StyledComponent } from '@stokelp/styled-system/types'\nimport { createStyleContext } from '~/utils/slots'\nimport { TableProvider, type TableProviderProps, useTable } from './TableProvider'\n\nconst { withProvider, withContext } = createStyleContext(table)\n\n// Helper: `styled('tag')` returns `StyledComponent<T, {}>` but TS widens the\n// literal to `string` at d.ts emit, stripping every native HTML attribute\n// from consumer typings. This wrapper pins the literal tag via the generic.\nconst styledTag = <T extends keyof JSX.IntrinsicElements>(tag: T): StyledComponent<T, {}> =>\n  styled(tag) as StyledComponent<T, {}>\n\nexport const TableContainer = styled('div', tableContainer) as StyledComponent<'div', TableContainerVariantProps>\n\nconst StyledTable = withProvider(styledTag('table'), 'root')\ntype StyledTableProps = ComponentProps<typeof StyledTable>\n\nexport type TableProps = StyledTableProps & Pick<TableProviderProps, 'onSortChange' | 'descriptor'>\n\nexport const Table = forwardRef<ElementRef<typeof StyledTable>, TableProps>(\n  ({ children, onSortChange, descriptor, ...props }, ref) => {\n    return (\n      <TableProvider descriptor={descriptor} onSortChange={onSortChange}>\n        <StyledTable ref={ref} {...props}>\n          {children}\n        </StyledTable>\n      </TableProvider>\n    )\n  },\n) as FC<TableProps>\n\nTable.displayName = 'Table'\n\nexport const Thead = withContext(styledTag('thead'), 'thead')\nconst SortIndicatorRoot = withContext(styledTag('div'), 'sortIndicatorRoot')\nconst SortIndicator = withContext(styledTag('svg'), 'sortIndicator')\nexport const Tbody = withContext(styledTag('tbody'), 'tbody')\nexport const Tr = withContext(styledTag('tr'), 'tr')\nconst StyledTh = withContext(styledTag('th'), 'th')\n\ntype StyledThProps = ComponentProps<typeof StyledTh>\n\nexport type ThProps = StyledThProps & {\n  addon?: ReactNode\n  sortKey?: string\n}\n\nexport const Th = forwardRef<ElementRef<typeof StyledTh>, ThProps>(\n  ({ children, addon, sortKey, onClick, ...props }, ref) => {\n    const { dispatch, sortDescriptor } = useTable()\n\n    const handleOnClick = (e: MouseEvent<HTMLTableCellElement>) => {\n      if (sortKey) {\n        if (sortDescriptor === null) {\n          dispatch({\n            type: 'UPDATE_SORT_DESCRIPTOR',\n            payload: {\n              key: sortKey,\n              direction: 'asc',\n            },\n          })\n        } else if (sortDescriptor.key === sortKey) {\n          if (sortDescriptor.direction === 'asc') {\n            dispatch({\n              type: 'UPDATE_SORT_DESCRIPTOR',\n              payload: {\n                key: sortKey,\n                direction: 'desc',\n              },\n            })\n          } else {\n            dispatch({\n              type: 'CLEAR_SORT_DESCRIPTOR',\n            })\n          }\n        } else {\n          dispatch({\n            type: 'UPDATE_SORT_DESCRIPTOR',\n            payload: {\n              key: sortKey,\n              direction: 'asc',\n            },\n          })\n        }\n      }\n      onClick?.(e)\n    }\n\n    return (\n      <StyledTh\n        ref={ref}\n        {...props}\n        {...(sortKey ? { 'data-sortable': true } : {})}\n        role=\"group\"\n        onClick={handleOnClick}\n      >\n        {children}\n        {addon ? <span className=\"th__addon\">&nbsp;{addon}</span> : null}\n        {sortDescriptor && sortDescriptor.key === sortKey ? (\n          <SortIndicatorRoot data-state=\"active\">\n            <SortIndicator\n              data-active={sortDescriptor.direction === 'asc' ? true : undefined}\n              viewBox=\"0 0 8 8\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path d=\"M2.33334 4.83332L4.00001 3.16666L5.66668 4.83332H2.33334Z\" fill=\"currentColor\" />\n            </SortIndicator>\n            <SortIndicator\n              data-active={sortDescriptor.direction === 'desc' ? true : undefined}\n              viewBox=\"0 0 8 8\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path d=\"M2.33333 3.16666L3.99999 4.83332L5.66666 3.16666H2.33333Z\" fill=\"currentColor\" />\n            </SortIndicator>\n          </SortIndicatorRoot>\n        ) : sortKey ? (\n          <SortIndicatorRoot data-state=\"idle\">\n            <SortIndicator data-active={true} viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path d=\"M2.33334 4.83332L4.00001 3.16666L5.66668 4.83332H2.33334Z\" fill=\"currentColor\" />\n            </SortIndicator>\n            <SortIndicator data-active={true} viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path d=\"M2.33333 3.16666L3.99999 4.83332L5.66666 3.16666H2.33333Z\" fill=\"currentColor\" />\n            </SortIndicator>\n          </SortIndicatorRoot>\n        ) : null}\n      </StyledTh>\n    )\n  },\n) as FC<ThProps>\n\nTh.displayName = 'Th'\n\nexport const Td = withContext(styledTag('td'), 'td')\n\nconst StyledTableGroupTitle = styled('td', tableGroupTitle) as StyledComponent<'td', TableGroupTitleVariantProps>\nexport type TableGroupTitleProps = ComponentProps<typeof StyledTableGroupTitle>\nexport const TableGroupTitle = forwardRef<HTMLTableRowElement, TableGroupTitleProps>((props, ref) => {\n  const $td = useRef<ElementRef<typeof StyledTableGroupTitle>>(null)\n  useLayoutEffect(() => {\n    if ($td.current) {\n      const tableColumns = $td.current?.closest('table')?.querySelector('thead > tr')\n      if (tableColumns) {\n        $td.current.setAttribute('colspan', tableColumns.children.length.toString())\n      }\n    }\n  }, [])\n\n  return (\n    <tr ref={ref} className=\"table_tr__group__title\">\n      <StyledTableGroupTitle ref={$td} {...props} />\n    </tr>\n  )\n}) as FC<TableGroupTitleProps>\nTableGroupTitle.displayName = 'TableGroupTitle'\n\nconst StyledTableEmptyRow = styled('td', tableEmptyRow) as StyledComponent<'td', TableEmptyRowVariantProps>\nexport type TableEmptyRowProps = ComponentProps<typeof StyledTableEmptyRow>\nexport const TableEmptyRow = forwardRef<HTMLTableRowElement, TableEmptyRowProps>((props, ref) => {\n  const $td = useRef<ElementRef<typeof StyledTableEmptyRow>>(null)\n  useLayoutEffect(() => {\n    if ($td.current) {\n      const tableColumns = $td.current?.closest('table')?.querySelector('thead > tr')\n      if (tableColumns) {\n        $td.current.setAttribute('colspan', tableColumns.children.length.toString())\n      }\n    }\n  }, [])\n\n  return (\n    <tr ref={ref} className=\"table_tr__empty\">\n      <StyledTableEmptyRow ref={$td} {...props} />\n    </tr>\n  )\n}) as FC<TableEmptyRowProps>\nTableEmptyRow.displayName = 'TableEmptyRow'\n\nexport interface TheadProps extends ComponentProps<typeof Thead> {}\n\nexport interface TbodyProps extends ComponentProps<typeof Tbody> {}\n\nexport interface TrProps extends ComponentProps<typeof Tr> {}\n\nexport interface TdProps extends ComponentProps<typeof Td> {}\n\nexport interface TableContainerProps extends ComponentProps<typeof TableContainer> {}\n"],"mappings":"iOAgBA,GAAM,CAAE,eAAc,eAAgB,EAAA,mBAAmB,EAAA,KAAK,EAKxD,EAAoD,IAAA,EAAA,EAAA,QACjD,CAAG,EAEC,GAAA,EAAA,EAAA,QAAwB,MAAO,EAAA,cAAc,EAEpD,EAAc,EAAa,EAAU,OAAO,EAAG,MAAM,EAK9C,GAAA,EAAA,EAAA,aACV,CAAE,WAAU,eAAc,aAAY,GAAG,GAAS,KAE/C,EAAA,EAAA,KAAC,EAAA,cAAD,CAA2B,aAA0B,yBACnD,EAAA,EAAA,KAAC,EAAD,CAAkB,MAAK,GAAI,EACxB,UACU,CAAA,CACA,CAAA,CAGrB,EAEA,EAAM,YAAc,QAEpB,IAAa,EAAQ,EAAY,EAAU,OAAO,EAAG,OAAO,EACtD,EAAoB,EAAY,EAAU,KAAK,EAAG,mBAAmB,EACrE,EAAgB,EAAY,EAAU,KAAK,EAAG,eAAe,EACtD,EAAQ,EAAY,EAAU,OAAO,EAAG,OAAO,EAC/C,EAAK,EAAY,EAAU,IAAI,EAAG,IAAI,EAC7C,EAAW,EAAY,EAAU,IAAI,EAAG,IAAI,EASrC,GAAA,EAAA,EAAA,aACV,CAAE,WAAU,QAAO,UAAS,UAAS,GAAG,GAAS,IAAQ,CACxD,GAAM,CAAE,WAAU,kBAAmB,EAAA,SAAS,EAExC,EAAiB,GAAwC,CACzD,IACE,IAAmB,KACrB,EAAS,CACP,KAAM,yBACN,QAAS,CACP,IAAK,EACL,UAAW,KACb,CACF,CAAC,EACQ,EAAe,MAAQ,EAC5B,EAAe,YAAc,MAC/B,EAAS,CACP,KAAM,yBACN,QAAS,CACP,IAAK,EACL,UAAW,MACb,CACF,CAAC,EAED,EAAS,CACP,KAAM,uBACR,CAAC,EAGH,EAAS,CACP,KAAM,yBACN,QAAS,CACP,IAAK,EACL,UAAW,KACb,CACF,CAAC,GAGL,IAAU,CAAC,CACb,EAEA,OACE,EAAA,EAAA,MAAC,EAAD,CACO,MACL,GAAI,EACJ,GAAK,EAAU,CAAE,gBAAiB,EAAK,EAAI,CAAC,EAC5C,KAAK,QACL,QAAS,WALX,CAOG,EACA,GAAQ,EAAA,EAAA,MAAC,OAAD,CAAM,UAAU,qBAAhB,CAA4B,OAAO,CAAY,IAAI,KAC3D,GAAkB,EAAe,MAAQ,GACxC,EAAA,EAAA,MAAC,EAAD,CAAmB,aAAW,kBAA9B,EACE,EAAA,EAAA,KAAC,EAAD,CACE,cAAa,EAAe,YAAc,MAAQ,GAAO,IAAA,GACzD,QAAQ,UACR,KAAK,OACL,MAAM,uCAEN,EAAA,EAAA,KAAC,OAAD,CAAM,EAAE,4DAA4D,KAAK,cAAgB,CAAA,CAC5E,CAAA,GACf,EAAA,EAAA,KAAC,EAAD,CACE,cAAa,EAAe,YAAc,OAAS,GAAO,IAAA,GAC1D,QAAQ,UACR,KAAK,OACL,MAAM,uCAEN,EAAA,EAAA,KAAC,OAAD,CAAM,EAAE,4DAA4D,KAAK,cAAgB,CAAA,CAC5E,CAAA,CACE,IACjB,GACF,EAAA,EAAA,MAAC,EAAD,CAAmB,aAAW,gBAA9B,EACE,EAAA,EAAA,KAAC,EAAD,CAAe,cAAa,GAAM,QAAQ,UAAU,KAAK,OAAO,MAAM,uCACpE,EAAA,EAAA,KAAC,OAAD,CAAM,EAAE,4DAA4D,KAAK,cAAgB,CAAA,CAC5E,CAAA,GACf,EAAA,EAAA,KAAC,EAAD,CAAe,cAAa,GAAM,QAAQ,UAAU,KAAK,OAAO,MAAM,uCACpE,EAAA,EAAA,KAAC,OAAD,CAAM,EAAE,4DAA4D,KAAK,cAAgB,CAAA,CAC5E,CAAA,CACE,IACjB,IACI,GAEd,CACF,EAEA,EAAG,YAAc,KAEjB,IAAa,EAAK,EAAY,EAAU,IAAI,EAAG,IAAI,EAE7C,GAAA,EAAA,EAAA,QAA+B,KAAM,EAAA,eAAe,EAE7C,GAAA,EAAA,EAAA,aAAyE,EAAO,IAAQ,CACnG,IAAM,GAAA,EAAA,EAAA,QAAuD,IAAI,EAUjE,OATA,EAAA,EAAA,qBAAsB,CACpB,GAAI,EAAI,QAAS,CACf,IAAM,EAAe,EAAI,SAAS,QAAQ,OAAO,GAAG,cAAc,YAAY,EAC1E,GACF,EAAI,QAAQ,aAAa,UAAW,EAAa,SAAS,OAAO,SAAS,CAAC,CAE/E,CACF,EAAG,CAAC,CAAC,GAGH,EAAA,EAAA,KAAC,KAAD,CAAS,MAAK,UAAU,mCACtB,EAAA,EAAA,KAAC,EAAD,CAAuB,IAAK,EAAK,GAAI,CAAQ,CAAA,CAC3C,CAAA,CAER,CAAC,EACD,EAAgB,YAAc,kBAE9B,IAAM,GAAA,EAAA,EAAA,QAA6B,KAAM,EAAA,aAAa,EAEzC,GAAA,EAAA,EAAA,aAAqE,EAAO,IAAQ,CAC/F,IAAM,GAAA,EAAA,EAAA,QAAqD,IAAI,EAU/D,OATA,EAAA,EAAA,qBAAsB,CACpB,GAAI,EAAI,QAAS,CACf,IAAM,EAAe,EAAI,SAAS,QAAQ,OAAO,GAAG,cAAc,YAAY,EAC1E,GACF,EAAI,QAAQ,aAAa,UAAW,EAAa,SAAS,OAAO,SAAS,CAAC,CAE/E,CACF,EAAG,CAAC,CAAC,GAGH,EAAA,EAAA,KAAC,KAAD,CAAS,MAAK,UAAU,4BACtB,EAAA,EAAA,KAAC,EAAD,CAAqB,IAAK,EAAK,GAAI,CAAQ,CAAA,CACzC,CAAA,CAER,CAAC,EACD,EAAc,YAAc"}

package/dist/components/table/Table.d.ts

@@ -1,28 +1,28 @@
 import { ComponentProps, FC, ReactNode } from 'react';
-import { TableProviderProps } from './TableProvider';
+import { TableContainerVariantProps, TableEmptyRowVariantProps, TableGroupTitleVariantProps, TableRecipe } from '@stokelp/styled-system/recipes';
 import { StyledComponent } from '@stokelp/styled-system/types';
-import { TableContainerVariantProps, TableRecipe, TableGroupTitleVariantProps, TableEmptyRowVariantProps } from '@stokelp/styled-system/recipes';
+import { TableProviderProps } from './TableProvider';
 import { ComponentVariants } from '../../utils/slots';
-export declare const TableContainer: StyledComponent<string, TableContainerVariantProps>;
-declare const StyledTable: ComponentVariants<StyledComponent<string, {}>, TableRecipe>;
+export declare const TableContainer: StyledComponent<"div", TableContainerVariantProps>;
+declare const StyledTable: ComponentVariants<StyledComponent<"table", {}>, TableRecipe>;
 type StyledTableProps = ComponentProps<typeof StyledTable>;
 export type TableProps = StyledTableProps & Pick<TableProviderProps, 'onSortChange' | 'descriptor'>;
 export declare const Table: FC<TableProps>;
-export declare const Thead: StyledComponent<string, {}>;
-export declare const Tbody: StyledComponent<string, {}>;
-export declare const Tr: StyledComponent<string, {}>;
-declare const StyledTh: StyledComponent<string, {}>;
+export declare const Thead: StyledComponent<"thead", {}>;
+export declare const Tbody: StyledComponent<"tbody", {}>;
+export declare const Tr: StyledComponent<"tr", {}>;
+declare const StyledTh: StyledComponent<"th", {}>;
 type StyledThProps = ComponentProps<typeof StyledTh>;
 export type ThProps = StyledThProps & {
     addon?: ReactNode;
     sortKey?: string;
 };
 export declare const Th: FC<ThProps>;
-export declare const Td: StyledComponent<string, {}>;
-declare const StyledTableGroupTitle: StyledComponent<string, TableGroupTitleVariantProps>;
+export declare const Td: StyledComponent<"td", {}>;
+declare const StyledTableGroupTitle: StyledComponent<"td", TableGroupTitleVariantProps>;
 export type TableGroupTitleProps = ComponentProps<typeof StyledTableGroupTitle>;
 export declare const TableGroupTitle: FC<TableGroupTitleProps>;
-declare const StyledTableEmptyRow: StyledComponent<string, TableEmptyRowVariantProps>;
+declare const StyledTableEmptyRow: StyledComponent<"td", TableEmptyRowVariantProps>;
 export type TableEmptyRowProps = ComponentProps<typeof StyledTableEmptyRow>;
 export declare const TableEmptyRow: FC<TableEmptyRowProps>;
 export interface TheadProps extends ComponentProps<typeof Thead> {

package/dist/components/table/Table.js

@@ -6,17 +6,17 @@ import { table as i, tableContainer as a, tableEmptyRow as o, tableGroupTitle as
 import { forwardRef as c, useLayoutEffect as l, useRef as u } from "react";
 import { jsx as d, jsxs as f } from "react/jsx-runtime";
 //#region src/components/table/Table.tsx
-var { withProvider: p, withContext: m } = e(i), h = r("div", a), g = p(r("table"), "root"), _ = c(({ children: e, onSortChange: n, descriptor: r, ...i }, a) => /* @__PURE__ */ d(t, {
+var { withProvider: p, withContext: m } = e(i), h = (e) => r(e), g = r("div", a), _ = p(h("table"), "root"), v = c(({ children: e, onSortChange: n, descriptor: r, ...i }, a) => /* @__PURE__ */ d(t, {
 	descriptor: r,
 	onSortChange: n,
-	children: /* @__PURE__ */ d(g, {
+	children: /* @__PURE__ */ d(_, {
 		ref: a,
 		...i,
 		children: e
 	})
 }));
-_.displayName = "Table";
-var v = m(r("thead"), "thead"), y = m(r("div"), "sortIndicatorRoot"), b = m(r("svg"), "sortIndicator"), x = m(r("tbody"), "tbody"), S = m(r("tr"), "tr"), C = m(r("th"), "th"), w = c(({ children: e, addon: t, sortKey: r, onClick: i, ...a }, o) => {
+v.displayName = "Table";
+var y = m(h("thead"), "thead"), b = m(h("div"), "sortIndicatorRoot"), x = m(h("svg"), "sortIndicator"), S = m(h("tbody"), "tbody"), C = m(h("tr"), "tr"), w = m(h("th"), "th"), T = c(({ children: e, addon: t, sortKey: r, onClick: i, ...a }, o) => {
 	let { dispatch: s, sortDescriptor: c } = n(), l = (e) => {
 		r && (c === null ? s({
 			type: "UPDATE_SORT_DESCRIPTOR",
@@ -38,7 +38,7 @@ var v = m(r("thead"), "thead"), y = m(r("div"), "sortIndicatorRoot"), b = m(r("s
 			}
 		})), i?.(e);
 	};
-	return /* @__PURE__ */ f(C, {
+	return /* @__PURE__ */ f(w, {
 		ref: o,
 		...a,
 		...r ? { "data-sortable": !0 } : {},
@@ -50,9 +50,9 @@ var v = m(r("thead"), "thead"), y = m(r("div"), "sortIndicatorRoot"), b = m(r("s
 				className: "th__addon",
 				children: ["\xA0", t]
 			}) : null,
-			c && c.key === r ? /* @__PURE__ */ f(y, {
+			c && c.key === r ? /* @__PURE__ */ f(b, {
 				"data-state": "active",
-				children: [/* @__PURE__ */ d(b, {
+				children: [/* @__PURE__ */ d(x, {
 					"data-active": c.direction === "asc" ? !0 : void 0,
 					viewBox: "0 0 8 8",
 					fill: "none",
@@ -61,7 +61,7 @@ var v = m(r("thead"), "thead"), y = m(r("div"), "sortIndicatorRoot"), b = m(r("s
 						d: "M2.33334 4.83332L4.00001 3.16666L5.66668 4.83332H2.33334Z",
 						fill: "currentColor"
 					})
-				}), /* @__PURE__ */ d(b, {
+				}), /* @__PURE__ */ d(x, {
 					"data-active": c.direction === "desc" ? !0 : void 0,
 					viewBox: "0 0 8 8",
 					fill: "none",
@@ -71,9 +71,9 @@ var v = m(r("thead"), "thead"), y = m(r("div"), "sortIndicatorRoot"), b = m(r("s
 						fill: "currentColor"
 					})
 				})]
-			}) : r ? /* @__PURE__ */ f(y, {
+			}) : r ? /* @__PURE__ */ f(b, {
 				"data-state": "idle",
-				children: [/* @__PURE__ */ d(b, {
+				children: [/* @__PURE__ */ d(x, {
 					"data-active": !0,
 					viewBox: "0 0 8 8",
 					fill: "none",
@@ -82,7 +82,7 @@ var v = m(r("thead"), "thead"), y = m(r("div"), "sortIndicatorRoot"), b = m(r("s
 						d: "M2.33334 4.83332L4.00001 3.16666L5.66668 4.83332H2.33334Z",
 						fill: "currentColor"
 					})
-				}), /* @__PURE__ */ d(b, {
+				}), /* @__PURE__ */ d(x, {
 					"data-active": !0,
 					viewBox: "0 0 8 8",
 					fill: "none",
@@ -96,8 +96,8 @@ var v = m(r("thead"), "thead"), y = m(r("div"), "sortIndicatorRoot"), b = m(r("s
 		]
 	});
 });
-w.displayName = "Th";
-var T = m(r("td"), "td"), E = r("td", s), D = c((e, t) => {
+T.displayName = "Th";
+var E = m(h("td"), "td"), D = r("td", s), O = c((e, t) => {
 	let n = u(null);
 	return l(() => {
 		if (n.current) {
@@ -107,14 +107,14 @@ var T = m(r("td"), "td"), E = r("td", s), D = c((e, t) => {
 	}, []), /* @__PURE__ */ d("tr", {
 		ref: t,
 		className: "table_tr__group__title",
-		children: /* @__PURE__ */ d(E, {
+		children: /* @__PURE__ */ d(D, {
 			ref: n,
 			...e
 		})
 	});
 });
-D.displayName = "TableGroupTitle";
-var O = r("td", o), k = c((e, t) => {
+O.displayName = "TableGroupTitle";
+var k = r("td", o), A = c((e, t) => {
 	let n = u(null);
 	return l(() => {
 		if (n.current) {
@@ -124,14 +124,14 @@ var O = r("td", o), k = c((e, t) => {
 	}, []), /* @__PURE__ */ d("tr", {
 		ref: t,
 		className: "table_tr__empty",
-		children: /* @__PURE__ */ d(O, {
+		children: /* @__PURE__ */ d(k, {
 			ref: n,
 			...e
 		})
 	});
 });
-k.displayName = "TableEmptyRow";
+A.displayName = "TableEmptyRow";
 //#endregion
-export { _ as Table, h as TableContainer, k as TableEmptyRow, D as TableGroupTitle, x as Tbody, T as Td, w as Th, v as Thead, S as Tr };
+export { v as Table, g as TableContainer, A as TableEmptyRow, O as TableGroupTitle, S as Tbody, E as Td, T as Th, y as Thead, C as Tr };
 
 //# sourceMappingURL=Table.js.map

package/dist/components/table/Table.js.map

@@ -1 +1 @@
-{"version":3,"file":"Table.js","names":[],"sources":["../../../src/components/table/Table.tsx"],"sourcesContent":["import type { ComponentProps, ElementRef, FC, MouseEvent, ReactNode } from 'react'\nimport { forwardRef, useLayoutEffect, useRef } from 'react'\nimport { styled } from '@stokelp/styled-system/jsx'\nimport { table, tableContainer, tableEmptyRow, tableGroupTitle } from '@stokelp/styled-system/recipes'\nimport { createStyleContext } from '~/utils/slots'\nimport { TableProvider, type TableProviderProps, useTable } from './TableProvider'\n\nconst { withProvider, withContext } = createStyleContext(table)\n\nexport const TableContainer = styled('div', tableContainer)\n\nconst StyledTable = withProvider(styled('table'), 'root')\ntype StyledTableProps = ComponentProps<typeof StyledTable>\n\nexport type TableProps = StyledTableProps & Pick<TableProviderProps, 'onSortChange' | 'descriptor'>\n\nexport const Table = forwardRef<ElementRef<typeof StyledTable>, TableProps>(\n  ({ children, onSortChange, descriptor, ...props }, ref) => {\n    return (\n      <TableProvider descriptor={descriptor} onSortChange={onSortChange}>\n        <StyledTable ref={ref} {...props}>\n          {children}\n        </StyledTable>\n      </TableProvider>\n    )\n  },\n) as FC<TableProps>\n\nTable.displayName = 'Table'\n\nexport const Thead = withContext(styled('thead'), 'thead')\nconst SortIndicatorRoot = withContext(styled('div'), 'sortIndicatorRoot')\nconst SortIndicator = withContext(styled('svg'), 'sortIndicator')\nexport const Tbody = withContext(styled('tbody'), 'tbody')\nexport const Tr = withContext(styled('tr'), 'tr')\nconst StyledTh = withContext(styled('th'), 'th')\n\ntype StyledThProps = ComponentProps<typeof StyledTh>\n\nexport type ThProps = StyledThProps & {\n  addon?: ReactNode\n  sortKey?: string\n}\n\nexport const Th = forwardRef<ElementRef<typeof StyledTh>, ThProps>(\n  ({ children, addon, sortKey, onClick, ...props }, ref) => {\n    const { dispatch, sortDescriptor } = useTable()\n\n    const handleOnClick = (e: MouseEvent<HTMLTableCellElement>) => {\n      if (sortKey) {\n        if (sortDescriptor === null) {\n          dispatch({\n            type: 'UPDATE_SORT_DESCRIPTOR',\n            payload: {\n              key: sortKey,\n              direction: 'asc',\n            },\n          })\n        } else if (sortDescriptor.key === sortKey) {\n          if (sortDescriptor.direction === 'asc') {\n            dispatch({\n              type: 'UPDATE_SORT_DESCRIPTOR',\n              payload: {\n                key: sortKey,\n                direction: 'desc',\n              },\n            })\n          } else {\n            dispatch({\n              type: 'CLEAR_SORT_DESCRIPTOR',\n            })\n          }\n        } else {\n          dispatch({\n            type: 'UPDATE_SORT_DESCRIPTOR',\n            payload: {\n              key: sortKey,\n              direction: 'asc',\n            },\n          })\n        }\n      }\n      onClick?.(e)\n    }\n\n    return (\n      <StyledTh\n        ref={ref}\n        {...props}\n        {...(sortKey ? { 'data-sortable': true } : {})}\n        role=\"group\"\n        onClick={handleOnClick}\n      >\n        {children}\n        {addon ? <span className=\"th__addon\">&nbsp;{addon}</span> : null}\n        {sortDescriptor && sortDescriptor.key === sortKey ? (\n          <SortIndicatorRoot data-state=\"active\">\n            <SortIndicator\n              data-active={sortDescriptor.direction === 'asc' ? true : undefined}\n              viewBox=\"0 0 8 8\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path d=\"M2.33334 4.83332L4.00001 3.16666L5.66668 4.83332H2.33334Z\" fill=\"currentColor\" />\n            </SortIndicator>\n            <SortIndicator\n              data-active={sortDescriptor.direction === 'desc' ? true : undefined}\n              viewBox=\"0 0 8 8\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path d=\"M2.33333 3.16666L3.99999 4.83332L5.66666 3.16666H2.33333Z\" fill=\"currentColor\" />\n            </SortIndicator>\n          </SortIndicatorRoot>\n        ) : sortKey ? (\n          <SortIndicatorRoot data-state=\"idle\">\n            <SortIndicator data-active={true} viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path d=\"M2.33334 4.83332L4.00001 3.16666L5.66668 4.83332H2.33334Z\" fill=\"currentColor\" />\n            </SortIndicator>\n            <SortIndicator data-active={true} viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path d=\"M2.33333 3.16666L3.99999 4.83332L5.66666 3.16666H2.33333Z\" fill=\"currentColor\" />\n            </SortIndicator>\n          </SortIndicatorRoot>\n        ) : null}\n      </StyledTh>\n    )\n  },\n) as FC<ThProps>\n\nTh.displayName = 'Th'\n\nexport const Td = withContext(styled('td'), 'td')\n\nconst StyledTableGroupTitle = styled('td', tableGroupTitle)\nexport type TableGroupTitleProps = ComponentProps<typeof StyledTableGroupTitle>\nexport const TableGroupTitle = forwardRef<HTMLTableRowElement, TableGroupTitleProps>((props, ref) => {\n  const $td = useRef<ElementRef<typeof StyledTableGroupTitle>>(null)\n  useLayoutEffect(() => {\n    if ($td.current) {\n      const tableColumns = $td.current?.closest('table')?.querySelector('thead > tr')\n      if (tableColumns) {\n        $td.current.setAttribute('colspan', tableColumns.children.length.toString())\n      }\n    }\n  }, [])\n\n  return (\n    <tr ref={ref} className=\"table_tr__group__title\">\n      <StyledTableGroupTitle ref={$td} {...props} />\n    </tr>\n  )\n}) as FC<TableGroupTitleProps>\nTableGroupTitle.displayName = 'TableGroupTitle'\n\nconst StyledTableEmptyRow = styled('td', tableEmptyRow)\nexport type TableEmptyRowProps = ComponentProps<typeof StyledTableEmptyRow>\nexport const TableEmptyRow = forwardRef<HTMLTableRowElement, TableEmptyRowProps>((props, ref) => {\n  const $td = useRef<ElementRef<typeof StyledTableEmptyRow>>(null)\n  useLayoutEffect(() => {\n    if ($td.current) {\n      const tableColumns = $td.current?.closest('table')?.querySelector('thead > tr')\n      if (tableColumns) {\n        $td.current.setAttribute('colspan', tableColumns.children.length.toString())\n      }\n    }\n  }, [])\n\n  return (\n    <tr ref={ref} className=\"table_tr__empty\">\n      <StyledTableEmptyRow ref={$td} {...props} />\n    </tr>\n  )\n}) as FC<TableEmptyRowProps>\nTableEmptyRow.displayName = 'TableEmptyRow'\n\nexport interface TheadProps extends ComponentProps<typeof Thead> {}\n\nexport interface TbodyProps extends ComponentProps<typeof Tbody> {}\n\nexport interface TrProps extends ComponentProps<typeof Tr> {}\n\nexport interface TdProps extends ComponentProps<typeof Td> {}\n\nexport interface TableContainerProps extends ComponentProps<typeof TableContainer> {}\n"],"mappings":"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"}
+{"version":3,"file":"Table.js","names":[],"sources":["../../../src/components/table/Table.tsx"],"sourcesContent":["import type { ComponentProps, ElementRef, FC, JSX, MouseEvent, ReactNode } from 'react'\nimport { forwardRef, useLayoutEffect, useRef } from 'react'\nimport { styled } from '@stokelp/styled-system/jsx'\nimport {\n  table,\n  tableContainer,\n  tableEmptyRow,\n  tableGroupTitle,\n  type TableContainerVariantProps,\n  type TableEmptyRowVariantProps,\n  type TableGroupTitleVariantProps,\n} from '@stokelp/styled-system/recipes'\nimport type { StyledComponent } from '@stokelp/styled-system/types'\nimport { createStyleContext } from '~/utils/slots'\nimport { TableProvider, type TableProviderProps, useTable } from './TableProvider'\n\nconst { withProvider, withContext } = createStyleContext(table)\n\n// Helper: `styled('tag')` returns `StyledComponent<T, {}>` but TS widens the\n// literal to `string` at d.ts emit, stripping every native HTML attribute\n// from consumer typings. This wrapper pins the literal tag via the generic.\nconst styledTag = <T extends keyof JSX.IntrinsicElements>(tag: T): StyledComponent<T, {}> =>\n  styled(tag) as StyledComponent<T, {}>\n\nexport const TableContainer = styled('div', tableContainer) as StyledComponent<'div', TableContainerVariantProps>\n\nconst StyledTable = withProvider(styledTag('table'), 'root')\ntype StyledTableProps = ComponentProps<typeof StyledTable>\n\nexport type TableProps = StyledTableProps & Pick<TableProviderProps, 'onSortChange' | 'descriptor'>\n\nexport const Table = forwardRef<ElementRef<typeof StyledTable>, TableProps>(\n  ({ children, onSortChange, descriptor, ...props }, ref) => {\n    return (\n      <TableProvider descriptor={descriptor} onSortChange={onSortChange}>\n        <StyledTable ref={ref} {...props}>\n          {children}\n        </StyledTable>\n      </TableProvider>\n    )\n  },\n) as FC<TableProps>\n\nTable.displayName = 'Table'\n\nexport const Thead = withContext(styledTag('thead'), 'thead')\nconst SortIndicatorRoot = withContext(styledTag('div'), 'sortIndicatorRoot')\nconst SortIndicator = withContext(styledTag('svg'), 'sortIndicator')\nexport const Tbody = withContext(styledTag('tbody'), 'tbody')\nexport const Tr = withContext(styledTag('tr'), 'tr')\nconst StyledTh = withContext(styledTag('th'), 'th')\n\ntype StyledThProps = ComponentProps<typeof StyledTh>\n\nexport type ThProps = StyledThProps & {\n  addon?: ReactNode\n  sortKey?: string\n}\n\nexport const Th = forwardRef<ElementRef<typeof StyledTh>, ThProps>(\n  ({ children, addon, sortKey, onClick, ...props }, ref) => {\n    const { dispatch, sortDescriptor } = useTable()\n\n    const handleOnClick = (e: MouseEvent<HTMLTableCellElement>) => {\n      if (sortKey) {\n        if (sortDescriptor === null) {\n          dispatch({\n            type: 'UPDATE_SORT_DESCRIPTOR',\n            payload: {\n              key: sortKey,\n              direction: 'asc',\n            },\n          })\n        } else if (sortDescriptor.key === sortKey) {\n          if (sortDescriptor.direction === 'asc') {\n            dispatch({\n              type: 'UPDATE_SORT_DESCRIPTOR',\n              payload: {\n                key: sortKey,\n                direction: 'desc',\n              },\n            })\n          } else {\n            dispatch({\n              type: 'CLEAR_SORT_DESCRIPTOR',\n            })\n          }\n        } else {\n          dispatch({\n            type: 'UPDATE_SORT_DESCRIPTOR',\n            payload: {\n              key: sortKey,\n              direction: 'asc',\n            },\n          })\n        }\n      }\n      onClick?.(e)\n    }\n\n    return (\n      <StyledTh\n        ref={ref}\n        {...props}\n        {...(sortKey ? { 'data-sortable': true } : {})}\n        role=\"group\"\n        onClick={handleOnClick}\n      >\n        {children}\n        {addon ? <span className=\"th__addon\">&nbsp;{addon}</span> : null}\n        {sortDescriptor && sortDescriptor.key === sortKey ? (\n          <SortIndicatorRoot data-state=\"active\">\n            <SortIndicator\n              data-active={sortDescriptor.direction === 'asc' ? true : undefined}\n              viewBox=\"0 0 8 8\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path d=\"M2.33334 4.83332L4.00001 3.16666L5.66668 4.83332H2.33334Z\" fill=\"currentColor\" />\n            </SortIndicator>\n            <SortIndicator\n              data-active={sortDescriptor.direction === 'desc' ? true : undefined}\n              viewBox=\"0 0 8 8\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path d=\"M2.33333 3.16666L3.99999 4.83332L5.66666 3.16666H2.33333Z\" fill=\"currentColor\" />\n            </SortIndicator>\n          </SortIndicatorRoot>\n        ) : sortKey ? (\n          <SortIndicatorRoot data-state=\"idle\">\n            <SortIndicator data-active={true} viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path d=\"M2.33334 4.83332L4.00001 3.16666L5.66668 4.83332H2.33334Z\" fill=\"currentColor\" />\n            </SortIndicator>\n            <SortIndicator data-active={true} viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path d=\"M2.33333 3.16666L3.99999 4.83332L5.66666 3.16666H2.33333Z\" fill=\"currentColor\" />\n            </SortIndicator>\n          </SortIndicatorRoot>\n        ) : null}\n      </StyledTh>\n    )\n  },\n) as FC<ThProps>\n\nTh.displayName = 'Th'\n\nexport const Td = withContext(styledTag('td'), 'td')\n\nconst StyledTableGroupTitle = styled('td', tableGroupTitle) as StyledComponent<'td', TableGroupTitleVariantProps>\nexport type TableGroupTitleProps = ComponentProps<typeof StyledTableGroupTitle>\nexport const TableGroupTitle = forwardRef<HTMLTableRowElement, TableGroupTitleProps>((props, ref) => {\n  const $td = useRef<ElementRef<typeof StyledTableGroupTitle>>(null)\n  useLayoutEffect(() => {\n    if ($td.current) {\n      const tableColumns = $td.current?.closest('table')?.querySelector('thead > tr')\n      if (tableColumns) {\n        $td.current.setAttribute('colspan', tableColumns.children.length.toString())\n      }\n    }\n  }, [])\n\n  return (\n    <tr ref={ref} className=\"table_tr__group__title\">\n      <StyledTableGroupTitle ref={$td} {...props} />\n    </tr>\n  )\n}) as FC<TableGroupTitleProps>\nTableGroupTitle.displayName = 'TableGroupTitle'\n\nconst StyledTableEmptyRow = styled('td', tableEmptyRow) as StyledComponent<'td', TableEmptyRowVariantProps>\nexport type TableEmptyRowProps = ComponentProps<typeof StyledTableEmptyRow>\nexport const TableEmptyRow = forwardRef<HTMLTableRowElement, TableEmptyRowProps>((props, ref) => {\n  const $td = useRef<ElementRef<typeof StyledTableEmptyRow>>(null)\n  useLayoutEffect(() => {\n    if ($td.current) {\n      const tableColumns = $td.current?.closest('table')?.querySelector('thead > tr')\n      if (tableColumns) {\n        $td.current.setAttribute('colspan', tableColumns.children.length.toString())\n      }\n    }\n  }, [])\n\n  return (\n    <tr ref={ref} className=\"table_tr__empty\">\n      <StyledTableEmptyRow ref={$td} {...props} />\n    </tr>\n  )\n}) as FC<TableEmptyRowProps>\nTableEmptyRow.displayName = 'TableEmptyRow'\n\nexport interface TheadProps extends ComponentProps<typeof Thead> {}\n\nexport interface TbodyProps extends ComponentProps<typeof Tbody> {}\n\nexport interface TrProps extends ComponentProps<typeof Tr> {}\n\nexport interface TdProps extends ComponentProps<typeof Td> {}\n\nexport interface TableContainerProps extends ComponentProps<typeof TableContainer> {}\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stokelp/ui",
-  "version": "2.104.1",
+  "version": "2.105.0",
   "description": "Stokelp UI React",
   "main": "dist/index.cjs",
   "module": "dist/index.js",