@eyesee/ui-components 0.4.0 → 0.6.0

package/dist/components/Button/Button.js

@@ -1,43 +1,44 @@
 import { jsxs as m, jsx as n } from "react/jsx-runtime";
-import { useState as W, useRef as j } from "react";
+import { useState as j, useRef as B } from "react";
 import c from "clsx";
-import { ChevronDownIcon as B } from "../icons-v2/ChevronDownIcon.js";
-import { ChevronUpIcon as L } from "../icons-v2/ChevronUpIcon.js";
-import R from "../../hooks/useClickOutside.js";
+import { ChevronDownIcon as L } from "../icons-v2/ChevronDownIcon.js";
+import { ChevronUpIcon as R } from "../icons-v2/ChevronUpIcon.js";
+import S from "../../hooks/useClickOutside.js";
+import { ListItem as A } from "../ListItem/ListItem.js";
+import { DropdownList as E } from "../DropdownList/DropdownList.js";
+import { Tooltip as U } from "../Tooltip/Tooltip.js";
 import e from "./Button.module.scss.js";
-import { ListItem as S } from "../ListItem/ListItem.js";
-import { DropdownList as A } from "../DropdownList/DropdownList.js";
-import { Tooltip as E } from "../Tooltip/Tooltip.js";
-const Q = ({
+const V = ({
   text: l,
   options: r = [],
   onClick: i = () => {
   },
-  className: d,
+  className: b,
   iconSize: p = "m",
-  size: b = "md",
-  variant: g = "primary",
-  type: w = "fill",
+  size: g = "md",
+  variant: w = "primary",
+  type: I = "fill",
+  pressed: u = !1,
   icon: a = null,
-  tooltipContent: u = null,
-  tooltipTitle: I,
-  disabled: v = !1,
-  fullWidth: C = !1,
-  dropdownAlign: N = "start",
-  tooltipProps: O = { position: "bottom", variant: "light" },
-  ...y
+  tooltipContent: h = null,
+  tooltipTitle: v,
+  disabled: C = !1,
+  fullWidth: N = !1,
+  dropdownAlign: O = "start",
+  tooltipProps: y = { position: "bottom", variant: "light" },
+  ...x
 }) => {
-  const [s, o] = W(!1), h = j(null);
-  R(h, () => o(!1));
-  const x = (t) => {
+  const [s, o] = j(!1), f = B(null);
+  S(f, () => o(!1));
+  const D = (t) => {
     i(t), o(!1);
-  }, D = a && !l && r.length === 0, k = a && !l, T = !!u, f = /* @__PURE__ */ m(
+  }, k = a && !l && r.length === 0, T = a && !l, W = !!h, d = /* @__PURE__ */ m(
     "div",
     {
-      ref: h,
+      ref: f,
       "data-button-wrapper": !0,
-      className: c(e.wrapper, d, C && e.fullWidth),
-      ...y,
+      className: c(e.wrapper, b, N && e.fullWidth),
+      ...x,
       children: [
         /* @__PURE__ */ m(
           "button",
@@ -45,17 +46,19 @@ const Q = ({
             type: "button",
             className: c(
               e.button,
-              e[b],
               e[g],
               e[w],
+              e[I],
               r.length > 0 && e.hasDropdown,
-              D && e.iconOnly,
-              k && e.isIcon
+              k && e.iconOnly,
+              T && e.isIcon,
+              u && e.pressed
             ),
             onClick: () => r.length > 0 ? o((t) => !t) : i(),
             "aria-expanded": s,
+            "aria-pressed": u,
             "aria-haspopup": "menu",
-            disabled: v,
+            disabled: C,
             children: [
               /* @__PURE__ */ m(
                 "span",
@@ -70,12 +73,12 @@ const Q = ({
                   ]
                 }
               ),
-              r.length > 0 && /* @__PURE__ */ n("span", { className: e.buttonArrow, children: s ? /* @__PURE__ */ n(L, { iconSize: p }) : /* @__PURE__ */ n(B, { iconSize: p }) })
+              r.length > 0 && /* @__PURE__ */ n("span", { className: e.buttonArrow, children: s ? /* @__PURE__ */ n(R, { iconSize: p }) : /* @__PURE__ */ n(L, { iconSize: p }) })
             ]
           }
         ),
-        s && r.length > 0 && /* @__PURE__ */ n(A, { align: N, children: r.map((t) => /* @__PURE__ */ n(
-          S,
+        s && r.length > 0 && /* @__PURE__ */ n(E, { align: O, children: r.map((t) => /* @__PURE__ */ n(
+          A,
           {
             role: "menuitem",
             title: t.label,
@@ -83,15 +86,15 @@ const Q = ({
             horizontalSpacing: "xs",
             verticalSpacing: "none",
             ...t,
-            onClick: () => x(t)
+            onClick: () => D(t)
           },
           t.value
         )) })
       ]
     }
   );
-  return T ? /* @__PURE__ */ n(E, { title: I, content: u, ...O, children: f }) : f;
+  return W ? /* @__PURE__ */ n(U, { title: v, content: h, ...y, children: d }) : d;
 };
 export {
-  Q as Button
+  V as Button
 };

package/dist/components/Button/Button.module.scss.js

@@ -1,53 +1,55 @@
-const t = "_fullWidth_167fk_3", n = "_button_167fk_6", o = "_wrapper_167fk_10", _ = "_buttonContent_167fk_27", s = "_icon_167fk_27", c = "_buttonArrow_167fk_28", r = "_buttonText_167fk_36", f = "_iconOnly_167fk_53", e = "_buttonContentDropdown_167fk_56", l = "_hasDropdown_167fk_62", u = "_lg_167fk_78", k = "_isIcon_167fk_81", i = "_md_167fk_85", x = "_sm_167fk_92", a = "_xs_167fk_99", d = "_xxs_167fk_106", b = "_xxxs_167fk_113", p = "_primary_167fk_123", w = "_fill_167fk_123", y = "_outline_167fk_154", m = "_blank_167fk_167", h = "_secondary_167fk_214", C = "_destructive_167fk_305", D = "_neutral_167fk_396", g = {
+const t = "_fullWidth_16rg3_3", n = "_button_16rg3_6", o = "_wrapper_16rg3_10", _ = "_buttonContent_16rg3_27", r = "_icon_16rg3_27", s = "_buttonArrow_16rg3_28", c = "_buttonText_16rg3_36", e = "_iconOnly_16rg3_53", l = "_buttonContentDropdown_16rg3_56", g = "_hasDropdown_16rg3_62", u = "_lg_16rg3_78", i = "_isIcon_16rg3_81", d = "_md_16rg3_85", x = "_sm_16rg3_92", a = "_xs_16rg3_99", p = "_xxs_16rg3_106", b = "_xxxs_16rg3_113", w = "_primary_16rg3_123", y = "_fill_16rg3_123", m = "_pressed_16rg3_127", f = "_outline_16rg3_154", h = "_blank_16rg3_167", C = "_secondary_16rg3_214", D = "_destructive_16rg3_305", k = "_neutral_16rg3_396", v = {
   fullWidth: t,
   button: n,
   wrapper: o,
   buttonContent: _,
-  icon: s,
-  buttonArrow: c,
-  buttonText: r,
-  iconOnly: f,
-  buttonContentDropdown: e,
-  hasDropdown: l,
+  icon: r,
+  buttonArrow: s,
+  buttonText: c,
+  iconOnly: e,
+  buttonContentDropdown: l,
+  hasDropdown: g,
   lg: u,
-  isIcon: k,
-  md: i,
+  isIcon: i,
+  md: d,
   sm: x,
   xs: a,
-  xxs: d,
+  xxs: p,
   xxxs: b,
-  primary: p,
-  fill: w,
-  outline: y,
-  blank: m,
-  secondary: h,
-  destructive: C,
-  neutral: D
+  primary: w,
+  fill: y,
+  pressed: m,
+  outline: f,
+  blank: h,
+  secondary: C,
+  destructive: D,
+  neutral: k
 };
 export {
-  m as blank,
+  h as blank,
   n as button,
-  c as buttonArrow,
+  s as buttonArrow,
   _ as buttonContent,
-  e as buttonContentDropdown,
-  r as buttonText,
-  g as default,
-  C as destructive,
-  w as fill,
+  l as buttonContentDropdown,
+  c as buttonText,
+  v as default,
+  D as destructive,
+  y as fill,
   t as fullWidth,
-  l as hasDropdown,
-  s as icon,
-  f as iconOnly,
-  k as isIcon,
+  g as hasDropdown,
+  r as icon,
+  e as iconOnly,
+  i as isIcon,
   u as lg,
-  i as md,
-  D as neutral,
-  y as outline,
-  p as primary,
-  h as secondary,
+  d as md,
+  k as neutral,
+  f as outline,
+  m as pressed,
+  w as primary,
+  C as secondary,
   x as sm,
   o as wrapper,
   a as xs,
-  d as xxs,
+  p as xxs,
   b as xxxs
 };

package/dist/components/Checkbox/Checkbox.js

@@ -1,10 +1,10 @@
 import { jsxs as z, jsx as r } from "react/jsx-runtime";
 import { useId as C } from "react";
 import n from "clsx";
-import o from "./Checkbox.module.scss.js";
 import { CheckmarkLargeIcon as I } from "../icons-v2/CheckmarkLargeIcon.js";
 import { MinusIcon as y } from "../icons-v2/MinusIcon.js";
 import { iconSizes as a } from "../icons-v2/constants.js";
+import o from "./Checkbox.module.scss.js";
 const N = (e) => e === "lg" ? "m" : "s", W = ({
   label: e,
   checked: c = !1,

package/dist/components/Checkbox/Checkbox.module.scss.js

@@ -1,17 +1,17 @@
-const c = "_checkboxWrapper_apc3k_3", e = "_disabled_apc3k_13", _ = "_input_apc3k_18", a = "_checkbox_apc3k_3", l = "_filled_apc3k_42", p = "_labelText_apc3k_46", t = {
-  checkboxWrapper: c,
-  disabled: e,
+const e = "_checkboxWrapper_1u1h6_3", c = "_disabled_1u1h6_13", _ = "_input_1u1h6_18", l = "_checkbox_1u1h6_3", t = "_filled_1u1h6_42", o = "_labelText_1u1h6_46", b = {
+  checkboxWrapper: e,
+  disabled: c,
   input: _,
-  checkbox: a,
-  filled: l,
-  labelText: p
+  checkbox: l,
+  filled: t,
+  labelText: o
 };
 export {
-  a as checkbox,
-  c as checkboxWrapper,
-  t as default,
-  e as disabled,
-  l as filled,
+  l as checkbox,
+  e as checkboxWrapper,
+  b as default,
+  c as disabled,
+  t as filled,
   _ as input,
-  p as labelText
+  o as labelText
 };

package/dist/components/ImagePlaceholder/ImageHoverPreview/ImageHoverPreview.js

@@ -0,0 +1,64 @@
+import { jsxs as f, Fragment as p, jsx as m } from "react/jsx-runtime";
+import { useRef as I, useState as E } from "react";
+import { createPortal as M } from "react-dom";
+import P from "../ImagePlaceholder.js";
+import d from "./ImageHoverPreview.module.scss.js";
+const w = 200, r = 8, u = 8, x = () => document.getElementById("modal") ?? document.body, g = (t, e, a) => Math.min(Math.max(t, e), a), j = ({ previewSize: t = w, ...e }) => {
+  const a = I(null), [s, c] = E(null);
+  return /* @__PURE__ */ f(p, { children: [
+    /* @__PURE__ */ m(
+      P,
+      {
+        ...e,
+        imageAreaRef: a,
+        onImageAreaMouseEnter: (l) => {
+          var i;
+          l.stopPropagation();
+          const o = (i = a.current) == null ? void 0 : i.getBoundingClientRect();
+          if (!o) return;
+          let n = o.right + u;
+          n + t > window.innerWidth - r && (n = o.left - t - u), n = g(
+            n,
+            r,
+            window.innerWidth - t - r
+          );
+          const h = g(
+            o.top + o.height / 2 - t / 2,
+            r,
+            window.innerHeight - t - r
+          );
+          c({ top: h, left: n });
+        },
+        onImageAreaMouseLeave: (l) => {
+          l.stopPropagation(), c(null);
+        }
+      }
+    ),
+    s && M(
+      /* @__PURE__ */ m(
+        "div",
+        {
+          className: d.preview,
+          style: {
+            top: s.top,
+            left: s.left,
+            width: t,
+            height: t
+          },
+          children: /* @__PURE__ */ m(
+            "img",
+            {
+              src: e.url,
+              alt: e.text ?? "",
+              className: d.previewImage
+            }
+          )
+        }
+      ),
+      x()
+    )
+  ] });
+};
+export {
+  j as ImageHoverPreview
+};

package/dist/components/ImagePlaceholder/ImageHoverPreview/ImageHoverPreview.module.scss.js

@@ -0,0 +1,9 @@
+const e = "_preview_18mb5_3", p = "_previewImage_18mb5_12", r = {
+  preview: e,
+  previewImage: p
+};
+export {
+  r as default,
+  e as preview,
+  p as previewImage
+};

package/dist/components/ImagePlaceholder/ImagePlaceholder.js

@@ -1,67 +1,73 @@
 import { jsxs as c, jsx as o } from "react/jsx-runtime";
 import { useState as b } from "react";
-import n from "clsx";
-import { Checkbox as y } from "../Checkbox/Checkbox.js";
-import { tagPropsFromTag as O, badgePropsFromTag as F, pillPropsFromTag as R } from "./utilsImgPh.js";
-import { ASPECT_RATIOS as N, TAG_TYPES as T, OVERLAYS as z, TEXT_POSITIONS as x, LINES as M } from "./constantsImgPh.js";
-import { ImageOffIcon as _ } from "../icons-v2/ImageOffIcon.js";
-import { MoreIcon as j } from "../icons-v2/MoreIcon.js";
-import { XIcon as B } from "../icons-v2/XIcon.js";
+import i from "clsx";
+import { Checkbox as F } from "../Checkbox/Checkbox.js";
+import { tagPropsFromTag as R, badgePropsFromTag as z, pillPropsFromTag as _ } from "./utilsImgPh.js";
+import { ASPECT_RATIOS as N, TAG_TYPES as T, OVERLAYS as j, TEXT_POSITIONS as x, LINES as B } from "./constantsImgPh.js";
+import { ImageOffIcon as X } from "../icons-v2/ImageOffIcon.js";
+import { MoreIcon as Y } from "../icons-v2/MoreIcon.js";
+import { XIcon as D } from "../icons-v2/XIcon.js";
 import e from "./ImagePlaceholder.module.scss.js";
-import { Button as X } from "../Button/Button.js";
-import { EllipsisTooltip as Y } from "../EllipsisTooltip/EllipsisTooltip.js";
-import { DropdownList as D } from "../DropdownList/DropdownList.js";
-import { ListItem as G } from "../ListItem/ListItem.js";
-import { Tag as V } from "../Tag/Tag.js";
-import { Badge as W } from "../Badge/Badge.js";
-import { Pill as q } from "../Pill/Pill.js";
-const to = ({
+import { Button as G } from "../Button/Button.js";
+import { EllipsisTooltip as V } from "../EllipsisTooltip/EllipsisTooltip.js";
+import { DropdownList as W } from "../DropdownList/DropdownList.js";
+import { ListItem as q } from "../ListItem/ListItem.js";
+import { Tag as H } from "../Tag/Tag.js";
+import { Badge as J } from "../Badge/Badge.js";
+import { Pill as K } from "../Pill/Pill.js";
+const ho = ({
   id: I,
   url: k,
   text: a,
   textPosition: t = x.inside,
   tag: r,
   overlay: s,
-  isChecked: S,
+  isChecked: v,
   onChecked: p,
   menu: d,
-  aspectRatio: v = N["1/1"],
-  lines: C = M[1],
+  aspectRatio: S = N["1/1"],
+  lines: C = B[1],
   disabled: m = !1,
   onClose: E = () => {
-  }
+  },
+  imageAreaRef: g,
+  onImageAreaMouseEnter: P,
+  onImageAreaMouseLeave: w
 }) => {
-  const [h, g] = b(!1), [i, P] = b(!1), u = () => {
+  const [u, L] = b(!1), [n, A] = b(!1), h = () => {
     switch (r == null ? void 0 : r.type) {
       case "pill":
-        return /* @__PURE__ */ o(q, { ...R(r) });
+        return /* @__PURE__ */ o(K, { ..._(r) });
       case "badge":
-        return /* @__PURE__ */ o(W, { ...F(r) });
+        return /* @__PURE__ */ o(J, { ...z(r) });
       case "tag":
-        return /* @__PURE__ */ o(V, { ...O(r) });
+        return /* @__PURE__ */ o(H, { ...R(r) });
       default:
         return null;
     }
-  }, f = !a || t === x.outside ? "8px" : "8px 8px 0 0", w = Number(C), L = n(e.contentText, e.contentTextClamped), A = { WebkitLineClamp: w };
-  return /* @__PURE__ */ c("div", { className: n(e.imagePlaceholder, m && e.disabled), children: [
+  }, f = !a || t === x.outside ? "8px" : "8px 8px 0 0", y = Number(C), M = i(e.contentText, e.contentTextClamped), O = { WebkitLineClamp: y };
+  return /* @__PURE__ */ c("div", { className: i(e.imagePlaceholder, m && e.disabled), children: [
     /* @__PURE__ */ c(
       "div",
       {
-        className: n(
+        ref: g,
+        className: i(
           e.imageArea,
           s === "checkbox" && e.clickable,
-          s === "checkbox" && !i && e.checkboxSelectable
+          s === "checkbox" && !n && e.checkboxSelectable
         ),
         style: { borderRadius: f },
-        onClick: s === "checkbox" && !i && !m ? p : void 0,
+        onClick: s === "checkbox" && !n && !m ? p : void 0,
+        onMouseEnter: P,
+        onMouseLeave: w,
         children: [
           /* @__PURE__ */ o(
             "div",
             {
               className: e.imageFrame,
-              style: { aspectRatio: N[v], borderRadius: f },
-              children: i ? /* @__PURE__ */ o("div", { className: e.imageError, children: /* @__PURE__ */ o(
-                _,
+              style: { aspectRatio: N[S], borderRadius: f },
+              children: n ? /* @__PURE__ */ o("div", { className: e.imageError, children: /* @__PURE__ */ o(
+                X,
                 {
                   iconSize: "l",
                   strokeColor: "var(--color--icon--disabled--default)"
@@ -72,26 +78,26 @@ const to = ({
                   className: e.image,
                   src: k,
                   alt: a,
-                  onError: () => P(!0)
+                  onError: () => A(!0)
                 }
               )
             }
           ),
-          !a && T.has(r == null ? void 0 : r.type) ? /* @__PURE__ */ o("div", { className: e.tagInImage, children: u() }) : null,
-          z.has(s) && /* @__PURE__ */ c("div", { className: e.overlay, onClick: (l) => l.stopPropagation(), children: [
-            s === "checkbox" && !i ? /* @__PURE__ */ o(
-              y,
+          !a && T.has(r == null ? void 0 : r.type) ? /* @__PURE__ */ o("div", { className: e.tagInImage, children: h() }) : null,
+          j.has(s) && /* @__PURE__ */ c("div", { className: e.overlay, onClick: (l) => l.stopPropagation(), children: [
+            s === "checkbox" && !n ? /* @__PURE__ */ o(
+              F,
               {
-                checked: S,
+                checked: v,
                 onChange: p,
                 size: "lg",
                 disabled: m
               }
             ) : null,
             s === "close" ? /* @__PURE__ */ o(
-              X,
+              G,
               {
-                icon: /* @__PURE__ */ o(B, {}),
+                icon: /* @__PURE__ */ o(D, {}),
                 size: "xxs",
                 variant: "fill",
                 type: "neutral",
@@ -102,23 +108,23 @@ const to = ({
         ]
       }
     ),
-    a ? /* @__PURE__ */ c("div", { className: n(e.belowImage, e[t]), children: [
-      T.has(r == null ? void 0 : r.type) ? /* @__PURE__ */ o("div", { children: u() }) : null,
+    a ? /* @__PURE__ */ c("div", { className: i(e.belowImage, e[t]), children: [
+      T.has(r == null ? void 0 : r.type) ? /* @__PURE__ */ o("div", { children: h() }) : null,
       /* @__PURE__ */ c("div", { className: e.content, children: [
         /* @__PURE__ */ o(
-          Y,
+          V,
           {
             position: "bottom",
             showArrow: !0,
-            className: L,
-            wrapperStyle: A,
+            className: M,
+            wrapperStyle: O,
             children: a
           }
         ),
         d && /* @__PURE__ */ c("div", { className: e.menu, children: [
-          /* @__PURE__ */ o("span", { onClick: () => g(!h), children: /* @__PURE__ */ o(j, {}) }),
-          h && /* @__PURE__ */ o(D, { children: d.map((l) => /* @__PURE__ */ o(
-            G,
+          /* @__PURE__ */ o("span", { onClick: () => L(!u), children: /* @__PURE__ */ o(Y, {}) }),
+          u && /* @__PURE__ */ o(W, { children: d.map((l) => /* @__PURE__ */ o(
+            q,
             {
               title: l == null ? void 0 : l.title,
               value: l == null ? void 0 : l.value,
@@ -132,5 +138,5 @@ const to = ({
   ] }, I);
 };
 export {
-  to as default
+  ho as default
 };

package/dist/components/ImagePlaceholder/ImagePlaceholder.module.scss.js

@@ -1,39 +1,39 @@
-const e = "_imagePlaceholder_1x60p_3", t = "_disabled_1x60p_9", _ = "_imageArea_1x60p_15", a = "_clickable_1x60p_25", o = "_checkboxSelectable_1x60p_28", c = "_imageFrame_1x60p_33", n = "_image_1x60p_3", l = "_imageError_1x60p_49", i = "_tagInImage_1x60p_56", m = "_overlay_1x60p_61", s = "_belowImage_1x60p_66", x = "_inside_1x60p_75", g = "_outside_1x60p_79", r = "_content_1x60p_83", p = "_contentText_1x60p_89", d = "_contentTextClamped_1x60p_103", b = "_menu_1x60p_108", I = {
+const e = "_imagePlaceholder_64kms_3", t = "_disabled_64kms_9", _ = "_imageArea_64kms_15", a = "_clickable_64kms_24", m = "_checkboxSelectable_64kms_27", o = "_imageFrame_64kms_32", s = "_image_64kms_3", c = "_imageError_64kms_48", n = "_tagInImage_64kms_55", l = "_overlay_64kms_60", i = "_belowImage_64kms_65", g = "_inside_64kms_74", k = "_outside_64kms_78", r = "_content_64kms_82", d = "_contentText_64kms_88", b = "_contentTextClamped_64kms_102", x = "_menu_64kms_107", I = {
   imagePlaceholder: e,
   disabled: t,
   imageArea: _,
   clickable: a,
-  checkboxSelectable: o,
-  imageFrame: c,
-  image: n,
-  imageError: l,
-  tagInImage: i,
-  overlay: m,
-  belowImage: s,
-  inside: x,
-  outside: g,
+  checkboxSelectable: m,
+  imageFrame: o,
+  image: s,
+  imageError: c,
+  tagInImage: n,
+  overlay: l,
+  belowImage: i,
+  inside: g,
+  outside: k,
   content: r,
-  contentText: p,
-  contentTextClamped: d,
-  menu: b
+  contentText: d,
+  contentTextClamped: b,
+  menu: x
 };
 export {
-  s as belowImage,
-  o as checkboxSelectable,
+  i as belowImage,
+  m as checkboxSelectable,
   a as clickable,
   r as content,
-  p as contentText,
-  d as contentTextClamped,
+  d as contentText,
+  b as contentTextClamped,
   I as default,
   t as disabled,
-  n as image,
+  s as image,
   _ as imageArea,
-  l as imageError,
-  c as imageFrame,
+  c as imageError,
+  o as imageFrame,
   e as imagePlaceholder,
-  x as inside,
-  b as menu,
-  g as outside,
-  m as overlay,
-  i as tagInImage
+  g as inside,
+  x as menu,
+  k as outside,
+  l as overlay,
+  n as tagInImage
 };

package/dist/components/ImageWithData/ImageWithData.module.scss.js

@@ -1,35 +1,35 @@
-const e = "_imagePlaceholder_1lavn_3", a = "_disabled_1lavn_9", n = "_imageArea_1lavn_15", t = "_clickable_1lavn_25", _ = "_checkboxSelectable_1lavn_28", l = "_imageFrame_1lavn_33", o = "_image_1lavn_3", c = "_imageError_1lavn_49", i = "_tagInImage_1lavn_56", m = "_overlay_1lavn_61", s = "_belowImage_1lavn_66", r = "_inside_1lavn_75", g = "_outside_1lavn_79", v = "_content_1lavn_83", d = "_number_1lavn_90", b = "_contentText_1lavn_98", x = "_contentTextClamped_1lavn_111", I = {
+const e = "_imagePlaceholder_1fny6_3", n = "_disabled_1fny6_9", t = "_imageArea_1fny6_15", _ = "_clickable_1fny6_25", a = "_checkboxSelectable_1fny6_28", o = "_imageFrame_1fny6_33", c = "_image_1fny6_3", l = "_imageError_1fny6_49", i = "_tagInImage_1fny6_56", m = "_overlay_1fny6_61", s = "_belowImage_1fny6_66", r = "_inside_1fny6_75", g = "_outside_1fny6_79", y = "_content_1fny6_83", d = "_number_1fny6_90", b = "_contentText_1fny6_98", f = "_contentTextClamped_1fny6_111", x = {
   imagePlaceholder: e,
-  disabled: a,
-  imageArea: n,
-  clickable: t,
-  checkboxSelectable: _,
-  imageFrame: l,
-  image: o,
-  imageError: c,
+  disabled: n,
+  imageArea: t,
+  clickable: _,
+  checkboxSelectable: a,
+  imageFrame: o,
+  image: c,
+  imageError: l,
   tagInImage: i,
   overlay: m,
   belowImage: s,
   inside: r,
   outside: g,
-  content: v,
+  content: y,
   number: d,
   contentText: b,
-  contentTextClamped: x
+  contentTextClamped: f
 };
 export {
   s as belowImage,
-  _ as checkboxSelectable,
-  t as clickable,
-  v as content,
+  a as checkboxSelectable,
+  _ as clickable,
+  y as content,
   b as contentText,
-  x as contentTextClamped,
-  I as default,
-  a as disabled,
-  o as image,
-  n as imageArea,
-  c as imageError,
-  l as imageFrame,
+  f as contentTextClamped,
+  x as default,
+  n as disabled,
+  c as image,
+  t as imageArea,
+  l as imageError,
+  o as imageFrame,
   e as imagePlaceholder,
   r as inside,
   d as number,