@hitachivantara/uikit-react-lab 5.36.2 → 5.37.1

package/dist/esm/Blade/Blade.js.map

@@ -1 +1 @@
-{"version":3,"file":"Blade.js","sources":["../../../src/Blade/Blade.tsx"],"sourcesContent":["import React, {\n  HTMLAttributes,\n  SyntheticEvent,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport {\n  ExtractNames,\n  HvBaseProps,\n  HvTypography,\n  HvTypographyVariants,\n  setId,\n  useControlled,\n  useDefaultProps,\n  useUniqueId,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { staticClasses, useClasses } from \"./Blade.styles\";\n\nexport { staticClasses as bladeClasses };\n\nexport type HvBladeClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBladeProps\n  extends HvBaseProps<HTMLDivElement, \"onChange\" | \"children\"> {\n  /**\n   * The content that will be rendered within the blade.\n   */\n  children: React.ReactNode;\n\n  /**\n   * The content of the blade's button.\n   *\n   * If a render function is provided, it will be called with the expanded state as an argument.\n   */\n  label?: React.ReactNode | ((expanded: boolean) => React.ReactNode);\n  /**\n   * Typography variant for the blade's button label.\n   */\n  labelVariant?: HvTypographyVariants;\n  /**\n   * Heading Level to apply to blade button.\n   *\n   * If 'undefined', the button will not have a header wrapper.\n   */\n  headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;\n\n  /**\n   * Indicates whether the blade is expanded or not.\n   *\n   * When defined the expanded state becomes controlled.\n   *\n   * @default undefined\n   */\n  expanded?: boolean;\n  /**\n   * Specifies the initial expanded state of the blade when it is uncontrolled.\n   */\n  defaultExpanded?: boolean;\n\n  /**\n   * Callback function triggered when the blade's button is pressed.\n   * It receives the event and the new expanded state as arguments.\n   *\n   * If the blade is uncontrolled, this new state will be effective.\n   * If the blade is controlled, it is up to the parent component to manage this state.\n   *\n   * @param {SyntheticEvent} event The event source of the callback.\n   * @param {boolean} value The new value.\n   */\n  onChange?: (event: React.SyntheticEvent, value: boolean) => void;\n\n  /**\n   * Specifies whether the blade is disabled. If true, the blade cannot be interacted with.\n   */\n  disabled?: boolean;\n\n  /**\n   * If true, the blade will take up the maximum width of the container when expanded.\n   */\n  fullWidth?: boolean;\n\n  /**\n   * Props to be passed to the button that toggles the blade's expanded state.\n   * This can be used to further customize the appearance or behavior of the blade's button,\n   * e.g. to set the aria-label attribute.\n   */\n  buttonProps?: HTMLAttributes<HTMLDivElement>;\n  /**\n   * Props to be passed to the container div that holds the blade's children.\n   * This can be used to further customize the appearance or behavior of the blade's content area.\n   */\n  containerProps?: HTMLAttributes<HTMLDivElement>;\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes?: HvBladeClasses;\n}\n\n/**\n * A blade is a design element that expands horizontally to reveal information, similar to an accordion.\n *\n * It is usually stacked horizontally with other blades and works best when used within a flex container.\n * The `HvBlades` component is recommended for this purpose, as it also provides better management of the\n * blades' expanded state.\n */\nexport const HvBlade = (props: HvBladeProps) => {\n  const {\n    id: idProp,\n    className,\n    classes: classesProp,\n    expanded,\n    defaultExpanded = false,\n    label,\n    labelVariant = \"label\",\n    headingLevel,\n    onChange,\n    disabled = false,\n    children,\n    fullWidth,\n    buttonProps,\n    containerProps,\n    ...others\n  } = useDefaultProps(\"HvBlade\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const [isExpanded, setIsExpanded] = useControlled(\n    expanded,\n    Boolean(defaultExpanded),\n  );\n\n  const handleAction = useCallback(\n    (event: SyntheticEvent) => {\n      if (!disabled) {\n        onChange?.(event, !isExpanded);\n\n        // This will only run if uncontrolled\n        setIsExpanded(!isExpanded);\n\n        return true;\n      }\n      return false;\n    },\n    [disabled, onChange, isExpanded, setIsExpanded],\n  );\n\n  const handleClick = useCallback(\n    (event: SyntheticEvent) => {\n      handleAction(event);\n      event.preventDefault();\n      event.stopPropagation();\n    },\n    [handleAction],\n  );\n\n  const handleKeyDown = useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      let isEventHandled = false;\n      const { key } = event;\n\n      if (\n        event.altKey ||\n        event.ctrlKey ||\n        event.metaKey ||\n        event.currentTarget !== event.target\n      ) {\n        return;\n      }\n      switch (key) {\n        case \"Enter\":\n        case \" \":\n          isEventHandled = handleAction(event);\n          break;\n        default:\n          return;\n      }\n\n      if (isEventHandled) {\n        event.preventDefault();\n        event.stopPropagation();\n      }\n    },\n    [handleAction],\n  );\n\n  const id = useUniqueId(idProp);\n  const bladeHeaderId = setId(id, \"button\");\n  const bladeContainerId = setId(id, \"container\");\n  const bladeHeader = useMemo(() => {\n    const buttonLabel = typeof label === \"function\" ? label(isExpanded) : label;\n\n    const bladeButton = (\n      <HvTypography\n        id={bladeHeaderId}\n        component=\"div\"\n        role=\"button\"\n        className={cx(classes.button, {\n          [classes.disabled]: disabled,\n          [classes.textOnlyLabel]: typeof buttonLabel === \"string\",\n        })}\n        style={{ flexShrink: headingLevel === undefined ? 0 : undefined }}\n        disabled={disabled}\n        tabIndex={0}\n        onKeyDown={handleKeyDown}\n        onClick={handleClick}\n        variant={labelVariant}\n        aria-expanded={isExpanded}\n        aria-controls={bladeContainerId}\n        {...buttonProps}\n      >\n        {buttonLabel}\n      </HvTypography>\n    );\n    return headingLevel === undefined ? (\n      bladeButton\n    ) : (\n      <HvTypography\n        component={`h${headingLevel}`}\n        variant={labelVariant}\n        className={classes.heading}\n        style={{ flexShrink: 0 }}\n      >\n        {bladeButton}\n      </HvTypography>\n    );\n  }, [\n    bladeContainerId,\n    bladeHeaderId,\n    buttonProps,\n    classes.button,\n    classes.disabled,\n    classes.heading,\n    classes.textOnlyLabel,\n    cx,\n    disabled,\n    handleClick,\n    handleKeyDown,\n    headingLevel,\n    isExpanded,\n    label,\n    labelVariant,\n  ]);\n\n  const bladeRef = useRef<HTMLDivElement>(null);\n  const [maxWidth, setMaxWidth] = useState<number | undefined>(undefined);\n  useEffect(() => {\n    if (bladeRef.current) {\n      const resizeObserver = new ResizeObserver((entries) => {\n        setMaxWidth(entries[0].target.clientWidth);\n      });\n      resizeObserver.observe(\n        // using the blade's container as reference max-width is more stable\n        bladeRef.current.parentElement ?? bladeRef.current,\n      );\n      return () => {\n        resizeObserver.disconnect();\n      };\n    }\n  }, [isExpanded]);\n\n  const { style: containerStyle, ...otherContainerProps } =\n    containerProps || {};\n\n  return (\n    <div\n      ref={bladeRef}\n      id={idProp}\n      className={cx(classes.root, className, {\n        [classes.fullWidth]: fullWidth,\n        [classes.expanded]: isExpanded,\n      })}\n      {...others}\n    >\n      {bladeHeader}\n      <div\n        id={bladeContainerId}\n        role=\"region\"\n        aria-labelledby={bladeHeaderId}\n        className={classes.container}\n        hidden={!isExpanded}\n        style={{\n          ...containerStyle,\n          maxWidth: isExpanded ? maxWidth : 0,\n        }}\n        {...otherContainerProps}\n      >\n        {children}\n      </div>\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Blade.js","sources":["../../../src/Blade/Blade.tsx"],"sourcesContent":["import {\n  HTMLAttributes,\n  SyntheticEvent,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport {\n  ExtractNames,\n  HvBaseProps,\n  HvTypography,\n  HvTypographyVariants,\n  setId,\n  useControlled,\n  useDefaultProps,\n  useUniqueId,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { staticClasses, useClasses } from \"./Blade.styles\";\n\nexport { staticClasses as bladeClasses };\n\nexport type HvBladeClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBladeProps\n  extends HvBaseProps<HTMLDivElement, \"onChange\" | \"children\"> {\n  /**\n   * The content that will be rendered within the blade.\n   */\n  children: React.ReactNode;\n\n  /**\n   * The content of the blade's button.\n   *\n   * If a render function is provided, it will be called with the expanded state as an argument.\n   */\n  label?: React.ReactNode | ((expanded: boolean) => React.ReactNode);\n  /**\n   * Typography variant for the blade's button label.\n   */\n  labelVariant?: HvTypographyVariants;\n  /**\n   * Heading Level to apply to blade button.\n   *\n   * If 'undefined', the button will not have a header wrapper.\n   */\n  headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;\n\n  /**\n   * Indicates whether the blade is expanded or not.\n   *\n   * When defined the expanded state becomes controlled.\n   *\n   * @default undefined\n   */\n  expanded?: boolean;\n  /**\n   * Specifies the initial expanded state of the blade when it is uncontrolled.\n   */\n  defaultExpanded?: boolean;\n\n  /**\n   * Callback function triggered when the blade's button is pressed.\n   * It receives the event and the new expanded state as arguments.\n   *\n   * If the blade is uncontrolled, this new state will be effective.\n   * If the blade is controlled, it is up to the parent component to manage this state.\n   *\n   * @param {SyntheticEvent} event The event source of the callback.\n   * @param {boolean} value The new value.\n   */\n  onChange?: (event: React.SyntheticEvent, value: boolean) => void;\n\n  /**\n   * Specifies whether the blade is disabled. If true, the blade cannot be interacted with.\n   */\n  disabled?: boolean;\n\n  /**\n   * If true, the blade will take up the maximum width of the container when expanded.\n   */\n  fullWidth?: boolean;\n\n  /**\n   * Props to be passed to the button that toggles the blade's expanded state.\n   * This can be used to further customize the appearance or behavior of the blade's button,\n   * e.g. to set the aria-label attribute.\n   */\n  buttonProps?: HTMLAttributes<HTMLDivElement>;\n  /**\n   * Props to be passed to the container div that holds the blade's children.\n   * This can be used to further customize the appearance or behavior of the blade's content area.\n   */\n  containerProps?: HTMLAttributes<HTMLDivElement>;\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes?: HvBladeClasses;\n}\n\n/**\n * A blade is a design element that expands horizontally to reveal information, similar to an accordion.\n *\n * It is usually stacked horizontally with other blades and works best when used within a flex container.\n * The `HvBlades` component is recommended for this purpose, as it also provides better management of the\n * blades' expanded state.\n */\nexport const HvBlade = (props: HvBladeProps) => {\n  const {\n    id: idProp,\n    className,\n    classes: classesProp,\n    expanded,\n    defaultExpanded = false,\n    label,\n    labelVariant = \"label\",\n    headingLevel,\n    onChange,\n    disabled = false,\n    children,\n    fullWidth,\n    buttonProps,\n    containerProps,\n    ...others\n  } = useDefaultProps(\"HvBlade\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const [isExpanded, setIsExpanded] = useControlled(\n    expanded,\n    Boolean(defaultExpanded),\n  );\n\n  const handleAction = useCallback(\n    (event: SyntheticEvent) => {\n      if (!disabled) {\n        onChange?.(event, !isExpanded);\n\n        // This will only run if uncontrolled\n        setIsExpanded(!isExpanded);\n\n        return true;\n      }\n      return false;\n    },\n    [disabled, onChange, isExpanded, setIsExpanded],\n  );\n\n  const handleClick = useCallback(\n    (event: SyntheticEvent) => {\n      handleAction(event);\n      event.preventDefault();\n      event.stopPropagation();\n    },\n    [handleAction],\n  );\n\n  const handleKeyDown = useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      let isEventHandled = false;\n      const { key } = event;\n\n      if (\n        event.altKey ||\n        event.ctrlKey ||\n        event.metaKey ||\n        event.currentTarget !== event.target\n      ) {\n        return;\n      }\n      switch (key) {\n        case \"Enter\":\n        case \" \":\n          isEventHandled = handleAction(event);\n          break;\n        default:\n          return;\n      }\n\n      if (isEventHandled) {\n        event.preventDefault();\n        event.stopPropagation();\n      }\n    },\n    [handleAction],\n  );\n\n  const id = useUniqueId(idProp);\n  const bladeHeaderId = setId(id, \"button\");\n  const bladeContainerId = setId(id, \"container\");\n  const bladeHeader = useMemo(() => {\n    const buttonLabel = typeof label === \"function\" ? label(isExpanded) : label;\n\n    const bladeButton = (\n      <HvTypography\n        id={bladeHeaderId}\n        component=\"div\"\n        role=\"button\"\n        className={cx(classes.button, {\n          [classes.disabled]: disabled,\n          [classes.textOnlyLabel]: typeof buttonLabel === \"string\",\n        })}\n        style={{ flexShrink: headingLevel === undefined ? 0 : undefined }}\n        disabled={disabled}\n        tabIndex={0}\n        onKeyDown={handleKeyDown}\n        onClick={handleClick}\n        variant={labelVariant}\n        aria-expanded={isExpanded}\n        aria-controls={bladeContainerId}\n        {...buttonProps}\n      >\n        {buttonLabel}\n      </HvTypography>\n    );\n    return headingLevel === undefined ? (\n      bladeButton\n    ) : (\n      <HvTypography\n        component={`h${headingLevel}`}\n        variant={labelVariant}\n        className={classes.heading}\n        style={{ flexShrink: 0 }}\n      >\n        {bladeButton}\n      </HvTypography>\n    );\n  }, [\n    bladeContainerId,\n    bladeHeaderId,\n    buttonProps,\n    classes.button,\n    classes.disabled,\n    classes.heading,\n    classes.textOnlyLabel,\n    cx,\n    disabled,\n    handleClick,\n    handleKeyDown,\n    headingLevel,\n    isExpanded,\n    label,\n    labelVariant,\n  ]);\n\n  const bladeRef = useRef<HTMLDivElement>(null);\n  const [maxWidth, setMaxWidth] = useState<number | undefined>(undefined);\n  useEffect(() => {\n    if (bladeRef.current) {\n      const resizeObserver = new ResizeObserver((entries) => {\n        setMaxWidth(entries[0].target.clientWidth);\n      });\n      resizeObserver.observe(\n        // using the blade's container as reference max-width is more stable\n        bladeRef.current.parentElement ?? bladeRef.current,\n      );\n      return () => {\n        resizeObserver.disconnect();\n      };\n    }\n  }, [isExpanded]);\n\n  const { style: containerStyle, ...otherContainerProps } =\n    containerProps || {};\n\n  return (\n    <div\n      ref={bladeRef}\n      id={idProp}\n      className={cx(classes.root, className, {\n        [classes.fullWidth]: fullWidth,\n        [classes.expanded]: isExpanded,\n      })}\n      {...others}\n    >\n      {bladeHeader}\n      <div\n        id={bladeContainerId}\n        role=\"region\"\n        aria-labelledby={bladeHeaderId}\n        className={classes.container}\n        hidden={!isExpanded}\n        style={{\n          ...containerStyle,\n          maxWidth: isExpanded ? maxWidth : 0,\n        }}\n        {...otherContainerProps}\n      >\n        {children}\n      </div>\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/esm/Blades/Blades.js

@@ -1,4 +1,4 @@
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { useCallback, useMemo, Children, cloneElement } from "react";
 import { useDefaultProps, useControlled } from "@hitachivantara/uikit-react-core";
 import { useClasses } from "./Blades.styles.js";

package/dist/esm/Blades/Blades.js.map

@@ -1 +1 @@
-{"version":3,"file":"Blades.js","sources":["../../../src/Blades/Blades.tsx"],"sourcesContent":["import React, {\n  Children,\n  cloneElement,\n  SyntheticEvent,\n  useCallback,\n  useMemo,\n} from \"react\";\nimport {\n  ExtractNames,\n  HvBaseProps,\n  useControlled,\n  useDefaultProps,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { staticClasses, useClasses } from \"./Blades.styles\";\n\nexport { staticClasses as bladesClasses };\n\nexport type HvBladesClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBladesProps\n  extends HvBaseProps<HTMLDivElement, \"onChange\" | \"children\"> {\n  /**\n   * Array of indices representing the expanded state of each blade.\n   *\n   * When defined, the expanded state of the blades becomes controlled.\n   */\n  expanded?: number[];\n  /**\n   * Initial expanded state of the blades when in an uncontrolled state.\n   *\n   * It's an array of indices representing the blades that should be initially expanded.\n   */\n  defaultExpanded?: number[];\n\n  /**\n   * If true, ensures that only one blade can be expanded at a time.\n   */\n  atMostOneExpanded?: boolean;\n  /**\n   * If true, ensures that at least one blade is always expanded.\n   */\n  atLeastOneExpanded?: boolean;\n\n  /**\n   * If true, the blades will take up the full width of the container by default.\n   */\n  fullWidthBlades?: boolean;\n\n  /**\n   * Callback function triggered when the expanded state of any blade changes.\n   * It receives the event and the new array of expanded indices as arguments.\n   *\n   * If uncontrolled, this new state will be effective.\n   * If controlled, it is up to the parent component to manage this state.\n   *\n   * @param {SyntheticEvent} event The event source of the callback.\n   * @param {number[]} value Array of indices of the blades that are expanded.\n   */\n  onChange?: (event: SyntheticEvent, value: number[]) => void;\n\n  /**\n   * The blades to be rendered within the group.\n   * Must be instances of `HvBlade`, otherwise the behavior is undefined and will most likely break.\n   */\n  children: React.ReactNode;\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes?: HvBladesClasses;\n}\n\nfunction getExpandedBlades(\n  defaultExpanded: number[] | undefined,\n  children: React.ReactNode,\n  atMostOneExpanded: boolean,\n  atLeastOneExpanded: boolean,\n) {\n  const childrenArray = Children.toArray(children);\n  const expandedBlades =\n    defaultExpanded ??\n    childrenArray\n      .map((child: any, i: number) => {\n        const childIsControlled = child?.props?.expanded !== undefined;\n        const childIsExpanded = childIsControlled\n          ? child?.props?.expanded\n          : child?.props?.defaultExpanded;\n\n        return childIsExpanded ? i : undefined;\n      })\n      .filter((v) => v !== undefined);\n\n  const numberOfExpandedBlades = expandedBlades.length;\n  if (\n    atLeastOneExpanded &&\n    numberOfExpandedBlades === 0 &&\n    childrenArray.length > 0\n  ) {\n    return [0];\n  }\n  if (atMostOneExpanded && numberOfExpandedBlades > 1) {\n    return [expandedBlades[0]];\n  }\n\n  return expandedBlades;\n}\n\n/**\n * `HvBlades` is a component that groups multiple `HvBlade` components.\n *\n * It allows for better control over the expanded state of blades, suitable for both\n * controlled and uncontrolled scenarios.\n */\nexport const HvBlades = (props: HvBladesProps) => {\n  const {\n    id,\n    className,\n    classes: classesProp,\n    children,\n    expanded: expandedProp,\n    defaultExpanded,\n    atMostOneExpanded = false,\n    atLeastOneExpanded = false,\n    fullWidthBlades = false,\n    onChange,\n    ...others\n  } = useDefaultProps(\"HvBlades\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const [expanded, setExpanded] = useControlled(expandedProp, () =>\n    getExpandedBlades(\n      defaultExpanded,\n      children,\n      atMostOneExpanded,\n      atLeastOneExpanded,\n    ),\n  );\n\n  const onChildChangeInterceptor = useCallback(\n    (\n      index: number,\n      childOnChange: (event: SyntheticEvent, isExpanded: boolean) => void,\n      event: SyntheticEvent,\n      isExpanded: boolean,\n    ) => {\n      const newValue: number[] = [];\n      if (atMostOneExpanded) {\n        if (isExpanded) {\n          newValue.push(index);\n        }\n      } else {\n        newValue.push(...(expanded as number[]));\n        if (isExpanded) {\n          newValue.push(index);\n        } else {\n          newValue.splice(newValue.indexOf(index), 1);\n        }\n      }\n\n      if (atLeastOneExpanded && newValue.length === 0) {\n        newValue.push(index);\n      }\n\n      childOnChange?.(event, isExpanded);\n\n      onChange?.(event, newValue);\n\n      // This will only run if uncontrolled\n      setExpanded(newValue);\n    },\n    [onChange, expanded, setExpanded, atMostOneExpanded, atLeastOneExpanded],\n  );\n\n  const modifiedChildren = useMemo(() => {\n    return Children.map(children, (child: any, i: number) => {\n      const childIsExpanded = expanded.includes(i);\n\n      return cloneElement(child, {\n        expanded: childIsExpanded,\n        fullWidth: child?.props?.fullWidth ?? fullWidthBlades,\n        buttonProps: {\n          ...child?.props?.buttonProps,\n          \"aria-disabled\":\n            // If the accordion panel associated with an accordion header is visible,\n            // and if the accordion does not permit the panel to be collapsed, the header\n            // button element has aria-disabled set to true.\n            child?.props?.disabled ||\n            (childIsExpanded && atMostOneExpanded && expanded.length === 1)\n              ? true\n              : undefined,\n        },\n        onChange: (\n          event: React.ChangeEvent<HTMLInputElement>,\n          isExpanded: boolean,\n        ) =>\n          onChildChangeInterceptor(\n            i,\n            child?.props?.onChange,\n            event,\n            isExpanded,\n          ),\n      });\n    });\n  }, [\n    children,\n    expanded,\n    fullWidthBlades,\n    atMostOneExpanded,\n    onChildChangeInterceptor,\n  ]);\n\n  return (\n    <div id={id} className={cx(classes.root, className)} {...others}>\n      {modifiedChildren}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;AAwEA,SAAS,kBACP,iBACA,UACA,mBACA,oBACA;AACM,QAAA,gBAAgB,SAAS,QAAQ,QAAQ;AAC/C,QAAM,iBACJ,mBACA,cACG,IAAI,CAAC,OAAY,MAAc;AACxB,UAAA,oBAAoB,OAAO,OAAO,aAAa;AACrD,UAAM,kBAAkB,oBACpB,OAAO,OAAO,WACd,OAAO,OAAO;AAElB,WAAO,kBAAkB,IAAI;AAAA,EAAA,CAC9B,EACA,OAAO,CAAC,MAAM,MAAM,MAAS;AAElC,QAAM,yBAAyB,eAAe;AAC9C,MACE,sBACA,2BAA2B,KAC3B,cAAc,SAAS,GACvB;AACA,WAAO,CAAC,CAAC;AAAA,EACX;AACI,MAAA,qBAAqB,yBAAyB,GAAG;AAC5C,WAAA,CAAC,eAAe,CAAC,CAAC;AAAA,EAC3B;AAEO,SAAA;AACT;AAQa,MAAA,WAAW,CAAC,UAAyB;AAC1C,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA,oBAAoB;AAAA,IACpB,qBAAqB;AAAA,IACrB,kBAAkB;AAAA,IAClB;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,YAAY,KAAK;AAErC,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,QAAA,CAAC,UAAU,WAAW,IAAI;AAAA,IAAc;AAAA,IAAc,MAC1D;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EAAA;AAGF,QAAM,2BAA2B;AAAA,IAC/B,CACE,OACA,eACA,OACA,eACG;AACH,YAAM,WAAqB,CAAA;AAC3B,UAAI,mBAAmB;AACrB,YAAI,YAAY;AACd,mBAAS,KAAK,KAAK;AAAA,QACrB;AAAA,MAAA,OACK;AACI,iBAAA,KAAK,GAAI,QAAqB;AACvC,YAAI,YAAY;AACd,mBAAS,KAAK,KAAK;AAAA,QAAA,OACd;AACL,mBAAS,OAAO,SAAS,QAAQ,KAAK,GAAG,CAAC;AAAA,QAC5C;AAAA,MACF;AAEI,UAAA,sBAAsB,SAAS,WAAW,GAAG;AAC/C,iBAAS,KAAK,KAAK;AAAA,MACrB;AAEA,sBAAgB,OAAO,UAAU;AAEjC,iBAAW,OAAO,QAAQ;AAG1B,kBAAY,QAAQ;AAAA,IACtB;AAAA,IACA,CAAC,UAAU,UAAU,aAAa,mBAAmB,kBAAkB;AAAA,EAAA;AAGnE,QAAA,mBAAmB,QAAQ,MAAM;AACrC,WAAO,SAAS,IAAI,UAAU,CAAC,OAAY,MAAc;AACjD,YAAA,kBAAkB,SAAS,SAAS,CAAC;AAE3C,aAAO,aAAa,OAAO;AAAA,QACzB,UAAU;AAAA,QACV,WAAW,OAAO,OAAO,aAAa;AAAA,QACtC,aAAa;AAAA,UACX,GAAG,OAAO,OAAO;AAAA,UACjB;AAAA;AAAA;AAAA;AAAA,YAIE,OAAO,OAAO,YACb,mBAAmB,qBAAqB,SAAS,WAAW,IACzD,OACA;AAAA;AAAA,QACR;AAAA,QACA,UAAU,CACR,OACA,eAEA;AAAA,UACE;AAAA,UACA,OAAO,OAAO;AAAA,UACd;AAAA,UACA;AAAA,QACF;AAAA,MAAA,CACH;AAAA,IAAA,CACF;AAAA,EAAA,GACA;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACD;AAGC,SAAA,oBAAC,OAAI,EAAA,IAAQ,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAI,GAAG,QACtD,UACH,iBAAA,CAAA;AAEJ;"}
+{"version":3,"file":"Blades.js","sources":["../../../src/Blades/Blades.tsx"],"sourcesContent":["import {\n  Children,\n  cloneElement,\n  SyntheticEvent,\n  useCallback,\n  useMemo,\n} from \"react\";\nimport {\n  ExtractNames,\n  HvBaseProps,\n  useControlled,\n  useDefaultProps,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { staticClasses, useClasses } from \"./Blades.styles\";\n\nexport { staticClasses as bladesClasses };\n\nexport type HvBladesClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBladesProps\n  extends HvBaseProps<HTMLDivElement, \"onChange\" | \"children\"> {\n  /**\n   * Array of indices representing the expanded state of each blade.\n   *\n   * When defined, the expanded state of the blades becomes controlled.\n   */\n  expanded?: number[];\n  /**\n   * Initial expanded state of the blades when in an uncontrolled state.\n   *\n   * It's an array of indices representing the blades that should be initially expanded.\n   */\n  defaultExpanded?: number[];\n\n  /**\n   * If true, ensures that only one blade can be expanded at a time.\n   */\n  atMostOneExpanded?: boolean;\n  /**\n   * If true, ensures that at least one blade is always expanded.\n   */\n  atLeastOneExpanded?: boolean;\n\n  /**\n   * If true, the blades will take up the full width of the container by default.\n   */\n  fullWidthBlades?: boolean;\n\n  /**\n   * Callback function triggered when the expanded state of any blade changes.\n   * It receives the event and the new array of expanded indices as arguments.\n   *\n   * If uncontrolled, this new state will be effective.\n   * If controlled, it is up to the parent component to manage this state.\n   *\n   * @param {SyntheticEvent} event The event source of the callback.\n   * @param {number[]} value Array of indices of the blades that are expanded.\n   */\n  onChange?: (event: SyntheticEvent, value: number[]) => void;\n\n  /**\n   * The blades to be rendered within the group.\n   * Must be instances of `HvBlade`, otherwise the behavior is undefined and will most likely break.\n   */\n  children: React.ReactNode;\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes?: HvBladesClasses;\n}\n\nfunction getExpandedBlades(\n  defaultExpanded: number[] | undefined,\n  children: React.ReactNode,\n  atMostOneExpanded: boolean,\n  atLeastOneExpanded: boolean,\n) {\n  const childrenArray = Children.toArray(children);\n  const expandedBlades =\n    defaultExpanded ??\n    childrenArray\n      .map((child: any, i: number) => {\n        const childIsControlled = child?.props?.expanded !== undefined;\n        const childIsExpanded = childIsControlled\n          ? child?.props?.expanded\n          : child?.props?.defaultExpanded;\n\n        return childIsExpanded ? i : undefined;\n      })\n      .filter((v) => v !== undefined);\n\n  const numberOfExpandedBlades = expandedBlades.length;\n  if (\n    atLeastOneExpanded &&\n    numberOfExpandedBlades === 0 &&\n    childrenArray.length > 0\n  ) {\n    return [0];\n  }\n  if (atMostOneExpanded && numberOfExpandedBlades > 1) {\n    return [expandedBlades[0]];\n  }\n\n  return expandedBlades;\n}\n\n/**\n * `HvBlades` is a component that groups multiple `HvBlade` components.\n *\n * It allows for better control over the expanded state of blades, suitable for both\n * controlled and uncontrolled scenarios.\n */\nexport const HvBlades = (props: HvBladesProps) => {\n  const {\n    id,\n    className,\n    classes: classesProp,\n    children,\n    expanded: expandedProp,\n    defaultExpanded,\n    atMostOneExpanded = false,\n    atLeastOneExpanded = false,\n    fullWidthBlades = false,\n    onChange,\n    ...others\n  } = useDefaultProps(\"HvBlades\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const [expanded, setExpanded] = useControlled(expandedProp, () =>\n    getExpandedBlades(\n      defaultExpanded,\n      children,\n      atMostOneExpanded,\n      atLeastOneExpanded,\n    ),\n  );\n\n  const onChildChangeInterceptor = useCallback(\n    (\n      index: number,\n      childOnChange: (event: SyntheticEvent, isExpanded: boolean) => void,\n      event: SyntheticEvent,\n      isExpanded: boolean,\n    ) => {\n      const newValue: number[] = [];\n      if (atMostOneExpanded) {\n        if (isExpanded) {\n          newValue.push(index);\n        }\n      } else {\n        newValue.push(...(expanded as number[]));\n        if (isExpanded) {\n          newValue.push(index);\n        } else {\n          newValue.splice(newValue.indexOf(index), 1);\n        }\n      }\n\n      if (atLeastOneExpanded && newValue.length === 0) {\n        newValue.push(index);\n      }\n\n      childOnChange?.(event, isExpanded);\n\n      onChange?.(event, newValue);\n\n      // This will only run if uncontrolled\n      setExpanded(newValue);\n    },\n    [onChange, expanded, setExpanded, atMostOneExpanded, atLeastOneExpanded],\n  );\n\n  const modifiedChildren = useMemo(() => {\n    return Children.map(children, (child: any, i: number) => {\n      const childIsExpanded = expanded.includes(i);\n\n      return cloneElement(child, {\n        expanded: childIsExpanded,\n        fullWidth: child?.props?.fullWidth ?? fullWidthBlades,\n        buttonProps: {\n          ...child?.props?.buttonProps,\n          \"aria-disabled\":\n            // If the accordion panel associated with an accordion header is visible,\n            // and if the accordion does not permit the panel to be collapsed, the header\n            // button element has aria-disabled set to true.\n            child?.props?.disabled ||\n            (childIsExpanded && atMostOneExpanded && expanded.length === 1)\n              ? true\n              : undefined,\n        },\n        onChange: (\n          event: React.ChangeEvent<HTMLInputElement>,\n          isExpanded: boolean,\n        ) =>\n          onChildChangeInterceptor(\n            i,\n            child?.props?.onChange,\n            event,\n            isExpanded,\n          ),\n      });\n    });\n  }, [\n    children,\n    expanded,\n    fullWidthBlades,\n    atMostOneExpanded,\n    onChildChangeInterceptor,\n  ]);\n\n  return (\n    <div id={id} className={cx(classes.root, className)} {...others}>\n      {modifiedChildren}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;AAwEA,SAAS,kBACP,iBACA,UACA,mBACA,oBACA;AACM,QAAA,gBAAgB,SAAS,QAAQ,QAAQ;AAC/C,QAAM,iBACJ,mBACA,cACG,IAAI,CAAC,OAAY,MAAc;AACxB,UAAA,oBAAoB,OAAO,OAAO,aAAa;AACrD,UAAM,kBAAkB,oBACpB,OAAO,OAAO,WACd,OAAO,OAAO;AAElB,WAAO,kBAAkB,IAAI;AAAA,EAAA,CAC9B,EACA,OAAO,CAAC,MAAM,MAAM,MAAS;AAElC,QAAM,yBAAyB,eAAe;AAC9C,MACE,sBACA,2BAA2B,KAC3B,cAAc,SAAS,GACvB;AACA,WAAO,CAAC,CAAC;AAAA,EACX;AACI,MAAA,qBAAqB,yBAAyB,GAAG;AAC5C,WAAA,CAAC,eAAe,CAAC,CAAC;AAAA,EAC3B;AAEO,SAAA;AACT;AAQa,MAAA,WAAW,CAAC,UAAyB;AAC1C,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA,oBAAoB;AAAA,IACpB,qBAAqB;AAAA,IACrB,kBAAkB;AAAA,IAClB;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,YAAY,KAAK;AAErC,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,QAAA,CAAC,UAAU,WAAW,IAAI;AAAA,IAAc;AAAA,IAAc,MAC1D;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EAAA;AAGF,QAAM,2BAA2B;AAAA,IAC/B,CACE,OACA,eACA,OACA,eACG;AACH,YAAM,WAAqB,CAAA;AAC3B,UAAI,mBAAmB;AACrB,YAAI,YAAY;AACd,mBAAS,KAAK,KAAK;AAAA,QACrB;AAAA,MAAA,OACK;AACI,iBAAA,KAAK,GAAI,QAAqB;AACvC,YAAI,YAAY;AACd,mBAAS,KAAK,KAAK;AAAA,QAAA,OACd;AACL,mBAAS,OAAO,SAAS,QAAQ,KAAK,GAAG,CAAC;AAAA,QAC5C;AAAA,MACF;AAEI,UAAA,sBAAsB,SAAS,WAAW,GAAG;AAC/C,iBAAS,KAAK,KAAK;AAAA,MACrB;AAEA,sBAAgB,OAAO,UAAU;AAEjC,iBAAW,OAAO,QAAQ;AAG1B,kBAAY,QAAQ;AAAA,IACtB;AAAA,IACA,CAAC,UAAU,UAAU,aAAa,mBAAmB,kBAAkB;AAAA,EAAA;AAGnE,QAAA,mBAAmB,QAAQ,MAAM;AACrC,WAAO,SAAS,IAAI,UAAU,CAAC,OAAY,MAAc;AACjD,YAAA,kBAAkB,SAAS,SAAS,CAAC;AAE3C,aAAO,aAAa,OAAO;AAAA,QACzB,UAAU;AAAA,QACV,WAAW,OAAO,OAAO,aAAa;AAAA,QACtC,aAAa;AAAA,UACX,GAAG,OAAO,OAAO;AAAA,UACjB;AAAA;AAAA;AAAA;AAAA,YAIE,OAAO,OAAO,YACb,mBAAmB,qBAAqB,SAAS,WAAW,IACzD,OACA;AAAA;AAAA,QACR;AAAA,QACA,UAAU,CACR,OACA,eAEA;AAAA,UACE;AAAA,UACA,OAAO,OAAO;AAAA,UACd;AAAA,UACA;AAAA,QACF;AAAA,MAAA,CACH;AAAA,IAAA,CACF;AAAA,EAAA,GACA;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACD;AAGC,SAAA,oBAAC,OAAI,EAAA,IAAQ,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAI,GAAG,QACtD,UACH,iBAAA,CAAA;AAEJ;"}

package/dist/esm/Dashboard/Dashboard.js

@@ -1,4 +1,4 @@
-import { jsxs, Fragment, jsx } from "@emotion/react/jsx-runtime";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { WidthProvider, Responsive } from "react-grid-layout";
 import { Global } from "@emotion/react";

package/dist/esm/Flow/Background/Background.js

@@ -1,11 +1,18 @@
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { Background } from "reactflow";
 import { getColor, theme } from "@hitachivantara/uikit-styles";
 const HvFlowBackground = ({
   color = "secondary",
   ...others
 }) => {
-  return /* @__PURE__ */ jsx(Background, { color: getColor(color, theme.colors.secondary), ...others });
+  return /* @__PURE__ */ jsx(
+    Background,
+    {
+      color: getColor(color, theme.colors.secondary_80),
+      gap: 16,
+      ...others
+    }
+  );
 };
 export {
   HvFlowBackground

package/dist/esm/Flow/Background/Background.js.map

@@ -1 +1 @@
-{"version":3,"file":"Background.js","sources":["../../../../src/Flow/Background/Background.tsx"],"sourcesContent":["import { Background, BackgroundProps } from \"reactflow\";\nimport { getColor, HvColorAny, theme } from \"@hitachivantara/uikit-styles\";\n\nexport interface HvFlowBackgroundProps extends Omit<BackgroundProps, \"color\"> {\n  /** Color for the background dots. Defaults to `secondary`. */\n  color?: HvColorAny;\n}\n\nexport const HvFlowBackground = ({\n  color = \"secondary\",\n  ...others\n}: HvFlowBackgroundProps) => {\n  return (\n    <Background color={getColor(color, theme.colors.secondary)} {...others} />\n  );\n};\n"],"names":[],"mappings":";;;AAQO,MAAM,mBAAmB,CAAC;AAAA,EAC/B,QAAQ;AAAA,EACR,GAAG;AACL,MAA6B;AAEzB,SAAA,oBAAC,YAAW,EAAA,OAAO,SAAS,OAAO,MAAM,OAAO,SAAS,GAAI,GAAG,OAAQ,CAAA;AAE5E;"}
+{"version":3,"file":"Background.js","sources":["../../../../src/Flow/Background/Background.tsx"],"sourcesContent":["import { Background, BackgroundProps } from \"reactflow\";\nimport { getColor, HvColorAny, theme } from \"@hitachivantara/uikit-styles\";\n\nexport interface HvFlowBackgroundProps extends Omit<BackgroundProps, \"color\"> {\n  /** Color for the background dots. Defaults to `secondary`. */\n  color?: HvColorAny;\n}\n\nexport const HvFlowBackground = ({\n  color = \"secondary\",\n  ...others\n}: HvFlowBackgroundProps) => {\n  return (\n    <Background\n      color={getColor(color, theme.colors.secondary_80)}\n      gap={16}\n      {...others}\n    />\n  );\n};\n"],"names":[],"mappings":";;;AAQO,MAAM,mBAAmB,CAAC;AAAA,EAC/B,QAAQ;AAAA,EACR,GAAG;AACL,MAA6B;AAEzB,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAO,SAAS,OAAO,MAAM,OAAO,YAAY;AAAA,MAChD,KAAK;AAAA,MACJ,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;"}

package/dist/esm/Flow/Controls/Controls.js

@@ -1,4 +1,4 @@
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useStore, useStoreApi, Panel } from "reactflow";
 import { shallow } from "zustand/shallow";
 import { useLabels, HvMultiButton, HvButton } from "@hitachivantara/uikit-react-core";

package/dist/esm/Flow/DroppableFlow.js

@@ -1,4 +1,4 @@
-import { jsxs, Fragment, jsx } from "@emotion/react/jsx-runtime";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { useState, useRef, useCallback } from "react";
 import { useDroppable, useDndMonitor } from "@dnd-kit/core";
 import { Global } from "@emotion/react";

package/dist/esm/Flow/Empty/Empty.js

@@ -1,4 +1,4 @@
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { useNodes } from "reactflow";
 import { HvEmptyState } from "@hitachivantara/uikit-react-core";
 import { useClasses } from "./Empty.styles.js";

package/dist/esm/Flow/Flow.js

@@ -1,4 +1,4 @@
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useSensors, useSensor, PointerSensor, KeyboardSensor, DndContext } from "@dnd-kit/core";
 import { restrictToWindowEdges } from "@dnd-kit/modifiers";
 import { ReactFlowProvider } from "reactflow";

package/dist/esm/Flow/Flow.styles.js

@@ -1,6 +1,6 @@
 import { createClasses, theme } from "@hitachivantara/uikit-react-core";
 import { staticClasses as staticClasses$1 } from "./Node/BaseNode.styles.js";
-import "@emotion/react/jsx-runtime";
+import "react/jsx-runtime";
 import "reactflow";
 const { staticClasses, useClasses } = createClasses("HvFlow", {
   root: {

package/dist/esm/Flow/FlowContext/FlowContext.js

@@ -1,4 +1,4 @@
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { createContext, useState, useMemo } from "react";
 import { HvFlowNodeMetaProvider } from "./NodeMetaContext.js";
 const HvFlowContext = createContext({});

package/dist/esm/Flow/FlowContext/NodeMetaContext.js

@@ -1,4 +1,4 @@
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { createContext, useContext, useRef, useCallback, useMemo } from "react";
 const HvFlowNodeMetaContext = createContext(void 0);
 const HvFlowNodeMetaProvider = ({

package/dist/esm/Flow/Minimap/Minimap.js

@@ -1,4 +1,4 @@
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { MiniMap } from "reactflow";
 import { getColor } from "@hitachivantara/uikit-styles";
 import { useClasses } from "./Minimap.styles.js";

package/dist/esm/Flow/Node/BaseNode.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx, Fragment } from "@emotion/react/jsx-runtime";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { NodeToolbar, Handle, Position } from "reactflow";
 import { useLabels, HvIconButton, HvTypography } from "@hitachivantara/uikit-react-core";
 import { useClasses } from "./BaseNode.styles.js";
@@ -51,7 +51,7 @@ const HvFlowBaseNode = ({
     nodeActions: nodeActionsProp
   });
   const labels = useLabels(DEFAULT_LABELS, labelsProp);
-  const { classes, cx, css } = useClasses(classesProp);
+  const { classes, cx } = useClasses(classesProp);
   const renderOutput = (output) => {
     const edgeConnected = isConnected(id, "source", output.id, outputEdges);
     return /* @__PURE__ */ jsxs("div", { className: classes.outputContainer, children: [
@@ -95,10 +95,13 @@ const HvFlowBaseNode = ({
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      style: {
+        // @ts-ignore
+        "--node-color": color
+      },
       className: cx(
         "nowheel",
         // Disables the default canvas pan behaviour when scrolling inside the node
-        css({ border: `1px solid ${color}` }),
         classes.root,
         className
       ),
@@ -114,36 +117,31 @@ const HvFlowBaseNode = ({
           },
           action.id
         )) }),
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: cx(css({ backgroundColor: color }), classes.headerContainer),
-            children: [
-              /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  className: cx(
-                    classes.titleContainer,
-                    css({ "& svg *.color0": { fill: iconColor } })
-                  ),
-                  children: [
-                    icon,
-                    /* @__PURE__ */ jsx(
-                      HvTypography,
-                      {
-                        component: "p",
-                        variant: "title4",
-                        className: classes.title,
-                        children: title
-                      }
-                    )
-                  ]
-                }
-              ),
-              headerItems && /* @__PURE__ */ jsx("div", { style: { display: "flex" }, children: headerItems })
-            ]
-          }
-        ),
+        /* @__PURE__ */ jsxs("div", { className: classes.headerContainer, children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                // @ts-ignore
+                "--icon-color": iconColor
+              },
+              className: classes.titleContainer,
+              children: [
+                icon,
+                /* @__PURE__ */ jsx(
+                  HvTypography,
+                  {
+                    component: "p",
+                    variant: "title4",
+                    className: classes.title,
+                    children: title
+                  }
+                )
+              ]
+            }
+          ),
+          headerItems && /* @__PURE__ */ jsx("div", { style: { display: "flex" }, children: headerItems })
+        ] }),
         children && /* @__PURE__ */ jsx("div", { className: classes.contentContainer, children }),
         inputs && inputs.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx("div", { className: classes.inputsTitleContainer, children: /* @__PURE__ */ jsx(HvTypography, { children: labels?.inputsTitle }) }),

package/dist/esm/Flow/Node/BaseNode.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseNode.js","sources":["../../../../src/Flow/Node/BaseNode.tsx"],"sourcesContent":["import { Handle, NodeProps, NodeToolbar, Position } from \"reactflow\";\nimport {\n  ExtractNames,\n  HvBaseProps,\n  HvIconButton,\n  HvTypography,\n  useLabels,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { HvUseNodeParams, useHvNode } from \"../hooks\";\nimport {\n  HvFlowNodeInput,\n  HvFlowNodeInputGroup,\n  HvFlowNodeOutput,\n  HvFlowNodeOutputGroup,\n} from \"../types\";\nimport { staticClasses, useClasses } from \"./BaseNode.styles\";\nimport {\n  isConnected,\n  isInputGroup,\n  isOutputGroup,\n  renderedIcon,\n} from \"./utils\";\n\nexport { staticClasses as flowBaseNodeClasses };\n\nexport type HvFlowBaseNodeClasses = ExtractNames<typeof useClasses>;\n\nexport const DEFAULT_LABELS = {\n  outputsTitle: \"Outputs\",\n  inputsTitle: \"Inputs\",\n  deleteActionLabel: \"Delete\",\n  duplicateActionLabel: \"Duplicate\",\n};\n\nexport interface HvFlowBaseNodeProps<T = any>\n  extends Omit<HvBaseProps, \"id\" | \"color\">,\n    Omit<HvUseNodeParams, \"id\">,\n    NodeProps<T> {\n  /** Header items */\n  headerItems?: React.ReactNode;\n  /** The content of the node footer */\n  footer?: React.ReactNode;\n  /** Labels used on the node. */\n  labels?: Partial<typeof DEFAULT_LABELS>;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFlowBaseNodeClasses;\n}\n\nexport const HvFlowBaseNode = ({\n  id,\n  title: titleProp,\n  headerItems,\n  icon: iconProp,\n  color: colorProp,\n  inputs: inputsProp,\n  outputs: outputsProp,\n  nodeActions: nodeActionsProp,\n  footer,\n  classes: classesProp,\n  labels: labelsProp,\n  className,\n  children,\n}: HvFlowBaseNodeProps<unknown>) => {\n  const {\n    toggleShowActions,\n    getNodeToolbarProps,\n    handleDefaultAction,\n    nodeActions,\n    title,\n    icon,\n    color,\n    iconColor,\n    inputEdges,\n    inputs,\n    outputEdges,\n    outputs,\n    node,\n  } = useHvNode({\n    id,\n    title: titleProp,\n    inputs: inputsProp,\n    outputs: outputsProp,\n    icon: iconProp,\n    color: colorProp,\n    labels: labelsProp,\n    nodeActions: nodeActionsProp,\n  });\n\n  const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n  const { classes, cx, css } = useClasses(classesProp);\n\n  const renderOutput = (output: HvFlowNodeOutput) => {\n    const edgeConnected = isConnected(id, \"source\", output.id!, outputEdges);\n\n    return (\n      <div className={classes.outputContainer} key={output.id}>\n        <Handle\n          type=\"source\"\n          isConnectableEnd={false}\n          id={output.id}\n          position={Position.Right}\n          className={cx(classes.handle, {\n            [classes.handleConnected]: edgeConnected,\n          })}\n        />\n        {output.isMandatory && !edgeConnected && (\n          <div className={classes.mandatory} />\n        )}\n        <HvTypography component=\"div\">{output.label}</HvTypography>\n      </div>\n    );\n  };\n\n  const renderInput = (input: HvFlowNodeInput) => {\n    const edgeConnected = isConnected(id, \"target\", input.id!, inputEdges);\n\n    return (\n      <div className={classes.inputContainer} key={input.id}>\n        <Handle\n          type=\"target\"\n          isConnectableStart={false}\n          id={input.id}\n          position={Position.Left}\n          className={cx(classes.handle, {\n            [classes.handleConnected]: edgeConnected,\n          })}\n        />\n        <HvTypography component=\"div\">{input.label}</HvTypography>\n        {input.isMandatory && !edgeConnected && (\n          <div className={classes.mandatory} />\n        )}\n      </div>\n    );\n  };\n\n  if (!node) return null;\n\n  return (\n    <div\n      className={cx(\n        \"nowheel\", // Disables the default canvas pan behaviour when scrolling inside the node\n        css({ border: `1px solid ${color}` }),\n        classes.root,\n        className,\n      )}\n      onMouseEnter={toggleShowActions}\n      onMouseLeave={toggleShowActions}\n    >\n      <NodeToolbar {...getNodeToolbarProps()}>\n        {nodeActions?.map((action) => (\n          <HvIconButton\n            key={action.id}\n            title={action.label}\n            onClick={() => handleDefaultAction(action)}\n          >\n            {renderedIcon(action.icon)}\n          </HvIconButton>\n        ))}\n      </NodeToolbar>\n      <div\n        className={cx(css({ backgroundColor: color }), classes.headerContainer)}\n      >\n        <div\n          className={cx(\n            classes.titleContainer,\n            css({ \"& svg *.color0\": { fill: iconColor } }),\n          )}\n        >\n          {icon}\n          <HvTypography\n            component=\"p\"\n            variant=\"title4\"\n            className={classes.title}\n          >\n            {title}\n          </HvTypography>\n        </div>\n        {headerItems && <div style={{ display: \"flex\" }}>{headerItems}</div>}\n      </div>\n      {children && <div className={classes.contentContainer}>{children}</div>}\n      {inputs && inputs.length > 0 && (\n        <>\n          <div className={classes.inputsTitleContainer}>\n            <HvTypography>{labels?.inputsTitle}</HvTypography>\n          </div>\n          <div className={classes.inputsContainer}>\n            {inputs?.map((input, idx) => {\n              if (!isInputGroup(input)) return renderInput(input);\n\n              return (\n                <div\n                  className={classes.inputGroupContainer}\n                  key={`group${idx}`}\n                >\n                  <HvTypography component=\"div\" variant=\"label\">\n                    {input.label}\n                  </HvTypography>\n                  {(input as HvFlowNodeInputGroup).inputs.map((inp) =>\n                    renderInput(inp),\n                  )}\n                </div>\n              );\n            })}\n          </div>\n        </>\n      )}\n      {outputs && outputs.length > 0 && (\n        <>\n          <div className={classes.outputsTitleContainer}>\n            <HvTypography>{labels?.outputsTitle}</HvTypography>\n          </div>\n          <div className={classes.outputsContainer}>\n            {outputs?.map((output, idx) => {\n              if (!isOutputGroup(output)) {\n                return renderOutput(output);\n              }\n\n              return (\n                <div\n                  className={classes.outputGroupContainer}\n                  key={`group${idx}`}\n                >\n                  <HvTypography component=\"div\" variant=\"label\">\n                    {output.label}\n                  </HvTypography>\n                  {(output as HvFlowNodeOutputGroup).outputs.map((out) => {\n                    return renderOutput(out);\n                  })}\n                </div>\n              );\n            })}\n          </div>\n        </>\n      )}\n      {footer && <div className={classes.footerContainer}>{footer}</div>}\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"BaseNode.js","sources":["../../../../src/Flow/Node/BaseNode.tsx"],"sourcesContent":["import { Handle, NodeProps, NodeToolbar, Position } from \"reactflow\";\nimport {\n  ExtractNames,\n  HvBaseProps,\n  HvIconButton,\n  HvTypography,\n  useLabels,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { HvUseNodeParams, useHvNode } from \"../hooks\";\nimport {\n  HvFlowNodeInput,\n  HvFlowNodeInputGroup,\n  HvFlowNodeOutput,\n  HvFlowNodeOutputGroup,\n} from \"../types\";\nimport { staticClasses, useClasses } from \"./BaseNode.styles\";\nimport {\n  isConnected,\n  isInputGroup,\n  isOutputGroup,\n  renderedIcon,\n} from \"./utils\";\n\nexport { staticClasses as flowBaseNodeClasses };\n\nexport type HvFlowBaseNodeClasses = ExtractNames<typeof useClasses>;\n\nexport const DEFAULT_LABELS = {\n  outputsTitle: \"Outputs\",\n  inputsTitle: \"Inputs\",\n  deleteActionLabel: \"Delete\",\n  duplicateActionLabel: \"Duplicate\",\n};\n\nexport interface HvFlowBaseNodeProps<T = any>\n  extends Omit<HvBaseProps, \"id\" | \"color\">,\n    Omit<HvUseNodeParams, \"id\">,\n    NodeProps<T> {\n  /** Header items */\n  headerItems?: React.ReactNode;\n  /** The content of the node footer */\n  footer?: React.ReactNode;\n  /** Labels used on the node. */\n  labels?: Partial<typeof DEFAULT_LABELS>;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFlowBaseNodeClasses;\n}\n\nexport const HvFlowBaseNode = ({\n  id,\n  title: titleProp,\n  headerItems,\n  icon: iconProp,\n  color: colorProp,\n  inputs: inputsProp,\n  outputs: outputsProp,\n  nodeActions: nodeActionsProp,\n  footer,\n  classes: classesProp,\n  labels: labelsProp,\n  className,\n  children,\n}: HvFlowBaseNodeProps<unknown>) => {\n  const {\n    toggleShowActions,\n    getNodeToolbarProps,\n    handleDefaultAction,\n    nodeActions,\n    title,\n    icon,\n    color,\n    iconColor,\n    inputEdges,\n    inputs,\n    outputEdges,\n    outputs,\n    node,\n  } = useHvNode({\n    id,\n    title: titleProp,\n    inputs: inputsProp,\n    outputs: outputsProp,\n    icon: iconProp,\n    color: colorProp,\n    labels: labelsProp,\n    nodeActions: nodeActionsProp,\n  });\n\n  const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const renderOutput = (output: HvFlowNodeOutput) => {\n    const edgeConnected = isConnected(id, \"source\", output.id!, outputEdges);\n\n    return (\n      <div className={classes.outputContainer} key={output.id}>\n        <Handle\n          type=\"source\"\n          isConnectableEnd={false}\n          id={output.id}\n          position={Position.Right}\n          className={cx(classes.handle, {\n            [classes.handleConnected]: edgeConnected,\n          })}\n        />\n        {output.isMandatory && !edgeConnected && (\n          <div className={classes.mandatory} />\n        )}\n        <HvTypography component=\"div\">{output.label}</HvTypography>\n      </div>\n    );\n  };\n\n  const renderInput = (input: HvFlowNodeInput) => {\n    const edgeConnected = isConnected(id, \"target\", input.id!, inputEdges);\n\n    return (\n      <div className={classes.inputContainer} key={input.id}>\n        <Handle\n          type=\"target\"\n          isConnectableStart={false}\n          id={input.id}\n          position={Position.Left}\n          className={cx(classes.handle, {\n            [classes.handleConnected]: edgeConnected,\n          })}\n        />\n        <HvTypography component=\"div\">{input.label}</HvTypography>\n        {input.isMandatory && !edgeConnected && (\n          <div className={classes.mandatory} />\n        )}\n      </div>\n    );\n  };\n\n  if (!node) return null;\n\n  return (\n    <div\n      style={{\n        // @ts-ignore\n        \"--node-color\": color,\n      }}\n      className={cx(\n        \"nowheel\", // Disables the default canvas pan behaviour when scrolling inside the node\n        classes.root,\n        className,\n      )}\n      onMouseEnter={toggleShowActions}\n      onMouseLeave={toggleShowActions}\n    >\n      <NodeToolbar {...getNodeToolbarProps()}>\n        {nodeActions?.map((action) => (\n          <HvIconButton\n            key={action.id}\n            title={action.label}\n            onClick={() => handleDefaultAction(action)}\n          >\n            {renderedIcon(action.icon)}\n          </HvIconButton>\n        ))}\n      </NodeToolbar>\n      <div className={classes.headerContainer}>\n        <div\n          style={{\n            // @ts-ignore\n            \"--icon-color\": iconColor,\n          }}\n          className={classes.titleContainer}\n        >\n          {icon}\n          <HvTypography\n            component=\"p\"\n            variant=\"title4\"\n            className={classes.title}\n          >\n            {title}\n          </HvTypography>\n        </div>\n        {headerItems && <div style={{ display: \"flex\" }}>{headerItems}</div>}\n      </div>\n      {children && <div className={classes.contentContainer}>{children}</div>}\n      {inputs && inputs.length > 0 && (\n        <>\n          <div className={classes.inputsTitleContainer}>\n            <HvTypography>{labels?.inputsTitle}</HvTypography>\n          </div>\n          <div className={classes.inputsContainer}>\n            {inputs?.map((input, idx) => {\n              if (!isInputGroup(input)) return renderInput(input);\n\n              return (\n                <div\n                  className={classes.inputGroupContainer}\n                  key={`group${idx}`}\n                >\n                  <HvTypography component=\"div\" variant=\"label\">\n                    {input.label}\n                  </HvTypography>\n                  {(input as HvFlowNodeInputGroup).inputs.map((inp) =>\n                    renderInput(inp),\n                  )}\n                </div>\n              );\n            })}\n          </div>\n        </>\n      )}\n      {outputs && outputs.length > 0 && (\n        <>\n          <div className={classes.outputsTitleContainer}>\n            <HvTypography>{labels?.outputsTitle}</HvTypography>\n          </div>\n          <div className={classes.outputsContainer}>\n            {outputs?.map((output, idx) => {\n              if (!isOutputGroup(output)) {\n                return renderOutput(output);\n              }\n\n              return (\n                <div\n                  className={classes.outputGroupContainer}\n                  key={`group${idx}`}\n                >\n                  <HvTypography component=\"div\" variant=\"label\">\n                    {output.label}\n                  </HvTypography>\n                  {(output as HvFlowNodeOutputGroup).outputs.map((out) => {\n                    return renderOutput(out);\n                  })}\n                </div>\n              );\n            })}\n          </div>\n        </>\n      )}\n      {footer && <div className={classes.footerContainer}>{footer}</div>}\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/esm/Flow/Node/BaseNode.styles.js

@@ -4,7 +4,8 @@ const { staticClasses, useClasses } = createClasses("HvFlowBaseNode", {
     borderRadius: theme.radii.round,
     backgroundColor: theme.colors.atmo1,
     boxShadow: theme.colors.shadow,
-    minWidth: "250px"
+    minWidth: "250px",
+    border: "1px solid var(--node-color)"
   },
   headerContainer: {
     padding: theme.spacing(0.5, 1),
@@ -13,12 +14,14 @@ const { staticClasses, useClasses } = createClasses("HvFlowBaseNode", {
     justifyContent: "space-between",
     alignItems: "center",
     borderTopLeftRadius: "inherit",
-    borderTopRightRadius: "inherit"
+    borderTopRightRadius: "inherit",
+    backgroundColor: "var(--node-color)"
   },
   titleContainer: {
     display: "flex",
     flexDirection: "row",
-    alignItems: "center"
+    alignItems: "center",
+    "& svg *.color0": { fill: "var(--icon-color)" }
   },
   title: {
     color: theme.colors.base_dark

package/dist/esm/Flow/Node/BaseNode.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseNode.styles.js","sources":["../../../../src/Flow/Node/BaseNode.styles.tsx"],"sourcesContent":["import { createClasses, theme } from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvFlowBaseNode\", {\n  root: {\n    borderRadius: theme.radii.round,\n    backgroundColor: theme.colors.atmo1,\n    boxShadow: theme.colors.shadow,\n    minWidth: \"250px\",\n  },\n  headerContainer: {\n    padding: theme.spacing(0.5, 1),\n    display: \"flex\",\n    flexDirection: \"row\",\n    justifyContent: \"space-between\",\n    alignItems: \"center\",\n    borderTopLeftRadius: \"inherit\",\n    borderTopRightRadius: \"inherit\",\n  },\n  titleContainer: {\n    display: \"flex\",\n    flexDirection: \"row\",\n    alignItems: \"center\",\n  },\n  title: {\n    color: theme.colors.base_dark,\n  },\n  inputsTitleContainer: {\n    display: \"flex\",\n    justifyContent: \"center\",\n    padding: theme.space.xs,\n    backgroundColor: theme.colors.atmo2,\n    borderTop: `1px solid ${theme.colors.atmo3}`,\n    borderBottom: `1px solid ${theme.colors.atmo3}`,\n  },\n  outputsTitleContainer: {\n    display: \"flex\",\n    justifyContent: \"center\",\n    padding: theme.space.xs,\n    backgroundColor: theme.colors.atmo2,\n    borderTop: `1px solid ${theme.colors.atmo3}`,\n    borderBottom: `1px solid ${theme.colors.atmo3}`,\n  },\n  contentContainer: {},\n  inputsContainer: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    padding: theme.space.sm,\n    gap: theme.space.xs,\n    alignItems: \"flex-start\",\n  },\n  outputsContainer: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    padding: theme.space.sm,\n    gap: theme.space.xs,\n    alignItems: \"flex-end\",\n  },\n  inputGroupContainer: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: theme.space.xs,\n    alignItems: \"flex-start\",\n  },\n  outputGroupContainer: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: theme.space.xs,\n    alignItems: \"flex-end\",\n  },\n  inputContainer: {\n    display: \"flex\",\n    flexDirection: \"row\",\n    alignItems: \"center\",\n    position: \"relative\",\n  },\n  outputContainer: {\n    display: \"flex\",\n    flexDirection: \"row\",\n    alignItems: \"center\",\n    position: \"relative\",\n  },\n  handle: {\n    zIndex: theme.zIndices.overlay,\n    marginLeft: 2,\n    backgroundColor: theme.colors.atmo1,\n    height: 10,\n    width: 10,\n    border: `1px solid ${theme.colors.secondary_60}`,\n    \"&.react-flow__handle-left\": {\n      left: -23,\n    },\n    \"&.react-flow__handle-right\": {\n      right: -21,\n    },\n    \"&.react-flow__handle-connecting\": {\n      backgroundColor: theme.colors.negative_20,\n    },\n    \"&.react-flow__handle-valid\": {\n      backgroundColor: theme.colors.positive_20,\n    },\n    \"::before\": {\n      fontSize: 14,\n      color: theme.colors.secondary_60,\n      content: '\"+\"',\n      marginTop: -7,\n      position: \"absolute\",\n    },\n  },\n  handleConnected: {\n    backgroundColor: theme.colors.secondary_60,\n    width: 8,\n    height: 8,\n\n    \"::before\": {\n      fontSize: 11,\n      marginTop: -8,\n    },\n  },\n  mandatory: {\n    width: 10,\n    height: 10,\n    margin: theme.spacing(0, theme.space.xs),\n    borderRadius: theme.radii.circle,\n    backgroundColor: theme.colors.negative_20,\n  },\n  footerContainer: {\n    padding: theme.space.sm,\n    borderTop: `1px solid ${theme.colors.atmo3}`,\n  },\n});\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"BaseNode.styles.js","sources":["../../../../src/Flow/Node/BaseNode.styles.tsx"],"sourcesContent":["import { createClasses, theme } from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvFlowBaseNode\", {\n  root: {\n    borderRadius: theme.radii.round,\n    backgroundColor: theme.colors.atmo1,\n    boxShadow: theme.colors.shadow,\n    minWidth: \"250px\",\n    border: \"1px solid var(--node-color)\",\n  },\n  headerContainer: {\n    padding: theme.spacing(0.5, 1),\n    display: \"flex\",\n    flexDirection: \"row\",\n    justifyContent: \"space-between\",\n    alignItems: \"center\",\n    borderTopLeftRadius: \"inherit\",\n    borderTopRightRadius: \"inherit\",\n    backgroundColor: \"var(--node-color)\",\n  },\n  titleContainer: {\n    display: \"flex\",\n    flexDirection: \"row\",\n    alignItems: \"center\",\n    \"& svg *.color0\": { fill: \"var(--icon-color)\" },\n  },\n  title: {\n    color: theme.colors.base_dark,\n  },\n  inputsTitleContainer: {\n    display: \"flex\",\n    justifyContent: \"center\",\n    padding: theme.space.xs,\n    backgroundColor: theme.colors.atmo2,\n    borderTop: `1px solid ${theme.colors.atmo3}`,\n    borderBottom: `1px solid ${theme.colors.atmo3}`,\n  },\n  outputsTitleContainer: {\n    display: \"flex\",\n    justifyContent: \"center\",\n    padding: theme.space.xs,\n    backgroundColor: theme.colors.atmo2,\n    borderTop: `1px solid ${theme.colors.atmo3}`,\n    borderBottom: `1px solid ${theme.colors.atmo3}`,\n  },\n  contentContainer: {},\n  inputsContainer: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    padding: theme.space.sm,\n    gap: theme.space.xs,\n    alignItems: \"flex-start\",\n  },\n  outputsContainer: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    padding: theme.space.sm,\n    gap: theme.space.xs,\n    alignItems: \"flex-end\",\n  },\n  inputGroupContainer: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: theme.space.xs,\n    alignItems: \"flex-start\",\n  },\n  outputGroupContainer: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: theme.space.xs,\n    alignItems: \"flex-end\",\n  },\n  inputContainer: {\n    display: \"flex\",\n    flexDirection: \"row\",\n    alignItems: \"center\",\n    position: \"relative\",\n  },\n  outputContainer: {\n    display: \"flex\",\n    flexDirection: \"row\",\n    alignItems: \"center\",\n    position: \"relative\",\n  },\n  handle: {\n    zIndex: theme.zIndices.overlay,\n    marginLeft: 2,\n    backgroundColor: theme.colors.atmo1,\n    height: 10,\n    width: 10,\n    border: `1px solid ${theme.colors.secondary_60}`,\n    \"&.react-flow__handle-left\": {\n      left: -23,\n    },\n    \"&.react-flow__handle-right\": {\n      right: -21,\n    },\n    \"&.react-flow__handle-connecting\": {\n      backgroundColor: theme.colors.negative_20,\n    },\n    \"&.react-flow__handle-valid\": {\n      backgroundColor: theme.colors.positive_20,\n    },\n    \"::before\": {\n      fontSize: 14,\n      color: theme.colors.secondary_60,\n      content: '\"+\"',\n      marginTop: -7,\n      position: \"absolute\",\n    },\n  },\n  handleConnected: {\n    backgroundColor: theme.colors.secondary_60,\n    width: 8,\n    height: 8,\n\n    \"::before\": {\n      fontSize: 11,\n      marginTop: -8,\n    },\n  },\n  mandatory: {\n    width: 10,\n    height: 10,\n    margin: theme.spacing(0, theme.space.xs),\n    borderRadius: theme.radii.circle,\n    backgroundColor: theme.colors.negative_20,\n  },\n  footerContainer: {\n    padding: theme.space.sm,\n    borderTop: `1px solid ${theme.colors.atmo3}`,\n  },\n});\n"],"names":[],"mappings":"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"}

package/dist/esm/Flow/Node/Node.js

@@ -1,4 +1,4 @@
-import { jsxs, Fragment, jsx } from "@emotion/react/jsx-runtime";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { useState } from "react";
 import { useLabels, theme, HvTooltip, HvButton, HvTypography, HvInlineEditor, HvActionsGeneric } from "@hitachivantara/uikit-react-core";
 import { Info, Up, Down } from "@hitachivantara/uikit-react-icons";

package/dist/esm/Flow/Node/Parameters/ParamRenderer.js

@@ -1,4 +1,4 @@
-import { jsx, Fragment } from "@emotion/react/jsx-runtime";
+import { jsx, Fragment } from "react/jsx-runtime";
 import Select from "./Select.js";
 import Slider from "./Slider.js";
 import Text from "./Text.js";

package/dist/esm/Flow/Node/Parameters/Select.js

@@ -1,4 +1,4 @@
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { useState } from "react";
 import { HvDropdown } from "@hitachivantara/uikit-react-core";
 import { useFlowNodeUtils } from "../../hooks/useFlowNode.js";

package/dist/esm/Flow/Node/Parameters/Slider.js

@@ -1,4 +1,4 @@
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { css } from "@emotion/css";
 import { HvSlider } from "@hitachivantara/uikit-react-core";
 import { useFlowNodeUtils } from "../../hooks/useFlowNode.js";

package/dist/esm/Flow/Node/Parameters/Text.js

@@ -1,4 +1,4 @@
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { HvInput } from "@hitachivantara/uikit-react-core";
 import { useFlowNodeUtils } from "../../hooks/useFlowNode.js";
 const Text = ({ param, data }) => {

package/dist/esm/Flow/Sidebar/Sidebar.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { useState, useMemo, useEffect } from "react";
 import { useDroppable, useDndMonitor, DragOverlay } from "@dnd-kit/core";
 import { restrictToWindowEdges } from "@dnd-kit/modifiers";

package/dist/esm/Flow/Sidebar/SidebarGroup/SidebarGroup.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { useMemo, useCallback } from "react";
 import { HvTypography, HvButton } from "@hitachivantara/uikit-react-core";
 import { Up, Down } from "@hitachivantara/uikit-react-icons";

package/dist/esm/Flow/Sidebar/SidebarGroup/SidebarGroupItem/DraggableSidebarGroupItem.js

@@ -1,4 +1,4 @@
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { useRef } from "react";
 import { useDraggable } from "@dnd-kit/core";
 import { useForkRef } from "@mui/material/utils";

package/dist/esm/Flow/Sidebar/SidebarGroup/SidebarGroupItem/SidebarGroupItem.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { HvTypography } from "@hitachivantara/uikit-react-core";
 import { Drag } from "@hitachivantara/uikit-react-icons";

package/dist/esm/Flow/hooks/useNode.js

@@ -1,4 +1,4 @@
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { useMemo, isValidElement, useState, useCallback, useEffect } from "react";
 import { uid } from "uid";
 import { useLabels } from "@hitachivantara/uikit-react-core";

package/dist/esm/Flow/nodes/DashboardNode.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { useLabels, HvDialog, HvDialogTitle, HvDialogContent, HvEmptyState, HvDialogActions, HvButton } from "@hitachivantara/uikit-react-core";
 import { Info } from "@hitachivantara/uikit-react-icons";
 import { useClasses } from "./DashboardNode.styles.js";

package/dist/esm/StepNavigation/DefaultNavigation/DefaultNavigation.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { useTheme } from "@hitachivantara/uikit-react-core";
 import { getColor, stepSizes } from "./utils.js";
 import { HvStep } from "./Step/Step.js";

package/dist/esm/StepNavigation/DefaultNavigation/Step/Step.js

@@ -1,4 +1,4 @@
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { HvButton, HvAvatar } from "@hitachivantara/uikit-react-core";
 import { HourGlass, Level3Bad, Level0Good } from "@hitachivantara/uikit-react-icons";
 import { getColor, getSemantic } from "../utils.js";

package/dist/esm/StepNavigation/SimpleNavigation/Dot/Dot.js

@@ -1,4 +1,4 @@
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { HvButton } from "@hitachivantara/uikit-react-core";
 import { getColor, dotSizes } from "../utils.js";
 import { useClasses } from "./Dot.styles.js";

package/dist/esm/StepNavigation/SimpleNavigation/SimpleNavigation.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { useTheme } from "@hitachivantara/uikit-react-core";
 import { getColor, dotSizes } from "./utils.js";
 import { HvDot } from "./Dot/Dot.js";

package/dist/esm/StepNavigation/StepNavigation.js

@@ -1,4 +1,4 @@
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import styled from "@emotion/styled";
 import { useTheme, useWidth, HvBox, HvTooltip, HvTypography } from "@hitachivantara/uikit-react-core";
 import { theme } from "@hitachivantara/uikit-styles";
@@ -100,9 +100,11 @@ const HvStepNavigation = ({
               theme
             )
           );
-          return [...acc, stepElement, separatorElement];
+          acc.push(stepElement, separatorElement);
+          return acc;
         }
-        return [...acc, stepElement];
+        acc.push(stepElement);
+        return acc;
       },
       []
     );