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

package/dist/input/autoCompletePopover.js

@@ -0,0 +1,4 @@
+import{cs as e}from"../utils/styles.js";import{styled as t}from"../core/styled.js";import{List as n}from"../list/list.js";import r from"../popover/popover.js";import{memo as i}from"react";import{jsx as a,jsxs as o}from"react/jsx-runtime";const s=t.divBox`
+  width: 100%;
+`,c={aria:{expanded:!1}};var l=i(({autoCompleteOptions:t,autoCompleteMaxHeight:i,children:l,filterAutoCompleteOptions:u,onAutoCompleteSelect:d})=>t===void 0?l:o(r,{options:c,placement:`bottom-start`,matchWidth:!0,children:[a(r.Trigger,{as:s,className:e(`vui-input-popoverTrigger`),children:l}),!!t&&a(r.Content,{children:a(n,{maxH:i,w:`100%`,className:e(`vui-input-popoverList`),children:t?.filter?.(u).map(e=>a(n.Item,{cursor:`pointer`,hoverBg:`skyBlue.hover`,onClick:()=>d(e),children:e},e))})})]}));export{l as default};globalThis.__vuiVersion__=`3.0.0-beta.6`;
+//# sourceMappingURL=autoCompletePopover.js.map

package/dist/input/autoCompletePopover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"autoCompletePopover.js","names":[],"sources":["../../src/input/autoCompletePopover.tsx"],"sourcesContent":["import { memo } from 'react'\n\nimport { styled } from '../core'\nimport { List } from '../list'\nimport { Popover } from '../popover'\nimport { cs } from '../utils'\nimport type { AutoCompletePopoverProps } from './input.types'\n\nconst InputContainer = styled.divBox`\n  width: 100%;\n`\n\nconst options = {\n  aria: {\n    expanded: false,\n  },\n}\n\n/** Wrapper for the autocomplete popover. */\nexport const AutoCompletePopover = ({\n  autoCompleteOptions,\n  autoCompleteMaxHeight,\n  children,\n  filterAutoCompleteOptions,\n  onAutoCompleteSelect,\n}: AutoCompletePopoverProps) => {\n  if (autoCompleteOptions === undefined) return children\n\n  return (\n    <Popover options={options} placement=\"bottom-start\" matchWidth={true}>\n      <Popover.Trigger as={InputContainer} className={cs('vui-input-popoverTrigger')}>\n        {children}\n      </Popover.Trigger>\n      {!!autoCompleteOptions && (\n        <Popover.Content>\n          <List maxH={autoCompleteMaxHeight} w={'100%'} className={cs('vui-input-popoverList')}>\n            {autoCompleteOptions?.filter?.(filterAutoCompleteOptions).map((i: string) => (\n              <List.Item cursor=\"pointer\" hoverBg=\"skyBlue.hover\" key={i} onClick={() => onAutoCompleteSelect(i)}>\n                {i}\n              </List.Item>\n            ))}\n          </List>\n        </Popover.Content>\n      )}\n    </Popover>\n  )\n}\n\nexport default memo(AutoCompletePopover)\n"],"mappings":"8OAQA,MAAM,EAAiB,EAAO,MAAM;;EAI9B,EAAU,CACd,KAAM,CACJ,SAAU,GACX,CACF,CAgCD,IAAA,EAAe,GA7BqB,CAClC,sBACA,wBACA,WACA,4BACA,0BAEI,IAAwB,IAAA,GAAkB,EAG5C,EAAC,EAAA,CAAiB,UAAS,UAAU,eAAe,WAAY,aAC9D,EAAC,EAAQ,QAAA,CAAQ,GAAI,EAAgB,UAAW,EAAG,2BAA2B,CAC3E,YACe,CACjB,CAAC,CAAC,GACD,EAAC,EAAQ,QAAA,CAAA,SACP,EAAC,EAAA,CAAK,KAAM,EAAuB,EAAG,OAAQ,UAAW,EAAG,wBAAwB,UACjF,GAAqB,SAAS,EAA0B,CAAC,IAAK,GAC7D,EAAC,EAAK,KAAA,CAAK,OAAO,UAAU,QAAQ,gBAAwB,YAAe,EAAqB,EAAE,UAC/F,GADsD,EAE7C,CACZ,EACG,CAAA,CACS,CAAA,EAEZ,CAI0B"}

package/dist/input/consts.js

@@ -0,0 +1,2 @@
+const e={border:`sandstone.60`,placeholder:`sandstone.55`,inputText:`sandstone.10`,helpText:`sandstone.30`,icons:`seaBlue.main`,disabled:`sandstone.95`,focus:`focusColor`,error:`energyRed.45`,loading:`seaBlue.80`,success:`landGreen.35`},t={error:`falExclamationTriangle`,loading:`fadSpinnerThird`,success:`falCheck`},n={error:{variant:`red`,iconProps:{color:e.error,icon:t.error}},loading:{variant:`grey`,iconProps:{animation:`vui-spin 0.6s linear infinite`,name:t.loading,pathFill:[e.loading,e.icons]}},success:{variant:`green`,iconProps:{color:e.success,icon:t.success}}},r={sm:`xs`,md:`sm`,lg:`md`,xl:`lg`},i={sm:`sm`,md:`sm`,lg:`sm`,xl:`md`},a={sm:`sm`,md:`sm`,lg:`md`,xl:`md`},o=`60px`;export{i as clearIconSize,r as displayValueOnlyTextSize,o as helpTextMargin,a as helpTextSize,e as inputColors,n as inputStateMapping};globalThis.__vuiVersion__=`3.0.0-beta.6`;
+//# sourceMappingURL=consts.js.map

package/dist/input/consts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"consts.js","names":["inputStateMapping: InputStateMapping"],"sources":["../../src/input/consts.ts"],"sourcesContent":["import type { InputStateMapping } from './input.types'\n\nexport const inputColors = {\n  border: 'sandstone.60',\n  placeholder: 'sandstone.55',\n  inputText: 'sandstone.10',\n  helpText: 'sandstone.30',\n  icons: 'seaBlue.main',\n  disabled: 'sandstone.95',\n  focus: 'focusColor',\n  error: 'energyRed.45',\n  loading: 'seaBlue.80',\n  success: 'landGreen.35',\n} as const\n\nexport const stateIcons = {\n  error: 'falExclamationTriangle',\n  loading: 'fadSpinnerThird',\n  success: 'falCheck',\n} as const\n\nexport const inputStateMapping: InputStateMapping = {\n  error: {\n    variant: 'red',\n    iconProps: {\n      color: inputColors.error,\n      icon: stateIcons.error,\n    },\n  },\n  loading: {\n    variant: 'grey',\n    iconProps: {\n      animation: 'vui-spin 0.6s linear infinite',\n      name: stateIcons.loading,\n      pathFill: [inputColors.loading, inputColors.icons],\n    },\n  },\n  success: {\n    variant: 'green',\n    iconProps: {\n      color: inputColors.success,\n      icon: stateIcons.success,\n    },\n  },\n}\n\nexport const displayValueOnlyTextSize = {\n  sm: 'xs',\n  md: 'sm',\n  lg: 'md',\n  xl: 'lg',\n} as const\n\nexport const clearIconSize = {\n  sm: 'sm',\n  md: 'sm',\n  lg: 'sm',\n  xl: 'md',\n} as const\n\nexport const helpTextSize = {\n  sm: 'sm',\n  md: 'sm',\n  lg: 'md',\n  xl: 'md',\n} as const\n\nexport const helpTextMargin = '60px' as const\n"],"mappings":"AAEA,MAAa,EAAc,CACzB,OAAQ,eACR,YAAa,eACb,UAAW,eACX,SAAU,eACV,MAAO,eACP,SAAU,eACV,MAAO,aACP,MAAO,eACP,QAAS,aACT,QAAS,eACV,CAEY,EAAa,CACxB,MAAO,yBACP,QAAS,kBACT,QAAS,WACV,CAEYA,EAAuC,CAClD,MAAO,CACL,QAAS,MACT,UAAW,CACT,MAAO,EAAY,MACnB,KAAM,EAAW,MAClB,CACF,CACD,QAAS,CACP,QAAS,OACT,UAAW,CACT,UAAW,gCACX,KAAM,EAAW,QACjB,SAAU,CAAC,EAAY,QAAS,EAAY,MAAM,CACnD,CACF,CACD,QAAS,CACP,QAAS,QACT,UAAW,CACT,MAAO,EAAY,QACnB,KAAM,EAAW,QAClB,CACF,CACF,CAEY,EAA2B,CACtC,GAAI,KACJ,GAAI,KACJ,GAAI,KACJ,GAAI,KACL,CAEY,EAAgB,CAC3B,GAAI,KACJ,GAAI,KACJ,GAAI,KACJ,GAAI,KACL,CAEY,EAAe,CAC1B,GAAI,KACJ,GAAI,KACJ,GAAI,KACJ,GAAI,KACL,CAEY,EAAiB"}

package/dist/input/context.js

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

package/dist/input/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","names":[],"sources":["../../src/input/context.ts"],"sourcesContent":["import { createContext } from '../utils'\nimport type { InputProps } from './input.types'\n\nconst [InputProvider, useInputContext] = createContext<Partial<InputProps>>({ isOptional: true })\n\nexport { InputProvider, useInputContext }\n"],"mappings":"kDAGA,KAAM,CAAC,EAAe,GAAmB,EAAmC,CAAE,WAAY,GAAM,CAAC"}

package/dist/input/helpText.d.ts

@@ -0,0 +1,9 @@
+import { VuiComponent } from "../core/vui.js";
+import { HelpTextProps } from "./input.types.js";
+
+//#region src/input/helpText.d.ts
+/** Displaying help text below the input. */
+declare const HelpText: VuiComponent<"div", HelpTextProps>;
+//#endregion
+export { HelpText };
+//# sourceMappingURL=helpText.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"helpText.d.ts","names":[],"sources":["../../src/input/helpText.tsx"],"sourcesContent":[],"mappings":";;;;;cAUa,8BAAQ"}

package/dist/input/helpText.js

@@ -0,0 +1,2 @@
+import{isJsx as e}from"../utils/assertion.js";import{cs as t}from"../utils/styles.js";import{inputColors as n}from"./consts.js";import{useStyleConfig as r}from"../core/theme.js";import{vui as i}from"../core/vui.js";import a from"../box/box.js";import o from"../icon/icon.js";import s from"../p/p.js";import{useInputContext as c}from"./context.js";import{jsx as l,jsxs as u}from"react/jsx-runtime";const d=i((i,d)=>{let{className:f,children:p,isError:m,...h}=i,g={...c(),...i},_=r(`Input`,g),v=m?n.error:n.helpText;return e(p)?u(a,{alignItems:`flex-start`,className:t(`vui-inputHelpText`,f),color:v,display:`flex`,pt:.5,ref:d,..._.helpText,...h,children:[m&&l(o,{mr:1,mt:`3px`,name:`uiExclamationTriangle`,pathFill:n.error,size:`sm`}),p]}):u(s,{alignItems:`flex-start`,className:t(`vui-inputHelpText`,f),color:v,display:`flex`,fontSize:m?`md`:`sm`,pt:.5,ref:d,..._.helpText,...h,children:[m&&l(o,{mr:1,mt:`3px`,name:`uiExclamationTriangle`,pathFill:n.error,size:`sm`}),p]})});d.displayName=`HelpText`;var f=d;export{f as default};globalThis.__vuiVersion__=`3.0.0-beta.6`;
+//# sourceMappingURL=helpText.js.map

package/dist/input/helpText.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpText.js","names":["Box","Icon","P"],"sources":["../../src/input/helpText.tsx"],"sourcesContent":["import Box from '../box'\nimport { useStyleConfig, vui } from '../core'\nimport Icon from '../icon'\nimport P from '../p'\nimport { cs, isJsx } from '../utils'\nimport { inputColors } from './consts'\nimport { useInputContext } from './context'\nimport type { HelpTextProps } from './input.types'\n\n/** Displaying help text below the input. */\nexport const HelpText = vui<'div', HelpTextProps>((props, ref) => {\n  const { className, children, isError, ...rest } = props\n  const inputProps = useInputContext()\n  const mergedProps = { ...inputProps, ...props }\n  const styles = useStyleConfig('Input', mergedProps)\n\n  const color = isError ? inputColors.error : inputColors.helpText\n\n  if (isJsx(children)) {\n    return (\n      <Box\n        alignItems=\"flex-start\"\n        className={cs('vui-inputHelpText', className)}\n        color={color}\n        display=\"flex\"\n        pt={0.5}\n        ref={ref}\n        {...styles.helpText}\n        {...rest}\n      >\n        {isError && <Icon mr={1} mt=\"3px\" name=\"uiExclamationTriangle\" pathFill={inputColors.error} size=\"sm\" />}\n        {children}\n      </Box>\n    )\n  }\n  // Fallback for string children\n  return (\n    <P\n      alignItems=\"flex-start\"\n      className={cs('vui-inputHelpText', className)}\n      color={color}\n      display=\"flex\"\n      fontSize={isError ? 'md' : 'sm'}\n      pt={0.5}\n      ref={ref}\n      {...styles.helpText}\n      {...rest}\n    >\n      {isError && <Icon mr={1} mt=\"3px\" name=\"uiExclamationTriangle\" pathFill={inputColors.error} size=\"sm\" />}\n      {children}\n    </P>\n  )\n})\n\nHelpText.displayName = 'HelpText'\nexport default HelpText\n"],"mappings":"6YAUA,MAAa,EAAW,GAA2B,EAAO,IAAQ,CAChE,GAAM,CAAE,YAAW,WAAU,UAAS,GAAG,GAAS,EAE5C,EAAc,CAAE,GADH,GAAiB,CACC,GAAG,EAAO,CACzC,EAAS,EAAe,QAAS,EAAY,CAE7C,EAAQ,EAAU,EAAY,MAAQ,EAAY,SAoBxD,OAlBI,EAAM,EAAS,CAEf,EAACA,EAAAA,CACC,WAAW,aACX,UAAW,EAAG,oBAAqB,EAAU,CACtC,QACP,QAAQ,OACR,GAAI,GACC,MACL,GAAI,EAAO,SACX,GAAI,YAEH,GAAW,EAACC,EAAAA,CAAK,GAAI,EAAG,GAAG,MAAM,KAAK,wBAAwB,SAAU,EAAY,MAAO,KAAK,MAAO,CACvG,EAAA,EACG,CAKR,EAACC,EAAAA,CACC,WAAW,aACX,UAAW,EAAG,oBAAqB,EAAU,CACtC,QACP,QAAQ,OACR,SAAU,EAAU,KAAO,KAC3B,GAAI,GACC,MACL,GAAI,EAAO,SACX,GAAI,YAEH,GAAW,EAACD,EAAAA,CAAK,GAAI,EAAG,GAAG,MAAM,KAAK,wBAAwB,SAAU,EAAY,MAAO,KAAK,MAAO,CACvG,EAAA,EACC,EAEN,CAEF,EAAS,YAAc,WACvB,IAAA,EAAe"}

package/dist/input/helpers.js

@@ -0,0 +1,2 @@
+function e(e){let{defaultValue:t,value:n}=e;return t?.toString().length??n?.toString().length??0}export{e as getInitialCount};globalThis.__vuiVersion__=`3.0.0-beta.6`;
+//# sourceMappingURL=helpers.js.map

package/dist/input/helpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.js","names":[],"sources":["../../src/input/helpers.ts"],"sourcesContent":["import type { InputProps } from './input.types'\n\n/** Returns length of the initial input's value. */\nexport function getInitialCount(props: InputProps) {\n  const { defaultValue, value } = props\n\n  return defaultValue?.toString().length ?? value?.toString().length ?? 0\n}\n"],"mappings":"AAGA,SAAgB,EAAgB,EAAmB,CACjD,GAAM,CAAE,eAAc,SAAU,EAEhC,OAAO,GAAc,UAAU,CAAC,QAAU,GAAO,UAAU,CAAC,QAAU"}

package/dist/input/input.d.ts

@@ -0,0 +1,23 @@
+import { SystemProps } from "../system/system.js";
+import { VuiComponent } from "../core/vui.js";
+import { InputProps } from "./input.types.js";
+import { HelpText } from "./helpText.js";
+import { InputIcon } from "./inputIcon.js";
+import { InputInput } from "./inputInput.js";
+import * as styled_components371 from "styled-components";
+
+//#region src/input/input.d.ts
+declare const InputBase: styled_components371.StyledComponent<"div", styled_components371.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.
+ * Exposes some props to the children via context.
+ */
+declare const Input: VuiComponent<"div", InputProps> & {
+  Icon: typeof InputIcon;
+  Input: typeof InputInput;
+  HelpText: typeof HelpText;
+};
+//#endregion
+export { Input, InputBase };
+//# sourceMappingURL=input.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"input.d.ts","names":[],"sources":["../../src/input/input.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;cA0Ba,WAAS,oBAAA,CAAA,uBAoBrB,oBAAA,CApBqB,YAAA;;;;AAAtB;;AAoBC,cAOY,KAPZ,EA4MK,YAhOgB,CAAA,KAAA,EAgOI,UAhOJ,CAAA,GAAA;eAiOP;OAjOO,EAAA,OAkON,UAlOM;EAAA,QAAA,EAAA,OAmOH,QAnOG;AA2BtB,CAAA"}

package/dist/input/input.js

@@ -0,0 +1,22 @@
+import{isString as e}from"../utils/assertion.js";import{filterUndefined as t}from"../utils/object.js";import{cs as n}from"../utils/styles.js";import{clearIconSize as r,displayValueOnlyTextSize as ee,helpTextMargin as te,helpTextSize as i,inputColors as a,inputStateMapping as ne}from"./consts.js";import{useStyleConfig as re}from"../core/theme.js";import{styled as o}from"../core/styled.js";import{vui as s}from"../core/vui.js";import c from"../box/box.js";import{T as l}from"../t/t.js";import{IconButton as ie}from"../button/buttons.js";import{InputProvider as ae}from"./context.js";import u from"./helpText.js";import oe from"../label/label.js";import se from"./autoCompletePopover.js";import{getInitialCount as ce}from"./helpers.js";import d from"./inputIcon.js";import f from"./inputInput.js";import{useEffect as le,useId as p,useMemo as m,useState as h}from"react";import{jsx as g,jsxs as _}from"react/jsx-runtime";const v=o.divBox`
+  align-items: center;
+  color: sandstone.10;
+  background-color: white;
+  border-radius: none;
+  border-width: 1px;
+  display: flex;
+  flex-shrink: 0;
+  outline: none;
+  position: relative;
+  transition-duration: 0s;
+  transform: translate3d(0, 0, 0);
+  width: 100%;
+
+  &[aria-disabled='true'] {
+    opacity: 0.5;
+    cursor: not-allowed;
+    background-color: sandstone.79;
+    border-color: sandstone.79;
+  }
+`,y=s((o,s)=>{let{allowClear:y,ariaLabel:b,autoComplete:ue,autoCompleteMaxHeight:de,autoCompleteOptions:x,autoFocus:fe,children:pe,className:S,defaultValue:C,disabled:w,displayValueOnly:me,errorText:T,helpText:E,iconLeft:D,iconRight:O,id:k,input:A,inputProps:j,inputRef:M,itemLeft:N,itemRight:P,label:F,labelMarkOptional:I,labelTooltipText:L,max:R,maxLength:z,min:he,minLength:ge,name:_e,onBlur:ve,onChange:ye,onFocus:be,pattern:xe,placeholder:Se,readOnly:B,required:Ce,showCount:V,size:H=`lg`,state:U=``,stateMapping:we,step:Te,type:Ee=`text`,value:W,variant:G,...De}=o,K=p(),[q,J]=h(ce(o)),[Y,X]=h(C||``),Oe={...ne,...we},Z=k||K,Q=re(`Input`,o),ke=m(()=>t({disabled:w,size:H,variant:G}),[w,H,G]);function $(e){let t=e.target.value,n=z?t.slice(0,z):t;X(n),J(n?.length),ye?.(e)}function Ae(e){$({target:{value:e},type:`autoCompleteSelect`})}function je(){X(``),J(0),$({target:{value:``},type:`onClear`})}let Me=t({"aria-disabled":w,bg:B?`sandstone.97`:void 0,borderColor:B?`sandstone.55`:void 0,focusWithinBorderColor:B?void 0:`transparent`,focusWithinRingColor:B?`transparent`:void 0});return le(()=>{W===void 0&&C!==void 0||(X(W??``),J(W?.toString()?.length?`${W}`.length:0))},[W]),g(ae,{value:ke,children:me?g(l,{className:n(`vui-input-value`,S),size:ee[H],children:W||C}):g(se,{autoCompleteMaxHeight:de,autoCompleteOptions:x,filterAutoCompleteOptions:e=>Y===e?!1:!Y||e.toLowerCase().includes(`${Y}`.toLowerCase()),onAutoCompleteSelect:Ae,children:_(c,{className:`vui-inputContainer`,column:!0,ref:s,...De,children:[e(F)?g(oe,{"aria-disabled":w,className:`vui-inputLabel`,htmlFor:Z,markAsOptional:I,mb:.5,text:F,tooltipText:L,...Q.label}):F,_(v,{className:n(`vui-input`,S),...Q.container,...Me,children:[N,e(D)?g(d,{ml:1,name:D}):D,pe??A??g(f,{ref:M,autoFocus:fe,ariaLabel:b,disabled:w,id:Z,max:R,maxLength:z,min:he,minLength:ge,name:_e,onBlur:ve,onChange:$,onFocus:be,pattern:xe,placeholder:Se,readOnly:B,required:Ce,step:Te,type:Ee,autoComplete:x?.length?`off`:ue,value:Y,...j}),e(O)?g(d,{mr:1,name:O}):O,P,U&&g(d,{mr:1,...Oe[U]?.iconProps}),y&&g(ie,{disabled:!Y,icon:`uiTimes`,mr:.5,onClick:je,size:r[H],title:`Clear`}),V&&_(l,{className:`vui-inputCount`,color:z&&q>z?a.error:a.helpText,position:`absolute`,right:0,size:`sm`,top:`calc(100% + 1px)`,children:[q,` `,z?`/ ${z}`:null]})]}),!!E&&g(u,{size:i[H],children:E}),!!T&&g(u,{isError:!0,mr:V?te:void 0,size:i[H],children:T})]})})})});y.Icon=d,y.Input=f,y.HelpText=u,y.displayName=`Input`;var b=y;export{y as Input,v as InputBase,b as default};globalThis.__vuiVersion__=`3.0.0-beta.6`;
+//# sourceMappingURL=input.js.map

package/dist/input/input.js.map

@@ -0,0 +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  }\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":"w5BA0BA,MAAa,EAAY,EAAO,MAAM;;;;;;;;;;;;;;;;;;;;EA2BzB,EAAQ,GAAwB,EAAO,IAAQ,CAC1D,GAAM,CACJ,aACA,YACA,gBACA,yBACA,sBACA,aACA,YACA,YACA,eACA,WACA,oBACA,YACA,WACA,WACA,YACA,GAAI,EACJ,QACA,aACA,WACA,WACA,YACA,QACA,oBACA,mBACA,MACA,YACA,OACA,aACA,QACA,UACA,SAAU,GACV,WACA,WACA,eACA,WACA,YACA,YACA,OAAO,KACP,QAAQ,GACR,gBACA,QACA,QAAO,OACP,QACA,UACA,GAAG,IACD,EAEE,EAAc,GAAO,CACrB,CAAC,EAAO,GAAY,EAAS,GAAgB,EAAM,CAAC,CACpD,CAAC,EAAe,GAAoB,EAAS,GAAgB,GAAG,CAChE,GAAS,CAAE,GAAG,GAAmB,GAAG,GAAc,CAElD,EAAK,GAAU,EAEf,EAAS,GAAe,QAAS,EAAM,CAEvC,GAAU,MAAc,EAAgB,CAAE,WAAU,OAAM,UAAS,CAAC,CAAE,CAAC,EAAU,EAAM,EAAQ,CAAC,CAEtG,SAAS,EAAS,EAAgB,CAChC,IAAM,EAAa,EAAE,OAAO,MAGtBA,EAAQ,EAAY,EAAW,MAAM,EAAG,EAAU,CAAG,EAE3D,EAAiBA,EAAM,CACvB,EAASA,GAAO,OAAO,CACvB,KAAe,EAAE,CAGnB,SAAS,GAAqB,EAAe,CAE3C,EADU,CAAE,OAAQ,CAAE,MAAA,EAAO,CAAE,KAAM,qBAAsB,CACtB,CAGvC,SAAS,IAAU,CAGjB,EAAiBA,GAAM,CACvB,EAAS,EAAE,CACX,EAHU,CAAE,OAAQ,CAAE,MAAA,GAAO,CAAE,KAAM,UAAW,CAGX,CAGvC,IAAM,GAAe,EAAgB,CACnC,gBAAiB,EACjB,GAAI,EAAW,eAAiB,IAAA,GAChC,YAAa,EAAW,eAAiB,IAAA,GACzC,uBAAyB,EAA2B,IAAA,GAAhB,cACpC,qBAAsB,EAAW,cAAgB,IAAA,GAClD,CAAC,CAWF,OATA,OAAgB,CACV,IAAU,IAAA,IAAa,IAAiB,IAAA,KAC5C,EAAiB,GAAS,GAAG,CAC7B,EAAS,GAAO,UAAU,EAAE,OAAS,GAAG,IAAQ,OAAS,EAAE,GAC1D,CAAC,EAAM,CAAC,CAMT,EAAC,GAAA,CAAc,MAAO,YACnB,GACC,EAAC,EAAA,CAAE,UAAW,EAAG,kBAAmB,EAAU,CAAE,KAAM,GAAyB,YAC5E,GAAS,GACR,CAEJ,EAACC,GAAAA,CACwB,yBACF,sBACM,0BAbA,GACjC,IAAkB,EAAI,GAAQ,CAAC,GAAiB,EAAE,aAAa,CAAC,SAAS,GAAG,IAAgB,aAAa,CAAC,CAa9E,iCAEtB,EAACC,EAAAA,CAAI,UAAU,qBAAqB,OAAA,GAAY,MAAK,GAAI,aACtD,EAAS,EAAM,CACd,EAACC,GAAAA,CACC,gBAAe,EACf,UAAU,iBACV,QAAS,EACT,eAAgB,EAChB,GAAI,GACJ,KAAM,EACN,YAAa,EACb,GAAI,EAAO,OACX,CAEF,EAEF,EAAC,EAAA,CAAU,UAAW,EAAG,YAAa,EAAU,CAAE,GAAI,EAAO,UAAW,GAAI,aACzE,EACA,EAAS,EAAS,CAAG,EAACC,EAAAA,CAAU,GAAI,EAAG,KAAM,GAAY,CAAG,EAC5D,IAAY,GACX,EAACC,EAAAA,CACC,IAAK,EAEH,aACA,YACA,WACA,KACA,MACA,YACA,OACA,aACA,QACA,UACA,WACA,WACA,WACA,eACA,WACA,YACA,QACA,QAEF,aAAc,GAAqB,OAAS,MAAQ,GACpD,MAAO,EACP,GAAI,GACJ,CAEH,EAAS,EAAU,CAAG,EAACD,EAAAA,CAAU,GAAI,EAAG,KAAM,GAAa,CAAG,EAC9D,EACA,GAAS,EAACA,EAAAA,CAAU,GAAI,EAAG,GAAI,GAAO,IAAQ,WAAa,CAC3D,GACC,EAAC,GAAA,CACC,SAAU,CAAC,EACX,KAAK,UACL,GAAI,GACJ,QAAS,GACT,KAAM,EAAc,GACpB,MAAM,SACN,CAEH,GACC,EAAC,EAAA,CACC,UAAU,iBACV,MAAO,GAAa,EAAQ,EAAY,EAAY,MAAQ,EAAY,SACxE,SAAS,WACT,MAAO,EACP,KAAK,KACL,IAAI,6BAEH,EAAM,IAAE,EAAY,KAAK,IAAc,OACtC,GAEI,CACX,CAAC,CAAC,GAAY,EAACE,EAAAA,CAAS,KAAM,EAAa,YAAQ,GAAoB,CACvE,CAAC,CAAC,GACD,EAACA,EAAAA,CAAS,QAAA,GAAQ,GAAI,EAAY,GAAiB,IAAA,GAAW,KAAM,EAAa,YAC9E,GACQ,GAET,EACc,EAEV,EAElB,CAMF,EAAM,KAAOF,EACb,EAAM,MAAQC,EACd,EAAM,SAAWC,EACjB,EAAM,YAAc,QAEpB,IAAA,EAAe"}

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

@@ -0,0 +1,115 @@
+import { ChangeEventHandler, FocusEventHandler, PropsOf } from "../utils/types.js";
+import { ThemingProps } from "../theme/types.js";
+import { SystemProps } from "../system/system.js";
+import { IconProp, IconProps } from "../icon/icon.types.js";
+import { PProps } from "../p/p.types.js";
+
+//#region src/input/input.types.d.ts
+type InputInputProps = PropsOf<'input', SystemProps>;
+type InputProps = SystemProps & ThemingProps<'Input'> & {
+  /** Allow to remove input content with clear icon. */
+  allowClear?: boolean;
+  /** Passed to the inner input. */
+  autoComplete?: string;
+  /** List of autocomplete options. */
+  autoCompleteOptions?: string[];
+  /** Maximum autoComplete container height in px. */
+  autoCompleteMaxHeight?: number;
+  /** Passed to the inner input. */
+  autoFocus?: boolean;
+  /** ARIA label for the input element. */
+  ariaLabel?: string;
+  /** Deprecated. Please use variant instead. @deprecated  */
+  colorScheme?: 'green' | 'grey' | 'red';
+  /** Passed to the inner input. */
+  defaultValue?: number | string;
+  /** Passed to the inner input. */
+  disabled?: boolean;
+  /** Socket displaying error text below an input. */
+  errorText?: string | React.ReactNode;
+  /** Socket displaying help text below an input. */
+  helpText?: React.ReactNode | string;
+  /** Socket displaying an icon on the left. */
+  iconLeft?: IconProp | JSX.Element;
+  /** Socket displaying an icon on the right. */
+  iconRight?: IconProp | JSX.Element;
+  /** Socket rendering a custom input element. */
+  input?: React.ReactNode;
+  /** Props object passed to the inner input. */
+  inputProps?: InputInputProps;
+  /** Ref passed to the inner input. */
+  inputRef?: React.MutableRefObject<HTMLInputElement | null> | null;
+  /** Deprecated. Please use variant="red" and/or state="error" instead. @deprecated*/
+  isInvalid?: boolean;
+  /** Socket displaying a custom element on the left. */
+  itemLeft?: React.ReactNode;
+  /** Socket displaying a custom element on the right. */
+  itemRight?: React.ReactNode;
+  /** The label. */
+  label?: string | React.ReactNode;
+  /** Should the label indicates that the field is optional */
+  labelMarkOptional?: boolean;
+  /** Adds a tooltip with the text inside the label */
+  labelTooltipText?: string;
+  /** Passed to the inner input. */
+  max?: number | string;
+  /** Passed to the inner input. */
+  maxLength?: number;
+  /** Passed to the inner input. */
+  min?: number | string;
+  /** Passed to the inner input. */
+  minLength?: number;
+  /** Passed to the inner input. */
+  name?: string;
+  /** Passed to the inner input. */
+  onBlur?: FocusEventHandler;
+  /** Passed to the inner input. */
+  onChange?: ChangeEventHandler;
+  /** Passed to the inner input. */
+  onFocus?: FocusEventHandler;
+  /** Passed to the inner input. */
+  pattern?: string;
+  /** Passed to the inner input. */
+  placeholder?: string;
+  /** Passed to the inner input. */
+  readOnly?: boolean;
+  /** Passed to the inner input. */
+  required?: boolean;
+  /** Displays length of input value if also using maxLength. */
+  showCount?: boolean;
+  /** Displays the provided value. */
+  displayValueOnly?: boolean;
+  /** Modifies Input style and content based on the given state. */
+  state?: InputState;
+  /** Object definition of styles and content for each state. */
+  stateMapping?: InputStateMapping;
+  /** Passed to the inner input. */
+  step?: number;
+  /** Passed to the inner input. */
+  type?: InputType;
+  /** Passed to the inner input. */
+  value?: number | string;
+};
+type AutoCompletePopoverProps = {
+  /** List of autocomplete options. */
+  autoCompleteOptions?: string[];
+  /** Maximum autoComplete container height in px. */
+  autoCompleteMaxHeight?: number;
+  /** The input children. */
+  children: JSX.Element;
+  /** Filter helper function. */
+  filterAutoCompleteOptions: (value: string, index: number, array: string[]) => boolean;
+  onAutoCompleteSelect: (value: string) => void;
+};
+type HelpTextProps = PProps & {
+  isError?: boolean;
+};
+type InputState = 'default' | 'error' | 'loading' | 'success';
+type InputStateMapping = Record<string, {
+  variant?: InputProps['variant'];
+  iconProps: IconProps;
+}>;
+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

@@ -0,0 +1 @@
+{"version":3,"file":"input.types.d.ts","names":[],"sources":["../../src/input/input.types.ts"],"sourcesContent":[],"mappings":";;;;;;;KAMY,eAAA,GAAkB,iBAAiB;KACnC,UAAA,GAAa,cACvB;EAFU;EAAe,UAAA,CAAA,EAAA,OAAA;;cAAG,CAAA,EAAA,MAAA;EAAO;EACzB,mBAAU,CAAA,EAAA,MAAA,EAAA;EAAA;uBAAG,CAAA,EAAA,MAAA;;WAqBM,CAAA,EAAA,OAAA;;WAIhB,CAAA,EAAA,MAAA;;aAEC,CAAA,EAAA,OAAA,GAAA,MAAA,GAAA,KAAA;;cAEE,CAAA,EAAA,MAAA,GAAA,MAAA;;UAIoB,CAAA,EAAA,OAAA;;WAIjB,CAAA,EAAA,MAAA,GAhBI,KAAA,CAAM,SAgBV;;UAIA,CAAM,EAlBZ,KAAA,CAAM,SAkBM,GAAA,MAAA;;UAkBZ,CAAA,EAlCA,QAkCA,GAlCW,GAAA,CAAI,OAkCf;;WAgBH,CAAA,EAhDI,QAgDJ,GAhDe,GAAA,CAAI,OAgDnB;;OAMD,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;EAAiB,SAAA,CAAA,EAAA,OAAA;;UAId,CAAA,EAvEA,KAAA,CAAM,SAuEN;;EAJuB,SAAA,CAAA,EAjEtB,KAAA,CAAM,SAiEgB;EAQ1B;mBAvES,KAAA,CAAM;;;;;;;;;;;;;;;;WAgBd;;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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"inputIcon.d.ts","names":[],"sources":["../../src/input/inputIcon.tsx"],"sourcesContent":[],"mappings":";;;;;cAQa,+BAAS"}

package/dist/input/inputIcon.js

@@ -0,0 +1,2 @@
+import{cs as e}from"../utils/styles.js";import{inputColors as t}from"./consts.js";import{useStyleConfig as n}from"../core/theme.js";import{vui as r}from"../core/vui.js";import i from"../icon/icon.js";import{useInputContext as a}from"./context.js";import{jsx as o}from"react/jsx-runtime";const s=r((r,s)=>{let{className:c,...l}=r,u={...a(),...r},d=n(`Input`,u),f=u.disabled?t.placeholder:t.icons;return o(i,{className:e(`vui-inputIcon`,c),color:f,ref:s,...d.icon,...l})});s.displayName=`InputIcon`;var c=s;export{s as InputIcon,c as default};globalThis.__vuiVersion__=`3.0.0-beta.6`;
+//# sourceMappingURL=inputIcon.js.map

package/dist/input/inputIcon.js.map

@@ -0,0 +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 { inputColors } from './consts'\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  const color = !mergedProps.disabled ? inputColors.icons : inputColors.placeholder\n\n  return <Icon className={cs('vui-inputIcon', className)} color={color} ref={ref} {...styles.icon} {...rest} />\n})\n\nInputIcon.displayName = 'InputIcon'\n\nexport default InputIcon\n"],"mappings":"+RAQA,MAAa,EAAY,GAAuB,EAAO,IAAQ,CAC7D,GAAM,CAAE,YAAW,GAAG,GAAS,EAEzB,EAAc,CAAE,GADH,GAAiB,CACC,GAAG,EAAO,CACzC,EAAS,EAAe,QAAS,EAAY,CAE7C,EAAS,EAAY,SAA+B,EAAY,YAAhC,EAAY,MAElD,OAAO,EAACA,EAAAA,CAAK,UAAW,EAAG,gBAAiB,EAAU,CAAS,QAAY,MAAK,GAAI,EAAO,KAAM,GAAI,GAAQ,EAC7G,CAEF,EAAU,YAAc,YAExB,IAAA,EAAe"}

package/dist/input/inputInput.d.ts

@@ -0,0 +1,11 @@
+import { VuiComponent } from "../core/vui.js";
+import { InputInputProps } from "./input.types.js";
+import * as styled_components373 from "styled-components";
+
+//#region src/input/inputInput.d.ts
+declare const InputInputBase: styled_components373.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.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"inputInput.d.ts","names":[],"sources":["../../src/input/inputInput.tsx"],"sourcesContent":[],"mappings":";;;;;cAKa,gBAgBZ,oBAAA,CAhB0B;;cAmBd,kCAAU"}

package/dist/input/inputInput.js

@@ -0,0 +1,18 @@
+import{filterUndefined as e}from"../utils/object.js";import{cs as t}from"../utils/styles.js";import{useStyleConfig as n}from"../core/theme.js";import{styled as r}from"../core/styled.js";import{vui as i}from"../core/vui.js";import{useInputContext as a}from"./context.js";import{jsx as o}from"react/jsx-runtime";const s=r.input`
+  align-self: stretch;
+  color: sandstone.10;
+  background-color: transparent;
+  border: none;
+  border-radius: none;
+  flex: 1;
+  font-size: inherit;
+  min-width: 0;
+  outline: none;
+  padding: 0 1;
+
+  &[aria-disabled='true'],
+  &[aria-disabled='true']::placeholder {
+    cursor: not-allowed;
+  }
+`,c=i((r,i)=>{let{className:c,autoComplete:l,...u}=r,d={...a(),...r},f=n(`Input`,d),p=e({"aria-disabled":d.disabled,"aria-label":d.ariaLabel});return o(s,{autoComplete:l,className:t(`vui-inputInput`,c),ref:i,...f.input,...p,...u})});c.displayName=`InputInput`;var l=c;export{c as InputInput,s as InputInputBase,l as default};globalThis.__vuiVersion__=`3.0.0-beta.6`;
+//# sourceMappingURL=inputInput.js.map

package/dist/input/inputInput.js.map

@@ -0,0 +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":"sTAKA,MAAa,EAAiB,EAAO,KAAK;;;;;;;;;;;;;;;;EAmB7B,EAAa,GAA+B,EAAO,IAAQ,CACtE,GAAM,CAAE,YAAW,eAAc,GAAG,GAAS,EAEvC,EAAc,CAAE,GADH,GAAiB,CACC,GAAG,EAAO,CACzC,EAAS,EAAe,QAAS,EAAY,CAC7C,EAAe,EAAgB,CACnC,gBAAiB,EAAY,SAC7B,aAAc,EAAY,UAC3B,CAAC,CAEF,OACE,EAAC,EAAA,CACe,eACd,UAAW,EAAG,iBAAkB,EAAU,CACrC,MACL,GAAI,EAAO,MACX,GAAI,EACJ,GAAI,GACJ,EAEJ,CAEF,EAAW,YAAc,aAEzB,IAAA,EAAe"}

package/dist/input/theme.js

@@ -0,0 +1,2 @@
+import{inputColors as e}from"./consts.js";const t={container:{focusWithinRing:3,color:e.inputText},input:{placeholderTextColor:e.placeholder}},n={size:`lg`,variant:`grey`},r=[`container`,`icon`,`input`,`label`],i={sm:{container:{fontSize:`xs`,h:24},icon:{size:`xs`},input:{},label:{fontSize:`xs`}},md:{container:{fontSize:`sm`,h:32},icon:{size:`sm`},input:{},label:{fontSize:`sm`}},lg:{container:{fontSize:`md`,h:40},icon:{size:`md`},input:{},label:{fontSize:`md`}},xl:{container:{fontSize:`lg`,h:48},icon:{size:`md`},input:{},label:{fontSize:`lg`}}},a={grey:{container:{borderColor:e.border,focusWithinRingColor:e.focus}},green:{container:{borderColor:e.success,focusWithinRingColor:e.success}},red:{container:{borderColor:e.error,focusWithinRingColor:e.error}}};var o={baseStyle:t,defaultProps:n,parts:r,sizes:i,variants:a};export{o as default};globalThis.__vuiVersion__=`3.0.0-beta.6`;
+//# sourceMappingURL=theme.js.map

package/dist/input/theme.js.map

@@ -0,0 +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":"0CAEA,MAAM,EAAY,CAChB,UAAW,CACT,gBAAiB,EACjB,MAAO,EAAY,UACpB,CACD,MAAO,CACL,qBAAsB,EAAY,YACnC,CACF,CAEK,EAAe,CACnB,KAAM,KACN,QAAS,OACV,CAEK,EAAQ,CAAC,YAAa,OAAQ,QAAS,QAAQ,CAE/C,EAAQ,CACZ,GAAI,CACF,UAAW,CACT,SAAU,KACV,EAAG,GACJ,CACD,KAAM,CACJ,KAAM,KACP,CACD,MAAO,EAAE,CACT,MAAO,CACL,SAAU,KACX,CACF,CACD,GAAI,CACF,UAAW,CACT,SAAU,KACV,EAAG,GACJ,CACD,KAAM,CACJ,KAAM,KACP,CACD,MAAO,EAAE,CACT,MAAO,CACL,SAAU,KACX,CACF,CACD,GAAI,CACF,UAAW,CACT,SAAU,KACV,EAAG,GACJ,CACD,KAAM,CACJ,KAAM,KACP,CACD,MAAO,EAAE,CACT,MAAO,CACL,SAAU,KACX,CACF,CACD,GAAI,CACF,UAAW,CACT,SAAU,KACV,EAAG,GACJ,CACD,KAAM,CACJ,KAAM,KACP,CACD,MAAO,EAAE,CACT,MAAO,CACL,SAAU,KACX,CACF,CACF,CAEK,EAAW,CACf,KAAM,CACJ,UAAW,CACT,YAAa,EAAY,OACzB,qBAAsB,EAAY,MACnC,CACF,CACD,MAAO,CACL,UAAW,CACT,YAAa,EAAY,QACzB,qBAAsB,EAAY,QACnC,CACF,CACD,IAAK,CACH,UAAW,CACT,YAAa,EAAY,MACzB,qBAAsB,EAAY,MACnC,CACF,CACF,CAED,IAAA,EAAe,CACb,YACA,eACA,QACA,QACA,WACD"}

package/dist/label/label.d.ts

@@ -0,0 +1,12 @@
+import { SystemProps } from "../system/system.js";
+import { VuiComponent } from "../core/vui.js";
+import { LabelProps } from "./label.types.js";
+import * as styled_components406 from "styled-components";
+
+//#region src/label/label.d.ts
+declare const LabelBase: styled_components406.StyledComponent<"label", styled_components406.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

@@ -0,0 +1 @@
+{"version":3,"file":"label.d.ts","names":[],"sources":["../../src/label/label.tsx"],"sourcesContent":[],"mappings":";;;;;;cAOa,WAAS,oBAAA,CAAA,yBAUrB,oBAAA,CAVqB,YAAA;;cAaT,6BAAK"}

package/dist/label/label.js

@@ -0,0 +1,12 @@
+import{cs as e}from"../utils/styles.js";import{omitThemingProps as t,useStyleConfig as n}from"../core/theme.js";import{styled as r}from"../core/styled.js";import{vui as i}from"../core/vui.js";import a from"../icon/icon.js";import o from"../t/t.js";import s from"../tooltip/tooltip.js";import{Fragment as c,jsx as l,jsxs as u}from"react/jsx-runtime";const d=r.labelBox`
+  display: block;
+  color: darkBlue.main;
+  font-weight: 600;
+  width: 100%;
+
+  &[aria-disabled='true'] {
+    color: sandstone.75;
+    cursor: not-allowed;
+  }
+`,f=i((r,i)=>{let{children:f,className:p,markAsOptional:m,tooltipText:h,text:g,fontSize:_,...v}=t(r),y=n(`Label`,r),b=g&&!m&&!h&&!f;return l(o,{as:d,className:e(`vui-label`,p),fontSize:_,ref:i,...v,children:f??(b?g:u(c,{children:[l(o,{fontSize:_,children:g}),!!m&&l(o,{fontSize:_,...y.helper,children:`(optional)`}),!!h&&l(o,{fontSize:_,...y.helper,children:l(s,{text:h,children:l(a,{mb:_===`xs`?`-6px`:`-5px`,name:`uiInfoCircle`,role:`button`,size:`sm`})})})]}))})});f.displayName=`Label`;var p=f;export{f as Label,d as LabelBase,p as default};globalThis.__vuiVersion__=`3.0.0-beta.6`;
+//# sourceMappingURL=label.js.map

package/dist/label/label.js.map

@@ -0,0 +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":"6VAOA,MAAa,EAAY,EAAO,QAAQ;;;;;;;;;;EAa3B,EAAQ,GAA0B,EAAO,IAAQ,CAC5D,GAAM,CAAE,WAAU,YAAW,iBAAgB,cAAa,OAAM,WAAU,GAAG,GAAS,EAAiB,EAAM,CACvG,EAAS,EAAe,QAAS,EAAM,CAEvC,EAAa,GAAQ,CAAC,GAAkB,CAAC,GAAe,CAAC,EAE/D,OACE,EAACA,EAAAA,CAAE,GAAI,EAAW,UAAW,EAAG,YAAa,EAAU,CAAY,WAAe,MAAK,GAAI,WACxF,IACE,EACC,EAEA,EAAA,EAAA,CAAA,SAAA,CACE,EAACA,EAAAA,CAAY,oBAAW,GAAS,CAChC,CAAC,CAAC,GACD,EAACA,EAAAA,CAAY,WAAU,GAAI,EAAO,gBAAQ,cAEtC,CAEL,CAAC,CAAC,GACD,EAACA,EAAAA,CAAY,WAAU,GAAI,EAAO,gBAChC,EAACC,EAAAA,CAAQ,KAAM,WACb,EAACC,EAAAA,CAAK,GAAI,IAAa,KAAO,OAAS,OAAQ,KAAK,eAAe,KAAK,SAAS,KAAK,MAAO,EACrF,EACR,GAEL,GAEL,EAEN,CAEF,EAAM,YAAc,QACpB,IAAA,EAAe"}

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

@@ -0,0 +1,15 @@
+import { ThemingProps } from "../theme/types.js";
+import { SystemProps } from "../system/system.js";
+
+//#region src/label/label.types.d.ts
+type LabelProps = SystemProps & ThemingProps<'P'> & {
+  /** Displays given text, if no children are provided. */
+  text?: string;
+  /** Displays an optional indication, if text is provided too. */
+  markAsOptional?: boolean;
+  /** Displays a tooltip with this text, if text is provided too. */
+  tooltipText?: string;
+};
+//#endregion
+export { LabelProps };
+//# sourceMappingURL=label.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"label.types.d.ts","names":[],"sources":["../../src/label/label.types.ts"],"sourcesContent":[],"mappings":";;;;KAGY,UAAA,GAAa,cACvB;;EADU,IAAA,CAAA,EAAA,MAAU;EAAA;gBAAG,CAAA,EAAA,OAAA;;EACX,WAAA,CAAA,EAAA,MAAA"}

package/dist/label/theme.js

@@ -0,0 +1,2 @@
+var e={baseStyle:{helper:{ml:`8px`,fontWeight:400}},defaultProps:{},parts:[`helper`],sizes:{},variants:{}};export{e as default};globalThis.__vuiVersion__=`3.0.0-beta.6`;
+//# sourceMappingURL=theme.js.map

package/dist/label/theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.js","names":[],"sources":["../../src/label/theme.ts"],"sourcesContent":["const baseStyle = {\n  helper: {\n    ml: '8px',\n    fontWeight: 400,\n  },\n}\n\nconst defaultProps = {}\n\nconst sizes = {}\n\nconst variants = {}\n\nconst parts = ['helper']\n\nexport default {\n  baseStyle,\n  defaultProps,\n  parts,\n  sizes,\n  variants,\n}\n"],"mappings":"AAeA,IAAA,EAAe,CACb,UAhBgB,CAChB,OAAQ,CACN,GAAI,MACJ,WAAY,IACb,CACF,CAYC,aAVmB,EAAE,CAWrB,MALY,CAAC,SAAS,CAMtB,MAVY,EAAE,CAWd,SATe,EAAE,CAUlB"}

package/dist/link/context.js

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

package/dist/link/context.js.map

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

package/dist/link/link.d.ts

@@ -0,0 +1,33 @@
+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 { LinkProps } from "./link.types.js";
+import { LinkIcon } from "./linkIcon.js";
+import { LinkText } from "./linkText.js";
+import * as styled_components408 from "styled-components";
+
+//#region src/link/link.d.ts
+declare const LinkBase: styled_components408.StyledComponent<"a", styled_components408.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> & {
+  Icon: typeof LinkIcon;
+  Text: typeof LinkText;
+};
+//#endregion
+export { Link, LinkBase };
+//# sourceMappingURL=link.d.ts.map

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

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

package/dist/link/link.js

@@ -0,0 +1,40 @@
+import{isReactText as e,isString as t}from"../utils/assertion.js";import{filterUndefined as n}from"../utils/object.js";import{cs as r}from"../utils/styles.js";import{useStyleConfig as i}from"../core/theme.js";import{styled as a}from"../core/styled.js";import{vui as o}from"../core/vui.js";import s from"../t/t.js";import{LinkProvider as c}from"./context.js";import l from"./linkIcon.js";import u from"./linkText.js";import{useMemo as d}from"react";import{jsx as f,jsxs as p}from"react/jsx-runtime";const m=a.aBox.attrs(e=>({isUnderlined:e.isUnderlined||!1}))`
+  ${`
+  @keyframes linkSwipe {
+    from {
+      background-size: 0 1px;
+    }
+    to {
+      background-size: 100% 1px;
+    }
+  }
+`}
+  display: inline;
+  cursor: pointer;
+  position: relative;
+  line-height: 1.5;
+  outline: none;
+  width: fit-content;
+  text-decoration: none;
+
+  &:not(.vui-linkNoUnderline) > .vui-t {
+    position: relative;
+    background: linear-gradient(to right, currentcolor, currentcolor);
+    background-size: ${({isUnderlined:e})=>e?`100% 1px`:`0 1px`};
+    background-position: 0 100%;
+    background-repeat: no-repeat;
+    text-decoration: none;
+    padding-bottom: 2px;
+    line-height: 1.2;
+  }
+
+  &:not(.vui-linkNoUnderline) .vui-linkIcon {
+    margin-bottom: 2px;
+  }
+
+  &:hover > .vui-t {
+    animation: ${({isUnderlined:e})=>e?`none`:`linkSwipe 0.3s ease forwards`};
+    background-size: ${({isUnderlined:e})=>e?`100% 2px`:`100% 1px`};
+  }
+`,h=o((a,o)=>{let{children:h,className:g,fontWeight:_,iconLeft:v,iconRight:y,isExternal:b,isUnderlined:x,size:S,text:C,variant:w,weight:T,...E}=a,D=i(`Link`,a),O=d(()=>n({size:S,variant:w}),[S,w]),k=n({fontWeight:T||_,rel:b?`noopener`:void 0,target:b?`_blank`:void 0});return f(c,{value:O,children:p(m,{alignItems:v||y?`center`:void 0,className:r(`vui-link`,g),display:v||y?`inline-flex`:`inline`,focusRing:2,isUnderlined:x,ref:o,...D.container,...k,...E,children:[t(v)?f(l,{mr:1,name:v}):v,h?f(s,{fontSize:`inherit`,children:h}):e(C)&&f(u,{text:C}),t(y)?f(l,{ml:1,name:y}):y]})})});h.Icon=l,h.Text=u,h.displayName=`Link`;var g=h;export{h as Link,m as LinkBase,g as default};globalThis.__vuiVersion__=`3.0.0-beta.6`;
+//# sourceMappingURL=link.js.map

package/dist/link/link.js.map

@@ -0,0 +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":"kfAWA,MAWa,EAAW,EAAO,KAAK,MAAO,IAAsB,CAC/D,aAAc,EAAM,cAAgB,GACrC,EAAE;IACC;;;;;;;;;EAAmB;;;;;;;;;;;;wBAYC,CAAE,kBAAoB,EAAe,WAAa,QAAS;;;;;;;;;;;;;kBAajE,CAAE,kBAAoB,EAAe,OAAS,+BAAgC;wBACxE,CAAE,kBAAoB,EAAe,WAAa,WAAY;;EAIzE,EAAO,GAAqB,EAAO,IAAQ,CACtD,GAAM,CACJ,WACA,YACA,aACA,WACA,YACA,aACA,eACA,OACA,OACA,UACA,SACA,GAAG,GACD,EAEE,EAAS,EAAe,OAAQ,EAAM,CACtC,EAAU,MAAc,EAAgB,CAAE,OAAM,UAAS,CAAC,CAAE,CAAC,EAAM,EAAQ,CAAC,CAE5E,EAAe,EAAgB,CACnC,WAAY,GAAU,EACtB,IAAK,EAAa,WAAa,IAAA,GAC/B,OAAQ,EAAa,SAAW,IAAA,GACjC,CAAC,CAEF,OACE,EAAC,EAAA,CAAa,MAAO,WACnB,EAAC,EAAA,CACC,WAAY,GAAY,EAAY,SAAW,IAAA,GAC/C,UAAW,EAAG,WAAY,EAAU,CACpC,QAAS,GAAY,EAAY,cAAgB,SACjD,UAAW,EACG,eACT,MACL,GAAI,EAAO,UACX,GAAI,EACJ,GAAI,YAEH,EAAS,EAAS,CAAG,EAACA,EAAAA,CAAS,GAAI,EAAG,KAAM,GAAY,CAAG,EAC3D,EAAW,EAACC,EAAAA,CAAE,SAAU,UAAY,YAAa,CAAG,EAAY,EAAK,EAAI,EAACC,EAAAA,CAAe,OAAA,CAAQ,CACjG,EAAS,EAAU,CAAG,EAACF,EAAAA,CAAS,GAAI,EAAG,KAAM,GAAa,CAAG,IACrD,EACE,EAEjB,CAKF,EAAK,KAAOA,EACZ,EAAK,KAAOE,EACZ,EAAK,YAAc,OAEnB,IAAA,EAAe"}

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

@@ -0,0 +1,31 @@
+import { ThemingProps } from "../theme/types.js";
+import { TypographyProps } from "../system/typography.js";
+import { SystemProps } from "../system/system.js";
+import { IconProp } from "../icon/icon.types.js";
+
+//#region src/link/link.types.d.ts
+type LinkProps = SystemProps & ThemingProps<'Link'> & {
+  /** Deprecated. Please use variant instead. @deprecated  */
+  colorScheme?: 'blue' | 'white';
+  /** Alias for textDecoration prop. @deprecated */
+  decoration?: TypographyProps['textDecoration'];
+  /** Alias for hoverTextDecoration prop. @deprecated */
+  hoverDecoration?: TypographyProps['textDecoration'];
+  /** Href attribute value for the a tag. */
+  href?: string;
+  /** Socket displaying an icon on the left. */
+  iconLeft?: IconProp | JSX.Element;
+  /** Socket displaying an icon on the right. */
+  iconRight?: IconProp | JSX.Element;
+  /** Opens the link in new tab with appropriate attributes. */
+  isExternal?: boolean;
+  /** Displays permanent underline. Should be used for inline links within text. */
+  isUnderlined?: boolean;
+  /** Socket displaying text within the Link. */
+  text?: number | string | JSX.Element;
+  /** Alias for fontWeight prop. @deprecated */
+  weight?: TypographyProps['fontWeight'];
+};
+//#endregion
+export { LinkProps };
+//# sourceMappingURL=link.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"link.types.d.ts","names":[],"sources":["../../src/link/link.types.ts"],"sourcesContent":[],"mappings":";;;;;;KAIY,SAAA,GAAY,cACtB;;;EADU;EAAS,UAAA,CAAA,EAKJ,eALI,CAAA,gBAAA,CAAA;;iBACnB,CAAA,EAMoB,eANpB,CAAA,gBAAA,CAAA;;MAMoB,CAAA,EAAA,MAAA;;UAIQ,CAAA,EAAf,QAAe,GAAJ,GAAA,CAAI,OAAA;;WAEC,CAAA,EAAf,QAAe,GAAJ,GAAA,CAAI,OAAA;;YAQlB,CAAA,EAAA,OAAA;EAAe;;;2BAFC,GAAA,CAAI;;WAEpB"}

package/dist/link/linkIcon.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"linkIcon.d.ts","names":[],"sources":["../../src/link/linkIcon.tsx"],"sourcesContent":[],"mappings":";;;;;cAOa,8BAAQ"}

package/dist/link/linkIcon.js

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