@cloudflare/kumo 2.1.0 → 2.2.1

package/dist/chunks/select-brzswxbhhf1ktx9t.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"select-brzswxbhhf1ktx9t.js","sources":["../../src/components/select/select.tsx"],"sourcesContent":["import { Select as SelectBase } from \"@base-ui/react/select\";\nimport { CaretUpDownIcon, CheckIcon } from \"@phosphor-icons/react\";\nimport { forwardRef, useId } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { buttonVariants } from \"../button\";\nimport { KUMO_INPUT_VARIANTS, type KumoInputSize } from \"../input/input\";\nimport { SkeletonLine } from \"../loader\";\nimport { Field, type FieldErrorMatch } from \"../field/field\";\nimport {\n  usePortalContainer,\n  type PortalContainer,\n} from \"../../utils/portal-provider\";\n\n/** Select variant definitions. */\nexport const KUMO_SELECT_VARIANTS = {\n  size: KUMO_INPUT_VARIANTS.size,\n} as const;\n\nexport const KUMO_SELECT_DEFAULT_VARIANTS = {\n  size: \"base\",\n} as const;\n\n/**\n * Select component styling metadata for Figma plugin code generation\n * Extracted from select.tsx implementation (source of truth)\n */\nexport const KUMO_SELECT_STYLING = {\n  trigger: {\n    height: 36, // h-9\n    paddingX: 12, // px-3\n    borderRadius: 8, // rounded-lg\n    background: \"bg-kumo-elevated\",\n    text: \"text-color-surface\",\n    ring: \"color-border\",\n    fontSize: 16, // text-base\n    fontWeight: 400, // font-normal\n  },\n  stateTokens: {\n    focus: { ring: \"color-active\" },\n    disabled: { opacity: 0.5 },\n  },\n  icons: {\n    caret: { name: \"ph-caret-up-down\", size: 20 },\n    check: { name: \"ph-check\", size: 20 },\n  },\n  popup: {\n    background: \"bg-kumo-elevated\",\n    ring: \"border-kumo-line\",\n    borderRadius: 8, // rounded-lg\n    padding: 6, // p-1.5\n  },\n  option: {\n    paddingX: 8, // px-2\n    paddingY: 6, // py-1.5\n    borderRadius: 4, // rounded\n    fontSize: 16, // text-base\n    highlightBackground: \"color-surface-secondary\",\n  },\n} as const;\n\n// Derived types from KUMO_SELECT_VARIANTS\nexport type KumoSelectSize = keyof typeof KUMO_SELECT_VARIANTS.size;\n\nexport interface KumoSelectVariantsProps {\n  /**\n   * Size of the select trigger. Matches Input component sizes.\n   * - `\"xs\"` — Extra small for compact UIs (h-5 / 20px)\n   * - `\"sm\"` — Small for secondary fields (h-6.5 / 26px)\n   * - `\"base\"` — Default size (h-9 / 36px)\n   * - `\"lg\"` — Large for prominent fields (h-10 / 40px)\n   * @default \"base\"\n   */\n  size?: KumoSelectSize;\n}\n\nexport function selectVariants({\n  size = KUMO_SELECT_DEFAULT_VARIANTS.size,\n}: KumoSelectVariantsProps = {}) {\n  return cn(\n    buttonVariants({ size }),\n    \"justify-between font-normal\",\n    \"focus:opacity-100 focus:ring-kumo-focus/50 focus-visible:ring-inset *:in-focus:opacity-100\",\n  );\n}\n\nconst triggerIconStyles: Record<\n  KumoInputSize,\n  { iconSize: number; className: string }\n> = {\n  xs: { iconSize: 12, className: \"text-kumo-subtle\" },\n  sm: { iconSize: 14, className: \"text-kumo-subtle\" },\n  base: { iconSize: 16, className: \"text-kumo-subtle\" },\n  lg: { iconSize: 18, className: \"text-kumo-subtle\" },\n};\n\n/**\n * Shape for items that carry extra metadata (disabled state, tooltip).\n * Plain `ReactNode` values are still supported for backward compatibility.\n */\nexport interface SelectItemDescriptor {\n  /** Display label for the option. */\n  label: ReactNode;\n  /** When `true`, the option cannot be selected. */\n  disabled?: boolean;\n}\n\n/** Value type accepted by the `items` object-map prop. */\nexport type SelectItemValue = ReactNode | SelectItemDescriptor;\n\nfunction isItemDescriptor(\n  value: SelectItemValue,\n): value is SelectItemDescriptor {\n  if (value === null || value === undefined) return false;\n  if (typeof value !== \"object\" || Array.isArray(value)) return false;\n  // React elements have $$typeof — exclude them\n  if (\"$$typeof\" in (value as object)) return false;\n  // Promises are not descriptors\n  if (value instanceof Promise) return false;\n  // Must have a defined label (not just the key existing)\n  const candidate = value as unknown as Record<string, unknown>;\n  return \"label\" in candidate && candidate.label !== undefined;\n}\n\n/**\n * Normalizes items to array format for Base UI.\n * Object maps are converted to array format so Base UI can properly\n * handle value matching and placeholder display.\n */\nfunction normalizeItems<T>(\n  items:\n    | Record<string, SelectItemValue>\n    | ReadonlyArray<{ label: ReactNode; value: T }>,\n): ReadonlyArray<{ label: ReactNode; value: T }> {\n  if (Array.isArray(items)) {\n    return items;\n  }\n  // Convert object map to array format\n  return Object.entries(items).map(([key, entry]) => ({\n    value: key as T,\n    label: isItemDescriptor(entry) ? entry.label : entry,\n  }));\n}\n\n/**\n * Auto-generates Select.Option elements from items prop.\n * Only used when children are not explicitly provided.\n * Filters out null values (typically used for placeholders).\n */\nfunction renderOptionsFromItems<T>(\n  items:\n    | Record<string, SelectItemValue>\n    | ReadonlyArray<{ label: ReactNode; value: T }>,\n): ReactNode {\n  const normalizedItems = normalizeItems(items);\n\n  // Build a lookup for disabled metadata from object-map items.\n  // Object-map keys are always strings (Record<string, ...>), so the lookup\n  // uses string keys. The array form ({ label, value }[]) does not support\n  // descriptors — consumers should use the children API for that case.\n  const disabledLookup = new Map<string, { disabled?: boolean }>();\n  if (!Array.isArray(items)) {\n    for (const [key, entry] of Object.entries(items)) {\n      if (isItemDescriptor(entry)) {\n        disabledLookup.set(key, { disabled: entry.disabled });\n      }\n    }\n  }\n\n  // Filter out null values and render options\n  return normalizedItems\n    .filter((item) => item.value !== null)\n    .map((item, index) => {\n      const key =\n        typeof item.value === \"string\" ? item.value : `option-${index}`;\n      // When items is an object-map, value is always a string key from\n      // Object.entries. When items is an array, disabledLookup is empty.\n      const meta =\n        typeof item.value === \"string\"\n          ? disabledLookup.get(item.value)\n          : undefined;\n\n      return (\n        <Option key={key} value={item.value} disabled={meta?.disabled}>\n          {item.label}\n        </Option>\n      );\n    });\n}\n\ntype SelectPropsGeneric<T, Multiple extends boolean | undefined = false> = Omit<\n  SelectBase.Root.Props<T, Multiple>,\n  \"items\"\n> &\n  KumoSelectVariantsProps & {\n    multiple?: Multiple;\n    /**\n     * A function that returns a `ReactNode` to format the selected value.\n     * Only called when a value is selected — use `placeholder` for the empty state.\n     * @example\n     * ```tsx\n     * <Select\n     *   placeholder=\"Select a user...\"\n     *   renderValue={(user) => user.name}\n     * />\n     * ```\n     */\n    renderValue?: (value: Multiple extends true ? T[] : T) => ReactNode;\n    className?: string;\n    /**\n     * Data structure of items rendered in the popup.\n     * Accepts a plain object map (`{ key: \"Label\" }`) or an array of `{ label, value }`.\n     *\n     * Object-map values can be a `ReactNode` (backward-compatible) **or** a\n     * `SelectItemDescriptor` for extra metadata:\n     *\n     * ```tsx\n     * items={{\n     *   apple: \"Apple\",\n     *   banana: { label: \"Banana\", disabled: true, disabledReason: \"Out of season\" },\n     * }}\n     * ```\n     */\n    items?:\n      | Record<string, SelectItemValue>\n      | ReadonlyArray<{ label: ReactNode; value: T }>;\n    /**\n     * Label content for the select.\n     * When provided, enables the Field wrapper with a visible label.\n     * For accessibility without a visible label, use `aria-label` instead.\n     */\n    label?: ReactNode;\n    /**\n     * @deprecated Use `aria-label` for hidden labels instead of `label` + `hideLabel={true}`.\n     * When `label` is provided without `hideLabel`, the label is now visible by default (matching Input behavior).\n     * This prop will be removed in a future version.\n     */\n    hideLabel?: boolean;\n    placeholder?: string;\n    loading?: boolean;\n    /** Tooltip content to display next to the label via an info icon */\n    labelTooltip?: ReactNode;\n    /** Helper text displayed below the select */\n    description?: ReactNode;\n    /** Error message or validation error object */\n    error?: string | { message: ReactNode; match: FieldErrorMatch };\n    /**\n     * Container element for the portal. Use this to render the select inside\n     * a Shadow DOM or custom container. Overrides `KumoPortalProvider` context.\n     * @default document.body (or KumoPortalProvider container if set)\n     */\n    container?: PortalContainer;\n  };\n\n/**\n * Select component props.\n *\n * **Accessible Name Required:** Select should have one of:\n * 1. `label` prop (recommended) - enables Field wrapper with visible label\n * 2. `aria-label` - for selects without visible label (accessibility-only)\n * 3. `aria-labelledby` - for custom label association\n *\n * @example\n * ```tsx\n * // With visible label (recommended)\n * <Select label=\"Country\" onValueChange={setValue}>\n *   <Select.Option value=\"us\">United States</Select.Option>\n *   <Select.Option value=\"uk\">United Kingdom</Select.Option>\n * </Select>\n *\n * // Without visible label (use aria-label for accessibility)\n * <Select aria-label=\"Select a country\" onValueChange={setValue}>\n *   <Select.Option value=\"us\">United States</Select.Option>\n * </Select>\n * ```\n */\nexport interface SelectProps {\n  /** Additional CSS classes merged via `cn()`. */\n  className?: string;\n  /** Size of the select trigger. Matches Input component sizes. */\n  size?: KumoSelectSize;\n  /**\n   * Label content for the select.\n   * When provided, enables the Field wrapper with a visible label above the select.\n   * For accessibility without a visible label, use `aria-label` instead.\n   */\n  label?: ReactNode;\n  /**\n   * @deprecated Use `aria-label` for hidden labels instead of `label` + `hideLabel={true}`.\n   * When `label` is provided without `hideLabel`, the label is now visible by default (matching Input behavior).\n   * This prop will be removed in a future version.\n   */\n  hideLabel?: boolean;\n  /** Placeholder text shown when no value is selected. */\n  placeholder?: string;\n  /** When `true`, shows a skeleton loader in place of the selected value. */\n  loading?: boolean;\n  /** Whether the select is disabled. */\n  disabled?: boolean;\n  /** Whether the select is required. When `false`, shows \"(optional)\" text. */\n  required?: boolean;\n  /** Tooltip content displayed next to the label via an info icon. */\n  labelTooltip?: ReactNode;\n  /** Currently selected value (controlled mode). */\n  value?: unknown;\n  /** Initial value for uncontrolled mode. */\n  defaultValue?: unknown;\n  /** Callback fired when the selected value changes. */\n  onValueChange?: (value: unknown) => void;\n  /** Enable multi-select mode. */\n  multiple?: boolean;\n  /** `Select.Option` elements to render in the dropdown. */\n  children?: ReactNode;\n  /** Helper text displayed below the select. */\n  description?: ReactNode;\n  /** Error message string or validation error object with `match` key. */\n  error?: string | { message: ReactNode; match: FieldErrorMatch };\n}\n\n/**\n * Select.Option component props.\n */\nexport interface SelectOptionProps {\n  /** The option content. */\n  children: ReactNode;\n  /** The value associated with this option. */\n  value: unknown;\n  /** When `true`, the option cannot be selected. */\n  disabled?: boolean;\n  /** Additional CSS classes merged via `cn()`. */\n  className?: string;\n}\n\n/**\n * Dropdown for selecting a value from a list of options.\n * Wraps Base UI Select with Kumo styling and optional Field integration.\n *\n * @example\n * ```tsx\n * <Select label=\"Fruit\" onValueChange={setFruit}>\n *   <Select.Option value=\"apple\">Apple</Select.Option>\n *   <Select.Option value=\"banana\">Banana</Select.Option>\n * </Select>\n * ```\n */\nexport function Select<T, Multiple extends boolean | undefined = false>({\n  children,\n  className,\n  renderValue,\n  label,\n  hideLabel,\n  placeholder,\n  loading,\n  size = KUMO_SELECT_DEFAULT_VARIANTS.size,\n  labelTooltip,\n  description,\n  error,\n  required,\n  container: containerProp,\n  ...props\n}: SelectPropsGeneric<T, Multiple> & { required?: boolean }) {\n  const labelId = useId();\n  const contextContainer = usePortalContainer();\n  const container = containerProp ?? contextContainer ?? undefined;\n  const propLookup = props as Record<string, unknown>;\n  const ariaLabel = propLookup[\"aria-label\"] as string | undefined;\n  const ariaLabelledby = propLookup[\"aria-labelledby\"] as string | undefined;\n  // For aria-label, use string label or placeholder (ReactNode labels can't be used for aria-label)\n  const fallbackLabel = typeof label === \"string\" ? label : placeholder;\n\n  // Deprecation warning for hideLabel\n  if (process.env.NODE_ENV !== \"production\" && hideLabel !== undefined) {\n    console.warn(\n      \"[Kumo Select]: `hideLabel` is deprecated. For hidden labels, use `aria-label` instead of `label` + `hideLabel={true}`.\\n\" +\n        \"  Migration:\\n\" +\n        '  - For visible labels: <Select label=\"Country\" /> (hideLabel no longer needed)\\n' +\n        '  - For hidden labels: <Select aria-label=\"Select a country\" /> (remove label and hideLabel)',\n    );\n  }\n\n  // New behavior: label presence determines Field wrapper visibility (like Input)\n  // hideLabel is only respected for backward compatibility when explicitly set to true\n  const useFieldWrapper = label && hideLabel !== true;\n  const triggerLabelledBy = useFieldWrapper\n    ? undefined\n    : (ariaLabelledby ?? (label ? labelId : undefined));\n  const triggerAriaLabel =\n    ariaLabel ?? (!triggerLabelledBy ? fallbackLabel : undefined);\n\n  // Normalize items to array format for Base UI compatibility\n  // This fixes placeholder not showing with object map items\n  const normalizedItems = props.items ? normalizeItems(props.items) : undefined;\n\n  // Auto-render children from items if no explicit children provided\n  const renderedChildren = children\n    ? children\n    : props.items\n      ? renderOptionsFromItems(props.items)\n      : null;\n\n  // Wrap renderValue to handle null values properly:\n  // - When value is null, show placeholder (Base UI ignores placeholder when children fn provided)\n  // - When value is non-null, call user's renderValue\n  const valueChildrenFn = renderValue\n    ? (value: unknown) => {\n        if (value == null) {\n          // If no placeholder provided, return null to show nothing (same as no renderValue)\n          if (placeholder == null) {\n            return null;\n          }\n          return <span className=\"text-kumo-placeholder\">{placeholder}</span>;\n        }\n        // Cast through `any` as a deliberate type boundary: Base UI passes `unknown`,\n        // but our renderValue expects the generic T (or T[] for multiple)\n        return renderValue(value as any);\n      }\n    : undefined;\n\n  // Exclude Kumo-extended `items` from Base UI spread — we pass `normalizedItems` instead\n  const { items: _items, ...baseProps } = props;\n\n  const selectControl = (\n    <SelectBase.Root\n      {...baseProps}\n      items={normalizedItems}\n      disabled={loading || props.disabled}\n    >\n      <SelectBase.Trigger\n        className={cn(\n          selectVariants({ size }),\n          props.disabled && \"cursor-not-allowed opacity-50\",\n          className,\n        )}\n        aria-label={triggerAriaLabel}\n        aria-labelledby={triggerLabelledBy}\n      >\n        {loading ? (\n          <SkeletonLine className=\"w-32\" />\n        ) : (\n          <SelectBase.Value\n            placeholder={placeholder}\n            className=\"min-w-0 truncate data-[placeholder]:text-kumo-placeholder\"\n          >\n            {valueChildrenFn}\n          </SelectBase.Value>\n        )}\n        <SelectBase.Icon\n          className={cn(\n            \"flex shrink-0 items-center\",\n            triggerIconStyles[size].className,\n          )}\n        >\n          <CaretUpDownIcon\n            size={triggerIconStyles[size].iconSize}\n            className=\"fill-current\"\n          />\n        </SelectBase.Icon>\n      </SelectBase.Trigger>\n      <SelectBase.Portal container={container}>\n        <SelectBase.Positioner>\n          <SelectBase.Popup\n            className={cn(\n              \"flex flex-col\",\n              \"max-h-[var(--available-height)] bg-kumo-base text-kumo-default\",\n              \"rounded-lg shadow-lg ring ring-kumo-line\",\n              \"min-w-[calc(var(--anchor-width)+3px)] py-1.5\",\n            )}\n          >\n            <SelectBase.List\n              className={cn(\n                \"min-h-0 flex-1 overflow-y-auto overscroll-none scroll-pt-2 scroll-pb-2\",\n              )}\n            >\n              {renderedChildren}\n            </SelectBase.List>\n          </SelectBase.Popup>\n        </SelectBase.Positioner>\n      </SelectBase.Portal>\n    </SelectBase.Root>\n  );\n\n  // Use Field wrapper when label is provided and not hidden\n  if (useFieldWrapper) {\n    return (\n      <Field\n        label={label}\n        required={required}\n        labelTooltip={labelTooltip}\n        description={description}\n        error={\n          error\n            ? typeof error === \"string\"\n              ? { message: error, match: true }\n              : error\n            : undefined\n        }\n      >\n        {selectControl}\n      </Field>\n    );\n  }\n\n  // Render with standalone label when label is hidden (sr-only)\n  // Still show description/error for accessibility and UX\n  const normalizedError = error\n    ? typeof error === \"string\"\n      ? { message: error, match: true as const }\n      : error\n    : undefined;\n\n  return (\n    <div className=\"grid gap-2\">\n      {label && (\n        <span id={labelId} className=\"sr-only\">\n          {label}\n        </span>\n      )}\n      {selectControl}\n      {normalizedError ? (\n        <span className=\"text-sm text-kumo-danger\">\n          {normalizedError.message}\n        </span>\n      ) : (\n        description && (\n          <span className=\"text-sm leading-snug text-kumo-subtle\">\n            {description}\n          </span>\n        )\n      )}\n    </div>\n  );\n}\n\ntype OptionProps<T> = {\n  children: ReactNode;\n  value: T;\n  /** When `true`, the option cannot be selected. */\n  disabled?: boolean;\n  /** Additional CSS classes merged via `cn()`. */\n  className?: string;\n};\n\nfunction Option<T>({ children, value, disabled, className }: OptionProps<T>) {\n  return (\n    <SelectBase.Item\n      value={value}\n      disabled={disabled}\n      className={cn(\n        \"group mx-1.5 flex cursor-pointer items-center justify-between gap-2 rounded px-2 py-1.5 text-base outline-none\",\n        \"focus-visible:z-50 focus-visible:ring-2 focus-visible:ring-kumo-brand focus-visible:ring-inset\",\n        \"data-highlighted:bg-kumo-tint\",\n        \"data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50\",\n        className,\n      )}\n    >\n      <SelectBase.ItemText>{children}</SelectBase.ItemText>\n      <SelectBase.ItemIndicator>\n        <CheckIcon />\n      </SelectBase.ItemIndicator>\n    </SelectBase.Item>\n  );\n}\n\n// --- Select.Group ---\n\ntype GroupProps = {\n  children: ReactNode;\n  /** Additional CSS classes merged via `cn()`. */\n  className?: string;\n};\n\n/**\n * Groups related options together with an accessible `role=\"group\"`.\n * Use with `Select.GroupLabel` to provide a visible heading for the group.\n *\n * @example\n * ```tsx\n * <Select.Group>\n *   <Select.GroupLabel>Fruits</Select.GroupLabel>\n *   <Select.Option value=\"apple\">Apple</Select.Option>\n * </Select.Group>\n * ```\n */\nconst Group = forwardRef<HTMLDivElement, GroupProps>(\n  ({ children, className }, ref) => (\n    <SelectBase.Group ref={ref} className={cn(className)}>\n      {children}\n    </SelectBase.Group>\n  ),\n);\nGroup.displayName = \"Select.Group\";\n\n// --- Select.GroupLabel ---\n\ntype GroupLabelProps = {\n  children: ReactNode;\n  /** Additional CSS classes merged via `cn()`. */\n  className?: string;\n};\n\n/**\n * A visible heading for a `Select.Group`.\n * Automatically associated with its parent group for accessibility.\n *\n * @example\n * ```tsx\n * <Select.Group>\n *   <Select.GroupLabel>Available</Select.GroupLabel>\n *   <Select.Option value=\"a\">Option A</Select.Option>\n * </Select.Group>\n * ```\n */\nconst GroupLabel = forwardRef<HTMLDivElement, GroupLabelProps>(\n  ({ children, className }, ref) => (\n    <SelectBase.GroupLabel\n      ref={ref}\n      className={cn(\n        \"px-3.5 py-1.5 text-sm font-semibold text-kumo-subtle\",\n        className,\n      )}\n    >\n      {children}\n    </SelectBase.GroupLabel>\n  ),\n);\nGroupLabel.displayName = \"Select.GroupLabel\";\n\n// --- Select.Separator ---\n\ntype SeparatorProps = {\n  /** Additional CSS classes merged via `cn()`. */\n  className?: string;\n};\n\n/**\n * A visual divider between option groups.\n *\n * @example\n * ```tsx\n * <Select.Option value=\"a\">Option A</Select.Option>\n * <Select.Separator />\n * <Select.Option value=\"b\">Option B</Select.Option>\n * ```\n */\nconst Separator = forwardRef<HTMLDivElement, SeparatorProps>(\n  ({ className }, ref) => (\n    <SelectBase.Separator\n      ref={ref}\n      className={cn(\"-mx-1 my-1 h-px bg-kumo-hairline\", className)}\n    />\n  ),\n);\nSeparator.displayName = \"Select.Separator\";\n\n// --- Assign sub-components ---\n\nSelect.Option = Option;\nSelect.Group = Group;\nSelect.GroupLabel = GroupLabel;\nSelect.Separator = Separator;\n\n(Select.Option as { displayName?: string }).displayName = \"Select.Option\";\n"],"names":["KUMO_INPUT_VARIANTS","KUMO_SELECT_DEFAULT_VARIANTS","selectVariants","size","cn","buttonVariants","triggerIconStyles","isItemDescriptor","value","candidate","normalizeItems","items","key","entry","renderOptionsFromItems","normalizedItems","disabledLookup","item","index","meta","jsx","Option","Select","children","className","renderValue","label","hideLabel","placeholder","loading","labelTooltip","description","error","required","containerProp","props","labelId","useId","contextContainer","usePortalContainer","container","propLookup","ariaLabel","ariaLabelledby","fallbackLabel","useFieldWrapper","triggerLabelledBy","triggerAriaLabel","renderedChildren","valueChildrenFn","_items","baseProps","selectControl","jsxs","SelectBase.Root","SelectBase.Trigger","SkeletonLine","SelectBase.Value","SelectBase.Icon","CaretUpDownIcon","SelectBase.Portal","SelectBase.Positioner","SelectBase.Popup","SelectBase.List","Field","normalizedError","disabled","SelectBase.Item","SelectBase.ItemText","SelectBase.ItemIndicator","CheckIcon","Group","forwardRef","ref","SelectBase.Group","GroupLabel","SelectBase.GroupLabel","Separator","SelectBase.Separator"],"mappings":"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"}

package/dist/chunks/tabs-fdkhdhv8kvnpp8nt.js

@@ -1,92 +0,0 @@
-"use client";
-import { jsxs as d, jsx as a } from "react/jsx-runtime";
-import { c as s } from "./cn-ct4n7r74mh8y0f48.js";
-import { bd as x, be as T, bf as w, bg as N } from "./vendor-base-ui-epfrwb4nfbd4btaz.js";
-const V = {
-  variant: "segmented"
-};
-function z({
-  tabs: u,
-  value: n,
-  selectedValue: m,
-  onValueChange: c,
-  activateOnFocus: b,
-  className: g,
-  listClassName: f,
-  indicatorClassName: h,
-  variant: i = V.variant
-}) {
-  const o = u ?? [];
-  if (o.length === 0)
-    return null;
-  const v = o[0]?.value, l = n !== void 0, p = {
-    value: l ? n : void 0,
-    defaultValue: l ? void 0 : m ?? v
-  }, t = i === "segmented", r = i === "underline";
-  return /* @__PURE__ */ d(
-    x,
-    {
-      ...p,
-      className: s("relative isolate min-w-0 font-medium", g),
-      onValueChange: (e) => {
-        const k = String(e);
-        c?.(k);
-      },
-      children: [
-        t && /* @__PURE__ */ a("div", { className: "absolute inset-x-0 top-1/2 z-0 h-9 -translate-y-1/2 rounded-lg bg-kumo-recessed" }),
-        /* @__PURE__ */ d(
-          T,
-          {
-            activateOnFocus: b,
-            className: s(
-              "scrollbar-hide relative flex min-w-0 shrink items-stretch",
-              t && "h-9 rounded-lg bg-kumo-recessed px-0.5 ring ring-kumo-hairline/70",
-              r && "h-7 gap-4 border-b border-kumo-hairline pb-2",
-              f
-            ),
-            children: [
-              o.map((e) => /* @__PURE__ */ a(
-                w,
-                {
-                  value: e.value,
-                  render: e.render,
-                  className: s(
-                    "relative z-2 flex cursor-pointer items-center rounded bg-transparent text-base whitespace-nowrap focus:outline-none focus:ring-kumo-focus/50 focus-visible:ring-2 focus-visible:ring-kumo-brand",
-                    t && "my-0.5 rounded-md px-2.5 text-kumo-subtle hover:text-kumo-default aria-selected:text-kumo-default focus-visible:ring-inset",
-                    r && "px-2 py-2.5 text-kumo-subtle hover:bg-kumo-tint hover:text-kumo-default aria-selected:hover:bg-kumo-tint aria-selected:font-medium aria-selected:text-kumo-default",
-                    e.className
-                  ),
-                  children: e.label
-                },
-                e.value
-              )),
-              /* @__PURE__ */ a(
-                N,
-                {
-                  render: (e) => /* @__PURE__ */ a(
-                    "div",
-                    {
-                      ...e,
-                      className: s(
-                        "absolute z-1 left-0",
-                        "w-(--active-tab-width) translate-x-(--active-tab-left) transition-all duration-200",
-                        "data-[rendered=false]:scale-90 data-[rendered=false]:opacity-0",
-                        t && "top-(--active-tab-top) h-(--active-tab-height) rounded-md bg-kumo-base shadow-sm ring ring-kumo-line",
-                        r && "bottom-0 h-0.5 bg-kumo-brand",
-                        h
-                      )
-                    }
-                  )
-                }
-              )
-            ]
-          }
-        )
-      ]
-    }
-  );
-}
-export {
-  z as T
-};
-//# sourceMappingURL=tabs-fdkhdhv8kvnpp8nt.js.map

package/dist/chunks/tabs-fdkhdhv8kvnpp8nt.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"tabs-fdkhdhv8kvnpp8nt.js","sources":["../../src/components/tabs/tabs.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport type { TabsTab } from \"@base-ui/react/tabs\";\nimport { Tabs as TabsPrimitive } from \"@base-ui/react/tabs\";\nimport { cn } from \"../../utils/cn\";\n\n/** Tabs variant definitions. */\nexport const KUMO_TABS_VARIANTS = {\n  variant: [\"segmented\", \"underline\"],\n} as const;\n\nexport const KUMO_TABS_DEFAULT_VARIANTS = {\n  variant: \"segmented\",\n} as const;\n\nexport const KUMO_TABS_STYLING = {\n  container: {\n    height: 34,\n    borderRadius: 8,\n    background: \"color-accent\",\n    padding: 1,\n  },\n  tab: {\n    paddingX: 10,\n    verticalMargin: 1,\n    fontSize: 16,\n    fontWeight: 500,\n    borderRadius: 8,\n    activeColor: \"text-color-surface\",\n    inactiveColor: \"text-color-label\",\n  },\n  indicator: {\n    background: \"color-surface-secondary\",\n    ring: \"color-color-2\",\n    borderRadius: 6,\n    shadow: \"shadow-sm\",\n  },\n} as const;\n\n// Derived types from KUMO_TABS_VARIANTS\nexport interface KumoTabsVariantsProps {\n  /**\n   * Tab style.\n   * - `\"segmented\"` — Pill-shaped indicator on a filled track\n   * - `\"underline\"` — Underline indicator below tab text\n   * @default \"segmented\"\n   */\n  variant?: (typeof KUMO_TABS_VARIANTS.variant)[number];\n}\n\n/** Configuration for a single tab within the Tabs component. */\nexport type TabsItem = {\n  /** Unique identifier for the tab, used as the controlled value. */\n  value: string;\n  /** Display content for the tab trigger. */\n  label: ReactNode;\n  /** Additional CSS classes for this tab trigger. */\n  className?: string;\n  /**\n   * Custom render function or element to replace the tab element (e.g. for link-based tabs).\n   * When using a function, it receives the props to spread on the element and the tab's state.\n   */\n  render?: TabsTab.Props[\"render\"];\n};\n\n/**\n * Tabs component props.\n *\n * @example\n * ```tsx\n * <Tabs\n *   tabs={[\n *     { value: \"overview\", label: \"Overview\" },\n *     { value: \"settings\", label: \"Settings\" },\n *   ]}\n *   value={activeTab}\n *   onValueChange={setActiveTab}\n * />\n * ```\n */\nexport type TabsProps = KumoTabsVariantsProps & {\n  /** Array of tab items to render. */\n  tabs?: TabsItem[];\n  /** Controlled value. When set, component becomes controlled. */\n  value?: string;\n  /** Default selected value for uncontrolled mode. Ignored when `value` is set. */\n  selectedValue?: string;\n  /** Callback fired when the active tab changes. */\n  onValueChange?: (value: string) => void;\n  /**\n   * When `true`, tabs are activated immediately upon receiving focus via arrow keys.\n   * When `false` (default), tabs receive focus but require Enter/Space to activate.\n   */\n  activateOnFocus?: boolean;\n  /** Additional CSS classes for the root element. */\n  className?: string;\n  /** Additional CSS classes for the tab list element. */\n  listClassName?: string;\n  /** Additional CSS classes for the indicator element. */\n  indicatorClassName?: string;\n};\n\n/**\n * Tab navigation component with segmented or underline style.\n * Built on Base UI Tabs with animated active indicator.\n *\n * @example\n * ```tsx\n * <Tabs\n *   variant=\"segmented\"\n *   tabs={[{ value: \"tab1\", label: \"Tab 1\" }, { value: \"tab2\", label: \"Tab 2\" }]}\n *   value={active}\n *   onValueChange={setActive}\n * />\n * ```\n */\nexport function Tabs({\n  tabs,\n  value,\n  selectedValue,\n  onValueChange,\n  activateOnFocus,\n  className,\n  listClassName,\n  indicatorClassName,\n  variant = KUMO_TABS_DEFAULT_VARIANTS.variant,\n}: TabsProps) {\n  const items: TabsItem[] = tabs ?? [];\n\n  if (items.length === 0) {\n    return null;\n  }\n\n  const fallbackValue = items[0]?.value;\n  const isControlled = value !== undefined;\n  const rootProps = {\n    value: isControlled ? value : undefined,\n    defaultValue: isControlled ? undefined : (selectedValue ?? fallbackValue),\n  };\n\n  const isSegmented = variant === \"segmented\";\n  const isUnderline = variant === \"underline\";\n\n  return (\n    <TabsPrimitive.Root\n      {...rootProps}\n      className={cn(\"relative isolate min-w-0 font-medium\", className)}\n      onValueChange={(nextValue) => {\n        const stringValue = String(nextValue);\n        onValueChange?.(stringValue);\n      }}\n    >\n      {/* Background element for segmented variant */}\n      {isSegmented && (\n        <div className=\"absolute inset-x-0 top-1/2 z-0 h-9 -translate-y-1/2 rounded-lg bg-kumo-recessed\" />\n      )}\n      <TabsPrimitive.List\n        activateOnFocus={activateOnFocus}\n        className={cn(\n          \"scrollbar-hide relative flex min-w-0 shrink items-stretch\",\n          isSegmented && \"h-9 rounded-lg bg-kumo-recessed px-0.5 ring ring-kumo-hairline/70\",\n          isUnderline && \"h-7 gap-4 border-b border-kumo-hairline pb-2\",\n          listClassName,\n        )}\n      >\n        {items.map((tab) => (\n          <TabsPrimitive.Tab\n            key={tab.value}\n            value={tab.value}\n            render={tab.render}\n            className={cn(\n              \"relative z-2 flex cursor-pointer items-center rounded bg-transparent text-base whitespace-nowrap focus:outline-none focus:ring-kumo-focus/50 focus-visible:ring-2 focus-visible:ring-kumo-brand\",\n              isSegmented &&\n                \"my-0.5 rounded-md px-2.5 text-kumo-subtle hover:text-kumo-default aria-selected:text-kumo-default focus-visible:ring-inset\",\n              isUnderline &&\n                \"px-2 py-2.5 text-kumo-subtle hover:bg-kumo-tint hover:text-kumo-default aria-selected:hover:bg-kumo-tint aria-selected:font-medium aria-selected:text-kumo-default\",\n              tab.className,\n            )}\n          >\n            {tab.label}\n          </TabsPrimitive.Tab>\n        ))}\n        <TabsPrimitive.Indicator\n          render={(props) => (\n            <div\n              {...props}\n              className={cn(\n                \"absolute z-1 left-0\",\n                \"w-(--active-tab-width) translate-x-(--active-tab-left) transition-all duration-200\",\n                \"data-[rendered=false]:scale-90 data-[rendered=false]:opacity-0\",\n                isSegmented &&\n                  \"top-(--active-tab-top) h-(--active-tab-height) rounded-md bg-kumo-base shadow-sm ring ring-kumo-line\",\n                isUnderline && \"bottom-0 h-0.5 bg-kumo-brand\",\n                indicatorClassName,\n              )}\n            />\n          )}\n        />\n      </TabsPrimitive.List>\n    </TabsPrimitive.Root>\n  );\n}\n"],"names":["KUMO_TABS_DEFAULT_VARIANTS","Tabs","tabs","value","selectedValue","onValueChange","activateOnFocus","className","listClassName","indicatorClassName","variant","items","fallbackValue","isControlled","rootProps","isSegmented","isUnderline","jsxs","TabsPrimitive.Root","cn","nextValue","stringValue","jsx","TabsPrimitive.List","tab","TabsPrimitive.Tab","TabsPrimitive.Indicator","props"],"mappings":";;;;AAUO,MAAMA,IAA6B;AAAA,EACxC,SAAS;AACX;AAuGO,SAASC,EAAK;AAAA,EACnB,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,eAAAC;AAAA,EACA,eAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,WAAAC;AAAA,EACA,eAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,SAAAC,IAAUV,EAA2B;AACvC,GAAc;AACZ,QAAMW,IAAoBT,KAAQ,CAAA;AAElC,MAAIS,EAAM,WAAW;AACnB,WAAO;AAGT,QAAMC,IAAgBD,EAAM,CAAC,GAAG,OAC1BE,IAAeV,MAAU,QACzBW,IAAY;AAAA,IAChB,OAAOD,IAAeV,IAAQ;AAAA,IAC9B,cAAcU,IAAe,SAAaT,KAAiBQ;AAAA,EAAA,GAGvDG,IAAcL,MAAY,aAC1BM,IAAcN,MAAY;AAEhC,SACE,gBAAAO;AAAA,IAACC;AAAAA,IAAA;AAAA,MACE,GAAGJ;AAAA,MACJ,WAAWK,EAAG,wCAAwCZ,CAAS;AAAA,MAC/D,eAAe,CAACa,MAAc;AAC5B,cAAMC,IAAc,OAAOD,CAAS;AACpC,QAAAf,IAAgBgB,CAAW;AAAA,MAC7B;AAAA,MAGC,UAAA;AAAA,QAAAN,KACC,gBAAAO,EAAC,OAAA,EAAI,WAAU,kFAAA,CAAkF;AAAA,QAEnG,gBAAAL;AAAA,UAACM;AAAAA,UAAA;AAAA,YACC,iBAAAjB;AAAA,YACA,WAAWa;AAAA,cACT;AAAA,cACAJ,KAAe;AAAA,cACfC,KAAe;AAAA,cACfR;AAAA,YAAA;AAAA,YAGD,UAAA;AAAA,cAAAG,EAAM,IAAI,CAACa,MACV,gBAAAF;AAAA,gBAACG;AAAAA,gBAAA;AAAA,kBAEC,OAAOD,EAAI;AAAA,kBACX,QAAQA,EAAI;AAAA,kBACZ,WAAWL;AAAA,oBACT;AAAA,oBACAJ,KACE;AAAA,oBACFC,KACE;AAAA,oBACFQ,EAAI;AAAA,kBAAA;AAAA,kBAGL,UAAAA,EAAI;AAAA,gBAAA;AAAA,gBAZAA,EAAI;AAAA,cAAA,CAcZ;AAAA,cACD,gBAAAF;AAAA,gBAACI;AAAAA,gBAAA;AAAA,kBACC,QAAQ,CAACC,MACP,gBAAAL;AAAA,oBAAC;AAAA,oBAAA;AAAA,sBACE,GAAGK;AAAA,sBACJ,WAAWR;AAAA,wBACT;AAAA,wBACA;AAAA,wBACA;AAAA,wBACAJ,KACE;AAAA,wBACFC,KAAe;AAAA,wBACfP;AAAA,sBAAA;AAAA,oBACF;AAAA,kBAAA;AAAA,gBACF;AAAA,cAAA;AAAA,YAEJ;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/chunks/tooltip-fjxy4s4l75hjxp1x.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"tooltip-fjxy4s4l75hjxp1x.js","sources":["../../src/components/tooltip/tooltip.tsx"],"sourcesContent":["import { Tooltip as TooltipBase } from \"@base-ui/react/tooltip\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { resolveVariant } from \"../../utils/resolve-variant\";\nimport {\n  usePortalContainer,\n  type PortalContainer,\n} from \"../../utils/portal-provider\";\n\n/** Tooltip side variant definitions mapping positions to their Tailwind classes. */\nexport const KUMO_TOOLTIP_VARIANTS = {\n  side: {\n    top: {\n      classes: \"\",\n      description: \"Tooltip appears above the trigger\",\n    },\n    bottom: {\n      classes: \"\",\n      description: \"Tooltip appears below the trigger\",\n    },\n    left: {\n      classes: \"\",\n      description: \"Tooltip appears to the left of the trigger\",\n    },\n    right: {\n      classes: \"\",\n      description: \"Tooltip appears to the right of the trigger\",\n    },\n  },\n} as const;\n\nexport const KUMO_TOOLTIP_DEFAULT_VARIANTS = {\n  side: \"top\",\n} as const;\n\n// Derived types from KUMO_TOOLTIP_VARIANTS\nexport type KumoTooltipSide = keyof typeof KUMO_TOOLTIP_VARIANTS.side;\n\nexport interface KumoTooltipVariantsProps {\n  /**\n   * Preferred side of the trigger to render the tooltip.\n   * - `\"top\"` — Tooltip appears above the trigger\n   * - `\"bottom\"` — Tooltip appears below the trigger\n   * - `\"left\"` — Tooltip appears to the left of the trigger\n   * - `\"right\"` — Tooltip appears to the right of the trigger\n   * @default \"top\"\n   */\n  side?: KumoTooltipSide;\n}\n\nexport function tooltipVariants({\n  side = KUMO_TOOLTIP_DEFAULT_VARIANTS.side,\n}: KumoTooltipVariantsProps = {}) {\n  return cn(\n    // Base styles\n    \"flex origin-[var(--transform-origin)] flex-col rounded-md bg-kumo-base px-2.5 py-1.5 text-sm text-kumo-default\",\n    \"shadow-lg shadow-kumo-tip-shadow outline outline-1 outline-kumo-fill\",\n    \"transition-[transform,opacity] duration-150\",\n    \"data-[starting-style]:scale-90 data-[starting-style]:opacity-0\",\n    \"data-[ending-style]:scale-90 data-[ending-style]:opacity-0\",\n    \"data-[instant]:duration-0\",\n    // Apply side-specific styles (currently none, but extensible)\n    resolveVariant(KUMO_TOOLTIP_VARIANTS.side, side, KUMO_TOOLTIP_DEFAULT_VARIANTS.side).classes,\n  );\n}\n\nexport const TooltipProvider = TooltipBase.Provider;\n\ntype BaseTooltipProps = ComponentPropsWithoutRef<typeof TooltipBase.Root>;\n\ntype TriggerProps = ComponentPropsWithoutRef<typeof TooltipBase.Trigger>;\n\n/** Alignment options for tooltip positioning. Source: PositionerProps[\"align\"] */\ntype TooltipAlign = \"start\" | \"center\" | \"end\";\n\n/**\n * Tooltip component props.\n *\n * @example\n * ```tsx\n * <Tooltip content=\"Add new item\" render={<Button shape=\"square\" icon={PlusIcon} />}>\n *   Add\n * </Tooltip>\n * ```\n */\nexport type TooltipProps = BaseTooltipProps &\n  KumoTooltipVariantsProps & {\n    /**\n     * Alignment on the axis perpendicular to `side`.\n     * - `\"start\"` — Align to the start edge\n     * - `\"center\"` — Center-aligned\n     * - `\"end\"` — Align to the end edge\n     */\n    align?: TooltipAlign;\n    /**\n     * @deprecated Use the `render` prop instead.\n     * @example `<Tooltip render={<Button />}>Label</Tooltip>` instead of `<Tooltip asChild><Button>Label</Button></Tooltip>`\n     */\n    asChild?: boolean;\n    /** Additional CSS classes merged via `cn()`. */\n    className?: string;\n    /** Content to display inside the tooltip popup. */\n    content: ReactNode;\n    /**\n     * Container element for the portal. Use this to render the tooltip inside\n     * a Shadow DOM or custom container. Overrides `KumoPortalProvider` context.\n     * @default document.body (or KumoPortalProvider container if set)\n     */\n    container?: PortalContainer;\n    /**\n     * How long to wait before closing the tooltip. Specified in milliseconds.\n     * @default 0\n     */\n    closeDelay?: number;\n    /**\n     * How long to wait before opening the tooltip. Specified in milliseconds.\n     * @default 600\n     */\n    delay?: number;\n    /**\n     * Element to render as the tooltip trigger. Children are passed to this element.\n     * @example `<Tooltip content=\"Save\" render={<Button />}>Save</Tooltip>`\n     */\n    render?: TriggerProps[\"render\"];\n  };\n\n/**\n * Accessible popup that shows additional information on hover/focus.\n * Wrap your app or section with `<TooltipProvider>` to enable delay grouping.\n *\n * @example\n * ```tsx\n * <Tooltip content=\"Save changes\" render={<Button variant=\"primary\" />}>\n *   Save\n * </Tooltip>\n * ```\n */\nexport function Tooltip({\n  content,\n  children,\n  align,\n  asChild,\n  render,\n  side,\n  className,\n  container: containerProp,\n  closeDelay,\n  delay,\n  ...props\n}: TooltipProps) {\n  const contextContainer = usePortalContainer();\n  const container = containerProp ?? contextContainer ?? undefined;\n\n  // Support both render prop (preferred) and deprecated asChild pattern\n  // When using asChild, children IS the render element, so don't pass it as children\n  const resolvedRender =\n    render ?? (asChild ? (children as TriggerProps[\"render\"]) : undefined);\n  const shouldUseRender = resolvedRender !== undefined;\n\n  return (\n    <TooltipBase.Root {...props}>\n      <TooltipBase.Trigger\n        closeDelay={closeDelay}\n        delay={delay}\n        className={cn(\n          // Defensive resets when rendering as button wrapper (not render/asChild)\n          // These prevent global button styles from polluting the trigger\n          // Consumer styles passed via className will override these (tailwind-merge)\n          !shouldUseRender &&\n            \"inline-flex items-center bg-transparent border-none shadow-none p-0 m-0 h-auto min-h-0 leading-[0]\",\n          // Tooltip triggers are disclosure elements, not actions — override\n          // cursor: pointer (e.g. from Button used via render prop) so the\n          // trigger doesn't appear clickable\n          \"cursor-default\",\n          className,\n        )}\n        render={resolvedRender}\n      >\n        {asChild ? undefined : (children as ReactNode)}\n      </TooltipBase.Trigger>\n      <TooltipBase.Portal container={container}>\n        <TooltipBase.Positioner align={align} side={side} sideOffset={10}>\n          <TooltipBase.Popup\n            className={cn(\n              \"flex origin-[var(--transform-origin)] flex-col rounded-md bg-kumo-base px-2.5 py-1.5 text-sm text-kumo-default\",\n              \"shadow-lg shadow-kumo-tip-shadow outline outline-kumo-fill\",\n              \"transition-[transform,opacity] duration-150\",\n              \"data-[starting-style]:scale-90 data-[starting-style]:opacity-0\",\n              \"data-[ending-style]:scale-90 data-[ending-style]:opacity-0\",\n              \"data-[instant]:duration-0\",\n              \"kumo-tooltip-popup\",\n            )}\n          >\n            <TooltipBase.Arrow\n              className={cn(\n                \"flex\",\n                \"data-[side=bottom]:top-[-8px]\",\n                \"data-[side=left]:right-[-13px] data-[side=left]:rotate-90\",\n                \"data-[side=right]:left-[-13px] data-[side=right]:-rotate-90\",\n                \"data-[side=top]:bottom-[-8px] data-[side=top]:rotate-180\",\n              )}\n            >\n              <ArrowSvg />\n            </TooltipBase.Arrow>\n            {content}\n          </TooltipBase.Popup>\n        </TooltipBase.Positioner>\n      </TooltipBase.Portal>\n    </TooltipBase.Root>\n  );\n}\n\n/**\n * Arrow SVG with three paths for proper border rendering in both light and dark modes.\n * This approach matches Base UI's tooltip implementation.\n *\n * The three paths are:\n * 1. ArrowFill - The main arrow body, matches tooltip background\n * 2. ArrowOuterStroke - Border visible in light mode only (transparent in dark)\n * 3. ArrowInnerStroke - Border visible in dark mode only (transparent in light)\n *\n * This is necessary because the outer and inner stroke paths have different geometries,\n * and using both ensures the arrow border aligns perfectly with the tooltip's outline\n * in both color modes.\n *\n * @see https://base-ui.com/react/components/tooltip\n */\nfunction ArrowSvg(props: React.ComponentProps<\"svg\">) {\n  return (\n    <svg width=\"20\" height=\"10\" viewBox=\"0 0 20 10\" fill=\"none\" {...props}>\n      <path\n        d=\"M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z\"\n        className=\"fill-kumo-base\"\n      />\n      <path\n        d=\"M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z\"\n        className=\"fill-kumo-tip-shadow\"\n      />\n      <path\n        d=\"M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z\"\n        className=\"fill-kumo-tip-stroke\"\n      />\n    </svg>\n  );\n}\n"],"names":["TooltipProvider","TooltipBase.Provider","Tooltip","content","children","align","asChild","render","side","className","containerProp","closeDelay","delay","props","contextContainer","usePortalContainer","container","resolvedRender","jsxs","TooltipBase.Root","jsx","TooltipBase.Trigger","cn","TooltipBase.Portal","TooltipBase.Positioner","TooltipBase.Popup","TooltipBase.Arrow","ArrowSvg"],"mappings":";;;;;AAkEO,MAAMA,IAAkBC;AAuExB,SAASC,EAAQ;AAAA,EACtB,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA,QAAAC;AAAA,EACA,MAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAWC;AAAA,EACX,YAAAC;AAAA,EACA,OAAAC;AAAA,EACA,GAAGC;AACL,GAAiB;AACf,QAAMC,IAAmBC,EAAA,GACnBC,IAAYN,KAAiBI,KAAoB,QAIjDG,IACJV,MAAWD,IAAWF,IAAsC;AAG9D,SACE,gBAAAc,EAACC,GAAA,EAAkB,GAAGN,GACpB,UAAA;AAAA,IAAA,gBAAAO;AAAA,MAACC;AAAAA,MAAA;AAAA,QACC,YAAAV;AAAA,QACA,OAAAC;AAAA,QACA,WAAWU;AAAA;AAAA;AAAA;AAAA,UAIT,EAXgBL,MAAmB,WAYjC;AAAA;AAAA;AAAA;AAAA,UAIF;AAAA,UACAR;AAAA,QAAA;AAAA,QAEF,QAAQQ;AAAA,QAEP,cAAU,SAAab;AAAA,MAAA;AAAA,IAAA;AAAA,IAE1B,gBAAAgB,EAACG,GAAA,EAAmB,WAAAP,GAClB,UAAA,gBAAAI,EAACI,GAAA,EAAuB,OAAAnB,GAAc,MAAAG,GAAY,YAAY,IAC5D,UAAA,gBAAAU;AAAA,MAACO;AAAAA,MAAA;AAAA,QACC,WAAWH;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,QAGF,UAAA;AAAA,UAAA,gBAAAF;AAAA,YAACM;AAAAA,YAAA;AAAA,cACC,WAAWJ;AAAA,gBACT;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,cAAA;AAAA,cAGF,4BAACK,GAAA,CAAA,CAAS;AAAA,YAAA;AAAA,UAAA;AAAA,UAEXxB;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,GAEL,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;AAiBA,SAASwB,EAASd,GAAoC;AACpD,SACE,gBAAAK,EAAC,OAAA,EAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,QAAQ,GAAGL,GAC9D,UAAA;AAAA,IAAA,gBAAAO;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,GAAE;AAAA,QACF,WAAU;AAAA,MAAA;AAAA,IAAA;AAAA,IAEZ,gBAAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,GAAE;AAAA,QACF,WAAU;AAAA,MAAA;AAAA,IAAA;AAAA,IAEZ,gBAAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,GAAE;AAAA,QACF,WAAU;AAAA,MAAA;AAAA,IAAA;AAAA,EACZ,GACF;AAEJ;"}