@usefui/components 1.5.1

package/dist/index.js

@@ -0,0 +1,3701 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Accordion: () => Accordion,
+  AccordionContent: () => AccordionContent,
+  AccordionRoot: () => AccordionRoot,
+  AccordionTrigger: () => AccordionTrigger,
+  AvataStatusEnum: () => AvataStatusEnum,
+  Avatar: () => Avatar,
+  Badge: () => Badge,
+  Button: () => Button,
+  Checkbox: () => Checkbox,
+  CheckboxIndicator: () => CheckboxIndicator,
+  CheckboxRoot: () => CheckboxRoot,
+  Collapsible: () => Collapsible,
+  CollapsibleContent: () => CollapsibleContent,
+  CollapsibleRoot: () => CollapsibleRoot,
+  CollapsibleTrigger: () => CollapsibleTrigger,
+  Dialog: () => Dialog,
+  DialogControl: () => DialogControl,
+  DialogMenu: () => DialogMenu,
+  DialogOverlay: () => DialogOverlay,
+  DialogRoot: () => DialogRoot,
+  DialogTrigger: () => DialogTrigger,
+  Divider: () => Divider,
+  DropdownMenu: () => DropdownMenu,
+  DropdownMenuContent: () => DropdownMenuContent,
+  DropdownMenuItem: () => DropdownMenuItem,
+  DropdownMenuRoot: () => DropdownMenuRoot,
+  DropdownMenuTrigger: () => DropdownMenuTrigger,
+  Field: () => Field,
+  FieldLabel: () => FieldLabel,
+  FieldMeta: () => FieldMeta,
+  FieldRoot: () => FieldRoot,
+  FieldWrapper: () => FieldWrapper,
+  MetaVariantEnum: () => MetaVariantEnum,
+  OTPField: () => OTPField,
+  OTPFieldSlot: () => OTPFieldSlot,
+  Overlay: () => Overlay,
+  Page: () => Page,
+  PageContent: () => PageContent,
+  PageMenu: () => PageMenu,
+  PageNavigation: () => PageNavigation,
+  PagePanel: () => PagePanel,
+  PageTools: () => PageTools,
+  PageWrapper: () => PageWrapper,
+  Portal: () => Portal,
+  ScrollArea: () => ScrollArea,
+  Sheet: () => Sheet,
+  SheetRoot: () => SheetRoot,
+  SheetTrigger: () => SheetTrigger,
+  Switch: () => Switch,
+  SwitchRoot: () => SwitchRoot,
+  SwitchThumb: () => SwitchThumb,
+  Table: () => Table,
+  TableBody: () => TableBody,
+  TableCell: () => TableCell,
+  TableFooter: () => TableFooter,
+  TableHead: () => TableHead,
+  TableHeadCell: () => TableHeadCell,
+  TableRow: () => TableRow,
+  Tabs: () => Tabs,
+  TabsContent: () => TabsContent,
+  TabsRoot: () => TabsRoot,
+  TabsTrigger: () => TabsTrigger,
+  Toggle: () => Toggle,
+  Toolbar: () => Toolbar,
+  ToolbarItem: () => ToolbarItem,
+  ToolbarRoot: () => ToolbarRoot,
+  ToolbarSection: () => ToolbarSection,
+  ToolbarTrigger: () => ToolbarTrigger,
+  Tooltip: () => Tooltip,
+  useAccordion: () => useAccordion,
+  useCheckbox: () => useCheckbox,
+  useCollapsible: () => useCollapsible,
+  useDialog: () => useDialog,
+  useDropdownMenu: () => useDropdownMenu,
+  useField: () => useField,
+  useSheet: () => useSheet,
+  useSwitch: () => useSwitch,
+  useTabs: () => useTabs,
+  useToolbar: () => useToolbar
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/accordion/index.tsx
+var import_react3 = __toESM(require("react"));
+
+// src/accordion/hooks/index.tsx
+var import_react = __toESM(require("react"));
+var defaultComponentAPI = {
+  id: "",
+  states: {},
+  methods: {}
+};
+var AccordionContext = (0, import_react.createContext)(defaultComponentAPI);
+var useAccordion = () => (0, import_react.useContext)(AccordionContext);
+var AccordionProvider = ({
+  children
+}) => {
+  const context = useAccordionProvider();
+  return /* @__PURE__ */ import_react.default.createElement(AccordionContext.Provider, { value: context }, children);
+};
+function useAccordionProvider() {
+  const [value, setValue] = (0, import_react.useState)(null);
+  const accordionId = import_react.default.useId();
+  return {
+    id: accordionId,
+    states: {
+      value
+    },
+    methods: {
+      applyValue: (value2) => setValue(value2),
+      getAccordionId: ({ value: value2, type }) => `${accordionId}-${type}-${value2}`
+    }
+  };
+}
+
+// src/button/index.tsx
+var import_react2 = __toESM(require("react"));
+
+// src/button/styles/index.ts
+var import_styled_components = __toESM(require("styled-components"));
+var ButtonDefaultStyles = import_styled_components.css`
+  cursor: pointer;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--measurement-medium-30);
+  font-size: var(--fontsize-medium-20);
+  height: fit-content;
+  font-weight: 500;
+  line-height: 1;
+  letter-spacing: calc(
+    var(--fontsize-small-10) - ((var(--fontsize-small-10) * 1.066))
+  );
+
+  border: var(--measurement-small-10) solid transparent;
+  backdrop-filter: blur(var(--measurement-small-10));
+
+  width: fit-content;
+  transition: all ease-in-out 0.2s;
+
+  span,
+  img {
+    opacity: 0.6;
+  }
+
+  &:hover,
+  &:focus,
+  &:active {
+    span,
+    img {
+      opacity: 1;
+    }
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+`;
+var ButtonIconStyles = import_styled_components.css`
+  svg {
+    width: var(--fontsize-medium-20);
+    height: var(--fontsize-medium-20);
+    fill: currentColor;
+  }
+
+  svg {
+    opacity: 0.6;
+  }
+
+  &:hover,
+  &:focus,
+  &:active {
+    svg {
+      opacity: 1;
+    }
+  }
+
+  &[data-variant="primary"] {
+    svg {
+      fill: var(--body-color);
+    }
+  }
+`;
+var ButtonVariantsStyles = import_styled_components.css`
+  &[data-variant="primary"] {
+    color: var(--body-color) !important;
+    background-color: var(--font-color);
+
+    &:hover,
+    &:focus,
+    &:active {
+      color: var(--body-color);
+    }
+  }
+  &[data-variant="secondary"] {
+    color: var(--font-color-alpha-60);
+    background-color: var(--body-color);
+    border-color: var(--font-color-alpha-10);
+
+    &:hover,
+    &:focus,
+    &:active {
+      color: var(--font-color);
+      border-color: var(--font-color-alpha-30);
+    }
+  }
+  &[data-variant="tertiary"] {
+    color: var(--font-color-alpha-60);
+    border-color: var(--font-color-alpha-10);
+    background-color: transparent;
+
+    &:hover,
+    &:focus,
+    &:active {
+      color: var(--font-color);
+      background-color: var(--font-color-alpha-10);
+      border-color: transparent;
+    }
+  }
+  &[data-variant="border"] {
+    color: var(--font-color-alpha-60);
+    background-color: transparent;
+    border-color: var(--font-color-alpha-10);
+
+    &:hover,
+    &:focus,
+    &:active {
+      color: var(--font-color);
+    }
+  }
+  &[data-variant="mono"] {
+    color: var(--font-color-alpha-80);
+    background-color: var(--font-color-alpha-10);
+
+    &:hover,
+    &:focus,
+    &:active {
+      color: var(--font-color);
+      border-color: var(--font-color-alpha-10);
+    }
+  }
+  &[data-variant="ghost"] {
+    border: none;
+    padding: 0;
+    background-color: transparent;
+    min-width: fit-content;
+    min-height: var(--measurement-medium-60);
+    color: var(--font-color-alpha-60);
+
+    &:hover,
+    &:focus,
+    &:active {
+      color: var(--font-color);
+    }
+  }
+`;
+var ButtonSizeStyles = import_styled_components.css`
+  &[data-size="small"] {
+    border-radius: var(--measurement-medium-20);
+    font-size: var(--fontsize-medium-10);
+
+    gap: var(--measurement-medium-10);
+    padding: var(--measurement-medium-10) var(--measurement-medium-30);
+    min-width: var(--measurement-medium-60);
+    min-height: var(--measurement-medium-60);
+
+    svg {
+      width: var(--fontsize-medium-10);
+      height: var(--fontsize-medium-10);
+    }
+  }
+  &[data-size="medium"] {
+    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 ButtonWrapper = import_styled_components.default.button`
+  &[data-raw="false"] {
+    ${ButtonDefaultStyles}
+    ${ButtonSizeStyles}
+    ${ButtonVariantsStyles}
+
+      &[data-rawIcon="false"] {
+      ${ButtonIconStyles}
+    }
+  }
+`;
+
+// src/button/index.tsx
+var Button = import_react2.default.forwardRef(
+  (props, forwardedRef) => {
+    const {
+      name,
+      variant = "mono" /* Mono */,
+      sizing = "medium" /* Medium */,
+      raw,
+      rawicon,
+      children,
+      ...restProps
+    } = props;
+    const defaultName = "button";
+    const ariaLabel = `${name ?? defaultName}-action`;
+    const disabledState = props.disabled ?? false;
+    const buttonType = props.type ?? "button";
+    const buttonDescription = `${ariaLabel}:${buttonType}`;
+    const buttonStateDescription = `disabled:${disabledState}`;
+    const ButtonFullDesc = `${buttonDescription}/${buttonStateDescription}`;
+    return /* @__PURE__ */ import_react2.default.createElement(
+      ButtonWrapper,
+      {
+        ref: forwardedRef,
+        role: "button",
+        type: buttonType,
+        name: name ?? defaultName,
+        "aria-label": ariaLabel,
+        "aria-description": ButtonFullDesc,
+        "aria-disabled": disabledState,
+        "data-variant": variant,
+        "data-size": sizing,
+        "data-raw": Boolean(raw),
+        "data-rawicon": Boolean(rawicon),
+        tabIndex: 0,
+        ...restProps
+      },
+      children
+    );
+  }
+);
+Button.displayName = "Button";
+
+// src/accordion/index.tsx
+var Accordion = (props) => {
+  const { children, ...restProps } = props;
+  const { id } = useAccordion();
+  return /* @__PURE__ */ import_react3.default.createElement("div", { id, ...restProps }, children);
+};
+Accordion.displayName = "Accordion";
+var AccordionRoot = ({ children }) => {
+  return /* @__PURE__ */ import_react3.default.createElement(AccordionProvider, null, children);
+};
+AccordionRoot.displayName = "Accordion.Root";
+var AccordionTrigger = (props) => {
+  const { value, disabled, onClick, children, ...restProps } = props;
+  const { states, methods } = useAccordion();
+  const { getAccordionId, applyValue } = methods;
+  const hasSameValueAsContext = value === states.value;
+  const IdHandler = {
+    trigger: getAccordionId && getAccordionId({ value, type: "trigger" }),
+    content: getAccordionId && getAccordionId({ value, type: "content" })
+  };
+  const handleClick = (event) => {
+    if (!disabled) {
+      onClick && onClick(event);
+      if (applyValue) {
+        const unchangedValue = hasSameValueAsContext && states.value !== null;
+        if (unchangedValue) applyValue(null);
+        else applyValue(value);
+      }
+    }
+  };
+  return /* @__PURE__ */ import_react3.default.createElement(
+    Button,
+    {
+      id: String(IdHandler.trigger),
+      value,
+      disabled: disabled ?? false,
+      onClick: handleClick,
+      "aria-expanded": hasSameValueAsContext,
+      "aria-controls": String(IdHandler.content),
+      "data-state": hasSameValueAsContext ? "expanded" : "collapsed",
+      variant: props.variant ?? "ghost" /* Ghost */,
+      ...restProps
+    },
+    children
+  );
+};
+AccordionTrigger.displayName = "Accordion.Trigger";
+var AccordionContent = (props) => {
+  const { defaultOpen = false, value, children, ...restProps } = props;
+  const { states, methods } = useAccordion();
+  const { getAccordionId, applyValue } = methods;
+  const hasSameValueAsContext = value === states.value;
+  const IdHandler = {
+    trigger: getAccordionId && getAccordionId({ value, type: "trigger" }),
+    content: getAccordionId && getAccordionId({ value, type: "content" })
+  };
+  import_react3.default.useEffect(() => {
+    if (defaultOpen && !hasSameValueAsContext && applyValue) applyValue(value);
+  }, []);
+  return /* @__PURE__ */ import_react3.default.createElement(import_react3.default.Fragment, null, hasSameValueAsContext && /* @__PURE__ */ import_react3.default.createElement(
+    "div",
+    {
+      role: "article",
+      id: String(IdHandler.content),
+      "aria-labelledby": String(IdHandler.trigger),
+      "aria-expanded": hasSameValueAsContext,
+      "data-value": value,
+      ...restProps
+    },
+    children
+  ));
+};
+AccordionContent.displayName = "Accordion.Content";
+Accordion.Root = AccordionRoot;
+Accordion.Trigger = AccordionTrigger;
+Accordion.Content = AccordionContent;
+
+// src/avatar/index.tsx
+var import_react4 = __toESM(require("react"));
+
+// src/avatar/styles/index.ts
+var import_styled_components2 = __toESM(require("styled-components"));
+var AvatarSizesStyles = import_styled_components2.css`
+  &[data-size="small"] {
+    width: var(--measurement-large-10);
+    height: var(--measurement-large-10);
+    min-width: var(--measurement-large-10);
+    min-height: var(--measurement-large-10);
+  }
+
+  &[data-size="medium"] {
+    width: var(--measurement-medium-90);
+    height: var(--measurement-medium-90);
+    min-width: var(--measurement-medium-90);
+    min-height: var(--measurement-medium-90);
+  }
+
+  &[data-size="large"] {
+    width: var(--measurement-large-20);
+    height: var(--measurement-large-20);
+    min-width: var(--measurement-large-20);
+    min-height: var(--measurement-large-20);
+  }
+`;
+var AvatarStatusesStyles = import_styled_components2.css`
+  &[data-status="online"] {
+    fill: var(--shade-green-10);
+    stroke: var(--shade-green-20);
+  }
+
+  &[data-status="away"] {
+    fill: var(--color-yellow);
+    stroke: var(--shade-yellow-10);
+  }
+
+  &[data-status="busy"] {
+    fill: var(--color-red);
+    stroke: var(--shade-red-10);
+  }
+
+  &[data-status="offline"] {
+    fill: var(--body-color);
+    stroke: var(--font-color-alpha-10);
+  }
+`;
+var AvatarWrapper = import_styled_components2.default.div`
+  &[data-raw="false"] {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    background-color: var(--body-color);
+    border-radius: 100%;
+
+    img {
+      width: inherit;
+      height: inherit;
+      min-width: inherit;
+      min-height: inherit;
+      border-radius: 100%;
+    }
+
+    ${AvatarSizesStyles}
+  }
+`;
+var StatusWrapper = import_styled_components2.default.svg`
+  --status-position: calc(
+    var(--measurement-medium-10) - (var(--measurement-medium-10) * 2)
+  );
+
+  position: absolute;
+  stroke-width: var(--measurement-small-30);
+  bottom: var(--status-position);
+  right: var(--status-position);
+
+  ${AvatarStatusesStyles}
+`;
+
+// src/avatar/index.tsx
+var AvataStatusEnum = /* @__PURE__ */ ((AvataStatusEnum2) => {
+  AvataStatusEnum2["Online"] = "online";
+  AvataStatusEnum2["Away"] = "away";
+  AvataStatusEnum2["Busy"] = "busy";
+  AvataStatusEnum2["Offline"] = "offline";
+  return AvataStatusEnum2;
+})(AvataStatusEnum || {});
+var Avatar = (props) => {
+  const {
+    raw,
+    sizing = "medium" /* Medium */,
+    status,
+    src,
+    alt,
+    children,
+    ...restProps
+  } = props;
+  const sizeLabel = sizing ?? "medium" /* Medium */;
+  return /* @__PURE__ */ import_react4.default.createElement(
+    AvatarWrapper,
+    {
+      "data-raw": Boolean(raw),
+      "data-size": sizing,
+      "data-status": status,
+      "aria-label": props["aria-label"] ?? `${sizeLabel}-user-avatar`,
+      ...restProps
+    },
+    !children && src && /* @__PURE__ */ import_react4.default.createElement(
+      "img",
+      {
+        "aria-label": `${sizeLabel}-user-avatar-image`,
+        alt: alt ?? `${sizeLabel}-user-avatar-image`,
+        src
+      }
+    ),
+    children,
+    status && /* @__PURE__ */ import_react4.default.createElement(
+      StatusWrapper,
+      {
+        role: "img",
+        "aria-label": `${sizing}-user-avatar-status`,
+        "aria-labelledby": "title desc",
+        "data-status": status,
+        height: "16",
+        width: "16"
+      },
+      /* @__PURE__ */ import_react4.default.createElement("title", null, "Activity status"),
+      /* @__PURE__ */ import_react4.default.createElement("desc", null, status),
+      /* @__PURE__ */ import_react4.default.createElement("circle", { role: "presentation", cx: "8", cy: "8", r: "6" })
+    )
+  );
+};
+Avatar.displayName = "Avatar";
+
+// src/badge/index.tsx
+var import_react5 = __toESM(require("react"));
+
+// src/badge/styles/index.ts
+var import_styled_components3 = __toESM(require("styled-components"));
+var BadgeBaseStyles = import_styled_components3.css`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--measurement-medium-10);
+  min-width: var(--measurement-medium-60);
+  min-height: var(--measurement-medium-60);
+  width: fit-content;
+
+  border: var(--measurement-small-10) solid transparent;
+
+  font-size: var(--fontsize-small-60);
+  padding: var(--measurement-medium-10) var(--measurement-medium-30);
+  font-weight: 500;
+  transition: all ease-in-out 0.2s;
+`;
+var BadgeVariantStyles = import_styled_components3.css`
+  border: var(--measurement-small-10) solid transparent;
+
+  &[data-variant="primary"] {
+    background-color: var(--font-color);
+    color: var(--body-color);
+
+    &:hover,
+    &:focus {
+      border-color: var(--font-color-alpha-10);
+    }
+  }
+  &[data-variant="secondary"] {
+    background-color: var(--font-color-alpha-10);
+    color: var(--font-color-alpha-60);
+
+    &:hover,
+    &:focus {
+      color: var(--font-color);
+    }
+  }
+  &[data-variant="border"] {
+    background-color: transparent;
+    border-color: var(--font-color-alpha-10);
+    color: var(--font-color-alpha-60);
+
+    &:hover,
+    &:focus {
+      color: var(--font-color);
+    }
+  }
+  &[data-variant="error"] {
+    background-color: var(--alpha-red-10);
+    color: var(--alpha-red-80);
+
+    &:hover,
+    &:focus {
+      background-color: var(--alpha-red-10);
+      color: var(--color-red);
+    }
+  }
+  &[data-variant="warning"] {
+    background-color: var(--alpha-orange-10);
+    color: var(--alpha-orange-80);
+
+    &:hover,
+    &:focus {
+      background-color: var(--alpha-orange-10);
+      color: var(--color-orange);
+    }
+  }
+  &[data-variant="success"] {
+    background-color: var(--alpha-green-10);
+    color: var(--alpha-green-80);
+
+    &:hover,
+    &:focus {
+      background-color: var(--alpha-green-10);
+      color: var(--color-green);
+    }
+  }
+  &[data-variant="meta"] {
+    background-color: var(--alpha-blue-10);
+    color: var(--alpha-blue-80);
+
+    &:hover,
+    &:focus {
+      background-color: var(--alpha-blue-10);
+      color: var(--color-blue);
+    }
+  }
+`;
+var BadgeShapeStyles = import_styled_components3.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 BadgeWrapper = import_styled_components3.default.div`
+  &[data-raw="false"] {
+    ${BadgeBaseStyles}
+    ${BadgeVariantStyles}
+    ${BadgeShapeStyles}
+  }
+`;
+
+// src/badge/index.tsx
+var Badge = (props) => {
+  const {
+    raw = false,
+    variant = "primary",
+    shape = "smooth",
+    children,
+    ...restProps
+  } = props;
+  return /* @__PURE__ */ import_react5.default.createElement(
+    BadgeWrapper,
+    {
+      "data-raw": raw,
+      "data-variant": variant,
+      "data-shape": shape,
+      ...restProps
+    },
+    children
+  );
+};
+Badge.displayName = "Badge";
+
+// src/checkbox/index.tsx
+var import_react7 = __toESM(require("react"));
+
+// src/checkbox/hooks/index.tsx
+var import_react6 = __toESM(require("react"));
+var defaultComponentAPI2 = {
+  id: "",
+  states: {},
+  methods: {}
+};
+var CheckboxContext = (0, import_react6.createContext)(defaultComponentAPI2);
+var useCheckbox = () => (0, import_react6.useContext)(CheckboxContext);
+var CheckboxProvider = ({ children }) => {
+  const context = useCheckboxProvider();
+  return /* @__PURE__ */ import_react6.default.createElement(CheckboxContext.Provider, { value: context }, children);
+};
+function useCheckboxProvider() {
+  const [checked, setChecked] = (0, import_react6.useState)(false);
+  const checkboxId = import_react6.default.useId();
+  return {
+    id: checkboxId,
+    states: {
+      checked
+    },
+    methods: {
+      toggleChecked: () => setChecked(!checked),
+      applyChecked: (state) => setChecked(Boolean(state))
+    }
+  };
+}
+
+// src/checkbox/styles/index.ts
+var import_styled_components4 = __toESM(require("styled-components"));
+var CheckboxDefaultStyles = import_styled_components4.css`
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  backdrop-filter: blur(var(--measurement-small-10));
+  transition: all ease-in-out 0.2s;
+`;
+var CheckboxVariantsStyles = import_styled_components4.css`
+  &[data-variant="primary"] {
+    background-color: var(--font-color-alpha-10);
+    border: var(--measurement-small-10) solid transparent;
+
+    &:hover,
+    &:focus {
+      border-color: var(--font-color-alpha-10);
+    }
+
+    &:active,
+    &[data-state="checked"] {
+      background-color: var(--font-color);
+    }
+
+    &[data-state="checked"] {
+      svg {
+        stroke: var(--body-color);
+      }
+    }
+  }
+
+  &[data-variant="border"] {
+    background-color: var(--body-color);
+    border: var(--measurement-small-10) solid var(--font-color-alpha-10);
+
+    &:hover,
+    &:focus,
+    &:active,
+    &[data-state="checked"] {
+      background-color: var(--font-color-alpha-10);
+      border-color: transparent;
+    }
+
+    &[data-state="checked"] {
+      svg {
+        stroke: var(--font-color);
+      }
+    }
+  }
+  &[data-variant="mono"] {
+    background-color: var(--font-color-alpha-10);
+    border: var(--measurement-small-10) solid transparent;
+
+    &:hover,
+    &:focus,
+    &:active,
+    &[data-state="checked"] {
+      border-color: var(--font-color-alpha-10);
+    }
+
+    &[data-state="checked"] {
+      svg {
+        stroke: var(--font-color);
+      }
+    }
+  }
+  &[data-variant="ghost"] {
+    border: var(--measurement-small-10) solid transparent;
+
+    &:hover,
+    &:focus,
+    &:active,
+    &[data-state="checked"] {
+      border-color: var(--font-color-alpha-10);
+
+      svg {
+        stroke: var(--font-color);
+      }
+    }
+  }
+`;
+var CheckboxSizeStyles = import_styled_components4.css`
+  &[data-size="small"] {
+    width: var(--measurement-medium-60);
+    height: var(--measurement-medium-60);
+    border-radius: var(--measurement-small-80);
+  }
+  &[data-size="medium"] {
+    width: var(--measurement-medium-70);
+    height: var(--measurement-medium-70);
+    border-radius: var(--measurement-medium-10);
+  }
+  &[data-size="large"] {
+    width: var(--measurement-large-10);
+    height: var(--measurement-large-10);
+    border-radius: var(--measurement-medium-20);
+  }
+`;
+var CheckboxWrapper = import_styled_components4.default.div`
+  cursor: pointer;
+
+  &[data-raw="false"] {
+    ${CheckboxDefaultStyles}
+    ${CheckboxVariantsStyles}
+    ${CheckboxSizeStyles}
+  }
+
+  &[data-disabled="true"] {
+    cursor: not-allowed;
+    opacity: 0.6;
+
+    svg {
+      stroke-opacity: 0.6;
+    }
+  }
+`;
+var NativeInput = import_styled_components4.default.input`
+  &[data-raw="false"] {
+    appearance: none;
+    background: none;
+    border: none;
+    cursor: pointer;
+    height: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+
+    &:disabled {
+      cursor: not-allowed;
+    }
+  }
+`;
+var Indicator = import_styled_components4.default.span`
+  line-height: 0;
+  pointer-events: none;
+`;
+
+// src/checkbox/index.tsx
+var Checkbox = (props) => {
+  const { states, methods } = useCheckbox();
+  const { applyChecked, toggleChecked } = methods;
+  const {
+    raw,
+    sizing = "medium" /* Medium */,
+    variant = "mono" /* Mono */,
+    name,
+    disabled,
+    required,
+    defaultChecked,
+    value,
+    onClick,
+    children,
+    ...restProps
+  } = props;
+  const defaultValue = states.checked ? "checked" : "unchecked";
+  const handleClick = (event) => {
+    if (toggleChecked) toggleChecked();
+    if (onClick) onClick(event);
+  };
+  import_react7.default.useEffect(() => {
+    if (defaultChecked && applyChecked) applyChecked(defaultChecked);
+  }, []);
+  return /* @__PURE__ */ import_react7.default.createElement(
+    CheckboxWrapper,
+    {
+      role: "checkbox",
+      "aria-hidden": "true",
+      "data-state": value ?? defaultValue,
+      "data-disabled": disabled,
+      "data-raw": Boolean(raw),
+      "data-size": sizing,
+      "data-variant": variant,
+      "aria-label": props["aria-label"] ?? `${name}-checkbox`
+    },
+    /* @__PURE__ */ import_react7.default.createElement(
+      NativeInput,
+      {
+        type: "checkbox",
+        tabIndex: 0,
+        name,
+        value: value ?? defaultValue,
+        defaultChecked: Boolean(states.checked),
+        required,
+        disabled,
+        onInput: handleClick,
+        "data-state": defaultValue,
+        "data-raw": Boolean(raw),
+        "aria-disabled": Boolean(disabled),
+        "aria-required": Boolean(required),
+        "aria-checked": Boolean(states.checked),
+        "aria-label": props["aria-label"] ?? `${name}-native-checkbox`,
+        ...restProps
+      }
+    ),
+    children
+  );
+};
+Checkbox.displayName = "Checkbox";
+var CheckboxRoot = (props) => {
+  const { children, ...restProps } = props;
+  return /* @__PURE__ */ import_react7.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(
+    "svg",
+    {
+      tabIndex: -1,
+      "aria-hidden": "true",
+      "aria-label": "checked-icon",
+      focusable: "false",
+      width: "10",
+      height: "10",
+      viewBox: "0 0 10 10",
+      fill: "none"
+    },
+    /* @__PURE__ */ import_react7.default.createElement("title", null, "Checked"),
+    /* @__PURE__ */ import_react7.default.createElement(
+      "path",
+      {
+        d: "M2 5.5L4.12132 7.62132L8.36396 3.37868",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  )));
+};
+CheckboxIndicator.displayName = "Checkbox.Indicator";
+Checkbox.Root = CheckboxRoot;
+Checkbox.Indicator = CheckboxIndicator;
+
+// src/collapsible/index.tsx
+var import_react9 = __toESM(require("react"));
+
+// src/collapsible/hooks/index.tsx
+var import_react8 = __toESM(require("react"));
+var defaultComponentAPI3 = {
+  id: "",
+  states: {},
+  methods: {}
+};
+var CollapsibleContext = (0, import_react8.createContext)(defaultComponentAPI3);
+var useCollapsible = () => (0, import_react8.useContext)(CollapsibleContext);
+var CollapsibleProvider = ({
+  children
+}) => {
+  const context = useCollapsibleProvider();
+  return /* @__PURE__ */ import_react8.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 toggleCollapsible = () => {
+    setExpanded(!expanded);
+    setDefaultOpen(false);
+  };
+  const applyDefaultOpen = () => {
+    setExpanded(!expanded);
+    setDefaultOpen(true);
+  };
+  return {
+    id: collapsibleId,
+    states: {
+      expanded,
+      defaultOpen
+    },
+    methods: {
+      toggleCollapsible: () => toggleCollapsible(),
+      applyDefaultOpen: () => applyDefaultOpen()
+    }
+  };
+}
+
+// src/utils/index.ts
+var applyDataState = (condition) => condition ? "open" : "closed";
+
+// src/collapsible/index.tsx
+var Collapsible = (props) => {
+  const { children, ...restProps } = props;
+  const collapsibleContext = useCollapsible();
+  return /* @__PURE__ */ import_react9.default.createElement(
+    "div",
+    {
+      "data-state": applyDataState(Boolean(collapsibleContext.states.expanded)),
+      ...restProps
+    },
+    children
+  );
+};
+Collapsible.displayName = "Collapsible";
+var CollapsibleRoot = ({ children }) => {
+  return /* @__PURE__ */ import_react9.default.createElement(CollapsibleProvider, null, children);
+};
+CollapsibleRoot.displayName = "Collapsible.Root";
+var CollapsibleTrigger = (props) => {
+  const { children, disabled, onClick, ...restProps } = props;
+  const { id, states, methods } = useCollapsible();
+  const { toggleCollapsible } = methods;
+  const handleClick = (event) => {
+    if (toggleCollapsible) toggleCollapsible();
+    if (onClick) onClick(event);
+  };
+  return /* @__PURE__ */ import_react9.default.createElement(
+    Button,
+    {
+      disabled,
+      "aria-controls": id,
+      "data-state": applyDataState(Boolean(states.expanded)),
+      "data-expanded": states.expanded,
+      onClick: handleClick,
+      variant: props.variant ?? "ghost" /* Ghost */,
+      ...restProps
+    },
+    children
+  );
+};
+CollapsibleTrigger.displayName = "Collapsible.Trigger";
+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 displayChildren = states.expanded ?? states.defaultOpen;
+  const displayFirstChild = showFirstChild && childArray.length > 1 && !states.expanded;
+  import_react9.default.useEffect(() => {
+    if (defaultOpen && applyDefaultOpen) applyDefaultOpen();
+  }, []);
+  return /* @__PURE__ */ import_react9.default.createElement(
+    "div",
+    {
+      id,
+      "data-state": applyDataState(Boolean(states.expanded)),
+      role: "region",
+      ...restProps
+    },
+    displayFirstChild && childArray[0],
+    displayChildren && children
+  );
+};
+CollapsibleContent.displayName = "Collapsible.Content";
+Collapsible.Root = CollapsibleRoot;
+Collapsible.Trigger = CollapsibleTrigger;
+Collapsible.Content = CollapsibleContent;
+
+// src/dialog/index.tsx
+var import_react14 = __toESM(require("react"));
+
+// src/dialog/hooks/index.tsx
+var import_react10 = __toESM(require("react"));
+var defaultComponentAPI4 = {
+  id: "",
+  states: {},
+  methods: {}
+};
+var DialogContext = (0, import_react10.createContext)(defaultComponentAPI4);
+var useDialog = () => (0, import_react10.useContext)(DialogContext);
+var DialogProvider = ({ children }) => {
+  const context = useDialogProvider();
+  return /* @__PURE__ */ import_react10.default.createElement(DialogContext.Provider, { value: context }, children);
+};
+function useDialogProvider() {
+  const [open, setOpen] = (0, import_react10.useState)(false);
+  const dialogId = import_react10.default.useId();
+  return {
+    id: dialogId,
+    states: {
+      open
+    },
+    methods: {
+      toggleDialog: () => setOpen(!open),
+      getDialogId: (type) => `${dialogId}-${type}`
+    }
+  };
+}
+
+// ../hooks/dist/index.mjs
+var import_react11 = require("react");
+var import_react12 = require("react");
+var import_react13 = __toESM(require("react"), 1);
+function useEventListener(eventName, handler, element) {
+  const savedHandler = (0, import_react11.useRef)(handler);
+  (0, import_react11.useEffect)(() => {
+    savedHandler.current = handler;
+  }, [handler]);
+  (0, import_react11.useEffect)(() => {
+    const targetElement = element && element.current || window;
+    if (!(targetElement && targetElement.addEventListener)) return;
+    const eventListener = (event) => savedHandler.current(event);
+    targetElement.addEventListener(eventName, eventListener);
+    return () => targetElement.removeEventListener(eventName, eventListener);
+  }, [eventName, element]);
+}
+var useEventListener_default = useEventListener;
+function useClickOutside(ref, handler, mouseEvent = "mousedown") {
+  useEventListener_default(mouseEvent, (event) => {
+    const element = ref && ref.current;
+    if (!element || element.contains(event.target)) return;
+    handler(event);
+  });
+}
+function useKeyPress(targetKey, hotkey, bindKey) {
+  const [keyPressed, setKeyPressed] = (0, import_react12.useState)(false);
+  const switchStoredKeyPressed = (0, import_react12.useCallback)(
+    (event, state) => {
+      if (!hotkey && event.key === targetKey) {
+        return setKeyPressed(state);
+      }
+      if (hotkey && event[
+        bindKey ?? "metaKey"
+        /* Meta */
+      ] && event.key === targetKey) {
+        return setKeyPressed(state);
+      }
+      return;
+    },
+    [bindKey, hotkey, targetKey]
+  );
+  const KeyDownHandler = (0, import_react12.useCallback)(
+    (event) => switchStoredKeyPressed(event, true),
+    [switchStoredKeyPressed]
+  );
+  const KeyUpHandler = (0, import_react12.useCallback)(
+    (event) => switchStoredKeyPressed(event, false),
+    [switchStoredKeyPressed]
+  );
+  (0, import_react12.useEffect)(() => {
+    window.addEventListener("keydown", KeyDownHandler);
+    window.addEventListener("keyup", KeyUpHandler);
+    return () => {
+      window.removeEventListener("keydown", KeyDownHandler);
+      window.removeEventListener("keyup", KeyUpHandler);
+    };
+  }, [KeyDownHandler, KeyUpHandler]);
+  return keyPressed;
+}
+var useDisabledScroll = (state) => {
+  const overflow = state ? "hidden" : "";
+  import_react13.default.useEffect(() => {
+    document.body.style.overflowY = overflow;
+  }, [state]);
+  return {
+    overflow,
+    disabled: state
+  };
+};
+
+// src/dialog/styles/index.ts
+var import_styled_components5 = __toESM(require("styled-components"));
+var DialogDefaultStyles = import_styled_components5.css`
+  position: fixed;
+  top: 15dvh;
+  padding: var(--measurement-medium-60);
+  width: 100%;
+
+  border: var(--measurement-small-10) solid var(--font-color-alpha-10);
+  background-color: var(--body-color);
+  border-radius: var(--measurement-medium-30);
+
+  transition: all ease-in-out 0.2s;
+  z-index: var(--depth-default-100);
+`;
+var DialogSizeStyles = import_styled_components5.css`
+  --base-size: var(--measurement-medium-60);
+  --computed-size: calc(100% - (var(--base-size) * 2));
+  --max-height: 75dvh;
+
+  &[data-size="small"] {
+    max-width: calc(var(--measurement-large-90) * 1.33);
+    max-height: var(--max-height);
+  }
+  &[data-size="medium"] {
+    max-width: calc(var(--measurement-large-90) * 2.66);
+    max-height: var(--max-height);
+  }
+
+  &[data-size="large"] {
+    top: var(--base-size);
+    max-width: var(--computed-size);
+    height: var(--computed-size);
+    padding: var(--measurement-medium-80);
+  }
+`;
+var Menu = import_styled_components5.default.menu`
+  margin: 0;
+  padding: 0;
+
+  &[data-raw="false"] {
+    display: flex;
+    justify-content: flex-end;
+    gap: var(--measurement-medium-30);
+  }
+`;
+var DialogWrapper = import_styled_components5.default.dialog`
+  @keyframes slide-in {
+    0% {
+      opacity: 0;
+      transform: translateY(var(--measurement-medium-30));
+    }
+    100% {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  border: none;
+  box-shadow: none;
+  z-index: 100;
+
+  &[data-raw="false"] {
+    ${DialogDefaultStyles}
+    ${DialogSizeStyles}
+
+    animation-duration: 0.2s;
+    animation-name: slide-in;
+    animation-fill-mode: backwards;
+  }
+`;
+
+// src/dialog/index.tsx
+var Dialog = (props) => {
+  const {
+    raw,
+    sizing = "medium" /* Medium */,
+    open = false,
+    lock = true,
+    children,
+    ...restProps
+  } = props;
+  const { states, methods } = useDialog();
+  const { getDialogId, toggleDialog } = methods;
+  const triggerId = getDialogId && getDialogId("trigger");
+  const contentId = getDialogId && getDialogId("content");
+  import_react14.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(
+    ScrollArea,
+    {
+      as: DialogWrapper,
+      role: "dialog",
+      tabIndex: -1,
+      id: String(contentId),
+      open: Boolean(states.open),
+      "aria-labelledby": String(triggerId),
+      "data-state": applyDataState(Boolean(states.open)),
+      "data-size": sizing,
+      "data-raw": Boolean(raw),
+      ...restProps
+    },
+    children
+  ));
+};
+Dialog.displayName = "Dialog";
+var DialogRoot = ({ children }) => {
+  return /* @__PURE__ */ import_react14.default.createElement(DialogProvider, null, children);
+};
+DialogRoot.displayName = "Dialog.Root";
+var DialogOverlay = (props) => {
+  const { closeOnInteract = false, onClick, ...restProps } = props;
+  const { states, methods } = useDialog();
+  const { toggleDialog } = methods;
+  const handleClick = (event) => {
+    if (closeOnInteract && toggleDialog) toggleDialog();
+    if (onClick) onClick(event);
+  };
+  return /* @__PURE__ */ import_react14.default.createElement(
+    Overlay,
+    {
+      visible: Boolean(states.open),
+      closeOnInteract,
+      onClick: handleClick,
+      ...restProps
+    }
+  );
+};
+DialogOverlay.displayName = "Dialog.Overlay";
+var DialogTrigger = (props) => {
+  const { onClick, children, ...restProps } = props;
+  const { states, methods } = useDialog();
+  const { getDialogId, toggleDialog } = methods;
+  const triggerId = getDialogId && getDialogId("trigger");
+  const contentId = getDialogId && getDialogId("content");
+  const handleClick = (event) => {
+    if (toggleDialog) toggleDialog();
+    if (onClick) onClick(event);
+  };
+  return /* @__PURE__ */ import_react14.default.createElement(
+    Button,
+    {
+      id: String(triggerId),
+      onClick: handleClick,
+      "aria-controls": String(contentId),
+      "aria-expanded": Boolean(states.open),
+      "data-state": applyDataState(Boolean(states.open)),
+      ...restProps
+    },
+    children
+  );
+};
+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);
+};
+DialogMenu.displayName = "Dialog.Menu";
+var DialogControl = (props) => {
+  const { onClick, children, ...restProps } = props;
+  const { states, methods } = useDialog();
+  const { getDialogId, toggleDialog } = methods;
+  const innerControlId = getDialogId && getDialogId("inner-control");
+  const contentId = getDialogId && getDialogId("content");
+  const handleClick = (event) => {
+    if (toggleDialog) toggleDialog();
+    if (onClick) onClick(event);
+  };
+  return /* @__PURE__ */ import_react14.default.createElement(
+    Button,
+    {
+      id: String(innerControlId),
+      onClick: handleClick,
+      "aria-controls": String(contentId),
+      "aria-expanded": Boolean(states.open),
+      "data-state": applyDataState(Boolean(states.open)),
+      ...restProps
+    },
+    children
+  );
+};
+DialogControl.displayName = "Dialog.Control";
+Dialog.Root = DialogRoot;
+Dialog.Trigger = DialogTrigger;
+Dialog.Control = DialogControl;
+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`
+  height: var(--measurement-small-10);
+  margin: var(--measurement-medium-30) 0;
+  background: var(--font-color-alpha-10);
+  border: none;
+`;
+
+// src/dropdown/index.tsx
+var import_react16 = __toESM(require("react"));
+
+// src/dropdown/hooks/index.tsx
+var import_react15 = __toESM(require("react"));
+var DEFAULT_API = {
+  id: "",
+  states: {},
+  methods: {}
+};
+var DEFAULT_POSITIONS = {
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0
+};
+var DEFAULT_DIMENSIONS = {
+  width: 0,
+  height: 0
+};
+var DropdownMenuContext = import_react15.default.createContext(DEFAULT_API);
+var useDropdownMenu = () => import_react15.default.useContext(DropdownMenuContext);
+var DropdownMenuProvider = ({
+  children
+}) => {
+  const context = useDropdownMenuProvider();
+  return /* @__PURE__ */ import_react15.default.createElement(DropdownMenuContext.Provider, { value: context }, children);
+};
+function useDropdownMenuProvider() {
+  const [open, setOpen] = import_react15.default.useState(false);
+  const [contentProps, setContentProps] = import_react15.default.useState({
+    ...DEFAULT_POSITIONS,
+    ...DEFAULT_DIMENSIONS
+  });
+  const [triggerProps, setTriggerProps] = import_react15.default.useState({
+    ...DEFAULT_POSITIONS,
+    ...DEFAULT_DIMENSIONS
+  });
+  const triggerId = import_react15.default.useId();
+  const dropdownId = import_react15.default.useId();
+  const composedId = `${triggerId}|${dropdownId}`;
+  return {
+    id: composedId,
+    states: {
+      open,
+      contentProps,
+      triggerProps
+    },
+    methods: {
+      toggleOpen: () => setOpen(!open),
+      setContentProps,
+      setTriggerProps
+    }
+  };
+}
+
+// src/dropdown/styles/index.ts
+var import_styled_components7 = __toESM(require("styled-components"));
+var FadeIn = import_styled_components7.keyframes`
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+`;
+var ContentWrapperSizes = import_styled_components7.css`
+  --small: var(--measurement-large-60);
+  --medium: var(--measurement-large-80);
+  --large: var(--measurement-large-90);
+
+  max-height: var(--measurement-large-90);
+
+  &[data-sizing="small"] {
+    width: var(--small);
+    max-width: var(--small);
+  }
+
+  &[data-sizing="medium"] {
+    width: var(--medium);
+    max-width: var(--medium);
+  }
+
+  &[data-sizing="large"] {
+    width: var(--large);
+    max-width: var(--large);
+  }
+`;
+var RootWrapper = import_styled_components7.default.div`
+  position: relative;
+`;
+var ContentWrapper = import_styled_components7.default.ul`
+  --small: var(--measurement-large-60);
+  --medium: var(--measurement-large-80);
+  --large: var(--measurement-large-90);
+
+  &[data-raw="false"] {
+    position: fixed;
+    margin: 0;
+
+    padding: var(--measurement-medium-30);
+    margin: var(--measurement-medium-10) 0;
+
+    background-color: var(--body-color);
+    border: var(--measurement-small-10) solid var(--font-color-alpha-10);
+    border-radius: var(--measurement-medium-30);
+
+    z-index: var(--depth-default-100);
+    animation-duration: 0.2s;
+    animation-name: ${FadeIn};
+    animation-fill-mode: backwards;
+
+    ${ContentWrapperSizes}
+  }
+`;
+var ItemWrapper = import_styled_components7.default.li`
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  user-select: none;
+
+  &[data-raw="false"] {
+    font-size: var(--fontsize-small-80);
+    padding: var(--measurement-medium-30);
+    border-radius: var(--measurement-medium-20);
+    text-align: left;
+    color: var(--font-color-alpha-60);
+    outline: none;
+    transition: all ease-in-out 0.2s;
+    cursor: pointer;
+
+    &:hover,
+    &:focus,
+    &:active {
+      color: var(--font-color);
+      background-color: var(--font-color-alpha-10);
+    }
+  }
+
+  &[aria-disabled="true"] {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+`;
+
+// src/dropdown/index.tsx
+var DropdownMenu = ({ children }) => {
+  const DropdownContentRef = import_react16.default.useRef(null);
+  const { states, methods } = useDropdownMenu();
+  const { toggleOpen } = methods;
+  const handleClickOutside = () => {
+    if (states.open && toggleOpen) toggleOpen();
+  };
+  useClickOutside(DropdownContentRef, handleClickOutside);
+  useDisabledScroll(Boolean(states.open));
+  return /* @__PURE__ */ import_react16.default.createElement(RootWrapper, { ref: DropdownContentRef }, children);
+};
+DropdownMenu.displayName = "DropdownMenu";
+var DropdownMenuRoot = ({ children }) => {
+  return /* @__PURE__ */ import_react16.default.createElement(DropdownMenuProvider, null, children);
+};
+DropdownMenuRoot.displayName = "DropdownMenu.Root";
+var DropdownMenuTrigger = (props) => {
+  const triggerRef = import_react16.default.useRef(null);
+  const triggerRect = () => triggerRef.current?.getBoundingClientRect();
+  const { variant = "ghost", onClick, children, ...restProps } = props;
+  const { id, states, methods } = useDropdownMenu();
+  const { toggleOpen, setTriggerProps } = methods;
+  const handleClick = (event) => {
+    if (onClick) onClick(event);
+    if (toggleOpen) toggleOpen();
+    if (setTriggerProps)
+      setTriggerProps({
+        top: Number(triggerRect()?.top),
+        right: Number(triggerRect()?.right),
+        bottom: Number(triggerRect()?.bottom),
+        left: Number(triggerRect()?.left),
+        width: Number(triggerRect()?.width),
+        height: Number(triggerRect()?.height)
+      });
+  };
+  return /* @__PURE__ */ import_react16.default.createElement(
+    Button,
+    {
+      ref: triggerRef,
+      id: id.split("|").at(0),
+      onClick: handleClick,
+      "aria-haspopup": "menu",
+      "data-state": applyDataState(Boolean(states.open)),
+      variant,
+      ...restProps
+    },
+    children
+  );
+};
+DropdownMenuTrigger.displayName = "DropdownMenu.Trigger";
+var DropdownMenuContent = import_react16.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 contentRect = () => contentRef?.current?.getBoundingClientRect();
+  const bodyRect = () => {
+    if (typeof document !== "undefined") {
+      return document?.body?.getBoundingClientRect();
+    }
+    return void 0;
+  };
+  const positions = {
+    btt: `calc((${states?.triggerProps?.top}px - ${states?.contentProps?.height}px) - (var(--measurement-medium-10) * 2))`,
+    ttb: `calc((${states?.triggerProps?.top}px + ${states?.triggerProps?.height}px) + var(--measurement-medium-10))`,
+    ltr: `${states?.triggerProps?.left}px`,
+    rtl: `calc(${states?.triggerProps?.left}px - (${states?.contentProps?.width}px - ${states?.triggerProps?.width}px))`
+  };
+  const dimensions = {
+    body_width: bodyRect()?.width ?? 0,
+    body_height: bodyRect()?.height ?? 0,
+    content_width: states.contentProps.width,
+    content_height: states.contentProps.height,
+    content_left: states.contentProps.left,
+    content_bottom: states.contentProps.bottom
+  };
+  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(() => {
+    if (defaultOpen && toggleOpen) toggleOpen();
+  }, []);
+  import_react16.default.useEffect(() => {
+    mounted.current = true;
+    setContentProps && setContentProps({
+      top: Number(contentRect()?.top),
+      right: Number(contentRect()?.right),
+      bottom: Number(contentRect()?.bottom),
+      left: Number(contentRect()?.left),
+      width: Number(contentRect()?.width),
+      height: Number(contentRect()?.height)
+    });
+    return () => {
+      mounted.current = false;
+    };
+  }, [states.open]);
+  return /* @__PURE__ */ import_react16.default.createElement(import_react16.default.Fragment, null, states.open && /* @__PURE__ */ import_react16.default.createElement(
+    ContentWrapper,
+    {
+      ref: contentRef,
+      id: id.split("|").at(-1),
+      role: "menu",
+      tabIndex: -1,
+      "aria-labelledby": id.split("|").at(0),
+      "data-state": applyDataState(Boolean(states.open)),
+      "data-sizing": sizing,
+      "data-side": hasEnoughHorizontalSpace ? "left" /* Left */ : "right" /* Right */,
+      "data-align": hasEnoughHorizontalSpace ? "left" /* Left */ : "right" /* Right */,
+      "data-raw": Boolean(raw),
+      style: {
+        top: hasEnoughVerticalSpace ? positions.ttb : positions.btt,
+        left: hasEnoughHorizontalSpace ? positions.ltr : positions.rtl
+      },
+      ...restProps
+    },
+    children
+  ));
+});
+DropdownMenuContent.displayName = "DropdownMenu.Content";
+var DropdownMenuItem = (props) => {
+  const {
+    raw,
+    onClick,
+    radio = false,
+    disabled,
+    children,
+    ...restProps
+  } = props;
+  const { methods } = useDropdownMenu();
+  const { toggleOpen } = methods;
+  const EventsHandler = {
+    toggle: () => {
+      if (!radio && toggleOpen) toggleOpen();
+    },
+    click: (event) => {
+      if (onClick) onClick(event);
+    }
+  };
+  const handleClick = (event) => {
+    if (!disabled) {
+      EventsHandler.click(event);
+      EventsHandler.toggle();
+    }
+  };
+  const handleKeydown = (event) => {
+    if (["Space", "Enter"].includes(event.code || event.key) && !disabled) {
+      EventsHandler.click(event);
+      EventsHandler.toggle();
+    }
+  };
+  return /* @__PURE__ */ import_react16.default.createElement(
+    ItemWrapper,
+    {
+      role: "menuitem",
+      tabIndex: 0,
+      onClick: handleClick,
+      onKeyDown: handleKeydown,
+      "aria-disabled": disabled,
+      "data-orientation": "vertical",
+      "data-raw": Boolean(raw),
+      ...restProps
+    },
+    children
+  );
+};
+DropdownMenuItem.displayName = "DropdownMenu.Item";
+DropdownMenu.Root = DropdownMenuRoot;
+DropdownMenu.Trigger = DropdownMenuTrigger;
+DropdownMenu.Content = DropdownMenuContent;
+DropdownMenu.Item = DropdownMenuItem;
+
+// src/field/index.tsx
+var import_react18 = __toESM(require("react"));
+
+// src/field/hooks/index.tsx
+var import_react17 = __toESM(require("react"));
+var defaultComponentAPI5 = {
+  id: "",
+  states: {},
+  methods: {}
+};
+var FieldContext = (0, import_react17.createContext)(defaultComponentAPI5);
+var useField = () => (0, import_react17.useContext)(FieldContext);
+var FieldProvider = ({ children }) => {
+  const context = useFieldProvider();
+  return /* @__PURE__ */ import_react17.default.createElement(FieldContext.Provider, { value: context }, children);
+};
+function useFieldProvider() {
+  const fieldId = import_react17.default.useId();
+  return {
+    id: fieldId,
+    states: {},
+    methods: {}
+  };
+}
+
+// src/field/styles/index.ts
+var import_styled_components8 = __toESM(require("styled-components"));
+var FieldDefaultStyles = import_styled_components8.css`
+  outline: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  font-size: var(--fontsize-small-80);
+  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);
+  width: fit-content;
+  height: fit-content;
+
+  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;
+  }
+`;
+var FieldVariantsStyles = import_styled_components8.css`
+  &[data-variant="primary"] {
+    background-color: var(--font-color-alpha-10);
+
+    &[data-error="true"] {
+      color: var(--color-red);
+      background-color: var(--alpha-red-10);
+      border-color: var(--alpha-red-10);
+    }
+  }
+
+  &[data-variant="secondary"] {
+    background-color: transparent;
+    border-color: var(--font-color-alpha-10);
+
+    &:hover,
+    &:focus,
+    &:active {
+      background-color: var(--font-color-alpha-10);
+    }
+
+    &[data-error="true"] {
+      color: var(--color-red);
+      border-color: var(--alpha-red-10);
+
+      &:hover,
+      &:focus,
+      &:active {
+        background-color: var(--alpha-red-10);
+      }
+    }
+  }
+
+  &[data-variant="ghost"] {
+    padding: 0;
+    border: none;
+    background-color: transparent;
+    min-width: fit-content;
+    min-height: var(--measurement-medium-60);
+    color: var(--font-color-alpha-60);
+
+    &:hover,
+    &:focus,
+    &:active {
+      color: var(--font-color);
+    }
+
+    &[data-error="true"] {
+      color: var(--color-red);
+    }
+  }
+`;
+var FieldSizeStyles = import_styled_components8.css`
+  &[data-size="small"] {
+    gap: var(--measurement-medium-10);
+    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);
+    min-width: var(--measurement-medium-90);
+    min-height: var(--measurement-medium-90);
+  }
+`;
+var Fieldset = import_styled_components8.default.fieldset`
+  all: unset;
+  display: grid;
+  gap: var(--measurement-medium-10);
+`;
+var Sup = import_styled_components8.default.sup`
+  color: var(--color-red);
+`;
+var Input = import_styled_components8.default.input`
+  &[data-raw="false"] {
+    ${FieldDefaultStyles}
+    ${FieldVariantsStyles}
+    ${FieldSizeStyles}
+
+  &[data-error="true"] {
+      &::placeholder {
+        color: var(--alpha-red-30);
+      }
+    }
+  }
+`;
+var Label = import_styled_components8.default.label`
+  &[data-raw="false"] {
+    font-weight: 500;
+    line-height: 1.1;
+    letter-spacing: calc(
+      var(--fontsize-small-10) - ((var(--fontsize-small-10) * 1.066))
+    );
+  }
+`;
+var Def = import_styled_components8.default.dfn`
+  &[data-raw="false"] {
+    font-style: normal;
+    font-size: var(--fontsize-medium-10);
+
+    &[data-variant="hint"] {
+      color: var(--font-color-alpha-30);
+    }
+    &[data-variant="error"] {
+      color: var(--color-red);
+    }
+  }
+`;
+
+// src/field/index.tsx
+var MetaVariantEnum = /* @__PURE__ */ ((MetaVariantEnum2) => {
+  MetaVariantEnum2["Default"] = "default";
+  MetaVariantEnum2["Hint"] = "hint";
+  MetaVariantEnum2["Emphasis"] = "emphasis";
+  MetaVariantEnum2["Error"] = "error";
+  return MetaVariantEnum2;
+})(MetaVariantEnum || {});
+var Field = (props) => {
+  const {
+    raw,
+    sizing = "medium" /* Medium */,
+    variant = "primary" /* Primary */,
+    error,
+    hint,
+    ...restProps
+  } = props;
+  const metaId = import_react18.default.useId();
+  const { id } = useField();
+  return /* @__PURE__ */ import_react18.default.createElement(import_react18.default.Fragment, null, /* @__PURE__ */ import_react18.default.createElement(
+    Input,
+    {
+      id,
+      "aria-invalid": !!error,
+      "aria-describedby": metaId,
+      "aria-errormessage": error,
+      "data-error": Boolean(error),
+      "data-variant": variant,
+      "data-size": sizing,
+      "data-raw": Boolean(raw),
+      ...restProps
+    }
+  ), (error ?? hint) && /* @__PURE__ */ import_react18.default.createElement(
+    FieldMeta,
+    {
+      raw,
+      "data-variant": error ? "error" /* Error */ : "hint" /* Hint */
+    },
+    error ?? hint
+  ));
+};
+Field.displayName = "Field";
+var FieldRoot = ({ children }) => {
+  return /* @__PURE__ */ import_react18.default.createElement(FieldProvider, null, children);
+};
+FieldRoot.displayName = "Field.Root";
+var FieldWrapper = ({
+  children,
+  ...restProps
+}) => {
+  return /* @__PURE__ */ import_react18.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, "*"));
+};
+FieldLabel.displayName = "Field.Label";
+var FieldMeta = (props) => {
+  const {
+    raw,
+    variant = "emphasis" /* Emphasis */,
+    children,
+    ...restProps
+  } = props;
+  const metaId = import_react18.default.useId();
+  const { id } = useField();
+  return /* @__PURE__ */ import_react18.default.createElement(
+    Def,
+    {
+      id: metaId,
+      "aria-details": id,
+      "data-variant": variant,
+      "data-raw": Boolean(raw),
+      ...restProps
+    },
+    children
+  );
+};
+FieldMeta.displayName = "Field.Meta";
+Field.Root = FieldRoot;
+Field.Wrapper = FieldWrapper;
+Field.Label = FieldLabel;
+Field.Meta = FieldMeta;
+
+// src/otp-field/index.tsx
+var import_react20 = __toESM(require("react"));
+
+// src/otp-field/hooks/index.tsx
+var import_react19 = __toESM(require("react"));
+var OTPFieldContext = import_react19.default.createContext(
+  null
+);
+var useOTPField = () => {
+  const context = import_react19.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`
+  width: var(--measurement-medium-90);
+  height: var(--measurement-medium-90);
+  border: var(--measurement-small-10) solid var(--font-color-alpha-10);
+
+  border-radius: var(--measurement-medium-30);
+  backdrop-filter: blur(var(--measurement-small-10));
+
+  text-align: center;
+  font-size: var(--fontsize-medium-10);
+  font-weight: 500;
+
+  color: var(--font-color-alpha-10);
+  text-shadow: 0 0 0 var(--font-color);
+
+  background-color: transparent;
+  transition: all 0.2s ease-in-out;
+  outline: none;
+
+  &:focus:not(:active) {
+    background-color: var(--font-color-alpha-10);
+  }
+
+  &:hover:not(:active) {
+    border-color: var(--font-color-alpha-20);
+  }
+
+  &::placeholder {
+    opacity: var(--opacity-default-10);
+  }
+`;
+
+// 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(
+    Array.from({ length: defaultLength }, () => "")
+  );
+  const [activeIndex, setActiveIndex] = import_react20.default.useState(0);
+  const handleChange = (index, value) => {
+    const newOtp = [...otp];
+    newOtp[index] = value.substring(value.length - 1);
+    setOtp(newOtp);
+    if (value && index < defaultLength - 1) {
+      setActiveIndex(index + 1);
+      inputRefs.current[index + 1]?.focus();
+    }
+  };
+  const handleKeyDown = (index, e) => {
+    const enabledBehaviorKeys = ["Backspace", "Delete"];
+    const disabledBehaviorKeys = [
+      "Tab",
+      "ArrowLeft",
+      "ArrowRight",
+      "Home",
+      "End"
+    ];
+    if (enabledBehaviorKeys.includes(e.key)) {
+      if (otp[index]) {
+        const newOtp = [...otp];
+        newOtp[index] = "";
+        setOtp(newOtp);
+        return;
+      }
+      if (index > 0) {
+        setActiveIndex(index - 1);
+        inputRefs.current[index - 1]?.focus();
+      }
+      return;
+    }
+    if (disabledBehaviorKeys.includes(e.key) && !otp[index]) {
+      e.preventDefault();
+    }
+  };
+  const handleFocus = (index) => setActiveIndex(index);
+  const handlePaste = (e) => {
+    e.preventDefault();
+    const pasteData = e.clipboardData.getData("text");
+    const pasteArray = pasteData.slice(0, defaultLength).split("");
+    const newOtp = [...otp];
+    pasteArray.forEach((char, index) => {
+      if (index < defaultLength) newOtp[index] = char;
+    });
+    setOtp(newOtp);
+    const nextIndex = Math.min(pasteArray.length, defaultLength - 1);
+    setActiveIndex(nextIndex);
+    inputRefs.current[nextIndex]?.focus();
+  };
+  const handleClick = () => {
+    const firstEmptyIndex = otp.findIndex((digit) => digit === "");
+    const targetIndex = firstEmptyIndex === -1 ? defaultLength - 1 : firstEmptyIndex;
+    setActiveIndex(targetIndex);
+    inputRefs.current[targetIndex]?.focus();
+    const timeout = setTimeout(
+      () => inputRefs.current[targetIndex]?.select(),
+      0
+    );
+    return () => clearTimeout(timeout);
+  };
+  import_react20.default.useEffect(() => {
+    const otpString = otp.join("");
+    if (otpString.length === defaultLength && onComplete) {
+      onComplete(otpString);
+    }
+  }, [otp, defaultLength, onComplete]);
+  const contextValue = import_react20.default.useMemo(() => {
+    return {
+      otp,
+      activeIndex,
+      inputRefs,
+      length: defaultLength,
+      handleChange,
+      handleKeyDown,
+      handleFocus,
+      handleClick,
+      handlePaste
+    };
+  }, [
+    otp,
+    activeIndex,
+    inputRefs,
+    defaultLength,
+    handleChange,
+    handleKeyDown,
+    handleFocus,
+    handleClick,
+    handlePaste
+  ]);
+  return /* @__PURE__ */ import_react20.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 });
+});
+OTPFieldGroup.displayName = "OTPField.Group";
+var OTPFieldSlot = ({
+  index,
+  ...props
+}) => {
+  const context = useOTPField();
+  if (!context) return null;
+  const {
+    otp,
+    activeIndex,
+    inputRefs,
+    handleChange,
+    handleKeyDown,
+    handleFocus,
+    handleClick,
+    handlePaste
+  } = context;
+  return /* @__PURE__ */ import_react20.default.createElement(
+    OTPCell,
+    {
+      ref: (el) => inputRefs.current[index] = el,
+      type: "text",
+      "data-testid": "otp-field-slot",
+      "data-active": activeIndex === index,
+      autoComplete: "one-time-code",
+      maxLength: 1,
+      value: otp[index] || "",
+      placeholder: props.placeholder || "-",
+      onChange: (e) => handleChange(index, e.target.value),
+      onKeyDown: (e) => handleKeyDown(index, e),
+      onFocus: () => handleFocus(index),
+      onMouseDown: () => handleClick(index),
+      onClick: () => handleClick(index),
+      onPaste: handlePaste,
+      ...props
+    }
+  );
+};
+OTPFieldSlot.displayName = "OTPField.Slot";
+OTPField.Group = OTPFieldGroup;
+OTPField.Slot = OTPFieldSlot;
+
+// src/overlay/index.tsx
+var import_react21 = __toESM(require("react"));
+
+// src/overlay/styles/index.ts
+var import_styled_components10 = __toESM(require("styled-components"));
+var OverlayWrapper = import_styled_components10.default.div`
+  @keyframes animate-fade {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: var(--depth-default-90);
+
+  &[data-raw="false"] {
+    background-color: rgba(0, 0, 0, 0.6); // Always forced to black
+    animation-duration: 0.2s;
+    animation-name: animate-fade;
+    animation-fill-mode: backwards;
+  }
+`;
+
+// src/overlay/index.tsx
+var Overlay = (props) => {
+  const { raw, visible, closeOnInteract, onClick, ...restProps } = props;
+  const [mounted, setMounted] = import_react21.default.useState(Boolean(visible));
+  const handleClick = (event) => {
+    if (onClick) onClick(event);
+    if (closeOnInteract) setMounted(false);
+  };
+  import_react21.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(
+    OverlayWrapper,
+    {
+      tabIndex: -1,
+      onClick: handleClick,
+      "aria-hidden": true,
+      "data-raw": Boolean(raw),
+      ...restProps
+    }
+  ));
+};
+Overlay.displayName = "Overlay";
+
+// src/page/index.tsx
+var import_react22 = __toESM(require("react"));
+
+// src/page/styles/index.ts
+var import_styled_components12 = __toESM(require("styled-components"));
+
+// src/scrollarea/styles/index.ts
+var import_styled_components11 = __toESM(require("styled-components"));
+var HiddenScrollbar = import_styled_components11.css`
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+    width: 0;
+    height: 0;
+  }
+  &::-moz-scrollbar {
+    display: none;
+  }
+`;
+var CustomScrollbar = import_styled_components11.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 ScrollAreaWrapper = import_styled_components11.default.div`
+  overflow: scroll;
+
+  &[data-scrollbar="true"] {
+    ${CustomScrollbar}
+  }
+  &[data-scrollbar="false"] {
+    ${HiddenScrollbar}
+  }
+`;
+
+// src/page/styles/index.ts
+var PageRootWrapper = import_styled_components12.default.div`
+  height: 100dvh;
+  width: 100%;
+`;
+var PageNavWrapper = import_styled_components12.default.nav`
+  background-color: var(--body-color);
+  border: var(--measurement-small-10) solid transparent;
+  border-bottom-color: var(--font-color-alpha-10);
+  width: 100%;
+  height: 100%;
+  max-height: var(--measurement-large-20);
+  padding: var(--measurement-medium-30);
+`;
+var PageMenuWrapper = import_styled_components12.default.menu`
+  background-color: var(--body-color);
+  border: var(--measurement-small-10) solid transparent;
+  border-bottom-color: var(--font-color-alpha-10);
+  width: 100%;
+  height: 100%;
+  max-height: var(--measurement-large-30);
+  margin: 0;
+  padding: var(--measurement-medium-60) var(--measurement-medium-30);
+`;
+var PagePanelWrapper = import_styled_components12.default.aside`
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  overflow: scroll;
+  ${HiddenScrollbar}
+`;
+var PageSectionWrapper = import_styled_components12.default.div`
+  background: var(--body-color);
+  width: 100%;
+  height: 100%;
+`;
+var PageBodyWrapper = import_styled_components12.default.div`
+  --menus-height: calc(
+    var(--measurement-large-30) *
+      ${({ $menus }) => $menus ? Number($menus) : 0}
+  );
+  --navs-height: calc(
+    var(--measurement-large-20) *
+      ${({ $navigations }) => $navigations ? Number($navigations) : 0}
+  );
+  --page-height: calc(100dvh - (var(--menus-height) + var(--navs-height)));
+
+  outline: none;
+  display: inline-block;
+
+  height: var(--page-height);
+  max-height: var(--page-height);
+
+  width: 100%;
+  overflow: scroll;
+  ${HiddenScrollbar}
+`;
+
+// src/page/index.tsx
+var Page = (props) => {
+  const { children } = props;
+  return /* @__PURE__ */ import_react22.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);
+};
+PageNavigation.displayName = "Page.Navigation";
+var PageTools = (props) => {
+  const {
+    shortcut,
+    hotkey,
+    bindkey,
+    raw,
+    sizing,
+    side,
+    defaultOpen,
+    fixed,
+    showoncollapse,
+    onClick,
+    trigger,
+    triggerProps,
+    children
+  } = props;
+  const handleClick = (event) => {
+    if (onClick) onClick(event);
+  };
+  return /* @__PURE__ */ import_react22.default.createElement(Toolbar.Root, null, /* @__PURE__ */ import_react22.default.createElement(
+    Toolbar,
+    {
+      raw,
+      sizing,
+      side,
+      shortcut: !fixed && shortcut,
+      hotkey,
+      bindkey,
+      defaultOpen,
+      ...props
+    },
+    /* @__PURE__ */ import_react22.default.createElement(Toolbar.Section, { showoncollapse }, children),
+    !fixed && /* @__PURE__ */ import_react22.default.createElement(
+      Toolbar.Trigger,
+      {
+        title: shortcut ? `${bindkey ?? "ctrl"} + ${hotkey}` : "toolbar-trigger",
+        onClick: handleClick,
+        ...triggerProps
+      },
+      trigger ?? /* @__PURE__ */ import_react22.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);
+};
+PageContent.displayName = "Page.Content";
+var PageWrapper = (props) => {
+  const { children } = props;
+  return /* @__PURE__ */ import_react22.default.createElement(PageBodyWrapper, { ...props }, children);
+};
+PageWrapper.displayName = "Page.Wrapper";
+var PagePanel = (props) => {
+  const {
+    shortcut,
+    hotkey,
+    bindkey,
+    raw,
+    sizing,
+    height = "auto",
+    side,
+    defaultOpen,
+    fixed,
+    showoncollapse,
+    onClick,
+    trigger,
+    triggerProps,
+    children
+  } = props;
+  const handleClick = (event) => {
+    if (onClick) onClick(event);
+  };
+  return /* @__PURE__ */ import_react22.default.createElement(Toolbar.Root, null, /* @__PURE__ */ import_react22.default.createElement(
+    PagePanelWrapper,
+    {
+      as: Toolbar,
+      raw,
+      sizing,
+      height,
+      side,
+      shortcut: !fixed && shortcut,
+      hotkey,
+      bindkey,
+      defaultOpen,
+      "aria-label": props["aria-label"]
+    },
+    !fixed && /* @__PURE__ */ import_react22.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")
+    ),
+    /* @__PURE__ */ import_react22.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);
+};
+PageMenu.displayName = "Page.Menu";
+Page.Navigation = PageNavigation;
+Page.Tools = PageTools;
+Page.Wrapper = PageWrapper;
+Page.Content = PageContent;
+Page.Panel = PagePanel;
+Page.Menu = PageMenu;
+
+// src/portal/index.tsx
+var import_react23 = __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(() => {
+    setHasMounted(true);
+    setPortalRoot(document.querySelector(`#${container}`));
+  }, [container]);
+  if (!hasMounted || !portalRoot) return null;
+  return (0, import_react_dom.createPortal)(children, portalRoot);
+};
+Portal.displayName = "Portal";
+
+// src/sheet/index.tsx
+var import_react25 = __toESM(require("react"));
+
+// src/sheet/hooks/index.tsx
+var import_react24 = __toESM(require("react"));
+var SheetContext = import_react24.default.createContext({
+  id: {},
+  states: {},
+  methods: {}
+});
+var useSheet = () => import_react24.default.useContext(SheetContext);
+var SheetProvider = ({ children }) => {
+  const context = useSheetProvider();
+  return /* @__PURE__ */ import_react24.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);
+  return {
+    id: {
+      containerId,
+      triggerId,
+      controlId
+    },
+    states: {
+      open
+    },
+    methods: {
+      setOpen,
+      toggle: () => setOpen(!open)
+    }
+  };
+}
+
+// src/sheet/styles/index.ts
+var import_styled_components13 = __toESM(require("styled-components"));
+var SheetStyles = import_styled_components13.css`
+  all: unset;
+  position: fixed;
+  background-color: var(--body-color);
+  border: var(--measurement-small-10) solid transparent;
+  padding: var(--measurement-medium-60);
+  height: 100%;
+  z-index: var(--depth-default-100);
+
+  @keyframes slide-right {
+    0% {
+      transform: translateX(calc(var(--measurement-large-90) * 2));
+    }
+    100% {
+      transform: translateX(0);
+    }
+  }
+  @keyframes slide-left {
+    0% {
+      transform: translateX(calc(var(--measurement-large-90) * -2));
+    }
+    100% {
+      transform: translateX(0);
+    }
+  }
+
+  animation-delay: 0.2s;
+  animation-duration: 0.2s;
+  animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
+  animation-fill-mode: backwards;
+`;
+var SheetSizeStyles = import_styled_components13.css`
+  &[data-size="small"] {
+    width: var(--measurement-large-80);
+  }
+
+  &[data-size="medium"] {
+    width: var(--measurement-large-90);
+  }
+
+  &[data-size="large"] {
+    width: calc(var(--measurement-large-90) * 1.5);
+  }
+`;
+var SheetSideStyles = import_styled_components13.css`
+  top: 0;
+
+  &[data-side="right"] {
+    right: 0;
+    border-left-color: var(--font-color-alpha-10);
+    animation-name: slide-right;
+  }
+
+  &[data-side="left"] {
+    left: 0;
+    border-right-color: var(--font-color-alpha-10);
+    animation-name: slide-left;
+  }
+`;
+var SheetWrapper = import_styled_components13.default.dialog`
+  &[data-raw="false"] {
+    ${SheetStyles}
+    ${SheetSideStyles}
+    ${SheetSizeStyles}
+  }
+`;
+
+// src/sheet/index.tsx
+var SheetRoot = ({ children }) => {
+  return /* @__PURE__ */ import_react25.default.createElement(SheetProvider, null, children);
+};
+SheetRoot.displayName = "Sheet.Root";
+var Sheet = (props) => {
+  const {
+    raw,
+    sizing = "medium" /* Medium */,
+    side = "right" /* Right */,
+    lock = true,
+    overlay = true,
+    closeOnInteract = true,
+    open,
+    shortcut,
+    bindkey = "ctrlKey" /* Ctrl */,
+    hotkey,
+    children,
+    ...restProps
+  } = props;
+  const { id, states, methods } = useSheet();
+  const { toggle } = methods;
+  const shortcutControls = useKeyPress(String(hotkey), true, bindkey);
+  import_react25.default.useEffect(() => {
+    if (open && toggle) return toggle();
+  }, [open]);
+  import_react25.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(
+    SheetWrapper,
+    {
+      role: "dialog",
+      tabIndex: -1,
+      id: String(id.containerId),
+      "aria-label": props["aria-label"] ?? `${id.containerId}-sheet`,
+      "aria-labelledby": String(id.containerId),
+      open: Boolean(states.open),
+      "data-expanded": Boolean(states.open),
+      "data-state": applyDataState(Boolean(states.open)),
+      "data-size": sizing,
+      "data-side": side,
+      "data-raw": Boolean(raw),
+      ...restProps
+    },
+    children
+  ), overlay && /* @__PURE__ */ import_react25.default.createElement(
+    Overlay,
+    {
+      onClick: () => toggle && toggle(!states.open),
+      visible: Boolean(states.open),
+      closeOnInteract,
+      "aria-label": props["aria-label"] ? `${props["aria-label"]}-overlay` : `${id.containerId}-sheet-overlay`
+    }
+  )));
+};
+Sheet.displayName = "Sheet";
+var SheetTrigger = (props) => {
+  const {
+    raw,
+    onClick,
+    variant = "ghost" /* Ghost */,
+    sizing = "small" /* Small */,
+    children,
+    ...restProps
+  } = props;
+  const { id, methods, states } = useSheet();
+  const { toggle } = methods;
+  const handleClick = (event) => {
+    if (onClick) onClick(event);
+    if (toggle) toggle(!states.open);
+  };
+  return /* @__PURE__ */ import_react25.default.createElement(
+    Button,
+    {
+      id: id.triggerId,
+      "aria-controls": String(id.containerId),
+      "data-state": applyDataState(Boolean(states.open)),
+      variant,
+      sizing,
+      raw: Boolean(raw),
+      onClick: handleClick,
+      ...restProps
+    },
+    children
+  );
+};
+SheetTrigger.displayName = "Sheet.Trigger";
+Sheet.Root = SheetRoot;
+Sheet.Trigger = SheetTrigger;
+
+// src/scrollarea/index.tsx
+var import_react26 = __toESM(require("react"));
+var ScrollArea = ({
+  scrollbar = false,
+  children,
+  ...restProps
+}) => {
+  return /* @__PURE__ */ import_react26.default.createElement(
+    ScrollAreaWrapper,
+    {
+      "aria-hidden": "true",
+      "data-scrollbar": scrollbar,
+      ...restProps
+    },
+    children
+  );
+};
+
+// src/switch/index.tsx
+var import_react28 = __toESM(require("react"));
+
+// src/switch/hooks/index.tsx
+var import_react27 = __toESM(require("react"));
+var defaultComponentAPI6 = {
+  id: "",
+  states: {},
+  methods: {}
+};
+var SwitchContext = (0, import_react27.createContext)(defaultComponentAPI6);
+var useSwitch = () => (0, import_react27.useContext)(SwitchContext);
+var SwitchProvider = ({ children }) => {
+  const context = useSwitchProvider();
+  return /* @__PURE__ */ import_react27.default.createElement(SwitchContext.Provider, { value: context }, children);
+};
+function useSwitchProvider() {
+  const [checked, setChecked] = (0, import_react27.useState)(false);
+  const switchId = import_react27.default.useId();
+  return {
+    id: switchId,
+    states: {
+      checked
+    },
+    methods: {
+      toggleSwitch: () => setChecked(!checked)
+    }
+  };
+}
+
+// src/switch/styles/index.ts
+var import_styled_components14 = __toESM(require("styled-components"));
+var SwitchDefaultStyles = import_styled_components14.css`
+  all: unset;
+
+  border: var(--measurement-small-10) solid transparent;
+  border-radius: var(--measurement-large-90);
+  transition: all 0.2s ease-in-out 0s;
+
+  cursor: pointer;
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+`;
+var SwitchVariantsStyles = import_styled_components14.css`
+  &[data-variant="primary"] {
+    &[aria-checked="true"] {
+      background-color: var(--color-green);
+      border-color: var(--font-color-alpha-10);
+    }
+    &[aria-checked="false"] {
+      background-color: var(--font-color-alpha-10);
+      border-color: var(--font-color-alpha-10);
+    }
+  }
+  &[data-variant="secondary"] {
+    &[aria-checked="true"] {
+      background-color: var(--font-color-alpha-10);
+      border-color: var(--font-color-alpha-10);
+    }
+    &[aria-checked="false"] {
+      background-color: var(--body-color-alpha-10);
+    }
+  }
+
+  &[data-variant="ghost"] {
+    &[aria-checked="true"] {
+      border-color: var(--font-color-alpha-10);
+      background-color: var(--body-color-alpha-10);
+    }
+    &[aria-checked="false"] {
+      border-color: var(--font-color-alpha-10);
+    }
+  }
+`;
+var SwitchSizeStyles = import_styled_components14.css`
+  &[data-size="small"] {
+    width: calc(var(--measurement-medium-60) * 1.33);
+    height: var(--measurement-medium-50);
+
+    span {
+      width: var(--measurement-medium-40);
+      height: var(--measurement-medium-40);
+      &[data-checked="true"] {
+        transform: translateX(var(--measurement-medium-40));
+      }
+      &[data-checked="false"] {
+        transform: translateX(var(--measurement-small-60));
+      }
+    }
+  }
+
+  &[data-size="medium"] {
+    width: calc(var(--measurement-medium-60) * 1.66);
+    height: var(--measurement-medium-60);
+
+    span {
+      width: var(--measurement-medium-50);
+      height: var(--measurement-medium-50);
+      &[data-checked="true"] {
+        transform: translateX(var(--measurement-medium-50));
+      }
+      &[data-checked="false"] {
+        transform: translateX(var(--measurement-small-60));
+      }
+    }
+  }
+
+  &[data-size="large"] {
+    width: calc(var(--measurement-medium-60) * 2.33);
+    height: var(--measurement-medium-70);
+
+    span {
+      width: var(--measurement-medium-60);
+      height: var(--measurement-medium-60);
+      &[data-checked="true"] {
+        transform: translateX(calc(var(--measurement-medium-60) * 1.133));
+      }
+      &[data-checked="false"] {
+        transform: translateX(var(--measurement-small-80));
+      }
+    }
+  }
+`;
+var TriggerWrapper = import_styled_components14.default.button`
+  &[data-raw="false"] {
+    ${SwitchDefaultStyles}
+    ${SwitchVariantsStyles}
+    ${SwitchSizeStyles}
+  }
+`;
+var Thumb = import_styled_components14.default.span`
+  &[data-raw="false"] {
+    all: unset;
+    display: block;
+
+    background: var(--font-color-alpha-60);
+    border-radius: 100%;
+    transition: all 0.1s ease-in-out 0.2s;
+
+    &[data-checked="true"] {
+      background: var(--font-color);
+    }
+  }
+`;
+
+// src/switch/index.tsx
+var Switch = (props) => {
+  const {
+    raw,
+    sizing = "medium" /* Medium */,
+    variant = "primary" /* Primary */,
+    value,
+    defaultChecked,
+    disabled,
+    onClick,
+    children,
+    ...restProps
+  } = props;
+  const { id, states, methods } = useSwitch();
+  const { toggleSwitch } = methods;
+  const handleClick = (event) => {
+    if (onClick) onClick(event);
+    if (toggleSwitch) toggleSwitch();
+  };
+  import_react28.default.useEffect(() => {
+    if (defaultChecked && toggleSwitch) toggleSwitch();
+  }, [defaultChecked]);
+  return /* @__PURE__ */ import_react28.default.createElement(
+    TriggerWrapper,
+    {
+      type: "button",
+      role: "switch",
+      title: "switch-trigger",
+      onClick: handleClick,
+      value: String(states.checked),
+      "aria-label": `${id}-switch-trigger`,
+      "aria-checked": Boolean(states.checked),
+      "data-disabled": String(disabled ?? false),
+      "data-variant": variant,
+      "data-size": sizing,
+      "data-raw": Boolean(raw),
+      ...restProps
+    },
+    /* @__PURE__ */ import_react28.default.createElement("title", null, "Switch"),
+    children
+  );
+};
+Switch.displayName = "Switch";
+var SwitchRoot = ({ children }) => {
+  return /* @__PURE__ */ import_react28.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(
+    Thumb,
+    {
+      role: "presentation",
+      title: "switch-thumb",
+      tabIndex: -1,
+      "aria-hidden": true,
+      "aria-label": `${id}-switch-thumb`,
+      "data-checked": states.checked,
+      "data-raw": Boolean(raw),
+      "data-size": sizing ?? "medium" /* Medium */,
+      ...props
+    }
+  );
+};
+SwitchThumb.displayName = "Switch.Thumb";
+Switch.Root = SwitchRoot;
+Switch.Thumb = SwitchThumb;
+
+// src/table/index.tsx
+var import_react29 = __toESM(require("react"));
+
+// src/table/styles/index.ts
+var import_styled_components15 = __toESM(require("styled-components"));
+var CellStyles = import_styled_components15.css`
+  box-sizing: border-box;
+  border: none;
+  line-height: 1;
+  font-weight: 500;
+  padding: var(--measurement-medium-40) var(--measurement-medium-30);
+  letter-spacing: calc(
+    var(--fontsize-small-10) - ((var(--fontsize-small-10) * 1.066))
+  );
+`;
+var TableLayer = import_styled_components15.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`
+  border-collapse: collapse;
+
+  tbody {
+    tr {
+      &:last-of-type {
+        border-bottom: none;
+      }
+    }
+  }
+`;
+var RowWrapper = import_styled_components15.default.tr`
+  border-bottom: var(--measurement-small-10) solid var(--font-color-alpha-10);
+
+  transition: background-color linear 0.1s;
+
+  &:hover {
+    background-color: var(--font-color-alpha-10);
+  }
+`;
+var HeadCellWrapper = import_styled_components15.default.th`
+  font-size: var(--fontsize-medium-10);
+  ${CellStyles}
+
+  div {
+    color: var(--font-color-alpha-60);
+  }
+`;
+var CellWrapper = import_styled_components15.default.td`
+  ${CellStyles}
+`;
+
+// src/table/index.tsx
+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));
+};
+Table.displayName = "Table";
+var TableHead = ({
+  children,
+  ...restProps
+}) => {
+  return /* @__PURE__ */ import_react29.default.createElement("thead", { ...restProps }, children);
+};
+TableHead.displayName = "Table.Head";
+var TableBody = ({
+  children,
+  ...restProps
+}) => {
+  return /* @__PURE__ */ import_react29.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));
+};
+TableHeadCell.displayName = "Table.HeadCell";
+var TableRow = ({ children, ...restProps }) => {
+  return /* @__PURE__ */ import_react29.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));
+};
+TableCell.displayName = "Table.Cell";
+var TableFooter = ({
+  children,
+  ...restProps
+}) => {
+  return /* @__PURE__ */ import_react29.default.createElement("tfoot", { ...restProps }, children);
+};
+TableFooter.displayName = "Table.Footer";
+Table.Head = TableHead;
+Table.Body = TableBody;
+Table.HeadCell = TableHeadCell;
+Table.Row = TableRow;
+Table.Cell = TableCell;
+Table.Footer = TableFooter;
+
+// src/tabs/index.tsx
+var import_react31 = __toESM(require("react"));
+
+// src/tabs/hooks/index.tsx
+var import_react30 = __toESM(require("react"));
+var defaultComponentAPI7 = {
+  id: "",
+  states: {},
+  methods: {}
+};
+var TabsContext = (0, import_react30.createContext)(defaultComponentAPI7);
+var useTabs = () => (0, import_react30.useContext)(TabsContext);
+var TabsProvider = ({ children }) => {
+  const context = useTabsProvider();
+  return /* @__PURE__ */ import_react30.default.createElement(TabsContext.Provider, { value: context }, children);
+};
+function useTabsProvider() {
+  const [value, setValue] = (0, import_react30.useState)(null);
+  const tabsId = import_react30.default.useId();
+  return {
+    id: tabsId,
+    states: {
+      value
+    },
+    methods: {
+      applyValue: (value2) => setValue(value2),
+      getTabsId: ({ value: value2, type }) => `${tabsId}-${type}-${value2}`
+    }
+  };
+}
+
+// src/tabs/styles/index.ts
+var import_styled_components16 = __toESM(require("styled-components"));
+var TabWrapper = import_styled_components16.default.div`
+  button {
+    &[aria-selected="true"] {
+      color: var(--font-color) !important;
+    }
+  }
+`;
+
+// src/tabs/index.tsx
+var Tabs = (props) => {
+  const { defaultOpen, children, ...restProps } = props;
+  const { methods } = useTabs();
+  const { applyValue } = methods;
+  const childArray = import_react31.Children.toArray(children);
+  const firstChild = childArray[0];
+  import_react31.default.useEffect(() => {
+    if (import_react31.default.isValidElement(firstChild)) {
+      if (childArray.length > 0 && applyValue)
+        applyValue(firstChild.props.value);
+    }
+  }, []);
+  import_react31.default.useEffect(() => {
+    if (defaultOpen && applyValue) applyValue(defaultOpen);
+  }, []);
+  return /* @__PURE__ */ import_react31.default.createElement(TabWrapper, { role: "tablist", ...restProps }, children);
+};
+Tabs.displayName = "Tabs";
+var TabsRoot = ({ children }) => {
+  return /* @__PURE__ */ import_react31.default.createElement(TabsProvider, null, children);
+};
+TabsRoot.displayName = "Tabs.Root";
+var TabsTrigger = (props) => {
+  const { value, onClick, children, ...restProps } = props;
+  const { states, methods } = useTabs();
+  const { applyValue, getTabsId } = methods;
+  const hasSameValueAsContext = value === states.value;
+  const IdHandler = {
+    trigger: getTabsId && getTabsId({ value, type: "trigger" }),
+    content: getTabsId && getTabsId({ value, type: "content" })
+  };
+  const handleClick = (event) => {
+    if (applyValue) applyValue(value);
+    if (onClick) onClick(event);
+  };
+  return /* @__PURE__ */ import_react31.default.createElement(
+    Button,
+    {
+      type: "button",
+      role: "tab",
+      title: `${value}-tab`,
+      id: String(IdHandler.trigger),
+      value,
+      onClick: handleClick,
+      "aria-selected": hasSameValueAsContext,
+      "data-controls": IdHandler.content,
+      "data-state": hasSameValueAsContext ? "active" : "inactive",
+      variant: props.variant ?? "ghost" /* Ghost */,
+      ...restProps
+    },
+    children
+  );
+};
+TabsTrigger.displayName = "Tabs.Trigger";
+var TabsContent = (props) => {
+  const { value, children, ...restProps } = props;
+  const { states, methods } = useTabs();
+  const { getTabsId } = methods;
+  const hasSameValueAsContext = value === states.value;
+  const IdHandler = {
+    trigger: getTabsId && getTabsId({ value, type: "trigger" }),
+    content: getTabsId && getTabsId({ value, type: "content" })
+  };
+  return /* @__PURE__ */ import_react31.default.createElement(
+    "div",
+    {
+      tabIndex: 0,
+      role: "tabpanel",
+      title: `${value}-tabpanel`,
+      id: String(IdHandler.content),
+      "data-value": value,
+      "data-state": hasSameValueAsContext ? "active" : "inactive",
+      "aria-labelledby": IdHandler.trigger ?? restProps["aria-labelledby"],
+      ...restProps
+    },
+    hasSameValueAsContext && children
+  );
+};
+TabsContent.displayName = "Tabs.Content";
+Tabs.Root = TabsRoot;
+Tabs.Trigger = TabsTrigger;
+Tabs.Content = TabsContent;
+
+// src/toggle/index.tsx
+var import_react32 = __toESM(require("react"));
+var Toggle = (props) => {
+  const { defaultChecked, onClick, disabled, children, ...restProps } = props;
+  const [checked, setChecked] = import_react32.default.useState(
+    defaultChecked ?? false
+  );
+  const handleClick = (event) => {
+    if (onClick) onClick(event);
+    if (!disabled) setChecked((prevChecked) => !prevChecked);
+  };
+  import_react32.default.useEffect(() => {
+    if (defaultChecked !== void 0) {
+      setChecked(Boolean(defaultChecked));
+    }
+  }, [defaultChecked]);
+  return /* @__PURE__ */ import_react32.default.createElement(
+    Button,
+    {
+      role: "switch",
+      onClick: handleClick,
+      value: String(checked),
+      "aria-checked": checked,
+      "data-checked": Boolean(checked),
+      "data-disabled": Boolean(disabled),
+      disabled,
+      ...restProps
+    },
+    children
+  );
+};
+Toggle.displayName = "Toggle";
+
+// src/toolbar/index.tsx
+var import_react34 = __toESM(require("react"));
+
+// src/toolbar/hooks/index.tsx
+var import_react33 = __toESM(require("react"));
+var defaultComponentAPI8 = {
+  id: "",
+  states: {},
+  methods: {}
+};
+var ToolbarContext = (0, import_react33.createContext)(defaultComponentAPI8);
+var useToolbar = () => (0, import_react33.useContext)(ToolbarContext);
+var ToolbarProvider = ({ children }) => {
+  const context = useToolbarProvider();
+  return /* @__PURE__ */ import_react33.default.createElement(ToolbarContext.Provider, { value: context }, children);
+};
+function useToolbarProvider() {
+  const [expanded, setExpanded] = (0, import_react33.useState)(false);
+  const toolbarId = import_react33.default.useId();
+  return {
+    id: toolbarId,
+    states: {
+      expanded
+    },
+    methods: {
+      toggleToolbar: (state) => setExpanded(state ?? !expanded)
+    }
+  };
+}
+
+// src/toolbar/styles/index.ts
+var import_styled_components17 = __toESM(require("styled-components"));
+var ToolbarDefaultStyles = import_styled_components17.css`
+  margin: 0;
+  display: grid;
+  grid-template-rows: min-content;
+  background-color: var(--body-color);
+  border: var(--measurement-small-10) solid transparent;
+  padding: var(--measurement-medium-30);
+  min-width: var(--measurement-large-30);
+  min-height: fit-content;
+
+  &[aria-expanded="true"] {
+    width: 100%;
+
+    &[aria-orientation="horizontal"] {
+      height: 100%;
+      width: 100%;
+    }
+
+    menu {
+      display: flex;
+    }
+  }
+
+  &[aria-expanded="false"] {
+    width: fit-content;
+    justify-items: center;
+
+    &[aria-orientation="horizontal"] {
+      justify-items: start;
+      height: fit-content;
+      width: 100%;
+    }
+  }
+`;
+var ToolbarSizeStyles = import_styled_components17.css`
+  &[data-size="small"] {
+    &[aria-orientation="vertical"] {
+      max-width: var(--measurement-large-70);
+    }
+    &[aria-orientation="horizontal"] {
+      max-height: var(--measurement-large-70);
+    }
+  }
+
+  &[data-size="medium"] {
+    &[aria-orientation="vertical"] {
+      max-width: var(--measurement-large-80);
+    }
+    &[aria-orientation="horizontal"] {
+      max-height: var(--measurement-large-80);
+    }
+  }
+
+  &[data-size="large"] {
+    &[aria-orientation="vertical"] {
+      max-width: var(--measurement-large-90);
+    }
+    &[aria-orientation="horizontal"] {
+      max-height: var(--measurement-large-90);
+    }
+  }
+
+  &[data-height="display"] {
+    &[aria-orientation="vertical"] {
+      max-width: calc(var(--measurement-large-90) * 1.618);
+    }
+    &[aria-orientation="horizontal"] {
+      max-height: calc(var(--measurement-large-90) * 1.618);
+    }
+  }
+
+  &[data-height="fullscreen"] {
+    &[aria-orientation="vertical"] {
+      max-width: 100dvw;
+    }
+    &[aria-orientation="horizontal"] {
+      max-height: 100dvh;
+    }
+  }
+`;
+var ToolbarSideStyles = import_styled_components17.css`
+  &[data-side="top"] {
+    border-bottom-color: var(--font-color-alpha-10);
+  }
+  &[data-side="right"] {
+    border-left-color: var(--font-color-alpha-10);
+
+    &[aria-expanded="true"] {
+      menu {
+        justify-content: flex-end;
+      }
+    }
+    &[aria-expanded="false"] {
+      justify-items: end;
+    }
+  }
+  &[data-side="bottom"] {
+    border-top-color: var(--font-color-alpha-10);
+  }
+  &[data-side="left"] {
+    border-right-color: var(--font-color-alpha-10);
+
+    &[aria-expanded="true"] {
+      menu {
+        justify-content: flex-start;
+      }
+    }
+    &[aria-expanded="false"] {
+      justify-items: start;
+    }
+  }
+`;
+var ToolbarWrapper = import_styled_components17.default.menu`
+  &[data-raw="false"] {
+    ${ToolbarDefaultStyles}
+    ${ToolbarSizeStyles}
+
+    ${ToolbarSideStyles}
+  }
+`;
+var ToolbarTriggerWrapper = import_styled_components17.default.menu`
+  &[data-raw="false"] {
+    all: unset;
+    align-self: flex-end;
+  }
+`;
+
+// src/toolbar/index.tsx
+var Toolbar = (props) => {
+  const {
+    shortcut,
+    hotkey,
+    bindkey = "ctrlKey" /* Ctrl */,
+    raw,
+    sizing = "medium" /* Medium */,
+    side = "left" /* Left */,
+    height = "fullscreen" /* Fullscreen */,
+    defaultOpen,
+    children,
+    ...restProps
+  } = props;
+  const { id, methods, states } = useToolbar();
+  const { toggleToolbar } = methods;
+  const shortcutControls = useKeyPress(String(hotkey), true, bindkey);
+  const orientation = side && ["left", "right"].includes(side) ? "vertical" : "horizontal";
+  import_react34.default.useEffect(() => {
+    if (defaultOpen && toggleToolbar) return toggleToolbar(true);
+  }, [defaultOpen]);
+  import_react34.default.useEffect(() => {
+    if (shortcut && shortcutControls && toggleToolbar) toggleToolbar();
+  }, [shortcutControls]);
+  return /* @__PURE__ */ import_react34.default.createElement(
+    ToolbarWrapper,
+    {
+      id,
+      role: "toolbar",
+      "aria-label": props["aria-label"] ?? `${id}-toolbar`,
+      "aria-controls": `${id}-trigger`,
+      "aria-expanded": Boolean(states.expanded),
+      "aria-orientation": orientation,
+      "data-raw": Boolean(raw),
+      "data-size": sizing,
+      "data-height": height,
+      "data-side": side,
+      ...restProps
+    },
+    children
+  );
+};
+Toolbar.displayName = "Toolbar";
+var ToolbarRoot = ({ children }) => {
+  return /* @__PURE__ */ import_react34.default.createElement(ToolbarProvider, null, children);
+};
+ToolbarRoot.displayName = "Toolbar.Root";
+var ToolbarTrigger = (props) => {
+  const {
+    raw,
+    onClick,
+    variant = "ghost" /* Ghost */,
+    sizing = "small" /* Small */,
+    children,
+    ...restProps
+  } = props;
+  const { id, methods, states } = useToolbar();
+  const { toggleToolbar } = methods;
+  const handleClick = (event) => {
+    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(
+    Button,
+    {
+      id: `${id}-trigger`,
+      variant,
+      sizing,
+      raw: Boolean(raw),
+      onClick: handleClick,
+      ...restProps
+    },
+    children
+  ));
+};
+ToolbarTrigger.displayName = "Toolbar.Trigger";
+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);
+};
+ToolbarSection.displayName = "Toolbar.Section";
+var ToolbarItem = (props) => {
+  const { showfirstchild, onClick, children, ...restProps } = props;
+  const childArray = import_react34.default.Children.toArray(children);
+  const { id, states, methods } = useToolbar();
+  const { expanded } = states;
+  const { toggleToolbar } = methods;
+  const displayFirstChild = showfirstchild && childArray.length > 1 && !expanded;
+  const handleClick = (event) => {
+    if (onClick) onClick(event);
+    if (toggleToolbar && !expanded) toggleToolbar(true);
+  };
+  return /* @__PURE__ */ import_react34.default.createElement(
+    "div",
+    {
+      tabIndex: -1,
+      "aria-hidden": true,
+      "aria-describedby": id,
+      "data-expanded": expanded,
+      onClick: handleClick,
+      ...restProps
+    },
+    displayFirstChild && childArray[0],
+    expanded && children
+  );
+};
+ToolbarItem.displayName = "Toolbar.Item";
+Toolbar.Root = ToolbarRoot;
+Toolbar.Trigger = ToolbarTrigger;
+Toolbar.Item = ToolbarItem;
+Toolbar.Section = ToolbarSection;
+
+// src/tooltip/index.tsx
+var import_react35 = __toESM(require("react"));
+
+// src/tooltip/styles/index.ts
+var import_styled_components18 = __toESM(require("styled-components"));
+var FadeIn2 = import_styled_components18.keyframes`
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+`;
+var ContentBox = import_styled_components18.default.div`
+  display: inline-block;
+  position: relative;
+`;
+var ContentWrapper2 = import_styled_components18.default.span`
+  &[data-raw="false"] {
+    width: fit-content;
+    max-width: var(--measurement-large-60);
+
+    * {
+      color: var(--body-color) !important;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+
+    background: var(--font-color);
+    padding: var(--measurement-medium-10) var(--measurement-medium-30);
+    border: var(--measurement-small-10) solid var(--font-color-alpha-10);
+    border-radius: var(--measurement-medium-20);
+    font-size: var(--fontsize-medium-10);
+    z-index: var(--depth-default-100);
+    animation-duration: 0.2s;
+    animation-name: ${FadeIn2};
+    animation-fill-mode: backwards;
+  }
+`;
+
+// src/tooltip/index.tsx
+var Tooltip = ({
+  delay = 200,
+  content,
+  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 contentRect = () => contentRef?.current?.getBoundingClientRect();
+  const bodyRect = import_react35.default.useCallback(() => {
+    if (typeof document !== "undefined") {
+      return document.body.getBoundingClientRect();
+    }
+  }, []);
+  const positions = {
+    btt: `calc((${triggerProps?.top}px - ${contentProps?.height}px) - (var(--measurement-medium-10)))`,
+    ttb: `calc((${triggerProps?.top}px + ${triggerProps?.height}px) + var(--measurement-medium-10))`,
+    ltr: `${triggerProps?.left}px`,
+    rtl: `calc(${triggerProps?.left}px - (${contentProps?.width}px - ${triggerProps?.width}px))`
+  };
+  const dimensions = {
+    body_width: bodyRect()?.width,
+    body_height: bodyRect()?.height,
+    content_width: contentProps?.width,
+    content_height: contentProps?.height,
+    content_left: contentProps?.left,
+    content_bottom: contentProps?.bottom
+  };
+  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(() => {
+    timeoutRef.current = setTimeout(() => setVisible(true), delay);
+  }, [delay]);
+  const hideTooltip = import_react35.default.useCallback(() => {
+    if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    setVisible(false);
+  }, []);
+  const handleMouseEnter = import_react35.default.useCallback(() => {
+    const rect = containerRef.current?.getBoundingClientRect();
+    if (rect) {
+      setTriggerProps({
+        top: rect.top,
+        right: rect.right,
+        bottom: rect.bottom,
+        left: rect.left,
+        width: rect.width,
+        height: rect.height
+      });
+      showTooltip();
+    }
+  }, [showTooltip]);
+  const handleMouseLeave = import_react35.default.useCallback(
+    () => hideTooltip(),
+    [hideTooltip]
+  );
+  import_react35.default.useEffect(() => {
+    mounted.current = true;
+    setContentProps && setContentProps({
+      top: Number(contentRect()?.top),
+      right: Number(contentRect()?.right),
+      bottom: Number(contentRect()?.bottom),
+      left: Number(contentRect()?.left),
+      width: Number(contentRect()?.width),
+      height: Number(contentRect()?.height)
+    });
+    return () => {
+      mounted.current = false;
+    };
+  }, [visible]);
+  return /* @__PURE__ */ import_react35.default.createElement(
+    ContentBox,
+    {
+      ref: containerRef,
+      style: { display: "inline-block", position: "relative" },
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      ...restProps
+    },
+    children,
+    visible && /* @__PURE__ */ import_react35.default.createElement(
+      ContentWrapper2,
+      {
+        ref: contentRef,
+        style: {
+          top: hasEnoughVerticalSpace ? positions.ttb : positions.btt,
+          left: hasEnoughHorizontalSpace ? positions.ltr : positions.rtl,
+          position: "fixed"
+        },
+        role: "tooltip",
+        "data-state": applyDataState(visible),
+        "data-raw": Boolean(restProps.raw),
+        "data-side": hasEnoughHorizontalSpace ? "left" /* Left */ : "right" /* Right */,
+        "data-align": hasEnoughHorizontalSpace ? "left" /* Left */ : "right" /* Right */
+      },
+      /* @__PURE__ */ import_react35.default.createElement("div", null, content)
+    )
+  );
+};
+Tooltip.displayName = "Tooltip";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Accordion,
+  AccordionContent,
+  AccordionRoot,
+  AccordionTrigger,
+  AvataStatusEnum,
+  Avatar,
+  Badge,
+  Button,
+  Checkbox,
+  CheckboxIndicator,
+  CheckboxRoot,
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleRoot,
+  CollapsibleTrigger,
+  Dialog,
+  DialogControl,
+  DialogMenu,
+  DialogOverlay,
+  DialogRoot,
+  DialogTrigger,
+  Divider,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuRoot,
+  DropdownMenuTrigger,
+  Field,
+  FieldLabel,
+  FieldMeta,
+  FieldRoot,
+  FieldWrapper,
+  MetaVariantEnum,
+  OTPField,
+  OTPFieldSlot,
+  Overlay,
+  Page,
+  PageContent,
+  PageMenu,
+  PageNavigation,
+  PagePanel,
+  PageTools,
+  PageWrapper,
+  Portal,
+  ScrollArea,
+  Sheet,
+  SheetRoot,
+  SheetTrigger,
+  Switch,
+  SwitchRoot,
+  SwitchThumb,
+  Table,
+  TableBody,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeadCell,
+  TableRow,
+  Tabs,
+  TabsContent,
+  TabsRoot,
+  TabsTrigger,
+  Toggle,
+  Toolbar,
+  ToolbarItem,
+  ToolbarRoot,
+  ToolbarSection,
+  ToolbarTrigger,
+  Tooltip,
+  useAccordion,
+  useCheckbox,
+  useCollapsible,
+  useDialog,
+  useDropdownMenu,
+  useField,
+  useSheet,
+  useSwitch,
+  useTabs,
+  useToolbar
+});