@exem-ui/react 0.3.2 → 0.3.3

package/dist/chunk-CMKUMLDS.js

@@ -0,0 +1,715 @@
+'use strict';
+
+var chunk5M47B2XJ_js = require('./chunk-5M47B2XJ.js');
+var utils = require('@exem-ui/core/utils');
+var TabsPrimitive = require('@radix-ui/react-tabs');
+var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+var SelectPrimitive = require('@radix-ui/react-select');
+var TooltipPrimitive = require('@radix-ui/react-tooltip');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var TabsPrimitive__namespace = /*#__PURE__*/_interopNamespace(TabsPrimitive);
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var SelectPrimitive__namespace = /*#__PURE__*/_interopNamespace(SelectPrimitive);
+var TooltipPrimitive__namespace = /*#__PURE__*/_interopNamespace(TooltipPrimitive);
+
+var segmentListVariants = utils.cva(
+  "inline-flex items-center overflow-hidden rounded-medium bg-elevation-elevation-2",
+  {
+    variants: {
+      size: {
+        small: "h-7 gap-0 p-0.5",
+        medium: "h-8 gap-0 p-0.5",
+        large: "h-10 gap-0 p-0.5"
+      }
+    },
+    defaultVariants: {
+      size: "medium"
+    }
+  }
+);
+var segmentItemVariants = utils.cva(
+  [
+    "flex flex-1 items-center justify-center rounded-weak",
+    "focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-ring",
+    "disabled:cursor-not-allowed",
+    "data-[state=active]:bg-component-segmentedOption data-[state=active]:text-text-primary data-[state=active]:shadow-weak",
+    "data-[state=inactive]:text-text-tertiary data-[state=inactive]:disabled:text-text-disabled",
+    "transition-colors duration-200 ease-in-out"
+  ],
+  {
+    variants: {
+      size: {
+        small: "h-6 gap-0.5 text-body-3 font-medium",
+        medium: "h-7 gap-1 text-body-2 font-medium",
+        large: "h-9 gap-1.5 text-body-2 font-medium"
+      }
+    },
+    defaultVariants: {
+      size: "medium"
+    }
+  }
+);
+var segmentIconVariants = utils.cva("flex items-center justify-center", {
+  variants: {
+    size: {
+      small: "size-4",
+      medium: "size-4",
+      large: "size-5"
+    }
+  },
+  defaultVariants: {
+    size: "medium"
+  }
+});
+var SegmentContext = React.createContext(void 0);
+var useSegmentContext = () => {
+  const context = React.useContext(SegmentContext);
+  if (!context) {
+    throw new Error("Segment components must be used within a Segment");
+  }
+  return context;
+};
+var Segment = React.forwardRef(
+  ({ size = "medium", children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(SegmentContext.Provider, { value: { size }, children: /* @__PURE__ */ jsxRuntime.jsx(TabsPrimitive__namespace.Root, { ref, ...props, children }) })
+);
+Segment.List = React.forwardRef(
+  ({ className, ...props }, ref) => {
+    const { size } = useSegmentContext();
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      TabsPrimitive__namespace.List,
+      {
+        ref,
+        className: utils.cn(segmentListVariants({ size }), className),
+        ...props
+      }
+    );
+  }
+);
+Segment.Item = React.forwardRef(
+  ({ className, leftIcon, children, ...props }, ref) => {
+    const { size } = useSegmentContext();
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      TabsPrimitive__namespace.Trigger,
+      {
+        ref,
+        className: utils.cn(segmentItemVariants({ size }), className),
+        ...props,
+        children: [
+          leftIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: utils.cn(segmentIconVariants({ size })), children: leftIcon }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex items-center", children })
+        ]
+      }
+    );
+  }
+);
+Segment.Content = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    TabsPrimitive__namespace.Content,
+    {
+      ref,
+      className: utils.cn(
+        "ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+        className
+      ),
+      ...props
+    }
+  )
+);
+Segment.displayName = "Segment";
+Segment.List.displayName = "Segment.List";
+Segment.Content.displayName = "Segment.Content";
+Segment.Item.displayName = "Segment.Item";
+var FlatSegment = ({ items, disabled, className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(Segment, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx(Segment.List, { className, children: items.map((item) => /* @__PURE__ */ React.createElement(Segment.Item, { ...item, key: item.value, disabled: disabled || item.disabled })) }) });
+FlatSegment.displayName = "FlatSegment";
+var commonInputVariants = {
+  // Container variants - 전체 컴포넌트 래퍼
+  container: utils.cva("flex flex-col"),
+  // Label variants - 라벨 텍스트
+  label: utils.cva("inline-block font-regular text-text-primary", {
+    variants: {
+      size: {
+        xsmall: "mb-[2px] text-body-3",
+        small: "mb-[4px] text-body-2",
+        medium: "mb-[4px] text-body-2",
+        large: "mb-[6px] text-body-1"
+      },
+      disabled: {
+        true: "text-text-disabled"
+      },
+      required: {
+        true: 'after:ml-0.5 after:text-text-critical after:content-["*"]'
+      }
+    },
+    compoundVariants: [
+      {
+        required: true,
+        disabled: true,
+        className: "after:text-text-disabled"
+      }
+    ],
+    defaultVariants: { size: "medium" }
+  }),
+  // Description variants - 설명 텍스트
+  description: utils.cva("mt-0.5 inline-block text-text-tertiary", {
+    variants: {
+      size: {
+        xsmall: "text-caption",
+        small: "text-body-3",
+        medium: "text-body-3",
+        large: "text-body-2"
+      },
+      error: {
+        true: "text-text-critical"
+      },
+      disabled: {
+        true: "text-text-disabled"
+      }
+    },
+    compoundVariants: [
+      {
+        error: true,
+        disabled: true,
+        className: "text-text-disabled"
+        // disabled 우선 적용
+      }
+    ],
+    defaultVariants: { size: "medium" }
+  }),
+  // Icon variants - 아이콘 크기
+  icon: utils.cva("shrink-0", {
+    variants: {
+      size: {
+        xsmall: "size-4",
+        small: "size-4",
+        medium: "size-4",
+        large: "size-5"
+      }
+    },
+    defaultVariants: { size: "medium" }
+  })
+};
+
+// src/input/selectVariants.ts
+var selectVariants = {
+  container: commonInputVariants.container,
+  content: utils.cn(
+    "relative border border-border-primary z-50 min-w-[8rem] overflow-hidden rounded-medium bg-background-overlay shadow-weak",
+    "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+    "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1"
+  ),
+  description: commonInputVariants.description,
+  iconSize: commonInputVariants.icon,
+  item: utils.cva(
+    "relative flex w-full cursor-pointer select-none items-center rounded-weak px-2 text-body-2 text-text-primary outline-none hover:bg-elevation-elevation-2 data-[disabled]:pointer-events-none data-[state=checked]:bg-elevation-accent data-[disabled]:text-text-disabled",
+    {
+      defaultVariants: { size: "medium" },
+      variants: {
+        size: {
+          xsmall: "h-6",
+          small: "h-7",
+          medium: "h-8",
+          large: "h-10"
+        }
+      }
+    }
+  ),
+  itemText: utils.cva("truncate flex items-center flex-1 min-w-0", {
+    defaultVariants: { size: "medium" },
+    variants: {
+      size: {
+        xsmall: "h-6",
+        small: "h-7",
+        medium: "h-8",
+        large: "h-10"
+      }
+    }
+  }),
+  label: commonInputVariants.label,
+  trigger: utils.cva(
+    "group flex w-full items-center justify-between rounded-medium outline-none disabled:cursor-not-allowed disabled:bg-elevation-elevation-2 disabled:text-text-disabled data-[state=open]:border data-[state=open]:border-border-focused [&>span]:line-clamp-1 [&[data-placeholder]]:text-text-tertiary [&_svg]:text-icon-primary",
+    {
+      compoundVariants: [
+        {
+          className: "border-border-accent text-tint-foreground-sky bg-elevation-accent [&[data-placeholder]]:text-tint-foreground-sky [&_svg]:text-tint-foreground-sky",
+          focus: true,
+          variant: "line"
+        },
+        // active + fill: 배경만 accent로 변경
+        {
+          className: "bg-elevation-accent text-tint-foreground-sky [&[data-placeholder]]:text-tint-foreground-sky [&_svg]:text-tint-foreground-sky",
+          active: true,
+          variant: "fill"
+        },
+        // active + line: 배경 accent + 테두리 accent
+        {
+          className: "bg-elevation-accent border-border-accent text-tint-foreground-sky [&[data-placeholder]]:text-tint-foreground-sky [&_svg]:text-tint-foreground-sky",
+          active: true,
+          variant: "line"
+        }
+      ],
+      defaultVariants: {
+        active: false,
+        error: false,
+        focus: false,
+        size: "medium",
+        variant: "fill"
+      },
+      variants: {
+        active: {
+          false: "",
+          true: ""
+        },
+        error: {
+          false: "",
+          true: "border !border-border-critical"
+        },
+        focus: {
+          false: "",
+          // 현재는 line 타입만 focus 가능
+          true: ""
+        },
+        size: {
+          xsmall: "h-6 px-[4px] text-body-3",
+          small: "h-7 px-[6px] text-body-2",
+          medium: "h-8 px-[8px] text-body-2",
+          large: "h-10 px-[10px] text-body-1"
+        },
+        variant: {
+          fill: "bg-elevation-elevation-2",
+          line: "border-border-primary border"
+        }
+      }
+    }
+  ),
+  triggerInner: utils.cva("flex w-full items-center", {
+    defaultVariants: { size: "medium" },
+    variants: {
+      size: {
+        xsmall: "gap-0",
+        small: "gap-[2px]",
+        medium: "gap-[2px]",
+        large: "gap-[4px]"
+      }
+    }
+  }),
+  viewport: utils.cn("flex flex-col gap-0.5 p-1")
+};
+var SelectContext = React.createContext(null);
+var useSelectContext = () => {
+  const context = React.useContext(SelectContext);
+  if (!context) {
+    throw new Error("Select components must be used within a Select");
+  }
+  return context;
+};
+var SelectGroupContext = React.createContext(null);
+var useSelectGroupContext = () => {
+  return React.useContext(SelectGroupContext);
+};
+var Select = React.forwardRef(
+  ({
+    children,
+    size = "medium",
+    variant = "fill",
+    error = false,
+    disabled = false,
+    focus = false,
+    active = false,
+    className,
+    ...selectProps
+  }, ref) => {
+    const uniqueId = React.useId();
+    const id = `select-${uniqueId}`;
+    return /* @__PURE__ */ jsxRuntime.jsx(SelectContext.Provider, { value: { active, disabled, error, focus, id, size, variant }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: utils.cn(selectVariants.container(), className), children: /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Root, { disabled, ...selectProps, children }) }) });
+  }
+);
+Select.Value = React.forwardRef(({ className, children, ...props }, ref) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Value, { ref, className, ...props, children });
+});
+Select.Trigger = React.forwardRef(
+  ({ className, children, leftIcon, ...props }, ref) => {
+    const { size, error, id, variant, focus, active } = useSelectContext();
+    const groupContext = useSelectGroupContext();
+    const groupClasses = groupContext ? utils.cn("rounded-none border-0", {
+      "rounded-l-medium": groupContext.isFirstChild,
+      "rounded-r-medium": groupContext.isLastChild,
+      // line variant: group이 외곽 border를 제공하므로, open 시 border 대신 inset ring 사용
+      "data-[state=open]:border-0 data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-border-focused": variant === "line"
+    }) : void 0;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      SelectPrimitive__namespace.Trigger,
+      {
+        ref,
+        id,
+        "data-slot": "select-trigger",
+        className: utils.cn(
+          selectVariants.trigger({ active, error, focus, size, variant }),
+          groupClasses,
+          className
+        ),
+        ...props,
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn(selectVariants.triggerInner({ size })), children: [
+          leftIcon && /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: utils.cn(
+                selectVariants.iconSize({ size }),
+                "flex items-center justify-center group-disabled:text-icon-disabled"
+              ),
+              children: leftIcon
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 flex-1 truncate text-left", children }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            chunk5M47B2XJ_js.ChevronDown,
+            {
+              type: "regular",
+              className: utils.cn(
+                selectVariants.iconSize({ size }),
+                "transition-transform duration-200 group-data-[state=open]:rotate-180",
+                "group-disabled:text-icon-disabled"
+              )
+            }
+          )
+        ] })
+      }
+    );
+  }
+);
+Select.Box = React.forwardRef(
+  ({ placeholder, leftIcon, className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(Select.Trigger, { ref, leftIcon, className, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(Select.Value, { placeholder }) });
+  }
+);
+Select.List = React.forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    SelectPrimitive__namespace.Content,
+    {
+      ref,
+      "data-slot": "select-content",
+      className: utils.cn(selectVariants.content, "max-h-60 ", className),
+      position: "popper",
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        SelectPrimitive__namespace.Viewport,
+        {
+          "data-slot": "select-viewport",
+          className: utils.cn(
+            selectVariants.viewport,
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+          ),
+          children
+        }
+      )
+    }
+  ) })
+);
+Select.Label = React.forwardRef(
+  ({ children, required = false, size: sizeProp, className }, ref) => {
+    const { size: contextSize, disabled, id } = useSelectContext();
+    const groupContext = useSelectGroupContext();
+    const size = sizeProp ?? groupContext?.size ?? contextSize;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "label",
+      {
+        ref,
+        htmlFor: id,
+        className: utils.cn(selectVariants.label({ disabled, required, size }), className),
+        children
+      }
+    );
+  }
+);
+Select.Item = React.forwardRef(
+  ({
+    className,
+    children,
+    leftIcon,
+    rightIcon,
+    leftIconSize,
+    rightIconSize,
+    size: sizeProp,
+    ...props
+  }, ref) => {
+    const { size: contextSize } = useSelectContext();
+    const groupContext = useSelectGroupContext();
+    const size = sizeProp ?? groupContext?.size ?? contextSize;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      SelectPrimitive__namespace.Item,
+      {
+        "data-slot": "select-item",
+        ref,
+        className: utils.cn(selectVariants.item({ size }), className),
+        ...props,
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full items-center justify-between", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full items-center gap-0.5", children: [
+            leftIcon && /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: utils.cn(
+                  selectVariants.iconSize({ size: leftIconSize ?? size }),
+                  "flex items-center justify-center text-icon-primary"
+                ),
+                children: leftIcon
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.ItemText, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils.cn(selectVariants.itemText({ size })), children }) })
+          ] }),
+          rightIcon && /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: utils.cn(
+                selectVariants.iconSize({ size: rightIconSize ?? size }),
+                "flex items-center justify-center text-icon-primary"
+              ),
+              children: rightIcon
+            }
+          )
+        ] })
+      }
+    );
+  }
+);
+Select.Empty = React.forwardRef(
+  ({ children = "No data", className }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: utils.cn("flex min-h-8 items-center justify-center p-2", className), children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-body-2 text-text-disabled", children }) });
+  }
+);
+Select.Description = React.forwardRef(
+  ({ children, size: sizeProp, className }, ref) => {
+    const { size: contextSize, error, disabled } = useSelectContext();
+    const groupContext = useSelectGroupContext();
+    const size = sizeProp ?? groupContext?.size ?? contextSize;
+    if (!children) {
+      return null;
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        "data-slot": "select-description",
+        className: utils.cn(selectVariants.description({ disabled, error, size }), className),
+        children: /* @__PURE__ */ jsxRuntime.jsx("p", { children })
+      }
+    );
+  }
+);
+Select.Group = React.forwardRef(
+  ({ children, size = "medium", variant = "fill", hasBackground = false, className }, ref) => {
+    const childArray = React__namespace.Children.toArray(children);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: utils.cn(
+          "flex w-fit flex-row items-stretch overflow-clip rounded-medium",
+          variant === "line" && "border border-border-primary",
+          hasBackground && "bg-elevation-elevation-0",
+          className
+        ),
+        children: childArray.map((child, index) => {
+          const isFirst = index === 0;
+          const isLast = index === childArray.length - 1;
+          return /* @__PURE__ */ jsxRuntime.jsxs(React__namespace.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              SelectGroupContext.Provider,
+              {
+                value: { isFirstChild: isFirst, isLastChild: isLast, size, variant },
+                children: child
+              }
+            ),
+            !isLast && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px self-stretch bg-border-primary" })
+          ] }, index);
+        })
+      }
+    );
+  }
+);
+Select.displayName = "Select";
+Select.Label.displayName = "Select.Label";
+Select.Trigger.displayName = "Select.Trigger";
+Select.Box.displayName = "Select.Box";
+Select.Value.displayName = "Select.Value";
+Select.List.displayName = "Select.List";
+Select.Item.displayName = "Select.Item";
+Select.Empty.displayName = "Select.Empty";
+Select.Description.displayName = "Select.Description";
+Select.Group.displayName = "Select.Group";
+function FlatSelect({
+  options,
+  placeholder,
+  onBlur,
+  onFocus,
+  onOpenChange,
+  label,
+  description,
+  required,
+  listClassName,
+  leftIcon,
+  ...props
+}) {
+  const { className, ...selectProps } = props;
+  const selectRef = React.useRef(null);
+  const { handleBlur, handleFocus } = useFocusWithin(selectRef, {
+    onBlur,
+    onFocus
+  });
+  const handleOpenChange = (open) => {
+    if (open) {
+      handleFocus();
+    }
+    onOpenChange?.(open);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: selectRef, className, children: /* @__PURE__ */ jsxRuntime.jsxs(Select, { ...selectProps, onOpenChange: handleOpenChange, children: [
+    label && /* @__PURE__ */ jsxRuntime.jsx(Select.Label, { required, children: label }),
+    /* @__PURE__ */ jsxRuntime.jsx(Select.Trigger, { onBlur: handleBlur, onFocus: handleFocus, leftIcon, children: /* @__PURE__ */ jsxRuntime.jsx(Select.Value, { placeholder, className: "truncate" }) }),
+    description && /* @__PURE__ */ jsxRuntime.jsx(Select.Description, { children: description }),
+    /* @__PURE__ */ jsxRuntime.jsxs(Select.List, { className: listClassName, children: [
+      options.length === 0 && /* @__PURE__ */ jsxRuntime.jsx(Select.Empty, { children: placeholder }),
+      options.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(
+        Select.Item,
+        {
+          value: option.value,
+          disabled: option.disabled,
+          className: "flex max-w-full items-center justify-between",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "block flex-1 truncate", children: option.label }),
+            option.rightSlot
+          ]
+        },
+        option.value
+      ))
+    ] })
+  ] }) });
+}
+function useFocusWithin(containerRef, callbacks) {
+  const [isFocused, setIsFocused] = React.useState(false);
+  const handleBlur = (event) => {
+    if (containerRef.current?.contains(event.relatedTarget)) {
+      return;
+    }
+    setIsFocused(false);
+    callbacks?.onBlur?.();
+  };
+  const handleFocus = () => {
+    if (isFocused) {
+      return;
+    }
+    setIsFocused(true);
+    callbacks?.onFocus?.();
+  };
+  return { handleBlur, handleFocus, isFocused };
+}
+FlatSelect.displayName = "FlatSelect";
+var tooltipContentVariants = utils.cva(
+  [
+    // Base layout
+    "z-50 flex flex-col items-start overflow-hidden",
+    "rounded-medium",
+    "text-text-static-light",
+    "bg-component-tooltip border border-border-primary",
+    "shadow-medium",
+    "animate-in fade-in-0 zoom-in-95",
+    "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+    "data-[side=bottom]:slide-in-from-top-2",
+    "data-[side=left]:slide-in-from-right-2",
+    "data-[side=right]:slide-in-from-left-2",
+    "data-[side=top]:slide-in-from-bottom-2"
+  ],
+  {
+    variants: {
+      size: {
+        tiny: "px-2 py-1 text-body-3",
+        small: "w-[160px] gap-[8px] px-[12px] py-[10px]",
+        medium: "w-[240px] gap-[8px] px-[12px] py-[10px]",
+        large: "w-[320px] gap-[8px] px-[12px] py-[10px]",
+        xlarge: "w-[400px] gap-[8px] px-[12px] py-[10px]"
+      }
+    },
+    defaultVariants: { size: "small" }
+  }
+);
+var tooltipTitleVariants = utils.cva([
+  "text-body-1 font-semibold text-text-static-light",
+  "group-data-[size=tiny]/tooltip-content:text-body-3"
+]);
+var tooltipTextVariants = utils.cva([
+  "text-body-2 font-regular text-text-static-light",
+  "group-data-[size=tiny]/tooltip-content:text-body-3"
+]);
+var Tooltip = TooltipPrimitive__namespace.Root;
+Tooltip.Provider = TooltipPrimitive__namespace.Provider;
+Tooltip.Trigger = TooltipPrimitive__namespace.Trigger;
+Tooltip.Content = React.forwardRef(({ className, sideOffset = 4, size, children, portalContainer, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+  TooltipPrimitive__namespace.Content,
+  {
+    ref,
+    sideOffset,
+    "data-size": size,
+    className: utils.cn("group/tooltip-content", tooltipContentVariants({ size }), className),
+    ...props,
+    children
+  }
+) }));
+Tooltip.Title = React.forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: utils.cn(tooltipTitleVariants(), className), ...props, children })
+);
+Tooltip.Description = React.forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: utils.cn(tooltipTextVariants(), className), ...props, children })
+);
+Tooltip.displayName = "Tooltip";
+Tooltip.Content.displayName = "Tooltip.Content";
+Tooltip.Title.displayName = "Tooltip.Title";
+Tooltip.Description.displayName = "Tooltip.Description";
+Tooltip.Trigger.displayName = "Tooltip.Trigger";
+Tooltip.Provider.displayName = "Tooltip.Provider";
+var FlatTooltip = ({ children, title, size, description, ...props }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(Tooltip.Provider, { delayDuration: 0, skipDelayDuration: 0, children: /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Tooltip.Trigger, { asChild: true, children }),
+    /* @__PURE__ */ jsxRuntime.jsxs(Tooltip.Content, { size, ...props, children: [
+      title && /* @__PURE__ */ jsxRuntime.jsx(Tooltip.Title, { children: title }),
+      description && /* @__PURE__ */ jsxRuntime.jsx(Tooltip.Description, { children: description })
+    ] })
+  ] }) });
+};
+function ConditionalTooltip({ children, tooltip }) {
+  if (typeof tooltip === "string") {
+    return /* @__PURE__ */ jsxRuntime.jsx(FlatTooltip, { size: "tiny", description: tooltip, children });
+  }
+  if (tooltip && typeof tooltip === "object" && "description" in tooltip && tooltip.use !== false) {
+    return /* @__PURE__ */ jsxRuntime.jsx(FlatTooltip, { size: tooltip.size || "tiny", ...tooltip, children });
+  }
+  return children;
+}
+FlatTooltip.displayName = "FlatTooltip";
+ConditionalTooltip.displayName = "ConditionalTooltip";
+
+exports.ConditionalTooltip = ConditionalTooltip;
+exports.FlatSegment = FlatSegment;
+exports.FlatSelect = FlatSelect;
+exports.FlatTooltip = FlatTooltip;
+exports.Segment = Segment;
+exports.Select = Select;
+exports.Tooltip = Tooltip;
+exports.commonInputVariants = commonInputVariants;
+//# sourceMappingURL=chunk-CMKUMLDS.js.map
+//# sourceMappingURL=chunk-CMKUMLDS.js.map