@pisell/private-materials 3.4.16 → 3.4.18

package/lib/plus/productSelect/components/IntersectionObserver.js

@@ -0,0 +1,269 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/plus/productSelect/components/IntersectionObserver.tsx
+var IntersectionObserver_exports = {};
+__export(IntersectionObserver_exports, {
+  IntersectionObserverConsumer: () => Consumer,
+  IntersectionObserverContext: () => IntersectionObserverContext,
+  IntersectionObserverProvider: () => IntersectionObserverProvider,
+  IntersectionTrigger: () => IntersectionTrigger,
+  default: () => IntersectionObserver_default
+});
+module.exports = __toCommonJS(IntersectionObserver_exports);
+var import_react = __toESM(require("react"));
+var IntersectionObserverContext = (0, import_react.createContext)({
+  initialized: false,
+  register: () => {
+  },
+  unregister: () => {
+  }
+});
+var { Provider, Consumer } = IntersectionObserverContext;
+var IntersectionObserverProvider = ({
+  children,
+  root = null,
+  rootMargin = "0px",
+  threshold = 0,
+  priorityMode
+}) => {
+  const [mounted, setMounted] = (0, import_react.useState)(false);
+  const [initialized, setInitialized] = (0, import_react.useState)(false);
+  const observerRef = (0, import_react.useRef)(null);
+  const callbackMapRef = (0, import_react.useRef)(/* @__PURE__ */ new Map());
+  const findCallback = (0, import_react.useCallback)((target) => {
+    return callbackMapRef.current.get(target);
+  }, []);
+  const selectPriorityEntry = (0, import_react.useCallback)(
+    (entries, mode) => {
+      if (entries.length === 0) return void 0;
+      if (entries.length === 1) return entries[0];
+      switch (mode) {
+        case "top":
+          return entries.reduce(
+            (prev, curr) => curr.boundingClientRect.top < prev.boundingClientRect.top ? curr : prev
+          );
+        case "bottom":
+          return entries.reduce(
+            (prev, curr) => curr.boundingClientRect.bottom > prev.boundingClientRect.bottom ? curr : prev
+          );
+        case "left":
+          return entries.reduce(
+            (prev, curr) => curr.boundingClientRect.left < prev.boundingClientRect.left ? curr : prev
+          );
+        case "right":
+          return entries.reduce(
+            (prev, curr) => curr.boundingClientRect.right > prev.boundingClientRect.right ? curr : prev
+          );
+        default:
+          return entries[0];
+      }
+    },
+    []
+  );
+  const observerOptions = (0, import_react.useMemo)(
+    () => ({
+      root,
+      rootMargin,
+      threshold
+    }),
+    [root, rootMargin, threshold]
+  );
+  const createObserver = (0, import_react.useCallback)(() => {
+    if (typeof window !== "undefined" && !window.IntersectionObserver) {
+      console.warn("IntersectionObserver is not supported in this browser");
+      return null;
+    }
+    return new IntersectionObserver((entries) => {
+      if (entries.length === 0) return;
+      try {
+        if (!priorityMode) {
+          entries.forEach((entry) => {
+            const callback = findCallback(entry.target);
+            if (callback) {
+              callback(entry);
+            }
+          });
+          return;
+        }
+        const visibleEntries = [];
+        const invisibleEntries = [];
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            visibleEntries.push(entry);
+          } else {
+            invisibleEntries.push(entry);
+          }
+        });
+        invisibleEntries.forEach((entry) => {
+          const callback = findCallback(entry.target);
+          if (callback) {
+            callback(entry);
+          }
+        });
+        if (visibleEntries.length > 0) {
+          const selectedEntry = selectPriorityEntry(
+            visibleEntries,
+            priorityMode
+          );
+          if (selectedEntry) {
+            const callback = findCallback(selectedEntry.target);
+            if (callback) {
+              callback(selectedEntry);
+            }
+          }
+        }
+      } catch (error) {
+        console.error("IntersectionObserver callback error:", error);
+      }
+    }, observerOptions);
+  }, [observerOptions, priorityMode, findCallback, selectPriorityEntry]);
+  const register = (0, import_react.useCallback)(
+    ({
+      ref,
+      callback
+    }) => {
+      if ((ref == null ? void 0 : ref.current) && (observerRef == null ? void 0 : observerRef.current)) {
+        const element = ref.current;
+        if (callbackMapRef.current.has(element)) {
+          return;
+        }
+        callbackMapRef.current.set(element, callback);
+        observerRef.current.observe(element);
+      }
+    },
+    []
+  );
+  const unregister = (0, import_react.useCallback)(
+    ({ ref }) => {
+      if ((ref == null ? void 0 : ref.current) && (observerRef == null ? void 0 : observerRef.current)) {
+        const element = ref.current;
+        callbackMapRef.current.delete(element);
+        observerRef.current.unobserve(element);
+      }
+    },
+    []
+  );
+  (0, import_react.useEffect)(() => {
+    if (mounted) {
+      if (observerRef.current) {
+        observerRef.current.disconnect();
+      }
+      observerRef.current = createObserver();
+      setInitialized(true);
+    }
+  }, [mounted, createObserver]);
+  (0, import_react.useEffect)(() => {
+    setMounted(true);
+    return () => {
+      if (observerRef.current) {
+        observerRef.current.disconnect();
+        callbackMapRef.current.clear();
+        setInitialized(false);
+      }
+    };
+  }, []);
+  const contextValue = {
+    initialized,
+    register,
+    unregister
+  };
+  return /* @__PURE__ */ import_react.default.createElement(Provider, { value: contextValue }, children);
+};
+var useIntersectionTrigger = (elementRef, options = {}) => {
+  const { once = false, onHide, onShow } = options;
+  const { initialized, register, unregister } = (0, import_react.useContext)(
+    IntersectionObserverContext
+  );
+  const [isIntersecting, setIsIntersecting] = (0, import_react.useState)(false);
+  const cleanup = (0, import_react.useCallback)(
+    () => unregister({ ref: elementRef }),
+    [elementRef, unregister]
+  );
+  const intersectionCallback = (0, import_react.useCallback)(
+    (entry) => {
+      if (entry.isIntersecting) {
+        onShow == null ? void 0 : onShow(cleanup);
+        if (once) {
+          unregister({ ref: elementRef });
+        }
+      } else {
+        onHide == null ? void 0 : onHide(cleanup);
+      }
+      setIsIntersecting(entry.isIntersecting);
+    },
+    [onShow, onHide, once, cleanup, unregister, elementRef]
+  );
+  const registerRef = (0, import_react.useRef)();
+  registerRef.current = () => {
+    return register({
+      ref: elementRef,
+      callback: intersectionCallback
+    });
+  };
+  (0, import_react.useEffect)(() => {
+    var _a;
+    if (initialized) {
+      (_a = registerRef.current) == null ? void 0 : _a.call(registerRef);
+    }
+    return () => {
+      cleanup();
+    };
+  }, [initialized, cleanup]);
+  return { isIntersecting };
+};
+var IntersectionTrigger = ({
+  children,
+  className,
+  style = {},
+  ...options
+}) => {
+  const elementRef = (0, import_react.useRef)(null);
+  const { isIntersecting } = useIntersectionTrigger(elementRef, options);
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      className,
+      ref: elementRef,
+      style: {
+        width: "100%",
+        height: "100%",
+        ...style
+      }
+    },
+    children
+  );
+};
+var IntersectionObserver_default = IntersectionObserverProvider;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  IntersectionObserverConsumer,
+  IntersectionObserverContext,
+  IntersectionObserverProvider,
+  IntersectionTrigger
+});

package/lib/plus/productSelect/components/TabsStructure/TabsStructure.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+import type { TabsStructureProps, TabListContainerProps, TabItemProps, RailProps, SelectionIndicatorProps, ScrollShadowProps, ChevronControlsProps, ChevronButtonProps } from './types';
+declare global {
+    interface WeakRef<T extends object> {
+        deref(): T | undefined;
+    }
+    interface WeakRefConstructor {
+        new <T extends object>(target: T): WeakRef<T>;
+    }
+    const WeakRef: WeakRefConstructor | undefined;
+}
+declare const TabListContainer: React.ForwardRefExoticComponent<Omit<TabListContainerProps, "ref"> & React.RefAttributes<HTMLUListElement>>;
+declare const TabItem: React.ForwardRefExoticComponent<Omit<TabItemProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const Rail: React.ForwardRefExoticComponent<Omit<RailProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectionIndicator: React.ForwardRefExoticComponent<Omit<SelectionIndicatorProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const ScrollShadow: React.ForwardRefExoticComponent<Omit<ScrollShadowProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const ChevronButton: React.ForwardRefExoticComponent<Omit<ChevronButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const ChevronControls: React.FC<ChevronControlsProps>;
+declare type TabsStructureComponent = React.FC<TabsStructureProps> & {
+    Rail: typeof Rail;
+    ListContainer: typeof TabListContainer;
+    Item: typeof TabItem;
+    SelectionIndicator: typeof SelectionIndicator;
+    ScrollShadow: typeof ScrollShadow;
+    ChevronControls: typeof ChevronControls;
+    ChevronButton: typeof ChevronButton;
+};
+declare const TabsStructureWithSubComponents: TabsStructureComponent;
+export default TabsStructureWithSubComponents;
+export { TabListContainer, TabItem, Rail, SelectionIndicator, ScrollShadow, ChevronControls, ChevronButton, };

package/lib/plus/productSelect/components/TabsStructure/TabsStructure.js

@@ -0,0 +1,393 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/plus/productSelect/components/TabsStructure/TabsStructure.tsx
+var TabsStructure_exports = {};
+__export(TabsStructure_exports, {
+  ChevronButton: () => ChevronButton,
+  ChevronControls: () => ChevronControls,
+  Rail: () => Rail,
+  ScrollShadow: () => ScrollShadow,
+  SelectionIndicator: () => SelectionIndicator,
+  TabItem: () => TabItem,
+  TabListContainer: () => TabListContainer,
+  default: () => TabsStructure_default
+});
+module.exports = __toCommonJS(TabsStructure_exports);
+var import_react = __toESM(require("react"));
+var import_classnames = __toESM(require("classnames"));
+var import_styles = require("./styles");
+var import_utils = require("./utils");
+var import_ChevronLeft = __toESM(require("@pisell/icon/es/ChevronLeft"));
+var import_ChevronRight = __toESM(require("@pisell/icon/es/ChevronRight"));
+var TabContext = (0, import_react.createContext)({});
+var useTabContext = () => {
+  const context = (0, import_react.useContext)(TabContext);
+  if (!context) {
+    throw new Error("useTabContext must be used within a TabContext.Provider");
+  }
+  return context;
+};
+var TabListContainer = (0, import_react.forwardRef)(
+  ({ children, className, ...props }, ref) => {
+    return /* @__PURE__ */ import_react.default.createElement(
+      "ul",
+      {
+        ref,
+        className: (0, import_classnames.default)(import_styles.tabListClasses.list, className),
+        role: "tablist",
+        ...props
+      },
+      children
+    );
+  }
+);
+var TabItem = (0, import_react.forwardRef)(
+  ({
+    children,
+    isSelected = false,
+    isDisabled = false,
+    className,
+    onClick,
+    tabId,
+    autoRegister = true,
+    ...props
+  }, ref) => {
+    const { selectedTab, onTabChange, registerTab, unregisterTab } = useTabContext();
+    const elementRef = (0, import_react.useRef)(null);
+    const combinedRef = (0, import_react.useCallback)(
+      (element) => {
+        elementRef.current = element;
+        if (typeof ref === "function") {
+          ref(element);
+        } else if (ref && "current" in ref) {
+          ref.current = element;
+        }
+      },
+      [ref]
+    );
+    (0, import_react.useEffect)(() => {
+      if (autoRegister && tabId && elementRef.current && registerTab) {
+        registerTab(tabId, elementRef.current);
+        return () => {
+          if (unregisterTab) {
+            unregisterTab(tabId);
+          }
+        };
+      }
+    }, [tabId, autoRegister, registerTab, unregisterTab]);
+    const handleClick = (0, import_react.useCallback)(() => {
+      if (!isDisabled) {
+        if (tabId && onTabChange) {
+          onTabChange(tabId);
+        }
+        onClick == null ? void 0 : onClick(tabId);
+      }
+    }, [isDisabled, tabId, onTabChange, onClick]);
+    const isTabSelected = tabId ? selectedTab === tabId : isSelected;
+    return /* @__PURE__ */ import_react.default.createElement("li", { role: "presentation", style: { lineHeight: 0 } }, /* @__PURE__ */ import_react.default.createElement(
+      "button",
+      {
+        id: tabId,
+        ref: combinedRef,
+        className: (0, import_classnames.default)(
+          import_styles.tabItemClasses.item,
+          isTabSelected && import_styles.tabItemClasses.selected,
+          isDisabled && import_styles.tabItemClasses.disabled,
+          className
+        ),
+        role: "tab",
+        "aria-selected": isTabSelected,
+        "aria-disabled": isDisabled,
+        disabled: isDisabled,
+        onClick: handleClick,
+        tabIndex: isTabSelected ? 0 : -1,
+        ...props
+      },
+      children
+    ));
+  }
+);
+var Rail = (0, import_react.forwardRef)(
+  ({ children, className, ...props }, ref) => {
+    const { railRef: contextRailRef } = useTabContext();
+    const mergedRef = (0, import_react.useCallback)(
+      (element) => {
+        if (contextRailRef && "current" in contextRailRef) {
+          contextRailRef.current = element;
+        }
+        if (typeof ref === "function") {
+          ref(element);
+        } else if (ref && "current" in ref) {
+          ref.current = element;
+        }
+      },
+      [ref, contextRailRef]
+    );
+    return /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        ref: mergedRef,
+        className: (0, import_classnames.default)(import_styles.railClasses.rail, className),
+        ...props
+      },
+      children
+    );
+  }
+);
+var SelectionIndicator = (0, import_react.forwardRef)(
+  ({ focusRingClasses, isFocusVisible = false, style, className, ...props }, ref) => {
+    return /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        ref,
+        className: (0, import_classnames.default)(
+          import_styles.selectionClasses.selection,
+          import_styles.selectionClasses.position,
+          {
+            [import_styles.selectionClasses.focused]: isFocusVisible && focusRingClasses
+          },
+          className
+        ),
+        style,
+        "aria-hidden": "true",
+        ...props
+      }
+    );
+  }
+);
+var ScrollShadow = (0, import_react.forwardRef)(
+  ({ visible, location, className, ...props }, ref) => {
+    return /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        ref,
+        className: (0, import_classnames.default)(
+          import_styles.shadowClasses.shadow,
+          {
+            [import_styles.shadowClasses.isVisible]: visible,
+            [import_styles.shadowClasses.locationStart]: location === "start",
+            [import_styles.shadowClasses.locationEnd]: location === "end"
+          },
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+var ChevronButton = (0, import_react.forwardRef)(
+  ({
+    direction,
+    disabled = false,
+    onClick,
+    className,
+    "aria-label": ariaLabel,
+    ...props
+  }, ref) => {
+    const defaultAriaLabel = direction === "prev" ? "prev" : "next";
+    return /* @__PURE__ */ import_react.default.createElement(
+      "button",
+      {
+        ref,
+        className: (0, import_classnames.default)(
+          import_styles.chevronButtonClasses.button,
+          {
+            [import_styles.chevronButtonClasses.disabled]: disabled,
+            [import_styles.chevronButtonClasses.prev]: direction === "prev",
+            [import_styles.chevronButtonClasses.next]: direction === "next"
+          },
+          className
+        ),
+        disabled,
+        onClick,
+        "aria-label": ariaLabel || defaultAriaLabel,
+        type: "button",
+        ...props
+      },
+      direction === "prev" ? /* @__PURE__ */ import_react.default.createElement(import_ChevronLeft.default, null) : /* @__PURE__ */ import_react.default.createElement(import_ChevronRight.default, null)
+    );
+  }
+);
+var ChevronControls = ({
+  isPrevDisabled = false,
+  isNextDisabled = false,
+  onPrevClick,
+  onNextClick,
+  prevAction,
+  nextAction,
+  className,
+  ...props
+}) => {
+  const handlePrevClick = onPrevClick || prevAction;
+  const handleNextClick = onNextClick || nextAction;
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)(import_styles.chevronClasses.controls, className), ...props }, /* @__PURE__ */ import_react.default.createElement(
+    ChevronButton,
+    {
+      direction: "prev",
+      disabled: isPrevDisabled,
+      onClick: handlePrevClick
+    }
+  ), /* @__PURE__ */ import_react.default.createElement(
+    ChevronButton,
+    {
+      direction: "next",
+      disabled: isNextDisabled,
+      onClick: handleNextClick
+    }
+  ));
+};
+var TabsStructure = ({
+  selectedTab,
+  onTabChange,
+  autoScrollToSelected = true,
+  children,
+  className,
+  railRef: externalRailRef,
+  ...props
+}) => {
+  const tabElementsRef = (0, import_react.useRef)(/* @__PURE__ */ new Map());
+  const internalRailRef = (0, import_react.useRef)(null);
+  const railRef = externalRailRef || internalRailRef;
+  if (!selectedTab && children) {
+    console.warn("TabsStructure: No selectedTab provided, consider setting a default value");
+  }
+  const registerTab = (0, import_react.useCallback)((tabId, element) => {
+    if (!tabId || !element) {
+      console.warn("TabsStructure: Invalid tabId or element provided to registerTab");
+      return;
+    }
+    if (typeof WeakRef !== "undefined") {
+      tabElementsRef.current.set(tabId, new WeakRef(element));
+    } else {
+      tabElementsRef.current.set(tabId, element);
+    }
+  }, []);
+  const unregisterTab = (0, import_react.useCallback)((tabId) => {
+    if (tabId) {
+      tabElementsRef.current.delete(tabId);
+    }
+  }, []);
+  const clearAllTabs = (0, import_react.useCallback)(() => {
+    tabElementsRef.current.clear();
+  }, []);
+  (0, import_react.useEffect)(() => {
+    return () => {
+      if (typeof WeakRef === "undefined") {
+        clearAllTabs();
+      }
+    };
+  }, [clearAllTabs]);
+  const getTabElement = (0, import_react.useCallback)((tabId) => {
+    const ref = tabElementsRef.current.get(tabId);
+    if (!ref) return null;
+    if (typeof WeakRef !== "undefined" && ref instanceof WeakRef) {
+      const element = ref.deref();
+      if (!element) {
+        tabElementsRef.current.delete(tabId);
+        return null;
+      }
+      return element;
+    } else {
+      return ref;
+    }
+  }, []);
+  const scrollToTab = (0, import_react.useCallback)((tabId) => {
+    if (!tabId || !railRef.current) {
+      return;
+    }
+    const targetElement = getTabElement(tabId);
+    if (!targetElement) {
+      console.warn(`TabsStructure: Tab element with id "${tabId}" not found`);
+      return;
+    }
+    if (!targetElement.offsetParent) {
+      console.warn(`TabsStructure: Tab element "${tabId}" is not visible or not in DOM`);
+      return;
+    }
+    const rail = railRef.current;
+    const targetLeft = targetElement.offsetLeft;
+    const currentScrollLeft = rail.scrollLeft;
+    if (Math.abs(targetLeft - currentScrollLeft) > 1) {
+      (0, import_utils.safeScrollTo)(rail, {
+        left: targetLeft,
+        behavior: "smooth"
+      });
+    }
+  }, [getTabElement]);
+  (0, import_react.useEffect)(() => {
+    if (autoScrollToSelected && selectedTab) {
+      scrollToTab(selectedTab);
+    }
+  }, [selectedTab, autoScrollToSelected, scrollToTab]);
+  const contextValue = (0, import_react.useMemo)(
+    () => ({
+      selectedTab,
+      onTabChange,
+      registerTab,
+      unregisterTab,
+      railRef
+    }),
+    [selectedTab, onTabChange, registerTab, unregisterTab, railRef]
+  );
+  return /* @__PURE__ */ import_react.default.createElement(TabContext.Provider, { value: contextValue }, /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      ...props,
+      className: (0, import_classnames.default)(import_styles.tabWrapperClasses.wrapper, className)
+    },
+    children
+  ));
+};
+var TabsStructureWithSubComponents = TabsStructure;
+TabsStructureWithSubComponents.Rail = Rail;
+TabsStructureWithSubComponents.ListContainer = TabListContainer;
+TabsStructureWithSubComponents.Item = TabItem;
+TabsStructureWithSubComponents.SelectionIndicator = SelectionIndicator;
+TabsStructureWithSubComponents.ScrollShadow = ScrollShadow;
+TabsStructureWithSubComponents.ChevronControls = ChevronControls;
+TabsStructureWithSubComponents.ChevronButton = ChevronButton;
+TabsStructure.displayName = "TabsStructure";
+Rail.displayName = "TabsStructure.Rail";
+TabListContainer.displayName = "TabsStructure.ListContainer";
+TabItem.displayName = "TabsStructure.Item";
+SelectionIndicator.displayName = "TabsStructure.SelectionIndicator";
+ScrollShadow.displayName = "TabsStructure.ScrollShadow";
+ChevronControls.displayName = "TabsStructure.ChevronControls";
+ChevronButton.displayName = "TabsStructure.ChevronButton";
+var TabsStructure_default = TabsStructureWithSubComponents;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ChevronButton,
+  ChevronControls,
+  Rail,
+  ScrollShadow,
+  SelectionIndicator,
+  TabItem,
+  TabListContainer
+});