@neo4j-ndl/react 4.25.2 → 4.25.4

package/lib/cjs/status-label/StatusLabel.js

@@ -52,7 +52,6 @@ const StatusLabelVariants = [
 const StatusLabelFill = ['filled', 'outlined', 'semi-filled', 'clean'];
 const StatusLabel = (_a) => {
     var { as, variant = 'default', children, className, style, fill = 'filled', hasIcon = false, htmlAttributes, size = 'large', ref } = _a, restProps = __rest(_a, ["as", "variant", "children", "className", "style", "fill", "hasIcon", "htmlAttributes", "size", "ref"]);
-    let baseClasses;
     let icon;
     // Clean Status label without icon is not allowed
     if (!hasIcon && fill === 'clean') {
@@ -99,23 +98,7 @@ const StatusLabel = (_a) => {
             icon = (0, jsx_runtime_1.jsx)(Circle_1.default, { htmlAttributes: { color: fillColor } });
         }
     }
-    if (mappedColor === 'default') {
-        baseClasses = (0, classnames_1.default)({
-            [`n-bg-neutral-bg-default n-text-neutral-text-weak n-border-neutral-border-strong`]: fill === 'semi-filled',
-            [`n-bg-neutral-bg-strongest n-text-neutral-text-inverse`]: fill === 'filled',
-            [`n-text-neutral-text-weak n-border-neutral-border-strong`]: fill === 'outlined',
-            [`n-text-neutral-text-weaker`]: fill === 'clean',
-        });
-    }
-    else {
-        baseClasses = (0, classnames_1.default)({
-            [`n-bg-${mappedColor}-bg-strong n-text-neutral-text-inverse`]: fill === 'filled',
-            [`n-text-${mappedColor}-text n-border-${mappedColor}-border-strong`]: fill === 'outlined',
-            [`n-bg-${mappedColor}-bg-weak n-text-${mappedColor}-text n-border-${mappedColor}-border-weak`]: fill === 'semi-filled',
-            [`n-text-neutral-text-default`]: fill === 'clean',
-        });
-    }
-    const classes = (0, classnames_1.default)('ndl-status-label', baseClasses, className, {
+    const classes = (0, classnames_1.default)('ndl-status-label', `ndl-status-label-${variant}`, className, {
         'ndl-clean': fill === 'clean',
         'ndl-filled': fill === 'filled',
         'ndl-large': size === 'large',

package/lib/cjs/status-label/StatusLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatusLabel.js","sourceRoot":"","sources":["../../../src/status-label/StatusLabel.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 type React from 'react';\n\nimport { type PolymorphicCommonProps } from '../_common/types';\nimport CircleIcon from '../icons/generated/custom/Circle';\nimport RhombusIcon from '../icons/generated/custom/Rhombus';\nimport SquareIcon from '../icons/generated/custom/Square';\nimport TriangleIcon from '../icons/generated/custom/Triangle';\n\n/**\n *\n *\n * Types\n *\n *\n */\n\ntype EventTypeStatusLabelProps = {\n  /** Additional Classnames */\n  className?: string;\n\n  /** The content displayed inside the status label */\n  children: React.ReactNode;\n\n  /** Color of the status label that indicates its purpose. */\n  variant?: (typeof StatusLabelVariants)[number];\n\n  /** Fill type of status label, determines the background and border styles. */\n  fill?: (typeof StatusLabelFill)[number];\n\n  /** Whether the status label have an icon */\n  hasIcon?: boolean;\n\n  /** Size of the status label */\n  size?: 'small' | 'large';\n};\n\nconst StatusLabelVariants = [\n  'info',\n  'success',\n  'warning',\n  'danger',\n  'default',\n  'discovery',\n] as const;\n\nconst StatusLabelFill = ['filled', 'outlined', 'semi-filled', 'clean'] as const;\n\nexport const StatusLabel = <T extends React.ElementType = 'span'>({\n  as,\n  variant = 'default',\n  children,\n  className,\n  style,\n  fill = 'filled',\n  hasIcon = false,\n  htmlAttributes,\n  size = 'large',\n  ref,\n  ...restProps\n}: PolymorphicCommonProps<T, EventTypeStatusLabelProps>) => {\n  let baseClasses: string;\n  let icon: React.ReactNode | null;\n\n  // Clean Status label without icon is not allowed\n  if (!hasIcon && fill === 'clean') {\n    console.error('Clean StatusLabel has to have an icon');\n  }\n\n  // All colors map to the light-theme palette except the info\n  const mappedColor = variant === 'info' ? 'primary' : variant;\n\n  if (hasIcon) {\n    const isFilled = fill === 'filled';\n    if (mappedColor === 'default') {\n      const fillColor = isFilled\n        ? 'currentColor'\n        : 'var(--theme-color-neutral-bg-status)';\n      icon = <SquareIcon htmlAttributes={{ color: fillColor }} />;\n    } else if (mappedColor === 'primary') {\n      const fillColor = isFilled\n        ? 'currentColor'\n        : 'var(--theme-color-primary-bg-status)';\n      icon = <CircleIcon htmlAttributes={{ color: fillColor }} />;\n    } else if (mappedColor === 'success') {\n      const fillColor = isFilled\n        ? 'currentColor'\n        : 'var(--theme-color-success-bg-status)';\n      icon = <CircleIcon htmlAttributes={{ color: fillColor }} />;\n    } else if (mappedColor === 'danger') {\n      const fillColor = isFilled\n        ? 'currentColor'\n        : 'var(--theme-color-danger-bg-status)';\n      icon = <RhombusIcon htmlAttributes={{ color: fillColor }} />;\n    } else if (mappedColor === 'warning') {\n      const fillColor = isFilled\n        ? 'currentColor'\n        : 'var(--theme-color-warning-bg-status)';\n      icon = <TriangleIcon htmlAttributes={{ color: fillColor }} />;\n    } else if (mappedColor === 'discovery') {\n      const fillColor = isFilled\n        ? 'currentColor'\n        : 'var(--theme-color-discovery-bg-status)';\n      icon = <CircleIcon htmlAttributes={{ color: fillColor }} />;\n    }\n  }\n\n  if (mappedColor === 'default') {\n    baseClasses = classNames({\n      [`n-bg-neutral-bg-default n-text-neutral-text-weak n-border-neutral-border-strong`]:\n        fill === 'semi-filled',\n      [`n-bg-neutral-bg-strongest n-text-neutral-text-inverse`]:\n        fill === 'filled',\n      [`n-text-neutral-text-weak n-border-neutral-border-strong`]:\n        fill === 'outlined',\n      [`n-text-neutral-text-weaker`]: fill === 'clean',\n    });\n  } else {\n    baseClasses = classNames({\n      [`n-bg-${mappedColor}-bg-strong n-text-neutral-text-inverse`]:\n        fill === 'filled',\n      [`n-text-${mappedColor}-text n-border-${mappedColor}-border-strong`]:\n        fill === 'outlined',\n      [`n-bg-${mappedColor}-bg-weak n-text-${mappedColor}-text n-border-${mappedColor}-border-weak`]:\n        fill === 'semi-filled',\n      [`n-text-neutral-text-default`]: fill === 'clean',\n    });\n  }\n\n  const classes = classNames('ndl-status-label', baseClasses, className, {\n    'ndl-clean': fill === 'clean',\n    'ndl-filled': fill === 'filled',\n    'ndl-large': size === 'large',\n    'ndl-outlined': fill === 'outlined',\n    'ndl-semi-filled': fill === 'semi-filled',\n    'ndl-small': size === 'small',\n  });\n\n  const Component: React.ElementType = as ?? 'span';\n\n  return (\n    <Component\n      role=\"status\"\n      className={classes}\n      style={style}\n      ref={ref}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      <div className=\"ndl-status-label-content\">\n        {icon}\n        <span\n          // To enable native tooltip on hover if the children is a string\n          title={typeof children === 'string' ? children : 'status label'}\n          className=\"ndl-status-label-text\"\n        >\n          {children}\n        </span>\n      </div>\n    </Component>\n  );\n};\n"]}
+{"version":3,"file":"StatusLabel.js","sourceRoot":"","sources":["../../../src/status-label/StatusLabel.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 type React from 'react';\n\nimport { type PolymorphicCommonProps } from '../_common/types';\nimport CircleIcon from '../icons/generated/custom/Circle';\nimport RhombusIcon from '../icons/generated/custom/Rhombus';\nimport SquareIcon from '../icons/generated/custom/Square';\nimport TriangleIcon from '../icons/generated/custom/Triangle';\n\n/**\n *\n *\n * Types\n *\n *\n */\n\ntype EventTypeStatusLabelProps = {\n  /** Additional Classnames */\n  className?: string;\n\n  /** The content displayed inside the status label */\n  children: React.ReactNode;\n\n  /** Color of the status label that indicates its purpose. */\n  variant?: (typeof StatusLabelVariants)[number];\n\n  /** Fill type of status label, determines the background and border styles. */\n  fill?: (typeof StatusLabelFill)[number];\n\n  /** Whether the status label have an icon */\n  hasIcon?: boolean;\n\n  /** Size of the status label */\n  size?: 'small' | 'large';\n};\n\nconst StatusLabelVariants = [\n  'info',\n  'success',\n  'warning',\n  'danger',\n  'default',\n  'discovery',\n] as const;\n\nconst StatusLabelFill = ['filled', 'outlined', 'semi-filled', 'clean'] as const;\n\nexport const StatusLabel = <T extends React.ElementType = 'span'>({\n  as,\n  variant = 'default',\n  children,\n  className,\n  style,\n  fill = 'filled',\n  hasIcon = false,\n  htmlAttributes,\n  size = 'large',\n  ref,\n  ...restProps\n}: PolymorphicCommonProps<T, EventTypeStatusLabelProps>) => {\n  let icon: React.ReactNode | null;\n\n  // Clean Status label without icon is not allowed\n  if (!hasIcon && fill === 'clean') {\n    console.error('Clean StatusLabel has to have an icon');\n  }\n\n  // All colors map to the light-theme palette except the info\n  const mappedColor = variant === 'info' ? 'primary' : variant;\n\n  if (hasIcon) {\n    const isFilled = fill === 'filled';\n    if (mappedColor === 'default') {\n      const fillColor = isFilled\n        ? 'currentColor'\n        : 'var(--theme-color-neutral-bg-status)';\n      icon = <SquareIcon htmlAttributes={{ color: fillColor }} />;\n    } else if (mappedColor === 'primary') {\n      const fillColor = isFilled\n        ? 'currentColor'\n        : 'var(--theme-color-primary-bg-status)';\n      icon = <CircleIcon htmlAttributes={{ color: fillColor }} />;\n    } else if (mappedColor === 'success') {\n      const fillColor = isFilled\n        ? 'currentColor'\n        : 'var(--theme-color-success-bg-status)';\n      icon = <CircleIcon htmlAttributes={{ color: fillColor }} />;\n    } else if (mappedColor === 'danger') {\n      const fillColor = isFilled\n        ? 'currentColor'\n        : 'var(--theme-color-danger-bg-status)';\n      icon = <RhombusIcon htmlAttributes={{ color: fillColor }} />;\n    } else if (mappedColor === 'warning') {\n      const fillColor = isFilled\n        ? 'currentColor'\n        : 'var(--theme-color-warning-bg-status)';\n      icon = <TriangleIcon htmlAttributes={{ color: fillColor }} />;\n    } else if (mappedColor === 'discovery') {\n      const fillColor = isFilled\n        ? 'currentColor'\n        : 'var(--theme-color-discovery-bg-status)';\n      icon = <CircleIcon htmlAttributes={{ color: fillColor }} />;\n    }\n  }\n\n  const classes = classNames(\n    'ndl-status-label',\n    `ndl-status-label-${variant}`,\n    className,\n    {\n      'ndl-clean': fill === 'clean',\n      'ndl-filled': fill === 'filled',\n      'ndl-large': size === 'large',\n      'ndl-outlined': fill === 'outlined',\n      'ndl-semi-filled': fill === 'semi-filled',\n      'ndl-small': size === 'small',\n    },\n  );\n\n  const Component: React.ElementType = as ?? 'span';\n\n  return (\n    <Component\n      role=\"status\"\n      className={classes}\n      style={style}\n      ref={ref}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      <div className=\"ndl-status-label-content\">\n        {icon}\n        <span\n          // To enable native tooltip on hover if the children is a string\n          title={typeof children === 'string' ? children : 'status label'}\n          className=\"ndl-status-label-text\"\n        >\n          {children}\n        </span>\n      </div>\n    </Component>\n  );\n};\n"]}

package/lib/cjs/text-input/TextInput.js

@@ -118,7 +118,7 @@ const TextInput = (_a) => {
                                                     handleChange === null || handleChange === void 0 ? void 0 : handleChange({
                                                         target: { value: '' },
                                                     });
-                                                }, children: (0, jsx_runtime_1.jsx)(XMarkIconOutline_1.XMarkIconOutline, { className: "n-size-4" }) }) }))] }), trailingElement && ((0, jsx_runtime_1.jsx)("div", { className: "ndl-element-trailing ndl-element", children: isLoading && !leadingElement ? ((0, jsx_runtime_1.jsx)(loading_spinner_1.LoadingSpinner, { size: size === 'large' ? 'medium' : 'small', className: size === 'large'
+                                                }, children: (0, jsx_runtime_1.jsx)(XMarkIconOutline_1.XMarkIconOutline, {}) }) }))] }), trailingElement && ((0, jsx_runtime_1.jsx)("div", { className: "ndl-element-trailing ndl-element", children: isLoading && !leadingElement ? ((0, jsx_runtime_1.jsx)(loading_spinner_1.LoadingSpinner, { size: size === 'large' ? 'medium' : 'small', className: size === 'large'
                                             ? 'ndl-medium-spinner'
                                             : 'ndl-small-spinner' })) : (trailingElement) }))] }) }))] }), (0, jsx_runtime_1.jsx)(form_control_1.FormFieldMessage, { field: field, size: size, wrap: (content) => ((0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, Object.assign({ onBackground: "weak", shape: "rectangular" }, skeletonProps, { isLoading: isSkeletonLoading, children: content }))) })] }));
 };

package/lib/cjs/text-input/TextInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextInput.js","sourceRoot":"","sources":["../../../src/text-input/TextInput.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 */\n\nimport classNames from 'classnames';\nimport {\n  type InputHTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n  useId,\n  useMemo,\n} from 'react';\n\nimport {\n  FormFieldLabel,\n  FormFieldMessage,\n  useFormField,\n} from '../_common/form-control';\nimport { customLabelAndNoAriaLabelWarningMessage } from '../_common/messages';\nimport { type CommonProps, type TooltipObjectProps } from '../_common/types';\nimport { useSemiControlledInput } from '../_common/use-semi-controlled-input';\nimport { needleWarningMessage } from '../_common/utils';\nimport { XMarkIconOutline } from '../icons/generated/heroIcons/XMarkIconOutline';\nimport { LoadingSpinner } from '../loading-spinner';\nimport { Skeleton } from '../skeleton';\n\n/**\n * @remarks\n * When `moreInformationText` is provided, a tooltip is rendered next to the label, and the `tooltipProps` prop is used to configure the tooltip. The `TooltipObjectProps` type is defined as: `{ root?: Partial<React.ComponentProps<typeof Tooltip>>; trigger?: Partial<React.ComponentProps<typeof Tooltip.Trigger>>; content?: Partial<React.ComponentProps<typeof Tooltip.Content>>; }`, see the Tooltip component for more details.\n *\n * @remarks\n * When `isSkeletonLoading` is true, the input is rendered as a loading skeleton and the `skeletonProps` prop is used to configure the skeleton. For more information, see the Skeleton documentation.\n */\ntype TextInputProps = {\n  /** Assistive text displayed below the input */\n  helpText?: string | ReactNode;\n\n  /** Error message displayed below the input. When provided, it overrides `helpText` and shows an error icon */\n  errorText?: string | ReactNode;\n\n  /** Leading element rendered inside the input */\n  leadingElement?: ReactElement;\n\n  /** Trailing element rendered inside the input */\n  trailingElement?: ReactElement;\n\n  /** Size of the input */\n  size?: 'small' | 'medium' | 'large';\n\n  /** Whether the input is read-only */\n  isReadOnly?: boolean;\n\n  /**\n   *  Whether to display the Required/Optional label next to the field label.\n   *  Shows Required if isRequired is true, otherwise shows Optional.\n   * @default false\n   */\n  // TODO v5: inconsistent naming. The same switch is `hasRequiredIndicator` on\n  // Combobox and on the internal form control this maps onto, and `isOptional`\n  // on TextArea. The name also needs the disable below, which a name using one\n  // of the allowed boolean prefixes would not.\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  showRequiredOrOptionalLabel?: boolean;\n\n  /** Whether the input is disabled */\n  isDisabled?: boolean;\n\n  /** Whether the input is required */\n  isRequired?: boolean;\n\n  /** The current value of the input */\n  value?: React.ComponentPropsWithoutRef<'input'>['value'];\n\n  /** Placeholder text displayed when the input is empty */\n  placeholder?: React.ComponentPropsWithoutRef<'input'>['placeholder'];\n\n  /** Callback function triggered when the input value changes */\n  onChange?: React.ComponentPropsWithoutRef<'input'>['onChange'];\n\n  /** Whether the input should take the full available width */\n  isFluid?: boolean;\n\n  /** Text displayed in the information tooltip shown next to the label */\n  moreInformationText?: React.ReactNode;\n\n  // TODO v5: inconsistent naming. Every form control names itself differently:\n  // the label is optional here and a design with no room for it reaches for\n  // htmlAttributes['aria-label'], TextArea, Select, Checkbox, Radio and Switch\n  // expose an `ariaLabel` prop instead, and Combobox requires the label and\n  // clips it with `hasVisuallyHiddenLabel`.\n  /** The label displayed above the input */\n  label?: string | React.ReactNode;\n\n  /** Props for the Tooltip component used by the information icon */\n  tooltipProps?: TooltipObjectProps;\n\n  /** Whether to render skeletons instead of content */\n  isSkeletonLoading?: boolean;\n\n  /** Additional props forwarded to the underlying Skeleton components */\n  skeletonProps?: React.ComponentProps<typeof Skeleton>;\n\n  /** Whether to show the clear button */\n  isClearable?: boolean;\n\n  /** Whether to show the loading spinner */\n  isLoading?: boolean;\n};\n\n/**\n *\n *\n * TextInput Component\n *\n *\n */\n\nexport const TextInput = ({\n  label,\n  isFluid,\n  errorText,\n  helpText,\n  leadingElement,\n  trailingElement,\n  showRequiredOrOptionalLabel = false,\n  moreInformationText,\n  size = 'medium',\n  placeholder,\n  value,\n  tooltipProps,\n  htmlAttributes,\n  isDisabled,\n  isReadOnly,\n  isRequired,\n  onChange,\n  isClearable = false,\n  className,\n  style,\n  isSkeletonLoading = false,\n  isLoading = false,\n  skeletonProps,\n  ref,\n  ...restProps\n}: CommonProps<'input', TextInputProps>) => {\n  const [currentValue, handleChange] = useSemiControlledInput({\n    inputType: 'text',\n    isControlled: value !== undefined,\n    onChange,\n    state: value ?? '',\n  });\n  const hintId = useId();\n  const canClear = isClearable && isDisabled !== true;\n  const shouldRenderHint = canClear || isLoading;\n  const { field, controlProps } = useFormField({\n    errorText,\n    // The clear/loading hint describes the input alongside the message.\n    extraDescribedByIds: [shouldRenderHint && hintId],\n    hasRequiredIndicator: showRequiredOrOptionalLabel,\n    helpText,\n    isRequired,\n    label,\n  });\n\n  const containerWrappingClasses = classNames(`ndl-text-input`, className, {\n    'ndl-disabled': isDisabled,\n    'ndl-has-error': errorText,\n    'ndl-has-icon': leadingElement || trailingElement || errorText,\n    'ndl-has-leading-icon': leadingElement,\n    'ndl-has-trailing-icon': trailingElement || errorText,\n    'ndl-large': size === 'large',\n    'ndl-medium': size === 'medium',\n    'ndl-read-only': isReadOnly,\n    'ndl-small': size === 'small',\n  });\n\n  const hasEmptyLabelValue =\n    label === undefined || label === null || label === '';\n\n  const labelWrappingClasses = classNames('ndl-text-input-label', {\n    'ndl-fluid': isFluid,\n  });\n\n  const combinedHtmlInputAttributes: InputHTMLAttributes<HTMLInputElement> = {\n    ...htmlAttributes,\n    className: classNames('ndl-input', htmlAttributes?.className),\n  };\n  const ariaLabel = combinedHtmlInputAttributes['aria-label'];\n  const isCustomLabel = Boolean(label) && typeof label !== 'string';\n  const hasCustomLabelAndNoAriaLabel =\n    isCustomLabel && (ariaLabel === undefined || ariaLabel === '');\n\n  const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n    if (canClear && event.key === 'Escape' && Boolean(currentValue)) {\n      event.preventDefault();\n      event.stopPropagation();\n      handleChange?.({\n        target: { value: '' },\n      } as React.ChangeEvent<HTMLInputElement>);\n    }\n    htmlAttributes?.onKeyDown?.(event);\n  };\n\n  useMemo(() => {\n    if (!label && !ariaLabel) {\n      needleWarningMessage(\n        'A TextInput without a label does not have an aria label, be sure to include an aria label for screen readers. Link: https://dequeuniversity.com/rules/axe/4.2/label?application=axeAPI',\n      );\n    }\n\n    if (hasCustomLabelAndNoAriaLabel) {\n      needleWarningMessage(customLabelAndNoAriaLabelWarningMessage);\n    }\n  }, [label, ariaLabel, hasCustomLabelAndNoAriaLabel]);\n\n  return (\n    <div className={containerWrappingClasses} style={style}>\n      {/* We enable implicit label wrapping */}\n      {/* Source: https://dequeuniversity.com/rules/axe/4.2/label?application=axeAPI */}\n      <label className={labelWrappingClasses}>\n        {!hasEmptyLabelValue && (\n          <FormFieldLabel\n            field={field}\n            size={size}\n            association=\"implicit\"\n            moreInformationText={moreInformationText}\n            tooltipProps={tooltipProps}\n            wrap={(row) => (\n              <Skeleton\n                onBackground=\"weak\"\n                shape=\"rectangular\"\n                {...skeletonProps}\n                isLoading={isSkeletonLoading}\n              >\n                {row}\n              </Skeleton>\n            )}\n          />\n        )}\n        <Skeleton\n          onBackground=\"weak\"\n          shape=\"rectangular\"\n          {...skeletonProps}\n          isLoading={isSkeletonLoading}\n        >\n          <div className=\"ndl-input-wrapper\">\n            {(leadingElement || (isLoading && !trailingElement)) && (\n              <div className=\"ndl-element-leading ndl-element\">\n                {isLoading ? (\n                  <LoadingSpinner\n                    size={size === 'large' ? 'medium' : 'small'}\n                    className={\n                      size === 'large'\n                        ? 'ndl-medium-spinner'\n                        : 'ndl-small-spinner'\n                    }\n                  />\n                ) : (\n                  leadingElement\n                )}\n              </div>\n            )}\n            <div\n              className={classNames('ndl-input-container', {\n                'ndl-clearable': isClearable,\n              })}\n            >\n              <input\n                ref={ref}\n                readOnly={isReadOnly}\n                disabled={isDisabled}\n                required={isRequired}\n                value={currentValue}\n                placeholder={placeholder}\n                type=\"text\"\n                onChange={handleChange}\n                {...controlProps}\n                {...combinedHtmlInputAttributes}\n                onKeyDown={handleInputKeyDown}\n                {...restProps}\n              />\n              {shouldRenderHint && (\n                <span\n                  id={hintId}\n                  className=\"ndl-text-input-hint\"\n                  aria-hidden={true}\n                >\n                  {isLoading && 'Loading '}\n                  {canClear && 'Press Escape to clear input.'}\n                </span>\n              )}\n              {canClear && Boolean(currentValue) && (\n                <div className=\"ndl-element-clear ndl-element\">\n                  <button\n                    tabIndex={-1}\n                    aria-hidden={true}\n                    type=\"button\"\n                    title=\"Clear input (Esc)\"\n                    onClick={() => {\n                      handleChange?.({\n                        target: { value: '' },\n                      } as React.ChangeEvent<HTMLInputElement>);\n                    }}\n                  >\n                    <XMarkIconOutline className=\"n-size-4\" />\n                  </button>\n                </div>\n              )}\n            </div>\n            {trailingElement && (\n              <div className=\"ndl-element-trailing ndl-element\">\n                {isLoading && !leadingElement ? (\n                  <LoadingSpinner\n                    size={size === 'large' ? 'medium' : 'small'}\n                    className={\n                      size === 'large'\n                        ? 'ndl-medium-spinner'\n                        : 'ndl-small-spinner'\n                    }\n                  />\n                ) : (\n                  trailingElement\n                )}\n              </div>\n            )}\n          </div>\n        </Skeleton>\n      </label>\n\n      <FormFieldMessage\n        field={field}\n        size={size}\n        wrap={(content) => (\n          <Skeleton\n            onBackground=\"weak\"\n            shape=\"rectangular\"\n            {...skeletonProps}\n            isLoading={isSkeletonLoading}\n          >\n            {content}\n          </Skeleton>\n        )}\n      />\n    </div>\n  );\n};\n"]}
+{"version":3,"file":"TextInput.js","sourceRoot":"","sources":["../../../src/text-input/TextInput.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 */\n\nimport classNames from 'classnames';\nimport {\n  type InputHTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n  useId,\n  useMemo,\n} from 'react';\n\nimport {\n  FormFieldLabel,\n  FormFieldMessage,\n  useFormField,\n} from '../_common/form-control';\nimport { customLabelAndNoAriaLabelWarningMessage } from '../_common/messages';\nimport { type CommonProps, type TooltipObjectProps } from '../_common/types';\nimport { useSemiControlledInput } from '../_common/use-semi-controlled-input';\nimport { needleWarningMessage } from '../_common/utils';\nimport { XMarkIconOutline } from '../icons/generated/heroIcons/XMarkIconOutline';\nimport { LoadingSpinner } from '../loading-spinner';\nimport { Skeleton } from '../skeleton';\n\n/**\n * @remarks\n * When `moreInformationText` is provided, a tooltip is rendered next to the label, and the `tooltipProps` prop is used to configure the tooltip. The `TooltipObjectProps` type is defined as: `{ root?: Partial<React.ComponentProps<typeof Tooltip>>; trigger?: Partial<React.ComponentProps<typeof Tooltip.Trigger>>; content?: Partial<React.ComponentProps<typeof Tooltip.Content>>; }`, see the Tooltip component for more details.\n *\n * @remarks\n * When `isSkeletonLoading` is true, the input is rendered as a loading skeleton and the `skeletonProps` prop is used to configure the skeleton. For more information, see the Skeleton documentation.\n */\ntype TextInputProps = {\n  /** Assistive text displayed below the input */\n  helpText?: string | ReactNode;\n\n  /** Error message displayed below the input. When provided, it overrides `helpText` and shows an error icon */\n  errorText?: string | ReactNode;\n\n  /** Leading element rendered inside the input */\n  leadingElement?: ReactElement;\n\n  /** Trailing element rendered inside the input */\n  trailingElement?: ReactElement;\n\n  /** Size of the input */\n  size?: 'small' | 'medium' | 'large';\n\n  /** Whether the input is read-only */\n  isReadOnly?: boolean;\n\n  /**\n   *  Whether to display the Required/Optional label next to the field label.\n   *  Shows Required if isRequired is true, otherwise shows Optional.\n   * @default false\n   */\n  // TODO v5: inconsistent naming. The same switch is `hasRequiredIndicator` on\n  // Combobox and on the internal form control this maps onto, and `isOptional`\n  // on TextArea. The name also needs the disable below, which a name using one\n  // of the allowed boolean prefixes would not.\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  showRequiredOrOptionalLabel?: boolean;\n\n  /** Whether the input is disabled */\n  isDisabled?: boolean;\n\n  /** Whether the input is required */\n  isRequired?: boolean;\n\n  /** The current value of the input */\n  value?: React.ComponentPropsWithoutRef<'input'>['value'];\n\n  /** Placeholder text displayed when the input is empty */\n  placeholder?: React.ComponentPropsWithoutRef<'input'>['placeholder'];\n\n  /** Callback function triggered when the input value changes */\n  onChange?: React.ComponentPropsWithoutRef<'input'>['onChange'];\n\n  /** Whether the input should take the full available width */\n  isFluid?: boolean;\n\n  /** Text displayed in the information tooltip shown next to the label */\n  moreInformationText?: React.ReactNode;\n\n  // TODO v5: inconsistent naming. Every form control names itself differently:\n  // the label is optional here and a design with no room for it reaches for\n  // htmlAttributes['aria-label'], TextArea, Select, Checkbox, Radio and Switch\n  // expose an `ariaLabel` prop instead, and Combobox requires the label and\n  // clips it with `hasVisuallyHiddenLabel`.\n  /** The label displayed above the input */\n  label?: string | React.ReactNode;\n\n  /** Props for the Tooltip component used by the information icon */\n  tooltipProps?: TooltipObjectProps;\n\n  /** Whether to render skeletons instead of content */\n  isSkeletonLoading?: boolean;\n\n  /** Additional props forwarded to the underlying Skeleton components */\n  skeletonProps?: React.ComponentProps<typeof Skeleton>;\n\n  /** Whether to show the clear button */\n  isClearable?: boolean;\n\n  /** Whether to show the loading spinner */\n  isLoading?: boolean;\n};\n\n/**\n *\n *\n * TextInput Component\n *\n *\n */\n\nexport const TextInput = ({\n  label,\n  isFluid,\n  errorText,\n  helpText,\n  leadingElement,\n  trailingElement,\n  showRequiredOrOptionalLabel = false,\n  moreInformationText,\n  size = 'medium',\n  placeholder,\n  value,\n  tooltipProps,\n  htmlAttributes,\n  isDisabled,\n  isReadOnly,\n  isRequired,\n  onChange,\n  isClearable = false,\n  className,\n  style,\n  isSkeletonLoading = false,\n  isLoading = false,\n  skeletonProps,\n  ref,\n  ...restProps\n}: CommonProps<'input', TextInputProps>) => {\n  const [currentValue, handleChange] = useSemiControlledInput({\n    inputType: 'text',\n    isControlled: value !== undefined,\n    onChange,\n    state: value ?? '',\n  });\n  const hintId = useId();\n  const canClear = isClearable && isDisabled !== true;\n  const shouldRenderHint = canClear || isLoading;\n  const { field, controlProps } = useFormField({\n    errorText,\n    // The clear/loading hint describes the input alongside the message.\n    extraDescribedByIds: [shouldRenderHint && hintId],\n    hasRequiredIndicator: showRequiredOrOptionalLabel,\n    helpText,\n    isRequired,\n    label,\n  });\n\n  const containerWrappingClasses = classNames(`ndl-text-input`, className, {\n    'ndl-disabled': isDisabled,\n    'ndl-has-error': errorText,\n    'ndl-has-icon': leadingElement || trailingElement || errorText,\n    'ndl-has-leading-icon': leadingElement,\n    'ndl-has-trailing-icon': trailingElement || errorText,\n    'ndl-large': size === 'large',\n    'ndl-medium': size === 'medium',\n    'ndl-read-only': isReadOnly,\n    'ndl-small': size === 'small',\n  });\n\n  const hasEmptyLabelValue =\n    label === undefined || label === null || label === '';\n\n  const labelWrappingClasses = classNames('ndl-text-input-label', {\n    'ndl-fluid': isFluid,\n  });\n\n  const combinedHtmlInputAttributes: InputHTMLAttributes<HTMLInputElement> = {\n    ...htmlAttributes,\n    className: classNames('ndl-input', htmlAttributes?.className),\n  };\n  const ariaLabel = combinedHtmlInputAttributes['aria-label'];\n  const isCustomLabel = Boolean(label) && typeof label !== 'string';\n  const hasCustomLabelAndNoAriaLabel =\n    isCustomLabel && (ariaLabel === undefined || ariaLabel === '');\n\n  const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n    if (canClear && event.key === 'Escape' && Boolean(currentValue)) {\n      event.preventDefault();\n      event.stopPropagation();\n      handleChange?.({\n        target: { value: '' },\n      } as React.ChangeEvent<HTMLInputElement>);\n    }\n    htmlAttributes?.onKeyDown?.(event);\n  };\n\n  useMemo(() => {\n    if (!label && !ariaLabel) {\n      needleWarningMessage(\n        'A TextInput without a label does not have an aria label, be sure to include an aria label for screen readers. Link: https://dequeuniversity.com/rules/axe/4.2/label?application=axeAPI',\n      );\n    }\n\n    if (hasCustomLabelAndNoAriaLabel) {\n      needleWarningMessage(customLabelAndNoAriaLabelWarningMessage);\n    }\n  }, [label, ariaLabel, hasCustomLabelAndNoAriaLabel]);\n\n  return (\n    <div className={containerWrappingClasses} style={style}>\n      {/* We enable implicit label wrapping */}\n      {/* Source: https://dequeuniversity.com/rules/axe/4.2/label?application=axeAPI */}\n      <label className={labelWrappingClasses}>\n        {!hasEmptyLabelValue && (\n          <FormFieldLabel\n            field={field}\n            size={size}\n            association=\"implicit\"\n            moreInformationText={moreInformationText}\n            tooltipProps={tooltipProps}\n            wrap={(row) => (\n              <Skeleton\n                onBackground=\"weak\"\n                shape=\"rectangular\"\n                {...skeletonProps}\n                isLoading={isSkeletonLoading}\n              >\n                {row}\n              </Skeleton>\n            )}\n          />\n        )}\n        <Skeleton\n          onBackground=\"weak\"\n          shape=\"rectangular\"\n          {...skeletonProps}\n          isLoading={isSkeletonLoading}\n        >\n          <div className=\"ndl-input-wrapper\">\n            {(leadingElement || (isLoading && !trailingElement)) && (\n              <div className=\"ndl-element-leading ndl-element\">\n                {isLoading ? (\n                  <LoadingSpinner\n                    size={size === 'large' ? 'medium' : 'small'}\n                    className={\n                      size === 'large'\n                        ? 'ndl-medium-spinner'\n                        : 'ndl-small-spinner'\n                    }\n                  />\n                ) : (\n                  leadingElement\n                )}\n              </div>\n            )}\n            <div\n              className={classNames('ndl-input-container', {\n                'ndl-clearable': isClearable,\n              })}\n            >\n              <input\n                ref={ref}\n                readOnly={isReadOnly}\n                disabled={isDisabled}\n                required={isRequired}\n                value={currentValue}\n                placeholder={placeholder}\n                type=\"text\"\n                onChange={handleChange}\n                {...controlProps}\n                {...combinedHtmlInputAttributes}\n                onKeyDown={handleInputKeyDown}\n                {...restProps}\n              />\n              {shouldRenderHint && (\n                <span\n                  id={hintId}\n                  className=\"ndl-text-input-hint\"\n                  aria-hidden={true}\n                >\n                  {isLoading && 'Loading '}\n                  {canClear && 'Press Escape to clear input.'}\n                </span>\n              )}\n              {canClear && Boolean(currentValue) && (\n                <div className=\"ndl-element-clear ndl-element\">\n                  <button\n                    tabIndex={-1}\n                    aria-hidden={true}\n                    type=\"button\"\n                    title=\"Clear input (Esc)\"\n                    onClick={() => {\n                      handleChange?.({\n                        target: { value: '' },\n                      } as React.ChangeEvent<HTMLInputElement>);\n                    }}\n                  >\n                    <XMarkIconOutline />\n                  </button>\n                </div>\n              )}\n            </div>\n            {trailingElement && (\n              <div className=\"ndl-element-trailing ndl-element\">\n                {isLoading && !leadingElement ? (\n                  <LoadingSpinner\n                    size={size === 'large' ? 'medium' : 'small'}\n                    className={\n                      size === 'large'\n                        ? 'ndl-medium-spinner'\n                        : 'ndl-small-spinner'\n                    }\n                  />\n                ) : (\n                  trailingElement\n                )}\n              </div>\n            )}\n          </div>\n        </Skeleton>\n      </label>\n\n      <FormFieldMessage\n        field={field}\n        size={size}\n        wrap={(content) => (\n          <Skeleton\n            onBackground=\"weak\"\n            shape=\"rectangular\"\n            {...skeletonProps}\n            isLoading={isSkeletonLoading}\n          >\n            {content}\n          </Skeleton>\n        )}\n      />\n    </div>\n  );\n};\n"]}

package/lib/cjs/typography/stories/index.js

@@ -1,5 +1,6 @@
 "use strict";
-/**
+/*!
+ *
  *  Copyright (c) "Neo4j"
  *  Neo4j Sweden AB [http://neo4j.com]
  *  This file is part of Neo4j.

package/lib/cjs/typography/stories/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/typography/stories/index.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;GAcG;;;;;;AAEH,uEAA0E;AAAjE,8IAAA,OAAO,OAAqB;AACrC,qEAAwE;AAA/D,4IAAA,OAAO,OAAoB;AACpC,yEAA4E;AAAnE,gJAAA,OAAO,OAAsB;AAEtC,6EAAyE;AACzE,gGAAsE;AACtE,kGAAwE;AACxE,oGAA0E;AAE7D,QAAA,uBAAuB,GAAG,IAAA,0CAAmB,EACxD,sCAA0B,CAC3B,CAAC;AACW,QAAA,sBAAsB,GAAG,IAAA,0CAAmB,EACvD,qCAAyB,CAC1B,CAAC;AACW,QAAA,wBAAwB,GAAG,IAAA,0CAAmB,EACzD,uCAA2B,CAC5B,CAAC","sourcesContent":["/**\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *  This file is part of Neo4j.\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 *  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 *  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 */\n\nexport { default as TypographyDefault } from './typography-default.story';\nexport { default as TypographyAnchor } from './typography-anchor.story';\nexport { default as TypographyVariants } from './typography-variants.story';\n\nimport { removeLicenseHeader } from '../../_common/export-stories-utils';\nimport TypographyAnchorSourceRaw from './typography-anchor.story?raw';\nimport TypographyDefaultSourceRaw from './typography-default.story?raw';\nimport TypographyVariantsSourceRaw from './typography-variants.story?raw';\n\nexport const TypographyDefaultSource = removeLicenseHeader(\n  TypographyDefaultSourceRaw,\n);\nexport const TypographyAnchorSource = removeLicenseHeader(\n  TypographyAnchorSourceRaw,\n);\nexport const TypographyVariantsSource = removeLicenseHeader(\n  TypographyVariantsSourceRaw,\n);\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/typography/stories/index.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;GAeG;;;;;;AAEH,uEAA0E;AAAjE,8IAAA,OAAO,OAAqB;AACrC,qEAAwE;AAA/D,4IAAA,OAAO,OAAoB;AACpC,yEAA4E;AAAnE,gJAAA,OAAO,OAAsB;AAEtC,6EAAyE;AACzE,gGAAsE;AACtE,kGAAwE;AACxE,oGAA0E;AAE7D,QAAA,uBAAuB,GAAG,IAAA,0CAAmB,EACxD,sCAA0B,CAC3B,CAAC;AACW,QAAA,sBAAsB,GAAG,IAAA,0CAAmB,EACvD,qCAAyB,CAC1B,CAAC;AACW,QAAA,wBAAwB,GAAG,IAAA,0CAAmB,EACzD,uCAA2B,CAC5B,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *  This file is part of Neo4j.\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 *  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 *  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 */\n\nexport { default as TypographyDefault } from './typography-default.story';\nexport { default as TypographyAnchor } from './typography-anchor.story';\nexport { default as TypographyVariants } from './typography-variants.story';\n\nimport { removeLicenseHeader } from '../../_common/export-stories-utils';\nimport TypographyAnchorSourceRaw from './typography-anchor.story?raw';\nimport TypographyDefaultSourceRaw from './typography-default.story?raw';\nimport TypographyVariantsSourceRaw from './typography-variants.story?raw';\n\nexport const TypographyDefaultSource = removeLicenseHeader(\n  TypographyDefaultSourceRaw,\n);\nexport const TypographyAnchorSource = removeLicenseHeader(\n  TypographyAnchorSourceRaw,\n);\nexport const TypographyVariantsSource = removeLicenseHeader(\n  TypographyVariantsSourceRaw,\n);\n"]}

package/lib/cjs/typography/stories/typography-anchor.story.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-/**
+/*!
+ *
  *  Copyright (c) "Neo4j"
  *  Neo4j Sweden AB [http://neo4j.com]
  *  This file is part of Neo4j.

package/lib/cjs/typography/stories/typography-anchor.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"typography-anchor.story.js","sourceRoot":"","sources":["../../../../src/typography/stories/typography-anchor.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;GAcG;AACH,8CAA2C;AAE3C,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,OAAO,GAAG,SAAS,CAAC;IAE1B,OAAO,CACL,wBAAC,uBAAU,IAAC,EAAE,EAAC,GAAG,EAAC,cAAc,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,OAAO,EAAE,OAAO,aACpE,OAAO,qDACG,CACd,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/**\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *  This file is part of Neo4j.\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 *  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 *  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 { Typography } from '../Typography';\n\nconst Component = () => {\n  const variant = 'title-1';\n\n  return (\n    <Typography as=\"a\" htmlAttributes={{ href: '/index' }} variant={variant}>\n      {variant}: The quick brown fox jumps over the lazy dog\n    </Typography>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"typography-anchor.story.js","sourceRoot":"","sources":["../../../../src/typography/stories/typography-anchor.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;GAeG;AACH,8CAA2C;AAE3C,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,OAAO,GAAG,SAAS,CAAC;IAE1B,OAAO,CACL,wBAAC,uBAAU,IAAC,EAAE,EAAC,GAAG,EAAC,cAAc,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,OAAO,EAAE,OAAO,aACpE,OAAO,qDACG,CACd,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *  This file is part of Neo4j.\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 *  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 *  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 { Typography } from '../Typography';\n\nconst Component = () => {\n  const variant = 'title-1';\n\n  return (\n    <Typography as=\"a\" htmlAttributes={{ href: '/index' }} variant={variant}>\n      {variant}: The quick brown fox jumps over the lazy dog\n    </Typography>\n  );\n};\n\nexport default Component;\n"]}

package/lib/cjs/typography/stories/typography-default.story.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-/**
+/*!
+ *
  *  Copyright (c) "Neo4j"
  *  Neo4j Sweden AB [http://neo4j.com]
  *  This file is part of Neo4j.

package/lib/cjs/typography/stories/typography-default.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"typography-default.story.js","sourceRoot":"","sources":["../../../../src/typography/stories/typography-default.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;GAcG;AAEH,8CAA2C;AAE3C,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,CACtB,uBAAC,uBAAU,IAAC,OAAO,EAAC,aAAa,6DAEpB,CACd,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/**\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *  This file is part of Neo4j.\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 *  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 *  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 */\n\nimport { Typography } from '../Typography';\n\nconst Component = () => (\n  <Typography variant=\"body-medium\">\n    The quick brown fox jumps over the lazy dog.\n  </Typography>\n);\n\nexport default Component;\n"]}
+{"version":3,"file":"typography-default.story.js","sourceRoot":"","sources":["../../../../src/typography/stories/typography-default.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;GAeG;AAEH,8CAA2C;AAE3C,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,CACtB,uBAAC,uBAAU,IAAC,OAAO,EAAC,aAAa,6DAEpB,CACd,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *  This file is part of Neo4j.\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 *  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 *  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 */\n\nimport { Typography } from '../Typography';\n\nconst Component = () => (\n  <Typography variant=\"body-medium\">\n    The quick brown fox jumps over the lazy dog.\n  </Typography>\n);\n\nexport default Component;\n"]}

package/lib/cjs/typography/stories/typography-variants.story.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-/**
+/*!
+ *
  *  Copyright (c) "Neo4j"
  *  Neo4j Sweden AB [http://neo4j.com]
  *  This file is part of Neo4j.

package/lib/cjs/typography/stories/typography-variants.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"typography-variants.story.js","sourceRoot":"","sources":["../../../../src/typography/stories/typography-variants.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;GAcG;AAEH,0CAAyC;AAEzC,8CAA2C;AAE3C,MAAM,QAAQ,GAAG,MAAM,CAAC,IAAI,CAAC,aAAM,CAAC,UAAU,CAE7C,CAAC;AAEF,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,CACtB,gCAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,EAAE,EAAE,EAAE,YAC9D,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,CACzB,wBAAC,uBAAU,IAAe,OAAO,EAAE,OAAO,aACvC,OAAO,uDADO,OAAO,CAEX,CACd,CAAC,GACE,CACP,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/**\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *  This file is part of Neo4j.\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 *  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 *  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 */\n\nimport { tokens } from '@neo4j-ndl/base';\n\nimport { Typography } from '../Typography';\n\nconst VARIANTS = Object.keys(tokens.typography) as Array<\n  keyof typeof tokens.typography\n>;\n\nconst Component = () => (\n  <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>\n    {VARIANTS.map((variant) => (\n      <Typography key={variant} variant={variant}>\n        {variant}: The quick brown fox jumps over the lazy dog.\n      </Typography>\n    ))}\n  </div>\n);\n\nexport default Component;\n"]}
+{"version":3,"file":"typography-variants.story.js","sourceRoot":"","sources":["../../../../src/typography/stories/typography-variants.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;GAeG;AAEH,0CAAyC;AAEzC,8CAA2C;AAE3C,MAAM,QAAQ,GAAG,MAAM,CAAC,IAAI,CAAC,aAAM,CAAC,UAAU,CAE7C,CAAC;AAEF,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,CACtB,gCAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,EAAE,EAAE,EAAE,YAC9D,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,CACzB,wBAAC,uBAAU,IAAe,OAAO,EAAE,OAAO,aACvC,OAAO,uDADO,OAAO,CAEX,CACd,CAAC,GACE,CACP,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *  This file is part of Neo4j.\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 *  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 *  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 */\n\nimport { tokens } from '@neo4j-ndl/base';\n\nimport { Typography } from '../Typography';\n\nconst VARIANTS = Object.keys(tokens.typography) as Array<\n  keyof typeof tokens.typography\n>;\n\nconst Component = () => (\n  <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>\n    {VARIANTS.map((variant) => (\n      <Typography key={variant} variant={variant}>\n        {variant}: The quick brown fox jumps over the lazy dog.\n      </Typography>\n    ))}\n  </div>\n);\n\nexport default Component;\n"]}

package/lib/cjs/wizard/Wizard.js

@@ -164,14 +164,10 @@ const WizardSmall = (_a) => {
 };
 exports.WizardSmall = WizardSmall;
 const Circle = ({ status, number, alignment = 'middle', }) => {
-    const innerCircleClasses = (0, classnames_1.default)({
-        'n-fill-danger-bg-strong': status === 'error',
-        'n-fill-neutral-bg-stronger': status === 'incomplete',
-        'n-fill-primary-bg-strong': status === 'complete' || status === 'active',
-    });
+    const innerCircleClasses = (0, classnames_1.default)('ndl-wizard-circle-inner', `ndl-${status}`);
     const outerCircleClasses = (0, classnames_1.default)('ndl-wizard-circle', {
         [`ndl-wizard-align-${alignment}`]: alignment,
     });
-    return ((0, jsx_runtime_1.jsx)("div", { className: outerCircleClasses, children: (0, jsx_runtime_1.jsxs)("svg", { "aria-hidden": "true", children: [status === 'active' && ((0, jsx_runtime_1.jsx)("g", { children: (0, jsx_runtime_1.jsx)("circle", { className: "n-stroke-primary-bg-strong", style: { fill: 'transparent', strokeWidth: 2 }, cx: "16", cy: "16", r: "14" }) })), (0, jsx_runtime_1.jsx)("circle", { className: innerCircleClasses, cx: "16", cy: "16", r: "12" }), (0, jsx_runtime_1.jsx)("text", { x: "50%", y: "50%", fontSize: 14, className: "n-fill-neutral-bg-weak", textAnchor: "middle", dominantBaseline: "middle", dy: "0.1em", children: status === 'error' ? '!' : number })] }) }));
+    return ((0, jsx_runtime_1.jsx)("div", { className: outerCircleClasses, children: (0, jsx_runtime_1.jsxs)("svg", { "aria-hidden": "true", children: [status === 'active' && ((0, jsx_runtime_1.jsx)("g", { children: (0, jsx_runtime_1.jsx)("circle", { className: "ndl-wizard-circle-ring", style: { fill: 'transparent', strokeWidth: 2 }, cx: "16", cy: "16", r: "14" }) })), (0, jsx_runtime_1.jsx)("circle", { className: innerCircleClasses, cx: "16", cy: "16", r: "12" }), (0, jsx_runtime_1.jsx)("text", { x: "50%", y: "50%", fontSize: 14, className: "ndl-wizard-circle-text", textAnchor: "middle", dominantBaseline: "middle", dy: "0.1em", children: status === 'error' ? '!' : number })] }) }));
 };
 //# sourceMappingURL=Wizard.js.map

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\n/**\n * @remarks\n * Where type `Step` is defined as: `{ content: string | React.JSX.Element; status?: 'default' | 'error' }`. To highlight a step as error, set the `status` to `error`.\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"]}
+{"version":3,"file":"Wizard.js","sourceRoot":"","sources":["../../../src/wizard/Wizard.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,4DAAoC;AACpC,+CAAyC;AAGzC,8CAA2C;AAmDpC,MAAM,MAAM,GAAG,CAAsC,EAC1D,EAAE,EACF,SAAS,EACT,KAAK,EACL,IAAI,GAAG,OAAO,EACd,KAAK,EACL,eAAe,EACf,WAAW,EACX,cAAc,EACd,SAAS,GAAG,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,EACzD,GAAG,GACoC,EAAE,EAAE;IAC3C,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,eAAe,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,eAAe,GAAG,CAAC,EAAE,CAAC;YAC9D,OAAO,CAAC,IAAI,CACV,uFAAuF,eAAe,+BAA+B,KAAK,CAAC,MAAM,GAAG,CACrJ,CAAC;QACJ,CAAC;IACH,CAAC,EAAE,CAAC,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC;IAEpC,QAAQ,IAAI,EAAE,CAAC;QACb,KAAK,OAAO;YACV,OAAO,CACL,uBAAC,mBAAW,IACV,EAAE,EAAE,EAAE,EACN,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,EACZ,eAAe,EAAE,eAAe,EAChC,GAAG,EAAE,GAAG,EACR,cAAc,EAAE,cAAc,EAC9B,SAAS,EAAE,SAAS,GACpB,CACH,CAAC;QACJ,KAAK,OAAO;YACV,OAAO,CACL,uBAAC,WAAW,IACV,EAAE,EAAE,EAAE,EACN,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,EACZ,eAAe,EAAE,eAAe,EAChC,GAAG,EAAE,GAAG,EACR,cAAc,EAAE,cAAc,EAC9B,SAAS,EAAE,SAAS,GACpB,CACH,CAAC;IACN,CAAC;AACH,CAAC,CAAC;AAlDW,QAAA,MAAM,UAkDjB;AAEF,MAAM,SAAS,GAAG,CAAC,eAAuB,EAAE,SAAiB,EAAE,EAAE,CAC/D,SAAS,KAAK,eAAe;IAC3B,CAAC,CAAC,QAAQ;IACV,CAAC,CAAC,eAAe,GAAG,SAAS;QAC3B,CAAC,CAAC,YAAY;QACd,CAAC,CAAC,UAAU,CAAC;AAEnB,MAAM,WAAW,GAAG,CAAsC,EAWH,EAAE,EAAE;QAXD,EACxD,WAAW,GAAG,YAAY,EAC1B,eAAe,EACf,KAAK,EACL,EAAE,EACF,KAAK,EACL,SAAS,EACT,cAAc,EACd,SAAS,EACT,GAAG,OAEkD,EADlD,SAAS,cAV4C,6GAWzD,CADa;IAEZ,MAAM,SAAS,GAAsB,EAAE,IAAI,KAAK,CAAC;IAEjD,MAAM,aAAa,GAAG,IAAA,oBAAU,EAC9B,YAAY,EACZ,kBAAkB,EAClB;QACE,gBAAgB,EAAE,WAAW,KAAK,YAAY;QAC9C,cAAc,EAAE,WAAW,KAAK,UAAU;QAC1C,CAAC,oBAAoB,SAAS,EAAE,CAAC,EAAE,SAAS;KAC7C,EACD,SAAS,CACV,CAAC;IAEF,MAAM,cAAc,GAAG;QACrB,mBAAmB,EACjB,WAAW,KAAK,YAAY;YAC1B,CAAC,CAAC,UAAU,KAAK,CAAC,MAAM,QAAQ;YAChC,CAAC,CAAC,UAAU;QAEhB,gBAAgB,EACd,WAAW,KAAK,UAAU,IAAI,UAAU,KAAK,CAAC,MAAM,QAAQ;KAC/D,CAAC;IAEF,MAAM,WAAW,GAAG,CAAC,KAAa,EAAE,IAAU,EAAE,EAAE;QAChD,MAAM,MAAM,GAAG,SAAS,CAAC,eAAe,EAAE,KAAK,CAAC,CAAC;QAEjD,OAAO,IAAA,oBAAU,EAAC,iBAAiB,EAAE;YACnC,gBAAgB,EAAE,WAAW,KAAK,YAAY;YAC9C,cAAc,EAAE,WAAW,KAAK,UAAU;YAC1C,4BAA4B,EAAE,KAAK,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC;YACtD,2BAA2B,EAAE,KAAK,GAAG,CAAC;YACtC,0BAA0B,EAAE,MAAM,KAAK,UAAU;YACjD,wBAAwB,EAAE,MAAM,KAAK,QAAQ;YAC7C,uBAAuB,EAAE,IAAI,CAAC,MAAM,KAAK,OAAO;YAChD,CAAC,oBAAoB,SAAS,EAAE,CAAC,EAAE,SAAS;SAC7C,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,OAAO,CACL,wBAAC,SAAS,kBACR,SAAS,EAAE,aAAa,EACxB,KAAK,kCAAO,KAAK,GAAK,cAAc,GACpC,GAAG,EAAE,GAAG,IACJ,SAAS,EACT,cAAc,eAGjB,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;gBACzB,IAAI,OAAO,IAAI,CAAC,OAAO,KAAK,QAAQ,EAAE,CAAC;oBACrC,MAAM,iBAAiB,GAAG,IAAA,oBAAU,EAAC,sBAAsB,EAAE;wBAC3D,cAAc,EAAE,WAAW,KAAK,UAAU;wBAC1C,gBAAgB,EAAE,WAAW,KAAK,YAAY;wBAC9C,CAAC,oBAAoB,SAAS,EAAE,CAAC,EAAE,SAAS;wBAC5C,4BAA4B,EAC1B,SAAS,CAAC,eAAe,EAAE,KAAK,CAAC,KAAK,YAAY;qBACrD,CAAC,CAAC;oBAEH,OAAO,CACL,gCAAiB,SAAS,EAAE,iBAAiB,YAC3C,uBAAC,uBAAU,IAAC,OAAO,EAAC,YAAY,YAAE,IAAI,CAAC,OAAO,GAAc,IADpD,KAAK,CAET,CACP,CAAC;gBACJ,CAAC;qBAAM,CAAC;oBACN,OAAO,uBAAC,eAAK,CAAC,QAAQ,cAAc,IAAI,CAAC,OAAO,IAApB,KAAK,CAAiC,CAAC;gBACrE,CAAC;YACH,CAAC,CAAC,EAED,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;gBACzB,OAAO,CACL,gCACE,SAAS,EAAE,WAAW,CAAC,KAAK,EAAE,IAAI,CAAC,EAEnC,KAAK,EAAE;wBACL,OAAO,EAAE,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE;qBACrD,kBAEC,SAAS,CAAC,eAAe,EAAE,KAAK,CAAC,KAAK,QAAQ;wBAC5C,CAAC,CAAC,MAAM;wBACR,CAAC,CAAC,SAAS,YAGf,uBAAC,MAAM,IACL,MAAM,EACJ,IAAI,CAAC,MAAM,KAAK,OAAO;4BACrB,CAAC,CAAC,OAAO;4BACT,CAAC,CAAC,SAAS,CAAC,eAAe,EAAE,KAAK,CAAC,EAEvC,MAAM,EAAE,KAAK,GAAG,CAAC,EACjB,IAAI,EAAE,IAAI,CAAC,OAAO,EAClB,SAAS,EAAE,SAAS,GACpB,IAnBG,KAAK,CAoBN,CACP,CAAC;YACJ,CAAC,CAAC,KACQ,CACb,CAAC;AACJ,CAAC,CAAC;AAEK,MAAM,WAAW,GAAG,CAAsC,EAWV,EAAE,EAAE;QAXM,EAC/D,WAAW,GAAG,YAAY,EAC1B,eAAe,EACf,KAAK,EACL,EAAE,EACF,SAAS,EACT,cAAc,EACd,KAAK,EACL,SAAS,GAAG,QAAQ,EACpB,GAAG,OAEkD,EADlD,SAAS,cAVmD,6GAWhE,CADa;IAEZ,MAAM,SAAS,GAAG,EAAE,aAAF,EAAE,cAAF,EAAE,GAAI,KAAK,CAAC;IAE9B,MAAM,aAAa,GAAG,IAAA,oBAAU,EAC9B,YAAY,EACZ,kBAAkB,EAClB;QACE,gBAAgB,EAAE,WAAW,KAAK,YAAY;QAC9C,cAAc,EAAE,WAAW,KAAK,UAAU;QAC1C,CAAC,oBAAoB,SAAS,EAAE,CAAC,EAAE,SAAS;KAC7C,EACD,SAAS,CACV,CAAC;IAEF,MAAM,WAAW,GAAG,CAAC,KAAa,EAAE,EAAE,CACpC,IAAA,oBAAU,EAAC,iBAAiB,EAAE;QAC5B,gBAAgB,EAAE,WAAW,KAAK,YAAY;QAC9C,cAAc,EAAE,WAAW,KAAK,UAAU;QAC1C,wBAAwB,EAAE,SAAS,CAAC,eAAe,EAAE,KAAK,CAAC,KAAK,QAAQ;QACxE,0BAA0B,EACxB,SAAS,CAAC,eAAe,EAAE,KAAK,CAAC,KAAK,UAAU;QAClD,CAAC,oBAAoB,SAAS,EAAE,CAAC,EAAE,SAAS;KAC7C,CAAC,CAAC;IAEL,OAAO,CACL,wBAAC,SAAS,kBACR,SAAS,EAAE,aAAa,EACxB,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,GAAG,IACJ,SAAS,EACT,cAAc,eAElB,gCAAK,SAAS,EAAC,uBAAuB,GAAG,EACxC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;gBACzB,OAAO,CACL,gCAEE,SAAS,EAAE,WAAW,CAAC,KAAK,CAAC,kBAE3B,SAAS,CAAC,eAAe,EAAE,KAAK,CAAC,KAAK,QAAQ;wBAC5C,CAAC,CAAC,MAAM;wBACR,CAAC,CAAC,SAAS,YAGf,gCAAK,SAAS,EAAC,mBAAmB,GAAO,IARpC,KAAK,CASN,CACP,CAAC;YACJ,CAAC,CAAC,EACF,gCAAK,SAAS,EAAC,uBAAuB,GAAG,KAC/B,CACb,CAAC;AACJ,CAAC,CAAC;AA9DW,QAAA,WAAW,eA8DtB;AAEF,MAAM,MAAM,GAAG,CAAC,EACd,MAAM,EACN,MAAM,EACN,SAAS,GAAG,QAAQ,GAMrB,EAAE,EAAE;IACH,MAAM,kBAAkB,GAAG,IAAA,oBAAU,EACnC,yBAAyB,EACzB,OAAO,MAAM,EAAE,CAChB,CAAC;IACF,MAAM,kBAAkB,GAAG,IAAA,oBAAU,EAAC,mBAAmB,EAAE;QACzD,CAAC,oBAAoB,SAAS,EAAE,CAAC,EAAE,SAAS;KAC7C,CAAC,CAAC;IAEH,OAAO,CACL,gCAAK,SAAS,EAAE,kBAAkB,YAChC,gDAAiB,MAAM,aACpB,MAAM,KAAK,QAAQ,IAAI,CACtB,wCACE,mCACE,SAAS,EAAC,wBAAwB,EAClC,KAAK,EAAE,EAAE,IAAI,EAAE,aAAa,EAAE,WAAW,EAAE,CAAC,EAAE,EAC9C,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,IAAI,EACP,CAAC,EAAC,IAAI,GACN,GACA,CACL,EAED,mCAAQ,SAAS,EAAE,kBAAkB,EAAE,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,GAAG,EAChE,iCACE,CAAC,EAAC,KAAK,EACP,CAAC,EAAC,KAAK,EACP,QAAQ,EAAE,EAAE,EACZ,SAAS,EAAC,wBAAwB,EAClC,UAAU,EAAC,QAAQ,EACnB,gBAAgB,EAAC,QAAQ,EACzB,EAAE,EAAC,OAAO,YAET,MAAM,KAAK,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM,GAC7B,IACH,GACF,CACP,CAAC;AACJ,CAAC,CAAC","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\n/**\n * @remarks\n * Where type `Step` is defined as: `{ content: string | React.JSX.Element; status?: 'default' | 'error' }`. To highlight a step as error, set the `status` to `error`.\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    'ndl-wizard-circle-inner',\n    `ndl-${status}`,\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=\"ndl-wizard-circle-ring\"\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=\"ndl-wizard-circle-text\"\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/accordion/Accordion.js

@@ -185,8 +185,8 @@ const BaseAccordionItem = ({ itemId, children, title, className = '', arrowPosit
         'ndl-accordion-item-content-leading': arrowPosition === 'leading',
     });
     return (_jsxs(Component, Object.assign({ className: classes, style: style, id: itemElementId }, htmlAttributes, { children: [_jsxs("div", { className: headerClasses, id: headerElementId, children: [_jsx(Typography, { as: `h${headingLevel}`, variant: titleTypographyVariant, className: "ndl-accordion-item-heading", children: _jsx("button", { type: "button", id: buttonElementId, onClick: handleOnClick, className: buttonClasses, "aria-expanded": isExpanded, "aria-disabled": isDisabled, "aria-controls": panelElementId, disabled: isDisabled, children: _jsxs("span", { className: iconClasses, children: [_jsx("span", { className: titleClasses, children: title }), _jsx(ChevronDownIconOutline, { className: classNames('ndl-accordion-item-header-icon', {
-                                            '-n-rotate-180': isExpanded,
-                                        }) })] }) }) }), trailingContent && (_jsx(Typography, { as: "div", variant: "body-medium", children: trailingContent }))] }), _jsx("div", { id: panelElementId, ref: contentRef, className: contentClasses, "aria-hidden": !isExpanded, "aria-labelledby": buttonElementId, role: "region", children: _jsx("div", { ref: innerContentRef, className: "ndl-accordion-item-content-inner", onKeyDown: (event) => event.stopPropagation(), children: _jsx(Typography, { variant: "body-medium", className: "n-text-neutral-text-weak", as: "div", children: children }) }) }), hasDivider && _jsx(Divider, {})] })));
+                                            'ndl-expanded': isExpanded,
+                                        }) })] }) }) }), trailingContent && (_jsx(Typography, { as: "div", variant: "body-medium", children: trailingContent }))] }), _jsx("div", { id: panelElementId, ref: contentRef, className: contentClasses, "aria-hidden": !isExpanded, "aria-labelledby": buttonElementId, role: "region", children: _jsx("div", { ref: innerContentRef, className: "ndl-accordion-item-content-inner", onKeyDown: (event) => event.stopPropagation(), children: _jsx(Typography, { variant: "body-medium", className: "ndl-accordion-item-content-text", as: "div", children: children }) }) }), hasDivider && _jsx(Divider, {})] })));
 };
 /**
  * @remarks

package/lib/esm/accordion/Accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.js","sourceRoot":"","sources":["../../../src/accordion/Accordion.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 type React from 'react';\nimport { useCallback, useImperativeHandle, useRef } from 'react';\n\nimport { type PolymorphicCommonProps } from '../_common/types';\nimport { findUntil } from '../_common/utils';\nimport { Divider } from '../divider';\nimport { ChevronDownIconOutline } from '../icons/generated/heroIcons/ChevronDownIconOutline';\nimport { Typography } from '../typography';\nimport { AccordionContext, useAccordionContext } from './accordion-context';\nimport {\n  type AccordionItemId,\n  type AccordionItemProps,\n  type AccordionProps,\n  type ClassicItemProps,\n  type IsMultiple,\n  type IsNotMultiple,\n} from './accordion-types';\n\nenum AccordionSelector {\n  Item = '.ndl-accordion-item',\n  ItemNotDisabled = '.ndl-accordion-item:not(.ndl-accordion-item-disabled)',\n}\n\nconst getAccordionItem = (\n  accordionElement: Element,\n  selector: string,\n  direction: 'next' | 'prev' = 'next',\n): Element | null => {\n  const itemParent = accordionElement.closest(AccordionSelector.Item);\n  if (!itemParent) {\n    return null;\n  }\n\n  return findUntil(direction, itemParent, selector);\n};\n\nconst AccordionComponent = function AccordionComponent<\n  T extends AccordionItemId,\n  U extends React.ElementType = 'div',\n>({\n  children,\n  as,\n  isMultiple,\n  onChange,\n  className,\n  style,\n  htmlAttributes,\n  ref,\n  ...restProps\n}: PolymorphicCommonProps<U, AccordionProps<T>>) {\n  const accordionRef = useRef<U>(null);\n\n  useImperativeHandle(ref, () => accordionRef.current!);\n\n  const Component: React.ElementType = as || 'div';\n\n  // The following function includes code needed to be\n  // able to navigate with the arrow keys (not tab).\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    const accordionElement = accordionRef.current;\n    if (!accordionElement) {\n      return;\n    }\n    const activeElement = document.activeElement as HTMLElement;\n    if (event.key === 'ArrowDown') {\n      event.preventDefault();\n      event.stopPropagation();\n      const newFocusedElement = getAccordionItem(\n        activeElement,\n        AccordionSelector.ItemNotDisabled,\n        'next',\n      );\n      const newHeader = newFocusedElement?.firstElementChild;\n\n      if (newHeader && newHeader instanceof HTMLElement) {\n        focusAccordionItem(newHeader as HTMLElement);\n      }\n    } else if (event.key === 'ArrowUp') {\n      event.preventDefault();\n      event.stopPropagation();\n      const newFocusedElement = getAccordionItem(\n        activeElement,\n        AccordionSelector.ItemNotDisabled,\n        'prev',\n      );\n      const newHeader = newFocusedElement?.firstElementChild;\n\n      if (newHeader && newHeader instanceof HTMLElement) {\n        focusAccordionItem(newHeader as HTMLElement);\n      }\n    } else if (event.key === ' ' || event.key === 'Enter') {\n      event.preventDefault();\n      event.stopPropagation();\n      activeElement.click();\n    }\n  };\n\n  const focusAccordionItem = (accordionHtmlElement: HTMLElement) => {\n    const accordionButton = accordionHtmlElement\n      .getElementsByClassName('ndl-accordion-item-header-button')\n      .item(0);\n\n    if (accordionButton !== null && accordionButton instanceof HTMLElement) {\n      accordionButton.focus();\n    }\n  };\n\n  const classes = classNames('ndl-accordion', className);\n\n  // Destructure and omit keys from DOM spread\n  const { expandedItemIds, expandedItemId, ...restAccordionProps } =\n    restProps as Record<string, unknown> as {\n      expandedItemIds?: T[];\n      expandedItemId?: T | null;\n      [key: string]: unknown;\n    };\n\n  const contextValue = isMultiple\n    ? ({\n        expandedItemIds,\n        isMultiple,\n        onChange,\n      } as IsMultiple<T>)\n    : ({\n        expandedItemId,\n        isMultiple,\n        onChange,\n      } as IsNotMultiple<T>);\n\n  return (\n    <Component\n      className={classes}\n      style={style}\n      ref={accordionRef}\n      onKeyDown={handleKeyDown}\n      role=\"presentation\"\n      {...restAccordionProps}\n      {...htmlAttributes}\n    >\n      <AccordionContext.Provider value={contextValue}>\n        {children}\n      </AccordionContext.Provider>\n    </Component>\n  );\n};\n\nconst createItemId = (type: string, id: AccordionItemId) =>\n  `ndl-accordionitem${type}id-${id}`;\n\nconst BaseAccordionItem = <\n  T extends AccordionItemId,\n  U extends React.ElementType = 'div',\n>({\n  itemId,\n  children,\n  title,\n  className = '',\n  arrowPosition = 'leading',\n  isDisabled = false,\n  onExpandedChange,\n  htmlAttributes,\n  style,\n  as,\n  titleTypographyVariant = 'subheading-medium',\n  hasDivider = true,\n  trailingContent,\n  headingLevel = 2,\n}: PolymorphicCommonProps<U, AccordionItemProps<T>>) => {\n  const contentRef = useRef<HTMLDivElement>(null);\n  const innerContentRef = useRef<HTMLDivElement>(null);\n  const itemElementId = createItemId('item', itemId);\n  const headerElementId = createItemId('header', itemId);\n  const buttonElementId = createItemId('button', itemId);\n  const panelElementId = createItemId('panel', itemId);\n  const Component: React.ElementType = as || 'div';\n\n  const context = useAccordionContext();\n  const { isMultiple } = context;\n\n  const isExpanded = isMultiple\n    ? context.expandedItemIds.includes(itemId)\n    : context.expandedItemId === itemId;\n\n  const handleOnClick = useCallback(() => {\n    if (isDisabled) {\n      return;\n    }\n\n    // Custom callback to call.\n    if (onExpandedChange !== undefined) {\n      onExpandedChange(!isExpanded);\n    }\n\n    if (isMultiple) {\n      const { expandedItemIds, onChange }: IsMultiple<T> = context;\n      // Multiple expanded.\n      if (isExpanded) {\n        // Remove from list.\n        const newArray: T[] = expandedItemIds.filter(\n          (activeId) => activeId !== itemId,\n        );\n        onChange(newArray);\n      } else if (!isExpanded) {\n        // Add to list.\n        const newArray = [...expandedItemIds];\n        newArray.push(itemId);\n        onChange(newArray);\n      }\n    } else {\n      const { onChange }: IsNotMultiple<T> = context;\n      // Single expanded.\n      if (isExpanded) {\n        // Set null.\n        onChange(null);\n      } else if (!isExpanded) {\n        // Set to id.\n        onChange(itemId);\n      }\n    }\n\n    // The W3 WAI-ARIA states that focus can only happen on the header not the header button.\n    document.activeElement?.parentElement?.focus();\n  }, [isExpanded, isMultiple, isDisabled, itemId, onExpandedChange, context]);\n\n  const classes = classNames('ndl-accordion-item', className, {\n    'ndl-accordion-item-disabled': isDisabled,\n    'ndl-accordion-item-expanded': isExpanded,\n  });\n\n  const headerClasses = classNames('ndl-accordion-item-header', {\n    'ndl-accordion-item-header-disabled': isDisabled,\n  });\n\n  const iconClasses = classNames('ndl-accordion-item-header-icon-wrapper', {\n    'ndl-accordion-item-header-icon-wrapper-leading':\n      arrowPosition === 'leading',\n  });\n\n  const buttonClasses = classNames('ndl-accordion-item-header-button', {\n    'ndl-accordion-item-header-button-disabled': isDisabled,\n  });\n\n  const titleClasses = classNames('ndl-accordion-item-header-button-title', {\n    'ndl-accordion-item-header-button-title': isDisabled,\n    'ndl-accordion-item-header-button-title-leading':\n      arrowPosition === 'leading',\n  });\n\n  const contentClasses = classNames('ndl-accordion-item-content', {\n    'ndl-accordion-item-content-expanded': isExpanded,\n    'ndl-accordion-item-content-leading': arrowPosition === 'leading',\n  });\n\n  return (\n    <Component\n      className={classes}\n      style={style}\n      id={itemElementId}\n      {...htmlAttributes}\n    >\n      <div className={headerClasses} id={headerElementId}>\n        <Typography\n          as={`h${headingLevel}`}\n          variant={titleTypographyVariant}\n          className=\"ndl-accordion-item-heading\"\n        >\n          <button\n            type=\"button\"\n            id={buttonElementId}\n            onClick={handleOnClick}\n            className={buttonClasses}\n            aria-expanded={isExpanded}\n            aria-disabled={isDisabled}\n            aria-controls={panelElementId}\n            disabled={isDisabled}\n          >\n            <span className={iconClasses}>\n              <span className={titleClasses}>{title}</span>\n\n              <ChevronDownIconOutline\n                className={classNames('ndl-accordion-item-header-icon', {\n                  '-n-rotate-180': isExpanded,\n                })}\n              />\n            </span>\n          </button>\n        </Typography>\n        {trailingContent && (\n          <Typography as=\"div\" variant=\"body-medium\">\n            {trailingContent}\n          </Typography>\n        )}\n      </div>\n\n      <div\n        id={panelElementId}\n        ref={contentRef}\n        className={contentClasses}\n        aria-hidden={!isExpanded}\n        aria-labelledby={buttonElementId}\n        role=\"region\"\n      >\n        {/* The <div> element has a child <button> element that allows keyboard interaction */}\n        {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}\n        <div\n          ref={innerContentRef}\n          className=\"ndl-accordion-item-content-inner\"\n          onKeyDown={(event) => event.stopPropagation()}\n        >\n          <Typography\n            variant=\"body-medium\"\n            className=\"n-text-neutral-text-weak\"\n            as=\"div\"\n          >\n            {children}\n          </Typography>\n        </div>\n      </div>\n      {hasDivider && <Divider />}\n    </Component>\n  );\n};\n\n/**\n * @remarks\n * Where `T` is of the type `string | number | undefined`.\n *\n * `TypographyVariants` is of the type `'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'subheading-large' | 'subheading-medium' | 'subheading-small' | 'body-large' | 'body-medium' | 'body-small' | 'code' | 'label'`.\n */\nconst AccordionItem = <\n  T extends AccordionItemId,\n  U extends React.ElementType = 'div',\n>({\n  className,\n  ...restProps\n}: PolymorphicCommonProps<U, ClassicItemProps<T>>) => {\n  const classes = classNames('ndl-accordion-item-classic', className);\n\n  return <BaseAccordionItem {...restProps} className={classes} />;\n};\nAccordionItem.displayName = 'Accordion.Item';\n\n/**\n * @remarks\n * Where `T` is of the type `string | number | undefined`.\n */\ntype CleanItemProps<T extends AccordionItemId> = Omit<\n  AccordionItemProps<T>,\n  'hasDivider'\n>;\n\nconst CleanItem = <\n  T extends AccordionItemId,\n  U extends React.ElementType = 'div',\n>({\n  className,\n  ...restProps\n}: PolymorphicCommonProps<U, CleanItemProps<T>>) => {\n  const classes = classNames('ndl-accordion-item-clean', className);\n\n  return (\n    <BaseAccordionItem {...restProps} className={classes} hasDivider={false} />\n  );\n};\n\nCleanItem.displayName = 'Accordion.CleanItem';\n\nconst Accordion = Object.assign(AccordionComponent, {\n  CleanItem: CleanItem,\n  Item: AccordionItem,\n});\n\nexport { Accordion };\n"]}
+{"version":3,"file":"Accordion.js","sourceRoot":"","sources":["../../../src/accordion/Accordion.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 type React from 'react';\nimport { useCallback, useImperativeHandle, useRef } from 'react';\n\nimport { type PolymorphicCommonProps } from '../_common/types';\nimport { findUntil } from '../_common/utils';\nimport { Divider } from '../divider';\nimport { ChevronDownIconOutline } from '../icons/generated/heroIcons/ChevronDownIconOutline';\nimport { Typography } from '../typography';\nimport { AccordionContext, useAccordionContext } from './accordion-context';\nimport {\n  type AccordionItemId,\n  type AccordionItemProps,\n  type AccordionProps,\n  type ClassicItemProps,\n  type IsMultiple,\n  type IsNotMultiple,\n} from './accordion-types';\n\nenum AccordionSelector {\n  Item = '.ndl-accordion-item',\n  ItemNotDisabled = '.ndl-accordion-item:not(.ndl-accordion-item-disabled)',\n}\n\nconst getAccordionItem = (\n  accordionElement: Element,\n  selector: string,\n  direction: 'next' | 'prev' = 'next',\n): Element | null => {\n  const itemParent = accordionElement.closest(AccordionSelector.Item);\n  if (!itemParent) {\n    return null;\n  }\n\n  return findUntil(direction, itemParent, selector);\n};\n\nconst AccordionComponent = function AccordionComponent<\n  T extends AccordionItemId,\n  U extends React.ElementType = 'div',\n>({\n  children,\n  as,\n  isMultiple,\n  onChange,\n  className,\n  style,\n  htmlAttributes,\n  ref,\n  ...restProps\n}: PolymorphicCommonProps<U, AccordionProps<T>>) {\n  const accordionRef = useRef<U>(null);\n\n  useImperativeHandle(ref, () => accordionRef.current!);\n\n  const Component: React.ElementType = as || 'div';\n\n  // The following function includes code needed to be\n  // able to navigate with the arrow keys (not tab).\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    const accordionElement = accordionRef.current;\n    if (!accordionElement) {\n      return;\n    }\n    const activeElement = document.activeElement as HTMLElement;\n    if (event.key === 'ArrowDown') {\n      event.preventDefault();\n      event.stopPropagation();\n      const newFocusedElement = getAccordionItem(\n        activeElement,\n        AccordionSelector.ItemNotDisabled,\n        'next',\n      );\n      const newHeader = newFocusedElement?.firstElementChild;\n\n      if (newHeader && newHeader instanceof HTMLElement) {\n        focusAccordionItem(newHeader as HTMLElement);\n      }\n    } else if (event.key === 'ArrowUp') {\n      event.preventDefault();\n      event.stopPropagation();\n      const newFocusedElement = getAccordionItem(\n        activeElement,\n        AccordionSelector.ItemNotDisabled,\n        'prev',\n      );\n      const newHeader = newFocusedElement?.firstElementChild;\n\n      if (newHeader && newHeader instanceof HTMLElement) {\n        focusAccordionItem(newHeader as HTMLElement);\n      }\n    } else if (event.key === ' ' || event.key === 'Enter') {\n      event.preventDefault();\n      event.stopPropagation();\n      activeElement.click();\n    }\n  };\n\n  const focusAccordionItem = (accordionHtmlElement: HTMLElement) => {\n    const accordionButton = accordionHtmlElement\n      .getElementsByClassName('ndl-accordion-item-header-button')\n      .item(0);\n\n    if (accordionButton !== null && accordionButton instanceof HTMLElement) {\n      accordionButton.focus();\n    }\n  };\n\n  const classes = classNames('ndl-accordion', className);\n\n  // Destructure and omit keys from DOM spread\n  const { expandedItemIds, expandedItemId, ...restAccordionProps } =\n    restProps as Record<string, unknown> as {\n      expandedItemIds?: T[];\n      expandedItemId?: T | null;\n      [key: string]: unknown;\n    };\n\n  const contextValue = isMultiple\n    ? ({\n        expandedItemIds,\n        isMultiple,\n        onChange,\n      } as IsMultiple<T>)\n    : ({\n        expandedItemId,\n        isMultiple,\n        onChange,\n      } as IsNotMultiple<T>);\n\n  return (\n    <Component\n      className={classes}\n      style={style}\n      ref={accordionRef}\n      onKeyDown={handleKeyDown}\n      role=\"presentation\"\n      {...restAccordionProps}\n      {...htmlAttributes}\n    >\n      <AccordionContext.Provider value={contextValue}>\n        {children}\n      </AccordionContext.Provider>\n    </Component>\n  );\n};\n\nconst createItemId = (type: string, id: AccordionItemId) =>\n  `ndl-accordionitem${type}id-${id}`;\n\nconst BaseAccordionItem = <\n  T extends AccordionItemId,\n  U extends React.ElementType = 'div',\n>({\n  itemId,\n  children,\n  title,\n  className = '',\n  arrowPosition = 'leading',\n  isDisabled = false,\n  onExpandedChange,\n  htmlAttributes,\n  style,\n  as,\n  titleTypographyVariant = 'subheading-medium',\n  hasDivider = true,\n  trailingContent,\n  headingLevel = 2,\n}: PolymorphicCommonProps<U, AccordionItemProps<T>>) => {\n  const contentRef = useRef<HTMLDivElement>(null);\n  const innerContentRef = useRef<HTMLDivElement>(null);\n  const itemElementId = createItemId('item', itemId);\n  const headerElementId = createItemId('header', itemId);\n  const buttonElementId = createItemId('button', itemId);\n  const panelElementId = createItemId('panel', itemId);\n  const Component: React.ElementType = as || 'div';\n\n  const context = useAccordionContext();\n  const { isMultiple } = context;\n\n  const isExpanded = isMultiple\n    ? context.expandedItemIds.includes(itemId)\n    : context.expandedItemId === itemId;\n\n  const handleOnClick = useCallback(() => {\n    if (isDisabled) {\n      return;\n    }\n\n    // Custom callback to call.\n    if (onExpandedChange !== undefined) {\n      onExpandedChange(!isExpanded);\n    }\n\n    if (isMultiple) {\n      const { expandedItemIds, onChange }: IsMultiple<T> = context;\n      // Multiple expanded.\n      if (isExpanded) {\n        // Remove from list.\n        const newArray: T[] = expandedItemIds.filter(\n          (activeId) => activeId !== itemId,\n        );\n        onChange(newArray);\n      } else if (!isExpanded) {\n        // Add to list.\n        const newArray = [...expandedItemIds];\n        newArray.push(itemId);\n        onChange(newArray);\n      }\n    } else {\n      const { onChange }: IsNotMultiple<T> = context;\n      // Single expanded.\n      if (isExpanded) {\n        // Set null.\n        onChange(null);\n      } else if (!isExpanded) {\n        // Set to id.\n        onChange(itemId);\n      }\n    }\n\n    // The W3 WAI-ARIA states that focus can only happen on the header not the header button.\n    document.activeElement?.parentElement?.focus();\n  }, [isExpanded, isMultiple, isDisabled, itemId, onExpandedChange, context]);\n\n  const classes = classNames('ndl-accordion-item', className, {\n    'ndl-accordion-item-disabled': isDisabled,\n    'ndl-accordion-item-expanded': isExpanded,\n  });\n\n  const headerClasses = classNames('ndl-accordion-item-header', {\n    'ndl-accordion-item-header-disabled': isDisabled,\n  });\n\n  const iconClasses = classNames('ndl-accordion-item-header-icon-wrapper', {\n    'ndl-accordion-item-header-icon-wrapper-leading':\n      arrowPosition === 'leading',\n  });\n\n  const buttonClasses = classNames('ndl-accordion-item-header-button', {\n    'ndl-accordion-item-header-button-disabled': isDisabled,\n  });\n\n  const titleClasses = classNames('ndl-accordion-item-header-button-title', {\n    'ndl-accordion-item-header-button-title': isDisabled,\n    'ndl-accordion-item-header-button-title-leading':\n      arrowPosition === 'leading',\n  });\n\n  const contentClasses = classNames('ndl-accordion-item-content', {\n    'ndl-accordion-item-content-expanded': isExpanded,\n    'ndl-accordion-item-content-leading': arrowPosition === 'leading',\n  });\n\n  return (\n    <Component\n      className={classes}\n      style={style}\n      id={itemElementId}\n      {...htmlAttributes}\n    >\n      <div className={headerClasses} id={headerElementId}>\n        <Typography\n          as={`h${headingLevel}`}\n          variant={titleTypographyVariant}\n          className=\"ndl-accordion-item-heading\"\n        >\n          <button\n            type=\"button\"\n            id={buttonElementId}\n            onClick={handleOnClick}\n            className={buttonClasses}\n            aria-expanded={isExpanded}\n            aria-disabled={isDisabled}\n            aria-controls={panelElementId}\n            disabled={isDisabled}\n          >\n            <span className={iconClasses}>\n              <span className={titleClasses}>{title}</span>\n\n              <ChevronDownIconOutline\n                className={classNames('ndl-accordion-item-header-icon', {\n                  'ndl-expanded': isExpanded,\n                })}\n              />\n            </span>\n          </button>\n        </Typography>\n        {trailingContent && (\n          <Typography as=\"div\" variant=\"body-medium\">\n            {trailingContent}\n          </Typography>\n        )}\n      </div>\n\n      <div\n        id={panelElementId}\n        ref={contentRef}\n        className={contentClasses}\n        aria-hidden={!isExpanded}\n        aria-labelledby={buttonElementId}\n        role=\"region\"\n      >\n        {/* The <div> element has a child <button> element that allows keyboard interaction */}\n        {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}\n        <div\n          ref={innerContentRef}\n          className=\"ndl-accordion-item-content-inner\"\n          onKeyDown={(event) => event.stopPropagation()}\n        >\n          <Typography\n            variant=\"body-medium\"\n            className=\"ndl-accordion-item-content-text\"\n            as=\"div\"\n          >\n            {children}\n          </Typography>\n        </div>\n      </div>\n      {hasDivider && <Divider />}\n    </Component>\n  );\n};\n\n/**\n * @remarks\n * Where `T` is of the type `string | number | undefined`.\n *\n * `TypographyVariants` is of the type `'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'subheading-large' | 'subheading-medium' | 'subheading-small' | 'body-large' | 'body-medium' | 'body-small' | 'code' | 'label'`.\n */\nconst AccordionItem = <\n  T extends AccordionItemId,\n  U extends React.ElementType = 'div',\n>({\n  className,\n  ...restProps\n}: PolymorphicCommonProps<U, ClassicItemProps<T>>) => {\n  const classes = classNames('ndl-accordion-item-classic', className);\n\n  return <BaseAccordionItem {...restProps} className={classes} />;\n};\nAccordionItem.displayName = 'Accordion.Item';\n\n/**\n * @remarks\n * Where `T` is of the type `string | number | undefined`.\n */\ntype CleanItemProps<T extends AccordionItemId> = Omit<\n  AccordionItemProps<T>,\n  'hasDivider'\n>;\n\nconst CleanItem = <\n  T extends AccordionItemId,\n  U extends React.ElementType = 'div',\n>({\n  className,\n  ...restProps\n}: PolymorphicCommonProps<U, CleanItemProps<T>>) => {\n  const classes = classNames('ndl-accordion-item-clean', className);\n\n  return (\n    <BaseAccordionItem {...restProps} className={classes} hasDivider={false} />\n  );\n};\n\nCleanItem.displayName = 'Accordion.CleanItem';\n\nconst Accordion = Object.assign(AccordionComponent, {\n  CleanItem: CleanItem,\n  Item: AccordionItem,\n});\n\nexport { Accordion };\n"]}

package/lib/esm/ai/code-preview/CodePreview.js

@@ -80,6 +80,8 @@ export const CodePreview = (_a) => {
                         // Turn on 'shouldShowLineNumbers' & 'wrapLongLines' at the same time, the display is wrong
                         // https://github.com/react-syntax-highlighter/react-syntax-highlighter/issues/402
                         // wrapLongLines
-                        codeTagProps: { className: 'n-ai-code-preview' }, showLineNumbers: false, children: code }) }) }))] })));
+                        showLineNumbers: false, 
+                        // Any value on codeTagProps replaces the library default, which would inline the theme's code styles
+                        codeTagProps: {}, children: code }) }) }))] })));
 };
 //# sourceMappingURL=CodePreview.js.map

package/lib/esm/ai/code-preview/CodePreview.js.map

@@ -1 +1 @@
-{"version":3,"file":"CodePreview.js","sourceRoot":"","sources":["../../../../src/ai/code-preview/CodePreview.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 {\n  ClipboardButton,\n  type CodeBlock,\n  LoadingSpinner,\n  StatusLabel,\n  Typography,\n  useNeedleTheme,\n} from '@neo4j-ndl/react';\nimport classNames from 'classnames';\nimport { useEffect, useState } from 'react';\nimport { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter';\n\nimport { type CommonProps } from '../../_common/types';\nimport {\n  type LanguageProp,\n  Languages,\n  loadLanguage,\n} from '../../code-block/code-languages';\nimport ndlCodeDark from '../../code-block/themes/ndl-code-dark';\nimport ndlCodeLight from '../../code-block/themes/ndl-code-light';\n\ntype CodePreviewProps = {\n  /** The code content to display */\n  code: string;\n  /** The language of the code (e.g., 'cypher', 'python', 'javascript') */\n  language: React.ComponentProps<typeof CodeBlock>['language'];\n  /** The current state of the code block */\n  label?: 'read' | 'write';\n  /** Whether the code block is loading */\n  isLoading?: boolean;\n  /** The actions to display in the header. Should be small CleanIconButton components. */\n  headerActions?: React.ReactNode;\n  /** The theme of the code block */\n  theme?: 'ndl-code-dark' | 'ndl-code-light';\n};\n\n/**\n * The component is used to display code that is generated by an LLM.\n *\n * @alpha - Changes to this component may be breaking.\n * @deprecated - Use `<Preview />` with `<Preview.Code />` instead.\n */\nexport const CodePreview = ({\n  code,\n  language,\n  label,\n  isLoading = false,\n  headerActions,\n  theme,\n  ref,\n  style,\n  className,\n  htmlAttributes,\n  ...restProps\n}: CommonProps<'div', CodePreviewProps>) => {\n  const [loadedLanguage, setLoadedLanguage] = useState<\n    CodePreviewProps['language'] | null\n  >(null);\n  const { theme: ndlTheme } = useNeedleTheme();\n\n  useEffect(() => {\n    if (!language || !(Languages as readonly string[]).includes(language)) {\n      setLoadedLanguage('text');\n      return;\n    }\n\n    loadLanguage(language as LanguageProp)\n      .then((module) => {\n        SyntaxHighlighter.registerLanguage(language, module.default);\n        setLoadedLanguage(language);\n      })\n      .catch((err) => console.error(err));\n  }, [language]);\n\n  const getTheme = () => {\n    switch (theme) {\n      case 'ndl-code-dark':\n        return ndlCodeDark;\n      case 'ndl-code-light':\n        return ndlCodeLight;\n      default:\n        return ndlTheme === 'light' ? ndlCodeLight : ndlCodeDark;\n    }\n  };\n\n  return (\n    <div\n      ref={ref}\n      style={style}\n      className={classNames('ndl-ai-code-preview', className)}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      {/* Header */}\n      <div className=\"ndl-ai-code-preview-header\">\n        <div className=\"ndl-ai-code-preview-title\">\n          {isLoading ? (\n            <>\n              <LoadingSpinner size=\"medium\" />\n              <Typography variant=\"code\">\n                WRITING {language.toUpperCase()}\n              </Typography>\n            </>\n          ) : (\n            <>\n              <Typography variant=\"code\">\n                {language.toUpperCase()}{' '}\n                {language.toLowerCase() === 'cypher' ? 'QUERY' : ''}\n              </Typography>\n              {label && (\n                <StatusLabel\n                  variant={label === 'write' ? 'warning' : 'info'}\n                  size=\"small\"\n                  fill=\"semi-filled\"\n                >\n                  {label}\n                </StatusLabel>\n              )}\n            </>\n          )}\n        </div>\n\n        {!isLoading && (\n          <div className=\"ndl-ai-code-preview-actions\">\n            <ClipboardButton\n              textToCopy={code}\n              type=\"clean-icon-button\"\n              size=\"small\"\n            />\n            {headerActions}\n          </div>\n        )}\n      </div>\n\n      {!isLoading && (\n        <div className=\"ndl-ai-code-preview-content\">\n          <div className=\"ndl-code-content-container\">\n            <SyntaxHighlighter\n              language={loadedLanguage ?? 'text'}\n              style={{\n                ...getTheme(),\n                'pre[class*=\"language-\"]': {\n                  border: 0,\n                  color: 'var(--theme-color-neutral-text-default)',\n                  lineHeight: '1',\n                  overflowX: 'auto',\n                  padding: 'var(--space-12)',\n                  width: 'fit-content',\n                },\n              }}\n              // Turn on 'shouldShowLineNumbers' & 'wrapLongLines' at the same time, the display is wrong\n              // https://github.com/react-syntax-highlighter/react-syntax-highlighter/issues/402\n              // wrapLongLines\n              codeTagProps={{ className: 'n-ai-code-preview' }}\n              showLineNumbers={false}\n            >\n              {code}\n            </SyntaxHighlighter>\n          </div>\n        </div>\n      )}\n    </div>\n  );\n};\n"]}
+{"version":3,"file":"CodePreview.js","sourceRoot":"","sources":["../../../../src/ai/code-preview/CodePreview.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 {\n  ClipboardButton,\n  type CodeBlock,\n  LoadingSpinner,\n  StatusLabel,\n  Typography,\n  useNeedleTheme,\n} from '@neo4j-ndl/react';\nimport classNames from 'classnames';\nimport { useEffect, useState } from 'react';\nimport { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter';\n\nimport { type CommonProps } from '../../_common/types';\nimport {\n  type LanguageProp,\n  Languages,\n  loadLanguage,\n} from '../../code-block/code-languages';\nimport ndlCodeDark from '../../code-block/themes/ndl-code-dark';\nimport ndlCodeLight from '../../code-block/themes/ndl-code-light';\n\ntype CodePreviewProps = {\n  /** The code content to display */\n  code: string;\n  /** The language of the code (e.g., 'cypher', 'python', 'javascript') */\n  language: React.ComponentProps<typeof CodeBlock>['language'];\n  /** The current state of the code block */\n  label?: 'read' | 'write';\n  /** Whether the code block is loading */\n  isLoading?: boolean;\n  /** The actions to display in the header. Should be small CleanIconButton components. */\n  headerActions?: React.ReactNode;\n  /** The theme of the code block */\n  theme?: 'ndl-code-dark' | 'ndl-code-light';\n};\n\n/**\n * The component is used to display code that is generated by an LLM.\n *\n * @alpha - Changes to this component may be breaking.\n * @deprecated - Use `<Preview />` with `<Preview.Code />` instead.\n */\nexport const CodePreview = ({\n  code,\n  language,\n  label,\n  isLoading = false,\n  headerActions,\n  theme,\n  ref,\n  style,\n  className,\n  htmlAttributes,\n  ...restProps\n}: CommonProps<'div', CodePreviewProps>) => {\n  const [loadedLanguage, setLoadedLanguage] = useState<\n    CodePreviewProps['language'] | null\n  >(null);\n  const { theme: ndlTheme } = useNeedleTheme();\n\n  useEffect(() => {\n    if (!language || !(Languages as readonly string[]).includes(language)) {\n      setLoadedLanguage('text');\n      return;\n    }\n\n    loadLanguage(language as LanguageProp)\n      .then((module) => {\n        SyntaxHighlighter.registerLanguage(language, module.default);\n        setLoadedLanguage(language);\n      })\n      .catch((err) => console.error(err));\n  }, [language]);\n\n  const getTheme = () => {\n    switch (theme) {\n      case 'ndl-code-dark':\n        return ndlCodeDark;\n      case 'ndl-code-light':\n        return ndlCodeLight;\n      default:\n        return ndlTheme === 'light' ? ndlCodeLight : ndlCodeDark;\n    }\n  };\n\n  return (\n    <div\n      ref={ref}\n      style={style}\n      className={classNames('ndl-ai-code-preview', className)}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      {/* Header */}\n      <div className=\"ndl-ai-code-preview-header\">\n        <div className=\"ndl-ai-code-preview-title\">\n          {isLoading ? (\n            <>\n              <LoadingSpinner size=\"medium\" />\n              <Typography variant=\"code\">\n                WRITING {language.toUpperCase()}\n              </Typography>\n            </>\n          ) : (\n            <>\n              <Typography variant=\"code\">\n                {language.toUpperCase()}{' '}\n                {language.toLowerCase() === 'cypher' ? 'QUERY' : ''}\n              </Typography>\n              {label && (\n                <StatusLabel\n                  variant={label === 'write' ? 'warning' : 'info'}\n                  size=\"small\"\n                  fill=\"semi-filled\"\n                >\n                  {label}\n                </StatusLabel>\n              )}\n            </>\n          )}\n        </div>\n\n        {!isLoading && (\n          <div className=\"ndl-ai-code-preview-actions\">\n            <ClipboardButton\n              textToCopy={code}\n              type=\"clean-icon-button\"\n              size=\"small\"\n            />\n            {headerActions}\n          </div>\n        )}\n      </div>\n\n      {!isLoading && (\n        <div className=\"ndl-ai-code-preview-content\">\n          <div className=\"ndl-code-content-container\">\n            <SyntaxHighlighter\n              language={loadedLanguage ?? 'text'}\n              style={{\n                ...getTheme(),\n                'pre[class*=\"language-\"]': {\n                  border: 0,\n                  color: 'var(--theme-color-neutral-text-default)',\n                  lineHeight: '1',\n                  overflowX: 'auto',\n                  padding: 'var(--space-12)',\n                  width: 'fit-content',\n                },\n              }}\n              // Turn on 'shouldShowLineNumbers' & 'wrapLongLines' at the same time, the display is wrong\n              // https://github.com/react-syntax-highlighter/react-syntax-highlighter/issues/402\n              // wrapLongLines\n              showLineNumbers={false}\n              // Any value on codeTagProps replaces the library default, which would inline the theme's code styles\n              codeTagProps={{}}\n            >\n              {code}\n            </SyntaxHighlighter>\n          </div>\n        </div>\n      )}\n    </div>\n  );\n};\n"]}

package/lib/esm/ai/preview/Preview.js

@@ -97,7 +97,9 @@ const PreviewCode = (_a) => {
                             // Turn on 'shouldShowLineNumbers' & 'wrapLongLines' at the same time, the display is wrong
                             // https://github.com/react-syntax-highlighter/react-syntax-highlighter/issues/402
                             // wrapLongLines
-                            codeTagProps: { className: 'n-ai-preview-code' }, showLineNumbers: false, children: code }) })] }))] })));
+                            showLineNumbers: false, 
+                            // Any value on codeTagProps replaces the library default, which would inline the theme's code styles
+                            codeTagProps: {}, children: code }) })] }))] })));
 };
 const PreviewContent = (_a) => {
     var { children, ref, style, className, htmlAttributes } = _a, restProps = __rest(_a, ["children", "ref", "style", "className", "htmlAttributes"]);