@usefui/components 1.5.1 → 1.5.2

package/dist/index.js

@@ -37,7 +37,14 @@ __export(index_exports, {
   AvataStatusEnum: () => AvataStatusEnum,
   Avatar: () => Avatar,
   Badge: () => Badge,
+  Breadcrumb: () => Breadcrumb,
+  BreadcrumbItem: () => BreadcrumbItem,
+  BreadcrumbSeparator: () => BreadcrumbSeparator,
   Button: () => Button,
+  Card: () => Card,
+  CardBody: () => CardBody,
+  CardGrid: () => CardGrid,
+  CardMeta: () => CardMeta,
   Checkbox: () => Checkbox,
   CheckboxIndicator: () => CheckboxIndicator,
   CheckboxRoot: () => CheckboxRoot,
@@ -45,6 +52,7 @@ __export(index_exports, {
   CollapsibleContent: () => CollapsibleContent,
   CollapsibleRoot: () => CollapsibleRoot,
   CollapsibleTrigger: () => CollapsibleTrigger,
+  CopyButton: () => CopyButton,
   Dialog: () => Dialog,
   DialogControl: () => DialogControl,
   DialogMenu: () => DialogMenu,
@@ -74,10 +82,14 @@ __export(index_exports, {
   PageTools: () => PageTools,
   PageWrapper: () => PageWrapper,
   Portal: () => Portal,
+  PrivacyField: () => PrivacyField,
+  Resizable: () => Resizable,
   ScrollArea: () => ScrollArea,
   Sheet: () => Sheet,
   SheetRoot: () => SheetRoot,
   SheetTrigger: () => SheetTrigger,
+  Skeleton: () => Skeleton,
+  Spinner: () => Spinner,
   Switch: () => Switch,
   SwitchRoot: () => SwitchRoot,
   SwitchThumb: () => SwitchThumb,
@@ -92,6 +104,7 @@ __export(index_exports, {
   TabsContent: () => TabsContent,
   TabsRoot: () => TabsRoot,
   TabsTrigger: () => TabsTrigger,
+  Textarea: () => Textarea,
   Toggle: () => Toggle,
   Toolbar: () => Toolbar,
   ToolbarItem: () => ToolbarItem,
@@ -176,6 +189,11 @@ var ButtonDefaultStyles = import_styled_components.css`
     opacity: 0.6;
   }
 
+  svg,
+  span {
+    transition: all 0.2s ease-in-out;
+  }
+
   &:hover,
   &:focus,
   &:active {
@@ -228,19 +246,19 @@ var ButtonVariantsStyles = import_styled_components.css`
   }
   &[data-variant="secondary"] {
     color: var(--font-color-alpha-60);
-    background-color: var(--body-color);
+    background-color: transparent;
     border-color: var(--font-color-alpha-10);
 
     &:hover,
     &:focus,
     &:active {
       color: var(--font-color);
-      border-color: var(--font-color-alpha-30);
+      background-color: var(--font-color-alpha-10);
+      border-color: transparent;
     }
   }
   &[data-variant="tertiary"] {
-    color: var(--font-color-alpha-60);
-    border-color: var(--font-color-alpha-10);
+    color: var(--font-color-alpha-80);
     background-color: transparent;
 
     &:hover,
@@ -248,7 +266,6 @@ var ButtonVariantsStyles = import_styled_components.css`
     &:active {
       color: var(--font-color);
       background-color: var(--font-color-alpha-10);
-      border-color: transparent;
     }
   }
   &[data-variant="border"] {
@@ -260,6 +277,27 @@ var ButtonVariantsStyles = import_styled_components.css`
     &:focus,
     &:active {
       color: var(--font-color);
+      border-color: var(--font-color-alpha-20);
+    }
+  }
+  &[data-variant="danger"] {
+    color: var(--color-mono-white);
+    background-color: var(--color-red);
+
+    &:hover,
+    &:focus,
+    &:active {
+      background-color: var(--shade-red-10);
+    }
+  }
+  &[data-variant="warning"] {
+    color: var(--color-mono-dark);
+    background-color: var(--color-orange);
+
+    &:hover,
+    &:focus,
+    &:active {
+      background-color: var(--shade-orange-10);
     }
   }
   &[data-variant="mono"] {
@@ -290,8 +328,7 @@ var ButtonVariantsStyles = import_styled_components.css`
 `;
 var ButtonSizeStyles = import_styled_components.css`
   &[data-size="small"] {
-    border-radius: var(--measurement-medium-20);
-    font-size: var(--fontsize-medium-10);
+    font-size: var(--fontsize-small-60);
 
     gap: var(--measurement-medium-10);
     padding: var(--measurement-medium-10) var(--measurement-medium-30);
@@ -304,39 +341,83 @@ var ButtonSizeStyles = import_styled_components.css`
     }
   }
   &[data-size="medium"] {
-    border-radius: var(--measurement-medium-30);
     padding: var(--measurement-medium-10) var(--measurement-medium-60);
     min-width: var(--measurement-medium-90);
     min-height: var(--measurement-medium-80);
   }
   &[data-size="large"] {
-    border-radius: var(--measurement-medium-30);
     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}
     ${ButtonSizeStyles}
+    ${ButtonShapeStyles}
     ${ButtonVariantsStyles}
-
       &[data-rawIcon="false"] {
       ${ButtonIconStyles}
     }
   }
 `;
+var ButtonOverlay = import_styled_components.default.div`
+  position: absolute;
+  inset: -1px;
+  pointer-events: none;
+  opacity: ${(props) => props.$isHovering ? 1 : 0};
+  background: transparent;
+  transition: opacity 0.2s ease-in-out;
+
+  ${ButtonShapeStyles}
+`;
+var ButtonMaskElement = import_styled_components.default.div`
+  position: absolute;
+  inset: 0;
+  background: transparent;
+  border: var(--measurement-small-10) solid var(--font-color-alpha-20);
+  clip-path: inset(0 round var(--measurement-medium-30));
+
+  mask-image: radial-gradient(
+    circle at ${(props) => props.$mouseX}% ${(props) => props.$mouseY}%,
+    var(--body-color),
+    transparent 100%
+  );
+  -webkit-mask-image: radial-gradient(
+    circle at ${(props) => props.$mouseX}% ${(props) => props.$mouseY}%,
+    var(--body-color),
+    transparent 100%
+  );
+
+  ${ButtonShapeStyles}
+`;
 
 // src/button/index.tsx
 var Button = import_react2.default.forwardRef(
   (props, forwardedRef) => {
     const {
       name,
-      variant = "mono" /* Mono */,
+      variant = "primary" /* Primary */,
       sizing = "medium" /* Medium */,
+      shape = "smooth",
+      animation,
       raw,
       rawicon,
+      onMouseMove,
+      onMouseEnter,
+      onMouseLeave,
       children,
       ...restProps
     } = props;
@@ -347,6 +428,37 @@ var Button = import_react2.default.forwardRef(
     const buttonDescription = `${ariaLabel}:${buttonType}`;
     const buttonStateDescription = `disabled:${disabledState}`;
     const ButtonFullDesc = `${buttonDescription}/${buttonStateDescription}`;
+    const isReflective = animation === "reflective" && variant !== "ghost";
+    const [position, setPosition] = import_react2.default.useState({ x: 0, y: 0 });
+    const [isHovering, setIsHovering] = import_react2.default.useState(false);
+    const handleMouseMove = import_react2.default.useCallback(
+      (e) => {
+        if (onMouseMove) onMouseMove(e);
+        if (!isReflective) return;
+        const rect = e.currentTarget.getBoundingClientRect();
+        setPosition({
+          x: (e.clientX - rect.left) / rect.width * 100,
+          y: (e.clientY - rect.top) / rect.height * 100
+        });
+      },
+      []
+    );
+    const handleMouseEnter = import_react2.default.useCallback(
+      (e) => {
+        if (onMouseEnter) onMouseEnter(e);
+        if (!isReflective) return;
+        setIsHovering(true);
+      },
+      []
+    );
+    const handleMouseLeave = import_react2.default.useCallback(
+      (e) => {
+        if (onMouseLeave) onMouseLeave(e);
+        if (!isReflective) return;
+        setIsHovering(false);
+      },
+      []
+    );
     return /* @__PURE__ */ import_react2.default.createElement(
       ButtonWrapper,
       {
@@ -359,11 +471,24 @@ var Button = import_react2.default.forwardRef(
         "aria-disabled": disabledState,
         "data-variant": variant,
         "data-size": sizing,
+        "data-shape": shape,
+        "data-animation": animation,
         "data-raw": Boolean(raw),
         "data-rawicon": Boolean(rawicon),
         tabIndex: 0,
+        onMouseMove: handleMouseMove,
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
         ...restProps
       },
+      isReflective && /* @__PURE__ */ import_react2.default.createElement(ButtonOverlay, { $isHovering: isHovering, "data-shape": shape }, /* @__PURE__ */ import_react2.default.createElement(
+        ButtonMaskElement,
+        {
+          $mouseX: position.x,
+          $mouseY: position.y,
+          "data-shape": shape
+        }
+      )),
       children
     );
   }
@@ -718,25 +843,186 @@ var Badge = (props) => {
 };
 Badge.displayName = "Badge";
 
-// src/checkbox/index.tsx
+// src/breadcrumb/index.tsx
+var import_react6 = __toESM(require("react"));
+
+// src/breadcrumb/styles/index.ts
+var import_styled_components4 = __toESM(require("styled-components"));
+var ItemWrapper = import_styled_components4.default.span`
+  width: 100%;
+  line-clamp: 2;
+  word-break: break-all;
+
+  &[data-current="true"] {
+    opacity: 1 !important;
+  }
+`;
+var SeparatorItem = import_styled_components4.default.span`
+  color: var(--font-color-alpha-10) !important;
+  user-select: none;
+  pointer-events: none;
+`;
+
+// src/breadcrumb/index.tsx
+var SEGMENT_SEPARATOR = "/";
+var BreadcrumbItem = (props) => {
+  const { isLastItem = false, children, ...restProps } = props;
+  return /* @__PURE__ */ import_react6.default.createElement(Button, { sizing: "small", variant: "ghost", ...restProps }, /* @__PURE__ */ import_react6.default.createElement(ItemWrapper, { "data-current": isLastItem }, children));
+};
+BreadcrumbItem.displayName = "Breadcrumb.Item";
+var BreadcrumbSeparator = (props) => {
+  const { children } = props;
+  return /* @__PURE__ */ import_react6.default.createElement(SeparatorItem, null, children ?? SEGMENT_SEPARATOR);
+};
+BreadcrumbSeparator.displayName = "Breadcrumb.Separator";
+var Breadcrumb = (props) => {
+  const { path, navigate, capitalizeItems = true, children } = props;
+  const segments = path.split(SEGMENT_SEPARATOR).filter(Boolean);
+  const items = segments.map((segment, index) => {
+    const href = `/${segments.slice(0, index + 1).join(SEGMENT_SEPARATOR)}`;
+    const isLastItem = index === segments.length - 1;
+    return {
+      href,
+      label: segment,
+      isLastItem
+    };
+  });
+  const breadcrumbLabel = (segment) => {
+    return capitalizeItems ? segment.charAt(0).toUpperCase() + segment.slice(1).replace(/-/g, " ") : segment.replace(/-/g, " ");
+  };
+  const handleNavigate = import_react6.default.useCallback((href) => {
+    if (navigate) navigate(href);
+  }, []);
+  if (path === SEGMENT_SEPARATOR) return null;
+  return /* @__PURE__ */ import_react6.default.createElement("div", { className: "flex align-center g-medium-30" }, children && /* @__PURE__ */ import_react6.default.createElement(import_react6.default.Fragment, null, children, /* @__PURE__ */ import_react6.default.createElement(Breadcrumb.Separator, null)), items.map((item, key) => /* @__PURE__ */ import_react6.default.createElement(import_react6.default.Fragment, { key }, /* @__PURE__ */ import_react6.default.createElement(
+    Breadcrumb.Item,
+    {
+      isLastItem: item.isLastItem,
+      disabled: !navigate,
+      onClick: () => handleNavigate(item.href)
+    },
+    breadcrumbLabel(item.label)
+  ), !item.isLastItem && /* @__PURE__ */ import_react6.default.createElement(Breadcrumb.Separator, null))));
+};
+Breadcrumb.displayName = "Breadcrumb";
+Breadcrumb.Item = BreadcrumbItem;
+Breadcrumb.Separator = BreadcrumbSeparator;
+
+// src/card/index.tsx
 var import_react7 = __toESM(require("react"));
 
+// src/card/styles/index.ts
+var import_styled_components5 = __toESM(require("styled-components"));
+var GridDefaultStyles = import_styled_components5.css`
+  display: grid;
+  grid-gap: var(--measurement-medium-30) var(--measurement-medium-30);
+  box-sizing: border-box;
+
+  @media (max-width: 768px) {
+    grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
+  }
+`;
+var GridSizeStyles = import_styled_components5.css`
+  &[data-size="small"] {
+    grid-template-columns: repeat(
+      auto-fill,
+      minmax(var(--measurement-large-80), 1fr)
+    );
+  }
+  &[data-size="medium"] {
+    grid-template-columns: repeat(
+      auto-fill,
+      minmax(var(--measurement-large-90), 1fr)
+    );
+  }
+  &[data-size="large"] {
+    grid-template-columns: repeat(
+      auto-fill,
+      minmax(calc(var(--measurement-large-90) * 1.2), 1fr)
+    );
+  }
+`;
+var CardShapeStyles = import_styled_components5.css`
+  &[data-shape="square"] {
+    border-radius: 0;
+  }
+  &[data-shape="smooth"] {
+    border-radius: var(--measurement-medium-30);
+  }
+  &[data-shape="round"] {
+    border-radius: var(--measurement-medium-60);
+  }
+`;
+var CardDefaultStyles = import_styled_components5.css`
+  ${CardShapeStyles}
+
+  box-sizing: border-box;
+`;
+var CardContainer = import_styled_components5.default.div`
+  width: 100%;
+  background-color: var(--font-color-alpha-10);
+
+  ${CardDefaultStyles}
+`;
+var CardWrapper = import_styled_components5.default.div`
+  display: flex;
+  flex-direction: column;
+  gap: var(--measurement-large-10);
+  padding: var(--measurement-medium-60);
+  background-color: var(--contrast-color);
+  border: var(--measurement-small-10) solid var(--font-color-alpha-10);
+
+  ${CardDefaultStyles}
+`;
+var CardsGrid = import_styled_components5.default.div`
+  ${GridDefaultStyles}
+  ${GridSizeStyles}
+`;
+
+// src/card/index.tsx
+var CardGrid = (props) => {
+  const { sizing = "medium", children } = props;
+  return /* @__PURE__ */ import_react7.default.createElement(CardsGrid, { "data-size": sizing }, children);
+};
+CardGrid.displayName = "Card.Grid";
+var CardMeta = (props) => {
+  const { children } = props;
+  return /* @__PURE__ */ import_react7.default.createElement("div", { className: "p-y-medium-20 p-x-medium-30", ...props }, children);
+};
+CardMeta.displayName = "Card.Meta";
+var CardBody = (props) => {
+  const { shape = "smooth", children } = props;
+  return /* @__PURE__ */ import_react7.default.createElement(CardWrapper, { "data-shape": shape }, children);
+};
+CardBody.displayName = "Card.Body";
+var Card = (props) => {
+  const { shape = "smooth", children } = props;
+  return /* @__PURE__ */ import_react7.default.createElement(CardContainer, { "data-shape": shape }, " ", children);
+};
+Card.displayName = "Card";
+Card.Grid = CardGrid;
+Card.Meta = CardMeta;
+Card.Body = CardBody;
+
+// src/checkbox/index.tsx
+var import_react9 = __toESM(require("react"));
+
 // src/checkbox/hooks/index.tsx
-var import_react6 = __toESM(require("react"));
+var import_react8 = __toESM(require("react"));
 var defaultComponentAPI2 = {
   id: "",
   states: {},
   methods: {}
 };
-var CheckboxContext = (0, import_react6.createContext)(defaultComponentAPI2);
-var useCheckbox = () => (0, import_react6.useContext)(CheckboxContext);
+var CheckboxContext = (0, import_react8.createContext)(defaultComponentAPI2);
+var useCheckbox = () => (0, import_react8.useContext)(CheckboxContext);
 var CheckboxProvider = ({ children }) => {
   const context = useCheckboxProvider();
-  return /* @__PURE__ */ import_react6.default.createElement(CheckboxContext.Provider, { value: context }, children);
+  return /* @__PURE__ */ import_react8.default.createElement(CheckboxContext.Provider, { value: context }, children);
 };
 function useCheckboxProvider() {
-  const [checked, setChecked] = (0, import_react6.useState)(false);
-  const checkboxId = import_react6.default.useId();
+  const [checked, setChecked] = (0, import_react8.useState)(false);
+  const checkboxId = import_react8.default.useId();
   return {
     id: checkboxId,
     states: {
@@ -750,8 +1036,8 @@ function useCheckboxProvider() {
 }
 
 // src/checkbox/styles/index.ts
-var import_styled_components4 = __toESM(require("styled-components"));
-var CheckboxDefaultStyles = import_styled_components4.css`
+var import_styled_components6 = __toESM(require("styled-components"));
+var CheckboxDefaultStyles = import_styled_components6.css`
   position: relative;
   display: flex;
   align-items: center;
@@ -759,7 +1045,7 @@ var CheckboxDefaultStyles = import_styled_components4.css`
   backdrop-filter: blur(var(--measurement-small-10));
   transition: all ease-in-out 0.2s;
 `;
-var CheckboxVariantsStyles = import_styled_components4.css`
+var CheckboxVariantsStyles = import_styled_components6.css`
   &[data-variant="primary"] {
     background-color: var(--font-color-alpha-10);
     border: var(--measurement-small-10) solid transparent;
@@ -831,7 +1117,7 @@ var CheckboxVariantsStyles = import_styled_components4.css`
     }
   }
 `;
-var CheckboxSizeStyles = import_styled_components4.css`
+var CheckboxSizeStyles = import_styled_components6.css`
   &[data-size="small"] {
     width: var(--measurement-medium-60);
     height: var(--measurement-medium-60);
@@ -848,7 +1134,7 @@ var CheckboxSizeStyles = import_styled_components4.css`
     border-radius: var(--measurement-medium-20);
   }
 `;
-var CheckboxWrapper = import_styled_components4.default.div`
+var CheckboxWrapper = import_styled_components6.default.div`
   cursor: pointer;
 
   &[data-raw="false"] {
@@ -866,7 +1152,7 @@ var CheckboxWrapper = import_styled_components4.default.div`
     }
   }
 `;
-var NativeInput = import_styled_components4.default.input`
+var NativeInput = import_styled_components6.default.input`
   &[data-raw="false"] {
     appearance: none;
     background: none;
@@ -883,7 +1169,7 @@ var NativeInput = import_styled_components4.default.input`
     }
   }
 `;
-var Indicator = import_styled_components4.default.span`
+var Indicator = import_styled_components6.default.span`
   line-height: 0;
   pointer-events: none;
 `;
@@ -910,10 +1196,10 @@ var Checkbox = (props) => {
     if (toggleChecked) toggleChecked();
     if (onClick) onClick(event);
   };
-  import_react7.default.useEffect(() => {
+  import_react9.default.useEffect(() => {
     if (defaultChecked && applyChecked) applyChecked(defaultChecked);
   }, []);
-  return /* @__PURE__ */ import_react7.default.createElement(
+  return /* @__PURE__ */ import_react9.default.createElement(
     CheckboxWrapper,
     {
       role: "checkbox",
@@ -925,7 +1211,7 @@ var Checkbox = (props) => {
       "data-variant": variant,
       "aria-label": props["aria-label"] ?? `${name}-checkbox`
     },
-    /* @__PURE__ */ import_react7.default.createElement(
+    /* @__PURE__ */ import_react9.default.createElement(
       NativeInput,
       {
         type: "checkbox",
@@ -951,13 +1237,13 @@ var Checkbox = (props) => {
 Checkbox.displayName = "Checkbox";
 var CheckboxRoot = (props) => {
   const { children, ...restProps } = props;
-  return /* @__PURE__ */ import_react7.default.createElement(CheckboxProvider, { ...restProps }, children);
+  return /* @__PURE__ */ import_react9.default.createElement(CheckboxProvider, { ...restProps }, children);
 };
 CheckboxRoot.displayName = "Checkbox.Root";
 var CheckboxIndicator = (props) => {
   const { states } = useCheckbox();
   const { children, ...restProps } = props;
-  return /* @__PURE__ */ import_react7.default.createElement(import_react7.default.Fragment, null, states.checked && /* @__PURE__ */ import_react7.default.createElement(Indicator, { ...restProps }, children ?? /* @__PURE__ */ import_react7.default.createElement(
+  return /* @__PURE__ */ import_react9.default.createElement(import_react9.default.Fragment, null, states.checked && /* @__PURE__ */ import_react9.default.createElement(Indicator, { ...restProps }, children ?? /* @__PURE__ */ import_react9.default.createElement(
     "svg",
     {
       tabIndex: -1,
@@ -969,8 +1255,8 @@ var CheckboxIndicator = (props) => {
       viewBox: "0 0 10 10",
       fill: "none"
     },
-    /* @__PURE__ */ import_react7.default.createElement("title", null, "Checked"),
-    /* @__PURE__ */ import_react7.default.createElement(
+    /* @__PURE__ */ import_react9.default.createElement("title", null, "Checked"),
+    /* @__PURE__ */ import_react9.default.createElement(
       "path",
       {
         d: "M2 5.5L4.12132 7.62132L8.36396 3.37868",
@@ -986,27 +1272,27 @@ Checkbox.Root = CheckboxRoot;
 Checkbox.Indicator = CheckboxIndicator;
 
 // src/collapsible/index.tsx
-var import_react9 = __toESM(require("react"));
+var import_react11 = __toESM(require("react"));
 
 // src/collapsible/hooks/index.tsx
-var import_react8 = __toESM(require("react"));
+var import_react10 = __toESM(require("react"));
 var defaultComponentAPI3 = {
   id: "",
   states: {},
   methods: {}
 };
-var CollapsibleContext = (0, import_react8.createContext)(defaultComponentAPI3);
-var useCollapsible = () => (0, import_react8.useContext)(CollapsibleContext);
+var CollapsibleContext = (0, import_react10.createContext)(defaultComponentAPI3);
+var useCollapsible = () => (0, import_react10.useContext)(CollapsibleContext);
 var CollapsibleProvider = ({
   children
 }) => {
   const context = useCollapsibleProvider();
-  return /* @__PURE__ */ import_react8.default.createElement(CollapsibleContext.Provider, { value: context }, children);
+  return /* @__PURE__ */ import_react10.default.createElement(CollapsibleContext.Provider, { value: context }, children);
 };
 function useCollapsibleProvider() {
-  const [expanded, setExpanded] = (0, import_react8.useState)(false);
-  const [defaultOpen, setDefaultOpen] = (0, import_react8.useState)(false);
-  const collapsibleId = import_react8.default.useId();
+  const [expanded, setExpanded] = (0, import_react10.useState)(false);
+  const [defaultOpen, setDefaultOpen] = (0, import_react10.useState)(false);
+  const collapsibleId = import_react10.default.useId();
   const toggleCollapsible = () => {
     setExpanded(!expanded);
     setDefaultOpen(false);
@@ -1035,7 +1321,7 @@ var applyDataState = (condition) => condition ? "open" : "closed";
 var Collapsible = (props) => {
   const { children, ...restProps } = props;
   const collapsibleContext = useCollapsible();
-  return /* @__PURE__ */ import_react9.default.createElement(
+  return /* @__PURE__ */ import_react11.default.createElement(
     "div",
     {
       "data-state": applyDataState(Boolean(collapsibleContext.states.expanded)),
@@ -1046,7 +1332,7 @@ var Collapsible = (props) => {
 };
 Collapsible.displayName = "Collapsible";
 var CollapsibleRoot = ({ children }) => {
-  return /* @__PURE__ */ import_react9.default.createElement(CollapsibleProvider, null, children);
+  return /* @__PURE__ */ import_react11.default.createElement(CollapsibleProvider, null, children);
 };
 CollapsibleRoot.displayName = "Collapsible.Root";
 var CollapsibleTrigger = (props) => {
@@ -1057,7 +1343,7 @@ var CollapsibleTrigger = (props) => {
     if (toggleCollapsible) toggleCollapsible();
     if (onClick) onClick(event);
   };
-  return /* @__PURE__ */ import_react9.default.createElement(
+  return /* @__PURE__ */ import_react11.default.createElement(
     Button,
     {
       disabled,
@@ -1076,13 +1362,13 @@ var CollapsibleContent = (props) => {
   const { defaultOpen = false, showFirstChild, children, ...restProps } = props;
   const { id, states, methods } = useCollapsible();
   const { applyDefaultOpen } = methods;
-  const childArray = import_react9.default.Children.toArray(children);
+  const childArray = import_react11.default.Children.toArray(children);
   const displayChildren = states.expanded ?? states.defaultOpen;
   const displayFirstChild = showFirstChild && childArray.length > 1 && !states.expanded;
-  import_react9.default.useEffect(() => {
+  import_react11.default.useEffect(() => {
     if (defaultOpen && applyDefaultOpen) applyDefaultOpen();
   }, []);
-  return /* @__PURE__ */ import_react9.default.createElement(
+  return /* @__PURE__ */ import_react11.default.createElement(
     "div",
     {
       id,
@@ -1099,25 +1385,88 @@ Collapsible.Root = CollapsibleRoot;
 Collapsible.Trigger = CollapsibleTrigger;
 Collapsible.Content = CollapsibleContent;
 
+// src/copy-button/index.tsx
+var import_react12 = __toESM(require("react"));
+var CopyButton = ({
+  value,
+  delay,
+  tooltip,
+  children,
+  ...restProps
+}) => {
+  const timerRef = import_react12.default.useRef(null);
+  const [copied, setCopied] = import_react12.default.useState(false);
+  const tooltipLabels = import_react12.default.useMemo(() => {
+    return {
+      copy: tooltip?.copyLabel ?? "Copy",
+      copied: tooltip?.copiedLabel ?? "Copied!"
+    };
+  }, [tooltip]);
+  const copyToClipboard = async () => {
+    if (value == null) return;
+    try {
+      await navigator.clipboard.writeText(value);
+      setCopied(true);
+    } catch {
+      const ta = document.createElement("textarea");
+      ta.value = value;
+      ta.style.position = "fixed";
+      ta.style.opacity = "0";
+      document.body.appendChild(ta);
+      ta.select();
+      try {
+        document.execCommand("copy");
+        setCopied(true);
+      } finally {
+        document.body.removeChild(ta);
+      }
+    }
+    if (timerRef.current != null) window.clearTimeout(timerRef.current);
+    timerRef.current = window.setTimeout(() => setCopied(false), delay ?? 1e3);
+  };
+  import_react12.default.useEffect(() => {
+    return () => {
+      if (timerRef.current != null) {
+        window.clearTimeout(timerRef.current);
+        timerRef.current = null;
+      }
+    };
+  }, []);
+  return /* @__PURE__ */ import_react12.default.createElement(Tooltip, { content: copied ? tooltipLabels.copied : tooltipLabels.copy }, /* @__PURE__ */ import_react12.default.createElement(
+    Button,
+    {
+      "data-testId": "copy-code",
+      "aria-label": "copy-code",
+      disabled: value == null,
+      "aria-disabled": value == null,
+      variant: restProps?.variant ?? "ghost",
+      onClick: copyToClipboard,
+      ...restProps
+    },
+    children
+  ));
+};
+CopyButton.displayName = "CopyButton";
+
 // src/dialog/index.tsx
-var import_react14 = __toESM(require("react"));
+var import_react17 = __toESM(require("react"));
 
 // src/dialog/hooks/index.tsx
-var import_react10 = __toESM(require("react"));
+var import_react13 = __toESM(require("react"));
 var defaultComponentAPI4 = {
   id: "",
   states: {},
   methods: {}
 };
-var DialogContext = (0, import_react10.createContext)(defaultComponentAPI4);
-var useDialog = () => (0, import_react10.useContext)(DialogContext);
+var DialogContext = (0, import_react13.createContext)(defaultComponentAPI4);
+var useDialog = () => (0, import_react13.useContext)(DialogContext);
 var DialogProvider = ({ children }) => {
   const context = useDialogProvider();
-  return /* @__PURE__ */ import_react10.default.createElement(DialogContext.Provider, { value: context }, children);
+  return /* @__PURE__ */ import_react13.default.createElement(DialogContext.Provider, { value: context }, children);
 };
 function useDialogProvider() {
-  const [open, setOpen] = (0, import_react10.useState)(false);
-  const dialogId = import_react10.default.useId();
+  const [open, setOpen] = (0, import_react13.useState)(false);
+  const dialogId = import_react13.default.useId();
   return {
     id: dialogId,
     states: {
@@ -1131,15 +1480,15 @@ function useDialogProvider() {
 }
 
 // ../hooks/dist/index.mjs
-var import_react11 = require("react");
-var import_react12 = require("react");
-var import_react13 = __toESM(require("react"), 1);
+var import_react14 = require("react");
+var import_react15 = require("react");
+var import_react16 = __toESM(require("react"), 1);
 function useEventListener(eventName, handler, element) {
-  const savedHandler = (0, import_react11.useRef)(handler);
-  (0, import_react11.useEffect)(() => {
+  const savedHandler = (0, import_react14.useRef)(handler);
+  (0, import_react14.useEffect)(() => {
     savedHandler.current = handler;
   }, [handler]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     const targetElement = element && element.current || window;
     if (!(targetElement && targetElement.addEventListener)) return;
     const eventListener = (event) => savedHandler.current(event);
@@ -1156,8 +1505,8 @@ function useClickOutside(ref, handler, mouseEvent = "mousedown") {
   });
 }
 function useKeyPress(targetKey, hotkey, bindKey) {
-  const [keyPressed, setKeyPressed] = (0, import_react12.useState)(false);
-  const switchStoredKeyPressed = (0, import_react12.useCallback)(
+  const [keyPressed, setKeyPressed] = (0, import_react15.useState)(false);
+  const switchStoredKeyPressed = (0, import_react15.useCallback)(
     (event, state) => {
       if (!hotkey && event.key === targetKey) {
         return setKeyPressed(state);
@@ -1172,15 +1521,15 @@ function useKeyPress(targetKey, hotkey, bindKey) {
     },
     [bindKey, hotkey, targetKey]
   );
-  const KeyDownHandler = (0, import_react12.useCallback)(
+  const KeyDownHandler = (0, import_react15.useCallback)(
     (event) => switchStoredKeyPressed(event, true),
     [switchStoredKeyPressed]
   );
-  const KeyUpHandler = (0, import_react12.useCallback)(
+  const KeyUpHandler = (0, import_react15.useCallback)(
     (event) => switchStoredKeyPressed(event, false),
     [switchStoredKeyPressed]
   );
-  (0, import_react12.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     window.addEventListener("keydown", KeyDownHandler);
     window.addEventListener("keyup", KeyUpHandler);
     return () => {
@@ -1192,7 +1541,7 @@ function useKeyPress(targetKey, hotkey, bindKey) {
 }
 var useDisabledScroll = (state) => {
   const overflow = state ? "hidden" : "";
-  import_react13.default.useEffect(() => {
+  import_react16.default.useEffect(() => {
     document.body.style.overflowY = overflow;
   }, [state]);
   return {
@@ -1202,8 +1551,8 @@ var useDisabledScroll = (state) => {
 };
 
 // src/dialog/styles/index.ts
-var import_styled_components5 = __toESM(require("styled-components"));
-var DialogDefaultStyles = import_styled_components5.css`
+var import_styled_components7 = __toESM(require("styled-components"));
+var DialogDefaultStyles = import_styled_components7.css`
   position: fixed;
   top: 15dvh;
   padding: var(--measurement-medium-60);
@@ -1216,7 +1565,7 @@ var DialogDefaultStyles = import_styled_components5.css`
   transition: all ease-in-out 0.2s;
   z-index: var(--depth-default-100);
 `;
-var DialogSizeStyles = import_styled_components5.css`
+var DialogSizeStyles = import_styled_components7.css`
   --base-size: var(--measurement-medium-60);
   --computed-size: calc(100% - (var(--base-size) * 2));
   --max-height: 75dvh;
@@ -1237,7 +1586,7 @@ var DialogSizeStyles = import_styled_components5.css`
     padding: var(--measurement-medium-80);
   }
 `;
-var Menu = import_styled_components5.default.menu`
+var Menu = import_styled_components7.default.menu`
   margin: 0;
   padding: 0;
 
@@ -1247,7 +1596,7 @@ var Menu = import_styled_components5.default.menu`
     gap: var(--measurement-medium-30);
   }
 `;
-var DialogWrapper = import_styled_components5.default.dialog`
+var DialogWrapper = import_styled_components7.default.dialog`
   @keyframes slide-in {
     0% {
       opacity: 0;
@@ -1287,11 +1636,11 @@ var Dialog = (props) => {
   const { getDialogId, toggleDialog } = methods;
   const triggerId = getDialogId && getDialogId("trigger");
   const contentId = getDialogId && getDialogId("content");
-  import_react14.default.useEffect(() => {
+  import_react17.default.useEffect(() => {
     if (open && toggleDialog) toggleDialog();
   }, []);
   if (lock) useDisabledScroll(Boolean(states.open));
-  return /* @__PURE__ */ import_react14.default.createElement(import_react14.default.Fragment, null, states.open && /* @__PURE__ */ import_react14.default.createElement(
+  return /* @__PURE__ */ import_react17.default.createElement(import_react17.default.Fragment, null, states.open && /* @__PURE__ */ import_react17.default.createElement(
     ScrollArea,
     {
       as: DialogWrapper,
@@ -1310,7 +1659,7 @@ var Dialog = (props) => {
 };
 Dialog.displayName = "Dialog";
 var DialogRoot = ({ children }) => {
-  return /* @__PURE__ */ import_react14.default.createElement(DialogProvider, null, children);
+  return /* @__PURE__ */ import_react17.default.createElement(DialogProvider, null, children);
 };
 DialogRoot.displayName = "Dialog.Root";
 var DialogOverlay = (props) => {
@@ -1321,7 +1670,7 @@ var DialogOverlay = (props) => {
     if (closeOnInteract && toggleDialog) toggleDialog();
     if (onClick) onClick(event);
   };
-  return /* @__PURE__ */ import_react14.default.createElement(
+  return /* @__PURE__ */ import_react17.default.createElement(
     Overlay,
     {
       visible: Boolean(states.open),
@@ -1342,7 +1691,7 @@ var DialogTrigger = (props) => {
     if (toggleDialog) toggleDialog();
     if (onClick) onClick(event);
   };
-  return /* @__PURE__ */ import_react14.default.createElement(
+  return /* @__PURE__ */ import_react17.default.createElement(
     Button,
     {
       id: String(triggerId),
@@ -1358,7 +1707,7 @@ var DialogTrigger = (props) => {
 DialogTrigger.displayName = "Dialog.Trigger";
 var DialogMenu = (props) => {
   const { raw, children, ...restProps } = props;
-  return /* @__PURE__ */ import_react14.default.createElement(Menu, { "data-raw": Boolean(raw), ...restProps }, children);
+  return /* @__PURE__ */ import_react17.default.createElement(Menu, { "data-raw": Boolean(raw), ...restProps }, children);
 };
 DialogMenu.displayName = "Dialog.Menu";
 var DialogControl = (props) => {
@@ -1371,7 +1720,7 @@ var DialogControl = (props) => {
     if (toggleDialog) toggleDialog();
     if (onClick) onClick(event);
   };
-  return /* @__PURE__ */ import_react14.default.createElement(
+  return /* @__PURE__ */ import_react17.default.createElement(
     Button,
     {
       id: String(innerControlId),
@@ -1392,8 +1741,8 @@ Dialog.Menu = DialogMenu;
 Dialog.Overlay = DialogOverlay;
 
 // src/divider/index.ts
-var import_styled_components6 = __toESM(require("styled-components"));
-var Divider = import_styled_components6.default.hr`
+var import_styled_components8 = __toESM(require("styled-components"));
+var Divider = import_styled_components8.default.hr`
   height: var(--measurement-small-10);
   margin: var(--measurement-medium-30) 0;
   background: var(--font-color-alpha-10);
@@ -1401,10 +1750,10 @@ var Divider = import_styled_components6.default.hr`
 `;
 
 // src/dropdown/index.tsx
-var import_react16 = __toESM(require("react"));
+var import_react19 = __toESM(require("react"));
 
 // src/dropdown/hooks/index.tsx
-var import_react15 = __toESM(require("react"));
+var import_react18 = __toESM(require("react"));
 var DEFAULT_API = {
   id: "",
   states: {},
@@ -1420,26 +1769,26 @@ var DEFAULT_DIMENSIONS = {
   width: 0,
   height: 0
 };
-var DropdownMenuContext = import_react15.default.createContext(DEFAULT_API);
-var useDropdownMenu = () => import_react15.default.useContext(DropdownMenuContext);
+var DropdownMenuContext = import_react18.default.createContext(DEFAULT_API);
+var useDropdownMenu = () => import_react18.default.useContext(DropdownMenuContext);
 var DropdownMenuProvider = ({
   children
 }) => {
   const context = useDropdownMenuProvider();
-  return /* @__PURE__ */ import_react15.default.createElement(DropdownMenuContext.Provider, { value: context }, children);
+  return /* @__PURE__ */ import_react18.default.createElement(DropdownMenuContext.Provider, { value: context }, children);
 };
 function useDropdownMenuProvider() {
-  const [open, setOpen] = import_react15.default.useState(false);
-  const [contentProps, setContentProps] = import_react15.default.useState({
+  const [open, setOpen] = import_react18.default.useState(false);
+  const [contentProps, setContentProps] = import_react18.default.useState({
     ...DEFAULT_POSITIONS,
     ...DEFAULT_DIMENSIONS
   });
-  const [triggerProps, setTriggerProps] = import_react15.default.useState({
+  const [triggerProps, setTriggerProps] = import_react18.default.useState({
     ...DEFAULT_POSITIONS,
     ...DEFAULT_DIMENSIONS
   });
-  const triggerId = import_react15.default.useId();
-  const dropdownId = import_react15.default.useId();
+  const triggerId = import_react18.default.useId();
+  const dropdownId = import_react18.default.useId();
   const composedId = `${triggerId}|${dropdownId}`;
   return {
     id: composedId,
@@ -1457,8 +1806,8 @@ function useDropdownMenuProvider() {
 }
 
 // src/dropdown/styles/index.ts
-var import_styled_components7 = __toESM(require("styled-components"));
-var FadeIn = import_styled_components7.keyframes`
+var import_styled_components9 = __toESM(require("styled-components"));
+var FadeIn = import_styled_components9.keyframes`
   0% {
     opacity: 0;
   }
@@ -1466,7 +1815,7 @@ var FadeIn = import_styled_components7.keyframes`
     opacity: 1;
   }
 `;
-var ContentWrapperSizes = import_styled_components7.css`
+var ContentWrapperSizes = import_styled_components9.css`
   --small: var(--measurement-large-60);
   --medium: var(--measurement-large-80);
   --large: var(--measurement-large-90);
@@ -1488,10 +1837,10 @@ var ContentWrapperSizes = import_styled_components7.css`
     max-width: var(--large);
   }
 `;
-var RootWrapper = import_styled_components7.default.div`
+var RootWrapper = import_styled_components9.default.div`
   position: relative;
 `;
-var ContentWrapper = import_styled_components7.default.ul`
+var ContentWrapper = import_styled_components9.default.ul`
   --small: var(--measurement-large-60);
   --medium: var(--measurement-large-80);
   --large: var(--measurement-large-90);
@@ -1515,7 +1864,7 @@ var ContentWrapper = import_styled_components7.default.ul`
     ${ContentWrapperSizes}
   }
 `;
-var ItemWrapper = import_styled_components7.default.li`
+var ItemWrapper2 = import_styled_components9.default.li`
   list-style: none;
   padding: 0;
   margin: 0;
@@ -1547,7 +1896,7 @@ var ItemWrapper = import_styled_components7.default.li`
 
 // src/dropdown/index.tsx
 var DropdownMenu = ({ children }) => {
-  const DropdownContentRef = import_react16.default.useRef(null);
+  const DropdownContentRef = import_react19.default.useRef(null);
   const { states, methods } = useDropdownMenu();
   const { toggleOpen } = methods;
   const handleClickOutside = () => {
@@ -1555,15 +1904,15 @@ var DropdownMenu = ({ children }) => {
   };
   useClickOutside(DropdownContentRef, handleClickOutside);
   useDisabledScroll(Boolean(states.open));
-  return /* @__PURE__ */ import_react16.default.createElement(RootWrapper, { ref: DropdownContentRef }, children);
+  return /* @__PURE__ */ import_react19.default.createElement(RootWrapper, { ref: DropdownContentRef }, children);
 };
 DropdownMenu.displayName = "DropdownMenu";
 var DropdownMenuRoot = ({ children }) => {
-  return /* @__PURE__ */ import_react16.default.createElement(DropdownMenuProvider, null, children);
+  return /* @__PURE__ */ import_react19.default.createElement(DropdownMenuProvider, null, children);
 };
 DropdownMenuRoot.displayName = "DropdownMenu.Root";
 var DropdownMenuTrigger = (props) => {
-  const triggerRef = import_react16.default.useRef(null);
+  const triggerRef = import_react19.default.useRef(null);
   const triggerRect = () => triggerRef.current?.getBoundingClientRect();
   const { variant = "ghost", onClick, children, ...restProps } = props;
   const { id, states, methods } = useDropdownMenu();
@@ -1581,7 +1930,7 @@ var DropdownMenuTrigger = (props) => {
         height: Number(triggerRect()?.height)
       });
   };
-  return /* @__PURE__ */ import_react16.default.createElement(
+  return /* @__PURE__ */ import_react19.default.createElement(
     Button,
     {
       ref: triggerRef,
@@ -1596,12 +1945,12 @@ var DropdownMenuTrigger = (props) => {
   );
 };
 DropdownMenuTrigger.displayName = "DropdownMenu.Trigger";
-var DropdownMenuContent = import_react16.default.forwardRef((props, _) => {
+var DropdownMenuContent = import_react19.default.forwardRef((props, _) => {
   const { raw, sizing = "medium", defaultOpen, children, ...restProps } = props;
   const { id, states, methods } = useDropdownMenu();
   const { toggleOpen, setContentProps } = methods;
-  const mounted = import_react16.default.useRef(false);
-  const contentRef = import_react16.default.useRef(null);
+  const mounted = import_react19.default.useRef(false);
+  const contentRef = import_react19.default.useRef(null);
   const contentRect = () => contentRef?.current?.getBoundingClientRect();
   const bodyRect = () => {
     if (typeof document !== "undefined") {
@@ -1625,10 +1974,10 @@ var DropdownMenuContent = import_react16.default.forwardRef((props, _) => {
   };
   const hasEnoughHorizontalSpace = dimensions.body_width - dimensions.content_left > dimensions.content_width * 1.1;
   const hasEnoughVerticalSpace = dimensions.body_height - dimensions.content_bottom > dimensions.content_height - dimensions.content_height * 0.9;
-  import_react16.default.useEffect(() => {
+  import_react19.default.useEffect(() => {
     if (defaultOpen && toggleOpen) toggleOpen();
   }, []);
-  import_react16.default.useEffect(() => {
+  import_react19.default.useEffect(() => {
     mounted.current = true;
     setContentProps && setContentProps({
       top: Number(contentRect()?.top),
@@ -1642,7 +1991,7 @@ var DropdownMenuContent = import_react16.default.forwardRef((props, _) => {
       mounted.current = false;
     };
   }, [states.open]);
-  return /* @__PURE__ */ import_react16.default.createElement(import_react16.default.Fragment, null, states.open && /* @__PURE__ */ import_react16.default.createElement(
+  return /* @__PURE__ */ import_react19.default.createElement(import_react19.default.Fragment, null, states.open && /* @__PURE__ */ import_react19.default.createElement(
     ContentWrapper,
     {
       ref: contentRef,
@@ -1696,8 +2045,8 @@ var DropdownMenuItem = (props) => {
       EventsHandler.toggle();
     }
   };
-  return /* @__PURE__ */ import_react16.default.createElement(
-    ItemWrapper,
+  return /* @__PURE__ */ import_react19.default.createElement(
+    ItemWrapper2,
     {
       role: "menuitem",
       tabIndex: 0,
@@ -1718,23 +2067,23 @@ DropdownMenu.Content = DropdownMenuContent;
 DropdownMenu.Item = DropdownMenuItem;
 
 // src/field/index.tsx
-var import_react18 = __toESM(require("react"));
+var import_react21 = __toESM(require("react"));
 
 // src/field/hooks/index.tsx
-var import_react17 = __toESM(require("react"));
+var import_react20 = __toESM(require("react"));
 var defaultComponentAPI5 = {
   id: "",
   states: {},
   methods: {}
 };
-var FieldContext = (0, import_react17.createContext)(defaultComponentAPI5);
-var useField = () => (0, import_react17.useContext)(FieldContext);
+var FieldContext = (0, import_react20.createContext)(defaultComponentAPI5);
+var useField = () => (0, import_react20.useContext)(FieldContext);
 var FieldProvider = ({ children }) => {
   const context = useFieldProvider();
-  return /* @__PURE__ */ import_react17.default.createElement(FieldContext.Provider, { value: context }, children);
+  return /* @__PURE__ */ import_react20.default.createElement(FieldContext.Provider, { value: context }, children);
 };
 function useFieldProvider() {
-  const fieldId = import_react17.default.useId();
+  const fieldId = import_react20.default.useId();
   return {
     id: fieldId,
     states: {},
@@ -1743,23 +2092,22 @@ function useFieldProvider() {
 }
 
 // src/field/styles/index.ts
-var import_styled_components8 = __toESM(require("styled-components"));
-var FieldDefaultStyles = import_styled_components8.css`
+var import_styled_components10 = __toESM(require("styled-components"));
+var FieldDefaultStyles = import_styled_components10.css`
   outline: none;
-  cursor: pointer;
+  cursor: text;
   display: flex;
   align-items: center;
   justify-content: center;
 
-  font-size: var(--fontsize-small-80);
-  font-weight: 500;
+  font-size: var(--fontsize-medium-20);
+
   line-height: 1.1;
   letter-spacing: calc(
     var(--fontsize-small-10) - ((var(--fontsize-small-10) * 1.066))
   );
 
   border: var(--measurement-small-10) solid transparent;
-  border-radius: var(--measurement-medium-30);
   backdrop-filter: blur(var(--measurement-small-10));
   color: var(--font-color-alpha-60);
   width: fit-content;
@@ -1777,29 +2125,37 @@ var FieldDefaultStyles = import_styled_components8.css`
   &:focus,
   &:active {
     color: var(--font-color);
-
     svg,
     span,
     img {
       opacity: 1;
     }
   }
+
   &::placeholder {
     color: var(--font-color-alpha-30);
   }
+
   &:disabled {
     cursor: not-allowed;
     opacity: 0.6;
   }
 `;
-var FieldVariantsStyles = import_styled_components8.css`
+var FieldVariantsStyles = import_styled_components10.css`
   &[data-variant="primary"] {
     background-color: var(--font-color-alpha-10);
+    border-color: var(--font-color-alpha-10);
+
+    &:focus,
+    &:active {
+      box-shadow: 0 0 0 var(--measurement-small-30) var(--font-color-alpha-10);
+    }
 
     &[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);
     }
   }
 
@@ -1810,7 +2166,12 @@ var FieldVariantsStyles = import_styled_components8.css`
     &:hover,
     &:focus,
     &:active {
-      background-color: var(--font-color-alpha-10);
+      border-color: var(--font-color-alpha-20);
+    }
+
+    &:focus,
+    &:active {
+      box-shadow: 0 0 0 var(--measurement-small-30) var(--font-color-alpha-10);
     }
 
     &[data-error="true"] {
@@ -1821,6 +2182,7 @@ var FieldVariantsStyles = import_styled_components8.css`
       &:focus,
       &:active {
         background-color: var(--alpha-red-10);
+        box-shadow: 0 0 0 var(--measurement-small-30) var(--alpha-red-10);
       }
     }
   }
@@ -1844,39 +2206,51 @@ var FieldVariantsStyles = import_styled_components8.css`
     }
   }
 `;
-var FieldSizeStyles = import_styled_components8.css`
+var FieldSizeStyles = import_styled_components10.css`
   &[data-size="small"] {
-    gap: var(--measurement-medium-10);
+    font-size: var(--fontsize-small-60);
+
     padding: 0 var(--measurement-medium-30);
     min-width: var(--measurement-medium-60);
     min-height: var(--measurement-medium-80);
   }
   &[data-size="medium"] {
-    gap: var(--measurement-medium-30);
     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-20) var(--measurement-medium-40);
+    padding: var(--measurement-medium-50);
     min-width: var(--measurement-medium-90);
     min-height: var(--measurement-medium-90);
   }
 `;
-var Fieldset = import_styled_components8.default.fieldset`
+var FieldShapeStyles = import_styled_components10.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 Fieldset = import_styled_components10.default.fieldset`
   all: unset;
   display: grid;
   gap: var(--measurement-medium-10);
 `;
-var Sup = import_styled_components8.default.sup`
+var Sup = import_styled_components10.default.sup`
   color: var(--color-red);
 `;
-var Input = import_styled_components8.default.input`
+var Input = import_styled_components10.default.input`
   &[data-raw="false"] {
     ${FieldDefaultStyles}
     ${FieldVariantsStyles}
     ${FieldSizeStyles}
+    ${FieldShapeStyles}
 
   &[data-error="true"] {
       &::placeholder {
@@ -1885,7 +2259,7 @@ var Input = import_styled_components8.default.input`
     }
   }
 `;
-var Label = import_styled_components8.default.label`
+var Label = import_styled_components10.default.label`
   &[data-raw="false"] {
     font-weight: 500;
     line-height: 1.1;
@@ -1894,7 +2268,7 @@ var Label = import_styled_components8.default.label`
     );
   }
 `;
-var Def = import_styled_components8.default.dfn`
+var Def = import_styled_components10.default.dfn`
   &[data-raw="false"] {
     font-style: normal;
     font-size: var(--fontsize-medium-10);
@@ -1921,13 +2295,14 @@ var Field = (props) => {
     raw,
     sizing = "medium" /* Medium */,
     variant = "primary" /* Primary */,
+    shape = "smooth",
     error,
     hint,
     ...restProps
   } = props;
-  const metaId = import_react18.default.useId();
+  const metaId = import_react21.default.useId();
   const { id } = useField();
-  return /* @__PURE__ */ import_react18.default.createElement(import_react18.default.Fragment, null, /* @__PURE__ */ import_react18.default.createElement(
+  return /* @__PURE__ */ import_react21.default.createElement(import_react21.default.Fragment, null, /* @__PURE__ */ import_react21.default.createElement(
     Input,
     {
       id,
@@ -1937,10 +2312,11 @@ var Field = (props) => {
       "data-error": Boolean(error),
       "data-variant": variant,
       "data-size": sizing,
+      "data-shape": shape,
       "data-raw": Boolean(raw),
       ...restProps
     }
-  ), (error ?? hint) && /* @__PURE__ */ import_react18.default.createElement(
+  ), (error ?? hint) && /* @__PURE__ */ import_react21.default.createElement(
     FieldMeta,
     {
       raw,
@@ -1951,20 +2327,20 @@ var Field = (props) => {
 };
 Field.displayName = "Field";
 var FieldRoot = ({ children }) => {
-  return /* @__PURE__ */ import_react18.default.createElement(FieldProvider, null, children);
+  return /* @__PURE__ */ import_react21.default.createElement(FieldProvider, null, children);
 };
 FieldRoot.displayName = "Field.Root";
 var FieldWrapper = ({
   children,
   ...restProps
 }) => {
-  return /* @__PURE__ */ import_react18.default.createElement(Fieldset, { ...restProps }, children);
+  return /* @__PURE__ */ import_react21.default.createElement(Fieldset, { ...restProps }, children);
 };
 FieldWrapper.displayName = "Field.Wrapper";
 var FieldLabel = (props) => {
   const { raw, optional = false, children, ...restProps } = props;
   const { id } = useField();
-  return /* @__PURE__ */ import_react18.default.createElement(Label, { htmlFor: id, "data-raw": Boolean(raw), ...restProps }, children, !optional && /* @__PURE__ */ import_react18.default.createElement(Sup, null, "*"));
+  return /* @__PURE__ */ import_react21.default.createElement(Label, { htmlFor: id, "data-raw": Boolean(raw), ...restProps }, children, !optional && /* @__PURE__ */ import_react21.default.createElement(Sup, null, "*"));
 };
 FieldLabel.displayName = "Field.Label";
 var FieldMeta = (props) => {
@@ -1974,9 +2350,9 @@ var FieldMeta = (props) => {
     children,
     ...restProps
   } = props;
-  const metaId = import_react18.default.useId();
+  const metaId = import_react21.default.useId();
   const { id } = useField();
-  return /* @__PURE__ */ import_react18.default.createElement(
+  return /* @__PURE__ */ import_react21.default.createElement(
     Def,
     {
       id: metaId,
@@ -1995,22 +2371,22 @@ Field.Label = FieldLabel;
 Field.Meta = FieldMeta;
 
 // src/otp-field/index.tsx
-var import_react20 = __toESM(require("react"));
+var import_react23 = __toESM(require("react"));
 
 // src/otp-field/hooks/index.tsx
-var import_react19 = __toESM(require("react"));
-var OTPFieldContext = import_react19.default.createContext(
+var import_react22 = __toESM(require("react"));
+var OTPFieldContext = import_react22.default.createContext(
   null
 );
 var useOTPField = () => {
-  const context = import_react19.default.useContext(OTPFieldContext);
+  const context = import_react22.default.useContext(OTPFieldContext);
   if (!context) return null;
   return context;
 };
 
 // src/otp-field/styles/index.ts
-var import_styled_components9 = __toESM(require("styled-components"));
-var OTPCell = import_styled_components9.default.input`
+var import_styled_components11 = __toESM(require("styled-components"));
+var OTPCell = import_styled_components11.default.input`
   width: var(--measurement-medium-90);
   height: var(--measurement-medium-90);
   border: var(--measurement-small-10) solid var(--font-color-alpha-10);
@@ -2045,11 +2421,11 @@ var OTPCell = import_styled_components9.default.input`
 // src/otp-field/index.tsx
 var OTPField = ({ children, length, onComplete }) => {
   const defaultLength = length ?? 6;
-  const inputRefs = import_react20.default.useRef([]);
-  const [otp, setOtp] = import_react20.default.useState(
+  const inputRefs = import_react23.default.useRef([]);
+  const [otp, setOtp] = import_react23.default.useState(
     Array.from({ length: defaultLength }, () => "")
   );
-  const [activeIndex, setActiveIndex] = import_react20.default.useState(0);
+  const [activeIndex, setActiveIndex] = import_react23.default.useState(0);
   const handleChange = (index, value) => {
     const newOtp = [...otp];
     newOtp[index] = value.substring(value.length - 1);
@@ -2110,13 +2486,13 @@ var OTPField = ({ children, length, onComplete }) => {
     );
     return () => clearTimeout(timeout);
   };
-  import_react20.default.useEffect(() => {
+  import_react23.default.useEffect(() => {
     const otpString = otp.join("");
     if (otpString.length === defaultLength && onComplete) {
       onComplete(otpString);
     }
   }, [otp, defaultLength, onComplete]);
-  const contextValue = import_react20.default.useMemo(() => {
+  const contextValue = import_react23.default.useMemo(() => {
     return {
       otp,
       activeIndex,
@@ -2139,11 +2515,11 @@ var OTPField = ({ children, length, onComplete }) => {
     handleClick,
     handlePaste
   ]);
-  return /* @__PURE__ */ import_react20.default.createElement(OTPFieldContext.Provider, { value: contextValue }, children);
+  return /* @__PURE__ */ import_react23.default.createElement(OTPFieldContext.Provider, { value: contextValue }, children);
 };
 OTPField.displayName = "OTPField";
-var OTPFieldGroup = import_react20.default.forwardRef(({ ...props }, ref) => {
-  return /* @__PURE__ */ import_react20.default.createElement("span", { ref, className: "flex g-medium-10 align-center", ...props });
+var OTPFieldGroup = import_react23.default.forwardRef(({ ...props }, ref) => {
+  return /* @__PURE__ */ import_react23.default.createElement("span", { ref, className: "flex g-medium-10 align-center", ...props });
 });
 OTPFieldGroup.displayName = "OTPField.Group";
 var OTPFieldSlot = ({
@@ -2162,7 +2538,7 @@ var OTPFieldSlot = ({
     handleClick,
     handlePaste
   } = context;
-  return /* @__PURE__ */ import_react20.default.createElement(
+  return /* @__PURE__ */ import_react23.default.createElement(
     OTPCell,
     {
       ref: (el) => inputRefs.current[index] = el,
@@ -2188,11 +2564,11 @@ OTPField.Group = OTPFieldGroup;
 OTPField.Slot = OTPFieldSlot;
 
 // src/overlay/index.tsx
-var import_react21 = __toESM(require("react"));
+var import_react24 = __toESM(require("react"));
 
 // src/overlay/styles/index.ts
-var import_styled_components10 = __toESM(require("styled-components"));
-var OverlayWrapper = import_styled_components10.default.div`
+var import_styled_components12 = __toESM(require("styled-components"));
+var OverlayWrapper = import_styled_components12.default.div`
   @keyframes animate-fade {
     0% {
       opacity: 0;
@@ -2220,15 +2596,15 @@ var OverlayWrapper = import_styled_components10.default.div`
 // src/overlay/index.tsx
 var Overlay = (props) => {
   const { raw, visible, closeOnInteract, onClick, ...restProps } = props;
-  const [mounted, setMounted] = import_react21.default.useState(Boolean(visible));
+  const [mounted, setMounted] = import_react24.default.useState(Boolean(visible));
   const handleClick = (event) => {
     if (onClick) onClick(event);
     if (closeOnInteract) setMounted(false);
   };
-  import_react21.default.useEffect(() => {
+  import_react24.default.useEffect(() => {
     if (visible !== mounted) setMounted(Boolean(visible));
   }, [visible]);
-  return /* @__PURE__ */ import_react21.default.createElement(import_react21.default.Fragment, null, mounted && /* @__PURE__ */ import_react21.default.createElement(
+  return /* @__PURE__ */ import_react24.default.createElement(import_react24.default.Fragment, null, mounted && /* @__PURE__ */ import_react24.default.createElement(
     OverlayWrapper,
     {
       tabIndex: -1,
@@ -2242,14 +2618,14 @@ var Overlay = (props) => {
 Overlay.displayName = "Overlay";
 
 // src/page/index.tsx
-var import_react22 = __toESM(require("react"));
+var import_react25 = __toESM(require("react"));
 
 // src/page/styles/index.ts
-var import_styled_components12 = __toESM(require("styled-components"));
+var import_styled_components14 = __toESM(require("styled-components"));
 
 // src/scrollarea/styles/index.ts
-var import_styled_components11 = __toESM(require("styled-components"));
-var HiddenScrollbar = import_styled_components11.css`
+var import_styled_components13 = __toESM(require("styled-components"));
+var HiddenScrollbar = import_styled_components13.css`
   scrollbar-width: none;
 
   &::-webkit-scrollbar {
@@ -2261,7 +2637,7 @@ var HiddenScrollbar = import_styled_components11.css`
     display: none;
   }
 `;
-var CustomScrollbar = import_styled_components11.css`
+var CustomScrollbar = import_styled_components13.css`
   height: ${({ $height }) => $height || "100%"};
   width: ${({ $width }) => $width || "100%"};
   overflow-y: auto;
@@ -2293,7 +2669,7 @@ var CustomScrollbar = import_styled_components11.css`
   scrollbar-width: thin;
   scrollbar-color: ${({ $thumbColor, $trackColor }) => `${$thumbColor || "var(--font-color-alpha-10)"} ${$trackColor || "transparent"}`};
 `;
-var ScrollAreaWrapper = import_styled_components11.default.div`
+var ScrollAreaWrapper = import_styled_components13.default.div`
   overflow: scroll;
 
   &[data-scrollbar="true"] {
@@ -2305,11 +2681,11 @@ var ScrollAreaWrapper = import_styled_components11.default.div`
 `;
 
 // src/page/styles/index.ts
-var PageRootWrapper = import_styled_components12.default.div`
+var PageRootWrapper = import_styled_components14.default.div`
   height: 100dvh;
   width: 100%;
 `;
-var PageNavWrapper = import_styled_components12.default.nav`
+var PageNavWrapper = import_styled_components14.default.nav`
   background-color: var(--body-color);
   border: var(--measurement-small-10) solid transparent;
   border-bottom-color: var(--font-color-alpha-10);
@@ -2318,7 +2694,7 @@ var PageNavWrapper = import_styled_components12.default.nav`
   max-height: var(--measurement-large-20);
   padding: var(--measurement-medium-30);
 `;
-var PageMenuWrapper = import_styled_components12.default.menu`
+var PageMenuWrapper = import_styled_components14.default.menu`
   background-color: var(--body-color);
   border: var(--measurement-small-10) solid transparent;
   border-bottom-color: var(--font-color-alpha-10);
@@ -2328,19 +2704,19 @@ var PageMenuWrapper = import_styled_components12.default.menu`
   margin: 0;
   padding: var(--measurement-medium-60) var(--measurement-medium-30);
 `;
-var PagePanelWrapper = import_styled_components12.default.aside`
+var PagePanelWrapper = import_styled_components14.default.aside`
   position: absolute;
   bottom: 0;
   width: 100%;
   overflow: scroll;
   ${HiddenScrollbar}
 `;
-var PageSectionWrapper = import_styled_components12.default.div`
+var PageSectionWrapper = import_styled_components14.default.div`
   background: var(--body-color);
   width: 100%;
   height: 100%;
 `;
-var PageBodyWrapper = import_styled_components12.default.div`
+var PageBodyWrapper = import_styled_components14.default.div`
   --menus-height: calc(
     var(--measurement-large-30) *
       ${({ $menus }) => $menus ? Number($menus) : 0}
@@ -2365,12 +2741,12 @@ var PageBodyWrapper = import_styled_components12.default.div`
 // src/page/index.tsx
 var Page = (props) => {
   const { children } = props;
-  return /* @__PURE__ */ import_react22.default.createElement(PageRootWrapper, { className: "flex", ...props }, children);
+  return /* @__PURE__ */ import_react25.default.createElement(PageRootWrapper, { className: "flex", ...props }, children);
 };
 Page.displayName = "Page";
 var PageNavigation = (props) => {
   const { children } = props;
-  return /* @__PURE__ */ import_react22.default.createElement(PageNavWrapper, { ...props }, children);
+  return /* @__PURE__ */ import_react25.default.createElement(PageNavWrapper, { ...props }, children);
 };
 PageNavigation.displayName = "Page.Navigation";
 var PageTools = (props) => {
@@ -2392,7 +2768,7 @@ var PageTools = (props) => {
   const handleClick = (event) => {
     if (onClick) onClick(event);
   };
-  return /* @__PURE__ */ import_react22.default.createElement(Toolbar.Root, null, /* @__PURE__ */ import_react22.default.createElement(
+  return /* @__PURE__ */ import_react25.default.createElement(Toolbar.Root, null, /* @__PURE__ */ import_react25.default.createElement(
     Toolbar,
     {
       raw,
@@ -2404,27 +2780,27 @@ var PageTools = (props) => {
       defaultOpen,
       ...props
     },
-    /* @__PURE__ */ import_react22.default.createElement(Toolbar.Section, { showoncollapse }, children),
-    !fixed && /* @__PURE__ */ import_react22.default.createElement(
+    /* @__PURE__ */ import_react25.default.createElement(Toolbar.Section, { showoncollapse }, children),
+    !fixed && /* @__PURE__ */ import_react25.default.createElement(
       Toolbar.Trigger,
       {
         title: shortcut ? `${bindkey ?? "ctrl"} + ${hotkey}` : "toolbar-trigger",
         onClick: handleClick,
         ...triggerProps
       },
-      trigger ?? /* @__PURE__ */ import_react22.default.createElement("span", null, "\u2194")
+      trigger ?? /* @__PURE__ */ import_react25.default.createElement("span", null, "\u2194")
     )
   ));
 };
 PageTools.displayName = "Page.Tools";
 var PageContent = (props) => {
   const { children } = props;
-  return /* @__PURE__ */ import_react22.default.createElement(ScrollArea, { as: PageSectionWrapper, ...props }, children);
+  return /* @__PURE__ */ import_react25.default.createElement(ScrollArea, { as: PageSectionWrapper, ...props }, children);
 };
 PageContent.displayName = "Page.Content";
 var PageWrapper = (props) => {
   const { children } = props;
-  return /* @__PURE__ */ import_react22.default.createElement(PageBodyWrapper, { ...props }, children);
+  return /* @__PURE__ */ import_react25.default.createElement(PageBodyWrapper, { ...props }, children);
 };
 PageWrapper.displayName = "Page.Wrapper";
 var PagePanel = (props) => {
@@ -2447,7 +2823,7 @@ var PagePanel = (props) => {
   const handleClick = (event) => {
     if (onClick) onClick(event);
   };
-  return /* @__PURE__ */ import_react22.default.createElement(Toolbar.Root, null, /* @__PURE__ */ import_react22.default.createElement(
+  return /* @__PURE__ */ import_react25.default.createElement(Toolbar.Root, null, /* @__PURE__ */ import_react25.default.createElement(
     PagePanelWrapper,
     {
       as: Toolbar,
@@ -2461,22 +2837,22 @@ var PagePanel = (props) => {
       defaultOpen,
       "aria-label": props["aria-label"]
     },
-    !fixed && /* @__PURE__ */ import_react22.default.createElement(
+    !fixed && /* @__PURE__ */ import_react25.default.createElement(
       Toolbar.Trigger,
       {
         title: shortcut ? `${bindkey ?? "ctrl"} + ${hotkey}` : "toolbar-trigger",
         onClick: handleClick,
         ...triggerProps
       },
-      trigger ?? /* @__PURE__ */ import_react22.default.createElement("span", { style: { transform: "rotate(90deg)" } }, "\u2194")
+      trigger ?? /* @__PURE__ */ import_react25.default.createElement("span", { style: { transform: "rotate(90deg)" } }, "\u2194")
     ),
-    /* @__PURE__ */ import_react22.default.createElement(Toolbar.Section, { showoncollapse }, children)
+    /* @__PURE__ */ import_react25.default.createElement(Toolbar.Section, { showoncollapse }, children)
   ));
 };
 PagePanel.displayName = "Page.Panel";
 var PageMenu = (props) => {
   const { children } = props;
-  return /* @__PURE__ */ import_react22.default.createElement(PageMenuWrapper, { ...props }, children);
+  return /* @__PURE__ */ import_react25.default.createElement(PageMenuWrapper, { ...props }, children);
 };
 PageMenu.displayName = "Page.Menu";
 Page.Navigation = PageNavigation;
@@ -2487,14 +2863,14 @@ Page.Panel = PagePanel;
 Page.Menu = PageMenu;
 
 // src/portal/index.tsx
-var import_react23 = __toESM(require("react"));
+var import_react26 = __toESM(require("react"));
 var import_react_dom = require("react-dom");
 var Portal = (props) => {
   if (typeof document === "undefined") return null;
   const { container, children } = props;
-  const [hasMounted, setHasMounted] = import_react23.default.useState(false);
-  const [portalRoot, setPortalRoot] = import_react23.default.useState(null);
-  import_react23.default.useEffect(() => {
+  const [hasMounted, setHasMounted] = import_react26.default.useState(false);
+  const [portalRoot, setPortalRoot] = import_react26.default.useState(null);
+  import_react26.default.useEffect(() => {
     setHasMounted(true);
     setPortalRoot(document.querySelector(`#${container}`));
   }, [container]);
@@ -2503,26 +2879,188 @@ var Portal = (props) => {
 };
 Portal.displayName = "Portal";
 
+// src/privacy-field/index.tsx
+var import_react27 = __toESM(require("react"));
+
+// src/privacy-field/styles/index.ts
+var import_styled_components15 = __toESM(require("styled-components"));
+var Wrapper = (0, import_styled_components15.default)(Field.Wrapper)`
+  position: relative;
+
+  input {
+    width: 100% !important;
+  }
+`;
+var Trigger = (0, import_styled_components15.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_react27.default.useState(
+    defaultType ?? "password"
+  );
+  const handleChangeType = import_react27.default.useCallback(() => {
+    if (type === "text") setType("password");
+    if (type === "password") setType("text");
+  }, [type, setType]);
+  return /* @__PURE__ */ import_react27.default.createElement(Wrapper, { className: "flex" }, /* @__PURE__ */ import_react27.default.createElement(Field, { autoComplete: "off", type, ...restProps }), /* @__PURE__ */ import_react27.default.createElement(Trigger, { variant: "ghost", sizing: "small", onClick: handleChangeType }, type === "text" && textIcon, type === "password" && passwordIcon));
+};
+PrivacyField.displayName = "PrivacyField";
+
+// src/resizable/index.tsx
+var import_react28 = __toESM(require("react"));
+
+// src/resizable/styles/index.ts
+var import_styled_components16 = __toESM(require("styled-components"));
+var SplitContainer = import_styled_components16.default.div`
+  position: relative;
+`;
+var Panel = import_styled_components16.default.div`
+  overflow: hidden;
+  width: ${(props) => props.width}%;
+`;
+var Divider2 = import_styled_components16.default.div`
+  width: var(--measurement-medium-10);
+  height: 100%;
+  top: 0;
+
+  border-radius: var(--measurement-medium-60);
+  background-color: transparent;
+
+  /* background-color: ${(props) => props.$dragging ? "var(--font-color-alpha-10)" : "transparent"}; */
+
+  cursor: col-resize;
+  transition: background-color 0.2s;
+  position: relative;
+
+  /** Shows DragIndicator on hover */
+  &:hover .drag-indicator-handle,
+  &:active .drag-indicator-handle {
+    opacity: 1;
+  }
+
+  .drag-indicator-handle {
+    height: ${(props) => props.$dragging ? "var(--measurement-large-10)" : "var(--measurement-medium-60)"};
+  }
+`;
+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_components16.default.div`
+  position: fixed;
+  width: var(--measurement-medium-10);
+  /* height: var(--measurement-medium-60); */
+  background-color: var(--font-color-alpha-60);
+  border-radius: var(--measurement-large-10);
+
+  opacity: 0;
+  transition: all 0.2s;
+`;
+var DragOverlay = import_styled_components16.default.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: var(--depth-default-90);
+  cursor: col-resize;
+`;
+
+// src/resizable/index.tsx
+var Resizable = ({
+  defaultWidth,
+  left,
+  right
+}) => {
+  const containerRef = import_react28.default.useRef(null);
+  const [leftWidth, setLeftWidth] = import_react28.default.useState(defaultWidth ?? 50);
+  const [isDragging, setIsDragging] = import_react28.default.useState(false);
+  const handleMouseDown = import_react28.default.useCallback(() => setIsDragging(true), []);
+  const handleMouseUp = import_react28.default.useCallback(() => setIsDragging(false), []);
+  const handleMouseMove = import_react28.default.useCallback(
+    (e) => {
+      if (!isDragging || !containerRef.current) return;
+      const containerRect = containerRef.current.getBoundingClientRect();
+      const newLeftWidth = (e.clientX - containerRect.left) / containerRect.width * 100;
+      const threshold = { min: 30, max: 70 };
+      const constrainedWidth = Math.min(
+        Math.max(newLeftWidth, threshold.min),
+        threshold.max
+      );
+      setLeftWidth(constrainedWidth);
+    },
+    [isDragging]
+  );
+  import_react28.default.useEffect(() => {
+    if (isDragging) {
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+      document.body.style.cursor = "col-resize";
+      document.body.style.userSelect = "none";
+    } else {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+      document.body.style.cursor = "";
+      document.body.style.userSelect = "";
+    }
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+      document.body.style.cursor = "";
+      document.body.style.userSelect = "";
+    };
+  }, [isDragging, handleMouseMove, handleMouseUp]);
+  return /* @__PURE__ */ import_react28.default.createElement(import_react28.default.Fragment, null, /* @__PURE__ */ import_react28.default.createElement(SplitContainer, { ref: containerRef, className: "h-100 flex" }, /* @__PURE__ */ import_react28.default.createElement(Panel, { width: leftWidth }, left), /* @__PURE__ */ import_react28.default.createElement(
+    Divider2,
+    {
+      $dragging: isDragging,
+      onMouseDown: handleMouseDown,
+      onTouchStart: handleMouseDown
+    },
+    /* @__PURE__ */ import_react28.default.createElement(
+      DragHandle,
+      {
+        className: "flex align-center justify-center",
+        id: "drag-handle"
+      },
+      /* @__PURE__ */ import_react28.default.createElement(DragIndicator, { className: "drag-indicator-handle" })
+    )
+  ), /* @__PURE__ */ import_react28.default.createElement(Panel, { width: 100 - leftWidth }, right)), isDragging && /* @__PURE__ */ import_react28.default.createElement(DragOverlay, null));
+};
+Resizable.displayName = "Resizable";
+
 // src/sheet/index.tsx
-var import_react25 = __toESM(require("react"));
+var import_react30 = __toESM(require("react"));
 
 // src/sheet/hooks/index.tsx
-var import_react24 = __toESM(require("react"));
-var SheetContext = import_react24.default.createContext({
+var import_react29 = __toESM(require("react"));
+var SheetContext = import_react29.default.createContext({
   id: {},
   states: {},
   methods: {}
 });
-var useSheet = () => import_react24.default.useContext(SheetContext);
+var useSheet = () => import_react29.default.useContext(SheetContext);
 var SheetProvider = ({ children }) => {
   const context = useSheetProvider();
-  return /* @__PURE__ */ import_react24.default.createElement(SheetContext.Provider, { value: context }, children);
+  return /* @__PURE__ */ import_react29.default.createElement(SheetContext.Provider, { value: context }, children);
 };
 function useSheetProvider() {
-  const containerId = import_react24.default.useId();
-  const triggerId = import_react24.default.useId();
-  const controlId = import_react24.default.useId();
-  const [open, setOpen] = import_react24.default.useState(false);
+  const containerId = import_react29.default.useId();
+  const triggerId = import_react29.default.useId();
+  const controlId = import_react29.default.useId();
+  const [open, setOpen] = import_react29.default.useState(false);
   return {
     id: {
       containerId,
@@ -2540,8 +3078,8 @@ function useSheetProvider() {
 }
 
 // src/sheet/styles/index.ts
-var import_styled_components13 = __toESM(require("styled-components"));
-var SheetStyles = import_styled_components13.css`
+var import_styled_components17 = __toESM(require("styled-components"));
+var SheetStyles = import_styled_components17.css`
   all: unset;
   position: fixed;
   background-color: var(--body-color);
@@ -2572,7 +3110,7 @@ var SheetStyles = import_styled_components13.css`
   animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
   animation-fill-mode: backwards;
 `;
-var SheetSizeStyles = import_styled_components13.css`
+var SheetSizeStyles = import_styled_components17.css`
   &[data-size="small"] {
     width: var(--measurement-large-80);
   }
@@ -2585,7 +3123,7 @@ var SheetSizeStyles = import_styled_components13.css`
     width: calc(var(--measurement-large-90) * 1.5);
   }
 `;
-var SheetSideStyles = import_styled_components13.css`
+var SheetSideStyles = import_styled_components17.css`
   top: 0;
 
   &[data-side="right"] {
@@ -2600,7 +3138,7 @@ var SheetSideStyles = import_styled_components13.css`
     animation-name: slide-left;
   }
 `;
-var SheetWrapper = import_styled_components13.default.dialog`
+var SheetWrapper = import_styled_components17.default.dialog`
   &[data-raw="false"] {
     ${SheetStyles}
     ${SheetSideStyles}
@@ -2610,7 +3148,7 @@ var SheetWrapper = import_styled_components13.default.dialog`
 
 // src/sheet/index.tsx
 var SheetRoot = ({ children }) => {
-  return /* @__PURE__ */ import_react25.default.createElement(SheetProvider, null, children);
+  return /* @__PURE__ */ import_react30.default.createElement(SheetProvider, null, children);
 };
 SheetRoot.displayName = "Sheet.Root";
 var Sheet = (props) => {
@@ -2631,16 +3169,16 @@ var Sheet = (props) => {
   const { id, states, methods } = useSheet();
   const { toggle } = methods;
   const shortcutControls = useKeyPress(String(hotkey), true, bindkey);
-  import_react25.default.useEffect(() => {
+  import_react30.default.useEffect(() => {
     if (open && toggle) return toggle();
   }, [open]);
-  import_react25.default.useEffect(() => {
+  import_react30.default.useEffect(() => {
     if (shortcut && shortcutControls && toggle) {
       return toggle();
     }
   }, [shortcutControls]);
   useDisabledScroll(lock && Boolean(states.open));
-  return /* @__PURE__ */ import_react25.default.createElement(import_react25.default.Fragment, null, states.open && /* @__PURE__ */ import_react25.default.createElement(import_react25.default.Fragment, null, /* @__PURE__ */ import_react25.default.createElement(
+  return /* @__PURE__ */ import_react30.default.createElement(import_react30.default.Fragment, null, states.open && /* @__PURE__ */ import_react30.default.createElement(import_react30.default.Fragment, null, /* @__PURE__ */ import_react30.default.createElement(
     SheetWrapper,
     {
       role: "dialog",
@@ -2657,7 +3195,7 @@ var Sheet = (props) => {
       ...restProps
     },
     children
-  ), overlay && /* @__PURE__ */ import_react25.default.createElement(
+  ), overlay && /* @__PURE__ */ import_react30.default.createElement(
     Overlay,
     {
       onClick: () => toggle && toggle(!states.open),
@@ -2683,7 +3221,7 @@ var SheetTrigger = (props) => {
     if (onClick) onClick(event);
     if (toggle) toggle(!states.open);
   };
-  return /* @__PURE__ */ import_react25.default.createElement(
+  return /* @__PURE__ */ import_react30.default.createElement(
     Button,
     {
       id: id.triggerId,
@@ -2703,13 +3241,13 @@ Sheet.Root = SheetRoot;
 Sheet.Trigger = SheetTrigger;
 
 // src/scrollarea/index.tsx
-var import_react26 = __toESM(require("react"));
+var import_react31 = __toESM(require("react"));
 var ScrollArea = ({
   scrollbar = false,
   children,
   ...restProps
 }) => {
-  return /* @__PURE__ */ import_react26.default.createElement(
+  return /* @__PURE__ */ import_react31.default.createElement(
     ScrollAreaWrapper,
     {
       "aria-hidden": "true",
@@ -2720,25 +3258,148 @@ var ScrollArea = ({
   );
 };
 
+// src/spinner/index.tsx
+var import_react32 = __toESM(require("react"));
+
+// src/spinner/styles/index.ts
+var import_styled_components18 = __toESM(require("styled-components"));
+var Rotate = import_styled_components18.keyframes`
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+`;
+var FieldSizeStyles2 = import_styled_components18.css`
+  &[data-size="small"] {
+    width: var(--measurement-medium-40);
+    height: var(--measurement-medium-40);
+  }
+  &[data-size="medium"] {
+    width: var(--measurement-medium-50);
+    height: var(--measurement-medium-50);
+  }
+  &[data-size="large"] {
+    width: var(--measurement-medium-60);
+    height: var(--measurement-medium-60);
+  }
+`;
+var RotatingSpinner = import_styled_components18.default.span`
+  padding: 0;
+  margin: 0;
+
+  display: inline-block;
+  box-sizing: border-box;
+
+  border: var(--measurement-small-60) solid var(--font-color-alpha-30);
+  border-bottom-color: transparent;
+  border-radius: var(--measurement-large-90);
+
+  animation: ${Rotate} 1s linear infinite;
+
+  ${FieldSizeStyles2}
+`;
+
+// src/spinner/index.tsx
+var Spinner = (props) => {
+  return /* @__PURE__ */ import_react32.default.createElement(RotatingSpinner, { "data-size": props.sizing ?? "medium" });
+};
+
+// src/skeleton/index.tsx
+var import_react33 = __toESM(require("react"));
+
+// src/skeleton/styles/index.ts
+var import_styled_components19 = __toESM(require("styled-components"));
+var SkeletonBlink = import_styled_components19.keyframes`
+    0% {
+      opacity: 0.3;
+    }
+    100% {
+      opacity: 0.1;
+    }
+`;
+var SkeletonBaseStyles = import_styled_components19.css`
+  background: linear-gradient(
+    45deg,
+    var(--font-color-alpha-10),
+    var(--font-color-alpha-20)
+  );
+  animation: ${SkeletonBlink} 1s ease-in-out alternate-reverse infinite;
+`;
+var SkeletonSizeStyles = import_styled_components19.css`
+  &[data-size="small"] {
+    width: 100%;
+
+    min-width: var(--measurement-medium-60);
+    min-height: var(--measurement-medium-70);
+  }
+  &[data-size="medium"] {
+    width: 100%;
+    min-width: var(--measurement-medium-90);
+    min-height: var(--measurement-medium-80);
+  }
+  &[data-size="large"] {
+    width: 100%;
+    min-width: var(--measurement-medium-90);
+    min-height: var(--measurement-medium-90);
+  }
+`;
+var SkeletonShapeStyles = import_styled_components19.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 SkeletonLoader = import_styled_components19.default.span`
+  ${SkeletonBaseStyles}
+  ${SkeletonSizeStyles}
+  ${SkeletonShapeStyles}
+`;
+
+// src/skeleton/index.tsx
+var Skeleton = (props) => {
+  const {
+    sizing = "medium" /* Medium */,
+    shape = "smooth",
+    ...restProps
+  } = props;
+  return /* @__PURE__ */ import_react33.default.createElement(
+    SkeletonLoader,
+    {
+      "data-size": sizing,
+      "data-shape": shape,
+      tabIndex: 0,
+      ...restProps
+    }
+  );
+};
+Skeleton.displayName = "Skeleton";
+
 // src/switch/index.tsx
-var import_react28 = __toESM(require("react"));
+var import_react35 = __toESM(require("react"));
 
 // src/switch/hooks/index.tsx
-var import_react27 = __toESM(require("react"));
+var import_react34 = __toESM(require("react"));
 var defaultComponentAPI6 = {
   id: "",
   states: {},
   methods: {}
 };
-var SwitchContext = (0, import_react27.createContext)(defaultComponentAPI6);
-var useSwitch = () => (0, import_react27.useContext)(SwitchContext);
+var SwitchContext = (0, import_react34.createContext)(defaultComponentAPI6);
+var useSwitch = () => (0, import_react34.useContext)(SwitchContext);
 var SwitchProvider = ({ children }) => {
   const context = useSwitchProvider();
-  return /* @__PURE__ */ import_react27.default.createElement(SwitchContext.Provider, { value: context }, children);
+  return /* @__PURE__ */ import_react34.default.createElement(SwitchContext.Provider, { value: context }, children);
 };
 function useSwitchProvider() {
-  const [checked, setChecked] = (0, import_react27.useState)(false);
-  const switchId = import_react27.default.useId();
+  const [checked, setChecked] = (0, import_react34.useState)(false);
+  const switchId = import_react34.default.useId();
   return {
     id: switchId,
     states: {
@@ -2751,8 +3412,8 @@ function useSwitchProvider() {
 }
 
 // src/switch/styles/index.ts
-var import_styled_components14 = __toESM(require("styled-components"));
-var SwitchDefaultStyles = import_styled_components14.css`
+var import_styled_components20 = __toESM(require("styled-components"));
+var SwitchDefaultStyles = import_styled_components20.css`
   all: unset;
 
   border: var(--measurement-small-10) solid transparent;
@@ -2766,7 +3427,7 @@ var SwitchDefaultStyles = import_styled_components14.css`
     opacity: 0.6;
   }
 `;
-var SwitchVariantsStyles = import_styled_components14.css`
+var SwitchVariantsStyles = import_styled_components20.css`
   &[data-variant="primary"] {
     &[aria-checked="true"] {
       background-color: var(--color-green);
@@ -2797,7 +3458,7 @@ var SwitchVariantsStyles = import_styled_components14.css`
     }
   }
 `;
-var SwitchSizeStyles = import_styled_components14.css`
+var SwitchSizeStyles = import_styled_components20.css`
   &[data-size="small"] {
     width: calc(var(--measurement-medium-60) * 1.33);
     height: var(--measurement-medium-50);
@@ -2846,14 +3507,14 @@ var SwitchSizeStyles = import_styled_components14.css`
     }
   }
 `;
-var TriggerWrapper = import_styled_components14.default.button`
+var TriggerWrapper = import_styled_components20.default.button`
   &[data-raw="false"] {
     ${SwitchDefaultStyles}
     ${SwitchVariantsStyles}
     ${SwitchSizeStyles}
   }
 `;
-var Thumb = import_styled_components14.default.span`
+var Thumb = import_styled_components20.default.span`
   &[data-raw="false"] {
     all: unset;
     display: block;
@@ -2887,10 +3548,10 @@ var Switch = (props) => {
     if (onClick) onClick(event);
     if (toggleSwitch) toggleSwitch();
   };
-  import_react28.default.useEffect(() => {
+  import_react35.default.useEffect(() => {
     if (defaultChecked && toggleSwitch) toggleSwitch();
   }, [defaultChecked]);
-  return /* @__PURE__ */ import_react28.default.createElement(
+  return /* @__PURE__ */ import_react35.default.createElement(
     TriggerWrapper,
     {
       type: "button",
@@ -2906,19 +3567,19 @@ var Switch = (props) => {
       "data-raw": Boolean(raw),
       ...restProps
     },
-    /* @__PURE__ */ import_react28.default.createElement("title", null, "Switch"),
+    /* @__PURE__ */ import_react35.default.createElement("title", null, "Switch"),
     children
   );
 };
 Switch.displayName = "Switch";
 var SwitchRoot = ({ children }) => {
-  return /* @__PURE__ */ import_react28.default.createElement(SwitchProvider, null, children);
+  return /* @__PURE__ */ import_react35.default.createElement(SwitchProvider, null, children);
 };
 SwitchRoot.displayName = "Switch.Root";
 var SwitchThumb = (props) => {
   const { raw, sizing } = props;
   const { id, states } = useSwitch();
-  return /* @__PURE__ */ import_react28.default.createElement(
+  return /* @__PURE__ */ import_react35.default.createElement(
     Thumb,
     {
       role: "presentation",
@@ -2938,11 +3599,11 @@ Switch.Root = SwitchRoot;
 Switch.Thumb = SwitchThumb;
 
 // src/table/index.tsx
-var import_react29 = __toESM(require("react"));
+var import_react36 = __toESM(require("react"));
 
 // src/table/styles/index.ts
-var import_styled_components15 = __toESM(require("styled-components"));
-var CellStyles = import_styled_components15.css`
+var import_styled_components21 = __toESM(require("styled-components"));
+var CellStyles = import_styled_components21.css`
   box-sizing: border-box;
   border: none;
   line-height: 1;
@@ -2952,11 +3613,11 @@ var CellStyles = import_styled_components15.css`
     var(--fontsize-small-10) - ((var(--fontsize-small-10) * 1.066))
   );
 `;
-var TableLayer = import_styled_components15.default.div`
+var TableLayer = import_styled_components21.default.div`
   border-radius: var(--measurement-medium-30);
   border: var(--measurement-small-10) solid var(--font-color-alpha-10);
 `;
-var TableWrapper = import_styled_components15.default.table`
+var TableWrapper = import_styled_components21.default.table`
   border-collapse: collapse;
 
   tbody {
@@ -2967,7 +3628,7 @@ var TableWrapper = import_styled_components15.default.table`
     }
   }
 `;
-var RowWrapper = import_styled_components15.default.tr`
+var RowWrapper = import_styled_components21.default.tr`
   border-bottom: var(--measurement-small-10) solid var(--font-color-alpha-10);
 
   transition: background-color linear 0.1s;
@@ -2976,7 +3637,7 @@ var RowWrapper = import_styled_components15.default.tr`
     background-color: var(--font-color-alpha-10);
   }
 `;
-var HeadCellWrapper = import_styled_components15.default.th`
+var HeadCellWrapper = import_styled_components21.default.th`
   font-size: var(--fontsize-medium-10);
   ${CellStyles}
 
@@ -2984,7 +3645,7 @@ var HeadCellWrapper = import_styled_components15.default.th`
     color: var(--font-color-alpha-60);
   }
 `;
-var CellWrapper = import_styled_components15.default.td`
+var CellWrapper = import_styled_components21.default.td`
   ${CellStyles}
 `;
 
@@ -2993,43 +3654,43 @@ var Table = ({
   children,
   ...restProps
 }) => {
-  return /* @__PURE__ */ import_react29.default.createElement(ScrollArea, { as: TableLayer, role: "presentation", tabIndex: -1 }, /* @__PURE__ */ import_react29.default.createElement(TableWrapper, { ...restProps, cellSpacing: "0", cellPadding: "0" }, children));
+  return /* @__PURE__ */ import_react36.default.createElement(ScrollArea, { as: TableLayer, role: "presentation", tabIndex: -1 }, /* @__PURE__ */ import_react36.default.createElement(TableWrapper, { ...restProps, cellSpacing: "0", cellPadding: "0" }, children));
 };
 Table.displayName = "Table";
 var TableHead = ({
   children,
   ...restProps
 }) => {
-  return /* @__PURE__ */ import_react29.default.createElement("thead", { ...restProps }, children);
+  return /* @__PURE__ */ import_react36.default.createElement("thead", { ...restProps }, children);
 };
 TableHead.displayName = "Table.Head";
 var TableBody = ({
   children,
   ...restProps
 }) => {
-  return /* @__PURE__ */ import_react29.default.createElement("tbody", { ...restProps }, children);
+  return /* @__PURE__ */ import_react36.default.createElement("tbody", { ...restProps }, children);
 };
 TableBody.displayName = "Table.Body";
 var TableHeadCell = ({
   children,
   ...restProps
 }) => {
-  return /* @__PURE__ */ import_react29.default.createElement(HeadCellWrapper, { colSpan: 1, ...restProps }, /* @__PURE__ */ import_react29.default.createElement("div", { className: "flex align-center g-medium-30" }, children));
+  return /* @__PURE__ */ import_react36.default.createElement(HeadCellWrapper, { colSpan: 1, ...restProps }, /* @__PURE__ */ import_react36.default.createElement("div", { className: "flex align-center g-medium-30" }, children));
 };
 TableHeadCell.displayName = "Table.HeadCell";
 var TableRow = ({ children, ...restProps }) => {
-  return /* @__PURE__ */ import_react29.default.createElement(RowWrapper, { className: "p-medium-30", ...restProps }, children);
+  return /* @__PURE__ */ import_react36.default.createElement(RowWrapper, { className: "p-medium-30", ...restProps }, children);
 };
 TableRow.displayName = "Table.Row";
 var TableCell = ({ children, ...restProps }) => {
-  return /* @__PURE__ */ import_react29.default.createElement(CellWrapper, { ...restProps }, /* @__PURE__ */ import_react29.default.createElement("div", { className: "flex align-center g-medium-30" }, children));
+  return /* @__PURE__ */ import_react36.default.createElement(CellWrapper, { ...restProps }, /* @__PURE__ */ import_react36.default.createElement("div", { className: "flex align-center g-medium-30" }, children));
 };
 TableCell.displayName = "Table.Cell";
 var TableFooter = ({
   children,
   ...restProps
 }) => {
-  return /* @__PURE__ */ import_react29.default.createElement("tfoot", { ...restProps }, children);
+  return /* @__PURE__ */ import_react36.default.createElement("tfoot", { ...restProps }, children);
 };
 TableFooter.displayName = "Table.Footer";
 Table.Head = TableHead;
@@ -3040,24 +3701,24 @@ Table.Cell = TableCell;
 Table.Footer = TableFooter;
 
 // src/tabs/index.tsx
-var import_react31 = __toESM(require("react"));
+var import_react38 = __toESM(require("react"));
 
 // src/tabs/hooks/index.tsx
-var import_react30 = __toESM(require("react"));
+var import_react37 = __toESM(require("react"));
 var defaultComponentAPI7 = {
   id: "",
   states: {},
   methods: {}
 };
-var TabsContext = (0, import_react30.createContext)(defaultComponentAPI7);
-var useTabs = () => (0, import_react30.useContext)(TabsContext);
+var TabsContext = (0, import_react37.createContext)(defaultComponentAPI7);
+var useTabs = () => (0, import_react37.useContext)(TabsContext);
 var TabsProvider = ({ children }) => {
   const context = useTabsProvider();
-  return /* @__PURE__ */ import_react30.default.createElement(TabsContext.Provider, { value: context }, children);
+  return /* @__PURE__ */ import_react37.default.createElement(TabsContext.Provider, { value: context }, children);
 };
 function useTabsProvider() {
-  const [value, setValue] = (0, import_react30.useState)(null);
-  const tabsId = import_react30.default.useId();
+  const [value, setValue] = (0, import_react37.useState)(null);
+  const tabsId = import_react37.default.useId();
   return {
     id: tabsId,
     states: {
@@ -3071,8 +3732,8 @@ function useTabsProvider() {
 }
 
 // src/tabs/styles/index.ts
-var import_styled_components16 = __toESM(require("styled-components"));
-var TabWrapper = import_styled_components16.default.div`
+var import_styled_components22 = __toESM(require("styled-components"));
+var TabWrapper = import_styled_components22.default.div`
   button {
     &[aria-selected="true"] {
       color: var(--font-color) !important;
@@ -3085,22 +3746,22 @@ var Tabs = (props) => {
   const { defaultOpen, children, ...restProps } = props;
   const { methods } = useTabs();
   const { applyValue } = methods;
-  const childArray = import_react31.Children.toArray(children);
+  const childArray = import_react38.Children.toArray(children);
   const firstChild = childArray[0];
-  import_react31.default.useEffect(() => {
-    if (import_react31.default.isValidElement(firstChild)) {
+  import_react38.default.useEffect(() => {
+    if (import_react38.default.isValidElement(firstChild)) {
       if (childArray.length > 0 && applyValue)
         applyValue(firstChild.props.value);
     }
   }, []);
-  import_react31.default.useEffect(() => {
+  import_react38.default.useEffect(() => {
     if (defaultOpen && applyValue) applyValue(defaultOpen);
   }, []);
-  return /* @__PURE__ */ import_react31.default.createElement(TabWrapper, { role: "tablist", ...restProps }, children);
+  return /* @__PURE__ */ import_react38.default.createElement(TabWrapper, { role: "tablist", ...restProps }, children);
 };
 Tabs.displayName = "Tabs";
 var TabsRoot = ({ children }) => {
-  return /* @__PURE__ */ import_react31.default.createElement(TabsProvider, null, children);
+  return /* @__PURE__ */ import_react38.default.createElement(TabsProvider, null, children);
 };
 TabsRoot.displayName = "Tabs.Root";
 var TabsTrigger = (props) => {
@@ -3116,7 +3777,7 @@ var TabsTrigger = (props) => {
     if (applyValue) applyValue(value);
     if (onClick) onClick(event);
   };
-  return /* @__PURE__ */ import_react31.default.createElement(
+  return /* @__PURE__ */ import_react38.default.createElement(
     Button,
     {
       type: "button",
@@ -3144,7 +3805,7 @@ var TabsContent = (props) => {
     trigger: getTabsId && getTabsId({ value, type: "trigger" }),
     content: getTabsId && getTabsId({ value, type: "content" })
   };
-  return /* @__PURE__ */ import_react31.default.createElement(
+  return /* @__PURE__ */ import_react38.default.createElement(
     "div",
     {
       tabIndex: 0,
@@ -3164,23 +3825,171 @@ Tabs.Root = TabsRoot;
 Tabs.Trigger = TabsTrigger;
 Tabs.Content = TabsContent;
 
+// src/text-area/index.tsx
+var import_react39 = __toESM(require("react"));
+
+// src/text-area/styles/index.ts
+var import_styled_components23 = __toESM(require("styled-components"));
+var CustomScrollbar2 = import_styled_components23.css`
+  height: ${({ $height }) => $height ?? "100%"};
+  width: ${({ $width }) => $width ?? "100%"};
+  overflow-y: auto;
+  overflow-x: hidden;
+
+  &::-webkit-scrollbar {
+    cursor: pointer;
+
+    width: var(--measurement-medium-10);
+  }
+
+  &::-webkit-scrollbar-track {
+    background: ${({ $trackColor }) => $trackColor ?? "transparent"};
+    border-radius: var(--measurement-medium-30);
+    border: none;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: ${({ $thumbColor }) => $thumbColor ?? "var(--font-color-alpha-10)"};
+    border-radius: var(--measurement-medium-30);
+    transition: background-color 0.2s ease;
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background: ${({ $thumbHoverColor, $thumbColor }) => $thumbHoverColor ?? $thumbColor ?? "var(--font-color-alpha-20)"};
+  }
+
+  // Firefox
+  scrollbar-width: thin;
+  scrollbar-color: ${({ $thumbColor, $trackColor }) => `${$thumbColor ?? "var(--font-color-alpha-10)"} ${$trackColor ?? "transparent"}`};
+`;
+var TextAreaContainer = import_styled_components23.default.textarea`
+  &[data-raw="false"] {
+    resize: vertical;
+    max-height: var(--measurement-large-60);
+    min-height: auto;
+    width: 100%;
+
+    overflow-y: auto;
+
+    outline: none;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    font-size: var(--fontsize-small-80);
+    padding: var(--measurement-medium-30) var(--measurement-medium-30)
+      var(--measurement-large-10) var(--measurement-medium-30);
+
+    font-weight: 500;
+    line-height: 1.1;
+    letter-spacing: calc(
+      var(--fontsize-small-10) - ((var(--fontsize-small-10) * 1.066))
+    );
+
+    border: var(--measurement-small-10) solid transparent;
+    border-radius: var(--measurement-medium-30);
+    backdrop-filter: blur(var(--measurement-small-10));
+    color: var(--font-color-alpha-60);
+
+    transition: all ease-in-out 0.2s;
+
+    svg,
+    span,
+    img {
+      opacity: 0.6;
+    }
+
+    &:hover,
+    &:focus,
+    &:active {
+      color: var(--font-color);
+
+      svg,
+      span,
+      img {
+        opacity: 1;
+      }
+    }
+    &::placeholder {
+      color: var(--font-color-alpha-30);
+    }
+    &:disabled {
+      cursor: not-allowed;
+      opacity: 0.6;
+    }
+
+    &::placeholder {
+      color: var(--font-color-alpha-30);
+    }
+
+    &:focus-visible {
+      outline: none;
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+    }
+
+    &[data-error="true"] {
+      &::placeholder {
+        color: var(--alpha-red-30);
+      }
+    }
+
+    ${CustomScrollbar2}
+    ${FieldVariantsStyles}
+  }
+`;
+
+// src/text-area/index.tsx
+var Textarea = ({ onChange, ...props }) => {
+  const textareaRef = import_react39.default.useRef(null);
+  const adjustHeight = () => {
+    const textarea = textareaRef.current;
+    if (textarea) {
+      textarea.style.height = "auto";
+      textarea.style.height = `${Math.min(
+        textarea.scrollHeight,
+        parseInt(getComputedStyle(textarea).maxHeight)
+      )}px`;
+    }
+  };
+  const handleChange = (e) => {
+    adjustHeight();
+    onChange?.(e);
+  };
+  import_react39.default.useEffect(() => adjustHeight(), [props.value]);
+  return /* @__PURE__ */ import_react39.default.createElement(Field.Wrapper, { className: "w-100 h-auto" }, /* @__PURE__ */ import_react39.default.createElement(
+    TextAreaContainer,
+    {
+      ref: textareaRef,
+      onChange: handleChange,
+      "data-variant": props.variant ?? "secondary",
+      "data-raw": String(Boolean(props?.raw)),
+      ...props
+    }
+  ));
+};
+Textarea.displayName = "Textarea";
+
 // src/toggle/index.tsx
-var import_react32 = __toESM(require("react"));
+var import_react40 = __toESM(require("react"));
 var Toggle = (props) => {
   const { defaultChecked, onClick, disabled, children, ...restProps } = props;
-  const [checked, setChecked] = import_react32.default.useState(
+  const [checked, setChecked] = import_react40.default.useState(
     defaultChecked ?? false
   );
   const handleClick = (event) => {
     if (onClick) onClick(event);
     if (!disabled) setChecked((prevChecked) => !prevChecked);
   };
-  import_react32.default.useEffect(() => {
+  import_react40.default.useEffect(() => {
     if (defaultChecked !== void 0) {
       setChecked(Boolean(defaultChecked));
     }
   }, [defaultChecked]);
-  return /* @__PURE__ */ import_react32.default.createElement(
+  return /* @__PURE__ */ import_react40.default.createElement(
     Button,
     {
       role: "switch",
@@ -3198,24 +4007,24 @@ var Toggle = (props) => {
 Toggle.displayName = "Toggle";
 
 // src/toolbar/index.tsx
-var import_react34 = __toESM(require("react"));
+var import_react42 = __toESM(require("react"));
 
 // src/toolbar/hooks/index.tsx
-var import_react33 = __toESM(require("react"));
+var import_react41 = __toESM(require("react"));
 var defaultComponentAPI8 = {
   id: "",
   states: {},
   methods: {}
 };
-var ToolbarContext = (0, import_react33.createContext)(defaultComponentAPI8);
-var useToolbar = () => (0, import_react33.useContext)(ToolbarContext);
+var ToolbarContext = (0, import_react41.createContext)(defaultComponentAPI8);
+var useToolbar = () => (0, import_react41.useContext)(ToolbarContext);
 var ToolbarProvider = ({ children }) => {
   const context = useToolbarProvider();
-  return /* @__PURE__ */ import_react33.default.createElement(ToolbarContext.Provider, { value: context }, children);
+  return /* @__PURE__ */ import_react41.default.createElement(ToolbarContext.Provider, { value: context }, children);
 };
 function useToolbarProvider() {
-  const [expanded, setExpanded] = (0, import_react33.useState)(false);
-  const toolbarId = import_react33.default.useId();
+  const [expanded, setExpanded] = (0, import_react41.useState)(false);
+  const toolbarId = import_react41.default.useId();
   return {
     id: toolbarId,
     states: {
@@ -3228,8 +4037,8 @@ function useToolbarProvider() {
 }
 
 // src/toolbar/styles/index.ts
-var import_styled_components17 = __toESM(require("styled-components"));
-var ToolbarDefaultStyles = import_styled_components17.css`
+var import_styled_components24 = __toESM(require("styled-components"));
+var ToolbarDefaultStyles = import_styled_components24.css`
   margin: 0;
   display: grid;
   grid-template-rows: min-content;
@@ -3263,7 +4072,7 @@ var ToolbarDefaultStyles = import_styled_components17.css`
     }
   }
 `;
-var ToolbarSizeStyles = import_styled_components17.css`
+var ToolbarSizeStyles = import_styled_components24.css`
   &[data-size="small"] {
     &[aria-orientation="vertical"] {
       max-width: var(--measurement-large-70);
@@ -3309,7 +4118,7 @@ var ToolbarSizeStyles = import_styled_components17.css`
     }
   }
 `;
-var ToolbarSideStyles = import_styled_components17.css`
+var ToolbarSideStyles = import_styled_components24.css`
   &[data-side="top"] {
     border-bottom-color: var(--font-color-alpha-10);
   }
@@ -3341,7 +4150,7 @@ var ToolbarSideStyles = import_styled_components17.css`
     }
   }
 `;
-var ToolbarWrapper = import_styled_components17.default.menu`
+var ToolbarWrapper = import_styled_components24.default.menu`
   &[data-raw="false"] {
     ${ToolbarDefaultStyles}
     ${ToolbarSizeStyles}
@@ -3349,7 +4158,7 @@ var ToolbarWrapper = import_styled_components17.default.menu`
     ${ToolbarSideStyles}
   }
 `;
-var ToolbarTriggerWrapper = import_styled_components17.default.menu`
+var ToolbarTriggerWrapper = import_styled_components24.default.menu`
   &[data-raw="false"] {
     all: unset;
     align-self: flex-end;
@@ -3374,13 +4183,13 @@ var Toolbar = (props) => {
   const { toggleToolbar } = methods;
   const shortcutControls = useKeyPress(String(hotkey), true, bindkey);
   const orientation = side && ["left", "right"].includes(side) ? "vertical" : "horizontal";
-  import_react34.default.useEffect(() => {
+  import_react42.default.useEffect(() => {
     if (defaultOpen && toggleToolbar) return toggleToolbar(true);
   }, [defaultOpen]);
-  import_react34.default.useEffect(() => {
+  import_react42.default.useEffect(() => {
     if (shortcut && shortcutControls && toggleToolbar) toggleToolbar();
   }, [shortcutControls]);
-  return /* @__PURE__ */ import_react34.default.createElement(
+  return /* @__PURE__ */ import_react42.default.createElement(
     ToolbarWrapper,
     {
       id,
@@ -3400,7 +4209,7 @@ var Toolbar = (props) => {
 };
 Toolbar.displayName = "Toolbar";
 var ToolbarRoot = ({ children }) => {
-  return /* @__PURE__ */ import_react34.default.createElement(ToolbarProvider, null, children);
+  return /* @__PURE__ */ import_react42.default.createElement(ToolbarProvider, null, children);
 };
 ToolbarRoot.displayName = "Toolbar.Root";
 var ToolbarTrigger = (props) => {
@@ -3418,7 +4227,7 @@ var ToolbarTrigger = (props) => {
     if (onClick) onClick(event);
     if (toggleToolbar) toggleToolbar(!states.expanded);
   };
-  return /* @__PURE__ */ import_react34.default.createElement(ToolbarTriggerWrapper, { "data-raw": Boolean(raw) }, /* @__PURE__ */ import_react34.default.createElement(
+  return /* @__PURE__ */ import_react42.default.createElement(ToolbarTriggerWrapper, { "data-raw": Boolean(raw) }, /* @__PURE__ */ import_react42.default.createElement(
     Button,
     {
       id: `${id}-trigger`,
@@ -3436,13 +4245,13 @@ var ToolbarSection = (props) => {
   const { showoncollapse, children, ...restProps } = props;
   const { states } = useToolbar();
   const { expanded } = states;
-  if (showoncollapse) return /* @__PURE__ */ import_react34.default.createElement("section", { ...restProps }, children);
-  return /* @__PURE__ */ import_react34.default.createElement("section", { ...restProps }, expanded && children);
+  if (showoncollapse) return /* @__PURE__ */ import_react42.default.createElement("section", { ...restProps }, children);
+  return /* @__PURE__ */ import_react42.default.createElement("section", { ...restProps }, expanded && children);
 };
 ToolbarSection.displayName = "Toolbar.Section";
 var ToolbarItem = (props) => {
   const { showfirstchild, onClick, children, ...restProps } = props;
-  const childArray = import_react34.default.Children.toArray(children);
+  const childArray = import_react42.default.Children.toArray(children);
   const { id, states, methods } = useToolbar();
   const { expanded } = states;
   const { toggleToolbar } = methods;
@@ -3451,7 +4260,7 @@ var ToolbarItem = (props) => {
     if (onClick) onClick(event);
     if (toggleToolbar && !expanded) toggleToolbar(true);
   };
-  return /* @__PURE__ */ import_react34.default.createElement(
+  return /* @__PURE__ */ import_react42.default.createElement(
     "div",
     {
       tabIndex: -1,
@@ -3472,11 +4281,11 @@ Toolbar.Item = ToolbarItem;
 Toolbar.Section = ToolbarSection;
 
 // src/tooltip/index.tsx
-var import_react35 = __toESM(require("react"));
+var import_react43 = __toESM(require("react"));
 
 // src/tooltip/styles/index.ts
-var import_styled_components18 = __toESM(require("styled-components"));
-var FadeIn2 = import_styled_components18.keyframes`
+var import_styled_components25 = __toESM(require("styled-components"));
+var FadeIn2 = import_styled_components25.keyframes`
   0% {
     opacity: 0;
   }
@@ -3484,11 +4293,11 @@ var FadeIn2 = import_styled_components18.keyframes`
     opacity: 1;
   }
 `;
-var ContentBox = import_styled_components18.default.div`
+var ContentBox = import_styled_components25.default.div`
   display: inline-block;
   position: relative;
 `;
-var ContentWrapper2 = import_styled_components18.default.span`
+var ContentWrapper2 = import_styled_components25.default.span`
   &[data-raw="false"] {
     width: fit-content;
     max-width: var(--measurement-large-60);
@@ -3519,15 +4328,15 @@ var Tooltip = ({
   children,
   ...restProps
 }) => {
-  const [visible, setVisible] = import_react35.default.useState(false);
-  const [triggerProps, setTriggerProps] = import_react35.default.useState(null);
-  const [contentProps, setContentProps] = import_react35.default.useState(null);
-  const mounted = import_react35.default.useRef(false);
-  const containerRef = import_react35.default.useRef(null);
-  const contentRef = import_react35.default.useRef(null);
-  const timeoutRef = import_react35.default.useRef(null);
+  const [visible, setVisible] = import_react43.default.useState(false);
+  const [triggerProps, setTriggerProps] = import_react43.default.useState(null);
+  const [contentProps, setContentProps] = import_react43.default.useState(null);
+  const mounted = import_react43.default.useRef(false);
+  const containerRef = import_react43.default.useRef(null);
+  const contentRef = import_react43.default.useRef(null);
+  const timeoutRef = import_react43.default.useRef(null);
   const contentRect = () => contentRef?.current?.getBoundingClientRect();
-  const bodyRect = import_react35.default.useCallback(() => {
+  const bodyRect = import_react43.default.useCallback(() => {
     if (typeof document !== "undefined") {
       return document.body.getBoundingClientRect();
     }
@@ -3548,14 +4357,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_react35.default.useCallback(() => {
+  const showTooltip = import_react43.default.useCallback(() => {
     timeoutRef.current = setTimeout(() => setVisible(true), delay);
   }, [delay]);
-  const hideTooltip = import_react35.default.useCallback(() => {
+  const hideTooltip = import_react43.default.useCallback(() => {
     if (timeoutRef.current) clearTimeout(timeoutRef.current);
     setVisible(false);
   }, []);
-  const handleMouseEnter = import_react35.default.useCallback(() => {
+  const handleMouseEnter = import_react43.default.useCallback(() => {
     const rect = containerRef.current?.getBoundingClientRect();
     if (rect) {
       setTriggerProps({
@@ -3569,11 +4378,11 @@ var Tooltip = ({
       showTooltip();
     }
   }, [showTooltip]);
-  const handleMouseLeave = import_react35.default.useCallback(
+  const handleMouseLeave = import_react43.default.useCallback(
     () => hideTooltip(),
     [hideTooltip]
   );
-  import_react35.default.useEffect(() => {
+  import_react43.default.useEffect(() => {
     mounted.current = true;
     setContentProps && setContentProps({
       top: Number(contentRect()?.top),
@@ -3587,7 +4396,7 @@ var Tooltip = ({
       mounted.current = false;
     };
   }, [visible]);
-  return /* @__PURE__ */ import_react35.default.createElement(
+  return /* @__PURE__ */ import_react43.default.createElement(
     ContentBox,
     {
       ref: containerRef,
@@ -3597,7 +4406,7 @@ var Tooltip = ({
       ...restProps
     },
     children,
-    visible && /* @__PURE__ */ import_react35.default.createElement(
+    visible && /* @__PURE__ */ import_react43.default.createElement(
       ContentWrapper2,
       {
         ref: contentRef,
@@ -3612,7 +4421,7 @@ var Tooltip = ({
         "data-side": hasEnoughHorizontalSpace ? "left" /* Left */ : "right" /* Right */,
         "data-align": hasEnoughHorizontalSpace ? "left" /* Left */ : "right" /* Right */
       },
-      /* @__PURE__ */ import_react35.default.createElement("div", null, content)
+      /* @__PURE__ */ import_react43.default.createElement("div", null, content)
     )
   );
 };
@@ -3626,7 +4435,14 @@ Tooltip.displayName = "Tooltip";
   AvataStatusEnum,
   Avatar,
   Badge,
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbSeparator,
   Button,
+  Card,
+  CardBody,
+  CardGrid,
+  CardMeta,
   Checkbox,
   CheckboxIndicator,
   CheckboxRoot,
@@ -3634,6 +4450,7 @@ Tooltip.displayName = "Tooltip";
   CollapsibleContent,
   CollapsibleRoot,
   CollapsibleTrigger,
+  CopyButton,
   Dialog,
   DialogControl,
   DialogMenu,
@@ -3663,10 +4480,14 @@ Tooltip.displayName = "Tooltip";
   PageTools,
   PageWrapper,
   Portal,
+  PrivacyField,
+  Resizable,
   ScrollArea,
   Sheet,
   SheetRoot,
   SheetTrigger,
+  Skeleton,
+  Spinner,
   Switch,
   SwitchRoot,
   SwitchThumb,
@@ -3681,6 +4502,7 @@ Tooltip.displayName = "Tooltip";
   TabsContent,
   TabsRoot,
   TabsTrigger,
+  Textarea,
   Toggle,
   Toolbar,
   ToolbarItem,