@persona/design-system 0.1.5-pre.4

package/dist/Sticker-S6QWjlEJ.d.cts

@@ -0,0 +1,68 @@
+import { i as Variant } from "./theme-Cadb1xzQ.cjs";
+import { i as StackProps } from "./Stack-toDRLy--.cjs";
+import { r as TruncatedTextProps } from "./TruncatedText-D8f3AiBL.cjs";
+import * as _$react from "react";
+import { ComponentPropsWithoutRef, MouseEventHandler, ReactNode } from "react";
+import * as _$styled_components0 from "styled-components";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime.js";
+
+//#region components/Sticker/Sticker.d.ts
+declare const STICKER_COLOR_CONFIG: {
+  readonly white: "White";
+  readonly blue: "Blue";
+  readonly teal: "Teal";
+  readonly green: "Green";
+  readonly yellow: "Yellow";
+  readonly orange: "Orange";
+  readonly pink: "Pink";
+  readonly red: "Red";
+  readonly purple: "Purple";
+  readonly darkGrey: "Dark Grey";
+  readonly grey: "Grey";
+};
+type LabelBackgrounds = keyof typeof STICKER_COLOR_CONFIG;
+interface StickerProps extends ComponentPropsWithoutRef<'div'> {
+  variant?: LabelBackgrounds | Exclude<Variant, 'inverse'>;
+  /**
+   * Icon to render to the left of the Sticker. 12px icons recommended.
+   */
+  icon?: ReactNode;
+  /**
+   * Callback to call upon clicking "x" button. Non-null will render the button.
+   */
+  onDismiss?: MouseEventHandler;
+  /**
+   * Additional props to pass to the dismiss "x" button.
+   */
+  dismissButtonProps?: ComponentPropsWithoutRef<'button'>;
+  /**
+   * Renders disabled style for the entire Sticker and disables "x" button.
+   */
+  disabled?: boolean;
+  /**
+   * Shows a required asterisk (*) that won't be cut off when text is truncated.
+   */
+  isRequired?: boolean;
+  /**
+   * In some cases we render a sticker/badge on a secondary background, which needs an adjustment
+   * for certain variants.
+   */
+  onSecondaryBackground?: boolean;
+}
+declare const StickerContainer: _$styled_components0.StyledComponent<"div", any, StackProps, never>;
+declare const StickerContentContainer: _$styled_components0.StyledComponent<"div", any, StackProps & _$styled_components0.ThemeProps<_$styled_components0.DefaultTheme>, never>;
+declare const StyledTruncatedText: _$styled_components0.StyledComponent<_$react.FC<TruncatedTextProps>, any, _$styled_components0.ThemeProps<_$styled_components0.DefaultTheme>, never>;
+declare const Sticker: ({
+  variant,
+  icon,
+  children,
+  onDismiss,
+  disabled,
+  dismissButtonProps,
+  isRequired,
+  onSecondaryBackground,
+  ...props
+}: StickerProps) => _$react_jsx_runtime0.JSX.Element | null;
+//#endregion
+export { StickerContentContainer as a, StickerContainer as i, STICKER_COLOR_CONFIG as n, StickerProps as o, Sticker as r, StyledTruncatedText as s, LabelBackgrounds as t };
+//# sourceMappingURL=Sticker-S6QWjlEJ.d.cts.map

package/dist/Sticker.d.cts

@@ -0,0 +1,2 @@
+import { a as StickerContentContainer, i as StickerContainer, n as STICKER_COLOR_CONFIG, o as StickerProps, r as Sticker, s as StyledTruncatedText, t as LabelBackgrounds } from "./Sticker-S6QWjlEJ.cjs";
+export { LabelBackgrounds, STICKER_COLOR_CONFIG, Sticker, Sticker as default, StickerContainer, StickerContentContainer, StickerProps, StyledTruncatedText };

package/dist/Sticker.d.mts

@@ -0,0 +1,2 @@
+import { a as StickerContentContainer, i as StickerContainer, n as STICKER_COLOR_CONFIG, o as StickerProps, r as Sticker, s as StyledTruncatedText, t as LabelBackgrounds } from "./Sticker-Bd7KkekO.mjs";
+export { LabelBackgrounds, STICKER_COLOR_CONFIG, Sticker, Sticker as default, StickerContainer, StickerContentContainer, StickerProps, StyledTruncatedText };

package/dist/SwatchPicker.d.cts

@@ -0,0 +1,18 @@
+import { ComponentPropsWithoutRef } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime.js";
+
+//#region components/SwatchPicker/SwatchPicker.d.ts
+interface SwatchPickerProps extends Omit<ComponentPropsWithoutRef<'div'>, 'onChange'> {
+  value: string;
+  onChange: (color: string) => void;
+  colors: string[];
+}
+declare const SwatchPicker: ({
+  value,
+  onChange,
+  colors,
+  ...restProps
+}: SwatchPickerProps) => _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { SwatchPicker, SwatchPicker as default, SwatchPickerProps };
+//# sourceMappingURL=SwatchPicker.d.cts.map

package/dist/SwatchPicker.d.mts

@@ -0,0 +1,18 @@
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { ComponentPropsWithoutRef } from "react";
+
+//#region components/SwatchPicker/SwatchPicker.d.ts
+interface SwatchPickerProps extends Omit<ComponentPropsWithoutRef<'div'>, 'onChange'> {
+  value: string;
+  onChange: (color: string) => void;
+  colors: string[];
+}
+declare const SwatchPicker: ({
+  value,
+  onChange,
+  colors,
+  ...restProps
+}: SwatchPickerProps) => _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { SwatchPicker, SwatchPicker as default, SwatchPickerProps };
+//# sourceMappingURL=SwatchPicker.d.mts.map

package/dist/Tab.d.cts

@@ -0,0 +1,26 @@
+import { r as ButtonProps, t as Button } from "./Button-C_3p5Xfi.cjs";
+import * as _$react from "react";
+import { ComponentPropsWithoutRef, ElementType, ReactElement } from "react";
+import * as _$styled_components0 from "styled-components";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime.js";
+
+//#region components/TabBar/Tab.d.ts
+interface TabProps<T extends ElementType = 'button'> extends ComponentPropsWithoutRef<typeof Button> {
+  selected?: boolean;
+  badge?: ReactElement;
+  as?: T;
+  size?: 'md' | 'sm';
+}
+declare const StyledTab: _$styled_components0.StyledComponent<_$react.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & _$react.RefAttributes<HTMLButtonElement>>, any, TabProps<"button">, never>;
+declare const Tab: <T extends ElementType = "button">({
+  selected,
+  disabled,
+  children,
+  badge,
+  as,
+  size,
+  ...elemProps
+}: TabProps<T> & ComponentPropsWithoutRef<T>) => _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { StyledTab, Tab as default };
+//# sourceMappingURL=Tab.d.cts.map

package/dist/Tab.d.mts

@@ -0,0 +1,26 @@
+import { r as ButtonProps, t as Button } from "./Button-DqDLGURJ.mjs";
+import * as _$styled_components0 from "styled-components";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import * as _$react from "react";
+import { ComponentPropsWithoutRef, ElementType, ReactElement } from "react";
+
+//#region components/TabBar/Tab.d.ts
+interface TabProps<T extends ElementType = 'button'> extends ComponentPropsWithoutRef<typeof Button> {
+  selected?: boolean;
+  badge?: ReactElement;
+  as?: T;
+  size?: 'md' | 'sm';
+}
+declare const StyledTab: _$styled_components0.StyledComponent<_$react.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & _$react.RefAttributes<HTMLButtonElement>>, any, TabProps<"button">, never>;
+declare const Tab: <T extends ElementType = "button">({
+  selected,
+  disabled,
+  children,
+  badge,
+  as,
+  size,
+  ...elemProps
+}: TabProps<T> & ComponentPropsWithoutRef<T>) => _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { StyledTab, Tab as default };
+//# sourceMappingURL=Tab.d.mts.map

package/dist/TabBar-BMv8dAS3.cjs

@@ -0,0 +1,297 @@
+const require_chunk = require("./chunk-CoPdw6nB.cjs");
+const require_lib_pseudoClass = require("./lib/pseudoClass.cjs");
+require("./variables/transitions.cjs");
+const require_mixins_text = require("./mixins/text.cjs");
+const require_IconButton = require("./IconButton-B1ZL8BqW.cjs");
+require("./components/Button/index.cjs");
+const require_Badge = require("./Badge-BwAZD9BH.cjs");
+const require_mergeRefs = require("./mergeRefs-BZinWopc.cjs");
+let _persona_design_tokens = require("@persona/design-tokens");
+let styled_components = require("styled-components");
+styled_components = require_chunk.__toESM(styled_components);
+let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
+//#region components/TabBar/TabBarContext.ts
+var TabBarContext_default = (0, react.createContext)({});
+//#endregion
+//#region components/TabBar/TabBar.tsx
+const TabBarContainer = styled_components.default.div`
+  display: flex;
+  height: ${_persona_design_tokens.Spacing[6]};
+  position: relative;
+  box-sizing: border-box;
+  border-bottom: 1px solid ${_persona_design_tokens.Color.BorderDivider};
+  justify-content: space-between;
+  gap: ${_persona_design_tokens.Spacing[4]};
+`;
+const RightActions = styled_components.default.div`
+  align-self: center;
+`;
+const TitleTab = styled_components.default.div`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  ${require_mixins_text.paragraphMixins.mdBold};
+`;
+const StyledTabContainer = styled_components.default.div`
+  display: flex;
+  gap: ${({ $size = "md" }) => $size === "sm" ? _persona_design_tokens.Spacing[3] : _persona_design_tokens.Spacing[4]};
+  // These two lines prevent the overflow hidden from hiding the bottom border of the selected tab
+  margin-bottom: -2px;
+  padding-bottom: 2px;
+  overflow: hidden;
+  flex-wrap: wrap;
+`;
+const TabContainer = (0, react.forwardRef)(function TabContainer({ children, maxTabChars, size, ...props }, forwardedRef) {
+	const tabListRef = (0, react.useRef)(null);
+	const getIndexOfCurrentTab = (list) => {
+		return getIndex(list, document.activeElement);
+	};
+	const handleKeyDown = (e) => {
+		const list = getTabList(tabListRef.current.children);
+		if (document.activeElement && !list.includes(document.activeElement)) return;
+		switch (e.key) {
+			case "ArrowLeft": {
+				const curIndex = getIndexOfCurrentTab(list);
+				list[curIndex === 0 ? list.length - 1 : curIndex - 1].focus();
+				break;
+			}
+			case "ArrowRight":
+				list[(getIndexOfCurrentTab(list) + 1) % list.length].focus();
+				break;
+			case "Home":
+				list[0].focus();
+				break;
+			case "End":
+				list[list.length - 1].focus();
+				break;
+			default: break;
+		}
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TabBarContext_default.Provider, {
+		value: {
+			maxTabChars,
+			size
+		},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledTabContainer, {
+			role: "tablist",
+			ref: require_mergeRefs.$5dc95899b306f630$export$c9058316764c140e(tabListRef, forwardedRef),
+			onKeyDown: handleKeyDown,
+			$size: size,
+			...props,
+			children
+		})
+	});
+});
+const getIndex = (children, element) => {
+	return children.indexOf(element);
+};
+const getTabList = (list) => {
+	return Array.from(list).filter((e) => {
+		return !(e.getAttribute("aria-disabled") || e.getAttribute("disabled"));
+	});
+};
+const TabBar = (0, react.forwardRef)(function TabBar({ children, actions, title, "data-tour-target": dataTourTarget, maxTabChars, size, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...elemProps }, forwardedRef) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(TabBarContainer, {
+		...elemProps,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(TabContainer, {
+			ref: forwardedRef,
+			maxTabChars,
+			size,
+			"aria-label": ariaLabel,
+			"aria-labelledby": ariaLabelledBy,
+			children: [title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TitleTab, {
+				"data-tour-target": dataTourTarget,
+				children: title
+			}), children]
+		}), actions && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RightActions, { children: actions })]
+	});
+});
+//#endregion
+//#region components/TabBar/Tab.tsx
+const BadgeContainer = styled_components.default.span`
+  padding: 0;
+  margin-left: ${_persona_design_tokens.Spacing[1]};
+`;
+const sizeStyles = {
+	md: styled_components.css`
+    ${require_mixins_text.paragraphMixins.md}
+  `,
+	sm: styled_components.css`
+    ${require_mixins_text.paragraphMixins.sm}
+  `
+};
+const tabSelectedStyle = styled_components.css`
+  color: ${({ theme }) => theme.color.primary.brand};
+  border-bottom-color: ${({ theme }) => theme.color.primary.brand};
+  box-shadow: none;
+  &:after {
+    transition: border-bottom-color ${"200ms"};
+    border-bottom-color: ${({ theme }) => theme.color.primary.brand};
+  }
+`;
+const StyledTab = (0, styled_components.default)(require_IconButton.Button).attrs({
+	width: "auto",
+	variant: "basic"
+})`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  white-space: nowrap;
+  background-color: transparent;
+  color: ${({ theme, disabled }) => disabled ? theme.color.variants.basic.textDisabled : theme.color.text.tertiary};
+  transition: color ${"200ms"} ease-out;
+  height: 32px;
+  margin: 0;
+  padding: 0;
+  ${({ size }) => sizeStyles[size || "md"]};
+  outline: none;
+  border-radius: ${({ theme }) => theme.button.borderRadius};
+
+  a {
+    color: currentColor;
+  }
+
+  /* remove default button focused/hovered box shadow */
+  &${require_lib_pseudoClass.isActive}${require_lib_pseudoClass.isNotDisabled} {
+    background-color: unset;
+  }
+  &${require_lib_pseudoClass.isHovered}${require_lib_pseudoClass.isNotDisabled} {
+    background-color: unset;
+    ${({ selected }) => !selected && styled_components.css`
+        color: ${_persona_design_tokens.Color.TextPrimary};
+      `}
+  }
+  &${require_lib_pseudoClass.isFocused}${require_lib_pseudoClass.isNotDisabled} {
+    box-shadow: none;
+    background-color: unset;
+  }
+  &${require_lib_pseudoClass.isHovered}${require_lib_pseudoClass.isFocused}${require_lib_pseudoClass.isNotDisabled} {
+    background-color: unset;
+  }
+  &:disabled {
+    background-color: unset;
+  }
+
+  &:after {
+    position: absolute;
+    bottom: 0px;
+    width: 100%;
+    border-bottom: 1px solid transparent;
+    content: '';
+  }
+
+  &.selected,
+  &.active {
+    ${tabSelectedStyle}
+  }
+
+  ${({ selected }) => selected && tabSelectedStyle}
+
+  ${({ disabled }) => disabled && styled_components.css`
+      cursor: default;
+    `}
+
+  a& {
+    text-decoration: none;
+  }
+`;
+/**
+* Helper function to truncate text if it exceeds maxCharacters
+*/
+const truncateText = (text, maxCharacters) => {
+	if (text.length <= maxCharacters) return text;
+	return `${text.substring(0, maxCharacters).trimEnd()}...`;
+};
+const Tab = ({ selected, disabled, children, badge, as, size, ...elemProps }) => {
+	const { maxTabChars, size: contextSize } = (0, react.useContext)(TabBarContext_default);
+	const finalSize = size || contextSize || "md";
+	const hasTruncation = maxTabChars && typeof children === "string";
+	const displayChildren = hasTruncation ? truncateText(children, maxTabChars) : children;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledTab, {
+		role: "tab",
+		selected,
+		"aria-selected": selected,
+		"aria-disabled": disabled,
+		disabled,
+		as,
+		size: finalSize,
+		title: hasTruncation ? children : void 0,
+		...elemProps,
+		children: [displayChildren, badge && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BadgeContainer, { children: badge.type === require_Badge.Badge ? (0, react.cloneElement)(badge, {
+			variant: selected ? "active" : "basic",
+			onSecondaryBackground: true
+		}) : badge })]
+	});
+};
+//#endregion
+//#region components/TabBar/TabBarIconButton.tsx
+var TabBarIconButton_default = (0, styled_components.default)(require_IconButton.IconButton).attrs({ size: "sm" })`
+  padding-left: ${_persona_design_tokens.Spacing[2]};
+  padding-right: ${_persona_design_tokens.Spacing[2]};
+  border-radius: ${_persona_design_tokens.BorderRadius.Sm};
+
+  // remove default button focused/hovered box shadow
+  &${require_lib_pseudoClass.isActive}${require_lib_pseudoClass.isNotDisabled} {
+    background-color: transparent;
+  }
+  &${require_lib_pseudoClass.isHovered}${require_lib_pseudoClass.isNotDisabled} {
+    box-shadow: none;
+  }
+  &${require_lib_pseudoClass.isFocused}${require_lib_pseudoClass.isNotDisabled} {
+    box-shadow: none;
+  }
+  &${require_lib_pseudoClass.isHovered}${require_lib_pseudoClass.isFocused}${require_lib_pseudoClass.isNotDisabled} {
+    box-shadow: none;
+  }
+  &:disabled {
+    background-color: transparent;
+  }
+  &:focus-visible${require_lib_pseudoClass.isNotDisabled}, &${require_lib_pseudoClass.isHovered}${require_lib_pseudoClass.isNotDisabled}:focus-visible {
+    box-shadow: 0 0 0 3px ${({ theme }) => theme.color.variants.basic.highlight};
+  }
+
+  svg {
+    color: ${_persona_design_tokens.Color.CoreSlate800};
+  }
+
+  &:hover {
+    svg {
+      color: ${_persona_design_tokens.Color.CoreSlate900};
+    }
+  }
+`;
+//#endregion
+Object.defineProperty(exports, "StyledTab", {
+	enumerable: true,
+	get: function() {
+		return StyledTab;
+	}
+});
+Object.defineProperty(exports, "Tab", {
+	enumerable: true,
+	get: function() {
+		return Tab;
+	}
+});
+Object.defineProperty(exports, "TabBar", {
+	enumerable: true,
+	get: function() {
+		return TabBar;
+	}
+});
+Object.defineProperty(exports, "TabBarIconButton_default", {
+	enumerable: true,
+	get: function() {
+		return TabBarIconButton_default;
+	}
+});
+Object.defineProperty(exports, "TabContainer", {
+	enumerable: true,
+	get: function() {
+		return TabContainer;
+	}
+});
+
+//# sourceMappingURL=TabBar-BMv8dAS3.cjs.map

package/dist/TabBar-BMv8dAS3.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabBar-BMv8dAS3.cjs","names":["Spacing","Color","paragraphMixins","TabBarContext","mergeRefs","Spacing","paragraphMixins","Button","isActive","isNotDisabled","isHovered","Color","isFocused","TabBarContext","Badge","IconButton","Spacing","BorderRadius","isActive","isNotDisabled","isHovered","isFocused","Color"],"sources":["../components/TabBar/TabBarContext.ts","../components/TabBar/TabBar.tsx","../components/TabBar/Tab.tsx","../components/TabBar/TabBarIconButton.tsx"],"sourcesContent":["import { createContext } from 'react';\n\nexport default createContext<{ maxTabChars?: number; size?: 'md' | 'sm' }>({});\n","import { Color, Spacing } from '@persona/design-tokens';\nimport { mergeRefs } from '@react-aria/utils';\nimport {\n  type ComponentPropsWithoutRef,\n  type ForwardedRef,\n  forwardRef,\n  type KeyboardEventHandler,\n  type ReactNode,\n  useRef,\n} from 'react';\nimport styled from 'styled-components';\n\nimport TabBarContext from 'design-system/components/TabBar/TabBarContext';\nimport { paragraphMixins } from 'design-system/mixins/text';\n\nconst TabBarContainer = styled.div`\n  display: flex;\n  height: ${Spacing[6]};\n  position: relative;\n  box-sizing: border-box;\n  border-bottom: 1px solid ${Color.BorderDivider};\n  justify-content: space-between;\n  gap: ${Spacing[4]};\n`;\n\nconst RightActions = styled.div`\n  align-self: center;\n`;\n\nconst TitleTab = styled.div`\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  ${paragraphMixins.mdBold};\n`;\n\nconst StyledTabContainer = styled.div<{ $size?: 'md' | 'sm' }>`\n  display: flex;\n  gap: ${({ $size = 'md' }) => ($size === 'sm' ? Spacing[3] : Spacing[4])};\n  // These two lines prevent the overflow hidden from hiding the bottom border of the selected tab\n  margin-bottom: -2px;\n  padding-bottom: 2px;\n  overflow: hidden;\n  flex-wrap: wrap;\n`;\n\ninterface TabContainerProps extends ComponentPropsWithoutRef<'div'> {\n  children: ReactNode;\n  /**\n   * Truncate tab text to the specified number of characters.\n   */\n  maxTabChars?: number;\n  /**\n   * Size of the tabs. Affects font size.\n   */\n  size?: 'md' | 'sm';\n}\n\nexport const TabContainer = forwardRef<HTMLDivElement, TabContainerProps>(function TabContainer(\n  { children, maxTabChars, size, ...props },\n  forwardedRef,\n) {\n  const tabListRef = useRef<HTMLDivElement>(null);\n\n  const getIndexOfCurrentTab = (list: Element[]) => {\n    /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n    return getIndex(list, document.activeElement);\n  };\n\n  const handleKeyDown: KeyboardEventHandler<HTMLDivElement> = (e) => {\n    // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tab_role\n    /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n    const list = getTabList(tabListRef.current.children);\n\n    if (document.activeElement && !list.includes(document.activeElement)) {\n      return;\n    }\n\n    switch (e.key) {\n      case 'ArrowLeft': {\n        // Go to previous tab\n        const curIndex = getIndexOfCurrentTab(list);\n        const nextIndex = curIndex === 0 ? list.length - 1 : curIndex - 1;\n        (list[nextIndex] as HTMLElement).focus();\n        break;\n      }\n      case 'ArrowRight': {\n        // Go to next tab\n        const curIndex = getIndexOfCurrentTab(list);\n        (list[(curIndex + 1) % list.length] as HTMLElement).focus();\n        break;\n      }\n      case 'Home': {\n        // Go to first tab\n        (list[0] as HTMLElement).focus();\n        break;\n      }\n      case 'End': {\n        // Go to last tab\n        (list[list.length - 1] as HTMLElement).focus();\n        break;\n      }\n      default:\n        break;\n    }\n  };\n\n  return (\n    <TabBarContext.Provider value={{ maxTabChars, size }}>\n      <StyledTabContainer\n        role='tablist'\n        ref={mergeRefs<HTMLDivElement>(tabListRef, forwardedRef)}\n        onKeyDown={handleKeyDown}\n        $size={size}\n        {...props}\n      >\n        {children}\n      </StyledTabContainer>\n    </TabBarContext.Provider>\n  );\n});\n\nconst getIndex = (children: Element[], element: Element) => {\n  return children.indexOf(element);\n};\n\nconst getTabList = (list: HTMLCollection) => {\n  /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n  return Array.from(list).filter((e: HTMLElement) => {\n    return !(e.getAttribute('aria-disabled') || e.getAttribute('disabled'));\n  });\n};\n\nexport interface TabBarProps extends ComponentPropsWithoutRef<'div'> {\n  actions?: ReactNode;\n  title?: string;\n  'data-tour-target'?: string;\n  /**\n   * Truncate tab text to the specified number of characters.\n   */\n  maxTabChars?: number;\n  /**\n   * Size of the tabs. Affects font size.\n   */\n  size?: 'md' | 'sm';\n}\n\nexport const TabBar = forwardRef<HTMLDivElement, TabBarProps>(function TabBar(\n  {\n    children,\n    actions,\n    title,\n    'data-tour-target': dataTourTarget,\n    maxTabChars,\n    size,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    ...elemProps\n  },\n  forwardedRef: ForwardedRef<HTMLDivElement>,\n) {\n  return (\n    <TabBarContainer {...elemProps}>\n      <TabContainer\n        ref={forwardedRef}\n        maxTabChars={maxTabChars}\n        size={size}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n      >\n        {title && <TitleTab data-tour-target={dataTourTarget}>{title}</TitleTab>}\n        {children}\n      </TabContainer>\n      {actions && <RightActions>{actions}</RightActions>}\n    </TabBarContainer>\n  );\n});\n\nexport default TabBar;\n","import { Color, Spacing } from '@persona/design-tokens';\nimport {\n  cloneElement,\n  type ComponentPropsWithoutRef,\n  type ElementType,\n  type ReactElement,\n  useContext,\n} from 'react';\nimport styled, {\n  css,\n  type DefaultTheme,\n  type FlattenInterpolation,\n  type ThemeProps,\n} from 'styled-components';\n\nimport Badge from 'design-system/components/Badge';\nimport Button from 'design-system/components/Button';\nimport TabBarContext from 'design-system/components/TabBar/TabBarContext';\nimport { isActive, isFocused, isHovered, isNotDisabled } from 'design-system/lib/pseudoClass';\nimport { paragraphMixins } from 'design-system/mixins/text';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\ninterface TabProps<T extends ElementType = 'button'> extends ComponentPropsWithoutRef<\n  typeof Button\n> {\n  selected?: boolean;\n  badge?: ReactElement;\n  as?: T;\n  size?: 'md' | 'sm';\n}\n\nconst BadgeContainer = styled.span`\n  padding: 0;\n  margin-left: ${Spacing[1]};\n`;\n\nconst sizeStyles: Record<\n  NonNullable<TabProps['size']>,\n  FlattenInterpolation<ThemeProps<DefaultTheme>>\n> = {\n  md: css`\n    ${paragraphMixins.md}\n  `,\n  sm: css`\n    ${paragraphMixins.sm}\n  `,\n};\n\nconst tabSelectedStyle = css`\n  color: ${({ theme }) => theme.color.primary.brand};\n  border-bottom-color: ${({ theme }) => theme.color.primary.brand};\n  box-shadow: none;\n  &:after {\n    transition: border-bottom-color ${TransitionDuration.Fast};\n    border-bottom-color: ${({ theme }) => theme.color.primary.brand};\n  }\n`;\n\nexport const StyledTab = styled(Button).attrs<TabProps>({\n  width: 'auto',\n  variant: 'basic',\n})<TabProps>`\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  white-space: nowrap;\n  background-color: transparent;\n  color: ${({ theme, disabled }) =>\n    disabled ? theme.color.variants.basic.textDisabled : theme.color.text.tertiary};\n  transition: color ${TransitionDuration.Fast} ease-out;\n  height: 32px;\n  margin: 0;\n  padding: 0;\n  ${({ size }) => sizeStyles[size || 'md']};\n  outline: none;\n  border-radius: ${({ theme }) => theme.button.borderRadius};\n\n  a {\n    color: currentColor;\n  }\n\n  /* remove default button focused/hovered box shadow */\n  &${isActive}${isNotDisabled} {\n    background-color: unset;\n  }\n  &${isHovered}${isNotDisabled} {\n    background-color: unset;\n    ${({ selected }) =>\n      !selected &&\n      css`\n        color: ${Color.TextPrimary};\n      `}\n  }\n  &${isFocused}${isNotDisabled} {\n    box-shadow: none;\n    background-color: unset;\n  }\n  &${isHovered}${isFocused}${isNotDisabled} {\n    background-color: unset;\n  }\n  &:disabled {\n    background-color: unset;\n  }\n\n  &:after {\n    position: absolute;\n    bottom: 0px;\n    width: 100%;\n    border-bottom: 1px solid transparent;\n    content: '';\n  }\n\n  &.selected,\n  &.active {\n    ${tabSelectedStyle}\n  }\n\n  ${({ selected }) => selected && tabSelectedStyle}\n\n  ${({ disabled }) =>\n    disabled &&\n    css`\n      cursor: default;\n    `}\n\n  a& {\n    text-decoration: none;\n  }\n`;\n\n/**\n * Helper function to truncate text if it exceeds maxCharacters\n */\nconst truncateText = (text: string, maxCharacters: number): string => {\n  if (text.length <= maxCharacters) {\n    return text;\n  }\n  return `${text.substring(0, maxCharacters).trimEnd()}...`;\n};\n\nconst Tab = <T extends ElementType = 'button'>({\n  selected,\n  disabled,\n  children,\n  badge,\n  as,\n  size,\n  ...elemProps\n}: TabProps<T> & ComponentPropsWithoutRef<T>) => {\n  const { maxTabChars, size: contextSize } = useContext(TabBarContext);\n  const finalSize = size || contextSize || 'md';\n\n  // Truncate text if maxTabChars is provided and children is a string\n  const hasTruncation = maxTabChars && typeof children === 'string';\n  const displayChildren = hasTruncation ? truncateText(children, maxTabChars) : children;\n\n  return (\n    <StyledTab\n      role='tab'\n      selected={selected}\n      aria-selected={selected}\n      aria-disabled={disabled}\n      disabled={disabled}\n      as={as as ElementType}\n      size={finalSize}\n      title={hasTruncation ? children : undefined}\n      {...elemProps}\n    >\n      {displayChildren}\n      {badge && (\n        <BadgeContainer>\n          {badge.type === Badge\n            ? cloneElement(badge, {\n                variant: selected ? 'active' : 'basic',\n                onSecondaryBackground: true,\n              })\n            : badge}\n        </BadgeContainer>\n      )}\n    </StyledTab>\n  );\n};\n\nexport default Tab;\n","import { BorderRadius, Color, Spacing } from '@persona/design-tokens';\nimport styled from 'styled-components';\n\nimport { IconButton } from 'design-system/components/Button';\nimport { isActive, isFocused, isHovered, isNotDisabled } from 'design-system/lib/pseudoClass';\n\nexport default styled(IconButton).attrs({\n  size: 'sm',\n})`\n  padding-left: ${Spacing[2]};\n  padding-right: ${Spacing[2]};\n  border-radius: ${BorderRadius.Sm};\n\n  // remove default button focused/hovered box shadow\n  &${isActive}${isNotDisabled} {\n    background-color: transparent;\n  }\n  &${isHovered}${isNotDisabled} {\n    box-shadow: none;\n  }\n  &${isFocused}${isNotDisabled} {\n    box-shadow: none;\n  }\n  &${isHovered}${isFocused}${isNotDisabled} {\n    box-shadow: none;\n  }\n  &:disabled {\n    background-color: transparent;\n  }\n  &:focus-visible${isNotDisabled}, &${isHovered}${isNotDisabled}:focus-visible {\n    box-shadow: 0 0 0 3px ${({ theme }) => theme.color.variants.basic.highlight};\n  }\n\n  svg {\n    color: ${Color.CoreSlate800};\n  }\n\n  &:hover {\n    svg {\n      color: ${Color.CoreSlate900};\n    }\n  }\n`;\n"],"mappings":"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"}