@veracity/vui 3.0.0-beta.4 → 3.0.0-beta.6

package/dist/breadcrumbs/breadcrumbsSeparator.js

@@ -0,0 +1,2 @@
+import{cs as e}from"../utils/styles.js";import{useStyleConfig as t}from"../core/theme.js";import{Box as n}from"../box/box.js";import{Icon as r}from"../icon/icon.js";import{useBreadcrumbsContext as i}from"./context.js";import{jsx as a}from"react/jsx-runtime";var o=({className:o,children:s,content:c,...l})=>{let u=t(`Breadcrumbs`,i());return a(n,{alignItems:`center`,className:e(`vui-breadcrumbs-separator`,o),p:0,...l,children:c||s||a(r,{name:`uiAngleRight`,...u.separator})})};export{o as default};globalThis.__vuiVersion__=`3.0.0-beta.6`;
+//# sourceMappingURL=breadcrumbsSeparator.js.map

package/dist/breadcrumbs/breadcrumbsSeparator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumbsSeparator.js","names":[],"sources":["../../src/breadcrumbs/breadcrumbsSeparator.tsx"],"sourcesContent":["import { Box } from '../box'\nimport { useStyleConfig } from '../core'\nimport { Icon } from '../icon'\nimport { cs } from '../utils'\nimport type { BreadcrumbsSeparatorProps } from './breadcrumbs.types'\nimport { useBreadcrumbsContext } from './context'\n\n/** Breadcrumbs separator. */\nexport const BreadcrumbsSeparator = ({ className, children, content, ...rest }: BreadcrumbsSeparatorProps) => {\n  const styles = useStyleConfig('Breadcrumbs', useBreadcrumbsContext())\n\n  return (\n    <Box alignItems=\"center\" className={cs('vui-breadcrumbs-separator', className)} p={0} {...rest}>\n      {content || children || <Icon name=\"uiAngleRight\" {...styles.separator} />}\n    </Box>\n  )\n}\n\nexport default BreadcrumbsSeparator\n"],"mappings":"kQAkBA,IAAA,GAVqC,CAAE,YAAW,WAAU,UAAS,GAAG,KAAsC,CAC5G,IAAM,EAAS,EAAe,cAAe,GAAuB,CAAC,CAErE,OACE,EAAC,EAAA,CAAI,WAAW,SAAS,UAAW,EAAG,4BAA6B,EAAU,CAAE,EAAG,EAAG,GAAI,WACvF,GAAW,GAAY,EAAC,EAAA,CAAK,KAAK,eAAe,GAAI,EAAO,WAAa,EACtE"}

package/dist/breadcrumbs/context.js

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

package/dist/breadcrumbs/context.js.map

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

package/dist/breadcrumbs/theme.js

@@ -0,0 +1,2 @@
+var e={baseStyle:{},defaultProps:{size:`md`,variant:`dark`},sizes:{xs:{item:{fontSize:12,lineHeight:`18px`},separator:{size:`xs`}},sm:{item:{fontSize:14,lineHeight:`22px`},separator:{size:`sm`}},md:{item:{fontSize:16,lineHeight:`26px`},separator:{size:`md`}},lg:{item:{fontSize:18,lineHeight:`32px`},separator:{size:`lg`}}},variants:{dark:{item:{color:`seaBlue.main`},main:{bg:`transparent`},separator:{pathFill:`sandstone.10`}},white:{item:{color:`white`},main:{bg:`darkBlue.main`},separator:{pathFill:`white`}},light:{item:{color:`digiGreen.main`},main:{bg:`darkBlue.main`},separator:{pathFill:`white`}}}};export{e as default};globalThis.__vuiVersion__=`3.0.0-beta.6`;
+//# sourceMappingURL=theme.js.map

package/dist/breadcrumbs/theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.js","names":[],"sources":["../../src/breadcrumbs/theme.ts"],"sourcesContent":["const baseStyle = {}\n\nconst defaultProps = {\n  size: 'md',\n  variant: 'dark',\n}\n\nconst sizes = {\n  xs: {\n    item: {\n      fontSize: 12,\n      lineHeight: '18px',\n    },\n    separator: {\n      size: 'xs',\n    },\n  },\n  sm: {\n    item: {\n      fontSize: 14,\n      lineHeight: '22px',\n    },\n    separator: {\n      size: 'sm',\n    },\n  },\n  md: {\n    item: { fontSize: 16, lineHeight: '26px' },\n    separator: {\n      size: 'md',\n    },\n  },\n  lg: {\n    item: { fontSize: 18, lineHeight: '32px' },\n    separator: {\n      size: 'lg',\n    },\n  },\n}\n\nconst variants = {\n  dark: {\n    item: {\n      color: 'seaBlue.main',\n    },\n    main: {\n      bg: 'transparent',\n    },\n    separator: {\n      pathFill: 'sandstone.10',\n    },\n  },\n  white: {\n    item: {\n      color: 'white',\n    },\n    main: {\n      bg: 'darkBlue.main',\n    },\n    separator: {\n      pathFill: 'white',\n    },\n  },\n  light: {\n    item: {\n      color: 'digiGreen.main',\n    },\n    main: {\n      bg: 'darkBlue.main',\n    },\n    separator: {\n      pathFill: 'white',\n    },\n  },\n}\n\nexport default {\n  baseStyle,\n  defaultProps,\n  sizes,\n  variants,\n}\n"],"mappings":"AA4EA,IAAA,EAAe,CACb,UA7EgB,EAAE,CA8ElB,aA5EmB,CACnB,KAAM,KACN,QAAS,OACV,CA0EC,MAxEY,CACZ,GAAI,CACF,KAAM,CACJ,SAAU,GACV,WAAY,OACb,CACD,UAAW,CACT,KAAM,KACP,CACF,CACD,GAAI,CACF,KAAM,CACJ,SAAU,GACV,WAAY,OACb,CACD,UAAW,CACT,KAAM,KACP,CACF,CACD,GAAI,CACF,KAAM,CAAE,SAAU,GAAI,WAAY,OAAQ,CAC1C,UAAW,CACT,KAAM,KACP,CACF,CACD,GAAI,CACF,KAAM,CAAE,SAAU,GAAI,WAAY,OAAQ,CAC1C,UAAW,CACT,KAAM,KACP,CACF,CACF,CA0CC,SAxCe,CACf,KAAM,CACJ,KAAM,CACJ,MAAO,eACR,CACD,KAAM,CACJ,GAAI,cACL,CACD,UAAW,CACT,SAAU,eACX,CACF,CACD,MAAO,CACL,KAAM,CACJ,MAAO,QACR,CACD,KAAM,CACJ,GAAI,gBACL,CACD,UAAW,CACT,SAAU,QACX,CACF,CACD,MAAO,CACL,KAAM,CACJ,MAAO,iBACR,CACD,KAAM,CACJ,GAAI,gBACL,CACD,UAAW,CACT,SAAU,QACX,CACF,CACF,CAOA"}

package/dist/button/button.d.ts

@@ -0,0 +1,56 @@
+import { ThemingProps } from "../theme/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 { IconProp } from "../icon/icon.types.js";
+import { ButtonProps, ButtonState, ButtonStateMapping } from "./button.types.js";
+import { ButtonIcon } from "./buttonIcon.js";
+import { ButtonText } from "./buttonText.js";
+import { VuiComponent } from "../core/vui.js";
+import * as styled_components9 from "styled-components";
+
+//#region src/button/button.d.ts
+declare const ButtonBase: styled_components9.StyledComponent<"button", styled_components9.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<"Button"> & {
+  colorScheme?: string;
+  dropDownIcon?: IconProp;
+  icon?: IconProp | JSX.Element;
+  iconLeft?: IconProp | JSX.Element;
+  iconRight?: IconProp | JSX.Element;
+  isActive?: boolean;
+  isDropDown?: boolean;
+  isElevated?: boolean;
+  isFullWidth?: boolean;
+  isLoading?: boolean;
+  isRound?: boolean;
+  isSplit?: boolean;
+  state?: ButtonState;
+  stateMapping?: ButtonStateMapping;
+  text?: React.ReactNode;
+}, never>;
+/**
+ * Triggers given actions on click. Supports multiple states, sizes and variants.
+ *
+ * Comes with additional props for extra behavior, like loading, disabled or elevated.
+ *
+ * Exposes some props to the children via context.
+ */
+declare const Button: VuiComponent<"button", ButtonProps> & {
+  Icon: typeof ButtonIcon;
+  Text: typeof ButtonText;
+};
+//#endregion
+export { Button, ButtonBase };
+//# sourceMappingURL=button.d.ts.map

package/dist/button/button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","names":[],"sources":["../../src/button/button.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;cAiCa,+BAAU,0BAuBtB,kBAAA,CAvBsB,YAAA;;;;;;;;;;;;;;;;;;;;;AAAvB;;;cAkLa,QA6JP,uBAAuB;eACd;eACA"}

package/dist/button/button.js

@@ -0,0 +1,34 @@
+import{isReactText as e,isString as t}from"../utils/assertion.js";import{activeClassName as n}from"../utils/consts.js";import{filterUndefined as r}from"../utils/object.js";import{cs as i}from"../utils/styles.js";import{useStyleConfig as a}from"../core/theme.js";import{styled as o}from"../core/styled.js";import{vui as s}from"../core/vui.js";import{useButtonGroupContext as c}from"../buttonGroup/context.js";import{ButtonProvider as l}from"./context.js";import u from"./buttonIcon.js";import d from"./buttonText.js";import{buttonStateMapping as f,loadingIconProps as ee}from"./consts.js";import{Fragment as p,useCallback as te,useMemo as m}from"react";import{Fragment as ne,jsx as h,jsxs as g}from"react/jsx-runtime";const _=o.span`
+  visibility: hidden;
+`,v=o.span`
+  bottom: 0;
+  display: flex;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+`,y=o.buttonBox`
+  align-items: center;
+  display: inline-flex;
+  flex-shrink: 0;
+  font-weight: medium;
+  justify-content: center;
+  line-height: normal;
+  overflow: hidden;
+  position: relative;
+  transition-duration: fast;
+  user-select: none;
+  width: fit-content;
+
+  &.vui-button-variant-menuLight.vui-button-variant-menuLight.vui-active:hover {
+    background-color: #d3eef8;
+    color: #003591;
+    border-color-left: #003591;
+  }
+  &.vui-button-variant-menuDark.vui-button-variant-menuDark.vui-active:hover {
+    background-color: #003591;
+    color: #91ffba;
+    border-color-left: #91ffba;
+  }
+`,re=(e,t)=>{let n=a(`Button`,{...e,...t})||{};return m(()=>{let{borderWidth:e=1,h:t=32,spaceX:r=0,...i}=n.container||{};return{styles:n,borderWidth:e,h:t,spaceX:r,buttonStyles:i}},[e,t])},b=e=>{if(typeof e==`number`)return e;if(typeof e==`string`){let t=parseInt(e,10);return isNaN(t)?1:t}return 1},ie=(e,t,n,r,i,a,o,s)=>m(()=>{let c=b(e)||t||1,l=n-c,u=n*2-c;return{border:c,iconLeftMr:`${l+1}px`,iconRightMl:s?`auto`:`${l+1}px`,pl:`${r||i||o?l:u}px`,pr:`${r||a?l:u}px`}},[e,t,n,r,i,a,o,s]),ae=(e,t)=>m(()=>e?{"aria-disabled":e,disabledBg:t?.container?.disabledBg??`bg`,disabledBorderColor:t?.container?.disabledBorderColor??`borderColor`,disabledColor:t?.container?.disabledColor??`color`,hoverBg:t?.container?.disabledBg??`bg`,hoverBorderColor:t?.container?.disabledBorderColor??`borderColor`,hoverColor:t?.container?.disabledColor??`color`,activeBg:t?.container?.disabledBg??`bg`,cursor:`not-allowed`,opacity:t?.container?.disabledOpacity??.5}:{},[e,t?.container]),oe=(e,t)=>m(()=>e?r({bg:t?.container?.activeBg,borderBg:t?.container?.activeBorderBg,color:t?.container?.activeColor}):{},[e,t?.container]),se=(e,t,n,i,a,o,s)=>m(()=>r({borderRadius:e?t/2:n?.container?.borderRadius||0,boxShadow:i?`2`:void 0,minW:a?0:void 0,pointerEvents:o?`none`:void 0,w:s?`100%`:void 0}),[e,t,n?.container?.borderRadius,i,a,o,s]),x=(e,t,r)=>m(()=>i(`vui-button`,e,t&&n,r?`vui-button-variant-${r}`:void 0),[e,t,r]),S=(n,r,i,a,o,s,c,l)=>m(()=>({main:t(n)?h(u,{name:n}):n,left:a?h(u,{mr:o.iconLeftMr,...ee}):t(r)?h(u,{mr:o.iconLeftMr,name:r}):r,right:t(i)?h(u,{ml:!s&&!c?0:o.iconRightMl,name:i}):i,content:s??(e(c)?h(d,{isTruncated:l,text:c}):c)}),[n,r,i,a,o,s,c,l]),C=s((e,t)=>{let n={...c(),...e},{borderWidth:i,children:a,className:o,colorScheme:s,disabled:d,dropDownIcon:ee=`falAngleDown`,icon:b,iconLeft:C,iconRight:w,isActive:T,isDropDown:E,isElevated:ce,isFullWidth:D,isLoading:O,isRound:k,isSplit:le,isTruncated:ue,size:A,state:j=``,stateMapping:M,text:N,title:P,variant:F,...I}=n,L=m(()=>!!j&&j!==`idle`,[j]),R=m(()=>({...f,...M}),[M]),z=m(()=>R[j]??{},[R,j]),{iconProps:B,...V}=z,H=m(()=>E?`falAngleDown`:w,[E,w]),U=m(()=>r({variant:z?.variant??F}),[z?.variant,F]),{styles:W,borderWidth:de,h:G,spaceX:fe,buttonStyles:K}=re(n,U),q=ie(i,de,fe,b,C,H,O??!1,le??!1),J=ae(d??!1,W),Y=oe(T??!1,W),X=se(k??!1,G,W,ce??!1,b,L,D??!1),Z=x(o,T??!1,F),Q=S(b,C,H,O??!1,q,a,N,ue??!1),pe=m(()=>r({disabled:d,size:A,variant:U.variant}),[d,A,U.variant]),me=m(()=>L?_:p,[L]),$=m(()=>P||``,[P]),he=te(e=>{e.stopPropagation()},[]),ge=m(()=>({borderWidth:q.border,className:Z,disabled:d,focusRing:3,h:G,pl:q.pl,pr:q.pr,ref:t,title:P||$,type:`button`,variant:U,...K,...Y,...J,...X,...I}),[q,Z,d,G,t,P,$,U,K,Y,J,X,I]);return h(l,{value:pe,children:g(y,{...ge,children:[L&&h(v,{onClick:he,...V,children:h(u,{m:`auto`,...B})}),g(me,{children:[Q.main,!b&&g(ne,{children:[Q.left,Q.content,Q.right]})]})]})})});C.Icon=u,C.Text=d,C.displayName=`Button`;var w=C;export{C as Button,y as ButtonBase,w as default};globalThis.__vuiVersion__=`3.0.0-beta.6`;
+//# sourceMappingURL=button.js.map

package/dist/button/button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.js","names":["ButtonIcon","ButtonText"],"sources":["../../src/button/button.tsx"],"sourcesContent":["import { Fragment, useMemo, useCallback } from 'react'\n\nimport { useButtonGroupContext } from '../buttonGroup/context'\nimport type { VuiComponent } from '../core'\nimport { styled, useStyleConfig, vui } from '../core'\nimport { activeClassName, cs, filterUndefined, isReactText, isString } from '../utils'\nimport type { ButtonProps } from './button.types'\nimport ButtonIcon from './buttonIcon'\nimport ButtonText from './buttonText'\nimport { buttonStateMapping, loadingIconProps } from './consts'\nimport { ButtonProvider } from './context'\n\n// Constants\nconst DEFAULT_BORDER_WIDTH = 1\nconst DEFAULT_BOX_SHADOW = '2'\nconst DEFAULT_DISABLED_OPACITY = 0.5\nconst BUTTON_TYPE = 'button'\nconst FOCUS_RING_SIZE = 3\n\n// Memoized styled components\nconst ContentWrapper = styled.span`\n  visibility: hidden;\n`\n\nconst StateWrapper = styled.span`\n  bottom: 0;\n  display: flex;\n  left: 0;\n  position: absolute;\n  right: 0;\n  top: 0;\n`\n\nexport const ButtonBase = styled.buttonBox<ButtonProps>`\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  overflow: hidden;\n  position: relative;\n  transition-duration: fast;\n  user-select: none;\n  width: fit-content;\n\n  &.vui-button-variant-menuLight.vui-button-variant-menuLight.vui-active:hover {\n    background-color: #d3eef8;\n    color: #003591;\n    border-color-left: #003591;\n  }\n  &.vui-button-variant-menuDark.vui-button-variant-menuDark.vui-active:hover {\n    background-color: #003591;\n    color: #91ffba;\n    border-color-left: #91ffba;\n  }\n`\n\nconst useButtonStyles = (mergedProps: any, variant: any) => {\n  const styles = useStyleConfig('Button', { ...mergedProps, ...variant }) || {}\n\n  return useMemo(() => {\n    const container = styles.container || {}\n    const { borderWidth = DEFAULT_BORDER_WIDTH, h = 32, spaceX = 0, ...buttonStyles } = container\n    return { styles, borderWidth, h, spaceX, buttonStyles }\n  }, [mergedProps, variant])\n}\n\n// Utility function to extract numeric value from responsive or themed props\nconst extractNumericValue = (value: any): number => {\n  if (typeof value === 'number') return value\n  if (typeof value === 'string') {\n    const parsed = parseInt(value, 10)\n    return isNaN(parsed) ? DEFAULT_BORDER_WIDTH : parsed\n  }\n  return DEFAULT_BORDER_WIDTH\n}\n\nconst useSpacingProps = (\n  borderWidthProp: any,\n  borderWidth: number | undefined,\n  spaceX: number,\n  icon: any,\n  iconLeft: any,\n  iconRight: any,\n  isLoading: boolean,\n  isSplit: boolean,\n) => {\n  return useMemo(() => {\n    const border = extractNumericValue(borderWidthProp) || borderWidth || DEFAULT_BORDER_WIDTH\n    const spaceXItem = spaceX - border\n    const spaceXText = spaceX * 2 - border\n\n    return {\n      border,\n      iconLeftMr: `${spaceXItem + 1}px`,\n      iconRightMl: isSplit ? 'auto' : `${spaceXItem + 1}px`,\n      pl: `${icon || iconLeft || isLoading ? spaceXItem : spaceXText}px`,\n      pr: `${icon || iconRight ? spaceXItem : spaceXText}px`,\n    }\n  }, [borderWidthProp, borderWidth, spaceX, icon, iconLeft, iconRight, isLoading, isSplit])\n}\n\nconst useDisabledProps = (disabled: boolean, styles: any) => {\n  return useMemo(\n    () =>\n      disabled\n        ? {\n            'aria-disabled': disabled,\n            disabledBg: styles?.container?.disabledBg ?? 'bg',\n            disabledBorderColor: styles?.container?.disabledBorderColor ?? 'borderColor',\n            disabledColor: styles?.container?.disabledColor ?? 'color',\n            hoverBg: styles?.container?.disabledBg ?? 'bg',\n            hoverBorderColor: styles?.container?.disabledBorderColor ?? 'borderColor',\n            hoverColor: styles?.container?.disabledColor ?? 'color',\n            activeBg: styles?.container?.disabledBg ?? 'bg',\n            cursor: 'not-allowed',\n            opacity: styles?.container?.disabledOpacity ?? DEFAULT_DISABLED_OPACITY,\n          }\n        : {},\n    [disabled, styles?.container],\n  )\n}\n\nconst useActiveProps = (isActive: boolean, styles: any) => {\n  return useMemo(\n    () =>\n      isActive\n        ? filterUndefined({\n            bg: styles?.container?.activeBg,\n            borderBg: styles?.container?.activeBorderBg,\n            color: styles?.container?.activeColor,\n          })\n        : {},\n    [isActive, styles?.container],\n  )\n}\n\nconst useAliasedProps = (\n  isRound: boolean,\n  h: number,\n  styles: any,\n  isElevated: boolean,\n  icon: any,\n  hasState: boolean,\n  isFullWidth: boolean,\n) => {\n  return useMemo(\n    () =>\n      filterUndefined({\n        borderRadius: isRound ? h / 2 : styles?.container?.borderRadius || 0,\n        boxShadow: isElevated ? DEFAULT_BOX_SHADOW : undefined,\n        minW: icon ? 0 : undefined,\n        pointerEvents: hasState ? 'none' : undefined,\n        w: isFullWidth ? '100%' : undefined,\n      }),\n    [isRound, h, styles?.container?.borderRadius, isElevated, icon, hasState, isFullWidth],\n  )\n}\n\nconst useButtonClassName = (className: string | undefined, isActive: boolean, variantProp: string | undefined) => {\n  return useMemo(\n    () =>\n      cs(\n        'vui-button',\n        className,\n        isActive && activeClassName,\n        variantProp ? `vui-button-variant-${variantProp}` : undefined,\n      ),\n    [className, isActive, variantProp],\n  )\n}\n\nconst useIconRenderer = (\n  icon: any,\n  iconLeft: any,\n  iconRight: any,\n  isLoading: boolean,\n  spacingProps: any,\n  children: any,\n  text: any,\n  isTruncated: boolean,\n) => {\n  return useMemo(\n    () => ({\n      main: isString(icon) ? <ButtonIcon name={icon} /> : icon,\n      left: isLoading ? (\n        <ButtonIcon mr={spacingProps.iconLeftMr} {...loadingIconProps} />\n      ) : isString(iconLeft) ? (\n        <ButtonIcon mr={spacingProps.iconLeftMr} name={iconLeft} />\n      ) : (\n        iconLeft\n      ),\n      right: isString(iconRight) ? (\n        <ButtonIcon ml={!children && !text ? 0 : spacingProps.iconRightMl} name={iconRight} />\n      ) : (\n        iconRight\n      ),\n      content: children ?? (isReactText(text) ? <ButtonText {...{ isTruncated, text }} /> : text),\n    }),\n    [icon, iconLeft, iconRight, isLoading, spacingProps, children, text, isTruncated],\n  )\n}\n\n/**\n * Triggers given actions on click. Supports multiple states, sizes and variants.\n *\n * Comes with additional props for extra behavior, like loading, disabled or elevated.\n *\n * Exposes some props to the children via context.\n */\nexport const Button = vui<'button', ButtonProps>((props, ref) => {\n  const buttonGroupProps = useButtonGroupContext()\n  const mergedProps = { ...buttonGroupProps, ...props }\n  const {\n    borderWidth: borderWidthProp,\n    children,\n    className,\n    colorScheme,\n    disabled,\n    dropDownIcon = 'falAngleDown',\n    icon,\n    iconLeft,\n    iconRight: iconRightProp,\n    isActive,\n    isDropDown,\n    isElevated,\n    isFullWidth,\n    isLoading,\n    isRound,\n    isSplit,\n    isTruncated,\n    size,\n    state = '',\n    stateMapping,\n    text,\n    title,\n    variant: variantProp,\n    ...rest\n  } = mergedProps\n\n  // Memoized calculations\n  const hasState = useMemo(() => Boolean(state) && state !== 'idle', [state])\n  const states = useMemo(() => ({ ...buttonStateMapping, ...stateMapping }), [stateMapping])\n  const stateData = useMemo(() => states[state] ?? {}, [states, state])\n  const { iconProps: stateIconProps, ...stateProps } = stateData\n\n  const iconRight = useMemo(() => (isDropDown ? 'falAngleDown' : iconRightProp), [isDropDown, iconRightProp])\n\n  const variant = useMemo(\n    () =>\n      filterUndefined({\n        variant: stateData?.variant ?? variantProp,\n      }),\n    [stateData?.variant, variantProp],\n  )\n\n  // Custom hooks for optimization\n  const { styles, borderWidth, h, spaceX, buttonStyles } = useButtonStyles(mergedProps, variant)\n  const spacingProps = useSpacingProps(\n    borderWidthProp,\n    borderWidth,\n    spaceX,\n    icon,\n    iconLeft,\n    iconRight,\n    isLoading ?? false,\n    isSplit ?? false,\n  )\n  const disabledProps = useDisabledProps(disabled ?? false, styles)\n  const isActiveProps = useActiveProps(isActive ?? false, styles)\n  const aliasedProps = useAliasedProps(\n    isRound ?? false,\n    h,\n    styles,\n    isElevated ?? false,\n    icon,\n    hasState,\n    isFullWidth ?? false,\n  )\n  const buttonClassName = useButtonClassName(className, isActive ?? false, variantProp)\n  const IconRenderer = useIconRenderer(\n    icon,\n    iconLeft,\n    iconRight,\n    isLoading ?? false,\n    spacingProps,\n    children,\n    text,\n    isTruncated ?? false,\n  )\n\n  // Memoized context value\n  const contextValue = useMemo(\n    () => filterUndefined({ disabled, size, variant: variant.variant }),\n    [disabled, size, variant.variant],\n  )\n\n  // Memoized content wrapper\n  const Content = useMemo(() => (hasState ? ContentWrapper : Fragment), [hasState])\n\n  // Memoized aria label\n  const ariaLabel = useMemo(() => title || '', [title])\n\n  // Optimized event handler\n  const handleStateClick = useCallback((e: { stopPropagation: () => void }) => {\n    e.stopPropagation()\n  }, [])\n\n  // Memoized final props\n  const finalProps = useMemo(\n    () => ({\n      borderWidth: spacingProps.border,\n      className: buttonClassName,\n      disabled,\n      focusRing: FOCUS_RING_SIZE,\n      h,\n      pl: spacingProps.pl,\n      pr: spacingProps.pr,\n      ref,\n      title: title || ariaLabel,\n      type: BUTTON_TYPE,\n      variant,\n      ...buttonStyles,\n      ...isActiveProps,\n      ...disabledProps,\n      ...aliasedProps,\n      ...rest,\n    }),\n    [\n      spacingProps,\n      buttonClassName,\n      disabled,\n      h,\n      ref,\n      title,\n      ariaLabel,\n      variant,\n      buttonStyles,\n      isActiveProps,\n      disabledProps,\n      aliasedProps,\n      rest,\n    ],\n  )\n\n  return (\n    <ButtonProvider value={contextValue}>\n      <ButtonBase {...finalProps}>\n        {hasState && (\n          <StateWrapper onClick={handleStateClick} {...stateProps}>\n            <ButtonIcon m=\"auto\" {...stateIconProps} />\n          </StateWrapper>\n        )}\n\n        <Content>\n          {IconRenderer.main}\n          {!icon && (\n            <>\n              {IconRenderer.left}\n              {IconRenderer.content}\n              {IconRenderer.right}\n            </>\n          )}\n        </Content>\n      </ButtonBase>\n    </ButtonProvider>\n  )\n}) as VuiComponent<'button', ButtonProps> & {\n  Icon: typeof ButtonIcon\n  Text: typeof ButtonText\n}\n\nButton.Icon = ButtonIcon\nButton.Text = ButtonText\nButton.displayName = 'Button'\n\nexport default Button\n"],"mappings":"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"}

package/dist/button/button.types.d.ts

@@ -0,0 +1,48 @@
+import { AnyString } from "../utils/types.js";
+import { ThemingProps } from "../theme/types.js";
+import { SystemProps } from "../system/system.js";
+import { IconProp, IconProps } from "../icon/icon.types.js";
+
+//#region src/button/button.types.d.ts
+type ButtonProps = SystemProps & ThemingProps<'Button'> & {
+  /** Deprecated. Please use variant instead. @deprecated  */
+  colorScheme?: string;
+  /** Icon for the drop-down element. @default falAngleDown */
+  dropDownIcon?: IconProp;
+  /** 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;
+  /** Adds an active class name for further handling. */
+  isActive?: boolean;
+  /** Adds an drop down pointer to the left. */
+  isDropDown?: boolean;
+  /** Adds box shadow style. @default false */
+  isElevated?: boolean;
+  /** Makes the button take full width of the container. @deprecated */
+  isFullWidth?: boolean;
+  /** Replaces content with a loading spinner. @default false */
+  isLoading?: boolean;
+  /** Rounds the borders. @default false */
+  isRound?: boolean;
+  /** Separates right icon from the content. @deprecated */
+  isSplit?: boolean;
+  /** Modifies Button style and content based on the given state. */
+  state?: ButtonState;
+  /** Object definition of styles and content for each state. */
+  stateMapping?: ButtonStateMapping;
+  /** Socket placing text as alternative to children. */
+  text?: React.ReactNode;
+};
+type ButtonState = 'error' | 'idle' | 'loading' | 'success' | AnyString;
+type ButtonStateMapping = Record<string, SystemProps & {
+  variant: ButtonProps['variant'];
+  iconProps: IconProps;
+}>;
+/** Narrower prop definition for IconButton component */
+type IconButtonProps = Omit<ButtonProps, 'iconLeft' | 'iconRight' | 'text'>;
+//#endregion
+export { ButtonProps, ButtonState, ButtonStateMapping, IconButtonProps };
+//# sourceMappingURL=button.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"button.types.d.ts","names":[],"sources":["../../src/button/button.types.ts"],"sourcesContent":[],"mappings":";;;;;;KAKY,WAAA,GAAc,cACxB;;EADU,WAAA,CAAA,EAAW,MAAA;EAAA;cAAG,CAAA,EAKP,QALO;;MAKP,CAAA,EAER,QAFQ,GAEG,GAAA,CAAI,OAFP;;UAEO,CAAA,EAEX,QAFW,GAEA,GAAA,CAAI,OAFJ;;WAEI,CAAA,EAEd,QAFc,GAEH,GAAA,CAAI,OAFD;;UAEC,CAAA,EAAA,OAAA;;YAkBZ,CAAA,EAAA,OAAA;;EAEO,UAAA,CAAA,EAAA,OAAA;EAGd;EAEA,WAAA,CAAA,EAAA,OAAkB;EAAA;WAAkB,CAAA,EAAA,OAAA;;SAA4D,CAAA,EAAA,OAAA;;EAArE,OAAA,CAAA,EAAA,OAAA;EAG3B;EAAe,KAAA,CAAA,EAZf,WAYe;;cAAG,CAAA,EAVX,kBAUW;EAAI;SARvB,KAAA,CAAM;;KAGL,WAAA,8CAAyD;KAEzD,kBAAA,GAAqB,eAAe;WAAyB;aAAmC;;;KAGhG,eAAA,GAAkB,KAAK"}

package/dist/button/buttonIcon.d.ts

@@ -0,0 +1,9 @@
+import { IconProps } from "../icon/icon.types.js";
+import { VuiComponent } from "../core/vui.js";
+
+//#region src/button/buttonIcon.d.ts
+/** Displays an icon within the Button. */
+declare const ButtonIcon: VuiComponent<"svg", IconProps>;
+//#endregion
+export { ButtonIcon };
+//# sourceMappingURL=buttonIcon.d.ts.map

package/dist/button/buttonIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"buttonIcon.d.ts","names":[],"sources":["../../src/button/buttonIcon.tsx"],"sourcesContent":[],"mappings":";;;;;cASa,gCAAU"}

package/dist/button/buttonIcon.js

@@ -0,0 +1,2 @@
+import{cs as e}from"../utils/styles.js";import{useStyleConfig as t}from"../core/theme.js";import{vui as n}from"../core/vui.js";import r from"../icon/icon.js";import{useButtonContext as i}from"./context.js";import{jsx as a}from"react/jsx-runtime";const o=e=>e?.startsWith(`con`),s=n((n,s)=>{let{className:c,name:l,...u}=n,d=t(`Button`,i()),f=o(l)?void 0:l;return a(r,{className:e(`vui-buttonIcon`,c),name:f,ref:s,...d.icon,...u})});s.displayName=`ButtonIcon`;var c=s;export{s as ButtonIcon,c as default};globalThis.__vuiVersion__=`3.0.0-beta.6`;
+//# sourceMappingURL=buttonIcon.js.map

package/dist/button/buttonIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"buttonIcon.js","names":["Icon"],"sources":["../../src/button/buttonIcon.tsx"],"sourcesContent":["import { useStyleConfig, vui } from '../core'\nimport type { IconProp, IconProps } from '../icon'\nimport Icon from '../icon'\nimport { cs } from '../utils'\nimport { useButtonContext } from './context'\n\nconst isConceptualIcon = (name?: IconProp) => name?.startsWith('con')\n\n/** Displays an icon within the Button. */\nexport const ButtonIcon = vui<'svg', IconProps>((props, ref) => {\n  const { className, name, ...rest } = props\n  const styles = useStyleConfig('Button', useButtonContext())\n  const verifiedName = isConceptualIcon(name) ? undefined : name\n\n  return <Icon className={cs('vui-buttonIcon', className)} name={verifiedName} ref={ref} {...styles.icon} {...rest} />\n})\n\nButtonIcon.displayName = 'ButtonIcon'\nexport default ButtonIcon\n"],"mappings":"sPAMA,MAAM,EAAoB,GAAoB,GAAM,WAAW,MAAM,CAGxD,EAAa,GAAuB,EAAO,IAAQ,CAC9D,GAAM,CAAE,YAAW,OAAM,GAAG,GAAS,EAC/B,EAAS,EAAe,SAAU,GAAkB,CAAC,CACrD,EAAe,EAAiB,EAAK,CAAG,IAAA,GAAY,EAE1D,OAAO,EAACA,EAAAA,CAAK,UAAW,EAAG,iBAAkB,EAAU,CAAE,KAAM,EAAmB,MAAK,GAAI,EAAO,KAAM,GAAI,GAAQ,EACpH,CAEF,EAAW,YAAc,aACzB,IAAA,EAAe"}

package/dist/button/buttonText.d.ts

@@ -0,0 +1,9 @@
+import { TProps } from "../t/t.types.js";
+import { VuiComponent } from "../core/vui.js";
+
+//#region src/button/buttonText.d.ts
+/** Displays the text label of the button. */
+declare const ButtonText: VuiComponent<"span", TProps>;
+//#endregion
+export { ButtonText };
+//# sourceMappingURL=buttonText.d.ts.map

package/dist/button/buttonText.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"buttonText.d.ts","names":[],"sources":["../../src/button/buttonText.tsx"],"sourcesContent":[],"mappings":";;;;;cAOa,iCAAU"}

package/dist/button/buttonText.js

@@ -0,0 +1,2 @@
+import{cs as e}from"../utils/styles.js";import{useStyleConfig as t}from"../core/theme.js";import{vui as n}from"../core/vui.js";import{useButtonContext as r}from"./context.js";import i from"../t/t.js";import{jsx as a}from"react/jsx-runtime";const o=n((n,o)=>{let{className:s,...c}=n,l=t(`Button`,r());return a(i,{className:e(`vui-buttonText`,s),fontSize:`inherit`,ref:o,...l.text,...c})});o.displayName=`ButtonText`;var s=o;export{o as ButtonText,s as default};globalThis.__vuiVersion__=`3.0.0-beta.6`;
+//# sourceMappingURL=buttonText.js.map

package/dist/button/buttonText.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"buttonText.js","names":["T"],"sources":["../../src/button/buttonText.tsx"],"sourcesContent":["import { useStyleConfig, vui } from '../core'\nimport type { TProps } from '../t'\nimport T from '../t'\nimport { cs } from '../utils'\nimport { useButtonContext } from './context'\n\n/** Displays the text label of the button. */\nexport const ButtonText = vui<'span', TProps>((props, ref) => {\n  const { className, ...rest } = props\n  const styles = useStyleConfig('Button', useButtonContext())\n\n  return <T className={cs('vui-buttonText', className)} fontSize=\"inherit\" ref={ref} {...styles.text} {...rest} />\n})\n\nButtonText.displayName = 'ButtonText'\n\nexport default ButtonText\n"],"mappings":"gPAOA,MAAa,EAAa,GAAqB,EAAO,IAAQ,CAC5D,GAAM,CAAE,YAAW,GAAG,GAAS,EACzB,EAAS,EAAe,SAAU,GAAkB,CAAC,CAE3D,OAAO,EAACA,EAAAA,CAAE,UAAW,EAAG,iBAAkB,EAAU,CAAE,SAAS,UAAe,MAAK,GAAI,EAAO,KAAM,GAAI,GAAQ,EAChH,CAEF,EAAW,YAAc,aAEzB,IAAA,EAAe"}

package/dist/button/buttons.d.ts

@@ -0,0 +1,15 @@
+import { ButtonProps, IconButtonProps } from "./button.types.js";
+import { VuiComponent } from "../core/vui.js";
+
+//#region src/button/buttons.d.ts
+declare const AppButton: VuiComponent<"button", ButtonProps>;
+declare const BackButton: VuiComponent<"button", IconButtonProps>;
+declare const CloseButton: VuiComponent<"button", IconButtonProps>;
+declare const CTAButton: VuiComponent<"button", ButtonProps>;
+declare const DangerButton: VuiComponent<"button", ButtonProps>;
+declare const IconButton: VuiComponent<"button", IconButtonProps>;
+declare const LineButton: VuiComponent<"button", ButtonProps>;
+declare const TextButton: VuiComponent<"button", ButtonProps>;
+//#endregion
+export { AppButton, BackButton, CTAButton, CloseButton, DangerButton, IconButton, LineButton, TextButton };
+//# sourceMappingURL=buttons.d.ts.map

package/dist/button/buttons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"buttons.d.ts","names":[],"sources":["../../src/button/buttons.tsx"],"sourcesContent":[],"mappings":";;;;cAIa,kCAAS;cAIT,mCAAU;cAIV,oCAAW;AARX,cAYA,SAVX,cAAA,CAAA,QAAA,EAUoB,WAVpB,CAAA;AAAA,cAcW,YAdX,cAAA,CAAA,QAAA,EAcuB,WAdvB,CAAA;AAFoB,cAoBT,UApBS,cAAA,CAAA,QAAA,EAoBC,eApBD,CAAA;cAwBT,mCAAU;AAxBD,cA4BT,UA5BS,cAAA,CAAA,QAAA,EA4BC,WA5BD,CAAA"}

package/dist/button/buttons.js

@@ -0,0 +1,2 @@
+import{vui as e}from"../core/vui.js";import t from"./button.js";import{jsx as n}from"react/jsx-runtime";const r=e((e,r)=>n(t,{ref:r,variant:`primaryDark`,...e})),i=e((e,t)=>n(c,{icon:`uiArrowLeft`,ref:t,variant:`tertiaryDark`,...e})),a=e((e,t)=>n(c,{icon:`uiTimes`,ref:t,variant:`tertiaryDark`,...e})),o=e((e,r)=>n(t,{ref:r,variant:`solidGreen`,...e})),s=e((e,r)=>n(t,{ref:r,variant:`solidRed`,...e})),c=e((e,r)=>n(t,{ref:r,variant:`tertiaryDark`,...e})),l=e((e,r)=>n(t,{ref:r,variant:`secondaryDark`,...e})),u=e((e,r)=>n(t,{ref:r,variant:`tertiaryDark`,...e}));export{r as AppButton,i as BackButton,o as CTAButton,a as CloseButton,s as DangerButton,c as IconButton,l as LineButton,u as TextButton};globalThis.__vuiVersion__=`3.0.0-beta.6`;
+//# sourceMappingURL=buttons.js.map

package/dist/button/buttons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"buttons.js","names":["Button"],"sources":["../../src/button/buttons.tsx"],"sourcesContent":["import { vui } from '../core'\nimport Button from './button'\nimport type { ButtonProps, IconButtonProps } from './button.types'\n\nexport const AppButton = vui<'button', ButtonProps>((props, ref) => (\n  <Button ref={ref} variant=\"primaryDark\" {...props} />\n))\n\nexport const BackButton = vui<'button', IconButtonProps>((props, ref) => (\n  <IconButton icon=\"uiArrowLeft\" ref={ref} variant=\"tertiaryDark\" {...props} />\n))\n\nexport const CloseButton = vui<'button', IconButtonProps>((props, ref) => (\n  <IconButton icon=\"uiTimes\" ref={ref} variant=\"tertiaryDark\" {...props} />\n))\n\nexport const CTAButton = vui<'button', ButtonProps>((props, ref) => (\n  <Button ref={ref} variant=\"solidGreen\" {...props} />\n))\n\nexport const DangerButton = vui<'button', ButtonProps>((props, ref) => (\n  <Button ref={ref} variant=\"solidRed\" {...props} />\n))\n\nexport const IconButton = vui<'button', IconButtonProps>((props, ref) => (\n  <Button ref={ref} variant=\"tertiaryDark\" {...props} />\n))\n\nexport const LineButton = vui<'button', ButtonProps>((props, ref) => (\n  <Button ref={ref} variant=\"secondaryDark\" {...props} />\n))\n\nexport const TextButton = vui<'button', ButtonProps>((props, ref) => (\n  <Button ref={ref} variant=\"tertiaryDark\" {...props} />\n))\n"],"mappings":"wGAIA,MAAa,EAAY,GAA4B,EAAO,IAC1D,EAACA,EAAAA,CAAY,MAAK,QAAQ,cAAc,GAAI,GAAS,CACrD,CAEW,EAAa,GAAgC,EAAO,IAC/D,EAAC,EAAA,CAAW,KAAK,cAAmB,MAAK,QAAQ,eAAe,GAAI,GAAS,CAC7E,CAEW,EAAc,GAAgC,EAAO,IAChE,EAAC,EAAA,CAAW,KAAK,UAAe,MAAK,QAAQ,eAAe,GAAI,GAAS,CACzE,CAEW,EAAY,GAA4B,EAAO,IAC1D,EAACA,EAAAA,CAAY,MAAK,QAAQ,aAAa,GAAI,GAAS,CACpD,CAEW,EAAe,GAA4B,EAAO,IAC7D,EAACA,EAAAA,CAAY,MAAK,QAAQ,WAAW,GAAI,GAAS,CAClD,CAEW,EAAa,GAAgC,EAAO,IAC/D,EAACA,EAAAA,CAAY,MAAK,QAAQ,eAAe,GAAI,GAAS,CACtD,CAEW,EAAa,GAA4B,EAAO,IAC3D,EAACA,EAAAA,CAAY,MAAK,QAAQ,gBAAgB,GAAI,GAAS,CACvD,CAEW,EAAa,GAA4B,EAAO,IAC3D,EAACA,EAAAA,CAAY,MAAK,QAAQ,eAAe,GAAI,GAAS,CACtD"}

package/dist/button/consts.js

@@ -0,0 +1,2 @@
+const e={animation:`vui-spin 0.6s linear infinite`,name:`fadSpinnerThird`,pathFill:[``,`transparent`]},t={error:{variant:`solidRed`,iconProps:{animation:`fadeDown`,icon:`uiTimesCircle`}},loading:{variant:`primaryDark`,iconProps:e},success:{variant:`solidGreen`,iconProps:{animation:`fadeDown`,icon:`uiCheckCircle`}}};export{t as buttonStateMapping,e as loadingIconProps};globalThis.__vuiVersion__=`3.0.0-beta.6`;
+//# sourceMappingURL=consts.js.map

package/dist/button/consts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"consts.js","names":["buttonStateMapping: ButtonStateMapping"],"sources":["../../src/button/consts.ts"],"sourcesContent":["import type { ButtonStateMapping } from './button.types'\n\nexport const loadingIconProps = {\n  animation: 'vui-spin 0.6s linear infinite',\n  name: 'fadSpinnerThird',\n  pathFill: ['', 'transparent'],\n}\n\nexport const buttonStateMapping: ButtonStateMapping = {\n  error: {\n    variant: 'solidRed',\n    iconProps: {\n      animation: 'fadeDown',\n      icon: 'uiTimesCircle',\n    },\n  },\n  loading: {\n    variant: 'primaryDark',\n    iconProps: loadingIconProps,\n  },\n  success: {\n    variant: 'solidGreen',\n    iconProps: {\n      animation: 'fadeDown',\n      icon: 'uiCheckCircle',\n    },\n  },\n}\n"],"mappings":"AAEA,MAAa,EAAmB,CAC9B,UAAW,gCACX,KAAM,kBACN,SAAU,CAAC,GAAI,cAAc,CAC9B,CAEYA,EAAyC,CACpD,MAAO,CACL,QAAS,WACT,UAAW,CACT,UAAW,WACX,KAAM,gBACP,CACF,CACD,QAAS,CACP,QAAS,cACT,UAAW,EACZ,CACD,QAAS,CACP,QAAS,aACT,UAAW,CACT,UAAW,WACX,KAAM,gBACP,CACF,CACF"}

package/dist/button/context.d.ts

@@ -0,0 +1,8 @@
+import { Dict } from "../utils/types.js";
+import * as react0 from "react";
+
+//#region src/button/context.d.ts
+declare const ButtonProvider: react0.Provider<Dict>, useButtonContext: () => Dict;
+//#endregion
+export { ButtonProvider, useButtonContext };
+//# sourceMappingURL=context.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","names":[],"sources":["../../src/button/context.ts"],"sourcesContent":[],"mappings":";;;;cAGO,gBAAc,MAAA,CAAA,SAAA,OAAE,wBAAgB"}

package/dist/button/context.js

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

package/dist/button/context.js.map

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

package/dist/button/theme.js

@@ -0,0 +1,2 @@
+const e={},t={size:`lg`,variant:`primaryDark`,fontWeight:`medium`},n=[`container`,`icon`,`text`],r={sm:{container:{fontSize:`xs`,h:24,minW:48,spaceX:4},icon:{size:`xs`},text:{}},md:{container:{fontSize:`sm`,h:32,minW:64,spaceX:6},icon:{size:`sm`},text:{}},lg:{container:{fontSize:`md`,h:40,minW:80,spaceX:8},icon:{size:`md`},text:{}},xl:{container:{fontSize:`lg`,h:48,minW:96,spaceX:10},icon:{size:`lg`},text:{}}},i={primaryDark:{container:{bg:`buttonTypePrimaryDefaultBackgroundColorDark`,borderColor:`buttonTypePrimaryDefaultBorderColorDark`,color:`buttonTypePrimaryDefaultTextColorDark`,hoverBg:`buttonTypePrimaryHoverBackgroundColorDark`,hoverBorderColor:`buttonTypePrimaryHoverBorderColorDark`,hoverColor:`buttonTypePrimaryHoverTextColorDark`,activeBg:`buttonTypePrimaryActiveBackgroundColorDark`,activeBorderColor:`buttonTypePrimaryActiveBorderColorDark`,activeColor:`buttonTypePrimaryActiveTextColorDark`}},primaryLight:{container:{bg:`buttonTypePrimaryDefaultBackgroundColorLight`,borderColor:`buttonTypePrimaryDefaultBorderColorLight`,color:`buttonTypePrimaryDefaultTextColorLight`,hoverBg:`buttonTypePrimaryHoverBackgroundColorLight`,hoverBorderColor:`buttonTypePrimaryHoverBorderColorLight`,hoverColor:`buttonTypePrimaryHoverTextColorLight`,activeBg:`buttonTypePrimaryActiveBackgroundColorLight`,activeBorderColor:`buttonTypePrimaryActiveBorderColorLight`,activeColor:`buttonTypePrimaryActiveTextColorLight`}},secondaryDark:{container:{bg:`buttonTypeSecondaryDefaultBackgroundColorDark`,borderColor:`buttonTypeSecondaryDefaultBorderColorDark`,color:`buttonTypeSecondaryDefaultTextColorDark`,hoverBg:`buttonTypeSecondaryHoverBackgroundColorDark`,hoverBorderColor:`buttonTypeSecondaryHoverBorderColorDark`,hoverColor:`buttonTypeSecondaryHoverTextColorDark`,activeBg:`buttonTypeSecondaryActiveBackgroundColorDark`,activeBorderColor:`buttonTypeSecondaryActiveBorderColorDark`,activeColor:`buttonTypeSecondaryActiveTextColorDark`}},secondaryLight:{container:{bg:`buttonTypeSecondaryDefaultBackgroundColorLight`,borderColor:`buttonTypeSecondaryDefaultBorderColorLight`,color:`buttonTypeSecondaryDefaultTextColorLight`,hoverBg:`buttonTypeSecondaryHoverBackgroundColorLight`,hoverBorderColor:`buttonTypeSecondaryHoverBorderColorLight`,hoverColor:`buttonTypeSecondaryHoverTextColorLight`,activeBg:`buttonTypeSecondaryActiveBackgroundColorLight`,activeBorderColor:`buttonTypeSecondaryActiveBorderColorLight`,activeColor:`buttonTypeSecondaryActiveTextColorLight`}},tertiaryDark:{container:{bg:`buttonTypeTertiaryDefaultBackgroundColorDark`,borderColor:`buttonTypeTertiaryDefaultBorderColorDark`,color:`buttonTypeTertiaryDefaultTextColorDark`,hoverBg:`buttonTypeTertiaryHoverBackgroundColorDark`,hoverBorderColor:`buttonTypeTertiaryHoverBorderColorDark`,hoverColor:`buttonTypeTertiaryHoverTextColorDark`,activeBg:`buttonTypeTertiaryActiveBackgroundColorDark`,activeBorderColor:`buttonTypeTertiaryActiveBorderColorDark`,activeColor:`buttonTypeTertiaryActiveTextColorDark`}},tertiaryLight:{container:{bg:`buttonTypeTertiaryDefaultBackgroundColorLight`,borderColor:`buttonTypeTertiaryDefaultBorderColorLight`,color:`buttonTypeTertiaryDefaultTextColorLight`,hoverBg:`buttonTypeTertiaryHoverBackgroundColorLight`,hoverBorderColor:`buttonTypeTertiaryHoverBorderColorLight`,hoverColor:`buttonTypeTertiaryHoverTextColorLight`,activeBg:`buttonTypeTertiaryActiveBackgroundColorLight`,activeBorderColor:`buttonTypeTertiaryActiveBorderColorLight`,activeColor:`buttonTypeTertiaryActiveTextColorLight`}},solidBlue:{container:{bg:`seaBlue.main`,borderColor:`seaBlue.main`,color:`white`,disabledBg:`darkBlue.75`,disabledBorderColor:`darkBlue.75`,disabledColor:`white`,hoverBg:`seaBlue.20`,hoverBorderColor:`seaBlue.20`,focusBg:`seaBlue.main`,activeBg:`seaBlue.35`,activeBorderColor:`seaBlue.35`}},blueOutlined:{container:{bg:`white`,borderColor:`seaBlue.main`,color:`seaBlue.main`,disabledBg:`white`,disabledBorderColor:`darkBlue.75`,disabledColor:`darkBlue.75`,hoverBg:`skyBlue.85`,hoverBorderColor:`seaBlue.35`,activeBg:`skyBlue.90`,activeBorderColor:`seaBlue.35`}},blueText:{container:{bg:`transparent`,borderColor:`transparent`,color:`seaBlue.main`,disabledBg:`white`,disabledBorderColor:`white`,disabledColor:`darkBlue.75`,hoverBg:`skyBlue.85`,hoverBorderColor:`skyBlue.85`,focusBg:`transparent`,activeBg:`skyBlue.90`,activeBorderColor:`skyBlue.90`}},solidGreen:{container:{bg:`landGreen.35`,borderColor:`landGreen.35`,color:`white`,disabledBg:`landGreen.70`,disabledBorderColor:`landGreen.70`,disabledColor:`white`,hoverBg:`landGreen.25`,hoverBorderColor:`landGreen.25`,focusBg:`landGreen.35`,activeBg:`landGreen.41`,activeBorderColor:`landGreen.41`}},solidRed:{container:{bg:`energyRed.45`,borderColor:`energyRed.45`,color:`white`,disabledBg:`energyRed.80`,disabledBorderColor:`energyRed.80`,disabledColor:`white`,hoverBg:`energyRed.35`,hoverBorderColor:`energyRed.35`,focusBg:`energyRed.45`,activeBg:`energyRed.50`,activeBorderColor:`energyRed.50`}},subtleBlue:{container:{bg:`transparent`,borderColor:`transparent`,color:`seaBlue.main`,disabledBg:`white`,disabledBorderColor:`darkBlue.75`,disabledColor:`darkBlue.75`,hoverBg:`skyBlue.90`,hoverBorderColor:`skyBlue.90`,focusBg:`transparent`,activeBg:`skyBlue.85`,activeBorderColor:`skyBlue.85`}},subtleRed:{container:{bg:`transparent`,borderColor:`transparent`,hoverBg:`energyRed.90`,hoverBorderColor:`energyRed.90`,focusBg:`transparent`,activeBg:`energyRed.85`,color:`energyRed.45`}},subtleYellow:{container:{bg:`transparent`,borderColor:`transparent`,hoverBg:`sunflower.70`,hoverBorderColor:`sunflower.70`,focusBg:`transparent`,activeBg:`sunflower.65`,color:`sunflower.15`}},subtleGreen:{container:{bg:`transparent`,borderColor:`transparent`,hoverBg:`landGreen.90`,hoverBorderColor:`landGreen.90`,focusBg:`transparent`,activeBg:`landGreen.85`,color:`landGreen.30`}},menuLight:{container:{bg:`#ffffff`,hoverBg:`#D3EEF8`,activeBg:`#E9F7FC`,disabledBg:`#F8F7F7`,borderColor:`transparent`,hoverBorderColor:`#003591`,activeBorderColor:`#003591`,color:`#1A1A19`,hoverColor:`#1A1A19`,activeColor:`#003591`,disabledColor:`#908D89`,disabledBorderColor:`transparent`,disabledOpacity:`1`}},menuDark:{container:{bg:`#0F204B`,hoverBg:`#003591`,activeBg:`#0041B2`,disabledBg:`#0F204B`,borderColor:`transparent`,hoverBorderColor:`#91FFB4`,activeBorderColor:`#91FFB4`,color:`#FFFFFF`,hoverColor:`#FFFFFF`,activeColor:`#91FFBA`,disabledColor:`#FFFFFF`,disabledBorderColor:`transparent`,disabledOpacity:`1`}}};i.buttonGroupDefault={container:{...i.secondaryDark.container,borderColor:`sandstone.60`}},i.buttonGroupRounded={container:{bg:`white`,borderColor:`sandstone.79`,color:`sandstone.10`,hoverBg:`seaBlue.20`,hoverBorderColor:`buttonTypePrimaryHoverBorderColorDark`,hoverColor:`white`,activeBg:`seaBlue.35`,activeBorderColor:`buttonTypePrimaryActiveBorderColorDark`,activeColor:`white`,borderRadius:`round`,marginRight:`22px`}};var a={baseStyle:e,defaultProps:t,parts:n,sizes:r,variants:i};export{a as default};globalThis.__vuiVersion__=`3.0.0-beta.6`;
+//# sourceMappingURL=theme.js.map

package/dist/button/theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.js","names":["variants: Record<string, Record<string, Record<string, string>>>"],"sources":["../../src/button/theme.ts"],"sourcesContent":["const baseStyle = {}\n\nconst defaultProps = {\n  size: 'lg',\n  variant: 'primaryDark',\n  fontWeight: 'medium',\n}\n\nconst parts = ['container', 'icon', 'text']\n\nconst sizes = {\n  sm: {\n    container: {\n      fontSize: 'xs',\n      h: 24,\n      minW: 48,\n      spaceX: 4,\n    },\n    icon: {\n      size: 'xs',\n    },\n    text: {},\n  },\n  md: {\n    container: {\n      fontSize: 'sm',\n      h: 32,\n      minW: 64,\n      spaceX: 6,\n    },\n    icon: {\n      size: 'sm',\n    },\n    text: {},\n  },\n  lg: {\n    container: {\n      fontSize: 'md',\n      h: 40,\n      minW: 80,\n      spaceX: 8,\n    },\n    icon: {\n      size: 'md',\n    },\n    text: {},\n  },\n  xl: {\n    container: {\n      fontSize: 'lg',\n      h: 48,\n      minW: 96,\n      spaceX: 10,\n    },\n    icon: {\n      size: 'lg',\n    },\n    text: {},\n  },\n}\n\nconst variants: Record<string, Record<string, Record<string, string>>> = {\n  primaryDark: {\n    container: {\n      bg: 'buttonTypePrimaryDefaultBackgroundColorDark',\n      borderColor: 'buttonTypePrimaryDefaultBorderColorDark',\n      color: 'buttonTypePrimaryDefaultTextColorDark',\n      hoverBg: 'buttonTypePrimaryHoverBackgroundColorDark',\n      hoverBorderColor: 'buttonTypePrimaryHoverBorderColorDark',\n      hoverColor: 'buttonTypePrimaryHoverTextColorDark',\n      activeBg: 'buttonTypePrimaryActiveBackgroundColorDark',\n      activeBorderColor: 'buttonTypePrimaryActiveBorderColorDark',\n      activeColor: 'buttonTypePrimaryActiveTextColorDark',\n    },\n  },\n  primaryLight: {\n    container: {\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  secondaryDark: {\n    container: {\n      bg: 'buttonTypeSecondaryDefaultBackgroundColorDark',\n      borderColor: 'buttonTypeSecondaryDefaultBorderColorDark',\n      color: 'buttonTypeSecondaryDefaultTextColorDark',\n      // discussed with Jesus, the decision was made on 2-may-2022 that OneDesign designers will update to VUI shade\n      // hover will change from 90 to 85\n      hoverBg: 'buttonTypeSecondaryHoverBackgroundColorDark',\n      hoverBorderColor: 'buttonTypeSecondaryHoverBorderColorDark',\n      hoverColor: 'buttonTypeSecondaryHoverTextColorDark',\n      // discussed with Jesus, the decision was made on 2-may-2022 that OneDesign designers will update to VUI shade\n      // active will change from 95% to 90%\n      activeBg: 'buttonTypeSecondaryActiveBackgroundColorDark',\n      activeBorderColor: 'buttonTypeSecondaryActiveBorderColorDark',\n      activeColor: 'buttonTypeSecondaryActiveTextColorDark',\n    },\n  },\n  secondaryLight: {\n    container: {\n      bg: 'buttonTypeSecondaryDefaultBackgroundColorLight',\n      borderColor: 'buttonTypeSecondaryDefaultBorderColorLight',\n      color: 'buttonTypeSecondaryDefaultTextColorLight',\n      hoverBg: 'buttonTypeSecondaryHoverBackgroundColorLight',\n      hoverBorderColor: 'buttonTypeSecondaryHoverBorderColorLight',\n      hoverColor: 'buttonTypeSecondaryHoverTextColorLight',\n      activeBg: 'buttonTypeSecondaryActiveBackgroundColorLight',\n      activeBorderColor: 'buttonTypeSecondaryActiveBorderColorLight',\n      activeColor: 'buttonTypeSecondaryActiveTextColorLight',\n    },\n  },\n  tertiaryDark: {\n    container: {\n      bg: 'buttonTypeTertiaryDefaultBackgroundColorDark',\n      borderColor: 'buttonTypeTertiaryDefaultBorderColorDark',\n      color: 'buttonTypeTertiaryDefaultTextColorDark',\n      hoverBg: 'buttonTypeTertiaryHoverBackgroundColorDark',\n      hoverBorderColor: 'buttonTypeTertiaryHoverBorderColorDark',\n      hoverColor: 'buttonTypeTertiaryHoverTextColorDark',\n      activeBg: 'buttonTypeTertiaryActiveBackgroundColorDark',\n      activeBorderColor: 'buttonTypeTertiaryActiveBorderColorDark',\n      activeColor: 'buttonTypeTertiaryActiveTextColorDark',\n    },\n  },\n  tertiaryLight: {\n    container: {\n      bg: 'buttonTypeTertiaryDefaultBackgroundColorLight',\n      borderColor: 'buttonTypeTertiaryDefaultBorderColorLight',\n      color: 'buttonTypeTertiaryDefaultTextColorLight',\n      hoverBg: 'buttonTypeTertiaryHoverBackgroundColorLight',\n      hoverBorderColor: 'buttonTypeTertiaryHoverBorderColorLight',\n      hoverColor: 'buttonTypeTertiaryHoverTextColorLight',\n      activeBg: 'buttonTypeTertiaryActiveBackgroundColorLight',\n      activeBorderColor: 'buttonTypeTertiaryActiveBorderColorLight',\n      activeColor: 'buttonTypeTertiaryActiveTextColorLight',\n    },\n  },\n  solidBlue: {\n    container: {\n      bg: 'seaBlue.main',\n      borderColor: 'seaBlue.main',\n      color: 'white',\n      disabledBg: 'darkBlue.75',\n      disabledBorderColor: 'darkBlue.75',\n      disabledColor: 'white',\n      // proper order next: hover, focus, active\n      hoverBg: 'seaBlue.20',\n      hoverBorderColor: 'seaBlue.20',\n      focusBg: 'seaBlue.main',\n      activeBg: 'seaBlue.35',\n      activeBorderColor: 'seaBlue.35',\n    },\n  },\n  blueOutlined: {\n    container: {\n      bg: 'white',\n      borderColor: 'seaBlue.main',\n      color: 'seaBlue.main',\n      disabledBg: 'white',\n      disabledBorderColor: 'darkBlue.75',\n      disabledColor: 'darkBlue.75',\n      hoverBg: 'skyBlue.85',\n      hoverBorderColor: 'seaBlue.35',\n      activeBg: 'skyBlue.90',\n      activeBorderColor: 'seaBlue.35',\n    },\n  },\n  blueText: {\n    container: {\n      bg: 'transparent',\n      borderColor: 'transparent',\n      color: 'seaBlue.main',\n      disabledBg: 'white',\n      disabledBorderColor: 'white',\n      disabledColor: 'darkBlue.75',\n      hoverBg: 'skyBlue.85',\n      hoverBorderColor: 'skyBlue.85',\n      focusBg: 'transparent',\n      activeBg: 'skyBlue.90',\n      activeBorderColor: 'skyBlue.90',\n    },\n  },\n  solidGreen: {\n    container: {\n      bg: 'landGreen.35',\n      borderColor: 'landGreen.35',\n      color: 'white',\n      disabledBg: 'landGreen.70',\n      disabledBorderColor: 'landGreen.70',\n      disabledColor: 'white',\n      hoverBg: 'landGreen.25',\n      hoverBorderColor: 'landGreen.25',\n      focusBg: 'landGreen.35',\n      activeBg: 'landGreen.41',\n      activeBorderColor: 'landGreen.41',\n    },\n  },\n  solidRed: {\n    container: {\n      bg: 'energyRed.45',\n      borderColor: 'energyRed.45',\n      color: 'white',\n      disabledBg: 'energyRed.80',\n      disabledBorderColor: 'energyRed.80',\n      disabledColor: 'white',\n      // proper order is important next: hover >  focus >  active\n      hoverBg: 'energyRed.35',\n      hoverBorderColor: 'energyRed.35',\n      focusBg: 'energyRed.45',\n      activeBg: 'energyRed.50',\n      activeBorderColor: 'energyRed.50',\n    },\n  },\n  // subtleBlue is an internal variant, used in notification; based on primaryDark\n  subtleBlue: {\n    container: {\n      bg: 'transparent',\n      borderColor: 'transparent',\n      color: 'seaBlue.main',\n      disabledBg: 'white',\n      disabledBorderColor: 'darkBlue.75',\n      disabledColor: 'darkBlue.75',\n      // proper order is important next: hover >  focus >  active\n      hoverBg: 'skyBlue.90',\n      hoverBorderColor: 'skyBlue.90',\n      focusBg: 'transparent',\n      activeBg: 'skyBlue.85',\n      activeBorderColor: 'skyBlue.85',\n    },\n  },\n  // subtleRed is an internal variant, used in notification; based on primaryDark\n  subtleRed: {\n    container: {\n      bg: 'transparent',\n      borderColor: 'transparent',\n      // proper order is important next: hover >  focus >  active\n      hoverBg: 'energyRed.90',\n      hoverBorderColor: 'energyRed.90',\n      focusBg: 'transparent',\n      activeBg: 'energyRed.85',\n      color: 'energyRed.45',\n    },\n  },\n  // subtleYellow is an internal variant, used in notification; based on primaryDark\n  subtleYellow: {\n    container: {\n      bg: 'transparent',\n      borderColor: 'transparent',\n      // proper order is important next: hover >  focus >  active\n      hoverBg: 'sunflower.70',\n      hoverBorderColor: 'sunflower.70',\n      focusBg: 'transparent',\n      activeBg: 'sunflower.65',\n      color: 'sunflower.15',\n    },\n  },\n  // subtleGreen is an internal variant, used in notification; based on primaryDark\n  subtleGreen: {\n    container: {\n      bg: 'transparent',\n      borderColor: 'transparent',\n      // proper order is important next: hover >  focus >  active\n      hoverBg: 'landGreen.90',\n      hoverBorderColor: 'landGreen.90',\n      focusBg: 'transparent',\n      activeBg: 'landGreen.85',\n      color: 'landGreen.30',\n    },\n  },\n  menuLight: {\n    container: {\n      bg: '#ffffff',\n      hoverBg: '#D3EEF8',\n      activeBg: '#E9F7FC',\n      disabledBg: '#F8F7F7',\n      borderColor: 'transparent',\n      hoverBorderColor: '#003591',\n      activeBorderColor: '#003591',\n      color: '#1A1A19',\n      hoverColor: '#1A1A19',\n      activeColor: '#003591',\n      disabledColor: '#908D89',\n      disabledBorderColor: 'transparent',\n      disabledOpacity: '1',\n    },\n  },\n  menuDark: {\n    container: {\n      bg: '#0F204B',\n      hoverBg: '#003591',\n      activeBg: '#0041B2',\n      disabledBg: '#0F204B',\n      borderColor: 'transparent',\n      hoverBorderColor: '#91FFB4',\n      activeBorderColor: '#91FFB4',\n      color: '#FFFFFF',\n      hoverColor: '#FFFFFF',\n      activeColor: '#91FFBA',\n      disabledColor: '#FFFFFF',\n      disabledBorderColor: 'transparent',\n      disabledOpacity: '1',\n    },\n  },\n}\n\n// buttonGroupDefault is an internal variant, used in ButtonGroup; based on secondaryDark\nvariants.buttonGroupDefault = {\n  container: {\n    ...variants.secondaryDark.container,\n    borderColor: 'sandstone.60',\n  },\n}\n\n// buttonGroupRounded is an internal variant\nvariants.buttonGroupRounded = {\n  container: {\n    bg: 'white',\n    borderColor: 'sandstone.79',\n    color: 'sandstone.10',\n    hoverBg: 'seaBlue.20',\n    hoverBorderColor: 'buttonTypePrimaryHoverBorderColorDark',\n    hoverColor: 'white',\n    activeBg: 'seaBlue.35',\n    activeBorderColor: 'buttonTypePrimaryActiveBorderColorDark',\n    activeColor: 'white',\n    borderRadius: 'round',\n    marginRight: '22px',\n  },\n}\n\nexport default {\n  baseStyle,\n  defaultProps,\n  parts,\n  sizes,\n  variants,\n}\n"],"mappings":"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"}

package/dist/buttonGroup/buttonGroup.d.ts

@@ -0,0 +1,32 @@
+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 { ButtonGroupProps } from "./buttonGroup.types.js";
+import * as styled_components11 from "styled-components";
+
+//#region src/buttonGroup/buttonGroup.d.ts
+declare const ButtonGroupBase: styled_components11.StyledComponent<"div", styled_components11.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 & {
+  innerBorderColor: string;
+}, never>;
+/**
+ * Organizes layout and display of multiple buttons. Controls border visual around and between the buttons.
+ * Exposes some props to the children via context.
+ */
+declare const ButtonGroup: VuiComponent<"div", ButtonGroupProps>;
+//#endregion
+export { ButtonGroup, ButtonGroupBase };
+//# sourceMappingURL=buttonGroup.d.ts.map

package/dist/buttonGroup/buttonGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"buttonGroup.d.ts","names":[],"sources":["../../src/buttonGroup/buttonGroup.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;;;;;;;;;;;;;cAQa,iBAAe,mBAAA,CAAA,uBAoD3B,mBAAA,CApD2B,YAAA;;;;;;;cA0Df,iCAAW"}

package/dist/buttonGroup/buttonGroup.js

@@ -0,0 +1,54 @@
+import{activeClassName as e}from"../utils/consts.js";import{filterUndefined as t}from"../utils/object.js";import{cs as n}from"../utils/styles.js";import{th as r}from"../core/theme.js";import{styled as i}from"../core/styled.js";import{vui as a}from"../core/vui.js";import{ButtonGroupProvider as o}from"./context.js";import{getInnerBorderColor as s}from"./helpers.js";import{useMemo as c}from"react";import{jsx as l}from"react/jsx-runtime";const u=i.divBox`
+  display: flex;
+
+  // Border color between Buttons
+  > *:not(:last-of-type):not(:focus) {
+    border-right-color: ${e=>r.color(e.innerBorderColor)};
+  }
+
+  // First Button
+  > *:first-of-type:not(:last-of-type) {
+    border-right-width: 1px;
+  }
+
+  // Middle Buttons
+  > *:not(:first-of-type):not(:last-of-type) {
+    border-left-width: 0px;
+    border-right-width: 1px;
+  }
+
+  // Last Button
+  > *:not(:first-of-type):last-of-type {
+    border-left-width: 0px;
+    margin-right: 0;
+  }
+
+  // Border color
+  > *,
+  *:hover {
+    border-color: ${e=>r.color(e.innerBorderColor)};
+  }
+
+  //
+  > .${e}.vui-button-variant-secondaryDark {
+    background-color: ${r.color(`skyBlue.90`)};
+  }
+
+  > .${e}.vui-button-variant-buttonGroupRounded {
+    background-color: ${r.color(`seaBlue.main`)};
+    color: ${r.color(`white`)};
+  }
+
+  > .vui-button-variant-buttonGroupRounded {
+    border-left-width: 1px !important;
+  }
+
+  > .${e}.vui-button-variant-buttonGroupRounded:hover {
+    background-color: ${r.color(`seaBlue.20`)};
+  }
+
+  > .${e}.vui-button-variant-buttonGroupRounded:active {
+    background-color: ${r.color(`seaBlue.35`)};
+  }
+`,d=a((e,r)=>{let{className:i,disabled:a,innerBorderColor:d,size:f,variant:p=`default`,...m}=e,h=c(()=>t({disabled:a,size:f,variant:p===`default`?`buttonGroupDefault`:`buttonGroupRounded`}),[a,f,p]);return l(o,{value:h,children:l(u,{className:n(`vui-buttonGroup`,i,`vui-buttonGroup-variant-${p}`),innerBorderColor:d||s(e),ref:r,...m})})});d.displayName=`ButtonGroup`;var f=d;export{d as ButtonGroup,u as ButtonGroupBase,f as default};globalThis.__vuiVersion__=`3.0.0-beta.6`;
+//# sourceMappingURL=buttonGroup.js.map

package/dist/buttonGroup/buttonGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"buttonGroup.js","names":[],"sources":["../../src/buttonGroup/buttonGroup.tsx"],"sourcesContent":["import { useMemo } from 'react'\n\nimport { styled, th, vui } from '../core'\nimport { activeClassName, cs, filterUndefined } from '../utils'\nimport type { ButtonGroupProps } from './buttonGroup.types'\nimport { ButtonGroupProvider } from './context'\nimport { getInnerBorderColor } from './helpers'\n\nexport const ButtonGroupBase = styled.divBox<{ innerBorderColor: string }>`\n  display: flex;\n\n  // Border color between Buttons\n  > *:not(:last-of-type):not(:focus) {\n    border-right-color: ${p => th.color(p.innerBorderColor)};\n  }\n\n  // First Button\n  > *:first-of-type:not(:last-of-type) {\n    border-right-width: 1px;\n  }\n\n  // Middle Buttons\n  > *:not(:first-of-type):not(:last-of-type) {\n    border-left-width: 0px;\n    border-right-width: 1px;\n  }\n\n  // Last Button\n  > *:not(:first-of-type):last-of-type {\n    border-left-width: 0px;\n    margin-right: 0;\n  }\n\n  // Border color\n  > *,\n  *:hover {\n    border-color: ${p => th.color(p.innerBorderColor)};\n  }\n\n  //\n  > .${activeClassName}.vui-button-variant-secondaryDark {\n    background-color: ${th.color('skyBlue.90')};\n  }\n\n  > .${activeClassName}.vui-button-variant-buttonGroupRounded {\n    background-color: ${th.color('seaBlue.main')};\n    color: ${th.color('white')};\n  }\n\n  > .vui-button-variant-buttonGroupRounded {\n    border-left-width: 1px !important;\n  }\n\n  > .${activeClassName}.vui-button-variant-buttonGroupRounded:hover {\n    background-color: ${th.color('seaBlue.20')};\n  }\n\n  > .${activeClassName}.vui-button-variant-buttonGroupRounded:active {\n    background-color: ${th.color('seaBlue.35')};\n  }\n`\n\n/**\n * Organizes layout and display of multiple buttons. Controls border visual around and between the buttons.\n * Exposes some props to the children via context.\n */\nexport const ButtonGroup = vui<'div', ButtonGroupProps>((props, ref) => {\n  const { className, disabled, innerBorderColor, size, variant = 'default', ...rest } = props\n\n  const context = useMemo(\n    () =>\n      filterUndefined({\n        disabled,\n        size,\n        variant: variant === 'default' ? 'buttonGroupDefault' : 'buttonGroupRounded',\n      }),\n    [disabled, size, variant],\n  )\n\n  return (\n    <ButtonGroupProvider value={context}>\n      <ButtonGroupBase\n        className={cs('vui-buttonGroup', className, `vui-buttonGroup-variant-${variant}`)}\n        {...{ innerBorderColor: innerBorderColor ? innerBorderColor : getInnerBorderColor(props), ref }}\n        {...rest}\n      />\n    </ButtonGroupProvider>\n  )\n})\n\nButtonGroup.displayName = 'ButtonGroup'\nexport default ButtonGroup\n"],"mappings":"sbAQA,MAAa,EAAkB,EAAO,MAAoC;;;;;0BAKhD,GAAK,EAAG,MAAM,EAAE,iBAAiB,CAAC;;;;;;;;;;;;;;;;;;;;;;;oBAuBxC,GAAK,EAAG,MAAM,EAAE,iBAAiB,CAAC;;;;OAI/C,EAAgB;wBACC,EAAG,MAAM,aAAa,CAAC;;;OAGxC,EAAgB;wBACC,EAAG,MAAM,eAAe,CAAC;aACpC,EAAG,MAAM,QAAQ,CAAC;;;;;;;OAOxB,EAAgB;wBACC,EAAG,MAAM,aAAa,CAAC;;;OAGxC,EAAgB;wBACC,EAAG,MAAM,aAAa,CAAC;;EAQlC,EAAc,GAA8B,EAAO,IAAQ,CACtE,GAAM,CAAE,YAAW,WAAU,mBAAkB,OAAM,UAAU,UAAW,GAAG,GAAS,EAEhF,EAAU,MAEZ,EAAgB,CACd,WACA,OACA,QAAS,IAAY,UAAY,qBAAuB,qBACzD,CAAC,CACJ,CAAC,EAAU,EAAM,EAAQ,CAC1B,CAED,OACE,EAAC,EAAA,CAAoB,MAAO,WAC1B,EAAC,EAAA,CACC,UAAW,EAAG,kBAAmB,EAAW,2BAA2B,IAAU,CAC3E,iBAAkB,GAAsC,EAAoB,EAAM,CAAE,MAC1F,GAAI,GACJ,EACkB,EAExB,CAEF,EAAY,YAAc,cAC1B,IAAA,EAAe"}

package/dist/buttonGroup/buttonGroup.types.d.ts

@@ -0,0 +1,17 @@
+import { ThemingProps } from "../theme/types.js";
+import { SystemProps } from "../system/system.js";
+
+//#region src/buttonGroup/buttonGroup.types.d.ts
+type ButtonGroupProps = SystemProps & ThemingProps<'ButtonGroup'> & {
+  /** Available theme colors for this component. @deprecated */
+  colorScheme?: string;
+  /** Makes all wrapped buttons disabled. */
+  disabled?: boolean;
+  /** Border color between the buttons. */
+  innerBorderColor?: string;
+  /** variant of the button-group. */
+  variant?: string;
+};
+//#endregion
+export { ButtonGroupProps };
+//# sourceMappingURL=buttonGroup.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"buttonGroup.types.d.ts","names":[],"sources":["../../src/buttonGroup/buttonGroup.types.ts"],"sourcesContent":[],"mappings":";;;;KAGY,gBAAA,GAAmB,cAC7B;;EADU,WAAA,CAAA,EAAA,MAAgB;EAAA;UAAG,CAAA,EAAA,OAAA;;EACjB,gBAAA,CAAA,EAAA,MAAA"}

package/dist/buttonGroup/context.d.ts

@@ -0,0 +1,8 @@
+import { Dict } from "../utils/types.js";
+import * as react0 from "react";
+
+//#region src/buttonGroup/context.d.ts
+declare const ButtonGroupProvider: react0.Provider<Dict>, useButtonGroupContext: () => Dict;
+//#endregion
+export { ButtonGroupProvider, useButtonGroupContext };
+//# sourceMappingURL=context.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","names":[],"sources":["../../src/buttonGroup/context.ts"],"sourcesContent":[],"mappings":";;;;cAGO,qBAAmB,MAAA,CAAA,SAAA,OAAE,6BAAqB"}

package/dist/buttonGroup/context.js

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

package/dist/buttonGroup/context.js.map

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

package/dist/buttonGroup/helpers.js

@@ -0,0 +1,2 @@
+function e(e){let{disabled:t,variant:n}=e;return t?`disabled.border`:`${n}`}export{e as getInnerBorderColor};globalThis.__vuiVersion__=`3.0.0-beta.6`;
+//# sourceMappingURL=helpers.js.map

package/dist/buttonGroup/helpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.js","names":[],"sources":["../../src/buttonGroup/helpers.ts"],"sourcesContent":["import type { ButtonGroupProps } from './buttonGroup.types'\n\n/** Returns appropriate color for the border between the buttons. */\nexport function getInnerBorderColor(props: ButtonGroupProps): string {\n  const { disabled, variant } = props\n\n  if (disabled) return 'disabled.border'\n\n  return `${variant}`\n}\n"],"mappings":"AAGA,SAAgB,EAAoB,EAAiC,CACnE,GAAM,CAAE,WAAU,WAAY,EAI9B,OAFI,EAAiB,kBAEd,GAAG"}

package/dist/buttonToggleGroup/buttonToggleGroup.d.ts

@@ -0,0 +1,14 @@
+import { ButtonToggleGroupProps } from "./buttonToggleGroup.types.js";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/buttonToggleGroup/buttonToggleGroup.d.ts
+/**
+ * Organizes layout and display of multiple buttons. Based on ButtonGroup and should be used to toggle options.
+ */
+declare const ButtonToggleGroup: {
+  (props: ButtonToggleGroupProps): react_jsx_runtime0.JSX.Element;
+  displayName: string;
+};
+//#endregion
+export { ButtonToggleGroup };
+//# sourceMappingURL=buttonToggleGroup.d.ts.map

package/dist/buttonToggleGroup/buttonToggleGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"buttonToggleGroup.d.ts","names":[],"sources":["../../src/buttonToggleGroup/buttonToggleGroup.tsx"],"sourcesContent":[],"mappings":";;;;;;;AAOa,cAAA,iBAUZ,EAAA;EAAA,CAAA,KAAA,EAVwC,sBAUxC,CAAA,EAV8D,kBAAA,CAAA,GAAA,CAAA,OAU9D;aAVwC,EAAA,MAAA"}