@dmsi/wedgekit-react 0.0.2

package/dist/components/ContentTabs.cjs

@@ -0,0 +1,472 @@
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+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/components/ContentTabs.tsx
+var ContentTabs_exports = {};
+__export(ContentTabs_exports, {
+  ContentTabs: () => ContentTabs
+});
+module.exports = __toCommonJS(ContentTabs_exports);
+var import_clsx4 = __toESM(require("clsx"), 1);
+var import_react2 = require("react");
+
+// src/components/ContentTab.tsx
+var import_clsx3 = __toESM(require("clsx"), 1);
+var import_react = require("react");
+
+// src/components/Button.tsx
+var import_clsx2 = __toESM(require("clsx"), 1);
+
+// src/classNames.ts
+var import_clsx = __toESM(require("clsx"), 1);
+var typography = {
+  display1: (0, import_clsx.default)(
+    "font-sans font-semibold",
+    "text-display-1-mobile desktop:text-display-1-desktop compact:text-display-1-desktop-compact",
+    "leading-display-1-mobile desktop:leading-display-1-desktop"
+  ),
+  display2: (0, import_clsx.default)(
+    "font-sans font-bold",
+    "text-display-2-mobile desktop:text-display-2-desktop compact:text-display-2-desktop-compact",
+    "leading-display-2-mobile desktop:leading-display-2-desktop"
+  ),
+  heading1: (0, import_clsx.default)(
+    "font-sans font-semibold",
+    "text-heading-1-mobile desktop:text-heading-1-desktop compact:text-heading-1-desktop-compact",
+    "leading-heading-1-mobile desktop:leading-heading-1-desktop"
+  ),
+  heading2: (0, import_clsx.default)(
+    "font-sans font-normal",
+    "text-heading-2-mobile desktop:text-heading-2-desktop compact:text-heading-2-desktop-compact",
+    "leading-heading-2-mobile desktop:leading-heading-2-desktop"
+  ),
+  heading3: (0, import_clsx.default)(
+    "font-sans font-semibold",
+    "text-heading-3-mobile desktop:text-heading-3-desktop compact:text-heading-3-desktop-compact",
+    "leading-heading-3-mobile desktop:leading-heading-3-desktop"
+  ),
+  subheader: (0, import_clsx.default)(
+    "font-sans font-semibold",
+    "text-subheader-mobile desktop:text-subheader-desktop compact:text-subheader-desktop-compact",
+    "leading-subheader-mobile desktop:leading-subheader-desktop"
+  ),
+  link: (0, import_clsx.default)(
+    "font-sans font-normal",
+    "text-link-mobile desktop:text-link-desktop compact:text-link-desktop-compact",
+    "leading-link-mobile desktop:leading-link-desktop"
+  ),
+  buttonLabel: (0, import_clsx.default)(
+    "font-sans font-semibold",
+    "text-label-mobile desktop:text-label-desktop compact:text-label-desktop-compact",
+    "leading-label-mobile desktop:leading-label-desktop"
+  ),
+  label: (0, import_clsx.default)(
+    "font-sans font-semibold",
+    "text-label-mobile desktop:text-label-desktop compact:text-label-desktop-compact",
+    "leading-label-mobile desktop:leading-label-desktop"
+  ),
+  paragraph: (0, import_clsx.default)(
+    "font-sans font-normal",
+    "text-paragraph-mobile desktop:text-paragraph-desktop compact:text-paragraph-desktop-compact",
+    "leading-paragraph-mobile desktop:leading-paragraph-desktop"
+  ),
+  caption: (0, import_clsx.default)(
+    "font-sans font-normal",
+    "text-caption-mobile desktop:text-caption-desktop compact:text-caption-desktop-compact",
+    "leading-caption-mobile desktop:leading-caption-desktop"
+  )
+};
+var baseTransition = (0, import_clsx.default)(
+  "transition-colors duration-100 ease-in-out"
+);
+var componentGap = (0, import_clsx.default)(
+  "gap-mobile-component-gap desktop:gap-desktop-component-gap compact:gap-desktop-compact-component-gap"
+);
+var paddingUsingComponentGap = (0, import_clsx.default)(
+  "p-mobile-component-gap desktop:p-desktop-component-gap compact:p-desktop-compact-component-gap"
+);
+var paddingYUsingLayoutGroupGap = (0, import_clsx.default)(
+  "py-mobile-layout-group-gap desktop:py-desktop-layout-group-gap compact:py-desktop-compact-layout-group-gap"
+);
+var componentPadding = (0, import_clsx.default)(
+  "p-mobile-component-padding desktop:p-desktop-component-padding compact:p-desktop-compact-component-padding"
+);
+var componentPaddingBottom = (0, import_clsx.default)(
+  "pb-mobile-component-padding desktop:pb-desktop-component-padding compact:pb-desktop-compact-component-padding"
+);
+var componentPaddingY = (0, import_clsx.default)(
+  "py-mobile-component-padding desktop:py-desktop-component-padding compact:py-desktop-compact-component-padding"
+);
+var componentPaddingXUsingComponentGap = (0, import_clsx.default)(
+  "px-mobile-component-gap desktop:px-desktop-component-gap compact:px-desktop-compact-component-gap"
+);
+var componentPaddingYUsingComponentGap = (0, import_clsx.default)(
+  "py-mobile-component-gap desktop:py-desktop-component-gap compact:py-desktop-compact-component-gap"
+);
+var componentPaddingMinusBorder = (0, import_clsx.default)(
+  "p-[calc(var(--spacing-mobile-component-padding)_-_1px)] desktop:p-[calc(var(--spacing-desktop-component-padding)_-_1px)] compact:p-[calc(var(--spacing-desktop-compact-component-padding)_-_1px)]"
+);
+var componentPaddingMinus2pxBorder = (0, import_clsx.default)(
+  "p-[calc(var(--spacing-mobile-component-padding)_-_2px)] desktop:p-[calc(var(--spacing-desktop-component-padding)_-_2px)] compact:p-[calc(var(--spacing-desktop-compact-component-padding)_-_2px)]"
+);
+var layoutPaddingBottom = (0, import_clsx.default)(
+  "pb-mobile-layout-padding desktop:pb-desktop-layout-padding compact:pb-desktop-compact-layout-padding"
+);
+var layoutPaddingY = (0, import_clsx.default)(
+  "py-mobile-layout-padding desktop:py-desktop-layout-padding compact:py-desktop-compact-layout-padding"
+);
+var containerPaddingX = (0, import_clsx.default)(
+  "px-mobile-container-padding desktop:px-desktop-container-padding compact:px-desktop-compact-container-padding"
+);
+var containerPaddingY = (0, import_clsx.default)(
+  "py-mobile-container-padding desktop:py-desktop-container-padding compact:py-desktop-compact-container-padding"
+);
+var layoutGroupGapPaddingY = (0, import_clsx.default)(
+  "py-mobile-layout-group-gap desktop:py-desktop-layout-group-gap compact:py-desktop-compact-layout-group-gap"
+);
+var layoutGroupGap = (0, import_clsx.default)(
+  "gap-mobile-layout-group-gap desktop:gap-desktop-layout-group-gap compact:gap-desktop-compact-layout-group-gap"
+);
+var layoutGap = (0, import_clsx.default)(
+  "gap-mobile-layout-gap desktop:gap-desktop-layout-gap compact:gap-desktop-compact-layout-gap"
+);
+var gapUsingContainerPadding = (0, import_clsx.default)(
+  "gap-mobile-container-padding desktop:gap-desktop-container-padding compact:gap-desktop-compact-container-padding"
+);
+
+// src/components/Button.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var Button = (_a) => {
+  var _b = _a, {
+    variant = "primary",
+    as = "button",
+    block,
+    leftIcon,
+    rightIcon,
+    className,
+    classNameLabel,
+    disabled = false,
+    children,
+    iconOnly = false,
+    colorClassName,
+    href
+  } = _b, props = __objRest(_b, [
+    "variant",
+    "as",
+    "block",
+    "leftIcon",
+    "rightIcon",
+    "className",
+    "classNameLabel",
+    "disabled",
+    "children",
+    "iconOnly",
+    "colorClassName",
+    "href"
+  ]);
+  const primaryVariantStyles = variant === "primary" && (0, import_clsx2.default)(
+    (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-on-action-primary-normal",
+    "bg-background-action-primary-normal border-background-action-primary-normal",
+    "hover:bg-background-action-primary-hover hover:border-background-action-primary-hover",
+    "focus:bg-background-action-primary-hover focus:border-background-action-primary-hover focus:outline-0",
+    "active:bg-background-action-primary-active active:border-background-action-primary-active",
+    "disabled:bg-background-action-primary-disabled disabled:border-background-action-primary-disabled disabled:text-text-on-action-primary-disabled"
+  );
+  const secondaryVariantStyles = variant === "secondary" && (0, import_clsx2.default)(
+    (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-action-primary-normal",
+    "bg-background-action-secondary-normal border-border-action-normal",
+    "hover:bg-background-action-secondary-hover hover:border-border-action-hover hover:text-text-action-primary-hover",
+    "focus:bg-background-action-secondary-hover focus:border-border-action-hover focus:text-text-action-primary-hover focus:outline-0",
+    "active:bg-background-action-secondary-active active:border-border-action-active active:text-text-action-primary-active",
+    "disabled:bg-background-action-primary-disabled disabled:border-border-action-disabled disabled:text-text-action-primary-disabled"
+  );
+  const tertiaryVariantStyles = variant === "tertiary" && (0, import_clsx2.default)(
+    "bg-transparent border-transparent",
+    iconOnly ? (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-icon-action-primary-normal" : (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-action-primary-normal",
+    "bg-transparent border-transparent",
+    "hover:bg-background-action-secondary-hover hover:border-background-action-secondary-hover hover:text-text-action-primary-hover",
+    "focus:bg-background-action-secondary-hover focus:border-background-action-secondary-hover focus:text-text-action-primary-hover focus:outline-0",
+    "active:bg-background-action-secondary-active active:border-transparent active:text-text-action-primary-active",
+    "disabled:bg-transparent disabled:border-transparent disabled:text-text-action-primary-disabled"
+  );
+  const primaryCriticalVariantStyles = variant === "primary-critical" && (0, import_clsx2.default)(
+    (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-on-action-primary-normal",
+    "bg-background-action-critical-primary-normal border-background-action-critical-primary-normal",
+    "hover:bg-background-action-critical-primary-hover hover:border-background-action-critical-primary-hover",
+    "focus:bg-background-action-critical-primary-hover focus:border-background-action-critical-primary-hover focus:outline-0",
+    "active:bg-background-action-critical-primary-active active:border-background-action-critical-primary-active",
+    "disabled:bg-background-action-critical-primary-disabled disabled:border-background-action-critical-primary-disabled disabled:text-text-on-action-primary-disabled"
+  );
+  const secondaryCriticalVariantStyles = variant === "secondary-critical" && (0, import_clsx2.default)(
+    (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-action-critical-normal",
+    "bg-background-action-critical-secondary-normal border-border-action-critical-normal",
+    "hover:bg-background-action-critical-secondary-hover hover:border-border-action-critical-hover hover:text-text-action-critical-hover",
+    "focus:bg-background-action-critical-secondary-hover focus:border-border-action-critical-hover focus:text-text-action-critical-hover focus:outline-0",
+    "active:bg-background-action-critical-secondary-active active:border-border-action-critical-active active:text-text-action-critical-active",
+    "disabled:bg-background-action-critical-disabled disabled:border-border-action-critical-disabled disabled:text-text-action-critical-disabled"
+  );
+  const tertiaryCriticalVariantStyles = variant === "tertiary-critical" && (0, import_clsx2.default)(
+    (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-action-critical-normal",
+    "bg-transparent border-transparent text-text-action-critical-normal",
+    "hover:bg-background-action-critical-secondary-hover hover:border-background-action-critical-secondary-hover hover:text-text-action-critical-hover",
+    "focus:bg-background-action-critical-secondary-hover focus:border-background-action-critical-secondary-hover focus:text-text-action-critical-hover focus:outline-0",
+    "active:bg-background-action-critical-secondary-active active:border-background-action-critical-secondary-active active:text-text-action-critical-active",
+    "disabled:bg-transparent disabled:border-transparent disabled:text-text-action-critical-disabled"
+  );
+  const navigationVarianStyles = variant === "navigation" && (0, import_clsx2.default)(
+    (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-on-action-primary-normal",
+    "bg-transparent",
+    "hover:bg-background-on-action-secondary-hover hover:text-brand-text-action-primary-hover",
+    // "hover:bg-background-action-secondary-hover hover:text-text-action-primary-hover", // Will use this once colors are finalized
+    "focus:bg-background-on-action-secondary-hover focus:text-brand-text-action-primary-hover focus:outline-0",
+    // "focus:bg-background-action-secondary-hover focus:text-text-action-primary-hover", // Will use this once colors are finalized
+    "active:bg-background-on-action-secondary-active active:text-brand-text-action-primary-active",
+    // "active:bg-background-action-secondary-active active:text-text-action-primary-active", // Will use this once colors are finalized
+    "disabled:bg-transparent disabled:text-text-on-action-primary-disabled",
+    "flex-col",
+    paddingUsingComponentGap
+  );
+  const notNavigationVariantStyles = variant !== "navigation" && (0, import_clsx2.default)("border-2 flex-row", componentPaddingMinus2pxBorder, componentGap);
+  const buttonClasses = (0, import_clsx2.default)(
+    disabled ? "cursor-default" : "cursor-pointer",
+    block ? "w-full" : "w-fit",
+    baseTransition,
+    "rounded-sm whitespace-nowrap inline-flex items-center justify-center group/btn",
+    primaryVariantStyles,
+    secondaryVariantStyles,
+    tertiaryVariantStyles,
+    primaryCriticalVariantStyles,
+    secondaryCriticalVariantStyles,
+    tertiaryCriticalVariantStyles,
+    navigationVarianStyles,
+    notNavigationVariantStyles,
+    className
+  );
+  const labelClasses = (0, import_clsx2.default)(
+    "min-h-6 flex items-center justify-center",
+    classNameLabel,
+    componentPaddingXUsingComponentGap,
+    typography.buttonLabel
+  );
+  const Element = href ? "a" : as;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    Element,
+    __spreadProps(__spreadValues({
+      type: Element === "button" ? "button" : void 0,
+      className: buttonClasses
+    }, props), {
+      disabled,
+      href,
+      children: [
+        leftIcon && leftIcon,
+        !iconOnly && children && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: labelClasses, children }),
+        rightIcon && rightIcon
+      ]
+    })
+  );
+};
+Button.displayName = "Button";
+
+// src/components/ContentTab.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var ContentTab = (_a) => {
+  var _b = _a, {
+    label,
+    selected = false,
+    className,
+    disabled = false,
+    onClick,
+    ref
+  } = _b, props = __objRest(_b, [
+    "label",
+    "selected",
+    "className",
+    "disabled",
+    "onClick",
+    "ref"
+  ]);
+  const [active, setActive] = (0, import_react.useState)(false);
+  const handleClick = (0, import_react.useCallback)(
+    (e) => {
+      if (!disabled) {
+        onClick == null ? void 0 : onClick(e);
+      }
+    },
+    [onClick, disabled]
+  );
+  const computedClassName = (0, import_clsx3.default)(
+    "absolute left-0 right-0 bottom-0 transition-colors duration-200 ease-in-out hover:bg-border-action-hover z-10",
+    "rounded-px",
+    "h-0.5",
+    active && "bg-text-action-primary-active",
+    !active && !disabled && "bg-text-action-primary-normal",
+    !active && disabled && "bg-text-action-primary-disabled",
+    className
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "relative", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      Button,
+      __spreadProps(__spreadValues({
+        ref,
+        variant: "tertiary",
+        disabled,
+        onMouseDown: () => setActive(true),
+        onMouseLeave: () => setActive(false),
+        onMouseUp: () => setActive(false),
+        onClick: handleClick,
+        role: "tab",
+        "aria-selected": selected
+      }, props), {
+        children: label
+      })
+    ),
+    selected && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: computedClassName, children: " " })
+  ] });
+};
+ContentTab.displayName = "ContentTab";
+
+// src/components/ContentTabs.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var afterClasses = "after:absolute after:bottom-0 after:left-0 after:w-full after:h-0.5 after:bg-border-primary-normal z-0";
+var ContentTabs = ({ tabs, onTabChange }) => {
+  var _a, _b;
+  const [selectedTab, setSelectedTab] = (0, import_react2.useState)(((_a = tabs[0]) == null ? void 0 : _a.id) || "");
+  const [focusedTabIndex, setFocusedTabIndex] = (0, import_react2.useState)(0);
+  const tabRefs = (0, import_react2.useRef)([]);
+  const handleTabClick = (0, import_react2.useCallback)(
+    (id, index) => {
+      setSelectedTab(id);
+      setFocusedTabIndex(index);
+      onTabChange == null ? void 0 : onTabChange(id);
+    },
+    [onTabChange]
+  );
+  const handleKeyDown = (e) => {
+    var _a2;
+    let newIndex = focusedTabIndex;
+    if (e.key === "ArrowRight") {
+      e.preventDefault();
+      newIndex = (focusedTabIndex + 1) % tabs.length;
+    } else if (e.key === "ArrowLeft") {
+      e.preventDefault();
+      newIndex = (focusedTabIndex - 1 + tabs.length) % tabs.length;
+    } else {
+      return;
+    }
+    const id = tabs[newIndex].id;
+    setSelectedTab(id);
+    onTabChange == null ? void 0 : onTabChange(id);
+    (_a2 = tabRefs.current[newIndex]) == null ? void 0 : _a2.focus();
+    setFocusedTabIndex(newIndex);
+  };
+  const selectedContent = (_b = tabs.find((tab) => tab.id === selectedTab)) == null ? void 0 : _b.content;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "overflow-x-auto pb-2", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "div",
+      {
+        role: "tablist",
+        "aria-orientation": "horizontal",
+        className: (0, import_clsx4.default)("flex relative", afterClasses),
+        onKeyDown: handleKeyDown,
+        children: tabs.map((tab, index) => {
+          const isSelected = selectedTab === tab.id;
+          return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            ContentTab,
+            {
+              id: `tab-${tab.id}`,
+              label: tab.label,
+              selected: isSelected,
+              onClick: () => handleTabClick(tab.id, index),
+              onFocus: () => {
+                setSelectedTab(tab.id);
+                setFocusedTabIndex(index);
+                onTabChange == null ? void 0 : onTabChange(tab.id);
+              },
+              className: (0, import_clsx4.default)(!isSelected && afterClasses),
+              role: "tab",
+              "aria-selected": isSelected,
+              "aria-controls": `panel-${tab.id}`,
+              tabIndex: isSelected ? 0 : -1,
+              ref: (el) => {
+                tabRefs.current[index] = el;
+              }
+            },
+            tab.id
+          );
+        })
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "div",
+      {
+        id: `panel-${selectedTab}`,
+        className: "mt-2",
+        role: "tabpanel",
+        "aria-labelledby": `tab-${selectedTab}`,
+        tabIndex: 0,
+        children: selectedContent
+      }
+    )
+  ] });
+};
+ContentTabs.displayName = "ContentTabs";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ContentTabs
+});

package/dist/components/ContentTabs.js

@@ -0,0 +1,98 @@
+"use client";
+import {
+  ContentTab
+} from "../chunk-UU3FA6LV.js";
+import "../chunk-KENSVWOY.js";
+import "../chunk-KX3O6GJ6.js";
+import "../chunk-ORMEWXMH.js";
+
+// src/components/ContentTabs.tsx
+import clsx from "clsx";
+import { useState, useRef, useCallback } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var afterClasses = "after:absolute after:bottom-0 after:left-0 after:w-full after:h-0.5 after:bg-border-primary-normal z-0";
+var ContentTabs = ({ tabs, onTabChange }) => {
+  var _a, _b;
+  const [selectedTab, setSelectedTab] = useState(((_a = tabs[0]) == null ? void 0 : _a.id) || "");
+  const [focusedTabIndex, setFocusedTabIndex] = useState(0);
+  const tabRefs = useRef([]);
+  const handleTabClick = useCallback(
+    (id, index) => {
+      setSelectedTab(id);
+      setFocusedTabIndex(index);
+      onTabChange == null ? void 0 : onTabChange(id);
+    },
+    [onTabChange]
+  );
+  const handleKeyDown = (e) => {
+    var _a2;
+    let newIndex = focusedTabIndex;
+    if (e.key === "ArrowRight") {
+      e.preventDefault();
+      newIndex = (focusedTabIndex + 1) % tabs.length;
+    } else if (e.key === "ArrowLeft") {
+      e.preventDefault();
+      newIndex = (focusedTabIndex - 1 + tabs.length) % tabs.length;
+    } else {
+      return;
+    }
+    const id = tabs[newIndex].id;
+    setSelectedTab(id);
+    onTabChange == null ? void 0 : onTabChange(id);
+    (_a2 = tabRefs.current[newIndex]) == null ? void 0 : _a2.focus();
+    setFocusedTabIndex(newIndex);
+  };
+  const selectedContent = (_b = tabs.find((tab) => tab.id === selectedTab)) == null ? void 0 : _b.content;
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx("div", { className: "overflow-x-auto pb-2", children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "tablist",
+        "aria-orientation": "horizontal",
+        className: clsx("flex relative", afterClasses),
+        onKeyDown: handleKeyDown,
+        children: tabs.map((tab, index) => {
+          const isSelected = selectedTab === tab.id;
+          return /* @__PURE__ */ jsx(
+            ContentTab,
+            {
+              id: `tab-${tab.id}`,
+              label: tab.label,
+              selected: isSelected,
+              onClick: () => handleTabClick(tab.id, index),
+              onFocus: () => {
+                setSelectedTab(tab.id);
+                setFocusedTabIndex(index);
+                onTabChange == null ? void 0 : onTabChange(tab.id);
+              },
+              className: clsx(!isSelected && afterClasses),
+              role: "tab",
+              "aria-selected": isSelected,
+              "aria-controls": `panel-${tab.id}`,
+              tabIndex: isSelected ? 0 : -1,
+              ref: (el) => {
+                tabRefs.current[index] = el;
+              }
+            },
+            tab.id
+          );
+        })
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        id: `panel-${selectedTab}`,
+        className: "mt-2",
+        role: "tabpanel",
+        "aria-labelledby": `tab-${selectedTab}`,
+        tabIndex: 0,
+        children: selectedContent
+      }
+    )
+  ] });
+};
+ContentTabs.displayName = "ContentTabs";
+export {
+  ContentTabs
+};

package/dist/components/DMSiLogo.cjs

@@ -0,0 +1,79 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/DMSiLogo.tsx
+var DMSiLogo_exports = {};
+__export(DMSiLogo_exports, {
+  DMSiLogo: () => DMSiLogo
+});
+module.exports = __toCommonJS(DMSiLogo_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+function DMSiLogo() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "svg",
+    {
+      width: "107",
+      height: "24",
+      viewBox: "0 0 107 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "path",
+          {
+            d: "M10.1472 5.86855H22.261C24.0328 5.86855 25.2192 5.79792 26.2514 7.25517C27.1489 8.60833 27.4185 9.79792 27.2105 11.4336C27.0025 13.0693 26.5596 14.2291 25.4926 15.6529C24.9996 16.3295 24.3795 16.8648 23.6284 17.2552C22.6077 17.7533 21.9529 17.6827 20.9206 17.6827H8.69893V17.6381L8.00562 23.2589H20.7704C24.2755 23.2589 27.6496 22.5228 30.4807 19.9949C33.0999 17.6827 34.6444 14.8128 35.0489 11.612C35.4918 8.12506 34.6406 5.72357 32.2948 3.3035C29.8875 0.775615 26.8793 0.362976 23.2278 0.362976H10.8328L10.1472 5.92803V5.86855Z",
+            fill: "#1D1E1E"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "path",
+          {
+            d: "M45.7143 0.960477L45.3484 3.9233L45.437 3.64077C46.9276 1.46605 49.2772 0.618469 51.8771 0.618469C54.6042 0.618469 56.3567 1.62219 57.4082 3.91958C59.2263 1.53668 61.5527 0.618469 64.4531 0.618469C66.3135 0.618469 67.9544 1.16122 69.0868 2.45862C70.485 4.04598 70.2192 6.1352 69.9342 8.3917L68.0083 23.2356H60.5705L62.3462 9.28018C62.5234 7.901 62.5041 6.35453 60.5128 6.35453C58.0862 6.35453 57.6085 8.52925 57.389 10.2393L55.7366 23.2319H48.2025L49.9782 9.27646C50.1477 7.93817 49.9897 6.22442 48.1255 6.22442C46.0918 6.22442 45.4408 7.6891 45.2367 9.27646L43.461 23.2319H35.3453L38.2072 0.960477H45.7143Z",
+            fill: "#1D1E1E"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "path",
+          {
+            d: "M97.4234 0.336578L96.6954 6.39234H103.474L96.2755 9.54104L94.5076 23.2734H103.255L106.175 0.336578H97.4234Z",
+            fill: "#1D1E1E"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "path",
+          {
+            d: "M91.03 10.4126C89.3545 9.34573 86.6082 9.04833 84.6092 8.79182C83.9158 8.70632 83.1339 8.49814 82.4059 8.29368C82.1286 8.23792 81.8705 8.16729 81.6317 8.07807C81.5431 8.05204 81.443 8.02231 81.3583 8C81.1618 7.95539 80.9461 7.81041 80.7535 7.61338C80.353 7.30855 80.1141 6.94424 80.1141 6.54647C80.1141 6.35688 80.1835 6.17844 80.2836 6.00372C80.2952 5.98513 80.3029 5.97026 80.3144 5.95167C80.7921 5.20446 82.1248 4.66543 83.7117 4.66543C85.626 4.66543 87.1821 5.44981 87.29 6.43866H94.7393C93.7571 2.34572 89.0772 0 84.8326 0C82.3135 0 79.1204 0.342007 76.7439 1.66171C74.4598 2.94052 72.8228 4.66914 72.5069 7.14126C71.7674 12.9405 77.1945 14.026 81.8436 14.6654C82.1017 14.6952 82.6062 14.8141 83.157 15.0037C84.5976 15.2974 85.6183 16.026 85.6183 16.8848C85.6183 17.8773 84.2509 18.6989 82.4522 18.8699C82.2442 18.9145 82.0593 18.9368 81.9168 18.9368C80.7689 18.9368 79.987 18.8625 79.4131 18.487C78.689 18.197 78.1613 17.777 77.9726 17.29H70.165C71.205 22.3234 75.8387 24 80.534 24C85.6145 24 92.6747 22.2491 93.4412 16.2342C93.6801 14.3494 93.0099 11.7286 91.0378 10.4089L91.03 10.4126Z",
+            fill: "#1D1E1E"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "path",
+          {
+            d: "M1.85771 9.54941H16.9027L0.825439 16.9174L1.85771 9.54941Z",
+            fill: "#0077C8"
+          }
+        )
+      ]
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DMSiLogo
+});