@locus-ui/components 0.0.15 → 0.1.0

package/dist/index.mjs

@@ -1,3652 +1,22 @@
-"use client";
-
-// src/components/accordion/content/accordion-content.tsx
-import clsx2 from "clsx";
-
-// src/utils/get-component-props.ts
-import clsx from "clsx";
-function getComponentProps(props, ...propDefs) {
-  let style = props.style ?? {};
-  const classNames = props.className ? [props.className] : [];
-  const dataAttrs = {};
-  const extractedProps = {};
-  const allProps = Object.assign({}, ...propDefs);
-  const propKeys = Object.keys(allProps);
-  const restProps = { ...props };
-  delete restProps.className;
-  delete restProps.style;
-  for (const key of propKeys) {
-    const prop = allProps[key];
-    const value = props?.[key];
-    delete restProps[key];
-    if (prop.type === "boolean" || prop.type === "string" || prop.type === "number" || prop.type === "value | array" || prop.type === "reactNode" || prop.type === "function") {
-      extractedProps[key] = value;
-      if (prop.cssProperty) {
-        if (value !== void 0 && value !== null) {
-          style = {
-            ...style,
-            [prop.cssProperty]: prop.type === "boolean" ? value ? "1" : "0" : value
-          };
-        } else if (prop.default !== void 0) {
-          style = {
-            ...style,
-            [prop.cssProperty]: prop.type === "boolean" ? prop.default ? "1" : "0" : prop.default
-          };
-        }
-      }
-      if (prop.dataAttr) {
-        if (value) dataAttrs[`data-${prop.dataAttr}`] = value;
-        else if (prop.default !== void 0) {
-          dataAttrs[`data-${prop.dataAttr}`] = prop.default;
-        }
-      }
-      continue;
-    }
-    const applyValue = (propValue, breakpoint) => {
-      const usedBreakpoint = breakpoint ? `-${breakpoint}` : "";
-      if (prop.type === "enum" || prop.type === "enum | string") {
-        if (propValue !== null && propValue !== void 0) {
-          if (!breakpoint) extractedProps[key] = propValue;
-          if (!prop.values.includes(propValue)) {
-            const transformedValue = "transform" in prop && prop.transform ? prop.transform(propValue) : propValue;
-            if (prop.className) {
-              classNames.push(
-                breakpoint ? `${prop.className}-${breakpoint}` : prop.className
-              );
-              style = {
-                ...style,
-                [`--custom-${key}${usedBreakpoint}`]: transformedValue
-              };
-            }
-            if (prop.dataAttr) {
-              dataAttrs[`data-${prop.dataAttr}${usedBreakpoint}`] = propValue;
-            }
-          } else if (prop.dataAttr) {
-            if (propValue === "inherit" && prop.className) {
-              classNames.push(prop.className);
-            }
-            dataAttrs[`data-${prop.dataAttr}${usedBreakpoint}`] = propValue;
-          }
-        } else if (prop.dataAttr && prop.default) {
-          if (!breakpoint) extractedProps[key] = prop.default;
-          if (prop.dataAttr) {
-            dataAttrs[`data-${prop.dataAttr}${usedBreakpoint}`] = prop.default;
-          }
-        }
-      }
-    };
-    if ("responsive" in prop && prop.responsive && value && typeof value === "object" && !Array.isArray(value)) {
-      for (const [bp, bpValue] of Object.entries(value)) {
-        applyValue(bpValue, bp);
-      }
-      if ("dataAttr" in prop && prop.dataAttr) {
-        dataAttrs[`data-${prop.dataAttr}`] = "";
-      }
-    } else applyValue(value);
-  }
-  return {
-    ...restProps,
-    ...extractedProps,
-    style,
-    dataAttrs,
-    className: clsx(classNames)
-  };
-}
-
-// src/components/accordion/accordion-context.ts
-import React from "react";
-var AccordionContext = React.createContext(null);
-function useAccordionContext() {
-  const context = React.useContext(AccordionContext);
-  if (!context) {
-    throw new Error(
-      "Accordion components must be used within an Accordion.Root"
-    );
-  }
-  return context;
-}
-
-// src/components/accordion/content/accordion-content.props.ts
-var AccordionContentPropDefs = {
-  //
-};
-
-// src/components/accordion/content/accordion-content.tsx
-import { jsx } from "react/jsx-runtime";
-var AccordionContent = (props) => {
-  const context = useAccordionContext();
-  const { className, children, dataAttrs, ...rest } = getComponentProps(
-    props,
-    AccordionContentPropDefs
-  );
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-variant": context.variant,
-      className: clsx2("accordion-content", className),
-      ...rest,
-      children: /* @__PURE__ */ jsx("div", { className: "accordion-content-inner", children: /* @__PURE__ */ jsx("div", { children }) })
-    }
-  );
-};
-AccordionContent.displayName = "Accordion.Content";
-
-// src/components/accordion/header/accordion-header.tsx
-import clsx3 from "clsx";
-
-// src/icons/icon-colors.ts
-var colorMap = {
-  currentColor: "currentColor",
-  primary: "rgb(var(--primary))",
-  white: "white",
-  black: "black"
-};
-
-// src/icons/chevron-down.icon.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
-var ChevronDown = ({
-  color = "currentColor"
-}) => {
-  return /* @__PURE__ */ jsx2(
-    "svg",
-    {
-      width: "20",
-      height: "20",
-      viewBox: "0 0 15 15",
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg",
-      children: /* @__PURE__ */ jsx2(
-        "path",
-        {
-          fill: colorMap[color],
-          d: "M4.18179 6.18181C4.35753 6.00608 4.64245 6.00608 4.81819 6.18181L7.49999 8.86362L10.1818 6.18181C10.3575 6.00608 10.6424 6.00608 10.8182 6.18181C10.9939 6.35755 10.9939 6.64247 10.8182 6.81821L7.81819 9.81821C7.73379 9.9026 7.61934 9.95001 7.49999 9.95001C7.38064 9.95001 7.26618 9.9026 7.18179 9.81821L4.18179 6.81821C4.00605 6.64247 4.00605 6.35755 4.18179 6.18181Z",
-          fillRule: "evenodd",
-          clipRule: "evenodd"
-        }
-      )
-    }
-  );
-};
-
-// src/components/accordion/header/accordion-header.props.ts
-var AccordionHeaderPropDefs = {
-  /** The value of the parent AccordionItem — injected automatically */
-  value: {
-    type: "string"
-  }
-};
-
-// src/components/accordion/header/accordion-header.tsx
-import { jsx as jsx3, jsxs } from "react/jsx-runtime";
-var AccordionHeader = (props) => {
-  const context = useAccordionContext();
-  const { className, children, value, dataAttrs, ...rest } = getComponentProps(
-    props,
-    AccordionHeaderPropDefs
-  );
-  const itemOpen = context.multiple ? context.value?.includes(value ?? "") : context.value === value;
-  const handleClick = () => {
-    if (!value) return;
-    if (context.multiple) {
-      const current = context.value ?? [];
-      const next = current.includes(value) ? current.filter((v) => v !== value) : [...current, value];
-      context.setValue(next.length ? next : null);
-    } else {
-      context.setValue(context.value === value ? null : value);
-    }
-  };
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      "data-open": itemOpen,
-      "data-variant": context.variant,
-      className: clsx3("accordion-header", className),
-      role: "button",
-      tabIndex: 0,
-      onClick: handleClick,
-      onKeyDown: (e) => {
-        if (e.key === "Enter" || e.key === " ") {
-          e.preventDefault();
-          handleClick();
-        }
-      },
-      ...rest,
-      children: [
-        /* @__PURE__ */ jsx3("span", { children }),
-        /* @__PURE__ */ jsx3("span", { className: "accordion-header-indicator", "aria-hidden": "true", children: /* @__PURE__ */ jsx3(ChevronDown, {}) })
-      ]
-    }
-  );
-};
-AccordionHeader.displayName = "Accordion.Header";
-
-// src/components/accordion/item/accordion-item.tsx
-import clsx4 from "clsx";
-import React3, { useEffect, useMemo } from "react";
-
-// src/utils/filter-children.ts
-import * as React2 from "react";
-function filterChildren(children, allowedDisplayNames, options = {}) {
-  const { parentDisplayName, strict = false } = options;
-  return React2.Children.toArray(children).filter((child) => {
-    if (!React2.isValidElement(child)) return false;
-    const childType = child.type;
-    const displayName = childType?.displayName;
-    if (!displayName || !allowedDisplayNames.includes(displayName)) {
-      const parent = parentDisplayName ?? "Component";
-      const childName = displayName || "Unknown";
-      const allowed = allowedDisplayNames.join(", ");
-      const message = `${parent}: Invalid child "${childName}"${strict ? "" : " was filtered out"}. Only ${allowed} are allowed as direct children.`;
-      if (strict) throw new Error(message);
-      console.warn(message);
-      return false;
-    }
-    return true;
-  });
-}
-
-// src/components/accordion/item/accordion-item.props.ts
-var AccordionItemPropDefs = {
-  /**
-   * Sets the accordion item to be open by default.
-   */
-  open: {
-    type: "boolean"
-  },
-  /**
-   * The value of the accordion item. Automatically generated if not provided.
-   */
-  value: {
-    type: "string"
-  }
-};
-
-// src/components/accordion/item/accordion-item.tsx
-import { jsxs as jsxs2 } from "react/jsx-runtime";
-var ALLOWED_CHILDREN = [
-  AccordionHeader.displayName,
-  AccordionContent.displayName
-];
-var AccordionItem = (props) => {
-  const context = useAccordionContext();
-  const { open, value, className, dataAttrs, ...rest } = getComponentProps(
-    props,
-    AccordionItemPropDefs
-  );
-  const itemOpen = open ?? (context.multiple ? context.value?.includes(value ?? "") : context.value === value);
-  const validChildren = filterChildren(props.children, ALLOWED_CHILDREN, {
-    parentDisplayName: AccordionItem.displayName
-  });
-  const { header, content } = useMemo(() => {
-    const header2 = validChildren.find(
-      (child) => child.type.displayName === AccordionHeader.displayName
-    );
-    const content2 = validChildren.find(
-      (child) => child.type.displayName === AccordionContent.displayName
-    );
-    return { header: header2, content: content2 };
-  }, [validChildren]);
-  useEffect(() => {
-    if (!value) return;
-    return () => {
-      const values = context.itemValues.current;
-      const index = values.indexOf(value);
-      if (index > -1) values.splice(index, 1);
-    };
-  }, [value]);
-  const headerWithValue = header ? React3.cloneElement(header, {
-    value
-  }) : null;
-  return /* @__PURE__ */ jsxs2(
-    "div",
-    {
-      "data-variant": context.variant,
-      className: clsx4("accordion-item", className),
-      ...rest,
-      "data-open": itemOpen,
-      children: [
-        headerWithValue,
-        content
-      ]
-    }
-  );
-};
-AccordionItem.displayName = "Accordion.Item";
-
-// src/components/accordion/root/accordion-root.tsx
-import clsx5 from "clsx";
-import { useMemo as useMemo2, useRef } from "react";
-
-// src/props/align.prop.ts
-var Alignments = ["start", "center", "end"];
-var AlignPropDef = {
-  /**
-   * The alignment of the component.
-   */
-  align: {
-    type: "enum",
-    values: Alignments,
-    dataAttr: "align"
-  }
-};
-
-// src/utils/parse-color.ts
-function parseColor(value) {
-  const trimmed = value.trim();
-  const hexMatch = trimmed.match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/i);
-  if (hexMatch) {
-    let hex = hexMatch[1];
-    if (hex.length === 3) {
-      hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
-    }
-    const r = parseInt(hex.slice(0, 2), 16);
-    const g = parseInt(hex.slice(2, 4), 16);
-    const b = parseInt(hex.slice(4, 6), 16);
-    return `${r}, ${g}, ${b}`;
-  }
-  const rgbMatch = trimmed.match(
-    /^rgba?\(\s*(\d{1,3})\s*[,\s]\s*(\d{1,3})\s*[,\s]\s*(\d{1,3})\s*(?:[,/]\s*[\d.]+%?\s*)?\)$/
-  );
-  if (rgbMatch) {
-    return `${rgbMatch[1]}, ${rgbMatch[2]}, ${rgbMatch[3]}`;
-  }
-  return trimmed;
-}
-
-// src/props/color.prop.ts
-var Colors = [
-  "primary",
-  "secondary",
-  "tertiary",
-  "accent",
-  "success",
-  "warning",
-  "danger",
-  "info"
-];
-var ColorPropDef = {
-  /**
-   * Sets the color of the component.
-   *
-   * Uses predefined theme colors ("primary", "secondary", etc.) or accepts custom color values in hex, rgb, or raw rgb formats.
-   *
-   * @example color="primary" // primary color
-   * @example color="#7BEB34" // hex color
-   * @example color="rgb(125, 235, 52)" // rgb color
-   * @example color="125, 235, 52" // raw rgb values
-   */
-  color: {
-    type: "enum | string",
-    values: Colors,
-    dataAttr: "color",
-    className: "color",
-    transform: parseColor
-  }
-};
-
-// src/props/margin.prop.ts
-var marginValues = [
-  "auto",
-  "inherit",
-  "-8",
-  "-6",
-  "-5",
-  "-4",
-  "-3",
-  "-2",
-  "-1",
-  "0",
-  "1",
-  "2",
-  "3",
-  "4",
-  "5",
-  "6",
-  "8"
-];
-var MarginPropDefs = {
-  /**
-   * Sets margin on all sides of the element.
-   * Supports scale, auto, inherit, custom, and responsive values.
-   *
-   * @example m="4" // 16px margin on all sides
-   * @example m="-26px" // -26px negative margin custom value
-   * @example m={{ initial: "2", md: "4", lg: "8" }} // responsive margins
-   *
-   * @link
-   * https://developer.mozilla.org/en-US/docs/Web/CSS/margin
-   */
-  m: {
-    type: "enum | string",
-    values: marginValues,
-    dataAttr: "m",
-    className: "lcs-m",
-    responsive: true
-  },
-  /**
-   * Sets margin on the top of the element.
-   * Supports scale, auto, inherit, custom, and responsive values.
-   *
-   * @example mt="4" // 16px margin on all sides
-   * @example mt="-26px" // -26px negative margin custom value
-   * @example mt={{ initial: "2", md: "4", lg: "8" }} // responsive margins
-   *
-   * @link
-   * https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top
-   */
-  mt: {
-    type: "enum | string",
-    values: marginValues,
-    dataAttr: "mt",
-    className: "lcs-mt",
-    responsive: true
-  },
-  /**
-   * Sets margin on the bottom of the element.
-   * Supports scale, auto, inherit, custom, and responsive values.
-   *
-   * @example mb="4" // 16px margin on all sides
-   * @example mb="-26px" // -26px negative margin custom value
-   * @example mb={{ initial: "2", md: "4", lg: "8" }} // responsive margins
-   *
-   * @link
-   * https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom
-   */
-  mb: {
-    type: "enum | string",
-    values: marginValues,
-    dataAttr: "mb",
-    className: "lcs-mb",
-    responsive: true
-  },
-  /**
-   * Sets margin on the left of the element.
-   * Supports scale, auto, inherit, custom, and responsive values.
-   *
-   * @example ml="4" // 16px margin on all sides
-   * @example ml="-26px" // -26px negative margin custom value
-   * @example ml={{ initial: "2", md: "4", lg: "8" }} // responsive margins
-   *
-   * @link
-   * https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left
-   */
-  ml: {
-    type: "enum | string",
-    values: marginValues,
-    dataAttr: "ml",
-    className: "lcs-ml",
-    responsive: true
-  },
-  /**
-   * Sets margin on the right of the element.
-   * Supports scale, auto, inherit, custom, and responsive values.
-   *
-   * @example mr="4" // 16px margin on all sides
-   * @example mr="-26px" // -26px negative margin custom value
-   * @example mr={{ initial: "2", md: "4", lg: "8" }} // responsive margins
-   *
-   * @link
-   * https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right
-   */
-  mr: {
-    type: "enum | string",
-    values: marginValues,
-    dataAttr: "mr",
-    className: "lcs-mr",
-    responsive: true
-  },
-  /**
-   * Sets margin on the left and right (horizontal) sides of the element.
-   * Supports scale, auto, inherit, custom, and responsive values.
-   *
-   * @example mx="4" // 16px horizontal margin
-   * @example mx="-26px" // -26px negative horizontal margin custom value
-   * @example mx={{ initial: "2", md: "4", lg: "8" }} // responsive horizontal margins
-   *
-   * @link
-   * https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left
-   * https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right
-   */
-  mx: {
-    type: "enum | string",
-    values: marginValues,
-    dataAttr: "mx",
-    className: "lcs-mx",
-    responsive: true
-  },
-  /**
-   * Sets margin on the top and bottom (vertical) sides of the element.
-   * Supports scale, auto, inherit, custom, and responsive values.
-   *
-   * @example my="4" // 16px vertical margin
-   * @example my="-26px" // -26px negative vertical margin custom value
-   * @example my={{ initial: "2", md: "4", lg: "8" }} // responsive vertical margins
-   *
-   * @link
-   * https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top
-   * https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom
-   */
-  my: {
-    type: "enum | string",
-    values: marginValues,
-    dataAttr: "my",
-    className: "lcs-my",
-    responsive: true
-  }
-};
-
-// src/props/padding.prop.ts
-var paddingValues = [
-  "inherit",
-  "0",
-  "1",
-  "2",
-  "3",
-  "4",
-  "5",
-  "6",
-  "8"
-];
-var PaddingPropDefs = {
-  /**
-   * Sets padding on all sides of the element.
-   * Supports scale, inherit, custom, and responsive values.
-   *
-   * @example p="4" // 16px padding on all sides
-   * @example p="26px" // 26px padding custom value
-   * @example p={{ initial: "2", md: "4", lg: "8" }} // responsive padding
-   *
-   * @link
-   * https://developer.mozilla.org/en-US/docs/Web/CSS/padding
-   */
-  p: {
-    type: "enum | string",
-    values: paddingValues,
-    dataAttr: "p",
-    className: "lcs-p",
-    responsive: true
-  },
-  /**
-   * Sets padding on the top of the element.
-   * Supports scale, inherit, custom, and responsive values.
-   *
-   * @example pt="4" // 16px top padding
-   * @example pt="26px" // 26px top padding custom value
-   * @example pt={{ initial: "2", md: "4", lg: "8" }} // responsive top padding
-   *
-   * @link
-   * https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top
-   */
-  pt: {
-    type: "enum | string",
-    values: paddingValues,
-    dataAttr: "pt",
-    className: "lcs-pt",
-    responsive: true
-  },
-  /**
-   * Sets padding on the bottom of the element.
-   * Supports scale, inherit, custom, and responsive values.
-   *
-   * @example pb="4" // 16px bottom padding
-   * @example pb="26px" // 26px bottom padding custom value
-   * @example pb={{ initial: "2", md: "4", lg: "8" }} // responsive bottom padding
-   *
-   * @link
-   * https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom
-   */
-  pb: {
-    type: "enum | string",
-    values: paddingValues,
-    dataAttr: "pb",
-    className: "lcs-pb",
-    responsive: true
-  },
-  /**
-   * Sets padding on the left of the element.
-   * Supports scale, inherit, custom, and responsive values.
-   *
-   * @example pl="4" // 16px left padding
-   * @example pl="26px" // 26px left padding custom value
-   * @example pl={{ initial: "2", md: "4", lg: "8" }} // responsive left padding
-   *
-   * @link
-   * https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left
-   */
-  pl: {
-    type: "enum | string",
-    values: paddingValues,
-    dataAttr: "pl",
-    className: "lcs-pl",
-    responsive: true
-  },
-  /**
-   * Sets padding on the right of the element.
-   * Supports scale, inherit, custom, and responsive values.
-   *
-   * @example pr="4" // 16px right padding
-   * @example pr="26px" // 26px right padding custom value
-   * @example pr={{ initial: "2", md: "4", lg: "8" }} // responsive right padding
-   *
-   * @link
-   * https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right
-   */
-  pr: {
-    type: "enum | string",
-    values: paddingValues,
-    dataAttr: "pr",
-    className: "lcs-pr",
-    responsive: true
-  },
-  /**
-   * Sets padding on the left and right (horizontal) sides of the element.
-   * Supports scale, inherit, custom, and responsive values.
-   *
-   * @example px="4" // 16px horizontal padding
-   * @example px="26px" // 26px horizontal padding custom value
-   * @example px={{ initial: "2", md: "4", lg: "8" }} // responsive horizontal padding
-   *
-   * @link
-   * https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left
-   * https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right
-   */
-  px: {
-    type: "enum | string",
-    values: paddingValues,
-    dataAttr: "px",
-    className: "lcs-px",
-    responsive: true
-  },
-  /**
-   * Sets padding on the top and bottom (vertical) sides of the element.
-   * Supports scale, inherit, custom, and responsive values.
-   *
-   * @example py="4" // 16px vertical padding
-   * @example py="26px" // 26px vertical padding custom value
-   * @example py={{ initial: "2", md: "4", lg: "8" }} // responsive vertical padding
-   *
-   * @link
-   * https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top
-   * https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom
-   */
-  py: {
-    type: "enum | string",
-    values: paddingValues,
-    dataAttr: "py",
-    className: "lcs-py",
-    responsive: true
-  }
-};
-
-// src/props/radius.prop.ts
-var radii = [
-  "none",
-  "xs",
-  "sm",
-  "md",
-  "lg",
-  "xl",
-  "full",
-  "inherit"
-];
-var RadiusPropDefs = {
-  /**
-   * Sets the border-radius of the element.
-   * Supports scaled, inherit, custom, and responsive values.
-   *
-   * @example radius="md" // medium border-radius
-   * @example radius="26px" // 26px border-radius custom value
-   * @example radius={{ initial: "none", lg: "full" }} // responsive border-radius
-   *
-   * @default "theme" // uses the theme's default border-radius value or none if not set
-   *
-   * @link
-   * https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius
-   */
-  radius: {
-    type: "enum | string",
-    values: radii,
-    default: "theme",
-    dataAttr: "radius",
-    className: "lcs-radius",
-    responsive: true
-  },
-  /**
-   * Sets the top border-radius of the element.
-   * Supports scaled, inherit, custom, and responsive values.
-   *
-   * @example radius-t="md" // medium border-radius
-   * @example radius-t="26px" // 26px border-radius custom value
-   * @example radius-t={{ initial: "none", lg: "full" }} // responsive border-radius
-   *
-   * @link
-   * https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-left-radius
-   * https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-right-radius
-   */
-  "radius-t": {
-    type: "enum | string",
-    values: radii,
-    dataAttr: "radius-t",
-    className: "lcs-radius-t",
-    responsive: true
-  },
-  /**
-   * Sets the right border-radius of the element.
-   * Supports scaled, inherit, custom, and responsive values.
-   *
-   * @example radius-r="md" // medium border-radius
-   * @example radius-r="26px" // 26px border-radius custom value
-   * @example radius-r={{ initial: "none", lg: "full" }} // responsive border-radius
-   *
-   * @link
-   * https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-right-radius
-   * https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-right-radius
-   */
-  "radius-r": {
-    type: "enum | string",
-    values: radii,
-    dataAttr: "radius-r",
-    className: "lcs-radius-r",
-    responsive: true
-  },
-  /**
-   * Sets the bottom border-radius of the element.
-   * Supports scaled, inherit, custom, and responsive values.
-   *
-   * @example radius-b="md" // medium border-radius
-   * @example radius-b="26px" // 26px border-radius custom value
-   * @example radius-b={{ initial: "none", lg: "full" }} // responsive border-radius
-   *
-   * @link
-   * https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-left-radius
-   * https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-right-radius
-   */
-  "radius-b": {
-    type: "enum | string",
-    values: radii,
-    dataAttr: "radius-b",
-    className: "lcs-radius-b",
-    responsive: true
-  },
-  /**
-   * Sets the left border-radius of the element.
-   * Supports scaled, inherit, custom, and responsive values.
-   *
-   * @example radius-l="md" // medium border-radius
-   * @example radius-l="26px" // 26px border-radius custom value
-   * @example radius-l={{ initial: "none", lg: "full" }} // responsive border-radius
-   *
-   * @link
-   * https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-top-radius
-   * https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-bottom-radius
-   */
-  "radius-l": {
-    type: "enum | string",
-    values: radii,
-    dataAttr: "radius-l",
-    className: "lcs-radius-l",
-    responsive: true
-  },
-  /**
-   * Sets the top-left border-radius of the element.
-   * Supports scaled, inherit, custom, and responsive values.
-   *
-   * @example radius-tl="md" // medium border-radius
-   * @example radius-tl="26px" // 26px border-radius custom value
-   * @example radius-tl={{ initial: "none", lg: "full" }} // responsive border-radius
-   *
-   * @link
-   * https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-left-radius
-   */
-  "radius-tl": {
-    type: "enum | string",
-    values: radii,
-    dataAttr: "radius-tl",
-    className: "lcs-radius-tl",
-    responsive: true
-  },
-  /**
-   * Sets the top-right border-radius of the element.
-   * Supports scaled, inherit, custom, and responsive values.
-   *
-   * @example "radius-tr"="md" // medium border-radius
-   * @example "radius-tr"="26px" // 26px border-radius custom value
-   * @example "radius-tr"={{ initial: "none", lg: "full" }} // responsive border-radius
-   *
-   * @link
-   * https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-right-radius
-   */
-  "radius-tr": {
-    type: "enum | string",
-    values: radii,
-    dataAttr: "radius-tr",
-    className: "lcs-radius-tr",
-    responsive: true
-  },
-  /**
-   * Sets the bottom-right border-radius of the element.
-   * Supports scaled, inherit, custom, and responsive values.
-   *
-   * @example "radius-br"="md" // medium border-radius
-   * @example "radius-br"="26px" // 26px border-radius custom value
-   * @example "radius-br"={{ initial: "none", lg: "full" }} // responsive border-radius
-   *
-   * @link
-   * https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-right-radius
-   */
-  "radius-br": {
-    type: "enum | string",
-    values: radii,
-    dataAttr: "radius-br",
-    className: "lcs-radius-br",
-    responsive: true
-  },
-  /**
-   * Sets the bottom-left border-radius of the element.
-   * Supports scaled, inherit, custom, and responsive values.
-   *
-   * @example "radius-bl"="md" // medium border-radius
-   * @example "radius-bl"="26px" // 26px border-radius custom value
-   * @example "radius-bl"={{ initial: "none", lg: "full" }} // responsive border-radius
-   *
-   * @link
-   * https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-left-radius
-   */
-  "radius-bl": {
-    type: "enum | string",
-    values: radii,
-    dataAttr: "radius-bl",
-    className: "lcs-radius-bl",
-    responsive: true
-  }
-};
-
-// src/props/roundness.prop.ts
-var roundness = ["1", "2", "3", "4", "5", "6", "inherit"];
-var RoundnessPropDef = {
-  /**
-   * Sets the roundness multiplier for the element's radius.
-   * Supports scaled and inherit values.
-   *
-   * @example roundness="4" // 8px base roundness
-   * @example roundness="inherit" // inherits roundness from parent
-   *
-   * @default "theme" // uses the theme's default roundness value or none if not set
-   */
-  roundness: {
-    type: "enum",
-    values: roundness,
-    default: "theme",
-    dataAttr: "roundness"
-  }
-};
-
-// src/props/size.prop.ts
-var Sizes = ["xs", "sm", "md", "lg", "xl"];
-var SizePropDef = {
-  /**
-   * Sets the size of the component.
-   *
-   * @example size="md" // medium sized component
-   */
-  size: {
-    type: "enum | string",
-    values: Sizes,
-    dataAttr: "size",
-    className: "size"
-  }
-};
-
-// src/props/spacing.prop.ts
-var spacingValues = ["xs", "sm", "md", "lg", "xl", "inherit"];
-var SpacingPropDef = {
-  /**
-   * Sets the spacing scale for the component.
-   * This multiplier affects various layout properties such as margin, padding, and gap values.
-   *
-   * @example spacing="md" // medium spacing scale (1)
-   * @example spacing={{ initial: "sm", lg: "xl" }} // responsive spacing
-   *
-   * @default "theme" // uses the theme's default spacing value or none if not set
-   */
-  spacing: {
-    type: "enum",
-    values: spacingValues,
-    dataAttr: "spacing",
-    default: "theme",
-    responsive: true
-  }
-};
-
-// src/utils/use-controllable-state.ts
-import * as React4 from "react";
-function useControllableState({
-  value,
-  defaultValue,
-  onChange
-}) {
-  const [state, setState] = React4.useState(defaultValue);
-  const isControlled = value !== void 0;
-  const current = isControlled ? value : state;
-  const set = React4.useCallback(
-    (value2) => {
-      if (!isControlled) setState(value2);
-      onChange?.(value2);
-    },
-    [isControlled, onChange]
-  );
-  return [current, set];
-}
-
-// src/components/accordion/root/accordion-root.props.ts
-var AccordionVariants = ["solid", "outlined", "muted"];
-var AccordionRootPropsDefs = {
-  /**
-   * Sets the variant style of the accordion ("solid", "outlined", or "muted").
-   */
-  variant: {
-    type: "enum",
-    values: AccordionVariants,
-    dataAttr: "variant"
-  },
-  /**
-   * Allows multiple accordion items to be expanded simultaneously when set to true.
-   */
-  multiple: {
-    type: "boolean"
-  },
-  /**
-   * The value of the accordion.
-   */
-  value: {
-    type: "value | array"
-  },
-  /**
-   * Callback fired when the value of the accordion changes.
-   */
-  onValueChange: {
-    type: "function"
-  }
-};
-
-// src/components/accordion/root/accordion-root.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
-var ALLOWED_CHILDREN2 = [AccordionItem.displayName];
-var AccordionRoot = (props) => {
-  const {
-    variant,
-    multiple,
-    size,
-    value: propValue,
-    onValueChange,
-    className,
-    dataAttrs,
-    ...rest
-  } = getComponentProps(props, AccordionRootPropsDefs, SizePropDef);
-  const [value, setValue] = useControllableState({
-    value: propValue,
-    defaultValue: propValue ?? null,
-    onChange: onValueChange
-  });
-  const validChildren = filterChildren(props.children, ALLOWED_CHILDREN2, {
-    parentDisplayName: AccordionRoot.displayName
-  });
-  const itemsRef = useRef(/* @__PURE__ */ new Map());
-  const itemValues = useRef([]);
-  const contextValue = useMemo2(
-    () => ({
-      variant,
-      multiple,
-      value,
-      setValue,
-      onValueChange,
-      itemsRef,
-      itemValues
-    }),
-    [variant, multiple, value, setValue, onValueChange]
-  );
-  return /* @__PURE__ */ jsx4(AccordionContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx4(
-    "div",
-    {
-      className: clsx5("accordion-root", className),
-      ...dataAttrs,
-      ...rest,
-      children: validChildren.map((child, index) => /* @__PURE__ */ jsx4(
-        AccordionItem,
-        {
-          value: child.props.value ?? String(index),
-          ...child.props,
-          children: child.props.children
-        },
-        index
-      ))
-    }
-  ) });
-};
-AccordionRoot.displayName = "Accordion";
-
-// src/components/accordion/accordion.tsx
-var Accordion = Object.assign(AccordionRoot, {
-  Root: AccordionRoot,
-  Item: AccordionItem,
-  Header: AccordionHeader,
-  Content: AccordionContent
-});
-
-// src/components/badge/badge.tsx
-import clsx6 from "clsx";
-
-// src/components/badge/badge.props.ts
-var BadgeVariants = ["solid", "outlined", "muted", "clear"];
-var BadgeRootPropsDefs = {
-  /**
-   * Sets the variant style of the badge ("solid", "outlined", "muted", or "clear").
-   */
-  variant: {
-    type: "enum",
-    values: BadgeVariants,
-    dataAttr: "variant"
-  }
-};
-
-// src/components/badge/badge.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
-var Badge = (props) => {
-  const { color, variant, className, dataAttrs, ...rest } = getComponentProps(
-    props,
-    BadgeRootPropsDefs,
-    MarginPropDefs,
-    PaddingPropDefs,
-    RadiusPropDefs,
-    SizePropDef
-  );
-  return /* @__PURE__ */ jsx5(
-    "div",
-    {
-      className: clsx6("badge", className),
-      "data-color": color ?? true,
-      "data-variant": variant,
-      ...dataAttrs,
-      ...rest,
-      children: props.children
-    }
-  );
-};
-
-// src/components/box/box.tsx
-import clsx7 from "clsx";
-import * as React5 from "react";
-
-// src/components/box/box.props.ts
-var BoxPropsDefs = {
-  /**
-   * Defines wether the Box is rendered as a **div** or **span**.
-   *
-   * @example
-   * as="div"
-   * as="span"
-   */
-  // as: {
-  //   type: "enum",
-  //   values: boxAs,
-  //   default: "div",
-  // } satisfies PropDef<(typeof boxAs)[number]>,
-};
-
-// src/components/box/box.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
-var Box = React5.forwardRef((props, ref) => {
-  const { className, dataAttrs, children, ...rest } = getComponentProps(
-    props,
-    BoxPropsDefs,
-    MarginPropDefs,
-    PaddingPropDefs,
-    SpacingPropDef,
-    RadiusPropDefs,
-    RoundnessPropDef
-  );
-  return /* @__PURE__ */ jsx6(
-    "div",
-    {
-      ref,
-      ...dataAttrs,
-      className: clsx7("lcs-box", className),
-      ...rest,
-      children
-    }
-  );
-});
-Box.displayName = "Box";
-
-// src/components/button/button.tsx
-import clsx8 from "clsx";
-import { useState as useState2 } from "react";
-
-// src/components/button/button.props.ts
-var ButtonVariants = ["solid", "outlined", "muted", "clear"];
-var ButtonRootPropsDefs = {
-  /**
-   * Sets the variant style of the button ("solid", "outlined", "muted", or "clear").
-   */
-  variant: {
-    type: "enum",
-    values: ButtonVariants,
-    dataAttr: "variant"
-  },
-  /**
-   * Enables high contrast mode for better visibility.
-   * @default undefined
-   */
-  highContrast: {
-    type: "boolean",
-    dataAttr: "high-contrast"
-  },
-  /**
-   * Disables the button component.
-   * @default undefined
-   */
-  disabled: {
-    type: "boolean",
-    dataAttr: "disabled"
-  },
-  /**
-   * Makes the button read-only.
-   * @default undefined
-   */
-  readonly: {
-    type: "boolean",
-    dataAttr: "readonly"
-  }
-};
-
-// src/components/button/button.tsx
-import { jsx as jsx7 } from "react/jsx-runtime";
-var Button = (props) => {
-  const {
-    color,
-    variant,
-    className,
-    dataAttrs,
-    disabled,
-    highContrast,
-    readonly,
-    ...rest
-  } = getComponentProps(
-    props,
-    ButtonRootPropsDefs,
-    ColorPropDef,
-    MarginPropDefs,
-    PaddingPropDefs,
-    RadiusPropDefs,
-    SizePropDef
-  );
-  const [hovered, setHovered] = useState2(false);
-  return /* @__PURE__ */ jsx7(
-    "button",
-    {
-      className: clsx8("button", className),
-      "data-color": color ?? true,
-      "data-variant": variant,
-      "data-disabled": disabled ? true : void 0,
-      "data-high-contrast": highContrast ? true : void 0,
-      "data-readonly": readonly ? true : void 0,
-      "data-hovered": hovered ? true : void 0,
-      ...dataAttrs,
-      disabled: disabled || readonly,
-      onMouseEnter: () => setHovered(true),
-      onMouseLeave: () => setHovered(false),
-      ...rest,
-      children: /* @__PURE__ */ jsx7("span", { children: props.children })
-    }
-  );
-};
-
-// src/components/checkbox/indicator/checkbox-indicator.tsx
-import clsx9 from "clsx";
-import React7 from "react";
-
-// src/icons/check-mark.icon.tsx
-import { jsx as jsx8 } from "react/jsx-runtime";
-var CheckMark = ({ color = "currentColor" }) => {
-  return /* @__PURE__ */ jsx8(
-    "svg",
-    {
-      width: "64",
-      height: "64",
-      viewBox: "0 0 15 15",
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg",
-      children: /* @__PURE__ */ jsx8(
-        "path",
-        {
-          d: "M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z",
-          fill: colorMap[color],
-          fillRule: "evenodd",
-          clipRule: "evenodd"
-        }
-      )
-    }
-  );
-};
-
-// src/icons/minus.icon.tsx
-import { jsx as jsx9 } from "react/jsx-runtime";
-var Minus = ({ color = "currentColor" }) => {
-  return /* @__PURE__ */ jsx9(
-    "svg",
-    {
-      width: "64",
-      height: "64",
-      viewBox: "0 0 15 15",
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg",
-      children: /* @__PURE__ */ jsx9(
-        "path",
-        {
-          d: "M3.5 7.5C3.5 7.08579 3.83579 6.75 4.25 6.75H10.75C11.1642 6.75 11.5 7.08579 11.5 7.5C11.5 7.91421 11.1642 8.25 10.75 8.25H4.25C3.83579 8.25 3.5 7.91421 3.5 7.5Z",
-          fill: colorMap[color],
-          fillRule: "evenodd",
-          clipRule: "evenodd"
-        }
-      )
-    }
-  );
-};
-
-// src/components/checkbox/checkbox-context.ts
-import React6 from "react";
-var CheckboxContext = React6.createContext(
-  null
-);
-function useCheckboxContext() {
-  const context = React6.useContext(CheckboxContext);
-  if (!context) {
-    throw new Error("Checkbox components must be used within a Checkbox.Root");
-  }
-  return context;
-}
-
-// src/components/checkbox/root/checkbox-root.props.ts
-var CheckboxVariants = ["solid", "outlined", "muted"];
-var CheckboxRootPropsDefs = {
-  /**
-   * Sets the variant style of the checkbox ("solid" or "outlined").
-   */
-  variant: {
-    type: "enum",
-    values: CheckboxVariants,
-    dataAttr: "variant"
-  },
-  /**
-   * Sets the checked state of the checkbox.
-   *
-   * When using an uncontrolled checkbox, use `defaultChecked` instead.
-   * @default undefined
-   */
-  checked: {
-    type: "boolean",
-    dataAttr: "checked"
-  },
-  /**
-   * Sets the indeterminate state of the checkbox.
-   * @default undefined
-   */
-  indeterminate: {
-    type: "boolean",
-    dataAttr: "indeterminate"
-  },
-  /**
-   * Enables high contrast mode for better visibility.
-   * @default undefined
-   */
-  highContrast: {
-    type: "boolean",
-    dataAttr: "high-contrast"
-  },
-  /**
-   * The value of the checkbox (checked state).
-   */
-  value: {
-    type: "boolean"
-  },
-  /**
-   * Sets the default checked state of the checkbox.
-   * @default undefined
-   */
-  defaultChecked: {
-    type: "boolean"
-  },
-  /**
-   * Disables the checkbox component.
-   * @default undefined
-   */
-  disabled: {
-    type: "boolean",
-    dataAttr: "disabled"
-  },
-  /**
-   * Makes the checkbox read-only.
-   * @default undefined
-   */
-  readonly: {
-    type: "boolean",
-    dataAttr: "readonly"
-  },
-  /**
-   * Marks the checkbox as required.
-   * @default undefined
-   */
-  required: {
-    type: "boolean",
-    dataAttr: "required"
-  },
-  /**
-   * Sets the name attribute of the checkbox input for form control.
-   * @default undefined
-   */
-  name: {
-    type: "string"
-  },
-  /**
-   * Callback fired when the checked state changes.
-   *
-   * @param value - The new checked state.
-   */
-  onCheckedChange: {
-    type: "function"
-  }
-};
-
-// src/components/checkbox/indicator/checkbox-indicator.props.ts
-var CheckboxIndicatorPropDefs = {
-  /**
-   * Sets the variant style of the checkbox ("solid" or "outlined").
-   */
-  variant: {
-    type: "enum",
-    values: CheckboxVariants,
-    dataAttr: "variant"
-  }
-};
-
-// src/components/checkbox/indicator/checkbox-indicator.tsx
-import { jsx as jsx10, jsxs as jsxs3 } from "react/jsx-runtime";
-var CheckboxIndicator = React7.forwardRef((props, ref) => {
-  const {
-    value,
-    setValue,
-    hovered,
-    color,
-    disabled,
-    readonly,
-    highContrast,
-    indeterminate,
-    variant: contextVariant
-  } = useCheckboxContext();
-  const { size, variant, className, style, dataAttrs } = getComponentProps(
-    props,
-    CheckboxIndicatorPropDefs,
-    SizePropDef
-  );
-  const indicatorVariant = variant || contextVariant;
-  const handleKeyDown = (event) => {
-    if (disabled || readonly) return;
-    if (event.key === " " || event.key === "Enter") {
-      event.preventDefault();
-      setValue(!value);
-    }
-  };
-  const indicatorProps = {
-    ...value && { "data-checked": true },
-    ...disabled && { "data-disabled": true },
-    ...readonly && { "data-readonly": true },
-    ...highContrast && { "data-high-contrast": true },
-    ...indeterminate && { "data-indeterminate": true },
-    ...(variant || contextVariant) && { "data-variant": indicatorVariant }
-  };
-  return /* @__PURE__ */ jsxs3(
-    "span",
-    {
-      ref,
-      style,
-      role: "checkbox",
-      "data-color": color,
-      "data-hovered": hovered,
-      "aria-disabled": disabled,
-      "aria-readonly": readonly,
-      "aria-checked": indeterminate ? "mixed" : value,
-      onKeyDown: handleKeyDown,
-      tabIndex: disabled || readonly ? -1 : 0,
-      className: clsx9("checkbox-indicator", className),
-      ...indicatorProps,
-      ...dataAttrs,
-      children: [
-        indeterminate && !value && /* @__PURE__ */ jsx10(
-          Minus,
-          {
-            color: highContrast && indicatorVariant === "solid" ? "black" : "white"
-          }
-        ),
-        value && /* @__PURE__ */ jsx10(
-          CheckMark,
-          {
-            color: highContrast && indicatorVariant === "solid" ? "black" : "white"
-          }
-        )
-      ]
-    }
-  );
-});
-CheckboxIndicator.displayName = "Checkbox.Indicator";
-
-// src/components/checkbox/label/checkbox-label.tsx
-import clsx11 from "clsx";
-import React9 from "react";
-
-// src/components/text/text.tsx
-import clsx10 from "clsx";
-import React8 from "react";
-
-// src/components/text/text.props.ts
-var TextPropsDefs = {
-  disabled: {
-    type: "boolean",
-    default: false,
-    dataAttr: "disabled"
-  }
-  /**
-   * Defines wether the Text is rendered as a **p**, **span** or **div**.
-   *
-   * @example
-   * as="p"
-   * as="span"
-   * as="div"
-   */
-  // as: {
-  //   type: "enum",
-  //   values: textAs,
-  //   default: "p",
-  // } satisfies PropDef<(typeof textAs)[number]>,
-};
-
-// src/components/text/text.tsx
-import { jsx as jsx11 } from "react/jsx-runtime";
-var Text = React8.forwardRef(
-  (props, ref) => {
-    const { className, dataAttrs, children, ...rest } = getComponentProps(
-      props,
-      TextPropsDefs,
-      MarginPropDefs,
-      PaddingPropDefs,
-      ColorPropDef
-    );
-    return /* @__PURE__ */ jsx11("p", { ref, ...dataAttrs, className: clsx10("text", className), ...rest, children });
-  }
-);
-
-// src/components/checkbox/label/checkbox-label.props.ts
-var labelPositions = ["top", "left", "right", "bottom"];
-var CheckboxLabelPropDefs = {
-  /**
-   * Sets the position of the label relative to the checkbox.
-   *
-   * @example position="left" // positions the label to the left of the checkbox
-   * @example position="top" // positions the label above the checkbox
-   */
-  position: {
-    type: "enum",
-    values: labelPositions,
-    dataAttr: "position"
-  }
-};
-
-// src/components/checkbox/label/checkbox-label.tsx
-import { jsx as jsx12 } from "react/jsx-runtime";
-var CheckboxLabel = React9.forwardRef(
-  (props, ref) => {
-    const context = useCheckboxContext();
-    const { className, children, position } = getComponentProps(
-      props,
-      CheckboxLabelPropDefs
-    );
-    React9.useLayoutEffect(() => {
-      context.setLabelPosition?.(position ?? "right");
-    }, [position, context.setLabelPosition]);
-    return /* @__PURE__ */ jsx12(
-      "label",
-      {
-        ref,
-        htmlFor: context.labelId,
-        className: clsx11("checkbox-label", className),
-        ...position && { [`data-position`]: position },
-        children: /* @__PURE__ */ jsx12(Text, { children })
-      }
-    );
-  }
-);
-CheckboxLabel.displayName = "Checkbox.Label";
-
-// src/components/checkbox/root/checkbox-root.tsx
-import clsx12 from "clsx";
-import {
-  isValidElement as isValidElement2,
-  useId,
-  useMemo as useMemo3,
-  useState as useState3
-} from "react";
-import { jsx as jsx13, jsxs as jsxs4 } from "react/jsx-runtime";
-var ALLOWED_CHILDREN3 = [
-  CheckboxLabel.displayName,
-  CheckboxIndicator.displayName
-];
-var CheckboxRoot = (props) => {
-  const {
-    name,
-    size,
-    color,
-    variant,
-    checked,
-    dataAttrs,
-    onCheckedChange,
-    value: valueProp,
-    disabled = false,
-    required = false,
-    readonly = false,
-    highContrast = false,
-    indeterminate = false,
-    defaultChecked = false
-  } = getComponentProps(
-    props,
-    CheckboxRootPropsDefs,
-    AlignPropDef,
-    MarginPropDefs,
-    SizePropDef
-  );
-  const [value, setValue] = useControllableState({
-    value: valueProp || checked,
-    defaultValue: defaultChecked,
-    onChange: onCheckedChange
-  });
-  const labelId = useId();
-  const [labelPosition, setLabelPosition] = useState3("right");
-  const [hovered, setHovered] = useState3(false);
-  const validChildren = filterChildren(props.children, ALLOWED_CHILDREN3, {
-    parentDisplayName: CheckboxRoot.displayName
-  });
-  const { indicator, otherChildren } = useMemo3(() => {
-    const indicatorIndex = validChildren.findIndex(
-      (child) => isValidElement2(child) && child.type.displayName === CheckboxIndicator.displayName
-    );
-    if (indicatorIndex > -1) {
-      return {
-        indicator: validChildren[indicatorIndex],
-        otherChildren: validChildren.filter((_, i) => i !== indicatorIndex)
-      };
-    }
-    return {
-      indicator: /* @__PURE__ */ jsx13(CheckboxIndicator, { size }),
-      otherChildren: validChildren
-    };
-  }, [validChildren, size]);
-  const contextValue = useMemo3(
-    () => ({
-      name,
-      value,
-      color,
-      setValue,
-      onCheckedChange,
-      labelId,
-      labelPosition,
-      setLabelPosition,
-      variant,
-      hovered,
-      setHovered,
-      disabled,
-      readonly,
-      required,
-      indeterminate,
-      highContrast
-    }),
-    [
-      name,
-      value,
-      color,
-      onCheckedChange,
-      setValue,
-      labelId,
-      labelPosition,
-      hovered,
-      disabled,
-      readonly,
-      required,
-      indeterminate,
-      highContrast
-    ]
-  );
-  const handleClick = () => {
-    if (disabled || readonly) return;
-    setValue(!value);
-  };
-  return /* @__PURE__ */ jsx13(CheckboxContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs4(
-    "div",
-    {
-      className: clsx12("checkbox-root", props.className),
-      onClick: () => handleClick(),
-      onMouseEnter: () => setHovered(true),
-      onMouseLeave: () => setHovered(false),
-      ...dataAttrs,
-      children: [
-        indicator,
-        otherChildren,
-        name && /* @__PURE__ */ jsx13("input", { type: "hidden", name, value: String(value) })
-      ]
-    }
-  ) });
-};
-CheckboxRoot.displayName = "Checkbox";
-
-// src/components/checkbox/checkbox.tsx
-var Checkbox = Object.assign(CheckboxRoot, {
-  Root: CheckboxRoot,
-  Label: CheckboxLabel,
-  Indicator: CheckboxIndicator
-});
-
-// src/components/container/container.tsx
-import clsx13 from "clsx";
-import * as React11 from "react";
-import { jsx as jsx14 } from "react/jsx-runtime";
-var Container = React11.forwardRef((props, ref) => {
-  const { className, children, direction, ...rest } = props;
-  return /* @__PURE__ */ jsx14(
-    "div",
-    {
-      ref,
-      "data-direction": direction,
-      className: clsx13(className, "lcs-container"),
-      ...rest,
-      children
-    }
-  );
-});
-Container.displayName = "Container";
-
-// src/components/panel/panel.tsx
-import clsx14 from "clsx";
-import * as React12 from "react";
-
-// src/components/panel/panel.props.ts
-var PanelVariants = ["solid", "outlined", "muted"];
-var PanelPropsDefs = {
-  /**
-   * Sets the variant style of the panel ("solid", "outlined", or "muted").
-   */
-  variant: {
-    type: "enum",
-    values: PanelVariants,
-    dataAttr: "variant"
-  },
-  /**
-   * The blur amount applied to the panel.
-   *
-   * @example blur="4px" // Sets the backdrop blur to 4 pixels
-   * @default "2px"
-   */
-  blur: {
-    type: "string",
-    default: "2px",
-    cssProperty: "--panel-blur"
-  }
-};
-
-// src/components/panel/panel.tsx
-import { jsx as jsx15 } from "react/jsx-runtime";
-var Panel = React12.forwardRef((props, ref) => {
-  const { className, dataAttrs, children, ...rest } = getComponentProps(
-    props,
-    PanelPropsDefs,
-    MarginPropDefs,
-    PaddingPropDefs,
-    SpacingPropDef,
-    RadiusPropDefs,
-    RoundnessPropDef,
-    ColorPropDef
-  );
-  return /* @__PURE__ */ jsx15(
-    "div",
-    {
-      ref,
-      className: clsx14("panel", className),
-      ...dataAttrs,
-      ...rest,
-      children
-    }
-  );
-});
-Panel.displayName = "Panel";
-
-// src/components/portal/backdrop/portal-backdrop.tsx
-import clsx15 from "clsx";
-import * as React14 from "react";
-
-// src/components/portal/portal-context.tsx
-import * as React13 from "react";
-var PortalContext = React13.createContext(
-  void 0
-);
-function usePortalContext() {
-  const context = React13.useContext(PortalContext);
-  if (!context) {
-    throw new Error("`usePortalContext` must be used within a `Portal.Root`");
-  }
-  return context;
-}
-
-// src/components/portal/backdrop/portal-backdrop.props.ts
-var variants = ["clear", "shadow", "blurred"];
-var PortalBackdropPropsDefs = {
-  /**
-   * The visual style variant of the backdrop.
-   *
-   * @example variant="blurred" // Applies a blurred effect to the backdrop
-   * @default "clear"
-   */
-  variant: {
-    type: "enum",
-    values: variants,
-    default: "clear",
-    dataAttr: "variant"
-  },
-  /**
-   * The opacity level of the backdrop.
-   *
-   * @example opacity="0.5" // Sets the backdrop opacity to 50%
-   * @default "0.3"
-   */
-  opacity: {
-    type: "string",
-    default: "0.3",
-    cssProperty: "--backdrop-opacity"
-  },
-  /**
-   * The blur amount applied to the backdrop when the "blurred" variant is used.
-   *
-   * @example blur="4px" // Sets the backdrop blur to 4 pixels
-   * @default "2px"
-   */
-  blur: {
-    type: "string",
-    default: "2px",
-    cssProperty: "--backdrop-blur"
-  }
-};
-
-// src/components/portal/backdrop/portal-backdrop.tsx
-import { jsx as jsx16 } from "react/jsx-runtime";
-var PortalBackdrop = React14.forwardRef(
-  (props, ref) => {
-    const context = usePortalContext();
-    const { className, dataAttrs, ...rest } = getComponentProps(
-      props,
-      PortalBackdropPropsDefs
-    );
-    if (!context.open) return null;
-    return /* @__PURE__ */ jsx16(
-      "div",
-      {
-        ref,
-        className: clsx15("portal-backdrop", className),
-        ...dataAttrs,
-        ...rest
-      }
-    );
-  }
-);
-PortalBackdrop.displayName = "Portal.Backdrop";
-
-// src/components/portal/content/portal-content.tsx
-import clsx16 from "clsx";
-import * as React17 from "react";
-import ReactDOM from "react-dom";
-
-// src/components/theme/theme-context.tsx
-import * as React15 from "react";
-var ThemeContext = React15.createContext(
-  void 0
-);
-function useTheme() {
-  const context = React15.useContext(ThemeContext);
-  if (!context) {
-    throw new Error("`useTheme` must be used within a `Theme`");
-  }
-  return context;
-}
-
-// src/components/portal/utils/use-anchor-position.ts
-import * as React16 from "react";
-function useAnchorPosition({
-  anchorRef,
-  contentRef,
-  side = "bottom",
-  align = "center",
-  sideOffset = 0,
-  alignOffset = 0,
-  enabled = true
-}) {
-  const [position, setPosition] = React16.useState(null);
-  const [, _forceUpdate] = React16.useReducer((x) => x + 1, 0);
-  const updatePosition = React16.useCallback(() => {
-    const anchor = anchorRef.current;
-    const content = contentRef.current;
-    if (!anchor || !content || !enabled) {
-      setPosition(null);
-      return;
-    }
-    const anchorRect = anchor.getBoundingClientRect();
-    const contentRect = content.getBoundingClientRect();
-    let top = 0;
-    let left = 0;
-    switch (side) {
-      case "top":
-        top = anchorRect.top - contentRect.height - sideOffset;
-        break;
-      case "bottom":
-        top = anchorRect.bottom + sideOffset;
-        break;
-      case "left":
-        left = anchorRect.left - contentRect.width - sideOffset;
-        break;
-      case "right":
-        left = anchorRect.right + sideOffset;
-        break;
-    }
-    if (side === "top" || side === "bottom") {
-      switch (align) {
-        case "start":
-          left = anchorRect.left + alignOffset;
-          break;
-        case "center":
-          left = anchorRect.left + (anchorRect.width - contentRect.width) / 2 + alignOffset;
-          break;
-        case "end":
-          left = anchorRect.right - contentRect.width + alignOffset;
-          break;
-      }
-    } else {
-      switch (align) {
-        case "start":
-          top = anchorRect.top + alignOffset;
-          break;
-        case "center":
-          top = anchorRect.top + (anchorRect.height - contentRect.height) / 2 + alignOffset;
-          break;
-        case "end":
-          top = anchorRect.bottom - contentRect.height + alignOffset;
-          break;
-      }
-    }
-    top += window.scrollY;
-    left += window.scrollX;
-    const viewportWidth = window.innerWidth;
-    const viewportHeight = window.innerHeight;
-    left = Math.max(0, Math.min(left, viewportWidth - contentRect.width));
-    top = Math.max(
-      0,
-      Math.min(top, viewportHeight - contentRect.height + window.scrollY)
-    );
-    setPosition({ top, left });
-  }, [anchorRef, contentRef, side, align, sideOffset, alignOffset, enabled]);
-  React16.useEffect(() => {
-    if (!enabled) {
-      setPosition(null);
-      return;
-    }
-    let attempts = 0;
-    const maxAttempts = 10;
-    const tryUpdate = () => {
-      attempts++;
-      if (anchorRef.current && contentRef.current) {
-        updatePosition();
-      } else if (attempts < maxAttempts) {
-        requestAnimationFrame(tryUpdate);
-      }
-    };
-    requestAnimationFrame(tryUpdate);
-    window.addEventListener("scroll", updatePosition, true);
-    window.addEventListener("resize", updatePosition);
-    return () => {
-      window.removeEventListener("scroll", updatePosition, true);
-      window.removeEventListener("resize", updatePosition);
-    };
-  }, [enabled, updatePosition, anchorRef, contentRef]);
-  return position;
-}
-
-// src/components/portal/content/portal-content.props.ts
-var positions = [
-  "tl",
-  "top",
-  "tr",
-  "left",
-  "center",
-  "right",
-  "bl",
-  "bottom",
-  "br"
-];
-var anchorSides = ["top", "right", "bottom", "left"];
-var PortalContentPropsDefs = {
-  /**
-   * The position of the portal content relative to the screen if no anchor is used.
-   *
-   * @example position="bl" // Portal renders at bottom-left of the screen
-   */
-  position: {
-    type: "enum",
-    values: positions,
-    default: "center",
-    dataAttr: "position"
-  },
-  /**
-   * Whether the portal content is anchored to an element.
-   *
-   * When anchored, the portal content is positioned relative to the trigger element unless a custom anchorRef is provided.
-   */
-  anchored: {
-    type: "boolean",
-    dataAttr: "anchored"
-  },
-  /**
-   * The side of the anchor element to position the portal content on.
-   *
-   * @default "bottom"
-   */
-  side: {
-    type: "enum",
-    values: anchorSides,
-    default: "bottom"
-  },
-  /** Offset in pixels from the anchor element along the side axis. */
-  sideOffset: {
-    type: "string"
-  },
-  /** Offset in pixels along the alignment axis. */
-  alignOffset: {
-    type: "string"
-  }
-};
-
-// src/components/portal/content/portal-content.tsx
-import { jsx as jsx17 } from "react/jsx-runtime";
-var PortalContent = React17.forwardRef(
-  (props, ref) => {
-    const portalContext = usePortalContext();
-    const themeContext = React17.useContext(ThemeContext);
-    const contentRef = React17.useRef(null);
-    const {
-      side = "bottom",
-      align = "center",
-      sideOffset = "0",
-      alignOffset = "0",
-      anchored = false,
-      children,
-      className,
-      dataAttrs,
-      style
-    } = getComponentProps(props, PortalContentPropsDefs, AlignPropDef);
-    const anchorRef = portalContext.anchorRef ?? portalContext.triggerRef;
-    const anchorPosition = useAnchorPosition({
-      anchorRef,
-      contentRef,
-      side,
-      align,
-      sideOffset: parseInt(sideOffset, 10) || 0,
-      alignOffset: parseInt(alignOffset, 10) || 0,
-      enabled: anchored && portalContext.open
-    });
-    const setRefs = React17.useCallback(
-      (node) => {
-        contentRef.current = node;
-        if (typeof ref === "function") {
-          ref(node);
-        } else if (ref) {
-          ref.current = node;
-        }
-      },
-      [ref]
-    );
-    React17.useEffect(() => {
-      if (!portalContext.open) return;
-      function onKeyDown(e) {
-        if (e.key === "Escape") {
-          portalContext.onOpenChange?.(false);
-        }
-      }
-      document.addEventListener("keydown", onKeyDown);
-      return () => {
-        document.removeEventListener("keydown", onKeyDown);
-      };
-    }, [portalContext.open, portalContext.onOpenChange]);
-    React17.useEffect(() => {
-      if (!portalContext.open || !anchored) return;
-      function onClickOutside(e) {
-        const target = e.target;
-        const content2 = contentRef.current;
-        const trigger = (portalContext.anchorRef ?? portalContext.triggerRef)?.current;
-        if (content2?.contains(target) || trigger?.contains(target)) {
-          return;
-        }
-        portalContext.onOpenChange?.(false);
-      }
-      const timeoutId = setTimeout(() => {
-        document.addEventListener("click", onClickOutside);
-      }, 0);
-      return () => {
-        clearTimeout(timeoutId);
-        document.removeEventListener("click", onClickOutside);
-      };
-    }, [
-      portalContext.open,
-      portalContext.onOpenChange,
-      portalContext.anchorRef,
-      portalContext.triggerRef,
-      anchored
-    ]);
-    const container = portalContext.open && globalThis?.document?.body;
-    if (!container) return null;
-    const combinedStyle = {
-      ...style,
-      ...anchored && anchorPosition ? {
-        position: "absolute",
-        top: anchorPosition.top,
-        left: anchorPosition.left
-      } : {}
-    };
-    const portalContent = /* @__PURE__ */ jsx17(
-      "div",
-      {
-        ref: setRefs,
-        className: clsx16("portal", className),
-        "data-appearance": themeContext?.appearance,
-        "data-radius": themeContext?.radius,
-        "data-roundness": themeContext?.roundness ?? "theme",
-        "data-spacing": themeContext?.spacing ?? "theme",
-        "data-theme-radius": themeContext?.radius,
-        "data-theme-roundness": themeContext?.roundness,
-        "data-theme-spacing": themeContext?.spacing,
-        onClick: anchored ? void 0 : () => portalContext.onOpenChange?.(false),
-        style: combinedStyle,
-        ...dataAttrs,
-        children: /* @__PURE__ */ jsx17(
-          "div",
-          {
-            className: "portal-content",
-            onClick: (e) => e.stopPropagation(),
-            children
-          }
-        )
-      }
-    );
-    const content = themeContext ? /* @__PURE__ */ jsx17(ThemeContext.Provider, { value: themeContext, children: portalContent }) : portalContent;
-    return ReactDOM.createPortal(content, container);
-  }
-);
-PortalContent.displayName = "Portal.Content";
-
-// src/components/portal/root/portal-root.tsx
-import * as React19 from "react";
-
-// src/components/portal/trigger/portal-trigger.tsx
-import * as React18 from "react";
-import { jsx as jsx18 } from "react/jsx-runtime";
-var PortalTrigger = React18.forwardRef(
-  ({ children, asChild, onClick, ...props }, ref) => {
-    const context = usePortalContext();
-    const internalRef = React18.useRef(null);
-    React18.useEffect(() => {
-      if (internalRef.current) {
-        context.triggerRef.current = internalRef.current;
-      }
-    }, [context.triggerRef]);
-    const handleClick = (event) => {
-      context.onOpenChange?.(!context.open);
-      onClick?.(event);
-    };
-    const setRefs = React18.useCallback(
-      (node) => {
-        internalRef.current = node;
-        if (typeof ref === "function") {
-          ref(node);
-        } else if (ref) {
-          ref.current = node;
-        }
-        context.triggerRef.current = node;
-      },
-      [ref, context.triggerRef]
-    );
-    if (asChild && React18.isValidElement(children)) {
-      return React18.cloneElement(children, {
-        ref: setRefs,
-        onClick: handleClick,
-        ...props
-      });
-    }
-    return /* @__PURE__ */ jsx18(
-      "button",
-      {
-        ref: setRefs,
-        type: "button",
-        onClick: handleClick,
-        "aria-expanded": context.open,
-        "aria-haspopup": "dialog",
-        ...props,
-        children
-      }
-    );
-  }
-);
-PortalTrigger.displayName = "Portal.Trigger";
-
-// src/components/portal/root/portal-root.props.ts
-var PortalRootPropsDefs = {
-  /** Whether the portal is open. */
-  open: {
-    type: "boolean",
-    default: false
-  },
-  /** Callback fired when the open state changes. */
-  onOpenChange: {
-    type: "function"
-  },
-  /** Whether the portal is open by default (uncontrolled). */
-  defaultOpen: {
-    type: "boolean",
-    default: false
-  },
-  /** Custom anchor element ref. If not provided, the trigger is used as anchor. */
-  anchorRef: {
-    type: "reactNode"
-  }
-};
-
-// src/components/portal/root/portal-root.tsx
-import { jsx as jsx19 } from "react/jsx-runtime";
-var ALLOWED_CHILDREN4 = [
-  PortalTrigger.displayName,
-  PortalBackdrop.displayName,
-  PortalContent.displayName
-];
-var PortalRoot = (props) => {
-  const {
-    defaultOpen = false,
-    open: portalOpen,
-    onOpenChange,
-    anchorRef,
-    children
-  } = getComponentProps(props, PortalRootPropsDefs);
-  const [open, setOpen] = useControllableState({
-    value: portalOpen,
-    defaultValue: defaultOpen,
-    onChange: onOpenChange
-  });
-  const triggerRef = React19.useRef(null);
-  const value = React19.useMemo(
-    () => ({
-      open,
-      onOpenChange: setOpen,
-      triggerRef,
-      anchorRef
-    }),
-    [open, setOpen, anchorRef]
-  );
-  const validChildren = filterChildren(children, ALLOWED_CHILDREN4, {
-    parentDisplayName: PortalRoot.displayName
-  });
-  return /* @__PURE__ */ jsx19(PortalContext.Provider, { value, children: validChildren });
-};
-PortalRoot.displayName = "Portal.Root";
-
-// src/components/portal/portal.tsx
-var Portal = {
-  /** The root component that provides context for the portal. */
-  Root: PortalRoot,
-  /** The trigger element that opens the portal when interacted with. */
-  Trigger: PortalTrigger,
-  /** The content displayed inside the portal when open. */
-  Content: PortalContent,
-  /** A backdrop optionally displayed behind portal content when open. */
-  Backdrop: PortalBackdrop
-};
-
-// src/components/progress-bar/fill/progress-bar-fill.tsx
-import clsx17 from "clsx";
-import { useContext as useContext4 } from "react";
-
-// src/components/progress-bar/progress-bar-context.ts
-import React20 from "react";
-var ProgressBarContext = React20.createContext(null);
-
-// src/components/progress-bar/fill/progress-bar-fill.props.ts
-var ProgressBarFillPropsDefs = {
-  /**
-   * The value of the progress bar (filled state).
-   * Should be a number between 0 and 1 representing the percentage of completion.
-   */
-  value: {
-    type: "number"
-  }
-};
-
-// src/components/progress-bar/fill/progress-bar-fill.tsx
-import { jsx as jsx20 } from "react/jsx-runtime";
-var ProgressBarFill = (props) => {
-  const context = useContext4(ProgressBarContext);
-  const { value, color, style, className, dataAttrs, ...rest } = getComponentProps(props, ProgressBarFillPropsDefs);
-  return /* @__PURE__ */ jsx20(
-    "div",
-    {
-      "data-color": color ?? context?.color,
-      "data-variant": context?.variant,
-      style: { ...style, width: `${(value ?? 0) / ((context?.totalValue ?? 0) > 1 ? context.totalValue : 1) * 100}%` },
-      className: clsx17("progress-bar-fill", className),
-      ...dataAttrs,
-      ...rest
-    }
-  );
-};
-ProgressBarFill.displayName = "ProgressBar.Fill";
-
-// src/components/progress-bar/root/progress-bar-root.tsx
-import clsx18 from "clsx";
-import React21, { isValidElement as isValidElement4, useMemo as useMemo5 } from "react";
-
-// src/components/progress-bar/root/progress-bar-root.props.ts
-var ProgressBarVariants = ["solid", "outlined", "muted"];
-var ProgressBarRootPropsDefs = {
-  /**
-   * Sets the variant style of the progress bar ("solid", "outlined", or "muted").
-   */
-  variant: {
-    type: "enum",
-    values: ProgressBarVariants,
-    dataAttr: "variant"
-  },
-  /**
-   * The value of the progress bar (filled state).
-   * Should be a number between 0 and 1 representing the percentage of completion.
-   */
-  value: {
-    type: "number"
-  }
-};
-
-// src/components/progress-bar/root/progress-bar-root.tsx
-import { jsx as jsx21 } from "react/jsx-runtime";
-var ALLOWED_CHILDREN5 = [ProgressBarFill.displayName];
-var ProgressBarRoot = (props) => {
-  const { value, size, color, variant, className, dataAttrs, ...rest } = getComponentProps(
-    props,
-    ProgressBarRootPropsDefs,
-    MarginPropDefs,
-    SizePropDef
-  );
-  const validChildren = filterChildren(props.children, ALLOWED_CHILDREN5, {
-    parentDisplayName: ProgressBarRoot.displayName
-  });
-  const { fills, totalValue } = useMemo5(() => {
-    const fills2 = validChildren.filter(
-      (child) => isValidElement4(child) && child.type.displayName === ProgressBarFill.displayName
-    );
-    if (fills2.length > 0) {
-      const totalValue2 = fills2.reduce(
-        (sum, child) => sum + (isValidElement4(child) ? child.props.value ?? 0 : 0),
-        0
-      );
-      return {
-        fills: fills2,
-        totalValue: totalValue2
-      };
-    }
-    return {
-      fills: [/* @__PURE__ */ jsx21(ProgressBarFill, { color, value })],
-      totalValue: value ?? 0
-    };
-  }, [validChildren, color, value]);
-  return /* @__PURE__ */ jsx21(ProgressBarContext.Provider, { value: { color, variant, totalValue }, children: /* @__PURE__ */ jsx21(
-    "div",
-    {
-      "data-size": size,
-      "data-color": color,
-      "data-variant": variant,
-      className: clsx18("progress-bar-root", className),
-      ...dataAttrs,
-      ...rest,
-      children: fills.map((fill, index) => /* @__PURE__ */ jsx21(React21.Fragment, { children: fill }, index))
-    }
-  ) });
-};
-ProgressBarRoot.displayName = "ProgressBar.Root";
-
-// src/components/progress-bar/progress-bar.tsx
-var ProgressBar = Object.assign(ProgressBarRoot, {
-  /**
-   * The root component for the Progress Bar.
-   */
-  Root: ProgressBarRoot,
-  /**
-   * The fill component for the Progress Bar, representing the filled portion.
-   */
-  Fill: ProgressBarFill
-});
-
-// src/components/select/content/select-content.tsx
-import clsx20 from "clsx";
-import * as React25 from "react";
-
-// src/components/select/select-context.tsx
-import * as React22 from "react";
-var SelectContext = React22.createContext(
-  null
-);
-function useSelectContext() {
-  const context = React22.useContext(SelectContext);
-  if (!context) {
-    throw new Error("Select components must be used within a Select.Root");
-  }
-  return context;
-}
-
-// src/components/select/utils/user-composed-refs.ts
-import * as React23 from "react";
-function useComposedRefs(...refs) {
-  return React23.useCallback(
-    (node) => {
-      refs.forEach((ref) => {
-        if (typeof ref === "function") {
-          ref(node);
-        } else if (ref != null) {
-          ref.current = node;
-        }
-      });
-    },
-    [refs]
-  );
-}
-
-// src/components/select/viewport/select-viewport.tsx
-import clsx19 from "clsx";
-import * as React24 from "react";
-import { jsx as jsx22 } from "react/jsx-runtime";
-var SelectViewport = React24.forwardRef(
-  (props, ref) => {
-    const { className, children, ...rest } = props;
-    return /* @__PURE__ */ jsx22("div", { ref, className: clsx19("select-viewport", className), ...rest, children });
-  }
-);
-SelectViewport.displayName = "Select.Viewport";
-
-// src/components/select/content/select-content.tsx
-import { jsx as jsx23 } from "react/jsx-runtime";
-var SelectContent = React25.forwardRef(
-  (props, forwardedRef) => {
-    const {
-      className,
-      children,
-      position = "popper",
-      side = "bottom",
-      offset,
-      align = "center",
-      ...rest
-    } = props;
-    const context = useSelectContext();
-    const composedRef = useComposedRefs(forwardedRef, context.contentRef);
-    React25.useEffect(() => {
-      context.itemValues.current = [];
-    }, [context.open]);
-    React25.useEffect(() => {
-      if (!context.open) return;
-      const handleClickOutside = (event) => {
-        const target = event.target;
-        if (context.contentRef.current && !context.contentRef.current.contains(target) && context.triggerRef.current && !context.triggerRef.current.contains(target)) {
-          context.onOpenChange(false);
-        }
-      };
-      document.addEventListener("mousedown", handleClickOutside);
-      return () => document.removeEventListener("mousedown", handleClickOutside);
-    }, [context.open]);
-    React25.useEffect(() => {
-      if (!context.open) return;
-      const handleKeyDown = (event) => {
-        const items = context.itemValues.current;
-        const itemCount = items.length;
-        switch (event.key) {
-          case "ArrowDown":
-            event.preventDefault();
-            context.setHighlightedIndex(
-              (prev) => prev < itemCount - 1 ? prev + 1 : 0
-            );
-            break;
-          case "ArrowUp":
-            event.preventDefault();
-            context.setHighlightedIndex(
-              (prev) => prev > 0 ? prev - 1 : itemCount - 1
-            );
-            break;
-          case "Tab":
-            event.preventDefault();
-            if (event.shiftKey) {
-              context.setHighlightedIndex(
-                (prev) => prev > 0 ? prev - 1 : itemCount - 1
-              );
-            } else {
-              context.setHighlightedIndex(
-                (prev) => prev < itemCount - 1 ? prev + 1 : 0
-              );
-            }
-            break;
-          case "Enter":
-          case " ":
-            event.preventDefault();
-            if (context.highlightedIndex >= 0) {
-              const selectedValue = items[context.highlightedIndex];
-              if (selectedValue) {
-                context.onValueChange(selectedValue);
-                const displayText = children;
-                if (displayText) context.setDisplayValue(displayText);
-                context.onOpenChange(false);
-              }
-            }
-            break;
-          case "Escape":
-            event.preventDefault();
-            context.onOpenChange(false);
-            context.triggerRef.current?.focus();
-            break;
-        }
-      };
-      document.addEventListener("keydown", handleKeyDown);
-      return () => document.removeEventListener("keydown", handleKeyDown);
-    }, [context.open, context.highlightedIndex]);
-    const [contentWidth, setContentWidth] = React25.useState();
-    const labelInside = context.labelPosition === "inside";
-    const anchorRef = labelInside ? context.rootRef : context.triggerRef;
-    React25.useLayoutEffect(() => {
-      if (context.open && anchorRef.current) {
-        setContentWidth(anchorRef.current.getBoundingClientRect().width);
-      }
-    }, [context.open, context.labelPosition, anchorRef]);
-    if (!context.open) {
-      return /* @__PURE__ */ jsx23("div", { style: { display: "none" }, "aria-hidden": "true", children });
-    }
-    return /* @__PURE__ */ jsx23(
-      Portal.Root,
-      {
-        open: context.open,
-        onOpenChange: context.onOpenChange,
-        anchorRef,
-        children: /* @__PURE__ */ jsx23(Portal.Content, { anchored: true, side, align, sideOffset: offset, children: /* @__PURE__ */ jsx23(
-          "div",
-          {
-            ref: composedRef,
-            role: "listbox",
-            "data-state": context.open ? "open" : "closed",
-            "data-side": side,
-            "data-align": align,
-            "data-trigger-variant": context.triggerVariant,
-            className: clsx20("select-content", className),
-            style: { width: contentWidth },
-            ...rest,
-            children: /* @__PURE__ */ jsx23(SelectViewport, { children })
-          }
-        ) })
-      }
-    );
-  }
-);
-SelectContent.displayName = "Select.Content";
-
-// src/components/select/group/select-group.tsx
-import clsx21 from "clsx";
-import * as React26 from "react";
-
-// src/components/select/group/select-group.props.ts
-var SelectGroupsPropDefs = {
-  title: {
-    type: "string"
-  }
-};
-
-// src/components/select/group/select-group.tsx
-import { jsx as jsx24, jsxs as jsxs5 } from "react/jsx-runtime";
-var SelectGroup = React26.forwardRef(
-  (props, ref) => {
-    const { className, children, dataAttrs, ...rest } = getComponentProps(
-      props,
-      SelectGroupsPropDefs
-    );
-    return /* @__PURE__ */ jsxs5(
-      "div",
-      {
-        ref,
-        role: "group",
-        className: clsx21("select-group", className),
-        ...rest,
-        children: [
-          /* @__PURE__ */ jsx24(Text, { className: "select-group-label", disabled: true, children: props.title }),
-          children
-        ]
-      }
-    );
-  }
-);
-SelectGroup.displayName = "Select.Group";
-
-// src/components/select/item/select-item.tsx
-import clsx22 from "clsx";
-import * as React27 from "react";
-
-// src/components/select/item/select-item-indicator.tsx
-import { jsx as jsx25 } from "react/jsx-runtime";
-var SelectItemIndicator = () => {
-  return /* @__PURE__ */ jsx25("span", { className: "select-item-indicator", children: /* @__PURE__ */ jsx25(
-    "svg",
-    {
-      width: "20",
-      height: "20",
-      viewBox: "0 0 15 15",
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg",
-      children: /* @__PURE__ */ jsx25(
-        "path",
-        {
-          d: "M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z",
-          fill: "currentColor",
-          fillRule: "evenodd",
-          clipRule: "evenodd"
-        }
-      )
-    }
-  ) });
-};
-
-// src/components/select/item/select-item.props.ts
-var SelectItemPropDefs = {
-  value: {
-    type: "string"
-  },
-  disabled: {
-    type: "boolean",
-    default: false
-  }
-};
-
-// src/components/select/item/select-item.tsx
-import { jsx as jsx26, jsxs as jsxs6 } from "react/jsx-runtime";
-var SelectItem = React27.forwardRef(
-  (props, ref) => {
-    const context = useSelectContext();
-    const { value, disabled, children, className, ...rest } = getComponentProps(
-      props,
-      SelectItemPropDefs
-    );
-    const selected = context.value === value;
-    React27.useEffect(() => {
-      if (selected && children) {
-        context.setDisplayValue(children);
-      }
-    }, [selected]);
-    React27.useEffect(() => {
-      if (!value) return;
-      if (!disabled) {
-        const values = context.itemValues.current;
-        if (!values.includes(value)) values.push(value);
-      }
-      return () => {
-        const values = context.itemValues.current;
-        const index = values.indexOf(value);
-        if (index > -1) values.splice(index, 1);
-      };
-    }, [value, disabled]);
-    const itemIndex = value ? context.itemValues.current.indexOf(value) : -1;
-    const isHighlighted = context.highlightedIndex >= 0 && context.highlightedIndex === itemIndex;
-    const handleClick = () => {
-      if (!disabled) {
-        if (value) {
-          context.onValueChange(value);
-          context.setDisplayValue(children);
-        }
-        context.onOpenChange(false);
-        context.triggerRef.current?.focus();
-      }
-    };
-    const handleMouseEnter = () => {
-      if (!disabled) context.setHighlightedIndex(itemIndex);
-    };
-    return /* @__PURE__ */ jsxs6(
-      Box,
-      {
-        ref,
-        role: "option",
-        radius: "none",
-        "aria-selected": selected,
-        "aria-disabled": disabled,
-        "data-variant": context.triggerVariant,
-        "data-state": selected ? "checked" : "unchecked",
-        "data-highlighted": isHighlighted ? "" : void 0,
-        "data-disabled": disabled ? "" : void 0,
-        className: clsx22("select-item", className),
-        onClick: handleClick,
-        onMouseEnter: handleMouseEnter,
-        ...rest,
-        children: [
-          /* @__PURE__ */ jsx26(
-            Box,
-            {
-              style: { width: 24, height: 24, justifyContent: "center" },
-              className: "flex items-center",
-              children: selected && /* @__PURE__ */ jsx26(SelectItemIndicator, {})
-            }
-          ),
-          /* @__PURE__ */ jsx26(Text, { disabled, children })
-        ]
-      }
-    );
-  }
-);
-SelectItem.displayName = "Select.Item";
-
-// src/components/select/label/select-label.tsx
-import clsx23 from "clsx";
-import * as React28 from "react";
-
-// src/components/select/label/select-label.props.ts
-var labelPositions2 = ["top", "left", "inside"];
-var SelectLabelPropDefs = {
-  position: {
-    type: "enum",
-    values: labelPositions2,
-    default: "top",
-    dataAttr: "position"
-  }
-};
-
-// src/components/select/label/select-label.tsx
-import { jsx as jsx27 } from "react/jsx-runtime";
-var SelectLabel = React28.forwardRef(
-  (props, ref) => {
-    const context = useSelectContext();
-    const { className, children, position, dataAttrs } = getComponentProps(
-      props,
-      SelectLabelPropDefs
-    );
-    React28.useLayoutEffect(() => {
-      context.setLabelPosition?.(position ?? "top");
-    }, [position, context.setLabelPosition]);
-    return /* @__PURE__ */ jsx27(
-      "label",
-      {
-        ref,
-        htmlFor: context.labelId,
-        className: clsx23("select-label", className),
-        ...dataAttrs,
-        children: /* @__PURE__ */ jsx27(Text, { disabled: context.disabled, children })
-      }
-    );
-  }
-);
-SelectLabel.displayName = "Select.Label";
-
-// src/components/select/root/select-root.tsx
-import clsx27 from "clsx";
-import {
-  useId as useId2,
-  useLayoutEffect as useLayoutEffect3,
-  useMemo as useMemo6,
-  useRef as useRef5,
-  useState as useState6
-} from "react";
-
-// src/components/select/trigger/select-trigger.tsx
-import clsx26 from "clsx";
-import * as React30 from "react";
-
-// src/components/select/value/select-value.tsx
-import clsx24 from "clsx";
-import * as React29 from "react";
-import { jsx as jsx28 } from "react/jsx-runtime";
-var SelectValue = React29.forwardRef(
-  (props, ref) => {
-    const { className, placeholder: placeholderProp, ...rest } = props;
-    const context = useSelectContext();
-    const placeholder = placeholderProp ?? context.placeholder;
-    return /* @__PURE__ */ jsx28(
-      "span",
-      {
-        ref,
-        className: clsx24("select-value", className),
-        "data-placeholder": !context.value ? "" : void 0,
-        ...rest,
-        children: /* @__PURE__ */ jsx28(Text, { disabled: context.disabled, children: context.displayValue || placeholder })
-      }
-    );
-  }
-);
-SelectValue.displayName = "Select.Value";
-
-// src/components/select/trigger/select-trigger-icon.tsx
-import clsx25 from "clsx";
-import { jsx as jsx29 } from "react/jsx-runtime";
-var SelectTriggerIcon = (props) => {
-  const { className, ...rest } = props;
-  return /* @__PURE__ */ jsx29(
-    "svg",
-    {
-      className: clsx25("select-trigger-icon", className),
-      width: "20",
-      height: "20",
-      viewBox: "0 0 15 15",
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg",
-      ...rest,
-      children: /* @__PURE__ */ jsx29(
-        "path",
-        {
-          d: "M4.18179 6.18181C4.35753 6.00608 4.64245 6.00608 4.81819 6.18181L7.49999 8.86362L10.1818 6.18181C10.3575 6.00608 10.6424 6.00608 10.8182 6.18181C10.9939 6.35755 10.9939 6.64247 10.8182 6.81821L7.81819 9.81821C7.73379 9.9026 7.61934 9.95001 7.49999 9.95001C7.38064 9.95001 7.26618 9.9026 7.18179 9.81821L4.18179 6.81821C4.00605 6.64247 4.00605 6.35755 4.18179 6.18181Z",
-          fill: "currentColor",
-          fillRule: "evenodd",
-          clipRule: "evenodd"
-        }
-      )
-    }
-  );
-};
-
-// src/components/select/trigger/select-trigger.props.ts
-var SelectTriggerPropsDefs = {};
-
-// src/components/select/trigger/select-trigger.tsx
-import { jsx as jsx30, jsxs as jsxs7 } from "react/jsx-runtime";
-var SelectTrigger = React30.forwardRef(
-  (props, forwardedRef) => {
-    const {
-      className,
-      disabled: disabledProp,
-      dataAttrs
-    } = getComponentProps(props, SelectTriggerPropsDefs);
-    const context = useSelectContext();
-    const disabled = disabledProp ?? context.disabled;
-    const isInsideLabel = context.labelPosition === "inside";
-    const composedRef = useComposedRefs(forwardedRef, context.triggerRef);
-    const handleClick = () => {
-      if (!disabled) {
-        context.onOpenChange(!context.open);
-      }
-    };
-    const handleKeyDown = (event) => {
-      if (disabled) return;
-      switch (event.key) {
-        case "Enter":
-        case " ":
-        case "ArrowDown":
-        case "ArrowUp":
-          event.preventDefault();
-          context.onOpenChange(true);
-          break;
-      }
-    };
-    if (isInsideLabel) {
-      return /* @__PURE__ */ jsxs7(
-        "div",
-        {
-          ref: composedRef,
-          "data-state": context.open ? "open" : "closed",
-          "data-disabled": disabled ? "" : void 0,
-          "data-variant": context.triggerVariant,
-          className: clsx26("select-trigger", className),
-          ...dataAttrs,
-          children: [
-            /* @__PURE__ */ jsx30(SelectValue, {}),
-            /* @__PURE__ */ jsx30(SelectTriggerIcon, {})
-          ]
-        }
-      );
-    }
-    return /* @__PURE__ */ jsxs7(
-      "button",
-      {
-        ref: composedRef,
-        type: "button",
-        role: "combobox",
-        "aria-expanded": context.open,
-        "aria-haspopup": "listbox",
-        "aria-disabled": disabled,
-        disabled,
-        "data-state": context.open ? "open" : "closed",
-        "data-disabled": disabled ? "" : void 0,
-        className: clsx26("select-trigger", className),
-        onClick: handleClick,
-        onKeyDown: handleKeyDown,
-        "data-variant": context.triggerVariant,
-        ...dataAttrs,
-        children: [
-          /* @__PURE__ */ jsx30(SelectValue, {}),
-          /* @__PURE__ */ jsx30(SelectTriggerIcon, {})
-        ]
-      }
-    );
-  }
-);
-SelectTrigger.displayName = "Select.Trigger";
-
-// src/components/select/root/select-root.props.ts
-var selectVariants = ["outlined", "solid", "clear"];
-var SelectRootPropsDefs = {
-  variant: {
-    type: "enum",
-    values: selectVariants,
-    dataAttr: "variant"
-  },
-  value: {
-    type: "string"
-  },
-  defaultValue: {
-    type: "string"
-  },
-  disabled: {
-    type: "boolean"
-  },
-  required: {
-    type: "boolean"
-  },
-  placeholder: {
-    type: "string"
-  },
-  name: {
-    type: "string"
-  },
-  onValueChange: {
-    type: "function"
-  }
-};
-
-// src/components/select/root/select-root.tsx
-import { jsx as jsx31, jsxs as jsxs8 } from "react/jsx-runtime";
-var ALLOWED_CHILDREN6 = [
-  SelectLabel.displayName,
-  SelectTrigger.displayName,
-  SelectContent.displayName
-];
-var SelectRoot = (props) => {
-  const {
-    children,
-    className,
-    dataAttrs,
-    value: valueProp,
-    defaultValue = "",
-    onValueChange,
-    disabled = false,
-    required = false,
-    placeholder,
-    variant,
-    name
-  } = getComponentProps(
-    props,
-    SelectRootPropsDefs,
-    MarginPropDefs,
-    RadiusPropDefs,
-    RoundnessPropDef
-  );
-  const [value, setValue] = useControllableState({
-    value: valueProp,
-    defaultValue,
-    onChange: onValueChange
-  });
-  const [open, setOpen] = useState6(false);
-  const [highlightedIndex, setHighlightedIndex] = useState6(-1);
-  const [labelPosition, setLabelPosition] = useState6("top");
-  const [triggerVariant, setTriggerVariant] = useState6("outlined");
-  const [displayValue, setDisplayValue] = useState6(null);
-  const labelId = useId2();
-  const rootRef = useRef5(null);
-  const triggerRef = useRef5(null);
-  const contentRef = useRef5(null);
-  const itemsRef = useRef5(/* @__PURE__ */ new Map());
-  const itemValues = useRef5([]);
-  const contextValue = useMemo6(
-    () => ({
-      open,
-      value,
-      displayValue,
-      onOpenChange: setOpen,
-      onValueChange: setValue,
-      setDisplayValue,
-      rootRef,
-      triggerRef,
-      contentRef,
-      labelPosition,
-      setLabelPosition,
-      triggerVariant,
-      setTriggerVariant,
-      disabled,
-      required,
-      placeholder,
-      name,
-      labelId,
-      highlightedIndex,
-      setHighlightedIndex,
-      itemsRef,
-      itemValues
-    }),
-    [
-      open,
-      value,
-      displayValue,
-      disabled,
-      required,
-      name,
-      placeholder,
-      labelId,
-      highlightedIndex,
-      labelPosition,
-      triggerVariant
-    ]
-  );
-  useLayoutEffect3(() => {
-    setTriggerVariant?.(variant ?? "outlined");
-  }, [variant, setTriggerVariant]);
-  const validChildren = filterChildren(children, ALLOWED_CHILDREN6, {
-    parentDisplayName: SelectRoot.displayName
-  });
-  const labelInside = labelPosition === "inside";
-  const handleClick = () => {
-    if (!disabled) {
-      setOpen(!open);
-    }
-  };
-  const handleKeyDown = (event) => {
-    if (disabled) return;
-    switch (event.key) {
-      case "Enter":
-      case " ":
-      case "ArrowDown":
-      case "ArrowUp":
-        event.preventDefault();
-        setOpen(true);
-        break;
-    }
-  };
-  if (labelInside) {
-    return /* @__PURE__ */ jsx31(SelectContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs8(
-      "button",
-      {
-        type: "button",
-        role: "combobox",
-        "aria-expanded": open,
-        "aria-haspopup": "listbox",
-        "aria-disabled": disabled,
-        disabled,
-        ref: rootRef,
-        "data-state": open ? "open" : "closed",
-        "data-disabled": disabled ? "" : void 0,
-        className: clsx27("select-root", className),
-        onClick: handleClick,
-        onKeyDown: handleKeyDown,
-        ...dataAttrs,
-        children: [
-          validChildren,
-          name && /* @__PURE__ */ jsx31("input", { type: "hidden", name, value })
-        ]
-      }
-    ) });
-  }
-  return /* @__PURE__ */ jsx31(SelectContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs8(
-    Box,
-    {
-      ref: rootRef,
-      className: clsx27("select-root", className),
-      ...dataAttrs,
-      children: [
-        validChildren,
-        name && /* @__PURE__ */ jsx31("input", { type: "hidden", name, value })
-      ]
-    }
-  ) });
-};
-SelectRoot.displayName = "Select.Root";
-
-// src/components/select/separator/select-separator.tsx
-import clsx28 from "clsx";
-import * as React31 from "react";
-import { jsx as jsx32 } from "react/jsx-runtime";
-var SelectSeparator = React31.forwardRef(
-  (props, ref) => {
-    const { className, ...rest } = props;
-    return /* @__PURE__ */ jsx32(
-      "div",
-      {
-        ref,
-        className: clsx28("select-separator", className),
-        ...rest
-      }
-    );
-  }
-);
-SelectSeparator.displayName = "Select.Separator";
-
-// src/components/select/select.tsx
-var Select = {
-  Root: SelectRoot,
-  Trigger: SelectTrigger,
-  Content: SelectContent,
-  Viewport: SelectViewport,
-  Group: SelectGroup,
-  Label: SelectLabel,
-  Item: SelectItem,
-  Separator: SelectSeparator
-};
-
-// src/components/separator/separator.tsx
-import clsx29 from "clsx";
-
-// src/components/separator/separator.props.ts
-var directions = ["horizontal", "vertical"];
-var variants2 = ["solid", "dashed", "dotted"];
-var SeparatorPropsDefs = {
-  /**
-   * The direction of the separator.
-   *
-   * @example direction="vertical" // positions the separator vertically
-   */
-  direction: {
-    type: "enum",
-    values: directions,
-    default: "horizontal",
-    dataAttr: "direction"
-  },
-  /**
-   * The variant of the separator.
-   *
-   * @example variant="dashed" // makes the separator dashed
-   */
-  variant: {
-    type: "enum",
-    values: variants2,
-    default: "solid",
-    dataAttr: "variant"
-  }
-};
-
-// src/components/separator/separator.tsx
-import { jsx as jsx33 } from "react/jsx-runtime";
-var Separator = (props) => {
-  const { className, dataAttrs, style } = getComponentProps(
-    props,
-    SeparatorPropsDefs
-  );
-  return /* @__PURE__ */ jsx33(
-    "div",
-    {
-      className: clsx29("separator", className),
-      style,
-      ...dataAttrs
-    }
-  );
-};
-Separator.displayName = "Separator";
-
-// src/components/switch/indicator/switch-indicator.tsx
-import clsx30 from "clsx";
-import React33 from "react";
-
-// src/components/switch/switch-context.ts
-import React32 from "react";
-var SwitchContext = React32.createContext(
-  null
-);
-function useSwitchContext() {
-  const context = React32.useContext(SwitchContext);
-  if (!context) {
-    throw new Error("Switch components must be used within a Switch.Root");
-  }
-  return context;
-}
-
-// src/components/switch/root/switch-root.props.ts
-var SwitchVariants = ["solid", "outlined", "muted"];
-var SwitchRootPropsDefs = {
-  /**
-   * Sets the variant style of the switch ("solid" or "outlined").
-   */
-  variant: {
-    type: "enum",
-    values: SwitchVariants,
-    dataAttr: "variant"
-  },
-  /**
-   * Sets the checked state of the switch.
-   *
-   * When using an uncontrolled switch, use `defaultChecked` instead.
-   * @default undefined
-   */
-  checked: {
-    type: "boolean",
-    dataAttr: "checked"
-  },
-  /**
-   * The value of the switch (checked state).
-   */
-  value: {
-    type: "boolean"
-  },
-  /**
-   * Sets the default checked state of the switch.
-   * @default undefined
-   */
-  defaultChecked: {
-    type: "boolean"
-  },
-  /**
-   * Disables the switch component.
-   * @default undefined
-   */
-  disabled: {
-    type: "boolean",
-    dataAttr: "disabled"
-  },
-  /**
-   * Makes the switch read-only.
-   * @default undefined
-   */
-  readonly: {
-    type: "boolean",
-    dataAttr: "readonly"
-  },
-  /**
-   * Marks the switch as required.
-   * @default undefined
-   */
-  required: {
-    type: "boolean",
-    dataAttr: "required"
-  },
-  /**
-   * Sets the name attribute of the switch input for form control.
-   * @default undefined
-   */
-  name: {
-    type: "string"
-  },
-  /**
-   * Callback fired when the checked state changes.
-   *
-   * @param value - The new checked state.
-   */
-  onCheckedChange: {
-    type: "function"
-  }
-};
-
-// src/components/switch/indicator/switch-indicator.props.ts
-var SwitchIndicatorPropDefs = {
-  /**
-   * Sets the variant style of the switch ("solid" or "outlined").
-   */
-  variant: {
-    type: "enum",
-    values: SwitchVariants,
-    dataAttr: "variant"
-  }
-};
-
-// src/components/switch/indicator/switch-indicator.tsx
-import { jsx as jsx34 } from "react/jsx-runtime";
-var SwitchIndicator = React33.forwardRef((props, ref) => {
-  const {
-    value,
-    setValue,
-    hovered,
-    color,
-    disabled,
-    readonly,
-    focused,
-    variant: contextVariant
-  } = useSwitchContext();
-  const { size, variant, className, style, dataAttrs } = getComponentProps(
-    props,
-    SwitchIndicatorPropDefs,
-    SizePropDef
-  );
-  const indicatorVariant = variant || contextVariant;
-  const handleKeyDown = (event) => {
-    if (disabled || readonly) return;
-    if (event.key === " " || event.key === "Enter") {
-      event.preventDefault();
-      setValue(!value);
-    }
-  };
-  const indicatorProps = {
-    ...value && { "data-checked": true },
-    ...disabled && { "data-disabled": true },
-    ...readonly && { "data-readonly": true },
-    ...(variant || contextVariant) && { "data-variant": indicatorVariant }
-  };
-  return /* @__PURE__ */ jsx34(
-    "div",
-    {
-      ref,
-      style,
-      role: "switch",
-      "data-size": size,
-      "data-color": color,
-      "data-hovered": hovered,
-      "aria-disabled": disabled,
-      "data-focused": focused,
-      "aria-readonly": readonly,
-      onKeyDown: handleKeyDown,
-      tabIndex: disabled || readonly ? -1 : 0,
-      className: clsx30("switch-indicator", className),
-      ...indicatorProps,
-      ...dataAttrs
-    }
-  );
-});
-SwitchIndicator.displayName = "Switch.Indicator";
-
-// src/components/switch/label/switch-label.tsx
-import clsx31 from "clsx";
-import React34 from "react";
-
-// src/components/switch/label/switch-label.props.ts
-var labelPositions3 = ["top", "left", "right", "bottom"];
-var SwitchLabelPropDefs = {
-  /**
-   * Sets the position of the label relative to the switch.
-   *
-   * @example position="left" // positions the label to the left of the switch
-   * @example position="top" // positions the label above the switch
-   */
-  position: {
-    type: "enum",
-    values: labelPositions3,
-    dataAttr: "position"
-  }
-};
-
-// src/components/switch/label/switch-label.tsx
-import { jsx as jsx35 } from "react/jsx-runtime";
-var SwitchLabel = React34.forwardRef(
-  (props, ref) => {
-    const context = useSwitchContext();
-    const { className, children, position } = getComponentProps(
-      props,
-      SwitchLabelPropDefs
-    );
-    React34.useLayoutEffect(() => {
-      context.setLabelPosition?.(position ?? "right");
-    }, [position, context.setLabelPosition]);
-    return /* @__PURE__ */ jsx35(
-      "label",
-      {
-        ref,
-        htmlFor: context.labelId,
-        className: clsx31("switch-label", className),
-        ...position && { [`data-position`]: position },
-        children: /* @__PURE__ */ jsx35(Text, { children })
-      }
-    );
-  }
-);
-SwitchLabel.displayName = "Switch.Label";
-
-// src/components/switch/root/switch-root.tsx
-import clsx32 from "clsx";
 import {
-  isValidElement as isValidElement5,
-  useId as useId3,
-  useMemo as useMemo7,
-  useState as useState7
-} from "react";
-import { jsx as jsx36, jsxs as jsxs9 } from "react/jsx-runtime";
-var ALLOWED_CHILDREN7 = [
-  SwitchLabel.displayName,
-  SwitchIndicator.displayName
-];
-var SwitchRoot = (props) => {
-  const {
-    name,
-    size,
-    color,
-    variant,
-    checked,
-    dataAttrs,
-    onCheckedChange,
-    value: valueProp,
-    disabled = false,
-    required = false,
-    readonly = false,
-    defaultChecked = false
-  } = getComponentProps(
-    props,
-    SwitchRootPropsDefs,
-    AlignPropDef,
-    MarginPropDefs,
-    SizePropDef,
-    ColorPropDef
-  );
-  const [value, setValue] = useControllableState({
-    value: valueProp || checked,
-    defaultValue: defaultChecked,
-    onChange: onCheckedChange
-  });
-  const labelId = useId3();
-  const [labelPosition, setLabelPosition] = useState7("right");
-  const [hovered, setHovered] = useState7(false);
-  const [focused, setFocused] = useState7(false);
-  const validChildren = filterChildren(props.children, ALLOWED_CHILDREN7, {
-    parentDisplayName: SwitchRoot.displayName
-  });
-  const { restDataAttrs } = useMemo7(() => {
-    const { ["data-color"]: _, ...restDataAttrs2 } = dataAttrs || {};
-    return { restDataAttrs: restDataAttrs2 };
-  }, [dataAttrs]);
-  const { indicator, otherChildren } = useMemo7(() => {
-    const indicatorIndex = validChildren.findIndex(
-      (child) => isValidElement5(child) && child.type.displayName === SwitchIndicator.displayName
-    );
-    if (indicatorIndex > -1) {
-      return {
-        indicator: validChildren[indicatorIndex],
-        otherChildren: validChildren.filter((_, i) => i !== indicatorIndex)
-      };
-    }
-    return {
-      indicator: /* @__PURE__ */ jsx36(SwitchIndicator, { size }),
-      otherChildren: validChildren
-    };
-  }, [validChildren, size]);
-  const contextValue = useMemo7(
-    () => ({
-      name,
-      value,
-      color,
-      setValue,
-      onCheckedChange,
-      labelId,
-      labelPosition,
-      setLabelPosition,
-      variant,
-      hovered,
-      setHovered,
-      focused,
-      setFocused,
-      disabled,
-      readonly,
-      required
-    }),
-    [
-      name,
-      value,
-      color,
-      onCheckedChange,
-      setValue,
-      labelId,
-      labelPosition,
-      hovered,
-      focused,
-      disabled,
-      readonly,
-      required
-    ]
-  );
-  const handleClick = () => {
-    if (disabled || readonly) return;
-    setValue(!value);
-  };
-  return /* @__PURE__ */ jsx36(SwitchContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs9(
-    "div",
-    {
-      className: clsx32("switch-root", props.className),
-      onClick: () => handleClick(),
-      onFocus: () => setFocused(true),
-      onBlur: () => setFocused(false),
-      onMouseEnter: () => setHovered(true),
-      onMouseLeave: () => setHovered(false),
-      ...restDataAttrs,
-      children: [
-        /* @__PURE__ */ jsx36(
-          "div",
-          {
-            className: "switch-container",
-            "data-size": size,
-            "data-color": color,
-            "data-checked": value,
-            "data-hovered": hovered,
-            "data-focused": focused,
-            "data-variant": variant,
-            children: indicator
-          }
-        ),
-        otherChildren,
-        name && /* @__PURE__ */ jsx36("input", { type: "hidden", name, value: String(value) })
-      ]
-    }
-  ) });
-};
-SwitchRoot.displayName = "Switch";
-
-// src/components/switch/switch.tsx
-var Switch = Object.assign(SwitchRoot, {
-  Root: SwitchRoot,
-  Label: SwitchLabel,
-  Indicator: SwitchIndicator
-});
-
-// src/components/theme/theme.tsx
-import * as React36 from "react";
-import { jsx as jsx37 } from "react/jsx-runtime";
-var Theme = React36.forwardRef((props, ref) => {
-  const context = React36.useContext(ThemeContext);
-  const isRoot = context === void 0;
-  if (isRoot) return /* @__PURE__ */ jsx37(ThemeRoot, { ...props, ref });
-  return /* @__PURE__ */ jsx37(ThemeSub, { ...props, ref });
-});
-Theme.displayName = "Theme";
-var ThemeRoot = React36.forwardRef((props, ref) => {
-  const {
-    appearance: themeAppearance,
-    radius: themeRadius,
-    roundness: themeRoundness,
-    spacing: themeSpacing,
-    children,
-    ...rest
-  } = props;
-  const [appearance, setAppearance] = React36.useState(
-    themeAppearance ?? "light"
-  );
-  const [radius, setRadius] = React36.useState(themeRadius ?? "md");
-  const [roundness2, setRoundness] = React36.useState(
-    themeRoundness ?? "3"
-  );
-  const [spacing, setSpacing] = React36.useState(themeSpacing ?? "md");
-  const value = React36.useMemo(
-    () => ({
-      appearance,
-      radius,
-      roundness: roundness2,
-      spacing,
-      onAppearanceChange: setAppearance,
-      onRadiusChange: setRadius,
-      onRoundnessChange: setRoundness,
-      onSpacingChange: setSpacing
-    }),
-    [appearance, radius, roundness2, spacing]
-  );
-  return /* @__PURE__ */ jsx37(ThemeContext.Provider, { value, children: /* @__PURE__ */ jsx37(
-    "div",
-    {
-      ref,
-      "data-appearance": appearance,
-      "data-theme-radius": radius,
-      "data-theme-roundness": roundness2,
-      "data-theme-spacing": spacing,
-      ...rest,
-      children
-    }
-  ) });
-});
-ThemeRoot.displayName = "ThemeRoot";
-var ThemeSub = React36.forwardRef((props, ref) => {
-  const context = React36.useContext(ThemeContext);
-  const {
-    appearance,
-    radius,
-    roundness: roundness2,
-    spacing,
-    onAppearanceChange,
-    onRadiusChange,
-    onRoundnessChange,
-    onSpacingChange,
-    children,
-    ...rest
-  } = props;
-  const contextProps = {
-    appearance: appearance ?? context.appearance,
-    radius: radius ?? context.radius,
-    roundness: roundness2 ?? context.roundness,
-    spacing: spacing ?? context.spacing,
-    onAppearanceChange: context.onAppearanceChange,
-    onRadiusChange: context.onRadiusChange,
-    onRoundnessChange: context.onRoundnessChange,
-    onSpacingChange: context.onSpacingChange
-  };
-  return /* @__PURE__ */ jsx37(ThemeContext.Provider, { value: contextProps, children: /* @__PURE__ */ jsx37(
-    "div",
-    {
-      ref,
-      "data-appearance": appearance,
-      "data-theme-radius": radius,
-      "data-theme-roundness": roundness2,
-      "data-theme-spacing": spacing,
-      ...rest,
-      className: "flex",
-      children
-    }
-  ) });
-});
-ThemeSub.displayName = "ThemeSub";
-
-// src/components/theme/theme-control.tsx
-import { useEffect as useEffect7, useState as useState9 } from "react";
-import { jsx as jsx38, jsxs as jsxs10 } from "react/jsx-runtime";
-function ThemeControl({ position = "bottom" }) {
-  const {
-    appearance,
-    onAppearanceChange,
-    radius,
-    onRadiusChange,
-    roundness: roundness2,
-    onRoundnessChange,
-    spacing,
-    onSpacingChange
-  } = useTheme();
-  const [visible, setVisible] = useState9(false);
-  useEffect7(() => {
-    function handleKeyDown(event) {
-      if (event.altKey && event.code === "KeyT") {
-        event.preventDefault();
-        setVisible(!visible);
-      }
-    }
-    document.addEventListener("keydown", handleKeyDown);
-    return () => document.removeEventListener("keydown", handleKeyDown);
-  }, [visible]);
-  return /* @__PURE__ */ jsx38(Portal.Root, { open: visible, onOpenChange: setVisible, children: /* @__PURE__ */ jsx38(Portal.Content, { position, children: /* @__PURE__ */ jsxs10(
-    Box,
-    {
-      m: "4",
-      p: "4",
-      className: "flex flex-col gap-2 border-[rgba(var(--border-color), 0.6)]",
-      children: [
-        /* @__PURE__ */ jsxs10(
-          Select.Root,
-          {
-            variant: "solid",
-            value: appearance,
-            onValueChange: (change) => onAppearanceChange?.(change),
-            children: [
-              /* @__PURE__ */ jsx38(Select.Label, { position: "inside", children: "Theme Settings" }),
-              /* @__PURE__ */ jsx38(Select.Trigger, {}),
-              /* @__PURE__ */ jsxs10(Select.Content, { children: [
-                /* @__PURE__ */ jsx38(Select.Item, { value: "light", children: "Light" }),
-                /* @__PURE__ */ jsx38(Select.Item, { value: "dark", children: "Dark" })
-              ] })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxs10(
-          Select.Root,
-          {
-            variant: "solid",
-            value: radius,
-            onValueChange: (change) => onRadiusChange?.(change),
-            children: [
-              /* @__PURE__ */ jsx38(Select.Label, { position: "inside", children: "Radius" }),
-              /* @__PURE__ */ jsx38(Select.Trigger, {}),
-              /* @__PURE__ */ jsxs10(Select.Content, { children: [
-                /* @__PURE__ */ jsx38(Select.Item, { value: "none", children: "None" }),
-                /* @__PURE__ */ jsx38(Select.Item, { value: "xs", children: "XS" }),
-                /* @__PURE__ */ jsx38(Select.Item, { value: "sm", children: "SM" }),
-                /* @__PURE__ */ jsx38(Select.Item, { value: "md", children: "MD" }),
-                /* @__PURE__ */ jsx38(Select.Item, { value: "lg", children: "LG" }),
-                /* @__PURE__ */ jsx38(Select.Item, { value: "xl", children: "XL" }),
-                /* @__PURE__ */ jsx38(Select.Item, { value: "full", children: "FULL" })
-              ] })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxs10(
-          Select.Root,
-          {
-            variant: "solid",
-            value: roundness2,
-            onValueChange: (change) => onRoundnessChange?.(change),
-            children: [
-              /* @__PURE__ */ jsx38(Select.Label, { className: "min-w-40!", position: "inside", children: "Roundness" }),
-              /* @__PURE__ */ jsx38(Select.Trigger, {}),
-              /* @__PURE__ */ jsxs10(Select.Content, { children: [
-                /* @__PURE__ */ jsx38(Select.Item, { value: "1", children: "1" }),
-                /* @__PURE__ */ jsx38(Select.Item, { value: "2", children: "2" }),
-                /* @__PURE__ */ jsx38(Select.Item, { value: "3", children: "3" }),
-                /* @__PURE__ */ jsx38(Select.Item, { value: "4", children: "4" }),
-                /* @__PURE__ */ jsx38(Select.Item, { value: "5", children: "5" }),
-                /* @__PURE__ */ jsx38(Select.Item, { value: "6", children: "6" })
-              ] })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxs10(
-          Select.Root,
-          {
-            variant: "solid",
-            value: spacing,
-            onValueChange: (change) => onSpacingChange?.(change),
-            children: [
-              /* @__PURE__ */ jsx38(Select.Label, { position: "inside", children: "Spacing" }),
-              /* @__PURE__ */ jsx38(Select.Trigger, {}),
-              /* @__PURE__ */ jsxs10(Select.Content, { children: [
-                /* @__PURE__ */ jsx38(Select.Item, { value: "xs", children: "XS" }),
-                /* @__PURE__ */ jsx38(Select.Item, { value: "sm", children: "SM" }),
-                /* @__PURE__ */ jsx38(Select.Item, { value: "md", children: "MD" }),
-                /* @__PURE__ */ jsx38(Select.Item, { value: "lg", children: "LG" }),
-                /* @__PURE__ */ jsx38(Select.Item, { value: "xl", children: "XL" })
-              ] })
-            ]
-          }
-        )
-      ]
-    }
-  ) }) });
-}
+  Accordion,
+  Badge,
+  Box,
+  Button,
+  Checkbox,
+  Container,
+  Flex,
+  Panel,
+  Portal,
+  ProgressBar,
+  Select,
+  Separator,
+  Switch,
+  Text,
+  Theme,
+  ThemeControl,
+  useTheme
+} from "./components";
 export {
   Accordion,
   Badge,
@@ -3654,6 +24,7 @@ export {
   Button,
   Checkbox,
   Container,
+  Flex,
   Panel,
   Portal,
   ProgressBar,