jcicl 0.0.109 → 0.0.112

package/AppHeader/AppHeader.d.ts

@@ -1,8 +1,9 @@
 export interface AppHeaderProps {
     loggedIn?: boolean;
+    hamburgerMenu?: boolean;
     onLogin?: () => void;
     onUserMenuClick?: () => void;
-    navWidth?: number;
+    onHamburgerMenuClick?: () => void;
 }
 declare const AppHeader: React.FC<AppHeaderProps>;
 export default AppHeader;

package/AppHeader/AppHeader.js

@@ -1,33 +1,148 @@
-import { jsxs as s, jsx as t } from "react/jsx-runtime";
-import { useState as a } from "react";
-import { n } from "../.chunks/emotion-styled.browser.esm.js";
-import r from "../theme.js";
-import { l as c } from "../.chunks/jocologo.js";
-import { I as p } from "../.chunks/Input.js";
-import { Button as m } from "../Button/Button.js";
-import d from "../Avatar/Avatar.js";
-const l = n("div")(({ navWidth: o }) => ({
-  display: "grid",
-  flexDirection: "row",
-  padding: "4px 16px",
-  backgroundColor: "transparent",
-  alignItems: "center",
-  justifyContent: "space-between",
-  gridTemplateColumns: `minmax(${o + r.constants.actionsPaneWidth}px, 1fr) 2fr 1fr`
-})), f = n("img")({
+import { jsx as u, jsxs as b } from "react/jsx-runtime";
+import * as g from "react";
+import C, { useState as h, useLayoutEffect as z } from "react";
+import { n as f } from "../.chunks/emotion-styled.browser.esm.js";
+import { c as m } from "../.chunks/emotion-react.browser.esm.js";
+import { l as W } from "../.chunks/jocologo.js";
+import { I as k } from "../.chunks/Input.js";
+import { Button as x } from "../Button/Button.js";
+import I from "../Avatar/Avatar.js";
+import E from "../WithLabel/WithLabel.js";
+import { c as M } from "../.chunks/createSvgIcon.js";
+const S = C[typeof document < "u" && document.createElement !== void 0 ? "useLayoutEffect" : "useEffect"], y = (e) => {
+  const l = g.useRef(e);
+  return g.useEffect(() => {
+    l.current = e;
+  }), l;
+};
+function L() {
+}
+function O(e, l, o = {}) {
+  const r = R(o.polyfill), a = y(l);
+  return S(() => {
+    let t = !1;
+    const i = e && "current" in e ? e.current : e;
+    if (!i) return L;
+    function s(n, c) {
+      t || a.current(n, c);
+    }
+    return r.subscribe(i, s), () => {
+      t = !0, r.unsubscribe(i, s);
+    };
+  }, [e, r, a]), r.observer;
+}
+function $(e) {
+  let l = !1, o = [];
+  const r = /* @__PURE__ */ new Map(), a = new (e || window.ResizeObserver)((t, i) => {
+    o = o.concat(t);
+    function s() {
+      const n = /* @__PURE__ */ new Set();
+      for (let c = 0; c < o.length; c++) {
+        if (n.has(o[c].target)) continue;
+        n.add(o[c].target);
+        const p = r.get(o[c].target);
+        p == null || p.forEach((d) => d(o[c], i));
+      }
+      o = [], l = !1;
+    }
+    l || window.requestAnimationFrame(s), l = !0;
+  });
+  return {
+    observer: a,
+    subscribe(t, i) {
+      var s;
+      a.observe(t);
+      const n = (s = r.get(t)) !== null && s !== void 0 ? s : [];
+      n.push(i), r.set(t, n);
+    },
+    unsubscribe(t, i) {
+      var s;
+      const n = (s = r.get(t)) !== null && s !== void 0 ? s : [];
+      if (n.length === 1) {
+        a.unobserve(t), r.delete(t);
+        return;
+      }
+      const c = n.indexOf(i);
+      c !== -1 && n.splice(c, 1), r.set(t, n);
+    }
+  };
+}
+let v;
+const R = (e) => v || (v = $(e)), _ = M(/* @__PURE__ */ u("path", {
+  d: "M3 18h18v-2H3zm0-5h18v-2H3zm0-7v2h18V6z"
+}), "Menu"), A = f("div")(() => ({
+  ...m`
+    display: flex;
+    flex-direction: row;
+    padding: 4px 16px;
+    background-color: transparent;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1.5rem;
+  `
+})), j = f("img")({
   width: "36px"
-}), g = n("div")({
-  height: "50px"
-}), h = n("div")({
-  justifySelf: "end"
-}), k = ({ navWidth: o = r.constants.navDefaultWidth }) => {
-  const [i, e] = a(!1);
-  return /* @__PURE__ */ s(l, { ...{ navWidth: o }, children: [
-    /* @__PURE__ */ t(g, { children: /* @__PURE__ */ t(f, { src: c, height: "50px" }) }),
-    /* @__PURE__ */ t(p, { placeholder: "Search..." }),
-    /* @__PURE__ */ t(h, { children: i ? /* @__PURE__ */ t(d, { onClick: () => e(!1) }) : /* @__PURE__ */ t(m, { onClick: () => e(!0), children: "Log In" }) })
+}), H = f("div")(() => ({
+  ...m`
+    display: flex;
+    gap: 1rem;
+    height: 50px;
+  `
+})), U = f("div")(({ width: e, loggedIn: l }) => ({
+  ...m`
+    width: ${e}px;
+    display: flex;
+    justify-content: center;
+    align-items: flex-end;
+    flex-direction: ${l ? "column" : "column-reverse"};
+    flex-shrink: 0;
+    * {
+      white-space: nowrap;
+    }
+  `
+})), w = f("div")(({ visible: e }) => ({
+  ...m`
+    z-index: ${e ? 1 : 0};
+    opacity: ${e ? 1 : 0};
+    pointer-events: ${e ? "auto" : "none"};
+    position: ${e ? "relative" : "absolute"};
+  `
+})), V = f("div")(() => ({
+  ...m`
+    display: flex;
+    width: 1360px;
+    max-width: 100%;
+    .MuiFormControl-root {
+      width: 100%;
+    }
+  `
+})), T = ({ hamburgerMenu: e, onHamburgerMenuClick: l }) => {
+  const [o, r] = h(!1), [a, t] = h(0), [i, s] = h(null), [n, c] = h(null);
+  z(() => {
+    i && i.clientWidth > a && t(i.clientWidth), n && n.clientWidth > a && t(n.clientWidth);
+  }, [i, n]);
+  const p = (d) => {
+    d != null && d.clientWidth && d.clientWidth > a && t(d.clientWidth);
+  };
+  return O(i, () => p(i)), /* @__PURE__ */ b(A, { children: [
+    /* @__PURE__ */ b(H, { children: [
+      /* @__PURE__ */ u(j, { src: W, height: "50px" }),
+      e && /* @__PURE__ */ u(x, { variant: "icon", onClick: l, children: /* @__PURE__ */ u(_, {}) })
+    ] }),
+    /* @__PURE__ */ u(V, { children: /* @__PURE__ */ u(k, { placeholder: "Search..." }) }),
+    /* @__PURE__ */ b(U, { width: a, loggedIn: o, children: [
+      /* @__PURE__ */ u(w, { visible: o, ref: s, children: /* @__PURE__ */ u(
+        E,
+        {
+          id: "accountMenuContainer",
+          component: /* @__PURE__ */ u(I, { onClick: () => r(!1) }),
+          label: "Welcome, User"
+        }
+      ) }),
+      /* @__PURE__ */ u(w, { visible: !o, ref: c, children: /* @__PURE__ */ u(x, { id: "loginButtonContainer", onClick: () => r(!0), children: "Log In" }) })
+    ] })
   ] });
 };
 export {
-  k as default
+  T as default
 };

package/Avatar/Avatar.js

@@ -1,20 +1,20 @@
-import { jsx as t } from "react/jsx-runtime";
+import { jsx as i } from "react/jsx-runtime";
 import { c } from "../.chunks/createSvgIcon.js";
 import { B as d } from "../.chunks/ButtonBase.js";
-import i from "../theme.js";
+import t from "../theme.js";
 import { n as a, i as l } from "../.chunks/emotion-styled.browser.esm.js";
-const m = c(/* @__PURE__ */ t("path", {
+const m = c(/* @__PURE__ */ i("path", {
   d: "M12 5.9c1.16 0 2.1.94 2.1 2.1s-.94 2.1-2.1 2.1S9.9 9.16 9.9 8s.94-2.1 2.1-2.1m0 9c2.97 0 6.1 1.46 6.1 2.1v1.1H5.9V17c0-.64 3.13-2.1 6.1-2.1M12 4C9.79 4 8 5.79 8 8s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4m0 9c-2.67 0-8 1.34-8 4v3h16v-3c0-2.66-5.33-4-8-4"
 }), "PersonOutlineOutlined"), s = a(m, {
   shouldForwardProp: (r) => l(r)
-})(({ avatarColor: r = i.colors.darkGreen, backgroundColor: e = i.colors.mint, size: o = 40 }) => ({
+})(({ avatarColor: r = t.colors.darkGreen, backgroundColor: o = t.colors.mint, size: e = 40 }) => ({
   border: `1px solid ${r}`,
-  backgroundColor: e,
+  backgroundColor: o,
   borderRadius: "50%",
   padding: "8px",
   fill: r,
-  width: `${o - 18}px`,
-  height: `${o - 18}px`,
+  width: `${e - 18}px`,
+  height: `${e - 18}px`,
   pointerEvents: "none"
 })), p = a(d)({
   backgroundColor: "transparent",
@@ -22,17 +22,17 @@ const m = c(/* @__PURE__ */ t("path", {
   span: {
     transition: "313ms all ease-in-out"
   },
-  "&:hover, :focus": {
+  "&:hover, :focus-visible": {
     span: {
-      backgroundColor: i.colors.grayO44
+      backgroundColor: t.colors.grayO44
     }
   }
 }), g = ({
   avatarColor: r,
-  backgroundColor: e,
-  size: o,
+  backgroundColor: o,
+  size: e,
   ...n
-}) => n != null && n.onClick ? /* @__PURE__ */ t(p, { ...n, children: /* @__PURE__ */ t(s, { avatarColor: r, backgroundColor: e, size: o }) }) : /* @__PURE__ */ t(s, { avatarColor: r, backgroundColor: e, size: o });
+}) => n != null && n.onClick ? /* @__PURE__ */ i(p, { ...n, children: /* @__PURE__ */ i(s, { avatarColor: r, backgroundColor: o, size: e }) }) : /* @__PURE__ */ i(s, { avatarColor: r, backgroundColor: o, size: e });
 export {
   g as default
 };

package/AvatarWithImage/AvatarWithImage.js

@@ -1,4 +1,4 @@
-import { jsx as n } from "react/jsx-runtime";
+import { jsx as i } from "react/jsx-runtime";
 import { B as l } from "../.chunks/ButtonBase.js";
 import m from "../theme.js";
 import { n as d } from "../.chunks/emotion-styled.browser.esm.js";
@@ -18,7 +18,7 @@ const s = d("img")(
   span: {
     transition: "313ms all ease-in-out"
   },
-  "&:hover, :focus": {
+  "&:hover, :focus-visible": {
     span: {
       backgroundColor: m.colors.grayO44
     }
@@ -27,10 +27,10 @@ const s = d("img")(
   borderColor: o,
   alt: r = "profile image",
   size: e,
-  objectFit: t,
-  src: i,
+  objectFit: n,
+  src: t,
   ...a
-}) => a != null && a.onClick ? /* @__PURE__ */ n(c, { ...a, children: /* @__PURE__ */ n(s, { src: i, alt: r, borderColor: o, size: e, objectFit: t }) }) : /* @__PURE__ */ n(s, { src: i, alt: r, borderColor: o, size: e, objectFit: t });
+}) => a != null && a.onClick ? /* @__PURE__ */ i(c, { ...a, children: /* @__PURE__ */ i(s, { src: t, alt: r, borderColor: o, size: e, objectFit: n }) }) : /* @__PURE__ */ i(s, { src: t, alt: r, borderColor: o, size: e, objectFit: n });
 export {
   u as AvatarWithImage,
   u as default

package/Button/Button.d.ts

@@ -1,6 +1,7 @@
 import { ButtonProps as MuiButtonProps } from '@mui/material/Button/Button';
-export interface ButtonProps extends Omit<MuiButtonProps, 'variant'> {
-    variant?: 1 | 2 | 'unstyled';
+export interface ButtonProps extends Omit<MuiButtonProps, 'variant' | 'size'> {
+    variant?: 1 | 2 | 'unstyled' | 'icon';
+    size?: number;
 }
 export declare const Button: React.FC<ButtonProps & {
     children: React.ReactNode;

package/Button/Button.js

@@ -1,35 +1,36 @@
 import { jsxs as F, jsx as s } from "react/jsx-runtime";
 import * as g from "react";
-import { g as U, a as _, s as l, r as H, c as e, f as A, u as q, b as w, P as t, d as J, e as b } from "../.chunks/DefaultPropsProvider.js";
+import { g as U, a as _, s as l, r as H, c as i, f as A, u as q, b as h, P as t, d as J, e as b } from "../.chunks/DefaultPropsProvider.js";
 import { m as K } from "../.chunks/memoTheme.js";
 import { c as Q } from "../.chunks/createSimplePaletteValueFilter.js";
-import { B as I } from "../.chunks/ButtonBase.js";
-import i from "../theme.js";
-function X(o) {
+import { B as S } from "../.chunks/ButtonBase.js";
+import { c as X } from "../.chunks/emotion-react.browser.esm.js";
+import e from "../theme.js";
+function Y(o) {
   return U("MuiButton", o);
 }
-const c = _("MuiButton", ["root", "text", "textInherit", "textPrimary", "textSecondary", "textSuccess", "textError", "textInfo", "textWarning", "outlined", "outlinedInherit", "outlinedPrimary", "outlinedSecondary", "outlinedSuccess", "outlinedError", "outlinedInfo", "outlinedWarning", "contained", "containedInherit", "containedPrimary", "containedSecondary", "containedSuccess", "containedError", "containedInfo", "containedWarning", "disableElevation", "focusVisible", "disabled", "colorInherit", "colorPrimary", "colorSecondary", "colorSuccess", "colorError", "colorInfo", "colorWarning", "textSizeSmall", "textSizeMedium", "textSizeLarge", "outlinedSizeSmall", "outlinedSizeMedium", "outlinedSizeLarge", "containedSizeSmall", "containedSizeMedium", "containedSizeLarge", "sizeMedium", "sizeSmall", "sizeLarge", "fullWidth", "startIcon", "endIcon", "icon", "iconSizeSmall", "iconSizeMedium", "iconSizeLarge"]), h = /* @__PURE__ */ g.createContext({});
-process.env.NODE_ENV !== "production" && (h.displayName = "ButtonGroupContext");
+const c = _("MuiButton", ["root", "text", "textInherit", "textPrimary", "textSecondary", "textSuccess", "textError", "textInfo", "textWarning", "outlined", "outlinedInherit", "outlinedPrimary", "outlinedSecondary", "outlinedSuccess", "outlinedError", "outlinedInfo", "outlinedWarning", "contained", "containedInherit", "containedPrimary", "containedSecondary", "containedSuccess", "containedError", "containedInfo", "containedWarning", "disableElevation", "focusVisible", "disabled", "colorInherit", "colorPrimary", "colorSecondary", "colorSuccess", "colorError", "colorInfo", "colorWarning", "textSizeSmall", "textSizeMedium", "textSizeLarge", "outlinedSizeSmall", "outlinedSizeMedium", "outlinedSizeLarge", "containedSizeSmall", "containedSizeMedium", "containedSizeLarge", "sizeMedium", "sizeSmall", "sizeLarge", "fullWidth", "startIcon", "endIcon", "icon", "iconSizeSmall", "iconSizeMedium", "iconSizeLarge"]), I = /* @__PURE__ */ g.createContext({});
+process.env.NODE_ENV !== "production" && (I.displayName = "ButtonGroupContext");
 const O = /* @__PURE__ */ g.createContext(void 0);
 process.env.NODE_ENV !== "production" && (O.displayName = "ButtonGroupButtonContext");
-const Y = (o) => {
+const Z = (o) => {
   const {
-    color: a,
-    disableElevation: n,
+    color: n,
+    disableElevation: a,
     fullWidth: r,
     size: d,
     variant: p,
     classes: u
-  } = o, y = {
-    root: ["root", p, `${p}${e(a)}`, `size${e(d)}`, `${p}Size${e(d)}`, `color${e(a)}`, n && "disableElevation", r && "fullWidth"],
+  } = o, f = {
+    root: ["root", p, `${p}${i(n)}`, `size${i(d)}`, `${p}Size${i(d)}`, `color${i(n)}`, a && "disableElevation", r && "fullWidth"],
     label: ["label"],
-    startIcon: ["icon", "startIcon", `iconSize${e(d)}`],
-    endIcon: ["icon", "endIcon", `iconSize${e(d)}`]
-  }, f = J(y, X, u);
+    startIcon: ["icon", "startIcon", `iconSize${i(d)}`],
+    endIcon: ["icon", "endIcon", `iconSize${i(d)}`]
+  }, y = J(f, Y, u);
   return {
     ...u,
     // forward the focused, disabled, etc. classes to the ButtonBase
-    ...f
+    ...y
   };
 }, R = [{
   props: {
@@ -58,20 +59,20 @@ const Y = (o) => {
       fontSize: 22
     }
   }
-}], Z = l(I, {
+}], oo = l(S, {
   shouldForwardProp: (o) => H(o) || o === "classes",
   name: "MuiButton",
   slot: "Root",
-  overridesResolver: (o, a) => {
+  overridesResolver: (o, n) => {
     const {
-      ownerState: n
+      ownerState: a
     } = o;
-    return [a.root, a[n.variant], a[`${n.variant}${e(n.color)}`], a[`size${e(n.size)}`], a[`${n.variant}Size${e(n.size)}`], n.color === "inherit" && a.colorInherit, n.disableElevation && a.disableElevation, n.fullWidth && a.fullWidth];
+    return [n.root, n[a.variant], n[`${a.variant}${i(a.color)}`], n[`size${i(a.size)}`], n[`${a.variant}Size${i(a.size)}`], a.color === "inherit" && n.colorInherit, a.disableElevation && n.disableElevation, a.fullWidth && n.fullWidth];
   }
 })(K(({
   theme: o
 }) => {
-  const a = o.palette.mode === "light" ? o.palette.grey[300] : o.palette.grey[800], n = o.palette.mode === "light" ? o.palette.grey.A100 : o.palette.grey[700];
+  const n = o.palette.mode === "light" ? o.palette.grey[300] : o.palette.grey[800], a = o.palette.mode === "light" ? o.palette.grey.A100 : o.palette.grey[700];
   return {
     ...o.typography.button,
     minWidth: 64,
@@ -163,10 +164,10 @@ const Y = (o) => {
       style: {
         color: "inherit",
         borderColor: "currentColor",
-        "--variant-containedBg": o.vars ? o.vars.palette.Button.inheritContainedBg : a,
+        "--variant-containedBg": o.vars ? o.vars.palette.Button.inheritContainedBg : n,
         "@media (hover: hover)": {
           "&:hover": {
-            "--variant-containedBg": o.vars ? o.vars.palette.Button.inheritContainedHoverBg : n,
+            "--variant-containedBg": o.vars ? o.vars.palette.Button.inheritContainedHoverBg : a,
             "--variant-textBg": o.vars ? `rgba(${o.vars.palette.text.primaryChannel} / ${o.vars.palette.action.hoverOpacity})` : b(o.palette.text.primary, o.palette.action.hoverOpacity),
             "--variant-outlinedBg": o.vars ? `rgba(${o.vars.palette.text.primaryChannel} / ${o.vars.palette.action.hoverOpacity})` : b(o.palette.text.primary, o.palette.action.hoverOpacity)
           }
@@ -254,14 +255,14 @@ const Y = (o) => {
       }
     }]
   };
-})), oo = l("span", {
+})), to = l("span", {
   name: "MuiButton",
   slot: "StartIcon",
-  overridesResolver: (o, a) => {
+  overridesResolver: (o, n) => {
     const {
-      ownerState: n
+      ownerState: a
     } = o;
-    return [a.startIcon, a[`iconSize${e(n.size)}`]];
+    return [n.startIcon, n[`iconSize${i(a.size)}`]];
   }
 })({
   display: "inherit",
@@ -275,14 +276,14 @@ const Y = (o) => {
       marginLeft: -2
     }
   }, ...R]
-}), to = l("span", {
+}), ao = l("span", {
   name: "MuiButton",
   slot: "EndIcon",
-  overridesResolver: (o, a) => {
+  overridesResolver: (o, n) => {
     const {
-      ownerState: n
+      ownerState: a
     } = o;
-    return [a.endIcon, a[`iconSize${e(n.size)}`]];
+    return [n.endIcon, n[`iconSize${i(a.size)}`]];
   }
 })({
   display: "inherit",
@@ -296,61 +297,61 @@ const Y = (o) => {
       marginRight: -2
     }
   }, ...R]
-}), E = /* @__PURE__ */ g.forwardRef(function(a, n) {
-  const r = g.useContext(h), d = g.useContext(O), p = A(r, a), u = q({
+}), k = /* @__PURE__ */ g.forwardRef(function(n, a) {
+  const r = g.useContext(I), d = g.useContext(O), p = A(r, n), u = q({
     props: p,
     name: "MuiButton"
   }), {
-    children: y,
-    color: f = "primary",
-    component: S = "button",
-    className: k,
+    children: f,
+    color: y = "primary",
+    component: B = "button",
+    className: N,
     disabled: z = !1,
     disableElevation: T = !1,
-    disableFocusRipple: B = !1,
+    disableFocusRipple: $ = !1,
     endIcon: C,
     focusVisibleClassName: P,
     fullWidth: W = !1,
     size: M = "medium",
-    startIcon: $,
-    type: m,
+    startIcon: m,
+    type: w,
     variant: V = "text",
-    ...L
+    ...j
   } = u, x = {
     ...u,
-    color: f,
-    component: S,
+    color: y,
+    component: B,
     disabled: z,
     disableElevation: T,
-    disableFocusRipple: B,
+    disableFocusRipple: $,
     fullWidth: W,
     size: M,
-    type: m,
+    type: w,
     variant: V
-  }, v = Y(x), j = $ && /* @__PURE__ */ s(oo, {
+  }, v = Z(x), G = m && /* @__PURE__ */ s(to, {
     className: v.startIcon,
     ownerState: x,
-    children: $
-  }), G = C && /* @__PURE__ */ s(to, {
+    children: m
+  }), L = C && /* @__PURE__ */ s(ao, {
     className: v.endIcon,
     ownerState: x,
     children: C
   }), D = d || "";
-  return /* @__PURE__ */ F(Z, {
+  return /* @__PURE__ */ F(oo, {
     ownerState: x,
-    className: w(r.className, v.root, k, D),
-    component: S,
+    className: h(r.className, v.root, N, D),
+    component: B,
     disabled: z,
-    focusRipple: !B,
-    focusVisibleClassName: w(v.focusVisible, P),
-    ref: n,
-    type: m,
-    ...L,
+    focusRipple: !$,
+    focusVisibleClassName: h(v.focusVisible, P),
+    ref: a,
+    type: w,
+    ...j,
     classes: v,
-    children: [j, y, G]
+    children: [G, f, L]
   });
 });
-process.env.NODE_ENV !== "production" && (E.propTypes = {
+process.env.NODE_ENV !== "production" && (k.propTypes = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │
   // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
@@ -444,47 +445,71 @@ process.env.NODE_ENV !== "production" && (E.propTypes = {
    */
   variant: t.oneOfType([t.oneOf(["contained", "outlined", "text"]), t.string])
 });
-const N = l(E)`
+const E = l(k)`
   text-transform: none;
   &:disabled {
     opacity: 0.5;
-    color: ${i.colors.black};
+    color: ${e.colors.black};
     display: flex;
     justify-content: center;
     align-items: center;
   }
-`, ao = l(N)`
-  background-color: ${i.colors.green};
+`, no = l(E)`
+  background-color: ${e.colors.green};
   border-radius: 0;
   height: 2.5rem;
   border: 2px solid transparent;
-  color: ${i.colors.white};
+  color: ${e.colors.white};
   transition: 313ms all ease-in;
   border-radius: 32px;
   font-weight: 400;
   padding: 0.75rem 2rem;
   font-size: 1rem;
-  box-shadow: ${i.boxShadow.gray63};
+  box-shadow: ${e.boxShadow.gray63};
   &:hover,
-  :focus {
-    background-color: ${i.colors.darkGreen};
-    box-shadow: ${i.boxShadow.black63};
+  :focus-visible {
+    background-color: ${e.colors.darkGreen};
+    box-shadow: ${e.boxShadow.black63};
   }
   &:disabled {
-    background-color: ${i.colors.darkGreen};
+    background-color: ${e.colors.darkGreen};
   }
-`, no = l(N)`
-  color: ${i.colors.black};
-  border: 3px solid ${i.colors.blue};
+`, ro = l(E)`
+  color: ${e.colors.black};
+  border: 3px solid ${e.colors.blue};
   padding: 0.5rem 2rem;
-`, ro = l(I)`
+`, eo = l(S)`
   border-radius: 8px;
-`, uo = ({
+`, io = l(S)(({ size: o }) => ({
+  ...X`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: transparent;
+    transition: 313ms all ease-in-out;
+
+    &:hover,
+    :focus-visible {
+      svg {
+        filter: drop-shadow(0 0 6px ${e.colors.dandelion}) drop-shadow(0 0 6px ${e.colors.dandelion})
+          drop-shadow(0 0 6px ${e.colors.dandelion}) drop-shadow(0 0 6px ${e.colors.dandelion});
+      }
+    }
+
+    svg {
+      transition: 313ms all ease-in-out;
+      fill: ${e.colors.darkGreen};
+      width: ${o}px;
+      height: ${o}px;
+    }
+  `
+})), go = ({
   variant: o = 1,
+  size: n = 50,
   children: a,
-  ...n
-}) => o === "unstyled" ? /* @__PURE__ */ s(ro, { ...n, children: a }) : o === 2 ? /* @__PURE__ */ s(no, { ...n, children: /* @__PURE__ */ s("span", { children: a }) }) : /* @__PURE__ */ s(ao, { ...n, children: /* @__PURE__ */ s("span", { children: a }) });
+  ...r
+}) => o === "unstyled" ? /* @__PURE__ */ s(eo, { ...r, children: a }) : o === 2 ? /* @__PURE__ */ s(ro, { ...r, children: /* @__PURE__ */ s("span", { children: a }) }) : o === "icon" ? /* @__PURE__ */ s(io, { ...{ size: n }, ...r, children: a }) : /* @__PURE__ */ s(no, { ...r, children: /* @__PURE__ */ s("span", { children: a }) });
 export {
-  uo as Button,
-  uo as default
+  go as Button,
+  go as default
 };