@hitachivantara/uikit-react-core 5.23.0 → 5.24.0

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/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;;;"}

package/dist/cjs/components/BaseDropdown/BaseDropdown.cjs

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
 const reactDom = require("react-dom");
-const clsx = require("clsx");
 const material = require("@mui/material");
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
@@ -17,9 +16,9 @@ const keyboardUtils = require("../../utils/keyboardUtils.cjs");
 const setId = require("../../utils/setId.cjs");
 const focusableElementFinder = require("../../utils/focusableElementFinder.cjs");
 const BaseDropdown_styles = require("./BaseDropdown.styles.cjs");
-const baseDropdownClasses = require("./baseDropdownClasses.cjs");
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const BaseDropdownContext = require("./BaseDropdownContext/BaseDropdownContext.cjs");
+const Typography = require("../Typography/Typography.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const React__default = /* @__PURE__ */ _interopDefault(React);
 const HvBaseDropdown = (props) => {
@@ -27,7 +26,7 @@ const HvBaseDropdown = (props) => {
   const {
     id,
     className,
-    classes,
+    classes: classesProp,
     children,
     role,
     placeholder,
@@ -46,8 +45,13 @@ const HvBaseDropdown = (props) => {
     onToggle,
     onClickOutside,
     onContainerCreation,
+    "aria-expanded": ariaExpandedProp,
     ...others
   } = useDefaultProps.useDefaultProps("HvBaseDropdown", props);
+  const {
+    classes,
+    cx
+  } = BaseDropdown_styles.useClasses(classesProp);
   const {
     rootId
   } = useTheme.useTheme();
@@ -58,6 +62,7 @@ const HvBaseDropdown = (props) => {
   const handleDropdownHeaderRefProp = useForkRef.useForkRef(dropdownHeaderRefProp, dropdownHeaderProps == null ? void 0 : dropdownHeaderProps.ref);
   const handleDropdownHeaderRef = useForkRef.useForkRef(setReferenceElement, handleDropdownHeaderRefProp);
   const ariaRole = role || (component == null ? "combobox" : void 0);
+  const ariaExpanded = ariaExpandedProp ?? (ariaRole ? !!isOpen : void 0);
   const elementId = useUniqueId.useUniqueId(id, "hvbasedropdown");
   const bottom = placement && `bottom-${placement === "right" ? "start" : "end"}`;
   const extensionWidth = referenceElement ? referenceElement == null ? void 0 : referenceElement.offsetWidth : "inherit";
@@ -170,18 +175,20 @@ const HvBaseDropdown = (props) => {
   const headerComponent = (() => {
     if (component) {
       return React__default.default.cloneElement(component, {
-        ref: handleDropdownHeaderRef
+        ref: handleDropdownHeaderRef,
+        "aria-controls": isOpen ? setId.setId(elementId, "children-container") : void 0
       });
     }
     const ExpanderComponent = isOpen ? uikitReactIcons.DropUpXS : uikitReactIcons.DropDownXS;
-    return /* @__PURE__ */ jsxRuntime.jsxs(BaseDropdown_styles.StyledHeaderRoot, {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", {
       id: setId.setId(id, "header"),
-      className: clsx.clsx(baseDropdownClasses.default.header, classes == null ? void 0 : classes.header, disabled && clsx.clsx(baseDropdownClasses.default.headerDisabled, classes == null ? void 0 : classes.headerDisabled), readOnly && clsx.clsx(baseDropdownClasses.default.headerReadOnly, classes == null ? void 0 : classes.headerReadOnly), isOpen && clsx.clsx(baseDropdownClasses.default.headerOpen, classes == null ? void 0 : classes.headerOpen), isOpen && popperPlacement.includes("top") && clsx.clsx(baseDropdownClasses.default.headerOpenUp, classes == null ? void 0 : classes.headerOpenUp), isOpen && popperPlacement.includes("bottom") && clsx.clsx(baseDropdownClasses.default.headerOpenDown, classes == null ? void 0 : classes.headerOpenDown)),
-      $disabled: disabled,
-      $readOnly: readOnly,
-      $opened: isOpen,
-      $openedUp: isOpen && popperPlacement.includes("top"),
-      $openedDown: isOpen && popperPlacement.includes("bottom"),
+      className: cx(classes.header, {
+        [classes.headerDisabled]: disabled,
+        [classes.headerReadOnly]: readOnly,
+        [classes.headerOpen]: isOpen,
+        [classes.headerOpenUp]: isOpen && popperPlacement.includes("top"),
+        [classes.headerOpenDown]: isOpen && popperPlacement.includes("bottom")
+      }),
       role: ariaRole === "combobox" ? "textbox" : void 0,
       style: disabled || readOnly ? {
         pointerEvents: "none"
@@ -192,19 +199,21 @@ const HvBaseDropdown = (props) => {
       tabIndex: disabled ? -1 : 0,
       ref: handleDropdownHeaderRef,
       ...dropdownHeaderProps,
-      children: [/* @__PURE__ */ jsxRuntime.jsx(BaseDropdown_styles.StyledSelection, {
-        className: clsx.clsx(baseDropdownClasses.default.selection, classes == null ? void 0 : classes.selection),
-        children: placeholder && typeof placeholder === "string" ? /* @__PURE__ */ jsxRuntime.jsx(BaseDropdown_styles.StyledPlaceholder, {
-          className: clsx.clsx(baseDropdownClasses.default.placeholder, classes == null ? void 0 : classes.placeholder, disabled && clsx.clsx(baseDropdownClasses.default.selectionDisabled, classes == null ? void 0 : classes.selectionDisabled)),
-          $disabled: disabled,
+      children: [/* @__PURE__ */ jsxRuntime.jsx("div", {
+        className: classes.selection,
+        children: placeholder && typeof placeholder === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, {
+          className: cx(classes.placeholder, {
+            [classes.selectionDisabled]: disabled
+          }),
           variant: "body",
           children: placeholder
         }) : placeholder
-      }), /* @__PURE__ */ jsxRuntime.jsx(BaseDropdown_styles.StyledAdornment, {
+      }), /* @__PURE__ */ jsxRuntime.jsx("div", {
+        className: classes.arrowContainer,
         children: adornment || /* @__PURE__ */ jsxRuntime.jsx(ExpanderComponent, {
           iconSize: "XS",
           color: disabled ? uikitStyles.theme.colors.secondary_60 : void 0,
-          className: clsx.clsx(baseDropdownClasses.default.arrow, classes == null ? void 0 : classes.arrow)
+          className: classes.arrow
         })
       })]
     });
@@ -231,42 +240,41 @@ const HvBaseDropdown = (props) => {
         onToggle == null ? void 0 : onToggle(event, false);
       }
     };
-    const container = /* @__PURE__ */ jsxRuntime.jsx(BaseDropdown_styles.StyledContainer, {
+    const container = /* @__PURE__ */ jsxRuntime.jsx("div", {
       role: "tooltip",
       ref: setPopperElement,
-      className: clsx.clsx(baseDropdownClasses.default.container, classes == null ? void 0 : classes.container),
+      className: classes.container,
       style: popperStyles.popper,
       ...attributes.popper,
       children: /* @__PURE__ */ jsxRuntime.jsx(material.ClickAwayListener, {
         onClickAway: handleOutside,
         children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
           onKeyDown: handleContainerKeyDown,
-          children: [popperPlacement.includes("bottom") && /* @__PURE__ */ jsxRuntime.jsx(BaseDropdown_styles.StyledExtension, {
+          children: [popperPlacement.includes("bottom") && /* @__PURE__ */ jsxRuntime.jsx("div", {
             style: {
               width: extensionWidth
             },
-            className: clsx.clsx(baseDropdownClasses.default.inputExtensionOpen, classes == null ? void 0 : classes.inputExtensionOpen, popperPlacement.includes("end") && clsx.clsx(baseDropdownClasses.default.inputExtensionLeftPosition, classes == null ? void 0 : classes.inputExtensionLeftPosition)),
-            $leftPosition: popperPlacement.includes("end"),
-            $openShadow: false,
-            $floatLeft: false,
-            $floatRight: false
+            className: cx(classes.inputExtensionOpen, {
+              [classes.inputExtensionLeftPosition]: popperPlacement.includes("end")
+            })
           }), /* @__PURE__ */ jsxRuntime.jsx(BaseDropdownContext.default.Provider, {
             value: popperMaxSize,
-            children: /* @__PURE__ */ jsxRuntime.jsx(BaseDropdown_styles.StyledPanel, {
+            children: /* @__PURE__ */ jsxRuntime.jsx("div", {
               id: setId.setId(elementId, "children-container"),
-              className: clsx.clsx(baseDropdownClasses.default.panel, classes == null ? void 0 : classes.panel),
-              $popperPlacement: popperPlacement.includes("top") ? "top" : "bottom",
+              className: cx(classes.panel, {
+                [classes.panelOpenedUp]: popperPlacement.includes("top"),
+                [classes.panelOpenedDown]: popperPlacement.includes("bottom")
+              }),
               children
             })
-          }), popperPlacement.includes("top") && /* @__PURE__ */ jsxRuntime.jsx(BaseDropdown_styles.StyledExtension, {
+          }), popperPlacement.includes("top") && /* @__PURE__ */ jsxRuntime.jsx("div", {
             style: {
               width: extensionWidth
             },
-            className: clsx.clsx(baseDropdownClasses.default.inputExtensionOpen, classes == null ? void 0 : classes.inputExtensionOpen, baseDropdownClasses.default.inputExtensionOpenShadow, classes == null ? void 0 : classes.inputExtensionOpenShadow, popperPlacement.includes("end") && clsx.clsx(baseDropdownClasses.default.inputExtensionFloatRight, classes == null ? void 0 : classes.inputExtensionFloatRight), popperPlacement.includes("start") && clsx.clsx(baseDropdownClasses.default.inputExtensionFloatLeft, classes == null ? void 0 : classes.inputExtensionFloatLeft)),
-            $leftPosition: false,
-            $openShadow: true,
-            $floatLeft: popperPlacement.includes("start"),
-            $floatRight: popperPlacement.includes("end")
+            className: cx(classes.inputExtensionOpen, classes.inputExtensionOpenShadow, {
+              [classes.inputExtensionFloatRight]: popperPlacement.includes("end"),
+              [classes.inputExtensionFloatLeft]: popperPlacement.includes("start")
+            })
           })]
         })
       })
@@ -275,15 +283,16 @@ const HvBaseDropdown = (props) => {
       return container;
     return reactDom.createPortal(container, document.getElementById(rootId || "") || document.body);
   })();
-  return /* @__PURE__ */ jsxRuntime.jsxs(BaseDropdown_styles.StyledRoot, {
-    className: clsx.clsx(baseDropdownClasses.default.root, classes == null ? void 0 : classes.root),
-    children: [/* @__PURE__ */ jsxRuntime.jsx(BaseDropdown_styles.StyledAnchor, {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
+    className: classes.root,
+    children: [/* @__PURE__ */ jsxRuntime.jsx("div", {
       id,
       role: ariaRole,
-      "aria-expanded": !!isOpen,
+      "aria-expanded": ariaExpanded,
       "aria-owns": isOpen ? setId.setId(elementId, "children-container") : void 0,
-      className: clsx.clsx(className, baseDropdownClasses.default.anchor, classes == null ? void 0 : classes.anchor, disabled && clsx.clsx(baseDropdownClasses.default.rootDisabled, classes == null ? void 0 : classes.rootDisabled)),
-      $disabled: disabled,
+      className: cx(classes.anchor, {
+        [classes.rootDisabled]: disabled
+      }, className),
       ...!readOnly && {
         onKeyDown: handleToggle,
         onClick: handleToggle
@@ -295,5 +304,6 @@ const HvBaseDropdown = (props) => {
     }), isOpen && containerComponent]
   });
 };
+exports.baseDropdownClasses = BaseDropdown_styles.staticClasses;
 exports.HvBaseDropdown = HvBaseDropdown;
 //# sourceMappingURL=BaseDropdown.cjs.map