@veracity/vui 3.0.0-beta.5 → 3.0.0-beta.7

package/dist/_virtual/rolldown_runtime.js

@@ -0,0 +1 @@
+var e=Object.defineProperty,t=(t,n)=>{for(var r in n)e(t,r,{get:n[r],enumerable:!0})};export{t as __export};globalThis.__vuiVersion__=`3.0.0-beta.7`;

package/dist/accordion/accordion.d.ts

@@ -0,0 +1,17 @@
+import { SystemProps } from "../system/system.js";
+import { VuiComponent } from "../core/vui.js";
+import { AccordionProps } from "./accordion.types.js";
+import { AccordionItem } from "./accordionItem.js";
+import { AccordionItemHorizontal } from "./accordionItemHorizontal.js";
+import * as styled_components58 from "styled-components";
+
+//#region src/accordion/accordion.d.ts
+declare const AccordionBase: styled_components58.StyledComponent<"div", styled_components58.DefaultTheme, SystemProps, never>;
+/** Allows to show and hide sections of related content on a page. */
+declare const Accordion: VuiComponent<"div", AccordionProps> & {
+  Item: typeof AccordionItem;
+  ItemHorizontal: typeof AccordionItemHorizontal;
+};
+//#endregion
+export { Accordion, AccordionBase };
+//# sourceMappingURL=accordion.d.ts.map

package/dist/accordion/accordion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.d.ts","names":[],"sources":["../../src/accordion/accordion.tsx"],"sourcesContent":[],"mappings":";;;;;;;;cAWa,eAAa,mBAAA,CAAA,uBAIzB,mBAAA,CAJyB,YAAA;;cAOb,WAuCP,oBAAoB;eACX;EA/CF,cAAA,EAIZ,OA4CwB,uBA5CxB;CAAA"}

package/dist/accordion/accordion.js

@@ -0,0 +1,7 @@
+import{filterUndefined as e}from"../utils/object.js";import{cs as t}from"../utils/styles.js";import{useStyleConfig as n}from"../core/theme.js";import{styled as r}from"../core/styled.js";import{vui as i}from"../core/vui.js";import a from"../list/list.js";import{AccordionProvider as o}from"./context.js";import s from"./accordionItem.js";import c from"./accordionItemHorizontal.js";import{useMemo as l}from"react";import{jsx as u}from"react/jsx-runtime";const d=r.divBox`
+  display: flex;
+  min-width: 0;
+  transition-duration: normal;
+`,f=i((r,i)=>{let{children:f,className:p,items:m,orientation:h=`vertical`,iconPosition:g=`end`,size:_,variant:v,...y}=r,b=n(`Accordion`,r),x=l(()=>e({size:_,variant:v}),[_,v]),S=e({}),C=h===`vertical`;return u(o,{value:x,children:u(d,{borderLeft:C?void 0:`1px solid transparent
+        `,borderTop:C?`1px solid transparent`:void 0,className:t(`vui-accordion`,p),ref:i,w:`100%`,...b.container,...S,...y,children:C?u(a,{w:`100%`,children:m?m?.map?.((e,t)=>u(s,{iconPosition:g,...e},t)):f}):m?m?.map?.((e,t)=>u(c,{...e},t)):f})})});f.Item=s,f.ItemHorizontal=c,f.displayName=`Accordion`;export{f as Accordion,d as AccordionBase};globalThis.__vuiVersion__=`3.0.0-beta.7`;
+//# sourceMappingURL=accordion.js.map

package/dist/accordion/accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.js","names":["List","AccordionItem","AccordionItemHorizontal"],"sources":["../../src/accordion/accordion.tsx"],"sourcesContent":["import { useMemo } from 'react'\n\nimport type { VuiComponent } from '../core'\nimport { styled, useStyleConfig, vui } from '../core'\nimport List from '../list'\nimport { cs, filterUndefined } from '../utils'\nimport type { AccordionItemProps, AccordionProps } from './accordion.types'\nimport AccordionItem from './accordionItem'\nimport AccordionItemHorizontal from './accordionItemHorizontal'\nimport { AccordionProvider } from './context'\n\nexport const AccordionBase = styled.divBox`\n  display: flex;\n  min-width: 0;\n  transition-duration: normal;\n`\n\n/** Allows to show and hide sections of related content on a page. */\nexport const Accordion = vui<'div', AccordionProps>((props, ref) => {\n  const { children, className, items, orientation = 'vertical', iconPosition = 'end', size, variant, ...rest } = props\n  const styles = useStyleConfig('Accordion', props)\n  const context = useMemo(() => filterUndefined({ size, variant }), [size, variant])\n  const aliasedProps = filterUndefined<AccordionProps>({})\n  const isVertical = orientation === 'vertical'\n  return (\n    <AccordionProvider value={context}>\n      <AccordionBase\n        borderLeft={\n          isVertical\n            ? undefined\n            : `1px solid transparent\n        `\n        }\n        borderTop={isVertical ? `1px solid transparent` : undefined}\n        className={cs('vui-accordion', className)}\n        ref={ref}\n        w=\"100%\"\n        {...styles.container}\n        {...aliasedProps}\n        {...rest}\n      >\n        {isVertical ? (\n          <List w=\"100%\">\n            {items\n              ? items?.map?.((item: AccordionItemProps, key: number) => (\n                  <AccordionItem iconPosition={iconPosition} key={key} {...item} />\n                ))\n              : children}\n          </List>\n        ) : items ? (\n          items?.map?.((item: AccordionItemProps, key: number) => <AccordionItemHorizontal key={key} {...item} />)\n        ) : (\n          children\n        )}\n      </AccordionBase>\n    </AccordionProvider>\n  )\n}) as VuiComponent<'div', AccordionProps> & {\n  Item: typeof AccordionItem\n  ItemHorizontal: typeof AccordionItemHorizontal\n}\n\nAccordion.Item = AccordionItem\nAccordion.ItemHorizontal = AccordionItemHorizontal\nAccordion.displayName = 'Accordion'\n\nexport default Accordion\n"],"mappings":"qcAWA,MAAa,EAAgB,EAAO,MAAM;;;;EAO7B,EAAY,GAA4B,EAAO,IAAQ,CAClE,GAAM,CAAE,WAAU,YAAW,QAAO,cAAc,WAAY,eAAe,MAAO,OAAM,UAAS,GAAG,GAAS,EACzG,EAAS,EAAe,YAAa,EAAM,CAC3C,EAAU,MAAc,EAAgB,CAAE,OAAM,UAAS,CAAC,CAAE,CAAC,EAAM,EAAQ,CAAC,CAC5E,EAAe,EAAgC,EAAE,CAAC,CAClD,EAAa,IAAgB,WACnC,OACE,EAAC,EAAA,CAAkB,MAAO,WACxB,EAAC,EAAA,CACC,WACE,EACI,IAAA,GACA;UAGN,UAAW,EAAa,wBAA0B,IAAA,GAClD,UAAW,EAAG,gBAAiB,EAAU,CACpC,MACL,EAAE,OACF,GAAI,EAAO,UACX,GAAI,EACJ,GAAI,WAEH,EACC,EAACA,EAAAA,CAAK,EAAE,gBACL,EACG,GAAO,OAAO,EAA0B,IACtC,EAACC,EAAAA,CAA4B,eAAwB,GAAI,GAAT,EAAiB,CACjE,CACF,GACC,CACL,EACF,GAAO,OAAO,EAA0B,IAAgB,EAACC,EAAAA,CAAkC,GAAI,EAAA,CAAT,EAAiB,CAAC,CAExG,GAEY,EACE,EAEtB,CAKF,EAAU,KAAOD,EACjB,EAAU,eAAiBC,EAC3B,EAAU,YAAc"}

package/dist/accordion/accordion.types.d.ts

@@ -0,0 +1,51 @@
+import { ThemingProps } from "../theme/types.js";
+import { SystemProps } from "../system/system.js";
+import { IconProps } from "../icon/icon.types.js";
+import { ListItemProps } from "../list/list.types.js";
+import { ReactNode } from "react";
+
+//#region src/accordion/accordion.types.d.ts
+type AccordionOrientation = 'vertical' | 'horizontal';
+type AccordionIconPosition = 'end' | 'start';
+type AccordionProps = SystemProps & ThemingProps<'Accordion'> & {
+  /** Items AccordionOrientation @default "vertical" */
+  orientation?: AccordionOrientation;
+  /** Collection of Accordion items */
+  items?: AccordionItemProps[];
+  /** Icon position for vertical orientation @default "end" */
+  iconPosition?: AccordionIconPosition;
+};
+type AccordionItemId = string | number;
+type AccordionOnToggleEvent = {
+  id: AccordionItemId;
+  collapsed: boolean;
+};
+type AccordionItemProps = ListItemProps & {
+  /** Unique ID */
+  id: AccordionItemId;
+  /** Custom class name */
+  className?: string;
+  /** Content */
+  children?: ReactNode;
+  /** Alternative way to provide content */
+  content?: ReactNode;
+  /** Control the padding of the content */
+  contentPx?: string | number;
+  /** Collapsed state */
+  collapsed?: boolean;
+  /** The icon position @default "end" */
+  iconPosition?: AccordionIconPosition;
+  /** Title */
+  title?: string | ReactNode;
+  /** Collapse change state */
+  onToggle?: (event: AccordionOnToggleEvent) => void;
+};
+type AccordionItemArrowProps = IconProps & {
+  collapsed?: boolean;
+  color?: string;
+  disabled?: boolean;
+  orientation?: AccordionOrientation;
+};
+//#endregion
+export { AccordionIconPosition, AccordionItemArrowProps, AccordionItemId, AccordionItemProps, AccordionOnToggleEvent, AccordionOrientation, AccordionProps };
+//# sourceMappingURL=accordion.types.d.ts.map

package/dist/accordion/accordion.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.types.d.ts","names":[],"sources":["../../src/accordion/accordion.types.ts"],"sourcesContent":[],"mappings":";;;;;;;KAOY,oBAAA;KACA,qBAAA;AADA,KAGA,cAAA,GAAiB,WAHG,GAI9B,YAJ8B,CAAA,WAAA,CAAA,GAAA;EACpB;EAEA,WAAA,CAAA,EAGM,oBAHQ;EAAA;OAAG,CAAA,EAKjB,kBALiB,EAAA;;cAGX,CAAA,EAIC,qBAJD;;AAIC,KAGP,eAAA,GAHO,MAAA,GAAA,MAAA;AAAqB,KAK5B,sBAAA,GAL4B;EAG5B,EAAA,EAGN,eAHqB;EAEf,SAAA,EAAA,OAAA;AAKZ,CAAA;AAA8B,KAAlB,kBAAA,GAAqB,aAAH,GAAA;;MAExB,eAAA;;WAMM,CAAA,EAAA,MAAA;;UAQO,CAAA,EAVN,SAUM;;EAEwB,OAAA,CAAA,EAV/B,SAU+B;EAG/B;EAAuB,SAAA,CAAA,EAAA,MAAA,GAAA,MAAA;;WAInB,CAAA,EAAA,OAAA;EAAoB;iBAXnB;;mBAEE;;qBAEE;;KAGT,uBAAA,GAA0B;;;;gBAItB"}

package/dist/accordion/accordionItem.d.ts

@@ -0,0 +1,12 @@
+import { AccordionItemProps } from "./accordion.types.js";
+import * as react_jsx_runtime6 from "react/jsx-runtime";
+
+//#region src/accordion/accordionItem.d.ts
+/** An accordion item. */
+declare const AccordionItem: {
+  (props: AccordionItemProps): react_jsx_runtime6.JSX.Element;
+  displayName: string;
+};
+//#endregion
+export { AccordionItem };
+//# sourceMappingURL=accordionItem.d.ts.map

package/dist/accordion/accordionItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordionItem.d.ts","names":[],"sources":["../../src/accordion/accordionItem.tsx"],"sourcesContent":[],"mappings":";;;;;cAWa;UAAwB,qBAAkB,kBAAA,CAAA,GAAA,CAAA;EAA1C,WAAA,EAAA,MAwFZ;CAAA"}

package/dist/accordion/accordionItem.js

@@ -0,0 +1,2 @@
+import{cs as e}from"../utils/styles.js";import{omitThemingProps as t,useStyleConfig as n}from"../core/theme.js";import{Box as r}from"../box/box.js";import{ListItem as i}from"../list/listItem.js";import a from"./accordionItemArrow.js";import{useAccordionContext as o}from"./context.js";import{useEffect as s,useState as c}from"react";import{jsx as l,jsxs as u}from"react/jsx-runtime";const d=d=>{let{className:f,children:p,collapsed:m,content:h,disabled:g,id:_,iconPosition:v=`end`,title:y,onToggle:b,...x}=t(d),[S,C]=c(!1),w=n(`Accordion`,o());s(()=>{C(!!m)},[m]);let T=()=>{g||(b?.({id:_,collapsed:!S}),C(!S))},E=v===`start`,D=v===`end`;return u(i,{borderBottom:`1px solid transparent`,borderColor:w.item.borderColor,className:e(`vui-accordion-item`,f),color:`yellow`,disabled:g,disabledBg:w.item.disabledBg,disabledColor:w.item.disabledColor,flexDirection:`column`,h:`auto`,id:`${_}`,p:0,w:`100%`,...x,children:[u(r,{center:!0,color:`yellow`,cursor:g?`not-allowed`:`pointer`,hoverBg:g?`transparent`:S?w.item.itemTitleHoverBg:w.item.expandedItemTitleHoverBg,justifyContent:v===`start`?`initial`:`space-between`,onClick:T,px:2,w:`100%`,...w.item,children:[E&&l(r,{children:l(a,{collapsed:S,color:w.icon.color})}),l(r,{fontWeight:typeof y==`string`?`500`:`inherit`,ml:E?2:0,opacity:g?.5:1,children:y}),D&&l(r,{children:l(a,{collapsed:S,color:w.icon.color,disabled:g})})]}),!S&&l(r,{mb:2,mt:2,px:2,py:1,w:`100%`,children:p??h})]})};d.displayName=`AccordionItem`;var f=d;export{d as AccordionItem,f as default};globalThis.__vuiVersion__=`3.0.0-beta.7`;
+//# sourceMappingURL=accordionItem.js.map

package/dist/accordion/accordionItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordionItem.js","names":["AccordionItemArrow"],"sources":["../../src/accordion/accordionItem.tsx"],"sourcesContent":["import { useEffect, useState } from 'react'\n\nimport { Box } from '../box'\nimport { omitThemingProps, useStyleConfig } from '../core'\nimport { ListItem } from '../list'\nimport { cs } from '../utils'\nimport type { AccordionItemProps } from './accordion.types'\nimport AccordionItemArrow from './accordionItemArrow'\nimport { useAccordionContext } from './context'\n\n/** An accordion item. */\nexport const AccordionItem = (props: AccordionItemProps) => {\n  const {\n    className,\n    children,\n    collapsed,\n    content,\n    disabled,\n    id,\n    iconPosition = 'end',\n    title,\n    onToggle,\n    ...rest\n  } = omitThemingProps(props)\n  const [collapsedInternal, setIsCollapsedInternal] = useState<boolean>(false)\n  const styles = useStyleConfig('Accordion', useAccordionContext())\n\n  useEffect(() => {\n    setIsCollapsedInternal(!!collapsed)\n  }, [collapsed])\n\n  const toggle = () => {\n    if (!disabled) {\n      onToggle?.({ id, collapsed: !collapsedInternal })\n      setIsCollapsedInternal(!collapsedInternal)\n    }\n  }\n\n  const isIconStart = iconPosition === 'start'\n  const isIconEnd = iconPosition === 'end'\n\n  return (\n    <ListItem\n      borderBottom=\"1px solid transparent\"\n      borderColor={styles.item.borderColor}\n      className={cs('vui-accordion-item', className)}\n      color=\"yellow\"\n      disabled={disabled}\n      disabledBg={styles.item.disabledBg}\n      disabledColor={styles.item.disabledColor}\n      flexDirection=\"column\"\n      h=\"auto\"\n      id={`${id}`}\n      p={0}\n      w=\"100%\"\n      {...rest}\n    >\n      <Box\n        center\n        color=\"yellow\"\n        cursor={disabled ? 'not-allowed' : 'pointer'}\n        hoverBg={\n          disabled\n            ? 'transparent'\n            : collapsedInternal\n              ? styles.item.itemTitleHoverBg\n              : styles.item.expandedItemTitleHoverBg\n        }\n        justifyContent={iconPosition === 'start' ? 'initial' : 'space-between'}\n        onClick={toggle}\n        px={2}\n        w=\"100%\"\n        {...styles.item}\n      >\n        {isIconStart && (\n          <Box>\n            <AccordionItemArrow collapsed={collapsedInternal} color={styles.icon.color} />\n          </Box>\n        )}\n        <Box\n          fontWeight={typeof title === 'string' ? '500' : 'inherit'}\n          ml={isIconStart ? 2 : 0}\n          opacity={disabled ? 0.5 : 1}\n        >\n          {title}\n        </Box>\n        {isIconEnd && (\n          <Box>\n            <AccordionItemArrow collapsed={collapsedInternal} color={styles.icon.color} disabled={disabled} />\n          </Box>\n        )}\n      </Box>\n      {!collapsedInternal && (\n        <Box mb={2} mt={2} px={2} py={1} w=\"100%\">\n          {children ?? content}\n        </Box>\n      )}\n    </ListItem>\n  )\n}\n\nAccordionItem.displayName = 'AccordionItem'\n\nexport default AccordionItem\n"],"mappings":"+XAWA,MAAa,EAAiB,GAA8B,CAC1D,GAAM,CACJ,YACA,WACA,YACA,UACA,WACA,KACA,eAAe,MACf,QACA,WACA,GAAG,GACD,EAAiB,EAAM,CACrB,CAAC,EAAmB,GAA0B,EAAkB,GAAM,CACtE,EAAS,EAAe,YAAa,GAAqB,CAAC,CAEjE,MAAgB,CACd,EAAuB,CAAC,CAAC,EAAU,EAClC,CAAC,EAAU,CAAC,CAEf,IAAM,MAAe,CACd,IACH,IAAW,CAAE,KAAI,UAAW,CAAC,EAAmB,CAAC,CACjD,EAAuB,CAAC,EAAkB,GAIxC,EAAc,IAAiB,QAC/B,EAAY,IAAiB,MAEnC,OACE,EAAC,EAAA,CACC,aAAa,wBACb,YAAa,EAAO,KAAK,YACzB,UAAW,EAAG,qBAAsB,EAAU,CAC9C,MAAM,SACI,WACV,WAAY,EAAO,KAAK,WACxB,cAAe,EAAO,KAAK,cAC3B,cAAc,SACd,EAAE,OACF,GAAI,GAAG,IACP,EAAG,EACH,EAAE,OACF,GAAI,YAEJ,EAAC,EAAA,CACC,OAAA,GACA,MAAM,SACN,OAAQ,EAAW,cAAgB,UACnC,QACE,EACI,cACA,EACE,EAAO,KAAK,iBACZ,EAAO,KAAK,yBAEpB,eAAgB,IAAiB,QAAU,UAAY,gBACvD,QAAS,EACT,GAAI,EACJ,EAAE,OACF,GAAI,EAAO,eAEV,GACC,EAAC,EAAA,CAAA,SACC,EAACA,EAAAA,CAAmB,UAAW,EAAmB,MAAO,EAAO,KAAK,OAAS,CAAA,CAC1E,CAER,EAAC,EAAA,CACC,WAAY,OAAO,GAAU,SAAW,MAAQ,UAChD,GAAI,EAAc,EAAI,EACtB,QAAS,EAAW,GAAM,WAEzB,GACG,CACL,GACC,EAAC,EAAA,CAAA,SACC,EAACA,EAAAA,CAAmB,UAAW,EAAmB,MAAO,EAAO,KAAK,MAAiB,YAAY,CAAA,CAC9F,GAEJ,CACL,CAAC,GACA,EAAC,EAAA,CAAI,GAAI,EAAG,GAAI,EAAG,GAAI,EAAG,GAAI,EAAG,EAAE,gBAChC,GAAY,GACT,CAAA,EAEC,EAIf,EAAc,YAAc,gBAE5B,IAAA,EAAe"}

package/dist/accordion/accordionItemArrow.js

@@ -0,0 +1,2 @@
+import e from"../icon/icon.js";import{memo as t}from"react";import{jsx as n}from"react/jsx-runtime";const r={horizontal:{collapsed:`falChevronRight`,expanded:`falChevronLeft`},vertical:{collapsed:`falChevronDown`,expanded:`falChevronUp`}};var i=t(({collapsed:t,color:i=`sandstone.10`,disabled:a=!1,orientation:o=`vertical`,...s})=>n(e,{name:r[o][t?`collapsed`:`expanded`],opacity:a?.5:1,pathFill:i,size:`sm`,...s}));export{i as default};globalThis.__vuiVersion__=`3.0.0-beta.7`;
+//# sourceMappingURL=accordionItemArrow.js.map

package/dist/accordion/accordionItemArrow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordionItemArrow.js","names":["Icon"],"sources":["../../src/accordion/accordionItemArrow.tsx"],"sourcesContent":["import { memo } from 'react'\n\nimport Icon from '../icon'\nimport type { AccordionItemArrowProps } from './accordion.types'\n\nconst names = {\n  horizontal: {\n    collapsed: 'falChevronRight',\n    expanded: 'falChevronLeft',\n  },\n  vertical: {\n    collapsed: 'falChevronDown',\n    expanded: 'falChevronUp',\n  },\n}\n\nconst AccordionItemArrow = ({\n  collapsed,\n  color = 'sandstone.10',\n  disabled = false,\n  orientation = 'vertical',\n  ...rest\n}: AccordionItemArrowProps) => (\n  <Icon\n    name={names[orientation][collapsed ? 'collapsed' : 'expanded']}\n    opacity={disabled ? 0.5 : 1}\n    pathFill={color}\n    size=\"sm\"\n    {...rest}\n  />\n)\n\nexport default memo(AccordionItemArrow)\n"],"mappings":"oGAKA,MAAM,EAAQ,CACZ,WAAY,CACV,UAAW,kBACX,SAAU,iBACX,CACD,SAAU,CACR,UAAW,iBACX,SAAU,eACX,CACF,CAkBD,IAAA,EAAe,GAhBa,CAC1B,YACA,QAAQ,eACR,WAAW,GACX,cAAc,WACd,GAAG,KAEH,EAACA,EAAAA,CACC,KAAM,EAAM,GAAa,EAAY,YAAc,YACnD,QAAS,EAAW,GAAM,EAC1B,SAAU,EACV,KAAK,KACL,GAAI,GACJ,CAGmC"}

package/dist/accordion/accordionItemHorizontal.d.ts

@@ -0,0 +1,12 @@
+import { AccordionItemProps } from "./accordion.types.js";
+import * as react_jsx_runtime7 from "react/jsx-runtime";
+
+//#region src/accordion/accordionItemHorizontal.d.ts
+/** An accordion item (horizontal AccordionOrientation). */
+declare const AccordionItemHorizontal: {
+  (props: AccordionItemProps): react_jsx_runtime7.JSX.Element;
+  displayName: string;
+};
+//#endregion
+export { AccordionItemHorizontal };
+//# sourceMappingURL=accordionItemHorizontal.d.ts.map

package/dist/accordion/accordionItemHorizontal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordionItemHorizontal.d.ts","names":[],"sources":["../../src/accordion/accordionItemHorizontal.tsx"],"sourcesContent":[],"mappings":";;;;;cAUa;UAAkC,qBAAkB,kBAAA,CAAA,GAAA,CAAA;EAApD,WAAA,EAAA,MAAA;CA0FZ"}

package/dist/accordion/accordionItemHorizontal.js

@@ -0,0 +1,2 @@
+import{cs as e}from"../utils/styles.js";import{omitThemingProps as t,useStyleConfig as n}from"../core/theme.js";import r from"../box/box.js";import i from"./accordionItemArrow.js";import{useAccordionContext as a}from"./context.js";import{useEffect as o,useState as s}from"react";import{jsx as c,jsxs as l}from"react/jsx-runtime";const u=u=>{let{className:d,children:f,collapsed:p,content:m,disabled:h,id:g,contentPx:_,title:v,onToggle:y,...b}=t(u),[x,S]=s(!1),C=n(`Accordion`,a());o(()=>{S(!!p)},[p]);let w=()=>{h||(y?.({id:g,collapsed:!x}),S(!x))},T=h?`not-allowed`:`pointer`,E=typeof v==`string`?`500`:`inherit`,D=_||C.itemHorizontal.space;return l(r,{alignItems:x?`normal`:`baseline`,bg:h?`disabled.bg`:void 0,borderRight:`1px solid transparent`,className:e(`vui-accordion-item-horizontal`,d),color:h?`disabled.color`:void 0,column:!0,cursor:h?`not-allowed`:void 0,id:`${g}`,maxW:x?C.item.minH:`auto`,minW:C.item.minH,transitionDuration:`0ms`,userSelect:h?`none`:void 0,...C.item,p:0,...b,children:[l(r,{cursor:T,hoverBg:h?`transparent`:x?C.item.itemTitleHoverBg:C.item.expandedItemTitleHoverBg,justifyContent:`space-between`,minH:C.item.minH,onClick:w,p:C.itemHorizontal.space,w:`100%`,children:[!x&&c(r,{fontWeight:E,opacity:h?.5:1,children:v}),c(i,{collapsed:x,color:C.icon.color,disabled:h,orientation:`horizontal`})]}),x?c(r,{cursor:T,flexDirection:`row-reverse`,fontWeight:E,mb:C.item.minH,mt:C.itemHorizontal.space,onClick:w,transform:`rotate(-90deg)`,transitionDuration:`0ms`,whiteSpace:`nowrap`,children:v}):c(r,{p:C.itemHorizontal.space,pt:0,px:D,transitionDuration:`0ms`,w:1,children:f??m})]})};u.displayName=`AccordionItemHorizontal`;var d=u;export{u as AccordionItemHorizontal,d as default};globalThis.__vuiVersion__=`3.0.0-beta.7`;
+//# sourceMappingURL=accordionItemHorizontal.js.map

package/dist/accordion/accordionItemHorizontal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordionItemHorizontal.js","names":["Box","AccordionItemArrow"],"sources":["../../src/accordion/accordionItemHorizontal.tsx"],"sourcesContent":["import { useEffect, useState } from 'react'\n\nimport Box from '../box'\nimport { omitThemingProps, useStyleConfig } from '../core'\nimport { cs } from '../utils'\nimport type { AccordionItemProps } from './accordion.types'\nimport AccordionItemArrow from './accordionItemArrow'\nimport { useAccordionContext } from './context'\n\n/** An accordion item (horizontal AccordionOrientation). */\nexport const AccordionItemHorizontal = (props: AccordionItemProps) => {\n  const { className, children, collapsed, content, disabled, id, contentPx, title, onToggle, ...rest } =\n    omitThemingProps(props)\n  const [collapsedInternal, setIsCollapsedInternal] = useState<boolean>(false)\n\n  const styles = useStyleConfig('Accordion', useAccordionContext())\n\n  useEffect(() => {\n    setIsCollapsedInternal(!!collapsed)\n  }, [collapsed])\n\n  const toggle = () => {\n    if (!disabled) {\n      onToggle?.({ id, collapsed: !collapsedInternal })\n      setIsCollapsedInternal(!collapsedInternal)\n    }\n  }\n\n  const cursor = disabled ? 'not-allowed' : 'pointer'\n  const fontWeight = typeof title === 'string' ? '500' : 'inherit'\n\n  const expandedContentPx = contentPx ? contentPx : styles.itemHorizontal.space\n\n  return (\n    <Box\n      alignItems={collapsedInternal ? 'normal' : 'baseline'}\n      bg={disabled ? 'disabled.bg' : undefined}\n      borderRight=\"1px solid transparent\"\n      className={cs('vui-accordion-item-horizontal', className)}\n      color={disabled ? 'disabled.color' : undefined}\n      column\n      cursor={disabled ? 'not-allowed' : undefined}\n      id={`${id}`}\n      maxW={collapsedInternal ? styles.item.minH : 'auto'}\n      minW={styles.item.minH}\n      transitionDuration=\"0ms\"\n      userSelect={disabled ? 'none' : undefined}\n      {...styles.item}\n      p={0}\n      {...rest}\n    >\n      <Box\n        cursor={cursor}\n        hoverBg={\n          disabled\n            ? 'transparent'\n            : collapsedInternal\n              ? styles.item.itemTitleHoverBg\n              : styles.item.expandedItemTitleHoverBg\n        }\n        justifyContent=\"space-between\"\n        minH={styles.item.minH}\n        onClick={toggle}\n        p={styles.itemHorizontal.space}\n        w=\"100%\"\n      >\n        {!collapsedInternal && (\n          <Box fontWeight={fontWeight} opacity={disabled ? 0.5 : 1}>\n            {title}\n          </Box>\n        )}\n        <AccordionItemArrow\n          collapsed={collapsedInternal}\n          color={styles.icon.color}\n          disabled={disabled}\n          orientation=\"horizontal\"\n        />\n      </Box>\n\n      {!collapsedInternal ? (\n        <Box p={styles.itemHorizontal.space} pt={0} px={expandedContentPx} transitionDuration=\"0ms\" w={1}>\n          {children ?? content}\n        </Box>\n      ) : (\n        <Box\n          cursor={cursor}\n          flexDirection=\"row-reverse\"\n          fontWeight={fontWeight}\n          mb={styles.item.minH}\n          mt={styles.itemHorizontal.space}\n          onClick={toggle}\n          transform=\"rotate(-90deg)\"\n          transitionDuration=\"0ms\"\n          whiteSpace=\"nowrap\"\n        >\n          {title}\n        </Box>\n      )}\n    </Box>\n  )\n}\n\nAccordionItemHorizontal.displayName = 'AccordionItemHorizontal'\n\nexport default AccordionItemHorizontal\n"],"mappings":"yUAUA,MAAa,EAA2B,GAA8B,CACpE,GAAM,CAAE,YAAW,WAAU,YAAW,UAAS,WAAU,KAAI,YAAW,QAAO,WAAU,GAAG,GAC5F,EAAiB,EAAM,CACnB,CAAC,EAAmB,GAA0B,EAAkB,GAAM,CAEtE,EAAS,EAAe,YAAa,GAAqB,CAAC,CAEjE,MAAgB,CACd,EAAuB,CAAC,CAAC,EAAU,EAClC,CAAC,EAAU,CAAC,CAEf,IAAM,MAAe,CACd,IACH,IAAW,CAAE,KAAI,UAAW,CAAC,EAAmB,CAAC,CACjD,EAAuB,CAAC,EAAkB,GAIxC,EAAS,EAAW,cAAgB,UACpC,EAAa,OAAO,GAAU,SAAW,MAAQ,UAEjD,EAAoB,GAAwB,EAAO,eAAe,MAExE,OACE,EAACA,EAAAA,CACC,WAAY,EAAoB,SAAW,WAC3C,GAAI,EAAW,cAAgB,IAAA,GAC/B,YAAY,wBACZ,UAAW,EAAG,gCAAiC,EAAU,CACzD,MAAO,EAAW,iBAAmB,IAAA,GACrC,OAAA,GACA,OAAQ,EAAW,cAAgB,IAAA,GACnC,GAAI,GAAG,IACP,KAAM,EAAoB,EAAO,KAAK,KAAO,OAC7C,KAAM,EAAO,KAAK,KAClB,mBAAmB,MACnB,WAAY,EAAW,OAAS,IAAA,GAChC,GAAI,EAAO,KACX,EAAG,EACH,GAAI,YAEJ,EAACA,EAAAA,CACS,SACR,QACE,EACI,cACA,EACE,EAAO,KAAK,iBACZ,EAAO,KAAK,yBAEpB,eAAe,gBACf,KAAM,EAAO,KAAK,KAClB,QAAS,EACT,EAAG,EAAO,eAAe,MACzB,EAAE,iBAED,CAAC,GACA,EAACA,EAAAA,CAAgB,aAAY,QAAS,EAAW,GAAM,WACpD,GACG,CAER,EAACC,EAAAA,CACC,UAAW,EACX,MAAO,EAAO,KAAK,MACT,WACV,YAAY,cACZ,CAAA,EACE,CAEJ,EAKA,EAACD,EAAAA,CACS,SACR,cAAc,cACF,aACZ,GAAI,EAAO,KAAK,KAChB,GAAI,EAAO,eAAe,MAC1B,QAAS,EACT,UAAU,iBACV,mBAAmB,MACnB,WAAW,kBAEV,GACG,CAhBN,EAACA,EAAAA,CAAI,EAAG,EAAO,eAAe,MAAO,GAAI,EAAG,GAAI,EAAmB,mBAAmB,MAAM,EAAG,WAC5F,GAAY,GACT,CAcA,EAEJ,EAIV,EAAwB,YAAc,0BAEtC,IAAA,EAAe"}

package/dist/accordion/context.js

@@ -0,0 +1,2 @@
+import{createContext as e}from"../utils/react.js";const[t,n]=e({isOptional:!0});export{t as AccordionProvider,n as useAccordionContext};globalThis.__vuiVersion__=`3.0.0-beta.7`;
+//# sourceMappingURL=context.js.map

package/dist/accordion/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","names":[],"sources":["../../src/accordion/context.ts"],"sourcesContent":["import type { Dict } from '../utils'\nimport { createContext } from '../utils'\n\nconst [AccordionProvider, useAccordionContext] = createContext<Dict>({ isOptional: true })\n\nexport { AccordionProvider, useAccordionContext }\n"],"mappings":"kDAGA,KAAM,CAAC,EAAmB,GAAuB,EAAoB,CAAE,WAAY,GAAM,CAAC"}

package/dist/accordion/theme.js

@@ -0,0 +1,2 @@
+var e={baseStyle:{},defaultProps:{size:`md`,variant:`light`},sizes:{sm:{item:{minH:`32px`},itemHorizontal:{space:`8px`}},md:{item:{minH:`40px`},itemHorizontal:{space:`12px`}},lg:{item:{minH:`48px`},itemHorizontal:{space:`14px`}}},variants:{light:{container:{bg:`white`,borderColor:`sandstone.main`},item:{borderColor:`sandstone.main`,itemTitleHoverBg:`skyBlue.95`,expandedItemTitleHoverBg:`skyBlue.90`},icon:{color:`sandstone.10`}},dark:{container:{bg:`darkBlue.main`,borderColor:`white`,color:`white`},item:{borderColor:`white`,disabledBg:`transparent`,itemTitleHoverBg:`seaBlue.35`,expandedItemTitleHoverBg:`seaBlue.25`},icon:{color:`digiGreen.main`}}}};export{e as default};globalThis.__vuiVersion__=`3.0.0-beta.7`;
+//# sourceMappingURL=theme.js.map

package/dist/accordion/theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.js","names":[],"sources":["../../src/accordion/theme.ts"],"sourcesContent":["const baseStyle = {}\n\nconst defaultProps = {\n  size: 'md',\n  variant: 'light',\n}\n\nconst sizes = {\n  sm: {\n    item: {\n      minH: '32px',\n    },\n    itemHorizontal: {\n      space: '8px',\n    },\n  },\n  md: {\n    item: {\n      minH: '40px',\n    },\n    itemHorizontal: {\n      space: '12px',\n    },\n  },\n  lg: {\n    item: {\n      minH: '48px',\n    },\n    itemHorizontal: {\n      space: '14px',\n    },\n  },\n}\n\nconst variants = {\n  light: {\n    container: {\n      bg: 'white',\n      borderColor: 'sandstone.main',\n    },\n    item: {\n      borderColor: 'sandstone.main',\n      itemTitleHoverBg: 'skyBlue.95',\n      expandedItemTitleHoverBg: 'skyBlue.90',\n    },\n    icon: {\n      color: 'sandstone.10',\n    },\n  },\n  dark: {\n    container: {\n      bg: 'darkBlue.main',\n      borderColor: 'white',\n      color: 'white',\n    },\n    item: {\n      borderColor: 'white',\n      disabledBg: 'transparent',\n      itemTitleHoverBg: 'seaBlue.35',\n      expandedItemTitleHoverBg: 'seaBlue.25',\n    },\n    icon: {\n      color: 'digiGreen.main',\n    },\n  },\n}\n\nexport default {\n  baseStyle,\n  defaultProps,\n  sizes,\n  variants,\n}\n"],"mappings":"AAmEA,IAAA,EAAe,CACb,UApEgB,EAAE,CAqElB,aAnEmB,CACnB,KAAM,KACN,QAAS,QACV,CAiEC,MA/DY,CACZ,GAAI,CACF,KAAM,CACJ,KAAM,OACP,CACD,eAAgB,CACd,MAAO,MACR,CACF,CACD,GAAI,CACF,KAAM,CACJ,KAAM,OACP,CACD,eAAgB,CACd,MAAO,OACR,CACF,CACD,GAAI,CACF,KAAM,CACJ,KAAM,OACP,CACD,eAAgB,CACd,MAAO,OACR,CACF,CACF,CAuCC,SArCe,CACf,MAAO,CACL,UAAW,CACT,GAAI,QACJ,YAAa,iBACd,CACD,KAAM,CACJ,YAAa,iBACb,iBAAkB,aAClB,yBAA0B,aAC3B,CACD,KAAM,CACJ,MAAO,eACR,CACF,CACD,KAAM,CACJ,UAAW,CACT,GAAI,gBACJ,YAAa,QACb,MAAO,QACR,CACD,KAAM,CACJ,YAAa,QACb,WAAY,cACZ,iBAAkB,aAClB,yBAA0B,aAC3B,CACD,KAAM,CACJ,MAAO,iBACR,CACF,CACF,CAOA"}

package/dist/avatar/avatar.d.ts

@@ -0,0 +1,12 @@
+import { SystemProps } from "../system/system.js";
+import { VuiComponent } from "../core/vui.js";
+import { AvatarProps } from "./avatar.types.js";
+import * as styled_components445 from "styled-components";
+
+//#region src/avatar/avatar.d.ts
+declare const AvatarBase: styled_components445.StyledComponent<"span", styled_components445.DefaultTheme, SystemProps, never>;
+/** Displays user data, such as name initials or profile image. */
+declare const Avatar: VuiComponent<"span", AvatarProps>;
+//#endregion
+export { Avatar, AvatarBase };
+//# sourceMappingURL=avatar.d.ts.map

package/dist/avatar/avatar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.d.ts","names":[],"sources":["../../src/avatar/avatar.tsx"],"sourcesContent":[],"mappings":";;;;;;cAWa,YAAU,oBAAA,CAAA,wBAoBtB,oBAAA,CApBsB,YAAA;;cAuBV,6BAAM"}

package/dist/avatar/avatar.js

@@ -0,0 +1,22 @@
+import{filterUndefined as e}from"../utils/object.js";import{cs as t}from"../utils/styles.js";import{omitThemingProps as n,useStyleConfig as r}from"../core/theme.js";import{styled as i}from"../core/styled.js";import{vui as a}from"../core/vui.js";import o from"../icon/icon.js";import s from"../image/image.js";import{loadImageUrl as c}from"../utils/images.js";import{defaultGetInitials as l}from"./helpers.js";import{useEffect as u,useState as d}from"react";import{Fragment as f,jsx as p}from"react/jsx-runtime";const m=i.spanBox`
+  align-items: center;
+  display: inline-flex;
+  flex-shrink: 0;
+  font-weight: medium;
+  justify-content: center;
+  line-height: normal;
+  outline: none;
+  overflow: hidden;
+  transition-duration: fast;
+
+  &:focus {
+    border-color: transparent;
+  }
+
+  &[aria-disabled='true'] {
+    opacity: 0.5;
+    cursor: not-allowed;
+    user-select: none;
+  }
+`,h=a((i,a)=>{let{children:s,className:c,disabled:u,getInitials:d=l,icon:f,isInteractive:h=i.onClick!==void 0,isSquare:_,name:v=``,src:y,...b}=n(i),{activeBg:x,h:S,hoverBg:C,iconSize:w,...T}=r(`Avatar`,i),E=_?i.size===`sm`?`3px`:`6px`:`50%`,D=d(v),O=!u&&h?{cursor:`pointer`,hoverBg:C,hoverOpacity:y?.85:1,activeOpacity:y?.7:1,activeBg:x,focusRing:3,tabIndex:0,userSelect:`none`}:{},k=e({borderRadius:E,"aria-disabled":u});return p(m,{borderRadius:E,className:t(`vui-avatar`,c),h:S,ref:a,w:S,...T,...O,...k,...b,children:s||(y?p(g,{borderRadius:E,icon:f,iconSize:w,initials:D,src:y}):f?p(o,{name:f,size:w}):D||p(o,{name:`uiUser`,size:w}))})});function g({src:e,borderRadius:t,icon:n,iconSize:r,initials:i}){let[a,l]=d(!1);return u(()=>{let t=!1;return c(e).then(e=>{t||l(e)}),()=>{t=!0}},[e]),a?p(s,{borderRadius:t,src:e}):n?p(o,{name:n,size:r}):i?p(f,{children:i}):p(o,{name:`uiUser`,size:r})}h.displayName=`Avatar`;var _=h;export{h as Avatar,m as AvatarBase,_ as default};globalThis.__vuiVersion__=`3.0.0-beta.7`;
+//# sourceMappingURL=avatar.js.map

package/dist/avatar/avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.js","names":["Icon","Image"],"sources":["../../src/avatar/avatar.tsx"],"sourcesContent":["import { useEffect, useState } from 'react'\n\nimport { omitThemingProps, styled, useStyleConfig, vui } from '../core'\nimport type { IconProp, IconProps } from '../icon'\nimport Icon from '../icon'\nimport Image from '../image'\nimport { cs, filterUndefined } from '../utils'\nimport { loadImageUrl } from '../utils/images'\nimport type { AvatarProps } from './avatar.types'\nimport { defaultGetInitials } from './helpers'\n\nexport const AvatarBase = styled.spanBox`\n  align-items: center;\n  display: inline-flex;\n  flex-shrink: 0;\n  font-weight: medium;\n  justify-content: center;\n  line-height: normal;\n  outline: none;\n  overflow: hidden;\n  transition-duration: fast;\n\n  &:focus {\n    border-color: transparent;\n  }\n\n  &[aria-disabled='true'] {\n    opacity: 0.5;\n    cursor: not-allowed;\n    user-select: none;\n  }\n`\n\n/** Displays user data, such as name initials or profile image. */\nexport const Avatar = vui<'span', AvatarProps>((props, ref) => {\n  const {\n    children,\n    className,\n    disabled,\n    getInitials = defaultGetInitials,\n    icon,\n    isInteractive = props.onClick !== undefined,\n    isSquare,\n    name = '',\n    src,\n    ...rest\n  } = omitThemingProps(props)\n  const { activeBg, h, hoverBg, iconSize, ...styles } = useStyleConfig('Avatar', props)\n\n  const borderRadius = isSquare ? (props.size === 'sm' ? '3px' : '6px') : '50%'\n  const initials = getInitials(name)\n\n  const interactiveProps =\n    !disabled && isInteractive\n      ? ({\n          cursor: 'pointer',\n          hoverBg,\n          hoverOpacity: src ? 0.85 : 1,\n          activeOpacity: src ? 0.7 : 1,\n          activeBg,\n          focusRing: 3,\n          tabIndex: 0,\n          userSelect: 'none',\n        } as const)\n      : {}\n\n  const aliasedProps = filterUndefined({\n    borderRadius: borderRadius,\n    'aria-disabled': disabled,\n  })\n\n  return (\n    <AvatarBase\n      borderRadius={borderRadius}\n      className={cs('vui-avatar', className)}\n      h={h}\n      ref={ref}\n      w={h}\n      {...styles}\n      {...interactiveProps}\n      {...aliasedProps}\n      {...rest}\n    >\n      {children ? (\n        children\n      ) : src ? (\n        <LazyImageOrDefault borderRadius={borderRadius} icon={icon} iconSize={iconSize} initials={initials} src={src} />\n      ) : icon ? (\n        <Icon name={icon} size={iconSize} />\n      ) : initials ? (\n        initials\n      ) : (\n        <Icon name=\"uiUser\" size={iconSize} />\n      )}\n    </AvatarBase>\n  )\n})\n\nfunction LazyImageOrDefault({\n  src,\n  borderRadius,\n  icon,\n  iconSize,\n  initials,\n}: {\n  src: string\n  borderRadius: string\n  icon: IconProp | undefined\n  iconSize: IconProps['size']\n  initials: string\n}) {\n  const [imgLoaded, setImgLoaded] = useState(false)\n  useEffect(() => {\n    let cancelled = false\n    loadImageUrl(src).then(res => {\n      if (!cancelled) setImgLoaded(res)\n    })\n    return () => {\n      cancelled = true\n    }\n  }, [src])\n\n  return imgLoaded ? (\n    <Image borderRadius={borderRadius} src={src} />\n  ) : icon ? (\n    <Icon name={icon} size={iconSize} />\n  ) : initials ? (\n    <>{initials}</>\n  ) : (\n    <Icon name=\"uiUser\" size={iconSize} />\n  )\n}\n\nAvatar.displayName = 'Avatar'\nexport default Avatar\n"],"mappings":"+fAWA,MAAa,EAAa,EAAO,OAAO;;;;;;;;;;;;;;;;;;;;EAuB3B,EAAS,GAA0B,EAAO,IAAQ,CAC7D,GAAM,CACJ,WACA,YACA,WACA,cAAc,EACd,OACA,gBAAgB,EAAM,UAAY,IAAA,GAClC,WACA,OAAO,GACP,MACA,GAAG,GACD,EAAiB,EAAM,CACrB,CAAE,WAAU,IAAG,UAAS,WAAU,GAAG,GAAW,EAAe,SAAU,EAAM,CAE/E,EAAe,EAAY,EAAM,OAAS,KAAO,MAAQ,MAAS,MAClE,EAAW,EAAY,EAAK,CAE5B,EACJ,CAAC,GAAY,EACR,CACC,OAAQ,UACR,UACA,aAAc,EAAM,IAAO,EAC3B,cAAe,EAAM,GAAM,EAC3B,WACA,UAAW,EACX,SAAU,EACV,WAAY,OACb,CACD,EAAE,CAEF,EAAe,EAAgB,CACrB,eACd,gBAAiB,EAClB,CAAC,CAEF,OACE,EAAC,EAAA,CACe,eACd,UAAW,EAAG,aAAc,EAAU,CACnC,IACE,MACL,EAAG,EACH,GAAI,EACJ,GAAI,EACJ,GAAI,EACJ,GAAI,WAEH,IAEG,EACF,EAAC,EAAA,CAAiC,eAAoB,OAAgB,WAAoB,WAAe,OAAO,CAC9G,EACF,EAACA,EAAAA,CAAK,KAAM,EAAM,KAAM,GAAY,CAClC,GAGF,EAACA,EAAAA,CAAK,KAAK,SAAS,KAAM,GAAY,GAE7B,EAEf,CAEF,SAAS,EAAmB,CAC1B,MACA,eACA,OACA,WACA,YAOC,CACD,GAAM,CAAC,EAAW,GAAgB,EAAS,GAAM,CAWjD,OAVA,MAAgB,CACd,IAAI,EAAY,GAIhB,OAHA,EAAa,EAAI,CAAC,KAAK,GAAO,CACvB,GAAW,EAAa,EAAI,EACjC,KACW,CACX,EAAY,KAEb,CAAC,EAAI,CAAC,CAEF,EACL,EAACC,EAAAA,CAAoB,eAAmB,OAAO,CAC7C,EACF,EAACD,EAAAA,CAAK,KAAM,EAAM,KAAM,GAAY,CAClC,EACF,EAAA,EAAA,CAAA,SAAG,EAAA,CAAY,CAEf,EAACA,EAAAA,CAAK,KAAK,SAAS,KAAM,GAAY,CAI1C,EAAO,YAAc,SACrB,IAAA,EAAe"}

package/dist/avatar/avatar.types.d.ts

@@ -0,0 +1,26 @@
+import { ThemingProps } from "../theme/types.js";
+import { SystemProps } from "../system/system.js";
+import { IconProp } from "../icon/icon.types.js";
+
+//#region src/avatar/avatar.types.d.ts
+type AvatarProps = SystemProps & ThemingProps<'Avatar'> & {
+  /** Available theme colors for this component. @deprecated */
+  colorScheme?: 'blue' | 'green' | 'grey' | 'prussian' | 'red' | 'yellow';
+  /** Displays avatar in disabled state with appropriate styling. */
+  disabled?: boolean;
+  /** Custom function to compute initials based on the provided name. */
+  getInitials?: (name: string) => string;
+  /** Renders an icon as the only content. */
+  icon?: IconProp;
+  /** Makes avatar clickable and focusable with correct styling. */
+  isInteractive?: boolean;
+  /** Displays Avatar with slightly rounded corners. */
+  isSquare?: boolean;
+  /** Displays initials of the provided name. */
+  name?: string;
+  /** Displays an image loaded from the given URL. */
+  src?: string;
+};
+//#endregion
+export { AvatarProps };
+//# sourceMappingURL=avatar.types.d.ts.map

package/dist/avatar/avatar.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.types.d.ts","names":[],"sources":["../../src/avatar/avatar.types.ts"],"sourcesContent":[],"mappings":";;;;;KAIY,WAAA,GAAc,cACxB;;EADU,WAAA,CAAA,EAAW,MAAA,GAAA,OAAA,GAAA,MAAA,GAAA,UAAA,GAAA,KAAA,GAAA,QAAA;EAAA;UAAG,CAAA,EAAA,OAAA;;aASf,CAAA,EAAA,CAAA,IAAA,EAAA,MAAA,EAAA,GAAA,MAAA;EAAQ;SAAR"}

package/dist/avatar/helpers.js

@@ -0,0 +1,2 @@
+function e(e=``){let[t=``,n=``]=e.split(` `);return`${t.charAt(0)}${n.charAt(0)}`.toUpperCase()}export{e as defaultGetInitials};globalThis.__vuiVersion__=`3.0.0-beta.7`;
+//# sourceMappingURL=helpers.js.map

package/dist/avatar/helpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.js","names":[],"sources":["../../src/avatar/helpers.ts"],"sourcesContent":["/** Gets initials from the name for the Avatar. */\nexport function defaultGetInitials(name = '') {\n  const [first = '', last = ''] = name.split(' ')\n\n  return `${first.charAt(0)}${last.charAt(0)}`.toUpperCase()\n}\n"],"mappings":"AACA,SAAgB,EAAmB,EAAO,GAAI,CAC5C,GAAM,CAAC,EAAQ,GAAI,EAAO,IAAM,EAAK,MAAM,IAAI,CAE/C,MAAO,GAAG,EAAM,OAAO,EAAE,GAAG,EAAK,OAAO,EAAE,GAAG,aAAa"}

package/dist/avatar/theme.js

@@ -0,0 +1,2 @@
+var e={baseStyle:{},defaultProps:{size:`md`,variant:`subtleGrey`,fontWeight:`medium`},sizes:{sm:{fontSize:`xs`,h:24,iconSize:`xs`},md:{fontSize:`sm`,h:32,iconSize:`sm`},lg:{fontSize:`md`,h:40,iconSize:`md`},xl:{fontSize:`lg`,h:48,iconSize:`xl`},xxl:{fontSize:`lg`,h:56,iconSize:`xxl`}},variants:{subtleGrey:{bg:`sandstone.90`,hoverBg:`sandstone.85`,borderColor:`sandstone.90`,color:`sandstone.20`,activeBg:`sandstone.79`},subtleBlue:{bg:`skyBlue.95`,hoverBg:`skyBlue.hover`,activeBg:`skyBlue.85`,borderColor:`skyBlue.95`,color:`seaBlue.main`},subtleRed:{bg:`energyRed.95`,borderColor:`energyRed.95`,hoverBg:`energyRed.90`,activeBg:`energyRed.85`,color:`energyRed.45`},subtleYellow:{bg:`sunflower.85`,hoverBg:`sunflower.70`,activeBg:`sunflower.65`,borderColor:`sunflower.85`,color:`sunflower.20`},subtleGreen:{bg:`landGreen.95`,hoverBg:`landGreen.90`,borderColor:`landGreen.95`,color:`landGreen.30`,activeBg:`landGreen.85`},subtleLavender:{bg:`hsl(232, 58%, 90%)`,hoverBg:`hsl(232, 58%, 85%)`,borderColor:`hsl(232, 58%, 90%)`,color:`hsl(232, 58%, 50%)`,activeBg:`hsl(232, 58%, 80%)`},subtleEucalyptus:{bg:`hsl(178, 80%, 85%)`,hoverBg:`hsl(178, 80%, 80%)`,borderColor:`hsl(178, 80%, 85%)`,color:`hsl(178, 80%, 20%)`,activeBg:`hsl(178, 80%, 75%)`},subtleTerracotta:{bg:`hsl(34, 100%, 85%)`,hoverBg:`hsl(34, 100%, 80%)`,borderColor:`hsl(34, 100%, 85%)`,color:`hsl(34, 100%, 20%)`,activeBg:`hsl(34, 100%, 75%)`},solidBlue:{bg:`seaBlue.main`,hoverBg:`seaBlue.35`,activeBg:`seaBlue.40`,borderColor:`seaBlue.main`,color:`white`},solidDarkBlue:{bg:`darkBlue.18`,hoverBg:`darkBlue.25`,activeBg:`darkBlue.35`,borderColor:`darkBlue.18`,color:`white`},solidRed:{bg:`energyRed.45`,hoverBg:`energyRed.54`,activeBg:`energyRed.60`,borderColor:`energyRed.45`,color:`white`},solidYellow:{bg:`sunflower.50`,hoverBg:`sunflower.80`,activeBg:`sunflower.85`,borderColor:`sunflower.50`,color:`sunflower.15`},solidGreen:{bg:`landGreen.35`,hoverBg:`landGreen.41`,activeBg:`landGreen.45`,borderColor:`landGreen.35`,color:`white`},solidLavender:{bg:`hsl(232, 58%, 60%)`,hoverBg:`hsl(232, 58%, 65%)`,borderColor:`hsl(232, 58%, 60%)`,color:`white`,activeBg:`hsl(232, 58%, 70%)`},solidEucalyptus:{bg:`hsl(178, 80%, 25%)`,hoverBg:`hsl(178, 80%, 35%)`,borderColor:`hsl(178, 80%, 25%)`,color:`white`,activeBg:`hsl(178, 80%, 42%)`},solidTerracotta:{bg:`hsl(34, 100%, 30%)`,hoverBg:`hsl(34, 100%, 40%)`,borderColor:`hsl(34, 100%, 35%)`,color:`white`,activeBg:`hsl(34, 100%, 45%)`},primaryLight:{bg:`buttonTypePrimaryDefaultBackgroundColorLight`,borderColor:`buttonTypePrimaryDefaultBorderColorLight`,color:`buttonTypePrimaryDefaultTextColorLight`,hoverBg:`buttonTypePrimaryHoverBackgroundColorLight`,hoverBorderColor:`buttonTypePrimaryHoverBorderColorLight`,hoverColor:`buttonTypePrimaryHoverTextColorLight`,activeBg:`buttonTypePrimaryActiveBackgroundColorLight`,activeBorderColor:`buttonTypePrimaryActiveBorderColorLight`,activeColor:`buttonTypePrimaryActiveTextColorLight`}}};export{e as default};globalThis.__vuiVersion__=`3.0.0-beta.7`;
+//# sourceMappingURL=theme.js.map

package/dist/avatar/theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.js","names":[],"sources":["../../src/avatar/theme.ts"],"sourcesContent":["const baseStyle = {}\n\nconst defaultProps = {\n  size: 'md',\n  variant: 'subtleGrey',\n  fontWeight: 'medium',\n}\n\nconst sizes = {\n  sm: {\n    fontSize: 'xs',\n    h: 24,\n    iconSize: 'xs',\n  },\n  md: {\n    fontSize: 'sm',\n    h: 32,\n    iconSize: 'sm',\n  },\n  lg: {\n    fontSize: 'md',\n    h: 40,\n    iconSize: 'md',\n  },\n  xl: {\n    fontSize: 'lg',\n    h: 48,\n    iconSize: 'xl',\n  },\n  xxl: {\n    fontSize: 'lg',\n    h: 56,\n    iconSize: 'xxl',\n  },\n}\n\nconst variants = {\n  subtleGrey: {\n    bg: 'sandstone.90',\n    hoverBg: 'sandstone.85',\n    borderColor: 'sandstone.90',\n    color: 'sandstone.20',\n    activeBg: 'sandstone.79',\n  },\n  subtleBlue: {\n    bg: 'skyBlue.95',\n    hoverBg: 'skyBlue.hover',\n    activeBg: 'skyBlue.85',\n    borderColor: 'skyBlue.95',\n    color: 'seaBlue.main',\n  },\n  subtleRed: {\n    bg: 'energyRed.95',\n    borderColor: 'energyRed.95',\n    hoverBg: 'energyRed.90',\n    activeBg: 'energyRed.85',\n    color: 'energyRed.45',\n  },\n  subtleYellow: {\n    bg: 'sunflower.85',\n    hoverBg: 'sunflower.70',\n    activeBg: 'sunflower.65',\n    borderColor: 'sunflower.85',\n    color: 'sunflower.20',\n  },\n  subtleGreen: {\n    bg: 'landGreen.95',\n    hoverBg: 'landGreen.90',\n    borderColor: 'landGreen.95',\n    color: 'landGreen.30',\n    activeBg: 'landGreen.85',\n  },\n  subtleLavender: {\n    bg: 'hsl(232, 58%, 90%)',\n    hoverBg: 'hsl(232, 58%, 85%)',\n    borderColor: 'hsl(232, 58%, 90%)',\n    color: 'hsl(232, 58%, 50%)',\n    activeBg: 'hsl(232, 58%, 80%)',\n  },\n  subtleEucalyptus: {\n    bg: 'hsl(178, 80%, 85%)',\n    hoverBg: 'hsl(178, 80%, 80%)',\n    borderColor: 'hsl(178, 80%, 85%)',\n    color: 'hsl(178, 80%, 20%)',\n    activeBg: 'hsl(178, 80%, 75%)',\n  },\n  subtleTerracotta: {\n    bg: 'hsl(34, 100%, 85%)',\n    hoverBg: 'hsl(34, 100%, 80%)',\n    borderColor: 'hsl(34, 100%, 85%)',\n    color: 'hsl(34, 100%, 20%)',\n    activeBg: 'hsl(34, 100%, 75%)',\n  },\n\n  /** solids next */\n  solidBlue: {\n    bg: 'seaBlue.main',\n    hoverBg: 'seaBlue.35',\n    activeBg: 'seaBlue.40',\n    borderColor: 'seaBlue.main',\n    color: 'white',\n  },\n  solidDarkBlue: {\n    bg: 'darkBlue.18',\n    hoverBg: 'darkBlue.25',\n    activeBg: 'darkBlue.35',\n    borderColor: 'darkBlue.18',\n    color: 'white',\n  },\n  solidRed: {\n    bg: 'energyRed.45',\n    hoverBg: 'energyRed.54',\n    activeBg: 'energyRed.60',\n    borderColor: 'energyRed.45',\n    color: 'white',\n  },\n  solidYellow: {\n    bg: 'sunflower.50',\n    hoverBg: 'sunflower.80',\n    activeBg: 'sunflower.85',\n    borderColor: 'sunflower.50',\n    color: 'sunflower.15',\n  },\n  solidGreen: {\n    bg: 'landGreen.35',\n    hoverBg: 'landGreen.41',\n    activeBg: 'landGreen.45',\n    borderColor: 'landGreen.35',\n    color: 'white',\n  },\n  solidLavender: {\n    bg: 'hsl(232, 58%, 60%)',\n    hoverBg: 'hsl(232, 58%, 65%)',\n    borderColor: 'hsl(232, 58%, 60%)',\n    color: 'white',\n    activeBg: 'hsl(232, 58%, 70%)',\n  },\n  solidEucalyptus: {\n    bg: 'hsl(178, 80%, 25%)',\n    hoverBg: 'hsl(178, 80%, 35%)',\n    borderColor: 'hsl(178, 80%, 25%)',\n    color: 'white',\n    activeBg: 'hsl(178, 80%, 42%)',\n  },\n  solidTerracotta: {\n    bg: 'hsl(34, 100%, 30%)',\n    hoverBg: 'hsl(34, 100%, 40%)',\n    borderColor: 'hsl(34, 100%, 35%)',\n    color: 'white',\n    activeBg: 'hsl(34, 100%, 45%)',\n  },\n  /** internal, used in *header* next */\n  primaryLight: {\n    bg: 'buttonTypePrimaryDefaultBackgroundColorLight',\n    borderColor: 'buttonTypePrimaryDefaultBorderColorLight',\n    color: 'buttonTypePrimaryDefaultTextColorLight',\n    hoverBg: 'buttonTypePrimaryHoverBackgroundColorLight',\n    hoverBorderColor: 'buttonTypePrimaryHoverBorderColorLight',\n    hoverColor: 'buttonTypePrimaryHoverTextColorLight',\n    activeBg: 'buttonTypePrimaryActiveBackgroundColorLight',\n    activeBorderColor: 'buttonTypePrimaryActiveBorderColorLight',\n    activeColor: 'buttonTypePrimaryActiveTextColorLight',\n  },\n}\n\nexport default {\n  baseStyle,\n  defaultProps,\n  sizes,\n  variants,\n}\n"],"mappings":"AAqKA,IAAA,EAAe,CACb,UAtKgB,EAAE,CAuKlB,aArKmB,CACnB,KAAM,KACN,QAAS,aACT,WAAY,SACb,CAkKC,MAhKY,CACZ,GAAI,CACF,SAAU,KACV,EAAG,GACH,SAAU,KACX,CACD,GAAI,CACF,SAAU,KACV,EAAG,GACH,SAAU,KACX,CACD,GAAI,CACF,SAAU,KACV,EAAG,GACH,SAAU,KACX,CACD,GAAI,CACF,SAAU,KACV,EAAG,GACH,SAAU,KACX,CACD,IAAK,CACH,SAAU,KACV,EAAG,GACH,SAAU,MACX,CACF,CAuIC,SArIe,CACf,WAAY,CACV,GAAI,eACJ,QAAS,eACT,YAAa,eACb,MAAO,eACP,SAAU,eACX,CACD,WAAY,CACV,GAAI,aACJ,QAAS,gBACT,SAAU,aACV,YAAa,aACb,MAAO,eACR,CACD,UAAW,CACT,GAAI,eACJ,YAAa,eACb,QAAS,eACT,SAAU,eACV,MAAO,eACR,CACD,aAAc,CACZ,GAAI,eACJ,QAAS,eACT,SAAU,eACV,YAAa,eACb,MAAO,eACR,CACD,YAAa,CACX,GAAI,eACJ,QAAS,eACT,YAAa,eACb,MAAO,eACP,SAAU,eACX,CACD,eAAgB,CACd,GAAI,qBACJ,QAAS,qBACT,YAAa,qBACb,MAAO,qBACP,SAAU,qBACX,CACD,iBAAkB,CAChB,GAAI,qBACJ,QAAS,qBACT,YAAa,qBACb,MAAO,qBACP,SAAU,qBACX,CACD,iBAAkB,CAChB,GAAI,qBACJ,QAAS,qBACT,YAAa,qBACb,MAAO,qBACP,SAAU,qBACX,CAGD,UAAW,CACT,GAAI,eACJ,QAAS,aACT,SAAU,aACV,YAAa,eACb,MAAO,QACR,CACD,cAAe,CACb,GAAI,cACJ,QAAS,cACT,SAAU,cACV,YAAa,cACb,MAAO,QACR,CACD,SAAU,CACR,GAAI,eACJ,QAAS,eACT,SAAU,eACV,YAAa,eACb,MAAO,QACR,CACD,YAAa,CACX,GAAI,eACJ,QAAS,eACT,SAAU,eACV,YAAa,eACb,MAAO,eACR,CACD,WAAY,CACV,GAAI,eACJ,QAAS,eACT,SAAU,eACV,YAAa,eACb,MAAO,QACR,CACD,cAAe,CACb,GAAI,qBACJ,QAAS,qBACT,YAAa,qBACb,MAAO,QACP,SAAU,qBACX,CACD,gBAAiB,CACf,GAAI,qBACJ,QAAS,qBACT,YAAa,qBACb,MAAO,QACP,SAAU,qBACX,CACD,gBAAiB,CACf,GAAI,qBACJ,QAAS,qBACT,YAAa,qBACb,MAAO,QACP,SAAU,qBACX,CAED,aAAc,CACZ,GAAI,+CACJ,YAAa,2CACb,MAAO,yCACP,QAAS,6CACT,iBAAkB,yCAClB,WAAY,uCACZ,SAAU,8CACV,kBAAmB,0CACnB,YAAa,wCACd,CACF,CAOA"}

package/dist/badge/badge.d.ts

@@ -0,0 +1,14 @@
+import { VuiComponent } from "../core/vui.js";
+import { BadgeProps } from "./badge.types.js";
+
+//#region src/badge/badge.d.ts
+
+/**
+ * Badges are round, non-interactive tags.
+ *
+ * These components are used for displaying information only; they might be used as a “counter” for push notifications.
+ */
+declare const Badge: VuiComponent<"span", BadgeProps>;
+//#endregion
+export { Badge };
+//# sourceMappingURL=badge.d.ts.map

package/dist/badge/badge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.d.ts","names":[],"sources":["../../src/badge/badge.tsx"],"sourcesContent":[],"mappings":";;;;;;;;AAaA;;AAAkB,cAAL,KAAK,cAAA,CAAA,MAAA,EAAA,UAAA,CAAA"}

package/dist/badge/badge.js

@@ -0,0 +1,2 @@
+import e from"./theme.js";import{vui as t}from"../core/vui.js";import{Tag as n}from"../tag/tag.js";import{jsx as r}from"react/jsx-runtime";const i=t((t,i)=>{let{variant:a,...o}=t,{variants:s}=e??{},c=s[a??`subtleSandstone`].container.bg,l=s[a??`subtleSandstone`].container.color;return r(n,{bg:c,className:`vui-badge`,color:l,isInteractive:!1,isRound:!0,minW:`20px`,ref:i,...o,onDelete:void 0})});i.displayName=`Badge`;var a=i;export{i as Badge,a as default};globalThis.__vuiVersion__=`3.0.0-beta.7`;
+//# sourceMappingURL=badge.js.map

package/dist/badge/badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.js","names":["theme"],"sources":["../../src/badge/badge.tsx"],"sourcesContent":["import { vui } from '../core'\nimport type { TagProps } from '../tag'\nimport { Tag } from '../tag'\nimport type { Dict } from '../utils'\nimport type { BadgeProps } from './badge.types'\nimport theme from './theme'\n\n/**\n * Badges are round, non-interactive tags.\n *\n * These components are used for displaying information only; they might be used as a “counter” for push notifications.\n */\n\nexport const Badge = vui<'span', BadgeProps>((props, ref) => {\n  const { variant, ...rest } = props as TagProps\n  const { variants } = (theme as Dict) ?? {}\n\n  const bg = variants[variant ?? 'subtleSandstone'].container.bg\n  const color = variants[variant ?? 'subtleSandstone'].container.color\n\n  return (\n    <Tag\n      bg={bg}\n      className=\"vui-badge\"\n      color={color}\n      isInteractive={false}\n      isRound\n      minW=\"20px\"\n      ref={ref}\n      {...rest}\n      onDelete={undefined}\n    />\n  )\n})\n\nBadge.displayName = 'Badge'\nexport default Badge\n"],"mappings":"2IAaA,MAAa,EAAQ,GAAyB,EAAO,IAAQ,CAC3D,GAAM,CAAE,UAAS,GAAG,GAAS,EACvB,CAAE,YAAcA,GAAkB,EAAE,CAEpC,EAAK,EAAS,GAAW,mBAAmB,UAAU,GACtD,EAAQ,EAAS,GAAW,mBAAmB,UAAU,MAE/D,OACE,EAAC,EAAA,CACK,KACJ,UAAU,YACH,QACP,cAAe,GACf,QAAA,GACA,KAAK,OACA,MACL,GAAI,EACJ,SAAU,IAAA,IACV,EAEJ,CAEF,EAAM,YAAc,QACpB,IAAA,EAAe"}

package/dist/badge/badge.types.d.ts

@@ -0,0 +1,20 @@
+import { ThemingProps } from "../theme/types.js";
+import { SystemProps } from "../system/system.js";
+import { IconProp } from "../icon/icon.types.js";
+import { TagInnerProps } from "../tag/tag.types.js";
+
+//#region src/badge/badge.types.d.ts
+type BadgeInnerProps = {
+  /** Icon that replaces any other content. */
+  icon?: IconProp | JSX.Element;
+  /** Socket displaying icon on the left side. */
+  iconLeft?: IconProp | JSX.Element;
+  /** Socket displaying icon on the right side. */
+  iconRight?: IconProp | JSX.Element;
+  /** Socket displaying text as alternative to children. */
+  text?: React.ReactNode;
+};
+type BadgeProps = SystemProps & ThemingProps<'Badge'> & TagInnerProps & BadgeInnerProps;
+//#endregion
+export { BadgeProps };
+//# sourceMappingURL=badge.types.d.ts.map

package/dist/badge/badge.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.types.d.ts","names":[],"sources":["../../src/badge/badge.types.ts"],"sourcesContent":[],"mappings":";;;;;;KAKY,eAAA;;EAAA,IAAA,CAAA,EAEH,QAFG,GAEQ,GAAA,CAAI,OAFG;EAAA;UAElB,CAAA,EAEI,QAFJ,GAEe,GAAA,CAAI,OAFnB;;WAEI,CAAA,EAEC,QAFD,GAEY,GAAA,CAAI,OAFhB;;MAEC,CAAA,EAEL,KAAA,CAAM,SAFD;;AAEL,KAGG,UAAA,GAAa,WAHV,GAGwB,YAHxB,CAAA,OAAA,CAAA,GAGgD,aAHhD,GAGgE,eAHhE"}

package/dist/badge/theme.js

@@ -0,0 +1,2 @@
+var e={baseStyle:{},defaultProps:{size:`md`,variant:`subtleSandstone`,fontWeight:`medium`},parts:[`container`,`icon`,`text`],sizes:{xxs:{container:{borderRadius:`lg`,fontSize:`sm`,h:16,spaceX:2},icon:{size:`xs`}},xs:{container:{borderRadius:`lg`,fontSize:`sm`,h:20,spaceX:4},icon:{size:`xs`}},sm:{container:{fontSize:`sm`,h:24,spaceX:4},icon:{size:`xs`}},md:{container:{fontSize:`sm`,h:32,spaceX:6},icon:{size:`sm`}},lg:{container:{fontSize:`md`,h:40,spaceX:8},icon:{size:`md`}}},variants:{subtleSandstone:{container:{bg:`sandstone.90`,color:`sandstone.20`,borderColor:`transparent`}},subtleEarth:{container:{bg:`earth.95`,color:`earth.20`}},subtleBlue:{container:{bg:`skyBlue.95`,color:`seaBlue.main`}},subtleBlue2:{container:{bg:`skyBlue.95`,color:`skyBlue.20`}},subtleRed:{container:{bg:`energyRed.95`,color:`energyRed.45`}},subtleYellow:{container:{bg:`sunflower.85`,color:`sunflower.20`}},subtleGreen:{container:{bg:`landGreen.95`,color:`landGreen.30`}},solidBlue:{container:{bg:`skyBlue.65`,color:`skyBlue.20`}},solidDarkBlue:{container:{bg:`darkBlue.18`,borderColor:`darkBlue.18`,color:`white`}},solidRed:{container:{bg:`energyRed.45`,color:`white`}},solidYellow:{container:{bg:`sunflower.50`,color:`sunflower.15`}},solidGreen:{container:{bg:`landGreen.35`,color:`white`}}}};export{e as default};globalThis.__vuiVersion__=`3.0.0-beta.7`;
+//# sourceMappingURL=theme.js.map

package/dist/badge/theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.js","names":[],"sources":["../../src/badge/theme.ts"],"sourcesContent":["const baseStyle = {}\n\nconst defaultProps = {\n  size: 'md',\n  variant: 'subtleSandstone',\n  fontWeight: 'medium',\n}\n\nconst parts = ['container', 'icon', 'text']\n\nconst sizes = {\n  xxs: {\n    container: {\n      borderRadius: 'lg',\n      fontSize: 'sm',\n      h: 16,\n      spaceX: 2,\n    },\n    icon: {\n      size: 'xs',\n    },\n  },\n  xs: {\n    container: {\n      borderRadius: 'lg',\n      fontSize: 'sm',\n      h: 20,\n      spaceX: 4,\n    },\n    icon: {\n      size: 'xs',\n    },\n  },\n  sm: {\n    container: {\n      fontSize: 'sm',\n      h: 24,\n      spaceX: 4,\n    },\n    icon: {\n      size: 'xs',\n    },\n  },\n  md: {\n    container: {\n      fontSize: 'sm',\n      h: 32,\n      spaceX: 6,\n    },\n    icon: {\n      size: 'sm',\n    },\n  },\n  lg: {\n    container: {\n      fontSize: 'md',\n      h: 40,\n      spaceX: 8,\n    },\n    icon: {\n      size: 'md',\n    },\n  },\n}\n\nconst variants = {\n  subtleSandstone: {\n    container: {\n      bg: 'sandstone.90',\n      color: 'sandstone.20',\n      borderColor: 'transparent',\n    },\n  },\n  subtleEarth: {\n    container: {\n      bg: 'earth.95',\n      color: 'earth.20',\n    },\n  },\n  subtleBlue: {\n    container: {\n      bg: 'skyBlue.95',\n      color: 'seaBlue.main',\n    },\n  },\n  subtleBlue2: {\n    container: {\n      bg: 'skyBlue.95',\n      color: 'skyBlue.20',\n    },\n  },\n  subtleRed: {\n    container: {\n      bg: 'energyRed.95',\n      color: 'energyRed.45',\n    },\n  },\n  subtleYellow: {\n    container: {\n      bg: 'sunflower.85',\n      color: 'sunflower.20',\n    },\n  },\n  subtleGreen: {\n    container: {\n      bg: 'landGreen.95',\n      color: 'landGreen.30',\n    },\n  },\n\n  /** solids next */\n  solidBlue: {\n    container: {\n      bg: 'skyBlue.65',\n      color: 'skyBlue.20',\n    },\n  },\n\n  solidDarkBlue: {\n    container: {\n      bg: 'darkBlue.18',\n      borderColor: 'darkBlue.18',\n      color: 'white',\n    },\n  },\n  solidRed: {\n    container: {\n      bg: 'energyRed.45',\n      color: 'white',\n    },\n  },\n  solidYellow: {\n    container: {\n      bg: 'sunflower.50',\n      color: 'sunflower.15',\n    },\n  },\n  solidGreen: {\n    container: {\n      bg: 'landGreen.35',\n      color: 'white',\n    },\n  },\n}\n\nexport default {\n  baseStyle,\n  defaultProps,\n  parts,\n  sizes,\n  variants,\n}\n"],"mappings":"AAiJA,IAAA,EAAe,CACb,UAlJgB,EAAE,CAmJlB,aAjJmB,CACnB,KAAM,KACN,QAAS,kBACT,WAAY,SACb,CA8IC,MA5IY,CAAC,YAAa,OAAQ,OAAO,CA6IzC,MA3IY,CACZ,IAAK,CACH,UAAW,CACT,aAAc,KACd,SAAU,KACV,EAAG,GACH,OAAQ,EACT,CACD,KAAM,CACJ,KAAM,KACP,CACF,CACD,GAAI,CACF,UAAW,CACT,aAAc,KACd,SAAU,KACV,EAAG,GACH,OAAQ,EACT,CACD,KAAM,CACJ,KAAM,KACP,CACF,CACD,GAAI,CACF,UAAW,CACT,SAAU,KACV,EAAG,GACH,OAAQ,EACT,CACD,KAAM,CACJ,KAAM,KACP,CACF,CACD,GAAI,CACF,UAAW,CACT,SAAU,KACV,EAAG,GACH,OAAQ,EACT,CACD,KAAM,CACJ,KAAM,KACP,CACF,CACD,GAAI,CACF,UAAW,CACT,SAAU,KACV,EAAG,GACH,OAAQ,EACT,CACD,KAAM,CACJ,KAAM,KACP,CACF,CACF,CAuFC,SArFe,CACf,gBAAiB,CACf,UAAW,CACT,GAAI,eACJ,MAAO,eACP,YAAa,cACd,CACF,CACD,YAAa,CACX,UAAW,CACT,GAAI,WACJ,MAAO,WACR,CACF,CACD,WAAY,CACV,UAAW,CACT,GAAI,aACJ,MAAO,eACR,CACF,CACD,YAAa,CACX,UAAW,CACT,GAAI,aACJ,MAAO,aACR,CACF,CACD,UAAW,CACT,UAAW,CACT,GAAI,eACJ,MAAO,eACR,CACF,CACD,aAAc,CACZ,UAAW,CACT,GAAI,eACJ,MAAO,eACR,CACF,CACD,YAAa,CACX,UAAW,CACT,GAAI,eACJ,MAAO,eACR,CACF,CAGD,UAAW,CACT,UAAW,CACT,GAAI,aACJ,MAAO,aACR,CACF,CAED,cAAe,CACb,UAAW,CACT,GAAI,cACJ,YAAa,cACb,MAAO,QACR,CACF,CACD,SAAU,CACR,UAAW,CACT,GAAI,eACJ,MAAO,QACR,CACF,CACD,YAAa,CACX,UAAW,CACT,GAAI,eACJ,MAAO,eACR,CACF,CACD,WAAY,CACV,UAAW,CACT,GAAI,eACJ,MAAO,QACR,CACF,CACF,CAQA"}

package/dist/box/box.d.ts

@@ -0,0 +1,12 @@
+import { SystemProps } from "../system/system.js";
+import { BoxProps } from "./box.types.js";
+import { VuiComponent } from "../core/vui.js";
+import * as styled_components437 from "styled-components";
+
+//#region src/box/box.d.ts
+declare const BoxBase: styled_components437.StyledComponent<"div", styled_components437.DefaultTheme, SystemProps, never>;
+/** Organizes content layout into columns or rows with easy centering. */
+declare const Box: VuiComponent<"div", BoxProps>;
+//#endregion
+export { Box, BoxBase };
+//# sourceMappingURL=box.d.ts.map

package/dist/box/box.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"box.d.ts","names":[],"sources":["../../src/box/box.tsx"],"sourcesContent":[],"mappings":";;;;;;cAIa,SAAO,oBAAA,CAAA,uBAInB,oBAAA,CAJmB,YAAA;;cAOP,yBAAG"}

package/dist/box/box.js

@@ -0,0 +1,6 @@
+import{filterUndefined as e}from"../utils/object.js";import{cs as t}from"../utils/styles.js";import{omitThemingProps as n,useStyleConfig as r}from"../core/theme.js";import{styled as i}from"../core/styled.js";import{vui as a}from"../core/vui.js";import{jsx as o}from"react/jsx-runtime";const s=i.divBox`
+  display: flex;
+  min-width: 0;
+  transition-duration: normal;
+`,c=a((i,a)=>{let{align:c,center:l,centerH:u,centerV:d,className:f,column:p,direction:m,elevation:h,hoverShadow:g,justify:_,radius:v,shadow:y,wrap:b,...x}=n(i),S=r(`Box`,i),C=e({alignItems:c??(l||(p?u:d)?`center`:void 0),borderRadius:v,boxShadow:h??y,flexDirection:m??(p?`column`:void 0),flexWrap:b?`wrap`:void 0,justifyContent:_??(l||(p?d:u)?`center`:void 0)});return o(s,{className:t(`vui-box`,f),ref:a,...S,...C,...x})});c.displayName=`Box`;var l=c;export{c as Box,s as BoxBase,l as default};globalThis.__vuiVersion__=`3.0.0-beta.7`;
+//# sourceMappingURL=box.js.map

package/dist/box/box.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"box.js","names":[],"sources":["../../src/box/box.tsx"],"sourcesContent":["import { omitThemingProps, styled, useStyleConfig, vui } from '../core'\nimport { cs, filterUndefined } from '../utils'\nimport type { BoxProps } from './box.types'\n\nexport const BoxBase = styled.divBox`\n  display: flex;\n  min-width: 0;\n  transition-duration: normal;\n`\n\n/** Organizes content layout into columns or rows with easy centering. */\nexport const Box = vui<'div', BoxProps>((props, ref) => {\n  const {\n    align,\n    center,\n    centerH,\n    centerV,\n    className,\n    column,\n    direction,\n    elevation,\n    hoverShadow: hoverBoxShadow,\n    justify,\n    radius: borderRadius,\n    shadow,\n    wrap,\n    ...rest\n  } = omitThemingProps(props)\n  const styles = useStyleConfig('Box', props)\n\n  const alignItems = center || (column ? centerH : centerV) ? 'center' : undefined\n  const flexDirection = column ? 'column' : undefined\n  const justifyContent = center || (column ? centerV : centerH) ? 'center' : undefined\n\n  const aliasedProps = filterUndefined<BoxProps>({\n    alignItems: align ?? alignItems,\n    borderRadius,\n    boxShadow: elevation ?? shadow,\n    flexDirection: direction ?? flexDirection,\n    flexWrap: wrap ? 'wrap' : undefined,\n    justifyContent: justify ?? justifyContent,\n  })\n\n  return <BoxBase className={cs('vui-box', className)} ref={ref} {...styles} {...aliasedProps} {...rest} />\n})\n\nBox.displayName = 'Box'\nexport default Box\n"],"mappings":"6RAIA,MAAa,EAAU,EAAO,MAAM;;;;EAOvB,EAAM,GAAsB,EAAO,IAAQ,CACtD,GAAM,CACJ,QACA,SACA,UACA,UACA,YACA,SACA,YACA,YACA,YAAa,EACb,UACA,OAAQ,EACR,SACA,OACA,GAAG,GACD,EAAiB,EAAM,CACrB,EAAS,EAAe,MAAO,EAAM,CAMrC,EAAe,EAA0B,CAC7C,WAAY,IALK,IAAW,EAAS,EAAU,GAAW,SAAW,IAAA,IAMrE,eACA,UAAW,GAAa,EACxB,cAAe,IAPK,EAAS,SAAW,IAAA,IAQxC,SAAU,EAAO,OAAS,IAAA,GAC1B,eAAgB,IARK,IAAW,EAAS,EAAU,GAAW,SAAW,IAAA,IAS1E,CAAC,CAEF,OAAO,EAAC,EAAA,CAAQ,UAAW,EAAG,UAAW,EAAU,CAAO,MAAK,GAAI,EAAQ,GAAI,EAAc,GAAI,GAAQ,EACzG,CAEF,EAAI,YAAc,MAClB,IAAA,EAAe"}

package/dist/box/box.types.d.ts

@@ -0,0 +1,36 @@
+import { ThemingProps } from "../theme/types.js";
+import { BordersProps } from "../system/borders.js";
+import { EffectsProps } from "../system/effects.js";
+import { FlexboxesProps } from "../system/flexboxes.js";
+import { SystemProps } from "../system/system.js";
+
+//#region src/box/box.types.d.ts
+type BoxProps = SystemProps & ThemingProps<'Box'> & {
+  /** Alias for alignItems prop. @deprecated */
+  align?: FlexboxesProps['alignItems'];
+  /** Centers the content vertically and horizontally. */
+  center?: boolean;
+  /** Centers the content horizontally. */
+  centerH?: boolean;
+  /** Centers the content vertically. */
+  centerV?: boolean;
+  /** Displays content in a column. */
+  column?: boolean;
+  /** Alias for flexDirection prop. @deprecated */
+  direction?: FlexboxesProps['flexDirection'];
+  /** Alias for boxShadow prop. @deprecated */
+  elevation?: EffectsProps['boxShadow'];
+  /** Alias for hoverBoxShadow prop. @deprecated */
+  hoverShadow?: EffectsProps['hoverBoxShadow'];
+  /** Alias for justifyContent prop. @deprecated */
+  justify?: FlexboxesProps['justifyContent'];
+  /** Alias for borderRadius prop. @deprecated */
+  radius?: BordersProps['borderRadius'];
+  /** Alias for boxShadow prop. @deprecated */
+  shadow?: EffectsProps['boxShadow'];
+  /** Applies flex-wrap property. */
+  wrap?: boolean;
+};
+//#endregion
+export { BoxProps };
+//# sourceMappingURL=box.types.d.ts.map

package/dist/box/box.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"box.types.d.ts","names":[],"sources":["../../src/box/box.types.ts"],"sourcesContent":[],"mappings":";;;;;;;KAGY,QAAA,GAAW,cACrB;;UAEU;;;EAHA;EAAQ,OAAA,CAAA,EAAA,OAAA;;SAClB,CAAA,EAAA,OAAA;;QAYc,CAAA,EAAA,OAAA;;WAIE,CAAA,EAJF,cAIE,CAAA,eAAA,CAAA;;WAIL,CAAA,EANG,YAMH,CAAA,WAAA,CAAA;;EAEY,WAAA,CAAA,EANP,YAMO,CAAA,gBAAA,CAAA;;YAJX;;WAED;;WAEA"}

package/dist/box/theme.js

@@ -0,0 +1,2 @@
+var e={baseStyle:{},defaultProps:{},sizes:{},variants:{}};export{e as default};globalThis.__vuiVersion__=`3.0.0-beta.7`;
+//# sourceMappingURL=theme.js.map

package/dist/box/theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.js","names":[],"sources":["../../src/box/theme.ts"],"sourcesContent":["const baseStyle = {}\n\nconst defaultProps = {}\n\nconst sizes = {}\n\nconst variants = {}\n\nexport default {\n  baseStyle,\n  defaultProps,\n  sizes,\n  variants,\n}\n"],"mappings":"AAQA,IAAA,EAAe,CACb,UATgB,EAAE,CAUlB,aARmB,EAAE,CASrB,MAPY,EAAE,CAQd,SANe,EAAE,CAOlB"}

package/dist/breadcrumbs/breadcrumbs.d.ts

@@ -0,0 +1,15 @@
+import { SystemProps } from "../system/system.js";
+import { VuiComponent } from "../core/vui.js";
+import { BreadcrumbsProps } from "./breadcrumbs.types.js";
+import { BreadcrumbsItem } from "./breadcrumbsItem.js";
+import * as styled_components70 from "styled-components";
+
+//#region src/breadcrumbs/breadcrumbs.d.ts
+declare const BreadcrumbsBase: styled_components70.StyledComponent<"div", styled_components70.DefaultTheme, SystemProps, never>;
+/** Breadcrumbs consist of a list of items that help a user visualize a page's location within the hierarchical structure of a website, and allow correspondent navigation. */
+declare const Breadcrumbs: VuiComponent<"div", BreadcrumbsProps> & {
+  Item: typeof BreadcrumbsItem;
+};
+//#endregion
+export { Breadcrumbs, BreadcrumbsBase };
+//# sourceMappingURL=breadcrumbs.d.ts.map

package/dist/breadcrumbs/breadcrumbs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumbs.d.ts","names":[],"sources":["../../src/breadcrumbs/breadcrumbs.tsx"],"sourcesContent":[],"mappings":";;;;;;;cAUa,iBAAe,mBAAA,CAAA,uBAQ3B,mBAAA,CAR2B,YAAA;;cAWf,aAyBP,oBAAoB;eACX;AArCf,CAAA"}

package/dist/breadcrumbs/breadcrumbs.js

@@ -0,0 +1,10 @@
+import{filterUndefined as e}from"../utils/object.js";import{cs as t}from"../utils/styles.js";import{useStyleConfig as n}from"../core/theme.js";import{styled as r}from"../core/styled.js";import{vui as i}from"../core/vui.js";import{BreadcrumbsProvider as a}from"./context.js";import o from"./breadcrumbsItem.js";import s from"./breadcrumbsSeparator.js";import{Children as c,Fragment as l,useMemo as u}from"react";import{jsx as d,jsxs as f}from"react/jsx-runtime";const p=r.divBox`
+  display: flex;
+  min-width: 0;
+  transition-duration: normal;
+
+  .vui-breadcrumbs-item:last-of-type {
+    font-weight: 600;
+  }
+`,m=i((r,i)=>{let{children:o,className:m,size:h,variant:g,..._}=r,v=n(`Breadcrumbs`,r),y=u(()=>e({size:h,variant:g}),[h,g]),b=e({}),x=c.toArray(o);return d(a,{value:y,children:d(p,{className:t(`vui-breadcrumbs`,m),ref:i,...v.main,...b,..._,children:c.map(x,(e,t)=>f(l,{children:[e,t!==x.length-1&&d(s,{})]},t))})})});m.Item=o,m.displayName=`Breadcrumbs`;export{m as Breadcrumbs,p as BreadcrumbsBase};globalThis.__vuiVersion__=`3.0.0-beta.7`;
+//# sourceMappingURL=breadcrumbs.js.map

package/dist/breadcrumbs/breadcrumbs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumbs.js","names":["BreadcrumbsSeparator","BreadcrumbsItem"],"sources":["../../src/breadcrumbs/breadcrumbs.tsx"],"sourcesContent":["import { Children, Fragment, useMemo } from 'react'\n\nimport type { VuiComponent } from '../core'\nimport { styled, useStyleConfig, vui } from '../core'\nimport { cs, filterUndefined } from '../utils'\nimport type { BreadcrumbsProps } from './breadcrumbs.types'\nimport BreadcrumbsItem from './breadcrumbsItem'\nimport BreadcrumbsSeparator from './breadcrumbsSeparator'\nimport { BreadcrumbsProvider } from './context'\n\nexport const BreadcrumbsBase = styled.divBox`\n  display: flex;\n  min-width: 0;\n  transition-duration: normal;\n\n  .vui-breadcrumbs-item:last-of-type {\n    font-weight: 600;\n  }\n`\n\n/** Breadcrumbs consist of a list of items that help a user visualize a page's location within the hierarchical structure of a website, and allow correspondent navigation. */\nexport const Breadcrumbs = vui<'div', BreadcrumbsProps>((props, ref) => {\n  const { children, className, size, variant, ...rest } = props\n  const styles = useStyleConfig('Breadcrumbs', props)\n  const context = useMemo(() => filterUndefined({ size, variant }), [size, variant])\n  const aliasedProps = filterUndefined<BreadcrumbsProps>({})\n  const arrayChildren = Children.toArray(children)\n\n  return (\n    <BreadcrumbsProvider value={context}>\n      <BreadcrumbsBase\n        className={cs('vui-breadcrumbs', className)}\n        ref={ref}\n        {...styles.main}\n        {...aliasedProps}\n        {...rest}\n      >\n        {Children.map(arrayChildren, (child, key) => (\n          <Fragment key={key}>\n            {child}\n            {key !== arrayChildren.length - 1 && <BreadcrumbsSeparator />}\n          </Fragment>\n        ))}\n      </BreadcrumbsBase>\n    </BreadcrumbsProvider>\n  )\n}) as VuiComponent<'div', BreadcrumbsProps> & {\n  Item: typeof BreadcrumbsItem\n}\n\nBreadcrumbs.Item = BreadcrumbsItem\nBreadcrumbs.displayName = 'Breadcrumbs'\nexport default Breadcrumbs\n"],"mappings":"6cAUA,MAAa,EAAkB,EAAO,MAAM;;;;;;;;EAW/B,EAAc,GAA8B,EAAO,IAAQ,CACtE,GAAM,CAAE,WAAU,YAAW,OAAM,UAAS,GAAG,GAAS,EAClD,EAAS,EAAe,cAAe,EAAM,CAC7C,EAAU,MAAc,EAAgB,CAAE,OAAM,UAAS,CAAC,CAAE,CAAC,EAAM,EAAQ,CAAC,CAC5E,EAAe,EAAkC,EAAE,CAAC,CACpD,EAAgB,EAAS,QAAQ,EAAS,CAEhD,OACE,EAAC,EAAA,CAAoB,MAAO,WAC1B,EAAC,EAAA,CACC,UAAW,EAAG,kBAAmB,EAAU,CACtC,MACL,GAAI,EAAO,KACX,GAAI,EACJ,GAAI,WAEH,EAAS,IAAI,GAAgB,EAAO,IACnC,EAAC,EAAA,CAAA,SAAA,CACE,EACA,IAAQ,EAAc,OAAS,GAAK,EAACA,EAAAA,EAAAA,CAAuB,CAAA,CAAA,CAFhD,EAGJ,CACX,EACc,EACE,EAExB,CAIF,EAAY,KAAOC,EACnB,EAAY,YAAc"}

package/dist/breadcrumbs/breadcrumbs.types.d.ts

@@ -0,0 +1,24 @@
+import { ThemingProps } from "../theme/types.js";
+import { SystemProps } from "../system/system.js";
+import { BoxProps } from "../box/box.types.js";
+import { ReactNode } from "react";
+
+//#region src/breadcrumbs/breadcrumbs.types.d.ts
+type BreadcrumbsProps = SystemProps & ThemingProps<'Breadcrumbs'>;
+type BreadcrumbsItemProps = BoxProps & {
+  /** Custom class name */
+  className?: string;
+  /** Content */
+  children?: ReactNode;
+};
+type BreadcrumbsSeparatorProps = BoxProps & {
+  /** Custom class name */
+  className?: string;
+  /** Content */
+  children?: ReactNode;
+  /** Alternative way to provide content */
+  content?: ReactNode;
+};
+//#endregion
+export { BreadcrumbsItemProps, BreadcrumbsProps, BreadcrumbsSeparatorProps };
+//# sourceMappingURL=breadcrumbs.types.d.ts.map

package/dist/breadcrumbs/breadcrumbs.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumbs.types.d.ts","names":[],"sources":["../../src/breadcrumbs/breadcrumbs.types.ts"],"sourcesContent":[],"mappings":";;;;;;KAMY,gBAAA,GAAmB,cAAc;KAEjC,oBAAA,GAAuB;EAFvB;EAAgB,SAAA,CAAA,EAAA,MAAA;;UAAiB,CAAA,EAMhC,SANgC;CAAY;AAE7C,KAOA,yBAAA,GAA4B,QAPR,GAAA;EAAA;WAAG,CAAA,EAAA,MAAA;;EAIb,QAAA,CAAA,EAOT,SAPS;EAGV;EAAyB,OAAA,CAAA,EAMzB,SANyB"}

package/dist/breadcrumbs/breadcrumbsItem.d.ts

@@ -0,0 +1,9 @@
+import { VuiComponent } from "../core/vui.js";
+import { BreadcrumbsItemProps } from "./breadcrumbs.types.js";
+
+//#region src/breadcrumbs/breadcrumbsItem.d.ts
+/** A Breadcrumb item. */
+declare const BreadcrumbsItem: VuiComponent<"div", BreadcrumbsItemProps>;
+//#endregion
+export { BreadcrumbsItem };
+//# sourceMappingURL=breadcrumbsItem.d.ts.map

package/dist/breadcrumbs/breadcrumbsItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumbsItem.d.ts","names":[],"sources":["../../src/breadcrumbs/breadcrumbsItem.tsx"],"sourcesContent":[],"mappings":";;;;;cAQa,iBAeP,oBAAoB"}

package/dist/breadcrumbs/breadcrumbsItem.js

@@ -0,0 +1,2 @@
+import{cs as e}from"../utils/styles.js";import{omitThemingProps as t,useStyleConfig as n}from"../core/theme.js";import{vui as r}from"../core/vui.js";import{Box as i}from"../box/box.js";import{useBreadcrumbsContext as a}from"./context.js";import{jsx as o}from"react/jsx-runtime";const s=r((r,s)=>{let{className:c,children:l,...u}=t(r),d=n(`Breadcrumbs`,a());return o(i,{alignItems:`center`,className:e(`vui-breadcrumbs-item`,c),p:0,ref:s,...d.item,...u,children:l})});s.displayName=`BreadcrumbsItem`;var c=s;export{c as default};globalThis.__vuiVersion__=`3.0.0-beta.7`;
+//# sourceMappingURL=breadcrumbsItem.js.map

package/dist/breadcrumbs/breadcrumbsItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumbsItem.js","names":[],"sources":["../../src/breadcrumbs/breadcrumbsItem.tsx"],"sourcesContent":["import { Box } from '../box'\nimport type { VuiComponent } from '../core'\nimport { omitThemingProps, useStyleConfig, vui } from '../core'\nimport { cs } from '../utils'\nimport type { BreadcrumbsItemProps } from './breadcrumbs.types'\nimport { useBreadcrumbsContext } from './context'\n\n/** A Breadcrumb item. */\nexport const BreadcrumbsItem = vui<'div', BreadcrumbsItemProps>((props, ref) => {\n  const { className, children, ...rest } = omitThemingProps(props)\n  const styles = useStyleConfig('Breadcrumbs', useBreadcrumbsContext())\n  return (\n    <Box\n      alignItems=\"center\"\n      className={cs('vui-breadcrumbs-item', className)}\n      p={0}\n      ref={ref}\n      {...styles.item}\n      {...rest}\n    >\n      {children}\n    </Box>\n  )\n}) as VuiComponent<'div', BreadcrumbsItemProps>\n\nBreadcrumbsItem.displayName = 'BreadcrumbsItem'\n\nexport default BreadcrumbsItem\n"],"mappings":"sRAQA,MAAa,EAAkB,GAAkC,EAAO,IAAQ,CAC9E,GAAM,CAAE,YAAW,WAAU,GAAG,GAAS,EAAiB,EAAM,CAC1D,EAAS,EAAe,cAAe,GAAuB,CAAC,CACrE,OACE,EAAC,EAAA,CACC,WAAW,SACX,UAAW,EAAG,uBAAwB,EAAU,CAChD,EAAG,EACE,MACL,GAAI,EAAO,KACX,GAAI,EAEH,YACG,EAER,CAEF,EAAgB,YAAc,kBAE9B,IAAA,EAAe"}