@conboai/storybook.components 0.2.9 → 0.2.11

package/dist/components/VideoBox/styles.d.ts

@@ -6,3 +6,4 @@ export declare const playControlsSx: SxProps;
 export declare const containerSx: (isModalOpen: boolean) => SxProps;
 export declare const videoStyles: (isLoading: boolean) => CSSProperties | undefined;
 export declare const controlsSx: (isModalOpen: boolean) => SxProps;
+export declare const videoBoxSx: SxProps;

package/dist/storybook.components.mjs

@@ -39782,7 +39782,7 @@ const R2 = {
 };
 St.extend(DL);
 St.extend(OL);
-const l3 = ({
+const c3 = ({
   label: t = "",
   onChange: e,
   value: n,
@@ -40839,7 +40839,7 @@ const Ly = {
     id: n.key,
     subItemValues: r.subItemValues
   };
-}), c3 = ({
+}), u3 = ({
   title: t,
   filterTitle: e,
   data: n,
@@ -41158,7 +41158,7 @@ const Ly = {
       ]
     }
   ) });
-}, u3 = ({
+}, d3 = ({
   tabs: t,
   activeId: e,
   onDelete: n,
@@ -41205,7 +41205,7 @@ const Ly = {
       ] })
     }
   );
-}, d3 = ({ children: t }) => /* @__PURE__ */ T.jsx(
+}, f3 = ({ children: t }) => /* @__PURE__ */ T.jsx(
   lt,
   {
     justifyContent: "space-between",
@@ -41215,7 +41215,7 @@ const Ly = {
     sx: { backgroundColor: yb, display: "flex" },
     children: t
   }
-), f3 = ({ linkContent: t, link: e }) => /* @__PURE__ */ T.jsx(e0, { href: e, height: "100%", children: t }), pB = ({
+), p3 = ({ linkContent: t, link: e }) => /* @__PURE__ */ T.jsx(e0, { href: e, height: "100%", children: t }), pB = ({
   setValue: t,
   value: e,
   tabs: n,
@@ -41256,7 +41256,7 @@ const Ly = {
     }
   ),
   /* @__PURE__ */ T.jsx(hB, { tabsContent: r })
-] }), p3 = ({ tabsContent: t, tabs: e, onChange: n }) => {
+] }), h3 = ({ tabsContent: t, tabs: e, onChange: n }) => {
   const [r, o] = ft("0"), i = { background: "none", padding: "20px" };
   return /* @__PURE__ */ T.jsx(ct, { sx: i, children: /* @__PURE__ */ T.jsx(
     mB,
@@ -41282,7 +41282,7 @@ const Ly = {
       /* @__PURE__ */ T.jsx("circle", { cx: "2", cy: "14", r: "2", fill: "black", fillOpacity: "0.6" })
     ]
   }
-), h3 = ({ title: t }) => /* @__PURE__ */ T.jsxs(
+), m3 = ({ title: t }) => /* @__PURE__ */ T.jsxs(
   lt,
   {
     container: !0,
@@ -41306,7 +41306,7 @@ const Ly = {
     ]
   }
 ), gB = { display: "flex", flexWrap: "wrap", gap: 0.5 };
-function m3({
+function g3({
   options: t,
   label: e,
   value: n,
@@ -58199,8 +58199,17 @@ const $5 = {
 }), V5 = (t) => ({
   position: t ? "absolute" : "relative",
   bottom: t ? "5px" : "auto",
-  width: t ? "100%" : "auto"
-}), qv = ({
+  width: t ? "100%" : "auto",
+  display: "flex",
+  gap: "10px"
+}), U5 = {
+  display: "flex",
+  backgroundColor: un,
+  ".MuiContainer-root": {
+    paddingLeft: "15px !important",
+    paddingRight: "0 !important"
+  }
+}, qv = ({
   isLoading: t = !1,
   src: e,
   isHls: n = !1,
@@ -58290,7 +58299,7 @@ const $5 = {
                   sx: V5(o),
                   margin: "0",
                   children: [
-                    !o && /* @__PURE__ */ T.jsx(lt, { mt: "10px", children: /* @__PURE__ */ T.jsx(zt, { onClick: m, children: i ? /* @__PURE__ */ T.jsx($t, { icon: "pause" }) : /* @__PURE__ */ T.jsx($t, { icon: "play" }) }) }),
+                    !o && /* @__PURE__ */ T.jsx(lt, { children: /* @__PURE__ */ T.jsx(zt, { onClick: m, children: i ? /* @__PURE__ */ T.jsx($t, { icon: "pause" }) : /* @__PURE__ */ T.jsx($t, { icon: "play" }) }) }),
                     /* @__PURE__ */ T.jsx(lt, { item: !0, xs: !0, children: /* @__PURE__ */ T.jsx(
                       f0,
                       {
@@ -58324,12 +58333,12 @@ const $5 = {
       )
     }
   );
-}, U5 = {
+}, H5 = {
   position: "absolute",
   top: "50%",
   left: "50%",
   transform: "translate(-50%, -50%)"
-}, H5 = {
+}, W5 = {
   position: "absolute",
   top: "60px",
   right: "20px",
@@ -58355,7 +58364,7 @@ const $5 = {
       stroke: un
     }
   }
-}, W5 = ({ open: t, handleClose: e, children: n }) => /* @__PURE__ */ T.jsx(
+}, z5 = ({ open: t, handleClose: e, children: n }) => /* @__PURE__ */ T.jsx(
   Xl,
   {
     open: t,
@@ -58363,17 +58372,17 @@ const $5 = {
     "aria-labelledby": "modal-title",
     "aria-describedby": "modal-description",
     children: /* @__PURE__ */ T.jsxs(T.Fragment, { children: [
-      /* @__PURE__ */ T.jsx(ct, { sx: H5, onClick: e, children: /* @__PURE__ */ T.jsx($t, { icon: "close" }) }),
-      /* @__PURE__ */ T.jsx(ct, { sx: U5, children: n })
+      /* @__PURE__ */ T.jsx(ct, { sx: W5, onClick: e, children: /* @__PURE__ */ T.jsx($t, { icon: "close" }) }),
+      /* @__PURE__ */ T.jsx(ct, { sx: H5, children: n })
     ] })
   }
-), z5 = ({
+), G5 = ({
   isModalOpen: t = !1,
   onModalClose: e,
   isLoading: n = !1,
   src: r,
   isHls: o = !1
-}) => /* @__PURE__ */ T.jsx(W5, { open: t, handleClose: e, children: /* @__PURE__ */ T.jsx(
+}) => /* @__PURE__ */ T.jsx(z5, { open: t, handleClose: e, children: /* @__PURE__ */ T.jsx(
   qv,
   {
     src: r,
@@ -58381,7 +58390,7 @@ const $5 = {
     isHls: o,
     isModalOpen: t
   }
-) }), y3 = ({
+) }), v3 = ({
   onGenerate: t,
   isLoading: e,
   src: n,
@@ -58395,10 +58404,11 @@ const $5 = {
     lt,
     {
       width: "100%",
-      height: "auto",
+      height: o && !e ? "auto" : "265px",
       justifyContent: "center",
       alignItems: "center",
-      sx: { display: "flex", backgroundColor: un },
+      mt: "10px",
+      sx: U5,
       children: o ? /* @__PURE__ */ T.jsxs(T.Fragment, { children: [
         /* @__PURE__ */ T.jsx(
           qv,
@@ -58410,7 +58420,7 @@ const $5 = {
           }
         ),
         /* @__PURE__ */ T.jsx(
-          z5,
+          G5,
           {
             onModalClose: l,
             src: n,
@@ -58423,7 +58433,7 @@ const $5 = {
     }
   );
 };
-function v3({ label: t, imageSrc: e }) {
+function x3({ label: t, imageSrc: e }) {
   return /* @__PURE__ */ T.jsxs(
     ct,
     {
@@ -58444,50 +58454,50 @@ function v3({ label: t, imageSrc: e }) {
     }
   );
 }
-const G5 = {
+const Y5 = {
   border: `1px solid ${un}`,
   opacity: "40%"
-}, x3 = () => /* @__PURE__ */ T.jsx(ct, { sx: G5 }), Y5 = {
+}, T3 = () => /* @__PURE__ */ T.jsx(ct, { sx: Y5 }), K5 = {
   width: "36px",
   height: "36px",
   borderRadius: "50%",
   overflow: "hidden"
-}, K5 = {
+}, q5 = {
   fontWeight: "400",
   fontSize: "20px",
   lineHeight: "20px",
   color: un
-}, T3 = ({ logo: t, title: e }) => /* @__PURE__ */ T.jsxs(lt, { container: !0, gap: "8px", alignItems: "center", children: [
-  /* @__PURE__ */ T.jsx(ct, { sx: Y5, display: "flex", alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ T.jsx("img", { src: t, alt: e, loading: "lazy" }) }),
-  /* @__PURE__ */ T.jsx(wt, { sx: K5, children: e })
-] }), q5 = (t) => {
+}, S3 = ({ logo: t, title: e }) => /* @__PURE__ */ T.jsxs(lt, { container: !0, gap: "8px", alignItems: "center", children: [
+  /* @__PURE__ */ T.jsx(ct, { sx: K5, display: "flex", alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ T.jsx("img", { src: t, alt: e, loading: "lazy" }) }),
+  /* @__PURE__ */ T.jsx(wt, { sx: q5, children: e })
+] }), X5 = (t) => {
   if (Array.isArray(t))
     return t.join(", ");
   if (typeof t == "object")
     return JSON.stringify(t, null, 2);
-}, X5 = (t) => t == null ? "" : (q5(t), t.toString()), Z5 = {
+}, Z5 = (t) => t == null ? "" : (X5(t), t.toString()), Q5 = {
   borderBottom: "none",
   width: "66%",
   paddingTop: 0,
   paddingBottom: "8px"
-}, Q5 = {
+}, J5 = {
   width: "33%",
   borderBottom: "none",
   paddingTop: 0,
   paddingBottom: "8px"
-}, J5 = (t) => ({
+}, e3 = (t) => ({
   ...t,
   boxShadow: "none"
-}), S3 = ({ columnDefs: t, data: e, sx: n }) => /* @__PURE__ */ T.jsx(Ld, { component: Rr, sx: J5(n), children: /* @__PURE__ */ T.jsx(al, { children: /* @__PURE__ */ T.jsx(Pd, { children: t.map((r, o) => /* @__PURE__ */ T.jsxs(Go, { children: [
-  /* @__PURE__ */ T.jsx(hr, { component: "th", scope: "row", sx: Q5, children: /* @__PURE__ */ T.jsx(wt, { fontWeight: "500", children: r.headerName }) }),
-  /* @__PURE__ */ T.jsx(hr, { sx: Z5, children: r.renderCell ? r.renderCell(e[r.field]) : X5(e[r.field]) })
-] }, o)) }) }) }), e3 = {
+}), E3 = ({ columnDefs: t, data: e, sx: n }) => /* @__PURE__ */ T.jsx(Ld, { component: Rr, sx: e3(n), children: /* @__PURE__ */ T.jsx(al, { children: /* @__PURE__ */ T.jsx(Pd, { children: t.map((r, o) => /* @__PURE__ */ T.jsxs(Go, { children: [
+  /* @__PURE__ */ T.jsx(hr, { component: "th", scope: "row", sx: J5, children: /* @__PURE__ */ T.jsx(wt, { fontWeight: "500", children: r.headerName }) }),
+  /* @__PURE__ */ T.jsx(hr, { sx: Q5, children: r.renderCell ? r.renderCell(e[r.field]) : Z5(e[r.field]) })
+] }, o)) }) }) }), t3 = {
   width: "36px",
   height: "36px",
   borderRadius: "50%",
   overflow: "hidden",
   cursor: "pointer"
-}, E3 = ({ imageSrc: t, alt: e }) => /* @__PURE__ */ T.jsx(ct, { sx: e3, children: /* @__PURE__ */ T.jsx("img", { src: t, alt: e }) }), t3 = {
+}, C3 = ({ imageSrc: t, alt: e }) => /* @__PURE__ */ T.jsx(ct, { sx: t3, children: /* @__PURE__ */ T.jsx("img", { src: t, alt: e }) }), n3 = {
   "& .MuiSwitch-switchBase.Mui-checked": {
     color: un
   },
@@ -58501,7 +58511,7 @@ const G5 = {
   lineHeight: "16px",
   letterSpacing: "0.15px",
   color: Vl
-}, C3 = ({
+}, R3 = ({
   checked: t,
   onChange: e,
   leftLabel: n,
@@ -58513,13 +58523,13 @@ const G5 = {
     Ei,
     {
       sx: { margin: 0 },
-      control: /* @__PURE__ */ T.jsx(p0, { checked: t, onChange: e, sx: t3 }),
+      control: /* @__PURE__ */ T.jsx(p0, { checked: t, onChange: e, sx: n3 }),
       label: ""
     }
   ),
   o && /* @__PURE__ */ T.jsx(bo, { sx: eg, children: o })
 ] });
-function R3({ images: t }) {
+function w3({ images: t }) {
   const [e, n] = ft(0), r = () => {
     n((i) => (i + 1) % t.length);
   }, o = () => {
@@ -58597,7 +58607,7 @@ function R3({ images: t }) {
     )
   ] });
 }
-const w3 = ({
+const I3 = ({
   label: t,
   options: e,
   value: n,
@@ -58605,7 +58615,7 @@ const w3 = ({
 }) => /* @__PURE__ */ T.jsxs(Os, { fullWidth: !0, size: "small", children: [
   /* @__PURE__ */ T.jsx(bo, { sx: $y, children: t }),
   /* @__PURE__ */ T.jsx(Ro, { sx: Ny, label: t, onChange: r, value: n, children: e.map((o) => /* @__PURE__ */ T.jsx(Co, { value: o.value, children: o.label }, o.value)) })
-] }), n3 = (t) => t.replace(/_/g, " ").replace(/\b\w/g, (e) => e.toUpperCase()), I3 = (t) => t.join(", "), tg = (t, e, n) => St().startOf(t).set(e, n), r3 = (t, e, n) => St().endOf(t).set(e, n), o3 = (t) => St().subtract(1, "day").startOf("day").set("hour", t), ng = (t, e) => St().subtract(t, e), s3 = () => {
+] }), r3 = (t) => t.replace(/_/g, " ").replace(/\b\w/g, (e) => e.toUpperCase()), D3 = (t) => t.join(", "), tg = (t, e, n) => St().startOf(t).set(e, n), o3 = (t, e, n) => St().endOf(t).set(e, n), s3 = (t) => St().subtract(1, "day").startOf("day").set("hour", t), ng = (t, e) => St().subtract(t, e), i3 = () => {
   const e = new Intl.DateTimeFormat(void 0, {
     year: "numeric",
     month: "2-digit",
@@ -58633,27 +58643,27 @@ const w3 = ({
     }
   }).join("");
   return n ? r.replace("hh", "hh") : r.replace("hh", "HH");
-}, D3 = (t) => {
-  const e = s3();
-  return St(t).format(e);
 }, A3 = (t) => {
+  const e = i3();
+  return St(t).format(e);
+}, O3 = (t) => {
   const r = Math.floor(t / 6e4);
   t %= 6e4;
   const o = Math.floor(t / 1e3);
   let i = "";
   return r > 0 ? (i += `${r} min`, o > 0 && (i += ` ${o} sec`), i) : o > 0 ? (i += `${o} sec`, i) : "0 sec";
-}, O3 = [
+}, k3 = [
   "Camera 1 (all items)",
   "Camera 5 (all items)",
   "Camera 2 (10 items)",
   "Camera 3 (Zone 1)",
   "Camera 4 (24 items)"
-], k3 = [
+], P3 = [
   { key: "classifier", label: "Classifier" },
   { key: "value", label: "Value" },
   { key: "count", label: "Count" },
   { key: "score", label: "Score" }
-], P3 = [
+], L3 = [
   {
     label: "Summary",
     value: "0",
@@ -58664,14 +58674,14 @@ const w3 = ({
     value: "1",
     disabled: !0
   }
-], L3 = [
+], M3 = [
   { classifier: "Color", value: "Black", count: 50, score: "80%" },
   { classifier: "Color", value: "Yellow", count: 60, score: "70%" },
   { classifier: "Manufacture", value: "Volvo", count: 50, score: "80%" },
   { classifier: "Color", value: "Red", count: 50, score: "40%" },
   { classifier: "Color", value: "Green", count: 75, score: "70%" },
   { classifier: "Manufacture", value: "Man", count: 3, score: "80%" }
-], M3 = (t) => [
+], _3 = (t) => [
   {
     value: "0",
     content: /* @__PURE__ */ T.jsx(aB, { ...t })
@@ -58680,7 +58690,7 @@ const w3 = ({
     value: "1",
     content: "More"
   }
-], _3 = {
+], N3 = {
   data: [
     {
       id: "1",
@@ -58738,15 +58748,15 @@ const w3 = ({
       value: "kit"
     }
   ]
-}, N3 = [
+}, $3 = [
   { key: "id", label: "ID" },
   { key: "name", label: "Name" },
   { key: "age", label: "Age" }
-], $3 = [
+], F3 = [
   { id: 1, name: "John Doe", age: 30 },
   { id: 2, name: "Jane Smith", age: 25 },
   { id: 3, name: "Bob Johnson", age: 40 }
-], F3 = {
+], B3 = {
   feed: 139,
   conbo_key: "28145-139-021-64216",
   event_id: "CNB-7987",
@@ -58756,12 +58766,12 @@ const w3 = ({
   end: "2024-05-15T21:05:27.745000Z",
   cargo: "N/A",
   zones: ["Dock main road ", "Hello dock"]
-}, B3 = [
+}, j3 = [
   { headerName: "Event ID", field: "event_id" },
   {
     headerName: "Move",
     field: "move",
-    renderCell: (t) => n3(t)
+    renderCell: (t) => r3(t)
   },
   {
     headerName: "Start",
@@ -58775,7 +58785,7 @@ const w3 = ({
   },
   { headerName: "Cargo", field: "cargo" },
   { headerName: "Zones", field: "zones" }
-], j3 = [
+], V3 = [
   { id: "1", color: "#f99191", title: "New title" },
   {
     id: "2",
@@ -58783,7 +58793,7 @@ const w3 = ({
     title: "Message should contain more information"
   },
   { id: "3", color: "#7095f4", title: "Hello, World!" }
-], V3 = [
+], U3 = [
   {
     label: "Start of the day",
     getValue: () => tg("day", "hour", 6)
@@ -58794,11 +58804,11 @@ const w3 = ({
   },
   {
     label: "End of day today at 18:00",
-    getValue: () => r3("day", "hour", 18)
+    getValue: () => o3("day", "hour", 18)
   },
   {
     label: "Start of yesterday",
-    getValue: () => o3(6)
+    getValue: () => s3(6)
   },
   {
     label: "One hour ago",
@@ -58808,7 +58818,7 @@ const w3 = ({
     label: "One day ago",
     getValue: () => ng(1, "day")
   }
-], U3 = [
+], H3 = [
   {
     value: 864e5,
     label: "1 day"
@@ -58824,14 +58834,14 @@ export {
   S1 as ACTIVE_TAB,
   Yr as ActionButton,
   RL as ActionSelect,
-  v3 as AppTitleBar,
+  x3 as AppTitleBar,
   ld as BETWEEN_GRAY_BORDER,
   d1 as BG_GRAY_COLOR,
   Vl as BLACK,
   R1 as BORDER_TAB,
   wL as ChipsBar,
-  m3 as ChipsMultiSelect,
-  w3 as CustomSelect,
+  g3 as ChipsMultiSelect,
+  I3 as CustomSelect,
   T1 as DARK_BLUE_BORDER,
   E1 as DEFAULT_TAB,
   Xs as DETAILS_VIEW_BG,
@@ -58841,22 +58851,22 @@ export {
   f1 as DISABLED_CHECKBOX,
   Rp as DISABLED_TEXT,
   b1 as DISABLED_TEXT_ICON,
-  l3 as DatePicker,
-  x3 as Delimiter,
-  p3 as DetailsView,
-  h3 as DetailsViewPanel,
+  c3 as DatePicker,
+  T3 as Delimiter,
+  h3 as DetailsView,
+  m3 as DetailsViewPanel,
   rB as Filter,
-  c3 as FilterBox,
+  u3 as FilterBox,
   v1 as GRAY_BORDER,
   yb as HOVER_BTN_PRIMARY,
   g1 as HOVER_BTN_SECONDARY,
   p1 as HOVER_DARK_BLUE_ICON,
   C1 as HOVER_TAB,
-  d3 as Header,
-  f3 as HomeLink,
-  R3 as ImageBox,
+  f3 as Header,
+  p3 as HomeLink,
+  w3 as ImageBox,
   x1 as LIGHT_GRAY_BORDER,
-  T3 as Logo,
+  S3 as Logo,
   aB as MainTable,
   eB as NotificationBar,
   Ft as PASSIVE_BTN_PRIMARY,
@@ -58864,38 +58874,38 @@ export {
   ul as PLACEMENTS,
   Y2 as SearchInput,
   $t as Svg,
-  P3 as TABS,
+  L3 as TABS,
   fB as Tab,
-  u3 as TabsBar,
-  C3 as Toggle,
-  E3 as UserAvatar,
-  S3 as VerticalTable,
-  y3 as VideoBox,
+  d3 as TabsBar,
+  R3 as Toggle,
+  C3 as UserAvatar,
+  E3 as VerticalTable,
+  v3 as VideoBox,
   un as WHITE,
-  k3 as columnDefs,
-  N3 as columns,
-  O3 as dataMock,
-  L3 as detailsViewDataMock,
-  D3 as formatDateWithLocal,
-  A3 as formatDuration,
-  I3 as formatValueWithComma,
-  r3 as getEndTime,
-  s3 as getLocalDateTimeFormat,
+  P3 as columnDefs,
+  $3 as columns,
+  k3 as dataMock,
+  M3 as detailsViewDataMock,
+  A3 as formatDateWithLocal,
+  O3 as formatDuration,
+  D3 as formatValueWithComma,
+  o3 as getEndTime,
+  i3 as getLocalDateTimeFormat,
   tg as getStartTime,
-  o3 as getStartTimeOfYesterday,
-  M3 as getTabsContent,
+  s3 as getStartTimeOfYesterday,
+  _3 as getTabsContent,
   $y as inputLabelSx,
   _y as loaderSx,
-  $3 as mainTableDataMock,
-  U3 as mockSelectOptions,
-  V3 as mockShortcut,
-  _3 as newFilterMock,
+  F3 as mainTableDataMock,
+  H3 as mockSelectOptions,
+  U3 as mockShortcut,
+  N3 as newFilterMock,
   Ny as selectSx,
-  n3 as snakeCaseToTitleCase,
+  r3 as snakeCaseToTitleCase,
   ng as subtractTime,
   Ly as tabSx,
-  j3 as tabsMock,
+  V3 as tabsMock,
   My as tabsSx,
-  B3 as verticalTableColumnDefs,
-  F3 as verticalTableDataMock
+  j3 as verticalTableColumnDefs,
+  B3 as verticalTableDataMock
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conboai/storybook.components",
-  "version": "0.2.9",
+  "version": "0.2.11",
   "main": "dist/storybook.components.mjs",
   "types": "dist/build/index.d.ts",
   "files": [