@blerp/design 1.4.3 → 1.4.5

package/dist/cjs/Theme.js

@@ -99,19 +99,6 @@ const mainTheme = {
 };
 const fonts = "@font-face {\n  font-family: \"Odudo\";\n  font-weight: normal;\n  font-display: swap;\n  src: url(\"https://cdn.blerp.com/blerp-web-images/fonts/web/Odudo-Regular.eot\");\n  src: url(\"https://cdn.blerp.com/blerp-web-images/fonts/web/Odudo-Regular.woff2\")\n      format(\"woff2\"),\n    url(\"https://cdn.blerp.com/blerp-web-images/fonts/web/Odudo-Regular.woff\")\n      format(\"woff\");\n}\n\n@font-face {\n  font-family: \"Odudo\";\n  font-weight: lighter;\n  font-display: swap;\n  src: url(\"https://cdn.blerp.com/blerp-web-images/fonts/web/Odudo-Light.eot\");\n  src: url(\"https://cdn.blerp.com/blerp-web-images/fonts/web/Odudo-Light.woff2\")\n      format(\"woff2\"),\n    url(\"https://cdn.blerp.com/blerp-web-images/fonts/web/Odudo-Light.woff\")\n      format(\"woff\");\n}\n\n@font-face {\n  font-family: \"Odudo\";\n  font-weight: 300;\n  font-display: swap;\n  src: url(\"https://cdn.blerp.com/blerp-web-images/fonts/web/Odudo-Light.eot\");\n  src: url(\"https://cdn.blerp.com/blerp-web-images/fonts/web/Odudo-Light.woff2\")\n      format(\"woff2\"),\n    url(\"https://cdn.blerp.com/blerp-web-images/fonts/web/Odudo-Light.woff\")\n      format(\"woff\");\n}\n\n@font-face {\n  font-family: \"Odudo\";\n  font-weight: 400;\n  font-display: swap;\n  src: url(\"https://cdn.blerp.com/blerp-web-images/fonts/web/Odudo-Regular.eot\");\n  src: url(\"https://cdn.blerp.com/blerp-web-images/fonts/web/Odudo-Regular.woff2\")\n      format(\"woff2\"),\n    url(\"https://cdn.blerp.com/blerp-web-images/fonts/web/Odudo-Regular.woff\")\n      format(\"woff\");\n}\n\n@font-face {\n  font-family: \"Odudo\";\n  font-weight: bolder;\n  font-display: swap;\n  src: url(\"https://cdn.blerp.com/blerp-web-images/fonts/Odudo%20V1.3/WEB/odudo-semibold-webfont.eot\");\n  src: url(\"https://cdn.blerp.com/blerp-web-images/fonts/Odudo%20V1.3/WEB/odudo-semibold-webfont.woff2\")\n      format(\"woff2\"),\n    url(\"https://cdn.blerp.com/blerp-web-images/fonts/Odudo%20V1.3/WEB/odudo-semibold-webfont.woff\")\n      format(\"woff\");\n}\n\n@font-face {\n  font-family: \"Odudo\";\n  font-weight: 600;\n  font-display: swap;\n  src: url(\"https://cdn.blerp.com/blerp-web-images/fonts/Odudo%20V1.3/WEB/odudo-semibold-webfont.eot\");\n  src: url(\"https://cdn.blerp.com/blerp-web-images/fonts/Odudo%20V1.3/WEB/odudo-semibold-webfont.woff2\")\n      format(\"woff2\"),\n    url(\"https://cdn.blerp.com/blerp-web-images/fonts/Odudo%20V1.3/WEB/odudo-semibold-webfont.woff\")\n      format(\"woff\");\n}\n\n@font-face {\n  font-family: \"Odudo\";\n  font-weight: bold;\n  font-display: swap;\n  src: url(\"https://cdn.blerp.com/blerp-web-images/fonts/web/Odudo-Bold.eot\");\n  src: url(\"https://cdn.blerp.com/blerp-web-images/fonts/web/Odudo-Bold.woff2\")\n      format(\"woff2\"),\n    url(\"https://cdn.blerp.com/blerp-web-images/fonts/web/Odudo-Bold.woff\")\n      format(\"woff\");\n}\n\n@font-face {\n  font-family: \"Odudo\";\n  font-weight: 700;\n  font-display: swap;\n  src: url(\"https://cdn.blerp.com/blerp-web-images/fonts/web/Odudo-Bold.eot\");\n  src: url(\"https://cdn.blerp.com/blerp-web-images/fonts/web/Odudo-Bold.woff2\")\n      format(\"woff2\"),\n    url(\"https://cdn.blerp.com/blerp-web-images/fonts/web/Odudo-Bold.woff\")\n      format(\"woff\");\n}"; // Try to load MUI dynamically, but don't fail if it's not installed
 
-let createTheme = null;
-let MuiThemeProvider = null;
-
-try {
-  const mui = require("@mui/material/styles");
-
-  createTheme = mui.createTheme;
-  MuiThemeProvider = mui.ThemeProvider;
-} catch (e) {// MUI not installed, that's fine
-  // console.log("MUI not detected - using lightweight theme mode");
-} // Try to load styled-components, but don't fail if it's not installed
-
-
 let StyledThemeProvider = null;
 
 try {
@@ -141,7 +128,7 @@ const darkThemeConfig = _objectSpread({
   palette: colors.darkPalette
 }, mainTheme); // MUI themes (only created if MUI is available)
 
-const muiThemeConfig = {
+({
   typography: {
     fontFamily: "Odudo, Arial"
   },
@@ -244,84 +231,9 @@ const muiThemeConfig = {
       styleOverrides: fonts
     }
   }
-};
-const theme = createTheme ? createTheme(_objectSpread(_objectSpread({}, muiThemeConfig), {}, {
-  mode: "light",
-  colors: colors.lightColors,
-  icons: icons,
-  palette: colors.lightPalette
-})) : lightThemeConfig;
-const darkTheme = createTheme ? createTheme(_objectSpread(_objectSpread({}, muiThemeConfig), {}, {
-  components: _objectSpread(_objectSpread({}, muiThemeConfig.components), {}, {
-    MuiTypography: {
-      styleOverrides: {
-        root: {
-          color: colors["default"].white
-        }
-      }
-    },
-    MuiFilledInput: {
-      styleOverrides: {
-        root: {
-          color: colors["default"].white,
-          backgroundColor: colors["default"].grey7,
-          "& textarea": {
-            color: colors["default"].white
-          },
-          ":hover": {
-            backgroundColor: colors["default"].grey7
-          },
-          ":before": {
-            borderColor: colors["default"].waxwing
-          },
-          ":hover:before": {
-            borderColor: "".concat(colors["default"].white, " !important")
-          }
-        }
-      }
-    },
-    MuiInput: {
-      styleOverrides: {
-        root: {
-          color: colors["default"].white,
-          borderColor: colors["default"].white,
-          ":before": {
-            borderColor: colors["default"].waxwing
-          },
-          ":hover:before": {
-            borderColor: "".concat(colors["default"].white, " !important")
-          }
-        }
-      }
-    },
-    MuiInputLabel: {
-      styleOverrides: {
-        root: {
-          color: colors["default"].white
-        }
-      }
-    },
-    MuiSvgIcon: {
-      styleOverrides: {
-        root: {
-          color: colors["default"].white
-        }
-      }
-    },
-    MuiBackdrop: {
-      styleOverrides: {
-        root: {
-          backgroundColor: "".concat(colors["default"].grey5, "70"),
-          backdropFilter: "blur(4px)"
-        }
-      }
-    }
-  }),
-  mode: "dark",
-  colors: colors.darkColors,
-  icons: icons,
-  palette: colors.darkPalette
-})) : darkThemeConfig; // Create a context for theme access (legacy - for styled-components)
+});
+const theme = lightThemeConfig;
+const darkTheme = darkThemeConfig; // Create a context for theme access (legacy - for styled-components)
 
 const BlerpThemeContext = /*#__PURE__*/React.createContext(null);
 const useBlerpTheme = () => {
@@ -335,7 +247,7 @@ const useBlerpTheme = () => {
 };
 /**
  * BlerpTheme - Main theme provider
- * 
+ *
  * FIXED: Now accepts and passes through customColors to NewThemeProvider
  * This allows ExtensionTheme and other consumers to override extension colors
  */
@@ -362,9 +274,7 @@ const BlerpTheme = _ref => {
     theme: themeValue
   }, innerContent) : innerContent; // Wrap with MUI ThemeProvider if available
 
-  const withMuiTheme = MuiThemeProvider ? /*#__PURE__*/React__default["default"].createElement(MuiThemeProvider, {
-    theme: currentTheme
-  }, withStyledTheme) : withStyledTheme; // CRITICAL FIX: Pass customColors through to NewThemeProvider
+  const withMuiTheme = withStyledTheme; // CRITICAL FIX: Pass customColors through to NewThemeProvider
   // This ensures neo-components get the extension color overrides
 
   return /*#__PURE__*/React__default["default"].createElement(ThemeProvider.ThemeProvider, {

package/dist/cjs/neo-components/FormControls.js

@@ -21,7 +21,7 @@ const _excluded = ["checked", "defaultChecked", "disabled", "onChange", "color",
       _excluded2 = ["checked", "defaultChecked", "disabled", "onChange", "color", "size", "name", "value", "inputProps", "style"],
       _excluded3 = ["checked", "defaultChecked", "disabled", "onChange", "color", "size", "name", "value", "inputProps", "style"],
       _excluded4 = ["value", "defaultValue", "onChange", "children", "disabled", "multiple", "native", "variant", "label", "fullWidth", "size", "error", "displayEmpty", "renderValue", "MenuProps", "inputProps", "style", "IconComponent", "disableBorder", "color"],
-      _excluded5 = ["value", "defaultValue", "onChange", "onChangeCommitted", "min", "max", "step", "marks", "disabled", "orientation", "color", "size", "valueLabelDisplay", "valueLabelFormat", "getAriaValueText", "track", "style"],
+      _excluded5 = ["value", "defaultValue", "onChange", "onChangeCommitted", "min", "max", "step", "marks", "disabled", "orientation", "color", "size", "valueLabelDisplay", "valueLabelFormat", "getAriaValueText", "track", "disableSwap", "style"],
       _excluded6 = ["value", "defaultValue", "onChange", "max", "precision", "disabled", "readOnly", "size", "emptyIcon", "icon", "name", "style"];
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
@@ -764,6 +764,7 @@ const BaseSlider = /*#__PURE__*/React__default["default"].forwardRef((_ref5, ref
     valueLabelFormat,
     getAriaValueText,
     track = "normal",
+    disableSwap = false,
     style
   } = _ref5,
       props = _objectWithoutProperties__default["default"](_ref5, _excluded5);
@@ -771,55 +772,103 @@ const BaseSlider = /*#__PURE__*/React__default["default"].forwardRef((_ref5, ref
   const {
     colors
   } = ThemeProvider.useTheme();
+  const isRange = Array.isArray(value) || Array.isArray(defaultValue);
   const [internalValue, setInternalValue] = React.useState(defaultValue);
   const [isDragging, setIsDragging] = React.useState(false);
+  const [activeThumb, setActiveThumb] = React.useState(-1);
   const sliderRef = React.useRef(null);
   const currentValue = value !== undefined ? value : internalValue;
   const colorValue = colors[color] || colors.primary;
   const mainColor = typeof colorValue === "object" ? colorValue.main : colorValue;
   const trackThickness = 4;
-  const thumbSize = 20;
-  const percentage = (currentValue - min) / (max - min) * 100;
+  const thumbSize = 20; // Calculate percentages for range or single
 
-  const handleChange = newValue => {
-    const clampedValue = Math.min(max, Math.max(min, newValue));
-    const steppedValue = Math.round(clampedValue / step) * step;
+  const getPercentage = val => (val - min) / (max - min) * 100;
 
-    if (value === undefined) {
-      setInternalValue(steppedValue);
-    }
+  const percentage = isRange ? [getPercentage(currentValue[0]), getPercentage(currentValue[1])] : getPercentage(currentValue);
 
-    onChange === null || onChange === void 0 ? void 0 : onChange({
-      target: {
-        value: steppedValue
+  const handleChange = (newValue, thumbIndex) => {
+    if (isRange) {
+      const clampedValue = Math.min(max, Math.max(min, newValue));
+      const steppedValue = Math.round(clampedValue / step) * step;
+      let newRange = [...currentValue];
+      newRange[thumbIndex] = steppedValue; // Handle swap prevention
+
+      if (disableSwap) {
+        if (thumbIndex === 0 && steppedValue > currentValue[1]) {
+          newRange[0] = currentValue[1];
+        } else if (thumbIndex === 1 && steppedValue < currentValue[0]) {
+          newRange[1] = currentValue[0];
+        }
+      } else {
+        // Auto-swap if needed
+        if (newRange[0] > newRange[1]) {
+          newRange = [newRange[1], newRange[0]];
+        }
+      }
+
+      if (value === undefined) {
+        setInternalValue(newRange);
       }
-    }, steppedValue);
+
+      onChange === null || onChange === void 0 ? void 0 : onChange({
+        target: {
+          value: newRange
+        }
+      }, newRange, thumbIndex);
+    } else {
+      const clampedValue = Math.min(max, Math.max(min, newValue));
+      const steppedValue = Math.round(clampedValue / step) * step;
+
+      if (value === undefined) {
+        setInternalValue(steppedValue);
+      }
+
+      onChange === null || onChange === void 0 ? void 0 : onChange({
+        target: {
+          value: steppedValue
+        }
+      }, steppedValue);
+    }
+  };
+
+  const getClosestThumb = clientX => {
+    if (!sliderRef.current || !isRange) return 0;
+    const rect = sliderRef.current.getBoundingClientRect();
+    const percent = (clientX - rect.left) / rect.width;
+    const clickValue = min + percent * (max - min);
+    const dist0 = Math.abs(currentValue[0] - clickValue);
+    const dist1 = Math.abs(currentValue[1] - clickValue);
+    return dist0 <= dist1 ? 0 : 1;
   };
 
-  const updateValue = e => {
+  const updateValue = (e, thumbIdx) => {
     if (!sliderRef.current) return;
     const rect = sliderRef.current.getBoundingClientRect();
     const percent = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
     const newValue = min + percent * (max - min);
-    handleChange(newValue);
+    handleChange(newValue, thumbIdx);
   };
 
   const handleMouseDown = e => {
     if (disabled) return;
     e.preventDefault();
+    const thumbIdx = isRange ? getClosestThumb(e.clientX) : 0;
+    setActiveThumb(thumbIdx);
     setIsDragging(true);
-    updateValue(e);
+    updateValue(e, thumbIdx);
   };
 
   React.useEffect(() => {
     if (!isDragging) return;
 
     const handleMouseMove = e => {
-      updateValue(e);
+      updateValue(e, activeThumb);
     };
 
     const handleMouseUp = () => {
       setIsDragging(false);
+      setActiveThumb(-1);
       onChangeCommitted === null || onChangeCommitted === void 0 ? void 0 : onChangeCommitted({
         target: {
           value: currentValue
@@ -833,7 +882,7 @@ const BaseSlider = /*#__PURE__*/React__default["default"].forwardRef((_ref5, ref
       document.removeEventListener("mousemove", handleMouseMove);
       document.removeEventListener("mouseup", handleMouseUp);
     };
-  }, [isDragging, currentValue, min, max, step]);
+  }, [isDragging, activeThumb, currentValue, min, max, step]);
 
   const containerStyle = _objectSpread(_objectSpread({
     position: "relative",
@@ -855,7 +904,17 @@ const BaseSlider = /*#__PURE__*/React__default["default"].forwardRef((_ref5, ref
     borderRadius: "".concat(trackThickness / 2, "px"),
     backgroundColor: "rgba(255, 255, 255, 0.3)"
   };
-  const trackStyle = {
+  const trackStyle = isRange ? {
+    position: "absolute",
+    left: "".concat(percentage[0], "%"),
+    width: "".concat(percentage[1] - percentage[0], "%"),
+    height: "".concat(trackThickness, "px"),
+    top: "50%",
+    transform: "translateY(-50%)",
+    borderRadius: "".concat(trackThickness / 2, "px"),
+    backgroundColor: mainColor,
+    transition: isDragging ? "none" : "left 150ms, width 150ms"
+  } : {
     position: "absolute",
     width: "".concat(percentage, "%"),
     height: "".concat(trackThickness, "px"),
@@ -866,22 +925,22 @@ const BaseSlider = /*#__PURE__*/React__default["default"].forwardRef((_ref5, ref
     transition: isDragging ? "none" : "width 150ms"
   };
 
-  const thumbStyle = _objectSpread({
+  const getThumbStyle = (pct, idx) => _objectSpread({
     position: "absolute",
     width: "".concat(thumbSize, "px"),
     height: "".concat(thumbSize, "px"),
     borderRadius: "50%",
     backgroundColor: mainColor,
     boxShadow: "0px 2px 1px -1px rgba(0,0,0,0.2), 0px 1px 1px 0px rgba(0,0,0,0.14), 0px 1px 3px 0px rgba(0,0,0,0.12)",
-    left: "calc(".concat(percentage, "% - ").concat(thumbSize / 2, "px)"),
+    left: "calc(".concat(pct, "% - ").concat(thumbSize / 2, "px)"),
     top: "50%",
     transform: "translateY(-50%)",
-    transition: isDragging ? "none" : "left 150ms",
-    cursor: "grab"
-  }, isDragging && {
+    transition: isDragging && activeThumb === idx ? "none" : "left 150ms",
+    cursor: "grab",
+    zIndex: activeThumb === idx ? 2 : 1
+  }, isDragging && activeThumb === idx && {
     cursor: "grabbing"
-  }); // Render marks if provided
-
+  });
 
   const renderMarks = () => {
     if (!marks) return null;
@@ -919,7 +978,12 @@ const BaseSlider = /*#__PURE__*/React__default["default"].forwardRef((_ref5, ref
     });
   };
 
-  const displayValue = valueLabelFormat ? valueLabelFormat(currentValue) : getAriaValueText ? getAriaValueText(currentValue) : currentValue;
+  const formatDisplayValue = val => {
+    if (valueLabelFormat) return valueLabelFormat(val);
+    if (getAriaValueText) return getAriaValueText(val);
+    return val;
+  };
+
   return /*#__PURE__*/React__default["default"].createElement("div", _extends__default["default"]({
     ref: node => {
       sliderRef.current = node;
@@ -935,15 +999,44 @@ const BaseSlider = /*#__PURE__*/React__default["default"].forwardRef((_ref5, ref
     role: "slider",
     "aria-valuemin": min,
     "aria-valuemax": max,
-    "aria-valuenow": currentValue,
-    "aria-valuetext": getAriaValueText === null || getAriaValueText === void 0 ? void 0 : getAriaValueText(currentValue),
+    "aria-valuenow": isRange ? currentValue[0] : currentValue,
     tabIndex: disabled ? -1 : 0
   }, props), /*#__PURE__*/React__default["default"].createElement("span", {
     style: railStyle
   }), track !== false && /*#__PURE__*/React__default["default"].createElement("span", {
     style: trackStyle
-  }), /*#__PURE__*/React__default["default"].createElement("span", {
-    style: thumbStyle
+  }), isRange ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("span", {
+    style: getThumbStyle(percentage[0], 0)
+  }, valueLabelDisplay === "on" || valueLabelDisplay === "auto" && isDragging && activeThumb === 0 ? /*#__PURE__*/React__default["default"].createElement("span", {
+    style: {
+      position: "absolute",
+      bottom: "calc(100% + 8px)",
+      left: "50%",
+      transform: "translateX(-50%)",
+      padding: "4px 8px",
+      borderRadius: "4px",
+      backgroundColor: "rgba(0, 0, 0, 0.87)",
+      color: "#fff",
+      fontSize: "12px",
+      whiteSpace: "nowrap"
+    }
+  }, formatDisplayValue(currentValue[0])) : null), /*#__PURE__*/React__default["default"].createElement("span", {
+    style: getThumbStyle(percentage[1], 1)
+  }, valueLabelDisplay === "on" || valueLabelDisplay === "auto" && isDragging && activeThumb === 1 ? /*#__PURE__*/React__default["default"].createElement("span", {
+    style: {
+      position: "absolute",
+      bottom: "calc(100% + 8px)",
+      left: "50%",
+      transform: "translateX(-50%)",
+      padding: "4px 8px",
+      borderRadius: "4px",
+      backgroundColor: "rgba(0, 0, 0, 0.87)",
+      color: "#fff",
+      fontSize: "12px",
+      whiteSpace: "nowrap"
+    }
+  }, formatDisplayValue(currentValue[1])) : null)) : /*#__PURE__*/React__default["default"].createElement("span", {
+    style: getThumbStyle(percentage, 0)
   }, valueLabelDisplay === "on" && /*#__PURE__*/React__default["default"].createElement("span", {
     style: {
       position: "absolute",
@@ -957,7 +1050,7 @@ const BaseSlider = /*#__PURE__*/React__default["default"].forwardRef((_ref5, ref
       fontSize: "12px",
       whiteSpace: "nowrap"
     }
-  }, displayValue)), renderMarks());
+  }, formatDisplayValue(currentValue))), renderMarks());
 });
 BaseSlider.displayName = "BaseSlider";
 const Slider = withSx.withSx(BaseSlider);

package/dist/cjs/neo-components/Text.js

@@ -194,8 +194,8 @@ const BaseText = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
     if ((colorValue === null || colorValue === void 0 ? void 0 : colorValue.toLowerCase()) === "notblack") return "#FFFFFF";
     if ((colorValue === null || colorValue === void 0 ? void 0 : colorValue.toLowerCase()) === "notblack.main") return "#FFFFFF"; // Hardcode plain white / black detection
 
-    if (colorValue.toLowerCase() === "white") return "#FFFFFF";
-    if (colorValue.toLowerCase() === "black") return "#000000"; // Handle "white.override" or similar
+    if ((colorValue === null || colorValue === void 0 ? void 0 : colorValue.toLowerCase()) === "white") return "#FFFFFF";
+    if ((colorValue === null || colorValue === void 0 ? void 0 : colorValue.toLowerCase()) === "black") return "#000000"; // Handle "white.override" or similar
 
     if (colorValue === "white.override" || colorValue === "whiteOverride") {
       var _colors$whiteOverride;

package/dist/esm/Theme.js

@@ -1,7 +1,7 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import React, { useContext, useMemo, createContext } from 'react';
 import icons from './icons.js';
-import colors, { darkColors, darkPalette, lightColors, lightPalette } from './colors.js';
+import colors, { lightColors, lightPalette, darkColors, darkPalette } from './colors.js';
 import { SnackbarProvider } from './SnackbarContextProvider.js';
 import { ThemeProvider } from './neo-components/ThemeProvider.js';
 import '@babel/runtime/helpers/extends';
@@ -90,19 +90,6 @@ const mainTheme = {
 };
 const fonts = "@font-face {\n  font-family: \"Odudo\";\n  font-weight: normal;\n  font-display: swap;\n  src: url(\"https://cdn.blerp.com/blerp-web-images/fonts/web/Odudo-Regular.eot\");\n  src: url(\"https://cdn.blerp.com/blerp-web-images/fonts/web/Odudo-Regular.woff2\")\n      format(\"woff2\"),\n    url(\"https://cdn.blerp.com/blerp-web-images/fonts/web/Odudo-Regular.woff\")\n      format(\"woff\");\n}\n\n@font-face {\n  font-family: \"Odudo\";\n  font-weight: lighter;\n  font-display: swap;\n  src: url(\"https://cdn.blerp.com/blerp-web-images/fonts/web/Odudo-Light.eot\");\n  src: url(\"https://cdn.blerp.com/blerp-web-images/fonts/web/Odudo-Light.woff2\")\n      format(\"woff2\"),\n    url(\"https://cdn.blerp.com/blerp-web-images/fonts/web/Odudo-Light.woff\")\n      format(\"woff\");\n}\n\n@font-face {\n  font-family: \"Odudo\";\n  font-weight: 300;\n  font-display: swap;\n  src: url(\"https://cdn.blerp.com/blerp-web-images/fonts/web/Odudo-Light.eot\");\n  src: url(\"https://cdn.blerp.com/blerp-web-images/fonts/web/Odudo-Light.woff2\")\n      format(\"woff2\"),\n    url(\"https://cdn.blerp.com/blerp-web-images/fonts/web/Odudo-Light.woff\")\n      format(\"woff\");\n}\n\n@font-face {\n  font-family: \"Odudo\";\n  font-weight: 400;\n  font-display: swap;\n  src: url(\"https://cdn.blerp.com/blerp-web-images/fonts/web/Odudo-Regular.eot\");\n  src: url(\"https://cdn.blerp.com/blerp-web-images/fonts/web/Odudo-Regular.woff2\")\n      format(\"woff2\"),\n    url(\"https://cdn.blerp.com/blerp-web-images/fonts/web/Odudo-Regular.woff\")\n      format(\"woff\");\n}\n\n@font-face {\n  font-family: \"Odudo\";\n  font-weight: bolder;\n  font-display: swap;\n  src: url(\"https://cdn.blerp.com/blerp-web-images/fonts/Odudo%20V1.3/WEB/odudo-semibold-webfont.eot\");\n  src: url(\"https://cdn.blerp.com/blerp-web-images/fonts/Odudo%20V1.3/WEB/odudo-semibold-webfont.woff2\")\n      format(\"woff2\"),\n    url(\"https://cdn.blerp.com/blerp-web-images/fonts/Odudo%20V1.3/WEB/odudo-semibold-webfont.woff\")\n      format(\"woff\");\n}\n\n@font-face {\n  font-family: \"Odudo\";\n  font-weight: 600;\n  font-display: swap;\n  src: url(\"https://cdn.blerp.com/blerp-web-images/fonts/Odudo%20V1.3/WEB/odudo-semibold-webfont.eot\");\n  src: url(\"https://cdn.blerp.com/blerp-web-images/fonts/Odudo%20V1.3/WEB/odudo-semibold-webfont.woff2\")\n      format(\"woff2\"),\n    url(\"https://cdn.blerp.com/blerp-web-images/fonts/Odudo%20V1.3/WEB/odudo-semibold-webfont.woff\")\n      format(\"woff\");\n}\n\n@font-face {\n  font-family: \"Odudo\";\n  font-weight: bold;\n  font-display: swap;\n  src: url(\"https://cdn.blerp.com/blerp-web-images/fonts/web/Odudo-Bold.eot\");\n  src: url(\"https://cdn.blerp.com/blerp-web-images/fonts/web/Odudo-Bold.woff2\")\n      format(\"woff2\"),\n    url(\"https://cdn.blerp.com/blerp-web-images/fonts/web/Odudo-Bold.woff\")\n      format(\"woff\");\n}\n\n@font-face {\n  font-family: \"Odudo\";\n  font-weight: 700;\n  font-display: swap;\n  src: url(\"https://cdn.blerp.com/blerp-web-images/fonts/web/Odudo-Bold.eot\");\n  src: url(\"https://cdn.blerp.com/blerp-web-images/fonts/web/Odudo-Bold.woff2\")\n      format(\"woff2\"),\n    url(\"https://cdn.blerp.com/blerp-web-images/fonts/web/Odudo-Bold.woff\")\n      format(\"woff\");\n}"; // Try to load MUI dynamically, but don't fail if it's not installed
 
-let createTheme = null;
-let MuiThemeProvider = null;
-
-try {
-  const mui = require("@mui/material/styles");
-
-  createTheme = mui.createTheme;
-  MuiThemeProvider = mui.ThemeProvider;
-} catch (e) {// MUI not installed, that's fine
-  // console.log("MUI not detected - using lightweight theme mode");
-} // Try to load styled-components, but don't fail if it's not installed
-
-
 let StyledThemeProvider = null;
 
 try {
@@ -132,7 +119,7 @@ const darkThemeConfig = _objectSpread({
   palette: darkPalette
 }, mainTheme); // MUI themes (only created if MUI is available)
 
-const muiThemeConfig = {
+({
   typography: {
     fontFamily: "Odudo, Arial"
   },
@@ -235,84 +222,9 @@ const muiThemeConfig = {
       styleOverrides: fonts
     }
   }
-};
-const theme = createTheme ? createTheme(_objectSpread(_objectSpread({}, muiThemeConfig), {}, {
-  mode: "light",
-  colors: lightColors,
-  icons: icons,
-  palette: lightPalette
-})) : lightThemeConfig;
-const darkTheme = createTheme ? createTheme(_objectSpread(_objectSpread({}, muiThemeConfig), {}, {
-  components: _objectSpread(_objectSpread({}, muiThemeConfig.components), {}, {
-    MuiTypography: {
-      styleOverrides: {
-        root: {
-          color: colors.white
-        }
-      }
-    },
-    MuiFilledInput: {
-      styleOverrides: {
-        root: {
-          color: colors.white,
-          backgroundColor: colors.grey7,
-          "& textarea": {
-            color: colors.white
-          },
-          ":hover": {
-            backgroundColor: colors.grey7
-          },
-          ":before": {
-            borderColor: colors.waxwing
-          },
-          ":hover:before": {
-            borderColor: "".concat(colors.white, " !important")
-          }
-        }
-      }
-    },
-    MuiInput: {
-      styleOverrides: {
-        root: {
-          color: colors.white,
-          borderColor: colors.white,
-          ":before": {
-            borderColor: colors.waxwing
-          },
-          ":hover:before": {
-            borderColor: "".concat(colors.white, " !important")
-          }
-        }
-      }
-    },
-    MuiInputLabel: {
-      styleOverrides: {
-        root: {
-          color: colors.white
-        }
-      }
-    },
-    MuiSvgIcon: {
-      styleOverrides: {
-        root: {
-          color: colors.white
-        }
-      }
-    },
-    MuiBackdrop: {
-      styleOverrides: {
-        root: {
-          backgroundColor: "".concat(colors.grey5, "70"),
-          backdropFilter: "blur(4px)"
-        }
-      }
-    }
-  }),
-  mode: "dark",
-  colors: darkColors,
-  icons: icons,
-  palette: darkPalette
-})) : darkThemeConfig; // Create a context for theme access (legacy - for styled-components)
+});
+const theme = lightThemeConfig;
+const darkTheme = darkThemeConfig; // Create a context for theme access (legacy - for styled-components)
 
 const BlerpThemeContext = /*#__PURE__*/createContext(null);
 const useBlerpTheme = () => {
@@ -326,7 +238,7 @@ const useBlerpTheme = () => {
 };
 /**
  * BlerpTheme - Main theme provider
- * 
+ *
  * FIXED: Now accepts and passes through customColors to NewThemeProvider
  * This allows ExtensionTheme and other consumers to override extension colors
  */
@@ -353,9 +265,7 @@ const BlerpTheme = _ref => {
     theme: themeValue
   }, innerContent) : innerContent; // Wrap with MUI ThemeProvider if available
 
-  const withMuiTheme = MuiThemeProvider ? /*#__PURE__*/React.createElement(MuiThemeProvider, {
-    theme: currentTheme
-  }, withStyledTheme) : withStyledTheme; // CRITICAL FIX: Pass customColors through to NewThemeProvider
+  const withMuiTheme = withStyledTheme; // CRITICAL FIX: Pass customColors through to NewThemeProvider
   // This ensures neo-components get the extension color overrides
 
   return /*#__PURE__*/React.createElement(ThemeProvider, {

package/dist/esm/neo-components/FormControls.js

@@ -10,7 +10,7 @@ const _excluded = ["checked", "defaultChecked", "disabled", "onChange", "color",
       _excluded2 = ["checked", "defaultChecked", "disabled", "onChange", "color", "size", "name", "value", "inputProps", "style"],
       _excluded3 = ["checked", "defaultChecked", "disabled", "onChange", "color", "size", "name", "value", "inputProps", "style"],
       _excluded4 = ["value", "defaultValue", "onChange", "children", "disabled", "multiple", "native", "variant", "label", "fullWidth", "size", "error", "displayEmpty", "renderValue", "MenuProps", "inputProps", "style", "IconComponent", "disableBorder", "color"],
-      _excluded5 = ["value", "defaultValue", "onChange", "onChangeCommitted", "min", "max", "step", "marks", "disabled", "orientation", "color", "size", "valueLabelDisplay", "valueLabelFormat", "getAriaValueText", "track", "style"],
+      _excluded5 = ["value", "defaultValue", "onChange", "onChangeCommitted", "min", "max", "step", "marks", "disabled", "orientation", "color", "size", "valueLabelDisplay", "valueLabelFormat", "getAriaValueText", "track", "disableSwap", "style"],
       _excluded6 = ["value", "defaultValue", "onChange", "max", "precision", "disabled", "readOnly", "size", "emptyIcon", "icon", "name", "style"];
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
@@ -753,6 +753,7 @@ const BaseSlider = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
     valueLabelFormat,
     getAriaValueText,
     track = "normal",
+    disableSwap = false,
     style
   } = _ref5,
       props = _objectWithoutProperties(_ref5, _excluded5);
@@ -760,55 +761,103 @@ const BaseSlider = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
   const {
     colors
   } = useTheme();
+  const isRange = Array.isArray(value) || Array.isArray(defaultValue);
   const [internalValue, setInternalValue] = useState(defaultValue);
   const [isDragging, setIsDragging] = useState(false);
+  const [activeThumb, setActiveThumb] = useState(-1);
   const sliderRef = useRef(null);
   const currentValue = value !== undefined ? value : internalValue;
   const colorValue = colors[color] || colors.primary;
   const mainColor = typeof colorValue === "object" ? colorValue.main : colorValue;
   const trackThickness = 4;
-  const thumbSize = 20;
-  const percentage = (currentValue - min) / (max - min) * 100;
+  const thumbSize = 20; // Calculate percentages for range or single
 
-  const handleChange = newValue => {
-    const clampedValue = Math.min(max, Math.max(min, newValue));
-    const steppedValue = Math.round(clampedValue / step) * step;
+  const getPercentage = val => (val - min) / (max - min) * 100;
 
-    if (value === undefined) {
-      setInternalValue(steppedValue);
-    }
+  const percentage = isRange ? [getPercentage(currentValue[0]), getPercentage(currentValue[1])] : getPercentage(currentValue);
 
-    onChange === null || onChange === void 0 ? void 0 : onChange({
-      target: {
-        value: steppedValue
+  const handleChange = (newValue, thumbIndex) => {
+    if (isRange) {
+      const clampedValue = Math.min(max, Math.max(min, newValue));
+      const steppedValue = Math.round(clampedValue / step) * step;
+      let newRange = [...currentValue];
+      newRange[thumbIndex] = steppedValue; // Handle swap prevention
+
+      if (disableSwap) {
+        if (thumbIndex === 0 && steppedValue > currentValue[1]) {
+          newRange[0] = currentValue[1];
+        } else if (thumbIndex === 1 && steppedValue < currentValue[0]) {
+          newRange[1] = currentValue[0];
+        }
+      } else {
+        // Auto-swap if needed
+        if (newRange[0] > newRange[1]) {
+          newRange = [newRange[1], newRange[0]];
+        }
+      }
+
+      if (value === undefined) {
+        setInternalValue(newRange);
       }
-    }, steppedValue);
+
+      onChange === null || onChange === void 0 ? void 0 : onChange({
+        target: {
+          value: newRange
+        }
+      }, newRange, thumbIndex);
+    } else {
+      const clampedValue = Math.min(max, Math.max(min, newValue));
+      const steppedValue = Math.round(clampedValue / step) * step;
+
+      if (value === undefined) {
+        setInternalValue(steppedValue);
+      }
+
+      onChange === null || onChange === void 0 ? void 0 : onChange({
+        target: {
+          value: steppedValue
+        }
+      }, steppedValue);
+    }
+  };
+
+  const getClosestThumb = clientX => {
+    if (!sliderRef.current || !isRange) return 0;
+    const rect = sliderRef.current.getBoundingClientRect();
+    const percent = (clientX - rect.left) / rect.width;
+    const clickValue = min + percent * (max - min);
+    const dist0 = Math.abs(currentValue[0] - clickValue);
+    const dist1 = Math.abs(currentValue[1] - clickValue);
+    return dist0 <= dist1 ? 0 : 1;
   };
 
-  const updateValue = e => {
+  const updateValue = (e, thumbIdx) => {
     if (!sliderRef.current) return;
     const rect = sliderRef.current.getBoundingClientRect();
     const percent = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
     const newValue = min + percent * (max - min);
-    handleChange(newValue);
+    handleChange(newValue, thumbIdx);
   };
 
   const handleMouseDown = e => {
     if (disabled) return;
     e.preventDefault();
+    const thumbIdx = isRange ? getClosestThumb(e.clientX) : 0;
+    setActiveThumb(thumbIdx);
     setIsDragging(true);
-    updateValue(e);
+    updateValue(e, thumbIdx);
   };
 
   useEffect(() => {
     if (!isDragging) return;
 
     const handleMouseMove = e => {
-      updateValue(e);
+      updateValue(e, activeThumb);
     };
 
     const handleMouseUp = () => {
       setIsDragging(false);
+      setActiveThumb(-1);
       onChangeCommitted === null || onChangeCommitted === void 0 ? void 0 : onChangeCommitted({
         target: {
           value: currentValue
@@ -822,7 +871,7 @@ const BaseSlider = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
       document.removeEventListener("mousemove", handleMouseMove);
       document.removeEventListener("mouseup", handleMouseUp);
     };
-  }, [isDragging, currentValue, min, max, step]);
+  }, [isDragging, activeThumb, currentValue, min, max, step]);
 
   const containerStyle = _objectSpread(_objectSpread({
     position: "relative",
@@ -844,7 +893,17 @@ const BaseSlider = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
     borderRadius: "".concat(trackThickness / 2, "px"),
     backgroundColor: "rgba(255, 255, 255, 0.3)"
   };
-  const trackStyle = {
+  const trackStyle = isRange ? {
+    position: "absolute",
+    left: "".concat(percentage[0], "%"),
+    width: "".concat(percentage[1] - percentage[0], "%"),
+    height: "".concat(trackThickness, "px"),
+    top: "50%",
+    transform: "translateY(-50%)",
+    borderRadius: "".concat(trackThickness / 2, "px"),
+    backgroundColor: mainColor,
+    transition: isDragging ? "none" : "left 150ms, width 150ms"
+  } : {
     position: "absolute",
     width: "".concat(percentage, "%"),
     height: "".concat(trackThickness, "px"),
@@ -855,22 +914,22 @@ const BaseSlider = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
     transition: isDragging ? "none" : "width 150ms"
   };
 
-  const thumbStyle = _objectSpread({
+  const getThumbStyle = (pct, idx) => _objectSpread({
     position: "absolute",
     width: "".concat(thumbSize, "px"),
     height: "".concat(thumbSize, "px"),
     borderRadius: "50%",
     backgroundColor: mainColor,
     boxShadow: "0px 2px 1px -1px rgba(0,0,0,0.2), 0px 1px 1px 0px rgba(0,0,0,0.14), 0px 1px 3px 0px rgba(0,0,0,0.12)",
-    left: "calc(".concat(percentage, "% - ").concat(thumbSize / 2, "px)"),
+    left: "calc(".concat(pct, "% - ").concat(thumbSize / 2, "px)"),
     top: "50%",
     transform: "translateY(-50%)",
-    transition: isDragging ? "none" : "left 150ms",
-    cursor: "grab"
-  }, isDragging && {
+    transition: isDragging && activeThumb === idx ? "none" : "left 150ms",
+    cursor: "grab",
+    zIndex: activeThumb === idx ? 2 : 1
+  }, isDragging && activeThumb === idx && {
     cursor: "grabbing"
-  }); // Render marks if provided
-
+  });
 
   const renderMarks = () => {
     if (!marks) return null;
@@ -908,7 +967,12 @@ const BaseSlider = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
     });
   };
 
-  const displayValue = valueLabelFormat ? valueLabelFormat(currentValue) : getAriaValueText ? getAriaValueText(currentValue) : currentValue;
+  const formatDisplayValue = val => {
+    if (valueLabelFormat) return valueLabelFormat(val);
+    if (getAriaValueText) return getAriaValueText(val);
+    return val;
+  };
+
   return /*#__PURE__*/React.createElement("div", _extends({
     ref: node => {
       sliderRef.current = node;
@@ -924,15 +988,44 @@ const BaseSlider = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
     role: "slider",
     "aria-valuemin": min,
     "aria-valuemax": max,
-    "aria-valuenow": currentValue,
-    "aria-valuetext": getAriaValueText === null || getAriaValueText === void 0 ? void 0 : getAriaValueText(currentValue),
+    "aria-valuenow": isRange ? currentValue[0] : currentValue,
     tabIndex: disabled ? -1 : 0
   }, props), /*#__PURE__*/React.createElement("span", {
     style: railStyle
   }), track !== false && /*#__PURE__*/React.createElement("span", {
     style: trackStyle
-  }), /*#__PURE__*/React.createElement("span", {
-    style: thumbStyle
+  }), isRange ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+    style: getThumbStyle(percentage[0], 0)
+  }, valueLabelDisplay === "on" || valueLabelDisplay === "auto" && isDragging && activeThumb === 0 ? /*#__PURE__*/React.createElement("span", {
+    style: {
+      position: "absolute",
+      bottom: "calc(100% + 8px)",
+      left: "50%",
+      transform: "translateX(-50%)",
+      padding: "4px 8px",
+      borderRadius: "4px",
+      backgroundColor: "rgba(0, 0, 0, 0.87)",
+      color: "#fff",
+      fontSize: "12px",
+      whiteSpace: "nowrap"
+    }
+  }, formatDisplayValue(currentValue[0])) : null), /*#__PURE__*/React.createElement("span", {
+    style: getThumbStyle(percentage[1], 1)
+  }, valueLabelDisplay === "on" || valueLabelDisplay === "auto" && isDragging && activeThumb === 1 ? /*#__PURE__*/React.createElement("span", {
+    style: {
+      position: "absolute",
+      bottom: "calc(100% + 8px)",
+      left: "50%",
+      transform: "translateX(-50%)",
+      padding: "4px 8px",
+      borderRadius: "4px",
+      backgroundColor: "rgba(0, 0, 0, 0.87)",
+      color: "#fff",
+      fontSize: "12px",
+      whiteSpace: "nowrap"
+    }
+  }, formatDisplayValue(currentValue[1])) : null)) : /*#__PURE__*/React.createElement("span", {
+    style: getThumbStyle(percentage, 0)
   }, valueLabelDisplay === "on" && /*#__PURE__*/React.createElement("span", {
     style: {
       position: "absolute",
@@ -946,7 +1039,7 @@ const BaseSlider = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
       fontSize: "12px",
       whiteSpace: "nowrap"
     }
-  }, displayValue)), renderMarks());
+  }, formatDisplayValue(currentValue))), renderMarks());
 });
 BaseSlider.displayName = "BaseSlider";
 const Slider = withSx(BaseSlider);

package/dist/esm/neo-components/Text.js

@@ -183,8 +183,8 @@ const BaseText = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     if ((colorValue === null || colorValue === void 0 ? void 0 : colorValue.toLowerCase()) === "notblack") return "#FFFFFF";
     if ((colorValue === null || colorValue === void 0 ? void 0 : colorValue.toLowerCase()) === "notblack.main") return "#FFFFFF"; // Hardcode plain white / black detection
 
-    if (colorValue.toLowerCase() === "white") return "#FFFFFF";
-    if (colorValue.toLowerCase() === "black") return "#000000"; // Handle "white.override" or similar
+    if ((colorValue === null || colorValue === void 0 ? void 0 : colorValue.toLowerCase()) === "white") return "#FFFFFF";
+    if ((colorValue === null || colorValue === void 0 ? void 0 : colorValue.toLowerCase()) === "black") return "#000000"; // Handle "white.override" or similar
 
     if (colorValue === "white.override" || colorValue === "whiteOverride") {
       var _colors$whiteOverride;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blerp/design",
-  "version": "1.4.3",
+  "version": "1.4.5",
   "description": "Blerp UI",
   "main": "dist/esm/index.js",
   "scripts": {
@@ -8,7 +8,6 @@
     "watch": "rollup -c -w"
   },
   "peerDependencies": {
-    "@mui/material": "5.10.16",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "styled-components": "^5.0.0 || ^6.0.0"
@@ -38,8 +37,6 @@
     "@babel/plugin-transform-runtime": "^7.23.9",
     "@babel/preset-env": "^7.12.11",
     "@babel/preset-react": "^7.12.10",
-    "@mui/styled-engine": "npm:@mui/styled-engine-sc@latest",
-    "@mui/styled-engine-sc": "5.10.16",
     "@rollup/plugin-babel": "^5.2.2",
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^16.0.3",