@persona/design-system 0.1.6 → 0.1.8

package/dist/index2.d.cts

@@ -1,2 +1,2 @@
-import { n as SearchInput, t as OmniSearchProps } from "./SearchInput-B6d2Qyzb.cjs";
+import { n as SearchInput, t as OmniSearchProps } from "./SearchInput-CTI59-NW.cjs";
 export { OmniSearchProps, SearchInput as default };

package/dist/index2.d.mts

@@ -1,2 +1,2 @@
-import { n as SearchInput, t as OmniSearchProps } from "./SearchInput-2lsv5_R6.mjs";
+import { n as SearchInput, t as OmniSearchProps } from "./SearchInput-Bp2yjaE1.mjs";
 export { OmniSearchProps, SearchInput as default };

package/dist/index3.d.cts

@@ -1 +1,4 @@
-export { };
+import { r as resolveValueControl } from "./value-control-resolver-B9p25q3G.cjs";
+import { t as FilterBar } from "./FilterBar-YzOh02f9.cjs";
+import { t as FilterBarProps } from "./index-C9EIpBh8.cjs";
+export { FilterBarProps, FilterBar as default, resolveValueControl };

package/dist/index3.d.mts

@@ -1 +1,4 @@
-export { };
+import { r as resolveValueControl } from "./value-control-resolver-CE-bqdAl.mjs";
+import { t as FilterBar } from "./FilterBar-D3LiIy1-.mjs";
+import { t as FilterBarProps } from "./index-4_B2yRzD.mjs";
+export { FilterBarProps, FilterBar as default, resolveValueControl };

package/dist/index4.d.cts

@@ -0,0 +1,11 @@
+import { a as FilterField, c as FilterOperator, d as FilterSize, f as FilterStateV2, i as EMPTY_FILTER_STATE, l as FilterRule, n as CompoundExpression, o as FilterFieldSource, p as TopLevelFilterRule, r as DateRangeFilterValue, s as FilterFieldType, t as AndGroup, u as FilterRuleValue } from "./types-B_HHNlia.cjs";
+import { n as RawFieldInfo, r as buildFieldRegistry, t as FieldRegistry } from "./FieldRegistry-OX60T3hr.cjs";
+import { n as ValueControlResolver, r as resolveValueControl, t as ResolveValueControlOptions } from "./value-control-resolver-B9p25q3G.cjs";
+import { t as FilterBar } from "./FilterBar-YzOh02f9.cjs";
+import { t as FilterBarProps } from "./index-C9EIpBh8.cjs";
+import { a as useFilterBarSize } from "./filter-size-context-CIw0Zi6r.cjs";
+import { a as getOperatorsForField, o as getOperatorsForType, r as getDefaultOperatorForType, s as isValuelessOperator } from "./operators-1qE2GpC7.cjs";
+import { n as UseFilterStateV2Result, r as useFilterStateV2, t as UseFilterStateV2Options } from "./useFilterStateV2-DbPwX5N1.cjs";
+import { n as isFilterStateV2, r as pruneToRegistry, t as hasCompleteValue } from "./validation-CJymv6JE.cjs";
+import { t as ValueControlProps } from "./types-CCvc590y.cjs";
+export { AndGroup, CompoundExpression, DateRangeFilterValue, EMPTY_FILTER_STATE, FieldRegistry, FilterBar, FilterBarProps, FilterField, FilterFieldSource, FilterFieldType, FilterOperator, FilterRule, FilterRuleValue, FilterSize, FilterStateV2, RawFieldInfo, ResolveValueControlOptions, TopLevelFilterRule, UseFilterStateV2Options, UseFilterStateV2Result, ValueControlProps, ValueControlResolver, buildFieldRegistry, getDefaultOperatorForType, getOperatorsForField, getOperatorsForType, hasCompleteValue, isFilterStateV2, isValuelessOperator, pruneToRegistry, resolveValueControl, useFilterBarSize, useFilterStateV2 };

package/dist/index4.d.mts

@@ -0,0 +1,11 @@
+import { a as FilterField, c as FilterOperator, d as FilterSize, f as FilterStateV2, i as EMPTY_FILTER_STATE, l as FilterRule, n as CompoundExpression, o as FilterFieldSource, p as TopLevelFilterRule, r as DateRangeFilterValue, s as FilterFieldType, t as AndGroup, u as FilterRuleValue } from "./types-D58IoRx6.mjs";
+import { n as RawFieldInfo, r as buildFieldRegistry, t as FieldRegistry } from "./FieldRegistry-rqSkjchY.mjs";
+import { n as ValueControlResolver, r as resolveValueControl, t as ResolveValueControlOptions } from "./value-control-resolver-CE-bqdAl.mjs";
+import { t as FilterBar } from "./FilterBar-D3LiIy1-.mjs";
+import { t as FilterBarProps } from "./index-4_B2yRzD.mjs";
+import { a as useFilterBarSize } from "./filter-size-context-Blw6Sd69.mjs";
+import { a as getOperatorsForField, o as getOperatorsForType, r as getDefaultOperatorForType, s as isValuelessOperator } from "./operators-Bo31xlc2.mjs";
+import { n as UseFilterStateV2Result, r as useFilterStateV2, t as UseFilterStateV2Options } from "./useFilterStateV2-DCQghouq.mjs";
+import { n as isFilterStateV2, r as pruneToRegistry, t as hasCompleteValue } from "./validation-vLh3t2dk.mjs";
+import { t as ValueControlProps } from "./types-D7ppqnNj.mjs";
+export { AndGroup, CompoundExpression, DateRangeFilterValue, EMPTY_FILTER_STATE, FieldRegistry, FilterBar, FilterBarProps, FilterField, FilterFieldSource, FilterFieldType, FilterOperator, FilterRule, FilterRuleValue, FilterSize, FilterStateV2, RawFieldInfo, ResolveValueControlOptions, TopLevelFilterRule, UseFilterStateV2Options, UseFilterStateV2Result, ValueControlProps, ValueControlResolver, buildFieldRegistry, getDefaultOperatorForType, getOperatorsForField, getOperatorsForType, hasCompleteValue, isFilterStateV2, isValuelessOperator, pruneToRegistry, resolveValueControl, useFilterBarSize, useFilterStateV2 };

package/dist/index5.d.cts

@@ -0,0 +1 @@
+export { };

package/dist/index5.d.mts

@@ -0,0 +1,2 @@
+import PillShell, { PillShellProps } from "./PillShell.mjs";
+export { type PillShellProps, PillShell as default };

package/dist/index6.d.mts

@@ -0,0 +1 @@
+export { };

package/dist/{input-FEaQ66an.d.mts → input-Bv5fKt5J.d.mts}

@@ -1,5 +1,5 @@
-import { t as PseudoClassProps } from "./PseudoClassProps--MiDp2l2.mjs";
-import { t as ErrorProps } from "./ErrorProps-DBw1_Z0a.mjs";
+import { t as PseudoClassProps } from "./PseudoClassProps-DLxPxo7T.mjs";
+import { t as ErrorProps } from "./ErrorProps-CN2XjaOX.mjs";
 import * as _$styled_components0 from "styled-components";
 
 //#region mixins/input.d.ts
@@ -14,4 +14,4 @@ interface InputMixinProps extends ErrorProps, PseudoClassProps {
 declare const inputMixin: _$styled_components0.FlattenInterpolation<_$styled_components0.ThemedStyledProps<InputMixinProps, any>>;
 //#endregion
 export { InputSizes as n, inputMixin as r, InputMixinProps as t };
-//# sourceMappingURL=input-FEaQ66an.d.mts.map
+//# sourceMappingURL=input-Bv5fKt5J.d.mts.map

package/dist/{input-Bm_anD8X.d.cts → input-DPB0cX2m.d.cts}

@@ -1,5 +1,5 @@
 import { t as PseudoClassProps } from "./PseudoClassProps-C5jpj6Rp.cjs";
-import { t as ErrorProps } from "./ErrorProps-DLdVsYlk.cjs";
+import { t as ErrorProps } from "./ErrorProps-Dxqb4gw_.cjs";
 import * as _$styled_components0 from "styled-components";
 
 //#region mixins/input.d.ts
@@ -14,4 +14,4 @@ interface InputMixinProps extends ErrorProps, PseudoClassProps {
 declare const inputMixin: _$styled_components0.FlattenInterpolation<_$styled_components0.ThemedStyledProps<InputMixinProps, any>>;
 //#endregion
 export { InputSizes as n, inputMixin as r, InputMixinProps as t };
-//# sourceMappingURL=input-Bm_anD8X.d.cts.map
+//# sourceMappingURL=input-DPB0cX2m.d.cts.map

package/dist/inputFields.d.cts

@@ -1,13 +1,13 @@
-import { n as CheckboxProps } from "./Checkbox-BmjK0Wac.cjs";
-import { a as InputProps } from "./Input-XppkvfUf.cjs";
-import { n as ComboboxMultiSelectProps } from "./ComboboxMultiSelect-CRHf5TI-.cjs";
-import { n as ComboboxSingleSelectProps } from "./ComboboxSingleSelect-DvK8QioK.cjs";
-import { n as FormFieldBaseProps } from "./FormField-Cqwi_PyR.cjs";
-import { n as RadioGroupProps } from "./RadioGroup-BDO3pTgP.cjs";
-import { i as SegmentedControlProps } from "./SegmentedControl-C51htGBp.cjs";
-import { i as SelectProps } from "./Select-XN23Ui_j.cjs";
-import { t as TextAreaProps } from "./TextArea-Dl9_Zizx.cjs";
-import { n as ToggleProps } from "./Toggle-Dw4hisXm.cjs";
+import { n as CheckboxProps } from "./Checkbox-Cr8ifm10.cjs";
+import { a as InputProps } from "./Input-BM0DzWEf.cjs";
+import { n as ComboboxMultiSelectProps } from "./ComboboxMultiSelect-ioB4Jx7_.cjs";
+import { n as ComboboxSingleSelectProps } from "./ComboboxSingleSelect-Fn80tdhz.cjs";
+import { n as FormFieldBaseProps } from "./FormField-idNLw5PW.cjs";
+import { n as RadioGroupProps } from "./RadioGroup-XYWjprsv.cjs";
+import { i as SegmentedControlProps } from "./SegmentedControl-nHIK1ZvR.cjs";
+import { i as SelectProps } from "./Select-BH3hXMxp.cjs";
+import { t as TextAreaProps } from "./TextArea-CHW9FKM4.cjs";
+import { n as ToggleProps } from "./Toggle-tbIebQWC.cjs";
 import * as _$react from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime.js";
 

package/dist/inputFields.d.mts

@@ -1,15 +1,15 @@
-import { n as CheckboxProps } from "./Checkbox-Bc2kzl9q.mjs";
-import { a as InputProps } from "./Input-DW7oacjc.mjs";
-import { n as ComboboxMultiSelectProps } from "./ComboboxMultiSelect-CdLQDBMN.mjs";
-import { n as ComboboxSingleSelectProps } from "./ComboboxSingleSelect-CxiQ2o6t.mjs";
-import { n as FormFieldBaseProps } from "./FormField-24UPuoL6.mjs";
-import { n as RadioGroupProps } from "./RadioGroup-DfhvXpi3.mjs";
-import { i as SegmentedControlProps } from "./SegmentedControl-1QD2zH3l.mjs";
-import { i as SelectProps } from "./Select-BysJW9mH.mjs";
-import { t as TextAreaProps } from "./TextArea-J1MD_8rK.mjs";
-import { n as ToggleProps } from "./Toggle-CY67yh4T.mjs";
-import * as _$react from "react";
+import { n as CheckboxProps } from "./Checkbox-Bm8exUfH.mjs";
+import { a as InputProps } from "./Input-BPClVzwD.mjs";
+import { n as ComboboxMultiSelectProps } from "./ComboboxMultiSelect-dNuETspL.mjs";
+import { n as ComboboxSingleSelectProps } from "./ComboboxSingleSelect-C8KvIJ43.mjs";
+import { n as FormFieldBaseProps } from "./FormField-BugkBvN4.mjs";
+import { n as RadioGroupProps } from "./RadioGroup-DKqbSfju.mjs";
+import { i as SegmentedControlProps } from "./SegmentedControl-DrjdUOU9.mjs";
+import { i as SelectProps } from "./Select-2KbtKawr.mjs";
+import { t as TextAreaProps } from "./TextArea-B89wtTsF.mjs";
+import { n as ToggleProps } from "./Toggle-DzYLgxGk.mjs";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import * as _$react from "react";
 
 //#region components/FormField/inputFields.d.ts
 type ImplementsFormField = Omit<FormFieldBaseProps, 'children'>;

package/dist/intersperse-_0nQM5Rb.cjs

@@ -0,0 +1,26 @@
+//#region lib/intersperse.ts
+/**
+* @name intersperse
+*
+* Inserts an element between array items using a separator function. The
+* separator function is passed the previous index, the previous element, and
+* the next element.
+*
+* ```typescript
+* const nodeList: React.ReactNode[] = [...]
+* const commaSeparatedList = intersperse(nodeList, () => ', ')
+* const advancedSeparatedList = intersperse(nodeList, i => <Separator key={i}/>)
+* ```
+*/
+function intersperse(arr, separator) {
+	return arr.flatMap((a, i) => i > 0 ? [separator(i - 1, arr[i - 1], a), a] : [a]);
+}
+//#endregion
+Object.defineProperty(exports, "intersperse", {
+	enumerable: true,
+	get: function() {
+		return intersperse;
+	}
+});
+
+//# sourceMappingURL=intersperse-_0nQM5Rb.cjs.map

package/dist/intersperse-_0nQM5Rb.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"intersperse-_0nQM5Rb.cjs","names":[],"sources":["../lib/intersperse.ts"],"sourcesContent":["/**\n * @name intersperse\n *\n * Inserts an element between array items using a separator function. The\n * separator function is passed the previous index, the previous element, and\n * the next element.\n *\n * ```typescript\n * const nodeList: React.ReactNode[] = [...]\n * const commaSeparatedList = intersperse(nodeList, () => ', ')\n * const advancedSeparatedList = intersperse(nodeList, i => <Separator key={i}/>)\n * ```\n */\nexport function intersperse<T>(arr: T[], separator: (n: number, prev: T, curr: T) => T): T[] {\n  return arr.flatMap((a, i) => (i > 0 ? [separator(i - 1, arr[i - 1], a), a] : [a]));\n}\n"],"mappings":";;;;;;;;;;;;;;AAaA,SAAgB,YAAe,KAAU,WAAoD;AAC3F,QAAO,IAAI,SAAS,GAAG,MAAO,IAAI,IAAI,CAAC,UAAU,IAAI,GAAG,IAAI,IAAI,IAAI,EAAE,EAAE,EAAE,GAAG,CAAC,EAAE,CAAE"}

package/dist/intersperse-vOYvFOfF.mjs

@@ -0,0 +1,21 @@
+//#region lib/intersperse.ts
+/**
+* @name intersperse
+*
+* Inserts an element between array items using a separator function. The
+* separator function is passed the previous index, the previous element, and
+* the next element.
+*
+* ```typescript
+* const nodeList: React.ReactNode[] = [...]
+* const commaSeparatedList = intersperse(nodeList, () => ', ')
+* const advancedSeparatedList = intersperse(nodeList, i => <Separator key={i}/>)
+* ```
+*/
+function intersperse(arr, separator) {
+	return arr.flatMap((a, i) => i > 0 ? [separator(i - 1, arr[i - 1], a), a] : [a]);
+}
+//#endregion
+export { intersperse as t };
+
+//# sourceMappingURL=intersperse-vOYvFOfF.mjs.map

package/dist/intersperse-vOYvFOfF.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"intersperse-vOYvFOfF.mjs","names":[],"sources":["../lib/intersperse.ts"],"sourcesContent":["/**\n * @name intersperse\n *\n * Inserts an element between array items using a separator function. The\n * separator function is passed the previous index, the previous element, and\n * the next element.\n *\n * ```typescript\n * const nodeList: React.ReactNode[] = [...]\n * const commaSeparatedList = intersperse(nodeList, () => ', ')\n * const advancedSeparatedList = intersperse(nodeList, i => <Separator key={i}/>)\n * ```\n */\nexport function intersperse<T>(arr: T[], separator: (n: number, prev: T, curr: T) => T): T[] {\n  return arr.flatMap((a, i) => (i > 0 ? [separator(i - 1, arr[i - 1], a), a] : [a]));\n}\n"],"mappings":";;;;;;;;;;;;;;AAaA,SAAgB,YAAe,KAAU,WAAoD;AAC3F,QAAO,IAAI,SAAS,GAAG,MAAO,IAAI,IAAI,CAAC,UAAU,IAAI,GAAG,IAAI,IAAI,IAAI,EAAE,EAAE,EAAE,GAAG,CAAC,EAAE,CAAE"}

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-q9fNLtcA.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-DMpR-yaJ.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-BBoWmFii.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-CE1oH6Iz.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-DtWJO_kU.mjs";
+import { n as Tooltip } from "../Tooltip-CUC-JuRL.mjs";
 import { ComponentProps, ComponentPropsWithoutRef, FC } from "react";
 
 //#region lib/TruncatedTextWithTooltip.d.ts