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

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

@@ -130,6 +130,7 @@ var ComponentName = /* @__PURE__ */ ((ComponentName2) => {
   ComponentName2["BreadcrumbItem"] = "BreadcrumbItem";
   ComponentName2["Button"] = "Button";
   ComponentName2["ButtonList"] = "ButtonList";
+  ComponentName2["Calendar"] = "Calendar";
   ComponentName2["ButtonVariant"] = "ButtonVariant";
   ComponentName2["ButtonMarkup"] = "ButtonMarkup";
   ComponentName2["ButtonType"] = "ButtonType";
@@ -268,6 +269,7 @@ var ComponentName = /* @__PURE__ */ ((ComponentName2) => {
   ComponentName2["Chips"] = "Chips";
   ComponentName2["ChipsList"] = "ChipsList";
   ComponentName2["Range"] = "Range";
+  ComponentName2["DatePicker"] = "DatePicker";
   return ComponentName2;
 })(ComponentName || {});
 
@@ -364,9 +366,9 @@ var createChildrenArray = (array, children) => {
       });
     } else if ((child == null ? void 0 : child.type) && ((_a = child == null ? void 0 : child.type) == null ? void 0 : _a.displayName) !== getTrilogyComponentName(child) && ((_b = child == null ? void 0 : child.type) == null ? void 0 : _b.$$typeof) === void 0) {
       createChildrenArray(array, child.type(child.props));
-    } else if ((child == null ? void 0 : child.type) && ((_c = child == null ? void 0 : child.type) == null ? void 0 : _c.displayName) !== getTrilogyComponentName(child) && ((_d = child == null ? void 0 : child.type) == null ? void 0 : _d.$$typeof) === Symbol.for("react.memo") && ((_e = child == null ? void 0 : child.type) == null ? void 0 : _e.type) !== void 0) {
+    } else if ((child == null ? void 0 : child.type) && ((_c = child == null ? void 0 : child.type) == null ? void 0 : _c.displayName) !== getTrilogyComponentName(child) && ((_d = child == null ? void 0 : child.type) == null ? void 0 : _d.$$typeof) === /* @__PURE__ */ Symbol.for("react.memo") && ((_e = child == null ? void 0 : child.type) == null ? void 0 : _e.type) !== void 0) {
       createChildrenArray(array, child.type.type(child.props));
-    } else if ((child == null ? void 0 : child.type) && ((_f = child == null ? void 0 : child.type) == null ? void 0 : _f.$$typeof) === Symbol.for("react.forward_ref") && ((_h = (_g = child == null ? void 0 : child.type) == null ? void 0 : _g.render) == null ? void 0 : _h.displayName) !== getTrilogyComponentName(child) && ((_i = child == null ? void 0 : child.type) == null ? void 0 : _i.type) !== void 0) {
+    } else if ((child == null ? void 0 : child.type) && ((_f = child == null ? void 0 : child.type) == null ? void 0 : _f.$$typeof) === /* @__PURE__ */ Symbol.for("react.forward_ref") && ((_h = (_g = child == null ? void 0 : child.type) == null ? void 0 : _g.render) == null ? void 0 : _h.displayName) !== getTrilogyComponentName(child) && ((_i = child == null ? void 0 : child.type) == null ? void 0 : _i.type) !== void 0) {
       createChildrenArray(array, child.type.type(child.props));
     } else {
       array.push(child);
@@ -416,8 +418,146 @@ var AutoLayoutWrapper = ({ autolayout = true, children }) => {
 };
 var index_native_default = AutoLayoutWrapper;
 
-// components/radio/list/RadioList.native.tsx
+// components/text/Text.tsx
+var React6 = __toESM(require("react"));
+var import_clsx = __toESM(require("clsx"));
+
+// components/text/TextEnum.ts
+var TextMarkup = /* @__PURE__ */ ((TextMarkup2) => {
+  TextMarkup2["P"] = "p";
+  TextMarkup2["SPAN"] = "span";
+  return TextMarkup2;
+})(TextMarkup || {});
+
+// services/classify/index.ts
+function classify(prefix) {
+  return (classname) => classname !== "" ? `${prefix}-${classname.toLowerCase()}` : "";
+}
+var is = classify("is");
+var has = classify("has");
+
+// context/index.tsx
 var React5 = __toESM(require("react"));
+var TrilogyContext = React5.createContext({
+  styled: false,
+  setStyled: () => void 0
+});
+var useTrilogyContext = () => {
+  const context = React5.useContext(TrilogyContext);
+  if (context === void 0) {
+    throw new Error("useTrilogyContext must be used within a TrilogyProvider");
+  }
+  return context;
+};
+
+// helpers/hashClassesHelpers/index.tsx
+var hashClass = (addHash = false, classes) => {
+  const { hash, styled } = useTrilogyContext();
+  if (classes.trim().length < 1) return "";
+  if (styled) {
+    return classes.split(" ").map((classe) => classe = `${classe}_${hash}`).join(" ");
+  }
+  return classes;
+};
+
+// components/text/Text.tsx
+var Text = React6.forwardRef(({
+  level,
+  markup,
+  children,
+  className,
+  id,
+  typo,
+  inverted,
+  skeleton,
+  accessibilityLabel,
+  marginless,
+  numberOfLines,
+  ...others
+}, ref) => {
+  const { styled } = useTrilogyContext();
+  const levelText = () => {
+    if (level) {
+      switch (level) {
+        case 1 /* ONE */:
+          return is("level-1");
+        case 2 /* TWO */:
+          return is("level-2");
+        case 3 /* THREE */:
+          return is("level-3");
+        case 4 /* FOUR */:
+          return is("level-4");
+        default:
+          return is(`level-${level}`);
+      }
+    }
+  };
+  const classes = hashClass(
+    styled,
+    (0, import_clsx.default)(
+      "text",
+      level && levelText(),
+      inverted && is("inverted"),
+      typo,
+      skeleton && is("loading"),
+      marginless && is("marginless"),
+      numberOfLines && is("text-ellipsis"),
+      className
+    )
+  );
+  const isCorrectMarkup = (stringMarkup) => {
+    if (stringMarkup in TextMarkup || Object.values(TextMarkup).includes(stringMarkup)) return true;
+  };
+  const Tag = markup && isCorrectMarkup(markup) ? markup : "p";
+  return /* @__PURE__ */ React6.createElement(
+    Tag,
+    {
+      ref,
+      id,
+      style: numberOfLines ? { WebkitLineClamp: numberOfLines } : {},
+      "aria-label": accessibilityLabel,
+      className: classes,
+      ...others
+    },
+    children
+  );
+});
+Text.displayName = "Text" /* Text */;
+var Text_default = Text;
+
+// helpers/require/index.ts
+var import_react2 = __toESM(require("react"));
+var isRequiredChild = (children) => import_react2.default.Children.toArray(children).some(
+  (child) => import_react2.default.isValidElement(child) && child.props.required
+);
+
+// objects/Typography/TypographyAlign/index.ts
+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_react3 = __toESM(require("react"));
+var defaultTheme = {
+  icons: {},
+  colors: {},
+  fontFamily: {}
+};
+var defaultContextValue = {
+  theme: defaultTheme,
+  setTheme: () => void 0
+};
+var TrilogyThemeContext = import_react3.default.createContext(defaultContextValue);
+
+// objects/Typography/TypographyBold/index.tsx
+var import_react4 = require("react");
+
+// objects/facets/Color/index.tsx
+var import_react5 = require("react");
+
+// components/radio/list/RadioList.native.tsx
+var React9 = __toESM(require("react"));
+var import_react_native2 = require("react-native");
 var { THREE: THREE2, TWO: TWO2 } = SpacerSize;
 var { INSERT_SPACE_BETWEEN: INSERT_SPACE_BETWEEN2 } = SpacingMatrixMode;
 var SPACING_MATRIX = [
@@ -425,23 +565,27 @@ var SPACING_MATRIX = [
   [INSERT_SPACE_BETWEEN2, "Divider", "Radio", TWO2],
   [INSERT_SPACE_BETWEEN2, "Radio", "Radio", THREE2]
 ];
-var RadioList = React5.forwardRef(({ children }, ref) => {
-  const refList = React5.useRef(ref);
-  return /* @__PURE__ */ React5.createElement(index_native_default, { ...{ autolayout: SPACING_MATRIX, children } });
+var RadioList = React9.forwardRef(({ children, label }, ref) => {
+  const styles = import_react_native2.StyleSheet.create({
+    label: {
+      marginBottom: 8
+    }
+  });
+  return /* @__PURE__ */ React9.createElement(index_native_default, { ...{ autolayout: SPACING_MATRIX } }, label && /* @__PURE__ */ React9.createElement(Text_default, { style: styles.label }, label, " ", isRequiredChild(children) && /* @__PURE__ */ React9.createElement(Text_default, { typo: "has-text-error" /* TEXT_ERROR */ }, "*")), children);
 });
 RadioList.displayName = "RadioList" /* RadioList */;
 var RadioList_native_default = RadioList;
 
 // context/providerStates/index.tsx
-var import_react2 = require("react");
-var StatesContext = (0, import_react2.createContext)({
+var import_react6 = require("react");
+var StatesContext = (0, import_react6.createContext)({
   inverted: false,
   active: false,
   flat: false
 });
 
 // helpers/device/index.native.ts
-var import_react_native2 = require("react-native");
+var import_react_native3 = require("react-native");
 var Device = /* @__PURE__ */ ((Device2) => {
   Device2["Browser"] = "browser";
   Device2["Server"] = "server";
@@ -465,66 +609,17 @@ var assign = (...args) => Object.assign({}, ...args);
 var values = (obj) => Object.values(obj);
 var toArrayObject = () => assign((values(SSRObjectDefined), SSRObjectDefined));
 var SSRObject = toArrayObject();
-var isAndroid = import_react_native2.Platform.OS === "android";
-var isIOS = import_react_native2.Platform.OS === "ios";
-
-// objects/Typography/TypographyAlign/index.ts
-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_react3 = __toESM(require("react"));
-var defaultTheme = {
-  icons: {},
-  colors: {},
-  fontFamily: {}
-};
-var defaultContextValue = {
-  theme: defaultTheme,
-  setTheme: () => void 0
-};
-var TrilogyThemeContext = import_react3.default.createContext(defaultContextValue);
-
-// objects/Typography/TypographyBold/index.tsx
-var import_react4 = require("react");
-var getTypographyBoldStyle = (typo) => {
-  var _a, _b, _c, _d;
-  const { theme } = (0, import_react4.useContext)(TrilogyThemeContext);
-  const currentTypo = Array.isArray(typo) ? typo : [typo];
-  switch (true) {
-    case (typo && currentTypo.includes("has-text-weight-medium" /* TEXT_WEIGHT_MEDIUM */)):
-      return ((_a = theme == null ? void 0 : theme.fontFamily) == null ? void 0 : _a.medium) || "poppins-medium";
-    case (typo && currentTypo.includes("has-text-weight-semibold" /* TEXT_WEIGHT_SEMIBOLD */)):
-      return ((_b = theme == null ? void 0 : theme.fontFamily) == null ? void 0 : _b.bold) || "poppins-semibold";
-    case (typo && currentTypo.includes("has-text-weight-bold" /* TEXT_WEIGHT_BOLD */)):
-      return ((_c = theme == null ? void 0 : theme.fontFamily) == null ? void 0 : _c.speak) || "poppins-semibold";
-    default:
-      return ((_d = theme == null ? void 0 : theme.fontFamily) == null ? void 0 : _d.regular) || "poppins-regular";
-  }
-};
-
-// context/providerTheme/index.native.tsx
-var import_react5 = __toESM(require("react"));
-var defaultIcons = {};
-var defaultTheme2 = {
-  icons: defaultIcons,
-  colors,
-  fontFamily: { regular: "poppins-regular", medium: "poppins-medium", bold: "poppins-semibold" }
-};
-var defaultContextValue2 = {
-  theme: defaultTheme2,
-  setTheme: () => void 0
-};
-var TrilogyThemeContext2 = import_react5.default.createContext(defaultContextValue2);
+var isAndroid = import_react_native3.Platform.OS === "android";
+var isIOS = import_react_native3.Platform.OS === "ios";
 
 // objects/facets/Color/index.native.tsx
-var import_react6 = require("react");
+var import_react7 = require("react");
 var colors = {
   ["WHITE" /* BACKGROUND */]: ["#fff", "white", "main"],
   ["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"],
@@ -541,9 +636,9 @@ var colors = {
   ["NEUTRAL_FADE" /* NEUTRAL_FADE */]: ["#F4F4F4", "grey-fade", "white"],
   ["STROKE" /* STROKE */]: ["#BBC1CE", "stroke", "white"]
 };
-var getColorStyle = (trilogyColor) => {
+var getColorStyle2 = (trilogyColor) => {
   if (typeof navigator !== "undefined" && navigator.userAgent === void 0) {
-    const { theme } = (0, import_react6.useContext)(TrilogyThemeContext2);
+    const { theme } = (0, import_react7.useContext)(TrilogyThemeContext2);
     const colorsStyle = (theme == null ? void 0 : theme.colors) || colors;
     const colorArray = colorsStyle[trilogyColor] || colorsStyle.default;
     if (trilogyColor === "transparent") return "transparent";
@@ -557,64 +652,104 @@ var getColorStyle = (trilogyColor) => {
   }
 };
 
+// context/providerTheme/index.native.tsx
+var import_react8 = __toESM(require("react"));
+var defaultIcons = {};
+var defaultTheme2 = {
+  icons: defaultIcons,
+  colors,
+  fontFamily: { regular: "poppins-regular", medium: "poppins-medium", bold: "poppins-semibold" }
+};
+var defaultContextValue2 = {
+  theme: defaultTheme2,
+  setTheme: () => void 0
+};
+var TrilogyThemeContext2 = import_react8.default.createContext(defaultContextValue2);
+
+// objects/Typography/TypographyBold/index.native.tsx
+var import_react9 = require("react");
+var getTypographyBoldStyle = (typo) => {
+  var _a, _b, _c, _d;
+  const { theme } = (0, import_react9.useContext)(TrilogyThemeContext2);
+  const currentTypo = Array.isArray(typo) ? typo : [typo];
+  switch (true) {
+    case (typo && currentTypo.includes("has-text-weight-medium" /* TEXT_WEIGHT_MEDIUM */)):
+      return ((_a = theme == null ? void 0 : theme.fontFamily) == null ? void 0 : _a.medium) || "poppins-medium";
+    case (typo && currentTypo.includes("has-text-weight-semibold" /* TEXT_WEIGHT_SEMIBOLD */)):
+      return ((_b = theme == null ? void 0 : theme.fontFamily) == null ? void 0 : _b.bold) || "poppins-semibold";
+    case (typo && currentTypo.includes("has-text-weight-bold" /* TEXT_WEIGHT_BOLD */)):
+      return ((_c = theme == null ? void 0 : theme.fontFamily) == null ? void 0 : _c.speak) || "poppins-semibold";
+    default:
+      return ((_d = theme == null ? void 0 : theme.fontFamily) == null ? void 0 : _d.regular) || "poppins-regular";
+  }
+};
+
 // objects/Typography/TypographyColor/index.native.ts
 var setTypographyColor = (typo = "", inverted = false, loading = false) => {
-  return loading ? "transparent" : (Array.isArray(typo) && typo.includes("has-text-disabled" /* TEXT_DISABLED */) ? getColorStyle("DISABLED" /* DISABLED */) : typo === "has-text-disabled" /* TEXT_DISABLED */ && getColorStyle("DISABLED" /* DISABLED */)) || (Array.isArray(typo) && typo.includes("has-text-accent" /* TEXT_ACCENT */) ? getColorStyle("ACCENT" /* ACCENT */) : typo === "has-text-accent" /* TEXT_ACCENT */ && getColorStyle("ACCENT" /* ACCENT */)) || (Array.isArray(typo) && typo.includes("has-text-main" /* TEXT_MAIN */) ? getColorStyle("MAIN" /* MAIN */) : typo === "has-text-main" /* TEXT_MAIN */ && getColorStyle("MAIN" /* MAIN */)) || (Array.isArray(typo) && typo.includes("has-text-info" /* TEXT_INFO */) ? getColorStyle("INFO" /* INFO */) : typo === "has-text-info" /* TEXT_INFO */ && getColorStyle("INFO" /* INFO */)) || (Array.isArray(typo) && typo.includes("has-text-success" /* TEXT_SUCCESS */) ? getColorStyle("SUCCESS" /* SUCCESS */) : typo === "has-text-success" /* TEXT_SUCCESS */ && getColorStyle("SUCCESS" /* SUCCESS */)) || (Array.isArray(typo) && typo.includes("has-text-warning" /* TEXT_WARNING */) ? getColorStyle("WARNING" /* WARNING */) : typo === "has-text-warning" /* TEXT_WARNING */ && getColorStyle("WARNING" /* WARNING */)) || (Array.isArray(typo) && typo.includes("has-text-error" /* TEXT_ERROR */) ? getColorStyle("ERROR" /* ERROR */) : typo === "has-text-error" /* TEXT_ERROR */ && getColorStyle("ERROR" /* ERROR */)) || (Array.isArray(typo) && typo.includes("has-text-grey" /* TEXT_NEUTRAL */) ? getColorStyle("NEUTRAL" /* NEUTRAL */) : typo === "has-text-grey" /* TEXT_NEUTRAL */ && getColorStyle("NEUTRAL" /* NEUTRAL */)) || (Array.isArray(typo) && typo.includes("has-text-white" /* TEXT_WHITE */) ? getColorStyle("WHITE" /* BACKGROUND */) : typo === "has-text-white" /* TEXT_WHITE */ && getColorStyle("WHITE" /* BACKGROUND */)) || inverted && getColorStyle("WHITE" /* BACKGROUND */) || getColorStyle("MAIN" /* MAIN */);
+  return loading ? "transparent" : (Array.isArray(typo) && typo.includes("has-text-disabled" /* TEXT_DISABLED */) ? getColorStyle2("DISABLED" /* DISABLED */) : typo === "has-text-disabled" /* TEXT_DISABLED */ && getColorStyle2("DISABLED" /* DISABLED */)) || (Array.isArray(typo) && typo.includes("has-text-accent" /* TEXT_ACCENT */) ? getColorStyle2("ACCENT" /* ACCENT */) : typo === "has-text-accent" /* TEXT_ACCENT */ && getColorStyle2("ACCENT" /* ACCENT */)) || (Array.isArray(typo) && typo.includes("has-text-main" /* TEXT_MAIN */) ? getColorStyle2("MAIN" /* MAIN */) : typo === "has-text-main" /* TEXT_MAIN */ && getColorStyle2("MAIN" /* MAIN */)) || (Array.isArray(typo) && typo.includes("has-text-info" /* TEXT_INFO */) ? getColorStyle2("INFO" /* INFO */) : typo === "has-text-info" /* TEXT_INFO */ && getColorStyle2("INFO" /* INFO */)) || (Array.isArray(typo) && typo.includes("has-text-success" /* TEXT_SUCCESS */) ? getColorStyle2("SUCCESS" /* SUCCESS */) : typo === "has-text-success" /* TEXT_SUCCESS */ && getColorStyle2("SUCCESS" /* SUCCESS */)) || (Array.isArray(typo) && typo.includes("has-text-warning" /* TEXT_WARNING */) ? getColorStyle2("WARNING" /* WARNING */) : typo === "has-text-warning" /* TEXT_WARNING */ && getColorStyle2("WARNING" /* WARNING */)) || (Array.isArray(typo) && typo.includes("has-text-error" /* TEXT_ERROR */) ? getColorStyle2("ERROR" /* ERROR */) : typo === "has-text-error" /* TEXT_ERROR */ && getColorStyle2("ERROR" /* ERROR */)) || (Array.isArray(typo) && typo.includes("has-text-grey" /* TEXT_NEUTRAL */) ? getColorStyle2("NEUTRAL" /* NEUTRAL */) : typo === "has-text-grey" /* TEXT_NEUTRAL */ && getColorStyle2("NEUTRAL" /* NEUTRAL */)) || (Array.isArray(typo) && typo.includes("has-text-white" /* TEXT_WHITE */) ? getColorStyle2("WHITE" /* BACKGROUND */) : typo === "has-text-white" /* TEXT_WHITE */ && getColorStyle2("WHITE" /* BACKGROUND */)) || inverted && getColorStyle2("WHITE" /* BACKGROUND */) || getColorStyle2("MAIN" /* MAIN */);
 };
 
 // components/text/Text.native.tsx
-var import_react7 = __toESM(require("react"));
+var import_react10 = __toESM(require("react"));
 var import_native = __toESM(require("react-content-loader/native"));
-var import_react_native3 = require("react-native");
-var Text = import_react7.default.forwardRef(
-  ({ children, level, style, inverted, typo, skeleton, accessibilityLabel, numberOfLines = 0, ...others }, ref) => {
-    const statesContext = (0, import_react7.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_native3.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_react7.default.createElement(
-      import_react_native3.Text,
-      {
-        ref,
-        numberOfLines,
-        ellipsizeMode: "tail",
-        maxFontSizeMultiplier: 1.3,
-        accessible: !!textAccessibilityLabel,
-        accessibilityLabel: textAccessibilityLabel,
-        style: [styles.text, style],
-        ...others
-      },
-      children
-    );
-    if (skeleton) {
-      textView = /* @__PURE__ */ import_react7.default.createElement(import_native.default, { style: styles.skeleton }, textView, isAndroid && /* @__PURE__ */ import_react7.default.createElement(import_react_native3.View, null, /* @__PURE__ */ import_react7.default.createElement(import_native.Rect, { rx: "7", ry: "7", width: "100%", height: "100%" })));
+var import_react_native4 = require("react-native");
+var Text2 = import_react10.default.forwardRef(({
+  children,
+  level,
+  style,
+  inverted,
+  typo,
+  skeleton,
+  accessibilityLabel,
+  numberOfLines = 0,
+  ...others
+}, ref) => {
+  const statesContext = (0, import_react10.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: getColorStyle2("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_react10.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_react10.default.createElement(import_native.default, { style: styles.skeleton }, textView, isAndroid && /* @__PURE__ */ import_react10.default.createElement(import_react_native4.View, null, /* @__PURE__ */ import_react10.default.createElement(import_native.Rect, { rx: "7", ry: "7", width: "100%", height: "100%" })));
   }
-);
-Text.displayName = "Text" /* Text */;
-var Text_native_default = Text;
+  return textView;
+});
+Text2.displayName = "Text" /* Text */;
+var Text_native_default = Text2;
 
 // objects/facets/Alignable/index.ts
 var getAlignStyle = (alignType) => {
@@ -631,23 +766,23 @@ var getAlignStyle = (alignType) => {
 };
 
 // components/icon/Icon.native.tsx
-var import_react8 = __toESM(require("react"));
+var import_react11 = __toESM(require("react"));
 var import_native2 = __toESM(require("react-content-loader/native"));
-var import_react_native4 = require("react-native");
+var import_react_native5 = require("react-native");
 var import_css = require("react-native-svg/css");
-var Icon = import_react8.default.forwardRef(
+var Icon = import_react11.default.forwardRef(
   ({ size, name, circled, stretched, color, backgroundColor, onClick, align, skeleton, testId, ...others }, ref) => {
     const {
       theme: { icons }
-    } = (0, import_react8.useContext)(TrilogyThemeContext2);
-    const statesContext = (0, import_react8.useContext)(StatesContext);
+    } = (0, import_react11.useContext)(TrilogyThemeContext2);
+    const statesContext = (0, import_react11.useContext)(StatesContext);
     const style = {};
     const defaultSize = size === "huge" /* HUGE */ && 66 || size === "large" /* LARGE */ && 44 || size === "medium" /* MEDIUM */ && 30 || size === "small" /* SMALL */ && 20 || size === "smaller" /* SMALLER */ && 16 || 20;
-    const iconColor = color && getColorStyle(color) || statesContext.inverted && getColorStyle("WHITE" /* BACKGROUND */) || getColorStyle("MAIN" /* MAIN */);
-    const background = backgroundColor && getColorStyle(backgroundColor) || circled && getColorStyle("MAIN" /* MAIN */) || "";
+    const iconColor = color && getColorStyle2(color) || statesContext.inverted && getColorStyle2("WHITE" /* BACKGROUND */) || getColorStyle2("MAIN" /* MAIN */);
+    const background = backgroundColor && getColorStyle2(backgroundColor) || circled && getColorStyle2("MAIN" /* MAIN */) || "";
     const iconSkeletonRadius = size === "huge" /* HUGE */ && 50 || size === "large" /* LARGE */ && 35 || size === "medium" /* MEDIUM */ && 25 || size === "small" /* SMALL */ && 15 || size === "smaller" /* SMALLER */ && 10 || 15;
     const circledWidth = size === "huge" /* HUGE */ && 99 || size === "large" /* LARGE */ && 66 || size === "medium" /* MEDIUM */ && 48 || size === "small" /* SMALL */ && 32 || size === "smaller" /* SMALLER */ && 38 || 32;
-    const styles = import_react_native4.StyleSheet.create({
+    const styles = import_react_native5.StyleSheet.create({
       rootView: {
         alignSelf: getAlignStyle(align)
       },
@@ -659,6 +794,12 @@ var Icon = import_react8.default.forwardRef(
       icon: {
         transform: isIOS ? stretched && [{ skewX: "20deg" }] || [{ skewX: "0deg" }] : []
       },
+      iconContainer: {
+        alignItems: "center",
+        justifyContent: "center",
+        width: defaultSize,
+        height: defaultSize
+      },
       stretched: {
         justifyContent: "center",
         alignItems: "center",
@@ -672,7 +813,7 @@ var Icon = import_react8.default.forwardRef(
         width: circledWidth,
         height: circledWidth,
         borderRadius: iconSkeletonRadius,
-        backgroundColor: getColorStyle("NEUTRAL_FADE" /* NEUTRAL_FADE */),
+        backgroundColor: getColorStyle2("NEUTRAL_FADE" /* NEUTRAL_FADE */),
         overflow: "hidden"
       },
       circled: {
@@ -684,25 +825,25 @@ var Icon = import_react8.default.forwardRef(
         justifyContent: "center"
       }
     });
-    const IconSkeleton = () => /* @__PURE__ */ import_react8.default.createElement(import_native2.default, { style: styles.skeleton, ...others }, /* @__PURE__ */ import_react8.default.createElement(import_react_native4.View, { style: { opacity: 0 } }), isAndroid && /* @__PURE__ */ import_react8.default.createElement(import_react_native4.View, null, size === "huge" /* HUGE */ && /* @__PURE__ */ import_react8.default.createElement(import_native2.Circle, { cx: "50", cy: "50", r: "50" }) || size === "large" /* LARGE */ && /* @__PURE__ */ import_react8.default.createElement(import_native2.Circle, { cx: "33", cy: "33", r: "33" }) || size === "medium" /* MEDIUM */ && /* @__PURE__ */ import_react8.default.createElement(import_native2.Circle, { cx: "23", cy: "23", r: "23" }) || size === "small" /* SMALL */ && /* @__PURE__ */ import_react8.default.createElement(import_native2.Circle, { cx: "15", cy: "15", r: "15" }) || /* @__PURE__ */ import_react8.default.createElement(import_native2.Circle, { cx: "15", cy: "15", r: "15" })));
+    const IconSkeleton = () => /* @__PURE__ */ import_react11.default.createElement(import_native2.default, { style: styles.skeleton, ...others }, /* @__PURE__ */ import_react11.default.createElement(import_react_native5.View, { style: { opacity: 0 } }), isAndroid && /* @__PURE__ */ import_react11.default.createElement(import_react_native5.View, null, size === "huge" /* HUGE */ && /* @__PURE__ */ import_react11.default.createElement(import_native2.Circle, { cx: "50", cy: "50", r: "50" }) || size === "large" /* LARGE */ && /* @__PURE__ */ import_react11.default.createElement(import_native2.Circle, { cx: "33", cy: "33", r: "33" }) || size === "medium" /* MEDIUM */ && /* @__PURE__ */ import_react11.default.createElement(import_native2.Circle, { cx: "23", cy: "23", r: "23" }) || size === "small" /* SMALL */ && /* @__PURE__ */ import_react11.default.createElement(import_native2.Circle, { cx: "15", cy: "15", r: "15" }) || /* @__PURE__ */ import_react11.default.createElement(import_native2.Circle, { cx: "15", cy: "15", r: "15" })));
     if (skeleton) {
-      return /* @__PURE__ */ import_react8.default.createElement(IconSkeleton, null);
+      return /* @__PURE__ */ import_react11.default.createElement(IconSkeleton, null);
     }
-    let iconView = /* @__PURE__ */ import_react8.default.createElement(import_react_native4.View, null);
+    let iconView = /* @__PURE__ */ import_react11.default.createElement(import_react_native5.View, null);
     if (name && icons) {
       if (stretched && !circled) {
-        iconView = /* @__PURE__ */ import_react8.default.createElement(import_react_native4.View, { style: styles.stretched, testID: `${testId}-stretched` }, /* @__PURE__ */ import_react8.default.createElement(
+        iconView = /* @__PURE__ */ import_react11.default.createElement(import_react_native5.View, { style: styles.stretched, testID: `${testId}-stretched` }, /* @__PURE__ */ import_react11.default.createElement(
           import_css.WithLocalSvg,
           {
             style: [styles.iconCircled, styles.icon],
             asset: icons[name.toString().replace("tri-picto-", "").replace("tri-", "")],
             width: defaultSize,
             height: defaultSize,
-            color: getColorStyle("WHITE" /* BACKGROUND */)
+            color: getColorStyle2("WHITE" /* BACKGROUND */)
           }
         ));
       } else if (circled) {
-        iconView = /* @__PURE__ */ import_react8.default.createElement(import_react_native4.View, { style: styles.circled, testID: `${testId}-circled` }, /* @__PURE__ */ import_react8.default.createElement(
+        iconView = /* @__PURE__ */ import_react11.default.createElement(import_react_native5.View, { style: styles.circled, testID: `${testId}-circled` }, /* @__PURE__ */ import_react11.default.createElement(
           import_css.WithLocalSvg,
           {
             style: [styles.iconCircled, styles.icon],
@@ -713,7 +854,7 @@ var Icon = import_react8.default.forwardRef(
           }
         ));
       } else {
-        iconView = /* @__PURE__ */ import_react8.default.createElement(import_react_native4.View, { ...others }, /* @__PURE__ */ import_react8.default.createElement(
+        iconView = /* @__PURE__ */ import_react11.default.createElement(import_react_native5.View, { style: styles.iconContainer, ...others }, /* @__PURE__ */ import_react11.default.createElement(
           import_css.WithLocalSvg,
           {
             style: [styles.icon, style],
@@ -725,8 +866,8 @@ var Icon = import_react8.default.forwardRef(
         ));
       }
     }
-    return onClick ? /* @__PURE__ */ import_react8.default.createElement(import_react_native4.View, { style: styles.rootView, testID: testId, ref }, /* @__PURE__ */ import_react8.default.createElement(
-      import_react_native4.TouchableOpacity,
+    return onClick ? /* @__PURE__ */ import_react11.default.createElement(import_react_native5.View, { style: styles.rootView, testID: testId, ref }, /* @__PURE__ */ import_react11.default.createElement(
+      import_react_native5.TouchableOpacity,
       {
         style: { width: "100%" },
         onPress: onClick,
@@ -734,7 +875,7 @@ var Icon = import_react8.default.forwardRef(
         testID: `${testId}-pressable`
       },
       iconView
-    )) : /* @__PURE__ */ import_react8.default.createElement(import_react_native4.View, { style: styles.rootView, testID: testId, ref }, iconView);
+    )) : /* @__PURE__ */ import_react11.default.createElement(import_react_native5.View, { style: styles.rootView, testID: testId, ref }, iconView);
   }
 );
 Icon.displayName = "Icon" /* Icon */;
@@ -753,98 +894,101 @@ var STATUS_COLORS = {
 var getVariantStyle = (variantType) => {
   switch (variantType) {
     case "PRIMARY":
-      return getColorStyle("MAIN" /* MAIN */);
+      return getColorStyle2("MAIN" /* MAIN */);
     case "ACCENT":
-      return getColorStyle("ACCENT" /* ACCENT */);
+      return getColorStyle2("ACCENT" /* ACCENT */);
     case "MAIN":
-      return getColorStyle("MAIN" /* MAIN */);
+      return getColorStyle2("MAIN" /* MAIN */);
     case "SECONDARY":
-      return getColorStyle("MAIN_FADE" /* MAIN_FADE */);
+      return getColorStyle2("MAIN_FADE" /* MAIN_FADE */);
     case "INFO":
-      return getColorStyle("INFO" /* INFO */);
+      return getColorStyle2("INFO" /* INFO */);
     default:
       return "";
   }
 };
 
 // components/radio/Radio.native.tsx
-var import_react9 = __toESM(require("react"));
-var import_react_native5 = require("react-native");
-var Radio = import_react9.default.forwardRef(
-  ({ id = import_react9.default.useId(), checked, name, onChange, disabled, readonly, label, value }, ref) => {
-    const styles = import_react_native5.StyleSheet.create({
-      container: {
-        flexDirection: "row",
-        alignItems: "center"
-      },
-      radio: {
-        alignItems: "center",
-        justifyContent: "center",
-        borderColor: getColorStyle(
-          disabled ? "DISABLED" /* DISABLED */ : checked ? "MAIN" /* MAIN */ : "STROKE" /* STROKE */
-        ),
-        borderWidth: 1,
-        width: 18,
-        height: 18,
-        borderRadius: 10,
-        marginRight: 10
-      },
-      icon: {
-        borderRadius: 12,
-        width: 12,
-        height: 12,
-        backgroundColor: getColorStyle("MAIN" /* MAIN */)
-      },
-      label: {
-        paddingTop: 2,
-        color: disabled && getColorStyle("DISABLED" /* DISABLED */) || checked && getColorStyle("MAIN" /* MAIN */) || getColorStyle("MAIN" /* MAIN */)
-      }
-    });
-    const handleClick = (value2) => {
-      if (!readonly) {
-        if (onChange) {
-          onChange({
-            radioId: id,
-            radioValue: value2,
-            radioName: name || "",
-            radioChecked: true
-          });
-        }
+var import_react12 = __toESM(require("react"));
+var import_react_native6 = require("react-native");
+var Radio = import_react12.default.forwardRef(({
+  id = import_react12.default.useId(),
+  checked,
+  name,
+  onChange,
+  disabled,
+  readonly,
+  label,
+  value
+}, ref) => {
+  const styles = import_react_native6.StyleSheet.create({
+    container: {
+      flexDirection: "row",
+      alignItems: "center"
+    },
+    radio: {
+      alignItems: "center",
+      justifyContent: "center",
+      borderColor: getColorStyle2(disabled ? "DISABLED" /* DISABLED */ : checked ? "MAIN" /* MAIN */ : "STROKE" /* STROKE */),
+      borderWidth: 1,
+      width: 18,
+      height: 18,
+      borderRadius: 10,
+      marginRight: 10
+    },
+    icon: {
+      borderRadius: 12,
+      width: 12,
+      height: 12,
+      backgroundColor: getColorStyle2("MAIN" /* MAIN */)
+    },
+    label: {
+      paddingTop: 2,
+      color: disabled && getColorStyle2("DISABLED" /* DISABLED */) || checked && getColorStyle2("MAIN" /* MAIN */) || getColorStyle2("MAIN" /* MAIN */)
+    }
+  });
+  const handleClick = (value2) => {
+    if (!readonly) {
+      if (onChange) {
+        onChange({
+          radioId: id,
+          radioValue: value2,
+          radioName: name || "",
+          radioChecked: true
+        });
       }
-    };
-    return /* @__PURE__ */ import_react9.default.createElement(import_react_native5.TouchableOpacity, { ref, disabled, style: styles.container, onPress: () => handleClick(value != null ? value : "") }, /* @__PURE__ */ import_react9.default.createElement(import_react_native5.View, { style: styles.radio, testID: id }, checked && /* @__PURE__ */ import_react9.default.createElement(import_react_native5.View, { style: styles.icon })), label && typeof label.valueOf() === "string" ? /* @__PURE__ */ import_react9.default.createElement(Text_native_default, { style: styles.label }, String(label)) : label);
-  }
-);
+    }
+  };
+  return /* @__PURE__ */ import_react12.default.createElement(import_react_native6.TouchableOpacity, { ref, disabled, style: styles.container, onPress: () => handleClick(value != null ? value : "") }, /* @__PURE__ */ import_react12.default.createElement(import_react_native6.View, { style: styles.radio, testID: id }, checked && /* @__PURE__ */ import_react12.default.createElement(import_react_native6.View, { style: styles.icon })), label && typeof label.valueOf() === "string" ? /* @__PURE__ */ import_react12.default.createElement(Text_native_default, { style: styles.label }, String(label)) : label);
+});
 Radio.displayName = "Radio" /* Radio */;
 var Radio_native_default = Radio;
 
 // components/radio/tiles/RadioTiles.native.tsx
-var import_react10 = __toESM(require("react"));
-var import_react_native6 = require("react-native");
-var RadioTiles = import_react10.default.forwardRef(
-  ({ id, children, align, verticalAlign, ...others }, ref) => {
-    const styles = import_react_native6.StyleSheet.create({
-      container: {
-        alignItems: verticalAlign === "ALIGNED_CENTER" /* ALIGNED_CENTER */ && "center" || verticalAlign === "ALIGNED_START" /* ALIGNED_START */ && "flex-start" || verticalAlign === "ALIGNED_END" /* ALIGNED_END */ && "flex-end" || void 0,
-        justifyContent: align === "ALIGNED_CENTER" /* ALIGNED_CENTER */ && "center" || align === "ALIGNED_START" /* ALIGNED_START */ && "flex-start" || align === "ALIGNED_END" /* ALIGNED_END */ && "flex-end" || void 0,
-        flexDirection: "row",
-        flexWrap: "wrap",
-        gap: 8 /* TWO */
-      }
-    });
-    return /* @__PURE__ */ import_react10.default.createElement(import_react_native6.View, { ref, id, style: [styles.container], ...others }, children);
-  }
-);
+var import_react13 = __toESM(require("react"));
+var import_react_native7 = require("react-native");
+var RadioTiles = import_react13.default.forwardRef(({ id, children, align, verticalAlign, ...others }, ref) => {
+  const styles = import_react_native7.StyleSheet.create({
+    container: {
+      alignItems: verticalAlign === "ALIGNED_CENTER" /* ALIGNED_CENTER */ && "center" || verticalAlign === "ALIGNED_START" /* ALIGNED_START */ && "flex-start" || verticalAlign === "ALIGNED_END" /* ALIGNED_END */ && "flex-end" || void 0,
+      justifyContent: align === "ALIGNED_CENTER" /* ALIGNED_CENTER */ && "center" || align === "ALIGNED_START" /* ALIGNED_START */ && "flex-start" || align === "ALIGNED_END" /* ALIGNED_END */ && "flex-end" || void 0,
+      flexDirection: "row",
+      flexWrap: "wrap",
+      gap: 8 /* TWO */
+    }
+  });
+  return /* @__PURE__ */ import_react13.default.createElement(import_react_native7.View, { ref, id, style: [styles.container], ...others }, children);
+});
 RadioTiles.displayName = "RadioTiles" /* RadioTiles */;
 var RadioTiles_native_default = RadioTiles;
 
 // components/sticker/Sticker.native.tsx
-var React12 = __toESM(require("react"));
-var import_react_native7 = require("react-native");
-var Sticker = React12.forwardRef(
+var React15 = __toESM(require("react"));
+var import_react_native8 = require("react-native");
+var Sticker = React15.forwardRef(
   ({ variant, small, outlined, label, iconName, accessibilityLabel, ...others }, ref) => {
-    const defaultColor = getColorStyle("MAIN" /* MAIN */);
-    const styles = import_react_native7.StyleSheet.create({
+    const defaultColor = getColorStyle2("MAIN" /* MAIN */);
+    const styles = import_react_native8.StyleSheet.create({
       sticker: {
         flexDirection: "row",
         justifyContent: "center",
@@ -869,7 +1013,7 @@ var Sticker = React12.forwardRef(
       text: {
         lineHeight: !small && 20 || 15,
         textAlign: "center",
-        color: outlined && defaultColor || getColorStyle("WHITE" /* BACKGROUND */),
+        color: outlined && defaultColor || getColorStyle2("WHITE" /* BACKGROUND */),
         justifyContent: "center",
         alignSelf: "center",
         fontSize: !small && 16 || 12,
@@ -878,23 +1022,20 @@ var Sticker = React12.forwardRef(
         marginTop: 1
       }
     });
-    return /* @__PURE__ */ React12.createElement(import_react_native7.View, { ref, style: styles.sticker, accessibilityLabel, ...others }, iconName && /* @__PURE__ */ React12.createElement(Icon_native_default, { color: "WHITE" /* BACKGROUND */, size: small ? "smaller" /* SMALLER */ : "small" /* SMALL */, name: iconName }), label && /* @__PURE__ */ React12.createElement(Text_native_default, { style: styles.text, typo: ["has-text-weight-semibold" /* TEXT_WEIGHT_SEMIBOLD */] }, label));
+    return /* @__PURE__ */ React15.createElement(import_react_native8.View, { ref, style: styles.sticker, accessibilityLabel, ...others }, iconName && /* @__PURE__ */ React15.createElement(Icon_native_default, { color: "WHITE" /* BACKGROUND */, size: small ? "smaller" /* SMALLER */ : "small" /* SMALL */, name: iconName }), label && /* @__PURE__ */ React15.createElement(Text_native_default, { style: styles.text, typo: ["has-text-weight-semibold" /* TEXT_WEIGHT_SEMIBOLD */] }, label));
   }
 );
 Sticker.displayName = "Sticker" /* Sticker */;
 var Sticker_native_default = Sticker;
 
-// objects/Typography/TypographyBold/index.native.tsx
-var import_react11 = require("react");
-
 // components/radio/tiles/tile/RadioTile.native.tsx
-var import_react12 = __toESM(require("react"));
-var import_react_native8 = require("react-native");
-var RadioTile = import_react12.default.forwardRef(
+var import_react14 = __toESM(require("react"));
+var import_react_native9 = require("react-native");
+var RadioTile = import_react14.default.forwardRef(
   ({
     checked,
     disabled,
-    id = import_react12.default.useId(),
+    id = import_react14.default.useId(),
     label,
     onChange,
     name,
@@ -907,8 +1048,8 @@ var RadioTile = import_react12.default.forwardRef(
     stickerVariant = "ACCENT" /* ACCENT */,
     ...others
   }, ref) => {
-    const [stickerHeight, setStickerHeight] = (0, import_react12.useState)(0);
-    const styles = import_react_native8.StyleSheet.create({
+    const [stickerHeight, setStickerHeight] = (0, import_react14.useState)(0);
+    const styles = import_react_native9.StyleSheet.create({
       container: {
         flexDirection: horizontal ? "row" : "column",
         width: horizontal ? "100%" : void 0,
@@ -918,8 +1059,8 @@ var RadioTile = import_react12.default.forwardRef(
         borderRadius: 6,
         padding: !checked ? 16 /* FOUR */ : 16 /* FOUR */ - 1,
         maxWidth: horizontal ? void 0 : "50%",
-        backgroundColor: getColorStyle(disabled ? "DISABLED_FADE" /* DISABLED_FADE */ : "WHITE" /* BACKGROUND */),
-        borderColor: getColorStyle(
+        backgroundColor: getColorStyle2(disabled ? "DISABLED_FADE" /* DISABLED_FADE */ : "WHITE" /* BACKGROUND */),
+        borderColor: getColorStyle2(
           disabled ? "DISABLED" /* DISABLED */ : checked ? "MAIN" /* MAIN */ : "STROKE" /* STROKE */
         )
       },
@@ -937,19 +1078,19 @@ var RadioTile = import_react12.default.forwardRef(
         right: checked ? 15 : 16
       }
     });
-    const typoTitle = (0, import_react12.useMemo)(() => {
+    const typoTitle = (0, import_react14.useMemo)(() => {
       const typos = ["has-text-weight-semibold" /* TEXT_WEIGHT_SEMIBOLD */];
       if (!horizontal) typos.push("has-text-centered" /* TEXT_CENTERED */);
       if (disabled) typos.push("has-text-disabled" /* TEXT_DISABLED */);
       return typos;
     }, [disabled, horizontal]);
-    const typoText = (0, import_react12.useMemo)(() => {
+    const typoText = (0, import_react14.useMemo)(() => {
       const typos = [];
       if (!horizontal) typos.push("has-text-centered" /* TEXT_CENTERED */);
       if (disabled) typos.push("has-text-disabled" /* TEXT_DISABLED */);
       return typos;
     }, [horizontal, disabled]);
-    const handleChange = (0, import_react12.useCallback)(() => {
+    const handleChange = (0, import_react14.useCallback)(() => {
       if (onChange && !readonly && !disabled)
         onChange({
           radioValue: value || "",
@@ -958,11 +1099,11 @@ var RadioTile = import_react12.default.forwardRef(
           radioId: id
         });
     }, [value, name, id, disabled, readonly, onChange]);
-    return /* @__PURE__ */ import_react12.default.createElement(import_react_native8.TouchableOpacity, { ref, disabled, style: [styles.container], onPress: handleChange, ...others }, /* @__PURE__ */ import_react12.default.createElement(InputRadio, { checked, disabled }), sticker && /* @__PURE__ */ import_react12.default.createElement(import_react_native8.View, { style: styles.sticker, onLayout: (e) => setStickerHeight(e.nativeEvent.layout.height) }, /* @__PURE__ */ import_react12.default.createElement(Sticker_native_default, { label: sticker, variant: stickerVariant, className: "radio-sticker", small: true })), icon && /* @__PURE__ */ import_react12.default.createElement(import_react_native8.View, { style: [styles.icon] }, /* @__PURE__ */ import_react12.default.createElement(Icon_native_default, { size: "small" /* SMALL */, name: icon })), /* @__PURE__ */ import_react12.default.createElement(import_react_native8.View, { style: [styles.content] }, label && /* @__PURE__ */ import_react12.default.createElement(Text_native_default, { level: 1 /* ONE */, typo: typoTitle }, String(label)), description && typeof description.valueOf() === "string" ? /* @__PURE__ */ import_react12.default.createElement(Text_native_default, { level: 2 /* TWO */, typo: typoText }, String(description)) : description));
+    return /* @__PURE__ */ import_react14.default.createElement(import_react_native9.TouchableOpacity, { ref, disabled, style: [styles.container], onPress: handleChange, ...others }, /* @__PURE__ */ import_react14.default.createElement(InputRadio, { checked, disabled }), sticker && /* @__PURE__ */ import_react14.default.createElement(import_react_native9.View, { style: styles.sticker, onLayout: (e) => setStickerHeight(e.nativeEvent.layout.height) }, /* @__PURE__ */ import_react14.default.createElement(Sticker_native_default, { label: sticker, variant: stickerVariant, className: "radio-sticker", small: true })), icon && /* @__PURE__ */ import_react14.default.createElement(import_react_native9.View, { style: [styles.icon] }, /* @__PURE__ */ import_react14.default.createElement(Icon_native_default, { size: "small" /* SMALL */, name: icon })), /* @__PURE__ */ import_react14.default.createElement(import_react_native9.View, { style: [styles.content] }, label && /* @__PURE__ */ import_react14.default.createElement(Text_native_default, { level: 1 /* ONE */, typo: typoTitle }, String(label)), description && typeof description.valueOf() === "string" ? /* @__PURE__ */ import_react14.default.createElement(Text_native_default, { level: 2 /* TWO */, typo: typoText }, String(description)) : description));
   }
 );
 var InputRadio = ({ checked, disabled }) => {
-  const styles = import_react_native8.StyleSheet.create({
+  const styles = import_react_native9.StyleSheet.create({
     input: {
       marginRight: "auto",
       width: 18,
@@ -971,18 +1112,18 @@ var InputRadio = ({ checked, disabled }) => {
       borderRadius: 18,
       justifyContent: "center",
       alignItems: "center",
-      borderColor: getColorStyle(disabled ? "DISABLED" /* DISABLED */ : checked ? "MAIN" /* MAIN */ : "STROKE" /* STROKE */)
+      borderColor: getColorStyle2(disabled ? "DISABLED" /* DISABLED */ : checked ? "MAIN" /* MAIN */ : "STROKE" /* STROKE */)
     },
     inputRadio: {
       width: 12,
       height: 12,
       borderRadius: 12,
-      backgroundColor: getColorStyle(
+      backgroundColor: getColorStyle2(
         disabled && checked ? "DISABLED" /* DISABLED */ : disabled && !checked ? "DISABLED_FADE" /* DISABLED_FADE */ : checked ? "MAIN" /* MAIN */ : "WHITE" /* BACKGROUND */
       )
     }
   });
-  return /* @__PURE__ */ import_react12.default.createElement(import_react_native8.View, { style: [styles.input] }, /* @__PURE__ */ import_react12.default.createElement(import_react_native8.View, { style: [styles.inputRadio] }));
+  return /* @__PURE__ */ import_react14.default.createElement(import_react_native9.View, { style: [styles.input] }, /* @__PURE__ */ import_react14.default.createElement(import_react_native9.View, { style: [styles.inputRadio] }));
 };
 RadioTile.displayName = "RadioTile" /* RadioTile */;
 var RadioTile_native_default = RadioTile;