@lablup/ui-common 0.1.0-alpha.2 → 0.1.0-alpha.21

package/dist/components/StatCard/StatCard2.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatCard2.js","names":[],"sources":["../../../src/components/StatCard/StatCard.tsx"],"sourcesContent":["/**\n * StatCard Component\n *\n * Compact metric card for dashboards. Renders a label, a large numeric\n * value (with optional unit/suffix), and optional icon, hint, trend, or\n * accent tone. Wraps `BaseCard` so it inherits hover/focus/click affordances\n * and design tokens consistently with the rest of the common library.\n *\n * Designed for cross-page reuse: Squad dashboard, Statistics page, Cowork\n * dashboard, etc.\n */\n\nimport { memo, useEffect, useRef, useState, type ReactNode, type JSX } from \"react\";\nimport { usePrefersReducedMotion } from \"../../hooks/usePrefersReducedMotion\";\nimport { BaseCard } from \"../BaseCard\";\nimport { Skeleton } from \"../Skeleton\";\nimport \"./StatCard.css\";\n\nexport type StatCardEmphasis = \"compact\" | \"default\" | \"prominent\";\n\nexport type StatCardTone = \"default\" | \"success\" | \"warning\" | \"danger\" | \"info\";\n\nexport type StatCardTrendDirection = \"up\" | \"down\" | \"flat\";\n\nexport interface StatCardTrend {\n  /** Direction indicator (up / down / flat) */\n  direction: StatCardTrendDirection;\n  /** Human-readable delta label (e.g. \"+12%\", \"-3\", \"0\") */\n  label: string;\n  /** Optional ARIA description for screen readers */\n  ariaLabel?: string;\n}\n\nexport interface StatCardProps {\n  /** Short label rendered above the value (UPPERCASE styled) */\n  label: string;\n  /** Primary metric value (number is coerced to localised string) */\n  value: string | number;\n  /** Optional suffix appended to the value (e.g. \"/ 4\", \"GB\") */\n  valueSuffix?: string;\n  /** Optional helper line under the value (e.g. context, secondary metric) */\n  hint?: ReactNode;\n  /** Optional leading icon node, rendered inside an accent badge */\n  icon?: ReactNode;\n  /** Visual tone, mirrors Badge variants. Default: \"default\" */\n  tone?: StatCardTone;\n  /** Optional trend indicator under the value */\n  trend?: StatCardTrend;\n  /** Click handler. Renders the card as keyboard-accessible button. */\n  onClick?: () => void;\n  /** Render skeletons instead of value/label content while loading */\n  loading?: boolean;\n  /** Optional aria label override (defaults to label + value) */\n  ariaLabel?: string;\n  /** Extra class name applied to the root */\n  className?: string;\n  /** Test id for unit tests */\n  testId?: string;\n  /**\n   * Formatter for numeric values (e.g. abbreviate to \"1.2K\", append \"%\").\n   * Defaults to `toLocaleString`. Ignored when `value` is a string.\n   */\n  format?: (value: number) => string;\n  /**\n   * Count up to a numeric value on mount and on change. Off by default so\n   * existing consumers render the final value immediately; opt in for\n   * dashboard hero metrics. Suppressed under `prefers-reduced-motion`.\n   */\n  animate?: boolean;\n  /**\n   * Optional trailing visual on the value line (e.g. a sparkline). Kept as a\n   * slot so the card does not depend on any particular chart component.\n   */\n  sparkline?: ReactNode;\n  /** Visual weight. Default: \"default\" */\n  emphasis?: StatCardEmphasis;\n}\n\nconst ANIMATION_DURATION_MS = 800;\n\n/**\n * Counts from the previous value to `target` with an ease-out-cubic curve.\n * When `enabled` is false the target is returned directly and no animation\n * frame is ever scheduled.\n */\nfunction useAnimatedValue(target: number, enabled: boolean): number {\n  const [displayValue, setDisplayValue] = useState(enabled ? 0 : target);\n  const previousValue = useRef(enabled ? 0 : target);\n  const frameRef = useRef<number | null>(null);\n\n  useEffect(() => {\n    if (!enabled) {\n      previousValue.current = target;\n      setDisplayValue(target);\n      return;\n    }\n\n    const startValue = previousValue.current;\n    const startTime = performance.now();\n\n    const step = (now: number): void => {\n      const progress = Math.min((now - startTime) / ANIMATION_DURATION_MS, 1);\n      const eased = 1 - Math.pow(1 - progress, 3);\n      setDisplayValue(Math.round(startValue + (target - startValue) * eased));\n\n      if (progress < 1) {\n        frameRef.current = requestAnimationFrame(step);\n      } else {\n        previousValue.current = target;\n      }\n    };\n\n    frameRef.current = requestAnimationFrame(step);\n\n    return () => {\n      if (frameRef.current !== null) {\n        cancelAnimationFrame(frameRef.current);\n      }\n    };\n  }, [target, enabled]);\n\n  return enabled ? displayValue : target;\n}\n\nconst TREND_GLYPH: Record<StatCardTrendDirection, string> = {\n  up: \"▲\",\n  down: \"▼\",\n  flat: \"•\",\n};\n\nfunction formatValue(\n  value: string | number,\n  format?: (value: number) => string,\n): string {\n  if (typeof value === \"number\") {\n    return format ? format(value) : value.toLocaleString();\n  }\n  return value;\n}\n\nfunction StatCardComponent({\n  label,\n  value,\n  valueSuffix,\n  hint,\n  icon,\n  tone = \"default\",\n  trend,\n  onClick,\n  loading = false,\n  ariaLabel,\n  className = \"\",\n  testId,\n  format,\n  animate = false,\n  sparkline,\n  emphasis = \"default\",\n}: StatCardProps): JSX.Element {\n  const prefersReducedMotion = usePrefersReducedMotion();\n  const isNumeric = typeof value === \"number\";\n  const shouldAnimate = animate && isNumeric && !loading && !prefersReducedMotion;\n  const animatedValue = useAnimatedValue(isNumeric ? value : 0, shouldAnimate);\n\n  const displayValue = formatValue(\n    isNumeric && shouldAnimate ? animatedValue : value,\n    format,\n  );\n\n  // The aria-label always describes the settled value, never an in-flight\n  // animation frame, so assistive tech is not read a counting-up number.\n  const composedAriaLabel =\n    ariaLabel ??\n    (loading ? label : `${label}: ${formatValue(value, format)}${valueSuffix ?? \"\"}`);\n\n  const rootClass = [\n    \"stat-card\",\n    \"corner-accent\",\n    `stat-card--tone-${tone}`,\n    emphasis !== \"default\" ? `stat-card--${emphasis}` : \"\",\n    className,\n  ]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <BaseCard\n      className={rootClass}\n      onClick={onClick}\n      role={onClick ? undefined : \"group\"}\n      ariaLabel={composedAriaLabel}\n      testId={testId}\n    >\n      <div className=\"stat-card__header\">\n        <span className=\"stat-card__label\">{label}</span>\n        {icon && (\n          <span className=\"stat-card__icon\" aria-hidden=\"true\">\n            {icon}\n          </span>\n        )}\n      </div>\n\n      <div className=\"stat-card__body\">\n        {loading ? (\n          <Skeleton width=\"60%\" height=\"2rem\" />\n        ) : sparkline ? (\n          // Only wrap when a sparkline is present, so cards without one keep\n          // the exact DOM they had before the slot existed.\n          <span className=\"stat-card__value-line\">\n            <span className=\"stat-card__value-row\">\n              <span className=\"stat-card__value\">{displayValue}</span>\n              {valueSuffix && (\n                <span className=\"stat-card__value-suffix\">{valueSuffix}</span>\n              )}\n            </span>\n            <span className=\"stat-card__sparkline\">{sparkline}</span>\n          </span>\n        ) : (\n          <span className=\"stat-card__value-row\">\n            <span className=\"stat-card__value\">{displayValue}</span>\n            {valueSuffix && (\n              <span className=\"stat-card__value-suffix\">{valueSuffix}</span>\n            )}\n          </span>\n        )}\n\n        {trend && !loading && (\n          <span\n            className={`stat-card__trend stat-card__trend--${trend.direction}`}\n            aria-label={trend.ariaLabel ?? trend.label}\n          >\n            <span aria-hidden=\"true\">{TREND_GLYPH[trend.direction]}</span>\n            <span>{trend.label}</span>\n          </span>\n        )}\n      </div>\n\n      {hint !== undefined && hint !== null && (\n        <div className=\"stat-card__hint\">\n          {loading ? <Skeleton width=\"80%\" height=\"0.85rem\" /> : hint}\n        </div>\n      )}\n    </BaseCard>\n  );\n}\n\nexport const StatCard = memo(StatCardComponent);\n"],"mappings":"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"}
+{"version":3,"file":"StatCard2.js","names":[],"sources":["../../../src/components/StatCard/StatCard.tsx"],"sourcesContent":["/**\n * StatCard Component\n *\n * Compact metric card for dashboards. Renders a label, a large numeric\n * value (with optional unit/suffix), and optional icon, hint, trend, or\n * accent tone. The label can be a node (`labelNode`) while the accessible name\n * stays the plain `label` string. Wraps `BaseCard` so it inherits hover/focus/click affordances\n * and design tokens consistently with the rest of the common library.\n *\n * Designed for cross-page reuse: Squad dashboard, Statistics page, Cowork\n * dashboard, etc.\n */\n\nimport { memo, useEffect, useRef, useState, type ReactNode, type JSX } from \"react\";\nimport { usePrefersReducedMotion } from \"../../hooks/usePrefersReducedMotion\";\nimport { BaseCard } from \"../BaseCard\";\nimport { Skeleton } from \"../Skeleton\";\nimport \"./StatCard.css\";\n\nexport type StatCardEmphasis = \"compact\" | \"default\" | \"prominent\";\n\nexport type StatCardTone = \"default\" | \"success\" | \"warning\" | \"danger\" | \"info\";\n\nexport type StatCardTrendDirection = \"up\" | \"down\" | \"flat\";\n\nexport interface StatCardTrend {\n  /** Direction indicator (up / down / flat) */\n  direction: StatCardTrendDirection;\n  /** Human-readable delta label (e.g. \"+12%\", \"-3\", \"0\") */\n  label: string;\n  /** Optional ARIA description for screen readers */\n  ariaLabel?: string;\n}\n\nexport interface StatCardProps {\n  /** Short label rendered above the value (UPPERCASE styled) */\n  label: string;\n  /**\n   * Rendered in place of `label` when the label is not plain text: a glossary\n   * term carrying its definition, a unit badge, an info affordance.\n   *\n   * `label` stays required and stays the accessible name, so the name is a\n   * string the consumer wrote rather than whatever text happens to fall out of\n   * a node. Pass the same words in both.\n   */\n  labelNode?: ReactNode;\n  /** Primary metric value (number is coerced to localised string) */\n  value: string | number;\n  /** Optional suffix appended to the value (e.g. \"/ 4\", \"GB\") */\n  valueSuffix?: string;\n  /** Optional helper line under the value (e.g. context, secondary metric) */\n  hint?: ReactNode;\n  /** Optional leading icon node, rendered inside an accent badge */\n  icon?: ReactNode;\n  /** Visual tone, mirrors Badge variants. Default: \"default\" */\n  tone?: StatCardTone;\n  /** Optional trend indicator under the value */\n  trend?: StatCardTrend;\n  /** Click handler. Renders the card as keyboard-accessible button. */\n  onClick?: () => void;\n  /** Render skeletons instead of value/label content while loading */\n  loading?: boolean;\n  /** Optional aria label override (defaults to label + value) */\n  ariaLabel?: string;\n  /** Extra class name applied to the root */\n  className?: string;\n  /** Test id for unit tests */\n  testId?: string;\n  /**\n   * Formatter for numeric values (e.g. abbreviate to \"1.2K\", append \"%\").\n   * Defaults to `toLocaleString`. Ignored when `value` is a string.\n   */\n  format?: (value: number) => string;\n  /**\n   * Count up to a numeric value on mount and on change. Off by default so\n   * existing consumers render the final value immediately; opt in for\n   * dashboard hero metrics. Suppressed under `prefers-reduced-motion`.\n   */\n  animate?: boolean;\n  /**\n   * Optional trailing visual on the value line (e.g. a sparkline). Kept as a\n   * slot so the card does not depend on any particular chart component.\n   */\n  sparkline?: ReactNode;\n  /** Visual weight. Default: \"default\" */\n  emphasis?: StatCardEmphasis;\n}\n\nconst ANIMATION_DURATION_MS = 800;\n\n/**\n * Counts from the previous value to `target` with an ease-out-cubic curve.\n * When `enabled` is false the target is returned directly and no animation\n * frame is ever scheduled.\n */\nfunction useAnimatedValue(target: number, enabled: boolean): number {\n  const [displayValue, setDisplayValue] = useState(enabled ? 0 : target);\n  const previousValue = useRef(enabled ? 0 : target);\n  const frameRef = useRef<number | null>(null);\n\n  useEffect(() => {\n    if (!enabled) {\n      previousValue.current = target;\n      setDisplayValue(target);\n      return;\n    }\n\n    const startValue = previousValue.current;\n    const startTime = performance.now();\n\n    const step = (now: number): void => {\n      const progress = Math.min((now - startTime) / ANIMATION_DURATION_MS, 1);\n      const eased = 1 - Math.pow(1 - progress, 3);\n      setDisplayValue(Math.round(startValue + (target - startValue) * eased));\n\n      if (progress < 1) {\n        frameRef.current = requestAnimationFrame(step);\n      } else {\n        previousValue.current = target;\n      }\n    };\n\n    frameRef.current = requestAnimationFrame(step);\n\n    return () => {\n      if (frameRef.current !== null) {\n        cancelAnimationFrame(frameRef.current);\n      }\n    };\n  }, [target, enabled]);\n\n  return enabled ? displayValue : target;\n}\n\nconst TREND_GLYPH: Record<StatCardTrendDirection, string> = {\n  up: \"▲\",\n  down: \"▼\",\n  flat: \"•\",\n};\n\nfunction formatValue(\n  value: string | number,\n  format?: (value: number) => string,\n): string {\n  if (typeof value === \"number\") {\n    return format ? format(value) : value.toLocaleString();\n  }\n  return value;\n}\n\nfunction StatCardComponent({\n  label,\n  labelNode,\n  value,\n  valueSuffix,\n  hint,\n  icon,\n  tone = \"default\",\n  trend,\n  onClick,\n  loading = false,\n  ariaLabel,\n  className = \"\",\n  testId,\n  format,\n  animate = false,\n  sparkline,\n  emphasis = \"default\",\n}: StatCardProps): JSX.Element {\n  const prefersReducedMotion = usePrefersReducedMotion();\n  const isNumeric = typeof value === \"number\";\n  const shouldAnimate = animate && isNumeric && !loading && !prefersReducedMotion;\n  const animatedValue = useAnimatedValue(isNumeric ? value : 0, shouldAnimate);\n\n  const displayValue = formatValue(\n    isNumeric && shouldAnimate ? animatedValue : value,\n    format,\n  );\n\n  // The aria-label always describes the settled value, never an in-flight\n  // animation frame, so assistive tech is not read a counting-up number.\n  const composedAriaLabel =\n    ariaLabel ??\n    (loading ? label : `${label}: ${formatValue(value, format)}${valueSuffix ?? \"\"}`);\n\n  const rootClass = [\n    \"stat-card\",\n    \"corner-accent\",\n    `stat-card--tone-${tone}`,\n    emphasis !== \"default\" ? `stat-card--${emphasis}` : \"\",\n    className,\n  ]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <BaseCard\n      className={rootClass}\n      onClick={onClick}\n      role={onClick ? undefined : \"group\"}\n      ariaLabel={composedAriaLabel}\n      testId={testId}\n    >\n      <div className=\"stat-card__header\">\n        <span className=\"stat-card__label\">{labelNode ?? label}</span>\n        {icon && (\n          <span className=\"stat-card__icon\" aria-hidden=\"true\">\n            {icon}\n          </span>\n        )}\n      </div>\n\n      <div className=\"stat-card__body\">\n        {loading ? (\n          <Skeleton width=\"60%\" height=\"2rem\" />\n        ) : sparkline ? (\n          // Only wrap when a sparkline is present, so cards without one keep\n          // the exact DOM they had before the slot existed.\n          <span className=\"stat-card__value-line\">\n            <span className=\"stat-card__value-row\">\n              <span className=\"stat-card__value\">{displayValue}</span>\n              {valueSuffix && (\n                <span className=\"stat-card__value-suffix\">{valueSuffix}</span>\n              )}\n            </span>\n            <span className=\"stat-card__sparkline\">{sparkline}</span>\n          </span>\n        ) : (\n          <span className=\"stat-card__value-row\">\n            <span className=\"stat-card__value\">{displayValue}</span>\n            {valueSuffix && (\n              <span className=\"stat-card__value-suffix\">{valueSuffix}</span>\n            )}\n          </span>\n        )}\n\n        {trend && !loading && (\n          <span\n            className={`stat-card__trend stat-card__trend--${trend.direction}`}\n            aria-label={trend.ariaLabel ?? trend.label}\n          >\n            <span aria-hidden=\"true\">{TREND_GLYPH[trend.direction]}</span>\n            <span>{trend.label}</span>\n          </span>\n        )}\n      </div>\n\n      {hint !== undefined && hint !== null && (\n        <div className=\"stat-card__hint\">\n          {loading ? <Skeleton width=\"80%\" height=\"0.85rem\" /> : hint}\n        </div>\n      )}\n    </BaseCard>\n  );\n}\n\nexport const StatCard = memo(StatCardComponent);\n"],"mappings":";;;;;;;AAwFA,IAAM,IAAwB;AAO9B,SAAS,EAAiB,GAAgB,GAA0B;CAClE,IAAM,CAAC,GAAc,KAAmB,EAAS,IAAU,IAAI,CAAM,GAC/D,IAAgB,EAAO,IAAU,IAAI,CAAM,GAC3C,IAAW,EAAsB,IAAI;CAiC3C,OA/BA,QAAgB;EACd,IAAI,CAAC,GAAS;GAEZ,AADA,EAAc,UAAU,GACxB,EAAgB,CAAM;GACtB;EACF;EAEA,IAAM,IAAa,EAAc,SAC3B,IAAY,YAAY,IAAI,GAE5B,KAAQ,MAAsB;GAClC,IAAM,IAAW,KAAK,KAAK,IAAM,KAAa,GAAuB,CAAC,GAChE,IAAQ,KAAa,IAAI,MAAU;GAGzC,AAFA,EAAgB,KAAK,MAAM,KAAc,IAAS,KAAc,CAAK,CAAC,GAElE,IAAW,IACb,EAAS,UAAU,sBAAsB,CAAI,IAE7C,EAAc,UAAU;EAE5B;EAIA,OAFA,EAAS,UAAU,sBAAsB,CAAI,SAEhC;GACX,AAAI,EAAS,YAAY,QACvB,qBAAqB,EAAS,OAAO;EAEzC;CACF,GAAG,CAAC,GAAQ,CAAO,CAAC,GAEb,IAAU,IAAe;AAClC;AAEA,IAAM,IAAsD;CAC1D,IAAI;CACJ,MAAM;CACN,MAAM;AACR;AAEA,SAAS,EACP,GACA,GACQ;CAIR,OAHI,OAAO,KAAU,WACZ,IAAS,EAAO,CAAK,IAAI,EAAM,eAAe,IAEhD;AACT;AAEA,SAAS,EAAkB,EACzB,UACA,cACA,UACA,gBACA,SACA,SACA,UAAO,WACP,UACA,YACA,aAAU,IACV,cACA,eAAY,IACZ,WACA,WACA,aAAU,IACV,cACA,cAAW,aACkB;CAC7B,IAAM,IAAuB,EAAwB,GAC/C,IAAY,OAAO,KAAU,UAC7B,IAAgB,KAAW,KAAa,CAAC,KAAW,CAAC,GACrD,IAAgB,EAAiB,IAAY,IAAQ,GAAG,CAAa,GAErE,IAAe,EACnB,KAAa,IAAgB,IAAgB,GAC7C,CACF,GAIM,IACJ,MACC,IAAU,IAAQ,GAAG,EAAM,IAAI,EAAY,GAAO,CAAM,IAAI,KAAe,OAExE,IAAY;EAChB;EACA;EACA,mBAAmB;EACnB,MAAa,YAAuC,KAA3B,cAAc;EACvC;CACF,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;CAEX,OACE,kBAAC,GAAD;EACE,WAAW;EACF;EACT,MAAM,IAAU,KAAA,IAAY;EAC5B,WAAW;EACH;EALV,UAAA;GAOE,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,kBAAC,QAAD;KAAM,WAAU;KAAoB,UAAA,KAAa;IAAY,CAAA,GAC5D,KACC,kBAAC,QAAD;KAAM,WAAU;KAAkB,eAAY;KAC3C,UAAA;IACG,CAAA,CAEL;;GAEL,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACG,IACC,kBAAC,GAAD;KAAU,OAAM;KAAM,QAAO;IAAQ,CAAA,IACnC,IAGF,kBAAC,QAAD;KAAM,WAAU;KAAhB,UAAA,CACE,kBAAC,QAAD;MAAM,WAAU;MAAhB,UAAA,CACE,kBAAC,QAAD;OAAM,WAAU;OAAoB,UAAA;MAAmB,CAAA,GACtD,KACC,kBAAC,QAAD;OAAM,WAAU;OAA2B,UAAA;MAAkB,CAAA,CAE3D;KACN,CAAA,GAAA,kBAAC,QAAD;MAAM,WAAU;MAAwB,UAAA;KAAgB,CAAA,CACpD;IAEN,CAAA,IAAA,kBAAC,QAAD;KAAM,WAAU;KAAhB,UAAA,CACE,kBAAC,QAAD;MAAM,WAAU;MAAoB,UAAA;KAAmB,CAAA,GACtD,KACC,kBAAC,QAAD;MAAM,WAAU;MAA2B,UAAA;KAAkB,CAAA,CAE3D;IAGP,CAAA,GAAA,KAAS,CAAC,KACT,kBAAC,QAAD;KACE,WAAW,sCAAsC,EAAM;KACvD,cAAY,EAAM,aAAa,EAAM;KAFvC,UAAA,CAIE,kBAAC,QAAD;MAAM,eAAY;MAAQ,UAAA,EAAY,EAAM;KAAiB,CAAA,GAC7D,kBAAC,QAAD,EAAA,UAAO,EAAM,MAAY,CAAA,CACrB;IAEL,CAAA,CAAA;;GAEJ,KAA+B,QAC9B,kBAAC,OAAD;IAAK,WAAU;IACZ,UAAA,IAAU,kBAAC,GAAD;KAAU,OAAM;KAAM,QAAO;IAAW,CAAA,IAAI;GACpD,CAAA;EAEC;;AAEd;AAEA,IAAa,IAAW,EAAK,CAAiB"}

package/dist/components/Tabs/Tabs.d.ts

@@ -1,26 +1,18 @@
 import { ReactNode } from 'react';
-import { TabTagType, TabTagLabels } from './tabTags';
-export type { TabTagType, TabTagLabels } from './tabTags';
-export { TAG_CONFIG } from './tabTags';
 export interface TabItem {
     id: string;
     label: string;
     content: ReactNode;
     /**
-     * Show a "Required" badge next to the tab label.
-     * @deprecated Use `tag="required"` instead. Kept for backward compatibility.
-     */
-    required?: boolean;
-    /**
-     * Guide tag displayed after the tab label as a small badge.
-     * When set, takes precedence over the `required` boolean.
-     */
-    tag?: TabTagType;
-    /**
-     * Optional extra trailing node rendered next to the tab label (e.g. a
-     * count badge). Distinct from `tag` (which uses a fixed preset). Use this
-     * when migrating segmented controls that rendered their own inline count
-     * pill alongside the label.
+     * Trailing node rendered next to the tab label: a count pill, a status
+     * badge, whatever the consumer's vocabulary calls for.
+     *
+     * This used to sit beside a `tag` prop that took one of four fixed names,
+     * required / recommended / beta / experimental, and rendered a Badge for
+     * it. Those are one product's guide vocabulary, and the arrangement had
+     * already split across the boundary: the badge variant lived here while the
+     * label text had to be passed in from the consumer's locale bundle. A
+     * consumer that wants that badge renders it here, and owns both halves.
      */
     labelExtra?: ReactNode;
     /**
@@ -98,10 +90,5 @@ export interface TabsProps {
     scrollLeftLabel?: string;
     /** Accessible label for the right scroll-arrow button. Default: "Scroll right" */
     scrollRightLabel?: string;
-    /**
-     * English defaults for every guide-tag badge label (required / recommended
-     * / beta / experimental). Override individual entries to translate them.
-     */
-    tagLabels?: TabTagLabels;
 }
-export declare function Tabs({ tabs, groups, defaultTab, activeTab: controlledTab, onTabChange, className, panelClassName, ariaLabel, showOverflowControls, showGroupLabels, overflowMode: explicitOverflowMode, variant, fillContainer, renderPanel, moreTabsLabel, selectTabLabel, scrollLeftLabel, scrollRightLabel, tagLabels, }: TabsProps): import("react").JSX.Element;
+export declare function Tabs({ tabs, groups, defaultTab, activeTab: controlledTab, onTabChange, className, panelClassName, ariaLabel, showOverflowControls, showGroupLabels, overflowMode: explicitOverflowMode, variant, fillContainer, renderPanel, moreTabsLabel, selectTabLabel, scrollLeftLabel, scrollRightLabel, }: TabsProps): import("react").JSX.Element;

package/dist/components/Tabs/Tabs2.js

@@ -1,54 +1,46 @@
-import { Badge as e } from "../Badge/Badge2.js";
-import { TAG_CONFIG as t } from "./tabTags.js";
 /* empty css     */
-import { useCallback as n, useEffect as r, useMemo as i, useRef as a, useState as o } from "react";
-import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+import { useCallback as e, useEffect as t, useMemo as n, useRef as r, useState as i } from "react";
+import { Fragment as ee, jsx as a, jsxs as o } from "react/jsx-runtime";
 //#region src/components/Tabs/Tabs.tsx
-var ee = {
-	required: "Required",
-	recommended: "Recommended",
-	beta: "Beta",
-	experimental: "Experimental"
-};
-function u({ tabs: u, groups: d = [], defaultTab: te, activeTab: f, onTabChange: p, className: m = "", panelClassName: h = "", ariaLabel: ne, showOverflowControls: g = !0, showGroupLabels: _ = !0, overflowMode: re, variant: v = "underlined", fillContainer: ie = !1, renderPanel: y = !0, moreTabsLabel: ae = "More tabs", selectTabLabel: oe = "Select tab", scrollLeftLabel: se = "Scroll left", scrollRightLabel: ce = "Scroll right", tagLabels: b = ee }) {
-	let x = re ?? (d.length > 0 ? "menu" : "dropdown"), [le, ue] = o(te || u[0]?.id || ""), [de, S] = o(!1), [fe, C] = o(!1), [w, pe] = o(!1), [T, E] = o(!1), [D, O] = o(!1), [me, k] = o(-1), A = a(null), j = a(/* @__PURE__ */ new Map()), M = a(null), N = a(null), P = a(null), F = a([]), I = a(null), L = a(0), R = a(0), z = f ?? le, B = i(() => d.length > 0 ? d.map((e) => ({
+function s({ tabs: s, groups: c = [], defaultTab: te, activeTab: l, onTabChange: u, className: d = "", panelClassName: f = "", ariaLabel: p, showOverflowControls: m = !0, showGroupLabels: h = !0, overflowMode: g, variant: _ = "underlined", fillContainer: ne = !1, renderPanel: v = !0, moreTabsLabel: re = "More tabs", selectTabLabel: ie = "Select tab", scrollLeftLabel: y = "Scroll left", scrollRightLabel: ae = "Scroll right" }) {
+	let b = g ?? (c.length > 0 ? "menu" : "dropdown"), [x, oe] = i(te || s[0]?.id || ""), [se, S] = i(!1), [ce, C] = i(!1), [w, le] = i(!1), [T, E] = i(!1), [D, O] = i(!1), [ue, k] = i(-1), A = r(null), j = r(/* @__PURE__ */ new Map()), M = r(null), N = r(null), P = r(null), F = r([]), I = r(null), L = r(0), R = r(0), z = l ?? x, B = n(() => c.length > 0 ? c.map((e) => ({
 		group: e,
-		tabs: u.filter((t) => t.groupId === e.id)
+		tabs: s.filter((t) => t.groupId === e.id)
 	})) : [{
 		group: null,
-		tabs: u
-	}], [d, u]), V = i(() => B.flatMap(({ tabs: e }) => e), [B]), H = n((e) => {
-		f || ue(e), p?.(e), O(!1);
-	}, [f, p]), U = n((e, t) => {
+		tabs: s
+	}], [c, s]), V = n(() => B.flatMap(({ tabs: e }) => e), [B]), H = e((e) => {
+		l || oe(e), u?.(e), O(!1);
+	}, [l, u]), U = e((e, t) => {
 		let n;
 		switch (e.key) {
 			case "ArrowRight":
-				e.preventDefault(), n = t === u.length - 1 ? 0 : t + 1;
+				e.preventDefault(), n = t === s.length - 1 ? 0 : t + 1;
 				break;
 			case "ArrowLeft":
-				e.preventDefault(), n = t === 0 ? u.length - 1 : t - 1;
+				e.preventDefault(), n = t === 0 ? s.length - 1 : t - 1;
 				break;
 			case "Home":
 				e.preventDefault(), n = 0;
 				break;
 			case "End":
-				e.preventDefault(), n = u.length - 1;
+				e.preventDefault(), n = s.length - 1;
 				break;
 			default: return;
 		}
-		let r = u[n];
+		let r = s[n];
 		r && (H(r.id), j.current.get(r.id)?.focus());
-	}, [u, H]), he = n((e, t) => {
+	}, [s, H]), de = e((e, t) => {
 		t ? j.current.set(e, t) : j.current.delete(e);
-	}, []), W = n(() => {
+	}, []), W = e(() => {
 		let e = A.current;
-		if (!e || !g) {
+		if (!e || !m) {
 			S(!1), C(!1);
 			return;
 		}
 		let { scrollLeft: t, scrollWidth: n, clientWidth: r } = e;
 		S(t > 0), C(t + r < n - 1);
-	}, [g]), G = n((e) => {
+	}, [m]), G = e((e) => {
 		let t = A.current;
 		if (!t) return;
 		let n = t.clientWidth * .75;
@@ -56,35 +48,35 @@ function u({ tabs: u, groups: d = [], defaultTab: te, activeTab: f, onTabChange:
 			left: e === "left" ? -n : n,
 			behavior: "smooth"
 		}), I.current !== null && clearTimeout(I.current), I.current = setTimeout(W, 300);
-	}, [W]), K = n(() => {
+	}, [W]), K = e(() => {
 		if (!A.current || w) return;
 		let e = j.current.get(z);
 		if (!e) return;
 		let t = A.current, n = e.getBoundingClientRect(), r = t.getBoundingClientRect();
 		n.left < r.left ? t.scrollLeft -= r.left - n.left + 8 : n.right > r.right && (t.scrollLeft += n.right - r.right + 8);
-	}, [z, w]), q = n(() => {
-		typeof window > "u" || x !== "dropdown" || pe(window.innerWidth < 480);
-	}, [x]), ge = n(() => {
+	}, [z, w]), q = e(() => {
+		typeof window > "u" || b !== "dropdown" || le(window.innerWidth < 480);
+	}, [b]), fe = e(() => {
 		E((e) => !e);
-	}, []), _e = n((e) => {
+	}, []), pe = e((e) => {
 		e.key === "Escape" && T && (e.preventDefault(), E(!1));
-	}, [T]), J = n((e) => {
+	}, [T]), J = e((e) => {
 		e.touches[0] && (L.current = e.touches[0].clientX);
-	}, []), Y = n((e) => {
+	}, []), Y = e((e) => {
 		e.touches[0] && (R.current = e.touches[0].clientX);
-	}, []), X = n(() => {
+	}, []), X = e(() => {
 		if (!L.current || !R.current) return;
 		let e = L.current - R.current;
 		if (Math.abs(e) > 50) {
-			let t = u.findIndex((e) => e.id === z), n = u[t + 1], r = u[t - 1];
+			let t = s.findIndex((e) => e.id === z), n = s[t + 1], r = s[t - 1];
 			e > 0 && n ? H(n.id) : e < 0 && r && H(r.id);
 		}
 		L.current = 0, R.current = 0;
 	}, [
 		z,
-		u,
+		s,
 		H
-	]), ve = n((e) => {
+	]), me = e((e) => {
 		let t = V.length;
 		switch (e.key) {
 			case "Escape":
@@ -107,10 +99,10 @@ function u({ tabs: u, groups: d = [], defaultTab: te, activeTab: f, onTabChange:
 				break;
 			case "End": e.preventDefault(), k(t - 1), F.current[t - 1]?.focus();
 		}
-	}, [V.length]), ye = n((e) => {
+	}, [V.length]), he = e((e) => {
 		e.key === "Escape" && D && (e.preventDefault(), O(!1), k(-1));
 	}, [D]);
-	r(() => {
+	t(() => {
 		if (!T) return;
 		let e = (e) => {
 			M.current && !M.current.contains(e.target) && E(!1);
@@ -118,7 +110,7 @@ function u({ tabs: u, groups: d = [], defaultTab: te, activeTab: f, onTabChange:
 		return document.addEventListener("mousedown", e), () => {
 			document.removeEventListener("mousedown", e);
 		};
-	}, [T]), r(() => {
+	}, [T]), t(() => {
 		if (!D) return;
 		let e = (e) => {
 			N.current && !N.current.contains(e.target) && (O(!1), k(-1));
@@ -128,7 +120,7 @@ function u({ tabs: u, groups: d = [], defaultTab: te, activeTab: f, onTabChange:
 		return document.addEventListener("mousedown", e), document.addEventListener("keydown", t), () => {
 			document.removeEventListener("mousedown", e), document.removeEventListener("keydown", t);
 		};
-	}, [D]), r(() => {
+	}, [D]), t(() => {
 		if (D && F.current.length > 0) {
 			let e = V.findIndex((e) => e.id === z), t = e >= 0 ? e : 0;
 			k(t), requestAnimationFrame(() => {
@@ -139,16 +131,16 @@ function u({ tabs: u, groups: d = [], defaultTab: te, activeTab: f, onTabChange:
 		D,
 		V,
 		z
-	]), r(() => {
-		if (!u.find((e) => e.id === z)) {
-			let e = u[0];
+	]), t(() => {
+		if (!s.find((e) => e.id === z)) {
+			let e = s[0];
 			e && H(e.id);
 		}
 	}, [
-		u,
+		s,
 		z,
 		H
-	]), r(() => {
+	]), t(() => {
 		q(), W();
 		let e = () => {
 			q(), W();
@@ -156,79 +148,73 @@ function u({ tabs: u, groups: d = [], defaultTab: te, activeTab: f, onTabChange:
 		return window.addEventListener("resize", e), () => {
 			window.removeEventListener("resize", e);
 		};
-	}, [q, W]), r(() => {
+	}, [q, W]), t(() => {
 		K();
-	}, [z, K]), r(() => {
+	}, [z, K]), t(() => {
 		W();
-	}, [u, W]), r(() => () => {
+	}, [s, W]), t(() => () => {
 		I.current !== null && clearTimeout(I.current);
 	}, []);
-	let Z = u.find((e) => e.id === z)?.content, be = u.find((e) => e.id === z)?.label, xe = d.length > 0;
+	let Z = s.find((e) => e.id === z)?.content, ge = s.find((e) => e.id === z)?.label, _e = c.length > 0;
 	F.current = [];
-	let Q = (e) => e.tag ? e.tag : e.required ? "required" : null, Se = (n, r) => {
-		let i = n.id === z, a = Q(n), o = a ? t[a] : null, s = a ? b[a] : null;
-		return /* @__PURE__ */ l("button", {
-			ref: (e) => {
-				he(n.id, e);
+	let Q = (e, t) => {
+		let n = e.id === z;
+		return /* @__PURE__ */ o("button", {
+			ref: (t) => {
+				de(e.id, t);
 			},
 			role: "tab",
-			"aria-selected": i,
-			"aria-controls": y ? `tabpanel-${n.id}` : void 0,
-			id: `tab-${n.id}`,
-			tabIndex: i ? 0 : -1,
-			className: `tabs__tab${i ? " tabs__tab--active" : ""}`,
+			"aria-selected": n,
+			"aria-controls": v ? `tabpanel-${e.id}` : void 0,
+			id: `tab-${e.id}`,
+			tabIndex: n ? 0 : -1,
+			className: `tabs__tab${n ? " tabs__tab--active" : ""}`,
 			onClick: () => {
-				H(n.id);
+				H(e.id);
 			},
 			onKeyDown: (e) => {
-				U(e, r), (e.key === "ArrowLeft" || e.key === "ArrowRight" || e.key === "Home" || e.key === "End") && e.stopPropagation();
+				U(e, t), (e.key === "ArrowLeft" || e.key === "ArrowRight" || e.key === "Home" || e.key === "End") && e.stopPropagation();
 			},
 			children: [
-				n.labelPrefix,
-				/* @__PURE__ */ c("span", {
+				e.labelPrefix,
+				/* @__PURE__ */ a("span", {
 					className: "tabs__tab-label",
-					children: n.label
-				}),
-				o && /* @__PURE__ */ c(e, {
-					variant: o.variant,
-					size: "small",
-					className: "tabs__tag-badge",
-					children: s
+					children: e.label
 				}),
-				n.labelExtra
+				e.labelExtra
 			]
-		}, n.id);
-	}, Ce = () => xe ? B.map(({ group: e, tabs: t }, n) => /* @__PURE__ */ l("div", {
+		}, e.id);
+	}, ve = () => _e ? B.map(({ group: e, tabs: t }, n) => /* @__PURE__ */ o("div", {
 		className: "tabs__group",
-		children: [e && /* @__PURE__ */ l(s, { children: [n > 0 && /* @__PURE__ */ c("div", {
+		children: [e && /* @__PURE__ */ o(ee, { children: [n > 0 && /* @__PURE__ */ a("div", {
 			className: "tabs__separator",
 			role: "separator",
 			"aria-hidden": "true"
-		}), _ && /* @__PURE__ */ c("span", {
+		}), h && /* @__PURE__ */ a("span", {
 			className: "tabs__group-label",
 			children: e.label
-		})] }), /* @__PURE__ */ c("div", {
+		})] }), /* @__PURE__ */ a("div", {
 			className: "tabs__group-tabs",
 			children: t.map((e) => {
-				let t = u.findIndex((t) => t.id === e.id);
-				return Se(e, t);
+				let t = s.findIndex((t) => t.id === e.id);
+				return Q(e, t);
 			})
 		})]
-	}, e?.id || "default")) : u.map((e, t) => Se(e, t)), we = () => x !== "menu" || !g ? null : /* @__PURE__ */ l("div", {
+	}, e?.id || "default")) : s.map((e, t) => Q(e, t)), ye = () => b !== "menu" || !m ? null : /* @__PURE__ */ o("div", {
 		className: "tabs__overflow",
 		ref: N,
-		children: [/* @__PURE__ */ c("button", {
+		children: [/* @__PURE__ */ a("button", {
 			ref: P,
 			type: "button",
 			className: "tabs__overflow-btn",
 			onClick: () => {
 				O(!D);
 			},
-			onKeyDown: ye,
-			"aria-label": ae,
+			onKeyDown: he,
+			"aria-label": re,
 			"aria-expanded": D,
 			"aria-haspopup": "menu",
-			children: /* @__PURE__ */ l("svg", {
+			children: /* @__PURE__ */ o("svg", {
 				width: "20",
 				height: "20",
 				viewBox: "0 0 24 24",
@@ -238,75 +224,70 @@ function u({ tabs: u, groups: d = [], defaultTab: te, activeTab: f, onTabChange:
 				strokeLinecap: "round",
 				strokeLinejoin: "round",
 				children: [
-					/* @__PURE__ */ c("circle", {
+					/* @__PURE__ */ a("circle", {
 						cx: "12",
 						cy: "12",
 						r: "1"
 					}),
-					/* @__PURE__ */ c("circle", {
+					/* @__PURE__ */ a("circle", {
 						cx: "12",
 						cy: "5",
 						r: "1"
 					}),
-					/* @__PURE__ */ c("circle", {
+					/* @__PURE__ */ a("circle", {
 						cx: "12",
 						cy: "19",
 						r: "1"
 					})
 				]
 			})
-		}), D && /* @__PURE__ */ c("div", {
+		}), D && /* @__PURE__ */ a("div", {
 			className: "tabs__overflow-menu",
 			role: "menu",
-			onKeyDown: ve,
-			children: B.map(({ group: n, tabs: r }) => /* @__PURE__ */ l("div", {
+			onKeyDown: me,
+			children: B.map(({ group: e, tabs: t }) => /* @__PURE__ */ o("div", {
 				className: "tabs__overflow-group",
-				children: [n && _ && /* @__PURE__ */ c("div", {
+				children: [e && h && /* @__PURE__ */ a("div", {
 					className: "tabs__overflow-group-label",
-					children: n.label
-				}), r.map((n) => {
-					let r = n.id === z, i = V.findIndex((e) => e.id === n.id), a = Q(n), o = a ? t[a] : null, s = a ? b[a] : null;
-					return /* @__PURE__ */ l("button", {
+					children: e.label
+				}), t.map((e) => {
+					let t = e.id === z, n = V.findIndex((t) => t.id === e.id);
+					return /* @__PURE__ */ o("button", {
 						ref: (e) => {
-							e && (F.current[i] = e);
+							e && (F.current[n] = e);
 						},
 						role: "menuitem",
-						tabIndex: me === i ? 0 : -1,
-						className: `tabs__overflow-item ${r ? "tabs__overflow-item--active" : ""}`,
+						tabIndex: ue === n ? 0 : -1,
+						className: `tabs__overflow-item ${t ? "tabs__overflow-item--active" : ""}`,
 						onClick: () => {
-							H(n.id);
+							H(e.id);
 						},
 						children: [
-							n.labelPrefix,
-							/* @__PURE__ */ c("span", { children: n.label }),
-							o && /* @__PURE__ */ c(e, {
-								variant: o.variant,
-								size: "small",
-								children: s
-							}),
-							n.labelExtra
+							e.labelPrefix,
+							/* @__PURE__ */ a("span", { children: e.label }),
+							e.labelExtra
 						]
-					}, n.id);
+					}, e.id);
 				})]
-			}, n?.id || "default"))
+			}, e?.id || "default"))
 		})]
-	}), $ = v === "segmented" || v === "compact";
-	return x === "dropdown" && w && !$ ? /* @__PURE__ */ l("div", {
-		className: `tabs tabs--mobile-dropdown ${m}`,
-		children: [/* @__PURE__ */ l("div", {
+	}), $ = _ === "segmented" || _ === "compact";
+	return b === "dropdown" && w && !$ ? /* @__PURE__ */ o("div", {
+		className: `tabs tabs--mobile-dropdown ${d}`,
+		children: [/* @__PURE__ */ o("div", {
 			className: "tabs__dropdown-container",
 			ref: M,
-			children: [/* @__PURE__ */ l("button", {
+			children: [/* @__PURE__ */ o("button", {
 				className: "tabs__dropdown-trigger",
-				onClick: ge,
-				onKeyDown: _e,
+				onClick: fe,
+				onKeyDown: pe,
 				"aria-expanded": T,
 				"aria-haspopup": "listbox",
-				"aria-label": ne || oe,
-				children: [/* @__PURE__ */ c("span", {
+				"aria-label": p || ie,
+				children: [/* @__PURE__ */ a("span", {
 					className: "tabs__dropdown-label",
-					children: be
-				}), /* @__PURE__ */ c("svg", {
+					children: ge
+				}), /* @__PURE__ */ a("svg", {
 					className: `tabs__dropdown-arrow ${T ? "tabs__dropdown-arrow--open" : ""}`,
 					width: "16",
 					height: "16",
@@ -314,7 +295,7 @@ function u({ tabs: u, groups: d = [], defaultTab: te, activeTab: f, onTabChange:
 					fill: "none",
 					xmlns: "http://www.w3.org/2000/svg",
 					"aria-hidden": "true",
-					children: /* @__PURE__ */ c("path", {
+					children: /* @__PURE__ */ a("path", {
 						d: "M4 6L8 10L12 6",
 						stroke: "currentColor",
 						strokeWidth: "2",
@@ -322,10 +303,10 @@ function u({ tabs: u, groups: d = [], defaultTab: te, activeTab: f, onTabChange:
 						strokeLinejoin: "round"
 					})
 				})]
-			}), T && /* @__PURE__ */ c("div", {
+			}), T && /* @__PURE__ */ a("div", {
 				className: "tabs__dropdown-menu",
 				role: "listbox",
-				children: u.map((e) => /* @__PURE__ */ c("button", {
+				children: s.map((e) => /* @__PURE__ */ a("button", {
 					role: "option",
 					"aria-selected": e.id === z,
 					className: `tabs__dropdown-item ${e.id === z ? "tabs__dropdown-item--active" : ""}`,
@@ -335,37 +316,37 @@ function u({ tabs: u, groups: d = [], defaultTab: te, activeTab: f, onTabChange:
 					children: e.label
 				}, e.id))
 			})]
-		}), y && /* @__PURE__ */ c("div", {
+		}), v && /* @__PURE__ */ a("div", {
 			id: `tabpanel-${z}`,
 			role: "tabpanel",
 			"aria-labelledby": `tab-${z}`,
-			className: `tabs__panel ${h}`.trim(),
+			className: `tabs__panel ${f}`.trim(),
 			tabIndex: 0,
 			onTouchStart: J,
 			onTouchMove: Y,
 			onTouchEnd: X,
 			children: Z
 		})]
-	}) : /* @__PURE__ */ l("div", {
-		className: `tabs ${x === "menu" ? "tabs--overflow-menu" : ""} ${v === "segmented" ? "tabs--variant-segmented" : v === "compact" ? "tabs--variant-compact" : ""} ${$ && ie ? "tabs--fill-container" : ""} ${m}`.replace(/\s+/g, " ").trim(),
-		children: [/* @__PURE__ */ l("div", {
+	}) : /* @__PURE__ */ o("div", {
+		className: `tabs ${b === "menu" ? "tabs--overflow-menu" : ""} ${_ === "segmented" ? "tabs--variant-segmented" : _ === "compact" ? "tabs--variant-compact" : ""} ${$ && ne ? "tabs--fill-container" : ""} ${d}`.replace(/\s+/g, " ").trim(),
+		children: [/* @__PURE__ */ o("div", {
 			className: "tabs__container",
 			children: [
-				g && de && /* @__PURE__ */ c("button", {
+				m && se && /* @__PURE__ */ a("button", {
 					className: "tabs__scroll-arrow tabs__scroll-arrow--left",
 					onClick: () => {
 						G("left");
 					},
-					"aria-label": se,
+					"aria-label": y,
 					tabIndex: -1,
-					children: /* @__PURE__ */ c("svg", {
+					children: /* @__PURE__ */ a("svg", {
 						width: "20",
 						height: "20",
 						viewBox: "0 0 20 20",
 						fill: "none",
 						xmlns: "http://www.w3.org/2000/svg",
 						"aria-hidden": "true",
-						children: /* @__PURE__ */ c("path", {
+						children: /* @__PURE__ */ a("path", {
 							d: "M12 15L7 10L12 5",
 							stroke: "currentColor",
 							strokeWidth: "2",
@@ -374,36 +355,36 @@ function u({ tabs: u, groups: d = [], defaultTab: te, activeTab: f, onTabChange:
 						})
 					})
 				}),
-				/* @__PURE__ */ c("div", {
+				/* @__PURE__ */ a("div", {
 					ref: A,
 					className: "tabs__list",
 					role: "tablist",
-					"aria-label": ne,
+					"aria-label": p,
 					onScroll: W,
 					onKeyDown: (e) => {
-						let t = u.findIndex((e) => e.id === z);
+						let t = s.findIndex((e) => e.id === z);
 						t < 0 || U(e, t);
 					},
-					onTouchStart: x === "dropdown" ? J : void 0,
-					onTouchMove: x === "dropdown" ? Y : void 0,
-					onTouchEnd: x === "dropdown" ? X : void 0,
-					children: Ce()
+					onTouchStart: b === "dropdown" ? J : void 0,
+					onTouchMove: b === "dropdown" ? Y : void 0,
+					onTouchEnd: b === "dropdown" ? X : void 0,
+					children: ve()
 				}),
-				g && fe && /* @__PURE__ */ c("button", {
+				m && ce && /* @__PURE__ */ a("button", {
 					className: "tabs__scroll-arrow tabs__scroll-arrow--right",
 					onClick: () => {
 						G("right");
 					},
-					"aria-label": ce,
+					"aria-label": ae,
 					tabIndex: -1,
-					children: /* @__PURE__ */ c("svg", {
+					children: /* @__PURE__ */ a("svg", {
 						width: "20",
 						height: "20",
 						viewBox: "0 0 20 20",
 						fill: "none",
 						xmlns: "http://www.w3.org/2000/svg",
 						"aria-hidden": "true",
-						children: /* @__PURE__ */ c("path", {
+						children: /* @__PURE__ */ a("path", {
 							d: "M8 5L13 10L8 15",
 							stroke: "currentColor",
 							strokeWidth: "2",
@@ -412,20 +393,20 @@ function u({ tabs: u, groups: d = [], defaultTab: te, activeTab: f, onTabChange:
 						})
 					})
 				}),
-				we()
+				ye()
 			]
-		}), y && /* @__PURE__ */ c("div", {
+		}), v && /* @__PURE__ */ a("div", {
 			id: `tabpanel-${z}`,
 			role: "tabpanel",
 			"aria-labelledby": `tab-${z}`,
-			className: `tabs__panel ${h}`.trim(),
+			className: `tabs__panel ${f}`.trim(),
 			tabIndex: 0,
 			children: Z
 		})]
 	});
 }
 //#endregion
-export { t as TAG_CONFIG, u as Tabs };
+export { s as Tabs };
 
 //# sourceMappingURL=Tabs2.js.map
 import "../../assets/components/Tabs/Tabs.css";