@telepix-lab/telepix-ui 0.3.7 → 0.4.1

package/dist/esm/client.js

@@ -200,7 +200,7 @@ var VisuallyHidden = React.forwardRef(
   }
 );
 VisuallyHidden.displayName = NAME$1;
-var Root$3 = VisuallyHidden;
+var Root$4 = VisuallyHidden;
 
 // packages/react/context/src/create-context.tsx
 function createContext2(rootComponentName, defaultContext) {
@@ -1962,7 +1962,7 @@ var DialogTrigger$1 = React.forwardRef(
         "aria-haspopup": "dialog",
         "aria-expanded": context.open,
         "aria-controls": context.contentId,
-        "data-state": getState$3(context.open),
+        "data-state": getState$4(context.open),
         ...triggerProps,
         ref: composedTriggerRef,
         onClick: composeEventHandlers(props.onClick, context.onOpenToggle)
@@ -2002,7 +2002,7 @@ var DialogOverlayImpl = React.forwardRef(
       /* @__PURE__ */ jsx(ReactRemoveScroll, { as: Slot$3, allowPinchZoom: true, shards: [context.contentRef], children: /* @__PURE__ */ jsx(
         Primitive.div,
         {
-          "data-state": getState$3(context.open),
+          "data-state": getState$4(context.open),
           ...overlayProps,
           ref: forwardedRef,
           style: { pointerEvents: "auto", ...overlayProps.style }
@@ -2118,7 +2118,7 @@ var DialogContentImpl = React.forwardRef(
               id: context.contentId,
               "aria-describedby": context.descriptionId,
               "aria-labelledby": context.titleId,
-              "data-state": getState$3(context.open),
+              "data-state": getState$4(context.open),
               ...contentProps,
               ref: composedRefs,
               onDismiss: () => context.onOpenChange(false)
@@ -2168,7 +2168,7 @@ var DialogClose$1 = React.forwardRef(
   }
 );
 DialogClose$1.displayName = CLOSE_NAME$1;
-function getState$3(open) {
+function getState$4(open) {
   return open ? "open" : "closed";
 }
 var TITLE_WARNING_NAME = "DialogTitleWarning";
@@ -2205,7 +2205,7 @@ var DescriptionWarning = ({ contentRef, descriptionId }) => {
   }, [MESSAGE, contentRef, descriptionId]);
   return null;
 };
-var Root$2 = Dialog$1;
+var Root$3 = Dialog$1;
 var Trigger$4 = DialogTrigger$1;
 var Portal$3 = DialogPortal$1;
 var Overlay = DialogOverlay;
@@ -2356,7 +2356,7 @@ var CheckboxTrigger = React.forwardRef(
         role: "checkbox",
         "aria-checked": isIndeterminate$1(checked) ? "mixed" : checked,
         "aria-required": required,
-        "data-state": getState$2(checked),
+        "data-state": getState$3(checked),
         "data-disabled": disabled ? "" : void 0,
         disabled,
         value,
@@ -2436,7 +2436,7 @@ var CheckboxIndicator = React.forwardRef(
         children: /* @__PURE__ */ jsx(
           Primitive.span,
           {
-            "data-state": getState$2(context.checked),
+            "data-state": getState$3(context.checked),
             "data-disabled": context.disabled ? "" : void 0,
             ...indicatorProps,
             ref: forwardedRef,
@@ -2448,7 +2448,7 @@ var CheckboxIndicator = React.forwardRef(
   }
 );
 CheckboxIndicator.displayName = INDICATOR_NAME$2;
-var BUBBLE_INPUT_NAME$2 = "CheckboxBubbleInput";
+var BUBBLE_INPUT_NAME$3 = "CheckboxBubbleInput";
 var CheckboxBubbleInput = React.forwardRef(
   ({ __scopeCheckbox, ...props }, forwardedRef) => {
     const {
@@ -2463,7 +2463,7 @@ var CheckboxBubbleInput = React.forwardRef(
       form,
       bubbleInput,
       setBubbleInput
-    } = useCheckboxContext(BUBBLE_INPUT_NAME$2, __scopeCheckbox);
+    } = useCheckboxContext(BUBBLE_INPUT_NAME$3, __scopeCheckbox);
     const composedRefs = useComposedRefs(forwardedRef, setBubbleInput);
     const prevChecked = usePrevious(checked);
     const controlSize = useSize(control);
@@ -2515,14 +2515,14 @@ var CheckboxBubbleInput = React.forwardRef(
     );
   }
 );
-CheckboxBubbleInput.displayName = BUBBLE_INPUT_NAME$2;
+CheckboxBubbleInput.displayName = BUBBLE_INPUT_NAME$3;
 function isFunction(value) {
   return typeof value === "function";
 }
 function isIndeterminate$1(checked) {
   return checked === "indeterminate";
 }
-function getState$2(checked) {
+function getState$3(checked) {
   return isIndeterminate$1(checked) ? "indeterminate" : checked ? "checked" : "unchecked";
 }
 
@@ -4712,7 +4712,7 @@ var Arrow$1 = React.forwardRef((props, forwardedRef) => {
   );
 });
 Arrow$1.displayName = NAME;
-var Root$1 = Arrow$1;
+var Root$2 = Arrow$1;
 
 var POPPER_NAME = "Popper";
 var [createPopperContext, createPopperScope] = createContextScope(POPPER_NAME);
@@ -4920,7 +4920,7 @@ var PopperArrow = React.forwardRef(function PopperArrow2(props, forwardedRef) {
           visibility: contentContext.shouldHideArrow ? "hidden" : void 0
         },
         children: /* @__PURE__ */ jsx(
-          Root$1,
+          Root$2,
           {
             ...arrowProps,
             ref: forwardedRef,
@@ -5186,7 +5186,7 @@ function focusFirst$1(candidates, preventScroll = false) {
 function wrapArray$2(array, startIndex) {
   return array.map((_, index) => array[(startIndex + index) % array.length]);
 }
-var Root = RovingFocusGroup;
+var Root$1 = RovingFocusGroup;
 var Item$1 = RovingFocusGroupItem;
 
 var SELECTION_KEYS$1 = ["Enter", " "];
@@ -5437,7 +5437,7 @@ var MenuContentImpl = React.forwardRef(
                 onInteractOutside,
                 onDismiss,
                 children: /* @__PURE__ */ jsx(
-                  Root,
+                  Root$1,
                   {
                     asChild: true,
                     ...rovingFocusGroupScope,
@@ -6355,7 +6355,7 @@ var PopoverTrigger = React.forwardRef(
         "aria-haspopup": "dialog",
         "aria-expanded": context.open,
         "aria-controls": context.contentId,
-        "data-state": getState$1(context.open),
+        "data-state": getState$2(context.open),
         ...triggerProps,
         ref: composedTriggerRef,
         onClick: composeEventHandlers(props.onClick, context.onOpenToggle)
@@ -6498,7 +6498,7 @@ var PopoverContentImpl = React.forwardRef(
             children: /* @__PURE__ */ jsx(
               Content,
               {
-                "data-state": getState$1(context.open),
+                "data-state": getState$2(context.open),
                 role: "dialog",
                 id: context.contentId,
                 ...popperScope,
@@ -6549,7 +6549,7 @@ var PopoverArrow = React.forwardRef(
   }
 );
 PopoverArrow.displayName = ARROW_NAME$2;
-function getState$1(open) {
+function getState$2(open) {
   return open ? "open" : "closed";
 }
 var Root2$2 = Popover;
@@ -6583,7 +6583,7 @@ var Radio = React.forwardRef(
           type: "button",
           role: "radio",
           "aria-checked": checked,
-          "data-state": getState(checked),
+          "data-state": getState$1(checked),
           "data-disabled": disabled ? "" : void 0,
           disabled,
           value,
@@ -6624,7 +6624,7 @@ var RadioIndicator = React.forwardRef(
     return /* @__PURE__ */ jsx(Presence, { present: forceMount || context.checked, children: /* @__PURE__ */ jsx(
       Primitive.span,
       {
-        "data-state": getState(context.checked),
+        "data-state": getState$1(context.checked),
         "data-disabled": context.disabled ? "" : void 0,
         ...indicatorProps,
         ref: forwardedRef
@@ -6633,7 +6633,7 @@ var RadioIndicator = React.forwardRef(
   }
 );
 RadioIndicator.displayName = INDICATOR_NAME;
-var BUBBLE_INPUT_NAME$1 = "RadioBubbleInput";
+var BUBBLE_INPUT_NAME$2 = "RadioBubbleInput";
 var RadioBubbleInput = React.forwardRef(
   ({
     __scopeRadio,
@@ -6682,8 +6682,8 @@ var RadioBubbleInput = React.forwardRef(
     );
   }
 );
-RadioBubbleInput.displayName = BUBBLE_INPUT_NAME$1;
-function getState(checked) {
+RadioBubbleInput.displayName = BUBBLE_INPUT_NAME$2;
+function getState$1(checked) {
   return checked ? "checked" : "unchecked";
 }
 var ARROW_KEYS = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"];
@@ -6728,7 +6728,7 @@ var RadioGroup$1 = React.forwardRef(
         value,
         onValueChange: setValue,
         children: /* @__PURE__ */ jsx(
-          Root,
+          Root$1,
           {
             asChild: true,
             ...rovingFocusGroupScope,
@@ -7861,7 +7861,7 @@ var SelectArrow = React.forwardRef(
   }
 );
 SelectArrow.displayName = ARROW_NAME$1;
-var BUBBLE_INPUT_NAME = "SelectBubbleInput";
+var BUBBLE_INPUT_NAME$1 = "SelectBubbleInput";
 var SelectBubbleInput = React.forwardRef(
   ({ __scopeSelect, value, ...props }, forwardedRef) => {
     const ref = React.useRef(null);
@@ -7893,7 +7893,7 @@ var SelectBubbleInput = React.forwardRef(
     );
   }
 );
-SelectBubbleInput.displayName = BUBBLE_INPUT_NAME;
+SelectBubbleInput.displayName = BUBBLE_INPUT_NAME$1;
 function shouldShowPlaceholder(value) {
   return value === "" || value === void 0;
 }
@@ -7951,6 +7951,147 @@ var ItemText = SelectItemText;
 var ItemIndicator = SelectItemIndicator;
 var Separator = SelectSeparator$1;
 
+var SWITCH_NAME = "Switch";
+var [createSwitchContext, createSwitchScope] = createContextScope(SWITCH_NAME);
+var [SwitchProvider, useSwitchContext] = createSwitchContext(SWITCH_NAME);
+var Switch$1 = React.forwardRef(
+  (props, forwardedRef) => {
+    const {
+      __scopeSwitch,
+      name,
+      checked: checkedProp,
+      defaultChecked,
+      required,
+      disabled,
+      value = "on",
+      onCheckedChange,
+      form,
+      ...switchProps
+    } = props;
+    const [button, setButton] = React.useState(null);
+    const composedRefs = useComposedRefs(forwardedRef, (node) => setButton(node));
+    const hasConsumerStoppedPropagationRef = React.useRef(false);
+    const isFormControl = button ? form || !!button.closest("form") : true;
+    const [checked, setChecked] = useControllableState({
+      prop: checkedProp,
+      defaultProp: defaultChecked ?? false,
+      onChange: onCheckedChange,
+      caller: SWITCH_NAME
+    });
+    return /* @__PURE__ */ jsxs(SwitchProvider, { scope: __scopeSwitch, checked, disabled, children: [
+      /* @__PURE__ */ jsx(
+        Primitive.button,
+        {
+          type: "button",
+          role: "switch",
+          "aria-checked": checked,
+          "aria-required": required,
+          "data-state": getState(checked),
+          "data-disabled": disabled ? "" : void 0,
+          disabled,
+          value,
+          ...switchProps,
+          ref: composedRefs,
+          onClick: composeEventHandlers(props.onClick, (event) => {
+            setChecked((prevChecked) => !prevChecked);
+            if (isFormControl) {
+              hasConsumerStoppedPropagationRef.current = event.isPropagationStopped();
+              if (!hasConsumerStoppedPropagationRef.current) event.stopPropagation();
+            }
+          })
+        }
+      ),
+      isFormControl && /* @__PURE__ */ jsx(
+        SwitchBubbleInput,
+        {
+          control: button,
+          bubbles: !hasConsumerStoppedPropagationRef.current,
+          name,
+          value,
+          checked,
+          required,
+          disabled,
+          form,
+          style: { transform: "translateX(-100%)" }
+        }
+      )
+    ] });
+  }
+);
+Switch$1.displayName = SWITCH_NAME;
+var THUMB_NAME = "SwitchThumb";
+var SwitchThumb = React.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeSwitch, ...thumbProps } = props;
+    const context = useSwitchContext(THUMB_NAME, __scopeSwitch);
+    return /* @__PURE__ */ jsx(
+      Primitive.span,
+      {
+        "data-state": getState(context.checked),
+        "data-disabled": context.disabled ? "" : void 0,
+        ...thumbProps,
+        ref: forwardedRef
+      }
+    );
+  }
+);
+SwitchThumb.displayName = THUMB_NAME;
+var BUBBLE_INPUT_NAME = "SwitchBubbleInput";
+var SwitchBubbleInput = React.forwardRef(
+  ({
+    __scopeSwitch,
+    control,
+    checked,
+    bubbles = true,
+    ...props
+  }, forwardedRef) => {
+    const ref = React.useRef(null);
+    const composedRefs = useComposedRefs(ref, forwardedRef);
+    const prevChecked = usePrevious(checked);
+    const controlSize = useSize(control);
+    React.useEffect(() => {
+      const input = ref.current;
+      if (!input) return;
+      const inputProto = window.HTMLInputElement.prototype;
+      const descriptor = Object.getOwnPropertyDescriptor(
+        inputProto,
+        "checked"
+      );
+      const setChecked = descriptor.set;
+      if (prevChecked !== checked && setChecked) {
+        const event = new Event("click", { bubbles });
+        setChecked.call(input, checked);
+        input.dispatchEvent(event);
+      }
+    }, [prevChecked, checked, bubbles]);
+    return /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "checkbox",
+        "aria-hidden": true,
+        defaultChecked: checked,
+        ...props,
+        tabIndex: -1,
+        ref: composedRefs,
+        style: {
+          ...props.style,
+          ...controlSize,
+          position: "absolute",
+          pointerEvents: "none",
+          opacity: 0,
+          margin: 0
+        }
+      }
+    );
+  }
+);
+SwitchBubbleInput.displayName = BUBBLE_INPUT_NAME;
+function getState(checked) {
+  return checked ? "checked" : "unchecked";
+}
+var Root = Switch$1;
+var Thumb = SwitchThumb;
+
 var [createTooltipContext, createTooltipScope] = createContextScope("Tooltip", [
   createPopperScope
 ]);
@@ -8282,7 +8423,7 @@ var TooltipContentImpl = React.forwardRef(
             },
             children: [
               /* @__PURE__ */ jsx(Slottable, { children }),
-              /* @__PURE__ */ jsx(VisuallyHiddenContentContextProvider, { scope: __scopeTooltip, isInside: true, children: /* @__PURE__ */ jsx(Root$3, { id: context.contentId, role: "tooltip", children: ariaLabel || children }) })
+              /* @__PURE__ */ jsx(VisuallyHiddenContentContextProvider, { scope: __scopeTooltip, isInside: true, children: /* @__PURE__ */ jsx(Root$4, { id: context.contentId, role: "tooltip", children: ariaLabel || children }) })
             ]
           }
         )
@@ -8441,6 +8582,28 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
+var _excluded$F = ["color"];
+var BoxIcon = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
+  var _ref$color = _ref.color,
+      color = _ref$color === void 0 ? 'currentColor' : _ref$color,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$F);
+
+  return createElement("svg", Object.assign({
+    width: "15",
+    height: "15",
+    viewBox: "0 0 15 15",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props, {
+    ref: forwardedRef
+  }), createElement("path", {
+    d: "M12.5 2H2.5C2.22386 2 2 2.22386 2 2.5V12.5C2 12.7761 2.22386 13 2.5 13H12.5C12.7761 13 13 12.7761 13 12.5V2.5C13 2.22386 12.7761 2 12.5 2ZM2.5 1C1.67157 1 1 1.67157 1 2.5V12.5C1 13.3284 1.67157 14 2.5 14H12.5C13.3284 14 14 13.3284 14 12.5V2.5C14 1.67157 13.3284 1 12.5 1H2.5Z",
+    fill: color,
+    fillRule: "evenodd",
+    clipRule: "evenodd"
+  }));
+});
+
 var _excluded$N = ["color"];
 var CaretDownIcon = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
   var _ref$color = _ref.color,
@@ -12002,13 +12165,13 @@ const createLucideIcon = (iconName, iconNode) => {
  */
 
 
-const __iconNode$6 = [
+const __iconNode$4 = [
   ["path", { d: "M8 2v4", key: "1cmpym" }],
   ["path", { d: "M16 2v4", key: "4m81vk" }],
   ["rect", { width: "18", height: "18", x: "3", y: "4", rx: "2", key: "1hopcy" }],
   ["path", { d: "M3 10h18", key: "8toen8" }]
 ];
-const Calendar$1 = createLucideIcon("calendar", __iconNode$6);
+const Calendar$1 = createLucideIcon("calendar", __iconNode$4);
 
 /**
  * @license lucide-react v0.513.0 - ISC
@@ -12018,8 +12181,8 @@ const Calendar$1 = createLucideIcon("calendar", __iconNode$6);
  */
 
 
-const __iconNode$5 = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
-const ChevronDown = createLucideIcon("chevron-down", __iconNode$5);
+const __iconNode$3 = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
+const ChevronDown = createLucideIcon("chevron-down", __iconNode$3);
 
 /**
  * @license lucide-react v0.513.0 - ISC
@@ -12029,8 +12192,8 @@ const ChevronDown = createLucideIcon("chevron-down", __iconNode$5);
  */
 
 
-const __iconNode$4 = [["path", { d: "m15 18-6-6 6-6", key: "1wnfg3" }]];
-const ChevronLeft = createLucideIcon("chevron-left", __iconNode$4);
+const __iconNode$2 = [["path", { d: "m15 18-6-6 6-6", key: "1wnfg3" }]];
+const ChevronLeft = createLucideIcon("chevron-left", __iconNode$2);
 
 /**
  * @license lucide-react v0.513.0 - ISC
@@ -12040,38 +12203,11 @@ const ChevronLeft = createLucideIcon("chevron-left", __iconNode$4);
  */
 
 
-const __iconNode$3 = [
-  ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }],
-  ["path", { d: "m9 12 2 2 4-4", key: "dzmm74" }]
-];
-const SquareCheck = createLucideIcon("square-check", __iconNode$3);
-
-/**
- * @license lucide-react v0.513.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-
-
-const __iconNode$2 = [
+const __iconNode$1 = [
   ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }],
   ["path", { d: "M8 12h8", key: "1wcyev" }]
 ];
-const SquareMinus = createLucideIcon("square-minus", __iconNode$2);
-
-/**
- * @license lucide-react v0.513.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-
-
-const __iconNode$1 = [
-  ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }]
-];
-const Square = createLucideIcon("square", __iconNode$1);
+const SquareMinus = createLucideIcon("square-minus", __iconNode$1);
 
 /**
  * @license lucide-react v0.513.0 - ISC
@@ -12109,15 +12245,14 @@ const Checkbox = forwardRef(({ label, labelClassName, wrapperClassName, ...rest
         setChecked(isChecked ?? defaultChecked);
     }, [isChecked, defaultChecked]);
     const randomId = useId$1();
-    const checkboxIconClass = cn("size-4 fill-transparent stroke-comp-mono-default", checked && "stroke-comp-mono-selected", disabled && "stroke-comp-disabled cursor-default");
     const renderCheckboxIcon = (checked, disabled) => {
         if (disabled) {
-            return jsx(SquareMinus, { className: checkboxIconClass });
+            return (jsx(SquareMinus, { className: "size-full fill-transparent text-comp-disabled cursor-default" }));
         }
         else if (checked) {
-            return jsx(SquareCheck, { className: checkboxIconClass });
+            return (jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "size-full fill-transparent text-comp-mono-selected", children: jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M1 2.1821C1 1.52924 1.52925 1 2.1821 1H13.6879C14.3408 1 14.87 1.52925 14.87 2.1821V13.6879C14.87 14.3408 14.3408 14.87 13.6879 14.87H2.1821C1.52924 14.87 1 14.3408 1 13.6879V2.1821ZM11.3429 4.58303C11.6121 4.76774 11.6805 5.13566 11.4958 5.4048L7.38613 11.393C7.28127 11.5457 7.11082 11.6405 6.9257 11.6489C6.74058 11.6574 6.56222 11.5785 6.44391 11.4359L4.0914 8.59999C3.88299 8.34876 3.9177 7.97614 4.16894 7.76772C4.42018 7.55931 4.79279 7.59403 5.00121 7.84526L6.85419 10.079L10.5211 4.73591C10.7059 4.46676 11.0738 4.39832 11.3429 4.58303Z", fill: "currentColor" }) }));
         }
-        return jsx(Square, { className: checkboxIconClass });
+        return (jsx(BoxIcon, { className: "size-full fill-transparent text-comp-mono-default" }));
     };
     const onCheckedChange = (value) => {
         setChecked(value);
@@ -12186,14 +12321,14 @@ const CardFooter = forwardRef(({ className, ...rest }, ref) => {
  *   </DialogContent>
  * </Dialog>
  */
-const Dialog = Root$2;
+const Dialog = Root$3;
 const DialogTrigger = (props) => {
     return (jsx(Trigger$4, { className: props.className, ...props, "data-slot": "dialog-trigger", asChild: true, children: props.children }));
 };
 const DialogPortal = Portal$3;
 const DialogClose = Close;
 const DialogContent = ({ className, children, ...rest }) => {
-    return (jsxs(Portal$3, { children: [jsx(Overlay, { className: "fixed top-0 bottom-0 left-0 right-0 bg-pure-black-50 inset-0 z-[1000] animate-fade-in" }), jsxs(Content$1, { className: cn("fixed top-1/2 left-1/2 z-[1001] transform -translate-x-1/2 -translate-y-1/2 animate-content-fade-in", className), ...rest, children: [jsx(Title, { "data-slot": "dialog-title", ...rest, children: jsx(Root$3, {}) }), jsx(Description, {}), jsx(Card, { children: children })] })] }));
+    return (jsxs(Portal$3, { children: [jsx(Overlay, { className: "fixed top-0 bottom-0 left-0 right-0 bg-pure-black-50 inset-0 z-[1000] animate-fade-in" }), jsxs(Content$1, { className: cn("fixed top-1/2 left-1/2 z-[1001] transform -translate-x-1/2 -translate-y-1/2 animate-content-fade-in", className), ...rest, children: [jsx(Title, { "data-slot": "dialog-title", ...rest, children: jsx(Root$4, {}) }), jsx(Description, {}), jsx(Card, { children: children })] })] }));
 };
 const DialogDescription = (props) => {
     return jsx(CardBody, { ...props, children: props.children });
@@ -12739,7 +12874,7 @@ var dayjs_min = {exports: {}};
 var dayjs_minExports = dayjs_min.exports;
 var dayjs = /*@__PURE__*/getDefaultExportFromCjs(dayjs_minExports);
 
-const DatePicker = ({ size = "regular", placeholder = "Pick a date", format = "YYYY. MM. DD.", value, mode = "single", onChange, isInstantClose = false, open: openProp, onOpenChange: onOpenChangeProp, disabled, ...rest }) => {
+const DatePicker = ({ size = "regular", placeholder = "Pick a date", format = "YYYY. MM. DD.", value, mode = "single", onChange, isInstantClose = false, open: openProp, onOpenChange: onOpenChangeProp, disabled, popoverContentClassName, ...rest }) => {
     const [inputValue, setInputValue] = useState(value);
     const [open, setOpen] = useState(openProp || false);
     const handleSelect = (date) => {
@@ -12779,7 +12914,7 @@ const DatePicker = ({ size = "regular", placeholder = "Pick a date", format = "Y
         }
         return placeholder ?? "";
     };
-    return (jsxs(Root2$2, { open: open, onOpenChange: handleOpenChange, children: [jsx(Trigger$2, { asChild: true, children: jsx(Button, { size: size, fullWidth: true, variant: "outline", leftIcon: jsx(Calendar$1, { size: 20 }), className: "justify-start", disabled: disabled, children: getDateToFormatString(inputValue) }) }), jsx(Content2$2, { sideOffset: 10, align: "start", ...rest, children: mode === "single" ? (jsx(Calendar, { mode: "single", ...rest, selected: inputValue, onSelect: handleSelect })) : mode === "multiple" ? (jsx(Calendar, { mode: "multiple", ...rest, selected: Array.isArray(inputValue) ? inputValue : [], onSelect: handleSelect })) : (jsx(Calendar, { mode: "range", ...rest, selected: inputValue, onSelect: handleSelect })) })] }));
+    return (jsxs(Root2$2, { open: open, onOpenChange: handleOpenChange, children: [jsx(Trigger$2, { asChild: true, children: jsx(Button, { size: size, fullWidth: true, variant: "outline", leftIcon: jsx(Calendar$1, { size: 20 }), className: "justify-start", disabled: disabled, children: getDateToFormatString(inputValue) }) }), jsx(Content2$2, { sideOffset: 10, align: "start", className: cn("z-10", popoverContentClassName), ...rest, children: mode === "single" ? (jsx(Calendar, { mode: "single", ...rest, selected: inputValue, onSelect: handleSelect })) : mode === "multiple" ? (jsx(Calendar, { mode: "multiple", ...rest, selected: Array.isArray(inputValue) ? inputValue : [], onSelect: handleSelect })) : (jsx(Calendar, { mode: "range", ...rest, selected: inputValue, onSelect: handleSelect })) })] }));
 };
 
 const ContextMenu = Root2$3;
@@ -12923,4 +13058,233 @@ const Autocomplete = ({ placeholder, data, value, displayValue, onSelect, onChan
                     : undefined }), showSuggestions && (jsx("ul", { id: "autocomplete-suggestions", role: "listbox", className: cn("absolute top-calc(100%-10px) left-0 z-[20] p-2 bg-page-l1 shadow-medium border border-border-overlay rounded-lg w-[calc(100%-16px)]", contentClassName), children: filteredResults.length > 0 ? (filteredResults.map((item, index) => (jsx(AutocompleteContentItem, { item: item, index: index, highlightedIndex: highlightedIndex, onClick: handleItemClick, displayValue: displayValue, inputValue: inputValue, className: itemClassName }, displayValue(item) + index)))) : (jsx("li", { "data-no-results": true, className: "rounded-sm p-2 bg-fill-mono-default text-comp-mono-default text-body leading-body-compact font-medium list-none text-center", children: noResultsMessage })) }))] }));
 };
 
-export { Autocomplete, Calendar, Checkbox, ContextMenu, ContextMenuArrow, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuItemIndicator, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DataTable, DatePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogPortal, DialogTrigger, HORIZONTAL_TAB_SIZES, HorizontalTab, HorizontalTabs, InteractiveListItem, InteractiveListItemActions, InteractiveListItemContent, InteractiveListItemIcon, MULTIPLE_SELECT_SIZES, ModeTab, ModeTabs, MultipleSelect, MultipleSelectContent, MultipleSelectTrigger, MultipleSelectValue, RadioGroup, RadioItem, SELECT_TRIGGER_SIZES, SELECT_TRIGGER_VARIANTS, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, TOOLTIP_SHORT_SIZES, TOOLTIP_SHORT_VARIANTS, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Tooltip, TooltipArrow, TooltipContent, TooltipDescription, TooltipFooter, TooltipHeader, TooltipTrigger, VERTICAL_MENU_SIZES, VERTICAL_MENU_VARIANTS, VerticalMenu, VerticalMenus };
+const SWITCH_VARIANTS = {
+    FILLED: "filled",
+    OUTLINED: "outlined",
+};
+const SWITCH_SIZES = {
+    SMALL: "small",
+    REGULAR: "regular",
+};
+
+const TEXT_VARIANTS = {
+    BOLD3XLARGEBOLD: "bold3XLargeBold",
+    BOLD2XLARGEBOLDCOMPACT: "bold2XLargeBoldCompact",
+    BOLD2XLARGEBOLD: "bold2XLargeBold",
+    BOLDXLARGEBOLDCOMPACT: "boldXLargeBoldCompact",
+    BOLDXLARGEBOLD: "boldXLargeBold",
+    BOLDLARGEBOLDCOMPACT: "boldLargeBoldCompact",
+    BOLDLARGEBOLD: "boldLargeBold",
+    BOLDBASEBOLDCOMPACT: "boldBaseBoldCompact",
+    BOLDBASEBOLD: "boldBaseBold",
+    BOLDBODYBOLDCOMPACT: "boldBodyBoldCompact",
+    BOLDBODYBOLD: "boldBodyBold",
+    BOLDLABELBOLDCOMPACT: "boldLabelBoldCompact",
+    BOLDLABELBOLD: "boldLabelBold",
+    BOLDXSMALLBOLD: "boldXSmallBold",
+    SEMIBOLDBASESEMIBOLDCOMPACT: "semiBoldBaseSemiBoldCompact",
+    SEMIBOLDBASESEMIBOLD: "semiBoldBaseSemiBold",
+    SEMIBOLDBODYSEMIBOLDCOMPACT: "semiBoldBodySemiBoldCompact",
+    SEMIBOLDBODYSEMIBOLD: "semiBoldBodySemiBold",
+    SEMIBOLDLABELSEMIBOLDCOMPACT: "semiBoldLabelSemiBoldCompact",
+    MED3XLARGEMED: "med3XLargeMed",
+    MEDXLARGEMED: "medXLargeMed",
+    MEDLARGEMED: "medLargeMed",
+    MEDBASEMEDCOMPACT: "medBaseMedCompact",
+    MEDBASEMED: "medBaseMed",
+    MEDBODYMEDCOMPACT: "medBodyMedCompact",
+    MEDBODYMED: "medBodyMed",
+    MEDLABELMEDCOMPACT: "medLabelMedCompact",
+    MEDLABELMED: "medLabelMed",
+    MEDXSMALLMED: "medXSmallMed",
+    REGULAR3XLARGE: "regular3XLarge",
+    REGULAR2XLARGE: "regular2XLarge",
+    REGULARXLARGE: "regularXLarge",
+    REGULARLARGECOMPACT: "regularLargeCompact",
+    REGULARLARGE: "regularLarge",
+    REGULARBASECOMPACT: "regularBaseCompact",
+    REGULARBASE: "regularBase",
+    REGULARBODYCOMPACT: "regularBodyCompact",
+    REGULARBODY: "regularBody",
+    REGULARLABELCOMPACT: "regularLabelCompact",
+    REGULARLABEL: "regularLabel",
+    REGULARXSMALL: "regularXSmall",
+};
+
+const Text = ({ children, className, size, weight, align, variant = "regularBase", color, as: Component = "p", }) => {
+    const getFontWeightClass = (weight) => {
+        switch (weight) {
+            case "bold":
+                return "font-bold";
+            case "semibold":
+                return "font-semibold";
+            case "medium":
+                return "font-medium";
+            case "regular":
+                return "font-normal";
+            case "light":
+                return "font-light";
+            case "extralight":
+                return "font-extralight";
+            case "thin":
+                return "font-thin";
+            default:
+                return "font-normal";
+        }
+    };
+    const getSizeClass = (size) => {
+        switch (size) {
+            case "xxxl":
+                return "text-xxxl";
+            case "xxl":
+                return "text-xxl";
+            case "xl":
+                return "text-xl";
+            case "large":
+                return "text-large";
+            case "base":
+                return "text-base";
+            case "body":
+                return "text-body";
+            case "label":
+                return "text-label";
+            case "xsmall":
+                return "text-xsmall";
+            default:
+                return "text-base";
+        }
+    };
+    const getAlignClass = (align) => {
+        switch (align) {
+            case "left":
+                return "text-left";
+            case "center":
+                return "text-center";
+            case "right":
+                return "text-right";
+            case "justify":
+                return "text-justify";
+            default:
+                return "text-left";
+        }
+    };
+    const getVariantClass = (variant) => {
+        switch (variant) {
+            case TEXT_VARIANTS.BOLD3XLARGEBOLD:
+                return "text-xxxl font-bold leading-xxxl";
+            case TEXT_VARIANTS.BOLD2XLARGEBOLDCOMPACT:
+                return "text-xxl font-bold leading-xxl-compact";
+            case TEXT_VARIANTS.BOLD2XLARGEBOLD:
+                return "text-xxl font-bold leading-xxl";
+            case TEXT_VARIANTS.BOLDXLARGEBOLDCOMPACT:
+                return "text-xl font-bold leading-xl-compact";
+            case TEXT_VARIANTS.BOLDXLARGEBOLD:
+                return "text-xl font-bold leading-xl";
+            case TEXT_VARIANTS.BOLDLARGEBOLDCOMPACT:
+                return "text-large font-bold leading-large-compact";
+            case TEXT_VARIANTS.BOLDLARGEBOLD:
+                return "text-large font-bold leading-large";
+            case TEXT_VARIANTS.BOLDBASEBOLDCOMPACT:
+                return "text-base font-bold leading-base-compact";
+            case TEXT_VARIANTS.BOLDBASEBOLD:
+                return "text-base font-bold leading-base";
+            case TEXT_VARIANTS.BOLDBODYBOLDCOMPACT:
+                return "text-body font-bold leading-body-compact";
+            case TEXT_VARIANTS.BOLDBODYBOLD:
+                return "text-body font-bold leading-body";
+            case TEXT_VARIANTS.BOLDLABELBOLDCOMPACT:
+                return "text-label font-bold leading-label-compact";
+            case TEXT_VARIANTS.BOLDLABELBOLD:
+                return "text-label font-bold leading-label";
+            case TEXT_VARIANTS.BOLDXSMALLBOLD:
+                return "text-xsmall font-bold leading-xsmall";
+            case TEXT_VARIANTS.SEMIBOLDBASESEMIBOLDCOMPACT:
+                return "text-base font-semibold leading-base-compact";
+            case TEXT_VARIANTS.SEMIBOLDBASESEMIBOLD:
+                return "text-base font-semibold leading-base";
+            case TEXT_VARIANTS.SEMIBOLDBODYSEMIBOLDCOMPACT:
+                return "text-body font-semibold leading-body-compact";
+            case TEXT_VARIANTS.SEMIBOLDBODYSEMIBOLD:
+                return "text-body font-semibold leading-body";
+            case TEXT_VARIANTS.SEMIBOLDLABELSEMIBOLDCOMPACT:
+                return "text-label font-semibold leading-label-compact";
+            case TEXT_VARIANTS.MED3XLARGEMED:
+                return "text-xxxl font-medium leading-xxxl";
+            case TEXT_VARIANTS.MEDXLARGEMED:
+                return "text-xl font-medium leading-xl";
+            case TEXT_VARIANTS.MEDLARGEMED:
+                return "text-large font-medium leading-large";
+            case TEXT_VARIANTS.MEDBASEMEDCOMPACT:
+                return "text-base font-medium leading-base-compact";
+            case TEXT_VARIANTS.MEDBASEMED:
+                return "text-base font-medium leading-base";
+            case TEXT_VARIANTS.MEDBODYMEDCOMPACT:
+                return "text-body font-medium leading-body-compact";
+            case TEXT_VARIANTS.MEDBODYMED:
+                return "text-body font-medium leading-body";
+            case TEXT_VARIANTS.MEDLABELMEDCOMPACT:
+                return "text-label font-medium leading-label-compact";
+            case TEXT_VARIANTS.MEDLABELMED:
+                return "text-label font-medium leading-label";
+            case TEXT_VARIANTS.MEDXSMALLMED:
+                return "text-xsmall font-medium leading-xsmall";
+            case TEXT_VARIANTS.REGULAR3XLARGE:
+                return "text-xxxl font-normal leading-xxxl";
+            case TEXT_VARIANTS.REGULAR2XLARGE:
+                return "text-xxl font-normal leading-xxl";
+            case TEXT_VARIANTS.REGULARXLARGE:
+                return "text-xl font-normal leading-xl";
+            case TEXT_VARIANTS.REGULARLARGE:
+                return "text-large font-normal leading-large";
+            case TEXT_VARIANTS.REGULARLARGECOMPACT:
+                return "text-large font-normal leading-large-compact";
+            case TEXT_VARIANTS.REGULARBASE:
+                return "text-base font-normal leading-base";
+            case TEXT_VARIANTS.REGULARBASECOMPACT:
+                return "text-base font-normal leading-base-compact";
+            case TEXT_VARIANTS.REGULARBODY:
+                return "text-body font-normal leading-body";
+            case TEXT_VARIANTS.REGULARBODYCOMPACT:
+                return "text-body font-normal leading-body-compact";
+            case TEXT_VARIANTS.REGULARLABEL:
+                return "text-label font-normal leading-label";
+            case TEXT_VARIANTS.REGULARLABELCOMPACT:
+                return "text-label font-normal leading-label-compact";
+            case TEXT_VARIANTS.REGULARXSMALL:
+                return "text-xsmall font-normal leading-xsmall";
+            default:
+                return "text-base font-normal leading-base";
+        }
+    };
+    return (jsx(Component, { style: color ? { color } : undefined, className: cn("m-0 p-0 text-comp-mono-default", getVariantClass(variant), size && getSizeClass(size), weight && getFontWeightClass(weight), align && getAlignClass(align), className), children: children }));
+};
+Text.displayName = "Text";
+
+const FilledSwitch = (props) => {
+    const { size, checked, thumbClassName, ...rest } = props;
+    return (jsxs(Root, { className: cn("flex items-center gap-1 bg-page-l2 rounded-lg relative", size === SWITCH_SIZES.REGULAR && "p-1.5 w-[68px] h-9", size === SWITCH_SIZES.SMALL && "p-1 w-[59px] h-7"), checked: checked, ...rest, children: [jsx(Thumb, { className: cn("rounded-sm absolute transition-all duration-100", size === SWITCH_SIZES.REGULAR &&
+                    "size-6 left-1.5 data-[state=checked]:left-[37px]", size === SWITCH_SIZES.SMALL &&
+                    "size-5 left-1 data-[state=checked]:left-[35px]", checked ? "bg-fill-accent-selected" : "bg-fill-mono-subtle-selected", thumbClassName) }), checked ? (jsx(Text, { variant: "medLabelMedCompact", className: "text-comp-mono-selected py-1 px-[5px] text-left w-full", as: "div", children: "ON" })) : (jsx(Text, { variant: "medLabelMedCompact", className: "text-comp-mono-subtle-default py-1 px-0.5 text-right w-full", as: "div", children: "OFF" }))] }));
+};
+const OutlinedSwitch = (props) => {
+    const { size, checked, thumbClassName, ...rest } = props;
+    return (jsxs(Root, { className: cn("group border shadow-inner p-1 relative rounded-[20px]", checked
+            ? "bg-fill-accent-default hover:bg-fill-accent-hovered border-transparent"
+            : "bg-fill-mono-default hover:bg-fill-mono-hovered border-border-divider hover:border-border-bound", size === SWITCH_SIZES.REGULAR && "w-[74px] h-9", size === SWITCH_SIZES.SMALL && "w-[60px] h-7"), checked: checked, ...rest, children: [jsx(Thumb, { className: cn("absolute transition-all duration-100 top-[3px] rounded-full left-1 bg-border-divider data-[state=checked]:bg-comp-accent-default shadow-basic group-hover:bg-border-bound data-[state=checked]:group-hover:bg-comp-accent-hovered", size === SWITCH_SIZES.REGULAR &&
+                    "size-7 data-[state=checked]:left-[42px] group-hover:shadow-large", size === SWITCH_SIZES.SMALL &&
+                    "size-5 data-[state=checked]:left-[36px] group-hover:shadow-basic", thumbClassName) }), checked ? (jsx(Text, { variant: size === SWITCH_SIZES.REGULAR
+                    ? "boldBodyBoldCompact"
+                    : "boldLabelBoldCompact", className: "text-comp-accent-default pl-2 text-left group-hover:text-comp-accent-hovered", as: "div", children: "ON" })) : (jsx(Text, { variant: size === SWITCH_SIZES.REGULAR
+                    ? "medBodyMedCompact"
+                    : "medLabelMedCompact", className: cn("text-comp-mono-subtle-default text-right group-hover:text-comp-mono-subtle-hovered", size === SWITCH_SIZES.REGULAR && "pr-1.5", size === SWITCH_SIZES.SMALL && "pr-[3px]"), as: "div", children: "OFF" }))] }));
+};
+const Switch = (props) => {
+    const [checked, setChecked] = useState(props.checked);
+    const handleCheckedChange = (value) => {
+        setChecked(value);
+        props.onCheckedChange?.(value);
+    };
+    return (jsxs(Fragment, { children: [props.variant === SWITCH_VARIANTS.FILLED && (jsx(FilledSwitch, { checked: checked, onCheckedChange: handleCheckedChange, ...props })), props.variant === SWITCH_VARIANTS.OUTLINED && (jsx(OutlinedSwitch, { checked: checked, onCheckedChange: handleCheckedChange, ...props }))] }));
+};
+
+export { Autocomplete, Calendar, Checkbox, ContextMenu, ContextMenuArrow, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuItemIndicator, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DataTable, DatePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogPortal, DialogTrigger, HORIZONTAL_TAB_SIZES, HorizontalTab, HorizontalTabs, InteractiveListItem, InteractiveListItemActions, InteractiveListItemContent, InteractiveListItemIcon, MULTIPLE_SELECT_SIZES, ModeTab, ModeTabs, MultipleSelect, MultipleSelectContent, MultipleSelectTrigger, MultipleSelectValue, RadioGroup, RadioItem, SELECT_TRIGGER_SIZES, SELECT_TRIGGER_VARIANTS, SWITCH_SIZES, SWITCH_VARIANTS, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, Switch, TOOLTIP_SHORT_SIZES, TOOLTIP_SHORT_VARIANTS, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Tooltip, TooltipArrow, TooltipContent, TooltipDescription, TooltipFooter, TooltipHeader, TooltipTrigger, VERTICAL_MENU_SIZES, VERTICAL_MENU_VARIANTS, VerticalMenu, VerticalMenus };