braid-design-system 32.16.0 → 32.16.2

package/dist/styles/lib/components/Tabs/Tabs.cjs

@@ -1,191 +0,0 @@
-"use strict";
-const jsxRuntime = require("react/jsx-runtime");
-const React = require("react");
-const assert = require("assert");
-const styles_lib_components_Accordion_AccordionItem_cjs = require("../Accordion/AccordionItem.cjs");
-const dynamic = require("@vanilla-extract/dynamic");
-const styles_lib_components_Box_Box_cjs = require("../Box/Box.cjs");
-const styles_lib_components_Divider_Divider_cjs = require("../Divider/Divider.cjs");
-const styles_lib_components_Tabs_Tab_cjs = require("./Tab.cjs");
-const styles_lib_components_Accordion_Accordion_cjs = require("../Accordion/Accordion.cjs");
-const styles_lib_css_negativeMargin_negativeMargin_cjs = require("../../css/negativeMargin/negativeMargin.cjs");
-const sideEffects_lib_components_BraidProvider_BraidProvider_cjs = require("../../../../side-effects/lib/components/BraidProvider/BraidProvider.cjs");
-const styles_lib_components_Tabs_Tabs_css_cjs = require("./Tabs.css.cjs");
-const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
-const assert__default = /* @__PURE__ */ _interopDefaultCompat(assert);
-const useIsomorphicLayoutEffect = typeof document !== "undefined" ? React.useLayoutEffect : React.useEffect;
-const tabLinePositionDefault = { left: 0, width: 0 };
-const getActiveTabLinePosition = (button) => {
-  if (!button) {
-    return tabLinePositionDefault;
-  }
-  const computedStyle = getComputedStyle(button);
-  const elWidth = button.getBoundingClientRect().width;
-  const paddingLeft = parseFloat(computedStyle.paddingLeft);
-  const paddingRight = parseFloat(computedStyle.paddingRight);
-  const width = elWidth - paddingLeft - paddingRight;
-  return { left: button.offsetLeft + paddingLeft, width };
-};
-const Tabs = (props) => {
-  const tabsContext = React.useContext(styles_lib_components_Tabs_Tab_cjs.TabsContext);
-  const tabsRef = React.useRef(null);
-  const [activeTabPosition, setActiveTabPosition] = React.useState(
-    tabLinePositionDefault
-  );
-  const {
-    children,
-    label,
-    data,
-    align = "left",
-    gutter,
-    reserveHitArea = false,
-    divider = "minimal",
-    ...restProps
-  } = props;
-  assert__default.default(
-    tabsContext !== null,
-    "Tabs must be rendered as a child of TabsProvider. See the documentation for correct usage: https://seek-oss.github.io/braid-design-system/components/Tabs"
-  );
-  if (!tabsContext) {
-    throw new Error("Tabs rendered outside TabsProvider");
-  }
-  const { dispatch, a11y, selectedIndex, selectedItem } = tabsContext;
-  const tabItems = [];
-  const childTabs = styles_lib_components_Accordion_AccordionItem_cjs.flattenChildren(children);
-  const tabs = childTabs.map((tab, index) => {
-    assert__default.default(
-      // @ts-expect-error
-      typeof tab === "object" && tab.type.__isTab__,
-      "Only Tab elements can be direct children of a Tabs"
-    );
-    tabItems.push(tab.props.item ?? index);
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      styles_lib_components_Tabs_Tab_cjs.TabListContext.Provider,
-      {
-        value: {
-          tabListItemIndex: index,
-          scrollContainer: tabsRef.current,
-          isLast: childTabs.length === index + 1
-        },
-        children: tab
-      },
-      index
-    );
-  });
-  React.useEffect(() => {
-    dispatch({ type: styles_lib_components_Tabs_Tab_cjs.TAB_LIST_UPDATED, tabItems });
-  }, [tabItems.join(), dispatch]);
-  const {
-    space: { grid, space }
-  } = sideEffects_lib_components_BraidProvider_BraidProvider_cjs.useBraidTheme();
-  const [showMask, setShowMask] = React.useState(true);
-  const updateMask = React.useCallback(() => {
-    if (!tabsRef.current) {
-      return;
-    }
-    setShowMask(
-      tabsRef.current.scrollWidth - tabsRef.current.offsetWidth - tabsRef.current.scrollLeft > grid * space.small
-    );
-  }, [tabsRef, setShowMask, grid, space]);
-  useIsomorphicLayoutEffect(() => {
-    updateMask();
-    window.addEventListener("resize", updateMask);
-    return () => window.removeEventListener("resize", updateMask);
-  }, [updateMask]);
-  const selectedTabIndex = typeof selectedItem !== "undefined" ? tabItems.indexOf(selectedItem) : selectedIndex;
-  const selectedTabButtonEl = tabsContext.tabButtonElements[selectedTabIndex.toString()];
-  useIsomorphicLayoutEffect(() => {
-    setActiveTabPosition(getActiveTabLinePosition(selectedTabButtonEl));
-  }, [selectedTabButtonEl]);
-  return /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Box_Box_cjs.Box, { children: /* @__PURE__ */ jsxRuntime.jsx(
-    styles_lib_components_Box_Box_cjs.Box,
-    {
-      className: reserveHitArea ? void 0 : styles_lib_css_negativeMargin_negativeMargin_cjs.negativeMargin("top", "medium"),
-      children: /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Box_Box_cjs.Box, { position: "relative", children: /* @__PURE__ */ jsxRuntime.jsxs(
-        styles_lib_components_Box_Box_cjs.Box,
-        {
-          ref: tabsRef,
-          className: [
-            styles_lib_components_Tabs_Tabs_css_cjs.scroll,
-            styles_lib_components_Tabs_Tabs_css_cjs.nowrap,
-            showMask ? styles_lib_components_Tabs_Tabs_css_cjs.mask : null
-          ],
-          display: "flex",
-          onScroll: updateMask,
-          flexWrap: "nowrap",
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              styles_lib_components_Box_Box_cjs.Box,
-              {
-                display: "flex",
-                className: align === "center" ? styles_lib_components_Tabs_Tabs_css_cjs.marginAuto : void 0,
-                paddingX: gutter,
-                flexWrap: "nowrap",
-                position: "relative",
-                zIndex: 1,
-                children: /* @__PURE__ */ jsxRuntime.jsxs(
-                  styles_lib_components_Box_Box_cjs.Box,
-                  {
-                    ...a11y.tabListProps({ label }),
-                    display: "flex",
-                    ...styles_lib_components_Accordion_Accordion_cjs.buildDataAttributes({ data, validateRestProps: restProps }),
-                    flexWrap: "nowrap",
-                    position: "relative",
-                    children: [
-                      tabs,
-                      divider === "minimal" ? /* @__PURE__ */ jsxRuntime.jsx(
-                        styles_lib_components_Box_Box_cjs.Box,
-                        {
-                          position: "absolute",
-                          bottom: 0,
-                          left: 0,
-                          right: 0,
-                          className: styles_lib_components_Tabs_Tabs_css_cjs.divider,
-                          children: /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Divider_Divider_cjs.Divider, {})
-                        }
-                      ) : null,
-                      selectedTabButtonEl ? /* @__PURE__ */ jsxRuntime.jsx(
-                        styles_lib_components_Box_Box_cjs.Box,
-                        {
-                          component: "span",
-                          position: "absolute",
-                          display: "block",
-                          left: 0,
-                          right: 0,
-                          bottom: 0,
-                          background: "formAccent",
-                          pointerEvents: "none",
-                          className: [
-                            styles_lib_components_Tabs_Tabs_css_cjs.tabUnderline,
-                            styles_lib_components_Tabs_Tabs_css_cjs.tabUnderlineActiveDarkMode
-                          ],
-                          style: dynamic.assignInlineVars({
-                            [styles_lib_components_Tabs_Tabs_css_cjs.underlineLeft]: activeTabPosition.left.toString(),
-                            [styles_lib_components_Tabs_Tabs_css_cjs.underlineWidth]: activeTabPosition.width.toString()
-                          })
-                        }
-                      ) : null
-                    ]
-                  }
-                )
-              }
-            ),
-            divider === "full" ? /* @__PURE__ */ jsxRuntime.jsx(
-              styles_lib_components_Box_Box_cjs.Box,
-              {
-                position: "absolute",
-                bottom: 0,
-                left: 0,
-                right: 0,
-                className: styles_lib_components_Tabs_Tabs_css_cjs.divider,
-                children: /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Divider_Divider_cjs.Divider, {})
-              }
-            ) : null
-          ]
-        }
-      ) })
-    }
-  ) });
-};
-exports.Tabs = Tabs;
-exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect;

package/dist/styles/lib/components/Tabs/Tabs.css.cjs

@@ -1,97 +0,0 @@
-"use strict";
-const __vanilla_filescope__ = require("@vanilla-extract/css/fileScope");
-const css = require("@vanilla-extract/css");
-const cssUtils = require("@vanilla-extract/css-utils");
-const styles_lib_css_colorModeStyle_cjs = require("../../css/colorModeStyle.cjs");
-const styles_lib_themes_vars_css_cjs = require("../../themes/vars.css.cjs");
-__vanilla_filescope__.setFileScope("src/lib/components/Tabs/Tabs.css.ts", "braid-design-system");
-const tab = css.style({
-  selectors: {
-    "&::-moz-focus-inner": {
-      border: 0
-    }
-  }
-}, "tab");
-const cropToIconX = css.style({
-  marginLeft: -2
-}, "cropToIconX");
-const hoveredTab = css.style({
-  selectors: {
-    [`${tab}:hover &`]: {
-      opacity: 1
-    }
-  }
-}, "hoveredTab");
-const nowrap = css.style({
-  whiteSpace: "nowrap"
-}, "nowrap");
-const scroll = css.style({
-  WebkitOverflowScrolling: "touch",
-  overflowX: "auto",
-  overflowY: "hidden",
-  scrollbarWidth: "none",
-  msOverflowStyle: "none",
-  selectors: {
-    "&::-webkit-scrollbar": {
-      width: 0,
-      height: 0
-    }
-  }
-}, "scroll");
-const mask = css.style({
-  maskImage: "linear-gradient(90deg, rgba(0,0,0,1) 0, rgba(0,0,0,1) calc(100% - 80px), rgba(0,0,0,0) 100%)"
-}, "mask");
-const marginAuto = css.style({
-  marginLeft: "auto",
-  marginRight: "auto"
-}, "marginAuto");
-const tabFocusRing = css.style({
-  margin: styles_lib_themes_vars_css_cjs.vars.borderWidth.large,
-  selectors: {
-    [`${tab}:focus &`]: {
-      opacity: 1
-    }
-  }
-}, "tabFocusRing");
-const underlineLeft = css.createVar("underlineLeft");
-const underlineWidth = css.createVar("underlineWidth");
-const initialUnderlineWidth = 10;
-const tabUnderline = css.style({
-  height: styles_lib_themes_vars_css_cjs.vars.borderWidth.large,
-  width: initialUnderlineWidth,
-  transformOrigin: "0 0",
-  transition: "transform .3s ease",
-  transform: `translateZ(0) translateX(${cssUtils.calc(underlineLeft).multiply("1px")}) scaleX(${cssUtils.calc(underlineWidth).divide(initialUnderlineWidth)})`
-}, "tabUnderline");
-const tabUnderlineActiveDarkMode = css.style(styles_lib_css_colorModeStyle_cjs.colorModeStyle({
-  darkMode: {
-    background: styles_lib_themes_vars_css_cjs.vars.borderColor.formAccentLight
-  }
-}), "tabUnderlineActiveDarkMode");
-const tabPanel = css.style({}, "tabPanel");
-const tabPanelFocusRing = css.style({
-  selectors: {
-    [`${tabPanel}:focus > &`]: {
-      opacity: 1
-    }
-  }
-}, "tabPanelFocusRing");
-const divider = css.style({
-  height: styles_lib_themes_vars_css_cjs.vars.borderWidth.standard
-}, "divider");
-__vanilla_filescope__.endFileScope();
-exports.cropToIconX = cropToIconX;
-exports.divider = divider;
-exports.hoveredTab = hoveredTab;
-exports.marginAuto = marginAuto;
-exports.mask = mask;
-exports.nowrap = nowrap;
-exports.scroll = scroll;
-exports.tab = tab;
-exports.tabFocusRing = tabFocusRing;
-exports.tabPanel = tabPanel;
-exports.tabPanelFocusRing = tabPanelFocusRing;
-exports.tabUnderline = tabUnderline;
-exports.tabUnderlineActiveDarkMode = tabUnderlineActiveDarkMode;
-exports.underlineLeft = underlineLeft;
-exports.underlineWidth = underlineWidth;

package/dist/styles/lib/components/Tabs/Tabs.css.mjs

@@ -1,98 +0,0 @@
-import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import { style, createVar } from "@vanilla-extract/css";
-import { calc } from "@vanilla-extract/css-utils";
-import { colorModeStyle } from "../../css/colorModeStyle.mjs";
-import { vars } from "../../themes/vars.css.mjs";
-setFileScope("src/lib/components/Tabs/Tabs.css.ts", "braid-design-system");
-const tab = style({
-  selectors: {
-    "&::-moz-focus-inner": {
-      border: 0
-    }
-  }
-}, "tab");
-const cropToIconX = style({
-  marginLeft: -2
-}, "cropToIconX");
-const hoveredTab = style({
-  selectors: {
-    [`${tab}:hover &`]: {
-      opacity: 1
-    }
-  }
-}, "hoveredTab");
-const nowrap = style({
-  whiteSpace: "nowrap"
-}, "nowrap");
-const scroll = style({
-  WebkitOverflowScrolling: "touch",
-  overflowX: "auto",
-  overflowY: "hidden",
-  scrollbarWidth: "none",
-  msOverflowStyle: "none",
-  selectors: {
-    "&::-webkit-scrollbar": {
-      width: 0,
-      height: 0
-    }
-  }
-}, "scroll");
-const mask = style({
-  maskImage: "linear-gradient(90deg, rgba(0,0,0,1) 0, rgba(0,0,0,1) calc(100% - 80px), rgba(0,0,0,0) 100%)"
-}, "mask");
-const marginAuto = style({
-  marginLeft: "auto",
-  marginRight: "auto"
-}, "marginAuto");
-const tabFocusRing = style({
-  margin: vars.borderWidth.large,
-  selectors: {
-    [`${tab}:focus &`]: {
-      opacity: 1
-    }
-  }
-}, "tabFocusRing");
-const underlineLeft = createVar("underlineLeft");
-const underlineWidth = createVar("underlineWidth");
-const initialUnderlineWidth = 10;
-const tabUnderline = style({
-  height: vars.borderWidth.large,
-  width: initialUnderlineWidth,
-  transformOrigin: "0 0",
-  transition: "transform .3s ease",
-  transform: `translateZ(0) translateX(${calc(underlineLeft).multiply("1px")}) scaleX(${calc(underlineWidth).divide(initialUnderlineWidth)})`
-}, "tabUnderline");
-const tabUnderlineActiveDarkMode = style(colorModeStyle({
-  darkMode: {
-    background: vars.borderColor.formAccentLight
-  }
-}), "tabUnderlineActiveDarkMode");
-const tabPanel = style({}, "tabPanel");
-const tabPanelFocusRing = style({
-  selectors: {
-    [`${tabPanel}:focus > &`]: {
-      opacity: 1
-    }
-  }
-}, "tabPanelFocusRing");
-const divider = style({
-  height: vars.borderWidth.standard
-}, "divider");
-endFileScope();
-export {
-  cropToIconX,
-  divider,
-  hoveredTab,
-  marginAuto,
-  mask,
-  nowrap,
-  scroll,
-  tab,
-  tabFocusRing,
-  tabPanel,
-  tabPanelFocusRing,
-  tabUnderline,
-  tabUnderlineActiveDarkMode,
-  underlineLeft,
-  underlineWidth
-};

package/dist/styles/lib/components/Tabs/Tabs.mjs

@@ -1,190 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useLayoutEffect, useEffect, useContext, useRef, useState, useCallback } from "react";
-import assert from "assert";
-import { flattenChildren } from "../Accordion/AccordionItem.mjs";
-import { assignInlineVars } from "@vanilla-extract/dynamic";
-import { Box } from "../Box/Box.mjs";
-import { Divider } from "../Divider/Divider.mjs";
-import { TabsContext, TabListContext, TAB_LIST_UPDATED } from "./Tab.mjs";
-import { buildDataAttributes } from "../Accordion/Accordion.mjs";
-import { negativeMargin } from "../../css/negativeMargin/negativeMargin.mjs";
-import { useBraidTheme } from "../../../../side-effects/lib/components/BraidProvider/BraidProvider.mjs";
-import { scroll, nowrap, mask, marginAuto, divider, tabUnderline, tabUnderlineActiveDarkMode, underlineLeft, underlineWidth } from "./Tabs.css.mjs";
-const useIsomorphicLayoutEffect = typeof document !== "undefined" ? useLayoutEffect : useEffect;
-const tabLinePositionDefault = { left: 0, width: 0 };
-const getActiveTabLinePosition = (button) => {
-  if (!button) {
-    return tabLinePositionDefault;
-  }
-  const computedStyle = getComputedStyle(button);
-  const elWidth = button.getBoundingClientRect().width;
-  const paddingLeft = parseFloat(computedStyle.paddingLeft);
-  const paddingRight = parseFloat(computedStyle.paddingRight);
-  const width = elWidth - paddingLeft - paddingRight;
-  return { left: button.offsetLeft + paddingLeft, width };
-};
-const Tabs = (props) => {
-  const tabsContext = useContext(TabsContext);
-  const tabsRef = useRef(null);
-  const [activeTabPosition, setActiveTabPosition] = useState(
-    tabLinePositionDefault
-  );
-  const {
-    children,
-    label,
-    data,
-    align = "left",
-    gutter,
-    reserveHitArea = false,
-    divider: divider$1 = "minimal",
-    ...restProps
-  } = props;
-  assert(
-    tabsContext !== null,
-    "Tabs must be rendered as a child of TabsProvider. See the documentation for correct usage: https://seek-oss.github.io/braid-design-system/components/Tabs"
-  );
-  if (!tabsContext) {
-    throw new Error("Tabs rendered outside TabsProvider");
-  }
-  const { dispatch, a11y, selectedIndex, selectedItem } = tabsContext;
-  const tabItems = [];
-  const childTabs = flattenChildren(children);
-  const tabs = childTabs.map((tab, index) => {
-    assert(
-      // @ts-expect-error
-      typeof tab === "object" && tab.type.__isTab__,
-      "Only Tab elements can be direct children of a Tabs"
-    );
-    tabItems.push(tab.props.item ?? index);
-    return /* @__PURE__ */ jsx(
-      TabListContext.Provider,
-      {
-        value: {
-          tabListItemIndex: index,
-          scrollContainer: tabsRef.current,
-          isLast: childTabs.length === index + 1
-        },
-        children: tab
-      },
-      index
-    );
-  });
-  useEffect(() => {
-    dispatch({ type: TAB_LIST_UPDATED, tabItems });
-  }, [tabItems.join(), dispatch]);
-  const {
-    space: { grid, space }
-  } = useBraidTheme();
-  const [showMask, setShowMask] = useState(true);
-  const updateMask = useCallback(() => {
-    if (!tabsRef.current) {
-      return;
-    }
-    setShowMask(
-      tabsRef.current.scrollWidth - tabsRef.current.offsetWidth - tabsRef.current.scrollLeft > grid * space.small
-    );
-  }, [tabsRef, setShowMask, grid, space]);
-  useIsomorphicLayoutEffect(() => {
-    updateMask();
-    window.addEventListener("resize", updateMask);
-    return () => window.removeEventListener("resize", updateMask);
-  }, [updateMask]);
-  const selectedTabIndex = typeof selectedItem !== "undefined" ? tabItems.indexOf(selectedItem) : selectedIndex;
-  const selectedTabButtonEl = tabsContext.tabButtonElements[selectedTabIndex.toString()];
-  useIsomorphicLayoutEffect(() => {
-    setActiveTabPosition(getActiveTabLinePosition(selectedTabButtonEl));
-  }, [selectedTabButtonEl]);
-  return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
-    Box,
-    {
-      className: reserveHitArea ? void 0 : negativeMargin("top", "medium"),
-      children: /* @__PURE__ */ jsx(Box, { position: "relative", children: /* @__PURE__ */ jsxs(
-        Box,
-        {
-          ref: tabsRef,
-          className: [
-            scroll,
-            nowrap,
-            showMask ? mask : null
-          ],
-          display: "flex",
-          onScroll: updateMask,
-          flexWrap: "nowrap",
-          children: [
-            /* @__PURE__ */ jsx(
-              Box,
-              {
-                display: "flex",
-                className: align === "center" ? marginAuto : void 0,
-                paddingX: gutter,
-                flexWrap: "nowrap",
-                position: "relative",
-                zIndex: 1,
-                children: /* @__PURE__ */ jsxs(
-                  Box,
-                  {
-                    ...a11y.tabListProps({ label }),
-                    display: "flex",
-                    ...buildDataAttributes({ data, validateRestProps: restProps }),
-                    flexWrap: "nowrap",
-                    position: "relative",
-                    children: [
-                      tabs,
-                      divider$1 === "minimal" ? /* @__PURE__ */ jsx(
-                        Box,
-                        {
-                          position: "absolute",
-                          bottom: 0,
-                          left: 0,
-                          right: 0,
-                          className: divider,
-                          children: /* @__PURE__ */ jsx(Divider, {})
-                        }
-                      ) : null,
-                      selectedTabButtonEl ? /* @__PURE__ */ jsx(
-                        Box,
-                        {
-                          component: "span",
-                          position: "absolute",
-                          display: "block",
-                          left: 0,
-                          right: 0,
-                          bottom: 0,
-                          background: "formAccent",
-                          pointerEvents: "none",
-                          className: [
-                            tabUnderline,
-                            tabUnderlineActiveDarkMode
-                          ],
-                          style: assignInlineVars({
-                            [underlineLeft]: activeTabPosition.left.toString(),
-                            [underlineWidth]: activeTabPosition.width.toString()
-                          })
-                        }
-                      ) : null
-                    ]
-                  }
-                )
-              }
-            ),
-            divider$1 === "full" ? /* @__PURE__ */ jsx(
-              Box,
-              {
-                position: "absolute",
-                bottom: 0,
-                left: 0,
-                right: 0,
-                className: divider,
-                children: /* @__PURE__ */ jsx(Divider, {})
-              }
-            ) : null
-          ]
-        }
-      ) })
-    }
-  ) });
-};
-export {
-  Tabs,
-  useIsomorphicLayoutEffect
-};

package/dist/styles/lib/components/Tag/Tag.cjs

@@ -1,65 +0,0 @@
-"use strict";
-const jsxRuntime = require("react/jsx-runtime");
-const assert = require("assert");
-const styles_lib_components_Box_Box_cjs = require("../Box/Box.cjs");
-const styles_lib_components_Accordion_AccordionItem_cjs = require("../Accordion/AccordionItem.cjs");
-const styles_lib_components_ButtonIcon_ButtonIcon_cjs = require("../ButtonIcon/ButtonIcon.cjs");
-const styles_lib_components_Accordion_Accordion_cjs = require("../Accordion/Accordion.cjs");
-const styles_lib_components_Tag_Tag_css_cjs = require("./Tag.css.cjs");
-const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
-const assert__default = /* @__PURE__ */ _interopDefaultCompat(assert);
-const Tag = ({
-  onClear,
-  clearLabel = "Clear",
-  data,
-  id,
-  icon,
-  children,
-  ...restProps
-}) => {
-  assert__default.default(
-    typeof children === "undefined" || typeof children === "string",
-    "Tag may only contain a string"
-  );
-  assert__default.default(
-    !icon || icon.props.size === void 0 || icon.props.tone === void 0,
-    "Icons cannot set the 'size' or 'tone' prop when passed to a Tag component"
-  );
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    styles_lib_components_Box_Box_cjs.Box,
-    {
-      id,
-      display: "flex",
-      ...styles_lib_components_Accordion_Accordion_cjs.buildDataAttributes({ data, validateRestProps: restProps }),
-      children: /* @__PURE__ */ jsxRuntime.jsxs(
-        styles_lib_components_Box_Box_cjs.Box,
-        {
-          display: "flex",
-          minWidth: 0,
-          alignItems: "center",
-          background: "neutralLight",
-          paddingY: onClear ? void 0 : "xxsmall",
-          paddingLeft: icon ? "xsmall" : "small",
-          paddingRight: onClear ? void 0 : "small",
-          borderRadius: "full",
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Box_Box_cjs.Box, { minWidth: 0, title: children, children: /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Accordion_AccordionItem_cjs.Text, { baseline: false, maxLines: 1, icon, children }) }),
-            onClear ? /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Box_Box_cjs.Box, { flexShrink: 0, display: "flex", className: styles_lib_components_Tag_Tag_css_cjs.clearGutter, children: /* @__PURE__ */ jsxRuntime.jsx(
-              styles_lib_components_ButtonIcon_ButtonIcon_cjs.ButtonIcon,
-              {
-                id: id ? `${id}-clear` : void 0,
-                icon: /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Accordion_AccordionItem_cjs.IconClear, {}),
-                label: clearLabel,
-                tone: "secondary",
-                variant: "transparent",
-                bleed: false,
-                onClick: onClear
-              }
-            ) }) : null
-          ]
-        }
-      )
-    }
-  );
-};
-exports.Tag = Tag;