@nattui/react-components 0.0.29 → 0.0.31

package/dist/button.module-OLRLDRY6.module.css

@@ -0,0 +1,257 @@
+/* ===================================================== */
+/* Base */
+/* ===================================================== */
+.button {
+  display: flex;
+  flex-shrink: 0;
+  column-gap: 8px;
+  align-items: safe center;
+  justify-content: safe center;
+  height: var(--size);
+  overflow: hidden;
+  font-family: var(--font-sans, sans-serif);
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1.5;
+  cursor: pointer;
+  user-select: none;
+  outline-width: 2px;
+  outline-style: hidden;
+  outline-color: var(--color-primary-9);
+  outline-offset: 2px;
+  transition-duration: 150ms;
+  transition-property: background-color, box-shadow, opacity, translate;
+}
+
+/* When pressed, move the button down */
+.button:active:enabled,
+.button[aria-pressed="true"]:enabled {
+  translate: 0 1px;
+}
+
+/* When disabled, disable cursor and reduce opacity */
+.button:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+/* When keyboard focused, show outline */
+.button:focus-visible {
+  outline-style: solid;
+}
+
+/* ===================================================== */
+/* Icon only */
+/* ===================================================== */
+.button__icon_only {
+  width: var(--size) !important;
+  padding: 0 !important;
+}
+
+/* ===================================================== */
+/* Rounded */
+/* ===================================================== */
+.button__rounded_base {
+  border-radius: 8px;
+}
+
+@supports (corner-shape: squircle) {
+  .button__rounded_base {
+    border-radius: 9999px;
+    corner-shape: squircle;
+  }
+}
+
+.button__rounded_full {
+  border-radius: 9999px;
+}
+
+/* ===================================================== */
+/* Size */
+/* ===================================================== */
+.button__size_32 {
+  --size: 32px;
+  padding: 0 10px;
+}
+
+.button__size_36 {
+  --size: 36px;
+  padding: 0 12px;
+}
+
+.button__size_40 {
+  --size: 40px;
+  padding: 0 14px;
+}
+
+.button__size_44 {
+  --size: 44px;
+  padding: 0 16px;
+}
+
+.button__size_48 {
+  --size: 48px;
+  padding: 0 18px;
+}
+
+/* ===================================================== */
+/* Variant */
+/* ===================================================== */
+/* Accent */
+.button__variant_accent {
+  color: var(--color-white);
+  background-color: var(--color-primary-9);
+  background-image: linear-gradient(
+    to bottom,
+    color-mix(in oklab, transparent 100%, #ffffff 2.5%) 50%,
+    color-mix(in oklab, transparent 100%, #ffffff 0%) 50%
+  );
+  box-shadow:
+    0 0 0 1px var(--color-primary-9) inset,
+    0 1px 0 1px rgba(255, 255, 255, 0.25) inset,
+    0 -1px 0 1px rgba(0, 0, 0, 0.1) inset;
+}
+
+.button__variant_accent:active:enabled,
+.button__variant_accent[aria-pressed="true"]:enabled {
+  box-shadow:
+    0 0 0 1px var(--color-primary-9) inset,
+    0 -1px 0 1px rgba(255, 255, 255, 0.25) inset,
+    0 1px 0 1px rgba(0, 0, 0, 0.1) inset;
+}
+
+.button__variant_accent:active:enabled,
+.button__variant_accent:hover:enabled,
+.button__variant_accent[aria-pressed="true"]:enabled {
+  background-color: color-mix(in oklab, var(--color-primary-9) 100%, #ffffff 10%);
+}
+
+:global(.dark) .button__variant_accent {
+  background-image: linear-gradient(
+    to bottom,
+    color-mix(in oklab, transparent 100%, #000000 0%) 50%,
+    color-mix(in oklab, transparent 100%, #000000 2.5%) 50%
+  );
+}
+
+/* Ghost */
+.button__variant_ghost {
+  color: var(--color-black);
+  background-color: transparent;
+}
+
+.button__variant_ghost:active:enabled,
+.button__variant_ghost:hover:enabled,
+.button__variant_ghost[aria-pressed="true"]:enabled {
+  background-color: var(--color-gray-4);
+}
+
+:global(.dark) .button__variant_ghost {
+  color: var(--color-white);
+}
+
+/* Primary */
+.button__variant_primary {
+  color: var(--color-white);
+  background-color: var(--color-gray-dark-2);
+  background-image: linear-gradient(
+    to bottom,
+    color-mix(in oklab, transparent 100%, #ffffff 2.5%) 50%,
+    color-mix(in oklab, transparent 100%, #ffffff 0%) 50%
+  );
+  box-shadow:
+    0 0 0 1px var(--color-gray-dark-2) inset,
+    0 1px 0 1px rgba(255, 255, 255, 0.25) inset,
+    0 -1px 0 1px rgba(0, 0, 0, 0.1) inset;
+}
+
+.button__variant_primary:active:enabled,
+.button__variant_primary[aria-pressed="true"]:enabled {
+  box-shadow:
+    0 0 0 1px var(--color-gray-dark-2) inset,
+    0 -1px 0 1px rgba(255, 255, 255, 0.25) inset,
+    0 1px 0 1px rgba(0, 0, 0, 0.1) inset;
+}
+
+.button__variant_primary:active:enabled,
+.button__variant_primary:hover:enabled,
+.button__variant_primary[aria-pressed="true"]:enabled {
+  background-color: color-mix(in oklab, var(--color-gray-dark-2) 100%, #ffffff 10%);
+}
+
+:global(.dark) .button__variant_primary {
+  color: var(--color-black);
+  background-color: var(--color-gray-light-1);
+  background-image: linear-gradient(
+    to bottom,
+    color-mix(in oklab, transparent 100%, #000000 0%) 50%,
+    color-mix(in oklab, transparent 100%, #000000 2.5%) 50%
+  );
+  box-shadow:
+    0 0 0 1px var(--color-gray-light-1) inset,
+    0 1px 0 1px rgba(255, 255, 255, 0.25) inset,
+    0 -1px 0 1px rgba(0, 0, 0, 0.1) inset;
+}
+
+:global(.dark) .button__variant_primary:active:enabled,
+:global(.dark) .button__variant_primary[aria-pressed="true"]:enabled {
+  box-shadow:
+    0 0 0 1px var(--color-gray-light-2) inset,
+    0 -1px 0 1px rgba(255, 255, 255, 0.25) inset,
+    0 1px 0 1px rgba(0, 0, 0, 0.1) inset;
+}
+
+:global(.dark) .button__variant_primary:active:enabled,
+:global(.dark) .button__variant_primary:hover:enabled,
+:global(.dark) .button__variant_primary[aria-pressed="true"]:enabled {
+  background-color: color-mix(in oklab, var(--color-gray-light-2) 100%, #000000 10%);
+}
+
+/* Secondary */
+.button__variant_secondary {
+  color: var(--color-black);
+  background-color: var(--color-gray-1);
+  background-image: linear-gradient(
+    to bottom,
+    color-mix(in oklab, transparent 100%, #000000 0%) 50%,
+    color-mix(in oklab, transparent 100%, #000000 2.5%) 50%
+  );
+  box-shadow:
+    0 -1px 0 0px rgba(0, 0, 0, 7.5%) inset, /* Bottom */
+    0 0 0 1px var(--color-gray-4) inset; /* Border */
+}
+
+.button__variant_secondary:active:enabled,
+.button__variant_secondary[aria-pressed="true"]:enabled {
+  box-shadow: 0 0 0 1px var(--color-gray-6) inset;
+}
+
+.button__variant_secondary:active:enabled,
+.button__variant_secondary:hover:enabled,
+.button__variant_secondary[aria-pressed="true"]:enabled {
+  background-color: var(--color-gray-3);
+}
+
+:global(.dark) .button__variant_secondary {
+  color: var(--color-white);
+  background-color: var(--color-gray-2);
+  background-image: linear-gradient(
+    to bottom,
+    color-mix(in oklab, transparent 100%, #ffffff 2.5%) 50%,
+    color-mix(in oklab, transparent 100%, #ffffff 0%) 50%
+  );
+  box-shadow:
+    0 1px 0 0px rgba(255, 255, 255, 7.5%) inset, /* Top */
+    0 0 0 1px var(--color-gray-4) inset; /* Border */
+}
+
+/* ===================================================== */
+/* Width */
+/* ===================================================== */
+.button__width_base {
+  width: max-content; /* Fit the button content */
+}
+
+.button__width_full {
+  width: 100%;
+}

package/dist/index.d.ts

@@ -58,7 +58,7 @@ interface InputProps extends Omit<ComponentProps<"input">, "aria-pressed" | "dis
     isReadOnly?: boolean;
     isRequired?: boolean;
     isValid?: boolean;
-    size?: 32 | 36 | 40 | 44;
+    size?: 32 | 36 | 40 | 44 | 48;
 }
 declare function Input(props: InputProps): JSX.Element;
 declare const INPUT_CLASS_NAME: {
@@ -69,6 +69,7 @@ declare const INPUT_CLASS_NAME: {
         readonly 36: string;
         readonly 40: string;
         readonly 44: string;
+        readonly 48: string;
     };
 };
 

package/dist/index.js

@@ -1,57 +1,23 @@
 // src/button.tsx
-import styles3 from "./button.module-BGP72ND4.module.css";
-
-// src/button-background.tsx
-import styles from "./button-background.module-IXCWW4XS.module.css";
-import { Fragment, jsx } from "react/jsx-runtime";
-function ButtonBackground(props) {
-  const { isRounded = false, variant = "primary" } = props;
-  const combinedBackgroundStyles = `
-    ${BUTTON_BACKGROUND_CLASS_NAME.BASE}
-    ${isRounded ? BUTTON_BACKGROUND_CLASS_NAME.ROUNDED.FULL : BUTTON_BACKGROUND_CLASS_NAME.ROUNDED.BASE}
-    ${variant === "accent" ? BUTTON_BACKGROUND_CLASS_NAME.VARIANT.ACCENT : ""}
-    ${variant === "primary" ? BUTTON_BACKGROUND_CLASS_NAME.VARIANT.PRIMARY : ""}
-    ${variant === "secondary" ? BUTTON_BACKGROUND_CLASS_NAME.VARIANT.SECONDARY : ""}
-  `.replaceAll(/\s+/g, " ").trim();
-  if (!(variant === "accent" || variant === "primary" || variant === "secondary")) return /* @__PURE__ */ jsx(Fragment, {});
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: combinedBackgroundStyles,
-      "data-element": "button-background"
-    }
-  );
-}
-var BUTTON_BACKGROUND_CLASS_NAME = {
-  BASE: styles.button_background,
-  ROUNDED: {
-    BASE: styles.button_background__rounded_base,
-    FULL: styles.button_background__rounded_full
-  },
-  VARIANT: {
-    ACCENT: styles.button_background__variant_accent,
-    PRIMARY: styles.button_background__variant_primary,
-    SECONDARY: styles.button_background__variant_secondary
-  }
-};
+import styles2 from "./button.module-OLRLDRY6.module.css";
 
 // src/button-spinner.tsx
-import styles2 from "./button-spinner.module-T3OGVJS4.module.css";
-import { jsx as jsx2 } from "react/jsx-runtime";
+import styles from "./button-spinner.module-T3OGVJS4.module.css";
+import { jsx } from "react/jsx-runtime";
 function ButtonSpinner(props) {
   const { size = 16 } = props;
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx(
     "div",
     {
-      className: styles2.button_spinner,
+      className: styles.button_spinner,
       style: { "--size": `${size}px` },
-      children: Array.from({ length: 12 }).map((_, index) => /* @__PURE__ */ jsx2("div", {}, index))
+      children: Array.from({ length: 12 }).map((_, index) => /* @__PURE__ */ jsx("div", {}, index))
     }
   );
 }
 
 // src/button.tsx
-import { Fragment as Fragment2, jsx as jsx3, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
 function Button(props) {
   const {
     children = "",
@@ -87,50 +53,43 @@ function Button(props) {
       type,
       ...rest,
       children: [
-        /* @__PURE__ */ jsx3(
-          ButtonBackground,
-          {
-            isRounded,
-            variant
-          }
-        ),
-        isLoading && /* @__PURE__ */ jsx3(ButtonSpinner, {}),
+        isLoading && /* @__PURE__ */ jsx2(ButtonSpinner, {}),
         !isLoading && iconStart,
-        iconOnly ? isLoading ? /* @__PURE__ */ jsx3(Fragment2, {}) : children : /* @__PURE__ */ jsx3("span", { children }),
+        iconOnly ? isLoading ? /* @__PURE__ */ jsx2(Fragment, {}) : children : /* @__PURE__ */ jsx2("span", { children }),
         !isLoading && iconEnd
       ]
     }
   );
 }
 var BUTTON_CLASS_NAME = {
-  BASE: styles3.button,
-  ICON_ONLY: styles3.button__icon_only,
+  BASE: styles2.button,
+  ICON_ONLY: styles2.button__icon_only,
   ROUNDED: {
-    BASE: styles3.button__rounded_base,
-    FULL: styles3.button__rounded_full
+    BASE: styles2.button__rounded_base,
+    FULL: styles2.button__rounded_full
   },
   SIZE: {
-    32: styles3.button__size_32,
-    36: styles3.button__size_36,
-    40: styles3.button__size_40,
-    44: styles3.button__size_44,
-    48: styles3.button__size_48
+    32: styles2.button__size_32,
+    36: styles2.button__size_36,
+    40: styles2.button__size_40,
+    44: styles2.button__size_44,
+    48: styles2.button__size_48
   },
   VARIANT: {
-    ACCENT: styles3.button__variant_accent,
-    GHOST: styles3.button__variant_ghost,
-    PRIMARY: styles3.button__variant_primary,
-    SECONDARY: styles3.button__variant_secondary
+    ACCENT: styles2.button__variant_accent,
+    GHOST: styles2.button__variant_ghost,
+    PRIMARY: styles2.button__variant_primary,
+    SECONDARY: styles2.button__variant_secondary
   },
   WIDTH: {
-    BASE: styles3.button__width_base,
-    FULL: styles3.button__width_full
+    BASE: styles2.button__width_base,
+    FULL: styles2.button__width_full
   }
 };
 
 // src/input.tsx
-import styles4 from "./input.module-IR2FFKFD.module.css";
-import { jsx as jsx4 } from "react/jsx-runtime";
+import styles3 from "./input.module-RYUICXYE.module.css";
+import { jsx as jsx3 } from "react/jsx-runtime";
 function Input(props) {
   const {
     className: customClassName = "",
@@ -151,7 +110,7 @@ function Input(props) {
     ${isPassword ? INPUT_CLASS_NAME.PASSWORD : ""}
     ${customClassName}
   `.replaceAll(/\s+/g, " ").trim();
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx3(
     "input",
     {
       "aria-pressed": isActive,
@@ -167,26 +126,27 @@ function Input(props) {
   );
 }
 var INPUT_CLASS_NAME = {
-  BASE: styles4.input,
-  PASSWORD: styles4.input__password,
+  BASE: styles3.input,
+  PASSWORD: styles3.input__password,
   SIZE: {
-    32: styles4.input__size_32,
-    36: styles4.input__size_36,
-    40: styles4.input__size_40,
-    44: styles4.input__size_44
+    32: styles3.input__size_32,
+    36: styles3.input__size_36,
+    40: styles3.input__size_40,
+    44: styles3.input__size_44,
+    48: styles3.input__size_48
   }
 };
 
 // src/label.tsx
-import styles5 from "./label.module-HUBUIUFV.module.css";
-import { jsx as jsx5 } from "react/jsx-runtime";
+import styles4 from "./label.module-HUBUIUFV.module.css";
+import { jsx as jsx4 } from "react/jsx-runtime";
 function Label(props) {
   const { className: customClassName = "", ...rest } = props;
   const combinedClassName = `
     ${LABEL_CLASS_NAME.BASE}
     ${customClassName}
   `.replaceAll(/\s+/g, " ").trim();
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx4(
     "label",
     {
       className: combinedClassName,
@@ -195,28 +155,28 @@ function Label(props) {
   );
 }
 var LABEL_CLASS_NAME = {
-  BASE: styles5.label
+  BASE: styles4.label
 };
 
 // src/spacer.tsx
-import styles6 from "./spacer.module-ZYYYWYEB.module.css";
-import { jsx as jsx6 } from "react/jsx-runtime";
+import styles5 from "./spacer.module-ZYYYWYEB.module.css";
+import { jsx as jsx5 } from "react/jsx-runtime";
 function Spacer(props) {
   const { className: customClassName = "", ...rest } = props;
   const combinedClassName = `
     ${SPACER_CLASS_NAME.BASE}
     ${customClassName}
   `.replaceAll(/\s+/g, " ").trim();
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx5(
     "div",
     {
-      className: `${styles6.spacer} ${combinedClassName}`.trim(),
+      className: `${styles5.spacer} ${combinedClassName}`.trim(),
       ...rest
     }
   );
 }
 var SPACER_CLASS_NAME = {
-  BASE: styles6.spacer
+  BASE: styles5.spacer
 };
 export {
   BUTTON_CLASS_NAME,

package/dist/{input.module-IR2FFKFD.module.css → input.module-RYUICXYE.module.css}

@@ -2,9 +2,9 @@
 /* Base */
 /* ===================================================== */
 .input {
-  flex-shrink: 0;
   width: 100%;
-  height: var(--size);
+  min-height: var(--size);
+  max-height: var(--size);
   padding: 0 12px;
   font-family: var(--font-sans, sans-serif);
   font-size: 14px;
@@ -19,17 +19,12 @@
   outline-color: transparent;
   outline-offset: -2px;
   background-color: var(--color-gray-1, #fcfcfc);
-  border-color: var(--color-gray-5, #e0e0e0);
-  border-style: solid;
-  border-width: 1px;
-  border-radius: 8px;
-  box-shadow: 0 1px rgba(0, 0, 0, 0.05);
+  border-style: none;
+  box-shadow:
+    0 -1px 0 0px rgba(0, 0, 0, 7.5%) inset, /* Bottom */
+    0 0 0 1px var(--color-gray-4) inset; /* Border */
   transition-duration: 150ms;
-  transition-property: background-color, border-color, box-shadow, opacity;
-}
-
-:global(.dark) .input {
-  background-color: var(--color-gray-2, #101010);
+  transition-property: box-shadow, opacity;
 }
 
 @supports (corner-shape: squircle) {
@@ -40,7 +35,7 @@
 }
 
 .input::placeholder {
-  color: var(--color-gray, #8d8d8d);
+  color: var(--color-gray-9, #8d8d8d);
   user-select: none;
 }
 
@@ -53,8 +48,7 @@
 .input:enabled:focus,
 .input:enabled:hover,
 .input:enabled[aria-pressed="true"] {
-  border-color: var(--color-gray-8, #bbbbbb);
-  box-shadow: 0 1px transparent;
+  box-shadow: 0 0 0 1px var(--color-gray-6) inset;
 }
 
 .input[data-is-valid="true"] {
@@ -70,6 +64,13 @@
   outline-color: var(--color-primary-9, #e93d82);
 }
 
+:global(.dark) .input {
+  background-color: var(--color-gray-2, #101010);
+  box-shadow:
+    0 1px 0 0px rgba(255, 255, 255, 7.5%) inset, /* Top */
+    0 0 0 1px var(--color-gray-4) inset; /* Border */
+}
+
 /* ===================================================== */
 /* Password */
 /* ===================================================== */
@@ -95,3 +96,7 @@
 .input__size_44 {
   --size: 44px;
 }
+
+.input__size_48 {
+  --size: 48px;
+}

package/package.json

@@ -46,5 +46,5 @@
   },
   "type": "module",
   "types": "./dist/index.d.ts",
-  "version": "0.0.29"
+  "version": "0.0.31"
 }

package/dist/button-background.module-IXCWW4XS.module.css

@@ -1,47 +0,0 @@
-/* Base */
-.button_background {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 50%;
-  left: 0;
-  z-index: -1;
-  opacity: 0.2;
-  filter: none !important;
-  transition-duration: inherit;
-  transition-property: opacity;
-}
-
-/* Rounded */
-.button_background__rounded_base {
-  border-radius: 7px;
-}
-
-@supports (corner-shape: squircle) {
-  .button_background__rounded_base {
-    border-radius: 9999px;
-    corner-shape: squircle;
-  }
-}
-
-.button_background__rounded_full {
-  border-radius: 9999px;
-}
-
-/* Variant */
-.button_background__variant_accent,
-.button_background__variant_primary {
-  background: linear-gradient(
-    to bottom,
-    var(--color-white-a6, rgba(0, 0, 0, 0.4)),
-    var(--color-white-a5, rgba(0, 0, 0, 0.3))
-  );
-}
-
-.button_background__variant_secondary {
-  background: linear-gradient(
-    to bottom,
-    var(--color-black-a2, rgba(0, 0, 0, 0.4)),
-    var(--color-black-a3, rgba(0, 0, 0, 0.3))
-  );
-}

package/dist/button.module-BGP72ND4.module.css

@@ -1,275 +0,0 @@
-/* ===================================================== */
-/* Base */
-/* ===================================================== */
-.button {
-  --color-button-gray-1: var(--color-gray-1);
-  --color-button-gray-2: var(--color-gray-2);
-  --color-button-gray-3: var(--color-gray-3);
-  --color-button-gray-4: var(--color-gray-4);
-  --color-button-gray-5: var(--color-gray-5);
-  --color-button-gray-6: var(--color-gray-6);
-  --color-button-gray-7: var(--color-gray-7);
-  --color-button-gray-8: var(--color-gray-8);
-  --color-button-gray-9: var(--color-gray-9);
-  --color-button-gray-10: var(--color-gray-10);
-  --color-button-gray-11: var(--color-gray-11);
-  --color-button-gray-12: var(--color-gray-12);
-
-  --color-button-primary-1: var(--color-primary-light-1);
-  --color-button-primary-2: var(--color-primary-light-2);
-  --color-button-primary-3: var(--color-primary-light-3);
-  --color-button-primary-4: var(--color-primary-light-4);
-  --color-button-primary-5: var(--color-primary-light-5);
-  --color-button-primary-6: var(--color-primary-light-6);
-  --color-button-primary-7: var(--color-primary-light-7);
-  --color-button-primary-8: var(--color-primary-light-8);
-  --color-button-primary-9: var(--color-primary-light-9);
-  --color-button-primary-10: var(--color-primary-light-10);
-  --color-button-primary-11: var(--color-primary-light-11);
-  --color-button-primary-12: var(--color-primary-light-12);
-
-  position: relative;
-  display: flex;
-  flex-shrink: 0;
-  column-gap: 8px;
-  align-items: safe center;
-  justify-content: safe center;
-  height: var(--size);
-  padding: var(--padding);
-  overflow: hidden;
-  font-family: var(--font-sans, sans-serif);
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 1.5;
-  cursor: pointer;
-  user-select: none;
-  outline-width: 0;
-  outline-style: solid;
-  outline-color: var(--color-button-primary-9);
-  outline-offset: 2px;
-  border-color: transparent;
-  border-style: solid;
-  border-width: 1px;
-  transition-duration: 150ms;
-  transition-property:
-    background-color, border-color, box-shadow, color, filter, opacity, translate;
-}
-
-.button:disabled {
-  cursor: not-allowed;
-  opacity: 0.5;
-}
-
-.button:focus-visible {
-  outline-width: 2px;
-}
-
-.button:enabled[aria-pressed="true"],
-.button:enabled:active {
-  translate: 0 1px;
-}
-
-/* Disable child shadow */
-.button:enabled[aria-pressed="true"] > *,
-.button:enabled:active > *,
-.button:enabled:hover > * {
-  filter: none !important;
-}
-
-/* Hover */
-.button:enabled[aria-pressed="true"],
-.button:enabled:active,
-.button:enabled:hover {
-  opacity: 0.85;
-}
-
-/* Button background */
-.button:enabled[aria-pressed="true"] > [data-element="button-background"],
-.button:enabled:active > [data-element="button-background"],
-.button:enabled:hover > [data-element="button-background"] {
-  opacity: 0;
-}
-
-/* ===================================================== */
-/* Icon only */
-/* ===================================================== */
-.button__icon_only {
-  width: var(--size) !important;
-  padding: 0 !important;
-}
-
-/* ===================================================== */
-/* Rounded */
-/* ===================================================== */
-.button__rounded_base {
-  border-radius: 8px;
-}
-
-@supports (corner-shape: squircle) {
-  .button__rounded_base {
-    border-radius: 9999px;
-    corner-shape: squircle;
-  }
-}
-
-.button__rounded_full {
-  border-radius: 9999px;
-}
-
-/* ===================================================== */
-/* Size */
-/* ===================================================== */
-.button__size_32 {
-  --size: 32px;
-  --padding: 0 10px;
-}
-
-.button__size_36 {
-  --size: 36px;
-  --padding: 0 12px;
-}
-
-.button__size_40 {
-  --size: 40px;
-  --padding: 0 14px;
-}
-
-.button__size_44 {
-  --size: 44px;
-  --padding: 0 16px;
-}
-
-.button__size_48 {
-  --size: 48px;
-  --padding: 0 18px;
-}
-
-/* ===================================================== */
-/* Variant */
-/* ===================================================== */
-/* Accent */
-.button__variant_accent {
-  color: var(--color-white, #ffffff);
-  background-image: linear-gradient(
-    to bottom,
-    var(--color-button-primary-9),
-    var(--color-button-primary-10)
-  );
-  border-color: var(--color-button-primary-9);
-  box-shadow:
-    inset 0 1px 0 0 rgba(255, 255, 255, 0.25),
-    inset 0 -1px 0 0 rgba(0, 0, 0, 0.1);
-}
-
-.button__variant_accent:enabled[aria-pressed="true"],
-.button__variant_accent:enabled:active {
-  box-shadow:
-    inset 0 -1px 0 0 rgba(255, 255, 255, 0.25),
-    inset 0 1px 0 0 var(--color-button-primary-11) !important;
-}
-
-/* Ghost */
-.button__variant_ghost {
-  color: var(--color-button-gray-11);
-  background-color: transparent;
-}
-
-.button__variant_ghost:enabled[aria-pressed="true"],
-.button__variant_ghost:enabled:active {
-  color: var(--color-button-gray-12);
-  background-color: var(--color-button-gray-5) !important;
-}
-
-.button__variant_ghost:enabled:hover {
-  color: var(--color-button-gray-12);
-  background-color: color-mix(in oklab, var(--color-button-gray-5) 75%, transparent);
-}
-
-/* Primary */
-.button__variant_primary {
-  color: var(--color-button-gray-1);
-  background-image: linear-gradient(
-    to bottom,
-    color-mix(in oklab, var(--color-button-gray-12) 90%, transparent),
-    var(--color-button-gray-12)
-  );
-  border-color: var(--color-button-gray-12);
-  box-shadow:
-    inset 0 1px 0 0 rgba(255, 255, 255, 0.25),
-    inset 0 -1px 0 0 rgba(0, 0, 0, 0.1);
-}
-
-.button__variant_primary:enabled[aria-pressed="true"],
-.button__variant_primary:enabled:active {
-  box-shadow:
-    inset 0 -1px 0 0 rgba(255, 255, 255, 0.25),
-    inset 0 1px 0 0 var(--color-button-gray-12) !important;
-}
-
-/* Secondary */
-.button__variant_secondary {
-  color: var(--color-button-gray-11);
-  background-color: var(--color-button-gray-2);
-  border-color: var(--color-button-gray-6);
-  box-shadow:
-    inset 0 1px 0 0 rgba(255, 255, 255, 1),
-    inset 0 -1px 0 0 rgba(0, 0, 0, 0.1);
-}
-
-.button__variant_secondary:enabled[aria-pressed="true"],
-.button__variant_secondary:enabled:active,
-.button__variant_secondary:enabled:hover {
-  color: var(--color-button-gray-12);
-  border-color: var(--color-button-gray-8);
-}
-
-.button__variant_secondary:enabled[aria-pressed="true"],
-.button__variant_secondary:enabled:active {
-  box-shadow:
-    inset 0 -1px 0 0 rgba(255, 255, 255, 1),
-    inset 0 1px 0 0 rgba(0, 0, 0, 0.1) !important;
-}
-
-/* Group */
-.button__variant_accent,
-.button__variant_primary,
-.button__variant_secondary {
-  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.05));
-}
-
-.button__variant_accent > * {
-  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.1));
-}
-
-.button__variant_primary > * {
-  filter: drop-shadow(0 1px 0 rgb(255 255 255 / 0.1));
-}
-
-.button__variant_accent:enabled:active,
-.button__variant_accent:enabled:hover,
-.button__variant_accent:enabled[aria-pressed="true"],
-.button__variant_primary:enabled:active,
-.button__variant_primary:enabled:hover,
-.button__variant_primary:enabled[aria-pressed="true"],
-.button__variant_secondary:enabled:active,
-.button__variant_secondary:enabled:hover,
-.button__variant_secondary:enabled[aria-pressed="true"] {
-  box-shadow: inset 0 0 0 0 transparent;
-  filter: drop-shadow(0 1px 0 transparent);
-}
-
-.button__variant_ghost:enabled:hover,
-.button__variant_secondary:enabled:hover {
-  color: var(--color-button-gray-12);
-}
-
-/* ===================================================== */
-/* Width */
-/* ===================================================== */
-.button__width_base {
-  width: max-content;
-}
-
-.button__width_full {
-  width: 100%;
-}