@hitachivantara/uikit-react-core 5.23.0 → 5.24.1

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 { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { DropDownXS, DropUpXS } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { setId } from \"@core/utils/setId\";\nimport {\n  HvTypographyVariants,\n  HvTypography,\n} from \"@core/components/Typography\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Accordion.styles\";\n\nexport { staticClasses as accordionClasses };\n\nexport type HvAccordionClasses = ExtractNames<typeof useClasses>;\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 = (props: HvAccordionProps) => {\n  const {\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  } = useDefaultProps(\"HvAccordion\", props);\n\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","props","id","className","classes","classesProp","disabled","label","onChange","children","expanded","headingLevel","defaultExpanded","containerProps","labelVariant","others","useDefaultProps","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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"}
+{"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 { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { DropDownXS, DropUpXS } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { setId } from \"@core/utils/setId\";\nimport {\n  HvTypographyVariants,\n  HvTypography,\n} from \"@core/components/Typography\";\nimport { ExtractNames } from \"@core/utils/classes\";\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 = (props: HvAccordionProps) => {\n  const {\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  } = useDefaultProps(\"HvAccordion\", props);\n\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","props","id","className","classes","classesProp","disabled","label","onChange","children","expanded","headingLevel","defaultExpanded","containerProps","labelVariant","others","useDefaultProps","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/AppSwitcher/Action/Action.cjs

@@ -8,8 +8,8 @@ const TitleWithTooltip = require("../TitleWithTooltip.cjs");
 const Action_styles = require("./Action.styles.cjs");
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const Avatar = require("../../Avatar/Avatar.cjs");
-const ListItem = require("../../ListContainer/ListItem/ListItem.cjs");
 const Typography = require("../../Typography/Typography.cjs");
+const ListItem = require("../../ListContainer/ListItem/ListItem.cjs");
 const Tooltip = require("../../Tooltip/Tooltip.cjs");
 const getColor = (color, defaultColor) => uikitStyles.theme.colors[color] || color || defaultColor;
 const HvAppSwitcherAction = ({
@@ -61,7 +61,7 @@ const HvAppSwitcherAction = ({
     });
   };
   const isSelected = isSelectedCallback(application);
-  const handleOnClick = (event) => {
+  const handleOnClick = React.useCallback((event) => {
     if (disabled) {
       event.preventDefault();
       return;
@@ -70,9 +70,36 @@ const HvAppSwitcherAction = ({
       ...application,
       isSelected
     });
-  };
+  }, [application, disabled, isSelected, onClickCallback]);
   const isLink = url != null;
   const descriptionElementId = useUniqueId.useUniqueId(id, "hvAction-description");
+  const renderApplication = React.useCallback((children) => {
+    const typographyProps = {
+      className: classes.typography,
+      onClick: handleOnClick,
+      style: {
+        borderColor: color
+      },
+      "aria-label": name,
+      ...description && {
+        "aria-describedby": descriptionElementId
+      }
+    };
+    if (isLink) {
+      return /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, {
+        component: "a",
+        href: url,
+        target: target || "_top",
+        ...typographyProps,
+        children
+      });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, {
+      component: "button",
+      ...typographyProps,
+      children
+    });
+  }, [classes.typography, color, description, descriptionElementId, handleOnClick, isLink, name, target, url]);
   return /* @__PURE__ */ jsxRuntime.jsx(ListItem.HvListItem, {
     id,
     interactive: true,
@@ -83,19 +110,7 @@ const HvAppSwitcherAction = ({
       [classes.disabled]: disabled,
       [classes.selected]: isSelected
     }, className),
-    children: /* @__PURE__ */ jsxRuntime.jsxs(Typography.HvTypography, {
-      component: isLink ? "a" : "button",
-      href: isLink ? url : void 0,
-      target: isLink ? target || "_top" : void 0,
-      className: classes.typography,
-      onClick: handleOnClick,
-      style: {
-        borderColor: color
-      },
-      "aria-label": name,
-      ...description && {
-        "aria-describedby": descriptionElementId
-      },
+    children: renderApplication(/* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
       children: [/* @__PURE__ */ jsxRuntime.jsx("div", {
         className: classes.icon,
         children: renderApplicationIcon()
@@ -117,7 +132,7 @@ const HvAppSwitcherAction = ({
           })
         })
       })]
-    })
+    }))
   });
 };
 exports.appSwitcherActionClasses = Action_styles.staticClasses;

package/dist/cjs/components/AppSwitcher/Action/Action.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Action.cjs","sources":["../../../../../src/components/AppSwitcher/Action/Action.tsx"],"sourcesContent":["import { useState } from \"react\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { Info } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvAvatar } from \"@core/components/Avatar\";\nimport { HvListItem } from \"@core/components/ListContainer\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { HvTooltip } from \"@core/components/Tooltip\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport TitleWithTooltip from \"../TitleWithTooltip\";\nimport { useClasses, staticClasses } from \"./Action.styles\";\n\nexport { staticClasses as appSwitcherActionClasses };\n\nexport type HvAppSwitcherActionClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvAppSwitcherActionApplication {\n  /** Id of the application. */\n  id?: string;\n  /** Name of the application, this is the value that will be displayed on the component. */\n  name: string;\n  /** URL with the icon location to be used to represent the application. iconUrl will only be used if no iconElement is provided. */\n  iconUrl?: string;\n  /** Element to be added as the icon representing the application. The iconElement will be the primary option to be displayed. */\n  iconElement?: React.ReactElement;\n  /** Small description of the application. */\n  description?: string;\n  /**  URL where the application is accessible. */\n  url?: string;\n  /** Defines if the application should be opened in the same tab or in a new one. */\n  target?: \"_top\" | \"_blank\";\n  /** If true, the item will be disabled. */\n  disabled?: boolean;\n  /** True when the application is selected, false otherwise. */\n  isSelected?: boolean;\n  /** The color of the application. */\n  color?: string;\n}\n\nexport interface HvAppSwitcherActionProps extends HvBaseProps {\n  /** The application data to be used to render the Action object. */\n  application: HvAppSwitcherActionApplication;\n  /** Callback triggered when the action is clicked. */\n  onClickCallback?: (\n    event: React.MouseEvent,\n    application: HvAppSwitcherActionApplication\n  ) => void;\n  /** Must return a boolean stating if the action element is selected or not. */\n  isSelectedCallback?: (application: HvAppSwitcherActionApplication) => boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvAppSwitcherActionClasses;\n}\n\nconst getColor = (color: any, defaultColor: string) =>\n  theme.colors[color] || color || defaultColor;\n\nexport const HvAppSwitcherAction = ({\n  id,\n  className,\n  classes: classesProp,\n  application,\n  onClickCallback = () => {},\n  isSelectedCallback = () => false,\n}: HvAppSwitcherActionProps) => {\n  const { classes, cx } = useClasses(classesProp);\n\n  const { name, description, disabled, iconElement, iconUrl, url, target } =\n    application;\n\n  const color = disabled\n    ? theme.colors.secondary_60\n    : getColor(application?.color, theme.colors.secondary);\n\n  const [validIconUrl, setValidIconUrl] = useState<boolean>(true);\n\n  const renderApplicationIcon = () => {\n    if (iconElement) {\n      return iconElement;\n    }\n\n    if (iconUrl && validIconUrl) {\n      return (\n        <img\n          className={classes.iconUrl}\n          src={iconUrl}\n          onError={() => {\n            setValidIconUrl(false);\n          }}\n          alt={description}\n        />\n      );\n    }\n\n    const brokenTitle = name.split(\" \");\n    const initials =\n      brokenTitle[0].substring(0, 1) +\n      (brokenTitle[1] ? brokenTitle[1].substring(0, 1) : \"\");\n\n    return (\n      <HvAvatar size=\"sm\" backgroundColor={color} variant=\"square\" aria-hidden>\n        {initials}\n      </HvAvatar>\n    );\n  };\n\n  const isSelected = isSelectedCallback(application);\n\n  /**\n   * Handles the onClick event and triggers the appropriate callback if it exists.\n   */\n  const handleOnClick = (event: React.MouseEvent) => {\n    if (disabled) {\n      event.preventDefault();\n      return;\n    }\n\n    onClickCallback?.(event, { ...application, isSelected });\n  };\n\n  const isLink = url != null;\n  const descriptionElementId = useUniqueId(id, \"hvAction-description\");\n\n  return (\n    <HvListItem\n      id={id}\n      interactive\n      tabIndex={0}\n      selected={isSelected}\n      disabled={disabled}\n      className={cx(\n        classes.root,\n        { [classes.disabled]: disabled, [classes.selected]: isSelected },\n        className\n      )}\n    >\n      {/* As HvTooltip don't have the id prop, is not possible to use the aria-labelledby to reference it.\n       In substitution is used the aria-label with the \"title\" value */}\n      <HvTypography\n        component={isLink ? \"a\" : \"button\"}\n        href={isLink ? url : undefined}\n        target={isLink ? target || \"_top\" : undefined}\n        className={classes.typography}\n        onClick={handleOnClick}\n        style={{ borderColor: color }}\n        aria-label={name}\n        {...(description && { \"aria-describedby\": descriptionElementId })}\n      >\n        <div className={classes.icon}>{renderApplicationIcon()}</div>\n\n        <TitleWithTooltip title={name} className={classes.title} />\n\n        {description && (\n          <HvTooltip\n            disableFocusListener\n            disableTouchListener\n            title={<HvTypography>{description}</HvTypography>}\n          >\n            <div>\n              <Info\n                className={classes.iconInfo}\n                role=\"img\"\n                aria-label={description}\n                id={descriptionElementId}\n              />\n            </div>\n          </HvTooltip>\n        )}\n      </HvTypography>\n    </HvListItem>\n  );\n};\n"],"names":["getColor","color","defaultColor","theme","colors","HvAppSwitcherAction","id","className","classes","classesProp","application","onClickCallback","isSelectedCallback","cx","useClasses","name","description","disabled","iconElement","iconUrl","url","target","secondary_60","secondary","validIconUrl","setValidIconUrl","useState","renderApplicationIcon","src","onError","alt","brokenTitle","split","initials","substring","HvAvatar","size","backgroundColor","variant","children","isSelected","handleOnClick","event","preventDefault","isLink","descriptionElementId","useUniqueId","HvListItem","interactive","tabIndex","selected","root","HvTypography","component","href","undefined","typography","onClick","style","borderColor","_jsx","icon","TitleWithTooltip","title","HvTooltip","disableFocusListener","disableTouchListener","Info","iconInfo","role"],"mappings":"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"}
+{"version":3,"file":"Action.cjs","sources":["../../../../../src/components/AppSwitcher/Action/Action.tsx"],"sourcesContent":["import { useCallback, useState } from \"react\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { Info } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvAvatar } from \"@core/components/Avatar\";\nimport { HvListItem } from \"@core/components/ListContainer\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { HvTooltip } from \"@core/components/Tooltip\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport TitleWithTooltip from \"../TitleWithTooltip\";\nimport { useClasses, staticClasses } from \"./Action.styles\";\n\nexport { staticClasses as appSwitcherActionClasses };\n\nexport type HvAppSwitcherActionClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvAppSwitcherActionApplication {\n  /** Id of the application. */\n  id?: string;\n  /** Name of the application, this is the value that will be displayed on the component. */\n  name: string;\n  /** URL with the icon location to be used to represent the application. iconUrl will only be used if no iconElement is provided. */\n  iconUrl?: string;\n  /** Element to be added as the icon representing the application. The iconElement will be the primary option to be displayed. */\n  iconElement?: React.ReactElement;\n  /** Small description of the application. */\n  description?: string;\n  /**  URL where the application is accessible. */\n  url?: string;\n  /** Defines if the application should be opened in the same tab or in a new one. */\n  target?: \"_top\" | \"_blank\";\n  /** If true, the item will be disabled. */\n  disabled?: boolean;\n  /** True when the application is selected, false otherwise. */\n  isSelected?: boolean;\n  /** The color of the application. */\n  color?: string;\n}\n\nexport interface HvAppSwitcherActionProps extends HvBaseProps {\n  /** The application data to be used to render the Action object. */\n  application: HvAppSwitcherActionApplication;\n  /** Callback triggered when the action is clicked. */\n  onClickCallback?: (\n    event: React.MouseEvent,\n    application: HvAppSwitcherActionApplication\n  ) => void;\n  /** Must return a boolean stating if the action element is selected or not. */\n  isSelectedCallback?: (application: HvAppSwitcherActionApplication) => boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvAppSwitcherActionClasses;\n}\n\nconst getColor = (color: any, defaultColor: string) =>\n  theme.colors[color] || color || defaultColor;\n\nexport const HvAppSwitcherAction = ({\n  id,\n  className,\n  classes: classesProp,\n  application,\n  onClickCallback = () => {},\n  isSelectedCallback = () => false,\n}: HvAppSwitcherActionProps) => {\n  const { classes, cx } = useClasses(classesProp);\n\n  const { name, description, disabled, iconElement, iconUrl, url, target } =\n    application;\n\n  const color = disabled\n    ? theme.colors.secondary_60\n    : getColor(application?.color, theme.colors.secondary);\n\n  const [validIconUrl, setValidIconUrl] = useState<boolean>(true);\n\n  const renderApplicationIcon = () => {\n    if (iconElement) {\n      return iconElement;\n    }\n\n    if (iconUrl && validIconUrl) {\n      return (\n        <img\n          className={classes.iconUrl}\n          src={iconUrl}\n          onError={() => {\n            setValidIconUrl(false);\n          }}\n          alt={description}\n        />\n      );\n    }\n\n    const brokenTitle = name.split(\" \");\n    const initials =\n      brokenTitle[0].substring(0, 1) +\n      (brokenTitle[1] ? brokenTitle[1].substring(0, 1) : \"\");\n\n    return (\n      <HvAvatar size=\"sm\" backgroundColor={color} variant=\"square\" aria-hidden>\n        {initials}\n      </HvAvatar>\n    );\n  };\n\n  const isSelected = isSelectedCallback(application);\n\n  /**\n   * Handles the onClick event and triggers the appropriate callback if it exists.\n   */\n  const handleOnClick = useCallback(\n    (event: React.MouseEvent) => {\n      if (disabled) {\n        event.preventDefault();\n        return;\n      }\n\n      onClickCallback?.(event, { ...application, isSelected });\n    },\n    [application, disabled, isSelected, onClickCallback]\n  );\n\n  const isLink = url != null;\n  const descriptionElementId = useUniqueId(id, \"hvAction-description\");\n\n  const renderApplication = useCallback(\n    (children: React.ReactNode) => {\n      const typographyProps = {\n        className: classes.typography,\n        onClick: handleOnClick,\n        style: { borderColor: color },\n        \"aria-label\": name,\n        ...(description && { \"aria-describedby\": descriptionElementId }),\n      };\n\n      if (isLink) {\n        return (\n          <HvTypography\n            component=\"a\"\n            href={url}\n            target={target || \"_top\"}\n            {...typographyProps}\n          >\n            {children}\n          </HvTypography>\n        );\n      }\n\n      return (\n        <HvTypography component=\"button\" {...typographyProps}>\n          {children}\n        </HvTypography>\n      );\n    },\n    [\n      classes.typography,\n      color,\n      description,\n      descriptionElementId,\n      handleOnClick,\n      isLink,\n      name,\n      target,\n      url,\n    ]\n  );\n\n  return (\n    <HvListItem\n      id={id}\n      interactive\n      tabIndex={0}\n      selected={isSelected}\n      disabled={disabled}\n      className={cx(\n        classes.root,\n        { [classes.disabled]: disabled, [classes.selected]: isSelected },\n        className\n      )}\n    >\n      {/* As HvTooltip don't have the id prop, is not possible to use the aria-labelledby to reference it.\n       In substitution is used the aria-label with the \"title\" value */}\n      {renderApplication(\n        <>\n          <div className={classes.icon}>{renderApplicationIcon()}</div>\n\n          <TitleWithTooltip title={name} className={classes.title} />\n\n          {description && (\n            <HvTooltip\n              disableFocusListener\n              disableTouchListener\n              title={<HvTypography>{description}</HvTypography>}\n            >\n              <div>\n                <Info\n                  className={classes.iconInfo}\n                  role=\"img\"\n                  aria-label={description}\n                  id={descriptionElementId}\n                />\n              </div>\n            </HvTooltip>\n          )}\n        </>\n      )}\n    </HvListItem>\n  );\n};\n"],"names":["getColor","color","defaultColor","theme","colors","HvAppSwitcherAction","id","className","classes","classesProp","application","onClickCallback","isSelectedCallback","cx","useClasses","name","description","disabled","iconElement","iconUrl","url","target","secondary_60","secondary","validIconUrl","setValidIconUrl","useState","renderApplicationIcon","src","onError","alt","brokenTitle","split","initials","substring","HvAvatar","size","backgroundColor","variant","children","isSelected","handleOnClick","useCallback","event","preventDefault","isLink","descriptionElementId","useUniqueId","renderApplication","typographyProps","typography","onClick","style","borderColor","HvTypography","component","href","HvListItem","interactive","tabIndex","selected","root","_jsxs","_Fragment","_jsx","icon","TitleWithTooltip","title","HvTooltip","disableFocusListener","disableTouchListener","Info","iconInfo","role"],"mappings":"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"}

package/dist/cjs/components/Avatar/Avatar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.cjs","sources":["../../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import { CSSProperties, HTMLAttributes } from \"react\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { User } from \"@hitachivantara/uikit-react-icons\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport MuiAvatar, { AvatarProps as MuiAvatarProps } from \"@mui/material/Avatar\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useImageLoaded } from \"@core/hooks/useImageLoaded\";\nimport { decreaseSize } from \"@core/utils/sizes\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Avatar.styles\";\n\nexport { staticClasses as avatarClasses };\n\nexport type HvAvatarClasses = ExtractNames<typeof useClasses>;\n\nexport type HvAvatarVariant = \"circular\" | \"square\";\n\nexport type HvAvatarSize = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n\nexport interface HvAvatarProps extends HvBaseProps {\n  /** Inline styles to be applied to the root element. */\n  style?: CSSProperties;\n  /** The component used for the root node. Either a string to use a DOM element or a component. */\n  component?: React.ElementType;\n  /** Sets one of the standard sizes of the icons */\n  size?: HvAvatarSize;\n  /**\n   * A string representing the foreground color of the avatar's\n   * letters or the generic User icon fallback.\n   * You can use either an HEX or color name from the palette.\n   */\n  color?: string;\n  /** A String representing the background color of the avatar. You can use either an HEX or color name from the palette. */\n  backgroundColor?: string;\n  /** The `src` attribute for the `img` element. */\n  src?: string;\n  /** The `srcSet` attribute for the `img` element. Use this attribute for responsive image display. */\n  srcSet?: string;\n  /** The `sizes` attribute for the `img` element. */\n  sizes?: string;\n  /** Used in combination with `src` or `srcSet` to provide an alt attribute for the rendered `img` element. */\n  alt?: string;\n  /**\n   * Attributes applied to the `img` element if the component is used to display an image.\n   * It can be used to listen for the loading error event.\n   */\n  imgProps?: HTMLAttributes<HTMLImageElement>;\n  /** A string representing the type of avatar to display, circular or square. */\n  variant?: HvAvatarVariant;\n  /** A string representing the color of the avatar border that represents its status. */\n  status?: string;\n  /** A string representing the color of the avatar badge. */\n  badge?: string;\n  /** Attributes applied to the avatar element. */\n  avatarProps?: MuiAvatarProps;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvAvatarClasses;\n}\n\n/**\n * Get a color from the theme palette\n * @param {object} theme The theme object\n * @param {string} color A color to use if none is found on the theme palette\n * @param {string} defaultColor The fallback color to use\n */\nconst getColor = (color: string, defaultColor: string): string =>\n  theme.colors[color] || color || defaultColor;\n\n/**\n * Avatars can be used to represent a user or a brand.\n * They can show an image, an icon or the initial letters of a name, for example.\n */\nexport const HvAvatar = (props: HvAvatarProps) => {\n  const {\n    className,\n    style,\n    classes: classesProp,\n    children: childrenProp,\n    component = \"div\",\n    size = \"sm\",\n    backgroundColor = \"secondary\",\n    color = \"atmo1\",\n    src,\n    srcSet,\n    sizes,\n    alt,\n    imgProps,\n    status,\n    badge,\n    variant = \"circular\",\n    avatarProps,\n    ...others\n  } = useDefaultProps(\"HvAvatar\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  let children: React.ReactNode;\n\n  // Use a hook instead of onError on the img element to support server-side rendering.\n  const imageLoaded = useImageLoaded(src, srcSet);\n  const hasImg = src || srcSet;\n  const hasImgNotFailing = hasImg && imageLoaded !== \"error\";\n\n  if (hasImgNotFailing) {\n    children = (\n      <img\n        alt={alt}\n        src={src}\n        srcSet={srcSet}\n        sizes={sizes}\n        className={classes.img}\n        {...imgProps}\n      />\n    );\n  } else if (childrenProp != null) {\n    children = childrenProp;\n  } else if (hasImg && alt) {\n    [children] = alt;\n  } else {\n    children = (\n      <User\n        color={color}\n        iconSize={decreaseSize(size)}\n        className={classes.fallback}\n      />\n    );\n  }\n\n  const inlineStyle: CSSProperties = {\n    ...style,\n  };\n\n  if (component != null && typeof component !== \"string\") {\n    // override border-radius with custom components\n    inlineStyle.borderRadius = \"50%\";\n  }\n\n  if (!hasImgNotFailing) {\n    inlineStyle.backgroundColor = getColor(\n      backgroundColor,\n      theme.colors.secondary\n    );\n    inlineStyle.color = getColor(color, theme.colors.atmo1);\n  }\n\n  const statusInlineStyle: CSSProperties = {};\n  if (status) {\n    // set the status border. we're using the boxShadow property to set the border\n    // to be inside the container and not on its edge.\n    const statusColor = getColor(status, theme.colors.positive);\n    statusInlineStyle.boxShadow = `inset 0px 0px 0px 2px ${statusColor}`;\n  }\n\n  const badgeColor = getColor(badge || \"\", theme.colors.positive);\n\n  return (\n    <div className={classes.container} {...others}>\n      <div\n        className={cx(classes.status, classes[variant], classes[size])}\n        style={statusInlineStyle}\n      >\n        {badge && (\n          <div\n            className={classes.badge}\n            style={{ backgroundColor: badgeColor }}\n          />\n        )}\n        <MuiAvatar\n          component={component}\n          className={cx(classes.root, classes.avatar, classes[size], className)}\n          style={inlineStyle}\n          variant={variant}\n          size={size}\n          {...avatarProps}\n        >\n          {children}\n        </MuiAvatar>\n      </div>\n    </div>\n  );\n};\n"],"names":["getColor","color","defaultColor","theme","colors","HvAvatar","props","className","style","classes","classesProp","children","childrenProp","component","size","backgroundColor","src","srcSet","sizes","alt","imgProps","status","badge","variant","avatarProps","others","useDefaultProps","cx","useClasses","imageLoaded","useImageLoaded","hasImg","hasImgNotFailing","img","User","iconSize","decreaseSize","fallback","inlineStyle","borderRadius","secondary","atmo1","statusInlineStyle","statusColor","positive","boxShadow","badgeColor","container","_jsx","MuiAvatar","root","avatar"],"mappings":"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"}
+{"version":3,"file":"Avatar.cjs","sources":["../../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import { CSSProperties, HTMLAttributes } from \"react\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { User } from \"@hitachivantara/uikit-react-icons\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport MuiAvatar, { AvatarProps as MuiAvatarProps } from \"@mui/material/Avatar\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useImageLoaded } from \"@core/hooks/useImageLoaded\";\nimport { decreaseSize } from \"@core/utils/sizes\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Avatar.styles\";\n\nexport { staticClasses as avatarClasses };\n\nexport type HvAvatarClasses = ExtractNames<typeof useClasses>;\n\nexport type HvAvatarVariant = \"circular\" | \"square\";\n\nexport type HvAvatarSize = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n\nexport interface HvAvatarProps extends HvBaseProps {\n  /** Inline styles to be applied to the root element. */\n  style?: CSSProperties;\n  /** The component used for the root node. Either a string to use a DOM element or a component. */\n  component?: React.ElementType;\n  /** Sets one of the standard sizes of the icons */\n  size?: HvAvatarSize;\n  /**\n   * A string representing the foreground color of the avatar's\n   * letters or the generic User icon fallback.\n   * You can use either an HEX or color name from the palette.\n   */\n  color?: string;\n  /** A String representing the background color of the avatar. You can use either an HEX or color name from the palette. */\n  backgroundColor?: string;\n  /** The `src` attribute for the `img` element. */\n  src?: string;\n  /** The `srcSet` attribute for the `img` element. Use this attribute for responsive image display. */\n  srcSet?: string;\n  /** The `sizes` attribute for the `img` element. */\n  sizes?: string;\n  /** Used in combination with `src` or `srcSet` to provide an alt attribute for the rendered `img` element. */\n  alt?: string;\n  /**\n   * Attributes applied to the `img` element if the component is used to display an image.\n   * It can be used to listen for the loading error event.\n   */\n  imgProps?: HTMLAttributes<HTMLImageElement>;\n  /** A string representing the type of avatar to display, circular or square. */\n  variant?: HvAvatarVariant;\n  /** A string representing the color of the avatar border that represents its status. */\n  status?: string;\n  /** A string representing the color of the avatar badge. */\n  badge?: string;\n  /** Attributes applied to the avatar element. */\n  avatarProps?: MuiAvatarProps;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvAvatarClasses;\n}\n\n/**\n * Get a color from the theme palette\n * @param {object} theme The theme object\n * @param {string} color A color to use if none is found on the theme palette\n * @param {string} defaultColor The fallback color to use\n */\nconst getColor = (color: string, defaultColor: string): string =>\n  theme.colors[color] || color || defaultColor;\n\n/**\n * Avatars can be used to represent a user or a brand.\n * They can show an image, an icon or the initial letters of a name, for example.\n */\nexport const HvAvatar = (props: HvAvatarProps) => {\n  const {\n    className,\n    style,\n    classes: classesProp,\n    children: childrenProp,\n    component = \"div\",\n    size = \"sm\",\n    backgroundColor = \"secondary\",\n    color = \"atmo1\",\n    src,\n    srcSet,\n    sizes,\n    alt,\n    imgProps,\n    status,\n    badge,\n    variant = \"circular\",\n    avatarProps,\n    ...others\n  } = useDefaultProps(\"HvAvatar\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  let children: React.ReactNode;\n\n  // Use a hook instead of onError on the img element to support server-side rendering.\n  const imageLoaded = useImageLoaded(src, srcSet);\n  const hasImg = src || srcSet;\n  const hasImgNotFailing = hasImg && imageLoaded !== \"error\";\n\n  if (hasImgNotFailing) {\n    children = (\n      <img\n        alt={alt}\n        src={src}\n        srcSet={srcSet}\n        sizes={sizes}\n        className={classes.img}\n        {...imgProps}\n      />\n    );\n  } else if (childrenProp != null) {\n    children = childrenProp;\n  } else if (hasImg && alt) {\n    [children] = alt;\n  } else {\n    children = (\n      <User\n        color={color}\n        iconSize={decreaseSize(size)}\n        className={classes.fallback}\n      />\n    );\n  }\n\n  const inlineStyle: CSSProperties = {\n    ...style,\n  };\n\n  if (component != null && typeof component !== \"string\") {\n    // override border-radius with custom components\n    inlineStyle.borderRadius = \"50%\";\n  }\n\n  if (!hasImgNotFailing) {\n    inlineStyle.backgroundColor = getColor(\n      backgroundColor,\n      theme.colors.secondary\n    );\n    inlineStyle.color = getColor(color, theme.colors.atmo1);\n  }\n\n  const statusInlineStyle: CSSProperties = {};\n  if (status) {\n    // set the status border. we're using the boxShadow property to set the border\n    // to be inside the container and not on its edge.\n    const statusColor = getColor(status, theme.colors.positive);\n    statusInlineStyle.boxShadow = `inset 0px 0px 0px 2px ${statusColor}`;\n  }\n\n  const badgeColor = getColor(badge || \"\", theme.colors.positive);\n\n  return (\n    <div className={classes.container} {...others}>\n      <div\n        className={cx(classes.status, classes[variant], classes[size])}\n        style={statusInlineStyle}\n      >\n        {badge && (\n          <div\n            className={classes.badge}\n            style={{ backgroundColor: badgeColor }}\n          />\n        )}\n        <MuiAvatar\n          component={component}\n          // Consider not using the root and className classes in this component\n          className={cx(classes.root, classes.avatar, classes[size], className)}\n          style={inlineStyle}\n          variant={variant}\n          size={size}\n          {...avatarProps}\n        >\n          {children}\n        </MuiAvatar>\n      </div>\n    </div>\n  );\n};\n"],"names":["getColor","color","defaultColor","theme","colors","HvAvatar","props","className","style","classes","classesProp","children","childrenProp","component","size","backgroundColor","src","srcSet","sizes","alt","imgProps","status","badge","variant","avatarProps","others","useDefaultProps","cx","useClasses","imageLoaded","useImageLoaded","hasImg","hasImgNotFailing","img","User","iconSize","decreaseSize","fallback","inlineStyle","borderRadius","secondary","atmo1","statusInlineStyle","statusColor","positive","boxShadow","badgeColor","container","_jsx","MuiAvatar","root","avatar"],"mappings":"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"}

package/dist/cjs/components/BaseCheckBox/BaseCheckBox.cjs

@@ -1,12 +1,13 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const useDefaultProps = require("../../hooks/useDefaultProps.cjs");
-const clsx = require("clsx");
-const React = require("react");
+const MuiCheckbox = require("@mui/material/Checkbox");
 const BaseCheckBox_styles = require("./BaseCheckBox.styles.cjs");
-const baseCheckBoxClasses = require("./baseCheckBoxClasses.cjs");
 const jsxRuntime = require("@emotion/react/jsx-runtime");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const MuiCheckbox__default = /* @__PURE__ */ _interopDefault(MuiCheckbox);
 const getSelectorIcons = (options, classes) => {
   const {
     disabled,
@@ -17,22 +18,22 @@ const getSelectorIcons = (options, classes) => {
   return {
     checkbox: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Checkbox, {
       color,
-      className: clsx.clsx(classes == null ? void 0 : classes.icon, baseCheckBoxClasses.default.icon)
+      className: classes.icon
     }),
     checkboxPartial: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.CheckboxPartial, {
       color,
-      className: clsx.clsx(classes == null ? void 0 : classes.icon, baseCheckBoxClasses.default.icon)
+      className: classes.icon
     }),
     checkboxChecked: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.CheckboxCheck, {
       color: checkedColor,
-      className: clsx.clsx(classes == null ? void 0 : classes.icon, baseCheckBoxClasses.default.icon)
+      className: classes.icon
     })
   };
 };
 const HvBaseCheckBox = (props) => {
   const {
     id,
-    classes,
+    classes: classesProp,
     className,
     name,
     inputProps,
@@ -49,6 +50,10 @@ const HvBaseCheckBox = (props) => {
     semantic = false,
     ...others
   } = useDefaultProps.useDefaultProps("HvBaseCheckBox", props);
+  const {
+    classes,
+    cx
+  } = BaseCheckBox_styles.useClasses(classesProp);
   const [focusVisible, setFocusVisible] = React.useState(false);
   const icons = getSelectorIcons({
     disabled,
@@ -68,12 +73,14 @@ const HvBaseCheckBox = (props) => {
     setFocusVisible(true);
     onFocusVisible == null ? void 0 : onFocusVisible(event);
   }, [onFocusVisible]);
-  return /* @__PURE__ */ jsxRuntime.jsx(BaseCheckBox_styles.StyledCheckedBox, {
+  return /* @__PURE__ */ jsxRuntime.jsx(MuiCheckbox__default.default, {
     id,
     name,
     value,
-    className: clsx.clsx(className, baseCheckBoxClasses.default.root, classes == null ? void 0 : classes.root, disabled && clsx.clsx(baseCheckBoxClasses.default.disabled, classes == null ? void 0 : classes.disabled), focusVisible && clsx.clsx(baseCheckBoxClasses.default.focusVisible, classes == null ? void 0 : classes.focusVisible)),
-    $focusVisible: focusVisible,
+    className: cx(classes.root, {
+      [classes.disabled]: disabled,
+      [classes.focusVisible]: focusVisible
+    }, className),
     icon: icons.checkbox,
     indeterminateIcon: icons.checkboxPartial,
     checkedIcon: icons.checkboxChecked,
@@ -92,5 +99,6 @@ const HvBaseCheckBox = (props) => {
     ...others
   });
 };
+exports.baseCheckBoxClasses = BaseCheckBox_styles.staticClasses;
 exports.HvBaseCheckBox = HvBaseCheckBox;
 //# sourceMappingURL=BaseCheckBox.cjs.map

package/dist/cjs/components/BaseCheckBox/BaseCheckBox.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"BaseCheckBox.cjs","sources":["../../../../src/components/BaseCheckBox/BaseCheckBox.tsx"],"sourcesContent":["import {\n  CheckboxCheck as CheckboxCheckIcon,\n  CheckboxPartial as CheckboxPartialIcon,\n  Checkbox as CheckboxIcon,\n} from \"@hitachivantara/uikit-react-icons\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { CheckboxProps as MuiCheckboxProps } from \"@mui/material\";\n\nimport { clsx } from \"clsx\";\n\nimport React, { useCallback, useState } from \"react\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\n\nimport { StyledCheckedBox } from \"./BaseCheckBox.styles\";\nimport baseCheckBoxClasses, {\n  HvBaseCheckBoxClasses,\n} from \"./baseCheckBoxClasses\";\n\nexport interface HvBaseCheckBoxProps\n  extends Omit<MuiCheckboxProps, \"onChange\" | \"classes\">,\n    HvBaseProps<HTMLButtonElement, \"onChange\" | \"color\"> {\n  /**\n   * The input name.\n   */\n  name?: string;\n  /**\n   * The value of the input.\n   *\n   * Is up to the application's logic when to consider the submission of this value.\n   * Generally it should be used only when the checkbox is neither unchecked nor indeterminate.\n   *\n   * The default value is \"on\".\n   */\n  value?: any;\n  /**\n   * Indicates that the input is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Indicates that the input is not editable.\n   */\n  readOnly?: boolean;\n  /**\n   * Indicates that user input is required.\n   */\n  required?: boolean;\n  /**\n   * If `true` the checkbox is selected, if set to `false` the checkbox is not selected.\n   *\n   * When defined the checkbox state becomes controlled.\n   */\n  checked?: boolean;\n  /**\n   * When uncontrolled, defines the initial checked state.\n   */\n  defaultChecked?: boolean;\n  /**\n   * If `true` the checkbox visually shows the indeterminate state.\n   */\n  indeterminate?: boolean;\n  /**\n   * The callback fired when the checkbox is pressed.\n   */\n  onChange?: (\n    event: React.ChangeEvent<HTMLInputElement>,\n    checked: boolean,\n    value: any\n  ) => void;\n  /**\n   * Whether the selector should use semantic colors.\n   */\n  semantic?: boolean;\n  /**\n   * Properties passed on to the input element.\n   */\n  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n  /**\n   * Callback fired when the component is focused with a keyboard.\n   * We trigger a `onFocus` callback too.\n   */\n  onFocusVisible?: (event: React.FocusEvent<any>) => void;\n  /**\n   * Callback fired when the component is blurred.\n   */\n  onBlur?: (event: React.FocusEvent<HTMLButtonElement>) => void;\n  /**\n   * A Jss Object used to override or extend the styles applied to the checkbox.\n   */\n  classes?: HvBaseCheckBoxClasses;\n}\n\nconst getSelectorIcons = (\n  options: {\n    disabled: boolean;\n    semantic: boolean;\n  },\n  classes?: HvBaseCheckBoxClasses\n) => {\n  const { disabled, semantic } = options;\n  const color =\n    (disabled && [\"atmo3\", \"secondary_60\"]) ||\n    (semantic && [\"base_light\", \"base_dark\"]) ||\n    undefined;\n  const checkedColor =\n    (disabled && [\"atmo3\", \"secondary_60\"]) ||\n    (semantic && [\"base_dark\", \"base_light\"]) ||\n    undefined;\n\n  // Default colors: [\"atmo1\",\"secondary\"]\n  return {\n    checkbox: (\n      <CheckboxIcon\n        color={color}\n        className={clsx(classes?.icon, baseCheckBoxClasses.icon)}\n      />\n    ),\n    checkboxPartial: (\n      <CheckboxPartialIcon\n        color={color}\n        className={clsx(classes?.icon, baseCheckBoxClasses.icon)}\n      />\n    ),\n    checkboxChecked: (\n      <CheckboxCheckIcon\n        color={checkedColor}\n        className={clsx(classes?.icon, baseCheckBoxClasses.icon)}\n      />\n    ),\n  };\n};\n\n/**\n * A Checkbox is a mechanism that allows user to select one or more options.\n *\n * The Base Checkbox is a building block of the Checkbox form element. Don't use unless\n * implementing a custom use case not covered by the Checkbox form element.\n */\nexport const HvBaseCheckBox = (props: HvBaseCheckBoxProps) => {\n  const {\n    id,\n    classes,\n    className,\n    name,\n    inputProps,\n    onChange,\n    onFocusVisible,\n    onBlur,\n    checked,\n    indeterminate,\n    defaultChecked,\n    value = \"on\",\n    required = false,\n    readOnly = false,\n    disabled = false,\n    semantic = false,\n    ...others\n  } = useDefaultProps(\"HvBaseCheckBox\", props);\n\n  const [focusVisible, setFocusVisible] = useState<boolean>(false);\n\n  const icons = getSelectorIcons({ disabled, semantic }, classes);\n\n  const onChangeCallback = useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      if (readOnly) {\n        return;\n      }\n\n      onChange?.(event, event.target.checked, value);\n    },\n    [onChange, readOnly, value]\n  );\n\n  const onBlurCallback = useCallback(\n    (event: React.FocusEvent<HTMLButtonElement>) => {\n      setFocusVisible(false);\n      onBlur?.(event);\n    },\n    [onBlur]\n  );\n\n  const onFocusVisibleCallback = useCallback(\n    (event: React.FocusEvent<any>) => {\n      setFocusVisible(true);\n      onFocusVisible?.(event);\n    },\n    [onFocusVisible]\n  );\n\n  return (\n    <StyledCheckedBox\n      id={id}\n      name={name}\n      value={value}\n      className={clsx(\n        className,\n        baseCheckBoxClasses.root,\n        classes?.root,\n        disabled && clsx(baseCheckBoxClasses.disabled, classes?.disabled),\n        focusVisible &&\n          clsx(baseCheckBoxClasses.focusVisible, classes?.focusVisible)\n      )}\n      $focusVisible={focusVisible}\n      icon={icons.checkbox}\n      indeterminateIcon={icons.checkboxPartial}\n      checkedIcon={icons.checkboxChecked}\n      disabled={disabled}\n      required={required}\n      readOnly={readOnly}\n      checked={checked}\n      defaultChecked={defaultChecked}\n      indeterminate={indeterminate}\n      inputProps={inputProps}\n      onChange={onChangeCallback}\n      onFocusVisible={onFocusVisibleCallback}\n      onBlur={onBlurCallback}\n      color=\"default\"\n      disableRipple\n      {...others}\n    />\n  );\n};\n"],"names":["getSelectorIcons","options","classes","disabled","semantic","color","undefined","checkedColor","checkbox","CheckboxIcon","className","clsx","icon","baseCheckBoxClasses","checkboxPartial","CheckboxPartialIcon","checkboxChecked","CheckboxCheckIcon","HvBaseCheckBox","props","id","name","inputProps","onChange","onFocusVisible","onBlur","checked","indeterminate","defaultChecked","value","required","readOnly","others","useDefaultProps","focusVisible","setFocusVisible","useState","icons","onChangeCallback","useCallback","event","target","onBlurCallback","onFocusVisibleCallback","StyledCheckedBox","root","$focusVisible","indeterminateIcon","checkedIcon","disableRipple"],"mappings":";;;;;;;;;AA6FA,MAAMA,mBAAmBA,CACvBC,SAIAC,YACG;AACG,QAAA;AAAA,IAAEC;AAAAA,IAAUC;AAAAA,EAAaH,IAAAA;AACzBI,QAAAA,QACHF,YAAY,CAAC,SAAS,cAAc,KACpCC,YAAY,CAAC,cAAc,WAAW,KACvCE;AACIC,QAAAA,eACHJ,YAAY,CAAC,SAAS,cAAc,KACpCC,YAAY,CAAC,aAAa,YAAY,KACvCE;AAGK,SAAA;AAAA,IACLE,yCACGC,0BAAY;AAAA,MACXJ;AAAAA,MACAK,WAAWC,KAAAA,KAAKT,mCAASU,MAAMC,oBAAAA,QAAoBD,IAAI;AAAA,IAAA,CACxD;AAAA,IAEHE,gDACGC,iCAAmB;AAAA,MAClBV;AAAAA,MACAK,WAAWC,KAAAA,KAAKT,mCAASU,MAAMC,oBAAAA,QAAoBD,IAAI;AAAA,IAAA,CACxD;AAAA,IAEHI,gDACGC,+BAAiB;AAAA,MAChBZ,OAAOE;AAAAA,MACPG,WAAWC,KAAAA,KAAKT,mCAASU,MAAMC,oBAAAA,QAAoBD,IAAI;AAAA,IAAA,CACxD;AAAA,EAAA;AAGP;AAQaM,MAAAA,iBAAiBA,CAACC,UAA+B;AACtD,QAAA;AAAA,IACJC;AAAAA,IACAlB;AAAAA,IACAQ;AAAAA,IACAW;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,QAAQ;AAAA,IACRC,WAAW;AAAA,IACXC,WAAW;AAAA,IACX5B,WAAW;AAAA,IACXC,WAAW;AAAA,IACX,GAAG4B;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,kBAAkBd,KAAK;AAE3C,QAAM,CAACe,cAAcC,eAAe,IAAIC,eAAkB,KAAK;AAE/D,QAAMC,QAAQrC,iBAAiB;AAAA,IAAEG;AAAAA,IAAUC;AAAAA,KAAYF,OAAO;AAExDoC,QAAAA,mBAAmBC,kBACvB,CAACC,UAA+C;AAC9C,QAAIT,UAAU;AACZ;AAAA,IACF;AAEAR,yCAAWiB,OAAOA,MAAMC,OAAOf,SAASG;AAAAA,EAE1C,GAAA,CAACN,UAAUQ,UAAUF,KAAK,CAC5B;AAEMa,QAAAA,iBAAiBH,kBACrB,CAACC,UAA+C;AAC9CL,oBAAgB,KAAK;AACrBV,qCAASe;AAAAA,EAAK,GAEhB,CAACf,MAAM,CACT;AAEMkB,QAAAA,yBAAyBJ,kBAC7B,CAACC,UAAiC;AAChCL,oBAAgB,IAAI;AACpBX,qDAAiBgB;AAAAA,EAAK,GAExB,CAAChB,cAAc,CACjB;AAEA,wCACGoB,oBAAAA,kBAAgB;AAAA,IACfxB;AAAAA,IACAC;AAAAA,IACAQ;AAAAA,IACAnB,WAAWC,KAAAA,KACTD,WACAG,oBAAAA,QAAoBgC,MACpB3C,mCAAS2C,MACT1C,YAAYQ,UAAKE,oBAAAA,QAAoBV,UAAUD,mCAASC,QAAQ,GAChE+B,gBACEvB,KAAAA,KAAKE,oBAAAA,QAAoBqB,cAAchC,mCAASgC,YAAY,CAChE;AAAA,IACAY,eAAeZ;AAAAA,IACftB,MAAMyB,MAAM7B;AAAAA,IACZuC,mBAAmBV,MAAMvB;AAAAA,IACzBkC,aAAaX,MAAMrB;AAAAA,IACnBb;AAAAA,IACA2B;AAAAA,IACAC;AAAAA,IACAL;AAAAA,IACAE;AAAAA,IACAD;AAAAA,IACAL;AAAAA,IACAC,UAAUe;AAAAA,IACVd,gBAAgBmB;AAAAA,IAChBlB,QAAQiB;AAAAA,IACRrC,OAAM;AAAA,IACN4C,eAAa;AAAA,IAAA,GACTjB;AAAAA,EAAAA,CACL;AAEL;;"}
+{"version":3,"file":"BaseCheckBox.cjs","sources":["../../../../src/components/BaseCheckBox/BaseCheckBox.tsx"],"sourcesContent":["import React, { useCallback, useState } from \"react\";\n\nimport {\n  CheckboxCheck as CheckboxCheckIcon,\n  CheckboxPartial as CheckboxPartialIcon,\n  Checkbox as CheckboxIcon,\n} from \"@hitachivantara/uikit-react-icons\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport MuiCheckbox, {\n  CheckboxProps as MuiCheckboxProps,\n} from \"@mui/material/Checkbox\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./BaseCheckBox.styles\";\n\nexport { staticClasses as baseCheckBoxClasses };\n\nexport type HvBaseCheckBoxClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBaseCheckBoxProps\n  extends Omit<MuiCheckboxProps, \"onChange\" | \"classes\">,\n    HvBaseProps<HTMLButtonElement, \"onChange\" | \"color\"> {\n  /**\n   * The input name.\n   */\n  name?: string;\n  /**\n   * The value of the input.\n   *\n   * Is up to the application's logic when to consider the submission of this value.\n   * Generally it should be used only when the checkbox is neither unchecked nor indeterminate.\n   *\n   * The default value is \"on\".\n   */\n  value?: any;\n  /**\n   * Indicates that the input is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Indicates that the input is not editable.\n   */\n  readOnly?: boolean;\n  /**\n   * Indicates that user input is required.\n   */\n  required?: boolean;\n  /**\n   * If `true` the checkbox is selected, if set to `false` the checkbox is not selected.\n   *\n   * When defined the checkbox state becomes controlled.\n   */\n  checked?: boolean;\n  /**\n   * When uncontrolled, defines the initial checked state.\n   */\n  defaultChecked?: boolean;\n  /**\n   * If `true` the checkbox visually shows the indeterminate state.\n   */\n  indeterminate?: boolean;\n  /**\n   * The callback fired when the checkbox is pressed.\n   */\n  onChange?: (\n    event: React.ChangeEvent<HTMLInputElement>,\n    checked: boolean,\n    value: any\n  ) => void;\n  /**\n   * Whether the selector should use semantic colors.\n   */\n  semantic?: boolean;\n  /**\n   * Properties passed on to the input element.\n   */\n  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n  /**\n   * Callback fired when the component is focused with a keyboard.\n   * We trigger a `onFocus` callback too.\n   */\n  onFocusVisible?: (event: React.FocusEvent<any>) => void;\n  /**\n   * Callback fired when the component is blurred.\n   */\n  onBlur?: (event: React.FocusEvent<HTMLButtonElement>) => void;\n  /**\n   * A Jss Object used to override or extend the styles applied to the checkbox.\n   */\n  classes?: HvBaseCheckBoxClasses;\n}\n\nconst getSelectorIcons = (\n  options: {\n    disabled: boolean;\n    semantic: boolean;\n  },\n  classes: HvBaseCheckBoxClasses\n) => {\n  const { disabled, semantic } = options;\n  const color =\n    (disabled && [\"atmo3\", \"secondary_60\"]) ||\n    (semantic && [\"base_light\", \"base_dark\"]) ||\n    undefined;\n  const checkedColor =\n    (disabled && [\"atmo3\", \"secondary_60\"]) ||\n    (semantic && [\"base_dark\", \"base_light\"]) ||\n    undefined;\n\n  // Default colors: [\"atmo1\",\"secondary\"]\n  return {\n    checkbox: <CheckboxIcon color={color} className={classes.icon} />,\n    checkboxPartial: (\n      <CheckboxPartialIcon color={color} className={classes.icon} />\n    ),\n    checkboxChecked: (\n      <CheckboxCheckIcon color={checkedColor} className={classes.icon} />\n    ),\n  };\n};\n\n/**\n * A Checkbox is a mechanism that allows user to select one or more options.\n *\n * The Base Checkbox is a building block of the Checkbox form element. Don't use unless\n * implementing a custom use case not covered by the Checkbox form element.\n */\nexport const HvBaseCheckBox = (props: HvBaseCheckBoxProps) => {\n  const {\n    id,\n    classes: classesProp,\n    className,\n    name,\n    inputProps,\n    onChange,\n    onFocusVisible,\n    onBlur,\n    checked,\n    indeterminate,\n    defaultChecked,\n    value = \"on\",\n    required = false,\n    readOnly = false,\n    disabled = false,\n    semantic = false,\n    ...others\n  } = useDefaultProps(\"HvBaseCheckBox\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const [focusVisible, setFocusVisible] = useState<boolean>(false);\n\n  const icons = getSelectorIcons({ disabled, semantic }, classes);\n\n  const onChangeCallback = useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      if (readOnly) {\n        return;\n      }\n\n      onChange?.(event, event.target.checked, value);\n    },\n    [onChange, readOnly, value]\n  );\n\n  const onBlurCallback = useCallback(\n    (event: React.FocusEvent<HTMLButtonElement>) => {\n      setFocusVisible(false);\n      onBlur?.(event);\n    },\n    [onBlur]\n  );\n\n  const onFocusVisibleCallback = useCallback(\n    (event: React.FocusEvent<any>) => {\n      setFocusVisible(true);\n      onFocusVisible?.(event);\n    },\n    [onFocusVisible]\n  );\n\n  return (\n    <MuiCheckbox\n      id={id}\n      name={name}\n      value={value}\n      className={cx(\n        classes.root,\n        { [classes.disabled]: disabled, [classes.focusVisible]: focusVisible },\n        className\n      )}\n      icon={icons.checkbox}\n      indeterminateIcon={icons.checkboxPartial}\n      checkedIcon={icons.checkboxChecked}\n      disabled={disabled}\n      required={required}\n      readOnly={readOnly}\n      checked={checked}\n      defaultChecked={defaultChecked}\n      indeterminate={indeterminate}\n      inputProps={inputProps}\n      onChange={onChangeCallback}\n      onFocusVisible={onFocusVisibleCallback}\n      onBlur={onBlurCallback}\n      color=\"default\"\n      disableRipple\n      {...others}\n    />\n  );\n};\n"],"names":["getSelectorIcons","options","classes","disabled","semantic","color","undefined","checkedColor","checkbox","CheckboxIcon","className","icon","checkboxPartial","CheckboxPartialIcon","checkboxChecked","CheckboxCheckIcon","HvBaseCheckBox","props","id","classesProp","name","inputProps","onChange","onFocusVisible","onBlur","checked","indeterminate","defaultChecked","value","required","readOnly","others","useDefaultProps","cx","useClasses","focusVisible","setFocusVisible","useState","icons","onChangeCallback","useCallback","event","target","onBlurCallback","onFocusVisibleCallback","MuiCheckbox","root","indeterminateIcon","checkedIcon","disableRipple"],"mappings":";;;;;;;;;;AA+FA,MAAMA,mBAAmBA,CACvBC,SAIAC,YACG;AACG,QAAA;AAAA,IAAEC;AAAAA,IAAUC;AAAAA,EAAaH,IAAAA;AACzBI,QAAAA,QACHF,YAAY,CAAC,SAAS,cAAc,KACpCC,YAAY,CAAC,cAAc,WAAW,KACvCE;AACIC,QAAAA,eACHJ,YAAY,CAAC,SAAS,cAAc,KACpCC,YAAY,CAAC,aAAa,YAAY,KACvCE;AAGK,SAAA;AAAA,IACLE,yCAAWC,0BAAY;AAAA,MAACJ;AAAAA,MAAcK,WAAWR,QAAQS;AAAAA,IAAAA,CAAO;AAAA,IAChEC,gDACGC,iCAAmB;AAAA,MAACR;AAAAA,MAAcK,WAAWR,QAAQS;AAAAA,IAAAA,CAAO;AAAA,IAE/DG,gDACGC,+BAAiB;AAAA,MAACV,OAAOE;AAAAA,MAAcG,WAAWR,QAAQS;AAAAA,IAAAA,CAAO;AAAA,EAAA;AAGxE;AAQaK,MAAAA,iBAAiBA,CAACC,UAA+B;AACtD,QAAA;AAAA,IACJC;AAAAA,IACAhB,SAASiB;AAAAA,IACTT;AAAAA,IACAU;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,QAAQ;AAAA,IACRC,WAAW;AAAA,IACXC,WAAW;AAAA,IACX3B,WAAW;AAAA,IACXC,WAAW;AAAA,IACX,GAAG2B;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,kBAAkBf,KAAK;AAErC,QAAA;AAAA,IAAEf;AAAAA,IAAS+B;AAAAA,EAAAA,IAAOC,oBAAAA,WAAWf,WAAW;AAE9C,QAAM,CAACgB,cAAcC,eAAe,IAAIC,eAAkB,KAAK;AAE/D,QAAMC,QAAQtC,iBAAiB;AAAA,IAAEG;AAAAA,IAAUC;AAAAA,KAAYF,OAAO;AAExDqC,QAAAA,mBAAmBC,kBACvB,CAACC,UAA+C;AAC9C,QAAIX,UAAU;AACZ;AAAA,IACF;AAEAR,yCAAWmB,OAAOA,MAAMC,OAAOjB,SAASG;AAAAA,EAE1C,GAAA,CAACN,UAAUQ,UAAUF,KAAK,CAC5B;AAEMe,QAAAA,iBAAiBH,kBACrB,CAACC,UAA+C;AAC9CL,oBAAgB,KAAK;AACrBZ,qCAASiB;AAAAA,EAAK,GAEhB,CAACjB,MAAM,CACT;AAEMoB,QAAAA,yBAAyBJ,kBAC7B,CAACC,UAAiC;AAChCL,oBAAgB,IAAI;AACpBb,qDAAiBkB;AAAAA,EAAK,GAExB,CAAClB,cAAc,CACjB;AAEA,wCACGsB,qBAAAA,SAAW;AAAA,IACV3B;AAAAA,IACAE;AAAAA,IACAQ;AAAAA,IACAlB,WAAWuB,GACT/B,QAAQ4C,MACR;AAAA,MAAE,CAAC5C,QAAQC,QAAQ,GAAGA;AAAAA,MAAU,CAACD,QAAQiC,YAAY,GAAGA;AAAAA,OACxDzB,SACF;AAAA,IACAC,MAAM2B,MAAM9B;AAAAA,IACZuC,mBAAmBT,MAAM1B;AAAAA,IACzBoC,aAAaV,MAAMxB;AAAAA,IACnBX;AAAAA,IACA0B;AAAAA,IACAC;AAAAA,IACAL;AAAAA,IACAE;AAAAA,IACAD;AAAAA,IACAL;AAAAA,IACAC,UAAUiB;AAAAA,IACVhB,gBAAgBqB;AAAAA,IAChBpB,QAAQmB;AAAAA,IACRtC,OAAM;AAAA,IACN4C,eAAa;AAAA,IAAA,GACTlB;AAAAA,EAAAA,CACL;AAEL;;;"}

package/dist/cjs/components/BaseCheckBox/BaseCheckBox.styles.cjs

@@ -1,49 +1,22 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const _styled = require("@emotion/styled/base");
-const material = require("@mui/material");
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const transientOptions = require("../../utils/transientOptions.cjs");
 const focusUtils = require("../../utils/focusUtils.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];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-const StyledCheckedBox = /* @__PURE__ */ _styled__default.default(material.Checkbox, process.env.NODE_ENV === "production" ? _extends({}, {
-  target: "edk6te40"
-}, transientOptions.transientOptions) : _extends({}, {
-  target: "edk6te40",
-  label: "StyledCheckedBox"
-}, transientOptions.transientOptions))(({
-  $focusVisible
-}) => ({
-  padding: 0,
-  borderRadius: uikitStyles.theme.baseCheckBox.borderRadius,
-  cursor: "pointer",
-  "&:hover": {
-    backgroundColor: uikitStyles.theme.baseCheckBox.hoverColor
-  },
-  ...$focusVisible && {
-    "& svg": {
-      ...focusUtils.outlineStyles
+const classes = require("../../utils/classes.cjs");
+const {
+  staticClasses,
+  useClasses
+} = classes.createClasses("HvBaseCheckBox", {
+  root: {
+    padding: 0,
+    borderRadius: uikitStyles.theme.baseCheckBox.borderRadius,
+    cursor: "pointer",
+    "&:hover": {
+      backgroundColor: uikitStyles.theme.baseCheckBox.hoverColor
     }
   },
-  // Override Mui styling: https://mui.com/material-ui/api/checkbox/#css
-  [`&.${material.checkboxClasses.disabled}`]: {
-    // Ensure more specificity than .MuiButtonBase-root.Mui-disabled and .MuiIconButton-root.Mui-disabled
-    [`&.${material.checkboxClasses.root}`]: {
+  disabled: {
+    "&$root": {
       cursor: "not-allowed",
       pointerEvents: "initial"
     },
@@ -52,7 +25,14 @@ const StyledCheckedBox = /* @__PURE__ */ _styled__default.default(material.Check
         fill: uikitStyles.theme.colors.secondary_60
       }
     }
-  }
-}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQmFzZUNoZWNrQm94L0Jhc2VDaGVja0JveC5zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBWWdDIiwiZmlsZSI6Ii9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQmFzZUNoZWNrQm94L0Jhc2VDaGVja0JveC5zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBDaGVja2JveCBhcyBNdWlDaGVja0JveCxcbiAgY2hlY2tib3hDbGFzc2VzIGFzIE11aUNoZWNrQm94Q2xhc3Nlcyxcbn0gZnJvbSBcIkBtdWkvbWF0ZXJpYWxcIjtcblxuaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5cbmltcG9ydCB7IHRoZW1lIH0gZnJvbSBcIkBoaXRhY2hpdmFudGFyYS91aWtpdC1zdHlsZXNcIjtcblxuaW1wb3J0IHsgdHJhbnNpZW50T3B0aW9ucyB9IGZyb20gXCJAY29yZS91dGlscy90cmFuc2llbnRPcHRpb25zXCI7XG5pbXBvcnQgeyBvdXRsaW5lU3R5bGVzIH0gZnJvbSBcIkBjb3JlL3V0aWxzL2ZvY3VzVXRpbHNcIjtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZENoZWNrZWRCb3ggPSBzdHlsZWQoXG4gIE11aUNoZWNrQm94LFxuICB0cmFuc2llbnRPcHRpb25zXG4pKCh7ICRmb2N1c1Zpc2libGUgfTogeyAkZm9jdXNWaXNpYmxlOiBib29sZWFuIH0pID0+ICh7XG4gIHBhZGRpbmc6IDAsXG4gIGJvcmRlclJhZGl1czogdGhlbWUuYmFzZUNoZWNrQm94LmJvcmRlclJhZGl1cyxcbiAgY3Vyc29yOiBcInBvaW50ZXJcIixcbiAgXCImOmhvdmVyXCI6IHtcbiAgICBiYWNrZ3JvdW5kQ29sb3I6IHRoZW1lLmJhc2VDaGVja0JveC5ob3ZlckNvbG9yLFxuICB9LFxuXG4gIC4uLigkZm9jdXNWaXNpYmxlICYmIHtcbiAgICBcIiYgc3ZnXCI6IHtcbiAgICAgIC4uLm91dGxpbmVTdHlsZXMsXG4gICAgfSxcbiAgfSksXG5cbiAgLy8gT3ZlcnJpZGUgTXVpIHN0eWxpbmc6IGh0dHBzOi8vbXVpLmNvbS9tYXRlcmlhbC11aS9hcGkvY2hlY2tib3gvI2Nzc1xuICBbYCYuJHtNdWlDaGVja0JveENsYXNzZXMuZGlzYWJsZWR9YF06IHtcbiAgICAvLyBFbnN1cmUgbW9yZSBzcGVjaWZpY2l0eSB0aGFuIC5NdWlCdXR0b25CYXNlLXJvb3QuTXVpLWRpc2FibGVkIGFuZCAuTXVpSWNvbkJ1dHRvbi1yb290Lk11aS1kaXNhYmxlZFxuICAgIFtgJi4ke011aUNoZWNrQm94Q2xhc3Nlcy5yb290fWBdOiB7XG4gICAgICBjdXJzb3I6IFwibm90LWFsbG93ZWRcIixcbiAgICAgIHBvaW50ZXJFdmVudHM6IFwiaW5pdGlhbFwiLFxuICAgIH0sXG5cbiAgICBcIiYgc3ZnXCI6IHtcbiAgICAgIFwiJiBwYXRoOm50aC1vZi10eXBlKDIpXCI6IHtcbiAgICAgICAgZmlsbDogdGhlbWUuY29sb3JzLnNlY29uZGFyeV82MCxcbiAgICAgIH0sXG4gICAgfSxcbiAgfSxcbn0pKTtcbiJdfQ== */");
-exports.StyledCheckedBox = StyledCheckedBox;
+  },
+  focusVisible: {
+    "& svg": {
+      ...focusUtils.outlineStyles
+    }
+  },
+  icon: {}
+});
+exports.staticClasses = staticClasses;
+exports.useClasses = useClasses;
 //# sourceMappingURL=BaseCheckBox.styles.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"BaseCheckBox.styles.cjs","sources":["../../../../src/components/BaseCheckBox/BaseCheckBox.styles.ts"],"sourcesContent":["import {\n  Checkbox as MuiCheckBox,\n  checkboxClasses as MuiCheckBoxClasses,\n} from \"@mui/material\";\n\nimport styled from \"@emotion/styled\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { transientOptions } from \"@core/utils/transientOptions\";\nimport { outlineStyles } from \"@core/utils/focusUtils\";\n\nexport const StyledCheckedBox = styled(\n  MuiCheckBox,\n  transientOptions\n)(({ $focusVisible }: { $focusVisible: boolean }) => ({\n  padding: 0,\n  borderRadius: theme.baseCheckBox.borderRadius,\n  cursor: \"pointer\",\n  \"&:hover\": {\n    backgroundColor: theme.baseCheckBox.hoverColor,\n  },\n\n  ...($focusVisible && {\n    \"& svg\": {\n      ...outlineStyles,\n    },\n  }),\n\n  // Override Mui styling: https://mui.com/material-ui/api/checkbox/#css\n  [`&.${MuiCheckBoxClasses.disabled}`]: {\n    // Ensure more specificity than .MuiButtonBase-root.Mui-disabled and .MuiIconButton-root.Mui-disabled\n    [`&.${MuiCheckBoxClasses.root}`]: {\n      cursor: \"not-allowed\",\n      pointerEvents: \"initial\",\n    },\n\n    \"& svg\": {\n      \"& path:nth-of-type(2)\": {\n        fill: theme.colors.secondary_60,\n      },\n    },\n  },\n}));\n"],"names":["StyledCheckedBox","MuiCheckBox","process","env","NODE_ENV","_extends","target","transientOptions","label","$focusVisible","padding","borderRadius","theme","baseCheckBox","cursor","backgroundColor","hoverColor","outlineStyles","MuiCheckBoxClasses","disabled","root","pointerEvents","fill","colors","secondary_60"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAYaA,MAAAA,4DACXC,SAAAA,UAAWC,QAAAC,IAAAC,4BAAAC,SAAA,IAAA;AAAA,EAAAC,QAAA;AAAA,GACXC,iBAAgB,gBAAA,IAAAF,SAAA,IAAA;AAAA,EAAAC,QAAA;AAAA,EAAAE,OAAA;AAAA,GAAhBD,iBAAAA,gBAAgB,CAClB,EAAE,CAAC;AAAA,EAAEE;AAA0C,OAAO;AAAA,EACpDC,SAAS;AAAA,EACTC,cAAcC,YAAAA,MAAMC,aAAaF;AAAAA,EACjCG,QAAQ;AAAA,EACR,WAAW;AAAA,IACTC,iBAAiBH,YAAAA,MAAMC,aAAaG;AAAAA,EACtC;AAAA,EAEA,GAAIP,iBAAiB;AAAA,IACnB,SAAS;AAAA,MACP,GAAGQ,WAAAA;AAAAA,IACL;AAAA,EACF;AAAA;AAAA,EAGA,CAAE,KAAIC,yBAAmBC,UAAU,GAAG;AAAA;AAAA,IAEpC,CAAE,KAAID,yBAAmBE,MAAM,GAAG;AAAA,MAChCN,QAAQ;AAAA,MACRO,eAAe;AAAA,IACjB;AAAA,IAEA,SAAS;AAAA,MACP,yBAAyB;AAAA,QACvBC,MAAMV,YAAAA,MAAMW,OAAOC;AAAAA,MACrB;AAAA,IACF;AAAA,EACF;AACF,IAAEtB,QAAAC,IAAAC,aAAC,eAAA,KAAA,qiEAAA;;"}
+{"version":3,"file":"BaseCheckBox.styles.cjs","sources":["../../../../src/components/BaseCheckBox/BaseCheckBox.styles.ts"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"@core/utils/focusUtils\";\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvBaseCheckBox\", {\n  root: {\n    padding: 0,\n    borderRadius: theme.baseCheckBox.borderRadius,\n    cursor: \"pointer\",\n    \"&:hover\": {\n      backgroundColor: theme.baseCheckBox.hoverColor,\n    },\n  },\n  disabled: {\n    \"&$root\": {\n      cursor: \"not-allowed\",\n      pointerEvents: \"initial\",\n    },\n\n    \"& svg\": {\n      \"& path:nth-of-type(2)\": {\n        fill: theme.colors.secondary_60,\n      },\n    },\n  },\n  focusVisible: {\n    \"& svg\": {\n      ...outlineStyles,\n    },\n  },\n  icon: {},\n});\n"],"names":["staticClasses","useClasses","createClasses","root","padding","borderRadius","theme","baseCheckBox","cursor","backgroundColor","hoverColor","disabled","pointerEvents","fill","colors","secondary_60","focusVisible","outlineStyles","icon"],"mappings":";;;;;AAKa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,kBAAkB;AAAA,EAC3EC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,cAAcC,YAAAA,MAAMC,aAAaF;AAAAA,IACjCG,QAAQ;AAAA,IACR,WAAW;AAAA,MACTC,iBAAiBH,YAAAA,MAAMC,aAAaG;AAAAA,IACtC;AAAA,EACF;AAAA,EACAC,UAAU;AAAA,IACR,UAAU;AAAA,MACRH,QAAQ;AAAA,MACRI,eAAe;AAAA,IACjB;AAAA,IAEA,SAAS;AAAA,MACP,yBAAyB;AAAA,QACvBC,MAAMP,YAAAA,MAAMQ,OAAOC;AAAAA,MACrB;AAAA,IACF;AAAA,EACF;AAAA,EACAC,cAAc;AAAA,IACZ,SAAS;AAAA,MACP,GAAGC,WAAAA;AAAAA,IACL;AAAA,EACF;AAAA,EACAC,MAAM,CAAC;AACT,CAAC;;;"}