npm - @persona/design-system - Versions diffs - 0.1.6 → 0.1.7 - Mend

@persona/design-system 0.1.6 → 0.1.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (597) hide show

package/dist/{TabBar-D8WCGYd5.cjs → TabBar-BpHMYvNb.cjs} RENAMED Viewed

@@ -3,7 +3,7 @@ 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-CvdUyXSH.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);
@@ -109,6 +109,8 @@ const TabBar = (0, react.forwardRef)(function TabBar({ children, actions, title,
 //#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]};
 `;
@@ -293,4 +295,4 @@ Object.defineProperty(exports, "TabContainer", {
 	}
 });
-//# sourceMappingURL=TabBar-D8WCGYd5.cjs.map
+//# sourceMappingURL=TabBar-BpHMYvNb.cjs.map

package/dist/TabBar-BpHMYvNb.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"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":"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"}

package/dist/{TabBar-CAv10XAF.mjs → TabBar-ByusqAXF.mjs} RENAMED Viewed

@@ -2,7 +2,7 @@ import { isActive, isFocused, isHovered, isNotDisabled } from "./lib/pseudoClass
 import "./variables/transitions.mjs";
 import { paragraphMixins } from "./mixins/text.mjs";
 import { n as Button, t as IconButton } from "./IconButton-DC4rh6ow.mjs";
-import { t as Badge } from "./Badge-pq6B-3ue.mjs";
+import { t as Badge } from "./Badge-DRn_r6is.mjs";
 import { BorderRadius, Color, Spacing } from "@persona/design-tokens";
 import styled, { css } from "styled-components";
 import { cloneElement, createContext, forwardRef, useContext, useRef } from "react";
@@ -107,6 +107,8 @@ const TabBar = forwardRef(function TabBar({ children, actions, title, "data-tour
 //#endregion
 //#region components/TabBar/Tab.tsx
 const BadgeContainer = styled.span`
+  display: inline-flex;
+  vertical-align: middle;
   padding: 0;
   margin-left: ${Spacing[1]};
 `;
@@ -262,4 +264,4 @@ var TabBarIconButton_default = styled(IconButton).attrs({ size: "sm" })`
 //#endregion
 export { TabContainer as a, TabBar as i, StyledTab as n, Tab as r, TabBarIconButton_default as t };
-//# sourceMappingURL=TabBar-CAv10XAF.mjs.map
+//# sourceMappingURL=TabBar-ByusqAXF.mjs.map

package/dist/TabBar-ByusqAXF.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"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/TabBarIconButton.d.mts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { n as IconButtonProps } from "./IconButton-DggxojBH.mjs";
+import { n as IconButtonProps } from "./IconButton-Dnnlf9uO.mjs";
 import * as _$styled_components0 from "styled-components";
 import * as _$react from "react";

package/dist/{Table-B3FJsvXP.cjs → Table-C9rjUVpn.cjs} RENAMED Viewed

@@ -7,7 +7,7 @@ const require_Text = require("./Text-CzN0DOXV.cjs");
 const require_variables_keyframes = require("./variables/keyframes.cjs");
 const require_Tooltip = require("./Tooltip-vylydKVv.cjs");
 const require_lib_zindex = require("./lib/zindex.cjs");
-const require_Spinner = require("./Spinner-DaSlM4kU.cjs");
+const require_Spinner = require("./Spinner-B6bx70yR.cjs");
 let _persona_design_tokens = require("@persona/design-tokens");
 let styled_components = require("styled-components");
 styled_components = require_chunk.__toESM(styled_components);
@@ -475,4 +475,4 @@ Object.defineProperty(exports, "TableTR", {
 	}
 });
-//# sourceMappingURL=Table-B3FJsvXP.cjs.map
+//# sourceMappingURL=Table-C9rjUVpn.cjs.map

package/dist/{Table-B3FJsvXP.cjs.map → Table-C9rjUVpn.cjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Table-B3FJsvXP.cjs","names":["slideKeyframes","paragraphMixins","Spacing","paragraphMixins","Spacing","CaretUpIcon","CaretDownIcon","isHovered","isFocusedVisible","HelperTooltip","Spacing","paragraphMixins","Paragraph","Spacing","Z_INDICES","Spacing","fadeIn","Spinner","Color"],"sources":["../components/Table/Table.tsx","../components/Table/TableHeaderCell.tsx","../components/Table/TableRow.tsx","../components/Table/TableTH.tsx","../components/Table/TableCell.tsx","../components/Table/TableHead.tsx","../components/Table/TableBody.tsx","../components/Table/TableLayout.tsx"],"sourcesContent":["import styled, { css, keyframes } from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\nimport { paragraphMixins } from 'design-system/mixins/text';\n\ninterface TableProps {\n size?: 'sm' \| 'md';\n isLoading?: boolean;\n}\n\nconst slideKeyframes = keyframes`\n 0% {\n transform: translateX(-50%) scaleX(0);\n }\n 50% {\n transform: translateX(0) scaleX(1);\n }\n 100% {\n transform: translateX(50%) scaleX(0);\n }\n`;\n\nexport const Table = styled.table.attrs({ role: 'table' })<TableProps>`\n display: table;\n width: 100%;\n border-spacing: 0;\n ${paragraphMixins.md};\n\n ${({ size }) =>\n size === 'sm' &&\n css`\n td,\n th {\n padding: ${Spacing[2]};\n }\n `}\n\n ${({ isLoading }) =>\n isLoading &&\n css`\n thead {\n &:after {\n content: '';\n display: block;\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n border-bottom: 3px solid ${({ theme }) => theme.color.primary.brand};\n animation: ${slideKeyframes} 3s infinite cubic-bezier(0.5, 0, 0.5, 1);\n }\n }\n `}\n`;\n\nexport default Table;\n","import { type ComponentPropsWithoutRef, forwardRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\nimport { CaretDownIcon, CaretUpIcon } from '@persona/icons';\nimport { paragraphMixins } from 'design-system/mixins/text';\nimport { BASE } from 'design-system/variables/spacing';\n\ninterface TableHeaderCellProps {\n size?: 'sm' \| 'md';\n sortable?: boolean;\n width?: 'auto' \| 'min' \| 'max' \| string;\n isSticky?: boolean;\n align?: 'left' \| 'right';\n}\n\nconst StyledTableHeaderCell = styled.th<TableHeaderCellProps>`\n display: table-cell;\n /* Self-contained box model: don't depend on a consumer's global\n border-box reset, so header padding + border are included in the\n declared width/height. /\n box-sizing: border-box;\n\n background-color: ${({ theme }) => theme.color.background.secondary};\n padding: ${({ size }) => (size === 'sm' ? BASE : BASE 1.5)}px;\n text-align: left;\n white-space: nowrap;\n ${({ size }) => (size === 'sm' ? paragraphMixins.sm : paragraphMixins.md)};\n line-height: 1;\n width: ${({ width }) => {\n switch (width) {\n case 'min':\n return '1px';\n case 'max':\n return '100%';\n default:\n if (width) {\n return width;\n } else {\n return 'auto';\n }\n }\n }};\n\n &:first-child {\n border-radius: ${({ theme }) =>\n `${theme.element.borderRadius} 0 0 ${theme.element.borderRadius}`};\n }\n\n &:last-child {\n border-radius: ${({ theme }) =>\n `0 ${theme.element.borderRadius} ${theme.element.borderRadius} 0`};\n }\n\n ${({ sortable }) =>\n sortable &&\n css`\n cursor: pointer;\n\n &:hover ${TableIconContainer} {\n display: inline;\n visibility: visible;\n }\n `};\n\n ${({ isSticky }) =>\n isSticky\n ? css`\n position: sticky;\n top: 0;\n z-index: 1;\n `\n : css`\n position: relative;\n `}\n`;\n\nconst VerticalAlign = styled.div<{ $align?: TableHeaderCellProps['align'] }>`\n display: flex;\n align-items: center;\n gap: ${Spacing[1]};\n flex-direction: ${({ $align }) => ($align === 'right' ? 'row-reverse' : 'row')};\n`;\n\ninterface TableIconContainerProps {\n sortDirection?: 'asc' \| 'desc' \| false;\n}\n\nconst TableIconContainer = styled('div')<TableIconContainerProps>`\n display: inline-block;\n\n ${({ sortDirection }) => {\n if (sortDirection) {\n return css`\n display: inline;\n `;\n } else {\n return css`\n display: inline;\n visibility: hidden;\n color: ${({ theme }) => theme.color.text.disabled};\n `;\n }\n }};\n`;\n\nconst TableHeaderCell = forwardRef<\n HTMLTableCellElement,\n ComponentPropsWithoutRef<'th'> & TableHeaderCellProps & TableIconContainerProps\n>(function TableHeaderCell({ sortable, sortDirection, children, align, ...elemProps }, ref) {\n let ariaSort: 'none' \| 'ascending' \| 'descending' \| 'other' = 'none';\n\n if (sortable && sortDirection) {\n ariaSort = sortDirection === 'asc' ? 'ascending' : 'descending';\n }\n\n return (\n <StyledTableHeaderCell\n sortable={sortable}\n aria-sort={ariaSort}\n role='columnheader'\n {...elemProps}\n ref={ref}\n >\n <VerticalAlign $align={align}>\n {children}\n {sortable && (\n <TableIconContainer sortDirection={sortDirection}>\n {sortDirection === 'asc' ? <CaretUpIcon /> : <CaretDownIcon />}\n </TableIconContainer>\n )}\n </VerticalAlign>\n </StyledTableHeaderCell>\n );\n});\n\nexport default TableHeaderCell;\n","import styled, { css } from 'styled-components';\n\nimport { isFocusedVisible, isHovered } from 'design-system/lib/pseudoClass';\nimport type PseudoClassProps from 'design-system/types/PseudoClassProps';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\nexport interface TableRowProps extends PseudoClassProps {\n disableHoverBackground?: boolean;\n}\n\nconst TableRow = styled.tr.attrs({\n role: 'row',\n})<TableRowProps>`\n display: table-row;\n\n ${({ onClick }) =>\n onClick != null &&\n css`\n cursor: pointer;\n `}\n\n ${({ disableHoverBackground, theme }) =>\n !disableHoverBackground &&\n css`\n &${isHovered} {\n background-color: ${theme.color.background.highlight};\n transition-duration: ${TransitionDuration.Fast};\n }\n `}\n\n ${isFocusedVisible}\n`;\n\nexport default TableRow;\n","import { type ComponentPropsWithoutRef, forwardRef, type ReactNode } from 'react';\nimport styled from 'styled-components';\n\nimport { TableHeaderCell } from '@persona/design-system/components/Table';\nimport { HelperTooltip } from '@persona/design-system/components/Tooltip';\nimport { Spacing } from '@persona/design-tokens';\n\nconst StyledHelperTooltip = styled(HelperTooltip)`\n height: 14px;\n margin-left: ${Spacing[1]};\n`;\n\nexport interface TableTHProps extends ComponentPropsWithoutRef<typeof TableHeaderCell> {\n canSort?: boolean;\n isSorted?: boolean;\n isDescending?: boolean;\n isSticky?: boolean;\n /*\n Display help icon and tooltip for column header\n /\n helpText?: ReactNode;\n align?: 'left' \| 'right';\n size?: 'sm' \| 'md';\n}\n\nconst TableTH = forwardRef<HTMLTableCellElement, TableTHProps>(function TableTH(\n { children, canSort, isSorted, isSticky, isDescending, helpText, align, size, ...props },\n ref,\n) {\n return (\n <TableHeaderCell\n sortable={canSort}\n sortDirection={canSort && isSorted ? (isDescending ? 'desc' : 'asc') : false}\n ref={ref}\n isSticky={isSticky}\n align={align}\n size={size}\n {...props}\n >\n {/ We have to wrap the children to make it easier to use tooltips /}\n <span className='th__text'>{children}</span>\n {helpText && <StyledHelperTooltip size='sm'>{helpText}</StyledHelperTooltip>}\n </TableHeaderCell>\n );\n});\n\nexport default TableTH;\n","import type { ComponentPropsWithoutRef, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\nimport { Paragraph } from 'design-system/components/Text';\nimport { paragraphMixins } from 'design-system/mixins/text';\nimport { BASE } from 'design-system/variables/spacing';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\nimport TableRow from './TableRow';\nimport TableTH from './TableTH';\n\nexport interface TableCellProps {\n breakWord?: boolean;\n size?: 'sm' \| 'md';\n}\n\nconst TableCell = styled.td.attrs({ role: 'cell' })<TableCellProps>`\n display: table-cell;\n vertical-align: middle;\n / Self-contained box model: don't depend on a consumer's global\n border-box reset, so a fixed cell height includes its padding + border\n and rows stay compact. /\n box-sizing: border-box;\n\n border-bottom: 1px solid ${({ theme }) => theme.color.border.primary};\n text-align: left;\n padding: ${({ size }) => (size === 'sm' ? BASE : BASE 1.5)}px;\n color: ${({ theme }) => theme.color.text.primary};\n white-space: nowrap;\n ${paragraphMixins.md};\n line-height: 1;\n ${({ breakWord }) =>\n breakWord\n ? `white-space: normal;\n overflow-wrap: break-word;`\n : ''}\n`;\n\nexport default TableCell;\n\nconst CellTitleContainer = styled.div`\n display: flex;\n flex-direction: column;\n`;\n\nconst CellTitle = styled(Paragraph).attrs({ color: 'primary' })`\n display: flex;\n align-items: center;\n gap: ${Spacing[2]};\n`;\n\ninterface TableCellTitleProps extends ComponentPropsWithoutRef<'div'> {\n subtitle?: ReactNode;\n}\n\nexport const TableCellTitle = ({ children, subtitle, ...elemProps }: TableCellTitleProps) => {\n return (\n <CellTitleContainer {...elemProps}>\n <CellTitle>{children}</CellTitle>\n {subtitle && <Paragraph>{subtitle}</Paragraph>}\n </CellTitleContainer>\n );\n};\n\nexport const TableTD = styled(TableCell)<{ unclickable?: boolean }>`\n white-space: normal;\n overflow-wrap: break-word;\n ${(props) =>\n props.unclickable &&\n css`\n cursor: default;\n `}\n`;\n\nexport const TableIconTD = styled(TableTD)`\n text-align: right;\n line-height: 0; /* To center icon; cannot use flex here */\n padding: 0;\n padding-left: ${Spacing[4]};\n width: 36px;\n`;\n\nexport const TableActionTD = styled(TableTD)`\n text-align: right;\n padding: 0;\n padding-right: ${Spacing[4]};\n width: 48px;\n`;\n\nexport const StickyTD = styled(TableTD)<{\n left?: number;\n hasRightBorder?: boolean;\n}>`\n position: sticky;\n left: ${({ left = 0 }) => `${left}px`}; // Default to 0 if not specified\n background-color: ${({ theme }) => theme.color.background.primary};\n\n ${({ hasRightBorder, theme }) =>\n hasRightBorder && `border-right: 2px solid ${theme.color.border.primary};`}\n z-index: 2;\n`;\n\nexport const StickyTH = styled(TableTH)<{\n left?: number;\n hasRightBorder?: boolean;\n size?: 'sm' \| 'md';\n}>`\n position: sticky;\n left: ${({ left = 0 }) => `${left}px`}; // Default to 0 if not specified\n z-index: 2;\n max-width: 10%;\n background-color: ${({ theme }) => theme.color.background.secondary};\n ${({ hasRightBorder, theme }) =>\n hasRightBorder && `border-right: 2px solid ${theme.color.border.primary};`}\n`;\n\nexport const TableTR = styled(TableRow)<{ disableHoverBackground?: boolean; $isActive?: boolean }>`\n ${({ disableHoverBackground }) =>\n disableHoverBackground &&\n css`\n &:hover {\n background-color: transparent !important;\n }\n `}\n\n ${({ $isActive }) =>\n $isActive &&\n css`\n background-color: ${({ theme }) => theme.color.background.highlight};\n &:hover {\n background-color: ${({ theme }) => theme.color.background.highlight};\n }\n `}\n\n ${({ onClick, disableHoverBackground, $isActive }) =>\n onClick != null &&\n !disableHoverBackground &&\n !$isActive &&\n css`\n cursor: pointer;\n :hover {\n background-color: ${({ theme }) => theme.color.background.highlight};\n }\n transition-duration: ${TransitionDuration.Fast};\n `}\n`;\n","import styled, { css } from 'styled-components';\n\ninterface TableHeadProps {\n sticky?: boolean;\n}\n\nconst TableHead = styled.thead.attrs({ role: 'rowgroup' })<TableHeadProps>`\n display: table-header-group;\n ${({ sticky }) =>\n sticky &&\n css`\n position: sticky;\n top: 0;\n z-index: 1;\n `}\n`;\n\nexport default TableHead;\n","import styled from 'styled-components';\n\nconst TableBody = styled.tbody.attrs({ role: 'rowgroup' })`\n display: table-row-group;\n`;\n\nexport default TableBody;\n","import type { FC, PropsWithChildren, ReactNode } from 'react';\nimport styled, { keyframes } from 'styled-components';\n\nimport { Color, Spacing } from '@persona/design-tokens';\nimport { Spinner } from 'design-system/components/Spinner';\nimport Table, { TableHead, TableRow } from 'design-system/components/Table';\nimport { Z_INDICES } from 'design-system/lib/zindex';\nimport { fadeIn } from 'design-system/variables/keyframes';\n\nconst Container = styled.div<{ maxHeight?: number }>`\n position: relative;\n z-index: 0;\n overflow-x: auto;\n ${({ maxHeight }) => {\n if (maxHeight != null) {\n return `max-height: ${maxHeight}px;`;\n }\n }}\n `;\n\nconst slideKeyframes = keyframes`\n 0% {\n transform: translateX(-50%) scaleX(0);\n }\n 50% {\n transform: translateX(0) scaleX(1);\n }\n 100% {\n transform: translateX(50%) scaleX(0);\n }\n `;\n\nconst Loader = styled.div`\n position: absolute;\n z-index: ${Z_INDICES.loadingOverlays};\n border-bottom: 3px solid ${({ theme }) => theme.color.primary.brand};\n width: 100%;\n \n animation: ${slideKeyframes} 3s infinite cubic-bezier(0.5, 0, 0.5, 1);\n `;\n\nconst Overlay = styled.div`\n position: absolute;\n z-index: ${Z_INDICES.loadingOverlays};\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: ${({ theme }) => theme.color.primary.white};\n opacity: 50%;\n `;\n\nconst SpinnerWrapper = styled.div`\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: ${Spacing[5]} 0;\n animation: ${fadeIn} 1s;\n animation-delay: 0.5s;\n animation-fill-mode: backwards;\n `;\n\nconst TableSpinner = styled(Spinner)`\n svg {\n width: 120px;\n height: 120px;\n }\n \n path {\n stroke: ${Color.CorePurple500};\n stroke-width: 0.46;\n }\n `;\n\ninterface TableLayoutProps {\n className?: string;\n containerMaxHeight?: number;\n dataTest?: string;\n headerTR: JSX.Element;\n isEmpty?: boolean;\n isLoading?: boolean;\n nullState: ReactNode;\n showHeader?: boolean;\n size?: 'sm' \| 'md';\n stickyHeader?: boolean;\n}\n\nconst TableLayout: FC<PropsWithChildren<TableLayoutProps>> = ({\n children,\n className,\n containerMaxHeight,\n dataTest,\n headerTR,\n isEmpty,\n isLoading,\n nullState,\n showHeader,\n size = 'md',\n stickyHeader = false,\n}) => {\n if (isEmpty && !showHeader) {\n if (isLoading) {\n return (\n <SpinnerWrapper\n role='status'\n aria-live='polite'\n aria-busy='true'\n aria-label='Loading...'\n data-loading-indicator='true'\n >\n <TableSpinner size='md' />\n </SpinnerWrapper>\n );\n } else {\n return <Container data-test={dataTest}>{nullState}</Container>;\n }\n }\n\n return (\n <Container data-test={dataTest} maxHeight={containerMaxHeight} className={className}>\n {isLoading && <Loader data-test='table-layout__loader' />}\n {isLoading && <Overlay />}\n\n <Table size={size} aria-busy={isLoading \|\| undefined}>\n <TableHead sticky={stickyHeader}>\n <TableRow>{headerTR}</TableRow>\n </TableHead>\n {!isEmpty && children}\n </Table>\n\n {isEmpty && nullState}\n </Container>\n );\n};\n\nexport default TableLayout;\n"],"mappings":"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"}
1	+ {"version":3,"file":"Table-C9rjUVpn.cjs","names":["slideKeyframes","paragraphMixins","Spacing","paragraphMixins","Spacing","CaretUpIcon","CaretDownIcon","isHovered","isFocusedVisible","HelperTooltip","Spacing","paragraphMixins","Paragraph","Spacing","Z_INDICES","Spacing","fadeIn","Spinner","Color"],"sources":["../components/Table/Table.tsx","../components/Table/TableHeaderCell.tsx","../components/Table/TableRow.tsx","../components/Table/TableTH.tsx","../components/Table/TableCell.tsx","../components/Table/TableHead.tsx","../components/Table/TableBody.tsx","../components/Table/TableLayout.tsx"],"sourcesContent":["import styled, { css, keyframes } from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\nimport { paragraphMixins } from 'design-system/mixins/text';\n\ninterface TableProps {\n size?: 'sm' \| 'md';\n isLoading?: boolean;\n}\n\nconst slideKeyframes = keyframes`\n 0% {\n transform: translateX(-50%) scaleX(0);\n }\n 50% {\n transform: translateX(0) scaleX(1);\n }\n 100% {\n transform: translateX(50%) scaleX(0);\n }\n`;\n\nexport const Table = styled.table.attrs({ role: 'table' })<TableProps>`\n display: table;\n width: 100%;\n border-spacing: 0;\n ${paragraphMixins.md};\n\n ${({ size }) =>\n size === 'sm' &&\n css`\n td,\n th {\n padding: ${Spacing[2]};\n }\n `}\n\n ${({ isLoading }) =>\n isLoading &&\n css`\n thead {\n &:after {\n content: '';\n display: block;\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n border-bottom: 3px solid ${({ theme }) => theme.color.primary.brand};\n animation: ${slideKeyframes} 3s infinite cubic-bezier(0.5, 0, 0.5, 1);\n }\n }\n `}\n`;\n\nexport default Table;\n","import { type ComponentPropsWithoutRef, forwardRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\nimport { CaretDownIcon, CaretUpIcon } from '@persona/icons';\nimport { paragraphMixins } from 'design-system/mixins/text';\nimport { BASE } from 'design-system/variables/spacing';\n\ninterface TableHeaderCellProps {\n size?: 'sm' \| 'md';\n sortable?: boolean;\n width?: 'auto' \| 'min' \| 'max' \| string;\n isSticky?: boolean;\n align?: 'left' \| 'right';\n}\n\nconst StyledTableHeaderCell = styled.th<TableHeaderCellProps>`\n display: table-cell;\n /* Self-contained box model: don't depend on a consumer's global\n border-box reset, so header padding + border are included in the\n declared width/height. /\n box-sizing: border-box;\n\n background-color: ${({ theme }) => theme.color.background.secondary};\n padding: ${({ size }) => (size === 'sm' ? BASE : BASE 1.5)}px;\n text-align: left;\n white-space: nowrap;\n ${({ size }) => (size === 'sm' ? paragraphMixins.sm : paragraphMixins.md)};\n line-height: 1;\n width: ${({ width }) => {\n switch (width) {\n case 'min':\n return '1px';\n case 'max':\n return '100%';\n default:\n if (width) {\n return width;\n } else {\n return 'auto';\n }\n }\n }};\n\n &:first-child {\n border-radius: ${({ theme }) =>\n `${theme.element.borderRadius} 0 0 ${theme.element.borderRadius}`};\n }\n\n &:last-child {\n border-radius: ${({ theme }) =>\n `0 ${theme.element.borderRadius} ${theme.element.borderRadius} 0`};\n }\n\n ${({ sortable }) =>\n sortable &&\n css`\n cursor: pointer;\n\n &:hover ${TableIconContainer} {\n display: inline;\n visibility: visible;\n }\n `};\n\n ${({ isSticky }) =>\n isSticky\n ? css`\n position: sticky;\n top: 0;\n z-index: 1;\n `\n : css`\n position: relative;\n `}\n`;\n\nconst VerticalAlign = styled.div<{ $align?: TableHeaderCellProps['align'] }>`\n display: flex;\n align-items: center;\n gap: ${Spacing[1]};\n flex-direction: ${({ $align }) => ($align === 'right' ? 'row-reverse' : 'row')};\n`;\n\ninterface TableIconContainerProps {\n sortDirection?: 'asc' \| 'desc' \| false;\n}\n\nconst TableIconContainer = styled('div')<TableIconContainerProps>`\n display: inline-block;\n\n ${({ sortDirection }) => {\n if (sortDirection) {\n return css`\n display: inline;\n `;\n } else {\n return css`\n display: inline;\n visibility: hidden;\n color: ${({ theme }) => theme.color.text.disabled};\n `;\n }\n }};\n`;\n\nconst TableHeaderCell = forwardRef<\n HTMLTableCellElement,\n ComponentPropsWithoutRef<'th'> & TableHeaderCellProps & TableIconContainerProps\n>(function TableHeaderCell({ sortable, sortDirection, children, align, ...elemProps }, ref) {\n let ariaSort: 'none' \| 'ascending' \| 'descending' \| 'other' = 'none';\n\n if (sortable && sortDirection) {\n ariaSort = sortDirection === 'asc' ? 'ascending' : 'descending';\n }\n\n return (\n <StyledTableHeaderCell\n sortable={sortable}\n aria-sort={ariaSort}\n role='columnheader'\n {...elemProps}\n ref={ref}\n >\n <VerticalAlign $align={align}>\n {children}\n {sortable && (\n <TableIconContainer sortDirection={sortDirection}>\n {sortDirection === 'asc' ? <CaretUpIcon /> : <CaretDownIcon />}\n </TableIconContainer>\n )}\n </VerticalAlign>\n </StyledTableHeaderCell>\n );\n});\n\nexport default TableHeaderCell;\n","import styled, { css } from 'styled-components';\n\nimport { isFocusedVisible, isHovered } from 'design-system/lib/pseudoClass';\nimport type PseudoClassProps from 'design-system/types/PseudoClassProps';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\nexport interface TableRowProps extends PseudoClassProps {\n disableHoverBackground?: boolean;\n}\n\nconst TableRow = styled.tr.attrs({\n role: 'row',\n})<TableRowProps>`\n display: table-row;\n\n ${({ onClick }) =>\n onClick != null &&\n css`\n cursor: pointer;\n `}\n\n ${({ disableHoverBackground, theme }) =>\n !disableHoverBackground &&\n css`\n &${isHovered} {\n background-color: ${theme.color.background.highlight};\n transition-duration: ${TransitionDuration.Fast};\n }\n `}\n\n ${isFocusedVisible}\n`;\n\nexport default TableRow;\n","import { type ComponentPropsWithoutRef, forwardRef, type ReactNode } from 'react';\nimport styled from 'styled-components';\n\nimport { TableHeaderCell } from '@persona/design-system/components/Table';\nimport { HelperTooltip } from '@persona/design-system/components/Tooltip';\nimport { Spacing } from '@persona/design-tokens';\n\nconst StyledHelperTooltip = styled(HelperTooltip)`\n height: 14px;\n margin-left: ${Spacing[1]};\n`;\n\nexport interface TableTHProps extends ComponentPropsWithoutRef<typeof TableHeaderCell> {\n canSort?: boolean;\n isSorted?: boolean;\n isDescending?: boolean;\n isSticky?: boolean;\n /*\n Display help icon and tooltip for column header\n /\n helpText?: ReactNode;\n align?: 'left' \| 'right';\n size?: 'sm' \| 'md';\n}\n\nconst TableTH = forwardRef<HTMLTableCellElement, TableTHProps>(function TableTH(\n { children, canSort, isSorted, isSticky, isDescending, helpText, align, size, ...props },\n ref,\n) {\n return (\n <TableHeaderCell\n sortable={canSort}\n sortDirection={canSort && isSorted ? (isDescending ? 'desc' : 'asc') : false}\n ref={ref}\n isSticky={isSticky}\n align={align}\n size={size}\n {...props}\n >\n {/ We have to wrap the children to make it easier to use tooltips /}\n <span className='th__text'>{children}</span>\n {helpText && <StyledHelperTooltip size='sm'>{helpText}</StyledHelperTooltip>}\n </TableHeaderCell>\n );\n});\n\nexport default TableTH;\n","import type { ComponentPropsWithoutRef, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\nimport { Paragraph } from 'design-system/components/Text';\nimport { paragraphMixins } from 'design-system/mixins/text';\nimport { BASE } from 'design-system/variables/spacing';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\nimport TableRow from './TableRow';\nimport TableTH from './TableTH';\n\nexport interface TableCellProps {\n breakWord?: boolean;\n size?: 'sm' \| 'md';\n}\n\nconst TableCell = styled.td.attrs({ role: 'cell' })<TableCellProps>`\n display: table-cell;\n vertical-align: middle;\n / Self-contained box model: don't depend on a consumer's global\n border-box reset, so a fixed cell height includes its padding + border\n and rows stay compact. /\n box-sizing: border-box;\n\n border-bottom: 1px solid ${({ theme }) => theme.color.border.primary};\n text-align: left;\n padding: ${({ size }) => (size === 'sm' ? BASE : BASE 1.5)}px;\n color: ${({ theme }) => theme.color.text.primary};\n white-space: nowrap;\n ${paragraphMixins.md};\n line-height: 1;\n ${({ breakWord }) =>\n breakWord\n ? `white-space: normal;\n overflow-wrap: break-word;`\n : ''}\n`;\n\nexport default TableCell;\n\nconst CellTitleContainer = styled.div`\n display: flex;\n flex-direction: column;\n`;\n\nconst CellTitle = styled(Paragraph).attrs({ color: 'primary' })`\n display: flex;\n align-items: center;\n gap: ${Spacing[2]};\n`;\n\ninterface TableCellTitleProps extends ComponentPropsWithoutRef<'div'> {\n subtitle?: ReactNode;\n}\n\nexport const TableCellTitle = ({ children, subtitle, ...elemProps }: TableCellTitleProps) => {\n return (\n <CellTitleContainer {...elemProps}>\n <CellTitle>{children}</CellTitle>\n {subtitle && <Paragraph>{subtitle}</Paragraph>}\n </CellTitleContainer>\n );\n};\n\nexport const TableTD = styled(TableCell)<{ unclickable?: boolean }>`\n white-space: normal;\n overflow-wrap: break-word;\n ${(props) =>\n props.unclickable &&\n css`\n cursor: default;\n `}\n`;\n\nexport const TableIconTD = styled(TableTD)`\n text-align: right;\n line-height: 0; /* To center icon; cannot use flex here */\n padding: 0;\n padding-left: ${Spacing[4]};\n width: 36px;\n`;\n\nexport const TableActionTD = styled(TableTD)`\n text-align: right;\n padding: 0;\n padding-right: ${Spacing[4]};\n width: 48px;\n`;\n\nexport const StickyTD = styled(TableTD)<{\n left?: number;\n hasRightBorder?: boolean;\n}>`\n position: sticky;\n left: ${({ left = 0 }) => `${left}px`}; // Default to 0 if not specified\n background-color: ${({ theme }) => theme.color.background.primary};\n\n ${({ hasRightBorder, theme }) =>\n hasRightBorder && `border-right: 2px solid ${theme.color.border.primary};`}\n z-index: 2;\n`;\n\nexport const StickyTH = styled(TableTH)<{\n left?: number;\n hasRightBorder?: boolean;\n size?: 'sm' \| 'md';\n}>`\n position: sticky;\n left: ${({ left = 0 }) => `${left}px`}; // Default to 0 if not specified\n z-index: 2;\n max-width: 10%;\n background-color: ${({ theme }) => theme.color.background.secondary};\n ${({ hasRightBorder, theme }) =>\n hasRightBorder && `border-right: 2px solid ${theme.color.border.primary};`}\n`;\n\nexport const TableTR = styled(TableRow)<{ disableHoverBackground?: boolean; $isActive?: boolean }>`\n ${({ disableHoverBackground }) =>\n disableHoverBackground &&\n css`\n &:hover {\n background-color: transparent !important;\n }\n `}\n\n ${({ $isActive }) =>\n $isActive &&\n css`\n background-color: ${({ theme }) => theme.color.background.highlight};\n &:hover {\n background-color: ${({ theme }) => theme.color.background.highlight};\n }\n `}\n\n ${({ onClick, disableHoverBackground, $isActive }) =>\n onClick != null &&\n !disableHoverBackground &&\n !$isActive &&\n css`\n cursor: pointer;\n :hover {\n background-color: ${({ theme }) => theme.color.background.highlight};\n }\n transition-duration: ${TransitionDuration.Fast};\n `}\n`;\n","import styled, { css } from 'styled-components';\n\ninterface TableHeadProps {\n sticky?: boolean;\n}\n\nconst TableHead = styled.thead.attrs({ role: 'rowgroup' })<TableHeadProps>`\n display: table-header-group;\n ${({ sticky }) =>\n sticky &&\n css`\n position: sticky;\n top: 0;\n z-index: 1;\n `}\n`;\n\nexport default TableHead;\n","import styled from 'styled-components';\n\nconst TableBody = styled.tbody.attrs({ role: 'rowgroup' })`\n display: table-row-group;\n`;\n\nexport default TableBody;\n","import type { FC, PropsWithChildren, ReactNode } from 'react';\nimport styled, { keyframes } from 'styled-components';\n\nimport { Color, Spacing } from '@persona/design-tokens';\nimport { Spinner } from 'design-system/components/Spinner';\nimport Table, { TableHead, TableRow } from 'design-system/components/Table';\nimport { Z_INDICES } from 'design-system/lib/zindex';\nimport { fadeIn } from 'design-system/variables/keyframes';\n\nconst Container = styled.div<{ maxHeight?: number }>`\n position: relative;\n z-index: 0;\n overflow-x: auto;\n ${({ maxHeight }) => {\n if (maxHeight != null) {\n return `max-height: ${maxHeight}px;`;\n }\n }}\n `;\n\nconst slideKeyframes = keyframes`\n 0% {\n transform: translateX(-50%) scaleX(0);\n }\n 50% {\n transform: translateX(0) scaleX(1);\n }\n 100% {\n transform: translateX(50%) scaleX(0);\n }\n `;\n\nconst Loader = styled.div`\n position: absolute;\n z-index: ${Z_INDICES.loadingOverlays};\n border-bottom: 3px solid ${({ theme }) => theme.color.primary.brand};\n width: 100%;\n \n animation: ${slideKeyframes} 3s infinite cubic-bezier(0.5, 0, 0.5, 1);\n `;\n\nconst Overlay = styled.div`\n position: absolute;\n z-index: ${Z_INDICES.loadingOverlays};\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: ${({ theme }) => theme.color.primary.white};\n opacity: 50%;\n `;\n\nconst SpinnerWrapper = styled.div`\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: ${Spacing[5]} 0;\n animation: ${fadeIn} 1s;\n animation-delay: 0.5s;\n animation-fill-mode: backwards;\n `;\n\nconst TableSpinner = styled(Spinner)`\n svg {\n width: 120px;\n height: 120px;\n }\n \n path {\n stroke: ${Color.CorePurple500};\n stroke-width: 0.46;\n }\n `;\n\ninterface TableLayoutProps {\n className?: string;\n containerMaxHeight?: number;\n dataTest?: string;\n headerTR: JSX.Element;\n isEmpty?: boolean;\n isLoading?: boolean;\n nullState: ReactNode;\n showHeader?: boolean;\n size?: 'sm' \| 'md';\n stickyHeader?: boolean;\n}\n\nconst TableLayout: FC<PropsWithChildren<TableLayoutProps>> = ({\n children,\n className,\n containerMaxHeight,\n dataTest,\n headerTR,\n isEmpty,\n isLoading,\n nullState,\n showHeader,\n size = 'md',\n stickyHeader = false,\n}) => {\n if (isEmpty && !showHeader) {\n if (isLoading) {\n return (\n <SpinnerWrapper\n role='status'\n aria-live='polite'\n aria-busy='true'\n aria-label='Loading...'\n data-loading-indicator='true'\n >\n <TableSpinner size='md' />\n </SpinnerWrapper>\n );\n } else {\n return <Container data-test={dataTest}>{nullState}</Container>;\n }\n }\n\n return (\n <Container data-test={dataTest} maxHeight={containerMaxHeight} className={className}>\n {isLoading && <Loader data-test='table-layout__loader' />}\n {isLoading && <Overlay />}\n\n <Table size={size} aria-busy={isLoading \|\| undefined}>\n <TableHead sticky={stickyHeader}>\n <TableRow>{headerTR}</TableRow>\n </TableHead>\n {!isEmpty && children}\n </Table>\n\n {isEmpty && nullState}\n </Container>\n );\n};\n\nexport default TableLayout;\n"],"mappings":"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"}

package/dist/{Table-CGtyWI6V.mjs → Table-CNs8p8hL.mjs} RENAMED Viewed

@@ -6,7 +6,7 @@ import { i as Paragraph } from "./Text-hEoPeOc9.mjs";
 import { fadeIn } from "./variables/keyframes.mjs";
 import { r as HelperTooltip } from "./Tooltip-CDvOu1UN.mjs";
 import { Z_INDICES } from "./lib/zindex.mjs";
-import { t as Spinner } from "./Spinner-D9-u_5zS.mjs";
+import { t as Spinner } from "./Spinner-BEPF42RW.mjs";
 import { Color, Spacing } from "@persona/design-tokens";
 import styled, { css, keyframes } from "styled-components";
 import { forwardRef } from "react";
@@ -384,4 +384,4 @@ const TableLayout = ({ children, className, containerMaxHeight, dataTest, header
 //#endregion
 export { StickyTH as a, TableCellTitle as c, TableTR as d, TableTH as f, Table as h, StickyTD as i, TableIconTD as l, TableHeaderCell as m, TableBody as n, TableActionTD as o, TableRow as p, TableHead as r, TableCell as s, TableLayout as t, TableTD as u };
-//# sourceMappingURL=Table-CGtyWI6V.mjs.map
+//# sourceMappingURL=Table-CNs8p8hL.mjs.map

package/dist/{Table-CGtyWI6V.mjs.map → Table-CNs8p8hL.mjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Table-CGtyWI6V.mjs","names":["slideKeyframes"],"sources":["../components/Table/Table.tsx","../components/Table/TableHeaderCell.tsx","../components/Table/TableRow.tsx","../components/Table/TableTH.tsx","../components/Table/TableCell.tsx","../components/Table/TableHead.tsx","../components/Table/TableBody.tsx","../components/Table/TableLayout.tsx"],"sourcesContent":["import styled, { css, keyframes } from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\nimport { paragraphMixins } from 'design-system/mixins/text';\n\ninterface TableProps {\n size?: 'sm' \| 'md';\n isLoading?: boolean;\n}\n\nconst slideKeyframes = keyframes`\n 0% {\n transform: translateX(-50%) scaleX(0);\n }\n 50% {\n transform: translateX(0) scaleX(1);\n }\n 100% {\n transform: translateX(50%) scaleX(0);\n }\n`;\n\nexport const Table = styled.table.attrs({ role: 'table' })<TableProps>`\n display: table;\n width: 100%;\n border-spacing: 0;\n ${paragraphMixins.md};\n\n ${({ size }) =>\n size === 'sm' &&\n css`\n td,\n th {\n padding: ${Spacing[2]};\n }\n `}\n\n ${({ isLoading }) =>\n isLoading &&\n css`\n thead {\n &:after {\n content: '';\n display: block;\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n border-bottom: 3px solid ${({ theme }) => theme.color.primary.brand};\n animation: ${slideKeyframes} 3s infinite cubic-bezier(0.5, 0, 0.5, 1);\n }\n }\n `}\n`;\n\nexport default Table;\n","import { type ComponentPropsWithoutRef, forwardRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\nimport { CaretDownIcon, CaretUpIcon } from '@persona/icons';\nimport { paragraphMixins } from 'design-system/mixins/text';\nimport { BASE } from 'design-system/variables/spacing';\n\ninterface TableHeaderCellProps {\n size?: 'sm' \| 'md';\n sortable?: boolean;\n width?: 'auto' \| 'min' \| 'max' \| string;\n isSticky?: boolean;\n align?: 'left' \| 'right';\n}\n\nconst StyledTableHeaderCell = styled.th<TableHeaderCellProps>`\n display: table-cell;\n /* Self-contained box model: don't depend on a consumer's global\n border-box reset, so header padding + border are included in the\n declared width/height. /\n box-sizing: border-box;\n\n background-color: ${({ theme }) => theme.color.background.secondary};\n padding: ${({ size }) => (size === 'sm' ? BASE : BASE 1.5)}px;\n text-align: left;\n white-space: nowrap;\n ${({ size }) => (size === 'sm' ? paragraphMixins.sm : paragraphMixins.md)};\n line-height: 1;\n width: ${({ width }) => {\n switch (width) {\n case 'min':\n return '1px';\n case 'max':\n return '100%';\n default:\n if (width) {\n return width;\n } else {\n return 'auto';\n }\n }\n }};\n\n &:first-child {\n border-radius: ${({ theme }) =>\n `${theme.element.borderRadius} 0 0 ${theme.element.borderRadius}`};\n }\n\n &:last-child {\n border-radius: ${({ theme }) =>\n `0 ${theme.element.borderRadius} ${theme.element.borderRadius} 0`};\n }\n\n ${({ sortable }) =>\n sortable &&\n css`\n cursor: pointer;\n\n &:hover ${TableIconContainer} {\n display: inline;\n visibility: visible;\n }\n `};\n\n ${({ isSticky }) =>\n isSticky\n ? css`\n position: sticky;\n top: 0;\n z-index: 1;\n `\n : css`\n position: relative;\n `}\n`;\n\nconst VerticalAlign = styled.div<{ $align?: TableHeaderCellProps['align'] }>`\n display: flex;\n align-items: center;\n gap: ${Spacing[1]};\n flex-direction: ${({ $align }) => ($align === 'right' ? 'row-reverse' : 'row')};\n`;\n\ninterface TableIconContainerProps {\n sortDirection?: 'asc' \| 'desc' \| false;\n}\n\nconst TableIconContainer = styled('div')<TableIconContainerProps>`\n display: inline-block;\n\n ${({ sortDirection }) => {\n if (sortDirection) {\n return css`\n display: inline;\n `;\n } else {\n return css`\n display: inline;\n visibility: hidden;\n color: ${({ theme }) => theme.color.text.disabled};\n `;\n }\n }};\n`;\n\nconst TableHeaderCell = forwardRef<\n HTMLTableCellElement,\n ComponentPropsWithoutRef<'th'> & TableHeaderCellProps & TableIconContainerProps\n>(function TableHeaderCell({ sortable, sortDirection, children, align, ...elemProps }, ref) {\n let ariaSort: 'none' \| 'ascending' \| 'descending' \| 'other' = 'none';\n\n if (sortable && sortDirection) {\n ariaSort = sortDirection === 'asc' ? 'ascending' : 'descending';\n }\n\n return (\n <StyledTableHeaderCell\n sortable={sortable}\n aria-sort={ariaSort}\n role='columnheader'\n {...elemProps}\n ref={ref}\n >\n <VerticalAlign $align={align}>\n {children}\n {sortable && (\n <TableIconContainer sortDirection={sortDirection}>\n {sortDirection === 'asc' ? <CaretUpIcon /> : <CaretDownIcon />}\n </TableIconContainer>\n )}\n </VerticalAlign>\n </StyledTableHeaderCell>\n );\n});\n\nexport default TableHeaderCell;\n","import styled, { css } from 'styled-components';\n\nimport { isFocusedVisible, isHovered } from 'design-system/lib/pseudoClass';\nimport type PseudoClassProps from 'design-system/types/PseudoClassProps';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\nexport interface TableRowProps extends PseudoClassProps {\n disableHoverBackground?: boolean;\n}\n\nconst TableRow = styled.tr.attrs({\n role: 'row',\n})<TableRowProps>`\n display: table-row;\n\n ${({ onClick }) =>\n onClick != null &&\n css`\n cursor: pointer;\n `}\n\n ${({ disableHoverBackground, theme }) =>\n !disableHoverBackground &&\n css`\n &${isHovered} {\n background-color: ${theme.color.background.highlight};\n transition-duration: ${TransitionDuration.Fast};\n }\n `}\n\n ${isFocusedVisible}\n`;\n\nexport default TableRow;\n","import { type ComponentPropsWithoutRef, forwardRef, type ReactNode } from 'react';\nimport styled from 'styled-components';\n\nimport { TableHeaderCell } from '@persona/design-system/components/Table';\nimport { HelperTooltip } from '@persona/design-system/components/Tooltip';\nimport { Spacing } from '@persona/design-tokens';\n\nconst StyledHelperTooltip = styled(HelperTooltip)`\n height: 14px;\n margin-left: ${Spacing[1]};\n`;\n\nexport interface TableTHProps extends ComponentPropsWithoutRef<typeof TableHeaderCell> {\n canSort?: boolean;\n isSorted?: boolean;\n isDescending?: boolean;\n isSticky?: boolean;\n /*\n Display help icon and tooltip for column header\n /\n helpText?: ReactNode;\n align?: 'left' \| 'right';\n size?: 'sm' \| 'md';\n}\n\nconst TableTH = forwardRef<HTMLTableCellElement, TableTHProps>(function TableTH(\n { children, canSort, isSorted, isSticky, isDescending, helpText, align, size, ...props },\n ref,\n) {\n return (\n <TableHeaderCell\n sortable={canSort}\n sortDirection={canSort && isSorted ? (isDescending ? 'desc' : 'asc') : false}\n ref={ref}\n isSticky={isSticky}\n align={align}\n size={size}\n {...props}\n >\n {/ We have to wrap the children to make it easier to use tooltips /}\n <span className='th__text'>{children}</span>\n {helpText && <StyledHelperTooltip size='sm'>{helpText}</StyledHelperTooltip>}\n </TableHeaderCell>\n );\n});\n\nexport default TableTH;\n","import type { ComponentPropsWithoutRef, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\nimport { Paragraph } from 'design-system/components/Text';\nimport { paragraphMixins } from 'design-system/mixins/text';\nimport { BASE } from 'design-system/variables/spacing';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\nimport TableRow from './TableRow';\nimport TableTH from './TableTH';\n\nexport interface TableCellProps {\n breakWord?: boolean;\n size?: 'sm' \| 'md';\n}\n\nconst TableCell = styled.td.attrs({ role: 'cell' })<TableCellProps>`\n display: table-cell;\n vertical-align: middle;\n / Self-contained box model: don't depend on a consumer's global\n border-box reset, so a fixed cell height includes its padding + border\n and rows stay compact. /\n box-sizing: border-box;\n\n border-bottom: 1px solid ${({ theme }) => theme.color.border.primary};\n text-align: left;\n padding: ${({ size }) => (size === 'sm' ? BASE : BASE 1.5)}px;\n color: ${({ theme }) => theme.color.text.primary};\n white-space: nowrap;\n ${paragraphMixins.md};\n line-height: 1;\n ${({ breakWord }) =>\n breakWord\n ? `white-space: normal;\n overflow-wrap: break-word;`\n : ''}\n`;\n\nexport default TableCell;\n\nconst CellTitleContainer = styled.div`\n display: flex;\n flex-direction: column;\n`;\n\nconst CellTitle = styled(Paragraph).attrs({ color: 'primary' })`\n display: flex;\n align-items: center;\n gap: ${Spacing[2]};\n`;\n\ninterface TableCellTitleProps extends ComponentPropsWithoutRef<'div'> {\n subtitle?: ReactNode;\n}\n\nexport const TableCellTitle = ({ children, subtitle, ...elemProps }: TableCellTitleProps) => {\n return (\n <CellTitleContainer {...elemProps}>\n <CellTitle>{children}</CellTitle>\n {subtitle && <Paragraph>{subtitle}</Paragraph>}\n </CellTitleContainer>\n );\n};\n\nexport const TableTD = styled(TableCell)<{ unclickable?: boolean }>`\n white-space: normal;\n overflow-wrap: break-word;\n ${(props) =>\n props.unclickable &&\n css`\n cursor: default;\n `}\n`;\n\nexport const TableIconTD = styled(TableTD)`\n text-align: right;\n line-height: 0; /* To center icon; cannot use flex here */\n padding: 0;\n padding-left: ${Spacing[4]};\n width: 36px;\n`;\n\nexport const TableActionTD = styled(TableTD)`\n text-align: right;\n padding: 0;\n padding-right: ${Spacing[4]};\n width: 48px;\n`;\n\nexport const StickyTD = styled(TableTD)<{\n left?: number;\n hasRightBorder?: boolean;\n}>`\n position: sticky;\n left: ${({ left = 0 }) => `${left}px`}; // Default to 0 if not specified\n background-color: ${({ theme }) => theme.color.background.primary};\n\n ${({ hasRightBorder, theme }) =>\n hasRightBorder && `border-right: 2px solid ${theme.color.border.primary};`}\n z-index: 2;\n`;\n\nexport const StickyTH = styled(TableTH)<{\n left?: number;\n hasRightBorder?: boolean;\n size?: 'sm' \| 'md';\n}>`\n position: sticky;\n left: ${({ left = 0 }) => `${left}px`}; // Default to 0 if not specified\n z-index: 2;\n max-width: 10%;\n background-color: ${({ theme }) => theme.color.background.secondary};\n ${({ hasRightBorder, theme }) =>\n hasRightBorder && `border-right: 2px solid ${theme.color.border.primary};`}\n`;\n\nexport const TableTR = styled(TableRow)<{ disableHoverBackground?: boolean; $isActive?: boolean }>`\n ${({ disableHoverBackground }) =>\n disableHoverBackground &&\n css`\n &:hover {\n background-color: transparent !important;\n }\n `}\n\n ${({ $isActive }) =>\n $isActive &&\n css`\n background-color: ${({ theme }) => theme.color.background.highlight};\n &:hover {\n background-color: ${({ theme }) => theme.color.background.highlight};\n }\n `}\n\n ${({ onClick, disableHoverBackground, $isActive }) =>\n onClick != null &&\n !disableHoverBackground &&\n !$isActive &&\n css`\n cursor: pointer;\n :hover {\n background-color: ${({ theme }) => theme.color.background.highlight};\n }\n transition-duration: ${TransitionDuration.Fast};\n `}\n`;\n","import styled, { css } from 'styled-components';\n\ninterface TableHeadProps {\n sticky?: boolean;\n}\n\nconst TableHead = styled.thead.attrs({ role: 'rowgroup' })<TableHeadProps>`\n display: table-header-group;\n ${({ sticky }) =>\n sticky &&\n css`\n position: sticky;\n top: 0;\n z-index: 1;\n `}\n`;\n\nexport default TableHead;\n","import styled from 'styled-components';\n\nconst TableBody = styled.tbody.attrs({ role: 'rowgroup' })`\n display: table-row-group;\n`;\n\nexport default TableBody;\n","import type { FC, PropsWithChildren, ReactNode } from 'react';\nimport styled, { keyframes } from 'styled-components';\n\nimport { Color, Spacing } from '@persona/design-tokens';\nimport { Spinner } from 'design-system/components/Spinner';\nimport Table, { TableHead, TableRow } from 'design-system/components/Table';\nimport { Z_INDICES } from 'design-system/lib/zindex';\nimport { fadeIn } from 'design-system/variables/keyframes';\n\nconst Container = styled.div<{ maxHeight?: number }>`\n position: relative;\n z-index: 0;\n overflow-x: auto;\n ${({ maxHeight }) => {\n if (maxHeight != null) {\n return `max-height: ${maxHeight}px;`;\n }\n }}\n `;\n\nconst slideKeyframes = keyframes`\n 0% {\n transform: translateX(-50%) scaleX(0);\n }\n 50% {\n transform: translateX(0) scaleX(1);\n }\n 100% {\n transform: translateX(50%) scaleX(0);\n }\n `;\n\nconst Loader = styled.div`\n position: absolute;\n z-index: ${Z_INDICES.loadingOverlays};\n border-bottom: 3px solid ${({ theme }) => theme.color.primary.brand};\n width: 100%;\n \n animation: ${slideKeyframes} 3s infinite cubic-bezier(0.5, 0, 0.5, 1);\n `;\n\nconst Overlay = styled.div`\n position: absolute;\n z-index: ${Z_INDICES.loadingOverlays};\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: ${({ theme }) => theme.color.primary.white};\n opacity: 50%;\n `;\n\nconst SpinnerWrapper = styled.div`\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: ${Spacing[5]} 0;\n animation: ${fadeIn} 1s;\n animation-delay: 0.5s;\n animation-fill-mode: backwards;\n `;\n\nconst TableSpinner = styled(Spinner)`\n svg {\n width: 120px;\n height: 120px;\n }\n \n path {\n stroke: ${Color.CorePurple500};\n stroke-width: 0.46;\n }\n `;\n\ninterface TableLayoutProps {\n className?: string;\n containerMaxHeight?: number;\n dataTest?: string;\n headerTR: JSX.Element;\n isEmpty?: boolean;\n isLoading?: boolean;\n nullState: ReactNode;\n showHeader?: boolean;\n size?: 'sm' \| 'md';\n stickyHeader?: boolean;\n}\n\nconst TableLayout: FC<PropsWithChildren<TableLayoutProps>> = ({\n children,\n className,\n containerMaxHeight,\n dataTest,\n headerTR,\n isEmpty,\n isLoading,\n nullState,\n showHeader,\n size = 'md',\n stickyHeader = false,\n}) => {\n if (isEmpty && !showHeader) {\n if (isLoading) {\n return (\n <SpinnerWrapper\n role='status'\n aria-live='polite'\n aria-busy='true'\n aria-label='Loading...'\n data-loading-indicator='true'\n >\n <TableSpinner size='md' />\n </SpinnerWrapper>\n );\n } else {\n return <Container data-test={dataTest}>{nullState}</Container>;\n }\n }\n\n return (\n <Container data-test={dataTest} maxHeight={containerMaxHeight} className={className}>\n {isLoading && <Loader data-test='table-layout__loader' />}\n {isLoading && <Overlay />}\n\n <Table size={size} aria-busy={isLoading \|\| undefined}>\n <TableHead sticky={stickyHeader}>\n <TableRow>{headerTR}</TableRow>\n </TableHead>\n {!isEmpty && children}\n </Table>\n\n {isEmpty && nullState}\n </Container>\n );\n};\n\nexport default TableLayout;\n"],"mappings":"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"}
1	+ {"version":3,"file":"Table-CNs8p8hL.mjs","names":["slideKeyframes"],"sources":["../components/Table/Table.tsx","../components/Table/TableHeaderCell.tsx","../components/Table/TableRow.tsx","../components/Table/TableTH.tsx","../components/Table/TableCell.tsx","../components/Table/TableHead.tsx","../components/Table/TableBody.tsx","../components/Table/TableLayout.tsx"],"sourcesContent":["import styled, { css, keyframes } from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\nimport { paragraphMixins } from 'design-system/mixins/text';\n\ninterface TableProps {\n size?: 'sm' \| 'md';\n isLoading?: boolean;\n}\n\nconst slideKeyframes = keyframes`\n 0% {\n transform: translateX(-50%) scaleX(0);\n }\n 50% {\n transform: translateX(0) scaleX(1);\n }\n 100% {\n transform: translateX(50%) scaleX(0);\n }\n`;\n\nexport const Table = styled.table.attrs({ role: 'table' })<TableProps>`\n display: table;\n width: 100%;\n border-spacing: 0;\n ${paragraphMixins.md};\n\n ${({ size }) =>\n size === 'sm' &&\n css`\n td,\n th {\n padding: ${Spacing[2]};\n }\n `}\n\n ${({ isLoading }) =>\n isLoading &&\n css`\n thead {\n &:after {\n content: '';\n display: block;\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n border-bottom: 3px solid ${({ theme }) => theme.color.primary.brand};\n animation: ${slideKeyframes} 3s infinite cubic-bezier(0.5, 0, 0.5, 1);\n }\n }\n `}\n`;\n\nexport default Table;\n","import { type ComponentPropsWithoutRef, forwardRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\nimport { CaretDownIcon, CaretUpIcon } from '@persona/icons';\nimport { paragraphMixins } from 'design-system/mixins/text';\nimport { BASE } from 'design-system/variables/spacing';\n\ninterface TableHeaderCellProps {\n size?: 'sm' \| 'md';\n sortable?: boolean;\n width?: 'auto' \| 'min' \| 'max' \| string;\n isSticky?: boolean;\n align?: 'left' \| 'right';\n}\n\nconst StyledTableHeaderCell = styled.th<TableHeaderCellProps>`\n display: table-cell;\n /* Self-contained box model: don't depend on a consumer's global\n border-box reset, so header padding + border are included in the\n declared width/height. /\n box-sizing: border-box;\n\n background-color: ${({ theme }) => theme.color.background.secondary};\n padding: ${({ size }) => (size === 'sm' ? BASE : BASE 1.5)}px;\n text-align: left;\n white-space: nowrap;\n ${({ size }) => (size === 'sm' ? paragraphMixins.sm : paragraphMixins.md)};\n line-height: 1;\n width: ${({ width }) => {\n switch (width) {\n case 'min':\n return '1px';\n case 'max':\n return '100%';\n default:\n if (width) {\n return width;\n } else {\n return 'auto';\n }\n }\n }};\n\n &:first-child {\n border-radius: ${({ theme }) =>\n `${theme.element.borderRadius} 0 0 ${theme.element.borderRadius}`};\n }\n\n &:last-child {\n border-radius: ${({ theme }) =>\n `0 ${theme.element.borderRadius} ${theme.element.borderRadius} 0`};\n }\n\n ${({ sortable }) =>\n sortable &&\n css`\n cursor: pointer;\n\n &:hover ${TableIconContainer} {\n display: inline;\n visibility: visible;\n }\n `};\n\n ${({ isSticky }) =>\n isSticky\n ? css`\n position: sticky;\n top: 0;\n z-index: 1;\n `\n : css`\n position: relative;\n `}\n`;\n\nconst VerticalAlign = styled.div<{ $align?: TableHeaderCellProps['align'] }>`\n display: flex;\n align-items: center;\n gap: ${Spacing[1]};\n flex-direction: ${({ $align }) => ($align === 'right' ? 'row-reverse' : 'row')};\n`;\n\ninterface TableIconContainerProps {\n sortDirection?: 'asc' \| 'desc' \| false;\n}\n\nconst TableIconContainer = styled('div')<TableIconContainerProps>`\n display: inline-block;\n\n ${({ sortDirection }) => {\n if (sortDirection) {\n return css`\n display: inline;\n `;\n } else {\n return css`\n display: inline;\n visibility: hidden;\n color: ${({ theme }) => theme.color.text.disabled};\n `;\n }\n }};\n`;\n\nconst TableHeaderCell = forwardRef<\n HTMLTableCellElement,\n ComponentPropsWithoutRef<'th'> & TableHeaderCellProps & TableIconContainerProps\n>(function TableHeaderCell({ sortable, sortDirection, children, align, ...elemProps }, ref) {\n let ariaSort: 'none' \| 'ascending' \| 'descending' \| 'other' = 'none';\n\n if (sortable && sortDirection) {\n ariaSort = sortDirection === 'asc' ? 'ascending' : 'descending';\n }\n\n return (\n <StyledTableHeaderCell\n sortable={sortable}\n aria-sort={ariaSort}\n role='columnheader'\n {...elemProps}\n ref={ref}\n >\n <VerticalAlign $align={align}>\n {children}\n {sortable && (\n <TableIconContainer sortDirection={sortDirection}>\n {sortDirection === 'asc' ? <CaretUpIcon /> : <CaretDownIcon />}\n </TableIconContainer>\n )}\n </VerticalAlign>\n </StyledTableHeaderCell>\n );\n});\n\nexport default TableHeaderCell;\n","import styled, { css } from 'styled-components';\n\nimport { isFocusedVisible, isHovered } from 'design-system/lib/pseudoClass';\nimport type PseudoClassProps from 'design-system/types/PseudoClassProps';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\nexport interface TableRowProps extends PseudoClassProps {\n disableHoverBackground?: boolean;\n}\n\nconst TableRow = styled.tr.attrs({\n role: 'row',\n})<TableRowProps>`\n display: table-row;\n\n ${({ onClick }) =>\n onClick != null &&\n css`\n cursor: pointer;\n `}\n\n ${({ disableHoverBackground, theme }) =>\n !disableHoverBackground &&\n css`\n &${isHovered} {\n background-color: ${theme.color.background.highlight};\n transition-duration: ${TransitionDuration.Fast};\n }\n `}\n\n ${isFocusedVisible}\n`;\n\nexport default TableRow;\n","import { type ComponentPropsWithoutRef, forwardRef, type ReactNode } from 'react';\nimport styled from 'styled-components';\n\nimport { TableHeaderCell } from '@persona/design-system/components/Table';\nimport { HelperTooltip } from '@persona/design-system/components/Tooltip';\nimport { Spacing } from '@persona/design-tokens';\n\nconst StyledHelperTooltip = styled(HelperTooltip)`\n height: 14px;\n margin-left: ${Spacing[1]};\n`;\n\nexport interface TableTHProps extends ComponentPropsWithoutRef<typeof TableHeaderCell> {\n canSort?: boolean;\n isSorted?: boolean;\n isDescending?: boolean;\n isSticky?: boolean;\n /*\n Display help icon and tooltip for column header\n /\n helpText?: ReactNode;\n align?: 'left' \| 'right';\n size?: 'sm' \| 'md';\n}\n\nconst TableTH = forwardRef<HTMLTableCellElement, TableTHProps>(function TableTH(\n { children, canSort, isSorted, isSticky, isDescending, helpText, align, size, ...props },\n ref,\n) {\n return (\n <TableHeaderCell\n sortable={canSort}\n sortDirection={canSort && isSorted ? (isDescending ? 'desc' : 'asc') : false}\n ref={ref}\n isSticky={isSticky}\n align={align}\n size={size}\n {...props}\n >\n {/ We have to wrap the children to make it easier to use tooltips /}\n <span className='th__text'>{children}</span>\n {helpText && <StyledHelperTooltip size='sm'>{helpText}</StyledHelperTooltip>}\n </TableHeaderCell>\n );\n});\n\nexport default TableTH;\n","import type { ComponentPropsWithoutRef, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\nimport { Paragraph } from 'design-system/components/Text';\nimport { paragraphMixins } from 'design-system/mixins/text';\nimport { BASE } from 'design-system/variables/spacing';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\nimport TableRow from './TableRow';\nimport TableTH from './TableTH';\n\nexport interface TableCellProps {\n breakWord?: boolean;\n size?: 'sm' \| 'md';\n}\n\nconst TableCell = styled.td.attrs({ role: 'cell' })<TableCellProps>`\n display: table-cell;\n vertical-align: middle;\n / Self-contained box model: don't depend on a consumer's global\n border-box reset, so a fixed cell height includes its padding + border\n and rows stay compact. /\n box-sizing: border-box;\n\n border-bottom: 1px solid ${({ theme }) => theme.color.border.primary};\n text-align: left;\n padding: ${({ size }) => (size === 'sm' ? BASE : BASE 1.5)}px;\n color: ${({ theme }) => theme.color.text.primary};\n white-space: nowrap;\n ${paragraphMixins.md};\n line-height: 1;\n ${({ breakWord }) =>\n breakWord\n ? `white-space: normal;\n overflow-wrap: break-word;`\n : ''}\n`;\n\nexport default TableCell;\n\nconst CellTitleContainer = styled.div`\n display: flex;\n flex-direction: column;\n`;\n\nconst CellTitle = styled(Paragraph).attrs({ color: 'primary' })`\n display: flex;\n align-items: center;\n gap: ${Spacing[2]};\n`;\n\ninterface TableCellTitleProps extends ComponentPropsWithoutRef<'div'> {\n subtitle?: ReactNode;\n}\n\nexport const TableCellTitle = ({ children, subtitle, ...elemProps }: TableCellTitleProps) => {\n return (\n <CellTitleContainer {...elemProps}>\n <CellTitle>{children}</CellTitle>\n {subtitle && <Paragraph>{subtitle}</Paragraph>}\n </CellTitleContainer>\n );\n};\n\nexport const TableTD = styled(TableCell)<{ unclickable?: boolean }>`\n white-space: normal;\n overflow-wrap: break-word;\n ${(props) =>\n props.unclickable &&\n css`\n cursor: default;\n `}\n`;\n\nexport const TableIconTD = styled(TableTD)`\n text-align: right;\n line-height: 0; /* To center icon; cannot use flex here */\n padding: 0;\n padding-left: ${Spacing[4]};\n width: 36px;\n`;\n\nexport const TableActionTD = styled(TableTD)`\n text-align: right;\n padding: 0;\n padding-right: ${Spacing[4]};\n width: 48px;\n`;\n\nexport const StickyTD = styled(TableTD)<{\n left?: number;\n hasRightBorder?: boolean;\n}>`\n position: sticky;\n left: ${({ left = 0 }) => `${left}px`}; // Default to 0 if not specified\n background-color: ${({ theme }) => theme.color.background.primary};\n\n ${({ hasRightBorder, theme }) =>\n hasRightBorder && `border-right: 2px solid ${theme.color.border.primary};`}\n z-index: 2;\n`;\n\nexport const StickyTH = styled(TableTH)<{\n left?: number;\n hasRightBorder?: boolean;\n size?: 'sm' \| 'md';\n}>`\n position: sticky;\n left: ${({ left = 0 }) => `${left}px`}; // Default to 0 if not specified\n z-index: 2;\n max-width: 10%;\n background-color: ${({ theme }) => theme.color.background.secondary};\n ${({ hasRightBorder, theme }) =>\n hasRightBorder && `border-right: 2px solid ${theme.color.border.primary};`}\n`;\n\nexport const TableTR = styled(TableRow)<{ disableHoverBackground?: boolean; $isActive?: boolean }>`\n ${({ disableHoverBackground }) =>\n disableHoverBackground &&\n css`\n &:hover {\n background-color: transparent !important;\n }\n `}\n\n ${({ $isActive }) =>\n $isActive &&\n css`\n background-color: ${({ theme }) => theme.color.background.highlight};\n &:hover {\n background-color: ${({ theme }) => theme.color.background.highlight};\n }\n `}\n\n ${({ onClick, disableHoverBackground, $isActive }) =>\n onClick != null &&\n !disableHoverBackground &&\n !$isActive &&\n css`\n cursor: pointer;\n :hover {\n background-color: ${({ theme }) => theme.color.background.highlight};\n }\n transition-duration: ${TransitionDuration.Fast};\n `}\n`;\n","import styled, { css } from 'styled-components';\n\ninterface TableHeadProps {\n sticky?: boolean;\n}\n\nconst TableHead = styled.thead.attrs({ role: 'rowgroup' })<TableHeadProps>`\n display: table-header-group;\n ${({ sticky }) =>\n sticky &&\n css`\n position: sticky;\n top: 0;\n z-index: 1;\n `}\n`;\n\nexport default TableHead;\n","import styled from 'styled-components';\n\nconst TableBody = styled.tbody.attrs({ role: 'rowgroup' })`\n display: table-row-group;\n`;\n\nexport default TableBody;\n","import type { FC, PropsWithChildren, ReactNode } from 'react';\nimport styled, { keyframes } from 'styled-components';\n\nimport { Color, Spacing } from '@persona/design-tokens';\nimport { Spinner } from 'design-system/components/Spinner';\nimport Table, { TableHead, TableRow } from 'design-system/components/Table';\nimport { Z_INDICES } from 'design-system/lib/zindex';\nimport { fadeIn } from 'design-system/variables/keyframes';\n\nconst Container = styled.div<{ maxHeight?: number }>`\n position: relative;\n z-index: 0;\n overflow-x: auto;\n ${({ maxHeight }) => {\n if (maxHeight != null) {\n return `max-height: ${maxHeight}px;`;\n }\n }}\n `;\n\nconst slideKeyframes = keyframes`\n 0% {\n transform: translateX(-50%) scaleX(0);\n }\n 50% {\n transform: translateX(0) scaleX(1);\n }\n 100% {\n transform: translateX(50%) scaleX(0);\n }\n `;\n\nconst Loader = styled.div`\n position: absolute;\n z-index: ${Z_INDICES.loadingOverlays};\n border-bottom: 3px solid ${({ theme }) => theme.color.primary.brand};\n width: 100%;\n \n animation: ${slideKeyframes} 3s infinite cubic-bezier(0.5, 0, 0.5, 1);\n `;\n\nconst Overlay = styled.div`\n position: absolute;\n z-index: ${Z_INDICES.loadingOverlays};\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: ${({ theme }) => theme.color.primary.white};\n opacity: 50%;\n `;\n\nconst SpinnerWrapper = styled.div`\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: ${Spacing[5]} 0;\n animation: ${fadeIn} 1s;\n animation-delay: 0.5s;\n animation-fill-mode: backwards;\n `;\n\nconst TableSpinner = styled(Spinner)`\n svg {\n width: 120px;\n height: 120px;\n }\n \n path {\n stroke: ${Color.CorePurple500};\n stroke-width: 0.46;\n }\n `;\n\ninterface TableLayoutProps {\n className?: string;\n containerMaxHeight?: number;\n dataTest?: string;\n headerTR: JSX.Element;\n isEmpty?: boolean;\n isLoading?: boolean;\n nullState: ReactNode;\n showHeader?: boolean;\n size?: 'sm' \| 'md';\n stickyHeader?: boolean;\n}\n\nconst TableLayout: FC<PropsWithChildren<TableLayoutProps>> = ({\n children,\n className,\n containerMaxHeight,\n dataTest,\n headerTR,\n isEmpty,\n isLoading,\n nullState,\n showHeader,\n size = 'md',\n stickyHeader = false,\n}) => {\n if (isEmpty && !showHeader) {\n if (isLoading) {\n return (\n <SpinnerWrapper\n role='status'\n aria-live='polite'\n aria-busy='true'\n aria-label='Loading...'\n data-loading-indicator='true'\n >\n <TableSpinner size='md' />\n </SpinnerWrapper>\n );\n } else {\n return <Container data-test={dataTest}>{nullState}</Container>;\n }\n }\n\n return (\n <Container data-test={dataTest} maxHeight={containerMaxHeight} className={className}>\n {isLoading && <Loader data-test='table-layout__loader' />}\n {isLoading && <Overlay />}\n\n <Table size={size} aria-busy={isLoading \|\| undefined}>\n <TableHead sticky={stickyHeader}>\n <TableRow>{headerTR}</TableRow>\n </TableHead>\n {!isEmpty && children}\n </Table>\n\n {isEmpty && nullState}\n </Container>\n );\n};\n\nexport default TableLayout;\n"],"mappings":"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"}

package/dist/{Table-D4SMuVIR.d.cts → Table-D3nyiZt0.d.mts} RENAMED Viewed

@@ -10,4 +10,4 @@ declare const Table: _$styled_components0.StyledComponent<"table", any, {
 } & TableProps, "role">;
 //#endregion
 export { Table as t };
-//# sourceMappingURL=Table-D4SMuVIR.d.cts.map
+//# sourceMappingURL=Table-D3nyiZt0.d.mts.map

package/dist/{Table-C8D4lpSa.d.mts → Table-DJZtluW3.d.cts} RENAMED Viewed

@@ -10,4 +10,4 @@ declare const Table: _$styled_components0.StyledComponent<"table", any, {
 } & TableProps, "role">;
 //#endregion
 export { Table as t };
-//# sourceMappingURL=Table-C8D4lpSa.d.mts.map
+//# sourceMappingURL=Table-DJZtluW3.d.cts.map

package/dist/Table.d.cts CHANGED Viewed

@@ -1,2 +1,2 @@
-import { t as Table } from "./Table-D4SMuVIR.cjs";
+import { t as Table } from "./Table-DJZtluW3.cjs";
 export { Table, Table as default };

package/dist/Table.d.mts CHANGED Viewed

@@ -1,2 +1,2 @@
-import { t as Table } from "./Table-C8D4lpSa.mjs";
+import { t as Table } from "./Table-D3nyiZt0.mjs";
 export { Table, Table as default };

package/dist/{TableBody-0cd50RuX.d.mts → TableBody-BFPF07n4.d.cts} RENAMED Viewed

@@ -6,4 +6,4 @@ declare const TableBody: _$styled_components0.StyledComponent<"tbody", any, {
 }, "role">;
 //#endregion
 export { TableBody as t };
-//# sourceMappingURL=TableBody-0cd50RuX.d.mts.map
+//# sourceMappingURL=TableBody-BFPF07n4.d.cts.map

package/dist/{TableBody-BLmn5h3y.d.cts → TableBody-DpRjZgzU.d.mts} RENAMED Viewed

@@ -6,4 +6,4 @@ declare const TableBody: _$styled_components0.StyledComponent<"tbody", any, {
 }, "role">;
 //#endregion
 export { TableBody as t };
-//# sourceMappingURL=TableBody-BLmn5h3y.d.cts.map
+//# sourceMappingURL=TableBody-DpRjZgzU.d.mts.map

package/dist/TableBody.d.cts CHANGED Viewed

@@ -1,2 +1,2 @@
-import { t as TableBody } from "./TableBody-BLmn5h3y.cjs";
+import { t as TableBody } from "./TableBody-BFPF07n4.cjs";
 export = TableBody;

package/dist/TableBody.d.mts CHANGED Viewed

@@ -1,2 +1,2 @@
-import { t as TableBody } from "./TableBody-0cd50RuX.mjs";
+import { t as TableBody } from "./TableBody-DpRjZgzU.mjs";
 export { TableBody as default };