@trackunit/react-components 1.14.33 → 1.15.0

package/index.cjs.js

@@ -905,16 +905,6 @@ const IconButton = ({ icon, size = "medium", square = true, loading = false, dis
 };
 IconButton.displayName = "IconButton";
 
-/**
- * The StarButton component is used for favorite actions or similar.
- *
- * @param {StarButtonProps} props - The props for the StarButton component
- * @returns {ReactElement} StarButton component
- */
-const StarButton = ({ starred, onClick }) => {
-    return (jsxRuntime.jsx("div", { "data-test-id": "starred-filter", onClick: onClick, children: jsxRuntime.jsx(Icon, { color: starred ? "primary" : "neutral", name: "Star", size: "medium" }) }));
-};
-
 const cvaAlert = cssClassVarianceUtilities.cvaMerge(["flex", "flex-col", "gap-3", "relative", "p-3", "rounded-lg", "@container"], {
     variants: {
         color: {
@@ -1416,6 +1406,16 @@ const BreadcrumbContainer = ({ "data-testid": dataTestId, breadcrumbItems, }) =>
     return jsxRuntime.jsx(BreadcrumbForLargeScreen, { breadcrumbItems: breadcrumbItems, "data-testid": `largeScreen-${dataTestId}` });
 };
 
+/**
+ * The StarButton component is used for favorite actions or similar.
+ *
+ * @param {StarButtonProps} props - The props for the StarButton component
+ * @returns {ReactElement} StarButton component
+ */
+const StarButton = ({ starred, onClick }) => {
+    return (jsxRuntime.jsx("div", { "data-test-id": "starred-filter", onClick: onClick, children: jsxRuntime.jsx(Icon, { color: starred ? "primary" : "neutral", name: "Star", size: "medium" }) }));
+};
+
 const cvaCard = cssClassVarianceUtilities.cvaMerge([
     "flex",
     "border",
@@ -3955,16 +3955,6 @@ const PopoverContent = function PopoverContent({ className, "data-testid": dataT
                 }, ...context.getFloatingProps(props), children: typeof children === "function" ? children(() => context.setIsOpen(false)) : children }) })) : null }));
 };
 
-/**
- * The PopoverTitle component.
- *
- * @param {PopoverTitleProps} props - The props for the PopoverTitle component
- * @returns {ReactElement} PopoverTitle component
- */
-const PopoverTitle = ({ children, action, divider = false, className, "data-testid": dataTestId, }) => {
-    return (jsxRuntime.jsxs("div", { className: cvaPopoverTitleContainer({ divider, className }), "data-testid": dataTestId, children: [jsxRuntime.jsx(Text, { className: cvaPopoverTitleText(), size: "small", subtle: true, type: "div", uppercase: true, weight: "bold", children: children }), action] }));
-};
-
 /**
  * The PopoverTrigger component is used to trigger the popover.
  *
@@ -4418,27 +4408,6 @@ const KPI = ({ title, value, unit, className, "data-testid": dataTestId, tooltip
     return (jsxRuntime.jsx(Tooltip, { className: "min-w-8 shrink-0", "data-testid": dataTestId ? `${dataTestId}-tooltip` : undefined, disabled: tooltipLabel === undefined || tooltipLabel === "", label: tooltipLabel, placement: "bottom", children: jsxRuntime.jsxs("div", { className: cvaKPI({ variant, className }), "data-testid": dataTestId, style: style, ...rest, children: [jsxRuntime.jsx(Text, { className: tailwindMerge.twMerge("truncate", "whitespace-nowrap"), "data-testid": dataTestId ? `${dataTestId}-title` : undefined, size: isSmallVariant ? "small" : "medium", subtle: true, weight: isSmallVariant ? "normal" : "bold", children: title }), jsxRuntime.jsx("div", { className: tailwindMerge.twMerge("truncate", "whitespace-nowrap"), children: jsxRuntime.jsxs(Text, { className: "truncate whitespace-nowrap text-lg font-medium", "data-testid": dataTestId ? `${dataTestId}-value` : undefined, size: isSmallVariant ? "small" : "large", type: "div", weight: isSmallVariant ? "bold" : "thick", children: [value, " ", unit] }) })] }) }));
 };
 
-/**
- * Display a single placeholder block for shape-based elements before data gets loaded to reduce load-time frustration.
- *
- * Fills the full height for images, badges, buttons, avatars, and other shape-based elements.
- * Uses numbers or CSS length values for height.
- *
- * For text content, use SkeletonLabel component instead.
- * For multiple text lines, use SkeletonLines component instead.
- */
-const SkeletonBlock = react.memo((props) => {
-    const { width = "100%", height = 16, flexibleWidth = false, className, "data-testid": dataTestId, children } = props;
-    const widthValue = typeof width === "number" ? `${width}px` : width;
-    const heightValue = typeof height === "number" ? `${height}px` : height;
-    return (jsxRuntime.jsx("div", { "aria-label": "Loading", className: cvaSkeleton({ className }), "data-testid": dataTestId, role: "status", style: {
-            width: flexibleWidth ? "100%" : widthValue,
-            maxWidth: flexibleWidth ? widthValue : undefined,
-            height: heightValue,
-        }, children: children }));
-});
-SkeletonBlock.displayName = "SkeletonBlock";
-
 /**
  * Generates a random width percentage string for skeleton loading components.
  *
@@ -4452,136 +4421,6 @@ const getResponsiveRandomWidthPercentage = ({ min, max }) => {
     return `${randomWidth}%`;
 };
 
-/**
- * Preset configurations for common skeleton patterns.
- */
-const PRESET_CONFIGURATIONS = {
-    "short-paragraph": [
-        { textSize: "text-base", width: "100%" },
-        { textSize: "text-base", width: "100%" },
-        { textSize: "text-base", width: "60%" },
-    ],
-    paragraph: [
-        { textSize: "text-base", width: "100%" },
-        { textSize: "text-base", width: "100%" },
-        { textSize: "text-base", width: "95%" },
-        { textSize: "text-base", width: "90%" },
-        { textSize: "text-base", width: "65%" },
-    ],
-    "long-paragraph": [
-        { textSize: "text-base", width: "100%" },
-        { textSize: "text-base", width: "100%" },
-        { textSize: "text-base", width: "98%" },
-        { textSize: "text-base", width: "95%" },
-        { textSize: "text-base", width: "92%" },
-        { textSize: "text-base", width: "88%" },
-        { textSize: "text-base", width: "85%" },
-        { textSize: "text-base", width: "60%" },
-    ],
-    "title-paragraph": [
-        { textSize: "text-2xl", width: "65%" },
-        { textSize: "text-base", width: "100%" },
-        { textSize: "text-base", width: "95%" },
-        { textSize: "text-base", width: "70%" },
-    ],
-    "heading-text": [
-        { textSize: "text-xl", width: "60%" },
-        { textSize: "text-base", width: "100%" },
-        { textSize: "text-base", width: "100%" },
-        { textSize: "text-base", width: "90%" },
-        { textSize: "text-base", width: "65%" },
-    ],
-    article: [
-        { textSize: "text-3xl", width: "70%" },
-        { textSize: "text-sm", width: "40%" },
-        { textSize: "text-base", width: "100%" },
-        { textSize: "text-base", width: "100%" },
-        { textSize: "text-base", width: "95%" },
-        { textSize: "text-base", width: "90%" },
-        { textSize: "text-base", width: "65%" },
-    ],
-};
-
-const cvaSkeletonContainer = cssClassVarianceUtilities.cvaMerge(["flex", "flex-col"]);
-cssClassVarianceUtilities.cvaMerge([
-    "relative",
-    "overflow-hidden",
-    "rounded-lg",
-    // Gradient background
-    "bg-gradient-to-r",
-    "from-gray-200/80",
-    "via-gray-300/60",
-    "to-gray-200/80",
-    // Pulse animation
-    "animate-pulse",
-    // Shimmer overlay
-    "before:absolute",
-    "before:inset-0",
-    "before:bg-gradient-to-r",
-    "before:from-transparent",
-    "before:via-white/50",
-    "before:to-transparent",
-    "before:opacity-0",
-    "before:animate-pulse",
-    // Smooth transitions for accessibility
-    "transition-all",
-    "duration-300",
-    "ease-in-out",
-]);
-
-/**
- * Display multiple placeholder lines before data gets loaded to reduce load-time frustration.
- *
- * Supports three modes:
- * - **Uniform mode** (default): Display identical lines using `count` prop
- * - **Custom mode**: Display customized lines with per-line configuration using `variant="custom"` and `lines` prop
- * - **Preset mode**: Display common patterns using `variant="preset"` and `preset` name
- *
- * Built on top of the [SkeletonLabel](?path=/docs/components-loading-states-skeletonlabel--docs) component for text-specific margins and sizing.
- *
- * @example
- * // Uniform lines (simple mode)
- * <SkeletonLines count={3} textSize="text-base" variant="uniform" />
- * @example
- * // Custom lines (advanced mode)
- * <SkeletonLines
- *   variant="custom"
- *   lines={[
- *     { textSize: "text-lg", width: "100%" },
- *     { textSize: "text-base", width: "95%" },
- *     { textSize: "text-base", width: "70%" }
- *   ]}
- * />
- * @example
- * // Preset lines (quick patterns)
- * <SkeletonLines variant="preset" preset="title-paragraph" />
- */
-const SkeletonLines = react.memo((props) => {
-    const { className, "data-testid": dataTestId } = props;
-    // Generate line configs based on variant
-    let lineConfigs;
-    if (props.variant === "preset") {
-        // TypeScript now knows props is PresetSkeletonLinesProps
-        lineConfigs = PRESET_CONFIGURATIONS[props.preset];
-    }
-    else if (props.variant === "custom") {
-        // TypeScript now knows props is CustomSkeletonLinesProps
-        lineConfigs = props.lines;
-    }
-    else {
-        // TypeScript now knows props is UniformSkeletonLinesProps
-        lineConfigs = Array.from({ length: props.count }, () => ({
-            textSize: props.textSize,
-            width: props.width,
-            flexibleWidth: props.flexibleWidth,
-            className: props.lineClassName,
-        }));
-    }
-    const lineCount = lineConfigs.length;
-    return (jsxRuntime.jsx("div", { "aria-label": `Loading ${lineCount} ${lineCount === 1 ? "item" : "items"}`, className: cvaSkeletonContainer({ className }), "data-testid": dataTestId, "data-variant": props.variant, role: "status", ...(props.variant === "preset" && { "data-preset": props.preset }), children: lineConfigs.map((config, index) => (jsxRuntime.jsx(SkeletonLabel, { className: config.className, "data-testid": dataTestId ? `${dataTestId}-${index}` : undefined, flexibleWidth: config.flexibleWidth ?? true, textSize: config.textSize ?? "text-base", width: config.width ?? "100%" }, index))) }));
-});
-SkeletonLines.displayName = "SkeletonLines";
-
 /**
  * Skeleton loading indicator that mimics the KPI component structure.
  * Uses the same layout, spacing, and visual hierarchy as KPI.
@@ -4828,6 +4667,27 @@ const KPICard = ({ isActive = false, onClick, className, "data-testid": dataTest
                 jsxRuntime.jsxs("div", { className: "flex items-center gap-1 truncate", "data-testid": dataTestId ? `${dataTestId}-notice` : undefined, children: [notice.iconName ? (jsxRuntime.jsx(Icon, { color: notice.iconColor, "data-testid": dataTestId ? `${dataTestId}-notice-icon` : undefined, name: notice.iconName, size: "small" })) : null, jsxRuntime.jsx(Text, { className: "truncate text-neutral-900", "data-testid": dataTestId ? `${dataTestId}-notice-label` : undefined, size: "small", children: notice.label })] })) : null, children] }) }));
 };
 
+/**
+ * Display a single placeholder block for shape-based elements before data gets loaded to reduce load-time frustration.
+ *
+ * Fills the full height for images, badges, buttons, avatars, and other shape-based elements.
+ * Uses numbers or CSS length values for height.
+ *
+ * For text content, use SkeletonLabel component instead.
+ * For multiple text lines, use SkeletonLines component instead.
+ */
+const SkeletonBlock = react.memo((props) => {
+    const { width = "100%", height = 16, flexibleWidth = false, className, "data-testid": dataTestId, children } = props;
+    const widthValue = typeof width === "number" ? `${width}px` : width;
+    const heightValue = typeof height === "number" ? `${height}px` : height;
+    return (jsxRuntime.jsx("div", { "aria-label": "Loading", className: cvaSkeleton({ className }), "data-testid": dataTestId, role: "status", style: {
+            width: flexibleWidth ? "100%" : widthValue,
+            maxWidth: flexibleWidth ? widthValue : undefined,
+            height: heightValue,
+        }, children: children }));
+});
+SkeletonBlock.displayName = "SkeletonBlock";
+
 /**
  * Skeleton loading indicator that mimics the KPICard component structure.
  * Uses the same layout, spacing, and visual hierarchy as KPICard.
@@ -5875,6 +5735,136 @@ const PageContent = ({ className, children, "data-testid": dataTestId, layout, }
     return (jsxRuntime.jsx("div", { className: cvaPageContent({ className, layout }), "data-testid": dataTestId ? dataTestId : "page-content", children: children }));
 };
 
+/**
+ * Preset configurations for common skeleton patterns.
+ */
+const PRESET_CONFIGURATIONS = {
+    "short-paragraph": [
+        { textSize: "text-base", width: "100%" },
+        { textSize: "text-base", width: "100%" },
+        { textSize: "text-base", width: "60%" },
+    ],
+    paragraph: [
+        { textSize: "text-base", width: "100%" },
+        { textSize: "text-base", width: "100%" },
+        { textSize: "text-base", width: "95%" },
+        { textSize: "text-base", width: "90%" },
+        { textSize: "text-base", width: "65%" },
+    ],
+    "long-paragraph": [
+        { textSize: "text-base", width: "100%" },
+        { textSize: "text-base", width: "100%" },
+        { textSize: "text-base", width: "98%" },
+        { textSize: "text-base", width: "95%" },
+        { textSize: "text-base", width: "92%" },
+        { textSize: "text-base", width: "88%" },
+        { textSize: "text-base", width: "85%" },
+        { textSize: "text-base", width: "60%" },
+    ],
+    "title-paragraph": [
+        { textSize: "text-2xl", width: "65%" },
+        { textSize: "text-base", width: "100%" },
+        { textSize: "text-base", width: "95%" },
+        { textSize: "text-base", width: "70%" },
+    ],
+    "heading-text": [
+        { textSize: "text-xl", width: "60%" },
+        { textSize: "text-base", width: "100%" },
+        { textSize: "text-base", width: "100%" },
+        { textSize: "text-base", width: "90%" },
+        { textSize: "text-base", width: "65%" },
+    ],
+    article: [
+        { textSize: "text-3xl", width: "70%" },
+        { textSize: "text-sm", width: "40%" },
+        { textSize: "text-base", width: "100%" },
+        { textSize: "text-base", width: "100%" },
+        { textSize: "text-base", width: "95%" },
+        { textSize: "text-base", width: "90%" },
+        { textSize: "text-base", width: "65%" },
+    ],
+};
+
+const cvaSkeletonContainer = cssClassVarianceUtilities.cvaMerge(["flex", "flex-col"]);
+cssClassVarianceUtilities.cvaMerge([
+    "relative",
+    "overflow-hidden",
+    "rounded-lg",
+    // Gradient background
+    "bg-gradient-to-r",
+    "from-gray-200/80",
+    "via-gray-300/60",
+    "to-gray-200/80",
+    // Pulse animation
+    "animate-pulse",
+    // Shimmer overlay
+    "before:absolute",
+    "before:inset-0",
+    "before:bg-gradient-to-r",
+    "before:from-transparent",
+    "before:via-white/50",
+    "before:to-transparent",
+    "before:opacity-0",
+    "before:animate-pulse",
+    // Smooth transitions for accessibility
+    "transition-all",
+    "duration-300",
+    "ease-in-out",
+]);
+
+/**
+ * Display multiple placeholder lines before data gets loaded to reduce load-time frustration.
+ *
+ * Supports three modes:
+ * - **Uniform mode** (default): Display identical lines using `count` prop
+ * - **Custom mode**: Display customized lines with per-line configuration using `variant="custom"` and `lines` prop
+ * - **Preset mode**: Display common patterns using `variant="preset"` and `preset` name
+ *
+ * Built on top of the [SkeletonLabel](?path=/docs/components-loading-states-skeletonlabel--docs) component for text-specific margins and sizing.
+ *
+ * @example
+ * // Uniform lines (simple mode)
+ * <SkeletonLines count={3} textSize="text-base" variant="uniform" />
+ * @example
+ * // Custom lines (advanced mode)
+ * <SkeletonLines
+ *   variant="custom"
+ *   lines={[
+ *     { textSize: "text-lg", width: "100%" },
+ *     { textSize: "text-base", width: "95%" },
+ *     { textSize: "text-base", width: "70%" }
+ *   ]}
+ * />
+ * @example
+ * // Preset lines (quick patterns)
+ * <SkeletonLines variant="preset" preset="title-paragraph" />
+ */
+const SkeletonLines = react.memo((props) => {
+    const { className, "data-testid": dataTestId } = props;
+    // Generate line configs based on variant
+    let lineConfigs;
+    if (props.variant === "preset") {
+        // TypeScript now knows props is PresetSkeletonLinesProps
+        lineConfigs = PRESET_CONFIGURATIONS[props.preset];
+    }
+    else if (props.variant === "custom") {
+        // TypeScript now knows props is CustomSkeletonLinesProps
+        lineConfigs = props.lines;
+    }
+    else {
+        // TypeScript now knows props is UniformSkeletonLinesProps
+        lineConfigs = Array.from({ length: props.count }, () => ({
+            textSize: props.textSize,
+            width: props.width,
+            flexibleWidth: props.flexibleWidth,
+            className: props.lineClassName,
+        }));
+    }
+    const lineCount = lineConfigs.length;
+    return (jsxRuntime.jsx("div", { "aria-label": `Loading ${lineCount} ${lineCount === 1 ? "item" : "items"}`, className: cvaSkeletonContainer({ className }), "data-testid": dataTestId, "data-variant": props.variant, role: "status", ...(props.variant === "preset" && { "data-preset": props.preset }), children: lineConfigs.map((config, index) => (jsxRuntime.jsx(SkeletonLabel, { className: config.className, "data-testid": dataTestId ? `${dataTestId}-${index}` : undefined, flexibleWidth: config.flexibleWidth ?? true, textSize: config.textSize ?? "text-base", width: config.width ?? "100%" }, index))) }));
+});
+SkeletonLines.displayName = "SkeletonLines";
+
 const LoadingContent = () => (jsxRuntime.jsx("div", { className: "flex flex-row items-center", "data-testid": "kpi-card-loading-content", children: jsxRuntime.jsx("div", { className: "w-full", children: jsxRuntime.jsx(SkeletonLines, { lines: [
                 { textSize: "text-xs", width: 50 },
                 { textSize: "text-lg", width: 40 },
@@ -6199,6 +6189,16 @@ const Polygon = ({ points, size, color = "black", opaque = true, className, "dat
 };
 const normalize = ({ value, min, max, size }) => ((value - min) / (max - min)) * size;
 
+/**
+ * The PopoverTitle component.
+ *
+ * @param {PopoverTitleProps} props - The props for the PopoverTitle component
+ * @returns {ReactElement} PopoverTitle component
+ */
+const PopoverTitle = ({ children, action, divider = false, className, "data-testid": dataTestId, }) => {
+    return (jsxRuntime.jsxs("div", { className: cvaPopoverTitleContainer({ divider, className }), "data-testid": dataTestId, children: [jsxRuntime.jsx(Text, { className: cvaPopoverTitleText(), size: "small", subtle: true, type: "div", uppercase: true, weight: "bold", children: children }), action] }));
+};
+
 const cvaPreferenceCard = cssClassVarianceUtilities.cvaMerge([
     "rounded-lg",
     "border",

package/index.esm.js

@@ -903,16 +903,6 @@ const IconButton = ({ icon, size = "medium", square = true, loading = false, dis
 };
 IconButton.displayName = "IconButton";
 
-/**
- * The StarButton component is used for favorite actions or similar.
- *
- * @param {StarButtonProps} props - The props for the StarButton component
- * @returns {ReactElement} StarButton component
- */
-const StarButton = ({ starred, onClick }) => {
-    return (jsx("div", { "data-test-id": "starred-filter", onClick: onClick, children: jsx(Icon, { color: starred ? "primary" : "neutral", name: "Star", size: "medium" }) }));
-};
-
 const cvaAlert = cvaMerge(["flex", "flex-col", "gap-3", "relative", "p-3", "rounded-lg", "@container"], {
     variants: {
         color: {
@@ -1414,6 +1404,16 @@ const BreadcrumbContainer = ({ "data-testid": dataTestId, breadcrumbItems, }) =>
     return jsx(BreadcrumbForLargeScreen, { breadcrumbItems: breadcrumbItems, "data-testid": `largeScreen-${dataTestId}` });
 };
 
+/**
+ * The StarButton component is used for favorite actions or similar.
+ *
+ * @param {StarButtonProps} props - The props for the StarButton component
+ * @returns {ReactElement} StarButton component
+ */
+const StarButton = ({ starred, onClick }) => {
+    return (jsx("div", { "data-test-id": "starred-filter", onClick: onClick, children: jsx(Icon, { color: starred ? "primary" : "neutral", name: "Star", size: "medium" }) }));
+};
+
 const cvaCard = cvaMerge([
     "flex",
     "border",
@@ -3953,16 +3953,6 @@ const PopoverContent = function PopoverContent({ className, "data-testid": dataT
                 }, ...context.getFloatingProps(props), children: typeof children === "function" ? children(() => context.setIsOpen(false)) : children }) })) : null }));
 };
 
-/**
- * The PopoverTitle component.
- *
- * @param {PopoverTitleProps} props - The props for the PopoverTitle component
- * @returns {ReactElement} PopoverTitle component
- */
-const PopoverTitle = ({ children, action, divider = false, className, "data-testid": dataTestId, }) => {
-    return (jsxs("div", { className: cvaPopoverTitleContainer({ divider, className }), "data-testid": dataTestId, children: [jsx(Text, { className: cvaPopoverTitleText(), size: "small", subtle: true, type: "div", uppercase: true, weight: "bold", children: children }), action] }));
-};
-
 /**
  * The PopoverTrigger component is used to trigger the popover.
  *
@@ -4416,27 +4406,6 @@ const KPI = ({ title, value, unit, className, "data-testid": dataTestId, tooltip
     return (jsx(Tooltip, { className: "min-w-8 shrink-0", "data-testid": dataTestId ? `${dataTestId}-tooltip` : undefined, disabled: tooltipLabel === undefined || tooltipLabel === "", label: tooltipLabel, placement: "bottom", children: jsxs("div", { className: cvaKPI({ variant, className }), "data-testid": dataTestId, style: style, ...rest, children: [jsx(Text, { className: twMerge("truncate", "whitespace-nowrap"), "data-testid": dataTestId ? `${dataTestId}-title` : undefined, size: isSmallVariant ? "small" : "medium", subtle: true, weight: isSmallVariant ? "normal" : "bold", children: title }), jsx("div", { className: twMerge("truncate", "whitespace-nowrap"), children: jsxs(Text, { className: "truncate whitespace-nowrap text-lg font-medium", "data-testid": dataTestId ? `${dataTestId}-value` : undefined, size: isSmallVariant ? "small" : "large", type: "div", weight: isSmallVariant ? "bold" : "thick", children: [value, " ", unit] }) })] }) }));
 };
 
-/**
- * Display a single placeholder block for shape-based elements before data gets loaded to reduce load-time frustration.
- *
- * Fills the full height for images, badges, buttons, avatars, and other shape-based elements.
- * Uses numbers or CSS length values for height.
- *
- * For text content, use SkeletonLabel component instead.
- * For multiple text lines, use SkeletonLines component instead.
- */
-const SkeletonBlock = memo((props) => {
-    const { width = "100%", height = 16, flexibleWidth = false, className, "data-testid": dataTestId, children } = props;
-    const widthValue = typeof width === "number" ? `${width}px` : width;
-    const heightValue = typeof height === "number" ? `${height}px` : height;
-    return (jsx("div", { "aria-label": "Loading", className: cvaSkeleton({ className }), "data-testid": dataTestId, role: "status", style: {
-            width: flexibleWidth ? "100%" : widthValue,
-            maxWidth: flexibleWidth ? widthValue : undefined,
-            height: heightValue,
-        }, children: children }));
-});
-SkeletonBlock.displayName = "SkeletonBlock";
-
 /**
  * Generates a random width percentage string for skeleton loading components.
  *
@@ -4450,136 +4419,6 @@ const getResponsiveRandomWidthPercentage = ({ min, max }) => {
     return `${randomWidth}%`;
 };
 
-/**
- * Preset configurations for common skeleton patterns.
- */
-const PRESET_CONFIGURATIONS = {
-    "short-paragraph": [
-        { textSize: "text-base", width: "100%" },
-        { textSize: "text-base", width: "100%" },
-        { textSize: "text-base", width: "60%" },
-    ],
-    paragraph: [
-        { textSize: "text-base", width: "100%" },
-        { textSize: "text-base", width: "100%" },
-        { textSize: "text-base", width: "95%" },
-        { textSize: "text-base", width: "90%" },
-        { textSize: "text-base", width: "65%" },
-    ],
-    "long-paragraph": [
-        { textSize: "text-base", width: "100%" },
-        { textSize: "text-base", width: "100%" },
-        { textSize: "text-base", width: "98%" },
-        { textSize: "text-base", width: "95%" },
-        { textSize: "text-base", width: "92%" },
-        { textSize: "text-base", width: "88%" },
-        { textSize: "text-base", width: "85%" },
-        { textSize: "text-base", width: "60%" },
-    ],
-    "title-paragraph": [
-        { textSize: "text-2xl", width: "65%" },
-        { textSize: "text-base", width: "100%" },
-        { textSize: "text-base", width: "95%" },
-        { textSize: "text-base", width: "70%" },
-    ],
-    "heading-text": [
-        { textSize: "text-xl", width: "60%" },
-        { textSize: "text-base", width: "100%" },
-        { textSize: "text-base", width: "100%" },
-        { textSize: "text-base", width: "90%" },
-        { textSize: "text-base", width: "65%" },
-    ],
-    article: [
-        { textSize: "text-3xl", width: "70%" },
-        { textSize: "text-sm", width: "40%" },
-        { textSize: "text-base", width: "100%" },
-        { textSize: "text-base", width: "100%" },
-        { textSize: "text-base", width: "95%" },
-        { textSize: "text-base", width: "90%" },
-        { textSize: "text-base", width: "65%" },
-    ],
-};
-
-const cvaSkeletonContainer = cvaMerge(["flex", "flex-col"]);
-cvaMerge([
-    "relative",
-    "overflow-hidden",
-    "rounded-lg",
-    // Gradient background
-    "bg-gradient-to-r",
-    "from-gray-200/80",
-    "via-gray-300/60",
-    "to-gray-200/80",
-    // Pulse animation
-    "animate-pulse",
-    // Shimmer overlay
-    "before:absolute",
-    "before:inset-0",
-    "before:bg-gradient-to-r",
-    "before:from-transparent",
-    "before:via-white/50",
-    "before:to-transparent",
-    "before:opacity-0",
-    "before:animate-pulse",
-    // Smooth transitions for accessibility
-    "transition-all",
-    "duration-300",
-    "ease-in-out",
-]);
-
-/**
- * Display multiple placeholder lines before data gets loaded to reduce load-time frustration.
- *
- * Supports three modes:
- * - **Uniform mode** (default): Display identical lines using `count` prop
- * - **Custom mode**: Display customized lines with per-line configuration using `variant="custom"` and `lines` prop
- * - **Preset mode**: Display common patterns using `variant="preset"` and `preset` name
- *
- * Built on top of the [SkeletonLabel](?path=/docs/components-loading-states-skeletonlabel--docs) component for text-specific margins and sizing.
- *
- * @example
- * // Uniform lines (simple mode)
- * <SkeletonLines count={3} textSize="text-base" variant="uniform" />
- * @example
- * // Custom lines (advanced mode)
- * <SkeletonLines
- *   variant="custom"
- *   lines={[
- *     { textSize: "text-lg", width: "100%" },
- *     { textSize: "text-base", width: "95%" },
- *     { textSize: "text-base", width: "70%" }
- *   ]}
- * />
- * @example
- * // Preset lines (quick patterns)
- * <SkeletonLines variant="preset" preset="title-paragraph" />
- */
-const SkeletonLines = memo((props) => {
-    const { className, "data-testid": dataTestId } = props;
-    // Generate line configs based on variant
-    let lineConfigs;
-    if (props.variant === "preset") {
-        // TypeScript now knows props is PresetSkeletonLinesProps
-        lineConfigs = PRESET_CONFIGURATIONS[props.preset];
-    }
-    else if (props.variant === "custom") {
-        // TypeScript now knows props is CustomSkeletonLinesProps
-        lineConfigs = props.lines;
-    }
-    else {
-        // TypeScript now knows props is UniformSkeletonLinesProps
-        lineConfigs = Array.from({ length: props.count }, () => ({
-            textSize: props.textSize,
-            width: props.width,
-            flexibleWidth: props.flexibleWidth,
-            className: props.lineClassName,
-        }));
-    }
-    const lineCount = lineConfigs.length;
-    return (jsx("div", { "aria-label": `Loading ${lineCount} ${lineCount === 1 ? "item" : "items"}`, className: cvaSkeletonContainer({ className }), "data-testid": dataTestId, "data-variant": props.variant, role: "status", ...(props.variant === "preset" && { "data-preset": props.preset }), children: lineConfigs.map((config, index) => (jsx(SkeletonLabel, { className: config.className, "data-testid": dataTestId ? `${dataTestId}-${index}` : undefined, flexibleWidth: config.flexibleWidth ?? true, textSize: config.textSize ?? "text-base", width: config.width ?? "100%" }, index))) }));
-});
-SkeletonLines.displayName = "SkeletonLines";
-
 /**
  * Skeleton loading indicator that mimics the KPI component structure.
  * Uses the same layout, spacing, and visual hierarchy as KPI.
@@ -4826,6 +4665,27 @@ const KPICard = ({ isActive = false, onClick, className, "data-testid": dataTest
                 jsxs("div", { className: "flex items-center gap-1 truncate", "data-testid": dataTestId ? `${dataTestId}-notice` : undefined, children: [notice.iconName ? (jsx(Icon, { color: notice.iconColor, "data-testid": dataTestId ? `${dataTestId}-notice-icon` : undefined, name: notice.iconName, size: "small" })) : null, jsx(Text, { className: "truncate text-neutral-900", "data-testid": dataTestId ? `${dataTestId}-notice-label` : undefined, size: "small", children: notice.label })] })) : null, children] }) }));
 };
 
+/**
+ * Display a single placeholder block for shape-based elements before data gets loaded to reduce load-time frustration.
+ *
+ * Fills the full height for images, badges, buttons, avatars, and other shape-based elements.
+ * Uses numbers or CSS length values for height.
+ *
+ * For text content, use SkeletonLabel component instead.
+ * For multiple text lines, use SkeletonLines component instead.
+ */
+const SkeletonBlock = memo((props) => {
+    const { width = "100%", height = 16, flexibleWidth = false, className, "data-testid": dataTestId, children } = props;
+    const widthValue = typeof width === "number" ? `${width}px` : width;
+    const heightValue = typeof height === "number" ? `${height}px` : height;
+    return (jsx("div", { "aria-label": "Loading", className: cvaSkeleton({ className }), "data-testid": dataTestId, role: "status", style: {
+            width: flexibleWidth ? "100%" : widthValue,
+            maxWidth: flexibleWidth ? widthValue : undefined,
+            height: heightValue,
+        }, children: children }));
+});
+SkeletonBlock.displayName = "SkeletonBlock";
+
 /**
  * Skeleton loading indicator that mimics the KPICard component structure.
  * Uses the same layout, spacing, and visual hierarchy as KPICard.
@@ -5873,6 +5733,136 @@ const PageContent = ({ className, children, "data-testid": dataTestId, layout, }
     return (jsx("div", { className: cvaPageContent({ className, layout }), "data-testid": dataTestId ? dataTestId : "page-content", children: children }));
 };
 
+/**
+ * Preset configurations for common skeleton patterns.
+ */
+const PRESET_CONFIGURATIONS = {
+    "short-paragraph": [
+        { textSize: "text-base", width: "100%" },
+        { textSize: "text-base", width: "100%" },
+        { textSize: "text-base", width: "60%" },
+    ],
+    paragraph: [
+        { textSize: "text-base", width: "100%" },
+        { textSize: "text-base", width: "100%" },
+        { textSize: "text-base", width: "95%" },
+        { textSize: "text-base", width: "90%" },
+        { textSize: "text-base", width: "65%" },
+    ],
+    "long-paragraph": [
+        { textSize: "text-base", width: "100%" },
+        { textSize: "text-base", width: "100%" },
+        { textSize: "text-base", width: "98%" },
+        { textSize: "text-base", width: "95%" },
+        { textSize: "text-base", width: "92%" },
+        { textSize: "text-base", width: "88%" },
+        { textSize: "text-base", width: "85%" },
+        { textSize: "text-base", width: "60%" },
+    ],
+    "title-paragraph": [
+        { textSize: "text-2xl", width: "65%" },
+        { textSize: "text-base", width: "100%" },
+        { textSize: "text-base", width: "95%" },
+        { textSize: "text-base", width: "70%" },
+    ],
+    "heading-text": [
+        { textSize: "text-xl", width: "60%" },
+        { textSize: "text-base", width: "100%" },
+        { textSize: "text-base", width: "100%" },
+        { textSize: "text-base", width: "90%" },
+        { textSize: "text-base", width: "65%" },
+    ],
+    article: [
+        { textSize: "text-3xl", width: "70%" },
+        { textSize: "text-sm", width: "40%" },
+        { textSize: "text-base", width: "100%" },
+        { textSize: "text-base", width: "100%" },
+        { textSize: "text-base", width: "95%" },
+        { textSize: "text-base", width: "90%" },
+        { textSize: "text-base", width: "65%" },
+    ],
+};
+
+const cvaSkeletonContainer = cvaMerge(["flex", "flex-col"]);
+cvaMerge([
+    "relative",
+    "overflow-hidden",
+    "rounded-lg",
+    // Gradient background
+    "bg-gradient-to-r",
+    "from-gray-200/80",
+    "via-gray-300/60",
+    "to-gray-200/80",
+    // Pulse animation
+    "animate-pulse",
+    // Shimmer overlay
+    "before:absolute",
+    "before:inset-0",
+    "before:bg-gradient-to-r",
+    "before:from-transparent",
+    "before:via-white/50",
+    "before:to-transparent",
+    "before:opacity-0",
+    "before:animate-pulse",
+    // Smooth transitions for accessibility
+    "transition-all",
+    "duration-300",
+    "ease-in-out",
+]);
+
+/**
+ * Display multiple placeholder lines before data gets loaded to reduce load-time frustration.
+ *
+ * Supports three modes:
+ * - **Uniform mode** (default): Display identical lines using `count` prop
+ * - **Custom mode**: Display customized lines with per-line configuration using `variant="custom"` and `lines` prop
+ * - **Preset mode**: Display common patterns using `variant="preset"` and `preset` name
+ *
+ * Built on top of the [SkeletonLabel](?path=/docs/components-loading-states-skeletonlabel--docs) component for text-specific margins and sizing.
+ *
+ * @example
+ * // Uniform lines (simple mode)
+ * <SkeletonLines count={3} textSize="text-base" variant="uniform" />
+ * @example
+ * // Custom lines (advanced mode)
+ * <SkeletonLines
+ *   variant="custom"
+ *   lines={[
+ *     { textSize: "text-lg", width: "100%" },
+ *     { textSize: "text-base", width: "95%" },
+ *     { textSize: "text-base", width: "70%" }
+ *   ]}
+ * />
+ * @example
+ * // Preset lines (quick patterns)
+ * <SkeletonLines variant="preset" preset="title-paragraph" />
+ */
+const SkeletonLines = memo((props) => {
+    const { className, "data-testid": dataTestId } = props;
+    // Generate line configs based on variant
+    let lineConfigs;
+    if (props.variant === "preset") {
+        // TypeScript now knows props is PresetSkeletonLinesProps
+        lineConfigs = PRESET_CONFIGURATIONS[props.preset];
+    }
+    else if (props.variant === "custom") {
+        // TypeScript now knows props is CustomSkeletonLinesProps
+        lineConfigs = props.lines;
+    }
+    else {
+        // TypeScript now knows props is UniformSkeletonLinesProps
+        lineConfigs = Array.from({ length: props.count }, () => ({
+            textSize: props.textSize,
+            width: props.width,
+            flexibleWidth: props.flexibleWidth,
+            className: props.lineClassName,
+        }));
+    }
+    const lineCount = lineConfigs.length;
+    return (jsx("div", { "aria-label": `Loading ${lineCount} ${lineCount === 1 ? "item" : "items"}`, className: cvaSkeletonContainer({ className }), "data-testid": dataTestId, "data-variant": props.variant, role: "status", ...(props.variant === "preset" && { "data-preset": props.preset }), children: lineConfigs.map((config, index) => (jsx(SkeletonLabel, { className: config.className, "data-testid": dataTestId ? `${dataTestId}-${index}` : undefined, flexibleWidth: config.flexibleWidth ?? true, textSize: config.textSize ?? "text-base", width: config.width ?? "100%" }, index))) }));
+});
+SkeletonLines.displayName = "SkeletonLines";
+
 const LoadingContent = () => (jsx("div", { className: "flex flex-row items-center", "data-testid": "kpi-card-loading-content", children: jsx("div", { className: "w-full", children: jsx(SkeletonLines, { lines: [
                 { textSize: "text-xs", width: 50 },
                 { textSize: "text-lg", width: 40 },
@@ -6197,6 +6187,16 @@ const Polygon = ({ points, size, color = "black", opaque = true, className, "dat
 };
 const normalize = ({ value, min, max, size }) => ((value - min) / (max - min)) * size;
 
+/**
+ * The PopoverTitle component.
+ *
+ * @param {PopoverTitleProps} props - The props for the PopoverTitle component
+ * @returns {ReactElement} PopoverTitle component
+ */
+const PopoverTitle = ({ children, action, divider = false, className, "data-testid": dataTestId, }) => {
+    return (jsxs("div", { className: cvaPopoverTitleContainer({ divider, className }), "data-testid": dataTestId, children: [jsx(Text, { className: cvaPopoverTitleText(), size: "small", subtle: true, type: "div", uppercase: true, weight: "bold", children: children }), action] }));
+};
+
 const cvaPreferenceCard = cvaMerge([
     "rounded-lg",
     "border",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "1.14.33",
+  "version": "1.15.0",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -14,10 +14,10 @@
     "@floating-ui/react": "^0.26.25",
     "string-ts": "^2.0.0",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/ui-design-tokens": "1.10.27",
-    "@trackunit/css-class-variance-utilities": "1.10.26",
-    "@trackunit/shared-utils": "1.12.26",
-    "@trackunit/ui-icons": "1.10.26",
+    "@trackunit/ui-design-tokens": "1.11.0",
+    "@trackunit/css-class-variance-utilities": "1.11.0",
+    "@trackunit/shared-utils": "1.13.0",
+    "@trackunit/ui-icons": "1.11.0",
     "@tanstack/react-router": "1.114.29",
     "es-toolkit": "^1.39.10",
     "@tanstack/react-virtual": "3.13.12",

package/src/components/KPICard/KPICard.d.ts

@@ -3,8 +3,8 @@ import { IconName } from "@trackunit/ui-icons";
 import { ReactElement, ReactNode } from "react";
 import { IconColors } from "../Icon/Icon";
 import { KPIProps } from "../KPI/KPI";
-import { NoticeProps } from "../Notice";
-import { ValueBarProps } from "../ValueBar";
+import { NoticeProps } from "../Notice/Notice";
+import { ValueBarProps } from "../ValueBar/ValueBar";
 import { TrendIndicatorProps } from "./components/TrendIndicator/TrendIndicator";
 export interface KPICardProps extends MappedOmit<KPIProps, "variant"> {
     /**

package/src/components/Menu/MoreMenu/MoreMenu.d.ts

@@ -2,8 +2,9 @@ import { MakePropertyOptional, MappedOmit } from "@trackunit/shared-utils";
 import { ReactElement, ReactNode } from "react";
 import { CommonProps } from "../../../common/CommonProps";
 import { IconProps } from "../../Icon/Icon";
-import { PopoverContentChildren, PopoverProps } from "../../Popover";
-import { IconButtonProps } from "../../buttons";
+import { PopoverContentChildren } from "../../Popover/PopoverContent";
+import { PopoverProps } from "../../Popover/PopoverTypes";
+import { IconButtonProps } from "../../buttons/IconButton/IconButton";
 export type MenuPlacement = "above" | "below";
 type FilteredIconProps = MakePropertyOptional<MappedOmit<IconProps, "onClick">, "name">;
 type FilteredIconButtonProps = Omit<IconButtonProps, "icon" | "onClick">;

package/src/components/PageHeader/types.d.ts

@@ -1,9 +1,9 @@
 import { IconName } from "@trackunit/ui-icons";
 import { MouseEvent, ReactElement, ReactNode } from "react";
 import { CommonProps } from "../../common/CommonProps";
-import { ButtonVariant } from "../buttons";
+import { ButtonVariant } from "../buttons/shared/ButtonProps";
 import { TabListProps } from "../Tabs/TabList";
-import { TagColors } from "../Tag";
+import { TagColors } from "../Tag/Tag";
 export type PageHeaderKpiMetricsType = {
     header: string;
     value: string | number;

package/src/components/PreferenceCard/PreferenceCard.d.ts

@@ -3,7 +3,7 @@ import { MappedOmit } from "@trackunit/shared-utils";
 import { IconName } from "@trackunit/ui-icons";
 import { ReactElement, ReactNode } from "react";
 import { CommonProps } from "../../common/CommonProps";
-import { TagProps } from "../Tag";
+import { TagProps } from "../Tag/Tag";
 import { cvaPreferenceCard } from "./PreferenceCard.variants";
 /**
  * Grid layout configuration for the PreferenceCard content area.

package/src/components/Sidebar/Sidebar.d.ts

@@ -1,6 +1,7 @@
 import { ComponentProps, ReactElement } from "react";
 import { CommonProps } from "../../common/CommonProps";
-import { MenuList, MoreMenu } from "../Menu";
+import { MenuList } from "../Menu/MenuList/MenuList";
+import { MoreMenu } from "../Menu/MoreMenu/MoreMenu";
 export interface SidebarItemProps extends CommonProps {
     /**
      * The id prop is used to identify the sidebar item in the dom.

package/src/index.d.ts

@@ -5,16 +5,22 @@ export * from "./common/PackageNameStoryComponent";
 export * from "./common/Size";
 export * from "./common/StorybookProps";
 export * from "./common/Styleable";
-export * from "./components/Alert";
-export * from "./components/Badge";
+export * from "./components/Alert/Alert";
+export * from "./components/Badge/Badge";
 export * from "./components/Breadcrumb/Breadcrumb";
-export * from "./components/buttons";
+export * from "./components/buttons/Button/Button";
+export * from "./components/buttons/IconButton/IconButton";
 export * from "./components/buttons/shared/Button.variants";
-export * from "./components/Card";
+export * from "./components/buttons/shared/ButtonProps";
+export * from "./components/buttons/StarButton/StarButton";
+export * from "./components/Card/Card";
+export * from "./components/Card/CardBody";
+export * from "./components/Card/CardFooter";
+export * from "./components/Card/CardHeader";
 export * from "./components/Clickable/Clickable.variants";
-export * from "./components/Collapse";
+export * from "./components/Collapse/Collapse";
 export * from "./components/CompletionStatusIndicator/CompletionStatusIndicator";
-export * from "./components/CopyableText";
+export * from "./components/CopyableText/CopyableText";
 export * from "./components/DetailsList/DetailsList";
 export * from "./components/EmptyState/EmptyState";
 export * from "./components/EmptyState/EmptyState.variants";
@@ -24,11 +30,11 @@ export { createGrid } from "./components/GridAreas/createGrid";
 export { GridAreas, type GridAreasProps } from "./components/GridAreas/GridAreas";
 export type { GridAreasResult, GridConfig, SlotProps } from "./components/GridAreas/types";
 export { useGridAreas } from "./components/GridAreas/useGridAreas";
-export * from "./components/Heading";
+export * from "./components/Heading/Heading";
 export * from "./components/Highlight/Highlight";
 export * from "./components/HorizontalOverflowScroller/HorizontalOverflowScroller";
 export * from "./components/Icon/Icon";
-export * from "./components/Indicator";
+export * from "./components/Indicator/Indicator";
 export * from "./components/Indicator/Indicator.variants";
 export * from "./components/InteractableItem/InteractableItem.variants";
 export * from "./components/KPI/KPI";
@@ -42,38 +48,56 @@ export * from "./components/List/List.variants";
 export * from "./components/List/useList";
 export * from "./components/ListItem/ListItem";
 export * from "./components/ListItem/useListItemHeight";
-export * from "./components/Menu";
+export * from "./components/Menu/MenuDivider/MenuDivider";
+export * from "./components/Menu/MenuItem/MenuItem";
 export * from "./components/Menu/MenuItem/MenuItem.variants";
+export * from "./components/Menu/MenuList/MenuList";
 export * from "./components/Menu/MenuList/MenuList.variants";
-export * from "./components/Notice";
-export * from "./components/Page";
-export * from "./components/PageHeader";
+export * from "./components/Menu/MoreMenu/MoreMenu";
+export * from "./components/Notice/Notice";
+export * from "./components/Page/Page";
+export * from "./components/Page/PageContent";
+export * from "./components/PageHeader/components/PageHeaderKpiMetrics";
+export * from "./components/PageHeader/components/PageHeaderSecondaryActions";
+export * from "./components/PageHeader/components/PageHeaderTitle";
+export * from "./components/PageHeader/PageHeader";
+export * from "./components/PageHeader/PageHeader.variants";
+export * from "./components/PageHeader/types";
 export * from "./components/Pagination/Pagination";
 export * from "./components/Polygon/Polygon";
-export * from "./components/Popover";
 export * from "./components/Popover/Popover";
+export * from "./components/Popover/PopoverContent";
+export * from "./components/Popover/PopoverTitle";
+export * from "./components/Popover/PopoverTrigger";
+export * from "./components/Popover/PopoverTypes";
 export * from "./components/Portal/Portal";
 export * from "./components/PreferenceCard/PreferenceCard";
 export * from "./components/PreferenceCard/PreferenceCard.variants";
 export * from "./components/PreferenceCard/PreferenceCardSkeleton";
-export * from "./components/Prompt";
-export * from "./components/SectionHeader";
+export * from "./components/Prompt/Prompt";
+export * from "./components/SectionHeader/SectionHeader";
 export * from "./components/Sidebar/Sidebar";
 export * from "./components/Sidebar/useOverflowItems";
-export * from "./components/Skeleton";
-export * from "./components/SkeletonLines";
-export * from "./components/Spacer";
-export * from "./components/Spinner";
+export { SkeletonBlock } from "./components/Skeleton/SkeletonBlock";
+export type { SkeletonBlockProps } from "./components/Skeleton/SkeletonBlock";
+export { SkeletonLabel } from "./components/Skeleton/SkeletonLabel";
+export type { SkeletonLabelProps } from "./components/Skeleton/SkeletonLabel";
+export * from "./components/SkeletonLines/skeleton-utils";
+export * from "./components/SkeletonLines/SkeletonLines";
+export * from "./components/Spacer/Spacer";
+export * from "./components/Spinner/Spinner";
 export * from "./components/Tabs/Tab";
 export * from "./components/Tabs/TabContent";
 export * from "./components/Tabs/TabList";
 export * from "./components/Tabs/Tabs";
-export * from "./components/Tag";
-export * from "./components/Text";
+export * from "./components/Tag/Tag";
+export * from "./components/Text/Text";
 export * from "./components/ToggleGroup/ToggleGroup";
 export * from "./components/ToggleGroup/ToggleGroup.variants";
-export * from "./components/Tooltip";
-export * from "./components/ValueBar";
+export * from "./components/Tooltip/Tooltip";
+export * from "./components/ValueBar/ValueBar";
+export { getValueBarColorByValue } from "./components/ValueBar/ValueBarHelper";
+export * from "./components/ValueBar/ValueBarTypes";
 export * from "./components/ZStack/ZStack";
 export * from "./components/ZStack/ZStack.variants";
 export * from "./hooks/encoding/useCustomEncoding";

package/src/components/Alert/index.d.ts

@@ -1 +0,0 @@
-export * from "./Alert";

package/src/components/Badge/index.d.ts

@@ -1 +0,0 @@
-export * from "./Badge";

package/src/components/Card/index.d.ts

@@ -1,4 +0,0 @@
-export * from "./Card";
-export * from "./CardBody";
-export * from "./CardFooter";
-export * from "./CardHeader";

package/src/components/Collapse/index.d.ts

@@ -1 +0,0 @@
-export * from "./Collapse";

package/src/components/CopyableText/index.d.ts

@@ -1 +0,0 @@
-export * from "./CopyableText";

package/src/components/Heading/index.d.ts

@@ -1 +0,0 @@
-export * from "./Heading";

package/src/components/Indicator/index.d.ts

@@ -1 +0,0 @@
-export * from "./Indicator";

package/src/components/Menu/index.d.ts

@@ -1,5 +0,0 @@
-export * from "./MenuDivider/MenuDivider";
-export * from "./MenuItem/MenuItem";
-export * from "./MenuList/MenuList";
-export * from "./MenuList/MenuList.variants";
-export * from "./MoreMenu/MoreMenu";

package/src/components/Notice/index.d.ts

@@ -1 +0,0 @@
-export * from "./Notice";

package/src/components/Page/index.d.ts

@@ -1,2 +0,0 @@
-export * from "./Page";
-export * from "./PageContent";

package/src/components/PageHeader/components/index.d.ts

@@ -1,3 +0,0 @@
-export * from "./PageHeaderKpiMetrics";
-export * from "./PageHeaderSecondaryActions";
-export * from "./PageHeaderTitle";

package/src/components/PageHeader/index.d.ts

@@ -1,4 +0,0 @@
-export * from "./components";
-export * from "./PageHeader";
-export * from "./PageHeader.variants";
-export * from "./types";

package/src/components/Popover/index.d.ts

@@ -1,5 +0,0 @@
-export * from "./Popover";
-export * from "./PopoverContent";
-export * from "./PopoverTitle";
-export * from "./PopoverTrigger";
-export * from "./PopoverTypes";

package/src/components/Prompt/index.d.ts

@@ -1 +0,0 @@
-export * from "./Prompt";

package/src/components/SectionHeader/index.d.ts

@@ -1 +0,0 @@
-export * from "./SectionHeader";

package/src/components/Skeleton/index.d.ts

@@ -1,4 +0,0 @@
-export { SkeletonLabel } from "./SkeletonLabel";
-export type { SkeletonLabelProps } from "./SkeletonLabel";
-export { SkeletonBlock } from "./SkeletonBlock";
-export type { SkeletonBlockProps } from "./SkeletonBlock";

package/src/components/SkeletonLines/index.d.ts

@@ -1,2 +0,0 @@
-export * from "./skeleton-utils";
-export * from "./SkeletonLines";

package/src/components/Spacer/index.d.ts

@@ -1 +0,0 @@
-export * from "./Spacer";

package/src/components/Spinner/index.d.ts

@@ -1 +0,0 @@
-export * from "./Spinner";

package/src/components/Tag/index.d.ts

@@ -1 +0,0 @@
-export * from "./Tag";

package/src/components/Text/index.d.ts

@@ -1 +0,0 @@
-export * from "./Text";

package/src/components/Tooltip/index.d.ts

@@ -1 +0,0 @@
-export * from "./Tooltip";

package/src/components/ValueBar/index.d.ts

@@ -1,3 +0,0 @@
-export * from "./ValueBar";
-export { getValueBarColorByValue } from "./ValueBarHelper";
-export * from "./ValueBarTypes";

package/src/components/buttons/index.d.ts

@@ -1,4 +0,0 @@
-export * from "./Button/Button";
-export * from "./IconButton/IconButton";
-export * from "./StarButton/StarButton";
-export * from "./shared/ButtonProps";