@nation-a/ui 0.9.0 → 0.9.2

package/dist/index.cjs

@@ -4116,17 +4116,17 @@ const spinnerRecipe = cva({
   }
 });
 const Spinner = React.forwardRef((props, ref) => {
-  const { color, ...rest } = props;
   const StyledSpinner = styled(ark.div, spinnerRecipe);
   return /* @__PURE__ */ jsxRuntime.jsx(
     StyledSpinner,
     {
       ref,
-      ...rest,
+      ...props,
       css: {
         borderColor: "inherit",
         borderBottomColor: "transparent",
-        borderLeftColor: "transparent"
+        borderLeftColor: "transparent",
+        ...props.css
       }
     }
   );
@@ -4744,15 +4744,12 @@ const dialogRecipe = sva({
   slots: [...anatomy$1.keys(), "header", "footer", "body"],
   base: {
     backdrop: {
-      backdropFilter: "blur(4px)",
-      background: {
-        _light: "white.100A",
-        _dark: "black.100A"
-      },
+      backdropFilter: "blur(3px)",
+      background: "shadow.overlay",
       height: "100vh",
-      left: "0",
       position: "fixed",
       top: "0",
+      left: "0",
       width: "100vw",
       zIndex: "overlay",
       _open: {
@@ -4832,7 +4829,7 @@ const Backdrop$1 = withContext$1(DialogBackdrop, "backdrop");
 const Trigger$1 = withContext$1(DialogTrigger, "trigger");
 const Content = withContext$1(DialogContent, "content");
 const Title = withContext$1(DialogTitle, "title");
-const Description$1 = withContext$1(DialogDescription, "description");
+const Description = withContext$1(DialogDescription, "description");
 const Positioner = withContext$1(DialogPositioner, "positioner");
 const Header = withContext$1(ark.header, "header");
 const Footer = withContext$1(
@@ -4861,7 +4858,7 @@ const Dialog = {
   Trigger: Trigger$1,
   Content,
   Title,
-  Description: Description$1,
+  Description,
   Positioner,
   Header,
   Footer,
@@ -8916,9 +8913,7 @@ const Tag = React.forwardRef(({ imageSrc, text, onDeleteClick, ...rest }, ref) =
       styled.img,
       {
         src: imageSrc,
-        width: 8,
-        height: 8,
-        className: css$1({ borderRadius: "full", overflow: "hidden" }),
+        className: css$1({ borderRadius: "full", overflow: "hidden", width: 8, height: 8 }),
         alt: "avatar thumbnail"
       }
     ) : null,
@@ -8927,186 +8922,186 @@ const Tag = React.forwardRef(({ imageSrc, text, onDeleteClick, ...rest }, ref) =
   ] });
 });
 Tag.displayName = "Tag";
-const inputRecipe = cva({
+const inputRecipe = sva({
+  className: "input",
+  slots: ["inputContainer", "requiredStar", "description", "label", "textLengthIndicator"],
   base: {
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "center",
-    justifyContent: "center",
-    width: "100%",
-    textStyle: "body.md",
-    cursor: "text",
-    color: "content.neutral.bold",
-    gap: 1,
-    borderStyle: "solid",
-    border: 1,
-    outline: "none",
-    p: 2,
-    "& textarea, & input": {
+    inputContainer: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      justifyContent: "center",
+      width: "100%",
+      textStyle: "body.md",
+      cursor: "text",
+      color: "content.neutral.bold",
+      gap: 1,
+      borderStyle: "solid",
+      border: 1,
       outline: "none",
+      p: 2,
+      "& input, & textarea": {
+        outline: "none",
+        width: "100%",
+        height: "100%"
+      },
+      _groupDisabled: {
+        cursor: "not-allowed",
+        color: "content.neutral.disabled"
+      }
+    },
+    requiredStar: {
+      color: "content.danger.default",
+      paddingLeft: 1
+    },
+    description: {
+      textStyle: "label.sm",
+      color: "content.neutral.subtle",
+      paddingLeft: 1,
       width: "100%",
-      height: "100%"
+      textAlign: "start"
+    },
+    label: {
+      textStyle: "label.sm",
+      textAlign: "start",
+      width: "100%",
+      display: "inline-block"
+    },
+    textLengthIndicator: {
+      display: "inline-block",
+      width: "100%",
+      textAlign: "end",
+      paddingRight: 1,
+      marginTop: -0.5,
+      textStyle: "label.sm",
+      color: "content.neutral.subtlest",
+      _groupDisabled: { color: "content.neutral.disabled" }
     }
   },
   variants: {
     isTextArea: {
       true: {
-        minHeight: "56px",
-        "& textarea": {
-          background: "transparent",
-          height: "100%",
-          resize: "none",
-          overflowY: "auto"
+        inputContainer: {
+          minHeight: "56px",
+          "& textarea": {
+            background: "transparent",
+            resize: "none",
+            overflowY: "auto"
+          }
         }
       },
       false: {
-        minHeight: "48px",
-        maxHeight: "60px"
+        inputContainer: {
+          minHeight: "48px",
+          maxHeight: "60px"
+        }
       }
     },
     variant: {
       solid: {
-        borderColor: "transparent"
+        inputContainer: {
+          borderColor: "transparent",
+          _focusWithin: {
+            borderColor: "border.neutral.default"
+          }
+        }
       },
       line: {
-        background: "transparent"
+        inputContainer: {
+          background: "transparent",
+          border: 1,
+          borderColor: "border.neutral.subtle",
+          _focusWithin: {
+            borderColor: "border.neutral.default"
+          },
+          _groupDisabled: {
+            borderColor: "border.neutral.disabled"
+          }
+        }
       }
     },
     color: {
       alpha: {
-        "&::placeholder": {
-          color: "content.static.white.subtlest"
+        inputContainer: {
+          _placeholder: {
+            color: "content.static.white.subtlest",
+            _groupDisabled: {
+              color: "content.static.white.disabled"
+            }
+          }
+        },
+        label: {
+          color: "content.neutral.default",
+          _groupDisabled: {
+            color: "content.neutral.disabled"
+          }
         }
       },
       neutral: {
-        "&::placeholder": {
-          color: "content.neutral.subtlest"
+        inputContainer: {
+          _placeholder: {
+            color: "content.neutral.subtlest",
+            _groupDisabled: {
+              color: "content.neutral.disabled"
+            }
+          }
+        },
+        label: {
+          color: "content.neutral.subtle",
+          _groupDisabled: {
+            color: "content.neutral.disabled"
+          }
         }
       }
     },
     radius: {
       md: {
-        borderRadius: 8,
-        px: 2
+        inputContainer: {
+          borderRadius: 8,
+          px: 2
+        }
       },
       lg: {
-        borderRadius: 16,
-        px: 2
+        inputContainer: {
+          borderRadius: 16,
+          px: 2
+        }
       },
       full: {
-        borderRadius: 9999,
-        px: 4
+        inputContainer: {
+          borderRadius: 9999,
+          px: 4
+        }
       }
     },
-    state: {
-      // state: Input 컴포넌트 내부 로직, 외부 노출 X (외부에선 disabled만 제어)
-      default: {
-        color: "content.neutral.bold"
-      },
-      selected: {
-        color: "content.neutral.bold"
-      },
-      disabled: {
-        color: "content.neutral.disabled"
+    disabled: {
+      true: {
+        inputContainer: {
+          _groupDisabled: {}
+        }
       }
     }
   },
   compoundVariants: [
-    {
-      color: "alpha",
-      state: "disabled",
-      css: {
-        "&::placeholder": {
-          color: "content.static.white.disabled"
-        }
-      }
-    },
-    {
-      color: "neutral",
-      state: "disabled",
-      css: {
-        "&::placeholder": {
-          color: "content.neutral.disabled"
-        }
-      }
-    },
-    {
-      variant: "solid",
-      color: "alpha",
-      state: "default",
-      css: {
-        background: "black.500A"
-      }
-    },
-    {
-      variant: "solid",
-      color: "alpha",
-      state: "selected",
-      css: {
-        background: "black.500A",
-        border: 1,
-        borderColor: "border.neutral.default"
-      }
-    },
     {
       variant: "solid",
       color: "alpha",
-      state: "disabled",
-      css: {
-        background: "black.500A"
-      }
-    },
-    {
-      variant: "solid",
-      color: "neutral",
-      state: "default",
-      css: {
-        background: "background.neutral.default"
-      }
-    },
-    {
-      variant: "solid",
-      color: "neutral",
-      state: "selected",
       css: {
-        background: "background.neutral.default",
-        border: 1,
-        borderColor: "border.neutral.default"
+        inputContainer: {
+          background: "black.500A"
+        }
       }
     },
     {
       variant: "solid",
       color: "neutral",
-      state: "disabled",
       css: {
-        background: "background.neutral.disabled"
-      }
-    },
-    {
-      variant: "line",
-      state: "default",
-      css: {
-        background: "transparent",
-        border: 1,
-        borderColor: "border.neutral.subtle"
-      }
-    },
-    {
-      variant: "line",
-      state: "selected",
-      css: {
-        background: "transparent",
-        border: 1,
-        borderColor: "border.neutral.default"
-      }
-    },
-    {
-      variant: "line",
-      state: "disabled",
-      css: {
-        background: "transparent",
-        border: 1,
-        borderColor: "border.neutral.disabled"
+        inputContainer: {
+          background: "background.neutral.default",
+          _groupDisabled: {
+            background: "background.neutral.disabled"
+          }
+        }
       }
     }
   ],
@@ -9114,114 +9109,75 @@ const inputRecipe = cva({
     isTextArea: false,
     variant: "solid",
     color: "neutral",
-    state: "default",
     radius: "md"
   }
 });
-const labelRecipe = cva({
-  base: {
-    textStyle: "label.sm",
-    textAlign: "start",
-    width: "100%",
-    display: "inline-block"
-  },
-  variants: {
-    state: {
-      default: {},
-      selected: {},
-      disabled: {}
-    },
-    color: {
-      alpha: {
-        color: "content.static.white.bold"
+const Input = React.forwardRef(
+  ({
+    required,
+    disabled,
+    label,
+    description,
+    labelPosition = "outside",
+    textLimit,
+    variant,
+    color,
+    radius,
+    onChange,
+    className,
+    css: css2,
+    ...rest
+  }, ref) => {
+    const recipe = inputRecipe({
+      variant,
+      color,
+      radius
+    });
+    const innerRef = React.useRef(null);
+    const inputRef = ref || innerRef;
+    const handleInputChange = React.useCallback(
+      (e) => {
+        if (disabled) return;
+        const { value } = e.target;
+        e.target.value = value.slice(0, textLimit);
+        onChange == null ? void 0 : onChange(e);
       },
-      neutral: {
-        color: "content.neutral.subtle"
-      }
-    },
-    radius: {
-      md: {},
-      lg: {},
-      full: {}
-    }
-  },
-  compoundVariants: [
-    {
-      state: "disabled",
-      css: {
-        color: "content.neutral.disabled"
+      [disabled, onChange, textLimit]
+    );
+    const handleContainerClick = React.useCallback(() => {
+      if (disabled) return;
+      if (inputRef.current) {
+        inputRef.current.focus();
       }
-    }
-  ],
-  defaultVariants: {
-    color: "neutral",
-    state: "default",
-    radius: "md"
+    }, [disabled, inputRef]);
+    const RequiredStar = React.useCallback(
+      () => /* @__PURE__ */ jsxRuntime.jsx("span", { className: recipe.requiredStar, "aria-hidden": "true", children: "*" }),
+      [recipe.requiredStar]
+    );
+    const Description2 = React.useCallback(
+      ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: recipe.description, children }),
+      [recipe.description]
+    );
+    const Label = React.useCallback(
+      ({ visible, children }) => {
+        return visible ? /* @__PURE__ */ jsxRuntime.jsxs("label", { className: recipe.label, children: [
+          children,
+          required && /* @__PURE__ */ jsxRuntime.jsx(RequiredStar, {})
+        ] }) : null;
+      },
+      [recipe.label, required, RequiredStar]
+    );
+    return /* @__PURE__ */ jsxRuntime.jsxs(VStack2, { gap: 1, className: "group", "data-disabled": disabled || void 0, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Label, { visible: !!(label && labelPosition === "outside"), children: label }),
+      /* @__PURE__ */ jsxRuntime.jsxs(Stack2, { gap: 1, className: cx(recipe.inputContainer, className), onClick: handleContainerClick, css: css2, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Label, { visible: !!(label && labelPosition === "inside"), children: label }),
+        /* @__PURE__ */ jsxRuntime.jsx(styled.input, { ref: inputRef, disabled, onChange: handleInputChange, ...rest })
+      ] }),
+      description && /* @__PURE__ */ jsxRuntime.jsx(Description2, { children: description })
+    ] });
   }
-});
-const StyledInputWrapper = styled(ark.div, inputRecipe);
-const StyledLabel$1 = styled(ark.label, labelRecipe);
-const RequiredStar = () => /* @__PURE__ */ jsxRuntime.jsx(ark.span, { className: css$1({ color: "content.danger.default", paddingLeft: 1 }), children: "*" });
-const Description = ({ children }) => /* @__PURE__ */ jsxRuntime.jsx(ark.span, { className: css$1({ textStyle: "label.sm", color: "content.neutral.subtle", paddingLeft: 1, width: "100%", textAlign: "start" }), children });
-const Input = React.forwardRef(({ value, required, disabled, label, description, labelPosition = "outside", textLimit, variant, color, radius, onChange, className, ...rest }, ref) => {
-  const [state, setState] = React.useState(disabled ? "disabled" : "default");
-  React.useEffect(() => {
-    setState(disabled ? "disabled" : "default");
-  }, [disabled]);
-  const handleInputChange = (e) => {
-    if (disabled) return;
-    const value2 = e.target.value;
-    if (textLimit && value2.length > textLimit) return;
-    setState(value2 ? "selected" : "default");
-    onChange == null ? void 0 : onChange(e);
-  };
-  const Label = ({ visible, children }) => {
-    console.log("color", color);
-    return visible ? /* @__PURE__ */ jsxRuntime.jsxs(StyledLabel$1, { state, color, radius, children: [
-      children,
-      required && /* @__PURE__ */ jsxRuntime.jsx(RequiredStar, {})
-    ] }) : null;
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs(VStack$1, { gap: 1, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Label, { visible: !!(label && labelPosition === "outside"), children: label }),
-    /* @__PURE__ */ jsxRuntime.jsxs(StyledInputWrapper, { state, variant, color, radius, className: cx(css$1({ display: "flex", flexDirection: "column", gap: 1 }), className), children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Label, { visible: !!(label && labelPosition === "inside"), children: label }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "input",
-        {
-          value,
-          disabled,
-          onFocus: () => !disabled && setState("selected"),
-          onBlur: () => !disabled && setState("default"),
-          onChange: handleInputChange,
-          ref,
-          ...rest
-        }
-      )
-    ] }),
-    description && /* @__PURE__ */ jsxRuntime.jsx(Description, { children: description })
-  ] });
-});
+);
 Input.displayName = "Input";
-const StyledTextAreaWrapper = styled(ark.div, inputRecipe);
-const StyledLabel = styled(ark.label, labelRecipe);
-const TextLengthIndicator = ({ count, limit, disabled }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    ark.span,
-    {
-      className: css$1({
-        display: "inline-block",
-        width: "100%",
-        textAlign: "end",
-        paddingRight: 1,
-        marginTop: -0.5,
-        textStyle: "label.sm",
-        color: disabled ? "content.neutral.disabled" : "content.neutral.subtlest"
-      }),
-      children: `${count}${limit ? ` / ${limit}` : ""}`
-    }
-  );
-};
 const Textarea = React.forwardRef(
   ({
     value,
@@ -9232,62 +9188,70 @@ const Textarea = React.forwardRef(
     labelPosition = "outside",
     textLimit,
     showTextCount = false,
-    isTextArea,
     color,
     radius,
     variant,
     onChange,
     className,
+    css: css2,
     ...rest
   }, ref) => {
-    const [state, setState] = React.useState(disabled ? "disabled" : "default");
-    React.useEffect(() => {
-      setState(disabled ? "disabled" : "default");
-    }, [disabled]);
-    const handleTextareaChange = (e) => {
+    const [count, setCount] = React.useState((value == null ? void 0 : value.toString().length) || 0);
+    const recipe = inputRecipe({
+      variant,
+      color,
+      radius,
+      isTextArea: true
+    });
+    const innerRef = React.useRef(null);
+    const inputRef = ref || innerRef;
+    const handleTextareaChange = React.useCallback(
+      (e) => {
+        if (disabled) return;
+        const { value: value2 } = e.target;
+        e.target.value = value2.slice(0, textLimit);
+        onChange == null ? void 0 : onChange(e);
+        if (showTextCount) setCount(value2.length);
+      },
+      [disabled, onChange, textLimit, showTextCount]
+    );
+    const handleContainerClick = React.useCallback(() => {
       if (disabled) return;
-      const value2 = e.target.value;
-      if (textLimit && value2.length > textLimit) return;
-      setState(value2 ? "selected" : "default");
-      onChange == null ? void 0 : onChange(e);
-      e.target.scrollTop = e.target.scrollHeight;
-    };
-    const Label = ({ visible, children }) => {
-      return visible ? /* @__PURE__ */ jsxRuntime.jsxs(StyledLabel, { state, color, radius, children: [
-        children,
-        required && /* @__PURE__ */ jsxRuntime.jsx(RequiredStar, {})
-      ] }) : null;
-    };
-    return /* @__PURE__ */ jsxRuntime.jsxs(VStack$1, { gap: 1, children: [
+      if (inputRef.current) {
+        inputRef.current.focus();
+      }
+    }, [disabled, inputRef]);
+    const RequiredStar = React.useCallback(
+      () => /* @__PURE__ */ jsxRuntime.jsx("span", { className: recipe.requiredStar, "aria-hidden": "true", children: "*" }),
+      [recipe.requiredStar]
+    );
+    const Description2 = React.useCallback(
+      ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: recipe.description, children }),
+      [recipe.description]
+    );
+    const Label = React.useCallback(
+      ({ visible, children }) => {
+        return visible ? /* @__PURE__ */ jsxRuntime.jsxs("label", { className: recipe.label, children: [
+          children,
+          required && /* @__PURE__ */ jsxRuntime.jsx(RequiredStar, {})
+        ] }) : null;
+      },
+      [recipe.label, required, RequiredStar]
+    );
+    const TextLengthIndicator = React.useCallback(
+      ({ count: count2, limit }) => {
+        return /* @__PURE__ */ jsxRuntime.jsx("span", { className: recipe.textLengthIndicator, children: `${count2}${limit ? ` / ${limit}` : ""}` });
+      },
+      [recipe.textLengthIndicator]
+    );
+    return /* @__PURE__ */ jsxRuntime.jsxs(VStack2, { gap: 1, className: "group", "data-disabled": disabled || void 0, children: [
       /* @__PURE__ */ jsxRuntime.jsx(Label, { visible: !!(label && labelPosition === "outside"), children: label }),
-      /* @__PURE__ */ jsxRuntime.jsxs(
-        StyledTextAreaWrapper,
-        {
-          isTextArea: true,
-          state,
-          color,
-          radius,
-          variant,
-          className: cx(css$1({ position: "relative", display: "flex", flexDirection: "column", gap: 1 }), className),
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(Label, { visible: !!(label && labelPosition === "inside"), children: label }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "textarea",
-              {
-                value,
-                disabled,
-                onChange: handleTextareaChange,
-                onFocus: () => !disabled && setState("selected"),
-                onBlur: () => !disabled && setState("default"),
-                ref,
-                ...rest
-              }
-            ),
-            showTextCount && /* @__PURE__ */ jsxRuntime.jsx(TextLengthIndicator, { count: value.length, limit: textLimit, disabled })
-          ]
-        }
-      ),
-      description && /* @__PURE__ */ jsxRuntime.jsx(Description, { children: description })
+      /* @__PURE__ */ jsxRuntime.jsxs(Stack2, { gap: 1, className: cx(recipe.inputContainer, className), onClick: handleContainerClick, css: css2, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Label, { visible: !!(label && labelPosition === "inside"), children: label }),
+        /* @__PURE__ */ jsxRuntime.jsx("textarea", { ref: inputRef, value, disabled, onChange: handleTextareaChange, ...rest }),
+        showTextCount && /* @__PURE__ */ jsxRuntime.jsx(TextLengthIndicator, { count, limit: textLimit })
+      ] }),
+      description && /* @__PURE__ */ jsxRuntime.jsx(Description2, { children: description })
     ] });
   }
 );
@@ -9376,7 +9340,7 @@ const keyframes = defineKeyframes({
     "100%": { transform: "rotate(360deg)" }
   }
 });
-var m = { colors: { content: { neutral: { bold: { value: { base: "{colors.neutral.0}", _dark: "{colors.neutral.1100}" } }, default: { value: { base: "{colors.neutral.300}", _dark: "{colors.neutral.1000}" } }, subtle: { value: { base: "{colors.neutral.600}", _dark: "{colors.neutral.900}" } }, subtlest: { value: { base: "{colors.neutral.900}", _dark: "{colors.neutral.500}" } }, disabled: { value: { base: "{colors.neutral.800}", _dark: "{colors.neutral.600}" } }, default_inverse: { value: { base: "{colors.neutral.1100}", _dark: "{colors.neutral.0}" } } }, neuroidPrimary: { default: { value: { base: "{colors.purple.500}", _dark: "{colors.purple.400}" } }, default_inverse: { value: { base: "{colors.purple.800}", _dark: "{colors.purple.800}" } } }, danger: { default: { value: { base: "{colors.red.600}", _dark: "{colors.red.400}" } } }, warning: { default: { value: { base: "{colors.orange.600}", _dark: "{colors.orange.400}" } } }, success: { default: { value: { base: "{colors.green.600}", _dark: "{colors.green.400}" } } }, informative: { default: { value: { base: "{colors.blue.600}", _dark: "{colors.blue.400}" } } }, zoltarinaPrimary: { default: { value: { base: "{colors.ohre.800}", _dark: "{colors.ohre.400}" } }, defult_inverse: { value: { base: "{colors.ohre.1000}", _dark: "{colors.ohre.1000}" } } }, heydPrimary: { default: { value: { base: "{colors.cyan.800}", _dark: "{colors.cyan.400}" } }, defult_inverse: { value: { base: "{colors.cyan.1000}", _dark: "{colors.cyan.1000}" } } }, static: { white: { bold: { value: { base: "{colors.neutral.1200}", _dark: "{colors.neutral.1200}" } }, default: { value: { base: "{colors.neutral.1050}", _dark: "{colors.neutral.1050}" } }, subtle: { value: { base: "{colors.neutral.1000}", _dark: "{colors.neutral.1000}" } }, subtlest: { value: { base: "{colors.neutral.900}", _dark: "{colors.neutral.900}" } }, disabled: { value: { base: "{colors.neutral.800}", _dark: "{colors.neutral.800}" } } }, black: { bold: { value: { base: "{colors.neutral.0}", _dark: "{colors.neutral.0}" } }, default: { value: { base: "{colors.neutral.200}", _dark: "{colors.neutral.200}" } }, subtle: { value: { base: "{colors.neutral.400}", _dark: "{colors.neutral.400}" } }, subtlest: { value: { base: "{colors.neutral.600}", _dark: "{colors.neutral.600}" } }, disabled: { value: { base: "{colors.neutral.800}", _dark: "{colors.neutral.800}" } } } }, heybeePrimary: { default: { value: { base: "{colors.yellow.800}", _dark: "{colors.yellow.500}" } }, default_inverse: { value: { base: "{colors.yellow.1000}", _dark: "{colors.yellow.1000}" } } } }, background: { neutral: { default: { value: { base: "{colors.neutral.1050}", _dark: "{colors.neutral.200}" } }, selected: { value: { base: "{colors.neutral.1000}", _dark: "{colors.neutral.300}" } }, disabled: { value: { base: "{colors.neutral.1000}", _dark: "{colors.neutral.400}" } } }, neuroidPrimary: { default: { value: { base: "{colors.purple.300}", _dark: "{colors.purple.600}" } }, selected: { value: { base: "{colors.purple.400}", _dark: "{colors.purple.700}" } } }, neuroidSecondary: { default: { value: { base: "{colors.purple.200}", _dark: "{colors.purple.300}" } }, selected: { value: { base: "{colors.purple.300}", _dark: "{colors.purple.400}" } } }, danger: { default: { value: { base: "{colors.red.300}", _dark: "{colors.red.700}" } }, selected: { value: { base: "{colors.red.400}", _dark: "{colors.red.800}" } } }, warning: { default: { value: { base: "{colors.orange.300}", _dark: "{colors.orange.700}" } }, selected: { value: { base: "{colors.orange.400}", _dark: "{colors.orange.800}" } } }, success: { default: { value: { base: "{colors.green.300}", _dark: "{colors.green.700}" } }, selected: { value: { base: "{colors.green.400}", _dark: "{colors.green.800}" } } }, informative: { default: { value: { base: "{colors.blue.300}", _dark: "{colors.blue.700}" } }, selected: { value: { base: "{colors.blue.400}", _dark: "{colors.blue.800}" } } }, zoltarinaPrimary: { default: { value: { base: "{colors.ohre.400}", _dark: "{colors.ohre.400}" } }, selected: { value: { base: "{colors.ohre.500}", _dark: "{colors.ohre.500}" } } }, zoltarinaSecondary: { default: { value: { base: "{colors.ohre.200}", _dark: "{colors.ohre.200}" } }, selected: { value: { base: "{colors.ohre.300}", _dark: "{colors.ohre.300}" } } }, heydPrimary: { default: { value: { base: "{colors.cyan.500}", _dark: "{colors.cyan.500}" } }, selected: { value: { base: "{colors.cyan.600}", _dark: "{colors.cyan.600}" } } }, heydSecondary: { default: { value: { base: "{colors.cyan.200}", _dark: "{colors.cyan.200}" } }, selected: { value: { base: "{colors.cyan.300}", _dark: "{colors.cyan.300}" } } }, static: { whiteAlpha: { bold: { value: { base: "{colors.white.700A}", _dark: "{colors.white.700A}" } }, default: { value: { base: "{colors.white.500A}", _dark: "{colors.white.500A}" } }, selected: { value: { base: "{colors.white.600A}", _dark: "{colors.white.600A}" } }, disabled: { value: { base: "{colors.white.500A}", _dark: "{colors.white.500A}" } } }, blackAlpha: { bold: { value: { base: "{colors.black.700A}", _dark: "{colors.black.700A}" } }, default: { value: { base: "{colors.black.500A}", _dark: "{colors.black.500A}" } }, selected: { value: { base: "{colors.black.600A}", _dark: "{colors.black.600A}" } }, disabled: { value: { base: "{colors.black.500A}", _dark: "{colors.black.500A}" } } } }, heybeePrimary: { default: { value: { base: "{colors.yellow.500}", _dark: "{colors.yellow.500}" } }, selected: { value: { base: "{colors.yellow.600}", _dark: "{colors.yellow.600}" } } } }, surface: { base: { value: { base: "{colors.neutral.1100}", _dark: "{colors.neutral.0}" } }, layer_1: { value: { base: "{colors.neutral.1100}", _dark: "{colors.neutral.100}" } }, layer_2: { value: { base: "{colors.neutral.1050}", _dark: "{colors.neutral.200}" } } }, shadow: { overlay: { value: { base: "{colors.black.100A}", _dark: "{colors.black.400A}" } }, raised: { value: { base: "{colors.black.400A}", _dark: "{colors.black.600A}" } } }, scrim: { default: { value: { base: "{colors.black.600A}", _dark: "{colors.black.600A}" } } }, skeleton: { default: { value: { base: "{colors.neutral.800}", _dark: "{colors.neutral.100}" } }, subtle: { value: { base: "{colors.neutral.700}", _dark: "{colors.neutral.200}" } } }, border: { neutral: { default: { value: { base: "{colors.neutral.700}", _dark: "{colors.neutral.400}" } }, subtle: { value: { base: "{colors.neutral.900}", _dark: "{colors.neutral.300}" } }, disabled: { value: { base: "{colors.neutral.1000}", _dark: "{colors.neutral.200}" } } }, neuroidPrimary: { default: { value: { base: "{colors.purple.500}", _dark: "{colors.purple.400}" } } }, danger: { default: { value: { base: "{colors.red.500}", _dark: "{colors.red.400}" } } }, warning: { default: { value: { base: "{colors.orange.500}", _dark: "{colors.orange.400}" } } }, success: { default: { value: { base: "{colors.green.500}", _dark: "{colors.green.400}" } } }, informative: { default: { value: { base: "{colors.blue.500}", _dark: "{colors.blue.400}" } } }, zoltarinaPrimary: { default: { value: { base: "{colors.ohre.800}", _dark: "{colors.ohre.400}" } } }, heydPrimary: { default: { value: { base: "{colors.cyan.800}", _dark: "{colors.cyan.400}" } } }, heybeePrimary: { default: { value: { base: "{colors.yellow.800}", _dark: "{colors.yellow.500}" } } } } }, shadows: { raised: { value: "0px 1px 3px 0px {colors.shadow.raised}" }, overlay: { value: "0px 20px 25px -5px {colors.shadow.overlay}" } } }, v = { colors: { neutral: { 0: { value: "#080A0E" }, 100: { value: "#101216" }, 200: { value: "#181A1E" }, 300: { value: "#282A2E" }, 400: { value: "#383A3E" }, 500: { value: "#505256" }, 600: { value: "#64666A" }, 700: { value: "#787A7E" }, 800: { value: "#A0A2A6" }, 900: { value: "#B4B6BA" }, 1e3: { value: "#F2F4F8" }, 1050: { value: "#EDEEF1" }, 1100: { value: "#FAFCFF" }, 1200: { value: "#F8F9FF" } }, black: { "700A": { value: "rgba(0,0,0,0.8)" }, "600A": { value: "rgba(0,0,0,0.6)" }, "500A": { value: "rgba(0,0,0,0.4)" }, "400A": { value: "rgba(0,0,0,0.32)" }, "300A": { value: "rgba(0,0,0,0.2)" }, "200A": { value: "rgba(0,0,0,0.12)" }, "100A": { value: "rgba(0,0,0,0.08)" } }, white: { "700A": { value: "rgba(255,255,255,0.8)" }, "600A": { value: "rgba(255,255,255,0.6)" }, "500A": { value: "rgba(255,255,255,0.4)" }, "400A": { value: "rgba(255,255,255,0.32)" }, "300A": { value: "rgba(255,255,255,0.2)" }, "200A": { value: "rgba(255,255,255,0.12)" }, "100A": { value: "rgba(255,255,255,0.08)" } }, red: { 100: { value: "#ffeceb" }, 200: { value: "#ffd5d2" }, 300: { value: "#fd9891" }, 400: { value: "#f87168" }, 500: { value: "#f15b50" }, 600: { value: "#e2483d" }, 700: { value: "#c9372c" }, 800: { value: "#87241c" }, 900: { value: "#5d1f1a" }, 1e3: { value: "#42221f" } }, orange: { 100: { value: "#fff5eb" }, 200: { value: "#ffe9d2" }, 300: { value: "#fdc991" }, 400: { value: "#f8b268" }, 500: { value: "#f1a350" }, 600: { value: "#e2923d" }, 700: { value: "#c97d2c" }, 800: { value: "#87531c" }, 900: { value: "#5d3d1a" }, 1e3: { value: "#42311f" } }, blue: { 100: { value: "#ebf2ff" }, 200: { value: "#d2e1ff" }, 300: { value: "#91b5fd" }, 400: { value: "#6898f8" }, 500: { value: "#5086f1" }, 600: { value: "#3d74e2" }, 700: { value: "#2c60c9" }, 800: { value: "#1c4087" }, 900: { value: "#1a305d" }, 1e3: { value: "#1f2b42" } }, green: { 100: { value: "#ebfff5" }, 200: { value: "#9cfccc" }, 300: { value: "#47EB99" }, 400: { value: "#26d980" }, 500: { value: "#14b866" }, 600: { value: "#10934c" }, 700: { value: "#147042" }, 800: { value: "#125433" }, 900: { value: "#104129" }, 1e3: { value: "#0b2819" } }, purple: { 100: { value: "#f3ebff" }, 200: { value: "#e9ddfd" }, 300: { value: "#cbacfb" }, 400: { value: "#ac7cf8" }, 500: { value: "#8d4bf6" }, 600: { value: "#6d19f5" }, 700: { value: "#570ad1" }, 800: { value: "#4308a0" }, 900: { value: "#2f0670" }, 1e3: { value: "#1a033f" } }, ohre: { 100: { value: "#FFF8F1" }, 200: { value: "#FFE6C8" }, 300: { value: "#FFD3A0" }, 400: { value: "#FFC077" }, 500: { value: "#E2A763" }, 600: { value: "#C58F50" }, 700: { value: "#A8773F" }, 800: { value: "#8A6030" }, 900: { value: "#6D4B22" }, 1e3: { value: "#503617" } }, cyan: { 100: { value: "#ecffff" }, 200: { value: "#c1feff" }, 300: { value: "#96feff" }, 400: { value: "#6bfdff" }, 500: { value: "#3df1f3" }, 600: { value: "#2acfd1" }, 700: { value: "#1aadaf" }, 800: { value: "#0e8c8d" }, 900: { value: "#056a6b" }, 1e3: { value: "#004849" } }, yellow: { 100: { value: "#FFFBED" }, 200: { value: "#FFF3C5" }, 300: { value: "#FFEB9D" }, 400: { value: "#FFE375" }, 500: { value: "#FFDB4D" }, 600: { value: "#DDBC38" }, 700: { value: "#BB9D27" }, 800: { value: "#997F19" }, 900: { value: "#77620E" }, 1e3: { value: "#554506" } } }, borderWidths: { none: { value: "0px" }, sm: { value: "1px" }, md: { value: "2px" }, lg: { value: "4px" } }, spacing: { 0: { value: "0rem" }, 1: { value: "0.25rem" }, 2: { value: "0.5rem" }, 3: { value: "0.75rem" }, 4: { value: "1rem" }, 6: { value: "1.5rem" }, 8: { value: "2rem" }, 12: { value: "3rem" }, 20: { value: "5rem" }, 30: { value: "7.5rem" }, 56: { value: "14rem" }, 72: { value: "18rem" }, 98: { value: "24rem" }, 128: { value: "32rem" }, 160: { value: "40rem" } }, radii: { none: { value: "0px" }, xs: { value: "2px" }, sm: { value: "4px" }, md: { value: "8px" }, lg: { value: "16px" }, full: { value: "9999px" } }, fontSizes: { xs: { value: "0.75rem" }, sm: { value: "0.875rem" }, md: { value: "1rem" }, lg: { value: "1.25rem" }, xl: { value: "1.5rem" }, "2xl": { value: "2rem" }, "3xl": { value: "2.5rem" }, "4xl": { value: "3rem" } }, letterSpacings: { xs: { value: "-1.5px" }, sm: { value: "-1.2px" }, md: { value: "-1px" }, lg: { value: "-0.8px" }, xl: { value: "-0.6px" }, "2xl": { value: "-0.4px" }, "3xl": { value: "-0.2px" } }, lineHeights: { md: { value: "1rem" }, lg: { value: "1.25rem" }, xl: { value: "1.5rem" }, "2xl": { value: "1.75rem" }, "3xl": { value: "2.25rem" }, "4xl": { value: "2.75rem" }, "5xl": { value: "3rem" } }, fontWeights: { regular: { value: "400" }, medium: { value: "500" }, semibold: { value: "600" }, bold: { value: "700" }, regularItalic: { value: "Italic" }, mediumItalic: { value: "Medium Italic" } }, fonts: { inter: { value: "Inter" }, notoSans: { value: "Noto Sans" } } }, $ = { body: { md: { value: { fontFamily: "notoSans", fontWeight: "regular", fontSize: "sm", lineHeight: "lg", letterSpacing: "3xl" } }, lg: { value: { fontFamily: "notoSans", fontWeight: "regular", fontSize: "md", lineHeight: "xl", letterSpacing: "3xl" } }, sm: { value: { fontSize: "xs", fontWeight: "regular", fontFamily: "notoSans", lineHeight: "md", letterSpacing: "3xl" } } }, label: { sm: { value: { fontFamily: "notoSans", fontWeight: "medium", fontSize: "xs", lineHeight: "md", letterSpacing: "3xl" } }, md: { value: { fontFamily: "notoSans", fontWeight: "medium", fontSize: "sm", lineHeight: "lg", letterSpacing: "3xl" } } }, title: { sm: { value: { fontFamily: "notoSans", fontWeight: "medium", fontSize: "sm", lineHeight: "lg", letterSpacing: "2xl" } }, md: { value: { fontFamily: "notoSans", fontWeight: "medium", fontSize: "md", lineHeight: "xl", letterSpacing: "xl" } }, lg: { value: { fontFamily: "notoSans", fontWeight: "semibold", fontSize: "lg", lineHeight: "2xl", letterSpacing: "xl" } } }, headline: { sm: { value: { fontFamily: "inter", fontWeight: "semibold", fontSize: "xl", lineHeight: "2xl", letterSpacing: "lg" } }, md: { value: { fontFamily: "inter", fontWeight: "bold", fontSize: "2xl", lineHeight: "3xl", letterSpacing: "md" } } }, display: { md: { value: { fontFamily: "inter", fontWeight: "bold", fontSize: "3xl", lineHeight: "4xl", letterSpacing: "sm" } }, lg: { value: { fontFamily: "inter", fontWeight: "bold", fontSize: "4xl", lineHeight: "5xl", letterSpacing: "xs" } } } }, g = { semantic: m, primitive: v, textStyles: $ };
+var m = { colors: { content: { neutral: { bold: { value: { base: "{colors.neutral.0}", _dark: "{colors.neutral.1100}" } }, default: { value: { base: "{colors.neutral.300}", _dark: "{colors.neutral.1000}" } }, subtle: { value: { base: "{colors.neutral.600}", _dark: "{colors.neutral.900}" } }, subtlest: { value: { base: "{colors.neutral.900}", _dark: "{colors.neutral.500}" } }, disabled: { value: { base: "{colors.neutral.800}", _dark: "{colors.neutral.600}" } }, default_inverse: { value: { base: "{colors.neutral.1100}", _dark: "{colors.neutral.0}" } } }, neuroidPrimary: { default: { value: { base: "{colors.purple.500}", _dark: "{colors.purple.400}" } }, default_inverse: { value: { base: "{colors.purple.800}", _dark: "{colors.purple.800}" } } }, danger: { default: { value: { base: "{colors.red.600}", _dark: "{colors.red.400}" } } }, warning: { default: { value: { base: "{colors.orange.600}", _dark: "{colors.orange.400}" } } }, success: { default: { value: { base: "{colors.green.600}", _dark: "{colors.green.400}" } } }, informative: { default: { value: { base: "{colors.blue.600}", _dark: "{colors.blue.400}" } } }, zoltarinaPrimary: { default: { value: { base: "{colors.ohre.800}", _dark: "{colors.ohre.400}" } }, default_inverse: { value: { base: "{colors.ohre.1000}", _dark: "{colors.ohre.1000}" } } }, heydPrimary: { default: { value: { base: "{colors.cyan.800}", _dark: "{colors.cyan.400}" } }, default_inverse: { value: { base: "{colors.cyan.1000}", _dark: "{colors.cyan.1000}" } } }, static: { white: { bold: { value: { base: "{colors.neutral.1200}", _dark: "{colors.neutral.1200}" } }, default: { value: { base: "{colors.neutral.1050}", _dark: "{colors.neutral.1050}" } }, subtle: { value: { base: "{colors.neutral.1000}", _dark: "{colors.neutral.1000}" } }, subtlest: { value: { base: "{colors.neutral.900}", _dark: "{colors.neutral.900}" } }, disabled: { value: { base: "{colors.neutral.800}", _dark: "{colors.neutral.800}" } } }, black: { bold: { value: { base: "{colors.neutral.0}", _dark: "{colors.neutral.0}" } }, default: { value: { base: "{colors.neutral.200}", _dark: "{colors.neutral.200}" } }, subtle: { value: { base: "{colors.neutral.400}", _dark: "{colors.neutral.400}" } }, subtlest: { value: { base: "{colors.neutral.600}", _dark: "{colors.neutral.600}" } }, disabled: { value: { base: "{colors.neutral.800}", _dark: "{colors.neutral.800}" } } } }, heybeePrimary: { default: { value: { base: "{colors.yellow.800}", _dark: "{colors.yellow.500}" } }, default_inverse: { value: { base: "{colors.yellow.1000}", _dark: "{colors.yellow.1000}" } } }, neutralInverse: { bold: { value: { base: "{colors.neutral.1100}", _dark: "{colors.neutral.0}" } }, default: { value: { base: "{colors.neutral.1000}", _dark: "{colors.neutral.300}" } }, subtle: { value: { base: "{colors.neutral.900}", _dark: "{colors.neutral.600}" } }, subtlest: { value: { base: "{colors.neutral.500}", _dark: "{colors.neutral.900}" } }, disabled: { value: { base: "{colors.neutral.600}", _dark: "{colors.neutral.800}" } }, default_inverse: { value: { base: "{colors.neutral.0}", _dark: "{colors.neutral.1100}" } } } }, background: { neutral: { default: { value: { base: "{colors.neutral.1050}", _dark: "{colors.neutral.200}" } }, selected: { value: { base: "{colors.neutral.1000}", _dark: "{colors.neutral.300}" } }, disabled: { value: { base: "{colors.neutral.1000}", _dark: "{colors.neutral.400}" } } }, neuroidPrimary: { default: { value: { base: "{colors.purple.300}", _dark: "{colors.purple.600}" } }, selected: { value: { base: "{colors.purple.400}", _dark: "{colors.purple.700}" } } }, neuroidSecondary: { default: { value: { base: "{colors.purple.200}", _dark: "{colors.purple.300}" } }, selected: { value: { base: "{colors.purple.300}", _dark: "{colors.purple.400}" } } }, danger: { default: { value: { base: "{colors.red.300}", _dark: "{colors.red.700}" } }, selected: { value: { base: "{colors.red.400}", _dark: "{colors.red.800}" } } }, warning: { default: { value: { base: "{colors.orange.300}", _dark: "{colors.orange.700}" } }, selected: { value: { base: "{colors.orange.400}", _dark: "{colors.orange.800}" } } }, success: { default: { value: { base: "{colors.green.300}", _dark: "{colors.green.700}" } }, selected: { value: { base: "{colors.green.400}", _dark: "{colors.green.800}" } } }, informative: { default: { value: { base: "{colors.blue.300}", _dark: "{colors.blue.700}" } }, selected: { value: { base: "{colors.blue.400}", _dark: "{colors.blue.800}" } } }, zoltarinaPrimary: { default: { value: { base: "{colors.ohre.400}", _dark: "{colors.ohre.400}" } }, selected: { value: { base: "{colors.ohre.500}", _dark: "{colors.ohre.500}" } } }, zoltarinaSecondary: { default: { value: { base: "{colors.ohre.200}", _dark: "{colors.ohre.200}" } }, selected: { value: { base: "{colors.ohre.300}", _dark: "{colors.ohre.300}" } } }, heydPrimary: { default: { value: { base: "{colors.cyan.500}", _dark: "{colors.cyan.500}" } }, selected: { value: { base: "{colors.cyan.600}", _dark: "{colors.cyan.600}" } } }, heydSecondary: { default: { value: { base: "{colors.cyan.200}", _dark: "{colors.cyan.200}" } }, selected: { value: { base: "{colors.cyan.300}", _dark: "{colors.cyan.300}" } } }, static: { whiteAlpha: { bold: { value: { base: "{colors.white.700A}", _dark: "{colors.white.700A}" } }, default: { value: { base: "{colors.white.500A}", _dark: "{colors.white.500A}" } }, selected: { value: { base: "{colors.white.600A}", _dark: "{colors.white.600A}" } }, disabled: { value: { base: "{colors.white.500A}", _dark: "{colors.white.500A}" } } }, blackAlpha: { bold: { value: { base: "{colors.black.700A}", _dark: "{colors.black.700A}" } }, default: { value: { base: "{colors.black.500A}", _dark: "{colors.black.500A}" } }, selected: { value: { base: "{colors.black.600A}", _dark: "{colors.black.600A}" } }, disabled: { value: { base: "{colors.black.500A}", _dark: "{colors.black.500A}" } } } }, heybeePrimary: { default: { value: { base: "{colors.yellow.500}", _dark: "{colors.yellow.500}" } }, selected: { value: { base: "{colors.yellow.600}", _dark: "{colors.yellow.600}" } } }, neutralInverse: { default: { value: { base: "{colors.neutral.200}", _dark: "{colors.neutral.1050}" } }, selected: { value: { base: "{colors.neutral.300}", _dark: "{colors.neutral.1000}" } }, disabled: { value: { base: "{colors.neutral.400}", _dark: "{colors.neutral.1000}" } } } }, surface: { base: { value: { base: "{colors.neutral.1100}", _dark: "{colors.neutral.0}" } }, layer_1: { value: { base: "{colors.neutral.1100}", _dark: "{colors.neutral.100}" } }, layer_2: { value: { base: "{colors.neutral.1050}", _dark: "{colors.neutral.200}" } } }, shadow: { overlay: { value: { base: "{colors.black.100A}", _dark: "{colors.black.400A}" } }, raised: { value: { base: "{colors.black.400A}", _dark: "{colors.black.600A}" } } }, scrim: { default: { value: { base: "{colors.black.600A}", _dark: "{colors.black.600A}" } } }, skeleton: { default: { value: { base: "{colors.neutral.800}", _dark: "{colors.neutral.100}" } }, subtle: { value: { base: "{colors.neutral.700}", _dark: "{colors.neutral.200}" } } }, border: { neutral: { default: { value: { base: "{colors.neutral.700}", _dark: "{colors.neutral.400}" } }, subtle: { value: { base: "{colors.neutral.900}", _dark: "{colors.neutral.300}" } }, disabled: { value: { base: "{colors.neutral.1000}", _dark: "{colors.neutral.200}" } } }, neuroidPrimary: { default: { value: { base: "{colors.purple.500}", _dark: "{colors.purple.400}" } } }, danger: { default: { value: { base: "{colors.red.500}", _dark: "{colors.red.400}" } } }, warning: { default: { value: { base: "{colors.orange.500}", _dark: "{colors.orange.400}" } } }, success: { default: { value: { base: "{colors.green.500}", _dark: "{colors.green.400}" } } }, informative: { default: { value: { base: "{colors.blue.500}", _dark: "{colors.blue.400}" } } }, zoltarinaPrimary: { default: { value: { base: "{colors.ohre.800}", _dark: "{colors.ohre.400}" } } }, heydPrimary: { default: { value: { base: "{colors.cyan.800}", _dark: "{colors.cyan.400}" } } }, heybeePrimary: { default: { value: { base: "{colors.yellow.800}", _dark: "{colors.yellow.500}" } } } } }, shadows: { raised: { value: "0px 1px 3px 0px {colors.shadow.raised}" }, overlay: { value: "0px 20px 25px -5px {colors.shadow.overlay}" } } }, v = { colors: { neutral: { 0: { value: "#080A0E" }, 100: { value: "#101216" }, 200: { value: "#181A1E" }, 300: { value: "#282A2E" }, 400: { value: "#383A3E" }, 500: { value: "#505256" }, 600: { value: "#64666A" }, 700: { value: "#787A7E" }, 800: { value: "#A0A2A6" }, 900: { value: "#B4B6BA" }, 1e3: { value: "#F2F4F8" }, 1050: { value: "#EDEEF1" }, 1100: { value: "#FAFCFF" }, 1200: { value: "#F8F9FF" } }, black: { "700A": { value: "rgba(0,0,0,0.8)" }, "600A": { value: "rgba(0,0,0,0.6)" }, "500A": { value: "rgba(0,0,0,0.4)" }, "400A": { value: "rgba(0,0,0,0.32)" }, "300A": { value: "rgba(0,0,0,0.2)" }, "200A": { value: "rgba(0,0,0,0.12)" }, "100A": { value: "rgba(0,0,0,0.08)" } }, white: { "700A": { value: "rgba(255,255,255,0.8)" }, "600A": { value: "rgba(255,255,255,0.6)" }, "500A": { value: "rgba(255,255,255,0.4)" }, "400A": { value: "rgba(255,255,255,0.32)" }, "300A": { value: "rgba(255,255,255,0.2)" }, "200A": { value: "rgba(255,255,255,0.12)" }, "100A": { value: "rgba(255,255,255,0.08)" } }, red: { 100: { value: "#ffeceb" }, 200: { value: "#ffd5d2" }, 300: { value: "#fd9891" }, 400: { value: "#f87168" }, 500: { value: "#f15b50" }, 600: { value: "#e2483d" }, 700: { value: "#c9372c" }, 800: { value: "#87241c" }, 900: { value: "#5d1f1a" }, 1e3: { value: "#42221f" } }, orange: { 100: { value: "#fff5eb" }, 200: { value: "#ffe9d2" }, 300: { value: "#fdc991" }, 400: { value: "#f8b268" }, 500: { value: "#f1a350" }, 600: { value: "#e2923d" }, 700: { value: "#c97d2c" }, 800: { value: "#87531c" }, 900: { value: "#5d3d1a" }, 1e3: { value: "#42311f" } }, blue: { 100: { value: "#ebf2ff" }, 200: { value: "#d2e1ff" }, 300: { value: "#91b5fd" }, 400: { value: "#6898f8" }, 500: { value: "#5086f1" }, 600: { value: "#3d74e2" }, 700: { value: "#2c60c9" }, 800: { value: "#1c4087" }, 900: { value: "#1a305d" }, 1e3: { value: "#1f2b42" } }, green: { 100: { value: "#ebfff5" }, 200: { value: "#9cfccc" }, 300: { value: "#47EB99" }, 400: { value: "#26d980" }, 500: { value: "#14b866" }, 600: { value: "#10934c" }, 700: { value: "#147042" }, 800: { value: "#125433" }, 900: { value: "#104129" }, 1e3: { value: "#0b2819" } }, purple: { 100: { value: "#f3ebff" }, 200: { value: "#e9ddfd" }, 300: { value: "#cbacfb" }, 400: { value: "#ac7cf8" }, 500: { value: "#8d4bf6" }, 600: { value: "#6d19f5" }, 700: { value: "#570ad1" }, 800: { value: "#4308a0" }, 900: { value: "#2f0670" }, 1e3: { value: "#1a033f" } }, ohre: { 100: { value: "#FFF8F1" }, 200: { value: "#FFE6C8" }, 300: { value: "#FFD3A0" }, 400: { value: "#FFC077" }, 500: { value: "#E2A763" }, 600: { value: "#C58F50" }, 700: { value: "#A8773F" }, 800: { value: "#8A6030" }, 900: { value: "#6D4B22" }, 1e3: { value: "#503617" } }, cyan: { 100: { value: "#ecffff" }, 200: { value: "#c1feff" }, 300: { value: "#96feff" }, 400: { value: "#6bfdff" }, 500: { value: "#3df1f3" }, 600: { value: "#2acfd1" }, 700: { value: "#1aadaf" }, 800: { value: "#0e8c8d" }, 900: { value: "#056a6b" }, 1e3: { value: "#004849" } }, yellow: { 100: { value: "#FFFBED" }, 200: { value: "#FFF3C5" }, 300: { value: "#FFEB9D" }, 400: { value: "#FFE375" }, 500: { value: "#FFDB4D" }, 600: { value: "#DDBC38" }, 700: { value: "#BB9D27" }, 800: { value: "#997F19" }, 900: { value: "#77620E" }, 1e3: { value: "#554506" } } }, borderWidths: { none: { value: "0px" }, sm: { value: "1px" }, md: { value: "2px" }, lg: { value: "4px" } }, spacing: { 0: { value: "0rem" }, 1: { value: "0.25rem" }, 2: { value: "0.5rem" }, 3: { value: "0.75rem" }, 4: { value: "1rem" }, 6: { value: "1.5rem" }, 8: { value: "2rem" }, 12: { value: "3rem" }, 20: { value: "5rem" }, 30: { value: "7.5rem" }, 56: { value: "14rem" }, 72: { value: "18rem" }, 98: { value: "24rem" }, 128: { value: "32rem" }, 160: { value: "40rem" } }, radii: { none: { value: "0px" }, xs: { value: "2px" }, sm: { value: "4px" }, md: { value: "8px" }, lg: { value: "16px" }, full: { value: "9999px" } }, fontSizes: { xs: { value: "0.75rem" }, sm: { value: "0.875rem" }, md: { value: "1rem" }, lg: { value: "1.25rem" }, xl: { value: "1.5rem" }, "2xl": { value: "2rem" }, "3xl": { value: "2.5rem" }, "4xl": { value: "3rem" } }, letterSpacings: { xs: { value: "-1.5px" }, sm: { value: "-1.2px" }, md: { value: "-1px" }, lg: { value: "-0.8px" }, xl: { value: "-0.6px" }, "2xl": { value: "-0.4px" }, "3xl": { value: "-0.2px" } }, lineHeights: { md: { value: "1rem" }, lg: { value: "1.25rem" }, xl: { value: "1.5rem" }, "2xl": { value: "1.75rem" }, "3xl": { value: "2.25rem" }, "4xl": { value: "2.75rem" }, "5xl": { value: "3rem" } }, fontWeights: { regular: { value: "400" }, medium: { value: "500" }, semibold: { value: "600" }, bold: { value: "700" }, regularItalic: { value: "Italic" }, mediumItalic: { value: "Medium Italic" } }, fonts: { inter: { value: "Inter" }, notoSans: { value: "Noto Sans" } } }, $ = { body: { md: { value: { fontFamily: "notoSans", fontWeight: "regular", fontSize: "sm", lineHeight: "lg", letterSpacing: "3xl" } }, lg: { value: { fontFamily: "notoSans", fontWeight: "regular", fontSize: "md", lineHeight: "xl", letterSpacing: "3xl" } }, sm: { value: { fontSize: "xs", fontWeight: "regular", fontFamily: "notoSans", lineHeight: "md", letterSpacing: "3xl" } } }, label: { sm: { value: { fontFamily: "notoSans", fontWeight: "medium", fontSize: "xs", lineHeight: "md", letterSpacing: "3xl" } }, md: { value: { fontFamily: "notoSans", fontWeight: "medium", fontSize: "sm", lineHeight: "lg", letterSpacing: "3xl" } } }, title: { sm: { value: { fontFamily: "notoSans", fontWeight: "medium", fontSize: "sm", lineHeight: "lg", letterSpacing: "2xl" } }, md: { value: { fontFamily: "notoSans", fontWeight: "medium", fontSize: "md", lineHeight: "xl", letterSpacing: "xl" } }, lg: { value: { fontFamily: "notoSans", fontWeight: "semibold", fontSize: "lg", lineHeight: "2xl", letterSpacing: "xl" } } }, headline: { sm: { value: { fontFamily: "inter", fontWeight: "semibold", fontSize: "xl", lineHeight: "2xl", letterSpacing: "lg" } }, md: { value: { fontFamily: "inter", fontWeight: "bold", fontSize: "2xl", lineHeight: "3xl", letterSpacing: "md" } } }, display: { md: { value: { fontFamily: "inter", fontWeight: "bold", fontSize: "3xl", lineHeight: "4xl", letterSpacing: "sm" } }, lg: { value: { fontFamily: "inter", fontWeight: "bold", fontSize: "4xl", lineHeight: "5xl", letterSpacing: "xs" } } } }, g = { semantic: m, primitive: v, textStyles: $ };
 const conditions = {
   extend: {
     collapsed: '&:is([aria-collapsed=true], [data-collapsed], [data-state="collapsed"])',