@hitachivantara/uikit-react-core 5.19.3 → 5.20.1

package/dist/cjs/components/Accordion/Accordion.cjs

@@ -1,17 +1,16 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
-const clsx = require("clsx");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const Accordion_styles = require("./Accordion.styles.cjs");
-const accordionClasses = require("./accordionClasses.cjs");
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const useControlled = require("../../hooks/useControlled.cjs");
 const setId = require("../../utils/setId.cjs");
+const Typography = require("../Typography/Typography.cjs");
 const HvAccordion = ({
   id,
   className,
-  classes,
+  classes: classesProp,
   disabled = false,
   label,
   onChange,
@@ -23,6 +22,10 @@ const HvAccordion = ({
   labelVariant = "label",
   ...others
 }) => {
+  const {
+    classes,
+    cx
+  } = Accordion_styles.useClasses(classesProp);
   const [isOpen, setIsOpen] = useControlled.useControlled(expanded, Boolean(defaultExpanded));
   const handleAction = React.useCallback((event) => {
     if (!disabled) {
@@ -62,11 +65,13 @@ const HvAccordion = ({
   const accordionContainer = setId.setId(id, "container");
   const accordionHeader = React.useMemo(() => {
     const color = disabled && ["secondary_60"] || void 0;
-    const accordionButton = /* @__PURE__ */ jsxRuntime.jsxs(Accordion_styles.StyledLabel, {
+    const accordionButton = /* @__PURE__ */ jsxRuntime.jsxs(Typography.HvTypography, {
       id: accordionHeaderId,
       component: "div",
       role: "button",
-      className: clsx.clsx(accordionClasses.default.label, classes == null ? void 0 : classes.label, disabled && clsx.clsx(accordionClasses.default.disabled, classes == null ? void 0 : classes.disabled)),
+      className: cx(classes.label, {
+        [classes.disabled]: disabled
+      }),
       disabled,
       tabIndex: 0,
       onKeyDown: handleKeyDown,
@@ -80,27 +85,30 @@ const HvAccordion = ({
         color
       }), label]
     });
-    const result = headingLevel === void 0 ? accordionButton : /* @__PURE__ */ jsxRuntime.jsx(Accordion_styles.StyledLabel, {
+    const result = headingLevel === void 0 ? accordionButton : /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, {
       component: `h${headingLevel}`,
       variant: labelVariant,
       children: accordionButton
     });
     return result;
-  }, [classes, handleClick, handleKeyDown, label, accordionHeaderId, disabled, headingLevel, isOpen, labelVariant]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(Accordion_styles.StyledRoot, {
+  }, [cx, classes, handleClick, handleKeyDown, label, accordionHeaderId, disabled, headingLevel, isOpen, labelVariant]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
     id,
-    className: clsx.clsx(className, accordionClasses.default.root, classes == null ? void 0 : classes.root),
+    className: cx(classes.root, className),
     ...others,
-    children: [accordionHeader, /* @__PURE__ */ jsxRuntime.jsx(Accordion_styles.StyledContainer, {
+    children: [accordionHeader, /* @__PURE__ */ jsxRuntime.jsx("div", {
       id: accordionContainer,
       role: "region",
       "aria-labelledby": accordionHeaderId,
-      className: clsx.clsx(accordionClasses.default.container, classes == null ? void 0 : classes.container, !isOpen && clsx.clsx(accordionClasses.default.hidden, classes == null ? void 0 : classes.hidden)),
+      className: cx(classes.container, {
+        [classes.hidden]: !isOpen
+      }),
       hidden: !isOpen,
       ...containerProps,
       children
     })]
   });
 };
+exports.accordionClasses = Accordion_styles.staticClasses;
 exports.HvAccordion = HvAccordion;
 //# sourceMappingURL=Accordion.cjs.map

package/dist/cjs/components/Accordion/Accordion.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.cjs","sources":["../../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import React, {\n  SyntheticEvent,\n  useCallback,\n  useMemo,\n  HTMLAttributes,\n} from \"react\";\nimport { clsx } from \"clsx\";\nimport { useControlled } from \"@core/hooks\";\nimport { DropDownXS, DropUpXS } from \"@hitachivantara/uikit-react-icons\";\nimport { HvBaseProps } from \"@core/types\";\nimport { setId } from \"@core/utils\";\nimport { HvTypographyVariants } from \"@core/components\";\nimport { StyledContainer, StyledLabel, StyledRoot } from \"./Accordion.styles\";\nimport accordionClasses, { HvAccordionClasses } from \"./accordionClasses\";\n\nexport interface HvAccordionProps\n  extends HvBaseProps<HTMLDivElement, \"onChange\"> {\n  /**\n   * Id to be applied to the root node of the accordion.\n   */\n  id?: string;\n  /**\n   * Class names to be applied to the accordion.\n   */\n  className?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes?: HvAccordionClasses;\n  /**\n   * The accordion label button.\n   */\n  label?: string;\n  /**\n   * The function that will be executed whenever the accordion toggles it will receive the state of the accordion\n   */\n  onChange?: (event: React.SyntheticEvent, value: boolean) => void;\n  /**\n   * Whether the accordion is open or not, if this property is defined the accordion must be fully controlled.\n   */\n  expanded?: boolean;\n  /**\n   * When uncontrolled, defines the initial expanded state.\n   */\n  defaultExpanded?: boolean;\n  /**\n   * An object containing props to be passed onto container holding the accordion children.\n   */\n  containerProps?: HTMLAttributes<HTMLDivElement>;\n  /**\n   * Heading Level to apply to accordion button if ´undefined´ the button won't have a header wrapper.\n   */\n  headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;\n  /**\n   * Is the accordion disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Typography variant for the label.\n   */\n  labelVariant?: HvTypographyVariants;\n  /**\n   * Content to be rendered\n   */\n  children: React.ReactNode;\n}\n\n/**\n * A accordion is a design element that expands in place to expose hidden information.\n */\nexport const HvAccordion = ({\n  id,\n  className,\n  classes,\n  disabled = false,\n  label,\n  onChange,\n  children,\n  expanded,\n  headingLevel,\n  defaultExpanded = false,\n  containerProps,\n  labelVariant = \"label\",\n  ...others\n}: HvAccordionProps) => {\n  const [isOpen, setIsOpen] = useControlled(expanded, Boolean(defaultExpanded));\n\n  const handleAction = useCallback(\n    (event: SyntheticEvent) => {\n      if (!disabled) {\n        onChange?.(event, isOpen);\n        setIsOpen(!isOpen);\n        return true;\n      }\n      return false;\n    },\n    [disabled, onChange, isOpen, setIsOpen]\n  );\n\n  const handleClick = useCallback(\n    (event: SyntheticEvent) => {\n      handleAction(event);\n      event.preventDefault();\n      event.stopPropagation();\n    },\n    [handleAction]\n  );\n\n  const handleKeyDown = useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      let isEventHandled = false;\n      const { key } = event;\n\n      if (\n        event.altKey ||\n        event.ctrlKey ||\n        event.metaKey ||\n        event.currentTarget !== event.target\n      ) {\n        return;\n      }\n      switch (key) {\n        case \"Enter\":\n        case \" \":\n          isEventHandled = handleAction(event);\n          break;\n        default:\n          return;\n      }\n\n      if (isEventHandled) {\n        event.preventDefault();\n        event.stopPropagation();\n      }\n    },\n    [handleAction]\n  );\n\n  const accordionHeaderId = setId(id, \"button\");\n  const accordionContainer = setId(id, \"container\");\n  const accordionHeader = useMemo(() => {\n    const color = (disabled && [\"secondary_60\"]) || undefined;\n\n    const accordionButton = (\n      <StyledLabel\n        id={accordionHeaderId}\n        component=\"div\"\n        role=\"button\"\n        className={clsx(\n          accordionClasses.label,\n          classes?.label,\n          disabled && clsx(accordionClasses.disabled, classes?.disabled)\n        )}\n        disabled={disabled}\n        tabIndex={0}\n        onKeyDown={handleKeyDown}\n        onClick={handleClick}\n        variant={labelVariant}\n        aria-expanded={isOpen}\n        aria-disabled={disabled}\n      >\n        {isOpen ? <DropUpXS color={color} /> : <DropDownXS color={color} />}\n        {label}\n      </StyledLabel>\n    );\n    const result =\n      headingLevel === undefined ? (\n        accordionButton\n      ) : (\n        <StyledLabel component={`h${headingLevel}`} variant={labelVariant}>\n          {accordionButton}\n        </StyledLabel>\n      );\n    return result;\n  }, [\n    classes,\n    handleClick,\n    handleKeyDown,\n    label,\n    accordionHeaderId,\n    disabled,\n    headingLevel,\n    isOpen,\n    labelVariant,\n  ]);\n\n  return (\n    <StyledRoot\n      id={id}\n      className={clsx(className, accordionClasses.root, classes?.root)}\n      {...others}\n    >\n      {accordionHeader}\n      <StyledContainer\n        id={accordionContainer}\n        role=\"region\"\n        aria-labelledby={accordionHeaderId}\n        className={clsx(\n          accordionClasses.container,\n          classes?.container,\n          !isOpen && clsx(accordionClasses.hidden, classes?.hidden)\n        )}\n        hidden={!isOpen}\n        {...containerProps}\n      >\n        {children}\n      </StyledContainer>\n    </StyledRoot>\n  );\n};\n"],"names":["HvAccordion","id","className","classes","disabled","label","onChange","children","expanded","headingLevel","defaultExpanded","containerProps","labelVariant","others","isOpen","setIsOpen","useControlled","Boolean","handleAction","useCallback","event","handleClick","preventDefault","stopPropagation","handleKeyDown","isEventHandled","key","altKey","ctrlKey","metaKey","currentTarget","target","accordionHeaderId","setId","accordionContainer","accordionHeader","useMemo","color","undefined","accordionButton","StyledLabel","component","role","clsx","accordionClasses","tabIndex","onKeyDown","onClick","variant","_jsx","DropUpXS","DropDownXS","result","StyledRoot","root","StyledContainer","container","hidden"],"mappings":"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"}
+{"version":3,"file":"Accordion.cjs","sources":["../../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import React, {\n  SyntheticEvent,\n  useCallback,\n  useMemo,\n  HTMLAttributes,\n} from \"react\";\n\nimport { DropDownXS, DropUpXS } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useControlled } from \"@core/hooks\";\nimport { HvBaseProps } from \"@core/types\";\nimport { ExtractNames, setId } from \"@core/utils\";\nimport { HvTypography, HvTypographyVariants } from \"@core/components\";\n\nimport { staticClasses, useClasses } from \"./Accordion.styles\";\n\nexport { staticClasses as accordionClasses };\n\nexport type HvAccordionClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvAccordionProps\n  extends HvBaseProps<HTMLDivElement, \"onChange\"> {\n  /**\n   * Id to be applied to the root node of the accordion.\n   */\n  id?: string;\n  /**\n   * Class names to be applied to the accordion.\n   */\n  className?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes?: HvAccordionClasses;\n  /**\n   * The accordion label button.\n   */\n  label?: string;\n  /**\n   * The function that will be executed whenever the accordion toggles it will receive the state of the accordion\n   */\n  onChange?: (event: React.SyntheticEvent, value: boolean) => void;\n  /**\n   * Whether the accordion is open or not, if this property is defined the accordion must be fully controlled.\n   */\n  expanded?: boolean;\n  /**\n   * When uncontrolled, defines the initial expanded state.\n   */\n  defaultExpanded?: boolean;\n  /**\n   * An object containing props to be passed onto container holding the accordion children.\n   */\n  containerProps?: HTMLAttributes<HTMLDivElement>;\n  /**\n   * Heading Level to apply to accordion button if ´undefined´ the button won't have a header wrapper.\n   */\n  headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;\n  /**\n   * Is the accordion disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Typography variant for the label.\n   */\n  labelVariant?: HvTypographyVariants;\n  /**\n   * Content to be rendered\n   */\n  children: React.ReactNode;\n}\n\n/**\n * A accordion is a design element that expands in place to expose hidden information.\n */\nexport const HvAccordion = ({\n  id,\n  className,\n  classes: classesProp,\n  disabled = false,\n  label,\n  onChange,\n  children,\n  expanded,\n  headingLevel,\n  defaultExpanded = false,\n  containerProps,\n  labelVariant = \"label\",\n  ...others\n}: HvAccordionProps) => {\n  const { classes, cx } = useClasses(classesProp);\n\n  const [isOpen, setIsOpen] = useControlled(expanded, Boolean(defaultExpanded));\n\n  const handleAction = useCallback(\n    (event: SyntheticEvent) => {\n      if (!disabled) {\n        onChange?.(event, isOpen);\n        setIsOpen(!isOpen);\n        return true;\n      }\n      return false;\n    },\n    [disabled, onChange, isOpen, setIsOpen]\n  );\n\n  const handleClick = useCallback(\n    (event: SyntheticEvent) => {\n      handleAction(event);\n      event.preventDefault();\n      event.stopPropagation();\n    },\n    [handleAction]\n  );\n\n  const handleKeyDown = useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      let isEventHandled = false;\n      const { key } = event;\n\n      if (\n        event.altKey ||\n        event.ctrlKey ||\n        event.metaKey ||\n        event.currentTarget !== event.target\n      ) {\n        return;\n      }\n      switch (key) {\n        case \"Enter\":\n        case \" \":\n          isEventHandled = handleAction(event);\n          break;\n        default:\n          return;\n      }\n\n      if (isEventHandled) {\n        event.preventDefault();\n        event.stopPropagation();\n      }\n    },\n    [handleAction]\n  );\n\n  const accordionHeaderId = setId(id, \"button\");\n  const accordionContainer = setId(id, \"container\");\n  const accordionHeader = useMemo(() => {\n    const color = (disabled && [\"secondary_60\"]) || undefined;\n\n    const accordionButton = (\n      <HvTypography\n        id={accordionHeaderId}\n        component=\"div\"\n        role=\"button\"\n        className={cx(classes.label, { [classes.disabled]: disabled })}\n        disabled={disabled}\n        tabIndex={0}\n        onKeyDown={handleKeyDown}\n        onClick={handleClick}\n        variant={labelVariant}\n        aria-expanded={isOpen}\n        aria-disabled={disabled}\n      >\n        {isOpen ? <DropUpXS color={color} /> : <DropDownXS color={color} />}\n        {label}\n      </HvTypography>\n    );\n    const result =\n      headingLevel === undefined ? (\n        accordionButton\n      ) : (\n        <HvTypography component={`h${headingLevel}`} variant={labelVariant}>\n          {accordionButton}\n        </HvTypography>\n      );\n    return result;\n  }, [\n    cx,\n    classes,\n    handleClick,\n    handleKeyDown,\n    label,\n    accordionHeaderId,\n    disabled,\n    headingLevel,\n    isOpen,\n    labelVariant,\n  ]);\n\n  return (\n    <div id={id} className={cx(classes.root, className)} {...others}>\n      {accordionHeader}\n      <div\n        id={accordionContainer}\n        role=\"region\"\n        aria-labelledby={accordionHeaderId}\n        className={cx(classes.container, { [classes.hidden]: !isOpen })}\n        hidden={!isOpen}\n        {...containerProps}\n      >\n        {children}\n      </div>\n    </div>\n  );\n};\n"],"names":["HvAccordion","id","className","classes","classesProp","disabled","label","onChange","children","expanded","headingLevel","defaultExpanded","containerProps","labelVariant","others","cx","useClasses","isOpen","setIsOpen","useControlled","Boolean","handleAction","useCallback","event","handleClick","preventDefault","stopPropagation","handleKeyDown","isEventHandled","key","altKey","ctrlKey","metaKey","currentTarget","target","accordionHeaderId","setId","accordionContainer","accordionHeader","useMemo","color","undefined","accordionButton","HvTypography","component","role","tabIndex","onKeyDown","onClick","variant","_jsx","DropUpXS","DropDownXS","result","root","container","hidden"],"mappings":"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"}

package/dist/cjs/components/Accordion/Accordion.styles.cjs

@@ -1,81 +1,57 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const _styled = require("@emotion/styled/base");
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const Typography = require("../Typography/Typography.cjs");
+const classes = require("../../utils/classes.cjs");
 const focusUtils = require("../../utils/focusUtils.cjs");
-const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
-const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
-function _EMOTION_STRINGIFIED_CSS_ERROR__() {
-  return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
-}
-const StyledRoot = /* @__PURE__ */ _styled__default.default("div", process.env.NODE_ENV === "production" ? {
-  target: "e86r8k02"
-} : {
-  target: "e86r8k02",
-  label: "StyledRoot"
-})(process.env.NODE_ENV === "production" ? {
-  name: "181xssw",
-  styles: "& + root{padding-top:8px;}"
-} : {
-  name: "181xssw",
-  styles: "& + root{padding-top:8px;}",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQWNjb3JkaW9uL0FjY29yZGlvbi5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUswQiIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay9odi11aWtpdC1yZWFjdC9odi11aWtpdC1yZWFjdC9wYWNrYWdlcy9jb3JlL3NyYy9jb21wb25lbnRzL0FjY29yZGlvbi9BY2NvcmRpb24uc3R5bGVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IHsgdGhlbWUgfSBmcm9tIFwiQGhpdGFjaGl2YW50YXJhL3Vpa2l0LXN0eWxlc1wiO1xuaW1wb3J0IHsgSHZUeXBvZ3JhcGh5IH0gZnJvbSBcIkBjb3JlL2NvbXBvbmVudHNcIjtcbmltcG9ydCB7IG91dGxpbmVTdHlsZXMgfSBmcm9tIFwiQGNvcmUvdXRpbHNcIjtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZFJvb3QgPSBzdHlsZWQoXCJkaXZcIikoe1xuICBcIiYgKyByb290XCI6IHtcbiAgICBwYWRkaW5nVG9wOiA4LFxuICB9LFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRDb250YWluZXIgPSBzdHlsZWQoXCJkaXZcIikoXG4gICh7IGhpZGRlbiB9OiB7IGhpZGRlbjogYm9vbGVhbiB9KSA9PiAoe1xuICAgIHBhZGRpbmdUb3A6IDgsXG4gICAgaGVpZ2h0OiBcImF1dG9cIixcblxuICAgIC4uLihoaWRkZW4gJiYge1xuICAgICAgaGVpZ2h0OiAwLFxuICAgICAgZGlzcGxheTogXCJub25lXCIsXG4gICAgfSksXG4gIH0pXG4pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkTGFiZWwgPSBzdHlsZWQoSHZUeXBvZ3JhcGh5KShcbiAgKHsgZGlzYWJsZWQgfTogeyBkaXNhYmxlZD86IGJvb2xlYW4gfSkgPT4gKHtcbiAgICB3aWR0aDogXCIxMDAlXCIsXG4gICAgZGlzcGxheTogXCJmbGV4XCIsXG4gICAganVzdGlmeUNvbnRlbnQ6IFwiZmxleC1zdGFydFwiLFxuICAgIGFsaWduSXRlbXM6IFwiY2VudGVyXCIsXG4gICAgaGVpZ2h0OiBcIjMycHhcIixcblxuICAgIC4uLighZGlzYWJsZWQgJiYge1xuICAgICAgXCImOmhvdmVyXCI6IHtcbiAgICAgICAgYmFja2dyb3VuZDogdGhlbWUuY29sb3JzLmF0bW8zLFxuICAgICAgfSxcbiAgICAgIFwiJjpmb2N1c1wiOiB7XG4gICAgICAgIGJhY2tncm91bmQ6IHRoZW1lLmNvbG9ycy5hdG1vMyxcbiAgICAgIH0sXG4gICAgfSksXG5cbiAgICBcIiZbZGlzYWJsZWRdLCAmOmFjdGl2ZVwiOiB7XG4gICAgICBvdXRsaW5lOiBcIm5vbmVcIixcbiAgICB9LFxuXG4gICAgXCImOmZvY3VzXCI6IHtcbiAgICAgIG91dGxpbmU6IFwibm9uZVwiLFxuICAgIH0sXG5cbiAgICBcIiY6Zm9jdXMtdmlzaWJsZVwiOiB7XG4gICAgICAuLi5vdXRsaW5lU3R5bGVzLFxuICAgIH0sXG5cbiAgICAvLyBjdXJzb3JcbiAgICBjdXJzb3I6IFwicG9pbnRlclwiLFxuICAgIC4uLihkaXNhYmxlZCAmJiB7XG4gICAgICBjdXJzb3I6IFwibm90LWFsbG93ZWRcIixcbiAgICAgIGNvbG9yOiB0aGVtZS5jb2xvcnMuc2Vjb25kYXJ5XzYwLFxuICAgIH0pLFxuICB9KVxuKTtcbiJdfQ== */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-const StyledContainer = /* @__PURE__ */ _styled__default.default("div", process.env.NODE_ENV === "production" ? {
-  target: "e86r8k01"
-} : {
-  target: "e86r8k01",
-  label: "StyledContainer"
-})(({
-  hidden
-}) => ({
-  paddingTop: 8,
-  height: "auto",
-  ...hidden && {
+const {
+  staticClasses,
+  useClasses
+} = classes.createClasses("HvAccordion", {
+  root: {
+    "& + root": {
+      paddingTop: 8
+    }
+  },
+  hidden: {
     height: 0,
     display: "none"
-  }
-}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQWNjb3JkaW9uL0FjY29yZGlvbi5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVcrQiIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay9odi11aWtpdC1yZWFjdC9odi11aWtpdC1yZWFjdC9wYWNrYWdlcy9jb3JlL3NyYy9jb21wb25lbnRzL0FjY29yZGlvbi9BY2NvcmRpb24uc3R5bGVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IHsgdGhlbWUgfSBmcm9tIFwiQGhpdGFjaGl2YW50YXJhL3Vpa2l0LXN0eWxlc1wiO1xuaW1wb3J0IHsgSHZUeXBvZ3JhcGh5IH0gZnJvbSBcIkBjb3JlL2NvbXBvbmVudHNcIjtcbmltcG9ydCB7IG91dGxpbmVTdHlsZXMgfSBmcm9tIFwiQGNvcmUvdXRpbHNcIjtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZFJvb3QgPSBzdHlsZWQoXCJkaXZcIikoe1xuICBcIiYgKyByb290XCI6IHtcbiAgICBwYWRkaW5nVG9wOiA4LFxuICB9LFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRDb250YWluZXIgPSBzdHlsZWQoXCJkaXZcIikoXG4gICh7IGhpZGRlbiB9OiB7IGhpZGRlbjogYm9vbGVhbiB9KSA9PiAoe1xuICAgIHBhZGRpbmdUb3A6IDgsXG4gICAgaGVpZ2h0OiBcImF1dG9cIixcblxuICAgIC4uLihoaWRkZW4gJiYge1xuICAgICAgaGVpZ2h0OiAwLFxuICAgICAgZGlzcGxheTogXCJub25lXCIsXG4gICAgfSksXG4gIH0pXG4pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkTGFiZWwgPSBzdHlsZWQoSHZUeXBvZ3JhcGh5KShcbiAgKHsgZGlzYWJsZWQgfTogeyBkaXNhYmxlZD86IGJvb2xlYW4gfSkgPT4gKHtcbiAgICB3aWR0aDogXCIxMDAlXCIsXG4gICAgZGlzcGxheTogXCJmbGV4XCIsXG4gICAganVzdGlmeUNvbnRlbnQ6IFwiZmxleC1zdGFydFwiLFxuICAgIGFsaWduSXRlbXM6IFwiY2VudGVyXCIsXG4gICAgaGVpZ2h0OiBcIjMycHhcIixcblxuICAgIC4uLighZGlzYWJsZWQgJiYge1xuICAgICAgXCImOmhvdmVyXCI6IHtcbiAgICAgICAgYmFja2dyb3VuZDogdGhlbWUuY29sb3JzLmF0bW8zLFxuICAgICAgfSxcbiAgICAgIFwiJjpmb2N1c1wiOiB7XG4gICAgICAgIGJhY2tncm91bmQ6IHRoZW1lLmNvbG9ycy5hdG1vMyxcbiAgICAgIH0sXG4gICAgfSksXG5cbiAgICBcIiZbZGlzYWJsZWRdLCAmOmFjdGl2ZVwiOiB7XG4gICAgICBvdXRsaW5lOiBcIm5vbmVcIixcbiAgICB9LFxuXG4gICAgXCImOmZvY3VzXCI6IHtcbiAgICAgIG91dGxpbmU6IFwibm9uZVwiLFxuICAgIH0sXG5cbiAgICBcIiY6Zm9jdXMtdmlzaWJsZVwiOiB7XG4gICAgICAuLi5vdXRsaW5lU3R5bGVzLFxuICAgIH0sXG5cbiAgICAvLyBjdXJzb3JcbiAgICBjdXJzb3I6IFwicG9pbnRlclwiLFxuICAgIC4uLihkaXNhYmxlZCAmJiB7XG4gICAgICBjdXJzb3I6IFwibm90LWFsbG93ZWRcIixcbiAgICAgIGNvbG9yOiB0aGVtZS5jb2xvcnMuc2Vjb25kYXJ5XzYwLFxuICAgIH0pLFxuICB9KVxuKTtcbiJdfQ== */");
-const StyledLabel = /* @__PURE__ */ _styled__default.default(Typography.HvTypography, process.env.NODE_ENV === "production" ? {
-  target: "e86r8k00"
-} : {
-  target: "e86r8k00",
-  label: "StyledLabel"
-})(({
-  disabled
-}) => ({
-  width: "100%",
-  display: "flex",
-  justifyContent: "flex-start",
-  alignItems: "center",
-  height: "32px",
-  ...!disabled && {
-    "&:hover": {
-      background: uikitStyles.theme.colors.atmo3
+  },
+  container: {
+    paddingTop: 8,
+    height: "auto"
+  },
+  label: {
+    width: "100%",
+    display: "flex",
+    justifyContent: "flex-start",
+    alignItems: "center",
+    height: "32px",
+    "&[disabled], &:active": {
+      outline: "none"
     },
     "&:focus": {
+      outline: "none",
       background: uikitStyles.theme.colors.atmo3
-    }
-  },
-  "&[disabled], &:active": {
-    outline: "none"
-  },
-  "&:focus": {
-    outline: "none"
-  },
-  "&:focus-visible": {
-    ...focusUtils.outlineStyles
+    },
+    "&:hover": {
+      background: uikitStyles.theme.colors.atmo3
+    },
+    "&:focus-visible": {
+      ...focusUtils.outlineStyles
+    },
+    cursor: "pointer"
   },
-  // cursor
-  cursor: "pointer",
-  ...disabled && {
+  disabled: {
     cursor: "not-allowed",
-    color: uikitStyles.theme.colors.secondary_60
+    color: uikitStyles.theme.colors.secondary_60,
+    "&:focus": {
+      background: "none"
+    },
+    "&:hover": {
+      background: "none"
+    }
   }
-}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQWNjb3JkaW9uL0FjY29yZGlvbi5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXVCMkIiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvaHYtdWlraXQtcmVhY3QvaHYtdWlraXQtcmVhY3QvcGFja2FnZXMvY29yZS9zcmMvY29tcG9uZW50cy9BY2NvcmRpb24vQWNjb3JkaW9uLnN0eWxlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCB7IHRoZW1lIH0gZnJvbSBcIkBoaXRhY2hpdmFudGFyYS91aWtpdC1zdHlsZXNcIjtcbmltcG9ydCB7IEh2VHlwb2dyYXBoeSB9IGZyb20gXCJAY29yZS9jb21wb25lbnRzXCI7XG5pbXBvcnQgeyBvdXRsaW5lU3R5bGVzIH0gZnJvbSBcIkBjb3JlL3V0aWxzXCI7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRSb290ID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgXCImICsgcm9vdFwiOiB7XG4gICAgcGFkZGluZ1RvcDogOCxcbiAgfSxcbn0pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkQ29udGFpbmVyID0gc3R5bGVkKFwiZGl2XCIpKFxuICAoeyBoaWRkZW4gfTogeyBoaWRkZW46IGJvb2xlYW4gfSkgPT4gKHtcbiAgICBwYWRkaW5nVG9wOiA4LFxuICAgIGhlaWdodDogXCJhdXRvXCIsXG5cbiAgICAuLi4oaGlkZGVuICYmIHtcbiAgICAgIGhlaWdodDogMCxcbiAgICAgIGRpc3BsYXk6IFwibm9uZVwiLFxuICAgIH0pLFxuICB9KVxuKTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZExhYmVsID0gc3R5bGVkKEh2VHlwb2dyYXBoeSkoXG4gICh7IGRpc2FibGVkIH06IHsgZGlzYWJsZWQ/OiBib29sZWFuIH0pID0+ICh7XG4gICAgd2lkdGg6IFwiMTAwJVwiLFxuICAgIGRpc3BsYXk6IFwiZmxleFwiLFxuICAgIGp1c3RpZnlDb250ZW50OiBcImZsZXgtc3RhcnRcIixcbiAgICBhbGlnbkl0ZW1zOiBcImNlbnRlclwiLFxuICAgIGhlaWdodDogXCIzMnB4XCIsXG5cbiAgICAuLi4oIWRpc2FibGVkICYmIHtcbiAgICAgIFwiJjpob3ZlclwiOiB7XG4gICAgICAgIGJhY2tncm91bmQ6IHRoZW1lLmNvbG9ycy5hdG1vMyxcbiAgICAgIH0sXG4gICAgICBcIiY6Zm9jdXNcIjoge1xuICAgICAgICBiYWNrZ3JvdW5kOiB0aGVtZS5jb2xvcnMuYXRtbzMsXG4gICAgICB9LFxuICAgIH0pLFxuXG4gICAgXCImW2Rpc2FibGVkXSwgJjphY3RpdmVcIjoge1xuICAgICAgb3V0bGluZTogXCJub25lXCIsXG4gICAgfSxcblxuICAgIFwiJjpmb2N1c1wiOiB7XG4gICAgICBvdXRsaW5lOiBcIm5vbmVcIixcbiAgICB9LFxuXG4gICAgXCImOmZvY3VzLXZpc2libGVcIjoge1xuICAgICAgLi4ub3V0bGluZVN0eWxlcyxcbiAgICB9LFxuXG4gICAgLy8gY3Vyc29yXG4gICAgY3Vyc29yOiBcInBvaW50ZXJcIixcbiAgICAuLi4oZGlzYWJsZWQgJiYge1xuICAgICAgY3Vyc29yOiBcIm5vdC1hbGxvd2VkXCIsXG4gICAgICBjb2xvcjogdGhlbWUuY29sb3JzLnNlY29uZGFyeV82MCxcbiAgICB9KSxcbiAgfSlcbik7XG4iXX0= */");
-exports.StyledContainer = StyledContainer;
-exports.StyledLabel = StyledLabel;
-exports.StyledRoot = StyledRoot;
+});
+exports.staticClasses = staticClasses;
+exports.useClasses = useClasses;
 //# sourceMappingURL=Accordion.styles.cjs.map

package/dist/cjs/components/Accordion/Accordion.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.styles.cjs","sources":["../../../../src/components/Accordion/Accordion.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { HvTypography } from \"@core/components\";\nimport { outlineStyles } from \"@core/utils\";\n\nexport const StyledRoot = styled(\"div\")({\n  \"& + root\": {\n    paddingTop: 8,\n  },\n});\n\nexport const StyledContainer = styled(\"div\")(\n  ({ hidden }: { hidden: boolean }) => ({\n    paddingTop: 8,\n    height: \"auto\",\n\n    ...(hidden && {\n      height: 0,\n      display: \"none\",\n    }),\n  })\n);\n\nexport const StyledLabel = styled(HvTypography)(\n  ({ disabled }: { disabled?: boolean }) => ({\n    width: \"100%\",\n    display: \"flex\",\n    justifyContent: \"flex-start\",\n    alignItems: \"center\",\n    height: \"32px\",\n\n    ...(!disabled && {\n      \"&:hover\": {\n        background: theme.colors.atmo3,\n      },\n      \"&:focus\": {\n        background: theme.colors.atmo3,\n      },\n    }),\n\n    \"&[disabled], &:active\": {\n      outline: \"none\",\n    },\n\n    \"&:focus\": {\n      outline: \"none\",\n    },\n\n    \"&:focus-visible\": {\n      ...outlineStyles,\n    },\n\n    // cursor\n    cursor: \"pointer\",\n    ...(disabled && {\n      cursor: \"not-allowed\",\n      color: theme.colors.secondary_60,\n    }),\n  })\n);\n"],"names":["StyledRoot","_styled","process","env","NODE_ENV","target","label","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","StyledContainer","hidden","paddingTop","height","display","StyledLabel","HvTypography","disabled","width","justifyContent","alignItems","background","theme","colors","atmo3","outline","outlineStyles","cursor","color","secondary_60"],"mappings":";;;;;;;;;;;AAKO,MAAMA,aAAoBC,iCAAA,QAAA,OAAKC,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAACJ,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAG,MAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAD,MAAA;AAAA,EAAAC,QAAA;AAAA,EAAAC,KAAA;AAAA,EAAAC,UAAAC;AAAA,CAItC;AAEM,MAAMC,kBAAyBX,iCAAA,QAAA,OAAKC,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EACzC,CAAC;AAAA,EAAEO;AAA4B,OAAO;AAAA,EACpCC,YAAY;AAAA,EACZC,QAAQ;AAAA,EAER,GAAIF,UAAU;AAAA,IACZE,QAAQ;AAAA,IACRC,SAAS;AAAA,EACX;AACF,IAAEd,QAAAC,IAAAC,0qEACJ;AAEO,MAAMa,cAAqBC,iCAAAA,QAAAA,WAAAA,cAAYhB,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAC5C,CAAC;AAAA,EAAEa;AAAiC,OAAO;AAAA,EACzCC,OAAO;AAAA,EACPJ,SAAS;AAAA,EACTK,gBAAgB;AAAA,EAChBC,YAAY;AAAA,EACZP,QAAQ;AAAA,EAER,GAAI,CAACI,YAAY;AAAA,IACf,WAAW;AAAA,MACTI,YAAYC,YAAAA,MAAMC,OAAOC;AAAAA,IAC3B;AAAA,IACA,WAAW;AAAA,MACTH,YAAYC,YAAAA,MAAMC,OAAOC;AAAAA,IAC3B;AAAA,EACF;AAAA,EAEA,yBAAyB;AAAA,IACvBC,SAAS;AAAA,EACX;AAAA,EAEA,WAAW;AAAA,IACTA,SAAS;AAAA,EACX;AAAA,EAEA,mBAAmB;AAAA,IACjB,GAAGC,WAAAA;AAAAA,EACL;AAAA;AAAA,EAGAC,QAAQ;AAAA,EACR,GAAIV,YAAY;AAAA,IACdU,QAAQ;AAAA,IACRC,OAAON,YAAAA,MAAMC,OAAOM;AAAAA,EACtB;AACF,IAAE7B,QAAAC,IAAAC,0qEACJ;;;;"}
+{"version":3,"file":"Accordion.styles.cjs","sources":["../../../../src/components/Accordion/Accordion.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\nimport { createClasses, outlineStyles } from \"@core/utils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvAccordion\", {\n  root: {\n    \"& + root\": {\n      paddingTop: 8,\n    },\n  },\n  hidden: { height: 0, display: \"none\" },\n  container: { paddingTop: 8, height: \"auto\" },\n  label: {\n    width: \"100%\",\n    display: \"flex\",\n    justifyContent: \"flex-start\",\n    alignItems: \"center\",\n    height: \"32px\",\n\n    \"&[disabled], &:active\": {\n      outline: \"none\",\n    },\n\n    \"&:focus\": {\n      outline: \"none\",\n      background: theme.colors.atmo3,\n    },\n\n    \"&:hover\": {\n      background: theme.colors.atmo3,\n    },\n\n    \"&:focus-visible\": {\n      ...outlineStyles,\n    },\n\n    cursor: \"pointer\",\n  },\n  disabled: {\n    cursor: \"not-allowed\",\n    color: theme.colors.secondary_60,\n\n    \"&:focus\": {\n      background: \"none\",\n    },\n\n    \"&:hover\": {\n      background: \"none\",\n    },\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","paddingTop","hidden","height","display","container","label","width","justifyContent","alignItems","outline","background","theme","colors","atmo3","outlineStyles","cursor","disabled","color","secondary_60"],"mappings":";;;;;AAGa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,eAAe;AAAA,EACxEC,MAAM;AAAA,IACJ,YAAY;AAAA,MACVC,YAAY;AAAA,IACd;AAAA,EACF;AAAA,EACAC,QAAQ;AAAA,IAAEC,QAAQ;AAAA,IAAGC,SAAS;AAAA,EAAO;AAAA,EACrCC,WAAW;AAAA,IAAEJ,YAAY;AAAA,IAAGE,QAAQ;AAAA,EAAO;AAAA,EAC3CG,OAAO;AAAA,IACLC,OAAO;AAAA,IACPH,SAAS;AAAA,IACTI,gBAAgB;AAAA,IAChBC,YAAY;AAAA,IACZN,QAAQ;AAAA,IAER,yBAAyB;AAAA,MACvBO,SAAS;AAAA,IACX;AAAA,IAEA,WAAW;AAAA,MACTA,SAAS;AAAA,MACTC,YAAYC,YAAAA,MAAMC,OAAOC;AAAAA,IAC3B;AAAA,IAEA,WAAW;AAAA,MACTH,YAAYC,YAAAA,MAAMC,OAAOC;AAAAA,IAC3B;AAAA,IAEA,mBAAmB;AAAA,MACjB,GAAGC,WAAAA;AAAAA,IACL;AAAA,IAEAC,QAAQ;AAAA,EACV;AAAA,EACAC,UAAU;AAAA,IACRD,QAAQ;AAAA,IACRE,OAAON,YAAAA,MAAMC,OAAOM;AAAAA,IAEpB,WAAW;AAAA,MACTR,YAAY;AAAA,IACd;AAAA,IAEA,WAAW;AAAA,MACTA,YAAY;AAAA,IACd;AAAA,EACF;AACF,CAAC;;;"}

package/dist/cjs/components/ActionsGeneric/ActionsGeneric.cjs

@@ -1,18 +1,18 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const clsx = require("clsx");
 const React = require("react");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const uikitStyles = require("@hitachivantara/uikit-styles");
+const hexToRgbA = require("../../utils/hexToRgbA.cjs");
 const ActionsGeneric_styles = require("./ActionsGeneric.styles.cjs");
-const actionsGenericClasses = require("./actionsGenericClasses.cjs");
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const DropDownMenu = require("../DropDownMenu/DropDownMenu.cjs");
 const useTheme = require("../../hooks/useTheme.cjs");
 const setId = require("../../utils/setId.cjs");
+const Button = require("../Button/Button.cjs");
 const HvActionsGeneric = ({
   id,
-  classes,
+  classes: classesProp,
   className,
   category = "secondaryGhost",
   disabled = false,
@@ -21,6 +21,11 @@ const HvActionsGeneric = ({
   maxVisibleActions = Infinity,
   ...others
 }) => {
+  const {
+    classes,
+    cx,
+    css
+  } = ActionsGeneric_styles.useClasses(classesProp);
   const {
     activeTheme,
     selectedMode
@@ -40,14 +45,17 @@ const HvActionsGeneric = ({
     const renderedIcon = React.isValidElement(icon) ? icon : icon == null ? void 0 : icon({
       isDisabled: disabled
     });
-    return /* @__PURE__ */ jsxRuntime.jsx(ActionsGeneric_styles.StyledButton, {
+    return /* @__PURE__ */ jsxRuntime.jsx(Button.HvButton, {
       id: actionId,
       variant: category,
-      className: clsx.clsx(actionsGenericClasses.default.button, classes == null ? void 0 : classes.button),
+      className: cx(css({
+        "&:hover": {
+          backgroundColor: hexToRgbA.default(((_a = activeTheme == null ? void 0 : activeTheme.colors) == null ? void 0 : _a.modes[selectedMode].base_light) || uikitStyles.theme.colors.base_light, 0.3)
+        }
+      }), classes.button),
       disabled: actDisabled ?? disabled,
       onClick: (event) => actionsCallback == null ? void 0 : actionsCallback(event, id || "", action),
       startIcon: renderedIcon,
-      $baseColor: ((_a = activeTheme == null ? void 0 : activeTheme.colors) == null ? void 0 : _a.modes[selectedMode].base_light) || uikitStyles.theme.colors.base_light,
       ...other,
       children: label
     }, actionId || idx);
@@ -63,9 +71,9 @@ const HvActionsGeneric = ({
         disabled,
         category,
         classes: {
-          root: clsx.clsx(actionsGenericClasses.default.dropDownMenu, classes == null ? void 0 : classes.dropDownMenu),
-          icon: clsx.clsx(actionsGenericClasses.default.dropDownMenuButton, classes == null ? void 0 : classes.dropDownMenuButton),
-          iconSelected: clsx.clsx(actionsGenericClasses.default.dropDownMenuButtonSelected, classes == null ? void 0 : classes.dropDownMenuButtonSelected)
+          root: classes.dropDownMenu,
+          icon: classes.dropDownMenuButton,
+          iconSelected: classes.dropDownMenuButtonSelected
         },
         icon: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.MoreOptionsVertical, {
           color: iconColor
@@ -79,12 +87,14 @@ const HvActionsGeneric = ({
     });
   };
   const actionOverflow = actions.length > maxVisibleActions;
-  return /* @__PURE__ */ jsxRuntime.jsx(ActionsGeneric_styles.StyledRoot, {
-    className: clsx.clsx(className, actionsGenericClasses.default.root, classes == null ? void 0 : classes.root, actionOverflow && clsx.clsx(actionsGenericClasses.default.actionContainer, classes == null ? void 0 : classes.actionContainer)),
-    $actionOverflow: actionOverflow,
+  return /* @__PURE__ */ jsxRuntime.jsx("div", {
+    className: cx(classes.root, {
+      [classes.actionContainer]: actionOverflow
+    }, className),
     ...others,
     children: actionOverflow ? renderActionsGrid() : actions.map((action, idx) => renderButton(action, idx))
   });
 };
+exports.actionsGenericClasses = ActionsGeneric_styles.staticClasses;
 exports.HvActionsGeneric = HvActionsGeneric;
 //# sourceMappingURL=ActionsGeneric.cjs.map

package/dist/cjs/components/ActionsGeneric/ActionsGeneric.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ActionsGeneric.cjs","sources":["../../../../src/components/ActionsGeneric/ActionsGeneric.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { HvButtonVariant, HvDropDownMenu } from \"@core/components\";\nimport { setId } from \"@core/utils\";\nimport React, { isValidElement } from \"react\";\nimport { HvBaseProps } from \"@core/types\";\nimport { MoreOptionsVertical } from \"@hitachivantara/uikit-react-icons\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { useTheme } from \"@core/hooks\";\nimport { StyledButton, StyledRoot } from \"./ActionsGeneric.styles\";\nimport actionsGenericClasses, {\n  HvActionsGenericClasses,\n} from \"./actionsGenericClasses\";\n\nexport interface HvActionGeneric {\n  id: string;\n  label: string;\n  icon?:\n    | React.ReactNode\n    | ((params: { isDisabled?: boolean }) => React.ReactNode);\n  disabled?: boolean;\n}\n\nexport interface HvActionsGenericProps extends HvBaseProps {\n  /** Button category. */\n  category?: HvButtonVariant;\n  /**  Whether actions should be all disabled */\n  disabled?: boolean;\n  /** The renderable content inside the actions slot of the footer, or an Array of actions `{id, label, icon, disabled}` */\n  actions: React.ReactNode | HvActionGeneric[];\n  /**  The callback function ran when an action is triggered, receiving `action` as param */\n  actionsCallback?: (\n    event: React.SyntheticEvent,\n    id: string,\n    action: HvActionGeneric\n  ) => void;\n  /**  The number of maximum visible actions before they're collapsed into a `DropDownMenu`. */\n  maxVisibleActions?: number;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvActionsGenericClasses;\n}\n\nexport const HvActionsGeneric = ({\n  id,\n  classes,\n  className,\n  category = \"secondaryGhost\",\n  disabled = false,\n  actions = [],\n  actionsCallback,\n  maxVisibleActions = Infinity,\n  ...others\n}: HvActionsGenericProps) => {\n  const { activeTheme, selectedMode } = useTheme();\n\n  if (!Array.isArray(actions)) return isValidElement(actions) ? actions : null;\n\n  const renderButton = (action: HvActionGeneric, idx: number) => {\n    const { disabled: actDisabled, id: actId, icon, label, ...other } = action;\n    const actionId = setId(id, idx, \"action\", action.id);\n\n    const renderedIcon = isValidElement(icon)\n      ? icon\n      : (icon as Function)?.({ isDisabled: disabled });\n\n    return (\n      <StyledButton\n        id={actionId}\n        key={actionId || idx}\n        variant={category}\n        className={clsx(actionsGenericClasses.button, classes?.button)}\n        disabled={actDisabled ?? disabled}\n        onClick={(event) => actionsCallback?.(event, id || \"\", action)}\n        startIcon={renderedIcon}\n        $baseColor={\n          activeTheme?.colors?.modes[selectedMode].base_light ||\n          theme.colors.base_light\n        }\n        {...other}\n      >\n        {label}\n      </StyledButton>\n    );\n  };\n\n  const renderActionsGrid = () => {\n    const actsVisible = actions.slice(0, maxVisibleActions);\n    const actsDropdown = actions.slice(maxVisibleActions);\n\n    const semantic = category === \"semantic\";\n    const iconColor =\n      (disabled && \"secondary_60\") || (semantic && \"base_dark\") || undefined;\n\n    return (\n      <>\n        {actsVisible.map((action, idx) => renderButton(action, idx))}\n        <HvDropDownMenu\n          id={setId(id, \"menu\")}\n          disabled={disabled}\n          category={category}\n          classes={{\n            root: clsx(\n              actionsGenericClasses.dropDownMenu,\n              classes?.dropDownMenu\n            ),\n            icon: clsx(\n              actionsGenericClasses.dropDownMenuButton,\n              classes?.dropDownMenuButton\n            ),\n            iconSelected: clsx(\n              actionsGenericClasses.dropDownMenuButtonSelected,\n              classes?.dropDownMenuButtonSelected\n            ),\n          }}\n          icon={<MoreOptionsVertical color={iconColor} />}\n          placement=\"left\"\n          onClick={(event, action) =>\n            actionsCallback?.(event, id || \"\", action as HvActionGeneric)\n          }\n          dataList={actsDropdown}\n          keepOpened={false}\n          disablePortal={false}\n        />\n      </>\n    );\n  };\n\n  const actionOverflow = actions.length > maxVisibleActions;\n\n  return (\n    <StyledRoot\n      className={clsx(\n        className,\n        actionsGenericClasses.root,\n        classes?.root,\n        actionOverflow &&\n          clsx(actionsGenericClasses.actionContainer, classes?.actionContainer)\n      )}\n      $actionOverflow={actionOverflow}\n      {...others}\n    >\n      {actionOverflow\n        ? renderActionsGrid()\n        : actions.map((action, idx) => renderButton(action, idx))}\n    </StyledRoot>\n  );\n};\n"],"names":["HvActionsGeneric","id","classes","className","category","disabled","actions","actionsCallback","maxVisibleActions","Infinity","others","activeTheme","selectedMode","useTheme","Array","isArray","isValidElement","renderButton","action","idx","actDisabled","actId","icon","label","other","actionId","setId","renderedIcon","isDisabled","StyledButton","variant","clsx","actionsGenericClasses","button","onClick","event","startIcon","$baseColor","colors","modes","base_light","theme","children","renderActionsGrid","actsVisible","slice","actsDropdown","semantic","iconColor","undefined","_Fragment","map","HvDropDownMenu","root","dropDownMenu","dropDownMenuButton","iconSelected","dropDownMenuButtonSelected","MoreOptionsVertical","color","placement","dataList","keepOpened","disablePortal","actionOverflow","length","StyledRoot","actionContainer","$actionOverflow"],"mappings":"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"}
+{"version":3,"file":"ActionsGeneric.cjs","sources":["../../../../src/components/ActionsGeneric/ActionsGeneric.tsx"],"sourcesContent":["import React, { isValidElement } from \"react\";\n\nimport { MoreOptionsVertical } from \"@hitachivantara/uikit-react-icons\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport fade from \"@core/utils/hexToRgbA\";\nimport { HvButton, HvButtonVariant, HvDropDownMenu } from \"@core/components\";\nimport { ExtractNames, setId } from \"@core/utils\";\nimport { HvBaseProps } from \"@core/types\";\nimport { useTheme } from \"@core/hooks\";\n\nimport { staticClasses, useClasses } from \"./ActionsGeneric.styles\";\n\nexport { staticClasses as actionsGenericClasses };\n\nexport type HvActionsGenericClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvActionGeneric {\n  id: string;\n  label: string;\n  icon?:\n    | React.ReactNode\n    | ((params: { isDisabled?: boolean }) => React.ReactNode);\n  disabled?: boolean;\n}\n\nexport interface HvActionsGenericProps extends HvBaseProps {\n  /** Button category. */\n  category?: HvButtonVariant;\n  /**  Whether actions should be all disabled */\n  disabled?: boolean;\n  /** The renderable content inside the actions slot of the footer, or an Array of actions `{id, label, icon, disabled}` */\n  actions: React.ReactNode | HvActionGeneric[];\n  /**  The callback function ran when an action is triggered, receiving `action` as param */\n  actionsCallback?: (\n    event: React.SyntheticEvent,\n    id: string,\n    action: HvActionGeneric\n  ) => void;\n  /**  The number of maximum visible actions before they're collapsed into a `DropDownMenu`. */\n  maxVisibleActions?: number;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvActionsGenericClasses;\n}\n\nexport const HvActionsGeneric = ({\n  id,\n  classes: classesProp,\n  className,\n  category = \"secondaryGhost\",\n  disabled = false,\n  actions = [],\n  actionsCallback,\n  maxVisibleActions = Infinity,\n  ...others\n}: HvActionsGenericProps) => {\n  const { classes, cx, css } = useClasses(classesProp);\n\n  const { activeTheme, selectedMode } = useTheme();\n\n  if (!Array.isArray(actions)) return isValidElement(actions) ? actions : null;\n\n  const renderButton = (action: HvActionGeneric, idx: number) => {\n    const { disabled: actDisabled, id: actId, icon, label, ...other } = action;\n    const actionId = setId(id, idx, \"action\", action.id);\n\n    const renderedIcon = isValidElement(icon)\n      ? icon\n      : (icon as Function)?.({ isDisabled: disabled });\n\n    return (\n      <HvButton\n        id={actionId}\n        key={actionId || idx}\n        variant={category}\n        className={cx(\n          css({\n            \"&:hover\": {\n              backgroundColor: fade(\n                activeTheme?.colors?.modes[selectedMode].base_light ||\n                  theme.colors.base_light,\n                0.3\n              ),\n            },\n          }),\n          classes.button\n        )}\n        disabled={actDisabled ?? disabled}\n        onClick={(event) => actionsCallback?.(event, id || \"\", action)}\n        startIcon={renderedIcon}\n        {...other}\n      >\n        {label}\n      </HvButton>\n    );\n  };\n\n  const renderActionsGrid = () => {\n    const actsVisible = actions.slice(0, maxVisibleActions);\n    const actsDropdown = actions.slice(maxVisibleActions);\n\n    const semantic = category === \"semantic\";\n    const iconColor =\n      (disabled && \"secondary_60\") || (semantic && \"base_dark\") || undefined;\n\n    return (\n      <>\n        {actsVisible.map((action, idx) => renderButton(action, idx))}\n        <HvDropDownMenu\n          id={setId(id, \"menu\")}\n          disabled={disabled}\n          category={category}\n          classes={{\n            root: classes.dropDownMenu,\n            icon: classes.dropDownMenuButton,\n            iconSelected: classes.dropDownMenuButtonSelected,\n          }}\n          icon={<MoreOptionsVertical color={iconColor} />}\n          placement=\"left\"\n          onClick={(event, action) =>\n            actionsCallback?.(event, id || \"\", action as HvActionGeneric)\n          }\n          dataList={actsDropdown}\n          keepOpened={false}\n          disablePortal={false}\n        />\n      </>\n    );\n  };\n\n  const actionOverflow = actions.length > maxVisibleActions;\n\n  return (\n    <div\n      className={cx(\n        classes.root,\n        { [classes.actionContainer]: actionOverflow },\n        className\n      )}\n      {...others}\n    >\n      {actionOverflow\n        ? renderActionsGrid()\n        : actions.map((action, idx) => renderButton(action, idx))}\n    </div>\n  );\n};\n"],"names":["HvActionsGeneric","id","classes","classesProp","className","category","disabled","actions","actionsCallback","maxVisibleActions","Infinity","others","cx","css","useClasses","activeTheme","selectedMode","useTheme","Array","isArray","isValidElement","renderButton","action","idx","actDisabled","actId","icon","label","other","actionId","setId","renderedIcon","isDisabled","HvButton","variant","backgroundColor","fade","colors","modes","base_light","theme","button","onClick","event","startIcon","children","renderActionsGrid","actsVisible","slice","actsDropdown","semantic","iconColor","undefined","_Fragment","map","HvDropDownMenu","root","dropDownMenu","dropDownMenuButton","iconSelected","dropDownMenuButtonSelected","MoreOptionsVertical","color","placement","dataList","keepOpened","disablePortal","actionOverflow","length","actionContainer"],"mappings":"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"}

package/dist/cjs/components/ActionsGeneric/ActionsGeneric.styles.cjs

@@ -1,62 +1,26 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const _styled = require("@emotion/styled/base");
-const transientOptions = require("../../utils/transientOptions.cjs");
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const hexToRgbA = require("../../utils/hexToRgbA.cjs");
-const React = require("react");
-const jsxRuntime = require("@emotion/react/jsx-runtime");
-const Button = require("../Button/Button.cjs");
-const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
-const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function(target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
+const classes = require("../../utils/classes.cjs");
+const {
+  staticClasses,
+  useClasses
+} = classes.createClasses("HvActionsGeneric", {
+  root: {},
+  button: {
+    "&:not(:last-child)": {
+      marginRight: uikitStyles.theme.space.xs
     }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-const StyledRoot = /* @__PURE__ */ _styled__default.default("div", process.env.NODE_ENV === "production" ? _extends({}, {
-  target: "e4fkrgz1"
-}, transientOptions.transientOptions) : _extends({}, {
-  target: "e4fkrgz1",
-  label: "StyledRoot"
-}, transientOptions.transientOptions))(({
-  $actionOverflow
-}) => ({
-  ...$actionOverflow && {
+  },
+  actionContainer: {
     display: "flex",
     alignItems: "center",
     float: "right"
-  }
-}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQWN0aW9uc0dlbmVyaWMvQWN0aW9uc0dlbmVyaWMuc3R5bGVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFRMEIiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvaHYtdWlraXQtcmVhY3QvaHYtdWlraXQtcmVhY3QvcGFja2FnZXMvY29yZS9zcmMvY29tcG9uZW50cy9BY3Rpb25zR2VuZXJpYy9BY3Rpb25zR2VuZXJpYy5zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyBIdkJ1dHRvbiwgSHZCdXR0b25Qcm9wcyB9IGZyb20gXCJAY29yZS9jb21wb25lbnRzXCI7XG5pbXBvcnQgeyB0cmFuc2llbnRPcHRpb25zIH0gZnJvbSBcIkBjb3JlL3V0aWxzL3RyYW5zaWVudE9wdGlvbnNcIjtcbmltcG9ydCB7IHRoZW1lIH0gZnJvbSBcIkBoaXRhY2hpdmFudGFyYS91aWtpdC1zdHlsZXNcIjtcbmltcG9ydCBmYWRlIGZyb20gXCJAY29yZS91dGlscy9oZXhUb1JnYkFcIjtcbmltcG9ydCB7IGZvcndhcmRSZWYgfSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCB7IFBvbHltb3JwaGljUmVmIH0gZnJvbSBcIkBjb3JlL3R5cGVzXCI7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRSb290ID0gc3R5bGVkKFxuICBcImRpdlwiLFxuICB0cmFuc2llbnRPcHRpb25zXG4pKCh7ICRhY3Rpb25PdmVyZmxvdyB9OiB7ICRhY3Rpb25PdmVyZmxvdzogYm9vbGVhbiB9KSA9PiAoe1xuICAuLi4oJGFjdGlvbk92ZXJmbG93ICYmIHtcbiAgICBkaXNwbGF5OiBcImZsZXhcIixcbiAgICBhbGlnbkl0ZW1zOiBcImNlbnRlclwiLFxuICAgIGZsb2F0OiBcInJpZ2h0XCIsXG4gIH0pLFxufSkpO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkQnV0dG9uID0gc3R5bGVkKFxuICBmb3J3YXJkUmVmKChwcm9wczogSHZCdXR0b25Qcm9wcywgcmVmPzogUG9seW1vcnBoaWNSZWY8XCJidXR0b25cIj4pID0+IHtcbiAgICByZXR1cm4gPEh2QnV0dG9uIHsuLi5wcm9wc30gcmVmPXtyZWZ9IC8+O1xuICB9KVxuKSgoeyAkYmFzZUNvbG9yIH06IHsgJGJhc2VDb2xvcjogc3RyaW5nIH0pID0+ICh7XG4gIFwiJjpub3QoOmxhc3QtY2hpbGQpXCI6IHtcbiAgICBtYXJnaW5SaWdodDogdGhlbWUuc3BhY2UueHMsXG4gIH0sXG4gIFwiJjpob3ZlclwiOiB7XG4gICAgYmFja2dyb3VuZENvbG9yOiBmYWRlKCRiYXNlQ29sb3IsIDAuMyksXG4gIH0sXG59KSk7XG4iXX0= */");
-const StyledButton = /* @__PURE__ */ _styled__default.default(React.forwardRef((props, ref) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(Button.HvButton, {
-    ...props,
-    ref
-  });
-}), process.env.NODE_ENV === "production" ? {
-  target: "e4fkrgz0"
-} : {
-  target: "e4fkrgz0",
-  label: "StyledButton"
-})(({
-  $baseColor
-}) => ({
-  "&:not(:last-child)": {
-    marginRight: uikitStyles.theme.space.xs
   },
-  "&:hover": {
-    backgroundColor: hexToRgbA.default($baseColor, 0.3)
-  }
-}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQWN0aW9uc0dlbmVyaWMvQWN0aW9uc0dlbmVyaWMuc3R5bGVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFtQjRCIiwiZmlsZSI6Ii9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQWN0aW9uc0dlbmVyaWMvQWN0aW9uc0dlbmVyaWMuc3R5bGVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IHsgSHZCdXR0b24sIEh2QnV0dG9uUHJvcHMgfSBmcm9tIFwiQGNvcmUvY29tcG9uZW50c1wiO1xuaW1wb3J0IHsgdHJhbnNpZW50T3B0aW9ucyB9IGZyb20gXCJAY29yZS91dGlscy90cmFuc2llbnRPcHRpb25zXCI7XG5pbXBvcnQgeyB0aGVtZSB9IGZyb20gXCJAaGl0YWNoaXZhbnRhcmEvdWlraXQtc3R5bGVzXCI7XG5pbXBvcnQgZmFkZSBmcm9tIFwiQGNvcmUvdXRpbHMvaGV4VG9SZ2JBXCI7XG5pbXBvcnQgeyBmb3J3YXJkUmVmIH0gZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQgeyBQb2x5bW9ycGhpY1JlZiB9IGZyb20gXCJAY29yZS90eXBlc1wiO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkUm9vdCA9IHN0eWxlZChcbiAgXCJkaXZcIixcbiAgdHJhbnNpZW50T3B0aW9uc1xuKSgoeyAkYWN0aW9uT3ZlcmZsb3cgfTogeyAkYWN0aW9uT3ZlcmZsb3c6IGJvb2xlYW4gfSkgPT4gKHtcbiAgLi4uKCRhY3Rpb25PdmVyZmxvdyAmJiB7XG4gICAgZGlzcGxheTogXCJmbGV4XCIsXG4gICAgYWxpZ25JdGVtczogXCJjZW50ZXJcIixcbiAgICBmbG9hdDogXCJyaWdodFwiLFxuICB9KSxcbn0pKTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZEJ1dHRvbiA9IHN0eWxlZChcbiAgZm9yd2FyZFJlZigocHJvcHM6IEh2QnV0dG9uUHJvcHMsIHJlZj86IFBvbHltb3JwaGljUmVmPFwiYnV0dG9uXCI+KSA9PiB7XG4gICAgcmV0dXJuIDxIdkJ1dHRvbiB7Li4ucHJvcHN9IHJlZj17cmVmfSAvPjtcbiAgfSlcbikoKHsgJGJhc2VDb2xvciB9OiB7ICRiYXNlQ29sb3I6IHN0cmluZyB9KSA9PiAoe1xuICBcIiY6bm90KDpsYXN0LWNoaWxkKVwiOiB7XG4gICAgbWFyZ2luUmlnaHQ6IHRoZW1lLnNwYWNlLnhzLFxuICB9LFxuICBcIiY6aG92ZXJcIjoge1xuICAgIGJhY2tncm91bmRDb2xvcjogZmFkZSgkYmFzZUNvbG9yLCAwLjMpLFxuICB9LFxufSkpO1xuIl19 */");
-exports.StyledButton = StyledButton;
-exports.StyledRoot = StyledRoot;
+  dropDownMenu: {},
+  dropDownMenuButton: {},
+  dropDownMenuButtonSelected: {}
+});
+exports.staticClasses = staticClasses;
+exports.useClasses = useClasses;
 //# sourceMappingURL=ActionsGeneric.styles.cjs.map

package/dist/cjs/components/ActionsGeneric/ActionsGeneric.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ActionsGeneric.styles.cjs","sources":["../../../../src/components/ActionsGeneric/ActionsGeneric.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport { HvButton, HvButtonProps } from \"@core/components\";\nimport { transientOptions } from \"@core/utils/transientOptions\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport fade from \"@core/utils/hexToRgbA\";\nimport { forwardRef } from \"react\";\nimport { PolymorphicRef } from \"@core/types\";\n\nexport const StyledRoot = styled(\n  \"div\",\n  transientOptions\n)(({ $actionOverflow }: { $actionOverflow: boolean }) => ({\n  ...($actionOverflow && {\n    display: \"flex\",\n    alignItems: \"center\",\n    float: \"right\",\n  }),\n}));\n\nexport const StyledButton = styled(\n  forwardRef((props: HvButtonProps, ref?: PolymorphicRef<\"button\">) => {\n    return <HvButton {...props} ref={ref} />;\n  })\n)(({ $baseColor }: { $baseColor: string }) => ({\n  \"&:not(:last-child)\": {\n    marginRight: theme.space.xs,\n  },\n  \"&:hover\": {\n    backgroundColor: fade($baseColor, 0.3),\n  },\n}));\n"],"names":["StyledRoot","process","env","NODE_ENV","_extends","target","transientOptions","label","$actionOverflow","display","alignItems","float","StyledButton","_styled","forwardRef","props","ref","HvButton","$baseColor","marginRight","theme","space","xs","backgroundColor","fade"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAQaA,MAAAA,sDACX,OAAKC,QAAAC,IAAAC,4BAAAC,SAAA,IAAA;AAAA,EAAAC,QAAA;AAAA,GACLC,iBAAgB,gBAAA,IAAAF,SAAA,IAAA;AAAA,EAAAC,QAAA;AAAA,EAAAE,OAAA;AAAA,GAAhBD,iBAAAA,gBAAgB,CAClB,EAAE,CAAC;AAAA,EAAEE;AAA8C,OAAO;AAAA,EACxD,GAAIA,mBAAmB;AAAA,IACrBC,SAAS;AAAA,IACTC,YAAY;AAAA,IACZC,OAAO;AAAA,EACT;AACF,IAAEV,QAAAC,IAAAC,aAAC,eAAA,KAAA,qwDAAA;AAEI,MAAMS,eAAeC,iCAAAA,QAC1BC,MAAAA,WAAW,CAACC,OAAsBC,QAAmC;AACnE,wCAAQC,OAAAA,UAAQ;AAAA,IAAA,GAAKF;AAAAA,IAAOC;AAAAA,EAAAA,CAAW;AACzC,CAAC,GAACf,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAE,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAE,OAAA;AAAA,CACJ,EAAE,CAAC;AAAA,EAAEW;AAAmC,OAAO;AAAA,EAC7C,sBAAsB;AAAA,IACpBC,aAAaC,YAAAA,MAAMC,MAAMC;AAAAA,EAC3B;AAAA,EACA,WAAW;AAAA,IACTC,iBAAiBC,UAAAA,QAAKN,YAAY,GAAG;AAAA,EACvC;AACF,IAAEjB,QAAAC,IAAAC,aAAC,eAAA,KAAA,qwDAAA;;;"}
+{"version":3,"file":"ActionsGeneric.styles.cjs","sources":["../../../../src/components/ActionsGeneric/ActionsGeneric.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvActionsGeneric\", {\n  root: {},\n  button: {\n    \"&:not(:last-child)\": {\n      marginRight: theme.space.xs,\n    },\n  },\n  actionContainer: { display: \"flex\", alignItems: \"center\", float: \"right\" },\n  dropDownMenu: {},\n  dropDownMenuButton: {},\n  dropDownMenuButtonSelected: {},\n});\n"],"names":["staticClasses","useClasses","createClasses","root","button","marginRight","theme","space","xs","actionContainer","display","alignItems","float","dropDownMenu","dropDownMenuButton","dropDownMenuButtonSelected"],"mappings":";;;;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,oBAAoB;AAAA,EAC7EC,MAAM,CAAC;AAAA,EACPC,QAAQ;AAAA,IACN,sBAAsB;AAAA,MACpBC,aAAaC,YAAAA,MAAMC,MAAMC;AAAAA,IAC3B;AAAA,EACF;AAAA,EACAC,iBAAiB;AAAA,IAAEC,SAAS;AAAA,IAAQC,YAAY;AAAA,IAAUC,OAAO;AAAA,EAAQ;AAAA,EACzEC,cAAc,CAAC;AAAA,EACfC,oBAAoB,CAAC;AAAA,EACrBC,4BAA4B,CAAC;AAC/B,CAAC;;;"}