@eyesee/ui-components 0.13.0 → 0.14.0

package/dist/components/Button/Button.js

@@ -1,85 +1,89 @@
-import { jsxs as c, jsx as r } from "react/jsx-runtime";
-import { useState as L, useRef as R } from "react";
-import m from "clsx";
+import { jsxs as m, jsx as r } from "react/jsx-runtime";
+import { useState as E, useRef as L, useEffect as R } from "react";
+import p from "clsx";
 import { ChevronDownIcon as S } from "../icons-v2/ChevronDownIcon.js";
 import { ChevronUpIcon as A } from "../icons-v2/ChevronUpIcon.js";
-import E from "../../hooks/useClickOutside.js";
-import { ListItem as U } from "../ListItem/ListItem.js";
-import { DropdownList as q } from "../DropdownList/DropdownList.js";
-import { Tooltip as z } from "../Tooltip/Tooltip.js";
+import U from "../../hooks/useClickOutside.js";
+import { ListItem as q } from "../ListItem/ListItem.js";
+import { DropdownList as z } from "../DropdownList/DropdownList.js";
+import { Tooltip as F } from "../Tooltip/Tooltip.js";
 import e from "./Button.module.scss.js";
-function Y({
-  text: l,
-  options: p = [],
+function Z({
+  text: a,
+  options: f = [],
   onClick: u = () => {
   },
-  className: w,
-  iconSize: f = "m",
-  size: v = "md",
-  variant: N = "primary",
-  type: O = "fill",
-  pressed: h = !1,
-  icon: a = null,
-  tooltipContent: d = null,
-  tooltipTitle: g,
-  disabled: y = !1,
+  className: v,
+  iconSize: h = "m",
+  size: N = "md",
+  variant: O = "primary",
+  type: g = "fill",
+  pressed: d = !1,
+  icon: s = null,
+  tooltipContent: b = null,
+  tooltipTitle: y,
+  disabled: i = !1,
   fullWidth: D = !1,
   dropdownAlign: x = "start",
   tooltipProps: k = { position: "bottom", variant: "light" },
-  dropdownCustomContent: s = null,
+  dropdownCustomContent: c = null,
   ...B
 }) {
-  const [o, i] = L(!1), b = R(null);
-  E(b, () => i(!1));
+  const [l, o] = E(!1), I = L(null);
+  U(I, () => o(!1));
   const T = (n) => {
-    u(n), i(!1);
-  }, t = p.length > 0 || !!s, W = a && !l && !t, j = a && !l, C = !!d, I = /* @__PURE__ */ c(
+    u(n), o(!1);
+  };
+  R(() => {
+    i && l && o(!1);
+  }, [i, l]);
+  const t = f.length > 0 || !!c, W = s && !a && !t, j = s && !a, C = !!b, w = /* @__PURE__ */ m(
     "div",
     {
-      ref: b,
+      ref: I,
       "data-button-wrapper": !0,
-      className: m(e.wrapper, w, D && e.fullWidth),
+      className: p(e.wrapper, v, D && e.fullWidth),
       ...B,
       children: [
-        /* @__PURE__ */ c(
+        /* @__PURE__ */ m(
           "button",
           {
             type: "button",
-            className: m(
+            className: p(
               e.button,
-              e[v],
               e[N],
               e[O],
+              e[g],
               t && e.hasDropdown,
               W && e.iconOnly,
               j && e.isIcon,
-              h && e.pressed
+              d && e.pressed
             ),
-            onClick: () => t ? i((n) => !n) : u(),
-            "aria-expanded": o,
-            "aria-pressed": h,
+            onClick: () => t ? o((n) => !n) : u(),
+            "aria-expanded": l,
+            "aria-pressed": d,
             "aria-haspopup": "menu",
-            disabled: y,
+            disabled: i,
             children: [
-              /* @__PURE__ */ c(
+              /* @__PURE__ */ m(
                 "span",
                 {
-                  className: m(
+                  className: p(
                     e.buttonContent,
                     t && e.buttonContentDropdown
                   ),
                   children: [
-                    a && /* @__PURE__ */ r("span", { className: e.icon, children: a }),
-                    l && /* @__PURE__ */ r("span", { className: e.buttonText, children: l })
+                    s && /* @__PURE__ */ r("span", { className: e.icon, children: s }),
+                    a && /* @__PURE__ */ r("span", { className: e.buttonText, children: a })
                   ]
                 }
               ),
-              t && /* @__PURE__ */ r("span", { className: e.buttonArrow, children: o ? /* @__PURE__ */ r(A, { iconSize: f }) : /* @__PURE__ */ r(S, { iconSize: f }) })
+              t && /* @__PURE__ */ r("span", { className: e.buttonArrow, children: l ? /* @__PURE__ */ r(A, { iconSize: h }) : /* @__PURE__ */ r(S, { iconSize: h }) })
             ]
           }
         ),
-        o && t && /* @__PURE__ */ r(q, { align: x, children: s || p.map((n) => /* @__PURE__ */ r(
-          U,
+        l && t && /* @__PURE__ */ r(z, { align: x, children: c || f.map((n) => /* @__PURE__ */ r(
+          q,
           {
             role: "menuitem",
             title: n.label,
@@ -94,8 +98,8 @@ function Y({
       ]
     }
   );
-  return C ? /* @__PURE__ */ r(z, { title: g, content: d, ...k, children: I }) : I;
+  return C ? /* @__PURE__ */ r(F, { title: y, content: b, ...k, children: w }) : w;
 }
 export {
-  Y as Button
+  Z as Button
 };

package/dist/components/Fields/InputField/InputField.module.scss.js

@@ -1,4 +1,4 @@
-const t = "_field_1tpt9_3", _ = "_lg_1tpt9_7", n = "_md_1tpt9_11", c = "_sm_1tpt9_15", s = "_xs_1tpt9_19", o = "_icon_1tpt9_23", e = "_clickable_1tpt9_29", l = "_content_1tpt9_36", d = "_hiddenInput_1tpt9_44", p = {
+const t = "_field_2t508_3", _ = "_lg_2t508_11", n = "_md_2t508_15", c = "_sm_2t508_19", s = "_xs_2t508_23", o = "_icon_2t508_27", e = "_clickable_2t508_33", l = "_content_2t508_40", d = "_hiddenInput_2t508_48", i = {
   field: t,
   lg: _,
   md: n,
@@ -12,7 +12,7 @@ const t = "_field_1tpt9_3", _ = "_lg_1tpt9_7", n = "_md_1tpt9_11", c = "_sm_1tpt
 export {
   e as clickable,
   l as content,
-  p as default,
+  i as default,
   t as field,
   d as hiddenInput,
   o as icon,

package/dist/components/Fields/InputFieldContainer.d.ts

@@ -1,3 +1,13 @@
+/**
+ * Focus the field control when the user clicks shell padding/icons (not the control itself).
+ *
+ * @param {import('react').MouseEvent} event
+ * @param {{ id?: string, disabled?: boolean }} options
+ */
+export function focusFieldControlFromShellEvent(event: import("react").MouseEvent, { id, disabled }: {
+    id?: string;
+    disabled?: boolean;
+}): void;
 export function InputFieldContainer({ id, label, isRequiredField, validationStatus, disabled, computedInfoText, children, }: {
     id: string;
     label?: string;

package/dist/components/Fields/InputFieldContainer.js

@@ -1,104 +1,104 @@
-import { jsx as n, jsxs as C } from "react/jsx-runtime";
+import { jsx as a, jsxs as E } from "react/jsx-runtime";
 import { useId as y } from "react";
-import E from "clsx";
-import { useController as P } from "react-hook-form";
-import r from "./InputFieldContainer.module.scss.js";
-const k = (
+import j from "clsx";
+import { useController as k } from "react-hook-form";
+import i from "./InputFieldContainer.module.scss.js";
+const w = (
   /** @type {const} */
   ["default", "error"]
 ), A = ({
-  id: c,
-  label: i,
-  isRequiredField: f = !1,
+  id: r,
+  label: n,
+  isRequiredField: d = !1,
   validationStatus: e = "default",
-  disabled: a = !1,
-  computedInfoText: l,
-  children: d
+  disabled: l = !1,
+  computedInfoText: t,
+  children: c
 }) => {
-  const u = !!l && `${l}`.trim().length > 0;
-  return /* @__PURE__ */ C(
+  const f = !!t && `${t}`.trim().length > 0, o = (m) => _(m, { id: r, disabled: l });
+  return /* @__PURE__ */ E(
     "div",
     {
-      className: E(
-        r.wrapper,
-        e === "error" && r.wrapperError,
-        a && r.disabledField
+      className: j(
+        i.wrapper,
+        e === "error" && i.wrapperError,
+        l && i.disabledField
       ),
       children: [
-        i ? /* @__PURE__ */ C("label", { className: r.label, htmlFor: c, children: [
-          i,
-          f ? /* @__PURE__ */ n("span", { className: r.requiredMark, children: "*" }) : null
+        n ? /* @__PURE__ */ E("label", { className: i.label, htmlFor: r, children: [
+          n,
+          d ? /* @__PURE__ */ a("span", { className: i.requiredMark, children: "*" }) : null
         ] }) : null,
-        d,
-        u ? /* @__PURE__ */ n("div", { className: r.infoText, children: l }) : null
+        /* @__PURE__ */ a("div", { onClick: l ? void 0 : o, children: c }),
+        f ? /* @__PURE__ */ a("div", { className: i.infoText, children: t }) : null
       ]
     }
   );
-}, D = (c) => {
-  const i = (e) => {
+}, z = (r) => {
+  const n = (e) => {
     const {
-      status: a = "default",
-      label: l,
-      infoText: d,
-      id: u,
+      status: l = "default",
+      label: t,
+      infoText: c,
+      id: f,
       name: o,
       type: m = "text",
-      value: b,
-      defaultValue: S,
-      placeholder: B = "Text",
-      disabled: p = !1,
-      onChange: N = () => {
+      value: S,
+      defaultValue: b,
+      placeholder: x = "Text",
+      disabled: g = !1,
+      onChange: T = () => {
       },
-      onBlur: v,
+      onBlur: C,
       inputRef: F,
-      error: s,
+      error: u,
       rules: h,
-      required: q = !1,
-      "aria-label": R,
-      ...T
-    } = e, I = y(), g = u ?? I, V = k.includes(a) ? a : "default", x = s != null && s.message ? "error" : V, j = (s == null ? void 0 : s.message) ?? d, w = !!(h != null && h.required) || q, t = { ...T };
-    return delete t.control, delete t.rules, delete t.invalid, delete t.defaultValues, v && (t.onBlur = v), F && (t.ref = F), /* @__PURE__ */ n(
+      required: B = !1,
+      "aria-label": I,
+      ...N
+    } = e, R = y(), p = f ?? R, q = w.includes(l) ? l : "default", v = u != null && u.message ? "error" : q, L = (u == null ? void 0 : u.message) ?? c, V = !!(h != null && h.required) || B, s = { ...N };
+    return delete s.control, delete s.rules, delete s.invalid, delete s.defaultValues, C && (s.onBlur = C), F && (s.ref = F), /* @__PURE__ */ a(
       A,
       {
-        id: g,
-        label: l,
-        isRequiredField: w,
-        validationStatus: x,
-        disabled: p,
-        computedInfoText: j,
-        children: /* @__PURE__ */ n(
-          c,
+        id: p,
+        label: t,
+        isRequiredField: V,
+        validationStatus: v,
+        disabled: g,
+        computedInfoText: L,
+        children: /* @__PURE__ */ a(
+          r,
           {
             ...e,
-            id: g,
+            id: p,
             name: o,
             type: m,
-            value: b,
-            defaultValue: S,
-            placeholder: B,
-            disabled: p,
-            onChange: N,
-            ariaLabel: R,
-            label: l,
-            inputProps: t,
-            validationStatus: x,
-            containerFieldClassName: r.field
+            value: S,
+            defaultValue: b,
+            placeholder: x,
+            disabled: g,
+            onChange: T,
+            ariaLabel: I,
+            label: t,
+            inputProps: s,
+            validationStatus: v,
+            containerFieldClassName: i.field
           }
         )
       }
     );
-  }, f = (e) => {
-    const { control: a, name: l, rules: d, defaultValue: u } = e, { field: o, fieldState: m } = P({
-      name: l,
-      control: a,
-      rules: d,
-      defaultValue: u
+  }, d = (e) => {
+    const { control: l, name: t, rules: c, defaultValue: f } = e, { field: o, fieldState: m } = k({
+      name: t,
+      control: l,
+      rules: c,
+      defaultValue: f
     });
-    return /* @__PURE__ */ n(
-      i,
+    return /* @__PURE__ */ a(
+      n,
       {
         ...e,
-        name: l,
+        name: t,
         value: o.value,
         onChange: o.onChange,
         onBlur: o.onBlur,
@@ -107,9 +107,16 @@ const k = (
       }
     );
   };
-  return (e) => e.control && e.name ? /* @__PURE__ */ n(f, { ...e }) : /* @__PURE__ */ n(i, { ...e });
-};
+  return (e) => e.control && e.name ? /* @__PURE__ */ a(d, { ...e }) : /* @__PURE__ */ a(n, { ...e });
+}, P = 'button, a, select, [role="button"], [role="option"], [role="menuitem"]';
+function _(r, { id: n, disabled: d }) {
+  var l, t;
+  if (d || !n) return;
+  const e = document.getElementById(n);
+  !e || e.disabled || r.target === e || e.contains(r.target) || (t = (l = r.target).closest) != null && t.call(l, P) || e.focus();
+}
 export {
   A as InputFieldContainer,
-  D as createField
+  z as createField,
+  _ as focusFieldControlFromShellEvent
 };

package/dist/components/Fields/InputFieldContainer.module.scss.js

@@ -1,19 +1,19 @@
-const r = "_wrapper_1mys4_3", e = "_label_1mys4_10", _ = "_infoText_1mys4_11", s = "_requiredMark_1mys4_22", a = "_wrapperError_1mys4_30", l = "_field_1mys4_33", d = "_disabledField_1mys4_51", i = {
-  wrapper: r,
-  label: e,
-  infoText: _,
-  requiredMark: s,
+const e = "_wrapper_1le2b_3", r = "_label_1le2b_10", l = "_infoText_1le2b_11", _ = "_requiredMark_1le2b_22", a = "_wrapperError_1le2b_30", d = "_field_1le2b_33", i = "_disabledField_1le2b_73", o = {
+  wrapper: e,
+  label: r,
+  infoText: l,
+  requiredMark: _,
   wrapperError: a,
-  field: l,
-  disabledField: d
+  field: d,
+  disabledField: i
 };
 export {
-  i as default,
-  d as disabledField,
-  l as field,
-  _ as infoText,
-  e as label,
-  s as requiredMark,
-  r as wrapper,
+  o as default,
+  i as disabledField,
+  d as field,
+  l as infoText,
+  r as label,
+  _ as requiredMark,
+  e as wrapper,
   a as wrapperError
 };

package/dist/components/Fields/TextField/TextField.module.scss.js

@@ -1,12 +1,12 @@
-const e = "_field_kwy2b_3", t = "_input_kwy2b_9", n = "_expandableField_kwy2b_13", p = "_buttonWrapper_kwy2b_21", _ = {
+const e = "_field_1iwyh_3", t = "_input_1iwyh_10", n = "_expandableField_1iwyh_15", i = "_buttonWrapper_1iwyh_23", p = {
   field: e,
   input: t,
   expandableField: n,
-  buttonWrapper: p
+  buttonWrapper: i
 };
 export {
-  p as buttonWrapper,
-  _ as default,
+  i as buttonWrapper,
+  p as default,
   n as expandableField,
   e as field,
   t as input

package/dist/components/ImagePlaceholder/ImagePlaceholder.js

@@ -1,4 +1,4 @@
-import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import { jsxs as c, jsx as e } from "react/jsx-runtime";
 import { useState as N } from "react";
 import t from "clsx";
 import { Checkbox as D } from "../Checkbox/Checkbox.js";
@@ -28,7 +28,7 @@ function Eo({
   menu: d,
   aspectRatio: C = x["1/1"],
   lines: P = K[1],
-  disabled: c = !1,
+  disabled: i = !1,
   onClose: L = () => {
   },
   tooltipContent: h,
@@ -52,19 +52,19 @@ function Eo({
       default:
         return null;
     }
-  }, b = !a || m === S.outside ? "8px" : "8px 8px 0 0", _ = Number(P), j = t(o.contentText, o.contentTextClamped), X = { WebkitLineClamp: _ }, Y = !!h, T = !!u && !c, k = /* @__PURE__ */ i(
+  }, T = !a || m === S.outside ? "8px" : "8px 8px 0 0", _ = Number(P), j = t(o.contentText, o.contentTextClamped), X = { WebkitLineClamp: _ }, Y = !!h, b = !!u && !i, k = /* @__PURE__ */ c(
     "div",
     {
       className: t(
         o.imagePlaceholder,
-        c && o.disabled,
-        T && o.clickable,
+        i && o.disabled,
+        b && o.clickable,
         F && o.selected,
         R === "hover" && o.overlayHover
       ),
-      onClick: T ? u : void 0,
+      onClick: b ? u : void 0,
       children: [
-        /* @__PURE__ */ i(
+        /* @__PURE__ */ c(
           "div",
           {
             ref: M,
@@ -73,8 +73,8 @@ function Eo({
               s === "checkbox" && o.clickable,
               s === "checkbox" && !n && o.checkboxSelectable
             ),
-            style: { borderRadius: b },
-            onClick: s === "checkbox" && !n && !c ? p : void 0,
+            style: { borderRadius: T },
+            onClick: s === "checkbox" && !n && !i ? p : void 0,
             onMouseEnter: O,
             onMouseLeave: B,
             children: [
@@ -82,7 +82,7 @@ function Eo({
                 "div",
                 {
                   className: o.imageFrame,
-                  style: { aspectRatio: x[C], borderRadius: b },
+                  style: { aspectRatio: x[C], borderRadius: T },
                   children: n ? /* @__PURE__ */ e("div", { className: o.imageError, children: /* @__PURE__ */ e(
                     Q,
                     {
@@ -101,14 +101,14 @@ function Eo({
                 }
               ),
               !a && I.has(l == null ? void 0 : l.type) ? /* @__PURE__ */ e("div", { className: o.tagInImage, children: v() }) : null,
-              J.has(s) && /* @__PURE__ */ i("div", { className: o.overlay, onClick: (r) => r.stopPropagation(), children: [
+              J.has(s) && /* @__PURE__ */ c("div", { className: o.overlay, onClick: (r) => r.stopPropagation(), children: [
                 s === "checkbox" && !n ? /* @__PURE__ */ e(
                   D,
                   {
                     checked: w,
                     onChange: p,
                     size: "lg",
-                    disabled: c
+                    disabled: i
                   }
                 ) : null,
                 s === "close" ? /* @__PURE__ */ e(
@@ -118,16 +118,17 @@ function Eo({
                     size: "xxs",
                     variant: "fill",
                     type: "neutral",
-                    onClick: L
+                    disabled: i,
+                    onClick: i ? void 0 : L
                   }
                 ) : null
               ] })
             ]
           }
         ),
-        a ? /* @__PURE__ */ i("div", { className: t(o.belowImage, o[m]), children: [
+        a ? /* @__PURE__ */ c("div", { className: t(o.belowImage, o[m]), children: [
           I.has(l == null ? void 0 : l.type) ? /* @__PURE__ */ e("div", { children: v() }) : null,
-          /* @__PURE__ */ i("div", { className: o.content, children: [
+          /* @__PURE__ */ c("div", { className: o.content, children: [
             /* @__PURE__ */ e(
               oo,
               {
@@ -138,7 +139,7 @@ function Eo({
                 children: a
               }
             ),
-            d && /* @__PURE__ */ i("div", { className: o.menu, children: [
+            d && /* @__PURE__ */ c("div", { className: o.menu, children: [
               /* @__PURE__ */ e(
                 "span",
                 {

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

@@ -1,43 +1,43 @@
-const e = "_imagePlaceholder_kbkw0_3", t = "_selected_kbkw0_9", _ = "_clickable_kbkw0_13", o = "_disabled_kbkw0_16", a = "_overlayHover_kbkw0_22", c = "_overlay_kbkw0_22", n = "_imageArea_kbkw0_28", k = "_checkboxSelectable_kbkw0_40", l = "_imageFrame_kbkw0_45", b = "_image_kbkw0_3", s = "_imageError_kbkw0_61", i = "_tagInImage_kbkw0_68", m = "_belowImage_kbkw0_78", r = "_inside_kbkw0_87", g = "_outside_kbkw0_91", d = "_content_kbkw0_95", w = "_contentText_kbkw0_101", x = "_contentTextClamped_kbkw0_115", v = "_menu_kbkw0_120", I = {
+const e = "_imagePlaceholder_wex5c_3", c = "_selected_wex5c_9", t = "_clickable_wex5c_13", _ = "_disabled_wex5c_16", o = "_overlayHover_wex5c_22", a = "_overlay_wex5c_22", n = "_imageArea_wex5c_28", l = "_checkboxSelectable_wex5c_40", s = "_imageFrame_wex5c_45", i = "_image_wex5c_3", m = "_imageError_wex5c_61", x = "_tagInImage_wex5c_68", r = "_belowImage_wex5c_78", g = "_inside_wex5c_87", d = "_outside_wex5c_91", w = "_content_wex5c_95", b = "_contentText_wex5c_101", v = "_contentTextClamped_wex5c_115", I = "_menu_wex5c_120", u = {
   imagePlaceholder: e,
-  selected: t,
-  clickable: _,
-  disabled: o,
-  overlayHover: a,
-  overlay: c,
+  selected: c,
+  clickable: t,
+  disabled: _,
+  overlayHover: o,
+  overlay: a,
   imageArea: n,
-  checkboxSelectable: k,
-  imageFrame: l,
-  image: b,
-  imageError: s,
-  tagInImage: i,
-  belowImage: m,
-  inside: r,
-  outside: g,
-  content: d,
-  contentText: w,
-  contentTextClamped: x,
-  menu: v
+  checkboxSelectable: l,
+  imageFrame: s,
+  image: i,
+  imageError: m,
+  tagInImage: x,
+  belowImage: r,
+  inside: g,
+  outside: d,
+  content: w,
+  contentText: b,
+  contentTextClamped: v,
+  menu: I
 };
 export {
-  m as belowImage,
-  k as checkboxSelectable,
-  _ as clickable,
-  d as content,
-  w as contentText,
-  x as contentTextClamped,
-  I as default,
-  o as disabled,
-  b as image,
+  r as belowImage,
+  l as checkboxSelectable,
+  t as clickable,
+  w as content,
+  b as contentText,
+  v as contentTextClamped,
+  u as default,
+  _ as disabled,
+  i as image,
   n as imageArea,
-  s as imageError,
-  l as imageFrame,
+  m as imageError,
+  s as imageFrame,
   e as imagePlaceholder,
-  r as inside,
-  v as menu,
-  g as outside,
-  c as overlay,
-  a as overlayHover,
-  t as selected,
-  i as tagInImage
+  g as inside,
+  I as menu,
+  d as outside,
+  a as overlay,
+  o as overlayHover,
+  c as selected,
+  x as tagInImage
 };

package/dist/components/icons-v2/AddImageIcon.d.ts

@@ -0,0 +1,13 @@
+/**
+ * SVG add image icon.
+ *
+ * @param {object}    props
+ * @param {string}    [props.strokeColor='currentColor'] - SVG stroke colour.
+ *   Accepts any valid CSS colour value.
+ * @param {import('./constants').IconSize} [props.iconSize='m']
+ *   T-shirt size token that controls the rendered `width`/`height` and
+ *   `stroke-width` via {@link iconSizes} and {@link iconStrokeWidths}.
+ * @param {string}    [props.fill='none'] - SVG fill colour.
+ * @returns {JSX.Element}
+ */
+export const AddImageIcon: (props: IconProps) => import("react").JSX.Element;

package/dist/components/icons-v2/AddImageIcon.js

@@ -0,0 +1,15 @@
+import { jsx as e } from "react/jsx-runtime";
+import { createIcon as t } from "./createIcon.js";
+const M = t(({ strokeColor: o, strokeWidth: r }) => /* @__PURE__ */ e(
+  "path",
+  {
+    d: "M20 10.6667H20.0133M16.6667 28H8C6.93913 28 5.92172 27.5786 5.17157 26.8284C4.42143 26.0783 4 25.0609 4 24V8C4 6.93913 4.42143 5.92172 5.17157 5.17157C5.92172 4.42143 6.93913 4 8 4H24C25.0609 4 26.0783 4.42143 26.8284 5.17157C27.5786 5.92172 28 6.93913 28 8V16.6667M4 21.3334L10.6667 14.6668C11.904 13.4761 13.4293 13.4761 14.6667 14.6668L20 20.0001M18.6667 18.6666L20 17.3333C20.8933 16.4746 21.9333 16.2346 22.9093 16.6133M21.3333 25.3333H29.3333M25.3333 21.3333V29.3333",
+    stroke: o,
+    strokeWidth: r,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }
+));
+export {
+  M as AddImageIcon
+};

package/dist/components/icons-v2/EditImageIcon.d.ts

@@ -0,0 +1,13 @@
+/**
+ * SVG edit image icon.
+ *
+ * @param {object}    props
+ * @param {string}    [props.strokeColor='currentColor'] - SVG stroke colour.
+ *   Accepts any valid CSS colour value.
+ * @param {import('./constants').IconSize} [props.iconSize='m']
+ *   T-shirt size token that controls the rendered `width`/`height` and
+ *   `stroke-width` via {@link iconSizes} and {@link iconStrokeWidths}.
+ * @param {string}    [props.fill='none'] - SVG fill colour.
+ * @returns {JSX.Element}
+ */
+export const EditImageIcon: (props: IconProps) => import("react").JSX.Element;