@vodafone_de/publish-test 0.0.1 → 53.0.0

package/dist/components/Switch/index.js

@@ -0,0 +1,172 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import IconLoader from "../IconLoader/index.js";
+import { f as iconSize2xs } from "../../IconSize-Da9zhR76.js";
+import styled from "styled-components";
+import Label from "../Label/index.js";
+import { translateLayoutPropsToCss } from "../../foundations/layout/index.js";
+import forcedColors from "../../foundations/media-query/forcedColors/index.js";
+import { e as ease_in_sine } from "../../easing-Dm-pO8SY.js";
+import { getBorderColor } from "../../foundations/token/getBorderColor/index.js";
+import { getBorderRadius } from "../../foundations/token/getBorderRadius/index.js";
+import { getBorderWidth } from "../../foundations/token/getBorderWidth/index.js";
+import { getBottomSpacing } from "../../foundations/token/getBottomSpacing/index.js";
+import { getObjectColor } from "../../foundations/token/getObjectColor/index.js";
+import { getOpacity } from "../../foundations/token/getOpacity/index.js";
+import { g as getSpacing } from "../../index-l-i-mIeP.js";
+import { c as colorBorderFocus } from "../../BorderColor-BACbvI20.js";
+import { d as borderRadiusFull } from "../../BorderRadius-0jhn76gB.js";
+import { b as borderWidthFocus, d as borderWidthSm } from "../../BorderWidth-CwrNKc0Q.js";
+import { e as colorObjectInverse, f as colorObjectSelected, g as colorObjectUnselected } from "../../ObjectColor-CSHEae46.js";
+import { a as opacityDisabled } from "../../Opacity-smkGiwsf.js";
+import { s as spacingMd, a as spacingXs } from "../../Spacing-Dj-qX3Z5.js";
+import { s as shouldForwardProp } from "../../shouldForwardProp-CONMmlMa.js";
+const getHandleIcon = (checked) => {
+  const iconName = checked ? "Tick" : "Close";
+  return /* @__PURE__ */ jsx(IconLoader, { size: iconSize2xs, name: iconName });
+};
+const SwitchButtonBorderRadius = "32px";
+const SwitchLabelWrapperStyled = styled(Label).withConfig({
+  shouldForwardProp,
+  displayName: "SwitchLabelWrapperStyled",
+  componentId: "sc-q8i10i-0"
+})({
+  display: "flex",
+  alignItems: "center",
+  gap: getSpacing(spacingXs),
+  cursor: "pointer"
+}, ({
+  disabled
+}) => ({
+  ...disabled && {
+    opacity: getOpacity(opacityDisabled)
+  }
+}), ({
+  bottomSpacing = spacingMd
+}) => getBottomSpacing({
+  bottomSpacing
+}), ({
+  layout
+}) => layout && translateLayoutPropsToCss(layout));
+const SwitchButtonStyled = styled.span.withConfig({
+  shouldForwardProp,
+  displayName: "SwitchButtonStyled",
+  componentId: "sc-q8i10i-1"
+})({
+  position: "relative",
+  display: "flex",
+  "&:has(:focus-visible)": {
+    outline: `${getBorderWidth(borderWidthFocus)} solid ${getBorderColor(colorBorderFocus)}`,
+    borderRadius: SwitchButtonBorderRadius,
+    ...forcedColors({
+      outline: `${getBorderWidth(borderWidthFocus)} solid CanvasText`
+    })
+  }
+});
+const SwitchHandleWrapperStyled = styled.span.withConfig({
+  shouldForwardProp,
+  displayName: "SwitchHandleWrapperStyled",
+  componentId: "sc-q8i10i-2"
+})({
+  position: "absolute",
+  top: 0,
+  left: 0,
+  padding: "1px",
+  transition: `all .2s ${ease_in_sine}`
+}, ({
+  checked
+}) => ({
+  transform: checked ? "translateX(20px)" : "translateX(0)"
+}));
+const SwitchInputElementStyled = styled.input.withConfig({
+  shouldForwardProp,
+  displayName: "SwitchInputElementStyled",
+  componentId: "sc-q8i10i-3"
+})({
+  position: "absolute",
+  width: "100%",
+  height: "100%",
+  top: 0,
+  left: 0,
+  zIndex: 1,
+  margin: 0,
+  padding: 0,
+  cursor: "inherit",
+  appearance: "none",
+  "&:focus, &:focus-visible": {
+    outline: "none"
+  }
+});
+const SwitchHandleStyled = styled.span.withConfig({
+  shouldForwardProp,
+  displayName: "SwitchHandleStyled",
+  componentId: "sc-q8i10i-4"
+})({
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: "30px",
+  height: "30px",
+  background: getObjectColor(colorObjectInverse),
+  borderRadius: getBorderRadius(borderRadiusFull)
+}, ({
+  checked
+}) => ({
+  ...forcedColors({
+    color: checked ? "FieldText" : "Field",
+    background: checked ? "Field" : "FieldText"
+  }),
+  color: checked ? getObjectColor(colorObjectSelected) : getObjectColor(colorObjectUnselected)
+}));
+const SwitchTrackStyled = styled.span.withConfig({
+  shouldForwardProp,
+  displayName: "SwitchTrackStyled",
+  componentId: "sc-q8i10i-5"
+})(({
+  checked
+}) => ({
+  ...forcedColors({
+    background: checked ? "FieldText" : "Field",
+    border: `${getBorderWidth(borderWidthSm)} solid FieldText`
+  }),
+  width: "52px",
+  height: "32px",
+  background: checked ? getObjectColor(colorObjectSelected) : getObjectColor(colorObjectUnselected),
+  borderRadius: SwitchButtonBorderRadius
+}));
+const SwitchLabelStyled = styled.span.withConfig({
+  shouldForwardProp,
+  displayName: "SwitchLabelStyled",
+  componentId: "sc-q8i10i-6"
+})({});
+const Switch = ({
+  uid,
+  label,
+  onUpdate,
+  disabled,
+  ...props
+}) => {
+  const [checked, setChecked] = useState(Boolean(props.checked));
+  useEffect(() => {
+    setChecked(props.checked ?? false);
+  }, [props.checked]);
+  const handleChange = () => {
+    const newChecked = !checked;
+    setChecked(!checked);
+    onUpdate == null ? void 0 : onUpdate(newChecked);
+  };
+  return /* @__PURE__ */ jsxs(SwitchLabelWrapperStyled, { bottomSpacing: props.bottomSpacing, layout: props.layout, disabled, htmlFor: uid, children: [
+    /* @__PURE__ */ jsxs(SwitchButtonStyled, { children: [
+      /* @__PURE__ */ jsxs(SwitchHandleWrapperStyled, { checked, children: [
+        /* @__PURE__ */ jsx(SwitchInputElementStyled, { ...props, id: uid, type: "checkbox", onChange: handleChange, checked, disabled, "aria-label": label, "aria-checked": checked, role: "switch" }),
+        /* @__PURE__ */ jsx(SwitchHandleStyled, { checked, children: getHandleIcon(checked) })
+      ] }),
+      /* @__PURE__ */ jsx(SwitchTrackStyled, { checked })
+    ] }),
+    /* @__PURE__ */ jsx(SwitchLabelStyled, { children: label })
+  ] });
+};
+export {
+  Switch as default
+};

package/dist/components/Switch/props.d.ts

@@ -0,0 +1,26 @@
+import { InputHTMLAttributes } from 'react';
+import { InputSharedProps } from '../Input/props';
+import { switchComponentName } from './componentName';
+/**
+ * Props for the Switch component.
+ * A toggle switch input for boolean on/off states.
+ * @see {@link https://www.vodafone.de/simplicity/pattern/?path=/docs/input-and-selection-switch--docs} Switch stories
+ */
+export interface SwitchProps extends Omit<InputSharedProps, 'errorMessage' | 'helperText' | 'status' | 'required'>, InputHTMLAttributes<HTMLInputElement> {
+    /**
+     * Whether the switch is currently on.
+     */
+    checked: boolean;
+    /**
+     * Label text displayed next to the switch.
+     */
+    label: string;
+    /**
+     * Callback fired when the switch state changes. Receives the new checked state.
+     */
+    onUpdate?: (checked: boolean) => void;
+    /**
+     * Internal component name used for CMS and dynamic rendering.
+     */
+    component?: typeof switchComponentName;
+}

package/dist/components/Switch/styled.d.ts

@@ -0,0 +1,8 @@
+import { SwitchProps } from './props';
+export declare const SwitchLabelWrapperStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('styled-components').FastOmit<import('../Label').LabelProps, "disabled"> & Pick<SwitchProps, "disabled">, never> & Partial<Pick<import('styled-components').FastOmit<import('../Label').LabelProps, "disabled"> & Pick<SwitchProps, "disabled">, never>>> & string & Omit<({ children, ...props }: import('../Label').LabelProps) => import("react/jsx-runtime").JSX.Element, keyof import('react').Component<any, {}, any>>;
+export declare const SwitchButtonStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never> & Partial<Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>> & string;
+export declare const SwitchHandleWrapperStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "checked"> & Pick<SwitchProps, "checked">, never> & Partial<Pick<import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "checked"> & Pick<SwitchProps, "checked">, never>>> & string;
+export declare const SwitchInputElementStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never> & Partial<Pick<import('react').DetailedHTMLProps<import('react').InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>>> & string;
+export declare const SwitchHandleStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "checked"> & Pick<SwitchProps, "checked">, never> & Partial<Pick<import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "checked"> & Pick<SwitchProps, "checked">, never>>> & string;
+export declare const SwitchTrackStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "checked"> & Pick<SwitchProps, "checked">, never> & Partial<Pick<import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "checked"> & Pick<SwitchProps, "checked">, never>>> & string;
+export declare const SwitchLabelStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never> & Partial<Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>> & string;

package/dist/components/Switch/validate.d.ts

@@ -0,0 +1,75 @@
+import { default as z } from 'zod';
+import { CmsProps } from '../../foundations/BrixComponentProps';
+import { ValidationResult } from '../../utils/validation/Validation';
+import { SwitchProps } from './props';
+export type SwitchCmsProps = CmsProps<SwitchProps>;
+export declare const switchSchema: z.ZodObject<{
+    layout: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodUnion<readonly [z.ZodString, z.ZodNumber, z.ZodObject<{
+        sm: z.ZodOptional<z.ZodUnion<[z.ZodString, z.ZodNumber]>>;
+        md: z.ZodOptional<z.ZodUnion<[z.ZodString, z.ZodNumber]>>;
+        lg: z.ZodOptional<z.ZodUnion<[z.ZodString, z.ZodNumber]>>;
+    }, z.core.$strip>]>>>;
+    disabled: z.ZodOptional<z.ZodBoolean>;
+    uid: z.ZodString;
+    bottomSpacing: z.ZodOptional<z.ZodEnum<{
+        sm: "sm";
+        md: "md";
+        lg: "lg";
+        none: "none";
+        "2xs": "2xs";
+        xs: "xs";
+        xl: "xl";
+        "2xl": "2xl";
+        "3xl": "3xl";
+        "4xl": "4xl";
+        "5xl": "5xl";
+        "6xl": "6xl";
+        "7xl": "7xl";
+        None: "None";
+        "2Xs": "2Xs";
+        Xs: "Xs";
+        Sm: "Sm";
+        Md: "Md";
+        Lg: "Lg";
+        Xl: "Xl";
+        "2Xl": "2Xl";
+        "3Xl": "3Xl";
+        "4Xl": "4Xl";
+        "5Xl": "5Xl";
+        "6Xl": "6Xl";
+        "7Xl": "7Xl";
+    }>>;
+    sysId: z.ZodString;
+    customId: z.ZodOptional<z.ZodString>;
+    enableStructuredData: z.ZodOptional<z.ZodBoolean>;
+    tracking: z.ZodOptional<z.ZodObject<{
+        contact_action: z.ZodOptional<z.ZodString>;
+        contact_subject: z.ZodOptional<z.ZodString>;
+        contact_available_tools: z.ZodOptional<z.ZodString>;
+        contact_tool: z.ZodOptional<z.ZodString>;
+        contact_trigger: z.ZodOptional<z.ZodString>;
+        contact_variant: z.ZodOptional<z.ZodString>;
+        information_action: z.ZodOptional<z.ZodString>;
+        information_name: z.ZodOptional<z.ZodString>;
+        information_ui_type: z.ZodOptional<z.ZodString>;
+        information_trigger: z.ZodOptional<z.ZodString>;
+        information_ui_location: z.ZodOptional<z.ZodString>;
+        information_id: z.ZodOptional<z.ZodString>;
+        information_ui_size: z.ZodOptional<z.ZodString>;
+        error_action: z.ZodOptional<z.ZodString>;
+        error_type: z.ZodOptional<z.ZodString>;
+        error_message: z.ZodOptional<z.ZodString>;
+        error_ui_type: z.ZodOptional<z.ZodString>;
+        error_trigger: z.ZodOptional<z.ZodString>;
+        error_trigger_name: z.ZodOptional<z.ZodString>;
+        error_code: z.ZodOptional<z.ZodString>;
+        error_details: z.ZodOptional<z.ZodString>;
+        error_location: z.ZodOptional<z.ZodString>;
+    }, z.core.$loose>>;
+    component: z.ZodLiteral<"Switch">;
+    checked: z.ZodBoolean;
+    label: z.ZodString;
+    onUpdate: z.ZodOptional<z.ZodNever>;
+}, z.core.$loose>;
+export declare const validateSwitchProps: (props: unknown) => ValidationResult<SwitchCmsProps>;
+export declare const isSwitchProps: (props: unknown) => props is SwitchCmsProps;

package/dist/components/Switch/validate.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/TabGroup/componentName.d.ts

@@ -0,0 +1 @@
+export declare const tabGroupComponentName: "TabGroup";

package/dist/components/TabGroup/index.d.ts

@@ -0,0 +1,5 @@
+import { TabGroupProps } from './props';
+declare const TabGroup: ({ tabs, iconPosition, activeValue, width, "aria-label": ariaLabel, onTabChange, ...props }: TabGroupProps) => import("react/jsx-runtime").JSX.Element | null;
+export default TabGroup;
+export * from './props';
+export * from './styled';

package/dist/components/TabGroup/index.js

@@ -0,0 +1,341 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from "react";
+import IconLoader from "../IconLoader/index.js";
+import { i as iconSizeSm, j as iconSizeLg } from "../../IconSize-Da9zhR76.js";
+import { t as topPosition, l as leftPosition } from "../../PositionType-BIdZQO2H.js";
+import { a as tabGroupWidthAuto, b as tabGroupWidthFull } from "../../props-eUlhO4k_.js";
+import { t, c } from "../../props-eUlhO4k_.js";
+import styled from "styled-components";
+import Flex from "../Flex/index.js";
+import { translateLayoutPropsToCss } from "../../foundations/layout/index.js";
+import forcedColors from "../../foundations/media-query/forcedColors/index.js";
+import { getBodySize } from "../../foundations/token/getBodySize/index.js";
+import { getBorderColor } from "../../foundations/token/getBorderColor/index.js";
+import { getBorderRadius } from "../../foundations/token/getBorderRadius/index.js";
+import { getBorderWidth } from "../../foundations/token/getBorderWidth/index.js";
+import { getBottomSpacing } from "../../foundations/token/getBottomSpacing/index.js";
+import { getFontWeight } from "../../foundations/token/getFontWeight/index.js";
+import { getHoverColor } from "../../foundations/token/getHoverColor/index.js";
+import { getObjectColor } from "../../foundations/token/getObjectColor/index.js";
+import { g as getSpacing } from "../../index-l-i-mIeP.js";
+import { a as colorBackgroundNeutral } from "../../BackgroundColor-Ba4D10TC.js";
+import { f as colorBorderSubtle, c as colorBorderFocus } from "../../BorderColor-BACbvI20.js";
+import { c as borderRadiusSm } from "../../BorderRadius-0jhn76gB.js";
+import { b as borderWidthFocus } from "../../BorderWidth-CwrNKc0Q.js";
+import { a as fontWeightBold } from "../../FontWeight-C8c-UnWu.js";
+import { d as colorObjectBrand } from "../../ObjectColor-CSHEae46.js";
+import { s as spacingMd, c as spacingSm, a as spacingXs, f as spacing2Xs } from "../../Spacing-Dj-qX3Z5.js";
+import { s as shouldForwardProp } from "../../shouldForwardProp-CONMmlMa.js";
+const TabGroupContainerStyled = styled.div.withConfig({
+  shouldForwardProp,
+  displayName: "TabGroupContainerStyled",
+  componentId: "sc-j2p1s-0"
+})(({
+  bottomSpacing = spacingMd
+}) => ({
+  ...getBottomSpacing({
+    bottomSpacing
+  })
+}), ({
+  layout
+}) => layout && translateLayoutPropsToCss(layout));
+const TabGroupTabsScrollableContainerStyled = styled.div.withConfig({
+  shouldForwardProp,
+  displayName: "TabGroupTabsScrollableContainerStyled",
+  componentId: "sc-j2p1s-1"
+})(({
+  width
+}) => ({
+  width: tabGroupWidthAuto === width ? width : "100%",
+  position: "relative",
+  ...width === "auto" && {
+    overflowX: "auto",
+    /* Firefox */
+    scrollbarWidth: "none",
+    /* IE and Edge */
+    msOverflowStyle: "none",
+    /* Webkit (Chrome, Safari, Opera) */
+    "::-webkit-scrollbar": {
+      display: "none"
+    }
+  }
+}));
+const TabGroupTabsStyled = styled(Flex).withConfig({
+  displayName: "TabGroupTabsStyled",
+  componentId: "sc-j2p1s-2"
+})({
+  display: "flex",
+  gap: 0,
+  minWidth: "max-content",
+  borderBottom: `${getBorderWidth("Divider")} solid ${getBorderColor(colorBorderSubtle)}`,
+  ...forcedColors({
+    borderBottom: `${getBorderWidth("Divider")} solid CanvasText`
+  })
+}, ({
+  iconPosition
+}) => ({
+  justifyContent: iconPosition === topPosition ? "center" : "left"
+}));
+const TabStyled = styled.button.withConfig({
+  shouldForwardProp,
+  displayName: "TabStyled",
+  componentId: "sc-j2p1s-3"
+})({
+  ...getBodySize("md"),
+  background: "none",
+  border: "none",
+  color: "inherit",
+  cursor: "pointer",
+  display: "flex",
+  alignItems: "center",
+  whiteSpace: "nowrap",
+  padding: getSpacing(spacingSm),
+  borderRadius: getBorderRadius(borderRadiusSm),
+  "&:focus-visible": {
+    outline: "none",
+    boxShadow: `inset 0px 0px 0px 4px ${getBorderColor(colorBorderFocus)} `,
+    borderRadius: `${getBorderRadius(borderRadiusSm)} ${getBorderRadius(borderRadiusSm)} 0 0`,
+    ...forcedColors({
+      outline: `${getBorderWidth(borderWidthFocus)} solid ${getBorderColor(colorBorderFocus)}`,
+      outlineOffset: "-6px",
+      borderRadius: `${getBorderRadius(borderRadiusSm)} ${getBorderRadius(borderRadiusSm)} 0 0`
+    })
+  },
+  "&:hover": {
+    background: getHoverColor(colorBackgroundNeutral),
+    ...forcedColors({
+      background: "transparent"
+    })
+  }
+}, ({
+  iconPosition
+}) => ({
+  flexDirection: iconPosition === topPosition ? "column" : "row",
+  gap: iconPosition === topPosition ? getSpacing(spacingXs) : getSpacing(spacing2Xs)
+}), ({
+  width
+}) => ({
+  ...width === "full" && {
+    flex: 1
+  }
+}));
+const TabLabelStyled = styled.span.withConfig({
+  displayName: "TabLabelStyled",
+  componentId: "sc-j2p1s-4"
+})({
+  '[aria-selected="true"] &': {
+    fontWeight: getFontWeight(fontWeightBold)
+  }
+});
+const TabGroupIndicatorStyled = styled.div.withConfig({
+  displayName: "TabGroupIndicatorStyled",
+  componentId: "sc-j2p1s-5"
+})({
+  position: "absolute",
+  bottom: "1px",
+  width: "50px",
+  height: "4px",
+  borderRadius: `${getBorderRadius(borderRadiusSm)} ${getBorderRadius(borderRadiusSm)} 0 0`,
+  background: getObjectColor(colorObjectBrand),
+  transition: "all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
+  ...forcedColors({
+    background: "SelectedItem"
+  })
+});
+const PanelStyled = styled.div.withConfig({
+  displayName: "PanelStyled",
+  componentId: "sc-j2p1s-6"
+})({
+  background: "transparent",
+  "&:focus-visible": {
+    outline: `4px solid ${getBorderColor(colorBorderFocus)}`,
+    borderRadius: `${getBorderRadius(borderRadiusSm)} ${getBorderRadius(borderRadiusSm)} 0 0`,
+    ...forcedColors({
+      outline: "4px solid CanvasText"
+    })
+  }
+});
+const TabGroup = ({
+  tabs,
+  iconPosition = leftPosition,
+  activeValue,
+  width = tabGroupWidthFull,
+  "aria-label": ariaLabel,
+  onTabChange,
+  ...props
+}) => {
+  const getValueFromUrl = () => {
+    if (typeof window === "undefined") return null;
+    if (!(tabs == null ? void 0 : tabs.length)) return null;
+    const hash = window.location.hash;
+    if (!hash.startsWith("#tab-")) return null;
+    const tabValueFromHash = hash.replace("#tab-", "");
+    return tabs.some((tab) => tab.value === tabValueFromHash) ? tabValueFromHash : null;
+  };
+  const [activeTab, setActiveTab] = useState(() => {
+    var _a;
+    return activeValue || ((_a = tabs == null ? void 0 : tabs[0]) == null ? void 0 : _a.value) || "";
+  });
+  const [indicatorStyle, setIndicatorStyle] = useState({
+    left: 0,
+    width: 0
+  });
+  const tabRefs = useRef({});
+  const tabsContainerRef = useRef(null);
+  useEffect(() => {
+    const handleHashChange = () => {
+      const valueFromUrl = getValueFromUrl();
+      if (valueFromUrl) {
+        setActiveTab(valueFromUrl);
+        onTabChange == null ? void 0 : onTabChange(valueFromUrl);
+      }
+    };
+    window.addEventListener("hashchange", handleHashChange);
+    handleHashChange();
+    return () => window.removeEventListener("hashchange", handleHashChange);
+  }, [tabs]);
+  useEffect(() => {
+    const valueFromUrl = getValueFromUrl();
+    if (activeValue !== void 0 && activeValue !== activeTab && !valueFromUrl) {
+      setActiveTab(activeValue);
+    }
+  }, [activeValue]);
+  useEffect(() => {
+    if (!activeTab && (tabs == null ? void 0 : tabs.length)) {
+      setActiveTab(tabs[0].value || "");
+    }
+  }, [tabs]);
+  useEffect(() => {
+    const valueFromUrl = getValueFromUrl();
+    if (valueFromUrl) {
+      setActiveTab(valueFromUrl);
+      onTabChange == null ? void 0 : onTabChange(valueFromUrl);
+    }
+  }, []);
+  useEffect(() => {
+    const activeEl = tabRefs.current[activeTab];
+    if (!activeEl) return;
+    const updateIndicator = () => {
+      setIndicatorStyle({
+        left: activeEl.offsetLeft,
+        width: activeEl.offsetWidth
+      });
+    };
+    const resizeObserver = new ResizeObserver(() => {
+      updateIndicator();
+    });
+    resizeObserver.observe(activeEl);
+    requestAnimationFrame(() => {
+      updateIndicator();
+    });
+    window.addEventListener("resize", updateIndicator);
+    return () => {
+      resizeObserver.disconnect();
+      window.removeEventListener("resize", updateIndicator);
+    };
+  }, [activeTab, tabs]);
+  useEffect(() => {
+    if (width !== "auto") return;
+    const activeEl = tabRefs.current[activeTab];
+    if (activeEl) {
+      requestAnimationFrame(() => {
+        scrollTabIntoView(activeEl);
+      });
+    }
+  }, [activeTab, width]);
+  if (!(tabs == null ? void 0 : tabs.length)) return null;
+  const scrollTabIntoView = (tabEl) => {
+    if (width !== "auto") return;
+    const containerEl = tabsContainerRef.current;
+    if (!containerEl) return;
+    const tabLeft = tabEl.offsetLeft;
+    const tabRight = tabLeft + tabEl.offsetWidth;
+    const containerScrollLeft = containerEl.scrollLeft;
+    const containerWidth = containerEl.offsetWidth;
+    if (tabLeft < containerScrollLeft) {
+      containerEl.scrollTo({
+        left: tabLeft,
+        behavior: "smooth"
+      });
+    } else if (tabRight > containerScrollLeft + containerWidth) {
+      containerEl.scrollTo({
+        left: tabRight - containerWidth,
+        behavior: "smooth"
+      });
+    }
+  };
+  const clearHash = () => {
+    if (typeof window === "undefined") return;
+    const currentHash = window.location.hash.replace("#", "");
+    if (currentHash.startsWith("tab-")) {
+      history.replaceState(null, "", window.location.pathname + window.location.search);
+    }
+  };
+  const handleTabClick = (newValue) => {
+    if (newValue !== activeTab) {
+      setActiveTab(newValue);
+      onTabChange == null ? void 0 : onTabChange(newValue);
+    }
+    clearHash();
+    const tabEl = tabRefs.current[newValue];
+    if (tabEl) scrollTabIntoView(tabEl);
+  };
+  const handleKeyDown = (e, index) => {
+    const lastIndex = tabs.length - 1;
+    if (e.key === "ArrowRight" || e.key === "ArrowLeft") {
+      const isRight = e.key === "ArrowRight";
+      const newIndex = isRight ? index === lastIndex ? 0 : index + 1 : index === 0 ? lastIndex : index - 1;
+      const newTabValue = tabs[newIndex].value;
+      e.preventDefault();
+      const newTabEl = tabRefs.current[newTabValue];
+      if (newTabEl) {
+        newTabEl.focus();
+        scrollTabIntoView(newTabEl);
+      }
+    }
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      const newTabValue = tabs[index].value;
+      setActiveTab(newTabValue);
+      onTabChange == null ? void 0 : onTabChange(newTabValue);
+      clearHash();
+    }
+  };
+  const getTabs = tabs.map((tab, tabIndex) => {
+    const tabValue = tab.value;
+    const isActive = tabValue === activeTab;
+    return /* @__PURE__ */ jsxs(TabStyled, { iconPosition, width, type: "button", ref: (el) => {
+      tabRefs.current[tabValue] = el;
+    }, onClick: () => handleTabClick(tabValue), "aria-selected": isActive, tabIndex: isActive ? 0 : -1, role: "tab", id: `tab-${tabValue}`, "aria-controls": `tabpanel-${tabValue}`, onKeyDown: (e) => handleKeyDown(e, tabIndex), children: [
+      tab.icon ? /* @__PURE__ */ jsx(IconLoader, { name: tab.icon, size: iconPosition === leftPosition ? iconSizeSm : iconSizeLg }) : null,
+      /* @__PURE__ */ jsx(TabLabelStyled, { children: tab.label })
+    ] }, `tab-${tabIndex}`);
+  });
+  const getPanels = tabs.map((tab, tabIndex) => {
+    const tabValue = tab.value;
+    const isActive = tabValue === activeTab;
+    return /* @__PURE__ */ jsx(PanelStyled, { role: "tabpanel", id: `tabpanel-${tabValue}`, "aria-labelledby": `tab-${tabValue}`, hidden: !isActive, tabIndex: 0, children: tab.panelContent }, `tabpanel-${tabIndex}`);
+  });
+  return /* @__PURE__ */ jsxs(TabGroupContainerStyled, { ...props, children: [
+    /* @__PURE__ */ jsxs(TabGroupTabsScrollableContainerStyled, { width, ref: tabsContainerRef, children: [
+      /* @__PURE__ */ jsx(TabGroupTabsStyled, { "aria-label": ariaLabel, role: "tablist", iconPosition, children: getTabs }),
+      /* @__PURE__ */ jsx(TabGroupIndicatorStyled, { style: indicatorStyle })
+    ] }),
+    getPanels
+  ] });
+};
+export {
+  PanelStyled,
+  TabGroupContainerStyled,
+  TabGroupIndicatorStyled,
+  TabGroupTabsScrollableContainerStyled,
+  TabGroupTabsStyled,
+  TabLabelStyled,
+  TabStyled,
+  TabGroup as default,
+  t as tabGroupWidth,
+  tabGroupWidthAuto,
+  tabGroupWidthFull,
+  c as tabIconPositions
+};