npm - @persona/design-system - Versions diffs - 0.3.0 → 0.4.0 - Mend

@persona/design-system 0.3.0 → 0.4.0

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 (507) hide show

package/dist/{Pagination-0VhVdXv0.mjs → Pagination-CtUz0gdA.mjs} RENAMED Viewed

@@ -1,11 +1,11 @@
-import { t as HStack } from "./Stack-Bl54WmhY.mjs";
-import { n as Button } from "./IconButton-BfDlic2K.mjs";
-import { n as Input } from "./Input-Bimw8KFj.mjs";
-import { n as Select, t as Option } from "./Select-D6MqSYVa.mjs";
+import { a as styled } from "./styledComponentsInterop-8zScIQyC.mjs";
+import { t as HStack } from "./Stack-Bre2oiov.mjs";
+import { n as Button } from "./IconButton-BgL3QUVO.mjs";
+import { n as Input } from "./Input-BWlvBYB3.mjs";
+import { n as Select, t as Option } from "./Select-U_vQhK1A.mjs";
 import { Color, Spacing, Typography } from "@persona/design-tokens";
-import styled from "styled-components";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { debounce } from "lodash-es";
 //#region components/Pagination/constants.ts
 const DEFAULT_PAGE_SIZE_OPTIONS = [
@@ -180,7 +180,7 @@ const Pagination = ({ pageSize, pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS, pag
 			pageSizeOptions,
 			handlePageSizeClick,
 			menuPortalContainer
-		}), totalCount > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", { children: [
+		}), totalCount > 0 && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", { children: [
 			"Showing ",
 			firstItemIndex,
 			"-",
@@ -202,4 +202,4 @@ var Pagination_default = Pagination;
 //#endregion
 export { MIN_PAGE_SIZE as a, DEFAULT_PAGE_SIZE_OPTIONS as i, PAGE_LIMIT_BEFORE_SCROLL_MODE as n, PageSelector as r, Pagination_default as t };
-//# sourceMappingURL=Pagination-0VhVdXv0.mjs.map
+//# sourceMappingURL=Pagination-CtUz0gdA.mjs.map

package/dist/{Pagination-0VhVdXv0.mjs.map → Pagination-CtUz0gdA.mjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Pagination-0VhVdXv0.mjs","names":[],"sources":["../components/Pagination/constants.ts","../components/Pagination/PageSelector.tsx","../components/Pagination/PageSizeSelector.tsx","../components/Pagination/Pagination.tsx","../components/Pagination/index.ts"],"sourcesContent":["export const DEFAULT_PAGE_SIZE_OPTIONS = [10, 25, 50, 100, 300];\nexport const MIN_PAGE_SIZE = 10;\n","import { debounce } from 'lodash-es';\nimport { useEffect, useMemo, useState } from 'react';\nimport styled from 'styled-components';\n\nimport Button from '@persona/design-system/components/Button';\nimport { Input } from '@persona/design-system/components/Input';\nimport { HStack } from '@persona/design-system/components/Stack';\nimport { Spacing } from '@persona/design-tokens';\n\nimport type { PaginationParams } from './types';\n\n// After a certain limit, it no longer makes sense for someone\n// to jump to the last page. Deep paging has performance limitations.\nexport const PAGE_LIMIT_BEFORE_SCROLL_MODE = 100;\n\nconst PageSelectorStack = styled(HStack).attrs({ justify: 'flex-end' })`\n padding: ${Spacing[2]};\n`;\n\nexport const PageInput = styled(HStack).attrs({ align: 'center' })`\n white-space: nowrap;\n`;\n\ninterface PageSelectorProps {\n paginationParams: PaginationParams;\n handlePageLinkClick: (pageNumber: number) => void;\n isLoading?: boolean;\n /*\n Called with the new page number after the page changes (next, prev, or\n * typed input). Lets the consumer react to page changes -- e.g. scroll the\n * page back to the top.\n /\n onPageChange?: (pageNumber: number) => void;\n}\n\nexport default function PageSelector({\n paginationParams,\n handlePageLinkClick,\n isLoading,\n onPageChange,\n}: PageSelectorProps) {\n const {\n 'current-page': currentPage,\n 'total-pages': totalPages,\n 'lower-bound': lowerBound,\n } = paginationParams ?? {};\n const [selectedPage, setSelectedPage] = useState<number \| undefined>(currentPage);\n\n // We don't use useDebounced to avoid function object reference issues.\n const handlePageLinkClickDebounced = useMemo(\n () => debounce(handlePageLinkClick, 500),\n [handlePageLinkClick],\n );\n\n // Keep input state synced to pagination state when other user action changes\n // pagination state.\n useEffect(() => {\n if (currentPage != null) {\n setSelectedPage(currentPage);\n }\n }, [currentPage]);\n\n if (!paginationParams) {\n return <div />;\n }\n\n return (\n <PageSelectorStack data-test='pagination__page-selector' id='pagination__page-selector'>\n <PageInput>\n {totalPages < PAGE_LIMIT_BEFORE_SCROLL_MODE && !lowerBound ? (\n <Input\n aria-label='Go to page number'\n size='sm'\n inputSize={2}\n onChange={(e) => {\n const value = e.target.valueAsNumber;\n if (Number.isNaN(value)) {\n setSelectedPage(undefined);\n } else {\n // Setting unbounded value feels smoother as the value is not corrected until after the fetch via useEffect.\n setSelectedPage(value);\n const boundedValue = Math.min(Math.max(e.target.valueAsNumber, 1), totalPages);\n handlePageLinkClickDebounced(boundedValue);\n onPageChange?.(boundedValue);\n }\n }}\n onBlur={(e) => {\n // Fill blank value on blur.\n if (Number.isNaN(e.target.valueAsNumber)) {\n setSelectedPage(currentPage);\n }\n }}\n min={1}\n max={totalPages}\n type='number'\n disabled={isLoading}\n value={selectedPage ?? ''}\n />\n ) : (\n currentPage + ' '\n )}\n of {lowerBound ? 'many' : totalPages} pages\n </PageInput>\n <Button\n id='pagination__page-selector--left'\n disabled={currentPage === 1 \|\| isLoading}\n onClick={() => {\n if (currentPage !== 1) {\n const prevPageNum = currentPage - 1;\n setSelectedPage(prevPageNum);\n handlePageLinkClick(prevPageNum);\n onPageChange?.(prevPageNum);\n }\n }}\n data-test='pagination__page-selector-paddle-left'\n variant='inverse'\n size='sm'\n width='auto'\n aria-label='Previous page'\n >\n Prev\n </Button>\n <Button\n id='pagination__page-selector--right'\n disabled={(currentPage === totalPages && !lowerBound) \|\| isLoading}\n onClick={() => {\n if (currentPage !== totalPages \|\| lowerBound) {\n const nextPageNum = currentPage + 1;\n setSelectedPage(nextPageNum);\n handlePageLinkClick(nextPageNum);\n onPageChange?.(nextPageNum);\n }\n }}\n data-test='pagination__page-selector-paddle-right'\n variant='inverse'\n size='sm'\n width='auto'\n aria-label='Next page'\n >\n Next\n </Button>\n </PageSelectorStack>\n );\n}\n","import styled from 'styled-components';\n\nimport Select, { Option } from '@persona/design-system/components/Select';\nimport { Color, Spacing, Typography } from '@persona/design-tokens';\n\nconst Selector = styled('div')`\n padding: ${Spacing[2]};\n display: flex;\n justify-content: flex-end;\n`;\n\nconst Label = styled.label`\n display: flex;\n align-items: center;\n white-space: nowrap;\n gap: ${Spacing[2]};\n padding: ${Spacing[2]};\n`;\n\ninterface PageSizeOptionProps {\n currentPageSize: number;\n pageSizeOption: number;\n}\n\nexport const PageSizeOption = styled('div')<PageSizeOptionProps>`\n padding: 0 ${Spacing[1]};\n color: ${Color.PrimaryPurple};\n cursor: pointer;\n\n ${({ currentPageSize, pageSizeOption }) => {\n if (currentPageSize === pageSizeOption) {\n return `\n ${Typography.TextMediumBold};\n text-decoration: underline;\n `;\n }\n }};\n\n &:hover {\n text-decoration: underline;\n }\n`;\n\ninterface PageSizeSelectorProps {\n pageSize: number;\n pageSizeOptions: number[];\n handlePageSizeClick: (pageSize: number) => void;\n /\n Element the options menu renders into. Pass a container inside the surrounding dialog when the\n * pager sits in a clipping container, where the menu would otherwise be cut off.\n /\n menuPortalContainer?: HTMLElement \| null;\n}\n\nconst PageSizeSelector = ({\n pageSize,\n pageSizeOptions,\n handlePageSizeClick,\n menuPortalContainer,\n}: PageSizeSelectorProps) => {\n // Add pageSize to selector just in case it isn't part of the options so UI doesn't look weird\n const pageSizes = [\n ...pageSizeOptions,\n ...(pageSizeOptions.includes(pageSize) ? [] : [pageSize]),\n ].sort((a, b) => a - b);\n\n return (\n <Selector data-test='pagination__page-size-selector'>\n <Label>\n Items per page:\n <Select\n value={pageSize.toString()}\n onValueChange={(val) => handlePageSizeClick(Number(val))}\n size='sm'\n portal={menuPortalContainer != null}\n portalContainer={menuPortalContainer}\n >\n {pageSizes.map((size) => (\n <Option key={size} value={size.toString()}>\n {size}\n </Option>\n ))}\n </Select>\n </Label>\n </Selector>\n );\n};\n\nexport default PageSizeSelector;\n","import styled from 'styled-components';\n\nimport { Color, Typography } from '@persona/design-tokens';\n\nimport { DEFAULT_PAGE_SIZE_OPTIONS } from './constants';\nimport PageSelector from './PageSelector';\nimport PageSizeSelector from './PageSizeSelector';\nimport type { PaginationParams } from './types';\n\n// NB: this is configured in config/initializers/kaminari.rb\nconst MAX_PAGES = 100;\n\nconst Container = styled('nav')`\n ${Typography.TextMedium};\n display: flex;\n align-items: center;\n justify-content: space-between;\n`;\n\nexport const PaginationInfo = styled('div')`\n display: flex;\n align-items: center;\n\n color: ${Color.TextPrimary};\n`;\n\ninterface PaginationProps {\n pageSize?: number;\n pageSizeOptions?: number[];\n paginationParams?: PaginationParams;\n handlePageSizeClick: (pageSize: number) => void;\n handlePageLinkClick: (pageNumber: number) => void;\n isLoading?: boolean;\n showPageSizeSelector?: boolean;\n /\n Called with the new page number after the page changes. Lets the consumer\n * react to page changes -- e.g. scroll the page back to the top.\n /\n onPageChange?: (pageNumber: number) => void;\n /\n Element the page-size menu renders into. Pass a container inside the surrounding dialog when\n * the pager sits in a clipping container, where the menu would otherwise be cut off.\n /\n menuPortalContainer?: HTMLElement \| null;\n}\n\nconst Pagination = ({\n pageSize,\n pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS,\n paginationParams,\n handlePageSizeClick,\n handlePageLinkClick,\n isLoading,\n showPageSizeSelector = true,\n onPageChange,\n menuPortalContainer,\n}: PaginationProps) => {\n if (!paginationParams \|\| !pageSize) {\n return <div />;\n }\n\n const {\n 'current-page': currentPage,\n 'total-count': totalCount,\n 'total-pages': totalPages,\n 'lower-bound': lowerBound,\n } = paginationParams;\n\n // If the total number of pages is the same as MAX_PAGES, we guess that the total number of\n // items might be limited by max pages, and that the total could change based on page size.\n // To limit user confusion here, we use 'many' instead of a specific number.\n const totalCountDisplay = lowerBound \|\| totalPages >= MAX_PAGES ? 'many' : totalCount;\n\n const lastItemIndex = lowerBound\n ? currentPage pageSize\n : Math.min(currentPage * pageSize, totalCount);\n const firstItemIndex = pageSize * (currentPage - 1) + 1;\n\n return (\n <Container role='navigation' aria-label='pagination'>\n {showPageSizeSelector && (\n <PageSizeSelector\n pageSize={pageSize}\n pageSizeOptions={pageSizeOptions}\n handlePageSizeClick={handlePageSizeClick}\n menuPortalContainer={menuPortalContainer}\n />\n )}\n {totalCount > 0 && (\n <>\n <div>\n Showing {firstItemIndex}-{lastItemIndex} of {totalCountDisplay} items\n </div>\n <PaginationInfo>\n <PageSelector\n paginationParams={paginationParams}\n handlePageLinkClick={handlePageLinkClick}\n isLoading={isLoading}\n onPageChange={onPageChange}\n />\n </PaginationInfo>\n </>\n )}\n </Container>\n );\n};\n\nexport default Pagination;\n","import Pagination from './Pagination';\n\nexport { default as PageSelector, PAGE_LIMIT_BEFORE_SCROLL_MODE } from './PageSelector';\nexport * from './constants';\nexport default Pagination;\n"],"mappings":"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"}
1	+ {"version":3,"file":"Pagination-CtUz0gdA.mjs","names":[],"sources":["../components/Pagination/constants.ts","../components/Pagination/PageSelector.tsx","../components/Pagination/PageSizeSelector.tsx","../components/Pagination/Pagination.tsx","../components/Pagination/index.ts"],"sourcesContent":["export const DEFAULT_PAGE_SIZE_OPTIONS = [10, 25, 50, 100, 300];\nexport const MIN_PAGE_SIZE = 10;\n","import { debounce } from 'lodash-es';\nimport { useEffect, useMemo, useState } from 'react';\nimport styled from 'styled-components';\n\nimport Button from '@persona/design-system/components/Button';\nimport { Input } from '@persona/design-system/components/Input';\nimport { HStack } from '@persona/design-system/components/Stack';\nimport { Spacing } from '@persona/design-tokens';\n\nimport type { PaginationParams } from './types';\n\n// After a certain limit, it no longer makes sense for someone\n// to jump to the last page. Deep paging has performance limitations.\nexport const PAGE_LIMIT_BEFORE_SCROLL_MODE = 100;\n\nconst PageSelectorStack = styled(HStack).attrs({ justify: 'flex-end' })`\n padding: ${Spacing[2]};\n`;\n\nexport const PageInput = styled(HStack).attrs({ align: 'center' })`\n white-space: nowrap;\n`;\n\ninterface PageSelectorProps {\n paginationParams: PaginationParams;\n handlePageLinkClick: (pageNumber: number) => void;\n isLoading?: boolean;\n /*\n Called with the new page number after the page changes (next, prev, or\n * typed input). Lets the consumer react to page changes -- e.g. scroll the\n * page back to the top.\n /\n onPageChange?: (pageNumber: number) => void;\n}\n\nexport default function PageSelector({\n paginationParams,\n handlePageLinkClick,\n isLoading,\n onPageChange,\n}: PageSelectorProps) {\n const {\n 'current-page': currentPage,\n 'total-pages': totalPages,\n 'lower-bound': lowerBound,\n } = paginationParams ?? {};\n const [selectedPage, setSelectedPage] = useState<number \| undefined>(currentPage);\n\n // We don't use useDebounced to avoid function object reference issues.\n const handlePageLinkClickDebounced = useMemo(\n () => debounce(handlePageLinkClick, 500),\n [handlePageLinkClick],\n );\n\n // Keep input state synced to pagination state when other user action changes\n // pagination state.\n useEffect(() => {\n if (currentPage != null) {\n setSelectedPage(currentPage);\n }\n }, [currentPage]);\n\n if (!paginationParams) {\n return <div />;\n }\n\n return (\n <PageSelectorStack data-test='pagination__page-selector' id='pagination__page-selector'>\n <PageInput>\n {totalPages < PAGE_LIMIT_BEFORE_SCROLL_MODE && !lowerBound ? (\n <Input\n aria-label='Go to page number'\n size='sm'\n inputSize={2}\n onChange={(e) => {\n const value = e.target.valueAsNumber;\n if (Number.isNaN(value)) {\n setSelectedPage(undefined);\n } else {\n // Setting unbounded value feels smoother as the value is not corrected until after the fetch via useEffect.\n setSelectedPage(value);\n const boundedValue = Math.min(Math.max(e.target.valueAsNumber, 1), totalPages);\n handlePageLinkClickDebounced(boundedValue);\n onPageChange?.(boundedValue);\n }\n }}\n onBlur={(e) => {\n // Fill blank value on blur.\n if (Number.isNaN(e.target.valueAsNumber)) {\n setSelectedPage(currentPage);\n }\n }}\n min={1}\n max={totalPages}\n type='number'\n disabled={isLoading}\n value={selectedPage ?? ''}\n />\n ) : (\n currentPage + ' '\n )}\n of {lowerBound ? 'many' : totalPages} pages\n </PageInput>\n <Button\n id='pagination__page-selector--left'\n disabled={currentPage === 1 \|\| isLoading}\n onClick={() => {\n if (currentPage !== 1) {\n const prevPageNum = currentPage - 1;\n setSelectedPage(prevPageNum);\n handlePageLinkClick(prevPageNum);\n onPageChange?.(prevPageNum);\n }\n }}\n data-test='pagination__page-selector-paddle-left'\n variant='inverse'\n size='sm'\n width='auto'\n aria-label='Previous page'\n >\n Prev\n </Button>\n <Button\n id='pagination__page-selector--right'\n disabled={(currentPage === totalPages && !lowerBound) \|\| isLoading}\n onClick={() => {\n if (currentPage !== totalPages \|\| lowerBound) {\n const nextPageNum = currentPage + 1;\n setSelectedPage(nextPageNum);\n handlePageLinkClick(nextPageNum);\n onPageChange?.(nextPageNum);\n }\n }}\n data-test='pagination__page-selector-paddle-right'\n variant='inverse'\n size='sm'\n width='auto'\n aria-label='Next page'\n >\n Next\n </Button>\n </PageSelectorStack>\n );\n}\n","import styled from 'styled-components';\n\nimport Select, { Option } from '@persona/design-system/components/Select';\nimport { Color, Spacing, Typography } from '@persona/design-tokens';\n\nconst Selector = styled('div')`\n padding: ${Spacing[2]};\n display: flex;\n justify-content: flex-end;\n`;\n\nconst Label = styled.label`\n display: flex;\n align-items: center;\n white-space: nowrap;\n gap: ${Spacing[2]};\n padding: ${Spacing[2]};\n`;\n\ninterface PageSizeOptionProps {\n currentPageSize: number;\n pageSizeOption: number;\n}\n\nexport const PageSizeOption = styled('div')<PageSizeOptionProps>`\n padding: 0 ${Spacing[1]};\n color: ${Color.PrimaryPurple};\n cursor: pointer;\n\n ${({ currentPageSize, pageSizeOption }) => {\n if (currentPageSize === pageSizeOption) {\n return `\n ${Typography.TextMediumBold};\n text-decoration: underline;\n `;\n }\n }};\n\n &:hover {\n text-decoration: underline;\n }\n`;\n\ninterface PageSizeSelectorProps {\n pageSize: number;\n pageSizeOptions: number[];\n handlePageSizeClick: (pageSize: number) => void;\n /\n Element the options menu renders into. Pass a container inside the surrounding dialog when the\n * pager sits in a clipping container, where the menu would otherwise be cut off.\n /\n menuPortalContainer?: HTMLElement \| null;\n}\n\nconst PageSizeSelector = ({\n pageSize,\n pageSizeOptions,\n handlePageSizeClick,\n menuPortalContainer,\n}: PageSizeSelectorProps) => {\n // Add pageSize to selector just in case it isn't part of the options so UI doesn't look weird\n const pageSizes = [\n ...pageSizeOptions,\n ...(pageSizeOptions.includes(pageSize) ? [] : [pageSize]),\n ].sort((a, b) => a - b);\n\n return (\n <Selector data-test='pagination__page-size-selector'>\n <Label>\n Items per page:\n <Select\n value={pageSize.toString()}\n onValueChange={(val) => handlePageSizeClick(Number(val))}\n size='sm'\n portal={menuPortalContainer != null}\n portalContainer={menuPortalContainer}\n >\n {pageSizes.map((size) => (\n <Option key={size} value={size.toString()}>\n {size}\n </Option>\n ))}\n </Select>\n </Label>\n </Selector>\n );\n};\n\nexport default PageSizeSelector;\n","import styled from 'styled-components';\n\nimport { Color, Typography } from '@persona/design-tokens';\n\nimport { DEFAULT_PAGE_SIZE_OPTIONS } from './constants';\nimport PageSelector from './PageSelector';\nimport PageSizeSelector from './PageSizeSelector';\nimport type { PaginationParams } from './types';\n\n// NB: this is configured in config/initializers/kaminari.rb\nconst MAX_PAGES = 100;\n\nconst Container = styled('nav')`\n ${Typography.TextMedium};\n display: flex;\n align-items: center;\n justify-content: space-between;\n`;\n\nexport const PaginationInfo = styled('div')`\n display: flex;\n align-items: center;\n\n color: ${Color.TextPrimary};\n`;\n\ninterface PaginationProps {\n pageSize?: number;\n pageSizeOptions?: number[];\n paginationParams?: PaginationParams;\n handlePageSizeClick: (pageSize: number) => void;\n handlePageLinkClick: (pageNumber: number) => void;\n isLoading?: boolean;\n showPageSizeSelector?: boolean;\n /\n Called with the new page number after the page changes. Lets the consumer\n * react to page changes -- e.g. scroll the page back to the top.\n /\n onPageChange?: (pageNumber: number) => void;\n /\n Element the page-size menu renders into. Pass a container inside the surrounding dialog when\n * the pager sits in a clipping container, where the menu would otherwise be cut off.\n /\n menuPortalContainer?: HTMLElement \| null;\n}\n\nconst Pagination = ({\n pageSize,\n pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS,\n paginationParams,\n handlePageSizeClick,\n handlePageLinkClick,\n isLoading,\n showPageSizeSelector = true,\n onPageChange,\n menuPortalContainer,\n}: PaginationProps) => {\n if (!paginationParams \|\| !pageSize) {\n return <div />;\n }\n\n const {\n 'current-page': currentPage,\n 'total-count': totalCount,\n 'total-pages': totalPages,\n 'lower-bound': lowerBound,\n } = paginationParams;\n\n // If the total number of pages is the same as MAX_PAGES, we guess that the total number of\n // items might be limited by max pages, and that the total could change based on page size.\n // To limit user confusion here, we use 'many' instead of a specific number.\n const totalCountDisplay = lowerBound \|\| totalPages >= MAX_PAGES ? 'many' : totalCount;\n\n const lastItemIndex = lowerBound\n ? currentPage pageSize\n : Math.min(currentPage * pageSize, totalCount);\n const firstItemIndex = pageSize * (currentPage - 1) + 1;\n\n return (\n <Container role='navigation' aria-label='pagination'>\n {showPageSizeSelector && (\n <PageSizeSelector\n pageSize={pageSize}\n pageSizeOptions={pageSizeOptions}\n handlePageSizeClick={handlePageSizeClick}\n menuPortalContainer={menuPortalContainer}\n />\n )}\n {totalCount > 0 && (\n <>\n <div>\n Showing {firstItemIndex}-{lastItemIndex} of {totalCountDisplay} items\n </div>\n <PaginationInfo>\n <PageSelector\n paginationParams={paginationParams}\n handlePageLinkClick={handlePageLinkClick}\n isLoading={isLoading}\n onPageChange={onPageChange}\n />\n </PaginationInfo>\n </>\n )}\n </Container>\n );\n};\n\nexport default Pagination;\n","import Pagination from './Pagination';\n\nexport { default as PageSelector, PAGE_LIMIT_BEFORE_SCROLL_MODE } from './PageSelector';\nexport * from './constants';\nexport default Pagination;\n"],"mappings":"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"}

package/dist/{Pagination-ygLutOst.d.mts → Pagination-j4hF7GOk.d.mts} RENAMED Viewed

@@ -1,4 +1,4 @@
-import { t as PaginationParams } from "./types-TV9nVfSe.mjs";
+import { t as PaginationParams } from "./types-Cg3aXHUh2.mjs";
 import * as _$styled_components0 from "styled-components";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
@@ -36,4 +36,4 @@ declare const Pagination: ({
 }: PaginationProps) => _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { PaginationInfo as n, Pagination as t };
-//# sourceMappingURL=Pagination-ygLutOst.d.mts.map
+//# sourceMappingURL=Pagination-j4hF7GOk.d.mts.map

package/dist/Pagination.d.mts CHANGED Viewed

@@ -1,2 +1,2 @@
-import { n as PaginationInfo, t as Pagination } from "./Pagination-ygLutOst.mjs";
+import { n as PaginationInfo, t as Pagination } from "./Pagination-j4hF7GOk.mjs";
 export { PaginationInfo, Pagination as default };

package/dist/{Pii-C7pA72Bh.mjs → Pii-RwKn-K84.mjs} RENAMED Viewed

@@ -1,4 +1,4 @@
-import { n as Sticker } from "./Sticker-xtDMuOoN.mjs";
+import { n as Sticker } from "./Sticker-CQ6sOKUj.mjs";
 import { Fragment, jsx } from "react/jsx-runtime";
 //#region components/Pii/Pii.tsx
 const Pii = ({ children, isRedacted, hideOnRedacted }) => {
@@ -16,4 +16,4 @@ var Pii_default = Pii;
 //#endregion
 export { Pii_default as t };
-//# sourceMappingURL=Pii-C7pA72Bh.mjs.map
+//# sourceMappingURL=Pii-RwKn-K84.mjs.map

package/dist/{Pii-C7pA72Bh.mjs.map → Pii-RwKn-K84.mjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Pii-~~C7pA72Bh~~.mjs","names":[],"sources":["../components/Pii/Pii.tsx","../components/Pii/index.ts"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport Sticker from '@persona/design-system/components/Sticker';\n\ninterface PiiProps {\n children?: ReactNode;\n isRedacted: boolean;\n hideOnRedacted?: boolean;\n}\n\nconst Pii = ({ children, isRedacted, hideOnRedacted }: PiiProps) => {\n if (isRedacted) {\n return hideOnRedacted ? null : <Sticker data-test='pii__redacted'>Redacted</Sticker>;\n }\n\n if (children == null \|\| children === '') {\n return null;\n }\n\n // There used to be code inserting a classname here in certain cases. There's\n // no other reason for this to be conditionally wrapped in a span, but\n // removing it breaks a lot of tests. Someday, the tests will be fixed...\n // hopefully.\n if (['string', 'number'].includes(typeof children)) {\n return <span>{children}</span>;\n }\n\n return <>{children}</>;\n};\n\nexport default Pii;\n","import Pii from './Pii';\n\nexport default Pii;\n"],"mappings":";;;AAUA,MAAM,OAAO,EAAE,UAAU,YAAY,qBAA+B;AAClE,KAAI,WACF,QAAO,iBAAiB,OAAO,oBAAC,SAAD;EAAS,aAAU;YAAgB;EAAkB,CAAA;AAGtF,KAAI,YAAY,QAAQ,aAAa,GACnC,QAAO;AAOT,KAAI,CAAC,UAAU,SAAS,CAAC,SAAS,OAAO,SAAS,CAChD,QAAO,oBAAC,QAAD,EAAO,UAAgB,CAAA;AAGhC,QAAO,oBAAA,UAAA,EAAG,UAAY,CAAA;;;;ACzBxB,IAAA,cAAe"}
1	+ {"version":3,"file":"Pii-RwKn-K84.mjs","names":[],"sources":["../components/Pii/Pii.tsx","../components/Pii/index.ts"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport Sticker from '@persona/design-system/components/Sticker';\n\ninterface PiiProps {\n children?: ReactNode;\n isRedacted: boolean;\n hideOnRedacted?: boolean;\n}\n\nconst Pii = ({ children, isRedacted, hideOnRedacted }: PiiProps) => {\n if (isRedacted) {\n return hideOnRedacted ? null : <Sticker data-test='pii__redacted'>Redacted</Sticker>;\n }\n\n if (children == null \|\| children === '') {\n return null;\n }\n\n // There used to be code inserting a classname here in certain cases. There's\n // no other reason for this to be conditionally wrapped in a span, but\n // removing it breaks a lot of tests. Someday, the tests will be fixed...\n // hopefully.\n if (['string', 'number'].includes(typeof children)) {\n return <span>{children}</span>;\n }\n\n return <>{children}</>;\n};\n\nexport default Pii;\n","import Pii from './Pii';\n\nexport default Pii;\n"],"mappings":";;;AAUA,MAAM,OAAO,EAAE,UAAU,YAAY,qBAA+B;AAClE,KAAI,WACF,QAAO,iBAAiB,OAAO,oBAAC,SAAD;EAAS,aAAU;YAAgB;EAAkB,CAAA;AAGtF,KAAI,YAAY,QAAQ,aAAa,GACnC,QAAO;AAOT,KAAI,CAAC,UAAU,SAAS,CAAC,SAAS,OAAO,SAAS,CAChD,QAAO,oBAAC,QAAD,EAAO,UAAgB,CAAA;AAGhC,QAAO,oBAAA,UAAA,EAAG,UAAY,CAAA;;;;ACzBxB,IAAA,cAAe"}

package/dist/Pii.d.mts CHANGED Viewed

@@ -1,5 +1,5 @@
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import { ReactNode } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 //#region components/Pii/Pii.d.ts
 interface PiiProps {

package/dist/PillShell.d.mts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { d as FilterSize } from "./types-C-TkDdkG.mjs";
+import { f as FilterSize } from "./types-V8UJX-rk.mjs";
 import * as _$react from "react";
 import { HTMLAttributes, ReactNode } from "react";

package/dist/{Popover-BkDpDdaO.mjs → Popover-DlXyKYL5.mjs} RENAMED Viewed

@@ -1,8 +1,8 @@
-import { t as Card_default } from "./Card-BMCB9eFC.mjs";
-import { i as Paragraph } from "./Text-RcEfNFLx.mjs";
-import styled, { css } from "styled-components";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { a as styled, r as css } from "./styledComponentsInterop-8zScIQyC.mjs";
+import { t as Card_default } from "./Card-CKrJtn1f.mjs";
+import { i as Paragraph } from "./Text-B0orb-cZ.mjs";
 import { Children, forwardRef, isValidElement } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { XIcon } from "@persona/icons";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 //#region components/Popover/Popover.tsx
@@ -64,7 +64,7 @@ const PopoverCard = forwardRef(function PopoverCard({ children, showCloseButton,
 		ref,
 		children: /* @__PURE__ */ jsxs(Card_default, {
 			elevated: true,
-			children: [!heading && showCloseButton && /* @__PURE__ */ jsx(PopoverClose, { "aria-label": "Close" }), noPadding ? /* @__PURE__ */ jsxs(Fragment, { children: [heading && header, children] }) : /* @__PURE__ */ jsxs(Card_default.Body, {
+			children: [!heading && showCloseButton && /* @__PURE__ */ jsx(PopoverClose, { "aria-label": "Close" }), noPadding ? /* @__PURE__ */ jsxs(Fragment$1, { children: [heading && header, children] }) : /* @__PURE__ */ jsxs(Card_default.Body, {
 				padding,
 				children: [heading && header, children]
 			})]
@@ -121,4 +121,4 @@ var Popover_default = Object.assign(Popover, {
 //#endregion
 export { PopoverPortal as a, PopoverContent as i, PopoverCard as n, PopoverTrigger as o, PopoverClose as r, Popover_default as s, PopoverAnchor as t };
-//# sourceMappingURL=Popover-BkDpDdaO.mjs.map
+//# sourceMappingURL=Popover-DlXyKYL5.mjs.map

package/dist/{Popover-BkDpDdaO.mjs.map → Popover-DlXyKYL5.mjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Popover-~~BkDpDdaO~~.mjs","names":["Card"],"sources":["../components/Popover/Popover.tsx"],"sourcesContent":["import * as PopoverPrimitive from '@radix-ui/react-popover';\nimport { Children, forwardRef, isValidElement, type ReactElement } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport type { Spacing } from '@persona/design-tokens';\nimport { XIcon } from '@persona/icons';\nimport Card from 'design-system/components/Card';\nimport { Paragraph } from 'design-system/components/Text';\n\nexport const PopoverTrigger = PopoverPrimitive.Trigger;\nexport const PopoverAnchor = PopoverPrimitive.Anchor;\nexport const PopoverPortal = PopoverPrimitive.Portal;\n\n// TODO: Investigate how we can get date popovers to work properly with the new date picker\nexport const PopoverContent = PopoverPrimitive.PopoverContent;\n\nconst PopoverContentStyled = styled(PopoverContent)<{ zIndex?: number; $maxHeight?: string }>`\n z-index: ${({ zIndex }) => zIndex \|\| 'inherit'};\n ${({ $maxHeight }) =>\n $maxHeight &&\n css`\n max-height: ${$maxHeight};\n overflow: auto;\n `}\n`;\n\nconst PopoverCloseButton = styled(PopoverPrimitive.Close)<{ isHeader?: boolean }>`\n ${({ isHeader }) =>\n !isHeader &&\n css`\n position: absolute;\n top: 8px;\n right: 8px;\n `}\n ${({ isHeader }) =>\n isHeader &&\n css`\n height: 16px;\n `}\n background: transparent;\n border: 0;\n cursor: pointer;\n`;\n\nconst HeadingContainer = styled.div`\n display: flex;\n align-items: center;\n justify-content: space-between;\n`;\n\nexport const PopoverClose = (\n props: PopoverPrimitive.PopoverCloseProps & { isHeader?: boolean },\n) => {\n return (\n <PopoverCloseButton {...props}>\n <XIcon />\n </PopoverCloseButton>\n );\n};\n\nexport interface PopoverCardProps extends PopoverPrimitive.PopoverContentProps {\n /*\n Display X button to close popover\n /\n showCloseButton?: boolean;\n\n /\n Remove padding from Card\n /\n noPadding?: boolean;\n\n padding?: Spacing;\n\n /\n Text to display in the header of the card\n /\n heading?: string;\n\n /\n Z-index to apply to the popover content\n /\n zIndex?: number;\n\n /\n Maximum height for the popover content.\n /\n maxHeight?: string;\n}\n\n/\n Card to be used in Popover contexts. Inherits props from Radix UI Popper.Content.\n /\nexport const PopoverCard = forwardRef<\n React.ElementRef<typeof PopoverPrimitive.Content>,\n PopoverCardProps\n>(function PopoverCard(\n { children, showCloseButton, heading, noPadding, padding, zIndex, maxHeight, ...props },\n ref,\n) {\n const header = heading && (\n <HeadingContainer>\n <Paragraph size='md' weight='bold' color='primary'>\n {heading}\n </Paragraph>\n {showCloseButton && <PopoverClose aria-label='Close' isHeader />}\n </HeadingContainer>\n );\n return (\n <PopoverContentStyled\n asChild\n sideOffset={8}\n collisionPadding={8}\n zIndex={zIndex}\n $maxHeight={maxHeight}\n {...props}\n ref={ref}\n >\n <Card elevated>\n {!heading && showCloseButton && <PopoverClose aria-label='Close' />}\n {noPadding ? (\n <>\n {heading && header}\n {children}\n </>\n ) : (\n <Card.Body padding={padding}>\n {heading && header}\n {children}\n </Card.Body>\n )}\n </Card>\n </PopoverContentStyled>\n );\n});\n\ninterface PopoverProps extends PopoverPrimitive.PopoverProps {\n /\n Component to use as trigger. Radix UI trigger component props will be merged with this element.\n /\n trigger?: ReactElement;\n\n /\n Props to apply to Popover.Trigger within\n /\n triggerProps?: PopoverPrimitive.PopoverTriggerProps;\n\n /\n An optional element to position the Popover.Content against.\n * If this part is not used, the content will position alongside the trigger.\n /\n anchor?: ReactElement<PopoverPrimitive.PopoverAnchorProps>;\n\n /\n Props to apply to Popover.Card within\n /\n contentProps?: PopoverCardProps;\n\n /\n Render content within a portal\n /\n portal?: boolean;\n\n /\n Props applied to Radix UI Portal component\n /\n portalProps?: PopoverPrimitive.PopoverPortalProps;\n}\n\nconst Popover = ({\n children,\n trigger,\n triggerProps,\n contentProps,\n anchor,\n portal = true,\n portalProps,\n ...props\n}: PopoverProps) => {\n let triggerElem;\n let contentElem;\n let anchorElem = anchor;\n\n const renderChildren = Children.toArray(children).filter((child) => {\n if (isValidElement(child)) {\n switch (child.type) {\n case PopoverPrimitive.Trigger:\n triggerElem = child;\n return false;\n case PopoverCard:\n case PopoverPrimitive.Content:\n contentElem = child;\n break;\n case PopoverPrimitive.Anchor:\n / @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n anchorElem = child;\n return false;\n }\n }\n\n return true;\n });\n\n const content = contentElem \|\| <PopoverCard {...contentProps}>{renderChildren}</PopoverCard>;\n\n return (\n <PopoverPrimitive.Root {...props}>\n {triggerElem \|\|\n (trigger && (\n <PopoverTrigger asChild {...triggerProps}>\n {trigger}\n </PopoverTrigger>\n ))}\n {anchorElem}\n {portal ? <PopoverPortal {...portalProps}>{content}</PopoverPortal> : content}\n </PopoverPrimitive.Root>\n );\n};\n\nexport default Object.assign(Popover, {\n Trigger: PopoverTrigger,\n Anchor: PopoverAnchor,\n Portal: PopoverPortal,\n Content: PopoverContent,\n Card: PopoverCard,\n Close: PopoverClose,\n});\n"],"mappings":";;;;;;;;AASA,MAAa,iBAAiB,iBAAiB;AAC/C,MAAa,gBAAgB,iBAAiB;AAC9C,MAAa,gBAAgB,iBAAiB;AAG9C,MAAa,iBAAiB,iBAAiB;AAE/C,MAAM,uBAAuB,OAAO,eAAe;cACrC,EAAE,aAAa,UAAU,UAAU;KAC5C,EAAE,iBACH,cACA,GAAG;oBACa,WAAW;;MAEzB;;AAGN,MAAM,qBAAqB,OAAO,iBAAiB,MAAM;KACpD,EAAE,eACH,CAAC,YACD,GAAG;;;;MAID;KACD,EAAE,eACH,YACA,GAAG;;MAED;;;;;AAMN,MAAM,mBAAmB,OAAO,GAAG;;;;;AAMnC,MAAa,gBACX,UACG;AACH,QACE,oBAAC,oBAAD;EAAoB,GAAI;YACtB,oBAAC,OAAD,EAAS,CAAA;EACU,CAAA;;;;;AAoCzB,MAAa,cAAc,WAGzB,SAAS,YACT,EAAE,UAAU,iBAAiB,SAAS,WAAW,SAAS,QAAQ,WAAW,GAAG,SAChF,KACA;CACA,MAAM,SAAS,WACb,qBAAC,kBAAD,EAAA,UAAA,CACE,oBAAC,WAAD;EAAW,MAAK;EAAK,QAAO;EAAO,OAAM;YACtC;EACS,CAAA,EACX,mBAAmB,oBAAC,cAAD;EAAc,cAAW;EAAQ,UAAA;EAAW,CAAA,CAC/C,EAAA,CAAA;AAErB,QACE,oBAAC,sBAAD;EACE,SAAA;EACA,YAAY;EACZ,kBAAkB;EACV;EACR,YAAY;EACZ,GAAI;EACC;YAEL,qBAACA,cAAD;GAAM,UAAA;aAAN,CACG,CAAC,WAAW,mBAAmB,oBAAC,cAAD,EAAc,cAAW,SAAU,CAAA,EAClE,YACC,qBAAA,~~UAAA~~,EAAA,UAAA,CACG,WAAW,QACX,SACA,EAAA,CAAA,GAEH,qBAACA,aAAK,MAAN;IAAoB;cAApB,CACG,WAAW,QACX,SACS;MAET;;EACc,CAAA;EAEzB;AAmCF,MAAM,WAAW,EACf,UACA,SACA,cACA,cACA,QACA,SAAS,MACT,aACA,GAAG,YACe;CAClB,IAAI;CACJ,IAAI;CACJ,IAAI,aAAa;CAEjB,MAAM,iBAAiB,SAAS,QAAQ,SAAS,CAAC,QAAQ,UAAU;AAClE,MAAI,eAAe,MAAM,CACvB,SAAQ,MAAM,MAAd;GACE,KAAK,iBAAiB;AACpB,kBAAc;AACd,WAAO;GACT,KAAK;GACL,KAAK,iBAAiB;AACpB,kBAAc;AACd;GACF,KAAK,iBAAiB;AAEpB,iBAAa;AACb,WAAO;;AAIb,SAAO;GACP;CAEF,MAAM,UAAU,eAAe,oBAAC,aAAD;EAAa,GAAI;YAAe;EAA6B,CAAA;AAE5F,QACE,qBAAC,iBAAiB,MAAlB;EAAuB,GAAI;YAA3B;GACG,eACE,WACC,oBAAC,gBAAD;IAAgB,SAAA;IAAQ,GAAI;cACzB;IACc,CAAA;GAEpB;GACA,SAAS,oBAAC,eAAD;IAAe,GAAI;cAAc;IAAwB,CAAA,GAAG;GAChD;;;AAI5B,IAAA,kBAAe,OAAO,OAAO,SAAS;CACpC,SAAS;CACT,QAAQ;CACR,QAAQ;CACR,SAAS;CACT,MAAM;CACN,OAAO;CACR,CAAC"}
1	+ {"version":3,"file":"Popover-DlXyKYL5.mjs","names":["Card"],"sources":["../components/Popover/Popover.tsx"],"sourcesContent":["import * as PopoverPrimitive from '@radix-ui/react-popover';\nimport { Children, forwardRef, isValidElement, type ReactElement } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport type { Spacing } from '@persona/design-tokens';\nimport { XIcon } from '@persona/icons';\nimport Card from 'design-system/components/Card';\nimport { Paragraph } from 'design-system/components/Text';\n\nexport const PopoverTrigger = PopoverPrimitive.Trigger;\nexport const PopoverAnchor = PopoverPrimitive.Anchor;\nexport const PopoverPortal = PopoverPrimitive.Portal;\n\n// TODO: Investigate how we can get date popovers to work properly with the new date picker\nexport const PopoverContent = PopoverPrimitive.PopoverContent;\n\nconst PopoverContentStyled = styled(PopoverContent)<{ zIndex?: number; $maxHeight?: string }>`\n z-index: ${({ zIndex }) => zIndex \|\| 'inherit'};\n ${({ $maxHeight }) =>\n $maxHeight &&\n css`\n max-height: ${$maxHeight};\n overflow: auto;\n `}\n`;\n\nconst PopoverCloseButton = styled(PopoverPrimitive.Close)<{ isHeader?: boolean }>`\n ${({ isHeader }) =>\n !isHeader &&\n css`\n position: absolute;\n top: 8px;\n right: 8px;\n `}\n ${({ isHeader }) =>\n isHeader &&\n css`\n height: 16px;\n `}\n background: transparent;\n border: 0;\n cursor: pointer;\n`;\n\nconst HeadingContainer = styled.div`\n display: flex;\n align-items: center;\n justify-content: space-between;\n`;\n\nexport const PopoverClose = (\n props: PopoverPrimitive.PopoverCloseProps & { isHeader?: boolean },\n) => {\n return (\n <PopoverCloseButton {...props}>\n <XIcon />\n </PopoverCloseButton>\n );\n};\n\nexport interface PopoverCardProps extends PopoverPrimitive.PopoverContentProps {\n /*\n Display X button to close popover\n /\n showCloseButton?: boolean;\n\n /\n Remove padding from Card\n /\n noPadding?: boolean;\n\n padding?: Spacing;\n\n /\n Text to display in the header of the card\n /\n heading?: string;\n\n /\n Z-index to apply to the popover content\n /\n zIndex?: number;\n\n /\n Maximum height for the popover content.\n /\n maxHeight?: string;\n}\n\n/\n Card to be used in Popover contexts. Inherits props from Radix UI Popper.Content.\n /\nexport const PopoverCard = forwardRef<\n React.ElementRef<typeof PopoverPrimitive.Content>,\n PopoverCardProps\n>(function PopoverCard(\n { children, showCloseButton, heading, noPadding, padding, zIndex, maxHeight, ...props },\n ref,\n) {\n const header = heading && (\n <HeadingContainer>\n <Paragraph size='md' weight='bold' color='primary'>\n {heading}\n </Paragraph>\n {showCloseButton && <PopoverClose aria-label='Close' isHeader />}\n </HeadingContainer>\n );\n return (\n <PopoverContentStyled\n asChild\n sideOffset={8}\n collisionPadding={8}\n zIndex={zIndex}\n $maxHeight={maxHeight}\n {...props}\n ref={ref}\n >\n <Card elevated>\n {!heading && showCloseButton && <PopoverClose aria-label='Close' />}\n {noPadding ? (\n <>\n {heading && header}\n {children}\n </>\n ) : (\n <Card.Body padding={padding}>\n {heading && header}\n {children}\n </Card.Body>\n )}\n </Card>\n </PopoverContentStyled>\n );\n});\n\ninterface PopoverProps extends PopoverPrimitive.PopoverProps {\n /\n Component to use as trigger. Radix UI trigger component props will be merged with this element.\n /\n trigger?: ReactElement;\n\n /\n Props to apply to Popover.Trigger within\n /\n triggerProps?: PopoverPrimitive.PopoverTriggerProps;\n\n /\n An optional element to position the Popover.Content against.\n * If this part is not used, the content will position alongside the trigger.\n /\n anchor?: ReactElement<PopoverPrimitive.PopoverAnchorProps>;\n\n /\n Props to apply to Popover.Card within\n /\n contentProps?: PopoverCardProps;\n\n /\n Render content within a portal\n /\n portal?: boolean;\n\n /\n Props applied to Radix UI Portal component\n /\n portalProps?: PopoverPrimitive.PopoverPortalProps;\n}\n\nconst Popover = ({\n children,\n trigger,\n triggerProps,\n contentProps,\n anchor,\n portal = true,\n portalProps,\n ...props\n}: PopoverProps) => {\n let triggerElem;\n let contentElem;\n let anchorElem = anchor;\n\n const renderChildren = Children.toArray(children).filter((child) => {\n if (isValidElement(child)) {\n switch (child.type) {\n case PopoverPrimitive.Trigger:\n triggerElem = child;\n return false;\n case PopoverCard:\n case PopoverPrimitive.Content:\n contentElem = child;\n break;\n case PopoverPrimitive.Anchor:\n / @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n anchorElem = child;\n return false;\n }\n }\n\n return true;\n });\n\n const content = contentElem \|\| <PopoverCard {...contentProps}>{renderChildren}</PopoverCard>;\n\n return (\n <PopoverPrimitive.Root {...props}>\n {triggerElem \|\|\n (trigger && (\n <PopoverTrigger asChild {...triggerProps}>\n {trigger}\n </PopoverTrigger>\n ))}\n {anchorElem}\n {portal ? <PopoverPortal {...portalProps}>{content}</PopoverPortal> : content}\n </PopoverPrimitive.Root>\n );\n};\n\nexport default Object.assign(Popover, {\n Trigger: PopoverTrigger,\n Anchor: PopoverAnchor,\n Portal: PopoverPortal,\n Content: PopoverContent,\n Card: PopoverCard,\n Close: PopoverClose,\n});\n"],"mappings":";;;;;;;;AASA,MAAa,iBAAiB,iBAAiB;AAC/C,MAAa,gBAAgB,iBAAiB;AAC9C,MAAa,gBAAgB,iBAAiB;AAG9C,MAAa,iBAAiB,iBAAiB;AAE/C,MAAM,uBAAuB,OAAO,eAAe;cACrC,EAAE,aAAa,UAAU,UAAU;KAC5C,EAAE,iBACH,cACA,GAAG;oBACa,WAAW;;MAEzB;;AAGN,MAAM,qBAAqB,OAAO,iBAAiB,MAAM;KACpD,EAAE,eACH,CAAC,YACD,GAAG;;;;MAID;KACD,EAAE,eACH,YACA,GAAG;;MAED;;;;;AAMN,MAAM,mBAAmB,OAAO,GAAG;;;;;AAMnC,MAAa,gBACX,UACG;AACH,QACE,oBAAC,oBAAD;EAAoB,GAAI;YACtB,oBAAC,OAAD,EAAS,CAAA;EACU,CAAA;;;;;AAoCzB,MAAa,cAAc,WAGzB,SAAS,YACT,EAAE,UAAU,iBAAiB,SAAS,WAAW,SAAS,QAAQ,WAAW,GAAG,SAChF,KACA;CACA,MAAM,SAAS,WACb,qBAAC,kBAAD,EAAA,UAAA,CACE,oBAAC,WAAD;EAAW,MAAK;EAAK,QAAO;EAAO,OAAM;YACtC;EACS,CAAA,EACX,mBAAmB,oBAAC,cAAD;EAAc,cAAW;EAAQ,UAAA;EAAW,CAAA,CAC/C,EAAA,CAAA;AAErB,QACE,oBAAC,sBAAD;EACE,SAAA;EACA,YAAY;EACZ,kBAAkB;EACV;EACR,YAAY;EACZ,GAAI;EACC;YAEL,qBAACA,cAAD;GAAM,UAAA;aAAN,CACG,CAAC,WAAW,mBAAmB,oBAAC,cAAD,EAAc,cAAW,SAAU,CAAA,EAClE,YACC,qBAAA,YAAA,EAAA,UAAA,CACG,WAAW,QACX,SACA,EAAA,CAAA,GAEH,qBAACA,aAAK,MAAN;IAAoB;cAApB,CACG,WAAW,QACX,SACS;MAET;;EACc,CAAA;EAEzB;AAmCF,MAAM,WAAW,EACf,UACA,SACA,cACA,cACA,QACA,SAAS,MACT,aACA,GAAG,YACe;CAClB,IAAI;CACJ,IAAI;CACJ,IAAI,aAAa;CAEjB,MAAM,iBAAiB,SAAS,QAAQ,SAAS,CAAC,QAAQ,UAAU;AAClE,MAAI,eAAe,MAAM,CACvB,SAAQ,MAAM,MAAd;GACE,KAAK,iBAAiB;AACpB,kBAAc;AACd,WAAO;GACT,KAAK;GACL,KAAK,iBAAiB;AACpB,kBAAc;AACd;GACF,KAAK,iBAAiB;AAEpB,iBAAa;AACb,WAAO;;AAIb,SAAO;GACP;CAEF,MAAM,UAAU,eAAe,oBAAC,aAAD;EAAa,GAAI;YAAe;EAA6B,CAAA;AAE5F,QACE,qBAAC,iBAAiB,MAAlB;EAAuB,GAAI;YAA3B;GACG,eACE,WACC,oBAAC,gBAAD;IAAgB,SAAA;IAAQ,GAAI;cACzB;IACc,CAAA;GAEpB;GACA,SAAS,oBAAC,eAAD;IAAe,GAAI;cAAc;IAAwB,CAAA,GAAG;GAChD;;;AAI5B,IAAA,kBAAe,OAAO,OAAO,SAAS;CACpC,SAAS;CACT,QAAQ;CACR,QAAQ;CACR,SAAS;CACT,MAAM;CACN,OAAO;CACR,CAAC"}

package/dist/Popover.d.mts CHANGED Viewed

@@ -1,7 +1,7 @@
 import { Spacing } from "@persona/design-tokens";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import * as _$react from "react";
 import { ReactElement } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 //#region components/Popover/Popover.d.ts

package/dist/ProgressBar.d.mts CHANGED Viewed

@@ -1,6 +1,6 @@
 import { Color } from "@persona/design-tokens";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import { ComponentPropsWithoutRef } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 //#region components/ProgressBar/ProgressBar.d.ts
 type ProgressBarStatus = 'default' | 'exception' | 'success';

package/dist/ProgressIndicator.d.mts CHANGED Viewed

@@ -1,8 +1,8 @@
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import { ComponentPropsWithoutRef } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 //#region components/ProgressIndicator/ProgressIndicator.d.ts
-type StepStatus = 'uncompleted' | 'completed' | 'error';
+type StepStatus = 'uncompleted' | 'completed' | 'warning' | 'error';
 interface ProgressIndicatorStep {
   id: string;
   label: string;
@@ -20,7 +20,7 @@ interface ProgressIndicatorProps extends ComponentPropsWithoutRef<'ol'> {
    * Called when a clickable step is activated via click or keyboard.
    *
    * Clickability rules:
-   * - `completed` and `error` steps are clickable (navigate back to review/edit)
+   * - `completed`, `warning`, and `error` steps are clickable (navigate back to review/edit)
    * - The active step is not clickable (user is already there)
    * - Upcoming `uncompleted` steps are not clickable (sequential progression required)
    */
@@ -30,7 +30,9 @@ interface ProgressIndicatorProps extends ComponentPropsWithoutRef<'ol'> {
  * ProgressIndicator guides users through a sequence of steps.
  *
  * Interaction rules:
- * - **Completed / error** steps are clickable — navigate back to review or fix.
+ * - **Completed / warning / error** steps are clickable — navigate back to review or fix.
+ * - **Warning** does not block forward progression; later uncompleted steps remain reachable.
+ * - **Error** blocks forward progression — treat it as the terminal step in the sequence.
  * - **Active** step is not clickable — the user is already there.
  * - **Upcoming (uncompleted)** steps are not clickable — sequential progression required.
  *

package/dist/{PseudoClassProps-CcSlKNev.d.mts → PseudoClassProps-BPdn-ofQ.d.mts} RENAMED Viewed

@@ -9,4 +9,4 @@ interface PseudoClassProps {
 }
 //#endregion
 export { PseudoClassProps as t };
-//# sourceMappingURL=PseudoClassProps-CcSlKNev.d.mts.map
+//# sourceMappingURL=PseudoClassProps-BPdn-ofQ.d.mts.map

package/dist/PseudoClassProps.d.mts CHANGED Viewed

@@ -1,2 +1,2 @@
-import { t as PseudoClassProps } from "./PseudoClassProps-CcSlKNev.mjs";
+import { t as PseudoClassProps } from "./PseudoClassProps-BPdn-ofQ.mjs";
 export { PseudoClassProps as default };

package/dist/{Radio-BaFutxgV.mjs → Radio-cLL9oatf.mjs} RENAMED Viewed

@@ -1,11 +1,11 @@
+import { a as styled, r as css } from "./styledComponentsInterop-8zScIQyC.mjs";
+import "./variables/transitions.mjs";
 import { isChecked, isDisabled, isFocusedVisible, isHovered, isNotDisabled } from "./lib/pseudoClass.mjs";
 import { focusStyle } from "./mixins/focus.mjs";
-import "./variables/transitions.mjs";
-import { n as useFormField } from "./useFormField-eftOPiXj.mjs";
+import { n as useFormField } from "./useFormField-Bz2iMPBO.mjs";
 import { Color, Spacing, Typography } from "@persona/design-tokens";
-import styled, { css } from "styled-components";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { uniqueId } from "lodash-es";
 //#region components/Radio/Radio.tsx
 const Container = styled.div`
@@ -144,4 +144,4 @@ const Radio = forwardRef(function Radio({ id, label, className, value, disabled,
 //#endregion
 export { Radio as t };
-//# sourceMappingURL=Radio-BaFutxgV.mjs.map
+//# sourceMappingURL=Radio-cLL9oatf.mjs.map

package/dist/{Radio-BaFutxgV.mjs.map → Radio-cLL9oatf.mjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Radio-~~BaFutxgV~~.mjs","names":[],"sources":["../components/Radio/Radio.tsx"],"sourcesContent":["import { uniqueId } from 'lodash-es';\nimport {\n type ChangeEvent,\n type ComponentPropsWithoutRef,\n forwardRef,\n type ReactNode,\n useMemo,\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Color, Spacing, Typography } from '@persona/design-tokens';\nimport useFormField from 'design-system/components/FormControl/useFormField';\nimport {\n isChecked,\n isDisabled,\n isFocusedVisible,\n isHovered,\n isNotDisabled,\n} from 'design-system/lib/pseudoClass';\nimport { focusStyle } from 'design-system/mixins/focus';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\nconst Container = styled.div<{ size: 'md' \| 'sm'; disabled?: boolean }>`\n cursor: pointer;\n display: flex;\n align-items: flex-start;\n flex-wrap: nowrap;\n position: relative;\n\n ${({ size }) =>\n size === 'sm' &&\n css`\n align-items: center;\n height: 16px;\n `}\n\n &${isDisabled} {\n cursor: default;\n }\n`;\n\nconst Label = styled.label<{ disabled: boolean; size: 'md' \| 'sm' }>`\n cursor: inherit;\n padding: 0 ${Spacing[2]};\n color: ${Color.TextSecondary};\n\n ${({ size }) =>\n size === 'sm'\n ? css`\n ${Typography.TextSmall};\n line-height: 16px;\n `\n : css`\n ${Typography.TextMedium};\n `}\n\n ${({ theme, disabled }) =>\n disabled &&\n css`\n cursor: default;\n color: ${theme.color.text.disabled};\n `}\n`;\n\nconst RadioCircle = styled.div<{ size: 'md' \| 'sm' }>`\n cursor: pointer;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: box-shadow ${TransitionDuration.Fast};\n border-radius: 100%;\n height: ${Spacing[4]};\n width: ${Spacing[4]};\n flex: 0 0 16px;\n box-sizing: border-box;\n margin-top: ${({ size }) => (size === 'sm' ? 0 : '2px')};\n border: 1px solid ${Color.BorderInputCheckbox};\n background: ${Color.PrimaryWhite};\n`;\n\nconst RadioInput = styled.input<{ $size: 'md' \| 'sm' }>`\n cursor: inherit;\n height: ${Spacing[4]};\n width: ${Spacing[4]};\n margin: 0;\n border: 0;\n opacity: 0;\n overflow: hidden;\n position: absolute;\n top: ${({ $size }) => ($size === 'sm' ? 0 : '2px')};\n border-radius: 100%;\n z-index: 10; // this needs to be above the dot in the checked input\n\n &${isHovered}${isNotDisabled} ~ ${RadioCircle} {\n border-color: ${Color.BorderInputCheckboxHover};\n }\n\n &${isChecked}, &:checked {\n &${isHovered}${isNotDisabled} ~ ${RadioCircle} {\n background: ${Color.BackgroundInputActiveHover};\n border-color: ${Color.BackgroundInputActiveHover};\n }\n }\n\n &${isFocusedVisible}${isNotDisabled} ~ ${RadioCircle} {\n ${focusStyle}\n }\n\n // RadioCircle state styles; Uses pure CSS\n &${isDisabled} + ${RadioCircle} {\n cursor: default;\n background: ${Color.BackgroundInputDisabled};\n border-color: ${Color.BorderInputDisabled};\n }\n\n &:checked + ${RadioCircle}, &${isChecked} + ${RadioCircle} {\n border-color: ${Color.BackgroundInputActive};\n background: ${Color.BackgroundInputActive};\n\n &::after {\n background: ${Color.BackgroundInputDefault};\n height: 6px;\n width: 6px;\n border-radius: 100%;\n content: '';\n position: absolute;\n }\n }\n\n &:checked${isDisabled} + ${RadioCircle}, &${isChecked}${isDisabled} + ${RadioCircle} {\n border-color: ${Color.BackgroundInputActiveDisabled};\n background: ${Color.BackgroundInputActiveDisabled};\n }\n`;\n\nexport interface RadioProps extends Omit<ComponentPropsWithoutRef<'input'>, 'size'> {\n /*\n If not provided, a unique ID will be generated.\n */\n id?: string;\n onChange?: (e: ChangeEvent<HTMLInputElement>) => void;\n label?: ReactNode;\n disabled?: boolean;\n checked?: boolean;\n value: string;\n 'data-test'?: string;\n size?: 'md' \| 'sm';\n}\n\nexport const Radio = forwardRef<HTMLInputElement, RadioProps>(function Radio(\n {\n id,\n label,\n className,\n value,\n disabled,\n checked,\n defaultChecked,\n onChange,\n 'data-test': dataTest,\n size = 'md',\n ...elemProps\n },\n ref,\n) {\n const field = useFormField({ disabled });\n const generatedId = useMemo(() => uniqueId('pds_radio__'), []);\n\n return (\n <Container className={className} disabled={disabled} data-test={dataTest} size={size}>\n <RadioInput\n id={id \|\| generatedId}\n disabled={field.disabled}\n onChange={onChange}\n type='radio'\n value={value}\n checked={checked}\n defaultChecked={defaultChecked}\n ref={ref}\n $size={size}\n {...elemProps}\n />\n <RadioCircle size={size} />\n {label && (\n <Label htmlFor={id \|\| generatedId} disabled={disabled ?? false} size={size}>\n {label}\n </Label>\n )}\n </Container>\n );\n});\n\nexport default Radio;\n"],"mappings":";;;;;;;;;;AAsBA,MAAM,YAAY,OAAO,GAA8C;;;;;;;KAOlE,EAAE,WACH,SAAS,QACT,GAAG;;;MAGD;;KAED,WAAW;;;;AAKhB,MAAM,QAAQ,OAAO,KAA+C;;eAErD,QAAQ,GAAG;WACf,MAAM,cAAc;;KAE1B,EAAE,WACH,SAAS,OACL,GAAG;YACC,WAAW,UAAU;;YAGzB,GAAG;YACC,WAAW,WAAW;UACxB;;KAEL,EAAE,OAAO,eACV,YACA,GAAG;;eAEQ,MAAM,MAAM,KAAK,SAAS;MACnC;;AAGN,MAAM,cAAc,OAAO,GAA0B;;;;;mCAKF;;YAEvC,QAAQ,GAAG;WACZ,QAAQ,GAAG;;;iBAGL,EAAE,WAAY,SAAS,OAAO,IAAI,MAAO;sBACpC,MAAM,oBAAoB;gBAChC,MAAM,aAAa;;AAGnC,MAAM,aAAa,OAAO,KAA6B;;YAE3C,QAAQ,GAAG;WACZ,QAAQ,GAAG;;;;;;UAMZ,EAAE,YAAa,UAAU,OAAO,IAAI,MAAO;;;;KAIhD,YAAY,cAAc,KAAK,YAAY;oBAC5B,MAAM,yBAAyB;;;KAG9C,UAAU;OACR,YAAY,cAAc,KAAK,YAAY;oBAC9B,MAAM,2BAA2B;sBAC/B,MAAM,2BAA2B;;;;KAIlD,mBAAmB,cAAc,KAAK,YAAY;MACjD,WAAW;;;;KAIZ,WAAW,KAAK,YAAY;;kBAEf,MAAM,wBAAwB;oBAC5B,MAAM,oBAAoB;;;gBAG9B,YAAY,KAAK,UAAU,KAAK,YAAY;oBACxC,MAAM,sBAAsB;kBAC9B,MAAM,sBAAsB;;;oBAG1B,MAAM,uBAAuB;;;;;;;;;aASpC,WAAW,KAAK,YAAY,KAAK,YAAY,WAAW,KAAK,YAAY;oBAClE,MAAM,8BAA8B;kBACtC,MAAM,8BAA8B;;;AAkBtD,MAAa,QAAQ,WAAyC,SAAS,MACrE,EACE,IACA,OACA,WACA,OACA,UACA,SACA,gBACA,UACA,aAAa,UACb,OAAO,MACP,GAAG,aAEL,KACA;CACA,MAAM,QAAQ,aAAa,EAAE,UAAU,CAAC;CACxC,MAAM,cAAc,cAAc,SAAS,cAAc,EAAE,EAAE,CAAC;AAE9D,QACE,qBAAC,WAAD;EAAsB;EAAqB;EAAU,aAAW;EAAgB;YAAhF;GACE,oBAAC,YAAD;IACE,IAAI,MAAM;IACV,UAAU,MAAM;IACN;IACV,MAAK;IACE;IACE;IACO;IACX;IACL,OAAO;IACP,GAAI;IACJ,CAAA;GACF,oBAAC,aAAD,EAAmB,MAAQ,CAAA;GAC1B,SACC,oBAAC,OAAD;IAAO,SAAS,MAAM;IAAa,UAAU,YAAY;IAAa;cACnE;IACK,CAAA;GAEA;;EAEd"}
1	+ {"version":3,"file":"Radio-cLL9oatf.mjs","names":[],"sources":["../components/Radio/Radio.tsx"],"sourcesContent":["import { uniqueId } from 'lodash-es';\nimport {\n type ChangeEvent,\n type ComponentPropsWithoutRef,\n forwardRef,\n type ReactNode,\n useMemo,\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Color, Spacing, Typography } from '@persona/design-tokens';\nimport useFormField from 'design-system/components/FormControl/useFormField';\nimport {\n isChecked,\n isDisabled,\n isFocusedVisible,\n isHovered,\n isNotDisabled,\n} from 'design-system/lib/pseudoClass';\nimport { focusStyle } from 'design-system/mixins/focus';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\nconst Container = styled.div<{ size: 'md' \| 'sm'; disabled?: boolean }>`\n cursor: pointer;\n display: flex;\n align-items: flex-start;\n flex-wrap: nowrap;\n position: relative;\n\n ${({ size }) =>\n size === 'sm' &&\n css`\n align-items: center;\n height: 16px;\n `}\n\n &${isDisabled} {\n cursor: default;\n }\n`;\n\nconst Label = styled.label<{ disabled: boolean; size: 'md' \| 'sm' }>`\n cursor: inherit;\n padding: 0 ${Spacing[2]};\n color: ${Color.TextSecondary};\n\n ${({ size }) =>\n size === 'sm'\n ? css`\n ${Typography.TextSmall};\n line-height: 16px;\n `\n : css`\n ${Typography.TextMedium};\n `}\n\n ${({ theme, disabled }) =>\n disabled &&\n css`\n cursor: default;\n color: ${theme.color.text.disabled};\n `}\n`;\n\nconst RadioCircle = styled.div<{ size: 'md' \| 'sm' }>`\n cursor: pointer;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: box-shadow ${TransitionDuration.Fast};\n border-radius: 100%;\n height: ${Spacing[4]};\n width: ${Spacing[4]};\n flex: 0 0 16px;\n box-sizing: border-box;\n margin-top: ${({ size }) => (size === 'sm' ? 0 : '2px')};\n border: 1px solid ${Color.BorderInputCheckbox};\n background: ${Color.PrimaryWhite};\n`;\n\nconst RadioInput = styled.input<{ $size: 'md' \| 'sm' }>`\n cursor: inherit;\n height: ${Spacing[4]};\n width: ${Spacing[4]};\n margin: 0;\n border: 0;\n opacity: 0;\n overflow: hidden;\n position: absolute;\n top: ${({ $size }) => ($size === 'sm' ? 0 : '2px')};\n border-radius: 100%;\n z-index: 10; // this needs to be above the dot in the checked input\n\n &${isHovered}${isNotDisabled} ~ ${RadioCircle} {\n border-color: ${Color.BorderInputCheckboxHover};\n }\n\n &${isChecked}, &:checked {\n &${isHovered}${isNotDisabled} ~ ${RadioCircle} {\n background: ${Color.BackgroundInputActiveHover};\n border-color: ${Color.BackgroundInputActiveHover};\n }\n }\n\n &${isFocusedVisible}${isNotDisabled} ~ ${RadioCircle} {\n ${focusStyle}\n }\n\n // RadioCircle state styles; Uses pure CSS\n &${isDisabled} + ${RadioCircle} {\n cursor: default;\n background: ${Color.BackgroundInputDisabled};\n border-color: ${Color.BorderInputDisabled};\n }\n\n &:checked + ${RadioCircle}, &${isChecked} + ${RadioCircle} {\n border-color: ${Color.BackgroundInputActive};\n background: ${Color.BackgroundInputActive};\n\n &::after {\n background: ${Color.BackgroundInputDefault};\n height: 6px;\n width: 6px;\n border-radius: 100%;\n content: '';\n position: absolute;\n }\n }\n\n &:checked${isDisabled} + ${RadioCircle}, &${isChecked}${isDisabled} + ${RadioCircle} {\n border-color: ${Color.BackgroundInputActiveDisabled};\n background: ${Color.BackgroundInputActiveDisabled};\n }\n`;\n\nexport interface RadioProps extends Omit<ComponentPropsWithoutRef<'input'>, 'size'> {\n /*\n If not provided, a unique ID will be generated.\n */\n id?: string;\n onChange?: (e: ChangeEvent<HTMLInputElement>) => void;\n label?: ReactNode;\n disabled?: boolean;\n checked?: boolean;\n value: string;\n 'data-test'?: string;\n size?: 'md' \| 'sm';\n}\n\nexport const Radio = forwardRef<HTMLInputElement, RadioProps>(function Radio(\n {\n id,\n label,\n className,\n value,\n disabled,\n checked,\n defaultChecked,\n onChange,\n 'data-test': dataTest,\n size = 'md',\n ...elemProps\n },\n ref,\n) {\n const field = useFormField({ disabled });\n const generatedId = useMemo(() => uniqueId('pds_radio__'), []);\n\n return (\n <Container className={className} disabled={disabled} data-test={dataTest} size={size}>\n <RadioInput\n id={id \|\| generatedId}\n disabled={field.disabled}\n onChange={onChange}\n type='radio'\n value={value}\n checked={checked}\n defaultChecked={defaultChecked}\n ref={ref}\n $size={size}\n {...elemProps}\n />\n <RadioCircle size={size} />\n {label && (\n <Label htmlFor={id \|\| generatedId} disabled={disabled ?? false} size={size}>\n {label}\n </Label>\n )}\n </Container>\n );\n});\n\nexport default Radio;\n"],"mappings":";;;;;;;;;;AAsBA,MAAM,YAAY,OAAO,GAA8C;;;;;;;KAOlE,EAAE,WACH,SAAS,QACT,GAAG;;;MAGD;;KAED,WAAW;;;;AAKhB,MAAM,QAAQ,OAAO,KAA+C;;eAErD,QAAQ,GAAG;WACf,MAAM,cAAc;;KAE1B,EAAE,WACH,SAAS,OACL,GAAG;YACC,WAAW,UAAU;;YAGzB,GAAG;YACC,WAAW,WAAW;UACxB;;KAEL,EAAE,OAAO,eACV,YACA,GAAG;;eAEQ,MAAM,MAAM,KAAK,SAAS;MACnC;;AAGN,MAAM,cAAc,OAAO,GAA0B;;;;;mCAKF;;YAEvC,QAAQ,GAAG;WACZ,QAAQ,GAAG;;;iBAGL,EAAE,WAAY,SAAS,OAAO,IAAI,MAAO;sBACpC,MAAM,oBAAoB;gBAChC,MAAM,aAAa;;AAGnC,MAAM,aAAa,OAAO,KAA6B;;YAE3C,QAAQ,GAAG;WACZ,QAAQ,GAAG;;;;;;UAMZ,EAAE,YAAa,UAAU,OAAO,IAAI,MAAO;;;;KAIhD,YAAY,cAAc,KAAK,YAAY;oBAC5B,MAAM,yBAAyB;;;KAG9C,UAAU;OACR,YAAY,cAAc,KAAK,YAAY;oBAC9B,MAAM,2BAA2B;sBAC/B,MAAM,2BAA2B;;;;KAIlD,mBAAmB,cAAc,KAAK,YAAY;MACjD,WAAW;;;;KAIZ,WAAW,KAAK,YAAY;;kBAEf,MAAM,wBAAwB;oBAC5B,MAAM,oBAAoB;;;gBAG9B,YAAY,KAAK,UAAU,KAAK,YAAY;oBACxC,MAAM,sBAAsB;kBAC9B,MAAM,sBAAsB;;;oBAG1B,MAAM,uBAAuB;;;;;;;;;aASpC,WAAW,KAAK,YAAY,KAAK,YAAY,WAAW,KAAK,YAAY;oBAClE,MAAM,8BAA8B;kBACtC,MAAM,8BAA8B;;;AAkBtD,MAAa,QAAQ,WAAyC,SAAS,MACrE,EACE,IACA,OACA,WACA,OACA,UACA,SACA,gBACA,UACA,aAAa,UACb,OAAO,MACP,GAAG,aAEL,KACA;CACA,MAAM,QAAQ,aAAa,EAAE,UAAU,CAAC;CACxC,MAAM,cAAc,cAAc,SAAS,cAAc,EAAE,EAAE,CAAC;AAE9D,QACE,qBAAC,WAAD;EAAsB;EAAqB;EAAU,aAAW;EAAgB;YAAhF;GACE,oBAAC,YAAD;IACE,IAAI,MAAM;IACV,UAAU,MAAM;IACN;IACV,MAAK;IACE;IACE;IACO;IACX;IACL,OAAO;IACP,GAAI;IACJ,CAAA;GACF,oBAAC,aAAD,EAAmB,MAAQ,CAAA;GAC1B,SACC,oBAAC,OAAD;IAAO,SAAS,MAAM;IAAa,UAAU,YAAY;IAAa;cACnE;IACK,CAAA;GAEA;;EAEd"}

package/dist/{RadioGroup-ClMzOZl0.mjs → RadioGroup-BGo_kXKh.mjs} RENAMED Viewed

@@ -1,9 +1,9 @@
+import { a as styled, r as css } from "./styledComponentsInterop-8zScIQyC.mjs";
 import useControlled from "./lib/useControlled.mjs";
-import { t as Radio } from "./Radio-BaFutxgV.mjs";
+import { t as Radio } from "./Radio-cLL9oatf.mjs";
 import { Spacing } from "@persona/design-tokens";
-import styled, { css } from "styled-components";
-import { jsx } from "react/jsx-runtime";
 import { Children, cloneElement } from "react";
+import { jsx } from "react/jsx-runtime";
 //#region components/RadioGroup/RadioGroup.tsx
 const Container = styled.div`
   & > div {
@@ -47,4 +47,4 @@ const RadioGroup = ({ children, defaultValue, name, value: valueProp, onChange,
 //#endregion
 export { RadioGroup as t };
-//# sourceMappingURL=RadioGroup-ClMzOZl0.mjs.map
+//# sourceMappingURL=RadioGroup-BGo_kXKh.mjs.map

package/dist/{RadioGroup-ClMzOZl0.mjs.map → RadioGroup-BGo_kXKh.mjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RadioGroup-~~ClMzOZl0~~.mjs","names":[],"sources":["../components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import {\n type ChangeEvent,\n Children,\n cloneElement,\n type ComponentPropsWithoutRef,\n type ReactElement,\n type VFC,\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\nimport Radio, { type RadioProps } from 'design-system/components/Radio';\nimport useControlled from 'design-system/lib/useControlled';\n\nconst Container = styled.div<{ size: 'md' \| 'sm'; horizontal?: boolean }>`\n & > div {\n margin-bottom: ${Spacing[2]};\n }\n\n ${({ horizontal }) =>\n horizontal &&\n css`\n display: flex;\n align-items: center;\n & > div {\n margin-right: ${Spacing[2]};\n }\n `}\n`;\n\nexport interface RadioGroupProps extends ComponentPropsWithoutRef<'div'> {\n defaultValue?: any;\n name?: string;\n value?: any;\n onChange?: (value: any) => void;\n /*\n Direction of radio group\n /\n horizontal?: boolean;\n /\n Size of radio buttons within the group\n /\n size?: 'md' \| 'sm';\n}\n\nexport const RadioGroup: VFC<RadioGroupProps> = ({\n children,\n defaultValue,\n name,\n value: valueProp,\n onChange,\n horizontal = false,\n size = 'md',\n ...elemProps\n}) => {\n const [value, setValue] = useControlled({\n controlledValue: valueProp,\n default: defaultValue,\n });\n\n return (\n <Container role='radiogroup' horizontal={horizontal} size={size} {...elemProps}>\n {/ @ts-expect-error [strict-migration] The following line is not strict; please fix! */}\n {Children.map(children, (child: ReactElement<RadioProps>) => {\n if (child?.type === Radio && (typeof valueProp !== 'undefined' \|\| onChange)) {\n return cloneElement(child, {\n name,\n size,\n checked: child.props.value === value,\n onChange: (e: ChangeEvent<HTMLInputElement>) => {\n const newVal = e.target.value;\n if (typeof valueProp !== 'undefined' && onChange) {\n onChange(newVal);\n } else {\n setValue(newVal);\n }\n },\n });\n }\n\n if (name) {\n return cloneElement(child, { name });\n }\n\n return child;\n })}\n </Container>\n );\n};\n\nexport default RadioGroup;\n"],"mappings":";;;;;;;AAcA,MAAM,YAAY,OAAO,GAAgD;;qBAEpD,QAAQ,GAAG;;;KAG3B,EAAE,iBACH,cACA,GAAG;;;;wBAIiB,QAAQ,GAAG;;MAE7B;;AAkBN,MAAa,cAAoC,EAC/C,UACA,cACA,MACA,OAAO,WACP,UACA,aAAa,OACb,OAAO,MACP,GAAG,gBACC;CACJ,MAAM,CAAC,OAAO,YAAY,cAAc;EACtC,iBAAiB;EACjB,SAAS;EACV,CAAC;AAEF,QACE,oBAAC,WAAD;EAAW,MAAK;EAAyB;EAAkB;EAAM,GAAI;YAElE,SAAS,IAAI,WAAW,UAAoC;AAC3D,OAAI,OAAO,SAAS,UAAU,OAAO,cAAc,eAAe,UAChE,QAAO,aAAa,OAAO;IACzB;IACA;IACA,SAAS,MAAM,MAAM,UAAU;IAC/B,WAAW,MAAqC;KAC9C,MAAM,SAAS,EAAE,OAAO;AACxB,SAAI,OAAO,cAAc,eAAe,SACtC,UAAS,OAAO;SAEhB,UAAS,OAAO;;IAGrB,CAAC;AAGJ,OAAI,KACF,QAAO,aAAa,OAAO,EAAE,MAAM,CAAC;AAGtC,UAAO;IACP;EACQ,CAAA"}
1	+ {"version":3,"file":"RadioGroup-BGo_kXKh.mjs","names":[],"sources":["../components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import {\n type ChangeEvent,\n Children,\n cloneElement,\n type ComponentPropsWithoutRef,\n type ReactElement,\n type VFC,\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\nimport Radio, { type RadioProps } from 'design-system/components/Radio';\nimport useControlled from 'design-system/lib/useControlled';\n\nconst Container = styled.div<{ size: 'md' \| 'sm'; horizontal?: boolean }>`\n & > div {\n margin-bottom: ${Spacing[2]};\n }\n\n ${({ horizontal }) =>\n horizontal &&\n css`\n display: flex;\n align-items: center;\n & > div {\n margin-right: ${Spacing[2]};\n }\n `}\n`;\n\nexport interface RadioGroupProps extends ComponentPropsWithoutRef<'div'> {\n defaultValue?: any;\n name?: string;\n value?: any;\n onChange?: (value: any) => void;\n /*\n Direction of radio group\n /\n horizontal?: boolean;\n /\n Size of radio buttons within the group\n /\n size?: 'md' \| 'sm';\n}\n\nexport const RadioGroup: VFC<RadioGroupProps> = ({\n children,\n defaultValue,\n name,\n value: valueProp,\n onChange,\n horizontal = false,\n size = 'md',\n ...elemProps\n}) => {\n const [value, setValue] = useControlled({\n controlledValue: valueProp,\n default: defaultValue,\n });\n\n return (\n <Container role='radiogroup' horizontal={horizontal} size={size} {...elemProps}>\n {/ @ts-expect-error [strict-migration] The following line is not strict; please fix! */}\n {Children.map(children, (child: ReactElement<RadioProps>) => {\n if (child?.type === Radio && (typeof valueProp !== 'undefined' \|\| onChange)) {\n return cloneElement(child, {\n name,\n size,\n checked: child.props.value === value,\n onChange: (e: ChangeEvent<HTMLInputElement>) => {\n const newVal = e.target.value;\n if (typeof valueProp !== 'undefined' && onChange) {\n onChange(newVal);\n } else {\n setValue(newVal);\n }\n },\n });\n }\n\n if (name) {\n return cloneElement(child, { name });\n }\n\n return child;\n })}\n </Container>\n );\n};\n\nexport default RadioGroup;\n"],"mappings":";;;;;;;AAcA,MAAM,YAAY,OAAO,GAAgD;;qBAEpD,QAAQ,GAAG;;;KAG3B,EAAE,iBACH,cACA,GAAG;;;;wBAIiB,QAAQ,GAAG;;MAE7B;;AAkBN,MAAa,cAAoC,EAC/C,UACA,cACA,MACA,OAAO,WACP,UACA,aAAa,OACb,OAAO,MACP,GAAG,gBACC;CACJ,MAAM,CAAC,OAAO,YAAY,cAAc;EACtC,iBAAiB;EACjB,SAAS;EACV,CAAC;AAEF,QACE,oBAAC,WAAD;EAAW,MAAK;EAAyB;EAAkB;EAAM,GAAI;YAElE,SAAS,IAAI,WAAW,UAAoC;AAC3D,OAAI,OAAO,SAAS,UAAU,OAAO,cAAc,eAAe,UAChE,QAAO,aAAa,OAAO;IACzB;IACA;IACA,SAAS,MAAM,MAAM,UAAU;IAC/B,WAAW,MAAqC;KAC9C,MAAM,SAAS,EAAE,OAAO;AACxB,SAAI,OAAO,cAAc,eAAe,SACtC,UAAS,OAAO;SAEhB,UAAS,OAAO;;IAGrB,CAAC;AAGJ,OAAI,KACF,QAAO,aAAa,OAAO,EAAE,MAAM,CAAC;AAGtC,UAAO;IACP;EACQ,CAAA"}

package/dist/{RadioGroup-BuJaitgG.d.mts → RadioGroup-BqULCH-D.d.mts} RENAMED Viewed

@@ -18,4 +18,4 @@ interface RadioGroupProps extends ComponentPropsWithoutRef<'div'> {
 declare const RadioGroup: VFC<RadioGroupProps>;
 //#endregion
 export { RadioGroupProps as n, RadioGroup as t };
-//# sourceMappingURL=RadioGroup-BuJaitgG.d.mts.map
+//# sourceMappingURL=RadioGroup-BqULCH-D.d.mts.map

package/dist/RadioGroup.d.mts CHANGED Viewed

@@ -1,2 +1,2 @@
-import { n as RadioGroupProps, t as RadioGroup } from "./RadioGroup-BuJaitgG.mjs";
+import { n as RadioGroupProps, t as RadioGroup } from "./RadioGroup-BqULCH-D.mjs";
 export { RadioGroup, RadioGroup as default, RadioGroupProps };

package/dist/RangeCalendar.d.mts CHANGED Viewed

@@ -1,5 +1,6 @@
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { a as DateFilterPreset } from "./types-Bsf1VsW6.mjs";
 import { Ref } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import { DateRange, RangeCalendarProps as RangeCalendarProps$1 } from "react-aria";
 import { CalendarDate, DateValue as DateValue$1 } from "@internationalized/date";
@@ -12,6 +13,8 @@ interface RangeCalendarProps extends RangeCalendarProps$1<DateValue$1> {
   visibleMonths?: 1 | 2;
   onSelectDate?: (d: CalendarDate) => void;
   setDateMode: (mode: 'start' | 'end' | null) => void;
+  onPresetSelect?: (preset: DateFilterPreset, commit: () => void) => void;
+  selectedPreset?: DateFilterPreset | null;
   /**
    * From setValue of DateRangePicker
    */
@@ -26,6 +29,8 @@ declare const RangeCalendar: ({
   hidePresets,
   visibleMonths,
   setDateMode,
+  onPresetSelect,
+  selectedPreset,
   setValue,
   granularity,
   ...props

package/dist/RangeCalendarPresets.d.mts CHANGED Viewed

@@ -1,25 +1,35 @@
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { a as DateFilterPreset } from "./types-Bsf1VsW6.mjs";
 import * as _$react from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import { RangeCalendarState } from "react-stately";
-import { CalendarDate } from "@internationalized/date";
+import { CalendarDate, DateValue } from "@internationalized/date";
 import { RangeValue } from "@react-types/shared";
 //#region components/DatePicker/Calendar/RangeCalendarPresets.d.ts
 interface DateRangePreset {
+  id: DateFilterPreset;
   label: string;
   range: RangeValue<CalendarDate>;
 }
+/** The preset windows the picker offers; the codec resolves the same ids on read. */
+declare const getDefaultPresets: (tz: string) => DateRangePreset[];
 interface DateRangePickerPresetsProps {
   presetsFn?: (tz: string) => DateRangePreset[];
   state: RangeCalendarState;
   setDateMode: (mode: 'start' | 'end' | null) => void;
+  onPresetSelect?: (preset: DateFilterPreset, commit: () => void) => void;
+  selectedPreset?: DateFilterPreset | null;
+  commitRange: (value: RangeValue<DateValue>) => void;
 }
 declare const _default: _$react.MemoExoticComponent<({
   presetsFn,
+  commitRange,
   state,
   setDateMode,
+  onPresetSelect,
+  selectedPreset,
   ...props
 }: DateRangePickerPresetsProps) => _$react_jsx_runtime0.JSX.Element>;
 //#endregion
-export { _default as default };
+export { _default as default, getDefaultPresets };
 //# sourceMappingURL=RangeCalendarPresets.d.mts.map

package/dist/ResizableVerticalPanel.d.mts ADDED Viewed

@@ -0,0 +1,22 @@
+import { ResizablePanelState } from "./lib/useResizablePanel.mjs";
+import { FC, ReactNode } from "react";
+//#region components/BottomPanel/ResizableVerticalPanel.d.ts
+interface ResizableVerticalPanelProps {
+  /** Panel body, rendered in the scrollable content area below the header. */
+  children: ReactNode;
+  /** Content for the header row, left of the maximize/minimize/close buttons. */
+  headerContent?: ReactNode;
+  /** State and drag/resize handlers from `useResizablePanel`. */
+  hookState: ResizablePanelState;
+  /** Minimum panel height in px. */
+  minHeight: number;
+}
+/**
+ * Bottom-anchored panel with a drag-to-resize top edge, a header row, and
+ * maximize/minimize/close controls.
+ */
+declare const ResizableVerticalPanel: FC<ResizableVerticalPanelProps>;
+//#endregion
+export { ResizableVerticalPanel };
+//# sourceMappingURL=ResizableVerticalPanel.d.mts.map

package/dist/ResizeHandle.d.mts ADDED Viewed

@@ -0,0 +1,19 @@
+import { FC, RefObject } from "react";
+//#region components/BottomPanel/ResizeHandle.d.ts
+interface ResizeHandleProps {
+  ariaLabel: string;
+  /** Fires on double-click or Enter/Space so the host can toggle/reset the size. */
+  onDoubleClick?: () => void;
+  /** Called on each pointer move with the new top edge position (clientY) in px. */
+  onMoveTo: (position: number) => void;
+  /** Called once when the drag ends (pointerup, cancel, or lost capture). */
+  onRelease?: () => void;
+  /** The panel being resized; its edge seeds the grab offset so the handle doesn't jump. */
+  panelRef: RefObject<HTMLDivElement>;
+}
+/** Vertical resize handle pinned to the top edge of a bottom-anchored panel. */
+declare const ResizeHandle: FC<ResizeHandleProps>;
+//#endregion
+export { ResizeHandle };
+//# sourceMappingURL=ResizeHandle.d.mts.map

package/dist/RightPanel.d.mts ADDED Viewed

@@ -0,0 +1,41 @@
+import { ReactNode } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+//#region components/RightPanel/RightPanel.d.ts
+interface RightPanelProps {
+  /** Controlled open state */
+  open?: boolean;
+  /** Panel id */
+  id?: string;
+  /** Called when open state changes */
+  onOpenChange?: (isOpen: boolean) => void;
+  /** Panel title rendered in header */
+  title: string;
+  /** Optional description below title */
+  description?: string;
+  /** Panel content */
+  children: ReactNode;
+  /** Panel width in pixels */
+  width?: number;
+  /** Minimum width when resizable. Defaults to 450px. */
+  minWidth?: number;
+  /** When true, the panel is drag-resizable via its left edge. */
+  resizable?: boolean;
+  /** When true, render a shimmer placeholder in the body instead of children. */
+  loading?: boolean;
+}
+declare const RightPanel: ({
+  id,
+  open,
+  onOpenChange,
+  title,
+  description,
+  children,
+  width,
+  minWidth,
+  resizable,
+  loading
+}: RightPanelProps) => _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { RightPanel, RightPanel as default, RightPanelProps };
+//# sourceMappingURL=RightPanel.d.mts.map

package/dist/RightPanelLoadingContent.d.mts ADDED Viewed

@@ -0,0 +1,7 @@
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+//#region components/RightPanel/RightPanelLoadingContent.d.ts
+declare const RightPanelLoadingContent: () => _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { RightPanelLoadingContent as default };
+//# sourceMappingURL=RightPanelLoadingContent.d.mts.map

package/dist/RightPanelResizeHandle.d.mts ADDED Viewed

@@ -0,0 +1,14 @@
+import { FC } from "react";
+//#region components/RightPanel/RightPanelResizeHandle.d.ts
+interface RightPanelResizeHandleProps {
+  onMove: (deltaX: number) => void;
+  onMoveTo?: (clientX: number) => void;
+  onMoveStart?: () => void;
+  onMoveEnd?: () => void;
+  onDoubleClick?: () => void;
+}
+declare const RightPanelResizeHandle: FC<RightPanelResizeHandleProps>;
+//#endregion
+export { RightPanelResizeHandleProps, RightPanelResizeHandle as default };
+//# sourceMappingURL=RightPanelResizeHandle.d.mts.map

package/dist/RuleEditorFields.d.mts CHANGED Viewed

@@ -1,7 +1,7 @@
-import { a as FilterField, c as FilterOperator, d as FilterSize, l as FilterRule, u as FilterRuleValue } from "./types-C-TkDdkG.mjs";
-import { t as FieldRegistry } from "./FieldRegistry-DdA63Vnh.mjs";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { a as FilterField, c as FilterOperator, d as FilterRuleValueChange, f as FilterSize, l as FilterRule, u as FilterRuleValue } from "./types-V8UJX-rk.mjs";
+import { t as FieldRegistry } from "./FieldRegistry-D6niLExM.mjs";
 import { ReactNode } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 //#region components/DataTable/TableControls/FiltersV2/AdvancedFilterRulesPopover/RuleEditorFields.d.ts
 interface RuleEditorFieldsProps {
@@ -15,8 +15,8 @@ interface RuleEditorFieldsProps {
   operatorConfigurable: boolean;
   onFieldChange: (groupIndex: number, ruleIndex: number, nextFieldId: string) => void;
   onOperatorChange: (groupIndex: number, ruleIndex: number, nextOperator: FilterOperator) => void;
-  onValueChange: (groupIndex: number, ruleIndex: number, nextValue: FilterRuleValue) => void;
-  renderValueControl: (field: FilterField, operator: FilterOperator, value: FilterRuleValue, onChange: (value: FilterRuleValue) => void) => ReactNode;
+  onValueChange: (groupIndex: number, ruleIndex: number, nextValue: FilterRuleValue, relativeDate?: FilterRule['relativeDate'] | null) => void;
+  renderValueControl: (field: FilterField, operator: FilterOperator, value: FilterRuleValue, onChange: FilterRuleValueChange, relativeDate?: FilterRule['relativeDate']) => ReactNode;
 }
 declare function RuleEditorFields({
   registry,

package/dist/RulesPill.d.mts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { d as FilterSize, n as CompoundExpression } from "./types-C-TkDdkG.mjs";
+import { f as FilterSize, n as CompoundExpression } from "./types-V8UJX-rk.mjs";
 import * as _$react from "react";
 import { HTMLAttributes } from "react";