@veracity/vui 5.1.1 → 5.2.0-alpha.395258.2606081356

package/dist/tagToggle/theme.js

@@ -0,0 +1,81 @@
+//#region src/tagToggle/theme.ts
+const baseStyle = {};
+const defaultProps = {
+	size: "md",
+	variant: "solid",
+	fontWeight: "medium"
+};
+const parts = ["container", "icon"];
+const sizes = {
+	xs: {
+		container: {
+			fontSize: "xs",
+			h: 20,
+			paddingX: 4,
+			paddingY: 2,
+			gapX: 4,
+			borderRadius: 6
+		},
+		icon: { size: "xs" }
+	},
+	sm: {
+		container: {
+			fontSize: "xs",
+			h: 24,
+			paddingX: 6,
+			paddingY: 4,
+			gapX: 6,
+			borderRadius: 6
+		},
+		icon: { size: "xs" }
+	},
+	md: {
+		container: {
+			fontSize: "sm",
+			h: 32,
+			paddingX: 8,
+			paddingY: 6,
+			gapX: 8,
+			borderRadius: 6
+		},
+		icon: { size: "sm" }
+	}
+};
+const variants = {
+	subtle: { container: {
+		bg: "white",
+		color: "var(--vui-action-brand-subtle-inverse)",
+		bgHover: "var(--vui-action-brand-subtle-hover)",
+		bgPressed: "var(--vui-action-brand-subtle)"
+	} },
+	subtleSelected: { container: {
+		bg: "var(--vui-action-brand-subtle)",
+		color: "var(--vui-action-brand-subtle-inverse)",
+		bgHover: "var(--vui-action-brand-subtle-hover)",
+		bgPressed: "var(--vui-action-brand-subtle-pressed)"
+	} },
+	solid: { container: {
+		bg: "var(--vui-action-brand-subtle)",
+		color: "var(--vui-action-brand-subtle-inverse)",
+		bgHover: "var(--vui-action-brand-subtle-hover)",
+		bgPressed: "var(--vui-action-brand-subtle-pressed)"
+	} },
+	solidSelected: { container: {
+		bg: "var(--vui-action-brand-solid)",
+		color: "var(--vui-action-brand-solid-inverse)",
+		bgHover: "var(--vui-action-brand-solid-hover)",
+		bgPressed: "var(--vui-action-brand-solid-pressed)"
+	} }
+};
+var theme_default = {
+	baseStyle,
+	defaultProps,
+	parts,
+	sizes,
+	variants
+};
+
+//#endregion
+export { theme_default as default };
+globalThis.__vuiVersion__ = "5.2.0"
+//# sourceMappingURL=theme.js.map

package/dist/tagToggle/theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.js","names":[],"sources":["../../src/tagToggle/theme.ts"],"sourcesContent":["// TagToggle theme\n//\n// Brand-only, two hierarchies (subtle / solid), three sizes.\n// Figma file: VPUW5N9Dng7UTK3YX5RJlY, node 130:858 (✅ Tag Toggle).\n//\n// Default (unselected): white bg, brand subtle-inverse text.\n// Selected (active):    subtle → brand subtle bg; solid → brand solid bg.\n\nconst baseStyle = {}\n\nconst defaultProps = {\n  size: 'md',\n  variant: 'solid',\n  fontWeight: 'medium',\n}\n\nconst parts = ['container', 'icon']\n\nconst sizes = {\n  xs: {\n    container: { fontSize: 'xs', h: 20, paddingX: 4, paddingY: 2, gapX: 4, borderRadius: 6 },\n    icon: { size: 'xs' },\n  },\n  sm: {\n    container: { fontSize: 'xs', h: 24, paddingX: 6, paddingY: 4, gapX: 6, borderRadius: 6 },\n    icon: { size: 'xs' },\n  },\n  md: {\n    container: { fontSize: 'sm', h: 32, paddingX: 8, paddingY: 6, gapX: 8, borderRadius: 6 },\n    icon: { size: 'sm' },\n  },\n}\n\n// Each hierarchy has two visual states: unselected and selected.\nconst variants = {\n  // --- subtle -----------------------------------------------------------\n  subtle: {\n    container: {\n      bg: 'white',\n      color: 'var(--vui-action-brand-subtle-inverse)',\n      bgHover: 'var(--vui-action-brand-subtle-hover)',\n      bgPressed: 'var(--vui-action-brand-subtle)',\n    },\n  },\n  subtleSelected: {\n    container: {\n      bg: 'var(--vui-action-brand-subtle)',\n      color: 'var(--vui-action-brand-subtle-inverse)',\n      bgHover: 'var(--vui-action-brand-subtle-hover)',\n      bgPressed: 'var(--vui-action-brand-subtle-pressed)',\n    },\n  },\n\n  // --- solid ------------------------------------------------------------\n  solid: {\n    container: {\n      bg: 'var(--vui-action-brand-subtle)',\n      color: 'var(--vui-action-brand-subtle-inverse)',\n      bgHover: 'var(--vui-action-brand-subtle-hover)',\n      bgPressed: 'var(--vui-action-brand-subtle-pressed)',\n    },\n  },\n  solidSelected: {\n    container: {\n      bg: 'var(--vui-action-brand-solid)',\n      color: 'var(--vui-action-brand-solid-inverse)',\n      bgHover: 'var(--vui-action-brand-solid-hover)',\n      bgPressed: 'var(--vui-action-brand-solid-pressed)',\n    },\n  },\n}\n\nexport default {\n  baseStyle,\n  defaultProps,\n  parts,\n  sizes,\n  variants,\n}\n"],"mappings":";AAQA,MAAM,YAAY,CAAC;AAEnB,MAAM,eAAe;CACnB,MAAM;CACN,SAAS;CACT,YAAY;AACd;AAEA,MAAM,QAAQ,CAAC,aAAa,MAAM;AAElC,MAAM,QAAQ;CACZ,IAAI;EACF,WAAW;GAAE,UAAU;GAAM,GAAG;GAAI,UAAU;GAAG,UAAU;GAAG,MAAM;GAAG,cAAc;EAAE;EACvF,MAAM,EAAE,MAAM,KAAK;CACrB;CACA,IAAI;EACF,WAAW;GAAE,UAAU;GAAM,GAAG;GAAI,UAAU;GAAG,UAAU;GAAG,MAAM;GAAG,cAAc;EAAE;EACvF,MAAM,EAAE,MAAM,KAAK;CACrB;CACA,IAAI;EACF,WAAW;GAAE,UAAU;GAAM,GAAG;GAAI,UAAU;GAAG,UAAU;GAAG,MAAM;GAAG,cAAc;EAAE;EACvF,MAAM,EAAE,MAAM,KAAK;CACrB;AACF;AAGA,MAAM,WAAW;CAEf,QAAQ,EACN,WAAW;EACT,IAAI;EACJ,OAAO;EACP,SAAS;EACT,WAAW;CACb,EACF;CACA,gBAAgB,EACd,WAAW;EACT,IAAI;EACJ,OAAO;EACP,SAAS;EACT,WAAW;CACb,EACF;CAGA,OAAO,EACL,WAAW;EACT,IAAI;EACJ,OAAO;EACP,SAAS;EACT,WAAW;CACb,EACF;CACA,eAAe,EACb,WAAW;EACT,IAAI;EACJ,OAAO;EACP,SAAS;EACT,WAAW;CACb,EACF;AACF;AAEA,oBAAe;CACb;CACA;CACA;CACA;CACA;AACF"}

package/dist/textarea/helpers.js

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

package/dist/textarea/helpers.js.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.js","names":[],"sources":["../../src/textarea/helpers.ts"],"sourcesContent":["import type { TextareaProps } from './textarea.types'\n\n/** Returns length of the initial textarea's value. */\nexport function getInitialCount(props: TextareaProps) {\n  const { defaultValue, value } = props\n\n  return defaultValue?.toString().length ?? value?.toString().length ?? 0\n}\n"],"mappings":";;AAGA,SAAgB,gBAAgB,OAAsB;CACpD,MAAM,EAAE,cAAc,UAAU;CAEhC,OAAO,cAAc,SAAS,EAAE,UAAU,OAAO,SAAS,EAAE,UAAU;AACxE"}
+{"version":3,"file":"helpers.js","names":[],"sources":["../../src/textarea/helpers.ts"],"sourcesContent":["import type { TextareaProps } from './textarea.types'\n\n/** Returns length of the initial textarea's value. */\nexport function getInitialCount(props: TextareaProps) {\n  const { defaultValue, value } = props\n\n  return defaultValue?.toString().length ?? value?.toString().length ?? 0\n}\n"],"mappings":";;AAGA,SAAgB,gBAAgB,OAAsB;CACpD,MAAM,EAAE,cAAc,UAAU;CAEhC,OAAO,cAAc,SAAS,CAAC,CAAC,UAAU,OAAO,SAAS,CAAC,CAAC,UAAU;AACxE"}

package/dist/textarea/textarea.js

@@ -139,5 +139,5 @@ Textarea.displayName = "Textarea";
 
 //#endregion
 export { TextareaBase, Textarea as default };
-globalThis.__vuiVersion__ = "5.1.1"
+globalThis.__vuiVersion__ = "5.2.0"
 //# 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,CAAC,GACjB,aACA,OACA,GAAG,SACD,iBAAiB,KAAK;CAE1B,MAAM,cAAc,MAAM;CAC1B,MAAM,CAAC,OAAO,YAAY,eAAe,gBAAgB,KAAK,CAAC;CAC/D,MAAM,CAAC,eAAe,oBAAoB,SAAS,YAAY;CAE/D,MAAM,KAAK,UAAU;CAErB,MAAM,SAAS,eAAe,YAAY,KAAK;CAE/C,SAAS,SAAS,GAAqC;EACrD,iBAAiB,EAAE,OAAO,KAAK;EAC/B,SAAS,EAAE,OAAO,MAAM,MAAM;EAC9B,eAAe,CAAC;CAClB;CAEA,MAAM,eAAe,gBAAgB,EACnC,iBAAiB,SACnB,CAAC;CAED,MAAM,uBAAuB,gBAAgB;EAC3C,iBAAiB;EACjB,cAAc;EACd,IAAI,WAAW,iBAAiB;EAChC,aAAa,WAAW,iBAAiB;EACzC,wBAAwB,CAAC,WAAW,gBAAgB;EACpD,sBAAsB,WAAW,gBAAgB;CACnD,CAAC;CAED,gBAAgB;EACd,iBAAiB,KAAK;EACtB,SAAS,OAAO,SAAS,GAAG,SAAS,GAAG,QAAQ,SAAS,CAAC;CAC5D,GAAG,CAAC,KAAK,CAAC;CAEV,OACE,qBAAC,KAAD;EAAK,WAAU;EAAwB;EAAY;EAAK,GAAI;YAA5D;GACG,SAAS,KAAK,IACb,oBAAC,OAAD;IACE,iBAAe;IACf,WAAU;IACV,SAAS;IACT,gBAAgB;IAChB,IAAI;IACJ,MAAM;IACN,aAAa;IACb,GAAI,OAAO;GACZ,KAED;GAEF,qBAAC,cAAD;IAAc,WAAW,GAAG,gBAAgB,SAAS;IAAG,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;IACL,IAEA,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;KACvC;MAEO;;GACb,CAAC,CAAC,YAAY,oBAAC,UAAD;IAAU,MAAM,aAAa;cAAQ;GAAmB;GACtE,CAAC,CAAC,aACD,oBAAC,UAAD;IAAU;IAAQ,IAAI,qBAA6B;IAAW,MAAM,aAAa;cAC9E;GACO;EAET;;AAET,CAAC;AAED,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,CAAC,GACjB,aACA,OACA,GAAG,SACD,iBAAiB,KAAK;CAE1B,MAAM,cAAc,MAAM;CAC1B,MAAM,CAAC,OAAO,YAAY,eAAe,gBAAgB,KAAK,CAAC;CAC/D,MAAM,CAAC,eAAe,oBAAoB,SAAS,YAAY;CAE/D,MAAM,KAAK,UAAU;CAErB,MAAM,SAAS,eAAe,YAAY,KAAK;CAE/C,SAAS,SAAS,GAAqC;EACrD,iBAAiB,EAAE,OAAO,KAAK;EAC/B,SAAS,EAAE,OAAO,MAAM,MAAM;EAC9B,eAAe,CAAC;CAClB;CAEA,MAAM,eAAe,gBAAgB,EACnC,iBAAiB,SACnB,CAAC;CAED,MAAM,uBAAuB,gBAAgB;EAC3C,iBAAiB;EACjB,cAAc;EACd,IAAI,WAAW,iBAAiB;EAChC,aAAa,WAAW,iBAAiB;EACzC,wBAAwB,CAAC,WAAW,gBAAgB;EACpD,sBAAsB,WAAW,gBAAgB;CACnD,CAAC;CAED,gBAAgB;EACd,iBAAiB,KAAK;EACtB,SAAS,OAAO,SAAS,CAAC,EAAE,SAAS,GAAG,QAAQ,SAAS,CAAC;CAC5D,GAAG,CAAC,KAAK,CAAC;CAEV,OACE,qBAAC,KAAD;EAAK,WAAU;EAAwB;EAAY;EAAK,GAAI;YAA5D;GACG,SAAS,KAAK,IACb,oBAAC,OAAD;IACE,iBAAe;IACf,WAAU;IACV,SAAS;IACT,gBAAgB;IAChB,IAAI;IACJ,MAAM;IACN,aAAa;IACb,GAAI,OAAO;GACZ,KAED;GAEF,qBAAC,cAAD;IAAc,WAAW,GAAG,gBAAgB,SAAS;IAAG,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;IACL,IAEA,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;KACvC;MAEO;;GACb,CAAC,CAAC,YAAY,oBAAC,UAAD;IAAU,MAAM,aAAa;cAAQ;GAAmB;GACtE,CAAC,CAAC,aACD,oBAAC,UAAD;IAAU;IAAQ,IAAI,qBAA6B;IAAW,MAAM,aAAa;cAC9E;GACO;EAET;;AAET,CAAC;AAED,SAAS,cAAc"}

package/dist/textarea/theme.js

@@ -59,5 +59,5 @@ var theme_default = {
 
 //#endregion
 export { theme_default as default };
-globalThis.__vuiVersion__ = "5.1.1"
+globalThis.__vuiVersion__ = "5.2.0"
 //# sourceMappingURL=theme.js.map

package/dist/theme/components.d.ts

@@ -1,3 +1,4 @@
+import { TagContainerStyles } from "../tag/tag.types.js";
 import { ContainerStyles } from "../button/button.types.js";
 //#region src/theme/components.d.ts
 declare const _default: {
@@ -231,139 +232,10 @@ declare const _default: {
     defaultProps: {
       size: string;
       variant: string;
+      color: string;
       fontWeight: string;
     };
-    parts: string[];
-    sizes: {
-      xxs: {
-        container: {
-          borderRadius: string;
-          fontSize: string;
-          h: number;
-          spaceX: number;
-        };
-        icon: {
-          size: string;
-        };
-      };
-      xs: {
-        container: {
-          borderRadius: string;
-          fontSize: string;
-          h: number;
-          spaceX: number;
-        };
-        icon: {
-          size: string;
-        };
-      };
-      sm: {
-        container: {
-          fontSize: string;
-          h: number;
-          spaceX: number;
-        };
-        icon: {
-          size: string;
-        };
-      };
-      md: {
-        container: {
-          fontSize: string;
-          h: number;
-          spaceX: number;
-        };
-        icon: {
-          size: string;
-        };
-      };
-      lg: {
-        container: {
-          fontSize: string;
-          h: number;
-          spaceX: number;
-        };
-        icon: {
-          size: string;
-        };
-      };
-    };
-    variants: {
-      subtleSandstone: {
-        container: {
-          bg: string;
-          color: string;
-          borderColor: string;
-        };
-      };
-      subtleEarth: {
-        container: {
-          bg: string;
-          color: string;
-        };
-      };
-      subtleBlue: {
-        container: {
-          bg: string;
-          color: string;
-        };
-      };
-      subtleBlue2: {
-        container: {
-          bg: string;
-          color: string;
-        };
-      };
-      subtleRed: {
-        container: {
-          bg: string;
-          color: string;
-        };
-      };
-      subtleYellow: {
-        container: {
-          bg: string;
-          color: string;
-        };
-      };
-      subtleGreen: {
-        container: {
-          bg: string;
-          color: string;
-        };
-      };
-      solidBlue: {
-        container: {
-          bg: string;
-          color: string;
-        };
-      };
-      solidDarkBlue: {
-        container: {
-          bg: string;
-          borderColor: string;
-          color: string;
-        };
-      };
-      solidRed: {
-        container: {
-          bg: string;
-          color: string;
-        };
-      };
-      solidYellow: {
-        container: {
-          bg: string;
-          color: string;
-        };
-      };
-      solidGreen: {
-        container: {
-          bg: string;
-          color: string;
-        };
-      };
-    };
+    variants: {};
   };
   Box: {
     baseStyle: {};
@@ -1530,11 +1402,24 @@ declare const _default: {
       };
       text: {
         flex: string;
-        lineHeight: string;
+        fontSize: {
+          xs: string;
+          md: string;
+          lg: string;
+        };
+        lineHeight: {
+          xs: string;
+          md: string;
+          lg: string;
+        };
         minW: number;
       };
       title: {
-        mb: string;
+        mb: {
+          xs: string;
+          md: string;
+          lg: string;
+        };
       };
       actionBox: {
         mt: string;
@@ -1547,6 +1432,10 @@ declare const _default: {
       subtleRed: object;
       subtleYellow: object;
       subtleGreen: object;
+      bannerBlue: object;
+      bannerRed: object;
+      bannerYellow: object;
+      bannerGreen: object;
     };
   };
   P: {
@@ -1874,12 +1763,10 @@ declare const _default: {
         bg: string;
         border: string;
         borderRadius: string;
-        cursor: string;
         h: string;
         lineHeight: string;
         w: string;
         textAlign: string;
-        top: string;
         transitionDuration: string;
       };
       thumbValue: {
@@ -1889,9 +1776,7 @@ declare const _default: {
       };
       track: {
         bg: "seaBlue.28";
-        bottom: number;
         borderRadius: string;
-        top: number;
         transitionDuration: string;
       };
     };
@@ -2681,230 +2566,163 @@ declare const _default: {
     sizes: {
       xs: {
         container: {
-          borderRadius: string;
           fontSize: string;
           h: number;
-          spaceX: number;
-        };
-        button: {
-          size: string;
+          paddingX: number;
+          paddingY: number;
+          gapX: number;
+          borderRadius: number;
         };
         icon: {
+          fontSize: string;
+        };
+        dismiss: {
           size: string;
+          w: number;
+          h: number;
+          minW: number;
         };
       };
       sm: {
         container: {
           fontSize: string;
           h: number;
-          spaceX: number;
-        };
-        button: {
-          size: string;
+          paddingX: number;
+          paddingY: number;
+          gapX: number;
+          borderRadius: number;
         };
         icon: {
+          fontSize: string;
+        };
+        dismiss: {
           size: string;
+          w: number;
+          h: number;
+          minW: number;
         };
       };
       md: {
         container: {
           fontSize: string;
           h: number;
-          spaceX: number;
-        };
-        button: {
-          size: string;
+          paddingX: number;
+          paddingY: number;
+          gapX: number;
+          borderRadius: number;
         };
         icon: {
+          fontSize: string;
+        };
+        dismiss: {
           size: string;
+          w: number;
+          h: number;
+          minW: number;
         };
       };
       lg: {
         container: {
           fontSize: string;
           h: number;
-          spaceX: number;
-        };
-        button: {
-          size: string;
+          paddingX: number;
+          paddingY: number;
+          gapX: number;
+          borderRadius: number;
         };
         icon: {
+          fontSize: string;
+        };
+        dismiss: {
           size: string;
+          w: number;
+          h: number;
+          minW: number;
         };
       };
     };
-    variants: {
-      subtleGrey: {
-        container: {
-          bg: string;
-          hoverBg: string;
-          borderColor: string;
-          color: string;
-          activeBg: string;
-        };
-        button: {
-          bg: string;
-          hoverBg: string;
-          hoverBorderColor: string;
-          hoverColor: string;
-          color: string;
-          activeBg: string;
-        };
-      };
-      subtleBlue: {
-        container: {
-          bg: string;
-          hoverBg: string;
-          activeBg: string;
-          borderColor: string;
-          color: string;
-        };
-        button: {
-          bg: string;
-          hoverBg: string;
-          activeBg: string;
-          hoverBorderColor: string;
-          hoverColor: string;
-          color: string;
-        };
-      };
-      subtleRed: {
-        container: {
-          bg: string;
-          borderColor: string;
-          hoverBg: string;
-          activeBg: string;
-          color: string;
-        };
-        button: {
-          bg: string;
-          hoverBg: string;
-          activeBg: string;
-          hoverBorderColor: string;
-          hoverColor: string;
-          color: string;
-        };
-      };
-      subtleYellow: {
+    variants: Record<string, Record<string, TagContainerStyles>>;
+  };
+  TagToggle: {
+    baseStyle: {};
+    defaultProps: {
+      size: string;
+      variant: string;
+      fontWeight: string;
+    };
+    parts: string[];
+    sizes: {
+      xs: {
         container: {
-          bg: string;
-          hoverBg: string;
-          activeBg: string;
-          borderColor: string;
-          color: string;
+          fontSize: string;
+          h: number;
+          paddingX: number;
+          paddingY: number;
+          gapX: number;
+          borderRadius: number;
         };
-        button: {
-          bg: string;
-          hoverBg: string;
-          activeBg: string;
-          hoverBorderColor: string;
-          hoverColor: string;
-          color: string;
+        icon: {
+          size: string;
         };
       };
-      subtleGreen: {
+      sm: {
         container: {
-          bg: string;
-          hoverBg: string;
-          borderColor: string;
-          color: string;
-          activeBg: string;
+          fontSize: string;
+          h: number;
+          paddingX: number;
+          paddingY: number;
+          gapX: number;
+          borderRadius: number;
         };
-        button: {
-          bg: string;
-          hoverBg: string;
-          activeBg: string;
-          hoverBorderColor: string;
-          hoverColor: string;
-          color: string;
+        icon: {
+          size: string;
         };
       };
-      solidBlue: {
+      md: {
         container: {
-          bg: string;
-          hoverBg: string;
-          activeBg: string;
-          borderColor: string;
-          color: string;
+          fontSize: string;
+          h: number;
+          paddingX: number;
+          paddingY: number;
+          gapX: number;
+          borderRadius: number;
         };
-        button: {
-          bg: string;
-          hoverBg: string;
-          activeBg: string;
-          hoverBorderColor: string;
-          activeBorderColor: string;
-          hoverColor: string;
-          color: string;
+        icon: {
+          size: string;
         };
       };
-      solidDarkBlue: {
+    };
+    variants: {
+      subtle: {
         container: {
           bg: string;
-          hoverBg: string;
-          activeBg: string;
-          borderColor: string;
-          color: string;
-        };
-        button: {
-          bg: string;
-          hoverBg: string;
-          activeBg: string;
-          hoverBorderColor: string;
-          hoverColor: string;
           color: string;
+          bgHover: string;
+          bgPressed: string;
         };
       };
-      solidRed: {
+      subtleSelected: {
         container: {
           bg: string;
-          hoverBg: string;
-          activeBg: string;
-          borderColor: string;
-          color: string;
-        };
-        button: {
-          bg: string;
-          hoverBg: string;
-          activeBg: string;
-          hoverBorderColor: string;
-          activeBorderColor: string;
-          hoverColor: string;
           color: string;
+          bgHover: string;
+          bgPressed: string;
         };
       };
-      solidYellow: {
+      solid: {
         container: {
           bg: string;
-          hoverBg: string;
-          activeBg: string;
-          borderColor: string;
-          color: string;
-        };
-        button: {
-          bg: string;
-          hoverBg: string;
-          activeBg: string;
-          hoverBorderColor: string;
-          hoverColor: string;
           color: string;
+          bgHover: string;
+          bgPressed: string;
         };
       };
-      solidGreen: {
+      solidSelected: {
         container: {
           bg: string;
-          hoverBg: string;
-          activeBg: string;
-          borderColor: string;
-          color: string;
-        };
-        button: {
-          bg: string;
-          hoverBg: string;
-          activeBg: string;
-          hoverBorderColor: string;
-          activeBorderColor: string;
-          hoverColor: string;
           color: string;
+          bgHover: string;
+          bgPressed: string;
         };
       };
     };