@conboai/storybook.components 0.2.7 → 0.2.9

package/dist/components/CustomSelect/CustomSelect.d.ts

@@ -7,6 +7,7 @@ export interface ICustomSelect {
         value: string | number;
         label: string;
     }[];
+    value: string | number;
     onChange: (event: SelectChangeEvent) => void;
 }
 declare const CustomSelect: React.FC<ICustomSelect & SelectProps>;

package/dist/storybook.components.mjs

@@ -39782,7 +39782,7 @@ const R2 = {
 };
 St.extend(DL);
 St.extend(OL);
-const l4 = ({
+const l3 = ({
   label: t = "",
   onChange: e,
   value: n,
@@ -40839,7 +40839,7 @@ const Ly = {
     id: n.key,
     subItemValues: r.subItemValues
   };
-}), c4 = ({
+}), c3 = ({
   title: t,
   filterTitle: e,
   data: n,
@@ -41158,7 +41158,7 @@ const Ly = {
       ]
     }
   ) });
-}, u4 = ({
+}, u3 = ({
   tabs: t,
   activeId: e,
   onDelete: n,
@@ -41205,7 +41205,7 @@ const Ly = {
       ] })
     }
   );
-}, d4 = ({ children: t }) => /* @__PURE__ */ T.jsx(
+}, d3 = ({ children: t }) => /* @__PURE__ */ T.jsx(
   lt,
   {
     justifyContent: "space-between",
@@ -41215,7 +41215,7 @@ const Ly = {
     sx: { backgroundColor: yb, display: "flex" },
     children: t
   }
-), f4 = ({ linkContent: t, link: e }) => /* @__PURE__ */ T.jsx(e0, { href: e, height: "100%", children: t }), pB = ({
+), f3 = ({ 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 })
-] }), p4 = ({ tabsContent: t, tabs: e, onChange: n }) => {
+] }), p3 = ({ 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" })
     ]
   }
-), h4 = ({ title: t }) => /* @__PURE__ */ T.jsxs(
+), h3 = ({ title: t }) => /* @__PURE__ */ T.jsxs(
   lt,
   {
     container: !0,
@@ -41306,7 +41306,7 @@ const Ly = {
     ]
   }
 ), gB = { display: "flex", flexWrap: "wrap", gap: 0.5 };
-function m4({
+function m3({
   options: t,
   label: e,
   value: n,
@@ -58190,7 +58190,9 @@ const $5 = {
   justifyContent: "center",
   alignItems: t ? "center" : "flex-start",
   height: t ? "100vh" : "auto",
-  overflow: t ? "hidden" : "visible"
+  overflow: t ? "hidden" : "visible",
+  paddingLeft: "15px",
+  paddingRight: 0
 }), j5 = (t) => ({
   display: t ? "none" : "block",
   maxWidth: "100%"
@@ -58243,7 +58245,6 @@ const $5 = {
   return /* @__PURE__ */ T.jsx(
     Yb,
     {
-      maxWidth: "md",
       ref: p,
       onMouseMove: x,
       sx: B5(o),
@@ -58285,8 +58286,7 @@ const $5 = {
                   xs: 12,
                   justifyContent: "center",
                   alignItems: "center",
-                  spacing: 2,
-                  paddingTop: "15px",
+                  padding: "0",
                   sx: V5(o),
                   margin: "0",
                   children: [
@@ -58381,7 +58381,7 @@ const $5 = {
     isHls: o,
     isModalOpen: t
   }
-) }), y4 = ({
+) }), y3 = ({
   onGenerate: t,
   isLoading: e,
   src: n,
@@ -58395,7 +58395,7 @@ const $5 = {
     lt,
     {
       width: "100%",
-      height: "264px",
+      height: "auto",
       justifyContent: "center",
       alignItems: "center",
       sx: { display: "flex", backgroundColor: un },
@@ -58423,7 +58423,7 @@ const $5 = {
     }
   );
 };
-function v4({ label: t, imageSrc: e }) {
+function v3({ label: t, imageSrc: e }) {
   return /* @__PURE__ */ T.jsxs(
     ct,
     {
@@ -58447,7 +58447,7 @@ function v4({ label: t, imageSrc: e }) {
 const G5 = {
   border: `1px solid ${un}`,
   opacity: "40%"
-}, x4 = () => /* @__PURE__ */ T.jsx(ct, { sx: G5 }), Y5 = {
+}, x3 = () => /* @__PURE__ */ T.jsx(ct, { sx: G5 }), Y5 = {
   width: "36px",
   height: "36px",
   borderRadius: "50%",
@@ -58457,7 +58457,7 @@ const G5 = {
   fontSize: "20px",
   lineHeight: "20px",
   color: un
-}, T4 = ({ logo: t, title: e }) => /* @__PURE__ */ T.jsxs(lt, { container: !0, gap: "8px", alignItems: "center", children: [
+}, 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) => {
@@ -58478,16 +58478,16 @@ const G5 = {
 }, J5 = (t) => ({
   ...t,
   boxShadow: "none"
-}), S4 = ({ 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: [
+}), 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)) }) }) }), e4 = {
+] }, o)) }) }) }), e3 = {
   width: "36px",
   height: "36px",
   borderRadius: "50%",
   overflow: "hidden",
   cursor: "pointer"
-}, E4 = ({ imageSrc: t, alt: e }) => /* @__PURE__ */ T.jsx(ct, { sx: e4, children: /* @__PURE__ */ T.jsx("img", { src: t, alt: e }) }), t4 = {
+}, E3 = ({ imageSrc: t, alt: e }) => /* @__PURE__ */ T.jsx(ct, { sx: e3, children: /* @__PURE__ */ T.jsx("img", { src: t, alt: e }) }), t3 = {
   "& .MuiSwitch-switchBase.Mui-checked": {
     color: un
   },
@@ -58501,7 +58501,7 @@ const G5 = {
   lineHeight: "16px",
   letterSpacing: "0.15px",
   color: Vl
-}, C4 = ({
+}, C3 = ({
   checked: t,
   onChange: e,
   leftLabel: n,
@@ -58513,13 +58513,13 @@ const G5 = {
     Ei,
     {
       sx: { margin: 0 },
-      control: /* @__PURE__ */ T.jsx(p0, { checked: t, onChange: e, sx: t4 }),
+      control: /* @__PURE__ */ T.jsx(p0, { checked: t, onChange: e, sx: t3 }),
       label: ""
     }
   ),
   o && /* @__PURE__ */ T.jsx(bo, { sx: eg, children: o })
 ] });
-function R4({ images: t }) {
+function R3({ images: t }) {
   const [e, n] = ft(0), r = () => {
     n((i) => (i + 1) % t.length);
   }, o = () => {
@@ -58597,14 +58597,15 @@ function R4({ images: t }) {
     )
   ] });
 }
-const w4 = ({
+const w3 = ({
   label: t,
   options: e,
-  onChange: n
+  value: n,
+  onChange: r
 }) => /* @__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: n, children: e.map((r) => /* @__PURE__ */ T.jsx(Co, { value: r.value, children: r.label }, r.value)) })
-] }), n4 = (t) => t.replace(/_/g, " ").replace(/\b\w/g, (e) => e.toUpperCase()), I4 = (t) => t.join(", "), tg = (t, e, n) => St().startOf(t).set(e, n), r4 = (t, e, n) => St().endOf(t).set(e, n), o4 = (t) => St().subtract(1, "day").startOf("day").set("hour", t), ng = (t, e) => St().subtract(t, e), s4 = () => {
+  /* @__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 = () => {
   const e = new Intl.DateTimeFormat(void 0, {
     year: "numeric",
     month: "2-digit",
@@ -58632,27 +58633,27 @@ const w4 = ({
     }
   }).join("");
   return n ? r.replace("hh", "hh") : r.replace("hh", "HH");
-}, D4 = (t) => {
-  const e = s4();
+}, D3 = (t) => {
+  const e = s3();
   return St(t).format(e);
-}, A4 = (t) => {
+}, A3 = (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";
-}, O4 = [
+}, O3 = [
   "Camera 1 (all items)",
   "Camera 5 (all items)",
   "Camera 2 (10 items)",
   "Camera 3 (Zone 1)",
   "Camera 4 (24 items)"
-], k4 = [
+], k3 = [
   { key: "classifier", label: "Classifier" },
   { key: "value", label: "Value" },
   { key: "count", label: "Count" },
   { key: "score", label: "Score" }
-], P4 = [
+], P3 = [
   {
     label: "Summary",
     value: "0",
@@ -58663,14 +58664,14 @@ const w4 = ({
     value: "1",
     disabled: !0
   }
-], L4 = [
+], L3 = [
   { 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%" }
-], M4 = (t) => [
+], M3 = (t) => [
   {
     value: "0",
     content: /* @__PURE__ */ T.jsx(aB, { ...t })
@@ -58679,7 +58680,7 @@ const w4 = ({
     value: "1",
     content: "More"
   }
-], _4 = {
+], _3 = {
   data: [
     {
       id: "1",
@@ -58737,15 +58738,15 @@ const w4 = ({
       value: "kit"
     }
   ]
-}, N4 = [
+}, N3 = [
   { key: "id", label: "ID" },
   { key: "name", label: "Name" },
   { key: "age", label: "Age" }
-], $4 = [
+], $3 = [
   { id: 1, name: "John Doe", age: 30 },
   { id: 2, name: "Jane Smith", age: 25 },
   { id: 3, name: "Bob Johnson", age: 40 }
-], F4 = {
+], F3 = {
   feed: 139,
   conbo_key: "28145-139-021-64216",
   event_id: "CNB-7987",
@@ -58755,12 +58756,12 @@ const w4 = ({
   end: "2024-05-15T21:05:27.745000Z",
   cargo: "N/A",
   zones: ["Dock main road ", "Hello dock"]
-}, B4 = [
+}, B3 = [
   { headerName: "Event ID", field: "event_id" },
   {
     headerName: "Move",
     field: "move",
-    renderCell: (t) => n4(t)
+    renderCell: (t) => n3(t)
   },
   {
     headerName: "Start",
@@ -58774,7 +58775,7 @@ const w4 = ({
   },
   { headerName: "Cargo", field: "cargo" },
   { headerName: "Zones", field: "zones" }
-], j4 = [
+], j3 = [
   { id: "1", color: "#f99191", title: "New title" },
   {
     id: "2",
@@ -58782,7 +58783,7 @@ const w4 = ({
     title: "Message should contain more information"
   },
   { id: "3", color: "#7095f4", title: "Hello, World!" }
-], V4 = [
+], V3 = [
   {
     label: "Start of the day",
     getValue: () => tg("day", "hour", 6)
@@ -58793,11 +58794,11 @@ const w4 = ({
   },
   {
     label: "End of day today at 18:00",
-    getValue: () => r4("day", "hour", 18)
+    getValue: () => r3("day", "hour", 18)
   },
   {
     label: "Start of yesterday",
-    getValue: () => o4(6)
+    getValue: () => o3(6)
   },
   {
     label: "One hour ago",
@@ -58807,7 +58808,7 @@ const w4 = ({
     label: "One day ago",
     getValue: () => ng(1, "day")
   }
-], U4 = [
+], U3 = [
   {
     value: 864e5,
     label: "1 day"
@@ -58823,14 +58824,14 @@ export {
   S1 as ACTIVE_TAB,
   Yr as ActionButton,
   RL as ActionSelect,
-  v4 as AppTitleBar,
+  v3 as AppTitleBar,
   ld as BETWEEN_GRAY_BORDER,
   d1 as BG_GRAY_COLOR,
   Vl as BLACK,
   R1 as BORDER_TAB,
   wL as ChipsBar,
-  m4 as ChipsMultiSelect,
-  w4 as CustomSelect,
+  m3 as ChipsMultiSelect,
+  w3 as CustomSelect,
   T1 as DARK_BLUE_BORDER,
   E1 as DEFAULT_TAB,
   Xs as DETAILS_VIEW_BG,
@@ -58840,22 +58841,22 @@ export {
   f1 as DISABLED_CHECKBOX,
   Rp as DISABLED_TEXT,
   b1 as DISABLED_TEXT_ICON,
-  l4 as DatePicker,
-  x4 as Delimiter,
-  p4 as DetailsView,
-  h4 as DetailsViewPanel,
+  l3 as DatePicker,
+  x3 as Delimiter,
+  p3 as DetailsView,
+  h3 as DetailsViewPanel,
   rB as Filter,
-  c4 as FilterBox,
+  c3 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,
-  d4 as Header,
-  f4 as HomeLink,
-  R4 as ImageBox,
+  d3 as Header,
+  f3 as HomeLink,
+  R3 as ImageBox,
   x1 as LIGHT_GRAY_BORDER,
-  T4 as Logo,
+  T3 as Logo,
   aB as MainTable,
   eB as NotificationBar,
   Ft as PASSIVE_BTN_PRIMARY,
@@ -58863,38 +58864,38 @@ export {
   ul as PLACEMENTS,
   Y2 as SearchInput,
   $t as Svg,
-  P4 as TABS,
+  P3 as TABS,
   fB as Tab,
-  u4 as TabsBar,
-  C4 as Toggle,
-  E4 as UserAvatar,
-  S4 as VerticalTable,
-  y4 as VideoBox,
+  u3 as TabsBar,
+  C3 as Toggle,
+  E3 as UserAvatar,
+  S3 as VerticalTable,
+  y3 as VideoBox,
   un as WHITE,
-  k4 as columnDefs,
-  N4 as columns,
-  O4 as dataMock,
-  L4 as detailsViewDataMock,
-  D4 as formatDateWithLocal,
-  A4 as formatDuration,
-  I4 as formatValueWithComma,
-  r4 as getEndTime,
-  s4 as getLocalDateTimeFormat,
+  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,
   tg as getStartTime,
-  o4 as getStartTimeOfYesterday,
-  M4 as getTabsContent,
+  o3 as getStartTimeOfYesterday,
+  M3 as getTabsContent,
   $y as inputLabelSx,
   _y as loaderSx,
-  $4 as mainTableDataMock,
-  U4 as mockSelectOptions,
-  V4 as mockShortcut,
-  _4 as newFilterMock,
+  $3 as mainTableDataMock,
+  U3 as mockSelectOptions,
+  V3 as mockShortcut,
+  _3 as newFilterMock,
   Ny as selectSx,
-  n4 as snakeCaseToTitleCase,
+  n3 as snakeCaseToTitleCase,
   ng as subtractTime,
   Ly as tabSx,
-  j4 as tabsMock,
+  j3 as tabsMock,
   My as tabsSx,
-  B4 as verticalTableColumnDefs,
-  F4 as verticalTableDataMock
+  B3 as verticalTableColumnDefs,
+  F3 as verticalTableDataMock
 };

package/package.json

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