@persona/design-system 0.1.7 → 0.1.9

package/dist/Tab.d.cts

@@ -1,26 +0,0 @@
-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/TabBar-BpHMYvNb.cjs

@@ -1,298 +0,0 @@
-const require_chunk = require("./chunk-CKQMccvm.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-DNy7g5zh.cjs");
-const require_Badge = require("./Badge-DAGPU4-e.cjs");
-let _persona_design_tokens = require("@persona/design-tokens");
-let styled_components = require("styled-components");
-styled_components = require_chunk.__toESM(styled_components);
-let react = require("react");
-let react_jsx_runtime = require("react/jsx-runtime");
-let _react_aria_utils = require("@react-aria/utils");
-//#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: (0, _react_aria_utils.mergeRefs)(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`
-  display: inline-flex;
-  vertical-align: middle;
-  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-BpHMYvNb.cjs.map

package/dist/TabBar-BpHMYvNb.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"TabBar-BpHMYvNb.cjs","names":["Spacing","Color","paragraphMixins","TabBarContext","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 { 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 { Color, Spacing } from '@persona/design-tokens';\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 {\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 { Color, Spacing } from '@persona/design-tokens';\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  display: inline-flex;\n  vertical-align: middle;\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 styled from 'styled-components';\n\nimport { BorderRadius, Color, Spacing } from '@persona/design-tokens';\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":";;;;;;;;;;;;;AAEA,IAAA,yBAAA,GAAA,MAAA,eAA2E,EAAE,CAAC;;;ACa9E,MAAM,kBAAkB,kBAAA,QAAO,GAAG;;YAEtBA,uBAAAA,QAAQ,GAAG;;;6BAGMC,uBAAAA,MAAM,cAAc;;SAExCD,uBAAAA,QAAQ,GAAG;;AAGpB,MAAM,eAAe,kBAAA,QAAO,GAAG;;;AAI/B,MAAM,WAAW,kBAAA,QAAO,GAAG;;;;IAIvBE,oBAAAA,gBAAgB,OAAO;;AAG3B,MAAM,qBAAqB,kBAAA,QAAO,GAA4B;;UAEpD,EAAE,QAAQ,WAAY,UAAU,OAAOF,uBAAAA,QAAQ,KAAKA,uBAAAA,QAAQ,GAAI;;;;;;;AAoB1E,MAAa,gBAAA,GAAA,MAAA,YAA6D,SAAS,aACjF,EAAE,UAAU,aAAa,MAAM,GAAG,SAClC,cACA;CACA,MAAM,cAAA,GAAA,MAAA,QAAoC,KAAK;CAE/C,MAAM,wBAAwB,SAAoB;AAEhD,SAAO,SAAS,MAAM,SAAS,cAAc;;CAG/C,MAAM,iBAAuD,MAAM;EAGjE,MAAM,OAAO,WAAW,WAAW,QAAQ,SAAS;AAEpD,MAAI,SAAS,iBAAiB,CAAC,KAAK,SAAS,SAAS,cAAc,CAClE;AAGF,UAAQ,EAAE,KAAV;GACE,KAAK,aAAa;IAEhB,MAAM,WAAW,qBAAqB,KAAK;AAE1C,SADiB,aAAa,IAAI,KAAK,SAAS,IAAI,WAAW,GAC/B,OAAO;AACxC;;GAEF,KAAK;AAGF,UADgB,qBAAqB,KACvB,GAAG,KAAK,KAAK,QAAwB,OAAO;AAC3D;GAEF,KAAK;AAEF,SAAK,GAAmB,OAAO;AAChC;GAEF,KAAK;AAEF,SAAK,KAAK,SAAS,GAAmB,OAAO;AAC9C;GAEF,QACE;;;AAIN,QACE,iBAAA,GAAA,kBAAA,KAACG,sBAAc,UAAf;EAAwB,OAAO;GAAE;GAAa;GAAM;YAClD,iBAAA,GAAA,kBAAA,KAAC,oBAAD;GACE,MAAK;GACL,MAAA,GAAA,kBAAA,WAA+B,YAAY,aAAa;GACxD,WAAW;GACX,OAAO;GACP,GAAI;GAEH;GACkB,CAAA;EACE,CAAA;EAE3B;AAEF,MAAM,YAAY,UAAqB,YAAqB;AAC1D,QAAO,SAAS,QAAQ,QAAQ;;AAGlC,MAAM,cAAc,SAAyB;AAE3C,QAAO,MAAM,KAAK,KAAK,CAAC,QAAQ,MAAmB;AACjD,SAAO,EAAE,EAAE,aAAa,gBAAgB,IAAI,EAAE,aAAa,WAAW;GACtE;;AAiBJ,MAAa,UAAA,GAAA,MAAA,YAAiD,SAAS,OACrE,EACE,UACA,SACA,OACA,oBAAoB,gBACpB,aACA,MACA,cAAc,WACd,mBAAmB,gBACnB,GAAG,aAEL,cACA;AACA,QACE,iBAAA,GAAA,kBAAA,MAAC,iBAAD;EAAiB,GAAI;YAArB,CACE,iBAAA,GAAA,kBAAA,MAAC,cAAD;GACE,KAAK;GACQ;GACP;GACN,cAAY;GACZ,mBAAiB;aALnB,CAOG,SAAS,iBAAA,GAAA,kBAAA,KAAC,UAAD;IAAU,oBAAkB;cAAiB;IAAiB,CAAA,EACvE,SACY;MACd,WAAW,iBAAA,GAAA,kBAAA,KAAC,cAAD,EAAA,UAAe,SAAuB,CAAA,CAClC;;EAEpB;;;ACjJF,MAAM,iBAAiB,kBAAA,QAAO,IAAI;;;;iBAIjBC,uBAAAA,QAAQ,GAAG;;AAG5B,MAAM,aAGF;CACF,IAAI,kBAAA,GAAG;MACHC,oBAAAA,gBAAgB,GAAG;;CAEvB,IAAI,kBAAA,GAAG;MACHA,oBAAAA,gBAAgB,GAAG;;CAExB;AAED,MAAM,mBAAmB,kBAAA,GAAG;YAChB,EAAE,YAAY,MAAM,MAAM,QAAQ,MAAM;0BAC1B,EAAE,YAAY,MAAM,MAAM,QAAQ,MAAM;;;8CAGJ;4BAClC,EAAE,YAAY,MAAM,MAAM,QAAQ,MAAM;;;AAIpE,MAAa,YAAY,CAAA,GAAA,kBAAA,SAAOC,mBAAAA,OAAO,CAAC,MAAgB;CACtD,OAAO;CACP,SAAS;CACV,CAAC;;;;;;;YAOU,EAAE,OAAO,eACjB,WAAW,MAAM,MAAM,SAAS,MAAM,eAAe,MAAM,MAAM,KAAK,SAAS;8BACrC;;;;KAIzC,EAAE,WAAW,WAAW,QAAQ,MAAM;;oBAEvB,EAAE,YAAY,MAAM,OAAO,aAAa;;;;;;;KAOvDC,wBAAAA,WAAWC,wBAAAA,cAAc;;;KAGzBC,wBAAAA,YAAYD,wBAAAA,cAAc;;OAExB,EAAE,eACH,CAAC,YACD,kBAAA,GAAG;iBACQE,uBAAAA,MAAM,YAAY;QAC3B;;KAEHC,wBAAAA,YAAYH,wBAAAA,cAAc;;;;KAI1BC,wBAAAA,YAAYE,wBAAAA,YAAYH,wBAAAA,cAAc;;;;;;;;;;;;;;;;;MAiBrC,iBAAiB;;;KAGlB,EAAE,eAAe,YAAY,iBAAiB;;KAE9C,EAAE,eACH,YACA,kBAAA,GAAG;;MAED;;;;;;;;;AAUN,MAAM,gBAAgB,MAAc,kBAAkC;AACpE,KAAI,KAAK,UAAU,cACjB,QAAO;AAET,QAAO,GAAG,KAAK,UAAU,GAAG,cAAc,CAAC,SAAS,CAAC;;AAGvD,MAAM,OAAyC,EAC7C,UACA,UACA,UACA,OACA,IACA,MACA,GAAG,gBAC4C;CAC/C,MAAM,EAAE,aAAa,MAAM,iBAAA,GAAA,MAAA,YAA2BI,sBAAc;CACpE,MAAM,YAAY,QAAQ,eAAe;CAGzC,MAAM,gBAAgB,eAAe,OAAO,aAAa;CACzD,MAAM,kBAAkB,gBAAgB,aAAa,UAAU,YAAY,GAAG;AAE9E,QACE,iBAAA,GAAA,kBAAA,MAAC,WAAD;EACE,MAAK;EACK;EACV,iBAAe;EACf,iBAAe;EACL;EACN;EACJ,MAAM;EACN,OAAO,gBAAgB,WAAW,KAAA;EAClC,GAAI;YATN,CAWG,iBACA,SACC,iBAAA,GAAA,kBAAA,KAAC,gBAAD,EAAA,UACG,MAAM,SAASC,cAAAA,SAAAA,GAAAA,MAAAA,cACC,OAAO;GAClB,SAAS,WAAW,WAAW;GAC/B,uBAAuB;GACxB,CAAC,GACF,OACW,CAAA,CAET;;;;;AChLhB,IAAA,2BAAe,CAAA,GAAA,kBAAA,SAAOC,mBAAAA,WAAW,CAAC,MAAM,EACtC,MAAM,MACP,CAAC;kBACgBC,uBAAAA,QAAQ,GAAG;mBACVA,uBAAAA,QAAQ,GAAG;mBACXC,uBAAAA,aAAa,GAAG;;;KAG9BC,wBAAAA,WAAWC,wBAAAA,cAAc;;;KAGzBC,wBAAAA,YAAYD,wBAAAA,cAAc;;;KAG1BE,wBAAAA,YAAYF,wBAAAA,cAAc;;;KAG1BC,wBAAAA,YAAYC,wBAAAA,YAAYF,wBAAAA,cAAc;;;;;;mBAMxBA,wBAAAA,cAAc,KAAKC,wBAAAA,YAAYD,wBAAAA,cAAc;6BACnC,EAAE,YAAY,MAAM,MAAM,SAAS,MAAM,UAAU;;;;aAInEG,uBAAAA,MAAM,aAAa;;;;;eAKjBA,uBAAAA,MAAM,aAAa"}

package/dist/TabBar-ByusqAXF.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"TabBar-ByusqAXF.mjs","names":["TabBarContext","TabBarContext"],"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 { 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 { Color, Spacing } from '@persona/design-tokens';\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 {\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 { Color, Spacing } from '@persona/design-tokens';\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  display: inline-flex;\n  vertical-align: middle;\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 styled from 'styled-components';\n\nimport { BorderRadius, Color, Spacing } from '@persona/design-tokens';\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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"}

package/dist/TabBar.d.cts

@@ -1,33 +0,0 @@
-import * as _$react from "react";
-import { ComponentPropsWithoutRef, ReactNode } from "react";
-
-//#region components/TabBar/TabBar.d.ts
-interface TabContainerProps extends ComponentPropsWithoutRef<'div'> {
-  children: ReactNode;
-  /**
-   * Truncate tab text to the specified number of characters.
-   */
-  maxTabChars?: number;
-  /**
-   * Size of the tabs. Affects font size.
-   */
-  size?: 'md' | 'sm';
-}
-declare const TabContainer: _$react.ForwardRefExoticComponent<TabContainerProps & _$react.RefAttributes<HTMLDivElement>>;
-interface TabBarProps extends ComponentPropsWithoutRef<'div'> {
-  actions?: ReactNode;
-  title?: string;
-  'data-tour-target'?: string;
-  /**
-   * Truncate tab text to the specified number of characters.
-   */
-  maxTabChars?: number;
-  /**
-   * Size of the tabs. Affects font size.
-   */
-  size?: 'md' | 'sm';
-}
-declare const TabBar: _$react.ForwardRefExoticComponent<TabBarProps & _$react.RefAttributes<HTMLDivElement>>;
-//#endregion
-export { TabBar, TabBar as default, TabBarProps, TabContainer };
-//# sourceMappingURL=TabBar.d.cts.map

package/dist/TabBarIconButton.d.cts

@@ -1,10 +0,0 @@
-import { n as IconButtonProps } from "./IconButton-ZcyTFjPn.cjs";
-import * as _$react from "react";
-import * as _$styled_components0 from "styled-components";
-
-//#region components/TabBar/TabBarIconButton.d.ts
-declare const _default: _$styled_components0.StyledComponent<_$react.ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & _$react.RefAttributes<HTMLButtonElement>>, any, {
-  size: "sm";
-}, "size">;
-export = _default;
-//# sourceMappingURL=TabBarIconButton.d.cts.map