@locus-ui/components 0.0.1

package/dist/index.js

@@ -0,0 +1,3027 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } } function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }"use client";
+
+// src/components/accordion/content/accordion-content.tsx
+var _clsx = require('clsx'); var _clsx2 = _interopRequireDefault(_clsx);
+
+// src/utils/get-component-props.ts
+
+function getComponentProps(props, ...propDefs) {
+  let style = _nullishCoalesce(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 = _optionalChain([props, 'optionalAccess', _2 => _2[key]]);
+    delete restProps[key];
+    if (prop.type === "boolean" || prop.type === "string" || prop.type === "value | array" || prop.type === "reactNode" || prop.type === "function") {
+      extractedProps[key] = value;
+      if (prop.cssProperty && value !== void 0 && value !== null) {
+        style = {
+          ...style,
+          [prop.cssProperty]: prop.type === "boolean" ? value ? "1" : "0" : value
+        };
+      }
+      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)) {
+            if (prop.className) {
+              classNames.push(
+                breakpoint ? `${prop.className}-${breakpoint}` : prop.className
+              );
+              style = {
+                ...style,
+                [`--custom-${key}${usedBreakpoint}`]: propValue
+              };
+            }
+            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: _clsx2.default.call(void 0, classNames)
+  };
+}
+
+// src/components/accordion/accordion-context.ts
+var _react = require('react'); var React2 = _interopRequireWildcard(_react); var React4 = _interopRequireWildcard(_react); var React5 = _interopRequireWildcard(_react); var React11 = _interopRequireWildcard(_react); var React13 = _interopRequireWildcard(_react); var React12 = _interopRequireWildcard(_react); var React16 = _interopRequireWildcard(_react); var React14 = _interopRequireWildcard(_react); var React15 = _interopRequireWildcard(_react); var React18 = _interopRequireWildcard(_react); var React17 = _interopRequireWildcard(_react); var React22 = _interopRequireWildcard(_react); var React19 = _interopRequireWildcard(_react); var React20 = _interopRequireWildcard(_react); var React21 = _interopRequireWildcard(_react); var React23 = _interopRequireWildcard(_react); var React24 = _interopRequireWildcard(_react); var React25 = _interopRequireWildcard(_react); var React27 = _interopRequireWildcard(_react); var React26 = _interopRequireWildcard(_react); var React28 = _interopRequireWildcard(_react); var React29 = _interopRequireWildcard(_react);
+var AccordionContext = React2.default.createContext(null);
+function useAccordionContext() {
+  const context = React2.default.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
+var _jsxruntime = require('react/jsx-runtime');
+var AccordionContent = (props) => {
+  const context = useAccordionContext();
+  const { className, children, dataAttrs, ...rest } = getComponentProps(
+    props,
+    AccordionContentPropDefs
+  );
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      "data-variant": context.variant,
+      className: _clsx2.default.call(void 0, "accordion-content", className),
+      ...rest,
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "accordion-content-inner", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { children }) })
+    }
+  );
+};
+AccordionContent.displayName = "Accordion.Content";
+
+// src/components/accordion/header/accordion-header.tsx
+
+
+// src/icons/icon-colors.ts
+var colorMap = {
+  currentColor: "currentColor",
+  primary: "rgb(var(--primary))",
+  white: "white",
+  black: "black"
+};
+
+// src/icons/chevron-down.icon.tsx
+
+var ChevronDown = ({
+  color = "currentColor"
+}) => {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "svg",
+    {
+      width: "20",
+      height: "20",
+      viewBox: "0 0 15 15",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "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
+
+var AccordionHeader = (props) => {
+  const context = useAccordionContext();
+  const { className, children, value, dataAttrs, ...rest } = getComponentProps(
+    props,
+    AccordionHeaderPropDefs
+  );
+  const itemOpen = context.multiple ? _optionalChain([context, 'access', _3 => _3.value, 'optionalAccess', _4 => _4.includes, 'call', _5 => _5(_nullishCoalesce(value, () => ( "")))]) : context.value === value;
+  const handleClick = () => {
+    if (!value) return;
+    if (context.multiple) {
+      const current = _nullishCoalesce(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__ */ _jsxruntime.jsxs.call(void 0, 
+    "div",
+    {
+      "data-open": itemOpen,
+      "data-variant": context.variant,
+      className: _clsx2.default.call(void 0, "accordion-header", className),
+      role: "button",
+      tabIndex: 0,
+      onClick: handleClick,
+      onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          handleClick();
+        }
+      },
+      ...rest,
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "accordion-header-indicator", "aria-hidden": "true", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ChevronDown, {}) })
+      ]
+    }
+  );
+};
+AccordionHeader.displayName = "Accordion.Header";
+
+// src/components/accordion/item/accordion-item.tsx
+
+
+
+// src/utils/filter-children.ts
+
+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 = _optionalChain([childType, 'optionalAccess', _6 => _6.displayName]);
+    if (!displayName || !allowedDisplayNames.includes(displayName)) {
+      const parent = _nullishCoalesce(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
+
+var ALLOWED_CHILDREN = [
+  AccordionHeader.displayName,
+  AccordionContent.displayName
+];
+var AccordionItem = (props) => {
+  const context = useAccordionContext();
+  const { open, value, className, dataAttrs, ...rest } = getComponentProps(
+    props,
+    AccordionItemPropDefs
+  );
+  const itemOpen = _nullishCoalesce(open, () => ( (context.multiple ? _optionalChain([context, 'access', _7 => _7.value, 'optionalAccess', _8 => _8.includes, 'call', _9 => _9(_nullishCoalesce(value, () => ( "")))]) : context.value === value)));
+  const validChildren = filterChildren(props.children, ALLOWED_CHILDREN, {
+    parentDisplayName: AccordionItem.displayName
+  });
+  const { header, content } = _react.useMemo.call(void 0, () => {
+    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]);
+  _react.useEffect.call(void 0, () => {
+    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 ? React2.default.cloneElement(header, {
+    value
+  }) : null;
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "div",
+    {
+      "data-variant": context.variant,
+      className: _clsx2.default.call(void 0, "accordion-item", className),
+      ...rest,
+      "data-open": itemOpen,
+      children: [
+        headerWithValue,
+        content
+      ]
+    }
+  );
+};
+AccordionItem.displayName = "Accordion.Item";
+
+// src/components/accordion/root/accordion-root.tsx
+
+
+
+// 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/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
+
+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);
+      _optionalChain([onChange, 'optionalCall', _10 => _10(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
+
+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: _nullishCoalesce(propValue, () => ( null)),
+    onChange: onValueChange
+  });
+  const validChildren = filterChildren(props.children, ALLOWED_CHILDREN2, {
+    parentDisplayName: AccordionRoot.displayName
+  });
+  const itemsRef = _react.useRef.call(void 0, /* @__PURE__ */ new Map());
+  const itemValues = _react.useRef.call(void 0, []);
+  const contextValue = _react.useMemo.call(void 0, 
+    () => ({
+      variant,
+      multiple,
+      value,
+      setValue,
+      onValueChange,
+      itemsRef,
+      itemValues
+    }),
+    [variant, multiple, value, setValue, onValueChange]
+  );
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AccordionContext.Provider, { value: contextValue, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      className: _clsx2.default.call(void 0, "accordion-root", className),
+      ...dataAttrs,
+      ...rest,
+      children: validChildren.map((child, index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        AccordionItem,
+        {
+          value: _nullishCoalesce(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/box/box.tsx
+
+
+
+// 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
+
+var Box = React5.forwardRef((props, ref) => {
+  const { className, dataAttrs, children, ...rest } = getComponentProps(
+    props,
+    BoxPropsDefs,
+    MarginPropDefs,
+    PaddingPropDefs,
+    SpacingPropDef,
+    RadiusPropDefs,
+    RoundnessPropDef
+  );
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      ref,
+      ...dataAttrs,
+      className: _clsx2.default.call(void 0, "lcs-box", className),
+      ...rest,
+      children
+    }
+  );
+});
+Box.displayName = "Box";
+
+// src/components/button/button.tsx
+
+
+
+// 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
+
+var Button = (props) => {
+  const {
+    color,
+    variant,
+    className,
+    dataAttrs,
+    disabled,
+    highContrast,
+    readonly,
+    ...rest
+  } = getComponentProps(
+    props,
+    ButtonRootPropsDefs,
+    MarginPropDefs,
+    PaddingPropDefs,
+    RadiusPropDefs,
+    SizePropDef
+  );
+  const [hovered, setHovered] = _react.useState.call(void 0, false);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "button",
+    {
+      className: _clsx2.default.call(void 0, "button", className),
+      "data-color": _nullishCoalesce(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__ */ _jsxruntime.jsx.call(void 0, "span", { children: props.children })
+    }
+  );
+};
+
+// src/components/checkbox/indicator/checkbox-indicator.tsx
+
+
+
+// src/icons/check-mark.icon.tsx
+
+var CheckMark = ({ color = "currentColor" }) => {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "svg",
+    {
+      width: "64",
+      height: "64",
+      viewBox: "0 0 15 15",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "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
+
+var Minus = ({ color = "currentColor" }) => {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "svg",
+    {
+      width: "64",
+      height: "64",
+      viewBox: "0 0 15 15",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "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
+
+var CheckboxContext = React2.default.createContext(
+  null
+);
+function useCheckboxContext() {
+  const context = React2.default.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
+
+var CheckboxIndicator = React2.default.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__ */ _jsxruntime.jsxs.call(void 0, 
+    "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: _clsx2.default.call(void 0, "checkbox-indicator", className),
+      ...indicatorProps,
+      ...dataAttrs,
+      children: [
+        indeterminate && !value && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          Minus,
+          {
+            color: highContrast && indicatorVariant === "solid" ? "black" : "white"
+          }
+        ),
+        value && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          CheckMark,
+          {
+            color: highContrast && indicatorVariant === "solid" ? "black" : "white"
+          }
+        )
+      ]
+    }
+  );
+});
+CheckboxIndicator.displayName = "Checkbox.Indicator";
+
+// src/components/checkbox/label/checkbox-label.tsx
+
+
+
+// src/components/text/text.tsx
+
+
+
+// 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
+
+var Text = React2.default.forwardRef(
+  (props, ref) => {
+    const { className, dataAttrs, children, ...rest } = getComponentProps(
+      props,
+      TextPropsDefs,
+      MarginPropDefs,
+      PaddingPropDefs
+    );
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "p",
+      {
+        ref,
+        ...dataAttrs,
+        className: _clsx2.default.call(void 0, "lcs-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
+
+var CheckboxLabel = React2.default.forwardRef(
+  (props, ref) => {
+    const context = useCheckboxContext();
+    const { className, children, position } = getComponentProps(
+      props,
+      CheckboxLabelPropDefs
+    );
+    React2.default.useLayoutEffect(() => {
+      _optionalChain([context, 'access', _11 => _11.setLabelPosition, 'optionalCall', _12 => _12(_nullishCoalesce(position, () => ( "right")))]);
+    }, [position, context.setLabelPosition]);
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "label",
+      {
+        ref,
+        htmlFor: context.labelId,
+        className: _clsx2.default.call(void 0, "checkbox-label", className),
+        ...position && { [`data-position`]: position },
+        children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Text, { children })
+      }
+    );
+  }
+);
+CheckboxLabel.displayName = "Checkbox.Label";
+
+// src/components/checkbox/root/checkbox-root.tsx
+
+
+
+
+
+
+
+
+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 = _react.useId.call(void 0, );
+  const [labelPosition, setLabelPosition] = _react.useState.call(void 0, "right");
+  const [hovered, setHovered] = _react.useState.call(void 0, false);
+  const validChildren = filterChildren(props.children, ALLOWED_CHILDREN3, {
+    parentDisplayName: CheckboxRoot.displayName
+  });
+  const { indicator, otherChildren } = _react.useMemo.call(void 0, () => {
+    const indicatorIndex = validChildren.findIndex(
+      (child) => _react.isValidElement.call(void 0, child) && child.type.displayName === CheckboxIndicator.displayName
+    );
+    if (indicatorIndex > -1) {
+      return {
+        indicator: validChildren[indicatorIndex],
+        otherChildren: validChildren.filter((_, i) => i !== indicatorIndex)
+      };
+    }
+    return {
+      indicator: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CheckboxIndicator, { size }),
+      otherChildren: validChildren
+    };
+  }, [validChildren, size]);
+  const contextValue = _react.useMemo.call(void 0, 
+    () => ({
+      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__ */ _jsxruntime.jsx.call(void 0, CheckboxContext.Provider, { value: contextValue, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "div",
+    {
+      className: _clsx2.default.call(void 0, "checkbox-root", props.className),
+      onClick: () => handleClick(),
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false),
+      ...dataAttrs,
+      children: [
+        indicator,
+        otherChildren,
+        name && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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
+
+
+
+var Container = React11.forwardRef((props, ref) => {
+  const { className, children, direction, ...rest } = props;
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      ref,
+      "data-direction": direction,
+      className: _clsx2.default.call(void 0, className, "lcs-container"),
+      ...rest,
+      children
+    }
+  );
+});
+Container.displayName = "Container";
+
+// src/components/portal/backdrop/portal-backdrop.tsx
+
+
+
+// src/components/portal/portal-context.tsx
+
+var PortalContext = React12.createContext(
+  void 0
+);
+function usePortalContext() {
+  const context = React12.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
+
+var PortalBackdrop = React13.forwardRef(
+  (props, ref) => {
+    const context = usePortalContext();
+    const { className, dataAttrs, ...rest } = getComponentProps(
+      props,
+      PortalBackdropPropsDefs
+    );
+    if (!context.open) return null;
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "div",
+      {
+        ref,
+        className: _clsx2.default.call(void 0, "portal-backdrop", className),
+        ...dataAttrs,
+        ...rest
+      }
+    );
+  }
+);
+PortalBackdrop.displayName = "Portal.Backdrop";
+
+// src/components/portal/content/portal-content.tsx
+
+
+var _reactdom = require('react-dom'); var _reactdom2 = _interopRequireDefault(_reactdom);
+
+// src/components/theme/theme-context.tsx
+
+var ThemeContext = React14.createContext(
+  void 0
+);
+function useTheme() {
+  const context = React14.useContext(ThemeContext);
+  if (!context) {
+    throw new Error("`useTheme` must be used within a `Theme`");
+  }
+  return context;
+}
+
+// src/components/portal/utils/use-anchor-position.ts
+
+function useAnchorPosition({
+  anchorRef,
+  contentRef,
+  side = "bottom",
+  align = "center",
+  sideOffset = 0,
+  alignOffset = 0,
+  enabled = true
+}) {
+  const [position, setPosition] = React15.useState(null);
+  const [, _forceUpdate] = React15.useReducer((x) => x + 1, 0);
+  const updatePosition = React15.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]);
+  React15.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
+
+var PortalContent = React16.forwardRef(
+  (props, ref) => {
+    const portalContext = usePortalContext();
+    const themeContext = React16.useContext(ThemeContext);
+    const contentRef = React16.useRef(null);
+    const {
+      side = "bottom",
+      align = "center",
+      sideOffset = "0",
+      alignOffset = "0",
+      anchored = false,
+      children,
+      className,
+      dataAttrs,
+      style
+    } = getComponentProps(props, PortalContentPropsDefs, AlignPropDef);
+    const anchorRef = _nullishCoalesce(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 = React16.useCallback(
+      (node) => {
+        contentRef.current = node;
+        if (typeof ref === "function") {
+          ref(node);
+        } else if (ref) {
+          ref.current = node;
+        }
+      },
+      [ref]
+    );
+    React16.useEffect(() => {
+      if (!portalContext.open) return;
+      function onKeyDown(e) {
+        if (e.key === "Escape") {
+          _optionalChain([portalContext, 'access', _13 => _13.onOpenChange, 'optionalCall', _14 => _14(false)]);
+        }
+      }
+      document.addEventListener("keydown", onKeyDown);
+      return () => {
+        document.removeEventListener("keydown", onKeyDown);
+      };
+    }, [portalContext.open, portalContext.onOpenChange]);
+    React16.useEffect(() => {
+      if (!portalContext.open || !anchored) return;
+      function onClickOutside(e) {
+        const target = e.target;
+        const content2 = contentRef.current;
+        const trigger = _optionalChain([(_nullishCoalesce(portalContext.anchorRef, () => ( portalContext.triggerRef))), 'optionalAccess', _15 => _15.current]);
+        if (_optionalChain([content2, 'optionalAccess', _16 => _16.contains, 'call', _17 => _17(target)]) || _optionalChain([trigger, 'optionalAccess', _18 => _18.contains, 'call', _19 => _19(target)])) {
+          return;
+        }
+        _optionalChain([portalContext, 'access', _20 => _20.onOpenChange, 'optionalCall', _21 => _21(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 && _optionalChain([globalThis, 'optionalAccess', _22 => _22.document, 'optionalAccess', _23 => _23.body]);
+    if (!container) return null;
+    const combinedStyle = {
+      ...style,
+      ...anchored && anchorPosition ? {
+        position: "absolute",
+        top: anchorPosition.top,
+        left: anchorPosition.left
+      } : {}
+    };
+    const portalContent = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "div",
+      {
+        ref: setRefs,
+        className: _clsx2.default.call(void 0, "portal", className),
+        "data-appearance": _optionalChain([themeContext, 'optionalAccess', _24 => _24.appearance]),
+        "data-radius": _optionalChain([themeContext, 'optionalAccess', _25 => _25.radius]),
+        "data-roundness": _nullishCoalesce(_optionalChain([themeContext, 'optionalAccess', _26 => _26.roundness]), () => ( "theme")),
+        "data-spacing": _nullishCoalesce(_optionalChain([themeContext, 'optionalAccess', _27 => _27.spacing]), () => ( "theme")),
+        "data-theme-radius": _optionalChain([themeContext, 'optionalAccess', _28 => _28.radius]),
+        "data-theme-roundness": _optionalChain([themeContext, 'optionalAccess', _29 => _29.roundness]),
+        "data-theme-spacing": _optionalChain([themeContext, 'optionalAccess', _30 => _30.spacing]),
+        onClick: anchored ? void 0 : () => _optionalChain([portalContext, 'access', _31 => _31.onOpenChange, 'optionalCall', _32 => _32(false)]),
+        style: combinedStyle,
+        ...dataAttrs,
+        children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "div",
+          {
+            className: "portal-content",
+            onClick: (e) => e.stopPropagation(),
+            children
+          }
+        )
+      }
+    );
+    const content = themeContext ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ThemeContext.Provider, { value: themeContext, children: portalContent }) : portalContent;
+    return _reactdom2.default.createPortal(content, container);
+  }
+);
+PortalContent.displayName = "Portal.Content";
+
+// src/components/portal/root/portal-root.tsx
+
+
+// src/components/portal/trigger/portal-trigger.tsx
+
+
+var PortalTrigger = React17.forwardRef(
+  ({ children, asChild, onClick, ...props }, ref) => {
+    const context = usePortalContext();
+    const internalRef = React17.useRef(null);
+    React17.useEffect(() => {
+      if (internalRef.current) {
+        context.triggerRef.current = internalRef.current;
+      }
+    }, [context.triggerRef]);
+    const handleClick = (event) => {
+      _optionalChain([context, 'access', _33 => _33.onOpenChange, 'optionalCall', _34 => _34(!context.open)]);
+      _optionalChain([onClick, 'optionalCall', _35 => _35(event)]);
+    };
+    const setRefs = React17.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 && React17.isValidElement(children)) {
+      return React17.cloneElement(children, {
+        ref: setRefs,
+        onClick: handleClick,
+        ...props
+      });
+    }
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "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
+
+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 = React18.useRef(null);
+  const value = React18.useMemo(
+    () => ({
+      open,
+      onOpenChange: setOpen,
+      triggerRef,
+      anchorRef
+    }),
+    [open, setOpen, anchorRef]
+  );
+  const validChildren = filterChildren(children, ALLOWED_CHILDREN4, {
+    parentDisplayName: PortalRoot.displayName
+  });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 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/select/content/select-content.tsx
+
+
+
+// src/components/select/select-context.tsx
+
+var SelectContext = React19.createContext(
+  null
+);
+function useSelectContext() {
+  const context = React19.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
+
+function useComposedRefs(...refs) {
+  return React20.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
+
+
+
+var SelectViewport = React21.forwardRef(
+  (props, ref) => {
+    const { className, children, ...rest } = props;
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { ref, className: _clsx2.default.call(void 0, "select-viewport", className), ...rest, children });
+  }
+);
+SelectViewport.displayName = "Select.Viewport";
+
+// src/components/select/content/select-content.tsx
+
+var SelectContent = React22.forwardRef(
+  (props, forwardedRef) => {
+    const {
+      className,
+      children,
+      position = "popper",
+      side = "bottom",
+      offset,
+      align = "center",
+      ...rest
+    } = props;
+    const context = useSelectContext();
+    const composedRef = useComposedRefs(forwardedRef, context.contentRef);
+    React22.useEffect(() => {
+      context.itemValues.current = [];
+    }, [context.open]);
+    React22.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]);
+    React22.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);
+            _optionalChain([context, 'access', _36 => _36.triggerRef, 'access', _37 => _37.current, 'optionalAccess', _38 => _38.focus, 'call', _39 => _39()]);
+            break;
+        }
+      };
+      document.addEventListener("keydown", handleKeyDown);
+      return () => document.removeEventListener("keydown", handleKeyDown);
+    }, [context.open, context.highlightedIndex]);
+    const [contentWidth, setContentWidth] = React22.useState();
+    const labelInside = context.labelPosition === "inside";
+    const anchorRef = labelInside ? context.rootRef : context.triggerRef;
+    React22.useLayoutEffect(() => {
+      if (context.open && anchorRef.current) {
+        setContentWidth(anchorRef.current.getBoundingClientRect().width);
+      }
+    }, [context.open, context.labelPosition, anchorRef]);
+    if (!context.open) {
+      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { style: { display: "none" }, "aria-hidden": "true", children });
+    }
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      Portal.Root,
+      {
+        open: context.open,
+        onOpenChange: context.onOpenChange,
+        anchorRef,
+        children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Portal.Content, { anchored: true, side, align, sideOffset: offset, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "div",
+          {
+            ref: composedRef,
+            role: "listbox",
+            "data-state": context.open ? "open" : "closed",
+            "data-side": side,
+            "data-align": align,
+            "data-trigger-variant": context.triggerVariant,
+            className: _clsx2.default.call(void 0, "select-content", className),
+            style: { width: contentWidth },
+            ...rest,
+            children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectViewport, { children })
+          }
+        ) })
+      }
+    );
+  }
+);
+SelectContent.displayName = "Select.Content";
+
+// src/components/select/group/select-group.tsx
+
+
+
+// src/components/select/group/select-group.props.ts
+var SelectGroupsPropDefs = {
+  title: {
+    type: "string"
+  }
+};
+
+// src/components/select/group/select-group.tsx
+
+var SelectGroup = React23.forwardRef(
+  (props, ref) => {
+    const { className, children, dataAttrs, ...rest } = getComponentProps(
+      props,
+      SelectGroupsPropDefs
+    );
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      "div",
+      {
+        ref,
+        role: "group",
+        className: _clsx2.default.call(void 0, "select-group", className),
+        ...rest,
+        children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Text, { className: "select-group-label", disabled: true, children: props.title }),
+          children
+        ]
+      }
+    );
+  }
+);
+SelectGroup.displayName = "Select.Group";
+
+// src/components/select/item/select-item.tsx
+
+
+
+// src/components/select/item/select-item-indicator.tsx
+
+var SelectItemIndicator = () => {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "select-item-indicator", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "svg",
+    {
+      width: "20",
+      height: "20",
+      viewBox: "0 0 15 15",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "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
+
+var SelectItem = React24.forwardRef(
+  (props, ref) => {
+    const context = useSelectContext();
+    const { value, disabled, children, className, ...rest } = getComponentProps(
+      props,
+      SelectItemPropDefs
+    );
+    const selected = context.value === value;
+    React24.useEffect(() => {
+      if (selected && children) {
+        context.setDisplayValue(children);
+      }
+    }, [selected]);
+    React24.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);
+        _optionalChain([context, 'access', _40 => _40.triggerRef, 'access', _41 => _41.current, 'optionalAccess', _42 => _42.focus, 'call', _43 => _43()]);
+      }
+    };
+    const handleMouseEnter = () => {
+      if (!disabled) context.setHighlightedIndex(itemIndex);
+    };
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      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: _clsx2.default.call(void 0, "select-item", className),
+        onClick: handleClick,
+        onMouseEnter: handleMouseEnter,
+        ...rest,
+        children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            Box,
+            {
+              style: { width: 24, height: 24, justifyContent: "center" },
+              className: "flex items-center",
+              children: selected && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectItemIndicator, {})
+            }
+          ),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Text, { disabled, children })
+        ]
+      }
+    );
+  }
+);
+SelectItem.displayName = "Select.Item";
+
+// src/components/select/label/select-label.tsx
+
+
+
+// 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
+
+var SelectLabel = React25.forwardRef(
+  (props, ref) => {
+    const context = useSelectContext();
+    const { className, children, position, dataAttrs } = getComponentProps(
+      props,
+      SelectLabelPropDefs
+    );
+    React25.useLayoutEffect(() => {
+      _optionalChain([context, 'access', _44 => _44.setLabelPosition, 'optionalCall', _45 => _45(_nullishCoalesce(position, () => ( "top")))]);
+    }, [position, context.setLabelPosition]);
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "label",
+      {
+        ref,
+        htmlFor: context.labelId,
+        className: _clsx2.default.call(void 0, "select-label", className),
+        ...dataAttrs,
+        children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Text, { disabled: context.disabled, children })
+      }
+    );
+  }
+);
+SelectLabel.displayName = "Select.Label";
+
+// src/components/select/root/select-root.tsx
+
+
+
+
+
+
+
+
+
+// src/components/select/trigger/select-trigger.tsx
+
+
+
+// src/components/select/value/select-value.tsx
+
+
+
+var SelectValue = React26.forwardRef(
+  (props, ref) => {
+    const { className, placeholder: placeholderProp, ...rest } = props;
+    const context = useSelectContext();
+    const placeholder = _nullishCoalesce(placeholderProp, () => ( context.placeholder));
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "span",
+      {
+        ref,
+        className: _clsx2.default.call(void 0, "select-value", className),
+        "data-placeholder": !context.value ? "" : void 0,
+        ...rest,
+        children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Text, { disabled: context.disabled, children: context.displayValue || placeholder })
+      }
+    );
+  }
+);
+SelectValue.displayName = "Select.Value";
+
+// src/components/select/trigger/select-trigger-icon.tsx
+
+
+var SelectTriggerIcon = (props) => {
+  const { className, ...rest } = props;
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "svg",
+    {
+      className: _clsx2.default.call(void 0, "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__ */ _jsxruntime.jsx.call(void 0, 
+        "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
+
+var SelectTrigger = React27.forwardRef(
+  (props, forwardedRef) => {
+    const {
+      className,
+      disabled: disabledProp,
+      dataAttrs
+    } = getComponentProps(props, SelectTriggerPropsDefs);
+    const context = useSelectContext();
+    const disabled = _nullishCoalesce(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__ */ _jsxruntime.jsxs.call(void 0, 
+        "div",
+        {
+          ref: composedRef,
+          "data-state": context.open ? "open" : "closed",
+          "data-disabled": disabled ? "" : void 0,
+          "data-variant": context.triggerVariant,
+          className: _clsx2.default.call(void 0, "select-trigger", className),
+          ...dataAttrs,
+          children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectValue, {}),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectTriggerIcon, {})
+          ]
+        }
+      );
+    }
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      "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: _clsx2.default.call(void 0, "select-trigger", className),
+        onClick: handleClick,
+        onKeyDown: handleKeyDown,
+        "data-variant": context.triggerVariant,
+        ...dataAttrs,
+        children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectValue, {}),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 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
+
+var ALLOWED_CHILDREN5 = [
+  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] = _react.useState.call(void 0, false);
+  const [highlightedIndex, setHighlightedIndex] = _react.useState.call(void 0, -1);
+  const [labelPosition, setLabelPosition] = _react.useState.call(void 0, "top");
+  const [triggerVariant, setTriggerVariant] = _react.useState.call(void 0, "outlined");
+  const [displayValue, setDisplayValue] = _react.useState.call(void 0, null);
+  const labelId = _react.useId.call(void 0, );
+  const rootRef = _react.useRef.call(void 0, null);
+  const triggerRef = _react.useRef.call(void 0, null);
+  const contentRef = _react.useRef.call(void 0, null);
+  const itemsRef = _react.useRef.call(void 0, /* @__PURE__ */ new Map());
+  const itemValues = _react.useRef.call(void 0, []);
+  const contextValue = _react.useMemo.call(void 0, 
+    () => ({
+      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
+    ]
+  );
+  _react.useLayoutEffect.call(void 0, () => {
+    _optionalChain([setTriggerVariant, 'optionalCall', _46 => _46(_nullishCoalesce(variant, () => ( "outlined")))]);
+  }, [variant, setTriggerVariant]);
+  const validChildren = filterChildren(children, ALLOWED_CHILDREN5, {
+    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__ */ _jsxruntime.jsx.call(void 0, SelectContext.Provider, { value: contextValue, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      "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: _clsx2.default.call(void 0, "select-root", className),
+        onClick: handleClick,
+        onKeyDown: handleKeyDown,
+        ...dataAttrs,
+        children: [
+          validChildren,
+          name && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "input", { type: "hidden", name, value })
+        ]
+      }
+    ) });
+  }
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectContext.Provider, { value: contextValue, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    Box,
+    {
+      ref: rootRef,
+      className: _clsx2.default.call(void 0, "select-root", className),
+      ...dataAttrs,
+      children: [
+        validChildren,
+        name && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "input", { type: "hidden", name, value })
+      ]
+    }
+  ) });
+};
+SelectRoot.displayName = "Select.Root";
+
+// src/components/select/separator/select-separator.tsx
+
+
+
+var SelectSeparator = React28.forwardRef(
+  (props, ref) => {
+    const { className, ...rest } = props;
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "div",
+      {
+        ref,
+        className: _clsx2.default.call(void 0, "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
+
+
+// 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
+
+var Separator = (props) => {
+  const { className, dataAttrs, style } = getComponentProps(
+    props,
+    SeparatorPropsDefs
+  );
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      className: _clsx2.default.call(void 0, "separator", className),
+      style,
+      ...dataAttrs
+    }
+  );
+};
+Separator.displayName = "Separator";
+
+// src/components/theme/theme.tsx
+
+
+var Theme = React29.forwardRef((props, ref) => {
+  const context = React29.useContext(ThemeContext);
+  const isRoot = context === void 0;
+  if (isRoot) return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ThemeRoot, { ...props, ref });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ThemeSub, { ...props, ref });
+});
+Theme.displayName = "Theme";
+var ThemeRoot = React29.forwardRef((props, ref) => {
+  const {
+    appearance: themeAppearance,
+    radius: themeRadius,
+    roundness: themeRoundness,
+    spacing: themeSpacing,
+    children,
+    ...rest
+  } = props;
+  const [appearance, setAppearance] = React29.useState(
+    _nullishCoalesce(themeAppearance, () => ( "light"))
+  );
+  const [radius, setRadius] = React29.useState(_nullishCoalesce(themeRadius, () => ( "md")));
+  const [roundness2, setRoundness] = React29.useState(
+    _nullishCoalesce(themeRoundness, () => ( "3"))
+  );
+  const [spacing, setSpacing] = React29.useState(_nullishCoalesce(themeSpacing, () => ( "md")));
+  const value = React29.useMemo(
+    () => ({
+      appearance,
+      radius,
+      roundness: roundness2,
+      spacing,
+      onAppearanceChange: setAppearance,
+      onRadiusChange: setRadius,
+      onRoundnessChange: setRoundness,
+      onSpacingChange: setSpacing
+    }),
+    [appearance, radius, roundness2, spacing]
+  );
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ThemeContext.Provider, { value, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      ref,
+      "data-appearance": appearance,
+      "data-theme-radius": radius,
+      "data-theme-roundness": roundness2,
+      "data-theme-spacing": spacing,
+      ...rest,
+      children
+    }
+  ) });
+});
+ThemeRoot.displayName = "ThemeRoot";
+var ThemeSub = React29.forwardRef((props, ref) => {
+  const context = React29.useContext(ThemeContext);
+  const {
+    appearance,
+    radius,
+    roundness: roundness2,
+    spacing,
+    onAppearanceChange,
+    onRadiusChange,
+    onRoundnessChange,
+    onSpacingChange,
+    children,
+    ...rest
+  } = props;
+  const contextProps = {
+    appearance: _nullishCoalesce(appearance, () => ( context.appearance)),
+    radius: _nullishCoalesce(radius, () => ( context.radius)),
+    roundness: _nullishCoalesce(roundness2, () => ( context.roundness)),
+    spacing: _nullishCoalesce(spacing, () => ( context.spacing)),
+    onAppearanceChange: context.onAppearanceChange,
+    onRadiusChange: context.onRadiusChange,
+    onRoundnessChange: context.onRoundnessChange,
+    onSpacingChange: context.onSpacingChange
+  };
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ThemeContext.Provider, { value: contextProps, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "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
+
+function ThemeControl() {
+  const {
+    appearance,
+    onAppearanceChange,
+    radius,
+    onRadiusChange,
+    roundness: roundness2,
+    onRoundnessChange,
+    spacing,
+    onSpacingChange
+  } = useTheme();
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      Select.Root,
+      {
+        variant: "solid",
+        value: appearance,
+        onValueChange: (change) => _optionalChain([onAppearanceChange, 'optionalCall', _47 => _47(change)]),
+        children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Select.Label, { position: "inside", children: "Theme Settings" }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Select.Trigger, {}),
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Select.Content, { children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Select.Item, { value: "light", children: "Light" }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Select.Item, { value: "dark", children: "Dark" })
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      Select.Root,
+      {
+        variant: "solid",
+        value: radius,
+        onValueChange: (change) => _optionalChain([onRadiusChange, 'optionalCall', _48 => _48(change)]),
+        children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Select.Label, { position: "inside", children: "Radius" }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Select.Trigger, {}),
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Select.Content, { children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Select.Item, { value: "none", children: "None" }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Select.Item, { value: "xs", children: "XS" }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Select.Item, { value: "sm", children: "SM" }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Select.Item, { value: "md", children: "MD" }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Select.Item, { value: "lg", children: "LG" }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Select.Item, { value: "xl", children: "XL" }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Select.Item, { value: "full", children: "FULL" })
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      Select.Root,
+      {
+        variant: "solid",
+        value: roundness2,
+        onValueChange: (change) => _optionalChain([onRoundnessChange, 'optionalCall', _49 => _49(change)]),
+        children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Select.Label, { className: "min-w-40!", position: "inside", children: "Roundness" }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Select.Trigger, {}),
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Select.Content, { children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Select.Item, { value: "1", children: "1" }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Select.Item, { value: "2", children: "2" }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Select.Item, { value: "3", children: "3" }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Select.Item, { value: "4", children: "4" }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Select.Item, { value: "5", children: "5" }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Select.Item, { value: "6", children: "6" })
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      Select.Root,
+      {
+        variant: "solid",
+        value: spacing,
+        onValueChange: (change) => _optionalChain([onSpacingChange, 'optionalCall', _50 => _50(change)]),
+        children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Select.Label, { position: "inside", children: "Spacing" }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Select.Trigger, {}),
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Select.Content, { children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Select.Item, { value: "xs", children: "XS" }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Select.Item, { value: "sm", children: "SM" }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Select.Item, { value: "md", children: "MD" }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Select.Item, { value: "lg", children: "LG" }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Select.Item, { value: "xl", children: "XL" })
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+exports.Accordion = Accordion; exports.Box = Box; exports.Button = Button; exports.Checkbox = Checkbox; exports.Container = Container; exports.Portal = Portal; exports.Select = Select; exports.Separator = Separator; exports.Text = Text; exports.Theme = Theme; exports.ThemeControl = ThemeControl; exports.useTheme = useTheme;
+//# sourceMappingURL=index.js.map