@telicent-oss/ds 0.27.7 → 0.28.0

package/dist/ds.js

@@ -19479,12 +19479,12 @@ var beforeRead = "beforeRead";
 var read = "read";
 var afterRead = "afterRead";
 var beforeMain = "beforeMain";
-var main$3 = "main";
+var main$4 = "main";
 var afterMain = "afterMain";
 var beforeWrite = "beforeWrite";
 var write = "write";
 var afterWrite = "afterWrite";
-var modifierPhases = [beforeRead, read, afterRead, beforeMain, main$3, afterMain, beforeWrite, write, afterWrite];
+var modifierPhases = [beforeRead, read, afterRead, beforeMain, main$4, afterMain, beforeWrite, write, afterWrite];
 function getNodeName(element) {
   return element ? (element.nodeName || "").toLowerCase() : null;
 }
@@ -25786,7 +25786,7 @@ const CheckboxRoot = styled(SwitchBase, {
 const defaultCheckedIcon = /* @__PURE__ */ jsxRuntimeExports.jsx(CheckBoxIcon, {});
 const defaultIcon = /* @__PURE__ */ jsxRuntimeExports.jsx(CheckBoxOutlineBlankIcon, {});
 const defaultIndeterminateIcon = /* @__PURE__ */ jsxRuntimeExports.jsx(IndeterminateCheckBoxIcon, {});
-const Checkbox = /* @__PURE__ */ React$2.forwardRef(function Checkbox2(inProps, ref) {
+const Checkbox$1 = /* @__PURE__ */ React$2.forwardRef(function Checkbox(inProps, ref) {
   var _icon$props$fontSize, _indeterminateIcon$pr;
   const props = useDefaultProps({
     props: inProps,
@@ -25828,7 +25828,7 @@ const Checkbox = /* @__PURE__ */ React$2.forwardRef(function Checkbox2(inProps,
     classes
   }));
 });
-process.env.NODE_ENV !== "production" ? Checkbox.propTypes = {
+process.env.NODE_ENV !== "production" ? Checkbox$1.propTypes = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │
   // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
@@ -34866,7 +34866,7 @@ const styledRootConfig = {
 const StyledInput = styled(Input, styledRootConfig)("");
 const StyledOutlinedInput = styled(OutlinedInput, styledRootConfig)("");
 const StyledFilledInput = styled(FilledInput, styledRootConfig)("");
-const Select = /* @__PURE__ */ React$2.forwardRef(function Select2(inProps, ref) {
+const Select$1 = /* @__PURE__ */ React$2.forwardRef(function Select(inProps, ref) {
   const props = useDefaultProps({
     name: "MuiSelect",
     props: inProps
@@ -34962,7 +34962,7 @@ const Select = /* @__PURE__ */ React$2.forwardRef(function Select2(inProps, ref)
     }, other))
   });
 });
-process.env.NODE_ENV !== "production" ? Select.propTypes = {
+process.env.NODE_ENV !== "production" ? Select$1.propTypes = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │
   // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
@@ -35109,7 +35109,7 @@ process.env.NODE_ENV !== "production" ? Select.propTypes = {
    */
   variant: PropTypes.oneOf(["filled", "outlined", "standard"])
 } : void 0;
-Select.muiName = "Select";
+Select$1.muiName = "Select";
 function getSkeletonUtilityClass(slot) {
   return generateUtilityClass("MuiSkeleton", slot);
 }
@@ -38400,7 +38400,7 @@ const TextField$1 = /* @__PURE__ */ React$2.forwardRef(function TextField(inProp
       id: inputLabelId
     }, InputLabelProps, {
       children: label
-    })), select2 ? /* @__PURE__ */ jsxRuntimeExports.jsx(Select, _extends$3({
+    })), select2 ? /* @__PURE__ */ jsxRuntimeExports.jsx(Select$1, _extends$3({
       "aria-describedby": helperTextId,
       id: id2,
       labelId: inputLabelId,
@@ -46384,8 +46384,8 @@ const TeliCheckbox = ({
   label,
   ...checkboxProps
 }) => {
-  if (!label) return /* @__PURE__ */ jsx$1(Checkbox, { ...checkboxProps });
-  return /* @__PURE__ */ jsx$1(FormControlLabel, { control: /* @__PURE__ */ jsx$1(Checkbox, { ...checkboxProps }), label, className: "m-0" });
+  if (!label) return /* @__PURE__ */ jsx$1(Checkbox$1, { ...checkboxProps });
+  return /* @__PURE__ */ jsx$1(FormControlLabel, { control: /* @__PURE__ */ jsx$1(Checkbox$1, { ...checkboxProps }), label, className: "m-0" });
 };
 const TeliSelect = ({
   id: id2,
@@ -46439,7 +46439,7 @@ const TeliSelect = ({
     width: width2
   }, size: "small", disabled: disabled2, error, required, fullWidth, focused, hiddenLabel, children: [
     !hiddenLabel && /* @__PURE__ */ jsx$1(InputLabel, { id: id2, children: label }),
-    /* @__PURE__ */ jsx$1(Select, { ...getLabelProps(), ...getMultiSelectProps(), id: selectId, value: value2, onChange: onChange2, size: "small", defaultOpen, defaultValue, open, onOpen, onClose, inputProps: {
+    /* @__PURE__ */ jsx$1(Select$1, { ...getLabelProps(), ...getMultiSelectProps(), id: selectId, value: value2, onChange: onChange2, size: "small", defaultOpen, defaultValue, open, onOpen, onClose, inputProps: {
       "aria-label": hiddenLabel ? label : void 0,
       readOnly
     }, MenuProps: {
@@ -57924,6 +57924,70 @@ const Button2 = forwardRef((props, ref) => {
   return /* @__PURE__ */ jsx$1(Button$1, { variant: "text", color: color2, ...buttonProps, ref, children: buttonProps.children });
 });
 const TextField2 = (props) => /* @__PURE__ */ jsx$1(TextField$1, { ...props });
+const Select2 = ({
+  label,
+  value: value2,
+  id: id2,
+  options,
+  width: width2,
+  onChange: onChange2,
+  disabled: disabled2 = false,
+  sx,
+  ...rest
+}) => {
+  const theme = useExtendedTheme();
+  return /* @__PURE__ */ jsxs(FormControl, { sx: {
+    minWidth: 88,
+    width: width2
+  }, size: "small", children: [
+    label && /* @__PURE__ */ jsx$1(InputLabel, { id: id2, sx: {
+      color: "#fff",
+      "&.Mui-focused": {
+        color: theme.palette.primary.main
+      }
+    }, children: label }),
+    /* @__PURE__ */ jsx$1(Select$1, { ...rest, labelId: id2, label, id: id2, value: value2, disabled: disabled2, onChange: onChange2, size: "small", MenuProps: {
+      PaperProps: {
+        sx: {
+          backgroundColor: "#2A2A2A",
+          color: "white"
+        }
+      }
+    }, sx: {
+      color: "#ffffff",
+      backgroundColor: theme.palette.mode === "dark" ? "#2A2A2A" : "#ffffff",
+      ".MuiSelect-icon": {
+        color: "#6D6D6D"
+      },
+      ".MuiOutlinedInput-notchedOutline": {
+        borderColor: "#6D6D6D"
+      },
+      "&:hover .MuiOutlinedInput-notchedOutline": {
+        borderColor: theme.palette.primary.main
+      },
+      "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
+        borderColor: theme.palette.primary.main,
+        borderWidth: "2px !important"
+      },
+      "&.Mui-selected": {
+        backgroundColor: "#2A2A2A",
+        color: "#fff"
+      },
+      ...sx
+    }, children: options.map((option) => /* @__PURE__ */ jsx$1(MenuItem, { value: option.value, disableRipple: true, children: option.label }, option == null ? void 0 : option.value)) })
+  ] });
+};
+const Checkbox2 = ({
+  checked,
+  id: id2,
+  name,
+  label,
+  required = false,
+  ...rest
+}) => {
+  useExtendedTheme();
+  return label ? /* @__PURE__ */ jsx$1(FormControlLabel, { required, control: /* @__PURE__ */ jsx$1(Checkbox$1, { checked, id: id2, name, ...rest, color: "primary" }), label }) : /* @__PURE__ */ jsx$1(Checkbox$1, { checked, id: id2, name, ...rest, color: "primary" });
+};
 const StyledPopper = styled$1("div")({
   position: "relative",
   width: 360
@@ -60816,8 +60880,17 @@ const DATA_NAVY = {
   500: "#2F44CA",
   600: "#2636A2"
 };
-const main$2 = "#F56AAA";
+const main$3 = "#F56AAA";
 const DOCUMENT_PINK = {
+  50: alpha$1(main$3, 0.1),
+  100: alpha$1(main$3, 0.2),
+  200: alpha$1(main$3, 0.3),
+  400: alpha$1(main$3, 0.5),
+  500: main$3,
+  600: alpha$1(main$3, 0.7)
+};
+const main$2 = "#F2A64B";
+const GRAPH_ORANGE = {
   50: alpha$1(main$2, 0.1),
   100: alpha$1(main$2, 0.2),
   200: alpha$1(main$2, 0.3),
@@ -60825,8 +60898,8 @@ const DOCUMENT_PINK = {
   500: main$2,
   600: alpha$1(main$2, 0.7)
 };
-const main$1 = "#F2A64B";
-const GRAPH_ORANGE = {
+const main$1 = "#20BCFA";
+const ADMIN_BLUE = {
   50: alpha$1(main$1, 0.1),
   100: alpha$1(main$1, 0.2),
   200: alpha$1(main$1, 0.3),
@@ -60834,8 +60907,8 @@ const GRAPH_ORANGE = {
   500: main$1,
   600: alpha$1(main$1, 0.7)
 };
-const main = "#20BCFA";
-const ADMIN_BLUE = {
+const main = "#000000";
+const BLANK = {
   50: alpha$1(main, 0.1),
   100: alpha$1(main, 0.2),
   200: alpha$1(main, 0.3),
@@ -60874,10 +60947,11 @@ const THEME_COLORS = {
     contrastText: common.black
   },
   Blank: {
-    main: common.white,
-    light: alpha$1(common.white, 0.5),
-    dark: alpha$1(common.white, 0.9),
-    contrastText: common.black
+    ...BLANK,
+    main: BLANK[500],
+    light: BLANK[400],
+    dark: BLANK[600],
+    contrastText: common.white
   }
 };
 const AVATAR_OVERRIDES = {
@@ -60919,7 +60993,7 @@ const generateButtonOverrides = (uiTheme) => ({
         border: `1px solid ${theme.palette.primary.main}`,
         backgroundColor: theme.palette.secondary.main,
         ":hover": {
-          backgroundColor: uiTheme === "Blank" ? "inherit" : `${THEME_COLORS[uiTheme][100]}`
+          backgroundColor: `${THEME_COLORS[uiTheme][100]}`
         }
       }),
       startIcon: {
@@ -60951,7 +61025,7 @@ const generateCardOverrides = (uiTheme) => ({
       style: {
         borderWidth: 1,
         borderStyle: "solid",
-        borderColor: uiTheme === "Blank" ? "inherit" : alpha$1(THEME_COLORS[uiTheme][200], 0.4)
+        borderColor: alpha$1(THEME_COLORS[uiTheme][200], 0.4)
       }
     }],
     styleOverrides: {
@@ -61081,6 +61155,41 @@ const generateComponentOverrides = (uiTheme) => ({
       }
     }
   },
+  MuiMenuItem: {
+    styleOverrides: {
+      root: ({
+        theme
+      }) => ({
+        display: "flex",
+        alignItems: "center",
+        margin: theme.spacing(0, 1),
+        borderRadius: theme.shape.borderRadius,
+        border: "1px solid transparent",
+        "&.Mui-selected": {
+          backgroundColor: theme.palette.mode === "dark" ? theme.palette.background.default : "rgba(0, 0, 0, 0.04)",
+          color: theme.palette.primary.main
+        },
+        "&.Mui-selected.Mui-selected": {
+          backgroundColor: theme.palette.mode === "dark" ? theme.palette.background.default : "rgba(0, 0, 0, 0.04)"
+        },
+        "&.Mui-selected.Mui-selected:hover": {
+          backgroundColor: theme.palette.mode === "dark" ? theme.palette.background.default : "rgba(0, 0, 0, 0.04)"
+        },
+        "&.Mui-selected:hover": {
+          backgroundColor: theme.palette.mode === "dark" ? theme.palette.background.default : "rgba(0, 0, 0, 0.04)",
+          color: theme.palette.primary.main,
+          backgroundImage: "none"
+        },
+        "& .MuiPaper-root": {
+          backgroundColor: theme.palette.mode === "dark" ? "#2A2A2A" : "#ffffff"
+        },
+        "&:hover": {
+          backgroundColor: theme.palette.mode === "dark" ? theme.palette.background.default : "rgba(0, 0, 0, 0.04)",
+          border: `1px solid ${theme.palette.primary.main}`
+        }
+      })
+    }
+  },
   MuiAppBar: {
     styleOverrides: {
       root: {
@@ -80534,10 +80643,7 @@ const AuthModal = ({
     p: 2,
     overflowY: "auto"
   }, children: [
-    /* @__PURE__ */ jsxs(H3, { children: [
-      /* @__PURE__ */ jsx$1("i", { className: "fa-regular fa-circle-exclamation" }),
-      " Your session is no longer active"
-    ] }),
+    /* @__PURE__ */ jsx$1(H3, { children: "Your session is no longer active" }),
     /* @__PURE__ */ jsx$1(Text, { sx: {
       pt: 4
     }, children: "Your session may have expired, you may have signed out, or your account isn't active." }),
@@ -84338,6 +84444,7 @@ export {
   CardActions2 as CardActions,
   CardContent2 as CardContent,
   CardHeader2 as CardHeader,
+  Checkbox2 as Checkbox,
   Chip2 as Chip,
   ClockIcon,
   ClockRotateLeft,
@@ -84397,6 +84504,7 @@ export {
   SearchBox,
   SearchIcon,
   SearchResults,
+  Select2 as Select,
   Skeleton2 as Skeleton,
   TeliAddIcon,
   TeliAppSwitch,

package/dist/ds.umd.cjs

@@ -19497,12 +19497,12 @@ Please use another name.` : formatMuiErrorMessage$1(18));
   var read = "read";
   var afterRead = "afterRead";
   var beforeMain = "beforeMain";
-  var main$3 = "main";
+  var main$4 = "main";
   var afterMain = "afterMain";
   var beforeWrite = "beforeWrite";
   var write = "write";
   var afterWrite = "afterWrite";
-  var modifierPhases = [beforeRead, read, afterRead, beforeMain, main$3, afterMain, beforeWrite, write, afterWrite];
+  var modifierPhases = [beforeRead, read, afterRead, beforeMain, main$4, afterMain, beforeWrite, write, afterWrite];
   function getNodeName(element) {
     return element ? (element.nodeName || "").toLowerCase() : null;
   }
@@ -25804,7 +25804,7 @@ Please use another name.` : formatMuiErrorMessage$1(18));
   const defaultCheckedIcon = /* @__PURE__ */ jsxRuntimeExports.jsx(CheckBoxIcon, {});
   const defaultIcon = /* @__PURE__ */ jsxRuntimeExports.jsx(CheckBoxOutlineBlankIcon, {});
   const defaultIndeterminateIcon = /* @__PURE__ */ jsxRuntimeExports.jsx(IndeterminateCheckBoxIcon, {});
-  const Checkbox = /* @__PURE__ */ React__namespace.forwardRef(function Checkbox2(inProps, ref) {
+  const Checkbox$1 = /* @__PURE__ */ React__namespace.forwardRef(function Checkbox2(inProps, ref) {
     var _icon$props$fontSize, _indeterminateIcon$pr;
     const props = useDefaultProps({
       props: inProps,
@@ -25846,7 +25846,7 @@ Please use another name.` : formatMuiErrorMessage$1(18));
       classes
     }));
   });
-  process.env.NODE_ENV !== "production" ? Checkbox.propTypes = {
+  process.env.NODE_ENV !== "production" ? Checkbox$1.propTypes = {
     // ┌────────────────────────────── Warning ──────────────────────────────┐
     // │ These PropTypes are generated from the TypeScript type definitions. │
     // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
@@ -34884,7 +34884,7 @@ Please use another name.` : formatMuiErrorMessage$1(18));
   const StyledInput = styled(Input, styledRootConfig)("");
   const StyledOutlinedInput = styled(OutlinedInput, styledRootConfig)("");
   const StyledFilledInput = styled(FilledInput, styledRootConfig)("");
-  const Select = /* @__PURE__ */ React__namespace.forwardRef(function Select2(inProps, ref) {
+  const Select$1 = /* @__PURE__ */ React__namespace.forwardRef(function Select2(inProps, ref) {
     const props = useDefaultProps({
       name: "MuiSelect",
       props: inProps
@@ -34980,7 +34980,7 @@ Please use another name.` : formatMuiErrorMessage$1(18));
       }, other))
     });
   });
-  process.env.NODE_ENV !== "production" ? Select.propTypes = {
+  process.env.NODE_ENV !== "production" ? Select$1.propTypes = {
     // ┌────────────────────────────── Warning ──────────────────────────────┐
     // │ These PropTypes are generated from the TypeScript type definitions. │
     // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
@@ -35127,7 +35127,7 @@ Please use another name.` : formatMuiErrorMessage$1(18));
      */
     variant: PropTypes.oneOf(["filled", "outlined", "standard"])
   } : void 0;
-  Select.muiName = "Select";
+  Select$1.muiName = "Select";
   function getSkeletonUtilityClass(slot) {
     return generateUtilityClass("MuiSkeleton", slot);
   }
@@ -38418,7 +38418,7 @@ Please use another name.` : formatMuiErrorMessage$1(18));
         id: inputLabelId
       }, InputLabelProps, {
         children: label
-      })), select2 ? /* @__PURE__ */ jsxRuntimeExports.jsx(Select, _extends$3({
+      })), select2 ? /* @__PURE__ */ jsxRuntimeExports.jsx(Select$1, _extends$3({
         "aria-describedby": helperTextId,
         id: id2,
         labelId: inputLabelId,
@@ -46402,8 +46402,8 @@ Please use another name.` : formatMuiErrorMessage$1(18));
     label,
     ...checkboxProps
   }) => {
-    if (!label) return /* @__PURE__ */ jsx$1(Checkbox, { ...checkboxProps });
-    return /* @__PURE__ */ jsx$1(FormControlLabel, { control: /* @__PURE__ */ jsx$1(Checkbox, { ...checkboxProps }), label, className: "m-0" });
+    if (!label) return /* @__PURE__ */ jsx$1(Checkbox$1, { ...checkboxProps });
+    return /* @__PURE__ */ jsx$1(FormControlLabel, { control: /* @__PURE__ */ jsx$1(Checkbox$1, { ...checkboxProps }), label, className: "m-0" });
   };
   const TeliSelect = ({
     id: id2,
@@ -46457,7 +46457,7 @@ Please use another name.` : formatMuiErrorMessage$1(18));
       width: width2
     }, size: "small", disabled: disabled2, error, required, fullWidth, focused, hiddenLabel, children: [
       !hiddenLabel && /* @__PURE__ */ jsx$1(InputLabel, { id: id2, children: label }),
-      /* @__PURE__ */ jsx$1(Select, { ...getLabelProps(), ...getMultiSelectProps(), id: selectId, value: value2, onChange: onChange2, size: "small", defaultOpen, defaultValue, open, onOpen, onClose, inputProps: {
+      /* @__PURE__ */ jsx$1(Select$1, { ...getLabelProps(), ...getMultiSelectProps(), id: selectId, value: value2, onChange: onChange2, size: "small", defaultOpen, defaultValue, open, onOpen, onClose, inputProps: {
         "aria-label": hiddenLabel ? label : void 0,
         readOnly
       }, MenuProps: {
@@ -57942,6 +57942,70 @@ Please use another name.` : formatMuiErrorMessage$1(18));
     return /* @__PURE__ */ jsx$1(Button$1, { variant: "text", color: color2, ...buttonProps, ref, children: buttonProps.children });
   });
   const TextField = (props) => /* @__PURE__ */ jsx$1(TextField$1, { ...props });
+  const Select = ({
+    label,
+    value: value2,
+    id: id2,
+    options,
+    width: width2,
+    onChange: onChange2,
+    disabled: disabled2 = false,
+    sx,
+    ...rest
+  }) => {
+    const theme = useExtendedTheme();
+    return /* @__PURE__ */ jsxs(FormControl, { sx: {
+      minWidth: 88,
+      width: width2
+    }, size: "small", children: [
+      label && /* @__PURE__ */ jsx$1(InputLabel, { id: id2, sx: {
+        color: "#fff",
+        "&.Mui-focused": {
+          color: theme.palette.primary.main
+        }
+      }, children: label }),
+      /* @__PURE__ */ jsx$1(Select$1, { ...rest, labelId: id2, label, id: id2, value: value2, disabled: disabled2, onChange: onChange2, size: "small", MenuProps: {
+        PaperProps: {
+          sx: {
+            backgroundColor: "#2A2A2A",
+            color: "white"
+          }
+        }
+      }, sx: {
+        color: "#ffffff",
+        backgroundColor: theme.palette.mode === "dark" ? "#2A2A2A" : "#ffffff",
+        ".MuiSelect-icon": {
+          color: "#6D6D6D"
+        },
+        ".MuiOutlinedInput-notchedOutline": {
+          borderColor: "#6D6D6D"
+        },
+        "&:hover .MuiOutlinedInput-notchedOutline": {
+          borderColor: theme.palette.primary.main
+        },
+        "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
+          borderColor: theme.palette.primary.main,
+          borderWidth: "2px !important"
+        },
+        "&.Mui-selected": {
+          backgroundColor: "#2A2A2A",
+          color: "#fff"
+        },
+        ...sx
+      }, children: options.map((option) => /* @__PURE__ */ jsx$1(MenuItem, { value: option.value, disableRipple: true, children: option.label }, option == null ? void 0 : option.value)) })
+    ] });
+  };
+  const Checkbox = ({
+    checked,
+    id: id2,
+    name,
+    label,
+    required = false,
+    ...rest
+  }) => {
+    useExtendedTheme();
+    return label ? /* @__PURE__ */ jsx$1(FormControlLabel, { required, control: /* @__PURE__ */ jsx$1(Checkbox$1, { checked, id: id2, name, ...rest, color: "primary" }), label }) : /* @__PURE__ */ jsx$1(Checkbox$1, { checked, id: id2, name, ...rest, color: "primary" });
+  };
   const StyledPopper = styled$1("div")({
     position: "relative",
     width: 360
@@ -60834,8 +60898,17 @@ Please use another name.` : formatMuiErrorMessage$1(18));
     500: "#2F44CA",
     600: "#2636A2"
   };
-  const main$2 = "#F56AAA";
+  const main$3 = "#F56AAA";
   const DOCUMENT_PINK = {
+    50: alpha$1(main$3, 0.1),
+    100: alpha$1(main$3, 0.2),
+    200: alpha$1(main$3, 0.3),
+    400: alpha$1(main$3, 0.5),
+    500: main$3,
+    600: alpha$1(main$3, 0.7)
+  };
+  const main$2 = "#F2A64B";
+  const GRAPH_ORANGE = {
     50: alpha$1(main$2, 0.1),
     100: alpha$1(main$2, 0.2),
     200: alpha$1(main$2, 0.3),
@@ -60843,8 +60916,8 @@ Please use another name.` : formatMuiErrorMessage$1(18));
     500: main$2,
     600: alpha$1(main$2, 0.7)
   };
-  const main$1 = "#F2A64B";
-  const GRAPH_ORANGE = {
+  const main$1 = "#20BCFA";
+  const ADMIN_BLUE = {
     50: alpha$1(main$1, 0.1),
     100: alpha$1(main$1, 0.2),
     200: alpha$1(main$1, 0.3),
@@ -60852,8 +60925,8 @@ Please use another name.` : formatMuiErrorMessage$1(18));
     500: main$1,
     600: alpha$1(main$1, 0.7)
   };
-  const main = "#20BCFA";
-  const ADMIN_BLUE = {
+  const main = "#000000";
+  const BLANK = {
     50: alpha$1(main, 0.1),
     100: alpha$1(main, 0.2),
     200: alpha$1(main, 0.3),
@@ -60892,10 +60965,11 @@ Please use another name.` : formatMuiErrorMessage$1(18));
       contrastText: common.black
     },
     Blank: {
-      main: common.white,
-      light: alpha$1(common.white, 0.5),
-      dark: alpha$1(common.white, 0.9),
-      contrastText: common.black
+      ...BLANK,
+      main: BLANK[500],
+      light: BLANK[400],
+      dark: BLANK[600],
+      contrastText: common.white
     }
   };
   const AVATAR_OVERRIDES = {
@@ -60937,7 +61011,7 @@ Please use another name.` : formatMuiErrorMessage$1(18));
           border: `1px solid ${theme.palette.primary.main}`,
           backgroundColor: theme.palette.secondary.main,
           ":hover": {
-            backgroundColor: uiTheme === "Blank" ? "inherit" : `${THEME_COLORS[uiTheme][100]}`
+            backgroundColor: `${THEME_COLORS[uiTheme][100]}`
           }
         }),
         startIcon: {
@@ -60969,7 +61043,7 @@ Please use another name.` : formatMuiErrorMessage$1(18));
         style: {
           borderWidth: 1,
           borderStyle: "solid",
-          borderColor: uiTheme === "Blank" ? "inherit" : alpha$1(THEME_COLORS[uiTheme][200], 0.4)
+          borderColor: alpha$1(THEME_COLORS[uiTheme][200], 0.4)
         }
       }],
       styleOverrides: {
@@ -61099,6 +61173,41 @@ Please use another name.` : formatMuiErrorMessage$1(18));
         }
       }
     },
+    MuiMenuItem: {
+      styleOverrides: {
+        root: ({
+          theme
+        }) => ({
+          display: "flex",
+          alignItems: "center",
+          margin: theme.spacing(0, 1),
+          borderRadius: theme.shape.borderRadius,
+          border: "1px solid transparent",
+          "&.Mui-selected": {
+            backgroundColor: theme.palette.mode === "dark" ? theme.palette.background.default : "rgba(0, 0, 0, 0.04)",
+            color: theme.palette.primary.main
+          },
+          "&.Mui-selected.Mui-selected": {
+            backgroundColor: theme.palette.mode === "dark" ? theme.palette.background.default : "rgba(0, 0, 0, 0.04)"
+          },
+          "&.Mui-selected.Mui-selected:hover": {
+            backgroundColor: theme.palette.mode === "dark" ? theme.palette.background.default : "rgba(0, 0, 0, 0.04)"
+          },
+          "&.Mui-selected:hover": {
+            backgroundColor: theme.palette.mode === "dark" ? theme.palette.background.default : "rgba(0, 0, 0, 0.04)",
+            color: theme.palette.primary.main,
+            backgroundImage: "none"
+          },
+          "& .MuiPaper-root": {
+            backgroundColor: theme.palette.mode === "dark" ? "#2A2A2A" : "#ffffff"
+          },
+          "&:hover": {
+            backgroundColor: theme.palette.mode === "dark" ? theme.palette.background.default : "rgba(0, 0, 0, 0.04)",
+            border: `1px solid ${theme.palette.primary.main}`
+          }
+        })
+      }
+    },
     MuiAppBar: {
       styleOverrides: {
         root: {
@@ -80552,10 +80661,7 @@ uniform ${i3} ${s4} u_${a3};
       p: 2,
       overflowY: "auto"
     }, children: [
-      /* @__PURE__ */ jsxs(H3, { children: [
-        /* @__PURE__ */ jsx$1("i", { className: "fa-regular fa-circle-exclamation" }),
-        " Your session is no longer active"
-      ] }),
+      /* @__PURE__ */ jsx$1(H3, { children: "Your session is no longer active" }),
       /* @__PURE__ */ jsx$1(Text, { sx: {
         pt: 4
       }, children: "Your session may have expired, you may have signed out, or your account isn't active." }),
@@ -84360,6 +84466,7 @@ uniform ${i3} ${s4} u_${a3};
   exports2.CardActions = CardActions;
   exports2.CardContent = CardContent;
   exports2.CardHeader = CardHeader;
+  exports2.Checkbox = Checkbox;
   exports2.Chip = Chip;
   exports2.ClockIcon = ClockIcon;
   exports2.ClockRotateLeft = ClockRotateLeft;
@@ -84419,6 +84526,7 @@ uniform ${i3} ${s4} u_${a3};
   exports2.SearchBox = SearchBox;
   exports2.SearchIcon = SearchIcon;
   exports2.SearchResults = SearchResults;
+  exports2.Select = Select;
   exports2.Skeleton = Skeleton;
   exports2.TeliAddIcon = TeliAddIcon;
   exports2.TeliAppSwitch = TeliAppSwitch;

package/dist/logout-syncer/sw.js

@@ -1,5 +1,5 @@
 /// <reference lib="webworker" />
-console.info("sw.js version: 0.27.7");
+console.info("sw.js version: 0.28.0");
 self.addEventListener("install", () => self.skipWaiting());
 self.addEventListener("activate", (event) =>
   event.waitUntil(self.clients.claim())

package/dist/src/v1/components/inputs/Checkbox/Checkbox.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+import { CheckboxProps } from '@mui/material';
+
+interface CustomCheckboxProps extends CheckboxProps {
+    label?: string;
+    required?: boolean;
+}
+declare const Checkbox: React.FC<CustomCheckboxProps>;
+export default Checkbox;

package/dist/src/v1/components/inputs/Checkbox/Checkbox.stories.d.ts

@@ -0,0 +1,12 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { default as Checkbox } from './Checkbox';
+
+declare const meta: Meta<typeof Checkbox>;
+export default meta;
+type Story = StoryObj<typeof Checkbox>;
+export declare const Default: Story;
+export declare const Disabled: Story;
+export declare const WithCustomLabel: Story;
+export declare const WithRequired: Story;
+export declare const WithNoLabel: Story;
+export declare const ExampleWithOnChange: Story;

package/dist/src/v1/components/inputs/Select/Select.d.ts

@@ -0,0 +1,13 @@
+import { SelectProps as MuiSelectProps } from '@mui/material';
+import { default as React } from 'react';
+
+export interface Options {
+    value: string;
+    label: string;
+}
+export type SelectProps = MuiSelectProps & {
+    options: Options[];
+    width?: number;
+};
+declare const Select: React.FC<SelectProps>;
+export default Select;

package/dist/src/v1/components/inputs/Select/Select.stories.d.ts

@@ -0,0 +1,17 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { default as Select } from './Select';
+
+declare const meta: Meta<typeof Select>;
+export default meta;
+type Story = StoryObj<typeof Select>;
+export declare const Default: Story;
+export declare const Disabled: Story;
+export declare const WithCustomWidth: Story;
+export declare const WithNoLabel: Story;
+/**
+ * This exemple is set up using useState to simulate how it would
+ * work on the app, how the selected item is styled
+ *
+ * Refer back to the top of the document on how to implement
+ */
+export declare const ExampleWithOnChange: Story;

package/dist/src/v1/components/inputs/index.d.ts

@@ -2,4 +2,8 @@ export { default as Button } from './Button/Button';
 export type { ButtonProps } from './Button/Button';
 export { default as IconButton } from './Button/IconButton';
 export { default as TextField } from './TextField';
+export { default as Select } from './Select/Select';
+export type { SelectProps } from './Select/Select';
+export type { Options } from './Select/Select';
+export { default as Checkbox } from './Checkbox/Checkbox';
 export * from './SearchBox';

package/dist/src/v1/theme/colors/blank.d.ts

@@ -0,0 +1,9 @@
+declare const BLANK: {
+    50: string;
+    100: string;
+    200: string;
+    400: string;
+    500: string;
+    600: string;
+};
+export default BLANK;

package/dist/src/v1/theme/style-overrides/components.d.ts

@@ -8,6 +8,51 @@ declare const generateComponentOverrides: (uiTheme: UITheme) => {
             };
         };
     };
+    MuiMenuItem: {
+        styleOverrides: {
+            root: ({ theme }: import('@mui/material').MenuItemOwnProps & Omit<import('@mui/material').ButtonBaseOwnProps, "classes"> & import('@mui/material/OverridableComponent').CommonProps & Omit<Omit<import('react').DetailedHTMLProps<import('react').LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & {
+                ref?: ((instance: HTMLLIElement | null) => void | import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import('react').RefObject<HTMLLIElement> | null | undefined;
+            }, "children" | "autoFocus" | "className" | "style" | "tabIndex" | "classes" | "sx" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "dense" | "disableGutters" | "divider" | "selected"> & {
+                component?: import('react').ElementType;
+            } & Record<string, unknown> & {
+                ownerState: import('@mui/material').MenuItemOwnProps & Omit<import('@mui/material').ButtonBaseOwnProps, "classes"> & import('@mui/material/OverridableComponent').CommonProps & Omit<Omit<import('react').DetailedHTMLProps<import('react').LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & {
+                    ref?: ((instance: HTMLLIElement | null) => void | import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import('react').RefObject<HTMLLIElement> | null | undefined;
+                }, "children" | "autoFocus" | "className" | "style" | "tabIndex" | "classes" | "sx" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "dense" | "disableGutters" | "divider" | "selected"> & {
+                    component?: import('react').ElementType;
+                } & Record<string, unknown>;
+            } & {
+                theme: Omit<import('@mui/material').Theme, "components">;
+            }) => {
+                display: "flex";
+                alignItems: "center";
+                margin: string;
+                borderRadius: number;
+                border: string;
+                "&.Mui-selected": {
+                    backgroundColor: string;
+                    color: string;
+                };
+                "&.Mui-selected.Mui-selected": {
+                    backgroundColor: string;
+                };
+                "&.Mui-selected.Mui-selected:hover": {
+                    backgroundColor: string;
+                };
+                "&.Mui-selected:hover": {
+                    backgroundColor: string;
+                    color: string;
+                    backgroundImage: string;
+                };
+                "& .MuiPaper-root": {
+                    backgroundColor: string;
+                };
+                "&:hover": {
+                    backgroundColor: string;
+                    border: string;
+                };
+            };
+        };
+    };
     MuiAppBar: {
         styleOverrides: {
             root: {
@@ -857,18 +902,6 @@ declare const generateComponentOverrides: (uiTheme: UITheme) => {
             }>;
         }[] | undefined;
     } | undefined;
-    MuiMenuItem?: {
-        defaultProps?: import('@mui/material').ComponentsProps["MuiMenuItem"];
-        styleOverrides?: Partial<import('@mui/material/styles/overrides').OverridesStyleRules<keyof import('@mui/material').MenuItemClasses, "MuiMenuItem", Omit<import('@mui/material').Theme, "components">>> | undefined;
-        variants?: {
-            props: Partial<import('@mui/material').MenuItemProps> | ((props: Partial<import('@mui/material').MenuItemProps> & {
-                ownerState: Partial<import('@mui/material').MenuItemProps>;
-            }) => boolean);
-            style: import('@mui/styled-engine').Interpolation<{
-                theme: Omit<import('@mui/material').Theme, "components">;
-            }>;
-        }[] | undefined;
-    } | undefined;
     MuiMenuList?: {
         defaultProps?: import('@mui/material').ComponentsProps["MuiMenuList"];
         styleOverrides?: Partial<import('@mui/material/styles/overrides').OverridesStyleRules<keyof import('@mui/material').ListClasses, "MuiMenuList", Omit<import('@mui/material').Theme, "components">>> | undefined;

package/package.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/telicent-oss/telicent-ds.git"
   },
   "type": "module",
-  "version": "0.27.7",
+  "version": "0.28.0",
   "private": false,
   "dependencies": {
     "@emotion/react": "^11.10.6",