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

package/lib/components/tag/Tag.native.js

@@ -35,6 +35,21 @@ __export(Tag_native_exports, {
 });
 module.exports = __toCommonJS(Tag_native_exports);
 
+// components/icon/IconEnum.ts
+var IconColor = /* @__PURE__ */ ((IconColor2) => {
+  IconColor2["SUCCESS"] = "SUCCESS";
+  IconColor2["ERROR"] = "ERROR";
+  IconColor2["INFO"] = "INFO";
+  IconColor2["WARNING"] = "WARNING";
+  IconColor2["MAIN"] = "MAIN";
+  IconColor2["BACKGROUND"] = "BACKGROUND";
+  IconColor2["ACCENT"] = "ACCENT";
+  IconColor2["NEUTRAL"] = "NEUTRAL";
+  IconColor2["WHITE"] = "WHITE";
+  IconColor2["GREY"] = "NEUTRAL";
+  return IconColor2;
+})(IconColor || {});
+
 // context/providerStates/index.tsx
 var import_react = require("react");
 var StatesContext = (0, import_react.createContext)({
@@ -50,6 +65,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"],
@@ -167,6 +183,12 @@ var Icon = import_react4.default.forwardRef(
       icon: {
         transform: isIOS ? stretched && [{ skewX: "20deg" }] || [{ skewX: "0deg" }] : []
       },
+      iconContainer: {
+        alignItems: "center",
+        justifyContent: "center",
+        width: defaultSize,
+        height: defaultSize
+      },
       stretched: {
         justifyContent: "center",
         alignItems: "center",
@@ -221,7 +243,7 @@ var Icon = import_react4.default.forwardRef(
           }
         ));
       } else {
-        iconView = /* @__PURE__ */ import_react4.default.createElement(import_react_native2.View, { ...others }, /* @__PURE__ */ import_react4.default.createElement(
+        iconView = /* @__PURE__ */ import_react4.default.createElement(import_react_native2.View, { style: styles.iconContainer, ...others }, /* @__PURE__ */ import_react4.default.createElement(
           import_css.WithLocalSvg,
           {
             style: [styles.icon, style],
@@ -276,10 +298,11 @@ var Tag = import_react5.default.forwardRef(
         flexDirection: "row",
         justifyContent: "center",
         alignItems: "center",
-        alignSelf: "baseline",
+        alignSelf: "center",
         borderRadius: 15,
         paddingHorizontal: 8,
         paddingVertical: 4,
+        minHeight: small ? 24 : 32,
         backgroundColor: inverted && getColorStyle("WHITE" /* BACKGROUND */) || variant && backgroundColor || getColorStyle("NEUTRAL_FADE" /* NEUTRAL_FADE */)
       },
       text: {
@@ -297,7 +320,15 @@ var Tag = import_react5.default.forwardRef(
         flexDirection: "row"
       }
     });
-    return /* @__PURE__ */ import_react5.default.createElement(import_react_native3.View, { ref, style: styles.tag, ...others }, iconName && /* @__PURE__ */ import_react5.default.createElement(import_react_native3.View, { style: styles.icon }, /* @__PURE__ */ import_react5.default.createElement(Icon_native_default, { size: small ? "smaller" /* SMALLER */ : "small" /* SMALL */, name: iconName, testId: `${testId}-icon` })), /* @__PURE__ */ import_react5.default.createElement(import_react_native3.Text, { style: styles.text }, label));
+    return /* @__PURE__ */ import_react5.default.createElement(import_react_native3.View, { ref, style: styles.tag, ...others }, iconName && /* @__PURE__ */ import_react5.default.createElement(import_react_native3.View, { style: styles.icon }, /* @__PURE__ */ import_react5.default.createElement(
+      Icon_native_default,
+      {
+        color: IconColor[variant || "BACKGROUND" /* BACKGROUND */],
+        size: small ? "smaller" /* SMALLER */ : "small" /* SMALL */,
+        name: iconName,
+        testId: `${testId}-icon`
+      }
+    )), /* @__PURE__ */ import_react5.default.createElement(import_react_native3.Text, { style: styles.text }, label));
   }
 );
 Tag.displayName = "Tag" /* Tag */;

package/lib/components/tag/Tag.native.mjs

@@ -1,18 +1,18 @@
 "use client";
 import {
   Tag_native_default
-} from "../../chunk-AKMN7UO5.mjs";
-import "../../chunk-KNRXLZZP.mjs";
+} from "../../chunk-573KW52P.mjs";
+import "../../chunk-MB55ARZ7.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-HV6TXVFA.mjs";
-import "../../chunk-CYNSXZSV.mjs";
-import "../../chunk-YK5HPRX4.mjs";
+import "../../chunk-CD6DMMCL.mjs";
+import "../../chunk-RYABO2EX.mjs";
 import "../../chunk-4UHBBNZ7.mjs";
-import "../../chunk-NTS75UVH.mjs";
+import "../../chunk-VDLM4YQP.mjs";
 import "../../chunk-QIPGVLHJ.mjs";
 export {
   Tag_native_default as default

package/lib/components/tag/TagPropsDefaults.js

@@ -35,6 +35,7 @@ export default {
       "tri-arrow-right",
       "tri-arrow-up",
       "tri-bell",
+      "tri-calendar",
       "tri-check-circle",
       "tri-check",
       "tri-exclamation-circle",

package/lib/components/tag/index.js

@@ -106,6 +106,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"],
@@ -211,10 +212,7 @@ var Tag = import_react3.default.forwardRef(
         className
       )
     );
-    const tagIconClassNames = hashClass(
-      styled,
-      (0, import_clsx2.default)(variant && is(getColorClassName(variant)))
-    );
+    const tagIconClassNames = (0, import_clsx2.default)(variant && is(getColorClassName(variant)));
     return /* @__PURE__ */ import_react3.default.createElement("span", { ref, id, className: tagClassNames, ...others }, iconName && /* @__PURE__ */ import_react3.default.createElement(Icon_default, { className: tagIconClassNames, name: iconName }), label);
   }
 );

package/lib/components/tag/index.mjs

@@ -1,29 +1,32 @@
 "use client";
 import "../../chunk-K4DWC43X.mjs";
-import {
-  Tag_default
-} from "../../chunk-YIOEE4WJ.mjs";
 import {
   list_default
 } from "../../chunk-X4ABDBKN.mjs";
 import "../../chunk-WG7MHIX6.mjs";
 import {
-  TagVariant
-} from "../../chunk-F7ANYFVT.mjs";
-import "../../chunk-MYJRAAYV.mjs";
-import "../../chunk-A35Q44N2.mjs";
+  Tag_default
+} from "../../chunk-JPWTOBGP.mjs";
 import "../../chunk-MAMQO43Y.mjs";
 import "../../chunk-HQESKFCX.mjs";
 import "../../chunk-DB5J6PBL.mjs";
 import "../../chunk-A4CI2ZMI.mjs";
-import "../../chunk-F5FPTZND.mjs";
-import "../../chunk-ACSGONQB.mjs";
-import "../../chunk-JA5LYEG4.mjs";
-import "../../chunk-AD63JH53.mjs";
+import "../../chunk-6CVNPSI3.mjs";
+import "../../chunk-ZUSPKNMI.mjs";
 import "../../chunk-Y3ROARMA.mjs";
-import "../../chunk-SGAZRZIK.mjs";
-import "../../chunk-WC3ULY5W.mjs";
-import "../../chunk-JOSZ4COK.mjs";
+import "../../chunk-LGL3XQ7F.mjs";
+import "../../chunk-ALGX47MZ.mjs";
+import "../../chunk-XXKEMYTB.mjs";
+import {
+  TagVariant
+} from "../../chunk-F7ANYFVT.mjs";
+import "../../chunk-MYJRAAYV.mjs";
+import "../../chunk-A35Q44N2.mjs";
+import "../../chunk-F5FPTZND.mjs";
+import "../../chunk-5QUXSOHX.mjs";
+import "../../chunk-RVE7QNTO.mjs";
+import "../../chunk-7VSJ3RTI.mjs";
+import "../../chunk-P372ZF3A.mjs";
 import "../../chunk-SWVRRUW7.mjs";
 import "../../chunk-Y7CEUBIZ.mjs";
 import "../../chunk-HU3FAWMX.mjs";
@@ -52,20 +55,17 @@ 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-4UHBBNZ7.mjs";
-import "../../chunk-NTS75UVH.mjs";
+import "../../chunk-VDLM4YQP.mjs";
 import "../../chunk-QIPGVLHJ.mjs";
 export {
   Tag_default as Tag,

package/lib/components/tag/index.native.d.mts

@@ -1,5 +1,5 @@
 import Tag from './Tag.native';
-import TagList from './list';
+import TagList from './list/index.native';
 export * from './TagEnum';
 export * from './TagProps';
 export { Tag, TagList };

package/lib/components/tag/index.native.d.ts

@@ -1,5 +1,5 @@
 import Tag from './Tag.native';
-import TagList from './list';
+import TagList from './list/index.native';
 export * from './TagEnum';
 export * from './TagProps';
 export { Tag, TagList };

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

@@ -32,11 +32,26 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_native_exports = {};
 __export(index_native_exports, {
   Tag: () => Tag_native_default,
-  TagList: () => list_default,
+  TagList: () => index_native_default,
   TagVariant: () => TagVariant
 });
 module.exports = __toCommonJS(index_native_exports);
 
+// components/icon/IconEnum.ts
+var IconColor = /* @__PURE__ */ ((IconColor2) => {
+  IconColor2["SUCCESS"] = "SUCCESS";
+  IconColor2["ERROR"] = "ERROR";
+  IconColor2["INFO"] = "INFO";
+  IconColor2["WARNING"] = "WARNING";
+  IconColor2["MAIN"] = "MAIN";
+  IconColor2["BACKGROUND"] = "BACKGROUND";
+  IconColor2["ACCENT"] = "ACCENT";
+  IconColor2["NEUTRAL"] = "NEUTRAL";
+  IconColor2["WHITE"] = "WHITE";
+  IconColor2["GREY"] = "NEUTRAL";
+  return IconColor2;
+})(IconColor || {});
+
 // context/providerStates/index.tsx
 var import_react = require("react");
 var StatesContext = (0, import_react.createContext)({
@@ -52,6 +67,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"],
@@ -100,11 +116,11 @@ var TrilogyThemeContext = import_react3.default.createContext(defaultContextValu
 
 // helpers/device/index.native.ts
 var import_react_native = require("react-native");
-var Device = /* @__PURE__ */ ((Device3) => {
-  Device3["Browser"] = "browser";
-  Device3["Server"] = "server";
-  Device3["Native"] = "native";
-  return Device3;
+var Device = /* @__PURE__ */ ((Device2) => {
+  Device2["Browser"] = "browser";
+  Device2["Server"] = "server";
+  Device2["Native"] = "native";
+  return Device2;
 })(Device || {});
 var { Browser, Server, Native } = Device;
 var canUseDOM = !!(typeof window !== "undefined" && window.document && window.document.createElement);
@@ -169,6 +185,12 @@ var Icon = import_react4.default.forwardRef(
       icon: {
         transform: isIOS ? stretched && [{ skewX: "20deg" }] || [{ skewX: "0deg" }] : []
       },
+      iconContainer: {
+        alignItems: "center",
+        justifyContent: "center",
+        width: defaultSize,
+        height: defaultSize
+      },
       stretched: {
         justifyContent: "center",
         alignItems: "center",
@@ -223,7 +245,7 @@ var Icon = import_react4.default.forwardRef(
           }
         ));
       } else {
-        iconView = /* @__PURE__ */ import_react4.default.createElement(import_react_native2.View, { ...others }, /* @__PURE__ */ import_react4.default.createElement(
+        iconView = /* @__PURE__ */ import_react4.default.createElement(import_react_native2.View, { style: styles.iconContainer, ...others }, /* @__PURE__ */ import_react4.default.createElement(
           import_css.WithLocalSvg,
           {
             style: [styles.icon, style],
@@ -259,10 +281,10 @@ var STATUS_COLORS = {
   DEFAULT: { color: "MAIN" /* MAIN */, backgroundColor: "MAIN_FADE" /* MAIN_FADE */ }
 };
 var getStatusStyle = (statusType) => {
-  const colors3 = STATUS_COLORS[statusType || "DEFAULT"];
+  const colors2 = STATUS_COLORS[statusType || "DEFAULT"];
   return {
-    color: getColorStyle(colors3.color),
-    backgroundColor: getColorStyle(colors3.backgroundColor)
+    color: getColorStyle(colors2.color),
+    backgroundColor: getColorStyle(colors2.backgroundColor)
   };
 };
 
@@ -278,10 +300,11 @@ var Tag = import_react5.default.forwardRef(
         flexDirection: "row",
         justifyContent: "center",
         alignItems: "center",
-        alignSelf: "baseline",
+        alignSelf: "center",
         borderRadius: 15,
         paddingHorizontal: 8,
         paddingVertical: 4,
+        minHeight: small ? 24 : 32,
         backgroundColor: inverted && getColorStyle("WHITE" /* BACKGROUND */) || variant && backgroundColor || getColorStyle("NEUTRAL_FADE" /* NEUTRAL_FADE */)
       },
       text: {
@@ -299,202 +322,46 @@ var Tag = import_react5.default.forwardRef(
         flexDirection: "row"
       }
     });
-    return /* @__PURE__ */ import_react5.default.createElement(import_react_native3.View, { ref, style: styles.tag, ...others }, iconName && /* @__PURE__ */ import_react5.default.createElement(import_react_native3.View, { style: styles.icon }, /* @__PURE__ */ import_react5.default.createElement(Icon_native_default, { size: small ? "smaller" /* SMALLER */ : "small" /* SMALL */, name: iconName, testId: `${testId}-icon` })), /* @__PURE__ */ import_react5.default.createElement(import_react_native3.Text, { style: styles.text }, label));
+    return /* @__PURE__ */ import_react5.default.createElement(import_react_native3.View, { ref, style: styles.tag, ...others }, iconName && /* @__PURE__ */ import_react5.default.createElement(import_react_native3.View, { style: styles.icon }, /* @__PURE__ */ import_react5.default.createElement(
+      Icon_native_default,
+      {
+        color: IconColor[variant || "BACKGROUND" /* BACKGROUND */],
+        size: small ? "smaller" /* SMALLER */ : "small" /* SMALL */,
+        name: iconName,
+        testId: `${testId}-icon`
+      }
+    )), /* @__PURE__ */ import_react5.default.createElement(import_react_native3.Text, { style: styles.text }, label));
   }
 );
 Tag.displayName = "Tag" /* Tag */;
 var Tag_native_default = Tag;
 
-// context/index.tsx
+// components/tag/list/TagList.native.tsx
 var React4 = __toESM(require("react"));
-var TrilogyContext = React4.createContext({
-  styled: false,
-  setStyled: () => void 0
-});
-var useTrilogyContext = () => {
-  const context = React4.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;
-};
-
-// helpers/device/index.ts
-var Device2 = /* @__PURE__ */ ((Device3) => {
-  Device3["Browser"] = "browser";
-  Device3["Server"] = "server";
-  Device3["Native"] = "native";
-  return Device3;
-})(Device2 || {});
-var { Browser: Browser2, Server: Server2, Native: Native2 } = Device2;
-var canUseDOM2 = !!(typeof window !== "undefined" && window.document && window.document.createElement);
-var canUseNative2 = typeof navigator != "undefined" && navigator.product == "ReactNative";
-var device2 = canUseNative2 ? Native2 : canUseDOM2 ? Browser2 : Server2;
-var SSRObjectDefined2 = {
-  isBrowser: device2 === Browser2,
-  isServer: device2 === Server2,
-  isNative: device2 === Native2,
-  device: device2,
-  canUseWorkers: typeof Worker !== "undefined",
-  canUseEventListeners: device2 === Browser2 && !!window.addEventListener,
-  canUseViewport: device2 === Browser2 && !!window.screen
-};
-var assign2 = (...args) => Object.assign({}, ...args);
-var values2 = (obj) => Object.values(obj);
-var toArrayObject2 = () => assign2((values2(SSRObjectDefined2), SSRObjectDefined2));
-var SSRObject2 = toArrayObject2();
-
-// context/providerTheme/index.tsx
-var import_react6 = __toESM(require("react"));
-var defaultTheme2 = {
-  icons: {},
-  colors: {},
-  fontFamily: {}
-};
-var defaultContextValue2 = {
-  theme: defaultTheme2,
-  setTheme: () => void 0
-};
-var TrilogyThemeContext2 = import_react6.default.createContext(defaultContextValue2);
-
-// objects/facets/Color/index.tsx
-var import_react7 = require("react");
-var colors2 = {
-  ["WHITE" /* BACKGROUND */]: ["#fff", "white", "main"],
-  ["MAIN" /* MAIN */]: ["#3d5d7e", "main", "white"],
-  ["MAIN_FADE" /* MAIN_FADE */]: ["#BBC6CD", "main-fade", "white"],
-  ["ACCENT" /* ACCENT */]: ["#da641b", "accent", "white"],
-  ["FONT" /* FONT */]: ["#3d5d7e", "main", "white"],
-  ["FONT_PLACEHOLDER" /* FONT_PLACEHOLDER */]: ["#687a87", "font-placeholder", "white"],
-  ["SUCCESS" /* SUCCESS */]: ["#007B52", "success", "white"],
-  ["SUCCESS_FADE" /* SUCCESS_FADE */]: ["#cae8ca", "success-fade", "white"],
-  ["INFO" /* INFO */]: ["#1A688A", "info", "white"],
-  ["INFO_FADE" /* INFO_FADE */]: ["#c8dbec", "info-fade", "white"],
-  ["WARNING" /* WARNING */]: ["#FFBB33", "warning", "white"],
-  ["WARNING_FADE" /* WARNING_FADE */]: ["#ecdbc6", "warning-fade", "white"],
-  ["ERROR" /* ERROR */]: ["#D42D02", "error", "white"],
-  ["ERROR_FADE" /* ERROR_FADE */]: ["#eecccc", "error-fade", "white"],
-  ["DISABLED" /* DISABLED */]: ["#646464", "disabled", "white"],
-  ["DISABLED_FADE" /* DISABLED_FADE */]: ["#D1D1D1", "disabled-fade", "white"],
-  ["NEUTRAL" /* NEUTRAL */]: ["#707070", "grey", "white"],
-  ["NEUTRAL_FADE" /* NEUTRAL_FADE */]: ["#F4F4F4", "grey-fade", "white"],
-  ["STROKE" /* STROKE */]: ["#BBC1CE", "stroke", "white"]
-};
-var getColorClassName = (trilogyColor) => {
-  const color = colors2[trilogyColor];
-  return color[1];
-};
-
-// objects/atoms/Background/index.ts
-var getBackgroundClassName = (backgroundType) => {
-  return `background-${getColorClassName(backgroundType)}`;
-};
-
-// objects/facets/Justifiable/index.ts
-var getJustifiedClassName = (justifyContent) => {
-  switch (justifyContent) {
-    case "ALIGNED_CENTER":
-      return "justified-center";
-    case "ALIGNED_START":
-      return "justified-start";
-    case "ALIGNED_END":
-      return "justified-end";
-    default:
-      return "justified-start";
-  }
-};
-var getJustifySelfClassName = (justifyContent) => {
-  switch (justifyContent) {
-    case "ALIGNED_CENTER":
-      return "justified-self-center";
-    case "ALIGNED_START":
-      return "justified-self-start";
-    case "ALIGNED_END":
-      return "justified-selfend";
-    default:
-      return "justified-selfstart";
-  }
-};
-
-// services/classify/index.ts
-function classify(prefix) {
-  return (classname) => classname !== "" ? `${prefix}-${classname.toLowerCase()}` : "";
-}
-var is = classify("is");
-var has = classify("has");
-
-// components/icon/Icon.tsx
-var import_clsx = __toESM(require("clsx"));
-var React6 = __toESM(require("react"));
-var Icon2 = React6.forwardRef(
-  ({ className, id, size, name, circled, stretched, color, backgroundColor, onClick, skeleton, align, ...others }, ref) => {
-    const { styled } = useTrilogyContext();
-    const background = backgroundColor && has(getBackgroundClassName(backgroundColor)) || circled && has(getBackgroundClassName("MAIN" /* MAIN */)) || "";
-    const classes = hashClass(
-      styled,
-      (0, import_clsx.default)(
-        "icon",
-        stretched && is("stretched"),
-        size && is(size),
-        circled && is("circled"),
-        circled && !color && has("text-white"),
-        color && is(`${getColorClassName(color)}`),
-        skeleton && is("loading"),
-        align && (0, import_clsx.default)(is("flex"), is(getJustifySelfClassName(align))),
-        background,
-        className
-      )
-    );
-    return /* @__PURE__ */ React6.createElement("span", { id, onClick: onClick && onClick, className: classes, ...others, ref }, /* @__PURE__ */ React6.createElement("i", { className: hashClass(styled, (0, import_clsx.default)(name)), "aria-hidden": "true" }));
-  }
-);
-Icon2.displayName = "Icon" /* Icon */;
-
-// objects/facets/Status/index.ts
-var STATUS_COLORS2 = {
-  SUCCESS: { color: "SUCCESS" /* SUCCESS */, backgroundColor: "SUCCESS_FADE" /* SUCCESS_FADE */ },
-  INFO: { color: "INFO" /* INFO */, backgroundColor: "INFO_FADE" /* INFO_FADE */ },
-  WARNING: { color: "WARNING" /* WARNING */, backgroundColor: "WARNING_FADE" /* WARNING_FADE */ },
-  ERROR: { color: "ERROR" /* ERROR */, backgroundColor: "ERROR_FADE" /* ERROR_FADE */ },
-  DEFAULT: { color: "MAIN" /* MAIN */, backgroundColor: "MAIN_FADE" /* MAIN_FADE */ }
-};
-
-// objects/Typography/TypographyBold/index.tsx
-var import_react8 = require("react");
-
-// components/tag/list/TagList.tsx
-var import_clsx2 = __toESM(require("clsx"));
-var React7 = __toESM(require("react"));
-var TagList = React7.forwardRef(({ className, id, align, marginless, ...others }, ref) => {
-  const { styled } = useTrilogyContext();
-  return /* @__PURE__ */ React7.createElement(
-    "div",
-    {
-      ref,
-      id,
-      className: hashClass(
-        styled,
-        (0, import_clsx2.default)("tags", align && is(getJustifiedClassName(align)), marginless && is("marginless"), className)
-      ),
-      ...others
+var import_react_native4 = require("react-native");
+var TagList = React4.forwardRef(({ children, ...others }, ref) => {
+  const styles = import_react_native4.StyleSheet.create({
+    tagList: {
+      width: "100%",
+      flexDirection: "row",
+      flexWrap: "wrap",
+      gap: 4
+    },
+    centered: {
+      alignSelf: "center"
+    },
+    gapless: {
+      margin: 0,
+      padding: 0
     }
-  );
+  });
+  return /* @__PURE__ */ React4.createElement(import_react_native4.View, { ref, style: [styles.tagList], ...others }, children);
 });
 TagList.displayName = "TagList" /* TagList */;
-var TagList_default = TagList;
+var TagList_native_default = TagList;
 
-// components/tag/list/index.ts
-var list_default = TagList_default;
+// components/tag/list/index.native.ts
+var index_native_default = TagList_native_default;
 
 // components/tag/TagEnum.ts
 var TagVariant = /* @__PURE__ */ ((TagVariant2) => {

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

@@ -1,80 +1,30 @@
 "use client";
 import "../../chunk-LBLPESEI.mjs";
+import {
+  index_native_default
+} from "../../chunk-EATIRXQK.mjs";
+import "../../chunk-MFPPIGPF.mjs";
 import {
   Tag_native_default
-} from "../../chunk-AKMN7UO5.mjs";
-import "../../chunk-KNRXLZZP.mjs";
+} from "../../chunk-573KW52P.mjs";
+import "../../chunk-MB55ARZ7.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 {
-  list_default
-} from "../../chunk-X4ABDBKN.mjs";
-import "../../chunk-WG7MHIX6.mjs";
 import {
   TagVariant
 } from "../../chunk-F7ANYFVT.mjs";
 import "../../chunk-MYJRAAYV.mjs";
-import "../../chunk-A35Q44N2.mjs";
-import "../../chunk-MAMQO43Y.mjs";
-import "../../chunk-HQESKFCX.mjs";
-import "../../chunk-DB5J6PBL.mjs";
-import "../../chunk-A4CI2ZMI.mjs";
-import "../../chunk-F5FPTZND.mjs";
-import "../../chunk-ACSGONQB.mjs";
-import "../../chunk-JA5LYEG4.mjs";
-import "../../chunk-AD63JH53.mjs";
-import "../../chunk-Y3ROARMA.mjs";
-import "../../chunk-SGAZRZIK.mjs";
-import "../../chunk-WC3ULY5W.mjs";
-import "../../chunk-JOSZ4COK.mjs";
-import "../../chunk-SWVRRUW7.mjs";
-import "../../chunk-Y7CEUBIZ.mjs";
-import "../../chunk-HU3FAWMX.mjs";
-import "../../chunk-OGATDHMZ.mjs";
-import "../../chunk-ODKCJMCG.mjs";
-import "../../chunk-UFMRE754.mjs";
-import "../../chunk-ZB4OWTDD.mjs";
-import "../../chunk-RXBVZD3M.mjs";
-import "../../chunk-A2ASOVUR.mjs";
-import "../../chunk-3XMSRU64.mjs";
-import "../../chunk-L5TMSDJR.mjs";
-import "../../chunk-GP5CJGRF.mjs";
-import "../../chunk-UTA75ELV.mjs";
-import "../../chunk-L25MU6JT.mjs";
-import "../../chunk-6TNYDJM7.mjs";
-import "../../chunk-HQXKHRER.mjs";
-import "../../chunk-NVH4ZPGW.mjs";
-import "../../chunk-62DJK35E.mjs";
-import "../../chunk-PAEZ47M2.mjs";
-import "../../chunk-FTTU4DJW.mjs";
-import "../../chunk-L7CNF7H6.mjs";
-import "../../chunk-RJO5KKUW.mjs";
-import "../../chunk-R7HI6GOP.mjs";
-import "../../chunk-SUNBSFL4.mjs";
-import "../../chunk-XIQL4ZTN.mjs";
-import "../../chunk-UUXUTBLZ.mjs";
-import "../../chunk-QOEJLTZN.mjs";
-import "../../chunk-B6WC6WS2.mjs";
-import "../../chunk-K2VWHGPL.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-4UHBBNZ7.mjs";
-import "../../chunk-NTS75UVH.mjs";
+import "../../chunk-VDLM4YQP.mjs";
 import "../../chunk-QIPGVLHJ.mjs";
 export {
   Tag_native_default as Tag,
-  list_default as TagList,
+  index_native_default as TagList,
   TagVariant
 };

package/lib/components/tag/list/TagList.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"],