@turk.net/mui 3.0.6

package/dist/theme/index.mjs

@@ -0,0 +1,3922 @@
+import { createTheme } from '@mui/material/styles';
+import { switchClasses, svgIconClasses, Box, inputBaseClasses, autocompleteClasses, iconButtonClasses, outlinedInputClasses, filledInputClasses, inputClasses, selectClasses, formHelperTextClasses, inputLabelClasses, sliderClasses, radioGroupClasses, radioClasses, menuClasses, listClasses, menuItemClasses, listItemButtonClasses, formLabelClasses, formControlLabelClasses, formControlClasses, chipClasses, checkboxClasses, buttonClasses, badgeClasses } from '@mui/material';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// theme/index.ts
+var SvgChevronDownIcon = (props) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    className: "MuiSvgIcon-root",
+    ...props,
+    children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        fill: "currentColor",
+        fillRule: "evenodd",
+        d: "M5.646 8.646a.5.5 0 0 1 .708 0L12 14.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708",
+        clipRule: "evenodd"
+      }
+    )
+  }
+);
+var ChevronDownIcon_default = SvgChevronDownIcon;
+function createTextField() {
+  return {
+    defaultProps: {
+      variant: "outlined",
+      slotProps: {
+        select: {
+          IconComponent: (props) => {
+            return /* @__PURE__ */ jsx(ChevronDownIcon_default, { width: "20px", height: "20px", ...props });
+          }
+        }
+      }
+    },
+    styleOverrides: {
+      root: ({ theme: theme2 }) => ({
+        gap: theme2.spacing(2),
+        [`.${outlinedInputClasses.notchedOutline} > legend`]: {
+          display: "none"
+        },
+        [`.${inputLabelClasses.root}, .${inputLabelClasses.root}.${inputLabelClasses.focused}, .${inputLabelClasses.root}.${inputLabelClasses.error}, .${inputLabelClasses.root}.${inputLabelClasses.disabled}`]: {
+          position: "relative",
+          transform: "none",
+          left: "unset",
+          top: "unset",
+          transition: "none",
+          color: theme2.vars?.palette.neutral.foreground[1].rest,
+          ...theme2.typography["text.sm.medium"]
+        },
+        [`.${formHelperTextClasses.root}`]: {
+          color: theme2.vars?.palette.neutral.foreground[4].rest,
+          margin: 0,
+          padding: 0,
+          ...theme2.typography["text.xs.regular"],
+          [`&.${formHelperTextClasses.error}`]: {
+            color: theme2.vars?.palette.danger.foreground[2].rest
+          }
+        }
+      })
+    },
+    variants: [
+      {
+        props: { multiline: true },
+        style: ({ theme: theme2 }) => ({
+          [`.${outlinedInputClasses.root}.${outlinedInputClasses.multiline}, .${filledInputClasses.root}.${filledInputClasses.multiline}, .${inputClasses.root}.${inputClasses.multiline}`]: {
+            paddingTop: theme2.spacing(0),
+            paddingBottom: theme2.spacing(0)
+          }
+        })
+      },
+      {
+        props: { select: true },
+        style: ({ theme: theme2 }) => ({
+          [`.${inputClasses.root} .${selectClasses.icon}`]: {
+            top: "calc(50% - 10px)",
+            right: theme2.spacing(3)
+          }
+        })
+      }
+    ]
+  };
+}
+var SvgCheckIcon = (props) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    className: "MuiSvgIcon-root",
+    ...props,
+    children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        fill: "currentColor",
+        fillRule: "evenodd",
+        d: "M20.354 5.646a.5.5 0 0 1 0 .708l-11 11a.5.5 0 0 1-.708 0l-5-5a.5.5 0 0 1 .708-.708L9 16.293 19.646 5.646a.5.5 0 0 1 .708 0",
+        clipRule: "evenodd"
+      }
+    )
+  }
+);
+var CheckIcon_default = SvgCheckIcon;
+var SvgXIcon = (props) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    className: "MuiSvgIcon-root",
+    ...props,
+    children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        fill: "currentColor",
+        fillRule: "evenodd",
+        d: "M6.646 6.646a.5.5 0 0 1 .708 0L12 11.293l4.646-4.647a.5.5 0 0 1 .708.708L12.707 12l4.647 4.646a.5.5 0 0 1-.708.708L12 12.707l-4.646 4.647a.5.5 0 0 1-.708-.708L11.293 12 6.646 7.354a.5.5 0 0 1 0-.708",
+        clipRule: "evenodd"
+      }
+    )
+  }
+);
+var XIcon_default = SvgXIcon;
+function createAutocomplete() {
+  return {
+    styleOverrides: {
+      tag: ({ theme: theme2 }) => ({
+        borderRadius: theme2.spacing(1.5)
+      }),
+      root: ({ theme: theme2 }) => ({
+        [`&.${autocompleteClasses.expanded}`]: {
+          [`&:not(.${outlinedInputClasses.disabled}):hover .${outlinedInputClasses.notchedOutline}, .${outlinedInputClasses.notchedOutline}, .${outlinedInputClasses.focused} .${outlinedInputClasses.notchedOutline}, .${filledInputClasses.root}.${filledInputClasses.focused}:before`]: {
+            borderColor: theme2.vars?.palette.neutral.stroke.accessible.selected
+          }
+        },
+        [`& .${inputBaseClasses.root}`]: {
+          marginTop: 0
+        }
+      }),
+      endAdornment: ({ theme: theme2 }) => ({
+        display: "flex",
+        gap: theme2.spacing(2),
+        right: theme2.spacing(3),
+        [`.${iconButtonClasses.root}`]: {
+          color: theme2.vars?.palette.neutral.foreground[3].rest,
+          padding: 0,
+          ":hover": {
+            backgroundColor: "transparent"
+          }
+        }
+      }),
+      popper: ({ theme: theme2 }) => ({
+        padding: theme2.spacing(1, 0)
+      }),
+      listbox: ({ theme: theme2 }) => ({
+        padding: theme2.spacing(1.5),
+        gap: theme2.spacing(1),
+        [`.${autocompleteClasses.option}`]: {
+          justifyContent: "space-between",
+          alignItems: "center",
+          padding: theme2.spacing(2, 2.5),
+          borderRadius: theme2.spacing(1.5),
+          ...theme2.typography.text.md.medium,
+          ":not(:last-of-type)": {
+            marginBottom: theme2.spacing(1)
+          }
+        },
+        [`.${autocompleteClasses.option}.${autocompleteClasses.focused}, .${autocompleteClasses.option}[aria-selected=true], .${autocompleteClasses.option}[aria-selected=true].${autocompleteClasses.focused}`]: {
+          backgroundColor: theme2.vars?.palette.neutral.background[1].selected
+        }
+      }),
+      inputRoot: ({ theme: theme2 }) => ({
+        variants: [
+          {
+            props: { size: "small" },
+            style: {
+              [`&.${inputBaseClasses.sizeSmall}`]: {
+                paddingTop: theme2.spacing(0.75),
+                // 3px
+                paddingBottom: theme2.spacing(0.75),
+                // 3px
+                [`.${inputBaseClasses.input}`]: {
+                  paddingTop: theme2.spacing(0.75),
+                  // 3px
+                  paddingBottom: theme2.spacing(0.75)
+                  // 3px
+                }
+              }
+            }
+          },
+          {
+            props: { size: "medium" },
+            style: {
+              paddingTop: theme2.spacing(1),
+              // 4px
+              paddingBottom: theme2.spacing(1),
+              // 4px
+              [`.${inputBaseClasses.input}`]: {
+                paddingTop: theme2.spacing(1.5),
+                // 6px
+                paddingBottom: theme2.spacing(1.5)
+                // 6px
+              }
+            }
+          },
+          {
+            props: { size: "large" },
+            style: {
+              paddingTop: theme2.spacing(1.75),
+              // 7px
+              paddingBottom: theme2.spacing(1.75),
+              // 7px
+              [`.${inputBaseClasses.input}`]: {
+                paddingTop: theme2.spacing(1.75),
+                // 10px
+                paddingBottom: theme2.spacing(1.75)
+                // 10px
+              }
+            }
+          }
+        ]
+      })
+    },
+    defaultProps: {
+      noOptionsText: "Se\xE7enek bulunamad\u0131...",
+      renderOption({ key, ...props }, option, state, ownerState) {
+        return /* @__PURE__ */ jsxs("li", { ...props, children: [
+          ownerState.getOptionLabel(option),
+          state.selected ? /* @__PURE__ */ jsx(
+            Box,
+            {
+              sx: {
+                color: (t) => t.vars?.palette.brand.foreground[1].rest,
+                width: "20px",
+                height: "20px"
+              },
+              children: /* @__PURE__ */ jsx(CheckIcon_default, { width: "20px", height: "20px" })
+            }
+          ) : null
+        ] }, key);
+      },
+      slotProps: {
+        paper: {
+          elevation: 3
+        },
+        chip: {
+          variant: "outline",
+          color: "informative"
+        }
+      },
+      popupIcon: /* @__PURE__ */ jsx(
+        ChevronDownIcon_default,
+        {
+          width: "18px",
+          height: "18px",
+          className: svgIconClasses.root
+        }
+      ),
+      clearIcon: /* @__PURE__ */ jsx(XIcon_default, { width: "18px", height: "18px", className: svgIconClasses.root })
+    }
+  };
+}
+function createOutlinedInput() {
+  return {
+    styleOverrides: {
+      root: ({ theme: theme2 }) => ({
+        background: theme2.vars?.palette.neutral.background[1].rest,
+        borderRadius: theme2.spacing(2),
+        [`.${selectClasses.icon}`]: {
+          top: "calc(50% - 10px)",
+          right: theme2.spacing(3)
+        },
+        [`.${outlinedInputClasses.root}:before, .${outlinedInputClasses.root}:after`]: {
+          display: "none !important"
+        },
+        [`.${outlinedInputClasses.notchedOutline} > legend`]: {
+          display: "none"
+        },
+        [`.${outlinedInputClasses.notchedOutline}`]: {
+          top: 0,
+          borderColor: theme2.vars?.palette.neutral.stroke[1].hover,
+          borderRadius: theme2.spacing(2)
+        },
+        [`&.${outlinedInputClasses.focused}, &:hover:not(.${outlinedInputClasses.disabled})`]: {
+          [`.${outlinedInputClasses.notchedOutline}`]: {
+            borderColor: theme2.vars?.palette.neutral.stroke.focus[2]
+          },
+          [`.${outlinedInputClasses.input}`]: {
+            color: theme2.vars?.palette.neutral.foreground[1].rest
+          }
+        },
+        [`&.${outlinedInputClasses.error}:not(.${outlinedInputClasses.disabled})`]: {
+          [`.${outlinedInputClasses.notchedOutline}`]: {
+            borderColor: theme2.vars?.palette.danger.stroke[1].rest
+          }
+        },
+        [`&.${outlinedInputClasses.disabled}`]: {
+          background: theme2.vars?.palette.neutral.background.disabled.rest,
+          color: theme2.vars?.palette.neutral.foreground.disabled.rest,
+          [`.${outlinedInputClasses.input}`]: {
+            color: theme2.vars?.palette.neutral.foreground.disabled.rest
+          },
+          [`.${outlinedInputClasses.notchedOutline}`]: {
+            borderColor: theme2.vars?.palette.neutral.stroke.disabled
+          }
+        },
+        [`& .${outlinedInputClasses.notchedOutline}, &.${outlinedInputClasses.root}.${outlinedInputClasses.focused} .${outlinedInputClasses.notchedOutline}`]: {
+          borderWidth: "1px"
+        },
+        [`.${outlinedInputClasses.input}`]: {
+          color: theme2.vars?.palette.neutral.foreground[4].rest
+        }
+      })
+    },
+    variants: [
+      {
+        props: { size: "small" },
+        style: ({ theme: theme2 }) => ({
+          ...theme2.typography.text.sm.regular,
+          paddingLeft: theme2.spacing(3),
+          paddingRight: theme2.spacing(3),
+          [`& .${outlinedInputClasses.input}, &.${autocompleteClasses.input}`]: {
+            padding: theme2.spacing(1.5, 0),
+            height: theme2.spacing(5)
+          },
+          [`& .${outlinedInputClasses.notchedOutline}`]: {
+            borderWidth: "1px"
+          }
+        })
+      },
+      {
+        props: { size: "medium" },
+        style: ({ theme: theme2 }) => ({
+          ...theme2.typography.text.md.regular,
+          paddingLeft: theme2.spacing(3),
+          paddingRight: theme2.spacing(3),
+          [`& .${outlinedInputClasses.input}`]: {
+            padding: theme2.spacing(2.5, 0),
+            height: theme2.spacing(5)
+          }
+        })
+      },
+      {
+        props: { size: "large" },
+        style: ({ theme: theme2 }) => ({
+          ...theme2.typography.text.md.regular,
+          paddingLeft: theme2.spacing(3),
+          paddingRight: theme2.spacing(3),
+          [`& .${outlinedInputClasses.input}`]: {
+            padding: theme2.spacing(3, 0),
+            height: theme2.spacing(6)
+          }
+        })
+      }
+    ]
+  };
+}
+
+// theme/colors/colors.ts
+var colors = {
+  base: {
+    black: "#000000",
+    white: "#ffffff"
+  },
+  grey: {
+    "2": "#050505",
+    "4": "#0a0a0a",
+    "6": "#0f0f0f",
+    "8": "#141414",
+    "10": "#1a1a1a",
+    "12": "#1f1f1f",
+    "14": "#242424",
+    "16": "#292929",
+    "18": "#2e2e2e",
+    "20": "#333333",
+    "22": "#383838",
+    "24": "#3d3d3d",
+    "26": "#424242",
+    "30": "#4d4d4d",
+    "32": "#525252",
+    "34": "#575757",
+    "36": "#5c5c5c",
+    "38": "#616161",
+    "40": "#666666",
+    "42": "#6b6b6b",
+    "44": "#707070",
+    "46": "#757575",
+    "60": "#999999",
+    "68": "#adadad",
+    "70": "#b3b3b3",
+    "74": "#bdbdbd",
+    "78": "#c7c7c7",
+    "82": "#d1d1d1",
+    "84": "#d6d6d6",
+    "86": "#dbdbdb",
+    "88": "#e0e0e0",
+    "90": "#e6e6e6",
+    "92": "#ebebeb",
+    "94": "#f0f0f0",
+    "96": "#f5f5f5",
+    "98": "#fafafa"
+  },
+  primary: {
+    "10": "#050e1f",
+    "20": "#0a1c3f",
+    "30": "#0f2a5f",
+    "40": "#14387f",
+    "50": "#19469f",
+    "60": "#1e54bf",
+    "70": "#2362df",
+    "80": "#2970ff",
+    "90": "#407fff",
+    "100": "#588fff",
+    "110": "#709fff",
+    "120": "#88afff",
+    "130": "#9fbfff",
+    "140": "#b7cfff",
+    "150": "#cfdfff",
+    "160": "#e7efff"
+  },
+  redOld: {
+    tint: {
+      "30": "#e58b8c",
+      "40": "#eba8a9",
+      "60": "#f8e2e2"
+    },
+    origin: "#d13438",
+    shade: {
+      "10": "#b6292c",
+      "40": "#5b1516"}
+  },
+  red: {
+    "20": "#340d0e",
+    "30": "#501415",
+    "50": "#812023",
+    "60": "#9d272a",
+    "70": "#b62d31",
+    "80": "#d13438",
+    "90": "#d6484c",
+    "100": "#da5d60",
+    "110": "#df7173",
+    "120": "#e38588",
+    "130": "#eaa3a5",
+    "140": "#f1c2c3",
+    "150": "#f5d2d3",
+    "160": "#faeaeb"
+  },
+  green: {
+    tint: {
+      "20": "#58a358",
+      "30": "#7cb77c",
+      "40": "#9fcb9f",
+      "60": "#e7f2e7"
+    },
+    origin: "#107c10",
+    shade: {
+      "10": "#0e690e",
+      "40": "#063206"}
+  },
+  orange: {
+    tint: {
+      "30": "#f6a27e",
+      "40": "#f8bba1",
+      "60": "#fdeee8"
+    },
+    origin: "#ee5615",
+    shade: {
+      "10": "#ca4912",
+      "40": "#5f2208"}
+  },
+  yellow: {
+    tint: {
+      "20": "#feeb4d",
+      "40": "#fef499",
+      "60": "#fffce6"
+    },
+    origin: "#fde300",
+    shade: {
+      "10": "#d7c100",
+      "30": "#8b7d00",
+      "40": "#655b00",
+      "50": "#3f3900"}
+  },
+  purple: {
+    tint: {
+      "20": "#9971df",
+      "30": "#ad8ee6",
+      "40": "#c2aaec",
+      "60": "#e6ddf7"
+    },
+    origin: "#6c33d2",
+    shade: {
+      "10": "#5a2baf",
+      "30": "#3c1d75",
+      "40": "#2d1658"}
+  },
+  pink: {
+    tint: {
+      "20": "#da628b",
+      "30": "#e282a2",
+      "40": "#e9a1ba",
+      "60": "#f6d9e3"
+    },
+    origin: "#da2d68",
+    shade: {
+      "10": "#a81849",
+      "30": "#701031",
+      "40": "#540c25"}
+  },
+  cyan: {
+    tint: {
+      "20": "#4fbccb",
+      "30": "#72cad5",
+      "40": "#96d7e0",
+      "60": "#d5eff2"
+    },
+    origin: "#029fb4",
+    shade: {
+      "10": "#028496",
+      "30": "#015864",
+      "40": "#01424b"}
+  },
+  lime: {
+    tint: {
+      "20": "#cfdb54",
+      "60": "#f3f6d6"
+    },
+    origin: "#b9cb09",
+    shade: {
+      "10": "#9aa907",
+      "30": "#677105",
+      "40": "#4d5504"}
+  }
+};
+
+// theme/colors/palettes.ts
+var palettes = {
+  light: {
+    neutral: {
+      background: {
+        1: {
+          rest: colors.base.white,
+          hover: colors.grey["96"],
+          pressed: colors.grey["88"],
+          selected: colors.grey["92"]
+        },
+        2: {
+          rest: colors.grey["98"],
+          hover: colors.grey["94"],
+          pressed: colors.grey["86"],
+          selected: colors.grey["90"]
+        },
+        3: {
+          rest: colors.grey["96"],
+          hover: colors.grey["92"],
+          pressed: colors.grey["84"],
+          selected: colors.grey["88"]
+        },
+        4: {
+          rest: colors.grey["94"],
+          hover: colors.grey["98"],
+          pressed: colors.grey["96"],
+          selected: colors.base.white
+        },
+        5: {
+          rest: colors.grey["92"],
+          hover: colors.grey["96"],
+          pressed: colors.grey["94"],
+          selected: colors.grey["98"]
+        },
+        6: {
+          rest: colors.grey["90"]
+        },
+        alpha: {
+          1: {
+            rest: "rgba(255, 255, 255, 0.50)"
+          },
+          2: {
+            rest: "rgba(255, 255, 255, 0.80)"
+          }
+        },
+        disabled: {
+          rest: colors.grey["94"]
+        },
+        inverted: {
+          rest: colors.grey["16"],
+          disabled: {
+            rest: "rgba(255, 255, 255, 0.10)"
+          }
+        },
+        transparent: {
+          rest: "rgba(255, 255, 255, 0.00)",
+          hover: "rgba(255, 255, 255, 0.00)",
+          pressed: "rgba(255, 255, 255, 0.00)",
+          selected: "rgba(255, 255, 255, 0.00)"
+        },
+        overlay: {
+          background: "rgba(0, 0, 0, 0.40)",
+          scrollbar: "rgba(0, 0, 0, 0.50)"
+        },
+        static: {
+          rest: colors.grey["20"]
+        },
+        stencil: {
+          1: {
+            rest: colors.grey["90"]
+          },
+          2: {
+            rest: colors.grey["98"]
+          }
+        },
+        subtle: {
+          rest: "rgba(255, 255, 255, 0.00)",
+          hover: colors.grey["96"],
+          pressed: colors.grey["88"],
+          light: {
+            alpha: {
+              hover: "rgba(255, 255, 255, 0.70)",
+              pressed: "rgba(255, 255, 255, 0.50)",
+              selected: "rgba(255, 255, 255, 0.00)"
+            }
+          },
+          selected: colors.grey["92"],
+          inverted: {
+            rest: "rgba(255, 255, 255, 0.00)",
+            hover: "rgba(0, 0, 0, 0.10)",
+            pressed: "rgba(0, 0, 0, 0.30)",
+            selected: "rgba(0, 0, 0, 0.20)"
+          }
+        }
+      },
+      foreground: {
+        1: {
+          rest: colors.grey["14"],
+          hover: colors.grey["14"],
+          pressed: colors.grey["14"],
+          selected: colors.grey["14"],
+          static: {
+            rest: colors.grey["14"]
+          }
+        },
+        2: {
+          brand: {
+            hover: colors.primary["80"],
+            pressed: colors.primary["70"],
+            selected: colors.primary["80"]
+          },
+          rest: colors.grey["26"],
+          hover: colors.grey["14"],
+          pressed: colors.grey["14"],
+          selected: colors.grey["14"],
+          link: {
+            rest: colors.grey["26"],
+            hover: colors.grey["14"],
+            pressed: colors.grey["14"],
+            selected: colors.grey["14"]
+          }
+        },
+        3: {
+          rest: colors.grey["38"],
+          hover: colors.grey["26"],
+          pressed: colors.grey["26"],
+          selected: colors.grey["26"],
+          brand: {
+            hover: colors.primary["80"],
+            pressed: colors.primary["70"],
+            selected: colors.primary["80"]
+          }
+        },
+        4: {
+          rest: colors.grey["44"]
+        },
+        disabled: {
+          rest: colors.grey["74"]
+        },
+        inverted: {
+          disabled: {
+            rest: "rgba(255, 255, 255, 0.40)"
+          },
+          static: {
+            rest: colors.base.white
+          },
+          rest: colors.base.white,
+          hover: colors.base.white,
+          pressed: colors.base.white,
+          selected: colors.base.white,
+          link: {
+            rest: colors.base.white,
+            hover: colors.base.white,
+            pressed: colors.base.white,
+            selected: colors.base.white
+          }
+        },
+        on: {
+          brand: {
+            rest: colors.base.white
+          }
+        }
+      },
+      stroke: {
+        1: {
+          rest: colors.grey["82"],
+          hover: colors.grey["78"],
+          pressed: colors.grey["70"],
+          selected: colors.grey["74"]
+        },
+        2: {
+          rest: colors.grey["88"]
+        },
+        3: {
+          rest: colors.grey["94"]
+        },
+        alpha: {
+          rest: "rgba(0, 0, 0, 0.05)"
+        },
+        subtle: {
+          rest: colors.grey["88"]
+        },
+        on: {
+          brand: {
+            1: {
+              rest: colors.base.white
+            },
+            2: {
+              rest: colors.base.white,
+              hover: colors.base.white,
+              pressed: colors.base.white,
+              selected: colors.base.white
+            }
+          }
+        },
+        accessible: {
+          rest: colors.grey["38"],
+          hover: colors.grey["34"],
+          pressed: colors.grey["30"],
+          selected: colors.primary["80"]
+        },
+        disabled: {
+          rest: colors.grey["88"]
+        },
+        inverted: {
+          disabled: "rgba(255, 255, 255, 0.40)"
+        },
+        transparent: {
+          rest: "rgba(255, 255, 255, 0.00)",
+          interactive: "rgba(255, 255, 255, 0.00)",
+          disabled: "rgba(255, 255, 255, 0.00)"
+        },
+        focus: {
+          1: colors.base.white,
+          2: colors.base.black
+        }
+      }
+    },
+    brand: {
+      background: {
+        1: {
+          rest: colors.primary["80"],
+          hover: colors.primary["70"],
+          pressed: colors.primary["40"],
+          selected: colors.primary["60"]
+        },
+        2: {
+          rest: colors.primary["160"],
+          hover: colors.primary["150"],
+          pressed: colors.primary["130"]
+        },
+        compound: {
+          rest: colors.primary["80"],
+          hover: colors.primary["70"],
+          pressed: colors.primary["60"]
+        },
+        static: {
+          rest: colors.primary["80"]
+        },
+        inverted: {
+          rest: colors.base.white,
+          hover: colors.primary["160"],
+          pressed: colors.primary["140"],
+          selected: colors.primary["150"]
+        }
+      },
+      foreground: {
+        1: {
+          rest: colors.primary["80"]
+        },
+        2: {
+          rest: colors.primary["70"],
+          hover: colors.primary["60"],
+          pressed: colors.primary["30"]
+        },
+        link: {
+          rest: colors.primary["70"],
+          hover: colors.primary["60"],
+          pressed: colors.primary["40"],
+          selected: colors.primary["70"]
+        },
+        compound: {
+          rest: colors.primary["80"],
+          hover: colors.primary["70"],
+          pressed: colors.primary["60"]
+        },
+        inverted: {
+          rest: colors.primary["100"],
+          hover: colors.primary["110"],
+          pressed: colors.primary["100"]
+        },
+        on: {
+          light: {
+            rest: colors.primary["80"],
+            hover: colors.primary["70"],
+            pressed: colors.primary["50"],
+            selected: colors.primary["60"]
+          }
+        }
+      },
+      stroke: {
+        1: {
+          rest: colors.primary["80"]
+        },
+        2: {
+          rest: colors.primary["140"],
+          hover: colors.primary["120"],
+          pressed: colors.primary["80"]
+        },
+        compound: {
+          rest: colors.primary["80"],
+          hover: colors.primary["70"],
+          pressed: colors.primary["60"]
+        }
+      }
+    },
+    danger: {
+      background: {
+        1: {
+          rest: colors.red["80"],
+          hover: colors.red["70"],
+          pressed: colors.red["50"],
+          selected: colors.red["60"]
+        },
+        2: {
+          rest: colors.red["160"],
+          hover: colors.red["150"],
+          pressed: colors.red["130"]
+        },
+        compound: {
+          rest: colors.red["80"],
+          hover: colors.red["70"],
+          pressed: colors.red["60"]
+        },
+        static: {
+          rest: colors.red["80"]
+        },
+        inverted: {
+          rest: colors.base.white,
+          hover: colors.red["160"],
+          pressed: colors.red["140"],
+          selected: colors.red["150"]
+        }
+      },
+      foreground: {
+        1: {
+          rest: colors.red["80"]
+        },
+        2: {
+          rest: colors.red["70"],
+          hover: colors.red["60"],
+          pressed: colors.red["50"]
+        },
+        link: {
+          rest: colors.red["70"],
+          hover: colors.red["60"],
+          pressed: colors.red["50"],
+          selected: colors.red["70"]
+        },
+        compound: {
+          rest: colors.red["80"],
+          hover: colors.red["70"],
+          pressed: colors.red["60"]
+        },
+        inverted: {
+          rest: colors.red["100"],
+          hover: colors.red["110"],
+          pressed: colors.red["100"]
+        },
+        on: {
+          light: {
+            rest: colors.red["80"],
+            hover: colors.red["70"],
+            pressed: colors.red["50"],
+            selected: colors.red["60"]
+          }
+        }
+      },
+      stroke: {
+        1: {
+          rest: colors.red["80"]
+        },
+        2: {
+          rest: colors.red["140"],
+          hover: colors.red["120"],
+          pressed: colors.red["80"]
+        },
+        compound: {
+          rest: colors.red["80"],
+          hover: colors.red["70"],
+          pressed: colors.red["60"]
+        }
+      }
+    },
+    shared: {
+      background: {
+        red: {
+          1: colors.redOld.tint["60"],
+          3: colors.redOld.origin
+        },
+        green: {
+          1: colors.green.tint["60"],
+          3: colors.green.origin
+        },
+        orange: {
+          1: colors.orange.tint["60"],
+          3: colors.orange.origin
+        },
+        yellow: {
+          1: colors.yellow.tint["60"],
+          3: colors.yellow.origin
+        },
+        purple: {
+          1: colors.purple.tint["60"],
+          3: colors.purple.origin
+        },
+        pink: {
+          1: colors.pink.tint["60"],
+          3: colors.pink.origin
+        },
+        cyan: {
+          1: colors.cyan.tint["60"],
+          3: colors.cyan.origin
+        },
+        lime: {
+          1: colors.lime.tint["60"],
+          3: colors.lime.origin
+        }
+      },
+      foreground: {
+        red: {
+          1: colors.redOld.shade["10"],
+          3: colors.redOld.origin
+        },
+        green: {
+          1: colors.green.shade["10"],
+          3: colors.green.origin
+        },
+        orange: {
+          1: colors.orange.shade["10"],
+          3: colors.orange.origin
+        },
+        yellow: {
+          1: colors.yellow.shade["40"],
+          3: colors.yellow.shade["30"]
+        },
+        purple: {
+          1: colors.purple.shade["40"],
+          3: colors.purple.shade["30"]
+        },
+        pink: {
+          1: colors.pink.shade["40"],
+          3: colors.pink.shade["30"]
+        },
+        cyan: {
+          1: colors.cyan.shade["40"],
+          3: colors.cyan.shade["30"]
+        },
+        lime: {
+          1: colors.lime.shade["40"],
+          3: colors.lime.shade["30"]
+        }
+      },
+      stroke: {
+        red: {
+          1: colors.redOld.tint["40"],
+          2: colors.redOld.origin
+        },
+        green: {
+          1: colors.green.tint["40"],
+          2: colors.green.origin
+        },
+        orange: {
+          1: colors.orange.tint["40"],
+          2: colors.orange.origin
+        },
+        yellow: {
+          1: colors.yellow.tint["20"],
+          2: colors.yellow.shade["10"]
+        },
+        purple: {
+          1: colors.purple.tint["20"],
+          2: colors.purple.shade["10"]
+        },
+        pink: {
+          1: colors.pink.tint["20"],
+          2: colors.pink.shade["10"]
+        },
+        cyan: {
+          1: colors.cyan.tint["20"],
+          2: colors.cyan.shade["10"]
+        },
+        lime: {
+          1: colors.lime.tint["20"],
+          2: colors.lime.shade["10"]
+        }
+      }
+    }
+  },
+  dark: {
+    neutral: {
+      background: {
+        1: {
+          rest: colors.grey["16"],
+          hover: colors.grey["24"],
+          pressed: colors.grey["12"],
+          selected: colors.grey["22"]
+        },
+        2: {
+          rest: colors.grey["12"],
+          hover: colors.grey["20"],
+          pressed: colors.grey["8"],
+          selected: colors.grey["18"]
+        },
+        3: {
+          rest: colors.grey["8"],
+          hover: colors.grey["16"],
+          pressed: colors.grey["4"],
+          selected: colors.grey["14"]
+        },
+        4: {
+          rest: colors.grey["4"],
+          hover: colors.grey["12"],
+          pressed: colors.base.black,
+          selected: colors.grey["10"]
+        },
+        5: {
+          rest: colors.base.black,
+          hover: colors.grey["8"],
+          pressed: colors.grey["2"],
+          selected: colors.grey["6"]
+        },
+        6: {
+          rest: colors.grey["20"]
+        },
+        alpha: {
+          1: {
+            rest: "rgba(26, 26, 26, 0.50)"
+          },
+          2: {
+            rest: "rgba(31, 31, 31, 0.70)"
+          }
+        },
+        disabled: {
+          rest: colors.grey["8"]
+        },
+        inverted: {
+          rest: colors.base.white,
+          disabled: {
+            rest: "rgba(255, 255, 255, 0.10)"
+          }
+        },
+        transparent: {
+          rest: "rgba(255, 255, 255, 0.00)",
+          hover: "rgba(255, 255, 255, 0.00)",
+          pressed: "rgba(255, 255, 255, 0.00)",
+          selected: "rgba(255, 255, 255, 0.00)"
+        },
+        overlay: {
+          background: "rgba(0, 0, 0, 0.50)",
+          scrollbar: "rgba(0, 0, 0, 0.60)"
+        },
+        static: {
+          rest: colors.grey["24"]
+        },
+        stencil: {
+          1: {
+            rest: colors.grey["34"]
+          },
+          2: {
+            rest: colors.grey["20"]
+          }
+        },
+        subtle: {
+          rest: "rgba(0, 0, 0, 0.00)",
+          hover: colors.grey["22"],
+          pressed: colors.grey["18"],
+          light: {
+            alpha: {
+              hover: "rgba(36, 36, 36, 0.80)",
+              pressed: "rgba(36, 36, 36, 0.50)",
+              selected: "rgba(0, 0, 0, 0.00)"
+            }
+          },
+          selected: colors.grey["20"],
+          inverted: {
+            rest: "rgba(0, 0, 0, 0.00)",
+            hover: "rgba(0, 0, 0, 0.10)",
+            pressed: "rgba(0, 0, 0, 0.30)",
+            selected: "rgba(0, 0, 0, 0.20)"
+          }
+        }
+      },
+      foreground: {
+        1: {
+          rest: colors.base.white,
+          hover: colors.base.white,
+          pressed: colors.base.white,
+          selected: colors.base.white,
+          static: {
+            rest: colors.grey["14"]
+          }
+        },
+        2: {
+          brand: {
+            hover: colors.primary["100"],
+            pressed: colors.primary["90"],
+            selected: colors.primary["100"]
+          },
+          rest: colors.grey["84"],
+          hover: colors.base.white,
+          pressed: colors.base.white,
+          selected: colors.base.white,
+          link: {
+            rest: colors.grey["84"],
+            hover: colors.base.white,
+            pressed: colors.base.white,
+            selected: colors.base.white
+          }
+        },
+        3: {
+          rest: colors.grey["68"],
+          hover: colors.grey["84"],
+          pressed: colors.grey["84"],
+          selected: colors.grey["84"],
+          brand: {
+            hover: colors.primary["100"],
+            pressed: colors.primary["90"],
+            selected: colors.primary["100"]
+          }
+        },
+        4: {
+          rest: colors.grey["60"]
+        },
+        disabled: {
+          rest: colors.grey["36"]
+        },
+        inverted: {
+          disabled: {
+            rest: "rgba(255, 255, 255, 0.40)"
+          },
+          static: {
+            rest: colors.base.white
+          },
+          rest: colors.grey["14"],
+          hover: colors.grey["14"],
+          pressed: colors.grey["14"],
+          selected: colors.grey["14"],
+          link: {
+            rest: colors.base.white,
+            hover: colors.base.white,
+            pressed: colors.base.white,
+            selected: colors.base.white
+          }
+        },
+        on: {
+          brand: {
+            rest: colors.base.white
+          }
+        }
+      },
+      stroke: {
+        1: {
+          rest: colors.grey["40"],
+          hover: colors.grey["46"],
+          pressed: colors.grey["42"],
+          selected: colors.grey["44"]
+        },
+        2: {
+          rest: colors.grey["32"]
+        },
+        3: {
+          rest: colors.grey["24"]
+        },
+        alpha: {
+          rest: "rgba(255, 255, 255, 0.10)"
+        },
+        subtle: {
+          rest: colors.grey["4"]
+        },
+        on: {
+          brand: {
+            1: {
+              rest: colors.grey["16"]
+            },
+            2: {
+              rest: colors.base.white,
+              hover: colors.base.white,
+              pressed: colors.base.white,
+              selected: colors.base.white
+            }
+          }
+        },
+        accessible: {
+          rest: colors.grey["68"],
+          hover: colors.grey["74"],
+          pressed: colors.grey["70"],
+          selected: colors.primary["100"]
+        },
+        disabled: {
+          rest: colors.grey["26"]
+        },
+        inverted: {
+          disabled: "rgba(255, 255, 255, 0.40)"
+        },
+        transparent: {
+          rest: "rgba(255, 255, 255, 0.00)",
+          interactive: "rgba(255, 255, 255, 0.00)",
+          disabled: "rgba(255, 255, 255, 0.00)"
+        },
+        focus: {
+          1: colors.base.black,
+          2: colors.base.white
+        }
+      }
+    },
+    brand: {
+      background: {
+        1: {
+          rest: colors.primary["70"],
+          hover: colors.primary["80"],
+          pressed: colors.primary["40"],
+          selected: colors.primary["60"]
+        },
+        2: {
+          rest: colors.primary["20"],
+          hover: colors.primary["40"],
+          pressed: colors.primary["10"]
+        },
+        compound: {
+          rest: colors.primary["100"],
+          hover: colors.primary["110"],
+          pressed: colors.primary["90"]
+        },
+        static: {
+          rest: colors.primary["80"]
+        },
+        inverted: {
+          rest: colors.base.white,
+          hover: colors.primary["160"],
+          pressed: colors.primary["140"],
+          selected: colors.primary["150"]
+        }
+      },
+      foreground: {
+        1: {
+          rest: colors.primary["100"]
+        },
+        2: {
+          rest: colors.primary["110"],
+          hover: colors.primary["130"],
+          pressed: colors.primary["160"]
+        },
+        link: {
+          rest: colors.primary["100"],
+          hover: colors.primary["110"],
+          pressed: colors.primary["90"],
+          selected: colors.primary["100"]
+        },
+        compound: {
+          rest: colors.primary["100"],
+          hover: colors.primary["110"],
+          pressed: colors.primary["90"]
+        },
+        inverted: {
+          rest: colors.primary["80"],
+          hover: colors.primary["70"],
+          pressed: colors.primary["60"]
+        },
+        on: {
+          light: {
+            rest: colors.primary["80"],
+            hover: colors.primary["70"],
+            pressed: colors.primary["50"],
+            selected: colors.primary["60"]
+          }
+        }
+      },
+      stroke: {
+        1: {
+          rest: colors.primary["100"]
+        },
+        2: {
+          rest: colors.primary["50"],
+          hover: colors.primary["50"],
+          pressed: colors.primary["30"]
+        },
+        compound: {
+          rest: colors.primary["100"],
+          hover: colors.primary["110"],
+          pressed: colors.primary["90"]
+        }
+      }
+    },
+    danger: {
+      background: {
+        1: {
+          rest: colors.red["70"],
+          hover: colors.red["80"],
+          pressed: colors.red["50"],
+          selected: colors.red["60"]
+        },
+        2: {
+          rest: colors.red["20"],
+          hover: colors.red["30"],
+          pressed: colors.red["50"]
+        },
+        compound: {
+          rest: colors.red["100"],
+          hover: colors.red["110"],
+          pressed: colors.red["90"]
+        },
+        static: {
+          rest: colors.red["80"]
+        },
+        inverted: {
+          rest: colors.base.white,
+          hover: colors.red["160"],
+          pressed: colors.red["140"],
+          selected: colors.red["150"]
+        }
+      },
+      foreground: {
+        1: {
+          rest: colors.red["100"]
+        },
+        2: {
+          rest: colors.red["110"],
+          hover: colors.red["130"],
+          pressed: colors.red["160"]
+        },
+        link: {
+          rest: colors.red["100"],
+          hover: colors.red["110"],
+          pressed: colors.red["90"],
+          selected: colors.red["100"]
+        },
+        compound: {
+          rest: colors.red["100"],
+          hover: colors.red["110"],
+          pressed: colors.red["90"]
+        },
+        inverted: {
+          rest: colors.red["80"],
+          hover: colors.red["70"],
+          pressed: colors.red["60"]
+        },
+        on: {
+          light: {
+            rest: colors.red["80"],
+            hover: colors.red["70"],
+            pressed: colors.red["50"],
+            selected: colors.red["60"]
+          }
+        }
+      },
+      stroke: {
+        1: {
+          rest: colors.red["100"]
+        },
+        2: {
+          rest: colors.red["50"],
+          hover: colors.red["50"],
+          pressed: colors.red["30"]
+        },
+        compound: {
+          rest: colors.red["100"],
+          hover: colors.red["110"],
+          pressed: colors.red["90"]
+        }
+      }
+    },
+    shared: {
+      background: {
+        red: {
+          1: colors.redOld.shade["40"],
+          3: colors.redOld.origin
+        },
+        green: {
+          1: colors.green.shade["40"],
+          3: colors.green.tint["20"]
+        },
+        orange: {
+          1: colors.orange.shade["40"],
+          3: colors.orange.origin
+        },
+        yellow: {
+          1: colors.yellow.shade["40"],
+          3: colors.yellow.origin
+        },
+        purple: {
+          1: colors.purple.shade["40"],
+          3: colors.purple.origin
+        },
+        pink: {
+          1: colors.pink.shade["40"],
+          3: colors.pink.origin
+        },
+        cyan: {
+          1: colors.cyan.shade["40"],
+          3: colors.cyan.origin
+        },
+        lime: {
+          1: colors.lime.shade["40"],
+          3: colors.lime.origin
+        }
+      },
+      foreground: {
+        red: {
+          1: colors.redOld.tint["30"],
+          3: colors.redOld.tint["30"]
+        },
+        green: {
+          1: colors.green.tint["30"],
+          3: colors.green.tint["40"]
+        },
+        orange: {
+          1: colors.orange.tint["30"],
+          3: colors.orange.tint["30"]
+        },
+        yellow: {
+          1: colors.yellow.shade["50"],
+          3: colors.yellow.tint["40"]
+        },
+        purple: {
+          1: colors.purple.tint["30"],
+          3: colors.purple.tint["40"]
+        },
+        pink: {
+          1: colors.pink.tint["30"],
+          3: colors.pink.tint["40"]
+        },
+        cyan: {
+          1: colors.cyan.tint["30"],
+          3: colors.cyan.tint["40"]
+        },
+        lime: {
+          1: colors.lime.origin,
+          3: colors.lime.shade["40"]
+        }
+      },
+      stroke: {
+        red: {
+          1: colors.redOld.origin,
+          2: colors.redOld.tint["30"]
+        },
+        green: {
+          1: colors.green.origin,
+          2: colors.green.tint["40"]
+        },
+        orange: {
+          1: colors.orange.origin,
+          2: colors.orange.shade["40"]
+        },
+        yellow: {
+          1: colors.yellow.origin,
+          2: colors.yellow.shade["40"]
+        },
+        purple: {
+          1: colors.purple.origin,
+          2: colors.purple.shade["40"]
+        },
+        pink: {
+          1: colors.pink.origin,
+          2: colors.pink.shade["40"]
+        },
+        cyan: {
+          1: colors.cyan.origin,
+          2: colors.cyan.shade["40"]
+        },
+        lime: {
+          1: colors.lime.origin,
+          2: colors.lime.shade["40"]
+        }
+      }
+    }
+  }
+};
+var palettes_default = palettes;
+
+// theme/colors/colorSchemes.ts
+var colorSchemes = {
+  light: {
+    palette: {
+      neutral: palettes_default.light.neutral,
+      danger: palettes_default.light.danger,
+      shared: palettes_default.light.shared,
+      brand: palettes_default.light.brand
+    }
+  },
+  dark: {
+    palette: {
+      neutral: palettes_default.dark.neutral,
+      danger: palettes_default.dark.danger,
+      shared: palettes_default.dark.shared,
+      brand: palettes_default.dark.brand
+    }
+  }
+};
+var colorSchemes_default = colorSchemes;
+
+// utilities/flattenObject.ts
+function flattenObject(obj, parentKey = "", sep = ".") {
+  const items = [];
+  for (const [k, v] of Object.entries(obj)) {
+    const newKey = parentKey ? `${parentKey}${sep}${k}` : k;
+    if (typeof v === "object" && v !== null && !Array.isArray(v)) {
+      items.push(...flattenObject(v, newKey, sep));
+    } else {
+      items.push({ key: newKey, value: v });
+    }
+  }
+  return items;
+}
+
+// theme/components/Typography.tsx
+function createTypography() {
+  return {
+    variants: [
+      ...flattenObject(colorSchemes_default.light.palette).map((color) => {
+        return {
+          props: { color: color.key },
+          style: {
+            color: color.value
+          }
+        };
+      })
+    ],
+    defaultProps: {}
+  };
+}
+function createFilledInput() {
+  return {
+    styleOverrides: {
+      root: ({ theme: theme2 }) => ({
+        background: theme2.vars?.palette.neutral.background[3].rest,
+        borderRadius: theme2.spacing(2),
+        paddingLeft: theme2.spacing(3),
+        paddingRight: theme2.spacing(3),
+        color: theme2.vars?.palette.neutral.foreground[4].rest,
+        ":after, :before": {
+          display: "none"
+        },
+        ":before": {
+          borderRadius: theme2.spacing(2),
+          top: "0px",
+          inset: "0px",
+          borderStyle: "solid",
+          borderColor: theme2.vars?.palette.neutral.stroke.focus[2]
+        },
+        [`.${selectClasses.icon}`]: {
+          top: "calc(50% - 10px)",
+          right: theme2.spacing(3)
+        },
+        [`&:hover:not(.${filledInputClasses.disabled}, .${filledInputClasses.error})`]: {
+          background: theme2.vars?.palette.neutral.background[3].hover,
+          color: theme2.vars?.palette.neutral.foreground[1].rest,
+          "&:before": {
+            borderColor: theme2.vars?.palette.neutral.stroke.focus[2]
+          }
+        },
+        [`&.${filledInputClasses.focused}`]: {
+          background: theme2.vars?.palette.neutral.background[3].rest,
+          color: theme2.vars?.palette.neutral.foreground[1].rest,
+          "&:before": {
+            display: "block"
+          }
+        },
+        [`&.${filledInputClasses.error}:not(.${filledInputClasses.disabled})`]: {
+          "&:before": {
+            display: "block",
+            borderWidth: "0px",
+            borderBottomWidth: "1px",
+            borderColor: theme2.vars?.palette.danger.stroke[1].rest
+          }
+        },
+        [`&.${filledInputClasses.disabled}`]: {
+          background: theme2.vars?.palette.neutral.background.disabled.rest,
+          color: theme2.vars?.palette.neutral.foreground.disabled.rest
+        }
+      })
+    },
+    variants: [
+      {
+        props: { size: "small" },
+        style: ({ theme: theme2 }) => ({
+          ...theme2.typography.text.sm.regular,
+          [`& .${filledInputClasses.input}`]: {
+            padding: theme2.spacing(1.5, 0),
+            height: theme2.spacing(5)
+          },
+          ":before": {
+            borderWidth: "1px"
+          },
+          [`&.${filledInputClasses.error}:not(.${filledInputClasses.disabled})`]: {
+            "&:before": {
+              borderBottomWidth: "1px"
+            }
+          }
+        })
+      },
+      {
+        props: { size: "medium" },
+        style: ({ theme: theme2 }) => ({
+          ...theme2.typography.text.md.regular,
+          ":before": {
+            borderWidth: "1px"
+          },
+          [`& .${filledInputClasses.input}`]: {
+            padding: theme2.spacing(2.5, 0),
+            height: theme2.spacing(5)
+          },
+          [`&:hover:not(.${filledInputClasses.disabled}, .${filledInputClasses.error})`]: {
+            "&:before": {
+              borderWidth: "1px",
+              borderColor: theme2.vars?.palette.neutral.stroke.focus[2]
+            }
+          },
+          [`&.${filledInputClasses.error}:not(.${filledInputClasses.disabled})`]: {
+            "&:before": {
+              borderBottomWidth: "1px"
+            }
+          }
+        })
+      },
+      {
+        props: { size: "large" },
+        style: ({ theme: theme2 }) => ({
+          ...theme2.typography.text.md.regular,
+          ":before": {
+            borderWidth: "1px"
+          },
+          [`& .${filledInputClasses.input}`]: {
+            padding: theme2.spacing(3, 0),
+            height: theme2.spacing(6)
+          },
+          [`&:hover:not(.${filledInputClasses.disabled}, .${filledInputClasses.error})`]: {
+            "&:before": {
+              borderWidth: "1px",
+              borderColor: theme2.vars?.palette.neutral.stroke.focus[2]
+            }
+          },
+          [`&.${filledInputClasses.error}:not(.${filledInputClasses.disabled})`]: {
+            "&:before": {
+              borderBottomWidth: "1px"
+            }
+          }
+        })
+      }
+    ]
+  };
+}
+function createInputBase() {
+  return {
+    styleOverrides: {
+      root: ({ theme: theme2 }) => ({
+        ...theme2.typography.text.md.regular,
+        color: theme2.vars?.palette.neutral.foreground[4].rest,
+        // show placeholder
+        [`label[data-shrink=false] + &.${inputBaseClasses.formControl} .${inputBaseClasses.input}::-webkit-input-placeholder, .${inputBaseClasses.input}::-webkit-input-placeholder`]: {
+          opacity: "1 !important"
+        },
+        [`&.${inputBaseClasses.focused}`]: {
+          color: theme2.vars?.palette.neutral.foreground[1].rest
+        },
+        [`&.${filledInputClasses.disabled}`]: {
+          color: theme2.vars?.palette.neutral.foreground.disabled.rest
+        },
+        [`.${outlinedInputClasses.notchedOutline}`]: {}
+      })
+    }
+  };
+}
+function createPaper() {
+  return {
+    styleOverrides: {
+      rounded: ({ theme: theme2 }) => ({
+        borderRadius: theme2.spacing(2)
+      }),
+      root: ({ theme: theme2 }) => ({
+        [`&.${menuClasses.paper}`]: {
+          marginTop: theme2.spacing(0.5)
+        },
+        [`&.${menuClasses.paper} .${listClasses.root} > .${menuItemClasses.root}.${menuItemClasses.selected}`]: {
+          ":after": {
+            content: "' '",
+            backgroundImage: "url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE2LjY2NjYgNUw3LjQ5OTk4IDE0LjE2NjdMMy4zMzMzMSAxMCIgc3Ryb2tlPSIjMjk3MEZGIiBzdHJva2Utd2lkdGg9IjEuNjY2NjciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K')",
+            display: "block",
+            width: "20px",
+            height: "20px",
+            position: "absolute",
+            right: "10px",
+            top: "50%",
+            transform: "translateY(-50%)",
+            color: "var(--brand-foreground-1-rest)"
+          }
+        }
+      })
+    },
+    defaultProps: {
+      elevation: 2
+    }
+  };
+}
+function createButtonBase() {
+  return {
+    styleOverrides: {
+      root: ({ theme: theme2 }) => ({
+        [`&.${buttonClasses.root}.${buttonClasses.disabled}`]: {
+          backgroundColor: theme2.vars?.palette.neutral.background.disabled.rest,
+          color: theme2.vars?.palette.neutral.foreground.disabled.rest,
+          borderColor: theme2.vars?.palette.neutral.stroke.disabled.rest
+        }
+      })
+    },
+    defaultProps: {
+      disableRipple: true
+    }
+  };
+}
+function createButton() {
+  return {
+    defaultProps: {
+      disableElevation: true,
+      disableRipple: true,
+      disableFocusRipple: true,
+      disableTouchRipple: true
+    },
+    styleOverrides: {
+      root: ({ theme: theme2 }) => {
+        const brand = theme2.vars?.palette.brand;
+        const neutral = theme2.vars?.palette.neutral;
+        const danger = theme2.vars?.palette.danger;
+        return {
+          lineHeight: "1",
+          padding: "var(--padding-y) var(--padding-x)",
+          "&:focus": {
+            outline: `2px solid ${neutral?.stroke.focus[2]}`,
+            outlineOffset: "2px"
+          },
+          [`.${buttonClasses.icon}`]: {
+            marginLeft: 0,
+            marginRight: 0
+          },
+          [`& > svg.${svgIconClasses.root} > path`]: {
+            strokeWidth: "1.5"
+          },
+          [`&:has(> .${svgIconClasses.root}:only-child)`]: {
+            minWidth: "unset"
+          },
+          variants: [
+            // ** SIZES **
+            // - EXTRA SMALL
+            {
+              props: { size: "extra-small" },
+              style: {
+                gap: theme2.spacing(2),
+                "--padding-x": theme2.spacing(3.5),
+                "--padding-y": theme2.spacing(2.75),
+                fontSize: theme2.typography.text.xs.medium.fontSize,
+                fontWeight: theme2.typography.text.xs.medium.fontWeight,
+                [`.${buttonClasses.icon}`]: {
+                  marginTop: theme2.spacing(-0.5),
+                  marginBottom: theme2.spacing(-0.5)
+                },
+                [`& svg.${svgIconClasses.root}`]: {
+                  width: theme2.spacing(4),
+                  height: theme2.spacing(4)
+                },
+                // -- ONLY ICON SIZE & SPACES
+                [`&:has(> .${svgIconClasses.root}:only-child)`]: {
+                  "--padding-x": theme2.spacing(2.25),
+                  "--padding-y": theme2.spacing(2.25)
+                },
+                // -- LOADING INDICATOR
+                [`&.${buttonClasses.loadingPositionEnd} .${buttonClasses.loadingIndicator}`]: {
+                  right: theme2.spacing(2.85)
+                },
+                [`&.${buttonClasses.loadingPositionStart} .${buttonClasses.loadingIndicator}`]: {
+                  left: theme2.spacing(3)
+                }
+              }
+            },
+            // - SMALL
+            {
+              props: { size: "small" },
+              style: {
+                fontWeight: theme2.typography.text.sm.medium.fontWeight,
+                fontSize: theme2.typography.text.sm.medium.fontSize,
+                gap: theme2.spacing(2.5),
+                "--padding-y": theme2.spacing(3.25),
+                "--padding-x": theme2.spacing(4),
+                // -- ONLY ICON SIZE & SPACES
+                [`& svg.${svgIconClasses.root}`]: {
+                  width: theme2.spacing(4),
+                  height: theme2.spacing(4),
+                  marginTop: theme2.spacing(-0.25),
+                  marginBottom: theme2.spacing(-0.25)
+                },
+                [`&:has(> .${svgIconClasses.root}:only-child)`]: {
+                  "--padding-x": theme2.spacing(3.25),
+                  "--padding-y": theme2.spacing(3.25)
+                },
+                // -- LOADING INDICATOR
+                [`&.${buttonClasses.loadingPositionEnd} .${buttonClasses.loadingIndicator}`]: {
+                  right: theme2.spacing(4.1)
+                },
+                [`&.${buttonClasses.loadingPositionStart} .${buttonClasses.loadingIndicator}`]: {
+                  left: theme2.spacing(4.1)
+                }
+              }
+            },
+            // - MEDIUM
+            {
+              props: { size: "medium" },
+              style: {
+                fontSize: theme2.typography.text.md.medium.fontSize,
+                fontWeight: theme2.typography.text.md.medium.fontWeight,
+                gap: theme2.spacing(3),
+                "--padding-x": theme2.spacing(4.5),
+                "--padding-y": theme2.spacing(4),
+                [`.${buttonClasses.icon}`]: {
+                  marginTop: theme2.spacing(-0.5),
+                  marginBottom: theme2.spacing(-0.5)
+                },
+                [`& svg.${svgIconClasses.root}`]: {
+                  width: theme2.spacing(4.5),
+                  height: theme2.spacing(4.5)
+                },
+                // -- ONLY ICON SIZE & SPACES
+                [`&:has(> .${svgIconClasses.root}:only-child)`]: {
+                  "--padding-x": theme2.spacing(3.75),
+                  "--padding-y": theme2.spacing(3.75)
+                },
+                // -- LOADING INDICATOR
+                [`&.${buttonClasses.loadingPositionEnd} .${buttonClasses.loadingIndicator}`]: {
+                  right: theme2.spacing(5)
+                },
+                [`&.${buttonClasses.loadingPositionStart} .${buttonClasses.loadingIndicator}`]: {
+                  left: theme2.spacing(5)
+                }
+              }
+            },
+            {
+              props: { size: "large" },
+              style: {
+                fontSize: theme2.typography.text.md.medium.fontSize,
+                fontWeight: theme2.typography.text.md.medium.fontWeight,
+                gap: theme2.spacing(3.5),
+                "--padding-x": theme2.spacing(5),
+                "--padding-y": theme2.spacing(4.5),
+                [`.${buttonClasses.icon}`]: {
+                  marginTop: theme2.spacing(-0.5),
+                  marginBottom: theme2.spacing(-0.5)
+                },
+                [`& svg.${svgIconClasses.root}`]: {
+                  width: theme2.spacing(4.5),
+                  height: theme2.spacing(4.5)
+                },
+                // -- ONLY ICON SIZE & SPACES
+                [`&:has(> .${svgIconClasses.root}:only-child)`]: {
+                  "--padding-x": theme2.spacing(4.25),
+                  "--padding-y": theme2.spacing(4.25)
+                },
+                // -- LOADING INDICATOR
+                [`&.${buttonClasses.loadingPositionEnd} .${buttonClasses.loadingIndicator}`]: {
+                  right: theme2.spacing(5.75)
+                },
+                [`&.${buttonClasses.loadingPositionStart} .${buttonClasses.loadingIndicator}`]: {
+                  left: theme2.spacing(5.75)
+                }
+              }
+            },
+            {
+              props: { size: "extra-large" },
+              style: {
+                fontSize: theme2.typography.text.lg.medium.fontSize,
+                fontWeight: theme2.typography.text.lg.medium.fontWeight,
+                gap: theme2.spacing(4),
+                "--padding-x": theme2.spacing(5.5),
+                "--padding-y": theme2.spacing(5.25),
+                [`.${buttonClasses.icon}`]: {
+                  marginTop: theme2.spacing(-0.5),
+                  marginBottom: theme2.spacing(-0.5)
+                },
+                [`& svg.${svgIconClasses.root}`]: {
+                  width: theme2.spacing(5),
+                  height: theme2.spacing(5)
+                },
+                // -- ONLY ICON SIZE & SPACES
+                [`&:has(> .${svgIconClasses.root}:only-child)`]: {
+                  "--padding-x": theme2.spacing(5),
+                  "--padding-y": theme2.spacing(5)
+                },
+                // -- LOADING INDICATOR
+                [`&.${buttonClasses.loadingPositionEnd} .${buttonClasses.loadingIndicator}`]: {
+                  right: theme2.spacing(5.75)
+                },
+                [`&.${buttonClasses.loadingPositionStart} .${buttonClasses.loadingIndicator}`]: {
+                  left: theme2.spacing(5.75)
+                }
+              }
+            },
+            // ** OUTLINED VARIANT SIZE CORRECTION **
+            {
+              props: { variant: "outlined" },
+              style: {
+                padding: "calc(var(--padding-y) - 1px) calc(var(--padding-x) - 1px)"
+              }
+            },
+            // ** COLORS **
+            {
+              props: {
+                color: "primary"
+              },
+              style: {
+                "--variant-containedBg": brand?.background[1].rest,
+                "--variant-containedColor": neutral?.foreground.on.brand.rest,
+                "--variant-outlinedBg": "transparent",
+                "--variant-outlinedColor": brand?.foreground[1].rest,
+                "--variant-textColor": brand?.foreground[1].rest,
+                "--variant-outlinedBorder": brand?.stroke[1].rest,
+                "@media (hover: hover)": {
+                  "&:hover": {
+                    "--variant-containedBg": brand?.background[1].hover,
+                    "--varaint-outlinedBg": "transparent",
+                    "--variant-textBg": "transparent"
+                  }
+                },
+                "&:active": {
+                  "--variant-containedBg": brand?.background[1].pressed,
+                  "--variant-outlinedBg": brand?.background[1].pressed,
+                  "--variant-textBg": brand?.background[2].pressed
+                }
+              }
+            },
+            {
+              props: {
+                color: "secondary"
+              },
+              style: {
+                "--variant-containedBg": neutral?.background[1].rest,
+                "--variant-containedColor": neutral?.foreground[1].rest,
+                "--variant-outlinedBorder": neutral?.stroke[1].rest,
+                "--variant-outlinedColor": neutral?.foreground[1].rest,
+                "--variant-textColor": neutral?.foreground[1].rest,
+                "@media (hover: hover)": {
+                  "&:hover": {
+                    "--variant-containedBg": neutral?.background[1].hover,
+                    "--variant-textBg": "transparent",
+                    "--variant-outlinedBorder": neutral?.stroke[1].hover,
+                    "--variant-outlinedColor": neutral?.foreground[1].hover,
+                    "--variant-outlinedBg": "transparent"
+                  }
+                },
+                "&:active": {
+                  "--variant-containedBg": neutral?.background[1].pressed,
+                  "--variant-outlinedBg": neutral?.background.subtle.pressed,
+                  "--variant-textBg": neutral?.background.subtle.pressed
+                }
+              }
+            },
+            {
+              props: {
+                color: "error"
+              },
+              style: {
+                "--variant-containedBg": danger?.background[1].rest,
+                "--variant-containedColor": neutral?.foreground.on.brand.rest,
+                "--variant-outlinedBg": "transparent",
+                "--variant-outlinedColor": danger?.foreground[1].rest,
+                "--variant-outlinedBorder": danger?.stroke[1].rest,
+                "--variant-textColor": danger?.foreground[1].rest,
+                "@media (hover: hover)": {
+                  "&:hover": {
+                    "--variant-containedBg": danger?.background[1].hover,
+                    "--variant-outlinedBg": "transparent",
+                    "--variant-textBg": "transparent",
+                    "--variant-textColor": danger?.foreground[2].rest
+                  }
+                },
+                "&:active": {
+                  "--variant-containedBg": danger?.background[1].pressed,
+                  "--variant-outlinedBg": danger?.background[1].pressed,
+                  "--variant-textBg": danger?.background[1].pressed
+                }
+              }
+            }
+          ]
+        };
+      }
+    }
+  };
+}
+function createInput() {
+  return {
+    styleOverrides: {
+      root: ({ theme: theme2 }) => ({
+        marginTop: 0,
+        background: theme2.vars?.palette.neutral.background[1].rest,
+        borderRadius: theme2.spacing(2),
+        paddingLeft: theme2.spacing(3),
+        paddingRight: theme2.spacing(3),
+        color: theme2.vars?.palette.neutral.foreground[4].rest,
+        "&:after, &:before": {
+          display: "none"
+        },
+        ":before": {
+          borderRadius: theme2.spacing(2),
+          top: "0px",
+          inset: "0px",
+          borderStyle: "solid",
+          borderColor: theme2.vars?.palette.neutral.stroke.focus[2],
+          borderWidth: "1px!important"
+        },
+        [`:hover:not(.${inputClasses.disabled}, .${inputClasses.error}):before`]: {
+          borderBottom: `1px solid ${theme2.vars?.palette.neutral.stroke.focus}`
+        },
+        [`:hover:not(.${inputClasses.disabled}, .${inputClasses.error}, .${inputClasses.focused})`]: {
+          background: theme2.vars?.palette.neutral.background[3].hover,
+          color: theme2.vars?.palette.neutral.foreground[1].rest
+        },
+        [`&.${inputClasses.focused}`]: {
+          background: theme2.vars?.palette.neutral.background[1].rest,
+          color: theme2.vars?.palette.neutral.foreground[1].rest,
+          "&:before": {
+            display: "block"
+          }
+        },
+        [`&.${inputClasses.error}:not(.${inputClasses.disabled}):before`]: {
+          display: "block",
+          borderTopWidth: "0px",
+          borderLeftWidth: "0px",
+          borderRightWidth: "0px",
+          borderColor: theme2.vars?.palette.danger.stroke[1].rest
+        },
+        [`&.${inputClasses.disabled}`]: {
+          background: theme2.vars?.palette.neutral.background.disabled.rest,
+          color: theme2.vars?.palette.neutral.foreground.disabled.rest
+        }
+      })
+    },
+    variants: [
+      {
+        props: { size: "small" },
+        style: ({ theme: theme2 }) => ({
+          ...theme2.typography.text.sm.regular,
+          ":before": {
+            borderWidth: "1px"
+          },
+          [`& .${inputClasses.input}`]: {
+            padding: theme2.spacing(1.5, 0),
+            height: theme2.spacing(5)
+          },
+          [`:hover:not(.${inputClasses.disabled}, .${inputClasses.error}):before`]: {
+            borderWidth: "1px",
+            borderBottom: `1px solid ${theme2.vars?.palette.neutral.stroke.focus[2]}`
+          }
+        })
+      },
+      {
+        props: { size: "medium" },
+        style: ({ theme: theme2 }) => ({
+          ...theme2.typography.text.md.regular,
+          ":before": {
+            borderWidth: "1px"
+          },
+          [`& .${inputClasses.input}`]: {
+            padding: theme2.spacing(2.5, 0),
+            height: theme2.spacing(5)
+          }
+        })
+      },
+      {
+        props: { size: "large" },
+        style: ({ theme: theme2 }) => ({
+          ...theme2.typography.text.md.regular,
+          ":before": {
+            borderWidth: "1px"
+          },
+          [`& .${inputClasses.input}`]: {
+            padding: theme2.spacing(3, 0),
+            height: theme2.spacing(6)
+          }
+        })
+      }
+    ]
+  };
+}
+var SvgXCloseIcon = (props) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    className: "MuiSvgIcon-root",
+    ...props,
+    children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        fill: "currentColor",
+        fillRule: "evenodd",
+        d: "M5.646 5.646a.5.5 0 0 1 .708 0L12 11.293l5.646-5.647a.5.5 0 0 1 .708.708L12.707 12l5.647 5.646a.5.5 0 0 1-.708.708L12 12.707l-5.646 5.647a.5.5 0 0 1-.708-.708L11.293 12 5.646 6.354a.5.5 0 0 1 0-.708",
+        clipRule: "evenodd"
+      }
+    )
+  }
+);
+var XCloseIcon_default = SvgXCloseIcon;
+function createChip() {
+  return {
+    defaultProps: {
+      deleteIcon: /* @__PURE__ */ jsx(XCloseIcon_default, { width: "12px", height: "12px", color: "currentColor" }),
+      variant: "filled",
+      color: "informative"
+    },
+    styleOverrides: {
+      deleteIcon: ({ theme: theme2 }) => ({
+        fontSize: "unset",
+        color: "currentColor",
+        margin: theme2.spacing(0, -0.5, 0, 0),
+        "& > path": {
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round"
+        }
+        // variants: [
+        //   {
+        //     props: { size: "small" },
+        //     style: {
+        //       marginLeft: "-4px",
+        //       marginRight: "6px",
+        //     },
+        //   },
+        //   {
+        //     props: { size: "medium" },
+        //     style: { marginLeft: "-6px", marginRight: "8px" },
+        //   },
+        //   {
+        //     props: { size: "large" },
+        //     style: { marginLeft: "-8px", marginRight: "10px" },
+        //   },
+        // ],
+      }),
+      label: ({ theme: theme2 }) => ({
+        padding: 0,
+        margin: 0,
+        ":empty": {
+          display: "none"
+        },
+        variants: [
+          {
+            props: { size: "small" },
+            style: {
+              ...theme2.typography.text.xs.medium
+              // padding: theme.spacing(0, 2),
+            }
+          },
+          {
+            props: { size: "medium" },
+            style: {
+              ...theme2.typography.text.sm.medium
+              //padding: theme.spacing(0, 2.5),
+            }
+          },
+          {
+            props: { size: "large" },
+            style: {
+              ...theme2.typography.text.sm.medium
+              // padding: theme.spacing(0, 3),
+            }
+          }
+        ]
+      }),
+      icon: ({ theme: theme2 }) => ({
+        margin: theme2.spacing(0, 0, 0, -0.5),
+        width: theme2.spacing(4.5),
+        height: theme2.spacing(4.5),
+        "& > path": {
+          stroke: "currentColor",
+          strokeWidth: "1",
+          strokeLinecap: "round"
+        },
+        variants: [
+          {
+            props: { size: "small" },
+            style: {
+              [`&`]: {
+                width: theme2.spacing(3.5),
+                height: theme2.spacing(3.5)
+              }
+            }
+          },
+          {
+            props: { size: "medium" },
+            style: { marginRight: "2px" },
+            width: theme2.spacing(4),
+            height: theme2.spacing(4)
+          },
+          {
+            props: { size: "large" },
+            style: {
+              marginRight: "2px",
+              width: theme2.spacing(4.5),
+              height: theme2.spacing(4.5)
+            }
+          }
+        ]
+      }),
+      root: ({ theme: theme2 }) => ({
+        borderRadius: theme2.spacing(4),
+        padding: "0px",
+        gap: theme2.spacing(1),
+        variants: [
+          {
+            props: { size: "small" },
+            style: {
+              height: theme2.spacing(5.5),
+              padding: theme2.spacing(0, 2),
+              [`&:has(.${chipClasses.label}:empty)`]: {
+                padding: theme2.spacing(0, 1),
+                [`.${chipClasses.icon}`]: {
+                  marginLeft: "0",
+                  marginRight: "0"
+                }
+              }
+            }
+          },
+          {
+            props: { size: "medium" },
+            style: {
+              height: theme2.spacing(6.5),
+              padding: theme2.spacing(0, 2.5),
+              [`&:has(.${chipClasses.label}:empty)`]: {
+                padding: theme2.spacing(0, 1),
+                [`.${chipClasses.icon}`]: {
+                  marginLeft: "0",
+                  marginRight: "0"
+                }
+              }
+            }
+          },
+          {
+            props: { size: "large" },
+            style: {
+              height: theme2.spacing(7),
+              padding: theme2.spacing(0, 3),
+              [`&:has(.${chipClasses.label}:empty)`]: {
+                padding: theme2.spacing(0, 1.25),
+                [`.${chipClasses.icon}`]: {
+                  marginLeft: "0px",
+                  marginRight: "0px"
+                }
+              }
+            }
+          }
+        ]
+      })
+    },
+    variants: [
+      {
+        props: { color: "informative", variant: "filled" },
+        style: ({ theme: { vars } }) => ({
+          backgroundColor: vars?.palette.neutral.background[5].rest,
+          color: vars?.palette.neutral.foreground[3].rest
+        })
+      },
+      {
+        props: { color: "informative", variant: "tint" },
+        style: ({ theme: { vars } }) => ({
+          backgroundColor: vars?.palette.neutral.background[3].rest,
+          color: vars?.palette.neutral.foreground[3].rest,
+          border: `1px solid ${vars?.palette.neutral.stroke[2].rest}`
+        })
+      },
+      {
+        props: { color: "informative", variant: "outline" },
+        style: ({ theme: { vars } }) => ({
+          backgroundColor: "transparent",
+          color: vars?.palette.neutral.foreground[3].rest,
+          border: `1px solid ${vars?.palette.neutral.stroke[2].rest}`
+        })
+      },
+      {
+        props: { color: "informative", variant: "ghost" },
+        style: ({ theme: { vars } }) => ({
+          backgroundColor: "transparent",
+          color: vars?.palette.neutral.foreground[3].rest
+        })
+      },
+      {
+        props: { color: "brand", variant: "filled" },
+        style: ({ theme: { vars } }) => ({
+          backgroundColor: vars?.palette.brand.background[1].rest,
+          color: vars?.palette.neutral.foreground.on.brand.rest
+        })
+      },
+      {
+        props: { color: "brand", variant: "tint" },
+        style: ({ theme: { vars } }) => ({
+          backgroundColor: vars?.palette.brand.background[2].rest,
+          color: vars?.palette.brand.foreground[2].rest,
+          border: `1px solid ${vars?.palette.brand.stroke[2].rest}`
+        })
+      },
+      {
+        props: { color: "brand", variant: "outline" },
+        style: ({ theme: { vars } }) => ({
+          backgroundColor: "transparent",
+          color: vars?.palette.brand.foreground[1].rest,
+          border: `1px solid ${vars?.palette.brand.stroke[1].rest}`
+        })
+      },
+      {
+        props: { color: "brand", variant: "ghost" },
+        style: ({ theme: { vars } }) => ({
+          backgroundColor: "transparent",
+          color: vars?.palette.brand.foreground[1].rest
+        })
+      },
+      {
+        props: { color: "danger", variant: "filled" },
+        style: ({ theme: { vars } }) => ({
+          backgroundColor: vars?.palette.shared.background.red[3],
+          color: vars?.palette.neutral.foreground.on.brand.rest
+        })
+      },
+      {
+        props: { color: "danger", variant: "tint" },
+        style: ({ theme: { vars } }) => ({
+          backgroundColor: vars?.palette.shared.background.red[1],
+          color: vars?.palette.shared.foreground.red[1],
+          border: `1px solid ${vars?.palette.shared.stroke.red[1]}`
+        })
+      },
+      {
+        props: { color: "danger", variant: "outline" },
+        style: ({ theme: { vars } }) => ({
+          backgroundColor: "transparent",
+          color: vars?.palette.shared.foreground.red[3],
+          border: `1px solid ${vars?.palette.shared.stroke.red[2]}`
+        })
+      },
+      {
+        props: { color: "danger", variant: "ghost" },
+        style: ({ theme: { vars } }) => ({
+          backgroundColor: "transparent",
+          color: vars?.palette.shared.foreground.red[3]
+        })
+      },
+      {
+        props: { color: "success", variant: "filled" },
+        style: ({ theme: { vars } }) => ({
+          backgroundColor: vars?.palette.shared.background.green[3],
+          color: vars?.palette.neutral.foreground.on.brand.rest
+        })
+      },
+      {
+        props: { color: "success", variant: "tint" },
+        style: ({ theme: { vars } }) => ({
+          backgroundColor: vars?.palette.shared.background.green[1],
+          color: vars?.palette.shared.foreground.green[1],
+          border: `1px solid ${vars?.palette.shared.stroke.green[1]}`
+        })
+      },
+      {
+        props: { color: "success", variant: "outline" },
+        style: ({ theme: { vars } }) => ({
+          backgroundColor: "transparent",
+          color: vars?.palette.shared.foreground.green[3],
+          border: `1px solid ${vars?.palette.shared.stroke.green[2]}`
+        })
+      },
+      {
+        props: { color: "success", variant: "ghost" },
+        style: ({ theme: { vars } }) => ({
+          backgroundColor: "transparent",
+          color: vars?.palette.shared.foreground.green[3]
+        })
+      },
+      {
+        props: { color: "severewarning", variant: "filled" },
+        style: ({ theme: { vars } }) => ({
+          backgroundColor: vars?.palette.shared.background.orange[3],
+          color: vars?.palette.neutral.foreground.on.brand.rest
+        })
+      },
+      {
+        props: { color: "severewarning", variant: "tint" },
+        style: ({ theme: { vars } }) => ({
+          color: vars?.palette.shared.foreground.orange[1],
+          border: `1px solid ${vars?.palette.shared.stroke.orange[1]}`,
+          backgroundColor: vars?.palette.shared.background.orange[1]
+        })
+      },
+      {
+        props: { color: "severewarning", variant: "outline" },
+        style: ({ theme: { vars } }) => ({
+          backgroundColor: "transparent",
+          color: vars?.palette.shared?.foreground.orange[3],
+          border: `1px solid ${vars?.palette.shared.stroke.orange[2]}`
+        })
+      },
+      {
+        props: { color: "severewarning", variant: "ghost" },
+        style: ({ theme: { vars } }) => ({
+          backgroundColor: "transparent",
+          color: vars?.palette.shared.foreground.orange[3]
+        })
+      },
+      {
+        props: { color: "warning", variant: "filled" },
+        style: ({ theme: { vars } }) => ({
+          backgroundColor: vars?.palette.shared.background.yellow[3],
+          color: vars?.palette.shared.foreground.yellow[1]
+        })
+      },
+      {
+        props: { color: "warning", variant: "tint" },
+        style: ({ theme: { vars } }) => ({
+          color: vars?.palette.shared.foreground.yellow[1],
+          border: `1px solid ${vars?.palette.shared.stroke.yellow[1]}`,
+          backgroundColor: vars?.palette.shared.background.yellow[1]
+        })
+      },
+      {
+        props: { color: "warning", variant: "outline" },
+        style: ({ theme: { vars } }) => ({
+          backgroundColor: "transparent",
+          color: vars?.palette.shared.foreground.yellow[3],
+          border: `1px solid ${vars?.palette.shared.stroke.yellow[2]}`
+        })
+      },
+      {
+        props: { color: "warning", variant: "ghost" },
+        style: ({ theme: { vars } }) => ({
+          backgroundColor: "transparent",
+          color: vars?.palette.shared.foreground.yellow[3]
+        })
+      },
+      {
+        props: { color: "important", variant: "filled" },
+        style: ({ theme: { vars } }) => ({
+          backgroundColor: vars?.palette.neutral.foreground[1].rest,
+          color: vars?.palette.neutral.background[1].rest
+        })
+      },
+      {
+        props: { color: "important", variant: "tint" },
+        style: ({ theme: { vars } }) => ({
+          color: vars?.palette.neutral.background[1].rest,
+          border: `1px solid ${vars?.palette.neutral.stroke.accessible.rest}`,
+          backgroundColor: vars?.palette.neutral.foreground[3].rest
+        })
+      },
+      {
+        props: { color: "important", variant: "outline" },
+        style: ({ theme: { vars } }) => ({
+          backgroundColor: "transparent",
+          color: vars?.palette.neutral.foreground[3].rest,
+          border: `1px solid ${vars?.palette.neutral.stroke.accessible.rest}`
+        })
+      },
+      {
+        props: { color: "important", variant: "ghost" },
+        style: ({ theme: { vars } }) => ({
+          backgroundColor: "transparent",
+          color: vars?.palette.neutral.foreground[3].rest
+        })
+      }
+    ]
+  };
+}
+function createCssBaseline() {
+  return {
+    styleOverrides: `
+      * {
+        scrollbar-width: thin;
+        scrollbar-color: var(--palette-neutral-foreground-3-rest) transparent;
+      }
+
+      /** CHROME, SAFARI, EDGE, OPERA, VIVALDI... */
+
+      *:-webkit-scrollbar {
+        width: 5px;
+        height: 5px;
+        position: absolute;
+        left: 0px;
+      }
+      /* Handle */
+      *:-webkit-scrollbar-thumb {
+        background: var(--palette-neutral-foreground-3-rest);
+        border-radius: 5px;
+        cursor: pointer;
+      }
+      *::-webkit-scrollbar-thumb:hover {
+        background: var(--palette-neutral-foreground-3-hover);
+      }
+
+      .${svgIconClasses.root} {
+        flex-shrink: 0;
+      }
+
+      .${svgIconClasses.root} > path {
+        stroke: currentColor;
+        stroke-width: 1;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+      }
+    `
+  };
+}
+
+// theme/components/ButtonGroup.tsx
+function createButtonGroup() {
+  return {
+    defaultProps: {
+      disableElevation: true,
+      disableRipple: true,
+      disableFocusRipple: true
+    },
+    styleOverrides: {}
+  };
+}
+function createCheckbox() {
+  return {
+    defaultProps: {
+      disableTouchRipple: true,
+      disableRipple: true,
+      disableFocusRipple: true,
+      icon: /* @__PURE__ */ jsx(
+        "svg",
+        {
+          height: "20",
+          width: "20",
+          fill: "none",
+          viewBox: "0 0 20 20",
+          xmlns: "http://www.w3.org/2000/svg",
+          children: /* @__PURE__ */ jsx(
+            "rect",
+            {
+              height: "19",
+              width: "19",
+              rx: "5.5",
+              stroke: "#616161",
+              x: "0.5",
+              y: "0.5"
+            }
+          )
+        }
+      ),
+      checkedIcon: /* @__PURE__ */ jsxs(
+        "svg",
+        {
+          height: "20",
+          width: "20",
+          fill: "none",
+          viewBox: "0 0 20 20",
+          xmlns: "http://www.w3.org/2000/svg",
+          children: [
+            /* @__PURE__ */ jsx("rect", { height: "20", width: "20", fill: "currentColor", rx: "6" }),
+            /* @__PURE__ */ jsx(
+              "path",
+              {
+                d: "M14.6667 6.5L8.25 12.9167L5.33333 10",
+                stroke: "white",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: "1.4"
+              }
+            )
+          ]
+        }
+      ),
+      indeterminateIcon: /* @__PURE__ */ jsxs(
+        "svg",
+        {
+          height: "20",
+          width: "20",
+          fill: "none",
+          viewBox: "0 0 20 20",
+          xmlns: "http://www.w3.org/2000/svg",
+          children: [
+            /* @__PURE__ */ jsx("rect", { height: "20", width: "20", fill: "currentColor", rx: "6" }),
+            /* @__PURE__ */ jsx(
+              "path",
+              {
+                d: "M5.91669 10H14.0834",
+                stroke: "white",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: "1.4"
+              }
+            )
+          ]
+        }
+      )
+    },
+    styleOverrides: {
+      root: ({ theme: theme2 }) => ({
+        [`&, &.${checkboxClasses.checked}, &.${checkboxClasses.indeterminate}`]: {
+          color: theme2.vars?.palette.brand.background.compound.rest
+        },
+        [`&:focus, &:has(input:focus)`]: {
+          outline: `2px solid ${theme2.vars?.palette.neutral.stroke.focus[2]}`,
+          outlineOffset: "1px"
+        },
+        borderRadius: "4px",
+        margin: theme2.spacing(2),
+        padding: 0,
+        [`& > svg`]: {
+          width: "100%",
+          height: "100%"
+        },
+        variants: [
+          {
+            props: { size: "small" },
+            style: {
+              width: theme2.spacing(4),
+              height: theme2.spacing(4)
+            }
+          },
+          {
+            props: { size: "medium" },
+            style: {
+              width: theme2.spacing(5),
+              height: theme2.spacing(5)
+            }
+          },
+          {
+            props: { disabled: true },
+            style: {
+              [`& > svg, &.${checkboxClasses.checked} > svg, &.${checkboxClasses.indeterminate} > svg`]: {
+                rect: {
+                  fill: theme2.vars?.palette.neutral.background.disabled.rest,
+                  stroke: theme2.vars?.palette.neutral.stroke.disabled.rest
+                },
+                path: {
+                  stroke: theme2.vars?.palette.neutral.foreground.disabled.rest
+                }
+              }
+            }
+          }
+        ]
+      })
+    }
+  };
+}
+var SvgUser01Icon = (props) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    className: "MuiSvgIcon-root",
+    ...props,
+    children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        fill: "currentColor",
+        fillRule: "evenodd",
+        d: "M12 3.5a4 4 0 1 0 0 8 4 4 0 0 0 0-8m-5 4a5 5 0 1 1 10 0 5 5 0 0 1-10 0M9.395 15h5.21c1.295 0 2.062 0 2.701.194a4.5 4.5 0 0 1 3 3c.194.64.194 1.406.194 2.7V21a.5.5 0 1 1-1 0c0-1.432-.005-2.037-.15-2.516a3.5 3.5 0 0 0-2.334-2.333C16.537 16.005 15.932 16 14.5 16h-5c-1.432 0-2.037.005-2.516.15a3.5 3.5 0 0 0-2.333 2.334C4.505 18.963 4.5 19.568 4.5 21a.5.5 0 0 1-1 0v-.105c0-1.295 0-2.062.194-2.701a4.5 4.5 0 0 1 3-3C7.334 15 8.1 15 9.394 15",
+        clipRule: "evenodd"
+      }
+    )
+  }
+);
+var User01Icon_default = SvgUser01Icon;
+function createSelect() {
+  return {
+    styleOverrides: {
+      root: ({ theme: theme2 }) => ({
+        [`.${selectClasses.icon}`]: {
+          top: "calc(50% - 10px)",
+          right: theme2.spacing(3),
+          "& > path": {
+            strokeWidth: "1px",
+            stroke: "currentColor"
+          }
+        },
+        variants: [
+          {
+            props: { size: "small" },
+            style: {
+              [`$.${selectClasses.filled}, .${selectClasses.outlined}, .${selectClasses.standard}`]: {
+                padding: theme2.spacing(1.5, 0),
+                boxSizing: "border-box",
+                height: "auto"
+              }
+            }
+          },
+          {
+            props: { size: "medium" },
+            style: {
+              [`.${selectClasses.filled}, .${selectClasses.outlined}, .${selectClasses.standard}`]: {
+                padding: theme2.spacing(1.5, 0),
+                height: "auto"
+              }
+            }
+          },
+          {
+            props: { size: "large" },
+            style: {
+              [`.${selectClasses.filled}, .${selectClasses.outlined}, .${selectClasses.standard}`]: {
+                padding: theme2.spacing(2.5, 0),
+                height: "auto"
+              }
+            }
+          }
+        ]
+      })
+    },
+    defaultProps: {
+      IconComponent: (props) => /* @__PURE__ */ jsx(ChevronDownIcon_default, { ...props, width: 20, height: 20 }),
+      MenuProps: {
+        slotProps: {
+          paper: {
+            elevation: 5
+          }
+        }
+      }
+    }
+  };
+}
+function createInputLabel() {
+  return {
+    styleOverrides: {
+      focused: ({ theme: theme2 }) => ({
+        "&": { color: theme2.vars?.palette.neutral.foreground[1].rest }
+      }),
+      root: ({ theme: theme2 }) => ({
+        position: "relative",
+        inset: "auto",
+        transform: "unset",
+        [`&, &.${inputLabelClasses.focused}`]: {
+          color: theme2.vars?.palette.neutral.foreground[1].rest
+        },
+        [`& + .${inputBaseClasses.root}.${inputClasses.root}.${selectClasses.root}, &.${inputLabelClasses.standard} + .${inputClasses.root}`]: {
+          marginTop: 0
+        },
+        variants: [
+          {
+            props: { size: "small" },
+            style: {
+              ...theme2.typography.text.xs.medium
+            }
+          },
+          {
+            props: { size: "medium" },
+            style: {
+              ...theme2.typography.text.sm.medium
+            }
+          },
+          {
+            props: { size: "large" },
+            style: {
+              ...theme2.typography.text.md.medium
+            }
+          }
+        ]
+      })
+    },
+    defaultProps: {
+      disableAnimation: true,
+      shrink: false
+    }
+  };
+}
+function createFormControl() {
+  return {
+    defaultProps: {
+      margin: "none"
+    },
+    styleOverrides: {
+      root: ({ theme: theme2 }) => ({
+        gap: theme2.spacing(2),
+        [`&.${formControlClasses.marginNormal}`]: {
+          marginTop: theme2.spacing(6),
+          marginBottom: theme2.spacing(6)
+        },
+        [`&.${formControlClasses.marginDense}`]: {
+          marginTop: theme2.spacing(4),
+          marginBottom: theme2.spacing(4)
+        }
+      })
+    }
+  };
+}
+function createFormHelperText() {
+  return {
+    defaultProps: {
+      margin: "dense"
+    },
+    styleOverrides: {
+      root: ({ theme: theme2 }) => ({
+        margin: 0,
+        [`&.${formHelperTextClasses.error}`]: {
+          color: theme2.vars?.palette.danger.foreground[2].rest
+        },
+        [`&.${formHelperTextClasses.disabled}`]: {
+          color: theme2.vars?.palette.neutral.foreground.disabled.rest
+        }
+      })
+    }
+  };
+}
+function createMenu() {
+  return {
+    styleOverrides: {
+      list: ({ theme: theme2 }) => ({
+        padding: theme2.spacing(1.5)
+      })
+    },
+    defaultProps: {
+      disableAutoFocusItem: true
+    }
+  };
+}
+function createMenuList() {
+  return {
+    styleOverrides: {},
+    defaultProps: {}
+  };
+}
+function createMenuItem() {
+  return {
+    styleOverrides: {
+      root: ({ theme: theme2 }) => ({
+        height: theme2.spacing(12),
+        borderRadius: theme2.shape.borderRadius,
+        marginBottom: theme2.spacing(0.5),
+        ...theme2.typography.text.md.medium,
+        [`&:hover, &:focus`]: {
+          backgroundColor: theme2.vars?.palette.neutral.background[1].hover
+        },
+        [`&.${menuItemClasses.selected}, &.${menuItemClasses.selected}:hover, &.${menuItemClasses.selected}.${menuItemClasses.focusVisible}`]: {
+          backgroundColor: theme2.vars?.palette.neutral.background[1].selected
+        }
+      })
+    },
+    defaultProps: {}
+  };
+}
+function createList() {
+  return {
+    styleOverrides: {
+      root: {}
+    },
+    defaultProps: {}
+  };
+}
+function createListItem() {
+  return {
+    styleOverrides: {
+      root: () => ({
+        padding: 0
+      }),
+      dense: {
+        padding: 0
+      }
+    },
+    defaultProps: {}
+  };
+}
+function createListItemButton() {
+  return {
+    styleOverrides: {
+      dense: ({ theme: theme2 }) => ({
+        minHeight: theme2.spacing(10),
+        paddingTop: 0,
+        paddingBottom: 0
+      }),
+      root: ({ theme: theme2 }) => ({
+        borderRadius: theme2.shape.borderRadius,
+        paddingTop: theme2.spacing(1),
+        paddingBottom: theme2.spacing(1),
+        minHeight: theme2.spacing(12),
+        [`&.${listItemButtonClasses.focusVisible}`]: {
+          backgroundColor: "transparent",
+          outline: `2px solid ${theme2.vars?.palette.neutral.stroke.focus[2]}`,
+          outlineOffset: "2px"
+        },
+        [`&:hover, &.${listItemButtonClasses.selected}:hover`]: {
+          backgroundColor: theme2.vars?.palette.neutral.background[4].rest
+        },
+        [`&.${listItemButtonClasses.selected}, &.${listItemButtonClasses.selected}.${listItemButtonClasses.focusVisible}`]: {
+          backgroundColor: "transparent",
+          color: theme2.vars?.palette.neutral.foreground[2].brand.selected
+        }
+      }),
+      selected: {}
+    },
+    defaultProps: {}
+  };
+}
+function createListItemIcon() {
+  return {
+    styleOverrides: {
+      root: ({ theme: theme2 }) => ({
+        minWidth: theme2.spacing(4),
+        paddingRight: theme2.spacing(3),
+        ["&:last-child"]: {
+          paddingRight: 0
+        },
+        [`& > .${svgIconClasses.root}`]: {
+          width: theme2.spacing(4),
+          height: theme2.spacing(4),
+          [`& > path`]: {
+            strokeWidth: 1.2
+          },
+          [`.${listItemButtonClasses.selected} > &`]: {
+            color: theme2.vars?.palette.neutral.foreground[2].brand.selected
+          }
+        }
+      })
+    },
+    defaultProps: {}
+  };
+}
+function createListItemText() {
+  return {
+    styleOverrides: {},
+    defaultProps: {
+      slotProps: {
+        primary: {
+          variant: "text.md.medium"
+        },
+        secondary: {
+          variant: "text.xs.regular",
+          color: "neutral.foreground.4.rest"
+        }
+      }
+    }
+  };
+}
+function createRadio() {
+  return {
+    styleOverrides: {
+      root: ({ theme: theme2 }) => ({
+        margin: theme2.spacing(2),
+        padding: 0,
+        [`&.${radioClasses.checked}`]: {
+          color: theme2.vars?.palette.brand.background.compound.rest
+        },
+        [`&.${radioClasses.checked} > svg > circle`]: {
+          fill: theme2.vars?.palette.neutral.foreground.inverted.rest
+        },
+        [`&:focus, &:has(input:focus)`]: {
+          outline: `2px solid ${theme2.vars?.palette.neutral.stroke.focus[2]}`,
+          outlineOffset: "2px"
+        },
+        [`& > svg`]: {
+          width: "100%",
+          height: "100%"
+        },
+        variants: [
+          {
+            props: { size: "small" },
+            style: {
+              width: theme2.spacing(4),
+              height: theme2.spacing(4)
+            }
+          },
+          {
+            props: { size: "medium" },
+            style: {
+              width: theme2.spacing(5),
+              height: theme2.spacing(5)
+            }
+          },
+          {
+            props: { disabled: true },
+            style: {
+              color: theme2.vars?.palette.neutral.stroke.disabled.rest,
+              [`&.${radioClasses.checked} > svg > circle`]: {
+                fill: theme2.vars?.palette.neutral.stroke.disabled.rest
+              },
+              "& > svg > rect": {
+                stroke: theme2.vars?.palette.neutral.stroke.disabled.rest,
+                fill: theme2.vars?.palette.neutral.background.disabled.rest,
+                strokeWidth: 0.8
+              }
+            }
+          }
+        ]
+      })
+    },
+    defaultProps: {
+      disableRipple: true,
+      disableFocusRipple: true,
+      disableTouchRipple: true,
+      icon: /* @__PURE__ */ jsx(
+        "svg",
+        {
+          xmlns: "http://www.w3.org/2000/svg",
+          width: "20",
+          height: "20",
+          viewBox: "0 0 20 20",
+          fill: "none",
+          children: /* @__PURE__ */ jsx(
+            "rect",
+            {
+              x: "0.5",
+              y: "0.5",
+              width: "19",
+              height: "19",
+              rx: "9.5",
+              stroke: "currentColor"
+            }
+          )
+        }
+      ),
+      checkedIcon: /* @__PURE__ */ jsxs(
+        "svg",
+        {
+          width: "20",
+          height: "20",
+          viewBox: "0 0 20 20",
+          fill: "none",
+          xmlns: "http://www.w3.org/2000/svg",
+          children: [
+            /* @__PURE__ */ jsx("rect", { width: "20", height: "20", rx: "10", fill: "currentColor" }),
+            /* @__PURE__ */ jsx("circle", { cx: "10", cy: "10", r: "4", fill: "white" })
+          ]
+        }
+      )
+    }
+  };
+}
+function createRadioGroup() {
+  return {
+    styleOverrides: {
+      root: ({ theme: theme2 }) => ({
+        [`.${radioGroupClasses}`]: {
+          gap: theme2.spacing(2),
+          background: "red"
+        }
+      })
+    }
+  };
+}
+function createFormControlLabel() {
+  return {
+    defaultProps: {},
+    styleOverrides: {
+      root: ({ theme: theme2 }) => ({
+        marginLeft: theme2.spacing(-2),
+        marginRight: theme2.spacing(4),
+        [`&:has(.${formHelperTextClasses.root}):not(.${formControlLabelClasses.labelPlacementTop}, .${formControlLabelClasses.labelPlacementBottom})`]: {
+          marginBottom: theme2.spacing(2),
+          [`.${radioClasses.root}`]: {
+            marginTop: "-11px"
+          }
+        },
+        [`&.${formControlLabelClasses.labelPlacementTop}, &.${formControlLabelClasses.labelPlacementBottom}`]: {
+          marginLeft: 0,
+          textAlign: "center"
+        },
+        [`&.${formControlLabelClasses.labelPlacementStart}`]: {
+          marginLeft: 0
+        },
+        [`.${formControlLabelClasses.label}`]: {
+          ...theme2.typography.text.sm.medium
+        },
+        [`.${formControlLabelClasses.label}.${formControlLabelClasses.disabled}`]: {
+          color: theme2.vars?.palette.neutral.foreground.disabled.rest
+        },
+        [`.${formHelperTextClasses.root}`]: {
+          ...theme2.typography.text.sm.regular,
+          [`&, &.${formHelperTextClasses.error}`]: {
+            color: theme2.vars?.palette.neutral.foreground[4].rest
+          }
+        }
+      })
+    }
+  };
+}
+function createFormLabel() {
+  return {
+    defaultProps: {},
+    styleOverrides: {
+      root: ({ theme: theme2 }) => ({
+        ...theme2.typography.text.sm.medium,
+        [`&, &.${formLabelClasses.error}, &.${formLabelClasses.focused}`]: {
+          color: theme2.vars?.palette.neutral.foreground[1].rest
+        }
+      })
+    }
+  };
+}
+function createSlider() {
+  return {
+    defaultProps: {},
+    styleOverrides: {
+      root: ({ theme: theme2 }) => ({
+        height: theme2.spacing(2),
+        color: theme2.vars?.palette.brand.background.compound.rest,
+        [`&.${sliderClasses.disabled}, &.${sliderClasses.disabled} .${sliderClasses.markLabel}`]: {
+          color: theme2.vars?.palette.neutral.foreground.disabled.rest
+        }
+      }),
+      rail: ({ theme: theme2 }) => ({
+        opacity: 1,
+        borderRadius: theme2.spacing(1),
+        backgroundColor: theme2.vars?.palette.neutral.background[4].rest
+      }),
+      thumb: ({ theme: theme2 }) => ({
+        width: theme2.spacing(6),
+        height: theme2.spacing(6),
+        backgroundColor: theme2.vars?.palette.neutral.background[1].rest,
+        border: `1.5px solid currentColor`,
+        [`&.${sliderClasses.focusVisible}`]: {
+          outline: `2px solid ${theme2.vars?.palette.neutral.stroke.focus}`,
+          outlineOffset: "2px"
+        },
+        [`&:hover, &.${sliderClasses.focusVisible}, &.${sliderClasses.active}`]: {
+          boxShadow: "none"
+        },
+        "&:after": {
+          display: "none"
+        }
+      }),
+      valueLabel: ({ theme: theme2 }) => ({
+        backgroundColor: theme2.vars?.palette.neutral.background[1].rest,
+        padding: theme2.spacing(2, 3),
+        boxShadow: theme2.shadows[3],
+        color: theme2.vars?.palette.neutral.foreground[1].rest,
+        borderRadius: "4px",
+        ...theme2.typography.text.xs.semibold,
+        "&:before": {
+          display: "none"
+        }
+      }),
+      mark: {
+        opacity: 0.3
+      },
+      markLabel: ({ theme: theme2 }) => ({
+        color: theme2.vars?.palette.neutral.foreground[2].rest,
+        ...theme2.typography.text.md.medium
+      })
+    }
+  };
+}
+function createSwitch() {
+  return {
+    defaultProps: {},
+    styleOverrides: {
+      root: ({ theme: theme2 }) => ({
+        padding: 0,
+        borderRadius: "12px",
+        [`.${switchClasses.checked} .${switchClasses.thumb}`]: {
+          boxShadow: "none"
+        },
+        [`.${switchClasses.switchBase}.${switchClasses.checked} + .${switchClasses.track}`]: {
+          opacity: 1,
+          backgroundColor: theme2.vars?.palette.brand.background.compound.rest
+        },
+        [`.${switchClasses.disabled} .${switchClasses.thumb}`]: {
+          backgroundColor: theme2.vars?.palette.neutral.foreground.disabled.rest
+        },
+        [`.${switchClasses.disabled} + .${switchClasses.track}`]: {
+          opacity: 1,
+          backgroundColor: theme2.vars?.palette.neutral.background.disabled.rest
+        },
+        [`&:has(.Mui-focusVisible), &:has(input:focus)`]: {
+          outline: `2px solid ${theme2.vars?.palette.neutral.stroke.focus[2]}`,
+          outlineOffset: "2px"
+        }
+      }),
+      sizeMedium: {
+        height: "24px",
+        width: "44px",
+        [`.${switchClasses.switchBase}`]: {
+          padding: "2px"
+        }
+      },
+      sizeSmall: {
+        width: "36px",
+        height: "20px",
+        [`.${switchClasses.switchBase}`]: {
+          padding: "2px"
+        }
+      },
+      thumb: ({ theme: theme2 }) => ({
+        width: "20px",
+        height: "20px",
+        boxShadow: theme2.shadows[2],
+        backgroundColor: theme2.vars?.palette.neutral.foreground.on.brand.rest
+      }),
+      track: ({ theme: theme2 }) => ({
+        backgroundColor: theme2.vars?.palette.neutral.background[4].rest,
+        opacity: 1
+      })
+    }
+  };
+}
+var getBadgePositionStyle = (offset, dotOffset) => {
+  return {
+    [`& + .${badgeClasses.badge}.${badgeClasses.anchorOriginBottomLeft}`]: {
+      left: offset,
+      bottom: offset,
+      [`&.${badgeClasses.dot}`]: {
+        left: dotOffset,
+        bottom: dotOffset
+      }
+    },
+    [`& + .${badgeClasses.badge}.${badgeClasses.anchorOriginBottomRight}`]: {
+      right: offset,
+      bottom: offset,
+      [`&.${badgeClasses.dot}`]: {
+        right: dotOffset,
+        bottom: dotOffset
+      }
+    },
+    [`& + .${badgeClasses.badge}.${badgeClasses.anchorOriginTopLeft}`]: {
+      left: offset,
+      top: offset,
+      [`&.${badgeClasses.dot}`]: {
+        left: dotOffset,
+        top: dotOffset
+      }
+    },
+    [`& + .${badgeClasses.badge}.${badgeClasses.anchorOriginTopRight}`]: {
+      right: offset,
+      top: offset,
+      [`&.${badgeClasses.dot}`]: {
+        right: dotOffset,
+        top: dotOffset
+      }
+    }
+  };
+};
+function createAvatar() {
+  return {
+    defaultProps: {
+      children: /* @__PURE__ */ jsx(User01Icon_default, { width: 24, height: 24 }),
+      size: "medium"
+    },
+    styleOverrides: {
+      root: ({ theme: theme2 }) => ({
+        backgroundColor: theme2.vars?.palette.neutral.background[6].rest,
+        color: theme2.vars?.palette.neutral.foreground[3].rest,
+        ...theme2.typography.text.md.medium,
+        [`& + .${badgeClasses.badge}:has(.${svgIconClasses.root})`]: {
+          padding: "0px"
+        },
+        [`& + .${badgeClasses.badge}`]: {
+          transform: "scale(1) translate(0, 0)",
+          border: `2px solid ${theme2.vars?.palette.neutral.background[1].rest}`,
+          [`&.${badgeClasses.dot}`]: {
+            border: `1.6px solid ${theme2.vars?.palette.neutral.background[1].rest}`,
+            borderRadius: "50%",
+            boxSizing: "content-box"
+          }
+        },
+        variants: [
+          {
+            props: { size: "dot" },
+            style: {
+              width: theme2.spacing(4),
+              height: theme2.spacing(4),
+              ...theme2.typography.text.xs.medium,
+              [`& > .${svgIconClasses.root}`]: {
+                width: theme2.spacing(2),
+                height: theme2.spacing(2)
+              },
+              ...getBadgePositionStyle("-6px", "-3px")
+            }
+          },
+          {
+            props: { size: "extra-small" },
+            style: {
+              width: theme2.spacing(6),
+              height: theme2.spacing(6),
+              ...theme2.typography.text.xs.medium,
+              [`& > .${svgIconClasses.root}`]: {
+                width: theme2.spacing(4),
+                height: theme2.spacing(4)
+              },
+              ...getBadgePositionStyle("-5px", "-2px")
+            }
+          },
+          {
+            props: { size: "small" },
+            style: {
+              width: theme2.spacing(8),
+              height: theme2.spacing(8),
+              ...theme2.typography.text.sm.medium,
+              [`& > .${svgIconClasses.root}`]: {
+                width: theme2.spacing(5),
+                height: theme2.spacing(5)
+              },
+              ...getBadgePositionStyle("-4px", "-1px")
+            }
+          },
+          {
+            props: { size: "medium" },
+            style: {
+              width: theme2.spacing(10),
+              height: theme2.spacing(10),
+              ...theme2.typography.text.md.medium,
+              [`& > .${svgIconClasses.root}`]: {
+                width: theme2.spacing(6),
+                height: theme2.spacing(6)
+              },
+              ...getBadgePositionStyle("-3px", "1px")
+            }
+          },
+          {
+            props: { size: "large" },
+            style: {
+              width: theme2.spacing(12),
+              height: theme2.spacing(12),
+              ...theme2.typography.text.lg.medium,
+              [`& > .${svgIconClasses.root}`]: {
+                width: theme2.spacing(7),
+                height: theme2.spacing(7)
+              },
+              ...getBadgePositionStyle("-2px", "2px")
+            }
+          },
+          {
+            props: { size: "extra-large" },
+            style: {
+              width: theme2.spacing(14),
+              height: theme2.spacing(14),
+              ...theme2.typography.text.xl.medium,
+              [`& > .${svgIconClasses.root}`]: {
+                width: theme2.spacing(8),
+                height: theme2.spacing(8)
+              },
+              ...getBadgePositionStyle("-3px", "3px")
+            }
+          }
+        ]
+      })
+    }
+  };
+}
+
+// theme/components/Badge.tsx
+function createBadge() {
+  return {
+    defaultProps: {
+      color: "default"
+    },
+    styleOverrides: {
+      badge: ({ theme: theme2 }) => ({
+        variants: [
+          {
+            props: { color: "default" },
+            style: {
+              backgroundColor: theme2.vars?.palette.neutral.foreground[3].rest,
+              color: theme2.vars?.palette.neutral.foreground.on.brand.rest
+            }
+          },
+          {
+            props: { color: "brand" },
+            style: {
+              backgroundColor: theme2.vars?.palette.brand.background[1].rest,
+              color: theme2.vars?.palette.neutral.foreground.on.brand.rest
+            }
+          },
+          {
+            props: { color: "success" },
+            style: {
+              backgroundColor: theme2.vars?.palette.shared.background.green[3],
+              color: theme2.vars?.palette.neutral.foreground.on.brand.rest
+            }
+          },
+          {
+            props: { color: "danger" },
+            style: {
+              backgroundColor: theme2.vars?.palette.shared.background.red[3],
+              color: theme2.vars?.palette.neutral.foreground.on.brand.rest
+            }
+          },
+          {
+            props: { color: "severe-warning" },
+            style: {
+              backgroundColor: theme2.vars?.palette.shared.background.orange[3],
+              color: theme2.vars?.palette.neutral.foreground.on.brand.rest
+            }
+          },
+          {
+            props: { color: "warning" },
+            style: {
+              backgroundColor: theme2.vars?.palette.shared.background.yellow[3],
+              color: theme2.vars?.palette.shared.foreground.yellow[1]
+            }
+          },
+          {
+            props: { color: "important" },
+            style: {
+              backgroundColor: theme2.vars?.palette.neutral.foreground[3].rest,
+              color: theme2.vars?.palette.neutral.foreground.on.brand.rest
+            }
+          },
+          {
+            props: { color: "white" },
+            style: {
+              backgroundColor: theme2.vars?.palette.neutral.foreground.on.brand.rest,
+              color: theme2.vars?.palette.neutral.foreground[3].rest
+            }
+          },
+          {
+            props: { size: "dot" },
+            style: {
+              width: "4px",
+              height: "4px",
+              minWidth: "4px",
+              borderRadius: "50%",
+              padding: "0px",
+              color: "rgba(0, 0, 0, 0)",
+              "& > *": {
+                display: "none"
+              }
+            }
+          },
+          {
+            props: { size: "extra-small" },
+            style: {
+              width: "6px",
+              height: "6px",
+              minWidth: "6px",
+              borderRadius: "50%",
+              padding: "0px",
+              color: "rgba(0, 0, 0, 0)",
+              "& > *": {
+                display: "none"
+              }
+            }
+          },
+          {
+            props: { size: "small" },
+            style: {
+              width: "8px",
+              height: "8px",
+              minWidth: "8px",
+              borderRadius: "50%",
+              padding: "0px",
+              color: "rgba(0, 0, 0, 0)",
+              "& > *": {
+                display: "none"
+              }
+            }
+          },
+          {
+            props: { size: "medium" },
+            style: {
+              height: "10px",
+              minWidth: "10px",
+              borderRadius: "5px",
+              padding: "0px 4px",
+              fontSize: "7px"
+            }
+          },
+          {
+            props: { size: "large" },
+            style: {
+              height: "12px",
+              minWidth: "12px",
+              borderRadius: "7px",
+              padding: "0px 4px",
+              fontSize: "7px"
+            }
+          },
+          {
+            props: { size: "extra-large" },
+            style: {
+              height: "14px",
+              minWidth: "14px",
+              borderRadius: "7px",
+              padding: "0px 4px",
+              fontSize: "8px"
+            }
+          }
+        ]
+      })
+    }
+  };
+}
+
+// theme/components/index.tsx
+var Components22 = {
+  MuiAutocomplete: createAutocomplete(),
+  MuiAvatar: createAvatar(),
+  MuiBadge: createBadge(),
+  MuiButton: createButton(),
+  MuiButtonBase: createButtonBase(),
+  MuiButtonGroup: createButtonGroup(),
+  MuiCheckbox: createCheckbox(),
+  MuiChip: createChip(),
+  MuiCssBaseline: createCssBaseline(),
+  MuiFilledInput: createFilledInput(),
+  MuiFormControl: createFormControl(),
+  MuiFormControlLabel: createFormControlLabel(),
+  MuiFormHelperText: createFormHelperText(),
+  MuiFormLabel: createFormLabel(),
+  MuiInput: createInput(),
+  MuiInputBase: createInputBase(),
+  MuiInputLabel: createInputLabel(),
+  MuiList: createList(),
+  MuiListItem: createListItem(),
+  MuiListItemButton: createListItemButton(),
+  MuiListItemIcon: createListItemIcon(),
+  MuiListItemText: createListItemText(),
+  MuiMenu: createMenu(),
+  MuiMenuItem: createMenuItem(),
+  MuiMenuList: createMenuList(),
+  MuiOutlinedInput: createOutlinedInput(),
+  MuiPaper: createPaper(),
+  MuiRadio: createRadio(),
+  MuiRadioGroup: createRadioGroup(),
+  MuiSelect: createSelect(),
+  MuiSlider: createSlider(),
+  MuiSwitch: createSwitch(),
+  MuiTextField: createTextField(),
+  MuiTypography: createTypography()
+};
+
+// theme/typography/typographyVariants.ts
+var typographyVariants = {
+  display: {
+    xl2: {
+      regular: {
+        fontSize: "72px",
+        fontWeight: "400",
+        lineHeight: "90px"
+      },
+      medium: {
+        fontSize: "72px",
+        fontWeight: "500",
+        lineHeight: "90px"
+      },
+      semibold: {
+        fontSize: "72px",
+        fontWeight: "600",
+        lineHeight: "90px"
+      },
+      bold: {
+        fontSize: "72px",
+        fontWeight: "700",
+        lineHeight: "90px"
+      }
+    },
+    xl: {
+      regular: {
+        fontSize: "60px",
+        fontWeight: "400",
+        lineHeight: "72px"
+      },
+      medium: {
+        fontSize: "60px",
+        fontWeight: "500",
+        lineHeight: "72px"
+      },
+      semibold: {
+        fontSize: "60px",
+        fontWeight: "600",
+        lineHeight: "72px"
+      },
+      bold: {
+        fontSize: "60px",
+        fontWeight: "700",
+        lineHeight: "72px"
+      }
+    },
+    lg: {
+      regular: {
+        fontSize: "48px",
+        fontWeight: "400",
+        lineHeight: "60px"
+      },
+      medium: {
+        fontSize: "48px",
+        fontWeight: "500",
+        lineHeight: "60px"
+      },
+      semibold: {
+        fontSize: "48px",
+        fontWeight: "600",
+        lineHeight: "60px"
+      },
+      bold: {
+        fontSize: "48px",
+        fontWeight: "700",
+        lineHeight: "60px"
+      }
+    },
+    md: {
+      regular: {
+        fontSize: "36px",
+        fontWeight: "400",
+        lineHeight: "38px"
+      },
+      medium: {
+        fontSize: "36px",
+        fontWeight: "500",
+        lineHeight: "38px"
+      },
+      semibold: {
+        fontSize: "36px",
+        fontWeight: "600",
+        lineHeight: "38px"
+      },
+      bold: {
+        fontSize: "36px",
+        fontWeight: "700",
+        lineHeight: "38px"
+      }
+    },
+    sm: {
+      regular: {
+        fontSize: "30px",
+        fontWeight: "400",
+        lineHeight: "38px"
+      },
+      medium: {
+        fontSize: "30px",
+        fontWeight: "500",
+        lineHeight: "38px"
+      },
+      semibold: {
+        fontSize: "30px",
+        fontWeight: "600",
+        lineHeight: "38px"
+      },
+      bold: {
+        fontSize: "30px",
+        fontWeight: "700",
+        lineHeight: "38px"
+      }
+    },
+    xs: {
+      regular: {
+        fontSize: "24px",
+        fontWeight: "400",
+        lineHeight: "32px"
+      },
+      medium: {
+        fontSize: "24px",
+        fontWeight: "500",
+        lineHeight: "32px"
+      },
+      semibold: {
+        fontSize: "24px",
+        fontWeight: "600",
+        lineHeight: "32px"
+      },
+      bold: {
+        fontSize: "24px",
+        fontWeight: "700",
+        lineHeight: "32px"
+      }
+    }
+  },
+  text: {
+    xl: {
+      regular: {
+        fontSize: "20px",
+        fontWeight: "400",
+        lineHeight: "30px"
+      },
+      medium: {
+        fontSize: "20px",
+        fontWeight: "500",
+        lineHeight: "30px"
+      },
+      semibold: {
+        fontSize: "20px",
+        fontWeight: "600",
+        lineHeight: "30px"
+      },
+      bold: {
+        fontSize: "20px",
+        fontWeight: "700",
+        lineHeight: "30px"
+      }
+    },
+    lg: {
+      regular: {
+        fontSize: "18px",
+        fontWeight: "400",
+        lineHeight: "28px"
+      },
+      medium: {
+        fontSize: "18px",
+        fontWeight: "500",
+        lineHeight: "28px"
+      },
+      semibold: {
+        fontSize: "18px",
+        fontWeight: "600",
+        lineHeight: "28px"
+      },
+      bold: {
+        fontSize: "18px",
+        fontWeight: "700",
+        lineHeight: "28px"
+      }
+    },
+    md: {
+      regular: {
+        fontSize: "16px",
+        fontWeight: "400",
+        lineHeight: "28px"
+      },
+      medium: {
+        fontSize: "16px",
+        fontWeight: "500",
+        lineHeight: "28px"
+      },
+      semibold: {
+        fontSize: "16px",
+        fontWeight: "600",
+        lineHeight: "28px"
+      },
+      bold: {
+        fontSize: "16px",
+        fontWeight: "700",
+        lineHeight: "28px"
+      }
+    },
+    sm: {
+      regular: {
+        fontSize: "14px",
+        fontWeight: "400",
+        lineHeight: "20px"
+      },
+      medium: {
+        fontSize: "14px",
+        fontWeight: "500",
+        lineHeight: "20px"
+      },
+      semibold: {
+        fontSize: "14px",
+        fontWeight: "600",
+        lineHeight: "20px"
+      },
+      bold: {
+        fontSize: "14px",
+        fontWeight: "700",
+        lineHeight: "20px"
+      }
+    },
+    xs: {
+      regular: {
+        fontSize: "12px",
+        fontWeight: "400",
+        lineHeight: "18px"
+      },
+      medium: {
+        fontSize: "12px",
+        fontWeight: "500",
+        lineHeight: "18px"
+      },
+      semibold: {
+        fontSize: "12px",
+        fontWeight: "600",
+        lineHeight: "18px"
+      },
+      bold: {
+        fontSize: "12px",
+        fontWeight: "700",
+        lineHeight: "18px"
+      }
+    }
+  }
+};
+var typographyVariants_default = typographyVariants;
+
+// theme/typography/typography.tsx
+function createTypography2() {
+  return {
+    fontFamily: "var(--font-inter)",
+    display: typographyVariants_default.display,
+    text: typographyVariants_default.text,
+    "display.xl2.regular": typographyVariants_default.display.xl2.regular,
+    "display.xl2.medium": typographyVariants_default.display.xl2.medium,
+    "display.xl2.semibold": typographyVariants_default.display.xl2.semibold,
+    "display.xl2.bold": typographyVariants_default.display.xl2.bold,
+    "display.xl.regular": typographyVariants_default.display.xl.regular,
+    "display.xl.medium": typographyVariants_default.display.xl.medium,
+    "display.xl.semibold": typographyVariants_default.display.xl.semibold,
+    "display.xl.bold": typographyVariants_default.display.xl.bold,
+    "display.lg.regular": typographyVariants_default.display.lg.regular,
+    "display.lg.medium": typographyVariants_default.display.lg.medium,
+    "display.lg.semibold": typographyVariants_default.display.lg.semibold,
+    "display.lg.bold": typographyVariants_default.display.lg.bold,
+    "display.md.regular": typographyVariants_default.display.md.regular,
+    "display.md.medium": typographyVariants_default.display.md.medium,
+    "display.md.semibold": typographyVariants_default.display.md.semibold,
+    "display.md.bold": typographyVariants_default.display.md.bold,
+    "display.sm.regular": typographyVariants_default.display.sm.regular,
+    "display.sm.medium": typographyVariants_default.display.sm.medium,
+    "display.sm.semibold": typographyVariants_default.display.sm.semibold,
+    "display.sm.bold": typographyVariants_default.display.sm.bold,
+    "display.xs.regular": typographyVariants_default.display.xs.regular,
+    "display.xs.medium": typographyVariants_default.display.xs.medium,
+    "display.xs.semibold": typographyVariants_default.display.xs.semibold,
+    "display.xs.bold": typographyVariants_default.display.xs.bold,
+    "text.xl.regular": typographyVariants_default.text.xl.regular,
+    "text.xl.medium": typographyVariants_default.text.xl.medium,
+    "text.xl.semibold": typographyVariants_default.text.xl.semibold,
+    "text.xl.bold": typographyVariants_default.text.xl.bold,
+    "text.lg.regular": typographyVariants_default.text.lg.regular,
+    "text.lg.medium": typographyVariants_default.text.lg.medium,
+    "text.lg.semibold": typographyVariants_default.text.lg.semibold,
+    "text.lg.bold": typographyVariants_default.text.lg.bold,
+    "text.md.regular": typographyVariants_default.text.md.regular,
+    "text.md.medium": typographyVariants_default.text.md.medium,
+    "text.md.semibold": typographyVariants_default.text.md.semibold,
+    "text.md.bold": typographyVariants_default.text.md.bold,
+    "text.sm.regular": typographyVariants_default.text.sm.regular,
+    "text.sm.medium": typographyVariants_default.text.sm.medium,
+    "text.sm.semibold": typographyVariants_default.text.sm.semibold,
+    "text.sm.bold": typographyVariants_default.text.sm.bold,
+    "text.xs.regular": typographyVariants_default.text.xs.regular,
+    "text.xs.medium": typographyVariants_default.text.xs.medium,
+    "text.xs.semibold": typographyVariants_default.text.xs.semibold,
+    "text.xs.bold": typographyVariants_default.text.xs.bold
+  };
+}
+
+// theme/shadows/index.tsx
+var createShadows = (rootTheme2) => [
+  "none",
+  rootTheme2.shadows[1],
+  "0 0 2px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.14)",
+  // 2
+  "0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.14)",
+  // 4
+  "0 0 2px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.14)",
+  // 8
+  "0 0 2px rgba(0, 0, 0, 0.12), 0 8px 16px rgba(0, 0, 0, 0.14)",
+  // 16
+  "0 0 8px rgba(0, 0, 0, 0.12), 0 14px 28px rgba(0, 0, 0, 0.14)",
+  // 28
+  "0 0 8px rgba(0, 0, 0, 0.12), 0 32px 64px rgba(0, 0, 0, 0.14)",
+  // 64
+  "0 0 2px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.25)",
+  // 2-brand
+  "0 0 2px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.25)",
+  // 4-brand
+  "0 0 2px rgba(0, 0, 0, 0.3), 0 4px 8px rgba(0, 0, 0, 0.25)",
+  // 8-brand
+  "0 0 2px rgba(0, 0, 0, 0.3), 0 8px 16px rgba(0, 0, 0, 0.25)",
+  // 16-brand
+  "0 0 8px rgba(0, 0, 0, 0.3), 0 14px 28px rgba(0, 0, 0, 0.25)",
+  // 28-brand
+  "0 0 8px rgba(0, 0, 0, 0.3), 0 32px 64px rgba(0, 0, 0, 0.25)",
+  // 64-brand
+  rootTheme2.shadows[13],
+  rootTheme2.shadows[14],
+  rootTheme2.shadows[15],
+  rootTheme2.shadows[16],
+  rootTheme2.shadows[17],
+  rootTheme2.shadows[18],
+  rootTheme2.shadows[19],
+  rootTheme2.shadows[20],
+  rootTheme2.shadows[21],
+  rootTheme2.shadows[22],
+  rootTheme2.shadows[23]
+];
+
+// theme/index.ts
+var rootTheme = createTheme({
+  spacing: 4,
+  colorSchemes: colorSchemes_default,
+  cssVariables: {
+    cssVarPrefix: "",
+    colorSchemeSelector: ".mode-%s"
+  }
+});
+var theme = createTheme({
+  typography: createTypography2(),
+  spacing: rootTheme.spacing,
+  cssVariables: {
+    cssVarPrefix: "",
+    colorSchemeSelector: ".mode-%s"
+  },
+  shadows: createShadows(rootTheme),
+  shape: {
+    borderRadius: 8
+  },
+  components: Components22,
+  colorSchemes: colorSchemes_default
+});
+var theme_default = theme;
+
+export { theme_default as default, rootTheme };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map