@plutonhq/core-frontend 0.0.1

package/dist/components/Device/DeviceInfo/DeviceInfo.module.scss

@@ -0,0 +1,214 @@
+.deviceContent {
+   width: 100%;
+   position: relative;
+   padding: 30px;
+   border-radius: 7px;
+   box-sizing: border-box;
+   background-color: var(--content-background-color);
+   color: var(--content-text-color-light);
+   box-shadow: 0 0 15px var(--content-shadow-color);
+   min-height: 200px;
+   margin-top: 20px;
+}
+
+.iconBlock {
+   width: 40px;
+   height: 40px;
+   flex: 0 0 40px;
+   display: flex;
+   align-items: center;
+   justify-content: center;
+   border-radius: 50%;
+   background-color: var(--background-color);
+   color: var(--primary-color);
+}
+
+.deviceInfo {
+   width: 100%;
+   &.reloading {
+      opacity: 0.6;
+      user-select: none;
+   }
+}
+
+.topComponents {
+   display: flex;
+   gap: 20px;
+   margin-bottom: 30px;
+
+   .widget {
+      border: 1px solid var(--line-color);
+      padding: 20px;
+      border-radius: 6px;
+      box-sizing: border-box;
+      width: calc(33.33% - 15px);
+      .widgetTitle {
+         padding: 2px 6px;
+         background-color: var(--content-background-color);
+         border: 1px solid var(--line-color);
+         color: var(--content-title-color);
+         border-radius: 4px;
+         font-size: 0.6875rem;
+         font-weight: 600;
+         width: max-content;
+         position: relative;
+         margin-top: -30px;
+         span {
+            color: var(--icon-color);
+         }
+      }
+      .widgetContent {
+         width: 100%;
+         display: flex;
+         flex-direction: column;
+         gap: 15px;
+         padding-top: 10px;
+      }
+      .infoBlock {
+         width: 100%;
+         display: flex;
+         gap: 15px;
+         align-items: center;
+         .infoBlockRight {
+            width: 100%;
+            display: flex;
+            flex-direction: column;
+            gap: 2px;
+            color: var(--content-text-color);
+            font-weight: 600;
+            font-size: 0.625rem;
+            span:nth-child(1) {
+               font-size: 0.625rem;
+               color: var(--icon-color);
+            }
+            span:nth-child(2) {
+               display: block;
+               width: 90%;
+               white-space: nowrap;
+               overflow: hidden;
+               text-overflow: ellipsis;
+            }
+         }
+      }
+   }
+}
+
+.additionalMemory {
+   color: var(--icon-color);
+   background-color: var(--line-color);
+   font-style: normal;
+   font-size: 0.6rem;
+   padding: 2px 6px;
+   border-radius: 6px;
+   margin-left: 2px;
+}
+
+.progressBarWrap {
+   display: flex;
+   align-items: center;
+   gap: 7px;
+}
+.progressBar {
+   width: 100%;
+   height: 10px;
+   border-radius: 4px;
+   margin-top: 3px;
+   background-color: var(--line-color);
+   display: inline-block;
+   .progressBarFill {
+      height: 100%;
+      border-radius: 4px;
+      background-color: turquoise;
+      position: relative;
+      transition: all 0.2s linear;
+      min-width: 12%;
+      span {
+         font-weight: 600;
+         font-size: 0.625rem;
+         line-height: 1.1em;
+         position: absolute;
+         color: #fff !important;
+         right: 5px;
+      }
+   }
+}
+
+.component {
+   border: 1px solid var(--line-color);
+   padding: 20px;
+   margin-bottom: 30px;
+   border-radius: 6px;
+   box-sizing: border-box;
+   width: 100%;
+   .componentTitle {
+      padding: 2px 10px 2px 8px;
+      background-color: var(--content-background-color);
+      border: 1px solid var(--line-color);
+      color: var(--content-title-color);
+      border-radius: 4px;
+      font-size: 0.6875rem;
+      font-weight: 600;
+      width: max-content;
+      position: relative;
+      margin-top: -30px;
+      span {
+         color: var(--icon-color);
+      }
+   }
+   .contentBlock {
+      width: calc(100% - 50px);
+   }
+   .componentContent {
+      width: 100%;
+      padding-top: 15px;
+      display: grid;
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+      gap: 20px;
+      align-items: center;
+   }
+   .item {
+      display: flex;
+      gap: 10px;
+      border: 1px solid var(--line-color);
+      padding: 20px;
+      border-radius: 6px;
+      box-sizing: border-box;
+      font-size: 0.7rem;
+      align-items: center;
+      position: relative;
+      h4 {
+         margin: 0;
+         color: var(--content-title-color);
+         white-space: nowrap;
+         overflow: hidden;
+         text-overflow: ellipsis;
+      }
+      .blockLabel {
+         position: absolute;
+         top: -8px;
+         right: 8px;
+      }
+   }
+}
+
+@media only screen and (max-width: 768px) {
+   .topComponents {
+      flex-direction: column;
+      .widget {
+         width: 100%;
+         .infoBlock .infoBlockRight {
+            width: 190px;
+         }
+      }
+   }
+   .component {
+      .componentContent {
+         display: flex;
+         flex-direction: column;
+         align-items: flex-start;
+         .item {
+            width: 100%;
+         }
+      }
+   }
+}

package/dist/components/Device/DeviceInfo/DeviceInfo.module.scss.js

@@ -0,0 +1,42 @@
+const o = "DeviceInfo-module__iconBlock___xvy9N", e = "DeviceInfo-module__deviceInfo___7OUx0", n = "DeviceInfo-module__reloading___9Tk0g", _ = "DeviceInfo-module__topComponents___0qVUy", t = "DeviceInfo-module__widget___kqqTu", c = "DeviceInfo-module__widgetTitle___7wxPd", i = "DeviceInfo-module__widgetContent___9j8Zt", l = "DeviceInfo-module__infoBlock___QnuDB", d = "DeviceInfo-module__infoBlockRight___X5kbn", s = "DeviceInfo-module__additionalMemory___i4YVD", m = "DeviceInfo-module__progressBar___Iijgk", f = "DeviceInfo-module__progressBarFill___3-xD8", r = "DeviceInfo-module__component___9pX4o", g = "DeviceInfo-module__componentTitle___-des-", p = "DeviceInfo-module__contentBlock___1lK5Z", I = "DeviceInfo-module__componentContent___9kR8P", v = "DeviceInfo-module__item___bs8NI", D = "DeviceInfo-module__blockLabel___RAW-D", a = {
+  iconBlock: o,
+  deviceInfo: e,
+  reloading: n,
+  topComponents: _,
+  widget: t,
+  widgetTitle: c,
+  widgetContent: i,
+  infoBlock: l,
+  infoBlockRight: d,
+  additionalMemory: s,
+  progressBar: m,
+  progressBarFill: f,
+  component: r,
+  componentTitle: g,
+  contentBlock: p,
+  componentContent: I,
+  item: v,
+  blockLabel: D
+};
+export {
+  s as additionalMemory,
+  D as blockLabel,
+  r as component,
+  I as componentContent,
+  g as componentTitle,
+  p as contentBlock,
+  a as default,
+  e as deviceInfo,
+  o as iconBlock,
+  l as infoBlock,
+  d as infoBlockRight,
+  v as item,
+  m as progressBar,
+  f as progressBarFill,
+  n as reloading,
+  _ as topComponents,
+  t as widget,
+  i as widgetContent,
+  c as widgetTitle
+};
+//# sourceMappingURL=DeviceInfo.module.scss.js.map

package/dist/components/Device/DeviceInfo/DeviceInfo.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DeviceInfo.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;"}

package/dist/components/Device/DeviceItem/DeviceItem.d.ts

@@ -0,0 +1,8 @@
+import { Device } from '../../../@types/devices';
+interface DeviceItemProps {
+    device: Device;
+    layout: 'grid' | 'list';
+}
+declare const DeviceItem: ({ device, layout }: DeviceItemProps) => import("react/jsx-runtime").JSX.Element;
+export default DeviceItem;
+//# sourceMappingURL=DeviceItem.d.ts.map

package/dist/components/Device/DeviceItem/DeviceItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DeviceItem.d.ts","sourceRoot":"","sources":["../../../../src/components/Device/DeviceItem/DeviceItem.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAKjD,UAAU,eAAe;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC;CAC1B;AAED,QAAA,MAAM,UAAU,GAAI,oBAAoB,eAAe,4CA8EtD,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/components/Device/DeviceItem/DeviceItem.js

@@ -0,0 +1,89 @@
+import { jsxs as i, jsx as t } from "react/jsx-runtime";
+import s from "../../common/Icon/Icon.js";
+import e from "./DeviceItem.module.scss.js";
+import { useNavigate as C, NavLink as I } from "react-router";
+import { useState as p } from "react";
+import { getOSIcon as k } from "../../../utils/helpers.js";
+import x from "../EditDevice/EditDevice.js";
+const T = ({ device: l, layout: v }) => {
+  const [a, c] = p(!1), [h, d] = p(!1), u = C(), { id: n, versions: N, name: g, isRemote: f, plans: y = [], os: r = "linux", type: $, status: S, connected: m } = l, { agent: o } = N || {}, b = n === "main", z = k(r || "linux");
+  return /* @__PURE__ */ i("div", { className: `${e.device} ${v === "grid" ? e.deviceGrid : e.list}`, children: [
+    /* @__PURE__ */ i("div", { className: e.leftContent, children: [
+      /* @__PURE__ */ i("div", { className: e.deviceType, children: [
+        !b && /* @__PURE__ */ t(
+          "span",
+          {
+            title: m ? "Connected" : "Disconnected",
+            className: `${e.connectionStatus} ${m ? e.connected : ""}`
+          }
+        ),
+        /* @__PURE__ */ t(s, { type: f ? "computer-remote" : "computer", size: 36 }),
+        /* @__PURE__ */ t("span", { className: e.deviceOS, "data-tooltip-id": "appTooltip", "data-tooltip-content": r, children: /* @__PURE__ */ t(s, { type: z, size: 14 }) })
+      ] }),
+      /* @__PURE__ */ t("div", { className: e.content, children: /* @__PURE__ */ i(I, { to: `/device/${n}`, children: [
+        /* @__PURE__ */ t("div", { className: e.title, children: /* @__PURE__ */ i("h4", { children: [
+          g,
+          n === "main" && /* @__PURE__ */ t("span", { className: `label in_progress ${e.mainLabel}`, children: "Main" }),
+          " ",
+          S === "pending" && /* @__PURE__ */ t("span", { className: `label error ${e.mainLabel}`, children: "Agent not Installed" })
+        ] }) }),
+        /* @__PURE__ */ t("div", { className: e.type, children: $ })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ i("div", { className: e.rightContent, children: [
+      /* @__PURE__ */ i("div", { className: e.version, children: [
+        /* @__PURE__ */ t(s, { type: "backup", size: 14 }),
+        " ",
+        /* @__PURE__ */ i("i", { children: [
+          y.length,
+          " Plans"
+        ] })
+      ] }),
+      /* @__PURE__ */ i(
+        "div",
+        {
+          className: e.version,
+          "data-tooltip-id": "appTooltip",
+          "data-tooltip-content": `Pluton Agent version: ${o ? "v" + o : "latest"}`,
+          children: [
+            /* @__PURE__ */ t(s, { type: "compressed", size: 14 }),
+            " ",
+            /* @__PURE__ */ t("i", { children: o ? "v" + o : "latest" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ t("button", { className: `${e.moreBtn} ${a ? e.moreBtnActive : ""}`, onClick: () => c(!a), children: /* @__PURE__ */ t(s, { type: "dots-vertical", size: 14 }) }),
+      a && /* @__PURE__ */ i("div", { className: e.settings, children: [
+        /* @__PURE__ */ i(
+          "button",
+          {
+            onClick: () => {
+              d(!0), c(!1);
+            },
+            children: [
+              /* @__PURE__ */ t(s, { type: "edit-settings", size: 14 }),
+              " Edit"
+            ]
+          }
+        ),
+        /* @__PURE__ */ i(
+          "button",
+          {
+            onClick: () => {
+              c(!1), u(`/device/${n}`);
+            },
+            children: [
+              /* @__PURE__ */ t(s, { type: "eye", size: 14 }),
+              " System Info"
+            ]
+          }
+        )
+      ] })
+    ] }),
+    h && /* @__PURE__ */ t(x, { device: l, close: () => d(!1) })
+  ] }, n);
+};
+export {
+  T as default
+};
+//# sourceMappingURL=DeviceItem.js.map

package/dist/components/Device/DeviceItem/DeviceItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DeviceItem.js","sources":["../../../../src/components/Device/DeviceItem/DeviceItem.tsx"],"sourcesContent":["import Icon from '../../common/Icon/Icon';\r\nimport classes from './DeviceItem.module.scss';\r\nimport { NavLink, useNavigate } from 'react-router';\r\nimport { Device } from '../../../@types/devices';\r\nimport { useState } from 'react';\r\nimport { getOSIcon } from '../../../utils/helpers';\r\nimport EditDevice from '../EditDevice/EditDevice';\r\n\r\ninterface DeviceItemProps {\r\n   device: Device;\r\n   layout: 'grid' | 'list';\r\n}\r\n\r\nconst DeviceItem = ({ device, layout }: DeviceItemProps) => {\r\n   const [showSettings, setShowSettings] = useState(false);\r\n   const [showEditModal, setShowEditModal] = useState(false);\r\n   const navigate = useNavigate();\r\n   const { id, versions, name, isRemote, plans = [], os = 'linux', type, status, connected } = device;\r\n   const { agent: agentVersion } = versions || {};\r\n   const isPlutonServer = id === 'main';\r\n\r\n   const osIcon = getOSIcon(os || 'linux');\r\n\r\n   return (\r\n      <div key={id} className={`${classes.device} ${layout === 'grid' ? classes.deviceGrid : classes.list}`}>\r\n         <div className={classes.leftContent}>\r\n            <div className={classes.deviceType}>\r\n               {!isPlutonServer && (\r\n                  <span\r\n                     title={connected ? 'Connected' : 'Disconnected'}\r\n                     className={`${classes.connectionStatus} ${connected ? classes.connected : ''}`}\r\n                  />\r\n               )}\r\n               <Icon type={isRemote ? 'computer-remote' : 'computer'} size={36} />\r\n               <span className={classes.deviceOS} data-tooltip-id=\"appTooltip\" data-tooltip-content={os}>\r\n                  <Icon type={osIcon} size={14} />\r\n               </span>\r\n            </div>\r\n\r\n            <div className={classes.content}>\r\n               <NavLink to={`/device/${id}`}>\r\n                  <div className={classes.title}>\r\n                     <h4>\r\n                        {name}\r\n                        {id === 'main' && <span className={`label in_progress ${classes.mainLabel}`}>Main</span>}{' '}\r\n                        {status === 'pending' && <span className={`label error ${classes.mainLabel}`}>Agent not Installed</span>}\r\n                     </h4>\r\n                  </div>\r\n                  <div className={classes.type}>{type}</div>\r\n               </NavLink>\r\n            </div>\r\n         </div>\r\n         <div className={classes.rightContent}>\r\n            <div className={classes.version}>\r\n               <Icon type=\"backup\" size={14} /> <i>{plans.length} Plans</i>\r\n            </div>\r\n            <div\r\n               className={classes.version}\r\n               data-tooltip-id=\"appTooltip\"\r\n               data-tooltip-content={`Pluton Agent version: ${agentVersion ? 'v' + agentVersion : 'latest'}`}\r\n            >\r\n               <Icon type=\"compressed\" size={14} /> <i>{agentVersion ? 'v' + agentVersion : 'latest'}</i>\r\n            </div>\r\n            <button className={`${classes.moreBtn} ${showSettings ? classes.moreBtnActive : ''}`} onClick={() => setShowSettings(!showSettings)}>\r\n               <Icon type=\"dots-vertical\" size={14} />\r\n            </button>\r\n            {showSettings && (\r\n               <div className={classes.settings}>\r\n                  <button\r\n                     onClick={() => {\r\n                        setShowEditModal(true);\r\n                        setShowSettings(false);\r\n                     }}\r\n                  >\r\n                     <Icon type=\"edit-settings\" size={14} /> Edit\r\n                  </button>\r\n                  <button\r\n                     onClick={() => {\r\n                        setShowSettings(false);\r\n                        navigate(`/device/${id}`);\r\n                     }}\r\n                  >\r\n                     <Icon type=\"eye\" size={14} /> System Info\r\n                  </button>\r\n               </div>\r\n            )}\r\n         </div>\r\n\r\n         {showEditModal && <EditDevice device={device} close={() => setShowEditModal(false)} />}\r\n      </div>\r\n   );\r\n};\r\n\r\nexport default DeviceItem;\r\n"],"names":["DeviceItem","device","layout","showSettings","setShowSettings","useState","showEditModal","setShowEditModal","navigate","useNavigate","id","versions","name","isRemote","plans","os","type","status","connected","agentVersion","isPlutonServer","osIcon","getOSIcon","jsxs","classes","jsx","Icon","NavLink","EditDevice"],"mappings":"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"}

package/dist/components/Device/DeviceItem/DeviceItem.module.scss

@@ -0,0 +1,216 @@
+.device {
+   display: flex;
+   flex-direction: row;
+   align-items: center;
+   position: relative;
+   padding: 10px;
+   margin-bottom: 20px;
+   gap: 10px;
+   border-radius: 7px;
+   background-color: var(--content-background-color);
+   color: var(--content-text-color-light);
+   box-shadow: 0 0 15px var(--content-shadow-color);
+   transition: all 0.2s linear;
+   &:hover {
+      box-shadow: 0 0 20px var(--content-shadow-color);
+   }
+}
+
+.leftContent {
+   flex-basis: 40%;
+   display: flex;
+   flex-direction: row;
+   align-items: center;
+}
+.rightContent {
+   display: flex;
+   flex-direction: row;
+   align-items: center;
+   flex-basis: 60%;
+   justify-content: right;
+   gap: 10px;
+}
+
+.deviceType {
+   display: flex;
+   align-items: center;
+   margin-right: 10px;
+   margin-left: 5px;
+   position: relative;
+   color: var(--icon-color);
+   .deviceOS {
+      position: absolute;
+      bottom: 13px;
+      left: 10px;
+   }
+   .connectionStatus {
+      width: 12px;
+      height: 12px;
+      border-radius: 50%;
+      background-color: var(--line-active-color);
+      position: absolute;
+      top: 3px;
+      right: 0px;
+      z-index: 9;
+
+      &.connected {
+         background-color: turquoise;
+      }
+   }
+}
+
+.content {
+   display: flex;
+   flex-direction: column;
+   color: var(--content-text-color-light);
+   a {
+      color: inherit;
+      &:hover {
+         color: inherit;
+         h4 {
+            color: var(--primary-color);
+         }
+      }
+   }
+}
+
+.title {
+   display: flex;
+   flex-direction: row;
+
+   .mainLabel {
+      line-height: 0.9rem;
+   }
+   h4 {
+      margin: 0;
+      margin-bottom: 2px;
+      color: var(--content-text-color);
+      display: flex;
+      align-items: center;
+   }
+   :global(.icon) {
+      position: relative;
+      top: 2px;
+      margin-left: 5px;
+      opacity: 0.5;
+   }
+}
+
+.type {
+   text-transform: capitalize;
+}
+
+.version {
+   margin-right: 30px;
+   display: flex;
+   align-items: center;
+   :global(.icon) {
+      position: relative;
+      top: 2px;
+      margin-right: 5px;
+      opacity: 0.5;
+   }
+   i {
+      font-style: normal;
+   }
+   b {
+      margin-left: 3px;
+      color: #06ba9f;
+   }
+   &.versionUpdate {
+      cursor: pointer;
+      &:hover {
+         color: var(--primary-color);
+      }
+   }
+}
+
+.moreBtn {
+   color: var(--content-text-color-light);
+   padding: 3px 6px;
+   border-radius: 4px;
+   &.moreBtnActive {
+      background-color: var(--primary-color-light);
+      color: var(--primary-color);
+   }
+}
+
+.settings {
+   position: absolute;
+   z-index: 99;
+   top: 45px;
+   right: 15px;
+   display: flex;
+   flex-direction: column;
+   justify-content: left;
+   width: 120px;
+   text-align: left;
+   align-items: center;
+   background: var(--content-background-color);
+   border: 1px solid var(--line-color);
+   border-radius: 6px;
+   button {
+      padding: 6px 10px;
+      width: 100%;
+      text-align: left;
+      color: var(--content-text-color-light);
+      &:hover {
+         background-color: var(--primary-color-light);
+         color: var(--primary-color);
+      }
+   }
+}
+
+.deviceGrid {
+   width: 100%;
+   margin: 0;
+   flex-direction: column;
+   align-items: baseline;
+   padding: 0;
+   padding-bottom: 12px;
+   .leftContent {
+      padding: 12px;
+      width: 100%;
+      box-sizing: border-box;
+   }
+   .rightContent {
+      width: 100%;
+      flex-basis: unset;
+      justify-content: flex-start;
+      padding: 6px 10px;
+      box-sizing: border-box;
+      background: var(--primary-color-lighter);
+      .moreBtn {
+         margin-left: auto;
+      }
+   }
+   .settings {
+      bottom: 10px;
+      top: auto;
+      right: 40px;
+   }
+}
+
+@media only screen and (max-width: 768px) {
+   .device {
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 5px;
+
+      .rightContent {
+         width: 100%;
+         justify-content: flex-start;
+         border-top: 1px solid var(--line-color);
+         padding-top: 10px;
+         margin-top: 10px;
+         gap: 0;
+         button.moreBtn {
+            margin-left: auto;
+         }
+      }
+
+      .settings {
+         right: 35px;
+      }
+   }
+}

package/dist/components/Device/DeviceItem/DeviceItem.module.scss.js

@@ -0,0 +1,38 @@
+const e = "DeviceItem-module__device___DcBV6", t = "DeviceItem-module__leftContent___zVwBy", _ = "DeviceItem-module__rightContent___o9qrv", c = "DeviceItem-module__deviceType___K1Zj9", n = "DeviceItem-module__deviceOS___8YDnl", o = "DeviceItem-module__connectionStatus___lTHpV", i = "DeviceItem-module__connected___zTVW3", m = "DeviceItem-module__content___rMmXd", d = "DeviceItem-module__title___2-EfK", v = "DeviceItem-module__mainLabel___x4KgF", s = "DeviceItem-module__type___RUEFr", l = "DeviceItem-module__version___Gcz5K", u = "DeviceItem-module__moreBtn___FzPp1", r = "DeviceItem-module__moreBtnActive___t-WJQ", D = "DeviceItem-module__settings___LjuuA", I = "DeviceItem-module__deviceGrid___2AY96", a = {
+  device: e,
+  leftContent: t,
+  rightContent: _,
+  deviceType: c,
+  deviceOS: n,
+  connectionStatus: o,
+  connected: i,
+  content: m,
+  title: d,
+  mainLabel: v,
+  type: s,
+  version: l,
+  moreBtn: u,
+  moreBtnActive: r,
+  settings: D,
+  deviceGrid: I
+};
+export {
+  i as connected,
+  o as connectionStatus,
+  m as content,
+  a as default,
+  e as device,
+  I as deviceGrid,
+  n as deviceOS,
+  c as deviceType,
+  t as leftContent,
+  v as mainLabel,
+  u as moreBtn,
+  r as moreBtnActive,
+  _ as rightContent,
+  D as settings,
+  d as title,
+  s as type,
+  l as version
+};
+//# sourceMappingURL=DeviceItem.module.scss.js.map

package/dist/components/Device/DeviceItem/DeviceItem.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DeviceItem.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;"}

package/dist/components/Device/DeviceMemory/DeviceMemory.d.ts

@@ -0,0 +1,7 @@
+import { DeviceMetrics } from '../../../@types/devices';
+interface DeviceMemoryProps {
+    memory: DeviceMetrics['memory'];
+}
+declare const DeviceMemory: ({ memory }: DeviceMemoryProps) => import("react/jsx-runtime").JSX.Element;
+export default DeviceMemory;
+//# sourceMappingURL=DeviceMemory.d.ts.map

package/dist/components/Device/DeviceMemory/DeviceMemory.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DeviceMemory.d.ts","sourceRoot":"","sources":["../../../../src/components/Device/DeviceMemory/DeviceMemory.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAKxD,UAAU,iBAAiB;IACxB,MAAM,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;CAClC;AAED,QAAA,MAAM,YAAY,GAAI,YAAY,iBAAiB,4CAoFlD,CAAC;AAEF,eAAe,YAAY,CAAC"}