@kenpan/zds-r8f3v1 0.1.0

package/dist/components/layout/SectionLabel.js

@@ -0,0 +1,127 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import * as React from "react";
+import Box from "../../packages/zenith-ui/node_modules/@mui/material/esm/Box/Box.js";
+import Typography from "../../packages/zenith-ui/node_modules/@mui/material/esm/Typography/Typography.js";
+const SectionLabel = React.forwardRef(
+  function SectionLabel2(props, ref) {
+    const {
+      title,
+      supportingText,
+      helpIcon,
+      actions,
+      size = "sm",
+      sx,
+      className
+    } = props;
+    const isSm = size === "sm";
+    const headingVariant = isSm ? "text-sm-semibold" : "text-md-semibold";
+    const supportingVariant = isSm ? "text-sm-regular" : "text-md-regular";
+    return /* @__PURE__ */ jsxs(
+      Box,
+      {
+        ref,
+        className,
+        sx: [
+          {
+            display: "flex",
+            flexDirection: "column",
+            width: "100%",
+            minWidth: 0,
+            // ui-libv2: content block + actions are separated by a 12px gap
+            gap: actions ? 3 : 0
+          },
+          ...Array.isArray(sx) ? sx : sx ? [sx] : []
+        ],
+        children: [
+          /* @__PURE__ */ jsxs(
+            Box,
+            {
+              sx: {
+                display: "flex",
+                flexDirection: "column",
+                width: "100%",
+                minWidth: 0
+              },
+              children: [
+                /* @__PURE__ */ jsxs(
+                  Box,
+                  {
+                    sx: (theme) => ({
+                      display: "flex",
+                      alignItems: "center",
+                      gap: isSm ? theme.spacing(0.5) : theme.spacing(1),
+                      // 2px for sm, 4px for md
+                      width: "100%",
+                      minWidth: 0
+                    }),
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        Typography,
+                        {
+                          variant: headingVariant,
+                          sx: (theme) => ({
+                            color: theme.palette.dsTokens?.semantic?.onsurface ?? theme.palette.text.primary ?? "#364152",
+                            overflow: "hidden",
+                            textOverflow: "ellipsis",
+                            whiteSpace: "nowrap"
+                          }),
+                          children: title
+                        }
+                      ),
+                      helpIcon ? /* @__PURE__ */ jsx(
+                        Box,
+                        {
+                          sx: (theme) => ({
+                            display: "flex",
+                            alignItems: "center",
+                            // ui-libv2 help icon tone
+                            color: theme.palette.gray?.[400] ?? "#8C96A2",
+                            flex: "0 0 auto",
+                            "& svg": { display: "block" }
+                          }),
+                          children: helpIcon
+                        }
+                      ) : null
+                    ]
+                  }
+                ),
+                supportingText ? /* @__PURE__ */ jsx(
+                  Typography,
+                  {
+                    variant: supportingVariant,
+                    sx: (theme) => ({
+                      color: (
+                        // ui-libv2: supporting text uses gray.600 (rgb(75,85,101))
+                        theme.palette.gray?.[600] ?? theme.palette.dsTokens?.semantic?.onsurfacevariant ?? theme.palette.text.secondary ?? "#4B5565"
+                      )
+                    }),
+                    children: supportingText
+                  }
+                ) : null
+              ]
+            }
+          ),
+          actions ? /* @__PURE__ */ jsx(
+            Box,
+            {
+              sx: (theme) => ({
+                display: "flex",
+                flexDirection: "row",
+                gap: theme.spacing(2),
+                // 8px gap between action buttons
+                alignItems: "flex-start",
+                width: "100%",
+                minWidth: 0
+              }),
+              children: actions
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+export {
+  SectionLabel
+};
+//# sourceMappingURL=SectionLabel.js.map

package/dist/components/layout/SectionLabel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SectionLabel.js","sources":["../../../src/components/layout/SectionLabel.tsx"],"sourcesContent":["// src/components/zenith/layout/SectionLabel.tsx - SectionLabel\nimport * as React from 'react'\nimport Typography from '@mui/material/Typography'\nimport Box from '@mui/material/Box'\nimport type { SxProps, Theme } from '@mui/material/styles'\n\nexport type SectionLabelSize = 'sm' | 'md'\n\nexport interface SectionLabelProps {\n  /**\n   * The main heading text.\n   */\n  title: React.ReactNode\n  /**\n   * Optional supporting/description text shown below the title.\n   */\n  supportingText?: React.ReactNode\n  /**\n   * Optional help icon shown after the title.\n   */\n  helpIcon?: React.ReactNode\n  /**\n   * Optional action buttons or elements shown below the title/supporting text.\n   */\n  actions?: React.ReactNode\n  /**\n   * Size variant: 'sm' (14px) or 'md' (16px).\n   * @default 'sm'\n   */\n  size?: SectionLabelSize\n  /**\n   * Additional CSS styles.\n   */\n  sx?: SxProps<Theme>\n  /**\n   * Additional CSS class name.\n   */\n  className?: string\n}\n\n/**\n * A section label component that displays a title with optional supporting text,\n * help icon, and action buttons. Supports small and medium size variants.\n */\nexport const SectionLabel = React.forwardRef<HTMLDivElement, SectionLabelProps>(\n  function SectionLabel(props, ref) {\n    const {\n      title,\n      supportingText,\n      helpIcon,\n      actions,\n      size = 'sm',\n      sx,\n      className,\n    } = props\n\n    const isSm = size === 'sm'\n    const headingVariant = isSm ? 'text-sm-semibold' : 'text-md-semibold'\n    const supportingVariant = isSm ? 'text-sm-regular' : 'text-md-regular'\n\n    return (\n      <Box\n        ref={ref}\n        className={className}\n        sx={[\n          {\n            display: 'flex',\n            flexDirection: 'column',\n            width: '100%',\n            minWidth: 0,\n            // ui-libv2: content block + actions are separated by a 12px gap\n            gap: actions ? 3 : 0,\n          },\n          ...(Array.isArray(sx) ? sx : sx ? [sx] : []),\n        ]}\n      >\n        <Box\n          sx={{\n            display: 'flex',\n            flexDirection: 'column',\n            width: '100%',\n            minWidth: 0,\n          }}\n        >\n          {/* Heading and help icon row */}\n          <Box\n            sx={(theme) => ({\n              display: 'flex',\n              alignItems: 'center',\n              gap: isSm ? theme.spacing(0.5) : theme.spacing(1), // 2px for sm, 4px for md\n              width: '100%',\n              minWidth: 0,\n            })}\n          >\n            <Typography\n              variant={headingVariant}\n              sx={(theme) => ({\n                color:\n                  theme.palette.dsTokens?.semantic?.onsurface ??\n                  theme.palette.text.primary ??\n                  '#364152',\n                overflow: 'hidden',\n                textOverflow: 'ellipsis',\n                whiteSpace: 'nowrap',\n              })}\n            >\n              {title}\n            </Typography>\n            {helpIcon ? (\n              <Box\n                sx={(theme) => ({\n                  display: 'flex',\n                  alignItems: 'center',\n                  // ui-libv2 help icon tone\n                  color: theme.palette.gray?.[400] ?? '#8C96A2',\n                  flex: '0 0 auto',\n                  '& svg': { display: 'block' },\n                })}\n              >\n                {helpIcon}\n              </Box>\n            ) : null}\n          </Box>\n\n          {/* Supporting text */}\n          {supportingText ? (\n            <Typography\n              variant={supportingVariant}\n              sx={(theme) => ({\n                color:\n                  // ui-libv2: supporting text uses gray.600 (rgb(75,85,101))\n                  theme.palette.gray?.[600] ??\n                  theme.palette.dsTokens?.semantic?.onsurfacevariant ??\n                  theme.palette.text.secondary ??\n                  '#4B5565',\n              })}\n            >\n              {supportingText}\n            </Typography>\n          ) : null}\n        </Box>\n\n        {/* Actions */}\n        {actions ? (\n          <Box\n            sx={(theme) => ({\n              display: 'flex',\n              flexDirection: 'row',\n              gap: theme.spacing(2), // 8px gap between action buttons\n              alignItems: 'flex-start',\n              width: '100%',\n              minWidth: 0,\n            })}\n          >\n            {actions}\n          </Box>\n        ) : null}\n      </Box>\n    )\n  },\n)\n\nexport default SectionLabel\n\n"],"names":["SectionLabel"],"mappings":";;;;AA4CO,MAAM,eAAe,MAAM;AAAA,EAChC,SAASA,cAAa,OAAO,KAAK;AAChC,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MACA;AAAA,IAAA,IACE;AAEJ,UAAM,OAAO,SAAS;AACtB,UAAM,iBAAiB,OAAO,qBAAqB;AACnD,UAAM,oBAAoB,OAAO,oBAAoB;AAErD,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,IAAI;AAAA,UACF;AAAA,YACE,SAAS;AAAA,YACT,eAAe;AAAA,YACf,OAAO;AAAA,YACP,UAAU;AAAA;AAAA,YAEV,KAAK,UAAU,IAAI;AAAA,UAAA;AAAA,UAErB,GAAI,MAAM,QAAQ,EAAE,IAAI,KAAK,KAAK,CAAC,EAAE,IAAI,CAAA;AAAA,QAAC;AAAA,QAG5C,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAI;AAAA,gBACF,SAAS;AAAA,gBACT,eAAe;AAAA,gBACf,OAAO;AAAA,gBACP,UAAU;AAAA,cAAA;AAAA,cAIZ,UAAA;AAAA,gBAAA;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,IAAI,CAAC,WAAW;AAAA,sBACd,SAAS;AAAA,sBACT,YAAY;AAAA,sBACZ,KAAK,OAAO,MAAM,QAAQ,GAAG,IAAI,MAAM,QAAQ,CAAC;AAAA;AAAA,sBAChD,OAAO;AAAA,sBACP,UAAU;AAAA,oBAAA;AAAA,oBAGZ,UAAA;AAAA,sBAAA;AAAA,wBAAC;AAAA,wBAAA;AAAA,0BACC,SAAS;AAAA,0BACT,IAAI,CAAC,WAAW;AAAA,4BACd,OACE,MAAM,QAAQ,UAAU,UAAU,aAClC,MAAM,QAAQ,KAAK,WACnB;AAAA,4BACF,UAAU;AAAA,4BACV,cAAc;AAAA,4BACd,YAAY;AAAA,0BAAA;AAAA,0BAGb,UAAA;AAAA,wBAAA;AAAA,sBAAA;AAAA,sBAEF,WACC;AAAA,wBAAC;AAAA,wBAAA;AAAA,0BACC,IAAI,CAAC,WAAW;AAAA,4BACd,SAAS;AAAA,4BACT,YAAY;AAAA;AAAA,4BAEZ,OAAO,MAAM,QAAQ,OAAO,GAAG,KAAK;AAAA,4BACpC,MAAM;AAAA,4BACN,SAAS,EAAE,SAAS,QAAA;AAAA,0BAAQ;AAAA,0BAG7B,UAAA;AAAA,wBAAA;AAAA,sBAAA,IAED;AAAA,oBAAA;AAAA,kBAAA;AAAA,gBAAA;AAAA,gBAIL,iBACC;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,SAAS;AAAA,oBACT,IAAI,CAAC,WAAW;AAAA,sBACd;AAAA;AAAA,wBAEE,MAAM,QAAQ,OAAO,GAAG,KACxB,MAAM,QAAQ,UAAU,UAAU,oBAClC,MAAM,QAAQ,KAAK,aACnB;AAAA;AAAA,oBAAA;AAAA,oBAGH,UAAA;AAAA,kBAAA;AAAA,gBAAA,IAED;AAAA,cAAA;AAAA,YAAA;AAAA,UAAA;AAAA,UAIL,UACC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAI,CAAC,WAAW;AAAA,gBACd,SAAS;AAAA,gBACT,eAAe;AAAA,gBACf,KAAK,MAAM,QAAQ,CAAC;AAAA;AAAA,gBACpB,YAAY;AAAA,gBACZ,OAAO;AAAA,gBACP,UAAU;AAAA,cAAA;AAAA,cAGX,UAAA;AAAA,YAAA;AAAA,UAAA,IAED;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;"}

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

@@ -0,0 +1,19 @@
+export { PageHeader } from './PageHeader';
+export type { PageHeaderBreakpoint, PageHeaderProps, PageHeaderStyle, } from './PageHeader';
+export { SectionHeader } from './SectionHeader';
+export type { SectionHeaderProps } from './SectionHeader';
+export { SectionLabel } from './SectionLabel';
+export type { SectionLabelProps, SectionLabelSize } from './SectionLabel';
+export { Footer } from './Footer';
+export { BaseFooterLink } from './BaseFooterLink';
+export type { BaseFooterLinkProps, FooterLinkColor, FooterLinkState } from './BaseFooterLink';
+export { BaseFooterLinkColumn } from './BaseFooterLinkColumn';
+export type { BaseFooterLinkColumnProps, FooterLinkItem } from './BaseFooterLinkColumn';
+export { BrandLogo } from './BrandLogo';
+export type { BrandLogoProps } from './BrandLogo';
+export { BaseNavigationFooterBottom } from './BaseNavigationFooterBottom';
+export type { BaseNavigationFooterBottomProps, FooterAlignment, LegalLinkItem } from './BaseNavigationFooterBottom';
+export type { FooterBreakpoint } from './BaseNavigationFooterBottom';
+export { FooterNavigation } from './FooterNavigation';
+export type { FooterNavigationProps, FooterLinkColumnData, RegionOption } from './FooterNavigation';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/layout/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/layout/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,YAAY,EACV,oBAAoB,EACpB,eAAe,EACf,eAAe,GAChB,MAAM,cAAc,CAAA;AACrB,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AACzD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,YAAY,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AACzE,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AACjD,YAAY,EAAE,mBAAmB,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAA;AAC7F,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAA;AAC7D,YAAY,EAAE,yBAAyB,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AACvF,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAA;AACjD,OAAO,EAAE,0BAA0B,EAAE,MAAM,8BAA8B,CAAA;AACzE,YAAY,EAAE,+BAA+B,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAA;AACnH,YAAY,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAA;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AACrD,YAAY,EAAE,qBAAqB,EAAE,oBAAoB,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAA"}

package/dist/components/navigation/Breadcrumbs.d.ts

@@ -0,0 +1,20 @@
+import { SxProps, Theme } from '@mui/material/styles';
+import * as React from 'react';
+export interface BreadcrumbItem {
+    id: string;
+    label: string;
+    icon?: React.ReactNode;
+    current?: boolean;
+    onClick?: () => void;
+    href?: string;
+}
+export interface BreadcrumbsProps {
+    items: BreadcrumbItem[];
+    leadingCrumbCount?: number;
+    trailingCrumbCount?: number;
+    sx?: SxProps<Theme>;
+    className?: string;
+}
+export declare const Breadcrumbs: React.ForwardRefExoticComponent<BreadcrumbsProps & React.RefAttributes<HTMLElement>>;
+export default Breadcrumbs;
+//# sourceMappingURL=Breadcrumbs.d.ts.map

package/dist/components/navigation/Breadcrumbs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumbs.d.ts","sourceRoot":"","sources":["../../../src/components/navigation/Breadcrumbs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAA;AAI1D,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AAED,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,cAAc,EAAE,CAAA;IACvB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,EAAE,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AA4BD,eAAO,MAAM,WAAW,sFA4IvB,CAAA;AAGD,eAAe,WAAW,CAAA"}

package/dist/components/navigation/Breadcrumbs.js

@@ -0,0 +1,161 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Icon } from "../Icon.js";
+import { DropdownMenu } from "../DropdownMenu.js";
+import useTheme from "../../packages/zenith-ui/node_modules/@mui/material/esm/styles/useTheme.js";
+import Box from "../../packages/zenith-ui/node_modules/@mui/material/esm/Box/Box.js";
+import Typography from "../../packages/zenith-ui/node_modules/@mui/material/esm/Typography/Typography.js";
+import styled from "../../packages/zenith-ui/node_modules/@mui/material/esm/styles/styled.js";
+const CrumbButton = styled("button", {
+  shouldForwardProp: (prop) => prop !== "isCurrent"
+})(({ theme, isCurrent }) => ({
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  padding: "0px",
+  // Storybook: 0px
+  borderRadius: "6px",
+  border: "none",
+  background: "transparent",
+  cursor: isCurrent ? "default" : "pointer",
+  textDecoration: "none",
+  transition: theme.transitions.create("background-color"),
+  "&:hover": {
+    backgroundColor: isCurrent ? "transparent" : theme.palette.gray?.[50] || "#F9FAFB"
+  },
+  "&:focus": {
+    outline: "none"
+  },
+  "&:focus-visible": {
+    outline: `2px solid ${theme.palette.primary.main}`,
+    outlineOffset: "2px"
+  }
+}));
+const Breadcrumbs = React.forwardRef(
+  (props, ref) => {
+    const {
+      items,
+      leadingCrumbCount = 1,
+      trailingCrumbCount = 1,
+      sx,
+      className
+    } = props;
+    const theme = useTheme();
+    const [dropdownOpen, setDropdownOpen] = React.useState(false);
+    const shouldCollapse = items.length > leadingCrumbCount + trailingCrumbCount + 1;
+    let visibleLeading = items;
+    let hiddenItems = [];
+    let visibleTrailing = [];
+    if (shouldCollapse) {
+      visibleLeading = items.slice(0, leadingCrumbCount);
+      hiddenItems = items.slice(leadingCrumbCount, -trailingCrumbCount);
+      visibleTrailing = items.slice(-trailingCrumbCount);
+    }
+    const renderItem = (item, isLast) => {
+      const isCurrent = item.current ?? isLast;
+      const isHome = item.id === "home" || item.label.toLowerCase() === "home";
+      return /* @__PURE__ */ jsx(
+        CrumbButton,
+        {
+          isCurrent,
+          onClick: isCurrent ? void 0 : item.onClick,
+          as: item.href && !isCurrent ? "a" : "button",
+          ...item.href && !isCurrent ? { href: item.href } : {},
+          "aria-current": isCurrent ? "page" : void 0,
+          children: /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+            isHome && /* @__PURE__ */ jsx(
+              Icon,
+              {
+                name: "HomeFive",
+                size: 20,
+                color: theme.palette.gray?.[500] || "#697586"
+              }
+            ),
+            item.icon && !isHome && /* @__PURE__ */ jsx(Box, { sx: { display: "flex" }, children: item.icon }),
+            !isHome && /* @__PURE__ */ jsx(
+              Typography,
+              {
+                variant: "text-sm-semibold",
+                sx: {
+                  // Storybook: link color = rgb(46, 144, 250), current = rgba(0, 0, 0, 0.26)
+                  color: isCurrent ? "rgba(0, 0, 0, 0.26)" : theme.palette.info?.main || "#2E90FA",
+                  whiteSpace: "nowrap",
+                  lineHeight: "20px"
+                  // Storybook: 20px
+                },
+                children: item.label
+              }
+            )
+          ] })
+        },
+        item.id
+      );
+    };
+    const renderSeparator = (key) => /* @__PURE__ */ jsx(
+      Box,
+      {
+        sx: {
+          display: "flex",
+          alignItems: "center",
+          // Storybook: separator color = rgb(105, 117, 134)
+          color: theme.palette.gray?.[500] || "#697586",
+          mx: 0.5
+        },
+        "aria-hidden": "true",
+        children: /* @__PURE__ */ jsx(Icon, { name: "ChevronRight", size: 16 })
+      },
+      key
+    );
+    return /* @__PURE__ */ jsxs(
+      Box,
+      {
+        ref,
+        component: "nav",
+        "aria-label": "Breadcrumb",
+        className,
+        sx: [
+          {
+            display: "flex",
+            flexDirection: "row",
+            alignItems: "center",
+            width: "fit-content"
+          },
+          ...Array.isArray(sx) ? sx : sx ? [sx] : []
+        ],
+        children: [
+          visibleLeading.map((item, index) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+            renderItem(item, !shouldCollapse && index === visibleLeading.length - 1),
+            (shouldCollapse || index < visibleLeading.length - 1) && renderSeparator(`sep-l-${index}`)
+          ] }, item.id)),
+          shouldCollapse && /* @__PURE__ */ jsxs(React.Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              DropdownMenu,
+              {
+                menuItemProps: hiddenItems.map((item) => ({
+                  id: item.id,
+                  content: item.label,
+                  onClick: item.onClick
+                })),
+                open: dropdownOpen,
+                onOpenChange: setDropdownOpen,
+                menuTriggerProps: {
+                  CustomTrigger: ({ onTriggerClick }) => /* @__PURE__ */ jsx(CrumbButton, { isCurrent: false, onClick: onTriggerClick, children: /* @__PURE__ */ jsx(Icon, { name: "DotsHorizontal", size: 16, color: "text.secondary" }) })
+                }
+              }
+            ),
+            renderSeparator("sep-dropdown")
+          ] }, "dropdown-fragment"),
+          visibleTrailing.map((item, index) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+            renderItem(item, index === visibleTrailing.length - 1),
+            index < visibleTrailing.length - 1 && renderSeparator(`sep-t-${index}`)
+          ] }, item.id))
+        ]
+      }
+    );
+  }
+);
+Breadcrumbs.displayName = "Breadcrumbs";
+export {
+  Breadcrumbs
+};
+//# sourceMappingURL=Breadcrumbs.js.map

package/dist/components/navigation/Breadcrumbs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumbs.js","sources":["../../../src/components/navigation/Breadcrumbs.tsx"],"sourcesContent":["import * as React from 'react'\nimport Box from '@mui/material/Box'\nimport Typography from '@mui/material/Typography'\nimport { useTheme, styled } from '@mui/material/styles'\nimport type { SxProps, Theme } from '@mui/material/styles'\nimport { Icon } from '../Icon'\nimport { DropdownMenu } from '../DropdownMenu'\n\nexport interface BreadcrumbItem {\n  id: string\n  label: string\n  icon?: React.ReactNode\n  current?: boolean\n  onClick?: () => void\n  href?: string\n}\n\nexport interface BreadcrumbsProps {\n  items: BreadcrumbItem[]\n  leadingCrumbCount?: number\n  trailingCrumbCount?: number\n  sx?: SxProps<Theme>\n  className?: string\n}\n\n// Storybook: padding=0, borderRadius=6px, no background on hover\nconst CrumbButton = styled('button', {\n  shouldForwardProp: (prop) => prop !== 'isCurrent',\n})<{ isCurrent: boolean }>(({ theme, isCurrent }) => ({\n  display: 'inline-flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  padding: '0px', // Storybook: 0px\n  borderRadius: '6px',\n  border: 'none',\n  background: 'transparent',\n  cursor: isCurrent ? 'default' : 'pointer',\n  textDecoration: 'none',\n  transition: theme.transitions.create('background-color'),\n  '&:hover': {\n    backgroundColor: isCurrent ? 'transparent' : (theme.palette.gray?.[50] || '#F9FAFB'),\n  },\n  '&:focus': {\n    outline: 'none',\n  },\n  '&:focus-visible': {\n    outline: `2px solid ${theme.palette.primary.main}`,\n    outlineOffset: '2px',\n  }\n}))\n\nexport const Breadcrumbs = React.forwardRef<HTMLElement, BreadcrumbsProps>(\n  (props, ref) => {\n    const {\n      items,\n      leadingCrumbCount = 1,\n      trailingCrumbCount = 1,\n      sx,\n      className,\n    } = props\n\n    const theme = useTheme()\n    const [dropdownOpen, setDropdownOpen] = React.useState(false)\n\n    const shouldCollapse = items.length > (leadingCrumbCount + trailingCrumbCount + 1)\n\n    let visibleLeading = items\n    let hiddenItems: BreadcrumbItem[] = []\n    let visibleTrailing: BreadcrumbItem[] = []\n\n    if (shouldCollapse) {\n      visibleLeading = items.slice(0, leadingCrumbCount)\n      hiddenItems = items.slice(leadingCrumbCount, -trailingCrumbCount)\n      visibleTrailing = items.slice(-trailingCrumbCount)\n    }\n\n    const renderItem = (item: BreadcrumbItem, isLast: boolean) => {\n      const isCurrent = item.current ?? isLast\n      const isHome = item.id === 'home' || item.label.toLowerCase() === 'home'\n\n      return (\n        <CrumbButton\n          key={item.id}\n          isCurrent={isCurrent}\n          onClick={isCurrent ? undefined : item.onClick}\n          as={item.href && !isCurrent ? 'a' : 'button'}\n          {...(item.href && !isCurrent ? { href: item.href } : {})}\n          aria-current={isCurrent ? 'page' : undefined}\n        >\n          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>\n            {isHome && (\n              <Icon\n                name=\"HomeFive\"\n                size={20} // Storybook: 20px (not 16px)\n                // Storybook: home icon is always gray rgb(105, 117, 134), not blue\n                color={theme.palette.gray?.[500] || '#697586'}\n              />\n            )}\n            {item.icon && !isHome && <Box sx={{ display: 'flex' }}>{item.icon}</Box>}\n            {!isHome && (\n              <Typography\n                // Storybook: fontWeight=600 for all items\n                variant=\"text-sm-semibold\"\n                sx={{\n                  // Storybook: link color = rgb(46, 144, 250), current = rgba(0, 0, 0, 0.26)\n                  color: isCurrent \n                    ? 'rgba(0, 0, 0, 0.26)' // Storybook: disabled/current item color\n                    : (theme.palette.info?.main || '#2E90FA'),\n                  whiteSpace: 'nowrap',\n                  lineHeight: '20px', // Storybook: 20px\n                }}\n              >\n                {item.label}\n              </Typography>\n            )}\n          </Box>\n        </CrumbButton>\n      )\n    }\n\n    const renderSeparator = (key: string) => (\n      <Box\n        key={key}\n        sx={{\n          display: 'flex',\n          alignItems: 'center',\n          // Storybook: separator color = rgb(105, 117, 134)\n          color: theme.palette.gray?.[500] || '#697586',\n          mx: 0.5,\n        }}\n        aria-hidden=\"true\"\n      >\n        {/* Storybook: separator size = 16px (not 20px) */}\n        <Icon name=\"ChevronRight\" size={16} />\n      </Box>\n    )\n\n    return (\n      <Box\n        ref={ref}\n        component=\"nav\"\n        aria-label=\"Breadcrumb\"\n        className={className}\n        sx={[\n          {\n            display: 'flex',\n            flexDirection: 'row',\n            alignItems: 'center',\n            width: 'fit-content',\n          },\n          ...(Array.isArray(sx) ? sx : sx ? [sx] : []),\n        ]}\n      >\n        {visibleLeading.map((item, index) => (\n          <React.Fragment key={item.id}>\n            {renderItem(item, !shouldCollapse && index === visibleLeading.length - 1)}\n            {(shouldCollapse || index < visibleLeading.length - 1) && renderSeparator(`sep-l-${index}`)}\n          </React.Fragment>\n        ))}\n\n        {shouldCollapse && (\n          <React.Fragment key=\"dropdown-fragment\">\n            <DropdownMenu\n              menuItemProps={hiddenItems.map(item => ({\n                id: item.id,\n                content: item.label,\n                onClick: item.onClick,\n              }))}\n              open={dropdownOpen}\n              onOpenChange={setDropdownOpen}\n              menuTriggerProps={{\n                CustomTrigger: ({ onTriggerClick }) => (\n                  <CrumbButton isCurrent={false} onClick={onTriggerClick}>\n                    <Icon name=\"DotsHorizontal\" size={16} color=\"text.secondary\" />\n                  </CrumbButton>\n                )\n              }}\n            />\n            {renderSeparator('sep-dropdown')}\n          </React.Fragment>\n        )}\n\n        {visibleTrailing.map((item, index) => (\n          <React.Fragment key={item.id}>\n            {renderItem(item, index === visibleTrailing.length - 1)}\n            {index < visibleTrailing.length - 1 && renderSeparator(`sep-t-${index}`)}\n          </React.Fragment>\n        ))}\n      </Box>\n    )\n  }\n)\n\nBreadcrumbs.displayName = 'Breadcrumbs'\nexport default Breadcrumbs\n"],"names":[],"mappings":"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"}

package/dist/components/navigation/HorizontalTabs.d.ts

@@ -0,0 +1,33 @@
+import { TabButtonProps, TabButtonType } from './TabButton';
+import * as React from 'react';
+export interface HorizontalTabItem extends TabButtonProps {
+    key: string;
+}
+export type HorizontalTabsType = TabButtonType;
+export interface HorizontalTabsProps {
+    /** Key value of the currently selected tab. */
+    selectedTabKey: string;
+    /** Callback that fires when TabButton is clicked. */
+    onTabChange: (e: React.SyntheticEvent, newTabKey: string) => void;
+    /** The collection of tabs to be rendered. */
+    tabs: HorizontalTabItem[];
+    /** Controls the size of the tabs. */
+    size?: 'sm' | 'md';
+    /** Type applies different styles to the tabs. */
+    type?: HorizontalTabsType;
+    /** If true, the tabs will expand to fill the width of the container. */
+    fullWidth?: boolean;
+    /** If true, the tabs container will fit its width to the content instead of filling 100% horizontal space. */
+    hugContents?: boolean;
+    /** Adds custom content to the right of the horizontal tabs, inline with the tabs. */
+    children?: React.ReactNode;
+    /** The point at which this component switches to the mobile view. */
+    mobileBreakpoint?: number | true;
+    /** Prop overrides for the Input Dropdown component when the tabs are in mobile view. */
+    mobileDropdownProps?: any;
+    'aria-label'?: string;
+    /** Gap between tabs in pixels. */
+    gap?: number;
+}
+export declare function HorizontalTabs({ selectedTabKey, onTabChange, tabs, size, type, fullWidth, hugContents, children, mobileBreakpoint, mobileDropdownProps: _mdp, 'aria-label': ariaLabel, gap, }: HorizontalTabsProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=HorizontalTabs.d.ts.map

package/dist/components/navigation/HorizontalTabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HorizontalTabs.d.ts","sourceRoot":"","sources":["../../../src/components/navigation/HorizontalTabs.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAO9B,OAAO,EAAa,KAAK,cAAc,EAAE,KAAK,aAAa,EAAE,MAAM,aAAa,CAAA;AAGhF,MAAM,WAAW,iBAAkB,SAAQ,cAAc;IACvD,GAAG,EAAE,MAAM,CAAA;CACZ;AAED,MAAM,MAAM,kBAAkB,GAAG,aAAa,CAAA;AAE9C,MAAM,WAAW,mBAAmB;IAClC,+CAA+C;IAC/C,cAAc,EAAE,MAAM,CAAA;IACtB,qDAAqD;IACrD,WAAW,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,cAAc,EAAE,SAAS,EAAE,MAAM,KAAK,IAAI,CAAA;IACjE,6CAA6C;IAC7C,IAAI,EAAE,iBAAiB,EAAE,CAAA;IACzB,qCAAqC;IACrC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;IAClB,iDAAiD;IACjD,IAAI,CAAC,EAAE,kBAAkB,CAAA;IACzB,wEAAwE;IACxE,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,8GAA8G;IAC9G,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,qFAAqF;IACrF,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,qEAAqE;IACrE,gBAAgB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAChC,wFAAwF;IACxF,mBAAmB,CAAC,EAAE,GAAG,CAAA;IACzB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,kCAAkC;IAClC,GAAG,CAAC,EAAE,MAAM,CAAA;CACb;AAED,wBAAgB,cAAc,CAAC,EAC7B,cAAc,EACd,WAAW,EACX,IAAI,EACJ,IAAW,EACX,IAAkB,EAClB,SAAiB,EACjB,WAAmB,EACnB,QAAQ,EACR,gBAAgB,EAChB,mBAAmB,EAAE,IAAI,EACzB,YAAY,EAAE,SAAS,EACvB,GAAG,GACJ,EAAE,mBAAmB,2CA0LrB"}

package/dist/components/navigation/HorizontalTabs.js

@@ -0,0 +1,162 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "react";
+import useMediaQuery from "../../packages/zenith-ui/node_modules/@mui/material/esm/useMediaQuery/index.js";
+import { TabButton } from "./TabButton.js";
+import { toDomIdToken } from "./tabUtils.js";
+import useTheme from "../../packages/zenith-ui/node_modules/@mui/material/esm/styles/useTheme.js";
+import Box from "../../packages/zenith-ui/node_modules/@mui/material/esm/Box/Box.js";
+import Tabs from "../../packages/zenith-ui/node_modules/@mui/material/esm/Tabs/Tabs.js";
+import Tab from "../../packages/zenith-ui/node_modules/@mui/material/esm/Tab/Tab.js";
+function HorizontalTabs({
+  selectedTabKey,
+  onTabChange,
+  tabs,
+  size = "sm",
+  type = "underline",
+  fullWidth = false,
+  hugContents = false,
+  children,
+  mobileBreakpoint,
+  mobileDropdownProps: _mdp,
+  "aria-label": ariaLabel,
+  gap
+}) {
+  const theme = useTheme();
+  const isUnderline = type === "underline";
+  const isUnderlineFilled = type === "underlineFilled";
+  const isBorderVariant = type === "buttonPrimaryBorder" || type === "buttonWhiteBorder";
+  const isMobileForce = mobileBreakpoint === true;
+  const themeMobileBreakpoint = theme.breakpoints.values.sm;
+  const breakpointValue = typeof mobileBreakpoint === "number" ? mobileBreakpoint : themeMobileBreakpoint;
+  const isMobileQuery = useMediaQuery(theme.breakpoints.down(breakpointValue));
+  const isMobile = isMobileForce || isMobileQuery;
+  const handleChange = (event, newValue) => {
+    onTabChange(event, newValue);
+  };
+  const hoverBg = theme.componentTokens?.actions.hover ?? theme.componentTokens?.stateLayers["state-layers-onsurface-opacity-8"] ?? theme.palette.action.hover;
+  const disabledColor = theme.componentTokens?.stateLayers["state-layers-onsurface-opacity-38"] ?? theme.palette.text.disabled;
+  const focusRing = theme.componentTokens?.focusRings.primary[100] ?? theme.focusRings?.primary?.[100] ?? theme.shadows[4];
+  const surfaceContainer = theme.palette.dsTokens?.semantic.surfacecontainer ?? theme.palette.background.default;
+  const containerBackgroundColor = isBorderVariant ? surfaceContainer : "transparent";
+  const containerPadding = isBorderVariant ? 6 : 0;
+  const borderColor = theme.palette.buttonTokens?.outlineVariant ?? theme.palette.dsTokens?.semantic.outlinevariant ?? theme.palette.divider;
+  const containerBorderStyles = isBorderVariant ? {
+    border: "1px solid",
+    borderColor,
+    borderRadius: "8px"
+  } : void 0;
+  const isUnderlineVariant = isUnderline || isUnderlineFilled;
+  const hasUnderlineLine = isUnderline;
+  const containerAlignItems = isUnderline ? "flex-end" : "center";
+  const focusRingRadius = isUnderlineVariant || type === "lineVertical" ? 0 : "6px";
+  const underlineBorderWidth = 2;
+  const underlineBorderStyles = isUnderline ? {
+    borderBottom: `1px solid ${borderColor}`
+  } : void 0;
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      sx: {
+        width: hugContents ? "fit-content" : "100%",
+        bgcolor: containerBackgroundColor,
+        display: "flex",
+        alignItems: containerAlignItems,
+        padding: containerPadding ? `${containerPadding}px` : void 0,
+        ...containerBorderStyles ?? {},
+        ...underlineBorderStyles ?? {}
+      },
+      children: [
+        /* @__PURE__ */ jsx(Box, { sx: { flex: 1, display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx(
+          Tabs,
+          {
+            value: selectedTabKey,
+            onChange: handleChange,
+            "aria-label": ariaLabel,
+            variant: fullWidth && !hugContents ? "fullWidth" : "standard",
+            TabIndicatorProps: { style: { display: "none" } },
+            sx: {
+              minHeight: "0",
+              overflow: "visible",
+              "& .MuiTabs-flexContainer": {
+                gap: gap ?? (isMobile ? 4 : 2),
+                rowGap: "0px",
+                columnGap: gap ?? (isMobile ? 4 : 2),
+                height: "fit-content",
+                minHeight: 0
+              }
+            },
+            children: tabs.map(({ key: tabKey, ...tabProps }) => {
+              const isCurrent = String(tabKey) === String(selectedTabKey);
+              const token = toDomIdToken(tabKey);
+              return /* @__PURE__ */ jsx(
+                Tab,
+                {
+                  value: tabKey,
+                  disableRipple: true,
+                  disabled: tabProps.disabled,
+                  id: `tab-${token}`,
+                  "aria-controls": `tabpanel-${token}`,
+                  sx: {
+                    textTransform: "none",
+                    minWidth: 0,
+                    minHeight: 0,
+                    padding: 0,
+                    borderRadius: 0,
+                    marginBottom: 0,
+                    "&.Mui-selected": {
+                      ...hasUnderlineLine && {
+                        borderBottomColor: theme.palette.primary.main
+                      }
+                    },
+                    "&.Mui-disabled": {
+                      color: disabledColor,
+                      ...hasUnderlineLine && {
+                        borderBottomColor: "transparent"
+                      }
+                    },
+                    ...hasUnderlineLine ? {
+                      "&:hover:not(.Mui-selected):not(.Mui-disabled)": {
+                        borderBottomColor: theme.palette.primary.main
+                      }
+                    } : isUnderlineFilled ? {
+                      "&:hover:not(.Mui-disabled)": {
+                        backgroundColor: hoverBg
+                      }
+                    } : {},
+                    "&:focus-visible": {
+                      outline: "none",
+                      boxShadow: focusRing,
+                      borderRadius: focusRingRadius,
+                      ...hasUnderlineLine ? { borderBottomColor: theme.palette.primary.main } : {}
+                    },
+                    ...fullWidth && !hugContents && { flex: 1 },
+                    ...hasUnderlineLine && {
+                      borderBottom: `${underlineBorderWidth}px solid transparent`,
+                      position: "relative"
+                    }
+                  },
+                  label: /* @__PURE__ */ jsx(
+                    TabButton,
+                    {
+                      ...tabProps,
+                      size,
+                      type: tabProps.type ?? type,
+                      current: isCurrent,
+                      component: "span"
+                    }
+                  )
+                },
+                tabKey
+              );
+            })
+          }
+        ) }),
+        children && /* @__PURE__ */ jsx(Box, { sx: { ml: 2, display: "flex", alignItems: "center" }, children })
+      ]
+    }
+  );
+}
+export {
+  HorizontalTabs
+};
+//# sourceMappingURL=HorizontalTabs.js.map

package/dist/components/navigation/HorizontalTabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HorizontalTabs.js","sources":["../../../src/components/navigation/HorizontalTabs.tsx"],"sourcesContent":["// src/components/zenith/HorizontalTabs.tsx\nimport * as React from 'react'\nimport Box from '@mui/material/Box'\nimport Tabs from '@mui/material/Tabs'\nimport Tab from '@mui/material/Tab'\nimport { useTheme } from '@mui/material/styles'\nimport useMediaQuery from '@mui/material/useMediaQuery'\n\nimport { TabButton, type TabButtonProps, type TabButtonType } from './TabButton'\nimport { toDomIdToken } from './tabUtils'\n\nexport interface HorizontalTabItem extends TabButtonProps {\n  key: string\n}\n\nexport type HorizontalTabsType = TabButtonType\n\nexport interface HorizontalTabsProps {\n  /** Key value of the currently selected tab. */\n  selectedTabKey: string\n  /** Callback that fires when TabButton is clicked. */\n  onTabChange: (e: React.SyntheticEvent, newTabKey: string) => void\n  /** The collection of tabs to be rendered. */\n  tabs: HorizontalTabItem[]\n  /** Controls the size of the tabs. */\n  size?: 'sm' | 'md'\n  /** Type applies different styles to the tabs. */\n  type?: HorizontalTabsType\n  /** If true, the tabs will expand to fill the width of the container. */\n  fullWidth?: boolean\n  /** If true, the tabs container will fit its width to the content instead of filling 100% horizontal space. */\n  hugContents?: boolean\n  /** Adds custom content to the right of the horizontal tabs, inline with the tabs. */\n  children?: React.ReactNode\n  /** The point at which this component switches to the mobile view. */\n  mobileBreakpoint?: number | true\n  /** Prop overrides for the Input Dropdown component when the tabs are in mobile view. */\n  mobileDropdownProps?: any\n  'aria-label'?: string\n  /** Gap between tabs in pixels. */\n  gap?: number\n}\n\nexport function HorizontalTabs({\n  selectedTabKey,\n  onTabChange,\n  tabs,\n  size = 'sm',\n  type = 'underline',\n  fullWidth = false,\n  hugContents = false,\n  children,\n  mobileBreakpoint,\n  mobileDropdownProps: _mdp,\n  'aria-label': ariaLabel,\n  gap,\n}: HorizontalTabsProps) {\n  const theme = useTheme()\n  const isUnderline = type === 'underline'\n  const isUnderlineFilled = type === 'underlineFilled'\n  const isBorderVariant =\n    type === 'buttonPrimaryBorder' || type === 'buttonWhiteBorder'\n\n  // Mobile detection\n  const isMobileForce = mobileBreakpoint === true\n  const themeMobileBreakpoint = theme.breakpoints.values.sm\n  const breakpointValue =\n    typeof mobileBreakpoint === 'number'\n      ? mobileBreakpoint\n      : themeMobileBreakpoint\n  const isMobileQuery = useMediaQuery(theme.breakpoints.down(breakpointValue))\n\n  // We'll stick to basic media query or forced mobile for now.\n  const isMobile = isMobileForce || isMobileQuery\n\n  const handleChange = (event: React.SyntheticEvent, newValue: string) => {\n    onTabChange(event, newValue)\n  }\n\n  const hoverBg =\n    theme.componentTokens?.actions.hover ??\n    theme.componentTokens?.stateLayers['state-layers-onsurface-opacity-8'] ??\n    theme.palette.action.hover\n\n  const disabledColor =\n    theme.componentTokens?.stateLayers['state-layers-onsurface-opacity-38'] ??\n    theme.palette.text.disabled\n\n  const focusRing =\n    theme.componentTokens?.focusRings.primary[100] ??\n    (theme.focusRings as any)?.primary?.[100] ??\n    theme.shadows[4]\n\n  const surfaceContainer =\n    theme.palette.dsTokens?.semantic.surfacecontainer ??\n    theme.palette.background.default\n\n  const containerBackgroundColor = isBorderVariant\n    ? surfaceContainer\n    : 'transparent'\n\n  const containerPadding = isBorderVariant ? 6 : 0\n  const borderColor =\n    theme.palette.buttonTokens?.outlineVariant ??\n    theme.palette.dsTokens?.semantic.outlinevariant ??\n    theme.palette.divider\n\n  const containerBorderStyles = isBorderVariant\n    ? {\n        border: '1px solid',\n        borderColor,\n        borderRadius: '8px',\n      }\n    : undefined\n\n  const isUnderlineVariant = isUnderline || isUnderlineFilled\n  const hasUnderlineLine = isUnderline\n  const containerAlignItems = isUnderline ? 'flex-end' : 'center'\n  const focusRingRadius =\n    isUnderlineVariant || type === 'lineVertical' ? 0 : '6px'\n  const underlineBorderWidth = 2\n  const underlineBorderStyles = isUnderline\n    ? {\n        borderBottom: `1px solid ${borderColor}`,\n      }\n    : undefined\n\n  // If mobile, we should ideally show a dropdown, but for now we'll just keep the tabs\n  // and maybe add a scrollable container if needed.\n  // The Storybook mentions InputDropdown.\n\n  return (\n    <Box\n      sx={{\n        width: hugContents ? 'fit-content' : '100%',\n        bgcolor: containerBackgroundColor,\n        display: 'flex',\n        alignItems: containerAlignItems,\n        padding: containerPadding ? `${containerPadding}px` : undefined,\n        ...(containerBorderStyles ?? {}),\n        ...(underlineBorderStyles ?? {}),\n      }}\n    >\n      <Box sx={{ flex: 1, display: 'flex', alignItems: 'center' }}>\n        <Tabs\n          value={selectedTabKey}\n          onChange={handleChange}\n          aria-label={ariaLabel}\n          variant={fullWidth && !hugContents ? 'fullWidth' : 'standard'}\n          TabIndicatorProps={{ style: { display: 'none' } }}\n          sx={{\n            minHeight: '0',\n            overflow: 'visible',\n            '& .MuiTabs-flexContainer': {\n              gap: gap ?? (isMobile ? 4 : 2),\n              rowGap: '0px',\n              columnGap: gap ?? (isMobile ? 4 : 2),\n              height: 'fit-content',\n              minHeight: 0,\n            },\n          }}\n        >\n          {tabs.map(({ key: tabKey, ...tabProps }) => {\n            const isCurrent = String(tabKey) === String(selectedTabKey)\n            const token = toDomIdToken(tabKey)\n\n            return (\n              <Tab\n                key={tabKey}\n                value={tabKey}\n                disableRipple\n                disabled={tabProps.disabled}\n                id={`tab-${token}`}\n                aria-controls={`tabpanel-${token}`}\n                sx={{\n                  textTransform: 'none',\n                  minWidth: 0,\n                  minHeight: 0,\n                  padding: 0,\n                  borderRadius: 0,\n                  marginBottom: 0,\n                  '&.Mui-selected': {\n                    ...(hasUnderlineLine && {\n                      borderBottomColor: theme.palette.primary.main,\n                    }),\n                  },\n                  '&.Mui-disabled': {\n                    color: disabledColor,\n                    ...(hasUnderlineLine && {\n                      borderBottomColor: 'transparent',\n                    }),\n                  },\n                  ...(hasUnderlineLine\n                    ? {\n                        '&:hover:not(.Mui-selected):not(.Mui-disabled)': {\n                          borderBottomColor: theme.palette.primary.main,\n                        },\n                      }\n                    : isUnderlineFilled\n                      ? {\n                          '&:hover:not(.Mui-disabled)': {\n                            backgroundColor: hoverBg,\n                          },\n                        }\n                      : {}),\n                  '&:focus-visible': {\n                    outline: 'none',\n                    boxShadow: focusRing,\n                    borderRadius: focusRingRadius,\n                    ...(hasUnderlineLine\n                      ? { borderBottomColor: theme.palette.primary.main }\n                      : {}),\n                  },\n                  ...(fullWidth && !hugContents && { flex: 1 }),\n                  ...(hasUnderlineLine && {\n                    borderBottom: `${underlineBorderWidth}px solid transparent`,\n                    position: 'relative',\n                  }),\n                }}\n                label={\n                  <TabButton\n                    {...tabProps}\n                    size={size}\n                    type={tabProps.type ?? type}\n                    current={isCurrent}\n                    // TabButton defaults to rendering a <button>. Inside MUI <Tab> (also a button),\n                    // we must render a non-interactive root to avoid nested buttons.\n                    component=\"span\"\n                  />\n                }\n              />\n            )\n          })}\n        </Tabs>\n      </Box>\n      {children && (\n        <Box sx={{ ml: 2, display: 'flex', alignItems: 'center' }}>\n          {children}\n        </Box>\n      )}\n    </Box>\n  )\n}\n"],"names":[],"mappings":"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"}