@neo4j-ndl/react 4.7.5 → 4.7.6

package/lib/cjs/wizard/Wizard.js

@@ -134,7 +134,9 @@ const WizardLarge = (_a) => {
             }), steps.map((step, index) => {
                 return ((0, jsx_runtime_1.jsx)("div", { className: stepClasses(index, step), style: {
                         gridRow: orientation === 'vertical' ? index + 1 : '',
-                    }, children: (0, jsx_runtime_1.jsx)(Circle, { status: step.status === 'error'
+                    }, "aria-current": getStatus(activeStepIndex, index) === 'active'
+                        ? 'step'
+                        : undefined, children: (0, jsx_runtime_1.jsx)(Circle, { status: step.status === 'error'
                             ? 'error'
                             : getStatus(activeStepIndex, index), number: index + 1, text: step.content, alignment: alignment }) }, index));
             })] })));
@@ -155,7 +157,9 @@ const WizardSmall = (_a) => {
         [`ndl-wizard-align-${alignment}`]: alignment,
     });
     return ((0, jsx_runtime_1.jsxs)(Component, Object.assign({ className: wizardClasses, style: style, ref: ref }, restProps, htmlAttributes, { children: [(0, jsx_runtime_1.jsx)("div", { className: "ndl-wizard-steps-line" }), steps.map((step, index) => {
-                return ((0, jsx_runtime_1.jsx)("div", { className: stepClasses(index), children: (0, jsx_runtime_1.jsx)("div", { className: "ndl-wizard-circle" }) }, index));
+                return ((0, jsx_runtime_1.jsx)("div", { className: stepClasses(index), "aria-current": getStatus(activeStepIndex, index) === 'active'
+                        ? 'step'
+                        : undefined, children: (0, jsx_runtime_1.jsx)("div", { className: "ndl-wizard-circle" }) }, index));
             }), (0, jsx_runtime_1.jsx)("div", { className: "ndl-wizard-steps-line" })] })));
 };
 exports.WizardSmall = WizardSmall;

package/lib/cjs/wizard/Wizard.js.map

@@ -1 +1 @@
-{"version":3,"file":"Wizard.js","sourceRoot":"","sources":["../../../src/wizard/Wizard.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\nimport classNames from 'classnames';\nimport React, { useEffect } from 'react';\n\nimport { type PolymorphicCommonProps } from '../_common/types';\nimport { Typography } from '../typography';\n\ninterface Step {\n  /** Content displayed as the step label */\n  content: React.ReactNode;\n  /** Explicit status for the step. When set to `error`, the step is rendered in an error state */\n  status?: 'default' | 'error';\n}\n\ninterface BaseWizardProps {\n  /** Layout orientation of the wizard */\n  orientation?: 'horizontal' | 'vertical';\n  /** Visual size of the wizard */\n  size?: 'small' | 'large';\n  /** Additional style */\n  style?: React.CSSProperties;\n  /** Additional class name */\n  className?: string;\n  /** Zero-based index of the active step */\n  activeStepIndex: number;\n  /** Steps to display in the wizard */\n  steps: Step[];\n}\n\ntype HorizontalWizardProps = BaseWizardProps & {\n  orientation: 'horizontal';\n  /** Alignment of labels/content, is set to `middle` for horizontal orientation and can be set to `top` or `middle` for vertical orientation and is not applicable when `orientation` is undefined */\n  alignment?: 'middle';\n};\n\ntype VerticalWizardProps = BaseWizardProps & {\n  orientation: 'vertical';\n  /** Alignment of labels/content, is set to `middle` for horizontal orientation and can be set to `top` or `middle` for vertical orientation and is not applicable when `orientation` is undefined */\n  alignment?: 'top' | 'middle';\n};\n\ntype NonOrientationWizardProps = BaseWizardProps & {\n  orientation: undefined;\n  /** Alignment of labels/content, is set to `middle` for horizontal orientation and can be set to `top` or `middle` for vertical orientation and is not applicable when `orientation` is undefined */\n  alignment?: never;\n};\n\ntype WizardProps =\n  | HorizontalWizardProps\n  | VerticalWizardProps\n  | NonOrientationWizardProps;\n\nexport const Wizard = <T extends React.ElementType = 'div'>({\n  as,\n  className,\n  style,\n  size = 'large',\n  steps,\n  activeStepIndex,\n  orientation,\n  htmlAttributes,\n  alignment = orientation === 'vertical' ? 'top' : 'middle',\n  ref,\n}: PolymorphicCommonProps<T, WizardProps>) => {\n  useEffect(() => {\n    if (activeStepIndex > steps.length - 1 || activeStepIndex < 0) {\n      console.warn(\n        `[🪡 Needle]: The activeStepIndex in Wizard is out of bounds. The activeStepIndex is ${activeStepIndex} and the number of steps is ${steps.length}.`,\n      );\n    }\n  }, [activeStepIndex, steps.length]);\n\n  switch (size) {\n    case 'small':\n      return (\n        <WizardSmall\n          as={as}\n          orientation={orientation}\n          style={style}\n          className={className}\n          steps={steps}\n          activeStepIndex={activeStepIndex}\n          ref={ref}\n          htmlAttributes={htmlAttributes}\n          alignment={alignment}\n        />\n      );\n    case 'large':\n      return (\n        <WizardLarge\n          as={as}\n          orientation={orientation}\n          style={style}\n          className={className}\n          steps={steps}\n          activeStepIndex={activeStepIndex}\n          ref={ref}\n          htmlAttributes={htmlAttributes}\n          alignment={alignment}\n        />\n      );\n  }\n};\n\nconst getStatus = (activeStepIndex: number, stepIndex: number) =>\n  stepIndex === activeStepIndex\n    ? 'active'\n    : activeStepIndex < stepIndex\n      ? 'incomplete'\n      : 'complete';\n\nconst WizardLarge = <T extends React.ElementType = 'div'>({\n  orientation = 'horizontal',\n  activeStepIndex,\n  steps,\n  as,\n  style,\n  className,\n  htmlAttributes,\n  alignment,\n  ref,\n  ...restProps\n}: PolymorphicCommonProps<T, Omit<WizardProps, 'size'>>) => {\n  const Component: React.ElementType = as || 'div';\n\n  const wizardClasses = classNames(\n    'ndl-wizard',\n    'ndl-wizard-large',\n    {\n      'ndl-horizontal': orientation === 'horizontal',\n      'ndl-vertical': orientation === 'vertical',\n      [`ndl-wizard-align-${alignment}`]: alignment,\n    },\n    className,\n  );\n\n  const componentStyle = {\n    gridTemplateColumns:\n      orientation === 'horizontal'\n        ? `repeat(${steps.length}, 1fr)`\n        : `32px 1fr`,\n\n    gridTemplateRows:\n      orientation === 'vertical' && `repeat(${steps.length}, 1fr)`,\n  };\n\n  const stepClasses = (index: number, step: Step) => {\n    const status = getStatus(activeStepIndex, index);\n\n    return classNames('ndl-wizard-step', {\n      'ndl-horizontal': orientation === 'horizontal',\n      'ndl-vertical': orientation === 'vertical',\n      'ndl-wizard-step-line-right': index < steps.length - 1,\n      'ndl-wizard-step-line-left': index > 0,\n      'ndl-wizard-step-complete': status === 'complete',\n      'ndl-wizard-step-active': status === 'active',\n      'ndl-wizard-step-error': step.status === 'error',\n      [`ndl-wizard-align-${alignment}`]: alignment,\n    });\n  };\n\n  return (\n    <Component\n      className={wizardClasses}\n      style={{ ...style, ...componentStyle }}\n      ref={ref}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      {/* iterate over the steps to render the text content (the first row of the component)*/}\n      {steps.map((step, index) => {\n        if (typeof step.content === 'string') {\n          const wizardStepClasses = classNames('ndl-wizard-step-text', {\n            'ndl-vertical': orientation === 'vertical',\n            'ndl-horizontal': orientation === 'horizontal',\n            [`ndl-wizard-align-${alignment}`]: alignment,\n            'ndl-wizard-step-incomplete':\n              getStatus(activeStepIndex, index) === 'incomplete',\n          });\n\n          return (\n            <div key={index} className={wizardStepClasses}>\n              <Typography variant=\"body-large\">{step.content}</Typography>\n            </div>\n          );\n        } else {\n          return <React.Fragment key={index}>{step.content}</React.Fragment>;\n        }\n      })}\n      {/* iterate over the steps to render the circles (iterates again to render the second row of the component) */}\n      {steps.map((step, index) => {\n        return (\n          <div\n            className={stepClasses(index, step)}\n            key={index}\n            style={{\n              gridRow: orientation === 'vertical' ? index + 1 : '',\n            }}\n          >\n            <Circle\n              status={\n                step.status === 'error'\n                  ? 'error'\n                  : getStatus(activeStepIndex, index)\n              }\n              number={index + 1}\n              text={step.content}\n              alignment={alignment}\n            />\n          </div>\n        );\n      })}\n    </Component>\n  );\n};\n\nexport const WizardSmall = <T extends React.ElementType = 'div'>({\n  orientation = 'horizontal',\n  activeStepIndex,\n  steps,\n  as,\n  className,\n  htmlAttributes,\n  style,\n  alignment = 'middle',\n  ref,\n  ...restProps\n}: PolymorphicCommonProps<T, Omit<WizardProps, 'size'>>) => {\n  const Component = as ?? 'div';\n\n  const wizardClasses = classNames(\n    'ndl-wizard',\n    'ndl-wizard-small',\n    {\n      'ndl-horizontal': orientation === 'horizontal',\n      'ndl-vertical': orientation === 'vertical',\n      [`ndl-wizard-align-${alignment}`]: alignment,\n    },\n    className,\n  );\n\n  const stepClasses = (index: number) =>\n    classNames('ndl-wizard-step', {\n      'ndl-horizontal': orientation === 'horizontal',\n      'ndl-vertical': orientation === 'vertical',\n      'ndl-wizard-step-active': getStatus(activeStepIndex, index) === 'active',\n      'ndl-wizard-step-complete':\n        getStatus(activeStepIndex, index) === 'complete',\n      [`ndl-wizard-align-${alignment}`]: alignment,\n    });\n\n  return (\n    <Component\n      className={wizardClasses}\n      style={style}\n      ref={ref}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      <div className=\"ndl-wizard-steps-line\" />\n      {steps.map((step, index) => {\n        return (\n          <div key={index} className={stepClasses(index)}>\n            <div className=\"ndl-wizard-circle\"></div>\n          </div>\n        );\n      })}\n      <div className=\"ndl-wizard-steps-line\" />\n    </Component>\n  );\n};\n\nconst Circle = ({\n  status,\n  number,\n  alignment = 'middle',\n}: {\n  status: 'active' | 'complete' | 'incomplete' | 'error';\n  number: number;\n  text: React.ReactNode;\n  alignment?: 'top' | 'middle';\n}) => {\n  const innerCircleClasses = classNames({\n    'n-fill-danger-bg-strong': status === 'error',\n    'n-fill-neutral-bg-stronger': status === 'incomplete',\n    'n-fill-primary-bg-strong': status === 'complete' || status === 'active',\n  });\n  const outerCircleClasses = classNames('ndl-wizard-circle', {\n    [`ndl-wizard-align-${alignment}`]: alignment,\n  });\n\n  return (\n    <div className={outerCircleClasses}>\n      <svg aria-hidden=\"true\">\n        {status === 'active' && (\n          <g>\n            <circle\n              className=\"n-stroke-primary-bg-strong\"\n              style={{ fill: 'transparent', strokeWidth: 2 }}\n              cx=\"16\"\n              cy=\"16\"\n              r=\"14\"\n            />\n          </g>\n        )}\n\n        <circle className={innerCircleClasses} cx=\"16\" cy=\"16\" r=\"12\" />\n        <text\n          x=\"50%\"\n          y=\"50%\"\n          fontSize={14}\n          className=\"n-fill-neutral-bg-weak\"\n          textAnchor=\"middle\"\n          dominantBaseline=\"middle\"\n          dy=\"0.1em\"\n        >\n          {status === 'error' ? '!' : number}\n        </text>\n      </svg>\n    </div>\n  );\n};\n"]}
+{"version":3,"file":"Wizard.js","sourceRoot":"","sources":["../../../src/wizard/Wizard.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\nimport classNames from 'classnames';\nimport React, { useEffect } from 'react';\n\nimport { type PolymorphicCommonProps } from '../_common/types';\nimport { Typography } from '../typography';\n\ninterface Step {\n  /** Content displayed as the step label */\n  content: React.ReactNode;\n  /** Explicit status for the step. When set to `error`, the step is rendered in an error state */\n  status?: 'default' | 'error';\n}\n\ninterface BaseWizardProps {\n  /** Layout orientation of the wizard */\n  orientation?: 'horizontal' | 'vertical';\n  /** Visual size of the wizard */\n  size?: 'small' | 'large';\n  /** Additional style */\n  style?: React.CSSProperties;\n  /** Additional class name */\n  className?: string;\n  /** Zero-based index of the active step */\n  activeStepIndex: number;\n  /** Steps to display in the wizard */\n  steps: Step[];\n}\n\ntype HorizontalWizardProps = BaseWizardProps & {\n  orientation: 'horizontal';\n  /** Alignment of labels/content, is set to `middle` for horizontal orientation and can be set to `top` or `middle` for vertical orientation and is not applicable when `orientation` is undefined */\n  alignment?: 'middle';\n};\n\ntype VerticalWizardProps = BaseWizardProps & {\n  orientation: 'vertical';\n  /** Alignment of labels/content, is set to `middle` for horizontal orientation and can be set to `top` or `middle` for vertical orientation and is not applicable when `orientation` is undefined */\n  alignment?: 'top' | 'middle';\n};\n\ntype NonOrientationWizardProps = BaseWizardProps & {\n  orientation: undefined;\n  /** Alignment of labels/content, is set to `middle` for horizontal orientation and can be set to `top` or `middle` for vertical orientation and is not applicable when `orientation` is undefined */\n  alignment?: never;\n};\n\ntype WizardProps =\n  | HorizontalWizardProps\n  | VerticalWizardProps\n  | NonOrientationWizardProps;\n\nexport const Wizard = <T extends React.ElementType = 'div'>({\n  as,\n  className,\n  style,\n  size = 'large',\n  steps,\n  activeStepIndex,\n  orientation,\n  htmlAttributes,\n  alignment = orientation === 'vertical' ? 'top' : 'middle',\n  ref,\n}: PolymorphicCommonProps<T, WizardProps>) => {\n  useEffect(() => {\n    if (activeStepIndex > steps.length - 1 || activeStepIndex < 0) {\n      console.warn(\n        `[🪡 Needle]: The activeStepIndex in Wizard is out of bounds. The activeStepIndex is ${activeStepIndex} and the number of steps is ${steps.length}.`,\n      );\n    }\n  }, [activeStepIndex, steps.length]);\n\n  switch (size) {\n    case 'small':\n      return (\n        <WizardSmall\n          as={as}\n          orientation={orientation}\n          style={style}\n          className={className}\n          steps={steps}\n          activeStepIndex={activeStepIndex}\n          ref={ref}\n          htmlAttributes={htmlAttributes}\n          alignment={alignment}\n        />\n      );\n    case 'large':\n      return (\n        <WizardLarge\n          as={as}\n          orientation={orientation}\n          style={style}\n          className={className}\n          steps={steps}\n          activeStepIndex={activeStepIndex}\n          ref={ref}\n          htmlAttributes={htmlAttributes}\n          alignment={alignment}\n        />\n      );\n  }\n};\n\nconst getStatus = (activeStepIndex: number, stepIndex: number) =>\n  stepIndex === activeStepIndex\n    ? 'active'\n    : activeStepIndex < stepIndex\n      ? 'incomplete'\n      : 'complete';\n\nconst WizardLarge = <T extends React.ElementType = 'div'>({\n  orientation = 'horizontal',\n  activeStepIndex,\n  steps,\n  as,\n  style,\n  className,\n  htmlAttributes,\n  alignment,\n  ref,\n  ...restProps\n}: PolymorphicCommonProps<T, Omit<WizardProps, 'size'>>) => {\n  const Component: React.ElementType = as || 'div';\n\n  const wizardClasses = classNames(\n    'ndl-wizard',\n    'ndl-wizard-large',\n    {\n      'ndl-horizontal': orientation === 'horizontal',\n      'ndl-vertical': orientation === 'vertical',\n      [`ndl-wizard-align-${alignment}`]: alignment,\n    },\n    className,\n  );\n\n  const componentStyle = {\n    gridTemplateColumns:\n      orientation === 'horizontal'\n        ? `repeat(${steps.length}, 1fr)`\n        : `32px 1fr`,\n\n    gridTemplateRows:\n      orientation === 'vertical' && `repeat(${steps.length}, 1fr)`,\n  };\n\n  const stepClasses = (index: number, step: Step) => {\n    const status = getStatus(activeStepIndex, index);\n\n    return classNames('ndl-wizard-step', {\n      'ndl-horizontal': orientation === 'horizontal',\n      'ndl-vertical': orientation === 'vertical',\n      'ndl-wizard-step-line-right': index < steps.length - 1,\n      'ndl-wizard-step-line-left': index > 0,\n      'ndl-wizard-step-complete': status === 'complete',\n      'ndl-wizard-step-active': status === 'active',\n      'ndl-wizard-step-error': step.status === 'error',\n      [`ndl-wizard-align-${alignment}`]: alignment,\n    });\n  };\n\n  return (\n    <Component\n      className={wizardClasses}\n      style={{ ...style, ...componentStyle }}\n      ref={ref}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      {/* iterate over the steps to render the text content (the first row of the component)*/}\n      {steps.map((step, index) => {\n        if (typeof step.content === 'string') {\n          const wizardStepClasses = classNames('ndl-wizard-step-text', {\n            'ndl-vertical': orientation === 'vertical',\n            'ndl-horizontal': orientation === 'horizontal',\n            [`ndl-wizard-align-${alignment}`]: alignment,\n            'ndl-wizard-step-incomplete':\n              getStatus(activeStepIndex, index) === 'incomplete',\n          });\n\n          return (\n            <div key={index} className={wizardStepClasses}>\n              <Typography variant=\"body-large\">{step.content}</Typography>\n            </div>\n          );\n        } else {\n          return <React.Fragment key={index}>{step.content}</React.Fragment>;\n        }\n      })}\n      {/* iterate over the steps to render the circles (iterates again to render the second row of the component) */}\n      {steps.map((step, index) => {\n        return (\n          <div\n            className={stepClasses(index, step)}\n            key={index}\n            style={{\n              gridRow: orientation === 'vertical' ? index + 1 : '',\n            }}\n            aria-current={\n              getStatus(activeStepIndex, index) === 'active'\n                ? 'step'\n                : undefined\n            }\n          >\n            <Circle\n              status={\n                step.status === 'error'\n                  ? 'error'\n                  : getStatus(activeStepIndex, index)\n              }\n              number={index + 1}\n              text={step.content}\n              alignment={alignment}\n            />\n          </div>\n        );\n      })}\n    </Component>\n  );\n};\n\nexport const WizardSmall = <T extends React.ElementType = 'div'>({\n  orientation = 'horizontal',\n  activeStepIndex,\n  steps,\n  as,\n  className,\n  htmlAttributes,\n  style,\n  alignment = 'middle',\n  ref,\n  ...restProps\n}: PolymorphicCommonProps<T, Omit<WizardProps, 'size'>>) => {\n  const Component = as ?? 'div';\n\n  const wizardClasses = classNames(\n    'ndl-wizard',\n    'ndl-wizard-small',\n    {\n      'ndl-horizontal': orientation === 'horizontal',\n      'ndl-vertical': orientation === 'vertical',\n      [`ndl-wizard-align-${alignment}`]: alignment,\n    },\n    className,\n  );\n\n  const stepClasses = (index: number) =>\n    classNames('ndl-wizard-step', {\n      'ndl-horizontal': orientation === 'horizontal',\n      'ndl-vertical': orientation === 'vertical',\n      'ndl-wizard-step-active': getStatus(activeStepIndex, index) === 'active',\n      'ndl-wizard-step-complete':\n        getStatus(activeStepIndex, index) === 'complete',\n      [`ndl-wizard-align-${alignment}`]: alignment,\n    });\n\n  return (\n    <Component\n      className={wizardClasses}\n      style={style}\n      ref={ref}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      <div className=\"ndl-wizard-steps-line\" />\n      {steps.map((step, index) => {\n        return (\n          <div\n            key={index}\n            className={stepClasses(index)}\n            aria-current={\n              getStatus(activeStepIndex, index) === 'active'\n                ? 'step'\n                : undefined\n            }\n          >\n            <div className=\"ndl-wizard-circle\"></div>\n          </div>\n        );\n      })}\n      <div className=\"ndl-wizard-steps-line\" />\n    </Component>\n  );\n};\n\nconst Circle = ({\n  status,\n  number,\n  alignment = 'middle',\n}: {\n  status: 'active' | 'complete' | 'incomplete' | 'error';\n  number: number;\n  text: React.ReactNode;\n  alignment?: 'top' | 'middle';\n}) => {\n  const innerCircleClasses = classNames({\n    'n-fill-danger-bg-strong': status === 'error',\n    'n-fill-neutral-bg-stronger': status === 'incomplete',\n    'n-fill-primary-bg-strong': status === 'complete' || status === 'active',\n  });\n  const outerCircleClasses = classNames('ndl-wizard-circle', {\n    [`ndl-wizard-align-${alignment}`]: alignment,\n  });\n\n  return (\n    <div className={outerCircleClasses}>\n      <svg aria-hidden=\"true\">\n        {status === 'active' && (\n          <g>\n            <circle\n              className=\"n-stroke-primary-bg-strong\"\n              style={{ fill: 'transparent', strokeWidth: 2 }}\n              cx=\"16\"\n              cy=\"16\"\n              r=\"14\"\n            />\n          </g>\n        )}\n\n        <circle className={innerCircleClasses} cx=\"16\" cy=\"16\" r=\"12\" />\n        <text\n          x=\"50%\"\n          y=\"50%\"\n          fontSize={14}\n          className=\"n-fill-neutral-bg-weak\"\n          textAnchor=\"middle\"\n          dominantBaseline=\"middle\"\n          dy=\"0.1em\"\n        >\n          {status === 'error' ? '!' : number}\n        </text>\n      </svg>\n    </div>\n  );\n};\n"]}

package/lib/esm/wizard/Wizard.js

@@ -94,7 +94,9 @@ const WizardLarge = (_a) => {
             }), steps.map((step, index) => {
                 return (_jsx("div", { className: stepClasses(index, step), style: {
                         gridRow: orientation === 'vertical' ? index + 1 : '',
-                    }, children: _jsx(Circle, { status: step.status === 'error'
+                    }, "aria-current": getStatus(activeStepIndex, index) === 'active'
+                        ? 'step'
+                        : undefined, children: _jsx(Circle, { status: step.status === 'error'
                             ? 'error'
                             : getStatus(activeStepIndex, index), number: index + 1, text: step.content, alignment: alignment }) }, index));
             })] })));
@@ -115,7 +117,9 @@ export const WizardSmall = (_a) => {
         [`ndl-wizard-align-${alignment}`]: alignment,
     });
     return (_jsxs(Component, Object.assign({ className: wizardClasses, style: style, ref: ref }, restProps, htmlAttributes, { children: [_jsx("div", { className: "ndl-wizard-steps-line" }), steps.map((step, index) => {
-                return (_jsx("div", { className: stepClasses(index), children: _jsx("div", { className: "ndl-wizard-circle" }) }, index));
+                return (_jsx("div", { className: stepClasses(index), "aria-current": getStatus(activeStepIndex, index) === 'active'
+                        ? 'step'
+                        : undefined, children: _jsx("div", { className: "ndl-wizard-circle" }) }, index));
             }), _jsx("div", { className: "ndl-wizard-steps-line" })] })));
 };
 const Circle = ({ status, number, alignment = 'middle', }) => {

package/lib/esm/wizard/Wizard.js.map

@@ -1 +1 @@
-{"version":3,"file":"Wizard.js","sourceRoot":"","sources":["../../../src/wizard/Wizard.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\nimport classNames from 'classnames';\nimport React, { useEffect } from 'react';\n\nimport { type PolymorphicCommonProps } from '../_common/types';\nimport { Typography } from '../typography';\n\ninterface Step {\n  /** Content displayed as the step label */\n  content: React.ReactNode;\n  /** Explicit status for the step. When set to `error`, the step is rendered in an error state */\n  status?: 'default' | 'error';\n}\n\ninterface BaseWizardProps {\n  /** Layout orientation of the wizard */\n  orientation?: 'horizontal' | 'vertical';\n  /** Visual size of the wizard */\n  size?: 'small' | 'large';\n  /** Additional style */\n  style?: React.CSSProperties;\n  /** Additional class name */\n  className?: string;\n  /** Zero-based index of the active step */\n  activeStepIndex: number;\n  /** Steps to display in the wizard */\n  steps: Step[];\n}\n\ntype HorizontalWizardProps = BaseWizardProps & {\n  orientation: 'horizontal';\n  /** Alignment of labels/content, is set to `middle` for horizontal orientation and can be set to `top` or `middle` for vertical orientation and is not applicable when `orientation` is undefined */\n  alignment?: 'middle';\n};\n\ntype VerticalWizardProps = BaseWizardProps & {\n  orientation: 'vertical';\n  /** Alignment of labels/content, is set to `middle` for horizontal orientation and can be set to `top` or `middle` for vertical orientation and is not applicable when `orientation` is undefined */\n  alignment?: 'top' | 'middle';\n};\n\ntype NonOrientationWizardProps = BaseWizardProps & {\n  orientation: undefined;\n  /** Alignment of labels/content, is set to `middle` for horizontal orientation and can be set to `top` or `middle` for vertical orientation and is not applicable when `orientation` is undefined */\n  alignment?: never;\n};\n\ntype WizardProps =\n  | HorizontalWizardProps\n  | VerticalWizardProps\n  | NonOrientationWizardProps;\n\nexport const Wizard = <T extends React.ElementType = 'div'>({\n  as,\n  className,\n  style,\n  size = 'large',\n  steps,\n  activeStepIndex,\n  orientation,\n  htmlAttributes,\n  alignment = orientation === 'vertical' ? 'top' : 'middle',\n  ref,\n}: PolymorphicCommonProps<T, WizardProps>) => {\n  useEffect(() => {\n    if (activeStepIndex > steps.length - 1 || activeStepIndex < 0) {\n      console.warn(\n        `[🪡 Needle]: The activeStepIndex in Wizard is out of bounds. The activeStepIndex is ${activeStepIndex} and the number of steps is ${steps.length}.`,\n      );\n    }\n  }, [activeStepIndex, steps.length]);\n\n  switch (size) {\n    case 'small':\n      return (\n        <WizardSmall\n          as={as}\n          orientation={orientation}\n          style={style}\n          className={className}\n          steps={steps}\n          activeStepIndex={activeStepIndex}\n          ref={ref}\n          htmlAttributes={htmlAttributes}\n          alignment={alignment}\n        />\n      );\n    case 'large':\n      return (\n        <WizardLarge\n          as={as}\n          orientation={orientation}\n          style={style}\n          className={className}\n          steps={steps}\n          activeStepIndex={activeStepIndex}\n          ref={ref}\n          htmlAttributes={htmlAttributes}\n          alignment={alignment}\n        />\n      );\n  }\n};\n\nconst getStatus = (activeStepIndex: number, stepIndex: number) =>\n  stepIndex === activeStepIndex\n    ? 'active'\n    : activeStepIndex < stepIndex\n      ? 'incomplete'\n      : 'complete';\n\nconst WizardLarge = <T extends React.ElementType = 'div'>({\n  orientation = 'horizontal',\n  activeStepIndex,\n  steps,\n  as,\n  style,\n  className,\n  htmlAttributes,\n  alignment,\n  ref,\n  ...restProps\n}: PolymorphicCommonProps<T, Omit<WizardProps, 'size'>>) => {\n  const Component: React.ElementType = as || 'div';\n\n  const wizardClasses = classNames(\n    'ndl-wizard',\n    'ndl-wizard-large',\n    {\n      'ndl-horizontal': orientation === 'horizontal',\n      'ndl-vertical': orientation === 'vertical',\n      [`ndl-wizard-align-${alignment}`]: alignment,\n    },\n    className,\n  );\n\n  const componentStyle = {\n    gridTemplateColumns:\n      orientation === 'horizontal'\n        ? `repeat(${steps.length}, 1fr)`\n        : `32px 1fr`,\n\n    gridTemplateRows:\n      orientation === 'vertical' && `repeat(${steps.length}, 1fr)`,\n  };\n\n  const stepClasses = (index: number, step: Step) => {\n    const status = getStatus(activeStepIndex, index);\n\n    return classNames('ndl-wizard-step', {\n      'ndl-horizontal': orientation === 'horizontal',\n      'ndl-vertical': orientation === 'vertical',\n      'ndl-wizard-step-line-right': index < steps.length - 1,\n      'ndl-wizard-step-line-left': index > 0,\n      'ndl-wizard-step-complete': status === 'complete',\n      'ndl-wizard-step-active': status === 'active',\n      'ndl-wizard-step-error': step.status === 'error',\n      [`ndl-wizard-align-${alignment}`]: alignment,\n    });\n  };\n\n  return (\n    <Component\n      className={wizardClasses}\n      style={{ ...style, ...componentStyle }}\n      ref={ref}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      {/* iterate over the steps to render the text content (the first row of the component)*/}\n      {steps.map((step, index) => {\n        if (typeof step.content === 'string') {\n          const wizardStepClasses = classNames('ndl-wizard-step-text', {\n            'ndl-vertical': orientation === 'vertical',\n            'ndl-horizontal': orientation === 'horizontal',\n            [`ndl-wizard-align-${alignment}`]: alignment,\n            'ndl-wizard-step-incomplete':\n              getStatus(activeStepIndex, index) === 'incomplete',\n          });\n\n          return (\n            <div key={index} className={wizardStepClasses}>\n              <Typography variant=\"body-large\">{step.content}</Typography>\n            </div>\n          );\n        } else {\n          return <React.Fragment key={index}>{step.content}</React.Fragment>;\n        }\n      })}\n      {/* iterate over the steps to render the circles (iterates again to render the second row of the component) */}\n      {steps.map((step, index) => {\n        return (\n          <div\n            className={stepClasses(index, step)}\n            key={index}\n            style={{\n              gridRow: orientation === 'vertical' ? index + 1 : '',\n            }}\n          >\n            <Circle\n              status={\n                step.status === 'error'\n                  ? 'error'\n                  : getStatus(activeStepIndex, index)\n              }\n              number={index + 1}\n              text={step.content}\n              alignment={alignment}\n            />\n          </div>\n        );\n      })}\n    </Component>\n  );\n};\n\nexport const WizardSmall = <T extends React.ElementType = 'div'>({\n  orientation = 'horizontal',\n  activeStepIndex,\n  steps,\n  as,\n  className,\n  htmlAttributes,\n  style,\n  alignment = 'middle',\n  ref,\n  ...restProps\n}: PolymorphicCommonProps<T, Omit<WizardProps, 'size'>>) => {\n  const Component = as ?? 'div';\n\n  const wizardClasses = classNames(\n    'ndl-wizard',\n    'ndl-wizard-small',\n    {\n      'ndl-horizontal': orientation === 'horizontal',\n      'ndl-vertical': orientation === 'vertical',\n      [`ndl-wizard-align-${alignment}`]: alignment,\n    },\n    className,\n  );\n\n  const stepClasses = (index: number) =>\n    classNames('ndl-wizard-step', {\n      'ndl-horizontal': orientation === 'horizontal',\n      'ndl-vertical': orientation === 'vertical',\n      'ndl-wizard-step-active': getStatus(activeStepIndex, index) === 'active',\n      'ndl-wizard-step-complete':\n        getStatus(activeStepIndex, index) === 'complete',\n      [`ndl-wizard-align-${alignment}`]: alignment,\n    });\n\n  return (\n    <Component\n      className={wizardClasses}\n      style={style}\n      ref={ref}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      <div className=\"ndl-wizard-steps-line\" />\n      {steps.map((step, index) => {\n        return (\n          <div key={index} className={stepClasses(index)}>\n            <div className=\"ndl-wizard-circle\"></div>\n          </div>\n        );\n      })}\n      <div className=\"ndl-wizard-steps-line\" />\n    </Component>\n  );\n};\n\nconst Circle = ({\n  status,\n  number,\n  alignment = 'middle',\n}: {\n  status: 'active' | 'complete' | 'incomplete' | 'error';\n  number: number;\n  text: React.ReactNode;\n  alignment?: 'top' | 'middle';\n}) => {\n  const innerCircleClasses = classNames({\n    'n-fill-danger-bg-strong': status === 'error',\n    'n-fill-neutral-bg-stronger': status === 'incomplete',\n    'n-fill-primary-bg-strong': status === 'complete' || status === 'active',\n  });\n  const outerCircleClasses = classNames('ndl-wizard-circle', {\n    [`ndl-wizard-align-${alignment}`]: alignment,\n  });\n\n  return (\n    <div className={outerCircleClasses}>\n      <svg aria-hidden=\"true\">\n        {status === 'active' && (\n          <g>\n            <circle\n              className=\"n-stroke-primary-bg-strong\"\n              style={{ fill: 'transparent', strokeWidth: 2 }}\n              cx=\"16\"\n              cy=\"16\"\n              r=\"14\"\n            />\n          </g>\n        )}\n\n        <circle className={innerCircleClasses} cx=\"16\" cy=\"16\" r=\"12\" />\n        <text\n          x=\"50%\"\n          y=\"50%\"\n          fontSize={14}\n          className=\"n-fill-neutral-bg-weak\"\n          textAnchor=\"middle\"\n          dominantBaseline=\"middle\"\n          dy=\"0.1em\"\n        >\n          {status === 'error' ? '!' : number}\n        </text>\n      </svg>\n    </div>\n  );\n};\n"]}
+{"version":3,"file":"Wizard.js","sourceRoot":"","sources":["../../../src/wizard/Wizard.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\nimport classNames from 'classnames';\nimport React, { useEffect } from 'react';\n\nimport { type PolymorphicCommonProps } from '../_common/types';\nimport { Typography } from '../typography';\n\ninterface Step {\n  /** Content displayed as the step label */\n  content: React.ReactNode;\n  /** Explicit status for the step. When set to `error`, the step is rendered in an error state */\n  status?: 'default' | 'error';\n}\n\ninterface BaseWizardProps {\n  /** Layout orientation of the wizard */\n  orientation?: 'horizontal' | 'vertical';\n  /** Visual size of the wizard */\n  size?: 'small' | 'large';\n  /** Additional style */\n  style?: React.CSSProperties;\n  /** Additional class name */\n  className?: string;\n  /** Zero-based index of the active step */\n  activeStepIndex: number;\n  /** Steps to display in the wizard */\n  steps: Step[];\n}\n\ntype HorizontalWizardProps = BaseWizardProps & {\n  orientation: 'horizontal';\n  /** Alignment of labels/content, is set to `middle` for horizontal orientation and can be set to `top` or `middle` for vertical orientation and is not applicable when `orientation` is undefined */\n  alignment?: 'middle';\n};\n\ntype VerticalWizardProps = BaseWizardProps & {\n  orientation: 'vertical';\n  /** Alignment of labels/content, is set to `middle` for horizontal orientation and can be set to `top` or `middle` for vertical orientation and is not applicable when `orientation` is undefined */\n  alignment?: 'top' | 'middle';\n};\n\ntype NonOrientationWizardProps = BaseWizardProps & {\n  orientation: undefined;\n  /** Alignment of labels/content, is set to `middle` for horizontal orientation and can be set to `top` or `middle` for vertical orientation and is not applicable when `orientation` is undefined */\n  alignment?: never;\n};\n\ntype WizardProps =\n  | HorizontalWizardProps\n  | VerticalWizardProps\n  | NonOrientationWizardProps;\n\nexport const Wizard = <T extends React.ElementType = 'div'>({\n  as,\n  className,\n  style,\n  size = 'large',\n  steps,\n  activeStepIndex,\n  orientation,\n  htmlAttributes,\n  alignment = orientation === 'vertical' ? 'top' : 'middle',\n  ref,\n}: PolymorphicCommonProps<T, WizardProps>) => {\n  useEffect(() => {\n    if (activeStepIndex > steps.length - 1 || activeStepIndex < 0) {\n      console.warn(\n        `[🪡 Needle]: The activeStepIndex in Wizard is out of bounds. The activeStepIndex is ${activeStepIndex} and the number of steps is ${steps.length}.`,\n      );\n    }\n  }, [activeStepIndex, steps.length]);\n\n  switch (size) {\n    case 'small':\n      return (\n        <WizardSmall\n          as={as}\n          orientation={orientation}\n          style={style}\n          className={className}\n          steps={steps}\n          activeStepIndex={activeStepIndex}\n          ref={ref}\n          htmlAttributes={htmlAttributes}\n          alignment={alignment}\n        />\n      );\n    case 'large':\n      return (\n        <WizardLarge\n          as={as}\n          orientation={orientation}\n          style={style}\n          className={className}\n          steps={steps}\n          activeStepIndex={activeStepIndex}\n          ref={ref}\n          htmlAttributes={htmlAttributes}\n          alignment={alignment}\n        />\n      );\n  }\n};\n\nconst getStatus = (activeStepIndex: number, stepIndex: number) =>\n  stepIndex === activeStepIndex\n    ? 'active'\n    : activeStepIndex < stepIndex\n      ? 'incomplete'\n      : 'complete';\n\nconst WizardLarge = <T extends React.ElementType = 'div'>({\n  orientation = 'horizontal',\n  activeStepIndex,\n  steps,\n  as,\n  style,\n  className,\n  htmlAttributes,\n  alignment,\n  ref,\n  ...restProps\n}: PolymorphicCommonProps<T, Omit<WizardProps, 'size'>>) => {\n  const Component: React.ElementType = as || 'div';\n\n  const wizardClasses = classNames(\n    'ndl-wizard',\n    'ndl-wizard-large',\n    {\n      'ndl-horizontal': orientation === 'horizontal',\n      'ndl-vertical': orientation === 'vertical',\n      [`ndl-wizard-align-${alignment}`]: alignment,\n    },\n    className,\n  );\n\n  const componentStyle = {\n    gridTemplateColumns:\n      orientation === 'horizontal'\n        ? `repeat(${steps.length}, 1fr)`\n        : `32px 1fr`,\n\n    gridTemplateRows:\n      orientation === 'vertical' && `repeat(${steps.length}, 1fr)`,\n  };\n\n  const stepClasses = (index: number, step: Step) => {\n    const status = getStatus(activeStepIndex, index);\n\n    return classNames('ndl-wizard-step', {\n      'ndl-horizontal': orientation === 'horizontal',\n      'ndl-vertical': orientation === 'vertical',\n      'ndl-wizard-step-line-right': index < steps.length - 1,\n      'ndl-wizard-step-line-left': index > 0,\n      'ndl-wizard-step-complete': status === 'complete',\n      'ndl-wizard-step-active': status === 'active',\n      'ndl-wizard-step-error': step.status === 'error',\n      [`ndl-wizard-align-${alignment}`]: alignment,\n    });\n  };\n\n  return (\n    <Component\n      className={wizardClasses}\n      style={{ ...style, ...componentStyle }}\n      ref={ref}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      {/* iterate over the steps to render the text content (the first row of the component)*/}\n      {steps.map((step, index) => {\n        if (typeof step.content === 'string') {\n          const wizardStepClasses = classNames('ndl-wizard-step-text', {\n            'ndl-vertical': orientation === 'vertical',\n            'ndl-horizontal': orientation === 'horizontal',\n            [`ndl-wizard-align-${alignment}`]: alignment,\n            'ndl-wizard-step-incomplete':\n              getStatus(activeStepIndex, index) === 'incomplete',\n          });\n\n          return (\n            <div key={index} className={wizardStepClasses}>\n              <Typography variant=\"body-large\">{step.content}</Typography>\n            </div>\n          );\n        } else {\n          return <React.Fragment key={index}>{step.content}</React.Fragment>;\n        }\n      })}\n      {/* iterate over the steps to render the circles (iterates again to render the second row of the component) */}\n      {steps.map((step, index) => {\n        return (\n          <div\n            className={stepClasses(index, step)}\n            key={index}\n            style={{\n              gridRow: orientation === 'vertical' ? index + 1 : '',\n            }}\n            aria-current={\n              getStatus(activeStepIndex, index) === 'active'\n                ? 'step'\n                : undefined\n            }\n          >\n            <Circle\n              status={\n                step.status === 'error'\n                  ? 'error'\n                  : getStatus(activeStepIndex, index)\n              }\n              number={index + 1}\n              text={step.content}\n              alignment={alignment}\n            />\n          </div>\n        );\n      })}\n    </Component>\n  );\n};\n\nexport const WizardSmall = <T extends React.ElementType = 'div'>({\n  orientation = 'horizontal',\n  activeStepIndex,\n  steps,\n  as,\n  className,\n  htmlAttributes,\n  style,\n  alignment = 'middle',\n  ref,\n  ...restProps\n}: PolymorphicCommonProps<T, Omit<WizardProps, 'size'>>) => {\n  const Component = as ?? 'div';\n\n  const wizardClasses = classNames(\n    'ndl-wizard',\n    'ndl-wizard-small',\n    {\n      'ndl-horizontal': orientation === 'horizontal',\n      'ndl-vertical': orientation === 'vertical',\n      [`ndl-wizard-align-${alignment}`]: alignment,\n    },\n    className,\n  );\n\n  const stepClasses = (index: number) =>\n    classNames('ndl-wizard-step', {\n      'ndl-horizontal': orientation === 'horizontal',\n      'ndl-vertical': orientation === 'vertical',\n      'ndl-wizard-step-active': getStatus(activeStepIndex, index) === 'active',\n      'ndl-wizard-step-complete':\n        getStatus(activeStepIndex, index) === 'complete',\n      [`ndl-wizard-align-${alignment}`]: alignment,\n    });\n\n  return (\n    <Component\n      className={wizardClasses}\n      style={style}\n      ref={ref}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      <div className=\"ndl-wizard-steps-line\" />\n      {steps.map((step, index) => {\n        return (\n          <div\n            key={index}\n            className={stepClasses(index)}\n            aria-current={\n              getStatus(activeStepIndex, index) === 'active'\n                ? 'step'\n                : undefined\n            }\n          >\n            <div className=\"ndl-wizard-circle\"></div>\n          </div>\n        );\n      })}\n      <div className=\"ndl-wizard-steps-line\" />\n    </Component>\n  );\n};\n\nconst Circle = ({\n  status,\n  number,\n  alignment = 'middle',\n}: {\n  status: 'active' | 'complete' | 'incomplete' | 'error';\n  number: number;\n  text: React.ReactNode;\n  alignment?: 'top' | 'middle';\n}) => {\n  const innerCircleClasses = classNames({\n    'n-fill-danger-bg-strong': status === 'error',\n    'n-fill-neutral-bg-stronger': status === 'incomplete',\n    'n-fill-primary-bg-strong': status === 'complete' || status === 'active',\n  });\n  const outerCircleClasses = classNames('ndl-wizard-circle', {\n    [`ndl-wizard-align-${alignment}`]: alignment,\n  });\n\n  return (\n    <div className={outerCircleClasses}>\n      <svg aria-hidden=\"true\">\n        {status === 'active' && (\n          <g>\n            <circle\n              className=\"n-stroke-primary-bg-strong\"\n              style={{ fill: 'transparent', strokeWidth: 2 }}\n              cx=\"16\"\n              cy=\"16\"\n              r=\"14\"\n            />\n          </g>\n        )}\n\n        <circle className={innerCircleClasses} cx=\"16\" cy=\"16\" r=\"12\" />\n        <text\n          x=\"50%\"\n          y=\"50%\"\n          fontSize={14}\n          className=\"n-fill-neutral-bg-weak\"\n          textAnchor=\"middle\"\n          dominantBaseline=\"middle\"\n          dy=\"0.1em\"\n        >\n          {status === 'error' ? '!' : number}\n        </text>\n      </svg>\n    </div>\n  );\n};\n"]}

package/lib/types/wizard/Wizard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Wizard.d.ts","sourceRoot":"","sources":["../../../src/wizard/Wizard.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAEzC,OAAO,EAAE,KAAK,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAG/D,UAAU,IAAI;IACZ,0CAA0C;IAC1C,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,gGAAgG;IAChG,MAAM,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;CAC9B;AAED,UAAU,eAAe;IACvB,uCAAuC;IACvC,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,gCAAgC;IAChC,IAAI,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IACzB,uBAAuB;IACvB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0CAA0C;IAC1C,eAAe,EAAE,MAAM,CAAC;IACxB,qCAAqC;IACrC,KAAK,EAAE,IAAI,EAAE,CAAC;CACf;AAED,KAAK,qBAAqB,GAAG,eAAe,GAAG;IAC7C,WAAW,EAAE,YAAY,CAAC;IAC1B,oMAAoM;IACpM,SAAS,CAAC,EAAE,QAAQ,CAAC;CACtB,CAAC;AAEF,KAAK,mBAAmB,GAAG,eAAe,GAAG;IAC3C,WAAW,EAAE,UAAU,CAAC;IACxB,oMAAoM;IACpM,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;CAC9B,CAAC;AAEF,KAAK,yBAAyB,GAAG,eAAe,GAAG;IACjD,WAAW,EAAE,SAAS,CAAC;IACvB,oMAAoM;IACpM,SAAS,CAAC,EAAE,KAAK,CAAC;CACnB,CAAC;AAEF,KAAK,WAAW,GACZ,qBAAqB,GACrB,mBAAmB,GACnB,yBAAyB,CAAC;AAE9B,eAAO,MAAM,MAAM,GAAI,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,KAAK,EAAE,sGAWzD,sBAAsB,CAAC,CAAC,EAAE,WAAW,CAAC,4CAuCxC,CAAC;AAkHF,eAAO,MAAM,WAAW,GAAI,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,KAAK,EAAE,6GAW9D,sBAAsB,CAAC,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC,4CA2CtD,CAAC"}
+{"version":3,"file":"Wizard.d.ts","sourceRoot":"","sources":["../../../src/wizard/Wizard.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAEzC,OAAO,EAAE,KAAK,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAG/D,UAAU,IAAI;IACZ,0CAA0C;IAC1C,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,gGAAgG;IAChG,MAAM,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;CAC9B;AAED,UAAU,eAAe;IACvB,uCAAuC;IACvC,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,gCAAgC;IAChC,IAAI,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IACzB,uBAAuB;IACvB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0CAA0C;IAC1C,eAAe,EAAE,MAAM,CAAC;IACxB,qCAAqC;IACrC,KAAK,EAAE,IAAI,EAAE,CAAC;CACf;AAED,KAAK,qBAAqB,GAAG,eAAe,GAAG;IAC7C,WAAW,EAAE,YAAY,CAAC;IAC1B,oMAAoM;IACpM,SAAS,CAAC,EAAE,QAAQ,CAAC;CACtB,CAAC;AAEF,KAAK,mBAAmB,GAAG,eAAe,GAAG;IAC3C,WAAW,EAAE,UAAU,CAAC;IACxB,oMAAoM;IACpM,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;CAC9B,CAAC;AAEF,KAAK,yBAAyB,GAAG,eAAe,GAAG;IACjD,WAAW,EAAE,SAAS,CAAC;IACvB,oMAAoM;IACpM,SAAS,CAAC,EAAE,KAAK,CAAC;CACnB,CAAC;AAEF,KAAK,WAAW,GACZ,qBAAqB,GACrB,mBAAmB,GACnB,yBAAyB,CAAC;AAE9B,eAAO,MAAM,MAAM,GAAI,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,KAAK,EAAE,sGAWzD,sBAAsB,CAAC,CAAC,EAAE,WAAW,CAAC,4CAuCxC,CAAC;AAuHF,eAAO,MAAM,WAAW,GAAI,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,KAAK,EAAE,6GAW9D,sBAAsB,CAAC,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC,4CAmDtD,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neo4j-ndl/react",
-  "version": "4.7.5",
+  "version": "4.7.6",
   "sideEffects": false,
   "description": "React implementation of Neo4j Design System",
   "keywords": [