@juspay/blend-design-system 0.0.37-beta.3 → 0.0.37-beta.4

package/dist/{node-CRWdZOVN.js → node-C2uf3sNA.js}

@@ -1,4 +1,3 @@
-var h = /* @__PURE__ */ ((r) => (r.LIGHT = "light", r.DARK = "dark", r))(h || {});
 const L = {
   xs: "0px 1px 1px 0px rgba(5, 5, 6, 0.04)",
   sm: "0px 2px 3px 0px rgba(5, 5, 6, 0.05)",
@@ -266,7 +265,7 @@ const L = {
   200: "200px",
   350: "350px",
   auto: "auto"
-}, C = {
+}, a = {
   gray: {
     0: "#FFFFFF",
     25: "#FCFCFD",
@@ -362,7 +361,7 @@ const L = {
     900: "#733E0A",
     950: "#432004"
   }
-}, a = {
+}, C = {
   0: 0,
   10: 10,
   99: 99,
@@ -372,15 +371,17 @@ const L = {
   1e3: 1e3,
   1100: 1100,
   1200: 1200
-}, Xr = {
+}, _r = {
   shadows: L,
   border: N,
   font: H,
   opacity: D,
   unit: I,
-  colors: C,
-  zIndex: a
-}, _r = (r) => ({
+  colors: a,
+  zIndex: C
+};
+var h = /* @__PURE__ */ ((r) => (r.LIGHT = "light", r.DARK = "dark", r))(h || {});
+const Pr = (r) => ({
   // Small breakpoint (mobile)
   sm: {
     // Base properties
@@ -549,7 +550,212 @@ const L = {
       gap: r.unit[16]
     }
   }
-}), A = (r) => ({
+}), Vr = (r) => ({
+  sm: {
+    // Base sidebar properties
+    maxWidth: {
+      withLeftPanel: "300px",
+      withoutLeftPanel: "250px",
+      iconOnly: r.unit[52]
+    },
+    // State-dependent base properties
+    backgroundColor: r.colors.gray[25],
+    borderRight: `1px solid ${r.colors.gray[200]}`,
+    // Left Panel section (tenant switching panel)
+    leftPanel: {
+      width: "52px",
+      backgroundColor: r.colors.gray[25],
+      borderRight: `1px solid ${r.colors.gray[200]}`,
+      padding: {
+        x: r.unit[10],
+        y: r.unit[10]
+      },
+      gap: r.unit[16],
+      // Tenant selection items
+      item: {
+        width: r.unit[32],
+        borderRadius: r.border.radius[4],
+        // State-based tenant item styling
+        border: {
+          default: `1px solid ${r.colors.gray[150]}`,
+          hover: `1px solid ${r.colors.gray[200]}`,
+          active: `1px solid ${r.colors.primary[500]}`
+        },
+        backgroundColor: {
+          default: "transparent",
+          hover: r.colors.gray[50],
+          active: "transparent"
+        }
+      }
+    },
+    // Header section (contains toggle button and top content)
+    header: {
+      backgroundColor: r.colors.gray[25],
+      padding: {
+        x: r.unit[8],
+        y: r.unit[12.5]
+      },
+      gap: r.unit[12],
+      borderBottom: `1px solid ${r.colors.gray[200]}`,
+      // Toggle button for expand/collapse
+      toggleButton: {
+        backgroundColor: {
+          default: "transparent",
+          hover: r.colors.gray[100],
+          active: r.colors.gray[100]
+        },
+        width: r.unit[16]
+      }
+    },
+    directory: {
+      gap: r.unit[24],
+      paddingX: r.unit[12],
+      paddingY: r.unit[12]
+    },
+    // Footer section (bottom actions and info)
+    footer: {
+      backgroundColor: r.colors.gray[25],
+      padding: {
+        x: r.unit[8],
+        y: r.unit[12]
+      },
+      borderTop: `1px solid ${r.colors.gray[200]}`
+    }
+  },
+  lg: {
+    // Base sidebar properties
+    maxWidth: {
+      withLeftPanel: "320px",
+      withoutLeftPanel: "270px",
+      iconOnly: r.unit[52]
+    },
+    // State-dependent base properties
+    backgroundColor: r.colors.gray[25],
+    borderRight: `1px solid ${r.colors.gray[200]}`,
+    // Left Panel section (tenant switching panel)
+    leftPanel: {
+      width: "52px",
+      backgroundColor: r.colors.gray[25],
+      borderRight: `1px solid ${r.colors.gray[200]}`,
+      padding: {
+        x: r.unit[12],
+        y: r.unit[12]
+      },
+      gap: r.unit[16],
+      // Tenant selection items
+      item: {
+        width: r.unit[32],
+        borderRadius: r.border.radius[6],
+        // State-based tenant item styling
+        border: {
+          default: `1px solid ${r.colors.gray[150]}`,
+          hover: `1px solid ${r.colors.gray[200]}`,
+          active: `1px solid ${r.colors.primary[500]}`
+        },
+        backgroundColor: {
+          default: "transparent",
+          hover: r.colors.gray[50],
+          active: "transparent"
+        }
+      }
+    },
+    // Header section (contains toggle button and top content)
+    header: {
+      backgroundColor: r.colors.gray[25],
+      padding: {
+        x: r.unit[12],
+        y: r.unit[6]
+      },
+      gap: r.unit[16],
+      borderBottom: `1px solid ${r.colors.gray[200]}`,
+      // Toggle button for expand/collapse
+      toggleButton: {
+        backgroundColor: {
+          default: "transparent",
+          hover: r.colors.gray[100],
+          active: r.colors.gray[100]
+        },
+        width: r.unit[16]
+      }
+    },
+    directory: {
+      gap: r.unit[24],
+      paddingX: r.unit[12],
+      paddingY: r.unit[12]
+    },
+    // Footer section (bottom actions and info)
+    footer: {
+      backgroundColor: r.colors.gray[25],
+      padding: {
+        x: r.unit[12],
+        y: r.unit[16]
+      },
+      borderTop: `1px solid ${r.colors.gray[200]}`
+    }
+  }
+}), qr = (r) => {
+  const c = {
+    backgroundColor: r.colors.gray[0],
+    drawer: {
+      borderRadius: r.border.radius[24],
+      borderTop: `1px solid ${r.colors.gray[200]}`
+    },
+    padding: {
+      x: r.unit[24],
+      y: r.unit[4]
+    },
+    gap: r.unit[12],
+    row: {
+      padding: {
+        x: r.unit[0],
+        y: r.unit[12]
+      },
+      gap: r.unit[10],
+      item: {
+        width: r.unit[56],
+        height: r.unit[48],
+        borderRadius: r.border.radius[24],
+        gap: r.unit[4],
+        backgroundColor: {
+          default: "transparent",
+          active: "transparent"
+        },
+        color: {
+          default: r.colors.gray[400],
+          active: r.colors.gray[800]
+        },
+        fontWeight: r.font.weight[500],
+        icon: {
+          width: r.unit[20],
+          height: r.unit[20],
+          borderRadius: r.border.radius[12],
+          transition: "color 0.2s ease"
+        },
+        text: {
+          fontSize: r.font.size.body.sm.fontSize,
+          fontWeight: r.font.weight[400],
+          textAlign: "center"
+        }
+      },
+      primaryAction: {
+        width: r.unit[48],
+        height: r.unit[48],
+        borderRadius: r.border.radius[28],
+        background: `linear-gradient(135deg, ${r.colors.primary[400]} 0%, ${r.colors.primary[600]} 100%)`,
+        boxShadow: r.shadows["2xl"],
+        color: r.colors.gray[0],
+        icon: {
+          width: "24px",
+          height: "24px"
+        }
+      }
+    }
+  };
+  return {
+    sm: c,
+    lg: c
+  };
+}, A = (r) => ({
   sm: {
     gap: r.unit[6],
     // Pattern: backgroundColor.[variant].[subType].[state]
@@ -3433,869 +3639,175 @@ const L = {
       }
     }
   }
-}), Pr = (r, c = h.LIGHT) => c === h.DARK || c === "dark" ? W(r) : A(r);
-var G = /* @__PURE__ */ ((r) => (r.START = "start", r.CENTER = "center", r.END = "end", r))(G || {}), B = /* @__PURE__ */ ((r) => (r.TOP = "top", r.LEFT = "left", r.RIGHT = "right", r.BOTTOM = "bottom", r))(B || {}), m = /* @__PURE__ */ ((r) => (r.DEFAULT = "default", r.ACTION = "action", r))(m || {}), x = /* @__PURE__ */ ((r) => (r.PRIMARY = "primary", r.DANGER = "danger", r))(x || {});
-const M = (r) => ({
+}), Kr = (r, c = h.LIGHT) => c === h.DARK || c === "dark" ? W(r) : A(r), G = (r) => ({
   sm: {
-    backgroundColor: r.colors.gray[0],
-    border: `1px solid ${r.colors.gray[200]}`,
-    borderRadius: r.unit[8],
-    boxShadow: r.shadows.sm,
-    zIndex: r.zIndex[101],
-    minWidth: 200,
-    maxWidth: 280,
-    paddingTop: r.unit[6],
-    paddingRight: r.unit[6],
-    paddingBottom: r.unit[6],
-    paddingLeft: r.unit[6],
-    searchIcon: {
-      width: r.unit[16]
-    },
-    group: {
-      label: {
-        fontSize: r.font.size.body.sm.fontSize,
-        fontWeight: r.font.weight[400],
-        lineHeight: r.font.lineHeight[14],
-        color: r.colors.gray[400],
-        paddingTop: r.unit[6],
-        paddingRight: r.unit[8],
-        paddingBottom: r.unit[6],
-        paddingLeft: r.unit[8],
-        marginTop: r.unit[0],
-        marginRight: r.unit[6],
-        marginBottom: r.unit[0],
-        marginLeft: r.unit[6]
+    gap: r.unit[6],
+    backgroundColor: {
+      noFill: {
+        neutral: "transparent",
+        primary: "transparent",
+        success: "transparent",
+        error: "transparent",
+        warning: "transparent",
+        purple: "transparent"
       },
-      item: {
-        paddingTop: r.unit[8],
-        paddingRight: r.unit[8],
-        paddingBottom: r.unit[8],
-        paddingLeft: r.unit[8],
-        marginTop: r.unit[0],
-        marginRight: r.unit[4],
-        marginBottom: r.unit[0],
-        marginLeft: r.unit[4],
-        borderRadius: r.unit[4],
-        gap: r.unit[4],
-        backgroundColor: {
-          [m.DEFAULT]: {
-            default: r.colors.gray[0],
-            hover: r.colors.gray[50],
-            active: r.colors.gray[50],
-            focus: r.colors.gray[50],
-            focusVisible: r.colors.gray[50],
-            disabled: r.colors.gray[0],
-            selected: r.colors.gray[0]
-          },
-          [m.ACTION]: {
-            [x.PRIMARY]: {
-              default: r.colors.primary[50],
-              hover: r.colors.primary[100],
-              active: r.colors.primary[50],
-              focus: r.colors.primary[100],
-              focusVisible: r.colors.primary[100],
-              disabled: r.colors.gray[0],
-              selected: r.colors.primary[50]
-            },
-            [x.DANGER]: {
-              default: r.colors.red[50],
-              hover: r.colors.red[100],
-              active: r.colors.red[100],
-              focus: r.colors.red[100],
-              focusVisible: r.colors.red[100],
-              disabled: r.colors.gray[0],
-              selected: r.colors.red[50]
-            }
-          }
-        },
-        text: {
-          fontSize: r.font.size.body.md.fontSize,
-          fontWeight: r.font.weight[500],
-          lineHeight: r.font.lineHeight[16],
-          color: {
-            [m.DEFAULT]: {
-              default: r.colors.gray[600],
-              hover: r.colors.gray[600],
-              active: r.colors.gray[600],
-              focus: r.colors.gray[600],
-              focusVisible: r.colors.gray[600],
-              disabled: r.colors.gray[400],
-              selected: r.colors.gray[600]
-            },
-            [m.ACTION]: {
-              [x.PRIMARY]: {
-                default: r.colors.primary[600],
-                hover: r.colors.primary[600],
-                active: r.colors.primary[600],
-                focus: r.colors.primary[600],
-                focusVisible: r.colors.primary[600],
-                disabled: r.colors.gray[400],
-                selected: r.colors.primary[600]
-              },
-              [x.DANGER]: {
-                default: r.colors.red[600],
-                hover: r.colors.red[600],
-                active: r.colors.red[600],
-                focus: r.colors.red[600],
-                focusVisible: r.colors.red[600],
-                disabled: r.colors.red[400],
-                selected: r.colors.red[600]
-              }
-            }
-          },
-          subText: {
-            fontSize: r.font.size.body.sm.fontSize,
-            fontWeight: r.font.weight[400],
-            lineHeight: r.font.lineHeight[14],
-            color: {
-              [m.DEFAULT]: {
-                default: r.colors.gray[400],
-                hover: r.colors.gray[400],
-                active: r.colors.gray[400],
-                focus: r.colors.gray[400],
-                focusVisible: r.colors.gray[400],
-                disabled: r.colors.gray[400],
-                selected: r.colors.gray[400]
-              },
-              [m.ACTION]: {
-                [x.PRIMARY]: {
-                  default: r.colors.primary[400],
-                  hover: r.colors.primary[400],
-                  active: r.colors.primary[400],
-                  focus: r.colors.primary[400],
-                  focusVisible: r.colors.primary[400],
-                  disabled: r.colors.gray[400],
-                  selected: r.colors.primary[400]
-                },
-                [x.DANGER]: {
-                  default: r.colors.red[400],
-                  hover: r.colors.red[400],
-                  active: r.colors.red[400],
-                  focus: r.colors.red[400],
-                  focusVisible: r.colors.red[400],
-                  disabled: r.colors.red[400],
-                  selected: r.colors.red[400]
-                }
-              }
-            }
-          },
-          leftSlot: {
-            maxWidth: r.unit[16],
-            maxHeight: r.unit[16]
-          },
-          rightChevron: {
-            color: r.colors.gray[500],
-            width: r.unit[16]
-          }
-        }
-      }
-    },
-    separator: {
-      color: r.colors.gray[200],
-      height: r.unit[1],
-      marginTop: r.unit[6],
-      marginRight: r.unit[0],
-      marginBottom: r.unit[6],
-      marginLeft: r.unit[0]
-    }
-  },
-  lg: {
-    backgroundColor: r.colors.gray[0],
-    border: `1px solid ${r.colors.gray[200]}`,
-    borderRadius: r.unit[8],
-    boxShadow: r.shadows.sm,
-    zIndex: r.zIndex[101],
-    minWidth: 200,
-    maxWidth: 280,
-    paddingTop: r.unit[6],
-    paddingRight: r.unit[6],
-    paddingBottom: r.unit[6],
-    paddingLeft: r.unit[6],
-    searchIcon: {
-      width: r.unit[16]
-    },
-    group: {
-      label: {
-        fontSize: r.font.size.body.sm.fontSize,
-        fontWeight: r.font.weight[400],
-        lineHeight: r.font.lineHeight[14],
-        color: r.colors.gray[400],
-        paddingTop: r.unit[6],
-        paddingRight: r.unit[8],
-        paddingBottom: r.unit[6],
-        paddingLeft: r.unit[8],
-        marginTop: r.unit[0],
-        marginRight: r.unit[6],
-        marginBottom: r.unit[0],
-        marginLeft: r.unit[6]
-      },
-      item: {
-        paddingTop: r.unit[8],
-        paddingRight: r.unit[8],
-        paddingBottom: r.unit[8],
-        paddingLeft: r.unit[8],
-        marginTop: r.unit[0],
-        marginRight: r.unit[4],
-        marginBottom: r.unit[0],
-        marginLeft: r.unit[4],
-        borderRadius: r.unit[4],
-        gap: r.unit[4],
-        backgroundColor: {
-          [m.DEFAULT]: {
-            default: r.colors.gray[0],
-            hover: r.colors.gray[50],
-            active: r.colors.gray[50],
-            focus: r.colors.gray[50],
-            focusVisible: r.colors.gray[50],
-            disabled: r.colors.gray[0],
-            selected: r.colors.gray[0]
-          },
-          [m.ACTION]: {
-            [x.PRIMARY]: {
-              default: r.colors.primary[50],
-              hover: r.colors.primary[100],
-              active: r.colors.primary[50],
-              focus: r.colors.primary[100],
-              focusVisible: r.colors.primary[100],
-              disabled: r.colors.gray[0],
-              selected: r.colors.primary[50]
-            },
-            [x.DANGER]: {
-              default: r.colors.red[50],
-              hover: r.colors.red[100],
-              active: r.colors.red[100],
-              focus: r.colors.red[100],
-              focusVisible: r.colors.red[100],
-              disabled: r.colors.gray[0],
-              selected: r.colors.red[50]
-            }
-          }
-        },
-        text: {
-          fontSize: r.font.size.body.md.fontSize,
-          fontWeight: r.font.weight[500],
-          lineHeight: r.font.lineHeight[16],
-          color: {
-            [m.DEFAULT]: {
-              default: r.colors.gray[600],
-              hover: r.colors.gray[600],
-              active: r.colors.gray[600],
-              focus: r.colors.gray[600],
-              focusVisible: r.colors.gray[600],
-              disabled: r.colors.gray[400],
-              selected: r.colors.gray[600]
-            },
-            [m.ACTION]: {
-              [x.PRIMARY]: {
-                default: r.colors.primary[600],
-                hover: r.colors.primary[600],
-                active: r.colors.primary[600],
-                focus: r.colors.primary[600],
-                focusVisible: r.colors.primary[600],
-                disabled: r.colors.gray[400],
-                selected: r.colors.primary[600]
-              },
-              [x.DANGER]: {
-                default: r.colors.red[600],
-                hover: r.colors.red[600],
-                active: r.colors.red[600],
-                focus: r.colors.red[600],
-                focusVisible: r.colors.red[600],
-                disabled: r.colors.red[400],
-                selected: r.colors.red[600]
-              }
-            }
-          },
-          subText: {
-            fontSize: r.font.size.body.sm.fontSize,
-            fontWeight: r.font.weight[400],
-            lineHeight: r.font.lineHeight[14],
-            color: {
-              [m.DEFAULT]: {
-                default: r.colors.gray[400],
-                hover: r.colors.gray[400],
-                active: r.colors.gray[400],
-                focus: r.colors.gray[400],
-                focusVisible: r.colors.gray[400],
-                disabled: r.colors.gray[400],
-                selected: r.colors.gray[400]
-              },
-              [m.ACTION]: {
-                [x.PRIMARY]: {
-                  default: r.colors.primary[400],
-                  hover: r.colors.primary[400],
-                  active: r.colors.primary[400],
-                  focus: r.colors.primary[400],
-                  focusVisible: r.colors.primary[400],
-                  disabled: r.colors.gray[400],
-                  selected: r.colors.primary[400]
-                },
-                [x.DANGER]: {
-                  default: r.colors.red[400],
-                  hover: r.colors.red[400],
-                  active: r.colors.red[400],
-                  focus: r.colors.red[400],
-                  focusVisible: r.colors.red[400],
-                  disabled: r.colors.red[400],
-                  selected: r.colors.red[400]
-                }
-              }
-            }
-          },
-          leftSlot: {
-            maxWidth: r.unit[16],
-            maxHeight: r.unit[16]
-          },
-          rightChevron: {
-            color: r.colors.gray[500],
-            width: r.unit[16]
-          }
-        }
-      }
-    },
-    separator: {
-      color: r.colors.gray[200],
-      height: r.unit[1],
-      marginTop: r.unit[6],
-      marginRight: r.unit[0],
-      marginBottom: r.unit[6],
-      marginLeft: r.unit[0]
-    }
-  }
-}), F = (r) => ({
-  sm: {
-    backgroundColor: r.colors.gray[900],
-    border: `1px solid ${r.colors.gray[700]}`,
-    borderRadius: r.unit[8],
-    boxShadow: r.shadows.md,
-    zIndex: r.zIndex[101],
-    minWidth: 200,
-    maxWidth: 280,
-    paddingTop: r.unit[6],
-    paddingRight: r.unit[6],
-    paddingBottom: r.unit[6],
-    paddingLeft: r.unit[6],
-    searchIcon: {
-      width: r.unit[16]
-    },
-    group: {
-      label: {
-        fontSize: r.font.size.body.sm.fontSize,
-        fontWeight: r.font.weight[400],
-        lineHeight: r.font.lineHeight[14],
-        color: r.colors.gray[500],
-        paddingTop: r.unit[6],
-        paddingRight: r.unit[8],
-        paddingBottom: r.unit[6],
-        paddingLeft: r.unit[8],
-        marginTop: r.unit[0],
-        marginRight: r.unit[6],
-        marginBottom: r.unit[0],
-        marginLeft: r.unit[6]
-      },
-      item: {
-        paddingTop: r.unit[8],
-        paddingRight: r.unit[8],
-        paddingBottom: r.unit[8],
-        paddingLeft: r.unit[8],
-        marginTop: r.unit[0],
-        marginRight: r.unit[4],
-        marginBottom: r.unit[0],
-        marginLeft: r.unit[4],
-        borderRadius: r.unit[4],
-        gap: r.unit[4],
-        backgroundColor: {
-          [m.DEFAULT]: {
-            default: r.colors.gray[900],
-            hover: r.colors.gray[800],
-            active: r.colors.gray[800],
-            focus: r.colors.gray[800],
-            focusVisible: r.colors.gray[800],
-            disabled: r.colors.gray[900],
-            selected: r.colors.gray[900]
-          },
-          [m.ACTION]: {
-            [x.PRIMARY]: {
-              default: r.colors.primary[950],
-              hover: r.colors.primary[900],
-              active: r.colors.primary[900],
-              focus: r.colors.primary[900],
-              focusVisible: r.colors.primary[900],
-              disabled: r.colors.gray[900],
-              selected: r.colors.primary[950]
-            },
-            [x.DANGER]: {
-              default: r.colors.red[950],
-              hover: r.colors.red[900],
-              active: r.colors.red[900],
-              focus: r.colors.red[900],
-              focusVisible: r.colors.red[900],
-              disabled: r.colors.gray[900],
-              selected: r.colors.red[950]
-            }
-          }
-        },
-        text: {
-          fontSize: r.font.size.body.md.fontSize,
-          fontWeight: r.font.weight[500],
-          lineHeight: r.font.lineHeight[16],
-          color: {
-            [m.DEFAULT]: {
-              default: r.colors.gray[200],
-              hover: r.colors.gray[200],
-              active: r.colors.gray[200],
-              focus: r.colors.gray[200],
-              focusVisible: r.colors.gray[200],
-              disabled: r.colors.gray[500],
-              selected: r.colors.gray[200]
-            },
-            [m.ACTION]: {
-              [x.PRIMARY]: {
-                default: r.colors.primary[300],
-                hover: r.colors.primary[300],
-                active: r.colors.primary[300],
-                focus: r.colors.primary[300],
-                focusVisible: r.colors.primary[300],
-                disabled: r.colors.gray[500],
-                selected: r.colors.primary[300]
-              },
-              [x.DANGER]: {
-                default: r.colors.red[400],
-                hover: r.colors.red[400],
-                active: r.colors.red[400],
-                focus: r.colors.red[400],
-                focusVisible: r.colors.red[400],
-                disabled: r.colors.red[600],
-                selected: r.colors.red[400]
-              }
-            }
-          },
-          subText: {
-            fontSize: r.font.size.body.sm.fontSize,
-            fontWeight: r.font.weight[400],
-            lineHeight: r.font.lineHeight[14],
-            color: {
-              [m.DEFAULT]: {
-                default: r.colors.gray[400],
-                hover: r.colors.gray[400],
-                active: r.colors.gray[400],
-                focus: r.colors.gray[400],
-                focusVisible: r.colors.gray[400],
-                disabled: r.colors.gray[500],
-                selected: r.colors.gray[400]
-              },
-              [m.ACTION]: {
-                [x.PRIMARY]: {
-                  default: r.colors.primary[400],
-                  hover: r.colors.primary[400],
-                  active: r.colors.primary[400],
-                  focus: r.colors.primary[400],
-                  focusVisible: r.colors.primary[400],
-                  disabled: r.colors.gray[500],
-                  selected: r.colors.primary[400]
-                },
-                [x.DANGER]: {
-                  default: r.colors.red[400],
-                  hover: r.colors.red[400],
-                  active: r.colors.red[400],
-                  focus: r.colors.red[400],
-                  focusVisible: r.colors.red[400],
-                  disabled: r.colors.red[500],
-                  selected: r.colors.red[400]
-                }
-              }
-            }
-          },
-          leftSlot: {
-            maxWidth: r.unit[16],
-            maxHeight: r.unit[16]
-          },
-          rightChevron: {
-            color: r.colors.gray[500],
-            width: r.unit[16]
-          }
-        }
-      }
-    },
-    separator: {
-      color: r.colors.gray[700],
-      height: r.unit[1],
-      marginTop: r.unit[6],
-      marginRight: r.unit[0],
-      marginBottom: r.unit[6],
-      marginLeft: r.unit[0]
-    }
-  },
-  lg: {
-    backgroundColor: r.colors.gray[900],
-    border: `1px solid ${r.colors.gray[700]}`,
-    borderRadius: r.unit[8],
-    boxShadow: r.shadows.md,
-    zIndex: r.zIndex[101],
-    minWidth: 200,
-    maxWidth: 280,
-    paddingTop: r.unit[6],
-    paddingRight: r.unit[6],
-    paddingBottom: r.unit[6],
-    paddingLeft: r.unit[6],
-    searchIcon: {
-      width: r.unit[16]
-    },
-    group: {
-      label: {
-        fontSize: r.font.size.body.sm.fontSize,
-        fontWeight: r.font.weight[400],
-        lineHeight: r.font.lineHeight[14],
-        color: r.colors.gray[500],
-        paddingTop: r.unit[6],
-        paddingRight: r.unit[8],
-        paddingBottom: r.unit[6],
-        paddingLeft: r.unit[8],
-        marginTop: r.unit[0],
-        marginRight: r.unit[6],
-        marginBottom: r.unit[0],
-        marginLeft: r.unit[6]
-      },
-      item: {
-        paddingTop: r.unit[8],
-        paddingRight: r.unit[8],
-        paddingBottom: r.unit[8],
-        paddingLeft: r.unit[8],
-        marginTop: r.unit[0],
-        marginRight: r.unit[4],
-        marginBottom: r.unit[0],
-        marginLeft: r.unit[4],
-        borderRadius: r.unit[4],
-        gap: r.unit[4],
-        backgroundColor: {
-          [m.DEFAULT]: {
-            default: r.colors.gray[900],
-            hover: r.colors.gray[800],
-            active: r.colors.gray[800],
-            focus: r.colors.gray[800],
-            focusVisible: r.colors.gray[800],
-            disabled: r.colors.gray[900],
-            selected: r.colors.gray[900]
-          },
-          [m.ACTION]: {
-            [x.PRIMARY]: {
-              default: r.colors.primary[950],
-              hover: r.colors.primary[900],
-              active: r.colors.primary[900],
-              focus: r.colors.primary[900],
-              focusVisible: r.colors.primary[900],
-              disabled: r.colors.gray[900],
-              selected: r.colors.primary[950]
-            },
-            [x.DANGER]: {
-              default: r.colors.red[950],
-              hover: r.colors.red[900],
-              active: r.colors.red[900],
-              focus: r.colors.red[900],
-              focusVisible: r.colors.red[900],
-              disabled: r.colors.gray[900],
-              selected: r.colors.red[950]
-            }
-          }
-        },
-        text: {
-          fontSize: r.font.size.body.md.fontSize,
-          fontWeight: r.font.weight[500],
-          lineHeight: r.font.lineHeight[16],
-          color: {
-            [m.DEFAULT]: {
-              default: r.colors.gray[200],
-              hover: r.colors.gray[200],
-              active: r.colors.gray[200],
-              focus: r.colors.gray[200],
-              focusVisible: r.colors.gray[200],
-              disabled: r.colors.gray[500],
-              selected: r.colors.gray[200]
-            },
-            [m.ACTION]: {
-              [x.PRIMARY]: {
-                default: r.colors.primary[300],
-                hover: r.colors.primary[300],
-                active: r.colors.primary[300],
-                focus: r.colors.primary[300],
-                focusVisible: r.colors.primary[300],
-                disabled: r.colors.gray[500],
-                selected: r.colors.primary[300]
-              },
-              [x.DANGER]: {
-                default: r.colors.red[400],
-                hover: r.colors.red[400],
-                active: r.colors.red[400],
-                focus: r.colors.red[400],
-                focusVisible: r.colors.red[400],
-                disabled: r.colors.red[600],
-                selected: r.colors.red[400]
-              }
-            }
-          },
-          subText: {
-            fontSize: r.font.size.body.sm.fontSize,
-            fontWeight: r.font.weight[400],
-            lineHeight: r.font.lineHeight[14],
-            color: {
-              [m.DEFAULT]: {
-                default: r.colors.gray[400],
-                hover: r.colors.gray[400],
-                active: r.colors.gray[400],
-                focus: r.colors.gray[400],
-                focusVisible: r.colors.gray[400],
-                disabled: r.colors.gray[500],
-                selected: r.colors.gray[400]
-              },
-              [m.ACTION]: {
-                [x.PRIMARY]: {
-                  default: r.colors.primary[400],
-                  hover: r.colors.primary[400],
-                  active: r.colors.primary[400],
-                  focus: r.colors.primary[400],
-                  focusVisible: r.colors.primary[400],
-                  disabled: r.colors.gray[500],
-                  selected: r.colors.primary[400]
-                },
-                [x.DANGER]: {
-                  default: r.colors.red[400],
-                  hover: r.colors.red[400],
-                  active: r.colors.red[400],
-                  focus: r.colors.red[400],
-                  focusVisible: r.colors.red[400],
-                  disabled: r.colors.red[500],
-                  selected: r.colors.red[400]
-                }
-              }
-            }
-          },
-          leftSlot: {
-            maxWidth: r.unit[16],
-            maxHeight: r.unit[16]
-          },
-          rightChevron: {
-            color: r.colors.gray[500],
-            width: r.unit[16]
-          }
-        }
-      }
-    },
-    separator: {
-      color: r.colors.gray[700],
-      height: r.unit[1],
-      marginTop: r.unit[6],
-      marginRight: r.unit[0],
-      marginBottom: r.unit[6],
-      marginLeft: r.unit[0]
-    }
-  }
-}), Vr = (r, c = h.LIGHT) => c === h.DARK || c === "dark" ? F(r) : M(r), qr = (r) => ({
-  sm: {
-    // Base sidebar properties
-    maxWidth: {
-      withLeftPanel: "300px",
-      withoutLeftPanel: "250px",
-      iconOnly: r.unit[52]
-    },
-    // State-dependent base properties
-    backgroundColor: r.colors.gray[25],
-    borderRight: `1px solid ${r.colors.gray[200]}`,
-    // Left Panel section (tenant switching panel)
-    leftPanel: {
-      width: "52px",
-      backgroundColor: r.colors.gray[25],
-      borderRight: `1px solid ${r.colors.gray[200]}`,
-      padding: {
-        x: r.unit[10],
-        y: r.unit[10]
-      },
-      gap: r.unit[16],
-      // Tenant selection items
-      item: {
-        width: r.unit[32],
-        borderRadius: r.border.radius[4],
-        // State-based tenant item styling
-        border: {
-          default: `1px solid ${r.colors.gray[150]}`,
-          hover: `1px solid ${r.colors.gray[200]}`,
-          active: `1px solid ${r.colors.primary[500]}`
-        },
-        backgroundColor: {
-          default: "transparent",
-          hover: r.colors.gray[50],
-          active: "transparent"
-        }
+      attentive: {
+        neutral: r.colors.gray[100],
+        primary: r.colors.primary[500],
+        success: r.colors.green[500],
+        error: r.colors.red[500],
+        warning: r.colors.orange[500],
+        purple: r.colors.purple[500]
+      },
+      subtle: {
+        neutral: r.colors.gray[800],
+        primary: r.colors.primary[950],
+        success: r.colors.green[950],
+        error: r.colors.red[950],
+        warning: r.colors.orange[950],
+        purple: r.colors.purple[950]
       }
     },
-    // Header section (contains toggle button and top content)
-    header: {
-      backgroundColor: r.colors.gray[25],
-      padding: {
-        x: r.unit[8],
-        y: r.unit[12.5]
+    borderRadius: {
+      xs: {
+        squarical: r.border.radius[6],
+        rounded: r.border.radius.full
       },
-      gap: r.unit[12],
-      borderBottom: `1px solid ${r.colors.gray[200]}`,
-      // Toggle button for expand/collapse
-      toggleButton: {
-        backgroundColor: {
-          default: "transparent",
-          hover: r.colors.gray[100],
-          active: r.colors.gray[100]
-        },
-        width: r.unit[16]
+      sm: {
+        squarical: r.border.radius[6],
+        rounded: r.border.radius.full
+      },
+      md: {
+        squarical: r.border.radius[6],
+        rounded: r.border.radius.full
+      },
+      lg: {
+        squarical: r.border.radius[8],
+        rounded: r.border.radius.full
       }
     },
-    directory: {
-      gap: r.unit[24],
-      paddingX: r.unit[12],
-      paddingY: r.unit[12]
+    height: {
+      xs: `${r.unit[20]}`,
+      sm: `${r.unit[22]}`,
+      md: `${r.unit[24]}`,
+      lg: `${r.unit[28]}`
     },
-    // Footer section (bottom actions and info)
-    footer: {
-      backgroundColor: r.colors.gray[25],
-      padding: {
-        x: r.unit[8],
-        y: r.unit[12]
+    padding: {
+      top: {
+        xs: `${r.unit[2]}`,
+        sm: `${r.unit[3]}`,
+        md: `${r.unit[4]}`,
+        lg: `${r.unit[6]}`
       },
-      borderTop: `1px solid ${r.colors.gray[200]}`
-    }
-  },
-  lg: {
-    // Base sidebar properties
-    maxWidth: {
-      withLeftPanel: "320px",
-      withoutLeftPanel: "270px",
-      iconOnly: r.unit[52]
-    },
-    // State-dependent base properties
-    backgroundColor: r.colors.gray[25],
-    borderRight: `1px solid ${r.colors.gray[200]}`,
-    // Left Panel section (tenant switching panel)
-    leftPanel: {
-      width: "52px",
-      backgroundColor: r.colors.gray[25],
-      borderRight: `1px solid ${r.colors.gray[200]}`,
-      padding: {
-        x: r.unit[12],
-        y: r.unit[12]
+      right: {
+        xs: `${r.unit[6]}`,
+        sm: `${r.unit[8]}`,
+        md: `${r.unit[10]}`,
+        lg: `${r.unit[12]}`
       },
-      gap: r.unit[16],
-      // Tenant selection items
-      item: {
-        width: r.unit[32],
-        borderRadius: r.border.radius[6],
-        // State-based tenant item styling
-        border: {
-          default: `1px solid ${r.colors.gray[150]}`,
-          hover: `1px solid ${r.colors.gray[200]}`,
-          active: `1px solid ${r.colors.primary[500]}`
-        },
-        backgroundColor: {
-          default: "transparent",
-          hover: r.colors.gray[50],
-          active: "transparent"
-        }
+      bottom: {
+        xs: `${r.unit[2]}`,
+        sm: `${r.unit[3]}`,
+        md: `${r.unit[4]}`,
+        lg: `${r.unit[6]}`
+      },
+      left: {
+        xs: `${r.unit[6]}`,
+        sm: `${r.unit[8]}`,
+        md: `${r.unit[10]}`,
+        lg: `${r.unit[12]}`
       }
     },
-    // Header section (contains toggle button and top content)
-    header: {
-      backgroundColor: r.colors.gray[25],
-      padding: {
-        x: r.unit[12],
-        y: r.unit[6]
+    border: {
+      noFill: {
+        neutral: `1px solid ${r.colors.gray[100]}`,
+        primary: `1px solid ${r.colors.primary[400]}`,
+        success: `1px solid ${r.colors.green[500]}`,
+        error: `1px solid ${r.colors.red[500]}`,
+        warning: `1px solid ${r.colors.orange[400]}`,
+        purple: `1px solid ${r.colors.purple[400]}`
       },
-      gap: r.unit[16],
-      borderBottom: `1px solid ${r.colors.gray[200]}`,
-      // Toggle button for expand/collapse
-      toggleButton: {
-        backgroundColor: {
-          default: "transparent",
-          hover: r.colors.gray[100],
-          active: r.colors.gray[100]
-        },
-        width: r.unit[16]
+      subtle: {
+        neutral: `1px solid ${r.colors.gray[700]}`,
+        primary: `1px solid ${r.colors.primary[800]}`,
+        success: `1px solid ${r.colors.green[800]}`,
+        error: `1px solid ${r.colors.red[800]}`,
+        warning: `1px solid ${r.colors.orange[800]}`,
+        purple: `1px solid ${r.colors.purple[800]}`
+      },
+      attentive: {
+        neutral: `1px solid ${r.colors.gray[100]}`,
+        primary: `1px solid ${r.colors.primary[400]}`,
+        success: `1px solid ${r.colors.green[500]}`,
+        error: `1px solid ${r.colors.red[500]}`,
+        warning: `1px solid ${r.colors.orange[400]}`,
+        purple: `1px solid ${r.colors.purple[400]}`
       }
     },
-    directory: {
-      gap: r.unit[24],
-      paddingX: r.unit[12],
-      paddingY: r.unit[12]
-    },
-    // Footer section (bottom actions and info)
-    footer: {
-      backgroundColor: r.colors.gray[25],
-      padding: {
-        x: r.unit[12],
-        y: r.unit[16]
-      },
-      borderTop: `1px solid ${r.colors.gray[200]}`
-    }
-  }
-}), Kr = (r) => {
-  const c = {
-    backgroundColor: r.colors.gray[0],
-    drawer: {
-      borderRadius: r.border.radius[24],
-      borderTop: `1px solid ${r.colors.gray[200]}`
+    leftSlot: {
+      maxHeight: {
+        xs: `${r.unit[12]}`,
+        sm: `${r.unit[12]}`,
+        md: `${r.unit[12]}`,
+        lg: `${r.unit[12]}`
+      }
     },
-    padding: {
-      x: r.unit[24],
-      y: r.unit[4]
+    rightSlot: {
+      maxHeight: {
+        xs: `${r.unit[12]}`,
+        sm: `${r.unit[12]}`,
+        md: `${r.unit[12]}`,
+        lg: `${r.unit[12]}`
+      }
     },
-    gap: r.unit[12],
-    row: {
-      padding: {
-        x: r.unit[0],
-        y: r.unit[12]
-      },
-      gap: r.unit[10],
-      item: {
-        width: r.unit[56],
-        height: r.unit[48],
-        borderRadius: r.border.radius[24],
-        gap: r.unit[4],
-        backgroundColor: {
-          default: "transparent",
-          active: "transparent"
-        },
-        color: {
-          default: r.colors.gray[400],
-          active: r.colors.gray[800]
+    text: {
+      color: {
+        noFill: {
+          neutral: r.colors.gray[100],
+          primary: r.colors.primary[400],
+          success: r.colors.green[400],
+          error: r.colors.red[400],
+          warning: r.colors.orange[400],
+          purple: r.colors.purple[400]
         },
-        fontWeight: r.font.weight[500],
-        icon: {
-          width: r.unit[20],
-          height: r.unit[20],
-          borderRadius: r.border.radius[12],
-          transition: "color 0.2s ease"
+        attentive: {
+          neutral: r.colors.gray[950],
+          primary: r.colors.gray[0],
+          success: r.colors.gray[0],
+          error: r.colors.gray[0],
+          warning: r.colors.gray[0],
+          purple: r.colors.gray[0]
         },
-        text: {
-          fontSize: r.font.size.body.sm.fontSize,
-          fontWeight: r.font.weight[400],
-          textAlign: "center"
-        }
-      },
-      primaryAction: {
-        width: r.unit[48],
-        height: r.unit[48],
-        borderRadius: r.border.radius[28],
-        background: `linear-gradient(135deg, ${r.colors.primary[400]} 0%, ${r.colors.primary[600]} 100%)`,
-        boxShadow: r.shadows["2xl"],
-        color: r.colors.gray[0],
-        icon: {
-          width: "24px",
-          height: "24px"
+        subtle: {
+          neutral: r.colors.gray[100],
+          primary: r.colors.primary[400],
+          success: r.colors.green[400],
+          error: r.colors.red[400],
+          warning: r.colors.orange[400],
+          purple: r.colors.purple[400]
         }
+      },
+      fontSize: {
+        xs: r.font.fontSize[12],
+        sm: r.font.fontSize[12],
+        md: r.font.fontSize[14],
+        lg: r.font.fontSize[14]
+      },
+      fontWeight: {
+        xs: r.font.weight[600],
+        sm: r.font.weight[600],
+        md: r.font.weight[600],
+        lg: r.font.weight[600]
+      },
+      lineHeight: {
+        xs: r.font.lineHeight[18],
+        sm: r.font.lineHeight[18],
+        md: r.font.lineHeight[20],
+        lg: r.font.lineHeight[20]
       }
     }
-  };
-  return {
-    sm: c,
-    lg: c
-  };
-}, U = (r) => ({
-  sm: {
+  },
+  lg: {
     gap: r.unit[6],
     backgroundColor: {
       noFill: {
@@ -4349,38 +3861,38 @@ const M = (r) => ({
     },
     padding: {
       top: {
-        xs: `${r.unit[2]}`,
-        sm: `${r.unit[3]}`,
-        md: `${r.unit[4]}`,
-        lg: `${r.unit[6]}`
+        xs: `${r.unit[2]} `,
+        sm: `${r.unit[3]} `,
+        md: `${r.unit[4]} `,
+        lg: `${r.unit[6]} `
       },
       right: {
         xs: `${r.unit[6]}`,
-        sm: `${r.unit[8]}`,
+        sm: ` ${r.unit[8]}`,
         md: `${r.unit[10]}`,
         lg: `${r.unit[12]}`
       },
       bottom: {
-        xs: `${r.unit[2]}`,
-        sm: `${r.unit[3]}`,
-        md: `${r.unit[4]}`,
-        lg: `${r.unit[6]}`
+        xs: `${r.unit[2]} `,
+        sm: `${r.unit[3]} `,
+        md: `${r.unit[4]} `,
+        lg: `${r.unit[6]} `
       },
       left: {
-        xs: `${r.unit[6]}`,
-        sm: `${r.unit[8]}`,
-        md: `${r.unit[10]}`,
-        lg: `${r.unit[12]}`
+        xs: ` ${r.unit[6]}`,
+        sm: ` ${r.unit[8]}`,
+        md: ` ${r.unit[10]}`,
+        lg: ` ${r.unit[12]}`
       }
     },
     border: {
       noFill: {
-        neutral: `1px solid ${r.colors.gray[100]}`,
-        primary: `1px solid ${r.colors.primary[400]}`,
+        neutral: `1px solid ${r.colors.gray[700]}`,
+        primary: `1px solid ${r.colors.primary[500]}`,
         success: `1px solid ${r.colors.green[500]}`,
         error: `1px solid ${r.colors.red[500]}`,
-        warning: `1px solid ${r.colors.orange[400]}`,
-        purple: `1px solid ${r.colors.purple[400]}`
+        warning: `1px solid ${r.colors.orange[500]}`,
+        purple: `1px solid ${r.colors.purple[500]}`
       },
       subtle: {
         neutral: `1px solid ${r.colors.gray[700]}`,
@@ -4392,11 +3904,11 @@ const M = (r) => ({
       },
       attentive: {
         neutral: `1px solid ${r.colors.gray[100]}`,
-        primary: `1px solid ${r.colors.primary[400]}`,
+        primary: `1px solid ${r.colors.primary[500]}`,
         success: `1px solid ${r.colors.green[500]}`,
         error: `1px solid ${r.colors.red[500]}`,
-        warning: `1px solid ${r.colors.orange[400]}`,
-        purple: `1px solid ${r.colors.purple[400]}`
+        warning: `1px solid ${r.colors.orange[500]}`,
+        purple: `1px solid ${r.colors.purple[500]}`
       }
     },
     leftSlot: {
@@ -4461,33 +3973,201 @@ const M = (r) => ({
         lg: r.font.lineHeight[20]
       }
     }
+  }
+}), B = (r) => ({
+  sm: {
+    gap: r.unit[6],
+    backgroundColor: {
+      noFill: {
+        neutral: r.colors.gray[0],
+        primary: r.colors.gray[0],
+        success: r.colors.gray[0],
+        error: r.colors.gray[0],
+        warning: r.colors.gray[0],
+        purple: r.colors.gray[0]
+      },
+      attentive: {
+        neutral: r.colors.gray[950],
+        primary: r.colors.primary[600],
+        success: r.colors.green[600],
+        error: r.colors.red[600],
+        warning: r.colors.orange[500],
+        purple: r.colors.purple[500]
+      },
+      subtle: {
+        neutral: r.colors.gray[50],
+        primary: r.colors.primary[50],
+        success: r.colors.green[50],
+        error: r.colors.red[50],
+        warning: r.colors.orange[50],
+        purple: r.colors.purple[50]
+      }
+    },
+    borderRadius: {
+      xs: {
+        squarical: r.border.radius[6],
+        rounded: r.border.radius.full
+      },
+      sm: {
+        squarical: r.border.radius[6],
+        rounded: r.border.radius.full
+      },
+      md: {
+        squarical: r.border.radius[6],
+        rounded: r.border.radius.full
+      },
+      lg: {
+        squarical: r.border.radius[8],
+        rounded: r.border.radius.full
+      }
+    },
+    height: {
+      xs: `${r.unit[20]}`,
+      sm: `${r.unit[22]}`,
+      md: `${r.unit[24]}`,
+      lg: `${r.unit[28]}`
+    },
+    padding: {
+      top: {
+        xs: `${r.unit[2]}`,
+        sm: `${r.unit[3]}`,
+        md: `${r.unit[4]}`,
+        lg: `${r.unit[6]}`
+      },
+      right: {
+        xs: `${r.unit[6]}`,
+        sm: `${r.unit[8]}`,
+        md: `${r.unit[10]}`,
+        lg: `${r.unit[12]}`
+      },
+      bottom: {
+        xs: `${r.unit[2]}`,
+        sm: `${r.unit[3]}`,
+        md: `${r.unit[4]}`,
+        lg: `${r.unit[6]}`
+      },
+      left: {
+        xs: `${r.unit[6]}`,
+        sm: `${r.unit[8]}`,
+        md: `${r.unit[10]}`,
+        lg: `${r.unit[12]}`
+      }
+    },
+    border: {
+      noFill: {
+        neutral: `1px solid ${r.colors.gray[950]}`,
+        primary: `1px solid ${r.colors.primary[600]}`,
+        success: `1px solid ${r.colors.green[600]}`,
+        error: `1px solid ${r.colors.red[600]}`,
+        warning: `1px solid ${r.colors.orange[500]}`,
+        purple: `1px solid ${r.colors.purple[500]}`
+      },
+      subtle: {
+        neutral: `1px solid ${r.colors.gray[200]}`,
+        primary: `1px solid ${r.colors.primary[100]}`,
+        success: `1px solid ${r.colors.green[100]}`,
+        error: `1px solid ${r.colors.red[100]}`,
+        warning: `1px solid ${r.colors.orange[100]}`,
+        purple: `1px solid ${r.colors.purple[100]}`
+      },
+      attentive: {
+        neutral: `1px solid ${r.colors.gray[950]}`,
+        primary: `1px solid ${r.colors.primary[600]}`,
+        success: `1px solid ${r.colors.green[600]}`,
+        error: `1px solid ${r.colors.red[600]}`,
+        warning: `1px solid ${r.colors.orange[500]}`,
+        purple: `1px solid ${r.colors.purple[500]}`
+      }
+    },
+    leftSlot: {
+      maxHeight: {
+        xs: `${r.unit[12]}`,
+        sm: `${r.unit[12]}`,
+        md: `${r.unit[12]}`,
+        lg: `${r.unit[12]}`
+      }
+    },
+    rightSlot: {
+      maxHeight: {
+        xs: `${r.unit[12]}`,
+        sm: `${r.unit[12]}`,
+        md: `${r.unit[12]}`,
+        lg: `${r.unit[12]}`
+      }
+    },
+    text: {
+      color: {
+        noFill: {
+          neutral: r.colors.gray[950],
+          primary: r.colors.primary[800],
+          success: r.colors.green[600],
+          error: r.colors.red[600],
+          warning: r.colors.orange[500],
+          purple: r.colors.purple[500]
+        },
+        attentive: {
+          neutral: r.colors.gray[0],
+          primary: r.colors.gray[0],
+          success: r.colors.gray[0],
+          error: r.colors.gray[0],
+          warning: r.colors.gray[0],
+          purple: r.colors.gray[0]
+        },
+        subtle: {
+          neutral: r.colors.gray[950],
+          primary: r.colors.primary[600],
+          success: r.colors.green[600],
+          error: r.colors.red[600],
+          warning: r.colors.orange[600],
+          purple: r.colors.purple[600]
+        }
+      },
+      fontSize: {
+        xs: r.font.fontSize[12],
+        sm: r.font.fontSize[12],
+        md: r.font.fontSize[14],
+        lg: r.font.fontSize[14]
+      },
+      fontWeight: {
+        xs: r.font.weight[500],
+        sm: r.font.weight[500],
+        md: r.font.weight[500],
+        lg: r.font.weight[500]
+      },
+      lineHeight: {
+        xs: r.font.lineHeight[18],
+        sm: r.font.lineHeight[18],
+        md: r.font.lineHeight[20],
+        lg: r.font.lineHeight[20]
+      }
+    }
   },
   lg: {
     gap: r.unit[6],
     backgroundColor: {
       noFill: {
-        neutral: "transparent",
-        primary: "transparent",
-        success: "transparent",
-        error: "transparent",
-        warning: "transparent",
-        purple: "transparent"
+        neutral: r.colors.gray[0],
+        primary: r.colors.gray[0],
+        success: r.colors.gray[0],
+        error: r.colors.gray[0],
+        warning: r.colors.gray[0],
+        purple: r.colors.gray[0]
       },
       attentive: {
-        neutral: r.colors.gray[100],
-        primary: r.colors.primary[500],
-        success: r.colors.green[500],
-        error: r.colors.red[500],
+        neutral: r.colors.gray[950],
+        primary: r.colors.primary[600],
+        success: r.colors.green[600],
+        error: r.colors.red[600],
         warning: r.colors.orange[500],
         purple: r.colors.purple[500]
       },
       subtle: {
-        neutral: r.colors.gray[800],
-        primary: r.colors.primary[950],
-        success: r.colors.green[950],
-        error: r.colors.red[950],
-        warning: r.colors.orange[950],
-        purple: r.colors.purple[950]
+        neutral: r.colors.gray[50],
+        primary: r.colors.primary[50],
+        success: r.colors.green[50],
+        error: r.colors.red[50],
+        warning: r.colors.orange[50],
+        purple: r.colors.purple[50]
       }
     },
     borderRadius: {
@@ -4542,26 +4222,26 @@ const M = (r) => ({
     },
     border: {
       noFill: {
-        neutral: `1px solid ${r.colors.gray[700]}`,
-        primary: `1px solid ${r.colors.primary[500]}`,
-        success: `1px solid ${r.colors.green[500]}`,
-        error: `1px solid ${r.colors.red[500]}`,
+        neutral: `1px solid ${r.colors.gray[950]}`,
+        primary: `1px solid ${r.colors.primary[600]}`,
+        success: `1px solid ${r.colors.green[600]}`,
+        error: `1px solid ${r.colors.red[600]}`,
         warning: `1px solid ${r.colors.orange[500]}`,
         purple: `1px solid ${r.colors.purple[500]}`
       },
       subtle: {
-        neutral: `1px solid ${r.colors.gray[700]}`,
-        primary: `1px solid ${r.colors.primary[800]}`,
-        success: `1px solid ${r.colors.green[800]}`,
-        error: `1px solid ${r.colors.red[800]}`,
-        warning: `1px solid ${r.colors.orange[800]}`,
-        purple: `1px solid ${r.colors.purple[800]}`
+        neutral: `1px solid ${r.colors.gray[200]}`,
+        primary: `1px solid ${r.colors.primary[100]}`,
+        success: `1px solid ${r.colors.green[100]}`,
+        error: `1px solid ${r.colors.red[100]}`,
+        warning: `1px solid ${r.colors.orange[100]}`,
+        purple: `1px solid ${r.colors.purple[100]}`
       },
       attentive: {
-        neutral: `1px solid ${r.colors.gray[100]}`,
-        primary: `1px solid ${r.colors.primary[500]}`,
-        success: `1px solid ${r.colors.green[500]}`,
-        error: `1px solid ${r.colors.red[500]}`,
+        neutral: `1px solid ${r.colors.gray[950]}`,
+        primary: `1px solid ${r.colors.primary[600]}`,
+        success: `1px solid ${r.colors.green[600]}`,
+        error: `1px solid ${r.colors.red[600]}`,
         warning: `1px solid ${r.colors.orange[500]}`,
         purple: `1px solid ${r.colors.purple[500]}`
       }
@@ -4585,15 +4265,15 @@ const M = (r) => ({
     text: {
       color: {
         noFill: {
-          neutral: r.colors.gray[100],
-          primary: r.colors.primary[400],
-          success: r.colors.green[400],
-          error: r.colors.red[400],
-          warning: r.colors.orange[400],
-          purple: r.colors.purple[400]
+          neutral: r.colors.gray[950],
+          primary: r.colors.primary[800],
+          success: r.colors.green[600],
+          error: r.colors.red[600],
+          warning: r.colors.orange[500],
+          purple: r.colors.purple[500]
         },
         attentive: {
-          neutral: r.colors.gray[950],
+          neutral: r.colors.gray[0],
           primary: r.colors.gray[0],
           success: r.colors.gray[0],
           error: r.colors.gray[0],
@@ -4601,12 +4281,12 @@ const M = (r) => ({
           purple: r.colors.gray[0]
         },
         subtle: {
-          neutral: r.colors.gray[100],
-          primary: r.colors.primary[400],
-          success: r.colors.green[400],
-          error: r.colors.red[400],
-          warning: r.colors.orange[400],
-          purple: r.colors.purple[400]
+          neutral: r.colors.gray[950],
+          primary: r.colors.primary[600],
+          success: r.colors.green[600],
+          error: r.colors.red[600],
+          warning: r.colors.orange[600],
+          purple: r.colors.purple[600]
         }
       },
       fontSize: {
@@ -4616,10 +4296,10 @@ const M = (r) => ({
         lg: r.font.fontSize[14]
       },
       fontWeight: {
-        xs: r.font.weight[600],
-        sm: r.font.weight[600],
-        md: r.font.weight[600],
-        lg: r.font.weight[600]
+        xs: r.font.weight[500],
+        sm: r.font.weight[500],
+        md: r.font.weight[500],
+        lg: r.font.weight[500]
       },
       lineHeight: {
         xs: r.font.lineHeight[18],
@@ -4629,342 +4309,663 @@ const M = (r) => ({
       }
     }
   }
-}), X = (r) => ({
+}), Yr = (r, c = h.LIGHT) => c === h.DARK || c === "dark" ? G(r) : B(r);
+var M = /* @__PURE__ */ ((r) => (r.START = "start", r.CENTER = "center", r.END = "end", r))(M || {}), F = /* @__PURE__ */ ((r) => (r.TOP = "top", r.LEFT = "left", r.RIGHT = "right", r.BOTTOM = "bottom", r))(F || {}), m = /* @__PURE__ */ ((r) => (r.DEFAULT = "default", r.ACTION = "action", r))(m || {}), x = /* @__PURE__ */ ((r) => (r.PRIMARY = "primary", r.DANGER = "danger", r))(x || {});
+const U = (r) => ({
   sm: {
-    gap: r.unit[6],
-    backgroundColor: {
-      noFill: {
-        neutral: r.colors.gray[0],
-        primary: r.colors.gray[0],
-        success: r.colors.gray[0],
-        error: r.colors.gray[0],
-        warning: r.colors.gray[0],
-        purple: r.colors.gray[0]
-      },
-      attentive: {
-        neutral: r.colors.gray[950],
-        primary: r.colors.primary[600],
-        success: r.colors.green[600],
-        error: r.colors.red[600],
-        warning: r.colors.orange[500],
-        purple: r.colors.purple[500]
-      },
-      subtle: {
-        neutral: r.colors.gray[50],
-        primary: r.colors.primary[50],
-        success: r.colors.green[50],
-        error: r.colors.red[50],
-        warning: r.colors.orange[50],
-        purple: r.colors.purple[50]
-      }
+    backgroundColor: r.colors.gray[0],
+    border: `1px solid ${r.colors.gray[200]}`,
+    borderRadius: r.unit[8],
+    boxShadow: r.shadows.sm,
+    zIndex: r.zIndex[101],
+    minWidth: 200,
+    maxWidth: 280,
+    paddingTop: r.unit[6],
+    paddingRight: r.unit[6],
+    paddingBottom: r.unit[6],
+    paddingLeft: r.unit[6],
+    searchIcon: {
+      width: r.unit[16]
     },
-    borderRadius: {
-      xs: {
-        squarical: r.border.radius[6],
-        rounded: r.border.radius.full
-      },
-      sm: {
-        squarical: r.border.radius[6],
-        rounded: r.border.radius.full
-      },
-      md: {
-        squarical: r.border.radius[6],
-        rounded: r.border.radius.full
+    group: {
+      label: {
+        fontSize: r.font.size.body.sm.fontSize,
+        fontWeight: r.font.weight[400],
+        lineHeight: r.font.lineHeight[14],
+        color: r.colors.gray[400],
+        paddingTop: r.unit[6],
+        paddingRight: r.unit[8],
+        paddingBottom: r.unit[6],
+        paddingLeft: r.unit[8],
+        marginTop: r.unit[0],
+        marginRight: r.unit[6],
+        marginBottom: r.unit[0],
+        marginLeft: r.unit[6]
       },
-      lg: {
-        squarical: r.border.radius[8],
-        rounded: r.border.radius.full
+      item: {
+        paddingTop: r.unit[8],
+        paddingRight: r.unit[8],
+        paddingBottom: r.unit[8],
+        paddingLeft: r.unit[8],
+        marginTop: r.unit[0],
+        marginRight: r.unit[4],
+        marginBottom: r.unit[0],
+        marginLeft: r.unit[4],
+        borderRadius: r.unit[4],
+        gap: r.unit[4],
+        backgroundColor: {
+          [m.DEFAULT]: {
+            default: r.colors.gray[0],
+            hover: r.colors.gray[50],
+            active: r.colors.gray[50],
+            focus: r.colors.gray[50],
+            focusVisible: r.colors.gray[50],
+            disabled: r.colors.gray[0],
+            selected: r.colors.gray[0]
+          },
+          [m.ACTION]: {
+            [x.PRIMARY]: {
+              default: r.colors.primary[50],
+              hover: r.colors.primary[100],
+              active: r.colors.primary[50],
+              focus: r.colors.primary[100],
+              focusVisible: r.colors.primary[100],
+              disabled: r.colors.gray[0],
+              selected: r.colors.primary[50]
+            },
+            [x.DANGER]: {
+              default: r.colors.red[50],
+              hover: r.colors.red[100],
+              active: r.colors.red[100],
+              focus: r.colors.red[100],
+              focusVisible: r.colors.red[100],
+              disabled: r.colors.gray[0],
+              selected: r.colors.red[50]
+            }
+          }
+        },
+        text: {
+          fontSize: r.font.size.body.md.fontSize,
+          fontWeight: r.font.weight[500],
+          lineHeight: r.font.lineHeight[16],
+          color: {
+            [m.DEFAULT]: {
+              default: r.colors.gray[600],
+              hover: r.colors.gray[600],
+              active: r.colors.gray[600],
+              focus: r.colors.gray[600],
+              focusVisible: r.colors.gray[600],
+              disabled: r.colors.gray[400],
+              selected: r.colors.gray[600]
+            },
+            [m.ACTION]: {
+              [x.PRIMARY]: {
+                default: r.colors.primary[600],
+                hover: r.colors.primary[600],
+                active: r.colors.primary[600],
+                focus: r.colors.primary[600],
+                focusVisible: r.colors.primary[600],
+                disabled: r.colors.gray[400],
+                selected: r.colors.primary[600]
+              },
+              [x.DANGER]: {
+                default: r.colors.red[600],
+                hover: r.colors.red[600],
+                active: r.colors.red[600],
+                focus: r.colors.red[600],
+                focusVisible: r.colors.red[600],
+                disabled: r.colors.red[400],
+                selected: r.colors.red[600]
+              }
+            }
+          },
+          subText: {
+            fontSize: r.font.size.body.sm.fontSize,
+            fontWeight: r.font.weight[400],
+            lineHeight: r.font.lineHeight[14],
+            color: {
+              [m.DEFAULT]: {
+                default: r.colors.gray[400],
+                hover: r.colors.gray[400],
+                active: r.colors.gray[400],
+                focus: r.colors.gray[400],
+                focusVisible: r.colors.gray[400],
+                disabled: r.colors.gray[400],
+                selected: r.colors.gray[400]
+              },
+              [m.ACTION]: {
+                [x.PRIMARY]: {
+                  default: r.colors.primary[400],
+                  hover: r.colors.primary[400],
+                  active: r.colors.primary[400],
+                  focus: r.colors.primary[400],
+                  focusVisible: r.colors.primary[400],
+                  disabled: r.colors.gray[400],
+                  selected: r.colors.primary[400]
+                },
+                [x.DANGER]: {
+                  default: r.colors.red[400],
+                  hover: r.colors.red[400],
+                  active: r.colors.red[400],
+                  focus: r.colors.red[400],
+                  focusVisible: r.colors.red[400],
+                  disabled: r.colors.red[400],
+                  selected: r.colors.red[400]
+                }
+              }
+            }
+          },
+          leftSlot: {
+            maxWidth: r.unit[16],
+            maxHeight: r.unit[16]
+          },
+          rightChevron: {
+            color: r.colors.gray[500],
+            width: r.unit[16]
+          }
+        }
       }
     },
-    height: {
-      xs: `${r.unit[20]}`,
-      sm: `${r.unit[22]}`,
-      md: `${r.unit[24]}`,
-      lg: `${r.unit[28]}`
-    },
-    padding: {
-      top: {
-        xs: `${r.unit[2]}`,
-        sm: `${r.unit[3]}`,
-        md: `${r.unit[4]}`,
-        lg: `${r.unit[6]}`
-      },
-      right: {
-        xs: `${r.unit[6]}`,
-        sm: `${r.unit[8]}`,
-        md: `${r.unit[10]}`,
-        lg: `${r.unit[12]}`
-      },
-      bottom: {
-        xs: `${r.unit[2]}`,
-        sm: `${r.unit[3]}`,
-        md: `${r.unit[4]}`,
-        lg: `${r.unit[6]}`
-      },
-      left: {
-        xs: `${r.unit[6]}`,
-        sm: `${r.unit[8]}`,
-        md: `${r.unit[10]}`,
-        lg: `${r.unit[12]}`
-      }
+    separator: {
+      color: r.colors.gray[200],
+      height: r.unit[1],
+      marginTop: r.unit[6],
+      marginRight: r.unit[0],
+      marginBottom: r.unit[6],
+      marginLeft: r.unit[0]
+    }
+  },
+  lg: {
+    backgroundColor: r.colors.gray[0],
+    border: `1px solid ${r.colors.gray[200]}`,
+    borderRadius: r.unit[8],
+    boxShadow: r.shadows.sm,
+    zIndex: r.zIndex[101],
+    minWidth: 200,
+    maxWidth: 280,
+    paddingTop: r.unit[6],
+    paddingRight: r.unit[6],
+    paddingBottom: r.unit[6],
+    paddingLeft: r.unit[6],
+    searchIcon: {
+      width: r.unit[16]
     },
-    border: {
-      noFill: {
-        neutral: `1px solid ${r.colors.gray[950]}`,
-        primary: `1px solid ${r.colors.primary[600]}`,
-        success: `1px solid ${r.colors.green[600]}`,
-        error: `1px solid ${r.colors.red[600]}`,
-        warning: `1px solid ${r.colors.orange[500]}`,
-        purple: `1px solid ${r.colors.purple[500]}`
-      },
-      subtle: {
-        neutral: `1px solid ${r.colors.gray[200]}`,
-        primary: `1px solid ${r.colors.primary[100]}`,
-        success: `1px solid ${r.colors.green[100]}`,
-        error: `1px solid ${r.colors.red[100]}`,
-        warning: `1px solid ${r.colors.orange[100]}`,
-        purple: `1px solid ${r.colors.purple[100]}`
+    group: {
+      label: {
+        fontSize: r.font.size.body.sm.fontSize,
+        fontWeight: r.font.weight[400],
+        lineHeight: r.font.lineHeight[14],
+        color: r.colors.gray[400],
+        paddingTop: r.unit[6],
+        paddingRight: r.unit[8],
+        paddingBottom: r.unit[6],
+        paddingLeft: r.unit[8],
+        marginTop: r.unit[0],
+        marginRight: r.unit[6],
+        marginBottom: r.unit[0],
+        marginLeft: r.unit[6]
       },
-      attentive: {
-        neutral: `1px solid ${r.colors.gray[950]}`,
-        primary: `1px solid ${r.colors.primary[600]}`,
-        success: `1px solid ${r.colors.green[600]}`,
-        error: `1px solid ${r.colors.red[600]}`,
-        warning: `1px solid ${r.colors.orange[500]}`,
-        purple: `1px solid ${r.colors.purple[500]}`
-      }
-    },
-    leftSlot: {
-      maxHeight: {
-        xs: `${r.unit[12]}`,
-        sm: `${r.unit[12]}`,
-        md: `${r.unit[12]}`,
-        lg: `${r.unit[12]}`
-      }
-    },
-    rightSlot: {
-      maxHeight: {
-        xs: `${r.unit[12]}`,
-        sm: `${r.unit[12]}`,
-        md: `${r.unit[12]}`,
-        lg: `${r.unit[12]}`
-      }
-    },
-    text: {
-      color: {
-        noFill: {
-          neutral: r.colors.gray[950],
-          primary: r.colors.primary[800],
-          success: r.colors.green[600],
-          error: r.colors.red[600],
-          warning: r.colors.orange[500],
-          purple: r.colors.purple[500]
-        },
-        attentive: {
-          neutral: r.colors.gray[0],
-          primary: r.colors.gray[0],
-          success: r.colors.gray[0],
-          error: r.colors.gray[0],
-          warning: r.colors.gray[0],
-          purple: r.colors.gray[0]
+      item: {
+        paddingTop: r.unit[8],
+        paddingRight: r.unit[8],
+        paddingBottom: r.unit[8],
+        paddingLeft: r.unit[8],
+        marginTop: r.unit[0],
+        marginRight: r.unit[4],
+        marginBottom: r.unit[0],
+        marginLeft: r.unit[4],
+        borderRadius: r.unit[4],
+        gap: r.unit[4],
+        backgroundColor: {
+          [m.DEFAULT]: {
+            default: r.colors.gray[0],
+            hover: r.colors.gray[50],
+            active: r.colors.gray[50],
+            focus: r.colors.gray[50],
+            focusVisible: r.colors.gray[50],
+            disabled: r.colors.gray[0],
+            selected: r.colors.gray[0]
+          },
+          [m.ACTION]: {
+            [x.PRIMARY]: {
+              default: r.colors.primary[50],
+              hover: r.colors.primary[100],
+              active: r.colors.primary[50],
+              focus: r.colors.primary[100],
+              focusVisible: r.colors.primary[100],
+              disabled: r.colors.gray[0],
+              selected: r.colors.primary[50]
+            },
+            [x.DANGER]: {
+              default: r.colors.red[50],
+              hover: r.colors.red[100],
+              active: r.colors.red[100],
+              focus: r.colors.red[100],
+              focusVisible: r.colors.red[100],
+              disabled: r.colors.gray[0],
+              selected: r.colors.red[50]
+            }
+          }
         },
-        subtle: {
-          neutral: r.colors.gray[950],
-          primary: r.colors.primary[600],
-          success: r.colors.green[600],
-          error: r.colors.red[600],
-          warning: r.colors.orange[600],
-          purple: r.colors.purple[600]
+        text: {
+          fontSize: r.font.size.body.md.fontSize,
+          fontWeight: r.font.weight[500],
+          lineHeight: r.font.lineHeight[16],
+          color: {
+            [m.DEFAULT]: {
+              default: r.colors.gray[600],
+              hover: r.colors.gray[600],
+              active: r.colors.gray[600],
+              focus: r.colors.gray[600],
+              focusVisible: r.colors.gray[600],
+              disabled: r.colors.gray[400],
+              selected: r.colors.gray[600]
+            },
+            [m.ACTION]: {
+              [x.PRIMARY]: {
+                default: r.colors.primary[600],
+                hover: r.colors.primary[600],
+                active: r.colors.primary[600],
+                focus: r.colors.primary[600],
+                focusVisible: r.colors.primary[600],
+                disabled: r.colors.gray[400],
+                selected: r.colors.primary[600]
+              },
+              [x.DANGER]: {
+                default: r.colors.red[600],
+                hover: r.colors.red[600],
+                active: r.colors.red[600],
+                focus: r.colors.red[600],
+                focusVisible: r.colors.red[600],
+                disabled: r.colors.red[400],
+                selected: r.colors.red[600]
+              }
+            }
+          },
+          subText: {
+            fontSize: r.font.size.body.sm.fontSize,
+            fontWeight: r.font.weight[400],
+            lineHeight: r.font.lineHeight[14],
+            color: {
+              [m.DEFAULT]: {
+                default: r.colors.gray[400],
+                hover: r.colors.gray[400],
+                active: r.colors.gray[400],
+                focus: r.colors.gray[400],
+                focusVisible: r.colors.gray[400],
+                disabled: r.colors.gray[400],
+                selected: r.colors.gray[400]
+              },
+              [m.ACTION]: {
+                [x.PRIMARY]: {
+                  default: r.colors.primary[400],
+                  hover: r.colors.primary[400],
+                  active: r.colors.primary[400],
+                  focus: r.colors.primary[400],
+                  focusVisible: r.colors.primary[400],
+                  disabled: r.colors.gray[400],
+                  selected: r.colors.primary[400]
+                },
+                [x.DANGER]: {
+                  default: r.colors.red[400],
+                  hover: r.colors.red[400],
+                  active: r.colors.red[400],
+                  focus: r.colors.red[400],
+                  focusVisible: r.colors.red[400],
+                  disabled: r.colors.red[400],
+                  selected: r.colors.red[400]
+                }
+              }
+            }
+          },
+          leftSlot: {
+            maxWidth: r.unit[16],
+            maxHeight: r.unit[16]
+          },
+          rightChevron: {
+            color: r.colors.gray[500],
+            width: r.unit[16]
+          }
         }
-      },
-      fontSize: {
-        xs: r.font.fontSize[12],
-        sm: r.font.fontSize[12],
-        md: r.font.fontSize[14],
-        lg: r.font.fontSize[14]
-      },
-      fontWeight: {
-        xs: r.font.weight[500],
-        sm: r.font.weight[500],
-        md: r.font.weight[500],
-        lg: r.font.weight[500]
-      },
-      lineHeight: {
-        xs: r.font.lineHeight[18],
-        sm: r.font.lineHeight[18],
-        md: r.font.lineHeight[20],
-        lg: r.font.lineHeight[20]
-      }
-    }
-  },
-  lg: {
-    gap: r.unit[6],
-    backgroundColor: {
-      noFill: {
-        neutral: r.colors.gray[0],
-        primary: r.colors.gray[0],
-        success: r.colors.gray[0],
-        error: r.colors.gray[0],
-        warning: r.colors.gray[0],
-        purple: r.colors.gray[0]
-      },
-      attentive: {
-        neutral: r.colors.gray[950],
-        primary: r.colors.primary[600],
-        success: r.colors.green[600],
-        error: r.colors.red[600],
-        warning: r.colors.orange[500],
-        purple: r.colors.purple[500]
-      },
-      subtle: {
-        neutral: r.colors.gray[50],
-        primary: r.colors.primary[50],
-        success: r.colors.green[50],
-        error: r.colors.red[50],
-        warning: r.colors.orange[50],
-        purple: r.colors.purple[50]
-      }
-    },
-    borderRadius: {
-      xs: {
-        squarical: r.border.radius[6],
-        rounded: r.border.radius.full
-      },
-      sm: {
-        squarical: r.border.radius[6],
-        rounded: r.border.radius.full
-      },
-      md: {
-        squarical: r.border.radius[6],
-        rounded: r.border.radius.full
-      },
-      lg: {
-        squarical: r.border.radius[8],
-        rounded: r.border.radius.full
       }
     },
-    height: {
-      xs: `${r.unit[20]}`,
-      sm: `${r.unit[22]}`,
-      md: `${r.unit[24]}`,
-      lg: `${r.unit[28]}`
-    },
-    padding: {
-      top: {
-        xs: `${r.unit[2]} `,
-        sm: `${r.unit[3]} `,
-        md: `${r.unit[4]} `,
-        lg: `${r.unit[6]} `
-      },
-      right: {
-        xs: `${r.unit[6]}`,
-        sm: ` ${r.unit[8]}`,
-        md: `${r.unit[10]}`,
-        lg: `${r.unit[12]}`
-      },
-      bottom: {
-        xs: `${r.unit[2]} `,
-        sm: `${r.unit[3]} `,
-        md: `${r.unit[4]} `,
-        lg: `${r.unit[6]} `
-      },
-      left: {
-        xs: ` ${r.unit[6]}`,
-        sm: ` ${r.unit[8]}`,
-        md: ` ${r.unit[10]}`,
-        lg: ` ${r.unit[12]}`
-      }
+    separator: {
+      color: r.colors.gray[200],
+      height: r.unit[1],
+      marginTop: r.unit[6],
+      marginRight: r.unit[0],
+      marginBottom: r.unit[6],
+      marginLeft: r.unit[0]
+    }
+  }
+}), X = (r) => ({
+  sm: {
+    backgroundColor: r.colors.gray[900],
+    border: `1px solid ${r.colors.gray[700]}`,
+    borderRadius: r.unit[8],
+    boxShadow: r.shadows.md,
+    zIndex: r.zIndex[101],
+    minWidth: 200,
+    maxWidth: 280,
+    paddingTop: r.unit[6],
+    paddingRight: r.unit[6],
+    paddingBottom: r.unit[6],
+    paddingLeft: r.unit[6],
+    searchIcon: {
+      width: r.unit[16]
     },
-    border: {
-      noFill: {
-        neutral: `1px solid ${r.colors.gray[950]}`,
-        primary: `1px solid ${r.colors.primary[600]}`,
-        success: `1px solid ${r.colors.green[600]}`,
-        error: `1px solid ${r.colors.red[600]}`,
-        warning: `1px solid ${r.colors.orange[500]}`,
-        purple: `1px solid ${r.colors.purple[500]}`
-      },
-      subtle: {
-        neutral: `1px solid ${r.colors.gray[200]}`,
-        primary: `1px solid ${r.colors.primary[100]}`,
-        success: `1px solid ${r.colors.green[100]}`,
-        error: `1px solid ${r.colors.red[100]}`,
-        warning: `1px solid ${r.colors.orange[100]}`,
-        purple: `1px solid ${r.colors.purple[100]}`
+    group: {
+      label: {
+        fontSize: r.font.size.body.sm.fontSize,
+        fontWeight: r.font.weight[400],
+        lineHeight: r.font.lineHeight[14],
+        color: r.colors.gray[500],
+        paddingTop: r.unit[6],
+        paddingRight: r.unit[8],
+        paddingBottom: r.unit[6],
+        paddingLeft: r.unit[8],
+        marginTop: r.unit[0],
+        marginRight: r.unit[6],
+        marginBottom: r.unit[0],
+        marginLeft: r.unit[6]
       },
-      attentive: {
-        neutral: `1px solid ${r.colors.gray[950]}`,
-        primary: `1px solid ${r.colors.primary[600]}`,
-        success: `1px solid ${r.colors.green[600]}`,
-        error: `1px solid ${r.colors.red[600]}`,
-        warning: `1px solid ${r.colors.orange[500]}`,
-        purple: `1px solid ${r.colors.purple[500]}`
-      }
-    },
-    leftSlot: {
-      maxHeight: {
-        xs: `${r.unit[12]}`,
-        sm: `${r.unit[12]}`,
-        md: `${r.unit[12]}`,
-        lg: `${r.unit[12]}`
+      item: {
+        paddingTop: r.unit[8],
+        paddingRight: r.unit[8],
+        paddingBottom: r.unit[8],
+        paddingLeft: r.unit[8],
+        marginTop: r.unit[0],
+        marginRight: r.unit[4],
+        marginBottom: r.unit[0],
+        marginLeft: r.unit[4],
+        borderRadius: r.unit[4],
+        gap: r.unit[4],
+        backgroundColor: {
+          [m.DEFAULT]: {
+            default: r.colors.gray[900],
+            hover: r.colors.gray[800],
+            active: r.colors.gray[800],
+            focus: r.colors.gray[800],
+            focusVisible: r.colors.gray[800],
+            disabled: r.colors.gray[900],
+            selected: r.colors.gray[900]
+          },
+          [m.ACTION]: {
+            [x.PRIMARY]: {
+              default: r.colors.primary[950],
+              hover: r.colors.primary[900],
+              active: r.colors.primary[900],
+              focus: r.colors.primary[900],
+              focusVisible: r.colors.primary[900],
+              disabled: r.colors.gray[900],
+              selected: r.colors.primary[950]
+            },
+            [x.DANGER]: {
+              default: r.colors.red[950],
+              hover: r.colors.red[900],
+              active: r.colors.red[900],
+              focus: r.colors.red[900],
+              focusVisible: r.colors.red[900],
+              disabled: r.colors.gray[900],
+              selected: r.colors.red[950]
+            }
+          }
+        },
+        text: {
+          fontSize: r.font.size.body.md.fontSize,
+          fontWeight: r.font.weight[500],
+          lineHeight: r.font.lineHeight[16],
+          color: {
+            [m.DEFAULT]: {
+              default: r.colors.gray[200],
+              hover: r.colors.gray[200],
+              active: r.colors.gray[200],
+              focus: r.colors.gray[200],
+              focusVisible: r.colors.gray[200],
+              disabled: r.colors.gray[500],
+              selected: r.colors.gray[200]
+            },
+            [m.ACTION]: {
+              [x.PRIMARY]: {
+                default: r.colors.primary[300],
+                hover: r.colors.primary[300],
+                active: r.colors.primary[300],
+                focus: r.colors.primary[300],
+                focusVisible: r.colors.primary[300],
+                disabled: r.colors.gray[500],
+                selected: r.colors.primary[300]
+              },
+              [x.DANGER]: {
+                default: r.colors.red[400],
+                hover: r.colors.red[400],
+                active: r.colors.red[400],
+                focus: r.colors.red[400],
+                focusVisible: r.colors.red[400],
+                disabled: r.colors.red[600],
+                selected: r.colors.red[400]
+              }
+            }
+          },
+          subText: {
+            fontSize: r.font.size.body.sm.fontSize,
+            fontWeight: r.font.weight[400],
+            lineHeight: r.font.lineHeight[14],
+            color: {
+              [m.DEFAULT]: {
+                default: r.colors.gray[400],
+                hover: r.colors.gray[400],
+                active: r.colors.gray[400],
+                focus: r.colors.gray[400],
+                focusVisible: r.colors.gray[400],
+                disabled: r.colors.gray[500],
+                selected: r.colors.gray[400]
+              },
+              [m.ACTION]: {
+                [x.PRIMARY]: {
+                  default: r.colors.primary[400],
+                  hover: r.colors.primary[400],
+                  active: r.colors.primary[400],
+                  focus: r.colors.primary[400],
+                  focusVisible: r.colors.primary[400],
+                  disabled: r.colors.gray[500],
+                  selected: r.colors.primary[400]
+                },
+                [x.DANGER]: {
+                  default: r.colors.red[400],
+                  hover: r.colors.red[400],
+                  active: r.colors.red[400],
+                  focus: r.colors.red[400],
+                  focusVisible: r.colors.red[400],
+                  disabled: r.colors.red[500],
+                  selected: r.colors.red[400]
+                }
+              }
+            }
+          },
+          leftSlot: {
+            maxWidth: r.unit[16],
+            maxHeight: r.unit[16]
+          },
+          rightChevron: {
+            color: r.colors.gray[500],
+            width: r.unit[16]
+          }
+        }
       }
     },
-    rightSlot: {
-      maxHeight: {
-        xs: `${r.unit[12]}`,
-        sm: `${r.unit[12]}`,
-        md: `${r.unit[12]}`,
-        lg: `${r.unit[12]}`
-      }
+    separator: {
+      color: r.colors.gray[700],
+      height: r.unit[1],
+      marginTop: r.unit[6],
+      marginRight: r.unit[0],
+      marginBottom: r.unit[6],
+      marginLeft: r.unit[0]
+    }
+  },
+  lg: {
+    backgroundColor: r.colors.gray[900],
+    border: `1px solid ${r.colors.gray[700]}`,
+    borderRadius: r.unit[8],
+    boxShadow: r.shadows.md,
+    zIndex: r.zIndex[101],
+    minWidth: 200,
+    maxWidth: 280,
+    paddingTop: r.unit[6],
+    paddingRight: r.unit[6],
+    paddingBottom: r.unit[6],
+    paddingLeft: r.unit[6],
+    searchIcon: {
+      width: r.unit[16]
     },
-    text: {
-      color: {
-        noFill: {
-          neutral: r.colors.gray[950],
-          primary: r.colors.primary[800],
-          success: r.colors.green[600],
-          error: r.colors.red[600],
-          warning: r.colors.orange[500],
-          purple: r.colors.purple[500]
-        },
-        attentive: {
-          neutral: r.colors.gray[0],
-          primary: r.colors.gray[0],
-          success: r.colors.gray[0],
-          error: r.colors.gray[0],
-          warning: r.colors.gray[0],
-          purple: r.colors.gray[0]
+    group: {
+      label: {
+        fontSize: r.font.size.body.sm.fontSize,
+        fontWeight: r.font.weight[400],
+        lineHeight: r.font.lineHeight[14],
+        color: r.colors.gray[500],
+        paddingTop: r.unit[6],
+        paddingRight: r.unit[8],
+        paddingBottom: r.unit[6],
+        paddingLeft: r.unit[8],
+        marginTop: r.unit[0],
+        marginRight: r.unit[6],
+        marginBottom: r.unit[0],
+        marginLeft: r.unit[6]
+      },
+      item: {
+        paddingTop: r.unit[8],
+        paddingRight: r.unit[8],
+        paddingBottom: r.unit[8],
+        paddingLeft: r.unit[8],
+        marginTop: r.unit[0],
+        marginRight: r.unit[4],
+        marginBottom: r.unit[0],
+        marginLeft: r.unit[4],
+        borderRadius: r.unit[4],
+        gap: r.unit[4],
+        backgroundColor: {
+          [m.DEFAULT]: {
+            default: r.colors.gray[900],
+            hover: r.colors.gray[800],
+            active: r.colors.gray[800],
+            focus: r.colors.gray[800],
+            focusVisible: r.colors.gray[800],
+            disabled: r.colors.gray[900],
+            selected: r.colors.gray[900]
+          },
+          [m.ACTION]: {
+            [x.PRIMARY]: {
+              default: r.colors.primary[950],
+              hover: r.colors.primary[900],
+              active: r.colors.primary[900],
+              focus: r.colors.primary[900],
+              focusVisible: r.colors.primary[900],
+              disabled: r.colors.gray[900],
+              selected: r.colors.primary[950]
+            },
+            [x.DANGER]: {
+              default: r.colors.red[950],
+              hover: r.colors.red[900],
+              active: r.colors.red[900],
+              focus: r.colors.red[900],
+              focusVisible: r.colors.red[900],
+              disabled: r.colors.gray[900],
+              selected: r.colors.red[950]
+            }
+          }
         },
-        subtle: {
-          neutral: r.colors.gray[950],
-          primary: r.colors.primary[600],
-          success: r.colors.green[600],
-          error: r.colors.red[600],
-          warning: r.colors.orange[600],
-          purple: r.colors.purple[600]
+        text: {
+          fontSize: r.font.size.body.md.fontSize,
+          fontWeight: r.font.weight[500],
+          lineHeight: r.font.lineHeight[16],
+          color: {
+            [m.DEFAULT]: {
+              default: r.colors.gray[200],
+              hover: r.colors.gray[200],
+              active: r.colors.gray[200],
+              focus: r.colors.gray[200],
+              focusVisible: r.colors.gray[200],
+              disabled: r.colors.gray[500],
+              selected: r.colors.gray[200]
+            },
+            [m.ACTION]: {
+              [x.PRIMARY]: {
+                default: r.colors.primary[300],
+                hover: r.colors.primary[300],
+                active: r.colors.primary[300],
+                focus: r.colors.primary[300],
+                focusVisible: r.colors.primary[300],
+                disabled: r.colors.gray[500],
+                selected: r.colors.primary[300]
+              },
+              [x.DANGER]: {
+                default: r.colors.red[400],
+                hover: r.colors.red[400],
+                active: r.colors.red[400],
+                focus: r.colors.red[400],
+                focusVisible: r.colors.red[400],
+                disabled: r.colors.red[600],
+                selected: r.colors.red[400]
+              }
+            }
+          },
+          subText: {
+            fontSize: r.font.size.body.sm.fontSize,
+            fontWeight: r.font.weight[400],
+            lineHeight: r.font.lineHeight[14],
+            color: {
+              [m.DEFAULT]: {
+                default: r.colors.gray[400],
+                hover: r.colors.gray[400],
+                active: r.colors.gray[400],
+                focus: r.colors.gray[400],
+                focusVisible: r.colors.gray[400],
+                disabled: r.colors.gray[500],
+                selected: r.colors.gray[400]
+              },
+              [m.ACTION]: {
+                [x.PRIMARY]: {
+                  default: r.colors.primary[400],
+                  hover: r.colors.primary[400],
+                  active: r.colors.primary[400],
+                  focus: r.colors.primary[400],
+                  focusVisible: r.colors.primary[400],
+                  disabled: r.colors.gray[500],
+                  selected: r.colors.primary[400]
+                },
+                [x.DANGER]: {
+                  default: r.colors.red[400],
+                  hover: r.colors.red[400],
+                  active: r.colors.red[400],
+                  focus: r.colors.red[400],
+                  focusVisible: r.colors.red[400],
+                  disabled: r.colors.red[500],
+                  selected: r.colors.red[400]
+                }
+              }
+            }
+          },
+          leftSlot: {
+            maxWidth: r.unit[16],
+            maxHeight: r.unit[16]
+          },
+          rightChevron: {
+            color: r.colors.gray[500],
+            width: r.unit[16]
+          }
         }
-      },
-      fontSize: {
-        xs: r.font.fontSize[12],
-        sm: r.font.fontSize[12],
-        md: r.font.fontSize[14],
-        lg: r.font.fontSize[14]
-      },
-      fontWeight: {
-        xs: r.font.weight[500],
-        sm: r.font.weight[500],
-        md: r.font.weight[500],
-        lg: r.font.weight[500]
-      },
-      lineHeight: {
-        xs: r.font.lineHeight[18],
-        sm: r.font.lineHeight[18],
-        md: r.font.lineHeight[20],
-        lg: r.font.lineHeight[20]
       }
+    },
+    separator: {
+      color: r.colors.gray[700],
+      height: r.unit[1],
+      marginTop: r.unit[6],
+      marginRight: r.unit[0],
+      marginBottom: r.unit[6],
+      marginLeft: r.unit[0]
     }
   }
-}), Yr = (r, c = h.LIGHT) => c === h.DARK || c === "dark" ? U(r) : X(r), _ = (r) => ({
+}), Jr = (r, c = h.LIGHT) => c === h.DARK || c === "dark" ? X(r) : U(r), _ = (r) => ({
   sm: {
     width: "100%",
     maxWidth: "900px",
@@ -5618,7 +5619,7 @@ const M = (r) => ({
       }
     }
   }
-}), Jr = (r, c = h.LIGHT) => c === h.DARK || c === "dark" ? _(r) : P(r);
+}), jr = (r, c = h.LIGHT) => c === h.DARK || c === "dark" ? _(r) : P(r);
 var p = /* @__PURE__ */ ((r) => (r.BORDER = "border", r.NO_BORDER = "noBorder", r))(p || {}), V = /* @__PURE__ */ ((r) => (r.LEFT = "left", r.RIGHT = "right", r))(V || {});
 const q = (r) => ({
   sm: {
@@ -6014,7 +6015,7 @@ const q = (r) => ({
       }
     }
   }
-}), jr = (r, c = h.LIGHT) => c === h.DARK || c === "dark" ? q(r) : K(r), Y = (r) => ({
+}), Qr = (r, c = h.LIGHT) => c === h.DARK || c === "dark" ? q(r) : K(r), Y = (r) => ({
   sm: {
     width: "100%",
     maxWidth: "calc(100vw - 32px)",
@@ -6310,7 +6311,7 @@ const q = (r) => ({
   }
 });
 var j = /* @__PURE__ */ ((r) => (r.TOP = "top", r.BOTTOM = "bottom", r.LEFT = "left", r.RIGHT = "right", r))(j || {});
-const Qr = (r, c = h.LIGHT) => c === h.DARK || c === "dark" ? Y(r) : J(r), Q = (r) => ({
+const Zr = (r, c = h.LIGHT) => c === h.DARK || c === "dark" ? Y(r) : J(r), Q = (r) => ({
   sm: {
     gap: r.unit[8],
     switch: {
@@ -6746,7 +6747,7 @@ const Qr = (r, c = h.LIGHT) => c === h.DARK || c === "dark" ? Y(r) : J(r), Q = (
       }
     }
   }
-}), Zr = (r, c = h.LIGHT) => c === h.DARK || c === "dark" ? Z(r) : Q(r);
+}), dr = (r, c = h.LIGHT) => c === h.DARK || c === "dark" ? Z(r) : Q(r);
 var d = /* @__PURE__ */ ((r) => (r.START = "start", r.CENTER = "center", r.END = "end", r))(d || {}), g = /* @__PURE__ */ ((r) => (r.CONTAINER = "container", r.NO_CONTAINER = "no-container", r))(g || {}), y = /* @__PURE__ */ ((r) => (r.SM = "sm", r.MD = "md", r.LG = "lg", r))(y || {}), u = /* @__PURE__ */ ((r) => (r.TOP = "top", r.LEFT = "left", r.RIGHT = "right", r.BOTTOM = "bottom", r))(u || {});
 const f = (r) => {
   const w = {
@@ -7440,7 +7441,7 @@ const f = (r) => {
     }
   };
   return { sm: w, lg: w };
-}, dr = (r, c = h.LIGHT) => c === h.DARK || c === "dark" ? o(r) : f(r);
+}, ur = (r, c = h.LIGHT) => c === h.DARK || c === "dark" ? o(r) : f(r);
 var O = /* @__PURE__ */ ((r) => (r.COUNT = "count", r.TEXT = "text", r))(O || {});
 const T = (r) => {
   const w = {
@@ -8316,7 +8317,7 @@ const T = (r) => {
     sm: w,
     lg: w
   };
-}, ur = (r, c = h.LIGHT) => c === h.DARK || c === "dark" ? k(r) : T(r);
+}, fr = (r, c = h.LIGHT) => c === h.DARK || c === "dark" ? k(r) : T(r);
 var s = /* @__PURE__ */ ((r) => (r.SM = "sm", r.REGULAR = "regular", r.MD = "md", r.LG = "lg", r.XL = "xl", r))(s || {}), z = /* @__PURE__ */ ((r) => (r.CIRCULAR = "circular", r.ROUNDED = "rounded", r))(z || {}), n = /* @__PURE__ */ ((r) => (r.TOP_RIGHT = "topRight", r.BOTTOM_RIGHT = "bottomRight", r.TOP_LEFT = "topLeft", r.BOTTOM_LEFT = "bottomLeft", r))(n || {}), S = /* @__PURE__ */ ((r) => (r.NONE = "none", r.ONLINE = "online", r.OFFLINE = "offline", r.AWAY = "away", r.BUSY = "busy", r))(S || {}), rr = /* @__PURE__ */ ((r) => (r.IMAGE = "image", r.TEXT = "text", r.ICON = "icon", r))(rr || {});
 const lr = (r) => ({
   sm: {
@@ -8896,7 +8897,7 @@ const lr = (r) => ({
       width: r.unit[20]
     }
   }
-}), fr = (r, c = h.LIGHT) => c === h.DARK || c === "dark" ? lr(r) : sr(r), gr = (r) => ({
+}), or = (r, c = h.LIGHT) => c === h.DARK || c === "dark" ? lr(r) : sr(r), gr = (r) => ({
   sm: {
     gap: r.unit[8],
     topContainer: {
@@ -9732,7 +9733,7 @@ const lr = (r) => ({
       }
     }
   }
-}), or = (r, c = h.LIGHT) => c === h.DARK || c === "dark" ? gr(r) : cr(r), tr = (r) => ({
+}), Tr = (r, c = h.LIGHT) => c === h.DARK || c === "dark" ? gr(r) : cr(r), tr = (r) => ({
   sm: {
     // Dark surface similar to shadcn dark charts (card on dark bg)
     border: `1px solid ${r.colors.gray[800]}`,
@@ -10113,7 +10114,7 @@ const lr = (r) => ({
       }
     }
   }
-}), Tr = (r, c = h.LIGHT) => c === h.DARK || c === "dark" ? tr(r) : ir(r);
+}), kr = (r, c = h.LIGHT) => c === h.DARK || c === "dark" ? tr(r) : ir(r);
 var R = /* @__PURE__ */ ((r) => (r.SUCCESS = "success", r.WARNING = "warning", r.ERROR = "error", r.NEUTRAL = "neutral", r))(R || {});
 const pr = (r) => ({
   track: {
@@ -10369,7 +10370,7 @@ const pr = (r) => ({
 }), hr = (r) => {
   const c = yr(r);
   return { sm: c, lg: c };
-}, kr = (r, c = h.LIGHT) => c === h.DARK || c === "dark" ? er(r) : hr(r), br = (r) => ({
+}, nr = (r, c = h.LIGHT) => c === h.DARK || c === "dark" ? er(r) : hr(r), br = (r) => ({
   sm: {
     gap: r.unit[8],
     checkbox: {
@@ -10986,7 +10987,7 @@ const pr = (r) => ({
       }
     }
   }
-}), nr = (r, c = h.LIGHT) => c === h.DARK || c === "dark" ? mr(r) : br(r);
+}), r0 = (r, c = h.LIGHT) => c === h.DARK || c === "dark" ? mr(r) : br(r);
 var xr = /* @__PURE__ */ ((r) => (r[r.vertical = 0] = "vertical", r[r.horizontal = 1] = "horizontal", r))(xr || {}), v = /* @__PURE__ */ ((r) => (r.SM = "sm", r.MD = "md", r.LG = "lg", r))(v || {});
 const Sr = (r) => ({
   sm: {
@@ -11094,9 +11095,9 @@ const Sr = (r) => ({
       gap: r.unit[8]
     }
   }
-}), r0 = (r, c = h.LIGHT) => c === h.DARK || c === "dark" ? zr(r) : Sr(r);
-var $ = /* @__PURE__ */ ((r) => (r.CHART = "chart", r.PROGRESS_BAR = "progress", r.NUMBER = "number", r))($ || {}), vr = /* @__PURE__ */ ((r) => (r.UP = "up", r.DOWN = "down", r))(vr || {}), $r = /* @__PURE__ */ ((r) => (r.INCREASE = "increase", r.DECREASE = "decrease", r))($r || {});
-const wr = (r) => ({
+}), l0 = (r, c = h.LIGHT) => c === h.DARK || c === "dark" ? zr(r) : Sr(r);
+var $ = /* @__PURE__ */ ((r) => (r.CHART = "chart", r.PROGRESS_BAR = "progress", r.NUMBER = "number", r))($ || {}), vr = /* @__PURE__ */ ((r) => (r.UP = "up", r.DOWN = "down", r))(vr || {}), $r = /* @__PURE__ */ ((r) => (r.INCREASE = "increase", r.DECREASE = "decrease", r))($r || {}), wr = /* @__PURE__ */ ((r) => (r.LEFT = "left", r.CENTER = "center", r))(wr || {});
+const Or = (r) => ({
   sm: {
     height: "auto",
     width: "auto",
@@ -11269,7 +11270,7 @@ const wr = (r) => ({
       }
     }
   }
-}), Or = (r) => ({
+}), Rr = (r) => ({
   sm: {
     height: "auto",
     width: "auto",
@@ -11442,7 +11443,7 @@ const wr = (r) => ({
       }
     }
   }
-}), l0 = (r, c = h.LIGHT) => c === h.DARK || c === "dark" ? Or(r) : wr(r), Rr = (r) => ({
+}), s0 = (r, c = h.LIGHT) => c === h.DARK || c === "dark" ? Rr(r) : Or(r), Er = (r) => ({
   sm: {
     zIndex: r.zIndex[9999],
     // background (size-independent)
@@ -11545,7 +11546,7 @@ const wr = (r) => ({
       }
     }
   }
-}), Er = (r) => ({
+}), Lr = (r) => ({
   sm: {
     zIndex: r.zIndex[9999],
     // background (size-independent)
@@ -11648,7 +11649,7 @@ const wr = (r) => ({
       }
     }
   }
-}), s0 = (r, c = h.LIGHT) => c === h.DARK || c === "dark" ? Er(r) : Rr(r), Lr = (r) => ({
+}), g0 = (r, c = h.LIGHT) => c === h.DARK || c === "dark" ? Lr(r) : Er(r), Nr = (r) => ({
   sm: {
     gap: r.unit[8],
     group: {
@@ -11917,7 +11918,7 @@ const wr = (r) => ({
       }
     }
   }
-}), Nr = (r) => ({
+}), Hr = (r) => ({
   sm: {
     gap: r.unit[8],
     group: {
@@ -12186,7 +12187,7 @@ const wr = (r) => ({
       }
     }
   }
-}), g0 = (r, c = h.LIGHT) => c === h.DARK || c === "dark" ? Nr(r) : Lr(r), Hr = (r) => ({
+}), c0 = (r, c = h.LIGHT) => c === h.DARK || c === "dark" ? Hr(r) : Nr(r), Dr = (r) => ({
   sm: {
     // background (size-independent)
     background: r.colors.gray[0],
@@ -12405,7 +12406,7 @@ const wr = (r) => ({
       }
     }
   }
-}), Dr = (r) => ({
+}), Ir = (r) => ({
   sm: {
     // background (size-independent)
     background: r.colors.gray[0],
@@ -12623,9 +12624,9 @@ const wr = (r) => ({
       }
     }
   }
-}), c0 = (r, c = h.LIGHT) => c === h.DARK || c === "dark" ? Dr(r) : Hr(r);
+}), t0 = (r, c = h.LIGHT) => c === h.DARK || c === "dark" ? Ir(r) : Dr(r);
 var l = /* @__PURE__ */ ((r) => (r.BOXED = "boxed", r.FLOATING = "floating", r.UNDERLINE = "underline", r.PILLS = "pills", r))(l || {}), t = /* @__PURE__ */ ((r) => (r.SM = "sm", r.MD = "md", r.LG = "lg", r))(t || {});
-const Ir = (r) => ({
+const ar = (r) => ({
   sm: {
     width: "100%",
     outline: "none",
@@ -13879,9 +13880,9 @@ const Ir = (r) => ({
       }
     }
   }
-}), t0 = (r, c = h.LIGHT) => c === h.DARK || c === "dark" ? Cr(r) : Ir(r);
-var ar = /* @__PURE__ */ ((r) => (r.DEFAULT = "default", r.NO_GUTTER = "no-gutter", r.DIFF = "diff", r))(ar || {}), E = /* @__PURE__ */ ((r) => (r.LIGHT = "light", r.DARK = "dark", r))(E || {}), e = /* @__PURE__ */ ((r) => (r.ADDED = "added", r.REMOVED = "removed", r.UNCHANGED = "unchanged", r))(e || {});
-const Ar = (r) => ({
+}), i0 = (r, c = h.LIGHT) => c === h.DARK || c === "dark" ? Cr(r) : ar(r);
+var Ar = /* @__PURE__ */ ((r) => (r.DEFAULT = "default", r.NO_GUTTER = "no-gutter", r.DIFF = "diff", r))(Ar || {}), E = /* @__PURE__ */ ((r) => (r.LIGHT = "light", r.DARK = "dark", r))(E || {}), e = /* @__PURE__ */ ((r) => (r.ADDED = "added", r.REMOVED = "removed", r.UNCHANGED = "unchanged", r))(e || {});
+const Wr = (r) => ({
   sm: {
     theme: E.DARK,
     backgroundColor: r.colors.gray[25],
@@ -14036,7 +14037,7 @@ const Ar = (r) => ({
       }
     }
   }
-}), Wr = (r) => ({
+}), Gr = (r) => ({
   sm: {
     backgroundColor: r.colors.gray[25],
     border: `1px solid ${r.colors.gray[200]}`,
@@ -14191,9 +14192,9 @@ const Ar = (r) => ({
       }
     }
   }
-}), i0 = (r, c = h.LIGHT) => c === h.DARK || c === "dark" ? Ar(r) : Wr(r);
-var b = /* @__PURE__ */ ((r) => (r.SM = "sm", r.MD = "md", r.LG = "lg", r))(b || {}), Gr = /* @__PURE__ */ ((r) => (r.LINEAR = "linear", r.CIRCULAR = "circular", r))(Gr || {}), i = /* @__PURE__ */ ((r) => (r.SOLID = "solid", r.SEGMENTED = "segmented", r))(i || {});
-const Br = (r) => ({
+}), p0 = (r, c = h.LIGHT) => c === h.DARK || c === "dark" ? Wr(r) : Gr(r);
+var b = /* @__PURE__ */ ((r) => (r.SM = "sm", r.MD = "md", r.LG = "lg", r))(b || {}), Br = /* @__PURE__ */ ((r) => (r.LINEAR = "linear", r.CIRCULAR = "circular", r))(Br || {}), i = /* @__PURE__ */ ((r) => (r.SOLID = "solid", r.SEGMENTED = "segmented", r))(i || {});
+const Mr = (r) => ({
   sm: {
     linear: {
       height: {
@@ -14384,7 +14385,7 @@ const Br = (r) => ({
     },
     transition: "width 0.3s ease-in-out"
   }
-}), Mr = (r) => ({
+}), Fr = (r) => ({
   sm: {
     linear: {
       height: {
@@ -14575,7 +14576,7 @@ const Br = (r) => ({
     },
     transition: "width 0.3s ease-in-out"
   }
-}), p0 = (r, c = h.LIGHT) => c === h.DARK || c === "dark" ? Br(r) : Mr(r), Fr = (r) => ({
+}), e0 = (r, c = h.LIGHT) => c === h.DARK || c === "dark" ? Mr(r) : Fr(r), Ur = (r) => ({
   sm: {
     gap: r.unit[0],
     item: {
@@ -14624,7 +14625,7 @@ const Br = (r) => ({
       color: r.colors.gray[400]
     }
   }
-}), Ur = (r) => ({
+}), Xr = (r) => ({
   sm: {
     gap: r.unit[0],
     item: {
@@ -14673,21 +14674,21 @@ const Br = (r) => ({
       color: r.colors.gray[600]
     }
   }
-}), e0 = (r, c = h.LIGHT) => c === h.DARK || c === "dark" ? Ur(r) : Fr(r);
+}), y0 = (r, c = h.LIGHT) => c === h.DARK || c === "dark" ? Xr(r) : Ur(r);
 export {
-  xr as $,
+  E as $,
   V as A,
   p as B,
   x as C,
-  B as D,
-  G as E,
-  Xr as F,
+  F as D,
+  M as E,
+  _r as F,
   S as G,
   n as H,
   rr as I,
   s as J,
   z as K,
-  Gr as L,
+  Br as L,
   m as M,
   b as N,
   d as O,
@@ -14702,35 +14703,37 @@ export {
   l as X,
   t as Y,
   R as Z,
-  O as _,
-  qr as a,
-  v as a0,
-  ar as a1,
-  E as a2,
-  j as a3,
-  _r as b,
-  s0 as c,
-  kr as d,
-  or as e,
+  Ar as _,
+  Vr as a,
+  xr as a0,
+  v as a1,
+  O as a2,
+  wr as a3,
+  j as a4,
+  e as a5,
+  Pr as b,
+  g0 as c,
+  nr as d,
+  Tr as e,
   Yr as f,
-  Kr as g,
-  t0 as h,
-  l0 as i,
-  Qr as j,
-  Zr as k,
-  dr as l,
-  g0 as m,
-  p0 as n,
-  c0 as o,
-  ur as p,
-  Vr as q,
-  r0 as r,
-  i0 as s,
-  nr as t,
-  Tr as u,
-  e0 as v,
-  fr as w,
-  Jr as x,
-  jr as y,
-  Pr as z
+  qr as g,
+  i0 as h,
+  s0 as i,
+  Zr as j,
+  dr as k,
+  ur as l,
+  c0 as m,
+  e0 as n,
+  t0 as o,
+  fr as p,
+  Jr as q,
+  l0 as r,
+  p0 as s,
+  r0 as t,
+  kr as u,
+  y0 as v,
+  or as w,
+  jr as x,
+  Qr as y,
+  Kr as z
 };