@trilogy-ds/react 0.0.7-beta-v4 → 0.0.8-esm-cjs

package/lib/components/checkbox/tiles/tile/CheckboxTile.native.js

@@ -0,0 +1,108 @@
+import { ComponentName } from '../../../../components/enumsComponentsName';
+import { Icon, IconName, IconSize } from '../../../../components/icon/index.native';
+import { SpacerSize } from '../../../../components/spacer/index.native';
+import { Sticker } from '../../../../components/sticker/index.native';
+import { Text, TextLevels } from '../../../../components/text/index.native';
+import { View } from '../../../../components/view/index.native';
+import { getColorStyle, TrilogyColor, TypographyAlign, TypographyBold, VariantState } from '../../../../objects/index.native';
+import React, { useState } from 'react';
+import { StyleSheet, TouchableOpacity, View as ViewRN } from 'react-native';
+const CheckboxTile = React.forwardRef(({ disabled, checked, readonly, id = React.useId(), label, onChange, name, description, icon, horizontal, sticker, stickerVariant = VariantState.ACCENT, ...others }, ref) => {
+    const [_checked, setChecked] = useState(checked || false);
+    const [stickerHeight, setStickerHeight] = useState(0);
+    const styles = StyleSheet.create({
+        container: {
+            flexDirection: 'row',
+            paddingBottom: 5,
+            justifyContent: 'flex-start',
+        },
+        checkBox: {
+            alignItems: 'center',
+            justifyContent: 'center',
+            borderColor: getColorStyle(disabled ? TrilogyColor.DISABLED_FADE : _checked ? TrilogyColor.MAIN : TrilogyColor.STROKE),
+            borderWidth: 1,
+            width: 19,
+            height: 19,
+            borderRadius: 4,
+            backgroundColor: getColorStyle(disabled ? TrilogyColor.DISABLED_FADE : _checked ? TrilogyColor.MAIN : 'transparent'),
+        },
+        label: {
+            color: getColorStyle(disabled ? TrilogyColor.DISABLED : TrilogyColor.MAIN),
+        },
+        tile: {
+            padding: _checked ? SpacerSize.FOUR - 1 : SpacerSize.FOUR,
+            maxWidth: '50%',
+            borderWidth: (_checked && 2) || 1,
+            width: 'auto',
+            borderColor: getColorStyle(disabled ? TrilogyColor.DISABLED_FADE : _checked ? TrilogyColor.MAIN : TrilogyColor.STROKE),
+            borderRadius: 6,
+            textAlign: 'center',
+            alignItems: 'center',
+            backgroundColor: getColorStyle(disabled ? TrilogyColor.DISABLED_FADE : 'transparent'),
+        },
+        tileDescription: {
+            color: getColorStyle(disabled ? TrilogyColor.DISABLED_FADE : TrilogyColor.MAIN),
+            alignSelf: horizontal ? 'flex-start' : 'center',
+        },
+        horizontal: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: SpacerSize.THREE,
+            padding: _checked ? SpacerSize.FOUR - 1 : SpacerSize.FOUR,
+            width: '100%',
+            height: 'auto',
+            borderWidth: (_checked && 2) || 1,
+            borderColor: getColorStyle(disabled ? TrilogyColor.DISABLED_FADE : _checked ? TrilogyColor.MAIN : TrilogyColor.STROKE),
+            borderRadius: 6,
+            backgroundColor: getColorStyle(disabled ? TrilogyColor.DISABLED_FADE : 'transparent'),
+        },
+        sticker: {
+            position: 'absolute',
+            top: _checked ? -stickerHeight / 2 - 1 : -stickerHeight / 2,
+            right: _checked ? 15 : 16,
+        },
+    });
+    const handleClick = () => {
+        if (!readonly) {
+            setChecked(!_checked);
+            if (onChange) {
+                onChange({
+                    checkboxId: id,
+                    checkboxValue: '',
+                    checkboxName: name || '',
+                    checkboxChecked: !_checked,
+                });
+            }
+        }
+    };
+    if (horizontal) {
+        return (React.createElement(TouchableOpacity, { ref: ref, disabled: disabled, style: styles.horizontal, onPress: () => handleClick() },
+            sticker && (React.createElement(ViewRN, { style: styles.sticker, onLayout: (e) => setStickerHeight(e.nativeEvent.layout.height) },
+                React.createElement(Sticker, { label: sticker, variant: stickerVariant, className: 'radio-sticker', small: true }))),
+            React.createElement(TouchableOpacity, { style: styles.checkBox, disabled: disabled, testID: id, onPressIn: () => handleClick() }, _checked && React.createElement(Icon, { size: IconSize.SMALLER, color: TrilogyColor.BACKGROUND, name: IconName.CHECK })),
+            icon && (React.createElement(ViewRN, { style: {
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                } },
+                React.createElement(Icon, { size: IconSize.SMALL, name: icon, color: disabled ? TrilogyColor.DISABLED : TrilogyColor.MAIN }))),
+            React.createElement(View, { style: { gap: SpacerSize.ONE, flex: 1 } },
+                label && typeof label.valueOf() === 'string' && (React.createElement(Text, { style: styles.label, level: TextLevels.ONE, typo: TypographyBold.TEXT_WEIGHT_SEMIBOLD }, String(label))),
+                description && typeof description.valueOf() === 'string' ? (React.createElement(Text, { level: TextLevels.TWO, style: styles.tileDescription }, String(description))) : (description))));
+    }
+    return (React.createElement(TouchableOpacity, { ref: ref, disabled: disabled, style: styles.tile, onPress: handleClick, ...others },
+        sticker && (React.createElement(ViewRN, { style: styles.sticker, onLayout: (e) => setStickerHeight(e.nativeEvent.layout.height) },
+            React.createElement(Sticker, { label: sticker, variant: stickerVariant, className: 'radio-sticker', small: true }))),
+        React.createElement(View, { style: { gap: SpacerSize.TWO } },
+            React.createElement(TouchableOpacity, { style: [styles.checkBox], disabled: disabled, testID: id, onPressIn: handleClick }, _checked && React.createElement(Icon, { size: IconSize.SMALLER, color: TrilogyColor.BACKGROUND, name: IconName.CHECK })),
+            icon && (React.createElement(View, { style: {
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                } },
+                React.createElement(Icon, { size: IconSize.SMALL, color: disabled ? TrilogyColor.DISABLED : TrilogyColor.MAIN, name: icon }))),
+            label && typeof label.valueOf() === 'string' && (React.createElement(Text, { level: TextLevels.ONE, typo: [TypographyBold.TEXT_WEIGHT_SEMIBOLD, TypographyAlign.TEXT_CENTERED], style: [styles.label] }, String(label))),
+            description && typeof description.valueOf() === 'string' && (React.createElement(Text, { level: TextLevels.TWO, typo: [TypographyAlign.TEXT_CENTERED] }, String(description))))));
+});
+CheckboxTile.displayName = ComponentName.CheckboxTiles;
+export default CheckboxTile;
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQ2hlY2tib3hUaWxlLm5hdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL2NvbXBvbmVudHMvY2hlY2tib3gvdGlsZXMvdGlsZS9DaGVja2JveFRpbGUubmF0aXZlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sa0NBQWtDLENBQUE7QUFDaEUsT0FBTyxFQUFFLElBQUksRUFBRSxRQUFRLEVBQUUsUUFBUSxFQUFFLE1BQU0sZ0NBQWdDLENBQUE7QUFDekUsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLGtDQUFrQyxDQUFBO0FBQzdELE9BQU8sRUFBRSxPQUFPLEVBQUUsTUFBTSxtQ0FBbUMsQ0FBQTtBQUMzRCxPQUFPLEVBQUUsSUFBSSxFQUFFLFVBQVUsRUFBRSxNQUFNLGdDQUFnQyxDQUFBO0FBQ2pFLE9BQU8sRUFBRSxJQUFJLEVBQUUsTUFBTSxnQ0FBZ0MsQ0FBQTtBQUNyRCxPQUFPLEVBQUUsYUFBYSxFQUFFLFlBQVksRUFBRSxlQUFlLEVBQUUsY0FBYyxFQUFFLFlBQVksRUFBRSxNQUFNLHdCQUF3QixDQUFBO0FBQ25ILE9BQU8sS0FBSyxFQUFFLEVBQUUsUUFBUSxFQUFFLE1BQU0sT0FBTyxDQUFBO0FBQ3ZDLE9BQU8sRUFBRSxVQUFVLEVBQUUsZ0JBQWdCLEVBQUUsSUFBSSxJQUFJLE1BQU0sRUFBRSxNQUFNLGNBQWMsQ0FBQTtBQUczRSxNQUFNLFlBQVksR0FBRyxLQUFLLENBQUMsVUFBVSxDQUNuQyxDQUNFLEVBQ0UsUUFBUSxFQUNSLE9BQU8sRUFDUCxRQUFRLEVBQ1IsRUFBRSxHQUFHLEtBQUssQ0FBQyxLQUFLLEVBQUUsRUFDbEIsS0FBSyxFQUNMLFFBQVEsRUFDUixJQUFJLEVBQ0osV0FBVyxFQUNYLElBQUksRUFDSixVQUFVLEVBQ1YsT0FBTyxFQUNQLGNBQWMsR0FBRyxZQUFZLENBQUMsTUFBTSxFQUNwQyxHQUFHLE1BQU0sRUFDVixFQUNE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

package/lib/components/checkbox/tiles/tile/CheckboxTileProps.d.mts

@@ -0,0 +1,17 @@
+import { VariantProps } from '../../../../objects/index';
+import { TouchableOpacity } from 'react-native';
+import { CheckboxProps } from '../../../../components/checkbox/CheckboxProps';
+import { IconName, IconNameValues } from '../../../../components/icon';
+import { CommonProps } from '../../../../objects/facets/CommonProps';
+/**
+ * Columns Item Interface
+ */
+export interface CheckboxTileProps extends CheckboxProps, CommonProps {
+    horizontal?: boolean;
+    icon?: IconName | IconNameValues;
+    description?: string | React.ReactNode;
+    sticker?: string;
+    stickerVariant?: VariantProps['variant'];
+}
+export type CheckboxTileRef = HTMLDivElement;
+export type CheckboxTileNativeRef = TouchableOpacity;

package/lib/components/checkbox/tiles/tile/CheckboxTileProps.d.ts

@@ -1,6 +1,7 @@
-/// <reference types="react" />
-import { IconName, IconNameValues } from '../../../../components/icon';
+import { VariantProps } from '../../../../objects/index';
+import { TouchableOpacity } from 'react-native';
 import { CheckboxProps } from '../../../../components/checkbox/CheckboxProps';
+import { IconName, IconNameValues } from '../../../../components/icon';
 import { CommonProps } from '../../../../objects/facets/CommonProps';
 /**
  * Columns Item Interface
@@ -9,4 +10,8 @@ export interface CheckboxTileProps extends CheckboxProps, CommonProps {
     horizontal?: boolean;
     icon?: IconName | IconNameValues;
     description?: string | React.ReactNode;
+    sticker?: string;
+    stickerVariant?: VariantProps['variant'];
 }
+export type CheckboxTileRef = HTMLDivElement;
+export type CheckboxTileNativeRef = TouchableOpacity;

package/lib/components/checkbox/tiles/tile/CheckboxTileProps.mjs

@@ -0,0 +1 @@
+"use client";

package/lib/components/checkbox/tiles/tile/CheckboxTilePropsDefaults.js

@@ -73,63 +73,23 @@ export default {
       "ReactPortal"
     ]
   },
-  "checked": {
-    "type": "boolean",
-    "values": [
-      "undefined",
-      "false",
-      "true"
-    ]
-  },
-  "disabled": {
-    "type": "boolean",
-    "values": [
-      "undefined",
-      "false",
-      "true"
-    ]
-  },
-  "readonly": {
-    "type": "boolean",
-    "values": [
-      "undefined",
-      "false",
-      "true"
-    ]
-  },
-  "label": {
-    "type": "string",
-    "values": [
-      "undefined",
-      "string"
-    ]
-  },
-  "onChange": {
-    "type": "function",
-    "values": [
-      "undefined",
-      "CheckboxChangeEventHandler"
-    ]
-  },
-  "name": {
-    "type": "string",
-    "values": [
-      "undefined",
-      "string"
-    ]
-  },
-  "value": {
+  "sticker": {
     "type": "string",
     "values": [
       "undefined",
       "string"
     ]
   },
-  "accessibilityLabel": {
-    "type": "string",
+  "stickerVariant": {
+    "type": "enum",
     "values": [
       "undefined",
-      "string"
+      "INFO",
+      "MAIN",
+      "ACCENT",
+      "MAIN",
+      "ACCENT",
+      "INFO"
     ]
   },
   "id": {

package/lib/components/checkbox/tiles/tile/index.d.mts

@@ -0,0 +1,2 @@
+import CheckboxTile from './CheckboxTile';
+export default CheckboxTile;

package/lib/components/checkbox/tiles/tile/index.js

@@ -1,3 +1,289 @@
-import CheckboxTile from './CheckboxTile';
-export default CheckboxTile;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9jb21wb25lbnRzL2NoZWNrYm94L3RpbGVzL3RpbGUvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxZQUFZLE1BQU0sZ0JBQWdCLENBQUE7QUFFekMsZUFBZSxZQUFZLENBQUEifQ==
+"use client";
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// components/checkbox/tiles/tile/index.ts
+var tile_exports = {};
+__export(tile_exports, {
+  default: () => tile_default
+});
+module.exports = __toCommonJS(tile_exports);
+
+// context/index.tsx
+var React = __toESM(require("react"));
+var TrilogyContext = React.createContext({
+  styled: false,
+  setStyled: () => void 0
+});
+var useTrilogyContext = () => {
+  const context = React.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 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);
+var canUseNative = typeof navigator != "undefined" && navigator.product == "ReactNative";
+var device = canUseNative ? Native : canUseDOM ? Browser : Server;
+var SSRObjectDefined = {
+  isBrowser: device === Browser,
+  isServer: device === Server,
+  isNative: device === Native,
+  device,
+  canUseWorkers: typeof Worker !== "undefined",
+  canUseEventListeners: device === Browser && !!window.addEventListener,
+  canUseViewport: device === Browser && !!window.screen
+};
+var assign = (...args) => Object.assign({}, ...args);
+var values = (obj) => Object.values(obj);
+var toArrayObject = () => assign((values(SSRObjectDefined), SSRObjectDefined));
+var SSRObject = toArrayObject();
+
+// context/providerTheme/index.tsx
+var import_react = __toESM(require("react"));
+var defaultTheme = {
+  icons: {},
+  colors: {},
+  fontFamily: {}
+};
+var defaultContextValue = {
+  theme: defaultTheme,
+  setTheme: () => void 0
+};
+var TrilogyThemeContext = import_react.default.createContext(defaultContextValue);
+
+// objects/facets/Color/index.tsx
+var import_react2 = 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"],
+  ["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 = colors[trilogyColor];
+  return color[1];
+};
+
+// objects/atoms/Background/index.ts
+var getBackgroundClassName = (backgroundType) => {
+  return `background-${getColorClassName(backgroundType)}`;
+};
+
+// objects/facets/Justifiable/index.ts
+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 React3 = __toESM(require("react"));
+var Icon = React3.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__ */ React3.createElement("span", { id, onClick: onClick && onClick, className: classes, ...others, ref }, /* @__PURE__ */ React3.createElement("i", { className: hashClass(styled, (0, import_clsx.default)(name)), "aria-hidden": "true" }));
+  }
+);
+Icon.displayName = "Icon" /* Icon */;
+var Icon_default = Icon;
+
+// objects/facets/Status/index.ts
+var STATUS_COLORS = {
+  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/facets/Variant/index.ts
+var getVariantClassName = (variantType) => {
+  if (!variantType) return "";
+  switch (variantType) {
+    case "MAIN":
+      return "main";
+    case "ACCENT":
+      return "accent";
+    case "PRIMARY":
+      return "primary";
+    case "SECONDARY":
+      return "secondary";
+    case "GHOST":
+      return "ghost";
+    case "INFO":
+      return "info";
+    default:
+      return "";
+  }
+};
+
+// objects/Typography/TypographyBold/index.tsx
+var import_react3 = require("react");
+
+// components/sticker/Sticker.tsx
+var import_clsx2 = __toESM(require("clsx"));
+var import_react4 = __toESM(require("react"));
+var Sticker = import_react4.default.forwardRef(
+  ({ className, id, variant, small, label, outlined, iconName, accessibilityLabel, ...others }, ref) => {
+    const { styled } = useTrilogyContext();
+    const classes = hashClass(
+      styled,
+      (0, import_clsx2.default)(
+        "sticker",
+        variant && is(getVariantClassName(variant)),
+        small && is("small"),
+        className,
+        outlined && is("outlined"),
+        is("vcentered")
+      )
+    );
+    return /* @__PURE__ */ import_react4.default.createElement("p", { ref, id, className: classes, "aria-label": accessibilityLabel, ...others }, iconName && /* @__PURE__ */ import_react4.default.createElement(Icon_default, { size: small ? "smaller" /* SMALLER */ : "small" /* SMALL */, name: iconName }), label);
+  }
+);
+Sticker.displayName = "Sticker" /* Sticker */;
+var Sticker_default = Sticker;
+
+// components/checkbox/tiles/tile/CheckboxTile.tsx
+var import_clsx3 = __toESM(require("clsx"));
+var React5 = __toESM(require("react"));
+var import_react5 = require("react");
+var CheckboxTile = React5.forwardRef(
+  ({
+    checked,
+    className,
+    disabled,
+    readonly,
+    id = React5.useId(),
+    label,
+    onChange,
+    name,
+    value,
+    description,
+    icon,
+    horizontal,
+    required,
+    sticker,
+    stickerVariant = "ACCENT" /* ACCENT */,
+    ...others
+  }, ref) => {
+    const { styled } = useTrilogyContext();
+    const [_checked, setChecked] = (0, import_react5.useState)(checked || false);
+    (0, import_react5.useEffect)(() => {
+      if (!readonly) {
+        setChecked(checked || false);
+      }
+    }, [checked, readonly]);
+    return /* @__PURE__ */ React5.createElement("div", { ref, className: hashClass(styled, (0, import_clsx3.default)("checkbox-tile", horizontal && is("horizontal"), className)) }, /* @__PURE__ */ React5.createElement(
+      "input",
+      {
+        type: "checkbox",
+        readOnly: readonly,
+        required,
+        id,
+        disabled,
+        name,
+        value,
+        checked: readonly ? checked : _checked,
+        onChange: (e) => onChange ? onChange : setChecked(e.target.checked),
+        ...others
+      }
+    ), /* @__PURE__ */ React5.createElement("label", { htmlFor: id, className: hashClass(styled, (0, import_clsx3.default)("checkbox-label")) }, icon && /* @__PURE__ */ React5.createElement(Icon_default, { name: icon, size: "medium" /* MEDIUM */ }), horizontal ? /* @__PURE__ */ React5.createElement("span", null, /* @__PURE__ */ React5.createElement("span", { className: hashClass(styled, (0, import_clsx3.default)("checkbox-title")) }, label), description && /* @__PURE__ */ React5.createElement("span", { className: hashClass(styled, (0, import_clsx3.default)("checkbox-description")) }, description)) : /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement("span", { className: hashClass(styled, (0, import_clsx3.default)("checkbox-title")) }, label), description && /* @__PURE__ */ React5.createElement("span", { className: hashClass(styled, (0, import_clsx3.default)("checkbox-description")) }, description))), sticker && /* @__PURE__ */ React5.createElement(Sticker_default, { label: sticker, variant: stickerVariant, className: "checkbox-sticker", small: true }));
+  }
+);
+CheckboxTile.displayName = "CheckboxTiles" /* CheckboxTiles */;
+var CheckboxTile_default = CheckboxTile;
+
+// components/checkbox/tiles/tile/index.ts
+var tile_default = CheckboxTile_default;

package/lib/components/checkbox/tiles/tile/index.mjs

@@ -0,0 +1,66 @@
+"use client";
+import {
+  CheckboxTile_default
+} from "../../../../chunk-DDFUJIKA.mjs";
+import "../../../../chunk-22RRO4UK.mjs";
+import "../../../../chunk-NCNRV7Y6.mjs";
+import "../../../../chunk-MAMQO43Y.mjs";
+import "../../../../chunk-HQESKFCX.mjs";
+import "../../../../chunk-RXBVZD3M.mjs";
+import "../../../../chunk-DB5J6PBL.mjs";
+import "../../../../chunk-GP5CJGRF.mjs";
+import "../../../../chunk-HQXKHRER.mjs";
+import "../../../../chunk-NVH4ZPGW.mjs";
+import "../../../../chunk-62DJK35E.mjs";
+import "../../../../chunk-PAEZ47M2.mjs";
+import "../../../../chunk-A2ASOVUR.mjs";
+import "../../../../chunk-3XMSRU64.mjs";
+import "../../../../chunk-L5TMSDJR.mjs";
+import "../../../../chunk-RJO5KKUW.mjs";
+import "../../../../chunk-R7HI6GOP.mjs";
+import "../../../../chunk-SUNBSFL4.mjs";
+import "../../../../chunk-A4CI2ZMI.mjs";
+import "../../../../chunk-UTA75ELV.mjs";
+import "../../../../chunk-L25MU6JT.mjs";
+import "../../../../chunk-6TNYDJM7.mjs";
+import "../../../../chunk-QOEJLTZN.mjs";
+import "../../../../chunk-B6WC6WS2.mjs";
+import "../../../../chunk-K2VWHGPL.mjs";
+import "../../../../chunk-FTTU4DJW.mjs";
+import "../../../../chunk-L7CNF7H6.mjs";
+import "../../../../chunk-6BTWLQPI.mjs";
+import "../../../../chunk-G6BHSMLA.mjs";
+import "../../../../chunk-THOTRBD4.mjs";
+import "../../../../chunk-XIQL4ZTN.mjs";
+import "../../../../chunk-UUXUTBLZ.mjs";
+import "../../../../chunk-F5FPTZND.mjs";
+import "../../../../chunk-IGMJNGTZ.mjs";
+import "../../../../chunk-5QUXSOHX.mjs";
+import "../../../../chunk-ACSGONQB.mjs";
+import "../../../../chunk-ATW7ITPH.mjs";
+import "../../../../chunk-JA5LYEG4.mjs";
+import "../../../../chunk-HV6TXVFA.mjs";
+import "../../../../chunk-AD63JH53.mjs";
+import "../../../../chunk-YYWCL3GN.mjs";
+import "../../../../chunk-Y3J6NXB4.mjs";
+import "../../../../chunk-CYNSXZSV.mjs";
+import "../../../../chunk-L4UDEKQK.mjs";
+import "../../../../chunk-WC3ULY5W.mjs";
+import "../../../../chunk-JOSZ4COK.mjs";
+import "../../../../chunk-P372ZF3A.mjs";
+import "../../../../chunk-Y7CEUBIZ.mjs";
+import "../../../../chunk-HU3FAWMX.mjs";
+import "../../../../chunk-OGATDHMZ.mjs";
+import "../../../../chunk-ODKCJMCG.mjs";
+import "../../../../chunk-SWVRRUW7.mjs";
+import "../../../../chunk-UFMRE754.mjs";
+import "../../../../chunk-4UHBBNZ7.mjs";
+import "../../../../chunk-NTS75UVH.mjs";
+import "../../../../chunk-ZB4OWTDD.mjs";
+import "../../../../chunk-QIPGVLHJ.mjs";
+
+// components/checkbox/tiles/tile/index.ts
+var tile_default = CheckboxTile_default;
+export {
+  tile_default as default
+};

package/lib/components/checkbox/tiles/tile/index.native.d.ts

@@ -0,0 +1,2 @@
+import CheckboxTile from './CheckboxTile.native';
+export default CheckboxTile;

package/lib/components/checkbox/tiles/tile/index.native.js

@@ -0,0 +1,3 @@
+import CheckboxTile from './CheckboxTile.native';
+export default CheckboxTile;
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXgubmF0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vY29tcG9uZW50cy9jaGVja2JveC90aWxlcy90aWxlL2luZGV4Lm5hdGl2ZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLFlBQVksTUFBTSx1QkFBdUIsQ0FBQTtBQUVoRCxlQUFlLFlBQVksQ0FBQSJ9

package/lib/components/chips/Chips.d.mts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { ChipsProps } from './ChipsProps';
+/**
+ * Chips Component - has to be in a ChipsList component
+ * @param children {string} Chips content
+ * @param id {string} Chips id
+ * @param onClick {Function} onClick Event for all Chips
+ * @param active {boolean} active Render Chips Active
+ * @param disabled {boolean} Disabled chips
+ *  * - -------------------------- WEB PROPERTIES -------------------------------
+ * @param className {string} Additional CSS Classes
+ * @param testId {string} Test Id for Test Integration
+ * @param others
+ */
+declare const Chips: React.ForwardRefExoticComponent<ChipsProps & React.RefAttributes<HTMLButtonElement>>;
+export default Chips;

package/lib/components/chips/Chips.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
-import { ChipsProps } from "./ChipsProps";
+import React from 'react';
+import { ChipsProps } from './ChipsProps';
 /**
  * Chips Component - has to be in a ChipsList component
  * @param children {string} Chips content
@@ -8,9 +8,9 @@ import { ChipsProps } from "./ChipsProps";
  * @param active {boolean} active Render Chips Active
  * @param disabled {boolean} Disabled chips
  *  * - -------------------------- WEB PROPERTIES -------------------------------
- * @param className {string} Additionnal CSS Classes
+ * @param className {string} Additional CSS Classes
  * @param testId {string} Test Id for Test Integration
  * @param others
  */
-declare const Chips: ({ className, onClick, children, active, disabled, id, ...others }: ChipsProps) => JSX.Element;
+declare const Chips: React.ForwardRefExoticComponent<ChipsProps & React.RefAttributes<HTMLButtonElement>>;
 export default Chips;