welcome-ui 8.1.0 → 8.1.1

package/dist/theme.mjs

@@ -1,7 +1,7 @@
 "use client";
 import { css as S, rpxTransformers as M, defaultTheme as u } from "@xstyled/styled-components";
 import { g as N } from "./_commonjsHelpers-CXJ7dpIk.mjs";
-import { h as m } from "./hex-to-rgba-DU_XzKIK.mjs";
+import { h as m } from "./hex-to-rgba-BIDK-3ab.mjs";
 var f, D;
 function $() {
   if (D) return f;
@@ -148,20 +148,20 @@ var Z = /* @__PURE__ */ X();
 const I = /* @__PURE__ */ N(Z), Q = (o) => {
   const { borderWidths: r, colors: e, fontSizes: i, radii: n, space: l, texts: d, transitions: a } = o;
   return {
-    content: {
-      fontSize: i.sm
-    },
-    icon: {
-      color: e["neutral-90"]
-    },
     padding: l.lg,
-    title: d.h5,
     wrapper: {
       backgroundColor: e["neutral-10"],
+      transition: a.medium,
       border: `${r.sm} solid ${e["neutral-30"]}`,
-      borderRadius: n.md,
-      transition: a.medium
-    }
+      borderRadius: n.md
+    },
+    icon: {
+      color: e["neutral-90"]
+    },
+    content: {
+      fontSize: i.sm
+    },
+    title: d.h5
   };
 }, V = (o) => {
   const { borderWidths: r, colors: e, fontSizes: i, fontWeights: n, radii: l, space: d } = o, a = (s) => ({
@@ -170,17 +170,6 @@ const I = /* @__PURE__ */ N(Z), Q = (o) => {
     color: e[`${s}-90`]
   });
   return {
-    ai: {
-      backgroundColor: e["violet-10"],
-      borderColor: e["violet-10"],
-      color: e["violet-90"]
-    },
-    beige: {
-      backgroundColor: e["beige-20"],
-      borderColor: e["beige-20"],
-      color: e["beige-80"]
-    },
-    danger: a("red"),
     default: {
       backgroundColor: e["neutral-10"],
       borderColor: e["neutral-30"],
@@ -190,39 +179,50 @@ const I = /* @__PURE__ */ N(Z), Q = (o) => {
       color: e["neutral-80"],
       fontSize: i.sm
     },
-    info: a("blue"),
-    sizes: {
-      md: {
-        padding: d.xl
-      },
-      sm: {
-        padding: d.lg
-      }
-    },
-    success: a("green"),
     title: {
       default: {
         color: e["neutral-90"],
         fontWeight: n.medium
       },
       sizes: {
-        md: {
-          marginBottom: d.sm
-        },
         sm: {
           marginBottom: d.xs
+        },
+        md: {
+          marginBottom: d.sm
         }
       }
     },
-    warning: a("orange")
+    danger: a("red"),
+    warning: a("orange"),
+    info: a("blue"),
+    success: a("green"),
+    beige: {
+      backgroundColor: e["beige-20"],
+      borderColor: e["beige-20"],
+      color: e["beige-80"]
+    },
+    ai: {
+      backgroundColor: e["violet-10"],
+      color: e["violet-90"],
+      borderColor: e["violet-10"]
+    },
+    sizes: {
+      sm: {
+        padding: d.lg
+      },
+      md: {
+        padding: d.xl
+      }
+    }
   };
 }, rr = (o) => {
   const { colors: r, fontWeights: e, toRem: i } = o;
   return {
     sizes: {
-      lg: i(40),
-      md: i(30),
       sm: i(20),
+      md: i(30),
+      lg: i(40),
       xl: i(50),
       xxl: i(60)
     },
@@ -238,100 +238,186 @@ const I = /* @__PURE__ */ N(Z), Q = (o) => {
       ...n.xs,
       fontWeight: e.medium
     },
+    variants: {
+      default: {
+        color: r["beige-70"],
+        backgroundColor: r["beige-30"]
+      },
+      primary: {
+        color: r["neutral-90"],
+        backgroundColor: r["primary-40"]
+      }
+    },
     disabled: {
       default: {
-        backgroundColor: r["beige-20"],
-        color: r["beige-40"]
+        color: r["beige-40"],
+        backgroundColor: r["beige-20"]
       },
       primary: {
-        backgroundColor: r["primary-50"],
-        color: r["primary-80"]
+        color: r["primary-80"],
+        backgroundColor: r["primary-50"]
       }
     },
     sizes: {
-      md: {
-        borderRadius: l(14),
-        height: l(20),
-        padding: i.xs
-      },
       sm: {
-        borderRadius: l(14),
+        padding: i.xxs,
         height: l(16),
-        padding: i.xxs
-      }
-    },
-    variants: {
-      default: {
-        backgroundColor: r["beige-30"],
-        color: r["beige-70"]
+        borderRadius: l(14)
       },
-      primary: {
-        backgroundColor: r["primary-40"],
-        color: r["neutral-90"]
+      md: {
+        padding: i.xs,
+        height: l(20),
+        borderRadius: l(14)
       }
     }
   };
 }, or = (o) => {
   const { colors: r, space: e, texts: i } = o;
   return {
+    list: {
+      ...i["subtitle-sm"],
+      padding: `${e.sm} 0`
+    },
     item: {
-      active: {
-        color: r["neutral-70"]
-      },
       default: {
         color: r["neutral-50"],
         textDecoration: "none"
       },
       hover: {
         color: r["neutral-70"]
+      },
+      active: {
+        color: r["neutral-70"]
       }
     },
-    list: {
-      ...i["subtitle-sm"],
-      padding: `${e.sm} 0`
-    },
     separator: {
-      color: r["neutral-50"],
-      padding: `0 ${e.xs}`
+      padding: `0 ${e.xs}`,
+      color: r["neutral-50"]
     }
   };
 }, tr = (o) => {
   const { colors: r, focus: e, fontWeights: i, radii: n, space: l, texts: d, toRem: a } = o, s = {
     ...d.xs,
-    borderRadius: n.md,
     color: r["neutral-10"],
     fontWeight: i.bold,
-    letterSpacing: 0
+    letterSpacing: 0,
+    borderRadius: n.md
   };
   return {
-    active: {
-      ai: {
-        ghost: {
-          backgroundColor: r["violet-30"]
-        },
+    primary: {
+      ...s,
+      color: o.colors["neutral-90"],
+      backgroundColor: r["primary-40"],
+      borderColor: r["primary-40"]
+    },
+    secondary: {
+      ...s,
+      backgroundColor: r["neutral-90"],
+      borderColor: r["neutral-90"]
+    },
+    tertiary: {
+      ...s,
+      color: r["neutral-90"],
+      backgroundColor: "transparent",
+      borderColor: r["neutral-90"]
+    },
+    ghost: {
+      ...s,
+      color: r["neutral-90"],
+      backgroundColor: "transparent",
+      borderColor: "transparent"
+    },
+    danger: {
+      primary: {
+        color: r["neutral-10"],
+        backgroundColor: r["red-70"],
+        borderColor: r["red-70"]
+      },
+      tertiary: {
+        backgroundColor: "transparent",
+        color: r["red-80"],
+        borderColor: r["red-80"]
+      },
+      ghost: {
+        color: r["red-80"],
+        backgroundColor: "transparent",
+        borderColor: "transparent"
+      }
+    },
+    ai: {
+      primary: {
+        color: r["neutral-10"],
+        backgroundColor: r["violet-70"],
+        borderColor: "transparent"
+      },
+      tertiary: {
+        backgroundColor: "neutral-10",
+        color: r["violet-70"],
+        borderColor: r["violet-70"]
+      },
+      ghost: {
+        color: r["violet-70"],
+        backgroundColor: r["neutral-10"],
+        borderColor: "transparent"
+      }
+    },
+    hover: {
+      primary: {
+        backgroundColor: r["primary-30"],
+        borderColor: r["primary-30"]
+      },
+      secondary: {
+        backgroundColor: r["neutral-70"],
+        borderColor: "transparent"
+      },
+      tertiary: {
+        backgroundColor: m(r["neutral-90"], 0.1)
+      },
+      ghost: {
+        backgroundColor: m(r["neutral-90"], 0.1)
+      },
+      danger: {
         primary: {
-          backgroundColor: r["violet-40"],
-          borderColor: r["violet-40"]
+          backgroundColor: r["red-60"],
+          borderColor: r["red-60"]
         },
         tertiary: {
-          backgroundColor: r["violet-30"]
+          backgroundColor: r["red-10"]
+        },
+        ghost: {
+          backgroundColor: r["red-10"]
         }
       },
-      danger: {
-        ghost: {
-          backgroundColor: r["red-20"]
-        },
+      ai: {
         primary: {
-          backgroundColor: r["red-50"],
-          borderColor: r["red-50"]
+          backgroundColor: r["violet-60"],
+          borderColor: "transparent"
         },
         tertiary: {
-          backgroundColor: r["red-20"]
+          backgroundColor: r["violet-10"]
+        },
+        ghost: {
+          backgroundColor: r["violet-10"]
         }
+      }
+    },
+    focus: {
+      primary: { ...e(r["primary-20"]) },
+      secondary: { ...e(r["neutral-40"]) },
+      tertiary: { ...e(r["neutral-40"]) },
+      ghost: { ...e(r["neutral-40"]) },
+      danger: {
+        primary: { ...e(r["red-40"]) },
+        tertiary: { ...e(r["red-40"]) },
+        ghost: { ...e(r["red-40"]) }
       },
-      ghost: {
-        backgroundColor: m(r["neutral-90"], 0.4)
-      },
+      ai: {
+        primary: { ...e(r["violet-50"]) },
+        tertiary: { ...e(r["violet-50"]) },
+        ghost: { ...e(r["violet-50"]) }
+      }
+    },
+    active: {
       primary: {
         backgroundColor: r["primary-10"],
         borderColor: r["primary-10"]
@@ -342,142 +428,50 @@ const I = /* @__PURE__ */ N(Z), Q = (o) => {
       },
       tertiary: {
         backgroundColor: m(r["neutral-90"], 0.4)
-      }
-    },
-    ai: {
-      ghost: {
-        backgroundColor: r["neutral-10"],
-        borderColor: "transparent",
-        color: r["violet-70"]
-      },
-      primary: {
-        backgroundColor: r["violet-70"],
-        borderColor: "transparent",
-        color: r["neutral-10"]
       },
-      tertiary: {
-        backgroundColor: "neutral-10",
-        borderColor: r["violet-70"],
-        color: r["violet-70"]
-      }
-    },
-    danger: {
       ghost: {
-        backgroundColor: "transparent",
-        borderColor: "transparent",
-        color: r["red-80"]
+        backgroundColor: m(r["neutral-90"], 0.4)
       },
-      primary: {
-        backgroundColor: r["red-70"],
-        borderColor: r["red-70"],
-        color: r["neutral-10"]
+      danger: {
+        primary: {
+          backgroundColor: r["red-50"],
+          borderColor: r["red-50"]
+        },
+        tertiary: {
+          backgroundColor: r["red-20"]
+        },
+        ghost: {
+          backgroundColor: r["red-20"]
+        }
       },
-      tertiary: {
-        backgroundColor: "transparent",
-        borderColor: r["red-80"],
-        color: r["red-80"]
+      ai: {
+        primary: {
+          backgroundColor: r["violet-40"],
+          borderColor: r["violet-40"]
+        },
+        tertiary: {
+          backgroundColor: r["violet-30"]
+        },
+        ghost: {
+          backgroundColor: r["violet-30"]
+        }
       }
     },
     disabled: {
       ...s,
-      "&:focus": { ...e(r["beige-10"]) },
+      color: r["beige-70"],
       backgroundColor: r["beige-40"],
       borderColor: r["beige-40"],
-      color: r["beige-70"]
-    },
-    focus: {
-      ai: {
-        ghost: { ...e(r["violet-50"]) },
-        primary: { ...e(r["violet-50"]) },
-        tertiary: { ...e(r["violet-50"]) }
-      },
-      danger: {
-        ghost: { ...e(r["red-40"]) },
-        primary: { ...e(r["red-40"]) },
-        tertiary: { ...e(r["red-40"]) }
-      },
-      ghost: { ...e(r["neutral-40"]) },
-      primary: { ...e(r["primary-20"]) },
-      secondary: { ...e(r["neutral-40"]) },
-      tertiary: { ...e(r["neutral-40"]) }
-    },
-    ghost: {
-      ...s,
-      backgroundColor: "transparent",
-      borderColor: "transparent",
-      color: r["neutral-90"]
-    },
-    hover: {
-      ai: {
-        ghost: {
-          backgroundColor: r["violet-10"]
-        },
-        primary: {
-          backgroundColor: r["violet-60"],
-          borderColor: "transparent"
-        },
-        tertiary: {
-          backgroundColor: r["violet-10"]
-        }
-      },
-      danger: {
-        ghost: {
-          backgroundColor: r["red-10"]
-        },
-        primary: {
-          backgroundColor: r["red-60"],
-          borderColor: r["red-60"]
-        },
-        tertiary: {
-          backgroundColor: r["red-10"]
-        }
-      },
-      ghost: {
-        backgroundColor: m(r["neutral-90"], 0.1)
-      },
-      primary: {
-        backgroundColor: r["primary-30"],
-        borderColor: r["primary-30"]
-      },
-      secondary: {
-        backgroundColor: r["neutral-70"],
-        borderColor: "transparent"
-      },
-      tertiary: {
-        backgroundColor: m(r["neutral-90"], 0.1)
-      }
-    },
-    icon: {
-      default: {
-        lg: a(16),
-        md: a(16),
-        sm: a(16),
-        xs: a(12)
-      },
-      only: {
-        lg: a(24),
-        md: a(16),
-        sm: a(16),
-        xs: a(16)
-      }
-    },
-    primary: {
-      ...s,
-      backgroundColor: r["primary-40"],
-      borderColor: r["primary-40"],
-      color: o.colors["neutral-90"]
-    },
-    secondary: {
-      ...s,
-      backgroundColor: r["neutral-90"],
-      borderColor: r["neutral-90"]
+      "&:focus": { ...e(r["beige-10"]) }
     },
     sizes: {
-      lg: {
-        ...d.sm,
-        fontWeight: i.bold,
-        height: a(48),
-        padding: `${l.md} ${l.xl}`
+      xs: {
+        height: a(24),
+        padding: `${l.xs} ${l.sm}`
+      },
+      sm: {
+        height: a(32),
+        padding: `${l.sm} ${l.md}`
       },
       md: {
         ...d.sm,
@@ -485,20 +479,26 @@ const I = /* @__PURE__ */ N(Z), Q = (o) => {
         height: a(40),
         padding: `${l.sm} ${l.lg}`
       },
-      sm: {
-        height: a(32),
-        padding: `${l.sm} ${l.md}`
-      },
-      xs: {
-        height: a(24),
-        padding: `${l.xs} ${l.sm}`
+      lg: {
+        ...d.sm,
+        fontWeight: i.bold,
+        height: a(48),
+        padding: `${l.md} ${l.xl}`
       }
     },
-    tertiary: {
-      ...s,
-      backgroundColor: "transparent",
-      borderColor: r["neutral-90"],
-      color: r["neutral-90"]
+    icon: {
+      only: {
+        xs: a(16),
+        sm: a(16),
+        md: a(16),
+        lg: a(24)
+      },
+      default: {
+        xs: a(12),
+        sm: a(16),
+        md: a(16),
+        lg: a(16)
+      }
     }
   };
 }, nr = (o) => {
@@ -506,37 +506,19 @@ const I = /* @__PURE__ */ N(Z), Q = (o) => {
   return {
     default: {
       backgroundColor: e["neutral-10"],
-      borderColor: e["neutral-30"],
       borderStyle: "solid",
-      borderWidth: r.sm
+      borderWidth: r.sm,
+      borderColor: e["neutral-30"]
     }
   };
 }, ir = (o) => {
-  const { colors: r, radii: e, toRem: i } = o;
-  return {
-    checked: {
-      backgroundColor: r["primary-40"],
-      borderColor: r["primary-40"],
-      color: r["neutral-90"]
-    },
-    default: {
-      borderRadius: e.sm,
-      flexShrink: 0,
-      height: i(16),
-      width: i(16)
-    },
-    disabled: {
-      borderColor: r["beige-60"]
-    }
-  };
-}, ar = (o) => {
   const { colors: r, fontWeights: e } = o;
   return {
     item: {
       selected: {
-        backgroundColor: r["primary-40"],
         color: r["neutral-90"],
         fontWeight: e.bold,
+        backgroundColor: r["primary-40"],
         outline: "none"
       },
       today: {
@@ -545,6 +527,24 @@ const I = /* @__PURE__ */ N(Z), Q = (o) => {
       }
     }
   };
+}, ar = (o) => {
+  const { colors: r, radii: e, toRem: i } = o;
+  return {
+    default: {
+      width: i(16),
+      height: i(16),
+      flexShrink: 0,
+      borderRadius: e.sm
+    },
+    disabled: {
+      borderColor: r["beige-60"]
+    },
+    checked: {
+      color: r["neutral-90"],
+      backgroundColor: r["primary-40"],
+      borderColor: r["primary-40"]
+    }
+  };
 }, lr = (o) => {
   const { colors: r, space: e, toRem: i } = o;
   return {
@@ -552,49 +552,51 @@ const I = /* @__PURE__ */ N(Z), Q = (o) => {
       backgroundColor: r.overlay,
       zIndex: 999
     },
+    default: {
+      zIndex: 999
+    },
     closeButton: {},
+    title: {
+      margin: 0,
+      backgroundColor: r["neutral-10"],
+      padding: `${e.xl} ${e["5xl"]} ${e.xl} ${e.xl}`
+    },
     content: {
       padding: `${e.xl}`
     },
-    default: {
-      zIndex: 999
-    },
     footer: {
       backgroundColor: r["neutral-10"],
       padding: `${e.xl}`
     },
     sizes: {
       horizontal: {
-        lg: { width: i(680) },
+        sm: { width: i(400) },
         md: { width: i(550) },
-        sm: { width: i(400) }
+        lg: { width: i(680) }
       },
       vertical: {
-        lg: { height: i(680) },
+        sm: { height: i(400) },
         md: { height: i(550) },
-        sm: { height: i(400) }
+        lg: { height: i(680) }
       }
-    },
-    title: {
-      backgroundColor: r["neutral-10"],
-      margin: 0,
-      padding: `${e.xl} ${e["5xl"]} ${e.xl} ${e.xl}`
     }
   };
 }, dr = (o) => {
   const { colors: r, fontSizes: e, radii: i, toRem: n } = o, l = r["beige-30"];
   return {
     inner: {
-      borderRadius: i.md,
       fontSize: e.sm,
-      minWidth: n(130)
+      minWidth: n(130),
+      borderRadius: i.md
     },
     item: {
-      "&:focus": {
+      backgroundColor: "transparent",
+      color: r["beige-70"],
+      "&:hover": {
         backgroundColor: r["beige-30"],
         color: r["neutral-90"]
       },
-      "&:hover": {
+      "&:focus": {
         backgroundColor: r["beige-30"],
         color: r["neutral-90"]
       },
@@ -602,9 +604,7 @@ const I = /* @__PURE__ */ N(Z), Q = (o) => {
         backgroundColor: "transparent",
         color: r["beige-40"],
         cursor: "not-allowed"
-      },
-      backgroundColor: "transparent",
-      color: r["beige-70"]
+      }
     },
     separator: {
       backgroundColor: l
@@ -614,25 +614,25 @@ const I = /* @__PURE__ */ N(Z), Q = (o) => {
   const { colors: r, toRem: e } = o;
   return {
     default: {
-      borderStyle: "dashed",
-      minHeight: e(200)
+      minHeight: e(200),
+      borderStyle: "dashed"
     },
+    dragAccept: {},
+    dragReject: {},
     disabled: {
       backgroundColor: r["beige-30"]
-    },
-    dragAccept: {},
-    dragReject: {}
+    }
   };
 }, cr = (o) => {
   const { colors: r, texts: e } = o;
   return {
-    danger: {
-      color: r["red-70"]
-    },
     default: {
       ...e.xs,
       color: r["neutral-60"]
     },
+    danger: {
+      color: r["red-70"]
+    },
     success: {
       color: r["green-70"]
     },
@@ -640,21 +640,14 @@ const I = /* @__PURE__ */ N(Z), Q = (o) => {
       color: r["orange-70"]
     }
   };
-}, gr = ({ toRem: o }) => ({
-  lg: o(32),
-  md: o(24),
-  sm: o(16),
-  xl: o(48),
-  xs: o(12),
-  xxl: o(64)
-}), ur = (o) => {
+}, gr = (o) => {
   const { colors: r, fontSizes: e, fontWeights: i } = o;
   return {
     color: r["neutral-60"],
     fontSize: e.sm,
     fontWeight: i.medium
   };
-}, br = (o) => {
+}, ur = (o) => {
   const { colors: r, fontWeights: e, icons: i, space: n, transitions: l } = o;
   return {
     default: {
@@ -662,9 +655,12 @@ const I = /* @__PURE__ */ N(Z), Q = (o) => {
       fontWeight: e.medium,
       transition: l.medium
     },
+    withExternalLink: {
+      backgroundSize: `calc(100% - ${i.sm} - ${n.sm}) 50%`
+    },
     disabled: {
-      backgroundImage: `linear-gradient(0deg, ${r["neutral-30"]}, ${r["neutral-30"]} 100%)`,
-      color: r["neutral-50"]
+      color: r["neutral-50"],
+      backgroundImage: `linear-gradient(0deg, ${r["neutral-30"]}, ${r["neutral-30"]} 100%)`
     },
     primary: {
       default: {},
@@ -677,16 +673,20 @@ const I = /* @__PURE__ */ N(Z), Q = (o) => {
       hover: {
         color: r["neutral-10"]
       }
-    },
-    withExternalLink: {
-      backgroundSize: `calc(100% - ${i.sm} - ${n.sm}) 50%`
     }
   };
-}, mr = ({ toRem: o }) => ({
-  lg: o(20),
-  md: o(15),
+}, br = ({ toRem: o }) => ({
+  xs: o(8),
   sm: o(10),
-  xs: o(8)
+  md: o(15),
+  lg: o(20)
+}), mr = ({ toRem: o }) => ({
+  xs: o(12),
+  sm: o(16),
+  md: o(24),
+  lg: o(32),
+  xl: o(48),
+  xxl: o(64)
 }), hr = (o) => {
   const { colors: r, radii: e, space: i, toRem: n } = o;
   return {
@@ -694,102 +694,98 @@ const I = /* @__PURE__ */ N(Z), Q = (o) => {
       backgroundColor: r.overlay,
       zIndex: 999
     },
-    body: {
-      color: r["neutral-90"],
+    default: {
+      zIndex: 999,
+      borderRadius: e.md
+    },
+    header: {
+      backgroundColor: r["neutral-10"],
+      borderTopLeftRadius: e.md,
+      borderTopRightRadius: e.md,
+      paddingTop: i.xxl,
+      paddingRight: i["3xl"],
       paddingBottom: i.xxl,
       paddingLeft: i.xxl,
-      paddingRight: i["3xl"]
+      subtitle: {
+        color: r["neutral-70"],
+        variant: "sm",
+        margin: 0
+      }
     },
-    cover: {},
-    default: {
-      borderRadius: e.md,
-      zIndex: 999
+    body: {
+      color: r["neutral-90"],
+      paddingRight: i["3xl"],
+      paddingBottom: i.xxl,
+      paddingLeft: i.xxl
     },
     footer: {
       backgroundColor: r["neutral-10"],
+      borderTop: `solid ${r["neutral-30"]}`,
       borderBottomLeftRadius: e.md,
       borderBottomRightRadius: e.md,
-      borderTop: `solid ${r["neutral-30"]}`,
       children: {
-        paddingBottom: i.xl,
-        paddingLeft: i.xxl,
         paddingRight: i.xxl,
-        paddingTop: i.lg
+        paddingLeft: i.xxl,
+        paddingTop: i.lg,
+        paddingBottom: i.xl
       },
       information: {
         backgroundColor: r["beige-20"],
-        paddingBottom: i.xxl,
-        paddingLeft: i.xxl,
         paddingRight: i.xxl,
-        paddingTop: i.xl
+        paddingLeft: i.xxl,
+        paddingTop: i.xl,
+        paddingBottom: i.xxl
       }
     },
     gutter: n(32),
-    header: {
-      backgroundColor: r["neutral-10"],
-      borderTopLeftRadius: e.md,
-      borderTopRightRadius: e.md,
-      paddingBottom: i.xxl,
-      paddingLeft: i.xxl,
-      paddingRight: i["3xl"],
-      paddingTop: i.xxl,
-      subtitle: {
-        color: r["neutral-70"],
-        margin: 0,
-        variant: "sm"
-      }
-    },
     sizes: {
-      auto: {},
-      lg: {
-        width: n(730)
+      xs: {
+        width: n(320)
+      },
+      sm: {
+        width: n(450)
       },
       md: {
         width: n(600)
       },
-      sm: {
-        width: n(450)
+      lg: {
+        width: n(730)
       },
-      xs: {
-        width: n(320)
-      }
-    }
+      auto: {}
+    },
+    cover: {}
   };
 }, pr = (o) => {
   const { colors: r, focus: e, fontSizes: i, fontWeights: n, toRem: l } = o;
   return {
-    active: {
-      "&:hover, &:focus": {
-        backgroundColor: r["neutral-90"]
-      },
-      backgroundColor: r["neutral-90"],
-      color: r["neutral-10"]
-    },
     default: {
+      width: l(32),
+      height: l(32),
       color: r["neutral-90"],
-      fontSize: i.xs,
       fontWeight: n.bold,
-      height: l(32),
-      width: l(32)
-    },
-    disabled: {
-      backgroundColor: r["beige-40"],
-      color: r["beige-70"]
+      fontSize: i.xs
     },
     item: {
-      "&:focus": { ...e(r["neutral-60"]) },
       "&:hover, &:focus": {
         backgroundColor: r["neutral-30"]
+      },
+      "&:focus": { ...e(r["neutral-60"]) }
+    },
+    active: {
+      backgroundColor: r["neutral-90"],
+      color: r["neutral-10"],
+      "&:hover, &:focus": {
+        backgroundColor: r["neutral-90"]
       }
+    },
+    disabled: {
+      backgroundColor: r["beige-40"],
+      color: r["beige-70"]
     }
   };
 }, fr = (o) => {
   const { borderWidths: r, colors: e, space: i, texts: n, toRem: l } = o;
   return {
-    content: {
-      display: "block",
-      padding: i.md
-    },
     default: {
       ...n.sm,
       backgroundColor: e["neutral-90"],
@@ -797,45 +793,49 @@ const I = /* @__PURE__ */ N(Z), Q = (o) => {
       maxWidth: l(700),
       zIndex: 1
     },
+    content: {
+      display: "block",
+      padding: i.md
+    },
     title: {
       ...n.h6,
+      padding: `${i.md} ${i.md} ${i.xs}`,
+      color: e["neutral-10"],
       borderBottomColor: e["neutral-70"],
-      borderBottomStyle: "solid",
       borderBottomWidth: r.sm,
-      color: e["neutral-10"],
-      padding: `${i.md} ${i.md} ${i.xs}`
+      borderBottomStyle: "solid"
     }
   };
 }, xr = (o) => {
   const { colors: r, toRem: e } = o;
   return {
+    default: {
+      width: e(16),
+      height: e(16)
+    },
     checked: {
-      borderColor: r["primary-40"],
-      color: r["neutral-90"]
+      color: r["neutral-90"],
+      borderColor: r["primary-40"]
     },
     checkedCenteredColor: {
       default: r["primary-40"],
       disabled: r["beige-60"]
-    },
-    default: {
-      height: e(16),
-      width: e(16)
     }
   };
 }, Cr = (o) => {
   const { colors: r } = o;
   return {
-    checked: {
+    default: {
       "&:hover": {
-        backgroundColor: r["primary-30"]
-      },
+        backgroundColor: r["beige-30"]
+      }
+    },
+    checked: {
       backgroundColor: r["primary-40"],
+      color: o.colors["neutral-90"],
       borderColor: r["primary-40"],
-      color: o.colors["neutral-90"]
-    },
-    default: {
       "&:hover": {
-        backgroundColor: r["beige-30"]
+        backgroundColor: r["primary-30"]
       }
     }
   };
@@ -846,14 +846,13 @@ const I = /* @__PURE__ */ N(Z), Q = (o) => {
       backgroundColor: e["beige-40"],
       backgroundImage: `linear-gradient(${e["primary-40"]}, ${e["primary-40"]})`
     },
-    disabled: {
-      backgroundImage: `linear-gradient(${e["beige-60"]}, ${e["beige-60"]})`
-    },
-    focused: {
+    selector: {
+      backgroundColor: e["neutral-90"],
+      borderRadius: "50%",
+      border: `${r.md} solid`,
       disabled: {
-        outline: "none"
-      },
-      outline: `${r.md} solid ${e["primary-40"]}`
+        backgroundColor: e["beige-60"]
+      }
     },
     output: {
       tooltip: {
@@ -862,15 +861,16 @@ const I = /* @__PURE__ */ N(Z), Q = (o) => {
         color: e["neutral-10"]
       }
     },
-    rangeInput: {
+    focused: {
+      outline: `${r.md} solid ${e["primary-40"]}`,
       disabled: {
-        backgroundColor: e["beige-60"]
+        outline: "none"
       }
     },
-    selector: {
-      backgroundColor: e["neutral-90"],
-      border: `${r.md} solid`,
-      borderRadius: "50%",
+    disabled: {
+      backgroundImage: `linear-gradient(${e["beige-60"]}, ${e["beige-60"]})`
+    },
+    rangeInput: {
       disabled: {
         backgroundColor: e["beige-60"]
       }
@@ -889,30 +889,31 @@ const I = /* @__PURE__ */ N(Z), Q = (o) => {
 }, Fr = (o) => {
   const { borderWidths: r, colors: e, fontWeights: i, space: n } = o;
   return {
-    td: {
-      padding: n.xl,
-      textAlign: "left"
-    },
     th: {
-      borderBottomColor: e["neutral-90"],
-      borderBottomStyle: "solid",
-      borderBottomWidth: r.sm,
       color: e["neutral-60"],
       fontWeight: i.medium,
-      textAlign: "left"
+      textAlign: "left",
+      borderBottomColor: e["neutral-90"],
+      borderBottomWidth: r.sm,
+      borderBottomStyle: "solid"
+    },
+    td: {
+      textAlign: "left",
+      padding: n.xl
     },
     tr: {
-      clickable: {
-        cursor: "pointer"
+      default: {
+        borderBottomColor: e["neutral-30"],
+        borderBottomWidth: r.sm,
+        borderBottomStyle: "solid"
       },
       danger: {
         backgroundColor: e["red-10"],
         color: e["red-70"]
       },
-      default: {
-        borderBottomColor: e["neutral-30"],
-        borderBottomStyle: "solid",
-        borderBottomWidth: r.sm
+      warning: {
+        backgroundColor: e["orange-10"],
+        color: e["orange-80"]
       },
       info: {
         backgroundColor: e["blue-10"],
@@ -922,84 +923,83 @@ const I = /* @__PURE__ */ N(Z), Q = (o) => {
         backgroundColor: e["green-10"],
         color: e["green-70"]
       },
-      warning: {
-        backgroundColor: e["orange-10"],
-        color: e["orange-80"]
+      clickable: {
+        cursor: "pointer"
       }
     }
   };
 }, vr = (o) => {
   const { borderWidths: r, colors: e, fontSizes: i, fontWeights: n, lineHeights: l, space: d } = o;
   return {
-    activeBar: {
+    tabsBorder: {
       horizontal: {
-        background: e["primary-40"],
-        height: r.md
+        boxShadow: `inset 0 -${r.sm} 0 ${e["neutral-30"]}`
       },
       vertical: {
-        background: e["primary-40"],
-        width: r.md
+        boxShadow: `inset -${r.sm} 0 0 ${e["neutral-30"]}`
       }
     },
-    badge: {
-      maxHeight: d.lg
-    },
-    icon: {
-      maxHeight: d.lg,
-      maxWidth: d.lg
-    },
     item: {
-      active: {
-        color: e["neutral-90"]
-      },
       default: {
         color: e["neutral-70"],
         fontWeight: n.medium,
-        lineHeight: l.md,
-        textDecoration: "none"
+        textDecoration: "none",
+        lineHeight: l.md
       },
-      disabled: {
-        color: e["neutral-50"]
+      active: {
+        color: e["neutral-90"]
       },
       focus: {
         color: e["neutral-90"]
       },
+      disabled: {
+        color: e["neutral-50"]
+      },
       size: {
-        md: {
-          fontSize: i.md
-        },
         sm: {
           fontSize: i.sm
+        },
+        md: {
+          fontSize: i.md
         }
       }
     },
     panel: {
-      horizontal: {
+      vertical: {
         "&:focus": {
           outline: "none"
-        },
-        marginTop: d.xl
+        }
       },
-      vertical: {
+      horizontal: {
+        marginTop: d.xl,
         "&:focus": {
           outline: "none"
         }
       }
     },
-    tabsBorder: {
+    activeBar: {
       horizontal: {
-        boxShadow: `inset 0 -${r.sm} 0 ${e["neutral-30"]}`
+        background: e["primary-40"],
+        height: r.md
       },
       vertical: {
-        boxShadow: `inset -${r.sm} 0 0 ${e["neutral-30"]}`
+        background: e["primary-40"],
+        width: r.md
       }
+    },
+    icon: {
+      maxWidth: d.lg,
+      maxHeight: d.lg
+    },
+    badge: {
+      maxHeight: d.lg
     }
   };
 }, wr = (o) => {
   const { colors: r, fontSizes: e, fontWeights: i, radii: n, space: l, toRem: d } = o, a = {
-    md: d(32),
+    xs: d(20),
     sm: d(24),
-    xs: d(20)
+    md: d(32)
   }, s = (g) => ({
     backgroundColor: r[`${g}-10`],
     color: r[`${g}-90`]
@@ -1013,93 +1013,93 @@ const I = /* @__PURE__ */ N(Z), Q = (o) => {
   });
   return {
     default: {
-      borderRadius: n.md,
-      fontWeight: i.medium
+      fontWeight: i.medium,
+      borderRadius: n.md
     },
-    hover: {
-      ai: {
-        backgroundColor: r["violet-30"]
+    variants: {
+      default: {
+        backgroundColor: r["beige-20"],
+        color: r["beige-90"]
       },
-      blue: b("blue"),
-      danger: t("red"),
+      primary: {
+        color: o.colors["neutral-90"],
+        backgroundColor: r["primary-40"]
+      },
+      success: s("green"),
+      danger: s("red"),
+      warning: s("orange"),
+      info: s("blue"),
+      teal: c("teal"),
+      blue: c("blue"),
+      orange: c("orange"),
+      pink: c("pink"),
+      green: c("green"),
+      violet: c("violet"),
+      ai: {
+        backgroundColor: r["violet-20"],
+        color: r["violet-90"]
+      }
+    },
+    hover: {
       default: {
         backgroundColor: r["beige-30"]
       },
-      green: b("green"),
-      info: t("blue"),
-      orange: b("orange"),
-      pink: b("pink"),
       primary: {
         backgroundColor: r["primary-50"]
       },
       success: t("green"),
+      danger: t("red"),
+      warning: t("orange"),
+      info: t("blue"),
       teal: b("teal"),
+      blue: b("blue"),
+      orange: b("orange"),
+      pink: b("pink"),
+      green: b("green"),
       violet: b("violet"),
-      warning: t("orange")
-    },
-    icon: {
-      md: d(16),
-      sm: d(12),
-      xs: d(12)
-    },
-    shape: {
-      md: {
-        height: a.md,
-        width: a.md
-      },
-      sm: {
-        height: a.sm,
-        width: a.sm
-      },
-      xs: {
-        height: a.xs,
-        width: a.xs
+      ai: {
+        backgroundColor: r["violet-30"]
       }
     },
     sizes: {
-      md: {
-        fontSize: e.sm,
-        gap: l.sm,
-        height: a.md,
-        padding: `${l.xs} ${l.sm}`
-      },
-      sm: {
+      xs: {
+        padding: `${l.xxs} ${l.xs}`,
+        height: a.xs,
         fontSize: e.xs,
         gap: l.xs,
-        height: a.sm,
-        padding: `${l.xs} ${l.sm}`
+        borderRadius: n.sm
       },
-      xs: {
-        borderRadius: n.sm,
+      sm: {
+        padding: `${l.xs} ${l.sm}`,
+        height: a.sm,
         fontSize: e.xs,
-        gap: l.xs,
-        height: a.xs,
-        padding: `${l.xxs} ${l.xs}`
+        gap: l.xs
+      },
+      md: {
+        padding: `${l.xs} ${l.sm}`,
+        height: a.md,
+        fontSize: e.sm,
+        gap: l.sm
       }
     },
-    variants: {
-      ai: {
-        backgroundColor: r["violet-20"],
-        color: r["violet-90"]
-      },
-      blue: c("blue"),
-      danger: s("red"),
-      default: {
-        backgroundColor: r["beige-20"],
-        color: r["beige-90"]
+    icon: {
+      xs: d(12),
+      sm: d(12),
+      md: d(16)
+    },
+    shape: {
+      xs: {
+        width: a.xs,
+        height: a.xs
       },
-      green: c("green"),
-      info: s("blue"),
-      orange: c("orange"),
-      pink: c("pink"),
-      primary: {
-        backgroundColor: r["primary-40"],
-        color: o.colors["neutral-90"]
+      sm: {
+        width: a.sm,
+        height: a.sm
       },
-      success: s("green"),
-      teal: c("teal"),
-      violet: c("violet"),
-      warning: s("orange")
+      md: {
+        width: a.md,
+        height: a.md
+      }
     }
   };
 }, Wr = (o) => {
@@ -1129,6 +1129,7 @@ const I = /* @__PURE__ */ N(Z), Q = (o) => {
   defaultLineHeight: o,
   toRem: r
 }) => ({
+  html: o,
   h0: r(72),
   h1: r(48),
   h2: r(40),
@@ -1136,21 +1137,21 @@ const I = /* @__PURE__ */ N(Z), Q = (o) => {
   h4: r(24),
   h5: r(18),
   h6: r(16),
-  html: o,
   lg: r(24),
   md: r(18),
   sm: r(18),
+  xs: r(14),
   "subtitle-md": o,
-  "subtitle-sm": o,
-  xs: r(14)
+  "subtitle-sm": o
 }), Dr = {
-  bold: 600,
+  regular: 400,
   medium: 500,
-  regular: 400
+  bold: 600
 }, Tr = ({
   defaultLetterSpacing: o,
   toRem: r
 }) => ({
+  html: o,
   h0: r(-1.7),
   h1: r(-1.2),
   h2: r(-1),
@@ -1158,13 +1159,12 @@ const I = /* @__PURE__ */ N(Z), Q = (o) => {
   h4: r(-0.6),
   h5: r(-0.5),
   h6: r(-0.5),
-  html: o,
   lg: o,
   md: o,
   sm: o,
+  xs: r(-0.2),
   "subtitle-md": r(-0.2),
-  "subtitle-sm": r(-0.2),
-  xs: r(-0.2)
+  "subtitle-sm": r(-0.2)
 }), Rr = (o) => {
   const { fontWeights: r } = o;
   return {
@@ -1224,38 +1224,41 @@ const I = /* @__PURE__ */ N(Z), Q = (o) => {
     [t]: {
       color: n[t],
       fontFamily: l[t] || void 0,
-      fontSize: r[t],
       fontWeight: d[t],
-      letterSpacing: e[t] || void 0,
+      fontSize: r[t],
       lineHeight: i[t] || i.lg,
+      letterSpacing: e[t] || void 0,
       textTransform: a[t] || void 0
     }
   }), {});
 }, Ar = (o, r, e) => ({
+  texts: [o, "sans-serif"].join(", "),
   headings: [r, "sans-serif"].join(", "),
-  icons: e,
-  texts: [o, "sans-serif"].join(", ")
+  icons: e
 }), Er = (o) => {
   const { borderWidths: r, colors: e, fontWeights: i, radii: n, space: l } = o;
   return {
-    bottom: {
-      paddingBottom: l.lg
-    },
     default: {
       paddingLeft: l.sm,
       paddingRight: l.sm
     },
+    top: {
+      paddingTop: l.lg
+    },
+    bottom: {
+      paddingBottom: l.lg
+    },
     growls: {
       default: {
         ...U(o).sm,
-        borderRadius: n.lg,
-        borderStyle: "solid",
         borderWidth: r.sm,
+        borderStyle: "solid",
+        borderRadius: n.lg,
         maxWidth: 340
       },
       title: {
-        color: e["neutral-90"],
-        fontWeight: i.bold
+        fontWeight: i.bold,
+        color: e["neutral-90"]
       }
     },
     snackbar: {
@@ -1263,130 +1266,127 @@ const I = /* @__PURE__ */ N(Z), Q = (o) => {
         borderRadius: n.lg
       },
       separator: {
-        danger: {
-          borderLeftColor: e["red-20"]
-        },
         default: {
           borderLeft: "1px solid",
           borderLeftColor: e["neutral-30"]
         },
+        danger: {
+          borderLeftColor: e["red-20"]
+        },
+        warning: {
+          borderLeftColor: e["orange-20"]
+        },
         info: {
           borderLeftColor: e["blue-30"]
         },
         success: {
           borderLeftColor: e["green-30"]
-        },
-        warning: {
-          borderLeftColor: e["orange-20"]
         }
       }
-    },
-    top: {
-      paddingTop: l.lg
     }
   };
 }, Lr = "0.32rem !important", Ir = "0.12rem ! important", Hr = (o) => {
   const { borderWidths: r, colors: e, focus: i, toRem: n } = o;
   return {
-    after: {
-      checked: {
+    item: {
+      default: {
         backgroundColor: e["neutral-10"],
-        borderColor: e["neutral-10"]
+        borderColor: e["neutral-30"],
+        borderWidth: r.sm,
+        borderStyle: "solid",
+        borderRadius: n(16),
+        "&:focus": {
+          borderColor: e["primary-30"],
+          ...i(e["primary-30"])
+        }
+      },
+      sizes: {
+        xs: {
+          width: n(28),
+          height: n(16),
+          marginTop: Lr
+        },
+        sm: {
+          width: n(36),
+          height: n(20),
+          marginTop: Ir
+        },
+        md: {
+          width: n(44),
+          height: n(24),
+          marginTop: "0 !important"
+        }
       },
+      checked: {
+        backgroundColor: e["primary-40"],
+        borderColor: e["primary-40"]
+      },
+      disabled: {
+        borderColor: e["beige-60"],
+        backgroundColor: e["beige-40"]
+      }
+    },
+    after: {
       default: {
         backgroundColor: e["neutral-10"],
         borderColor: e["neutral-50"],
-        borderRadius: "50%",
+        borderWidth: r.sm,
         borderStyle: "solid",
-        borderWidth: r.sm
+        borderRadius: "50%"
+      },
+      checked: {
+        backgroundColor: e["neutral-10"],
+        borderColor: e["neutral-10"]
       },
       disabled: {
-        backgroundColor: e["beige-60"],
-        borderColor: "transparent"
+        borderColor: "transparent",
+        backgroundColor: e["beige-60"]
       },
       sizes: {
-        md: {
-          height: n(20),
-          width: n(20)
+        xs: {
+          width: n(12),
+          height: n(12)
         },
         sm: {
-          height: n(16),
-          width: n(16)
+          width: n(16),
+          height: n(16)
         },
-        xs: {
-          height: n(12),
-          width: n(12)
+        md: {
+          width: n(20),
+          height: n(20)
         }
       }
     },
     icon: {
       position: {
-        md: {
-          left: "4px",
-          right: "4px"
+        xs: {
+          left: "2px",
+          right: "2px"
         },
         sm: {
           left: "4px",
           right: "4px"
         },
-        xs: {
-          left: "2px",
-          right: "2px"
+        md: {
+          left: "4px",
+          right: "4px"
         }
       },
       sizes: {
-        md: {
-          fontSize: n(16),
-          height: n(16),
-          width: n(16)
-        },
-        sm: {
-          fontSize: n(12),
-          height: n(12),
-          width: n(12)
-        },
         xs: {
-          fontSize: n(10),
+          width: n(10),
           height: n(10),
-          width: n(10)
-        }
-      }
-    },
-    item: {
-      checked: {
-        backgroundColor: e["primary-40"],
-        borderColor: e["primary-40"]
-      },
-      default: {
-        "&:focus": {
-          borderColor: e["primary-30"],
-          ...i(e["primary-30"])
-        },
-        backgroundColor: e["neutral-10"],
-        borderColor: e["neutral-30"],
-        borderRadius: n(16),
-        borderStyle: "solid",
-        borderWidth: r.sm
-      },
-      disabled: {
-        backgroundColor: e["beige-40"],
-        borderColor: e["beige-60"]
-      },
-      sizes: {
-        md: {
-          height: n(24),
-          marginTop: "0 !important",
-          width: n(44)
+          fontSize: n(10)
         },
         sm: {
-          height: n(20),
-          marginTop: Ir,
-          width: n(36)
+          width: n(12),
+          height: n(12),
+          fontSize: n(12)
         },
-        xs: {
+        md: {
+          width: n(16),
           height: n(16),
-          marginTop: Lr,
-          width: n(28)
+          fontSize: n(16)
         }
       }
     }
@@ -1394,43 +1394,39 @@ const I = /* @__PURE__ */ N(Z), Q = (o) => {
 }, qr = (o) => {
   const { borderWidths: r, colors: e, fontSizes: i, fontWeights: n, radii: l, space: d, toRem: a } = o;
   return {
+    maxWidth: a(200),
     backgroundColor: e["neutral-90"],
-    border: `${r.sm} solid ${e["neutral-60"]}`,
-    borderRadius: l.md,
-    boxSizing: "border-box",
     color: e["neutral-10"],
+    padding: `${d.xs} ${d.sm}`,
     fontSize: i.sm,
     fontWeight: n.medium,
-    maxWidth: a(200),
-    padding: `${d.xs} ${d.sm}`
+    border: `${r.sm} solid ${e["neutral-60"]}`,
+    borderRadius: l.md,
+    boxSizing: "border-box"
   };
 }, Or = (o) => {
   const { colors: r } = o;
   return {
-    ai: {
-      color: r["violet-70"]
-    },
-    danger: {
-      color: r["red-70"]
-    },
     default: {
       color: r["neutral-90"]
     },
-    info: {
-      color: r["blue-60"]
+    danger: {
+      color: r["red-70"]
     },
     success: {
       color: r["green-60"]
     },
     warning: {
       color: r["orange-60"]
+    },
+    info: {
+      color: r["blue-60"]
+    },
+    ai: {
+      color: r["violet-70"]
     }
   };
 }, Ur = {
-  sm: "1px",
-  md: "2px",
-  lg: "3px"
-}, Pr = {
   "beige-10": "#FBF9F7",
   "beige-20": "#F6F3EF",
   "beige-30": "#EAE4DE",
@@ -1538,7 +1534,6 @@ const I = /* @__PURE__ */ N(Z), Q = (o) => {
   "yellow-90": "#423500"
 }, P = (o) => ({
   ...o,
-  overlay: "rgba(0, 0, 0, 0.55)",
   "primary-10": o["yellow-10"],
   "primary-20": o["yellow-20"],
   "primary-30": o["yellow-30"],
@@ -1553,172 +1548,21 @@ const I = /* @__PURE__ */ N(Z), Q = (o) => {
   "secondary-orange": o["red-orange-40"],
   "secondary-pink": o["pink-40"],
   "secondary-teal": o["teal-40"],
-  "secondary-violet": o["violet-40"]
-}), p = P(Pr), jr = Object.keys(p).reduce((o, r) => {
+  "secondary-violet": o["violet-40"],
+  overlay: "rgba(0, 0, 0, 0.55)"
+}), p = P(Ur), Pr = Object.keys(p).reduce((o, r) => {
   if (r.startsWith("secondary-") || r === "overlay") return o;
   const e = 100 - Number(r.slice(-2)), i = r.slice(0, r.length - 2);
   return {
     ...o,
     [r]: p[`${i}${e}`]
   };
-}, {}), Mr = {
+}, {}), jr = {
   ...p,
-  ...P(jr)
+  ...P(Pr)
 }, ue = {
-  colors: Mr
-}, Nr = (o) => {
-  const { borderWidths: r, colors: e, focus: i, fontSizes: n, fontWeights: l, radii: d, space: a, toRem: s } = o;
-  return {
-    checkableField: {
-      checked: {
-        color: "neutral-90"
-        // not hex color, only color from browser because is on a content svg
-      },
-      disabled: {
-        opacity: 0.4
-      }
-    },
-    checkablelabel: {
-      checked: {
-        "-webkit-text-stroke": "0.04em",
-        color: e["neutral-90"]
-      },
-      default: {}
-    },
-    default: {
-      backgroundColor: e["neutral-10"],
-      borderColor: e["neutral-30"],
-      borderRadius: d.md,
-      borderStyle: "solid",
-      borderWidth: r.sm,
-      color: e["neutral-90"],
-      fontSize: n.sm,
-      fontWeight: l.regular,
-      /* Can't use 16 because that's a valid line-height value (16em) */
-      lineHeight: "1rem",
-      outline: "none"
-    },
-    disabled: {
-      backgroundColor: e["beige-40"],
-      color: e["beige-70"],
-      cursor: "not-allowed"
-    },
-    fieldset: {
-      "border-width": "0"
-    },
-    focused: {
-      danger: { ...i(e["red-30"]) },
-      default: {
-        ...i(e["primary-20"]),
-        borderColor: e["primary-40"]
-      },
-      success: { ...i(e["green-30"]) },
-      warning: { ...i(e["orange-20"]) }
-    },
-    hover: {
-      default: {
-        borderColor: e["neutral-40"]
-      },
-      transparency: {
-        borderColor: e["neutral-20"]
-      }
-    },
-    iconPlacement: {
-      lg: {
-        left: s(12),
-        right: s(12)
-      },
-      md: {
-        left: s(12),
-        right: s(12)
-      },
-      sm: {
-        left: s(12),
-        right: s(12)
-      },
-      xs: {
-        left: s(8),
-        right: s(8)
-      }
-    },
-    placeholder: {
-      color: e["neutral-50"]
-    },
-    select: {
-      default: {
-        borderRadius: d.md,
-        maxHeight: s(155)
-      },
-      disabled: {
-        color: e["beige-60"],
-        cursor: "not-allowed"
-      },
-      existing: {
-        color: e["beige-40"],
-        cursor: "not-allowed"
-      },
-      highlighted: {
-        backgroundColor: e["beige-20"],
-        cursor: "default"
-      },
-      selected: {
-        color: e["neutral-90"],
-        fontWeight: l.bold
-      },
-      selectedAndHighlighted: {
-        backgroundImage: "linear-gradient(0deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.08) 100%)"
-      }
-    },
-    sizes: {
-      lg: {
-        height: s(48),
-        paddingBottom: a.lg,
-        paddingLeft: a.md,
-        paddingRight: a.md,
-        paddingTop: a.lg
-      },
-      md: {
-        height: s(40),
-        paddingBottom: a.md,
-        paddingLeft: a.md,
-        paddingRight: a.md,
-        paddingTop: a.md
-      },
-      sm: {
-        height: s(32),
-        paddingBottom: a.sm,
-        paddingLeft: a.md,
-        paddingRight: a.md,
-        paddingTop: a.sm
-      },
-      xs: {
-        height: s(24),
-        paddingBottom: a.xs,
-        paddingLeft: a.sm,
-        paddingRight: a.sm,
-        paddingTop: a.xs
-      }
-    },
-    variants: {
-      danger: {
-        borderColor: e["red-70"]
-      },
-      success: {
-        borderColor: e["green-60"]
-      },
-      warning: {
-        borderColor: e["orange-60"]
-      }
-    }
-  };
-}, Kr = ({ colors: o }) => {
-  function r(e = o["primary-40"]) {
-    return {
-      boxShadow: `0 0 0 2px ${e}`
-    };
-  }
-  return r;
-}, Gr = "f19d0de47a5f6f7446d37111f075c0901835bf12", Yr = (o) => ({
+  colors: jr
+}, Mr = "f19d0de47a5f6f7446d37111f075c0901835bf12", Nr = (o) => ({
   "welcome-font": [
     {
       url: `${o.fontsUrl}/welcome-font-regular`,
@@ -1733,36 +1577,64 @@ const I = /* @__PURE__ */ N(Z), Q = (o) => {
       weight: "600"
     },
     {
-      style: "italic",
       url: `${o.fontsUrl}/welcome-font-regular-italic`,
+      style: "italic",
       weight: "400"
     },
     {
-      style: "italic",
       url: `${o.fontsUrl}/welcome-font-medium-italic`,
+      style: "italic",
       weight: "500"
     },
     {
-      style: "italic",
       url: `${o.fontsUrl}/welcome-font-bold-italic`,
+      style: "italic",
       weight: "600"
     }
   ],
   "welcome-icon-font": [
     {
-      display: "block",
-      url: `${o.fontsUrl}/icon-font/${Gr}/welcome-icon-font`
+      url: `${o.fontsUrl}/icon-font/${Mr}/welcome-icon-font`,
+      display: "block"
     }
   ],
   "work-sans": [
     {
+      url: `${o.fontsUrl}/work-sans-variable`,
       isVariable: !0,
       stretch: "75% 125%",
-      url: `${o.fontsUrl}/work-sans-variable`,
       weight: "100 1000"
     }
   ]
-}), Jr = (o) => ({
+}), h = {
+  primary: "ease",
+  secondary: "linear",
+  tertiary: "cubic-bezier(0.41, 0.094, 0.54, 0.07)"
+}, Kr = {
+  slow: `500ms ${h.tertiary}`,
+  medium: `300ms ${h.primary}`,
+  fast: `100ms ${h.secondary}`
+}, Gr = ({ colors: o }) => ({
+  default: S`
+      background-image: linear-gradient(
+        0deg,
+        ${o["primary-40"]},
+        ${o["primary-40"]} 100%
+      );
+      background-repeat: no-repeat;
+      background-size: 100% 50%;
+      background-position-y: calc(200% - 2px);
+      transition:
+        background-position-y 250ms,
+        background-size 250ms,
+        color 250ms;
+    `,
+  hover: S`
+      opacity: 1;
+      background-position-y: 100%;
+      background-size: 100% 100%;
+    `
+}), Yr = (o) => ({
   none: "0",
   sm: o.toRem(2),
   md: o.toRem(4),
@@ -1770,7 +1642,11 @@ const I = /* @__PURE__ */ N(Z), Q = (o) => {
   xl: o.toRem(16),
   xxl: o.toRem(24),
   full: "100%"
-}), Xr = {
+}), Jr = {
+  sm: "1px",
+  md: "2px",
+  lg: "3px"
+}, Xr = {
   xs: 0,
   sm: 480,
   md: 736,
@@ -1779,13 +1655,10 @@ const I = /* @__PURE__ */ N(Z), Q = (o) => {
   xxl: 1440,
   "3xl": 1620,
   "4xl": 1920
-}, Zr = (o) => ({
-  backgroundColor: o.colors["primary-40"],
-  color: o.colors["neutral-90"]
-}), Qr = {
+}, Zr = {
   sm: "1px 2px 4px 0 rgba(0,0,0,0.05)",
   md: "3px 4px 10px 0 rgba(0,0,0,0.07)"
-}, Vr = (o) => ({
+}, Qr = (o) => ({
   xxs: o.toRem(2),
   xs: o.toRem(4),
   sm: o.toRem(8),
@@ -1798,35 +1671,162 @@ const I = /* @__PURE__ */ N(Z), Q = (o) => {
   "5xl": o.toRem(96),
   "6xl": o.toRem(128),
   "7xl": o.toRem(192)
-}), h = {
-  primary: "ease",
-  secondary: "linear",
-  tertiary: "cubic-bezier(0.41, 0.094, 0.54, 0.07)"
-}, re = {
-  fast: `100ms ${h.secondary}`,
-  medium: `300ms ${h.primary}`,
-  slow: `500ms ${h.tertiary}`
-}, ee = ({ colors: o }) => ({
-  default: S`
-      background-image: linear-gradient(
-        0deg,
-        ${o["primary-40"]},
-        ${o["primary-40"]} 100%
-      );
-      background-repeat: no-repeat;
-      background-size: 100% 50%;
-      background-position-y: calc(200% - 2px);
-      transition:
-        background-position-y 250ms,
-        background-size 250ms,
-        color 250ms;
-    `,
-  hover: S`
-      opacity: 1;
-      background-position-y: 100%;
-      background-size: 100% 100%;
-    `
-}), oe = "work-sans", te = 16, ne = "-0.019rem", ie = 1.15, ae = "https://cdn.welcome-ui.com/fonts", le = "welcome-font", de = "welcome-icon-font", be = (o = {}) => {
+}), Vr = (o) => ({
+  backgroundColor: o.colors["primary-40"],
+  color: o.colors["neutral-90"]
+}), re = ({ colors: o }) => {
+  function r(e = o["primary-40"]) {
+    return {
+      boxShadow: `0 0 0 2px ${e}`
+    };
+  }
+  return r;
+}, ee = (o) => {
+  const { borderWidths: r, colors: e, focus: i, fontSizes: n, fontWeights: l, radii: d, space: a, toRem: s } = o;
+  return {
+    default: {
+      color: e["neutral-90"],
+      fontSize: n.sm,
+      /* Can't use 16 because that's a valid line-height value (16em) */
+      lineHeight: "1rem",
+      fontWeight: l.regular,
+      backgroundColor: e["neutral-10"],
+      borderColor: e["neutral-30"],
+      borderWidth: r.sm,
+      borderStyle: "solid",
+      outline: "none",
+      borderRadius: d.md
+    },
+    hover: {
+      default: {
+        borderColor: e["neutral-40"]
+      },
+      transparency: {
+        borderColor: e["neutral-20"]
+      }
+    },
+    variants: {
+      danger: {
+        borderColor: e["red-70"]
+      },
+      success: {
+        borderColor: e["green-60"]
+      },
+      warning: {
+        borderColor: e["orange-60"]
+      }
+    },
+    focused: {
+      default: {
+        ...i(e["primary-20"]),
+        borderColor: e["primary-40"]
+      },
+      danger: { ...i(e["red-30"]) },
+      warning: { ...i(e["orange-20"]) },
+      success: { ...i(e["green-30"]) }
+    },
+    sizes: {
+      xs: {
+        height: s(24),
+        paddingTop: a.xs,
+        paddingRight: a.sm,
+        paddingBottom: a.xs,
+        paddingLeft: a.sm
+      },
+      sm: {
+        height: s(32),
+        paddingTop: a.sm,
+        paddingRight: a.md,
+        paddingBottom: a.sm,
+        paddingLeft: a.md
+      },
+      md: {
+        height: s(40),
+        paddingTop: a.md,
+        paddingRight: a.md,
+        paddingBottom: a.md,
+        paddingLeft: a.md
+      },
+      lg: {
+        height: s(48),
+        paddingTop: a.lg,
+        paddingRight: a.md,
+        paddingBottom: a.lg,
+        paddingLeft: a.md
+      }
+    },
+    iconPlacement: {
+      xs: {
+        left: s(8),
+        right: s(8)
+      },
+      sm: {
+        left: s(12),
+        right: s(12)
+      },
+      md: {
+        left: s(12),
+        right: s(12)
+      },
+      lg: {
+        left: s(12),
+        right: s(12)
+      }
+    },
+    checkableField: {
+      checked: {
+        color: "neutral-90"
+        // not hex color, only color from browser because is on a content svg
+      },
+      disabled: {
+        opacity: 0.4
+      }
+    },
+    disabled: {
+      backgroundColor: e["beige-40"],
+      color: e["beige-70"],
+      cursor: "not-allowed"
+    },
+    placeholder: {
+      color: e["neutral-50"]
+    },
+    checkablelabel: {
+      default: {},
+      checked: {
+        color: e["neutral-90"],
+        "-webkit-text-stroke": "0.04em"
+      }
+    },
+    select: {
+      default: {
+        maxHeight: s(155),
+        borderRadius: d.md
+      },
+      existing: {
+        color: e["beige-40"],
+        cursor: "not-allowed"
+      },
+      highlighted: {
+        backgroundColor: e["beige-20"],
+        cursor: "default"
+      },
+      selectedAndHighlighted: {
+        backgroundImage: "linear-gradient(0deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.08) 100%)"
+      },
+      selected: {
+        color: e["neutral-90"],
+        fontWeight: l.bold
+      },
+      disabled: {
+        color: e["beige-60"],
+        cursor: "not-allowed"
+      }
+    },
+    fieldset: {
+      "border-width": "0"
+    }
+  };
+}, oe = "work-sans", te = 16, ne = "-0.019rem", ie = 1.15, ae = "https://cdn.welcome-ui.com/fonts", le = "welcome-font", de = "welcome-icon-font", be = (o = {}) => {
   const {
     defaultFontFamily: r = oe,
     defaultFontSize: e = te,
@@ -1838,7 +1838,7 @@ const I = /* @__PURE__ */ N(Z), Q = (o) => {
     ...s
   } = o;
   let t = {};
-  return t.transformers = { ...M }, t.toEm = (c) => `${c / e}em`, t.toRem = (c) => `${c / e}rem`, t.toPx = (c) => `${c * e}px`, t.colors = p, t.fontsUrl = l, t.fontFaces = Yr(t), t.fontSizes = $r("rem", t), t.defaultLineHeight = n, t.defaultLetterSpacing = i, t.lineHeights = Sr(t), t.fontWeights = Dr, t.letterSpacings = Tr(t), t.fonts = Ar(r, d, a), t.borderWidths = Ur, t.screens = Xr, t.space = Vr(t), t.inset = t.space, t.radii = Jr(t), t.transitions = re, t.timingFunction = h, t.shadows = Qr, t = I(t, s), t.selection = Zr(t), t.underline = ee(t), t.focus = Kr(t), t.textsFontWeights = Rr(t), t.textsFontFamily = _r(t), t.textsFontColors = Br(t), t.textsTextTransform = zr(), t.texts = U(t), t.defaultFields = Nr(t), t.icons = gr(t), t.accordions = Q(t), t.alerts = V(t), t.avatars = rr(t), t.badges = er(t), t.breadcrumbs = or(t), t.buttons = tr(t), t.cards = nr(t), t.checkboxes = ir(t), t.dateTimePickerCommon = ar(t), t.drawers = lr(t), t.dropdownMenu = dr(t), t.fileDrops = sr(t), t.hints = cr(t), t.labels = ur(t), t.links = br(t), t.loaders = mr(t), t.modals = hr(t), t.paginations = pr(t), t.popovers = fr(t), t.radios = xr(t), t.radiosTab = Cr(t), t.sliders = yr(t), t.swipers = kr(t), t.tables = Fr(t), t.tabs = vr(t), t.tags = wr(t), t.textareas = Wr(t), t.toasts = Er(t), t.toggles = Hr(t), t.tooltips = qr(t), t.variantIcon = Or(t), t.states = u.states, t.durations = u.durations, t.gridTemplateColumns = u.gridTemplateColumns, t.gridTemplateRows = u.gridTemplateRows, t.ringWidths = u.ringWidths, t.borders = u.borders, t.transitionProperties = u.transitionProperties, t.timingFunctions = u.timingFunctions, t.animations = u.animations, t.xstyled = u.xstyled, t = I(t, s), t;
+  return t.transformers = { ...M }, t.toEm = (c) => `${c / e}em`, t.toRem = (c) => `${c / e}rem`, t.toPx = (c) => `${c * e}px`, t.colors = p, t.fontsUrl = l, t.fontFaces = Nr(t), t.fontSizes = $r("rem", t), t.defaultLineHeight = n, t.defaultLetterSpacing = i, t.lineHeights = Sr(t), t.fontWeights = Dr, t.letterSpacings = Tr(t), t.fonts = Ar(r, d, a), t.borderWidths = Jr, t.screens = Xr, t.space = Qr(t), t.inset = t.space, t.radii = Yr(t), t.transitions = Kr, t.timingFunction = h, t.shadows = Zr, t = I(t, s), t.selection = Vr(t), t.underline = Gr(t), t.focus = re(t), t.textsFontWeights = Rr(t), t.textsFontFamily = _r(t), t.textsFontColors = Br(t), t.textsTextTransform = zr(), t.texts = U(t), t.defaultFields = ee(t), t.icons = mr(t), t.accordions = Q(t), t.alerts = V(t), t.avatars = rr(t), t.badges = er(t), t.breadcrumbs = or(t), t.buttons = tr(t), t.cards = nr(t), t.checkboxes = ar(t), t.dateTimePickerCommon = ir(t), t.drawers = lr(t), t.dropdownMenu = dr(t), t.fileDrops = sr(t), t.hints = cr(t), t.labels = gr(t), t.links = ur(t), t.loaders = br(t), t.modals = hr(t), t.paginations = pr(t), t.popovers = fr(t), t.radios = xr(t), t.radiosTab = Cr(t), t.sliders = yr(t), t.swipers = kr(t), t.tables = Fr(t), t.tabs = vr(t), t.tags = wr(t), t.textareas = Wr(t), t.toasts = Er(t), t.toggles = Hr(t), t.tooltips = qr(t), t.variantIcon = Or(t), t.states = u.states, t.durations = u.durations, t.gridTemplateColumns = u.gridTemplateColumns, t.gridTemplateRows = u.gridTemplateRows, t.ringWidths = u.ringWidths, t.borders = u.borders, t.transitionProperties = u.transitionProperties, t.timingFunctions = u.timingFunctions, t.animations = u.animations, t.xstyled = u.xstyled, t = I(t, s), t;
 };
 export {
   be as createTheme,