@veracity/vui 5.2.2 → 5.3.0-alpha.399291.2606221048

package/dist/svg/svg.js.map

@@ -1 +1 @@
-{"version":3,"file":"svg.js","names":[],"sources":["../../src/svg/svg.tsx"],"sourcesContent":["/* eslint-disable @eslint-react/dom-no-dangerously-set-innerhtml, @eslint-react/dom-no-dangerously-set-innerhtml-with-children */\nimport { useEffect, useRef, useState } from 'react'\n\nimport type { VuiComponent } from '../core'\nimport { css, styled, vui } from '../core'\nimport { cs } from '../utils'\nimport cache from './cache'\nimport { getAttributes, getSvgContent, initState, stringToHTML } from './helpers'\nimport type { SvgProps, SvgState } from './svg.types'\n\nexport const SvgBase: VuiComponent<'svg', SvgProps> = styled.svgBox<SvgProps>(({ pathFill }) => {\n  return css`\n    ${pathFill !== undefined &&\n    (Array.isArray(pathFill)\n      ? pathFill\n          .map(\n            (fill, index) => `\n\t\t\t\t\t& > path:nth-child(${index + 1}) {\n\t\t\t\t\t\tfill: ${fill};\n\t\t\t\t\t}\n\t\t\t\t`,\n          )\n          .join()\n      : `\n\t\t\t\t& > path {\n\t\t\t\t\tfill: ${pathFill};\n\t\t\t\t}\n\t\t\t`)}\n  `\n})\n\n/**\n * Displays an svg element based on provided children or 'src' prop.\n *\n * When using src, it loads the content from the given URL and saves in in cache.\n *\n * Then, renders the svg by parsing loaded content (Review potential for XSS due to innerHTML).\n */\nexport const Svg = vui<'svg', SvgProps>((props, ref) => {\n  const { children, className, src, ...rest } = props\n  const [svgState, setSvgState] = useState<SvgState>(() => initState())\n  const isMountedRef = useRef(false)\n  const srcRef = useRef(src)\n\n  const { content = '', svgAttributes = {} } = svgState\n  const innerHTML = !children ? { __html: content } : undefined\n\n  useEffect(() => {\n    isMountedRef.current = true\n    return () => {\n      isMountedRef.current = false\n    }\n  }, [])\n\n  useEffect(() => {\n    srcRef.current = src\n\n    async function loadSvg(src: string) {\n      try {\n        const response = await cache.get(src)\n        const content = getSvgContent(response)\n        const svgEl = stringToHTML(response) as Element | undefined\n        const svgAttributes = getAttributes(svgEl)\n\n        svgAttributes['data-src'] = src ?? ''\n\n        // Update state only when requested 'src' and current 'src' are the same\n        if (srcRef.current === src && isMountedRef.current) {\n          setSvgState({ content, svgAttributes })\n        }\n      } catch (error) {\n        console.error(error)\n        if (isMountedRef.current) {\n          setSvgState(initState())\n        }\n      }\n    }\n\n    src && void loadSvg(src)\n  }, [src])\n\n  return (\n    <SvgBase\n      className={cs('vui-svg', className)}\n      dangerouslySetInnerHTML={innerHTML}\n      ref={ref}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      {...svgAttributes}\n      {...rest}\n    >\n      {children}\n    </SvgBase>\n  )\n})\n\nSvg.displayName = 'Svg'\n\nexport default Svg\n"],"mappings":";;;;;;;;;AAUA,MAAa,UAAyC,OAAO,QAAkB,EAAE,eAAe;CAC9F,OAAO,GAAG;MACN,aAAa,WACd,MAAM,QAAQ,QAAQ,IACnB,SACG,KACE,MAAM,UAAU;0BACH,QAAQ,EAAE;cACtB,KAAK;;KAGT,CAAC,CACA,KAAK,IACR;;aAEK,SAAS;;MAEhB;;AAEN,CAAC;;;;;;;;AASD,MAAa,MAAM,KAAsB,OAAO,QAAQ;CACtD,MAAM,EAAE,UAAU,WAAW,KAAK,GAAG,SAAS;CAC9C,MAAM,CAAC,UAAU,eAAe,eAAyB,UAAU,CAAC;CACpE,MAAM,eAAe,OAAO,KAAK;CACjC,MAAM,SAAS,OAAO,GAAG;CAEzB,MAAM,EAAE,UAAU,IAAI,gBAAgB,CAAC,MAAM;CAC7C,MAAM,YAAY,CAAC,WAAW,EAAE,QAAQ,QAAQ,IAAI;CAEpD,gBAAgB;EACd,aAAa,UAAU;EACvB,aAAa;GACX,aAAa,UAAU;EACzB;CACF,GAAG,CAAC,CAAC;CAEL,gBAAgB;EACd,OAAO,UAAU;EAEjB,eAAe,QAAQ,KAAa;GAClC,IAAI;IACF,MAAM,WAAW,MAAM,MAAM,IAAI,GAAG;IACpC,MAAM,UAAU,cAAc,QAAQ;IAEtC,MAAM,gBAAgB,cADR,aAAa,QACa,CAAC;IAEzC,cAAc,cAAc,OAAO;IAGnC,IAAI,OAAO,YAAY,OAAO,aAAa,SACzC,YAAY;KAAE;KAAS;IAAc,CAAC;GAE1C,SAAS,OAAO;IACd,QAAQ,MAAM,KAAK;IACnB,IAAI,aAAa,SACf,YAAY,UAAU,CAAC;GAE3B;EACF;EAEA,OAAY,QAAQ,GAAG;CACzB,GAAG,CAAC,GAAG,CAAC;CAER,OACE,oBAAC,SAAD;EACE,WAAW,GAAG,WAAW,SAAS;EAClC,yBAAyB;EACpB;EACL,OAAM;EACN,GAAI;EACJ,GAAI;EAEH;CACM;AAEb,CAAC;AAED,IAAI,cAAc"}
+{"version":3,"file":"svg.js","names":[],"sources":["../../src/svg/svg.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react'\n\nimport type { VuiComponent } from '../core'\nimport type { SvgProps, SvgState } from './svg.types'\n\nimport { css, styled, vui } from '../core'\nimport { cs } from '../utils'\nimport cache from './cache'\nimport { getAttributes, getSvgContent, initState, stringToHTML } from './helpers'\n\nexport const SvgBase: VuiComponent<'svg', SvgProps> = styled.svgBox<SvgProps>(({ pathFill }) => {\n  return css`\n    ${pathFill !== undefined &&\n    (Array.isArray(pathFill)\n      ? pathFill\n          .map(\n            (fill, index) => `\n\t\t\t\t\t& > path:nth-child(${index + 1}) {\n\t\t\t\t\t\tfill: ${fill};\n\t\t\t\t\t}\n\t\t\t\t`,\n          )\n          .join()\n      : `\n\t\t\t\t& > path {\n\t\t\t\t\tfill: ${pathFill};\n\t\t\t\t}\n\t\t\t`)}\n  `\n})\n\n/**\n * Displays an svg element based on provided children or 'src' prop.\n *\n * When using src, it loads the content from the given URL and saves in in cache.\n *\n * Then, renders the svg by parsing loaded content (Review potential for XSS due to innerHTML).\n */\nexport const Svg = vui<'svg', SvgProps>((props, ref) => {\n  const { children, className, src, ...rest } = props\n  const [svgState, setSvgState] = useState<SvgState>(() => initState())\n  const isMountedRef = useRef(false)\n  const srcRef = useRef(src)\n\n  const { content = '', svgAttributes = {} } = svgState\n  const innerHTML = !children ? { __html: content } : undefined\n\n  useEffect(() => {\n    isMountedRef.current = true\n    return () => {\n      isMountedRef.current = false\n    }\n  }, [])\n\n  useEffect(() => {\n    srcRef.current = src\n\n    async function loadSvg(src: string) {\n      try {\n        const response = await cache.get(src)\n        const content = getSvgContent(response)\n        const svgEl = stringToHTML(response) as Element | undefined\n        const svgAttributes = getAttributes(svgEl)\n\n        svgAttributes['data-src'] = src ?? ''\n\n        // Update state only when requested 'src' and current 'src' are the same\n        if (srcRef.current === src && isMountedRef.current) {\n          setSvgState({ content, svgAttributes })\n        }\n      } catch (error) {\n        console.error(error)\n        if (isMountedRef.current) {\n          setSvgState(initState())\n        }\n      }\n    }\n\n    src && void loadSvg(src)\n  }, [src])\n\n  return (\n    <SvgBase\n      className={cs('vui-svg', className)}\n      dangerouslySetInnerHTML={innerHTML}\n      ref={ref}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      {...svgAttributes}\n      {...rest}\n    >\n      {children}\n    </SvgBase>\n  )\n})\n\nSvg.displayName = 'Svg'\n\nexport default Svg\n"],"mappings":";;;;;;;;;AAUA,MAAa,UAAyC,OAAO,QAAkB,EAAE,eAAe;CAC9F,OAAO,GAAG;MACN,aAAa,WACd,MAAM,QAAQ,QAAQ,IACnB,SACG,KACE,MAAM,UAAU;0BACH,QAAQ,EAAE;cACtB,KAAK;;KAGT,CAAC,CACA,KAAK,IACR;;aAEK,SAAS;;MAEhB;;AAEN,CAAC;;;;;;;;AASD,MAAa,MAAM,KAAsB,OAAO,QAAQ;CACtD,MAAM,EAAE,UAAU,WAAW,KAAK,GAAG,SAAS;CAC9C,MAAM,CAAC,UAAU,eAAe,eAAyB,UAAU,CAAC;CACpE,MAAM,eAAe,OAAO,KAAK;CACjC,MAAM,SAAS,OAAO,GAAG;CAEzB,MAAM,EAAE,UAAU,IAAI,gBAAgB,CAAC,MAAM;CAC7C,MAAM,YAAY,CAAC,WAAW,EAAE,QAAQ,QAAQ,IAAI;CAEpD,gBAAgB;EACd,aAAa,UAAU;EACvB,aAAa;GACX,aAAa,UAAU;EACzB;CACF,GAAG,CAAC,CAAC;CAEL,gBAAgB;EACd,OAAO,UAAU;EAEjB,eAAe,QAAQ,KAAa;GAClC,IAAI;IACF,MAAM,WAAW,MAAM,MAAM,IAAI,GAAG;IACpC,MAAM,UAAU,cAAc,QAAQ;IAEtC,MAAM,gBAAgB,cADR,aAAa,QACa,CAAC;IAEzC,cAAc,cAAc,OAAO;IAGnC,IAAI,OAAO,YAAY,OAAO,aAAa,SACzC,YAAY;KAAE;KAAS;IAAc,CAAC;GAE1C,SAAS,OAAO;IACd,QAAQ,MAAM,KAAK;IACnB,IAAI,aAAa,SACf,YAAY,UAAU,CAAC;GAE3B;EACF;EAEA,OAAY,QAAQ,GAAG;CACzB,GAAG,CAAC,GAAG,CAAC;CAER,OACE,oBAAC,SAAD;EACE,WAAW,GAAG,WAAW,SAAS;EAClC,yBAAyB;EACpB;EACL,OAAM;EACN,GAAI;EACJ,GAAI;EAEH;CACM;AAEb,CAAC;AAED,IAAI,cAAc"}

package/dist/switch/consts.js

@@ -12,5 +12,5 @@ const switchColors = {
 
 //#endregion
 export { switchColors };
-globalThis.__vuiVersion__ = "5.2.2"
+globalThis.__vuiVersion__ = "5.3.0"
 //# sourceMappingURL=consts.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"context.d.ts","names":[],"sources":["../../src/switch/context.ts"],"mappings":";;;cAGO,cAAA,kBAAc,QAAA,CAAA,aAAA,GAAE,gBAAA,QAAgB,aAAsD"}
+{"version":3,"file":"context.d.ts","names":[],"sources":["../../src/switch/context.ts"],"mappings":";;;cAIO,cAAA,kBAAc,QAAA,CAAA,aAAA,GAAE,gBAAA,QAAgB,aAAsD"}

package/dist/switch/context.js

@@ -5,5 +5,5 @@ const [SwitchProvider, useSwitchContext] = createContext({ isOptional: true });
 
 //#endregion
 export { SwitchProvider, useSwitchContext };
-globalThis.__vuiVersion__ = "5.2.2"
+globalThis.__vuiVersion__ = "5.3.0"
 //# sourceMappingURL=context.js.map

package/dist/switch/context.js.map

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":[],"sources":["../../src/switch/context.ts"],"sourcesContent":["import { createContext } from '../utils'\nimport type { SwitchContext } from './switch.types'\n\nconst [SwitchProvider, useSwitchContext] = createContext<SwitchContext>({ isOptional: true })\n\nexport { SwitchProvider, useSwitchContext }\n"],"mappings":";;;AAGA,MAAM,CAAC,gBAAgB,oBAAoB,cAA6B,EAAE,YAAY,KAAK,CAAC"}
+{"version":3,"file":"context.js","names":[],"sources":["../../src/switch/context.ts"],"sourcesContent":["import type { SwitchContext } from './switch.types'\n\nimport { createContext } from '../utils'\n\nconst [SwitchProvider, useSwitchContext] = createContext<SwitchContext>({ isOptional: true })\n\nexport { SwitchProvider, useSwitchContext }\n"],"mappings":";;;AAIA,MAAM,CAAC,gBAAgB,oBAAoB,cAA6B,EAAE,YAAY,KAAK,CAAC"}

package/dist/switch/switchButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"switchButton.d.ts","names":[],"sources":["../../src/switch/switchButton.tsx"],"mappings":";;;;cAyCa,gBAAA,8BAAgB,eAAA,cAkB5B,WAlB4B;;;;;cAwBhB,YAAA,EAAY,YAAA,SAAA,iBAAA"}
+{"version":3,"file":"switchButton.d.ts","names":[],"sources":["../../src/switch/switchButton.tsx"],"mappings":";;;;cA0Ca,gBAAA,8BAAgB,eAAA,cAkB5B,WAlB4B;;;;;cAwBhB,YAAA,EAAY,YAAA,SAAA,iBAAA"}

package/dist/switch/switchButton.js

@@ -144,5 +144,5 @@ SwitchButton.displayName = "SwitchButton";
 
 //#endregion
 export { SwitchButtonBase, SwitchButton as default };
-globalThis.__vuiVersion__ = "5.2.2"
+globalThis.__vuiVersion__ = "5.3.0"
 //# sourceMappingURL=switchButton.js.map

package/dist/switch/switchButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"switchButton.js","names":[],"sources":["../../src/switch/switchButton.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react'\n\nimport { omitThemingProps, styled, useStyleConfig, vui } from '../core'\nimport type { ChangeEvent, FocusEvent } from '../utils'\nimport { cs, filterUndefined } from '../utils'\nimport { switchColors } from './consts'\nimport { useSwitchContext } from './context'\nimport type { SwitchButtonProps } from './switch.types'\n\nconst SwitchInput = styled.inputBox`\n  cursor: inherit;\n  height: calc(100% + 10px);\n  left: -5px;\n  margin: 0;\n  opacity: 0;\n  padding: 0;\n  position: absolute;\n  top: -5px;\n  width: calc(100% + 10px);\n  z-index: 1;\n`\n\nconst SwitchFoundation = styled.spanBox`\n  border-radius: 100px;\n  display: inline-flex;\n  flex-shrink: 0;\n  transition-duration: fast;\n  position: relative;\n`\n\n/** Circular element that moves along the track when toggled. */\nconst SwitchThumb = styled(SwitchFoundation)`\n  position: absolute;\n`\n\n/** Track element along which the thumb moves when toggled. */\nconst SwitchTrack = styled(SwitchFoundation)`\n  align-items: center;\n  flex: 1;\n`\n\nexport const SwitchButtonBase = styled(SwitchFoundation)`\n  color: white;\n  cursor: pointer;\n  --x-ring-color: green;\n\n  &[aria-disabled='true'] {\n    cursor: not-allowed;\n\n    .vui-switchThumb {\n      background-color: ${switchColors.disabled};\n    }\n\n    .vui-switchTrack {\n      --x-ring-color: ${switchColors.disabled};\n      background-color: ${switchColors.disabledBg};\n      color: ${switchColors.disabled};\n    }\n  }\n`\n\n/**\n * Controls the logic and visuals of multiple inner parts, such as input, track or thumb elements.\n * Handles controlled and uncontrolled modes.\n */\nexport const SwitchButton = vui<'span', SwitchButtonProps>((props, ref) => {\n  const mergedProps = { ...useSwitchContext(), ...props }\n  const {\n    checked,\n    className,\n    defaultChecked,\n    disabled,\n    id,\n    innerLabelOff,\n    innerLabelOn,\n    inputProps,\n    inputRef,\n    name,\n    onBlur,\n    onChange,\n    onFocus,\n    required,\n    value,\n    ...rest\n  } = omitThemingProps(mergedProps)\n  const { current: isControlled } = useRef(checked !== undefined)\n  const [isChecked, setIsChecked] = useState(checked ?? defaultChecked)\n  const [isFocused, setIsFocused] = useState(false)\n  const styles = useStyleConfig('Switch', useSwitchContext())\n  const { thumb: thumbStyles, track: trackStyles, ...buttonStyles } = styles.button\n\n  useEffect(() => {\n    if (isControlled) setIsChecked(checked)\n  }, [checked, isControlled])\n\n  function handleOnBlur(e: FocusEvent) {\n    setIsFocused(false)\n    onBlur?.(e)\n  }\n\n  function handleOnChange(e: ChangeEvent) {\n    if (!isControlled) setIsChecked(e.target.checked)\n    onChange?.(e)\n  }\n\n  function handleOnFocus(e: FocusEvent) {\n    setIsFocused(true)\n    onFocus?.(e)\n  }\n\n  const hDiff = (thumbStyles.h - trackStyles.h) / 2\n  const thumbOffset = `calc(100% - ${Math.abs(hDiff - thumbStyles.h)}px)`\n  const labelOffset = `${thumbStyles.h - hDiff + 4}px`\n\n  const aliasedProps = filterUndefined({\n    'aria-disabled': disabled,\n    'data-focused': isFocused ? true : false,\n  })\n\n  const thumbAliasedProps = filterUndefined({\n    left: isChecked ? thumbOffset : -hDiff,\n    ring: isFocused ? thumbStyles.ring : 0,\n  })\n\n  const trackAliasedProps = filterUndefined({\n    bg: isChecked ? trackStyles.bg : innerLabelOff ? switchColors.offBgContrast : switchColors.offBg,\n    pl: isChecked ? 1 : labelOffset,\n    pr: isChecked ? labelOffset : 1,\n    ring: !disabled ? (isFocused ? trackStyles.ring : 0) : 3,\n  })\n\n  return (\n    <SwitchButtonBase\n      className={cs('vui-switchButton', className)}\n      ref={ref}\n      {...buttonStyles}\n      {...aliasedProps}\n      {...rest}\n    >\n      <SwitchInput\n        className=\"vui-switchInput\"\n        onBlur={handleOnBlur}\n        onChange={handleOnChange}\n        onFocus={handleOnFocus}\n        ref={inputRef}\n        tabIndex={-1}\n        type=\"checkbox\"\n        {...{ checked, defaultChecked, disabled, id, name, required, value }}\n        {...inputProps}\n      />\n\n      <SwitchTrack className=\"vui-switchTrack\" tabIndex={0} {...trackStyles} {...trackAliasedProps}>\n        {!isChecked && innerLabelOff}\n\n        <SwitchThumb className=\"vui-switchThumb\" {...thumbStyles} {...thumbAliasedProps} />\n\n        {isChecked && innerLabelOn}\n      </SwitchTrack>\n    </SwitchButtonBase>\n  )\n})\n\nSwitchButton.displayName = 'SwitchButton'\n\nexport default SwitchButton\n"],"mappings":";;;;;;;;;;;AASA,MAAM,cAAc,OAAO,QAAQ;;;;;;;;;;;;AAanC,MAAM,mBAAmB,OAAO,OAAO;;;;;;;;AASvC,MAAM,cAAc,OAAO,gBAAgB,CAAC;;;;AAK5C,MAAM,cAAc,OAAO,gBAAgB,CAAC;;;;AAK5C,MAAa,mBAAmB,OAAO,gBAAgB,CAAC;;;;;;;;;0BAS9B,aAAa,SAAS;;;;wBAIxB,aAAa,SAAS;0BACpB,aAAa,WAAW;eACnC,aAAa,SAAS;;;;;;;;AASrC,MAAa,eAAe,KAAgC,OAAO,QAAQ;CAEzE,MAAM,EACJ,SACA,WACA,gBACA,UACA,IACA,eACA,cACA,YACA,UACA,MACA,QACA,UACA,SACA,UACA,OACA,GAAG,SACD,iBAAiB;EAlBC,GAAG,iBAAiB;EAAG,GAAG;CAkBjB,CAAC;CAChC,MAAM,EAAE,SAAS,iBAAiB,OAAO,YAAY,MAAS;CAC9D,MAAM,CAAC,WAAW,gBAAgB,SAAS,WAAW,cAAc;CACpE,MAAM,CAAC,WAAW,gBAAgB,SAAS,KAAK;CAEhD,MAAM,EAAE,OAAO,aAAa,OAAO,aAAa,GAAG,iBADpC,eAAe,UAAU,iBAAiB,CACgB,CAAC,CAAC;CAE3E,gBAAgB;EACd,IAAI,cAAc,aAAa,OAAO;CACxC,GAAG,CAAC,SAAS,YAAY,CAAC;CAE1B,SAAS,aAAa,GAAe;EACnC,aAAa,KAAK;EAClB,SAAS,CAAC;CACZ;CAEA,SAAS,eAAe,GAAgB;EACtC,IAAI,CAAC,cAAc,aAAa,EAAE,OAAO,OAAO;EAChD,WAAW,CAAC;CACd;CAEA,SAAS,cAAc,GAAe;EACpC,aAAa,IAAI;EACjB,UAAU,CAAC;CACb;CAEA,MAAM,SAAS,YAAY,IAAI,YAAY,KAAK;CAChD,MAAM,cAAc,eAAe,KAAK,IAAI,QAAQ,YAAY,CAAC,EAAE;CACnE,MAAM,cAAc,GAAG,YAAY,IAAI,QAAQ,EAAE;CAEjD,MAAM,eAAe,gBAAgB;EACnC,iBAAiB;EACjB,gBAAgB,YAAY,OAAO;CACrC,CAAC;CAED,MAAM,oBAAoB,gBAAgB;EACxC,MAAM,YAAY,cAAc,CAAC;EACjC,MAAM,YAAY,YAAY,OAAO;CACvC,CAAC;CAED,MAAM,oBAAoB,gBAAgB;EACxC,IAAI,YAAY,YAAY,KAAK,gBAAgB,aAAa,gBAAgB,aAAa;EAC3F,IAAI,YAAY,IAAI;EACpB,IAAI,YAAY,cAAc;EAC9B,MAAM,CAAC,WAAY,YAAY,YAAY,OAAO,IAAK;CACzD,CAAC;CAED,OACE,qBAAC,kBAAD;EACE,WAAW,GAAG,oBAAoB,SAAS;EACtC;EACL,GAAI;EACJ,GAAI;EACJ,GAAI;YALN,CAOE,oBAAC,aAAD;GACE,WAAU;GACV,QAAQ;GACR,UAAU;GACV,SAAS;GACT,KAAK;GACL,UAAU;GACV,MAAK;GACC;GAAS;GAAgB;GAAU;GAAI;GAAM;GAAU;GAC7D,GAAI;EACL,IAED,qBAAC,aAAD;GAAa,WAAU;GAAkB,UAAU;GAAG,GAAI;GAAa,GAAI;aAA3E;IACG,CAAC,aAAa;IAEf,oBAAC,aAAD;KAAa,WAAU;KAAkB,GAAI;KAAa,GAAI;IAAoB;IAEjF,aAAa;GACH;IACG;;AAEtB,CAAC;AAED,aAAa,cAAc"}
+{"version":3,"file":"switchButton.js","names":[],"sources":["../../src/switch/switchButton.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react'\n\nimport type { ChangeEvent, FocusEvent } from '../utils'\nimport type { SwitchButtonProps } from './switch.types'\n\nimport { omitThemingProps, styled, useStyleConfig, vui } from '../core'\nimport { cs, filterUndefined } from '../utils'\nimport { switchColors } from './consts'\nimport { useSwitchContext } from './context'\n\nconst SwitchInput = styled.inputBox`\n  cursor: inherit;\n  height: calc(100% + 10px);\n  left: -5px;\n  margin: 0;\n  opacity: 0;\n  padding: 0;\n  position: absolute;\n  top: -5px;\n  width: calc(100% + 10px);\n  z-index: 1;\n`\n\nconst SwitchFoundation = styled.spanBox`\n  border-radius: 100px;\n  display: inline-flex;\n  flex-shrink: 0;\n  transition-duration: fast;\n  position: relative;\n`\n\n/** Circular element that moves along the track when toggled. */\nconst SwitchThumb = styled(SwitchFoundation)`\n  position: absolute;\n`\n\n/** Track element along which the thumb moves when toggled. */\nconst SwitchTrack = styled(SwitchFoundation)`\n  align-items: center;\n  flex: 1;\n`\n\nexport const SwitchButtonBase = styled(SwitchFoundation)`\n  color: white;\n  cursor: pointer;\n  --x-ring-color: green;\n\n  &[aria-disabled='true'] {\n    cursor: not-allowed;\n\n    .vui-switchThumb {\n      background-color: ${switchColors.disabled};\n    }\n\n    .vui-switchTrack {\n      --x-ring-color: ${switchColors.disabled};\n      background-color: ${switchColors.disabledBg};\n      color: ${switchColors.disabled};\n    }\n  }\n`\n\n/**\n * Controls the logic and visuals of multiple inner parts, such as input, track or thumb elements.\n * Handles controlled and uncontrolled modes.\n */\nexport const SwitchButton = vui<'span', SwitchButtonProps>((props, ref) => {\n  const mergedProps = { ...useSwitchContext(), ...props }\n  const {\n    checked,\n    className,\n    defaultChecked,\n    disabled,\n    id,\n    innerLabelOff,\n    innerLabelOn,\n    inputProps,\n    inputRef,\n    name,\n    onBlur,\n    onChange,\n    onFocus,\n    required,\n    value,\n    ...rest\n  } = omitThemingProps(mergedProps)\n  const { current: isControlled } = useRef(checked !== undefined)\n  const [isChecked, setIsChecked] = useState(checked ?? defaultChecked)\n  const [isFocused, setIsFocused] = useState(false)\n  const styles = useStyleConfig('Switch', useSwitchContext())\n  const { thumb: thumbStyles, track: trackStyles, ...buttonStyles } = styles.button\n\n  useEffect(() => {\n    if (isControlled) setIsChecked(checked)\n  }, [checked, isControlled])\n\n  function handleOnBlur(e: FocusEvent) {\n    setIsFocused(false)\n    onBlur?.(e)\n  }\n\n  function handleOnChange(e: ChangeEvent) {\n    if (!isControlled) setIsChecked(e.target.checked)\n    onChange?.(e)\n  }\n\n  function handleOnFocus(e: FocusEvent) {\n    setIsFocused(true)\n    onFocus?.(e)\n  }\n\n  const hDiff = (thumbStyles.h - trackStyles.h) / 2\n  const thumbOffset = `calc(100% - ${Math.abs(hDiff - thumbStyles.h)}px)`\n  const labelOffset = `${thumbStyles.h - hDiff + 4}px`\n\n  const aliasedProps = filterUndefined({\n    'aria-disabled': disabled,\n    'data-focused': isFocused ? true : false,\n  })\n\n  const thumbAliasedProps = filterUndefined({\n    left: isChecked ? thumbOffset : -hDiff,\n    ring: isFocused ? thumbStyles.ring : 0,\n  })\n\n  const trackAliasedProps = filterUndefined({\n    bg: isChecked ? trackStyles.bg : innerLabelOff ? switchColors.offBgContrast : switchColors.offBg,\n    pl: isChecked ? 1 : labelOffset,\n    pr: isChecked ? labelOffset : 1,\n    ring: !disabled ? (isFocused ? trackStyles.ring : 0) : 3,\n  })\n\n  return (\n    <SwitchButtonBase\n      className={cs('vui-switchButton', className)}\n      ref={ref}\n      {...buttonStyles}\n      {...aliasedProps}\n      {...rest}\n    >\n      <SwitchInput\n        className=\"vui-switchInput\"\n        onBlur={handleOnBlur}\n        onChange={handleOnChange}\n        onFocus={handleOnFocus}\n        ref={inputRef}\n        tabIndex={-1}\n        type=\"checkbox\"\n        {...{ checked, defaultChecked, disabled, id, name, required, value }}\n        {...inputProps}\n      />\n\n      <SwitchTrack className=\"vui-switchTrack\" tabIndex={0} {...trackStyles} {...trackAliasedProps}>\n        {!isChecked && innerLabelOff}\n\n        <SwitchThumb className=\"vui-switchThumb\" {...thumbStyles} {...thumbAliasedProps} />\n\n        {isChecked && innerLabelOn}\n      </SwitchTrack>\n    </SwitchButtonBase>\n  )\n})\n\nSwitchButton.displayName = 'SwitchButton'\n\nexport default SwitchButton\n"],"mappings":";;;;;;;;;;;AAUA,MAAM,cAAc,OAAO,QAAQ;;;;;;;;;;;;AAanC,MAAM,mBAAmB,OAAO,OAAO;;;;;;;;AASvC,MAAM,cAAc,OAAO,gBAAgB,CAAC;;;;AAK5C,MAAM,cAAc,OAAO,gBAAgB,CAAC;;;;AAK5C,MAAa,mBAAmB,OAAO,gBAAgB,CAAC;;;;;;;;;0BAS9B,aAAa,SAAS;;;;wBAIxB,aAAa,SAAS;0BACpB,aAAa,WAAW;eACnC,aAAa,SAAS;;;;;;;;AASrC,MAAa,eAAe,KAAgC,OAAO,QAAQ;CAEzE,MAAM,EACJ,SACA,WACA,gBACA,UACA,IACA,eACA,cACA,YACA,UACA,MACA,QACA,UACA,SACA,UACA,OACA,GAAG,SACD,iBAAiB;EAlBC,GAAG,iBAAiB;EAAG,GAAG;CAkBjB,CAAC;CAChC,MAAM,EAAE,SAAS,iBAAiB,OAAO,YAAY,MAAS;CAC9D,MAAM,CAAC,WAAW,gBAAgB,SAAS,WAAW,cAAc;CACpE,MAAM,CAAC,WAAW,gBAAgB,SAAS,KAAK;CAEhD,MAAM,EAAE,OAAO,aAAa,OAAO,aAAa,GAAG,iBADpC,eAAe,UAAU,iBAAiB,CACgB,CAAC,CAAC;CAE3E,gBAAgB;EACd,IAAI,cAAc,aAAa,OAAO;CACxC,GAAG,CAAC,SAAS,YAAY,CAAC;CAE1B,SAAS,aAAa,GAAe;EACnC,aAAa,KAAK;EAClB,SAAS,CAAC;CACZ;CAEA,SAAS,eAAe,GAAgB;EACtC,IAAI,CAAC,cAAc,aAAa,EAAE,OAAO,OAAO;EAChD,WAAW,CAAC;CACd;CAEA,SAAS,cAAc,GAAe;EACpC,aAAa,IAAI;EACjB,UAAU,CAAC;CACb;CAEA,MAAM,SAAS,YAAY,IAAI,YAAY,KAAK;CAChD,MAAM,cAAc,eAAe,KAAK,IAAI,QAAQ,YAAY,CAAC,EAAE;CACnE,MAAM,cAAc,GAAG,YAAY,IAAI,QAAQ,EAAE;CAEjD,MAAM,eAAe,gBAAgB;EACnC,iBAAiB;EACjB,gBAAgB,YAAY,OAAO;CACrC,CAAC;CAED,MAAM,oBAAoB,gBAAgB;EACxC,MAAM,YAAY,cAAc,CAAC;EACjC,MAAM,YAAY,YAAY,OAAO;CACvC,CAAC;CAED,MAAM,oBAAoB,gBAAgB;EACxC,IAAI,YAAY,YAAY,KAAK,gBAAgB,aAAa,gBAAgB,aAAa;EAC3F,IAAI,YAAY,IAAI;EACpB,IAAI,YAAY,cAAc;EAC9B,MAAM,CAAC,WAAY,YAAY,YAAY,OAAO,IAAK;CACzD,CAAC;CAED,OACE,qBAAC,kBAAD;EACE,WAAW,GAAG,oBAAoB,SAAS;EACtC;EACL,GAAI;EACJ,GAAI;EACJ,GAAI;YALN,CAOE,oBAAC,aAAD;GACE,WAAU;GACV,QAAQ;GACR,UAAU;GACV,SAAS;GACT,KAAK;GACL,UAAU;GACV,MAAK;GACC;GAAS;GAAgB;GAAU;GAAI;GAAM;GAAU;GAC7D,GAAI;EACL,IAED,qBAAC,aAAD;GAAa,WAAU;GAAkB,UAAU;GAAG,GAAI;GAAa,GAAI;aAA3E;IACG,CAAC,aAAa;IAEf,oBAAC,aAAD;KAAa,WAAU;KAAkB,GAAI;KAAa,GAAI;IAAoB;IAEjF,aAAa;GACH;IACG;;AAEtB,CAAC;AAED,aAAa,cAAc"}

package/dist/switch/switchLabel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"switchLabel.d.ts","names":[],"sources":["../../src/switch/switchLabel.tsx"],"mappings":";;;;cAOa,WAAA,EAAW,YAAA,SAAA,MAAA"}
+{"version":3,"file":"switchLabel.d.ts","names":[],"sources":["../../src/switch/switchLabel.tsx"],"mappings":";;;;cAQa,WAAA,EAAW,YAAA,SAAA,MAAA"}

package/dist/switch/switchLabel.js

@@ -23,5 +23,5 @@ SwitchLabel.displayName = "SwitchLabel";
 
 //#endregion
 export { SwitchLabel as default };
-globalThis.__vuiVersion__ = "5.2.2"
+globalThis.__vuiVersion__ = "5.3.0"
 //# sourceMappingURL=switchLabel.js.map

package/dist/switch/switchLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"switchLabel.js","names":[],"sources":["../../src/switch/switchLabel.tsx"],"sourcesContent":["import { useStyleConfig, vui } from '../core'\nimport type { TProps } from '../t'\nimport T from '../t'\nimport { cs } from '../utils'\nimport { useSwitchContext } from './context'\n\n/** Displays label text within the Switch component. */\nexport const SwitchLabel = vui<'span', TProps>((props, ref) => {\n  const { className, ...rest } = props\n  const styles = useStyleConfig('Switch', useSwitchContext())\n\n  // <T> has xs but not xl\n  if (styles.label.size === 'xl') {\n    rest.fontSize = 20\n  }\n\n  return <T className={cs('vui-switchLabel', className)} display=\"flex\" ref={ref} {...styles.label} {...rest} />\n})\n\nSwitchLabel.displayName = 'SwitchLabel'\n\nexport default SwitchLabel\n"],"mappings":";;;;;;;;;AAOA,MAAa,cAAc,KAAqB,OAAO,QAAQ;CAC7D,MAAM,EAAE,WAAW,GAAG,SAAS;CAC/B,MAAM,SAAS,eAAe,UAAU,iBAAiB,CAAC;CAG1D,IAAI,OAAO,MAAM,SAAS,MACxB,KAAK,WAAW;CAGlB,OAAO,oBAAC,GAAD;EAAG,WAAW,GAAG,mBAAmB,SAAS;EAAG,SAAQ;EAAY;EAAK,GAAI,OAAO;EAAO,GAAI;CAAO;AAC/G,CAAC;AAED,YAAY,cAAc"}
+{"version":3,"file":"switchLabel.js","names":[],"sources":["../../src/switch/switchLabel.tsx"],"sourcesContent":["import type { TProps } from '../t'\n\nimport { useStyleConfig, vui } from '../core'\nimport T from '../t'\nimport { cs } from '../utils'\nimport { useSwitchContext } from './context'\n\n/** Displays label text within the Switch component. */\nexport const SwitchLabel = vui<'span', TProps>((props, ref) => {\n  const { className, ...rest } = props\n  const styles = useStyleConfig('Switch', useSwitchContext())\n\n  // <T> has xs but not xl\n  if (styles.label.size === 'xl') {\n    rest.fontSize = 20\n  }\n\n  return <T className={cs('vui-switchLabel', className)} display=\"flex\" ref={ref} {...styles.label} {...rest} />\n})\n\nSwitchLabel.displayName = 'SwitchLabel'\n\nexport default SwitchLabel\n"],"mappings":";;;;;;;;;AAQA,MAAa,cAAc,KAAqB,OAAO,QAAQ;CAC7D,MAAM,EAAE,WAAW,GAAG,SAAS;CAC/B,MAAM,SAAS,eAAe,UAAU,iBAAiB,CAAC;CAG1D,IAAI,OAAO,MAAM,SAAS,MACxB,KAAK,WAAW;CAGlB,OAAO,oBAAC,GAAD;EAAG,WAAW,GAAG,mBAAmB,SAAS;EAAG,SAAQ;EAAY;EAAK,GAAI,OAAO;EAAO,GAAI;CAAO;AAC/G,CAAC;AAED,YAAY,cAAc"}

package/dist/switch/switchMain.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"switchMain.d.ts","names":[],"sources":["../../src/switch/switchMain.tsx"],"mappings":";;;;;;cAUa,UAAA,8BAAU,eAAA,sCAAA,YAAA,EActB,WAdsB;;;;;cAoBV,MAAA,EA4DP,YAAA,UAAsB,WAAA;EAC1B,MAAA,SAAe,YAAA;EACf,KAAA,SAAc,WAAA;AAAA"}
+{"version":3,"file":"switchMain.d.ts","names":[],"sources":["../../src/switch/switchMain.tsx"],"mappings":";;;;;;cAWa,UAAA,8BAAU,eAAA,sCAAA,YAAA,EActB,WAdsB;;;;;cAoBV,MAAA,EA4DP,YAAA,UAAsB,WAAA;EAC1B,MAAA,SAAe,YAAA;EACf,KAAA,SAAc,WAAA;AAAA"}

package/dist/switch/switchMain.js

@@ -93,5 +93,5 @@ Switch.displayName = "Switch";
 
 //#endregion
 export { SwitchBase, Switch as default };
-globalThis.__vuiVersion__ = "5.2.2"
+globalThis.__vuiVersion__ = "5.3.0"
 //# sourceMappingURL=switchMain.js.map

package/dist/switch/switchMain.js.map

@@ -1 +1 @@
-{"version":3,"file":"switchMain.js","names":[],"sources":["../../src/switch/switchMain.tsx"],"sourcesContent":["import { useMemo } from 'react'\n\nimport type { VuiComponent } from '../core'\nimport { styled, useStyleConfig, vui } from '../core'\nimport { cs, filterUndefined, isReactText } from '../utils'\nimport { SwitchProvider } from './context'\nimport type { SwitchProps } from './switch.types'\nimport { SwitchButton } from './switchButton'\nimport { SwitchLabel } from './switchLabel'\n\nexport const SwitchBase = styled.labelBox`\n  align-items: center;\n  cursor: pointer;\n  display: inline-flex;\n  line-height: normal;\n  width: fit-content;\n\n  &[aria-disabled='true'] {\n    cursor: not-allowed;\n\n    .vui-switchLabel {\n      color: disabled.color;\n    }\n  }\n`\n\n/**\n * Displays a toggle button with supporting text. Allows passing custom elements as side labels and inner labels.\n * Forwards many relevant props to the innner input element. Exposes some props to the children via context.\n */\nexport const Switch = vui<'label', SwitchProps>((props, ref) => {\n  const {\n    button,\n    checked,\n    children,\n    className,\n    defaultChecked,\n    disabled,\n    id,\n    innerLabelOff,\n    innerLabelOn,\n    inputProps,\n    inputRef,\n    labelLeft,\n    labelRight,\n    name,\n    onBlur,\n    onChange,\n    onFocus,\n    required,\n    size,\n    value,\n    variant,\n    ...rest\n  } = props\n  const styles = useStyleConfig('Switch', props)\n\n  const context = useMemo(\n    () =>\n      filterUndefined({\n        checked,\n        defaultChecked,\n        disabled,\n        name,\n        onBlur,\n        onChange,\n        onFocus,\n        required,\n        size,\n        value,\n        variant,\n      }),\n    [checked, defaultChecked, disabled, name, onBlur, onChange, onFocus, required, size, value, variant],\n  )\n\n  const aliasedProps = filterUndefined({\n    'aria-disabled': disabled,\n  })\n\n  return (\n    <SwitchProvider value={context}>\n      <SwitchBase className={cs('vui-switch', className)} ref={ref} {...styles.container} {...aliasedProps} {...rest}>\n        {isReactText(labelLeft) ? <SwitchLabel mr={1} text={labelLeft} /> : labelLeft}\n\n        {children ?? button ?? <SwitchButton {...{ id, innerLabelOff, innerLabelOn, inputProps, inputRef }} />}\n\n        {isReactText(labelRight) ? <SwitchLabel ml={1} text={labelRight} /> : labelRight}\n      </SwitchBase>\n    </SwitchProvider>\n  )\n}) as VuiComponent<'label', SwitchProps> & {\n  Button: typeof SwitchButton\n  Label: typeof SwitchLabel\n}\n\nSwitch.Button = SwitchButton\nSwitch.Label = SwitchLabel\nSwitch.displayName = 'Switch'\n\nexport default Switch\n"],"mappings":";;;;;;;;;;;;;AAUA,MAAa,aAAa,OAAO,QAAQ;;;;;;;;;;;;;;;;;;;AAoBzC,MAAa,SAAS,KAA2B,OAAO,QAAQ;CAC9D,MAAM,EACJ,QACA,SACA,UACA,WACA,gBACA,UACA,IACA,eACA,cACA,YACA,UACA,WACA,YACA,MACA,QACA,UACA,SACA,UACA,MACA,OACA,SACA,GAAG,SACD;CACJ,MAAM,SAAS,eAAe,UAAU,KAAK;CAE7C,MAAM,UAAU,cAEZ,gBAAgB;EACd;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,GACH;EAAC;EAAS;EAAgB;EAAU;EAAM;EAAQ;EAAU;EAAS;EAAU;EAAM;EAAO;CAAO,CACrG;CAEA,MAAM,eAAe,gBAAgB,EACnC,iBAAiB,SACnB,CAAC;CAED,OACE,oBAAC,gBAAD;EAAgB,OAAO;YACrB,qBAAC,YAAD;GAAY,WAAW,GAAG,cAAc,SAAS;GAAQ;GAAK,GAAI,OAAO;GAAW,GAAI;GAAc,GAAI;aAA1G;IACG,YAAY,SAAS,IAAI,oBAAC,aAAD;KAAa,IAAI;KAAG,MAAM;IAAY,KAAI;IAEnE,YAAY,UAAU,oBAAC,cAAD;KAAoB;KAAI;KAAe;KAAc;KAAY;IAAa;IAEpG,YAAY,UAAU,IAAI,oBAAC,aAAD;KAAa,IAAI;KAAG,MAAM;IAAa,KAAI;GAC5D;;CACE;AAEpB,CAAC;AAKD,OAAO,SAAS;AAChB,OAAO,QAAQ;AACf,OAAO,cAAc"}
+{"version":3,"file":"switchMain.js","names":[],"sources":["../../src/switch/switchMain.tsx"],"sourcesContent":["import { useMemo } from 'react'\n\nimport type { VuiComponent } from '../core'\nimport type { SwitchProps } from './switch.types'\n\nimport { styled, useStyleConfig, vui } from '../core'\nimport { cs, filterUndefined, isReactText } from '../utils'\nimport { SwitchProvider } from './context'\nimport { SwitchButton } from './switchButton'\nimport { SwitchLabel } from './switchLabel'\n\nexport const SwitchBase = styled.labelBox`\n  align-items: center;\n  cursor: pointer;\n  display: inline-flex;\n  line-height: normal;\n  width: fit-content;\n\n  &[aria-disabled='true'] {\n    cursor: not-allowed;\n\n    .vui-switchLabel {\n      color: disabled.color;\n    }\n  }\n`\n\n/**\n * Displays a toggle button with supporting text. Allows passing custom elements as side labels and inner labels.\n * Forwards many relevant props to the innner input element. Exposes some props to the children via context.\n */\nexport const Switch = vui<'label', SwitchProps>((props, ref) => {\n  const {\n    button,\n    checked,\n    children,\n    className,\n    defaultChecked,\n    disabled,\n    id,\n    innerLabelOff,\n    innerLabelOn,\n    inputProps,\n    inputRef,\n    labelLeft,\n    labelRight,\n    name,\n    onBlur,\n    onChange,\n    onFocus,\n    required,\n    size,\n    value,\n    variant,\n    ...rest\n  } = props\n  const styles = useStyleConfig('Switch', props)\n\n  const context = useMemo(\n    () =>\n      filterUndefined({\n        checked,\n        defaultChecked,\n        disabled,\n        name,\n        onBlur,\n        onChange,\n        onFocus,\n        required,\n        size,\n        value,\n        variant,\n      }),\n    [checked, defaultChecked, disabled, name, onBlur, onChange, onFocus, required, size, value, variant],\n  )\n\n  const aliasedProps = filterUndefined({\n    'aria-disabled': disabled,\n  })\n\n  return (\n    <SwitchProvider value={context}>\n      <SwitchBase className={cs('vui-switch', className)} ref={ref} {...styles.container} {...aliasedProps} {...rest}>\n        {isReactText(labelLeft) ? <SwitchLabel mr={1} text={labelLeft} /> : labelLeft}\n\n        {children ?? button ?? <SwitchButton {...{ id, innerLabelOff, innerLabelOn, inputProps, inputRef }} />}\n\n        {isReactText(labelRight) ? <SwitchLabel ml={1} text={labelRight} /> : labelRight}\n      </SwitchBase>\n    </SwitchProvider>\n  )\n}) as VuiComponent<'label', SwitchProps> & {\n  Button: typeof SwitchButton\n  Label: typeof SwitchLabel\n}\n\nSwitch.Button = SwitchButton\nSwitch.Label = SwitchLabel\nSwitch.displayName = 'Switch'\n\nexport default Switch\n"],"mappings":";;;;;;;;;;;;;AAWA,MAAa,aAAa,OAAO,QAAQ;;;;;;;;;;;;;;;;;;;AAoBzC,MAAa,SAAS,KAA2B,OAAO,QAAQ;CAC9D,MAAM,EACJ,QACA,SACA,UACA,WACA,gBACA,UACA,IACA,eACA,cACA,YACA,UACA,WACA,YACA,MACA,QACA,UACA,SACA,UACA,MACA,OACA,SACA,GAAG,SACD;CACJ,MAAM,SAAS,eAAe,UAAU,KAAK;CAE7C,MAAM,UAAU,cAEZ,gBAAgB;EACd;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,GACH;EAAC;EAAS;EAAgB;EAAU;EAAM;EAAQ;EAAU;EAAS;EAAU;EAAM;EAAO;CAAO,CACrG;CAEA,MAAM,eAAe,gBAAgB,EACnC,iBAAiB,SACnB,CAAC;CAED,OACE,oBAAC,gBAAD;EAAgB,OAAO;YACrB,qBAAC,YAAD;GAAY,WAAW,GAAG,cAAc,SAAS;GAAQ;GAAK,GAAI,OAAO;GAAW,GAAI;GAAc,GAAI;aAA1G;IACG,YAAY,SAAS,IAAI,oBAAC,aAAD;KAAa,IAAI;KAAG,MAAM;IAAY,KAAI;IAEnE,YAAY,UAAU,oBAAC,cAAD;KAAoB;KAAI;KAAe;KAAc;KAAY;IAAa;IAEpG,YAAY,UAAU,IAAI,oBAAC,aAAD;KAAa,IAAI;KAAG,MAAM;IAAa,KAAI;GAC5D;;CACE;AAEpB,CAAC;AAKD,OAAO,SAAS;AAChB,OAAO,QAAQ;AACf,OAAO,cAAc"}

package/dist/switch/theme.js

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

package/dist/system/custom.js

@@ -30,5 +30,5 @@ const wordBreak = style({ prop: "wordBreak" });
 
 //#endregion
 export { isTruncated, maxLines, wordBreak };
-globalThis.__vuiVersion__ = "5.2.2"
+globalThis.__vuiVersion__ = "5.3.0"
 //# sourceMappingURL=custom.js.map

package/dist/system/system.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"system.d.ts","names":[],"sources":["../../src/system/system.ts"],"mappings":";;;;;;;;;;;;;;;;;;KAsCY,WAAA,GAAc,eAAA,GACxB,oBAAA,GACA,YAAA,GACA,YAAA,GACA,cAAA,GACA,iBAAA,GACA,UAAA,GACA,kBAAA,GACA,gBAAA,GACA,WAAA,GACA,aAAA,GACA,WAAA,GACA,UAAA,GACA,WAAA,GACA,eAAA,GACA,gBAAA,GACA,eAAA,GACA,cAAA;AAAA,cAEW,MAAA,4BAAM,cAoBlB"}
+{"version":3,"file":"system.d.ts","names":[],"sources":["../../src/system/system.ts"],"mappings":";;;;;;;;;;;;;;;;;;KAuCY,WAAA,GAAc,eAAA,GACxB,oBAAA,GACA,YAAA,GACA,YAAA,GACA,cAAA,GACA,iBAAA,GACA,UAAA,GACA,kBAAA,GACA,gBAAA,GACA,WAAA,GACA,aAAA,GACA,WAAA,GACA,UAAA,GACA,WAAA,GACA,eAAA,GACA,gBAAA,GACA,eAAA,GACA,cAAA;AAAA,cAEW,MAAA,4BAAM,cAoBlB"}

package/dist/system/system.js

@@ -6,5 +6,5 @@ const system = compose(animation, backgroundColor, borders, color, effects, flex
 
 //#endregion
 export { system as default };
-globalThis.__vuiVersion__ = "5.2.2"
+globalThis.__vuiVersion__ = "5.3.0"
 //# sourceMappingURL=system.js.map

package/dist/system/system.js.map

@@ -1 +1 @@
-{"version":3,"file":"system.js","names":[],"sources":["../../src/system/system.ts"],"sourcesContent":["import {\n  animation,\n  backgroundColor,\n  borders,\n  color,\n  compose,\n  effects,\n  flexboxes,\n  flexboxGrids,\n  grids,\n  interactivity,\n  layout,\n  sizing,\n  space,\n  tables,\n  transforms,\n  transitions,\n  typography,\n} from '@xstyled/styled-components'\n\nimport type { AnimationsProps } from './animations'\nimport type { BackgroundColorProps } from './backgrounds'\nimport type { BordersProps } from './borders'\nimport type { IsTruncatedProps, MaxLinesProps, WordBreakProps } from './custom'\nimport { isTruncated, maxLines, wordBreak } from './custom'\nimport type { EffectsProps } from './effects'\nimport type { FlexboxesProps } from './flexboxes'\nimport type { FlexboxGridsProps } from './flexboxGrids'\nimport type { GridsProps } from './grids'\nimport type { InteractivityProps } from './interactivity'\nimport type { LayoutProps } from './layout'\nimport type { SizingProps } from './sizing'\nimport type { SpaceProps } from './space'\nimport type { TablesProps } from './tables'\nimport type { TransformsProps } from './transforms'\nimport type { TransitionsProps } from './transitions'\nimport type { TypographyProps } from './typography'\n\nexport type SystemProps = AnimationsProps &\n  BackgroundColorProps &\n  BordersProps &\n  EffectsProps &\n  FlexboxesProps &\n  FlexboxGridsProps &\n  GridsProps &\n  InteractivityProps &\n  IsTruncatedProps &\n  LayoutProps &\n  MaxLinesProps &\n  SizingProps &\n  SpaceProps &\n  TablesProps &\n  TransformsProps &\n  TransitionsProps &\n  TypographyProps &\n  WordBreakProps\n\nexport const system = compose(\n  animation,\n  backgroundColor,\n  borders,\n  color,\n  effects,\n  flexboxes,\n  flexboxGrids,\n  grids,\n  interactivity,\n  isTruncated,\n  layout,\n  maxLines,\n  sizing,\n  space,\n  tables,\n  transforms,\n  transitions,\n  typography,\n  wordBreak,\n)\n\nexport default system\n"],"mappings":";;;;AAyDA,MAAa,SAAS,QACpB,WACA,iBACA,SACA,OACA,SACA,WACA,cACA,OACA,eACA,aACA,QACA,UACA,QACA,OACA,QACA,YACA,aACA,YACA,SACF"}
+{"version":3,"file":"system.js","names":[],"sources":["../../src/system/system.ts"],"sourcesContent":["import {\n  animation,\n  backgroundColor,\n  borders,\n  color,\n  compose,\n  effects,\n  flexboxes,\n  flexboxGrids,\n  grids,\n  interactivity,\n  layout,\n  sizing,\n  space,\n  tables,\n  transforms,\n  transitions,\n  typography,\n} from '@xstyled/styled-components'\n\nimport type { AnimationsProps } from './animations'\nimport type { BackgroundColorProps } from './backgrounds'\nimport type { BordersProps } from './borders'\nimport type { IsTruncatedProps, MaxLinesProps, WordBreakProps } from './custom'\nimport type { EffectsProps } from './effects'\nimport type { FlexboxesProps } from './flexboxes'\nimport type { FlexboxGridsProps } from './flexboxGrids'\nimport type { GridsProps } from './grids'\nimport type { InteractivityProps } from './interactivity'\nimport type { LayoutProps } from './layout'\nimport type { SizingProps } from './sizing'\nimport type { SpaceProps } from './space'\nimport type { TablesProps } from './tables'\nimport type { TransformsProps } from './transforms'\nimport type { TransitionsProps } from './transitions'\nimport type { TypographyProps } from './typography'\n\nimport { isTruncated, maxLines, wordBreak } from './custom'\n\nexport type SystemProps = AnimationsProps &\n  BackgroundColorProps &\n  BordersProps &\n  EffectsProps &\n  FlexboxesProps &\n  FlexboxGridsProps &\n  GridsProps &\n  InteractivityProps &\n  IsTruncatedProps &\n  LayoutProps &\n  MaxLinesProps &\n  SizingProps &\n  SpaceProps &\n  TablesProps &\n  TransformsProps &\n  TransitionsProps &\n  TypographyProps &\n  WordBreakProps\n\nexport const system = compose(\n  animation,\n  backgroundColor,\n  borders,\n  color,\n  effects,\n  flexboxes,\n  flexboxGrids,\n  grids,\n  interactivity,\n  isTruncated,\n  layout,\n  maxLines,\n  sizing,\n  space,\n  tables,\n  transforms,\n  transitions,\n  typography,\n  wordBreak,\n)\n\nexport default system\n"],"mappings":";;;;AA0DA,MAAa,SAAS,QACpB,WACA,iBACA,SACA,OACA,SACA,WACA,cACA,OACA,eACA,aACA,QACA,UACA,QACA,OACA,QACA,YACA,aACA,YACA,SACF"}

package/dist/t/specialVariants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"specialVariants.d.ts","names":[],"sources":["../../src/t/specialVariants.tsx"],"mappings":";;;cAIa,IAAA,EAAI,YAAA,SAAA,MAAA"}
+{"version":3,"file":"specialVariants.d.ts","names":[],"sources":["../../src/t/specialVariants.tsx"],"mappings":";;;cAKa,IAAA,EAAI,YAAA,SAAA,MAAA"}

package/dist/t/specialVariants.js

@@ -13,5 +13,5 @@ const Lead = vui((props, ref) => /* @__PURE__ */ jsx(T, {
 
 //#endregion
 export { Lead };
-globalThis.__vuiVersion__ = "5.2.2"
+globalThis.__vuiVersion__ = "5.3.0"
 //# sourceMappingURL=specialVariants.js.map

package/dist/t/specialVariants.js.map

@@ -1 +1 @@
-{"version":3,"file":"specialVariants.js","names":[],"sources":["../../src/t/specialVariants.tsx"],"sourcesContent":["import { vui } from '../core'\nimport T from './t'\nimport type { TProps } from './t.types'\n\nexport const Lead = vui<'span', TProps>((props, ref) => (\n  <T ref={ref} size=\"xl\" variant=\"caption\" color=\"seaBlue.main\" {...props} />\n))\n"],"mappings":";;;;;AAIA,MAAa,OAAO,KAAqB,OAAO,QAC9C,oBAAC,GAAD;CAAQ;CAAK,MAAK;CAAK,SAAQ;CAAU,OAAM;CAAe,GAAI;AAAQ,EAC3E"}
+{"version":3,"file":"specialVariants.js","names":[],"sources":["../../src/t/specialVariants.tsx"],"sourcesContent":["import type { TProps } from './t.types'\n\nimport { vui } from '../core'\nimport T from './t'\n\nexport const Lead = vui<'span', TProps>((props, ref) => (\n  <T ref={ref} size=\"xl\" variant=\"caption\" color=\"seaBlue.main\" {...props} />\n))\n"],"mappings":";;;;;AAKA,MAAa,OAAO,KAAqB,OAAO,QAC9C,oBAAC,GAAD;CAAQ;CAAK,MAAK;CAAK,SAAQ;CAAU,OAAM;CAAe,GAAI;AAAQ,EAC3E"}

package/dist/t/t.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"t.d.ts","names":[],"sources":["../../src/t/t.tsx"],"mappings":";;;;cAIa,KAAA,8BAAK,eAAA,qCAAA,YAAA,EAEjB,WAFiB;;cAKL,CAAA,EAAC,YAAA,SAAA,MAAA"}
+{"version":3,"file":"t.d.ts","names":[],"sources":["../../src/t/t.tsx"],"mappings":";;;;cAKa,KAAA,8BAAK,eAAA,qCAAA,YAAA,EAEjB,WAFiB;;cAKL,CAAA,EAAC,YAAA,SAAA,MAAA"}

package/dist/t/t.js

@@ -34,5 +34,5 @@ T.displayName = "T";
 
 //#endregion
 export { TBase, T as default };
-globalThis.__vuiVersion__ = "5.2.2"
+globalThis.__vuiVersion__ = "5.3.0"
 //# sourceMappingURL=t.js.map

package/dist/t/t.js.map

@@ -1 +1 @@
-{"version":3,"file":"t.js","names":[],"sources":["../../src/t/t.tsx"],"sourcesContent":["import { omitThemingProps, styled, useStyleConfig, vui } from '../core'\nimport { cs, filterUndefined } from '../utils'\nimport type { TProps } from './t.types'\n\nexport const TBase = styled.spanBox`\n  transition-duration: fast;\n`\n\n/** Displays given text and allows easy styling. */\nexport const T = vui<'span', TProps>((props, ref) => {\n  const { align, casing, centerV, children, className, decoration, text, weight, ...rest } = omitThemingProps(props)\n  const styles = useStyleConfig('T', props)\n\n  const aliasedProps = filterUndefined({\n    alignItems: centerV ? 'center' : undefined,\n    display: centerV ? 'inline-flex' : undefined,\n    fontWeight: weight,\n    textAlign: align,\n    textDecoration: decoration,\n    textTransform: casing,\n  })\n\n  return (\n    <TBase className={cs('vui-t', className)} ref={ref} {...styles} {...aliasedProps} {...rest}>\n      {children ?? text}\n    </TBase>\n  )\n})\n\nT.displayName = 'T'\n\nexport default T\n"],"mappings":";;;;;;;;AAIA,MAAa,QAAQ,OAAO,OAAO;;;;AAKnC,MAAa,IAAI,KAAqB,OAAO,QAAQ;CACnD,MAAM,EAAE,OAAO,QAAQ,SAAS,UAAU,WAAW,YAAY,MAAM,QAAQ,GAAG,SAAS,iBAAiB,KAAK;CACjH,MAAM,SAAS,eAAe,KAAK,KAAK;CAExC,MAAM,eAAe,gBAAgB;EACnC,YAAY,UAAU,WAAW;EACjC,SAAS,UAAU,gBAAgB;EACnC,YAAY;EACZ,WAAW;EACX,gBAAgB;EAChB,eAAe;CACjB,CAAC;CAED,OACE,oBAAC,OAAD;EAAO,WAAW,GAAG,SAAS,SAAS;EAAQ;EAAK,GAAI;EAAQ,GAAI;EAAc,GAAI;YACnF,YAAY;CACR;AAEX,CAAC;AAED,EAAE,cAAc"}
+{"version":3,"file":"t.js","names":[],"sources":["../../src/t/t.tsx"],"sourcesContent":["import type { TProps } from './t.types'\n\nimport { omitThemingProps, styled, useStyleConfig, vui } from '../core'\nimport { cs, filterUndefined } from '../utils'\n\nexport const TBase = styled.spanBox`\n  transition-duration: fast;\n`\n\n/** Displays given text and allows easy styling. */\nexport const T = vui<'span', TProps>((props, ref) => {\n  const { align, casing, centerV, children, className, decoration, text, weight, ...rest } = omitThemingProps(props)\n  const styles = useStyleConfig('T', props)\n\n  const aliasedProps = filterUndefined({\n    alignItems: centerV ? 'center' : undefined,\n    display: centerV ? 'inline-flex' : undefined,\n    fontWeight: weight,\n    textAlign: align,\n    textDecoration: decoration,\n    textTransform: casing,\n  })\n\n  return (\n    <TBase className={cs('vui-t', className)} ref={ref} {...styles} {...aliasedProps} {...rest}>\n      {children ?? text}\n    </TBase>\n  )\n})\n\nT.displayName = 'T'\n\nexport default T\n"],"mappings":";;;;;;;;AAKA,MAAa,QAAQ,OAAO,OAAO;;;;AAKnC,MAAa,IAAI,KAAqB,OAAO,QAAQ;CACnD,MAAM,EAAE,OAAO,QAAQ,SAAS,UAAU,WAAW,YAAY,MAAM,QAAQ,GAAG,SAAS,iBAAiB,KAAK;CACjH,MAAM,SAAS,eAAe,KAAK,KAAK;CAExC,MAAM,eAAe,gBAAgB;EACnC,YAAY,UAAU,WAAW;EACjC,SAAS,UAAU,gBAAgB;EACnC,YAAY;EACZ,WAAW;EACX,gBAAgB;EAChB,eAAe;CACjB,CAAC;CAED,OACE,oBAAC,OAAD;EAAO,WAAW,GAAG,SAAS,SAAS;EAAQ;EAAK,GAAI;EAAQ,GAAI;EAAc,GAAI;YACnF,YAAY;CACR;AAEX,CAAC;AAED,EAAE,cAAc"}

package/dist/t/theme.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"context.d.ts","names":[],"sources":["../../src/table/context.ts"],"mappings":";;;cAGO,aAAA,kBAAa,QAAA,CAAA,YAAA,GAAE,eAAA,QAAe,YAAqD"}
+{"version":3,"file":"context.d.ts","names":[],"sources":["../../src/table/context.ts"],"mappings":";;;cAIO,aAAA,kBAAa,QAAA,CAAA,YAAA,GAAE,eAAA,QAAe,YAAqD"}

package/dist/table/context.js

@@ -5,5 +5,5 @@ const [TableProvider, useTableContext] = createContext({ isOptional: true });
 
 //#endregion
 export { TableProvider, useTableContext };
-globalThis.__vuiVersion__ = "5.2.2"
+globalThis.__vuiVersion__ = "5.3.0"
 //# sourceMappingURL=context.js.map

package/dist/table/context.js.map

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":[],"sources":["../../src/table/context.ts"],"sourcesContent":["import { createContext } from '../utils'\nimport type { TableContext } from './table.types'\n\nconst [TableProvider, useTableContext] = createContext<TableContext>({ isOptional: true })\n\nexport { TableProvider, useTableContext }\n"],"mappings":";;;AAGA,MAAM,CAAC,eAAe,mBAAmB,cAA4B,EAAE,YAAY,KAAK,CAAC"}
+{"version":3,"file":"context.js","names":[],"sources":["../../src/table/context.ts"],"sourcesContent":["import type { TableContext } from './table.types'\n\nimport { createContext } from '../utils'\n\nconst [TableProvider, useTableContext] = createContext<TableContext>({ isOptional: true })\n\nexport { TableProvider, useTableContext }\n"],"mappings":";;;AAIA,MAAM,CAAC,eAAe,mBAAmB,cAA4B,EAAE,YAAY,KAAK,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"table.d.ts","names":[],"sources":["../../src/table/table.tsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAmBa,SAAA,8BAAS,eAAA,sCAAA,YAAA,EAmCrB,cAAA,GAnCqB,oBAAA,GAAA,WAAA,GAAA,cAAA,GAAA,gBAAA,GAAA,iBAAA,GAAA,eAAA,GAAA,gBAAA,GAAA,mBAAA,GAAA,qBAAA,GAAA,sBAAA,GAAA,oBAAA,GAAA,gBAAA,GAAA,mBAAA,GAAA,qBAAA,GAAA,sBAAA,GAAA,oBAAA,GAAA,gBAAA,GAAA,iBAAA,GAAA,YAAA,GAAA,iBAAA,GAAA,iBAAA,GAAA,iBAAA,GAAA,YAAA,GAAA,YAAA,GAAA,mBAAA,GAAA,mBAAA,GAAA,gBAAA,GAAA,gBAAA,GAAA,SAAA,GAAA,cAAA,GAAA,YAAA,GAAA,cAAA,GAAA,eAAA,GAAA,YAAA,GAAA,eAAA,GAAA,iBAAA,GAAA,mBAAA,GAAA,iBAAA,GAAA,aAAA,GAAA,aAAA,GAAA,eAAA,GAAA,cAAA,GAAA,kBAAA,GAAA,SAAA,GAAA,gBAAA,GAAA,cAAA,GAAA,UAAA,GAAA,QAAA,GAAA,QAAA,GAAA,QAAA,GAAA,cAAA,GAAA,WAAA,GAAA,eAAA,GAAA,YAAA,GAAA,iBAAA,GAAA,oBAAA,GAAA,iBAAA,GAAA,wBAAA,GAAA,qBAAA,GAAA,sBAAA,GAAA,aAAA,GAAA,eAAA,GAAA,WAAA,GAAA,kBAAA,GAAA,WAAA,GAAA,eAAA,GAAA,gBAAA,GAAA,UAAA,GAAA,cAAA,GAAA,aAAA,GAAA,cAAA,GAAA,cAAA,GAAA,aAAA,GAAA,WAAA,GAAA,QAAA,GAAA,UAAA,GAAA,WAAA,GAAA,SAAA,GAAA,eAAA,GAAA,uBAAA,GAAA,cAAA,GAAA,aAAA,GAAA,UAAA,GAAA,WAAA,GAAA,aAAA,GAAA,cAAA,GAAA,aAAA,GAAA,cAAA,GAAA,WAAA,GAAA,cAAA,GAAA,gBAAA,GAAA,iBAAA,GAAA,eAAA,GAAA,YAAA,GAAA,YAAA,GAAA,YAAA,GAAA,eAAA,GAAA,iBAAA,GAAA,kBAAA,GAAA,gBAAA,GAAA,aAAA,GAAA,aAAA,GAAA,WAAA,GAAA,WAAA,GAAA,kBAAA,GAAA,kBAAA,GAAA,mBAAA,GAAA,gBAAA,GAAA,cAAA,GAAA,oBAAA,GAAA,eAAA,GAAA,eAAA,GAAA,WAAA,GAAA,UAAA,GAAA,UAAA,GAAA,UAAA,GAAA,WAAA,GAAA,WAAA,GAAA,eAAA,GAAA,uBAAA,GAAA,uBAAA,GAAA,6BAAA,GAAA,oBAAA,GAAA,eAAA,GAAA,aAAA,GAAA,cAAA,GAAA,eAAA,GAAA,eAAA,GAAA,UAAA,GAAA,kBAAA,GAAA,mBAAA,GAAA,cAAA,GAAA,kBAAA,GAAA,kBAAA,GAAA,eAAA,GAAA,iBAAA,GAAA,kBAAA,GAAA,sBAAA,GAAA,cAAA,GAAA,aAAA,GAAA,YAAA;YAAA,WAAA;;;;;;cAsCT,KAAA,EA6CP,YAAA,UAAsB,UAAA;EAC1B,QAAA,SAAiB,aAAA;EACjB,KAAA,SAAc,KAAA;EACd,EAAA,SAAW,EAAA;EACX,KAAA,SAAc,KAAA;EACd,EAAA,SAAW,EAAA;EACX,KAAA,SAAc,KAAA;EACd,EAAA,SAAW,EAAA;AAAA"}
+{"version":3,"file":"table.d.ts","names":[],"sources":["../../src/table/table.tsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAoBa,SAAA,8BAAS,eAAA,sCAAA,YAAA,EAmCrB,cAAA,GAnCqB,oBAAA,GAAA,WAAA,GAAA,cAAA,GAAA,gBAAA,GAAA,iBAAA,GAAA,eAAA,GAAA,gBAAA,GAAA,mBAAA,GAAA,qBAAA,GAAA,sBAAA,GAAA,oBAAA,GAAA,gBAAA,GAAA,mBAAA,GAAA,qBAAA,GAAA,sBAAA,GAAA,oBAAA,GAAA,gBAAA,GAAA,iBAAA,GAAA,YAAA,GAAA,iBAAA,GAAA,iBAAA,GAAA,iBAAA,GAAA,YAAA,GAAA,YAAA,GAAA,mBAAA,GAAA,mBAAA,GAAA,gBAAA,GAAA,gBAAA,GAAA,SAAA,GAAA,cAAA,GAAA,YAAA,GAAA,cAAA,GAAA,eAAA,GAAA,YAAA,GAAA,eAAA,GAAA,iBAAA,GAAA,mBAAA,GAAA,iBAAA,GAAA,aAAA,GAAA,aAAA,GAAA,eAAA,GAAA,cAAA,GAAA,kBAAA,GAAA,SAAA,GAAA,gBAAA,GAAA,cAAA,GAAA,UAAA,GAAA,QAAA,GAAA,QAAA,GAAA,QAAA,GAAA,cAAA,GAAA,WAAA,GAAA,eAAA,GAAA,YAAA,GAAA,iBAAA,GAAA,oBAAA,GAAA,iBAAA,GAAA,wBAAA,GAAA,qBAAA,GAAA,sBAAA,GAAA,aAAA,GAAA,eAAA,GAAA,WAAA,GAAA,kBAAA,GAAA,WAAA,GAAA,eAAA,GAAA,gBAAA,GAAA,UAAA,GAAA,cAAA,GAAA,aAAA,GAAA,cAAA,GAAA,cAAA,GAAA,aAAA,GAAA,WAAA,GAAA,QAAA,GAAA,UAAA,GAAA,WAAA,GAAA,SAAA,GAAA,eAAA,GAAA,uBAAA,GAAA,cAAA,GAAA,aAAA,GAAA,UAAA,GAAA,WAAA,GAAA,aAAA,GAAA,cAAA,GAAA,aAAA,GAAA,cAAA,GAAA,WAAA,GAAA,cAAA,GAAA,gBAAA,GAAA,iBAAA,GAAA,eAAA,GAAA,YAAA,GAAA,YAAA,GAAA,YAAA,GAAA,eAAA,GAAA,iBAAA,GAAA,kBAAA,GAAA,gBAAA,GAAA,aAAA,GAAA,aAAA,GAAA,WAAA,GAAA,WAAA,GAAA,kBAAA,GAAA,kBAAA,GAAA,mBAAA,GAAA,gBAAA,GAAA,cAAA,GAAA,oBAAA,GAAA,eAAA,GAAA,eAAA,GAAA,WAAA,GAAA,UAAA,GAAA,UAAA,GAAA,UAAA,GAAA,WAAA,GAAA,WAAA,GAAA,eAAA,GAAA,uBAAA,GAAA,uBAAA,GAAA,6BAAA,GAAA,oBAAA,GAAA,eAAA,GAAA,aAAA,GAAA,cAAA,GAAA,eAAA,GAAA,eAAA,GAAA,UAAA,GAAA,kBAAA,GAAA,mBAAA,GAAA,cAAA,GAAA,kBAAA,GAAA,kBAAA,GAAA,eAAA,GAAA,iBAAA,GAAA,kBAAA,GAAA,sBAAA,GAAA,cAAA,GAAA,aAAA,GAAA,YAAA;YAAA,WAAA;;;;;;cAsCT,KAAA,EA6CP,YAAA,UAAsB,UAAA;EAC1B,QAAA,SAAiB,aAAA;EACjB,KAAA,SAAc,KAAA;EACd,EAAA,SAAW,EAAA;EACX,KAAA,SAAc,KAAA;EACd,EAAA,SAAW,EAAA;EACX,KAAA,SAAc,KAAA;EACd,EAAA,SAAW,EAAA;AAAA"}

package/dist/table/table.js

@@ -99,5 +99,5 @@ Table.displayName = "Table";
 
 //#endregion
 export { TableBase, Table as default };
-globalThis.__vuiVersion__ = "5.2.2"
+globalThis.__vuiVersion__ = "5.3.0"
 //# sourceMappingURL=table.js.map

package/dist/table/table.js.map

@@ -1 +1 @@
-{"version":3,"file":"table.js","names":[],"sources":["../../src/table/table.tsx"],"sourcesContent":["import { useMemo } from 'react'\n\nimport type { VuiComponent } from '../core'\nimport { css, styled, useStyleConfig, vui } from '../core'\nimport { compareBy, cs } from '../utils'\nimport { TableProvider } from './context'\nimport type { TableProps } from './table.types'\nimport TableSortIcon from './tableSortIcon'\nimport Tbody from './tbody'\nimport Td from './td'\nimport Tfoot from './tfoot'\nimport Th from './th'\nimport Thead from './thead'\nimport Tr from './tr'\nimport useTable from './useTable'\n\n/**\n * Displays a Table with support for columns, rows and sort.\n */\nexport const TableBase = styled.tableBox<TableProps>`\n  border-collapse: separate;\n  border-spacing: 0px;\n  display: table;\n  position: relative;\n  width: 100%;\n\n  ${p =>\n    p.stickyColumn &&\n    css`\n      thead tr:last-of-type th:first-of-type,\n      td:first-of-type {\n        left: 0;\n        position: sticky;\n        z-index: 2;\n\n        ::after {\n          bottom: -1px;\n          box-shadow: inset 10px 0 8px -8px #00000026;\n          content: '';\n          pointer-events: none;\n          position: absolute;\n          right: 0;\n          top: 0;\n          transform: translate(100%);\n          transition: box-shadow 0.3s;\n          width: 10px;\n        }\n      }\n\n      thead tr:last-of-type th:first-of-type:not([data-active='true']):not([data-disabled='true']),\n      td:first-of-type {\n        background-color: white;\n      }\n    `}\n`\n\n/** Displays a Table with support for columns, rows and sort. */\nexport const Table = vui<'table', TableProps>((props, ref) => {\n  const {\n    children,\n    className,\n    columns,\n    defaultSort,\n    onSortChange,\n    rows,\n    size,\n    sort: sortProp,\n    stickyColumn,\n    stickyHeader,\n    variant,\n    ...rest\n  } = props\n  const styles = useStyleConfig('Table', props)\n  const tableProps = useTable({ defaultSort, onSortChange, sort: sortProp })\n  const { isControlled, sort } = tableProps\n\n  // Rows are sorted internally only in uncontrolled mode, that is when 'sort' prop is not provided.\n  const sortedRows = useMemo(\n    () => (!isControlled ? rows?.slice().sort(compareBy(sort.key, sort.order)) : rows),\n    [rows, sort, isControlled],\n  )\n\n  const context = { ...tableProps, columns, rows: sortedRows, size, stickyColumn, stickyHeader, variant }\n\n  return (\n    <TableProvider value={context}>\n      <TableBase\n        className={cs('vui-table', className)}\n        ref={ref}\n        stickyColumn={stickyColumn}\n        {...styles.container}\n        {...rest}\n      >\n        {children ?? (\n          <>\n            <Thead />\n            <Tbody />\n          </>\n        )}\n      </TableBase>\n    </TableProvider>\n  )\n}) as VuiComponent<'table', TableProps> & {\n  SortIcon: typeof TableSortIcon\n  Tbody: typeof Tbody\n  Td: typeof Td\n  Tfoot: typeof Tfoot\n  Th: typeof Th\n  Thead: typeof Thead\n  Tr: typeof Tr\n}\n\nTable.SortIcon = TableSortIcon\nTable.Tbody = Tbody\nTable.Td = Td\nTable.Tfoot = Tfoot\nTable.Th = Th\nTable.Thead = Thead\nTable.Tr = Tr\n\nTable.displayName = 'Table'\n\nexport default Table\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAmBA,MAAa,YAAY,OAAO,QAAoB;;;;;;;KAOhD,MACA,EAAE,gBACF,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;MAyBD;;;AAIN,MAAa,QAAQ,KAA0B,OAAO,QAAQ;CAC5D,MAAM,EACJ,UACA,WACA,SACA,aACA,cACA,MACA,MACA,MAAM,UACN,cACA,cACA,SACA,GAAG,SACD;CACJ,MAAM,SAAS,eAAe,SAAS,KAAK;CAC5C,MAAM,aAAa,SAAS;EAAE;EAAa;EAAc,MAAM;CAAS,CAAC;CACzE,MAAM,EAAE,cAAc,SAAS;CAG/B,MAAM,aAAa,cACV,CAAC,eAAe,MAAM,MAAM,CAAC,CAAC,KAAK,UAAU,KAAK,KAAK,KAAK,KAAK,CAAC,IAAI,MAC7E;EAAC;EAAM;EAAM;CAAY,CAC3B;CAIA,OACE,oBAAC,eAAD;EAAe,OAAO;GAHN,GAAG;GAAY;GAAS,MAAM;GAAY;GAAM;GAAc;GAAc;EAGhE;YAC1B,oBAAC,WAAD;GACE,WAAW,GAAG,aAAa,SAAS;GAC/B;GACS;GACd,GAAI,OAAO;GACX,GAAI;aAEH,YACC,8CACE,oBAAC,OAAD,CAAQ,IACR,oBAAC,OAAD,CAAQ,EACR;EAEK;CACE;AAEnB,CAAC;AAUD,MAAM,WAAW;AACjB,MAAM,QAAQ;AACd,MAAM,KAAK;AACX,MAAM,QAAQ;AACd,MAAM,KAAK;AACX,MAAM,QAAQ;AACd,MAAM,KAAK;AAEX,MAAM,cAAc"}
+{"version":3,"file":"table.js","names":[],"sources":["../../src/table/table.tsx"],"sourcesContent":["import { useMemo } from 'react'\n\nimport type { VuiComponent } from '../core'\nimport type { TableProps } from './table.types'\n\nimport { css, styled, useStyleConfig, vui } from '../core'\nimport { compareBy, cs } from '../utils'\nimport { TableProvider } from './context'\nimport TableSortIcon from './tableSortIcon'\nimport Tbody from './tbody'\nimport Td from './td'\nimport Tfoot from './tfoot'\nimport Th from './th'\nimport Thead from './thead'\nimport Tr from './tr'\nimport useTable from './useTable'\n\n/**\n * Displays a Table with support for columns, rows and sort.\n */\nexport const TableBase = styled.tableBox<TableProps>`\n  border-collapse: separate;\n  border-spacing: 0px;\n  display: table;\n  position: relative;\n  width: 100%;\n\n  ${p =>\n    p.stickyColumn &&\n    css`\n      thead tr:last-of-type th:first-of-type,\n      td:first-of-type {\n        left: 0;\n        position: sticky;\n        z-index: 2;\n\n        ::after {\n          bottom: -1px;\n          box-shadow: inset 10px 0 8px -8px #00000026;\n          content: '';\n          pointer-events: none;\n          position: absolute;\n          right: 0;\n          top: 0;\n          transform: translate(100%);\n          transition: box-shadow 0.3s;\n          width: 10px;\n        }\n      }\n\n      thead tr:last-of-type th:first-of-type:not([data-active='true']):not([data-disabled='true']),\n      td:first-of-type {\n        background-color: white;\n      }\n    `}\n`\n\n/** Displays a Table with support for columns, rows and sort. */\nexport const Table = vui<'table', TableProps>((props, ref) => {\n  const {\n    children,\n    className,\n    columns,\n    defaultSort,\n    onSortChange,\n    rows,\n    size,\n    sort: sortProp,\n    stickyColumn,\n    stickyHeader,\n    variant,\n    ...rest\n  } = props\n  const styles = useStyleConfig('Table', props)\n  const tableProps = useTable({ defaultSort, onSortChange, sort: sortProp })\n  const { isControlled, sort } = tableProps\n\n  // Rows are sorted internally only in uncontrolled mode, that is when 'sort' prop is not provided.\n  const sortedRows = useMemo(\n    () => (!isControlled ? rows?.slice().sort(compareBy(sort.key, sort.order)) : rows),\n    [rows, sort, isControlled],\n  )\n\n  const context = { ...tableProps, columns, rows: sortedRows, size, stickyColumn, stickyHeader, variant }\n\n  return (\n    <TableProvider value={context}>\n      <TableBase\n        className={cs('vui-table', className)}\n        ref={ref}\n        stickyColumn={stickyColumn}\n        {...styles.container}\n        {...rest}\n      >\n        {children ?? (\n          <>\n            <Thead />\n            <Tbody />\n          </>\n        )}\n      </TableBase>\n    </TableProvider>\n  )\n}) as VuiComponent<'table', TableProps> & {\n  SortIcon: typeof TableSortIcon\n  Tbody: typeof Tbody\n  Td: typeof Td\n  Tfoot: typeof Tfoot\n  Th: typeof Th\n  Thead: typeof Thead\n  Tr: typeof Tr\n}\n\nTable.SortIcon = TableSortIcon\nTable.Tbody = Tbody\nTable.Td = Td\nTable.Tfoot = Tfoot\nTable.Th = Th\nTable.Thead = Thead\nTable.Tr = Tr\n\nTable.displayName = 'Table'\n\nexport default Table\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAoBA,MAAa,YAAY,OAAO,QAAoB;;;;;;;KAOhD,MACA,EAAE,gBACF,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;MAyBD;;;AAIN,MAAa,QAAQ,KAA0B,OAAO,QAAQ;CAC5D,MAAM,EACJ,UACA,WACA,SACA,aACA,cACA,MACA,MACA,MAAM,UACN,cACA,cACA,SACA,GAAG,SACD;CACJ,MAAM,SAAS,eAAe,SAAS,KAAK;CAC5C,MAAM,aAAa,SAAS;EAAE;EAAa;EAAc,MAAM;CAAS,CAAC;CACzE,MAAM,EAAE,cAAc,SAAS;CAG/B,MAAM,aAAa,cACV,CAAC,eAAe,MAAM,MAAM,CAAC,CAAC,KAAK,UAAU,KAAK,KAAK,KAAK,KAAK,CAAC,IAAI,MAC7E;EAAC;EAAM;EAAM;CAAY,CAC3B;CAIA,OACE,oBAAC,eAAD;EAAe,OAAO;GAHN,GAAG;GAAY;GAAS,MAAM;GAAY;GAAM;GAAc;GAAc;EAGhE;YAC1B,oBAAC,WAAD;GACE,WAAW,GAAG,aAAa,SAAS;GAC/B;GACS;GACd,GAAI,OAAO;GACX,GAAI;aAEH,YACC,8CACE,oBAAC,OAAD,CAAQ,IACR,oBAAC,OAAD,CAAQ,EACR;EAEK;CACE;AAEnB,CAAC;AAUD,MAAM,WAAW;AACjB,MAAM,QAAQ;AACd,MAAM,KAAK;AACX,MAAM,QAAQ;AACd,MAAM,KAAK;AACX,MAAM,QAAQ;AACd,MAAM,KAAK;AAEX,MAAM,cAAc"}

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

@@ -1 +1 @@
-{"version":3,"file":"tableSortIcon.d.ts","names":[],"sources":["../../src/table/tableSortIcon.tsx"],"mappings":";;;;cAOa,aAAA,EAAa,YAAA,QAAA,kBAAA"}
+{"version":3,"file":"tableSortIcon.d.ts","names":[],"sources":["../../src/table/tableSortIcon.tsx"],"mappings":";;;;cAQa,aAAA,EAAa,YAAA,QAAA,kBAAA"}

package/dist/table/tableSortIcon.js

@@ -36,5 +36,5 @@ TableSortIcon.displayName = "TableSortIcon";
 
 //#endregion
 export { TableSortIcon as default };
-globalThis.__vuiVersion__ = "5.2.2"
+globalThis.__vuiVersion__ = "5.3.0"
 //# sourceMappingURL=tableSortIcon.js.map

package/dist/table/tableSortIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"tableSortIcon.js","names":[],"sources":["../../src/table/tableSortIcon.tsx"],"sourcesContent":["import Box from '../box'\nimport { vui } from '../core'\nimport { Icon } from '../icon'\nimport { cs } from '../utils'\nimport type { TableSortIconProps } from './table.types'\n\n/** Displays a sort icon with given direction based on sort order. */\nexport const TableSortIcon = vui<'svg', TableSortIconProps>((props, ref) => {\n  const { className, order } = props\n  const activeColor = 'seaBlue.main'\n  const inactiveColor = '#908d89'\n\n  const icons = [\n    {\n      color: order === 'asc' ? activeColor : inactiveColor,\n    },\n    {\n      color: order === 'desc' ? activeColor : inactiveColor,\n    },\n  ]\n\n  return (\n    <Box ref={ref} column alignItems=\"center\" justifyItems=\"center\" ml=\"5px\">\n      <Icon\n        className={cs('vui-tableSortIcon--top', className)}\n        name={'uiCaretUpSolid'}\n        color={icons[0].color}\n        size=\"xs\"\n        mb=\"0px\"\n      />\n      <Icon\n        className={cs('vui-tableSortIcon--bottom', className)}\n        name={'uiCaretDownSolid'}\n        color={icons[1].color}\n        size=\"xs\"\n        mt=\"-7px\"\n      />\n    </Box>\n  )\n})\n\nTableSortIcon.displayName = 'TableSortIcon'\n\nexport default TableSortIcon\n"],"mappings":";;;;;;;;AAOA,MAAa,gBAAgB,KAAgC,OAAO,QAAQ;CAC1E,MAAM,EAAE,WAAW,UAAU;CAC7B,MAAM,cAAc;CACpB,MAAM,gBAAgB;CAEtB,MAAM,QAAQ,CACZ,EACE,OAAO,UAAU,QAAQ,cAAc,cACzC,GACA,EACE,OAAO,UAAU,SAAS,cAAc,cAC1C,CACF;CAEA,OACE,qBAAC,KAAD;EAAU;EAAK;EAAO,YAAW;EAAS,cAAa;EAAS,IAAG;YAAnE,CACE,oBAAC,MAAD;GACE,WAAW,GAAG,0BAA0B,SAAS;GACjD,MAAM;GACN,OAAO,MAAM,EAAE,CAAC;GAChB,MAAK;GACL,IAAG;EACJ,IACD,oBAAC,MAAD;GACE,WAAW,GAAG,6BAA6B,SAAS;GACpD,MAAM;GACN,OAAO,MAAM,EAAE,CAAC;GAChB,MAAK;GACL,IAAG;EACJ,EACE;;AAET,CAAC;AAED,cAAc,cAAc"}
+{"version":3,"file":"tableSortIcon.js","names":[],"sources":["../../src/table/tableSortIcon.tsx"],"sourcesContent":["import type { TableSortIconProps } from './table.types'\n\nimport Box from '../box'\nimport { vui } from '../core'\nimport { Icon } from '../icon'\nimport { cs } from '../utils'\n\n/** Displays a sort icon with given direction based on sort order. */\nexport const TableSortIcon = vui<'svg', TableSortIconProps>((props, ref) => {\n  const { className, order } = props\n  const activeColor = 'seaBlue.main'\n  const inactiveColor = '#908d89'\n\n  const icons = [\n    {\n      color: order === 'asc' ? activeColor : inactiveColor,\n    },\n    {\n      color: order === 'desc' ? activeColor : inactiveColor,\n    },\n  ]\n\n  return (\n    <Box ref={ref} column alignItems=\"center\" justifyItems=\"center\" ml=\"5px\">\n      <Icon\n        className={cs('vui-tableSortIcon--top', className)}\n        name={'uiCaretUpSolid'}\n        color={icons[0].color}\n        size=\"xs\"\n        mb=\"0px\"\n      />\n      <Icon\n        className={cs('vui-tableSortIcon--bottom', className)}\n        name={'uiCaretDownSolid'}\n        color={icons[1].color}\n        size=\"xs\"\n        mt=\"-7px\"\n      />\n    </Box>\n  )\n})\n\nTableSortIcon.displayName = 'TableSortIcon'\n\nexport default TableSortIcon\n"],"mappings":";;;;;;;;AAQA,MAAa,gBAAgB,KAAgC,OAAO,QAAQ;CAC1E,MAAM,EAAE,WAAW,UAAU;CAC7B,MAAM,cAAc;CACpB,MAAM,gBAAgB;CAEtB,MAAM,QAAQ,CACZ,EACE,OAAO,UAAU,QAAQ,cAAc,cACzC,GACA,EACE,OAAO,UAAU,SAAS,cAAc,cAC1C,CACF;CAEA,OACE,qBAAC,KAAD;EAAU;EAAK;EAAO,YAAW;EAAS,cAAa;EAAS,IAAG;YAAnE,CACE,oBAAC,MAAD;GACE,WAAW,GAAG,0BAA0B,SAAS;GACjD,MAAM;GACN,OAAO,MAAM,EAAE,CAAC;GAChB,MAAK;GACL,IAAG;EACJ,IACD,oBAAC,MAAD;GACE,WAAW,GAAG,6BAA6B,SAAS;GACpD,MAAM;GACN,OAAO,MAAM,EAAE,CAAC;GAChB,MAAK;GACL,IAAG;EACJ,EACE;;AAET,CAAC;AAED,cAAc,cAAc"}

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

@@ -1 +1 @@
-{"version":3,"file":"tbody.d.ts","names":[],"sources":["../../src/table/tbody.tsx"],"mappings":";;;cAOa,SAAA,8BAAS,eAAA,sCAAA,YAAA,EAsBrB,WAtBqB;;cAyBT,KAAA,EAAK,YAAA,UAiBhB,WAAA"}
+{"version":3,"file":"tbody.d.ts","names":[],"sources":["../../src/table/tbody.tsx"],"mappings":";;;cAQa,SAAA,8BAAS,eAAA,sCAAA,YAAA,EAsBrB,WAtBqB;;cAyBT,KAAA,EAAK,YAAA,UAiBhB,WAAA"}

package/dist/table/tbody.js

@@ -48,5 +48,5 @@ Tbody.displayName = "Tbody";
 
 //#endregion
 export { TbodyBase, Tbody as default };
-globalThis.__vuiVersion__ = "5.2.2"
+globalThis.__vuiVersion__ = "5.3.0"
 //# sourceMappingURL=tbody.js.map

package/dist/table/tbody.js.map

@@ -1 +1 @@
-{"version":3,"file":"tbody.js","names":[],"sources":["../../src/table/tbody.tsx"],"sourcesContent":["import { styled, useStyleConfig, vui } from '../core'\nimport { cs } from '../utils'\nimport { useTableContext } from './context'\nimport type { TbodyProps } from './table.types'\nimport Td from './td'\nimport Tr from './tr'\n\nexport const TbodyBase = styled.tbodyBox`\n  tr {\n    :hover td {\n      background-color: skyBlue.hover;\n    }\n\n    &[data-selected='true']:hover td {\n      background-color: skyBlue.hover;\n    }\n\n    &[data-selected='true'] td {\n      border-bottom-color: sandstone.main;\n    }\n\n    &[data-variant='striped'][data-selected='false']:nth-of-type(odd):not(:hover) td {\n      background-color: sandstone.95;\n    }\n\n    &[data-variant='basic']:hover td {\n      background-color: transparent;\n    }\n  }\n`\n\n/** Displays Table body with built-in support for rows. */\nexport const Tbody = vui<'tbody', TbodyProps>((props, ref) => {\n  const { children, className, ...rest } = props\n  const { columns, rows } = useTableContext() ?? {}\n  const styles = useStyleConfig('Table', useTableContext())\n\n  return (\n    <TbodyBase className={cs('vui-tbody', className)} ref={ref} {...styles.tbody} {...rest}>\n      {children ??\n        rows?.map((row, index) => (\n          <Tr key={index}>\n            {columns?.map(column => (\n              <Td key={column.field}>{row[column.field]}</Td>\n            ))}\n          </Tr>\n        ))}\n    </TbodyBase>\n  )\n})\n\nTbody.displayName = 'Tbody'\n\nexport default Tbody\n"],"mappings":";;;;;;;;;;AAOA,MAAa,YAAY,OAAO,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;AAyBxC,MAAa,QAAQ,KAA0B,OAAO,QAAQ;CAC5D,MAAM,EAAE,UAAU,WAAW,GAAG,SAAS;CACzC,MAAM,EAAE,SAAS,SAAS,gBAAgB,KAAK,CAAC;CAChD,MAAM,SAAS,eAAe,SAAS,gBAAgB,CAAC;CAExD,OACE,oBAAC,WAAD;EAAW,WAAW,GAAG,aAAa,SAAS;EAAQ;EAAK,GAAI,OAAO;EAAO,GAAI;YAC/E,YACC,MAAM,KAAK,KAAK,UACd,oBAAC,IAAD,YACG,SAAS,KAAI,WACZ,oBAAC,IAAD,YAAwB,IAAI,OAAO,OAAW,GAArC,OAAO,KAA8B,CAC/C,EACC,GAJK,KAIL,CACL;CACM;AAEf,CAAC;AAED,MAAM,cAAc"}
+{"version":3,"file":"tbody.js","names":[],"sources":["../../src/table/tbody.tsx"],"sourcesContent":["import type { TbodyProps } from './table.types'\n\nimport { styled, useStyleConfig, vui } from '../core'\nimport { cs } from '../utils'\nimport { useTableContext } from './context'\nimport Td from './td'\nimport Tr from './tr'\n\nexport const TbodyBase = styled.tbodyBox`\n  tr {\n    :hover td {\n      background-color: skyBlue.hover;\n    }\n\n    &[data-selected='true']:hover td {\n      background-color: skyBlue.hover;\n    }\n\n    &[data-selected='true'] td {\n      border-bottom-color: sandstone.main;\n    }\n\n    &[data-variant='striped'][data-selected='false']:nth-of-type(odd):not(:hover) td {\n      background-color: sandstone.95;\n    }\n\n    &[data-variant='basic']:hover td {\n      background-color: transparent;\n    }\n  }\n`\n\n/** Displays Table body with built-in support for rows. */\nexport const Tbody = vui<'tbody', TbodyProps>((props, ref) => {\n  const { children, className, ...rest } = props\n  const { columns, rows } = useTableContext() ?? {}\n  const styles = useStyleConfig('Table', useTableContext())\n\n  return (\n    <TbodyBase className={cs('vui-tbody', className)} ref={ref} {...styles.tbody} {...rest}>\n      {children ??\n        rows?.map((row, index) => (\n          <Tr key={index}>\n            {columns?.map(column => (\n              <Td key={column.field}>{row[column.field]}</Td>\n            ))}\n          </Tr>\n        ))}\n    </TbodyBase>\n  )\n})\n\nTbody.displayName = 'Tbody'\n\nexport default Tbody\n"],"mappings":";;;;;;;;;;AAQA,MAAa,YAAY,OAAO,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;AAyBxC,MAAa,QAAQ,KAA0B,OAAO,QAAQ;CAC5D,MAAM,EAAE,UAAU,WAAW,GAAG,SAAS;CACzC,MAAM,EAAE,SAAS,SAAS,gBAAgB,KAAK,CAAC;CAChD,MAAM,SAAS,eAAe,SAAS,gBAAgB,CAAC;CAExD,OACE,oBAAC,WAAD;EAAW,WAAW,GAAG,aAAa,SAAS;EAAQ;EAAK,GAAI,OAAO;EAAO,GAAI;YAC/E,YACC,MAAM,KAAK,KAAK,UACd,oBAAC,IAAD,YACG,SAAS,KAAI,WACZ,oBAAC,IAAD,YAAwB,IAAI,OAAO,OAAW,GAArC,OAAO,KAA8B,CAC/C,EACC,GAJK,KAIL,CACL;CACM;AAEf,CAAC;AAED,MAAM,cAAc"}

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

@@ -1 +1 @@
-{"version":3,"file":"td.d.ts","names":[],"sources":["../../src/table/td.tsx"],"mappings":";;;;cAMa,MAAA,8BAAM,eAAA,mCAAA,YAAA,EAElB,WAFkB;;cAKN,EAAA,EAAE,YAAA,OAAA,OAAA"}
+{"version":3,"file":"td.d.ts","names":[],"sources":["../../src/table/td.tsx"],"mappings":";;;;cAOa,MAAA,8BAAM,eAAA,mCAAA,YAAA,EAElB,WAFkB;;cAKN,EAAA,EAAE,YAAA,OAAA,OAAA"}

package/dist/table/td.js

@@ -30,5 +30,5 @@ Td.displayName = "Td";
 
 //#endregion
 export { TdBase, Td as default };
-globalThis.__vuiVersion__ = "5.2.2"
+globalThis.__vuiVersion__ = "5.3.0"
 //# sourceMappingURL=td.js.map

package/dist/table/td.js.map

@@ -1 +1 @@
-{"version":3,"file":"td.js","names":[],"sources":["../../src/table/td.tsx"],"sourcesContent":["import { styled, useStyleConfig, vui } from '../core'\nimport T from '../t'\nimport { cs } from '../utils'\nimport { useTableContext } from './context'\nimport type { TdProps } from './table.types'\n\nexport const TdBase = styled.tdBox`\n  transition-duration: fast;\n`\n\n/** Displays a cell inside Table row. */\nexport const Td = vui<'td', TdProps>((props, ref) => {\n  const { className, level = 0, children, ...rest } = props\n  const styles = useStyleConfig('Table', useTableContext())\n\n  return (\n    <TdBase className={cs('vui-td', className)} px={2} ref={ref} {...styles.td} {...rest}>\n      {!!level && (\n        <T mr={1}>\n          {Array.from({ length: level }).map((_i, key) => (\n            <T key={key}>&mdash;</T>\n          ))}\n        </T>\n      )}\n      {children}\n    </TdBase>\n  )\n})\n\nTd.displayName = 'Td'\n\nexport default Td\n"],"mappings":";;;;;;;;;AAMA,MAAa,SAAS,OAAO,KAAK;;;;AAKlC,MAAa,KAAK,KAAoB,OAAO,QAAQ;CACnD,MAAM,EAAE,WAAW,QAAQ,GAAG,UAAU,GAAG,SAAS;CACpD,MAAM,SAAS,eAAe,SAAS,gBAAgB,CAAC;CAExD,OACE,qBAAC,QAAD;EAAQ,WAAW,GAAG,UAAU,SAAS;EAAG,IAAI;EAAQ;EAAK,GAAI,OAAO;EAAI,GAAI;YAAhF,CACG,CAAC,CAAC,SACD,oBAAC,GAAD;GAAG,IAAI;aACJ,MAAM,KAAK,EAAE,QAAQ,MAAM,CAAC,CAAC,CAAC,KAAK,IAAI,QACtC,oBAAC,GAAD,YAAa,IAAU,GAAf,GAAe,CACxB;EACA,IAEJ,QACK;;AAEZ,CAAC;AAED,GAAG,cAAc"}
+{"version":3,"file":"td.js","names":[],"sources":["../../src/table/td.tsx"],"sourcesContent":["import type { TdProps } from './table.types'\n\nimport { styled, useStyleConfig, vui } from '../core'\nimport T from '../t'\nimport { cs } from '../utils'\nimport { useTableContext } from './context'\n\nexport const TdBase = styled.tdBox`\n  transition-duration: fast;\n`\n\n/** Displays a cell inside Table row. */\nexport const Td = vui<'td', TdProps>((props, ref) => {\n  const { className, level = 0, children, ...rest } = props\n  const styles = useStyleConfig('Table', useTableContext())\n\n  return (\n    <TdBase className={cs('vui-td', className)} px={2} ref={ref} {...styles.td} {...rest}>\n      {!!level && (\n        <T mr={1}>\n          {Array.from({ length: level }).map((_i, key) => (\n            <T key={key}>&mdash;</T>\n          ))}\n        </T>\n      )}\n      {children}\n    </TdBase>\n  )\n})\n\nTd.displayName = 'Td'\n\nexport default Td\n"],"mappings":";;;;;;;;;AAOA,MAAa,SAAS,OAAO,KAAK;;;;AAKlC,MAAa,KAAK,KAAoB,OAAO,QAAQ;CACnD,MAAM,EAAE,WAAW,QAAQ,GAAG,UAAU,GAAG,SAAS;CACpD,MAAM,SAAS,eAAe,SAAS,gBAAgB,CAAC;CAExD,OACE,qBAAC,QAAD;EAAQ,WAAW,GAAG,UAAU,SAAS;EAAG,IAAI;EAAQ;EAAK,GAAI,OAAO;EAAI,GAAI;YAAhF,CACG,CAAC,CAAC,SACD,oBAAC,GAAD;GAAG,IAAI;aACJ,MAAM,KAAK,EAAE,QAAQ,MAAM,CAAC,CAAC,CAAC,KAAK,IAAI,QACtC,oBAAC,GAAD,YAAa,IAAU,GAAf,GAAe,CACxB;EACA,IAEJ,QACK;;AAEZ,CAAC;AAED,GAAG,cAAc"}

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

@@ -1 +1 @@
-{"version":3,"file":"tfoot.d.ts","names":[],"sources":["../../src/table/tfoot.tsx"],"mappings":";;;cAKa,SAAA,8BAAS,eAAA,sCAAA,YAAA,EAAoB,WAApB;;cAGT,KAAA,EAAK,YAAA,UAKhB,WAAA"}
+{"version":3,"file":"tfoot.d.ts","names":[],"sources":["../../src/table/tfoot.tsx"],"mappings":";;;cAMa,SAAA,8BAAS,eAAA,sCAAA,YAAA,EAAoB,WAApB;;cAGT,KAAA,EAAK,YAAA,UAKhB,WAAA"}

package/dist/table/tfoot.js

@@ -22,5 +22,5 @@ Tfoot.displayName = "Tfoot";
 
 //#endregion
 export { TfootBase, Tfoot as default };
-globalThis.__vuiVersion__ = "5.2.2"
+globalThis.__vuiVersion__ = "5.3.0"
 //# sourceMappingURL=tfoot.js.map

package/dist/table/tfoot.js.map

@@ -1 +1 @@
-{"version":3,"file":"tfoot.js","names":[],"sources":["../../src/table/tfoot.tsx"],"sourcesContent":["import { styled, useStyleConfig, vui } from '../core'\nimport { cs } from '../utils'\nimport { useTableContext } from './context'\nimport type { TfootProps } from './table.types'\n\nexport const TfootBase = styled.tfootBox``\n\n/** Displays Table footer. */\nexport const Tfoot = vui<'tfoot', TfootProps>((props, ref) => {\n  const { className, ...rest } = props\n  const styles = useStyleConfig('Table', useTableContext())\n\n  return <TfootBase className={cs('vui-tfoot', className)} ref={ref} {...styles.tfoot} {...rest} />\n})\n\nTfoot.displayName = 'Tfoot'\n\nexport default Tfoot\n"],"mappings":";;;;;;;;AAKA,MAAa,YAAY,OAAO,QAAQ;;AAGxC,MAAa,QAAQ,KAA0B,OAAO,QAAQ;CAC5D,MAAM,EAAE,WAAW,GAAG,SAAS;CAC/B,MAAM,SAAS,eAAe,SAAS,gBAAgB,CAAC;CAExD,OAAO,oBAAC,WAAD;EAAW,WAAW,GAAG,aAAa,SAAS;EAAQ;EAAK,GAAI,OAAO;EAAO,GAAI;CAAO;AAClG,CAAC;AAED,MAAM,cAAc"}
+{"version":3,"file":"tfoot.js","names":[],"sources":["../../src/table/tfoot.tsx"],"sourcesContent":["import type { TfootProps } from './table.types'\n\nimport { styled, useStyleConfig, vui } from '../core'\nimport { cs } from '../utils'\nimport { useTableContext } from './context'\n\nexport const TfootBase = styled.tfootBox``\n\n/** Displays Table footer. */\nexport const Tfoot = vui<'tfoot', TfootProps>((props, ref) => {\n  const { className, ...rest } = props\n  const styles = useStyleConfig('Table', useTableContext())\n\n  return <TfootBase className={cs('vui-tfoot', className)} ref={ref} {...styles.tfoot} {...rest} />\n})\n\nTfoot.displayName = 'Tfoot'\n\nexport default Tfoot\n"],"mappings":";;;;;;;;AAMA,MAAa,YAAY,OAAO,QAAQ;;AAGxC,MAAa,QAAQ,KAA0B,OAAO,QAAQ;CAC5D,MAAM,EAAE,WAAW,GAAG,SAAS;CAC/B,MAAM,SAAS,eAAe,SAAS,gBAAgB,CAAC;CAExD,OAAO,oBAAC,WAAD;EAAW,WAAW,GAAG,aAAa,SAAS;EAAQ;EAAK,GAAI,OAAO;EAAO,GAAI;CAAO;AAClG,CAAC;AAED,MAAM,cAAc"}

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

@@ -1 +1 @@
-{"version":3,"file":"th.d.ts","names":[],"sources":["../../src/table/th.tsx"],"mappings":";;;;cAQa,MAAA,8BAAM,eAAA,mCAAA,YAAA,EAIlB,WAJkB;;cAON,EAAA,EAAE,YAAA,OAAA,OAAA"}
+{"version":3,"file":"th.d.ts","names":[],"sources":["../../src/table/th.tsx"],"mappings":";;;;cASa,MAAA,8BAAM,eAAA,mCAAA,YAAA,EAIlB,WAJkB;;cAON,EAAA,EAAE,YAAA,OAAA,OAAA"}

package/dist/table/th.js

@@ -68,5 +68,5 @@ Th.displayName = "Th";
 
 //#endregion
 export { ThBase, Th as default };
-globalThis.__vuiVersion__ = "5.2.2"
+globalThis.__vuiVersion__ = "5.3.0"
 //# sourceMappingURL=th.js.map

package/dist/table/th.js.map

@@ -1 +1 @@
-{"version":3,"file":"th.js","names":[],"sources":["../../src/table/th.tsx"],"sourcesContent":["import Box from '../box'\nimport { styled, useStyleConfig, vui } from '../core'\nimport type { MouseEvent } from '../utils'\nimport { cs, useCallbackRef } from '../utils'\nimport { useTableContext } from './context'\nimport type { ThProps } from './table.types'\nimport TableSortIcon from './tableSortIcon'\n\nexport const ThBase = styled.thBox`\n  font-weight: demi;\n  text-align: left;\n  transition-duration: fast;\n`\n\n/** Displays Table heading with support for sort. */\nexport const Th = vui<'th', ThProps>((props, ref) => {\n  const {\n    children,\n    className,\n    disabled,\n    field,\n    isInteractive: isInteractiveProp,\n    isSortable,\n    onClick: onClickProp,\n    title,\n    ...rest\n  } = props\n\n  // Always call hooks unconditionally\n  const tableContext = useTableContext()\n  const styles = useStyleConfig('Table', tableContext)\n\n  // Extract values after hook calls\n  const { onSortChange, sort } = tableContext || {}\n\n  const handleClick = useCallbackRef((e: MouseEvent<HTMLTableCellElement>) => {\n    onClickProp?.(e)\n    if (isSortable && field && onSortChange) {\n      onSortChange(field)\n    }\n  })\n\n  const onClick = onClickProp || isSortable ? handleClick : undefined\n\n  const isActive = !disabled && sort?.key === field\n  const sortOrder = isActive ? sort.order : undefined\n  const isInteractive = isInteractiveProp ?? onClick !== undefined\n\n  const activeProps = isActive ? { bg: 'skyBlue.active' } : {}\n  const disabledProps = disabled ? { bg: 'disabled.bg', color: 'disabled.color', cursor: 'not-allowed' } : {}\n  const hoverBg = isSortable ? 'skyBlue.hover' : undefined\n\n  const interactiveProps =\n    !disabled && isInteractive\n      ? {\n          cursor: 'pointer',\n          onClick,\n          tabIndex: 0,\n          userSelect: 'none',\n        }\n      : {}\n\n  return (\n    <ThBase\n      className={cs('vui-th', className)}\n      data-active={isActive}\n      data-disabled={disabled}\n      hoverBg={hoverBg}\n      px={2}\n      ref={ref}\n      {...styles.th}\n      {...activeProps}\n      {...disabledProps}\n      {...interactiveProps}\n      {...rest}\n    >\n      {children ?? (\n        <Box centerV display=\"inline-flex\">\n          {title}\n          {isSortable && <TableSortIcon ml={1} my={0.5} order={sortOrder} />}\n        </Box>\n      )}\n    </ThBase>\n  )\n})\n\nTh.displayName = 'Th'\n\nexport default Th\n"],"mappings":";;;;;;;;;;;AAQA,MAAa,SAAS,OAAO,KAAK;;;;;;AAOlC,MAAa,KAAK,KAAoB,OAAO,QAAQ;CACnD,MAAM,EACJ,UACA,WACA,UACA,OACA,eAAe,mBACf,YACA,SAAS,aACT,OACA,GAAG,SACD;CAGJ,MAAM,eAAe,gBAAgB;CACrC,MAAM,SAAS,eAAe,SAAS,YAAY;CAGnD,MAAM,EAAE,cAAc,SAAS,gBAAgB,CAAC;CAEhD,MAAM,cAAc,gBAAgB,MAAwC;EAC1E,cAAc,CAAC;EACf,IAAI,cAAc,SAAS,cACzB,aAAa,KAAK;CAEtB,CAAC;CAED,MAAM,UAAU,eAAe,aAAa,cAAc;CAE1D,MAAM,WAAW,CAAC,YAAY,MAAM,QAAQ;CAC5C,MAAM,YAAY,WAAW,KAAK,QAAQ;CAC1C,MAAM,gBAAgB,qBAAqB,YAAY;CAEvD,MAAM,cAAc,WAAW,EAAE,IAAI,iBAAiB,IAAI,CAAC;CAC3D,MAAM,gBAAgB,WAAW;EAAE,IAAI;EAAe,OAAO;EAAkB,QAAQ;CAAc,IAAI,CAAC;CAC1G,MAAM,UAAU,aAAa,kBAAkB;CAE/C,MAAM,mBACJ,CAAC,YAAY,gBACT;EACE,QAAQ;EACR;EACA,UAAU;EACV,YAAY;CACd,IACA,CAAC;CAEP,OACE,oBAAC,QAAD;EACE,WAAW,GAAG,UAAU,SAAS;EACjC,eAAa;EACb,iBAAe;EACN;EACT,IAAI;EACC;EACL,GAAI,OAAO;EACX,GAAI;EACJ,GAAI;EACJ,GAAI;EACJ,GAAI;YAEH,YACC,qBAAC,KAAD;GAAK;GAAQ,SAAQ;aAArB,CACG,OACA,cAAc,oBAAC,eAAD;IAAe,IAAI;IAAG,IAAI;IAAK,OAAO;GAAY,EAC9D;;CAED;AAEZ,CAAC;AAED,GAAG,cAAc"}
+{"version":3,"file":"th.js","names":[],"sources":["../../src/table/th.tsx"],"sourcesContent":["import type { MouseEvent } from '../utils'\nimport type { ThProps } from './table.types'\n\nimport Box from '../box'\nimport { styled, useStyleConfig, vui } from '../core'\nimport { cs, useCallbackRef } from '../utils'\nimport { useTableContext } from './context'\nimport TableSortIcon from './tableSortIcon'\n\nexport const ThBase = styled.thBox`\n  font-weight: demi;\n  text-align: left;\n  transition-duration: fast;\n`\n\n/** Displays Table heading with support for sort. */\nexport const Th = vui<'th', ThProps>((props, ref) => {\n  const {\n    children,\n    className,\n    disabled,\n    field,\n    isInteractive: isInteractiveProp,\n    isSortable,\n    onClick: onClickProp,\n    title,\n    ...rest\n  } = props\n\n  // Always call hooks unconditionally\n  const tableContext = useTableContext()\n  const styles = useStyleConfig('Table', tableContext)\n\n  // Extract values after hook calls\n  const { onSortChange, sort } = tableContext || {}\n\n  const handleClick = useCallbackRef((e: MouseEvent<HTMLTableCellElement>) => {\n    onClickProp?.(e)\n    if (isSortable && field && onSortChange) {\n      onSortChange(field)\n    }\n  })\n\n  const onClick = onClickProp || isSortable ? handleClick : undefined\n\n  const isActive = !disabled && sort?.key === field\n  const sortOrder = isActive ? sort.order : undefined\n  const isInteractive = isInteractiveProp ?? onClick !== undefined\n\n  const activeProps = isActive ? { bg: 'skyBlue.active' } : {}\n  const disabledProps = disabled ? { bg: 'disabled.bg', color: 'disabled.color', cursor: 'not-allowed' } : {}\n  const hoverBg = isSortable ? 'skyBlue.hover' : undefined\n\n  const interactiveProps =\n    !disabled && isInteractive\n      ? {\n          cursor: 'pointer',\n          onClick,\n          tabIndex: 0,\n          userSelect: 'none',\n        }\n      : {}\n\n  return (\n    <ThBase\n      className={cs('vui-th', className)}\n      data-active={isActive}\n      data-disabled={disabled}\n      hoverBg={hoverBg}\n      px={2}\n      ref={ref}\n      {...styles.th}\n      {...activeProps}\n      {...disabledProps}\n      {...interactiveProps}\n      {...rest}\n    >\n      {children ?? (\n        <Box centerV display=\"inline-flex\">\n          {title}\n          {isSortable && <TableSortIcon ml={1} my={0.5} order={sortOrder} />}\n        </Box>\n      )}\n    </ThBase>\n  )\n})\n\nTh.displayName = 'Th'\n\nexport default Th\n"],"mappings":";;;;;;;;;;;AASA,MAAa,SAAS,OAAO,KAAK;;;;;;AAOlC,MAAa,KAAK,KAAoB,OAAO,QAAQ;CACnD,MAAM,EACJ,UACA,WACA,UACA,OACA,eAAe,mBACf,YACA,SAAS,aACT,OACA,GAAG,SACD;CAGJ,MAAM,eAAe,gBAAgB;CACrC,MAAM,SAAS,eAAe,SAAS,YAAY;CAGnD,MAAM,EAAE,cAAc,SAAS,gBAAgB,CAAC;CAEhD,MAAM,cAAc,gBAAgB,MAAwC;EAC1E,cAAc,CAAC;EACf,IAAI,cAAc,SAAS,cACzB,aAAa,KAAK;CAEtB,CAAC;CAED,MAAM,UAAU,eAAe,aAAa,cAAc;CAE1D,MAAM,WAAW,CAAC,YAAY,MAAM,QAAQ;CAC5C,MAAM,YAAY,WAAW,KAAK,QAAQ;CAC1C,MAAM,gBAAgB,qBAAqB,YAAY;CAEvD,MAAM,cAAc,WAAW,EAAE,IAAI,iBAAiB,IAAI,CAAC;CAC3D,MAAM,gBAAgB,WAAW;EAAE,IAAI;EAAe,OAAO;EAAkB,QAAQ;CAAc,IAAI,CAAC;CAC1G,MAAM,UAAU,aAAa,kBAAkB;CAE/C,MAAM,mBACJ,CAAC,YAAY,gBACT;EACE,QAAQ;EACR;EACA,UAAU;EACV,YAAY;CACd,IACA,CAAC;CAEP,OACE,oBAAC,QAAD;EACE,WAAW,GAAG,UAAU,SAAS;EACjC,eAAa;EACb,iBAAe;EACN;EACT,IAAI;EACC;EACL,GAAI,OAAO;EACX,GAAI;EACJ,GAAI;EACJ,GAAI;EACJ,GAAI;YAEH,YACC,qBAAC,KAAD;GAAK;GAAQ,SAAQ;aAArB,CACG,OACA,cAAc,oBAAC,eAAD;IAAe,IAAI;IAAG,IAAI;IAAK,OAAO;GAAY,EAC9D;;CAED;AAEZ,CAAC;AAED,GAAG,cAAc"}

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

@@ -1 +1 @@
-{"version":3,"file":"thead.d.ts","names":[],"sources":["../../src/table/thead.tsx"],"mappings":";;;;cAea,KAAA,EAAK,YAAA,UAAA,UAAA"}
+{"version":3,"file":"thead.d.ts","names":[],"sources":["../../src/table/thead.tsx"],"mappings":";;;;cAgBa,KAAA,EAAK,YAAA,UAAA,UAAA"}

package/dist/table/thead.js

@@ -41,5 +41,5 @@ Thead.displayName = "Thead";
 
 //#endregion
 export { Thead as default };
-globalThis.__vuiVersion__ = "5.2.2"
+globalThis.__vuiVersion__ = "5.3.0"
 //# sourceMappingURL=thead.js.map

package/dist/table/thead.js.map

@@ -1 +1 @@
-{"version":3,"file":"thead.js","names":[],"sources":["../../src/table/thead.tsx"],"sourcesContent":["import { styled, useStyleConfig, vui } from '../core'\nimport { cs } from '../utils'\nimport { useTableContext } from './context'\nimport type { TheadProps } from './table.types'\nimport Th from './th'\nimport Tr from './tr'\n\nconst TheadBase = styled.theadBox`\n  tr th,\n  tr td {\n    border-bottom: 1px solid sandstone.main;\n  }\n`\n\n/** Displays Table head with support for columns and sticky. */\nexport const Thead = vui<'thead', TheadProps>((props, ref) => {\n  const { children, className, ...rest } = props\n  const { columns, stickyHeader } = useTableContext() ?? {}\n  const styles = useStyleConfig('Table', useTableContext())\n\n  const stickyProps = stickyHeader\n    ? {\n        bg: 'white',\n        position: 'sticky',\n        top: 0,\n        zIndex: 3,\n      }\n    : {}\n\n  return (\n    <TheadBase className={cs('vui-thead', className)} ref={ref} {...stickyProps} {...styles.thead} {...rest}>\n      {children ?? (\n        <Tr>\n          {columns?.map(column => (\n            <Th key={column.field} role=\"columnheader\" {...column} />\n          ))}\n        </Tr>\n      )}\n    </TheadBase>\n  )\n})\n\nThead.displayName = 'Thead'\n\nexport default Thead\n"],"mappings":";;;;;;;;;;AAOA,MAAM,YAAY,OAAO,QAAQ;;;;;;;AAQjC,MAAa,QAAQ,KAA0B,OAAO,QAAQ;CAC5D,MAAM,EAAE,UAAU,WAAW,GAAG,SAAS;CACzC,MAAM,EAAE,SAAS,iBAAiB,gBAAgB,KAAK,CAAC;CACxD,MAAM,SAAS,eAAe,SAAS,gBAAgB,CAAC;CAExD,MAAM,cAAc,eAChB;EACE,IAAI;EACJ,UAAU;EACV,KAAK;EACL,QAAQ;CACV,IACA,CAAC;CAEL,OACE,oBAAC,WAAD;EAAW,WAAW,GAAG,aAAa,SAAS;EAAQ;EAAK,GAAI;EAAa,GAAI,OAAO;EAAO,GAAI;YAChG,YACC,oBAAC,IAAD,YACG,SAAS,KAAI,WACZ,oBAAC,IAAD;GAAuB,MAAK;GAAe,GAAI;EAAS,GAA/C,OAAO,KAAwC,CACzD,EACC;CAEG;AAEf,CAAC;AAED,MAAM,cAAc"}
+{"version":3,"file":"thead.js","names":[],"sources":["../../src/table/thead.tsx"],"sourcesContent":["import type { TheadProps } from './table.types'\n\nimport { styled, useStyleConfig, vui } from '../core'\nimport { cs } from '../utils'\nimport { useTableContext } from './context'\nimport Th from './th'\nimport Tr from './tr'\n\nconst TheadBase = styled.theadBox`\n  tr th,\n  tr td {\n    border-bottom: 1px solid sandstone.main;\n  }\n`\n\n/** Displays Table head with support for columns and sticky. */\nexport const Thead = vui<'thead', TheadProps>((props, ref) => {\n  const { children, className, ...rest } = props\n  const { columns, stickyHeader } = useTableContext() ?? {}\n  const styles = useStyleConfig('Table', useTableContext())\n\n  const stickyProps = stickyHeader\n    ? {\n        bg: 'white',\n        position: 'sticky',\n        top: 0,\n        zIndex: 3,\n      }\n    : {}\n\n  return (\n    <TheadBase className={cs('vui-thead', className)} ref={ref} {...stickyProps} {...styles.thead} {...rest}>\n      {children ?? (\n        <Tr>\n          {columns?.map(column => (\n            <Th key={column.field} role=\"columnheader\" {...column} />\n          ))}\n        </Tr>\n      )}\n    </TheadBase>\n  )\n})\n\nThead.displayName = 'Thead'\n\nexport default Thead\n"],"mappings":";;;;;;;;;;AAQA,MAAM,YAAY,OAAO,QAAQ;;;;;;;AAQjC,MAAa,QAAQ,KAA0B,OAAO,QAAQ;CAC5D,MAAM,EAAE,UAAU,WAAW,GAAG,SAAS;CACzC,MAAM,EAAE,SAAS,iBAAiB,gBAAgB,KAAK,CAAC;CACxD,MAAM,SAAS,eAAe,SAAS,gBAAgB,CAAC;CAExD,MAAM,cAAc,eAChB;EACE,IAAI;EACJ,UAAU;EACV,KAAK;EACL,QAAQ;CACV,IACA,CAAC;CAEL,OACE,oBAAC,WAAD;EAAW,WAAW,GAAG,aAAa,SAAS;EAAQ;EAAK,GAAI;EAAa,GAAI,OAAO;EAAO,GAAI;YAChG,YACC,oBAAC,IAAD,YACG,SAAS,KAAI,WACZ,oBAAC,IAAD;GAAuB,MAAK;GAAe,GAAI;EAAS,GAA/C,OAAO,KAAwC,CACzD,EACC;CAEG;AAEf,CAAC;AAED,MAAM,cAAc"}

package/dist/table/theme.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"tr.d.ts","names":[],"sources":["../../src/table/tr.tsx"],"mappings":";;;;cAYa,MAAA,8BAAM,eAAA,mCAAA,YAAA,EAGlB,WAHkB;;cAMN,EAAA,EAAE,YAAA,OAAA,OAAA"}
+{"version":3,"file":"tr.d.ts","names":[],"sources":["../../src/table/tr.tsx"],"mappings":";;;;cAaa,MAAA,8BAAM,eAAA,mCAAA,YAAA,EAGlB,WAHkB;;cAMN,EAAA,EAAE,YAAA,OAAA,OAAA"}

package/dist/table/tr.js

@@ -64,5 +64,5 @@ Tr.displayName = "Tr";
 
 //#endregion
 export { TrBase, Tr as default };
-globalThis.__vuiVersion__ = "5.2.2"
+globalThis.__vuiVersion__ = "5.3.0"
 //# sourceMappingURL=tr.js.map

package/dist/table/tr.js.map

@@ -1 +1 @@
-{"version":3,"file":"tr.js","names":[],"sources":["../../src/table/tr.tsx"],"sourcesContent":["import { useEffect, useState } from 'react'\n\nimport Button from '../button'\nimport { styled, useStyleConfig, vui } from '../core'\nimport { cs } from '../utils'\nimport { useTableContext } from './context'\nimport type { TrProps } from './table.types'\nimport Td from './td'\n\nconst trClassName = 'vui-tr'\nconst buttonClassName = (isExpanded?: boolean) => `falAngle${isExpanded ? 'Down' : 'Right'}`\n\nexport const TrBase = styled.trBox`\n  position: relative;\n  transition-duration: fast;\n`\n\n/** Displays Table row that can contain heading or data cells. */\nexport const Tr = vui<'tr', TrProps>((props, ref) => {\n  const { className, isExpanded: isExpandedProp, isSelected, nested, onCollapsed, onExpanded, ...rest } = props\n  const { variant } = useTableContext() ?? {}\n  const styles = useStyleConfig('Table', useTableContext())\n  const [isExpanded, setIsExpanded] = useState(isExpandedProp)\n\n  useEffect(() => {\n    setIsExpanded(isExpandedProp)\n  }, [isExpandedProp])\n\n  const onToggle = () => {\n    if (isExpanded) {\n      setIsExpanded(false)\n      onCollapsed?.()\n    } else {\n      setIsExpanded(true)\n      onExpanded?.()\n    }\n  }\n\n  const selectedProps = isSelected ? { bg: 'skyBlue.selected' } : {}\n\n  rest.children = (\n    <>\n      {nested !== undefined && (\n        <Td maxW={16} px={1} textAlign=\"center\">\n          {nested ? (\n            <Button\n              size=\"sm\"\n              icon={buttonClassName(isExpanded)}\n              onClick={onToggle}\n              variant=\"tertiary\"\n              style={\n                {\n                  '--vui-button-color': 'var(--vui-action-blue-subtle-inverse)',\n                  '--vui-button-hover-bg': 'var(--vui-action-blue-subtle-hover)',\n                  '--vui-button-active-bg': 'var(--vui-action-blue-subtle-pressed)',\n                } as React.CSSProperties\n              }\n            />\n          ) : null}\n        </Td>\n      )}\n      {rest.children}\n    </>\n  )\n\n  return (\n    <>\n      <TrBase\n        className={cs(trClassName, `${trClassName}-${isExpanded ? 'expanded' : 'collapsed'}`, className)}\n        data-selected={Boolean(isSelected)}\n        data-variant={variant}\n        ref={ref}\n        {...styles.tr}\n        {...selectedProps}\n        {...rest}\n      />\n      {isExpanded && nested}\n    </>\n  )\n})\n\nTr.displayName = 'Tr'\nexport default Tr\n"],"mappings":";;;;;;;;;;;AASA,MAAM,cAAc;AACpB,MAAM,mBAAmB,eAAyB,WAAW,aAAa,SAAS;AAEnF,MAAa,SAAS,OAAO,KAAK;;;;;AAMlC,MAAa,KAAK,KAAoB,OAAO,QAAQ;CACnD,MAAM,EAAE,WAAW,YAAY,gBAAgB,YAAY,QAAQ,aAAa,YAAY,GAAG,SAAS;CACxG,MAAM,EAAE,YAAY,gBAAgB,KAAK,CAAC;CAC1C,MAAM,SAAS,eAAe,SAAS,gBAAgB,CAAC;CACxD,MAAM,CAAC,YAAY,iBAAiB,SAAS,cAAc;CAE3D,gBAAgB;EACd,cAAc,cAAc;CAC9B,GAAG,CAAC,cAAc,CAAC;CAEnB,MAAM,iBAAiB;EACrB,IAAI,YAAY;GACd,cAAc,KAAK;GACnB,cAAc;EAChB,OAAO;GACL,cAAc,IAAI;GAClB,aAAa;EACf;CACF;CAEA,MAAM,gBAAgB,aAAa,EAAE,IAAI,mBAAmB,IAAI,CAAC;CAEjE,KAAK,WACH,8CACG,WAAW,UACV,oBAAC,IAAD;EAAI,MAAM;EAAI,IAAI;EAAG,WAAU;YAC5B,SACC,oBAAC,QAAD;GACE,MAAK;GACL,MAAM,gBAAgB,UAAU;GAChC,SAAS;GACT,SAAQ;GACR,OACE;IACE,sBAAsB;IACtB,yBAAyB;IACzB,0BAA0B;GAC5B;EAEH,KACC;CACF,IAEL,KAAK,QACN;CAGJ,OACE,8CACE,oBAAC,QAAD;EACE,WAAW,GAAG,aAAa,GAAG,YAAY,GAAG,aAAa,aAAa,eAAe,SAAS;EAC/F,iBAAe,QAAQ,UAAU;EACjC,gBAAc;EACT;EACL,GAAI,OAAO;EACX,GAAI;EACJ,GAAI;CACL,IACA,cAAc,MACf;AAEN,CAAC;AAED,GAAG,cAAc"}
+{"version":3,"file":"tr.js","names":[],"sources":["../../src/table/tr.tsx"],"sourcesContent":["import { useEffect, useState } from 'react'\n\nimport type { TrProps } from './table.types'\n\nimport Button from '../button'\nimport { styled, useStyleConfig, vui } from '../core'\nimport { cs } from '../utils'\nimport { useTableContext } from './context'\nimport Td from './td'\n\nconst trClassName = 'vui-tr'\nconst buttonClassName = (isExpanded?: boolean) => `falAngle${isExpanded ? 'Down' : 'Right'}`\n\nexport const TrBase = styled.trBox`\n  position: relative;\n  transition-duration: fast;\n`\n\n/** Displays Table row that can contain heading or data cells. */\nexport const Tr = vui<'tr', TrProps>((props, ref) => {\n  const { className, isExpanded: isExpandedProp, isSelected, nested, onCollapsed, onExpanded, ...rest } = props\n  const { variant } = useTableContext() ?? {}\n  const styles = useStyleConfig('Table', useTableContext())\n  const [isExpanded, setIsExpanded] = useState(isExpandedProp)\n\n  useEffect(() => {\n    setIsExpanded(isExpandedProp)\n  }, [isExpandedProp])\n\n  const onToggle = () => {\n    if (isExpanded) {\n      setIsExpanded(false)\n      onCollapsed?.()\n    } else {\n      setIsExpanded(true)\n      onExpanded?.()\n    }\n  }\n\n  const selectedProps = isSelected ? { bg: 'skyBlue.selected' } : {}\n\n  rest.children = (\n    <>\n      {nested !== undefined && (\n        <Td maxW={16} px={1} textAlign=\"center\">\n          {nested ? (\n            <Button\n              size=\"sm\"\n              icon={buttonClassName(isExpanded)}\n              onClick={onToggle}\n              variant=\"tertiary\"\n              style={\n                {\n                  '--vui-button-color': 'var(--vui-action-blue-subtle-inverse)',\n                  '--vui-button-hover-bg': 'var(--vui-action-blue-subtle-hover)',\n                  '--vui-button-active-bg': 'var(--vui-action-blue-subtle-pressed)',\n                } as React.CSSProperties\n              }\n            />\n          ) : null}\n        </Td>\n      )}\n      {rest.children}\n    </>\n  )\n\n  return (\n    <>\n      <TrBase\n        className={cs(trClassName, `${trClassName}-${isExpanded ? 'expanded' : 'collapsed'}`, className)}\n        data-selected={Boolean(isSelected)}\n        data-variant={variant}\n        ref={ref}\n        {...styles.tr}\n        {...selectedProps}\n        {...rest}\n      />\n      {isExpanded && nested}\n    </>\n  )\n})\n\nTr.displayName = 'Tr'\nexport default Tr\n"],"mappings":";;;;;;;;;;;AAUA,MAAM,cAAc;AACpB,MAAM,mBAAmB,eAAyB,WAAW,aAAa,SAAS;AAEnF,MAAa,SAAS,OAAO,KAAK;;;;;AAMlC,MAAa,KAAK,KAAoB,OAAO,QAAQ;CACnD,MAAM,EAAE,WAAW,YAAY,gBAAgB,YAAY,QAAQ,aAAa,YAAY,GAAG,SAAS;CACxG,MAAM,EAAE,YAAY,gBAAgB,KAAK,CAAC;CAC1C,MAAM,SAAS,eAAe,SAAS,gBAAgB,CAAC;CACxD,MAAM,CAAC,YAAY,iBAAiB,SAAS,cAAc;CAE3D,gBAAgB;EACd,cAAc,cAAc;CAC9B,GAAG,CAAC,cAAc,CAAC;CAEnB,MAAM,iBAAiB;EACrB,IAAI,YAAY;GACd,cAAc,KAAK;GACnB,cAAc;EAChB,OAAO;GACL,cAAc,IAAI;GAClB,aAAa;EACf;CACF;CAEA,MAAM,gBAAgB,aAAa,EAAE,IAAI,mBAAmB,IAAI,CAAC;CAEjE,KAAK,WACH,8CACG,WAAW,UACV,oBAAC,IAAD;EAAI,MAAM;EAAI,IAAI;EAAG,WAAU;YAC5B,SACC,oBAAC,QAAD;GACE,MAAK;GACL,MAAM,gBAAgB,UAAU;GAChC,SAAS;GACT,SAAQ;GACR,OACE;IACE,sBAAsB;IACtB,yBAAyB;IACzB,0BAA0B;GAC5B;EAEH,KACC;CACF,IAEL,KAAK,QACN;CAGJ,OACE,8CACE,oBAAC,QAAD;EACE,WAAW,GAAG,aAAa,GAAG,YAAY,GAAG,aAAa,aAAa,eAAe,SAAS;EAC/F,iBAAe,QAAQ,UAAU;EACjC,gBAAc;EACT;EACL,GAAI,OAAO;EACX,GAAI;EACJ,GAAI;CACL,IACA,cAAc,MACf;AAEN,CAAC;AAED,GAAG,cAAc"}

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

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

package/dist/table/useTable.js

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

package/dist/table/useTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTable.js","names":[],"sources":["../../src/table/useTable.ts"],"sourcesContent":["import type { SortOrder } from '../utils'\nimport { useCallbackRef, useControlled } from '../utils'\nimport type { UseTableProps } from './useTable.types'\n\nconst sortOrders: SortOrder[] = ['asc', 'desc', null]\nconst defaultSortOrder: SortOrder = sortOrders[0]\n\nfunction getNextOrder(order: SortOrder) {\n  const next = sortOrders.indexOf(order) + 1\n  return sortOrders[next] !== undefined ? sortOrders[next] : defaultSortOrder\n}\n\n/** Handles controlled/uncontrolled sort of the Table rows. */\nexport default function useTable(props: UseTableProps) {\n  const { defaultSort = { key: '', order: defaultSortOrder }, onSortChange: onSortChangeProp, sort: value } = props\n  const [sort, onChange, { isControlled }] = useControlled({\n    defaultValue: defaultSort,\n    onChange: onSortChangeProp,\n    value,\n  })\n\n  const onSortChange = useCallbackRef((key: string) => {\n    const order = sort.key === key ? getNextOrder(sort.order) : defaultSortOrder\n    onChange({ key, order })\n  })\n\n  return { isControlled, onSortChange, sort }\n}\n\nexport type UseTableReturnType = ReturnType<typeof useTable>\n"],"mappings":";;;AAIA,MAAM,aAA0B;CAAC;CAAO;CAAQ;AAAI;AACpD,MAAM,mBAA8B,WAAW;AAE/C,SAAS,aAAa,OAAkB;CACtC,MAAM,OAAO,WAAW,QAAQ,KAAK,IAAI;CACzC,OAAO,WAAW,UAAU,SAAY,WAAW,QAAQ;AAC7D;;AAGA,SAAwB,SAAS,OAAsB;CACrD,MAAM,EAAE,cAAc;EAAE,KAAK;EAAI,OAAO;CAAiB,GAAG,cAAc,kBAAkB,MAAM,UAAU;CAC5G,MAAM,CAAC,MAAM,UAAU,EAAE,kBAAkB,cAAc;EACvD,cAAc;EACd,UAAU;EACV;CACF,CAAC;CAOD,OAAO;EAAE;EAAc,cALF,gBAAgB,QAAgB;GAEnD,SAAS;IAAE;IAAK,OADF,KAAK,QAAQ,MAAM,aAAa,KAAK,KAAK,IAAI;GACtC,CAAC;EACzB,CAEkC;EAAG;CAAK;AAC5C"}
+{"version":3,"file":"useTable.js","names":[],"sources":["../../src/table/useTable.ts"],"sourcesContent":["import type { SortOrder } from '../utils'\nimport type { UseTableProps } from './useTable.types'\n\nimport { useCallbackRef, useControlled } from '../utils'\n\nconst sortOrders: SortOrder[] = ['asc', 'desc', null]\nconst defaultSortOrder: SortOrder = sortOrders[0]\n\nfunction getNextOrder(order: SortOrder) {\n  const next = sortOrders.indexOf(order) + 1\n  return sortOrders[next] !== undefined ? sortOrders[next] : defaultSortOrder\n}\n\n/** Handles controlled/uncontrolled sort of the Table rows. */\nexport default function useTable(props: UseTableProps) {\n  const { defaultSort = { key: '', order: defaultSortOrder }, onSortChange: onSortChangeProp, sort: value } = props\n  const [sort, onChange, { isControlled }] = useControlled({\n    defaultValue: defaultSort,\n    onChange: onSortChangeProp,\n    value,\n  })\n\n  const onSortChange = useCallbackRef((key: string) => {\n    const order = sort.key === key ? getNextOrder(sort.order) : defaultSortOrder\n    onChange({ key, order })\n  })\n\n  return { isControlled, onSortChange, sort }\n}\n\nexport type UseTableReturnType = ReturnType<typeof useTable>\n"],"mappings":";;;AAKA,MAAM,aAA0B;CAAC;CAAO;CAAQ;AAAI;AACpD,MAAM,mBAA8B,WAAW;AAE/C,SAAS,aAAa,OAAkB;CACtC,MAAM,OAAO,WAAW,QAAQ,KAAK,IAAI;CACzC,OAAO,WAAW,UAAU,SAAY,WAAW,QAAQ;AAC7D;;AAGA,SAAwB,SAAS,OAAsB;CACrD,MAAM,EAAE,cAAc;EAAE,KAAK;EAAI,OAAO;CAAiB,GAAG,cAAc,kBAAkB,MAAM,UAAU;CAC5G,MAAM,CAAC,MAAM,UAAU,EAAE,kBAAkB,cAAc;EACvD,cAAc;EACd,UAAU;EACV;CACF,CAAC;CAOD,OAAO;EAAE;EAAc,cALF,gBAAgB,QAAgB;GAEnD,SAAS;IAAE;IAAK,OADF,KAAK,QAAQ,MAAM,aAAa,KAAK,KAAK,IAAI;GACtC,CAAC;EACzB,CAEkC;EAAG;CAAK;AAC5C"}

package/dist/tabs/consts.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"tab.d.ts","names":[],"sources":["../../src/tabs/tab.tsx"],"mappings":";;;;cAIa,OAAA,8BAAO,eAAA,oCAAA,YAAA,EAEnB,WAFmB;;;;cAOP,GAAA,EAAG,YAAA,QAAA,QAAA"}
+{"version":3,"file":"tab.d.ts","names":[],"sources":["../../src/tabs/tab.tsx"],"mappings":";;;;cAKa,OAAA,8BAAO,eAAA,oCAAA,YAAA,EAEnB,WAFmB;;;;cAOP,GAAA,EAAG,YAAA,QAAA,QAAA"}

package/dist/tabs/tab.js

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