@ceed/ads 1.13.3 → 1.15.0-next.1

package/dist/components/surfaces/llms.txt

@@ -0,0 +1,12 @@
+# surfaces
+
+## Documentation
+
+- [Accordions](./Accordions.md)
+- [Card](./Card.md)
+- [Divider](./Divider.md)
+- [Sheet](./Sheet.md)
+
+## Parent
+
+- [Parent](../llms.txt)

package/dist/index.cjs

@@ -746,11 +746,7 @@ var Menu = (props) => {
   return /* @__PURE__ */ import_react8.default.createElement(MotionMenu, { ...props });
 };
 Menu.displayName = "Menu";
-var MotionMenuItem = (0, import_framer_motion10.motion)(import_joy13.MenuItem);
-var MenuItem = (props) => {
-  return /* @__PURE__ */ import_react8.default.createElement(MotionMenuItem, { ...props });
-};
-MenuItem.displayName = "MenuItem";
+var MenuItem = import_joy13.MenuItem;
 
 // src/components/Menu/index.ts
 var Menu_default = Menu;
@@ -1568,6 +1564,8 @@ var import_react16 = __toESM(require("react"));
 var import_joy22 = require("@mui/joy");
 var import_framer_motion15 = require("framer-motion");
 var import_Close2 = __toESM(require("@mui/icons-material/Close"));
+var import_Visibility = __toESM(require("@mui/icons-material/Visibility"));
+var import_VisibilityOff = __toESM(require("@mui/icons-material/VisibilityOff"));
 var MotionInput = (0, import_framer_motion15.motion)(import_joy22.Input);
 var Input = import_react16.default.forwardRef((props, ref) => {
   const {
@@ -1581,12 +1579,18 @@ var Input = import_react16.default.forwardRef((props, ref) => {
     required,
     onChange,
     name,
+    type,
     // NOTE: 스타일 관련된 props는 최상위 엘리먼트에 적용한다.
     sx,
     className,
     enableClearable,
+    disableTogglePasswordButton,
     ...innerProps
   } = props;
+  if (type === "password" && innerProps.endDecorator) {
+    console.warn('Input: endDecorator is not supported when type="password"');
+  }
+  const [passwordVisible, setPasswordVisible] = (0, import_react16.useState)(false);
   const [value, setValue] = useControlledState(
     props.value,
     props.defaultValue,
@@ -1610,6 +1614,12 @@ var Input = import_react16.default.forwardRef((props, ref) => {
   const handleClear = () => {
     setValue(props.defaultValue || "");
   };
+  const handleTogglePasswordVisibility = () => {
+    setPasswordVisible((prev) => !prev);
+  };
+  const actualType = type === "password" && passwordVisible ? "text" : type;
+  const isPasswordType = type === "password";
+  const showPasswordToggle = isPasswordType && !disableTogglePasswordButton;
   const input = /* @__PURE__ */ import_react16.default.createElement(
     MotionInput,
     {
@@ -1619,12 +1629,22 @@ var Input = import_react16.default.forwardRef((props, ref) => {
       required,
       color: error ? "danger" : color,
       disabled,
+      type: actualType,
       slotProps: {
         input: { ref, ...innerProps.slotProps?.input },
         ...innerProps.slotProps
       },
       ...innerProps,
-      endDecorator: enableClearable ? /* @__PURE__ */ import_react16.default.createElement(Stack_default, { gap: 1, direction: "row" }, innerProps.endDecorator, value && /* @__PURE__ */ import_react16.default.createElement(
+      endDecorator: isPasswordType ? showPasswordToggle ? /* @__PURE__ */ import_react16.default.createElement(Stack_default, { gap: 1, direction: "row" }, /* @__PURE__ */ import_react16.default.createElement(
+        IconButton_default,
+        {
+          onMouseDown: (e) => e.preventDefault(),
+          onClick: handleTogglePasswordVisibility,
+          disabled,
+          "aria-label": passwordVisible ? "Hide password" : "Show password"
+        },
+        passwordVisible ? /* @__PURE__ */ import_react16.default.createElement(import_VisibilityOff.default, null) : /* @__PURE__ */ import_react16.default.createElement(import_Visibility.default, null)
+      )) : null : enableClearable ? /* @__PURE__ */ import_react16.default.createElement(Stack_default, { gap: 1, direction: "row" }, innerProps.endDecorator, value && /* @__PURE__ */ import_react16.default.createElement(
         IconButton_default,
         {
           onMouseDown: (e) => e.preventDefault(),
@@ -6497,11 +6517,15 @@ function Stepper(props) {
     inactiveColor = "neutral.400",
     activeLineColor = "primary.500",
     inactiveLineColor = "neutral.300",
-    activeStep
+    activeStep,
+    orientation = "horizontal",
+    stepOrientation = "horizontal"
   } = props;
+  const effectiveStepOrientation = orientation === "vertical" ? "horizontal" : stepOrientation;
   return /* @__PURE__ */ import_react55.default.createElement(
     MotionStepper,
     {
+      orientation,
       sx: (theme) => ({
         "--StepIndicator-size": "24px",
         "--Step-gap": theme.spacing(2),
@@ -6523,7 +6547,11 @@ function Stepper(props) {
         [`& .${import_joy66.stepClasses.disabled}`]: {
           "&::after": { bgcolor: inactiveLineColor },
           [`& .${import_joy66.stepIndicatorClasses.root}`]: {
-            bgcolor: inactiveColor
+            bgcolor: theme.vars.palette.background.surface,
+            borderColor: theme.vars.palette.neutral.outlinedBorder,
+            borderWidth: "1px",
+            borderStyle: "solid",
+            color: theme.vars.palette.neutral.plainColor
           }
         }
       })
@@ -6537,12 +6565,20 @@ function Stepper(props) {
         Step,
         {
           key: `step-${i}`,
-          indicator: /* @__PURE__ */ import_react55.default.createElement(StepIndicator, { variant: "solid", color: "primary" }, completed ? /* @__PURE__ */ import_react55.default.createElement(import_Check.default, null) : step.indicatorContent),
+          indicator: /* @__PURE__ */ import_react55.default.createElement(StepIndicator, { variant: disabled ? "outlined" : "solid", color: disabled ? "neutral" : "primary" }, completed ? /* @__PURE__ */ import_react55.default.createElement(import_Check.default, null) : step.indicatorContent),
           active,
           completed,
-          disabled
+          disabled,
+          orientation: effectiveStepOrientation
         },
-        hasContent && /* @__PURE__ */ import_react55.default.createElement(Stack_default, null, step.label && /* @__PURE__ */ import_react55.default.createElement(Typography_default, { level: "title-sm" }, step.label), step.extraContent && /* @__PURE__ */ import_react55.default.createElement(Typography_default, { level: "body-xs" }, step.extraContent))
+        hasContent && /* @__PURE__ */ import_react55.default.createElement(
+          Stack_default,
+          {
+            sx: orientation === "horizontal" && effectiveStepOrientation === "vertical" ? { alignItems: "center" } : {}
+          },
+          step.label && /* @__PURE__ */ import_react55.default.createElement(Typography_default, { level: "title-sm" }, step.label),
+          step.extraContent && /* @__PURE__ */ import_react55.default.createElement(Typography_default, { level: "body-xs" }, step.extraContent)
+        )
       );
     })
   );

package/dist/index.js

@@ -653,11 +653,7 @@ var Menu = (props) => {
   return /* @__PURE__ */ React7.createElement(MotionMenu, { ...props });
 };
 Menu.displayName = "Menu";
-var MotionMenuItem = motion10(JoyMenuItem);
-var MenuItem = (props) => {
-  return /* @__PURE__ */ React7.createElement(MotionMenuItem, { ...props });
-};
-MenuItem.displayName = "MenuItem";
+var MenuItem = JoyMenuItem;
 
 // src/components/Menu/index.ts
 var Menu_default = Menu;
@@ -1472,15 +1468,17 @@ var Container = forwardRef5(function Container2(props, ref) {
 Container.displayName = "Container";
 
 // src/components/CurrencyInput/CurrencyInput.tsx
-import React15, { useCallback as useCallback6, useMemo as useMemo5, useState as useState4 } from "react";
+import React15, { useCallback as useCallback6, useMemo as useMemo5, useState as useState5 } from "react";
 import { IntlMessageFormat as IntlMessageFormat2 } from "intl-messageformat";
 import { NumericFormat } from "react-number-format";
 
 // src/components/Input/Input.tsx
-import React14, { useCallback as useCallback5 } from "react";
+import React14, { useCallback as useCallback5, useState as useState4 } from "react";
 import { Input as JoyInput } from "@mui/joy";
 import { motion as motion15 } from "framer-motion";
 import ClearIcon from "@mui/icons-material/Close";
+import VisibilityIcon from "@mui/icons-material/Visibility";
+import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
 var MotionInput = motion15(JoyInput);
 var Input = React14.forwardRef((props, ref) => {
   const {
@@ -1494,12 +1492,18 @@ var Input = React14.forwardRef((props, ref) => {
     required,
     onChange,
     name,
+    type,
     // NOTE: 스타일 관련된 props는 최상위 엘리먼트에 적용한다.
     sx,
     className,
     enableClearable,
+    disableTogglePasswordButton,
     ...innerProps
   } = props;
+  if (type === "password" && innerProps.endDecorator) {
+    console.warn('Input: endDecorator is not supported when type="password"');
+  }
+  const [passwordVisible, setPasswordVisible] = useState4(false);
   const [value, setValue] = useControlledState(
     props.value,
     props.defaultValue,
@@ -1523,6 +1527,12 @@ var Input = React14.forwardRef((props, ref) => {
   const handleClear = () => {
     setValue(props.defaultValue || "");
   };
+  const handleTogglePasswordVisibility = () => {
+    setPasswordVisible((prev) => !prev);
+  };
+  const actualType = type === "password" && passwordVisible ? "text" : type;
+  const isPasswordType = type === "password";
+  const showPasswordToggle = isPasswordType && !disableTogglePasswordButton;
   const input = /* @__PURE__ */ React14.createElement(
     MotionInput,
     {
@@ -1532,12 +1542,22 @@ var Input = React14.forwardRef((props, ref) => {
       required,
       color: error ? "danger" : color,
       disabled,
+      type: actualType,
       slotProps: {
         input: { ref, ...innerProps.slotProps?.input },
         ...innerProps.slotProps
       },
       ...innerProps,
-      endDecorator: enableClearable ? /* @__PURE__ */ React14.createElement(Stack_default, { gap: 1, direction: "row" }, innerProps.endDecorator, value && /* @__PURE__ */ React14.createElement(
+      endDecorator: isPasswordType ? showPasswordToggle ? /* @__PURE__ */ React14.createElement(Stack_default, { gap: 1, direction: "row" }, /* @__PURE__ */ React14.createElement(
+        IconButton_default,
+        {
+          onMouseDown: (e) => e.preventDefault(),
+          onClick: handleTogglePasswordVisibility,
+          disabled,
+          "aria-label": passwordVisible ? "Hide password" : "Show password"
+        },
+        passwordVisible ? /* @__PURE__ */ React14.createElement(VisibilityOffIcon, null) : /* @__PURE__ */ React14.createElement(VisibilityIcon, null)
+      )) : null : enableClearable ? /* @__PURE__ */ React14.createElement(Stack_default, { gap: 1, direction: "row" }, innerProps.endDecorator, value && /* @__PURE__ */ React14.createElement(
         IconButton_default,
         {
           onMouseDown: (e) => e.preventDefault(),
@@ -1790,7 +1810,7 @@ var CurrencyInput = React15.forwardRef(function CurrencyInput2(inProps, ref) {
     }
     return props.max;
   }, [props.max, useMinorUnit, decimalScale]);
-  const [isOverLimit, setIsOverLimit] = useState4(!!max && !!value && value > max);
+  const [isOverLimit, setIsOverLimit] = useState5(!!max && !!value && value > max);
   const handleChange = useCallback6(
     (event) => {
       if (event.target.value === "") {
@@ -2108,7 +2128,7 @@ var Resizer = (ref, targetRef = ref) => /* @__PURE__ */ React16.createElement(
 // src/components/DataTable/components.tsx
 import React22, {
   useRef as useRef4,
-  useState as useState6,
+  useState as useState7,
   useLayoutEffect,
   useMemo as useMemo8,
   useCallback as useCallback8,
@@ -2120,7 +2140,7 @@ import { styled as styled12, useTheme } from "@mui/joy";
 import { AnimatePresence as AnimatePresence2 } from "framer-motion";
 
 // src/components/DatePicker/DatePicker.tsx
-import React17, { forwardRef as forwardRef6, useCallback as useCallback7, useEffect as useEffect3, useImperativeHandle, useRef as useRef3, useState as useState5 } from "react";
+import React17, { forwardRef as forwardRef6, useCallback as useCallback7, useEffect as useEffect3, useImperativeHandle, useRef as useRef3, useState as useState6 } from "react";
 import { IMaskInput, IMask } from "react-imask";
 import CalendarTodayIcon from "@mui/icons-material/CalendarToday";
 import { styled as styled10, useThemeProps as useThemeProps4 } from "@mui/joy";
@@ -2301,10 +2321,10 @@ var DatePicker = forwardRef6((inProps, ref) => {
     props.defaultValue || "",
     useCallback7((value2) => onChange?.({ target: { name: props.name, value: value2 } }), [props.name, onChange])
   );
-  const [displayValue, setDisplayValue] = useState5(
+  const [displayValue, setDisplayValue] = useState6(
     () => value ? formatValueString(parseDate(value, format), displayFormat) : ""
   );
-  const [anchorEl, setAnchorEl] = useState5(null);
+  const [anchorEl, setAnchorEl] = useState6(null);
   const open = Boolean(anchorEl);
   useEffect3(() => {
     if (!anchorEl) {
@@ -2675,7 +2695,7 @@ var InfoSign_default = InfoSign;
 // src/components/DataTable/components.tsx
 var TextEllipsis = ({ children }) => {
   const textRef = useRef4(null);
-  const [showTooltip, setShowTooltip] = useState6(false);
+  const [showTooltip, setShowTooltip] = useState7(false);
   useLayoutEffect(() => {
     const element = textRef.current;
     if (element) {
@@ -2691,7 +2711,7 @@ var TextEllipsis = ({ children }) => {
 };
 var CellTextEllipsis = ({ children }) => {
   const textRef = useRef4(null);
-  const [showTooltip, setShowTooltip] = useState6(false);
+  const [showTooltip, setShowTooltip] = useState7(false);
   useLayoutEffect(() => {
     const element = textRef.current;
     if (element) {
@@ -2743,7 +2763,7 @@ var HeadCell = (props) => {
   const theme = useTheme();
   const ref = headerRef;
   const colRef = tableColRef;
-  const [isHovered, setIsHovered] = useState6(false);
+  const [isHovered, setIsHovered] = useState7(false);
   const sortable = type === "actions" ? false : _sortable;
   const headId = useMemo8(
     () => `${tableId}_header_${headerName ?? field}`.trim(),
@@ -2857,7 +2877,7 @@ var BodyCell = (props) => {
     onCellEditStop
   } = props;
   const theme = useTheme();
-  const [value, setValue] = useState6(row[field]);
+  const [value, setValue] = useState7(row[field]);
   const cellRef = useRef4(null);
   const params = useMemo8(
     () => ({
@@ -3073,9 +3093,9 @@ var VirtualizedTableRow = memo(StyledTableRow2, (prevProps, nextProps) => {
 });
 
 // src/components/DataTable/hooks.ts
-import { useState as useState7, useLayoutEffect as useLayoutEffect2, useRef as useRef5, useMemo as useMemo9, useCallback as useCallback9, useEffect as useEffect5, createRef } from "react";
+import { useState as useState8, useLayoutEffect as useLayoutEffect2, useRef as useRef5, useMemo as useMemo9, useCallback as useCallback9, useEffect as useEffect5, createRef } from "react";
 function useColumnWidths(columnsByField) {
-  const [widths, setWidths] = useState7({});
+  const [widths, setWidths] = useState8({});
   const roRef = useRef5();
   useLayoutEffect2(() => {
     if (roRef.current) roRef.current.disconnect();
@@ -3133,7 +3153,7 @@ function useDataTableRenderer({
   }
   const onSelectionModelChangeRef = useRef5(onSelectionModelChange);
   onSelectionModelChangeRef.current = onSelectionModelChange;
-  const [focusedRowId, setFocusedRowId] = useState7(null);
+  const [focusedRowId, setFocusedRowId] = useState8(null);
   const [sortModel, setSortModel] = useControlledState(
     controlledSortModel,
     initialState?.sorting?.sortModel ?? [],
@@ -3193,7 +3213,7 @@ function useDataTableRenderer({
     () => Array.from(new Set(_sortOrder || ["asc", "desc", null])),
     [_sortOrder]
   );
-  const [page, setPage] = useState7(paginationModel?.page || 1);
+  const [page, setPage] = useState8(paginationModel?.page || 1);
   const pageSize = paginationModel?.pageSize || 20;
   const getId = useCallback9(
     (row, index) => _getId?.(row) ?? row.id ?? `${(index || 0) + (page - 1) * pageSize}`,
@@ -3932,7 +3952,7 @@ var DataTable = forwardRef7(Component);
 DataTable.displayName = "DataTable";
 
 // src/components/DateRangePicker/DateRangePicker.tsx
-import React26, { forwardRef as forwardRef8, useCallback as useCallback12, useEffect as useEffect7, useImperativeHandle as useImperativeHandle3, useMemo as useMemo11, useRef as useRef7, useState as useState8 } from "react";
+import React26, { forwardRef as forwardRef8, useCallback as useCallback12, useEffect as useEffect7, useImperativeHandle as useImperativeHandle3, useMemo as useMemo11, useRef as useRef7, useState as useState9 } from "react";
 import { IMaskInput as IMaskInput2, IMask as IMask2 } from "react-imask";
 import CalendarTodayIcon2 from "@mui/icons-material/CalendarToday";
 import { styled as styled14, useThemeProps as useThemeProps5 } from "@mui/joy";
@@ -4100,10 +4120,10 @@ var DateRangePicker = forwardRef8((inProps, ref) => {
     props.defaultValue || "",
     useCallback12((value2) => onChange?.({ target: { name: props.name, value: value2 } }), [props.name, onChange])
   );
-  const [displayValue, setDisplayValue] = useState8(
+  const [displayValue, setDisplayValue] = useState9(
     () => value ? formatValueString2(parseDates(value, format), displayFormat) : ""
   );
-  const [anchorEl, setAnchorEl] = useState8(null);
+  const [anchorEl, setAnchorEl] = useState9(null);
   const open = Boolean(anchorEl);
   const calendarValue = useMemo11(
     () => value ? parseDates(value, format) : void 0,
@@ -4462,7 +4482,7 @@ function RadioGroup2(props) {
 RadioGroup2.displayName = "RadioGroup";
 
 // src/components/FilterMenu/components/DateRange.tsx
-import React32, { useCallback as useCallback15, useMemo as useMemo12, useState as useState9, useEffect as useEffect8 } from "react";
+import React32, { useCallback as useCallback15, useMemo as useMemo12, useState as useState10, useEffect as useEffect8 } from "react";
 import { Stack as Stack4 } from "@mui/joy";
 function DateRange(props) {
   const {
@@ -4481,7 +4501,7 @@ function DateRange(props) {
     hideClearButton
   } = props;
   const [internalValue, setInternalValue] = useControlledState(value, null, onChange);
-  const [selectedOption, setSelectedOption] = useState9("all-time");
+  const [selectedOption, setSelectedOption] = useState10("all-time");
   const dateRangeOptions = useMemo12(
     () => [
       { label: "All Time", value: "all-time" },
@@ -4707,7 +4727,7 @@ import React36 from "react";
 import { Stack as Stack7, Typography as Typography2 } from "@mui/joy";
 
 // src/components/PercentageInput/PercentageInput.tsx
-import React35, { useCallback as useCallback18, useMemo as useMemo13, useState as useState10 } from "react";
+import React35, { useCallback as useCallback18, useMemo as useMemo13, useState as useState11 } from "react";
 import { NumericFormat as NumericFormat2 } from "react-number-format";
 import { styled as styled20, useThemeProps as useThemeProps6 } from "@mui/joy";
 var padDecimal = (value, decimalScale) => {
@@ -4766,7 +4786,7 @@ var PercentageInput = React35.forwardRef(
       props.defaultValue,
       useCallback18((value2) => onChange?.({ target: { name, value: value2 } }), [onChange, name])
     );
-    const [internalError, setInternalError] = useState10(
+    const [internalError, setInternalError] = useState11(
       max && _value && _value > max || min && _value && _value < min
     );
     const value = useMemo13(() => {
@@ -5028,7 +5048,7 @@ function FilterMenu(props) {
 FilterMenu.displayName = "FilterMenu";
 
 // src/components/Uploader/Uploader.tsx
-import React40, { useCallback as useCallback22, useEffect as useEffect9, useMemo as useMemo14, useRef as useRef8, useState as useState11 } from "react";
+import React40, { useCallback as useCallback22, useEffect as useEffect9, useMemo as useMemo14, useRef as useRef8, useState as useState12 } from "react";
 import { styled as styled21, Input as Input2 } from "@mui/joy";
 import MuiFileUploadIcon from "@mui/icons-material/CloudUploadRounded";
 import MuiUploadFileIcon from "@mui/icons-material/UploadFileRounded";
@@ -5179,10 +5199,10 @@ var Uploader = React40.memo(
     } = props;
     const dropZoneRef = useRef8(null);
     const inputRef = useRef8(null);
-    const [errorText, setErrorText] = useState11();
-    const [files, setFiles] = useState11([]);
-    const [uploaded, setUploaded] = useState11(props.uploaded || []);
-    const [previewState, setPreviewState] = useState11("idle");
+    const [errorText, setErrorText] = useState12();
+    const [files, setFiles] = useState12([]);
+    const [uploaded, setUploaded] = useState12(props.uploaded || []);
+    const [previewState, setPreviewState] = useState12("idle");
     const accepts = useMemo14(() => accept.split(",").map((accept2) => accept2.trim()), [accept]);
     const parsedAccepts = useMemo14(
       () => accepts.flatMap((type) => {
@@ -5442,13 +5462,13 @@ function IconMenuButton(props) {
 IconMenuButton.displayName = "IconMenuButton";
 
 // src/components/Markdown/Markdown.tsx
-import React42, { lazy, Suspense, useEffect as useEffect10, useState as useState12 } from "react";
+import React42, { lazy, Suspense, useEffect as useEffect10, useState as useState13 } from "react";
 import { Skeleton } from "@mui/joy";
 import { Link as Link2 } from "@mui/joy";
 import remarkGfm from "remark-gfm";
 var LazyReactMarkdown = lazy(() => import("react-markdown"));
 var Markdown = (props) => {
-  const [rehypeAccent2, setRehypeAccent] = useState12(null);
+  const [rehypeAccent2, setRehypeAccent] = useState13(null);
   useEffect10(() => {
     const loadRehypeAccent = async () => {
       const module = await Promise.resolve().then(() => (init_rehype_accent(), rehype_accent_exports));
@@ -5555,7 +5575,7 @@ function MenuButton(props) {
 MenuButton.displayName = "MenuButton";
 
 // src/components/MonthPicker/MonthPicker.tsx
-import React44, { forwardRef as forwardRef9, useCallback as useCallback23, useEffect as useEffect11, useImperativeHandle as useImperativeHandle4, useRef as useRef9, useState as useState13 } from "react";
+import React44, { forwardRef as forwardRef9, useCallback as useCallback23, useEffect as useEffect11, useImperativeHandle as useImperativeHandle4, useRef as useRef9, useState as useState14 } from "react";
 import CalendarTodayIcon3 from "@mui/icons-material/CalendarToday";
 import { styled as styled22, useThemeProps as useThemeProps7 } from "@mui/joy";
 import { FocusTrap as FocusTrap3, ClickAwayListener as ClickAwayListener3, Popper as Popper4 } from "@mui/base";
@@ -5655,8 +5675,8 @@ var MonthPicker = forwardRef9((inProps, ref) => {
     },
     [format, displayFormat, locale]
   );
-  const [displayValue, setDisplayValue] = useState13(() => getFormattedDisplayValue(value));
-  const [anchorEl, setAnchorEl] = useState13(null);
+  const [displayValue, setDisplayValue] = useState14(() => getFormattedDisplayValue(value));
+  const [anchorEl, setAnchorEl] = useState14(null);
   const open = Boolean(anchorEl);
   useEffect11(() => {
     if (!anchorEl) {
@@ -5808,7 +5828,7 @@ var MonthPicker = forwardRef9((inProps, ref) => {
 });
 
 // src/components/MonthRangePicker/MonthRangePicker.tsx
-import React45, { forwardRef as forwardRef10, useCallback as useCallback24, useEffect as useEffect12, useImperativeHandle as useImperativeHandle5, useMemo as useMemo15, useRef as useRef10, useState as useState14 } from "react";
+import React45, { forwardRef as forwardRef10, useCallback as useCallback24, useEffect as useEffect12, useImperativeHandle as useImperativeHandle5, useMemo as useMemo15, useRef as useRef10, useState as useState15 } from "react";
 import { IMaskInput as IMaskInput3, IMask as IMask3 } from "react-imask";
 import CalendarTodayIcon4 from "@mui/icons-material/CalendarToday";
 import { styled as styled23, useThemeProps as useThemeProps8 } from "@mui/joy";
@@ -5922,7 +5942,7 @@ var MonthRangePicker = forwardRef10((inProps, ref) => {
     props.defaultValue || "",
     useCallback24((value2) => onChange?.({ target: { name: props.name, value: value2 } }), [props.name, onChange])
   );
-  const [anchorEl, setAnchorEl] = useState14(null);
+  const [anchorEl, setAnchorEl] = useState15(null);
   const open = Boolean(anchorEl);
   const calendarValue = useMemo15(() => value ? parseDates2(value) : void 0, [value]);
   useEffect12(() => {
@@ -6453,11 +6473,15 @@ function Stepper(props) {
     inactiveColor = "neutral.400",
     activeLineColor = "primary.500",
     inactiveLineColor = "neutral.300",
-    activeStep
+    activeStep,
+    orientation = "horizontal",
+    stepOrientation = "horizontal"
   } = props;
+  const effectiveStepOrientation = orientation === "vertical" ? "horizontal" : stepOrientation;
   return /* @__PURE__ */ React52.createElement(
     MotionStepper,
     {
+      orientation,
       sx: (theme) => ({
         "--StepIndicator-size": "24px",
         "--Step-gap": theme.spacing(2),
@@ -6479,7 +6503,11 @@ function Stepper(props) {
         [`& .${stepClasses.disabled}`]: {
           "&::after": { bgcolor: inactiveLineColor },
           [`& .${stepIndicatorClasses.root}`]: {
-            bgcolor: inactiveColor
+            bgcolor: theme.vars.palette.background.surface,
+            borderColor: theme.vars.palette.neutral.outlinedBorder,
+            borderWidth: "1px",
+            borderStyle: "solid",
+            color: theme.vars.palette.neutral.plainColor
           }
         }
       })
@@ -6493,12 +6521,20 @@ function Stepper(props) {
         Step,
         {
           key: `step-${i}`,
-          indicator: /* @__PURE__ */ React52.createElement(StepIndicator, { variant: "solid", color: "primary" }, completed ? /* @__PURE__ */ React52.createElement(CheckIcon, null) : step.indicatorContent),
+          indicator: /* @__PURE__ */ React52.createElement(StepIndicator, { variant: disabled ? "outlined" : "solid", color: disabled ? "neutral" : "primary" }, completed ? /* @__PURE__ */ React52.createElement(CheckIcon, null) : step.indicatorContent),
           active,
           completed,
-          disabled
+          disabled,
+          orientation: effectiveStepOrientation
         },
-        hasContent && /* @__PURE__ */ React52.createElement(Stack_default, null, step.label && /* @__PURE__ */ React52.createElement(Typography_default, { level: "title-sm" }, step.label), step.extraContent && /* @__PURE__ */ React52.createElement(Typography_default, { level: "body-xs" }, step.extraContent))
+        hasContent && /* @__PURE__ */ React52.createElement(
+          Stack_default,
+          {
+            sx: orientation === "horizontal" && effectiveStepOrientation === "vertical" ? { alignItems: "center" } : {}
+          },
+          step.label && /* @__PURE__ */ React52.createElement(Typography_default, { level: "title-sm" }, step.label),
+          step.extraContent && /* @__PURE__ */ React52.createElement(Typography_default, { level: "body-xs" }, step.extraContent)
+        )
       );
     })
   );

package/dist/llms.txt

@@ -0,0 +1,75 @@
+# @ceed/ads Component Guide
+
+## Table of Contents
+
+- [ADS (Admin Design System)](./Overview.md)
+- [components](./components/llms.txt)
+- [data-display](./components/data-display/llms.txt)
+- [Avatar](./components/data-display/Avatar.md)
+- [Badge](./components/data-display/Badge.md)
+- [Chip](./components/data-display/Chip.md)
+- [DataTable](./components/data-display/DataTable.md)
+- [InfoSign](./components/data-display/InfoSign.md)
+- [Markdown](./components/data-display/Markdown.md)
+- [Table](./components/data-display/Table.md)
+- [Tooltip](./components/data-display/Tooltip.md)
+- [Typography](./components/data-display/Typography.md)
+- [feedback](./components/feedback/llms.txt)
+- [Alert](./components/feedback/Alert.md)
+- [Dialog](./components/feedback/Dialog.md)
+- [Modal](./components/feedback/Modal.md)
+- [inputs](./components/inputs/llms.txt)
+- [Autocomplete](./components/inputs/Autocomplete.md)
+- [Button](./components/inputs/Button.md)
+- [ButtonGroup](./components/inputs/ButtonGroup.md)
+- [Calendar](./components/inputs/Calendar.md)
+- [Checkbox](./components/inputs/Checkbox.md)
+- [CurrencyInput](./components/inputs/CurrencyInput.md)
+- [DatePicker](./components/inputs/DatePicker.md)
+- [DateRangePicker](./components/inputs/DateRangePicker.md)
+- [FilterMenu](./components/inputs/FilterMenu.md)
+- [IconButton](./components/inputs/IconButton.md)
+- [Input](./components/inputs/Input.md)
+- [MonthPicker](./components/inputs/MonthPicker.md)
+- [MonthRangePicker](./components/inputs/MonthRangePicker.md)
+- [PercentageInput](./components/inputs/PercentageInput.md)
+- [Radio](./components/inputs/RadioButton.md)
+- [RadioTileGroup](./components/inputs/RadioTileGroup.md)
+- [Select](./components/inputs/Select.md)
+- [Switch](./components/inputs/Switch.md)
+- [Textarea](./components/inputs/Textarea.md)
+- [Uploader](./components/inputs/Uploader/llms.txt)
+- [Uploader](./components/inputs/Uploader/Uploader.md)
+- [layout](./components/layout/llms.txt)
+- [Box](./components/layout/Box.md)
+- [Container](./components/layout/Container.md)
+- [Grid](./components/layout/Grid.md)
+- [Stack](./components/layout/Stack.md)
+- [navigation](./components/navigation/llms.txt)
+- [Breadcrumbs](./components/navigation/Breadcrumbs.md)
+- [Dropdown](./components/navigation/Dropdown.md)
+- [IconMenuButton](./components/navigation/IconMenuButton.md)
+- [InsetDrawer](./components/navigation/InsetDrawer.md)
+- [Link](./components/navigation/Link.md)
+- [Menu](./components/navigation/Menu.md)
+- [MenuButton](./components/navigation/MenuButton.md)
+- [NavigationGroup](./components/navigation/NavigationGroup.md)
+- [NavigationItem](./components/navigation/NavigationItem.md)
+- [Navigator](./components/navigation/Navigator.md)
+- [Pagination](./components/navigation/Pagination.md)
+- [ProfileMenu](./components/navigation/ProfileMenu.md)
+- [Stepper](./components/navigation/Stepper.md)
+- [Tabs](./components/navigation/Tabs.md)
+- [surfaces](./components/surfaces/llms.txt)
+- [Accordions](./components/surfaces/Accordions.md)
+- [Card](./components/surfaces/Card.md)
+- [Divider](./components/surfaces/Divider.md)
+- [Sheet](./components/surfaces/Sheet.md)
+
+## Documentation
+
+- [ADS (Admin Design System)](./Overview.md)
+
+## Children
+
+- [components](./components/llms.txt)