npm - @persona/design-system - Versions diffs - 0.10.5 → 0.10.7 - Mend

@persona/design-system 0.10.5 → 0.10.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 (559) hide show

package/dist/Table-DPi4Dt5H.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Table-DPi4Dt5H.mjs","names":["slideKeyframes"],"sources":["../src/components/Table/Table.tsx","../src/components/Table/TableHeaderCell.tsx","../src/components/Table/TableRow.tsx","../src/components/Table/TableTH.tsx","../src/components/Table/TableCell.tsx","../src/components/Table/TableHead.tsx","../src/components/Table/TableBody.tsx","../src/components/Table/TableLayout.tsx"],"sourcesContent":["import styled, { css, keyframes } from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\nimport { semanticColor } from 'design-system/lib/semanticColor';\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 }) => semanticColor(theme, 'FeedbackAccent3', 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, type ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\nimport { CaretDownIcon, CaretUpIcon } from '@persona/icons';\nimport { semanticColor, semanticOnly } from 'design-system/lib/semanticColor';\nimport { focusOutline } from 'design-system/mixins/focus';\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 trailing?: ReactNode;\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 }) => semanticColor(theme, 'SurfaceSecondary', theme.color.background.secondary)};\n ${semanticOnly((tokens) => `color: ${tokens.FgPrimary};`)}\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 ${SortButton}:focus-visible ${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\nconst SortButton = styled.button`\n background: none;\n border: 0;\n padding: 0;\n margin: 0;\n font: inherit;\n color: inherit;\n text-align: inherit;\n cursor: pointer;\n display: inline-flex;\n align-items: center;\n gap: ${Spacing[1]};\n min-width: 0;\n ${focusOutline}\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 }) => semanticColor(theme, 'FgTertiary', theme.color.text.disabled)};\n `;\n }\n }};\n`;\n\nconst TableHeaderCell = forwardRef<\n HTMLTableCellElement,\n ComponentPropsWithoutRef<'th'> & TableHeaderCellProps & TableIconContainerProps\n>(function TableHeaderCell(\n { sortable, sortDirection, children, align, trailing, onClick, ...elemProps },\n ref,\n) {\n let ariaSort: 'none' \| 'ascending' \| 'descending' \| undefined;\n\n if (sortable && sortDirection) {\n ariaSort = sortDirection === 'asc' ? 'ascending' : 'descending';\n } else if (sortable) {\n ariaSort = 'none';\n }\n\n return (\n <StyledTableHeaderCell\n sortable={sortable}\n aria-sort={ariaSort}\n onClick={sortable ? undefined : onClick}\n {...elemProps}\n ref={ref}\n >\n <VerticalAlign $align={align}>\n {sortable ? (\n <SortButton type='button' onClick={onClick}>\n {children}\n <TableIconContainer aria-hidden='true' sortDirection={sortDirection}>\n {sortDirection === 'asc' ? <CaretUpIcon /> : <CaretDownIcon />}\n </TableIconContainer>\n </SortButton>\n ) : (\n children\n )}\n {trailing}\n </VerticalAlign>\n </StyledTableHeaderCell>\n );\n});\n\nexport default TableHeaderCell;\n","import styled, { css } from 'styled-components';\n\nimport { withAlpha } from 'design-system/lib/color';\nimport { isFocusedVisible, isHovered } from 'design-system/lib/pseudoClass';\nimport { semanticTokens } from 'design-system/lib/semanticColor';\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 if (disableHoverBackground) {\n return null;\n }\n const tokens = semanticTokens(theme);\n return css`\n &${isHovered} {\n background-color: ${\n tokens\n ? withAlpha(tokens.ActionAccent, tokens.Opacity25)\n : theme.color.background.highlight\n };\n ${tokens ? `color: ${tokens.FgPrimary};` : ''}\n transition-duration: ${TransitionDuration.Fast};\n }\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 trailing={helpText && <StyledHelperTooltip size='sm'>{helpText}</StyledHelperTooltip>}\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 </TableHeaderCell>\n );\n});\n\nexport default TableTH;\n","import type { ComponentPropsWithoutRef, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Color, Spacing } from '@persona/design-tokens';\nimport { Paragraph } from 'design-system/components/Text';\nimport { withAlpha } from 'design-system/lib/color';\nimport { isHovered } from 'design-system/lib/pseudoClass';\nimport {\n type MaybeSemanticTheme,\n semanticColor,\n semanticOnly,\n semanticTokens,\n} from 'design-system/lib/semanticColor';\nimport { paragraphMixins } from 'design-system/mixins/text';\nimport type { PersonaTheme } from 'design-system/theme';\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 }) => semanticColor(theme, 'BorderDivider', theme.color.border.primary)};\n text-align: left;\n padding: ${({ size }) => (size === 'sm' ? BASE : BASE 1.5)}px;\n color: ${({ theme }) => semanticColor(theme, 'FgPrimary', 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 ${semanticOnly(() => 'color: inherit;')}\n display: flex;\n align-items: center;\n gap: ${Spacing[2]};\n`;\n\nconst CellSubtitle = styled(Paragraph)`\n ${semanticOnly((tokens) => `color: ${tokens.FgSecondary};`)}\n`;\n\nconst activeHighlight = (theme: PersonaTheme & MaybeSemanticTheme) =>\n semanticColor(theme, 'ActionAccent', theme.color.background.highlight);\n\nconst hoverHighlight = (theme: PersonaTheme & MaybeSemanticTheme) => {\n const tokens = semanticTokens(theme);\n return tokens\n ? withAlpha(tokens.ActionAccent, tokens.Opacity25)\n : theme.color.background.highlight;\n};\n\n// Same page color unpinned cells show through, painted opaquely so scrolled text stays covered.\nconst pinnedBodyBackground = (theme: PersonaTheme & MaybeSemanticTheme) =>\n semanticColor(\n theme,\n theme.color.text.primary === Color.TextInverse ? 'SurfacePage' : 'SurfacePrimary',\n theme.color.background.primary,\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 && <CellSubtitle>{subtitle}</CellSubtitle>}\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 }) => pinnedBodyBackground(theme)};\n\n ${({ hasRightBorder, theme }) =>\n hasRightBorder &&\n `border-right: 2px solid ${semanticColor(theme, 'BorderDivider', 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 }) => semanticColor(theme, 'SurfaceSecondary', theme.color.background.secondary)};\n ${({ hasRightBorder, theme }) =>\n hasRightBorder &&\n `border-right: 2px solid ${semanticColor(theme, 'BorderDivider', 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 }) => activeHighlight(theme)};\n ${semanticOnly((tokens) => `color: ${tokens.FgPrimary};`)}\n ${StickyTD} {\n background-color: ${({ theme }) => activeHighlight(theme)};\n }\n &:hover {\n background-color: ${({ theme }) => activeHighlight(theme)};\n }\n &:hover ${StickyTD} {\n background-color: ${({ theme }) => activeHighlight(theme)};\n background-image: none;\n }\n `}\n\n ${({ disableHoverBackground, $isActive }) =>\n !disableHoverBackground &&\n !$isActive &&\n css`\n &${isHovered} ${StickyTD} {\n background-image: linear-gradient(\n ${({ theme }) => hoverHighlight(theme)},\n ${({ theme }) => hoverHighlight(theme)}\n );\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 }) => hoverHighlight(theme)};\n ${semanticOnly((tokens) => `color: ${tokens.FgPrimary};`)}\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, { TableBody, TableHead, TableRow } from 'design-system/components/Table';\nimport { semanticColor } from 'design-system/lib/semanticColor';\nimport { Z_INDICES } from 'design-system/lib/zindex';\nimport { semanticScrollbar } from 'design-system/mixins/scrollbar';\nimport { fadeIn } from 'design-system/variables/keyframes';\n\n// `visible` rather than a narrower opt-out because CSS blockifies the other axis: any\n// `overflow-x` other than `visible`/`clip` forces `overflow-y` to compute to `auto` too, which\n// makes this element the scrollport that descendant sticky offsets resolve against.\nconst Container = styled.div<{ maxHeight?: number; $scrollsHorizontally: boolean }>`\n position: relative;\n z-index: 0;\n overflow-x: ${({ $scrollsHorizontally }) => ($scrollsHorizontally ? 'auto' : 'visible')};\n ${semanticScrollbar}\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 }) => semanticColor(theme, 'BorderAccent', 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 }) => semanticColor(theme, 'SurfacePrimary', 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: ${({ theme }) => semanticColor(theme, 'FeedbackAccent3', Color.CorePurple500)};\n stroke-width: 0.46;\n }\n `;\n\ninterface TableLayoutProps {\n className?: string;\n containerMaxHeight?: number;\n /\n When false, the container does not scroll horizontally and an ancestor is expected to.\n * Sticky offsets inside the table then resolve against that ancestor's scrollport rather\n * than against the container.\n */\n containerScrollsHorizontally?: boolean;\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 containerScrollsHorizontally = true,\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 (\n <Container data-test={dataTest} $scrollsHorizontally={containerScrollsHorizontally}>\n {nullState}\n </Container>\n );\n }\n }\n\n return (\n <Container\n data-test={dataTest}\n maxHeight={containerMaxHeight}\n className={className}\n $scrollsHorizontally={containerScrollsHorizontally}\n >\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 && <TableBody>{children}</TableBody>}\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-DPi4Dt5H.mjs","names":["slideKeyframes"],"sources":["../src/components/Table/Table.tsx","../src/components/Table/TableHeaderCell.tsx","../src/components/Table/TableRow.tsx","../src/components/Table/TableTH.tsx","../src/components/Table/TableCell.tsx","../src/components/Table/TableHead.tsx","../src/components/Table/TableBody.tsx","../src/components/Table/TableLayout.tsx"],"sourcesContent":["import styled, { css, keyframes } from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\n\nimport { semanticColor } from '#src/lib/semanticColor';\nimport { paragraphMixins } from '#src/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 }) => semanticColor(theme, 'FeedbackAccent3', 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, type ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\nimport { CaretDownIcon, CaretUpIcon } from '@persona/icons';\n\nimport { semanticColor, semanticOnly } from '#src/lib/semanticColor';\nimport { focusOutline } from '#src/mixins/focus';\nimport { paragraphMixins } from '#src/mixins/text';\nimport { BASE } from '#src/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 trailing?: ReactNode;\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 }) => semanticColor(theme, 'SurfaceSecondary', theme.color.background.secondary)};\n ${semanticOnly((tokens) => `color: ${tokens.FgPrimary};`)}\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 ${SortButton}:focus-visible ${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\nconst SortButton = styled.button`\n background: none;\n border: 0;\n padding: 0;\n margin: 0;\n font: inherit;\n color: inherit;\n text-align: inherit;\n cursor: pointer;\n display: inline-flex;\n align-items: center;\n gap: ${Spacing[1]};\n min-width: 0;\n ${focusOutline}\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 }) => semanticColor(theme, 'FgTertiary', theme.color.text.disabled)};\n `;\n }\n }};\n`;\n\nconst TableHeaderCell = forwardRef<\n HTMLTableCellElement,\n ComponentPropsWithoutRef<'th'> & TableHeaderCellProps & TableIconContainerProps\n>(function TableHeaderCell(\n { sortable, sortDirection, children, align, trailing, onClick, ...elemProps },\n ref,\n) {\n let ariaSort: 'none' \| 'ascending' \| 'descending' \| undefined;\n\n if (sortable && sortDirection) {\n ariaSort = sortDirection === 'asc' ? 'ascending' : 'descending';\n } else if (sortable) {\n ariaSort = 'none';\n }\n\n return (\n <StyledTableHeaderCell\n sortable={sortable}\n aria-sort={ariaSort}\n onClick={sortable ? undefined : onClick}\n {...elemProps}\n ref={ref}\n >\n <VerticalAlign $align={align}>\n {sortable ? (\n <SortButton type='button' onClick={onClick}>\n {children}\n <TableIconContainer aria-hidden='true' sortDirection={sortDirection}>\n {sortDirection === 'asc' ? <CaretUpIcon /> : <CaretDownIcon />}\n </TableIconContainer>\n </SortButton>\n ) : (\n children\n )}\n {trailing}\n </VerticalAlign>\n </StyledTableHeaderCell>\n );\n});\n\nexport default TableHeaderCell;\n","import styled, { css } from 'styled-components';\n\nimport { withAlpha } from '#src/lib/color';\nimport { isFocusedVisible, isHovered } from '#src/lib/pseudoClass';\nimport { semanticTokens } from '#src/lib/semanticColor';\nimport type PseudoClassProps from '#src/types/PseudoClassProps';\nimport { TransitionDuration } from '#src/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 if (disableHoverBackground) {\n return null;\n }\n const tokens = semanticTokens(theme);\n return css`\n &${isHovered} {\n background-color: ${\n tokens\n ? withAlpha(tokens.ActionAccent, tokens.Opacity25)\n : theme.color.background.highlight\n };\n ${tokens ? `color: ${tokens.FgPrimary};` : ''}\n transition-duration: ${TransitionDuration.Fast};\n }\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 trailing={helpText && <StyledHelperTooltip size='sm'>{helpText}</StyledHelperTooltip>}\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 </TableHeaderCell>\n );\n});\n\nexport default TableTH;\n","import type { ComponentPropsWithoutRef, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Color, Spacing } from '@persona/design-tokens';\n\nimport { Paragraph } from '#src/components/Text';\nimport { withAlpha } from '#src/lib/color';\nimport { isHovered } from '#src/lib/pseudoClass';\nimport {\n type MaybeSemanticTheme,\n semanticColor,\n semanticOnly,\n semanticTokens,\n} from '#src/lib/semanticColor';\nimport { paragraphMixins } from '#src/mixins/text';\nimport type { PersonaTheme } from '#src/theme';\nimport { BASE } from '#src/variables/spacing';\nimport { TransitionDuration } from '#src/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 }) => semanticColor(theme, 'BorderDivider', theme.color.border.primary)};\n text-align: left;\n padding: ${({ size }) => (size === 'sm' ? BASE : BASE 1.5)}px;\n color: ${({ theme }) => semanticColor(theme, 'FgPrimary', 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 ${semanticOnly(() => 'color: inherit;')}\n display: flex;\n align-items: center;\n gap: ${Spacing[2]};\n`;\n\nconst CellSubtitle = styled(Paragraph)`\n ${semanticOnly((tokens) => `color: ${tokens.FgSecondary};`)}\n`;\n\nconst activeHighlight = (theme: PersonaTheme & MaybeSemanticTheme) =>\n semanticColor(theme, 'ActionAccent', theme.color.background.highlight);\n\nconst hoverHighlight = (theme: PersonaTheme & MaybeSemanticTheme) => {\n const tokens = semanticTokens(theme);\n return tokens\n ? withAlpha(tokens.ActionAccent, tokens.Opacity25)\n : theme.color.background.highlight;\n};\n\n// Same page color unpinned cells show through, painted opaquely so scrolled text stays covered.\nconst pinnedBodyBackground = (theme: PersonaTheme & MaybeSemanticTheme) =>\n semanticColor(\n theme,\n theme.color.text.primary === Color.TextInverse ? 'SurfacePage' : 'SurfacePrimary',\n theme.color.background.primary,\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 && <CellSubtitle>{subtitle}</CellSubtitle>}\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 }) => pinnedBodyBackground(theme)};\n\n ${({ hasRightBorder, theme }) =>\n hasRightBorder &&\n `border-right: 2px solid ${semanticColor(theme, 'BorderDivider', 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 }) => semanticColor(theme, 'SurfaceSecondary', theme.color.background.secondary)};\n ${({ hasRightBorder, theme }) =>\n hasRightBorder &&\n `border-right: 2px solid ${semanticColor(theme, 'BorderDivider', 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 }) => activeHighlight(theme)};\n ${semanticOnly((tokens) => `color: ${tokens.FgPrimary};`)}\n ${StickyTD} {\n background-color: ${({ theme }) => activeHighlight(theme)};\n }\n &:hover {\n background-color: ${({ theme }) => activeHighlight(theme)};\n }\n &:hover ${StickyTD} {\n background-color: ${({ theme }) => activeHighlight(theme)};\n background-image: none;\n }\n `}\n\n ${({ disableHoverBackground, $isActive }) =>\n !disableHoverBackground &&\n !$isActive &&\n css`\n &${isHovered} ${StickyTD} {\n background-image: linear-gradient(\n ${({ theme }) => hoverHighlight(theme)},\n ${({ theme }) => hoverHighlight(theme)}\n );\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 }) => hoverHighlight(theme)};\n ${semanticOnly((tokens) => `color: ${tokens.FgPrimary};`)}\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';\n\nimport { Spinner } from '#src/components/Spinner';\nimport Table, { TableBody, TableHead, TableRow } from '#src/components/Table';\nimport { semanticColor } from '#src/lib/semanticColor';\nimport { Z_INDICES } from '#src/lib/zindex';\nimport { semanticScrollbar } from '#src/mixins/scrollbar';\nimport { fadeIn } from '#src/variables/keyframes';\n\n// `visible` rather than a narrower opt-out because CSS blockifies the other axis: any\n// `overflow-x` other than `visible`/`clip` forces `overflow-y` to compute to `auto` too, which\n// makes this element the scrollport that descendant sticky offsets resolve against.\nconst Container = styled.div<{ maxHeight?: number; $scrollsHorizontally: boolean }>`\n position: relative;\n z-index: 0;\n overflow-x: ${({ $scrollsHorizontally }) => ($scrollsHorizontally ? 'auto' : 'visible')};\n ${semanticScrollbar}\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 }) => semanticColor(theme, 'BorderAccent', 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 }) => semanticColor(theme, 'SurfacePrimary', 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: ${({ theme }) => semanticColor(theme, 'FeedbackAccent3', Color.CorePurple500)};\n stroke-width: 0.46;\n }\n `;\n\ninterface TableLayoutProps {\n className?: string;\n containerMaxHeight?: number;\n /\n When false, the container does not scroll horizontally and an ancestor is expected to.\n * Sticky offsets inside the table then resolve against that ancestor's scrollport rather\n * than against the container.\n */\n containerScrollsHorizontally?: boolean;\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 containerScrollsHorizontally = true,\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 (\n <Container data-test={dataTest} $scrollsHorizontally={containerScrollsHorizontally}>\n {nullState}\n </Container>\n );\n }\n }\n\n return (\n <Container\n data-test={dataTest}\n maxHeight={containerMaxHeight}\n className={className}\n $scrollsHorizontally={containerScrollsHorizontally}\n >\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 && <TableBody>{children}</TableBody>}\n </Table>\n\n {isEmpty && nullState}\n </Container>\n );\n};\n\nexport default TableLayout;\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAYA,MAAMA,mBAAiB,SAAS;;;;;;;;;;;AAYhC,MAAa,QAAQ,OAAO,MAAM,MAAM,EAAE,MAAM,SAAS,CAAC;;;;IAItD,gBAAgB,GAAG;;KAElB,EAAE,WACH,SAAS,QACT,GAAG;;;mBAGY,QAAQ,GAAG;;MAExB;;KAED,EAAE,gBACH,aACA,GAAG;;;;;;;;;sCAS+B,EAAE,YAAY,cAAc,OAAO,mBAAmB,MAAM,MAAM,QAAQ,MAAM,CAAC;uBAChGA,iBAAe;;;MAGhC;;;;AClCN,MAAM,wBAAwB,OAAO,EAAwB;;;;;;;uBAOtC,EAAE,YAAY,cAAc,OAAO,oBAAoB,MAAM,MAAM,WAAW,UAAU,CAAC;IAC5G,cAAc,WAAW,UAAU,OAAO,UAAU,GAAG,CAAC;cAC9C,EAAE,WAAY,SAAS,OAAA,IAAA,IAAqB,IAAK;;;KAG1D,EAAE,WAAY,SAAS,OAAO,gBAAgB,KAAK,gBAAgB,GAAI;;YAEhE,EAAE,YAAY;AACtB,SAAQ,OAAR;EACE,KAAK,MACH,QAAO;EACT,KAAK,MACH,QAAO;EACT,QACE,KAAI,MACF,QAAO;MAEP,QAAO;;EAGb;;;sBAGkB,EAAE,YAClB,GAAG,MAAM,QAAQ,aAAa,OAAO,MAAM,QAAQ,eAAe;;;;sBAIlD,EAAE,YAClB,KAAK,MAAM,QAAQ,aAAa,GAAG,MAAM,QAAQ,aAAa,IAAI;;;KAGnE,EAAE,eACH,YACA,GAAG;;;gBAGS,mBAAmB;;;;;QAK3B,WAAW,iBAAiB,mBAAmB;;;;MAIjD;;KAED,EAAE,eACH,WACI,GAAG;;;;YAKH,GAAG;;UAED;;AAGV,MAAM,gBAAgB,OAAO,GAA+C;;;SAGnE,QAAQ,GAAG;qBACC,EAAE,aAAc,WAAW,UAAU,gBAAgB,MAAO;;AAGjF,MAAM,aAAa,OAAO,MAAM;;;;;;;;;;;SAWvB,QAAQ,GAAG;;IAEhB,aAAa;;AAOjB,MAAM,qBAAqB,OAAO,MAAM;;;KAGnC,EAAE,oBAAoB;AACvB,KAAI,cACF,QAAO,GAAG;;;KAIV,QAAO,GAAG;;;kBAGE,EAAE,YAAY,cAAc,OAAO,cAAc,MAAM,MAAM,KAAK,SAAS,CAAC;;EAG1F;;AAGJ,MAAM,kBAAkB,WAGtB,SAAS,gBACT,EAAE,UAAU,eAAe,UAAU,OAAO,UAAU,SAAS,GAAG,aAClE,KACA;CACA,IAAI;AAEJ,KAAI,YAAY,cACd,YAAW,kBAAkB,QAAQ,cAAc;UAC1C,SACT,YAAW;AAGb,QACE,oBAAC,uBAAD;EACY;EACV,aAAW;EACX,SAAS,WAAW,KAAA,IAAY;EAChC,GAAI;EACC;YAEL,qBAAC,eAAD;GAAe,QAAQ;aAAvB,CACG,WACC,qBAAC,YAAD;IAAY,MAAK;IAAkB;cAAnC,CACG,UACD,oBAAC,oBAAD;KAAoB,eAAY;KAAsB;eACnD,kBAAkB,QAAQ,oBAAC,aAAD,EAAe,CAAA,GAAG,oBAAC,eAAD,EAAiB,CAAA;KAC3C,CAAA,CACV;QAEb,UAED,SACa;;EACM,CAAA;EAE1B;;;AC9JF,MAAM,WAAW,OAAO,GAAG,MAAM,EAC/B,MAAM,OACP,CAAC;;;KAGG,EAAE,cACH,WAAW,QACX,GAAG;;MAED;;KAED,EAAE,wBAAwB,YAAY;AACvC,KAAI,uBACF,QAAO;CAET,MAAM,SAAS,eAAe,MAAM;AACpC,QAAO,GAAG;SACL,UAAU;4BAET,SACI,UAAU,OAAO,cAAc,OAAO,UAAU,GAChD,MAAM,MAAM,WAAW,UAC5B;UACC,SAAS,UAAU,OAAO,UAAU,KAAK,GAAG;uCACC;;;EAGnD;;IAEA,iBAAiB;;;;AClCrB,MAAM,sBAAsB,OAAO,cAAc;;iBAEhC,QAAQ,GAAG;;AAgB5B,MAAM,UAAU,WAA+C,SAAS,QACtE,EAAE,UAAU,SAAS,UAAU,UAAU,cAAc,UAAU,OAAO,MAAM,GAAG,SACjF,KACA;AACA,QACE,oBAAC,iBAAD;EACE,UAAU;EACV,eAAe,WAAW,WAAY,eAAe,SAAS,QAAS;EAClE;EACK;EACH;EACD;EACN,UAAU,YAAY,oBAAC,qBAAD;GAAqB,MAAK;aAAM;GAA+B,CAAA;EACrF,GAAI;YAGJ,oBAAC,QAAD;GAAM,WAAU;GAAY;GAAgB,CAAA;EAC5B,CAAA;EAEpB;;;ACjBF,MAAM,YAAY,OAAO,GAAG,MAAM,EAAE,MAAM,QAAQ,CAAC;;;;;;;;8BAQrB,EAAE,YAAY,cAAc,OAAO,iBAAiB,MAAM,MAAM,OAAO,QAAQ,CAAC;;cAEhG,EAAE,WAAY,SAAS,OAAA,IAAA,IAAqB,IAAK;YACnD,EAAE,YAAY,cAAc,OAAO,aAAa,MAAM,MAAM,KAAK,QAAQ,CAAC;;IAElF,gBAAgB,GAAG;;KAElB,EAAE,gBACH,YACI;uCAEA,GAAG;;AAKX,MAAM,qBAAqB,OAAO,GAAG;;;;AAKrC,MAAM,YAAY,OAAO,UAAU,CAAC,MAAM,EAAE,OAAO,WAAW,CAAC;IAC3D,mBAAmB,kBAAkB,CAAC;;;SAGjC,QAAQ,GAAG;;AAGpB,MAAM,eAAe,OAAO,UAAU;IAClC,cAAc,WAAW,UAAU,OAAO,YAAY,GAAG,CAAC;;AAG9D,MAAM,mBAAmB,UACvB,cAAc,OAAO,gBAAgB,MAAM,MAAM,WAAW,UAAU;AAExE,MAAM,kBAAkB,UAA6C;CACnE,MAAM,SAAS,eAAe,MAAM;AACpC,QAAO,SACH,UAAU,OAAO,cAAc,OAAO,UAAU,GAChD,MAAM,MAAM,WAAW;;AAI7B,MAAM,wBAAwB,UAC5B,cACE,OACA,MAAM,MAAM,KAAK,YAAY,MAAM,cAAc,gBAAgB,kBACjE,MAAM,MAAM,WAAW,QACxB;AAMH,MAAa,kBAAkB,EAAE,UAAU,UAAU,GAAG,gBAAqC;AAC3F,QACE,qBAAC,oBAAD;EAAoB,GAAI;YAAxB,CACE,oBAAC,WAAD,EAAY,UAAqB,CAAA,EAChC,YAAY,oBAAC,cAAD,EAAA,UAAe,UAAwB,CAAA,CACjC;;;AAIzB,MAAa,UAAU,OAAO,UAAU;;;KAGnC,UACD,MAAM,eACN,GAAG;;MAED;;AAGN,MAAa,cAAc,OAAO,QAAQ;;;;kBAIxB,QAAQ,GAAG;;;AAI7B,MAAa,gBAAgB,OAAO,QAAQ;;;mBAGzB,QAAQ,GAAG;;;AAI9B,MAAa,WAAW,OAAO,QAAQ;;WAK5B,EAAE,OAAO,QAAQ,GAAG,KAAK,IAAI;uBACjB,EAAE,YAAY,qBAAqB,MAAM,CAAC;;KAE5D,EAAE,gBAAgB,YACnB,kBACA,2BAA2B,cAAc,OAAO,iBAAiB,MAAM,MAAM,OAAO,QAAQ,CAAC,GAAG;;;AAIpG,MAAa,WAAW,OAAO,QAAQ;;WAM5B,EAAE,OAAO,QAAQ,GAAG,KAAK,IAAI;;;uBAGjB,EAAE,YAAY,cAAc,OAAO,oBAAoB,MAAM,MAAM,WAAW,UAAU,CAAC;KAC3G,EAAE,gBAAgB,YACnB,kBACA,2BAA2B,cAAc,OAAO,iBAAiB,MAAM,MAAM,OAAO,QAAQ,CAAC,GAAG;;AAGpG,MAAa,UAAU,OAAO,SAAS;KAClC,EAAE,6BACH,0BACA,GAAG;;;;MAID;;KAED,EAAE,gBACH,aACA,GAAG;2BACoB,EAAE,YAAY,gBAAgB,MAAM,CAAC;QACxD,cAAc,WAAW,UAAU,OAAO,UAAU,GAAG,CAAC;QACxD,SAAS;6BACY,EAAE,YAAY,gBAAgB,MAAM,CAAC;;;6BAGrC,EAAE,YAAY,gBAAgB,MAAM,CAAC;;gBAElD,SAAS;6BACI,EAAE,YAAY,gBAAgB,MAAM,CAAC;;;MAG5D;;KAED,EAAE,wBAAwB,gBAC3B,CAAC,0BACD,CAAC,aACD,GAAG;SACE,UAAU,GAAG,SAAS;;aAElB,EAAE,YAAY,eAAe,MAAM,CAAC;aACpC,EAAE,YAAY,eAAe,MAAM,CAAC;;;MAG3C;;KAED,EAAE,SAAS,wBAAwB,gBACpC,WAAW,QACX,CAAC,0BACD,CAAC,aACD,GAAG;;;6BAGsB,EAAE,YAAY,eAAe,MAAM,CAAC;UACvD,cAAc,WAAW,UAAU,OAAO,UAAU,GAAG,CAAC;;qCAEb;MAC/C;;;;ACnMN,MAAM,YAAY,OAAO,MAAM,MAAM,EAAE,MAAM,YAAY,CAAC;;KAErD,EAAE,aACH,UACA,GAAG;;;;MAID;;;;ACZN,MAAM,YAAY,OAAO,MAAM,MAAM,EAAE,MAAM,YAAY,CAAC;;;;;ACa1D,MAAM,YAAY,OAAO,GAA0D;;;mBAGhE,EAAE,2BAA4B,uBAAuB,SAAS,UAAW;MACtF,kBAAkB;OACjB,EAAE,gBAAgB;AACnB,KAAI,aAAa,KACf,QAAO,eAAe,UAAU;EAElC;;AAGN,MAAM,iBAAiB,SAAS;;;;;;;;;;;AAYhC,MAAM,SAAS,OAAO,GAAG;;eAEV,UAAU,gBAAgB;gCACT,EAAE,YAAY,cAAc,OAAO,gBAAgB,MAAM,MAAM,QAAQ,MAAM,CAAC;;;iBAG7F,eAAe;;AAGhC,MAAM,UAAU,OAAO,GAAG;;eAEX,UAAU,gBAAgB;;;;;mBAKtB,EAAE,YAAY,cAAc,OAAO,kBAAkB,MAAM,MAAM,QAAQ,MAAM,CAAC;;;AAInG,MAAM,iBAAiB,OAAO,GAAG;;;;;eAKlB,QAAQ,GAAG;iBACT,OAAO;;;;AAKxB,MAAM,eAAe,OAAO,QAAQ;;;;;;;iBAOnB,EAAE,YAAY,cAAc,OAAO,mBAAmB,MAAM,cAAc,CAAC;;;;AAwB5F,MAAM,eAAwD,EAC5D,UACA,WACA,oBACA,+BAA+B,MAC/B,UACA,UACA,SACA,WACA,WACA,YACA,OAAO,MACP,eAAe,YACX;AACJ,KAAI,WAAW,CAAC,WACd,KAAI,UACF,QACE,oBAAC,gBAAD;EACE,MAAK;EACL,aAAU;EACV,aAAU;EACV,cAAW;EACX,0BAAuB;YAEvB,oBAAC,cAAD,EAAc,MAAK,MAAO,CAAA;EACX,CAAA;KAGnB,QACE,oBAAC,WAAD;EAAW,aAAW;EAAU,sBAAsB;YACnD;EACS,CAAA;AAKlB,QACE,qBAAC,WAAD;EACE,aAAW;EACX,WAAW;EACA;EACX,sBAAsB;YAJxB;GAMG,aAAa,oBAAC,QAAD,EAAQ,aAAU,wBAAyB,CAAA;GACxD,aAAa,oBAAC,SAAD,EAAW,CAAA;GAEzB,qBAAC,OAAD;IAAa;IAAM,aAAW,aAAa,KAAA;cAA3C,CACE,oBAAC,WAAD;KAAW,QAAQ;eACjB,oBAAC,UAAD,EAAA,UAAW,UAAoB,CAAA;KACrB,CAAA,EACX,CAAC,WAAW,oBAAC,WAAD,EAAY,UAAqB,CAAA,CACxC;;GAEP,WAAW;GACF"}

package/dist/Table.d.mts CHANGED Viewed

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

package/dist/{TableBody-CBz2PjA-.d.mts → TableBody-BbC-H2qj.d.mts} RENAMED Viewed

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

package/dist/TableBody.d.mts CHANGED Viewed

@@ -1,2 +1,2 @@
-import { t as TableBody } from "./TableBody-CBz2PjA-.mjs";
+import { t as TableBody } from "./TableBody-BbC-H2qj.mjs";
 export { TableBody as default };