@blerp/design 1.3.16 → 1.4.1

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

@@ -0,0 +1,223 @@
+'use strict';
+
+var _extends = require('@babel/runtime/helpers/extends');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var React = require('react');
+var withSx = require('./withSx.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const _excluded = ["children", "value", "selected", "disabled", "onChange", "onClick", "color", "size", "fullWidth", "className", "style"],
+      _excluded2 = ["children", "value", "onChange", "exclusive", "disabled", "color", "size", "orientation", "fullWidth", "className", "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; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+/**
+ * ToggleButton - button that can be toggled on/off
+ */
+
+const ToggleButtonBase = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) => {
+  let {
+    children,
+    value,
+    selected = false,
+    disabled = false,
+    onChange,
+    onClick,
+    color = "standard",
+    size = "medium",
+    fullWidth = false,
+    className,
+    style
+  } = _ref,
+      props = _objectWithoutProperties__default["default"](_ref, _excluded);
+
+  const sizeStyles = {
+    small: {
+      padding: "4px 8px",
+      fontSize: 13
+    },
+    medium: {
+      padding: "8px 12px",
+      fontSize: 14
+    },
+    large: {
+      padding: "12px 16px",
+      fontSize: 15
+    }
+  };
+  const colorStyles = {
+    standard: {
+      default: {
+        backgroundColor: "transparent",
+        color: "#000000",
+        borderColor: "rgba(0, 0, 0, 0.12)"
+      },
+      selected: {
+        backgroundColor: "rgba(0, 0, 0, 0.08)",
+        color: "#000000",
+        borderColor: "rgba(0, 0, 0, 0.12)"
+      }
+    },
+    primary: {
+      default: {
+        backgroundColor: "transparent",
+        color: "#000000",
+        borderColor: "rgba(0, 0, 0, 0.12)"
+      },
+      selected: {
+        backgroundColor: "rgba(124, 77, 255, 0.12)",
+        color: "#7C4DFF",
+        borderColor: "#7C4DFF"
+      }
+    },
+    secondary: {
+      default: {
+        backgroundColor: "transparent",
+        color: "#000000",
+        borderColor: "rgba(0, 0, 0, 0.12)"
+      },
+      selected: {
+        backgroundColor: "rgba(255, 64, 129, 0.12)",
+        color: "#FF4081",
+        borderColor: "#FF4081"
+      }
+    }
+  };
+  const currentColorStyle = colorStyles[color] || colorStyles.standard; // Explicitly compute these based on selected boolean to force re-render
+
+  const backgroundColor = selected ? currentColorStyle.selected.backgroundColor : currentColorStyle.default.backgroundColor;
+  const textColor = selected ? currentColorStyle.selected.color : currentColorStyle.default.color;
+  const borderColorValue = selected ? currentColorStyle.selected.borderColor : currentColorStyle.default.borderColor;
+
+  const baseStyle = _objectSpread(_objectSpread(_objectSpread({
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    border: "1px solid",
+    cursor: disabled ? "not-allowed" : "pointer",
+    opacity: disabled ? 0.5 : 1,
+    transition: "background-color 0.15s ease-out, border-color 0.15s ease-out, color 0.15s ease-out",
+    textTransform: "uppercase",
+    fontWeight: 500,
+    fontFamily: "inherit",
+    width: fullWidth ? "100%" : undefined,
+    outline: "none"
+  }, sizeStyles[size]), style), {}, {
+    // These MUST be last to override any style prop
+    backgroundColor,
+    color: textColor,
+    borderColor: borderColorValue
+  });
+
+  const handleClick = event => {
+    if (disabled) return; // Blur to clear any focus state that might be holding onto styles
+
+    event.currentTarget.blur();
+    onClick === null || onClick === void 0 ? void 0 : onClick(event, value);
+    onChange === null || onChange === void 0 ? void 0 : onChange(event, value);
+  };
+
+  return /*#__PURE__*/React__default["default"].createElement("button", _extends__default["default"]({
+    ref: ref,
+    className: className,
+    style: baseStyle,
+    disabled: disabled,
+    onClick: handleClick,
+    "aria-pressed": selected,
+    type: "button"
+  }, props), children);
+});
+ToggleButtonBase.displayName = "ToggleButton";
+withSx.withSx(ToggleButtonBase);
+/**
+ * ToggleButtonGroup - group of toggle buttons
+ */
+
+const ToggleButtonGroupBase = /*#__PURE__*/React__default["default"].forwardRef((_ref2, ref) => {
+  let {
+    children,
+    value,
+    onChange,
+    exclusive = false,
+    disabled = false,
+    color = "standard",
+    size = "medium",
+    orientation = "horizontal",
+    fullWidth = false,
+    className,
+    style
+  } = _ref2,
+      props = _objectWithoutProperties__default["default"](_ref2, _excluded2);
+
+  const baseStyle = _objectSpread({
+    display: "inline-flex",
+    flexDirection: orientation === "vertical" ? "column" : "row",
+    borderRadius: 4
+  }, style);
+
+  const handleChange = (event, buttonValue) => {
+    if (exclusive) {
+      // Single selection - toggle off if same value clicked
+      const newValue = value === buttonValue ? null : buttonValue;
+      onChange === null || onChange === void 0 ? void 0 : onChange(event, newValue);
+    } else {
+      // Multiple selection
+      const currentValue = Array.isArray(value) ? value : [];
+      const newValue = currentValue.includes(buttonValue) ? currentValue.filter(v => v !== buttonValue) : [...currentValue, buttonValue];
+      onChange === null || onChange === void 0 ? void 0 : onChange(event, newValue);
+    }
+  };
+
+  const isSelected = buttonValue => {
+    if (exclusive) {
+      return value === buttonValue;
+    }
+
+    return Array.isArray(value) && value.includes(buttonValue);
+  };
+
+  return /*#__PURE__*/React__default["default"].createElement("div", _extends__default["default"]({
+    ref: ref,
+    className: className,
+    style: baseStyle,
+    role: "group"
+  }, props), React__default["default"].Children.map(children, (child, index) => {
+    if (! /*#__PURE__*/React__default["default"].isValidElement(child)) return child;
+    const isFirst = index === 0;
+    const isLast = index === React__default["default"].Children.count(children) - 1;
+    const borderRadiusStyle = orientation === "horizontal" ? {
+      borderRadius: 0,
+      borderTopLeftRadius: isFirst ? 4 : 0,
+      borderBottomLeftRadius: isFirst ? 4 : 0,
+      borderTopRightRadius: isLast ? 4 : 0,
+      borderBottomRightRadius: isLast ? 4 : 0,
+      marginLeft: isFirst ? 0 : -1
+    } : {
+      borderRadius: 0,
+      borderTopLeftRadius: isFirst ? 4 : 0,
+      borderTopRightRadius: isFirst ? 4 : 0,
+      borderBottomLeftRadius: isLast ? 4 : 0,
+      borderBottomRightRadius: isLast ? 4 : 0,
+      marginTop: isFirst ? 0 : -1
+    };
+    return /*#__PURE__*/React__default["default"].cloneElement(child, {
+      selected: isSelected(child.props.value),
+      onChange: handleChange,
+      disabled: disabled || child.props.disabled,
+      color: child.props.color || color,
+      size: child.props.size || size,
+      fullWidth,
+      style: _objectSpread(_objectSpread({}, borderRadiusStyle), child.props.style)
+    });
+  }));
+});
+ToggleButtonGroupBase.displayName = "ToggleButtonGroup";
+withSx.withSx(ToggleButtonGroupBase);

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

@@ -0,0 +1,306 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+
+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; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+/**
+ * createTheme - creates a theme object compatible with MUI's createTheme
+ * This is a simplified version that merges theme options
+ */
+const defaultTheme = {
+  palette: {
+    mode: "light",
+    primary: {
+      main: "#7C4DFF",
+      light: "#B47CFF",
+      dark: "#3F1DCB",
+      contrastText: "#FFFFFF"
+    },
+    secondary: {
+      main: "#FF4081",
+      light: "#FF79B0",
+      dark: "#C60055",
+      contrastText: "#FFFFFF"
+    },
+    error: {
+      main: "#F44336",
+      light: "#E57373",
+      dark: "#D32F2F",
+      contrastText: "#FFFFFF"
+    },
+    warning: {
+      main: "#FF9800",
+      light: "#FFB74D",
+      dark: "#F57C00",
+      contrastText: "rgba(0, 0, 0, 0.87)"
+    },
+    info: {
+      main: "#2196F3",
+      light: "#64B5F6",
+      dark: "#1976D2",
+      contrastText: "#FFFFFF"
+    },
+    success: {
+      main: "#4CAF50",
+      light: "#81C784",
+      dark: "#388E3C",
+      contrastText: "rgba(0, 0, 0, 0.87)"
+    },
+    grey: {
+      50: "#FAFAFA",
+      100: "#F5F5F5",
+      200: "#EEEEEE",
+      300: "#E0E0E0",
+      400: "#BDBDBD",
+      500: "#9E9E9E",
+      600: "#757575",
+      700: "#616161",
+      800: "#424242",
+      900: "#212121",
+      A100: "#D5D5D5",
+      A200: "#AAAAAA",
+      A400: "#616161",
+      A700: "#303030"
+    },
+    text: {
+      primary: "rgba(0, 0, 0, 0.87)",
+      secondary: "rgba(0, 0, 0, 0.6)",
+      disabled: "rgba(0, 0, 0, 0.38)"
+    },
+    background: {
+      paper: "#FFFFFF",
+      default: "#FAFAFA"
+    },
+    divider: "rgba(0, 0, 0, 0.12)",
+    action: {
+      active: "rgba(0, 0, 0, 0.54)",
+      hover: "rgba(0, 0, 0, 0.04)",
+      selected: "rgba(0, 0, 0, 0.08)",
+      disabled: "rgba(0, 0, 0, 0.26)",
+      disabledBackground: "rgba(0, 0, 0, 0.12)"
+    }
+  },
+  typography: {
+    fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
+    fontSize: 14,
+    fontWeightLight: 300,
+    fontWeightRegular: 400,
+    fontWeightMedium: 500,
+    fontWeightBold: 700,
+    h1: {
+      fontWeight: 300,
+      fontSize: "6rem",
+      lineHeight: 1.167,
+      letterSpacing: "-0.01562em"
+    },
+    h2: {
+      fontWeight: 300,
+      fontSize: "3.75rem",
+      lineHeight: 1.2,
+      letterSpacing: "-0.00833em"
+    },
+    h3: {
+      fontWeight: 400,
+      fontSize: "3rem",
+      lineHeight: 1.167,
+      letterSpacing: "0em"
+    },
+    h4: {
+      fontWeight: 400,
+      fontSize: "2.125rem",
+      lineHeight: 1.235,
+      letterSpacing: "0.00735em"
+    },
+    h5: {
+      fontWeight: 400,
+      fontSize: "1.5rem",
+      lineHeight: 1.334,
+      letterSpacing: "0em"
+    },
+    h6: {
+      fontWeight: 500,
+      fontSize: "1.25rem",
+      lineHeight: 1.6,
+      letterSpacing: "0.0075em"
+    },
+    subtitle1: {
+      fontWeight: 400,
+      fontSize: "1rem",
+      lineHeight: 1.75,
+      letterSpacing: "0.00938em"
+    },
+    subtitle2: {
+      fontWeight: 500,
+      fontSize: "0.875rem",
+      lineHeight: 1.57,
+      letterSpacing: "0.00714em"
+    },
+    body1: {
+      fontWeight: 400,
+      fontSize: "1rem",
+      lineHeight: 1.5,
+      letterSpacing: "0.00938em"
+    },
+    body2: {
+      fontWeight: 400,
+      fontSize: "0.875rem",
+      lineHeight: 1.43,
+      letterSpacing: "0.01071em"
+    },
+    button: {
+      fontWeight: 500,
+      fontSize: "0.875rem",
+      lineHeight: 1.75,
+      letterSpacing: "0.02857em",
+      textTransform: "uppercase"
+    },
+    caption: {
+      fontWeight: 400,
+      fontSize: "0.75rem",
+      lineHeight: 1.66,
+      letterSpacing: "0.03333em"
+    },
+    overline: {
+      fontWeight: 400,
+      fontSize: "0.75rem",
+      lineHeight: 2.66,
+      letterSpacing: "0.08333em",
+      textTransform: "uppercase"
+    }
+  },
+  spacing: factor => "".concat(8 * factor, "px"),
+  shape: {
+    borderRadius: 4
+  },
+  shadows: ["none", "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)", "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)", "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)", "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)" // ... more shadow levels
+  ],
+  transitions: {
+    easing: {
+      easeInOut: "cubic-bezier(0.4, 0, 0.2, 1)",
+      easeOut: "cubic-bezier(0.0, 0, 0.2, 1)",
+      easeIn: "cubic-bezier(0.4, 0, 1, 1)",
+      sharp: "cubic-bezier(0.4, 0, 0.6, 1)"
+    },
+    duration: {
+      shortest: 150,
+      shorter: 200,
+      short: 250,
+      standard: 300,
+      complex: 375,
+      enteringScreen: 225,
+      leavingScreen: 195
+    }
+  },
+  zIndex: {
+    mobileStepper: 1000,
+    fab: 1050,
+    speedDial: 1050,
+    appBar: 1100,
+    drawer: 1200,
+    modal: 1300,
+    snackbar: 1400,
+    tooltip: 1500
+  },
+  breakpoints: {
+    keys: ["xs", "sm", "md", "lg", "xl"],
+    values: {
+      xs: 0,
+      sm: 600,
+      md: 900,
+      lg: 1200,
+      xl: 1536
+    },
+    up: key => "@media (min-width:".concat(defaultTheme.breakpoints.values[key], "px)"),
+    down: key => "@media (max-width:".concat(defaultTheme.breakpoints.values[key] - 0.05, "px)"),
+    between: (start, end) => "@media (min-width:".concat(defaultTheme.breakpoints.values[start], "px) and (max-width:").concat(defaultTheme.breakpoints.values[end] - 0.05, "px)"),
+    only: key => {
+      const keys = defaultTheme.breakpoints.keys;
+      const idx = keys.indexOf(key);
+
+      if (idx === keys.length - 1) {
+        return defaultTheme.breakpoints.up(key);
+      }
+
+      return defaultTheme.breakpoints.between(key, keys[idx + 1]);
+    }
+  },
+  components: {}
+};
+/**
+ * Deep merge utility
+ */
+
+function deepMerge(target, source) {
+  const output = _objectSpread({}, target);
+
+  if (isObject(target) && isObject(source)) {
+    Object.keys(source).forEach(key => {
+      if (isObject(source[key])) {
+        if (!(key in target)) {
+          output[key] = source[key];
+        } else {
+          output[key] = deepMerge(target[key], source[key]);
+        }
+      } else {
+        output[key] = source[key];
+      }
+    });
+  }
+
+  return output;
+}
+
+function isObject(item) {
+  return item && typeof item === "object" && !Array.isArray(item);
+}
+/**
+ * createTheme - creates a custom theme by merging with defaults
+ * @param {Object} options - Theme options to merge with defaults
+ * @returns {Object} Complete theme object
+ */
+
+
+function createTheme() {
+  let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  const theme = deepMerge(defaultTheme, options); // Rebuild breakpoint functions with merged values
+
+  theme.breakpoints.up = key => "@media (min-width:".concat(theme.breakpoints.values[key], "px)");
+
+  theme.breakpoints.down = key => "@media (max-width:".concat(theme.breakpoints.values[key] - 0.05, "px)");
+
+  theme.breakpoints.between = (start, end) => "@media (min-width:".concat(theme.breakpoints.values[start], "px) and (max-width:").concat(theme.breakpoints.values[end] - 0.05, "px)");
+
+  theme.breakpoints.only = key => {
+    const keys = theme.breakpoints.keys;
+    const idx = keys.indexOf(key);
+
+    if (idx === keys.length - 1) {
+      return theme.breakpoints.up(key);
+    }
+
+    return theme.breakpoints.between(key, keys[idx + 1]);
+  }; // Ensure spacing function uses merged value
+
+
+  const spacingInput = options.spacing;
+
+  if (typeof spacingInput === "number") {
+    theme.spacing = factor => "".concat(spacingInput * factor, "px");
+  } else if (typeof spacingInput === "function") {
+    theme.spacing = spacingInput;
+  }
+
+  return theme;
+}
+
+exports.createTheme = createTheme;
+exports["default"] = createTheme;

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

@@ -0,0 +1,164 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('@babel/runtime/helpers/extends');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var React = require('react');
+var sxToStyle = require('../neo-utils/sxToStyle.js');
+var ThemeProvider = require('./ThemeProvider.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const _excluded = ["sx", "style", "className"];
+
+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; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+const styleCache = new Map();
+let styleSheet = null;
+
+function getStyleSheet() {
+  if (styleSheet) return styleSheet; // Check for existing stylesheet
+
+  const existing = document.querySelector("style[data-blerp-sx]");
+
+  if (existing) {
+    styleSheet = existing.sheet;
+    return styleSheet;
+  } // Create new stylesheet
+
+
+  const style = document.createElement("style");
+  style.setAttribute("data-blerp-sx", "true");
+  document.head.appendChild(style);
+  styleSheet = style.sheet;
+  return styleSheet;
+}
+
+function injectStyles(className, pseudoStyles, nestedStyles, mediaQueries, themeColors) {
+  if (!className) {
+    return;
+  }
+
+  const hasStyles = pseudoStyles && Object.keys(pseudoStyles).length > 0 || nestedStyles && Object.keys(nestedStyles).length > 0 || mediaQueries && Object.keys(mediaQueries).length > 0;
+
+  if (!hasStyles) {
+    return;
+  } // Check cache
+
+
+  const cacheKey = className;
+
+  if (styleCache.has(cacheKey)) {
+    return;
+  } // Generate CSS
+
+
+  const css = sxToStyle.generatePseudoCSS(className, pseudoStyles, themeColors, nestedStyles, mediaQueries);
+
+  if (css) {
+    try {
+      const sheet = getStyleSheet(); // Split by newlines and insert each rule
+
+      css.split("\n").filter(Boolean).forEach(rule => {
+        try {
+          sheet.insertRule(rule.trim(), sheet.cssRules.length);
+        } catch (e) {
+          // Rule might be invalid, log for debugging but don't crash
+          if (process.env.NODE_ENV === "development") {
+            console.warn("Failed to insert CSS rule:", rule, e.message);
+          }
+        }
+      });
+      styleCache.set(cacheKey, true);
+    } catch (e) {
+      console.warn("Failed to inject styles:", e);
+    }
+  }
+}
+/**
+ * Higher-Order Component that adds MUI-compatible `sx` prop support
+ *
+ * Supports:
+ * - Regular style properties (margin, padding, color, etc.)
+ * - MUI shorthand props (m, p, mt, px, etc.)
+ * - Theme color references (color: "primary.main")
+ * - Pseudo-selectors (&:hover, &:disabled, etc.)
+ * - Nested selectors (.className, & > div, etc.)
+ * - Media queries (@media (max-width: 600px))
+ */
+
+function withSx(Component) {
+  const WrappedComponent = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) => {
+    let {
+      sx,
+      style,
+      className
+    } = _ref,
+        props = _objectWithoutProperties__default["default"](_ref, _excluded);
+
+    const {
+      colors
+    } = ThemeProvider.useTheme();
+    React.useId().replace(/:/g, ""); // Memoize the style conversion
+
+    const {
+      computedStyle,
+      pseudoClassName,
+      pseudoStyles,
+      nestedStyles,
+      mediaQueries
+    } = React.useMemo(() => {
+      if (!sx) {
+        return {
+          computedStyle: style || {},
+          pseudoClassName: "",
+          pseudoStyles: {},
+          nestedStyles: {},
+          mediaQueries: {}
+        };
+      }
+
+      const result = sxToStyle.sxToStyle(sx, colors);
+      return {
+        computedStyle: _objectSpread(_objectSpread({}, result.style), style),
+        pseudoClassName: result.pseudoClassName,
+        pseudoStyles: result.pseudoStyles,
+        nestedStyles: result.nestedStyles,
+        mediaQueries: result.mediaQueries
+      };
+    }, [sx, style, colors]); // Inject special styles (pseudo, nested, media queries)
+
+    React.useEffect(() => {
+      if (typeof window !== "undefined" && pseudoClassName) {
+        injectStyles(pseudoClassName, pseudoStyles, nestedStyles, mediaQueries, colors);
+      }
+    }, [pseudoClassName, pseudoStyles, nestedStyles, mediaQueries, colors]); // Also inject synchronously for SSR/initial render
+
+    if (typeof window !== "undefined" && pseudoClassName) {
+      injectStyles(pseudoClassName, pseudoStyles, nestedStyles, mediaQueries, colors);
+    } // Combine classNames
+
+
+    const combinedClassName = [className, pseudoClassName].filter(Boolean).join(" ") || undefined;
+    return /*#__PURE__*/React__default["default"].createElement(Component, _objectSpread({
+      ref,
+      style: computedStyle,
+      className: combinedClassName,
+      sx
+    }, props));
+  });
+  const componentName = typeof Component === "string" ? Component : Component.displayName || Component.name || "Component";
+  WrappedComponent.displayName = "withSx(".concat(componentName, ")");
+  return WrappedComponent;
+}
+
+exports["default"] = withSx;
+exports.withSx = withSx;