npm - @hitachivantara/uikit-react-core - Versions diffs - 5.90.0 → 5.91.0 - Mend

@hitachivantara/uikit-react-core 5.90.0 → 5.91.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (183) hide show

package/dist/esm/BaseDropdown/BaseDropdown.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BaseDropdown.js","sources":["../../../src/BaseDropdown/BaseDropdown.tsx"],"sourcesContent":["import {\n cloneElement,\n forwardRef,\n Fragment,\n isValidElement,\n useCallback,\n useMemo,\n useState,\n} from \"react\";\nimport { PopperProps, usePopper } from \"react-popper\";\nimport type { ClickAwayListenerProps } from \"@mui/material/ClickAwayListener\";\nimport { useForkRef } from \"@mui/material/utils\";\nimport { detectOverflow, Options, Placement } from \"@popperjs/core\";\nimport { DropDownXS, DropUpXS } from \"@hitachivantara/uikit-react-icons\";\nimport {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvTypography } from \"../Typography\";\nimport { getFirstAndLastFocus } from \"../utils/focusableElementFinder\";\nimport { isKey, isOneOfKeys } from \"../utils/keyboardUtils\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./BaseDropdown.styles\";\nimport { BaseDropdownPanel } from \"./BaseDropdownPanel\";\nimport { BaseDropdownContext, useBaseDropdownContext } from \"./context\";\n\nexport { staticClasses as baseDropdownClasses };\n\nexport type HvBaseDropdownClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBaseDropdownProps\n extends HvBaseProps<HTMLDivElement, \"onToggle\"> {\n /*\n The role of the element that triggers the popup.\n \n Defaults to \"combobox\" if `component` and the default\n * \"textbox\" header is used, undefined otherwise.\n /\n role?: string;\n /\n Header placeholder.\n /\n placeholder?: React.ReactNode;\n /\n If `true` the dropdown is disabled unable to be interacted, if `false` it is enabled.\n /\n disabled?: boolean;\n /\n If `true` the dropdown will be in read only mode, unable to be interacted.\n /\n readOnly?: boolean;\n /\n Indicates that user input is required on the form element.\n /\n required?: boolean;\n /\n Disable the portal behavior.\n * The children stay within it's parent DOM hierarchy.\n /\n disablePortal?: boolean;\n /\n If `true` the dropdown width depends size of content if `false` the width depends on the header size.\n * Defaults to `false`.\n /\n variableWidth?: boolean;\n /\n If `true` the dropdown starts opened if `false` it starts closed.\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 wired to the popper component.\n /\n popperProps?: Partial<PopperProps<any>>;\n /\n Placement of the dropdown.\n /\n placement?: \"left\" \| \"right\";\n /\n Replacement for the header component.\n * @deprecated use `headerComponent` instead\n /\n component?: React.ReactNode;\n /* Replacement for the header component /\n headerComponent?: React.ElementType;\n /\n Adornment to replace the default arrows.\n /\n adornment?: React.ReactNode;\n /\n When dropdown changes the expanded state.\n /\n onToggle?: (event: Event, open: boolean) => void;\n /\n When user click outside the open container.\n /\n onClickOutside?: (event: Event) => void;\n /\n Callback called when the dropdown is opened and ready,\n * commonly used to set focus to the content.\n /\n onContainerCreation?: (container: HTMLElement \| null) => void;\n /\n Attributes applied to the dropdown header element.\n /\n dropdownHeaderProps?: React.DetailedHTMLProps<\n React.HTMLAttributes<HTMLDivElement>,\n HTMLDivElement\n >;\n /\n Pass a ref to the dropdown header element.\n /\n dropdownHeaderRef?: React.Ref<HTMLDivElement>;\n /\n A Jss Object used to override or extend the component styles applied.\n /\n classes?: HvBaseDropdownClasses;\n /* @ignore /\n ref?: React.Ref<HTMLDivElement>;\n}\n\nconst BaseDropdown = forwardRef<\n HTMLDivElement,\n Omit<\n HvBaseDropdownProps,\n \"popperProps\" \| \"variableWidth\" \| \"placement\" \| \"onContainerCreation\"\n >\n>(function BaseDropdown(props, ref) {\n const {\n id: idProp,\n className,\n classes: classesProp,\n children,\n role,\n placeholder,\n component,\n headerComponent: HeaderComponentProp,\n adornment,\n expanded,\n dropdownHeaderProps,\n defaultExpanded,\n disabled,\n readOnly,\n required,\n disablePortal,\n \"aria-expanded\": ariaExpandedProp,\n \"aria-label\": ariaLabelProp,\n \"aria-labelledby\": ariaLabelledByProp,\n dropdownHeaderRef: dropdownHeaderRefProp,\n onToggle,\n onClickOutside,\n ...others\n } = props;\n\n const { classes, cx } = useClasses(classesProp);\n\n const {\n popperPlacement,\n popperElement,\n referenceElement,\n setReferenceElement,\n } = useBaseDropdownContext();\n\n const [isOpen, setIsOpen] = useControlled(expanded, Boolean(defaultExpanded));\n\n const headerRef = useForkRef(\n setReferenceElement,\n dropdownHeaderRefProp,\n dropdownHeaderProps?.ref as any,\n );\n\n const customHeaderRef = useForkRef(ref, headerRef);\n\n const ariaRole = role \|\| (component == null ? \"combobox\" : undefined);\n\n const ariaExpanded = ariaExpandedProp ?? (ariaRole ? !!isOpen : undefined);\n\n const id = useUniqueId(idProp);\n const containerId = setId(id, \"children-container\");\n\n const headerControlArias = {\n \"aria-required\": required ?? undefined,\n \"aria-readonly\": readOnly ?? undefined,\n \"aria-disabled\": disabled ?? undefined,\n\n \"aria-expanded\": ariaExpanded,\n \"aria-owns\": isOpen ? containerId : undefined,\n \"aria-controls\": isOpen ? containerId : undefined,\n } satisfies React.AriaAttributes;\n\n const headerAriaLabels = {\n \"aria-label\": ariaLabelProp,\n \"aria-labelledby\": ariaLabelledByProp,\n } satisfies React.AriaAttributes;\n\n const handleToggle = useCallback(\n (event: any) => {\n if (event && !isKey(event, \"Tab\")) {\n event.preventDefault();\n }\n\n const notControlKey =\n !!event?.code &&\n !isOneOfKeys(event, [\"Tab\", \"Enter\", \"Esc\", \"ArrowDown\", \"Space\"]);\n\n const ignoredCombinations =\n (isKey(event, \"Esc\") && !isOpen) \|\|\n (isKey(event, \"ArrowDown\") && isOpen) \|\|\n (isKey(event, \"Tab\") && !isOpen);\n\n if (disabled \|\| notControlKey \|\| ignoredCombinations) return;\n\n const newOpen = !isOpen;\n\n / If about to close focus on the header component. /\n setIsOpen(() => {\n if (!newOpen) {\n // Focus-ring won't be visible even if using the keyboard:\n // https://github.com/WICG/focus-visible/issues/88\n referenceElement?.focus({ preventScroll: true });\n }\n\n return newOpen;\n });\n\n onToggle?.(event, newOpen);\n },\n [isOpen, disabled, setIsOpen, onToggle, referenceElement],\n );\n\n const ExpanderComponent = isOpen ? DropUpXS : DropDownXS;\n\n const defaultHeaderElement = (\n <div\n id={setId(id, \"header\")}\n className={cx(classes.header, {\n [classes.headerDisabled]: disabled,\n [classes.headerReadOnly]: readOnly,\n [classes.headerOpen]: isOpen,\n [classes.headerOpenUp]: isOpen && popperPlacement?.includes(\"top\"),\n [classes.headerOpenDown]: isOpen && popperPlacement?.includes(\"bottom\"),\n })}\n // TODO: review \"textbox\" role\n role={ariaRole === \"combobox\" ? \"textbox\" : undefined}\n {...headerAriaLabels}\n style={disabled \|\| readOnly ? { pointerEvents: \"none\" } : undefined}\n // Removes the element from the navigation sequence for keyboard focus if disabled\n tabIndex={disabled ? -1 : 0}\n ref={headerRef}\n {...dropdownHeaderProps}\n >\n <div\n className={cx(classes.selection, {\n [classes.selectionDisabled]: disabled,\n })}\n >\n {placeholder && typeof placeholder === \"string\" ? (\n <HvTypography noWrap className={classes.placeholder}>\n {placeholder}\n </HvTypography>\n ) : (\n placeholder\n )}\n </div>\n <div className={classes.arrowContainer}>\n {adornment \|\| (\n <ExpanderComponent\n iconSize=\"XS\"\n color={disabled ? \"textDisabled\" : undefined}\n className={classes.arrow}\n />\n )}\n </div>\n </div>\n );\n\n const headerElement =\n component && isValidElement(component)\n ? cloneElement(component as React.ReactElement, {\n ref: headerRef,\n ...headerControlArias,\n })\n : defaultHeaderElement;\n\n /* Handle keyboard inside children container. */\n const handleContainerKeyDown: React.KeyboardEventHandler = (event) => {\n if (isKey(event, \"Esc\")) {\n handleToggle(event);\n }\n if (isKey(event, \"Tab\") && !event.shiftKey) {\n const focusList = getFirstAndLastFocus(popperElement);\n if (document.activeElement === focusList?.last) {\n event.preventDefault();\n focusList?.first?.focus();\n }\n }\n };\n\n const handleOutside: ClickAwayListenerProps[\"onClickAway\"] = (event) => {\n const isButtonClick = referenceElement?.contains(event.target as any);\n if (!isButtonClick) {\n onClickOutside?.(event);\n setIsOpen(false);\n onToggle?.(event, false);\n }\n };\n\n const hasCustomHeader = !!HeaderComponentProp;\n const HeaderComponent = HeaderComponentProp \|\| \"div\";\n const RootComponent = HeaderComponentProp ? Fragment : \"div\";\n\n return (\n <RootComponent {...(!hasCustomHeader && { className: classes.root })}>\n <HeaderComponent\n ref={hasCustomHeader ? customHeaderRef : ref}\n id={id}\n disabled={hasCustomHeader && disabled}\n className={cx(className, {\n [classes.anchor]: !hasCustomHeader,\n [classes.rootDisabled]: disabled,\n })}\n {...(!readOnly && {\n onKeyDown: handleToggle,\n onClick: handleToggle,\n })}\n {...((ariaRole \|\| hasCustomHeader) && {\n role: hasCustomHeader ? undefined : ariaRole,\n ...headerAriaLabels,\n ...headerControlArias,\n })}\n // Removes the element from the navigation sequence for keyboard focus\n tabIndex={hasCustomHeader ? undefined : -1}\n {...others}\n >\n {headerElement}\n </HeaderComponent>\n {isOpen && (\n <BaseDropdownPanel\n classes={classes}\n containerId={containerId}\n onClickAway={handleOutside}\n onContainerKeyDown={handleContainerKeyDown}\n >\n {children}\n </BaseDropdownPanel>\n )}\n </RootComponent>\n );\n});\n\nexport const HvBaseDropdown = forwardRef<HTMLDivElement, HvBaseDropdownProps>(\n function HvBaseDropdown(props, ref) {\n const {\n popperProps = {},\n variableWidth,\n placement: placementProp = \"right\",\n onContainerCreation,\n ...others\n } = useDefaultProps(\"HvBaseDropdown\", props);\n\n const placement: Placement = `bottom-${\n placementProp === \"right\" ? \"start\" : \"end\"\n }`;\n\n const { modifiers: popperPropsModifiers, ...otherPopperProps } =\n popperProps;\n\n const [referenceElement, setReferenceElement] =\n useState<HTMLElement \| null>(null);\n const [popperElement, setPopperElement] = useState<HTMLElement \| null>(\n null,\n );\n\n const onFirstUpdate = useCallback(() => {\n onContainerCreation?.(popperElement);\n }, [onContainerCreation, popperElement]);\n\n const modifiers = useMemo<Options[\"modifiers\"]>(\n () => [\n {\n name: \"variableWidth\",\n enabled: !variableWidth,\n phase: \"beforeWrite\",\n requires: [\"computeStyles\"],\n fn: ({ state }) => {\n state.styles.popper.width = `${state.rects.reference.width}px`;\n },\n effect: ({ state }) => {\n state.elements.popper.style.width = `${\n (state.elements.reference as any).offsetWidth\n }px`;\n },\n },\n {\n name: \"maxSize\",\n enabled: true,\n phase: \"main\",\n requiresIfExists: [\"offset\", \"preventOverflow\", \"flip\"],\n fn: ({ state, name, options }) => {\n const overflow = detectOverflow(state, options);\n\n const x = state.modifiersData.preventOverflow?.x \|\| 0;\n const y = state.modifiersData.preventOverflow?.y \|\| 0;\n\n const popperWidth = state.rects.popper.width;\n const popperHeight = state.rects.popper.height;\n\n const basePlacement = state.placement.split(\"-\")[0];\n\n const widthProp = basePlacement === \"left\" ? \"left\" : \"right\";\n const heightProp = basePlacement === \"top\" ? \"top\" : \"bottom\";\n\n state.modifiersData[name] = {\n width: popperWidth - overflow[widthProp] - x,\n height: popperHeight - overflow[heightProp] - y,\n };\n },\n },\n {\n name: \"applyMaxSize\",\n enabled: true,\n phase: \"beforeWrite\",\n requires: [\"maxSize\"],\n fn: ({ state }) => {\n // The `maxSize` modifier provides this data\n const { width, height } = state.modifiersData.maxSize;\n state.styles.popper.maxWidth = `${width}px`;\n state.styles.popper.maxHeight = `${height}px`;\n },\n },\n ...(popperPropsModifiers \|\| []),\n ],\n [popperPropsModifiers, variableWidth],\n );\n\n const popper = usePopper(referenceElement, popperElement, {\n placement,\n modifiers,\n onFirstUpdate,\n ...otherPopperProps,\n });\n\n const value = useMemo(\n () => ({\n popperPlacement:\n (popper?.attributes.popper?.[\"data-popper-placement\"] as Placement) ??\n \"bottom\",\n popper,\n popperElement,\n setPopperElement,\n referenceElement,\n setReferenceElement,\n }),\n [popper, popperElement, referenceElement],\n );\n\n return (\n <BaseDropdownContext.Provider value={value}>\n <BaseDropdown ref={ref} {...others} />\n </BaseDropdownContext.Provider>\n );\n },\n);\n"],"names":["BaseDropdown","HvBaseDropdown"],"mappings":"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"}
1	+ {"version":3,"file":"BaseDropdown.js","sources":["../../../src/BaseDropdown/BaseDropdown.tsx"],"sourcesContent":["import {\n cloneElement,\n forwardRef,\n Fragment,\n isValidElement,\n useCallback,\n useMemo,\n useState,\n} from \"react\";\nimport { PopperProps, usePopper } from \"react-popper\";\nimport type { ClickAwayListenerProps } from \"@mui/material/ClickAwayListener\";\nimport { useForkRef } from \"@mui/material/utils\";\nimport { detectOverflow, Options, Placement } from \"@popperjs/core\";\nimport { DropDownXS, DropUpXS } from \"@hitachivantara/uikit-react-icons\";\nimport {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvTypography } from \"../Typography\";\nimport { getFirstAndLastFocus } from \"../utils/focusableElementFinder\";\nimport { isKey, isOneOfKeys } from \"../utils/keyboardUtils\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./BaseDropdown.styles\";\nimport { BaseDropdownPanel } from \"./BaseDropdownPanel\";\nimport { BaseDropdownContext, useBaseDropdownContext } from \"./context\";\n\nexport { staticClasses as baseDropdownClasses };\n\nexport type HvBaseDropdownClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBaseDropdownProps\n extends HvBaseProps<HTMLDivElement, \"onToggle\"> {\n /*\n The role of the element that triggers the popup.\n \n Defaults to \"combobox\" if `component` and the default\n * \"textbox\" header is used, undefined otherwise.\n /\n role?: string;\n /\n Header placeholder.\n /\n placeholder?: React.ReactNode;\n /\n If `true` the dropdown is disabled unable to be interacted, if `false` it is enabled.\n /\n disabled?: boolean;\n /\n If `true` the dropdown will be in read only mode, unable to be interacted.\n /\n readOnly?: boolean;\n /\n Indicates that user input is required on the form element.\n /\n required?: boolean;\n /\n Disable the portal behavior.\n * The children stay within it's parent DOM hierarchy.\n /\n disablePortal?: boolean;\n /\n If `true` the dropdown width depends size of content if `false` the width depends on the header size.\n * Defaults to `false`.\n /\n variableWidth?: boolean;\n /\n If `true` the dropdown starts opened if `false` it starts closed.\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 wired to the popper component.\n /\n popperProps?: Partial<PopperProps<any>>;\n /\n Placement of the dropdown.\n /\n placement?: \"left\" \| \"right\";\n /\n Replacement for the header component.\n * @deprecated use `headerComponent` instead\n /\n component?: React.ReactNode;\n /* Replacement for the header component /\n headerComponent?: React.ElementType;\n /\n Adornment to replace the default arrows.\n /\n adornment?: React.ReactNode;\n /\n When dropdown changes the expanded state.\n /\n onToggle?: (event: Event, open: boolean) => void;\n /\n When user click outside the open container.\n /\n onClickOutside?: (event: Event) => void;\n /\n Callback called when the dropdown is opened and ready,\n * commonly used to set focus to the content.\n /\n onContainerCreation?: (container: HTMLElement \| null) => void;\n /\n Attributes applied to the dropdown header element.\n /\n dropdownHeaderProps?: React.DetailedHTMLProps<\n React.HTMLAttributes<HTMLDivElement>,\n HTMLDivElement\n >;\n /\n Pass a ref to the dropdown header element.\n /\n dropdownHeaderRef?: React.Ref<HTMLDivElement>;\n /\n A Jss Object used to override or extend the component styles applied.\n /\n classes?: HvBaseDropdownClasses;\n /* @ignore /\n ref?: React.Ref<HTMLDivElement>;\n}\n\nconst BaseDropdown = forwardRef<\n HTMLDivElement,\n Omit<\n HvBaseDropdownProps,\n \"popperProps\" \| \"variableWidth\" \| \"placement\" \| \"onContainerCreation\"\n >\n>(function BaseDropdown(props, ref) {\n const {\n id: idProp,\n className,\n classes: classesProp,\n children,\n role,\n placeholder,\n component,\n headerComponent: HeaderComponentProp,\n adornment,\n expanded,\n dropdownHeaderProps,\n defaultExpanded,\n disabled,\n readOnly,\n required,\n disablePortal,\n \"aria-expanded\": ariaExpandedProp,\n \"aria-label\": ariaLabelProp,\n \"aria-labelledby\": ariaLabelledByProp,\n dropdownHeaderRef: dropdownHeaderRefProp,\n onToggle,\n onClickOutside,\n ...others\n } = props;\n\n const { classes, cx } = useClasses(classesProp);\n\n const {\n popperPlacement,\n popperElement,\n referenceElement,\n setReferenceElement,\n } = useBaseDropdownContext();\n\n const [isOpen, setIsOpen] = useControlled(expanded, Boolean(defaultExpanded));\n\n const headerRef = useForkRef(\n setReferenceElement,\n dropdownHeaderRefProp,\n dropdownHeaderProps?.ref as any,\n );\n\n const customHeaderRef = useForkRef(ref, headerRef);\n\n const ariaRole = role \|\| (component == null ? \"combobox\" : undefined);\n\n const ariaExpanded = ariaExpandedProp ?? (ariaRole ? !!isOpen : undefined);\n\n const id = useUniqueId(idProp);\n const containerId = setId(id, \"children-container\");\n\n const headerControlArias = {\n \"aria-required\": required ?? undefined,\n \"aria-readonly\": readOnly ?? undefined,\n \"aria-disabled\": disabled ?? undefined,\n\n \"aria-expanded\": ariaExpanded,\n \"aria-owns\": isOpen ? containerId : undefined,\n \"aria-controls\": isOpen ? containerId : undefined,\n } satisfies React.AriaAttributes;\n\n const headerAriaLabels = {\n \"aria-label\": ariaLabelProp,\n \"aria-labelledby\": ariaLabelledByProp,\n } satisfies React.AriaAttributes;\n\n const handleToggle = useCallback(\n (event: any) => {\n if (event && !isKey(event, \"Tab\")) {\n event.preventDefault();\n }\n\n const notControlKey =\n !!event?.code &&\n !isOneOfKeys(event, [\"Tab\", \"Enter\", \"Esc\", \"ArrowDown\", \"Space\"]);\n\n const ignoredCombinations =\n (isKey(event, \"Esc\") && !isOpen) \|\|\n (isKey(event, \"ArrowDown\") && isOpen) \|\|\n (isKey(event, \"Tab\") && !isOpen);\n\n if (disabled \|\| notControlKey \|\| ignoredCombinations) return;\n\n const newOpen = !isOpen;\n\n / If about to close focus on the header component. /\n setIsOpen(() => {\n if (!newOpen) {\n // Focus-ring won't be visible even if using the keyboard:\n // https://github.com/WICG/focus-visible/issues/88\n referenceElement?.focus({ preventScroll: true });\n }\n\n return newOpen;\n });\n\n onToggle?.(event, newOpen);\n },\n [isOpen, disabled, setIsOpen, onToggle, referenceElement],\n );\n\n const ExpanderComponent = isOpen ? DropUpXS : DropDownXS;\n\n const defaultHeaderElement = (\n <div\n id={setId(id, \"header\")}\n data-popper-placement={popperPlacement}\n className={cx(classes.header, {\n [classes.headerOpen]: isOpen,\n [classes.headerOpenUp]: isOpen && popperPlacement?.includes(\"top\"),\n [classes.headerOpenDown]: isOpen && popperPlacement?.includes(\"bottom\"),\n [classes.headerReadOnly]: readOnly,\n [classes.headerDisabled]: disabled,\n })}\n // TODO: review \"textbox\" role\n role={ariaRole === \"combobox\" ? \"textbox\" : undefined}\n {...headerAriaLabels}\n style={disabled \|\| readOnly ? { pointerEvents: \"none\" } : undefined}\n // Removes the element from the navigation sequence for keyboard focus if disabled\n tabIndex={disabled ? -1 : 0}\n ref={headerRef}\n {...dropdownHeaderProps}\n >\n <div\n className={cx(classes.selection, {\n [classes.selectionDisabled]: disabled,\n })}\n >\n {placeholder && typeof placeholder === \"string\" ? (\n <HvTypography noWrap className={classes.placeholder}>\n {placeholder}\n </HvTypography>\n ) : (\n placeholder\n )}\n </div>\n <div className={classes.arrowContainer}>\n {adornment \|\| (\n <ExpanderComponent\n iconSize=\"XS\"\n color={disabled ? \"textDisabled\" : undefined}\n className={classes.arrow}\n />\n )}\n </div>\n </div>\n );\n\n const headerElement =\n component && isValidElement(component)\n ? cloneElement(component as React.ReactElement, {\n ref: headerRef,\n ...headerControlArias,\n })\n : defaultHeaderElement;\n\n /* Handle keyboard inside children container. */\n const handleContainerKeyDown: React.KeyboardEventHandler = (event) => {\n if (isKey(event, \"Esc\")) {\n handleToggle(event);\n }\n if (isKey(event, \"Tab\") && !event.shiftKey) {\n const focusList = getFirstAndLastFocus(popperElement);\n if (document.activeElement === focusList?.last) {\n event.preventDefault();\n focusList?.first?.focus();\n }\n }\n };\n\n const handleOutside: ClickAwayListenerProps[\"onClickAway\"] = (event) => {\n const isButtonClick = referenceElement?.contains(event.target as any);\n if (!isButtonClick) {\n onClickOutside?.(event);\n setIsOpen(false);\n onToggle?.(event, false);\n }\n };\n\n const hasCustomHeader = !!HeaderComponentProp;\n const HeaderComponent = HeaderComponentProp \|\| \"div\";\n const RootComponent = HeaderComponentProp ? Fragment : \"div\";\n\n return (\n <RootComponent {...(!hasCustomHeader && { className: classes.root })}>\n <HeaderComponent\n ref={hasCustomHeader ? customHeaderRef : ref}\n id={id}\n disabled={hasCustomHeader && disabled}\n className={cx(className, {\n [classes.anchor]: !hasCustomHeader,\n [classes.rootDisabled]: disabled,\n })}\n {...(!readOnly && {\n onKeyDown: handleToggle,\n onClick: handleToggle,\n })}\n {...((ariaRole \|\| hasCustomHeader) && {\n role: hasCustomHeader ? undefined : ariaRole,\n ...headerAriaLabels,\n ...headerControlArias,\n })}\n // Removes the element from the navigation sequence for keyboard focus\n tabIndex={hasCustomHeader ? undefined : -1}\n {...others}\n >\n {headerElement}\n </HeaderComponent>\n {isOpen && (\n <BaseDropdownPanel\n classes={classes}\n containerId={containerId}\n onClickAway={handleOutside}\n onContainerKeyDown={handleContainerKeyDown}\n >\n {children}\n </BaseDropdownPanel>\n )}\n </RootComponent>\n );\n});\n\nexport const HvBaseDropdown = forwardRef<HTMLDivElement, HvBaseDropdownProps>(\n function HvBaseDropdown(props, ref) {\n const {\n popperProps = {},\n variableWidth,\n placement: placementProp = \"right\",\n onContainerCreation,\n ...others\n } = useDefaultProps(\"HvBaseDropdown\", props);\n\n const placement: Placement = `bottom-${\n placementProp === \"right\" ? \"start\" : \"end\"\n }`;\n\n const { modifiers: popperPropsModifiers, ...otherPopperProps } =\n popperProps;\n\n const [referenceElement, setReferenceElement] =\n useState<HTMLElement \| null>(null);\n const [popperElement, setPopperElement] = useState<HTMLElement \| null>(\n null,\n );\n\n const onFirstUpdate = useCallback(() => {\n onContainerCreation?.(popperElement);\n }, [onContainerCreation, popperElement]);\n\n const modifiers = useMemo<Options[\"modifiers\"]>(\n () => [\n {\n name: \"variableWidth\",\n enabled: !variableWidth,\n phase: \"beforeWrite\",\n requires: [\"computeStyles\"],\n fn: ({ state }) => {\n state.styles.popper.width = `${state.rects.reference.width}px`;\n },\n effect: ({ state }) => {\n state.elements.popper.style.width = `${\n (state.elements.reference as any).offsetWidth\n }px`;\n },\n },\n {\n name: \"maxSize\",\n enabled: true,\n phase: \"main\",\n requiresIfExists: [\"offset\", \"preventOverflow\", \"flip\"],\n fn: ({ state, name, options }) => {\n const overflow = detectOverflow(state, options);\n\n const x = state.modifiersData.preventOverflow?.x \|\| 0;\n const y = state.modifiersData.preventOverflow?.y \|\| 0;\n\n const popperWidth = state.rects.popper.width;\n const popperHeight = state.rects.popper.height;\n\n const basePlacement = state.placement.split(\"-\")[0];\n\n const widthProp = basePlacement === \"left\" ? \"left\" : \"right\";\n const heightProp = basePlacement === \"top\" ? \"top\" : \"bottom\";\n\n state.modifiersData[name] = {\n width: popperWidth - overflow[widthProp] - x,\n height: popperHeight - overflow[heightProp] - y,\n };\n },\n },\n {\n name: \"applyMaxSize\",\n enabled: true,\n phase: \"beforeWrite\",\n requires: [\"maxSize\"],\n fn: ({ state }) => {\n // The `maxSize` modifier provides this data\n const { width, height } = state.modifiersData.maxSize;\n state.styles.popper.maxWidth = `${width}px`;\n state.styles.popper.maxHeight = `${height}px`;\n },\n },\n ...(popperPropsModifiers \|\| []),\n ],\n [popperPropsModifiers, variableWidth],\n );\n\n const popper = usePopper(referenceElement, popperElement, {\n placement,\n modifiers,\n onFirstUpdate,\n ...otherPopperProps,\n });\n\n const value = useMemo(\n () => ({\n popperPlacement:\n (popper?.attributes.popper?.[\"data-popper-placement\"] as Placement) ??\n \"bottom\",\n popper,\n popperElement,\n setPopperElement,\n referenceElement,\n setReferenceElement,\n }),\n [popper, popperElement, referenceElement],\n );\n\n return (\n <BaseDropdownContext.Provider value={value}>\n <BaseDropdown ref={ref} {...others} />\n </BaseDropdownContext.Provider>\n );\n },\n);\n"],"names":["BaseDropdown","HvBaseDropdown"],"mappings":"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"}

package/dist/esm/BaseDropdown/BaseDropdown.styles.js CHANGED Viewed

@@ -15,53 +15,54 @@ const { useClasses, staticClasses } = createClasses("HvBaseDropdown", {
     cursor: "pointer",
     userSelect: "none",
     position: "relative",
-    background: theme.colors.bgContainer,
+    backgroundColor: theme.colors.bgContainer,
     boxSizing: "border-box",
     border: `1px solid ${theme.colors.text}`,
     borderRadius: theme.radii.base,
-    "&:hover": {
-      border: `1px solid ${theme.colors.primary}`
+    ":hover,:focus-visible": {
+      borderColor: theme.colors.primary
     },
-    "&:focus": {
+    ":focus": {
       outline: "none"
     },
-    "&:focus-visible": {
-      ...outlineStyles,
-      border: `1px solid ${theme.colors.primary}`
+    ":focus-visible": {
+      ...outlineStyles
     }
   },
   headerOpen: {
-    border: `1px solid ${theme.colors.text}`,
-    "&:hover": {
-      border: `1px solid ${theme.colors.text}`
+    "&,:hover": {
+      borderColor: theme.colors.text
+    },
+    "&[data-popper-placement*='top']": {
+      borderRadius: `0px 0px ${theme.radii.base} ${theme.radii.base}`
+    },
+    "&[data-popper-placement*='bottom']": {
+      borderRadius: `${theme.radii.base} ${theme.radii.base} 0px 0px`
     }
   },
-  headerOpenUp: {
-    borderRadius: `0px 0px ${theme.radii.base} ${theme.radii.base}`
-  },
-  headerOpenDown: {
-    borderRadius: `${theme.radii.base} ${theme.radii.base} 0px 0px`
-  },
+  /** @deprecated use `[data-popper-placement*='top']` selector instead */
+  headerOpenUp: {},
+  /** @deprecated use `[data-popper-placement*='bottom']` selector instead */
+  headerOpenDown: {},
   headerDisabled: {
     cursor: "not-allowed",
     pointerEvents: "none",
     color: theme.colors.textDisabled,
-    border: `1px solid currentcolor`,
-    background: theme.colors.bgPage,
-    "&:hover": {
-      border: `1px solid currentcolor`
+    backgroundColor: theme.colors.bgPage,
+    "&,:hover": {
+      borderColor: "currentcolor"
     }
   },
   headerReadOnly: {
     cursor: "not-allowed",
     pointerEvents: "none",
     color: theme.colors.textSubtle,
-    border: `1px solid currentcolor`,
-    background: theme.colors.bgPage,
+    borderColor: "currentcolor",
+    backgroundColor: theme.colors.bgPage,
     userSelect: "text",
-    "&:focus-visible": {
+    ":focus-visible": {
       outline: "none",
-      border: `1px solid currentcolor`
+      borderColor: "currentcolor"
     }
   },
   arrowContainer: {
@@ -89,6 +90,7 @@ const { useClasses, staticClasses } = createClasses("HvBaseDropdown", {
     padding: 0,
     border: `1px solid ${theme.colors.text}`
   },
+  // TODO: change from classes to [data-popper-placement] selectors
   panelOpenedUp: {
     top: 1,
     borderRadius: `${theme.radii.base} ${theme.radii.base} 0 0`

package/dist/esm/BaseDropdown/BaseDropdown.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BaseDropdown.styles.js","sources":["../../../src/BaseDropdown/BaseDropdown.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\n\nexport const { useClasses, staticClasses } = createClasses(\"HvBaseDropdown\", {\n root: { width: \"100%\", position: \"relative\" },\n rootDisabled: {\n cursor: \"not-allowed\",\n \"&:focus\": {\n outline: \"none\",\n },\n },\n anchor: { display: \"inline-block\", width: \"100%\" },\n container: { zIndex: theme.zIndices.popover, width: \"auto\" },\n header: {\n cursor: \"pointer\",\n userSelect: \"none\",\n position: \"relative\",\n ~~background~~: theme.colors.bgContainer,\n boxSizing: \"border-box\",\n border: `1px solid ${theme.colors.text}`,\n borderRadius: theme.radii.base,\n \"&:hover\": {\n ~~border~~: ~~`1px solid ${~~theme.colors.primary~~}`,\~~n },\n \"&:focus\": {\n outline: \"none\",\n },\n \"&:focus-visible\": {\n ...outlineStyles,\n ~~border: `1px solid ${theme.colors.primary}`,\n~~ },\n },\n headerOpen: {\n ~~border: `1px solid ${theme.colors.text}`,\n~~\~~n \~~"&:hover\": {\n ~~border~~: ~~`1px solid ${~~theme.colors.text~~}`,\~~n },\n ~~},\~~n ~~headerOpenUp~~: {\n borderRadius: `0px 0px ${theme.radii.base} ${theme.radii.base}`,\n },\n ~~headerOpenDown~~: {\n borderRadius: `${theme.radii.base} ${theme.radii.base} 0px 0px`,\n },\n headerDisabled: {\n cursor: \"not-allowed\",\n pointerEvents: \"none\",\n color: theme.colors.textDisabled,\n ~~border~~: ~~`1px solid currentcolor`,\n background:~~ theme.colors.bgPage,\n \"&:hover\": {\n ~~border~~: ~~`1px solid~~ currentcolor~~`,\~~n },\n },\n headerReadOnly: {\n cursor: \"not-allowed\",\n pointerEvents: \"none\",\n color: theme.colors.textSubtle,\n ~~border~~: ~~`1px solid~~ currentcolor~~`,\~~n ~~background~~: theme.colors.bgPage,\n userSelect: \"text\",\n \"&:focus-visible\": {\n outline: \"none\",\n ~~border~~: ~~`1px solid~~ currentcolor~~`,\~~n },\n },\n arrowContainer: {\n position: \"absolute\",\n pointerEvents: \"none\",\n top: -1,\n right: -1,\n },\n arrow: {},\n selection: {\n display: \"flex\",\n alignItems: \"center\",\n height: \"30px\",\n boxSizing: \"border-box\",\n paddingLeft: theme.space.xs,\n paddingRight: 32,\n },\n selectionDisabled: {},\n placeholder: {\n display: \"block\",\n color: theme.colors.textSubtle,\n },\n panel: {\n // TODO: remove padding override in v6 (most elements need it)\n padding: 0,\n border: `1px solid ${theme.colors.text}`,\n },\n panelOpenedUp: {\n top: 1,\n borderRadius: `${theme.radii.base} ${theme.radii.base} 0 0`,\n },\n panelOpenedDown: {\n top: -1,\n borderRadius: `0 0 ${theme.radii.base} ${theme.radii.base}`,\n },\n inputExtensionOpen: {\n height: \"0px\",\n backgroundColor: theme.colors.bgContainer,\n borderTop: \"none\",\n borderBottom: \"none\",\n borderRight: `1px solid ${theme.colors.text}`,\n borderLeft: `1px solid ${theme.colors.text}`,\n },\n inputExtensionLeftPosition: { marginLeft: \"auto\" },\n inputExtensionOpenShadow: {\n boxShadow: `0px 8px 0px ${theme.colors.textDimmed}, 0px 0px 9px 0px rgba(65,65,65,.12)`,\n },\n inputExtensionFloatRight: { float: \"right\" },\n inputExtensionFloatLeft: { float: \"left\" },\n});\n"],"names":[],"mappings":";;;AAKO,MAAM,EAAE,YAAY,kBAAkB,cAAc,kBAAkB;AAAA,EAC3E,MAAM,EAAE,OAAO,QAAQ,UAAU,WAAW;AAAA,EAC5C,cAAc;AAAA,IACZ,QAAQ;AAAA,IACR,WAAW;AAAA,MACT,SAAS;AAAA,IAAA;AAAA,EAEb;AAAA,EACA,QAAQ,EAAE,SAAS,gBAAgB,OAAO,OAAO;AAAA,EACjD,WAAW,EAAE,QAAQ,MAAM,SAAS,SAAS,OAAO,OAAO;AAAA,EAC3D,QAAQ;AAAA,IACN,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,~~YAAY~~,MAAM,OAAO;AAAA,~~IACzB~~,WAAW;AAAA,IACX,QAAQ,aAAa,MAAM,OAAO,IAAI;AAAA,IACtC,cAAc,MAAM,MAAM;AAAA,IAC1B,~~WAAW~~;AAAA,~~MACT~~,~~QAAQ,~~aAAa,MAAM,OAAO~~,OAAO~~;AAAA,~~IAC3C~~;AAAA,IACA,~~WAAW~~;AAAA,~~MACT~~,SAAS;AAAA,IACX;AAAA,IACA,~~mBAAmB~~;AAAA,~~MACjB~~,GAAG;AAAA,~~MACH,QAAQ,aAAa,MAAM,OAAO,OAAO;AAAA,~~IAAA;AAAA,~~EAE7C~~;AAAA,EACA,YAAY;AAAA,IACV,~~QAAQ,aAAa,MAAM,OAAO,IAAI~~;AAAA,~~IAEtC~~,~~WAAW;AAAA,MACT,QAAQ,~~aAAa,MAAM,OAAO~~,IAAI~~;AAAA,~~IAAA~~;AAAA,~~EAE1C;AAAA~~,~~EACA,cAAc~~;AAAA,~~IACZ~~,cAAc,WAAW,MAAM,MAAM,IAAI,IAAI,MAAM,MAAM,IAAI;AAAA,~~EAC~~/D;AAAA,~~EACA~~,~~gBAAgB~~;AAAA,~~IACd~~,cAAc,GAAG,MAAM,MAAM,IAAI,IAAI,MAAM,MAAM,IAAI;AAAA,~~EACvD~~;AAAA,~~EACA~~,gBAAgB;AAAA,IACd,QAAQ;AAAA,IACR,eAAe;AAAA,IACf,OAAO,MAAM,OAAO;AAAA,IACpB,~~QAAQ;AAAA~~,~~IACR,YAAY,~~MAAM,OAAO;AAAA,~~IACzB~~,~~WAAW~~;AAAA,~~MACT~~,~~QAAQ~~;AAAA,IAAA;AAAA,~~EAEZ~~;AAAA,EACA,gBAAgB;AAAA,IACd,QAAQ;AAAA,IACR,eAAe;AAAA,IACf,OAAO,MAAM,OAAO;AAAA,IACpB,~~QAAQ~~;AAAA,~~IACR~~,~~YAAY~~,MAAM,OAAO;AAAA,~~IACzB~~,YAAY;AAAA,IACZ,~~mBAAmB~~;AAAA,~~MACjB~~,SAAS;AAAA,MACT,~~QAAQ~~;AAAA,IAAA;AAAA,~~EAEZ~~;AAAA,EACA,gBAAgB;AAAA,IACd,UAAU;AAAA,IACV,eAAe;AAAA,IACf,KAAK;AAAA,IACL,OAAO;AAAA,EACT;AAAA,EACA,OAAO,CAAC;AAAA,EACR,WAAW;AAAA,IACT,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,aAAa,MAAM,MAAM;AAAA,IACzB,cAAc;AAAA,EAChB;AAAA,EACA,mBAAmB,CAAC;AAAA,EACpB,aAAa;AAAA,IACX,SAAS;AAAA,IACT,OAAO,MAAM,OAAO;AAAA,EACtB;AAAA,EACA,OAAO;AAAA;AAAA,IAEL,SAAS;AAAA,IACT,QAAQ,aAAa,MAAM,OAAO,IAAI;AAAA,EACxC;AAAA,~~EACA~~,eAAe;AAAA,IACb,KAAK;AAAA,IACL,cAAc,GAAG,MAAM,MAAM,IAAI,IAAI,MAAM,MAAM,IAAI;AAAA,EACvD;AAAA,EACA,iBAAiB;AAAA,IACf,KAAK;AAAA,IACL,cAAc,OAAO,MAAM,MAAM,IAAI,IAAI,MAAM,MAAM,IAAI;AAAA,EAC3D;AAAA,EACA,oBAAoB;AAAA,IAClB,QAAQ;AAAA,IACR,iBAAiB,MAAM,OAAO;AAAA,IAC9B,WAAW;AAAA,IACX,cAAc;AAAA,IACd,aAAa,aAAa,MAAM,OAAO,IAAI;AAAA,IAC3C,YAAY,aAAa,MAAM,OAAO,IAAI;AAAA,EAC5C;AAAA,EACA,4BAA4B,EAAE,YAAY,OAAO;AAAA,EACjD,0BAA0B;AAAA,IACxB,WAAW,eAAe,MAAM,OAAO,UAAU;AAAA,EACnD;AAAA,EACA,0BAA0B,EAAE,OAAO,QAAQ;AAAA,EAC3C,yBAAyB,EAAE,OAAO,OAAO;AAC3C,CAAC;"}
1	+ {"version":3,"file":"BaseDropdown.styles.js","sources":["../../../src/BaseDropdown/BaseDropdown.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\n\nexport const { useClasses, staticClasses } = createClasses(\"HvBaseDropdown\", {\n root: { width: \"100%\", position: \"relative\" },\n rootDisabled: {\n cursor: \"not-allowed\",\n \"&:focus\": {\n outline: \"none\",\n },\n },\n anchor: { display: \"inline-block\", width: \"100%\" },\n container: { zIndex: theme.zIndices.popover, width: \"auto\" },\n header: {\n cursor: \"pointer\",\n userSelect: \"none\",\n position: \"relative\",\n backgroundColor: theme.colors.bgContainer,\n boxSizing: \"border-box\",\n border: `1px solid ${theme.colors.text}`,\n borderRadius: theme.radii.base,\n \":hover,:focus-visible\": {\n borderColor: theme.colors.primary,\n },\n \":focus\": {\n outline: \"none\",\n },\n \":focus-visible\": {\n ...outlineStyles,\n },\n },\n headerOpen: {\n \"&,:hover\": {\n borderColor: theme.colors.text,\n },\n\n \"&[data-popper-placement='top']\": {\n borderRadius: `0px 0px ${theme.radii.base} ${theme.radii.base}`,\n },\n \"&[data-popper-placement='bottom']\": {\n borderRadius: `${theme.radii.base} ${theme.radii.base} 0px 0px`,\n },\n },\n /** @deprecated use `[data-popper-placement='top']` selector instead /\n headerOpenUp: {},\n /** @deprecated use `[data-popper-placement='bottom']` selector instead /\n headerOpenDown: {},\n headerDisabled: {\n cursor: \"not-allowed\",\n pointerEvents: \"none\",\n color: theme.colors.textDisabled,\n backgroundColor: theme.colors.bgPage,\n \"&,:hover\": {\n borderColor: \"currentcolor\",\n },\n },\n headerReadOnly: {\n cursor: \"not-allowed\",\n pointerEvents: \"none\",\n color: theme.colors.textSubtle,\n borderColor: \"currentcolor\",\n backgroundColor: theme.colors.bgPage,\n userSelect: \"text\",\n \":focus-visible\": {\n outline: \"none\",\n borderColor: \"currentcolor\",\n },\n },\n arrowContainer: {\n position: \"absolute\",\n pointerEvents: \"none\",\n top: -1,\n right: -1,\n },\n arrow: {},\n selection: {\n display: \"flex\",\n alignItems: \"center\",\n height: \"30px\",\n boxSizing: \"border-box\",\n paddingLeft: theme.space.xs,\n paddingRight: 32,\n },\n selectionDisabled: {},\n placeholder: {\n display: \"block\",\n color: theme.colors.textSubtle,\n },\n panel: {\n // TODO: remove padding override in v6 (most elements need it)\n padding: 0,\n border: `1px solid ${theme.colors.text}`,\n },\n // TODO: change from classes to [data-popper-placement] selectors\n panelOpenedUp: {\n top: 1,\n borderRadius: `${theme.radii.base} ${theme.radii.base} 0 0`,\n },\n panelOpenedDown: {\n top: -1,\n borderRadius: `0 0 ${theme.radii.base} ${theme.radii.base}`,\n },\n inputExtensionOpen: {\n height: \"0px\",\n backgroundColor: theme.colors.bgContainer,\n borderTop: \"none\",\n borderBottom: \"none\",\n borderRight: `1px solid ${theme.colors.text}`,\n borderLeft: `1px solid ${theme.colors.text}`,\n },\n inputExtensionLeftPosition: { marginLeft: \"auto\" },\n inputExtensionOpenShadow: {\n boxShadow: `0px 8px 0px ${theme.colors.textDimmed}, 0px 0px 9px 0px rgba(65,65,65,.12)`,\n },\n inputExtensionFloatRight: { float: \"right\" },\n inputExtensionFloatLeft: { float: \"left\" },\n});\n"],"names":[],"mappings":"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"}

package/dist/esm/BaseRadio/BaseRadio.js CHANGED Viewed

@@ -5,11 +5,9 @@ import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { useClasses } from "./BaseRadio.styles.js";
 import { staticClasses } from "./BaseRadio.styles.js";
 import { Selected, Unselected } from "./icons.js";
-const getSelectorIcons = () => {
-  return {
-    radio: /* @__PURE__ */ jsx(Unselected, {}),
-    radioChecked: /* @__PURE__ */ jsx(Selected, {})
-  };
+const icons = {
+  radio: /* @__PURE__ */ jsx(Unselected, {}),
+  radioChecked: /* @__PURE__ */ jsx(Selected, {})
 };
 const HvBaseRadio = forwardRef(
   function HvBaseRadio2(props, ref) {
@@ -49,7 +47,6 @@ const HvBaseRadio = forwardRef(
       },
       [onBlur]
     );
-    const icons = getSelectorIcons();
     const onLocalChange = useCallback(
       (evt) => {
         if (readOnly) {
@@ -95,6 +92,5 @@ const HvBaseRadio = forwardRef(
 );
 export {
   HvBaseRadio,
-  staticClasses as baseRadioClasses,
-  getSelectorIcons
+  staticClasses as baseRadioClasses
 };

package/dist/esm/BaseRadio/BaseRadio.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BaseRadio.js","sources":["../../../src/BaseRadio/BaseRadio.tsx"],"sourcesContent":["import { forwardRef, useCallback, useState } from \"react\";\nimport MuiRadio, { RadioProps as MuiRadioProps } from \"@mui/material/Radio\";\nimport {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { staticClasses, useClasses } from \"./BaseRadio.styles\";\nimport { Selected, Unselected } from \"./icons\";\n\nexport { staticClasses as baseRadioClasses };\n\nexport type HvBaseRadioClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBaseRadioProps\n extends Omit<MuiRadioProps, \"onChange\" \| \"classes\"> {\n /*\n Class names to be applied.\n /\n className?: string;\n /\n A Jss Object used to override or extend the styles applied to the radio button.\n /\n classes?: HvBaseRadioClasses;\n /\n Id to be applied to the root node.\n /\n id?: string;\n /\n The input name.\n /\n name?: string;\n /\n The value of the input.\n \n The default value is \"on\".\n /\n value?: any;\n /\n Indicates that user input is required.\n /\n required?: boolean;\n /\n Indicates that the input is not editable.\n /\n readOnly?: boolean;\n /\n Indicates that the input is disabled.\n /\n disabled?: boolean;\n /\n If `true` the radio button is selected, if set to `false` the radio button is not selected.\n \n When defined the radio button state becomes controlled.\n /\n checked?: boolean;\n /\n When uncontrolled, defines the initial checked state.\n /\n defaultChecked?: boolean;\n /\n The callback fired when the radio button 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 @ignore\n /\n onBlur?: (event: React.FocusEvent<any>) => void;\n}\n\~~nexport~~ ~~const~~ ~~getSelectorIcons~~ = ~~() =>~~ {\n ~~return {\n~~ radio: <Unselected />,\n radioChecked: <Selected />,\n };\n~~};\n~~\n/\n A Radio Button is a mechanism that allows user to select one or more options.\n \n The Base Radio Button is a building block of the Radio Button form element. Don't\n * use unless implementing a custom use case not covered by the Radio Button form element.\n */\nexport const HvBaseRadio = forwardRef<HTMLButtonElement, HvBaseRadioProps>(\n function HvBaseRadio(props, ref) {\n const {\n classes: classesProp,\n className,\n id,\n name,\n value = \"on\",\n required = false,\n readOnly = false,\n disabled = false,\n checked,\n defaultChecked,\n onChange,\n semantic = false,\n inputProps,\n onFocusVisible,\n onBlur,\n icon,\n checkedIcon,\n ...others\n } = useDefaultProps(\"HvBaseRadio\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n const [focusVisible, setFocusVisible] = useState(false);\n\n const onFocusVisibleCallback = useCallback(\n (evt: React.FocusEvent<any>) => {\n setFocusVisible(true);\n onFocusVisible?.(evt);\n },\n [onFocusVisible],\n );\n\n const onBlurCallback = useCallback(\n (evt: React.FocusEvent<any>) => {\n setFocusVisible(false);\n onBlur?.(evt);\n },\n [onBlur],\n );\n\n const ~~icons = getSelectorIcons();\n\n const~~ onLocalChange = useCallback(\n (evt: React.ChangeEvent<HTMLInputElement>) => {\n if (readOnly) {\n return;\n }\n\n onChange?.(evt, evt.target.checked, value);\n },\n [onChange, readOnly, value],\n );\n\n return (\n <MuiRadio\n ref={ref}\n id={id}\n name={name}\n className={cx(\n classes.root,\n {\n [classes.disabled]: disabled,\n [classes.focusVisible]: focusVisible,\n [classes.checked]: checked,\n [classes.semantic]: semantic,\n },\n className,\n )}\n icon={icon \|\| icons.radio}\n checkedIcon={checkedIcon \|\| icons.radioChecked}\n color=\"default\"\n disabled={disabled}\n required={required}\n readOnly={readOnly}\n onChange={onLocalChange}\n value={value}\n checked={checked}\n defaultChecked={defaultChecked}\n inputProps={inputProps}\n onFocusVisible={onFocusVisibleCallback}\n onBlur={onBlurCallback}\n {...others}\n />\n );\n },\n);\n"],"names":["HvBaseRadio"],"mappings":";;;;;;;~~AAuFO~~,MAAM,~~mBAAmB,MAAM~~;~~AAC7B,SAAA;~~AAAA,~~IACL~~,2BAAQ,YAAW,EAAA;AAAA,~~IACnB~~,kCAAe,UAAS,CAAA,CAAA;~~AAAA,EAC1B~~;~~AACF;~~AAQO,MAAM,cAAc;AAAA,EACzB,SAASA,aAAY,OAAO,KAAK;AACzB,UAAA;AAAA,MACJ,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MACR,WAAW;AAAA,MACX,WAAW;AAAA,MACX,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IAAA,IACD,gBAAgB,eAAe,KAAK;AAExC,UAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAE9C,UAAM,CAAC,cAAc,eAAe,IAAI,SAAS,KAAK;AAEtD,UAAM,yBAAyB;AAAA,MAC7B,CAAC,QAA+B;AAC9B,wBAAgB,IAAI;AACpB,yBAAiB,GAAG;AAAA,MACtB;AAAA,MACA,CAAC,cAAc;AAAA,IACjB;AAEA,UAAM,iBAAiB;AAAA,MACrB,CAAC,QAA+B;AAC9B,wBAAgB,KAAK;AACrB,iBAAS,GAAG;AAAA,MACd;AAAA,MACA,CAAC,MAAM;AAAA,IACT;AAEA,UAAM,~~QAAQ,iBAAiB;AAE/B,UAAM,~~gBAAgB;AAAA,MACpB,CAAC,QAA6C;AAC5C,YAAI,UAAU;AACZ;AAAA,QAAA;AAGF,mBAAW,KAAK,IAAI,OAAO,SAAS,KAAK;AAAA,MAC3C;AAAA,MACA,CAAC,UAAU,UAAU,KAAK;AAAA,IAC5B;AAGE,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW;AAAA,UACT,QAAQ;AAAA,UACR;AAAA,YACE,CAAC,QAAQ,QAAQ,GAAG;AAAA,YACpB,CAAC,QAAQ,YAAY,GAAG;AAAA,YACxB,CAAC,QAAQ,OAAO,GAAG;AAAA,YACnB,CAAC,QAAQ,QAAQ,GAAG;AAAA,UACtB;AAAA,UACA;AAAA,QACF;AAAA,QACA,MAAM,QAAQ,MAAM;AAAA,QACpB,aAAa,eAAe,MAAM;AAAA,QAClC,OAAM;AAAA,QACN;AAAA,QACA;AAAA,QACA;AAAA,QACA,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,gBAAgB;AAAA,QAChB,QAAQ;AAAA,QACP,GAAG;AAAA,MAAA;AAAA,IACN;AAAA,EAAA;AAGN;"}
1	+ {"version":3,"file":"BaseRadio.js","sources":["../../../src/BaseRadio/BaseRadio.tsx"],"sourcesContent":["import { forwardRef, useCallback, useState } from \"react\";\nimport MuiRadio, { RadioProps as MuiRadioProps } from \"@mui/material/Radio\";\nimport {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { staticClasses, useClasses } from \"./BaseRadio.styles\";\nimport { Selected, Unselected } from \"./icons\";\n\nexport { staticClasses as baseRadioClasses };\n\nexport type HvBaseRadioClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBaseRadioProps\n extends Omit<MuiRadioProps, \"onChange\" \| \"classes\"> {\n /*\n Class names to be applied.\n /\n className?: string;\n /\n A Jss Object used to override or extend the styles applied to the radio button.\n /\n classes?: HvBaseRadioClasses;\n /\n Id to be applied to the root node.\n /\n id?: string;\n /\n The input name.\n /\n name?: string;\n /\n The value of the input.\n \n The default value is \"on\".\n /\n value?: any;\n /\n Indicates that user input is required.\n /\n required?: boolean;\n /\n Indicates that the input is not editable.\n /\n readOnly?: boolean;\n /\n Indicates that the input is disabled.\n /\n disabled?: boolean;\n /\n If `true` the radio button is selected, if set to `false` the radio button is not selected.\n \n When defined the radio button state becomes controlled.\n /\n checked?: boolean;\n /\n When uncontrolled, defines the initial checked state.\n /\n defaultChecked?: boolean;\n /\n The callback fired when the radio button 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 @ignore\n /\n onBlur?: (event: React.FocusEvent<any>) => void;\n}\n\nconst icons = {\n radio: <Unselected />,\n radioChecked: <Selected />,\n};\n\n/\n A Radio Button is a mechanism that allows user to select one or more options.\n \n The Base Radio Button is a building block of the Radio Button form element. Don't\n * use unless implementing a custom use case not covered by the Radio Button form element.\n */\nexport const HvBaseRadio = forwardRef<HTMLButtonElement, HvBaseRadioProps>(\n function HvBaseRadio(props, ref) {\n const {\n classes: classesProp,\n className,\n id,\n name,\n value = \"on\",\n required = false,\n readOnly = false,\n disabled = false,\n checked,\n defaultChecked,\n onChange,\n semantic = false,\n inputProps,\n onFocusVisible,\n onBlur,\n icon,\n checkedIcon,\n ...others\n } = useDefaultProps(\"HvBaseRadio\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n const [focusVisible, setFocusVisible] = useState(false);\n\n const onFocusVisibleCallback = useCallback(\n (evt: React.FocusEvent<any>) => {\n setFocusVisible(true);\n onFocusVisible?.(evt);\n },\n [onFocusVisible],\n );\n\n const onBlurCallback = useCallback(\n (evt: React.FocusEvent<any>) => {\n setFocusVisible(false);\n onBlur?.(evt);\n },\n [onBlur],\n );\n\n const onLocalChange = useCallback(\n (evt: React.ChangeEvent<HTMLInputElement>) => {\n if (readOnly) {\n return;\n }\n\n onChange?.(evt, evt.target.checked, value);\n },\n [onChange, readOnly, value],\n );\n\n return (\n <MuiRadio\n ref={ref}\n id={id}\n name={name}\n className={cx(\n classes.root,\n {\n [classes.disabled]: disabled,\n [classes.focusVisible]: focusVisible,\n [classes.checked]: checked,\n [classes.semantic]: semantic,\n },\n className,\n )}\n icon={icon \|\| icons.radio}\n checkedIcon={checkedIcon \|\| icons.radioChecked}\n color=\"default\"\n disabled={disabled}\n required={required}\n readOnly={readOnly}\n onChange={onLocalChange}\n value={value}\n checked={checked}\n defaultChecked={defaultChecked}\n inputProps={inputProps}\n onFocusVisible={onFocusVisibleCallback}\n onBlur={onBlurCallback}\n {...others}\n />\n );\n },\n);\n"],"names":["HvBaseRadio"],"mappings":";;;;;;;AAuFA,MAAM,QAAQ;AAAA,EACZ,2BAAQ,YAAW,EAAA;AAAA,EACnB,kCAAe,UAAS,CAAA,CAAA;AAC1B;AAQO,MAAM,cAAc;AAAA,EACzB,SAASA,aAAY,OAAO,KAAK;AACzB,UAAA;AAAA,MACJ,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MACR,WAAW;AAAA,MACX,WAAW;AAAA,MACX,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IAAA,IACD,gBAAgB,eAAe,KAAK;AAExC,UAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAE9C,UAAM,CAAC,cAAc,eAAe,IAAI,SAAS,KAAK;AAEtD,UAAM,yBAAyB;AAAA,MAC7B,CAAC,QAA+B;AAC9B,wBAAgB,IAAI;AACpB,yBAAiB,GAAG;AAAA,MACtB;AAAA,MACA,CAAC,cAAc;AAAA,IACjB;AAEA,UAAM,iBAAiB;AAAA,MACrB,CAAC,QAA+B;AAC9B,wBAAgB,KAAK;AACrB,iBAAS,GAAG;AAAA,MACd;AAAA,MACA,CAAC,MAAM;AAAA,IACT;AAEA,UAAM,gBAAgB;AAAA,MACpB,CAAC,QAA6C;AAC5C,YAAI,UAAU;AACZ;AAAA,QAAA;AAGF,mBAAW,KAAK,IAAI,OAAO,SAAS,KAAK;AAAA,MAC3C;AAAA,MACA,CAAC,UAAU,UAAU,KAAK;AAAA,IAC5B;AAGE,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW;AAAA,UACT,QAAQ;AAAA,UACR;AAAA,YACE,CAAC,QAAQ,QAAQ,GAAG;AAAA,YACpB,CAAC,QAAQ,YAAY,GAAG;AAAA,YACxB,CAAC,QAAQ,OAAO,GAAG;AAAA,YACnB,CAAC,QAAQ,QAAQ,GAAG;AAAA,UACtB;AAAA,UACA;AAAA,QACF;AAAA,QACA,MAAM,QAAQ,MAAM;AAAA,QACpB,aAAa,eAAe,MAAM;AAAA,QAClC,OAAM;AAAA,QACN;AAAA,QACA;AAAA,QACA;AAAA,QACA,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,gBAAgB;AAAA,QAChB,QAAQ;AAAA,QACP,GAAG;AAAA,MAAA;AAAA,IACN;AAAA,EAAA;AAGN;"}

package/dist/esm/BaseRadio/BaseRadio.styles.js CHANGED Viewed

@@ -8,19 +8,17 @@ const { staticClasses, useClasses } = createClasses("HvBaseRadio", {
     minWidth: 32,
     height: 32,
     cursor: "pointer",
-    "&:hover": {
-      backgroundColor: theme.colors.bgHover,
-      borderRadius: theme.radii.base
-    },
     "& svg": {
       width: 16,
       height: 16,
       borderRadius: theme.radii.full,
-      borderWidth: 1,
-      borderColor: theme.colors.text,
+      border: `1px solid ${theme.colors.borderStrong}`,
       backgroundColor: theme.colors.bgContainer
     },
-    borderRadius: 0
+    "&:hover": {
+      backgroundColor: theme.colors.bgHover,
+      borderRadius: theme.radii.round
+    }
   },
   disabled: {
     cursor: "not-allowed",
@@ -32,38 +30,26 @@ const { staticClasses, useClasses } = createClasses("HvBaseRadio", {
   },
   focusVisible: {
     "& svg": {
-      borderRadius: "8px",
+      borderRadius: theme.radii.full,
       ...outlineStyles
     }
   },
   icon: {},
   checked: {
     "& svg": {
-      borderColor: theme.colors.text,
-      backgroundColor: theme.colors.text,
-      color: theme.colors.bgPage
-    },
-    "&$semantic": {
-      "& svg": {
-        borderColor: theme.colors.textDark,
-        backgroundColor: theme.colors.textLight,
-        color: theme.colors.textDark
-      }
+      borderColor: "transparent",
+      backgroundColor: theme.colors.primaryStrong,
+      color: theme.colors.bgContainer
     },
     "&$disabled": {
       "& svg": {
-        borderColor: theme.colors.textDisabled,
-        backgroundColor: theme.colors.textDisabled,
+        borderColor: "transparent",
+        backgroundColor: theme.colors.borderDisabled,
         color: theme.colors.bgDisabled
       }
     }
   },
-  semantic: {
-    "& svg": {
-      borderColor: theme.colors.textDark,
-      backgroundColor: theme.colors.textLight
-    }
-  }
+  semantic: {}
 });
 export {
   staticClasses,

package/dist/esm/BaseRadio/BaseRadio.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BaseRadio.styles.js","sources":["../../../src/BaseRadio/BaseRadio.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvBaseRadio\", {\n root: {\n padding: 0,\n width: 32,\n minWidth: 32,\n height: 32,\n cursor: \"pointer\",\n\n \"~~&:hover\": {\n backgroundColor: theme.colors.bgHover,\n borderRadius: theme.radii.base,\n },\n \"~~& svg\": {\n width: 16,\n height: 16,\n borderRadius: theme.radii.full,\n ~~borderWidth~~: ~~1,\n borderColor:~~ theme.colors.~~text,\~~n backgroundColor: theme.colors.bgContainer,\n },\n borderRadius: 0,\n },\n disabled: {\n cursor: \"not-allowed\",\n pointerEvents: \"initial\",\n \"& svg\": {\n borderColor: theme.colors.textDisabled,\n backgroundColor: theme.colors.bgDisabled,\n },\n },\n focusVisible: {\n \"& svg\": {\n borderRadius: ~~\"8px\"~~,\n ...outlineStyles,\n },\n },\n icon: {},\n checked: {\n \"& svg\": {\n borderColor: ~~theme.colors.text~~,\n backgroundColor: theme.colors.~~text~~,\n color: theme.colors.~~bgPage~~,\n },\n \"&$~~semantic~~\": {\n \"& svg\": {\n borderColor: ~~theme.colors.textDark,\n backgroundColor: theme.colors.textLight,\n color: theme.colors.textDark,\n },\n },\n~~ \"~~&$disabled~~\"~~: {\n \"& svg\": {\n borderColor: theme.colors.textDisabled~~,\n backgroundColor: theme.colors.~~textDisabled~~,\n color: theme.colors.bgDisabled,\n },\n },\n },\n semantic: {~~\n \"& svg\": {\n borderColor: theme.colors.textDark,\n backgroundColor: theme.colors.textLight,\n~~ },\n }~~,\n}~~);\n"],"names":[],"mappings":";;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,eAAe;AAAA,EACxE,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,OAAO;AAAA,IACP,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,QAAQ;AAAA,~~IAER~~,~~WAAW~~;AAAA,~~MACT~~,~~iBAAiB~~,~~MAAM~~,~~OAAO~~;AAAA,~~MAC9B~~,cAAc,MAAM,MAAM;AAAA,~~IAC5B;AAAA~~,~~IACA~~,~~SAAS;AAAA~~,~~MACP~~,OAAO~~;AAAA~~,~~MACP,QAAQ~~;AAAA,~~MACR~~,~~cAAc~~,MAAM,~~MAAM~~;AAAA,~~MAC1B~~,~~aAAa~~;AAAA,~~MACb~~,~~aAAa~~,MAAM,OAAO;AAAA,~~MAC1B~~,~~iBAAiB~~,MAAM,~~OAAO~~;AAAA,~~IAChC~~;AAAA,~~IACA,cAAc~~;AAAA,~~EAChB;AAAA,~~EACA,UAAU;AAAA,IACR,QAAQ;AAAA,IACR,eAAe;AAAA,IACf,SAAS;AAAA,MACP,aAAa,MAAM,OAAO;AAAA,MAC1B,iBAAiB,MAAM,OAAO;AAAA,IAAA;AAAA,EAElC;AAAA,EACA,cAAc;AAAA,IACZ,SAAS;AAAA,MACP,cAAc;AAAA,~~MACd~~,GAAG;AAAA,IAAA;AAAA,EAEP;AAAA,EACA,MAAM,CAAC;AAAA,EACP,SAAS;AAAA,IACP,SAAS;AAAA,MACP,aAAa~~,MAAM,OAAO~~;AAAA,~~MAC1B~~,iBAAiB,MAAM,OAAO;AAAA,MAC9B,OAAO,MAAM,OAAO;AAAA,IACtB;AAAA,IACA,cAAc;AAAA,MACZ,SAAS;AAAA,QACP,aAAa~~,MAAM,OAAO~~;AAAA,~~QAC1B~~,iBAAiB,MAAM,OAAO;AAAA,QAC9B,OAAO,MAAM,OAAO;AAAA,MAAA;AAAA,~~IAExB;AAAA,IACA,cAAc;AAAA,MACZ,SAAS;AAAA,QACP,aAAa,MAAM,OAAO;AAAA,QAC1B,iBAAiB,MAAM,OAAO;AAAA,QAC9B,OAAO,MAAM,OAAO;AAAA,MAAA;AAAA,~~IACtB;AAAA,EAEJ;AAAA,EACA,UAAU~~;AAAA~~,~~IACR,SAAS~~;~~AAAA~~,~~MACP,aAAa,MAAM,OAAO;AAAA,MAC1B,iBAAiB,MAAM,OAAO;AAAA,IAAA;AAAA,EAChC;AAEJ,~~CAAC;"}
1	+ {"version":3,"file":"BaseRadio.styles.js","sources":["../../../src/BaseRadio/BaseRadio.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvBaseRadio\", {\n root: {\n padding: 0,\n width: 32,\n minWidth: 32,\n height: 32,\n cursor: \"pointer\",\n \"& svg\": {\n width: 16,\n height: 16,\n borderRadius: theme.radii.full,\n border: `1px solid ${theme.colors.borderStrong}`,\n backgroundColor: theme.colors.bgContainer,\n },\n \"&:hover\": {\n backgroundColor: theme.colors.bgHover,\n borderRadius: theme.radii.round,\n },\n },\n disabled: {\n cursor: \"not-allowed\",\n pointerEvents: \"initial\",\n \"& svg\": {\n borderColor: theme.colors.textDisabled,\n backgroundColor: theme.colors.bgDisabled,\n },\n },\n focusVisible: {\n \"& svg\": {\n borderRadius: theme.radii.full,\n ...outlineStyles,\n },\n },\n icon: {},\n checked: {\n \"& svg\": {\n borderColor: \"transparent\",\n backgroundColor: theme.colors.primaryStrong,\n color: theme.colors.bgContainer,\n },\n \"&$disabled\": {\n \"& svg\": {\n borderColor: \"transparent\",\n backgroundColor: theme.colors.borderDisabled,\n color: theme.colors.bgDisabled,\n },\n },\n },\n semantic: {},\n});\n"],"names":[],"mappings":";;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,eAAe;AAAA,EACxE,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,OAAO;AAAA,IACP,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,SAAS;AAAA,MACP,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,cAAc,MAAM,MAAM;AAAA,MAC1B,QAAQ,aAAa,MAAM,OAAO,YAAY;AAAA,MAC9C,iBAAiB,MAAM,OAAO;AAAA,IAChC;AAAA,IACA,WAAW;AAAA,MACT,iBAAiB,MAAM,OAAO;AAAA,MAC9B,cAAc,MAAM,MAAM;AAAA,IAAA;AAAA,EAE9B;AAAA,EACA,UAAU;AAAA,IACR,QAAQ;AAAA,IACR,eAAe;AAAA,IACf,SAAS;AAAA,MACP,aAAa,MAAM,OAAO;AAAA,MAC1B,iBAAiB,MAAM,OAAO;AAAA,IAAA;AAAA,EAElC;AAAA,EACA,cAAc;AAAA,IACZ,SAAS;AAAA,MACP,cAAc,MAAM,MAAM;AAAA,MAC1B,GAAG;AAAA,IAAA;AAAA,EAEP;AAAA,EACA,MAAM,CAAC;AAAA,EACP,SAAS;AAAA,IACP,SAAS;AAAA,MACP,aAAa;AAAA,MACb,iBAAiB,MAAM,OAAO;AAAA,MAC9B,OAAO,MAAM,OAAO;AAAA,IACtB;AAAA,IACA,cAAc;AAAA,MACZ,SAAS;AAAA,QACP,aAAa;AAAA,QACb,iBAAiB,MAAM,OAAO;AAAA,QAC9B,OAAO,MAAM,OAAO;AAAA,MAAA;AAAA,IACtB;AAAA,EAEJ;AAAA,EACA,UAAU,CAAA;AACZ,CAAC;"}

package/dist/esm/BaseSwitch/BaseSwitch.styles.js CHANGED Viewed

@@ -9,7 +9,7 @@ const { staticClasses, useClasses } = createClasses("HvBaseSwitch", {
     height: "32px",
     alignItems: "center",
     justifyContent: "center",
-    borderRadius: theme.radii.base,
+    borderRadius: theme.radii.round,
     "&:hover": {
       backgroundColor: theme.colors.bgHover
     },
@@ -22,7 +22,11 @@ const { staticClasses, useClasses } = createClasses("HvBaseSwitch", {
         transform: "translateX(16px)",
         "& + $track": {
           opacity: 1,
-          backgroundColor: theme.colors.text
+          backgroundColor: theme.colors.primary,
+          borderColor: "transparent"
+        },
+        "& $thumb:not:has($disabled)": {
+          borderColor: "transparent"
         },
         "&:hover": {
           backgroundColor: "transparent"
@@ -35,7 +39,7 @@ const { staticClasses, useClasses } = createClasses("HvBaseSwitch", {
         "& + $track": {
           opacity: 1,
           backgroundColor: theme.colors.bgDisabled,
-          border: `solid 1px ${theme.colors.textDisabled}`
+          border: `solid 1px ${theme.colors.borderDisabled}`
         }
       }
     }
@@ -55,18 +59,18 @@ const { staticClasses, useClasses } = createClasses("HvBaseSwitch", {
   },
   track: {
     opacity: 1,
-    borderRadius: "15px",
+    borderRadius: theme.radii.full,
     height: "16px",
     width: "32px",
-    border: `solid 1px ${theme.colors.text}`,
+    border: `solid 1px ${theme.colors.borderStrong}`,
     backgroundColor: theme.colors.bgContainer
   },
   thumb: {
     position: "relative",
     left: "-9px",
-    width: "12px",
-    height: "12px",
-    border: `solid 1px ${theme.colors.text}`,
+    width: "10px",
+    height: "10px",
+    border: `solid 1px ${theme.colors.borderStrong}`,
     backgroundColor: theme.colors.bgContainer,
     marginLeft: "2px",
     marginTop: 0,

package/dist/esm/BaseSwitch/BaseSwitch.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BaseSwitch.styles.js","sources":["../../../src/BaseSwitch/BaseSwitch.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvBaseSwitch\", {\n root: {\n padding: 0,\n cursor: \"pointer\",\n width: \"40px\",\n height: \"32px\",\n alignItems: \"center\",\n justifyContent: \"center\",\n borderRadius: theme.radii.~~base~~,\n\n \"&:hover\": {\n backgroundColor: theme.colors.bgHover,\n },\n\n // Higher CSS specificity here\n \"& $switchBase\": {\n \"&:hover\": {\n backgroundColor: \"transparent\",\n },\n\n \"&$checked\": {\n transform: \"translateX(16px)\",\n \"& + $track\": {\n opacity: 1,\n backgroundColor: theme.colors.~~text~~,\n },\n \"&:hover\": {\n backgroundColor: \"transparent\",\n },\n },\n },\n\n // Higher CSS specificity here\n \"&$disabled\": {\n \"& $switchBase\": {\n \"& + $track\": {\n opacity: 1,\n backgroundColor: theme.colors.bgDisabled,\n border: `solid 1px ${theme.colors.~~textDisabled~~}`,\n },\n },\n },\n },\n switch: {\n width: \"40px\",\n height: \"32px\",\n padding: 0,\n\n \"&$readOnly $switchBase\": {\n cursor: \"default\",\n },\n },\n switchBase: {\n width: \"40px\",\n height: \"32px\",\n padding: 0,\n },\n track: {\n opacity: 1,\n borderRadius: ~~\"15px\"~~,\n height: \"16px\",\n width: \"32px\",\n border: `solid 1px ${theme.colors.~~text~~}`,\n backgroundColor: theme.colors.bgContainer,\n },\n thumb: {\n position: \"relative\",\n left: \"-9px\",\n width: \"~~12px~~\",\n height: \"~~12px~~\",\n border: `solid 1px ${theme.colors.~~text~~}`,\n backgroundColor: theme.colors.bgContainer,\n marginLeft: \"2px\",\n marginTop: 0,\n boxShadow: \"none\",\n },\n checked: {},\n disabled: {\n cursor: \"not-allowed\",\n\n \"& $switch\": {\n cursor: \"not-allowed\",\n },\n\n \"& $thumb\": {\n backgroundColor: theme.colors.bgPageSecondary,\n border: `solid 1px ${theme.colors.textDisabled}`,\n },\n },\n readOnly: {},\n focusVisible: {\n borderRadius: \"8px\",\n ...outlineStyles,\n },\n});\n"],"names":[],"mappings":";;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,gBAAgB;AAAA,EACzE,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,cAAc,MAAM,MAAM;AAAA,IAE1B,WAAW;AAAA,MACT,iBAAiB,MAAM,OAAO;AAAA,IAChC;AAAA;AAAA,IAGA,iBAAiB;AAAA,MACf,WAAW;AAAA,QACT,iBAAiB;AAAA,MACnB;AAAA,MAEA,aAAa;AAAA,QACX,WAAW;AAAA,QACX,cAAc;AAAA,UACZ,SAAS;AAAA,UACT,iBAAiB,MAAM,OAAO;AAAA,~~QAChC~~;AAAA,QACA,WAAW;AAAA,UACT,iBAAiB;AAAA,QAAA;AAAA,MACnB;AAAA,IAEJ;AAAA;AAAA,IAGA,cAAc;AAAA,MACZ,iBAAiB;AAAA,QACf,cAAc;AAAA,UACZ,SAAS;AAAA,UACT,iBAAiB,MAAM,OAAO;AAAA,UAC9B,QAAQ,aAAa,MAAM,OAAO,~~YAAY~~;AAAA,QAAA;AAAA,~~MAChD~~;AAAA,IACF;AAAA,EAEJ;AAAA,EACA,QAAQ;AAAA,IACN,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAS;AAAA,IAET,0BAA0B;AAAA,MACxB,QAAQ;AAAA,IAAA;AAAA,EAEZ;AAAA,EACA,YAAY;AAAA,IACV,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,OAAO;AAAA,IACL,SAAS;AAAA,IACT,cAAc;AAAA,~~IACd~~,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,QAAQ,aAAa,MAAM,OAAO,~~IAAI~~;AAAA,~~IACtC~~,iBAAiB,MAAM,OAAO;AAAA,EAChC;AAAA,EACA,OAAO;AAAA,IACL,UAAU;AAAA,IACV,MAAM;AAAA,IACN,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,QAAQ,aAAa,MAAM,OAAO,~~IAAI~~;AAAA,~~IACtC~~,iBAAiB,MAAM,OAAO;AAAA,IAC9B,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,WAAW;AAAA,EACb;AAAA,EACA,SAAS,CAAC;AAAA,EACV,UAAU;AAAA,IACR,QAAQ;AAAA,IAER,aAAa;AAAA,MACX,QAAQ;AAAA,IACV;AAAA,IAEA,YAAY;AAAA,MACV,iBAAiB,MAAM,OAAO;AAAA,MAC9B,QAAQ,aAAa,MAAM,OAAO,YAAY;AAAA,IAAA;AAAA,EAElD;AAAA,EACA,UAAU,CAAC;AAAA,EACX,cAAc;AAAA,IACZ,cAAc;AAAA,IACd,GAAG;AAAA,EAAA;AAEP,CAAC;"}
1	+ {"version":3,"file":"BaseSwitch.styles.js","sources":["../../../src/BaseSwitch/BaseSwitch.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvBaseSwitch\", {\n root: {\n padding: 0,\n cursor: \"pointer\",\n width: \"40px\",\n height: \"32px\",\n alignItems: \"center\",\n justifyContent: \"center\",\n borderRadius: theme.radii.round,\n\n \"&:hover\": {\n backgroundColor: theme.colors.bgHover,\n },\n\n // Higher CSS specificity here\n \"& $switchBase\": {\n \"&:hover\": {\n backgroundColor: \"transparent\",\n },\n\n \"&$checked\": {\n transform: \"translateX(16px)\",\n \"& + $track\": {\n opacity: 1,\n backgroundColor: theme.colors.primary,\n borderColor: \"transparent\",\n },\n \"& $thumb:not:has($disabled)\": {\n borderColor: \"transparent\",\n },\n \"&:hover\": {\n backgroundColor: \"transparent\",\n },\n },\n },\n\n // Higher CSS specificity here\n \"&$disabled\": {\n \"& $switchBase\": {\n \"& + $track\": {\n opacity: 1,\n backgroundColor: theme.colors.bgDisabled,\n border: `solid 1px ${theme.colors.borderDisabled}`,\n },\n },\n },\n },\n switch: {\n width: \"40px\",\n height: \"32px\",\n padding: 0,\n\n \"&$readOnly $switchBase\": {\n cursor: \"default\",\n },\n },\n switchBase: {\n width: \"40px\",\n height: \"32px\",\n padding: 0,\n },\n track: {\n opacity: 1,\n borderRadius: theme.radii.full,\n height: \"16px\",\n width: \"32px\",\n border: `solid 1px ${theme.colors.borderStrong}`,\n backgroundColor: theme.colors.bgContainer,\n },\n thumb: {\n position: \"relative\",\n left: \"-9px\",\n width: \"10px\",\n height: \"10px\",\n border: `solid 1px ${theme.colors.borderStrong}`,\n backgroundColor: theme.colors.bgContainer,\n marginLeft: \"2px\",\n marginTop: 0,\n boxShadow: \"none\",\n },\n checked: {},\n disabled: {\n cursor: \"not-allowed\",\n\n \"& $switch\": {\n cursor: \"not-allowed\",\n },\n\n \"& $thumb\": {\n backgroundColor: theme.colors.bgPageSecondary,\n border: `solid 1px ${theme.colors.textDisabled}`,\n },\n },\n readOnly: {},\n focusVisible: {\n borderRadius: \"8px\",\n ...outlineStyles,\n },\n});\n"],"names":[],"mappings":";;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,gBAAgB;AAAA,EACzE,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,cAAc,MAAM,MAAM;AAAA,IAE1B,WAAW;AAAA,MACT,iBAAiB,MAAM,OAAO;AAAA,IAChC;AAAA;AAAA,IAGA,iBAAiB;AAAA,MACf,WAAW;AAAA,QACT,iBAAiB;AAAA,MACnB;AAAA,MAEA,aAAa;AAAA,QACX,WAAW;AAAA,QACX,cAAc;AAAA,UACZ,SAAS;AAAA,UACT,iBAAiB,MAAM,OAAO;AAAA,UAC9B,aAAa;AAAA,QACf;AAAA,QACA,+BAA+B;AAAA,UAC7B,aAAa;AAAA,QACf;AAAA,QACA,WAAW;AAAA,UACT,iBAAiB;AAAA,QAAA;AAAA,MACnB;AAAA,IAEJ;AAAA;AAAA,IAGA,cAAc;AAAA,MACZ,iBAAiB;AAAA,QACf,cAAc;AAAA,UACZ,SAAS;AAAA,UACT,iBAAiB,MAAM,OAAO;AAAA,UAC9B,QAAQ,aAAa,MAAM,OAAO,cAAc;AAAA,QAAA;AAAA,MAClD;AAAA,IACF;AAAA,EAEJ;AAAA,EACA,QAAQ;AAAA,IACN,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAS;AAAA,IAET,0BAA0B;AAAA,MACxB,QAAQ;AAAA,IAAA;AAAA,EAEZ;AAAA,EACA,YAAY;AAAA,IACV,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,OAAO;AAAA,IACL,SAAS;AAAA,IACT,cAAc,MAAM,MAAM;AAAA,IAC1B,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,QAAQ,aAAa,MAAM,OAAO,YAAY;AAAA,IAC9C,iBAAiB,MAAM,OAAO;AAAA,EAChC;AAAA,EACA,OAAO;AAAA,IACL,UAAU;AAAA,IACV,MAAM;AAAA,IACN,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,QAAQ,aAAa,MAAM,OAAO,YAAY;AAAA,IAC9C,iBAAiB,MAAM,OAAO;AAAA,IAC9B,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,WAAW;AAAA,EACb;AAAA,EACA,SAAS,CAAC;AAAA,EACV,UAAU;AAAA,IACR,QAAQ;AAAA,IAER,aAAa;AAAA,MACX,QAAQ;AAAA,IACV;AAAA,IAEA,YAAY;AAAA,MACV,iBAAiB,MAAM,OAAO;AAAA,MAC9B,QAAQ,aAAa,MAAM,OAAO,YAAY;AAAA,IAAA;AAAA,EAElD;AAAA,EACA,UAAU,CAAC;AAAA,EACX,cAAc;AAAA,IACZ,cAAc;AAAA,IACd,GAAG;AAAA,EAAA;AAEP,CAAC;"}

package/dist/esm/BulkActions/BulkActions.styles.js CHANGED Viewed

@@ -26,9 +26,10 @@ const { staticClasses, useClasses } = createClasses("HvBulkActions", {
     display: "inline-flex",
     marginLeft: "auto",
     [`& .${staticClasses$1.dropDownMenuButton}:disabled`]: {
-      backgroundColor: "transparent",
-      borderColor: "transparent",
-      "&:hover": { backgroundColor: "transparent", borderColor: "transparent" }
+      "&,:hover": {
+        backgroundColor: "transparent",
+        borderColor: "transparent"
+      }
     }
   },
   selectAllContainer: { display: "flex", alignItems: "center" },

package/dist/esm/BulkActions/BulkActions.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BulkActions.styles.js","sources":["../../../src/BulkActions/BulkActions.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { actionsGenericClasses } from \"../ActionsGeneric\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvBulkActions\", {\n root: {\n display: \"flex\",\n alignItems: \"center\",\n border: `1px solid ${theme.colors.border}`,\n backgroundColor: theme.colors.bgPage,\n padding: theme.spacing(\"xs\", \"md\"),\n marginBottom: theme.space.xs,\n },\n semantic: {\n backgroundColor: theme.colors.bgHover,\n \"& $selectAll div\": {\n \"&:hover:not(:disabled)\": {\n backgroundColor: theme.alpha(\"textLight\", 0.3),\n },\n },\n \"& $selectAll:focus-within div\": {\n backgroundColor: theme.alpha(\"textLight\", 0.3),\n },\n },\n actions: {\n display: \"inline-flex\",\n marginLeft: \"auto\",\n [`& .${actionsGenericClasses.dropDownMenuButton}:disabled`]: {\n ~~backgroundColor:~~ \"~~transparent~~\"~~,\n borderColor~~: \~~"transparent\",\~~n ~~\"&:hover\": {~~ backgroundColor: \"transparent\", borderColor: \"transparent\" },\n },\n },\n selectAllContainer: { display: \"flex\", alignItems: \"center\" },\n selectAll: {},\n selectAllPages: {},\n divider: {\n display: \"flex\",\n backgroundColor: theme.colors.border,\n width: \"1px\",\n height: \"32px\",\n marginLeft: theme.space.sm,\n },\n});\n"],"names":["actionsGenericClasses"],"mappings":";;;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,iBAAiB;AAAA,EAC1E,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,QAAQ,aAAa,MAAM,OAAO,MAAM;AAAA,IACxC,iBAAiB,MAAM,OAAO;AAAA,IAC9B,SAAS,MAAM,QAAQ,MAAM,IAAI;AAAA,IACjC,cAAc,MAAM,MAAM;AAAA,EAC5B;AAAA,EACA,UAAU;AAAA,IACR,iBAAiB,MAAM,OAAO;AAAA,IAC9B,oBAAoB;AAAA,MAClB,0BAA0B;AAAA,QACxB,iBAAiB,MAAM,MAAM,aAAa,GAAG;AAAA,MAAA;AAAA,IAEjD;AAAA,IACA,iCAAiC;AAAA,MAC/B,iBAAiB,MAAM,MAAM,aAAa,GAAG;AAAA,IAAA;AAAA,EAEjD;AAAA,EACA,SAAS;AAAA,IACP,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,CAAC,MAAMA,gBAAsB,kBAAkB,WAAW,GAAG;AAAA,MAC3D,~~iBAAiB~~;AAAA,~~MACjB~~,~~aAAa~~;AAAA,~~MACb~~,~~WAAW,EAAE,iBAAiB,eAAe,~~aAAa,~~cAAc~~;AAAA,~~IAAA~~;AAAA,~~EAE5E~~;AAAA,EACA,oBAAoB,EAAE,SAAS,QAAQ,YAAY,SAAS;AAAA,EAC5D,WAAW,CAAC;AAAA,EACZ,gBAAgB,CAAC;AAAA,EACjB,SAAS;AAAA,IACP,SAAS;AAAA,IACT,iBAAiB,MAAM,OAAO;AAAA,IAC9B,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,YAAY,MAAM,MAAM;AAAA,EAAA;AAE5B,CAAC;"}
1	+ {"version":3,"file":"BulkActions.styles.js","sources":["../../../src/BulkActions/BulkActions.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { actionsGenericClasses } from \"../ActionsGeneric\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvBulkActions\", {\n root: {\n display: \"flex\",\n alignItems: \"center\",\n border: `1px solid ${theme.colors.border}`,\n backgroundColor: theme.colors.bgPage,\n padding: theme.spacing(\"xs\", \"md\"),\n marginBottom: theme.space.xs,\n },\n semantic: {\n backgroundColor: theme.colors.bgHover,\n \"& $selectAll div\": {\n \"&:hover:not(:disabled)\": {\n backgroundColor: theme.alpha(\"textLight\", 0.3),\n },\n },\n \"& $selectAll:focus-within div\": {\n backgroundColor: theme.alpha(\"textLight\", 0.3),\n },\n },\n actions: {\n display: \"inline-flex\",\n marginLeft: \"auto\",\n [`& .${actionsGenericClasses.dropDownMenuButton}:disabled`]: {\n \"&,:hover\": {\n backgroundColor: \"transparent\",\n borderColor: \"transparent\",\n },\n },\n },\n selectAllContainer: { display: \"flex\", alignItems: \"center\" },\n selectAll: {},\n selectAllPages: {},\n divider: {\n display: \"flex\",\n backgroundColor: theme.colors.border,\n width: \"1px\",\n height: \"32px\",\n marginLeft: theme.space.sm,\n },\n});\n"],"names":["actionsGenericClasses"],"mappings":";;;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,iBAAiB;AAAA,EAC1E,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,QAAQ,aAAa,MAAM,OAAO,MAAM;AAAA,IACxC,iBAAiB,MAAM,OAAO;AAAA,IAC9B,SAAS,MAAM,QAAQ,MAAM,IAAI;AAAA,IACjC,cAAc,MAAM,MAAM;AAAA,EAC5B;AAAA,EACA,UAAU;AAAA,IACR,iBAAiB,MAAM,OAAO;AAAA,IAC9B,oBAAoB;AAAA,MAClB,0BAA0B;AAAA,QACxB,iBAAiB,MAAM,MAAM,aAAa,GAAG;AAAA,MAAA;AAAA,IAEjD;AAAA,IACA,iCAAiC;AAAA,MAC/B,iBAAiB,MAAM,MAAM,aAAa,GAAG;AAAA,IAAA;AAAA,EAEjD;AAAA,EACA,SAAS;AAAA,IACP,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,CAAC,MAAMA,gBAAsB,kBAAkB,WAAW,GAAG;AAAA,MAC3D,YAAY;AAAA,QACV,iBAAiB;AAAA,QACjB,aAAa;AAAA,MAAA;AAAA,IACf;AAAA,EAEJ;AAAA,EACA,oBAAoB,EAAE,SAAS,QAAQ,YAAY,SAAS;AAAA,EAC5D,WAAW,CAAC;AAAA,EACZ,gBAAgB,CAAC;AAAA,EACjB,SAAS;AAAA,IACP,SAAS;AAAA,IACT,iBAAiB,MAAM,OAAO;AAAA,IAC9B,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,YAAY,MAAM,MAAM;AAAA,EAAA;AAE5B,CAAC;"}

package/dist/esm/Button/Button.styles.js CHANGED Viewed

@@ -24,22 +24,24 @@ const { staticClasses, useClasses } = createClasses("HvButton", {
     ...theme.typography.label,
     color: "var(--color, currentcolor)",
     backgroundColor: "transparent",
-    height: "var(--HvButton-height)",
+    height: "var(--HvButton-height, fit-content)",
     border: "1px solid transparent",
     borderRadius: `var(--radius, ${theme.radii.base})`,
-    padding: theme.spacing(0, "sm")
+    padding: theme.spacing(0, "sm"),
+    "& $startIcon, & $endIcon": {
+      flexShrink: 0,
+      lineHeight: 0,
+      marginTop: -1,
+      marginBottom: -1
+    }
   },
   /** applied to the _left_ icon container */
   startIcon: {
-    marginLeft: theme.spacing(-1),
-    marginTop: -1,
-    marginBottom: -1
+    marginLeft: theme.spacing(-1)
   },
   /** applied to the _right_ icon container */
   endIcon: {
-    marginRight: theme.spacing(-1),
-    marginTop: -1,
-    marginBottom: -1
+    marginRight: theme.spacing(-1)
   },
   focusVisible: {},
   /** applied to the root element when disabled */
@@ -57,10 +59,7 @@ const { staticClasses, useClasses } = createClasses("HvButton", {
   icon: {
     margin: 0,
     padding: 0,
-    height: "fit-content",
-    "& > *": {
-      margin: -1
-    }
+    width: "var(--HvButton-height, fit-content)"
   },
   /** applied to the root element when using the `contained` variant */
   contained: {

package/dist/esm/Button/Button.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Button.styles.js","sources":["../../../src/Button/Button.styles.ts"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme, type HvSize } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvButton\", {\n /** applied to the root element /\n root: {\n display: \"inline-flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n textTransform: \"none\",\n cursor: \"pointer\",\n whiteSpace: \"nowrap\",\n\n // Background color common for almost all variants\n \":where(:not($disabled))\": {\n \":hover, :focus-visible\": {\n backgroundColor: theme.colors.bgHover,\n },\n },\n \":focus-visible\": {\n ...outlineStyles,\n },\n\n // Default button - no size specified\n fontFamily: theme.fontFamily.body,\n ...theme.typography.label,\n color: \"var(--color, currentcolor)\",\n backgroundColor: \"transparent\",\n height: \"var(--HvButton-height)\",\n border: \"1px solid transparent\",\n borderRadius: `var(--radius, ${theme.radii.base})`,\n padding: theme.spacing(0, \"sm\"),\n },\n /* applied to the _left_ icon container /\n startIcon: {\n marginLeft: theme.spacing(-1),\n ~~marginTop: -1,\n marginBottom: -1,\n~~ },\n /* applied to the _right_ icon container /\n endIcon: {\n marginRight: theme.spacing(-1),\n ~~marginTop: -1,\n marginBottom: -1,\n~~ },\n focusVisible: {},\n /* applied to the root element when disabled /\n disabled: {\n cursor: \"not-allowed\",\n color: theme.colors.textDisabled,\n backgroundColor: \"transparent\",\n borderColor: \"transparent\",\n \":hover, :focus-visible\": {\n backgroundColor: \"transparent\",\n borderColor: \"transparent\",\n },\n },\n /* applied to the root element when is icon-only /\n icon: {\n margin: 0,\n padding: 0,\n ~~height~~: \"fit-content\",\n ~~\"& > \": {\n margin: -1,\n },\n~~ },\n /** applied to the root element when using the `contained` variant /\n contained: {\n color: theme.colors.textDimmed, // `color-contrast(var(--color) vs ${colors.textDimmed}, ${colors.textLight}, ${colors.textDark})`,\n backgroundColor: \"var(--color)\",\n \":where(:not($disabled))\": {\n \":hover, :focus-visible\": {\n backgroundColor: \"color-mix(in srgb, var(--color), black 20%)\",\n },\n \":active\": {\n backgroundColor: \"color-mix(in srgb, var(--color), black 30%)\",\n },\n },\n },\n /* applied to the root element when using the `subtle` variant /\n subtle: {\n borderColor: \"currentcolor\",\n },\n /* applied to the root element when using the `ghost` variant /\n ghost: {},\n /* applied to the root element when using the `semantic` variant */\n semantic: {\n color: theme.colors.textDark,\n backgroundColor: \"transparent\",\n borderColor: \"transparent\",\n \"&:hover, &:focus-visible\": {\n backgroundColor: theme.alpha(\"textLight\", 0.3),\n },\n \"&:active\": {\n backgroundColor: theme.alpha(\"textLight\", 0.5),\n },\n \"&$disabled\": {\n backgroundColor: theme.alpha(\"textLight\", 0.1),\n },\n },\n\n // TODO - remove in v6\n primary: {},\n primarySubtle: {},\n primaryGhost: {},\n secondarySubtle: {},\n secondaryGhost: {},\n\n // Deprecated (DS3)\n secondary: {},\n});\n\n// TODO - remove xs and xl in v6 since they are not DS spec\nconst sizes: Record<\n HvSize,\n { height: string; space?: HvSize; fontSize?: keyof typeof theme.fontSizes }\n> = {\n xs: { height: \"24px\", fontSize: \"sm\" },\n sm: { height: \"24px\", fontSize: \"sm\" },\n md: { height: \"32px\" },\n lg: { height: \"48px\", space: \"md\" },\n xl: { height: \"48px\", space: \"md\" },\n};\n\nexport const getSizeStyles = (size: HvSize) => {\n const { height, space = \"sm\", fontSize } = sizes[size];\n return {\n height,\n padding: theme.spacing(0, space),\n fontSize: fontSize && theme.fontSizes[fontSize],\n };\n};\n\nexport const getIconSizeStyles = (size: HvSize) => {\n const { height } = sizes[size];\n return {\n height,\n width: height,\n };\n};\n"],"names":[],"mappings":";;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,YAAY;AAAA;AAAA,EAErE,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,eAAe;AAAA,IACf,QAAQ;AAAA,IACR,YAAY;AAAA;AAAA,IAGZ,2BAA2B;AAAA,MACzB,0BAA0B;AAAA,QACxB,iBAAiB,MAAM,OAAO;AAAA,MAAA;AAAA,IAElC;AAAA,IACA,kBAAkB;AAAA,MAChB,GAAG;AAAA,IACL;AAAA;AAAA,IAGA,YAAY,MAAM,WAAW;AAAA,IAC7B,GAAG,MAAM,WAAW;AAAA,IACpB,OAAO;AAAA,IACP,iBAAiB;AAAA,IACjB,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,cAAc,iBAAiB,MAAM,MAAM,IAAI;AAAA,IAC/C,SAAS,MAAM,QAAQ,GAAG,IAAI;AAAA,~~EAChC~~;AAAA~~;AAAA~~,~~EAEA~~,~~WAAW~~;AAAA,~~IACT~~,YAAY~~,MAAM,QAAQ,EAAE~~;AAAA,~~IAC5B~~,WAAW;AAAA,~~IACX~~,cAAc;AAAA,~~EAChB~~;AAAA;AAAA,EAEA,~~SAAS~~;AAAA,~~IACP~~,~~aAAa~~,MAAM,QAAQ,EAAE;AAAA,~~IAC7B~~,~~WAAW~~;AAAA,~~IACX~~,~~cAAc~~;AAAA,~~EAChB~~;AAAA,EACA,cAAc,CAAC;AAAA;AAAA,EAEf,UAAU;AAAA,IACR,QAAQ;AAAA,IACR,OAAO,MAAM,OAAO;AAAA,IACpB,iBAAiB;AAAA,IACjB,aAAa;AAAA,IACb,0BAA0B;AAAA,MACxB,iBAAiB;AAAA,MACjB,aAAa;AAAA,IAAA;AAAA,EAEjB;AAAA;AAAA,EAEA,MAAM;AAAA,IACJ,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,~~QAAQ~~;AAAA,~~IACR,SAAS~~;AAAA~~,MACP,QAAQ~~;AAAA,~~IAAA;AAAA,EAEZ;AAAA;AAAA,~~EAEA,WAAW;AAAA,IACT,OAAO,MAAM,OAAO;AAAA;AAAA,IACpB,iBAAiB;AAAA,IACjB,2BAA2B;AAAA,MACzB,0BAA0B;AAAA,QACxB,iBAAiB;AAAA,MACnB;AAAA,MACA,WAAW;AAAA,QACT,iBAAiB;AAAA,MAAA;AAAA,IACnB;AAAA,EAEJ;AAAA;AAAA,EAEA,QAAQ;AAAA,IACN,aAAa;AAAA,EACf;AAAA;AAAA,EAEA,OAAO,CAAC;AAAA;AAAA,EAER,UAAU;AAAA,IACR,OAAO,MAAM,OAAO;AAAA,IACpB,iBAAiB;AAAA,IACjB,aAAa;AAAA,IACb,4BAA4B;AAAA,MAC1B,iBAAiB,MAAM,MAAM,aAAa,GAAG;AAAA,IAC/C;AAAA,IACA,YAAY;AAAA,MACV,iBAAiB,MAAM,MAAM,aAAa,GAAG;AAAA,IAC/C;AAAA,IACA,cAAc;AAAA,MACZ,iBAAiB,MAAM,MAAM,aAAa,GAAG;AAAA,IAAA;AAAA,EAEjD;AAAA;AAAA,EAGA,SAAS,CAAC;AAAA,EACV,eAAe,CAAC;AAAA,EAChB,cAAc,CAAC;AAAA,EACf,iBAAiB,CAAC;AAAA,EAClB,gBAAgB,CAAC;AAAA;AAAA,EAGjB,WAAW,CAAA;AACb,CAAC;AAGD,MAAM,QAGF;AAAA,EACF,IAAI,EAAE,QAAQ,QAAQ,UAAU,KAAK;AAAA,EACrC,IAAI,EAAE,QAAQ,QAAQ,UAAU,KAAK;AAAA,EACrC,IAAI,EAAE,QAAQ,OAAO;AAAA,EACrB,IAAI,EAAE,QAAQ,QAAQ,OAAO,KAAK;AAAA,EAClC,IAAI,EAAE,QAAQ,QAAQ,OAAO,KAAK;AACpC;AAEa,MAAA,gBAAgB,CAAC,SAAiB;AAC7C,QAAM,EAAE,QAAQ,QAAQ,MAAM,SAAS,IAAI,MAAM,IAAI;AAC9C,SAAA;AAAA,IACL;AAAA,IACA,SAAS,MAAM,QAAQ,GAAG,KAAK;AAAA,IAC/B,UAAU,YAAY,MAAM,UAAU,QAAQ;AAAA,EAChD;AACF;AAEa,MAAA,oBAAoB,CAAC,SAAiB;AACjD,QAAM,EAAE,OAAA,IAAW,MAAM,IAAI;AACtB,SAAA;AAAA,IACL;AAAA,IACA,OAAO;AAAA,EACT;AACF;"}
1	+ {"version":3,"file":"Button.styles.js","sources":["../../../src/Button/Button.styles.ts"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme, type HvSize } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvButton\", {\n /** applied to the root element /\n root: {\n display: \"inline-flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n textTransform: \"none\",\n cursor: \"pointer\",\n whiteSpace: \"nowrap\",\n\n // Background color common for almost all variants\n \":where(:not($disabled))\": {\n \":hover, :focus-visible\": {\n backgroundColor: theme.colors.bgHover,\n },\n },\n \":focus-visible\": {\n ...outlineStyles,\n },\n\n // Default button - no size specified\n fontFamily: theme.fontFamily.body,\n ...theme.typography.label,\n color: \"var(--color, currentcolor)\",\n backgroundColor: \"transparent\",\n height: \"var(--HvButton-height, fit-content)\",\n border: \"1px solid transparent\",\n borderRadius: `var(--radius, ${theme.radii.base})`,\n padding: theme.spacing(0, \"sm\"),\n\n \"& $startIcon, & $endIcon\": {\n flexShrink: 0,\n lineHeight: 0,\n marginTop: -1,\n marginBottom: -1,\n },\n },\n /* applied to the _left_ icon container /\n startIcon: {\n marginLeft: theme.spacing(-1),\n },\n /* applied to the _right_ icon container /\n endIcon: {\n marginRight: theme.spacing(-1),\n },\n focusVisible: {},\n /* applied to the root element when disabled /\n disabled: {\n cursor: \"not-allowed\",\n color: theme.colors.textDisabled,\n backgroundColor: \"transparent\",\n borderColor: \"transparent\",\n \":hover, :focus-visible\": {\n backgroundColor: \"transparent\",\n borderColor: \"transparent\",\n },\n },\n /* applied to the root element when is icon-only /\n icon: {\n margin: 0,\n padding: 0,\n width: \"var(--HvButton-height, fit-content)\",\n },\n /* applied to the root element when using the `contained` variant /\n contained: {\n color: theme.colors.textDimmed, // `color-contrast(var(--color) vs ${colors.textDimmed}, ${colors.textLight}, ${colors.textDark})`,\n backgroundColor: \"var(--color)\",\n \":where(:not($disabled))\": {\n \":hover, :focus-visible\": {\n backgroundColor: \"color-mix(in srgb, var(--color), black 20%)\",\n },\n \":active\": {\n backgroundColor: \"color-mix(in srgb, var(--color), black 30%)\",\n },\n },\n },\n /* applied to the root element when using the `subtle` variant /\n subtle: {\n borderColor: \"currentcolor\",\n },\n /* applied to the root element when using the `ghost` variant /\n ghost: {},\n /* applied to the root element when using the `semantic` variant */\n semantic: {\n color: theme.colors.textDark,\n backgroundColor: \"transparent\",\n borderColor: \"transparent\",\n \"&:hover, &:focus-visible\": {\n backgroundColor: theme.alpha(\"textLight\", 0.3),\n },\n \"&:active\": {\n backgroundColor: theme.alpha(\"textLight\", 0.5),\n },\n \"&$disabled\": {\n backgroundColor: theme.alpha(\"textLight\", 0.1),\n },\n },\n\n // TODO - remove in v6\n primary: {},\n primarySubtle: {},\n primaryGhost: {},\n secondarySubtle: {},\n secondaryGhost: {},\n\n // Deprecated (DS3)\n secondary: {},\n});\n\n// TODO - remove xs and xl in v6 since they are not DS spec\nconst sizes: Record<\n HvSize,\n { height: string; space?: HvSize; fontSize?: keyof typeof theme.fontSizes }\n> = {\n xs: { height: \"24px\", fontSize: \"sm\" },\n sm: { height: \"24px\", fontSize: \"sm\" },\n md: { height: \"32px\" },\n lg: { height: \"48px\", space: \"md\" },\n xl: { height: \"48px\", space: \"md\" },\n};\n\nexport const getSizeStyles = (size: HvSize) => {\n const { height, space = \"sm\", fontSize } = sizes[size];\n return {\n height,\n padding: theme.spacing(0, space),\n fontSize: fontSize && theme.fontSizes[fontSize],\n };\n};\n\nexport const getIconSizeStyles = (size: HvSize) => {\n const { height } = sizes[size];\n return {\n height,\n width: height,\n };\n};\n"],"names":[],"mappings":";;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,YAAY;AAAA;AAAA,EAErE,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,eAAe;AAAA,IACf,QAAQ;AAAA,IACR,YAAY;AAAA;AAAA,IAGZ,2BAA2B;AAAA,MACzB,0BAA0B;AAAA,QACxB,iBAAiB,MAAM,OAAO;AAAA,MAAA;AAAA,IAElC;AAAA,IACA,kBAAkB;AAAA,MAChB,GAAG;AAAA,IACL;AAAA;AAAA,IAGA,YAAY,MAAM,WAAW;AAAA,IAC7B,GAAG,MAAM,WAAW;AAAA,IACpB,OAAO;AAAA,IACP,iBAAiB;AAAA,IACjB,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,cAAc,iBAAiB,MAAM,MAAM,IAAI;AAAA,IAC/C,SAAS,MAAM,QAAQ,GAAG,IAAI;AAAA,IAE9B,4BAA4B;AAAA,MAC1B,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,WAAW;AAAA,MACX,cAAc;AAAA,IAAA;AAAA,EAElB;AAAA;AAAA,EAEA,WAAW;AAAA,IACT,YAAY,MAAM,QAAQ,EAAE;AAAA,EAC9B;AAAA;AAAA,EAEA,SAAS;AAAA,IACP,aAAa,MAAM,QAAQ,EAAE;AAAA,EAC/B;AAAA,EACA,cAAc,CAAC;AAAA;AAAA,EAEf,UAAU;AAAA,IACR,QAAQ;AAAA,IACR,OAAO,MAAM,OAAO;AAAA,IACpB,iBAAiB;AAAA,IACjB,aAAa;AAAA,IACb,0BAA0B;AAAA,MACxB,iBAAiB;AAAA,MACjB,aAAa;AAAA,IAAA;AAAA,EAEjB;AAAA;AAAA,EAEA,MAAM;AAAA,IACJ,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,OAAO;AAAA,EACT;AAAA;AAAA,EAEA,WAAW;AAAA,IACT,OAAO,MAAM,OAAO;AAAA;AAAA,IACpB,iBAAiB;AAAA,IACjB,2BAA2B;AAAA,MACzB,0BAA0B;AAAA,QACxB,iBAAiB;AAAA,MACnB;AAAA,MACA,WAAW;AAAA,QACT,iBAAiB;AAAA,MAAA;AAAA,IACnB;AAAA,EAEJ;AAAA;AAAA,EAEA,QAAQ;AAAA,IACN,aAAa;AAAA,EACf;AAAA;AAAA,EAEA,OAAO,CAAC;AAAA;AAAA,EAER,UAAU;AAAA,IACR,OAAO,MAAM,OAAO;AAAA,IACpB,iBAAiB;AAAA,IACjB,aAAa;AAAA,IACb,4BAA4B;AAAA,MAC1B,iBAAiB,MAAM,MAAM,aAAa,GAAG;AAAA,IAC/C;AAAA,IACA,YAAY;AAAA,MACV,iBAAiB,MAAM,MAAM,aAAa,GAAG;AAAA,IAC/C;AAAA,IACA,cAAc;AAAA,MACZ,iBAAiB,MAAM,MAAM,aAAa,GAAG;AAAA,IAAA;AAAA,EAEjD;AAAA;AAAA,EAGA,SAAS,CAAC;AAAA,EACV,eAAe,CAAC;AAAA,EAChB,cAAc,CAAC;AAAA,EACf,iBAAiB,CAAC;AAAA,EAClB,gBAAgB,CAAC;AAAA;AAAA,EAGjB,WAAW,CAAA;AACb,CAAC;AAGD,MAAM,QAGF;AAAA,EACF,IAAI,EAAE,QAAQ,QAAQ,UAAU,KAAK;AAAA,EACrC,IAAI,EAAE,QAAQ,QAAQ,UAAU,KAAK;AAAA,EACrC,IAAI,EAAE,QAAQ,OAAO;AAAA,EACrB,IAAI,EAAE,QAAQ,QAAQ,OAAO,KAAK;AAAA,EAClC,IAAI,EAAE,QAAQ,QAAQ,OAAO,KAAK;AACpC;AAEa,MAAA,gBAAgB,CAAC,SAAiB;AAC7C,QAAM,EAAE,QAAQ,QAAQ,MAAM,SAAS,IAAI,MAAM,IAAI;AAC9C,SAAA;AAAA,IACL;AAAA,IACA,SAAS,MAAM,QAAQ,GAAG,KAAK;AAAA,IAC/B,UAAU,YAAY,MAAM,UAAU,QAAQ;AAAA,EAChD;AACF;AAEa,MAAA,oBAAoB,CAAC,SAAiB;AACjD,QAAM,EAAE,OAAA,IAAW,MAAM,IAAI;AACtB,SAAA;AAAA,IACL;AAAA,IACA,OAAO;AAAA,EACT;AACF;"}

package/dist/esm/Card/Card.styles.js CHANGED Viewed

@@ -17,12 +17,12 @@ const { staticClasses, useClasses } = createClasses("HvCard", {
   },
   selected: {
     "&,&:hover,&:focus": {
-      outline: `1px solid ${theme.colors.text}`
+      outlineColor: theme.colors.text
     }
   },
   selectable: {
     "&:hover": {
-      outline: `1px solid ${theme.colors.primary}`
+      outlineColor: theme.colors.primary
     }
   },
   semanticContainer: {

package/dist/esm/Card/Card.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Card.styles.js","sources":["../../../src/Card/Card.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCard\", {\n root: {\n overflow: \"visible\",\n position: \"relative\",\n outline: `1px solid ${theme.colors.border}`,\n borderRadius: `0px 0px ${theme.radii.round} ${theme.radii.round}`,\n backgroundColor: \"var(--bg-color)\",\n \"&:focus-visible\": {\n ...outlineStyles,\n },\n \"&:focus\": {\n outline: \"none\",\n },\n },\n selected: {\n \"&,&:hover,&:focus\": {\n ~~outline~~: ~~`1px solid ${~~theme.colors.text~~}`,\~~n },\n },\n selectable: {\n \"&:hover\": {\n ~~outline~~: ~~`1px solid ${~~theme.colors.primary~~}`,\~~n },\n },\n semanticContainer: {\n position: \"relative\",\n \"& > *\": {\n position: \"absolute\",\n zIndex: 1,\n },\n },\n icon: {\n top: theme.space.xs,\n right: theme.space.xs,\n },\n semanticBar: {\n backgroundColor: \"var(--bar-color)\",\n height: \"var(--bar-height)\",\n width: \"100%\",\n top: -1,\n right: 0,\n },\n});\n"],"names":[],"mappings":";;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,UAAU;AAAA,EACnE,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,UAAU;AAAA,IACV,SAAS,aAAa,MAAM,OAAO,MAAM;AAAA,IACzC,cAAc,WAAW,MAAM,MAAM,KAAK,IAAI,MAAM,MAAM,KAAK;AAAA,IAC/D,iBAAiB;AAAA,IACjB,mBAAmB;AAAA,MACjB,GAAG;AAAA,IACL;AAAA,IACA,WAAW;AAAA,MACT,SAAS;AAAA,IAAA;AAAA,EAEb;AAAA,EACA,UAAU;AAAA,IACR,qBAAqB;AAAA,MACnB,~~SAAS~~,~~aAAa,~~MAAM,OAAO~~,IAAI~~;AAAA,IAAA;AAAA,~~EAE3C~~;AAAA,EACA,YAAY;AAAA,IACV,WAAW;AAAA,MACT,~~SAAS~~,~~aAAa,~~MAAM,OAAO~~,OAAO~~;AAAA,IAAA;AAAA,~~EAE9C~~;AAAA,EACA,mBAAmB;AAAA,IACjB,UAAU;AAAA,IACV,SAAS;AAAA,MACP,UAAU;AAAA,MACV,QAAQ;AAAA,IAAA;AAAA,EAEZ;AAAA,EACA,MAAM;AAAA,IACJ,KAAK,MAAM,MAAM;AAAA,IACjB,OAAO,MAAM,MAAM;AAAA,EACrB;AAAA,EACA,aAAa;AAAA,IACX,iBAAiB;AAAA,IACjB,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,KAAK;AAAA,IACL,OAAO;AAAA,EAAA;AAEX,CAAC;"}
1	+ {"version":3,"file":"Card.styles.js","sources":["../../../src/Card/Card.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCard\", {\n root: {\n overflow: \"visible\",\n position: \"relative\",\n outline: `1px solid ${theme.colors.border}`,\n borderRadius: `0px 0px ${theme.radii.round} ${theme.radii.round}`,\n backgroundColor: \"var(--bg-color)\",\n \"&:focus-visible\": {\n ...outlineStyles,\n },\n \"&:focus\": {\n outline: \"none\",\n },\n },\n selected: {\n \"&,&:hover,&:focus\": {\n outlineColor: theme.colors.text,\n },\n },\n selectable: {\n \"&:hover\": {\n outlineColor: theme.colors.primary,\n },\n },\n semanticContainer: {\n position: \"relative\",\n \"& > *\": {\n position: \"absolute\",\n zIndex: 1,\n },\n },\n icon: {\n top: theme.space.xs,\n right: theme.space.xs,\n },\n semanticBar: {\n backgroundColor: \"var(--bar-color)\",\n height: \"var(--bar-height)\",\n width: \"100%\",\n top: -1,\n right: 0,\n },\n});\n"],"names":[],"mappings":";;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,UAAU;AAAA,EACnE,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,UAAU;AAAA,IACV,SAAS,aAAa,MAAM,OAAO,MAAM;AAAA,IACzC,cAAc,WAAW,MAAM,MAAM,KAAK,IAAI,MAAM,MAAM,KAAK;AAAA,IAC/D,iBAAiB;AAAA,IACjB,mBAAmB;AAAA,MACjB,GAAG;AAAA,IACL;AAAA,IACA,WAAW;AAAA,MACT,SAAS;AAAA,IAAA;AAAA,EAEb;AAAA,EACA,UAAU;AAAA,IACR,qBAAqB;AAAA,MACnB,cAAc,MAAM,OAAO;AAAA,IAAA;AAAA,EAE/B;AAAA,EACA,YAAY;AAAA,IACV,WAAW;AAAA,MACT,cAAc,MAAM,OAAO;AAAA,IAAA;AAAA,EAE/B;AAAA,EACA,mBAAmB;AAAA,IACjB,UAAU;AAAA,IACV,SAAS;AAAA,MACP,UAAU;AAAA,MACV,QAAQ;AAAA,IAAA;AAAA,EAEZ;AAAA,EACA,MAAM;AAAA,IACJ,KAAK,MAAM,MAAM;AAAA,IACjB,OAAO,MAAM,MAAM;AAAA,EACrB;AAAA,EACA,aAAa;AAAA,IACX,iBAAiB;AAAA,IACjB,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,KAAK;AAAA,IACL,OAAO;AAAA,EAAA;AAEX,CAAC;"}

package/dist/esm/CheckBox/CheckBox.js CHANGED Viewed

@@ -100,7 +100,7 @@ const HvCheckBox = forwardRef(
         id: hasLabel ? setId(elementId, "input") : setId(id, "input"),
         name,
         className: cx(classes.checkbox, {
-          [classes.invalidCheckbox]: isStateInvalid,
+          [classes.invalidCheckbox]: !label && isStateInvalid,
           [classes.checked]: isChecked,
           [classes.indeterminate]: isIndeterminate,
           [classes.semantic]: semantic