@usefui/components 1.6.0 → 1.7.1

package/dist/index.js

@@ -36,6 +36,7 @@ __export(index_exports, {
   AccordionTrigger: () => AccordionTrigger,
   AvataStatusEnum: () => AvataStatusEnum,
   Avatar: () => Avatar,
+  AvatarStatus: () => AvatarStatus,
   Badge: () => Badge,
   Breadcrumb: () => Breadcrumb,
   BreadcrumbItem: () => BreadcrumbItem,
@@ -66,9 +67,14 @@ __export(index_exports, {
   DropdownMenuRoot: () => DropdownMenuRoot,
   DropdownMenuTrigger: () => DropdownMenuTrigger,
   Field: () => Field,
+  FieldDate: () => FieldDate,
+  FieldFile: () => FieldFile,
   FieldLabel: () => FieldLabel,
   FieldMeta: () => FieldMeta,
+  FieldNumber: () => FieldNumber,
+  FieldPassword: () => FieldPassword,
   FieldRoot: () => FieldRoot,
+  FieldTag: () => FieldTag,
   FieldWrapper: () => FieldWrapper,
   MessageBubble: () => MessageBubble,
   MessageBubbleContent: () => MessageBubbleContent,
@@ -86,9 +92,13 @@ __export(index_exports, {
   PageTools: () => PageTools,
   PageWrapper: () => PageWrapper,
   Portal: () => Portal,
-  PrivacyField: () => PrivacyField,
   Resizable: () => Resizable,
   ScrollArea: () => ScrollArea,
+  Select: () => Select,
+  SelectContent: () => SelectContent,
+  SelectItem: () => SelectItem,
+  SelectRoot: () => SelectRoot,
+  SelectTrigger: () => SelectTrigger,
   Sheet: () => Sheet,
   SheetRoot: () => SheetRoot,
   SheetTrigger: () => SheetTrigger,
@@ -129,6 +139,7 @@ __export(index_exports, {
   useDropdownMenu: () => useDropdownMenu,
   useField: () => useField,
   useMessageBubble: () => useMessageBubble,
+  useSelect: () => useSelect,
   useSheet: () => useSheet,
   useSwitch: () => useSwitch,
   useTabs: () => useTabs,
@@ -246,39 +257,158 @@ var ButtonIconStyles = import_styled_components.css`
     }
   }
 `;
+var ButtonSizeStyles = import_styled_components.css`
+  &[data-size="small"] {
+    font-size: var(--fontsize-small-60);
+
+    gap: var(--measurement-medium-10);
+    padding: var(--measurement-medium-10) var(--measurement-medium-30);
+    min-width: var(--measurement-medium-60);
+    min-height: var(--measurement-medium-60);
+
+    svg {
+      width: var(--fontsize-medium-10);
+      height: var(--fontsize-medium-10);
+    }
+  }
+  &[data-size="medium"] {
+    padding: var(--measurement-medium-10) var(--measurement-medium-60);
+    min-width: var(--measurement-medium-60);
+    min-height: var(--measurement-medium-80);
+  }
+  &[data-size="large"] {
+    padding: var(--measurement-medium-10) var(--measurement-medium-60);
+    min-width: var(--measurement-medium-60);
+    min-height: var(--measurement-medium-90);
+  }
+`;
+var ButtonShapeStyles = import_styled_components.css`
+  &[data-shape="square"] {
+    border-radius: 0;
+  }
+  &[data-shape="smooth"] {
+    border-radius: var(--measurement-medium-20);
+  }
+  &[data-shape="round"] {
+    border-radius: var(--measurement-large-90);
+  }
+`;
+var ButtonBeforeDefaultStyles = import_styled_components.css`
+  content: "";
+  inset: 0;
+
+  border-radius: inherit;
+  border: var(--measurement-small-10) solid transparent;
+  position: absolute;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+
+  mask-composite: intersect;
+
+  transition: all ease-in-out 0.2s;
+`;
 var ButtonVariantsStyles = import_styled_components.css`
   &[data-variant="primary"] {
-    color: var(--body-color) !important;
+    color: var(--body-color-alpha-80);
     background-color: var(--font-color);
+    background: linear-gradient(
+      180deg,
+      var(--font-color) 50%,
+      var(--font-color-alpha-60) 100%
+    );
+    background-size: 100% 200%;
+    background-position: 0% 50%;
+
+    ::before {
+      ${ButtonBeforeDefaultStyles}
+      border-color: var(--body-color-alpha-20);
+      mask-image: linear-gradient(var(--body-color-alpha-90), transparent);
+    }
 
     &:hover,
     &:focus,
     &:active {
       color: var(--body-color);
+      background-position: 0% 25%;
+
+      ::before {
+        border-color: var(--body-color-alpha-10);
+      }
     }
   }
   &[data-variant="secondary"] {
     color: var(--font-color-alpha-60);
-    background-color: transparent;
     border-color: var(--font-color-alpha-10);
 
+    background-color: var(--body-color);
+    background: linear-gradient(
+      180deg,
+      transparent 50%,
+      var(--contrast-color) 100%
+    );
+    background-size: 100% 200%;
+    background-position: 0% 50%;
+
+    ::before {
+      ${ButtonBeforeDefaultStyles}
+      border-color: var(--font-color-alpha-10);
+      mask-image: linear-gradient(var(--font-color-alpha-30), transparent);
+    }
+
     &:hover,
     &:focus,
     &:active {
       color: var(--font-color);
       background-color: var(--font-color-alpha-10);
+      background-position: 0% 75%;
       border-color: transparent;
     }
   }
   &[data-variant="tertiary"] {
-    color: var(--font-color-alpha-80);
+    color: var(--font-color-alpha-60);
+
     background-color: transparent;
+    background: linear-gradient(
+      -180deg,
+      transparent 50%,
+      var(--font-color-alpha-10) 100%
+    );
+    background-size: 100% 200%;
+    background-position: 0% 10%;
 
     &:hover,
     &:focus,
     &:active {
       color: var(--font-color);
       background-color: var(--font-color-alpha-10);
+      background-position: 0% 75%;
+
+      ::before {
+        ${ButtonBeforeDefaultStyles}
+        border-color: var(--font-color-alpha-10);
+        mask-image: linear-gradient(var(--font-color-alpha-30), transparent);
+      }
+    }
+  }
+  &[data-variant="mono"] {
+    color: var(--font-color-alpha-80);
+    background-color: var(--contrast-color);
+
+    ::before {
+      ${ButtonBeforeDefaultStyles}
+      border-color: var(--font-color-alpha-10);
+      mask-image: linear-gradient(var(--font-color-alpha-30), transparent);
+    }
+
+    &:hover,
+    &:focus,
+    &:active {
+      color: var(--font-color);
+
+      ::before {
+        border-color: var(--font-color-alpha-30);
+      }
     }
   }
   &[data-variant="border"] {
@@ -292,36 +422,213 @@ var ButtonVariantsStyles = import_styled_components.css`
       color: var(--font-color);
       border-color: var(--font-color-alpha-20);
     }
+
+    ::before {
+      ${ButtonBeforeDefaultStyles}
+      border-color: var(--font-color-alpha-10);
+      mask-image: linear-gradient(var(--font-color-alpha-20), transparent);
+    }
+  }
+
+  &[data-variant="accent"] {
+    background-color: var(--color-accent);
+    background: linear-gradient(
+      180deg,
+      var(--color-accent) 50%,
+      var(--shade-accent-30) 100%
+    );
+    background-size: 100% 200%;
+    background-position: 0% 50%;
+
+    ::before {
+      ${ButtonBeforeDefaultStyles}
+      border-color: var(--shade-accent-10);
+      mask-image: linear-gradient(var(--shade-accent-10), transparent);
+    }
+
+    &:hover,
+    &:focus,
+    &:active {
+      background-color: var(--tint-accent-10);
+
+      background-position: 0% 75%;
+    }
+  }
+
+  &[data-variant="meta"] {
+    color: var(--alpha-mono-white-80);
+    background-color: var(--color-blue);
+    background: linear-gradient(
+      180deg,
+      var(--tint-blue-10) 50%,
+      var(--alpha-blue-60) 100%
+    );
+    background-size: 100% 200%;
+    background-position: 0% 50%;
+
+    ::before {
+      ${ButtonBeforeDefaultStyles}
+      border-color: var(--tint-blue-30);
+      mask-image: linear-gradient(var(--tint-blue-10), transparent);
+    }
+
+    &:hover,
+    &:focus,
+    &:active {
+      color: var(--color-mono-white);
+      background-color: var(--shade-blue-10);
+
+      background-position: 0% 25%;
+
+      ::before {
+        border-color: var(--tint-blue-40);
+      }
+    }
+  }
+  &[data-variant="hint"] {
+    color: var(--alpha-mono-white-80);
+    background-color: var(--color-purple);
+    background: linear-gradient(
+      180deg,
+      var(--shade-purple-10) 50%,
+      var(--alpha-purple-60) 100%
+    );
+    background-size: 100% 200%;
+    background-position: 0% 50%;
+
+    ::before {
+      ${ButtonBeforeDefaultStyles}
+      border-color: var(--shade-purple-20);
+      mask-image: linear-gradient(var(--shade-purple-10), transparent);
+    }
+
+    &:hover,
+    &:focus,
+    &:active {
+      color: var(--color-mono-white);
+      background-color: var(--shade-purple-10);
+
+      background-position: 0% 25%;
+    }
+  }
+  &[data-variant="success"] {
+    color: var(--alpha-mono-white-90);
+    background-color: var(--shade-green-30);
+    background: linear-gradient(
+      180deg,
+      var(--shade-green-10) 50%,
+      var(--alpha-green-60) 100%
+    );
+    background-size: 100% 200%;
+    background-position: 0% 50%;
+
+    ::before {
+      ${ButtonBeforeDefaultStyles}
+      border-color: var(--shade-green-20);
+      mask-image: linear-gradient(var(--shade-green-10), transparent);
+    }
+
+    &:hover,
+    &:focus,
+    &:active {
+      color: var(--color-mono-white);
+      background-color: var(--shade-green-10);
+
+      background-position: 0% 75%;
+    }
   }
   &[data-variant="danger"] {
-    color: var(--color-mono-white);
+    color: var(--alpha-mono-white-80);
     background-color: var(--color-red);
+    background: linear-gradient(
+      180deg,
+      var(--tint-red-10) 50%,
+      var(--alpha-red-60) 100%
+    );
+    background-size: 100% 200%;
+    background-position: 0% 50%;
+
+    ::before {
+      ${ButtonBeforeDefaultStyles}
+      border-color: var(--tint-red-60);
+      mask-image: linear-gradient(var(--tint-red-10), transparent);
+    }
 
     &:hover,
     &:focus,
     &:active {
+      color: var(--color-mono-white);
       background-color: var(--shade-red-10);
+      background-position: 0% 25%;
+
+      ::before {
+        border-color: var(--tint-red-80);
+      }
     }
   }
   &[data-variant="warning"] {
-    color: var(--color-mono-dark);
+    color: var(--alpha-mono-dark-80);
     background-color: var(--color-orange);
+    background: linear-gradient(
+      180deg,
+      var(--tint-orange-10) 50%,
+      var(--alpha-orange-60) 100%
+    );
+    background-size: 100% 200%;
+    background-position: 0% 50%;
+
+    ::before {
+      ${ButtonBeforeDefaultStyles}
+      border-color: var(--tint-orange-30);
+      mask-image: linear-gradient(var(--tint-orange-10), transparent);
+    }
 
     &:hover,
     &:focus,
     &:active {
+      color: var(--color-mono-dark);
       background-color: var(--shade-orange-10);
+
+      background-position: 0% 25%;
+
+      ::before {
+        border-color: var(--tint-orange-40);
+      }
     }
   }
-  &[data-variant="mono"] {
-    color: var(--font-color-alpha-80);
-    background-color: var(--font-color-alpha-10);
+
+  &[data-variant="link"] {
+    position: relative;
+    border: none;
+    padding: 0;
+    background-color: transparent;
+    min-width: fit-content;
+    min-height: var(--measurement-medium-60);
+    color: currentColor;
+    opacity: 0.6;
+
+    ::before {
+      content: "";
+      position: absolute;
+      width: 0;
+      height: var(--measurement-small-30);
+      background-color: transparent;
+      bottom: calc(var(--measurement-small-80) * -1);
+      left: var(--measurement-small-10);
+
+      transition: all ease-in-out 0.2s;
+      transform-origin: left left;
+    }
 
     &:hover,
     &:focus,
     &:active {
-      color: var(--font-color);
-      border-color: var(--font-color-alpha-10);
+      opacity: 1;
+
+      ::before {
+        width: calc(100% - var(--measurement-small-10));
+        background-color: currentColor;
+      }
     }
   }
   &[data-variant="ghost"] {
@@ -329,8 +636,9 @@ var ButtonVariantsStyles = import_styled_components.css`
     padding: 0;
     background-color: transparent;
     min-width: fit-content;
-    min-height: var(--measurement-medium-60);
+    min-height: fit-content;
     color: var(--font-color-alpha-60);
+    line-height: 0;
 
     &:hover,
     &:focus,
@@ -339,42 +647,6 @@ var ButtonVariantsStyles = import_styled_components.css`
     }
   }
 `;
-var ButtonSizeStyles = import_styled_components.css`
-  &[data-size="small"] {
-    font-size: var(--fontsize-small-60);
-
-    gap: var(--measurement-medium-10);
-    padding: var(--measurement-medium-10) var(--measurement-medium-30);
-    min-width: var(--measurement-medium-60);
-    min-height: var(--measurement-medium-60);
-
-    svg {
-      width: var(--fontsize-medium-10);
-      height: var(--fontsize-medium-10);
-    }
-  }
-  &[data-size="medium"] {
-    padding: var(--measurement-medium-10) var(--measurement-medium-60);
-    min-width: var(--measurement-medium-90);
-    min-height: var(--measurement-medium-80);
-  }
-  &[data-size="large"] {
-    padding: var(--measurement-medium-10) var(--measurement-medium-60);
-    min-width: var(--measurement-medium-90);
-    min-height: var(--measurement-medium-90);
-  }
-`;
-var ButtonShapeStyles = import_styled_components.css`
-  &[data-shape="square"] {
-    border-radius: 0;
-  }
-  &[data-shape="smooth"] {
-    border-radius: var(--measurement-medium-20);
-  }
-  &[data-shape="round"] {
-    border-radius: var(--measurement-large-90);
-  }
-`;
 var ButtonWrapper = import_styled_components.default.button`
   &[data-raw="false"] {
     ${ButtonDefaultStyles}
@@ -424,7 +696,7 @@ var Button = import_react2.default.forwardRef(
       name,
       variant = "primary" /* Primary */,
       sizing = "medium" /* Medium */,
-      shape = "smooth",
+      shape = "smooth" /* Smooth */,
       animation,
       raw,
       rawicon,
@@ -592,19 +864,19 @@ var import_react4 = __toESM(require("react"));
 var import_styled_components2 = __toESM(require("styled-components"));
 var AvatarSizesStyles = import_styled_components2.css`
   &[data-size="small"] {
+    width: var(--measurement-medium-70);
+    height: var(--measurement-medium-70);
+    min-width: var(--measurement-medium-70);
+    min-height: var(--measurement-medium-70);
+  }
+
+  &[data-size="medium"] {
     width: var(--measurement-large-10);
     height: var(--measurement-large-10);
     min-width: var(--measurement-large-10);
     min-height: var(--measurement-large-10);
   }
 
-  &[data-size="medium"] {
-    width: var(--measurement-medium-90);
-    height: var(--measurement-medium-90);
-    min-width: var(--measurement-medium-90);
-    min-height: var(--measurement-medium-90);
-  }
-
   &[data-size="large"] {
     width: var(--measurement-large-20);
     height: var(--measurement-large-20);
@@ -612,6 +884,26 @@ var AvatarSizesStyles = import_styled_components2.css`
     min-height: var(--measurement-large-20);
   }
 `;
+var AvatarShapesStyles = import_styled_components2.css`
+  &[data-shape="square"] {
+    border-radius: 0;
+    img {
+      border-radius: 0;
+    }
+  }
+  &[data-shape="smooth"] {
+    border-radius: var(--measurement-medium-30);
+    img {
+      border-radius: var(--measurement-medium-30);
+    }
+  }
+  &[data-shape="round"] {
+    border-radius: 100%;
+    img {
+      border-radius: 100%;
+    }
+  }
+`;
 var AvatarStatusesStyles = import_styled_components2.css`
   &[data-status="online"] {
     fill: var(--shade-green-10);
@@ -630,7 +922,7 @@ var AvatarStatusesStyles = import_styled_components2.css`
 
   &[data-status="offline"] {
     fill: var(--body-color);
-    stroke: var(--font-color-alpha-10);
+    stroke: var(--contrast-color);
   }
 `;
 var AvatarWrapper = import_styled_components2.default.div`
@@ -640,17 +932,18 @@ var AvatarWrapper = import_styled_components2.default.div`
     align-items: center;
     justify-content: center;
 
-    background-color: var(--body-color);
-    border-radius: 100%;
+    background-color: var(--font-color-alpha-10);
+    border: var(--measurement-small-10) solid var(--font-color-alpha-10);
 
     img {
       width: inherit;
       height: inherit;
       min-width: inherit;
       min-height: inherit;
-      border-radius: 100%;
+      border: var(--measurement-small-10) solid var(--font-color-alpha-10);
     }
 
+    ${AvatarShapesStyles}
     ${AvatarSizesStyles}
   }
 `;
@@ -660,12 +953,37 @@ var StatusWrapper = import_styled_components2.default.svg`
   );
 
   position: absolute;
-  stroke-width: var(--measurement-small-30);
+  stroke-width: var(--measurement-small-10);
   bottom: var(--status-position);
   right: var(--status-position);
 
   ${AvatarStatusesStyles}
 `;
+var BadgeWrapper = import_styled_components2.default.div`
+  --status-position: calc(
+    var(--measurement-medium-10) - (var(--measurement-medium-10) * 2)
+  );
+
+  position: absolute;
+
+  bottom: var(--status-position);
+  right: var(--status-position);
+
+  width: var(--measurement-medium-60);
+  height: var(--measurement-medium-60);
+
+  background-color: var(--font-color-alpha-10);
+  border-radius: 100%;
+
+  img {
+    width: inherit;
+    height: inherit;
+    min-width: inherit;
+    min-height: inherit;
+    border-radius: 100%;
+    border: var(--measurement-small-10) solid var(--font-color-alpha-10);
+  }
+`;
 
 // src/avatar/index.tsx
 var AvataStatusEnum = /* @__PURE__ */ ((AvataStatusEnum2) => {
@@ -680,6 +998,7 @@ var Avatar = (props) => {
     raw,
     sizing = "medium" /* Medium */,
     status,
+    shape = "round" /* Round */,
     src,
     alt,
     children,
@@ -692,10 +1011,11 @@ var Avatar = (props) => {
       "data-raw": Boolean(raw),
       "data-size": sizing,
       "data-status": status,
+      "data-shape": shape,
       "aria-label": props["aria-label"] ?? `${sizeLabel}-user-avatar`,
       ...restProps
     },
-    !children && src && /* @__PURE__ */ import_react4.default.createElement(
+    src && /* @__PURE__ */ import_react4.default.createElement(
       "img",
       {
         "aria-label": `${sizeLabel}-user-avatar-image`,
@@ -704,114 +1024,142 @@ var Avatar = (props) => {
       }
     ),
     children,
-    status && /* @__PURE__ */ import_react4.default.createElement(
-      StatusWrapper,
-      {
-        role: "img",
-        "aria-label": `${sizing}-user-avatar-status`,
-        "aria-labelledby": "title desc",
-        "data-status": status,
-        height: "16",
-        width: "16"
-      },
-      /* @__PURE__ */ import_react4.default.createElement("title", null, "Activity status"),
-      /* @__PURE__ */ import_react4.default.createElement("desc", null, status),
-      /* @__PURE__ */ import_react4.default.createElement("circle", { role: "presentation", cx: "8", cy: "8", r: "6" })
-    )
+    status && /* @__PURE__ */ import_react4.default.createElement(Avatar.Status, { status })
   );
 };
 Avatar.displayName = "Avatar";
-
-// src/badge/index.tsx
-var import_react5 = __toESM(require("react"));
-
-// src/badge/styles/index.ts
-var import_styled_components3 = __toESM(require("styled-components"));
-var BadgeBaseStyles = import_styled_components3.css`
-  display: inline-flex;
-  align-items: center;
+var AvatarStatus = (props) => {
+  const { status } = props;
+  return /* @__PURE__ */ import_react4.default.createElement(
+    StatusWrapper,
+    {
+      role: "img",
+      "aria-label": `${status}-user-avatar-status`,
+      "aria-labelledby": "title desc",
+      "data-status": status,
+      height: "12",
+      width: "12",
+      ...props
+    },
+    /* @__PURE__ */ import_react4.default.createElement("title", null, "Activity status"),
+    /* @__PURE__ */ import_react4.default.createElement("desc", null, status),
+    /* @__PURE__ */ import_react4.default.createElement("circle", { role: "presentation", cx: "6", cy: "6", r: "4" })
+  );
+};
+AvatarStatus.displayName = "Avatar.Status";
+var AvatarBadge = (props) => {
+  const { src, alt, children } = props;
+  return /* @__PURE__ */ import_react4.default.createElement(BadgeWrapper, { role: "img", "aria-label": "user-avatar-badge-wrapper", ...props }, src && !children && /* @__PURE__ */ import_react4.default.createElement(
+    "img",
+    {
+      "aria-label": "user-avatar-badge",
+      alt: alt ?? "user-avatar-badge",
+      src
+    }
+  ), !src && children && children);
+};
+AvatarBadge.displayName = "Avatar.Badge";
+Avatar.Status = AvatarStatus;
+Avatar.Badge = AvatarBadge;
+
+// src/badge/index.tsx
+var import_react5 = __toESM(require("react"));
+
+// src/badge/styles/index.ts
+var import_styled_components3 = __toESM(require("styled-components"));
+var BadgeBaseStyles = import_styled_components3.css`
+  display: flex;
+  align-items: center;
   justify-content: center;
   gap: var(--measurement-medium-10);
+
   min-width: var(--measurement-medium-60);
   min-height: var(--measurement-medium-60);
   width: fit-content;
 
   border: var(--measurement-small-10) solid transparent;
+  padding: 0 var(--measurement-medium-30);
 
   font-size: var(--fontsize-small-60);
-  padding: var(--measurement-medium-10) var(--measurement-medium-30);
   font-weight: 500;
+  letter-spacing: calc(
+    var(--fontsize-small-10) - ((var(--fontsize-small-10) * 1.066))
+  );
+  line-height: 0;
+
   transition: all ease-in-out 0.2s;
 `;
 var BadgeVariantStyles = import_styled_components3.css`
   border: var(--measurement-small-10) solid transparent;
 
   &[data-variant="primary"] {
-    background-color: var(--font-color);
-    color: var(--body-color);
+    background-color: var(--font-color-alpha-10);
+    color: var(--font-color-alpha-80);
 
-    &:hover,
-    &:focus {
-      border-color: var(--font-color-alpha-10);
+    * {
+      color: currentColor !important;
     }
   }
   &[data-variant="secondary"] {
-    background-color: var(--font-color-alpha-10);
-    color: var(--font-color-alpha-60);
+    background-color: var(--contrast-color);
+    color: var(--font-color-alpha-80);
 
-    &:hover,
-    &:focus {
-      color: var(--font-color);
+    * {
+      color: currentColor !important;
     }
   }
   &[data-variant="border"] {
     background-color: transparent;
     border-color: var(--font-color-alpha-10);
-    color: var(--font-color-alpha-60);
+    color: var(--font-color-alpha-80);
 
-    &:hover,
-    &:focus {
-      color: var(--font-color);
+    * {
+      color: currentColor !important;
     }
   }
-  &[data-variant="error"] {
+  &[data-variant="danger"] {
     background-color: var(--alpha-red-10);
-    color: var(--alpha-red-80);
+    border-color: var(--alpha-red-10);
+    color: var(--shade-red-20);
 
-    &:hover,
-    &:focus {
-      background-color: var(--alpha-red-10);
-      color: var(--color-red);
+    * {
+      color: currentColor !important;
     }
   }
   &[data-variant="warning"] {
     background-color: var(--alpha-orange-10);
-    color: var(--alpha-orange-80);
+    border-color: var(--alpha-orange-10);
+    color: var(--shade-orange-20);
 
-    &:hover,
-    &:focus {
-      background-color: var(--alpha-orange-10);
-      color: var(--color-orange);
+    * {
+      color: currentColor !important;
     }
   }
   &[data-variant="success"] {
     background-color: var(--alpha-green-10);
-    color: var(--alpha-green-80);
+    border-color: var(--alpha-green-10);
+    color: var(--shade-lime-20);
 
-    &:hover,
-    &:focus {
-      background-color: var(--alpha-green-10);
-      color: var(--color-green);
+    * {
+      color: currentColor !important;
     }
   }
   &[data-variant="meta"] {
-    background-color: var(--alpha-blue-10);
-    color: var(--alpha-blue-80);
+    background-color: var(--alpha-indigo-10);
+    border-color: var(--alpha-indigo-10);
+    color: var(--shade-indigo-20);
 
-    &:hover,
-    &:focus {
-      background-color: var(--alpha-blue-10);
-      color: var(--color-blue);
+    * {
+      color: currentColor !important;
+    }
+  }
+  &[data-variant="hint"] {
+    background-color: var(--alpha-purple-10);
+    border-color: var(--alpha-purple-10);
+    color: var(--shade-purple-20);
+
+    * {
+      color: currentColor !important;
     }
   }
 `;
@@ -823,14 +1171,35 @@ var BadgeShapeStyles = import_styled_components3.css`
     border-radius: var(--measurement-medium-20);
   }
   &[data-shape="round"] {
-    border-radius: var(--measurement-large-90);
+    border-radius: var(--measurement-medium-60);
+  }
+`;
+var BadgeSizeStyles = import_styled_components3.css`
+  &[data-size="small"] {
+    padding: 0 var(--measurement-medium-30);
+
+    min-width: var(--measurement-medium-70);
+    min-height: var(--measurement-medium-70);
+  }
+  &[data-size="medium"] {
+    padding: 0 var(--measurement-medium-40);
+
+    min-width: var(--fontsize-medium-60);
+    min-height: var(--fontsize-medium-60);
+  }
+  &[data-size="large"] {
+    padding: 0 var(--measurement-medium-40);
+
+    min-width: var(--fontsize-medium-70);
+    min-height: var(--fontsize-medium-70);
   }
 `;
-var BadgeWrapper = import_styled_components3.default.div`
+var BadgeWrapper2 = import_styled_components3.default.div`
   &[data-raw="false"] {
     ${BadgeBaseStyles}
     ${BadgeVariantStyles}
     ${BadgeShapeStyles}
+    ${BadgeSizeStyles}
   }
 `;
 
@@ -838,17 +1207,19 @@ var BadgeWrapper = import_styled_components3.default.div`
 var Badge = (props) => {
   const {
     raw = false,
-    variant = "primary",
-    shape = "smooth",
+    sizing = "small" /* Small */,
+    variant = "primary" /* Primary */,
+    shape = "smooth" /* Smooth */,
     children,
     ...restProps
   } = props;
   return /* @__PURE__ */ import_react5.default.createElement(
-    BadgeWrapper,
+    BadgeWrapper2,
     {
       "data-raw": raw,
       "data-variant": variant,
       "data-shape": shape,
+      "data-size": sizing,
       ...restProps
     },
     children
@@ -1060,74 +1431,294 @@ var CheckboxDefaultStyles = import_styled_components6.css`
   backdrop-filter: blur(var(--measurement-small-10));
   transition: all ease-in-out 0.2s;
 `;
+var CheckboxBeforeDefaultStyles = import_styled_components6.css`
+  content: "";
+  inset: 0;
+
+  border-radius: inherit;
+  border: var(--measurement-small-10) solid transparent;
+  position: absolute;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+
+  mask-composite: intersect;
+
+  transition: all ease-in-out 0.2s;
+`;
 var CheckboxVariantsStyles = import_styled_components6.css`
-  &[data-variant="primary"] {
-    background-color: var(--font-color-alpha-10);
-    border: var(--measurement-small-10) solid transparent;
+  &[data-variant="accent"] {
+    background-color: var(--alpha-accent-30);
 
-    &:hover,
-    &:focus {
-      border-color: var(--font-color-alpha-10);
+    ::before {
+      ${CheckboxBeforeDefaultStyles}
+      border-color: var(--alpha-accent-30);
+      mask-image: linear-gradient(var(--alpha-accent-30), transparent);
     }
 
+    &:hover,
+    &:focus,
     &:active,
     &[data-state="checked"] {
-      background-color: var(--font-color);
+      color: var(--font-color);
+
+      ::before {
+        border-color: var(--color-accent);
+      }
+
+      svg {
+        stroke: var(--color-accent);
+      }
+    }
+  }
+  &[data-variant="primary"] {
+    background-color: var(--font-color);
+    background: linear-gradient(
+      180deg,
+      var(--font-color) 50%,
+      var(--font-color-alpha-60) 100%
+    );
+    background-size: 100% 200%;
+    background-position: 0% 50%;
+
+    ::before {
+      ${CheckboxBeforeDefaultStyles}
+      border-color: var(--body-color-alpha-20);
+      mask-image: linear-gradient(var(--body-color-alpha-90), transparent);
     }
 
+    &:hover,
+    &:focus,
+    &:active,
     &[data-state="checked"] {
+      background-position: 0% 25%;
+
+      ::before {
+        border-color: var(--body-color-alpha-10);
+      }
+
       svg {
         stroke: var(--body-color);
       }
     }
   }
+  &[data-variant="secondary"] {
+    background-color: var(--contrast-color);
+
+    ::before {
+      ${CheckboxBeforeDefaultStyles}
+      border-color: var(--font-color-alpha-30);
+      mask-image: linear-gradient(var(--font-color-alpha-30), transparent);
+    }
+
+    &:hover,
+    &:focus,
+    &:active,
+    &[data-state="checked"] {
+      color: var(--font-color);
+
+      ::before {
+        border-color: var(--font-color-alpha-60);
+      }
+
+      svg {
+        stroke: var(--font-color);
+      }
+    }
+  }
+  &[data-variant="tertiary"] {
+    border-color: var(--font-color-alpha-10);
 
-  &[data-variant="border"] {
     background-color: var(--body-color);
-    border: var(--measurement-small-10) solid var(--font-color-alpha-10);
+    background: linear-gradient(
+      180deg,
+      transparent 0%,
+      var(--contrast-color) 100%
+    );
+    background-size: 100% 200%;
+    background-position: 0% 50%;
+
+    ::before {
+      ${CheckboxBeforeDefaultStyles}
+      border-color: var(--font-color-alpha-10);
+      mask-image: linear-gradient(var(--font-color-alpha-30), transparent);
+    }
 
     &:hover,
     &:focus,
     &:active,
     &[data-state="checked"] {
       background-color: var(--font-color-alpha-10);
+      background-position: 0% 75%;
       border-color: transparent;
+
+      svg {
+        stroke: var(--font-color);
+      }
+    }
+  }
+  &[data-variant="success"] {
+    background-color: var(--alpha-green-30);
+
+    background: linear-gradient(
+      180deg,
+      transparent 0%,
+      var(--alpha-green-30) 100%
+    );
+    background-size: 100% 200%;
+    background-position: 0% 50%;
+
+    ::before {
+      ${CheckboxBeforeDefaultStyles}
+      border-color: var(--alpha-green-30);
+      mask-image: linear-gradient(var(--alpha-green-30), transparent);
     }
 
+    &:hover,
+    &:focus,
+    &:active,
     &[data-state="checked"] {
+      color: var(--font-color);
+
+      ::before {
+        border-color: var(--color-green);
+        background-color: var(--alpha-green-60);
+      }
+
       svg {
-        stroke: var(--font-color);
+        stroke: var(--color-green);
       }
     }
   }
-  &[data-variant="mono"] {
-    background-color: var(--font-color-alpha-10);
-    border: var(--measurement-small-10) solid transparent;
+  &[data-variant="meta"] {
+    background-color: var(--alpha-blue-30);
+
+    background: linear-gradient(
+      180deg,
+      transparent 0%,
+      var(--alpha-blue-30) 100%
+    );
+    background-size: 100% 200%;
+    background-position: 0% 50%;
+
+    ::before {
+      ${CheckboxBeforeDefaultStyles}
+      border-color: var(--alpha-blue-30);
+      mask-image: linear-gradient(var(--alpha-blue-30), transparent);
+    }
 
     &:hover,
     &:focus,
     &:active,
     &[data-state="checked"] {
-      border-color: var(--font-color-alpha-10);
+      color: var(--font-color);
+
+      ::before {
+        border-color: var(--color-blue);
+        background-color: var(--alpha-blue-60);
+      }
+
+      svg {
+        stroke: var(--color-blue);
+      }
+    }
+  }
+  &[data-variant="hint"] {
+    background-color: var(--alpha-purple-30);
+
+    background: linear-gradient(
+      180deg,
+      transparent 0%,
+      var(--alpha-purple-30) 100%
+    );
+    background-size: 100% 200%;
+    background-position: 0% 50%;
+
+    ::before {
+      ${CheckboxBeforeDefaultStyles}
+      border-color: var(--alpha-purple-30);
+      mask-image: linear-gradient(var(--alpha-purple-30), transparent);
     }
 
+    &:hover,
+    &:focus,
+    &:active,
     &[data-state="checked"] {
+      color: var(--font-color);
+
+      ::before {
+        border-color: var(--color-purple);
+        background-color: var(--alpha-purple-60);
+      }
+
       svg {
-        stroke: var(--font-color);
+        stroke: var(--color-purple);
       }
     }
   }
-  &[data-variant="ghost"] {
-    border: var(--measurement-small-10) solid transparent;
+  &[data-variant="danger"] {
+    background-color: var(--alpha-red-30);
+
+    background: linear-gradient(
+      180deg,
+      transparent 0%,
+      var(--alpha-red-30) 100%
+    );
+    background-size: 100% 200%;
+    background-position: 0% 50%;
+
+    ::before {
+      ${CheckboxBeforeDefaultStyles}
+      border-color: var(--alpha-red-30);
+      mask-image: linear-gradient(var(--alpha-red-30), transparent);
+    }
 
     &:hover,
     &:focus,
     &:active,
     &[data-state="checked"] {
-      border-color: var(--font-color-alpha-10);
+      color: var(--font-color);
+
+      ::before {
+        border-color: var(--color-red);
+        background-color: var(--alpha-red-60);
+      }
 
       svg {
-        stroke: var(--font-color);
+        stroke: var(--color-red);
+      }
+    }
+  }
+  &[data-variant="warning"] {
+    background-color: var(--alpha-orange-30);
+
+    background: linear-gradient(
+      180deg,
+      transparent 0%,
+      var(--alpha-orange-30) 100%
+    );
+    background-size: 100% 200%;
+    background-position: 0% 50%;
+
+    ::before {
+      ${CheckboxBeforeDefaultStyles}
+      border-color: var(--alpha-orange-30);
+      mask-image: linear-gradient(var(--alpha-orange-30), transparent);
+    }
+
+    &:hover,
+    &:focus,
+    &:active,
+    &[data-state="checked"] {
+      color: var(--font-color);
+
+      ::before {
+        border-color: var(--color-orange);
+        background-color: var(--alpha-orange-60);
+      }
+
+      svg {
+        stroke: var(--color-orange);
       }
     }
   }
@@ -1196,7 +1787,7 @@ var Checkbox = (props) => {
   const {
     raw,
     sizing = "medium" /* Medium */,
-    variant = "mono" /* Mono */,
+    variant = "secondary" /* Secondary */,
     name,
     disabled,
     required,
@@ -1572,12 +2163,17 @@ var import_styled_components7 = __toESM(require("styled-components"));
 var DialogDefaultStyles = import_styled_components7.css`
   position: fixed;
   top: 15dvh;
-  padding: var(--measurement-medium-60);
+  bottom: auto;
+
+  padding: var(--measurement-medium-30);
   width: 100%;
 
-  border: var(--measurement-small-10) solid var(--font-color-alpha-10);
-  background-color: var(--body-color);
   border-radius: var(--measurement-medium-30);
+  background: var(--body-color);
+
+  border: var(--measurement-small-10) solid var(--contrast-color);
+  box-shadow: 0 var(--measurement-medium-40) var(--measurement-medium-60)
+    calc(var(--measurement-medium-60) * -1) rgba(0, 0, 0, 0.3);
 
   transition: all ease-in-out 0.2s;
   z-index: var(--depth-default-100);
@@ -1592,7 +2188,7 @@ var DialogSizeStyles = import_styled_components7.css`
     max-height: var(--max-height);
   }
   &[data-size="medium"] {
-    max-width: calc(var(--measurement-large-90) * 2.66);
+    max-width: calc(var(--measurement-large-90) * 2);
     max-height: var(--max-height);
   }
 
@@ -1614,14 +2210,14 @@ var Menu = import_styled_components7.default.menu`
   }
 `;
 var DialogWrapper = import_styled_components7.default.dialog`
-  @keyframes slide-in {
+  @keyframes scale-in {
     0% {
       opacity: 0;
-      transform: translateY(var(--measurement-medium-30));
+      transform: scale(0.95);
     }
     100% {
       opacity: 1;
-      transform: translateY(0);
+      transform: Scale(1);
     }
   }
 
@@ -1634,7 +2230,7 @@ var DialogWrapper = import_styled_components7.default.dialog`
     ${DialogSizeStyles}
 
     animation-duration: 0.2s;
-    animation-name: slide-in;
+    animation-name: scale-in;
     animation-fill-mode: backwards;
   }
 `;
@@ -1824,14 +2420,6 @@ function useDropdownMenuProvider() {
 
 // src/dropdown/styles/index.ts
 var import_styled_components9 = __toESM(require("styled-components"));
-var FadeIn = import_styled_components9.keyframes`
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-`;
 var ContentWrapperSizes = import_styled_components9.css`
   --small: var(--measurement-large-60);
   --medium: var(--measurement-large-80);
@@ -1862,6 +2450,17 @@ var ContentWrapper = import_styled_components9.default.ul`
   --medium: var(--measurement-large-80);
   --large: var(--measurement-large-90);
 
+  @keyframes slide-in {
+    0% {
+      opacity: 0;
+      transform: translateY(calc(var(--measurement-small-60) * -1));
+    }
+    100% {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
   &[data-raw="false"] {
     position: fixed;
     margin: 0;
@@ -1874,11 +2473,11 @@ var ContentWrapper = import_styled_components9.default.ul`
     border-radius: var(--measurement-medium-30);
 
     z-index: var(--depth-default-100);
-    animation-duration: 0.2s;
-    animation-name: ${FadeIn};
-    animation-fill-mode: backwards;
 
     ${ContentWrapperSizes}
+    animation-duration: 0.2s;
+    animation-name: slide-in;
+    animation-fill-mode: backwards;
   }
 `;
 var ItemWrapper2 = import_styled_components9.default.li`
@@ -1888,20 +2487,28 @@ var ItemWrapper2 = import_styled_components9.default.li`
   user-select: none;
 
   &[data-raw="false"] {
-    font-size: var(--fontsize-small-80);
-    padding: var(--measurement-medium-30);
+    padding: var(--measurement-medium-10) var(--measurement-medium-30);
     border-radius: var(--measurement-medium-20);
+
     text-align: left;
-    color: var(--font-color-alpha-60);
+    font-weight: 600;
+    letter-spacing: calc(
+      var(--fontsize-small-10) - ((var(--fontsize-small-10) * 1.066))
+    );
+    font-size: var(--fontsize-medium-10);
+    color: var(--font-color);
+
     outline: none;
-    transition: all ease-in-out 0.2s;
     cursor: pointer;
 
+    transition: all ease-in-out 0.2s;
+
     &:hover,
     &:focus,
-    &:active {
-      color: var(--font-color);
-      background-color: var(--font-color-alpha-10);
+    &:active,
+    &:focus-within,
+    &:has(:active) {
+      background-color: var(--contrast-color);
     }
   }
 
@@ -2011,7 +2618,18 @@ var DropdownMenuContent = import_react19.default.forwardRef((props, _) => {
       mounted.current = false;
     };
   }, [states.open]);
-  return /* @__PURE__ */ import_react19.default.createElement(import_react19.default.Fragment, null, states.open && /* @__PURE__ */ import_react19.default.createElement(
+  import_react19.default.useEffect(() => {
+    if (!states.open) return;
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape" && methods.toggleOpen) {
+        methods.toggleOpen();
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [states.open]);
+  if (!states.open) return null;
+  return /* @__PURE__ */ import_react19.default.createElement(
     ContentWrapper,
     {
       ref: contentRef,
@@ -2031,7 +2649,7 @@ var DropdownMenuContent = import_react19.default.forwardRef((props, _) => {
       ...restProps
     },
     children
-  ));
+  );
 });
 DropdownMenuContent.displayName = "DropdownMenu.Content";
 var DropdownMenuItem = (props) => {
@@ -2125,15 +2743,17 @@ var FieldDefaultStyles = import_styled_components10.css`
 
   font-size: var(--fontsize-medium-20);
 
-  line-height: 1.1;
+  line-height: 1;
   letter-spacing: calc(
     var(--fontsize-small-10) - ((var(--fontsize-small-10) * 1.066))
   );
 
   border: var(--measurement-small-10) solid transparent;
+
   backdrop-filter: blur(var(--measurement-small-10));
   color: var(--font-color-alpha-60);
-  width: fit-content;
+
+  width: 100%;
   height: fit-content;
 
   transition: all ease-in-out 0.2s;
@@ -2146,7 +2766,9 @@ var FieldDefaultStyles = import_styled_components10.css`
 
   &:hover,
   &:focus,
-  &:active {
+  &:active,
+  &:focus-within,
+  &:has(:active) {
     color: var(--font-color);
     svg,
     span,
@@ -2159,26 +2781,46 @@ var FieldDefaultStyles = import_styled_components10.css`
     color: var(--font-color-alpha-30);
   }
 
-  &:disabled {
+  &:disabled,
+  &:has(:disabled) {
     cursor: not-allowed;
     opacity: 0.6;
   }
 `;
 var FieldVariantsStyles = import_styled_components10.css`
   &[data-variant="primary"] {
-    background-color: var(--font-color-alpha-10);
+    background-color: transparent;
     border-color: var(--font-color-alpha-10);
 
+    &:hover,
     &:focus,
-    &:active {
-      box-shadow: 0 0 0 var(--measurement-small-30) var(--font-color-alpha-10);
+    &:active,
+    &:focus-within,
+    &:has(:hover),
+    &:has(:active) {
+      border-color: var(--font-color-alpha-20);
+    }
+
+    &:focus,
+    &:active,
+    &:focus-within,
+    &:has(:active) {
+      box-shadow: 0 0 0 var(--measurement-small-30) var(--alpha-accent-30);
     }
 
     &[data-error="true"] {
       color: var(--color-red);
-      background-color: var(--alpha-red-10);
       border-color: var(--alpha-red-10);
-      box-shadow: 0 0 0 var(--measurement-small-30) var(--alpha-red-10);
+
+      &:hover,
+      &:focus,
+      &:active,
+      &:focus-within,
+      &:has(:hover),
+      &:has(:active) {
+        background-color: var(--alpha-red-10);
+        box-shadow: 0 0 0 var(--measurement-small-30) var(--alpha-red-10);
+      }
     }
   }
 
@@ -2188,12 +2830,17 @@ var FieldVariantsStyles = import_styled_components10.css`
 
     &:hover,
     &:focus,
-    &:active {
+    &:active,
+    &:focus-within,
+    &:has(:hover),
+    &:has(:active) {
       border-color: var(--font-color-alpha-20);
     }
 
     &:focus,
-    &:active {
+    &:active,
+    &:focus-within,
+    &:has(:active) {
       box-shadow: 0 0 0 var(--measurement-small-30) var(--font-color-alpha-10);
     }
 
@@ -2203,7 +2850,10 @@ var FieldVariantsStyles = import_styled_components10.css`
 
       &:hover,
       &:focus,
-      &:active {
+      &:active,
+      &:focus-within,
+      &:has(:hover),
+      &:has(:active) {
         background-color: var(--alpha-red-10);
         box-shadow: 0 0 0 var(--measurement-small-30) var(--alpha-red-10);
       }
@@ -2220,7 +2870,10 @@ var FieldVariantsStyles = import_styled_components10.css`
 
     &:hover,
     &:focus,
-    &:active {
+    &:active,
+    &:focus-within,
+    &:has(:hover),
+    &:has(:active) {
       color: var(--font-color);
     }
 
@@ -2241,7 +2894,6 @@ var FieldSizeStyles = import_styled_components10.css`
     padding: 0 var(--measurement-medium-30);
     min-width: var(--measurement-medium-90);
     min-height: var(--measurement-medium-90);
-    width: fit-content;
   }
   &[data-size="large"] {
     padding: var(--measurement-medium-50);
@@ -2258,6 +2910,7 @@ var FieldShapeStyles = import_styled_components10.css`
   }
   &[data-shape="round"] {
     border-radius: var(--measurement-large-90);
+    padding-left: var(--measurement-medium-50) !important;
   }
 `;
 var Fieldset = import_styled_components10.default.fieldset`
@@ -2304,6 +2957,265 @@ var Def = import_styled_components10.default.dfn`
     }
   }
 `;
+var ParentContainer = import_styled_components10.default.div`
+  position: relative;
+  display: flex;
+  align-items: stretch;
+  width: 100%;
+  height: 100%;
+
+  input[type="number"]::-webkit-inner-spin-button,
+  input[type="number"]::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  input {
+    width: 100% !important;
+  }
+  input[type="number"] {
+    appearance: textfield;
+    -moz-appearance: textfield;
+  }
+`;
+var ParentWrapper = import_styled_components10.default.div`
+  &[data-raw="false"] {
+    ${FieldDefaultStyles}
+    ${FieldVariantsStyles}
+    ${FieldSizeStyles}
+    ${FieldShapeStyles}
+
+    cursor: default;
+    display: flex;
+    align-items: center;
+    justify-content: start;
+    gap: var(--measurement-small-30);
+    width: 100% !important;
+    text-align: left !important;
+
+    &[data-error="true"] {
+      &::placeholder {
+        color: var(--alpha-red-30);
+      }
+    }
+
+    &[data-wrap="true"] {
+      flex-wrap: wrap;
+      align-items: center;
+      align-content: center;
+      height: auto;
+      padding-top: var(--measurement-small-60);
+      padding-bottom: var(--measurement-small-60);
+    }
+  }
+`;
+var InnerDivider = import_styled_components10.default.div`
+  height: var(--measurement-small-10);
+  width: 100%;
+  background-color: var(--font-color-alpha-10);
+`;
+var InnerWrapper = import_styled_components10.default.div`
+  &[data-raw="false"] {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+
+    right: 0;
+    &[data-multiple="true"] {
+      right: var(--measurement-small-10) !important;
+    }
+
+    top: var(--measurement-small-10);
+    bottom: var(--measurement-small-10);
+
+    border-left: var(--measurement-small-10) solid var(--font-color-alpha-10);
+    border-color: var(--font-color-alpha-10);
+
+    overflow: hidden;
+
+    &[data-error="true"] {
+      border-color: var(--alpha-red-10) !important;
+    }
+
+    &[data-shape="round"] {
+      border-radius: 0 var(--measurement-large-90) var(--measurement-large-90) 0;
+    }
+    &[data-shape="smooth"] {
+      border-radius: 0 var(--measurement-medium-20) var(--measurement-medium-20)
+        0;
+    }
+    &[data-shape="square"] {
+      border-radius: 0;
+    }
+  }
+`;
+var InnerTrigger = import_styled_components10.default.button`
+  all: unset;
+
+  position: relative;
+  display: flex;
+  flex: 1;
+
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  padding: 0 var(--measurement-medium-40);
+
+  color: var(--font-color-alpha-60);
+
+  background-color: var(--body-color);
+  background: linear-gradient(
+    180deg,
+    transparent 50%,
+    var(--font-color-alpha-10) 100%
+  );
+  background-size: 100% 200%;
+  background-position: 0% 0%;
+  backdrop-filter: blur(var(--measurement-medium-10));
+
+  cursor: pointer;
+  transition: all ease-in-out 0.2s;
+
+  svg {
+    opacity: 0.6;
+    transition: all ease-in-out 0.2s;
+  }
+
+  ::before {
+    content: "";
+    inset: 0;
+
+    border-radius: inherit;
+    position: absolute;
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+
+    mask-composite: intersect;
+
+    transition: all ease-in-out 0.2s;
+    mask-image: linear-gradient(var(--font-color), transparent);
+  }
+
+  &:hover,
+  &:active {
+    color: var(--font-color);
+    background-position: 0% 50%;
+
+    svg {
+      opacity: 0.8;
+    }
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.3;
+  }
+`;
+var InnerSegment = import_styled_components10.default.span`
+  &[data-raw="false"] {
+    border-radius: inherit;
+
+    text-align: center;
+    outline: none;
+    color: inherit;
+    transition: background-color ease-in-out 0.2s;
+
+    &[data-placeholder="true"] {
+      color: var(--font-color-alpha-30);
+    }
+
+    &:hover,
+    &:focus,
+    &:active,
+    &:focus-within,
+    &:has(:active) {
+      background-color: var(--font-color-alpha-10);
+      color: var(--font-color);
+    }
+  }
+`;
+var Muted = import_styled_components10.default.span`
+  &[data-raw="false"] {
+    color: var(--font-color-alpha-30);
+    user-select: none;
+  }
+`;
+var HiddenInput = import_styled_components10.default.input`
+  border: none;
+  outline: none;
+  background: transparent;
+  flex: 1;
+  font: inherit;
+  color: inherit;
+  padding: 0;
+  min-width: var(--measurement-medium-60);
+`;
+
+// src/field/types/index.ts
+var SegmentRanges = {
+  day: { min: 1, max: () => 31 },
+  month: { min: 1, max: () => 12 },
+  year: { min: 1, max: () => 9999 },
+  hour: { min: 0, max: () => 23 },
+  minute: { min: 0, max: () => 59 }
+};
+
+// src/field/utils/index.ts
+function dateToState(date) {
+  return {
+    day: date.getDate(),
+    month: date.getMonth() + 1,
+    // Normalize: Date months are 0-indexed
+    year: date.getFullYear(),
+    hour: date.getHours(),
+    minute: date.getMinutes()
+  };
+}
+function stateToDate(state) {
+  return new Date(
+    state.year,
+    state.month - 1,
+    // Normalize: Date constructor expects 0-indexed months
+    state.day,
+    state.hour,
+    state.minute
+  );
+}
+function buildSegments(state, locale, withTime) {
+  const dateFormatter = new Intl.DateTimeFormat(locale, {
+    day: "2-digit",
+    month: "2-digit",
+    year: "numeric"
+  });
+  const timeFormatter = new Intl.DateTimeFormat(locale, {
+    hour: "2-digit",
+    minute: "2-digit",
+    hour12: false
+  });
+  const probe = stateToDate(state);
+  const dateParts = dateFormatter.formatToParts(probe).filter((p) => p.type !== "literal" || p.value.trim() !== "").map((p) => {
+    if (p.type === "day") return { type: "day", value: p.value };
+    if (p.type === "month") return { type: "month", value: p.value };
+    if (p.type === "year") return { type: "year", value: p.value };
+    return { type: "literal", value: p.value };
+  });
+  if (!withTime) return dateParts;
+  const timeParts = timeFormatter.formatToParts(probe).filter((p) => p.type !== "literal" || p.value.trim() !== "").map((p) => {
+    if (p.type === "hour") return { type: "hour", value: p.value };
+    if (p.type === "minute") return { type: "minute", value: p.value };
+    return { type: "literal", value: p.value };
+  });
+  return [...dateParts, { type: "literal", value: "  " }, ...timeParts];
+}
+var commitState = (isControlled, next, setInternalState, onChange) => {
+  if (!isControlled) setInternalState(next);
+  onChange?.(stateToDate(next));
+};
+var clamp = (val, seg, internalState) => {
+  const { min, max } = SegmentRanges[seg];
+  return Math.min(Math.max(val, min), max(internalState));
+};
 
 // src/field/index.tsx
 var MetaVariantEnum = /* @__PURE__ */ ((MetaVariantEnum2) => {
@@ -2317,8 +3229,8 @@ var Field = (props) => {
   const {
     raw,
     sizing = "medium" /* Medium */,
-    variant = "primary" /* Primary */,
-    shape = "smooth",
+    variant = "secondary" /* Secondary */,
+    shape = "smooth" /* Smooth */,
     error,
     hint,
     ...restProps
@@ -2382,16 +3294,627 @@ var FieldMeta = (props) => {
       "aria-details": id,
       "data-variant": variant,
       "data-raw": Boolean(raw),
-      ...restProps
+      ...restProps
+    },
+    children
+  );
+};
+FieldMeta.displayName = "Field.Meta";
+var FieldNumber = (props) => {
+  const {
+    raw,
+    sizing = "medium" /* Medium */,
+    variant = "secondary" /* Secondary */,
+    shape = "smooth" /* Smooth */,
+    error,
+    step = 1,
+    ...restProps
+  } = props;
+  const inputRef = import_react21.default.useRef(null);
+  const handleStep = (direction) => {
+    if (!inputRef.current) return;
+    direction === "up" ? inputRef.current.stepUp() : inputRef.current.stepDown();
+    inputRef.current.dispatchEvent(new Event("change", { bubbles: true }));
+  };
+  const ChevronIcon = ({ direction }) => /* @__PURE__ */ import_react21.default.createElement(
+    "svg",
+    {
+      width: "8",
+      height: "4",
+      viewBox: "0 0 10 6",
+      fill: "none",
+      style: {
+        transform: direction === "up" ? "rotate(180deg)" : "none"
+      },
+      "aria-hidden": "true"
+    },
+    /* @__PURE__ */ import_react21.default.createElement(
+      "path",
+      {
+        d: "M1 1L5 5L9 1",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  );
+  return /* @__PURE__ */ import_react21.default.createElement(ParentContainer, { "data-raw": Boolean(raw) }, /* @__PURE__ */ import_react21.default.createElement(
+    Field,
+    {
+      ref: inputRef,
+      type: "number",
+      raw,
+      sizing,
+      variant,
+      shape,
+      error,
+      step,
+      ...restProps
+    }
+  ), /* @__PURE__ */ import_react21.default.createElement(
+    InnerWrapper,
+    {
+      "data-raw": Boolean(raw),
+      "data-error": Boolean(error),
+      "data-variant": variant,
+      "data-shape": shape,
+      "data-multiple": "true"
+    },
+    /* @__PURE__ */ import_react21.default.createElement(
+      InnerTrigger,
+      {
+        type: "button",
+        "aria-label": "Increment",
+        "data-raw": Boolean(raw),
+        onClick: () => handleStep("up"),
+        tabIndex: -1
+      },
+      /* @__PURE__ */ import_react21.default.createElement(ChevronIcon, { direction: "up" })
+    ),
+    /* @__PURE__ */ import_react21.default.createElement(InnerDivider, { "data-raw": Boolean(raw) }),
+    /* @__PURE__ */ import_react21.default.createElement(
+      InnerTrigger,
+      {
+        type: "button",
+        "aria-label": "Decrement",
+        "data-raw": Boolean(raw),
+        onClick: () => handleStep("down"),
+        tabIndex: -1
+      },
+      /* @__PURE__ */ import_react21.default.createElement(ChevronIcon, { direction: "down" })
+    )
+  ));
+};
+FieldNumber.displayName = "Field.Number";
+var FieldDate = (props) => {
+  const {
+    raw,
+    sizing = "medium" /* Medium */,
+    variant = "secondary" /* Secondary */,
+    shape = "smooth" /* Smooth */,
+    error,
+    value,
+    defaultValue,
+    onChange,
+    locale = typeof globalThis.navigator !== "undefined" ? globalThis.navigator.language : "en-US",
+    withTime = false,
+    disabled = false,
+    id: idProp
+  } = props;
+  const { id: contextId } = useField();
+  const id = idProp ?? contextId;
+  const isControlled = value !== void 0;
+  const metaId = import_react21.default.useId();
+  const bufferRef = import_react21.default.useRef("");
+  const segmentRefs = import_react21.default.useRef(/* @__PURE__ */ new Map());
+  const [internalState, setInternalState] = import_react21.default.useState(
+    () => dateToState(defaultValue ?? value ?? /* @__PURE__ */ new Date())
+  );
+  const [focusedSegment, setFocusedSegment] = import_react21.default.useState(null);
+  const segments = buildSegments(internalState, locale, withTime);
+  const editableSegments = segments.filter(
+    (s) => s.type !== "literal"
+  ).map((s) => s.type);
+  const stepSegment = (seg, delta) => {
+    const { min, max } = SegmentRanges[seg];
+    const current = internalState[seg];
+    const range = max(internalState) - min + 1;
+    const next = (current - min + delta + range) % range + min;
+    commitState(
+      isControlled,
+      { ...internalState, [seg]: next },
+      setInternalState,
+      onChange
+    );
+  };
+  const handleSegmentKeyDown = (e, seg) => {
+    if (disabled) return;
+    const idx = editableSegments.indexOf(seg);
+    switch (e.key) {
+      case "ArrowUp": {
+        e.preventDefault();
+        bufferRef.current = "";
+        stepSegment(seg, 1);
+        break;
+      }
+      case "ArrowDown": {
+        e.preventDefault();
+        bufferRef.current = "";
+        stepSegment(seg, -1);
+        break;
+      }
+      // Move to the previous segment and reset the buffer
+      case "ArrowLeft":
+      case "Backspace": {
+        e.preventDefault();
+        bufferRef.current = "";
+        if (idx > 0) focusSegmentByType(editableSegments[idx - 1]);
+        break;
+      }
+      // ArrowRight advances manually; Tab is left to bubble for natural focus
+      case "ArrowRight":
+      case "Tab": {
+        if (e.key === "ArrowRight") {
+          e.preventDefault();
+          bufferRef.current = "";
+          if (idx < editableSegments.length - 1)
+            focusSegmentByType(editableSegments[idx + 1]);
+        }
+        break;
+      }
+      default: {
+        if (/^\d$/.test(e.key)) {
+          e.preventDefault();
+          bufferRef.current += e.key;
+          const num = parseInt(bufferRef.current, 10);
+          const { max } = SegmentRanges[seg];
+          const maxVal = max(internalState);
+          const clamped = clamp(num, seg, internalState);
+          commitState(
+            isControlled,
+            { ...internalState, [seg]: clamped },
+            setInternalState,
+            onChange
+          );
+          const maxDigits = String(maxVal).length;
+          const willOverflow = parseInt(bufferRef.current + "0", 10) > maxVal || bufferRef.current.length >= maxDigits;
+          if (willOverflow) {
+            bufferRef.current = "";
+            if (idx < editableSegments.length - 1)
+              focusSegmentByType(editableSegments[idx + 1]);
+          }
+        }
+      }
+    }
+  };
+  const focusSegmentByType = (type) => {
+    if (!type) return;
+    segmentRefs.current.get(type)?.focus();
+  };
+  const handleWrapperClick = (e) => {
+    if (e.target.dataset.segment) return;
+    const timeout = setTimeout(() => {
+      focusSegmentByType(editableSegments[0]);
+    }, 0);
+    return () => clearTimeout(timeout);
+  };
+  import_react21.default.useEffect(() => {
+    if (isControlled && value) setInternalState(dateToState(value));
+  }, [isControlled, value]);
+  return /* @__PURE__ */ import_react21.default.createElement(
+    ParentWrapper,
+    {
+      id,
+      role: "group",
+      "aria-label": "Date input",
+      "aria-invalid": !!error,
+      "aria-describedby": metaId,
+      "data-error": Boolean(error),
+      "data-variant": variant,
+      "data-size": sizing,
+      "data-shape": shape,
+      "data-raw": Boolean(raw),
+      "data-disabled": disabled,
+      onClick: handleWrapperClick
+    },
+    segments.map((seg, i) => {
+      if (seg.type === "literal") {
+        return /* @__PURE__ */ import_react21.default.createElement(Muted, { key: i, "data-raw": Boolean(raw), "aria-hidden": "true" }, seg.value);
+      }
+      const isFocused = focusedSegment === seg.type;
+      return /* @__PURE__ */ import_react21.default.createElement(
+        InnerSegment,
+        {
+          key: seg.type,
+          ref: (el) => segmentRefs.current.set(seg.type, el),
+          role: "spinbutton",
+          "aria-label": seg.type,
+          "aria-valuenow": internalState[seg.type],
+          "aria-valuemin": SegmentRanges[seg.type].min,
+          "aria-valuemax": SegmentRanges[seg.type].max(internalState),
+          tabIndex: disabled ? -1 : 0,
+          "data-raw": Boolean(raw),
+          "data-focused": isFocused,
+          "data-segment": seg.type,
+          onFocus: () => {
+            setFocusedSegment(seg.type);
+            bufferRef.current = "";
+          },
+          onBlur: () => setFocusedSegment(null),
+          onKeyDown: (e) => {
+            if (seg.type === "literal") return;
+            handleSegmentKeyDown(e, seg.type);
+          }
+        },
+        seg.value
+      );
+    })
+  );
+};
+FieldDate.displayName = "Field.Date";
+var FieldFile = (props) => {
+  const {
+    raw,
+    sizing = "medium" /* Medium */,
+    variant = "secondary" /* Secondary */,
+    shape = "smooth" /* Smooth */,
+    error,
+    trigger,
+    onFileChange,
+    disabled,
+    accept,
+    multiple,
+    ...restProps
+  } = props;
+  const fileInputRef = import_react21.default.useRef(null);
+  const [fileName, setFileName] = import_react21.default.useState("");
+  const handleTriggerClick = () => {
+    fileInputRef.current?.click();
+  };
+  const handleFileChange = (e) => {
+    const files = e.target.files;
+    if (files && files.length > 0) {
+      const names = Array.from(files).map((f) => f.name).join(", ");
+      setFileName(names);
+    } else setFileName("");
+    onFileChange?.(files);
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      fileInputRef.current?.click();
+    }
+  };
+  return /* @__PURE__ */ import_react21.default.createElement(import_react21.default.Fragment, null, /* @__PURE__ */ import_react21.default.createElement(
+    "input",
+    {
+      ref: fileInputRef,
+      type: "file",
+      "aria-hidden": "true",
+      tabIndex: -1,
+      disabled,
+      accept,
+      multiple,
+      onChange: handleFileChange,
+      style: { display: "none" }
+    }
+  ), /* @__PURE__ */ import_react21.default.createElement(ParentContainer, { "data-raw": Boolean(raw) }, /* @__PURE__ */ import_react21.default.createElement(
+    Field,
+    {
+      type: "text",
+      readOnly: true,
+      raw,
+      sizing,
+      variant,
+      shape,
+      error,
+      disabled,
+      value: fileName,
+      onClick: (e) => {
+        handleTriggerClick();
+        restProps.onClick?.(e);
+      },
+      onKeyDown: (e) => {
+        handleKeyDown(e);
+        restProps.onKeyDown?.(e);
+      },
+      ...restProps
+    }
+  ), trigger && /* @__PURE__ */ import_react21.default.createElement(
+    InnerWrapper,
+    {
+      "data-raw": Boolean(raw),
+      "data-error": Boolean(error),
+      "data-variant": variant,
+      "data-shape": shape
+    },
+    /* @__PURE__ */ import_react21.default.createElement(
+      InnerTrigger,
+      {
+        type: "button",
+        "data-raw": Boolean(raw),
+        "data-shape": shape,
+        "data-error": Boolean(error),
+        disabled,
+        variant,
+        onClick: handleTriggerClick,
+        "aria-label": typeof trigger === "string" ? trigger : "file-upload-trigger"
+      },
+      trigger
+    )
+  )));
+};
+FieldFile.displayName = "Field.File";
+var FieldPassword = (props) => {
+  const {
+    raw,
+    sizing = "medium" /* Medium */,
+    variant = "secondary" /* Secondary */,
+    shape = "smooth" /* Smooth */,
+    error,
+    disabled,
+    defaultType,
+    ...restProps
+  } = props;
+  const [type, setType] = import_react21.default.useState(
+    defaultType ?? "password"
+  );
+  const handleChangeType = import_react21.default.useCallback(() => {
+    if (type === "text") setType("password");
+    if (type === "password") setType("text");
+  }, [type, setType]);
+  const ShowIcon = () => {
+    return /* @__PURE__ */ import_react21.default.createElement(import_react21.default.Fragment, null, /* @__PURE__ */ import_react21.default.createElement("path", { d: "M2.42 12.713c-.136-.215-.204-.323-.242-.49a1.173 1.173 0 0 1 0-.446c.038-.167.106-.274.242-.49C3.546 9.505 6.895 5 12 5s8.455 4.505 9.58 6.287c.137.215.205.323.243.49.029.125.029.322 0 .446-.038.167-.106.274-.242.49C20.455 14.495 17.105 19 12 19c-5.106 0-8.455-4.505-9.58-6.287Z" }), /* @__PURE__ */ import_react21.default.createElement("path", { d: "M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z" }));
+  };
+  const HideIcon = () => {
+    return /* @__PURE__ */ import_react21.default.createElement(import_react21.default.Fragment, null, /* @__PURE__ */ import_react21.default.createElement("path", { d: "M10.743 5.092C11.149 5.032 11.569 5 12 5c5.105 0 8.455 4.505 9.58 6.287.137.215.205.323.243.49a1.16 1.16 0 0 1 0 .447c-.038.166-.107.274-.244.492-.3.474-.757 1.141-1.363 1.865M6.724 6.715c-2.162 1.467-3.63 3.504-4.303 4.57-.137.217-.205.325-.243.492a1.173 1.173 0 0 0 0 .446c.038.167.106.274.242.49C3.546 14.495 6.895 19 12 19c2.059 0 3.832-.732 5.289-1.723M3 3l18 18M9.88 9.879a3 3 0 1 0 4.243 4.243" }));
+  };
+  return /* @__PURE__ */ import_react21.default.createElement(ParentContainer, { "data-raw": Boolean(raw) }, /* @__PURE__ */ import_react21.default.createElement(
+    Field,
+    {
+      autoComplete: "off",
+      type,
+      raw,
+      sizing,
+      variant,
+      shape,
+      error,
+      disabled,
+      ...restProps
+    }
+  ), /* @__PURE__ */ import_react21.default.createElement(
+    InnerWrapper,
+    {
+      "data-raw": Boolean(raw),
+      "data-error": Boolean(error),
+      "data-variant": variant,
+      "data-shape": shape
+    },
+    /* @__PURE__ */ import_react21.default.createElement(
+      InnerTrigger,
+      {
+        type: "button",
+        "data-raw": Boolean(raw),
+        "data-shape": shape,
+        "data-error": Boolean(error),
+        disabled,
+        variant,
+        onClick: handleChangeType,
+        "aria-label": "password-field-trigger"
+      },
+      /* @__PURE__ */ import_react21.default.createElement(
+        "svg",
+        {
+          viewBox: "0 0 24 24",
+          width: "var(--fontsize-medium-10)",
+          height: "var(--fontsize-medium-10)",
+          stroke: "currentColor",
+          "stroke-width": "2",
+          fill: "none",
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round",
+          "aria-hidden": "true"
+        },
+        type === "password" ? /* @__PURE__ */ import_react21.default.createElement(ShowIcon, null) : /* @__PURE__ */ import_react21.default.createElement(HideIcon, null)
+      )
+    )
+  ));
+};
+FieldPassword.displayName = "Field.Password";
+var FieldTag = (props) => {
+  const {
+    raw,
+    sizing = "medium" /* Medium */,
+    variant = "secondary" /* Secondary */,
+    shape = "smooth" /* Smooth */,
+    error,
+    value,
+    defaultValue,
+    allowed,
+    onChange,
+    disabled = false,
+    placeholder,
+    id: idProp
+  } = props;
+  const { id: contextId } = useField();
+  const id = idProp ?? contextId;
+  const metaId = import_react21.default.useId();
+  const isControlled = value !== void 0;
+  const [internalTags, setInternalTags] = import_react21.default.useState(
+    defaultValue ?? []
+  );
+  const [inputValue, setInputValue] = import_react21.default.useState("");
+  const [focusedTagIndex, setFocusedTagIndex] = import_react21.default.useState(
+    null
+  );
+  const inputRef = import_react21.default.useRef(null);
+  const tagRefs = import_react21.default.useRef(/* @__PURE__ */ new Map());
+  const tags = isControlled ? value : internalTags;
+  const commitTags = import_react21.default.useCallback(
+    (next) => {
+      if (!isControlled) setInternalTags(next);
+      onChange?.(next);
+    },
+    [isControlled, onChange]
+  );
+  const addTag = import_react21.default.useCallback(
+    (label) => {
+      const trimmed = label.trim();
+      if (!trimmed) return;
+      if (tags.some((t) => t.toLowerCase() === trimmed.toLowerCase())) {
+        return;
+      }
+      if (!allowed?.some((a) => a.toLowerCase() === trimmed.toLowerCase())) {
+        return;
+      }
+      commitTags([...tags, trimmed]);
+      setInputValue("");
+    },
+    [tags, commitTags, allowed]
+  );
+  const removeTag = import_react21.default.useCallback(
+    (index) => {
+      const next = tags.filter((_, i) => i !== index);
+      commitTags(next);
+      setFocusedTagIndex(null);
+      inputRef.current?.focus();
+    },
+    [tags, commitTags]
+  );
+  const handleInputKeyDown = (e) => {
+    if (disabled) return;
+    if (e.key === "Enter") {
+      e.preventDefault();
+      addTag(inputValue);
+      return;
+    }
+    if ((e.key === "Backspace" || e.key === "Delete") && inputValue === "" && tags.length > 0) {
+      e.preventDefault();
+      const lastIndex = tags.length - 1;
+      setFocusedTagIndex(lastIndex);
+      tagRefs.current.get(lastIndex)?.focus();
+    }
+  };
+  const handleTagKeyDown = (e, index) => {
+    if (disabled) return;
+    switch (e.key) {
+      case "Backspace":
+      case "Delete": {
+        e.preventDefault();
+        removeTag(index);
+        break;
+      }
+      case "ArrowLeft": {
+        e.preventDefault();
+        if (index > 0) {
+          const prev = index - 1;
+          setFocusedTagIndex(prev);
+          tagRefs.current.get(prev)?.focus();
+        }
+        break;
+      }
+      case "ArrowRight": {
+        e.preventDefault();
+        if (index < tags.length - 1) {
+          const next = index + 1;
+          setFocusedTagIndex(next);
+          tagRefs.current.get(next)?.focus();
+        } else {
+          setFocusedTagIndex(null);
+          inputRef.current?.focus();
+        }
+        break;
+      }
+      case "Escape": {
+        e.preventDefault();
+        setFocusedTagIndex(null);
+        inputRef.current?.focus();
+        break;
+      }
+    }
+  };
+  const handleWrapperClick = (e) => {
+    const target = e.target;
+    if (!target.closest("[data-tag]")) {
+      inputRef.current?.focus();
+    }
+  };
+  import_react21.default.useEffect(() => {
+    if (isControlled && value) setInternalTags(value);
+  }, [isControlled, value]);
+  return /* @__PURE__ */ import_react21.default.createElement(
+    ParentWrapper,
+    {
+      id,
+      role: "group",
+      "aria-invalid": !!error,
+      "aria-describedby": metaId,
+      "data-error": Boolean(error),
+      "data-variant": variant,
+      "data-size": sizing,
+      "data-shape": shape,
+      "data-raw": Boolean(raw),
+      "data-disabled": disabled,
+      "data-wrap": "true",
+      onClick: handleWrapperClick
     },
-    children
+    tags.map((tag, index) => /* @__PURE__ */ import_react21.default.createElement(
+      InnerSegment,
+      {
+        key: `${tag}-${index}`,
+        ref: (el) => tagRefs.current.set(index, el),
+        role: "option",
+        "aria-label": tag,
+        "aria-selected": focusedTagIndex === index,
+        tabIndex: disabled ? -1 : -1,
+        "data-raw": Boolean(raw),
+        "data-focused": focusedTagIndex === index,
+        "data-tag": "true",
+        onFocus: () => setFocusedTagIndex(index),
+        onBlur: () => setFocusedTagIndex(null),
+        onKeyDown: (e) => handleTagKeyDown(e, index)
+      },
+      /* @__PURE__ */ import_react21.default.createElement(Badge, { sizing: "small", variant: "border" }, tag, !disabled && /* @__PURE__ */ import_react21.default.createElement(
+        Button,
+        {
+          variant: "ghost",
+          sizing: "small",
+          "aria-label": `Remove ${tag}`,
+          "data-tag": "true",
+          className: "m-l-small-60 ",
+          onClick: (e) => {
+            e.stopPropagation();
+            removeTag(index);
+          }
+        },
+        "\xD7"
+      ))
+    )),
+    /* @__PURE__ */ import_react21.default.createElement(
+      HiddenInput,
+      {
+        ref: inputRef,
+        type: "text",
+        value: inputValue,
+        disabled,
+        placeholder: tags.length === 0 ? placeholder : void 0,
+        onChange: (e) => setInputValue(e.target.value),
+        onKeyDown: handleInputKeyDown
+      }
+    )
   );
 };
-FieldMeta.displayName = "Field.Meta";
+FieldTag.displayName = "Field.Tag";
 Field.Root = FieldRoot;
 Field.Wrapper = FieldWrapper;
 Field.Label = FieldLabel;
 Field.Meta = FieldMeta;
+Field.Number = FieldNumber;
+Field.Date = FieldDate;
+Field.File = FieldFile;
+Field.Password = FieldPassword;
+Field.Tag = FieldTag;
 
 // src/message-bubble/index.tsx
 var import_react23 = __toESM(require("react"));
@@ -2446,26 +3969,23 @@ var MessageBubbleBadge = (0, import_styled_components11.default)(Badge)`
   width: 100%;
   justify-self: flex-end;
   padding: var(--measurement-medium-30) var(--measurement-medium-50) !important;
-  border-radius: var(--measurement-medium-60) !important;
 
   &[data-side="left"] {
-    background-color: var(--contrast-color) !important;
-    border-bottom-left-radius: 0 !important;
+    border-top-left-radius: 0 !important;
   }
 
   &[data-side="right"] {
-    background-color: var(--font-color-alpha-10) !important;
-    border-bottom-right-radius: 0 !important;
+    border-top-right-radius: 0 !important;
   }
 `;
 var MessageBubbleContentWrapper = import_styled_components11.default.div`
-  line-height: 1.5;
+  line-height: 1.3;
   font-weight: 500;
   word-break: keep-all;
   width: 100%;
 
   * {
-    font-size: var(--fontsize-medium-10) !important;
+    font-size: inherit !important;
   }
 `;
 var MessageBubbleMetaWrapper = import_styled_components11.default.div`
@@ -2507,14 +4027,16 @@ var MessageBubble = (props) => {
 };
 MessageBubble.displayName = "MessageBubble";
 var MessageBubbleContent = (props) => {
-  const { children, raw, ...restProps } = props;
+  const { sizing, shape, variant, children, raw, ...restProps } = props;
   const { id, states } = useMessageBubble();
   return /* @__PURE__ */ import_react23.default.createElement(
     MessageBubbleBadge,
     {
-      variant: "secondary",
       "data-raw": Boolean(raw),
       "data-side": states?.side,
+      variant: variant ?? "border" /* Border */,
+      shape: shape ?? "smooth" /* Smooth */,
+      sizing: sizing ?? "medium" /* Medium */,
       "aria-label": `message-bubble-content-${id}`,
       ...restProps
     },
@@ -2535,6 +4057,7 @@ var MessageBubbleMeta = (props) => {
       "data-raw": Boolean(raw),
       "data-side": states?.side,
       "aria-label": `message-bubble-meta-${states?.side}`,
+      className: "fs-small-60 opacity-default-60",
       ...restProps
     },
     formattedDate
@@ -2561,35 +4084,131 @@ var useOTPField = () => {
 
 // src/otp-field/styles/index.ts
 var import_styled_components12 = __toESM(require("styled-components"));
-var OTPCell = import_styled_components12.default.input`
+var OTPShapeStyles = import_styled_components12.css`
+  &[data-shape="square"] {
+    border-radius: 0;
+  }
+  &[data-shape="smooth"] {
+    border-radius: var(--measurement-medium-20);
+  }
+  &[data-shape="round"] {
+    border-radius: var(--measurement-large-90);
+    padding-left: var(--measurement-medium-50) !important;
+  }
+`;
+var OTPCellDefaultStyles = import_styled_components12.css`
+  outline: none;
+  cursor: text;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  box-sizing: border-box;
+
+  font-size: var(--fontsize-medium-20);
+
+  padding: 0 var(--measurement-medium-30);
   width: var(--measurement-medium-90);
   height: var(--measurement-medium-90);
-  border: var(--measurement-small-10) solid var(--font-color-alpha-10);
 
-  border-radius: var(--measurement-medium-30);
+  line-height: 1;
+  letter-spacing: calc(
+    var(--fontsize-small-10) - ((var(--fontsize-small-10) * 1.066))
+  );
+
+  border: var(--measurement-small-10) solid transparent;
+
   backdrop-filter: blur(var(--measurement-small-10));
+  color: var(--font-color-alpha-60);
 
-  text-align: center;
-  font-size: var(--fontsize-medium-10);
-  font-weight: 500;
+  transition: all ease-in-out 0.2s;
+
+  svg,
+  span,
+  img {
+    opacity: 0.6;
+  }
+
+  &:hover,
+  &:focus,
+  &:active,
+  &:focus-within,
+  &:has(:active) {
+    color: var(--font-color);
+    svg,
+    span,
+    img {
+      opacity: 1;
+    }
+  }
+
+  &::placeholder {
+    color: var(--font-color-alpha-30);
+  }
 
-  color: var(--font-color-alpha-10);
-  text-shadow: 0 0 0 var(--font-color);
+  &:disabled,
+  &:has(:disabled) {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
 
   background-color: transparent;
-  transition: all 0.2s ease-in-out;
-  outline: none;
+  border-color: var(--font-color-alpha-10);
 
-  &:focus:not(:active) {
-    background-color: var(--font-color-alpha-10);
+  &:hover,
+  &:focus,
+  &:active,
+  &:focus-within,
+  &:has(:hover),
+  &:has(:active) {
+    border-color: var(--font-color-alpha-20);
+  }
+
+  &:focus,
+  &:active,
+  &:focus-within,
+  &:has(:active) {
+    box-shadow: 0 0 0 var(--measurement-small-30) var(--alpha-accent-30);
   }
 
-  &:hover:not(:active) {
+  background-color: transparent;
+  border-color: var(--font-color-alpha-10);
+
+  &:hover,
+  &:focus,
+  &:active,
+  &:focus-within,
+  &:has(:hover),
+  &:has(:active) {
     border-color: var(--font-color-alpha-20);
   }
 
-  &::placeholder {
-    opacity: var(--opacity-default-10);
+  &:focus,
+  &:active,
+  &:focus-within,
+  &:has(:active) {
+    box-shadow: 0 0 0 var(--measurement-small-30) var(--font-color-alpha-10);
+  }
+
+  &[data-error="true"] {
+    color: var(--color-red);
+    border-color: var(--alpha-red-10);
+
+    &:hover,
+    &:focus,
+    &:active,
+    &:focus-within,
+    &:has(:hover),
+    &:has(:active) {
+      background-color: var(--alpha-red-10);
+      box-shadow: 0 0 0 var(--measurement-small-30) var(--alpha-red-10);
+    }
+  }
+`;
+var OTPCell = import_styled_components12.default.input`
+  &[data-raw="false"] {
+    ${OTPCellDefaultStyles}
+    ${OTPShapeStyles}
   }
 `;
 
@@ -2699,6 +4318,8 @@ var OTPFieldGroup = import_react25.default.forwardRef(({ ...props }, ref) => {
 OTPFieldGroup.displayName = "OTPField.Group";
 var OTPFieldSlot = ({
   index,
+  shape,
+  raw,
   ...props
 }) => {
   const context = useOTPField();
@@ -2722,6 +4343,8 @@ var OTPFieldSlot = ({
       type: "text",
       "data-testid": "otp-field-slot",
       "data-active": activeIndex === index,
+      "data-shape": shape ?? "smooth" /* Smooth */,
+      "data-raw": Boolean(raw),
       autoComplete: "one-time-code",
       maxLength: 1,
       value: otp[index] || "",
@@ -2764,6 +4387,7 @@ var OverlayWrapper = import_styled_components13.default.div`
 
   &[data-raw="false"] {
     background-color: rgba(0, 0, 0, 0.6); // Always forced to black
+
     animation-duration: 0.2s;
     animation-name: animate-fade;
     animation-fill-mode: backwards;
@@ -3056,55 +4680,19 @@ var Portal = (props) => {
 };
 Portal.displayName = "Portal";
 
-// src/privacy-field/index.tsx
-var import_react29 = __toESM(require("react"));
-
-// src/privacy-field/styles/index.ts
-var import_styled_components16 = __toESM(require("styled-components"));
-var Wrapper = (0, import_styled_components16.default)(Field.Wrapper)`
-  position: relative;
-
-  input {
-    width: 100% !important;
-  }
-`;
-var Trigger = (0, import_styled_components16.default)(Button)`
-  position: absolute !important;
-  right: var(--measurement-medium-50);
-  top: calc(var(--measurement-medium-50));
-`;
-
-// src/privacy-field/index.tsx
-var PrivacyField = ({
-  defaultType,
-  textIcon,
-  passwordIcon,
-  ...restProps
-}) => {
-  const [type, setType] = import_react29.default.useState(
-    defaultType ?? "password"
-  );
-  const handleChangeType = import_react29.default.useCallback(() => {
-    if (type === "text") setType("password");
-    if (type === "password") setType("text");
-  }, [type, setType]);
-  return /* @__PURE__ */ import_react29.default.createElement(Wrapper, { className: "flex" }, /* @__PURE__ */ import_react29.default.createElement(Field, { autoComplete: "off", type, ...restProps }), /* @__PURE__ */ import_react29.default.createElement(Trigger, { variant: "ghost", sizing: "small", onClick: handleChangeType }, type === "text" && textIcon, type === "password" && passwordIcon));
-};
-PrivacyField.displayName = "PrivacyField";
-
 // src/resizable/index.tsx
-var import_react30 = __toESM(require("react"));
+var import_react29 = __toESM(require("react"));
 
 // src/resizable/styles/index.ts
-var import_styled_components17 = __toESM(require("styled-components"));
-var SplitContainer = import_styled_components17.default.div`
+var import_styled_components16 = __toESM(require("styled-components"));
+var SplitContainer = import_styled_components16.default.div`
   position: relative;
 `;
-var Panel = import_styled_components17.default.div`
+var Panel = import_styled_components16.default.div`
   overflow: hidden;
   width: ${(props) => props.width}%;
 `;
-var Divider2 = import_styled_components17.default.div`
+var Divider2 = import_styled_components16.default.div`
   width: var(--measurement-medium-10);
   height: 100%;
   top: 0;
@@ -3128,14 +4716,14 @@ var Divider2 = import_styled_components17.default.div`
     height: ${(props) => props.$dragging ? "var(--measurement-large-10)" : "var(--measurement-medium-60)"};
   }
 `;
-var DragHandle = import_styled_components17.default.div`
+var DragHandle = import_styled_components16.default.div`
   position: absolute;
   top: 0;
   bottom: 0;
   left: calc(var(--measurement-medium-10) * -1);
   right: calc(var(--measurement-medium-10) * -1);
 `;
-var DragIndicator = import_styled_components17.default.div`
+var DragIndicator = import_styled_components16.default.div`
   position: fixed;
   width: var(--measurement-medium-10);
   /* height: var(--measurement-medium-60); */
@@ -3145,7 +4733,7 @@ var DragIndicator = import_styled_components17.default.div`
   opacity: 0;
   transition: all 0.2s;
 `;
-var DragOverlay = import_styled_components17.default.div`
+var DragOverlay = import_styled_components16.default.div`
   position: fixed;
   top: 0;
   left: 0;
@@ -3161,12 +4749,12 @@ var Resizable = ({
   left,
   right
 }) => {
-  const containerRef = import_react30.default.useRef(null);
-  const [leftWidth, setLeftWidth] = import_react30.default.useState(defaultWidth ?? 50);
-  const [isDragging, setIsDragging] = import_react30.default.useState(false);
-  const handleMouseDown = import_react30.default.useCallback(() => setIsDragging(true), []);
-  const handleMouseUp = import_react30.default.useCallback(() => setIsDragging(false), []);
-  const handleMouseMove = import_react30.default.useCallback(
+  const containerRef = import_react29.default.useRef(null);
+  const [leftWidth, setLeftWidth] = import_react29.default.useState(defaultWidth ?? 50);
+  const [isDragging, setIsDragging] = import_react29.default.useState(false);
+  const handleMouseDown = import_react29.default.useCallback(() => setIsDragging(true), []);
+  const handleMouseUp = import_react29.default.useCallback(() => setIsDragging(false), []);
+  const handleMouseMove = import_react29.default.useCallback(
     (e) => {
       if (!isDragging || !containerRef.current) return;
       const containerRect = containerRef.current.getBoundingClientRect();
@@ -3180,7 +4768,7 @@ var Resizable = ({
     },
     [isDragging]
   );
-  import_react30.default.useEffect(() => {
+  import_react29.default.useEffect(() => {
     if (isDragging) {
       document.addEventListener("mousemove", handleMouseMove);
       document.addEventListener("mouseup", handleMouseUp);
@@ -3199,47 +4787,47 @@ var Resizable = ({
       document.body.style.userSelect = "";
     };
   }, [isDragging, handleMouseMove, handleMouseUp]);
-  return /* @__PURE__ */ import_react30.default.createElement(import_react30.default.Fragment, null, /* @__PURE__ */ import_react30.default.createElement(SplitContainer, { ref: containerRef, className: "h-100 flex" }, /* @__PURE__ */ import_react30.default.createElement(Panel, { width: leftWidth }, left), /* @__PURE__ */ import_react30.default.createElement(
+  return /* @__PURE__ */ import_react29.default.createElement(import_react29.default.Fragment, null, /* @__PURE__ */ import_react29.default.createElement(SplitContainer, { ref: containerRef, className: "h-100 flex" }, /* @__PURE__ */ import_react29.default.createElement(Panel, { width: leftWidth }, left), /* @__PURE__ */ import_react29.default.createElement(
     Divider2,
     {
       $dragging: isDragging,
       onMouseDown: handleMouseDown,
       onTouchStart: handleMouseDown
     },
-    /* @__PURE__ */ import_react30.default.createElement(
+    /* @__PURE__ */ import_react29.default.createElement(
       DragHandle,
       {
         className: "flex align-center justify-center",
         id: "drag-handle"
       },
-      /* @__PURE__ */ import_react30.default.createElement(DragIndicator, { className: "drag-indicator-handle" })
+      /* @__PURE__ */ import_react29.default.createElement(DragIndicator, { className: "drag-indicator-handle" })
     )
-  ), /* @__PURE__ */ import_react30.default.createElement(Panel, { width: 100 - leftWidth }, right)), isDragging && /* @__PURE__ */ import_react30.default.createElement(DragOverlay, null));
+  ), /* @__PURE__ */ import_react29.default.createElement(Panel, { width: 100 - leftWidth }, right)), isDragging && /* @__PURE__ */ import_react29.default.createElement(DragOverlay, null));
 };
 Resizable.displayName = "Resizable";
 
 // src/sheet/index.tsx
-var import_react32 = __toESM(require("react"));
+var import_react31 = __toESM(require("react"));
 
 // src/sheet/hooks/index.tsx
-var import_react31 = __toESM(require("react"));
-var SheetContext = import_react31.default.createContext({
+var import_react30 = __toESM(require("react"));
+var SheetContext = import_react30.default.createContext({
   id: {},
   states: {},
   methods: {}
 });
-var useSheet = () => import_react31.default.useContext(SheetContext);
+var useSheet = () => import_react30.default.useContext(SheetContext);
 var SheetProvider = ({
   children
 }) => {
   const context = useSheetProvider();
-  return /* @__PURE__ */ import_react31.default.createElement(SheetContext.Provider, { value: context }, children);
+  return /* @__PURE__ */ import_react30.default.createElement(SheetContext.Provider, { value: context }, children);
 };
 function useSheetProvider() {
-  const containerId = import_react31.default.useId();
-  const triggerId = import_react31.default.useId();
-  const controlId = import_react31.default.useId();
-  const [open, setOpen] = import_react31.default.useState(false);
+  const containerId = import_react30.default.useId();
+  const triggerId = import_react30.default.useId();
+  const controlId = import_react30.default.useId();
+  const [open, setOpen] = import_react30.default.useState(false);
   return {
     id: {
       containerId,
@@ -3257,8 +4845,8 @@ function useSheetProvider() {
 }
 
 // src/sheet/styles/index.ts
-var import_styled_components18 = __toESM(require("styled-components"));
-var SheetStyles = import_styled_components18.css`
+var import_styled_components17 = __toESM(require("styled-components"));
+var SheetStyles = import_styled_components17.css`
   all: unset;
   position: fixed;
   background-color: var(--body-color);
@@ -3289,7 +4877,7 @@ var SheetStyles = import_styled_components18.css`
   animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
   animation-fill-mode: backwards;
 `;
-var SheetSizeStyles = import_styled_components18.css`
+var SheetSizeStyles = import_styled_components17.css`
   &[data-size="small"] {
     width: var(--measurement-large-80);
   }
@@ -3302,7 +4890,7 @@ var SheetSizeStyles = import_styled_components18.css`
     width: calc(var(--measurement-large-90) * 1.5);
   }
 `;
-var SheetSideStyles = import_styled_components18.css`
+var SheetSideStyles = import_styled_components17.css`
   top: 0;
 
   &[data-side="right"] {
@@ -3317,7 +4905,7 @@ var SheetSideStyles = import_styled_components18.css`
     animation-name: slide-left;
   }
 `;
-var SheetWrapper = import_styled_components18.default.dialog`
+var SheetWrapper = import_styled_components17.default.dialog`
   &[data-raw="false"] {
     ${SheetStyles}
     ${SheetSideStyles}
@@ -3327,7 +4915,7 @@ var SheetWrapper = import_styled_components18.default.dialog`
 
 // src/sheet/index.tsx
 var SheetRoot = ({ children }) => {
-  return /* @__PURE__ */ import_react32.default.createElement(SheetProvider, null, children);
+  return /* @__PURE__ */ import_react31.default.createElement(SheetProvider, null, children);
 };
 SheetRoot.displayName = "Sheet.Root";
 var Sheet = (props) => {
@@ -3348,16 +4936,16 @@ var Sheet = (props) => {
   const { id, states, methods } = useSheet();
   const { toggle } = methods;
   const shortcutControls = useKeyPress(String(hotkey), true, bindkey);
-  import_react32.default.useEffect(() => {
+  import_react31.default.useEffect(() => {
     if (open && toggle) return toggle();
   }, [open]);
-  import_react32.default.useEffect(() => {
+  import_react31.default.useEffect(() => {
     if (shortcut && shortcutControls && toggle) {
       return toggle();
     }
   }, [shortcutControls]);
   useDisabledScroll(lock && Boolean(states.open));
-  return /* @__PURE__ */ import_react32.default.createElement(import_react32.default.Fragment, null, states.open && /* @__PURE__ */ import_react32.default.createElement(import_react32.default.Fragment, null, /* @__PURE__ */ import_react32.default.createElement(
+  return /* @__PURE__ */ import_react31.default.createElement(import_react31.default.Fragment, null, states.open && /* @__PURE__ */ import_react31.default.createElement(import_react31.default.Fragment, null, /* @__PURE__ */ import_react31.default.createElement(
     SheetWrapper,
     {
       role: "dialog",
@@ -3374,7 +4962,7 @@ var Sheet = (props) => {
       ...restProps
     },
     children
-  ), overlay && /* @__PURE__ */ import_react32.default.createElement(
+  ), overlay && /* @__PURE__ */ import_react31.default.createElement(
     Overlay,
     {
       onClick: () => toggle && toggle(!states.open),
@@ -3400,7 +4988,7 @@ var SheetTrigger = (props) => {
     if (onClick) onClick(event);
     if (toggle) toggle(!states.open);
   };
-  return /* @__PURE__ */ import_react32.default.createElement(
+  return /* @__PURE__ */ import_react31.default.createElement(
     Button,
     {
       id: id.triggerId,
@@ -3420,11 +5008,11 @@ Sheet.Root = SheetRoot;
 Sheet.Trigger = SheetTrigger;
 
 // src/shimmer/index.tsx
-var import_react33 = __toESM(require("react"));
+var import_react32 = __toESM(require("react"));
 
 // src/shimmer/styles/index.ts
-var import_styled_components19 = __toESM(require("styled-components"));
-var shimmer = import_styled_components19.keyframes`
+var import_styled_components18 = __toESM(require("styled-components"));
+var shimmer = import_styled_components18.keyframes`
   0% {
     background-position: 200% center;
   }
@@ -3432,7 +5020,7 @@ var shimmer = import_styled_components19.keyframes`
     background-position: -200% center;
   }
 `;
-var TextShimmerWrapper = import_styled_components19.default.span`
+var TextShimmerWrapper = import_styled_components18.default.span`
   background: linear-gradient(
     90deg,
     ${({ "data-base-color": baseColor }) => baseColor} 0%,
@@ -3465,7 +5053,7 @@ var Shimmer = (props) => {
     baseColor = DEFAULT_BASE_COLOR,
     ...restProps
   } = props;
-  return /* @__PURE__ */ import_react33.default.createElement(
+  return /* @__PURE__ */ import_react32.default.createElement(
     TextShimmerWrapper,
     {
       "data-raw": Boolean(raw),
@@ -3482,13 +5070,13 @@ var Shimmer = (props) => {
 Shimmer.displayName = "Shimmer";
 
 // src/scrollarea/index.tsx
-var import_react34 = __toESM(require("react"));
+var import_react33 = __toESM(require("react"));
 var ScrollArea = ({
   scrollbar = false,
   children,
   ...restProps
 }) => {
-  return /* @__PURE__ */ import_react34.default.createElement(
+  return /* @__PURE__ */ import_react33.default.createElement(
     ScrollAreaWrapper,
     {
       "aria-hidden": "true",
@@ -3500,59 +5088,84 @@ var ScrollArea = ({
 };
 
 // src/spinner/index.tsx
-var import_react35 = __toESM(require("react"));
+var import_react34 = __toESM(require("react"));
 
 // src/spinner/styles/index.ts
-var import_styled_components20 = __toESM(require("styled-components"));
-var Rotate = import_styled_components20.keyframes`
-    0% {
-        transform: rotate(0deg);
-    }
-    100% {
-        transform: rotate(360deg);
-    }
+var import_styled_components19 = __toESM(require("styled-components"));
+var Rotate = import_styled_components19.keyframes`
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
 `;
-var FieldSizeStyles2 = import_styled_components20.css`
+var SpinnerSizeStyles = import_styled_components19.css`
   &[data-size="small"] {
-    width: var(--measurement-medium-40);
-    height: var(--measurement-medium-40);
+    width: 12px;
+    height: 12px;
   }
   &[data-size="medium"] {
-    width: var(--measurement-medium-50);
-    height: var(--measurement-medium-50);
+    width: 18px;
+    height: 18px;
   }
   &[data-size="large"] {
-    width: var(--measurement-medium-60);
-    height: var(--measurement-medium-60);
+    width: 24px;
+    height: 24px;
   }
 `;
-var RotatingSpinner = import_styled_components20.default.span`
-  padding: 0;
-  margin: 0;
-
-  display: inline-block;
-  box-sizing: border-box;
+var CircleStyles = import_styled_components19.css`
+  border: var(--measurement-small-80) solid var(--font-color-alpha-10);
+  border-bottom-color: transparent;
+  border-radius: var(--measurement-large-90);
 
+  animation: ${Rotate} 0.8s linear infinite;
+`;
+var CircleFilledStyles = import_styled_components19.css`
   border: var(--measurement-small-60) solid var(--font-color-alpha-30);
+
+  border-top-color: transparent;
+  border-right-color: transparent;
   border-bottom-color: transparent;
+
   border-radius: var(--measurement-large-90);
+  background-color: var(--font-color-alpha-10);
+
+  &::before {
+    position: absolute;
+    content: "";
+    width: 100%;
+    height: 100%;
+    background-color: var(--body-color);
+    border-radius: var(--measurement-large-90);
+  }
 
-  animation: ${Rotate} 1s linear infinite;
+  animation: ${Rotate} 0.8s linear infinite;
+`;
+var AnimatedSpinner = import_styled_components19.default.div`
+  ${SpinnerSizeStyles}
 
-  ${FieldSizeStyles2}
+  &[data-variant="circle"] {
+    ${CircleStyles}
+  }
+  &[data-variant="circle-filled"] {
+    ${CircleFilledStyles}
+  }
 `;
 
 // src/spinner/index.tsx
 var Spinner = (props) => {
-  return /* @__PURE__ */ import_react35.default.createElement(RotatingSpinner, { "data-size": props.sizing ?? "medium" });
+  return /* @__PURE__ */ import_react34.default.createElement(
+    AnimatedSpinner,
+    {
+      "data-variant": props?.variant ?? "circle",
+      "data-size": props?.sizing ?? "medium"
+    }
+  );
 };
 
 // src/skeleton/index.tsx
-var import_react36 = __toESM(require("react"));
+var import_react35 = __toESM(require("react"));
 
 // src/skeleton/styles/index.ts
-var import_styled_components21 = __toESM(require("styled-components"));
-var SkeletonBlink = import_styled_components21.keyframes`
+var import_styled_components20 = __toESM(require("styled-components"));
+var SkeletonBlink = import_styled_components20.keyframes`
     0% {
       opacity: 0.3;
     }
@@ -3560,7 +5173,7 @@ var SkeletonBlink = import_styled_components21.keyframes`
       opacity: 0.1;
     }
 `;
-var SkeletonBaseStyles = import_styled_components21.css`
+var SkeletonBaseStyles = import_styled_components20.css`
   background: linear-gradient(
     45deg,
     var(--font-color-alpha-10),
@@ -3568,7 +5181,7 @@ var SkeletonBaseStyles = import_styled_components21.css`
   );
   animation: ${SkeletonBlink} 1s ease-in-out alternate-reverse infinite;
 `;
-var SkeletonSizeStyles = import_styled_components21.css`
+var SkeletonSizeStyles = import_styled_components20.css`
   &[data-size="small"] {
     width: 100%;
 
@@ -3586,7 +5199,7 @@ var SkeletonSizeStyles = import_styled_components21.css`
     min-height: var(--measurement-medium-90);
   }
 `;
-var SkeletonShapeStyles = import_styled_components21.css`
+var SkeletonShapeStyles = import_styled_components20.css`
   &[data-shape="square"] {
     border-radius: 0;
   }
@@ -3597,7 +5210,7 @@ var SkeletonShapeStyles = import_styled_components21.css`
     border-radius: var(--measurement-large-90);
   }
 `;
-var SkeletonLoader = import_styled_components21.default.span`
+var SkeletonLoader = import_styled_components20.default.span`
   ${SkeletonBaseStyles}
   ${SkeletonSizeStyles}
   ${SkeletonShapeStyles}
@@ -3607,10 +5220,10 @@ var SkeletonLoader = import_styled_components21.default.span`
 var Skeleton = (props) => {
   const {
     sizing = "medium" /* Medium */,
-    shape = "smooth",
+    shape = "smooth" /* Smooth */,
     ...restProps
   } = props;
-  return /* @__PURE__ */ import_react36.default.createElement(
+  return /* @__PURE__ */ import_react35.default.createElement(
     SkeletonLoader,
     {
       "data-size": sizing,
@@ -3623,26 +5236,26 @@ var Skeleton = (props) => {
 Skeleton.displayName = "Skeleton";
 
 // src/switch/index.tsx
-var import_react38 = __toESM(require("react"));
+var import_react37 = __toESM(require("react"));
 
 // src/switch/hooks/index.tsx
-var import_react37 = __toESM(require("react"));
+var import_react36 = __toESM(require("react"));
 var defaultComponentAPI7 = {
   id: "",
   states: {},
   methods: {}
 };
-var SwitchContext = (0, import_react37.createContext)(defaultComponentAPI7);
-var useSwitch = () => (0, import_react37.useContext)(SwitchContext);
+var SwitchContext = (0, import_react36.createContext)(defaultComponentAPI7);
+var useSwitch = () => (0, import_react36.useContext)(SwitchContext);
 var SwitchProvider = ({
   children
 }) => {
   const context = useSwitchProvider();
-  return /* @__PURE__ */ import_react37.default.createElement(SwitchContext.Provider, { value: context }, children);
+  return /* @__PURE__ */ import_react36.default.createElement(SwitchContext.Provider, { value: context }, children);
 };
 function useSwitchProvider() {
-  const [checked, setChecked] = (0, import_react37.useState)(false);
-  const switchId = import_react37.default.useId();
+  const [checked, setChecked] = (0, import_react36.useState)(false);
+  const switchId = import_react36.default.useId();
   return {
     id: switchId,
     states: {
@@ -3655,8 +5268,8 @@ function useSwitchProvider() {
 }
 
 // src/switch/styles/index.ts
-var import_styled_components22 = __toESM(require("styled-components"));
-var SwitchDefaultStyles = import_styled_components22.css`
+var import_styled_components21 = __toESM(require("styled-components"));
+var SwitchDefaultStyles = import_styled_components21.css`
   all: unset;
 
   border: var(--measurement-small-10) solid transparent;
@@ -3670,105 +5283,105 @@ var SwitchDefaultStyles = import_styled_components22.css`
     opacity: 0.6;
   }
 `;
-var SwitchVariantsStyles = import_styled_components22.css`
-  &[data-variant="primary"] {
+var SwitchVariantsStyles = import_styled_components21.css`
+  &[data-variant="accent"] {
     &[aria-checked="true"] {
-      background-color: var(--color-green);
-      border-color: var(--font-color-alpha-10);
+      background-color: var(--color-accent);
+      border-color: var(--alpha-accent-10);
     }
     &[aria-checked="false"] {
       background-color: var(--font-color-alpha-10);
       border-color: var(--font-color-alpha-10);
     }
   }
-  &[data-variant="secondary"] {
-    &[aria-checked="true"] {
-      background-color: var(--font-color-alpha-10);
-      border-color: var(--font-color-alpha-10);
-    }
-    &[aria-checked="false"] {
-      background-color: var(--body-color-alpha-10);
-    }
-  }
-
-  &[data-variant="ghost"] {
+  &[data-variant="primary"] {
     &[aria-checked="true"] {
+      background-color: var(--color-green);
       border-color: var(--font-color-alpha-10);
-      background-color: var(--body-color-alpha-10);
     }
     &[aria-checked="false"] {
+      background-color: var(--font-color-alpha-10);
       border-color: var(--font-color-alpha-10);
     }
   }
 `;
-var SwitchSizeStyles = import_styled_components22.css`
+var SwitchSizeStyles = import_styled_components21.css`
   &[data-size="small"] {
-    width: calc(var(--measurement-medium-60) * 1.33);
-    height: var(--measurement-medium-50);
+    --thumb-size: calc(
+      var(--measurement-medium-40) - var(--measurement-small-10)
+    );
+
+    padding: 0 var(--measurement-small-10);
+    width: calc(var(--thumb-size) * 2);
+    height: var(--measurement-medium-40);
 
     span {
-      width: var(--measurement-medium-40);
-      height: var(--measurement-medium-40);
+      width: var(--thumb-size);
+      height: var(--thumb-size);
+
       &[data-checked="true"] {
-        transform: translateX(var(--measurement-medium-40));
-      }
-      &[data-checked="false"] {
-        transform: translateX(var(--measurement-small-60));
+        transform: translateX(var(--thumb-size));
       }
     }
   }
-
   &[data-size="medium"] {
-    width: calc(var(--measurement-medium-60) * 1.66);
+    --thumb-size: calc(
+      var(--measurement-medium-60) - var(--measurement-small-10)
+    );
+
+    padding: 0 var(--measurement-small-10);
+    width: calc(var(--thumb-size) * 2);
     height: var(--measurement-medium-60);
 
     span {
-      width: var(--measurement-medium-50);
-      height: var(--measurement-medium-50);
+      width: var(--thumb-size);
+      height: var(--thumb-size);
+
       &[data-checked="true"] {
-        transform: translateX(var(--measurement-medium-50));
-      }
-      &[data-checked="false"] {
-        transform: translateX(var(--measurement-small-60));
+        transform: translateX(var(--thumb-size));
       }
     }
   }
-
   &[data-size="large"] {
-    width: calc(var(--measurement-medium-60) * 2.33);
+    --thumb-size: calc(
+      var(--measurement-medium-70) - var(--measurement-small-30)
+    );
+
+    padding: 0 var(--measurement-small-30);
+    width: calc(var(--thumb-size) * 2);
     height: var(--measurement-medium-70);
 
     span {
-      width: var(--measurement-medium-60);
-      height: var(--measurement-medium-60);
+      width: var(--thumb-size);
+      height: var(--thumb-size);
+
       &[data-checked="true"] {
-        transform: translateX(calc(var(--measurement-medium-60) * 1.133));
-      }
-      &[data-checked="false"] {
-        transform: translateX(var(--measurement-small-80));
+        transform: translateX(var(--thumb-size));
       }
     }
   }
 `;
-var TriggerWrapper = import_styled_components22.default.button`
+var TriggerWrapper = import_styled_components21.default.button`
   &[data-raw="false"] {
     ${SwitchDefaultStyles}
     ${SwitchVariantsStyles}
     ${SwitchSizeStyles}
   }
 `;
-var Thumb = import_styled_components22.default.span`
+var Thumb = import_styled_components21.default.span`
   &[data-raw="false"] {
     all: unset;
     display: block;
 
-    background: var(--font-color-alpha-60);
-    border-radius: 100%;
-    transition: all 0.1s ease-in-out 0.2s;
+    background: white;
+    border-radius: var(--measurement-large-90);
+    box-shadow:
+      0 var(--measurement-small-30) var(--measurement-small-80)
+        var(--alpha-mono-darkest-10),
+      0 var(--measurement-small-30) var(--measurement-small-60)
+        calc(var(--measurement-small-30) * -1) var(--alpha-mono-darkest-10);
 
-    &[data-checked="true"] {
-      background: var(--font-color);
-    }
+    transition: all 0.1s ease-in-out 0.2s;
   }
 `;
 
@@ -3791,10 +5404,10 @@ var Switch = (props) => {
     if (onClick) onClick(event);
     if (toggleSwitch) toggleSwitch();
   };
-  import_react38.default.useEffect(() => {
+  import_react37.default.useEffect(() => {
     if (defaultChecked && toggleSwitch) toggleSwitch();
   }, [defaultChecked]);
-  return /* @__PURE__ */ import_react38.default.createElement(
+  return /* @__PURE__ */ import_react37.default.createElement(
     TriggerWrapper,
     {
       type: "button",
@@ -3810,19 +5423,19 @@ var Switch = (props) => {
       "data-raw": Boolean(raw),
       ...restProps
     },
-    /* @__PURE__ */ import_react38.default.createElement("title", null, "Switch"),
+    /* @__PURE__ */ import_react37.default.createElement("title", null, "Switch"),
     children
   );
 };
 Switch.displayName = "Switch";
 var SwitchRoot = ({ children }) => {
-  return /* @__PURE__ */ import_react38.default.createElement(SwitchProvider, null, children);
+  return /* @__PURE__ */ import_react37.default.createElement(SwitchProvider, null, children);
 };
 SwitchRoot.displayName = "Switch.Root";
 var SwitchThumb = (props) => {
   const { raw, sizing } = props;
   const { id, states } = useSwitch();
-  return /* @__PURE__ */ import_react38.default.createElement(
+  return /* @__PURE__ */ import_react37.default.createElement(
     Thumb,
     {
       role: "presentation",
@@ -3842,11 +5455,11 @@ Switch.Root = SwitchRoot;
 Switch.Thumb = SwitchThumb;
 
 // src/table/index.tsx
-var import_react39 = __toESM(require("react"));
+var import_react38 = __toESM(require("react"));
 
 // src/table/styles/index.ts
-var import_styled_components23 = __toESM(require("styled-components"));
-var CellStyles = import_styled_components23.css`
+var import_styled_components22 = __toESM(require("styled-components"));
+var CellStyles = import_styled_components22.css`
   box-sizing: border-box;
   border: none;
   line-height: 1;
@@ -3856,11 +5469,11 @@ var CellStyles = import_styled_components23.css`
     var(--fontsize-small-10) - ((var(--fontsize-small-10) * 1.066))
   );
 `;
-var TableLayer = import_styled_components23.default.div`
+var TableLayer = import_styled_components22.default.div`
   border-radius: var(--measurement-medium-30);
   border: var(--measurement-small-10) solid var(--font-color-alpha-10);
 `;
-var TableWrapper = import_styled_components23.default.table`
+var TableWrapper = import_styled_components22.default.table`
   border-collapse: collapse;
 
   tbody {
@@ -3871,7 +5484,7 @@ var TableWrapper = import_styled_components23.default.table`
     }
   }
 `;
-var RowWrapper = import_styled_components23.default.tr`
+var RowWrapper = import_styled_components22.default.tr`
   border-bottom: var(--measurement-small-10) solid var(--font-color-alpha-10);
 
   transition: background-color linear 0.1s;
@@ -3880,7 +5493,7 @@ var RowWrapper = import_styled_components23.default.tr`
     background-color: var(--font-color-alpha-10);
   }
 `;
-var HeadCellWrapper = import_styled_components23.default.th`
+var HeadCellWrapper = import_styled_components22.default.th`
   font-size: var(--fontsize-medium-10);
   ${CellStyles}
 
@@ -3888,7 +5501,7 @@ var HeadCellWrapper = import_styled_components23.default.th`
     color: var(--font-color-alpha-60);
   }
 `;
-var CellWrapper = import_styled_components23.default.td`
+var CellWrapper = import_styled_components22.default.td`
   ${CellStyles}
 `;
 
@@ -3897,43 +5510,43 @@ var Table = ({
   children,
   ...restProps
 }) => {
-  return /* @__PURE__ */ import_react39.default.createElement(ScrollArea, { as: TableLayer, role: "presentation", tabIndex: -1 }, /* @__PURE__ */ import_react39.default.createElement(TableWrapper, { ...restProps, cellSpacing: "0", cellPadding: "0" }, children));
+  return /* @__PURE__ */ import_react38.default.createElement(ScrollArea, { as: TableLayer, role: "presentation", tabIndex: -1 }, /* @__PURE__ */ import_react38.default.createElement(TableWrapper, { ...restProps, cellSpacing: "0", cellPadding: "0" }, children));
 };
 Table.displayName = "Table";
 var TableHead = ({
   children,
   ...restProps
 }) => {
-  return /* @__PURE__ */ import_react39.default.createElement("thead", { ...restProps }, children);
+  return /* @__PURE__ */ import_react38.default.createElement("thead", { ...restProps }, children);
 };
 TableHead.displayName = "Table.Head";
 var TableBody = ({
   children,
   ...restProps
 }) => {
-  return /* @__PURE__ */ import_react39.default.createElement("tbody", { ...restProps }, children);
+  return /* @__PURE__ */ import_react38.default.createElement("tbody", { ...restProps }, children);
 };
 TableBody.displayName = "Table.Body";
 var TableHeadCell = ({
   children,
   ...restProps
 }) => {
-  return /* @__PURE__ */ import_react39.default.createElement(HeadCellWrapper, { colSpan: 1, ...restProps }, /* @__PURE__ */ import_react39.default.createElement("div", { className: "flex align-center g-medium-30" }, children));
+  return /* @__PURE__ */ import_react38.default.createElement(HeadCellWrapper, { colSpan: 1, ...restProps }, /* @__PURE__ */ import_react38.default.createElement("div", { className: "flex align-center g-medium-30" }, children));
 };
 TableHeadCell.displayName = "Table.HeadCell";
 var TableRow = ({ children, ...restProps }) => {
-  return /* @__PURE__ */ import_react39.default.createElement(RowWrapper, { className: "p-medium-30", ...restProps }, children);
+  return /* @__PURE__ */ import_react38.default.createElement(RowWrapper, { className: "p-medium-30", ...restProps }, children);
 };
 TableRow.displayName = "Table.Row";
 var TableCell = ({ children, ...restProps }) => {
-  return /* @__PURE__ */ import_react39.default.createElement(CellWrapper, { ...restProps }, /* @__PURE__ */ import_react39.default.createElement("div", { className: "flex align-center g-medium-30" }, children));
+  return /* @__PURE__ */ import_react38.default.createElement(CellWrapper, { ...restProps }, /* @__PURE__ */ import_react38.default.createElement("div", { className: "flex align-center g-medium-30" }, children));
 };
 TableCell.displayName = "Table.Cell";
 var TableFooter = ({
   children,
   ...restProps
 }) => {
-  return /* @__PURE__ */ import_react39.default.createElement("tfoot", { ...restProps }, children);
+  return /* @__PURE__ */ import_react38.default.createElement("tfoot", { ...restProps }, children);
 };
 TableFooter.displayName = "Table.Footer";
 Table.Head = TableHead;
@@ -3944,26 +5557,26 @@ Table.Cell = TableCell;
 Table.Footer = TableFooter;
 
 // src/tabs/index.tsx
-var import_react41 = __toESM(require("react"));
+var import_react40 = __toESM(require("react"));
 
 // src/tabs/hooks/index.tsx
-var import_react40 = __toESM(require("react"));
+var import_react39 = __toESM(require("react"));
 var defaultComponentAPI8 = {
   id: "",
   states: {},
   methods: {}
 };
-var TabsContext = (0, import_react40.createContext)(defaultComponentAPI8);
-var useTabs = () => (0, import_react40.useContext)(TabsContext);
+var TabsContext = (0, import_react39.createContext)(defaultComponentAPI8);
+var useTabs = () => (0, import_react39.useContext)(TabsContext);
 var TabsProvider = ({
   children
 }) => {
   const context = useTabsProvider();
-  return /* @__PURE__ */ import_react40.default.createElement(TabsContext.Provider, { value: context }, children);
+  return /* @__PURE__ */ import_react39.default.createElement(TabsContext.Provider, { value: context }, children);
 };
 function useTabsProvider() {
-  const [value, setValue] = (0, import_react40.useState)(null);
-  const tabsId = import_react40.default.useId();
+  const [value, setValue] = (0, import_react39.useState)(null);
+  const tabsId = import_react39.default.useId();
   return {
     id: tabsId,
     states: {
@@ -3977,8 +5590,8 @@ function useTabsProvider() {
 }
 
 // src/tabs/styles/index.ts
-var import_styled_components24 = __toESM(require("styled-components"));
-var TabWrapper = import_styled_components24.default.div`
+var import_styled_components23 = __toESM(require("styled-components"));
+var TabWrapper = import_styled_components23.default.div`
   button {
     &[aria-selected="true"] {
       color: var(--font-color) !important;
@@ -3991,22 +5604,22 @@ var Tabs = (props) => {
   const { defaultOpen, children, ...restProps } = props;
   const { methods } = useTabs();
   const { applyValue } = methods;
-  const childArray = import_react41.Children.toArray(children);
+  const childArray = import_react40.Children.toArray(children);
   const firstChild = childArray[0];
-  import_react41.default.useEffect(() => {
-    if (import_react41.default.isValidElement(firstChild)) {
+  import_react40.default.useEffect(() => {
+    if (import_react40.default.isValidElement(firstChild)) {
       if (childArray.length > 0 && applyValue)
         applyValue(firstChild.props.value);
     }
   }, []);
-  import_react41.default.useEffect(() => {
+  import_react40.default.useEffect(() => {
     if (defaultOpen && applyValue) applyValue(defaultOpen);
   }, []);
-  return /* @__PURE__ */ import_react41.default.createElement(TabWrapper, { role: "tablist", ...restProps }, children);
+  return /* @__PURE__ */ import_react40.default.createElement(TabWrapper, { role: "tablist", ...restProps }, children);
 };
 Tabs.displayName = "Tabs";
 var TabsRoot = ({ children }) => {
-  return /* @__PURE__ */ import_react41.default.createElement(TabsProvider, null, children);
+  return /* @__PURE__ */ import_react40.default.createElement(TabsProvider, null, children);
 };
 TabsRoot.displayName = "Tabs.Root";
 var TabsTrigger = (props) => {
@@ -4022,7 +5635,7 @@ var TabsTrigger = (props) => {
     if (applyValue) applyValue(value);
     if (onClick) onClick(event);
   };
-  return /* @__PURE__ */ import_react41.default.createElement(
+  return /* @__PURE__ */ import_react40.default.createElement(
     Button,
     {
       type: "button",
@@ -4050,7 +5663,7 @@ var TabsContent = (props) => {
     trigger: getTabsId && getTabsId({ value, type: "trigger" }),
     content: getTabsId && getTabsId({ value, type: "content" })
   };
-  return /* @__PURE__ */ import_react41.default.createElement(
+  return /* @__PURE__ */ import_react40.default.createElement(
     "div",
     {
       tabIndex: 0,
@@ -4071,11 +5684,11 @@ Tabs.Trigger = TabsTrigger;
 Tabs.Content = TabsContent;
 
 // src/text-area/index.tsx
-var import_react42 = __toESM(require("react"));
+var import_react41 = __toESM(require("react"));
 
 // src/text-area/styles/index.ts
-var import_styled_components25 = __toESM(require("styled-components"));
-var CustomScrollbar2 = import_styled_components25.css`
+var import_styled_components24 = __toESM(require("styled-components"));
+var CustomScrollbar2 = import_styled_components24.css`
   height: ${({ $height }) => $height ?? "100%"};
   width: ${({ $width }) => $width ?? "100%"};
   overflow-y: auto;
@@ -4107,7 +5720,7 @@ var CustomScrollbar2 = import_styled_components25.css`
   scrollbar-width: thin;
   scrollbar-color: ${({ $thumbColor, $trackColor }) => `${$thumbColor ?? "var(--font-color-alpha-10)"} ${$trackColor ?? "transparent"}`};
 `;
-var TextareaSizeStyles = import_styled_components25.css`
+var TextareaSizeStyles = import_styled_components24.css`
   padding: var(--measurement-medium-30);
   max-height: var(--measurement-large-60);
 
@@ -4122,7 +5735,7 @@ var TextareaSizeStyles = import_styled_components25.css`
     max-height: var(--measurement-large-80);
   }
 `;
-var TextareaResizableStyles = import_styled_components25.css`
+var TextareaResizableStyles = import_styled_components24.css`
   &[data-resizable="true"] {
     resize: vertical;
   }
@@ -4130,7 +5743,7 @@ var TextareaResizableStyles = import_styled_components25.css`
     resize: none;
   }
 `;
-var TextAreaContainer = import_styled_components25.default.textarea`
+var TextAreaContainer = import_styled_components24.default.textarea`
   &[data-raw="false"] {
     ${FieldDefaultStyles}
     ${FieldShapeStyles}
@@ -4146,7 +5759,7 @@ var TextAreaContainer = import_styled_components25.default.textarea`
 // src/text-area/index.tsx
 var Textarea = (props) => {
   const { raw, shape, sizing, variant, resizable, onChange } = props;
-  const textareaRef = import_react42.default.useRef(null);
+  const textareaRef = import_react41.default.useRef(null);
   const adjustHeight = () => {
     const textarea = textareaRef.current;
     if (textarea) {
@@ -4161,14 +5774,14 @@ var Textarea = (props) => {
     adjustHeight();
     onChange?.(e);
   };
-  import_react42.default.useEffect(() => adjustHeight(), [props.value]);
-  return /* @__PURE__ */ import_react42.default.createElement(
+  import_react41.default.useEffect(() => adjustHeight(), [props.value]);
+  return /* @__PURE__ */ import_react41.default.createElement(
     TextAreaContainer,
     {
       ref: textareaRef,
       onChange: handleChange,
-      "data-variant": variant ?? "secondary",
-      "data-shape": shape ?? "smooth",
+      "data-variant": variant ?? "secondary" /* Secondary */,
+      "data-shape": shape ?? "smooth" /* Smooth */,
       "data-size": sizing ?? "medium" /* Medium */,
       "data-resizable": resizable,
       "data-raw": String(Boolean(raw)),
@@ -4179,22 +5792,22 @@ var Textarea = (props) => {
 Textarea.displayName = "Textarea";
 
 // src/toggle/index.tsx
-var import_react43 = __toESM(require("react"));
+var import_react42 = __toESM(require("react"));
 var Toggle = (props) => {
   const { defaultChecked, onClick, disabled, children, ...restProps } = props;
-  const [checked, setChecked] = import_react43.default.useState(
+  const [checked, setChecked] = import_react42.default.useState(
     defaultChecked ?? false
   );
   const handleClick = (event) => {
     if (onClick) onClick(event);
     if (!disabled) setChecked((prevChecked) => !prevChecked);
   };
-  import_react43.default.useEffect(() => {
+  import_react42.default.useEffect(() => {
     if (defaultChecked !== void 0) {
       setChecked(Boolean(defaultChecked));
     }
   }, [defaultChecked]);
-  return /* @__PURE__ */ import_react43.default.createElement(
+  return /* @__PURE__ */ import_react42.default.createElement(
     Button,
     {
       role: "switch",
@@ -4212,26 +5825,26 @@ var Toggle = (props) => {
 Toggle.displayName = "Toggle";
 
 // src/toolbar/index.tsx
-var import_react45 = __toESM(require("react"));
+var import_react44 = __toESM(require("react"));
 
 // src/toolbar/hooks/index.tsx
-var import_react44 = __toESM(require("react"));
+var import_react43 = __toESM(require("react"));
 var defaultComponentAPI9 = {
   id: "",
   states: {},
   methods: {}
 };
-var ToolbarContext = (0, import_react44.createContext)(defaultComponentAPI9);
-var useToolbar = () => (0, import_react44.useContext)(ToolbarContext);
+var ToolbarContext = (0, import_react43.createContext)(defaultComponentAPI9);
+var useToolbar = () => (0, import_react43.useContext)(ToolbarContext);
 var ToolbarProvider = ({
   children
 }) => {
   const context = useToolbarProvider();
-  return /* @__PURE__ */ import_react44.default.createElement(ToolbarContext.Provider, { value: context }, children);
+  return /* @__PURE__ */ import_react43.default.createElement(ToolbarContext.Provider, { value: context }, children);
 };
 function useToolbarProvider() {
-  const [expanded, setExpanded] = (0, import_react44.useState)(false);
-  const toolbarId = import_react44.default.useId();
+  const [expanded, setExpanded] = (0, import_react43.useState)(false);
+  const toolbarId = import_react43.default.useId();
   return {
     id: toolbarId,
     states: {
@@ -4244,8 +5857,8 @@ function useToolbarProvider() {
 }
 
 // src/toolbar/styles/index.ts
-var import_styled_components26 = __toESM(require("styled-components"));
-var ToolbarDefaultStyles = import_styled_components26.css`
+var import_styled_components25 = __toESM(require("styled-components"));
+var ToolbarDefaultStyles = import_styled_components25.css`
   margin: 0;
   display: grid;
   grid-template-rows: min-content;
@@ -4279,7 +5892,7 @@ var ToolbarDefaultStyles = import_styled_components26.css`
     }
   }
 `;
-var ToolbarSizeStyles = import_styled_components26.css`
+var ToolbarSizeStyles = import_styled_components25.css`
   &[data-size="small"] {
     &[aria-orientation="vertical"] {
       max-width: var(--measurement-large-70);
@@ -4325,7 +5938,7 @@ var ToolbarSizeStyles = import_styled_components26.css`
     }
   }
 `;
-var ToolbarSideStyles = import_styled_components26.css`
+var ToolbarSideStyles = import_styled_components25.css`
   &[data-side="top"] {
     border-bottom-color: var(--font-color-alpha-10);
   }
@@ -4357,7 +5970,7 @@ var ToolbarSideStyles = import_styled_components26.css`
     }
   }
 `;
-var ToolbarWrapper = import_styled_components26.default.menu`
+var ToolbarWrapper = import_styled_components25.default.menu`
   &[data-raw="false"] {
     ${ToolbarDefaultStyles}
     ${ToolbarSizeStyles}
@@ -4365,7 +5978,7 @@ var ToolbarWrapper = import_styled_components26.default.menu`
     ${ToolbarSideStyles}
   }
 `;
-var ToolbarTriggerWrapper = import_styled_components26.default.menu`
+var ToolbarTriggerWrapper = import_styled_components25.default.menu`
   &[data-raw="false"] {
     all: unset;
     align-self: flex-end;
@@ -4390,13 +6003,13 @@ var Toolbar = (props) => {
   const { toggleToolbar } = methods;
   const shortcutControls = useKeyPress(String(hotkey), true, bindkey);
   const orientation = side && ["left", "right"].includes(side) ? "vertical" : "horizontal";
-  import_react45.default.useEffect(() => {
+  import_react44.default.useEffect(() => {
     if (defaultOpen && toggleToolbar) return toggleToolbar(true);
   }, [defaultOpen]);
-  import_react45.default.useEffect(() => {
+  import_react44.default.useEffect(() => {
     if (shortcut && shortcutControls && toggleToolbar) toggleToolbar();
   }, [shortcutControls]);
-  return /* @__PURE__ */ import_react45.default.createElement(
+  return /* @__PURE__ */ import_react44.default.createElement(
     ToolbarWrapper,
     {
       id,
@@ -4416,7 +6029,7 @@ var Toolbar = (props) => {
 };
 Toolbar.displayName = "Toolbar";
 var ToolbarRoot = ({ children }) => {
-  return /* @__PURE__ */ import_react45.default.createElement(ToolbarProvider, null, children);
+  return /* @__PURE__ */ import_react44.default.createElement(ToolbarProvider, null, children);
 };
 ToolbarRoot.displayName = "Toolbar.Root";
 var ToolbarTrigger = (props) => {
@@ -4434,7 +6047,7 @@ var ToolbarTrigger = (props) => {
     if (onClick) onClick(event);
     if (toggleToolbar) toggleToolbar(!states.expanded);
   };
-  return /* @__PURE__ */ import_react45.default.createElement(ToolbarTriggerWrapper, { "data-raw": Boolean(raw) }, /* @__PURE__ */ import_react45.default.createElement(
+  return /* @__PURE__ */ import_react44.default.createElement(ToolbarTriggerWrapper, { "data-raw": Boolean(raw) }, /* @__PURE__ */ import_react44.default.createElement(
     Button,
     {
       id: `${id}-trigger`,
@@ -4452,13 +6065,13 @@ var ToolbarSection = (props) => {
   const { showoncollapse, children, ...restProps } = props;
   const { states } = useToolbar();
   const { expanded } = states;
-  if (showoncollapse) return /* @__PURE__ */ import_react45.default.createElement("section", { ...restProps }, children);
-  return /* @__PURE__ */ import_react45.default.createElement("section", { ...restProps }, expanded && children);
+  if (showoncollapse) return /* @__PURE__ */ import_react44.default.createElement("section", { ...restProps }, children);
+  return /* @__PURE__ */ import_react44.default.createElement("section", { ...restProps }, expanded && children);
 };
 ToolbarSection.displayName = "Toolbar.Section";
 var ToolbarItem = (props) => {
   const { showfirstchild, onClick, children, ...restProps } = props;
-  const childArray = import_react45.default.Children.toArray(children);
+  const childArray = import_react44.default.Children.toArray(children);
   const { id, states, methods } = useToolbar();
   const { expanded } = states;
   const { toggleToolbar } = methods;
@@ -4467,7 +6080,7 @@ var ToolbarItem = (props) => {
     if (onClick) onClick(event);
     if (toggleToolbar && !expanded) toggleToolbar(true);
   };
-  return /* @__PURE__ */ import_react45.default.createElement(
+  return /* @__PURE__ */ import_react44.default.createElement(
     "div",
     {
       tabIndex: -1,
@@ -4488,11 +6101,11 @@ Toolbar.Item = ToolbarItem;
 Toolbar.Section = ToolbarSection;
 
 // src/tooltip/index.tsx
-var import_react46 = __toESM(require("react"));
+var import_react45 = __toESM(require("react"));
 
 // src/tooltip/styles/index.ts
-var import_styled_components27 = __toESM(require("styled-components"));
-var FadeIn2 = import_styled_components27.keyframes`
+var import_styled_components26 = __toESM(require("styled-components"));
+var FadeIn = import_styled_components26.keyframes`
   0% {
     opacity: 0;
   }
@@ -4500,11 +6113,11 @@ var FadeIn2 = import_styled_components27.keyframes`
     opacity: 1;
   }
 `;
-var ContentBox = import_styled_components27.default.div`
+var ContentBox = import_styled_components26.default.div`
   display: inline-block;
   position: relative;
 `;
-var ContentWrapper2 = import_styled_components27.default.span`
+var ContentWrapper2 = import_styled_components26.default.span`
   &[data-raw="false"] {
     width: fit-content;
     max-width: var(--measurement-large-60);
@@ -4523,7 +6136,7 @@ var ContentWrapper2 = import_styled_components27.default.span`
     font-size: var(--fontsize-medium-10);
     z-index: var(--depth-default-100);
     animation-duration: 0.2s;
-    animation-name: ${FadeIn2};
+    animation-name: ${FadeIn};
     animation-fill-mode: backwards;
   }
 `;
@@ -4535,13 +6148,13 @@ var Tooltip = ({
   children,
   ...restProps
 }) => {
-  const [visible, setVisible] = import_react46.default.useState(false);
-  const [triggerProps, setTriggerProps] = import_react46.default.useState(null);
-  const [contentProps, setContentProps] = import_react46.default.useState(null);
-  const mounted = import_react46.default.useRef(false);
-  const containerRef = import_react46.default.useRef(null);
-  const contentRef = import_react46.default.useRef(null);
-  const timeoutRef = import_react46.default.useRef(null);
+  const [visible, setVisible] = import_react45.default.useState(false);
+  const [triggerProps, setTriggerProps] = import_react45.default.useState(null);
+  const [contentProps, setContentProps] = import_react45.default.useState(null);
+  const mounted = import_react45.default.useRef(false);
+  const containerRef = import_react45.default.useRef(null);
+  const contentRef = import_react45.default.useRef(null);
+  const timeoutRef = import_react45.default.useRef(null);
   const contentRect = () => contentRef?.current?.getBoundingClientRect();
   const bodyRect = () => {
     if (typeof document !== "undefined") {
@@ -4565,14 +6178,14 @@ var Tooltip = ({
   };
   const hasEnoughHorizontalSpace = Number(dimensions.body_width) - Number(dimensions.content_left) > Number(dimensions.content_width) * 1.1;
   const hasEnoughVerticalSpace = Number(dimensions.body_height) - Number(dimensions.content_bottom) > Number(dimensions.content_height) * 0.9;
-  const showTooltip = import_react46.default.useCallback(() => {
+  const showTooltip = import_react45.default.useCallback(() => {
     timeoutRef.current = setTimeout(() => setVisible(true), delay);
   }, [delay]);
-  const hideTooltip = import_react46.default.useCallback(() => {
+  const hideTooltip = import_react45.default.useCallback(() => {
     if (timeoutRef.current) clearTimeout(timeoutRef.current);
     setVisible(false);
   }, []);
-  const handleMouseEnter = import_react46.default.useCallback(() => {
+  const handleMouseEnter = import_react45.default.useCallback(() => {
     const rect = containerRef.current?.getBoundingClientRect();
     if (rect) {
       setTriggerProps({
@@ -4586,11 +6199,11 @@ var Tooltip = ({
       showTooltip();
     }
   }, [showTooltip]);
-  const handleMouseLeave = import_react46.default.useCallback(
+  const handleMouseLeave = import_react45.default.useCallback(
     () => hideTooltip(),
     [hideTooltip]
   );
-  import_react46.default.useEffect(() => {
+  import_react45.default.useEffect(() => {
     mounted.current = true;
     setContentProps && setContentProps({
       top: Number(contentRect()?.top),
@@ -4604,7 +6217,7 @@ var Tooltip = ({
       mounted.current = false;
     };
   }, [visible]);
-  return /* @__PURE__ */ import_react46.default.createElement(
+  return /* @__PURE__ */ import_react45.default.createElement(
     ContentBox,
     {
       ref: containerRef,
@@ -4614,7 +6227,7 @@ var Tooltip = ({
       ...restProps
     },
     children,
-    visible && /* @__PURE__ */ import_react46.default.createElement(
+    visible && /* @__PURE__ */ import_react45.default.createElement(
       ContentWrapper2,
       {
         ref: contentRef,
@@ -4629,24 +6242,24 @@ var Tooltip = ({
         "data-side": hasEnoughHorizontalSpace ? "left" /* Left */ : "right" /* Right */,
         "data-align": hasEnoughHorizontalSpace ? "left" /* Left */ : "right" /* Right */
       },
-      /* @__PURE__ */ import_react46.default.createElement("div", null, content)
+      /* @__PURE__ */ import_react45.default.createElement("div", null, content)
     )
   );
 };
 Tooltip.displayName = "Tooltip";
 
 // src/tree/index.tsx
-var import_react49 = __toESM(require("react"));
+var import_react48 = __toESM(require("react"));
 
 // src/tree/hooks/tree-provider.tsx
-var import_react47 = __toESM(require("react"));
+var import_react46 = __toESM(require("react"));
 var defaultTreeAPI = {
   id: "",
   states: {},
   methods: {}
 };
-var TreeContext = (0, import_react47.createContext)(defaultTreeAPI);
-var useTree = () => (0, import_react47.useContext)(TreeContext);
+var TreeContext = (0, import_react46.createContext)(defaultTreeAPI);
+var useTree = () => (0, import_react46.useContext)(TreeContext);
 var TreeProvider = ({
   children,
   defaultExpandedIds = [],
@@ -4656,17 +6269,17 @@ var TreeProvider = ({
     defaultExpandedIds,
     onSelectionChange
   });
-  return /* @__PURE__ */ import_react47.default.createElement(TreeContext.Provider, { value: context }, children);
+  return /* @__PURE__ */ import_react46.default.createElement(TreeContext.Provider, { value: context }, children);
 };
 function useTreeProviderContext({
   defaultExpandedIds,
   onSelectionChange
 }) {
-  const treeId = import_react47.default.useId();
-  const [expandedIds, setExpandedIds] = (0, import_react47.useState)(
+  const treeId = import_react46.default.useId();
+  const [expandedIds, setExpandedIds] = (0, import_react46.useState)(
     () => new Set(defaultExpandedIds)
   );
-  const [selectedIds, setSelectedIds] = (0, import_react47.useState)(() => /* @__PURE__ */ new Set());
+  const [selectedIds, setSelectedIds] = (0, import_react46.useState)(() => /* @__PURE__ */ new Set());
   return {
     id: treeId,
     states: {
@@ -4697,14 +6310,14 @@ function useTreeProviderContext({
 }
 
 // src/tree/hooks/tree-node-provider.tsx
-var import_react48 = __toESM(require("react"));
+var import_react47 = __toESM(require("react"));
 var defaultTreeNodeAPI = {
   id: "",
   states: {},
   methods: {}
 };
-var TreeNodeContext = (0, import_react48.createContext)(defaultTreeNodeAPI);
-var useTreeNode = () => (0, import_react48.useContext)(TreeNodeContext);
+var TreeNodeContext = (0, import_react47.createContext)(defaultTreeNodeAPI);
+var useTreeNode = () => (0, import_react47.useContext)(TreeNodeContext);
 var TreeNodeProvider = ({
   children,
   nodeId,
@@ -4712,7 +6325,7 @@ var TreeNodeProvider = ({
   isLast
 }) => {
   const context = useTreeNodeProviderContext({ nodeId, level, isLast });
-  return /* @__PURE__ */ import_react48.default.createElement(TreeNodeContext.Provider, { value: context }, children);
+  return /* @__PURE__ */ import_react47.default.createElement(TreeNodeContext.Provider, { value: context }, children);
 };
 function useTreeNodeProviderContext({
   nodeId,
@@ -4731,20 +6344,20 @@ function useTreeNodeProviderContext({
 }
 
 // src/tree/styles/index.ts
-var import_styled_components28 = __toESM(require("styled-components"));
-var TreeView = import_styled_components28.default.ul`
+var import_styled_components27 = __toESM(require("styled-components"));
+var TreeView = import_styled_components27.default.ul`
   display: flex;
   flex-direction: column;
   list-style: none;
   margin: 0;
   padding: 0;
 `;
-var TreeItem = import_styled_components28.default.li`
+var TreeItem = import_styled_components27.default.li`
   display: flex;
   flex-direction: column;
   list-style: none;
 `;
-var TreeNodeContent = import_styled_components28.default.ul`
+var TreeNodeContent = import_styled_components27.default.ul`
   display: flex;
   flex-direction: column;
   list-style: none;
@@ -4756,7 +6369,7 @@ var TreeNodeContent = import_styled_components28.default.ul`
 var Tree = (props) => {
   const { children, ...restProps } = props;
   const { id } = useTree();
-  return /* @__PURE__ */ import_react49.default.createElement(TreeView, { id, role: "tree", ...restProps }, children);
+  return /* @__PURE__ */ import_react48.default.createElement(TreeView, { id, role: "tree", ...restProps }, children);
 };
 Tree.displayName = "Tree";
 var TreeRoot = ({
@@ -4764,7 +6377,7 @@ var TreeRoot = ({
   defaultExpandedIds,
   onSelectionChange
 }) => {
-  return /* @__PURE__ */ import_react49.default.createElement(
+  return /* @__PURE__ */ import_react48.default.createElement(
     TreeProvider,
     {
       defaultExpandedIds,
@@ -4776,7 +6389,7 @@ var TreeRoot = ({
 TreeRoot.displayName = "Tree.Root";
 var TreeNode = (props) => {
   const { nodeId, level = 0, isLast = false, children, ...restProps } = props;
-  return /* @__PURE__ */ import_react49.default.createElement(TreeNodeProvider, { nodeId, level, isLast }, /* @__PURE__ */ import_react49.default.createElement(TreeItem, { role: "treeitem", "aria-level": level + 1, ...restProps }, children));
+  return /* @__PURE__ */ import_react48.default.createElement(TreeNodeProvider, { nodeId, level, isLast }, /* @__PURE__ */ import_react48.default.createElement(TreeItem, { role: "treeitem", "aria-level": level + 1, ...restProps }, children));
 };
 TreeNode.displayName = "Tree.Node";
 var TreeTrigger = (props) => {
@@ -4798,7 +6411,7 @@ var TreeTrigger = (props) => {
       toggleSelected && toggleSelected(nodeId);
     }
   };
-  return /* @__PURE__ */ import_react49.default.createElement(
+  return /* @__PURE__ */ import_react48.default.createElement(
     Button,
     {
       id: String(IdHandler.trigger),
@@ -4824,11 +6437,11 @@ var TreeContent = (props) => {
     trigger: getTreeId && getTreeId({ nodeId, type: "trigger" }),
     content: getTreeId && getTreeId({ nodeId, type: "content" })
   };
-  import_react49.default.useEffect(() => {
+  import_react48.default.useEffect(() => {
     if (defaultOpen && !isExpanded && toggleExpanded) toggleExpanded(nodeId);
   }, []);
   if (isExpanded)
-    return /* @__PURE__ */ import_react49.default.createElement(
+    return /* @__PURE__ */ import_react48.default.createElement(
       TreeNodeContent,
       {
         role: "group",
@@ -4839,13 +6452,410 @@ var TreeContent = (props) => {
       },
       children
     );
-  return /* @__PURE__ */ import_react49.default.createElement(import_react49.default.Fragment, null);
+  return /* @__PURE__ */ import_react48.default.createElement(import_react48.default.Fragment, null);
 };
 TreeContent.displayName = "Tree.Content";
 Tree.Root = TreeRoot;
 Tree.Node = TreeNode;
 Tree.Trigger = TreeTrigger;
 Tree.Content = TreeContent;
+
+// src/select/index.tsx
+var import_react50 = __toESM(require("react"));
+
+// src/select/hooks/index.tsx
+var import_react49 = __toESM(require("react"));
+var defaultComponentAPI10 = {
+  id: "",
+  states: {},
+  methods: {}
+};
+var SelectContext = import_react49.default.createContext(defaultComponentAPI10);
+var useSelect = () => import_react49.default.useContext(SelectContext);
+var SelectProvider = ({
+  children
+}) => {
+  const context = useSelectProvider();
+  return /* @__PURE__ */ import_react49.default.createElement(SelectContext.Provider, { value: context }, children);
+};
+function useSelectProvider() {
+  const DEFAULT_POSITIONS2 = {
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0
+  };
+  const DEFAULT_DIMENSIONS2 = {
+    width: 0,
+    height: 0
+  };
+  const [open, setOpen] = import_react49.default.useState(false);
+  const [value, setValue] = import_react49.default.useState(null);
+  const [label, setLabel] = import_react49.default.useState("");
+  const [contentProps, setContentProps] = import_react49.default.useState({
+    ...DEFAULT_POSITIONS2,
+    ...DEFAULT_DIMENSIONS2
+  });
+  const [triggerProps, setTriggerProps] = import_react49.default.useState({
+    ...DEFAULT_POSITIONS2,
+    ...DEFAULT_DIMENSIONS2
+  });
+  const triggerId = import_react49.default.useId();
+  const listboxId = import_react49.default.useId();
+  const composedId = `${triggerId}|${listboxId}`;
+  return {
+    id: composedId,
+    states: {
+      open,
+      value,
+      label,
+      contentProps,
+      triggerProps
+    },
+    methods: {
+      toggleOpen: () => setOpen(!open),
+      setOpen,
+      setValue,
+      setLabel,
+      setContentProps,
+      setTriggerProps
+    }
+  };
+}
+
+// src/select/styles/index.tsx
+var import_styled_components28 = __toESM(require("styled-components"));
+var Wrapper = import_styled_components28.default.div`
+  position: relative;
+  width: 100%;
+`;
+var Trigger = import_styled_components28.default.button`
+  all: unset;
+  box-sizing: border-box;
+
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--measurement-medium-10);
+
+  ${FieldDefaultStyles}
+  ${FieldVariantsStyles}
+  ${FieldShapeStyles}
+  ${FieldSizeStyles}
+
+
+  cursor: pointer !important;
+`;
+var Label2 = import_styled_components28.default.span`
+  flex: 1;
+  text-align: left;
+  font-weight: 400;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+var Content = import_styled_components28.default.ul`
+  @keyframes select-slide-in-down {
+    0% {
+      opacity: 0;
+      transform: translateY(calc(var(--measurement-small-60) * -1));
+    }
+    100% {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes select-slide-in-up {
+    0% {
+      opacity: 0;
+      transform: translateY(var(--measurement-small-60));
+    }
+    100% {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  &[data-raw="false"] {
+    position: fixed;
+    margin: 0;
+    box-sizing: border-box;
+
+    padding: var(--measurement-medium-30);
+
+    list-style: none;
+
+    background-color: var(--body-color);
+    border: var(--measurement-small-10) solid var(--font-color-alpha-10);
+    border-radius: var(--measurement-medium-30);
+
+    z-index: var(--depth-default-100);
+
+    height: auto;
+    max-height: var(--measurement-large-90);
+    overflow-y: auto;
+
+    animation-duration: 0.2s;
+    animation-fill-mode: backwards;
+
+    &[data-side="bottom"] {
+      animation-name: select-slide-in-down;
+    }
+
+    &[data-side="top"] {
+      animation-name: select-slide-in-up;
+    }
+  }
+`;
+var List = import_styled_components28.default.li`
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  user-select: none;
+
+  &[data-raw="false"] {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--measurement-medium-10);
+
+    padding: var(--measurement-medium-30);
+    border-radius: var(--measurement-medium-20);
+
+    text-align: left;
+
+    color: var(--font-color);
+
+    outline: none;
+    cursor: pointer;
+
+    transition: all ease-in-out 0.2s;
+
+    &:hover,
+    &:focus,
+    &:active,
+    &:focus-within,
+    &:has(:active) {
+      background-color: var(--contrast-color);
+    }
+
+    &[data-selected="true"] {
+      color: var(--font-color);
+      background-color: var(--contrast-color);
+
+      &:hover,
+      &:focus,
+      &:active {
+        background-color: var(--font-color-alpha-10);
+      }
+    }
+  }
+
+  &[aria-disabled="true"] {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+`;
+var Item = import_styled_components28.default.span`
+  display: flex;
+  align-items: center;
+  gap: var(--measurement-small-60);
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+
+// src/select/index.tsx
+var SelectRoot = ({ children }) => {
+  return /* @__PURE__ */ import_react50.default.createElement(SelectProvider, null, children);
+};
+SelectRoot.displayName = "Select.Root";
+var Select = ({ children }) => {
+  const selectRef = import_react50.default.useRef(null);
+  const { states, methods } = useSelect();
+  const handleClickOutside = () => {
+    if (states.open && methods.setOpen) {
+      methods.setOpen(false);
+    }
+  };
+  useClickOutside(
+    selectRef,
+    handleClickOutside
+  );
+  return /* @__PURE__ */ import_react50.default.createElement(Wrapper, { ref: selectRef }, children);
+};
+Select.displayName = "Select";
+var SelectTrigger = (props) => {
+  const {
+    raw,
+    variant,
+    shape,
+    sizing,
+    error = false,
+    disabled,
+    children,
+    ...restProps
+  } = props;
+  const triggerRef = import_react50.default.useRef(null);
+  const triggerRect = () => triggerRef.current?.getBoundingClientRect();
+  const { id, states, methods } = useSelect();
+  const { toggleOpen, setTriggerProps } = methods;
+  const handleClick = () => {
+    if (disabled) return;
+    if (toggleOpen) toggleOpen();
+    if (setTriggerProps) {
+      setTriggerProps({
+        top: Number(triggerRect()?.top),
+        right: Number(triggerRect()?.right),
+        bottom: Number(triggerRect()?.bottom),
+        left: Number(triggerRect()?.left),
+        width: Number(triggerRect()?.width),
+        height: Number(triggerRect()?.height)
+      });
+    }
+  };
+  return /* @__PURE__ */ import_react50.default.createElement(
+    Trigger,
+    {
+      ref: triggerRef,
+      type: "button",
+      role: "combobox",
+      id: id.split("|").at(0),
+      onClick: handleClick,
+      "aria-haspopup": "listbox",
+      "aria-expanded": Boolean(states.open),
+      "aria-controls": id.split("|").at(-1),
+      "data-state": states.open ? "open" : "closed",
+      "data-variant": variant ?? "secondary" /* Secondary */,
+      "data-shape": shape ?? "smooth" /* Smooth */,
+      "data-size": sizing ?? "medium" /* Medium */,
+      "data-error": error,
+      "data-raw": Boolean(raw),
+      disabled,
+      ...restProps
+    },
+    /* @__PURE__ */ import_react50.default.createElement(Label2, null, children)
+  );
+};
+SelectTrigger.displayName = "Select.Trigger";
+var SelectContent = (props) => {
+  const { raw, defaultOpen, children, ...restProps } = props;
+  const { id, states, methods } = useSelect();
+  const { toggleOpen, setContentProps } = methods;
+  const mounted = import_react50.default.useRef(false);
+  const contentRef = import_react50.default.useRef(null);
+  const contentRect = () => contentRef?.current?.getBoundingClientRect();
+  const bodyRect = () => {
+    if (typeof document !== "undefined") {
+      return document?.body?.getBoundingClientRect();
+    }
+    return void 0;
+  };
+  const positions = {
+    btt: `calc((${states?.triggerProps?.top}px - ${states?.contentProps?.height}px) - (var(--measurement-medium-10) * 2))`,
+    ttb: `calc((${states?.triggerProps?.top}px + ${states?.triggerProps?.height}px) + var(--measurement-medium-10))`
+  };
+  const dimensions = {
+    body_height: bodyRect()?.height ?? 0,
+    content_height: states.contentProps.height,
+    content_bottom: states.contentProps.bottom
+  };
+  const hasEnoughVerticalSpace = dimensions.body_height - dimensions.content_bottom > dimensions.content_height - dimensions.content_height * 0.9;
+  import_react50.default.useEffect(() => {
+    if (defaultOpen && toggleOpen) toggleOpen();
+  }, []);
+  import_react50.default.useEffect(() => {
+    mounted.current = true;
+    if (setContentProps) {
+      setContentProps({
+        top: Number(contentRect()?.top),
+        right: Number(contentRect()?.right),
+        bottom: Number(contentRect()?.bottom),
+        left: Number(contentRect()?.left),
+        width: Number(contentRect()?.width),
+        height: Number(contentRect()?.height)
+      });
+    }
+    return () => {
+      mounted.current = false;
+    };
+  }, [states.open]);
+  import_react50.default.useEffect(() => {
+    if (!states.open) return;
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape" && methods.setOpen) {
+        methods.setOpen(false);
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [states.open]);
+  if (!states.open) return null;
+  return /* @__PURE__ */ import_react50.default.createElement(
+    ScrollArea,
+    {
+      scrollbar: true,
+      as: Content,
+      ref: contentRef,
+      id: id.split("|").at(-1),
+      role: "listbox",
+      tabIndex: -1,
+      "aria-labelledby": id.split("|").at(0),
+      "data-state": applyDataState(Boolean(states.open)),
+      "data-side": hasEnoughVerticalSpace ? "bottom" : "top",
+      "data-raw": Boolean(raw),
+      style: {
+        top: hasEnoughVerticalSpace ? positions.ttb : positions.btt,
+        left: `${states?.triggerProps?.left}px`,
+        width: `${states?.triggerProps?.width}px`
+      },
+      ...restProps
+    },
+    children
+  );
+};
+SelectContent.displayName = "Select.Content";
+var SelectItem = (props) => {
+  const { raw, value, disabled, onClick, children, ...restProps } = props;
+  const { states, methods } = useSelect();
+  const isSelected = states?.value === value;
+  const handleSelect = (event) => {
+    if (disabled) return;
+    if (methods.setValue) methods.setValue(value);
+    if (methods.setOpen) methods.setOpen(false);
+    if (onClick) onClick(event);
+  };
+  const handleKeyDown = (event) => {
+    if (["Space", "Enter"].includes(event.code || event.key) && !disabled) {
+      event.preventDefault();
+      handleSelect(event);
+    }
+  };
+  return /* @__PURE__ */ import_react50.default.createElement(
+    List,
+    {
+      role: "option",
+      tabIndex: 0,
+      "aria-disabled": disabled,
+      "aria-selected": isSelected,
+      "data-orientation": "vertical",
+      "data-selected": isSelected,
+      "data-raw": Boolean(raw),
+      onClick: handleSelect,
+      onKeyDown: handleKeyDown,
+      ...restProps
+    },
+    /* @__PURE__ */ import_react50.default.createElement(Item, null, children)
+  );
+};
+SelectItem.displayName = "Select.Item";
+Select.Root = SelectRoot;
+Select.Trigger = SelectTrigger;
+Select.Content = SelectContent;
+Select.Item = SelectItem;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Accordion,
@@ -4854,6 +6864,7 @@ Tree.Content = TreeContent;
   AccordionTrigger,
   AvataStatusEnum,
   Avatar,
+  AvatarStatus,
   Badge,
   Breadcrumb,
   BreadcrumbItem,
@@ -4884,9 +6895,14 @@ Tree.Content = TreeContent;
   DropdownMenuRoot,
   DropdownMenuTrigger,
   Field,
+  FieldDate,
+  FieldFile,
   FieldLabel,
   FieldMeta,
+  FieldNumber,
+  FieldPassword,
   FieldRoot,
+  FieldTag,
   FieldWrapper,
   MessageBubble,
   MessageBubbleContent,
@@ -4904,9 +6920,13 @@ Tree.Content = TreeContent;
   PageTools,
   PageWrapper,
   Portal,
-  PrivacyField,
   Resizable,
   ScrollArea,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectRoot,
+  SelectTrigger,
   Sheet,
   SheetRoot,
   SheetTrigger,
@@ -4947,6 +6967,7 @@ Tree.Content = TreeContent;
   useDropdownMenu,
   useField,
   useMessageBubble,
+  useSelect,
   useSheet,
   useSwitch,
   useTabs,