@veracity/vui 4.0.3 → 5.0.0-alpha.375407.2603121328

package/dist/input/input.js.map

@@ -1 +1 @@
-{"version":3,"file":"input.js","names":["AutoCompletePopover"],"sources":["../../src/input/input.tsx"],"sourcesContent":["import { useEffect, useId, useMemo, useState } from 'react'\n\nimport Box from '../box'\nimport { IconButton } from '../button'\nimport type { VuiComponent } from '../core'\nimport { styled, useStyleConfig, vui } from '../core'\nimport Label from '../label'\nimport { T } from '../t'\nimport type { ChangeEvent } from '../utils'\nimport { cs, filterUndefined, isString } from '../utils'\nimport AutoCompletePopover from './autoCompletePopover'\nimport {\n  clearIconSize,\n  displayValueOnlyTextSize,\n  helpTextMargin,\n  helpTextSize,\n  inputColors,\n  inputStateMapping,\n} from './consts'\nimport { InputProvider } from './context'\nimport { getInitialCount } from './helpers'\nimport HelpText from './helpText'\nimport type { InputProps } from './input.types'\nimport InputIcon from './inputIcon'\nimport InputInput from './inputInput'\n\nexport const InputBase = styled.divBox`\n  align-items: center;\n  color: sandstone.10;\n  background-color: white;\n  border-radius: none;\n  border-width: 1px;\n  display: flex;\n  flex-shrink: 0;\n  outline: none;\n  position: relative;\n  transition-duration: 0s;\n  transform: translate3d(0, 0, 0);\n  width: 100%;\n\n  &[aria-disabled='true'] {\n    opacity: 0.5;\n    cursor: not-allowed;\n    background-color: sandstone.79;\n    border-color: sandstone.79;\n    & > .vui-icon {\n      color: sandstone.50;\n    }\n    & > .vui-icon > path {\n      fill: sandstone.50;\n    }\n  }\n`\n\n/**\n * Displays an input element wrapped in a div to allow extra content, like counter, side icons or buttons.\n * Forwards many relevant props to the inner input. Handles different states, like loading or error.\n * Exposes some props to the children via context.\n */\nexport const Input = vui<'div', InputProps>((props, ref) => {\n  const {\n    allowClear,\n    ariaLabel,\n    autoComplete,\n    autoCompleteMaxHeight,\n    autoCompleteOptions,\n    autoFocus,\n    children,\n    className,\n    defaultValue,\n    disabled,\n    displayValueOnly,\n    errorText,\n    helpText,\n    iconLeft,\n    iconRight,\n    id: idProp,\n    input,\n    inputProps,\n    inputRef,\n    itemLeft,\n    itemRight,\n    label,\n    labelMarkOptional,\n    labelTooltipText,\n    max,\n    maxLength,\n    min,\n    minLength,\n    name,\n    onBlur,\n    onChange: onChangeProp,\n    onFocus,\n    pattern,\n    placeholder,\n    readOnly,\n    required,\n    showCount,\n    size = 'lg',\n    state = '',\n    stateMapping,\n    step,\n    type = 'text',\n    value,\n    variant,\n    ...rest\n  } = props\n\n  const generatedId = useId()\n  const [count, setCount] = useState(getInitialCount(props))\n  const [valueInternal, setValueInternal] = useState(defaultValue || '')\n  const states = { ...inputStateMapping, ...stateMapping }\n\n  const id = idProp || generatedId\n\n  const styles = useStyleConfig('Input', props)\n\n  const context = useMemo(() => filterUndefined({ disabled, size, variant }), [disabled, size, variant])\n\n  function onChange(e: ChangeEvent) {\n    const inputValue = e.target.value\n\n    // Limit input length if maxLength is set\n    const value = maxLength ? inputValue.slice(0, maxLength) : inputValue\n\n    setValueInternal(value)\n    setCount(value?.length)\n    onChangeProp?.(e)\n  }\n\n  function onAutoCompleteSelect(value: string) {\n    const e = { target: { value }, type: 'autoCompleteSelect' }\n    onChange(e as unknown as ChangeEvent)\n  }\n\n  function onClear() {\n    const value = ''\n    const e = { target: { value }, type: 'onClear' }\n    setValueInternal(value)\n    setCount(0)\n    onChange(e as unknown as ChangeEvent)\n  }\n\n  const aliasedProps = filterUndefined({\n    'aria-disabled': disabled,\n    bg: readOnly ? 'sandstone.97' : undefined,\n    borderColor: readOnly ? 'sandstone.55' : undefined,\n    focusWithinBorderColor: !readOnly ? 'transparent' : undefined,\n    focusWithinRingColor: readOnly ? 'transparent' : undefined,\n  })\n\n  useEffect(() => {\n    if (value === undefined && defaultValue !== undefined) return\n    setValueInternal(value ?? '')\n    setCount(value?.toString()?.length ? `${value}`.length : 0)\n  }, [value])\n\n  const filterAutoCompleteOptions = (i: string) =>\n    valueInternal === i ? false : !valueInternal || i.toLowerCase().includes(`${valueInternal}`.toLowerCase())\n\n  return (\n    <InputProvider value={context}>\n      {displayValueOnly ? (\n        <T className={cs('vui-input-value', className)} size={displayValueOnlyTextSize[size]}>\n          {value || defaultValue}\n        </T>\n      ) : (\n        <AutoCompletePopover\n          autoCompleteMaxHeight={autoCompleteMaxHeight}\n          autoCompleteOptions={autoCompleteOptions}\n          filterAutoCompleteOptions={filterAutoCompleteOptions}\n          onAutoCompleteSelect={onAutoCompleteSelect}\n        >\n          <Box className=\"vui-inputContainer\" column ref={ref} {...rest}>\n            {isString(label) ? (\n              <Label\n                aria-disabled={disabled}\n                className=\"vui-inputLabel\"\n                htmlFor={id}\n                markAsOptional={labelMarkOptional}\n                mb={0.5}\n                text={label}\n                tooltipText={labelTooltipText}\n                {...styles.label}\n              />\n            ) : (\n              label\n            )}\n\n            <InputBase className={cs('vui-input', className)} {...styles.container} {...aliasedProps}>\n              {itemLeft}\n              {isString(iconLeft) ? <InputIcon ml={1} name={iconLeft} /> : iconLeft}\n              {children ?? input ?? (\n                <InputInput\n                  ref={inputRef}\n                  {...{\n                    autoFocus,\n                    ariaLabel,\n                    disabled,\n                    id,\n                    max,\n                    maxLength,\n                    min,\n                    minLength,\n                    name,\n                    onBlur,\n                    onChange,\n                    onFocus,\n                    pattern,\n                    placeholder,\n                    readOnly,\n                    required,\n                    step,\n                    type,\n                  }}\n                  autoComplete={autoCompleteOptions?.length ? 'off' : autoComplete}\n                  value={valueInternal}\n                  {...inputProps}\n                />\n              )}\n              {isString(iconRight) ? <InputIcon mr={1} name={iconRight} /> : iconRight}\n              {itemRight}\n              {state && <InputIcon mr={1} {...states[state]?.iconProps} />}\n              {allowClear && !!valueInternal && (\n                <IconButton icon=\"uiTimes\" mr={0.5} onClick={onClear} size={clearIconSize[size]} title=\"Clear\" />\n              )}\n              {showCount && (\n                <T\n                  className=\"vui-inputCount\"\n                  color={maxLength && count > maxLength ? inputColors.error : inputColors.helpText}\n                  position=\"absolute\"\n                  right={0}\n                  size=\"sm\"\n                  top=\"calc(100% + 1px)\"\n                >\n                  {count} {maxLength ? `/ ${maxLength}` : null}\n                </T>\n              )}\n            </InputBase>\n            {!!helpText && <HelpText size={helpTextSize[size]}>{helpText}</HelpText>}\n            {!!errorText && (\n              <HelpText isError mr={showCount ? helpTextMargin : undefined} size={helpTextSize[size]}>\n                {errorText}\n              </HelpText>\n            )}\n          </Box>\n        </AutoCompletePopover>\n      )}\n    </InputProvider>\n  )\n}) as VuiComponent<'div', InputProps> & {\n  Icon: typeof InputIcon\n  Input: typeof InputInput\n  HelpText: typeof HelpText\n}\n\nInput.Icon = InputIcon\nInput.Input = InputInput\nInput.HelpText = HelpText\nInput.displayName = 'Input'\n\nexport default Input\n"],"mappings":"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"}
+{"version":3,"file":"input.js","names":["AutoCompletePopover"],"sources":["../../src/input/input.tsx"],"sourcesContent":["import { useEffect, useId, useMemo, useState } from 'react'\n\nimport Box from '../box'\nimport { IconButton } from '../button'\nimport type { VuiComponent } from '../core'\nimport { styled, useStyleConfig, vui } from '../core'\nimport Label from '../label'\nimport { T } from '../t'\nimport type { ChangeEvent } from '../utils'\nimport { cs, filterUndefined, isString } from '../utils'\nimport AutoCompletePopover from './autoCompletePopover'\nimport {\n  clearIconSize,\n  displayValueOnlyTextSize,\n  helpTextMargin,\n  helpTextSize,\n  inputColors,\n  inputStateMapping,\n} from './consts'\nimport { InputProvider } from './context'\nimport { getInitialCount } from './helpers'\nimport HelpText from './helpText'\nimport type { InputProps } from './input.types'\nimport InputIcon from './inputIcon'\nimport InputInput from './inputInput'\n\nexport const InputBase = styled.divBox`\n  align-items: center;\n  color: sandstone.10;\n  background-color: white;\n  border-radius: none;\n  border-width: 1px;\n  display: flex;\n  flex-shrink: 0;\n  outline: none;\n  position: relative;\n  transition-duration: 0s;\n  transform: translate3d(0, 0, 0);\n  width: 100%;\n\n  &[aria-disabled='true'] {\n    opacity: 0.5;\n    cursor: not-allowed;\n    background-color: sandstone.79;\n    border-color: sandstone.79;\n    & > .vui-icon {\n      color: sandstone.50;\n    }\n    & > .vui-icon > path {\n      fill: sandstone.50;\n    }\n  }\n`\n\n/**\n * Displays an input element wrapped in a div to allow extra content, like counter, side icons or buttons.\n * Forwards many relevant props to the inner input. Handles different states, like loading or error.\n * Exposes some props to the children via context.\n */\nexport const Input = vui<'div', InputProps>((props, ref) => {\n  const {\n    allowClear,\n    ariaLabel,\n    autoComplete,\n    autoCompleteMaxHeight,\n    autoCompleteOptions,\n    autoFocus,\n    children,\n    className,\n    defaultValue,\n    disabled,\n    displayValueOnly,\n    errorText,\n    helpText,\n    iconLeft,\n    iconRight,\n    id: idProp,\n    input,\n    inputProps,\n    inputRef,\n    itemLeft,\n    itemRight,\n    label,\n    labelMarkOptional,\n    labelTooltipText,\n    max,\n    maxLength,\n    min,\n    minLength,\n    name,\n    onBlur,\n    onChange: onChangeProp,\n    onFocus,\n    pattern,\n    placeholder,\n    readOnly,\n    required,\n    showCount,\n    size = 'lg',\n    state = '',\n    stateMapping,\n    step,\n    type = 'text',\n    value,\n    variant,\n    ...rest\n  } = props\n\n  const generatedId = useId()\n  const [count, setCount] = useState(getInitialCount(props))\n  const [valueInternal, setValueInternal] = useState(defaultValue || '')\n  const states = { ...inputStateMapping, ...stateMapping }\n\n  const id = idProp || generatedId\n\n  const styles = useStyleConfig('Input', props)\n\n  const context = useMemo(() => filterUndefined({ disabled, size, variant }), [disabled, size, variant])\n\n  function onChange(e: ChangeEvent) {\n    const inputValue = e.target.value\n\n    // Limit input length if maxLength is set\n    const value = maxLength ? inputValue.slice(0, maxLength) : inputValue\n\n    setValueInternal(value)\n    setCount(value?.length)\n    onChangeProp?.(e)\n  }\n\n  function onAutoCompleteSelect(value: string) {\n    const e = { target: { value }, type: 'autoCompleteSelect' }\n    onChange(e as unknown as ChangeEvent)\n  }\n\n  function onClear() {\n    const value = ''\n    const e = { target: { value }, type: 'onClear' }\n    setValueInternal(value)\n    setCount(0)\n    onChange(e as unknown as ChangeEvent)\n  }\n\n  const aliasedProps = filterUndefined({\n    'aria-disabled': disabled,\n    bg: readOnly ? 'sandstone.97' : undefined,\n    borderColor: readOnly ? 'sandstone.55' : undefined,\n    focusWithinBorderColor: !readOnly ? 'transparent' : undefined,\n    focusWithinRingColor: readOnly ? 'transparent' : undefined,\n  })\n\n  useEffect(() => {\n    if (value === undefined && defaultValue !== undefined) return\n    setValueInternal(value ?? '')\n    setCount(value?.toString()?.length ? `${value}`.length : 0)\n  }, [value])\n\n  const filterAutoCompleteOptions = (i: string) =>\n    valueInternal === i ? false : !valueInternal || i.toLowerCase().includes(`${valueInternal}`.toLowerCase())\n\n  return (\n    <InputProvider value={context}>\n      {displayValueOnly ? (\n        <T className={cs('vui-input-value', className)} size={displayValueOnlyTextSize[size]}>\n          {value || defaultValue}\n        </T>\n      ) : (\n        <AutoCompletePopover\n          autoCompleteMaxHeight={autoCompleteMaxHeight}\n          autoCompleteOptions={autoCompleteOptions}\n          filterAutoCompleteOptions={filterAutoCompleteOptions}\n          onAutoCompleteSelect={onAutoCompleteSelect}\n        >\n          <Box className=\"vui-inputContainer\" column ref={ref} {...rest}>\n            {isString(label) ? (\n              <Label\n                aria-disabled={disabled}\n                className=\"vui-inputLabel\"\n                htmlFor={id}\n                markAsOptional={labelMarkOptional}\n                mb={0.5}\n                text={label}\n                tooltipText={labelTooltipText}\n                {...styles.label}\n              />\n            ) : (\n              label\n            )}\n\n            <InputBase className={cs('vui-input', className)} {...styles.container} {...aliasedProps}>\n              {itemLeft}\n              {isString(iconLeft) ? <InputIcon ml={1} name={iconLeft} /> : iconLeft}\n              {children ?? input ?? (\n                <InputInput\n                  ref={inputRef}\n                  {...{\n                    autoFocus,\n                    ariaLabel,\n                    disabled,\n                    id,\n                    max,\n                    maxLength,\n                    min,\n                    minLength,\n                    name,\n                    onBlur,\n                    onChange,\n                    onFocus,\n                    pattern,\n                    placeholder,\n                    readOnly,\n                    required,\n                    step,\n                    type,\n                  }}\n                  autoComplete={autoCompleteOptions?.length ? 'off' : autoComplete}\n                  value={valueInternal}\n                  {...inputProps}\n                />\n              )}\n              {isString(iconRight) ? <InputIcon mr={1} name={iconRight} /> : iconRight}\n              {itemRight}\n              {state && <InputIcon mr={1} {...states[state]?.iconProps} />}\n              {allowClear && !!valueInternal && (\n                <IconButton icon=\"uiTimes\" mr={0.5} onClick={onClear} size={clearIconSize[size]} title=\"Clear\" />\n              )}\n              {showCount && (\n                <T\n                  className=\"vui-inputCount\"\n                  color={maxLength && count > maxLength ? inputColors.error : inputColors.helpText}\n                  position=\"absolute\"\n                  right={0}\n                  size=\"sm\"\n                  top=\"calc(100% + 1px)\"\n                >\n                  {count} {maxLength ? `/ ${maxLength}` : null}\n                </T>\n              )}\n            </InputBase>\n            {!!helpText && <HelpText size={helpTextSize[size]}>{helpText}</HelpText>}\n            {!!errorText && (\n              <HelpText isError mr={showCount ? helpTextMargin : undefined} size={helpTextSize[size]}>\n                {errorText}\n              </HelpText>\n            )}\n          </Box>\n        </AutoCompletePopover>\n      )}\n    </InputProvider>\n  )\n}) as VuiComponent<'div', InputProps> & {\n  Icon: typeof InputIcon\n  Input: typeof InputInput\n  HelpText: typeof HelpText\n}\n\nInput.Icon = InputIcon\nInput.Input = InputInput\nInput.HelpText = HelpText\nInput.displayName = 'Input'\n\nexport default Input\n"],"mappings":"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"}

package/dist/input/input.types.d.ts

@@ -1,12 +1,8 @@
 import { ChangeEventHandler, FocusEventHandler, PropsOf } from "../utils/types.js";
-import "../utils/index.js";
 import { ThemingProps } from "../theme/types.js";
 import { SystemProps } from "../system/system.js";
-import "../system/index.js";
 import { IconProp, IconProps } from "../icon/icon.types.js";
-import "../icon/index.js";
 import { PProps } from "../p/p.types.js";
-import "../p/index.js";
 import { JSX, ReactNode } from "react";
 
 //#region src/input/input.types.d.ts

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

@@ -1 +1 @@
-{"version":3,"file":"input.types.d.ts","names":[],"sources":["../../src/input/input.types.ts"],"mappings":";;;;;;;;;;;;KAQY,eAAA,GAAkB,OAAA,UAAiB,WAAA;AAAA,KACnC,UAAA,GAAa,WAAA,GACvB,YAAA;uDAEE,UAAA;EAEA,YAAA,WANQ;EAQR,mBAAA;EAEA,qBAAA,WAVsD;EAYtD,SAAA,YAXkB;EAalB,SAAA,WAbqB;EAerB,WAAA,6BAMqB;EAJrB,YAAA,oBAQW;EANX,QAAA,YAQY;EANZ,SAAA,YAAqB,KAAA,CAAM,SAAA,EAQnB;EANR,QAAA,GAAW,KAAA,CAAM,SAAA,WAUiB;EARlC,QAAA,GAAW,QAAA,GAAW,GAAA,CAAI,OAAA,EAYf;EAVX,SAAA,GAAY,QAAA,GAAW,GAAA,CAAI,OAAA,EAcV;EAZjB,KAAA,GAAQ,KAAA,CAAM,SAAA,EA4BL;EA1BT,UAAA,GAAa,eAAA,EA8BH;EA5BV,QAAA,GAAW,KAAA,CAAM,gBAAA,CAAiB,gBAAA,iBA4CnB;EA1Cf,SAAA,YA8CgB;EA5ChB,QAAA,GAAW,KAAA,CAAM,SAAA,EArCI;EAuCrB,SAAA,GAAY,KAAA,CAAM,SAAA,EApClB;EAsCA,KAAA,YAAiB,KAAA,CAAM,SAAA,EAlCvB;EAoCA,iBAAA,YAhCA;EAkCA,gBAAA,GAAmB,SAAA,EA9BnB;EAgCA,GAAA,oBA5BA;EA8BA,SAAA,WA5BqB;EA8BrB,GAAA,oBA5BA;EA8BA,SAAA,WA9BiB;EAgCjB,IAAA,WA9BW;EAgCX,MAAA,GAAS,iBAAA,EAhCiB;EAkC1B,QAAA,GAAW,kBAAA,EAhCC;EAkCZ,OAAA,GAAU,iBAAA,EAlCiB;EAoC3B,OAAA,WAlCQ;EAoCR,WAAA,WAlCA;EAoCA,QAAA,YAlCA;EAoCA,QAAA,YApCiB;EAsCjB,SAAA,YApCA;EAsCA,gBAAA,YApCW;EAsCX,KAAA,GAAQ,UAAA,EApCR;EAsCA,YAAA,GAAe,iBAAA,EAtCG;EAwClB,IAAA,WAtCiB;EAwCjB,IAAA,GAAO,SAAA,EAtCP;EAwCA,KAAA;AAAA;AAAA,KAGQ,wBAAA;EArCR,oCAuCF,mBAAA,aAnCE;EAqCF,qBAAA,WAjCE;EAmCF,QAAA,EAAU,GAAA,CAAI,OAAA,EAjCZ;EAmCF,yBAAA,GAA4B,KAAA,UAAe,KAAA,UAAe,KAAA;EAC1D,oBAAA,GAAuB,KAAA;AAAA;AAAA,KAGb,aAAA,GAAgB,MAAA;EAC1B,OAAA;AAAA;AAAA,KAGU,UAAA;AAAA,KAEA,iBAAA,GAAoB,MAAA;EAG5B,OAAA,GAAU,UAAA;EACV,SAAA,EAAW,SAAA;AAAA;AAAA,KAIH,SAAA"}
+{"version":3,"file":"input.types.d.ts","names":[],"sources":["../../src/input/input.types.ts"],"mappings":";;;;;;;;KAQY,eAAA,GAAkB,OAAA,UAAiB,WAAA;AAAA,KACnC,UAAA,GAAa,WAAA,GACvB,YAAA;uDAEE,UAAA;EAEA,YAAA;EAEA,mBAAA,aARuB;EAUvB,qBAAA,WAV0B;EAY1B,SAAA,YAXQ;EAaR,SAAA;EAEA,WAAA,6BAdF;EAgBE,YAAA,oBAMW;EAJX,QAAA,YAMsB;EAJtB,SAAA,YAAqB,KAAA,CAAM,SAAA,EAMJ;EAJvB,QAAA,GAAW,KAAA,CAAM,SAAA,WAQJ;EANb,QAAA,GAAW,QAAA,GAAW,GAAA,CAAI,OAAA,EAQf;EANX,SAAA,GAAY,QAAA,GAAW,GAAA,CAAI,OAAA,EAYf;EAVZ,KAAA,GAAQ,KAAA,CAAM,SAAA,EAgBK;EAdnB,UAAA,GAAa,eAAA,EA4BF;EA1BX,QAAA,GAAW,KAAA,CAAM,gBAAA,CAAiB,gBAAA,iBA0C1B;EAxCR,SAAA,YA8CO;EA5CP,QAAA,GAAW,KAAA,CAAM,SAAA,EA4CD;EA1ChB,SAAA,GAAY,KAAA,CAAM,SAAA,EAtCpB;EAwCE,KAAA,YAAiB,KAAA,CAAM,SAAA,EApCvB;EAsCA,iBAAA,YAlCA;EAoCA,gBAAA,GAAmB,SAAA,EAhCnB;EAkCA,GAAA,oBA9BA;EAgCA,SAAA,WA5BA;EA8BA,GAAA,oBA9B2B;EAgC3B,SAAA,WA9BW;EAgCX,IAAA,WA9BA;EAgCA,MAAA,GAAS,iBAAA,EAhCa;EAkCtB,QAAA,GAAW,kBAAA,EAhCX;EAkCA,OAAA,GAAU,iBAAA,EAlCa;EAoCvB,OAAA,WAlCA;EAoCA,WAAA,WApCc;EAsCd,QAAA,YApCa;EAsCb,QAAA,YApCW;EAsCX,SAAA,YAtCkC;EAwClC,gBAAA,YApCA;EAsCA,KAAA,GAAQ,UAAA,EAtCS;EAwCjB,YAAA,GAAe,iBAAA,EAtCH;EAwCZ,IAAA,WAtCA;EAwCA,IAAA,GAAO,SAAA,EAxCgB;EA0CvB,KAAA;AAAA;AAAA,KAGQ,wBAAA;EAvCR,oCAyCF,mBAAA,aArCE;EAuCF,qBAAA,WAnCE;EAqCF,QAAA,EAAU,GAAA,CAAI,OAAA,EAnCH;EAqCX,yBAAA,GAA4B,KAAA,UAAe,KAAA,UAAe,KAAA;EAC1D,oBAAA,GAAuB,KAAA;AAAA;AAAA,KAGb,aAAA,GAAgB,MAAA;EAC1B,OAAA;AAAA;AAAA,KAGU,UAAA;AAAA,KAEA,iBAAA,GAAoB,MAAA;EAG5B,OAAA,GAAU,UAAA;EACV,SAAA,EAAW,SAAA;AAAA;AAAA,KAIH,SAAA"}

package/dist/input/inputIcon.d.ts

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

package/dist/input/inputIcon.d.ts.map

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

package/dist/input/inputIcon.js

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

package/dist/input/inputIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"inputIcon.js","names":[],"sources":["../../src/input/inputIcon.tsx"],"sourcesContent":["import { useStyleConfig, vui } from '../core'\nimport type { IconProps } from '../icon'\nimport Icon from '../icon'\nimport { cs } from '../utils'\nimport { useInputContext } from './context'\n\n/** Displays an icon within the Input. */\nexport const InputIcon = vui<'svg', IconProps>((props, ref) => {\n  const { className, ...rest } = props\n  const inputProps = useInputContext()\n  const mergedProps = { ...inputProps, ...props }\n  const styles = useStyleConfig('Input', mergedProps)\n\n  return <Icon className={cs('vui-inputIcon', className)} ref={ref} {...styles.icon} {...rest} />\n})\n\nInputIcon.displayName = 'InputIcon'\n\nexport default InputIcon\n"],"mappings":";;;;;;;;;AAOA,MAAa,YAAY,KAAuB,OAAO,QAAQ;CAC7D,MAAM,EAAE,WAAW,GAAG,SAAS;CAG/B,MAAM,SAAS,eAAe,SADV;EAAE,GADH,iBAAiB;EACC,GAAG;EAAO,CACI;AAEnD,QAAO,oBAAC;EAAK,WAAW,GAAG,iBAAiB,UAAU;EAAO;EAAK,GAAI,OAAO;EAAM,GAAI;GAAQ;EAC/F;AAEF,UAAU,cAAc"}
+{"version":3,"file":"inputIcon.js","names":[],"sources":["../../src/input/inputIcon.tsx"],"sourcesContent":["import { useStyleConfig, vui } from '../core'\nimport type { IconProps } from '../icon'\nimport Icon from '../icon'\nimport { cs } from '../utils'\nimport { useInputContext } from './context'\n\n/** Displays an icon within the Input. */\nexport const InputIcon = vui<'svg', IconProps>((props, ref) => {\n  const { className, ...rest } = props\n  const inputProps = useInputContext()\n  const mergedProps = { ...inputProps, ...props }\n  const styles = useStyleConfig('Input', mergedProps)\n\n  return <Icon className={cs('vui-inputIcon', className)} ref={ref} {...styles.icon} {...rest} />\n})\n\nInputIcon.displayName = 'InputIcon'\n\nexport default InputIcon\n"],"mappings":";;;;;;;;;AAOA,MAAa,YAAY,KAAuB,OAAO,QAAQ;CAC7D,MAAM,EAAE,WAAW,GAAG,SAAS;CAG/B,MAAM,SAAS,eAAe,SADV;EAAE,GADH,iBAAiB;EACC,GAAG;EAAO,CACI;AAEnD,QAAO,oBAAC,MAAD;EAAM,WAAW,GAAG,iBAAiB,UAAU;EAAO;EAAK,GAAI,OAAO;EAAM,GAAI;EAAQ;EAC/F;AAEF,UAAU,cAAc"}

package/dist/input/inputInput.d.ts

@@ -1,10 +1,11 @@
 import { VuiComponent } from "../core/vui.js";
 import { InputInputProps } from "./input.types.js";
-import "../index.js";
+import * as react from "react";
 import * as styled_components0 from "styled-components";
+import * as styled_components_dist_types0 from "styled-components/dist/types";
 
 //#region src/input/inputInput.d.ts
-declare const InputInputBase: styled_components0.StyledComponent<"input", any, {}, never>;
+declare const InputInputBase: styled_components_dist_types0.IStyledComponentBase<"web", styled_components0.FastOmit<react.DetailedHTMLProps<react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>> & string;
 /** Displays an input element within the Input component. */
 declare const InputInput: VuiComponent<"input", InputInputProps>;
 //#endregion

package/dist/input/inputInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"inputInput.d.ts","names":[],"sources":["../../src/input/inputInput.tsx"],"mappings":";;;;;;cAKa,cAAA,EAgBZ,kBAAA,CAhB0B,eAAA;;cAmBd,UAAA,EAAU,YAAA,UAAA,eAAA"}
+{"version":3,"file":"inputInput.d.ts","names":[],"sources":["../../src/input/inputInput.tsx"],"mappings":";;;;;;;cAKa,cAAA,EAAc,6BAAA,CAAA,oBAAA,QAAA,kBAAA,CAAA,QAAA,CAAA,KAAA,CAAA,iBAAA,CAAA,KAAA,CAAA,mBAAA,CAAA,gBAAA,GAAA,gBAAA;;cAmBd,UAAA,EAAU,YAAA,UAAA,eAAA"}

package/dist/input/inputInput.js

@@ -49,5 +49,5 @@ InputInput.displayName = "InputInput";
 
 //#endregion
 export { InputInputBase, InputInput as default };
-globalThis.__vuiVersion__ = "4.0.3"
+globalThis.__vuiVersion__ = "5.0.0-beta.1"
 //# sourceMappingURL=inputInput.js.map

package/dist/input/inputInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"inputInput.js","names":[],"sources":["../../src/input/inputInput.tsx"],"sourcesContent":["import { styled, useStyleConfig, vui } from '../core'\nimport { cs, filterUndefined } from '../utils'\nimport { useInputContext } from './context'\nimport type { InputInputProps } from './input.types'\n\nexport const InputInputBase = styled.input`\n  align-self: stretch;\n  color: sandstone.10;\n  background-color: transparent;\n  border: none;\n  border-radius: none;\n  flex: 1;\n  font-size: inherit;\n  min-width: 0;\n  outline: none;\n  padding: 0 1;\n\n  &[aria-disabled='true'],\n  &[aria-disabled='true']::placeholder {\n    cursor: not-allowed;\n  }\n`\n\n/** Displays an input element within the Input component. */\nexport const InputInput = vui<'input', InputInputProps>((props, ref) => {\n  const { className, autoComplete, ...rest } = props\n  const inputProps = useInputContext()\n  const mergedProps = { ...inputProps, ...props }\n  const styles = useStyleConfig('Input', mergedProps)\n  const aliasedProps = filterUndefined({\n    'aria-disabled': mergedProps.disabled,\n    'aria-label': mergedProps.ariaLabel,\n  })\n\n  return (\n    <InputInputBase\n      autoComplete={autoComplete}\n      className={cs('vui-inputInput', className)}\n      ref={ref}\n      {...styles.input}\n      {...aliasedProps}\n      {...rest}\n    />\n  )\n})\n\nInputInput.displayName = 'InputInput'\n\nexport default InputInput\n"],"mappings":";;;;;;;;;AAKA,MAAa,iBAAiB,OAAO,KAAK;;;;;;;;;;;;;;;;;;AAmB1C,MAAa,aAAa,KAA+B,OAAO,QAAQ;CACtE,MAAM,EAAE,WAAW,cAAc,GAAG,SAAS;CAE7C,MAAM,cAAc;EAAE,GADH,iBAAiB;EACC,GAAG;EAAO;CAC/C,MAAM,SAAS,eAAe,SAAS,YAAY;CACnD,MAAM,eAAe,gBAAgB;EACnC,iBAAiB,YAAY;EAC7B,cAAc,YAAY;EAC3B,CAAC;AAEF,QACE,oBAAC;EACe;EACd,WAAW,GAAG,kBAAkB,UAAU;EACrC;EACL,GAAI,OAAO;EACX,GAAI;EACJ,GAAI;GACJ;EAEJ;AAEF,WAAW,cAAc"}
+{"version":3,"file":"inputInput.js","names":[],"sources":["../../src/input/inputInput.tsx"],"sourcesContent":["import { styled, useStyleConfig, vui } from '../core'\nimport { cs, filterUndefined } from '../utils'\nimport { useInputContext } from './context'\nimport type { InputInputProps } from './input.types'\n\nexport const InputInputBase = styled.input`\n  align-self: stretch;\n  color: sandstone.10;\n  background-color: transparent;\n  border: none;\n  border-radius: none;\n  flex: 1;\n  font-size: inherit;\n  min-width: 0;\n  outline: none;\n  padding: 0 1;\n\n  &[aria-disabled='true'],\n  &[aria-disabled='true']::placeholder {\n    cursor: not-allowed;\n  }\n`\n\n/** Displays an input element within the Input component. */\nexport const InputInput = vui<'input', InputInputProps>((props, ref) => {\n  const { className, autoComplete, ...rest } = props\n  const inputProps = useInputContext()\n  const mergedProps = { ...inputProps, ...props }\n  const styles = useStyleConfig('Input', mergedProps)\n  const aliasedProps = filterUndefined({\n    'aria-disabled': mergedProps.disabled,\n    'aria-label': mergedProps.ariaLabel,\n  })\n\n  return (\n    <InputInputBase\n      autoComplete={autoComplete}\n      className={cs('vui-inputInput', className)}\n      ref={ref}\n      {...styles.input}\n      {...aliasedProps}\n      {...rest}\n    />\n  )\n})\n\nInputInput.displayName = 'InputInput'\n\nexport default InputInput\n"],"mappings":";;;;;;;;;AAKA,MAAa,iBAAiB,OAAO,KAAK;;;;;;;;;;;;;;;;;;AAmB1C,MAAa,aAAa,KAA+B,OAAO,QAAQ;CACtE,MAAM,EAAE,WAAW,cAAc,GAAG,SAAS;CAE7C,MAAM,cAAc;EAAE,GADH,iBAAiB;EACC,GAAG;EAAO;CAC/C,MAAM,SAAS,eAAe,SAAS,YAAY;CACnD,MAAM,eAAe,gBAAgB;EACnC,iBAAiB,YAAY;EAC7B,cAAc,YAAY;EAC3B,CAAC;AAEF,QACE,oBAAC,gBAAD;EACgB;EACd,WAAW,GAAG,kBAAkB,UAAU;EACrC;EACL,GAAI,OAAO;EACX,GAAI;EACJ,GAAI;EACJ;EAEJ;AAEF,WAAW,cAAc"}

package/dist/input/theme.js

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

package/dist/label/label.d.ts

@@ -1,11 +1,10 @@
-import { SystemProps } from "../system/system.js";
 import { VuiComponent } from "../core/vui.js";
 import { LabelProps } from "./label.types.js";
-import "../index.js";
 import * as styled_components0 from "styled-components";
+import * as styled_components_dist_types0 from "styled-components/dist/types";
 
 //#region src/label/label.d.ts
-declare const LabelBase: styled_components0.StyledComponent<"label", styled_components0.DefaultTheme, SystemProps, never>;
+declare const LabelBase: styled_components_dist_types0.IStyledComponentBase<"web", styled_components0.FastOmit<any, never>> & string;
 /** Displays a paragraph of text. */
 declare const Label: VuiComponent<"label", LabelProps>;
 //#endregion

package/dist/label/label.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"label.d.ts","names":[],"sources":["../../src/label/label.tsx"],"mappings":";;;;;;;cAOa,SAAA,EAAS,kBAAA,CAAA,eAAA,UASrB,kBAAA,CATqB,YAAA,EAAA,WAAA;;cAYT,KAAA,EAAK,YAAA,UAAA,UAAA"}
+{"version":3,"file":"label.d.ts","names":[],"sources":["../../src/label/label.tsx"],"mappings":";;;;;;cAOa,SAAA,EAAS,6BAAA,CAAA,oBAAA,QASrB,kBAAA,CATqB,QAAA;;cAoCT,KAAA,EAAK,YAAA,UAAA,UAAA"}

package/dist/label/label.js

@@ -18,49 +18,61 @@ const LabelBase = styled.labelBox`
     cursor: not-allowed;
   }
 `;
+const LabelContent = ({ text, markAsOptional, tooltipText, fontSize, helperStyles }) => {
+	const textProps = {
+		variant: "label",
+		fontSize
+	};
+	const helperProps = {
+		...textProps,
+		...helperStyles
+	};
+	const isXs = fontSize === "xs";
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx(T, {
+			...textProps,
+			children: text
+		}),
+		markAsOptional && /* @__PURE__ */ jsx(T, {
+			...helperProps,
+			children: "(optional)"
+		}),
+		!!tooltipText && /* @__PURE__ */ jsx(T, {
+			...helperProps,
+			children: /* @__PURE__ */ jsx(Tooltip, {
+				text: tooltipText,
+				children: /* @__PURE__ */ jsx(Icon, {
+					mb: isXs ? "-6px" : "-5px",
+					name: "uiInfoCircle",
+					role: "button",
+					size: isXs ? "xs" : "sm"
+				})
+			})
+		})
+	] });
+};
 /** Displays a paragraph of text. */
 const Label = vui((props, ref) => {
 	const { children, className, markAsOptional, tooltipText, text, fontSize, ...rest } = omitThemingProps(props);
 	const styles = useStyleConfig("Label", props);
-	const isOnlyText = text && !markAsOptional && !tooltipText && !children;
 	return /* @__PURE__ */ jsx(T, {
 		as: LabelBase,
 		className: cs("vui-label", className),
 		fontSize,
 		ref,
 		...rest,
-		children: children ?? (isOnlyText ? text : /* @__PURE__ */ jsxs(Fragment, { children: [
-			/* @__PURE__ */ jsx(T, {
-				variant: "label",
-				fontSize,
-				children: text
-			}),
-			!!markAsOptional && /* @__PURE__ */ jsx(T, {
-				variant: "label",
-				fontSize,
-				...styles.helper,
-				children: "(optional)"
-			}),
-			!!tooltipText && /* @__PURE__ */ jsx(T, {
-				variant: "label",
-				fontSize,
-				...styles.helper,
-				children: /* @__PURE__ */ jsx(Tooltip, {
-					text: tooltipText,
-					children: /* @__PURE__ */ jsx(Icon, {
-						mb: fontSize === "xs" ? "-6px" : "-5px",
-						name: "uiInfoCircle",
-						role: "button",
-						size: fontSize === "xs" ? "xs" : "sm"
-					})
-				})
-			})
-		] }))
+		children: children ?? /* @__PURE__ */ jsx(LabelContent, {
+			fontSize,
+			helperStyles: styles.helper,
+			markAsOptional,
+			text,
+			tooltipText
+		})
 	});
 });
 Label.displayName = "Label";
 
 //#endregion
 export { LabelBase, Label as default };
-globalThis.__vuiVersion__ = "4.0.3"
+globalThis.__vuiVersion__ = "5.0.0-beta.1"
 //# sourceMappingURL=label.js.map

package/dist/label/label.js.map

@@ -1 +1 @@
-{"version":3,"file":"label.js","names":[],"sources":["../../src/label/label.tsx"],"sourcesContent":["import { omitThemingProps, styled, useStyleConfig, vui } from '../core'\nimport Icon from '../icon'\nimport T from '../t'\nimport Tooltip from '../tooltip'\nimport { cs } from '../utils'\nimport type { LabelProps } from './label.types'\n\nexport const LabelBase = styled.labelBox`\n  display: block;\n  color: darkBlue.main;\n  width: 100%;\n\n  &[aria-disabled='true'] {\n    color: sandstone.75;\n    cursor: not-allowed;\n  }\n`\n\n/** Displays a paragraph of text. */\nexport const Label = vui<'label', LabelProps>((props, ref) => {\n  const { children, className, markAsOptional, tooltipText, text, fontSize, ...rest } = omitThemingProps(props)\n  const styles = useStyleConfig('Label', props)\n\n  const isOnlyText = text && !markAsOptional && !tooltipText && !children\n\n  return (\n    <T as={LabelBase} className={cs('vui-label', className)} fontSize={fontSize} ref={ref} {...rest}>\n      {children ??\n        (isOnlyText ? (\n          text\n        ) : (\n          <>\n            <T variant=\"label\" fontSize={fontSize}>\n              {text}\n            </T>\n            {!!markAsOptional && (\n              <T variant=\"label\" fontSize={fontSize} {...styles.helper}>\n                (optional)\n              </T>\n            )}\n            {!!tooltipText && (\n              <T variant=\"label\" fontSize={fontSize} {...styles.helper}>\n                <Tooltip text={tooltipText}>\n                  <Icon\n                    mb={fontSize === 'xs' ? '-6px' : '-5px'}\n                    name=\"uiInfoCircle\"\n                    role=\"button\"\n                    size={fontSize === 'xs' ? 'xs' : 'sm'}\n                  />\n                </Tooltip>\n              </T>\n            )}\n          </>\n        ))}\n    </T>\n  )\n})\n\nLabel.displayName = 'Label'\nexport default Label\n"],"mappings":";;;;;;;;;;AAOA,MAAa,YAAY,OAAO,QAAQ;;;;;;;;;;;AAYxC,MAAa,QAAQ,KAA0B,OAAO,QAAQ;CAC5D,MAAM,EAAE,UAAU,WAAW,gBAAgB,aAAa,MAAM,UAAU,GAAG,SAAS,iBAAiB,MAAM;CAC7G,MAAM,SAAS,eAAe,SAAS,MAAM;CAE7C,MAAM,aAAa,QAAQ,CAAC,kBAAkB,CAAC,eAAe,CAAC;AAE/D,QACE,oBAAC;EAAE,IAAI;EAAW,WAAW,GAAG,aAAa,UAAU;EAAY;EAAe;EAAK,GAAI;YACxF,aACE,aACC,OAEA;GACE,oBAAC;IAAE,SAAQ;IAAkB;cAC1B;KACC;GACH,CAAC,CAAC,kBACD,oBAAC;IAAE,SAAQ;IAAkB;IAAU,GAAI,OAAO;cAAQ;KAEtD;GAEL,CAAC,CAAC,eACD,oBAAC;IAAE,SAAQ;IAAkB;IAAU,GAAI,OAAO;cAChD,oBAAC;KAAQ,MAAM;eACb,oBAAC;MACC,IAAI,aAAa,OAAO,SAAS;MACjC,MAAK;MACL,MAAK;MACL,MAAM,aAAa,OAAO,OAAO;OACjC;MACM;KACR;MAEL;GAEL;EAEN;AAEF,MAAM,cAAc"}
+{"version":3,"file":"label.js","names":[],"sources":["../../src/label/label.tsx"],"sourcesContent":["import { omitThemingProps, styled, useStyleConfig, vui } from '../core'\nimport Icon from '../icon'\nimport T from '../t'\nimport Tooltip from '../tooltip'\nimport { cs } from '../utils'\nimport type { LabelProps } from './label.types'\n\nexport const LabelBase = styled.labelBox`\n  display: block;\n  color: darkBlue.main;\n  width: 100%;\n\n  &[aria-disabled='true'] {\n    color: sandstone.75;\n    cursor: not-allowed;\n  }\n`\n\ntype LabelContentProps = Pick<LabelProps, 'text' | 'markAsOptional' | 'tooltipText' | 'fontSize'> & {\n  helperStyles: Record<string, unknown>\n}\n\nconst LabelContent = ({ text, markAsOptional, tooltipText, fontSize, helperStyles }: LabelContentProps) => {\n  const textProps = { variant: 'label' as const, fontSize }\n  const helperProps = { ...textProps, ...helperStyles }\n  const isXs = fontSize === 'xs'\n\n  return (\n    <>\n      <T {...textProps}>{text}</T>\n      {markAsOptional && <T {...helperProps}>(optional)</T>}\n      {!!tooltipText && (\n        <T {...helperProps}>\n          <Tooltip text={tooltipText}>\n            <Icon mb={isXs ? '-6px' : '-5px'} name=\"uiInfoCircle\" role=\"button\" size={isXs ? 'xs' : 'sm'} />\n          </Tooltip>\n        </T>\n      )}\n    </>\n  )\n}\n\n/** Displays a paragraph of text. */\nexport const Label = vui<'label', LabelProps>((props, ref) => {\n  const { children, className, markAsOptional, tooltipText, text, fontSize, ...rest } = omitThemingProps(props)\n  const styles = useStyleConfig('Label', props)\n\n  return (\n    <T as={LabelBase} className={cs('vui-label', className)} fontSize={fontSize} ref={ref} {...rest}>\n      {children ?? (\n        <LabelContent\n          fontSize={fontSize}\n          helperStyles={styles.helper}\n          markAsOptional={markAsOptional}\n          text={text}\n          tooltipText={tooltipText}\n        />\n      )}\n    </T>\n  )\n})\n\nLabel.displayName = 'Label'\nexport default Label\n"],"mappings":";;;;;;;;;;AAOA,MAAa,YAAY,OAAO,QAAQ;;;;;;;;;;AAexC,MAAM,gBAAgB,EAAE,MAAM,gBAAgB,aAAa,UAAU,mBAAsC;CACzG,MAAM,YAAY;EAAE,SAAS;EAAkB;EAAU;CACzD,MAAM,cAAc;EAAE,GAAG;EAAW,GAAG;EAAc;CACrD,MAAM,OAAO,aAAa;AAE1B,QACE;EACE,oBAAC,GAAD;GAAG,GAAI;aAAY;GAAS;EAC3B,kBAAkB,oBAAC,GAAD;GAAG,GAAI;aAAa;GAAc;EACpD,CAAC,CAAC,eACD,oBAAC,GAAD;GAAG,GAAI;aACL,oBAAC,SAAD;IAAS,MAAM;cACb,oBAAC,MAAD;KAAM,IAAI,OAAO,SAAS;KAAQ,MAAK;KAAe,MAAK;KAAS,MAAM,OAAO,OAAO;KAAQ;IACxF;GACR;EAEL;;;AAKP,MAAa,QAAQ,KAA0B,OAAO,QAAQ;CAC5D,MAAM,EAAE,UAAU,WAAW,gBAAgB,aAAa,MAAM,UAAU,GAAG,SAAS,iBAAiB,MAAM;CAC7G,MAAM,SAAS,eAAe,SAAS,MAAM;AAE7C,QACE,oBAAC,GAAD;EAAG,IAAI;EAAW,WAAW,GAAG,aAAa,UAAU;EAAY;EAAe;EAAK,GAAI;YACxF,YACC,oBAAC,cAAD;GACY;GACV,cAAc,OAAO;GACL;GACV;GACO;GACb;EAEF;EAEN;AAEF,MAAM,cAAc"}

package/dist/label/label.types.d.ts

@@ -1,6 +1,5 @@
 import { ThemingProps } from "../theme/types.js";
 import { SystemProps } from "../system/system.js";
-import "../system/index.js";
 import { ReactNode } from "react";
 
 //#region src/label/label.types.d.ts

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

@@ -1 +1 @@
-{"version":3,"file":"label.types.d.ts","names":[],"sources":["../../src/label/label.types.ts"],"mappings":";;;;;;KAKY,UAAA,GAAa,WAAA,GACvB,YAAA;0DAEE,IAAA,WAHQ;EAKR,cAAA;EAEA,WAAA,GAAc,SAAA;AAAA"}
+{"version":3,"file":"label.types.d.ts","names":[],"sources":["../../src/label/label.types.ts"],"mappings":";;;;;KAKY,UAAA,GAAa,WAAA,GACvB,YAAA;0DAEE,IAAA;EAEA,cAAA,YALkB;EAOlB,WAAA,GAAc,SAAA;AAAA"}

package/dist/label/theme.js

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

package/dist/link/context.js

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

package/dist/link/link.d.ts

@@ -1,31 +1,13 @@
-import { AnimationProps } from "../system/animations.js";
-import { BackgroundColorProps } from "../system/backgrounds.js";
-import { BorderBottomColorProps, BorderBottomProps, BorderBottomWidthProps, BorderColorProps, BorderLeftColorProps, BorderLeftProps, BorderLeftWidthProps, BorderProps, BorderRadiusProps, BorderRightColorProps, BorderRightProps, BorderRightWidthProps, BorderStyleProps, BorderTopColorProps, BorderTopProps, BorderTopWidthProps, BorderWidthProps, DivideColorProps, DivideStyleProps, DivideXProps, DivideXReverseProps, DivideYProps, DivideYReverseProps, OutlineColorProps, OutlineProps, OutlineStyleProps, OutlineWidthProps, RingColorProps, RingProps } from "../system/borders.js";
-import { IsTruncatedProps, MaxLinesProps, WordBreakProps } from "../system/custom.js";
-import { BoxShadowProps, OpacityProps, TextShadowProps } from "../system/effects.js";
-import { BottomProps, BoxSizingProps, DisplayProps, FloatProps, LeftProps, ObjectFitProps, OverflowProps, OverflowXProps, OverflowYProps, OverscrollBehaviorProps, PositionProps, RightProps, TopProps, VisibilityProps, ZIndexProps } from "../system/layout.js";
-import { AlignContentProps, AlignItemsProps, AlignSelfProps, FlexBasisProps, FlexDirectionProps, FlexGrowProps, FlexProps, FlexShrinkProps, FlexWrapProps, JustifyContentProps, JustifyItemsProps, JustifySelfProps, OrderProps } from "../system/flexboxes.js";
-import { AppearanceProps, CursorProps, PointerEventsProps, ResizeProps, UserSelectProps } from "../system/interactivity.js";
-import { HeightProps, MaxHeightProps, MaxWidthProps, MinHeightProps, MinWidthProps, WidthProps } from "../system/sizing.js";
-import { MarginBottomProps, MarginLeftProps, MarginProps, MarginRightProps, MarginTopProps, MarginXProps, MarginYProps, PaddingBottomProps, PaddingLeftProps, PaddingProps, PaddingRightProps, PaddingTopProps, PaddingXProps, PaddingYProps, SpaceXProps, SpaceXReverseProps, SpaceYProps, SpaceYReverseProps } from "../system/space.js";
-import { ColProps, RowProps } from "../system/flexboxGrids.js";
-import { ColumnGapProps, GapProps, GridAreaProps, GridAutoColumnsProps, GridAutoFlowProps, GridAutoRowsProps, GridColumnProps, GridRowProps, GridTemplateAreasProps, GridTemplateColumnsProps, GridTemplateRowsProps, RowGapProps } from "../system/grids.js";
-import { BorderCollapseProps, TableLayoutProps } from "../system/tables.js";
-import { RotateProps, ScaleProps, ScaleXProps, ScaleYProps, SkewXProps, SkewYProps, TransformOriginProps, TransformProps, TranslateXProps, TranslateYProps } from "../system/transforms.js";
-import { TransitionDelayProps, TransitionDurationProps, TransitionPropertyProps, TransitionProps, TransitionTimingFunctionProps } from "../system/transitions.js";
-import { ColorProps, FontFamilyProps, FontSizeProps, FontStyleProps, FontWeightProps, LetterSpacingProps, LineHeightProps, ListStylePositionProps, ListStyleTypeProps, TextAlignProps, TextDecorationProps, TextOverflowProps, TextTransformProps, VerticalAlignProps, WhiteSpaceProps } from "../system/typography.js";
 import { VuiComponent } from "../core/vui.js";
-import "../core/index.js";
 import { LinkProps } from "./link.types.js";
 import { LinkIcon } from "./linkIcon.js";
 import { LinkText } from "./linkText.js";
-import "../index.js";
+import * as react from "react";
 import * as styled_components0 from "styled-components";
+import * as styled_components_dist_types0 from "styled-components/dist/types";
 
 //#region src/link/link.d.ts
-declare const LinkBase: styled_components0.StyledComponent<"a", styled_components0.DefaultTheme, AnimationProps & BackgroundColorProps & BorderProps & BorderTopProps & BorderRightProps & BorderBottomProps & BorderLeftProps & BorderColorProps & BorderTopColorProps & BorderRightColorProps & BorderBottomColorProps & BorderLeftColorProps & BorderWidthProps & BorderTopWidthProps & BorderRightWidthProps & BorderBottomWidthProps & BorderLeftWidthProps & BorderStyleProps & BorderRadiusProps & OutlineProps & OutlineColorProps & OutlineWidthProps & OutlineStyleProps & DivideXProps & DivideYProps & DivideXReverseProps & DivideYReverseProps & DivideColorProps & DivideStyleProps & RingProps & RingColorProps & OpacityProps & BoxShadowProps & TextShadowProps & DisplayProps & AlignItemsProps & AlignContentProps & JustifyContentProps & JustifyItemsProps & FlexWrapProps & FlexGrowProps & FlexShrinkProps & FlexBasisProps & FlexDirectionProps & FlexProps & JustifySelfProps & AlignSelfProps & OrderProps & RowProps & ColProps & GapProps & ColumnGapProps & RowGapProps & GridColumnProps & GridRowProps & GridAutoFlowProps & GridAutoColumnsProps & GridAutoRowsProps & GridTemplateColumnsProps & GridTemplateRowsProps & GridTemplateAreasProps & GridAreaProps & AppearanceProps & CursorProps & PointerEventsProps & ResizeProps & UserSelectProps & IsTruncatedProps & FloatProps & BoxSizingProps & OverflowProps & OverflowXProps & OverflowYProps & PositionProps & ZIndexProps & TopProps & RightProps & BottomProps & LeftProps & VisibilityProps & OverscrollBehaviorProps & ObjectFitProps & MaxLinesProps & WidthProps & HeightProps & MaxWidthProps & MaxHeightProps & MinWidthProps & MinHeightProps & MarginProps & MarginTopProps & MarginRightProps & MarginBottomProps & MarginLeftProps & MarginXProps & MarginYProps & PaddingProps & PaddingTopProps & PaddingRightProps & PaddingBottomProps & PaddingLeftProps & PaddingXProps & PaddingYProps & SpaceXProps & SpaceYProps & SpaceXReverseProps & SpaceYReverseProps & BorderCollapseProps & TableLayoutProps & TransformProps & TransformOriginProps & TranslateXProps & TranslateYProps & RotateProps & SkewXProps & SkewYProps & ScaleProps & ScaleXProps & ScaleYProps & TransitionProps & TransitionPropertyProps & TransitionDurationProps & TransitionTimingFunctionProps & TransitionDelayProps & FontFamilyProps & FontSizeProps & FontStyleProps & FontWeightProps & LineHeightProps & ColorProps & TextTransformProps & TextDecorationProps & TextAlignProps & VerticalAlignProps & LetterSpacingProps & WhiteSpaceProps & TextOverflowProps & ListStyleTypeProps & ListStylePositionProps & WordBreakProps & {
-  isUnderlined: boolean;
-}, "isUnderlined">;
+declare const LinkBase: styled_components_dist_types0.IStyledComponentBase<"web", styled_components0.FastOmit<styled_components0.FastOmit<styled_components_dist_types0.Substitute<any, react.DetailedHTMLProps<react.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>>, never>, never>> & string;
 declare const Link: VuiComponent<"a", LinkProps> & {
   Icon: typeof LinkIcon;
   Text: typeof LinkText;

package/dist/link/link.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"link.d.ts","names":[],"sources":["../../src/link/link.tsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;cAsBa,QAAA,EAAQ,kBAAA,CAAA,eAAA,MA4BpB,kBAAA,CA5BoB,YAAA,EAAA,cAAA,GAAA,oBAAA,GAAA,WAAA,GAAA,cAAA,GAAA,gBAAA,GAAA,iBAAA,GAAA,eAAA,GAAA,gBAAA,GAAA,mBAAA,GAAA,qBAAA,GAAA,sBAAA,GAAA,oBAAA,GAAA,gBAAA,GAAA,mBAAA,GAAA,qBAAA,GAAA,sBAAA,GAAA,oBAAA,GAAA,gBAAA,GAAA,iBAAA,GAAA,YAAA,GAAA,iBAAA,GAAA,iBAAA,GAAA,iBAAA,GAAA,YAAA,GAAA,YAAA,GAAA,mBAAA,GAAA,mBAAA,GAAA,gBAAA,GAAA,gBAAA,GAAA,SAAA,GAAA,cAAA,GAAA,YAAA,GAAA,cAAA,GAAA,eAAA,GAAA,YAAA,GAAA,eAAA,GAAA,iBAAA,GAAA,mBAAA,GAAA,iBAAA,GAAA,aAAA,GAAA,aAAA,GAAA,eAAA,GAAA,cAAA,GAAA,kBAAA,GAAA,SAAA,GAAA,gBAAA,GAAA,cAAA,GAAA,UAAA,GAAA,QAAA,GAAA,QAAA,GAAA,QAAA,GAAA,cAAA,GAAA,WAAA,GAAA,eAAA,GAAA,YAAA,GAAA,iBAAA,GAAA,oBAAA,GAAA,iBAAA,GAAA,wBAAA,GAAA,qBAAA,GAAA,sBAAA,GAAA,aAAA,GAAA,eAAA,GAAA,WAAA,GAAA,kBAAA,GAAA,WAAA,GAAA,eAAA,GAAA,gBAAA,GAAA,UAAA,GAAA,cAAA,GAAA,aAAA,GAAA,cAAA,GAAA,cAAA,GAAA,aAAA,GAAA,WAAA,GAAA,QAAA,GAAA,UAAA,GAAA,WAAA,GAAA,SAAA,GAAA,eAAA,GAAA,uBAAA,GAAA,cAAA,GAAA,aAAA,GAAA,UAAA,GAAA,WAAA,GAAA,aAAA,GAAA,cAAA,GAAA,aAAA,GAAA,cAAA,GAAA,WAAA,GAAA,cAAA,GAAA,gBAAA,GAAA,iBAAA,GAAA,eAAA,GAAA,YAAA,GAAA,YAAA,GAAA,YAAA,GAAA,eAAA,GAAA,iBAAA,GAAA,kBAAA,GAAA,gBAAA,GAAA,aAAA,GAAA,aAAA,GAAA,WAAA,GAAA,WAAA,GAAA,kBAAA,GAAA,kBAAA,GAAA,mBAAA,GAAA,gBAAA,GAAA,cAAA,GAAA,oBAAA,GAAA,eAAA,GAAA,eAAA,GAAA,WAAA,GAAA,UAAA,GAAA,UAAA,GAAA,UAAA,GAAA,WAAA,GAAA,WAAA,GAAA,eAAA,GAAA,uBAAA,GAAA,uBAAA,GAAA,6BAAA,GAAA,oBAAA,GAAA,eAAA,GAAA,aAAA,GAAA,cAAA,GAAA,eAAA,GAAA,eAAA,GAAA,UAAA,GAAA,kBAAA,GAAA,mBAAA,GAAA,cAAA,GAAA,kBAAA,GAAA,kBAAA,GAAA,eAAA,GAAA,iBAAA,GAAA,kBAAA,GAAA,sBAAA,GAAA,cAAA;;;cA8BR,IAAA,EA4CP,YAAA,MAAkB,SAAA;EACtB,IAAA,SAAa,QAAA;EACb,IAAA,SAAa,QAAA;AAAA"}
+{"version":3,"file":"link.d.ts","names":[],"sources":["../../src/link/link.tsx"],"mappings":";;;;;;;;;cAsBa,QAAA,EAAQ,6BAAA,CAAA,oBAAA,QAAA,kBAAA,CAAA,QAAA,CAAA,kBAAA,CAAA,QAAA,CAAA,6BAAA,CAAA,UAAA,MAAA,KAAA,CAAA,iBAAA,CAAA,KAAA,CAAA,oBAAA,CAAA,iBAAA,GAAA,iBAAA;AAAA,cA8BR,IAAA,EA6CP,YAAA,MAAkB,SAAA;EACtB,IAAA,SAAa,QAAA;EACb,IAAA,SAAa,QAAA;AAAA"}

package/dist/link/link.js

@@ -55,12 +55,13 @@ const Link = vui((props, ref) => {
 		size,
 		variant
 	}), [size, variant]);
+	const iconPadding = size === "xs" ? "1.2rem" : "1.5rem";
 	const aliasedProps = filterUndefined({
 		fontWeight: weight || fontWeight,
 		rel: isExternal ? "noopener" : void 0,
 		target: isExternal ? "_blank" : void 0,
-		pl: iconLeft ? "1.5rem" : void 0,
-		pr: iconRight ? "1.5rem" : void 0
+		pl: iconLeft ? iconPadding : void 0,
+		pr: iconRight ? iconPadding : void 0
 	});
 	return /* @__PURE__ */ jsx(LinkProvider, {
 		value: context,
@@ -99,5 +100,5 @@ Link.displayName = "Link";
 
 //#endregion
 export { LinkBase, Link as default };
-globalThis.__vuiVersion__ = "4.0.3"
+globalThis.__vuiVersion__ = "5.0.0-beta.1"
 //# sourceMappingURL=link.js.map

package/dist/link/link.js.map

@@ -1 +1 @@
-{"version":3,"file":"link.js","names":[],"sources":["../../src/link/link.tsx"],"sourcesContent":["import { useMemo } from 'react'\n\nimport type { VuiComponent } from '../core'\nimport { styled, useStyleConfig, vui } from '../core'\nimport T from '../t'\nimport { cs, filterUndefined, isReactText, isString } from '../utils'\nimport { LinkProvider } from './context'\nimport type { LinkProps } from './link.types'\nimport LinkIcon from './linkIcon'\nimport LinkText from './linkText'\n\nconst linkSwipeAnimation = `\n  @keyframes linkSwipe {\n    from {\n      background-size: 0 1px;\n    }\n    to {\n      background-size: 100% 1px;\n    }\n  }\n`\n\nexport const LinkBase = styled.aBox.attrs((props: LinkProps) => ({\n  isUnderlined: props.isUnderlined || false,\n}))`\n  ${linkSwipeAnimation}\n  display: inline;\n  cursor: pointer;\n  position: relative;\n  line-height: 1.5;\n  outline: none;\n  width: fit-content;\n  text-decoration: none;\n\n  &:not(.vui-linkNoUnderline) > .vui-t {\n    position: relative;\n    background: linear-gradient(to right, currentcolor, currentcolor);\n    background-size: ${({ isUnderlined }) => (isUnderlined ? '100% 1px' : '0 1px')};\n    background-position: 0 100%;\n    background-repeat: no-repeat;\n    text-decoration: none;\n    padding-bottom: 2px;\n    line-height: 1.2;\n  }\n\n  &:hover > .vui-t {\n    animation: ${({ isUnderlined }) =>\n      isUnderlined ? 'linkSwipe 0.5s ease forwards' : 'linkSwipe 0.3s ease forwards'};\n    background-size: 100% 1px;\n  }\n`\n\nexport const Link = vui<'a', LinkProps>((props, ref) => {\n  const {\n    children,\n    className,\n    fontWeight,\n    iconLeft,\n    iconRight,\n    isExternal,\n    isUnderlined,\n    size,\n    text,\n    variant,\n    weight,\n    ...rest\n  } = props\n\n  const styles = useStyleConfig('Link', props)\n  const context = useMemo(() => filterUndefined({ size, variant }), [size, variant])\n\n  const aliasedProps = filterUndefined({\n    fontWeight: weight || fontWeight,\n    rel: isExternal ? 'noopener' : undefined,\n    target: isExternal ? '_blank' : undefined,\n    pl: iconLeft ? '1.5rem' : undefined,\n    pr: iconRight ? '1.5rem' : undefined,\n  })\n\n  return (\n    <LinkProvider value={context} data-size={context.size} data-variant={context.variant}>\n      <LinkBase\n        className={cs('vui-link', className)}\n        focusRing={2}\n        isUnderlined={isUnderlined}\n        ref={ref}\n        {...styles.container}\n        {...aliasedProps}\n        {...rest}\n      >\n        {isString(iconLeft) ? <LinkIcon mr={1} left={0} name={iconLeft} /> : iconLeft}\n        {children ? <T fontSize={'inherit'}>{children}</T> : isReactText(text) && <LinkText text={text} />}\n        {isString(iconRight) ? <LinkIcon ml={1} right={0} name={iconRight} /> : iconRight}\n      </LinkBase>\n    </LinkProvider>\n  )\n}) as VuiComponent<'a', LinkProps> & {\n  Icon: typeof LinkIcon\n  Text: typeof LinkText\n}\n\nLink.Icon = LinkIcon\nLink.Text = LinkText\nLink.displayName = 'Link'\n\nexport default Link\n"],"mappings":";;;;;;;;;;;;;;AAWA,MAAM,qBAAqB;;;;;;;;;;AAW3B,MAAa,WAAW,OAAO,KAAK,OAAO,WAAsB,EAC/D,cAAc,MAAM,gBAAgB,OACrC,EAAE;IACC,mBAAmB;;;;;;;;;;;;wBAYC,EAAE,mBAAoB,eAAe,aAAa,QAAS;;;;;;;;;kBASjE,EAAE,mBACd,eAAe,iCAAiC,+BAA+B;;;;AAKrF,MAAa,OAAO,KAAqB,OAAO,QAAQ;CACtD,MAAM,EACJ,UACA,WACA,YACA,UACA,WACA,YACA,cACA,MACA,MACA,SACA,QACA,GAAG,SACD;CAEJ,MAAM,SAAS,eAAe,QAAQ,MAAM;CAC5C,MAAM,UAAU,cAAc,gBAAgB;EAAE;EAAM;EAAS,CAAC,EAAE,CAAC,MAAM,QAAQ,CAAC;CAElF,MAAM,eAAe,gBAAgB;EACnC,YAAY,UAAU;EACtB,KAAK,aAAa,aAAa;EAC/B,QAAQ,aAAa,WAAW;EAChC,IAAI,WAAW,WAAW;EAC1B,IAAI,YAAY,WAAW;EAC5B,CAAC;AAEF,QACE,oBAAC;EAAa,OAAO;EAAS,aAAW,QAAQ;EAAM,gBAAc,QAAQ;YAC3E,qBAAC;GACC,WAAW,GAAG,YAAY,UAAU;GACpC,WAAW;GACG;GACT;GACL,GAAI,OAAO;GACX,GAAI;GACJ,GAAI;;IAEH,SAAS,SAAS,GAAG,oBAAC;KAAS,IAAI;KAAG,MAAM;KAAG,MAAM;MAAY,GAAG;IACpE,WAAW,oBAAC;KAAE,UAAU;KAAY;MAAa,GAAG,YAAY,KAAK,IAAI,oBAAC,YAAe,OAAQ;IACjG,SAAS,UAAU,GAAG,oBAAC;KAAS,IAAI;KAAG,OAAO;KAAG,MAAM;MAAa,GAAG;;IAC/D;GACE;EAEjB;AAKF,KAAK,OAAO;AACZ,KAAK,OAAO;AACZ,KAAK,cAAc"}
+{"version":3,"file":"link.js","names":[],"sources":["../../src/link/link.tsx"],"sourcesContent":["import { useMemo } from 'react'\n\nimport type { VuiComponent } from '../core'\nimport { styled, useStyleConfig, vui } from '../core'\nimport T from '../t'\nimport { cs, filterUndefined, isReactText, isString } from '../utils'\nimport { LinkProvider } from './context'\nimport type { LinkProps } from './link.types'\nimport LinkIcon from './linkIcon'\nimport LinkText from './linkText'\n\nconst linkSwipeAnimation = `\n  @keyframes linkSwipe {\n    from {\n      background-size: 0 1px;\n    }\n    to {\n      background-size: 100% 1px;\n    }\n  }\n`\n\nexport const LinkBase = styled.aBox.attrs((props: LinkProps) => ({\n  isUnderlined: props.isUnderlined || false,\n}))`\n  ${linkSwipeAnimation}\n  display: inline;\n  cursor: pointer;\n  position: relative;\n  line-height: 1.5;\n  outline: none;\n  width: fit-content;\n  text-decoration: none;\n\n  &:not(.vui-linkNoUnderline) > .vui-t {\n    position: relative;\n    background: linear-gradient(to right, currentcolor, currentcolor);\n    background-size: ${({ isUnderlined }) => (isUnderlined ? '100% 1px' : '0 1px')};\n    background-position: 0 100%;\n    background-repeat: no-repeat;\n    text-decoration: none;\n    padding-bottom: 2px;\n    line-height: 1.2;\n  }\n\n  &:hover > .vui-t {\n    animation: ${({ isUnderlined }) =>\n      isUnderlined ? 'linkSwipe 0.5s ease forwards' : 'linkSwipe 0.3s ease forwards'};\n    background-size: 100% 1px;\n  }\n`\n\nexport const Link = vui<'a', LinkProps>((props, ref) => {\n  const {\n    children,\n    className,\n    fontWeight,\n    iconLeft,\n    iconRight,\n    isExternal,\n    isUnderlined,\n    size,\n    text,\n    variant,\n    weight,\n    ...rest\n  } = props\n\n  const styles = useStyleConfig('Link', props)\n  const context = useMemo(() => filterUndefined({ size, variant }), [size, variant])\n  const iconPadding = size === 'xs' ? '1.2rem' : '1.5rem'\n\n  const aliasedProps = filterUndefined({\n    fontWeight: weight || fontWeight,\n    rel: isExternal ? 'noopener' : undefined,\n    target: isExternal ? '_blank' : undefined,\n    pl: iconLeft ? iconPadding : undefined,\n    pr: iconRight ? iconPadding : undefined,\n  })\n\n  return (\n    <LinkProvider value={context} data-size={context.size} data-variant={context.variant}>\n      <LinkBase\n        className={cs('vui-link', className)}\n        focusRing={2}\n        isUnderlined={isUnderlined}\n        ref={ref}\n        {...styles.container}\n        {...aliasedProps}\n        {...rest}\n      >\n        {isString(iconLeft) ? <LinkIcon mr={1} left={0} name={iconLeft} /> : iconLeft}\n        {children ? <T fontSize={'inherit'}>{children}</T> : isReactText(text) && <LinkText text={text} />}\n        {isString(iconRight) ? <LinkIcon ml={1} right={0} name={iconRight} /> : iconRight}\n      </LinkBase>\n    </LinkProvider>\n  )\n}) as VuiComponent<'a', LinkProps> & {\n  Icon: typeof LinkIcon\n  Text: typeof LinkText\n}\n\nLink.Icon = LinkIcon\nLink.Text = LinkText\nLink.displayName = 'Link'\n\nexport default Link\n"],"mappings":";;;;;;;;;;;;;;AAWA,MAAM,qBAAqB;;;;;;;;;;AAW3B,MAAa,WAAW,OAAO,KAAK,OAAO,WAAsB,EAC/D,cAAc,MAAM,gBAAgB,OACrC,EAAE;IACC,mBAAmB;;;;;;;;;;;;wBAYC,EAAE,mBAAoB,eAAe,aAAa,QAAS;;;;;;;;;kBASjE,EAAE,mBACd,eAAe,iCAAiC,+BAA+B;;;;AAKrF,MAAa,OAAO,KAAqB,OAAO,QAAQ;CACtD,MAAM,EACJ,UACA,WACA,YACA,UACA,WACA,YACA,cACA,MACA,MACA,SACA,QACA,GAAG,SACD;CAEJ,MAAM,SAAS,eAAe,QAAQ,MAAM;CAC5C,MAAM,UAAU,cAAc,gBAAgB;EAAE;EAAM;EAAS,CAAC,EAAE,CAAC,MAAM,QAAQ,CAAC;CAClF,MAAM,cAAc,SAAS,OAAO,WAAW;CAE/C,MAAM,eAAe,gBAAgB;EACnC,YAAY,UAAU;EACtB,KAAK,aAAa,aAAa;EAC/B,QAAQ,aAAa,WAAW;EAChC,IAAI,WAAW,cAAc;EAC7B,IAAI,YAAY,cAAc;EAC/B,CAAC;AAEF,QACE,oBAAC,cAAD;EAAc,OAAO;EAAS,aAAW,QAAQ;EAAM,gBAAc,QAAQ;YAC3E,qBAAC,UAAD;GACE,WAAW,GAAG,YAAY,UAAU;GACpC,WAAW;GACG;GACT;GACL,GAAI,OAAO;GACX,GAAI;GACJ,GAAI;aAPN;IASG,SAAS,SAAS,GAAG,oBAAC,UAAD;KAAU,IAAI;KAAG,MAAM;KAAG,MAAM;KAAY,IAAG;IACpE,WAAW,oBAAC,GAAD;KAAG,UAAU;KAAY;KAAa,IAAG,YAAY,KAAK,IAAI,oBAAC,UAAD,EAAgB,MAAQ;IACjG,SAAS,UAAU,GAAG,oBAAC,UAAD;KAAU,IAAI;KAAG,OAAO;KAAG,MAAM;KAAa,IAAG;IAC/D;;EACE;EAEjB;AAKF,KAAK,OAAO;AACZ,KAAK,OAAO;AACZ,KAAK,cAAc"}

package/dist/link/link.types.d.ts

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

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

@@ -1 +1 @@
-{"version":3,"file":"link.types.d.ts","names":[],"sources":["../../src/link/link.types.ts"],"mappings":";;;;;;;;;KAMY,SAAA,GAAY,WAAA,GACtB,YAAA;6DAEE,WAAA;EAEA,UAAA,GAAa,eAAA,oBALL;EAOR,eAAA,GAAkB,eAAA;EAElB,IAAA,WARF;EAUE,QAAA,GAAW,QAAA,GAAW,GAAA,CAAI,OAAA,EAJR;EAMlB,SAAA,GAAY,QAAA,GAAW,GAAA,CAAI,OAAA,EAFL;EAItB,UAAA,YAFuB;EAIvB,YAAA,YAIS;EAFT,IAAA,qBAAyB,GAAA,CAAI,OAAA,EAEL;EAAxB,MAAA,GAAS,eAAA;AAAA"}
+{"version":3,"file":"link.types.d.ts","names":[],"sources":["../../src/link/link.types.ts"],"mappings":";;;;;;;KAMY,SAAA,GAAY,WAAA,GACtB,YAAA;6DAEE,WAAA;EAEA,UAAA,GAAa,eAAA;EAEb,eAAA,GAAkB,eAAA,oBAPD;EASjB,IAAA,WAToB;EAWpB,QAAA,GAAW,QAAA,GAAW,GAAA,CAAI,OAAA,EANb;EAQb,SAAA,GAAY,QAAA,GAAW,GAAA,CAAI,OAAA,EAFhB;EAIX,UAAA,YAFY;EAIZ,YAAA,YAEyB;EAAzB,IAAA,qBAAyB,GAAA,CAAI,OAAA,EAEL;EAAxB,MAAA,GAAS,eAAA;AAAA"}

package/dist/link/linkIcon.d.ts

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

package/dist/link/linkIcon.d.ts.map

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

package/dist/link/linkIcon.js

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

package/dist/link/linkIcon.js.map

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

package/dist/link/linkText.d.ts

@@ -1,8 +1,5 @@
 import { VuiComponent } from "../core/vui.js";
 import { TProps } from "../t/t.types.js";
-import "../t/index.js";
-import "../index.js";
-
 //#region src/link/linkText.d.ts
 /** Displays text of the Link. */
 declare const LinkText: VuiComponent<"span", TProps>;

package/dist/link/linkText.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"linkText.d.ts","names":[],"sources":["../../src/link/linkText.tsx"],"mappings":";;;;;;;cAOa,QAAA,EAAQ,YAAA,SAAA,MAAA"}
+{"version":3,"file":"linkText.d.ts","names":[],"sources":["../../src/link/linkText.tsx"],"mappings":";;;;cAOa,QAAA,EAAQ,YAAA,SAAA,MAAA"}

package/dist/link/linkText.js

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

package/dist/link/linkText.js.map

@@ -1 +1 @@
-{"version":3,"file":"linkText.js","names":[],"sources":["../../src/link/linkText.tsx"],"sourcesContent":["import { useStyleConfig, vui } from '../core'\nimport type { TProps } from '../t'\nimport T from '../t'\nimport { cs } from '../utils'\nimport { useLinkContext } from './context'\n\n/** Displays text of the Link. */\nexport const LinkText = vui<'span', TProps>((props, ref) => {\n  const { className, ...rest } = props\n  const styles = useStyleConfig('Link', useLinkContext())\n\n  return (\n    <T\n      className={cs('vui-linkText', className)}\n      fontSize=\"inherit\"\n      ref={ref}\n      transitionDuration=\"unset\"\n      {...styles.text}\n      {...rest}\n    />\n  )\n})\n\nLinkText.displayName = 'LinkText'\nexport default LinkText\n"],"mappings":";;;;;;;;;AAOA,MAAa,WAAW,KAAqB,OAAO,QAAQ;CAC1D,MAAM,EAAE,WAAW,GAAG,SAAS;CAC/B,MAAM,SAAS,eAAe,QAAQ,gBAAgB,CAAC;AAEvD,QACE,oBAAC;EACC,WAAW,GAAG,gBAAgB,UAAU;EACxC,UAAS;EACJ;EACL,oBAAmB;EACnB,GAAI,OAAO;EACX,GAAI;GACJ;EAEJ;AAEF,SAAS,cAAc"}
+{"version":3,"file":"linkText.js","names":[],"sources":["../../src/link/linkText.tsx"],"sourcesContent":["import { useStyleConfig, vui } from '../core'\nimport type { TProps } from '../t'\nimport T from '../t'\nimport { cs } from '../utils'\nimport { useLinkContext } from './context'\n\n/** Displays text of the Link. */\nexport const LinkText = vui<'span', TProps>((props, ref) => {\n  const { className, ...rest } = props\n  const styles = useStyleConfig('Link', useLinkContext())\n\n  return (\n    <T\n      className={cs('vui-linkText', className)}\n      fontSize=\"inherit\"\n      ref={ref}\n      transitionDuration=\"unset\"\n      {...styles.text}\n      {...rest}\n    />\n  )\n})\n\nLinkText.displayName = 'LinkText'\nexport default LinkText\n"],"mappings":";;;;;;;;;AAOA,MAAa,WAAW,KAAqB,OAAO,QAAQ;CAC1D,MAAM,EAAE,WAAW,GAAG,SAAS;CAC/B,MAAM,SAAS,eAAe,QAAQ,gBAAgB,CAAC;AAEvD,QACE,oBAAC,GAAD;EACE,WAAW,GAAG,gBAAgB,UAAU;EACxC,UAAS;EACJ;EACL,oBAAmB;EACnB,GAAI,OAAO;EACX,GAAI;EACJ;EAEJ;AAEF,SAAS,cAAc"}

package/dist/link/theme.js

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

package/dist/list/context.d.ts

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

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

@@ -1 +1 @@
-{"version":3,"file":"context.d.ts","names":[],"sources":["../../src/list/context.ts"],"mappings":";;;;;cAGO,YAAA,EAAY,KAAA,CAAA,QAAA,CAAA,IAAA,GAAE,cAAA,QAAc,IAAA"}
+{"version":3,"file":"context.d.ts","names":[],"sources":["../../src/list/context.ts"],"mappings":";;;;cAGO,YAAA,EAAY,KAAA,CAAA,QAAA,CAAA,IAAA,GAAE,cAAA,QAAc,IAAA"}

package/dist/list/context.js

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

package/dist/list/list.d.ts

@@ -1,17 +1,15 @@
-import { SystemProps } from "../system/system.js";
 import { VuiComponent } from "../core/vui.js";
-import "../core/index.js";
 import { ListProps } from "./list.types.js";
 import { ListDivider } from "./listDivider.js";
 import { ListHeading } from "./listHeading.js";
 import { ListIcon } from "./listIcon.js";
 import { ListItem } from "./listItem.js";
 import { ListText } from "./listText.js";
-import "../index.js";
 import * as styled_components0 from "styled-components";
+import * as styled_components_dist_types0 from "styled-components/dist/types";
 
 //#region src/list/list.d.ts
-declare const ListBase: styled_components0.StyledComponent<"ul", styled_components0.DefaultTheme, SystemProps, never>;
+declare const ListBase: styled_components_dist_types0.IStyledComponentBase<"web", styled_components0.FastOmit<any, never>> & string;
 /** Displays a list of list link items and optional heading. Exposes some props to the children via context. */
 declare const List: VuiComponent<"ul", ListProps> & {
   Divider: typeof ListDivider;

package/dist/list/list.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"list.d.ts","names":[],"sources":["../../src/list/list.tsx"],"mappings":";;;;;;;;;;;;;cAiBa,QAAA,EAAQ,kBAAA,CAAA,eAAA,OAAiB,kBAAA,CAAjB,YAAA,EAAA,WAAA;;cAGR,IAAA,EAsDP,YAAA,OAAmB,SAAA;EACvB,OAAA,SAAgB,WAAA;EAChB,OAAA,SAAgB,WAAA;EAChB,IAAA,SAAa,QAAA;EACb,IAAA,SAAa,QAAA;EACb,IAAA,SAAa,QAAA;AAAA"}
+{"version":3,"file":"list.d.ts","names":[],"sources":["../../src/list/list.tsx"],"mappings":";;;;;;;;;;;cAiBa,QAAA,EAAQ,6BAAA,CAAA,oBAAA,QAAiB,kBAAA,CAAjB,QAAA;;cAGR,IAAA,EAsDP,YAAA,OAAmB,SAAA;EACvB,OAAA,SAAgB,WAAA;EAChB,OAAA,SAAgB,WAAA;EAChB,IAAA,SAAa,QAAA;EACb,IAAA,SAAa,QAAA;EACb,IAAA,SAAa,QAAA;AAAA"}

package/dist/list/list.js

@@ -83,5 +83,5 @@ List.displayName = "List";
 
 //#endregion
 export { ListBase, List as default };
-globalThis.__vuiVersion__ = "4.0.3"
+globalThis.__vuiVersion__ = "5.0.0-beta.1"
 //# sourceMappingURL=list.js.map