@hybridcore/ui 1.5.90 → 1.6.1

package/dist/components/context-menu/index.js

@@ -1,562 +1,30 @@
-import { jsx as y, jsxs as V, Fragment as G } from "react/jsx-runtime";
-import * as d from "react";
-import { P as t } from "../../index-DMSHuq6l.js";
-import { a as D, b as W, B as z, u as H } from "../../ButtonBase-DsX-jMQJ.js";
-import { o as k } from "../../ownerDocument-CUrv0DIK.js";
-import { e as q, a as X } from "../../exactProp-cjT0t_Pt.js";
-import { L, a as Y } from "../../List-DOD5kSk3.js";
-import { l as T, g as J, L as K } from "../../ListItem-r8PbsvCz.js";
-import { a as b, _ as P } from "../../objectWithoutPropertiesLoose-DJteAcBH.js";
-import { u as $, c as R, a as w } from "../../useThemeProps-DRP1dikX.js";
-import { s as B, r as Q } from "../../styled-B8ugzvji.js";
-import { a as C } from "../../createTheme-CNnKNxwL.js";
-import { g as Z, l as S, b as ee } from "../../listItemTextClasses-CNjn41Of.js";
-import { T as E } from "../../Typography-D1t7XuLN.js";
-function M(e) {
-  return e.substring(2).toLowerCase();
-}
-function te(e, o) {
-  return o.documentElement.clientWidth < e.clientX || o.documentElement.clientHeight < e.clientY;
-}
-function O(e) {
-  const {
-    children: o,
-    disableReactTree: s = !1,
-    mouseEvent: n = "onClick",
-    onClickAway: p,
-    touchEvent: c = "onTouchEnd"
-  } = e, l = d.useRef(!1), a = d.useRef(null), u = d.useRef(!1), m = d.useRef(!1);
-  d.useEffect(() => (setTimeout(() => {
-    u.current = !0;
-  }, 0), () => {
-    u.current = !1;
-  }), []);
-  const I = D(
-    // @ts-expect-error TODO upstream fix
-    o.ref,
-    a
-  ), g = W((r) => {
-    const i = m.current;
-    m.current = !1;
-    const f = k(a.current);
-    if (!u.current || !a.current || "clientX" in r && te(r, f))
-      return;
-    if (l.current) {
-      l.current = !1;
-      return;
-    }
-    let v;
-    r.composedPath ? v = r.composedPath().indexOf(a.current) > -1 : v = !f.documentElement.contains(
-      // @ts-expect-error returns `false` as intended when not dispatched from a Node
-      r.target
-    ) || a.current.contains(
-      // @ts-expect-error returns `false` as intended when not dispatched from a Node
-      r.target
-    ), !v && (s || !i) && p(r);
-  }), h = (r) => (i) => {
-    m.current = !0;
-    const f = o.props[r];
-    f && f(i);
-  }, x = {
-    ref: I
-  };
-  return c !== !1 && (x[c] = h(c)), d.useEffect(() => {
-    if (c !== !1) {
-      const r = M(c), i = k(a.current), f = () => {
-        l.current = !0;
-      };
-      return i.addEventListener(r, g), i.addEventListener("touchmove", f), () => {
-        i.removeEventListener(r, g), i.removeEventListener("touchmove", f);
-      };
-    }
-  }, [g, c]), n !== !1 && (x[n] = h(n)), d.useEffect(() => {
-    if (n !== !1) {
-      const r = M(n), i = k(a.current);
-      return i.addEventListener(r, g), () => {
-        i.removeEventListener(r, g);
-      };
-    }
-  }, [g, n]), /* @__PURE__ */ y(d.Fragment, {
-    children: /* @__PURE__ */ d.cloneElement(o, x)
-  });
-}
-process.env.NODE_ENV !== "production" && (O.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // |     To update them edit TypeScript types and run "yarn proptypes"  |
-  // ----------------------------------------------------------------------
-  /**
-   * The wrapped element.
-   */
-  children: q.isRequired,
-  /**
-   * If `true`, the React tree is ignored and only the DOM tree is considered.
-   * This prop changes how portaled elements are handled.
-   * @default false
-   */
-  disableReactTree: t.bool,
-  /**
-   * The mouse event to listen to. You can disable the listener by providing `false`.
-   * @default 'onClick'
-   */
-  mouseEvent: t.oneOf(["onClick", "onMouseDown", "onMouseUp", "onPointerDown", "onPointerUp", !1]),
-  /**
-   * Callback fired when a "click away" event is detected.
-   */
-  onClickAway: t.func.isRequired,
-  /**
-   * The touch event to listen to. You can disable the listener by providing `false`.
-   * @default 'onTouchEnd'
-   */
-  touchEvent: t.oneOf(["onTouchEnd", "onTouchStart", !1])
-});
-process.env.NODE_ENV !== "production" && (O.propTypes = X(O.propTypes));
-const oe = ["alignItems", "autoFocus", "component", "children", "dense", "disableGutters", "divider", "focusVisibleClassName", "selected", "className"], se = (e, o) => {
-  const {
-    ownerState: s
-  } = e;
-  return [o.root, s.dense && o.dense, s.alignItems === "flex-start" && o.alignItemsFlexStart, s.divider && o.divider, !s.disableGutters && o.gutters];
-}, re = (e) => {
-  const {
-    alignItems: o,
-    classes: s,
-    dense: n,
-    disabled: p,
-    disableGutters: c,
-    divider: l,
-    selected: a
-  } = e, m = w({
-    root: ["root", n && "dense", !c && "gutters", l && "divider", p && "disabled", o === "flex-start" && "alignItemsFlexStart", a && "selected"]
-  }, J, s);
-  return b({}, s, m);
-}, ne = B(z, {
-  shouldForwardProp: (e) => Q(e) || e === "classes",
-  name: "MuiListItemButton",
-  slot: "Root",
-  overridesResolver: se
-})(({
-  theme: e,
-  ownerState: o
-}) => b({
-  display: "flex",
-  flexGrow: 1,
-  justifyContent: "flex-start",
-  alignItems: "center",
-  position: "relative",
-  textDecoration: "none",
-  minWidth: 0,
-  boxSizing: "border-box",
-  textAlign: "left",
-  paddingTop: 8,
-  paddingBottom: 8,
-  transition: e.transitions.create("background-color", {
-    duration: e.transitions.duration.shortest
-  }),
-  "&:hover": {
-    textDecoration: "none",
-    backgroundColor: (e.vars || e).palette.action.hover,
-    // Reset on touch devices, it doesn't add specificity
-    "@media (hover: none)": {
-      backgroundColor: "transparent"
-    }
-  },
-  [`&.${T.selected}`]: {
-    backgroundColor: e.vars ? `rgba(${e.vars.palette.primary.mainChannel} / ${e.vars.palette.action.selectedOpacity})` : C(e.palette.primary.main, e.palette.action.selectedOpacity),
-    [`&.${T.focusVisible}`]: {
-      backgroundColor: e.vars ? `rgba(${e.vars.palette.primary.mainChannel} / calc(${e.vars.palette.action.selectedOpacity} + ${e.vars.palette.action.focusOpacity}))` : C(e.palette.primary.main, e.palette.action.selectedOpacity + e.palette.action.focusOpacity)
-    }
-  },
-  [`&.${T.selected}:hover`]: {
-    backgroundColor: e.vars ? `rgba(${e.vars.palette.primary.mainChannel} / calc(${e.vars.palette.action.selectedOpacity} + ${e.vars.palette.action.hoverOpacity}))` : C(e.palette.primary.main, e.palette.action.selectedOpacity + e.palette.action.hoverOpacity),
-    // Reset on touch devices, it doesn't add specificity
-    "@media (hover: none)": {
-      backgroundColor: e.vars ? `rgba(${e.vars.palette.primary.mainChannel} / ${e.vars.palette.action.selectedOpacity})` : C(e.palette.primary.main, e.palette.action.selectedOpacity)
-    }
-  },
-  [`&.${T.focusVisible}`]: {
-    backgroundColor: (e.vars || e).palette.action.focus
-  },
-  [`&.${T.disabled}`]: {
-    opacity: (e.vars || e).palette.action.disabledOpacity
-  }
-}, o.divider && {
-  borderBottom: `1px solid ${(e.vars || e).palette.divider}`,
-  backgroundClip: "padding-box"
-}, o.alignItems === "flex-start" && {
-  alignItems: "flex-start"
-}, !o.disableGutters && {
-  paddingLeft: 16,
-  paddingRight: 16
-}, o.dense && {
-  paddingTop: 4,
-  paddingBottom: 4
-})), F = /* @__PURE__ */ d.forwardRef(function(o, s) {
-  const n = $({
-    props: o,
-    name: "MuiListItemButton"
-  }), {
-    alignItems: p = "center",
-    autoFocus: c = !1,
-    component: l = "div",
-    children: a,
-    dense: u = !1,
-    disableGutters: m = !1,
-    divider: I = !1,
-    focusVisibleClassName: g,
-    selected: h = !1,
-    className: x
-  } = n, r = P(n, oe), i = d.useContext(L), f = d.useMemo(() => ({
-    dense: u || i.dense || !1,
-    alignItems: p,
-    disableGutters: m
-  }), [p, i.dense, u, m]), v = d.useRef(null);
-  H(() => {
-    c && (v.current ? v.current.focus() : process.env.NODE_ENV !== "production" && console.error("MUI: Unable to set focus to a ListItemButton whose component has not been rendered."));
-  }, [c]);
-  const j = b({}, n, {
-    alignItems: p,
-    dense: f.dense,
-    disableGutters: m,
-    divider: I,
-    selected: h
-  }), N = re(j), A = D(v, s);
-  return /* @__PURE__ */ y(L.Provider, {
-    value: f,
-    children: /* @__PURE__ */ y(ne, b({
-      ref: A,
-      href: r.href || r.to,
-      component: (r.href || r.to) && l === "div" ? "a" : l,
-      focusVisibleClassName: R(N.focusVisible, g),
-      ownerState: j,
-      className: R(N.root, x)
-    }, r, {
-      classes: N,
-      children: a
-    }))
-  });
-});
-process.env.NODE_ENV !== "production" && (F.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // |     To update them edit the d.ts file and run "yarn proptypes"     |
-  // ----------------------------------------------------------------------
-  /**
-   * Defines the `align-items` style property.
-   * @default 'center'
-   */
-  alignItems: t.oneOf(["center", "flex-start"]),
-  /**
-   * If `true`, the list item is focused during the first mount.
-   * Focus will also be triggered if the value changes from false to true.
-   * @default false
-   */
-  autoFocus: t.bool,
-  /**
-   * The content of the component if a `ListItemSecondaryAction` is used it must
-   * be the last child.
-   */
-  children: t.node,
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes: t.object,
-  /**
-   * @ignore
-   */
-  className: t.string,
-  /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: t.elementType,
-  /**
-   * If `true`, compact vertical padding designed for keyboard and mouse input is used.
-   * The prop defaults to the value inherited from the parent List component.
-   * @default false
-   */
-  dense: t.bool,
-  /**
-   * If `true`, the component is disabled.
-   * @default false
-   */
-  disabled: t.bool,
-  /**
-   * If `true`, the left and right padding is removed.
-   * @default false
-   */
-  disableGutters: t.bool,
-  /**
-   * If `true`, a 1px light border is added to the bottom of the list item.
-   * @default false
-   */
-  divider: t.bool,
-  /**
-   * This prop can help identify which element has keyboard focus.
-   * The class name will be applied when the element gains the focus through keyboard interaction.
-   * It's a polyfill for the [CSS :focus-visible selector](https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo).
-   * The rationale for using this feature [is explained here](https://github.com/WICG/focus-visible/blob/HEAD/explainer.md).
-   * A [polyfill can be used](https://github.com/WICG/focus-visible) to apply a `focus-visible` class to other components
-   * if needed.
-   */
-  focusVisibleClassName: t.string,
-  /**
-   * @ignore
-   */
-  href: t.string,
-  /**
-   * Use to apply selected styling.
-   * @default false
-   */
-  selected: t.bool,
-  /**
-   * The system prop that allows defining system overrides as well as additional CSS styles.
-   */
-  sx: t.oneOfType([t.arrayOf(t.oneOfType([t.func, t.object, t.bool])), t.func, t.object])
-});
-const ae = ["className"], ie = (e) => {
-  const {
-    alignItems: o,
-    classes: s
-  } = e;
-  return w({
-    root: ["root", o === "flex-start" && "alignItemsFlexStart"]
-  }, Z, s);
-}, ce = B("div", {
-  name: "MuiListItemIcon",
-  slot: "Root",
-  overridesResolver: (e, o) => {
-    const {
-      ownerState: s
-    } = e;
-    return [o.root, s.alignItems === "flex-start" && o.alignItemsFlexStart];
-  }
-})(({
-  theme: e,
-  ownerState: o
-}) => b({
-  minWidth: 56,
-  color: (e.vars || e).palette.action.active,
-  flexShrink: 0,
-  display: "inline-flex"
-}, o.alignItems === "flex-start" && {
-  marginTop: 8
-})), _ = /* @__PURE__ */ d.forwardRef(function(o, s) {
-  const n = $({
-    props: o,
-    name: "MuiListItemIcon"
-  }), {
-    className: p
-  } = n, c = P(n, ae), l = d.useContext(L), a = b({}, n, {
-    alignItems: l.alignItems
-  }), u = ie(a);
-  return /* @__PURE__ */ y(ce, b({
-    className: R(u.root, p),
-    ownerState: a,
-    ref: s
-  }, c));
-});
-process.env.NODE_ENV !== "production" && (_.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // |     To update them edit the d.ts file and run "yarn proptypes"     |
-  // ----------------------------------------------------------------------
-  /**
-   * The content of the component, normally `Icon`, `SvgIcon`,
-   * or a `@mui/icons-material` SVG icon element.
-   */
-  children: t.node,
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes: t.object,
-  /**
-   * @ignore
-   */
-  className: t.string,
-  /**
-   * The system prop that allows defining system overrides as well as additional CSS styles.
-   */
-  sx: t.oneOfType([t.arrayOf(t.oneOfType([t.func, t.object, t.bool])), t.func, t.object])
-});
-const le = ["children", "className", "disableTypography", "inset", "primary", "primaryTypographyProps", "secondary", "secondaryTypographyProps"], de = (e) => {
-  const {
-    classes: o,
-    inset: s,
-    primary: n,
-    secondary: p,
-    dense: c
-  } = e;
-  return w({
-    root: ["root", s && "inset", c && "dense", n && p && "multiline"],
-    primary: ["primary"],
-    secondary: ["secondary"]
-  }, ee, o);
-}, pe = B("div", {
-  name: "MuiListItemText",
-  slot: "Root",
-  overridesResolver: (e, o) => {
-    const {
-      ownerState: s
-    } = e;
-    return [{
-      [`& .${S.primary}`]: o.primary
-    }, {
-      [`& .${S.secondary}`]: o.secondary
-    }, o.root, s.inset && o.inset, s.primary && s.secondary && o.multiline, s.dense && o.dense];
-  }
-})(({
-  ownerState: e
-}) => b({
-  flex: "1 1 auto",
-  minWidth: 0,
-  marginTop: 4,
-  marginBottom: 4
-}, e.primary && e.secondary && {
-  marginTop: 6,
-  marginBottom: 6
-}, e.inset && {
-  paddingLeft: 56
-})), U = /* @__PURE__ */ d.forwardRef(function(o, s) {
-  const n = $({
-    props: o,
-    name: "MuiListItemText"
-  }), {
-    children: p,
-    className: c,
-    disableTypography: l = !1,
-    inset: a = !1,
-    primary: u,
-    primaryTypographyProps: m,
-    secondary: I,
-    secondaryTypographyProps: g
-  } = n, h = P(n, le), {
-    dense: x
-  } = d.useContext(L);
-  let r = u ?? p, i = I;
-  const f = b({}, n, {
-    disableTypography: l,
-    inset: a,
-    primary: !!r,
-    secondary: !!i,
-    dense: x
-  }), v = de(f);
-  return r != null && r.type !== E && !l && (r = /* @__PURE__ */ y(E, b({
-    variant: x ? "body2" : "body1",
-    className: v.primary,
-    component: m != null && m.variant ? void 0 : "span",
-    display: "block"
-  }, m, {
-    children: r
-  }))), i != null && i.type !== E && !l && (i = /* @__PURE__ */ y(E, b({
-    variant: "body2",
-    className: v.secondary,
-    color: "text.secondary",
-    display: "block"
-  }, g, {
-    children: i
-  }))), /* @__PURE__ */ V(pe, b({
-    className: R(v.root, c),
-    ownerState: f,
-    ref: s
-  }, h, {
-    children: [r, i]
-  }));
-});
-process.env.NODE_ENV !== "production" && (U.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // |     To update them edit the d.ts file and run "yarn proptypes"     |
-  // ----------------------------------------------------------------------
-  /**
-   * Alias for the `primary` prop.
-   */
-  children: t.node,
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes: t.object,
-  /**
-   * @ignore
-   */
-  className: t.string,
-  /**
-   * If `true`, the children won't be wrapped by a Typography component.
-   * This can be useful to render an alternative Typography variant by wrapping
-   * the `children` (or `primary`) text, and optional `secondary` text
-   * with the Typography component.
-   * @default false
-   */
-  disableTypography: t.bool,
-  /**
-   * If `true`, the children are indented.
-   * This should be used if there is no left avatar or left icon.
-   * @default false
-   */
-  inset: t.bool,
-  /**
-   * The main content element.
-   */
-  primary: t.node,
-  /**
-   * These props will be forwarded to the primary typography component
-   * (as long as disableTypography is not `true`).
-   */
-  primaryTypographyProps: t.object,
-  /**
-   * The secondary content element.
-   */
-  secondary: t.node,
-  /**
-   * These props will be forwarded to the secondary typography component
-   * (as long as disableTypography is not `true`).
-   */
-  secondaryTypographyProps: t.object,
-  /**
-   * The system prop that allows defining system overrides as well as additional CSS styles.
-   */
-  sx: t.oneOfType([t.arrayOf(t.oneOfType([t.func, t.object, t.bool])), t.func, t.object])
-});
-const Le = ({
-  open: e,
-  buttons: o,
-  position: s,
-  width: n = 160,
-  sx: p,
-  onClose: c
-}) => {
-  const l = () => {
-    c && c();
-  };
-  return e ? /* @__PURE__ */ y(O, { onClickAway: l, children: /* @__PURE__ */ y(
-    Y,
+import { jsx as t, jsxs as s } from "react/jsx-runtime";
+import { ClickAwayListener as a } from "@mui/material";
+import { useContextMenuLogic as d } from "./logic.js";
+import { ContextMenuList as u, ContextMenuItem as x, ContextMenuItemButton as C, ContextMenuItemIcon as m, ContextMenuItemText as I } from "./styled.js";
+const y = (e) => {
+  const { state: o, actions: r } = d(e), { ownerState: i, open: c } = o;
+  return c ? /* @__PURE__ */ t(a, { onClickAway: r.handleClickAway, children: /* @__PURE__ */ t(u, { ownerState: i, sx: e.sx, disablePadding: !0, children: e.buttons.map((n, l) => /* @__PURE__ */ t(
+    x,
     {
-      sx: {
-        position: "absolute",
-        zIndex: 9999999,
-        width: n,
-        maxWidth: 360,
-        bgcolor: "background.paper",
-        left: s == null ? void 0 : s.left,
-        top: s == null ? void 0 : s.top,
-        borderRadius: 0.5,
-        ...p
-      },
+      secondaryAction: n.endIcon,
       disablePadding: !0,
-      children: o.map((a, u) => /* @__PURE__ */ y(K, { secondaryAction: a.endIcon, disablePadding: !0, children: /* @__PURE__ */ V(F, { role: void 0, onClick: a.onClick, dense: !0, children: [
-        a.startIcon !== void 0 && /* @__PURE__ */ y(_, { sx: { minWidth: "auto", mr: 1 }, children: a.startIcon }),
-        /* @__PURE__ */ y(
-          U,
-          {
-            primary: a.label,
-            primaryTypographyProps: {
-              fontSize: "12px"
-            }
-          }
-        )
-      ] }) }, u))
-    }
-  ) }) : /* @__PURE__ */ y(G, {});
+      children: /* @__PURE__ */ s(
+        C,
+        {
+          role: void 0,
+          onClick: n.onClick,
+          dense: !0,
+          children: [
+            n.startIcon !== void 0 && /* @__PURE__ */ t(m, { children: n.startIcon }),
+            /* @__PURE__ */ t(I, { primary: n.label })
+          ]
+        }
+      )
+    },
+    l
+  )) }) }) : null;
 };
 export {
-  Le as ContextMenu
+  y as ContextMenu
 };

package/dist/components/context-menu/logic.js

@@ -0,0 +1,14 @@
+import { useThemeProps as p } from "@mui/material";
+const a = (t) => {
+  const o = p({ props: t, name: "HCContextMenu" }), { width: n = 160, onClose: e } = o, s = { ...o, width: n }, r = () => {
+    e && e();
+  };
+  return {
+    refs: {},
+    state: { ownerState: s, open: o.open },
+    actions: { handleClickAway: r }
+  };
+};
+export {
+  a as useContextMenuLogic
+};

package/dist/components/context-menu/styled.js

@@ -0,0 +1,40 @@
+import { styled as o, List as n, ListItem as i, ListItemButton as s, ListItemIcon as m, ListItemText as u } from "@mui/material";
+const a = (t) => t !== "ownerState", C = o(n, {
+  name: "HCContextMenu",
+  slot: "list",
+  shouldForwardProp: a
+})(({ theme: t, ownerState: e }) => ({
+  position: "absolute",
+  zIndex: 9999999,
+  width: e.width ?? 160,
+  maxWidth: 360,
+  backgroundColor: t.palette.background.paper,
+  borderRadius: t.shape.borderRadius * 0.5,
+  ...e.position ? { left: e.position.left, top: e.position.top } : {}
+})), p = o(i, {
+  name: "HCContextMenu",
+  slot: "item"
+})({}), r = o(s, {
+  name: "HCContextMenu",
+  slot: "itemButton"
+})({}), d = o(m, {
+  name: "HCContextMenu",
+  slot: "itemIcon"
+})(({ theme: t }) => ({
+  minWidth: "auto",
+  marginRight: t.spacing(1)
+})), l = o(u, {
+  name: "HCContextMenu",
+  slot: "itemText"
+})({
+  "& .MuiListItemText-primary": {
+    fontSize: 12
+  }
+});
+export {
+  p as ContextMenuItem,
+  r as ContextMenuItemButton,
+  d as ContextMenuItemIcon,
+  l as ContextMenuItemText,
+  C as ContextMenuList
+};

package/dist/components/data-map/components/controls/index.js

@@ -0,0 +1,12 @@
+import { jsxs as i, jsx as o } from "react/jsx-runtime";
+import { Container as t, Button as r } from "./styled.js";
+import { I as s, a as l } from "../../../../IconPlus-yPkff_Vj.js";
+function m({ mapRef: n }) {
+  return n ? /* @__PURE__ */ i(t, { children: [
+    /* @__PURE__ */ o(r, { onClick: n.zoomIn, children: /* @__PURE__ */ o(s, { size: 18 }) }),
+    /* @__PURE__ */ o(r, { onClick: n.zoomOut, children: /* @__PURE__ */ o(l, { size: 18 }) })
+  ] }) : null;
+}
+export {
+  m as Controls
+};

package/dist/components/data-map/components/controls/styled.js

@@ -0,0 +1,34 @@
+import { styled as a, Box as n, IconButton as t } from "@mui/material";
+const r = a(n, {
+  name: "HCDataMapControls",
+  slot: "Root"
+})(({ theme: o }) => ({
+  position: "absolute",
+  left: o.spacing(1),
+  bottom: o.spacing(1),
+  display: "flex",
+  flexDirection: "column",
+  gap: o.spacing(0.5)
+})), p = a(t, {
+  name: "HCDataMapControls",
+  slot: "Button"
+})(({ theme: o }) => ({
+  borderRadius: o.shape.borderRadius,
+  backgroundColor: o.palette.background.paper,
+  border: "1px solid",
+  borderColor: o.palette.divider,
+  width: o.spacing(3),
+  height: o.spacing(3),
+  padding: o.spacing(0.5),
+  ".MuiSvgIcon-root": {
+    width: o.spacing(2),
+    height: o.spacing(2)
+  },
+  "&:hover": {
+    backgroundColor: o.palette.background.default
+  }
+}));
+export {
+  p as Button,
+  r as Container
+};