@armco/imageeditor 0.0.5 → 0.0.7

package/cjs/Control.js

@@ -1 +1 @@
-"use strict";require("react/jsx-runtime");const r=require("./Control-chunk.js");require("@armco/shared-components/Tooltip");require("@armco/icon");module.exports=r.Control;
+"use strict";const s=require("react/jsx-runtime"),r=require("@armco/types"),n=require("@armco/shared-components/Tooltip"),c=require("@armco/icon"),i=({icon:o,handler:e,tooltip:t})=>s.jsxs(n,{children:[s.jsx("span",{className:"mx-3 p-1 cursor-pointer",slot:r.ArPopoverSlots.ANCHOR,children:s.jsx(c,{icon:o,attributes:{colors:{fillColor:"#ffffff99"},classes:"cursor-pointer",size:"2rem"},events:{onClick:e}})}),s.jsx("span",{slot:r.ArPopoverSlots.POPOVER,children:t})]});module.exports=i;

package/cjs/ImageEditor.js

@@ -1,2 +1,2 @@
 (function(){"use strict";try{if(typeof document<"u"){var r=document.createElement("style");r.appendChild(document.createTextNode(".ar-ImageEditor .ar-ImageEditor__image-container{max-width:60vw;max-height:75vh}.ar-ImageEditor .ar-ImageEditor__editor-controls{transition:background-color .5s,box-shadow .5s ease-in-out;background-color:var(--ar-bg-tertiary-faded-2);border-radius:2rem}.ar-ImageEditor .ar-ImageEditor__editor-controls:hover{background-color:var(--ar-bg-tertiary-faded)}.ar-ImageEditor .ar-ImageEditor__editor-controls .ar-ImageEditor__download-button{width:2rem;height:2rem;display:inline-block}.ar-ImageEditor .ar-ImageEditor__editor-controls .ar-ImageEditor__download-button:hover{background-color:var(--ar-bg-tertiary-faded-2)}.ar-ImageEditor .ar-ImageEditor__editor-controls .ar-ImageEditor__commit-button{width:2rem;height:2rem;display:inline-block}.ar-ImageEditor .ar-ImageEditor__editor-controls .ar-ImageEditor__commit-button.is-dirty:hover{background-color:var(--ar-bg-tertiary-faded-2)}.ar-ImageEditor .ar-ImageEditor__controls{bottom:0}.ar-ImageEditor .ar-ImageEditor__controls .ar-ImageEditor__controls-container{transition:background-color .5s,box-shadow .5s,max-height .5s ease-in-out;background-color:var(--ar-bg-tertiary-faded-2);max-height:3.2rem;overflow:hidden}.ar-ImageEditor .ar-ImageEditor__controls .ar-ImageEditor__controls-container:hover{background-color:var(--ar-bg-tertiary-faded)}.ar-ImageEditor .ar-ImageEditor__controls .ar-ImageEditor__controls-container.expanded{max-height:20rem}")),document.head.appendChild(r)}}catch(o){console.error("vite-plugin-css-injected-by-js",o)}})();
-"use strict";const t=require("react/jsx-runtime"),s=require("react"),r=require("./Control-chunk.js"),f=require("@armco/icon"),q=require("@armco/shared-components/Image"),y=require("@armco/shared-components/Tooltip"),z=require("@armco/shared-components/Slider"),A=require("./helper.js");require("@armco/utils/domHelper");let c={rotateBy:0,brightness:1,contrast:1,saturate:1,grayscale:0,blur:0,sepia:0,opacity:1,scale:1};const C=d=>(d%360+360)%360,j=22.5,F=d=>{const{image:O,imageState:E,onChange:h,onCommit:x,viewOnly:m}=d;c={...c,...E};const g=s.useRef(null),[o,p]=s.useState({...c}),[n,I]=s.useState(),[l,R]=s.useState(),a=(e,i)=>{const u={...o,[e]:i},{rotateBy:b,...w}=u,{rotateBy:v,...B}=c;b!==void 0&&v!==void 0&&R(JSON.stringify(w)!==JSON.stringify(B)||C(b)!==C(v)),p(u),h&&h(u)},_=[{icon:"tb.TbFlipHorizontal",handler:()=>a("flipHorizontal",!o.flipHorizontal),tooltip:"Flip Horizontal"},{icon:"tb.TbFlipVertical",handler:()=>a("flipVertical",!o.flipVertical),tooltip:"Flip Vertical"},{icon:"ai.AiOutlineRotateLeft",handler:()=>a("rotateBy",o.rotateBy-j),tooltip:"Rotate Left"},{icon:"ai.AiOutlineRotateRight",handler:()=>a("rotateBy",o.rotateBy+j),tooltip:"Rotate Right"},{icon:"fi.FiZoomIn",handler:()=>a("scale",(o.scale+1)%10),tooltip:"Zoom In"},{icon:"fi.FiZoomOut",handler:()=>a("scale",(o.scale-1<0?0:o.scale-1)%10),tooltip:"Zoom Out"},{icon:n?"md.MdOutlineExpandLess":"md.MdOutlineExpandMore",handler:()=>I(!n),tooltip:n?"Hide Advanced Controls":"Show Advanced Controls"}],N=[{icon:"fi.FiZoomIn",handler:()=>p({...o,scale:(o.scale+1)%10}),tooltip:"Zoom In"},{icon:"fi.FiZoomOut",handler:()=>p({...o,scale:(o.scale-1<0?0:o.scale-1)%10}),tooltip:"Zoom Out"}],S=[[{label:"Brightness",min:0,max:5,precision:.1,handler:e=>a("brightness",+e.target.value)},{label:"Contrast",min:0,max:5,precision:.1,handler:e=>a("contrast",+e.target.value)}],[{label:"Saturation",min:0,max:10,precision:.2,handler:e=>a("saturate",+e.target.value)},{label:"Grayscale",min:0,max:1,precision:.05,handler:e=>a("grayscale",+e.target.value)}],[{label:"Blur",min:0,max:20,handler:e=>a("blur",+e.target.value)},{label:"Sepia",min:0,max:1,precision:.05,handler:e=>a("sepia",+e.target.value)}],[{label:"Opacity",min:0,max:1,precision:.05,handler:e=>a("opacity",+e.target.value)},{label:"Scale",min:0,max:10,precision:.2,handler:e=>a("scale",+e.target.value)}]];return t.jsxs("div",{className:"ar-ImageEditor d-flex flex-column h-100 overflow-auto flex-center position-relative",children:[!m&&t.jsxs("div",{className:"ar-ImageEditor__editor-controls position-absolute p-1 top-0 end-0 hover-shadow-dark",children:[t.jsxs(y,{children:[t.jsx("span",{className:"ar-ImageEditor__download-button cursor-pointer border-radius-50 p-1 me-2",slot:r.L.ANCHOR,children:t.jsx(f,{icon:"md/MdDownload",attributes:{colors:{fillColor:"#232323cc"},size:"1.5rem"},events:{onClick:()=>A.downloadEditedImage(g.current)}})}),t.jsx("span",{slot:r.L.POPOVER,children:"Download"})]}),t.jsxs(y,{children:[t.jsx("span",{className:`ar-ImageEditor__commit-button border-radius-50 p-1${l?" cursor-pointer is-dirty":""}`,slot:r.L.ANCHOR,children:t.jsx(f,{icon:"io5.IoCheckmarkCircleSharp",slot:r.L.ANCHOR,attributes:{colors:{fillColor:l?"#008000":"#00800077"},size:"1.5rem"},events:{onClick:()=>l&&x&&x(o)}})}),t.jsx("span",{slot:r.L.POPOVER,children:l?"Save":"Edit image to save"})]})]}),t.jsx("div",{className:"ar-ImageEditor__image-container mb-4",children:t.jsx(q,{ref:g,image:O,fill:!0,preserveAspectRatio:!0,...o})}),t.jsx("div",{className:"ar-ImageEditor__controls py-3 flex-center z-1 position-absolute",children:t.jsxs("div",{className:`ar-ImageEditor__controls-container border-radius prominent hover-shadow-dark${n?" expanded":""}`,children:[t.jsx("div",{className:`ar-ImageEditor__basic-controls px-3 py-2 ${n?"border-bottom":""}`,children:(m?N:_).map(e=>t.jsx(r.Control,{...e}))}),!m&&t.jsx("div",{className:"ar-ImageEditor__advanced-controls mt-2 px-3",children:S.map(e=>t.jsx("div",{className:"row pb-3 border-bottom",children:e.map(i=>t.jsx("div",{className:"col-6",children:t.jsx(z,{label:i.label,min:i.min,max:i.max,onChange:i.handler,precision:i.precision})}))}))})]})})]})};module.exports=F;
+"use strict";const t=require("react/jsx-runtime"),n=require("react"),s=require("@armco/types"),y=require("@armco/icon"),q=require("@armco/shared-components/Image"),f=require("@armco/shared-components/Tooltip"),P=require("@armco/shared-components/Slider"),z=require("./Control.js"),F=require("./helper.js");let c={rotateBy:0,brightness:1,contrast:1,saturate:1,grayscale:0,blur:0,sepia:0,opacity:1,scale:1};const j=d=>(d%360+360)%360,C=22.5,H=d=>{const{demo:O,image:S,imageState:E,onChange:h,onCommit:x,viewOnly:m}=d;c={...c,...E};const v=n.useRef(null),[o,p]=n.useState({...c}),[r,I]=n.useState(),[l,R]=n.useState(),a=(e,i)=>{const u={...o,[e]:i},{rotateBy:g,...w}=u,{rotateBy:b,...B}=c;g!==void 0&&b!==void 0&&R(JSON.stringify(w)!==JSON.stringify(B)||j(g)!==j(b)),p(u),h&&h(u)},N=[{icon:"tb.TbFlipHorizontal",handler:()=>a("flipHorizontal",!o.flipHorizontal),tooltip:"Flip Horizontal"},{icon:"tb.TbFlipVertical",handler:()=>a("flipVertical",!o.flipVertical),tooltip:"Flip Vertical"},{icon:"ai.AiOutlineRotateLeft",handler:()=>a("rotateBy",o.rotateBy-C),tooltip:"Rotate Left"},{icon:"ai.AiOutlineRotateRight",handler:()=>a("rotateBy",o.rotateBy+C),tooltip:"Rotate Right"},{icon:"fi.FiZoomIn",handler:()=>a("scale",(o.scale+1)%10),tooltip:"Zoom In"},{icon:"fi.FiZoomOut",handler:()=>a("scale",(o.scale-1<0?0:o.scale-1)%10),tooltip:"Zoom Out"},{icon:r?"md.MdOutlineExpandLess":"md.MdOutlineExpandMore",handler:()=>I(!r),tooltip:r?"Hide Advanced Controls":"Show Advanced Controls"}],_=[{icon:"fi.FiZoomIn",handler:()=>p({...o,scale:(o.scale+1)%10}),tooltip:"Zoom In"},{icon:"fi.FiZoomOut",handler:()=>p({...o,scale:(o.scale-1<0?0:o.scale-1)%10}),tooltip:"Zoom Out"}],A=[[{label:"Brightness",min:0,max:5,precision:.1,handler:e=>a("brightness",+e.target.value)},{label:"Contrast",min:0,max:5,precision:.1,handler:e=>a("contrast",+e.target.value)}],[{label:"Saturation",min:0,max:10,precision:.2,handler:e=>a("saturate",+e.target.value)},{label:"Grayscale",min:0,max:1,precision:.05,handler:e=>a("grayscale",+e.target.value)}],[{label:"Blur",min:0,max:20,handler:e=>a("blur",+e.target.value)},{label:"Sepia",min:0,max:1,precision:.05,handler:e=>a("sepia",+e.target.value)}],[{label:"Opacity",min:0,max:1,precision:.05,handler:e=>a("opacity",+e.target.value)},{label:"Scale",min:0,max:10,precision:.2,handler:e=>a("scale",+e.target.value)}]];return t.jsxs("div",{className:"ar-ImageEditor d-flex flex-column h-100 overflow-auto flex-center position-relative",children:[!m&&t.jsxs("div",{className:"ar-ImageEditor__editor-controls position-absolute p-1 top-0 end-0 hover-shadow-dark",children:[t.jsxs(f,{children:[t.jsx("span",{className:"ar-ImageEditor__download-button cursor-pointer border-radius-50 p-1 me-2",slot:s.ArPopoverSlots.ANCHOR,children:t.jsx(y,{icon:"md/MdDownload",attributes:{colors:{fillColor:"#232323cc"},size:"1.5rem"},events:{onClick:()=>F.downloadEditedImage(v.current)}})}),t.jsx("span",{slot:s.ArPopoverSlots.POPOVER,children:"Download"})]}),t.jsxs(f,{children:[t.jsx("span",{className:`ar-ImageEditor__commit-button border-radius-50 p-1${l?" cursor-pointer is-dirty":""}`,slot:s.ArPopoverSlots.ANCHOR,children:t.jsx(y,{icon:"io5.IoCheckmarkCircleSharp",slot:s.ArPopoverSlots.ANCHOR,attributes:{colors:{fillColor:l?"#008000":"#00800077"},size:"1.5rem"},events:{onClick:()=>l&&x&&x(o)}})}),t.jsx("span",{slot:s.ArPopoverSlots.POPOVER,children:l?"Save":"Edit image to save"})]})]}),t.jsx("div",{className:"ar-ImageEditor__image-container mb-4",children:t.jsx(q,{ref:v,image:S,demo:O,fill:!0,preserveAspectRatio:!0,...o})}),t.jsx("div",{className:"ar-ImageEditor__controls py-3 flex-center z-1 position-absolute",children:t.jsxs("div",{className:`ar-ImageEditor__controls-container border-radius prominent hover-shadow-dark${r?" expanded":""}`,children:[t.jsx("div",{className:`ar-ImageEditor__basic-controls px-3 py-2 ${r?"border-bottom":""}`,children:(m?_:N).map(e=>t.jsx(z,{...e}))}),!m&&t.jsx("div",{className:"ar-ImageEditor__advanced-controls mt-2 px-3",children:A.map(e=>t.jsx("div",{className:"row pb-3 border-bottom",children:e.map(i=>t.jsx("div",{className:"col-6",children:t.jsx(P,{label:i.label,min:i.min,max:i.max,onChange:i.handler,precision:i.precision})}))}))})]})})]})};module.exports=H;

package/es/Control.js

@@ -1,7 +1,26 @@
-import "react/jsx-runtime";
-import { C as i } from "./Control-chunk.js";
-import "@armco/shared-components/Tooltip";
-import "@armco/icon";
+import { jsxs as l, jsx as o } from "react/jsx-runtime";
+import { ArPopoverSlots as r } from "@armco/types";
+import i from "@armco/shared-components/Tooltip";
+import n from "@armco/icon";
+const a = ({
+  icon: s,
+  handler: t,
+  tooltip: e
+}) => /* @__PURE__ */ l(i, { children: [
+  /* @__PURE__ */ o("span", { className: "mx-3 p-1 cursor-pointer", slot: r.ANCHOR, children: /* @__PURE__ */ o(
+    n,
+    {
+      icon: s,
+      attributes: {
+        colors: { fillColor: "#ffffff99" },
+        classes: "cursor-pointer",
+        size: "2rem"
+      },
+      events: { onClick: t }
+    }
+  ) }),
+  /* @__PURE__ */ o("span", { slot: r.POPOVER, children: e })
+] });
 export {
-  i as default
+  a as default
 };

package/es/ImageEditor.js

@@ -1,13 +1,13 @@
 (function(){"use strict";try{if(typeof document<"u"){var r=document.createElement("style");r.appendChild(document.createTextNode(".ar-ImageEditor .ar-ImageEditor__image-container{max-width:60vw;max-height:75vh}.ar-ImageEditor .ar-ImageEditor__editor-controls{transition:background-color .5s,box-shadow .5s ease-in-out;background-color:var(--ar-bg-tertiary-faded-2);border-radius:2rem}.ar-ImageEditor .ar-ImageEditor__editor-controls:hover{background-color:var(--ar-bg-tertiary-faded)}.ar-ImageEditor .ar-ImageEditor__editor-controls .ar-ImageEditor__download-button{width:2rem;height:2rem;display:inline-block}.ar-ImageEditor .ar-ImageEditor__editor-controls .ar-ImageEditor__download-button:hover{background-color:var(--ar-bg-tertiary-faded-2)}.ar-ImageEditor .ar-ImageEditor__editor-controls .ar-ImageEditor__commit-button{width:2rem;height:2rem;display:inline-block}.ar-ImageEditor .ar-ImageEditor__editor-controls .ar-ImageEditor__commit-button.is-dirty:hover{background-color:var(--ar-bg-tertiary-faded-2)}.ar-ImageEditor .ar-ImageEditor__controls{bottom:0}.ar-ImageEditor .ar-ImageEditor__controls .ar-ImageEditor__controls-container{transition:background-color .5s,box-shadow .5s,max-height .5s ease-in-out;background-color:var(--ar-bg-tertiary-faded-2);max-height:3.2rem;overflow:hidden}.ar-ImageEditor .ar-ImageEditor__controls .ar-ImageEditor__controls-container:hover{background-color:var(--ar-bg-tertiary-faded)}.ar-ImageEditor .ar-ImageEditor__controls .ar-ImageEditor__controls-container.expanded{max-height:20rem}")),document.head.appendChild(r)}}catch(o){console.error("vite-plugin-css-injected-by-js",o)}})();
 import { jsxs as l, jsx as t } from "react/jsx-runtime";
-import { useRef as F, useState as u } from "react";
-import { L as n, C as H } from "./Control-chunk.js";
+import { useRef as H, useState as u } from "react";
+import { ArPopoverSlots as n } from "@armco/types";
 import y from "@armco/icon";
 import Z from "@armco/shared-components/Image";
 import C from "@armco/shared-components/Tooltip";
 import k from "@armco/shared-components/Slider";
-import { downloadEditedImage as V } from "./helper.js";
-import "@armco/utils/domHelper";
+import V from "./Control.js";
+import { downloadEditedImage as P } from "./helper.js";
 let c = {
   rotateBy: 0,
   brightness: 1,
@@ -19,18 +19,18 @@ let c = {
   opacity: 1,
   scale: 1
 };
-const O = (d) => (d % 360 + 360) % 360, E = 22.5, q = (d) => {
-  const { image: I, imageState: R, onChange: g, onCommit: b, viewOnly: m } = d;
+const O = (d) => (d % 360 + 360) % 360, E = 22.5, K = (d) => {
+  const { demo: I, image: R, imageState: N, onChange: g, onCommit: v, viewOnly: m } = d;
   c = {
     ...c,
-    ...R
+    ...N
   };
-  const v = F(null), [o, p] = u({ ...c }), [r, _] = u(), [s, N] = u(), a = (e, i) => {
-    const h = { ...o, [e]: i }, { rotateBy: f, ...z } = h, { rotateBy: x, ...A } = c;
-    f !== void 0 && x !== void 0 && N(
-      JSON.stringify(z) !== JSON.stringify(A) || O(f) !== O(x)
+  const b = H(null), [o, p] = u({ ...c }), [r, _] = u(), [s, S] = u(), a = (e, i) => {
+    const h = { ...o, [e]: i }, { rotateBy: f, ...z } = h, { rotateBy: x, ...F } = c;
+    f !== void 0 && x !== void 0 && S(
+      JSON.stringify(z) !== JSON.stringify(F) || O(f) !== O(x)
     ), p(h), g && g(h);
-  }, S = [
+  }, w = [
     {
       icon: "tb.TbFlipHorizontal",
       handler: () => a("flipHorizontal", !o.flipHorizontal),
@@ -69,7 +69,7 @@ const O = (d) => (d % 360 + 360) % 360, E = 22.5, q = (d) => {
       handler: () => _(!r),
       tooltip: r ? "Hide Advanced Controls" : "Show Advanced Controls"
     }
-  ], w = [
+  ], B = [
     {
       icon: "fi.FiZoomIn",
       handler: () => p({ ...o, scale: (o.scale + 1) % 10 }),
@@ -83,7 +83,7 @@ const O = (d) => (d % 360 + 360) % 360, E = 22.5, q = (d) => {
       }),
       tooltip: "Zoom Out"
     }
-  ], B = [
+  ], A = [
     [
       {
         label: "Brightness",
@@ -165,7 +165,7 @@ const O = (d) => (d % 360 + 360) % 360, E = 22.5, q = (d) => {
                   size: "1.5rem"
                 },
                 events: {
-                  onClick: () => V(v.current)
+                  onClick: () => P(b.current)
                 }
               }
             )
@@ -189,7 +189,7 @@ const O = (d) => (d % 360 + 360) % 360, E = 22.5, q = (d) => {
                   size: "1.5rem"
                 },
                 events: {
-                  onClick: () => s && b && b(o)
+                  onClick: () => s && v && v(o)
                 }
               }
             )
@@ -201,8 +201,9 @@ const O = (d) => (d % 360 + 360) % 360, E = 22.5, q = (d) => {
     /* @__PURE__ */ t("div", { className: "ar-ImageEditor__image-container mb-4", children: /* @__PURE__ */ t(
       Z,
       {
-        ref: v,
-        image: I,
+        ref: b,
+        image: R,
+        demo: I,
         fill: !0,
         preserveAspectRatio: !0,
         ...o
@@ -217,10 +218,10 @@ const O = (d) => (d % 360 + 360) % 360, E = 22.5, q = (d) => {
             "div",
             {
               className: `ar-ImageEditor__basic-controls px-3 py-2 ${r ? "border-bottom" : ""}`,
-              children: (m ? w : S).map((e) => /* @__PURE__ */ t(H, { ...e }))
+              children: (m ? B : w).map((e) => /* @__PURE__ */ t(V, { ...e }))
             }
           ),
-          !m && /* @__PURE__ */ t("div", { className: "ar-ImageEditor__advanced-controls mt-2 px-3", children: B.map((e) => /* @__PURE__ */ t("div", { className: "row pb-3 border-bottom", children: e.map((i) => /* @__PURE__ */ t("div", { className: "col-6", children: /* @__PURE__ */ t(
+          !m && /* @__PURE__ */ t("div", { className: "ar-ImageEditor__advanced-controls mt-2 px-3", children: A.map((e) => /* @__PURE__ */ t("div", { className: "row pb-3 border-bottom", children: e.map((i) => /* @__PURE__ */ t("div", { className: "col-6", children: /* @__PURE__ */ t(
             k,
             {
               label: i.label,
@@ -236,5 +237,5 @@ const O = (d) => (d % 360 + 360) % 360, E = 22.5, q = (d) => {
   ] });
 };
 export {
-  q as default
+  K as default
 };

package/es/helper.js

@@ -4,8 +4,7 @@ const i = (t) => {
     const e = document.createElement("canvas");
     e.width = t.naturalWidth, e.height = t.naturalHeight;
     const a = e.getContext("2d");
-    if (!a)
-      return;
+    if (!a) return;
     const o = t.style.filter, n = t.style.opacity, s = t.style.transform;
     a.filter = o !== "" ? o : "", a.globalAlpha = n !== "" ? parseFloat(n) : 1, s && s !== "none" && d(a, s, e), a.drawImage(t, 0, 0), c(e.toDataURL());
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@armco/imageeditor",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "type": "module",
   "main": "cjs/ImageEditor.js",
   "module": "es/ImageEditor.js",
@@ -13,40 +13,13 @@
     "publish:sh": "./publish.sh",
     "publish:local": "./publish-local.sh"
   },
-  "dependencies": {
-    "@armco/icon": "^0.0.5",
-    "@armco/shared-components": "^0.0.52",
-    "@armco/utils": "^0.0.17",
-    "@types/node": "^22.5.5",
-    "react": ">16.8.0",
-    "react-dom": ">16.8.0"
-  },
-  "devDependencies": {
-    "@testing-library/dom": "^9.2.0",
-    "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^14.0.0",
-    "@testing-library/user-event": "^14.2.5",
-    "@types/react": "^18.0.15",
-    "@types/react-dom": "^18.0.6",
-    "@types/testing-library__jest-dom": "^5.14.5",
-    "@vitejs/plugin-react": "^4.3.1",
-    "eslint": "^8.0.0",
-    "eslint-config-react-app": "^7.0.1",
-    "eslint-plugin-prettier": "^4.2.1",
-    "jsdom": "^21.1.0",
-    "prettier": "^2.7.1",
-    "prettier-config-nick": "^1.0.2",
-    "sass": "^1.63.4",
-    "typescript": "^5.0.2",
-    "vite": "^4.0.0",
-    "vite-plugin-css-injected-by-js": "^3.5.1",
-    "vite-plugin-dts": "^4.2.2",
-    "vite-plugin-externalize-deps": "^0.8.0",
-    "vitest": "^0.30.1"
-  },
   "peerDependencies": {
-    "react": ">16.8.0",
-    "react-dom": ">16.8.0"
+    "@armco/types": "^0.0.17",
+    "@armco/utils": "^0.0.28",
+    "@armco/shared-components": "^0.0.56",
+    "@armco/icon": "^0.0.9",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "eslintConfig": {
     "extends": [

package/cjs/Control-chunk.js

@@ -1 +0,0 @@
-"use strict";const s=require("react/jsx-runtime"),t=require("@armco/shared-components/Tooltip"),c=require("@armco/icon");var o=(r=>(r.POPOVER="popover",r.ANCHOR="anchor",r))(o||{});const i=({icon:r,handler:e,tooltip:n})=>s.jsxs(t,{children:[s.jsx("span",{className:"mx-3 p-1 cursor-pointer",slot:o.ANCHOR,children:s.jsx(c,{icon:r,attributes:{colors:{fillColor:"#ffffff99"},classes:"cursor-pointer",size:"2rem"},events:{onClick:e}})}),s.jsx("span",{slot:o.POPOVER,children:n})]});exports.Control=i;exports.L=o;

package/es/Control-chunk.js

@@ -1,27 +0,0 @@
-import { jsxs as l, jsx as r } from "react/jsx-runtime";
-import n from "@armco/shared-components/Tooltip";
-import i from "@armco/icon";
-var s = /* @__PURE__ */ ((o) => (o.POPOVER = "popover", o.ANCHOR = "anchor", o))(s || {});
-const a = ({
-  icon: o,
-  handler: t,
-  tooltip: e
-}) => /* @__PURE__ */ l(n, { children: [
-  /* @__PURE__ */ r("span", { className: "mx-3 p-1 cursor-pointer", slot: s.ANCHOR, children: /* @__PURE__ */ r(
-    i,
-    {
-      icon: o,
-      attributes: {
-        colors: { fillColor: "#ffffff99" },
-        classes: "cursor-pointer",
-        size: "2rem"
-      },
-      events: { onClick: t }
-    }
-  ) }),
-  /* @__PURE__ */ r("span", { slot: s.POPOVER, children: e })
-] });
-export {
-  a as C,
-  s as L
-};