@hitachivantara/uikit-react-core 5.38.0 → 5.38.2

package/dist/esm/components/Card/Header/Header.js.map

@@ -1 +1 @@
-{"version":3,"file":"Header.js","sources":["../../../../../src/components/Card/Header/Header.tsx"],"sourcesContent":["import MuiCardHeader, {\n  CardHeaderProps as MuiCardHeaderProps,\n} from \"@mui/material/CardHeader\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { useDefaultProps } from \"@core/hooks\";\n\nimport { staticClasses, useClasses } from \"./Header.styles\";\n\nexport { staticClasses as cardHeaderClasses };\n\nexport type HvCardHeaderClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCardHeaderProps\n  extends Omit<MuiCardHeaderProps, \"classes\">,\n    HvBaseProps<HTMLDivElement, \"title\"> {\n  /** The renderable content inside the title slot of the header. */\n  title: React.ReactNode;\n  /** The renderable content inside the subheader slot of the header. */\n  subheader?: React.ReactNode;\n  /** The renderable content inside the icon slot of the header. */\n  icon?: React.ReactNode;\n  /** The function that will be executed when this section is clicked. */\n  onClick?: React.MouseEventHandler<HTMLDivElement> | undefined;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvCardHeaderClasses;\n}\n\nexport const HvCardHeader = (props: HvCardHeaderProps) => {\n  const {\n    classes: classesProp,\n    className,\n    title,\n    subheader,\n    icon,\n    onClick,\n    ...others\n  } = useDefaultProps(\"HvCardHeader\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  return (\n    <MuiCardHeader\n      title={title}\n      subheader={subheader}\n      action={icon}\n      onClick={onClick}\n      className={cx(classes.root, className)}\n      classes={{\n        title: cx({\n          // TODO: review conditional in v6\n          [classes.titleShort]: icon,\n          [classes.title]: !icon,\n        }),\n        subheader: classes.subheader,\n        action: classes.action,\n        content: classes.content,\n      }}\n      {...others}\n    />\n  );\n};\n"],"names":["HvCardHeader","props","classes","classesProp","className","title","subheader","icon","onClick","others","useDefaultProps","cx","useClasses","root","titleShort","action","content"],"mappings":";;;;;AA8BaA,MAAAA,eAAeA,CAACC,UAA6B;AAClD,QAAA;AAAA,IACJC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAgBT,KAAK;AACnC,QAAA;AAAA,IAAEC;AAAAA,IAASS;AAAAA,EAAAA,IAAOC,WAAWT,WAAW;AAE9C,SACG,oBAAA,eAAA,EACC,OACA,WACA,QAAQI,MACR,SACA,WAAWI,GAAGT,QAAQW,MAAMT,SAAS,GACrC,SAAS;AAAA,IACPC,OAAOM,GAAG;AAAA;AAAA,MAER,CAACT,QAAQY,UAAU,GAAGP;AAAAA,MACtB,CAACL,QAAQG,KAAK,GAAG,CAACE;AAAAA,IAAAA,CACnB;AAAA,IACDD,WAAWJ,QAAQI;AAAAA,IACnBS,QAAQb,QAAQa;AAAAA,IAChBC,SAASd,QAAQc;AAAAA,EAAAA,GAEfP,GAAAA,OACJ,CAAA;AAEN;"}
+{"version":3,"file":"Header.js","sources":["../../../../../src/components/Card/Header/Header.tsx"],"sourcesContent":["import MuiCardHeader, {\n  CardHeaderProps as MuiCardHeaderProps,\n} from \"@mui/material/CardHeader\";\n\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { useDefaultProps } from \"@core/hooks\";\n\nimport { staticClasses, useClasses } from \"./Header.styles\";\n\nexport { staticClasses as cardHeaderClasses };\n\nexport type HvCardHeaderClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCardHeaderProps extends Omit<MuiCardHeaderProps, \"classes\"> {\n  /** The renderable content inside the title slot of the header. */\n  title: React.ReactNode;\n  /** The renderable content inside the subheader slot of the header. */\n  subheader?: React.ReactNode;\n  /** The renderable content inside the icon slot of the header. */\n  icon?: React.ReactNode;\n  /** The function that will be executed when this section is clicked. */\n  onClick?: React.MouseEventHandler<HTMLDivElement> | undefined;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvCardHeaderClasses;\n}\n\nexport const HvCardHeader = (props: HvCardHeaderProps) => {\n  const {\n    classes: classesProp,\n    className,\n    title,\n    subheader,\n    icon,\n    onClick,\n    ...others\n  } = useDefaultProps(\"HvCardHeader\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  return (\n    <MuiCardHeader\n      title={title}\n      subheader={subheader}\n      action={icon}\n      onClick={onClick}\n      className={cx(classes.root, className)}\n      classes={{\n        title: cx({\n          // TODO: review conditional in v6\n          [classes.titleShort]: icon,\n          [classes.title]: !icon,\n        }),\n        subheader: classes.subheader,\n        action: classes.action,\n        content: classes.content,\n      }}\n      {...others}\n    />\n  );\n};\n"],"names":["HvCardHeader","props","classes","classesProp","className","title","subheader","icon","onClick","others","useDefaultProps","cx","useClasses","root","titleShort","action","content"],"mappings":";;;;;AA2BaA,MAAAA,eAAeA,CAACC,UAA6B;AAClD,QAAA;AAAA,IACJC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAgBT,KAAK;AACnC,QAAA;AAAA,IAAEC;AAAAA,IAASS;AAAAA,EAAAA,IAAOC,WAAWT,WAAW;AAE9C,SACG,oBAAA,eAAA,EACC,OACA,WACA,QAAQI,MACR,SACA,WAAWI,GAAGT,QAAQW,MAAMT,SAAS,GACrC,SAAS;AAAA,IACPC,OAAOM,GAAG;AAAA;AAAA,MAER,CAACT,QAAQY,UAAU,GAAGP;AAAAA,MACtB,CAACL,QAAQG,KAAK,GAAG,CAACE;AAAAA,IAAAA,CACnB;AAAA,IACDD,WAAWJ,QAAQI;AAAAA,IACnBS,QAAQb,QAAQa;AAAAA,IAChBC,SAASd,QAAQc;AAAAA,EAAAA,GAEfP,GAAAA,OACJ,CAAA;AAEN;"}

package/dist/esm/components/Container/Container.js.map

@@ -1 +1 @@
-{"version":3,"file":"Container.js","sources":["../../../../src/components/Container/Container.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { useTheme } from \"@mui/material/styles\";\nimport MuiContainer, {\n  ContainerProps as MuiContainerProps,\n} from \"@mui/material/Container\";\nimport useMediaQuery from \"@mui/material/useMediaQuery\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Container.styles\";\n\nexport { staticClasses as containerClasses };\n\nexport type HvContainerClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvContainerProps\n  extends Omit<MuiContainerProps, \"classes\">,\n    HvBaseProps {\n  /**\n   * The component used for the root node.\n   * Either a string to use a DOM element or a component.\n   */\n  component?: React.ElementType;\n  /**\n   * Determine the max-width of the container.\n   * The container width grows with the size of the screen.\n   * Set to `false` to disable `maxWidth`.\n   */\n  maxWidth?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | false;\n  /** If `true`, the left and right padding is removed. */\n  disableGutters?: boolean;\n  /**\n   * Set the max-width to match the min-width of the current breakpoint.\n   * This is useful if you'd prefer to design for a fixed set of sizes\n   * instead of trying to accommodate a fully fluid viewport.\n   * It's fluid by default.\n   */\n  fixed?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvContainerClasses;\n}\n\n/** The container enables you to center your content horizontally and bound it to a specific breakpoint. */\nexport const HvContainer = forwardRef<HTMLDivElement, HvContainerProps>(\n  (props, ref) => {\n    const {\n      maxWidth = false,\n      classes: classesProp,\n      className,\n      fixed,\n      disableGutters,\n      ...others\n    } = useDefaultProps(\"HvContainer\", props);\n\n    const { classes, cx, css } = useClasses(classesProp);\n\n    const muiTheme = useTheme();\n\n    const upMd = useMediaQuery(muiTheme.breakpoints.up(\"md\"));\n\n    const gutters = upMd\n      ? {\n          // Increases specificity\n          [`&.${staticClasses.root}`]: {\n            paddingLeft: theme.spacing(4),\n            paddingRight: theme.spacing(4),\n          },\n        }\n      : {\n          // Increases specificity\n          [`&.${staticClasses.root}`]: {\n            paddingLeft: theme.space.sm,\n            paddingRight: theme.space.sm,\n          },\n        };\n\n    return (\n      <MuiContainer\n        className={cx({ [css(gutters)]: !disableGutters }, className)}\n        classes={{\n          root: classes.root,\n          disableGutters: classes.disableGutters,\n          fixed: classes.fixed,\n          maxWidthXs: classes.maxWidthXs,\n          maxWidthSm: classes.maxWidthSm,\n          maxWidthMd: classes.maxWidthMd,\n          maxWidthLg: classes.maxWidthLg,\n          maxWidthXl: classes.maxWidthXl,\n        }}\n        ref={ref}\n        maxWidth={maxWidth}\n        fixed={fixed}\n        disableGutters={disableGutters}\n        {...others}\n      />\n    );\n  }\n);\n"],"names":["HvContainer","forwardRef","props","ref","maxWidth","classes","classesProp","className","fixed","disableGutters","others","useDefaultProps","cx","css","useClasses","muiTheme","useTheme","upMd","useMediaQuery","breakpoints","up","gutters","staticClasses","root","paddingLeft","theme","spacing","paddingRight","space","sm","maxWidthXs","maxWidthSm","maxWidthMd","maxWidthLg","maxWidthXl"],"mappings":";;;;;;;;AAgDO,MAAMA,cAAcC,WACzB,CAACC,OAAOC,QAAQ;AACR,QAAA;AAAA,IACJC,WAAW;AAAA,IACXC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,eAAeT,KAAK;AAElC,QAAA;AAAA,IAAEG;AAAAA,IAASO;AAAAA,IAAIC;AAAAA,EAAAA,IAAQC,WAAWR,WAAW;AAEnD,QAAMS,WAAWC;AAEjB,QAAMC,OAAOC,cAAcH,SAASI,YAAYC,GAAG,IAAI,CAAC;AAExD,QAAMC,UAAUJ,OACZ;AAAA;AAAA,IAEE,CAAE,KAAIK,cAAcC,IAAK,EAAC,GAAG;AAAA,MAC3BC,aAAaC,MAAMC,QAAQ,CAAC;AAAA,MAC5BC,cAAcF,MAAMC,QAAQ,CAAC;AAAA,IAC/B;AAAA,EAAA,IAEF;AAAA;AAAA,IAEE,CAAE,KAAIJ,cAAcC,IAAK,EAAC,GAAG;AAAA,MAC3BC,aAAaC,MAAMG,MAAMC;AAAAA,MACzBF,cAAcF,MAAMG,MAAMC;AAAAA,IAC5B;AAAA,EAAA;AAIJ,SAAA,oBAAC,cACC,EAAA,WAAWjB,GAAG;AAAA,IAAE,CAACC,IAAIQ,OAAO,CAAC,GAAG,CAACZ;AAAAA,EAAAA,GAAkBF,SAAS,GAC5D,SAAS;AAAA,IACPgB,MAAMlB,QAAQkB;AAAAA,IACdd,gBAAgBJ,QAAQI;AAAAA,IACxBD,OAAOH,QAAQG;AAAAA,IACfsB,YAAYzB,QAAQyB;AAAAA,IACpBC,YAAY1B,QAAQ0B;AAAAA,IACpBC,YAAY3B,QAAQ2B;AAAAA,IACpBC,YAAY5B,QAAQ4B;AAAAA,IACpBC,YAAY7B,QAAQ6B;AAAAA,EAAAA,GAEtB,KACA,UACA,OACA,gBACIxB,GAAAA,OACJ,CAAA;AAEN,CACF;"}
+{"version":3,"file":"Container.js","sources":["../../../../src/components/Container/Container.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { useTheme } from \"@mui/material/styles\";\nimport MuiContainer, {\n  ContainerProps as MuiContainerProps,\n} from \"@mui/material/Container\";\nimport useMediaQuery from \"@mui/material/useMediaQuery\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Container.styles\";\n\nexport { staticClasses as containerClasses };\n\nexport type HvContainerClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvContainerProps extends Omit<MuiContainerProps, \"classes\"> {\n  /**\n   * The component used for the root node.\n   * Either a string to use a DOM element or a component.\n   */\n  component?: React.ElementType;\n  /**\n   * Determine the max-width of the container.\n   * The container width grows with the size of the screen.\n   * Set to `false` to disable `maxWidth`.\n   */\n  maxWidth?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | false;\n  /** If `true`, the left and right padding is removed. */\n  disableGutters?: boolean;\n  /**\n   * Set the max-width to match the min-width of the current breakpoint.\n   * This is useful if you'd prefer to design for a fixed set of sizes\n   * instead of trying to accommodate a fully fluid viewport.\n   * It's fluid by default.\n   */\n  fixed?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvContainerClasses;\n}\n\n/** The container enables you to center your content horizontally and bound it to a specific breakpoint. */\nexport const HvContainer = forwardRef<HTMLDivElement, HvContainerProps>(\n  (props, ref) => {\n    const {\n      maxWidth = false,\n      classes: classesProp,\n      className,\n      fixed,\n      disableGutters,\n      ...others\n    } = useDefaultProps(\"HvContainer\", props);\n\n    const { classes, cx, css } = useClasses(classesProp);\n\n    const muiTheme = useTheme();\n\n    const upMd = useMediaQuery(muiTheme.breakpoints.up(\"md\"));\n\n    const gutters = upMd\n      ? {\n          // Increases specificity\n          [`&.${staticClasses.root}`]: {\n            paddingLeft: theme.spacing(4),\n            paddingRight: theme.spacing(4),\n          },\n        }\n      : {\n          // Increases specificity\n          [`&.${staticClasses.root}`]: {\n            paddingLeft: theme.space.sm,\n            paddingRight: theme.space.sm,\n          },\n        };\n\n    return (\n      <MuiContainer\n        className={cx({ [css(gutters)]: !disableGutters }, className)}\n        classes={{\n          root: classes.root,\n          disableGutters: classes.disableGutters,\n          fixed: classes.fixed,\n          maxWidthXs: classes.maxWidthXs,\n          maxWidthSm: classes.maxWidthSm,\n          maxWidthMd: classes.maxWidthMd,\n          maxWidthLg: classes.maxWidthLg,\n          maxWidthXl: classes.maxWidthXl,\n        }}\n        ref={ref}\n        maxWidth={maxWidth}\n        fixed={fixed}\n        disableGutters={disableGutters}\n        {...others}\n      />\n    );\n  }\n);\n"],"names":["HvContainer","forwardRef","props","ref","maxWidth","classes","classesProp","className","fixed","disableGutters","others","useDefaultProps","cx","css","useClasses","muiTheme","useTheme","upMd","useMediaQuery","breakpoints","up","gutters","staticClasses","root","paddingLeft","theme","spacing","paddingRight","space","sm","maxWidthXs","maxWidthSm","maxWidthMd","maxWidthLg","maxWidthXl"],"mappings":";;;;;;;;AA6CO,MAAMA,cAAcC,WACzB,CAACC,OAAOC,QAAQ;AACR,QAAA;AAAA,IACJC,WAAW;AAAA,IACXC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,eAAeT,KAAK;AAElC,QAAA;AAAA,IAAEG;AAAAA,IAASO;AAAAA,IAAIC;AAAAA,EAAAA,IAAQC,WAAWR,WAAW;AAEnD,QAAMS,WAAWC;AAEjB,QAAMC,OAAOC,cAAcH,SAASI,YAAYC,GAAG,IAAI,CAAC;AAExD,QAAMC,UAAUJ,OACZ;AAAA;AAAA,IAEE,CAAE,KAAIK,cAAcC,IAAK,EAAC,GAAG;AAAA,MAC3BC,aAAaC,MAAMC,QAAQ,CAAC;AAAA,MAC5BC,cAAcF,MAAMC,QAAQ,CAAC;AAAA,IAC/B;AAAA,EAAA,IAEF;AAAA;AAAA,IAEE,CAAE,KAAIJ,cAAcC,IAAK,EAAC,GAAG;AAAA,MAC3BC,aAAaC,MAAMG,MAAMC;AAAAA,MACzBF,cAAcF,MAAMG,MAAMC;AAAAA,IAC5B;AAAA,EAAA;AAIJ,SAAA,oBAAC,cACC,EAAA,WAAWjB,GAAG;AAAA,IAAE,CAACC,IAAIQ,OAAO,CAAC,GAAG,CAACZ;AAAAA,EAAAA,GAAkBF,SAAS,GAC5D,SAAS;AAAA,IACPgB,MAAMlB,QAAQkB;AAAAA,IACdd,gBAAgBJ,QAAQI;AAAAA,IACxBD,OAAOH,QAAQG;AAAAA,IACfsB,YAAYzB,QAAQyB;AAAAA,IACpBC,YAAY1B,QAAQ0B;AAAAA,IACpBC,YAAY3B,QAAQ2B;AAAAA,IACpBC,YAAY5B,QAAQ4B;AAAAA,IACpBC,YAAY7B,QAAQ6B;AAAAA,EAAAA,GAEtB,KACA,UACA,OACA,gBACIxB,GAAAA,OACJ,CAAA;AAEN,CACF;"}

package/dist/esm/components/Dialog/Actions/Actions.js.map

@@ -1 +1 @@
-{"version":3,"file":"Actions.js","sources":["../../../../../src/components/Dialog/Actions/Actions.tsx"],"sourcesContent":["import MuiDialogActions, {\n  DialogActionsProps as MuiDialogActionsProps,\n} from \"@mui/material/DialogActions\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Actions.styles\";\nimport { useDialogContext } from \"../context\";\n\nexport { staticClasses as dialogActionClasses };\n\nexport type HvDialogActionClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDialogActionsProps\n  extends Omit<MuiDialogActionsProps, \"classes\">,\n    HvBaseProps {\n  /** Set the dialog to fullscreen mode. @deprecated set `fullscreen` in `HvDialog` */\n  fullscreen?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvDialogActionClasses;\n}\n\nexport const HvDialogActions = (props: HvDialogActionsProps) => {\n  const {\n    classes: classesProp,\n    className,\n    children,\n    fullscreen: fullScreenProp,\n    ...others\n  } = useDefaultProps(\"HvDialogActions\", props);\n  const context = useDialogContext();\n  const fullscreen = fullScreenProp ?? context.fullscreen;\n\n  const { classes, cx } = useClasses(classesProp);\n\n  return (\n    <MuiDialogActions\n      className={className}\n      classes={{\n        root: cx(classes.root, { [classes.fullscreen]: fullscreen }),\n        spacing: classes.spacing,\n      }}\n      {...others}\n    >\n      {children}\n    </MuiDialogActions>\n  );\n};\n"],"names":["HvDialogActions","props","classes","classesProp","className","children","fullscreen","fullScreenProp","others","useDefaultProps","context","useDialogContext","cx","useClasses","root","spacing"],"mappings":";;;;;;AAyBaA,MAAAA,kBAAkBA,CAACC,UAAgC;AACxD,QAAA;AAAA,IACJC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC,YAAYC;AAAAA,IACZ,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,mBAAmBR,KAAK;AAC5C,QAAMS,UAAUC;AACVL,QAAAA,aAAaC,kBAAkBG,QAAQJ;AAEvC,QAAA;AAAA,IAAEJ;AAAAA,IAASU;AAAAA,EAAAA,IAAOC,WAAWV,WAAW;AAG5C,SAAA,oBAAC,kBACC,EAAA,WACA,SAAS;AAAA,IACPW,MAAMF,GAAGV,QAAQY,MAAM;AAAA,MAAE,CAACZ,QAAQI,UAAU,GAAGA;AAAAA,IAAAA,CAAY;AAAA,IAC3DS,SAASb,QAAQa;AAAAA,EAAAA,GAEfP,GAAAA,QAEHH,SACH,CAAA;AAEJ;"}
+{"version":3,"file":"Actions.js","sources":["../../../../../src/components/Dialog/Actions/Actions.tsx"],"sourcesContent":["import MuiDialogActions, {\n  DialogActionsProps as MuiDialogActionsProps,\n} from \"@mui/material/DialogActions\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Actions.styles\";\nimport { useDialogContext } from \"../context\";\n\nexport { staticClasses as dialogActionClasses };\n\nexport type HvDialogActionClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDialogActionsProps\n  extends Omit<MuiDialogActionsProps, \"classes\"> {\n  /** Set the dialog to fullscreen mode. @deprecated set `fullscreen` in `HvDialog` */\n  fullscreen?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvDialogActionClasses;\n}\n\nexport const HvDialogActions = (props: HvDialogActionsProps) => {\n  const {\n    classes: classesProp,\n    className,\n    children,\n    fullscreen: fullScreenProp,\n    ...others\n  } = useDefaultProps(\"HvDialogActions\", props);\n  const context = useDialogContext();\n  const fullscreen = fullScreenProp ?? context.fullscreen;\n\n  const { classes, cx } = useClasses(classesProp);\n\n  return (\n    <MuiDialogActions\n      className={className}\n      classes={{\n        root: cx(classes.root, { [classes.fullscreen]: fullscreen }),\n        spacing: classes.spacing,\n      }}\n      {...others}\n    >\n      {children}\n    </MuiDialogActions>\n  );\n};\n"],"names":["HvDialogActions","props","classes","classesProp","className","children","fullscreen","fullScreenProp","others","useDefaultProps","context","useDialogContext","cx","useClasses","root","spacing"],"mappings":";;;;;;AAuBaA,MAAAA,kBAAkBA,CAACC,UAAgC;AACxD,QAAA;AAAA,IACJC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC,YAAYC;AAAAA,IACZ,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,mBAAmBR,KAAK;AAC5C,QAAMS,UAAUC;AACVL,QAAAA,aAAaC,kBAAkBG,QAAQJ;AAEvC,QAAA;AAAA,IAAEJ;AAAAA,IAASU;AAAAA,EAAAA,IAAOC,WAAWV,WAAW;AAG5C,SAAA,oBAAC,kBACC,EAAA,WACA,SAAS;AAAA,IACPW,MAAMF,GAAGV,QAAQY,MAAM;AAAA,MAAE,CAACZ,QAAQI,UAAU,GAAGA;AAAAA,IAAAA,CAAY;AAAA,IAC3DS,SAASb,QAAQa;AAAAA,EAAAA,GAEfP,GAAAA,QAEHH,SACH,CAAA;AAEJ;"}

package/dist/esm/components/Dialog/Content/Content.js.map

@@ -1 +1 @@
-{"version":3,"file":"Content.js","sources":["../../../../../src/components/Dialog/Content/Content.tsx"],"sourcesContent":["import MuiDialogContent, {\n  DialogContentProps as MuiDialogContentProps,\n} from \"@mui/material/DialogContent\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { HvTypography } from \"@core/components/Typography\";\n\nimport { staticClasses, useClasses } from \"./Content.styles\";\n\nexport { staticClasses as dialogContentClasses };\n\nexport type HvDialogContentClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDialogContentProps\n  extends Omit<MuiDialogContentProps, \"classes\">,\n    HvBaseProps {\n  /** Content should be indented in relationship to the Dialog title. */\n  indentContent?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvDialogContentClasses;\n}\n\nexport const HvDialogContent = (props: HvDialogContentProps) => {\n  const {\n    classes: classesProp,\n    className,\n    children,\n    indentContent = false,\n  } = useDefaultProps(\"HvDialogContent\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  return (\n    <HvTypography\n      component={MuiDialogContent}\n      className={cx(\n        classes.root,\n        { [classes.textContent]: !!indentContent },\n        className\n      )}\n    >\n      {children}\n    </HvTypography>\n  );\n};\n"],"names":["HvDialogContent","props","classes","classesProp","className","children","indentContent","useDefaultProps","cx","useClasses","MuiDialogContent","root","textContent"],"mappings":";;;;;;AAyBaA,MAAAA,kBAAkBA,CAACC,UAAgC;AACxD,QAAA;AAAA,IACJC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC,gBAAgB;AAAA,EAAA,IACdC,gBAAgB,mBAAmBN,KAAK;AAEtC,QAAA;AAAA,IAAEC;AAAAA,IAASM;AAAAA,EAAAA,IAAOC,WAAWN,WAAW;AAE9C,6BACG,cACC,EAAA,WAAWO,kBACX,WAAWF,GACTN,QAAQS,MACR;AAAA,IAAE,CAACT,QAAQU,WAAW,GAAG,CAAC,CAACN;AAAAA,EAAAA,GAC3BF,SACF,GAECC,SACH,CAAA;AAEJ;"}
+{"version":3,"file":"Content.js","sources":["../../../../../src/components/Dialog/Content/Content.tsx"],"sourcesContent":["import MuiDialogContent, {\n  DialogContentProps as MuiDialogContentProps,\n} from \"@mui/material/DialogContent\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { HvTypography } from \"@core/components/Typography\";\n\nimport { staticClasses, useClasses } from \"./Content.styles\";\n\nexport { staticClasses as dialogContentClasses };\n\nexport type HvDialogContentClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDialogContentProps\n  extends Omit<MuiDialogContentProps, \"classes\"> {\n  /** Content should be indented in relationship to the Dialog title. */\n  indentContent?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvDialogContentClasses;\n}\n\nexport const HvDialogContent = (props: HvDialogContentProps) => {\n  const {\n    classes: classesProp,\n    className,\n    children,\n    indentContent = false,\n  } = useDefaultProps(\"HvDialogContent\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  return (\n    <HvTypography\n      component={MuiDialogContent}\n      className={cx(\n        classes.root,\n        { [classes.textContent]: !!indentContent },\n        className\n      )}\n    >\n      {children}\n    </HvTypography>\n  );\n};\n"],"names":["HvDialogContent","props","classes","classesProp","className","children","indentContent","useDefaultProps","cx","useClasses","MuiDialogContent","root","textContent"],"mappings":";;;;;;AAuBaA,MAAAA,kBAAkBA,CAACC,UAAgC;AACxD,QAAA;AAAA,IACJC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC,gBAAgB;AAAA,EAAA,IACdC,gBAAgB,mBAAmBN,KAAK;AAEtC,QAAA;AAAA,IAAEC;AAAAA,IAASM;AAAAA,EAAAA,IAAOC,WAAWN,WAAW;AAE9C,6BACG,cACC,EAAA,WAAWO,kBACX,WAAWF,GACTN,QAAQS,MACR;AAAA,IAAE,CAACT,QAAQU,WAAW,GAAG,CAAC,CAACN;AAAAA,EAAAA,GAC3BF,SACF,GAECC,SACH,CAAA;AAEJ;"}

package/dist/esm/components/Dialog/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.js","sources":["../../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\n\nimport MuiDialog, { DialogProps as MuiDialogProps } from \"@mui/material/Dialog\";\n\nimport { Close } from \"@hitachivantara/uikit-react-icons\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { HvButton } from \"@core/components/Button\";\nimport { HvTooltip } from \"@core/components/Tooltip\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { getElementById } from \"@core/utils/document\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { setId } from \"@core/utils/setId\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { hexToRgbA } from \"@core/utils/hexToRgbA\";\n\nimport { staticClasses, useClasses } from \"./Dialog.styles\";\nimport { DialogContext } from \"./context\";\n\nexport { staticClasses as dialogClasses };\n\nexport type HvDialogClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDialogProps\n  extends Omit<MuiDialogProps, \"fullScreen\" | \"classes\" | \"open\">,\n    HvBaseProps {\n  /** Current state of the Dialog. */\n  open?: boolean;\n  /** Callback fired when the component requests to be closed. */\n  onClose?: (event: any, reason?: \"escapeKeyDown\" | \"backdropClick\") => void;\n  /** @inheritdoc */\n  maxWidth?: MuiDialogProps[\"maxWidth\"];\n  /** @inheritdoc */\n  fullWidth?: MuiDialogProps[\"fullWidth\"];\n  /**\n   * Element id that should be focus when the Dialog opens.\n   * Auto-focusing elements can cause usability issues, so this should be avoided.\n   * @deprecated Use `autoFocus` on the element instead, if auto-focusing is required.\n   */\n  firstFocusable?: string;\n  /** Title for the button close. */\n  buttonTitle?: string;\n  /** Set the dialog to fullscreen mode. */\n  fullscreen?: boolean;\n  /** Prevent closing the dialog when clicking on the backdrop. */\n  disableBackdropClick?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvDialogClasses;\n  /** Variant of the dialog. Adds a status bar to the top of the dialog. If not provided, no status bar is added. */\n  variant?: \"success\" | \"error\" | \"warning\";\n  /** @ignore */\n  ref?: MuiDialogProps[\"ref\"];\n  /** @ignore */\n  component?: MuiDialogProps[\"component\"];\n}\n\nexport const HvDialog = (props: HvDialogProps) => {\n  const {\n    variant,\n    classes: classesProp,\n    className,\n    id,\n    children,\n    open = false,\n    onClose,\n    firstFocusable,\n    buttonTitle = \"Close\",\n    fullscreen = false,\n    disableBackdropClick = false,\n    ...others\n  } = useDefaultProps(\"HvDialog\", props);\n\n  const { classes, css, cx } = useClasses(classesProp);\n  const { rootId, colors } = useTheme();\n\n  const measuredRef = useCallback(() => {\n    if (!firstFocusable) return;\n\n    const element = document.getElementById(firstFocusable);\n    element?.focus();\n  }, [firstFocusable]);\n\n  const contextValue = useMemo(() => ({ fullscreen }), [fullscreen]);\n\n  return (\n    <MuiDialog\n      container={getElementById(rootId)}\n      className={cx(classes.root, className)}\n      classes={{ container: css({ position: \"relative\" }) }}\n      id={id}\n      ref={measuredRef}\n      open={open}\n      fullScreen={fullscreen}\n      onClose={(event, reason) => {\n        // `disableBackdropClick` property was removed in MUI5\n        // and we want to maintain that functionality\n        if (disableBackdropClick) return;\n\n        onClose?.(event, reason);\n      }}\n      slotProps={{\n        backdrop: {\n          classes: {\n            root: cx(\n              css({\n                background: hexToRgbA(colors?.atmo4 || theme.colors.atmo4, 0.8),\n              }),\n              classes.background\n            ),\n          },\n        },\n      }}\n      PaperProps={{\n        classes: {\n          root: cx(\n            css({ position: \"absolute\" }),\n            classes.paper,\n            variant && cx(classes.statusBar, classes[variant]),\n            {\n              [classes.fullscreen]: fullscreen,\n            }\n          ),\n        },\n      }}\n      aria-modal\n      {...others}\n    >\n      <HvTooltip placement=\"top\" title={buttonTitle}>\n        <HvButton\n          id={setId(id, \"close\")}\n          className={classes.closeButton}\n          variant=\"secondaryGhost\"\n          onClick={(event) => onClose?.(event, undefined)}\n        >\n          <Close role=\"none\" />\n        </HvButton>\n      </HvTooltip>\n      <DialogContext.Provider value={contextValue}>\n        {children}\n      </DialogContext.Provider>\n    </MuiDialog>\n  );\n};\n"],"names":["HvDialog","props","variant","classes","classesProp","className","id","children","open","onClose","firstFocusable","buttonTitle","fullscreen","disableBackdropClick","others","useDefaultProps","css","cx","useClasses","rootId","colors","useTheme","measuredRef","useCallback","element","document","getElementById","focus","contextValue","useMemo","root","container","position","event","reason","backdrop","background","hexToRgbA","atmo4","theme","paper","statusBar","setId","closeButton","undefined"],"mappings":";;;;;;;;;;;;;;;AA0DaA,MAAAA,WAAWA,CAACC,UAAyB;AAC1C,QAAA;AAAA,IACJC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,OAAO;AAAA,IACPC;AAAAA,IACAC;AAAAA,IACAC,cAAc;AAAA,IACdC,aAAa;AAAA,IACbC,uBAAuB;AAAA,IACvB,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,YAAYd,KAAK;AAE/B,QAAA;AAAA,IAAEE;AAAAA,IAASa;AAAAA,IAAKC;AAAAA,EAAAA,IAAOC,WAAWd,WAAW;AAC7C,QAAA;AAAA,IAAEe;AAAAA,IAAQC;AAAAA,MAAWC,SAAS;AAE9BC,QAAAA,cAAcC,YAAY,MAAM;AACpC,QAAI,CAACb;AAAgB;AAEfc,UAAAA,UAAUC,SAASC,eAAehB,cAAc;AACtDc,aAASG,MAAM;AAAA,EAAA,GACd,CAACjB,cAAc,CAAC;AAEbkB,QAAAA,eAAeC,QAAQ,OAAO;AAAA,IAAEjB;AAAAA,EAAAA,IAAe,CAACA,UAAU,CAAC;AAEjE,SACG,qBAAA,WAAA,EACC,WAAWc,eAAeP,MAAM,GAChC,WAAWF,GAAGd,QAAQ2B,MAAMzB,SAAS,GACrC,SAAS;AAAA,IAAE0B,WAAWf,IAAI;AAAA,MAAEgB,UAAU;AAAA,IAAA,CAAY;AAAA,EAAA,GAClD,IACA,KAAKV,aACL,MACA,YAAYV,YACZ,SAAS,CAACqB,OAAOC,WAAW;AAGtBrB,QAAAA;AAAsB;AAE1BJ,cAAUwB,OAAOC,MAAM;AAAA,KAEzB,WAAW;AAAA,IACTC,UAAU;AAAA,MACRhC,SAAS;AAAA,QACP2B,MAAMb,GACJD,IAAI;AAAA,UACFoB,YAAYC,UAAUjB,QAAQkB,SAASC,MAAMnB,OAAOkB,OAAO,GAAG;AAAA,QAAA,CAC/D,GACDnC,QAAQiC,UACV;AAAA,MACF;AAAA,IACF;AAAA,KAEF,YAAY;AAAA,IACVjC,SAAS;AAAA,MACP2B,MAAMb,GACJD,IAAI;AAAA,QAAEgB,UAAU;AAAA,MAAA,CAAY,GAC5B7B,QAAQqC,OACRtC,WAAWe,GAAGd,QAAQsC,WAAWtC,QAAQD,OAAO,CAAC,GACjD;AAAA,QACE,CAACC,QAAQS,UAAU,GAAGA;AAAAA,MAAAA,CAE1B;AAAA,IACF;AAAA,EAEF,GAAA,cAAU,MACV,GAAIE,QAEJ,UAAA;AAAA,IAAA,oBAAC,WAAU,EAAA,WAAU,OAAM,OAAOH,aAChC,UAAA,oBAAC,UACC,EAAA,IAAI+B,MAAMpC,IAAI,OAAO,GACrB,WAAWH,QAAQwC,aACnB,SAAQ,kBACR,SAAUV,CAAUxB,UAAAA,UAAUwB,OAAOW,MAAS,GAE9C,UAAA,oBAAC,OAAM,EAAA,MAAK,OAAM,CAAA,EACpB,CAAA,GACF;AAAA,wBACC,cAAc,UAAd,EAAuB,OAAOhB,cAC5BrB,UACH;AAAA,EACF,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"Dialog.js","sources":["../../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\n\nimport MuiDialog, { DialogProps as MuiDialogProps } from \"@mui/material/Dialog\";\n\nimport { Close } from \"@hitachivantara/uikit-react-icons\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { HvButton } from \"@core/components/Button\";\nimport { HvTooltip } from \"@core/components/Tooltip\";\nimport { getElementById } from \"@core/utils/document\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { setId } from \"@core/utils/setId\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { hexToRgbA } from \"@core/utils/hexToRgbA\";\n\nimport { staticClasses, useClasses } from \"./Dialog.styles\";\nimport { DialogContext } from \"./context\";\n\nexport { staticClasses as dialogClasses };\n\nexport type HvDialogClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDialogProps\n  extends Omit<MuiDialogProps, \"fullScreen\" | \"classes\" | \"open\"> {\n  /** Current state of the Dialog. */\n  open?: boolean;\n  /** Callback fired when the component requests to be closed. */\n  onClose?: (event: any, reason?: \"escapeKeyDown\" | \"backdropClick\") => void;\n  /** @inheritdoc */\n  maxWidth?: MuiDialogProps[\"maxWidth\"];\n  /** @inheritdoc */\n  fullWidth?: MuiDialogProps[\"fullWidth\"];\n  /**\n   * Element id that should be focus when the Dialog opens.\n   * Auto-focusing elements can cause usability issues, so this should be avoided.\n   * @deprecated Use `autoFocus` on the element instead, if auto-focusing is required.\n   */\n  firstFocusable?: string;\n  /** Title for the button close. */\n  buttonTitle?: string;\n  /** Set the dialog to fullscreen mode. */\n  fullscreen?: boolean;\n  /** Prevent closing the dialog when clicking on the backdrop. */\n  disableBackdropClick?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvDialogClasses;\n  /** Variant of the dialog. Adds a status bar to the top of the dialog. If not provided, no status bar is added. */\n  variant?: \"success\" | \"error\" | \"warning\";\n  /** @ignore */\n  ref?: MuiDialogProps[\"ref\"];\n  /** @ignore */\n  component?: MuiDialogProps[\"component\"];\n}\n\nexport const HvDialog = (props: HvDialogProps) => {\n  const {\n    variant,\n    classes: classesProp,\n    className,\n    id,\n    children,\n    open = false,\n    onClose,\n    firstFocusable,\n    buttonTitle = \"Close\",\n    fullscreen = false,\n    disableBackdropClick = false,\n    ...others\n  } = useDefaultProps(\"HvDialog\", props);\n\n  const { classes, css, cx } = useClasses(classesProp);\n  const { rootId, colors } = useTheme();\n\n  const measuredRef = useCallback(() => {\n    if (!firstFocusable) return;\n\n    const element = document.getElementById(firstFocusable);\n    element?.focus();\n  }, [firstFocusable]);\n\n  const contextValue = useMemo(() => ({ fullscreen }), [fullscreen]);\n\n  return (\n    <MuiDialog\n      container={getElementById(rootId)}\n      className={cx(classes.root, className)}\n      classes={{ container: css({ position: \"relative\" }) }}\n      id={id}\n      ref={measuredRef}\n      open={open}\n      fullScreen={fullscreen}\n      onClose={(event, reason) => {\n        // `disableBackdropClick` property was removed in MUI5\n        // and we want to maintain that functionality\n        if (disableBackdropClick) return;\n\n        onClose?.(event, reason);\n      }}\n      slotProps={{\n        backdrop: {\n          classes: {\n            root: cx(\n              css({\n                background: hexToRgbA(colors?.atmo4 || theme.colors.atmo4, 0.8),\n              }),\n              classes.background\n            ),\n          },\n        },\n      }}\n      PaperProps={{\n        classes: {\n          root: cx(\n            css({ position: \"absolute\" }),\n            classes.paper,\n            variant && cx(classes.statusBar, classes[variant]),\n            {\n              [classes.fullscreen]: fullscreen,\n            }\n          ),\n        },\n      }}\n      aria-modal\n      {...others}\n    >\n      <HvTooltip placement=\"top\" title={buttonTitle}>\n        <HvButton\n          id={setId(id, \"close\")}\n          className={classes.closeButton}\n          variant=\"secondaryGhost\"\n          onClick={(event) => onClose?.(event, undefined)}\n        >\n          <Close role=\"none\" />\n        </HvButton>\n      </HvTooltip>\n      <DialogContext.Provider value={contextValue}>\n        {children}\n      </DialogContext.Provider>\n    </MuiDialog>\n  );\n};\n"],"names":["HvDialog","props","variant","classes","classesProp","className","id","children","open","onClose","firstFocusable","buttonTitle","fullscreen","disableBackdropClick","others","useDefaultProps","css","cx","useClasses","rootId","colors","useTheme","measuredRef","useCallback","element","document","getElementById","focus","contextValue","useMemo","root","container","position","event","reason","backdrop","background","hexToRgbA","atmo4","theme","paper","statusBar","setId","closeButton","undefined"],"mappings":";;;;;;;;;;;;;;;AAwDaA,MAAAA,WAAWA,CAACC,UAAyB;AAC1C,QAAA;AAAA,IACJC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,OAAO;AAAA,IACPC;AAAAA,IACAC;AAAAA,IACAC,cAAc;AAAA,IACdC,aAAa;AAAA,IACbC,uBAAuB;AAAA,IACvB,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,YAAYd,KAAK;AAE/B,QAAA;AAAA,IAAEE;AAAAA,IAASa;AAAAA,IAAKC;AAAAA,EAAAA,IAAOC,WAAWd,WAAW;AAC7C,QAAA;AAAA,IAAEe;AAAAA,IAAQC;AAAAA,MAAWC,SAAS;AAE9BC,QAAAA,cAAcC,YAAY,MAAM;AACpC,QAAI,CAACb;AAAgB;AAEfc,UAAAA,UAAUC,SAASC,eAAehB,cAAc;AACtDc,aAASG,MAAM;AAAA,EAAA,GACd,CAACjB,cAAc,CAAC;AAEbkB,QAAAA,eAAeC,QAAQ,OAAO;AAAA,IAAEjB;AAAAA,EAAAA,IAAe,CAACA,UAAU,CAAC;AAEjE,SACG,qBAAA,WAAA,EACC,WAAWc,eAAeP,MAAM,GAChC,WAAWF,GAAGd,QAAQ2B,MAAMzB,SAAS,GACrC,SAAS;AAAA,IAAE0B,WAAWf,IAAI;AAAA,MAAEgB,UAAU;AAAA,IAAA,CAAY;AAAA,EAAA,GAClD,IACA,KAAKV,aACL,MACA,YAAYV,YACZ,SAAS,CAACqB,OAAOC,WAAW;AAGtBrB,QAAAA;AAAsB;AAE1BJ,cAAUwB,OAAOC,MAAM;AAAA,KAEzB,WAAW;AAAA,IACTC,UAAU;AAAA,MACRhC,SAAS;AAAA,QACP2B,MAAMb,GACJD,IAAI;AAAA,UACFoB,YAAYC,UAAUjB,QAAQkB,SAASC,MAAMnB,OAAOkB,OAAO,GAAG;AAAA,QAAA,CAC/D,GACDnC,QAAQiC,UACV;AAAA,MACF;AAAA,IACF;AAAA,KAEF,YAAY;AAAA,IACVjC,SAAS;AAAA,MACP2B,MAAMb,GACJD,IAAI;AAAA,QAAEgB,UAAU;AAAA,MAAA,CAAY,GAC5B7B,QAAQqC,OACRtC,WAAWe,GAAGd,QAAQsC,WAAWtC,QAAQD,OAAO,CAAC,GACjD;AAAA,QACE,CAACC,QAAQS,UAAU,GAAGA;AAAAA,MAAAA,CAE1B;AAAA,IACF;AAAA,EAEF,GAAA,cAAU,MACV,GAAIE,QAEJ,UAAA;AAAA,IAAA,oBAAC,WAAU,EAAA,WAAU,OAAM,OAAOH,aAChC,UAAA,oBAAC,UACC,EAAA,IAAI+B,MAAMpC,IAAI,OAAO,GACrB,WAAWH,QAAQwC,aACnB,SAAQ,kBACR,SAAUV,CAAUxB,UAAAA,UAAUwB,OAAOW,MAAS,GAE9C,UAAA,oBAAC,OAAM,EAAA,MAAK,OAAM,CAAA,EACpB,CAAA,GACF;AAAA,wBACC,cAAc,UAAd,EAAuB,OAAOhB,cAC5BrB,UACH;AAAA,EACF,EAAA,CAAA;AAEJ;"}

package/dist/esm/components/Drawer/Drawer.js

@@ -3,13 +3,12 @@ import { Drawer, Backdrop } from "@mui/material";
 import { Close } from "@hitachivantara/uikit-react-icons";
 import { theme } from "@hitachivantara/uikit-styles";
 import { useDefaultProps } from "../../hooks/useDefaultProps.js";
-import { withTooltip } from "../../hocs/withTooltip.js";
+import { IconButton } from "../../utils/IconButton.js";
 import { setId } from "../../utils/setId.js";
 import { useTheme } from "../../hooks/useTheme.js";
 import { hexToRgbA } from "../../utils/hexToRgbA.js";
 import { useClasses } from "./Drawer.styles.js";
 import { staticClasses } from "./Drawer.styles.js";
-import { HvButton } from "../Button/Button.js";
 const HvDrawer = (props) => {
   const {
     className,
@@ -32,15 +31,13 @@ const HvDrawer = (props) => {
   const {
     colors
   } = useTheme();
-  const closeButtonDisplay = () => /* @__PURE__ */ jsx(Close, { role: "none" });
-  const CloseButtonTooltipWrapper = buttonTitle ? withTooltip(closeButtonDisplay, buttonTitle, "top") : closeButtonDisplay;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs(Drawer, { className: cx(classes.root, className), id, anchor, open, PaperProps: {
       classes: {
         root: classes.paper
       }
     }, onClose, ...others, children: [
-      /* @__PURE__ */ jsx(HvButton, { id: setId(id, "close"), className: classes.closeButton, variant: "secondaryGhost", onClick: onClose, "aria-label": buttonTitle, children: /* @__PURE__ */ jsx(CloseButtonTooltipWrapper, {}) }),
+      /* @__PURE__ */ jsx(IconButton, { id: setId(id, "close"), className: classes.closeButton, variant: "secondaryGhost", onClick: onClose, title: buttonTitle, children: /* @__PURE__ */ jsx(Close, { role: "none" }) }),
       children
     ] }),
     showBackdrop && /* @__PURE__ */ jsx(Backdrop, { open: !!open, onClick: (event) => {

package/dist/esm/components/Drawer/Drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.js","sources":["../../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["import {\n  Drawer as MuiDrawer,\n  DrawerProps as MuiDrawerProps,\n  Backdrop as MuiBackdrop,\n} from \"@mui/material\";\n\nimport { Close } from \"@hitachivantara/uikit-react-icons\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { withTooltip } from \"@core/hocs/withTooltip\";\nimport { setId } from \"@core/utils/setId\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { HvButton } from \"@core/components/Button\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { hexToRgbA } from \"@core/utils/hexToRgbA\";\n\nimport { staticClasses, useClasses } from \"./Drawer.styles\";\n\nexport { staticClasses as drawerClasses };\n\nexport type HvDrawerClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDrawerProps\n  extends MuiDrawerProps,\n    Omit<MuiDrawerProps, \"classes\">,\n    HvBaseProps<HTMLDivElement> {\n  /**\n   * Class names to be applied.\n   */\n  className?: string;\n  /**\n   * Id to be applied to the root node.\n   */\n  id?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes?: HvDrawerClasses;\n  /**\n   * Components of the Drawer.\n   */\n  children?: React.ReactNode;\n  /**\n   * Current state of the Drawer.\n   */\n  open?: boolean;\n  /**\n   * Function executed on close.\n   * Extended from Modal from material-ui\n   *\n   */\n  onClose?: (\n    event: React.SyntheticEvent,\n    reason?: \"escapeKeyDown\" | \"backdropClick\"\n  ) => void;\n  /**\n   * The side the drawer opens from.\n   */\n  anchor?: \"left\" | \"top\" | \"right\" | \"bottom\";\n  /**\n   * Title for the button close.\n   */\n  buttonTitle?: string;\n  /**\n   * Show backdrop when drawer ix open.\n   */\n  showBackdrop?: boolean;\n  /**\n   * Prevent closing the dialog when clicking on the backdrop.\n   */\n  disableBackdropClick?: boolean;\n  /** @ignore */\n  ref?: MuiDrawerProps[\"ref\"];\n  /** @ignore */\n  component?: MuiDrawerProps[\"component\"];\n}\n\n/**\n * The Drawer component provides a foundation to create a sliding pane.\n * It only provides the pane with a close button, the rest of the\n * content can be customized.\n */\nexport const HvDrawer = (props: HvDrawerProps) => {\n  const {\n    className,\n    classes: classesProp,\n    id,\n    children,\n    open,\n    onClose,\n    anchor = \"right\",\n    buttonTitle = \"Close\",\n    showBackdrop = true,\n    disableBackdropClick = false,\n    ...others\n  } = useDefaultProps(\"HvDrawer\", props);\n\n  const { classes, cx, css } = useClasses(classesProp);\n  const { colors } = useTheme();\n\n  const closeButtonDisplay = () => <Close role=\"none\" />;\n\n  const CloseButtonTooltipWrapper = buttonTitle\n    ? withTooltip(closeButtonDisplay, buttonTitle, \"top\")\n    : closeButtonDisplay;\n\n  return (\n    <>\n      <MuiDrawer\n        className={cx(classes.root, className)}\n        id={id}\n        anchor={anchor}\n        open={open}\n        PaperProps={{\n          classes: {\n            root: classes.paper,\n          },\n        }}\n        onClose={onClose}\n        {...others}\n      >\n        <HvButton\n          id={setId(id, \"close\")}\n          className={classes.closeButton}\n          variant=\"secondaryGhost\"\n          onClick={onClose}\n          aria-label={buttonTitle}\n        >\n          <CloseButtonTooltipWrapper />\n        </HvButton>\n        {children}\n      </MuiDrawer>\n      {showBackdrop && (\n        <MuiBackdrop\n          open={!!open}\n          onClick={(event: React.MouseEvent<HTMLElement, MouseEvent>) => {\n            if (disableBackdropClick) return;\n            onClose?.(event, \"backdropClick\");\n          }}\n          className={cx(\n            css({\n              background: hexToRgbA(colors?.atmo4 || theme.colors.atmo4),\n            }),\n            classes.background\n          )}\n        />\n      )}\n    </>\n  );\n};\n"],"names":["HvDrawer","props","className","classes","classesProp","id","children","open","onClose","anchor","buttonTitle","showBackdrop","disableBackdropClick","others","useDefaultProps","cx","css","useClasses","colors","useTheme","closeButtonDisplay","CloseButtonTooltipWrapper","withTooltip","MuiDrawer","root","paper","setId","closeButton","MuiBackdrop","event","background","hexToRgbA","atmo4","theme"],"mappings":";;;;;;;;;;;;AAsFaA,MAAAA,WAAWA,CAACC,UAAyB;AAC1C,QAAA;AAAA,IACJC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,SAAS;AAAA,IACTC,cAAc;AAAA,IACdC,eAAe;AAAA,IACfC,uBAAuB;AAAA,IACvB,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,YAAYb,KAAK;AAE/B,QAAA;AAAA,IAAEE;AAAAA,IAASY;AAAAA,IAAIC;AAAAA,EAAAA,IAAQC,WAAWb,WAAW;AAC7C,QAAA;AAAA,IAAEc;AAAAA,MAAWC,SAAS;AAE5B,QAAMC,qBAAqBA,MAAO,oBAAA,OAAA,EAAM,MAAK,OAAS,CAAA;AAEtD,QAAMC,4BAA4BX,cAC9BY,YAAYF,oBAAoBV,aAAa,KAAK,IAClDU;AAEJ,SAEI,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAC,qBAAAG,QAAA,EACC,WAAWR,GAAGZ,QAAQqB,MAAMtB,SAAS,GACrC,IACA,QACA,MACA,YAAY;AAAA,MACVC,SAAS;AAAA,QACPqB,MAAMrB,QAAQsB;AAAAA,MAChB;AAAA,IAAA,GAEF,SACIZ,GAAAA,QAEJ,UAAA;AAAA,MAAA,oBAAC,YACC,IAAIa,MAAMrB,IAAI,OAAO,GACrB,WAAWF,QAAQwB,aACnB,SAAQ,kBACR,SAASnB,SACT,cAAYE,aAEZ,UAAA,oBAAC,4BAAyB,CAAA,GAC5B;AAAA,MACCJ;AAAAA,IAAAA,GACH;AAAA,IACCK,oCACEiB,UACC,EAAA,MAAM,CAAC,CAACrB,MACR,SAAS,CAACsB,UAAqD;AACzDjB,UAAAA;AAAsB;AAC1BJ,gBAAUqB,OAAO,eAAe;AAAA,IAAA,GAElC,WAAWd,GACTC,IAAI;AAAA,MACFc,YAAYC,UAAUb,QAAQc,SAASC,MAAMf,OAAOc,KAAK;AAAA,IAAA,CAC1D,GACD7B,QAAQ2B,UACV,GAEH;AAAA,EACH,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"Drawer.js","sources":["../../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["import {\n  Drawer as MuiDrawer,\n  DrawerProps as MuiDrawerProps,\n  Backdrop as MuiBackdrop,\n} from \"@mui/material\";\n\nimport { Close } from \"@hitachivantara/uikit-react-icons\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { IconButton } from \"@core/utils/IconButton\";\nimport { setId } from \"@core/utils/setId\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { hexToRgbA } from \"@core/utils/hexToRgbA\";\n\nimport { staticClasses, useClasses } from \"./Drawer.styles\";\n\nexport { staticClasses as drawerClasses };\n\nexport type HvDrawerClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDrawerProps extends Omit<MuiDrawerProps, \"classes\"> {\n  /**\n   * Class names to be applied.\n   */\n  className?: string;\n  /**\n   * Id to be applied to the root node.\n   */\n  id?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes?: HvDrawerClasses;\n  /**\n   * Components of the Drawer.\n   */\n  children?: React.ReactNode;\n  /**\n   * Current state of the Drawer.\n   */\n  open?: boolean;\n  /**\n   * Function executed on close.\n   * Extended from Modal from material-ui\n   *\n   */\n  onClose?: (\n    event: React.SyntheticEvent,\n    reason?: \"escapeKeyDown\" | \"backdropClick\"\n  ) => void;\n  /**\n   * The side the drawer opens from.\n   */\n  anchor?: \"left\" | \"top\" | \"right\" | \"bottom\";\n  /**\n   * Title for the button close.\n   */\n  buttonTitle?: string;\n  /**\n   * Show backdrop when drawer ix open.\n   */\n  showBackdrop?: boolean;\n  /**\n   * Prevent closing the dialog when clicking on the backdrop.\n   */\n  disableBackdropClick?: boolean;\n  /** @ignore */\n  ref?: MuiDrawerProps[\"ref\"];\n  /** @ignore */\n  component?: MuiDrawerProps[\"component\"];\n}\n\n/**\n * The Drawer component provides a foundation to create a sliding pane.\n * It only provides the pane with a close button, the rest of the\n * content can be customized.\n */\nexport const HvDrawer = (props: HvDrawerProps) => {\n  const {\n    className,\n    classes: classesProp,\n    id,\n    children,\n    open,\n    onClose,\n    anchor = \"right\",\n    buttonTitle = \"Close\",\n    showBackdrop = true,\n    disableBackdropClick = false,\n    ...others\n  } = useDefaultProps(\"HvDrawer\", props);\n\n  const { classes, cx, css } = useClasses(classesProp);\n  const { colors } = useTheme();\n\n  return (\n    <>\n      <MuiDrawer\n        className={cx(classes.root, className)}\n        id={id}\n        anchor={anchor}\n        open={open}\n        PaperProps={{\n          classes: {\n            root: classes.paper,\n          },\n        }}\n        onClose={onClose}\n        {...others}\n      >\n        <IconButton\n          id={setId(id, \"close\")}\n          className={classes.closeButton}\n          variant=\"secondaryGhost\"\n          onClick={onClose}\n          title={buttonTitle}\n        >\n          <Close role=\"none\" />\n        </IconButton>\n        {children}\n      </MuiDrawer>\n      {showBackdrop && (\n        <MuiBackdrop\n          open={!!open}\n          onClick={(event: React.MouseEvent<HTMLElement, MouseEvent>) => {\n            if (disableBackdropClick) return;\n            onClose?.(event, \"backdropClick\");\n          }}\n          className={cx(\n            css({\n              background: hexToRgbA(colors?.atmo4 || theme.colors.atmo4),\n            }),\n            classes.background\n          )}\n        />\n      )}\n    </>\n  );\n};\n"],"names":["HvDrawer","props","className","classes","classesProp","id","children","open","onClose","anchor","buttonTitle","showBackdrop","disableBackdropClick","others","useDefaultProps","cx","css","useClasses","colors","useTheme","MuiDrawer","root","paper","setId","closeButton","MuiBackdrop","event","background","hexToRgbA","atmo4","theme"],"mappings":";;;;;;;;;;;AAiFaA,MAAAA,WAAWA,CAACC,UAAyB;AAC1C,QAAA;AAAA,IACJC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,SAAS;AAAA,IACTC,cAAc;AAAA,IACdC,eAAe;AAAA,IACfC,uBAAuB;AAAA,IACvB,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,YAAYb,KAAK;AAE/B,QAAA;AAAA,IAAEE;AAAAA,IAASY;AAAAA,IAAIC;AAAAA,EAAAA,IAAQC,WAAWb,WAAW;AAC7C,QAAA;AAAA,IAAEc;AAAAA,MAAWC,SAAS;AAE5B,SAEI,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAC,qBAAAC,QAAA,EACC,WAAWL,GAAGZ,QAAQkB,MAAMnB,SAAS,GACrC,IACA,QACA,MACA,YAAY;AAAA,MACVC,SAAS;AAAA,QACPkB,MAAMlB,QAAQmB;AAAAA,MAChB;AAAA,IAAA,GAEF,SACIT,GAAAA,QAEJ,UAAA;AAAA,MAAA,oBAAC,cACC,IAAIU,MAAMlB,IAAI,OAAO,GACrB,WAAWF,QAAQqB,aACnB,SAAQ,kBACR,SAAShB,SACT,OAAOE,aAEP,8BAAC,OAAM,EAAA,MAAK,QAAM,EACpB,CAAA;AAAA,MACCJ;AAAAA,IAAAA,GACH;AAAA,IACCK,oCACEc,UACC,EAAA,MAAM,CAAC,CAAClB,MACR,SAAS,CAACmB,UAAqD;AACzDd,UAAAA;AAAsB;AAC1BJ,gBAAUkB,OAAO,eAAe;AAAA,IAAA,GAElC,WAAWX,GACTC,IAAI;AAAA,MACFW,YAAYC,UAAUV,QAAQW,SAASC,MAAMZ,OAAOW,KAAK;AAAA,IAAA,CAC1D,GACD1B,QAAQwB,UACV,GAEH;AAAA,EACH,EAAA,CAAA;AAEJ;"}

package/dist/esm/components/Drawer/Drawer.styles.js

@@ -13,8 +13,6 @@ const {
   },
   background: {},
   closeButton: {
-    padding: 0,
-    minWidth: "inherit",
     position: "absolute",
     top: theme.spacing("sm"),
     right: theme.spacing("sm")

package/dist/esm/components/Drawer/Drawer.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.styles.js","sources":["../../../../src/components/Drawer/Drawer.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDrawer\", {\n  root: {},\n  paper: {\n    backgroundColor: theme.colors.atmo1,\n    padding: 0,\n    overflow: \"auto\",\n    boxShadow: theme.colors.shadow,\n  },\n  background: {},\n  closeButton: {\n    padding: 0,\n    minWidth: \"inherit\",\n    position: \"absolute\",\n    top: theme.spacing(\"sm\"),\n    right: theme.spacing(\"sm\"),\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","paper","backgroundColor","theme","colors","atmo1","padding","overflow","boxShadow","shadow","background","closeButton","minWidth","position","top","spacing","right"],"mappings":";;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,YAAY;AAAA,EACrEC,MAAM,CAAC;AAAA,EACPC,OAAO;AAAA,IACLC,iBAAiBC,MAAMC,OAAOC;AAAAA,IAC9BC,SAAS;AAAA,IACTC,UAAU;AAAA,IACVC,WAAWL,MAAMC,OAAOK;AAAAA,EAC1B;AAAA,EACAC,YAAY,CAAC;AAAA,EACbC,aAAa;AAAA,IACXL,SAAS;AAAA,IACTM,UAAU;AAAA,IACVC,UAAU;AAAA,IACVC,KAAKX,MAAMY,QAAQ,IAAI;AAAA,IACvBC,OAAOb,MAAMY,QAAQ,IAAI;AAAA,EAC3B;AACF,CAAC;"}
+{"version":3,"file":"Drawer.styles.js","sources":["../../../../src/components/Drawer/Drawer.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDrawer\", {\n  root: {},\n  paper: {\n    backgroundColor: theme.colors.atmo1,\n    padding: 0,\n    overflow: \"auto\",\n    boxShadow: theme.colors.shadow,\n  },\n  background: {},\n  closeButton: {\n    position: \"absolute\",\n    top: theme.spacing(\"sm\"),\n    right: theme.spacing(\"sm\"),\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","paper","backgroundColor","theme","colors","atmo1","padding","overflow","boxShadow","shadow","background","closeButton","position","top","spacing","right"],"mappings":";;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,YAAY;AAAA,EACrEC,MAAM,CAAC;AAAA,EACPC,OAAO;AAAA,IACLC,iBAAiBC,MAAMC,OAAOC;AAAAA,IAC9BC,SAAS;AAAA,IACTC,UAAU;AAAA,IACVC,WAAWL,MAAMC,OAAOK;AAAAA,EAC1B;AAAA,EACAC,YAAY,CAAC;AAAA,EACbC,aAAa;AAAA,IACXC,UAAU;AAAA,IACVC,KAAKV,MAAMW,QAAQ,IAAI;AAAA,IACvBC,OAAOZ,MAAMW,QAAQ,IAAI;AAAA,EAC3B;AACF,CAAC;"}

package/dist/esm/components/Grid/Grid.js.map

@@ -1 +1 @@
-{"version":3,"file":"Grid.js","sources":["../../../../src/components/Grid/Grid.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { Grid as MuiGrid, GridProps as MuiGridProps } from \"@mui/material\";\n\nimport isString from \"lodash/isString\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useDefaultProps, useWidth } from \"@core/hooks\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Grid.styles\";\n\nexport { staticClasses as gridClasses };\n\nexport type HvGridClasses = ExtractNames<typeof useClasses>;\n\nconst BREAKPOINT_GUTTERS = {\n  xs: 2,\n  sm: 2,\n  md: 4,\n  lg: 4,\n  xl: 4,\n};\n\nconst BREAKPOINT_COLUMNS = {\n  xs: 4,\n  sm: 8,\n  md: 12,\n  lg: 12,\n  xl: 12,\n};\n\nexport type HvGridDirection =\n  | \"row\"\n  | \"row-reverse\"\n  | \"column\"\n  | \"column-reverse\";\n\nexport type HvGridSpacing =\n  | \"xs\"\n  | \"sm\"\n  | \"md\"\n  | \"lg\"\n  | \"xl\"\n  | \"auto\"\n  | 1\n  | 2\n  | 3\n  | 4\n  | 5\n  | 6\n  | 7\n  | 8\n  | 9\n  | 10;\n\nexport interface HvGridProps\n  extends Omit<MuiGridProps, \"classes\" | \"columns\">,\n    HvBaseProps<HTMLDivElement, \"color\"> {\n  /**\n   * If `true`, the component will have the flex *container* behavior.\n   * You should be wrapping *items* with a *container*.\n   */\n  container?: boolean;\n  /**\n   * If `true`, the component will have the flex *item* behavior.\n   * You should be wrapping *items* with a *container*.\n   */\n  item?: boolean;\n  /**\n   * Defines the space between the type item component. It can only be used on a type container component.\n   * Based in the 8x factor defined in the theme, it allows the definition of this factor based on the factor\n   * (number between 0 and 10), breakpoint or auto.\n   */\n  spacing?: HvGridSpacing | number;\n  /**\n   * Defines the vertical space between the type item component. It can only be used on a type container component.\n   * Based in the 8x factor defined in the theme, it allows the definition of this factor based on the factor\n   * (number between 0 and 10), breakpoint or auto.\n   * It overrides the value of the spacing prop.\n   */\n  rowSpacing?: HvGridSpacing | number;\n  /**\n   * Defines the horizontal space between the type item component. It can only be used on a type container component.\n   * Based in the 8x factor defined in the theme, it allows the definition of this factor based on the factor\n   * (number between 0 and 10), breakpoint or auto.\n   * It overrides the value of the spacing prop.\n   */\n  columnSpacing?: HvGridSpacing | number;\n  /**\n   * The number of columns.\n   * Defaults to a 12-column grid.\n   * The value \"auto\" implements the Design System directives in terms of variable number of columns.\n   * @default 12\n   */\n  columns?: \"auto\" | MuiGridProps[\"columns\"];\n  /**\n   * Defines the `flex-direction` style property.\n   * It is applied for all screen sizes.\n   */\n  direction?: HvGridDirection;\n  /**\n   * Defines the `justify-content` style property.\n   * It is applied for all screen sizes.\n   */\n  justify?:\n    | \"flex-start\"\n    | \"center\"\n    | \"flex-end\"\n    | \"space-between\"\n    | \"space-around\"\n    | \"space-evenly\";\n  /**\n   * Defines the number of grids the component is going to use.\n   * It's applied for all the screen sizes with the lowest priority.\n   */\n  xs?: number | boolean;\n  /**\n   * Defines the number of grids the component is going to use.\n   * It's applied for the `sm` breakpoint and wider screens if not overridden.\n   */\n  sm?: number | boolean;\n  /**\n   * Defines the number of grids the component is going to use.\n   * It's applied for the `md` breakpoint and wider screens if not overridden.\n   */\n  md?: number | boolean;\n  /**\n   * Defines the number of grids the component is going to use.\n   * It's applied for the `lg` breakpoint and wider screens if not overridden.\n   */\n  lg?: number | boolean;\n  /**\n   * Defines the number of grids the component is going to use.\n   * It's applied for the `xl` breakpoint and wider screens.\n   */\n  xl?: number | boolean;\n  /**\n   * Defines the `flex-wrap` style property.\n   * It's applied for all screen sizes.\n   */\n  wrap?: \"nowrap\" | \"wrap\" | \"wrap-reverse\";\n  /**\n   * If `true`, it sets `min-width: 0` on the item.\n   * Refer to the limitations section of the documentation to better understand the use case.\n   */\n  zeroMinWidth?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvGridClasses;\n}\n\nfunction getGridSpacing(spacing: HvGridProps[\"spacing\"]) {\n  let gridSpacing: MuiGridProps[\"spacing\"];\n\n  if (isString(spacing)) {\n    if (spacing === \"auto\") {\n      gridSpacing = BREAKPOINT_GUTTERS;\n    } else {\n      gridSpacing = BREAKPOINT_GUTTERS[spacing];\n    }\n  } else if (typeof spacing === \"object\") {\n    gridSpacing = Object.keys(spacing).reduce(\n      (acc, breakpoint) => ({\n        ...acc,\n        [breakpoint]:\n          BREAKPOINT_GUTTERS[spacing[breakpoint]] ?? spacing[breakpoint],\n      }),\n      {}\n    );\n  } else if (spacing === 0) {\n    gridSpacing = { xs: 0 };\n  } else {\n    gridSpacing = spacing;\n  }\n\n  return gridSpacing;\n}\n\nfunction getNumberOfColumns(columns: HvGridProps[\"columns\"]) {\n  let numberOfColumns: MuiGridProps[\"columns\"];\n\n  if (columns === \"auto\") {\n    numberOfColumns = BREAKPOINT_COLUMNS;\n  } else {\n    numberOfColumns = columns;\n  }\n\n  return numberOfColumns;\n}\n\nfunction getContainerProps(\n  spacing: HvGridProps[\"spacing\"],\n  rowSpacing: HvGridProps[\"rowSpacing\"],\n  columnSpacing: HvGridProps[\"columnSpacing\"],\n  columns: HvGridProps[\"columns\"]\n) {\n  const containerProps: Pick<\n    MuiGridProps,\n    \"container\" | \"spacing\" | \"rowSpacing\" | \"columnSpacing\" | \"columns\"\n  > = { container: true };\n\n  if (spacing != null) {\n    containerProps.spacing = getGridSpacing(spacing);\n  }\n  if (rowSpacing != null) {\n    containerProps.rowSpacing = getGridSpacing(rowSpacing);\n  }\n  if (columnSpacing != null) {\n    containerProps.columnSpacing = getGridSpacing(columnSpacing);\n  }\n  if (columns != null) {\n    containerProps.columns = getNumberOfColumns(columns);\n  }\n\n  return containerProps;\n}\n\nconst WidthGrid = forwardRef<HTMLDivElement, HvGridProps>((props, ref) => {\n  const { container, spacing, rowSpacing, columnSpacing, columns, ...others } =\n    props;\n\n  const width = useWidth();\n\n  const containerProps = container\n    ? getContainerProps(\n        spacing === \"auto\" ? width : spacing,\n        rowSpacing === \"auto\" ? width : rowSpacing,\n        columnSpacing === \"auto\" ? width : columnSpacing,\n        columns\n      )\n    : {};\n\n  return <MuiGrid ref={ref} {...containerProps} {...others} />;\n});\n\n/**\n * The grid creates visual consistency between layouts while allowing flexibility\n * across a wide variety of designs. This component is based on a 12-column grid layout.\n *\n * It's based on the [Material UI Grid](https://mui.com/material-ui/react-grid/).\n *\n * The definitions were set following the Design System directives:\n *\n * | Breakpoint | Width (in px) | Gutters (in px) | Number of columns |\n * | ---------- | ------------- | --------------- | ----------------- |\n * | xs         | [0-600[       | 16              | 4                 |\n * | sm         | [600-960[     | 16              | 8                 |\n * | md         | [960-1270[     | 32              | 12                |\n * | lg         | [1270-1920[    | 32              | 12                |\n * | xl         | [1920-...[    | 32              | 12                |\n *\n * However, the number of columns is set to 12 for all breakpoints, as it serves most\n * of the use cases and simplifies the implementation.\n * To opt-in to the Design System directives, you can set the `columns` prop to `auto`.\n *\n * Also, the Design System specifications are omissive about the horizontal gutters.\n * The HvGrid sets them to the same value as the vertical gutters, depending on the breakpoint.\n * It can be overridden by setting the `rowSpacing` prop.\n */\nexport const HvGrid = forwardRef<HTMLDivElement, HvGridProps>((props, ref) => {\n  const {\n    item,\n    container,\n    spacing = \"auto\",\n    rowSpacing,\n    columnSpacing,\n    columns,\n    classes: classesProp,\n    ...others\n  } = useDefaultProps(\"HvGrid\", props);\n\n  const { classes } = useClasses(classesProp);\n\n  // Fixes MUI error when using spacings as objects and the grid is an item and container\n  // When set to \"auto\", the spacing changes depending on the screen's breakpoint\n  // The condition avoids using useWidth and re-rendering the component unnecessarily\n  if (\n    container &&\n    item &&\n    (spacing === \"auto\" || rowSpacing === \"auto\" || columnSpacing === \"auto\")\n  ) {\n    return (\n      <WidthGrid\n        ref={ref}\n        classes={classes}\n        item={item}\n        container={container}\n        spacing={spacing}\n        rowSpacing={rowSpacing}\n        columnSpacing={columnSpacing}\n        columns={columns}\n        {...others}\n      />\n    );\n  }\n\n  const containerProps = container\n    ? getContainerProps(spacing, rowSpacing, columnSpacing, columns)\n    : {};\n\n  return (\n    <MuiGrid\n      ref={ref}\n      classes={classes}\n      item={item}\n      {...containerProps}\n      {...others}\n    />\n  );\n});\n"],"names":["BREAKPOINT_GUTTERS","xs","sm","md","lg","xl","BREAKPOINT_COLUMNS","getGridSpacing","spacing","gridSpacing","isString","Object","keys","reduce","acc","breakpoint","getNumberOfColumns","columns","numberOfColumns","getContainerProps","rowSpacing","columnSpacing","containerProps","container","WidthGrid","forwardRef","props","ref","others","width","useWidth","MuiGrid","HvGrid","item","classes","classesProp","useDefaultProps","useClasses"],"mappings":"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"}
+{"version":3,"file":"Grid.js","sources":["../../../../src/components/Grid/Grid.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { Grid as MuiGrid, GridProps as MuiGridProps } from \"@mui/material\";\n\nimport isString from \"lodash/isString\";\n\nimport { useDefaultProps, useWidth } from \"@core/hooks\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Grid.styles\";\n\nexport { staticClasses as gridClasses };\n\nexport type HvGridClasses = ExtractNames<typeof useClasses>;\n\nconst BREAKPOINT_GUTTERS = {\n  xs: 2,\n  sm: 2,\n  md: 4,\n  lg: 4,\n  xl: 4,\n};\n\nconst BREAKPOINT_COLUMNS = {\n  xs: 4,\n  sm: 8,\n  md: 12,\n  lg: 12,\n  xl: 12,\n};\n\nexport type HvGridDirection =\n  | \"row\"\n  | \"row-reverse\"\n  | \"column\"\n  | \"column-reverse\";\n\nexport type HvGridSpacing =\n  | \"xs\"\n  | \"sm\"\n  | \"md\"\n  | \"lg\"\n  | \"xl\"\n  | \"auto\"\n  | 1\n  | 2\n  | 3\n  | 4\n  | 5\n  | 6\n  | 7\n  | 8\n  | 9\n  | 10;\n\nexport interface HvGridProps extends Omit<MuiGridProps, \"classes\" | \"columns\"> {\n  /**\n   * If `true`, the component will have the flex *container* behavior.\n   * You should be wrapping *items* with a *container*.\n   */\n  container?: boolean;\n  /**\n   * If `true`, the component will have the flex *item* behavior.\n   * You should be wrapping *items* with a *container*.\n   */\n  item?: boolean;\n  /**\n   * Defines the space between the type item component. It can only be used on a type container component.\n   * Based in the 8x factor defined in the theme, it allows the definition of this factor based on the factor\n   * (number between 0 and 10), breakpoint or auto.\n   */\n  spacing?: HvGridSpacing | number;\n  /**\n   * Defines the vertical space between the type item component. It can only be used on a type container component.\n   * Based in the 8x factor defined in the theme, it allows the definition of this factor based on the factor\n   * (number between 0 and 10), breakpoint or auto.\n   * It overrides the value of the spacing prop.\n   */\n  rowSpacing?: HvGridSpacing | number;\n  /**\n   * Defines the horizontal space between the type item component. It can only be used on a type container component.\n   * Based in the 8x factor defined in the theme, it allows the definition of this factor based on the factor\n   * (number between 0 and 10), breakpoint or auto.\n   * It overrides the value of the spacing prop.\n   */\n  columnSpacing?: HvGridSpacing | number;\n  /**\n   * The number of columns.\n   * Defaults to a 12-column grid.\n   * The value \"auto\" implements the Design System directives in terms of variable number of columns.\n   * @default 12\n   */\n  columns?: \"auto\" | MuiGridProps[\"columns\"];\n  /**\n   * Defines the `flex-direction` style property.\n   * It is applied for all screen sizes.\n   */\n  direction?: HvGridDirection;\n  /**\n   * Defines the `justify-content` style property.\n   * It is applied for all screen sizes.\n   */\n  justify?:\n    | \"flex-start\"\n    | \"center\"\n    | \"flex-end\"\n    | \"space-between\"\n    | \"space-around\"\n    | \"space-evenly\";\n  /**\n   * Defines the number of grids the component is going to use.\n   * It's applied for all the screen sizes with the lowest priority.\n   */\n  xs?: number | boolean;\n  /**\n   * Defines the number of grids the component is going to use.\n   * It's applied for the `sm` breakpoint and wider screens if not overridden.\n   */\n  sm?: number | boolean;\n  /**\n   * Defines the number of grids the component is going to use.\n   * It's applied for the `md` breakpoint and wider screens if not overridden.\n   */\n  md?: number | boolean;\n  /**\n   * Defines the number of grids the component is going to use.\n   * It's applied for the `lg` breakpoint and wider screens if not overridden.\n   */\n  lg?: number | boolean;\n  /**\n   * Defines the number of grids the component is going to use.\n   * It's applied for the `xl` breakpoint and wider screens.\n   */\n  xl?: number | boolean;\n  /**\n   * Defines the `flex-wrap` style property.\n   * It's applied for all screen sizes.\n   */\n  wrap?: \"nowrap\" | \"wrap\" | \"wrap-reverse\";\n  /**\n   * If `true`, it sets `min-width: 0` on the item.\n   * Refer to the limitations section of the documentation to better understand the use case.\n   */\n  zeroMinWidth?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvGridClasses;\n}\n\nfunction getGridSpacing(spacing: HvGridProps[\"spacing\"]) {\n  let gridSpacing: MuiGridProps[\"spacing\"];\n\n  if (isString(spacing)) {\n    if (spacing === \"auto\") {\n      gridSpacing = BREAKPOINT_GUTTERS;\n    } else {\n      gridSpacing = BREAKPOINT_GUTTERS[spacing];\n    }\n  } else if (typeof spacing === \"object\") {\n    gridSpacing = Object.keys(spacing).reduce(\n      (acc, breakpoint) => ({\n        ...acc,\n        [breakpoint]:\n          BREAKPOINT_GUTTERS[spacing[breakpoint]] ?? spacing[breakpoint],\n      }),\n      {}\n    );\n  } else if (spacing === 0) {\n    gridSpacing = { xs: 0 };\n  } else {\n    gridSpacing = spacing;\n  }\n\n  return gridSpacing;\n}\n\nfunction getNumberOfColumns(columns: HvGridProps[\"columns\"]) {\n  let numberOfColumns: MuiGridProps[\"columns\"];\n\n  if (columns === \"auto\") {\n    numberOfColumns = BREAKPOINT_COLUMNS;\n  } else {\n    numberOfColumns = columns;\n  }\n\n  return numberOfColumns;\n}\n\nfunction getContainerProps(\n  spacing: HvGridProps[\"spacing\"],\n  rowSpacing: HvGridProps[\"rowSpacing\"],\n  columnSpacing: HvGridProps[\"columnSpacing\"],\n  columns: HvGridProps[\"columns\"]\n) {\n  const containerProps: Pick<\n    MuiGridProps,\n    \"container\" | \"spacing\" | \"rowSpacing\" | \"columnSpacing\" | \"columns\"\n  > = { container: true };\n\n  if (spacing != null) {\n    containerProps.spacing = getGridSpacing(spacing);\n  }\n  if (rowSpacing != null) {\n    containerProps.rowSpacing = getGridSpacing(rowSpacing);\n  }\n  if (columnSpacing != null) {\n    containerProps.columnSpacing = getGridSpacing(columnSpacing);\n  }\n  if (columns != null) {\n    containerProps.columns = getNumberOfColumns(columns);\n  }\n\n  return containerProps;\n}\n\nconst WidthGrid = forwardRef<HTMLDivElement, HvGridProps>((props, ref) => {\n  const { container, spacing, rowSpacing, columnSpacing, columns, ...others } =\n    props;\n\n  const width = useWidth();\n\n  const containerProps = container\n    ? getContainerProps(\n        spacing === \"auto\" ? width : spacing,\n        rowSpacing === \"auto\" ? width : rowSpacing,\n        columnSpacing === \"auto\" ? width : columnSpacing,\n        columns\n      )\n    : {};\n\n  return <MuiGrid ref={ref} {...containerProps} {...others} />;\n});\n\n/**\n * The grid creates visual consistency between layouts while allowing flexibility\n * across a wide variety of designs. This component is based on a 12-column grid layout.\n *\n * It's based on the [Material UI Grid](https://mui.com/material-ui/react-grid/).\n *\n * The definitions were set following the Design System directives:\n *\n * | Breakpoint | Width (in px) | Gutters (in px) | Number of columns |\n * | ---------- | ------------- | --------------- | ----------------- |\n * | xs         | [0-600[       | 16              | 4                 |\n * | sm         | [600-960[     | 16              | 8                 |\n * | md         | [960-1270[     | 32              | 12                |\n * | lg         | [1270-1920[    | 32              | 12                |\n * | xl         | [1920-...[    | 32              | 12                |\n *\n * However, the number of columns is set to 12 for all breakpoints, as it serves most\n * of the use cases and simplifies the implementation.\n * To opt-in to the Design System directives, you can set the `columns` prop to `auto`.\n *\n * Also, the Design System specifications are omissive about the horizontal gutters.\n * The HvGrid sets them to the same value as the vertical gutters, depending on the breakpoint.\n * It can be overridden by setting the `rowSpacing` prop.\n */\nexport const HvGrid = forwardRef<HTMLDivElement, HvGridProps>((props, ref) => {\n  const {\n    item,\n    container,\n    spacing = \"auto\",\n    rowSpacing,\n    columnSpacing,\n    columns,\n    classes: classesProp,\n    ...others\n  } = useDefaultProps(\"HvGrid\", props);\n\n  const { classes } = useClasses(classesProp);\n\n  // Fixes MUI error when using spacings as objects and the grid is an item and container\n  // When set to \"auto\", the spacing changes depending on the screen's breakpoint\n  // The condition avoids using useWidth and re-rendering the component unnecessarily\n  if (\n    container &&\n    item &&\n    (spacing === \"auto\" || rowSpacing === \"auto\" || columnSpacing === \"auto\")\n  ) {\n    return (\n      <WidthGrid\n        ref={ref}\n        classes={classes}\n        item={item}\n        container={container}\n        spacing={spacing}\n        rowSpacing={rowSpacing}\n        columnSpacing={columnSpacing}\n        columns={columns}\n        {...others}\n      />\n    );\n  }\n\n  const containerProps = container\n    ? getContainerProps(spacing, rowSpacing, columnSpacing, columns)\n    : {};\n\n  return (\n    <MuiGrid\n      ref={ref}\n      classes={classes}\n      item={item}\n      {...containerProps}\n      {...others}\n    />\n  );\n});\n"],"names":["BREAKPOINT_GUTTERS","xs","sm","md","lg","xl","BREAKPOINT_COLUMNS","getGridSpacing","spacing","gridSpacing","isString","Object","keys","reduce","acc","breakpoint","getNumberOfColumns","columns","numberOfColumns","getContainerProps","rowSpacing","columnSpacing","containerProps","container","WidthGrid","forwardRef","props","ref","others","width","useWidth","MuiGrid","HvGrid","item","classes","classesProp","useDefaultProps","useClasses"],"mappings":";;;;;;;;AAcA,MAAMA,qBAAqB;AAAA,EACzBC,IAAI;AAAA,EACJC,IAAI;AAAA,EACJC,IAAI;AAAA,EACJC,IAAI;AAAA,EACJC,IAAI;AACN;AAEA,MAAMC,qBAAqB;AAAA,EACzBL,IAAI;AAAA,EACJC,IAAI;AAAA,EACJC,IAAI;AAAA,EACJC,IAAI;AAAA,EACJC,IAAI;AACN;AAuHA,SAASE,eAAeC,SAAiC;AACnDC,MAAAA;AAEAC,MAAAA,SAASF,OAAO,GAAG;AACrB,QAAIA,YAAY,QAAQ;AACRR,oBAAAA;AAAAA,IAAAA,OACT;AACLS,oBAAcT,mBAAmBQ,OAAO;AAAA,IAC1C;AAAA,EAAA,WACS,OAAOA,YAAY,UAAU;AACtCC,kBAAcE,OAAOC,KAAKJ,OAAO,EAAEK,OACjC,CAACC,KAAKC,gBAAgB;AAAA,MACpB,GAAGD;AAAAA,MACH,CAACC,UAAU,GACTf,mBAAmBQ,QAAQO,UAAU,CAAC,KAAKP,QAAQO,UAAU;AAAA,IAAA,IAEjE,CACF,CAAA;AAAA,EAAA,WACSP,YAAY,GAAG;AACV,kBAAA;AAAA,MAAEP,IAAI;AAAA,IAAA;AAAA,EAAE,OACjB;AACSO,kBAAAA;AAAAA,EAChB;AAEOC,SAAAA;AACT;AAEA,SAASO,mBAAmBC,SAAiC;AACvDC,MAAAA;AAEJ,MAAID,YAAY,QAAQ;AACJX,sBAAAA;AAAAA,EAAAA,OACb;AACaW,sBAAAA;AAAAA,EACpB;AAEOC,SAAAA;AACT;AAEA,SAASC,kBACPX,SACAY,YACAC,eACAJ,SACA;AACA,QAAMK,iBAGF;AAAA,IAAEC,WAAW;AAAA,EAAA;AAEjB,MAAIf,WAAW,MAAM;AACJA,mBAAAA,UAAUD,eAAeC,OAAO;AAAA,EACjD;AACA,MAAIY,cAAc,MAAM;AACPA,mBAAAA,aAAab,eAAea,UAAU;AAAA,EACvD;AACA,MAAIC,iBAAiB,MAAM;AACVA,mBAAAA,gBAAgBd,eAAec,aAAa;AAAA,EAC7D;AACA,MAAIJ,WAAW,MAAM;AACJA,mBAAAA,UAAUD,mBAAmBC,OAAO;AAAA,EACrD;AAEOK,SAAAA;AACT;AAEA,MAAME,YAAYC,WAAwC,CAACC,OAAOC,QAAQ;AAClE,QAAA;AAAA,IAAEJ;AAAAA,IAAWf;AAAAA,IAASY;AAAAA,IAAYC;AAAAA,IAAeJ;AAAAA,IAAS,GAAGW;AAAAA,EACjEF,IAAAA;AAEF,QAAMG,QAAQC;AAEd,QAAMR,iBAAiBC,YACnBJ,kBACEX,YAAY,SAASqB,QAAQrB,SAC7BY,eAAe,SAASS,QAAQT,YAChCC,kBAAkB,SAASQ,QAAQR,eACnCJ,OACF,IACA;AAEJ,6BAAQc,MAAQ,EAAA,KAAU,GAAIT,gBAAoBM,GAAAA,OAAU,CAAA;AAC9D,CAAC;AA0BM,MAAMI,SAASP,WAAwC,CAACC,OAAOC,QAAQ;AACtE,QAAA;AAAA,IACJM;AAAAA,IACAV;AAAAA,IACAf,UAAU;AAAA,IACVY;AAAAA,IACAC;AAAAA,IACAJ;AAAAA,IACAiB,SAASC;AAAAA,IACT,GAAGP;AAAAA,EAAAA,IACDQ,gBAAgB,UAAUV,KAAK;AAE7B,QAAA;AAAA,IAAEQ;AAAAA,EAAAA,IAAYG,WAAWF,WAAW;AAK1C,MACEZ,aACAU,SACCzB,YAAY,UAAUY,eAAe,UAAUC,kBAAkB,SAClE;AAEE,WAAA,oBAAC,WACC,EAAA,KACA,SACA,MACA,WACA,SACA,YACA,eACA,SACA,GAAIO,OACJ,CAAA;AAAA,EAEN;AAEMN,QAAAA,iBAAiBC,YACnBJ,kBAAkBX,SAASY,YAAYC,eAAeJ,OAAO,IAC7D;AAGF,SAAA,oBAACc,QACC,KACA,SACA,MACA,GAAIT,gBACJ,GAAIM,OACJ,CAAA;AAEN,CAAC;"}

package/dist/esm/components/ListContainer/ListItem/ListItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.js","sources":["../../../../../src/components/ListContainer/ListItem/ListItem.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useContext, useMemo } from \"react\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { HvFocus } from \"@core/components/Focus\";\n\nimport HvListContext from \"../ListContext\";\nimport { staticClasses, useClasses } from \"./ListItem.styles\";\n\nexport { staticClasses as listItemClasses };\n\nexport type HvListItemClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvListItemProps extends HvBaseProps<HTMLLIElement> {\n  /**\n   * Overrides the implicit list item role.\n   */\n  role?: HvBaseProps<HTMLLIElement>[\"role\"];\n  /** Indicates if the list item is selected. */\n  selected?: boolean;\n  /** If true, the list item will be disabled. */\n  disabled?: boolean;\n  /**\n   * If the list item is focusable and reacts to mouse over events.\n   * Defaults to true if the container list is interactive, false otherwise.\n   */\n  interactive?: boolean;\n  /**\n   * If `true` compacts the vertical spacing intended to separate the list items.\n   * Defaults to the value set in container list.\n   */\n  condensed?: boolean;\n  /**\n   * If `true`, the left and right padding is removed.\n   * Defaults to the value set in container list.\n   */\n  disableGutters?: boolean;\n  /**\n   * Element placed before the children.\n   * Also removes the left padding (gutter).\n   *\n   * Some modifications are applied, assuming that it is either an icon (changing the color when the item is disabled)\n   * or a selector (preventing the double focus ring, propagating the checked and disabled states and wiring the onChange event).\n   * If unwanted, the element should be placed directly as a child.\n   */\n  startAdornment?: React.ReactNode;\n  /**\n   * Element placed after the children and aligned next to the margin.\n   * Also removes the right padding (gutter).\n   *\n   * Some modifications are applied, assuming that it is an icon (changing the color when the item is disabled).\n   * If unwanted, the element should be placed directly as a child.\n   */\n  endAdornment?: React.ReactNode;\n  /** The value to be set on the 'li' element */\n  value?: any;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvListItemClasses;\n}\n\nconst applyClassNameAndStateToElement = (\n  element,\n  selected,\n  disabled,\n  onClick,\n  className\n) => {\n  if (element != null) {\n    return React.cloneElement(element, {\n      className,\n      checked: !!selected,\n      disabled,\n      onChange: (evt) => onClick?.(evt),\n    });\n  }\n\n  return null;\n};\n\nconst applyClassNameToElement = (element, className) => {\n  if (element != null) {\n    return React.cloneElement(element, {\n      className,\n    });\n  }\n\n  return null;\n};\n\n/**\n * ListItem description/documentation paragraph\n */\nexport const HvListItem = forwardRef<any, HvListItemProps>((props, ref) => {\n  const {\n    id,\n    classes: classesProp,\n    className,\n    role,\n    value,\n    selected,\n    disabled,\n    interactive: interactiveProp,\n    condensed: condensedProp,\n    disableGutters: disableGuttersProp,\n    startAdornment,\n    endAdornment,\n    onClick,\n    children,\n    tabIndex,\n    ...others\n  } = useDefaultProps(\"HvListItem\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const {\n    topContainerRef,\n    condensed: condensedContext,\n    disableGutters: disableGuttersContext,\n    interactive: interactiveContext,\n  } = useContext(HvListContext);\n\n  const condensed = condensedProp != null ? condensedProp : condensedContext;\n  const disableGutters =\n    disableGuttersProp != null ? disableGuttersProp : disableGuttersContext;\n  const interactive =\n    interactiveProp != null ? interactiveProp : interactiveContext;\n\n  const handleOnClick = useCallback(\n    (evt) => {\n      if (!disabled) {\n        onClick?.(evt);\n      }\n    },\n    [disabled, onClick]\n  );\n\n  const clonedStartAdornment = useMemo(\n    () =>\n      applyClassNameAndStateToElement(\n        startAdornment,\n        selected,\n        disabled,\n        handleOnClick,\n        cx(\n          classes.startAdornment,\n          { [classes.disabled]: disabled },\n          React.isValidElement(startAdornment)\n            ? startAdornment.props.className\n            : undefined\n        )\n      ),\n    [\n      cx,\n      classes?.startAdornment,\n      classes?.disabled,\n      disabled,\n      handleOnClick,\n      selected,\n      startAdornment,\n    ]\n  );\n  const clonedEndAdornment = useMemo(\n    () =>\n      applyClassNameToElement(\n        endAdornment,\n        cx(\n          classes.endAdornment,\n          { [classes.disabled]: disabled },\n          React.isValidElement(endAdornment)\n            ? endAdornment.props.className\n            : undefined\n        )\n      ),\n    [cx, classes?.endAdornment, classes?.disabled, disabled, endAdornment]\n  );\n\n  const roleOptionAriaProps =\n    role === \"option\" || role === \"menuitem\"\n      ? {\n          \"aria-disabled\": disabled || undefined,\n          \"aria-selected\": selected,\n        }\n      : {};\n\n  const listItem = (\n    // For later: this should only have an onClick event if interactive and has the appropriate role.\n    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions\n    <li\n      id={id}\n      ref={ref}\n      role={role}\n      value={value}\n      className={cx(\n        classes.root,\n        {\n          [classes.gutters]: !disableGutters,\n          [classes.condensed]: condensed,\n          [classes.interactive]: interactive,\n          [classes.selected]: !!selected,\n          [classes.disabled]: !!disabled,\n          [classes.withStartAdornment]: startAdornment != null,\n          [classes.withEndAdornment]: endAdornment != null,\n        },\n        className\n      )}\n      onClick={handleOnClick}\n      onKeyDown={() => {}} // Needed because of jsx-a11yclick-events-have-key-events\n      {...roleOptionAriaProps}\n      {...others}\n    >\n      {clonedStartAdornment}\n      {children}\n      {clonedEndAdornment}\n    </li>\n  );\n\n  return interactive ? (\n    <HvFocus\n      rootRef={topContainerRef}\n      selected={selected}\n      disabledClass={disabled || undefined}\n      strategy={role === \"option\" ? \"listbox\" : \"menu\"}\n      classes={{ focus: classes.focus }}\n      configuration={{\n        tabIndex,\n      }}\n    >\n      {listItem}\n    </HvFocus>\n  ) : (\n    listItem\n  );\n});\n"],"names":["applyClassNameAndStateToElement","element","selected","disabled","onClick","className","React","cloneElement","checked","onChange","evt","applyClassNameToElement","HvListItem","forwardRef","props","ref","id","classes","classesProp","role","value","interactive","interactiveProp","condensed","condensedProp","disableGutters","disableGuttersProp","startAdornment","endAdornment","children","tabIndex","others","useDefaultProps","cx","useClasses","topContainerRef","condensedContext","disableGuttersContext","interactiveContext","useContext","HvListContext","handleOnClick","useCallback","clonedStartAdornment","useMemo","isValidElement","undefined","clonedEndAdornment","roleOptionAriaProps","listItem","root","gutters","withStartAdornment","withEndAdornment","focus"],"mappings":"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"}
+{"version":3,"file":"ListItem.js","sources":["../../../../../src/components/ListContainer/ListItem/ListItem.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useContext, useMemo } from \"react\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { HvFocus } from \"@core/components/Focus\";\n\nimport HvListContext from \"../ListContext\";\nimport { staticClasses, useClasses } from \"./ListItem.styles\";\n\nexport { staticClasses as listItemClasses };\n\nexport type HvListItemClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvListItemProps extends HvBaseProps<HTMLLIElement> {\n  /** Indicates if the list item is selected. */\n  selected?: boolean;\n  /** If true, the list item will be disabled. */\n  disabled?: boolean;\n  /**\n   * If the list item is focusable and reacts to mouse over events.\n   * Defaults to true if the container list is interactive, false otherwise.\n   */\n  interactive?: boolean;\n  /**\n   * If `true` compacts the vertical spacing intended to separate the list items.\n   * Defaults to the value set in container list.\n   */\n  condensed?: boolean;\n  /**\n   * If `true`, the left and right padding is removed.\n   * Defaults to the value set in container list.\n   */\n  disableGutters?: boolean;\n  /**\n   * Element placed before the children.\n   * Also removes the left padding (gutter).\n   *\n   * Some modifications are applied, assuming that it is either an icon (changing the color when the item is disabled)\n   * or a selector (preventing the double focus ring, propagating the checked and disabled states and wiring the onChange event).\n   * If unwanted, the element should be placed directly as a child.\n   */\n  startAdornment?: React.ReactNode;\n  /**\n   * Element placed after the children and aligned next to the margin.\n   * Also removes the right padding (gutter).\n   *\n   * Some modifications are applied, assuming that it is an icon (changing the color when the item is disabled).\n   * If unwanted, the element should be placed directly as a child.\n   */\n  endAdornment?: React.ReactNode;\n  /** The value to be set on the 'li' element */\n  value?: any;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvListItemClasses;\n}\n\nconst applyClassNameAndStateToElement = (\n  element,\n  selected,\n  disabled,\n  onClick,\n  className\n) => {\n  if (element != null) {\n    return React.cloneElement(element, {\n      className,\n      checked: !!selected,\n      disabled,\n      onChange: (evt) => onClick?.(evt),\n    });\n  }\n\n  return null;\n};\n\nconst applyClassNameToElement = (element, className) => {\n  if (element != null) {\n    return React.cloneElement(element, {\n      className,\n    });\n  }\n\n  return null;\n};\n\n/**\n * ListItem description/documentation paragraph\n */\nexport const HvListItem = forwardRef<any, HvListItemProps>((props, ref) => {\n  const {\n    id,\n    classes: classesProp,\n    className,\n    role,\n    value,\n    selected,\n    disabled,\n    interactive: interactiveProp,\n    condensed: condensedProp,\n    disableGutters: disableGuttersProp,\n    startAdornment,\n    endAdornment,\n    onClick,\n    children,\n    tabIndex,\n    ...others\n  } = useDefaultProps(\"HvListItem\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const {\n    topContainerRef,\n    condensed: condensedContext,\n    disableGutters: disableGuttersContext,\n    interactive: interactiveContext,\n  } = useContext(HvListContext);\n\n  const condensed = condensedProp != null ? condensedProp : condensedContext;\n  const disableGutters =\n    disableGuttersProp != null ? disableGuttersProp : disableGuttersContext;\n  const interactive =\n    interactiveProp != null ? interactiveProp : interactiveContext;\n\n  const handleOnClick = useCallback(\n    (evt) => {\n      if (!disabled) {\n        onClick?.(evt);\n      }\n    },\n    [disabled, onClick]\n  );\n\n  const clonedStartAdornment = useMemo(\n    () =>\n      applyClassNameAndStateToElement(\n        startAdornment,\n        selected,\n        disabled,\n        handleOnClick,\n        cx(\n          classes.startAdornment,\n          { [classes.disabled]: disabled },\n          React.isValidElement(startAdornment)\n            ? startAdornment.props.className\n            : undefined\n        )\n      ),\n    [\n      cx,\n      classes?.startAdornment,\n      classes?.disabled,\n      disabled,\n      handleOnClick,\n      selected,\n      startAdornment,\n    ]\n  );\n  const clonedEndAdornment = useMemo(\n    () =>\n      applyClassNameToElement(\n        endAdornment,\n        cx(\n          classes.endAdornment,\n          { [classes.disabled]: disabled },\n          React.isValidElement(endAdornment)\n            ? endAdornment.props.className\n            : undefined\n        )\n      ),\n    [cx, classes?.endAdornment, classes?.disabled, disabled, endAdornment]\n  );\n\n  const roleOptionAriaProps =\n    role === \"option\" || role === \"menuitem\"\n      ? {\n          \"aria-disabled\": disabled || undefined,\n          \"aria-selected\": selected,\n        }\n      : {};\n\n  const listItem = (\n    // For later: this should only have an onClick event if interactive and has the appropriate role.\n    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions\n    <li\n      id={id}\n      ref={ref}\n      role={role}\n      value={value}\n      className={cx(\n        classes.root,\n        {\n          [classes.gutters]: !disableGutters,\n          [classes.condensed]: condensed,\n          [classes.interactive]: interactive,\n          [classes.selected]: !!selected,\n          [classes.disabled]: !!disabled,\n          [classes.withStartAdornment]: startAdornment != null,\n          [classes.withEndAdornment]: endAdornment != null,\n        },\n        className\n      )}\n      onClick={handleOnClick}\n      onKeyDown={() => {}} // Needed because of jsx-a11yclick-events-have-key-events\n      {...roleOptionAriaProps}\n      {...others}\n    >\n      {clonedStartAdornment}\n      {children}\n      {clonedEndAdornment}\n    </li>\n  );\n\n  return interactive ? (\n    <HvFocus\n      rootRef={topContainerRef}\n      selected={selected}\n      disabledClass={disabled || undefined}\n      strategy={role === \"option\" ? \"listbox\" : \"menu\"}\n      classes={{ focus: classes.focus }}\n      configuration={{\n        tabIndex,\n      }}\n    >\n      {listItem}\n    </HvFocus>\n  ) : (\n    listItem\n  );\n});\n"],"names":["applyClassNameAndStateToElement","element","selected","disabled","onClick","className","React","cloneElement","checked","onChange","evt","applyClassNameToElement","HvListItem","forwardRef","props","ref","id","classes","classesProp","role","value","interactive","interactiveProp","condensed","condensedProp","disableGutters","disableGuttersProp","startAdornment","endAdornment","children","tabIndex","others","useDefaultProps","cx","useClasses","topContainerRef","condensedContext","disableGuttersContext","interactiveContext","useContext","HvListContext","handleOnClick","useCallback","clonedStartAdornment","useMemo","isValidElement","undefined","clonedEndAdornment","roleOptionAriaProps","listItem","root","gutters","withStartAdornment","withEndAdornment","focus"],"mappings":"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"}

package/dist/esm/components/Pagination/Pagination.js

@@ -5,12 +5,12 @@ import { Start, Backwards, Forwards, End } from "@hitachivantara/uikit-react-ico
 import { useDefaultProps } from "../../hooks/useDefaultProps.js";
 import { setId } from "../../utils/setId.js";
 import { isKey } from "../../utils/keyboardUtils.js";
+import { IconButton } from "../../utils/IconButton.js";
 import { useLabels } from "../../hooks/useLabels.js";
 import HvSelect, { Option } from "./Select.js";
 import { useClasses } from "./Pagination.styles.js";
 import { staticClasses } from "./Pagination.styles.js";
 import { usePageInput, setColor, getSafePage } from "./utils.js";
-import ButtonIconTooltip from "./ButtonIconTooltip.js";
 import { HvTypography } from "../Typography/Typography.js";
 import { HvInput } from "../Input/Input.js";
 const DEFAULT_LABELS = {
@@ -89,15 +89,15 @@ const HvPagination = (props) => {
       /* @__PURE__ */ jsx(Hidden, { xsDown: true, children: /* @__PURE__ */ jsx(HvTypography, { component: "span", className: classes.pageSizeTextContainer, children: labels?.pageSizeEntryName }) })
     ] }) }),
     /* @__PURE__ */ jsxs("div", { className: classes.pageNavigator, ...navigationProps, children: [
-      /* @__PURE__ */ jsx(ButtonIconTooltip, { id: setId(id, "firstPage-button"), "aria-label": labels?.firstPage, className: classes.iconContainer, disabled: !canPrevious, onClick: () => changePage(0), tooltip: labels?.paginationFirstPageTitle, children: /* @__PURE__ */ jsx(Start, { className: classes.icon, color: setColor(!canPrevious), iconSize: "XS" }) }),
-      /* @__PURE__ */ jsx(ButtonIconTooltip, { id: setId(id, "previousPage-button"), "aria-label": labels?.previousPage, className: classes.iconContainer, disabled: !canPrevious, onClick: () => changePage(page - 1), tooltip: labels?.paginationPreviousPageTitle, children: /* @__PURE__ */ jsx(Backwards, { className: classes.icon, color: setColor(!canPrevious), iconSize: "XS" }) }),
+      /* @__PURE__ */ jsx(IconButton, { id: setId(id, "firstPage-button"), className: classes.iconContainer, disabled: !canPrevious, onClick: () => changePage(0), title: labels?.firstPage || labels?.paginationFirstPageTitle, children: /* @__PURE__ */ jsx(Start, { role: "none", className: classes.icon, color: setColor(!canPrevious), iconSize: "XS" }) }),
+      /* @__PURE__ */ jsx(IconButton, { id: setId(id, "previousPage-button"), className: classes.iconContainer, disabled: !canPrevious, onClick: () => changePage(page - 1), title: labels?.previousPage || labels?.paginationPreviousPageTitle, children: /* @__PURE__ */ jsx(Backwards, { role: "none", className: classes.icon, color: setColor(!canPrevious), iconSize: "XS" }) }),
       /* @__PURE__ */ jsxs("div", { className: classes.pageInfo, children: [
         showPageJump ? renderPageJump() : /* @__PURE__ */ jsx(HvTypography, { variant: "caption2", component: "span", children: `${page + 1}` }),
         /* @__PURE__ */ jsx(HvTypography, { component: "span", children: `${labels?.pagesSeparator} ` }),
         /* @__PURE__ */ jsx(HvTypography, { component: "span", id: setId(id, "totalPages"), className: classes.totalPagesTextContainer, children: pages })
       ] }),
-      /* @__PURE__ */ jsx(ButtonIconTooltip, { id: setId(id, "nextPage-button"), "aria-label": labels?.nextPage, className: classes.iconContainer, disabled: !canNext, onClick: () => changePage(page + 1), tooltip: labels?.paginationNextPageTitle, children: /* @__PURE__ */ jsx(Forwards, { className: classes.icon, color: setColor(!canNext), iconSize: "XS" }) }),
-      /* @__PURE__ */ jsx(ButtonIconTooltip, { id: setId(id, "lastPage-button"), "aria-label": labels?.lastPage, className: classes.iconContainer, disabled: !canNext, onClick: () => changePage(pages - 1), tooltip: labels?.paginationLastPageTitle, children: /* @__PURE__ */ jsx(End, { className: classes.icon, color: setColor(!canNext), iconSize: "XS" }) })
+      /* @__PURE__ */ jsx(IconButton, { id: setId(id, "nextPage-button"), className: classes.iconContainer, disabled: !canNext, onClick: () => changePage(page + 1), title: labels?.nextPage || labels?.paginationNextPageTitle, children: /* @__PURE__ */ jsx(Forwards, { role: "none", className: classes.icon, color: setColor(!canNext), iconSize: "XS" }) }),
+      /* @__PURE__ */ jsx(IconButton, { id: setId(id, "lastPage-button"), className: classes.iconContainer, disabled: !canNext, onClick: () => changePage(pages - 1), title: labels?.lastPage || labels?.paginationLastPageTitle, children: /* @__PURE__ */ jsx(End, { className: classes.icon, color: setColor(!canNext), iconSize: "XS" }) })
     ] })
   ] });
 };

package/dist/esm/components/Pagination/Pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.js","sources":["../../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["import { HTMLAttributes, useCallback, useEffect } from \"react\";\n\nimport { Hidden } from \"@mui/material\";\n\nimport {\n  Start,\n  End,\n  Backwards,\n  Forwards,\n} from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { HvInput, HvInputProps } from \"@core/components/Input\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { setId } from \"@core/utils/setId\";\nimport { isKey } from \"@core/utils/keyboardUtils\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { useLabels } from \"@core/hooks/useLabels\";\n\nimport HvSelect, { Option } from \"./Select\";\nimport { staticClasses, useClasses } from \"./Pagination.styles\";\nimport { usePageInput, getSafePage, setColor } from \"./utils\";\nimport ButtonIconTooltip from \"./ButtonIconTooltip\";\n\nexport { staticClasses as paginationClasses };\n\nexport type HvPaginationClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvPaginationLabels {\n  /** The show label. */\n  pageSizePrev?: string;\n  /** Indicate the units of the page size selection. */\n  pageSizeEntryName?: string;\n  /** Used for the aria-label of the selection of number of unit.s */\n  pageSizeSelectorDescription?: string;\n  /** Separator of current page and total pages. */\n  pagesSeparator?: string;\n  /** Title of button `firstPage`. */\n  paginationFirstPageTitle?: string;\n  /** Title of button `previousPage`. */\n  paginationPreviousPageTitle?: string;\n  /** Title of button `nextPage`. */\n  paginationNextPageTitle?: string;\n  /** Title of button `lastPage`. */\n  paginationLastPageTitle?: string;\n  /** Aria-label passed to the page input. */\n  paginationInputLabel?: string;\n  /** Aria-label of the first page button */\n  firstPage?: string;\n  /** Aria-label of the previous page button */\n  previousPage?: string;\n  /** Aria-label of the next page button */\n  nextPage?: string;\n  /** Aria-label of the last page button */\n  lastPage?: string;\n}\n\nexport interface HvPaginationProps extends HvBaseProps {\n  /** The number of pages the component has. */\n  pages?: number;\n  /** The currently selected page (0-indexed). */\n  page?: number;\n  /** Controls whether the left page size mechanism should be visible. */\n  showPageSizeOptions?: boolean;\n  /** The array of possible page sizes for the dropdown. */\n  pageSizeOptions?: number[];\n  /** The currently selected page size. */\n  pageSize?: number;\n  /** Controls whether the central page changing mechanism should be visible. */\n  showPageJump?: boolean;\n  /** Controls whether the previous/first page buttons are enabled. */\n  canPrevious?: boolean;\n  /** Controls whether the next/last page buttons are enabled. */\n  canNext?: boolean;\n  /** Function called when the page changes. */\n  onPageChange?: (page: number) => void;\n  /** Function called when the page size changes. */\n  onPageSizeChange?: (pageSize: number) => void;\n  /** An object containing all the labels for the component. */\n  labels?: HvPaginationLabels;\n  /** Other props to show page component. */\n  showPageProps?: HTMLAttributes<HTMLDivElement>;\n  /** Other props to pagination component. */\n  navigationProps?: HTMLAttributes<HTMLDivElement>;\n  /** Extra properties passed to the input component representing the current pages. */\n  currentPageInputProps?: HvInputProps;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvPaginationClasses;\n}\n\nconst DEFAULT_LABELS = {\n  pageSizePrev: \"Show\",\n  pageSizeEntryName: \"rows\",\n  pageSizeSelectorDescription: \"Select how many to display\",\n  pagesSeparator: \"/\",\n  paginationFirstPageTitle: \"First page\",\n  paginationPreviousPageTitle: \"Previous page\",\n  paginationNextPageTitle: \"Next page\",\n  paginationLastPageTitle: \"Last page\",\n  paginationInputLabel: \"Current page\",\n  firstPage: \"First Page\",\n  previousPage: \"Previous Page\",\n  nextPage: \"Next Page\",\n  lastPage: \"Last Page\",\n};\n\nconst defaultPageSizeOptions = [5, 10, 20, 25, 50, 100];\n\n/**\n * Pagination is the process of dividing a document into discrete pages. It relates to how users interact\n * with structured content on a website or application.\n */\nexport const HvPagination = (props: HvPaginationProps) => {\n  const {\n    classes: classesProp,\n    className,\n    id,\n    pages = 1,\n    page = 0,\n    showPageSizeOptions = true,\n    pageSizeOptions = defaultPageSizeOptions,\n    pageSize = defaultPageSizeOptions[1],\n    showPageJump = true,\n    canPrevious = false,\n    canNext = false,\n    onPageChange,\n    onPageSizeChange,\n    labels: labelsProp,\n    showPageProps,\n    navigationProps,\n    currentPageInputProps,\n    ...others\n  } = useDefaultProps(\"HvPagination\", props);\n\n  const labels = useLabels(DEFAULT_LABELS, labelsProp);\n  const [pageInput, handleInputChange] = usePageInput(page);\n  const { classes, cx } = useClasses(classesProp);\n\n  const changePage = useCallback(\n    (newPage: number) => {\n      const safePage: number = getSafePage(newPage, page, pages);\n\n      onPageChange?.(safePage);\n      handleInputChange(null, safePage + 1);\n    },\n    [page, pages, onPageChange, handleInputChange]\n  );\n\n  useEffect(() => {\n    if (page >= pages && pages > 0) {\n      changePage(page);\n    }\n  }, [changePage, page, pages]);\n\n  useEffect(() => {\n    if (pageInput !== page + 1) {\n      handleInputChange(null, page + 1);\n    }\n\n    // we only want to \"fix\" the input's display value when `page` property changed\n    // (either externally or when internally committed - onBlur or Enter),\n    // not while editing the input.\n    // breaking a rule of hooks isn't ideal and it's just a hack for fixing\n    // a bug preventing properly controlling of the `page` property.\n    // fixing it some other way would potentially introduce a breaking change.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [handleInputChange, page]);\n\n  const renderPageJump = () => (\n    <div className={classes.pageJump}>\n      <HvInput\n        id={setId(id, \"currentPage\")}\n        labels={labels}\n        inputProps={{\n          \"aria-label\": labels?.paginationInputLabel,\n          // We really want the native number input\n          type: \"number\",\n        }}\n        classes={{\n          root: classes?.pageSizeInputContainer,\n          input: classes?.pageSizeInput,\n          inputRoot: classes?.pageSizeInputRoot,\n        }}\n        onChange={(event, value) => handleInputChange(event, Number(value))}\n        value={String(pageInput)}\n        onBlur={(evt, value) => changePage(Number(value) - 1)}\n        onKeyDown={(evt, value) =>\n          isKey(evt, \"Enter\") && changePage(Number(value) - 1)\n        }\n        disabled={pageSize === 0}\n        disableClear\n        {...currentPageInputProps}\n      />\n    </div>\n  );\n\n  return (\n    <div id={id} className={cx(classes.root, className)} {...others}>\n      <div className={classes.pageSizeOptions} {...showPageProps}>\n        {showPageSizeOptions && (\n          <>\n            <Hidden xsDown>\n              <HvTypography\n                component=\"span\"\n                className={classes?.pageSizeTextContainer}\n              >\n                {labels?.pageSizePrev}\n              </HvTypography>\n            </Hidden>\n            <HvSelect\n              id={setId(id, \"pageSize\")}\n              disabled={pageSize === 0}\n              className={classes.pageSizeOptionsSelect}\n              aria-label={labels?.pageSizeSelectorDescription}\n              onChange={(_: any, val: number) => onPageSizeChange?.(val)}\n              value={pageSize}\n              classes={{ header: classes.pageSizeHeader }}\n            >\n              {pageSizeOptions.map((option) => (\n                <Option key={option} value={option}>\n                  {option}\n                </Option>\n              ))}\n            </HvSelect>\n            <Hidden xsDown>\n              <HvTypography\n                component=\"span\"\n                className={classes.pageSizeTextContainer}\n              >\n                {labels?.pageSizeEntryName}\n              </HvTypography>\n            </Hidden>\n          </>\n        )}\n      </div>\n      <div className={classes.pageNavigator} {...navigationProps}>\n        <ButtonIconTooltip\n          id={setId(id, \"firstPage-button\")}\n          aria-label={labels?.firstPage}\n          className={classes.iconContainer}\n          disabled={!canPrevious}\n          onClick={() => changePage(0)}\n          tooltip={labels?.paginationFirstPageTitle}\n        >\n          <Start\n            className={classes.icon}\n            color={setColor(!canPrevious)}\n            iconSize=\"XS\"\n          />\n        </ButtonIconTooltip>\n        <ButtonIconTooltip\n          id={setId(id, \"previousPage-button\")}\n          aria-label={labels?.previousPage}\n          className={classes.iconContainer}\n          disabled={!canPrevious}\n          onClick={() => changePage(page - 1)}\n          tooltip={labels?.paginationPreviousPageTitle}\n        >\n          <Backwards\n            className={classes.icon}\n            color={setColor(!canPrevious)}\n            iconSize=\"XS\"\n          />\n        </ButtonIconTooltip>\n        <div className={classes.pageInfo}>\n          {showPageJump ? (\n            renderPageJump()\n          ) : (\n            <HvTypography variant=\"caption2\" component=\"span\">{`${\n              page + 1\n            }`}</HvTypography>\n          )}\n          <HvTypography component=\"span\">{`${labels?.pagesSeparator} `}</HvTypography>\n          <HvTypography\n            component=\"span\"\n            id={setId(id, \"totalPages\")}\n            className={classes.totalPagesTextContainer}\n          >\n            {pages}\n          </HvTypography>\n        </div>\n        <ButtonIconTooltip\n          id={setId(id, \"nextPage-button\")}\n          aria-label={labels?.nextPage}\n          className={classes.iconContainer}\n          disabled={!canNext}\n          onClick={() => changePage(page + 1)}\n          tooltip={labels?.paginationNextPageTitle}\n        >\n          <Forwards\n            className={classes.icon}\n            color={setColor(!canNext)}\n            iconSize=\"XS\"\n          />\n        </ButtonIconTooltip>\n        <ButtonIconTooltip\n          id={setId(id, \"lastPage-button\")}\n          aria-label={labels?.lastPage}\n          className={classes.iconContainer}\n          disabled={!canNext}\n          onClick={() => changePage(pages - 1)}\n          tooltip={labels?.paginationLastPageTitle}\n        >\n          <End\n            className={classes.icon}\n            color={setColor(!canNext)}\n            iconSize=\"XS\"\n          />\n        </ButtonIconTooltip>\n      </div>\n    </div>\n  );\n};\n"],"names":["DEFAULT_LABELS","pageSizePrev","pageSizeEntryName","pageSizeSelectorDescription","pagesSeparator","paginationFirstPageTitle","paginationPreviousPageTitle","paginationNextPageTitle","paginationLastPageTitle","paginationInputLabel","firstPage","previousPage","nextPage","lastPage","defaultPageSizeOptions","HvPagination","props","classes","classesProp","className","id","pages","page","showPageSizeOptions","pageSizeOptions","pageSize","showPageJump","canPrevious","canNext","onPageChange","onPageSizeChange","labels","labelsProp","showPageProps","navigationProps","currentPageInputProps","others","useDefaultProps","useLabels","pageInput","handleInputChange","usePageInput","cx","useClasses","changePage","useCallback","newPage","safePage","getSafePage","useEffect","renderPageJump","pageJump","setId","type","root","pageSizeInputContainer","input","pageSizeInput","inputRoot","pageSizeInputRoot","event","value","Number","String","evt","isKey","pageSizeTextContainer","pageSizeOptionsSelect","_","val","header","pageSizeHeader","map","option","pageNavigator","iconContainer","icon","setColor","pageInfo","totalPagesTextContainer"],"mappings":";;;;;;;;;;;;;;;AA4FA,MAAMA,iBAAiB;AAAA,EACrBC,cAAc;AAAA,EACdC,mBAAmB;AAAA,EACnBC,6BAA6B;AAAA,EAC7BC,gBAAgB;AAAA,EAChBC,0BAA0B;AAAA,EAC1BC,6BAA6B;AAAA,EAC7BC,yBAAyB;AAAA,EACzBC,yBAAyB;AAAA,EACzBC,sBAAsB;AAAA,EACtBC,WAAW;AAAA,EACXC,cAAc;AAAA,EACdC,UAAU;AAAA,EACVC,UAAU;AACZ;AAEA,MAAMC,yBAAyB,CAAC,GAAG,IAAI,IAAI,IAAI,IAAI,GAAG;AAMzCC,MAAAA,eAAeA,CAACC,UAA6B;AAClD,QAAA;AAAA,IACJC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC,QAAQ;AAAA,IACRC,OAAO;AAAA,IACPC,sBAAsB;AAAA,IACtBC,kBAAkBV;AAAAA,IAClBW,WAAWX,uBAAuB,CAAC;AAAA,IACnCY,eAAe;AAAA,IACfC,cAAc;AAAA,IACdC,UAAU;AAAA,IACVC;AAAAA,IACAC;AAAAA,IACAC,QAAQC;AAAAA,IACRC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAgBrB,KAAK;AAEnCe,QAAAA,SAASO,UAAUtC,gBAAgBgC,UAAU;AACnD,QAAM,CAACO,WAAWC,iBAAiB,IAAIC,aAAanB,IAAI;AAClD,QAAA;AAAA,IAAEL;AAAAA,IAASyB;AAAAA,EAAAA,IAAOC,WAAWzB,WAAW;AAExC0B,QAAAA,aAAaC,YACjB,CAACC,YAAoB;AACnB,UAAMC,WAAmBC,YAAYF,SAASxB,MAAMD,KAAK;AAEzDQ,mBAAekB,QAAQ;AACL,sBAAA,MAAMA,WAAW,CAAC;AAAA,KAEtC,CAACzB,MAAMD,OAAOQ,cAAcW,iBAAiB,CAC/C;AAEAS,YAAU,MAAM;AACV3B,QAAAA,QAAQD,SAASA,QAAQ,GAAG;AAC9BuB,iBAAWtB,IAAI;AAAA,IACjB;AAAA,EACC,GAAA,CAACsB,YAAYtB,MAAMD,KAAK,CAAC;AAE5B4B,YAAU,MAAM;AACVV,QAAAA,cAAcjB,OAAO,GAAG;AACR,wBAAA,MAAMA,OAAO,CAAC;AAAA,IAClC;AAAA,EAAA,GASC,CAACkB,mBAAmBlB,IAAI,CAAC;AAE5B,QAAM4B,iBAAiBA,MACpB,oBAAA,OAAA,EAAI,WAAWjC,QAAQkC,UACtB,UAAC,oBAAA,SAAA,EACC,IAAIC,MAAMhC,IAAI,aAAa,GAC3B,QACA,YAAY;AAAA,IACV,cAAcW,QAAQtB;AAAAA;AAAAA,IAEtB4C,MAAM;AAAA,KAER,SAAS;AAAA,IACPC,MAAMrC,SAASsC;AAAAA,IACfC,OAAOvC,SAASwC;AAAAA,IAChBC,WAAWzC,SAAS0C;AAAAA,EAAAA,GAEtB,UAAU,CAACC,OAAOC,UAAUrB,kBAAkBoB,OAAOE,OAAOD,KAAK,CAAC,GAClE,OAAOE,OAAOxB,SAAS,GACvB,QAAQ,CAACyB,KAAKH,UAAUjB,WAAWkB,OAAOD,KAAK,IAAI,CAAC,GACpD,WAAW,CAACG,KAAKH,UACfI,MAAMD,KAAK,OAAO,KAAKpB,WAAWkB,OAAOD,KAAK,IAAI,CAAC,GAErD,UAAUpC,aAAa,GACvB,cAAY,MACZ,GAAIU,uBAAsB,EAE9B,CAAA;AAIA,SAAA,qBAAC,OAAI,EAAA,IAAQ,WAAWO,GAAGzB,QAAQqC,MAAMnC,SAAS,GAAOiB,GAAAA,QACvD,UAAA;AAAA,IAAA,oBAAC,SAAI,WAAWnB,QAAQO,iBAAiB,GAAIS,eAC1CV,iCAEG,qBAAA,UAAA,EAAA,UAAA;AAAA,MAAA,oBAAC,QAAO,EAAA,QAAM,MACZ,UAAA,oBAAC,cACC,EAAA,WAAU,QACV,WAAWN,SAASiD,uBAEnBnC,UAAQ9B,QAAAA,aACX,CAAA,GACF;AAAA,MACA,oBAAC,UACC,EAAA,IAAImD,MAAMhC,IAAI,UAAU,GACxB,UAAUK,aAAa,GACvB,WAAWR,QAAQkD,uBACnB,cAAYpC,QAAQ5B,6BACpB,UAAU,CAACiE,GAAQC,QAAgBvC,mBAAmBuC,GAAG,GACzD,OAAO5C,UACP,SAAS;AAAA,QAAE6C,QAAQrD,QAAQsD;AAAAA,MAAAA,GAE1B/C,UAAgBgD,gBAAAA,IAAKC,CACpB,WAAA,oBAAC,QAAoB,EAAA,OAAOA,QACzBA,UAAAA,OAAAA,GADUA,MAEb,CACD,EACH,CAAA;AAAA,MACC,oBAAA,QAAA,EAAO,QAAM,MACZ,UAAC,oBAAA,cAAA,EACC,WAAU,QACV,WAAWxD,QAAQiD,uBAElBnC,UAAAA,QAAQ7B,kBACX,CAAA,GACF;AAAA,IAAA,EAAA,CACF,EAEJ,CAAA;AAAA,yBACC,OAAI,EAAA,WAAWe,QAAQyD,eAAe,GAAIxC,iBACzC,UAAA;AAAA,MAAA,oBAAC,mBACC,EAAA,IAAIkB,MAAMhC,IAAI,kBAAkB,GAChC,cAAYW,QAAQrB,WACpB,WAAWO,QAAQ0D,eACnB,UAAU,CAAChD,aACX,SAAS,MAAMiB,WAAW,CAAC,GAC3B,SAASb,QAAQ1B,0BAEjB,UAAA,oBAAC,SACC,WAAWY,QAAQ2D,MACnB,OAAOC,SAAS,CAAClD,WAAW,GAC5B,UAAS,KAAI,CAAA,GAEjB;AAAA,0BACC,mBACC,EAAA,IAAIyB,MAAMhC,IAAI,qBAAqB,GACnC,cAAYW,QAAQpB,cACpB,WAAWM,QAAQ0D,eACnB,UAAU,CAAChD,aACX,SAAS,MAAMiB,WAAWtB,OAAO,CAAC,GAClC,SAASS,QAAQzB,6BAEjB,8BAAC,WACC,EAAA,WAAWW,QAAQ2D,MACnB,OAAOC,SAAS,CAAClD,WAAW,GAC5B,UAAS,KAAI,CAAA,GAEjB;AAAA,MACC,qBAAA,OAAA,EAAI,WAAWV,QAAQ6D,UACrBpD,UAAAA;AAAAA,QACCwB,eAAAA,eAAAA,IAEA,oBAAC,cAAa,EAAA,SAAQ,YAAW,WAAU,QAAS,UAAA,GAClD5B,OAAO,CACR,GAAE,CAAA;AAAA,4BAEJ,cAAa,EAAA,WAAU,QAAS,UAAES,GAAAA,QAAQ3B,cAAe,KAAG;AAAA,QAC5D,oBAAA,cAAA,EACC,WAAU,QACV,IAAIgD,MAAMhC,IAAI,YAAY,GAC1B,WAAWH,QAAQ8D,yBAElB1D,UACH,MAAA,CAAA;AAAA,MAAA,GACF;AAAA,0BACC,mBACC,EAAA,IAAI+B,MAAMhC,IAAI,iBAAiB,GAC/B,cAAYW,QAAQnB,UACpB,WAAWK,QAAQ0D,eACnB,UAAU,CAAC/C,SACX,SAAS,MAAMgB,WAAWtB,OAAO,CAAC,GAClC,SAASS,QAAQxB,yBAEjB,8BAAC,UACC,EAAA,WAAWU,QAAQ2D,MACnB,OAAOC,SAAS,CAACjD,OAAO,GACxB,UAAS,KAAI,CAAA,GAEjB;AAAA,0BACC,mBACC,EAAA,IAAIwB,MAAMhC,IAAI,iBAAiB,GAC/B,cAAYW,QAAQlB,UACpB,WAAWI,QAAQ0D,eACnB,UAAU,CAAC/C,SACX,SAAS,MAAMgB,WAAWvB,QAAQ,CAAC,GACnC,SAASU,QAAQvB,yBAEjB,8BAAC,KACC,EAAA,WAAWS,QAAQ2D,MACnB,OAAOC,SAAS,CAACjD,OAAO,GACxB,UAAS,KAAI,CAAA,GAEjB;AAAA,IAAA,GACF;AAAA,EACF,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"Pagination.js","sources":["../../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["import { HTMLAttributes, useCallback, useEffect } from \"react\";\n\nimport { Hidden } from \"@mui/material\";\n\nimport {\n  Start,\n  End,\n  Backwards,\n  Forwards,\n} from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { HvInput, HvInputProps } from \"@core/components/Input\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { setId } from \"@core/utils/setId\";\nimport { isKey } from \"@core/utils/keyboardUtils\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { IconButton } from \"@core/utils/IconButton\";\nimport { useLabels } from \"@core/hooks/useLabels\";\n\nimport HvSelect, { Option } from \"./Select\";\nimport { staticClasses, useClasses } from \"./Pagination.styles\";\nimport { usePageInput, getSafePage, setColor } from \"./utils\";\n\nexport { staticClasses as paginationClasses };\n\nexport type HvPaginationClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvPaginationLabels {\n  /** The show label. */\n  pageSizePrev?: string;\n  /** Indicate the units of the page size selection. */\n  pageSizeEntryName?: string;\n  /** Used for the aria-label of the selection of number of unit.s */\n  pageSizeSelectorDescription?: string;\n  /** Separator of current page and total pages. */\n  pagesSeparator?: string;\n  /** Title of button `firstPage`. @deprecated Use `firstPage` instead. */\n  paginationFirstPageTitle?: string;\n  /** Title of button `previousPage`. @deprecated Use `previousPage` instead. */\n  paginationPreviousPageTitle?: string;\n  /** Title of button `nextPage`. @deprecated Use `nextPage` instead. */\n  paginationNextPageTitle?: string;\n  /** Title of button `lastPage`. @deprecated Use `lastPage` instead. */\n  paginationLastPageTitle?: string;\n  /** Aria-label passed to the page input. */\n  paginationInputLabel?: string;\n  /** Label of the first page button */\n  firstPage?: string;\n  /** Label of the previous page button */\n  previousPage?: string;\n  /** Label of the next page button */\n  nextPage?: string;\n  /** Label of the last page button */\n  lastPage?: string;\n}\n\nexport interface HvPaginationProps extends HvBaseProps {\n  /** The number of pages the component has. */\n  pages?: number;\n  /** The currently selected page (0-indexed). */\n  page?: number;\n  /** Controls whether the left page size mechanism should be visible. */\n  showPageSizeOptions?: boolean;\n  /** The array of possible page sizes for the dropdown. */\n  pageSizeOptions?: number[];\n  /** The currently selected page size. */\n  pageSize?: number;\n  /** Controls whether the central page changing mechanism should be visible. */\n  showPageJump?: boolean;\n  /** Controls whether the previous/first page buttons are enabled. */\n  canPrevious?: boolean;\n  /** Controls whether the next/last page buttons are enabled. */\n  canNext?: boolean;\n  /** Function called when the page changes. */\n  onPageChange?: (page: number) => void;\n  /** Function called when the page size changes. */\n  onPageSizeChange?: (pageSize: number) => void;\n  /** An object containing all the labels for the component. */\n  labels?: HvPaginationLabels;\n  /** Other props to show page component. */\n  showPageProps?: HTMLAttributes<HTMLDivElement>;\n  /** Other props to pagination component. */\n  navigationProps?: HTMLAttributes<HTMLDivElement>;\n  /** Extra properties passed to the input component representing the current pages. */\n  currentPageInputProps?: HvInputProps;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvPaginationClasses;\n}\n\nconst DEFAULT_LABELS: HvPaginationLabels = {\n  pageSizePrev: \"Show\",\n  pageSizeEntryName: \"rows\",\n  pageSizeSelectorDescription: \"Select how many to display\",\n  pagesSeparator: \"/\",\n  paginationFirstPageTitle: \"First page\",\n  paginationPreviousPageTitle: \"Previous page\",\n  paginationNextPageTitle: \"Next page\",\n  paginationLastPageTitle: \"Last page\",\n  paginationInputLabel: \"Current page\",\n  firstPage: \"First Page\",\n  previousPage: \"Previous Page\",\n  nextPage: \"Next Page\",\n  lastPage: \"Last Page\",\n};\n\nconst defaultPageSizeOptions = [5, 10, 20, 25, 50, 100];\n\n/**\n * Pagination is the process of dividing a document into discrete pages. It relates to how users interact\n * with structured content on a website or application.\n */\nexport const HvPagination = (props: HvPaginationProps) => {\n  const {\n    classes: classesProp,\n    className,\n    id,\n    pages = 1,\n    page = 0,\n    showPageSizeOptions = true,\n    pageSizeOptions = defaultPageSizeOptions,\n    pageSize = defaultPageSizeOptions[1],\n    showPageJump = true,\n    canPrevious = false,\n    canNext = false,\n    onPageChange,\n    onPageSizeChange,\n    labels: labelsProp,\n    showPageProps,\n    navigationProps,\n    currentPageInputProps,\n    ...others\n  } = useDefaultProps(\"HvPagination\", props);\n\n  const labels = useLabels(DEFAULT_LABELS, labelsProp);\n  const [pageInput, handleInputChange] = usePageInput(page);\n  const { classes, cx } = useClasses(classesProp);\n\n  const changePage = useCallback(\n    (newPage: number) => {\n      const safePage: number = getSafePage(newPage, page, pages);\n\n      onPageChange?.(safePage);\n      handleInputChange(null, safePage + 1);\n    },\n    [page, pages, onPageChange, handleInputChange]\n  );\n\n  useEffect(() => {\n    if (page >= pages && pages > 0) {\n      changePage(page);\n    }\n  }, [changePage, page, pages]);\n\n  useEffect(() => {\n    if (pageInput !== page + 1) {\n      handleInputChange(null, page + 1);\n    }\n\n    // we only want to \"fix\" the input's display value when `page` property changed\n    // (either externally or when internally committed - onBlur or Enter),\n    // not while editing the input.\n    // breaking a rule of hooks isn't ideal and it's just a hack for fixing\n    // a bug preventing properly controlling of the `page` property.\n    // fixing it some other way would potentially introduce a breaking change.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [handleInputChange, page]);\n\n  const renderPageJump = () => (\n    <div className={classes.pageJump}>\n      <HvInput\n        id={setId(id, \"currentPage\")}\n        labels={labels}\n        inputProps={{\n          \"aria-label\": labels?.paginationInputLabel,\n          // We really want the native number input\n          type: \"number\",\n        }}\n        classes={{\n          root: classes?.pageSizeInputContainer,\n          input: classes?.pageSizeInput,\n          inputRoot: classes?.pageSizeInputRoot,\n        }}\n        onChange={(event, value) => handleInputChange(event, Number(value))}\n        value={String(pageInput)}\n        onBlur={(evt, value) => changePage(Number(value) - 1)}\n        onKeyDown={(evt, value) =>\n          isKey(evt, \"Enter\") && changePage(Number(value) - 1)\n        }\n        disabled={pageSize === 0}\n        disableClear\n        {...currentPageInputProps}\n      />\n    </div>\n  );\n\n  return (\n    <div id={id} className={cx(classes.root, className)} {...others}>\n      <div className={classes.pageSizeOptions} {...showPageProps}>\n        {showPageSizeOptions && (\n          <>\n            <Hidden xsDown>\n              <HvTypography\n                component=\"span\"\n                className={classes?.pageSizeTextContainer}\n              >\n                {labels?.pageSizePrev}\n              </HvTypography>\n            </Hidden>\n            <HvSelect\n              id={setId(id, \"pageSize\")}\n              disabled={pageSize === 0}\n              className={classes.pageSizeOptionsSelect}\n              aria-label={labels?.pageSizeSelectorDescription}\n              onChange={(_: any, val: number) => onPageSizeChange?.(val)}\n              value={pageSize}\n              classes={{ header: classes.pageSizeHeader }}\n            >\n              {pageSizeOptions.map((option) => (\n                <Option key={option} value={option}>\n                  {option}\n                </Option>\n              ))}\n            </HvSelect>\n            <Hidden xsDown>\n              <HvTypography\n                component=\"span\"\n                className={classes.pageSizeTextContainer}\n              >\n                {labels?.pageSizeEntryName}\n              </HvTypography>\n            </Hidden>\n          </>\n        )}\n      </div>\n      <div className={classes.pageNavigator} {...navigationProps}>\n        <IconButton\n          id={setId(id, \"firstPage-button\")}\n          className={classes.iconContainer}\n          disabled={!canPrevious}\n          onClick={() => changePage(0)}\n          title={labels?.firstPage || labels?.paginationFirstPageTitle}\n        >\n          <Start\n            role=\"none\"\n            className={classes.icon}\n            color={setColor(!canPrevious)}\n            iconSize=\"XS\"\n          />\n        </IconButton>\n        <IconButton\n          id={setId(id, \"previousPage-button\")}\n          className={classes.iconContainer}\n          disabled={!canPrevious}\n          onClick={() => changePage(page - 1)}\n          title={labels?.previousPage || labels?.paginationPreviousPageTitle}\n        >\n          <Backwards\n            role=\"none\"\n            className={classes.icon}\n            color={setColor(!canPrevious)}\n            iconSize=\"XS\"\n          />\n        </IconButton>\n        <div className={classes.pageInfo}>\n          {showPageJump ? (\n            renderPageJump()\n          ) : (\n            <HvTypography variant=\"caption2\" component=\"span\">{`${\n              page + 1\n            }`}</HvTypography>\n          )}\n          <HvTypography component=\"span\">{`${labels?.pagesSeparator} `}</HvTypography>\n          <HvTypography\n            component=\"span\"\n            id={setId(id, \"totalPages\")}\n            className={classes.totalPagesTextContainer}\n          >\n            {pages}\n          </HvTypography>\n        </div>\n        <IconButton\n          id={setId(id, \"nextPage-button\")}\n          className={classes.iconContainer}\n          disabled={!canNext}\n          onClick={() => changePage(page + 1)}\n          title={labels?.nextPage || labels?.paginationNextPageTitle}\n        >\n          <Forwards\n            role=\"none\"\n            className={classes.icon}\n            color={setColor(!canNext)}\n            iconSize=\"XS\"\n          />\n        </IconButton>\n        <IconButton\n          id={setId(id, \"lastPage-button\")}\n          className={classes.iconContainer}\n          disabled={!canNext}\n          onClick={() => changePage(pages - 1)}\n          title={labels?.lastPage || labels?.paginationLastPageTitle}\n        >\n          <End\n            className={classes.icon}\n            color={setColor(!canNext)}\n            iconSize=\"XS\"\n          />\n        </IconButton>\n      </div>\n    </div>\n  );\n};\n"],"names":["DEFAULT_LABELS","pageSizePrev","pageSizeEntryName","pageSizeSelectorDescription","pagesSeparator","paginationFirstPageTitle","paginationPreviousPageTitle","paginationNextPageTitle","paginationLastPageTitle","paginationInputLabel","firstPage","previousPage","nextPage","lastPage","defaultPageSizeOptions","HvPagination","props","classes","classesProp","className","id","pages","page","showPageSizeOptions","pageSizeOptions","pageSize","showPageJump","canPrevious","canNext","onPageChange","onPageSizeChange","labels","labelsProp","showPageProps","navigationProps","currentPageInputProps","others","useDefaultProps","useLabels","pageInput","handleInputChange","usePageInput","cx","useClasses","changePage","useCallback","newPage","safePage","getSafePage","useEffect","renderPageJump","pageJump","setId","type","root","pageSizeInputContainer","input","pageSizeInput","inputRoot","pageSizeInputRoot","event","value","Number","String","evt","isKey","pageSizeTextContainer","pageSizeOptionsSelect","_","val","header","pageSizeHeader","map","option","pageNavigator","iconContainer","icon","setColor","pageInfo","totalPagesTextContainer"],"mappings":";;;;;;;;;;;;;;;AA4FA,MAAMA,iBAAqC;AAAA,EACzCC,cAAc;AAAA,EACdC,mBAAmB;AAAA,EACnBC,6BAA6B;AAAA,EAC7BC,gBAAgB;AAAA,EAChBC,0BAA0B;AAAA,EAC1BC,6BAA6B;AAAA,EAC7BC,yBAAyB;AAAA,EACzBC,yBAAyB;AAAA,EACzBC,sBAAsB;AAAA,EACtBC,WAAW;AAAA,EACXC,cAAc;AAAA,EACdC,UAAU;AAAA,EACVC,UAAU;AACZ;AAEA,MAAMC,yBAAyB,CAAC,GAAG,IAAI,IAAI,IAAI,IAAI,GAAG;AAMzCC,MAAAA,eAAeA,CAACC,UAA6B;AAClD,QAAA;AAAA,IACJC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC,QAAQ;AAAA,IACRC,OAAO;AAAA,IACPC,sBAAsB;AAAA,IACtBC,kBAAkBV;AAAAA,IAClBW,WAAWX,uBAAuB,CAAC;AAAA,IACnCY,eAAe;AAAA,IACfC,cAAc;AAAA,IACdC,UAAU;AAAA,IACVC;AAAAA,IACAC;AAAAA,IACAC,QAAQC;AAAAA,IACRC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAgBrB,KAAK;AAEnCe,QAAAA,SAASO,UAAUtC,gBAAgBgC,UAAU;AACnD,QAAM,CAACO,WAAWC,iBAAiB,IAAIC,aAAanB,IAAI;AAClD,QAAA;AAAA,IAAEL;AAAAA,IAASyB;AAAAA,EAAAA,IAAOC,WAAWzB,WAAW;AAExC0B,QAAAA,aAAaC,YACjB,CAACC,YAAoB;AACnB,UAAMC,WAAmBC,YAAYF,SAASxB,MAAMD,KAAK;AAEzDQ,mBAAekB,QAAQ;AACL,sBAAA,MAAMA,WAAW,CAAC;AAAA,KAEtC,CAACzB,MAAMD,OAAOQ,cAAcW,iBAAiB,CAC/C;AAEAS,YAAU,MAAM;AACV3B,QAAAA,QAAQD,SAASA,QAAQ,GAAG;AAC9BuB,iBAAWtB,IAAI;AAAA,IACjB;AAAA,EACC,GAAA,CAACsB,YAAYtB,MAAMD,KAAK,CAAC;AAE5B4B,YAAU,MAAM;AACVV,QAAAA,cAAcjB,OAAO,GAAG;AACR,wBAAA,MAAMA,OAAO,CAAC;AAAA,IAClC;AAAA,EAAA,GASC,CAACkB,mBAAmBlB,IAAI,CAAC;AAE5B,QAAM4B,iBAAiBA,MACpB,oBAAA,OAAA,EAAI,WAAWjC,QAAQkC,UACtB,UAAC,oBAAA,SAAA,EACC,IAAIC,MAAMhC,IAAI,aAAa,GAC3B,QACA,YAAY;AAAA,IACV,cAAcW,QAAQtB;AAAAA;AAAAA,IAEtB4C,MAAM;AAAA,KAER,SAAS;AAAA,IACPC,MAAMrC,SAASsC;AAAAA,IACfC,OAAOvC,SAASwC;AAAAA,IAChBC,WAAWzC,SAAS0C;AAAAA,EAAAA,GAEtB,UAAU,CAACC,OAAOC,UAAUrB,kBAAkBoB,OAAOE,OAAOD,KAAK,CAAC,GAClE,OAAOE,OAAOxB,SAAS,GACvB,QAAQ,CAACyB,KAAKH,UAAUjB,WAAWkB,OAAOD,KAAK,IAAI,CAAC,GACpD,WAAW,CAACG,KAAKH,UACfI,MAAMD,KAAK,OAAO,KAAKpB,WAAWkB,OAAOD,KAAK,IAAI,CAAC,GAErD,UAAUpC,aAAa,GACvB,cAAY,MACZ,GAAIU,uBAAsB,EAE9B,CAAA;AAIA,SAAA,qBAAC,OAAI,EAAA,IAAQ,WAAWO,GAAGzB,QAAQqC,MAAMnC,SAAS,GAAOiB,GAAAA,QACvD,UAAA;AAAA,IAAA,oBAAC,SAAI,WAAWnB,QAAQO,iBAAiB,GAAIS,eAC1CV,iCAEG,qBAAA,UAAA,EAAA,UAAA;AAAA,MAAA,oBAAC,QAAO,EAAA,QAAM,MACZ,UAAA,oBAAC,cACC,EAAA,WAAU,QACV,WAAWN,SAASiD,uBAEnBnC,UAAQ9B,QAAAA,aACX,CAAA,GACF;AAAA,MACA,oBAAC,UACC,EAAA,IAAImD,MAAMhC,IAAI,UAAU,GACxB,UAAUK,aAAa,GACvB,WAAWR,QAAQkD,uBACnB,cAAYpC,QAAQ5B,6BACpB,UAAU,CAACiE,GAAQC,QAAgBvC,mBAAmBuC,GAAG,GACzD,OAAO5C,UACP,SAAS;AAAA,QAAE6C,QAAQrD,QAAQsD;AAAAA,MAAAA,GAE1B/C,UAAgBgD,gBAAAA,IAAKC,CACpB,WAAA,oBAAC,QAAoB,EAAA,OAAOA,QACzBA,UAAAA,OAAAA,GADUA,MAEb,CACD,EACH,CAAA;AAAA,MACC,oBAAA,QAAA,EAAO,QAAM,MACZ,UAAC,oBAAA,cAAA,EACC,WAAU,QACV,WAAWxD,QAAQiD,uBAElBnC,UAAAA,QAAQ7B,kBACX,CAAA,GACF;AAAA,IAAA,EAAA,CACF,EAEJ,CAAA;AAAA,yBACC,OAAI,EAAA,WAAWe,QAAQyD,eAAe,GAAIxC,iBACzC,UAAA;AAAA,MAAA,oBAAC,cACC,IAAIkB,MAAMhC,IAAI,kBAAkB,GAChC,WAAWH,QAAQ0D,eACnB,UAAU,CAAChD,aACX,SAAS,MAAMiB,WAAW,CAAC,GAC3B,OAAOb,QAAQrB,aAAaqB,QAAQ1B,0BAEpC,UAAA,oBAAC,OACC,EAAA,MAAK,QACL,WAAWY,QAAQ2D,MACnB,OAAOC,SAAS,CAAClD,WAAW,GAC5B,UAAS,KAAI,CAAA,GAEjB;AAAA,0BACC,YACC,EAAA,IAAIyB,MAAMhC,IAAI,qBAAqB,GACnC,WAAWH,QAAQ0D,eACnB,UAAU,CAAChD,aACX,SAAS,MAAMiB,WAAWtB,OAAO,CAAC,GAClC,OAAOS,QAAQpB,gBAAgBoB,QAAQzB,6BAEvC,UAAC,oBAAA,WAAA,EACC,MAAK,QACL,WAAWW,QAAQ2D,MACnB,OAAOC,SAAS,CAAClD,WAAW,GAC5B,UAAS,KAAI,CAAA,GAEjB;AAAA,MACC,qBAAA,OAAA,EAAI,WAAWV,QAAQ6D,UACrBpD,UAAAA;AAAAA,QACCwB,eAAAA,eAAAA,IAEA,oBAAC,cAAa,EAAA,SAAQ,YAAW,WAAU,QAAS,UAAA,GAClD5B,OAAO,CACR,GAAE,CAAA;AAAA,4BAEJ,cAAa,EAAA,WAAU,QAAS,UAAES,GAAAA,QAAQ3B,cAAe,KAAG;AAAA,QAC5D,oBAAA,cAAA,EACC,WAAU,QACV,IAAIgD,MAAMhC,IAAI,YAAY,GAC1B,WAAWH,QAAQ8D,yBAElB1D,UACH,MAAA,CAAA;AAAA,MAAA,GACF;AAAA,0BACC,YACC,EAAA,IAAI+B,MAAMhC,IAAI,iBAAiB,GAC/B,WAAWH,QAAQ0D,eACnB,UAAU,CAAC/C,SACX,SAAS,MAAMgB,WAAWtB,OAAO,CAAC,GAClC,OAAOS,QAAQnB,YAAYmB,QAAQxB,yBAEnC,UAAC,oBAAA,UAAA,EACC,MAAK,QACL,WAAWU,QAAQ2D,MACnB,OAAOC,SAAS,CAACjD,OAAO,GACxB,UAAS,KAAI,CAAA,GAEjB;AAAA,0BACC,YACC,EAAA,IAAIwB,MAAMhC,IAAI,iBAAiB,GAC/B,WAAWH,QAAQ0D,eACnB,UAAU,CAAC/C,SACX,SAAS,MAAMgB,WAAWvB,QAAQ,CAAC,GACnC,OAAOU,QAAQlB,YAAYkB,QAAQvB,yBAEnC,UAAA,oBAAC,OACC,WAAWS,QAAQ2D,MACnB,OAAOC,SAAS,CAACjD,OAAO,GACxB,UAAS,KAAI,CAAA,GAEjB;AAAA,IAAA,GACF;AAAA,EACF,EAAA,CAAA;AAEJ;"}

package/dist/esm/components/QueryBuilder/Rule/Rule.js

@@ -1,8 +1,8 @@
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
 import { useMemo } from "react";
 import { Delete } from "@hitachivantara/uikit-react-icons";
 import { useTheme, useMediaQuery } from "@mui/material";
-import { withTooltip } from "../../../hocs/withTooltip.js";
+import { IconButton } from "../../../utils/IconButton.js";
 import { useQueryBuilderContext } from "../Context.js";
 import { useClasses } from "./Rule.styles.js";
 import { staticClasses } from "./Rule.styles.js";
@@ -10,7 +10,6 @@ import { HvGrid } from "../../Grid/Grid.js";
 import { Attribute } from "./Attribute/Attribute.js";
 import { Operator } from "./Operator/Operator.js";
 import { Value } from "./Value/Value.js";
-import { HvButton } from "../../Button/Button.js";
 import { useDefaultProps } from "../../../hooks/useDefaultProps.js";
 const Rule = (props) => {
   const {
@@ -49,14 +48,13 @@ const Rule = (props) => {
     return -1;
   }, [attribute, attributes, combinator, operators]);
   const shouldShowValueInput = operator !== "Empty" && operator !== "IsNotEmpty";
-  const DeleteIcon = withTooltip(() => /* @__PURE__ */ jsx(Delete, {}), labels.rule.delete.tooltip, "bottom");
   return /* @__PURE__ */ jsxs(HvGrid, { container: true, className: cx(classes.root, {
     [classes.isMdDown]: isMdDown
   }), spacing: 0, children: [
     /* @__PURE__ */ jsx(HvGrid, { item: true, xs: 12, md: 3, children: /* @__PURE__ */ jsx(Attribute, { attribute, id, disabled, isInvalid }) }),
     attribute != null && availableOperators > 0 && /* @__PURE__ */ jsx(HvGrid, { item: true, xs: 12, md: 3, children: /* @__PURE__ */ jsx(Operator, { id, combinator, attribute, operator }) }),
     attribute != null && (operator != null || availableOperators === 0) && /* @__PURE__ */ jsx(HvGrid, { item: true, xs: 12, md: true, children: shouldShowValueInput && /* @__PURE__ */ jsx(Value, { attribute, id, operator, value }) }),
-    /* @__PURE__ */ jsx(HvGrid, { item: true, className: classes.actionsContainer, children: /* @__PURE__ */ jsx(HvButton, { icon: true, "aria-label": labels.rule.delete.ariaLabel, onClick: () => disableConfirmation ? dispatchAction({
+    /* @__PURE__ */ jsx(HvGrid, { item: true, className: classes.actionsContainer, children: /* @__PURE__ */ jsx(IconButton, { placement: "bottom", title: labels.rule.delete.tooltip || labels.rule.delete.ariaLabel, onClick: () => disableConfirmation ? dispatchAction({
       type: "remove-node",
       id
     }) : askAction({
@@ -65,7 +63,7 @@ const Rule = (props) => {
         id
       }],
       dialog: labels.rule.delete
-    }), disabled: readOnly, children: /* @__PURE__ */ jsx(DeleteIcon, {}) }) })
+    }), disabled: readOnly, children: /* @__PURE__ */ jsx(Delete, { role: "none" }) }) })
   ] });
 };
 export {

package/dist/esm/components/QueryBuilder/Rule/Rule.js.map

@@ -1 +1 @@
-{"version":3,"file":"Rule.js","sources":["../../../../../src/components/QueryBuilder/Rule/Rule.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { Delete } from \"@hitachivantara/uikit-react-icons\";\nimport { useMediaQuery, useTheme } from \"@mui/material\";\n\nimport { HvGrid } from \"@core/components/Grid\";\nimport { HvButton } from \"@core/components/Button\";\nimport { withTooltip } from \"@core/hocs/withTooltip\";\nimport { useDefaultProps } from \"@core/hooks\";\nimport { ExtractNames } from \"@core/utils\";\n\nimport { useQueryBuilderContext } from \"../Context\";\nimport { Attribute } from \"./Attribute\";\nimport { Operator } from \"./Operator\";\nimport { Value } from \"./Value\";\nimport { staticClasses, useClasses } from \"./Rule.styles\";\n\nexport { staticClasses as queryBuilderRuleClasses };\n\nexport type HvQueryBuilderRuleClasses = ExtractNames<typeof useClasses>;\n\nexport interface RuleProps {\n  id: React.Key;\n  combinator: string;\n  attribute?: string;\n  operator?: string;\n  value?: any;\n  disabled?: boolean;\n  isInvalid: boolean;\n  classes?: HvQueryBuilderRuleClasses;\n}\n\nexport const Rule = (props: RuleProps) => {\n  const {\n    id,\n    combinator,\n    attribute,\n    operator,\n    value,\n    disabled,\n    isInvalid,\n    classes: classesProp,\n  } = useDefaultProps(\"HvQueryBuilderRule\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const {\n    askAction,\n    dispatchAction,\n    attributes,\n    operators,\n    labels,\n    readOnly,\n    disableConfirmation,\n  } = useQueryBuilderContext();\n\n  const theme = useTheme();\n\n  const isMdDown = useMediaQuery(theme.breakpoints.down(\"md\"));\n\n  const availableOperators = useMemo(() => {\n    const attributeSpec =\n      attribute != null && attributes ? attributes[attribute] : null;\n    if (attributeSpec != null) {\n      const typeOperators = operators[attributeSpec.type];\n      if (typeOperators != null) {\n        return typeOperators.reduce(\n          (count, item) =>\n            count + (item.combinators.includes(combinator) ? 1 : 0),\n          0\n        );\n      }\n    }\n\n    return -1;\n  }, [attribute, attributes, combinator, operators]);\n\n  const shouldShowValueInput =\n    operator !== \"Empty\" && operator !== \"IsNotEmpty\";\n\n  const DeleteIcon = withTooltip(\n    () => <Delete />,\n    labels.rule.delete.tooltip,\n    \"bottom\"\n  );\n\n  return (\n    <HvGrid\n      container\n      className={cx(classes.root, { [classes.isMdDown]: isMdDown })}\n      spacing={0}\n    >\n      <HvGrid item xs={12} md={3}>\n        <Attribute\n          attribute={attribute}\n          id={id}\n          disabled={disabled}\n          isInvalid={isInvalid}\n        />\n      </HvGrid>\n      {attribute != null && availableOperators > 0 && (\n        <HvGrid item xs={12} md={3}>\n          <Operator\n            id={id}\n            combinator={combinator}\n            attribute={attribute}\n            operator={operator}\n          />\n        </HvGrid>\n      )}\n      {attribute != null && (operator != null || availableOperators === 0) && (\n        <HvGrid item xs={12} md>\n          {shouldShowValueInput && (\n            <Value\n              attribute={attribute}\n              id={id}\n              operator={operator}\n              value={value}\n            />\n          )}\n        </HvGrid>\n      )}\n      <HvGrid item className={classes.actionsContainer}>\n        <HvButton\n          icon\n          aria-label={labels.rule.delete.ariaLabel}\n          onClick={() =>\n            disableConfirmation\n              ? dispatchAction({ type: \"remove-node\", id })\n              : askAction({\n                  actions: [{ type: \"remove-node\", id }],\n                  dialog: labels.rule.delete,\n                })\n          }\n          disabled={readOnly}\n        >\n          <DeleteIcon />\n        </HvButton>\n      </HvGrid>\n    </HvGrid>\n  );\n};\n"],"names":["Rule","props","id","combinator","attribute","operator","value","disabled","isInvalid","classes","classesProp","useDefaultProps","cx","useClasses","askAction","dispatchAction","attributes","operators","labels","readOnly","disableConfirmation","useQueryBuilderContext","theme","useTheme","isMdDown","useMediaQuery","breakpoints","down","availableOperators","useMemo","attributeSpec","typeOperators","type","reduce","count","item","combinators","includes","shouldShowValueInput","DeleteIcon","withTooltip","rule","delete","tooltip","root","actionsContainer","ariaLabel","actions","dialog"],"mappings":";;;;;;;;;;;;;;AA+BaA,MAAAA,OAAOA,CAACC,UAAqB;AAClC,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,EAAAA,IACPC,gBAAgB,sBAAsBV,KAAK;AAEzC,QAAA;AAAA,IAAEQ;AAAAA,IAASG;AAAAA,EAAAA,IAAOC,WAAWH,WAAW;AAExC,QAAA;AAAA,IACJI;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,MACEC,uBAAuB;AAE3B,QAAMC,QAAQC;AAEd,QAAMC,WAAWC,cAAcH,MAAMI,YAAYC,KAAK,IAAI,CAAC;AAErDC,QAAAA,qBAAqBC,QAAQ,MAAM;AACvC,UAAMC,gBACJ1B,aAAa,QAAQY,aAAaA,WAAWZ,SAAS,IAAI;AAC5D,QAAI0B,iBAAiB,MAAM;AACnBC,YAAAA,gBAAgBd,UAAUa,cAAcE,IAAI;AAClD,UAAID,iBAAiB,MAAM;AACzB,eAAOA,cAAcE,OACnB,CAACC,OAAOC,SACND,SAASC,KAAKC,YAAYC,SAASlC,UAAU,IAAI,IAAI,IACvD,CACF;AAAA,MACF;AAAA,IACF;AAEO,WAAA;AAAA,KACN,CAACC,WAAWY,YAAYb,YAAYc,SAAS,CAAC;AAE3CqB,QAAAA,uBACJjC,aAAa,WAAWA,aAAa;AAEjCkC,QAAAA,aAAaC,YACjB,MAAO,oBAAA,QAAA,CAAA,CAAS,GAChBtB,OAAOuB,KAAKC,OAAOC,SACnB,QACF;AAEA,8BACG,QACC,EAAA,WAAS,MACT,WAAW/B,GAAGH,QAAQmC,MAAM;AAAA,IAAE,CAACnC,QAAQe,QAAQ,GAAGA;AAAAA,EAAAA,CAAU,GAC5D,SAAS,GAET,UAAA;AAAA,IAAA,oBAAC,QAAO,EAAA,MAAI,MAAC,IAAI,IAAI,IAAI,GACvB,UAAA,oBAAC,WACC,EAAA,WACA,IACA,UACA,UAAqB,CAAA,GAEzB;AAAA,IACCpB,aAAa,QAAQwB,qBAAqB,KACxC,oBAAA,QAAA,EAAO,MAAI,MAAC,IAAI,IAAI,IAAI,GACvB,UAAC,oBAAA,UAAA,EACC,IACA,YACA,WACA,SAAmB,CAAA,GAEvB;AAAA,IAEDxB,aAAa,SAASC,YAAY,QAAQuB,uBAAuB,MAChE,oBAAC,UAAO,MAAI,MAAC,IAAI,IAAI,IAAE,MACpBU,UACC,wBAAA,oBAAC,SACC,WACA,IACA,UACA,MAAA,CAEH,EACH,CAAA;AAAA,wBAED,QAAO,EAAA,MAAI,MAAC,WAAW7B,QAAQoC,kBAC9B,UAAC,oBAAA,UAAA,EACC,MAAI,MACJ,cAAY3B,OAAOuB,KAAKC,OAAOI,WAC/B,SAAS,MACP1B,sBACIL,eAAe;AAAA,MAAEiB,MAAM;AAAA,MAAe9B;AAAAA,IAAI,CAAA,IAC1CY,UAAU;AAAA,MACRiC,SAAS,CAAC;AAAA,QAAEf,MAAM;AAAA,QAAe9B;AAAAA,MAAAA,CAAI;AAAA,MACrC8C,QAAQ9B,OAAOuB,KAAKC;AAAAA,IAAAA,CACrB,GAEP,UAAUvB,UAEV,UAAC,oBAAA,YAAA,CAAA,CAAU,EACb,CAAA,GACF;AAAA,EACF,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"Rule.js","sources":["../../../../../src/components/QueryBuilder/Rule/Rule.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { Delete } from \"@hitachivantara/uikit-react-icons\";\nimport { useMediaQuery, useTheme } from \"@mui/material\";\n\nimport { HvGrid } from \"@core/components/Grid\";\nimport { IconButton } from \"@core/utils/IconButton\";\nimport { useDefaultProps } from \"@core/hooks\";\nimport { ExtractNames } from \"@core/utils\";\n\nimport { useQueryBuilderContext } from \"../Context\";\nimport { Attribute } from \"./Attribute\";\nimport { Operator } from \"./Operator\";\nimport { Value } from \"./Value\";\nimport { staticClasses, useClasses } from \"./Rule.styles\";\n\nexport { staticClasses as queryBuilderRuleClasses };\n\nexport type HvQueryBuilderRuleClasses = ExtractNames<typeof useClasses>;\n\nexport interface RuleProps {\n  id: React.Key;\n  combinator: string;\n  attribute?: string;\n  operator?: string;\n  value?: any;\n  disabled?: boolean;\n  isInvalid: boolean;\n  classes?: HvQueryBuilderRuleClasses;\n}\n\nexport const Rule = (props: RuleProps) => {\n  const {\n    id,\n    combinator,\n    attribute,\n    operator,\n    value,\n    disabled,\n    isInvalid,\n    classes: classesProp,\n  } = useDefaultProps(\"HvQueryBuilderRule\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const {\n    askAction,\n    dispatchAction,\n    attributes,\n    operators,\n    labels,\n    readOnly,\n    disableConfirmation,\n  } = useQueryBuilderContext();\n\n  const theme = useTheme();\n\n  const isMdDown = useMediaQuery(theme.breakpoints.down(\"md\"));\n\n  const availableOperators = useMemo(() => {\n    const attributeSpec =\n      attribute != null && attributes ? attributes[attribute] : null;\n    if (attributeSpec != null) {\n      const typeOperators = operators[attributeSpec.type];\n      if (typeOperators != null) {\n        return typeOperators.reduce(\n          (count, item) =>\n            count + (item.combinators.includes(combinator) ? 1 : 0),\n          0\n        );\n      }\n    }\n\n    return -1;\n  }, [attribute, attributes, combinator, operators]);\n\n  const shouldShowValueInput =\n    operator !== \"Empty\" && operator !== \"IsNotEmpty\";\n\n  return (\n    <HvGrid\n      container\n      className={cx(classes.root, { [classes.isMdDown]: isMdDown })}\n      spacing={0}\n    >\n      <HvGrid item xs={12} md={3}>\n        <Attribute\n          attribute={attribute}\n          id={id}\n          disabled={disabled}\n          isInvalid={isInvalid}\n        />\n      </HvGrid>\n      {attribute != null && availableOperators > 0 && (\n        <HvGrid item xs={12} md={3}>\n          <Operator\n            id={id}\n            combinator={combinator}\n            attribute={attribute}\n            operator={operator}\n          />\n        </HvGrid>\n      )}\n      {attribute != null && (operator != null || availableOperators === 0) && (\n        <HvGrid item xs={12} md>\n          {shouldShowValueInput && (\n            <Value\n              attribute={attribute}\n              id={id}\n              operator={operator}\n              value={value}\n            />\n          )}\n        </HvGrid>\n      )}\n      <HvGrid item className={classes.actionsContainer}>\n        <IconButton\n          placement=\"bottom\"\n          title={labels.rule.delete.tooltip || labels.rule.delete.ariaLabel}\n          onClick={() =>\n            disableConfirmation\n              ? dispatchAction({ type: \"remove-node\", id })\n              : askAction({\n                  actions: [{ type: \"remove-node\", id }],\n                  dialog: labels.rule.delete,\n                })\n          }\n          disabled={readOnly}\n        >\n          <Delete role=\"none\" />\n        </IconButton>\n      </HvGrid>\n    </HvGrid>\n  );\n};\n"],"names":["Rule","props","id","combinator","attribute","operator","value","disabled","isInvalid","classes","classesProp","useDefaultProps","cx","useClasses","askAction","dispatchAction","attributes","operators","labels","readOnly","disableConfirmation","useQueryBuilderContext","theme","useTheme","isMdDown","useMediaQuery","breakpoints","down","availableOperators","useMemo","attributeSpec","typeOperators","type","reduce","count","item","combinators","includes","shouldShowValueInput","root","actionsContainer","rule","delete","tooltip","ariaLabel","actions","dialog"],"mappings":";;;;;;;;;;;;;AA8BaA,MAAAA,OAAOA,CAACC,UAAqB;AAClC,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,EAAAA,IACPC,gBAAgB,sBAAsBV,KAAK;AAEzC,QAAA;AAAA,IAAEQ;AAAAA,IAASG;AAAAA,EAAAA,IAAOC,WAAWH,WAAW;AAExC,QAAA;AAAA,IACJI;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,MACEC,uBAAuB;AAE3B,QAAMC,QAAQC;AAEd,QAAMC,WAAWC,cAAcH,MAAMI,YAAYC,KAAK,IAAI,CAAC;AAErDC,QAAAA,qBAAqBC,QAAQ,MAAM;AACvC,UAAMC,gBACJ1B,aAAa,QAAQY,aAAaA,WAAWZ,SAAS,IAAI;AAC5D,QAAI0B,iBAAiB,MAAM;AACnBC,YAAAA,gBAAgBd,UAAUa,cAAcE,IAAI;AAClD,UAAID,iBAAiB,MAAM;AACzB,eAAOA,cAAcE,OACnB,CAACC,OAAOC,SACND,SAASC,KAAKC,YAAYC,SAASlC,UAAU,IAAI,IAAI,IACvD,CACF;AAAA,MACF;AAAA,IACF;AAEO,WAAA;AAAA,KACN,CAACC,WAAWY,YAAYb,YAAYc,SAAS,CAAC;AAE3CqB,QAAAA,uBACJjC,aAAa,WAAWA,aAAa;AAEvC,8BACG,QACC,EAAA,WAAS,MACT,WAAWO,GAAGH,QAAQ8B,MAAM;AAAA,IAAE,CAAC9B,QAAQe,QAAQ,GAAGA;AAAAA,EAAAA,CAAU,GAC5D,SAAS,GAET,UAAA;AAAA,IAAA,oBAAC,QAAO,EAAA,MAAI,MAAC,IAAI,IAAI,IAAI,GACvB,UAAA,oBAAC,WACC,EAAA,WACA,IACA,UACA,UAAqB,CAAA,GAEzB;AAAA,IACCpB,aAAa,QAAQwB,qBAAqB,KACxC,oBAAA,QAAA,EAAO,MAAI,MAAC,IAAI,IAAI,IAAI,GACvB,UAAC,oBAAA,UAAA,EACC,IACA,YACA,WACA,SAAmB,CAAA,GAEvB;AAAA,IAEDxB,aAAa,SAASC,YAAY,QAAQuB,uBAAuB,MAChE,oBAAC,UAAO,MAAI,MAAC,IAAI,IAAI,IAAE,MACpBU,UACC,wBAAA,oBAAC,SACC,WACA,IACA,UACA,MAAA,CAEH,EACH,CAAA;AAAA,IAEF,oBAAC,UAAO,MAAI,MAAC,WAAW7B,QAAQ+B,kBAC9B,UAAC,oBAAA,YAAA,EACC,WAAU,UACV,OAAOtB,OAAOuB,KAAKC,OAAOC,WAAWzB,OAAOuB,KAAKC,OAAOE,WACxD,SAAS,MACPxB,sBACIL,eAAe;AAAA,MAAEiB,MAAM;AAAA,MAAe9B;AAAAA,IAAI,CAAA,IAC1CY,UAAU;AAAA,MACR+B,SAAS,CAAC;AAAA,QAAEb,MAAM;AAAA,QAAe9B;AAAAA,MAAAA,CAAI;AAAA,MACrC4C,QAAQ5B,OAAOuB,KAAKC;AAAAA,IACrB,CAAA,GAEP,UAAUvB,UAEV,8BAAC,QAAO,EAAA,MAAK,QAAM,EAAA,CACrB,EACF,CAAA;AAAA,EACF,EAAA,CAAA;AAEJ;"}

package/dist/esm/components/QueryBuilder/RuleGroup/RuleGroup.js

@@ -1,7 +1,7 @@
 import { jsxs, Fragment, jsx } from "@emotion/react/jsx-runtime";
 import { useCallback } from "react";
 import { Add, Delete, Info } from "@hitachivantara/uikit-react-icons";
-import { withTooltip } from "../../../hocs/withTooltip.js";
+import { IconButton } from "../../../utils/IconButton.js";
 import { useQueryBuilderContext } from "../Context.js";
 import { useClasses } from "../QueryBuilder.styles.js";
 import { HvButton } from "../../Button/Button.js";
@@ -44,9 +44,6 @@ const RuleGroup = ({
       });
     }, disabled: readOnly, startIcon: /* @__PURE__ */ jsx(Add, {}), children: level === 0 && labels.query?.addGroup?.label != null ? labels.query?.addGroup?.label : labels.group.addGroup.label }) })
   ] });
-  const DeleteIcon = withTooltip(() => /* @__PURE__ */ jsx(Delete, { className: cx({
-    [classes.topRemoveButtonDisabled]: readOnly
-  }) }), level === 0 && labels.query?.delete?.tooltip ? labels.query?.delete?.tooltip : labels.group.delete.tooltip, "top");
   const onClickCombinator = useCallback((item) => {
     dispatchAction({
       type: "set-combinator",
@@ -58,8 +55,8 @@ const RuleGroup = ({
     [classes.topGroup]: level === 0,
     [classes.subGroup]: level > 0
   }), children: [
-    /* @__PURE__ */ jsx(HvMultiButton, { className: cx(classes.combinator, classes.topCombinator), disabled: readOnly, children: combinators && combinators.map((item) => /* @__PURE__ */ jsx(HvButton, { className: classes.combinatorButton, selected: item.operand === combinator, onClick: () => item.operand && onClickCombinator(item), disabled: readOnly, size: "xs", children: item.label }, item.operand)) }),
-    /* @__PURE__ */ jsx("div", { className: cx(classes.buttonBackground, classes.topRemoveButton), children: /* @__PURE__ */ jsx(HvButton, { icon: true, className: classes.removeButton, onClick: () => disableConfirmation ? dispatchAction({
+    /* @__PURE__ */ jsx(HvMultiButton, { className: cx(classes.combinator, classes.topCombinator), disabled: readOnly, children: combinators?.map((item) => /* @__PURE__ */ jsx(HvButton, { className: classes.combinatorButton, selected: item.operand === combinator, onClick: () => item.operand && onClickCombinator(item), disabled: readOnly, size: "xs", children: item.label }, item.operand)) }),
+    /* @__PURE__ */ jsx("div", { className: cx(classes.buttonBackground, classes.topRemoveButton), children: /* @__PURE__ */ jsx(IconButton, { className: classes.removeButton, onClick: () => disableConfirmation ? dispatchAction({
       type: "remove-node",
       id
     }) : askAction({
@@ -68,7 +65,9 @@ const RuleGroup = ({
         id
       }],
       dialog: level === 0 && labels.query?.delete != null ? labels.query.delete : labels.group.delete
-    }), "aria-label": level === 0 && labels.query?.delete?.ariaLabel ? labels.query?.delete?.ariaLabel : labels.group.delete.ariaLabel, disabled: readOnly, children: /* @__PURE__ */ jsx(DeleteIcon, {}) }) }),
+    }), title: level === 0 && labels.query?.delete?.tooltip || labels.group.delete.tooltip || level === 0 && labels.query?.delete?.ariaLabel || labels.group.delete.ariaLabel, disabled: readOnly, children: /* @__PURE__ */ jsx(Delete, { role: "none", className: cx({
+      [classes.topRemoveButtonDisabled]: readOnly
+    }) }) }) }),
     rules?.length > 0 && /* @__PURE__ */ jsx("div", { className: cx(classes.rulesContainer, {
       [classes.subRulesContainer]: level > 0,
       [classes.topRulesContainer]: level === 0