@blerp/design 1.3.17 → 1.4.1

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

@@ -0,0 +1,243 @@
+import _extends from '@babel/runtime/helpers/extends';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import React from 'react';
+import { withSx } from './withSx.js';
+
+const _excluded = ["elevation", "variant", "square", "children", "component", "style"],
+      _excluded2 = ["raised", "children", "style"],
+      _excluded3 = ["children", "component", "style"],
+      _excluded4 = ["disableSpacing", "children", "component", "style"],
+      _excluded5 = ["title", "subheader", "avatar", "action", "component", "style"],
+      _excluded6 = ["image", "src", "component", "alt", "height", "style", "children"];
+
+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(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; }
+/**
+ * Paper - Surface component with elevation (replaces MUI Paper)
+ */
+
+const BasePaper = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    elevation = 1,
+    variant = 'elevation',
+    square = false,
+    children,
+    component: Component = 'div',
+    style
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  // Box shadow values for different elevations
+  const elevationShadows = {
+    0: 'none',
+    1: '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)',
+    2: '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)',
+    3: '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)',
+    4: '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)',
+    6: '0px 3px 5px -1px rgba(0,0,0,0.2), 0px 6px 10px 0px rgba(0,0,0,0.14), 0px 1px 18px 0px rgba(0,0,0,0.12)',
+    8: '0px 5px 5px -3px rgba(0,0,0,0.2), 0px 8px 10px 1px rgba(0,0,0,0.14), 0px 3px 14px 2px rgba(0,0,0,0.12)',
+    12: '0px 7px 8px -4px rgba(0,0,0,0.2), 0px 12px 17px 2px rgba(0,0,0,0.14), 0px 5px 22px 4px rgba(0,0,0,0.12)',
+    16: '0px 8px 10px -5px rgba(0,0,0,0.2), 0px 16px 24px 2px rgba(0,0,0,0.14), 0px 6px 30px 5px rgba(0,0,0,0.12)',
+    24: '0px 11px 15px -7px rgba(0,0,0,0.2), 0px 24px 38px 3px rgba(0,0,0,0.14), 0px 9px 46px 8px rgba(0,0,0,0.12)'
+  };
+
+  const paperStyle = _objectSpread(_objectSpread(_objectSpread({
+    backgroundColor: 'var(--flyout-background, #fff)',
+    color: 'var(--body-text, #000)',
+    transition: 'box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms'
+  }, !square && {
+    borderRadius: '4px'
+  }), variant === 'outlined' ? {
+    border: '1px solid var(--border-color, rgba(0, 0, 0, 0.12))'
+  } : {
+    boxShadow: elevationShadows[elevation] || elevationShadows[1]
+  }), style);
+
+  return /*#__PURE__*/React.createElement(Component, _extends({
+    ref: ref,
+    style: paperStyle
+  }, props), children);
+});
+BasePaper.displayName = 'BasePaper';
+const Paper = withSx(BasePaper);
+/**
+ * Card - Card component built on Paper (replaces MUI Card)
+ */
+
+const BaseCard = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
+  let {
+    raised = false,
+    children,
+    style
+  } = _ref2,
+      props = _objectWithoutProperties(_ref2, _excluded2);
+
+  const cardStyle = _objectSpread({
+    overflow: 'hidden'
+  }, style);
+
+  return /*#__PURE__*/React.createElement(BasePaper, _extends({
+    ref: ref,
+    elevation: raised ? 8 : 1,
+    style: cardStyle
+  }, props), children);
+});
+BaseCard.displayName = 'BaseCard';
+const Card = withSx(BaseCard);
+/**
+ * CardContent - Content area for cards
+ */
+
+const BaseCardContent = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
+  let {
+    children,
+    component: Component = 'div',
+    style
+  } = _ref3,
+      props = _objectWithoutProperties(_ref3, _excluded3);
+
+  const contentStyle = _objectSpread({
+    padding: '16px',
+    '&:last-child': {
+      paddingBottom: '24px'
+    }
+  }, style);
+
+  return /*#__PURE__*/React.createElement(Component, _extends({
+    ref: ref,
+    style: contentStyle
+  }, props), children);
+});
+BaseCardContent.displayName = 'BaseCardContent';
+withSx(BaseCardContent);
+/**
+ * CardActions - Action area for cards
+ */
+
+const BaseCardActions = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
+  let {
+    disableSpacing = false,
+    children,
+    component: Component = 'div',
+    style
+  } = _ref4,
+      props = _objectWithoutProperties(_ref4, _excluded4);
+
+  const actionsStyle = _objectSpread(_objectSpread({
+    display: 'flex',
+    alignItems: 'center',
+    padding: '8px'
+  }, !disableSpacing && {
+    gap: '8px'
+  }), style);
+
+  return /*#__PURE__*/React.createElement(Component, _extends({
+    ref: ref,
+    style: actionsStyle
+  }, props), children);
+});
+BaseCardActions.displayName = 'BaseCardActions';
+withSx(BaseCardActions);
+/**
+ * CardHeader - Header area for cards
+ */
+
+const BaseCardHeader = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
+  let {
+    title,
+    subheader,
+    avatar,
+    action,
+    component: Component = 'div',
+    style
+  } = _ref5,
+      props = _objectWithoutProperties(_ref5, _excluded5);
+
+  const headerStyle = _objectSpread({
+    display: 'flex',
+    alignItems: 'center',
+    padding: '16px'
+  }, style);
+
+  return /*#__PURE__*/React.createElement(Component, _extends({
+    ref: ref,
+    style: headerStyle
+  }, props), avatar && /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginRight: '16px'
+    }
+  }, avatar), /*#__PURE__*/React.createElement("div", {
+    style: {
+      flex: 1
+    }
+  }, title && /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontWeight: 500,
+      fontSize: '1rem'
+    }
+  }, title), subheader && /*#__PURE__*/React.createElement("div", {
+    style: {
+      color: 'var(--secondary-text)',
+      fontSize: '0.875rem'
+    }
+  }, subheader)), action && /*#__PURE__*/React.createElement("div", null, action));
+});
+BaseCardHeader.displayName = 'BaseCardHeader';
+withSx(BaseCardHeader);
+/**
+ * CardMedia - Media area for cards (images, videos, etc.)
+ */
+
+const BaseCardMedia = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
+  let {
+    image,
+    src,
+    component = 'div',
+    alt = '',
+    height,
+    style,
+    children
+  } = _ref6,
+      props = _objectWithoutProperties(_ref6, _excluded6);
+
+  const imageSrc = image || src; // If component is img, render as img
+
+  if (component === 'img') {
+    return /*#__PURE__*/React.createElement("img", _extends({
+      ref: ref,
+      src: imageSrc,
+      alt: alt,
+      style: _objectSpread({
+        display: 'block',
+        width: '100%',
+        height,
+        objectFit: 'cover'
+      }, style)
+    }, props));
+  } // Otherwise render as div with background image
+
+
+  const Component = component;
+
+  const mediaStyle = _objectSpread(_objectSpread(_objectSpread({
+    display: 'block',
+    backgroundSize: 'cover',
+    backgroundRepeat: 'no-repeat',
+    backgroundPosition: 'center'
+  }, imageSrc && {
+    backgroundImage: "url(\"".concat(imageSrc, "\")")
+  }), height && {
+    height
+  }), style);
+
+  return /*#__PURE__*/React.createElement(Component, _extends({
+    ref: ref,
+    style: mediaStyle
+  }, props), children);
+});
+BaseCardMedia.displayName = 'BaseCardMedia';
+withSx(BaseCardMedia);
+
+export { Card, Paper, Paper as default };

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

@@ -0,0 +1,182 @@
+import _extends from '@babel/runtime/helpers/extends';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import React, { useMemo } from 'react';
+import { withSx } from './withSx.js';
+
+const _excluded = ["direction", "spacing", "alignItems", "justifyContent", "flexWrap", "divider", "useFlexGap", "children", "component", "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(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; }
+/**
+ * Props that MUI Stack accepts directly and converts to styles
+ * These get extracted from props and merged into the style object
+ */
+
+const STYLE_PROPS = [// Sizing
+'width', 'height', 'minWidth', 'maxWidth', 'minHeight', 'maxHeight', // Margin (MUI shorthand)
+'m', 'mt', 'mr', 'mb', 'ml', 'mx', 'my', 'margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', // Padding (MUI shorthand)
+'p', 'pt', 'pr', 'pb', 'pl', 'px', 'py', 'padding', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft', // Positioning
+'position', 'top', 'right', 'bottom', 'left', 'zIndex', // Display/Visibility
+'display', 'overflow', 'overflowX', 'overflowY', 'visibility', // Flex item props
+'flex', 'flexGrow', 'flexShrink', 'flexBasis', 'alignSelf', 'order', // Background
+'bgcolor', 'backgroundColor', 'background', // Border
+'border', 'borderTop', 'borderRight', 'borderBottom', 'borderLeft', 'borderColor', 'borderRadius', // Other common ones
+'boxShadow', 'opacity', 'cursor', 'gap']; // MUI spacing shorthand mapping
+
+const SPACING_MAP = {
+  m: 'margin',
+  mt: 'marginTop',
+  mr: 'marginRight',
+  mb: 'marginBottom',
+  ml: 'marginLeft',
+  p: 'padding',
+  pt: 'paddingTop',
+  pr: 'paddingRight',
+  pb: 'paddingBottom',
+  pl: 'paddingLeft',
+  bgcolor: 'backgroundColor'
+}; // Props that need mx/my expansion
+
+const AXIS_PROPS = {
+  mx: ['marginLeft', 'marginRight'],
+  my: ['marginTop', 'marginBottom'],
+  px: ['paddingLeft', 'paddingRight'],
+  py: ['paddingTop', 'paddingBottom']
+};
+const SPACING_UNIT = 8;
+/**
+ * Convert a spacing value - numbers get multiplied by 8px
+ */
+
+function parseSpacingValue(value) {
+  if (typeof value === 'number') {
+    return "".concat(value * SPACING_UNIT, "px");
+  }
+
+  return value;
+}
+/**
+ * Extract style props from props object
+ * Returns { styleProps, otherProps }
+ */
+
+
+function extractStyleProps(props) {
+  const styleProps = {};
+  const otherProps = {};
+
+  for (const [key, value] of Object.entries(props)) {
+    if (value === undefined || value === null) {
+      continue;
+    }
+
+    if (STYLE_PROPS.includes(key)) {
+      // Map shorthand to full property name
+      const cssKey = SPACING_MAP[key] || key; // Handle spacing values (numbers become px)
+
+      const isSpacingProp = ['m', 'mt', 'mr', 'mb', 'ml', 'mx', 'my', 'p', 'pt', 'pr', 'pb', 'pl', 'px', 'py', 'margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'padding', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft', 'gap'].includes(key);
+      const processedValue = isSpacingProp ? parseSpacingValue(value) : value;
+      styleProps[cssKey] = processedValue;
+    } else if (AXIS_PROPS[key]) {
+      // Handle mx, my, px, py - expand to both axes
+      const [prop1, prop2] = AXIS_PROPS[key];
+      const processedValue = parseSpacingValue(value);
+      styleProps[prop1] = processedValue;
+      styleProps[prop2] = processedValue;
+    } else {
+      otherProps[key] = value;
+    }
+  }
+
+  return {
+    styleProps,
+    otherProps
+  };
+}
+/**
+ * Stack - Flexbox layout component (replaces MUI Stack)
+ * Arranges children in a row or column with consistent spacing
+ * 
+ * @param {string} direction - 'row' | 'column' | 'row-reverse' | 'column-reverse'
+ * @param {number|string} spacing - Gap between children (number = multiplied by 8px)
+ * @param {string} alignItems - CSS align-items value
+ * @param {string} justifyContent - CSS justify-content value
+ * @param {string} flexWrap - CSS flex-wrap value
+ * @param {ReactNode} divider - Element to render between children
+ * @param {boolean} useFlexGap - Whether to use CSS gap (default: true)
+ * @param {string|Component} component - The root element type (default: 'div')
+ * 
+ * Also accepts direct style props like MUI:
+ * - Sizing: width, height, minWidth, maxWidth, minHeight, maxHeight
+ * - Spacing: m, mt, mr, mb, ml, mx, my, p, pt, pr, pb, pl, px, py (numbers = 8px units)
+ * - Position: position, top, right, bottom, left, zIndex
+ * - And more: bgcolor, border, borderRadius, boxShadow, opacity, etc.
+ */
+
+
+const BaseStack = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    direction = 'column',
+    spacing = 0,
+    alignItems,
+    justifyContent,
+    flexWrap,
+    divider,
+    useFlexGap = true,
+    children,
+    component: Component = 'div',
+    style
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  // Extract style props from remaining props
+  const {
+    styleProps,
+    otherProps
+  } = useMemo(() => extractStyleProps(props), [props]); // Convert spacing to pixels (MUI uses 8px unit)
+
+  const gap = typeof spacing === 'number' ? "".concat(spacing * SPACING_UNIT, "px") : spacing;
+  const stackStyle = useMemo(() => _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
+    display: 'flex',
+    flexDirection: direction
+  }, useFlexGap && spacing ? {
+    gap
+  } : {}), alignItems && {
+    alignItems
+  }), justifyContent && {
+    justifyContent
+  }), flexWrap && {
+    flexWrap
+  }), styleProps), style), [direction, gap, alignItems, justifyContent, flexWrap, styleProps, style, useFlexGap, spacing]); // Handle divider prop - insert divider between each child
+
+  if (divider && React.Children.count(children) > 1) {
+    const childArray = React.Children.toArray(children).filter(Boolean);
+    const childrenWithDividers = [];
+    childArray.forEach((child, index) => {
+      childrenWithDividers.push(child);
+
+      if (index < childArray.length - 1) {
+        childrenWithDividers.push( /*#__PURE__*/React.cloneElement(divider, {
+          key: "divider-".concat(index),
+          'aria-hidden': true
+        }));
+      }
+    });
+    return /*#__PURE__*/React.createElement(Component, _extends({
+      ref: ref,
+      style: stackStyle
+    }, otherProps), childrenWithDividers);
+  }
+
+  return /*#__PURE__*/React.createElement(Component, _extends({
+    ref: ref,
+    style: stackStyle
+  }, otherProps), children);
+});
+BaseStack.displayName = 'BaseStack'; // Export with sx prop support
+
+const Stack = withSx(BaseStack);
+
+export { Stack, Stack as default };

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

@@ -0,0 +1,278 @@
+import _extends from '@babel/runtime/helpers/extends';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import React from 'react';
+import { withSx } from './withSx.js';
+
+const _excluded = ["activeStep", "alternativeLabel", "children", "connector", "nonLinear", "orientation", "className", "style"],
+      _excluded2 = ["active", "completed", "disabled", "index", "alternativeLabel", "orientation", "children", "className", "style"],
+      _excluded3 = ["active", "completed", "disabled", "index", "icon", "optional", "StepIconComponent", "StepIconProps", "children", "className", "style"],
+      _excluded4 = ["active", "children", "TransitionComponent", "transitionDuration", "className", "style"],
+      _excluded5 = ["active", "completed", "disabled", "index", "icon", "optional", "children", "onClick", "className", "style"],
+      _excluded6 = ["orientation", "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(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; }
+/**
+ * Stepper - displays progress through a sequence of steps
+ */
+
+const StepperBase = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    activeStep = 0,
+    alternativeLabel = false,
+    children,
+    connector,
+    nonLinear = false,
+    orientation = "horizontal",
+    className,
+    style
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  const baseStyle = _objectSpread({
+    display: "flex",
+    flexDirection: orientation === "vertical" ? "column" : "row",
+    alignItems: alternativeLabel ? "flex-start" : "center"
+  }, style);
+
+  const steps = React.Children.toArray(children);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: ref,
+    className: className,
+    style: baseStyle
+  }, props), steps.map((step, index) => /*#__PURE__*/React.createElement(React.Fragment, {
+    key: index
+  }, /*#__PURE__*/React.cloneElement(step, {
+    index,
+    active: activeStep === index,
+    completed: activeStep > index,
+    disabled: !nonLinear && activeStep < index,
+    alternativeLabel,
+    orientation
+  }), index < steps.length - 1 && (connector || /*#__PURE__*/React.createElement(StepConnector, {
+    orientation: orientation
+  })))));
+});
+StepperBase.displayName = "Stepper";
+const Stepper = withSx(StepperBase);
+/**
+ * Step - individual step in a Stepper
+ */
+
+const StepBase = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
+  let {
+    active = false,
+    completed = false,
+    disabled = false,
+    index,
+    alternativeLabel,
+    orientation,
+    children,
+    className,
+    style
+  } = _ref2,
+      props = _objectWithoutProperties(_ref2, _excluded2);
+
+  const baseStyle = _objectSpread({
+    display: "flex",
+    flexDirection: alternativeLabel ? "column" : "row",
+    alignItems: "center",
+    flex: orientation === "horizontal" ? 1 : undefined,
+    opacity: disabled ? 0.5 : 1
+  }, style);
+
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: ref,
+    className: className,
+    style: baseStyle
+  }, props), React.Children.map(children, child => /*#__PURE__*/React.isValidElement(child) ? /*#__PURE__*/React.cloneElement(child, {
+    active,
+    completed,
+    disabled,
+    index
+  }) : child));
+});
+StepBase.displayName = "Step";
+withSx(StepBase);
+/**
+ * StepLabel - label for a Step
+ */
+
+const StepLabelBase = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
+  let {
+    active,
+    completed,
+    disabled,
+    index,
+    icon,
+    optional,
+    StepIconComponent,
+    StepIconProps,
+    children,
+    className,
+    style
+  } = _ref3,
+      props = _objectWithoutProperties(_ref3, _excluded3);
+
+  const baseStyle = _objectSpread({
+    display: "flex",
+    alignItems: "center",
+    gap: 8
+  }, style);
+
+  const iconStyle = {
+    width: 24,
+    height: 24,
+    borderRadius: "50%",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontSize: 12,
+    fontWeight: 600,
+    backgroundColor: completed ? "#7C4DFF" : active ? "#7C4DFF" : "#BDBDBD",
+    color: "#FFFFFF"
+  };
+  const labelStyle = {
+    color: disabled ? "#BDBDBD" : active ? "#000000" : "#757575",
+    fontWeight: active ? 600 : 400
+  };
+  const IconComponent = StepIconComponent;
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: ref,
+    className: className,
+    style: baseStyle
+  }, props), IconComponent ? /*#__PURE__*/React.createElement(IconComponent, _extends({
+    active: active,
+    completed: completed,
+    icon: index + 1
+  }, StepIconProps)) : icon ? icon : /*#__PURE__*/React.createElement("span", {
+    style: iconStyle
+  }, completed ? "✓" : index + 1), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+    style: labelStyle
+  }, children), optional && /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: 12,
+      color: "#757575"
+    }
+  }, optional)));
+});
+StepLabelBase.displayName = "StepLabel";
+const StepLabel = withSx(StepLabelBase);
+/**
+ * StepContent - content for vertical steppers
+ */
+
+const StepContentBase = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
+  let {
+    active,
+    children,
+    TransitionComponent,
+    transitionDuration,
+    className,
+    style
+  } = _ref4,
+      props = _objectWithoutProperties(_ref4, _excluded4);
+
+  const baseStyle = _objectSpread({
+    marginLeft: 12,
+    paddingLeft: 20,
+    borderLeft: "1px solid #BDBDBD",
+    display: active ? "block" : "none"
+  }, style);
+
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: ref,
+    className: className,
+    style: baseStyle
+  }, props), children);
+});
+StepContentBase.displayName = "StepContent";
+withSx(StepContentBase);
+/**
+ * StepButton - clickable step for non-linear steppers
+ */
+
+const StepButtonBase = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
+  let {
+    active,
+    completed,
+    disabled,
+    index,
+    icon,
+    optional,
+    children,
+    onClick,
+    className,
+    style
+  } = _ref5,
+      props = _objectWithoutProperties(_ref5, _excluded5);
+
+  const baseStyle = _objectSpread({
+    display: "flex",
+    alignItems: "center",
+    gap: 8,
+    background: "none",
+    border: "none",
+    cursor: disabled ? "not-allowed" : "pointer",
+    padding: 8,
+    borderRadius: 4,
+    transition: "background-color 0.2s"
+  }, style);
+
+  return /*#__PURE__*/React.createElement("button", _extends({
+    ref: ref,
+    className: className,
+    style: baseStyle,
+    onClick: onClick,
+    disabled: disabled
+  }, props), /*#__PURE__*/React.createElement(StepLabel, {
+    active: active,
+    completed: completed,
+    disabled: disabled,
+    index: index,
+    icon: icon,
+    optional: optional
+  }, children));
+});
+StepButtonBase.displayName = "StepButton";
+withSx(StepButtonBase);
+/**
+ * StepConnector - line between steps
+ */
+
+const StepConnectorBase = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
+  let {
+    orientation = "horizontal",
+    className,
+    style
+  } = _ref6,
+      props = _objectWithoutProperties(_ref6, _excluded6);
+
+  const baseStyle = _objectSpread({
+    flex: orientation === "horizontal" ? 1 : undefined,
+    height: orientation === "vertical" ? 24 : undefined,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  }, style);
+
+  const lineStyle = {
+    width: orientation === "horizontal" ? "100%" : 1,
+    height: orientation === "horizontal" ? 1 : "100%",
+    backgroundColor: "#BDBDBD",
+    margin: orientation === "horizontal" ? "0 8px" : "8px 0"
+  };
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: ref,
+    className: className,
+    style: baseStyle
+  }, props), /*#__PURE__*/React.createElement("span", {
+    style: lineStyle
+  }));
+});
+StepConnectorBase.displayName = "StepConnector";
+const StepConnector = withSx(StepConnectorBase);
+
+export { StepConnector, StepLabel, Stepper };