@trilogy-ds/react 0.0.20-esm-cjs → 0.0.23-esm-cjs

package/lib/index.js

@@ -153,6 +153,7 @@ __export(index_exports, {
   Select: () => Select_default,
   SelectOption: () => option_default,
   SelectStatus: () => SelectStatus,
+  Skeleton: () => Skeleton_default,
   Spacer: () => Spacer_default,
   SpacerSize: () => SpacerSize,
   SpacerSizeValues: () => SpacerSizeValues,
@@ -3212,7 +3213,15 @@ var SelectStatus = /* @__PURE__ */ ((SelectStatus2) => {
 })(SelectStatus || {});
 
 // components/calendar/Calendar.tsx
-var days = [...import_locales3.calendarLocale.days];
+var days = [
+  import_locales3.calendarLocale.days[1],
+  import_locales3.calendarLocale.days[2],
+  import_locales3.calendarLocale.days[3],
+  import_locales3.calendarLocale.days[4],
+  import_locales3.calendarLocale.days[5],
+  import_locales3.calendarLocale.days[6],
+  import_locales3.calendarLocale.days[0]
+];
 var months = [...import_locales3.calendarLocale.months];
 var currentDate = /* @__PURE__ */ new Date();
 function checkIsRange(date) {
@@ -3272,7 +3281,7 @@ var Calendar = import_react16.default.forwardRef(
     const getAllDaysInMonth = import_react16.default.useCallback((year, month) => {
       const date = new Date(year, month, 1);
       const days2 = [];
-      const firstDayOfMonth = date.getDay();
+      const firstDayOfMonth = (date.getDay() + 6) % 7;
       const lastDayOfMonth = new Date(year, month + 1, 0).getDate();
       const allDays = [];
       for (let i = 0; i < firstDayOfMonth; i++) days2.push(null);
@@ -3441,9 +3450,13 @@ var Calendar = import_react16.default.forwardRef(
       }
     }, [refsDays.current, refDayFocused.current]);
     import_react16.default.useEffect(() => {
+      const prevActiveDate = activeDate;
       setActiveDate(value);
       if (value instanceof Date) return setVisibleMonth(value);
-      if (!(value instanceof Date) && value[0]) return setVisibleMonth(value[0]);
+      if (!(value instanceof Date) && value[0]) {
+        const isNewRangeSelection = !prevActiveDate || Array.isArray(prevActiveDate) && prevActiveDate.length === 0 || Array.isArray(prevActiveDate) && Array.isArray(value) && prevActiveDate.length === 2 && value.length === 1;
+        if (isNewRangeSelection) return setVisibleMonth(value[0]);
+      }
     }, [value]);
     return /* @__PURE__ */ import_react16.default.createElement(
       "table",
@@ -6245,10 +6258,17 @@ var SegmentControl = import_react44.default.forwardRef(({ className, id, onClick
 SegmentControl.displayName = "SegmentControl" /* SegmentControl */;
 var SegmentControl_default = SegmentControl;
 
+// components/skeleton/Skeleton.tsx
+var import_react45 = __toESM(require("react"));
+var Skeleton = () => {
+  return /* @__PURE__ */ import_react45.default.createElement("div", null);
+};
+var Skeleton_default = Skeleton;
+
 // components/spacer/Spacer.tsx
 var import_clsx77 = __toESM(require("clsx"));
-var React86 = __toESM(require("react"));
-var Spacer = React86.forwardRef(({ size: size2, horizontal, className, id }, ref) => {
+var React87 = __toESM(require("react"));
+var Spacer = React87.forwardRef(({ size: size2, horizontal, className, id }, ref) => {
   const { styled } = useTrilogyContext();
   const styles = {
     spacer: {
@@ -6257,24 +6277,24 @@ var Spacer = React86.forwardRef(({ size: size2, horizontal, className, id }, ref
     }
   };
   const classes = hashClass(styled, (0, import_clsx77.default)(className));
-  return /* @__PURE__ */ React86.createElement("div", { ref, id, style: styles.spacer, className: classes });
+  return /* @__PURE__ */ React87.createElement("div", { ref, id, style: styles.spacer, className: classes });
 });
 Spacer.displayName = "Spacer" /* Spacer */;
 var Spacer_default = Spacer;
 
 // components/stepper/Stepper.tsx
 var import_clsx78 = __toESM(require("clsx"));
-var React87 = __toESM(require("react"));
-var Stepper = React87.forwardRef(({ className, id, children, ...others }, ref) => {
+var React88 = __toESM(require("react"));
+var Stepper = React88.forwardRef(({ className, id, children, ...others }, ref) => {
   const { styled } = useTrilogyContext();
   const classes = hashClass(styled, (0, import_clsx78.default)("stepper-wrapper", className));
-  const [currentStep, setCurrentStep] = React87.useState(1);
-  const nbChild = React87.useMemo(() => {
+  const [currentStep, setCurrentStep] = React88.useState(1);
+  const nbChild = React88.useMemo(() => {
     if (children && Array.isArray(children)) return children.length;
     if (children && !Array.isArray(children)) return 1;
     return 0;
   }, [children]);
-  React87.useEffect(() => {
+  React88.useEffect(() => {
     if (children) {
       if (Array.isArray(children)) {
         let haveCurrentStep = false;
@@ -6291,15 +6311,15 @@ var Stepper = React87.forwardRef(({ className, id, children, ...others }, ref) =
       }
     }
   }, [children]);
-  return /* @__PURE__ */ React87.createElement("div", { ref, id, className: classes, ...others }, children, /* @__PURE__ */ React87.createElement("div", { className: "step-count" }, /* @__PURE__ */ React87.createElement(Text_default, null, currentStep, "/", nbChild)));
+  return /* @__PURE__ */ React88.createElement("div", { ref, id, className: classes, ...others }, children, /* @__PURE__ */ React88.createElement("div", { className: "step-count" }, /* @__PURE__ */ React88.createElement(Text_default, null, currentStep, "/", nbChild)));
 });
 Stepper.displayName = "Stepper" /* Stepper */;
 var Stepper_default = Stepper;
 
 // components/stepper/step/Step.tsx
 var import_clsx79 = __toESM(require("clsx"));
-var import_react45 = __toESM(require("react"));
-var Step = import_react45.default.forwardRef(({ className, id, active, current, done, label, iconName, error, ...others }, ref) => {
+var import_react46 = __toESM(require("react"));
+var Step = import_react46.default.forwardRef(({ className, id, active, current, done, label, iconName, error, ...others }, ref) => {
   const { styled } = useTrilogyContext();
   const classesStepLabel = hashClass(styled, (0, import_clsx79.default)("step-label"));
   const classes = hashClass(
@@ -6313,7 +6333,7 @@ var Step = import_react45.default.forwardRef(({ className, id, active, current,
       className
     )
   );
-  return /* @__PURE__ */ import_react45.default.createElement("div", { ref, id, className: classes, "data-label": label, ...others }, /* @__PURE__ */ import_react45.default.createElement("div", { className: classesStepLabel }, label, !done && iconName && /* @__PURE__ */ import_react45.default.createElement(Icon_default, { name: iconName && iconName, className: "step-icon", size: "medium" /* MEDIUM */ })));
+  return /* @__PURE__ */ import_react46.default.createElement("div", { ref, id, className: classes, "data-label": label, ...others }, /* @__PURE__ */ import_react46.default.createElement("div", { className: classesStepLabel }, label, !done && iconName && /* @__PURE__ */ import_react46.default.createElement(Icon_default, { name: iconName && iconName, className: "step-icon", size: "medium" /* MEDIUM */ })));
 });
 Step.displayName = "Step" /* Step */;
 var Step_default = Step;
@@ -6332,10 +6352,10 @@ var step_default = Step_default;
 
 // components/switch/Switch.tsx
 var import_clsx80 = __toESM(require("clsx"));
-var import_react46 = __toESM(require("react"));
-var Switch = import_react46.default.forwardRef(({
+var import_react47 = __toESM(require("react"));
+var Switch = import_react47.default.forwardRef(({
   className,
-  id = import_react46.default.useId(),
+  id = import_react47.default.useId(),
   label,
   value,
   checked,
@@ -6349,23 +6369,23 @@ var Switch = import_react46.default.forwardRef(({
   fullWidth,
   ...others
 }, ref) => {
-  const [_checked, setChecked] = (0, import_react46.useState)(checked || false);
+  const [_checked, setChecked] = (0, import_react47.useState)(checked || false);
   const { styled } = useTrilogyContext();
-  import_react46.default.useEffect(() => {
+  import_react47.default.useEffect(() => {
     setChecked(checked || false);
   }, [checked]);
-  (0, import_react46.useEffect)(() => {
+  (0, import_react47.useEffect)(() => {
     if (!readonly) {
       setChecked(checked || false);
     }
   }, [checked, readonly]);
-  return /* @__PURE__ */ import_react46.default.createElement(
+  return /* @__PURE__ */ import_react47.default.createElement(
     "div",
     {
       ref,
       className: hashClass(styled, (0, import_clsx80.default)("switch", reversed && is("reversed"), fullWidth && is("fullwidth"), className))
     },
-    /* @__PURE__ */ import_react46.default.createElement(
+    /* @__PURE__ */ import_react47.default.createElement(
       "input",
       {
         onChange: (e) => {
@@ -6401,14 +6421,14 @@ var Switch = import_react46.default.forwardRef(({
         ...others
       }
     ),
-    /* @__PURE__ */ import_react46.default.createElement("label", { htmlFor: `switch-${id}` }, label)
+    /* @__PURE__ */ import_react47.default.createElement("label", { htmlFor: `switch-${id}` }, label)
   );
 });
 Switch.displayName = "Switch" /* Switch */;
 var Switch_default = Switch;
 
 // components/table/Table.tsx
-var React90 = __toESM(require("react"));
+var React91 = __toESM(require("react"));
 var import_clsx81 = __toESM(require("clsx"));
 
 // components/table/TableProps.ts
@@ -6420,7 +6440,7 @@ var TableBorderEnum = /* @__PURE__ */ ((TableBorderEnum2) => {
 })(TableBorderEnum || {});
 
 // components/table/Table.tsx
-var Table = React90.forwardRef(({
+var Table = React91.forwardRef(({
   className,
   id,
   fullwidth,
@@ -6441,15 +6461,15 @@ var Table = React90.forwardRef(({
       className
     )
   );
-  return /* @__PURE__ */ React90.createElement("table", { ref, id, className: classes, ...others });
+  return /* @__PURE__ */ React91.createElement("table", { ref, id, className: classes, ...others });
 });
 Table.displayName = "Table" /* Table */;
 var Table_default = Table;
 
 // components/table/head/TableHead.tsx
-var React91 = __toESM(require("react"));
+var React92 = __toESM(require("react"));
 var import_clsx82 = __toESM(require("clsx"));
-var TableHead = React91.forwardRef(({ className, id, color, backgroundColor, ...others }, ref) => {
+var TableHead = React92.forwardRef(({ className, id, color, backgroundColor, ...others }, ref) => {
   const { styled } = useTrilogyContext();
   const classes = hashClass(
     styled,
@@ -6459,7 +6479,7 @@ var TableHead = React91.forwardRef(({ className, id, color, backgroundColor, ...
       color && is(getColorClassName(color))
     )
   );
-  return /* @__PURE__ */ React91.createElement("thead", { ref, id, className: classes, ...others });
+  return /* @__PURE__ */ React92.createElement("thead", { ref, id, className: classes, ...others });
 });
 TableHead.displayName = "TableHead" /* TableHead */;
 var TableHead_default = TableHead;
@@ -6468,9 +6488,9 @@ var TableHead_default = TableHead;
 var head_default = TableHead_default;
 
 // components/table/body/TableBody.tsx
-var React92 = __toESM(require("react"));
+var React93 = __toESM(require("react"));
 var import_clsx83 = __toESM(require("clsx"));
-var TableBody = React92.forwardRef(({ className, id, color, backgroundColor, ...others }, ref) => {
+var TableBody = React93.forwardRef(({ className, id, color, backgroundColor, ...others }, ref) => {
   const { styled } = useTrilogyContext();
   const classes = hashClass(
     styled,
@@ -6480,7 +6500,7 @@ var TableBody = React92.forwardRef(({ className, id, color, backgroundColor, ...
       color && is(getColorClassName(color))
     )
   );
-  return /* @__PURE__ */ React92.createElement("tbody", { ref, id, className: classes, ...others });
+  return /* @__PURE__ */ React93.createElement("tbody", { ref, id, className: classes, ...others });
 });
 TableBody.displayName = "TableBody" /* TableBody */;
 var TableBody_default = TableBody;
@@ -6489,12 +6509,12 @@ var TableBody_default = TableBody;
 var body_default = TableBody_default;
 
 // components/table/th/TableTh.tsx
-var React93 = __toESM(require("react"));
+var React94 = __toESM(require("react"));
 var import_clsx84 = __toESM(require("clsx"));
-var TableTh = React93.forwardRef(({ className, id, colSpan, rowSpan, ...others }, ref) => {
+var TableTh = React94.forwardRef(({ className, id, colSpan, rowSpan, ...others }, ref) => {
   const { styled } = useTrilogyContext();
   const classes = hashClass(styled, (0, import_clsx84.default)(className));
-  return /* @__PURE__ */ React93.createElement("th", { ref, id, className: classes, colSpan, rowSpan, ...others });
+  return /* @__PURE__ */ React94.createElement("th", { ref, id, className: classes, colSpan, rowSpan, ...others });
 });
 TableTh.displayName = "TableTh" /* TableTh */;
 var TableTh_default = TableTh;
@@ -6503,9 +6523,9 @@ var TableTh_default = TableTh;
 var th_default = TableTh_default;
 
 // components/table/tr/TableTr.tsx
-var React94 = __toESM(require("react"));
+var React95 = __toESM(require("react"));
 var import_clsx85 = __toESM(require("clsx"));
-var TableTr = React94.forwardRef(({
+var TableTr = React95.forwardRef(({
   className,
   id,
   expandable,
@@ -6525,7 +6545,7 @@ var TableTr = React94.forwardRef(({
       color && getColorClassName(color)
     )
   );
-  return /* @__PURE__ */ React94.createElement("tr", { ref, id, className: classes, ...others });
+  return /* @__PURE__ */ React95.createElement("tr", { ref, id, className: classes, ...others });
 });
 TableTr.displayName = "TableTr" /* TableTr */;
 var TableTr_default = TableTr;
@@ -6534,12 +6554,12 @@ var TableTr_default = TableTr;
 var tr_default = TableTr_default;
 
 // components/table/td/TableTd.tsx
-var React95 = __toESM(require("react"));
+var React96 = __toESM(require("react"));
 var import_clsx86 = __toESM(require("clsx"));
-var TableTd = React95.forwardRef(({ className, id, rowSpan, colSpan, ...others }, ref) => {
+var TableTd = React96.forwardRef(({ className, id, rowSpan, colSpan, ...others }, ref) => {
   const { styled } = useTrilogyContext();
   const classes = hashClass(styled, (0, import_clsx86.default)(className));
-  return /* @__PURE__ */ React95.createElement("td", { ref, id, className: classes, rowSpan, colSpan, ...others });
+  return /* @__PURE__ */ React96.createElement("td", { ref, id, className: classes, rowSpan, colSpan, ...others });
 });
 TableTd.displayName = "TableTd" /* TableTd */;
 var TableTd_default = TableTd;
@@ -6548,8 +6568,8 @@ var TableTd_default = TableTd;
 var td_default = TableTd_default;
 
 // components/tabs/context/index.tsx
-var import_react47 = __toESM(require("react"));
-var TabsContext = import_react47.default.createContext({
+var import_react48 = __toESM(require("react"));
+var TabsContext = import_react48.default.createContext({
   activeIndex: 0,
   inverted: false,
   setActiveIndex: () => 0,
@@ -6560,20 +6580,20 @@ var TabsContext = import_react47.default.createContext({
 
 // components/tabs/Tabs.tsx
 var import_clsx87 = __toESM(require("clsx"));
-var import_react48 = __toESM(require("react"));
-var Tabs = import_react48.default.forwardRef(
+var import_react49 = __toESM(require("react"));
+var Tabs = import_react49.default.forwardRef(
   ({ children, className, id, activeIndex, fullwidth, inverted, small }, ref) => {
-    const [currentIndex, setCurrentIndex] = import_react48.default.useState(activeIndex || 0);
-    const [isInverted, setIsInverted] = import_react48.default.useState(inverted || false);
+    const [currentIndex, setCurrentIndex] = import_react49.default.useState(activeIndex || 0);
+    const [isInverted, setIsInverted] = import_react49.default.useState(inverted || false);
     const { styled } = useTrilogyContext();
     const classes = hashClass(
       styled,
       (0, import_clsx87.default)("tabs", fullwidth && is("fullwidth"), inverted && is("inverted"), small && is("small"), className)
     );
-    import_react48.default.useEffect(() => {
+    import_react49.default.useEffect(() => {
       activeIndex !== void 0 && setCurrentIndex(activeIndex);
     }, [activeIndex]);
-    return /* @__PURE__ */ import_react48.default.createElement(
+    return /* @__PURE__ */ import_react49.default.createElement(
       TabsContext.Provider,
       {
         value: {
@@ -6584,7 +6604,7 @@ var Tabs = import_react48.default.forwardRef(
           setActiveIndex: setCurrentIndex
         }
       },
-      /* @__PURE__ */ import_react48.default.createElement("div", { ref, id, className: classes, "data-tabs-context": "" }, children)
+      /* @__PURE__ */ import_react49.default.createElement("div", { ref, id, className: classes, "data-tabs-context": "" }, children)
     );
   }
 );
@@ -6593,16 +6613,16 @@ var Tabs_default = Tabs;
 
 // components/tabs/tab-list/tab/Tab.tsx
 var import_clsx88 = __toESM(require("clsx"));
-var import_react49 = __toESM(require("react"));
-var Tab = import_react49.default.forwardRef(
+var import_react50 = __toESM(require("react"));
+var Tab = import_react50.default.forwardRef(
   ({ active, className, onClick, routerLink = "a", iconName, label, disabled, testId, ariaControls, ...others }, ref) => {
     const { styled } = useTrilogyContext();
     const { index, ...props } = others;
-    const { activeIndex, setActiveIndex, small } = import_react49.default.useContext(TabsContext);
+    const { activeIndex, setActiveIndex, small } = import_react50.default.useContext(TabsContext);
     const Tag2 = others.href || others.to ? routerLink : "button";
-    const isActive = import_react49.default.useMemo(() => activeIndex === index, [activeIndex, index]);
+    const isActive = import_react50.default.useMemo(() => activeIndex === index, [activeIndex, index]);
     const classes = hashClass(styled, (0, import_clsx88.default)("tab", className, { "is-active": isActive }));
-    const handleClick = import_react49.default.useCallback(
+    const handleClick = import_react50.default.useCallback(
       (e) => {
         if (!disabled) {
           if (!others.href && !others.to) setActiveIndex(index);
@@ -6611,10 +6631,10 @@ var Tab = import_react49.default.forwardRef(
       },
       [disabled, onClick, index, setActiveIndex]
     );
-    import_react49.default.useEffect(() => {
+    import_react50.default.useEffect(() => {
       if (active) setActiveIndex(index);
     }, [active, setActiveIndex, index]);
-    return /* @__PURE__ */ import_react49.default.createElement(
+    return /* @__PURE__ */ import_react50.default.createElement(
       Tag2,
       {
         ref,
@@ -6630,8 +6650,8 @@ var Tab = import_react49.default.forwardRef(
         onClick: handleClick,
         ...props
       },
-      /* @__PURE__ */ import_react49.default.createElement("div", { className: hashClass(styled, "tab-icon") }, iconName && /* @__PURE__ */ import_react49.default.createElement(Icon_default, { size: small ? "small" : "medium", name: iconName })),
-      label && /* @__PURE__ */ import_react49.default.createElement(Text_default, null, label)
+      /* @__PURE__ */ import_react50.default.createElement("div", { className: hashClass(styled, "tab-icon") }, iconName && /* @__PURE__ */ import_react50.default.createElement(Icon_default, { size: small ? "small" : "medium", name: iconName })),
+      label && /* @__PURE__ */ import_react50.default.createElement(Text_default, null, label)
     );
   }
 );
@@ -6640,31 +6660,31 @@ var Tab_default = Tab;
 
 // components/tabs/tab-list/TabList.tsx
 var import_clsx89 = __toESM(require("clsx"));
-var import_react50 = __toESM(require("react"));
-var TabList = import_react50.default.forwardRef(
+var import_react51 = __toESM(require("react"));
+var TabList = import_react51.default.forwardRef(
   ({ children, className, id, testId, align, ...others }, ref) => {
     const { styled } = useTrilogyContext();
-    const TabListRef = import_react50.default.useRef(null);
-    const tabRefs = import_react50.default.useRef([]);
-    const { small } = import_react50.default.useContext(TabsContext);
-    import_react50.default.useImperativeHandle(ref, () => TabListRef.current);
-    const [tabsWidth, setTabsWidth] = import_react50.default.useState(0);
-    const [tabListWidth, setTabListWidth] = import_react50.default.useState(0);
-    const [scrollLeft, setScrollLeft] = import_react50.default.useState(0);
-    const [tabFocused, setTabFocused] = import_react50.default.useState(0);
+    const TabListRef = import_react51.default.useRef(null);
+    const tabRefs = import_react51.default.useRef([]);
+    const { small } = import_react51.default.useContext(TabsContext);
+    import_react51.default.useImperativeHandle(ref, () => TabListRef.current);
+    const [tabsWidth, setTabsWidth] = import_react51.default.useState(0);
+    const [tabListWidth, setTabListWidth] = import_react51.default.useState(0);
+    const [scrollLeft, setScrollLeft] = import_react51.default.useState(0);
+    const [tabFocused, setTabFocused] = import_react51.default.useState(0);
     const classes = hashClass(styled, (0, import_clsx89.default)("tab-list", align && is(getAlignClassName(align)), className));
-    const isVisibleArrowLeft = (0, import_react50.useMemo)(() => {
+    const isVisibleArrowLeft = (0, import_react51.useMemo)(() => {
       if (!tabRefs.current.length) return false;
       return scrollLeft > tabRefs.current[0].width / 2;
     }, [tabRefs, scrollLeft]);
-    const isVisibleArrowRight = (0, import_react50.useMemo)(
+    const isVisibleArrowRight = (0, import_react51.useMemo)(
       () => tabListWidth - tabsWidth - scrollLeft > 5,
       [tabListWidth, tabsWidth, scrollLeft]
     );
-    const TabElms = import_react50.default.useMemo(() => {
-      return import_react50.default.Children.map(children, (child, index) => {
-        if (!import_react50.default.isValidElement(child)) return false;
-        return /* @__PURE__ */ import_react50.default.createElement(
+    const TabElms = import_react51.default.useMemo(() => {
+      return import_react51.default.Children.map(children, (child, index) => {
+        if (!import_react51.default.isValidElement(child)) return false;
+        return /* @__PURE__ */ import_react51.default.createElement(
           Tab_default,
           {
             ref: (el) => tabRefs.current[index] = el == null ? void 0 : el.getBoundingClientRect(),
@@ -6674,7 +6694,7 @@ var TabList = import_react50.default.forwardRef(
         );
       });
     }, [children, tabRefs]);
-    const scrollWithArrow = import_react50.default.useCallback(
+    const scrollWithArrow = import_react51.default.useCallback(
       (direction) => {
         var _a;
         if (tabRefs.current) {
@@ -6686,7 +6706,7 @@ var TabList = import_react50.default.forwardRef(
       },
       [tabRefs.current, tabFocused, TabListRef]
     );
-    const handleScrollList = import_react50.default.useCallback(
+    const handleScrollList = import_react51.default.useCallback(
       (e) => {
         const target = e.target;
         const firstGap = tabRefs.current[0].x + (small ? 16 : 24);
@@ -6698,26 +6718,26 @@ var TabList = import_react50.default.forwardRef(
       },
       [tabRefs, small]
     );
-    const onClickPrev = import_react50.default.useCallback(() => {
+    const onClickPrev = import_react51.default.useCallback(() => {
       isVisibleArrowLeft && scrollWithArrow(-1);
     }, [scrollWithArrow, isVisibleArrowLeft]);
-    const onClickNext = import_react50.default.useCallback(() => {
+    const onClickNext = import_react51.default.useCallback(() => {
       isVisibleArrowRight && scrollWithArrow(1);
     }, [scrollWithArrow, isVisibleArrowRight]);
-    const setWidths = import_react50.default.useCallback(() => {
+    const setWidths = import_react51.default.useCallback(() => {
       if (TabListRef.current) {
         setTabsWidth(TabListRef.current.clientWidth);
         setTabListWidth(TabListRef.current.scrollWidth);
       }
     }, [TabListRef]);
-    import_react50.default.useEffect(() => {
+    import_react51.default.useEffect(() => {
       setWidths();
     }, [setWidths, isVisibleArrowLeft, isVisibleArrowRight]);
-    import_react50.default.useEffect(() => {
+    import_react51.default.useEffect(() => {
       window.addEventListener("resize", setWidths);
       return () => window.removeEventListener("resize", setWidths);
     }, [TabListRef, setWidths]);
-    return /* @__PURE__ */ import_react50.default.createElement(
+    return /* @__PURE__ */ import_react51.default.createElement(
       "div",
       {
         ref: TabListRef,
@@ -6728,7 +6748,7 @@ var TabList = import_react50.default.forwardRef(
         onScroll: handleScrollList,
         ...others
       },
-      isVisibleArrowLeft && /* @__PURE__ */ import_react50.default.createElement(
+      isVisibleArrowLeft && /* @__PURE__ */ import_react51.default.createElement(
         Icon_default,
         {
           "data-arrow-prev": "",
@@ -6739,7 +6759,7 @@ var TabList = import_react50.default.forwardRef(
         }
       ),
       TabElms,
-      isVisibleArrowRight && /* @__PURE__ */ import_react50.default.createElement(
+      isVisibleArrowRight && /* @__PURE__ */ import_react51.default.createElement(
         Icon_default,
         {
           "data-arrow-next": "",
@@ -6757,13 +6777,13 @@ var TabList_default = TabList;
 
 // components/tabs/tab-panels/tab-panel/TabPanel.tsx
 var import_clsx90 = __toESM(require("clsx"));
-var import_react51 = __toESM(require("react"));
-var TabPanel = import_react51.default.forwardRef(({ children, className, testId, ...others }, ref) => {
+var import_react52 = __toESM(require("react"));
+var TabPanel = import_react52.default.forwardRef(({ children, className, testId, ...others }, ref) => {
   const { styled } = useTrilogyContext();
   const { index, ...props } = others;
-  const { activeIndex } = import_react51.default.useContext(TabsContext);
+  const { activeIndex } = import_react52.default.useContext(TabsContext);
   const classes = hashClass(styled, (0, import_clsx90.default)("tab-panel", index === activeIndex && is("active"), className));
-  return /* @__PURE__ */ import_react51.default.createElement("div", { ref, "data-testid": testId, className: classes, ...props }, children);
+  return /* @__PURE__ */ import_react52.default.createElement("div", { ref, "data-testid": testId, className: classes, ...props }, children);
 });
 TabPanel.displayName = "TabPanel" /* TabPanel */;
 var TabPanel_default = TabPanel;
@@ -6773,13 +6793,13 @@ var tab_panel_default = TabPanel_default;
 
 // components/tabs/tab-panels/TabPanels.tsx
 var import_clsx91 = __toESM(require("clsx"));
-var import_react52 = __toESM(require("react"));
-var TabPanels = import_react52.default.forwardRef(({ children, className, id, testId, ...others }, ref) => {
+var import_react53 = __toESM(require("react"));
+var TabPanels = import_react53.default.forwardRef(({ children, className, id, testId, ...others }, ref) => {
   const { styled } = useTrilogyContext();
   const classes = hashClass(styled, (0, import_clsx91.default)("tab-panels", className));
-  return /* @__PURE__ */ import_react52.default.createElement("div", { ref, id, "data-testid": testId, className: classes, ...others }, import_react52.default.Children.map(children, (child, index) => {
-    if (!import_react52.default.isValidElement(child)) return false;
-    return /* @__PURE__ */ import_react52.default.createElement(tab_panel_default, { ...child.props, index });
+  return /* @__PURE__ */ import_react53.default.createElement("div", { ref, id, "data-testid": testId, className: classes, ...others }, import_react53.default.Children.map(children, (child, index) => {
+    if (!import_react53.default.isValidElement(child)) return false;
+    return /* @__PURE__ */ import_react53.default.createElement(tab_panel_default, { ...child.props, index });
   }));
 });
 TabPanels.displayName = "TabPanels" /* TabPanels */;
@@ -6787,8 +6807,8 @@ var TabPanels_default = TabPanels;
 
 // components/tag/Tag.tsx
 var import_clsx92 = __toESM(require("clsx"));
-var import_react53 = __toESM(require("react"));
-var Tag = import_react53.default.forwardRef(
+var import_react54 = __toESM(require("react"));
+var Tag = import_react54.default.forwardRef(
   ({ label, className, id, variant, inverted, small, iconName, ...others }, ref) => {
     const { styled } = useTrilogyContext();
     const tagClassNames = hashClass(
@@ -6802,7 +6822,7 @@ var Tag = import_react53.default.forwardRef(
       )
     );
     const tagIconClassNames = (0, import_clsx92.default)(variant && is(getColorClassName(variant)));
-    return /* @__PURE__ */ import_react53.default.createElement("span", { ref, id, className: tagClassNames, ...others }, iconName && /* @__PURE__ */ import_react53.default.createElement(Icon_default, { className: tagIconClassNames, name: iconName }), label);
+    return /* @__PURE__ */ import_react54.default.createElement("span", { ref, id, className: tagClassNames, ...others }, iconName && /* @__PURE__ */ import_react54.default.createElement(Icon_default, { className: tagIconClassNames, name: iconName }), label);
   }
 );
 Tag.displayName = "Tag" /* Tag */;
@@ -6810,10 +6830,10 @@ var Tag_default = Tag;
 
 // components/tag/list/TagList.tsx
 var import_clsx93 = __toESM(require("clsx"));
-var React103 = __toESM(require("react"));
-var TagList = React103.forwardRef(({ className, id, align, marginless, ...others }, ref) => {
+var React104 = __toESM(require("react"));
+var TagList = React104.forwardRef(({ className, id, align, marginless, ...others }, ref) => {
   const { styled } = useTrilogyContext();
-  return /* @__PURE__ */ React103.createElement(
+  return /* @__PURE__ */ React104.createElement(
     "div",
     {
       ref,
@@ -6843,8 +6863,8 @@ var TagVariant = /* @__PURE__ */ ((TagVariant2) => {
 
 // components/textarea/Textarea.tsx
 var import_clsx94 = __toESM(require("clsx"));
-var import_react54 = __toESM(require("react"));
-var Textarea = import_react54.default.forwardRef(
+var import_react55 = __toESM(require("react"));
+var Textarea = import_react55.default.forwardRef(
   ({
     className,
     id,
@@ -6865,9 +6885,9 @@ var Textarea = import_react54.default.forwardRef(
     iconNameRight,
     ...others
   }, ref) => {
-    const [value, setValue] = (0, import_react54.useState)(defaultValue || "");
+    const [value, setValue] = (0, import_react55.useState)(defaultValue || "");
     const { styled } = useTrilogyContext();
-    (0, import_react54.useEffect)(() => {
+    (0, import_react55.useEffect)(() => {
       setValue(defaultValue || "");
     }, [defaultValue]);
     const wrapperClasses = hashClass(styled, (0, import_clsx94.default)("field textarea-wrapper", className, status && is(status)));
@@ -6878,7 +6898,7 @@ var Textarea = import_react54.default.forwardRef(
       styled,
       (0, import_clsx94.default)("control", iconNameLeft && has("icons-left"), iconNameRight && has("icons-right"))
     );
-    return /* @__PURE__ */ import_react54.default.createElement("div", { id, className: wrapperClasses }, label && /* @__PURE__ */ import_react54.default.createElement("label", { className: hashClass(styled, "textarea-label"), htmlFor: id }, label, " ", required && /* @__PURE__ */ import_react54.default.createElement(Text_default, { markup: "span" /* SPAN */, typo: "has-text-error" /* TEXT_ERROR */ }, "*")), sample && /* @__PURE__ */ import_react54.default.createElement(Text_default, { className: "input-sample", level: 2 /* TWO */, id }, sample), /* @__PURE__ */ import_react54.default.createElement("div", { className: controlClasses }, /* @__PURE__ */ import_react54.default.createElement(
+    return /* @__PURE__ */ import_react55.default.createElement("div", { id, className: wrapperClasses }, label && /* @__PURE__ */ import_react55.default.createElement("label", { className: hashClass(styled, "textarea-label"), htmlFor: id }, label, " ", required && /* @__PURE__ */ import_react55.default.createElement(Text_default, { markup: "span" /* SPAN */, typo: "has-text-error" /* TEXT_ERROR */ }, "*")), sample && /* @__PURE__ */ import_react55.default.createElement(Text_default, { className: "input-sample", level: 2 /* TWO */, id }, sample), /* @__PURE__ */ import_react55.default.createElement("div", { className: controlClasses }, /* @__PURE__ */ import_react55.default.createElement(
       "textarea",
       {
         ref,
@@ -6901,7 +6921,7 @@ var Textarea = import_react54.default.forwardRef(
         required,
         ...others
       }
-    ), iconNameLeft && /* @__PURE__ */ import_react54.default.createElement(Icon_default, { name: iconNameLeft, size: "small", className: "icon-left" }), iconNameRight && /* @__PURE__ */ import_react54.default.createElement(Icon_default, { name: iconNameRight, size: "small", className: "icon-right" }), maxLength && /* @__PURE__ */ import_react54.default.createElement("div", { className: counterClasses }, `${value.length}/${maxLength == null ? void 0 : maxLength.toString()}`)), help && /* @__PURE__ */ import_react54.default.createElement(Text_default, { className: helpClasses }, help));
+    ), iconNameLeft && /* @__PURE__ */ import_react55.default.createElement(Icon_default, { name: iconNameLeft, size: "small", className: "icon-left" }), iconNameRight && /* @__PURE__ */ import_react55.default.createElement(Icon_default, { name: iconNameRight, size: "small", className: "icon-right" }), maxLength && /* @__PURE__ */ import_react55.default.createElement("div", { className: counterClasses }, `${value.length}/${maxLength == null ? void 0 : maxLength.toString()}`)), help && /* @__PURE__ */ import_react55.default.createElement(Text_default, { className: helpClasses }, help));
   }
 );
 Textarea.displayName = "Textarea" /* Textarea */;
@@ -6909,15 +6929,15 @@ var Textarea_default = Textarea;
 
 // components/timeline/content/TimelineContent.tsx
 var import_clsx95 = __toESM(require("clsx"));
-var React105 = __toESM(require("react"));
-var TimelineContent = React105.forwardRef(
+var React106 = __toESM(require("react"));
+var TimelineContent = React106.forwardRef(
   ({ children, className, id, heading, content, linkLabel, linkTo, ...others }, ref) => {
     const { styled } = useTrilogyContext();
     const classes = hashClass(styled, (0, import_clsx95.default)("timeline-content", className));
     if (children) {
-      return /* @__PURE__ */ React105.createElement("div", { ref, id, className: classes, ...others }, children);
+      return /* @__PURE__ */ React106.createElement("div", { ref, id, className: classes, ...others }, children);
     }
-    return /* @__PURE__ */ React105.createElement("div", { ref, id, className: classes, ...others }, heading && /* @__PURE__ */ React105.createElement(Text_default, { markup: "p" /* P */ }, heading), content && /* @__PURE__ */ React105.createElement(Text_default, { className: "main-content", markup: "p" /* P */ }, content), linkTo && linkLabel && /* @__PURE__ */ React105.createElement(Link_default, { href: linkTo }, linkLabel));
+    return /* @__PURE__ */ React106.createElement("div", { ref, id, className: classes, ...others }, heading && /* @__PURE__ */ React106.createElement(Text_default, { markup: "p" /* P */ }, heading), content && /* @__PURE__ */ React106.createElement(Text_default, { className: "main-content", markup: "p" /* P */ }, content), linkTo && linkLabel && /* @__PURE__ */ React106.createElement(Link_default, { href: linkTo }, linkLabel));
   }
 );
 TimelineContent.displayName = "TimelineContent" /* TimelineContent */;
@@ -6928,14 +6948,14 @@ var content_default3 = TimelineContent_default;
 
 // components/timeline/item/TimelineItem.tsx
 var import_clsx96 = __toESM(require("clsx"));
-var React106 = __toESM(require("react"));
-var TimelineItem = React106.forwardRef(({ className, id, done, active, cancel, ...others }, ref) => {
+var React107 = __toESM(require("react"));
+var TimelineItem = React107.forwardRef(({ className, id, done, active, cancel, ...others }, ref) => {
   const { styled } = useTrilogyContext();
   const classes = hashClass(
     styled,
     (0, import_clsx96.default)("timeline-item", done && "done", active && "active", cancel && "cancel", className)
   );
-  return /* @__PURE__ */ React106.createElement("div", { ref, id, className: classes, ...others });
+  return /* @__PURE__ */ React107.createElement("div", { ref, id, className: classes, ...others });
 });
 TimelineItem.displayName = "TimelineItem" /* TimelineItem */;
 var TimelineItem_default = TimelineItem;
@@ -6945,8 +6965,8 @@ var item_default5 = TimelineItem_default;
 
 // components/timeline/marker/TimelineMarker.tsx
 var import_clsx97 = __toESM(require("clsx"));
-var React107 = __toESM(require("react"));
-var TimelineMarker = React107.forwardRef(({
+var React108 = __toESM(require("react"));
+var TimelineMarker = React108.forwardRef(({
   className,
   id,
   iconClassname,
@@ -6956,7 +6976,7 @@ var TimelineMarker = React107.forwardRef(({
   const { styled } = useTrilogyContext();
   const classes = hashClass(styled, (0, import_clsx97.default)("timeline-marker", is("icon"), className));
   const iconClasses = (0, import_clsx97.default)(iconClassname);
-  return /* @__PURE__ */ React107.createElement("div", { ref, id, className: classes, ...others }, /* @__PURE__ */ React107.createElement("div", { className: "card-header-icon" }, /* @__PURE__ */ React107.createElement(Icon_default, { className: iconClasses, name: iconName, size: "small" /* SMALL */ })));
+  return /* @__PURE__ */ React108.createElement("div", { ref, id, className: classes, ...others }, /* @__PURE__ */ React108.createElement("div", { className: "card-header-icon" }, /* @__PURE__ */ React108.createElement(Icon_default, { className: iconClasses, name: iconName, size: "small" /* SMALL */ })));
 });
 TimelineMarker.displayName = "TimelineMarker" /* TimelineMarker */;
 var TimelineMarker_default = TimelineMarker;
@@ -6966,18 +6986,18 @@ var marker_default = TimelineMarker_default;
 
 // components/timeline/Timeline.tsx
 var import_clsx98 = __toESM(require("clsx"));
-var React108 = __toESM(require("react"));
-var Timeline = React108.forwardRef(({ className, id, horizontal, ...others }, ref) => {
+var React109 = __toESM(require("react"));
+var Timeline = React109.forwardRef(({ className, id, horizontal, ...others }, ref) => {
   const { styled } = useTrilogyContext();
   const classes = hashClass(styled, (0, import_clsx98.default)("timeline", horizontal && is("horizontal"), className));
-  return /* @__PURE__ */ React108.createElement("div", { ref, id, className: classes, ...others });
+  return /* @__PURE__ */ React109.createElement("div", { ref, id, className: classes, ...others });
 });
 Timeline.displayName = "Timeline" /* Timeline */;
 var Timeline_default = Timeline;
 
 // components/view/View.tsx
 var import_clsx99 = __toESM(require("clsx"));
-var React109 = __toESM(require("react"));
+var React110 = __toESM(require("react"));
 
 // components/view/ViewProps/index.ts
 var ViewMarkup = /* @__PURE__ */ ((ViewMarkup2) => {
@@ -7002,7 +7022,7 @@ var ViewMarkup = /* @__PURE__ */ ((ViewMarkup2) => {
 })(ViewMarkup || {});
 
 // components/view/View.tsx
-var View = React109.forwardRef(({
+var View = React110.forwardRef(({
   children,
   style,
   className,
@@ -7039,7 +7059,7 @@ var View = React109.forwardRef(({
       className
     )
   );
-  return /* @__PURE__ */ React109.createElement(
+  return /* @__PURE__ */ React110.createElement(
     Tag2,
     {
       ref,
@@ -7080,10 +7100,10 @@ var JustifyContent = /* @__PURE__ */ ((JustifyContent2) => {
 })(JustifyContent || {});
 
 // context/provider/index.tsx
-var import_react55 = __toESM(require("react"));
+var import_react56 = __toESM(require("react"));
 
 // version.ts
-var version = "0.0.20-esm-cjs";
+var version = "0.0.23-esm-cjs";
 
 // version.json
 var version_default = {
@@ -7111,12 +7131,12 @@ var TrilogyProvider = ({
   hash: HASH = version_default.VERSION,
   assetUrl = ""
 }) => {
-  const [styled, setStyled] = import_react55.default.useState(mangled);
-  const [hash, setHash] = import_react55.default.useState(HASH);
-  (0, import_react55.useLayoutEffect)(() => {
+  const [styled, setStyled] = import_react56.default.useState(mangled);
+  const [hash, setHash] = import_react56.default.useState(HASH);
+  (0, import_react56.useLayoutEffect)(() => {
     injectTrilogyAssets && injectTrilogy(mangled, id, theme, assetUrl);
   }, []);
-  return /* @__PURE__ */ import_react55.default.createElement(TrilogyContext.Provider, { value: { styled, setStyled, hash, setHash } }, children);
+  return /* @__PURE__ */ import_react56.default.createElement(TrilogyContext.Provider, { value: { styled, setStyled, hash, setHash } }, children);
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
@@ -7242,6 +7262,7 @@ var TrilogyProvider = ({
   Select,
   SelectOption,
   SelectStatus,
+  Skeleton,
   Spacer,
   SpacerSize,
   SpacerSizeValues,