@persona/design-system 0.1.7 → 0.1.8

package/dist/layouts/LayoutLoadingShimmer/index.cjs

@@ -0,0 +1,139 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_chunk = require("../../chunk-CKQMccvm.cjs");
+const require_Stack = require("../../Stack-UeifHn3c.cjs");
+const require_LoadingShimmer = require("../../LoadingShimmer-Dx6ncVUV.cjs");
+const require_CardV2 = require("../../CardV2-DJXgFomd.cjs");
+const require_PageHeader = require("../../PageHeader-CUDnarkt.cjs");
+const require_Table = require("../../Table-DxLvJYWK.cjs");
+let _persona_design_tokens = require("@persona/design-tokens");
+let styled_components = require("styled-components");
+styled_components = require_chunk.__toESM(styled_components, 1);
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region layouts/containers.tsx
+const Layout = styled_components.default.div`
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  padding: ${_persona_design_tokens.Spacing[7]};
+`;
+const DetailLayout = styled_components.default.div`
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  padding: ${_persona_design_tokens.Spacing[4]} ${_persona_design_tokens.Spacing[5]};
+`;
+//#endregion
+//#region layouts/LayoutLoadingShimmer/LayoutLoadingShimmer.tsx
+const DataTableShimmer = () => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Stack.Stack, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Table.Table, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Table.TableHead, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Table.TableRow, { children: Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Table.TableHeaderCell, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_LoadingShimmer.LoadingShimmer, {
+		width: "100%",
+		height: "20px"
+	}) }, i)) }) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Table.TableBody, { children: Array.from({ length: 8 }).map((_, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Table.TableRow, {
+		disableHoverBackground: true,
+		children: Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Table.TableCell, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_LoadingShimmer.LoadingShimmer, {
+			width: "100%",
+			height: "24px"
+		}) }, i))
+	}, i)) })] }) });
+};
+const HeaderShimmer = () => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_PageHeader.PageHeaderContainer, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_LoadingShimmer.LoadingShimmer, {
+		width: "150px",
+		height: "30px"
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Stack.HStack, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_LoadingShimmer.LoadingShimmer, {
+		width: "80px",
+		height: "30px"
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_LoadingShimmer.LoadingShimmer, {
+		width: "80px",
+		height: "30px"
+	})] })] });
+};
+/**
+* Render a single full-width card with a loading state mimicking a DataTable.
+*/
+const IndexViewLayoutShimmer = () => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(HeaderShimmer, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Layout, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_CardV2.Card_default, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_CardV2.Card_default.Section, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DataTableShimmer, {}) }) }) })] });
+};
+/**
+* Render `cards.length` full-width cards of the specified height in a loading state.
+*/
+const SimpleLayoutShimmer = ({ cards = [400] }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(HeaderShimmer, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Layout, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Stack.Stack, {
+		spacing: _persona_design_tokens.Spacing[4],
+		children: cards.map((height, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_CardV2.Card_default, {
+			loading: true,
+			loadingProps: { height: `${height}px` },
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, {})
+		}, i))
+	}) })] });
+};
+const TabsDivider = styled_components.default.hr`
+  border-top: 1px solid ${_persona_design_tokens.Color.BorderDivider};
+  margin: 0;
+`;
+const TabsShimmer = () => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Stack.Stack, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Stack.HStack, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_LoadingShimmer.LoadingShimmer, {
+		variant: "secondary",
+		width: "100px",
+		height: "20px"
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_LoadingShimmer.LoadingShimmer, {
+		variant: "secondary",
+		width: "100px",
+		height: "20px"
+	})] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TabsDivider, {})] });
+};
+const MainColumn = styled_components.default.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${_persona_design_tokens.Spacing[4]};
+  flex: 2;
+`;
+const RightColumn = styled_components.default.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${_persona_design_tokens.Spacing[4]};
+  flex: 1;
+`;
+const ShowViewLayoutShimmer = () => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(HeaderShimmer, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DetailLayout, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Stack.Stack, {
+		spacing: _persona_design_tokens.Spacing[4],
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TabsShimmer, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Stack.HStack, {
+			spacing: _persona_design_tokens.Spacing[4],
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(MainColumn, { children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_CardV2.Card_default, {
+					heading: { title: "Loading" },
+					loading: true,
+					loadingProps: { height: "100px" },
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, {})
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_CardV2.Card_default, {
+					heading: { title: "Loading" },
+					loading: true,
+					loadingProps: { height: "400px" },
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, {})
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_CardV2.Card_default, {
+					heading: { title: "Loading" },
+					loading: true,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, {})
+				})
+			] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(RightColumn, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_CardV2.Card_default, {
+				heading: { title: "Loading" },
+				loading: true,
+				loadingProps: { height: "400px" },
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, {})
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_CardV2.Card_default, {
+				heading: { title: "Loading" },
+				loading: true,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, {})
+			})] })]
+		})]
+	}) })] });
+};
+//#endregion
+exports.DataTableShimmer = DataTableShimmer;
+exports.IndexViewLayoutShimmer = IndexViewLayoutShimmer;
+exports.ShowViewLayoutShimmer = ShowViewLayoutShimmer;
+exports.SimpleLayoutShimmer = SimpleLayoutShimmer;
+
+//# sourceMappingURL=index.cjs.map

package/dist/layouts/LayoutLoadingShimmer/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["Spacing","Stack","Table","TableHead","TableRow","TableHeaderCell","LoadingShimmer","TableBody","TableCell","PageHeaderContainer","HStack","CardV2","Spacing","Color"],"sources":["../../../layouts/containers.tsx","../../../layouts/LayoutLoadingShimmer/LayoutLoadingShimmer.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\n\nexport const Layout = styled.div`\n  position: relative;\n  box-sizing: border-box;\n  width: 100%;\n  padding: ${Spacing[7]};\n`;\n\nexport const DetailLayout = styled.div`\n  position: relative;\n  box-sizing: border-box;\n  width: 100%;\n  padding: ${Spacing[4]} ${Spacing[5]};\n`;\n","import styled from 'styled-components';\n\nimport { Color, Spacing } from '@persona/design-tokens';\nimport CardV2 from 'design-system/components/CardV2';\nimport { LoadingShimmer } from 'design-system/components/LoadingShimmer';\nimport { PageHeaderContainer } from 'design-system/components/PageHeader';\nimport Stack, { HStack } from 'design-system/components/Stack';\nimport Table, {\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeaderCell,\n  TableRow,\n} from 'design-system/components/Table';\nimport { Layout, DetailLayout } from 'design-system/layouts/containers';\n\nexport const DataTableShimmer = () => {\n  return (\n    <Stack>\n      <Table>\n        <TableHead>\n          <TableRow>\n            {Array.from({ length: 5 }).map((_, i) => (\n              <TableHeaderCell key={i}>\n                <LoadingShimmer width='100%' height='20px' />\n              </TableHeaderCell>\n            ))}\n          </TableRow>\n        </TableHead>\n        <TableBody>\n          {Array.from({ length: 8 }).map((_, i) => (\n            <TableRow key={i} disableHoverBackground>\n              {Array.from({ length: 5 }).map((_, i) => (\n                <TableCell key={i}>\n                  <LoadingShimmer width='100%' height='24px' />\n                </TableCell>\n              ))}\n            </TableRow>\n          ))}\n        </TableBody>\n      </Table>\n    </Stack>\n  );\n};\n\nconst HeaderShimmer = () => {\n  return (\n    <PageHeaderContainer>\n      <LoadingShimmer width='150px' height='30px' />\n      <HStack>\n        <LoadingShimmer width='80px' height='30px' />\n        <LoadingShimmer width='80px' height='30px' />\n      </HStack>\n    </PageHeaderContainer>\n  );\n};\n\n/**\n * Render a single full-width card with a loading state mimicking a DataTable.\n */\nexport const IndexViewLayoutShimmer = () => {\n  return (\n    <>\n      <HeaderShimmer />\n      <Layout>\n        <CardV2>\n          <CardV2.Section>\n            <DataTableShimmer />\n          </CardV2.Section>\n        </CardV2>\n      </Layout>\n    </>\n  );\n};\n\n/**\n * Render `cards.length` full-width cards of the specified height in a loading state.\n */\nexport const SimpleLayoutShimmer = ({ cards = [400] }: { cards?: number[] }) => {\n  return (\n    <>\n      <HeaderShimmer />\n      <Layout>\n        <Stack spacing={Spacing[4]}>\n          {cards.map((height, i) => (\n            <CardV2 key={i} loading loadingProps={{ height: `${height}px` }}>\n              <></>\n            </CardV2>\n          ))}\n        </Stack>\n      </Layout>\n    </>\n  );\n};\n\nconst TabsDivider = styled.hr`\n  border-top: 1px solid ${Color.BorderDivider};\n  margin: 0;\n`;\n\nconst TabsShimmer = () => {\n  return (\n    <Stack>\n      <HStack>\n        <LoadingShimmer variant='secondary' width='100px' height='20px' />\n        <LoadingShimmer variant='secondary' width='100px' height='20px' />\n      </HStack>\n      <TabsDivider />\n    </Stack>\n  );\n};\n\nconst MainColumn = styled.div`\n  display: flex;\n  flex-direction: column;\n  gap: ${Spacing[4]};\n  flex: 2;\n`;\n\nconst RightColumn = styled.div`\n  display: flex;\n  flex-direction: column;\n  gap: ${Spacing[4]};\n  flex: 1;\n`;\n\nexport const ShowViewLayoutShimmer = () => {\n  return (\n    <>\n      <HeaderShimmer />\n      <DetailLayout>\n        <Stack spacing={Spacing[4]}>\n          <TabsShimmer />\n          <HStack spacing={Spacing[4]}>\n            <MainColumn>\n              <CardV2 heading={{ title: 'Loading' }} loading loadingProps={{ height: '100px' }}>\n                <></>\n              </CardV2>\n              <CardV2 heading={{ title: 'Loading' }} loading loadingProps={{ height: '400px' }}>\n                <></>\n              </CardV2>\n              <CardV2 heading={{ title: 'Loading' }} loading>\n                <></>\n              </CardV2>\n            </MainColumn>\n            <RightColumn>\n              <CardV2 heading={{ title: 'Loading' }} loading loadingProps={{ height: '400px' }}>\n                <></>\n              </CardV2>\n              <CardV2 heading={{ title: 'Loading' }} loading>\n                <></>\n              </CardV2>\n            </RightColumn>\n          </HStack>\n        </Stack>\n      </DetailLayout>\n    </>\n  );\n};\n"],"mappings":"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"}

package/dist/layouts/LayoutLoadingShimmer/index.d.cts

@@ -0,0 +1,2 @@
+import { DataTableShimmer, IndexViewLayoutShimmer, ShowViewLayoutShimmer, SimpleLayoutShimmer } from "../../LayoutLoadingShimmer.cjs";
+export { DataTableShimmer, IndexViewLayoutShimmer, ShowViewLayoutShimmer, SimpleLayoutShimmer };

package/dist/layouts/LayoutLoadingShimmer/index.d.mts

@@ -0,0 +1,2 @@
+import { DataTableShimmer, IndexViewLayoutShimmer, ShowViewLayoutShimmer, SimpleLayoutShimmer } from "../../LayoutLoadingShimmer.mjs";
+export { DataTableShimmer, IndexViewLayoutShimmer, ShowViewLayoutShimmer, SimpleLayoutShimmer };

package/dist/layouts/LayoutLoadingShimmer/index.mjs

@@ -0,0 +1,133 @@
+import { n as Stack, t as HStack } from "../../Stack-Bl54WmhY.mjs";
+import { t as LoadingShimmer } from "../../LoadingShimmer-Dsc_RCCf.mjs";
+import { t as Card_default } from "../../CardV2-C9z0Hr-c.mjs";
+import { n as PageHeaderContainer } from "../../PageHeader-D-6W61E_.mjs";
+import { h as Table, m as TableHeaderCell, n as TableBody, p as TableRow, r as TableHead, s as TableCell } from "../../Table-D8IcpACv.mjs";
+import { Color, Spacing } from "@persona/design-tokens";
+import styled from "styled-components";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region layouts/containers.tsx
+const Layout = styled.div`
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  padding: ${Spacing[7]};
+`;
+const DetailLayout = styled.div`
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  padding: ${Spacing[4]} ${Spacing[5]};
+`;
+//#endregion
+//#region layouts/LayoutLoadingShimmer/LayoutLoadingShimmer.tsx
+const DataTableShimmer = () => {
+	return /* @__PURE__ */ jsx(Stack, { children: /* @__PURE__ */ jsxs(Table, { children: [/* @__PURE__ */ jsx(TableHead, { children: /* @__PURE__ */ jsx(TableRow, { children: Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ jsx(TableHeaderCell, { children: /* @__PURE__ */ jsx(LoadingShimmer, {
+		width: "100%",
+		height: "20px"
+	}) }, i)) }) }), /* @__PURE__ */ jsx(TableBody, { children: Array.from({ length: 8 }).map((_, i) => /* @__PURE__ */ jsx(TableRow, {
+		disableHoverBackground: true,
+		children: Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(LoadingShimmer, {
+			width: "100%",
+			height: "24px"
+		}) }, i))
+	}, i)) })] }) });
+};
+const HeaderShimmer = () => {
+	return /* @__PURE__ */ jsxs(PageHeaderContainer, { children: [/* @__PURE__ */ jsx(LoadingShimmer, {
+		width: "150px",
+		height: "30px"
+	}), /* @__PURE__ */ jsxs(HStack, { children: [/* @__PURE__ */ jsx(LoadingShimmer, {
+		width: "80px",
+		height: "30px"
+	}), /* @__PURE__ */ jsx(LoadingShimmer, {
+		width: "80px",
+		height: "30px"
+	})] })] });
+};
+/**
+* Render a single full-width card with a loading state mimicking a DataTable.
+*/
+const IndexViewLayoutShimmer = () => {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(HeaderShimmer, {}), /* @__PURE__ */ jsx(Layout, { children: /* @__PURE__ */ jsx(Card_default, { children: /* @__PURE__ */ jsx(Card_default.Section, { children: /* @__PURE__ */ jsx(DataTableShimmer, {}) }) }) })] });
+};
+/**
+* Render `cards.length` full-width cards of the specified height in a loading state.
+*/
+const SimpleLayoutShimmer = ({ cards = [400] }) => {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(HeaderShimmer, {}), /* @__PURE__ */ jsx(Layout, { children: /* @__PURE__ */ jsx(Stack, {
+		spacing: Spacing[4],
+		children: cards.map((height, i) => /* @__PURE__ */ jsx(Card_default, {
+			loading: true,
+			loadingProps: { height: `${height}px` },
+			children: /* @__PURE__ */ jsx(Fragment, {})
+		}, i))
+	}) })] });
+};
+const TabsDivider = styled.hr`
+  border-top: 1px solid ${Color.BorderDivider};
+  margin: 0;
+`;
+const TabsShimmer = () => {
+	return /* @__PURE__ */ jsxs(Stack, { children: [/* @__PURE__ */ jsxs(HStack, { children: [/* @__PURE__ */ jsx(LoadingShimmer, {
+		variant: "secondary",
+		width: "100px",
+		height: "20px"
+	}), /* @__PURE__ */ jsx(LoadingShimmer, {
+		variant: "secondary",
+		width: "100px",
+		height: "20px"
+	})] }), /* @__PURE__ */ jsx(TabsDivider, {})] });
+};
+const MainColumn = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${Spacing[4]};
+  flex: 2;
+`;
+const RightColumn = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${Spacing[4]};
+  flex: 1;
+`;
+const ShowViewLayoutShimmer = () => {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(HeaderShimmer, {}), /* @__PURE__ */ jsx(DetailLayout, { children: /* @__PURE__ */ jsxs(Stack, {
+		spacing: Spacing[4],
+		children: [/* @__PURE__ */ jsx(TabsShimmer, {}), /* @__PURE__ */ jsxs(HStack, {
+			spacing: Spacing[4],
+			children: [/* @__PURE__ */ jsxs(MainColumn, { children: [
+				/* @__PURE__ */ jsx(Card_default, {
+					heading: { title: "Loading" },
+					loading: true,
+					loadingProps: { height: "100px" },
+					children: /* @__PURE__ */ jsx(Fragment, {})
+				}),
+				/* @__PURE__ */ jsx(Card_default, {
+					heading: { title: "Loading" },
+					loading: true,
+					loadingProps: { height: "400px" },
+					children: /* @__PURE__ */ jsx(Fragment, {})
+				}),
+				/* @__PURE__ */ jsx(Card_default, {
+					heading: { title: "Loading" },
+					loading: true,
+					children: /* @__PURE__ */ jsx(Fragment, {})
+				})
+			] }), /* @__PURE__ */ jsxs(RightColumn, { children: [/* @__PURE__ */ jsx(Card_default, {
+				heading: { title: "Loading" },
+				loading: true,
+				loadingProps: { height: "400px" },
+				children: /* @__PURE__ */ jsx(Fragment, {})
+			}), /* @__PURE__ */ jsx(Card_default, {
+				heading: { title: "Loading" },
+				loading: true,
+				children: /* @__PURE__ */ jsx(Fragment, {})
+			})] })]
+		})]
+	}) })] });
+};
+//#endregion
+export { DataTableShimmer, IndexViewLayoutShimmer, ShowViewLayoutShimmer, SimpleLayoutShimmer };
+
+//# sourceMappingURL=index.mjs.map

package/dist/layouts/LayoutLoadingShimmer/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":["CardV2"],"sources":["../../../layouts/containers.tsx","../../../layouts/LayoutLoadingShimmer/LayoutLoadingShimmer.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\n\nexport const Layout = styled.div`\n  position: relative;\n  box-sizing: border-box;\n  width: 100%;\n  padding: ${Spacing[7]};\n`;\n\nexport const DetailLayout = styled.div`\n  position: relative;\n  box-sizing: border-box;\n  width: 100%;\n  padding: ${Spacing[4]} ${Spacing[5]};\n`;\n","import styled from 'styled-components';\n\nimport { Color, Spacing } from '@persona/design-tokens';\nimport CardV2 from 'design-system/components/CardV2';\nimport { LoadingShimmer } from 'design-system/components/LoadingShimmer';\nimport { PageHeaderContainer } from 'design-system/components/PageHeader';\nimport Stack, { HStack } from 'design-system/components/Stack';\nimport Table, {\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeaderCell,\n  TableRow,\n} from 'design-system/components/Table';\nimport { Layout, DetailLayout } from 'design-system/layouts/containers';\n\nexport const DataTableShimmer = () => {\n  return (\n    <Stack>\n      <Table>\n        <TableHead>\n          <TableRow>\n            {Array.from({ length: 5 }).map((_, i) => (\n              <TableHeaderCell key={i}>\n                <LoadingShimmer width='100%' height='20px' />\n              </TableHeaderCell>\n            ))}\n          </TableRow>\n        </TableHead>\n        <TableBody>\n          {Array.from({ length: 8 }).map((_, i) => (\n            <TableRow key={i} disableHoverBackground>\n              {Array.from({ length: 5 }).map((_, i) => (\n                <TableCell key={i}>\n                  <LoadingShimmer width='100%' height='24px' />\n                </TableCell>\n              ))}\n            </TableRow>\n          ))}\n        </TableBody>\n      </Table>\n    </Stack>\n  );\n};\n\nconst HeaderShimmer = () => {\n  return (\n    <PageHeaderContainer>\n      <LoadingShimmer width='150px' height='30px' />\n      <HStack>\n        <LoadingShimmer width='80px' height='30px' />\n        <LoadingShimmer width='80px' height='30px' />\n      </HStack>\n    </PageHeaderContainer>\n  );\n};\n\n/**\n * Render a single full-width card with a loading state mimicking a DataTable.\n */\nexport const IndexViewLayoutShimmer = () => {\n  return (\n    <>\n      <HeaderShimmer />\n      <Layout>\n        <CardV2>\n          <CardV2.Section>\n            <DataTableShimmer />\n          </CardV2.Section>\n        </CardV2>\n      </Layout>\n    </>\n  );\n};\n\n/**\n * Render `cards.length` full-width cards of the specified height in a loading state.\n */\nexport const SimpleLayoutShimmer = ({ cards = [400] }: { cards?: number[] }) => {\n  return (\n    <>\n      <HeaderShimmer />\n      <Layout>\n        <Stack spacing={Spacing[4]}>\n          {cards.map((height, i) => (\n            <CardV2 key={i} loading loadingProps={{ height: `${height}px` }}>\n              <></>\n            </CardV2>\n          ))}\n        </Stack>\n      </Layout>\n    </>\n  );\n};\n\nconst TabsDivider = styled.hr`\n  border-top: 1px solid ${Color.BorderDivider};\n  margin: 0;\n`;\n\nconst TabsShimmer = () => {\n  return (\n    <Stack>\n      <HStack>\n        <LoadingShimmer variant='secondary' width='100px' height='20px' />\n        <LoadingShimmer variant='secondary' width='100px' height='20px' />\n      </HStack>\n      <TabsDivider />\n    </Stack>\n  );\n};\n\nconst MainColumn = styled.div`\n  display: flex;\n  flex-direction: column;\n  gap: ${Spacing[4]};\n  flex: 2;\n`;\n\nconst RightColumn = styled.div`\n  display: flex;\n  flex-direction: column;\n  gap: ${Spacing[4]};\n  flex: 1;\n`;\n\nexport const ShowViewLayoutShimmer = () => {\n  return (\n    <>\n      <HeaderShimmer />\n      <DetailLayout>\n        <Stack spacing={Spacing[4]}>\n          <TabsShimmer />\n          <HStack spacing={Spacing[4]}>\n            <MainColumn>\n              <CardV2 heading={{ title: 'Loading' }} loading loadingProps={{ height: '100px' }}>\n                <></>\n              </CardV2>\n              <CardV2 heading={{ title: 'Loading' }} loading loadingProps={{ height: '400px' }}>\n                <></>\n              </CardV2>\n              <CardV2 heading={{ title: 'Loading' }} loading>\n                <></>\n              </CardV2>\n            </MainColumn>\n            <RightColumn>\n              <CardV2 heading={{ title: 'Loading' }} loading loadingProps={{ height: '400px' }}>\n                <></>\n              </CardV2>\n              <CardV2 heading={{ title: 'Loading' }} loading>\n                <></>\n              </CardV2>\n            </RightColumn>\n          </HStack>\n        </Stack>\n      </DetailLayout>\n    </>\n  );\n};\n"],"mappings":"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"}

package/dist/lib/MiddleTruncatedText.cjs

@@ -2,6 +2,6 @@ Object.defineProperties(exports, {
 	__esModule: { value: true },
 	[Symbol.toStringTag]: { value: "Module" }
 });
-const require_MiddleTruncatedText = require("../MiddleTruncatedText-BIzKECv9.cjs");
+const require_MiddleTruncatedText = require("../MiddleTruncatedText-CO76xIqP.cjs");
 exports.MiddleTruncatedText = require_MiddleTruncatedText.MiddleTruncatedText;
 exports.default = require_MiddleTruncatedText.MiddleTruncatedText;

package/dist/lib/MiddleTruncatedText.mjs

@@ -1,2 +1,2 @@
-import { t as MiddleTruncatedText } from "../MiddleTruncatedText-Bzpg3zAU.mjs";
+import { t as MiddleTruncatedText } from "../MiddleTruncatedText-GXI-CPvs.mjs";
 export { MiddleTruncatedText, MiddleTruncatedText as default };

package/dist/lib/PDSProvider.d.mts

@@ -1,4 +1,4 @@
-import { n as PersonaTheme } from "../theme-Bx2sn3Lt.mjs";
+import { n as PersonaTheme } from "../theme-BzBpJXhO.mjs";
 import { FC, PropsWithChildren } from "react";
 
 //#region lib/PDSProvider.d.ts

package/dist/lib/TruncatedText.cjs

@@ -6,8 +6,8 @@ const require_chunk = require("../chunk-CKQMccvm.cjs");
 const require_lib_useIsOverflow = require("./useIsOverflow.cjs");
 let styled_components = require("styled-components");
 styled_components = require_chunk.__toESM(styled_components);
-let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
 //#region lib/TruncatedText.tsx
 const OverflowEllipsisSpan = styled_components.default.span`
   display: block;

package/dist/lib/TruncatedText.d.cts

@@ -1,2 +1,2 @@
-import { n as TruncatedText, r as TruncatedTextProps, t as OverflowEllipsisSpan } from "../TruncatedText-D8f3AiBL.cjs";
+import { n as TruncatedText, r as TruncatedTextProps, t as OverflowEllipsisSpan } from "../TruncatedText-Dit2NJI6.cjs";
 export { OverflowEllipsisSpan, TruncatedText, TruncatedText as default, TruncatedTextProps };

package/dist/lib/TruncatedText.d.mts

@@ -1,2 +1,2 @@
-import { n as TruncatedText, r as TruncatedTextProps, t as OverflowEllipsisSpan } from "../TruncatedText-Cy8NpHzm.mjs";
+import { n as TruncatedText, r as TruncatedTextProps, t as OverflowEllipsisSpan } from "../TruncatedText-BJnowVTx.mjs";
 export { OverflowEllipsisSpan, TruncatedText, TruncatedText as default, TruncatedTextProps };

package/dist/lib/TruncatedText.mjs

@@ -1,7 +1,7 @@
 import { useIsOverflow } from "./useIsOverflow.mjs";
 import styled from "styled-components";
-import { useRef } from "react";
 import { jsx } from "react/jsx-runtime";
+import { useRef } from "react";
 //#region lib/TruncatedText.tsx
 const OverflowEllipsisSpan = styled.span`
   display: block;

package/dist/lib/TruncatedTextWithTooltip.cjs

@@ -5,9 +5,9 @@ Object.defineProperties(exports, {
 require("../chunk-CKQMccvm.cjs");
 const require_lib_useIsOverflow = require("./useIsOverflow.cjs");
 const require_lib_TruncatedText = require("./TruncatedText.cjs");
-const require_Tooltip = require("../Tooltip-vylydKVv.cjs");
-let react = require("react");
+const require_Tooltip = require("../Tooltip-olP3rdUO.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
 //#region lib/TruncatedTextWithTooltip.tsx
 /**
 * Truncates the text if it is too long to fit in the container and shows a tooltip if the text

package/dist/lib/TruncatedTextWithTooltip.d.cts

@@ -1,4 +1,4 @@
-import { n as Tooltip } from "../Tooltip-BhGRP9QA.cjs";
+import { n as Tooltip } from "../Tooltip--eDrrk2r.cjs";
 import { ComponentProps, ComponentPropsWithoutRef, FC } from "react";
 
 //#region lib/TruncatedTextWithTooltip.d.ts

package/dist/lib/TruncatedTextWithTooltip.d.mts

@@ -1,4 +1,4 @@
-import { n as Tooltip } from "../Tooltip-DRgufW3i.mjs";
+import { n as Tooltip } from "../Tooltip-CUC-JuRL.mjs";
 import { ComponentProps, ComponentPropsWithoutRef, FC } from "react";
 
 //#region lib/TruncatedTextWithTooltip.d.ts

package/dist/lib/TruncatedTextWithTooltip.mjs

@@ -1,8 +1,8 @@
 import { useIsOverflow } from "./useIsOverflow.mjs";
 import { OverflowEllipsisSpan } from "./TruncatedText.mjs";
-import { a as Tooltip } from "../Tooltip-CDvOu1UN.mjs";
-import { useRef } from "react";
+import { a as Tooltip } from "../Tooltip-C6AR1xT-.mjs";
 import { jsx } from "react/jsx-runtime";
+import { useRef } from "react";
 //#region lib/TruncatedTextWithTooltip.tsx
 /**
 * Truncates the text if it is too long to fit in the container and shows a tooltip if the text

package/dist/lib/message.d.cts

@@ -1,2 +1,2 @@
-import { t as MessageType } from "../message-C2286H-r.cjs";
+import { t as MessageType } from "../message-BEgtEjQC.cjs";
 export { MessageType };

package/dist/lib/message.d.mts

@@ -1,2 +1,2 @@
-import { t as MessageType } from "../message-BfJ87aIU.mjs";
+import { t as MessageType } from "../message-CMHvlPGn.mjs";
 export { MessageType };

package/dist/lib/pseudoClass.d.mts

@@ -1,4 +1,4 @@
-import { t as PseudoClassProps } from "../PseudoClassProps-ySXCGUEQ.mjs";
+import { t as PseudoClassProps } from "../PseudoClassProps-DLxPxo7T.mjs";
 
 //#region lib/pseudoClass.d.ts
 declare const isDisabled: ({

package/dist/{message-C2286H-r.d.cts → message-BEgtEjQC.d.cts}

@@ -6,4 +6,4 @@ declare enum MessageType {
 }
 //#endregion
 export { MessageType as t };
-//# sourceMappingURL=message-C2286H-r.d.cts.map
+//# sourceMappingURL=message-BEgtEjQC.d.cts.map

package/dist/{message-BfJ87aIU.d.mts → message-CMHvlPGn.d.mts}

@@ -6,4 +6,4 @@ declare enum MessageType {
 }
 //#endregion
 export { MessageType as t };
-//# sourceMappingURL=message-BfJ87aIU.d.mts.map
+//# sourceMappingURL=message-CMHvlPGn.d.mts.map

package/dist/mixins/focus.d.mts

@@ -1,4 +1,4 @@
-import { t as PseudoClassProps } from "../PseudoClassProps-ySXCGUEQ.mjs";
+import { t as PseudoClassProps } from "../PseudoClassProps-DLxPxo7T.mjs";
 import * as _$styled_components0 from "styled-components";
 
 //#region mixins/focus.d.ts

package/dist/mixins/hoverable.d.mts

@@ -1,5 +1,5 @@
-import { t as PseudoClassProps } from "../PseudoClassProps-ySXCGUEQ.mjs";
-import { i as Variant } from "../theme-Bx2sn3Lt.mjs";
+import { t as PseudoClassProps } from "../PseudoClassProps-DLxPxo7T.mjs";
+import { i as Variant } from "../theme-BzBpJXhO.mjs";
 import * as _$styled_components0 from "styled-components";
 
 //#region mixins/hoverable.d.ts

package/dist/mixins/input.d.cts

@@ -1,2 +1,2 @@
-import { n as InputSizes, r as inputMixin, t as InputMixinProps } from "../input-BkzqXwn7.cjs";
+import { n as InputSizes, r as inputMixin, t as InputMixinProps } from "../input-DPB0cX2m.cjs";
 export { InputMixinProps, InputSizes, inputMixin as default };

package/dist/mixins/input.d.mts

@@ -1,2 +1,2 @@
-import { n as InputSizes, r as inputMixin, t as InputMixinProps } from "../input-DrG6mA0V.mjs";
+import { n as InputSizes, r as inputMixin, t as InputMixinProps } from "../input-Bv5fKt5J.mjs";
 export { InputMixinProps, InputSizes, inputMixin as default };

package/dist/mixins/menuItem.d.mts

@@ -1,5 +1,5 @@
-import { t as PseudoClassProps } from "../PseudoClassProps-ySXCGUEQ.mjs";
-import { i as Variant } from "../theme-Bx2sn3Lt.mjs";
+import { t as PseudoClassProps } from "../PseudoClassProps-DLxPxo7T.mjs";
+import { i as Variant } from "../theme-BzBpJXhO.mjs";
 import * as _$styled_components0 from "styled-components";
 
 //#region mixins/menuItem.d.ts

package/dist/mixins/text.d.mts

@@ -1,2 +1,2 @@
-import { a as displayMixins, c as paragraphMixins, i as ParagraphSize, n as HeadingSize, o as fontFamilyMixin, r as ParagraphMixinSize, s as headingMixins, t as DisplaySize } from "../text-CtoDqqAO.mjs";
+import { a as displayMixins, c as paragraphMixins, i as ParagraphSize, n as HeadingSize, o as fontFamilyMixin, r as ParagraphMixinSize, s as headingMixins, t as DisplaySize } from "../text-B21s9mRZ.mjs";
 export { DisplaySize, HeadingSize, ParagraphMixinSize, ParagraphSize, displayMixins, fontFamilyMixin, headingMixins, paragraphMixins };

package/dist/operators-1qE2GpC7.d.cts

@@ -0,0 +1,43 @@
+import { a as FilterField, c as FilterOperator, l as FilterRule, s as FilterFieldType, u as FilterRuleValue } from "./types-B_HHNlia.cjs";
+
+//#region components/DataTable/TableControls/FiltersV2/operators.d.ts
+declare function getOperatorsForType(type: FilterFieldType): ReadonlyArray<FilterOperator>;
+/**
+ * Effective operator vocabulary for a concrete field: its `allowedOperators`
+ * allow-list, or the field type's full vocabulary when the allow-list is
+ * absent or empty. An empty allow-list means "unconstrained" rather than
+ * "no operators" — the latter would leave the field selectable in the picker
+ * but incapable of producing a rule that passes validation.
+ *
+ * Prefer this over {@link getOperatorsForType} anywhere a real field is in
+ * hand — the popover's operator dropdown, `FieldRegistry`, validation — so a
+ * field can never surface an operator the host application can't serialize.
+ */
+declare function getOperatorsForField(field: Pick<FilterField, 'type' | 'allowedOperators'>): ReadonlyArray<FilterOperator>;
+declare function getDefaultOperatorForType(type: FilterFieldType): FilterOperator;
+declare function isValuelessOperator(operator: FilterOperator): boolean;
+/**
+ * Whether a concrete field's operator selector should be shown. A field
+ * pinned to one operator renders it as static text rather than a caret that
+ * opens a one-item menu.
+ */
+declare function fieldHasMultipleOperators(field: Pick<FilterField, 'type' | 'allowedOperators'>): boolean;
+declare function getOperatorLabel(operator: FilterOperator, fieldType?: FilterFieldType): string;
+/**
+ * Return a copy of `rule` whose `value` honors the valueless-operator
+ * invariant: any rule whose operator is in the valueless set
+ * (`is_empty`, `is_not_empty`) carries `value: null`. Use this anywhere
+ * a rule's value would otherwise drift out of sync with its operator —
+ * operator-change handlers, field-swap handlers, and defensive coercions
+ * before serialization.
+ */
+declare function withValue(rule: FilterRule, value: FilterRuleValue): FilterRule;
+/**
+ * Empty-but-present value seeded when a rule switches from a valueless operator
+ * (`is_empty`) to one that requires a value. Non-null on purpose: a `null` value
+ * reads as a removal and drops the pill mid-edit.
+ */
+declare function emptyValueForFieldType(type: FilterFieldType): FilterRuleValue;
+//#endregion
+export { getOperatorsForField as a, withValue as c, getOperatorLabel as i, fieldHasMultipleOperators as n, getOperatorsForType as o, getDefaultOperatorForType as r, isValuelessOperator as s, emptyValueForFieldType as t };
+//# sourceMappingURL=operators-1qE2GpC7.d.cts.map

package/dist/operators-Bo31xlc2.d.mts

@@ -0,0 +1,43 @@
+import { a as FilterField, c as FilterOperator, l as FilterRule, s as FilterFieldType, u as FilterRuleValue } from "./types-D58IoRx6.mjs";
+
+//#region components/DataTable/TableControls/FiltersV2/operators.d.ts
+declare function getOperatorsForType(type: FilterFieldType): ReadonlyArray<FilterOperator>;
+/**
+ * Effective operator vocabulary for a concrete field: its `allowedOperators`
+ * allow-list, or the field type's full vocabulary when the allow-list is
+ * absent or empty. An empty allow-list means "unconstrained" rather than
+ * "no operators" — the latter would leave the field selectable in the picker
+ * but incapable of producing a rule that passes validation.
+ *
+ * Prefer this over {@link getOperatorsForType} anywhere a real field is in
+ * hand — the popover's operator dropdown, `FieldRegistry`, validation — so a
+ * field can never surface an operator the host application can't serialize.
+ */
+declare function getOperatorsForField(field: Pick<FilterField, 'type' | 'allowedOperators'>): ReadonlyArray<FilterOperator>;
+declare function getDefaultOperatorForType(type: FilterFieldType): FilterOperator;
+declare function isValuelessOperator(operator: FilterOperator): boolean;
+/**
+ * Whether a concrete field's operator selector should be shown. A field
+ * pinned to one operator renders it as static text rather than a caret that
+ * opens a one-item menu.
+ */
+declare function fieldHasMultipleOperators(field: Pick<FilterField, 'type' | 'allowedOperators'>): boolean;
+declare function getOperatorLabel(operator: FilterOperator, fieldType?: FilterFieldType): string;
+/**
+ * Return a copy of `rule` whose `value` honors the valueless-operator
+ * invariant: any rule whose operator is in the valueless set
+ * (`is_empty`, `is_not_empty`) carries `value: null`. Use this anywhere
+ * a rule's value would otherwise drift out of sync with its operator —
+ * operator-change handlers, field-swap handlers, and defensive coercions
+ * before serialization.
+ */
+declare function withValue(rule: FilterRule, value: FilterRuleValue): FilterRule;
+/**
+ * Empty-but-present value seeded when a rule switches from a valueless operator
+ * (`is_empty`) to one that requires a value. Non-null on purpose: a `null` value
+ * reads as a removal and drops the pill mid-edit.
+ */
+declare function emptyValueForFieldType(type: FilterFieldType): FilterRuleValue;
+//#endregion
+export { getOperatorsForField as a, withValue as c, getOperatorLabel as i, fieldHasMultipleOperators as n, getOperatorsForType as o, getDefaultOperatorForType as r, isValuelessOperator as s, emptyValueForFieldType as t };
+//# sourceMappingURL=operators-Bo31xlc2.d.mts.map

package/dist/operators.d.cts

@@ -0,0 +1,2 @@
+import { a as getOperatorsForField, c as withValue, i as getOperatorLabel, n as fieldHasMultipleOperators, o as getOperatorsForType, r as getDefaultOperatorForType, s as isValuelessOperator, t as emptyValueForFieldType } from "./operators-1qE2GpC7.cjs";
+export { emptyValueForFieldType, fieldHasMultipleOperators, getDefaultOperatorForType, getOperatorLabel, getOperatorsForField, getOperatorsForType, isValuelessOperator, withValue };

package/dist/operators.d.mts

@@ -0,0 +1,2 @@
+import { a as getOperatorsForField, c as withValue, i as getOperatorLabel, n as fieldHasMultipleOperators, o as getOperatorsForType, r as getDefaultOperatorForType, s as isValuelessOperator, t as emptyValueForFieldType } from "./operators-Bo31xlc2.mjs";
+export { emptyValueForFieldType, fieldHasMultipleOperators, getDefaultOperatorForType, getOperatorLabel, getOperatorsForField, getOperatorsForType, isValuelessOperator, withValue };

package/dist/{text-CtoDqqAO.d.mts → text-B21s9mRZ.d.mts}

@@ -11,4 +11,4 @@ type ParagraphSize = 'lg' | 'md' | 'sm' | 'xs';
 declare const paragraphMixins: Record<ParagraphMixinSize, FlattenInterpolation<ThemeProps<DefaultTheme>>>;
 //#endregion
 export { displayMixins as a, paragraphMixins as c, ParagraphSize as i, HeadingSize as n, fontFamilyMixin as o, ParagraphMixinSize as r, headingMixins as s, DisplaySize as t };
-//# sourceMappingURL=text-CtoDqqAO.d.mts.map
+//# sourceMappingURL=text-B21s9mRZ.d.mts.map

package/dist/{theme-Bx2sn3Lt.d.mts → theme-BzBpJXhO.d.mts}

@@ -151,4 +151,4 @@ declare const darkTheme: PersonaTheme;
 declare const marketingFontTheme: PersonaTheme;
 //#endregion
 export { darkTheme as a, Variant as i, PersonaTheme as n, defaultTheme as o, TextColors as r, marketingFontTheme as s, BackgroundColors as t };
-//# sourceMappingURL=theme-Bx2sn3Lt.d.mts.map
+//# sourceMappingURL=theme-BzBpJXhO.d.mts.map

package/dist/theme.d.mts

@@ -1,2 +1,2 @@
-import { a as darkTheme, i as Variant, n as PersonaTheme, o as defaultTheme, r as TextColors, s as marketingFontTheme, t as BackgroundColors } from "./theme-Bx2sn3Lt.mjs";
+import { a as darkTheme, i as Variant, n as PersonaTheme, o as defaultTheme, r as TextColors, s as marketingFontTheme, t as BackgroundColors } from "./theme-BzBpJXhO.mjs";
 export { BackgroundColors, PersonaTheme, TextColors, Variant, darkTheme, defaultTheme as default, marketingFontTheme };