@cfx-dev/ui-components 2.1.17 → 2.1.19

package/dist/assets/Skeleton.css

@@ -0,0 +1 @@
+._skeleton_49zbt_1{display:inline-block;background-color:rgba(var(--color-bg-light),1);border-radius:var(--border-radius-xsmall);animation:_shimmer_49zbt_1 1.5s infinite linear}@keyframes _shimmer_49zbt_1{0%{opacity:0}50%{opacity:100%}to{opacity:0}}

package/dist/assets/Table.css

@@ -1 +1 @@
-._tableIcon_1waor_1._iconButton_1waor_1{width:calc(var(--quant) * 6);height:calc(var(--quant) * 6);display:inline-flex;align-items:center;justify-content:center;color:rgba(var(--color-secondary),1)}._tableIcon_1waor_1._iconButton_1waor_1{transition:background-color .25s ease,color .25s ease,opacity .25s ease,outline-offset 0s,outline 0s}._tableIcon_1waor_1._iconButton_1waor_1:hover{color:rgba(var(--color-primary),1);background-color:var(--color-button-linked-hover-background)}._tableIcon_1waor_1._iconButton_1waor_1:not(:disabled):active{transform:none;opacity:.8}._root_1waor_21 table{width:100%;border-collapse:collapse;border-radius:var(--border-radius-small);overflow:hidden}._root_1waor_21 th,._root_1waor_21 td{text-align:left;padding:0 calc(var(--quant) * .75);color:#fff;height:calc(var(--quant) * 8.75);box-sizing:border-box}._root_1waor_21 td{padding:calc(var(--quant) * 1.5) calc(var(--quant) * .75)}._root_1waor_21 ._radio_1waor_37{padding:calc(var(--quant) * .25)}._root_1waor_21 ._radio_1waor_37 ._radioContent_1waor_40{width:100%;height:100%;display:flex;align-items:center;justify-content:center}._root_1waor_21 ._pointer_1waor_47{cursor:pointer}._root_1waor_21 ._selectedRow_1waor_50{background-color:rgba(var(--color-secondary),.4);box-shadow:0 -1px rgba(var(--color-primary),1) inset}._root_1waor_21 th{position:sticky;top:0;z-index:0;background-color:rgba(var(--color-bg-light),1)}._root_1waor_21 th ._headerContent_1waor_60{display:flex;align-items:center;flex-direction:row}._root_1waor_21 th ._headerContent_1waor_60 ._iconButton_1waor_1{margin-left:var(--offset-medium)}._root_1waor_21 tr{box-shadow:0 -1px rgba(var(--color-bg-light),1) inset;box-sizing:border-box}._root_1waor_21 tr:hover{background-color:rgba(var(--color-secondary),.2)}._root_1waor_21 tr:hover:not(._selectedRow_1waor_50){box-shadow:none}
+._tableIcon_xresd_1._iconButton_xresd_1{width:calc(var(--quant) * 6);height:calc(var(--quant) * 6);display:inline-flex;align-items:center;justify-content:center;color:rgba(var(--color-secondary),1)}._tableIcon_xresd_1._iconButton_xresd_1{transition:background-color .25s ease,color .25s ease,opacity .25s ease,outline-offset 0s,outline 0s}._tableIcon_xresd_1._iconButton_xresd_1:hover{color:rgba(var(--color-primary),1);background-color:var(--color-button-linked-hover-background)}._tableIcon_xresd_1._iconButton_xresd_1:not(:disabled):active{transform:none;opacity:.8}._root_xresd_21 table{width:100%;border-collapse:collapse;border-top-left-radius:var(--border-radius-small);border-top-right-radius:var(--border-radius-small);overflow:hidden}._root_xresd_21 th,._root_xresd_21 td{text-align:left;padding:0 calc(var(--quant) * .75);color:#fff;height:calc(var(--quant) * 8.75);box-sizing:border-box}._root_xresd_21 td{padding:calc(var(--quant) * 1.5) calc(var(--quant) * .75)}._root_xresd_21 ._radio_xresd_38{padding:calc(var(--quant) * .25)}._root_xresd_21 ._radio_xresd_38 ._radioContent_xresd_41{width:100%;height:100%;display:flex;align-items:center;justify-content:center}._root_xresd_21 ._pointer_xresd_48{cursor:pointer}._root_xresd_21 ._selectedRow_xresd_51{background-color:rgba(var(--color-secondary),.4);box-shadow:0 -1px rgba(var(--color-primary),1) inset}._root_xresd_21 th{position:sticky;top:0;z-index:0;background-color:rgba(var(--color-bg-light),1)}._root_xresd_21 th ._headerContent_xresd_61{display:flex;align-items:center;flex-direction:row}._root_xresd_21 th ._headerContent_xresd_61 ._iconButton_xresd_1{margin-left:var(--offset-medium)}._root_xresd_21 tr{box-shadow:0 -1px rgba(var(--color-bg-light),1) inset;box-sizing:border-box}._root_xresd_21 tr:hover{background-color:rgba(var(--color-secondary),.2)}._root_xresd_21 tr:hover:not(._selectedRow_xresd_51){box-shadow:none}._hidden_xresd_80{visibility:hidden}

package/dist/components/IconButton/IconButton.d.ts

@@ -8,7 +8,7 @@ export interface IconButtonProps extends TextColorProps {
     name: IconName;
     size?: IconSize;
     areaSize?: IconButtonAreaSize;
-    onClick?: () => void;
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
     className?: string;
     disabled?: boolean;
     ariaLabel?: string;

package/dist/components/Skeleton/Skeleton.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+import { TextSize } from '../Text';
+
+interface SkeletonProps {
+    width?: string;
+    height?: TextSize | string;
+    borderRadius?: string;
+}
+declare function Skeleton({ width, height, borderRadius, }: SkeletonProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof Skeleton>;
+export default _default;

package/dist/components/Skeleton/Skeleton.js

@@ -0,0 +1,29 @@
+import { jsx as m } from "react/jsx-runtime";
+import n from "react";
+import { TextSizeEnum as l } from "../Text/Text.types.js";
+import '../../assets/Skeleton.css';const r = "_skeleton_49zbt_1", i = "_shimmer_49zbt_1", f = {
+  skeleton: r,
+  shimmer: i
+};
+function _({
+  width: o = "100%",
+  height: e = "20px",
+  borderRadius: s = "4px"
+}) {
+  let t = e;
+  return e in l && (t = `var(--font-size-${e})`), /* @__PURE__ */ m(
+    "div",
+    {
+      className: f.skeleton,
+      style: {
+        width: o,
+        height: t,
+        borderRadius: s
+      }
+    }
+  );
+}
+const p = n.memo(_);
+export {
+  p as default
+};

package/dist/components/Skeleton/SkeletonShowcase.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+
+declare function SkeletonShowcase(): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof SkeletonShowcase>;
+export default _default;

package/dist/components/Skeleton/SkeletonShowcase.js

@@ -0,0 +1,54 @@
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import u, { useState as n, useEffect as f } from "react";
+import { Badge as t } from "../Badge/Badge.js";
+import { Button as x } from "../Button/Button.js";
+import "../Button/LinkButton.js";
+import { Flex as d } from "../Layout/Flex/Flex.js";
+import { Text as r } from "../Text/Text.js";
+import c from "./Skeleton.js";
+import { Table as p } from "../Table/Table.js";
+const g = [
+  { text: "Header 1" },
+  { text: "Header 2" },
+  { text: "Header 3" },
+  { text: "Date" },
+  { text: "Item" }
+];
+function S() {
+  const [l, a] = n(!0), [m, s] = n([]), o = () => {
+    a(!0);
+    const h = setTimeout(() => {
+      s([
+        ["Cell 1", "Cell 2", "Cell 3", new Date(2023, 0, 1).toLocaleDateString(), /* @__PURE__ */ e(t, { children: "Error" }, "1")],
+        ["Cell 4", "Cell 5", "Cell 6", new Date(2023, 1, 1).toLocaleDateString(), /* @__PURE__ */ e(t, { children: "Badge" }, "2")],
+        ["Cell 7", "Cell 8", "Cell 9", new Date(2023, 2, 1).toLocaleDateString(), /* @__PURE__ */ e(t, { children: "Badge" }, "3")]
+      ]), a(!1);
+    }, 5e3);
+    return () => clearTimeout(h);
+  };
+  return f(() => {
+    o();
+  }, []), /* @__PURE__ */ i(d, { gap: "large", vertical: !0, children: [
+    /* @__PURE__ */ e(r, { children: "Skeleton within Table" }),
+    /* @__PURE__ */ e(d, { gap: "normal", vertical: !0, children: /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
+      p,
+      {
+        loading: l,
+        includeRadio: !0,
+        headers: g,
+        data: l ? Array(3).fill(Array(5).fill(/* @__PURE__ */ e(c, { width: "100%", height: "normal", borderRadius: "4px" }))) : m
+      }
+    ) }) }),
+    /* @__PURE__ */ e(r, { children: "Skeleton in Text" }),
+    /* @__PURE__ */ i(r, { children: [
+      "This is a ",
+      /* @__PURE__ */ e(c, { width: "200px", height: "normal" }),
+      " in Text"
+    ] }),
+    /* @__PURE__ */ e(x, { theme: "secondary", onClick: o, text: "Restart Timer" })
+  ] });
+}
+const R = u.memo(S);
+export {
+  R as default
+};

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

@@ -0,0 +1 @@
+export { default as Skeleton } from './Skeleton';

package/dist/components/Skeleton/index.js

@@ -0,0 +1,4 @@
+import { default as t } from "./Skeleton.js";
+export {
+  t as Skeleton
+};

package/dist/components/Table/Table.d.ts

@@ -20,6 +20,7 @@ export interface TableProps {
     headers: TableHeaderType[];
     data: TableRowType[];
     includeRadio?: boolean;
+    loading?: boolean;
     onSelectChange?: (rowIndex: number | null) => void;
     dataContainer?: DataContainerType;
     selectedRow?: number | null;
@@ -27,5 +28,5 @@ export interface TableProps {
     sortOrder?: 'asc' | 'desc';
     onSortChange?: (sortBy: string, sortOrder: 'asc' | 'desc') => void;
 }
-export declare function Table({ headers, data, includeRadio, onSelectChange, dataContainer, selectedRow: outerSelectedRow, sortBy: outerSortBy, sortOrder: outerSortOrder, onSortChange, }: TableProps): import("react/jsx-runtime").JSX.Element;
+export declare function Table({ headers, data, includeRadio, loading, onSelectChange, dataContainer, selectedRow: outerSelectedRow, sortBy: outerSortBy, sortOrder: outerSortOrder, onSortChange, }: TableProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Table/Table.js

@@ -1,151 +1,155 @@
 import { jsx as t, jsxs as C } from "react/jsx-runtime";
-import a, { useState as p } from "react";
-import y from "../Checkbox/Checkbox.js";
-import I from "../IconButton/IconButton.js";
-import { Text as T } from "../Text/Text.js";
-import { clsx as k } from "../../utils/clsx.js";
-import '../../assets/Table.css';const $ = "_tableIcon_1waor_1", j = "_iconButton_1waor_1", z = "_root_1waor_21", A = "_radio_1waor_37", E = "_radioContent_1waor_40", O = "_pointer_1waor_47", S = "_selectedRow_1waor_50", F = "_headerContent_1waor_60", c = {
-  tableIcon: $,
-  iconButton: j,
-  root: z,
-  radio: A,
-  radioContent: E,
-  pointer: O,
-  selectedRow: S,
-  headerContent: F
+import c, { useState as w } from "react";
+import I from "../Checkbox/Checkbox.js";
+import T from "../IconButton/IconButton.js";
+import { Text as $ } from "../Text/Text.js";
+import { clsx as p } from "../../utils/clsx.js";
+import '../../assets/Table.css';const j = "_tableIcon_xresd_1", z = "_iconButton_xresd_1", A = "_root_xresd_21", E = "_radio_xresd_38", O = "_radioContent_xresd_41", S = "_pointer_xresd_48", F = "_selectedRow_xresd_51", H = "_headerContent_xresd_61", V = "_hidden_xresd_80", n = {
+  tableIcon: j,
+  iconButton: z,
+  root: A,
+  radio: E,
+  radioContent: O,
+  pointer: S,
+  selectedRow: F,
+  headerContent: H,
+  hidden: V
 };
-function H(r) {
+function q(r) {
   const {
     className: e,
     color: o = "inherit"
-  } = r, n = k(c.tableIcon, c.iconButton, e);
-  return /* @__PURE__ */ t(I, { ...r, className: n, color: o });
+  } = r, i = p(n.tableIcon, n.iconButton, e);
+  return /* @__PURE__ */ t(T, { ...r, className: i, color: o });
 }
-function V(r) {
+function D(r) {
   const {
     item: e,
     onSortClick: o
-  } = r, n = a.useCallback(() => {
+  } = r, i = c.useCallback(() => {
     o && o(e.sortKey || e.text);
-  }, [e.sortKey, e.text, o]), b = k(c.headerContent, {
-    [c.sortable]: e.sortable,
-    [c.empty]: !e.text
+  }, [e.sortKey, e.text, o]), l = p(n.headerContent, {
+    [n.sortable]: e.sortable,
+    [n.empty]: !e.text
   });
   return /* @__PURE__ */ t(
     "th",
     {
-      className: e.sortable ? c.pointer : void 0,
-      onClick: e.sortable ? n : void 0,
-      children: /* @__PURE__ */ C("div", { className: b, children: [
-        /* @__PURE__ */ t(T, { color: "secondary", weight: "bold", uppercase: !0, size: "xxsmall", children: e.text }),
+      className: e.sortable ? n.pointer : void 0,
+      onClick: e.sortable ? i : void 0,
+      children: /* @__PURE__ */ C("div", { className: l, children: [
+        /* @__PURE__ */ t($, { color: "secondary", weight: "bold", uppercase: !0, size: "xxsmall", children: e.text }),
         !!e.sortable && /* @__PURE__ */ t(
-          H,
+          q,
           {
             name: "Sort",
-            onClick: n
+            onClick: i
           }
         )
       ] })
     }
   );
 }
-function q(r) {
+function G(r) {
   const {
     index: e,
     includeRadio: o = !1,
-    selectedRow: n,
-    item: b,
-    dataContainer: h,
-    onSelectChange: i
-  } = r, u = a.useCallback((l) => {
-    i(
-      l ? e : null
+    loading: i,
+    selectedRow: l,
+    item: k,
+    dataContainer: _,
+    onSelectChange: d
+  } = r, u = c.useCallback((a) => {
+    d(
+      a ? e : null
     );
-  }, [i, e]), _ = a.useCallback(() => {
-    i(e);
-  }, [i, e]), f = k({
-    [c.selectedRow]: n === e,
-    [c.pointer]: o
+  }, [d, e]), b = c.useCallback(() => {
+    d(e);
+  }, [d, e]), f = p({
+    [n.selectedRow]: l === e,
+    [n.pointer]: o
   });
   return /* @__PURE__ */ C(
     "tr",
     {
       className: f,
-      onClick: o ? _ : void 0,
+      onClick: o ? b : void 0,
       children: [
-        o && /* @__PURE__ */ t("td", { className: c.radio, children: /* @__PURE__ */ t("div", { className: c.radioContent, children: /* @__PURE__ */ t(
-          y,
+        o && /* @__PURE__ */ t("td", { className: p(n.radio, { [n.hidden]: i }), children: /* @__PURE__ */ t("div", { className: n.radioContent, children: /* @__PURE__ */ t(
+          I,
           {
             size: "small",
             onCheckedChange: u,
             "aria-label": `${e}`,
-            checked: n === e
+            checked: l === e
           }
         ) }) }),
-        b.map((l, w) => {
-          let m;
-          return a.isValidElement(l) ? m = l : h ? m = a.createElement(h, { item: l }) : m = String(l), /* @__PURE__ */ t("td", { children: m }, `item-${w}`);
+        k.map((a, x) => {
+          let h;
+          return c.isValidElement(a) ? h = a : _ ? h = c.createElement(_, { item: a }) : h = String(a), /* @__PURE__ */ t("td", { children: h }, `item-${x}`);
         })
       ]
     },
     `row-${e}`
   );
 }
-function P({
+function U({
   headers: r = [],
   data: e = [],
   includeRadio: o = !1,
-  onSelectChange: n,
-  dataContainer: b,
-  selectedRow: h = null,
-  sortBy: i,
+  loading: i = !1,
+  onSelectChange: l,
+  dataContainer: k,
+  selectedRow: _ = null,
+  sortBy: d,
   sortOrder: u = "asc",
-  onSortChange: _
+  onSortChange: b
 }) {
-  const [f, l] = p(h), [w, m] = p(i), [x, N] = p(u), B = a.useCallback((s) => {
-    const R = w === s && x === "asc" ? "desc" : "asc";
-    m(s), N(R), _ == null || _(s, R);
-  }, [_, w, x]), v = a.useCallback(
+  const [f, a] = w(_), [x, h] = w(d), [N, R] = w(u), v = c.useCallback((s) => {
+    const B = x === s && N === "asc" ? "desc" : "asc";
+    h(s), R(B), b == null || b(s, B);
+  }, [b, x, N]), y = c.useCallback(
     (s) => {
-      const d = s === f ? null : s;
-      l(d), n == null || n(d);
+      const m = s === f ? null : s;
+      a(m), l == null || l(m);
     },
-    [n, f]
+    [l, f]
   );
-  return a.useEffect(() => {
-    l(h);
-  }, [h]), a.useEffect(() => {
-    m(i);
-  }, [i]), a.useEffect(() => {
-    N(u);
-  }, [u]), /* @__PURE__ */ t("div", { className: c.root, children: /* @__PURE__ */ C("table", { children: [
+  return c.useEffect(() => {
+    a(_);
+  }, [_]), c.useEffect(() => {
+    h(d);
+  }, [d]), c.useEffect(() => {
+    R(u);
+  }, [u]), /* @__PURE__ */ t("div", { className: n.root, children: /* @__PURE__ */ C("table", { children: [
     /* @__PURE__ */ t("thead", { children: /* @__PURE__ */ C("tr", { children: [
       o && /* @__PURE__ */ t("th", { "aria-label": "Select Row" }),
-      r.map((s, d) => /* @__PURE__ */ t(
-        V,
+      r.map((s, m) => /* @__PURE__ */ t(
+        D,
         {
           item: s,
-          onSortClick: B
+          onSortClick: v
         },
-        `header-${d}`
+        `header-${m}`
       ))
     ] }) }),
-    /* @__PURE__ */ t("tbody", { children: e.map((s, d) => /* @__PURE__ */ t(
-      q,
+    /* @__PURE__ */ t("tbody", { children: e.map((s, m) => /* @__PURE__ */ t(
+      G,
       {
-        index: d,
+        index: m,
         item: s,
         includeRadio: o,
+        loading: i,
         selectedRow: f,
-        onSelectChange: v,
-        dataContainer: b
+        onSelectChange: y,
+        dataContainer: k
       },
-      `row-${d}`
+      `row-${m}`
     )) })
   ] }) });
 }
 export {
-  P as Table,
-  V as TableHeaderItem,
-  H as TableIconButton
+  U as Table,
+  D as TableHeaderItem,
+  q as TableIconButton
 };

package/dist/components/Text/Text.types.d.ts

@@ -1,6 +1,17 @@
 import { GetColorProps } from '../../utils/color';
 
-export type TextSize = 'xxsmall' | 'xsmall' | 'small' | 'normal' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | 'xxxlarge';
+export declare enum TextSizeEnum {
+    xxsmall = "xxsmall",
+    xsmall = "xsmall",
+    small = "small",
+    normal = "normal",
+    medium = "medium",
+    large = "large",
+    xlarge = "xlarge",
+    xxlarge = "xxlarge",
+    xxxlarge = "xxxlarge"
+}
+export type TextSize = keyof typeof TextSizeEnum;
 export type TextWeight = 'thin' | 'normal' | 'bold' | 'bolder';
 export type TextOpacity = '0' | '25' | '50' | '75' | '100';
 export type TextAs = 'span' | 'div' | 'p' | 'label' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';

package/dist/components/Text/Text.types.js

@@ -1 +1,4 @@
-
+var a = /* @__PURE__ */ ((l) => (l.xxsmall = "xxsmall", l.xsmall = "xsmall", l.small = "small", l.normal = "normal", l.medium = "medium", l.large = "large", l.xlarge = "xlarge", l.xxlarge = "xxlarge", l.xxxlarge = "xxxlarge", l))(a || {});
+export {
+  a as TextSizeEnum
+};

package/dist/main.d.ts

@@ -65,6 +65,7 @@ export { Text, TextBlock, getTextOpacity, } from './components/Text';
 export { Textarea } from './components/Textarea/Textarea';
 export { Title, TITLE_OUTLET_ID } from './components/Title/Title';
 export { InputDropzone } from './components/InputDropzone';
+export { Skeleton } from './components/Skeleton';
 export type { ButtonProps, ButtonTheme } from './components/Button/Button';
 export type { TitleProps, FixedOn } from './components/Title/Title';
 export type { IconButtonProps } from './components/IconButton';

package/dist/main.js

@@ -8,8 +8,8 @@ import { useGlobalKeyboardEvent as d } from "./utils/hooks/useGlobalKeyboardEven
 import { useKeyboardClose as T } from "./utils/hooks/useKeyboardClose.js";
 import { useWindowResize as B } from "./utils/hooks/useWindowResize.js";
 import { useOutlet as C } from "./utils/hooks/useOutlet.js";
-import { CLIPBOARD_TITLE_APPEARANCE as R, useClipboardComponent as S } from "./utils/hooks/useClipboardComponent.js";
-import { identity as A, invoke as k, noop as O, returnFalse as P, returnTrue as E } from "./utils/functional.js";
+import { CLIPBOARD_TITLE_APPEARANCE as y, useClipboardComponent as R } from "./utils/hooks/useClipboardComponent.js";
+import { identity as k, invoke as A, noop as O, returnFalse as P, returnTrue as E } from "./utils/functional.js";
 import { Linkify as _, defaultLinkReplacer as h, defaultLinkReplacerx as v, isExternalUrl as F, linkify as U, linkifyx as z, matchLinkNodes as K, matchLinks as N } from "./utils/links.js";
 import { clamp as w, clamp01 as G } from "./utils/math.js";
 import { isFalseString as H, isTrueString as M, normalizeSlashes as W, replaceRange as j, splitByIndices as q, unicodeCharAt as J } from "./utils/string.js";
@@ -23,8 +23,8 @@ import { Button as co } from "./components/Button/Button.js";
 import { LinkButton as To } from "./components/Button/LinkButton.js";
 import { ButtonBar as Bo } from "./components/Button/ButtonBar.js";
 import { Avatar as Co } from "./components/Avatar/Avatar.js";
-import { BACKDROP_OUTLET_ID as Ro, BackdropPortal as So } from "./components/BackdropPortal/BackdropPortal.js";
-import { Badge as Ao } from "./components/Badge/Badge.js";
+import { BACKDROP_OUTLET_ID as yo, BackdropPortal as Ro } from "./components/BackdropPortal/BackdropPortal.js";
+import { Badge as ko } from "./components/Badge/Badge.js";
 import { ControlBox as Oo } from "./components/ControlBox/ControlBox.js";
 import { CountryFlag as Eo } from "./components/CountryFlag/CountryFlag.js";
 import { Decorate as _o } from "./components/Decorate/Decorate.js";
@@ -49,9 +49,9 @@ import { Pad as dr } from "./components/Layout/Pad/Pad.js";
 import { Page as Tr } from "./components/Layout/Page/Page.js";
 import { R as Br } from "./Rail-nVRissv6.js";
 import { Scrollable as Cr } from "./components/Layout/Scrollable/Scrollable.js";
-import { VirtualScrollable as Rr } from "./components/Layout/Scrollable/VirtualScrollable.js";
+import { VirtualScrollable as yr } from "./components/Layout/Scrollable/VirtualScrollable.js";
 import { Loaf as br } from "./components/Loaf/Loaf.js";
-import { Modal as kr } from "./components/Modal/Modal.js";
+import { Modal as Ar } from "./components/Modal/Modal.js";
 import { NavList as Pr } from "./components/NavList/NavList.js";
 import { OVERLAY_OUTLET_ID as Dr, Overlay as _r } from "./components/Overlay/Overlay.js";
 import { Popover as vr } from "./components/Popover/Popover.js";
@@ -72,9 +72,10 @@ import { Textarea as se } from "./components/Textarea/Textarea.js";
 import { TITLE_OUTLET_ID as ce, Title as de } from "./components/Title/Title.js";
 import { default as Te } from "./components/InputDropzone/InputDropzone.js";
 import "./components/InputDropzone/ItemPreview.js";
-import { OnScreenSensor as Be } from "./components/OnScreenSensor.js";
-import { ui as Ce } from "./components/ui.js";
-import { Symbols as Re } from "./components/Symbols.js";
+import { default as Be } from "./components/Skeleton/Skeleton.js";
+import { OnScreenSensor as Ce } from "./components/OnScreenSensor.js";
+import { ui as ye } from "./components/ui.js";
+import { Symbols as be } from "./components/Symbols.js";
 export {
   po as Accordion,
   fo as AccordionContent,
@@ -82,13 +83,13 @@ export {
   mo as AccordionItem,
   ao as AccordionTrigger,
   Co as Avatar,
-  Ro as BACKDROP_OUTLET_ID,
-  So as BackdropPortal,
-  Ao as Badge,
+  yo as BACKDROP_OUTLET_ID,
+  Ro as BackdropPortal,
+  ko as Badge,
   mr as Box,
   co as Button,
   Bo as ButtonBar,
-  R as CLIPBOARD_TITLE_APPEARANCE,
+  y as CLIPBOARD_TITLE_APPEARANCE,
   lr as Center,
   so as Checkbox,
   no as ClipboardButton,
@@ -115,10 +116,10 @@ export {
   _ as Linkify,
   br as Loaf,
   No as Logos,
-  kr as Modal,
+  Ar as Modal,
   Pr as NavList,
   Dr as OVERLAY_OUTLET_ID,
-  Be as OnScreenSensor,
+  Ce as OnScreenSensor,
   _r as Overlay,
   dr as Pad,
   Tr as Page,
@@ -132,10 +133,11 @@ export {
   Gr as Select,
   Hr as Separator,
   Wr as Shroud,
+  Be as Skeleton,
   qr as Spacer,
   Qr as Style,
   $r as Switch,
-  Re as Symbols,
+  be as Symbols,
   ce as TITLE_OUTLET_ID,
   fe as Table,
   xe as TableIconButton,
@@ -145,7 +147,7 @@ export {
   se as Textarea,
   de as Title,
   re as ToggleGroup,
-  Rr as VirtualScrollable,
+  yr as VirtualScrollable,
   w as clamp,
   G as clamp01,
   f as clsx,
@@ -155,8 +157,8 @@ export {
   oo as getColor,
   ne as getTextOpacity,
   m as getValue,
-  A as identity,
-  k as invoke,
+  k as identity,
+  A as invoke,
   F as isExternalUrl,
   H as isFalseString,
   M as isTrueString,
@@ -172,9 +174,9 @@ export {
   E as returnTrue,
   q as splitByIndices,
   Z as throttle,
-  Ce as ui,
+  ye as ui,
   J as unicodeCharAt,
-  S as useClipboardComponent,
+  R as useClipboardComponent,
   Xr as useContextualStyle,
   u as useDynamicRef,
   d as useGlobalKeyboardEvent,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cfx-dev/ui-components",
   "private": false,
-  "version": "2.1.17",
+  "version": "2.1.19",
   "type": "module",
   "license": "MIT",
   "main": "dist/main.js",