@trilogy-ds/react 0.0.19-esm-cjs → 0.0.21-esm-cjs

package/lib/index.js

@@ -153,6 +153,7 @@ __export(index_exports, {
   Select: () => Select_default,
   SelectOption: () => option_default,
   SelectStatus: () => SelectStatus,
+  Skeleton: () => Skeleton_native_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,95 @@ var SegmentControl = import_react44.default.forwardRef(({ className, id, onClick
 SegmentControl.displayName = "SegmentControl" /* SegmentControl */;
 var SegmentControl_default = SegmentControl;
 
+// components/skeleton/Skeleton.native.tsx
+var import_react45 = __toESM(require("react"));
+var import_react_native = require("react-native");
+var Skeleton = ({
+  style,
+  width = "100%",
+  height = 20,
+  backgroundColor = "#E1E9EE",
+  shimmerColor = "#F7F8F8",
+  duration = 1200,
+  borderRadius = 4,
+  children,
+  testID
+}) => {
+  const shimmerValue = (0, import_react45.useRef)(new import_react_native.Animated.Value(0)).current;
+  const [containerWidth, setContainerWidth] = import_react45.default.useState(200);
+  (0, import_react45.useEffect)(() => {
+    const shimmerAnimation = import_react_native.Animated.loop(
+      import_react_native.Animated.timing(shimmerValue, {
+        toValue: 1,
+        duration,
+        useNativeDriver: true
+      }),
+      { iterations: -1 }
+    );
+    shimmerAnimation.start();
+    return () => shimmerAnimation.stop();
+  }, [shimmerValue, duration]);
+  const translateX = shimmerValue.interpolate({
+    inputRange: [0, 1],
+    outputRange: [-containerWidth, containerWidth]
+  });
+  const opacity = shimmerValue.interpolate({
+    inputRange: [0, 0.5, 1],
+    outputRange: [0.3, 0.8, 0.3]
+  });
+  const containerStyle = {
+    width: children ? void 0 : width,
+    height: children ? void 0 : height,
+    backgroundColor,
+    borderRadius,
+    overflow: "hidden",
+    alignSelf: children ? "flex-start" : void 0,
+    ...style
+  };
+  const handleLayout = (event) => {
+    const { width: layoutWidth } = event.nativeEvent.layout;
+    setContainerWidth(layoutWidth);
+  };
+  if (children) {
+    return /* @__PURE__ */ import_react45.default.createElement(import_react_native.View, { style: containerStyle, testID, onLayout: handleLayout }, /* @__PURE__ */ import_react45.default.createElement(import_react_native.View, { style: { opacity: 0 } }, children), /* @__PURE__ */ import_react45.default.createElement(
+      import_react_native.Animated.View,
+      {
+        style: [
+          {
+            position: "absolute",
+            top: 0,
+            left: 0,
+            width: containerWidth * 0.7,
+            height: "100%",
+            backgroundColor: shimmerColor,
+            opacity,
+            transform: [{ translateX }]
+          }
+        ]
+      }
+    ));
+  }
+  return /* @__PURE__ */ import_react45.default.createElement(import_react_native.View, { style: containerStyle, testID, onLayout: handleLayout }, /* @__PURE__ */ import_react45.default.createElement(
+    import_react_native.Animated.View,
+    {
+      style: [
+        {
+          width: containerWidth * 0.7,
+          height: "100%",
+          backgroundColor: shimmerColor,
+          opacity,
+          transform: [{ translateX }]
+        }
+      ]
+    }
+  ));
+};
+var Skeleton_native_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 +6355,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 +6389,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 +6411,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 +6430,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 +6447,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 +6499,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 +6518,7 @@ var TableBorderEnum = /* @__PURE__ */ ((TableBorderEnum2) => {
 })(TableBorderEnum || {});
 
 // components/table/Table.tsx
-var Table = React90.forwardRef(({
+var Table = React91.forwardRef(({
   className,
   id,
   fullwidth,
@@ -6441,15 +6539,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 +6557,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 +6566,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 +6578,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 +6587,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 +6601,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 +6623,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 +6632,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 +6646,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 +6658,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 +6682,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 +6691,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 +6709,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 +6728,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 +6738,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 +6772,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 +6784,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 +6796,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 +6826,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 +6837,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 +6855,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 +6871,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 +6885,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 +6900,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 +6908,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 +6941,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 +6963,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 +6976,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 +6999,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 +7007,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 +7026,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 +7043,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 +7054,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 +7064,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 +7100,7 @@ var ViewMarkup = /* @__PURE__ */ ((ViewMarkup2) => {
 })(ViewMarkup || {});
 
 // components/view/View.tsx
-var View = React109.forwardRef(({
+var View2 = React110.forwardRef(({
   children,
   style,
   className,
@@ -7039,7 +7137,7 @@ var View = React109.forwardRef(({
       className
     )
   );
-  return /* @__PURE__ */ React109.createElement(
+  return /* @__PURE__ */ React110.createElement(
     Tag2,
     {
       ref,
@@ -7058,7 +7156,7 @@ var View = React109.forwardRef(({
     children
   );
 });
-var View_default = View;
+var View_default = View2;
 
 // components/view/ViewEnum.ts
 var ViewColor = /* @__PURE__ */ ((ViewColor2) => {
@@ -7080,10 +7178,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.19-esm-cjs";
+var version = "0.0.21-esm-cjs";
 
 // version.json
 var version_default = {
@@ -7111,12 +7209,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 +7340,7 @@ var TrilogyProvider = ({
   Select,
   SelectOption,
   SelectStatus,
+  Skeleton,
   Spacer,
   SpacerSize,
   SpacerSizeValues,