@veracity/vui 3.1.2 → 4.0.0-floatinguitake3.2154362

package/dist/input/input.d.ts

@@ -6,10 +6,10 @@ import { HelpText } from "./helpText.js";
 import { InputIcon } from "./inputIcon.js";
 import { InputInput } from "./inputInput.js";
 import "../index.js";
-import * as styled_components384 from "styled-components";
+import * as styled_components422 from "styled-components";
 
 //#region src/input/input.d.ts
-declare const InputBase: styled_components384.StyledComponent<"div", styled_components384.DefaultTheme, SystemProps, never>;
+declare const InputBase: styled_components422.StyledComponent<"div", styled_components422.DefaultTheme, SystemProps, never>;
 /**
  * Displays an input element wrapped in a div to allow extra content, like counter, side icons or buttons.
  * Forwards many relevant props to the inner input. Handles different states, like loading or error.
@@ -22,4 +22,5 @@ declare const Input: VuiComponent<"div", InputProps> & {
 };
 //#endregion
 export { Input, InputBase };
+
 //# sourceMappingURL=input.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"input.d.ts","names":[],"sources":["../../src/input/input.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;;;cA0Ba,WAAS,oBAAA,CAAA,uBA0BrB,oBAAA,CA1BqB,YAAA,CAAA,CAAA,WAAA,CAAA;;;;;;AAAT,OAAA,CAAA,KAAA,CAiCA,KAPZ,CAAA,CA4MK,YA5ML,CAAA,CAAA,GAAA,CAAA,CAAA,CA4MyB,UA5MzB,CAAA,CAAA,CAAA,CAAA;EAAA,IAAA,CAAA,CAAA,MAAA,CA6Mc,SAvOO;EAAA,KAAA,CAAA,CAAA,MAAA,CAwON,UAxOM;EAAA,QAAA,CAAA,CAAA,MAAA,CAyOH,QAzOG;CAAA"}
+{"version":3,"file":"input.d.ts","names":[],"sources":["../../src/input/input.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;;;cA0Ba,WAAS,oBAAA,CAAA,uBA0BrB,oBAAA,CA1BqB,YAAA,EAAA,WAAA;;;;;;AAAT,cAiCA,KAPZ,EA6MK,YA7ML,CAAA,KAAA,EA6MyB,UA7MzB,CAAA,GAAA;EAAA,IAAA,EAAA,OA8Mc,SAxOO;EAAA,KAAA,EAAA,OAyON,UAzOM;EAAA,QAAA,EAAA,OA0OH,QA1OG;CAAA"}

package/dist/input/input.js

@@ -52,7 +52,7 @@ const InputBase = styled.divBox`
 * Exposes some props to the children via context.
 */
 const Input = vui((props, ref) => {
-	const { allowClear, ariaLabel, autoComplete, autoCompleteMaxHeight, autoCompleteOptions, autoFocus, children, className, defaultValue, disabled, displayValueOnly, errorText, helpText, iconLeft, iconRight, id: idProp, input, inputProps, inputRef, itemLeft, itemRight, label, labelMarkOptional, labelTooltipText, max, maxLength, min, minLength, name, onBlur, onChange: onChangeProp, onFocus, pattern, placeholder, readOnly, required, showCount, size = "lg", state = "", stateMapping, step, type = "text", value, variant,...rest } = props;
+	const { allowClear, ariaLabel, autoComplete, autoCompleteMaxHeight, autoCompleteOptions, autoFocus, children, className, defaultValue, disabled, displayValueOnly, errorText, helpText, iconLeft, iconRight, id: idProp, input, inputProps, inputRef, itemLeft, itemRight, label, labelMarkOptional, labelTooltipText, max, maxLength, min, minLength, name, onBlur, onChange: onChangeProp, onFocus, pattern, placeholder, readOnly, required, showCount, size = "lg", state = "", stateMapping, step, type = "text", value, variant, ...rest } = props;
 	const generatedId = useId();
 	const [count, setCount] = useState(getInitialCount(props));
 	const [valueInternal, setValueInternal] = useState(defaultValue || "");
@@ -223,5 +223,5 @@ var input_default = Input;
 
 //#endregion
 export { Input, InputBase, input_default as default };
-globalThis.__vuiVersion__ = "3.1.2"
+globalThis.__vuiVersion__ = "4.0.0-beta.1"
 //# sourceMappingURL=input.js.map

package/dist/input/input.js.map

@@ -1 +1 @@
-{"version":3,"file":"input.js","names":["value","AutoCompletePopover","Box","Label","InputIcon","InputInput","HelpText"],"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            <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 && (\n                <IconButton\n                  disabled={!valueInternal}\n                  icon=\"uiTimes\"\n                  mr={0.5}\n                  onClick={onClear}\n                  size={clearIconSize[size]}\n                  title=\"Clear\"\n                />\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":["value","AutoCompletePopover","Box","Label","InputIcon","InputInput","HelpText"],"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 && (\n                <IconButton\n                  disabled={!valueInternal}\n                  icon=\"uiTimes\"\n                  mr={0.5}\n                  onClick={onClear}\n                  size={clearIconSize[size]}\n                  title=\"Clear\"\n                />\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

@@ -117,4 +117,5 @@ type InputStateMapping = Record<string, {
 type InputType = 'date' | 'datetime-local' | 'email' | 'hidden' | 'month' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'time' | 'url' | 'week';
 //#endregion
 export { AutoCompletePopoverProps, HelpTextProps, InputInputProps, InputProps, InputState, InputStateMapping, InputType };
+
 //# sourceMappingURL=input.types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"input.types.d.ts","names":[],"sources":["../../src/input/input.types.ts"],"sourcesContent":[],"mappings":"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"}
+{"version":3,"file":"input.types.d.ts","names":[],"sources":["../../src/input/input.types.ts"],"sourcesContent":[],"mappings":";;;;;;;;;;;;KAQY,eAAA,GAAkB,iBAAiB;KACnC,UAAA,GAAa,cACvB;;;;;EAFU;EACA,mBAAU,CAAA,EAAA,MAAA,EAAA;EAAG;EACvB,qBAAA,CAAA,EAAA,MAAA;EAoBuB;EAEV,SAAM,CAAA,EAAA,OAAA;EAEN;EAAW,SAAI,CAAA,EAAA,MAAA;EAEd;EAAW,WAAI,CAAA,EAAA,OAAA,GAAA,MAAA,GAAA,KAAA;EAEnB;EAEK,YAAA,CAAA,EAAA,MAAA,GAAA,MAAA;EAEqB;EAAvB,QAAM,CAAA,EAAA,OAAA;EAIN;EAEC,SAAM,CAAA,EAAA,MAAA,GAlBG,KAAA,CAAM,SAkBT;EAED;EAIE,QAAA,CAAA,EAtBR,KAAA,CAAM,SAsBE,GAAA,MAAA;EAYV;EAEE,QAAA,CAAA,EAlCA,QAkCA,GAlCW,GAAA,CAAI,OAkCf;EAED;EAcF,SAAA,CAAA,EAhDI,QAgDJ,GAhDe,GAAA,CAAI,OAgDnB;EAEO;EAIR,KAAA,CAAA,EApDC,KAAA,CAAM,SAoDP;EAAS;EAKR,UAAA,CAAA,EAvDK,eAuDmB;EAYxB;EAIA,QAAA,CAAA,EArEG,KAAA,CAAM,gBAqEC,CArEgB,gBAqEhB,GAAA,IAAA,CAAA,GAAA,IAAA;EAEV;EAGE,SAAA,CAAA,EAAA,OAAA;EACC;EAJiB,QAAA,CAAA,EAnEjB,KAAA,CAAM,SAmEW;EAAM;EAQ1B,SAAA,CAAA,EAzEI,KAAA,CAAM,SAyED;;mBAvEA,KAAA,CAAM;;;;qBAIJ;;;;;;;;;;;;WAYV;;aAEE;;YAED;;;;;;;;;;;;;;UAcF;;iBAEO;;;;SAIR;;;;KAKC,wBAAA;;;;;;YAMA,GAAA,CAAI;;;;;KAMJ,aAAA,GAAgB;;;KAIhB,UAAA;KAEA,iBAAA,GAAoB;YAGlB;aACC;;KAIH,SAAA"}

package/dist/input/inputIcon.d.ts

@@ -8,4 +8,5 @@ import "../index.js";
 declare const InputIcon: VuiComponent<"svg", IconProps>;
 //#endregion
 export { InputIcon };
+
 //# sourceMappingURL=inputIcon.d.ts.map

package/dist/input/inputIcon.js

@@ -8,7 +8,7 @@ import { jsx } from "react/jsx-runtime";
 //#region src/input/inputIcon.tsx
 /** Displays an icon within the Input. */
 const InputIcon = vui((props, ref) => {
-	const { className,...rest } = props;
+	const { className, ...rest } = props;
 	const styles = useStyleConfig("Input", {
 		...useInputContext(),
 		...props
@@ -25,5 +25,5 @@ var inputIcon_default = InputIcon;
 
 //#endregion
 export { InputIcon, inputIcon_default as default };
-globalThis.__vuiVersion__ = "3.1.2"
+globalThis.__vuiVersion__ = "4.0.0-beta.1"
 //# sourceMappingURL=inputIcon.js.map

package/dist/input/inputIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"inputIcon.js","names":["Icon"],"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,UAAW,GAAG,SAAS;CAG/B,MAAM,SAAS,eAAe,SADV;EAAE,GADH,iBAAiB;EACC,GAAG;EAAO,CACI;AAEnD,QAAO,oBAACA;EAAK,WAAW,GAAG,iBAAiB,UAAU;EAAO;EAAK,GAAI,OAAO;EAAM,GAAI;GAAQ;EAC/F;AAEF,UAAU,cAAc;AAExB,wBAAe"}
+{"version":3,"file":"inputIcon.js","names":["Icon"],"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,oBAACA;EAAK,WAAW,GAAG,iBAAiB,UAAU;EAAO;EAAK,GAAI,OAAO;EAAM,GAAI;GAAQ;EAC/F;AAEF,UAAU,cAAc;AAExB,wBAAe"}

package/dist/input/inputInput.d.ts

@@ -1,12 +1,13 @@
 import { VuiComponent } from "../core/vui.js";
 import { InputInputProps } from "./input.types.js";
 import "../index.js";
-import * as styled_components383 from "styled-components";
+import * as styled_components426 from "styled-components";
 
 //#region src/input/inputInput.d.ts
-declare const InputInputBase: styled_components383.StyledComponent<"input", any, {}, never>;
+declare const InputInputBase: styled_components426.StyledComponent<"input", any, {}, never>;
 /** Displays an input element within the Input component. */
 declare const InputInput: VuiComponent<"input", InputInputProps>;
 //#endregion
 export { InputInput, InputInputBase };
+
 //# sourceMappingURL=inputInput.d.ts.map

package/dist/input/inputInput.js

@@ -26,7 +26,7 @@ const InputInputBase = styled.input`
 `;
 /** Displays an input element within the Input component. */
 const InputInput = vui((props, ref) => {
-	const { className, autoComplete,...rest } = props;
+	const { className, autoComplete, ...rest } = props;
 	const mergedProps = {
 		...useInputContext(),
 		...props
@@ -50,5 +50,5 @@ var inputInput_default = InputInput;
 
 //#endregion
 export { InputInput, InputInputBase, inputInput_default as default };
-globalThis.__vuiVersion__ = "3.1.2"
+globalThis.__vuiVersion__ = "4.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,aAAc,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;AAEzB,yBAAe"}
+{"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;AAEzB,yBAAe"}

package/dist/input/theme.js

@@ -4,7 +4,9 @@ import { inputColors } from "./consts.js";
 const baseStyle = {
 	container: {
 		focusWithinRing: 3,
-		color: inputColors.inputText
+		color: inputColors.inputText,
+		fontSize: "lg",
+		lineHeight: "135%"
 	},
 	input: { placeholderTextColor: inputColors.placeholder }
 };
@@ -21,7 +23,7 @@ const parts = [
 const sizes = {
 	sm: {
 		container: {
-			fontSize: "xs",
+			fontSize: "sm",
 			h: 24
 		},
 		icon: { size: "xs" },
@@ -30,7 +32,7 @@ const sizes = {
 	},
 	md: {
 		container: {
-			fontSize: "sm",
+			fontSize: "md",
 			h: 32
 		},
 		icon: { size: "sm" },
@@ -39,7 +41,7 @@ const sizes = {
 	},
 	lg: {
 		container: {
-			fontSize: "md",
+			fontSize: "lg",
 			h: 40
 		},
 		icon: { size: "md" },
@@ -48,7 +50,7 @@ const sizes = {
 	},
 	xl: {
 		container: {
-			fontSize: "lg",
+			fontSize: "xl",
 			h: 48
 		},
 		icon: { size: "md" },
@@ -80,5 +82,5 @@ var theme_default = {
 
 //#endregion
 export { theme_default as default };
-globalThis.__vuiVersion__ = "3.1.2"
+globalThis.__vuiVersion__ = "4.0.0-beta.1"
 //# sourceMappingURL=theme.js.map

package/dist/input/theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme.js","names":[],"sources":["../../src/input/theme.ts"],"sourcesContent":["import { inputColors } from './consts'\n\nconst baseStyle = {\n  container: {\n    focusWithinRing: 3,\n    color: inputColors.inputText,\n  },\n  input: {\n    placeholderTextColor: inputColors.placeholder,\n  },\n}\n\nconst defaultProps = {\n  size: 'lg',\n  variant: 'grey',\n}\n\nconst parts = ['container', 'icon', 'input', 'label']\n\nconst sizes = {\n  sm: {\n    container: {\n      fontSize: 'xs',\n      h: 24,\n    },\n    icon: {\n      size: 'xs',\n    },\n    input: {},\n    label: {\n      fontSize: 'xs',\n    },\n  },\n  md: {\n    container: {\n      fontSize: 'sm',\n      h: 32,\n    },\n    icon: {\n      size: 'sm',\n    },\n    input: {},\n    label: {\n      fontSize: 'sm',\n    },\n  },\n  lg: {\n    container: {\n      fontSize: 'md',\n      h: 40,\n    },\n    icon: {\n      size: 'md',\n    },\n    input: {},\n    label: {\n      fontSize: 'md', // No a mistake, we keep the same label size as md input\n    },\n  },\n  xl: {\n    container: {\n      fontSize: 'lg',\n      h: 48,\n    },\n    icon: {\n      size: 'md',\n    },\n    input: {},\n    label: {\n      fontSize: 'lg',\n    },\n  },\n}\n\nconst variants = {\n  grey: {\n    container: {\n      borderColor: inputColors.border,\n      focusWithinRingColor: inputColors.focus,\n    },\n  },\n  green: {\n    container: {\n      borderColor: inputColors.success,\n      focusWithinRingColor: inputColors.success,\n    },\n  },\n  red: {\n    container: {\n      borderColor: inputColors.error,\n      focusWithinRingColor: inputColors.error,\n    },\n  },\n}\n\nexport default {\n  baseStyle,\n  defaultProps,\n  parts,\n  sizes,\n  variants,\n}\n"],"mappings":";;;AAEA,MAAM,YAAY;CAChB,WAAW;EACT,iBAAiB;EACjB,OAAO,YAAY;EACpB;CACD,OAAO,EACL,sBAAsB,YAAY,aACnC;CACF;AAED,MAAM,eAAe;CACnB,MAAM;CACN,SAAS;CACV;AAED,MAAM,QAAQ;CAAC;CAAa;CAAQ;CAAS;CAAQ;AAErD,MAAM,QAAQ;CACZ,IAAI;EACF,WAAW;GACT,UAAU;GACV,GAAG;GACJ;EACD,MAAM,EACJ,MAAM,MACP;EACD,OAAO,EAAE;EACT,OAAO,EACL,UAAU,MACX;EACF;CACD,IAAI;EACF,WAAW;GACT,UAAU;GACV,GAAG;GACJ;EACD,MAAM,EACJ,MAAM,MACP;EACD,OAAO,EAAE;EACT,OAAO,EACL,UAAU,MACX;EACF;CACD,IAAI;EACF,WAAW;GACT,UAAU;GACV,GAAG;GACJ;EACD,MAAM,EACJ,MAAM,MACP;EACD,OAAO,EAAE;EACT,OAAO,EACL,UAAU,MACX;EACF;CACD,IAAI;EACF,WAAW;GACT,UAAU;GACV,GAAG;GACJ;EACD,MAAM,EACJ,MAAM,MACP;EACD,OAAO,EAAE;EACT,OAAO,EACL,UAAU,MACX;EACF;CACF;AAED,MAAM,WAAW;CACf,MAAM,EACJ,WAAW;EACT,aAAa,YAAY;EACzB,sBAAsB,YAAY;EACnC,EACF;CACD,OAAO,EACL,WAAW;EACT,aAAa,YAAY;EACzB,sBAAsB,YAAY;EACnC,EACF;CACD,KAAK,EACH,WAAW;EACT,aAAa,YAAY;EACzB,sBAAsB,YAAY;EACnC,EACF;CACF;AAED,oBAAe;CACb;CACA;CACA;CACA;CACA;CACD"}
+{"version":3,"file":"theme.js","names":[],"sources":["../../src/input/theme.ts"],"sourcesContent":["import { inputColors } from './consts'\n\nconst baseStyle = {\n  container: {\n    focusWithinRing: 3,\n    color: inputColors.inputText,\n    fontSize: 'lg',\n    lineHeight: '135%',\n  },\n  input: {\n    placeholderTextColor: inputColors.placeholder,\n  },\n}\n\nconst defaultProps = {\n  size: 'lg',\n  variant: 'grey',\n}\n\nconst parts = ['container', 'icon', 'input', 'label']\n\nconst sizes = {\n  sm: {\n    container: {\n      fontSize: 'sm',\n      h: 24,\n    },\n    icon: {\n      size: 'xs',\n    },\n    input: {},\n    label: {\n      fontSize: 'xs',\n    },\n  },\n  md: {\n    container: {\n      fontSize: 'md',\n      h: 32,\n    },\n    icon: {\n      size: 'sm',\n    },\n    input: {},\n    label: {\n      fontSize: 'sm',\n    },\n  },\n  lg: {\n    container: {\n      fontSize: 'lg',\n      h: 40,\n    },\n    icon: {\n      size: 'md',\n    },\n    input: {},\n    label: {\n      fontSize: 'md', // No a mistake, we keep the same label size as md input\n    },\n  },\n  xl: {\n    container: {\n      fontSize: 'xl',\n      h: 48,\n    },\n    icon: {\n      size: 'md',\n    },\n    input: {},\n    label: {\n      fontSize: 'lg',\n    },\n  },\n}\n\nconst variants = {\n  grey: {\n    container: {\n      borderColor: inputColors.border,\n      focusWithinRingColor: inputColors.focus,\n    },\n  },\n  green: {\n    container: {\n      borderColor: inputColors.success,\n      focusWithinRingColor: inputColors.success,\n    },\n  },\n  red: {\n    container: {\n      borderColor: inputColors.error,\n      focusWithinRingColor: inputColors.error,\n    },\n  },\n}\n\nexport default {\n  baseStyle,\n  defaultProps,\n  parts,\n  sizes,\n  variants,\n}\n"],"mappings":";;;AAEA,MAAM,YAAY;CAChB,WAAW;EACT,iBAAiB;EACjB,OAAO,YAAY;EACnB,UAAU;EACV,YAAY;EACb;CACD,OAAO,EACL,sBAAsB,YAAY,aACnC;CACF;AAED,MAAM,eAAe;CACnB,MAAM;CACN,SAAS;CACV;AAED,MAAM,QAAQ;CAAC;CAAa;CAAQ;CAAS;CAAQ;AAErD,MAAM,QAAQ;CACZ,IAAI;EACF,WAAW;GACT,UAAU;GACV,GAAG;GACJ;EACD,MAAM,EACJ,MAAM,MACP;EACD,OAAO,EAAE;EACT,OAAO,EACL,UAAU,MACX;EACF;CACD,IAAI;EACF,WAAW;GACT,UAAU;GACV,GAAG;GACJ;EACD,MAAM,EACJ,MAAM,MACP;EACD,OAAO,EAAE;EACT,OAAO,EACL,UAAU,MACX;EACF;CACD,IAAI;EACF,WAAW;GACT,UAAU;GACV,GAAG;GACJ;EACD,MAAM,EACJ,MAAM,MACP;EACD,OAAO,EAAE;EACT,OAAO,EACL,UAAU,MACX;EACF;CACD,IAAI;EACF,WAAW;GACT,UAAU;GACV,GAAG;GACJ;EACD,MAAM,EACJ,MAAM,MACP;EACD,OAAO,EAAE;EACT,OAAO,EACL,UAAU,MACX;EACF;CACF;AAED,MAAM,WAAW;CACf,MAAM,EACJ,WAAW;EACT,aAAa,YAAY;EACzB,sBAAsB,YAAY;EACnC,EACF;CACD,OAAO,EACL,WAAW;EACT,aAAa,YAAY;EACzB,sBAAsB,YAAY;EACnC,EACF;CACD,KAAK,EACH,WAAW;EACT,aAAa,YAAY;EACzB,sBAAsB,YAAY;EACnC,EACF;CACF;AAED,oBAAe;CACb;CACA;CACA;CACA;CACA;CACD"}

package/dist/label/index.d.ts

@@ -1,2 +1,2 @@
 import { LabelProps } from "./label.types.js";
-import { Label, LabelBase } from "./label.js";
+import { Label, LabelBase } from "./label.js";

package/dist/label/label.d.ts

@@ -2,12 +2,13 @@ import { SystemProps } from "../system/system.js";
 import { VuiComponent } from "../core/vui.js";
 import { LabelProps } from "./label.types.js";
 import "../index.js";
-import * as styled_components386 from "styled-components";
+import * as styled_components424 from "styled-components";
 
 //#region src/label/label.d.ts
-declare const LabelBase: styled_components386.StyledComponent<"label", styled_components386.DefaultTheme, SystemProps, never>;
+declare const LabelBase: styled_components424.StyledComponent<"label", styled_components424.DefaultTheme, SystemProps, never>;
 /** Displays a paragraph of text. */
 declare const Label: VuiComponent<"label", LabelProps>;
 //#endregion
 export { Label, LabelBase };
+
 //# sourceMappingURL=label.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"label.d.ts","names":[],"sources":["../../src/label/label.tsx"],"sourcesContent":[],"mappings":";;;;;;;cAOa,WAAS,oBAAA,CAAA,yBAUrB,oBAAA,CAVqB,YAAA,CAAA,CAAA,WAAA,CAAA;;cAaT,OAAK,sBAAA"}
+{"version":3,"file":"label.d.ts","names":[],"sources":["../../src/label/label.tsx"],"sourcesContent":[],"mappings":";;;;;;;cAOa,WAAS,oBAAA,CAAA,yBASrB,oBAAA,CATqB,YAAA,EAAA,WAAA;;cAYT,OAAK,sBAAA"}

package/dist/label/label.js

@@ -11,7 +11,6 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 const LabelBase = styled.labelBox`
   display: block;
   color: darkBlue.main;
-  font-weight: 600;
   width: 100%;
 
   &[aria-disabled='true'] {
@@ -21,7 +20,7 @@ const LabelBase = styled.labelBox`
 `;
 /** Displays a paragraph of text. */
 const Label = vui((props, ref) => {
-	const { children, className, markAsOptional, tooltipText, text, fontSize,...rest } = omitThemingProps(props);
+	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_default, {
@@ -32,15 +31,18 @@ const Label = vui((props, ref) => {
 		...rest,
 		children: children ?? (isOnlyText ? text : /* @__PURE__ */ jsxs(Fragment, { children: [
 			/* @__PURE__ */ jsx(t_default, {
+				variant: "label",
 				fontSize,
 				children: text
 			}),
 			!!markAsOptional && /* @__PURE__ */ jsx(t_default, {
+				variant: "label",
 				fontSize,
 				...styles.helper,
 				children: "(optional)"
 			}),
 			!!tooltipText && /* @__PURE__ */ jsx(t_default, {
+				variant: "label",
 				fontSize,
 				...styles.helper,
 				children: /* @__PURE__ */ jsx(tooltip_default, {
@@ -49,7 +51,7 @@ const Label = vui((props, ref) => {
 						mb: fontSize === "xs" ? "-6px" : "-5px",
 						name: "uiInfoCircle",
 						role: "button",
-						size: "sm"
+						size: fontSize === "xs" ? "xs" : "sm"
 					})
 				})
 			})
@@ -61,5 +63,5 @@ var label_default = Label;
 
 //#endregion
 export { Label, LabelBase, label_default as default };
-globalThis.__vuiVersion__ = "3.1.2"
+globalThis.__vuiVersion__ = "4.0.0-beta.1"
 //# sourceMappingURL=label.js.map

package/dist/label/label.js.map

@@ -1 +1 @@
-{"version":3,"file":"label.js","names":["T","Tooltip","Icon"],"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  font-weight: 600;\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 fontSize={fontSize}>{text}</T>\n            {!!markAsOptional && (\n              <T fontSize={fontSize} {...styles.helper}>\n                (optional)\n              </T>\n            )}\n            {!!tooltipText && (\n              <T fontSize={fontSize} {...styles.helper}>\n                <Tooltip text={tooltipText}>\n                  <Icon mb={fontSize === 'xs' ? '-6px' : '-5px'} name=\"uiInfoCircle\" role=\"button\" size=\"sm\" />\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;;;;;;;;;;;;AAaxC,MAAa,QAAQ,KAA0B,OAAO,QAAQ;CAC5D,MAAM,EAAE,UAAU,WAAW,gBAAgB,aAAa,MAAM,SAAU,GAAG,SAAS,iBAAiB,MAAM;CAC7G,MAAM,SAAS,eAAe,SAAS,MAAM;CAE7C,MAAM,aAAa,QAAQ,CAAC,kBAAkB,CAAC,eAAe,CAAC;AAE/D,QACE,oBAACA;EAAE,IAAI;EAAW,WAAW,GAAG,aAAa,UAAU;EAAY;EAAe;EAAK,GAAI;YACxF,aACE,aACC,OAEA;GACE,oBAACA;IAAY;cAAW;KAAS;GAChC,CAAC,CAAC,kBACD,oBAACA;IAAY;IAAU,GAAI,OAAO;cAAQ;KAEtC;GAEL,CAAC,CAAC,eACD,oBAACA;IAAY;IAAU,GAAI,OAAO;cAChC,oBAACC;KAAQ,MAAM;eACb,oBAACC;MAAK,IAAI,aAAa,OAAO,SAAS;MAAQ,MAAK;MAAe,MAAK;MAAS,MAAK;OAAO;MACrF;KACR;MAEL;GAEL;EAEN;AAEF,MAAM,cAAc;AACpB,oBAAe"}
+{"version":3,"file":"label.js","names":["T","Tooltip","Icon"],"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,oBAACA;EAAE,IAAI;EAAW,WAAW,GAAG,aAAa,UAAU;EAAY;EAAe;EAAK,GAAI;YACxF,aACE,aACC,OAEA;GACE,oBAACA;IAAE,SAAQ;IAAkB;cAC1B;KACC;GACH,CAAC,CAAC,kBACD,oBAACA;IAAE,SAAQ;IAAkB;IAAU,GAAI,OAAO;cAAQ;KAEtD;GAEL,CAAC,CAAC,eACD,oBAACA;IAAE,SAAQ;IAAkB;IAAU,GAAI,OAAO;cAChD,oBAACC;KAAQ,MAAM;eACb,oBAACC;MACC,IAAI,aAAa,OAAO,SAAS;MACjC,MAAK;MACL,MAAK;MACL,MAAM,aAAa,OAAO,OAAO;OACjC;MACM;KACR;MAEL;GAEL;EAEN;AAEF,MAAM,cAAc;AACpB,oBAAe"}

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

@@ -14,4 +14,5 @@ type LabelProps = SystemProps & ThemingProps<'P'> & {
 };
 //#endregion
 export { LabelProps };
+
 //# sourceMappingURL=label.types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"label.types.d.ts","names":[],"sources":["../../src/label/label.types.ts"],"sourcesContent":[],"mappings":";;;;;;KAKY,UAAA,CAAA,CAAA,CAAa,cACvB;;;EADU,CAAA,CAAA,CAAA,CAAA,QAAA,CAAA,EAAA,CAAA,QAAA,CAAA,UAAA,CAAA,CAAA,EAAA,CAAA,IAAA,CAAA,EAAA,CAAA,QAAA,CAAA,GAAA,CAAA,CAAA,CAAA;EAAa,cAAA,CAAA,CAAA,CAAA,OAAA;EACvB,CAAA,CAAA,CAAA,CAAA,QAAA,CAAA,CAAA,CAAA,OAAA,CAAA,IAAA,CAAA,IAAA,CAAA,IAAA,CAAA,CAAA,EAAA,CAAA,IAAA,CAAA,EAAA,CAAA,QAAA,CAAA,GAAA,CAAA,CAAA,CAAA;EAMgB,WAAA,CAAA,CAAA,CAAA,SAAA;CAAS"}
+{"version":3,"file":"label.types.d.ts","names":[],"sources":["../../src/label/label.types.ts"],"sourcesContent":[],"mappings":";;;;;;KAKY,UAAA,GAAa,cACvB;;;EADU;EAAa,cAAA,CAAA,EAAA,OAAA;EACvB;EAMgB,WAAA,CAAA,EAAA,SAAA;CAAS"}

package/dist/label/theme.js

@@ -17,5 +17,5 @@ var theme_default = {
 
 //#endregion
 export { theme_default as default };
-globalThis.__vuiVersion__ = "3.1.2"
+globalThis.__vuiVersion__ = "4.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__ = "3.1.2"
+globalThis.__vuiVersion__ = "4.0.0-beta.1"
 //# sourceMappingURL=context.js.map

package/dist/link/index.d.ts

@@ -1,4 +1,4 @@
 import { LinkProps } from "./link.types.js";
 import { LinkIcon } from "./linkIcon.js";
 import { LinkText } from "./linkText.js";
-import { Link, LinkBase } from "./link.js";
+import { Link, LinkBase } from "./link.js";

package/dist/link/link.d.ts

@@ -20,10 +20,10 @@ import { LinkProps } from "./link.types.js";
 import { LinkIcon } from "./linkIcon.js";
 import { LinkText } from "./linkText.js";
 import "../index.js";
-import * as styled_components388 from "styled-components";
+import * as styled_components427 from "styled-components";
 
 //#region src/link/link.d.ts
-declare const LinkBase: styled_components388.StyledComponent<"a", styled_components388.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 & {
+declare const LinkBase: styled_components427.StyledComponent<"a", styled_components427.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 Link: VuiComponent<"a", LinkProps> & {
@@ -32,4 +32,5 @@ declare const Link: VuiComponent<"a", LinkProps> & {
 };
 //#endregion
 export { Link, LinkBase };
+
 //# sourceMappingURL=link.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"link.d.ts","names":[],"sources":["../../src/link/link.tsx"],"sourcesContent":[],"mappings":"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"}
+{"version":3,"file":"link.d.ts","names":[],"sources":["../../src/link/link.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;cAsBa,UAAQ,oBAAA,CAAA,qBA+BpB,oBAAA,CA/BoB,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;;;cAiCR,MA4CP,kBAAkB;eACT;eACA"}

package/dist/link/link.js

@@ -53,7 +53,7 @@ const LinkBase = styled.aBox.attrs((props) => ({ isUnderlined: props.isUnderline
   }
 `;
 const Link = vui((props, ref) => {
-	const { children, className, fontWeight, iconLeft, iconRight, isExternal, isUnderlined, size, text, variant, weight,...rest } = props;
+	const { children, className, fontWeight, iconLeft, iconRight, isExternal, isUnderlined, size, text, variant, weight, ...rest } = props;
 	const styles = useStyleConfig("Link", props);
 	const context = useMemo(() => filterUndefined({
 		size,
@@ -100,5 +100,5 @@ var link_default = Link;
 
 //#endregion
 export { Link, LinkBase, link_default as default };
-globalThis.__vuiVersion__ = "3.1.2"
+globalThis.__vuiVersion__ = "4.0.0-beta.1"
 //# sourceMappingURL=link.js.map

package/dist/link/link.js.map

@@ -1 +1 @@
-{"version":3,"file":"link.js","names":["LinkIcon","T","LinkText"],"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  &:not(.vui-linkNoUnderline) .vui-linkIcon {\n    margin-bottom: 2px;\n  }\n\n  &:hover > .vui-t {\n    animation: ${({ isUnderlined }) => (isUnderlined ? 'none' : 'linkSwipe 0.3s ease forwards')};\n    background-size: ${({ isUnderlined }) => (isUnderlined ? '100% 2px' : '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  })\n\n  return (\n    <LinkProvider value={context}>\n      <LinkBase\n        alignItems={iconLeft || iconRight ? 'center' : undefined}\n        className={cs('vui-link', className)}\n        display={iconLeft || iconRight ? 'inline-flex' : 'inline'}\n        focusRing={2}\n        isUnderlined={isUnderlined}\n        ref={ref}\n        {...styles.container}\n        {...aliasedProps}\n        {...rest}\n      >\n        {isString(iconLeft) ? <LinkIcon mr={1} name={iconLeft} /> : iconLeft}\n        {children ? <T fontSize={'inherit'}>{children}</T> : isReactText(text) && <LinkText text={text} />}\n        {isString(iconRight) ? <LinkIcon ml={1} 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;;;;;;;;;;;;;kBAajE,EAAE,mBAAoB,eAAe,SAAS,+BAAgC;wBACxE,EAAE,mBAAoB,eAAe,aAAa,WAAY;;;AAItF,MAAa,OAAO,KAAqB,OAAO,QAAQ;CACtD,MAAM,EACJ,UACA,WACA,YACA,UACA,WACA,YACA,cACA,MACA,MACA,SACA,OACA,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;EACjC,CAAC;AAEF,QACE,oBAAC;EAAa,OAAO;YACnB,qBAAC;GACC,YAAY,YAAY,YAAY,WAAW;GAC/C,WAAW,GAAG,YAAY,UAAU;GACpC,SAAS,YAAY,YAAY,gBAAgB;GACjD,WAAW;GACG;GACT;GACL,GAAI,OAAO;GACX,GAAI;GACJ,GAAI;;IAEH,SAAS,SAAS,GAAG,oBAACA;KAAS,IAAI;KAAG,MAAM;MAAY,GAAG;IAC3D,WAAW,oBAACC;KAAE,UAAU;KAAY;MAAa,GAAG,YAAY,KAAK,IAAI,oBAACC,oBAAe,OAAQ;IACjG,SAAS,UAAU,GAAG,oBAACF;KAAS,IAAI;KAAG,MAAM;MAAa,GAAG;;IACrD;GACE;EAEjB;AAKF,KAAK,OAAOA;AACZ,KAAK,OAAOE;AACZ,KAAK,cAAc;AAEnB,mBAAe"}
+{"version":3,"file":"link.js","names":["LinkIcon","T","LinkText"],"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  &:not(.vui-linkNoUnderline) .vui-linkIcon {\n    margin-bottom: 2px;\n  }\n\n  &:hover > .vui-t {\n    animation: ${({ isUnderlined }) => (isUnderlined ? 'none' : 'linkSwipe 0.3s ease forwards')};\n    background-size: ${({ isUnderlined }) => (isUnderlined ? '100% 2px' : '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  })\n\n  return (\n    <LinkProvider value={context}>\n      <LinkBase\n        alignItems={iconLeft || iconRight ? 'center' : undefined}\n        className={cs('vui-link', className)}\n        display={iconLeft || iconRight ? 'inline-flex' : 'inline'}\n        focusRing={2}\n        isUnderlined={isUnderlined}\n        ref={ref}\n        {...styles.container}\n        {...aliasedProps}\n        {...rest}\n      >\n        {isString(iconLeft) ? <LinkIcon mr={1} name={iconLeft} /> : iconLeft}\n        {children ? <T fontSize={'inherit'}>{children}</T> : isReactText(text) && <LinkText text={text} />}\n        {isString(iconRight) ? <LinkIcon ml={1} 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;;;;;;;;;;;;;kBAajE,EAAE,mBAAoB,eAAe,SAAS,+BAAgC;wBACxE,EAAE,mBAAoB,eAAe,aAAa,WAAY;;;AAItF,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;EACjC,CAAC;AAEF,QACE,oBAAC;EAAa,OAAO;YACnB,qBAAC;GACC,YAAY,YAAY,YAAY,WAAW;GAC/C,WAAW,GAAG,YAAY,UAAU;GACpC,SAAS,YAAY,YAAY,gBAAgB;GACjD,WAAW;GACG;GACT;GACL,GAAI,OAAO;GACX,GAAI;GACJ,GAAI;;IAEH,SAAS,SAAS,GAAG,oBAACA;KAAS,IAAI;KAAG,MAAM;MAAY,GAAG;IAC3D,WAAW,oBAACC;KAAE,UAAU;KAAY;MAAa,GAAG,YAAY,KAAK,IAAI,oBAACC,oBAAe,OAAQ;IACjG,SAAS,UAAU,GAAG,oBAACF;KAAS,IAAI;KAAG,MAAM;MAAa,GAAG;;IACrD;GACE;EAEjB;AAKF,KAAK,OAAOA;AACZ,KAAK,OAAOE;AACZ,KAAK,cAAc;AAEnB,mBAAe"}

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

@@ -30,4 +30,5 @@ type LinkProps = SystemProps & ThemingProps<'Link'> & {
 };
 //#endregion
 export { LinkProps };
+
 //# sourceMappingURL=link.types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"link.types.d.ts","names":[],"sources":["../../src/link/link.types.ts"],"sourcesContent":[],"mappings":";;;;;;;;KAIY,SAAA,CAAA,CAAA,CAAY,cACtB;;;;eAIe;EALL,CAAA,CAAA,CAAA,CAAA,KAAA,CAAA,GAAA,CAAA,mBAAA,CAAA,IAAA,CAAA,CAAA,CAAA,UAAA,CAAA,CAAA;EAAY,eAAA,CAAA,CAAA,CAOF,eAPE,CAAA,CAAA,cAAA,CAAA,CAAA;EACtB,CAAA,CAAA,CAAA,CAAA,IAAA,CAAA,SAAA,CAAA,KAAA,CAAA,GAAA,CAAA,GAAA,CAAA,CAAA,CAAA,GAAA,CAAA,CAAA,CAAA;EAIe,IAAA,CAAA,CAAA,CAAA,MAAA;EAEK,CAAA,CAAA,CAAA,CAAA,MAAA,CAAA,UAAA,CAAA,EAAA,CAAA,IAAA,CAAA,EAAA,CAAA,GAAA,CAAA,IAAA,CAAA,CAAA,CAAA;EAIP,QAAA,CAAA,CAAA,CAAA,QAAA,CAAA,CAAA,CAAW,GAAA,CAAI,OAAf;EAAW,CAAA,CAAA,CAAA,CAAA,MAAA,CAAA,UAAA,CAAA,EAAA,CAAA,IAAA,CAAA,EAAA,CAAA,GAAA,CAAA,KAAA,CAAA,CAAA,CAAA;EAEV,SAAA,CAAA,CAAA,CAAA,QAAA,CAAA,CAAA,CAAW,GAAA,CAAI,OAAf;EAAW,CAAA,CAAA,CAAA,CAAA,KAAA,CAAA,GAAA,CAAA,IAAA,CAAA,EAAA,CAAA,GAAA,CAAA,GAAA,CAAA,IAAA,CAAA,WAAA,CAAA,UAAA,CAAA,CAAA,CAAA;EAME,UAAI,CAAA,CAAA,CAAA,OAAA;EAEpB,CAAA,CAAA,CAAA,CAAA,QAAA,CAAA,SAAA,CAAA,SAAA,CAAA,CAAA,MAAA,CAAA,EAAA,CAAA,IAAA,CAAA,GAAA,CAAA,MAAA,CAAA,KAAA,CAAA,MAAA,CAAA,IAAA,CAAA,CAAA,CAAA;EAAe,YAAA,CAAA,CAAA,CAAA,OAAA;;2BAFC,GAAA,CAAI;;WAEpB"}
+{"version":3,"file":"link.types.d.ts","names":[],"sources":["../../src/link/link.types.ts"],"sourcesContent":[],"mappings":";;;;;;;;KAIY,SAAA,GAAY,cACtB;;;;eAIe;EALL;EAAY,eAAA,CAAA,EAOF,eAPE,CAAA,gBAAA,CAAA;EACtB;EAIe,IAAA,CAAA,EAAA,MAAA;EAEK;EAIP,QAAA,CAAA,EAAA,QAAA,GAAW,GAAA,CAAI,OAAf;EAAW;EAEV,SAAA,CAAA,EAAA,QAAA,GAAW,GAAA,CAAI,OAAf;EAAW;EAME,UAAI,CAAA,EAAA,OAAA;EAEpB;EAAe,YAAA,CAAA,EAAA,OAAA;;2BAFC,GAAA,CAAI;;WAEpB"}

package/dist/link/linkIcon.d.ts

@@ -8,4 +8,5 @@ import "../index.js";
 declare const LinkIcon: VuiComponent<"svg", IconProps>;
 //#endregion
 export { LinkIcon };
+
 //# sourceMappingURL=linkIcon.d.ts.map

package/dist/link/linkIcon.js

@@ -8,7 +8,7 @@ import { jsx } from "react/jsx-runtime";
 //#region src/link/linkIcon.tsx
 /** Displays an icon within the Link. */
 const LinkIcon = vui((props, ref) => {
-	const { className,...rest } = props;
+	const { className, ...rest } = props;
 	const styles = useStyleConfig("Link", useLinkContext());
 	return /* @__PURE__ */ jsx(icon_default, {
 		className: cs("vui-linkIcon", className),
@@ -22,5 +22,5 @@ var linkIcon_default = LinkIcon;
 
 //#endregion
 export { LinkIcon, linkIcon_default as default };
-globalThis.__vuiVersion__ = "3.1.2"
+globalThis.__vuiVersion__ = "4.0.0-beta.1"
 //# sourceMappingURL=linkIcon.js.map

package/dist/link/linkIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"linkIcon.js","names":["Icon"],"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,UAAW,GAAG,SAAS;CAC/B,MAAM,SAAS,eAAe,QAAQ,gBAAgB,CAAC;AAEvD,QAAO,oBAACA;EAAK,WAAW,GAAG,gBAAgB,UAAU;EAAO;EAAK,GAAI,OAAO;EAAM,GAAI;GAAQ;EAC9F;AAEF,SAAS,cAAc;AAEvB,uBAAe"}
+{"version":3,"file":"linkIcon.js","names":["Icon"],"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,oBAACA;EAAK,WAAW,GAAG,gBAAgB,UAAU;EAAO;EAAK,GAAI,OAAO;EAAM,GAAI;GAAQ;EAC9F;AAEF,SAAS,cAAc;AAEvB,uBAAe"}

package/dist/link/linkText.d.ts

@@ -8,4 +8,5 @@ import "../index.js";
 declare const LinkText: VuiComponent<"span", TProps>;
 //#endregion
 export { LinkText };
+
 //# sourceMappingURL=linkText.d.ts.map

package/dist/link/linkText.js

@@ -8,7 +8,7 @@ import { jsx } from "react/jsx-runtime";
 //#region src/link/linkText.tsx
 /** Displays text of the Link. */
 const LinkText = vui((props, ref) => {
-	const { className,...rest } = props;
+	const { className, ...rest } = props;
 	const styles = useStyleConfig("Link", useLinkContext());
 	return /* @__PURE__ */ jsx(t_default, {
 		className: cs("vui-linkText", className),
@@ -24,5 +24,5 @@ var linkText_default = LinkText;
 
 //#endregion
 export { LinkText, linkText_default as default };
-globalThis.__vuiVersion__ = "3.1.2"
+globalThis.__vuiVersion__ = "4.0.0-beta.1"
 //# sourceMappingURL=linkText.js.map

package/dist/link/linkText.js.map

@@ -1 +1 @@
-{"version":3,"file":"linkText.js","names":["T"],"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,UAAW,GAAG,SAAS;CAC/B,MAAM,SAAS,eAAe,QAAQ,gBAAgB,CAAC;AAEvD,QACE,oBAACA;EACC,WAAW,GAAG,gBAAgB,UAAU;EACxC,UAAS;EACJ;EACL,oBAAmB;EACnB,GAAI,OAAO;EACX,GAAI;GACJ;EAEJ;AAEF,SAAS,cAAc;AACvB,uBAAe"}
+{"version":3,"file":"linkText.js","names":["T"],"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,oBAACA;EACC,WAAW,GAAG,gBAAgB,UAAU;EACxC,UAAS;EACJ;EACL,oBAAmB;EACnB,GAAI,OAAO;EACX,GAAI;GACJ;EAEJ;AAEF,SAAS,cAAc;AACvB,uBAAe"}

package/dist/link/theme.js

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