@veracity/vui 4.0.3 → 5.0.0-alpha.375407.2603121328

package/dist/table/tr.js.map

@@ -1 +1 @@
-{"version":3,"file":"tr.js","names":[],"sources":["../../src/table/tr.tsx"],"sourcesContent":["import { useEffect, useState } from 'react'\n\nimport Button from '../button'\nimport { styled, useStyleConfig, vui } from '../core'\nimport { cs } from '../utils'\nimport { useTableContext } from './context'\nimport type { TrProps } from './table.types'\nimport Td from './td'\n\nconst trClassName = 'vui-tr'\nconst buttonClassName = (isExpanded?: boolean) => `falAngle${isExpanded ? 'Down' : 'Right'}`\n\nexport const TrBase = styled.trBox`\n  position: relative;\n  transition-duration: fast;\n`\n\n/** Displays Table row that can contain heading or data cells. */\nexport const Tr = vui<'tr', TrProps>((props, ref) => {\n  const { className, isExpanded: isExpandedProp, isSelected, nested, onCollapsed, onExpanded, ...rest } = props\n  const { variant } = useTableContext() ?? {}\n  const styles = useStyleConfig('Table', useTableContext())\n  const [isExpanded, setIsExpanded] = useState(isExpandedProp)\n\n  useEffect(() => {\n    setIsExpanded(isExpandedProp)\n  }, [isExpandedProp])\n\n  const onToggle = () => {\n    if (isExpanded) {\n      setIsExpanded(false)\n      onCollapsed?.()\n    } else {\n      setIsExpanded(true)\n      onExpanded?.()\n    }\n  }\n\n  const selectedProps = isSelected ? { bg: 'skyBlue.selected' } : {}\n\n  rest.children = (\n    <>\n      {nested !== undefined && (\n        <Td maxW={16} px={0} textAlign=\"center\">\n          {nested ? <Button icon={buttonClassName(isExpanded)} onClick={onToggle} variant=\"subtleBlue\" /> : null}\n        </Td>\n      )}\n      {rest.children}\n    </>\n  )\n\n  return (\n    <>\n      <TrBase\n        className={cs(trClassName, `${trClassName}-${isExpanded ? 'expanded' : 'collapsed'}`, className)}\n        data-selected={Boolean(isSelected)}\n        data-variant={variant}\n        ref={ref}\n        {...styles.tr}\n        {...selectedProps}\n        {...rest}\n      />\n      {isExpanded && nested}\n    </>\n  )\n})\n\nTr.displayName = 'Tr'\nexport default Tr\n"],"mappings":";;;;;;;;;;;AASA,MAAM,cAAc;AACpB,MAAM,mBAAmB,eAAyB,WAAW,aAAa,SAAS;AAEnF,MAAa,SAAS,OAAO,KAAK;;;;;AAMlC,MAAa,KAAK,KAAoB,OAAO,QAAQ;CACnD,MAAM,EAAE,WAAW,YAAY,gBAAgB,YAAY,QAAQ,aAAa,YAAY,GAAG,SAAS;CACxG,MAAM,EAAE,YAAY,iBAAiB,IAAI,EAAE;CAC3C,MAAM,SAAS,eAAe,SAAS,iBAAiB,CAAC;CACzD,MAAM,CAAC,YAAY,iBAAiB,SAAS,eAAe;AAE5D,iBAAgB;AACd,gBAAc,eAAe;IAC5B,CAAC,eAAe,CAAC;CAEpB,MAAM,iBAAiB;AACrB,MAAI,YAAY;AACd,iBAAc,MAAM;AACpB,kBAAe;SACV;AACL,iBAAc,KAAK;AACnB,iBAAc;;;CAIlB,MAAM,gBAAgB,aAAa,EAAE,IAAI,oBAAoB,GAAG,EAAE;AAElE,MAAK,WACH,8CACG,WAAW,UACV,oBAAC;EAAG,MAAM;EAAI,IAAI;EAAG,WAAU;YAC5B,SAAS,oBAAC;GAAO,MAAM,gBAAgB,WAAW;GAAE,SAAS;GAAU,SAAQ;IAAe,GAAG;GAC/F,EAEN,KAAK,YACL;AAGL,QACE,8CACE,oBAAC;EACC,WAAW,GAAG,aAAa,GAAG,YAAY,GAAG,aAAa,aAAa,eAAe,UAAU;EAChG,iBAAe,QAAQ,WAAW;EAClC,gBAAc;EACT;EACL,GAAI,OAAO;EACX,GAAI;EACJ,GAAI;GACJ,EACD,cAAc,UACd;EAEL;AAEF,GAAG,cAAc"}
+{"version":3,"file":"tr.js","names":[],"sources":["../../src/table/tr.tsx"],"sourcesContent":["import { useEffect, useState } from 'react'\n\nimport Button from '../button'\nimport { styled, useStyleConfig, vui } from '../core'\nimport { cs } from '../utils'\nimport { useTableContext } from './context'\nimport type { TrProps } from './table.types'\nimport Td from './td'\n\nconst trClassName = 'vui-tr'\nconst buttonClassName = (isExpanded?: boolean) => `falAngle${isExpanded ? 'Down' : 'Right'}`\n\nexport const TrBase = styled.trBox`\n  position: relative;\n  transition-duration: fast;\n`\n\n/** Displays Table row that can contain heading or data cells. */\nexport const Tr = vui<'tr', TrProps>((props, ref) => {\n  const { className, isExpanded: isExpandedProp, isSelected, nested, onCollapsed, onExpanded, ...rest } = props\n  const { variant } = useTableContext() ?? {}\n  const styles = useStyleConfig('Table', useTableContext())\n  const [isExpanded, setIsExpanded] = useState(isExpandedProp)\n\n  useEffect(() => {\n    setIsExpanded(isExpandedProp)\n  }, [isExpandedProp])\n\n  const onToggle = () => {\n    if (isExpanded) {\n      setIsExpanded(false)\n      onCollapsed?.()\n    } else {\n      setIsExpanded(true)\n      onExpanded?.()\n    }\n  }\n\n  const selectedProps = isSelected ? { bg: 'skyBlue.selected' } : {}\n\n  rest.children = (\n    <>\n      {nested !== undefined && (\n        <Td maxW={16} px={1} textAlign=\"center\">\n          {nested ? (\n            <Button\n              size=\"sm\"\n              icon={buttonClassName(isExpanded)}\n              onClick={onToggle}\n              variant=\"tertiary\"\n              intent=\"brand\"\n              style={\n                {\n                  '--vui-button-color': 'var(--vui-action-blue-subtle-inverse)',\n                  '--vui-button-hover-bg': 'var(--vui-action-blue-subtle-hover)',\n                  '--vui-button-active-bg': 'var(--vui-action-blue-subtle-pressed)',\n                } as React.CSSProperties\n              }\n            />\n          ) : null}\n        </Td>\n      )}\n      {rest.children}\n    </>\n  )\n\n  return (\n    <>\n      <TrBase\n        className={cs(trClassName, `${trClassName}-${isExpanded ? 'expanded' : 'collapsed'}`, className)}\n        data-selected={Boolean(isSelected)}\n        data-variant={variant}\n        ref={ref}\n        {...styles.tr}\n        {...selectedProps}\n        {...rest}\n      />\n      {isExpanded && nested}\n    </>\n  )\n})\n\nTr.displayName = 'Tr'\nexport default Tr\n"],"mappings":";;;;;;;;;;;AASA,MAAM,cAAc;AACpB,MAAM,mBAAmB,eAAyB,WAAW,aAAa,SAAS;AAEnF,MAAa,SAAS,OAAO,KAAK;;;;;AAMlC,MAAa,KAAK,KAAoB,OAAO,QAAQ;CACnD,MAAM,EAAE,WAAW,YAAY,gBAAgB,YAAY,QAAQ,aAAa,YAAY,GAAG,SAAS;CACxG,MAAM,EAAE,YAAY,iBAAiB,IAAI,EAAE;CAC3C,MAAM,SAAS,eAAe,SAAS,iBAAiB,CAAC;CACzD,MAAM,CAAC,YAAY,iBAAiB,SAAS,eAAe;AAE5D,iBAAgB;AACd,gBAAc,eAAe;IAC5B,CAAC,eAAe,CAAC;CAEpB,MAAM,iBAAiB;AACrB,MAAI,YAAY;AACd,iBAAc,MAAM;AACpB,kBAAe;SACV;AACL,iBAAc,KAAK;AACnB,iBAAc;;;CAIlB,MAAM,gBAAgB,aAAa,EAAE,IAAI,oBAAoB,GAAG,EAAE;AAElE,MAAK,WACH,8CACG,WAAW,UACV,oBAAC,IAAD;EAAI,MAAM;EAAI,IAAI;EAAG,WAAU;YAC5B,SACC,oBAAC,QAAD;GACE,MAAK;GACL,MAAM,gBAAgB,WAAW;GACjC,SAAS;GACT,SAAQ;GACR,QAAO;GACP,OACE;IACE,sBAAsB;IACtB,yBAAyB;IACzB,0BAA0B;IAC3B;GAEH,IACA;EACD,GAEN,KAAK,SACL;AAGL,QACE,8CACE,oBAAC,QAAD;EACE,WAAW,GAAG,aAAa,GAAG,YAAY,GAAG,aAAa,aAAa,eAAe,UAAU;EAChG,iBAAe,QAAQ,WAAW;EAClC,gBAAc;EACT;EACL,GAAI,OAAO;EACX,GAAI;EACJ,GAAI;EACJ,GACD,cAAc,OACd;EAEL;AAEF,GAAG,cAAc"}

package/dist/table/useTable.d.ts

@@ -1,7 +1,5 @@
 import { Sort } from "../utils/types.js";
 import { UseTableProps } from "./useTable.types.js";
-import "../index.js";
-
 //#region src/table/useTable.d.ts
 /** Handles controlled/uncontrolled sort of the Table rows. */
 declare function useTable(props: UseTableProps): {

package/dist/table/useTable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTable.d.ts","names":[],"sources":["../../src/table/useTable.ts"],"mappings":";;;;;;iBAawB,QAAA,CAAS,KAAA,EAAO,aAAA;;;QAAa,IAAA;AAAA;AAAA,KAgBzC,kBAAA,GAAqB,UAAA,QAAkB,QAAA"}
+{"version":3,"file":"useTable.d.ts","names":[],"sources":["../../src/table/useTable.ts"],"mappings":";;;;iBAawB,QAAA,CAAS,KAAA,EAAO,aAAA;;;QAAa,IAAA;AAAA;AAAA,KAgBzC,kBAAA,GAAqB,UAAA,QAAkB,QAAA"}

package/dist/table/useTable.js

@@ -36,5 +36,5 @@ function useTable(props) {
 
 //#endregion
 export { useTable as default };
-globalThis.__vuiVersion__ = "4.0.3"
+globalThis.__vuiVersion__ = "5.0.0-beta.1"
 //# sourceMappingURL=useTable.js.map

package/dist/table/useTable.types.d.ts

@@ -1,6 +1,4 @@
 import { Sort } from "../utils/types.js";
-import "../utils/index.js";
-
 //#region src/table/useTable.types.d.ts
 type UseTableProps = {
   /** Initial sort value in uncontrolled mode. */defaultSort?: Sort; /** Callback called with updated value when sort changes. */

package/dist/table/useTable.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTable.types.d.ts","names":[],"sources":["../../src/table/useTable.types.ts"],"mappings":";;;;KAEY,aAAA;iDAEV,WAAA,GAAc,IAAA,EAFJ;EAIV,YAAA,IAAgB,IAAA,EAAM,IAAA;EAEtB,IAAA,GAAO,IAAA;AAAA"}
+{"version":3,"file":"useTable.types.d.ts","names":[],"sources":["../../src/table/useTable.types.ts"],"mappings":";;KAEY,aAAA;iDAEV,WAAA,GAAc,IAAA,EAFJ;EAIV,YAAA,IAAgB,IAAA,EAAM,IAAA;EAEtB,IAAA,GAAO,IAAA;AAAA"}

package/dist/tabs/consts.js

@@ -16,5 +16,5 @@ const iconSizeMapper = {
 
 //#endregion
 export { colors, iconSizeMapper };
-globalThis.__vuiVersion__ = "4.0.3"
+globalThis.__vuiVersion__ = "5.0.0-beta.1"
 //# sourceMappingURL=consts.js.map

package/dist/tabs/tab.d.ts

@@ -1,11 +1,10 @@
-import { SystemProps } from "../system/system.js";
 import { VuiComponent } from "../core/vui.js";
 import { TabProps } from "./tabs.types.js";
-import "../index.js";
 import * as styled_components0 from "styled-components";
+import * as styled_components_dist_types0 from "styled-components/dist/types";
 
 //#region src/tabs/tab.d.ts
-declare const TabBase: styled_components0.StyledComponent<"div", styled_components0.DefaultTheme, SystemProps, never>;
+declare const TabBase: styled_components_dist_types0.IStyledComponentBase<"web", styled_components0.FastOmit<any, never>> & string;
 /**
  * Implements a Tab component
  */

package/dist/tabs/tab.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tab.d.ts","names":[],"sources":["../../src/tabs/tab.tsx"],"mappings":";;;;;;;cAIa,OAAA,EAAO,kBAAA,CAAA,eAAA,QAEnB,kBAAA,CAFmB,YAAA,EAAA,WAAA;;;;cAOP,GAAA,EAAG,YAAA,QAAA,QAAA"}
+{"version":3,"file":"tab.d.ts","names":[],"sources":["../../src/tabs/tab.tsx"],"mappings":";;;;;;cAIa,OAAA,EAAO,6BAAA,CAAA,oBAAA,QAEnB,kBAAA,CAFmB,QAAA;;;;cAOP,GAAA,EAAG,YAAA,QAAA,QAAA"}

package/dist/tabs/tab.js

@@ -19,5 +19,5 @@ Tab.displayName = "Tab";
 
 //#endregion
 export { TabBase, Tab as default };
-globalThis.__vuiVersion__ = "4.0.3"
+globalThis.__vuiVersion__ = "5.0.0-beta.1"
 //# sourceMappingURL=tab.js.map

package/dist/tabs/tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab.js","names":[],"sources":["../../src/tabs/tab.tsx"],"sourcesContent":["import { styled, vui } from '../core'\nimport { cs } from '../utils'\nimport type { TabProps } from './tabs.types'\n\nexport const TabBase = styled.divBox`\n  width: 100%;\n`\n\n/**\n * Implements a Tab component\n */\nexport const Tab = vui<'div', TabProps>(({ children, className }, ref) => (\n  <TabBase className={cs('vui-tab', className)} ref={ref}>\n    {children}\n  </TabBase>\n))\n\nTab.displayName = 'Tab'\n\nexport default Tab\n"],"mappings":";;;;;;AAIA,MAAa,UAAU,OAAO,MAAM;;;;;;AAOpC,MAAa,MAAM,KAAsB,EAAE,UAAU,aAAa,QAChE,oBAAC;CAAQ,WAAW,GAAG,WAAW,UAAU;CAAO;CAChD;EACO,CACV;AAEF,IAAI,cAAc"}
+{"version":3,"file":"tab.js","names":[],"sources":["../../src/tabs/tab.tsx"],"sourcesContent":["import { styled, vui } from '../core'\nimport { cs } from '../utils'\nimport type { TabProps } from './tabs.types'\n\nexport const TabBase = styled.divBox`\n  width: 100%;\n`\n\n/**\n * Implements a Tab component\n */\nexport const Tab = vui<'div', TabProps>(({ children, className }, ref) => (\n  <TabBase className={cs('vui-tab', className)} ref={ref}>\n    {children}\n  </TabBase>\n))\n\nTab.displayName = 'Tab'\n\nexport default Tab\n"],"mappings":";;;;;;AAIA,MAAa,UAAU,OAAO,MAAM;;;;;;AAOpC,MAAa,MAAM,KAAsB,EAAE,UAAU,aAAa,QAChE,oBAAC,SAAD;CAAS,WAAW,GAAG,WAAW,UAAU;CAAO;CAChD;CACO,EACV;AAEF,IAAI,cAAc"}

package/dist/tabs/tabs.d.ts

@@ -1,34 +1,9 @@
-import { ThemingProps } from "../theme/types.js";
-import { ChildrenProp } from "../core/types.js";
-import { AnimationProps } from "../system/animations.js";
-import { BackgroundColorProps } from "../system/backgrounds.js";
-import { BorderBottomColorProps, BorderBottomProps, BorderBottomWidthProps, BorderColorProps, BorderLeftColorProps, BorderLeftProps, BorderLeftWidthProps, BorderProps, BorderRadiusProps, BorderRightColorProps, BorderRightProps, BorderRightWidthProps, BorderStyleProps, BorderTopColorProps, BorderTopProps, BorderTopWidthProps, BorderWidthProps, DivideColorProps, DivideStyleProps, DivideXProps, DivideXReverseProps, DivideYProps, DivideYReverseProps, OutlineColorProps, OutlineProps, OutlineStyleProps, OutlineWidthProps, RingColorProps, RingProps } from "../system/borders.js";
-import { IsTruncatedProps, MaxLinesProps, WordBreakProps } from "../system/custom.js";
-import { BoxShadowProps, OpacityProps, TextShadowProps } from "../system/effects.js";
-import { BottomProps, BoxSizingProps, DisplayProps, FloatProps, LeftProps, ObjectFitProps, OverflowProps, OverflowXProps, OverflowYProps, OverscrollBehaviorProps, PositionProps, RightProps, TopProps, VisibilityProps, ZIndexProps } from "../system/layout.js";
-import { AlignContentProps, AlignItemsProps, AlignSelfProps, FlexBasisProps, FlexDirectionProps, FlexGrowProps, FlexProps, FlexShrinkProps, FlexWrapProps, JustifyContentProps, JustifyItemsProps, JustifySelfProps, OrderProps } from "../system/flexboxes.js";
-import { AppearanceProps, CursorProps, PointerEventsProps, ResizeProps, UserSelectProps } from "../system/interactivity.js";
-import { HeightProps, MaxHeightProps, MaxWidthProps, MinHeightProps, MinWidthProps, WidthProps } from "../system/sizing.js";
-import { MarginBottomProps, MarginLeftProps, MarginProps, MarginRightProps, MarginTopProps, MarginXProps, MarginYProps, PaddingBottomProps, PaddingLeftProps, PaddingProps, PaddingRightProps, PaddingTopProps, PaddingXProps, PaddingYProps, SpaceXProps, SpaceXReverseProps, SpaceYProps, SpaceYReverseProps } from "../system/space.js";
-import { ColProps, RowProps } from "../system/flexboxGrids.js";
-import { ColumnGapProps, GapProps, GridAreaProps, GridAutoColumnsProps, GridAutoFlowProps, GridAutoRowsProps, GridColumnProps, GridRowProps, GridTemplateAreasProps, GridTemplateColumnsProps, GridTemplateRowsProps, RowGapProps } from "../system/grids.js";
-import { BorderCollapseProps, TableLayoutProps } from "../system/tables.js";
-import { RotateProps, ScaleProps, ScaleXProps, ScaleYProps, SkewXProps, SkewYProps, TransformOriginProps, TransformProps, TranslateXProps, TranslateYProps } from "../system/transforms.js";
-import { TransitionDelayProps, TransitionDurationProps, TransitionPropertyProps, TransitionProps, TransitionTimingFunctionProps } from "../system/transitions.js";
-import { ColorProps, FontFamilyProps, FontSizeProps, FontStyleProps, FontWeightProps, LetterSpacingProps, LineHeightProps, ListStylePositionProps, ListStyleTypeProps, TextAlignProps, TextDecorationProps, TextOverflowProps, TextTransformProps, VerticalAlignProps, WhiteSpaceProps } from "../system/typography.js";
 import { VuiComponent } from "../core/vui.js";
 import { TabsProps } from "./tabs.types.js";
-import "../index.js";
-import * as react from "react";
-import * as styled_components0 from "styled-components";
+import * as styled_components_dist_types0 from "styled-components/dist/types";
 
 //#region src/tabs/tabs.d.ts
-declare const TabsBase: styled_components0.StyledComponent<"div", styled_components0.DefaultTheme, AnimationProps & BackgroundColorProps & BorderProps & BorderTopProps & BorderRightProps & BorderBottomProps & BorderLeftProps & BorderColorProps & BorderTopColorProps & BorderRightColorProps & BorderBottomColorProps & BorderLeftColorProps & BorderWidthProps & BorderTopWidthProps & BorderRightWidthProps & BorderBottomWidthProps & BorderLeftWidthProps & BorderStyleProps & BorderRadiusProps & OutlineProps & OutlineColorProps & OutlineWidthProps & OutlineStyleProps & DivideXProps & DivideYProps & DivideXReverseProps & DivideYReverseProps & DivideColorProps & DivideStyleProps & RingProps & RingColorProps & OpacityProps & BoxShadowProps & TextShadowProps & DisplayProps & AlignItemsProps & AlignContentProps & JustifyContentProps & JustifyItemsProps & FlexWrapProps & FlexGrowProps & FlexShrinkProps & FlexBasisProps & FlexDirectionProps & FlexProps & JustifySelfProps & AlignSelfProps & OrderProps & RowProps & ColProps & GapProps & ColumnGapProps & RowGapProps & GridColumnProps & GridRowProps & GridAutoFlowProps & GridAutoColumnsProps & GridAutoRowsProps & GridTemplateColumnsProps & GridTemplateRowsProps & GridTemplateAreasProps & GridAreaProps & AppearanceProps & CursorProps & PointerEventsProps & ResizeProps & UserSelectProps & IsTruncatedProps & FloatProps & BoxSizingProps & OverflowProps & OverflowXProps & OverflowYProps & PositionProps & ZIndexProps & TopProps & RightProps & BottomProps & LeftProps & VisibilityProps & OverscrollBehaviorProps & ObjectFitProps & MaxLinesProps & WidthProps & HeightProps & MaxWidthProps & MaxHeightProps & MinWidthProps & MinHeightProps & MarginProps & MarginTopProps & MarginRightProps & MarginBottomProps & MarginLeftProps & MarginXProps & MarginYProps & PaddingProps & PaddingTopProps & PaddingRightProps & PaddingBottomProps & PaddingLeftProps & PaddingXProps & PaddingYProps & SpaceXProps & SpaceYProps & SpaceXReverseProps & SpaceYReverseProps & BorderCollapseProps & TableLayoutProps & TransformProps & TransformOriginProps & TranslateXProps & TranslateYProps & RotateProps & SkewXProps & SkewYProps & ScaleProps & ScaleXProps & ScaleYProps & TransitionProps & TransitionPropertyProps & TransitionDurationProps & TransitionTimingFunctionProps & TransitionDelayProps & FontFamilyProps & FontSizeProps & FontStyleProps & FontWeightProps & LineHeightProps & ColorProps & TextTransformProps & TextDecorationProps & TextAlignProps & VerticalAlignProps & LetterSpacingProps & WhiteSpaceProps & TextOverflowProps & ListStyleTypeProps & ListStylePositionProps & WordBreakProps & ThemingProps<"Tabs"> & ChildrenProp & {
-  actions?: react.ReactNode;
-  activeTabId?: number | string;
-  showBorder?: boolean;
-  onTabClick?: (id?: number | string) => void;
-}, never>;
+declare const TabsBase: styled_components_dist_types0.IStyledComponentBase<"web", styled_components_dist_types0.Substitute<any, TabsProps>> & string;
 /**
  * Implements Tabs navigation to switch between views. Implements Tabs navigation to switch between views. **Do not use as a top menu in a page!**
  */

package/dist/tabs/tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.d.ts","names":[],"sources":["../../src/tabs/tabs.tsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;cAWa,QAAA,qBAAQ,eAAA,QAEpB,kBAAA,CAFoB,YAAA,EAAA,cAAA,GAAA,oBAAA,GAAA,WAAA,GAAA,cAAA,GAAA,gBAAA,GAAA,iBAAA,GAAA,eAAA,GAAA,gBAAA,GAAA,mBAAA,GAAA,qBAAA,GAAA,sBAAA,GAAA,oBAAA,GAAA,gBAAA,GAAA,mBAAA,GAAA,qBAAA,GAAA,sBAAA,GAAA,oBAAA,GAAA,gBAAA,GAAA,iBAAA,GAAA,YAAA,GAAA,iBAAA,GAAA,iBAAA,GAAA,iBAAA,GAAA,YAAA,GAAA,YAAA,GAAA,mBAAA,GAAA,mBAAA,GAAA,gBAAA,GAAA,gBAAA,GAAA,SAAA,GAAA,cAAA,GAAA,YAAA,GAAA,cAAA,GAAA,eAAA,GAAA,YAAA,GAAA,eAAA,GAAA,iBAAA,GAAA,mBAAA,GAAA,iBAAA,GAAA,aAAA,GAAA,aAAA,GAAA,eAAA,GAAA,cAAA,GAAA,kBAAA,GAAA,SAAA,GAAA,gBAAA,GAAA,cAAA,GAAA,UAAA,GAAA,QAAA,GAAA,QAAA,GAAA,QAAA,GAAA,cAAA,GAAA,WAAA,GAAA,eAAA,GAAA,YAAA,GAAA,iBAAA,GAAA,oBAAA,GAAA,iBAAA,GAAA,wBAAA,GAAA,qBAAA,GAAA,sBAAA,GAAA,aAAA,GAAA,eAAA,GAAA,WAAA,GAAA,kBAAA,GAAA,WAAA,GAAA,eAAA,GAAA,gBAAA,GAAA,UAAA,GAAA,cAAA,GAAA,aAAA,GAAA,cAAA,GAAA,cAAA,GAAA,aAAA,GAAA,WAAA,GAAA,QAAA,GAAA,UAAA,GAAA,WAAA,GAAA,SAAA,GAAA,eAAA,GAAA,uBAAA,GAAA,cAAA,GAAA,aAAA,GAAA,UAAA,GAAA,WAAA,GAAA,aAAA,GAAA,cAAA,GAAA,aAAA,GAAA,cAAA,GAAA,WAAA,GAAA,cAAA,GAAA,gBAAA,GAAA,iBAAA,GAAA,eAAA,GAAA,YAAA,GAAA,YAAA,GAAA,YAAA,GAAA,eAAA,GAAA,iBAAA,GAAA,kBAAA,GAAA,gBAAA,GAAA,aAAA,GAAA,aAAA,GAAA,WAAA,GAAA,WAAA,GAAA,kBAAA,GAAA,kBAAA,GAAA,mBAAA,GAAA,gBAAA,GAAA,cAAA,GAAA,oBAAA,GAAA,eAAA,GAAA,eAAA,GAAA,WAAA,GAAA,UAAA,GAAA,UAAA,GAAA,UAAA,GAAA,WAAA,GAAA,WAAA,GAAA,eAAA,GAAA,uBAAA,GAAA,uBAAA,GAAA,6BAAA,GAAA,oBAAA,GAAA,eAAA,GAAA,aAAA,GAAA,cAAA,GAAA,eAAA,GAAA,eAAA,GAAA,UAAA,GAAA,kBAAA,GAAA,mBAAA,GAAA,cAAA,GAAA,kBAAA,GAAA,kBAAA,GAAA,eAAA,GAAA,iBAAA,GAAA,kBAAA,GAAA,sBAAA,GAAA,cAAA,GAAA,YAAA,WAAA,YAAA;YAAA,KAAA,CAAA,SAAA;;;;;;;;cAOR,IAAA,EAAI,YAAA,QAAA,SAAA"}
+{"version":3,"file":"tabs.d.ts","names":[],"sources":["../../src/tabs/tabs.tsx"],"mappings":";;;;;cAWa,QAAA,EAAQ,6BAAA,CAAA,oBAAA,QAAA,6BAAA,CAAA,UAAA,MAAA,SAAA;;;;cAOR,IAAA,EAAI,YAAA,QAAA,SAAA"}

package/dist/tabs/tabs.js

@@ -78,5 +78,5 @@ Tabs.displayName = "Tabs";
 
 //#endregion
 export { TabsBase, Tabs as default };
-globalThis.__vuiVersion__ = "4.0.3"
+globalThis.__vuiVersion__ = "5.0.0-beta.1"
 //# sourceMappingURL=tabs.js.map

package/dist/tabs/tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.js","names":[],"sources":["../../src/tabs/tabs.tsx"],"sourcesContent":["import type { ReactElement } from 'react'\nimport { Children, useEffect } from 'react'\n\nimport { styled, useStyleConfig, vui } from '../core'\nimport { P } from '../p'\nimport { cs } from '../utils'\nimport Tab from './tab'\nimport type { TabIndexProps, TabProps, TabsProps } from './tabs.types'\nimport TabsNavBar from './tabsNavBar'\nimport { useTabsState } from './useTabsState'\n\nexport const TabsBase = styled.divBox<TabsProps>`\n  width: 100%;\n`\n\n/**\n * Implements Tabs navigation to switch between views. Implements Tabs navigation to switch between views. **Do not use as a top menu in a page!**\n */\nexport const Tabs = vui<'div', TabsProps>((props, ref) => {\n  const { actions, activeTabId, showBorder = true, children, className, size, onTabClick, ...rest } = props\n  const styles = useStyleConfig('Tabs', props)\n  const { tabs, setTabs, activeTabIndex, setActiveTabIndex, animationDirection, setAnimationDirection } = useTabsState(\n    'fadeIn',\n    0,\n  )\n\n  useEffect(() => {\n    const _tabs: TabIndexProps[] = []\n    if (children) {\n      // @ts-expect-error no idea\n      ;(Children.toArray(children) as ReactElement[]).forEach((child: ReactElement<TabProps>, index: number) => {\n        if (child?.props?.title)\n          _tabs.push({\n            id: child.props.id,\n            index: index,\n            title: child.props.title,\n            icon: child.props.icon,\n            className: child.props.className,\n            children: child.props.children,\n            disabled: child.props.disabled,\n            onClick: child.props.onClick,\n            onDelete: child.props.onDelete,\n          })\n      })\n    }\n    setTabs(_tabs)\n    if (activeTabId !== undefined) {\n      const tab = _tabs.find((t: TabIndexProps) => t?.id === activeTabId || t?.index === activeTabId)\n      if (tab?.index !== undefined) setActiveTabIndex(tab.index)\n    }\n  }, [children, activeTabId])\n\n  const onNavItemClick = (tabIndex: number, e: React.MouseEvent<HTMLLIElement, MouseEvent>) => {\n    const tab = tabs.find(t => t.index === tabIndex)\n    if (tab?.children !== undefined && tab?.index !== undefined) {\n      setAnimationDirection(tab.index < activeTabIndex ? 'fadeLeft' : 'fadeRight')\n      setActiveTabIndex(tab.index)\n      onTabClick?.(tab.id || tab.index)\n    }\n    tab?.onClick?.(e)\n  }\n\n  const activeTab = tabs?.[activeTabIndex]\n\n  return (\n    <TabsBase className={cs('vui-tabs', className)} ref={ref} {...styles.container} {...rest}>\n      {!!tabs?.length && (\n        <TabsNavBar\n          actions={actions}\n          activeNavItem={activeTabIndex}\n          animationDirection={animationDirection}\n          onNavItemClick={(tabIndex, e) => onNavItemClick(tabIndex, e)}\n          showBorder={showBorder}\n          size={size}\n          tabs={tabs}\n        />\n      )}\n      {tabs?.length ? (\n        <Tab onClick={activeTab?.onClick} title={activeTab?.title}>\n          {!activeTab?.disabled && activeTab?.children}\n        </Tab>\n      ) : (\n        <P p={2}>Please specify Tabs.</P>\n      )}\n    </TabsBase>\n  )\n})\n\nTabs.displayName = 'Tabs'\n\nexport default Tabs\n"],"mappings":";;;;;;;;;;;;AAWA,MAAa,WAAW,OAAO,MAAiB;;;;;;AAOhD,MAAa,OAAO,KAAuB,OAAO,QAAQ;CACxD,MAAM,EAAE,SAAS,aAAa,aAAa,MAAM,UAAU,WAAW,MAAM,YAAY,GAAG,SAAS;CACpG,MAAM,SAAS,eAAe,QAAQ,MAAM;CAC5C,MAAM,EAAE,MAAM,SAAS,gBAAgB,mBAAmB,oBAAoB,0BAA0B,aACtG,UACA,EACD;AAED,iBAAgB;EACd,MAAM,QAAyB,EAAE;AACjC,MAAI,SAED,CAAC,SAAS,QAAQ,SAAS,CAAoB,SAAS,OAA+B,UAAkB;AACxG,OAAI,OAAO,OAAO,MAChB,OAAM,KAAK;IACT,IAAI,MAAM,MAAM;IACT;IACP,OAAO,MAAM,MAAM;IACnB,MAAM,MAAM,MAAM;IAClB,WAAW,MAAM,MAAM;IACvB,UAAU,MAAM,MAAM;IACtB,UAAU,MAAM,MAAM;IACtB,SAAS,MAAM,MAAM;IACrB,UAAU,MAAM,MAAM;IACvB,CAAC;IACJ;AAEJ,UAAQ,MAAM;AACd,MAAI,gBAAgB,QAAW;GAC7B,MAAM,MAAM,MAAM,MAAM,MAAqB,GAAG,OAAO,eAAe,GAAG,UAAU,YAAY;AAC/F,OAAI,KAAK,UAAU,OAAW,mBAAkB,IAAI,MAAM;;IAE3D,CAAC,UAAU,YAAY,CAAC;CAE3B,MAAM,kBAAkB,UAAkB,MAAmD;EAC3F,MAAM,MAAM,KAAK,MAAK,MAAK,EAAE,UAAU,SAAS;AAChD,MAAI,KAAK,aAAa,UAAa,KAAK,UAAU,QAAW;AAC3D,yBAAsB,IAAI,QAAQ,iBAAiB,aAAa,YAAY;AAC5E,qBAAkB,IAAI,MAAM;AAC5B,gBAAa,IAAI,MAAM,IAAI,MAAM;;AAEnC,OAAK,UAAU,EAAE;;CAGnB,MAAM,YAAY,OAAO;AAEzB,QACE,qBAAC;EAAS,WAAW,GAAG,YAAY,UAAU;EAAO;EAAK,GAAI,OAAO;EAAW,GAAI;aACjF,CAAC,CAAC,MAAM,UACP,oBAAC;GACU;GACT,eAAe;GACK;GACpB,iBAAiB,UAAU,MAAM,eAAe,UAAU,EAAE;GAChD;GACN;GACA;IACN,EAEH,MAAM,SACL,oBAAC;GAAI,SAAS,WAAW;GAAS,OAAO,WAAW;aACjD,CAAC,WAAW,YAAY,WAAW;IAChC,GAEN,oBAAC;GAAE,GAAG;aAAG;IAAwB;GAE1B;EAEb;AAEF,KAAK,cAAc"}
+{"version":3,"file":"tabs.js","names":[],"sources":["../../src/tabs/tabs.tsx"],"sourcesContent":["import type { ReactElement } from 'react'\nimport { Children, useEffect } from 'react'\n\nimport { styled, useStyleConfig, vui } from '../core'\nimport { P } from '../p'\nimport { cs } from '../utils'\nimport Tab from './tab'\nimport type { TabIndexProps, TabProps, TabsProps } from './tabs.types'\nimport TabsNavBar from './tabsNavBar'\nimport { useTabsState } from './useTabsState'\n\nexport const TabsBase = styled.divBox<TabsProps>`\n  width: 100%;\n`\n\n/**\n * Implements Tabs navigation to switch between views. Implements Tabs navigation to switch between views. **Do not use as a top menu in a page!**\n */\nexport const Tabs = vui<'div', TabsProps>((props, ref) => {\n  const { actions, activeTabId, showBorder = true, children, className, size, onTabClick, ...rest } = props\n  const styles = useStyleConfig('Tabs', props)\n  const { tabs, setTabs, activeTabIndex, setActiveTabIndex, animationDirection, setAnimationDirection } = useTabsState(\n    'fadeIn',\n    0,\n  )\n\n  useEffect(() => {\n    const _tabs: TabIndexProps[] = []\n    if (children) {\n      // @ts-expect-error no idea\n      ;(Children.toArray(children) as ReactElement[]).forEach((child: ReactElement<TabProps>, index: number) => {\n        if (child?.props?.title)\n          _tabs.push({\n            id: child.props.id,\n            index: index,\n            title: child.props.title,\n            icon: child.props.icon,\n            className: child.props.className,\n            children: child.props.children,\n            disabled: child.props.disabled,\n            onClick: child.props.onClick,\n            onDelete: child.props.onDelete,\n          })\n      })\n    }\n    setTabs(_tabs)\n    if (activeTabId !== undefined) {\n      const tab = _tabs.find((t: TabIndexProps) => t?.id === activeTabId || t?.index === activeTabId)\n      if (tab?.index !== undefined) setActiveTabIndex(tab.index)\n    }\n  }, [children, activeTabId])\n\n  const onNavItemClick = (tabIndex: number, e: React.MouseEvent<HTMLLIElement, MouseEvent>) => {\n    const tab = tabs.find(t => t.index === tabIndex)\n    if (tab?.children !== undefined && tab?.index !== undefined) {\n      setAnimationDirection(tab.index < activeTabIndex ? 'fadeLeft' : 'fadeRight')\n      setActiveTabIndex(tab.index)\n      onTabClick?.(tab.id || tab.index)\n    }\n    tab?.onClick?.(e)\n  }\n\n  const activeTab = tabs?.[activeTabIndex]\n\n  return (\n    <TabsBase className={cs('vui-tabs', className)} ref={ref} {...styles.container} {...rest}>\n      {!!tabs?.length && (\n        <TabsNavBar\n          actions={actions}\n          activeNavItem={activeTabIndex}\n          animationDirection={animationDirection}\n          onNavItemClick={(tabIndex, e) => onNavItemClick(tabIndex, e)}\n          showBorder={showBorder}\n          size={size}\n          tabs={tabs}\n        />\n      )}\n      {tabs?.length ? (\n        <Tab onClick={activeTab?.onClick} title={activeTab?.title}>\n          {!activeTab?.disabled && activeTab?.children}\n        </Tab>\n      ) : (\n        <P p={2}>Please specify Tabs.</P>\n      )}\n    </TabsBase>\n  )\n})\n\nTabs.displayName = 'Tabs'\n\nexport default Tabs\n"],"mappings":";;;;;;;;;;;;AAWA,MAAa,WAAW,OAAO,MAAiB;;;;;;AAOhD,MAAa,OAAO,KAAuB,OAAO,QAAQ;CACxD,MAAM,EAAE,SAAS,aAAa,aAAa,MAAM,UAAU,WAAW,MAAM,YAAY,GAAG,SAAS;CACpG,MAAM,SAAS,eAAe,QAAQ,MAAM;CAC5C,MAAM,EAAE,MAAM,SAAS,gBAAgB,mBAAmB,oBAAoB,0BAA0B,aACtG,UACA,EACD;AAED,iBAAgB;EACd,MAAM,QAAyB,EAAE;AACjC,MAAI,SAED,CAAC,SAAS,QAAQ,SAAS,CAAoB,SAAS,OAA+B,UAAkB;AACxG,OAAI,OAAO,OAAO,MAChB,OAAM,KAAK;IACT,IAAI,MAAM,MAAM;IACT;IACP,OAAO,MAAM,MAAM;IACnB,MAAM,MAAM,MAAM;IAClB,WAAW,MAAM,MAAM;IACvB,UAAU,MAAM,MAAM;IACtB,UAAU,MAAM,MAAM;IACtB,SAAS,MAAM,MAAM;IACrB,UAAU,MAAM,MAAM;IACvB,CAAC;IACJ;AAEJ,UAAQ,MAAM;AACd,MAAI,gBAAgB,QAAW;GAC7B,MAAM,MAAM,MAAM,MAAM,MAAqB,GAAG,OAAO,eAAe,GAAG,UAAU,YAAY;AAC/F,OAAI,KAAK,UAAU,OAAW,mBAAkB,IAAI,MAAM;;IAE3D,CAAC,UAAU,YAAY,CAAC;CAE3B,MAAM,kBAAkB,UAAkB,MAAmD;EAC3F,MAAM,MAAM,KAAK,MAAK,MAAK,EAAE,UAAU,SAAS;AAChD,MAAI,KAAK,aAAa,UAAa,KAAK,UAAU,QAAW;AAC3D,yBAAsB,IAAI,QAAQ,iBAAiB,aAAa,YAAY;AAC5E,qBAAkB,IAAI,MAAM;AAC5B,gBAAa,IAAI,MAAM,IAAI,MAAM;;AAEnC,OAAK,UAAU,EAAE;;CAGnB,MAAM,YAAY,OAAO;AAEzB,QACE,qBAAC,UAAD;EAAU,WAAW,GAAG,YAAY,UAAU;EAAO;EAAK,GAAI,OAAO;EAAW,GAAI;YAApF,CACG,CAAC,CAAC,MAAM,UACP,oBAAC,YAAD;GACW;GACT,eAAe;GACK;GACpB,iBAAiB,UAAU,MAAM,eAAe,UAAU,EAAE;GAChD;GACN;GACA;GACN,GAEH,MAAM,SACL,oBAAC,KAAD;GAAK,SAAS,WAAW;GAAS,OAAO,WAAW;aACjD,CAAC,WAAW,YAAY,WAAW;GAChC,IAEN,oBAAC,GAAD;GAAG,GAAG;aAAG;GAAwB,EAE1B;;EAEb;AAEF,KAAK,cAAc"}

package/dist/tabs/tabs.types.d.ts

@@ -1,10 +1,7 @@
 import { ThemingProps } from "../theme/types.js";
 import { ChildrenProp } from "../core/types.js";
 import { SystemProps } from "../system/system.js";
-import "../system/index.js";
-import "../core/index.js";
 import { IconProp } from "../icon/icon.types.js";
-import "../icon/index.js";
 import { ReactNode } from "react";
 
 //#region src/tabs/tabs.types.d.ts

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

@@ -1 +1 @@
-{"version":3,"file":"tabs.types.d.ts","names":[],"sources":["../../src/tabs/tabs.types.ts"],"mappings":";;;;;;;;;;KAOY,kBAAA;AAAA,KACA,QAAA;AAAA,KACA,cAAA;AAAA,KAEA,SAAA,GAAY,WAAA,GACtB,YAAA,WACA,YAAA;EACE,OAAA,GAAU,SAAA;EACV,WAAA;EACA,UAAA;EACA,UAAA,IAAc,EAAA;AAAA;AAAA,KAGN,QAAA,GAAW,WAAA,GACrB,YAAA;EACE,IAAA,GAAO,QAAA;EACP,EAAA;EACA,KAAA,EAAO,SAAA;EACP,QAAA;EACA,SAAA;EACA,OAAA,IAAW,WAAA,GAAc,KAAA,CAAM,UAAA,CAAW,aAAA,EAAe,UAAA,YAlBnC;EAoBtB,QAAA,IAAY,WAAA,GAAc,KAAA,CAAM,UAAA,CAAW,iBAAA,EAAmB,UAAA;AAAA;AAAA,KAGtD,aAAA,GAAgB,QAAA;EAC1B,KAAA;AAAA;AAAA,KAGU,cAAA;EACV,OAAA,GAAU,SAAA;EACV,IAAA,EAAM,aAAA;EACN,cAAA,GAAiB,QAAA,UAAkB,CAAA,EAAG,KAAA,CAAM,UAAA,CAAW,aAAA,EAAe,UAAA;EACtE,aAAA;EACA,kBAAA,GAAqB,kBAAA;EACrB,UAAA;EACA,IAAA,GAAO,QAAA;AAAA"}
+{"version":3,"file":"tabs.types.d.ts","names":[],"sources":["../../src/tabs/tabs.types.ts"],"mappings":";;;;;;;KAOY,kBAAA;AAAA,KACA,QAAA;AAAA,KACA,cAAA;AAAA,KAEA,SAAA,GAAY,WAAA,GACtB,YAAA,WACA,YAAA;EACE,OAAA,GAAU,SAAA;EACV,WAAA;EACA,UAAA;EACA,UAAA,IAAc,EAAA;AAAA;AAAA,KAGN,QAAA,GAAW,WAAA,GACrB,YAAA;EACE,IAAA,GAAO,QAAA;EACP,EAAA;EACA,KAAA,EAAO,SAAA;EACP,QAAA;EACA,SAAA;EACA,OAAA,IAAW,WAAA,GAAc,KAAA,CAAM,UAAA,CAAW,aAAA,EAAe,UAAA,YAlBjD;EAoBR,QAAA,IAAY,WAAA,GAAc,KAAA,CAAM,UAAA,CAAW,iBAAA,EAAmB,UAAA;AAAA;AAAA,KAGtD,aAAA,GAAgB,QAAA;EAC1B,KAAA;AAAA;AAAA,KAGU,cAAA;EACV,OAAA,GAAU,SAAA;EACV,IAAA,EAAM,aAAA;EACN,cAAA,GAAiB,QAAA,UAAkB,CAAA,EAAG,KAAA,CAAM,UAAA,CAAW,aAAA,EAAe,UAAA;EACtE,aAAA;EACA,kBAAA,GAAqB,kBAAA;EACrB,UAAA;EACA,IAAA,GAAO,QAAA;AAAA"}

package/dist/tabs/tabsNavBar.js

@@ -91,5 +91,5 @@ TabsNavBar.displayName = "TabsNavBar";
 
 //#endregion
 export { TabsNavBar as default };
-globalThis.__vuiVersion__ = "4.0.3"
+globalThis.__vuiVersion__ = "5.0.0-beta.1"
 //# sourceMappingURL=tabsNavBar.js.map

package/dist/tabs/tabsNavBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabsNavBar.js","names":["theme"],"sources":["../../src/tabs/tabsNavBar.tsx"],"sourcesContent":["import Box from '../box'\nimport { vui } from '../core'\nimport { Icon } from '../icon'\nimport { List, ListItem } from '../list'\nimport { TagButton } from '../tag'\nimport type { Dict } from '../utils'\nimport { cs } from '../utils'\nimport { colors, iconSizeMapper } from './consts'\nimport type { NavBarIconSize, TabIndexProps, TabNavBarProps } from './tabs.types'\nimport theme from './theme'\n\nconst { activeBg, border, color, hover, main } = colors\n\nexport const TabsNavBar = vui<'div', TabNavBarProps>((props, ref) => {\n  const { actions, tabs, onNavItemClick, activeNavItem, animationDirection, showBorder, size = 'md' } = props\n  const iconSize: NavBarIconSize = iconSizeMapper?.[size as string] || 'md'\n\n  const { sizes } = (theme as Dict) ?? {}\n\n  const fontSize = sizes[size ?? 'md'].tabsNavBar.fontSize\n  const h = sizes[size ?? 'md'].tabsNavBar.h\n  const borderWidth = sizes[size ?? 'md'].tabsNavBar.borderWidth\n  const py = sizes[size ?? 'md'].tabsNavBar.py\n  const iconMarginRight = size === 'xxl' ? '16px' : '8px'\n\n  const isActive = (tab: TabIndexProps) => !tab.disabled && tab?.index === activeNavItem\n\n  return (\n    <List\n      alignItems=\"end\"\n      borderBottom={showBorder ? `1px solid ${border}` : 'none'}\n      className={cs('vui-tabsNavBar')}\n      display=\"flex\"\n      isInteractive\n      mb=\"20px\"\n      ref={ref}\n      w={1}\n    >\n      {tabs?.map?.(tab => (\n        <ListItem\n          activeBg={tab.disabled ? undefined : activeBg}\n          bg=\"white\"\n          className={`vui-tabsNavBarItem vui-tabsNavBarItem-${tab?.id}`}\n          color={isActive(tab) ? main : color}\n          disabled={tab.disabled}\n          display=\"inline-flex\"\n          fontSize={fontSize}\n          lineHeight=\"125%\"\n          fontWeight={400}\n          h={h}\n          hoverBg={tab.disabled ? undefined : hover}\n          key={tab.index}\n          onClick={e => onNavItemClick?.(tab.index || 0, e)}\n          position=\"relative\"\n          px=\"16px\"\n          py={py}\n        >\n          <Box alignItems=\"center\">\n            {!!tab.icon && <Icon mr={iconMarginRight} name={tab.icon} size={iconSize} />}\n            {tab.title}\n          </Box>\n          {!!tab.onDelete && (\n            <TagButton\n              disabled={tab.disabled}\n              hoverBg=\"skyBlue.80\"\n              hoverColor=\"seaBlue.main\"\n              isRound={false}\n              ml={1}\n              onClick={e => {\n                e.stopPropagation()\n                tab?.onDelete?.(e)\n              }}\n              title=\"Delete\"\n            />\n          )}\n          {isActive(tab) && (\n            <Box\n              animation={animationDirection}\n              bg={main}\n              bottom=\"-1px\"\n              className=\"vui-tabsNavBarItemActiveIndicator\"\n              h={borderWidth}\n              left={0}\n              position=\"absolute\"\n              w={1}\n            >\n              &nbsp;\n            </Box>\n          )}\n        </ListItem>\n      ))}\n      {!!actions && (\n        <Box ml=\"auto\" px={0.75} py={0.5}>\n          {actions}\n        </Box>\n      )}\n    </List>\n  )\n})\n\nTabsNavBar.displayName = 'TabsNavBar'\n\nexport default TabsNavBar\n"],"mappings":";;;;;;;;;;;;AAWA,MAAM,EAAE,UAAU,QAAQ,OAAO,OAAO,SAAS;AAEjD,MAAa,aAAa,KAA4B,OAAO,QAAQ;CACnE,MAAM,EAAE,SAAS,MAAM,gBAAgB,eAAe,oBAAoB,YAAY,OAAO,SAAS;CACtG,MAAM,WAA2B,iBAAiB,SAAmB;CAErE,MAAM,EAAE,UAAWA,iBAAkB,EAAE;CAEvC,MAAM,WAAW,MAAM,QAAQ,MAAM,WAAW;CAChD,MAAM,IAAI,MAAM,QAAQ,MAAM,WAAW;CACzC,MAAM,cAAc,MAAM,QAAQ,MAAM,WAAW;CACnD,MAAM,KAAK,MAAM,QAAQ,MAAM,WAAW;CAC1C,MAAM,kBAAkB,SAAS,QAAQ,SAAS;CAElD,MAAM,YAAY,QAAuB,CAAC,IAAI,YAAY,KAAK,UAAU;AAEzE,QACE,qBAAC;EACC,YAAW;EACX,cAAc,aAAa,aAAa,WAAW;EACnD,WAAW,GAAG,iBAAiB;EAC/B,SAAQ;EACR;EACA,IAAG;EACE;EACL,GAAG;aAEF,MAAM,OAAM,QACX,qBAAC;GACC,UAAU,IAAI,WAAW,SAAY;GACrC,IAAG;GACH,WAAW,yCAAyC,KAAK;GACzD,OAAO,SAAS,IAAI,GAAG,OAAO;GAC9B,UAAU,IAAI;GACd,SAAQ;GACE;GACV,YAAW;GACX,YAAY;GACT;GACH,SAAS,IAAI,WAAW,SAAY;GAEpC,UAAS,MAAK,iBAAiB,IAAI,SAAS,GAAG,EAAE;GACjD,UAAS;GACT,IAAG;GACC;;IAEJ,qBAAC;KAAI,YAAW;gBACb,CAAC,CAAC,IAAI,QAAQ,oBAAC;MAAK,IAAI;MAAiB,MAAM,IAAI;MAAM,MAAM;OAAY,EAC3E,IAAI;MACD;IACL,CAAC,CAAC,IAAI,YACL,oBAAC;KACC,UAAU,IAAI;KACd,SAAQ;KACR,YAAW;KACX,SAAS;KACT,IAAI;KACJ,UAAS,MAAK;AACZ,QAAE,iBAAiB;AACnB,WAAK,WAAW,EAAE;;KAEpB,OAAM;MACN;IAEH,SAAS,IAAI,IACZ,oBAAC;KACC,WAAW;KACX,IAAI;KACJ,QAAO;KACP,WAAU;KACV,GAAG;KACH,MAAM;KACN,UAAS;KACT,GAAG;eACJ;MAEK;;KApCH,IAAI,MAsCA,CACX,EACD,CAAC,CAAC,WACD,oBAAC;GAAI,IAAG;GAAO,IAAI;GAAM,IAAI;aAC1B;IACG;GAEH;EAET;AAEF,WAAW,cAAc"}
+{"version":3,"file":"tabsNavBar.js","names":["theme"],"sources":["../../src/tabs/tabsNavBar.tsx"],"sourcesContent":["import Box from '../box'\nimport { vui } from '../core'\nimport { Icon } from '../icon'\nimport { List, ListItem } from '../list'\nimport { TagButton } from '../tag'\nimport type { Dict } from '../utils'\nimport { cs } from '../utils'\nimport { colors, iconSizeMapper } from './consts'\nimport type { NavBarIconSize, TabIndexProps, TabNavBarProps } from './tabs.types'\nimport theme from './theme'\n\nconst { activeBg, border, color, hover, main } = colors\n\nexport const TabsNavBar = vui<'div', TabNavBarProps>((props, ref) => {\n  const { actions, tabs, onNavItemClick, activeNavItem, animationDirection, showBorder, size = 'md' } = props\n  const iconSize: NavBarIconSize = iconSizeMapper?.[size as string] || 'md'\n\n  const { sizes } = (theme as Dict) ?? {}\n\n  const fontSize = sizes[size ?? 'md'].tabsNavBar.fontSize\n  const h = sizes[size ?? 'md'].tabsNavBar.h\n  const borderWidth = sizes[size ?? 'md'].tabsNavBar.borderWidth\n  const py = sizes[size ?? 'md'].tabsNavBar.py\n  const iconMarginRight = size === 'xxl' ? '16px' : '8px'\n\n  const isActive = (tab: TabIndexProps) => !tab.disabled && tab?.index === activeNavItem\n\n  return (\n    <List\n      alignItems=\"end\"\n      borderBottom={showBorder ? `1px solid ${border}` : 'none'}\n      className={cs('vui-tabsNavBar')}\n      display=\"flex\"\n      isInteractive\n      mb=\"20px\"\n      ref={ref}\n      w={1}\n    >\n      {tabs?.map?.(tab => (\n        <ListItem\n          activeBg={tab.disabled ? undefined : activeBg}\n          bg=\"white\"\n          className={`vui-tabsNavBarItem vui-tabsNavBarItem-${tab?.id}`}\n          color={isActive(tab) ? main : color}\n          disabled={tab.disabled}\n          display=\"inline-flex\"\n          fontSize={fontSize}\n          lineHeight=\"125%\"\n          fontWeight={400}\n          h={h}\n          hoverBg={tab.disabled ? undefined : hover}\n          key={tab.index}\n          onClick={e => onNavItemClick?.(tab.index || 0, e)}\n          position=\"relative\"\n          px=\"16px\"\n          py={py}\n        >\n          <Box alignItems=\"center\">\n            {!!tab.icon && <Icon mr={iconMarginRight} name={tab.icon} size={iconSize} />}\n            {tab.title}\n          </Box>\n          {!!tab.onDelete && (\n            <TagButton\n              disabled={tab.disabled}\n              hoverBg=\"skyBlue.80\"\n              hoverColor=\"seaBlue.main\"\n              isRound={false}\n              ml={1}\n              onClick={e => {\n                e.stopPropagation()\n                tab?.onDelete?.(e)\n              }}\n              title=\"Delete\"\n            />\n          )}\n          {isActive(tab) && (\n            <Box\n              animation={animationDirection}\n              bg={main}\n              bottom=\"-1px\"\n              className=\"vui-tabsNavBarItemActiveIndicator\"\n              h={borderWidth}\n              left={0}\n              position=\"absolute\"\n              w={1}\n            >\n              &nbsp;\n            </Box>\n          )}\n        </ListItem>\n      ))}\n      {!!actions && (\n        <Box ml=\"auto\" px={0.75} py={0.5}>\n          {actions}\n        </Box>\n      )}\n    </List>\n  )\n})\n\nTabsNavBar.displayName = 'TabsNavBar'\n\nexport default TabsNavBar\n"],"mappings":";;;;;;;;;;;;AAWA,MAAM,EAAE,UAAU,QAAQ,OAAO,OAAO,SAAS;AAEjD,MAAa,aAAa,KAA4B,OAAO,QAAQ;CACnE,MAAM,EAAE,SAAS,MAAM,gBAAgB,eAAe,oBAAoB,YAAY,OAAO,SAAS;CACtG,MAAM,WAA2B,iBAAiB,SAAmB;CAErE,MAAM,EAAE,UAAWA,iBAAkB,EAAE;CAEvC,MAAM,WAAW,MAAM,QAAQ,MAAM,WAAW;CAChD,MAAM,IAAI,MAAM,QAAQ,MAAM,WAAW;CACzC,MAAM,cAAc,MAAM,QAAQ,MAAM,WAAW;CACnD,MAAM,KAAK,MAAM,QAAQ,MAAM,WAAW;CAC1C,MAAM,kBAAkB,SAAS,QAAQ,SAAS;CAElD,MAAM,YAAY,QAAuB,CAAC,IAAI,YAAY,KAAK,UAAU;AAEzE,QACE,qBAAC,MAAD;EACE,YAAW;EACX,cAAc,aAAa,aAAa,WAAW;EACnD,WAAW,GAAG,iBAAiB;EAC/B,SAAQ;EACR;EACA,IAAG;EACE;EACL,GAAG;YARL,CAUG,MAAM,OAAM,QACX,qBAAC,UAAD;GACE,UAAU,IAAI,WAAW,SAAY;GACrC,IAAG;GACH,WAAW,yCAAyC,KAAK;GACzD,OAAO,SAAS,IAAI,GAAG,OAAO;GAC9B,UAAU,IAAI;GACd,SAAQ;GACE;GACV,YAAW;GACX,YAAY;GACT;GACH,SAAS,IAAI,WAAW,SAAY;GAEpC,UAAS,MAAK,iBAAiB,IAAI,SAAS,GAAG,EAAE;GACjD,UAAS;GACT,IAAG;GACC;aAhBN;IAkBE,qBAAC,KAAD;KAAK,YAAW;eAAhB,CACG,CAAC,CAAC,IAAI,QAAQ,oBAAC,MAAD;MAAM,IAAI;MAAiB,MAAM,IAAI;MAAM,MAAM;MAAY,GAC3E,IAAI,MACD;;IACL,CAAC,CAAC,IAAI,YACL,oBAAC,WAAD;KACE,UAAU,IAAI;KACd,SAAQ;KACR,YAAW;KACX,SAAS;KACT,IAAI;KACJ,UAAS,MAAK;AACZ,QAAE,iBAAiB;AACnB,WAAK,WAAW,EAAE;;KAEpB,OAAM;KACN;IAEH,SAAS,IAAI,IACZ,oBAAC,KAAD;KACE,WAAW;KACX,IAAI;KACJ,QAAO;KACP,WAAU;KACV,GAAG;KACH,MAAM;KACN,UAAS;KACT,GAAG;eACJ;KAEK;IAEC;KAtCJ,IAAI,MAsCA,CACX,EACD,CAAC,CAAC,WACD,oBAAC,KAAD;GAAK,IAAG;GAAO,IAAI;GAAM,IAAI;aAC1B;GACG,EAEH;;EAET;AAEF,WAAW,cAAc"}

package/dist/tabs/theme.js

@@ -45,5 +45,5 @@ var theme_default = {
 
 //#endregion
 export { theme_default as default };
-globalThis.__vuiVersion__ = "4.0.3"
+globalThis.__vuiVersion__ = "5.0.0-beta.1"
 //# sourceMappingURL=theme.js.map

package/dist/tabs/useTabsState.js

@@ -17,5 +17,5 @@ const useTabsState = (initialAnimation, tabIndex) => {
 
 //#endregion
 export { useTabsState };
-globalThis.__vuiVersion__ = "4.0.3"
+globalThis.__vuiVersion__ = "5.0.0-beta.1"
 //# sourceMappingURL=useTabsState.js.map

package/dist/tag/context.d.ts

@@ -1,5 +1,4 @@
 import { Dict } from "../utils/types.js";
-import "../utils/index.js";
 import * as react from "react";
 
 //#region src/tag/context.d.ts

package/dist/tag/context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"context.d.ts","names":[],"sources":["../../src/tag/context.ts"],"mappings":";;;;;cAGO,WAAA,EAAW,KAAA,CAAA,QAAA,CAAA,IAAA,GAAE,aAAA,QAAa,IAAA"}
+{"version":3,"file":"context.d.ts","names":[],"sources":["../../src/tag/context.ts"],"mappings":";;;;cAGO,WAAA,EAAW,KAAA,CAAA,QAAA,CAAA,IAAA,GAAE,aAAA,QAAa,IAAA"}

package/dist/tag/context.js

@@ -5,5 +5,5 @@ const [TagProvider, useTagContext] = createContext({ isOptional: true });
 
 //#endregion
 export { TagProvider, useTagContext };
-globalThis.__vuiVersion__ = "4.0.3"
+globalThis.__vuiVersion__ = "5.0.0-beta.1"
 //# sourceMappingURL=context.js.map

package/dist/tag/tag.d.ts

@@ -1,15 +1,13 @@
-import { SystemProps } from "../system/system.js";
 import { VuiComponent } from "../core/vui.js";
-import "../core/index.js";
 import { TagProps } from "./tag.types.js";
 import { TagButton } from "./tagButton.js";
 import { TagIcon } from "./tagIcon.js";
 import { TagText } from "./tagText.js";
-import "../index.js";
 import * as styled_components0 from "styled-components";
+import * as styled_components_dist_types0 from "styled-components/dist/types";
 
 //#region src/tag/tag.d.ts
-declare const TagBase: styled_components0.StyledComponent<"span", styled_components0.DefaultTheme, SystemProps, never>;
+declare const TagBase: styled_components_dist_types0.IStyledComponentBase<"web", styled_components0.FastOmit<any, never>> & string;
 /**
  * Displays text, icons or custom content. Can be made interactive or a link.
  * Exposes some props to the children via context.

package/dist/tag/tag.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tag.d.ts","names":[],"sources":["../../src/tag/tag.tsx"],"mappings":";;;;;;;;;;;cAWa,OAAA,EAAO,kBAAA,CAAA,eAAA,SAsBnB,kBAAA,CAtBmB,YAAA,EAAA,WAAA;;;;;cA2BP,GAAA,EAoGP,YAAA,SAAqB,QAAA;EACzB,MAAA,SAAe,SAAA;EACf,IAAA,SAAa,OAAA;EACb,IAAA,SAAa,OAAA;AAAA"}
+{"version":3,"file":"tag.d.ts","names":[],"sources":["../../src/tag/tag.tsx"],"mappings":";;;;;;;;;cAWa,OAAA,EAAO,6BAAA,CAAA,oBAAA,QAsBnB,kBAAA,CAtBmB,QAAA;;;;;cA2BP,GAAA,EAoGP,YAAA,SAAqB,QAAA;EACzB,MAAA,SAAe,SAAA;EACf,IAAA,SAAa,OAAA;EACb,IAAA,SAAa,OAAA;AAAA"}

package/dist/tag/tag.js

@@ -117,5 +117,5 @@ Tag.displayName = "Tag";
 
 //#endregion
 export { TagBase, Tag as default };
-globalThis.__vuiVersion__ = "4.0.3"
+globalThis.__vuiVersion__ = "5.0.0-beta.1"
 //# sourceMappingURL=tag.js.map

package/dist/tag/tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"tag.js","names":[],"sources":["../../src/tag/tag.tsx"],"sourcesContent":["import { useMemo } from 'react'\n\nimport type { VuiComponent } from '../core'\nimport { styled, useStyleConfig, vui } from '../core'\nimport { cs, filterUndefined, isReactText, isString } from '../utils'\nimport { TagProvider } from './context'\nimport type { TagProps } from './tag.types'\nimport TagButton from './tagButton'\nimport TagIcon from './tagIcon'\nimport TagText from './tagText'\n\nexport const TagBase = styled.spanBox`\n  align-items: center;\n  border-radius: xl;\n  display: inline-flex;\n  font-weight: medium;\n  justify-content: center;\n  line-height: normal;\n  max-width: 100%;\n  position: relative;\n  transition-duration: fast;\n  width: fit-content;\n\n  &:focus {\n    border-color: transparent;\n    outline: none;\n  }\n\n  &[aria-disabled='true'] {\n    opacity: 0.5;\n    cursor: not-allowed;\n    user-select: none;\n  }\n`\n/**\n * Displays text, icons or custom content. Can be made interactive or a link.\n * Exposes some props to the children via context.\n */\nexport const Tag = vui<'span', TagProps>((props, ref) => {\n  const {\n    casing,\n    children,\n    className,\n    disabled,\n    icon,\n    iconLeft,\n    iconRight,\n    isFullWidth,\n    isInteractive = props.onClick !== undefined && props.onDelete === undefined,\n    isRound,\n    isTruncated = true,\n    itemLeft,\n    itemRight,\n    onClick,\n    onDelete,\n    size = 'md',\n    text,\n    variant = 'subtleBlue',\n    weight,\n    ...rest\n  } = props\n  const styles = useStyleConfig('Tag', props)\n  const { activeBg, h, hoverBg, spaceX: spaceXBase = 0, ...tagStyles } = styles.container\n\n  const context = useMemo(() => filterUndefined({ disabled, size, variant }), [disabled, size, variant])\n\n  const spaceX = spaceXBase / 8\n  let spaceXText = (spaceXBase + 4) / 8\n  if (size === 'xs') {\n    spaceXText = spaceXBase / 8\n  }\n\n  const pl = icon || itemLeft || iconLeft ? spaceX : spaceXText\n  const pr = icon || itemRight || iconRight ? spaceX : spaceXText\n\n  const interactiveProps =\n    !disabled && isInteractive\n      ? {\n          cursor: 'pointer',\n          hoverBg,\n          activeBg,\n          tabIndex: 0,\n          userSelect: 'none',\n        }\n      : {}\n\n  const aliasedProps = filterUndefined({\n    borderRadius: isRound ? h / 2 : undefined,\n    'aria-disabled': disabled,\n    fontWeight: weight,\n    textTransform: casing,\n    w: isFullWidth ? '100%' : undefined,\n  })\n\n  return (\n    <TagProvider value={context}>\n      <TagBase\n        className={cs('vui-tag', className)}\n        focusRing={2}\n        h={h}\n        isTruncated={isTruncated}\n        onClick={!disabled ? onClick : undefined}\n        pl={pl}\n        pr={pr}\n        ref={ref}\n        {...tagStyles}\n        {...interactiveProps}\n        {...aliasedProps}\n        {...rest}\n      >\n        {isString(icon) ? <TagIcon name={icon} /> : icon}\n\n        {!icon && (\n          <>\n            {itemLeft}\n\n            {isString(iconLeft) ? <TagIcon mr={spaceX} name={iconLeft} /> : iconLeft}\n\n            {children ?? (isReactText(text) ? <TagText {...{ isTruncated, text }} /> : text)}\n\n            {isString(iconRight) ? <TagIcon ml={spaceX} name={iconRight} /> : iconRight}\n\n            {onDelete ? (\n              <TagButton\n                aria-label=\"delete\"\n                disabled={disabled}\n                isRound={isRound}\n                ml={spaceX}\n                onClick={e => onDelete?.(e)}\n              />\n            ) : (\n              itemRight\n            )}\n          </>\n        )}\n      </TagBase>\n    </TagProvider>\n  )\n}) as VuiComponent<'span', TagProps> & {\n  Button: typeof TagButton\n  Icon: typeof TagIcon\n  Text: typeof TagText\n}\n\nTag.Button = TagButton\nTag.Icon = TagIcon\nTag.Text = TagText\n\nTag.displayName = 'Tag'\n\nexport default Tag\n"],"mappings":";;;;;;;;;;;;;;AAWA,MAAa,UAAU,OAAO,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BrC,MAAa,MAAM,KAAuB,OAAO,QAAQ;CACvD,MAAM,EACJ,QACA,UACA,WACA,UACA,MACA,UACA,WACA,aACA,gBAAgB,MAAM,YAAY,UAAa,MAAM,aAAa,QAClE,SACA,cAAc,MACd,UACA,WACA,SACA,UACA,OAAO,MACP,MACA,UAAU,cACV,QACA,GAAG,SACD;CAEJ,MAAM,EAAE,UAAU,GAAG,SAAS,QAAQ,aAAa,GAAG,GAAG,cAD1C,eAAe,OAAO,MAAM,CACmC;CAE9E,MAAM,UAAU,cAAc,gBAAgB;EAAE;EAAU;EAAM;EAAS,CAAC,EAAE;EAAC;EAAU;EAAM;EAAQ,CAAC;CAEtG,MAAM,SAAS,aAAa;CAC5B,IAAI,cAAc,aAAa,KAAK;AACpC,KAAI,SAAS,KACX,cAAa,aAAa;CAG5B,MAAM,KAAK,QAAQ,YAAY,WAAW,SAAS;CACnD,MAAM,KAAK,QAAQ,aAAa,YAAY,SAAS;CAErD,MAAM,mBACJ,CAAC,YAAY,gBACT;EACE,QAAQ;EACR;EACA;EACA,UAAU;EACV,YAAY;EACb,GACD,EAAE;CAER,MAAM,eAAe,gBAAgB;EACnC,cAAc,UAAU,IAAI,IAAI;EAChC,iBAAiB;EACjB,YAAY;EACZ,eAAe;EACf,GAAG,cAAc,SAAS;EAC3B,CAAC;AAEF,QACE,oBAAC;EAAY,OAAO;YAClB,qBAAC;GACC,WAAW,GAAG,WAAW,UAAU;GACnC,WAAW;GACR;GACU;GACb,SAAS,CAAC,WAAW,UAAU;GAC3B;GACA;GACC;GACL,GAAI;GACJ,GAAI;GACJ,GAAI;GACJ,GAAI;cAEH,SAAS,KAAK,GAAG,oBAAC,WAAQ,MAAM,OAAQ,GAAG,MAE3C,CAAC,QACA;IACG;IAEA,SAAS,SAAS,GAAG,oBAAC;KAAQ,IAAI;KAAQ,MAAM;MAAY,GAAG;IAE/D,aAAa,YAAY,KAAK,GAAG,oBAAC;KAAc;KAAa;MAAU,GAAG;IAE1E,SAAS,UAAU,GAAG,oBAAC;KAAQ,IAAI;KAAQ,MAAM;MAAa,GAAG;IAEjE,WACC,oBAAC;KACC,cAAW;KACD;KACD;KACT,IAAI;KACJ,UAAS,MAAK,WAAW,EAAE;MAC3B,GAEF;OAED;IAEG;GACE;EAEhB;AAMF,IAAI,SAAS;AACb,IAAI,OAAO;AACX,IAAI,OAAO;AAEX,IAAI,cAAc"}
+{"version":3,"file":"tag.js","names":[],"sources":["../../src/tag/tag.tsx"],"sourcesContent":["import { useMemo } from 'react'\n\nimport type { VuiComponent } from '../core'\nimport { styled, useStyleConfig, vui } from '../core'\nimport { cs, filterUndefined, isReactText, isString } from '../utils'\nimport { TagProvider } from './context'\nimport type { TagProps } from './tag.types'\nimport TagButton from './tagButton'\nimport TagIcon from './tagIcon'\nimport TagText from './tagText'\n\nexport const TagBase = styled.spanBox`\n  align-items: center;\n  border-radius: xl;\n  display: inline-flex;\n  font-weight: medium;\n  justify-content: center;\n  line-height: normal;\n  max-width: 100%;\n  position: relative;\n  transition-duration: fast;\n  width: fit-content;\n\n  &:focus {\n    border-color: transparent;\n    outline: none;\n  }\n\n  &[aria-disabled='true'] {\n    opacity: 0.5;\n    cursor: not-allowed;\n    user-select: none;\n  }\n`\n/**\n * Displays text, icons or custom content. Can be made interactive or a link.\n * Exposes some props to the children via context.\n */\nexport const Tag = vui<'span', TagProps>((props, ref) => {\n  const {\n    casing,\n    children,\n    className,\n    disabled,\n    icon,\n    iconLeft,\n    iconRight,\n    isFullWidth,\n    isInteractive = props.onClick !== undefined && props.onDelete === undefined,\n    isRound,\n    isTruncated = true,\n    itemLeft,\n    itemRight,\n    onClick,\n    onDelete,\n    size = 'md',\n    text,\n    variant = 'subtleBlue',\n    weight,\n    ...rest\n  } = props\n  const styles = useStyleConfig('Tag', props)\n  const { activeBg, h, hoverBg, spaceX: spaceXBase = 0, ...tagStyles } = styles.container\n\n  const context = useMemo(() => filterUndefined({ disabled, size, variant }), [disabled, size, variant])\n\n  const spaceX = spaceXBase / 8\n  let spaceXText = (spaceXBase + 4) / 8\n  if (size === 'xs') {\n    spaceXText = spaceXBase / 8\n  }\n\n  const pl = icon || itemLeft || iconLeft ? spaceX : spaceXText\n  const pr = icon || itemRight || iconRight ? spaceX : spaceXText\n\n  const interactiveProps =\n    !disabled && isInteractive\n      ? {\n          cursor: 'pointer',\n          hoverBg,\n          activeBg,\n          tabIndex: 0,\n          userSelect: 'none',\n        }\n      : {}\n\n  const aliasedProps = filterUndefined({\n    borderRadius: isRound ? h / 2 : undefined,\n    'aria-disabled': disabled,\n    fontWeight: weight,\n    textTransform: casing,\n    w: isFullWidth ? '100%' : undefined,\n  })\n\n  return (\n    <TagProvider value={context}>\n      <TagBase\n        className={cs('vui-tag', className)}\n        focusRing={2}\n        h={h}\n        isTruncated={isTruncated}\n        onClick={!disabled ? onClick : undefined}\n        pl={pl}\n        pr={pr}\n        ref={ref}\n        {...tagStyles}\n        {...interactiveProps}\n        {...aliasedProps}\n        {...rest}\n      >\n        {isString(icon) ? <TagIcon name={icon} /> : icon}\n\n        {!icon && (\n          <>\n            {itemLeft}\n\n            {isString(iconLeft) ? <TagIcon mr={spaceX} name={iconLeft} /> : iconLeft}\n\n            {children ?? (isReactText(text) ? <TagText {...{ isTruncated, text }} /> : text)}\n\n            {isString(iconRight) ? <TagIcon ml={spaceX} name={iconRight} /> : iconRight}\n\n            {onDelete ? (\n              <TagButton\n                aria-label=\"delete\"\n                disabled={disabled}\n                isRound={isRound}\n                ml={spaceX}\n                onClick={e => onDelete?.(e)}\n              />\n            ) : (\n              itemRight\n            )}\n          </>\n        )}\n      </TagBase>\n    </TagProvider>\n  )\n}) as VuiComponent<'span', TagProps> & {\n  Button: typeof TagButton\n  Icon: typeof TagIcon\n  Text: typeof TagText\n}\n\nTag.Button = TagButton\nTag.Icon = TagIcon\nTag.Text = TagText\n\nTag.displayName = 'Tag'\n\nexport default Tag\n"],"mappings":";;;;;;;;;;;;;;AAWA,MAAa,UAAU,OAAO,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BrC,MAAa,MAAM,KAAuB,OAAO,QAAQ;CACvD,MAAM,EACJ,QACA,UACA,WACA,UACA,MACA,UACA,WACA,aACA,gBAAgB,MAAM,YAAY,UAAa,MAAM,aAAa,QAClE,SACA,cAAc,MACd,UACA,WACA,SACA,UACA,OAAO,MACP,MACA,UAAU,cACV,QACA,GAAG,SACD;CAEJ,MAAM,EAAE,UAAU,GAAG,SAAS,QAAQ,aAAa,GAAG,GAAG,cAD1C,eAAe,OAAO,MAAM,CACmC;CAE9E,MAAM,UAAU,cAAc,gBAAgB;EAAE;EAAU;EAAM;EAAS,CAAC,EAAE;EAAC;EAAU;EAAM;EAAQ,CAAC;CAEtG,MAAM,SAAS,aAAa;CAC5B,IAAI,cAAc,aAAa,KAAK;AACpC,KAAI,SAAS,KACX,cAAa,aAAa;CAG5B,MAAM,KAAK,QAAQ,YAAY,WAAW,SAAS;CACnD,MAAM,KAAK,QAAQ,aAAa,YAAY,SAAS;CAErD,MAAM,mBACJ,CAAC,YAAY,gBACT;EACE,QAAQ;EACR;EACA;EACA,UAAU;EACV,YAAY;EACb,GACD,EAAE;CAER,MAAM,eAAe,gBAAgB;EACnC,cAAc,UAAU,IAAI,IAAI;EAChC,iBAAiB;EACjB,YAAY;EACZ,eAAe;EACf,GAAG,cAAc,SAAS;EAC3B,CAAC;AAEF,QACE,oBAAC,aAAD;EAAa,OAAO;YAClB,qBAAC,SAAD;GACE,WAAW,GAAG,WAAW,UAAU;GACnC,WAAW;GACR;GACU;GACb,SAAS,CAAC,WAAW,UAAU;GAC3B;GACA;GACC;GACL,GAAI;GACJ,GAAI;GACJ,GAAI;GACJ,GAAI;aAZN,CAcG,SAAS,KAAK,GAAG,oBAAC,SAAD,EAAS,MAAM,MAAQ,IAAG,MAE3C,CAAC,QACA;IACG;IAEA,SAAS,SAAS,GAAG,oBAAC,SAAD;KAAS,IAAI;KAAQ,MAAM;KAAY,IAAG;IAE/D,aAAa,YAAY,KAAK,GAAG,oBAAC,SAAD;KAAe;KAAa;KAAU,IAAG;IAE1E,SAAS,UAAU,GAAG,oBAAC,SAAD;KAAS,IAAI;KAAQ,MAAM;KAAa,IAAG;IAEjE,WACC,oBAAC,WAAD;KACE,cAAW;KACD;KACD;KACT,IAAI;KACJ,UAAS,MAAK,WAAW,EAAE;KAC3B,IAEF;IAED,IAEG;;EACE;EAEhB;AAMF,IAAI,SAAS;AACb,IAAI,OAAO;AACX,IAAI,OAAO;AAEX,IAAI,cAAc"}

package/dist/tag/tag.types.d.ts

@@ -1,9 +1,7 @@
 import { ThemingProps } from "../theme/types.js";
 import { TypographyProps } from "../system/typography.js";
 import { SystemProps } from "../system/system.js";
-import "../system/index.js";
 import { IconProp } from "../icon/icon.types.js";
-import "../icon/index.js";
 import { JSX } from "react";
 
 //#region src/tag/tag.types.d.ts

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

@@ -1 +1 @@
-{"version":3,"file":"tag.types.d.ts","names":[],"sources":["../../src/tag/tag.types.ts"],"mappings":";;;;;;;;;KAMY,aAAA;kDAEV,MAAA,GAAS,eAAA;EAET,WAAA,8DAJU;EAMV,QAAA;EAEA,IAAA,GAAO,QAAA,GAAW,GAAA,CAAI,OAAA,EAAf;EAEP,QAAA,GAAW,QAAA,GAAW,GAAA,CAAI,OAAA,EAAf;EAEX,SAAA,GAAY,QAAA,GAAW,GAAA,CAAI,OAAA,EAAf;EAEZ,WAAA,YAMW;EAJX,aAAA,YAQ2C;EAN3C,OAAA,YAM0B;EAJ1B,QAAA,GAAW,KAAA,CAAM,SAAA,EAQR;EANT,SAAA,GAAY,KAAA,CAAM,SAAA,EAMM;EAJxB,QAAA,IAAY,WAAA,GAAc,KAAA,CAAM,UAAA,CAAW,iBAAA,EAAmB,UAAA,YAtBrD;EAwBT,IAAA,GAAO,KAAA,CAAM,SAAA,EApBb;EAsBA,MAAA,GAAS,eAAA;AAAA;AAAA,KAGC,QAAA,GAAW,WAAA,GAAc,YAAA,UAAsB,aAAA"}
+{"version":3,"file":"tag.types.d.ts","names":[],"sources":["../../src/tag/tag.types.ts"],"mappings":";;;;;;;KAMY,aAAA;kDAEV,MAAA,GAAS,eAAA;EAET,WAAA;EAEA,QAAA,YANuB;EAQvB,IAAA,GAAO,QAAA,GAAW,GAAA,CAAI,OAAA,EANb;EAQT,QAAA,GAAW,QAAA,GAAW,GAAA,CAAI,OAAA,EAFR;EAIlB,SAAA,GAAY,QAAA,GAAW,GAAA,CAAI,OAAA,EAFL;EAItB,WAAA,YAFuB;EAIvB,aAAA,YAMY;EAJZ,OAAA,YAM8D;EAJ9D,QAAA,GAAW,KAAA,CAAM,SAAA,EAMV;EAJP,SAAA,GAAY,KAAA,CAAM,SAAA,EAMM;EAJxB,QAAA,IAAY,WAAA,GAAc,KAAA,CAAM,UAAA,CAAW,iBAAA,EAAmB,UAAA,YAtB9D;EAwBA,IAAA,GAAO,KAAA,CAAM,SAAA,EAtBb;EAwBA,MAAA,GAAS,eAAA;AAAA;AAAA,KAGC,QAAA,GAAW,WAAA,GAAc,YAAA,UAAsB,aAAA"}

package/dist/tag/tagButton.d.ts

@@ -1,8 +1,5 @@
 import { VuiComponent } from "../core/vui.js";
 import { ButtonProps } from "../button/button.types.js";
-import "../button/index.js";
-import "../index.js";
-
 //#region src/tag/tagButton.d.ts
 /** Displays a button within the Tag. */
 declare const TagButton: VuiComponent<"button", ButtonProps>;

package/dist/tag/tagButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tagButton.d.ts","names":[],"sources":["../../src/tag/tagButton.tsx"],"mappings":";;;;;;;cAOa,SAAA,EAAS,YAAA,WAAA,WAAA"}
+{"version":3,"file":"tagButton.d.ts","names":[],"sources":["../../src/tag/tagButton.tsx"],"mappings":";;;;cAOa,SAAA,EAAS,YAAA,WAAA,WAAA"}

package/dist/tag/tagButton.js

@@ -31,5 +31,5 @@ TagButton.displayName = "TagButton";
 
 //#endregion
 export { TagButton as default };
-globalThis.__vuiVersion__ = "4.0.3"
+globalThis.__vuiVersion__ = "5.0.0-beta.1"
 //# sourceMappingURL=tagButton.js.map

package/dist/tag/tagButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"tagButton.js","names":[],"sources":["../../src/tag/tagButton.tsx"],"sourcesContent":["import type { ButtonProps } from '../button'\nimport Button from '../button'\nimport { useStyleConfig, vui } from '../core'\nimport { cs } from '../utils'\nimport { useTagContext } from './context'\n\n/** Displays a button within the Tag. */\nexport const TagButton = vui<'button', ButtonProps>((props, ref) => {\n  const { className, ...rest } = props\n  const mergedProps = { ...useTagContext(), ...props }\n  const styles = useStyleConfig('Tag', useTagContext())\n\n  return (\n    <Button\n      borderColor=\"transparent\"\n      className={cs('vui-tagButton', className)}\n      disabled={mergedProps.disabled}\n      hoverBorderColor=\"transparent\"\n      icon=\"uiTimes\"\n      mr={-0.5}\n      ref={ref}\n      variant={mergedProps.variant}\n      {...styles.button}\n      {...rest}\n    />\n  )\n})\n\nTagButton.displayName = 'TagButton'\n\nexport default TagButton\n"],"mappings":";;;;;;;;;AAOA,MAAa,YAAY,KAA4B,OAAO,QAAQ;CAClE,MAAM,EAAE,WAAW,GAAG,SAAS;CAC/B,MAAM,cAAc;EAAE,GAAG,eAAe;EAAE,GAAG;EAAO;CACpD,MAAM,SAAS,eAAe,OAAO,eAAe,CAAC;AAErD,QACE,oBAAC;EACC,aAAY;EACZ,WAAW,GAAG,iBAAiB,UAAU;EACzC,UAAU,YAAY;EACtB,kBAAiB;EACjB,MAAK;EACL,IAAI;EACC;EACL,SAAS,YAAY;EACrB,GAAI,OAAO;EACX,GAAI;GACJ;EAEJ;AAEF,UAAU,cAAc"}
+{"version":3,"file":"tagButton.js","names":[],"sources":["../../src/tag/tagButton.tsx"],"sourcesContent":["import type { ButtonProps } from '../button'\nimport Button from '../button'\nimport { useStyleConfig, vui } from '../core'\nimport { cs } from '../utils'\nimport { useTagContext } from './context'\n\n/** Displays a button within the Tag. */\nexport const TagButton = vui<'button', ButtonProps>((props, ref) => {\n  const { className, ...rest } = props\n  const mergedProps = { ...useTagContext(), ...props }\n  const styles = useStyleConfig('Tag', useTagContext())\n\n  return (\n    <Button\n      borderColor=\"transparent\"\n      className={cs('vui-tagButton', className)}\n      disabled={mergedProps.disabled}\n      hoverBorderColor=\"transparent\"\n      icon=\"uiTimes\"\n      mr={-0.5}\n      ref={ref}\n      variant={mergedProps.variant}\n      {...styles.button}\n      {...rest}\n    />\n  )\n})\n\nTagButton.displayName = 'TagButton'\n\nexport default TagButton\n"],"mappings":";;;;;;;;;AAOA,MAAa,YAAY,KAA4B,OAAO,QAAQ;CAClE,MAAM,EAAE,WAAW,GAAG,SAAS;CAC/B,MAAM,cAAc;EAAE,GAAG,eAAe;EAAE,GAAG;EAAO;CACpD,MAAM,SAAS,eAAe,OAAO,eAAe,CAAC;AAErD,QACE,oBAAC,QAAD;EACE,aAAY;EACZ,WAAW,GAAG,iBAAiB,UAAU;EACzC,UAAU,YAAY;EACtB,kBAAiB;EACjB,MAAK;EACL,IAAI;EACC;EACL,SAAS,YAAY;EACrB,GAAI,OAAO;EACX,GAAI;EACJ;EAEJ;AAEF,UAAU,cAAc"}

package/dist/tag/tagIcon.d.ts

@@ -1,8 +1,5 @@
 import { VuiComponent } from "../core/vui.js";
 import { IconProps } from "../icon/icon.types.js";
-import "../icon/index.js";
-import "../index.js";
-
 //#region src/tag/tagIcon.d.ts
 /** Displays an icon within the Tag. */
 declare const TagIcon: VuiComponent<"svg", IconProps>;

package/dist/tag/tagIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tagIcon.d.ts","names":[],"sources":["../../src/tag/tagIcon.tsx"],"mappings":";;;;;;;cAOa,OAAA,EAAO,YAAA,QAAA,SAAA"}
+{"version":3,"file":"tagIcon.d.ts","names":[],"sources":["../../src/tag/tagIcon.tsx"],"mappings":";;;;cAOa,OAAA,EAAO,YAAA,QAAA,SAAA"}

package/dist/tag/tagIcon.js

@@ -21,5 +21,5 @@ TagIcon.displayName = "TagIcon";
 
 //#endregion
 export { TagIcon as default };
-globalThis.__vuiVersion__ = "4.0.3"
+globalThis.__vuiVersion__ = "5.0.0-beta.1"
 //# sourceMappingURL=tagIcon.js.map

package/dist/tag/tagIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"tagIcon.js","names":[],"sources":["../../src/tag/tagIcon.tsx"],"sourcesContent":["import { useStyleConfig, vui } from '../core'\nimport type { IconProps } from '../icon'\nimport Icon from '../icon'\nimport { cs } from '../utils'\nimport { useTagContext } from './context'\n\n/** Displays an icon within the Tag. */\nexport const TagIcon = vui<'svg', IconProps>((props, ref) => {\n  const { className, ...rest } = props\n  const styles = useStyleConfig('Tag', useTagContext())\n\n  return <Icon className={cs('vui-tagIcon', className)} ref={ref} {...styles.icon} {...rest} />\n})\n\nTagIcon.displayName = 'TagIcon'\nexport default TagIcon\n"],"mappings":";;;;;;;;;AAOA,MAAa,UAAU,KAAuB,OAAO,QAAQ;CAC3D,MAAM,EAAE,WAAW,GAAG,SAAS;CAC/B,MAAM,SAAS,eAAe,OAAO,eAAe,CAAC;AAErD,QAAO,oBAAC;EAAK,WAAW,GAAG,eAAe,UAAU;EAAO;EAAK,GAAI,OAAO;EAAM,GAAI;GAAQ;EAC7F;AAEF,QAAQ,cAAc"}
+{"version":3,"file":"tagIcon.js","names":[],"sources":["../../src/tag/tagIcon.tsx"],"sourcesContent":["import { useStyleConfig, vui } from '../core'\nimport type { IconProps } from '../icon'\nimport Icon from '../icon'\nimport { cs } from '../utils'\nimport { useTagContext } from './context'\n\n/** Displays an icon within the Tag. */\nexport const TagIcon = vui<'svg', IconProps>((props, ref) => {\n  const { className, ...rest } = props\n  const styles = useStyleConfig('Tag', useTagContext())\n\n  return <Icon className={cs('vui-tagIcon', className)} ref={ref} {...styles.icon} {...rest} />\n})\n\nTagIcon.displayName = 'TagIcon'\nexport default TagIcon\n"],"mappings":";;;;;;;;;AAOA,MAAa,UAAU,KAAuB,OAAO,QAAQ;CAC3D,MAAM,EAAE,WAAW,GAAG,SAAS;CAC/B,MAAM,SAAS,eAAe,OAAO,eAAe,CAAC;AAErD,QAAO,oBAAC,MAAD;EAAM,WAAW,GAAG,eAAe,UAAU;EAAO;EAAK,GAAI,OAAO;EAAM,GAAI;EAAQ;EAC7F;AAEF,QAAQ,cAAc"}

package/dist/tag/tagText.d.ts

@@ -1,8 +1,5 @@
 import { VuiComponent } from "../core/vui.js";
 import { TProps } from "../t/t.types.js";
-import "../t/index.js";
-import "../index.js";
-
 //#region src/tag/tagText.d.ts
 /** Displays text within the Tag. */
 declare const TagText: VuiComponent<"span", TProps>;

package/dist/tag/tagText.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tagText.d.ts","names":[],"sources":["../../src/tag/tagText.tsx"],"mappings":";;;;;;;cAOa,OAAA,EAAO,YAAA,SAAA,MAAA"}
+{"version":3,"file":"tagText.d.ts","names":[],"sources":["../../src/tag/tagText.tsx"],"mappings":";;;;cAOa,OAAA,EAAO,YAAA,SAAA,MAAA"}

package/dist/tag/tagText.js

@@ -22,5 +22,5 @@ TagText.displayName = "TagText";
 
 //#endregion
 export { TagText as default };
-globalThis.__vuiVersion__ = "4.0.3"
+globalThis.__vuiVersion__ = "5.0.0-beta.1"
 //# sourceMappingURL=tagText.js.map

package/dist/tag/tagText.js.map

@@ -1 +1 @@
-{"version":3,"file":"tagText.js","names":[],"sources":["../../src/tag/tagText.tsx"],"sourcesContent":["import { useStyleConfig, vui } from '../core'\nimport type { TProps } from '../t'\nimport T from '../t'\nimport { cs } from '../utils'\nimport { useTagContext } from './context'\n\n/** Displays text within the Tag. */\nexport const TagText = vui<'span', TProps>((props, ref) => {\n  const { className, ...rest } = props\n  const styles = useStyleConfig('Tag', useTagContext())\n\n  return <T className={cs('vui-tagText', className)} fontSize=\"inherit\" ref={ref} {...styles.text} {...rest} />\n})\n\nTagText.displayName = 'TagText'\n\nexport default TagText\n"],"mappings":";;;;;;;;;AAOA,MAAa,UAAU,KAAqB,OAAO,QAAQ;CACzD,MAAM,EAAE,WAAW,GAAG,SAAS;CAC/B,MAAM,SAAS,eAAe,OAAO,eAAe,CAAC;AAErD,QAAO,oBAAC;EAAE,WAAW,GAAG,eAAe,UAAU;EAAE,UAAS;EAAe;EAAK,GAAI,OAAO;EAAM,GAAI;GAAQ;EAC7G;AAEF,QAAQ,cAAc"}
+{"version":3,"file":"tagText.js","names":[],"sources":["../../src/tag/tagText.tsx"],"sourcesContent":["import { useStyleConfig, vui } from '../core'\nimport type { TProps } from '../t'\nimport T from '../t'\nimport { cs } from '../utils'\nimport { useTagContext } from './context'\n\n/** Displays text within the Tag. */\nexport const TagText = vui<'span', TProps>((props, ref) => {\n  const { className, ...rest } = props\n  const styles = useStyleConfig('Tag', useTagContext())\n\n  return <T className={cs('vui-tagText', className)} fontSize=\"inherit\" ref={ref} {...styles.text} {...rest} />\n})\n\nTagText.displayName = 'TagText'\n\nexport default TagText\n"],"mappings":";;;;;;;;;AAOA,MAAa,UAAU,KAAqB,OAAO,QAAQ;CACzD,MAAM,EAAE,WAAW,GAAG,SAAS;CAC/B,MAAM,SAAS,eAAe,OAAO,eAAe,CAAC;AAErD,QAAO,oBAAC,GAAD;EAAG,WAAW,GAAG,eAAe,UAAU;EAAE,UAAS;EAAe;EAAK,GAAI,OAAO;EAAM,GAAI;EAAQ;EAC7G;AAEF,QAAQ,cAAc"}

package/dist/tag/theme.js

@@ -225,5 +225,5 @@ var theme_default = {
 
 //#endregion
 export { theme_default as default };
-globalThis.__vuiVersion__ = "4.0.3"
+globalThis.__vuiVersion__ = "5.0.0-beta.1"
 //# sourceMappingURL=theme.js.map

package/dist/textarea/helpers.js

@@ -7,5 +7,5 @@ function getInitialCount(props) {
 
 //#endregion
 export { getInitialCount };
-globalThis.__vuiVersion__ = "4.0.3"
+globalThis.__vuiVersion__ = "5.0.0-beta.1"
 //# sourceMappingURL=helpers.js.map

package/dist/textarea/textarea.d.ts

@@ -1,11 +1,10 @@
-import { SystemProps } from "../system/system.js";
 import { VuiComponent } from "../core/vui.js";
 import { TextareaProps } from "./textarea.types.js";
-import "../index.js";
 import * as styled_components0 from "styled-components";
+import * as styled_components_dist_types0 from "styled-components/dist/types";
 
 //#region src/textarea/textarea.d.ts
-declare const TextareaBase: styled_components0.StyledComponent<"div", styled_components0.DefaultTheme, SystemProps, never>;
+declare const TextareaBase: styled_components_dist_types0.IStyledComponentBase<"web", styled_components0.FastOmit<any, never>> & string;
 /**
  * Displays a textarea element wrapped in a div to allow extra content, like counter.
  * Forwards many relevant props to the inner textarea. Exposes some props to the children via context.

package/dist/textarea/textarea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"textarea.d.ts","names":[],"sources":["../../src/textarea/textarea.tsx"],"mappings":";;;;;;;cA8Ba,YAAA,EAAY,kBAAA,CAAA,eAAA,QAKxB,kBAAA,CALwB,YAAA,EAAA,WAAA;;;;;cAWZ,QAAA,EAAQ,YAAA,QAAA,aAAA"}
+{"version":3,"file":"textarea.d.ts","names":[],"sources":["../../src/textarea/textarea.tsx"],"mappings":";;;;;;cA8Ba,YAAA,EAAY,6BAAA,CAAA,oBAAA,QAKxB,kBAAA,CALwB,QAAA;;;;;cAWZ,QAAA,EAAQ,YAAA,QAAA,aAAA"}

package/dist/textarea/textarea.js

@@ -128,7 +128,7 @@ const Textarea = vui((props, ref) => {
 			}),
 			!!errorText && /* @__PURE__ */ jsx(HelpText, {
 				isError: true,
-				mr: showCount ? helpTextMargin : void 0,
+				mr: showCount ? "60px" : void 0,
 				size: helpTextSize["lg"],
 				children: errorText
 			})
@@ -139,5 +139,5 @@ Textarea.displayName = "Textarea";
 
 //#endregion
 export { TextareaBase, Textarea as default };
-globalThis.__vuiVersion__ = "4.0.3"
+globalThis.__vuiVersion__ = "5.0.0-beta.1"
 //# sourceMappingURL=textarea.js.map

package/dist/textarea/textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"textarea.js","names":[],"sources":["../../src/textarea/textarea.tsx"],"sourcesContent":["import { useEffect, useId, useState } from 'react'\n\nimport { Box, Label } from '..'\nimport { omitThemingProps, styled, useStyleConfig, vui } from '../core'\nimport { helpTextMargin, helpTextSize, inputColors } from '../input/consts'\nimport HelpText from '../input/helpText'\nimport T from '../t'\nimport type { ChangeEvent } from '../utils'\nimport { cs, filterUndefined, isString } from '../utils'\nimport { getInitialCount } from './helpers'\nimport type { TextareaProps } from './textarea.types'\n\nconst TextareaTextarea = styled.textareaBox`\n  border-radius: none;\n  border-width: 1px;\n  outline: none;\n  padding: 1;\n  resize: none;\n  min-height: 80px;\n  transition-duration: fast;\n  width: 100%;\n\n  &[aria-disabled='true'] {\n    opacity: 0.5;\n    cursor: not-allowed;\n    background-color: sandstone.79;\n    border-color: sandstone.79;\n  }\n`\n\nexport const TextareaBase = styled.divBox`\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  width: 100%;\n`\n\n/**\n * Displays a textarea element wrapped in a div to allow extra content, like counter.\n * Forwards many relevant props to the inner textarea. Exposes some props to the children via context.\n */\nexport const Textarea = vui<'div', TextareaProps>((props, ref) => {\n  const {\n    autoFocus,\n    ariaLabel,\n    className,\n    colorScheme: colorSchemeProp,\n    cols,\n    defaultValue,\n    disabled,\n    errorText,\n    id: idProp,\n    helpText,\n    label,\n    labelMarkOptional,\n    labelTooltipText,\n    maxLength,\n    name,\n    onBlur,\n    onChange: onChangeProp,\n    onFocus,\n    placeholder,\n    readOnly,\n    required,\n    resize = 'none',\n    rows,\n    showCount,\n    textareaProps = {},\n    textareaRef,\n    value,\n    ...rest\n  } = omitThemingProps(props)\n\n  const generatedId = useId()\n  const [count, setCount] = useState(getInitialCount(props))\n  const [valueInternal, setValueInternal] = useState(defaultValue)\n\n  const id = idProp || generatedId\n\n  const styles = useStyleConfig('Textarea', props)\n\n  function onChange(e: ChangeEvent<HTMLTextAreaElement>) {\n    setValueInternal(e.target.value)\n    setCount(e.target.value.length)\n    onChangeProp?.(e)\n  }\n\n  const aliasedProps = filterUndefined({\n    'aria-disabled': disabled,\n  })\n\n  const textareaAliasedProps = filterUndefined({\n    'aria-disabled': disabled,\n    'aria-label': ariaLabel,\n    bg: readOnly ? 'sandstone.97' : undefined,\n    borderColor: readOnly ? 'sandstone.55' : undefined,\n    focusWithinBorderColor: !readOnly ? 'transparent' : undefined,\n    focusWithinRingColor: readOnly ? 'transparent' : undefined,\n  })\n\n  useEffect(() => {\n    setValueInternal(value)\n    setCount(value?.toString()?.length ? `${value}`.length : 0)\n  }, [value])\n\n  return (\n    <Box className=\"vui-textareaContainer\" column ref={ref} {...rest}>\n      {isString(label) ? (\n        <Label\n          aria-disabled={disabled}\n          className=\"vui-textareaLabel\"\n          htmlFor={id}\n          markAsOptional={labelMarkOptional}\n          mb={0.5}\n          text={label}\n          tooltipText={labelTooltipText}\n          {...styles.label}\n        />\n      ) : (\n        label\n      )}\n      <TextareaBase className={cs('vui-textarea', className)} {...styles.container} {...aliasedProps}>\n        <TextareaTextarea\n          className=\"vui-textareaTextarea\"\n          ref={textareaRef}\n          {...{\n            autoFocus,\n            cols,\n            defaultValue,\n            disabled,\n            id,\n            maxLength,\n            name,\n            onBlur,\n            onChange,\n            onFocus,\n            placeholder,\n            readOnly,\n            required,\n            resize,\n            rows,\n          }}\n          value={valueInternal}\n          {...styles.textarea}\n          {...textareaAliasedProps}\n          {...textareaProps}\n        />\n\n        {showCount && (\n          <T\n            className=\"vui-textareaCount\"\n            color={maxLength && count > maxLength ? inputColors.error : inputColors.helpText}\n            position=\"absolute\"\n            right={0}\n            size=\"sm\"\n            top=\"calc(100% + 1px)\"\n          >\n            {count} {maxLength ? `/ ${maxLength}` : null}\n          </T>\n        )}\n      </TextareaBase>\n      {!!helpText && <HelpText size={helpTextSize['lg']}>{helpText}</HelpText>}\n      {!!errorText && (\n        <HelpText isError mr={showCount ? helpTextMargin : undefined} size={helpTextSize['lg']}>\n          {errorText}\n        </HelpText>\n      )}\n    </Box>\n  )\n})\n\nTextarea.displayName = 'Textarea'\n\nexport default Textarea\n"],"mappings":";;;;;;;;;;;;;;;;AAYA,MAAM,mBAAmB,OAAO,WAAW;;;;;;;;;;;;;;;;;AAkB3C,MAAa,eAAe,OAAO,MAAM;;;;;;;;;;AAWzC,MAAa,WAAW,KAA2B,OAAO,QAAQ;CAChE,MAAM,EACJ,WACA,WACA,WACA,aAAa,iBACb,MACA,cACA,UACA,WACA,IAAI,QACJ,UACA,OACA,mBACA,kBACA,WACA,MACA,QACA,UAAU,cACV,SACA,aACA,UACA,UACA,SAAS,QACT,MACA,WACA,gBAAgB,EAAE,EAClB,aACA,OACA,GAAG,SACD,iBAAiB,MAAM;CAE3B,MAAM,cAAc,OAAO;CAC3B,MAAM,CAAC,OAAO,YAAY,SAAS,gBAAgB,MAAM,CAAC;CAC1D,MAAM,CAAC,eAAe,oBAAoB,SAAS,aAAa;CAEhE,MAAM,KAAK,UAAU;CAErB,MAAM,SAAS,eAAe,YAAY,MAAM;CAEhD,SAAS,SAAS,GAAqC;AACrD,mBAAiB,EAAE,OAAO,MAAM;AAChC,WAAS,EAAE,OAAO,MAAM,OAAO;AAC/B,iBAAe,EAAE;;CAGnB,MAAM,eAAe,gBAAgB,EACnC,iBAAiB,UAClB,CAAC;CAEF,MAAM,uBAAuB,gBAAgB;EAC3C,iBAAiB;EACjB,cAAc;EACd,IAAI,WAAW,iBAAiB;EAChC,aAAa,WAAW,iBAAiB;EACzC,wBAAwB,CAAC,WAAW,gBAAgB;EACpD,sBAAsB,WAAW,gBAAgB;EAClD,CAAC;AAEF,iBAAgB;AACd,mBAAiB,MAAM;AACvB,WAAS,OAAO,UAAU,EAAE,SAAS,GAAG,QAAQ,SAAS,EAAE;IAC1D,CAAC,MAAM,CAAC;AAEX,QACE,qBAAC;EAAI,WAAU;EAAwB;EAAY;EAAK,GAAI;;GACzD,SAAS,MAAM,GACd,oBAAC;IACC,iBAAe;IACf,WAAU;IACV,SAAS;IACT,gBAAgB;IAChB,IAAI;IACJ,MAAM;IACN,aAAa;IACb,GAAI,OAAO;KACX,GAEF;GAEF,qBAAC;IAAa,WAAW,GAAG,gBAAgB,UAAU;IAAE,GAAI,OAAO;IAAW,GAAI;eAChF,oBAAC;KACC,WAAU;KACV,KAAK;KAEH;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KAEF,OAAO;KACP,GAAI,OAAO;KACX,GAAI;KACJ,GAAI;MACJ,EAED,aACC,qBAAC;KACC,WAAU;KACV,OAAO,aAAa,QAAQ,YAAY,YAAY,QAAQ,YAAY;KACxE,UAAS;KACT,OAAO;KACP,MAAK;KACL,KAAI;;MAEH;MAAM;MAAE,YAAY,KAAK,cAAc;;MACtC;KAEO;GACd,CAAC,CAAC,YAAY,oBAAC;IAAS,MAAM,aAAa;cAAQ;KAAoB;GACvE,CAAC,CAAC,aACD,oBAAC;IAAS;IAAQ,IAAI,YAAY,iBAAiB;IAAW,MAAM,aAAa;cAC9E;KACQ;;GAET;EAER;AAEF,SAAS,cAAc"}
+{"version":3,"file":"textarea.js","names":[],"sources":["../../src/textarea/textarea.tsx"],"sourcesContent":["import { useEffect, useId, useState } from 'react'\n\nimport { Box, Label } from '..'\nimport { omitThemingProps, styled, useStyleConfig, vui } from '../core'\nimport { helpTextMargin, helpTextSize, inputColors } from '../input/consts'\nimport HelpText from '../input/helpText'\nimport T from '../t'\nimport type { ChangeEvent } from '../utils'\nimport { cs, filterUndefined, isString } from '../utils'\nimport { getInitialCount } from './helpers'\nimport type { TextareaProps } from './textarea.types'\n\nconst TextareaTextarea = styled.textareaBox`\n  border-radius: none;\n  border-width: 1px;\n  outline: none;\n  padding: 1;\n  resize: none;\n  min-height: 80px;\n  transition-duration: fast;\n  width: 100%;\n\n  &[aria-disabled='true'] {\n    opacity: 0.5;\n    cursor: not-allowed;\n    background-color: sandstone.79;\n    border-color: sandstone.79;\n  }\n`\n\nexport const TextareaBase = styled.divBox`\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  width: 100%;\n`\n\n/**\n * Displays a textarea element wrapped in a div to allow extra content, like counter.\n * Forwards many relevant props to the inner textarea. Exposes some props to the children via context.\n */\nexport const Textarea = vui<'div', TextareaProps>((props, ref) => {\n  const {\n    autoFocus,\n    ariaLabel,\n    className,\n    colorScheme: colorSchemeProp,\n    cols,\n    defaultValue,\n    disabled,\n    errorText,\n    id: idProp,\n    helpText,\n    label,\n    labelMarkOptional,\n    labelTooltipText,\n    maxLength,\n    name,\n    onBlur,\n    onChange: onChangeProp,\n    onFocus,\n    placeholder,\n    readOnly,\n    required,\n    resize = 'none',\n    rows,\n    showCount,\n    textareaProps = {},\n    textareaRef,\n    value,\n    ...rest\n  } = omitThemingProps(props)\n\n  const generatedId = useId()\n  const [count, setCount] = useState(getInitialCount(props))\n  const [valueInternal, setValueInternal] = useState(defaultValue)\n\n  const id = idProp || generatedId\n\n  const styles = useStyleConfig('Textarea', props)\n\n  function onChange(e: ChangeEvent<HTMLTextAreaElement>) {\n    setValueInternal(e.target.value)\n    setCount(e.target.value.length)\n    onChangeProp?.(e)\n  }\n\n  const aliasedProps = filterUndefined({\n    'aria-disabled': disabled,\n  })\n\n  const textareaAliasedProps = filterUndefined({\n    'aria-disabled': disabled,\n    'aria-label': ariaLabel,\n    bg: readOnly ? 'sandstone.97' : undefined,\n    borderColor: readOnly ? 'sandstone.55' : undefined,\n    focusWithinBorderColor: !readOnly ? 'transparent' : undefined,\n    focusWithinRingColor: readOnly ? 'transparent' : undefined,\n  })\n\n  useEffect(() => {\n    setValueInternal(value)\n    setCount(value?.toString()?.length ? `${value}`.length : 0)\n  }, [value])\n\n  return (\n    <Box className=\"vui-textareaContainer\" column ref={ref} {...rest}>\n      {isString(label) ? (\n        <Label\n          aria-disabled={disabled}\n          className=\"vui-textareaLabel\"\n          htmlFor={id}\n          markAsOptional={labelMarkOptional}\n          mb={0.5}\n          text={label}\n          tooltipText={labelTooltipText}\n          {...styles.label}\n        />\n      ) : (\n        label\n      )}\n      <TextareaBase className={cs('vui-textarea', className)} {...styles.container} {...aliasedProps}>\n        <TextareaTextarea\n          className=\"vui-textareaTextarea\"\n          ref={textareaRef}\n          {...{\n            autoFocus,\n            cols,\n            defaultValue,\n            disabled,\n            id,\n            maxLength,\n            name,\n            onBlur,\n            onChange,\n            onFocus,\n            placeholder,\n            readOnly,\n            required,\n            resize,\n            rows,\n          }}\n          value={valueInternal}\n          {...styles.textarea}\n          {...textareaAliasedProps}\n          {...textareaProps}\n        />\n\n        {showCount && (\n          <T\n            className=\"vui-textareaCount\"\n            color={maxLength && count > maxLength ? inputColors.error : inputColors.helpText}\n            position=\"absolute\"\n            right={0}\n            size=\"sm\"\n            top=\"calc(100% + 1px)\"\n          >\n            {count} {maxLength ? `/ ${maxLength}` : null}\n          </T>\n        )}\n      </TextareaBase>\n      {!!helpText && <HelpText size={helpTextSize['lg']}>{helpText}</HelpText>}\n      {!!errorText && (\n        <HelpText isError mr={showCount ? helpTextMargin : undefined} size={helpTextSize['lg']}>\n          {errorText}\n        </HelpText>\n      )}\n    </Box>\n  )\n})\n\nTextarea.displayName = 'Textarea'\n\nexport default Textarea\n"],"mappings":";;;;;;;;;;;;;;;;AAYA,MAAM,mBAAmB,OAAO,WAAW;;;;;;;;;;;;;;;;;AAkB3C,MAAa,eAAe,OAAO,MAAM;;;;;;;;;;AAWzC,MAAa,WAAW,KAA2B,OAAO,QAAQ;CAChE,MAAM,EACJ,WACA,WACA,WACA,aAAa,iBACb,MACA,cACA,UACA,WACA,IAAI,QACJ,UACA,OACA,mBACA,kBACA,WACA,MACA,QACA,UAAU,cACV,SACA,aACA,UACA,UACA,SAAS,QACT,MACA,WACA,gBAAgB,EAAE,EAClB,aACA,OACA,GAAG,SACD,iBAAiB,MAAM;CAE3B,MAAM,cAAc,OAAO;CAC3B,MAAM,CAAC,OAAO,YAAY,SAAS,gBAAgB,MAAM,CAAC;CAC1D,MAAM,CAAC,eAAe,oBAAoB,SAAS,aAAa;CAEhE,MAAM,KAAK,UAAU;CAErB,MAAM,SAAS,eAAe,YAAY,MAAM;CAEhD,SAAS,SAAS,GAAqC;AACrD,mBAAiB,EAAE,OAAO,MAAM;AAChC,WAAS,EAAE,OAAO,MAAM,OAAO;AAC/B,iBAAe,EAAE;;CAGnB,MAAM,eAAe,gBAAgB,EACnC,iBAAiB,UAClB,CAAC;CAEF,MAAM,uBAAuB,gBAAgB;EAC3C,iBAAiB;EACjB,cAAc;EACd,IAAI,WAAW,iBAAiB;EAChC,aAAa,WAAW,iBAAiB;EACzC,wBAAwB,CAAC,WAAW,gBAAgB;EACpD,sBAAsB,WAAW,gBAAgB;EAClD,CAAC;AAEF,iBAAgB;AACd,mBAAiB,MAAM;AACvB,WAAS,OAAO,UAAU,EAAE,SAAS,GAAG,QAAQ,SAAS,EAAE;IAC1D,CAAC,MAAM,CAAC;AAEX,QACE,qBAAC,KAAD;EAAK,WAAU;EAAwB;EAAY;EAAK,GAAI;YAA5D;GACG,SAAS,MAAM,GACd,oBAAC,OAAD;IACE,iBAAe;IACf,WAAU;IACV,SAAS;IACT,gBAAgB;IAChB,IAAI;IACJ,MAAM;IACN,aAAa;IACb,GAAI,OAAO;IACX,IAEF;GAEF,qBAAC,cAAD;IAAc,WAAW,GAAG,gBAAgB,UAAU;IAAE,GAAI,OAAO;IAAW,GAAI;cAAlF,CACE,oBAAC,kBAAD;KACE,WAAU;KACV,KAAK;KAEH;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KAEF,OAAO;KACP,GAAI,OAAO;KACX,GAAI;KACJ,GAAI;KACJ,GAED,aACC,qBAAC,GAAD;KACE,WAAU;KACV,OAAO,aAAa,QAAQ,YAAY,YAAY,QAAQ,YAAY;KACxE,UAAS;KACT,OAAO;KACP,MAAK;KACL,KAAI;eANN;MAQG;MAAM;MAAE,YAAY,KAAK,cAAc;MACtC;OAEO;;GACd,CAAC,CAAC,YAAY,oBAAC,UAAD;IAAU,MAAM,aAAa;cAAQ;IAAoB;GACvE,CAAC,CAAC,aACD,oBAAC,UAAD;IAAU;IAAQ,IAAI,qBAA6B;IAAW,MAAM,aAAa;cAC9E;IACQ;GAET;;EAER;AAEF,SAAS,cAAc"}

package/dist/textarea/textarea.types.d.ts

@@ -1,9 +1,6 @@
 import { ChangeEventHandler, FocusEventHandler, PropsOf } from "../utils/types.js";
-import "../utils/index.js";
 import { ThemingProps } from "../theme/types.js";
 import { SystemProps } from "../system/system.js";
-import "../system/index.js";
-
 //#region src/textarea/textarea.types.d.ts
 type TextareaProps = SystemProps & ThemingProps<'Textarea'> & {
   /** Passed to the inner input. */autoFocus?: boolean; /** ARIA label for the input element. */

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

@@ -1 +1 @@
-{"version":3,"file":"textarea.types.d.ts","names":[],"sources":["../../src/textarea/textarea.types.ts"],"mappings":";;;;;;;KAIY,aAAA,GAAgB,WAAA,GAC1B,YAAA;mCAEE,SAAA;EAEA,SAAA,WALqB;EAOrB,QAAA,UAPwB;EASxB,WAAA,6BAQqB;EANrB,IAAA,WAYiB;EAVjB,YAAA,oBAoBS;EAlBT,QAAA,YAoBW;EAlBX,SAAA,YAAqB,KAAA,CAAM,SAAA,EAoBjB;EAlBV,QAAA,GAAW,KAAA,CAAM,SAAA,WA8BD;EA5BhB,SAAA,YA8Bc;EA5Bd,KAAA,YAAiB,KAAA,CAAM,SAAA,EA4Ba;EA1BpC,iBAAA,YAxBF;EA0BE,gBAAA,WAtBA;EAwBA,SAAA,WApBA;EAsBA,IAAA,WAlBA;EAoBA,MAAA,GAAS,iBAAA,CAAkB,mBAAA,GAhB3B;EAkBA,QAAA,GAAW,kBAAA,CAAmB,mBAAA,GAlBH;EAoB3B,OAAA,GAAU,iBAAA,CAAkB,mBAAA,GAlBjB;EAoBX,WAAA,WAlBA;EAoBA,QAAA,YAlBiB;EAoBjB,QAAA,YAlBA;EAoBA,IAAA,WAhBA;EAkBA,SAAA,YAdA;EAgBA,aAAA,GAAgB,OAAA,aAAoB,WAAA,GAhBT;EAkB3B,WAAA,GAAc,KAAA,CAAM,gBAAA,CAAiB,mBAAA,iBAhB1B;EAkBX,KAAA;AAAA"}
+{"version":3,"file":"textarea.types.d.ts","names":[],"sources":["../../src/textarea/textarea.types.ts"],"mappings":";;;;KAIY,aAAA,GAAgB,WAAA,GAC1B,YAAA;mCAEE,SAAA;EAEA,SAAA,WALQ;EAOR,QAAA;EAEA,WAAA,6BARF;EAUE,IAAA,WAQW;EANX,YAAA,oBAoB2B;EAlB3B,QAAA,YAoB8B;EAlB9B,SAAA,YAAqB,KAAA,CAAM,SAAA,EAoBC;EAlB5B,QAAA,GAAW,KAAA,CAAM,SAAA,WA8BmB;EA5BpC,SAAA,YA8BqC;EA5BrC,KAAA,YAAiB,KAAA,CAAM,SAAA,EA4Ba;EA1BpC,iBAAA,YAzBwB;EA2BxB,gBAAA,WAxBA;EA0BA,SAAA,WAtBA;EAwBA,IAAA,WApBA;EAsBA,MAAA,GAAS,iBAAA,CAAkB,mBAAA,GAlB3B;EAoBA,QAAA,GAAW,kBAAA,CAAmB,mBAAA,GAlBT;EAoBrB,OAAA,GAAU,iBAAA,CAAkB,mBAAA,GAlB5B;EAoBA,WAAA,WApBiB;EAsBjB,QAAA,YAlBA;EAoBA,QAAA,YApBuB;EAsBvB,IAAA,WAlBA;EAoBA,SAAA,YAhBA;EAkBA,aAAA,GAAgB,OAAA,aAAoB,WAAA,GAhB3B;EAkBT,WAAA,GAAc,KAAA,CAAM,gBAAA,CAAiB,mBAAA,iBAhBrC;EAkBA,KAAA;AAAA"}

package/dist/textarea/theme.js

@@ -39,5 +39,5 @@ var theme_default = {
 
 //#endregion
 export { theme_default as default };
-globalThis.__vuiVersion__ = "4.0.3"
+globalThis.__vuiVersion__ = "5.0.0-beta.1"
 //# sourceMappingURL=theme.js.map