@j2-health/design-system 0.6.2 → 0.6.4

package/dist/src/components/steps/Steps.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Steps.cjs","names":["useSteps","AntdSteps","cx","CheckIcon"],"sources":["../../../../src/components/steps/Steps.tsx"],"sourcesContent":["import { Steps as AntdSteps, StepsProps } from 'antd'\nimport './Steps.css'\nimport { CheckIcon } from '@phosphor-icons/react'\nimport cx from 'classnames'\nimport { useSteps } from './useSteps'\n\ntype AllProps = StepsProps & {\n  items: NonNullable<StepsProps['items']>\n  dot?: boolean\n  current?: number\n  setCurrent?: (current: number) => void\n}\n\ntype Props = Expand<AllProps>\n\nexport const Steps = ({\n  items,\n  current,\n  setCurrent,\n  dot = false,\n  direction,\n  orientation,\n  size,\n  labelPlacement,\n  titlePlacement,\n  ...props\n}: Props) => {\n  const isVertical = (orientation ?? direction) === 'vertical'\n  const totalSteps = items?.length || 0\n\n  const { current: currentStep, setCurrent: setCurrentStep } = useSteps({\n    current,\n    setCurrent,\n    totalSteps,\n  })\n\n  return (\n    <AntdSteps\n      className=\"j2Steps\"\n      {...props}\n      orientation={orientation ?? direction}\n      titlePlacement={titlePlacement ?? labelPlacement}\n      size={size === 'default' ? 'medium' : size}\n      current={currentStep}\n      onChange={(curr) => setCurrentStep(curr)}\n      {...(dot && { type: 'dot' })}\n      items={items?.map((item, index) => {\n        const { description, ...restItem } = item\n        return {\n          ...restItem,\n          content: item.content ?? description,\n          icon:\n            !dot && currentStep > index ? (\n              <div\n                className={cx(\n                  `check-${size === 'small' ? 'small' : 'medium'}`,\n                  isVertical ? `vertical-check-icon` : `check-icon`\n                )}\n              >\n                <CheckIcon size={16} />\n              </div>\n            ) : (\n              item.icon\n            ),\n        }\n      })}\n    />\n  )\n}\n"],"mappings":";;;;;;;;;;AAeA,IAAa,SAAS,EACpB,OACA,SACA,YACA,MAAM,OACN,WACA,aACA,MACA,gBACA,gBACA,GAAG,YACQ;CACX,MAAM,cAAc,eAAe,eAAe;CAClD,MAAM,aAAa,OAAO,UAAU;CAEpC,MAAM,EAAE,SAAS,aAAa,YAAY,mBAAmBA,iBAAAA,SAAS;EACpE;EACA;EACA;CACF,CAAC;CAED,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,KAAAA,OAAD;EACE,WAAU;EACV,GAAI;EACJ,aAAa,eAAe;EAC5B,gBAAgB,kBAAkB;EAClC,MAAM,SAAS,YAAY,WAAW;EACtC,SAAS;EACT,WAAW,SAAS,eAAe,IAAI;EACvC,GAAK,OAAO,EAAE,MAAM,MAAM;EAC1B,OAAO,OAAO,KAAK,MAAM,UAAU;GACjC,MAAM,EAAE,aAAa,GAAG,aAAa;GACrC,OAAO;IACL,GAAG;IACH,SAAS,KAAK,WAAW;IACzB,MACE,CAAC,OAAO,cAAc,QACpB,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;KACE,YAAA,GAAWC,WAAAA,QAAAA,CACT,SAAS,SAAS,UAAU,UAAU,YACtC,aAAa,wBAAwB,YACvC;KAEA,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,sBAAAA,WAAD,EAAW,MAAM,GAAK,CAAA;IACnB,CAAA,IAEL,KAAK;GAEX;EACF,CAAC;CACF,CAAA;AAEL"}
+{"version":3,"file":"Steps.cjs","names":["useSteps","AntdSteps","cx","CheckIcon"],"sources":["../../../../src/components/steps/Steps.tsx"],"sourcesContent":["import { Steps as AntdSteps, StepsProps } from 'antd'\nimport './Steps.css'\nimport { CheckIcon } from '@phosphor-icons/react'\nimport cx from 'classnames'\nimport { useSteps } from './useSteps'\n\ntype AllProps = StepsProps & {\n  items: NonNullable<StepsProps['items']>\n  dot?: boolean\n  current?: number\n  setCurrent?: (current: number) => void\n}\n\ntype Props = Expand<AllProps>\n\nexport const Steps = ({\n  items,\n  current,\n  setCurrent,\n  dot = false,\n  direction,\n  orientation,\n  size,\n  labelPlacement,\n  titlePlacement,\n  className,\n  ...props\n}: Props) => {\n  const isVertical = (orientation ?? direction) === 'vertical'\n  const totalSteps = items?.length || 0\n  // antd only makes a step clickable when `onChange` is set, so a controlled\n  // bar with no setter renders read-only rather than inert-but-clickable.\n  const isReadOnly = current !== undefined && setCurrent === undefined\n\n  const { current: currentStep, setCurrent: setCurrentStep } = useSteps({\n    current,\n    setCurrent,\n    totalSteps,\n  })\n\n  return (\n    <AntdSteps\n      {...props}\n      className={cx('j2Steps', className)}\n      orientation={orientation ?? direction}\n      titlePlacement={titlePlacement ?? labelPlacement}\n      size={size === 'default' ? 'medium' : size}\n      current={currentStep}\n      onChange={isReadOnly ? undefined : (curr) => setCurrentStep(curr)}\n      {...(dot && { type: 'dot' })}\n      items={items?.map((item, index) => {\n        const { description, ...restItem } = item\n        return {\n          ...restItem,\n          content: item.content ?? description,\n          icon:\n            !dot && currentStep > index ? (\n              <div\n                className={cx(\n                  `check-${size === 'small' ? 'small' : 'medium'}`,\n                  isVertical ? `vertical-check-icon` : `check-icon`\n                )}\n              >\n                <CheckIcon size={16} />\n              </div>\n            ) : (\n              item.icon\n            ),\n        }\n      })}\n    />\n  )\n}\n"],"mappings":";;;;;;;;;;AAeA,IAAa,SAAS,EACpB,OACA,SACA,YACA,MAAM,OACN,WACA,aACA,MACA,gBACA,gBACA,WACA,GAAG,YACQ;CACX,MAAM,cAAc,eAAe,eAAe;CAClD,MAAM,aAAa,OAAO,UAAU;CAGpC,MAAM,aAAa,YAAY,KAAA,KAAa,eAAe,KAAA;CAE3D,MAAM,EAAE,SAAS,aAAa,YAAY,mBAAmBA,iBAAAA,SAAS;EACpE;EACA;EACA;CACF,CAAC;CAED,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,KAAAA,OAAD;EACE,GAAI;EACJ,YAAA,GAAWC,WAAAA,QAAAA,CAAG,WAAW,SAAS;EAClC,aAAa,eAAe;EAC5B,gBAAgB,kBAAkB;EAClC,MAAM,SAAS,YAAY,WAAW;EACtC,SAAS;EACT,UAAU,aAAa,KAAA,KAAa,SAAS,eAAe,IAAI;EAChE,GAAK,OAAO,EAAE,MAAM,MAAM;EAC1B,OAAO,OAAO,KAAK,MAAM,UAAU;GACjC,MAAM,EAAE,aAAa,GAAG,aAAa;GACrC,OAAO;IACL,GAAG;IACH,SAAS,KAAK,WAAW;IACzB,MACE,CAAC,OAAO,cAAc,QACpB,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;KACE,YAAA,GAAWA,WAAAA,QAAAA,CACT,SAAS,SAAS,UAAU,UAAU,YACtC,aAAa,wBAAwB,YACvC;KAEA,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,sBAAAA,WAAD,EAAW,MAAM,GAAK,CAAA;IACnB,CAAA,IAEL,KAAK;GAEX;EACF,CAAC;CACF,CAAA;AAEL"}

package/dist/src/components/steps/Steps.d.ts

@@ -6,5 +6,5 @@ type AllProps = StepsProps & {
     setCurrent?: (current: number) => void;
 };
 type Props = Expand<AllProps>;
-export declare const Steps: ({ items, current, setCurrent, dot, direction, orientation, size, labelPlacement, titlePlacement, ...props }: Props) => import('react').JSX.Element;
+export declare const Steps: ({ items, current, setCurrent, dot, direction, orientation, size, labelPlacement, titlePlacement, className, ...props }: Props) => import('react').JSX.Element;
 export {};

package/dist/src/components/steps/Steps.js

@@ -5,22 +5,23 @@ import { CheckIcon } from "@phosphor-icons/react";
 import { jsx } from "react/jsx-runtime";
 import cx from "classnames";
 //#region src/components/steps/Steps.tsx
-var Steps$1 = ({ items, current, setCurrent, dot = false, direction, orientation, size, labelPlacement, titlePlacement, ...props }) => {
+var Steps$1 = ({ items, current, setCurrent, dot = false, direction, orientation, size, labelPlacement, titlePlacement, className, ...props }) => {
 	const isVertical = (orientation ?? direction) === "vertical";
 	const totalSteps = items?.length || 0;
+	const isReadOnly = current !== void 0 && setCurrent === void 0;
 	const { current: currentStep, setCurrent: setCurrentStep } = useSteps({
 		current,
 		setCurrent,
 		totalSteps
 	});
 	return /* @__PURE__ */ jsx(Steps, {
-		className: "j2Steps",
 		...props,
+		className: cx("j2Steps", className),
 		orientation: orientation ?? direction,
 		titlePlacement: titlePlacement ?? labelPlacement,
 		size: size === "default" ? "medium" : size,
 		current: currentStep,
-		onChange: (curr) => setCurrentStep(curr),
+		onChange: isReadOnly ? void 0 : (curr) => setCurrentStep(curr),
 		...dot && { type: "dot" },
 		items: items?.map((item, index) => {
 			const { description, ...restItem } = item;

package/dist/src/components/steps/Steps.js.map

@@ -1 +1 @@
-{"version":3,"file":"Steps.js","names":["Steps","AntdSteps"],"sources":["../../../../src/components/steps/Steps.tsx"],"sourcesContent":["import { Steps as AntdSteps, StepsProps } from 'antd'\nimport './Steps.css'\nimport { CheckIcon } from '@phosphor-icons/react'\nimport cx from 'classnames'\nimport { useSteps } from './useSteps'\n\ntype AllProps = StepsProps & {\n  items: NonNullable<StepsProps['items']>\n  dot?: boolean\n  current?: number\n  setCurrent?: (current: number) => void\n}\n\ntype Props = Expand<AllProps>\n\nexport const Steps = ({\n  items,\n  current,\n  setCurrent,\n  dot = false,\n  direction,\n  orientation,\n  size,\n  labelPlacement,\n  titlePlacement,\n  ...props\n}: Props) => {\n  const isVertical = (orientation ?? direction) === 'vertical'\n  const totalSteps = items?.length || 0\n\n  const { current: currentStep, setCurrent: setCurrentStep } = useSteps({\n    current,\n    setCurrent,\n    totalSteps,\n  })\n\n  return (\n    <AntdSteps\n      className=\"j2Steps\"\n      {...props}\n      orientation={orientation ?? direction}\n      titlePlacement={titlePlacement ?? labelPlacement}\n      size={size === 'default' ? 'medium' : size}\n      current={currentStep}\n      onChange={(curr) => setCurrentStep(curr)}\n      {...(dot && { type: 'dot' })}\n      items={items?.map((item, index) => {\n        const { description, ...restItem } = item\n        return {\n          ...restItem,\n          content: item.content ?? description,\n          icon:\n            !dot && currentStep > index ? (\n              <div\n                className={cx(\n                  `check-${size === 'small' ? 'small' : 'medium'}`,\n                  isVertical ? `vertical-check-icon` : `check-icon`\n                )}\n              >\n                <CheckIcon size={16} />\n              </div>\n            ) : (\n              item.icon\n            ),\n        }\n      })}\n    />\n  )\n}\n"],"mappings":";;;;;;;AAeA,IAAaA,WAAS,EACpB,OACA,SACA,YACA,MAAM,OACN,WACA,aACA,MACA,gBACA,gBACA,GAAG,YACQ;CACX,MAAM,cAAc,eAAe,eAAe;CAClD,MAAM,aAAa,OAAO,UAAU;CAEpC,MAAM,EAAE,SAAS,aAAa,YAAY,mBAAmB,SAAS;EACpE;EACA;EACA;CACF,CAAC;CAED,OACE,oBAACC,OAAD;EACE,WAAU;EACV,GAAI;EACJ,aAAa,eAAe;EAC5B,gBAAgB,kBAAkB;EAClC,MAAM,SAAS,YAAY,WAAW;EACtC,SAAS;EACT,WAAW,SAAS,eAAe,IAAI;EACvC,GAAK,OAAO,EAAE,MAAM,MAAM;EAC1B,OAAO,OAAO,KAAK,MAAM,UAAU;GACjC,MAAM,EAAE,aAAa,GAAG,aAAa;GACrC,OAAO;IACL,GAAG;IACH,SAAS,KAAK,WAAW;IACzB,MACE,CAAC,OAAO,cAAc,QACpB,oBAAC,OAAD;KACE,WAAW,GACT,SAAS,SAAS,UAAU,UAAU,YACtC,aAAa,wBAAwB,YACvC;KAEA,UAAA,oBAAC,WAAD,EAAW,MAAM,GAAK,CAAA;IACnB,CAAA,IAEL,KAAK;GAEX;EACF,CAAC;CACF,CAAA;AAEL"}
+{"version":3,"file":"Steps.js","names":["Steps","AntdSteps"],"sources":["../../../../src/components/steps/Steps.tsx"],"sourcesContent":["import { Steps as AntdSteps, StepsProps } from 'antd'\nimport './Steps.css'\nimport { CheckIcon } from '@phosphor-icons/react'\nimport cx from 'classnames'\nimport { useSteps } from './useSteps'\n\ntype AllProps = StepsProps & {\n  items: NonNullable<StepsProps['items']>\n  dot?: boolean\n  current?: number\n  setCurrent?: (current: number) => void\n}\n\ntype Props = Expand<AllProps>\n\nexport const Steps = ({\n  items,\n  current,\n  setCurrent,\n  dot = false,\n  direction,\n  orientation,\n  size,\n  labelPlacement,\n  titlePlacement,\n  className,\n  ...props\n}: Props) => {\n  const isVertical = (orientation ?? direction) === 'vertical'\n  const totalSteps = items?.length || 0\n  // antd only makes a step clickable when `onChange` is set, so a controlled\n  // bar with no setter renders read-only rather than inert-but-clickable.\n  const isReadOnly = current !== undefined && setCurrent === undefined\n\n  const { current: currentStep, setCurrent: setCurrentStep } = useSteps({\n    current,\n    setCurrent,\n    totalSteps,\n  })\n\n  return (\n    <AntdSteps\n      {...props}\n      className={cx('j2Steps', className)}\n      orientation={orientation ?? direction}\n      titlePlacement={titlePlacement ?? labelPlacement}\n      size={size === 'default' ? 'medium' : size}\n      current={currentStep}\n      onChange={isReadOnly ? undefined : (curr) => setCurrentStep(curr)}\n      {...(dot && { type: 'dot' })}\n      items={items?.map((item, index) => {\n        const { description, ...restItem } = item\n        return {\n          ...restItem,\n          content: item.content ?? description,\n          icon:\n            !dot && currentStep > index ? (\n              <div\n                className={cx(\n                  `check-${size === 'small' ? 'small' : 'medium'}`,\n                  isVertical ? `vertical-check-icon` : `check-icon`\n                )}\n              >\n                <CheckIcon size={16} />\n              </div>\n            ) : (\n              item.icon\n            ),\n        }\n      })}\n    />\n  )\n}\n"],"mappings":";;;;;;;AAeA,IAAaA,WAAS,EACpB,OACA,SACA,YACA,MAAM,OACN,WACA,aACA,MACA,gBACA,gBACA,WACA,GAAG,YACQ;CACX,MAAM,cAAc,eAAe,eAAe;CAClD,MAAM,aAAa,OAAO,UAAU;CAGpC,MAAM,aAAa,YAAY,KAAA,KAAa,eAAe,KAAA;CAE3D,MAAM,EAAE,SAAS,aAAa,YAAY,mBAAmB,SAAS;EACpE;EACA;EACA;CACF,CAAC;CAED,OACE,oBAACC,OAAD;EACE,GAAI;EACJ,WAAW,GAAG,WAAW,SAAS;EAClC,aAAa,eAAe;EAC5B,gBAAgB,kBAAkB;EAClC,MAAM,SAAS,YAAY,WAAW;EACtC,SAAS;EACT,UAAU,aAAa,KAAA,KAAa,SAAS,eAAe,IAAI;EAChE,GAAK,OAAO,EAAE,MAAM,MAAM;EAC1B,OAAO,OAAO,KAAK,MAAM,UAAU;GACjC,MAAM,EAAE,aAAa,GAAG,aAAa;GACrC,OAAO;IACL,GAAG;IACH,SAAS,KAAK,WAAW;IACzB,MACE,CAAC,OAAO,cAAc,QACpB,oBAAC,OAAD;KACE,WAAW,GACT,SAAS,SAAS,UAAU,UAAU,YACtC,aAAa,wBAAwB,YACvC;KAEA,UAAA,oBAAC,WAAD,EAAW,MAAM,GAAK,CAAA;IACnB,CAAA,IAEL,KAAK;GAEX;EACF,CAAC;CACF,CAAA;AAEL"}

package/dist/src/components/steps/useSteps.cjs

@@ -2,10 +2,10 @@ let react = require("react");
 //#region src/components/steps/useSteps.ts
 var useSteps = ({ current, setCurrent, totalSteps, initialStep = 0 }) => {
 	const [internalCurrent, setInternalCurrent] = (0, react.useState)(initialStep);
-	const isControlled = current !== void 0 && setCurrent !== void 0;
+	const isControlled = current !== void 0;
 	const currentStep = isControlled ? current : internalCurrent;
 	const handleSetCurrent = (0, react.useCallback)((newCurrent) => {
-		if (isControlled) setCurrent(newCurrent);
+		if (isControlled) setCurrent?.(newCurrent);
 		else setInternalCurrent(newCurrent);
 	}, [isControlled, setCurrent]);
 	return {

package/dist/src/components/steps/useSteps.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useSteps.cjs","names":["useState","useCallback"],"sources":["../../../../src/components/steps/useSteps.ts"],"sourcesContent":["import { useState, useCallback } from 'react'\n\ninterface UseStepsOptions {\n  current?: number\n  setCurrent?: (current: number) => void\n  totalSteps: number\n  initialStep?: number\n}\n\nexport const useSteps = ({\n  current,\n  setCurrent,\n  totalSteps,\n  initialStep = 0,\n}: UseStepsOptions) => {\n  const [internalCurrent, setInternalCurrent] = useState(initialStep)\n\n  const isControlled = current !== undefined && setCurrent !== undefined\n  const currentStep = isControlled ? current : internalCurrent\n\n  const handleSetCurrent = useCallback(\n    (newCurrent: number) => {\n      if (isControlled) {\n        setCurrent!(newCurrent)\n      } else {\n        setInternalCurrent(newCurrent)\n      }\n    },\n    [isControlled, setCurrent]\n  )\n\n  const next = useCallback(() => {\n    if (currentStep < totalSteps - 1) {\n      handleSetCurrent(currentStep + 1)\n    }\n  }, [currentStep, totalSteps, handleSetCurrent])\n\n  const previous = useCallback(() => {\n    if (currentStep > 0) {\n      handleSetCurrent(currentStep - 1)\n    }\n  }, [currentStep, handleSetCurrent])\n\n  const goToStep = useCallback(\n    (step: number) => {\n      if (step >= 0 && step < totalSteps) {\n        handleSetCurrent(step)\n      }\n    },\n    [totalSteps, handleSetCurrent]\n  )\n\n  const cancel = useCallback(() => {\n    handleSetCurrent(initialStep)\n  }, [handleSetCurrent, initialStep])\n\n  return {\n    next,\n    previous,\n    goToStep,\n    cancel,\n    current: currentStep,\n    setCurrent: handleSetCurrent,\n    canGoNext: currentStep < totalSteps - 1,\n    canGoPrevious: currentStep > 0,\n  }\n}\n"],"mappings":";;AASA,IAAa,YAAY,EACvB,SACA,YACA,YACA,cAAc,QACO;CACrB,MAAM,CAAC,iBAAiB,uBAAA,GAAsBA,MAAAA,SAAAA,CAAS,WAAW;CAElE,MAAM,eAAe,YAAY,KAAA,KAAa,eAAe,KAAA;CAC7D,MAAM,cAAc,eAAe,UAAU;CAE7C,MAAM,oBAAA,GAAmBC,MAAAA,YAAAA,EACtB,eAAuB;EACtB,IAAI,cACF,WAAY,UAAU;OAEtB,mBAAmB,UAAU;CAEjC,GACA,CAAC,cAAc,UAAU,CAC3B;CA2BA,OAAO;EACL,OAAA,GA1BWA,MAAAA,YAAAA,OAAkB;GAC7B,IAAI,cAAc,aAAa,GAC7B,iBAAiB,cAAc,CAAC;EAEpC,GAAG;GAAC;GAAa;GAAY;EAAgB,CAsB3C;EACA,WAAA,GArBeA,MAAAA,YAAAA,OAAkB;GACjC,IAAI,cAAc,GAChB,iBAAiB,cAAc,CAAC;EAEpC,GAAG,CAAC,aAAa,gBAAgB,CAiB/B;EACA,WAAA,GAhBeA,MAAAA,YAAAA,EACd,SAAiB;GAChB,IAAI,QAAQ,KAAK,OAAO,YACtB,iBAAiB,IAAI;EAEzB,GACA,CAAC,YAAY,gBAAgB,CAU7B;EACA,SAAA,GARaA,MAAAA,YAAAA,OAAkB;GAC/B,iBAAiB,WAAW;EAC9B,GAAG,CAAC,kBAAkB,WAAW,CAM/B;EACA,SAAS;EACT,YAAY;EACZ,WAAW,cAAc,aAAa;EACtC,eAAe,cAAc;CAC/B;AACF"}
+{"version":3,"file":"useSteps.cjs","names":["useState","useCallback"],"sources":["../../../../src/components/steps/useSteps.ts"],"sourcesContent":["import { useState, useCallback } from 'react'\n\ninterface UseStepsOptions {\n  current?: number\n  setCurrent?: (current: number) => void\n  totalSteps: number\n  initialStep?: number\n}\n\nexport const useSteps = ({\n  current,\n  setCurrent,\n  totalSteps,\n  initialStep = 0,\n}: UseStepsOptions) => {\n  const [internalCurrent, setInternalCurrent] = useState(initialStep)\n\n  // `current` alone makes the steps controlled. Without `setCurrent` they are\n  // read-only: navigation is a no-op and the parent moves `current` itself.\n  const isControlled = current !== undefined\n  const currentStep = isControlled ? current : internalCurrent\n\n  const handleSetCurrent = useCallback(\n    (newCurrent: number) => {\n      if (isControlled) {\n        setCurrent?.(newCurrent)\n      } else {\n        setInternalCurrent(newCurrent)\n      }\n    },\n    [isControlled, setCurrent]\n  )\n\n  const next = useCallback(() => {\n    if (currentStep < totalSteps - 1) {\n      handleSetCurrent(currentStep + 1)\n    }\n  }, [currentStep, totalSteps, handleSetCurrent])\n\n  const previous = useCallback(() => {\n    if (currentStep > 0) {\n      handleSetCurrent(currentStep - 1)\n    }\n  }, [currentStep, handleSetCurrent])\n\n  const goToStep = useCallback(\n    (step: number) => {\n      if (step >= 0 && step < totalSteps) {\n        handleSetCurrent(step)\n      }\n    },\n    [totalSteps, handleSetCurrent]\n  )\n\n  const cancel = useCallback(() => {\n    handleSetCurrent(initialStep)\n  }, [handleSetCurrent, initialStep])\n\n  return {\n    next,\n    previous,\n    goToStep,\n    cancel,\n    current: currentStep,\n    setCurrent: handleSetCurrent,\n    canGoNext: currentStep < totalSteps - 1,\n    canGoPrevious: currentStep > 0,\n  }\n}\n"],"mappings":";;AASA,IAAa,YAAY,EACvB,SACA,YACA,YACA,cAAc,QACO;CACrB,MAAM,CAAC,iBAAiB,uBAAA,GAAsBA,MAAAA,SAAAA,CAAS,WAAW;CAIlE,MAAM,eAAe,YAAY,KAAA;CACjC,MAAM,cAAc,eAAe,UAAU;CAE7C,MAAM,oBAAA,GAAmBC,MAAAA,YAAAA,EACtB,eAAuB;EACtB,IAAI,cACF,aAAa,UAAU;OAEvB,mBAAmB,UAAU;CAEjC,GACA,CAAC,cAAc,UAAU,CAC3B;CA2BA,OAAO;EACL,OAAA,GA1BWA,MAAAA,YAAAA,OAAkB;GAC7B,IAAI,cAAc,aAAa,GAC7B,iBAAiB,cAAc,CAAC;EAEpC,GAAG;GAAC;GAAa;GAAY;EAAgB,CAsB3C;EACA,WAAA,GArBeA,MAAAA,YAAAA,OAAkB;GACjC,IAAI,cAAc,GAChB,iBAAiB,cAAc,CAAC;EAEpC,GAAG,CAAC,aAAa,gBAAgB,CAiB/B;EACA,WAAA,GAhBeA,MAAAA,YAAAA,EACd,SAAiB;GAChB,IAAI,QAAQ,KAAK,OAAO,YACtB,iBAAiB,IAAI;EAEzB,GACA,CAAC,YAAY,gBAAgB,CAU7B;EACA,SAAA,GARaA,MAAAA,YAAAA,OAAkB;GAC/B,iBAAiB,WAAW;EAC9B,GAAG,CAAC,kBAAkB,WAAW,CAM/B;EACA,SAAS;EACT,YAAY;EACZ,WAAW,cAAc,aAAa;EACtC,eAAe,cAAc;CAC/B;AACF"}

package/dist/src/components/steps/useSteps.js

@@ -2,10 +2,10 @@ import { useCallback, useState } from "react";
 //#region src/components/steps/useSteps.ts
 var useSteps = ({ current, setCurrent, totalSteps, initialStep = 0 }) => {
 	const [internalCurrent, setInternalCurrent] = useState(initialStep);
-	const isControlled = current !== void 0 && setCurrent !== void 0;
+	const isControlled = current !== void 0;
 	const currentStep = isControlled ? current : internalCurrent;
 	const handleSetCurrent = useCallback((newCurrent) => {
-		if (isControlled) setCurrent(newCurrent);
+		if (isControlled) setCurrent?.(newCurrent);
 		else setInternalCurrent(newCurrent);
 	}, [isControlled, setCurrent]);
 	return {

package/dist/src/components/steps/useSteps.js.map

@@ -1 +1 @@
-{"version":3,"file":"useSteps.js","names":[],"sources":["../../../../src/components/steps/useSteps.ts"],"sourcesContent":["import { useState, useCallback } from 'react'\n\ninterface UseStepsOptions {\n  current?: number\n  setCurrent?: (current: number) => void\n  totalSteps: number\n  initialStep?: number\n}\n\nexport const useSteps = ({\n  current,\n  setCurrent,\n  totalSteps,\n  initialStep = 0,\n}: UseStepsOptions) => {\n  const [internalCurrent, setInternalCurrent] = useState(initialStep)\n\n  const isControlled = current !== undefined && setCurrent !== undefined\n  const currentStep = isControlled ? current : internalCurrent\n\n  const handleSetCurrent = useCallback(\n    (newCurrent: number) => {\n      if (isControlled) {\n        setCurrent!(newCurrent)\n      } else {\n        setInternalCurrent(newCurrent)\n      }\n    },\n    [isControlled, setCurrent]\n  )\n\n  const next = useCallback(() => {\n    if (currentStep < totalSteps - 1) {\n      handleSetCurrent(currentStep + 1)\n    }\n  }, [currentStep, totalSteps, handleSetCurrent])\n\n  const previous = useCallback(() => {\n    if (currentStep > 0) {\n      handleSetCurrent(currentStep - 1)\n    }\n  }, [currentStep, handleSetCurrent])\n\n  const goToStep = useCallback(\n    (step: number) => {\n      if (step >= 0 && step < totalSteps) {\n        handleSetCurrent(step)\n      }\n    },\n    [totalSteps, handleSetCurrent]\n  )\n\n  const cancel = useCallback(() => {\n    handleSetCurrent(initialStep)\n  }, [handleSetCurrent, initialStep])\n\n  return {\n    next,\n    previous,\n    goToStep,\n    cancel,\n    current: currentStep,\n    setCurrent: handleSetCurrent,\n    canGoNext: currentStep < totalSteps - 1,\n    canGoPrevious: currentStep > 0,\n  }\n}\n"],"mappings":";;AASA,IAAa,YAAY,EACvB,SACA,YACA,YACA,cAAc,QACO;CACrB,MAAM,CAAC,iBAAiB,sBAAsB,SAAS,WAAW;CAElE,MAAM,eAAe,YAAY,KAAA,KAAa,eAAe,KAAA;CAC7D,MAAM,cAAc,eAAe,UAAU;CAE7C,MAAM,mBAAmB,aACtB,eAAuB;EACtB,IAAI,cACF,WAAY,UAAU;OAEtB,mBAAmB,UAAU;CAEjC,GACA,CAAC,cAAc,UAAU,CAC3B;CA2BA,OAAO;EACL,MA1BW,kBAAkB;GAC7B,IAAI,cAAc,aAAa,GAC7B,iBAAiB,cAAc,CAAC;EAEpC,GAAG;GAAC;GAAa;GAAY;EAAgB,CAsB3C;EACA,UArBe,kBAAkB;GACjC,IAAI,cAAc,GAChB,iBAAiB,cAAc,CAAC;EAEpC,GAAG,CAAC,aAAa,gBAAgB,CAiB/B;EACA,UAhBe,aACd,SAAiB;GAChB,IAAI,QAAQ,KAAK,OAAO,YACtB,iBAAiB,IAAI;EAEzB,GACA,CAAC,YAAY,gBAAgB,CAU7B;EACA,QARa,kBAAkB;GAC/B,iBAAiB,WAAW;EAC9B,GAAG,CAAC,kBAAkB,WAAW,CAM/B;EACA,SAAS;EACT,YAAY;EACZ,WAAW,cAAc,aAAa;EACtC,eAAe,cAAc;CAC/B;AACF"}
+{"version":3,"file":"useSteps.js","names":[],"sources":["../../../../src/components/steps/useSteps.ts"],"sourcesContent":["import { useState, useCallback } from 'react'\n\ninterface UseStepsOptions {\n  current?: number\n  setCurrent?: (current: number) => void\n  totalSteps: number\n  initialStep?: number\n}\n\nexport const useSteps = ({\n  current,\n  setCurrent,\n  totalSteps,\n  initialStep = 0,\n}: UseStepsOptions) => {\n  const [internalCurrent, setInternalCurrent] = useState(initialStep)\n\n  // `current` alone makes the steps controlled. Without `setCurrent` they are\n  // read-only: navigation is a no-op and the parent moves `current` itself.\n  const isControlled = current !== undefined\n  const currentStep = isControlled ? current : internalCurrent\n\n  const handleSetCurrent = useCallback(\n    (newCurrent: number) => {\n      if (isControlled) {\n        setCurrent?.(newCurrent)\n      } else {\n        setInternalCurrent(newCurrent)\n      }\n    },\n    [isControlled, setCurrent]\n  )\n\n  const next = useCallback(() => {\n    if (currentStep < totalSteps - 1) {\n      handleSetCurrent(currentStep + 1)\n    }\n  }, [currentStep, totalSteps, handleSetCurrent])\n\n  const previous = useCallback(() => {\n    if (currentStep > 0) {\n      handleSetCurrent(currentStep - 1)\n    }\n  }, [currentStep, handleSetCurrent])\n\n  const goToStep = useCallback(\n    (step: number) => {\n      if (step >= 0 && step < totalSteps) {\n        handleSetCurrent(step)\n      }\n    },\n    [totalSteps, handleSetCurrent]\n  )\n\n  const cancel = useCallback(() => {\n    handleSetCurrent(initialStep)\n  }, [handleSetCurrent, initialStep])\n\n  return {\n    next,\n    previous,\n    goToStep,\n    cancel,\n    current: currentStep,\n    setCurrent: handleSetCurrent,\n    canGoNext: currentStep < totalSteps - 1,\n    canGoPrevious: currentStep > 0,\n  }\n}\n"],"mappings":";;AASA,IAAa,YAAY,EACvB,SACA,YACA,YACA,cAAc,QACO;CACrB,MAAM,CAAC,iBAAiB,sBAAsB,SAAS,WAAW;CAIlE,MAAM,eAAe,YAAY,KAAA;CACjC,MAAM,cAAc,eAAe,UAAU;CAE7C,MAAM,mBAAmB,aACtB,eAAuB;EACtB,IAAI,cACF,aAAa,UAAU;OAEvB,mBAAmB,UAAU;CAEjC,GACA,CAAC,cAAc,UAAU,CAC3B;CA2BA,OAAO;EACL,MA1BW,kBAAkB;GAC7B,IAAI,cAAc,aAAa,GAC7B,iBAAiB,cAAc,CAAC;EAEpC,GAAG;GAAC;GAAa;GAAY;EAAgB,CAsB3C;EACA,UArBe,kBAAkB;GACjC,IAAI,cAAc,GAChB,iBAAiB,cAAc,CAAC;EAEpC,GAAG,CAAC,aAAa,gBAAgB,CAiB/B;EACA,UAhBe,aACd,SAAiB;GAChB,IAAI,QAAQ,KAAK,OAAO,YACtB,iBAAiB,IAAI;EAEzB,GACA,CAAC,YAAY,gBAAgB,CAU7B;EACA,QARa,kBAAkB;GAC/B,iBAAiB,WAAW;EAC9B,GAAG,CAAC,kBAAkB,WAAW,CAM/B;EACA,SAAS;EACT,YAAY;EACZ,WAAW,cAAc,aAAa;EACtC,eAAe,cAAc;CAC/B;AACF"}

package/dist/style.css

@@ -792,7 +792,7 @@
   color: white;
   font-weight: 700;
 }
-._hemisphericSelect_3wupe_1 {
+._hemisphericSelect_1pxzv_1 {
   border-radius: 9999px !important;
 
   .ant-select-placeholder {
@@ -800,7 +800,7 @@
   }
 }
 
-._summarizedSelect_3wupe_9 {
+._summarizedSelect_1pxzv_9 {
   .ant-select-suffix {
     color: var(--j2-color-primary);
   }
@@ -837,7 +837,7 @@
   }
 }
 
-._isActive_3wupe_46 {
+._isActive_1pxzv_46 {
   background: var(--j2-color-primary) !important;
 
   .ant-select-selection-item-content {
@@ -849,21 +849,21 @@
   }
 }
 
-._menuContainer_3wupe_58 .ant-select-item-option-selected {
+._menuContainer_1pxzv_58 .ant-select-item-option-selected {
   background: var(--j2-color-primary) !important;
 }
 
-._menuContainer_3wupe_58
+._menuContainer_1pxzv_58
   .ant-select-item-option-selected
   .ant-select-item-option-content {
   color: white;
 }
 
-._menuContainerMultiple_3wupe_68 .ant-select-item-option-selected {
+._menuContainerMultiple_1pxzv_68 .ant-select-item-option-selected {
   background: var(--j2-color-primary-bg-hover) !important;
 }
 
-._menuContainerMultiple_3wupe_68
+._menuContainerMultiple_1pxzv_68
   .ant-select-item-option-selected
   .ant-select-item-option-content {
   color: inherit;
@@ -874,14 +874,14 @@
  * The select root owns its border and background in Ant Design 6.
  */
 
-._headlinedSelect_3wupe_83.ant-select.ant-select-single {
+._headlinedSelect_1pxzv_83.ant-select.ant-select-single {
   font-size: var(--j2-font-size-heading-2);
   height: 40px;
   width: -moz-fit-content !important;
   width: fit-content !important;
 }
 
-._headlinedSelect_3wupe_83.ant-select {
+._headlinedSelect_1pxzv_83.ant-select {
   background: transparent;
   padding-left: 0;
   padding-right: 4px;
@@ -890,13 +890,13 @@
   border-radius: 0;
 }
 
-._headlinedSelect_3wupe_83.ant-select .ant-select-suffix {
+._headlinedSelect_1pxzv_83.ant-select .ant-select-suffix {
   height: 16px;
   width: 16px;
   right: 0;
 }
 
-._headlinedSelect_3wupe_83.ant-select .ant-select-content {
+._headlinedSelect_1pxzv_83.ant-select .ant-select-content {
   font-weight: 600;
   line-height: 1.3;
 }
@@ -906,43 +906,43 @@
    too, so every click boxed the headline. The underline below already marks
    focus. `!important` because antd's status variants of that rule reach
    (0,5,1) specificity. */
-._headlinedSelect_3wupe_83.ant-select {
+._headlinedSelect_1pxzv_83.ant-select {
   outline: none !important;
 }
 
 /* Hover state - show underline */
-._headlinedSelect_3wupe_83.ant-select:hover {
+._headlinedSelect_1pxzv_83.ant-select:hover {
   border-bottom-color: var(--j2-color-primary);
 }
 
 /* Open/focused state - keep underline and text color */
-._headlinedSelect_3wupe_83.ant-select-open,
-._headlinedSelect_3wupe_83.ant-select-focused {
+._headlinedSelect_1pxzv_83.ant-select-open,
+._headlinedSelect_1pxzv_83.ant-select-focused {
   border-bottom-color: var(--j2-color-primary);
 }
 
-._headlinedSelect_3wupe_83.ant-select-open .ant-select-content,
-._headlinedSelect_3wupe_83.ant-select-focused .ant-select-content {
+._headlinedSelect_1pxzv_83.ant-select-open .ant-select-content,
+._headlinedSelect_1pxzv_83.ant-select-focused .ant-select-content {
   color: inherit;
 }
 
 /* Headline dropdown styles - needs !important to override .menuContainer */
-._menuContainer_3wupe_58._headlinedMenuContainer_3wupe_135
+._menuContainer_1pxzv_58._headlinedMenuContainer_1pxzv_135
   .ant-select-item-option-selected {
   background: var(--j2-color-primary) !important;
 }
 
-._menuContainer_3wupe_58._headlinedMenuContainer_3wupe_135
+._menuContainer_1pxzv_58._headlinedMenuContainer_1pxzv_135
   .ant-select-item-option-selected
   .ant-select-item-option-content {
   color: white;
 }
 
-._clearAllButton_3wupe_146 {
+._clearAllButton_1pxzv_146 {
   color: var(--j2-color-primary);
 }
 
-._clearAllButton_3wupe_146:hover {
+._clearAllButton_1pxzv_146:hover {
   background-color: var(--j2-color-primary-bg-hover);
 }
 
@@ -957,19 +957,19 @@
  * Color needs `.ant-typography` to beat antd's link color.
  */
 
-._dropdownTrigger_3wupe_165.ant-typography,
-._dropdownTrigger_3wupe_165.ant-typography:hover,
-._dropdownTrigger_3wupe_165.ant-typography:focus {
+._dropdownTrigger_1pxzv_165.ant-typography,
+._dropdownTrigger_1pxzv_165.ant-typography:hover,
+._dropdownTrigger_1pxzv_165.ant-typography:focus {
   color: var(--j2-color-primary);
   text-decoration: none;
 }
 
-._dropdownTrigger_3wupe_165.ant-typography:hover {
+._dropdownTrigger_1pxzv_165.ant-typography:hover {
   opacity: 0.7;
 }
 
-._dropdownTrigger_3wupe_165.ant-typography-disabled,
-._dropdownTrigger_3wupe_165.ant-typography-disabled:hover {
+._dropdownTrigger_1pxzv_165.ant-typography-disabled,
+._dropdownTrigger_1pxzv_165.ant-typography-disabled:hover {
   color: var(--j2-color-text-disabled);
   opacity: 1;
 }
@@ -978,9 +978,15 @@
  * Field variant (`variant="field"`)
  * A form field: full width, the field's own text color, a muted caret.
  */
-._fieldSelect_3wupe_186 .ant-select-suffix {
+._fieldSelect_1pxzv_186 .ant-select-suffix {
   color: var(--j2-color-text-secondary);
 }
+
+/* A line between option groups, drawn on every group after the first. */
+._groupDivider_1pxzv_191 {
+  border-top: 1px solid var(--j2-color-border-secondary);
+  border-radius: 0 !important;
+}
 ._pill_16f8w_1 {
   display: inline-flex;
   align-items: center;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@j2-health/design-system",
-  "version": "0.6.2",
+  "version": "0.6.4",
   "type": "module",
   "description": "J2 Health shared React component library",
   "repository": {
@@ -60,7 +60,7 @@
     "@dnd-kit/utilities": "^3.2.2",
     "@highcharts/react": "^5.0.0",
     "@phosphor-icons/react": "^2.1.7",
-    "antd": "^6.6.5",
+    "antd": "^6.6.6",
     "classnames": "^2.5.1",
     "formik": "^2.4.6",
     "highcharts": "^13.1.1",
@@ -76,51 +76,51 @@
     "@dnd-kit/utilities": "^3.2.2",
     "@eslint/compat": "^2.1.1",
     "@eslint/js": "^10.0.1",
-    "@highcharts/react": "^5.3.0",
+    "@highcharts/react": "^5.4.0",
     "@phosphor-icons/react": "^2.1.7",
-    "@storybook/addon-docs": "^10.6.1",
-    "@storybook/addon-links": "^10.6.1",
-    "@storybook/react-vite": "^10.6.1",
+    "@storybook/addon-docs": "^10.6.2",
+    "@storybook/addon-links": "^10.6.2",
+    "@storybook/react-vite": "^10.6.2",
     "@tailwindcss/postcss": "^4.3.3",
     "@testing-library/jest-dom": "^7.0.1",
     "@testing-library/react": "^16.3.3",
-    "@types/lodash": "^4.17.14",
+    "@types/lodash": "^4.17.26",
     "@types/react": "^19.2.18",
     "@types/react-dom": "^19.2.5",
     "@vitejs/plugin-react": "^6.1.2",
-    "@vitest/coverage-v8": "^5.0.1",
-    "antd": "^6.6.5",
+    "@vitest/coverage-v8": "^5.0.5",
+    "antd": "^6.6.6",
     "autoprefixer": "^10.6.1",
     "classnames": "^2.5.1",
-    "eslint": "^10.12.0",
+    "eslint": "^10.13.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-react": "^7.37.2",
     "eslint-plugin-react-hooks": "^7.1.1",
     "eslint-plugin-react-refresh": "^0.5.7",
-    "eslint-plugin-storybook": "^10.6.1",
+    "eslint-plugin-storybook": "^10.6.2",
     "formik": "^2.4.6",
     "globals": "^17.13.0",
-    "happy-dom": "^20.14.5",
+    "happy-dom": "^21.0.3",
     "highcharts": "^13.1.1",
     "lodash": "^4.18.1",
-    "postcss": "^8.5.29",
-    "prettier": "^3.9.9",
+    "postcss": "^8.5.31",
+    "prettier": "^3.9.10",
     "react": "^19.2.8",
-    "react-dom": "^19.2.8",
+    "react-dom": "^19.3.1",
     "semver": "^7.8.5",
-    "storybook": "^10.6.1",
+    "storybook": "^10.6.2",
     "tailwindcss": "^4.3.3",
     "ts-node": "^10.9.2",
     "typescript": "^5.5.3",
-    "typescript-eslint": "^8.71.1",
-    "vite": "^8.3.3",
+    "typescript-eslint": "^8.71.2",
+    "vite": "^8.3.4",
     "vite-plugin-dts": "^5.1.2",
     "vite-plugin-svgr": "^5.2.0",
-    "vitest": "^5.0.3",
+    "vitest": "^5.0.4",
     "yup": "^1.4.0"
   },
   "optionalDependencies": {
-    "@rollup/rollup-linux-x64-gnu": "^4.64.0"
+    "@rollup/rollup-linux-x64-gnu": "^4.64.10"
   },
   "eslintConfig": {
     "extends": [