@traefik-labs/faency 12.0.7

package/dist/components/Input/Input.js

@@ -0,0 +1,379 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import React from "react";
+import { styled } from "../../stitches.config.js";
+import { elevationVariants } from "../Elevation/Elevation.js";
+const FOCUS_SHADOW = elevationVariants[1].boxShadow;
+const SMALL_HEIGHT = "$5";
+const MEDIUM_HEIGHT = "$6";
+const LARGE_HEIGHT = "$7";
+const StyledInput = styled("input", {
+  // Reset
+  appearance: "none",
+  borderWidth: "0",
+  boxSizing: "border-box",
+  fontFamily: "$rubik",
+  margin: "0",
+  outline: "none",
+  padding: "0",
+  width: "100%",
+  WebkitTapHighlightColor: "rgba(0,0,0,0)",
+  // Custom
+  position: "relative",
+  backgroundColor: "transparent",
+  borderRadius: "inherit",
+  // inherit border radius from InputWrapper
+  boxShadow: "inset 0 0 0 1px $colors$inputBorder",
+  color: "$inputText",
+  fontVariantNumeric: "tabular-nums",
+  transition: "box-shadow .1s ease-in-out",
+  '&[type="number"]': {
+    pr: "0"
+    // remove padding for number native controls
+  },
+  "&:-webkit-autofill,&:autofill": {
+    boxShadow: "inset 0 0 0 1px $colors$inputBorder, inset 0 0 0 100px $colors$inputBg"
+  },
+  "&:-webkit-autofill::first-line,&:autofill::first-line": {
+    fontFamily: "$rubik",
+    color: "$hiContrast"
+  },
+  "&:focus-visible": {
+    boxShadow: `inset 0 0 0 2px $colors$inputFocusBorder, ${FOCUS_SHADOW}`
+  },
+  "&::placeholder": {
+    color: "$inputPlaceholder"
+  },
+  "&:read-only:not(:disabled)": {
+    boxShadow: "none"
+  },
+  "&:disabled": {
+    pointerEvents: "none",
+    color: "$inputDisabledText"
+  },
+  variants: {
+    size: {
+      small: {
+        height: SMALL_HEIGHT,
+        fontSize: "$1",
+        px: "$2",
+        lineHeight: "$sizes$5",
+        "&:-webkit-autofill::first-line,&:autofill::first-line": {
+          fontSize: "$1"
+        }
+      },
+      medium: {
+        height: MEDIUM_HEIGHT,
+        fontSize: "$3",
+        px: "$3",
+        lineHeight: "$sizes$6",
+        "&:-webkit-autofill::first-line,&:autofill::first-line": {
+          fontSize: "$3"
+        }
+      },
+      large: {
+        height: LARGE_HEIGHT,
+        fontSize: "$3",
+        px: "$3",
+        lineHeight: "$sizes$7",
+        "&:-webkit-autofill::first-line,&:autofill::first-line": {
+          fontSize: "$3"
+        }
+      }
+    },
+    startAdornment: {
+      true: {}
+    },
+    endAdornment: {
+      true: {}
+    },
+    variant: {
+      ghost: {
+        boxShadow: "none",
+        "&:disabled": {
+          boxShadow: "none"
+        },
+        backgroundColor: "transparent",
+        "&:focus-visible": {
+          backgroundColor: "$loContrast"
+        }
+      }
+    },
+    state: {
+      invalid: {
+        boxShadow: "inset 0 0 0 1px $colors$inputInvalidBorder",
+        "&:focus-visible": {
+          boxShadow: `inset 0 0 0 2px $colors$inputInvalidBorder, ${FOCUS_SHADOW}`
+        }
+      }
+    },
+    cursor: {
+      default: {
+        cursor: "default",
+        "@hover": {
+          "&:hover:not(:read-only)": {
+            cursor: "text"
+          }
+        },
+        "&:focus-visible:not(:read-only)": {
+          cursor: "text"
+        }
+      },
+      text: {
+        cursor: "text"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "medium",
+    cursor: "default"
+  },
+  compoundVariants: [
+    {
+      variant: "ghost",
+      state: "invalid",
+      css: {
+        boxShadow: "inset 0 0 0 1px $colors$inputInvalidBorder"
+      }
+    },
+    {
+      startAdornment: true,
+      size: "small",
+      css: {
+        paddingInlineStart: "calc($2 + 15px)"
+      }
+    },
+    {
+      startAdornment: true,
+      size: "medium",
+      css: {
+        paddingInlineStart: "calc($3 + 15px)"
+      }
+    },
+    {
+      startAdornment: true,
+      size: "large",
+      css: {
+        paddingInlineStart: "calc($3 + 15px)"
+      }
+    },
+    {
+      endAdornment: true,
+      size: "small",
+      css: {
+        paddingInlineEnd: "calc($2 + 15px)"
+      }
+    },
+    {
+      endAdornment: true,
+      size: "medium",
+      css: {
+        paddingInlineEnd: "calc($3 + 15px)"
+      }
+    },
+    {
+      endAdornment: true,
+      size: "large",
+      css: {
+        paddingInlineEnd: "calc($3 + 15px)"
+      }
+    },
+    {
+      endAdornment: true,
+      size: "small",
+      state: "invalid",
+      css: {
+        paddingInlineEnd: "calc($4 + 30px)"
+        // size padding + adornment margins + icon size + icon size
+      }
+    },
+    {
+      endAdornment: true,
+      size: "medium",
+      state: "invalid",
+      css: {
+        paddingInlineEnd: "calc($6 + 30px)"
+        // size padding + adornment margins + icon size + icon size
+      }
+    },
+    {
+      endAdornment: true,
+      size: "large",
+      state: "invalid",
+      css: {
+        paddingInlineEnd: "calc($6 + 30px)"
+        // size padding + adornment margins + icon size + icon size
+      }
+    }
+  ]
+});
+const InputWrapper = styled("div", {
+  // Reset
+  outline: "none",
+  lineHeight: 0,
+  position: "relative",
+  backgroundColor: "$inputBg",
+  color: "$inputPlaceholder",
+  "&::before": {
+    boxSizing: "border-box",
+    content: '""',
+    position: "absolute",
+    inset: 0,
+    pointerEvents: "none"
+  },
+  "&::after": {
+    boxSizing: "border-box",
+    content: '""',
+    position: "absolute",
+    inset: 0,
+    pointerEvents: "none"
+  },
+  "&:focus-visible": {
+    "&::before": {
+      backgroundColor: "$inputFocusBg"
+    },
+    "&::after": {
+      backgroundColor: "$primary",
+      opacity: 0.15
+    }
+  },
+  "@hover": {
+    "&:hover": {
+      "&::before": {
+        backgroundColor: "$inputHoverBg"
+      },
+      "&::after": {
+        backgroundColor: "$primary",
+        opacity: 0.05
+      }
+    }
+  },
+  variants: {
+    disabled: {
+      true: {
+        opacity: 0.7,
+        color: "$inputDisabledText",
+        "@hover": {
+          "&:hover": {
+            "&::before": {
+              backgroundColor: "inherit"
+            },
+            "&::after": {
+              backgroundColor: "inherit"
+            }
+          }
+        }
+      }
+    },
+    state: {
+      invalid: {
+        "@hover": {
+          "&:hover": {
+            "&::after": {
+              backgroundColor: "$inputInvalidBorder"
+            }
+          }
+        }
+      }
+    },
+    size: {
+      small: {
+        borderRadius: "$2",
+        "&::before, &::after": {
+          borderRadius: "$2"
+        }
+      },
+      medium: {
+        borderRadius: "$3",
+        "&::before, &::after": {
+          borderRadius: "$3"
+        }
+      },
+      large: {
+        borderRadius: "$3",
+        "&::before, &::after": {
+          borderRadius: "$3"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    size: "medium",
+    disabled: false
+  }
+});
+const AdornmentWrapper = styled("div", {
+  position: "absolute",
+  top: 0,
+  height: "100%",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  variants: {
+    size: {
+      small: {
+        mx: "calc($2 / 2)"
+      },
+      medium: {
+        mx: "calc($3 / 2)"
+      },
+      large: {
+        mx: "calc($3 / 2)"
+      }
+    },
+    variant: {
+      start: {
+        left: 0
+      },
+      end: {
+        right: 0
+      }
+    }
+  },
+  defaultVariants: {
+    size: "medium"
+  }
+});
+const AdornmentWrapperStart = styled(AdornmentWrapper, {
+  left: 0
+});
+const AdornmentWrapperEnd = styled(AdornmentWrapper, {
+  right: 0
+});
+const Input = React.forwardRef(
+  ({ size, startAdornment, endAdornment, css, ...props }, forwardedRef) => {
+    const inputRef = React.useRef(null);
+    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]);
+    return /* @__PURE__ */ jsxs(InputWrapper, { css, disabled: props.disabled, state: props.state, children: [
+      hasStartAdornment && /* @__PURE__ */ jsx(AdornmentWrapperStart, { size, children: startAdornment }),
+      /* @__PURE__ */ jsx(
+        StyledInput,
+        {
+          ref: inputRef,
+          startAdornment: hasStartAdornment,
+          endAdornment: hasEndAdornment,
+          size,
+          ...props
+        }
+      ),
+      hasEndAdornment && /* @__PURE__ */ jsx(AdornmentWrapperEnd, { size, children: endAdornment })
+    ] });
+  }
+);
+export {
+  Input
+};
+//# sourceMappingURL=Input.js.map

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

@@ -0,0 +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":"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"}

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

@@ -0,0 +1,40 @@
+"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 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
+};
+exports.inputDarkTheme = inputDarkTheme;
+exports.inputLightTheme = inputLightTheme;
+//# sourceMappingURL=Input.theme.cjs.map

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

@@ -0,0 +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;;;"}

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

@@ -0,0 +1,40 @@
+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
+};
+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
+};
+export {
+  inputDarkTheme,
+  inputLightTheme
+};
+//# sourceMappingURL=Input.theme.js.map

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

@@ -0,0 +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;"}

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

@@ -0,0 +1,29 @@
+"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

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

@@ -0,0 +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;"}

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

@@ -0,0 +1,30 @@
+import tinycolor from "tinycolor2";
+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"
+  });
+})(Theme || (Theme = {}));
+export {
+  Theme
+};
+//# sourceMappingURL=Input.themes.js.map

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

@@ -0,0 +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;"}

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

@@ -0,0 +1,56 @@
+"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 })
+    ] });
+  }
+);
+InputVanilla.displayName = "InputVanilla";
+exports.InputVanilla = InputVanilla;
+//# sourceMappingURL=Input.vanilla.cjs.map

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

@@ -0,0 +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;;"}