@trilogy-ds/react 0.0.16-esm-cjs → 0.0.18-esm-cjs

package/lib/components/tabs/index.mjs

@@ -2,45 +2,45 @@
 import "../../chunk-CTL6JRU3.mjs";
 import {
   TabPanels_default
-} from "../../chunk-4XLHP4FT.mjs";
-import "../../chunk-TTMI7WFG.mjs";
+} from "../../chunk-VZX5PGQL.mjs";
+import "../../chunk-YR5WZRJD.mjs";
 import {
   TabPanel_default
-} from "../../chunk-TBFT5WCF.mjs";
+} from "../../chunk-BD73QGIH.mjs";
 import {
   TabList_default
-} from "../../chunk-UNUI5GCY.mjs";
+} from "../../chunk-76P5II7A.mjs";
 import {
   Tab_default
-} from "../../chunk-PTHFF3G5.mjs";
+} from "../../chunk-24R7IYOG.mjs";
 import {
   Tabs_default
-} from "../../chunk-5Z2RQ5MY.mjs";
+} from "../../chunk-2ZXXN4R4.mjs";
+import "../../chunk-Y3ROARMA.mjs";
+import "../../chunk-LGL3XQ7F.mjs";
+import "../../chunk-ALGX47MZ.mjs";
+import "../../chunk-XXKEMYTB.mjs";
+import "../../chunk-KPAFJMF3.mjs";
+import "../../chunk-OAENQH2X.mjs";
 import "../../chunk-BVZWKYND.mjs";
 import "../../chunk-HHE7L3CW.mjs";
-import "../../chunk-SWFBV5TR.mjs";
-import "../../chunk-KPAFJMF3.mjs";
 import "../../chunk-P6NVOAAH.mjs";
 import "../../chunk-A35Q44N2.mjs";
-import "../../chunk-Y3ROARMA.mjs";
-import "../../chunk-SGAZRZIK.mjs";
-import "../../chunk-WC3ULY5W.mjs";
-import "../../chunk-JOSZ4COK.mjs";
+import "../../chunk-7VSJ3RTI.mjs";
+import "../../chunk-P372ZF3A.mjs";
 import "../../chunk-SWVRRUW7.mjs";
 import "../../chunk-Y7CEUBIZ.mjs";
 import "../../chunk-HU3FAWMX.mjs";
-import "../../chunk-ODKCJMCG.mjs";
 import "../../chunk-OGATDHMZ.mjs";
+import "../../chunk-ODKCJMCG.mjs";
 import "../../chunk-UFMRE754.mjs";
 import "../../chunk-ZB4OWTDD.mjs";
 import "../../chunk-L4UDEKQK.mjs";
-import "../../chunk-P372ZF3A.mjs";
-import "../../chunk-HV6TXVFA.mjs";
-import "../../chunk-CYNSXZSV.mjs";
-import "../../chunk-YK5HPRX4.mjs";
+import "../../chunk-CD6DMMCL.mjs";
+import "../../chunk-RYABO2EX.mjs";
 import "../../chunk-4ZJQXF2V.mjs";
 import "../../chunk-4UHBBNZ7.mjs";
-import "../../chunk-NTS75UVH.mjs";
+import "../../chunk-VDLM4YQP.mjs";
 import "../../chunk-QIPGVLHJ.mjs";
 export {
   Tab_default as Tab,

package/lib/components/tabs/index.native.js

@@ -46,13 +46,14 @@ var TabsContext = import_react.default.createContext({
   inverted: false,
   setActiveIndex: () => 0,
   setInverted: () => false,
-  small: false
+  small: false,
+  fullwidth: false
 });
 
 // components/tabs/Tabs.native.tsx
 var import_react2 = __toESM(require("react"));
 var import_react_native = require("react-native");
-var Tabs = import_react2.default.forwardRef(({ children, activeIndex, inverted }, ref) => {
+var Tabs = import_react2.default.forwardRef(({ children, activeIndex, inverted, fullwidth }, ref) => {
   const [currentIndex, setCurrentIndex] = import_react2.default.useState(activeIndex || 0);
   const [isInverted, setIsInverted] = import_react2.default.useState(inverted || false);
   import_react2.default.useEffect(() => {
@@ -68,7 +69,8 @@ var Tabs = import_react2.default.forwardRef(({ children, activeIndex, inverted }
         activeIndex: currentIndex,
         inverted: isInverted,
         setInverted: setIsInverted,
-        setActiveIndex: setCurrentIndex
+        setActiveIndex: setCurrentIndex,
+        fullwidth
       }
     },
     /* @__PURE__ */ import_react2.default.createElement(import_react_native.View, { ref }, children)
@@ -92,6 +94,7 @@ var colors = {
   ["MAIN" /* MAIN */]: ["#3d5d7e", "main", "white"],
   ["MAIN_FADE" /* MAIN_FADE */]: ["#BBC6CD", "main-fade", "white"],
   ["ACCENT" /* ACCENT */]: ["#da641b", "accent", "white"],
+  ["ACCENT_FADE" /* ACCENT_FADE */]: ["#faebe3", "accent-fade", "white"],
   ["FONT" /* FONT */]: ["#3d5d7e", "main", "white"],
   ["FONT_PLACEHOLDER" /* FONT_PLACEHOLDER */]: ["#687a87", "font-placeholder", "white"],
   ["SUCCESS" /* SUCCESS */]: ["#007B52", "success", "white"],
@@ -209,6 +212,12 @@ var Icon = import_react6.default.forwardRef(
       icon: {
         transform: isIOS ? stretched && [{ skewX: "20deg" }] || [{ skewX: "0deg" }] : []
       },
+      iconContainer: {
+        alignItems: "center",
+        justifyContent: "center",
+        width: defaultSize,
+        height: defaultSize
+      },
       stretched: {
         justifyContent: "center",
         alignItems: "center",
@@ -263,7 +272,7 @@ var Icon = import_react6.default.forwardRef(
           }
         ));
       } else {
-        iconView = /* @__PURE__ */ import_react6.default.createElement(import_react_native3.View, { ...others }, /* @__PURE__ */ import_react6.default.createElement(
+        iconView = /* @__PURE__ */ import_react6.default.createElement(import_react_native3.View, { style: styles.iconContainer, ...others }, /* @__PURE__ */ import_react6.default.createElement(
           import_css.WithLocalSvg,
           {
             style: [styles.icon, style],
@@ -295,24 +304,11 @@ var setTypographyAlign = (typo = "left") => {
   return typo && !Array.isArray(typo) && typo === "has-text-centered" /* TEXT_CENTERED */ && "center" || typo && Array.isArray(typo) && typo.includes("has-text-centered" /* TEXT_CENTERED */) && "center" || typo && !Array.isArray(typo) && typo === "has-text-left" /* TEXT_LEFT */ && "left" || typo && Array.isArray(typo) && typo.includes("has-text-left" /* TEXT_LEFT */) && "left" || typo && !Array.isArray(typo) && typo === "has-text-right" /* TEXT_RIGHT */ && "right" || typo && Array.isArray(typo) && typo.includes("has-text-right" /* TEXT_RIGHT */) && "right" || typo && !Array.isArray(typo) && typo === "has-text-justified" /* TEXT_JUSTIFIED */ && "justify" || typo && Array.isArray(typo) && typo.includes("has-text-justified" /* TEXT_JUSTIFIED */) && "justify" || "left";
 };
 
-// context/providerTheme/index.tsx
-var import_react7 = __toESM(require("react"));
-var defaultTheme2 = {
-  icons: {},
-  colors: {},
-  fontFamily: {}
-};
-var defaultContextValue2 = {
-  theme: defaultTheme2,
-  setTheme: () => void 0
-};
-var TrilogyThemeContext2 = import_react7.default.createContext(defaultContextValue2);
-
-// objects/Typography/TypographyBold/index.tsx
-var import_react8 = require("react");
+// objects/Typography/TypographyBold/index.native.tsx
+var import_react7 = require("react");
 var getTypographyBoldStyle = (typo) => {
   var _a, _b, _c, _d;
-  const { theme } = (0, import_react8.useContext)(TrilogyThemeContext2);
+  const { theme } = (0, import_react7.useContext)(TrilogyThemeContext);
   const currentTypo = Array.isArray(typo) ? typo : [typo];
   switch (true) {
     case (typo && currentTypo.includes("has-text-weight-medium" /* TEXT_WEIGHT_MEDIUM */)):
@@ -332,68 +328,76 @@ var setTypographyColor = (typo = "", inverted = false, loading = false) => {
 };
 
 // components/text/Text.native.tsx
-var import_react9 = __toESM(require("react"));
+var import_react8 = __toESM(require("react"));
 var import_native2 = __toESM(require("react-content-loader/native"));
 var import_react_native4 = require("react-native");
-var Text = import_react9.default.forwardRef(
-  ({ children, level, style, inverted, typo, skeleton, accessibilityLabel, numberOfLines = 0, ...others }, ref) => {
-    const statesContext = (0, import_react9.useContext)(StatesContext);
-    const textLevels = (level2) => {
-      return level2 && level2 == 1 /* ONE */ && 16 || level2 && level2 == 2 /* TWO */ && 14 || level2 && level2 == 3 /* THREE */ && 12 || level2 && level2 == 4 /* FOUR */ && 10 || 14;
-    };
-    const styles = import_react_native4.StyleSheet.create({
-      text: {
-        fontFamily: getTypographyBoldStyle(typo),
-        fontSize: textLevels(level),
-        color: setTypographyColor(typo, inverted || statesContext.inverted, skeleton),
-        textAlign: setTypographyAlign(typo),
-        lineHeight: textLevels(level) * 1.2,
-        textDecorationLine: "none",
-        alignSelf: setTypographyAlign(typo) === "left" && "flex-start" || setTypographyAlign(typo) === "center" && "center" || setTypographyAlign(typo) === "right" && "flex-end" || "flex-start"
-      },
-      skeleton: {
-        minWidth: 10,
-        alignSelf: setTypographyAlign(typo) === "left" && "flex-start" || setTypographyAlign(typo) === "center" && "center" || setTypographyAlign(typo) === "right" && "flex-end" || "flex-start",
-        borderRadius: level && level == 1 /* ONE */ && 7 || level && level == 2 /* TWO */ && 7 || level && level == 3 /* THREE */ && 5 || 3,
-        borderWidth: 0.1,
-        borderColor: getColorStyle("NEUTRAL_FADE" /* NEUTRAL_FADE */),
-        overflow: "hidden",
-        height: textLevels(level)
-      }
-    });
-    const textAccessibilityLabel = accessibilityLabel ? accessibilityLabel : typeof children === "string" ? children : void 0;
-    let textView = /* @__PURE__ */ import_react9.default.createElement(
-      import_react_native4.Text,
-      {
-        ref,
-        numberOfLines,
-        ellipsizeMode: "tail",
-        maxFontSizeMultiplier: 1.3,
-        accessible: !!textAccessibilityLabel,
-        accessibilityLabel: textAccessibilityLabel,
-        style: [styles.text, style],
-        ...others
-      },
-      children
-    );
-    if (skeleton) {
-      textView = /* @__PURE__ */ import_react9.default.createElement(import_native2.default, { style: styles.skeleton }, textView, isAndroid && /* @__PURE__ */ import_react9.default.createElement(import_react_native4.View, null, /* @__PURE__ */ import_react9.default.createElement(import_native2.Rect, { rx: "7", ry: "7", width: "100%", height: "100%" })));
+var Text = import_react8.default.forwardRef(({
+  children,
+  level,
+  style,
+  inverted,
+  typo,
+  skeleton,
+  accessibilityLabel,
+  numberOfLines = 0,
+  ...others
+}, ref) => {
+  const statesContext = (0, import_react8.useContext)(StatesContext);
+  const textLevels = (level2) => {
+    return level2 && level2 == 1 /* ONE */ && 16 || level2 && level2 == 2 /* TWO */ && 14 || level2 && level2 == 3 /* THREE */ && 12 || level2 && level2 == 4 /* FOUR */ && 10 || 14;
+  };
+  const styles = import_react_native4.StyleSheet.create({
+    text: {
+      fontFamily: getTypographyBoldStyle(typo),
+      fontSize: textLevels(level),
+      color: setTypographyColor(typo, inverted || statesContext.inverted, skeleton),
+      textAlign: setTypographyAlign(typo),
+      lineHeight: textLevels(level) * 1.2,
+      textDecorationLine: "none",
+      alignSelf: setTypographyAlign(typo) === "left" && "flex-start" || setTypographyAlign(typo) === "center" && "center" || setTypographyAlign(typo) === "right" && "flex-end" || "flex-start"
+    },
+    skeleton: {
+      minWidth: 10,
+      alignSelf: setTypographyAlign(typo) === "left" && "flex-start" || setTypographyAlign(typo) === "center" && "center" || setTypographyAlign(typo) === "right" && "flex-end" || "flex-start",
+      borderRadius: level && level == 1 /* ONE */ && 7 || level && level == 2 /* TWO */ && 7 || level && level == 3 /* THREE */ && 5 || 3,
+      borderWidth: 0.1,
+      borderColor: getColorStyle("NEUTRAL_FADE" /* NEUTRAL_FADE */),
+      overflow: "hidden",
+      height: textLevels(level)
     }
-    return textView;
+  });
+  const textAccessibilityLabel = accessibilityLabel ? accessibilityLabel : typeof children === "string" ? children : void 0;
+  let textView = /* @__PURE__ */ import_react8.default.createElement(
+    import_react_native4.Text,
+    {
+      ref,
+      numberOfLines,
+      ellipsizeMode: "tail",
+      maxFontSizeMultiplier: 1.3,
+      accessible: !!textAccessibilityLabel,
+      accessibilityLabel: textAccessibilityLabel,
+      style: [styles.text, style],
+      ...others
+    },
+    children
+  );
+  if (skeleton) {
+    textView = /* @__PURE__ */ import_react8.default.createElement(import_native2.default, { style: styles.skeleton }, textView, isAndroid && /* @__PURE__ */ import_react8.default.createElement(import_react_native4.View, null, /* @__PURE__ */ import_react8.default.createElement(import_native2.Rect, { rx: "7", ry: "7", width: "100%", height: "100%" })));
   }
-);
+  return textView;
+});
 Text.displayName = "Text" /* Text */;
 var Text_native_default = Text;
 
 // components/tabs/tab-list/tab/Tab.native.tsx
-var import_react10 = __toESM(require("react"));
+var import_react9 = __toESM(require("react"));
 var import_react_native5 = require("react-native");
-var Tab = import_react10.default.forwardRef(
+var Tab = import_react9.default.forwardRef(
   ({ active, onClick, to, href, iconName, label, disabled, ...others }, ref) => {
     const { index, ...props } = others;
-    const { activeIndex, setActiveIndex, inverted } = import_react10.default.useContext(TabsContext);
-    const isActive = import_react10.default.useMemo(() => activeIndex === index, [activeIndex, index]);
-    const handleClick = import_react10.default.useCallback(
+    const { activeIndex, setActiveIndex, inverted, fullwidth } = import_react9.default.useContext(TabsContext);
+    const isActive = import_react9.default.useMemo(() => activeIndex === index, [activeIndex, index]);
+    const handleClick = import_react9.default.useCallback(
       (e) => {
         if (!disabled) {
           if (onClick) onClick(e);
@@ -405,6 +409,9 @@ var Tab = import_react10.default.forwardRef(
     );
     const styles = import_react_native5.StyleSheet.create({
       tab: {
+        flex: fullwidth ? 1 : void 0,
+        flexBasis: fullwidth ? 0 : void 0,
+        minWidth: fullwidth ? 0 : void 0,
         paddingVertical: 4,
         paddingHorizontal: 12,
         borderBottomWidth: isActive ? 2 : 1,
@@ -414,20 +421,32 @@ var Tab = import_react10.default.forwardRef(
       },
       text: {
         textAlign: "center",
-        color: getColorStyle(disabled ? "DISABLED" /* DISABLED */ : inverted ? "WHITE" /* BACKGROUND */ : "MAIN" /* MAIN */)
+        color: getColorStyle(disabled ? "DISABLED" /* DISABLED */ : inverted ? "WHITE" /* BACKGROUND */ : "MAIN" /* MAIN */),
+        ...fullwidth && {
+          flex: 1,
+          flexShrink: 1
+        }
       }
     });
-    import_react10.default.useEffect(() => {
+    import_react9.default.useEffect(() => {
       if (active) setActiveIndex(index);
     }, [active, setActiveIndex, index]);
-    return /* @__PURE__ */ import_react10.default.createElement(import_react_native5.TouchableOpacity, { ref, activeOpacity: 1, style: styles.tab, onPress: handleClick, ...props }, iconName && /* @__PURE__ */ import_react10.default.createElement(import_react_native5.View, { style: { alignSelf: "center" } }, /* @__PURE__ */ import_react10.default.createElement(
+    return /* @__PURE__ */ import_react9.default.createElement(import_react_native5.TouchableOpacity, { ref, activeOpacity: 1, style: styles.tab, onPress: handleClick, ...props }, iconName && /* @__PURE__ */ import_react9.default.createElement(import_react_native5.View, { style: { alignSelf: "center" } }, /* @__PURE__ */ import_react9.default.createElement(
       Icon_native_default,
       {
         color: disabled ? "DISABLED" /* DISABLED */ : inverted ? "WHITE" /* BACKGROUND */ : "MAIN" /* MAIN */,
         size: "small",
         name: iconName
       }
-    )), /* @__PURE__ */ import_react10.default.createElement(Text_native_default, { style: styles.text }, label && label));
+    )), /* @__PURE__ */ import_react9.default.createElement(
+      Text_native_default,
+      {
+        style: styles.text,
+        typo: fullwidth ? ["has-text-centered" /* TEXT_CENTERED */] : void 0,
+        numberOfLines: fullwidth ? 1 : void 0
+      },
+      label && label
+    ));
   }
 );
 Tab.displayName = "Tab" /* Tab */;
@@ -443,19 +462,19 @@ var STATUS_COLORS = {
 };
 
 // components/tabs/tab-list/TabList.native.tsx
-var import_react11 = __toESM(require("react"));
+var import_react10 = __toESM(require("react"));
 var import_react_native6 = require("react-native");
-var TabList = import_react11.default.forwardRef(({ children, ...others }, ref) => {
-  const { inverted } = import_react11.default.useContext(TabsContext);
-  const TabListRef = import_react11.default.useRef(null);
+var TabList = import_react10.default.forwardRef(({ children, ...others }, ref) => {
+  const { inverted, fullwidth } = import_react10.default.useContext(TabsContext);
+  const TabListRef = import_react10.default.useRef(null);
   const paddingHorizontalTab = 12;
   const negativeGap = -35;
-  const [tabsWidth, setTabsWidth] = import_react11.default.useState(0);
-  const [tabListWidth, setTabListWidth] = import_react11.default.useState(0);
-  const [scrollLeft, setScrollLeft] = import_react11.default.useState(0);
-  const [tabFocused, setTabFocused] = import_react11.default.useState(0);
-  const [tabElms, setTabElms] = import_react11.default.useState([]);
-  import_react11.default.useImperativeHandle(ref, () => TabListRef.current);
+  const [tabsWidth, setTabsWidth] = import_react10.default.useState(0);
+  const [tabListWidth, setTabListWidth] = import_react10.default.useState(0);
+  const [scrollLeft, setScrollLeft] = import_react10.default.useState(0);
+  const [tabFocused, setTabFocused] = import_react10.default.useState(0);
+  const [tabElms, setTabElms] = import_react10.default.useState([]);
+  import_react10.default.useImperativeHandle(ref, () => TabListRef.current);
   const styles = import_react_native6.StyleSheet.create({
     tabList: {
       flexDirection: "row",
@@ -463,15 +482,15 @@ var TabList = import_react11.default.forwardRef(({ children, ...others }, ref) =
     },
     arrow: { alignItems: "center", justifyContent: "center", paddingHorizontal: 2 }
   });
-  const isVisibleArrowLeft = import_react11.default.useMemo(() => {
-    if (!tabElms.length) return false;
+  const isVisibleArrowLeft = import_react10.default.useMemo(() => {
+    if (!tabElms.length || !tabElms[0]) return false;
     return scrollLeft > tabElms[0].width / 2;
   }, [tabElms, scrollLeft]);
-  const isVisibleArrowRight = import_react11.default.useMemo(
+  const isVisibleArrowRight = import_react10.default.useMemo(
     () => tabListWidth - tabsWidth - scrollLeft > negativeGap,
     [tabListWidth, tabsWidth, scrollLeft]
   );
-  const handleScrollList = import_react11.default.useCallback(
+  const handleScrollList = import_react10.default.useCallback(
     (e) => {
       const scrollLeft2 = e.nativeEvent.contentOffset.x;
       const scrollPosition = tabElms.findIndex(
@@ -482,7 +501,7 @@ var TabList = import_react11.default.forwardRef(({ children, ...others }, ref) =
     },
     [tabElms]
   );
-  const scrollWithArrow = import_react11.default.useCallback(
+  const scrollWithArrow = import_react10.default.useCallback(
     (direction) => {
       var _a;
       if (tabElms.length) {
@@ -493,13 +512,13 @@ var TabList = import_react11.default.forwardRef(({ children, ...others }, ref) =
     },
     [tabFocused, TabListRef, tabElms]
   );
-  const onClickPrev = import_react11.default.useCallback(() => {
+  const onClickPrev = import_react10.default.useCallback(() => {
     isVisibleArrowLeft && scrollWithArrow(-1);
   }, [scrollWithArrow, isVisibleArrowLeft]);
-  const onClickNext = import_react11.default.useCallback(() => {
+  const onClickNext = import_react10.default.useCallback(() => {
     isVisibleArrowRight && scrollWithArrow(1);
   }, [scrollWithArrow, isVisibleArrowRight]);
-  return /* @__PURE__ */ import_react11.default.createElement(import_react_native6.View, { style: { flexDirection: "row" }, onLayout: (e) => setTabsWidth(e.nativeEvent.layout.width) }, tabListWidth > tabsWidth && /* @__PURE__ */ import_react11.default.createElement(import_react_native6.View, { style: styles.arrow }, /* @__PURE__ */ import_react11.default.createElement(
+  return /* @__PURE__ */ import_react10.default.createElement(import_react_native6.View, { style: { flexDirection: "row" }, onLayout: (e) => setTabsWidth(e.nativeEvent.layout.width) }, tabListWidth > tabsWidth && /* @__PURE__ */ import_react10.default.createElement(import_react_native6.View, { style: styles.arrow }, /* @__PURE__ */ import_react10.default.createElement(
     Icon_native_default,
     {
       name: "tri-arrow-left",
@@ -507,21 +526,26 @@ var TabList = import_react11.default.forwardRef(({ children, ...others }, ref) =
       color: isVisibleArrowLeft ? void 0 : "transparent",
       onClick: onClickPrev
     }
-  )), /* @__PURE__ */ import_react11.default.createElement(
+  )), /* @__PURE__ */ import_react10.default.createElement(
     import_react_native6.ScrollView,
     {
+      scrollEnabled: fullwidth ? false : void 0,
       ref: TabListRef,
       scrollEventThrottle: 16,
       onContentSizeChange: (w) => setTabListWidth(w),
       horizontal: true,
       showsHorizontalScrollIndicator: false,
-      style: styles.tabList,
+      style: [styles.tabList, fullwidth && { flex: 1 }],
       onScroll: handleScrollList,
+      contentContainerStyle: {
+        flexGrow: fullwidth ? 1 : void 0,
+        flex: fullwidth ? 1 : void 0
+      },
       ...others
     },
-    import_react11.default.Children.map(children, (child, index) => {
-      if (!import_react11.default.isValidElement(child)) return false;
-      return /* @__PURE__ */ import_react11.default.createElement(
+    import_react10.default.Children.map(children, (child, index) => {
+      if (!import_react10.default.isValidElement(child)) return false;
+      return /* @__PURE__ */ import_react10.default.createElement(
         Tab_native_default,
         {
           onLayout: (e) => {
@@ -537,7 +561,7 @@ var TabList = import_react11.default.forwardRef(({ children, ...others }, ref) =
         }
       );
     })
-  ), tabListWidth > tabsWidth && /* @__PURE__ */ import_react11.default.createElement(import_react_native6.View, { style: styles.arrow }, /* @__PURE__ */ import_react11.default.createElement(
+  ), tabListWidth > tabsWidth && /* @__PURE__ */ import_react10.default.createElement(import_react_native6.View, { style: styles.arrow }, /* @__PURE__ */ import_react10.default.createElement(
     Icon_native_default,
     {
       name: "tri-arrow-right",
@@ -551,19 +575,19 @@ TabList.displayName = "TabList" /* TabList */;
 var TabList_native_default = TabList;
 
 // components/tabs/tab-panels/tab-panel/TabPanel.native.tsx
-var import_react12 = __toESM(require("react"));
+var import_react11 = __toESM(require("react"));
 var import_react_native7 = require("react-native");
-var TabPanel = import_react12.default.forwardRef(({ children, testId, ...others }, ref) => {
+var TabPanel = import_react11.default.forwardRef(({ children, testId, ...others }, ref) => {
   const { index, ...props } = others;
-  const { activeIndex } = import_react12.default.useContext(TabsContext);
-  const opacity = import_react12.default.useRef(new import_react_native7.Animated.Value(0)).current;
+  const { activeIndex } = import_react11.default.useContext(TabsContext);
+  const opacity = import_react11.default.useRef(new import_react_native7.Animated.Value(0)).current;
   const styles = import_react_native7.StyleSheet.create({
     tabPanel: {
       display: activeIndex !== index ? "none" : "flex",
       opacity
     }
   });
-  import_react12.default.useEffect(() => {
+  import_react11.default.useEffect(() => {
     if (activeIndex === index) {
       import_react_native7.Animated.timing(opacity, {
         toValue: 1,
@@ -578,25 +602,25 @@ var TabPanel = import_react12.default.forwardRef(({ children, testId, ...others
       }).start();
     }
   }, [activeIndex, index, opacity]);
-  return /* @__PURE__ */ import_react12.default.createElement(import_react_native7.Animated.View, { ref, style: styles.tabPanel, ...props, testID: testId }, children);
+  return /* @__PURE__ */ import_react11.default.createElement(import_react_native7.Animated.View, { ref, style: styles.tabPanel, ...props, testID: testId }, children);
 });
 TabPanel.displayName = "TabPanel" /* TabPanel */;
 var TabPanel_native_default = TabPanel;
 
 // components/tabs/tab-panels/TabPanels.native.tsx
-var import_react13 = __toESM(require("react"));
+var import_react12 = __toESM(require("react"));
 var import_react_native8 = require("react-native");
-var TabPanels = import_react13.default.forwardRef(({ children, ...others }, ref) => {
-  const { inverted } = import_react13.default.useContext(TabsContext);
+var TabPanels = import_react12.default.forwardRef(({ children, ...others }, ref) => {
+  const { inverted } = import_react12.default.useContext(TabsContext);
   const styles = import_react_native8.StyleSheet.create({
     tabPanels: {
       paddingVertical: 8,
       backgroundColor: getColorStyle(inverted ? "MAIN" /* MAIN */ : "transparent")
     }
   });
-  return /* @__PURE__ */ import_react13.default.createElement(import_react_native8.View, { ref, style: styles.tabPanels, ...others }, import_react13.default.Children.map(children, (child, index) => {
-    if (!import_react13.default.isValidElement(child)) return false;
-    return /* @__PURE__ */ import_react13.default.createElement(TabPanel_native_default, { ...child.props, index });
+  return /* @__PURE__ */ import_react12.default.createElement(import_react_native8.View, { ref, style: styles.tabPanels, ...others }, import_react12.default.Children.map(children, (child, index) => {
+    if (!import_react12.default.isValidElement(child)) return false;
+    return /* @__PURE__ */ import_react12.default.createElement(TabPanel_native_default, { ...child.props, index });
   }));
 });
 TabPanels.displayName = "TabPanels" /* TabPanels */;

package/lib/components/tabs/index.native.mjs

@@ -2,37 +2,39 @@
 import "../../chunk-KEXRV4H7.mjs";
 import {
   TabPanels_native_default
-} from "../../chunk-A4UUZNZZ.mjs";
+} from "../../chunk-GIHKIRAH.mjs";
 import {
   TabPanel_native_default
-} from "../../chunk-R37XLGXJ.mjs";
+} from "../../chunk-D5I42WSS.mjs";
 import {
   TabList_native_default
-} from "../../chunk-Z6YBOKUS.mjs";
+} from "../../chunk-QNDMUIJM.mjs";
 import {
   Tab_native_default
-} from "../../chunk-LALBHUEG.mjs";
+} from "../../chunk-DWZ232Q2.mjs";
 import {
   Tabs_native_default
-} from "../../chunk-CIMSFVNA.mjs";
+} from "../../chunk-FAKVBDTE.mjs";
 import "../../chunk-WEGZE5OY.mjs";
-import "../../chunk-2AL4D3MJ.mjs";
+import "../../chunk-MVQ252OA.mjs";
 import "../../chunk-7M6BHGK7.mjs";
 import "../../chunk-VNWHCGCD.mjs";
-import "../../chunk-SJ5DUOZ6.mjs";
+import "../../chunk-X67AAUB2.mjs";
 import "../../chunk-TFNM3EBG.mjs";
-import "../../chunk-MKOK7VNZ.mjs";
+import "../../chunk-YKUYXBXK.mjs";
 import "../../chunk-ZEJDFWMP.mjs";
-import "../../chunk-KNRXLZZP.mjs";
+import "../../chunk-MB55ARZ7.mjs";
 import "../../chunk-D5HHHZDS.mjs";
-import "../../chunk-2CYVOYRM.mjs";
+import "../../chunk-3LXODEBD.mjs";
+import "../../chunk-WVL5S3CD.mjs";
 import "../../chunk-7L5452RP.mjs";
-import "../../chunk-H6FVJB5Z.mjs";
+import "../../chunk-2K2TD7FH.mjs";
+import "../../chunk-UPP3GX33.mjs";
+import "../../chunk-E4YRRUI3.mjs";
 import "../../chunk-CWIO3GEP.mjs";
-import "../../chunk-VI2KFLCZ.mjs";
 import "../../chunk-R6PFY5VS.mjs";
-import "../../chunk-SWFBV5TR.mjs";
 import "../../chunk-KPAFJMF3.mjs";
+import "../../chunk-OAENQH2X.mjs";
 import "../../chunk-P6NVOAAH.mjs";
 import "../../chunk-RXBVZD3M.mjs";
 import "../../chunk-A2ASOVUR.mjs";
@@ -55,21 +57,18 @@ import "../../chunk-XIQL4ZTN.mjs";
 import "../../chunk-UUXUTBLZ.mjs";
 import "../../chunk-QOEJLTZN.mjs";
 import "../../chunk-B6WC6WS2.mjs";
-import "../../chunk-K2VWHGPL.mjs";
+import "../../chunk-MAX3RSBG.mjs";
 import "../../chunk-6BTWLQPI.mjs";
 import "../../chunk-G6BHSMLA.mjs";
 import "../../chunk-THOTRBD4.mjs";
 import "../../chunk-ATW7ITPH.mjs";
 import "../../chunk-IGMJNGTZ.mjs";
-import "../../chunk-5QUXSOHX.mjs";
 import "../../chunk-L4UDEKQK.mjs";
-import "../../chunk-P372ZF3A.mjs";
-import "../../chunk-HV6TXVFA.mjs";
-import "../../chunk-CYNSXZSV.mjs";
-import "../../chunk-YK5HPRX4.mjs";
+import "../../chunk-CD6DMMCL.mjs";
+import "../../chunk-RYABO2EX.mjs";
 import "../../chunk-4ZJQXF2V.mjs";
 import "../../chunk-4UHBBNZ7.mjs";
-import "../../chunk-NTS75UVH.mjs";
+import "../../chunk-VDLM4YQP.mjs";
 import "../../chunk-QIPGVLHJ.mjs";
 export {
   Tab_native_default as Tab,

package/lib/components/tabs/tab-list/TabList.js

@@ -104,6 +104,7 @@ var colors = {
   ["MAIN" /* MAIN */]: ["#3d5d7e", "main", "white"],
   ["MAIN_FADE" /* MAIN_FADE */]: ["#BBC6CD", "main-fade", "white"],
   ["ACCENT" /* ACCENT */]: ["#da641b", "accent", "white"],
+  ["ACCENT_FADE" /* ACCENT_FADE */]: ["#faebe3", "accent-fade", "white"],
   ["FONT" /* FONT */]: ["#3d5d7e", "main", "white"],
   ["FONT_PLACEHOLDER" /* FONT_PLACEHOLDER */]: ["#687a87", "font-placeholder", "white"],
   ["SUCCESS" /* SUCCESS */]: ["#007B52", "success", "white"],
@@ -186,7 +187,8 @@ var TabsContext = import_react3.default.createContext({
   inverted: false,
   setActiveIndex: () => 0,
   setInverted: () => false,
-  small: false
+  small: false,
+  fullwidth: false
 });
 
 // components/text/Text.tsx
@@ -329,6 +331,8 @@ var getAlignClassName = (alignType) => {
       return "aligned-end";
     case "STRETCH":
       return "aligned-stretch";
+    case "ALIGNED_STRETCH":
+      return "aligned-stretch";
     default:
       return "aligned-start";
   }

package/lib/components/tabs/tab-list/TabList.mjs

@@ -1,32 +1,32 @@
 "use client";
 import {
   TabList_default
-} from "../../../chunk-UNUI5GCY.mjs";
-import "../../../chunk-PTHFF3G5.mjs";
+} from "../../../chunk-76P5II7A.mjs";
+import "../../../chunk-24R7IYOG.mjs";
+import "../../../chunk-Y3ROARMA.mjs";
+import "../../../chunk-LGL3XQ7F.mjs";
+import "../../../chunk-ALGX47MZ.mjs";
+import "../../../chunk-XXKEMYTB.mjs";
+import "../../../chunk-OAENQH2X.mjs";
 import "../../../chunk-BVZWKYND.mjs";
 import "../../../chunk-HHE7L3CW.mjs";
-import "../../../chunk-SWFBV5TR.mjs";
 import "../../../chunk-P6NVOAAH.mjs";
 import "../../../chunk-A35Q44N2.mjs";
-import "../../../chunk-Y3ROARMA.mjs";
-import "../../../chunk-SGAZRZIK.mjs";
-import "../../../chunk-WC3ULY5W.mjs";
-import "../../../chunk-JOSZ4COK.mjs";
+import "../../../chunk-7VSJ3RTI.mjs";
+import "../../../chunk-P372ZF3A.mjs";
 import "../../../chunk-SWVRRUW7.mjs";
 import "../../../chunk-Y7CEUBIZ.mjs";
 import "../../../chunk-HU3FAWMX.mjs";
-import "../../../chunk-ODKCJMCG.mjs";
 import "../../../chunk-OGATDHMZ.mjs";
+import "../../../chunk-ODKCJMCG.mjs";
 import "../../../chunk-UFMRE754.mjs";
 import "../../../chunk-ZB4OWTDD.mjs";
 import "../../../chunk-L4UDEKQK.mjs";
-import "../../../chunk-P372ZF3A.mjs";
-import "../../../chunk-HV6TXVFA.mjs";
-import "../../../chunk-CYNSXZSV.mjs";
-import "../../../chunk-YK5HPRX4.mjs";
+import "../../../chunk-CD6DMMCL.mjs";
+import "../../../chunk-RYABO2EX.mjs";
 import "../../../chunk-4ZJQXF2V.mjs";
 import "../../../chunk-4UHBBNZ7.mjs";
-import "../../../chunk-NTS75UVH.mjs";
+import "../../../chunk-VDLM4YQP.mjs";
 import "../../../chunk-QIPGVLHJ.mjs";
 export {
   TabList_default as default