@traefik-labs/faency 12.2.0 → 12.2.2

package/dist/components/Input/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sources":["../../../components/Input/Input.tsx"],"sourcesContent":["import React from 'react';\n\nimport { CSS, styled, VariantProps } from '../../stitches.config';\nimport { elevationVariants } from '../Elevation';\n\n// CONSTANTS\nconst FOCUS_SHADOW = elevationVariants[1].boxShadow; // apply elevation $1 when focus\n\nconst SMALL_HEIGHT = '$5';\nconst MEDIUM_HEIGHT = '$6';\nconst LARGE_HEIGHT = '$7';\n\nconst StyledInput = styled('input', {\n  // Reset\n  appearance: 'none',\n  borderWidth: '0',\n  boxSizing: 'border-box',\n  fontFamily: '$rubik',\n  margin: '0',\n  outline: 'none',\n  padding: '0',\n  width: '100%',\n  WebkitTapHighlightColor: 'rgba(0,0,0,0)',\n\n  // Custom\n  position: 'relative',\n  backgroundColor: 'transparent',\n  borderRadius: 'inherit', // inherit border radius from InputWrapper\n  boxShadow: 'inset 0 0 0 1px $colors$inputBorder',\n  color: '$inputText',\n  fontVariantNumeric: 'tabular-nums',\n  transition: 'box-shadow .1s ease-in-out',\n\n  '&[type=\"number\"]': {\n    pr: '0', // remove padding for number native controls\n  },\n\n  '&:-webkit-autofill,&:autofill': {\n    boxShadow: 'inset 0 0 0 1px $colors$inputBorder, inset 0 0 0 100px $colors$inputBg',\n  },\n\n  '&:-webkit-autofill::first-line,&:autofill::first-line': {\n    fontFamily: '$rubik',\n    color: '$hiContrast',\n  },\n\n  '&:focus-visible': {\n    boxShadow: `inset 0 0 0 2px $colors$inputFocusBorder, ${FOCUS_SHADOW}`,\n  },\n\n  '&::placeholder': {\n    color: '$inputPlaceholder',\n  },\n\n  '&:read-only:not(:disabled)': {\n    boxShadow: 'none',\n  },\n\n  '&:disabled': {\n    pointerEvents: 'none',\n    color: '$inputDisabledText',\n  },\n\n  variants: {\n    size: {\n      small: {\n        height: SMALL_HEIGHT,\n        fontSize: '$1',\n        px: '$2',\n        lineHeight: '$sizes$5',\n        '&:-webkit-autofill::first-line,&:autofill::first-line': {\n          fontSize: '$1',\n        },\n      },\n      medium: {\n        height: MEDIUM_HEIGHT,\n        fontSize: '$3',\n        px: '$3',\n        lineHeight: '$sizes$6',\n        '&:-webkit-autofill::first-line,&:autofill::first-line': {\n          fontSize: '$3',\n        },\n      },\n      large: {\n        height: LARGE_HEIGHT,\n        fontSize: '$3',\n        px: '$3',\n        lineHeight: '$sizes$7',\n        '&:-webkit-autofill::first-line,&:autofill::first-line': {\n          fontSize: '$3',\n        },\n      },\n    },\n    startAdornment: {\n      true: {},\n    },\n    endAdornment: {\n      true: {},\n    },\n    variant: {\n      ghost: {\n        boxShadow: 'none',\n        '&:disabled': {\n          boxShadow: 'none',\n        },\n        backgroundColor: 'transparent',\n        '&:focus-visible': {\n          backgroundColor: '$loContrast',\n        },\n      },\n    },\n    state: {\n      invalid: {\n        boxShadow: 'inset 0 0 0 1px $colors$inputInvalidBorder',\n        '&:focus-visible': {\n          boxShadow: `inset 0 0 0 2px $colors$inputInvalidBorder, ${FOCUS_SHADOW}`,\n        },\n      },\n    },\n    cursor: {\n      default: {\n        cursor: 'default',\n        '@hover': {\n          '&:hover:not(:read-only)': {\n            cursor: 'text',\n          },\n        },\n        '&:focus-visible:not(:read-only)': {\n          cursor: 'text',\n        },\n      },\n      text: {\n        cursor: 'text',\n      },\n    },\n  },\n  defaultVariants: {\n    size: 'medium',\n    cursor: 'default',\n  },\n  compoundVariants: [\n    {\n      variant: 'ghost',\n      state: 'invalid',\n      css: {\n        boxShadow: 'inset 0 0 0 1px $colors$inputInvalidBorder',\n      },\n    },\n    {\n      startAdornment: true,\n      size: 'small',\n      css: {\n        paddingInlineStart: 'calc($2 + 15px)',\n      },\n    },\n    {\n      startAdornment: true,\n      size: 'medium',\n      css: {\n        paddingInlineStart: 'calc($3 + 15px)',\n      },\n    },\n    {\n      startAdornment: true,\n      size: 'large',\n      css: {\n        paddingInlineStart: 'calc($3 + 15px)',\n      },\n    },\n    {\n      endAdornment: true,\n      size: 'small',\n      css: {\n        paddingInlineEnd: 'calc($2 + 15px)',\n      },\n    },\n    {\n      endAdornment: true,\n      size: 'medium',\n      css: {\n        paddingInlineEnd: 'calc($3 + 15px)',\n      },\n    },\n    {\n      endAdornment: true,\n      size: 'large',\n      css: {\n        paddingInlineEnd: 'calc($3 + 15px)',\n      },\n    },\n    {\n      endAdornment: true,\n      size: 'small',\n      state: 'invalid',\n      css: {\n        paddingInlineEnd: 'calc($4 + 30px)', // size padding + adornment margins + icon size + icon size\n      },\n    },\n    {\n      endAdornment: true,\n      size: 'medium',\n      state: 'invalid',\n      css: {\n        paddingInlineEnd: 'calc($6 + 30px)', // size padding + adornment margins + icon size + icon size\n      },\n    },\n    {\n      endAdornment: true,\n      size: 'large',\n      state: 'invalid',\n      css: {\n        paddingInlineEnd: 'calc($6 + 30px)', // size padding + adornment margins + icon size + icon size\n      },\n    },\n  ],\n});\n\nconst InputWrapper = styled('div', {\n  // Reset\n  outline: 'none',\n  lineHeight: 0,\n\n  position: 'relative',\n  backgroundColor: '$inputBg',\n  color: '$inputPlaceholder',\n\n  '&::before': {\n    boxSizing: 'border-box',\n    content: '\"\"',\n    position: 'absolute',\n    inset: 0,\n    pointerEvents: 'none',\n  },\n  '&::after': {\n    boxSizing: 'border-box',\n    content: '\"\"',\n    position: 'absolute',\n    inset: 0,\n    pointerEvents: 'none',\n  },\n\n  '&:focus-visible': {\n    '&::before': {\n      backgroundColor: '$inputFocusBg',\n    },\n    '&::after': {\n      backgroundColor: '$primary',\n      opacity: 0.15,\n    },\n  },\n\n  '@hover': {\n    '&:hover': {\n      '&::before': {\n        backgroundColor: '$inputHoverBg',\n      },\n      '&::after': {\n        backgroundColor: '$primary',\n        opacity: 0.05,\n      },\n    },\n  },\n\n  variants: {\n    disabled: {\n      true: {\n        opacity: 0.7,\n        color: '$inputDisabledText',\n        '@hover': {\n          '&:hover': {\n            '&::before': {\n              backgroundColor: 'inherit',\n            },\n            '&::after': {\n              backgroundColor: 'inherit',\n            },\n          },\n        },\n      },\n    },\n    state: {\n      invalid: {\n        '@hover': {\n          '&:hover': {\n            '&::after': {\n              backgroundColor: '$inputInvalidBorder',\n            },\n          },\n        },\n      },\n    },\n    size: {\n      small: {\n        borderRadius: '$2',\n        '&::before, &::after': {\n          borderRadius: '$2',\n        },\n      },\n      medium: {\n        borderRadius: '$3',\n        '&::before, &::after': {\n          borderRadius: '$3',\n        },\n      },\n      large: {\n        borderRadius: '$3',\n        '&::before, &::after': {\n          borderRadius: '$3',\n        },\n      },\n    },\n  },\n  defaultVariants: {\n    size: 'medium',\n    disabled: false,\n  },\n});\n\nconst AdornmentWrapper = styled('div', {\n  position: 'absolute',\n  top: 0,\n  height: '100%',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  variants: {\n    size: {\n      small: {\n        mx: 'calc($2 / 2)',\n      },\n      medium: {\n        mx: 'calc($3 / 2)',\n      },\n      large: {\n        mx: 'calc($3 / 2)',\n      },\n    },\n    variant: {\n      start: {\n        left: 0,\n      },\n      end: {\n        right: 0,\n      },\n    },\n  },\n  defaultVariants: {\n    size: 'medium',\n  },\n});\n\nconst AdornmentWrapperStart = styled(AdornmentWrapper, {\n  left: 0,\n});\n\nconst AdornmentWrapperEnd = styled(AdornmentWrapper, {\n  right: 0,\n});\n\ntype DefaultInputVariants = VariantProps<typeof StyledInput>;\nexport type InputVariants = Omit<DefaultInputVariants, 'startAdornment' | 'endAdornment'>;\nexport interface HTMLInputProps extends React.InputHTMLAttributes<any> {\n  startAdornment?: React.ReactNode;\n  endAdornment?: React.ReactNode;\n  type?: string;\n}\n\nexport type InputProps = Omit<HTMLInputProps, 'size'> & InputVariants & { css?: CSS };\n\nexport interface InputHandle extends HTMLInputElement {\n  clear: () => void;\n}\n\nexport const Input = React.forwardRef<InputHandle, InputProps>(\n  ({ size, startAdornment, endAdornment, css, ...props }, forwardedRef) => {\n    const inputRef = React.useRef<InputHandle>(null);\n\n    React.useImperativeHandle(\n      forwardedRef,\n      () => {\n        const { current } = inputRef;\n        if (current) {\n          current.clear = () => {\n            current.value = '';\n          };\n        }\n        return current as InputHandle;\n      },\n      [inputRef]\n    );\n\n    const hasStartAdornment = React.useMemo(() => Boolean(startAdornment), [startAdornment]);\n\n    const hasEndAdornment = React.useMemo(() => Boolean(endAdornment), [endAdornment]);\n\n    return (\n      <InputWrapper css={css} disabled={props.disabled} state={props.state}>\n        {hasStartAdornment && (\n          <AdornmentWrapperStart size={size}>{startAdornment}</AdornmentWrapperStart>\n        )}\n\n        <StyledInput\n          ref={inputRef}\n          startAdornment={hasStartAdornment}\n          endAdornment={hasEndAdornment}\n          size={size}\n          {...props}\n        />\n        {hasEndAdornment && <AdornmentWrapperEnd size={size}>{endAdornment}</AdornmentWrapperEnd>}\n      </InputWrapper>\n    );\n  }\n);\n"],"names":[],"mappings":";;;;AAMA,MAAM,eAAe,kBAAkB,CAAC,EAAE;AAE1C,MAAM,eAAe;AACrB,MAAM,gBAAgB;AACtB,MAAM,eAAe;AAErB,MAAM,cAAc,OAAO,SAAS;AAAA;AAAA,EAElC,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAO;AAAA,EACP,yBAAyB;AAAA;AAAA,EAGzB,UAAU;AAAA,EACV,iBAAiB;AAAA,EACjB,cAAc;AAAA;AAAA,EACd,WAAW;AAAA,EACX,OAAO;AAAA,EACP,oBAAoB;AAAA,EACpB,YAAY;AAAA,EAEZ,oBAAoB;AAAA,IAClB,IAAI;AAAA;AAAA,EAAA;AAAA,EAGN,iCAAiC;AAAA,IAC/B,WAAW;AAAA,EAAA;AAAA,EAGb,yDAAyD;AAAA,IACvD,YAAY;AAAA,IACZ,OAAO;AAAA,EAAA;AAAA,EAGT,mBAAmB;AAAA,IACjB,WAAW,6CAA6C,YAAY;AAAA,EAAA;AAAA,EAGtE,kBAAkB;AAAA,IAChB,OAAO;AAAA,EAAA;AAAA,EAGT,8BAA8B;AAAA,IAC5B,WAAW;AAAA,EAAA;AAAA,EAGb,cAAc;AAAA,IACZ,eAAe;AAAA,IACf,OAAO;AAAA,EAAA;AAAA,EAGT,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,OAAO;AAAA,QACL,QAAQ;AAAA,QACR,UAAU;AAAA,QACV,IAAI;AAAA,QACJ,YAAY;AAAA,QACZ,yDAAyD;AAAA,UACvD,UAAU;AAAA,QAAA;AAAA,MACZ;AAAA,MAEF,QAAQ;AAAA,QACN,QAAQ;AAAA,QACR,UAAU;AAAA,QACV,IAAI;AAAA,QACJ,YAAY;AAAA,QACZ,yDAAyD;AAAA,UACvD,UAAU;AAAA,QAAA;AAAA,MACZ;AAAA,MAEF,OAAO;AAAA,QACL,QAAQ;AAAA,QACR,UAAU;AAAA,QACV,IAAI;AAAA,QACJ,YAAY;AAAA,QACZ,yDAAyD;AAAA,UACvD,UAAU;AAAA,QAAA;AAAA,MACZ;AAAA,IACF;AAAA,IAEF,gBAAgB;AAAA,MACd,MAAM,CAAA;AAAA,IAAC;AAAA,IAET,cAAc;AAAA,MACZ,MAAM,CAAA;AAAA,IAAC;AAAA,IAET,SAAS;AAAA,MACP,OAAO;AAAA,QACL,WAAW;AAAA,QACX,cAAc;AAAA,UACZ,WAAW;AAAA,QAAA;AAAA,QAEb,iBAAiB;AAAA,QACjB,mBAAmB;AAAA,UACjB,iBAAiB;AAAA,QAAA;AAAA,MACnB;AAAA,IACF;AAAA,IAEF,OAAO;AAAA,MACL,SAAS;AAAA,QACP,WAAW;AAAA,QACX,mBAAmB;AAAA,UACjB,WAAW,+CAA+C,YAAY;AAAA,QAAA;AAAA,MACxE;AAAA,IACF;AAAA,IAEF,QAAQ;AAAA,MACN,SAAS;AAAA,QACP,QAAQ;AAAA,QACR,UAAU;AAAA,UACR,2BAA2B;AAAA,YACzB,QAAQ;AAAA,UAAA;AAAA,QACV;AAAA,QAEF,mCAAmC;AAAA,UACjC,QAAQ;AAAA,QAAA;AAAA,MACV;AAAA,MAEF,MAAM;AAAA,QACJ,QAAQ;AAAA,MAAA;AAAA,IACV;AAAA,EACF;AAAA,EAEF,iBAAiB;AAAA,IACf,MAAM;AAAA,IACN,QAAQ;AAAA,EAAA;AAAA,EAEV,kBAAkB;AAAA,IAChB;AAAA,MACE,SAAS;AAAA,MACT,OAAO;AAAA,MACP,KAAK;AAAA,QACH,WAAW;AAAA,MAAA;AAAA,IACb;AAAA,IAEF;AAAA,MACE,gBAAgB;AAAA,MAChB,MAAM;AAAA,MACN,KAAK;AAAA,QACH,oBAAoB;AAAA,MAAA;AAAA,IACtB;AAAA,IAEF;AAAA,MACE,gBAAgB;AAAA,MAChB,MAAM;AAAA,MACN,KAAK;AAAA,QACH,oBAAoB;AAAA,MAAA;AAAA,IACtB;AAAA,IAEF;AAAA,MACE,gBAAgB;AAAA,MAChB,MAAM;AAAA,MACN,KAAK;AAAA,QACH,oBAAoB;AAAA,MAAA;AAAA,IACtB;AAAA,IAEF;AAAA,MACE,cAAc;AAAA,MACd,MAAM;AAAA,MACN,KAAK;AAAA,QACH,kBAAkB;AAAA,MAAA;AAAA,IACpB;AAAA,IAEF;AAAA,MACE,cAAc;AAAA,MACd,MAAM;AAAA,MACN,KAAK;AAAA,QACH,kBAAkB;AAAA,MAAA;AAAA,IACpB;AAAA,IAEF;AAAA,MACE,cAAc;AAAA,MACd,MAAM;AAAA,MACN,KAAK;AAAA,QACH,kBAAkB;AAAA,MAAA;AAAA,IACpB;AAAA,IAEF;AAAA,MACE,cAAc;AAAA,MACd,MAAM;AAAA,MACN,OAAO;AAAA,MACP,KAAK;AAAA,QACH,kBAAkB;AAAA;AAAA,MAAA;AAAA,IACpB;AAAA,IAEF;AAAA,MACE,cAAc;AAAA,MACd,MAAM;AAAA,MACN,OAAO;AAAA,MACP,KAAK;AAAA,QACH,kBAAkB;AAAA;AAAA,MAAA;AAAA,IACpB;AAAA,IAEF;AAAA,MACE,cAAc;AAAA,MACd,MAAM;AAAA,MACN,OAAO;AAAA,MACP,KAAK;AAAA,QACH,kBAAkB;AAAA;AAAA,MAAA;AAAA,IACpB;AAAA,EACF;AAEJ,CAAC;AAED,MAAM,eAAe,OAAO,OAAO;AAAA;AAAA,EAEjC,SAAS;AAAA,EACT,YAAY;AAAA,EAEZ,UAAU;AAAA,EACV,iBAAiB;AAAA,EACjB,OAAO;AAAA,EAEP,aAAa;AAAA,IACX,WAAW;AAAA,IACX,SAAS;AAAA,IACT,UAAU;AAAA,IACV,OAAO;AAAA,IACP,eAAe;AAAA,EAAA;AAAA,EAEjB,YAAY;AAAA,IACV,WAAW;AAAA,IACX,SAAS;AAAA,IACT,UAAU;AAAA,IACV,OAAO;AAAA,IACP,eAAe;AAAA,EAAA;AAAA,EAGjB,mBAAmB;AAAA,IACjB,aAAa;AAAA,MACX,iBAAiB;AAAA,IAAA;AAAA,IAEnB,YAAY;AAAA,MACV,iBAAiB;AAAA,MACjB,SAAS;AAAA,IAAA;AAAA,EACX;AAAA,EAGF,UAAU;AAAA,IACR,WAAW;AAAA,MACT,aAAa;AAAA,QACX,iBAAiB;AAAA,MAAA;AAAA,MAEnB,YAAY;AAAA,QACV,iBAAiB;AAAA,QACjB,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,EACF;AAAA,EAGF,UAAU;AAAA,IACR,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,SAAS;AAAA,QACT,OAAO;AAAA,QACP,UAAU;AAAA,UACR,WAAW;AAAA,YACT,aAAa;AAAA,cACX,iBAAiB;AAAA,YAAA;AAAA,YAEnB,YAAY;AAAA,cACV,iBAAiB;AAAA,YAAA;AAAA,UACnB;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,IAEF,OAAO;AAAA,MACL,SAAS;AAAA,QACP,UAAU;AAAA,UACR,WAAW;AAAA,YACT,YAAY;AAAA,cACV,iBAAiB;AAAA,YAAA;AAAA,UACnB;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,IAEF,MAAM;AAAA,MACJ,OAAO;AAAA,QACL,cAAc;AAAA,QACd,uBAAuB;AAAA,UACrB,cAAc;AAAA,QAAA;AAAA,MAChB;AAAA,MAEF,QAAQ;AAAA,QACN,cAAc;AAAA,QACd,uBAAuB;AAAA,UACrB,cAAc;AAAA,QAAA;AAAA,MAChB;AAAA,MAEF,OAAO;AAAA,QACL,cAAc;AAAA,QACd,uBAAuB;AAAA,UACrB,cAAc;AAAA,QAAA;AAAA,MAChB;AAAA,IACF;AAAA,EACF;AAAA,EAEF,iBAAiB;AAAA,IACf,MAAM;AAAA,IACN,UAAU;AAAA,EAAA;AAEd,CAAC;AAED,MAAM,mBAAmB,OAAO,OAAO;AAAA,EACrC,UAAU;AAAA,EACV,KAAK;AAAA,EACL,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,OAAO;AAAA,QACL,IAAI;AAAA,MAAA;AAAA,MAEN,QAAQ;AAAA,QACN,IAAI;AAAA,MAAA;AAAA,MAEN,OAAO;AAAA,QACL,IAAI;AAAA,MAAA;AAAA,IACN;AAAA,IAEF,SAAS;AAAA,MACP,OAAO;AAAA,QACL,MAAM;AAAA,MAAA;AAAA,MAER,KAAK;AAAA,QACH,OAAO;AAAA,MAAA;AAAA,IACT;AAAA,EACF;AAAA,EAEF,iBAAiB;AAAA,IACf,MAAM;AAAA,EAAA;AAEV,CAAC;AAED,MAAM,wBAAwB,OAAO,kBAAkB;AAAA,EACrD,MAAM;AACR,CAAC;AAED,MAAM,sBAAsB,OAAO,kBAAkB;AAAA,EACnD,OAAO;AACT,CAAC;AAgBM,MAAM,QAAQ,MAAM;AAAA,EACzB,CAAC,EAAE,MAAM,gBAAgB,cAAc,KAAK,GAAG,MAAA,GAAS,iBAAiB;AACvE,UAAM,WAAW,MAAM,OAAoB,IAAI;AAE/C,UAAM;AAAA,MACJ;AAAA,MACA,MAAM;AACJ,cAAM,EAAE,YAAY;AACpB,YAAI,SAAS;AACX,kBAAQ,QAAQ,MAAM;AACpB,oBAAQ,QAAQ;AAAA,UAClB;AAAA,QACF;AACA,eAAO;AAAA,MACT;AAAA,MACA,CAAC,QAAQ;AAAA,IAAA;AAGX,UAAM,oBAAoB,MAAM,QAAQ,MAAM,QAAQ,cAAc,GAAG,CAAC,cAAc,CAAC;AAEvF,UAAM,kBAAkB,MAAM,QAAQ,MAAM,QAAQ,YAAY,GAAG,CAAC,YAAY,CAAC;AAEjF,WACE,qBAAC,gBAAa,KAAU,UAAU,MAAM,UAAU,OAAO,MAAM,OAC5D,UAAA;AAAA,MAAA,qBACC,oBAAC,uBAAA,EAAsB,MAAa,UAAA,gBAAe;AAAA,MAGrD;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,KAAK;AAAA,UACL,gBAAgB;AAAA,UAChB,cAAc;AAAA,UACd;AAAA,UACC,GAAG;AAAA,QAAA;AAAA,MAAA;AAAA,MAEL,mBAAmB,oBAAC,qBAAA,EAAoB,MAAa,UAAA,aAAA,CAAa;AAAA,IAAA,GACrE;AAAA,EAEJ;AACF;"}
+{"version":3,"file":"Input.js","names":[],"sources":["../../../components/Input/Input.tsx"],"sourcesContent":["import React from 'react';\n\nimport { CSS, styled, VariantProps } from '../../stitches.config';\nimport { elevationVariants } from '../Elevation';\n\n// CONSTANTS\nconst FOCUS_SHADOW = elevationVariants[1].boxShadow; // apply elevation $1 when focus\n\nconst SMALL_HEIGHT = '$5';\nconst MEDIUM_HEIGHT = '$6';\nconst LARGE_HEIGHT = '$7';\n\nconst StyledInput = styled('input', {\n  // Reset\n  appearance: 'none',\n  borderWidth: '0',\n  boxSizing: 'border-box',\n  fontFamily: '$rubik',\n  margin: '0',\n  outline: 'none',\n  padding: '0',\n  width: '100%',\n  WebkitTapHighlightColor: 'rgba(0,0,0,0)',\n\n  // Custom\n  position: 'relative',\n  backgroundColor: 'transparent',\n  borderRadius: 'inherit', // inherit border radius from InputWrapper\n  boxShadow: 'inset 0 0 0 1px $colors$inputBorder',\n  color: '$inputText',\n  fontVariantNumeric: 'tabular-nums',\n  transition: 'box-shadow .1s ease-in-out',\n\n  '&[type=\"number\"]': {\n    pr: '0', // remove padding for number native controls\n  },\n\n  '&:-webkit-autofill,&:autofill': {\n    boxShadow: 'inset 0 0 0 1px $colors$inputBorder, inset 0 0 0 100px $colors$inputBg',\n  },\n\n  '&:-webkit-autofill::first-line,&:autofill::first-line': {\n    fontFamily: '$rubik',\n    color: '$hiContrast',\n  },\n\n  '&:focus-visible': {\n    boxShadow: `inset 0 0 0 2px $colors$inputFocusBorder, ${FOCUS_SHADOW}`,\n  },\n\n  '&::placeholder': {\n    color: '$inputPlaceholder',\n  },\n\n  '&:read-only:not(:disabled)': {\n    boxShadow: 'none',\n  },\n\n  '&:disabled': {\n    pointerEvents: 'none',\n    color: '$inputDisabledText',\n  },\n\n  variants: {\n    size: {\n      small: {\n        height: SMALL_HEIGHT,\n        fontSize: '$1',\n        px: '$2',\n        lineHeight: '$sizes$5',\n        '&:-webkit-autofill::first-line,&:autofill::first-line': {\n          fontSize: '$1',\n        },\n      },\n      medium: {\n        height: MEDIUM_HEIGHT,\n        fontSize: '$3',\n        px: '$3',\n        lineHeight: '$sizes$6',\n        '&:-webkit-autofill::first-line,&:autofill::first-line': {\n          fontSize: '$3',\n        },\n      },\n      large: {\n        height: LARGE_HEIGHT,\n        fontSize: '$3',\n        px: '$3',\n        lineHeight: '$sizes$7',\n        '&:-webkit-autofill::first-line,&:autofill::first-line': {\n          fontSize: '$3',\n        },\n      },\n    },\n    startAdornment: {\n      true: {},\n    },\n    endAdornment: {\n      true: {},\n    },\n    variant: {\n      ghost: {\n        boxShadow: 'none',\n        '&:disabled': {\n          boxShadow: 'none',\n        },\n        backgroundColor: 'transparent',\n        '&:focus-visible': {\n          backgroundColor: '$loContrast',\n        },\n      },\n    },\n    state: {\n      invalid: {\n        boxShadow: 'inset 0 0 0 1px $colors$inputInvalidBorder',\n        '&:focus-visible': {\n          boxShadow: `inset 0 0 0 2px $colors$inputInvalidBorder, ${FOCUS_SHADOW}`,\n        },\n      },\n    },\n    cursor: {\n      default: {\n        cursor: 'default',\n        '@hover': {\n          '&:hover:not(:read-only)': {\n            cursor: 'text',\n          },\n        },\n        '&:focus-visible:not(:read-only)': {\n          cursor: 'text',\n        },\n      },\n      text: {\n        cursor: 'text',\n      },\n    },\n  },\n  defaultVariants: {\n    size: 'medium',\n    cursor: 'default',\n  },\n  compoundVariants: [\n    {\n      variant: 'ghost',\n      state: 'invalid',\n      css: {\n        boxShadow: 'inset 0 0 0 1px $colors$inputInvalidBorder',\n      },\n    },\n    {\n      startAdornment: true,\n      size: 'small',\n      css: {\n        paddingInlineStart: 'calc($2 + 15px)',\n      },\n    },\n    {\n      startAdornment: true,\n      size: 'medium',\n      css: {\n        paddingInlineStart: 'calc($3 + 15px)',\n      },\n    },\n    {\n      startAdornment: true,\n      size: 'large',\n      css: {\n        paddingInlineStart: 'calc($3 + 15px)',\n      },\n    },\n    {\n      endAdornment: true,\n      size: 'small',\n      css: {\n        paddingInlineEnd: 'calc($2 + 15px)',\n      },\n    },\n    {\n      endAdornment: true,\n      size: 'medium',\n      css: {\n        paddingInlineEnd: 'calc($3 + 15px)',\n      },\n    },\n    {\n      endAdornment: true,\n      size: 'large',\n      css: {\n        paddingInlineEnd: 'calc($3 + 15px)',\n      },\n    },\n    {\n      endAdornment: true,\n      size: 'small',\n      state: 'invalid',\n      css: {\n        paddingInlineEnd: 'calc($4 + 30px)', // size padding + adornment margins + icon size + icon size\n      },\n    },\n    {\n      endAdornment: true,\n      size: 'medium',\n      state: 'invalid',\n      css: {\n        paddingInlineEnd: 'calc($6 + 30px)', // size padding + adornment margins + icon size + icon size\n      },\n    },\n    {\n      endAdornment: true,\n      size: 'large',\n      state: 'invalid',\n      css: {\n        paddingInlineEnd: 'calc($6 + 30px)', // size padding + adornment margins + icon size + icon size\n      },\n    },\n  ],\n});\n\nconst InputWrapper = styled('div', {\n  // Reset\n  outline: 'none',\n  lineHeight: 0,\n\n  position: 'relative',\n  backgroundColor: '$inputBg',\n  color: '$inputPlaceholder',\n\n  '&::before': {\n    boxSizing: 'border-box',\n    content: '\"\"',\n    position: 'absolute',\n    inset: 0,\n    pointerEvents: 'none',\n  },\n  '&::after': {\n    boxSizing: 'border-box',\n    content: '\"\"',\n    position: 'absolute',\n    inset: 0,\n    pointerEvents: 'none',\n  },\n\n  '&:focus-visible': {\n    '&::before': {\n      backgroundColor: '$inputFocusBg',\n    },\n    '&::after': {\n      backgroundColor: '$primary',\n      opacity: 0.15,\n    },\n  },\n\n  '@hover': {\n    '&:hover': {\n      '&::before': {\n        backgroundColor: '$inputHoverBg',\n      },\n      '&::after': {\n        backgroundColor: '$primary',\n        opacity: 0.05,\n      },\n    },\n  },\n\n  variants: {\n    disabled: {\n      true: {\n        opacity: 0.7,\n        color: '$inputDisabledText',\n        '@hover': {\n          '&:hover': {\n            '&::before': {\n              backgroundColor: 'inherit',\n            },\n            '&::after': {\n              backgroundColor: 'inherit',\n            },\n          },\n        },\n      },\n    },\n    state: {\n      invalid: {\n        '@hover': {\n          '&:hover': {\n            '&::after': {\n              backgroundColor: '$inputInvalidBorder',\n            },\n          },\n        },\n      },\n    },\n    size: {\n      small: {\n        borderRadius: '$2',\n        '&::before, &::after': {\n          borderRadius: '$2',\n        },\n      },\n      medium: {\n        borderRadius: '$3',\n        '&::before, &::after': {\n          borderRadius: '$3',\n        },\n      },\n      large: {\n        borderRadius: '$3',\n        '&::before, &::after': {\n          borderRadius: '$3',\n        },\n      },\n    },\n  },\n  defaultVariants: {\n    size: 'medium',\n    disabled: false,\n  },\n});\n\nconst AdornmentWrapper = styled('div', {\n  position: 'absolute',\n  top: 0,\n  height: '100%',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  variants: {\n    size: {\n      small: {\n        mx: 'calc($2 / 2)',\n      },\n      medium: {\n        mx: 'calc($3 / 2)',\n      },\n      large: {\n        mx: 'calc($3 / 2)',\n      },\n    },\n    variant: {\n      start: {\n        left: 0,\n      },\n      end: {\n        right: 0,\n      },\n    },\n  },\n  defaultVariants: {\n    size: 'medium',\n  },\n});\n\nconst AdornmentWrapperStart = styled(AdornmentWrapper, {\n  left: 0,\n});\n\nconst AdornmentWrapperEnd = styled(AdornmentWrapper, {\n  right: 0,\n});\n\ntype DefaultInputVariants = VariantProps<typeof StyledInput>;\nexport type InputVariants = Omit<DefaultInputVariants, 'startAdornment' | 'endAdornment'>;\nexport interface HTMLInputProps extends React.InputHTMLAttributes<any> {\n  startAdornment?: React.ReactNode;\n  endAdornment?: React.ReactNode;\n  type?: string;\n}\n\nexport type InputProps = Omit<HTMLInputProps, 'size'> & InputVariants & { css?: CSS };\n\nexport interface InputHandle extends HTMLInputElement {\n  clear: () => void;\n}\n\nexport const Input = React.forwardRef<InputHandle, InputProps>(\n  ({ size, startAdornment, endAdornment, css, ...props }, forwardedRef) => {\n    const inputRef = React.useRef<InputHandle>(null);\n\n    React.useImperativeHandle(\n      forwardedRef,\n      () => {\n        const { current } = inputRef;\n        if (current) {\n          current.clear = () => {\n            current.value = '';\n          };\n        }\n        return current as InputHandle;\n      },\n      [inputRef]\n    );\n\n    const hasStartAdornment = React.useMemo(() => Boolean(startAdornment), [startAdornment]);\n\n    const hasEndAdornment = React.useMemo(() => Boolean(endAdornment), [endAdornment]);\n\n    return (\n      <InputWrapper css={css} disabled={props.disabled} state={props.state}>\n        {hasStartAdornment && (\n          <AdornmentWrapperStart size={size}>{startAdornment}</AdornmentWrapperStart>\n        )}\n\n        <StyledInput\n          ref={inputRef}\n          startAdornment={hasStartAdornment}\n          endAdornment={hasEndAdornment}\n          size={size}\n          {...props}\n        />\n        {hasEndAdornment && <AdornmentWrapperEnd size={size}>{endAdornment}</AdornmentWrapperEnd>}\n      </InputWrapper>\n    );\n  }\n);\n"],"mappings":";;;;;AAMA,IAAM,eAAe,kBAAkB,GAAG;AAM1C,IAAM,cAAc,OAAO,SAAS;CAElC,YAAY;CACZ,aAAa;CACb,WAAW;CACX,YAAY;CACZ,QAAQ;CACR,SAAS;CACT,SAAS;CACT,OAAO;CACP,yBAAyB;CAGzB,UAAU;CACV,iBAAiB;CACjB,cAAc;CACd,WAAW;CACX,OAAO;CACP,oBAAoB;CACpB,YAAY;CAEZ,sBAAoB,EAClB,IAAI,KACL;CAED,iCAAiC,EAC/B,WAAW,0EACZ;CAED,yDAAyD;EACvD,YAAY;EACZ,OAAO;EACR;CAED,mBAAmB,EACjB,WAAW,6CAA6C,gBACzD;CAED,kBAAkB,EAChB,OAAO,qBACR;CAED,8BAA8B,EAC5B,WAAW,QACZ;CAED,cAAc;EACZ,eAAe;EACf,OAAO;EACR;CAED,UAAU;EACR,MAAM;GACJ,OAAO;IACL,QA1Da;IA2Db,UAAU;IACV,IAAI;IACJ,YAAY;IACZ,yDAAyD,EACvD,UAAU,MACX;IACF;GACD,QAAQ;IACN,QAlEc;IAmEd,UAAU;IACV,IAAI;IACJ,YAAY;IACZ,yDAAyD,EACvD,UAAU,MACX;IACF;GACD,OAAO;IACL,QA1Ea;IA2Eb,UAAU;IACV,IAAI;IACJ,YAAY;IACZ,yDAAyD,EACvD,UAAU,MACX;IACF;GACF;EACD,gBAAgB,EACd,MAAM,EAAE,EACT;EACD,cAAc,EACZ,MAAM,EAAE,EACT;EACD,SAAS,EACP,OAAO;GACL,WAAW;GACX,cAAc,EACZ,WAAW,QACZ;GACD,iBAAiB;GACjB,mBAAmB,EACjB,iBAAiB,eAClB;GACF,EACF;EACD,OAAO,EACL,SAAS;GACP,WAAW;GACX,mBAAmB,EACjB,WAAW,+CAA+C,gBAC3D;GACF,EACF;EACD,QAAQ;GACN,SAAS;IACP,QAAQ;IACR,UAAU,EACR,2BAA2B,EACzB,QAAQ,QACT,EACF;IACD,mCAAmC,EACjC,QAAQ,QACT;IACF;GACD,MAAM,EACJ,QAAQ,QACT;GACF;EACF;CACD,iBAAiB;EACf,MAAM;EACN,QAAQ;EACT;CACD,kBAAkB;EAChB;GACE,SAAS;GACT,OAAO;GACP,KAAK,EACH,WAAW,8CACZ;GACF;EACD;GACE,gBAAgB;GAChB,MAAM;GACN,KAAK,EACH,oBAAoB,mBACrB;GACF;EACD;GACE,gBAAgB;GAChB,MAAM;GACN,KAAK,EACH,oBAAoB,mBACrB;GACF;EACD;GACE,gBAAgB;GAChB,MAAM;GACN,KAAK,EACH,oBAAoB,mBACrB;GACF;EACD;GACE,cAAc;GACd,MAAM;GACN,KAAK,EACH,kBAAkB,mBACnB;GACF;EACD;GACE,cAAc;GACd,MAAM;GACN,KAAK,EACH,kBAAkB,mBACnB;GACF;EACD;GACE,cAAc;GACd,MAAM;GACN,KAAK,EACH,kBAAkB,mBACnB;GACF;EACD;GACE,cAAc;GACd,MAAM;GACN,OAAO;GACP,KAAK,EACH,kBAAkB,mBACnB;GACF;EACD;GACE,cAAc;GACd,MAAM;GACN,OAAO;GACP,KAAK,EACH,kBAAkB,mBACnB;GACF;EACD;GACE,cAAc;GACd,MAAM;GACN,OAAO;GACP,KAAK,EACH,kBAAkB,mBACnB;GACF;EACF;CACF,CAAC;AAEF,IAAM,eAAe,OAAO,OAAO;CAEjC,SAAS;CACT,YAAY;CAEZ,UAAU;CACV,iBAAiB;CACjB,OAAO;CAEP,aAAa;EACX,WAAW;EACX,SAAS;EACT,UAAU;EACV,OAAO;EACP,eAAe;EAChB;CACD,YAAY;EACV,WAAW;EACX,SAAS;EACT,UAAU;EACV,OAAO;EACP,eAAe;EAChB;CAED,mBAAmB;EACjB,aAAa,EACX,iBAAiB,iBAClB;EACD,YAAY;GACV,iBAAiB;GACjB,SAAS;GACV;EACF;CAED,UAAU,EACR,WAAW;EACT,aAAa,EACX,iBAAiB,iBAClB;EACD,YAAY;GACV,iBAAiB;GACjB,SAAS;GACV;EACF,EACF;CAED,UAAU;EACR,UAAU,EACR,MAAM;GACJ,SAAS;GACT,OAAO;GACP,UAAU,EACR,WAAW;IACT,aAAa,EACX,iBAAiB,WAClB;IACD,YAAY,EACV,iBAAiB,WAClB;IACF,EACF;GACF,EACF;EACD,OAAO,EACL,SAAS,EACP,UAAU,EACR,WAAW,EACT,YAAY,EACV,iBAAiB,uBAClB,EACF,EACF,EACF,EACF;EACD,MAAM;GACJ,OAAO;IACL,cAAc;IACd,uBAAuB,EACrB,cAAc,MACf;IACF;GACD,QAAQ;IACN,cAAc;IACd,uBAAuB,EACrB,cAAc,MACf;IACF;GACD,OAAO;IACL,cAAc;IACd,uBAAuB,EACrB,cAAc,MACf;IACF;GACF;EACF;CACD,iBAAiB;EACf,MAAM;EACN,UAAU;EACX;CACF,CAAC;AAEF,IAAM,mBAAmB,OAAO,OAAO;CACrC,UAAU;CACV,KAAK;CACL,QAAQ;CACR,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,UAAU;EACR,MAAM;GACJ,OAAO,EACL,IAAI,gBACL;GACD,QAAQ,EACN,IAAI,gBACL;GACD,OAAO,EACL,IAAI,gBACL;GACF;EACD,SAAS;GACP,OAAO,EACL,MAAM,GACP;GACD,KAAK,EACH,OAAO,GACR;GACF;EACF;CACD,iBAAiB,EACf,MAAM,UACP;CACF,CAAC;AAEF,IAAM,wBAAwB,OAAO,kBAAkB,EACrD,MAAM,GACP,CAAC;AAEF,IAAM,sBAAsB,OAAO,kBAAkB,EACnD,OAAO,GACR,CAAC;AAgBF,IAAa,QAAQ,MAAM,YACxB,EAAE,MAAM,gBAAgB,cAAc,KAAK,GAAG,SAAS,iBAAiB;CACvE,MAAM,WAAW,MAAM,OAAoB,KAAK;AAEhD,OAAM,oBACJ,oBACM;EACJ,MAAM,EAAE,YAAY;AACpB,MAAI,QACF,SAAQ,cAAc;AACpB,WAAQ,QAAQ;;AAGpB,SAAO;IAET,CAAC,SAAS,CACX;CAED,MAAM,oBAAoB,MAAM,cAAc,QAAQ,eAAe,EAAE,CAAC,eAAe,CAAC;CAExF,MAAM,kBAAkB,MAAM,cAAc,QAAQ,aAAa,EAAE,CAAC,aAAa,CAAC;AAElF,QACE,qBAAC,cAAD;EAAmB;EAAK,UAAU,MAAM;EAAU,OAAO,MAAM;YAA/D;GACG,qBACC,oBAAC,uBAAD;IAA6B;cAAO;IAAuC,CAAA;GAG7E,oBAAC,aAAD;IACE,KAAK;IACL,gBAAgB;IAChB,cAAc;IACR;IACN,GAAI;IACJ,CAAA;GACD,mBAAmB,oBAAC,qBAAD;IAA2B;cAAO;IAAmC,CAAA;GAC5E;;EAGpB"}

package/dist/components/Input/Input.theme.cjs

@@ -1,40 +1,31 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const tinycolor = require("tinycolor2");
-const inputLightTheme = {
-  inputBg: "hsl(240, 14.0%, 99.0%)",
-  // $deepBlue1
-  inputBorder: "hsl(208, 9.0%, 73.0%)",
-  // $grayBlue9
-  inputFocusBg: tinycolor("black").setAlpha(0.15).toHslString(),
-  inputFocusBorder: "hsl(206, 100%, 50%)",
-  // blue8
-  inputHoverBg: "hsla(0, 0%, 100%, 0.372)",
-  // $whiteA9
-  inputText: tinycolor("black").setAlpha(0.74).toHslString(),
-  inputPlaceholder: "hsla(0, 0%, 0%, 0.498)",
-  // $blackA10
-  inputDisabledText: tinycolor("black").setAlpha(0.35).toHslString(),
-  inputInvalidBorder: "hsl(358, 75%, 59%)"
-  // $red9
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+let tinycolor2 = require("tinycolor2");
+tinycolor2 = require_runtime.__toESM(tinycolor2, 1);
+//#region components/Input/Input.theme.ts
+var inputLightTheme = {
+	inputBg: "hsl(240, 14.0%, 99.0%)",
+	inputBorder: "hsl(208, 9.0%, 73.0%)",
+	inputFocusBg: (0, tinycolor2.default)("black").setAlpha(.15).toHslString(),
+	inputFocusBorder: "hsl(206, 100%, 50%)",
+	inputHoverBg: "hsla(0, 0%, 100%, 0.372)",
+	inputText: (0, tinycolor2.default)("black").setAlpha(.74).toHslString(),
+	inputPlaceholder: "hsla(0, 0%, 0%, 0.498)",
+	inputDisabledText: (0, tinycolor2.default)("black").setAlpha(.35).toHslString(),
+	inputInvalidBorder: "hsl(358, 75%, 59%)"
 };
-const inputDarkTheme = {
-  inputBg: "hsl(209, 38.0%, 12.0%)",
-  // $grayBlue7 dark
-  inputBorder: "hsl(208, 11.0%, 45.0%)",
-  // $grayBlue9 dark
-  inputFocusBg: tinycolor("black").setAlpha(0.15).toHslString(),
-  inputFocusBorder: "hsl(206, 100%, 70%)",
-  // blue11
-  inputHoverBg: "hsla(0, 0%, 100%, 0.104)",
-  // $whiteA4
-  inputText: tinycolor("white").setAlpha(0.8).toHslString(),
-  inputPlaceholder: "hsla(0, 0%, 100%, 0.455)",
-  // $whiteA10
-  inputDisabledText: tinycolor("white").setAlpha(0.35).toHslString(),
-  inputInvalidBorder: "hsl(358, 75%, 59%)"
-  // $red9
+var inputDarkTheme = {
+	inputBg: "hsl(209, 38.0%, 12.0%)",
+	inputBorder: "hsl(208, 11.0%, 45.0%)",
+	inputFocusBg: (0, tinycolor2.default)("black").setAlpha(.15).toHslString(),
+	inputFocusBorder: "hsl(206, 100%, 70%)",
+	inputHoverBg: "hsla(0, 0%, 100%, 0.104)",
+	inputText: (0, tinycolor2.default)("white").setAlpha(.8).toHslString(),
+	inputPlaceholder: "hsla(0, 0%, 100%, 0.455)",
+	inputDisabledText: (0, tinycolor2.default)("white").setAlpha(.35).toHslString(),
+	inputInvalidBorder: "hsl(358, 75%, 59%)"
 };
+//#endregion
 exports.inputDarkTheme = inputDarkTheme;
 exports.inputLightTheme = inputLightTheme;
-//# sourceMappingURL=Input.theme.cjs.map
+
+//# sourceMappingURL=Input.theme.cjs.map

package/dist/components/Input/Input.theme.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Input.theme.cjs","sources":["../../../components/Input/Input.theme.ts"],"sourcesContent":["import tinycolor from 'tinycolor2';\n\n// Plain TypeScript color tokens (no vanilla-extract)\n// Using default blue primary color for static tokens\nexport const inputLightTheme = {\n  inputBg: 'hsl(240, 14.0%, 99.0%)', // $deepBlue1\n  inputBorder: 'hsl(208, 9.0%, 73.0%)', // $grayBlue9\n  inputFocusBg: tinycolor('black').setAlpha(0.15).toHslString(),\n  inputFocusBorder: 'hsl(206, 100%, 50%)', // blue8\n  inputHoverBg: 'hsla(0, 0%, 100%, 0.372)', // $whiteA9\n  inputText: tinycolor('black').setAlpha(0.74).toHslString(),\n  inputPlaceholder: 'hsla(0, 0%, 0%, 0.498)', // $blackA10\n  inputDisabledText: tinycolor('black').setAlpha(0.35).toHslString(),\n  inputInvalidBorder: 'hsl(358, 75%, 59%)', // $red9\n};\n\nexport const inputDarkTheme = {\n  inputBg: 'hsl(209, 38.0%, 12.0%)', // $grayBlue7 dark\n  inputBorder: 'hsl(208, 11.0%, 45.0%)', // $grayBlue9 dark\n  inputFocusBg: tinycolor('black').setAlpha(0.15).toHslString(),\n  inputFocusBorder: 'hsl(206, 100%, 70%)', // blue11\n  inputHoverBg: 'hsla(0, 0%, 100%, 0.104)', // $whiteA4\n  inputText: tinycolor('white').setAlpha(0.8).toHslString(),\n  inputPlaceholder: 'hsla(0, 0%, 100%, 0.455)', // $whiteA10\n  inputDisabledText: tinycolor('white').setAlpha(0.35).toHslString(),\n  inputInvalidBorder: 'hsl(358, 75%, 59%)', // $red9\n};\n"],"names":[],"mappings":";;;AAIO,MAAM,kBAAkB;AAAA,EAC7B,SAAS;AAAA;AAAA,EACT,aAAa;AAAA;AAAA,EACb,cAAc,UAAU,OAAO,EAAE,SAAS,IAAI,EAAE,YAAA;AAAA,EAChD,kBAAkB;AAAA;AAAA,EAClB,cAAc;AAAA;AAAA,EACd,WAAW,UAAU,OAAO,EAAE,SAAS,IAAI,EAAE,YAAA;AAAA,EAC7C,kBAAkB;AAAA;AAAA,EAClB,mBAAmB,UAAU,OAAO,EAAE,SAAS,IAAI,EAAE,YAAA;AAAA,EACrD,oBAAoB;AAAA;AACtB;AAEO,MAAM,iBAAiB;AAAA,EAC5B,SAAS;AAAA;AAAA,EACT,aAAa;AAAA;AAAA,EACb,cAAc,UAAU,OAAO,EAAE,SAAS,IAAI,EAAE,YAAA;AAAA,EAChD,kBAAkB;AAAA;AAAA,EAClB,cAAc;AAAA;AAAA,EACd,WAAW,UAAU,OAAO,EAAE,SAAS,GAAG,EAAE,YAAA;AAAA,EAC5C,kBAAkB;AAAA;AAAA,EAClB,mBAAmB,UAAU,OAAO,EAAE,SAAS,IAAI,EAAE,YAAA;AAAA,EACrD,oBAAoB;AAAA;AACtB;;;"}
+{"version":3,"file":"Input.theme.cjs","names":[],"sources":["../../../components/Input/Input.theme.ts"],"sourcesContent":["import tinycolor from 'tinycolor2';\n\n// Plain TypeScript color tokens (no vanilla-extract)\n// Using default blue primary color for static tokens\nexport const inputLightTheme = {\n  inputBg: 'hsl(240, 14.0%, 99.0%)', // $deepBlue1\n  inputBorder: 'hsl(208, 9.0%, 73.0%)', // $grayBlue9\n  inputFocusBg: tinycolor('black').setAlpha(0.15).toHslString(),\n  inputFocusBorder: 'hsl(206, 100%, 50%)', // blue8\n  inputHoverBg: 'hsla(0, 0%, 100%, 0.372)', // $whiteA9\n  inputText: tinycolor('black').setAlpha(0.74).toHslString(),\n  inputPlaceholder: 'hsla(0, 0%, 0%, 0.498)', // $blackA10\n  inputDisabledText: tinycolor('black').setAlpha(0.35).toHslString(),\n  inputInvalidBorder: 'hsl(358, 75%, 59%)', // $red9\n};\n\nexport const inputDarkTheme = {\n  inputBg: 'hsl(209, 38.0%, 12.0%)', // $grayBlue7 dark\n  inputBorder: 'hsl(208, 11.0%, 45.0%)', // $grayBlue9 dark\n  inputFocusBg: tinycolor('black').setAlpha(0.15).toHslString(),\n  inputFocusBorder: 'hsl(206, 100%, 70%)', // blue11\n  inputHoverBg: 'hsla(0, 0%, 100%, 0.104)', // $whiteA4\n  inputText: tinycolor('white').setAlpha(0.8).toHslString(),\n  inputPlaceholder: 'hsla(0, 0%, 100%, 0.455)', // $whiteA10\n  inputDisabledText: tinycolor('white').setAlpha(0.35).toHslString(),\n  inputInvalidBorder: 'hsl(358, 75%, 59%)', // $red9\n};\n"],"mappings":";;;;AAIA,IAAa,kBAAkB;CAC7B,SAAS;CACT,aAAa;CACb,eAAA,GAAA,WAAA,SAAwB,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;CAC7D,kBAAkB;CAClB,cAAc;CACd,YAAA,GAAA,WAAA,SAAqB,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;CAC1D,kBAAkB;CAClB,oBAAA,GAAA,WAAA,SAA6B,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;CAClE,oBAAoB;CACrB;AAED,IAAa,iBAAiB;CAC5B,SAAS;CACT,aAAa;CACb,eAAA,GAAA,WAAA,SAAwB,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;CAC7D,kBAAkB;CAClB,cAAc;CACd,YAAA,GAAA,WAAA,SAAqB,QAAQ,CAAC,SAAS,GAAI,CAAC,aAAa;CACzD,kBAAkB;CAClB,oBAAA,GAAA,WAAA,SAA6B,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;CAClE,oBAAoB;CACrB"}

package/dist/components/Input/Input.theme.js

@@ -1,40 +1,28 @@
 import tinycolor from "tinycolor2";
-const inputLightTheme = {
-  inputBg: "hsl(240, 14.0%, 99.0%)",
-  // $deepBlue1
-  inputBorder: "hsl(208, 9.0%, 73.0%)",
-  // $grayBlue9
-  inputFocusBg: tinycolor("black").setAlpha(0.15).toHslString(),
-  inputFocusBorder: "hsl(206, 100%, 50%)",
-  // blue8
-  inputHoverBg: "hsla(0, 0%, 100%, 0.372)",
-  // $whiteA9
-  inputText: tinycolor("black").setAlpha(0.74).toHslString(),
-  inputPlaceholder: "hsla(0, 0%, 0%, 0.498)",
-  // $blackA10
-  inputDisabledText: tinycolor("black").setAlpha(0.35).toHslString(),
-  inputInvalidBorder: "hsl(358, 75%, 59%)"
-  // $red9
+//#region components/Input/Input.theme.ts
+var inputLightTheme = {
+	inputBg: "hsl(240, 14.0%, 99.0%)",
+	inputBorder: "hsl(208, 9.0%, 73.0%)",
+	inputFocusBg: tinycolor("black").setAlpha(.15).toHslString(),
+	inputFocusBorder: "hsl(206, 100%, 50%)",
+	inputHoverBg: "hsla(0, 0%, 100%, 0.372)",
+	inputText: tinycolor("black").setAlpha(.74).toHslString(),
+	inputPlaceholder: "hsla(0, 0%, 0%, 0.498)",
+	inputDisabledText: tinycolor("black").setAlpha(.35).toHslString(),
+	inputInvalidBorder: "hsl(358, 75%, 59%)"
 };
-const inputDarkTheme = {
-  inputBg: "hsl(209, 38.0%, 12.0%)",
-  // $grayBlue7 dark
-  inputBorder: "hsl(208, 11.0%, 45.0%)",
-  // $grayBlue9 dark
-  inputFocusBg: tinycolor("black").setAlpha(0.15).toHslString(),
-  inputFocusBorder: "hsl(206, 100%, 70%)",
-  // blue11
-  inputHoverBg: "hsla(0, 0%, 100%, 0.104)",
-  // $whiteA4
-  inputText: tinycolor("white").setAlpha(0.8).toHslString(),
-  inputPlaceholder: "hsla(0, 0%, 100%, 0.455)",
-  // $whiteA10
-  inputDisabledText: tinycolor("white").setAlpha(0.35).toHslString(),
-  inputInvalidBorder: "hsl(358, 75%, 59%)"
-  // $red9
+var inputDarkTheme = {
+	inputBg: "hsl(209, 38.0%, 12.0%)",
+	inputBorder: "hsl(208, 11.0%, 45.0%)",
+	inputFocusBg: tinycolor("black").setAlpha(.15).toHslString(),
+	inputFocusBorder: "hsl(206, 100%, 70%)",
+	inputHoverBg: "hsla(0, 0%, 100%, 0.104)",
+	inputText: tinycolor("white").setAlpha(.8).toHslString(),
+	inputPlaceholder: "hsla(0, 0%, 100%, 0.455)",
+	inputDisabledText: tinycolor("white").setAlpha(.35).toHslString(),
+	inputInvalidBorder: "hsl(358, 75%, 59%)"
 };
-export {
-  inputDarkTheme,
-  inputLightTheme
-};
-//# sourceMappingURL=Input.theme.js.map
+//#endregion
+export { inputDarkTheme, inputLightTheme };
+
+//# sourceMappingURL=Input.theme.js.map

package/dist/components/Input/Input.theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.theme.js","sources":["../../../components/Input/Input.theme.ts"],"sourcesContent":["import tinycolor from 'tinycolor2';\n\n// Plain TypeScript color tokens (no vanilla-extract)\n// Using default blue primary color for static tokens\nexport const inputLightTheme = {\n  inputBg: 'hsl(240, 14.0%, 99.0%)', // $deepBlue1\n  inputBorder: 'hsl(208, 9.0%, 73.0%)', // $grayBlue9\n  inputFocusBg: tinycolor('black').setAlpha(0.15).toHslString(),\n  inputFocusBorder: 'hsl(206, 100%, 50%)', // blue8\n  inputHoverBg: 'hsla(0, 0%, 100%, 0.372)', // $whiteA9\n  inputText: tinycolor('black').setAlpha(0.74).toHslString(),\n  inputPlaceholder: 'hsla(0, 0%, 0%, 0.498)', // $blackA10\n  inputDisabledText: tinycolor('black').setAlpha(0.35).toHslString(),\n  inputInvalidBorder: 'hsl(358, 75%, 59%)', // $red9\n};\n\nexport const inputDarkTheme = {\n  inputBg: 'hsl(209, 38.0%, 12.0%)', // $grayBlue7 dark\n  inputBorder: 'hsl(208, 11.0%, 45.0%)', // $grayBlue9 dark\n  inputFocusBg: tinycolor('black').setAlpha(0.15).toHslString(),\n  inputFocusBorder: 'hsl(206, 100%, 70%)', // blue11\n  inputHoverBg: 'hsla(0, 0%, 100%, 0.104)', // $whiteA4\n  inputText: tinycolor('white').setAlpha(0.8).toHslString(),\n  inputPlaceholder: 'hsla(0, 0%, 100%, 0.455)', // $whiteA10\n  inputDisabledText: tinycolor('white').setAlpha(0.35).toHslString(),\n  inputInvalidBorder: 'hsl(358, 75%, 59%)', // $red9\n};\n"],"names":[],"mappings":";AAIO,MAAM,kBAAkB;AAAA,EAC7B,SAAS;AAAA;AAAA,EACT,aAAa;AAAA;AAAA,EACb,cAAc,UAAU,OAAO,EAAE,SAAS,IAAI,EAAE,YAAA;AAAA,EAChD,kBAAkB;AAAA;AAAA,EAClB,cAAc;AAAA;AAAA,EACd,WAAW,UAAU,OAAO,EAAE,SAAS,IAAI,EAAE,YAAA;AAAA,EAC7C,kBAAkB;AAAA;AAAA,EAClB,mBAAmB,UAAU,OAAO,EAAE,SAAS,IAAI,EAAE,YAAA;AAAA,EACrD,oBAAoB;AAAA;AACtB;AAEO,MAAM,iBAAiB;AAAA,EAC5B,SAAS;AAAA;AAAA,EACT,aAAa;AAAA;AAAA,EACb,cAAc,UAAU,OAAO,EAAE,SAAS,IAAI,EAAE,YAAA;AAAA,EAChD,kBAAkB;AAAA;AAAA,EAClB,cAAc;AAAA;AAAA,EACd,WAAW,UAAU,OAAO,EAAE,SAAS,GAAG,EAAE,YAAA;AAAA,EAC5C,kBAAkB;AAAA;AAAA,EAClB,mBAAmB,UAAU,OAAO,EAAE,SAAS,IAAI,EAAE,YAAA;AAAA,EACrD,oBAAoB;AAAA;AACtB;"}
+{"version":3,"file":"Input.theme.js","names":[],"sources":["../../../components/Input/Input.theme.ts"],"sourcesContent":["import tinycolor from 'tinycolor2';\n\n// Plain TypeScript color tokens (no vanilla-extract)\n// Using default blue primary color for static tokens\nexport const inputLightTheme = {\n  inputBg: 'hsl(240, 14.0%, 99.0%)', // $deepBlue1\n  inputBorder: 'hsl(208, 9.0%, 73.0%)', // $grayBlue9\n  inputFocusBg: tinycolor('black').setAlpha(0.15).toHslString(),\n  inputFocusBorder: 'hsl(206, 100%, 50%)', // blue8\n  inputHoverBg: 'hsla(0, 0%, 100%, 0.372)', // $whiteA9\n  inputText: tinycolor('black').setAlpha(0.74).toHslString(),\n  inputPlaceholder: 'hsla(0, 0%, 0%, 0.498)', // $blackA10\n  inputDisabledText: tinycolor('black').setAlpha(0.35).toHslString(),\n  inputInvalidBorder: 'hsl(358, 75%, 59%)', // $red9\n};\n\nexport const inputDarkTheme = {\n  inputBg: 'hsl(209, 38.0%, 12.0%)', // $grayBlue7 dark\n  inputBorder: 'hsl(208, 11.0%, 45.0%)', // $grayBlue9 dark\n  inputFocusBg: tinycolor('black').setAlpha(0.15).toHslString(),\n  inputFocusBorder: 'hsl(206, 100%, 70%)', // blue11\n  inputHoverBg: 'hsla(0, 0%, 100%, 0.104)', // $whiteA4\n  inputText: tinycolor('white').setAlpha(0.8).toHslString(),\n  inputPlaceholder: 'hsla(0, 0%, 100%, 0.455)', // $whiteA10\n  inputDisabledText: tinycolor('white').setAlpha(0.35).toHslString(),\n  inputInvalidBorder: 'hsl(358, 75%, 59%)', // $red9\n};\n"],"mappings":";;AAIA,IAAa,kBAAkB;CAC7B,SAAS;CACT,aAAa;CACb,cAAc,UAAU,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;CAC7D,kBAAkB;CAClB,cAAc;CACd,WAAW,UAAU,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;CAC1D,kBAAkB;CAClB,mBAAmB,UAAU,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;CAClE,oBAAoB;CACrB;AAED,IAAa,iBAAiB;CAC5B,SAAS;CACT,aAAa;CACb,cAAc,UAAU,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;CAC7D,kBAAkB;CAClB,cAAc;CACd,WAAW,UAAU,QAAQ,CAAC,SAAS,GAAI,CAAC,aAAa;CACzD,kBAAkB;CAClB,mBAAmB,UAAU,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;CAClE,oBAAoB;CACrB"}

package/dist/components/Input/Input.themes.cjs

@@ -1,29 +1,38 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const tinycolor = require("tinycolor2");
-exports.Theme = void 0;
-((Theme2) => {
-  Theme2.getLight = (primaryColor) => ({
-    inputBg: "$deepBlue1",
-    inputBorder: "$grayBlue9",
-    inputFocusBg: tinycolor("black").setAlpha(0.15).toHslString(),
-    inputFocusBorder: primaryColor.helpers.pickScale(8),
-    inputHoverBg: "$whiteA9",
-    inputText: tinycolor("black").setAlpha(0.74).toHslString(),
-    inputPlaceholder: "$blackA10",
-    inputDisabledText: tinycolor("black").setAlpha(0.35).toHslString(),
-    inputInvalidBorder: "$red9"
-  });
-  Theme2.getDark = (primaryColor) => ({
-    inputBg: "$grayBlue7",
-    inputBorder: "$grayBlue9",
-    inputFocusBg: tinycolor("black").setAlpha(0.15).toHslString(),
-    inputFocusBorder: primaryColor.helpers.pickScale(11),
-    inputHoverBg: "$whiteA4",
-    inputText: tinycolor("white").setAlpha(0.8).toHslString(),
-    inputPlaceholder: "$whiteA10",
-    inputDisabledText: tinycolor("white").setAlpha(0.35).toHslString(),
-    inputInvalidBorder: "$red9"
-  });
-})(exports.Theme || (exports.Theme = {}));
-//# sourceMappingURL=Input.themes.cjs.map
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+let tinycolor2 = require("tinycolor2");
+tinycolor2 = require_runtime.__toESM(tinycolor2, 1);
+//#region components/Input/Input.themes.ts
+var Theme;
+(function(_Theme) {
+	_Theme.getLight = (primaryColor) => ({
+		inputBg: "$deepBlue1",
+		inputBorder: "$grayBlue9",
+		inputFocusBg: (0, tinycolor2.default)("black").setAlpha(.15).toHslString(),
+		inputFocusBorder: primaryColor.helpers.pickScale(8),
+		inputHoverBg: "$whiteA9",
+		inputText: (0, tinycolor2.default)("black").setAlpha(.74).toHslString(),
+		inputPlaceholder: "$blackA10",
+		inputDisabledText: (0, tinycolor2.default)("black").setAlpha(.35).toHslString(),
+		inputInvalidBorder: "$red9"
+	});
+	_Theme.getDark = (primaryColor) => ({
+		inputBg: "$grayBlue7",
+		inputBorder: "$grayBlue9",
+		inputFocusBg: (0, tinycolor2.default)("black").setAlpha(.15).toHslString(),
+		inputFocusBorder: primaryColor.helpers.pickScale(11),
+		inputHoverBg: "$whiteA4",
+		inputText: (0, tinycolor2.default)("white").setAlpha(.8).toHslString(),
+		inputPlaceholder: "$whiteA10",
+		inputDisabledText: (0, tinycolor2.default)("white").setAlpha(.35).toHslString(),
+		inputInvalidBorder: "$red9"
+	});
+})(Theme || (Theme = {}));
+//#endregion
+Object.defineProperty(exports, "Theme", {
+	enumerable: true,
+	get: function() {
+		return Theme;
+	}
+});
+
+//# sourceMappingURL=Input.themes.cjs.map

package/dist/components/Input/Input.themes.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Input.themes.cjs","sources":["../../../components/Input/Input.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\nimport tinycolor from 'tinycolor2';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\n\nexport namespace Theme {\n  export type Colors = {\n    inputBg: Property.Color;\n    inputBorder: Property.Color;\n    inputFocusBg: Property.Color;\n    inputFocusBorder: Property.Color;\n    inputHoverBg: Property.Color;\n    inputText: Property.Color;\n    inputPlaceholder: Property.Color;\n    inputDisabledText: Property.Color;\n    inputInvalidBorder: Property.Color;\n  };\n\n  type Factory = (primaryColor: ColorInfo) => Colors;\n\n  export const getLight: Factory = (primaryColor) => ({\n    inputBg: '$deepBlue1',\n    inputBorder: '$grayBlue9',\n    inputFocusBg: tinycolor('black').setAlpha(0.15).toHslString(),\n    inputFocusBorder: primaryColor.helpers.pickScale(8),\n    inputHoverBg: '$whiteA9',\n    inputText: tinycolor('black').setAlpha(0.74).toHslString(),\n    inputPlaceholder: '$blackA10',\n    inputDisabledText: tinycolor('black').setAlpha(0.35).toHslString(),\n    inputInvalidBorder: '$red9',\n  });\n\n  export const getDark: Factory = (primaryColor) => ({\n    inputBg: '$grayBlue7',\n    inputBorder: '$grayBlue9',\n    inputFocusBg: tinycolor('black').setAlpha(0.15).toHslString(),\n    inputFocusBorder: primaryColor.helpers.pickScale(11),\n    inputHoverBg: '$whiteA4',\n    inputText: tinycolor('white').setAlpha(0.8).toHslString(),\n    inputPlaceholder: '$whiteA10',\n    inputDisabledText: tinycolor('white').setAlpha(0.35).toHslString(),\n    inputInvalidBorder: '$red9',\n  });\n}\n"],"names":["Theme"],"mappings":";;;AAKiBA,QAAAA,QAAAA;AAAAA,CAAV,CAAUA,WAAV;AAeQA,SAAA,WAAoB,CAAC,kBAAkB;AAAA,IAClD,SAAS;AAAA,IACT,aAAa;AAAA,IACb,cAAc,UAAU,OAAO,EAAE,SAAS,IAAI,EAAE,YAAA;AAAA,IAChD,kBAAkB,aAAa,QAAQ,UAAU,CAAC;AAAA,IAClD,cAAc;AAAA,IACd,WAAW,UAAU,OAAO,EAAE,SAAS,IAAI,EAAE,YAAA;AAAA,IAC7C,kBAAkB;AAAA,IAClB,mBAAmB,UAAU,OAAO,EAAE,SAAS,IAAI,EAAE,YAAA;AAAA,IACrD,oBAAoB;AAAA,EAAA;AAGTA,SAAA,UAAmB,CAAC,kBAAkB;AAAA,IACjD,SAAS;AAAA,IACT,aAAa;AAAA,IACb,cAAc,UAAU,OAAO,EAAE,SAAS,IAAI,EAAE,YAAA;AAAA,IAChD,kBAAkB,aAAa,QAAQ,UAAU,EAAE;AAAA,IACnD,cAAc;AAAA,IACd,WAAW,UAAU,OAAO,EAAE,SAAS,GAAG,EAAE,YAAA;AAAA,IAC5C,kBAAkB;AAAA,IAClB,mBAAmB,UAAU,OAAO,EAAE,SAAS,IAAI,EAAE,YAAA;AAAA,IACrD,oBAAoB;AAAA,EAAA;AACtB,GArCeA,QAAAA,UAAAA,gBAAA,CAAA,EAAA;"}
+{"version":3,"file":"Input.themes.cjs","names":[],"sources":["../../../components/Input/Input.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\nimport tinycolor from 'tinycolor2';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\n\nexport namespace Theme {\n  export type Colors = {\n    inputBg: Property.Color;\n    inputBorder: Property.Color;\n    inputFocusBg: Property.Color;\n    inputFocusBorder: Property.Color;\n    inputHoverBg: Property.Color;\n    inputText: Property.Color;\n    inputPlaceholder: Property.Color;\n    inputDisabledText: Property.Color;\n    inputInvalidBorder: Property.Color;\n  };\n\n  type Factory = (primaryColor: ColorInfo) => Colors;\n\n  export const getLight: Factory = (primaryColor) => ({\n    inputBg: '$deepBlue1',\n    inputBorder: '$grayBlue9',\n    inputFocusBg: tinycolor('black').setAlpha(0.15).toHslString(),\n    inputFocusBorder: primaryColor.helpers.pickScale(8),\n    inputHoverBg: '$whiteA9',\n    inputText: tinycolor('black').setAlpha(0.74).toHslString(),\n    inputPlaceholder: '$blackA10',\n    inputDisabledText: tinycolor('black').setAlpha(0.35).toHslString(),\n    inputInvalidBorder: '$red9',\n  });\n\n  export const getDark: Factory = (primaryColor) => ({\n    inputBg: '$grayBlue7',\n    inputBorder: '$grayBlue9',\n    inputFocusBg: tinycolor('black').setAlpha(0.15).toHslString(),\n    inputFocusBorder: primaryColor.helpers.pickScale(11),\n    inputHoverBg: '$whiteA4',\n    inputText: tinycolor('white').setAlpha(0.8).toHslString(),\n    inputPlaceholder: '$whiteA10',\n    inputDisabledText: tinycolor('white').setAlpha(0.35).toHslString(),\n    inputInvalidBorder: '$red9',\n  });\n}\n"],"mappings":";;;;AAKO,IAAA;;AAeQ,QAAA,YAAqB,kBAAkB;EAClD,SAAS;EACT,aAAa;EACb,eAAA,GAAA,WAAA,SAAwB,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAC7D,kBAAkB,aAAa,QAAQ,UAAU,EAAE;EACnD,cAAc;EACd,YAAA,GAAA,WAAA,SAAqB,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAC1D,kBAAkB;EAClB,oBAAA,GAAA,WAAA,SAA6B,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAClE,oBAAoB;EACrB;AAEY,QAAA,WAAoB,kBAAkB;EACjD,SAAS;EACT,aAAa;EACb,eAAA,GAAA,WAAA,SAAwB,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAC7D,kBAAkB,aAAa,QAAQ,UAAU,GAAG;EACpD,cAAc;EACd,YAAA,GAAA,WAAA,SAAqB,QAAQ,CAAC,SAAS,GAAI,CAAC,aAAa;EACzD,kBAAkB;EAClB,oBAAA,GAAA,WAAA,SAA6B,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAClE,oBAAoB;EACrB;yBACF"}

package/dist/components/Input/Input.themes.js

@@ -1,30 +1,31 @@
 import tinycolor from "tinycolor2";
+//#region components/Input/Input.themes.ts
 var Theme;
-((Theme2) => {
-  Theme2.getLight = (primaryColor) => ({
-    inputBg: "$deepBlue1",
-    inputBorder: "$grayBlue9",
-    inputFocusBg: tinycolor("black").setAlpha(0.15).toHslString(),
-    inputFocusBorder: primaryColor.helpers.pickScale(8),
-    inputHoverBg: "$whiteA9",
-    inputText: tinycolor("black").setAlpha(0.74).toHslString(),
-    inputPlaceholder: "$blackA10",
-    inputDisabledText: tinycolor("black").setAlpha(0.35).toHslString(),
-    inputInvalidBorder: "$red9"
-  });
-  Theme2.getDark = (primaryColor) => ({
-    inputBg: "$grayBlue7",
-    inputBorder: "$grayBlue9",
-    inputFocusBg: tinycolor("black").setAlpha(0.15).toHslString(),
-    inputFocusBorder: primaryColor.helpers.pickScale(11),
-    inputHoverBg: "$whiteA4",
-    inputText: tinycolor("white").setAlpha(0.8).toHslString(),
-    inputPlaceholder: "$whiteA10",
-    inputDisabledText: tinycolor("white").setAlpha(0.35).toHslString(),
-    inputInvalidBorder: "$red9"
-  });
+(function(_Theme) {
+	_Theme.getLight = (primaryColor) => ({
+		inputBg: "$deepBlue1",
+		inputBorder: "$grayBlue9",
+		inputFocusBg: tinycolor("black").setAlpha(.15).toHslString(),
+		inputFocusBorder: primaryColor.helpers.pickScale(8),
+		inputHoverBg: "$whiteA9",
+		inputText: tinycolor("black").setAlpha(.74).toHslString(),
+		inputPlaceholder: "$blackA10",
+		inputDisabledText: tinycolor("black").setAlpha(.35).toHslString(),
+		inputInvalidBorder: "$red9"
+	});
+	_Theme.getDark = (primaryColor) => ({
+		inputBg: "$grayBlue7",
+		inputBorder: "$grayBlue9",
+		inputFocusBg: tinycolor("black").setAlpha(.15).toHslString(),
+		inputFocusBorder: primaryColor.helpers.pickScale(11),
+		inputHoverBg: "$whiteA4",
+		inputText: tinycolor("white").setAlpha(.8).toHslString(),
+		inputPlaceholder: "$whiteA10",
+		inputDisabledText: tinycolor("white").setAlpha(.35).toHslString(),
+		inputInvalidBorder: "$red9"
+	});
 })(Theme || (Theme = {}));
-export {
-  Theme
-};
-//# sourceMappingURL=Input.themes.js.map
+//#endregion
+export { Theme };
+
+//# sourceMappingURL=Input.themes.js.map

package/dist/components/Input/Input.themes.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.themes.js","sources":["../../../components/Input/Input.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\nimport tinycolor from 'tinycolor2';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\n\nexport namespace Theme {\n  export type Colors = {\n    inputBg: Property.Color;\n    inputBorder: Property.Color;\n    inputFocusBg: Property.Color;\n    inputFocusBorder: Property.Color;\n    inputHoverBg: Property.Color;\n    inputText: Property.Color;\n    inputPlaceholder: Property.Color;\n    inputDisabledText: Property.Color;\n    inputInvalidBorder: Property.Color;\n  };\n\n  type Factory = (primaryColor: ColorInfo) => Colors;\n\n  export const getLight: Factory = (primaryColor) => ({\n    inputBg: '$deepBlue1',\n    inputBorder: '$grayBlue9',\n    inputFocusBg: tinycolor('black').setAlpha(0.15).toHslString(),\n    inputFocusBorder: primaryColor.helpers.pickScale(8),\n    inputHoverBg: '$whiteA9',\n    inputText: tinycolor('black').setAlpha(0.74).toHslString(),\n    inputPlaceholder: '$blackA10',\n    inputDisabledText: tinycolor('black').setAlpha(0.35).toHslString(),\n    inputInvalidBorder: '$red9',\n  });\n\n  export const getDark: Factory = (primaryColor) => ({\n    inputBg: '$grayBlue7',\n    inputBorder: '$grayBlue9',\n    inputFocusBg: tinycolor('black').setAlpha(0.15).toHslString(),\n    inputFocusBorder: primaryColor.helpers.pickScale(11),\n    inputHoverBg: '$whiteA4',\n    inputText: tinycolor('white').setAlpha(0.8).toHslString(),\n    inputPlaceholder: '$whiteA10',\n    inputDisabledText: tinycolor('white').setAlpha(0.35).toHslString(),\n    inputInvalidBorder: '$red9',\n  });\n}\n"],"names":["Theme"],"mappings":";AAKO,IAAU;AAAA,CAAV,CAAUA,WAAV;AAeQA,SAAA,WAAoB,CAAC,kBAAkB;AAAA,IAClD,SAAS;AAAA,IACT,aAAa;AAAA,IACb,cAAc,UAAU,OAAO,EAAE,SAAS,IAAI,EAAE,YAAA;AAAA,IAChD,kBAAkB,aAAa,QAAQ,UAAU,CAAC;AAAA,IAClD,cAAc;AAAA,IACd,WAAW,UAAU,OAAO,EAAE,SAAS,IAAI,EAAE,YAAA;AAAA,IAC7C,kBAAkB;AAAA,IAClB,mBAAmB,UAAU,OAAO,EAAE,SAAS,IAAI,EAAE,YAAA;AAAA,IACrD,oBAAoB;AAAA,EAAA;AAGTA,SAAA,UAAmB,CAAC,kBAAkB;AAAA,IACjD,SAAS;AAAA,IACT,aAAa;AAAA,IACb,cAAc,UAAU,OAAO,EAAE,SAAS,IAAI,EAAE,YAAA;AAAA,IAChD,kBAAkB,aAAa,QAAQ,UAAU,EAAE;AAAA,IACnD,cAAc;AAAA,IACd,WAAW,UAAU,OAAO,EAAE,SAAS,GAAG,EAAE,YAAA;AAAA,IAC5C,kBAAkB;AAAA,IAClB,mBAAmB,UAAU,OAAO,EAAE,SAAS,IAAI,EAAE,YAAA;AAAA,IACrD,oBAAoB;AAAA,EAAA;AACtB,GArCe,UAAA,QAAA,CAAA,EAAA;"}
+{"version":3,"file":"Input.themes.js","names":[],"sources":["../../../components/Input/Input.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\nimport tinycolor from 'tinycolor2';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\n\nexport namespace Theme {\n  export type Colors = {\n    inputBg: Property.Color;\n    inputBorder: Property.Color;\n    inputFocusBg: Property.Color;\n    inputFocusBorder: Property.Color;\n    inputHoverBg: Property.Color;\n    inputText: Property.Color;\n    inputPlaceholder: Property.Color;\n    inputDisabledText: Property.Color;\n    inputInvalidBorder: Property.Color;\n  };\n\n  type Factory = (primaryColor: ColorInfo) => Colors;\n\n  export const getLight: Factory = (primaryColor) => ({\n    inputBg: '$deepBlue1',\n    inputBorder: '$grayBlue9',\n    inputFocusBg: tinycolor('black').setAlpha(0.15).toHslString(),\n    inputFocusBorder: primaryColor.helpers.pickScale(8),\n    inputHoverBg: '$whiteA9',\n    inputText: tinycolor('black').setAlpha(0.74).toHslString(),\n    inputPlaceholder: '$blackA10',\n    inputDisabledText: tinycolor('black').setAlpha(0.35).toHslString(),\n    inputInvalidBorder: '$red9',\n  });\n\n  export const getDark: Factory = (primaryColor) => ({\n    inputBg: '$grayBlue7',\n    inputBorder: '$grayBlue9',\n    inputFocusBg: tinycolor('black').setAlpha(0.15).toHslString(),\n    inputFocusBorder: primaryColor.helpers.pickScale(11),\n    inputHoverBg: '$whiteA4',\n    inputText: tinycolor('white').setAlpha(0.8).toHslString(),\n    inputPlaceholder: '$whiteA10',\n    inputDisabledText: tinycolor('white').setAlpha(0.35).toHslString(),\n    inputInvalidBorder: '$red9',\n  });\n}\n"],"mappings":";;AAKO,IAAA;;AAeQ,QAAA,YAAqB,kBAAkB;EAClD,SAAS;EACT,aAAa;EACb,cAAc,UAAU,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAC7D,kBAAkB,aAAa,QAAQ,UAAU,EAAE;EACnD,cAAc;EACd,WAAW,UAAU,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAC1D,kBAAkB;EAClB,mBAAmB,UAAU,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAClE,oBAAoB;EACrB;AAEY,QAAA,WAAoB,kBAAkB;EACjD,SAAS;EACT,aAAa;EACb,cAAc,UAAU,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAC7D,kBAAkB,aAAa,QAAQ,UAAU,GAAG;EACpD,cAAc;EACd,WAAW,UAAU,QAAQ,CAAC,SAAS,GAAI,CAAC,aAAa;EACzD,kBAAkB;EAClB,mBAAmB,UAAU,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAClE,oBAAoB;EACrB;yBACF"}

package/dist/components/Input/Input.vanilla.cjs

@@ -1,56 +1,73 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const dynamic = require("@vanilla-extract/dynamic");
-const React = require("react");
-const cssProps = require("../../styles/cssProps.cjs");
-const themeContext = require("../../styles/themeContext.cjs");
-const Input_vanilla_css = require("./Input.vanilla.css.cjs");
-const InputVanilla = React.forwardRef(
-  ({ size, startAdornment, endAdornment, css, variant, state, cursor, className, style, ...props }, forwardedRef) => {
-    const inputRef = React.useRef(null);
-    const { colors } = themeContext.useVanillaExtractTheme();
-    const { style: cssStyles, vars } = cssProps.processCSSProp(css, colors);
-    const mergedStyles = { ...cssStyles, ...style, ...dynamic.assignInlineVars(vars) };
-    React.useImperativeHandle(forwardedRef, () => {
-      const { current } = inputRef;
-      if (current) {
-        current.clear = () => {
-          current.value = "";
-        };
-      }
-      return current;
-    }, [inputRef]);
-    const hasStartAdornment = React.useMemo(() => Boolean(startAdornment), [startAdornment]);
-    const hasEndAdornment = React.useMemo(() => Boolean(endAdornment), [endAdornment]);
-    const inputWrapperClass = Input_vanilla_css.inputWrapperRecipe({
-      disabled: props.disabled,
-      state,
-      size
-    });
-    const styledInputClass = Input_vanilla_css.styledInputRecipe({
-      size,
-      variant,
-      state,
-      cursor,
-      startAdornment: hasStartAdornment,
-      endAdornment: hasEndAdornment
-    });
-    const adornmentWrapperStartClass = Input_vanilla_css.adornmentWrapperRecipe({
-      size,
-      variant: "start"
-    });
-    const adornmentWrapperEndClass = Input_vanilla_css.adornmentWrapperRecipe({
-      size,
-      variant: "end"
-    });
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${inputWrapperClass} ${className || ""}`.trim(), style: mergedStyles, children: [
-      hasStartAdornment && /* @__PURE__ */ jsxRuntime.jsx("div", { className: adornmentWrapperStartClass, children: startAdornment }),
-      /* @__PURE__ */ jsxRuntime.jsx("input", { ref: inputRef, className: styledInputClass, ...props }),
-      hasEndAdornment && /* @__PURE__ */ jsxRuntime.jsx("div", { className: adornmentWrapperEndClass, children: endAdornment })
-    ] });
-  }
-);
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+const require_cssProps = require("../../styles/cssProps.cjs");
+const require_themeContext = require("../../styles/themeContext.cjs");
+const require_Input_vanilla_css = require("./Input.vanilla.css.cjs");
+let react = require("react");
+react = require_runtime.__toESM(react, 1);
+let _vanilla_extract_dynamic = require("@vanilla-extract/dynamic");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region components/Input/Input.vanilla.tsx
+var InputVanilla = react.default.forwardRef(({ size, startAdornment, endAdornment, css, variant, state, cursor, className, style, ...props }, forwardedRef) => {
+	const inputRef = react.default.useRef(null);
+	const { colors } = require_themeContext.useVanillaExtractTheme();
+	const { style: cssStyles, vars } = require_cssProps.processCSSProp(css, colors);
+	const mergedStyles = {
+		...cssStyles,
+		...style,
+		...(0, _vanilla_extract_dynamic.assignInlineVars)(vars)
+	};
+	react.default.useImperativeHandle(forwardedRef, () => {
+		const { current } = inputRef;
+		if (current) current.clear = () => {
+			current.value = "";
+		};
+		return current;
+	}, [inputRef]);
+	const hasStartAdornment = react.default.useMemo(() => Boolean(startAdornment), [startAdornment]);
+	const hasEndAdornment = react.default.useMemo(() => Boolean(endAdornment), [endAdornment]);
+	const inputWrapperClass = require_Input_vanilla_css.inputWrapperRecipe({
+		disabled: props.disabled,
+		state,
+		size
+	});
+	const styledInputClass = require_Input_vanilla_css.styledInputRecipe({
+		size,
+		variant,
+		state,
+		cursor,
+		startAdornment: hasStartAdornment,
+		endAdornment: hasEndAdornment
+	});
+	const adornmentWrapperStartClass = require_Input_vanilla_css.adornmentWrapperRecipe({
+		size,
+		variant: "start"
+	});
+	const adornmentWrapperEndClass = require_Input_vanilla_css.adornmentWrapperRecipe({
+		size,
+		variant: "end"
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: `${inputWrapperClass} ${className || ""}`.trim(),
+		style: mergedStyles,
+		children: [
+			hasStartAdornment && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: adornmentWrapperStartClass,
+				children: startAdornment
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+				ref: inputRef,
+				className: styledInputClass,
+				...props
+			}),
+			hasEndAdornment && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: adornmentWrapperEndClass,
+				children: endAdornment
+			})
+		]
+	});
+});
 InputVanilla.displayName = "InputVanilla";
+//#endregion
 exports.InputVanilla = InputVanilla;
-//# sourceMappingURL=Input.vanilla.cjs.map
+
+//# sourceMappingURL=Input.vanilla.cjs.map

package/dist/components/Input/Input.vanilla.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Input.vanilla.cjs","sources":["../../../components/Input/Input.vanilla.tsx"],"sourcesContent":["import { assignInlineVars } from '@vanilla-extract/dynamic';\nimport { RecipeVariants } from '@vanilla-extract/recipes';\nimport React from 'react';\n\nimport { CSSProps, processCSSProp } from '../../styles/cssProps';\nimport { useVanillaExtractTheme } from '../../styles/themeContext';\nimport { adornmentWrapperRecipe, inputWrapperRecipe, styledInputRecipe } from './Input.vanilla.css';\n\ntype StyledInputRecipeVariants = NonNullable<RecipeVariants<typeof styledInputRecipe>>;\n\nexport interface InputVanillaOwnProps extends CSSProps {\n  size?: StyledInputRecipeVariants['size'];\n  variant?: StyledInputRecipeVariants['variant'];\n  state?: StyledInputRecipeVariants['state'];\n  cursor?: StyledInputRecipeVariants['cursor'];\n  startAdornment?: React.ReactNode;\n  endAdornment?: React.ReactNode;\n  type?: string;\n}\n\nexport type InputVanillaProps = Omit<React.InputHTMLAttributes<any>, 'size'> & InputVanillaOwnProps;\n\nexport interface InputVanillaHandle extends HTMLInputElement {\n  clear: () => void;\n}\n\nexport const InputVanilla = React.forwardRef<InputVanillaHandle, InputVanillaProps>(\n  (\n    { size, startAdornment, endAdornment, css, variant, state, cursor, className, style, ...props },\n    forwardedRef,\n  ) => {\n    const inputRef = React.useRef<InputVanillaHandle>(null);\n    const { colors } = useVanillaExtractTheme();\n    const { style: cssStyles, vars } = processCSSProp(css, colors);\n    const mergedStyles = { ...cssStyles, ...style, ...assignInlineVars(vars) };\n\n    React.useImperativeHandle(forwardedRef, () => {\n      const { current } = inputRef;\n      if (current) {\n        current.clear = () => {\n          current.value = '';\n        };\n      }\n      return current as InputVanillaHandle;\n    }, [inputRef]);\n\n    const hasStartAdornment = React.useMemo(() => Boolean(startAdornment), [startAdornment]);\n    const hasEndAdornment = React.useMemo(() => Boolean(endAdornment), [endAdornment]);\n\n    const inputWrapperClass = inputWrapperRecipe({\n      disabled: props.disabled,\n      state,\n      size,\n    });\n\n    const styledInputClass = styledInputRecipe({\n      size,\n      variant,\n      state,\n      cursor,\n      startAdornment: hasStartAdornment,\n      endAdornment: hasEndAdornment,\n    });\n\n    const adornmentWrapperStartClass = adornmentWrapperRecipe({\n      size,\n      variant: 'start',\n    });\n\n    const adornmentWrapperEndClass = adornmentWrapperRecipe({\n      size,\n      variant: 'end',\n    });\n\n    return (\n      <div className={`${inputWrapperClass} ${className || ''}`.trim()} style={mergedStyles}>\n        {hasStartAdornment && <div className={adornmentWrapperStartClass}>{startAdornment}</div>}\n\n        <input ref={inputRef} className={styledInputClass} {...props} />\n\n        {hasEndAdornment && <div className={adornmentWrapperEndClass}>{endAdornment}</div>}\n      </div>\n    );\n  },\n);\n\nInputVanilla.displayName = 'InputVanilla';\n"],"names":["useVanillaExtractTheme","processCSSProp","assignInlineVars","inputWrapperRecipe","styledInputRecipe","adornmentWrapperRecipe","jsxs","jsx"],"mappings":";;;;;;;;AA0BO,MAAM,eAAe,MAAM;AAAA,EAChC,CACE,EAAE,MAAM,gBAAgB,cAAc,KAAK,SAAS,OAAO,QAAQ,WAAW,OAAO,GAAG,MAAA,GACxF,iBACG;AACH,UAAM,WAAW,MAAM,OAA2B,IAAI;AACtD,UAAM,EAAE,OAAA,IAAWA,oCAAA;AACnB,UAAM,EAAE,OAAO,WAAW,SAASC,SAAAA,eAAe,KAAK,MAAM;AAC7D,UAAM,eAAe,EAAE,GAAG,WAAW,GAAG,OAAO,GAAGC,QAAAA,iBAAiB,IAAI,EAAA;AAEvE,UAAM,oBAAoB,cAAc,MAAM;AAC5C,YAAM,EAAE,YAAY;AACpB,UAAI,SAAS;AACX,gBAAQ,QAAQ,MAAM;AACpB,kBAAQ,QAAQ;AAAA,QAClB;AAAA,MACF;AACA,aAAO;AAAA,IACT,GAAG,CAAC,QAAQ,CAAC;AAEb,UAAM,oBAAoB,MAAM,QAAQ,MAAM,QAAQ,cAAc,GAAG,CAAC,cAAc,CAAC;AACvF,UAAM,kBAAkB,MAAM,QAAQ,MAAM,QAAQ,YAAY,GAAG,CAAC,YAAY,CAAC;AAEjF,UAAM,oBAAoBC,kBAAAA,mBAAmB;AAAA,MAC3C,UAAU,MAAM;AAAA,MAChB;AAAA,MACA;AAAA,IAAA,CACD;AAED,UAAM,mBAAmBC,kBAAAA,kBAAkB;AAAA,MACzC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,gBAAgB;AAAA,MAChB,cAAc;AAAA,IAAA,CACf;AAED,UAAM,6BAA6BC,kBAAAA,uBAAuB;AAAA,MACxD;AAAA,MACA,SAAS;AAAA,IAAA,CACV;AAED,UAAM,2BAA2BA,kBAAAA,uBAAuB;AAAA,MACtD;AAAA,MACA,SAAS;AAAA,IAAA,CACV;AAED,WACEC,2BAAAA,KAAC,OAAA,EAAI,WAAW,GAAG,iBAAiB,IAAI,aAAa,EAAE,GAAG,KAAA,GAAQ,OAAO,cACtE,UAAA;AAAA,MAAA,qBAAqBC,2BAAAA,IAAC,OAAA,EAAI,WAAW,4BAA6B,UAAA,gBAAe;AAAA,qCAEjF,SAAA,EAAM,KAAK,UAAU,WAAW,kBAAmB,GAAG,OAAO;AAAA,MAE7D,mBAAmBA,2BAAAA,IAAC,OAAA,EAAI,WAAW,0BAA2B,UAAA,aAAA,CAAa;AAAA,IAAA,GAC9E;AAAA,EAEJ;AACF;AAEA,aAAa,cAAc;;"}
+{"version":3,"file":"Input.vanilla.cjs","names":[],"sources":["../../../components/Input/Input.vanilla.tsx"],"sourcesContent":["import { assignInlineVars } from '@vanilla-extract/dynamic';\nimport { RecipeVariants } from '@vanilla-extract/recipes';\nimport React from 'react';\n\nimport { CSSProps, processCSSProp } from '../../styles/cssProps';\nimport { useVanillaExtractTheme } from '../../styles/themeContext';\nimport { adornmentWrapperRecipe, inputWrapperRecipe, styledInputRecipe } from './Input.vanilla.css';\n\ntype StyledInputRecipeVariants = NonNullable<RecipeVariants<typeof styledInputRecipe>>;\n\nexport interface InputVanillaOwnProps extends CSSProps {\n  size?: StyledInputRecipeVariants['size'];\n  variant?: StyledInputRecipeVariants['variant'];\n  state?: StyledInputRecipeVariants['state'];\n  cursor?: StyledInputRecipeVariants['cursor'];\n  startAdornment?: React.ReactNode;\n  endAdornment?: React.ReactNode;\n  type?: string;\n}\n\nexport type InputVanillaProps = Omit<React.InputHTMLAttributes<any>, 'size'> & InputVanillaOwnProps;\n\nexport interface InputVanillaHandle extends HTMLInputElement {\n  clear: () => void;\n}\n\nexport const InputVanilla = React.forwardRef<InputVanillaHandle, InputVanillaProps>(\n  (\n    { size, startAdornment, endAdornment, css, variant, state, cursor, className, style, ...props },\n    forwardedRef,\n  ) => {\n    const inputRef = React.useRef<InputVanillaHandle>(null);\n    const { colors } = useVanillaExtractTheme();\n    const { style: cssStyles, vars } = processCSSProp(css, colors);\n    const mergedStyles = { ...cssStyles, ...style, ...assignInlineVars(vars) };\n\n    React.useImperativeHandle(forwardedRef, () => {\n      const { current } = inputRef;\n      if (current) {\n        current.clear = () => {\n          current.value = '';\n        };\n      }\n      return current as InputVanillaHandle;\n    }, [inputRef]);\n\n    const hasStartAdornment = React.useMemo(() => Boolean(startAdornment), [startAdornment]);\n    const hasEndAdornment = React.useMemo(() => Boolean(endAdornment), [endAdornment]);\n\n    const inputWrapperClass = inputWrapperRecipe({\n      disabled: props.disabled,\n      state,\n      size,\n    });\n\n    const styledInputClass = styledInputRecipe({\n      size,\n      variant,\n      state,\n      cursor,\n      startAdornment: hasStartAdornment,\n      endAdornment: hasEndAdornment,\n    });\n\n    const adornmentWrapperStartClass = adornmentWrapperRecipe({\n      size,\n      variant: 'start',\n    });\n\n    const adornmentWrapperEndClass = adornmentWrapperRecipe({\n      size,\n      variant: 'end',\n    });\n\n    return (\n      <div className={`${inputWrapperClass} ${className || ''}`.trim()} style={mergedStyles}>\n        {hasStartAdornment && <div className={adornmentWrapperStartClass}>{startAdornment}</div>}\n\n        <input ref={inputRef} className={styledInputClass} {...props} />\n\n        {hasEndAdornment && <div className={adornmentWrapperEndClass}>{endAdornment}</div>}\n      </div>\n    );\n  },\n);\n\nInputVanilla.displayName = 'InputVanilla';\n"],"mappings":";;;;;;;;;AA0BA,IAAa,eAAe,MAAA,QAAM,YAE9B,EAAE,MAAM,gBAAgB,cAAc,KAAK,SAAS,OAAO,QAAQ,WAAW,OAAO,GAAG,SACxF,iBACG;CACH,MAAM,WAAW,MAAA,QAAM,OAA2B,KAAK;CACvD,MAAM,EAAE,WAAW,qBAAA,wBAAwB;CAC3C,MAAM,EAAE,OAAO,WAAW,SAAS,iBAAA,eAAe,KAAK,OAAO;CAC9D,MAAM,eAAe;EAAE,GAAG;EAAW,GAAG;EAAO,IAAA,GAAA,yBAAA,kBAAoB,KAAK;EAAE;AAE1E,OAAA,QAAM,oBAAoB,oBAAoB;EAC5C,MAAM,EAAE,YAAY;AACpB,MAAI,QACF,SAAQ,cAAc;AACpB,WAAQ,QAAQ;;AAGpB,SAAO;IACN,CAAC,SAAS,CAAC;CAEd,MAAM,oBAAoB,MAAA,QAAM,cAAc,QAAQ,eAAe,EAAE,CAAC,eAAe,CAAC;CACxF,MAAM,kBAAkB,MAAA,QAAM,cAAc,QAAQ,aAAa,EAAE,CAAC,aAAa,CAAC;CAElF,MAAM,oBAAoB,0BAAA,mBAAmB;EAC3C,UAAU,MAAM;EAChB;EACA;EACD,CAAC;CAEF,MAAM,mBAAmB,0BAAA,kBAAkB;EACzC;EACA;EACA;EACA;EACA,gBAAgB;EAChB,cAAc;EACf,CAAC;CAEF,MAAM,6BAA6B,0BAAA,uBAAuB;EACxD;EACA,SAAS;EACV,CAAC;CAEF,MAAM,2BAA2B,0BAAA,uBAAuB;EACtD;EACA,SAAS;EACV,CAAC;AAEF,QACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EAAK,WAAW,GAAG,kBAAkB,GAAG,aAAa,KAAK,MAAM;EAAE,OAAO;YAAzE;GACG,qBAAqB,iBAAA,GAAA,kBAAA,KAAC,OAAD;IAAK,WAAW;cAA6B;IAAqB,CAAA;GAExF,iBAAA,GAAA,kBAAA,KAAC,SAAD;IAAO,KAAK;IAAU,WAAW;IAAkB,GAAI;IAAS,CAAA;GAE/D,mBAAmB,iBAAA,GAAA,kBAAA,KAAC,OAAD;IAAK,WAAW;cAA2B;IAAmB,CAAA;GAC9E;;EAGX;AAED,aAAa,cAAc"}