npm - @hitachivantara/uikit-react-core - Versions diffs - 5.67.1 → 5.68.0 - Mend

@hitachivantara/uikit-react-core 5.67.1 → 5.68.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 (905) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ColorPicker.js","sources":["../../../src/ColorPicker/ColorPicker.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { ColorState } from \"react-color\";\nimport { Checkbox, ColorPicker } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvBaseDropdown } from \"../BaseDropdown\";\nimport { HvDropdownProps } from \"../Dropdown\";\nimport { HvFormElement, HvInfoMessage, HvLabel } from \"../Forms\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { useLabels } from \"../hooks/useLabels\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { HvPanel } from \"../Panel\";\nimport { HvTypography } from \"../Typography\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./ColorPicker.styles\";\nimport { Picker } from \"./Picker\";\nimport { PresetColors } from \"./PresetColors\";\nimport { SavedColors } from \"./SavedColors\";\n\nexport { staticClasses as colorPickerClasses };\n\nexport type HvColorPickerClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvColorPickerProps {\n \"aria-label\"?: string;\n \"aria-labelledby\"?: string;\n \"aria-describedby\"?: string;\n /** Class names to be applied. /\n className?: string;\n /* Id to be applied to the form element root node. /\n id?: string;\n /* The form element name. /\n name?: string;\n /\n The label of the form element.\n \n The form element must be labeled for accessibility reasons.\n * If not provided, an aria-label or aria-labelledby must be provided instead.\n /\n label?: React.ReactNode;\n /* Provide additional descriptive text for the form element. /\n description?: React.ReactNode;\n /* Indicates that user input is required on the form element. /\n required?: boolean;\n /* The value color, in HEX format. /\n value?: string;\n /* The default value color, in HEX format. /\n defaultValue?: string;\n /* If `true` the dropdown is disabled unable to be interacted, if `false` it is enabled. /\n disabled?: boolean;\n /* If `true` the dropdown starts opened if `false` it starts closed. /\n expanded?: boolean;\n /* When uncontrolled, defines the initial expanded state. /\n defaultExpanded?: boolean;\n /* A function to be executed whenever the color changes. /\n onChange?: (color: string) => void;\n /* A function to be executed whenever the color change is complete. /\n onChangeComplete?: (color: string) => void;\n /* A Jss Object used to override or extend the styles applied to the component. /\n classes?: HvColorPickerClasses;\n /* The placeholder value when nothing is selected. /\n placeholder?: string;\n /* Recommended colors. The colors are HEX values. /\n recommendedColors?: string[];\n /* Recommended colors position. /\n recommendedColorsPosition?: \"top\" \| \"bottom\";\n /* If `true`, the labels are shown. If `false`, they are not shown. /\n showLabels?: boolean;\n /* An object containing all the labels. /\n labels?: Partial<typeof DEFAULT_LABELS>;\n /* Icon type for the input's end adornment. /\n dropdownIcon?: \"arrow\" \| \"colorPicker\";\n /* If `true`, the input only shows an icon. If `false`, the input shows text and icons. /\n iconOnly?: boolean;\n /* If `true`, the saved colors area is shown. If `false`, it is not shown. /\n showSavedColors?: boolean;\n /* If `true`, the custom colors area is shown. If `false`, it is not shown. /\n showCustomColors?: boolean;\n /* The saved colors. The colors are HEX values. /\n savedColorsValue?: string[];\n /* The default saved colors. The colors are HEX values. /\n defaultSavedColorsValue?: string[];\n /* Callback fired when a new saved color is added. /\n onSavedColorAdded?: (color?: string) => void;\n /* Callback fired when a new saved color is removed. /\n onSavedColorRemoved?: (color?: string) => void;\n /* Aria label to apply to delete saved color button. /\n deleteSavedColorButtonArialLabel?: string; // TODO: fix typo \"ArialLabel\" in next version\n /* Aria label to apply to add saved color button. /\n addSavedColorButtonAriaLabel?: string;\n}\n\nconst DEFAULT_LABELS = {\n recommendedColorsLabel: \"Recommended colors:\",\n customColorsLabel: \"Custom colors:\",\n};\n\n/\n A color picker component which allows the user to select a color from a list of pre-defined colors or freely select one color via the Hue and Saturation.\n * It receives a color string in HEX format and outputs an HEX formatted color.\n */\nexport const HvColorPicker = forwardRef<HTMLDivElement, HvColorPickerProps>(\n (props, ref) => {\n const {\n id,\n name,\n required = false,\n disabled = false,\n label,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n description,\n \"aria-describedby\": ariaDescribedBy,\n className,\n classes: classesProp,\n value,\n onChange,\n onChangeComplete,\n defaultValue = \"\",\n expanded,\n defaultExpanded = false,\n recommendedColorsPosition = \"top\",\n recommendedColors = [\n \"#95AFE8\",\n \"#E89E5D\",\n \"#83B8A6\",\n \"#70759C\",\n \"#C57E7E\",\n \"#FADA95\",\n \"#ADBFE8\",\n \"#E3B386\",\n \"#9AC6B7\",\n \"#8B90AF\",\n \"#CF9797\",\n \"#FAE1AA\",\n ],\n showLabels = true,\n labels: labelsProp,\n dropdownIcon = \"colorPicker\",\n placeholder = \"Select color...\",\n iconOnly = false,\n showSavedColors = true,\n showCustomColors = true,\n savedColorsValue,\n defaultSavedColorsValue = [],\n onSavedColorAdded,\n onSavedColorRemoved,\n deleteSavedColorButtonArialLabel = \"Delete saved color\",\n addSavedColorButtonAriaLabel = \"Add current color to saved colors\",\n } = useDefaultProps(\"HvColorPicker\", props);\n\n const { classes, css, cx } = useClasses(classesProp);\n\n const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n const [isOpen, setIsOpen] = useControlled(\n expanded,\n Boolean(defaultExpanded),\n );\n const [color, setColor] = useControlled(value, defaultValue);\n const [savedColors, setSavedColors] = useControlled(\n savedColorsValue,\n defaultSavedColorsValue,\n );\n const elementId = useUniqueId(id);\n const hasLabel = label != null;\n const hasDescription = description != null;\n\n const handleToggle: HvDropdownProps[\"onToggle\"] = (_, open) => {\n setIsOpen(open);\n };\n\n const handleSelect = (\n val: ColorState \| { hex: string; source: string },\n ) => {\n onChange?.(val.hex);\n onChangeComplete?.(val.hex);\n setColor(val.hex);\n };\n\n const handleOnChange = (\n val: ColorState \| { hex: string; source: string },\n ) => {\n onChange?.(val.hex);\n setColor(val.hex);\n };\n\n const handleOnChangeComplete = (\n val: ColorState \| { hex: string; source: string },\n ) => {\n onChangeComplete?.(val.hex);\n setColor(val.hex);\n };\n\n const handleAddColor = () => {\n // When no color is provided, react-color sets the picker to #000000.\n // This is the color that should be added in this case.\n const colorToAdd = color \|\| \"#000000\";\n\n onSavedColorAdded?.(colorToAdd);\n setSavedColors([...savedColors, colorToAdd]);\n };\n\n const handleRemoveColor = (val: string, position: number) => {\n if (savedColors[position] === val) {\n const sColors = [...savedColors];\n sColors.splice(position, 1);\n onSavedColorRemoved?.(val);\n setSavedColors(sColors);\n }\n };\n\n const setFocusToContent = (containerRef: HTMLElement \| null) => {\n const inputs = containerRef?.getElementsByTagName(\"input\");\n if (inputs && inputs.length > 0) {\n inputs[0].focus();\n }\n };\n\n return (\n <HvFormElement\n id={id}\n name={name}\n disabled={disabled}\n required={required}\n className={cx(classes.root, className)}\n >\n {(hasLabel \|\| hasDescription) && (\n <div className={classes.labelContainer}>\n {hasLabel && (\n <HvLabel\n id={setId(elementId, \"label\")}\n label={label}\n className={classes.label}\n />\n )}\n\n {hasDescription && (\n <HvInfoMessage\n id={setId(elementId, \"description\")}\n className={classes.description}\n >\n {description}\n </HvInfoMessage>\n )}\n </div>\n )}\n <HvBaseDropdown\n ref={ref}\n variableWidth\n className={className}\n expanded={isOpen}\n onToggle={handleToggle}\n onContainerCreation={setFocusToContent}\n classes={{\n root: cx({ [classes.dropdownRootIconOnly]: iconOnly }),\n selection: cx(iconOnly && css({ padding: 0 })),\n }}\n adornment={\n iconOnly && color ? (\n <Checkbox\n className={classes.headerColorIconOnly}\n color={[color, \"transparent\"]}\n />\n ) : dropdownIcon === \"colorPicker\" ? (\n <ColorPicker className={classes.colorPickerIcon} />\n ) : undefined\n }\n placeholder={\n iconOnly ? undefined : color ? (\n <>\n <Checkbox\n className={classes.headerColorIcon}\n color={[color, \"transparent\"]}\n />\n <HvTypography\n className={classes.headerColorValue}\n variant=\"label\"\n >\n {color}\n </HvTypography>\n </>\n ) : (\n placeholder\n )\n }\n aria-label={ariaLabel}\n aria-labelledby={\n [label && setId(elementId, \"label\"), ariaLabelledBy]\n .join(\" \")\n .trim() \|\| undefined\n }\n aria-describedby={\n [description && setId(elementId, \"description\"), ariaDescribedBy]\n .join(\" \")\n .trim() \|\| undefined\n }\n >\n <HvPanel className={classes.panel}>\n <div className={classes.colorPicker}>\n {recommendedColorsPosition === \"top\" && (\n <PresetColors\n className={classes.recommendedColorsRoot}\n colors={recommendedColors}\n onClick={handleSelect}\n title={showLabels ? labels.recommendedColorsLabel : undefined}\n />\n )}\n {showCustomColors && (\n <Picker\n classes={{\n fields: cx({\n [classes.pickerFields]:\n recommendedColorsPosition === \"bottom\" \|\|\n showSavedColors,\n }),\n }}\n title={showLabels ? labels.customColorsLabel : undefined}\n color={color}\n onChange={handleOnChange}\n onChangeComplete={handleOnChangeComplete}\n />\n )}\n {showSavedColors && (\n <SavedColors\n colors={savedColors}\n onAddColor={handleAddColor}\n onClickColor={handleSelect}\n onRemoveColor={handleRemoveColor}\n deleteButtonAriaLabel={deleteSavedColorButtonArialLabel}\n addButtonAriaLabel={addSavedColorButtonAriaLabel}\n />\n )}\n {recommendedColorsPosition === \"bottom\" && (\n <PresetColors\n colors={recommendedColors}\n onClick={handleSelect}\n title={showLabels ? labels.recommendedColorsLabel : undefined}\n />\n )}\n </div>\n </HvPanel>\n </HvBaseDropdown>\n </HvFormElement>\n );\n },\n);\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"ColorPicker.js","sources":["../../../src/ColorPicker/ColorPicker.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { ColorState } from \"react-color\";\nimport { Checkbox, ColorPicker } from \"@hitachivantara/uikit-react-icons\";\nimport {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseDropdown } from \"../BaseDropdown\";\nimport { HvDropdownProps } from \"../Dropdown\";\nimport { HvFormElement, HvInfoMessage, HvLabel } from \"../Forms\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useLabels } from \"../hooks/useLabels\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { HvPanel } from \"../Panel\";\nimport { HvTypography } from \"../Typography\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./ColorPicker.styles\";\nimport { Picker } from \"./Picker\";\nimport { PresetColors } from \"./PresetColors\";\nimport { SavedColors } from \"./SavedColors\";\n\nexport { staticClasses as colorPickerClasses };\n\nexport type HvColorPickerClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvColorPickerProps {\n \"aria-label\"?: string;\n \"aria-labelledby\"?: string;\n \"aria-describedby\"?: string;\n /** Class names to be applied. /\n className?: string;\n /* Id to be applied to the form element root node. /\n id?: string;\n /* The form element name. /\n name?: string;\n /\n The label of the form element.\n \n The form element must be labeled for accessibility reasons.\n * If not provided, an aria-label or aria-labelledby must be provided instead.\n /\n label?: React.ReactNode;\n /* Provide additional descriptive text for the form element. /\n description?: React.ReactNode;\n /* Indicates that user input is required on the form element. /\n required?: boolean;\n /* The value color, in HEX format. /\n value?: string;\n /* The default value color, in HEX format. /\n defaultValue?: string;\n /* If `true` the dropdown is disabled unable to be interacted, if `false` it is enabled. /\n disabled?: boolean;\n /* If `true` the dropdown starts opened if `false` it starts closed. /\n expanded?: boolean;\n /* When uncontrolled, defines the initial expanded state. /\n defaultExpanded?: boolean;\n /* A function to be executed whenever the color changes. /\n onChange?: (color: string) => void;\n /* A function to be executed whenever the color change is complete. /\n onChangeComplete?: (color: string) => void;\n /* A Jss Object used to override or extend the styles applied to the component. /\n classes?: HvColorPickerClasses;\n /* The placeholder value when nothing is selected. /\n placeholder?: string;\n /* Recommended colors. The colors are HEX values. /\n recommendedColors?: string[];\n /* Recommended colors position. /\n recommendedColorsPosition?: \"top\" \| \"bottom\";\n /* If `true`, the labels are shown. If `false`, they are not shown. /\n showLabels?: boolean;\n /* An object containing all the labels. /\n labels?: Partial<typeof DEFAULT_LABELS>;\n /* Icon type for the input's end adornment. /\n dropdownIcon?: \"arrow\" \| \"colorPicker\";\n /* If `true`, the input only shows an icon. If `false`, the input shows text and icons. /\n iconOnly?: boolean;\n /* If `true`, the saved colors area is shown. If `false`, it is not shown. /\n showSavedColors?: boolean;\n /* If `true`, the custom colors area is shown. If `false`, it is not shown. /\n showCustomColors?: boolean;\n /* The saved colors. The colors are HEX values. /\n savedColorsValue?: string[];\n /* The default saved colors. The colors are HEX values. /\n defaultSavedColorsValue?: string[];\n /* Callback fired when a new saved color is added. /\n onSavedColorAdded?: (color?: string) => void;\n /* Callback fired when a new saved color is removed. /\n onSavedColorRemoved?: (color?: string) => void;\n /* Aria label to apply to delete saved color button. /\n deleteSavedColorButtonArialLabel?: string; // TODO: fix typo \"ArialLabel\" in next version\n /* Aria label to apply to add saved color button. /\n addSavedColorButtonAriaLabel?: string;\n}\n\nconst DEFAULT_LABELS = {\n recommendedColorsLabel: \"Recommended colors:\",\n customColorsLabel: \"Custom colors:\",\n};\n\n/\n A color picker component which allows the user to select a color from a list of pre-defined colors or freely select one color via the Hue and Saturation.\n * It receives a color string in HEX format and outputs an HEX formatted color.\n */\nexport const HvColorPicker = forwardRef<HTMLDivElement, HvColorPickerProps>(\n (props, ref) => {\n const {\n id,\n name,\n required = false,\n disabled = false,\n label,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n description,\n \"aria-describedby\": ariaDescribedBy,\n className,\n classes: classesProp,\n value,\n onChange,\n onChangeComplete,\n defaultValue = \"\",\n expanded,\n defaultExpanded = false,\n recommendedColorsPosition = \"top\",\n recommendedColors = [\n \"#95AFE8\",\n \"#E89E5D\",\n \"#83B8A6\",\n \"#70759C\",\n \"#C57E7E\",\n \"#FADA95\",\n \"#ADBFE8\",\n \"#E3B386\",\n \"#9AC6B7\",\n \"#8B90AF\",\n \"#CF9797\",\n \"#FAE1AA\",\n ],\n showLabels = true,\n labels: labelsProp,\n dropdownIcon = \"colorPicker\",\n placeholder = \"Select color...\",\n iconOnly = false,\n showSavedColors = true,\n showCustomColors = true,\n savedColorsValue,\n defaultSavedColorsValue = [],\n onSavedColorAdded,\n onSavedColorRemoved,\n deleteSavedColorButtonArialLabel = \"Delete saved color\",\n addSavedColorButtonAriaLabel = \"Add current color to saved colors\",\n } = useDefaultProps(\"HvColorPicker\", props);\n\n const { classes, css, cx } = useClasses(classesProp);\n\n const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n const [isOpen, setIsOpen] = useControlled(\n expanded,\n Boolean(defaultExpanded),\n );\n const [color, setColor] = useControlled(value, defaultValue);\n const [savedColors, setSavedColors] = useControlled(\n savedColorsValue,\n defaultSavedColorsValue,\n );\n const elementId = useUniqueId(id);\n const hasLabel = label != null;\n const hasDescription = description != null;\n\n const handleToggle: HvDropdownProps[\"onToggle\"] = (_, open) => {\n setIsOpen(open);\n };\n\n const handleSelect = (\n val: ColorState \| { hex: string; source: string },\n ) => {\n onChange?.(val.hex);\n onChangeComplete?.(val.hex);\n setColor(val.hex);\n };\n\n const handleOnChange = (\n val: ColorState \| { hex: string; source: string },\n ) => {\n onChange?.(val.hex);\n setColor(val.hex);\n };\n\n const handleOnChangeComplete = (\n val: ColorState \| { hex: string; source: string },\n ) => {\n onChangeComplete?.(val.hex);\n setColor(val.hex);\n };\n\n const handleAddColor = () => {\n // When no color is provided, react-color sets the picker to #000000.\n // This is the color that should be added in this case.\n const colorToAdd = color \|\| \"#000000\";\n\n onSavedColorAdded?.(colorToAdd);\n setSavedColors([...savedColors, colorToAdd]);\n };\n\n const handleRemoveColor = (val: string, position: number) => {\n if (savedColors[position] === val) {\n const sColors = [...savedColors];\n sColors.splice(position, 1);\n onSavedColorRemoved?.(val);\n setSavedColors(sColors);\n }\n };\n\n const setFocusToContent = (containerRef: HTMLElement \| null) => {\n const inputs = containerRef?.getElementsByTagName(\"input\");\n if (inputs && inputs.length > 0) {\n inputs[0].focus();\n }\n };\n\n return (\n <HvFormElement\n id={id}\n name={name}\n disabled={disabled}\n required={required}\n className={cx(classes.root, className)}\n >\n {(hasLabel \|\| hasDescription) && (\n <div className={classes.labelContainer}>\n {hasLabel && (\n <HvLabel\n id={setId(elementId, \"label\")}\n label={label}\n className={classes.label}\n />\n )}\n\n {hasDescription && (\n <HvInfoMessage\n id={setId(elementId, \"description\")}\n className={classes.description}\n >\n {description}\n </HvInfoMessage>\n )}\n </div>\n )}\n <HvBaseDropdown\n ref={ref}\n variableWidth\n className={className}\n expanded={isOpen}\n onToggle={handleToggle}\n onContainerCreation={setFocusToContent}\n classes={{\n root: cx({ [classes.dropdownRootIconOnly]: iconOnly }),\n selection: cx(iconOnly && css({ padding: 0 })),\n }}\n adornment={\n iconOnly && color ? (\n <Checkbox\n className={classes.headerColorIconOnly}\n color={[color, \"transparent\"]}\n />\n ) : dropdownIcon === \"colorPicker\" ? (\n <ColorPicker className={classes.colorPickerIcon} />\n ) : undefined\n }\n placeholder={\n iconOnly ? undefined : color ? (\n <>\n <Checkbox\n className={classes.headerColorIcon}\n color={[color, \"transparent\"]}\n />\n <HvTypography\n className={classes.headerColorValue}\n variant=\"label\"\n >\n {color}\n </HvTypography>\n </>\n ) : (\n placeholder\n )\n }\n aria-label={ariaLabel}\n aria-labelledby={\n [label && setId(elementId, \"label\"), ariaLabelledBy]\n .join(\" \")\n .trim() \|\| undefined\n }\n aria-describedby={\n [description && setId(elementId, \"description\"), ariaDescribedBy]\n .join(\" \")\n .trim() \|\| undefined\n }\n >\n <HvPanel className={classes.panel}>\n <div className={classes.colorPicker}>\n {recommendedColorsPosition === \"top\" && (\n <PresetColors\n className={classes.recommendedColorsRoot}\n colors={recommendedColors}\n onClick={handleSelect}\n title={showLabels ? labels.recommendedColorsLabel : undefined}\n />\n )}\n {showCustomColors && (\n <Picker\n classes={{\n fields: cx({\n [classes.pickerFields]:\n recommendedColorsPosition === \"bottom\" \|\|\n showSavedColors,\n }),\n }}\n title={showLabels ? labels.customColorsLabel : undefined}\n color={color}\n onChange={handleOnChange}\n onChangeComplete={handleOnChangeComplete}\n />\n )}\n {showSavedColors && (\n <SavedColors\n colors={savedColors}\n onAddColor={handleAddColor}\n onClickColor={handleSelect}\n onRemoveColor={handleRemoveColor}\n deleteButtonAriaLabel={deleteSavedColorButtonArialLabel}\n addButtonAriaLabel={addSavedColorButtonAriaLabel}\n />\n )}\n {recommendedColorsPosition === \"bottom\" && (\n <PresetColors\n colors={recommendedColors}\n onClick={handleSelect}\n title={showLabels ? labels.recommendedColorsLabel : undefined}\n />\n )}\n </div>\n </HvPanel>\n </HvBaseDropdown>\n </HvFormElement>\n );\n },\n);\n"],"names":[],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-import { createClasses } from "@hitachivantara/uikit-react-shared";
+import { createClasses } from "@hitachivantara/uikit-react-utils";
 const { staticClasses, useClasses } = createClasses("HvColorPicker", {
   root: {},
   labelContainer: {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ColorPicker.styles.js","sources":["../../../src/ColorPicker/ColorPicker.styles.tsx"],"sourcesContent":["import { createClasses } from \"~~../~~utils~~/classes~~\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvColorPicker\", {\n root: {},\n labelContainer: {\n display: \"flex\",\n alignItems: \"flex-start\",\n },\n label: {\n paddingBottom: \"6px\",\n display: \"block\",\n cursor: \"pointer\",\n },\n description: {},\n headerColorValue: {\n textTransform: \"uppercase\",\n },\n headerColorIcon: {\n width: 24,\n \"& svg\": {\n marginLeft: 0,\n },\n },\n panel: {\n width: \"100%\",\n minWidth: \"266px\",\n display: \"flex\",\n justifyContent: \"center\",\n padding: \"16px\",\n backgroundColor: \"transparent\",\n },\n colorPicker: {\n width: \"232px\",\n },\n colorPickerIcon: {},\n recommendedColorsRoot: {\n \":not(:only-child)\": {\n paddingBottom: \"24px\",\n },\n },\n dropdownRootIconOnly: {\n width: 32,\n height: 32,\n },\n headerColorIconOnly: {},\n pickerFields: { paddingBottom: 20 },\n});\n"],"names":[],"mappings":";AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,iBAAiB;AAAA,EAC1E,MAAM,CAAC;AAAA,EACP,gBAAgB;AAAA,IACd,SAAS;AAAA,IACT,YAAY;AAAA,EACd;AAAA,EACA,OAAO;AAAA,IACL,eAAe;AAAA,IACf,SAAS;AAAA,IACT,QAAQ;AAAA,EACV;AAAA,EACA,aAAa,CAAC;AAAA,EACd,kBAAkB;AAAA,IAChB,eAAe;AAAA,EACjB;AAAA,EACA,iBAAiB;AAAA,IACf,OAAO;AAAA,IACP,SAAS;AAAA,MACP,YAAY;AAAA,IACd;AAAA,EACF;AAAA,EACA,OAAO;AAAA,IACL,OAAO;AAAA,IACP,UAAU;AAAA,IACV,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,SAAS;AAAA,IACT,iBAAiB;AAAA,EACnB;AAAA,EACA,aAAa;AAAA,IACX,OAAO;AAAA,EACT;AAAA,EACA,iBAAiB,CAAC;AAAA,EAClB,uBAAuB;AAAA,IACrB,qBAAqB;AAAA,MACnB,eAAe;AAAA,IACjB;AAAA,EACF;AAAA,EACA,sBAAsB;AAAA,IACpB,OAAO;AAAA,IACP,QAAQ;AAAA,EACV;AAAA,EACA,qBAAqB,CAAC;AAAA,EACtB,cAAc,EAAE,eAAe,GAAG;AACpC,CAAC;"}
1	+ {"version":3,"file":"ColorPicker.styles.js","sources":["../../../src/ColorPicker/ColorPicker.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvColorPicker\", {\n root: {},\n labelContainer: {\n display: \"flex\",\n alignItems: \"flex-start\",\n },\n label: {\n paddingBottom: \"6px\",\n display: \"block\",\n cursor: \"pointer\",\n },\n description: {},\n headerColorValue: {\n textTransform: \"uppercase\",\n },\n headerColorIcon: {\n width: 24,\n \"& svg\": {\n marginLeft: 0,\n },\n },\n panel: {\n width: \"100%\",\n minWidth: \"266px\",\n display: \"flex\",\n justifyContent: \"center\",\n padding: \"16px\",\n backgroundColor: \"transparent\",\n },\n colorPicker: {\n width: \"232px\",\n },\n colorPickerIcon: {},\n recommendedColorsRoot: {\n \":not(:only-child)\": {\n paddingBottom: \"24px\",\n },\n },\n dropdownRootIconOnly: {\n width: 32,\n height: 32,\n },\n headerColorIconOnly: {},\n pickerFields: { paddingBottom: 20 },\n});\n"],"names":[],"mappings":";AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,iBAAiB;AAAA,EAC1E,MAAM,CAAC;AAAA,EACP,gBAAgB;AAAA,IACd,SAAS;AAAA,IACT,YAAY;AAAA,EACd;AAAA,EACA,OAAO;AAAA,IACL,eAAe;AAAA,IACf,SAAS;AAAA,IACT,QAAQ;AAAA,EACV;AAAA,EACA,aAAa,CAAC;AAAA,EACd,kBAAkB;AAAA,IAChB,eAAe;AAAA,EACjB;AAAA,EACA,iBAAiB;AAAA,IACf,OAAO;AAAA,IACP,SAAS;AAAA,MACP,YAAY;AAAA,IACd;AAAA,EACF;AAAA,EACA,OAAO;AAAA,IACL,OAAO;AAAA,IACP,UAAU;AAAA,IACV,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,SAAS;AAAA,IACT,iBAAiB;AAAA,EACnB;AAAA,EACA,aAAa;AAAA,IACX,OAAO;AAAA,EACT;AAAA,EACA,iBAAiB,CAAC;AAAA,EAClB,uBAAuB;AAAA,IACrB,qBAAqB;AAAA,MACnB,eAAe;AAAA,IACjB;AAAA,EACF;AAAA,EACA,sBAAsB;AAAA,IACpB,OAAO;AAAA,IACP,QAAQ;AAAA,EACV;AAAA,EACA,qBAAqB,CAAC;AAAA,EACtB,cAAc,EAAE,eAAe,GAAG;AACpC,CAAC;"}

package/dist/esm/ColorPicker/Fields/Fields.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useState, useRef, useEffect } from "react";
 import * as color from "react-color/lib/helpers/color";
-import { useDefaultProps } from "../../hooks/useDefaultProps.js";
+import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { useClasses } from "./Fields.styles.js";
 import { staticClasses } from "./Fields.styles.js";
 import { HvInput } from "../../Input/Input.js";

package/dist/esm/ColorPicker/Fields/Fields.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Fields.js","sources":["../../../../src/ColorPicker/Fields/Fields.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport { HSLColor, HSVColor, RGBColor } from \"react-color\";\n// @ts-ignore\nimport * as color from \"react-color/lib/helpers/color\";\n\nimport { useDefaultProps } from \"~~../../hooks~~/~~useDefaultProps~~\";\nimport { HvInput } from \"../../Input\";\nimport { ~~ExtractNames } from \"../../utils/classes\";\nimport {~~ staticClasses, useClasses } from \"./Fields.styles\";\n\nexport { staticClasses as colorPickerFieldsClasses };\n\nexport type HvColorPickerFieldsClasses = ExtractNames<typeof useClasses>;\n\ninterface FieldsProps {\n className?: string;\n rgb?: RGBColor;\n hex?: string;\n onChange: (\n data:\n \| HSLColor\n \| HSVColor\n \| RGBColor\n \| {\n source?: string;\n hex?: string;\n },\n event: React.ChangeEvent<HTMLInputElement>,\n ) => void;\n classes?: HvColorPickerFieldsClasses;\n}\n\nexport const Fields = (props: FieldsProps) => {\n const {\n className,\n onChange,\n rgb,\n hex,\n classes: classesProp,\n } = useDefaultProps(\"HvColorPickerFields\", props);\n const { classes, cx } = useClasses(classesProp);\n const [internalHex, setInternalHex] = useState(hex);\n const [internalRed, setInternalRed] = useState(rgb?.r);\n const [internalGreen, setInternalGreen] = useState(rgb?.g);\n const [internalBlue, setInternalBlue] = useState(rgb?.b);\n\n const hexInputRef = useRef<HTMLInputElement>(null);\n const redInputRef = useRef<HTMLInputElement>(null);\n const greenInputRef = useRef<HTMLInputElement>(null);\n const blueInputRef = useRef<HTMLInputElement>(null);\n\n useEffect(() => {\n if (document.activeElement !== hexInputRef.current) {\n setInternalHex(hex);\n }\n }, [hex]);\n\n useEffect(() => {\n if (document.activeElement !== redInputRef.current) {\n setInternalRed(rgb?.r);\n }\n\n if (document.activeElement !== greenInputRef.current) {\n setInternalGreen(rgb?.g);\n }\n\n if (document.activeElement !== blueInputRef.current) {\n setInternalBlue(rgb?.b);\n }\n }, [rgb]);\n\n const handleChange = (\n data: {\n hex?: string;\n r?: number;\n g?: number;\n b?: number;\n },\n event: React.ChangeEvent<HTMLInputElement>,\n ) => {\n if (data.hex && color.isValidHex(data.hex)) {\n onChange(\n {\n hex: data.hex,\n source: \"hex\",\n },\n event,\n );\n } else if (data.r \|\| data.g \|\| data.b) {\n onChange(\n {\n r: data.r \|\| rgb?.r,\n g: data.g \|\| rgb?.g,\n b: data.b \|\| rgb?.b,\n source: \"rgb\",\n },\n event,\n );\n }\n };\n\n const onChangeHex = (event: React.ChangeEvent<any>, value: string) => {\n setInternalHex(value);\n handleChange({ hex: value }, event);\n };\n\n const onChangeRbg = (\n event: React.ChangeEvent<any>,\n value: string,\n colorPart: \"r\" \| \"g\" \| \"b\",\n ) => {\n if (colorPart === \"r\") setInternalRed(Number(value));\n if (colorPart === \"g\") setInternalGreen(Number(value));\n if (colorPart === \"b\") setInternalBlue(Number(value));\n\n handleChange(\n {\n r: colorPart === \"r\" ? Number(value) : rgb?.r,\n g: colorPart === \"g\" ? Number(value) : rgb?.g,\n b: colorPart === \"b\" ? Number(value) : rgb?.b,\n },\n event,\n );\n };\n\n return (\n <div className={cx(classes.fields, className)}>\n <HvInput\n ref={hexInputRef}\n className={classes.double}\n label=\"HEX\"\n value={internalHex?.replace(\"#\", \"\")}\n onChange={onChangeHex}\n onBlur={() => setInternalHex(hex)}\n disableClear\n />\n <HvInput\n ref={redInputRef}\n className={classes.single}\n label=\"R\"\n value={`${internalRed}`}\n onChange={(event, value) => onChangeRbg(event, value, \"r\")}\n onBlur={() => setInternalRed(rgb?.r)}\n disableClear\n />\n <HvInput\n ref={greenInputRef}\n className={classes.single}\n label=\"G\"\n value={`${internalGreen}`}\n onChange={(event, value) => onChangeRbg(event, value, \"g\")}\n onBlur={() => setInternalGreen(rgb?.g)}\n disableClear\n />\n <HvInput\n ref={blueInputRef}\n className={classes.single}\n label=\"B\"\n value={`${internalBlue}`}\n onChange={(event, value) => onChangeRbg(event, value, \"b\")}\n onBlur={() => setInternalBlue(rgb?.b)}\n disableClear\n />\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;;;~~AAgCa~~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"}
1	+ {"version":3,"file":"Fields.js","sources":["../../../../src/ColorPicker/Fields/Fields.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport { HSLColor, HSVColor, RGBColor } from \"react-color\";\n// @ts-ignore\nimport * as color from \"react-color/lib/helpers/color\";\nimport {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvInput } from \"../../Input\";\nimport { staticClasses, useClasses } from \"./Fields.styles\";\n\nexport { staticClasses as colorPickerFieldsClasses };\n\nexport type HvColorPickerFieldsClasses = ExtractNames<typeof useClasses>;\n\ninterface FieldsProps {\n className?: string;\n rgb?: RGBColor;\n hex?: string;\n onChange: (\n data:\n \| HSLColor\n \| HSVColor\n \| RGBColor\n \| {\n source?: string;\n hex?: string;\n },\n event: React.ChangeEvent<HTMLInputElement>,\n ) => void;\n classes?: HvColorPickerFieldsClasses;\n}\n\nexport const Fields = (props: FieldsProps) => {\n const {\n className,\n onChange,\n rgb,\n hex,\n classes: classesProp,\n } = useDefaultProps(\"HvColorPickerFields\", props);\n const { classes, cx } = useClasses(classesProp);\n const [internalHex, setInternalHex] = useState(hex);\n const [internalRed, setInternalRed] = useState(rgb?.r);\n const [internalGreen, setInternalGreen] = useState(rgb?.g);\n const [internalBlue, setInternalBlue] = useState(rgb?.b);\n\n const hexInputRef = useRef<HTMLInputElement>(null);\n const redInputRef = useRef<HTMLInputElement>(null);\n const greenInputRef = useRef<HTMLInputElement>(null);\n const blueInputRef = useRef<HTMLInputElement>(null);\n\n useEffect(() => {\n if (document.activeElement !== hexInputRef.current) {\n setInternalHex(hex);\n }\n }, [hex]);\n\n useEffect(() => {\n if (document.activeElement !== redInputRef.current) {\n setInternalRed(rgb?.r);\n }\n\n if (document.activeElement !== greenInputRef.current) {\n setInternalGreen(rgb?.g);\n }\n\n if (document.activeElement !== blueInputRef.current) {\n setInternalBlue(rgb?.b);\n }\n }, [rgb]);\n\n const handleChange = (\n data: {\n hex?: string;\n r?: number;\n g?: number;\n b?: number;\n },\n event: React.ChangeEvent<HTMLInputElement>,\n ) => {\n if (data.hex && color.isValidHex(data.hex)) {\n onChange(\n {\n hex: data.hex,\n source: \"hex\",\n },\n event,\n );\n } else if (data.r \|\| data.g \|\| data.b) {\n onChange(\n {\n r: data.r \|\| rgb?.r,\n g: data.g \|\| rgb?.g,\n b: data.b \|\| rgb?.b,\n source: \"rgb\",\n },\n event,\n );\n }\n };\n\n const onChangeHex = (event: React.ChangeEvent<any>, value: string) => {\n setInternalHex(value);\n handleChange({ hex: value }, event);\n };\n\n const onChangeRbg = (\n event: React.ChangeEvent<any>,\n value: string,\n colorPart: \"r\" \| \"g\" \| \"b\",\n ) => {\n if (colorPart === \"r\") setInternalRed(Number(value));\n if (colorPart === \"g\") setInternalGreen(Number(value));\n if (colorPart === \"b\") setInternalBlue(Number(value));\n\n handleChange(\n {\n r: colorPart === \"r\" ? Number(value) : rgb?.r,\n g: colorPart === \"g\" ? Number(value) : rgb?.g,\n b: colorPart === \"b\" ? Number(value) : rgb?.b,\n },\n event,\n );\n };\n\n return (\n <div className={cx(classes.fields, className)}>\n <HvInput\n ref={hexInputRef}\n className={classes.double}\n label=\"HEX\"\n value={internalHex?.replace(\"#\", \"\")}\n onChange={onChangeHex}\n onBlur={() => setInternalHex(hex)}\n disableClear\n />\n <HvInput\n ref={redInputRef}\n className={classes.single}\n label=\"R\"\n value={`${internalRed}`}\n onChange={(event, value) => onChangeRbg(event, value, \"r\")}\n onBlur={() => setInternalRed(rgb?.r)}\n disableClear\n />\n <HvInput\n ref={greenInputRef}\n className={classes.single}\n label=\"G\"\n value={`${internalGreen}`}\n onChange={(event, value) => onChangeRbg(event, value, \"g\")}\n onBlur={() => setInternalGreen(rgb?.g)}\n disableClear\n />\n <HvInput\n ref={blueInputRef}\n className={classes.single}\n label=\"B\"\n value={`${internalBlue}`}\n onChange={(event, value) => onChangeRbg(event, value, \"b\")}\n onBlur={() => setInternalBlue(rgb?.b)}\n disableClear\n />\n </div>\n );\n};\n"],"names":[],"mappings":"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"}

package/dist/esm/ColorPicker/Fields/Fields.styles.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { createClasses } from "@hitachivantara/uikit-react-shared";
+import { createClasses } from "@hitachivantara/uikit-react-utils";
 const name = "HvColorPicker-Fields";
 const { staticClasses, useClasses } = createClasses(name, {
   fields: {

package/dist/esm/ColorPicker/Fields/Fields.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Fields.styles.js","sources":["../../../../src/ColorPicker/Fields/Fields.styles.tsx"],"sourcesContent":["import { createClasses } from \"~~../../~~utils~~/classes~~\";\n\nconst name = \"HvColorPicker-Fields\";\n\nexport const { staticClasses, useClasses } = createClasses(name, {\n fields: {\n width: \"100%\",\n display: \"flex\",\n paddingTop: \"18px\",\n marginRight: \"0px\",\n },\n single: {\n maxWidth: \"50px\",\n paddingLeft: \"4px\",\n \"& input\": {\n marginLeft: 5,\n marginRight: 5,\n },\n \"& label\": {\n paddingLeft: 5,\n },\n },\n double: {\n maxWidth: \"82px\",\n paddingRight: \"4px\",\n \"& input\": {\n textTransform: \"uppercase\",\n marginLeft: 5,\n marginRight: 5,\n },\n \"& label\": {\n paddingLeft: 5,\n },\n },\n});\n"],"names":[],"mappings":";AAEA,MAAM,OAAO;AAEN,MAAM,EAAE,eAAe,eAAe,cAAc,MAAM;AAAA,EAC/D,QAAQ;AAAA,IACN,OAAO;AAAA,IACP,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,aAAa;AAAA,EACf;AAAA,EACA,QAAQ;AAAA,IACN,UAAU;AAAA,IACV,aAAa;AAAA,IACb,WAAW;AAAA,MACT,YAAY;AAAA,MACZ,aAAa;AAAA,IACf;AAAA,IACA,WAAW;AAAA,MACT,aAAa;AAAA,IACf;AAAA,EACF;AAAA,EACA,QAAQ;AAAA,IACN,UAAU;AAAA,IACV,cAAc;AAAA,IACd,WAAW;AAAA,MACT,eAAe;AAAA,MACf,YAAY;AAAA,MACZ,aAAa;AAAA,IACf;AAAA,IACA,WAAW;AAAA,MACT,aAAa;AAAA,IACf;AAAA,EACF;AACF,CAAC;"}
1	+ {"version":3,"file":"Fields.styles.js","sources":["../../../../src/ColorPicker/Fields/Fields.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\n\nconst name = \"HvColorPicker-Fields\";\n\nexport const { staticClasses, useClasses } = createClasses(name, {\n fields: {\n width: \"100%\",\n display: \"flex\",\n paddingTop: \"18px\",\n marginRight: \"0px\",\n },\n single: {\n maxWidth: \"50px\",\n paddingLeft: \"4px\",\n \"& input\": {\n marginLeft: 5,\n marginRight: 5,\n },\n \"& label\": {\n paddingLeft: 5,\n },\n },\n double: {\n maxWidth: \"82px\",\n paddingRight: \"4px\",\n \"& input\": {\n textTransform: \"uppercase\",\n marginLeft: 5,\n marginRight: 5,\n },\n \"& label\": {\n paddingLeft: 5,\n },\n },\n});\n"],"names":[],"mappings":";AAEA,MAAM,OAAO;AAEN,MAAM,EAAE,eAAe,eAAe,cAAc,MAAM;AAAA,EAC/D,QAAQ;AAAA,IACN,OAAO;AAAA,IACP,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,aAAa;AAAA,EACf;AAAA,EACA,QAAQ;AAAA,IACN,UAAU;AAAA,IACV,aAAa;AAAA,IACb,WAAW;AAAA,MACT,YAAY;AAAA,MACZ,aAAa;AAAA,IACf;AAAA,IACA,WAAW;AAAA,MACT,aAAa;AAAA,IACf;AAAA,EACF;AAAA,EACA,QAAQ;AAAA,IACN,UAAU;AAAA,IACV,cAAc;AAAA,IACd,WAAW;AAAA,MACT,eAAe;AAAA,MACf,YAAY;AAAA,MACZ,aAAa;AAAA,IACf;AAAA,IACA,WAAW;AAAA,MACT,aAAa;AAAA,IACf;AAAA,EACF;AACF,CAAC;"}

package/dist/esm/ColorPicker/Picker/Picker.js CHANGED Viewed

@@ -2,8 +2,7 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useCallback } from "react";
 import { CustomPicker } from "react-color";
 import { Saturation, Hue } from "react-color/lib/components/common";
-import { useTheme } from "@hitachivantara/uikit-react-shared";
-import { useDefaultProps } from "../../hooks/useDefaultProps.js";
+import { useDefaultProps, useTheme } from "@hitachivantara/uikit-react-utils";
 import { useClasses } from "./Picker.styles.js";
 import { staticClasses } from "./Picker.styles.js";
 import { Fields } from "../Fields/Fields.js";

package/dist/esm/ColorPicker/Picker/Picker.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Picker.js","sources":["../../../../src/ColorPicker/Picker/Picker.tsx"],"sourcesContent":["import { useCallback } from \"react\";\nimport {\n CustomPicker,\n CustomPickerInjectedProps,\n HSLColor,\n HSVColor,\n RGBColor,\n} from \"react-color\";\nimport { Hue, Saturation } from \"react-color/lib/components/common\";\nimport { useTheme } from \"@hitachivantara/uikit-react-~~shared~~\";\n\nimport { ~~useDefaultProps } from \"../../hooks/useDefaultProps\";\nimport {~~ HvTypography } from \"../../Typography\";\nimport { ~~ExtractNames } from \"../../utils/classes\";\nimport {~~ Fields } from \"../Fields\";\nimport { staticClasses, useClasses } from \"./Picker.styles\";\n\nexport { staticClasses as colorPickerPickerClasses };\n\nexport type HvColorPickerPickerClasses = ExtractNames<typeof useClasses>;\n\ninterface PickerProps\n extends CustomPickerInjectedProps<\n \| HSLColor\n \| HSVColor\n \| RGBColor\n \| {\n source?: string;\n hex?: string;\n }\n > {\n classes?: HvColorPickerPickerClasses;\n title?: string;\n}\n\nconst Component = (props: PickerProps) => {\n const {\n onChange,\n rgb,\n hsl,\n hsv,\n hex,\n title,\n classes: classesProp,\n } = useDefaultProps(\"HvColorPickerPicker\", props);\n const { activeTheme } = useTheme();\n const { classes } = useClasses(classesProp);\n\n const SaturationPointer = useCallback(\n () => <div className={classes?.saturationPointer} />,\n [classes?.saturationPointer],\n );\n\n const HueSlider = useCallback(\n () => <div className={classes?.hueSlider} />,\n [classes?.hueSlider],\n );\n\n return (\n <>\n {title && (\n <HvTypography className={classes.title} variant=\"caption1\">\n {title}\n </HvTypography>\n )}\n <div className={classes.pickers}>\n <div className={classes.saturation}>\n <Saturation\n hsl={hsl}\n hsv={hsv}\n onChange={onChange}\n pointer={SaturationPointer}\n />\n </div>\n <div className={classes.hue}>\n <Hue\n direction={activeTheme?.colorPicker.hueDirection}\n hsl={hsl}\n onChange={onChange}\n pointer={HueSlider}\n />\n </div>\n </div>\n <Fields\n className={classes.fields}\n rgb={rgb}\n hex={hex}\n onChange={onChange}\n />\n </>\n );\n};\n\nexport const Picker = CustomPicker(Component);\n"],"names":[],"mappings":"~~;;;;;;;;;;AAmCA~~,MAAM,YAAY,CAAC,UAAuB;AAClC,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,EAAA,IACP,gBAAgB,uBAAuB,KAAK;AAC1C,QAAA,EAAE,gBAAgB;AACxB,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAE1C,QAAM,oBAAoB;AAAA,IACxB,MAAM,oBAAC,OAAI,EAAA,WAAW,SAAS,kBAAmB,CAAA;AAAA,IAClD,CAAC,SAAS,iBAAiB;AAAA,EAAA;AAG7B,QAAM,YAAY;AAAA,IAChB,MAAM,oBAAC,OAAI,EAAA,WAAW,SAAS,UAAW,CAAA;AAAA,IAC1C,CAAC,SAAS,SAAS;AAAA,EAAA;AAGrB,SAEK,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAA,6BACE,cAAa,EAAA,WAAW,QAAQ,OAAO,SAAQ,YAC7C,UACH,MAAA,CAAA;AAAA,IAED,qBAAA,OAAA,EAAI,WAAW,QAAQ,SACtB,UAAA;AAAA,MAAC,oBAAA,OAAA,EAAI,WAAW,QAAQ,YACtB,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA,UACA,SAAS;AAAA,QAAA;AAAA,MAAA,GAEb;AAAA,MACC,oBAAA,OAAA,EAAI,WAAW,QAAQ,KACtB,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW,aAAa,YAAY;AAAA,UACpC;AAAA,UACA;AAAA,UACA,SAAS;AAAA,QAAA;AAAA,MAAA,GAEb;AAAA,IAAA,GACF;AAAA,IACA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,QAAQ;AAAA,QACnB;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,IACF;AAAA,EACF,EAAA,CAAA;AAEJ;AAEa,MAAA,SAAS,aAAa,SAAS;"}
1	+ {"version":3,"file":"Picker.js","sources":["../../../../src/ColorPicker/Picker/Picker.tsx"],"sourcesContent":["import { useCallback } from \"react\";\nimport {\n CustomPicker,\n CustomPickerInjectedProps,\n HSLColor,\n HSVColor,\n RGBColor,\n} from \"react-color\";\nimport { Hue, Saturation } from \"react-color/lib/components/common\";\nimport {\n useDefaultProps,\n useTheme,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvTypography } from \"../../Typography\";\nimport { Fields } from \"../Fields\";\nimport { staticClasses, useClasses } from \"./Picker.styles\";\n\nexport { staticClasses as colorPickerPickerClasses };\n\nexport type HvColorPickerPickerClasses = ExtractNames<typeof useClasses>;\n\ninterface PickerProps\n extends CustomPickerInjectedProps<\n \| HSLColor\n \| HSVColor\n \| RGBColor\n \| {\n source?: string;\n hex?: string;\n }\n > {\n classes?: HvColorPickerPickerClasses;\n title?: string;\n}\n\nconst Component = (props: PickerProps) => {\n const {\n onChange,\n rgb,\n hsl,\n hsv,\n hex,\n title,\n classes: classesProp,\n } = useDefaultProps(\"HvColorPickerPicker\", props);\n const { activeTheme } = useTheme();\n const { classes } = useClasses(classesProp);\n\n const SaturationPointer = useCallback(\n () => <div className={classes?.saturationPointer} />,\n [classes?.saturationPointer],\n );\n\n const HueSlider = useCallback(\n () => <div className={classes?.hueSlider} />,\n [classes?.hueSlider],\n );\n\n return (\n <>\n {title && (\n <HvTypography className={classes.title} variant=\"caption1\">\n {title}\n </HvTypography>\n )}\n <div className={classes.pickers}>\n <div className={classes.saturation}>\n <Saturation\n hsl={hsl}\n hsv={hsv}\n onChange={onChange}\n pointer={SaturationPointer}\n />\n </div>\n <div className={classes.hue}>\n <Hue\n direction={activeTheme?.colorPicker.hueDirection}\n hsl={hsl}\n onChange={onChange}\n pointer={HueSlider}\n />\n </div>\n </div>\n <Fields\n className={classes.fields}\n rgb={rgb}\n hex={hex}\n onChange={onChange}\n />\n </>\n );\n};\n\nexport const Picker = CustomPicker(Component);\n"],"names":[],"mappings":";;;;;;;;;AAqCA,MAAM,YAAY,CAAC,UAAuB;AAClC,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,EAAA,IACP,gBAAgB,uBAAuB,KAAK;AAC1C,QAAA,EAAE,gBAAgB;AACxB,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAE1C,QAAM,oBAAoB;AAAA,IACxB,MAAM,oBAAC,OAAI,EAAA,WAAW,SAAS,kBAAmB,CAAA;AAAA,IAClD,CAAC,SAAS,iBAAiB;AAAA,EAAA;AAG7B,QAAM,YAAY;AAAA,IAChB,MAAM,oBAAC,OAAI,EAAA,WAAW,SAAS,UAAW,CAAA;AAAA,IAC1C,CAAC,SAAS,SAAS;AAAA,EAAA;AAGrB,SAEK,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAA,6BACE,cAAa,EAAA,WAAW,QAAQ,OAAO,SAAQ,YAC7C,UACH,MAAA,CAAA;AAAA,IAED,qBAAA,OAAA,EAAI,WAAW,QAAQ,SACtB,UAAA;AAAA,MAAC,oBAAA,OAAA,EAAI,WAAW,QAAQ,YACtB,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA,UACA,SAAS;AAAA,QAAA;AAAA,MAAA,GAEb;AAAA,MACC,oBAAA,OAAA,EAAI,WAAW,QAAQ,KACtB,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW,aAAa,YAAY;AAAA,UACpC;AAAA,UACA;AAAA,UACA,SAAS;AAAA,QAAA;AAAA,MAAA,GAEb;AAAA,IAAA,GACF;AAAA,IACA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,QAAQ;AAAA,QACnB;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,IACF;AAAA,EACF,EAAA,CAAA;AAEJ;AAEa,MAAA,SAAS,aAAa,SAAS;"}

package/dist/esm/ColorPicker/Picker/Picker.styles.js CHANGED Viewed

@@ -1,5 +1,5 @@
+import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
-import { createClasses } from "@hitachivantara/uikit-react-shared";
 const name = "HvColorPicker-Picker";
 const { staticClasses, useClasses } = createClasses(name, {
   pickers: {

package/dist/esm/ColorPicker/Picker/Picker.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Picker.styles.js","sources":["../../../../src/ColorPicker/Picker/Picker.styles.tsx"],"sourcesContent":["import { ~~theme~~ } from \"@hitachivantara/uikit-~~styles~~\";\n\nimport { ~~createClasses~~ } from \"~~../../utils~~/~~classes~~\";\n\nconst name = \"HvColorPicker-Picker\";\n\nexport const { staticClasses, useClasses } = createClasses(name, {\n pickers: {\n display: \"flex\",\n flexDirection: \"column\",\n },\n saturation: {\n width: \"232px\",\n height: \"140px\",\n marginRight: \"0px\",\n position: \"relative\",\n overflow: \"visible\",\n\n \"& > div\": {\n borderRadius: theme.radii.base,\n\n \"& .saturation-white\": {\n borderRadius: theme.radii.base,\n\n \"& .saturation-black\": {\n borderRadius: theme.radii.base,\n },\n },\n },\n },\n saturationPointer: {\n width: \"8px\",\n height: \"8px\",\n boxShadow: `0 0 0 2px #fff, inset 0 0 1px 1px rgba(0,0,0,.3),\n 0 0 1px 2px rgba(0,0,0,.4)`,\n borderRadius: \"50%\",\n transform: \"translate(-3px, -3px)\",\n },\n hue: {\n height: \"8px\",\n width: \"232px\",\n position: \"relative\",\n overflow: \"visible\",\n marginTop: \"18px\",\n\n \"& .hue-horizontal\": {\n borderRadius: `calc(2*${theme.radii.base})`,\n },\n },\n hueSlider: {\n width: \"12px\",\n height: \"12px\",\n background: \"transparent\",\n boxShadow: \"0 0 2px rgb(0 0 0 / 60%)\",\n marginLeft: \"0px\",\n border: \"2px solid #fff\",\n borderRadius: theme.radii.circle,\n transform: \"translate(0, -2px)\",\n },\n title: {\n fontWeight: theme.fontWeights.semibold,\n marginBottom: 8,\n },\n fields: {},\n});\n"],"names":[],"mappings":";;~~AAIA~~,MAAM,OAAO;AAEN,MAAM,EAAE,eAAe,eAAe,cAAc,MAAM;AAAA,EAC/D,SAAS;AAAA,IACP,SAAS;AAAA,IACT,eAAe;AAAA,EACjB;AAAA,EACA,YAAY;AAAA,IACV,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,aAAa;AAAA,IACb,UAAU;AAAA,IACV,UAAU;AAAA,IAEV,WAAW;AAAA,MACT,cAAc,MAAM,MAAM;AAAA,MAE1B,uBAAuB;AAAA,QACrB,cAAc,MAAM,MAAM;AAAA,QAE1B,uBAAuB;AAAA,UACrB,cAAc,MAAM,MAAM;AAAA,QAC5B;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAAA,EACA,mBAAmB;AAAA,IACjB,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,WAAW;AAAA;AAAA,IAEX,cAAc;AAAA,IACd,WAAW;AAAA,EACb;AAAA,EACA,KAAK;AAAA,IACH,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,UAAU;AAAA,IACV,UAAU;AAAA,IACV,WAAW;AAAA,IAEX,qBAAqB;AAAA,MACnB,cAAc,UAAU,MAAM,MAAM,IAAI;AAAA,IAC1C;AAAA,EACF;AAAA,EACA,WAAW;AAAA,IACT,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR,cAAc,MAAM,MAAM;AAAA,IAC1B,WAAW;AAAA,EACb;AAAA,EACA,OAAO;AAAA,IACL,YAAY,MAAM,YAAY;AAAA,IAC9B,cAAc;AAAA,EAChB;AAAA,EACA,QAAQ,CAAC;AACX,CAAC;"}
1	+ {"version":3,"file":"Picker.styles.js","sources":["../../../../src/ColorPicker/Picker/Picker.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nconst name = \"HvColorPicker-Picker\";\n\nexport const { staticClasses, useClasses } = createClasses(name, {\n pickers: {\n display: \"flex\",\n flexDirection: \"column\",\n },\n saturation: {\n width: \"232px\",\n height: \"140px\",\n marginRight: \"0px\",\n position: \"relative\",\n overflow: \"visible\",\n\n \"& > div\": {\n borderRadius: theme.radii.base,\n\n \"& .saturation-white\": {\n borderRadius: theme.radii.base,\n\n \"& .saturation-black\": {\n borderRadius: theme.radii.base,\n },\n },\n },\n },\n saturationPointer: {\n width: \"8px\",\n height: \"8px\",\n boxShadow: `0 0 0 2px #fff, inset 0 0 1px 1px rgba(0,0,0,.3),\n 0 0 1px 2px rgba(0,0,0,.4)`,\n borderRadius: \"50%\",\n transform: \"translate(-3px, -3px)\",\n },\n hue: {\n height: \"8px\",\n width: \"232px\",\n position: \"relative\",\n overflow: \"visible\",\n marginTop: \"18px\",\n\n \"& .hue-horizontal\": {\n borderRadius: `calc(2*${theme.radii.base})`,\n },\n },\n hueSlider: {\n width: \"12px\",\n height: \"12px\",\n background: \"transparent\",\n boxShadow: \"0 0 2px rgb(0 0 0 / 60%)\",\n marginLeft: \"0px\",\n border: \"2px solid #fff\",\n borderRadius: theme.radii.circle,\n transform: \"translate(0, -2px)\",\n },\n title: {\n fontWeight: theme.fontWeights.semibold,\n marginBottom: 8,\n },\n fields: {},\n});\n"],"names":[],"mappings":";;AAGA,MAAM,OAAO;AAEN,MAAM,EAAE,eAAe,eAAe,cAAc,MAAM;AAAA,EAC/D,SAAS;AAAA,IACP,SAAS;AAAA,IACT,eAAe;AAAA,EACjB;AAAA,EACA,YAAY;AAAA,IACV,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,aAAa;AAAA,IACb,UAAU;AAAA,IACV,UAAU;AAAA,IAEV,WAAW;AAAA,MACT,cAAc,MAAM,MAAM;AAAA,MAE1B,uBAAuB;AAAA,QACrB,cAAc,MAAM,MAAM;AAAA,QAE1B,uBAAuB;AAAA,UACrB,cAAc,MAAM,MAAM;AAAA,QAC5B;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAAA,EACA,mBAAmB;AAAA,IACjB,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,WAAW;AAAA;AAAA,IAEX,cAAc;AAAA,IACd,WAAW;AAAA,EACb;AAAA,EACA,KAAK;AAAA,IACH,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,UAAU;AAAA,IACV,UAAU;AAAA,IACV,WAAW;AAAA,IAEX,qBAAqB;AAAA,MACnB,cAAc,UAAU,MAAM,MAAM,IAAI;AAAA,IAC1C;AAAA,EACF;AAAA,EACA,WAAW;AAAA,IACT,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR,cAAc,MAAM,MAAM;AAAA,IAC1B,WAAW;AAAA,EACb;AAAA,EACA,OAAO;AAAA,IACL,YAAY,MAAM,YAAY;AAAA,IAC9B,cAAc;AAAA,EAChB;AAAA,EACA,QAAQ,CAAC;AACX,CAAC;"}

package/dist/esm/ColorPicker/PresetColors/PresetColors.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { Swatch } from "react-color/lib/components/common";
-import { useDefaultProps } from "../../hooks/useDefaultProps.js";
+import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { useClasses } from "./PresetColors.styles.js";
 import { staticClasses } from "./PresetColors.styles.js";
 import { HvTypography } from "../../Typography/Typography.js";

package/dist/esm/ColorPicker/PresetColors/PresetColors.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PresetColors.js","sources":["../../../../src/ColorPicker/PresetColors/PresetColors.tsx"],"sourcesContent":["// @types/react-color seems to be broken\n// @ts-ignore\nimport { Swatch } from \"react-color/lib/components/common\";\n\nimport { useDefaultProps } from \"~~../../hooks~~/~~useDefaultProps~~\";\nimport { HvTypography } from \"../../Typography\";\nimport { ~~ExtractNames } from \"../../utils/classes\";\nimport {~~ staticClasses, useClasses } from \"./PresetColors.styles\";\n\nexport { staticClasses as colorPickerPresetColorsClasses };\n\nexport type HvColorPickerPresetColorsClasses = ExtractNames<typeof useClasses>;\n\ninterface PresetColorsProps {\n colors: string[];\n onClick: (color: { hex: string; source: string }) => void;\n title?: string;\n className?: string;\n classes?: HvColorPickerPresetColorsClasses;\n}\n\nexport const PresetColors = (props: PresetColorsProps) => {\n const {\n onClick,\n colors,\n title,\n className,\n classes: classesProp,\n } = useDefaultProps(\"HvColorPickerPresetColors\", props);\n const { classes, cx } = useClasses(classesProp);\n\n const handleClick = (hex: string) => {\n onClick({\n hex,\n source: \"hex\",\n });\n };\n\n return (\n <div className={cx(classes.root, className)}>\n {title && (\n <HvTypography className={classes.title} variant=\"caption1\">\n {title}\n </HvTypography>\n )}\n <div className={classes.colors}>\n {colors.map((color, index) => (\n <div\n key={`recommended-color-${color}-${index}`}\n className={classes.swatchWrap}\n >\n <Swatch\n color={color}\n onClick={handleClick}\n focusStyle={{\n boxShadow: `inset 0 0 0 1px rgba(0,0,0,.15), 0 0 4px ${color}`,\n }}\n />\n </div>\n ))}\n </div>\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;;~~AAqBa~~,MAAA,eAAe,CAAC,UAA6B;AAClD,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,EAAA,IACP,gBAAgB,6BAA6B,KAAK;AACtD,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,QAAA,cAAc,CAAC,QAAgB;AAC3B,YAAA;AAAA,MACN;AAAA,MACA,QAAQ;AAAA,IAAA,CACT;AAAA,EAAA;AAGH,8BACG,OAAI,EAAA,WAAW,GAAG,QAAQ,MAAM,SAAS,GACvC,UAAA;AAAA,IAAA,6BACE,cAAa,EAAA,WAAW,QAAQ,OAAO,SAAQ,YAC7C,UACH,MAAA,CAAA;AAAA,IAEF,oBAAC,SAAI,WAAW,QAAQ,QACrB,UAAO,OAAA,IAAI,CAAC,OAAO,UAClB;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,WAAW,QAAQ;AAAA,QAEnB,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA,SAAS;AAAA,YACT,YAAY;AAAA,cACV,WAAW,4CAA4C,KAAK;AAAA,YAC9D;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,MATK,qBAAqB,KAAK,IAAI,KAAK;AAAA,IAW3C,CAAA,GACH;AAAA,EACF,EAAA,CAAA;AAEJ;"}
1	+ {"version":3,"file":"PresetColors.js","sources":["../../../../src/ColorPicker/PresetColors/PresetColors.tsx"],"sourcesContent":["// @types/react-color seems to be broken\n// @ts-ignore\nimport { Swatch } from \"react-color/lib/components/common\";\nimport {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvTypography } from \"../../Typography\";\nimport { staticClasses, useClasses } from \"./PresetColors.styles\";\n\nexport { staticClasses as colorPickerPresetColorsClasses };\n\nexport type HvColorPickerPresetColorsClasses = ExtractNames<typeof useClasses>;\n\ninterface PresetColorsProps {\n colors: string[];\n onClick: (color: { hex: string; source: string }) => void;\n title?: string;\n className?: string;\n classes?: HvColorPickerPresetColorsClasses;\n}\n\nexport const PresetColors = (props: PresetColorsProps) => {\n const {\n onClick,\n colors,\n title,\n className,\n classes: classesProp,\n } = useDefaultProps(\"HvColorPickerPresetColors\", props);\n const { classes, cx } = useClasses(classesProp);\n\n const handleClick = (hex: string) => {\n onClick({\n hex,\n source: \"hex\",\n });\n };\n\n return (\n <div className={cx(classes.root, className)}>\n {title && (\n <HvTypography className={classes.title} variant=\"caption1\">\n {title}\n </HvTypography>\n )}\n <div className={classes.colors}>\n {colors.map((color, index) => (\n <div\n key={`recommended-color-${color}-${index}`}\n className={classes.swatchWrap}\n >\n <Swatch\n color={color}\n onClick={handleClick}\n focusStyle={{\n boxShadow: `inset 0 0 0 1px rgba(0,0,0,.15), 0 0 4px ${color}`,\n }}\n />\n </div>\n ))}\n </div>\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;;AAuBa,MAAA,eAAe,CAAC,UAA6B;AAClD,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,EAAA,IACP,gBAAgB,6BAA6B,KAAK;AACtD,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,QAAA,cAAc,CAAC,QAAgB;AAC3B,YAAA;AAAA,MACN;AAAA,MACA,QAAQ;AAAA,IAAA,CACT;AAAA,EAAA;AAGH,8BACG,OAAI,EAAA,WAAW,GAAG,QAAQ,MAAM,SAAS,GACvC,UAAA;AAAA,IAAA,6BACE,cAAa,EAAA,WAAW,QAAQ,OAAO,SAAQ,YAC7C,UACH,MAAA,CAAA;AAAA,IAEF,oBAAC,SAAI,WAAW,QAAQ,QACrB,UAAO,OAAA,IAAI,CAAC,OAAO,UAClB;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,WAAW,QAAQ;AAAA,QAEnB,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA,SAAS;AAAA,YACT,YAAY;AAAA,cACV,WAAW,4CAA4C,KAAK;AAAA,YAC9D;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,MATK,qBAAqB,KAAK,IAAI,KAAK;AAAA,IAW3C,CAAA,GACH;AAAA,EACF,EAAA,CAAA;AAEJ;"}

package/dist/esm/ColorPicker/PresetColors/PresetColors.styles.js CHANGED Viewed

@@ -1,5 +1,5 @@
+import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
-import { createClasses } from "@hitachivantara/uikit-react-shared";
 const name = "HvColorPicker-PresetColors";
 const { staticClasses, useClasses } = createClasses(name, {
   root: { width: "232px" },

package/dist/esm/ColorPicker/PresetColors/PresetColors.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PresetColors.styles.js","sources":["../../../../src/ColorPicker/PresetColors/PresetColors.styles.tsx"],"sourcesContent":["import { ~~theme~~ } from \"@hitachivantara/uikit-~~styles~~\";\n\nimport { ~~createClasses~~ } from \"~~../../utils~~/~~classes~~\";\n\nconst name = \"HvColorPicker-PresetColors\";\n\nexport const { staticClasses, useClasses } = createClasses(name, {\n root: { width: \"232px\" },\n colors: {\n display: \"flex\",\n flexWrap: \"wrap\",\n position: \"relative\",\n width: \"calc(100% + 8px)\",\n margin: \"-4px -4px\",\n padding: 0,\n },\n title: {\n fontWeight: theme.fontWeights.semibold,\n marginBottom: 8,\n },\n swatchWrap: {\n width: \"32px\",\n height: \"32px\",\n margin: \"4px\",\n\n \"& > span > div\": {\n borderRadius: theme.radii.base,\n },\n },\n});\n"],"names":[],"mappings":";;~~AAIA~~,MAAM,OAAO;AAEN,MAAM,EAAE,eAAe,eAAe,cAAc,MAAM;AAAA,EAC/D,MAAM,EAAE,OAAO,QAAQ;AAAA,EACvB,QAAQ;AAAA,IACN,SAAS;AAAA,IACT,UAAU;AAAA,IACV,UAAU;AAAA,IACV,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,OAAO;AAAA,IACL,YAAY,MAAM,YAAY;AAAA,IAC9B,cAAc;AAAA,EAChB;AAAA,EACA,YAAY;AAAA,IACV,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,QAAQ;AAAA,IAER,kBAAkB;AAAA,MAChB,cAAc,MAAM,MAAM;AAAA,IAC5B;AAAA,EACF;AACF,CAAC;"}
1	+ {"version":3,"file":"PresetColors.styles.js","sources":["../../../../src/ColorPicker/PresetColors/PresetColors.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nconst name = \"HvColorPicker-PresetColors\";\n\nexport const { staticClasses, useClasses } = createClasses(name, {\n root: { width: \"232px\" },\n colors: {\n display: \"flex\",\n flexWrap: \"wrap\",\n position: \"relative\",\n width: \"calc(100% + 8px)\",\n margin: \"-4px -4px\",\n padding: 0,\n },\n title: {\n fontWeight: theme.fontWeights.semibold,\n marginBottom: 8,\n },\n swatchWrap: {\n width: \"32px\",\n height: \"32px\",\n margin: \"4px\",\n\n \"& > span > div\": {\n borderRadius: theme.radii.base,\n },\n },\n});\n"],"names":[],"mappings":";;AAGA,MAAM,OAAO;AAEN,MAAM,EAAE,eAAe,eAAe,cAAc,MAAM;AAAA,EAC/D,MAAM,EAAE,OAAO,QAAQ;AAAA,EACvB,QAAQ;AAAA,IACN,SAAS;AAAA,IACT,UAAU;AAAA,IACV,UAAU;AAAA,IACV,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,OAAO;AAAA,IACL,YAAY,MAAM,YAAY;AAAA,IAC9B,cAAc;AAAA,EAChB;AAAA,EACA,YAAY;AAAA,IACV,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,QAAQ;AAAA,IAER,kBAAkB;AAAA,MAChB,cAAc,MAAM,MAAM;AAAA,IAC5B;AAAA,EACF;AACF,CAAC;"}

package/dist/esm/ColorPicker/SavedColors/SavedColors.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { Swatch } from "react-color/lib/components/common";
 import { Add, CloseXS } from "@hitachivantara/uikit-react-icons";
-import { useDefaultProps } from "../../hooks/useDefaultProps.js";
+import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { useClasses } from "./SavedColors.styles.js";
 import { staticClasses } from "./SavedColors.styles.js";
 import { HvButton } from "../../Button/Button.js";

package/dist/esm/ColorPicker/SavedColors/SavedColors.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SavedColors.js","sources":["../../../../src/ColorPicker/SavedColors/SavedColors.tsx"],"sourcesContent":["// @types/react-color seems to be broken\n// @ts-ignore\nimport { Swatch } from \"react-color/lib/components/common\";\nimport { Add, CloseXS } from \"@hitachivantara/uikit-react-icons\";\n\nimport { ~~HvButton } from~~ \~~"../../Button\";\nimport {~~ useDefaultProps } from \"~~../../hooks~~/~~useDefaultProps~~\";\nimport { ~~ExtractNames~~ } from \"../../~~utils/classes~~\";\nimport { staticClasses, useClasses } from \"./SavedColors.styles\";\n\nexport { staticClasses as colorPickerSavedColorsClasses };\n\nexport type HvColorPickerSavedColorsClasses = ExtractNames<typeof useClasses>;\n\ninterface SavedColorsProps {\n colors: string[];\n onClickColor: (color: { hex: string; source: string }) => void;\n onAddColor: () => void;\n onRemoveColor: (color: string, index: number) => void;\n deleteButtonAriaLabel?: string;\n addButtonAriaLabel?: string;\n classes?: HvColorPickerSavedColorsClasses;\n}\n\nexport const SavedColors = (props: SavedColorsProps) => {\n const {\n colors,\n onClickColor,\n onAddColor,\n onRemoveColor,\n deleteButtonAriaLabel,\n addButtonAriaLabel,\n classes: classesProp,\n } = useDefaultProps(\"HvColorPickerSavedColors\", props);\n const { classes } = useClasses(classesProp);\n\n const handleClick = (hex: string) => {\n onClickColor({\n hex,\n source: \"hex\",\n });\n };\n\n return (\n <div className={classes.root}>\n <HvButton\n className={classes.addButton}\n variant=\"secondarySubtle\"\n icon\n onClick={onAddColor}\n aria-label={addButtonAriaLabel}\n >\n <Add aria-hidden />\n </HvButton>\n {colors.map((color, index) => (\n <div\n key={`saved-color-${color}-${index}`}\n className={classes.swatchRoot}\n >\n <div className={classes.swatchWrap}>\n <Swatch\n color={color}\n onClick={handleClick}\n focusStyle={{\n boxShadow: `inset 0 0 0 1px rgba(0,0,0,.15), 0 0 4px ${color}`,\n }}\n />\n </div>\n <div className={classes.removeButtonRoot}>\n <HvButton\n className={classes.removeButton}\n variant=\"secondarySubtle\"\n onClick={() => onRemoveColor(color, index)}\n tabIndex={0}\n aria-label={deleteButtonAriaLabel}\n >\n <CloseXS aria-hidden iconSize=\"XS\" />\n </HvButton>\n </div>\n </div>\n ))}\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;;;~~AAwBa~~,MAAA,cAAc,CAAC,UAA4B;AAChD,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,EAAA,IACP,gBAAgB,4BAA4B,KAAK;AACrD,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAEpC,QAAA,cAAc,CAAC,QAAgB;AACtB,iBAAA;AAAA,MACX;AAAA,MACA,QAAQ;AAAA,IAAA,CACT;AAAA,EAAA;AAGH,SACG,qBAAA,OAAA,EAAI,WAAW,QAAQ,MACtB,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,QAAQ;AAAA,QACnB,SAAQ;AAAA,QACR,MAAI;AAAA,QACJ,SAAS;AAAA,QACT,cAAY;AAAA,QAEZ,UAAA,oBAAC,KAAI,EAAA,eAAW,KAAC,CAAA;AAAA,MAAA;AAAA,IACnB;AAAA,IACC,OAAO,IAAI,CAAC,OAAO,UAClB;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,WAAW,QAAQ;AAAA,QAEnB,UAAA;AAAA,UAAC,oBAAA,OAAA,EAAI,WAAW,QAAQ,YACtB,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC;AAAA,cACA,SAAS;AAAA,cACT,YAAY;AAAA,gBACV,WAAW,4CAA4C,KAAK;AAAA,cAC9D;AAAA,YAAA;AAAA,UAAA,GAEJ;AAAA,UACC,oBAAA,OAAA,EAAI,WAAW,QAAQ,kBACtB,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW,QAAQ;AAAA,cACnB,SAAQ;AAAA,cACR,SAAS,MAAM,cAAc,OAAO,KAAK;AAAA,cACzC,UAAU;AAAA,cACV,cAAY;AAAA,cAEZ,UAAC,oBAAA,SAAA,EAAQ,eAAW,MAAC,UAAS,MAAK;AAAA,YAAA;AAAA,UAAA,GAEvC;AAAA,QAAA;AAAA,MAAA;AAAA,MAtBK,eAAe,KAAK,IAAI,KAAK;AAAA,IAAA,CAwBrC;AAAA,EACH,EAAA,CAAA;AAEJ;"}
1	+ {"version":3,"file":"SavedColors.js","sources":["../../../../src/ColorPicker/SavedColors/SavedColors.tsx"],"sourcesContent":["// @types/react-color seems to be broken\n// @ts-ignore\nimport { Swatch } from \"react-color/lib/components/common\";\nimport { Add, CloseXS } from \"@hitachivantara/uikit-react-icons\";\nimport {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvButton } from \"../../Button\";\nimport { staticClasses, useClasses } from \"./SavedColors.styles\";\n\nexport { staticClasses as colorPickerSavedColorsClasses };\n\nexport type HvColorPickerSavedColorsClasses = ExtractNames<typeof useClasses>;\n\ninterface SavedColorsProps {\n colors: string[];\n onClickColor: (color: { hex: string; source: string }) => void;\n onAddColor: () => void;\n onRemoveColor: (color: string, index: number) => void;\n deleteButtonAriaLabel?: string;\n addButtonAriaLabel?: string;\n classes?: HvColorPickerSavedColorsClasses;\n}\n\nexport const SavedColors = (props: SavedColorsProps) => {\n const {\n colors,\n onClickColor,\n onAddColor,\n onRemoveColor,\n deleteButtonAriaLabel,\n addButtonAriaLabel,\n classes: classesProp,\n } = useDefaultProps(\"HvColorPickerSavedColors\", props);\n const { classes } = useClasses(classesProp);\n\n const handleClick = (hex: string) => {\n onClickColor({\n hex,\n source: \"hex\",\n });\n };\n\n return (\n <div className={classes.root}>\n <HvButton\n className={classes.addButton}\n variant=\"secondarySubtle\"\n icon\n onClick={onAddColor}\n aria-label={addButtonAriaLabel}\n >\n <Add aria-hidden />\n </HvButton>\n {colors.map((color, index) => (\n <div\n key={`saved-color-${color}-${index}`}\n className={classes.swatchRoot}\n >\n <div className={classes.swatchWrap}>\n <Swatch\n color={color}\n onClick={handleClick}\n focusStyle={{\n boxShadow: `inset 0 0 0 1px rgba(0,0,0,.15), 0 0 4px ${color}`,\n }}\n />\n </div>\n <div className={classes.removeButtonRoot}>\n <HvButton\n className={classes.removeButton}\n variant=\"secondarySubtle\"\n onClick={() => onRemoveColor(color, index)}\n tabIndex={0}\n aria-label={deleteButtonAriaLabel}\n >\n <CloseXS aria-hidden iconSize=\"XS\" />\n </HvButton>\n </div>\n </div>\n ))}\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;;;AA0Ba,MAAA,cAAc,CAAC,UAA4B;AAChD,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,EAAA,IACP,gBAAgB,4BAA4B,KAAK;AACrD,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAEpC,QAAA,cAAc,CAAC,QAAgB;AACtB,iBAAA;AAAA,MACX;AAAA,MACA,QAAQ;AAAA,IAAA,CACT;AAAA,EAAA;AAGH,SACG,qBAAA,OAAA,EAAI,WAAW,QAAQ,MACtB,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,QAAQ;AAAA,QACnB,SAAQ;AAAA,QACR,MAAI;AAAA,QACJ,SAAS;AAAA,QACT,cAAY;AAAA,QAEZ,UAAA,oBAAC,KAAI,EAAA,eAAW,KAAC,CAAA;AAAA,MAAA;AAAA,IACnB;AAAA,IACC,OAAO,IAAI,CAAC,OAAO,UAClB;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,WAAW,QAAQ;AAAA,QAEnB,UAAA;AAAA,UAAC,oBAAA,OAAA,EAAI,WAAW,QAAQ,YACtB,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC;AAAA,cACA,SAAS;AAAA,cACT,YAAY;AAAA,gBACV,WAAW,4CAA4C,KAAK;AAAA,cAC9D;AAAA,YAAA;AAAA,UAAA,GAEJ;AAAA,UACC,oBAAA,OAAA,EAAI,WAAW,QAAQ,kBACtB,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW,QAAQ;AAAA,cACnB,SAAQ;AAAA,cACR,SAAS,MAAM,cAAc,OAAO,KAAK;AAAA,cACzC,UAAU;AAAA,cACV,cAAY;AAAA,cAEZ,UAAC,oBAAA,SAAA,EAAQ,eAAW,MAAC,UAAS,MAAK;AAAA,YAAA;AAAA,UAAA,GAEvC;AAAA,QAAA;AAAA,MAAA;AAAA,MAtBK,eAAe,KAAK,IAAI,KAAK;AAAA,IAAA,CAwBrC;AAAA,EACH,EAAA,CAAA;AAEJ;"}

package/dist/esm/ColorPicker/SavedColors/SavedColors.styles.js CHANGED Viewed

@@ -1,5 +1,5 @@
+import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
-import { createClasses } from "@hitachivantara/uikit-react-shared";
 const name = "HvColorPicker-SavedColors";
 const { staticClasses, useClasses } = createClasses(name, {
   addButton: {

package/dist/esm/ColorPicker/SavedColors/SavedColors.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SavedColors.styles.js","sources":["../../../../src/ColorPicker/SavedColors/SavedColors.styles.tsx"],"sourcesContent":["import { ~~theme~~ } from \"@hitachivantara/uikit-~~styles~~\";\n\nimport { ~~createClasses~~ } from \"~~../../utils~~/~~classes~~\";\n\nconst name = \"HvColorPicker-SavedColors\";\n\nexport const { staticClasses, useClasses } = createClasses(name, {\n addButton: {\n margin: \"4px\",\n width: \"32px\",\n height: \"32px\",\n },\n root: {\n display: \"flex\",\n flexWrap: \"wrap\",\n position: \"relative\",\n alignItems: \"center\",\n padding: 0,\n width: \"calc(100% + 8px)\",\n margin: \"-4px -4px\",\n },\n swatchRoot: { position: \"relative\" },\n swatchWrap: {\n width: \"32px\",\n height: \"32px\",\n margin: \"4px\",\n\n \"& > span > div\": {\n borderRadius: theme.radii.base,\n },\n },\n removeButtonRoot: {\n position: \"absolute\",\n top: 0,\n right: 0,\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n height: 16,\n width: 16,\n background: theme.colors.atmo1,\n borderRadius: theme.radii.base,\n },\n removeButton: {\n height: 16,\n width: 16,\n minWidth: 16,\n minHeight: 16,\n padding: 0,\n margin: 0,\n\n \"& div > span\": {\n height: 16,\n width: 16,\n\n \"& > div\": { height: 16, width: 16 },\n },\n },\n});\n"],"names":[],"mappings":";;~~AAIA~~,MAAM,OAAO;AAEN,MAAM,EAAE,eAAe,eAAe,cAAc,MAAM;AAAA,EAC/D,WAAW;AAAA,IACT,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,QAAQ;AAAA,EACV;AAAA,EACA,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,UAAU;AAAA,IACV,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,OAAO;AAAA,IACP,QAAQ;AAAA,EACV;AAAA,EACA,YAAY,EAAE,UAAU,WAAW;AAAA,EACnC,YAAY;AAAA,IACV,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,QAAQ;AAAA,IAER,kBAAkB;AAAA,MAChB,cAAc,MAAM,MAAM;AAAA,IAC5B;AAAA,EACF;AAAA,EACA,kBAAkB;AAAA,IAChB,UAAU;AAAA,IACV,KAAK;AAAA,IACL,OAAO;AAAA,IACP,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,YAAY,MAAM,OAAO;AAAA,IACzB,cAAc,MAAM,MAAM;AAAA,EAC5B;AAAA,EACA,cAAc;AAAA,IACZ,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,UAAU;AAAA,IACV,WAAW;AAAA,IACX,SAAS;AAAA,IACT,QAAQ;AAAA,IAER,gBAAgB;AAAA,MACd,QAAQ;AAAA,MACR,OAAO;AAAA,MAEP,WAAW,EAAE,QAAQ,IAAI,OAAO,GAAG;AAAA,IACrC;AAAA,EACF;AACF,CAAC;"}
1	+ {"version":3,"file":"SavedColors.styles.js","sources":["../../../../src/ColorPicker/SavedColors/SavedColors.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nconst name = \"HvColorPicker-SavedColors\";\n\nexport const { staticClasses, useClasses } = createClasses(name, {\n addButton: {\n margin: \"4px\",\n width: \"32px\",\n height: \"32px\",\n },\n root: {\n display: \"flex\",\n flexWrap: \"wrap\",\n position: \"relative\",\n alignItems: \"center\",\n padding: 0,\n width: \"calc(100% + 8px)\",\n margin: \"-4px -4px\",\n },\n swatchRoot: { position: \"relative\" },\n swatchWrap: {\n width: \"32px\",\n height: \"32px\",\n margin: \"4px\",\n\n \"& > span > div\": {\n borderRadius: theme.radii.base,\n },\n },\n removeButtonRoot: {\n position: \"absolute\",\n top: 0,\n right: 0,\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n height: 16,\n width: 16,\n background: theme.colors.atmo1,\n borderRadius: theme.radii.base,\n },\n removeButton: {\n height: 16,\n width: 16,\n minWidth: 16,\n minHeight: 16,\n padding: 0,\n margin: 0,\n\n \"& div > span\": {\n height: 16,\n width: 16,\n\n \"& > div\": { height: 16, width: 16 },\n },\n },\n});\n"],"names":[],"mappings":";;AAGA,MAAM,OAAO;AAEN,MAAM,EAAE,eAAe,eAAe,cAAc,MAAM;AAAA,EAC/D,WAAW;AAAA,IACT,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,QAAQ;AAAA,EACV;AAAA,EACA,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,UAAU;AAAA,IACV,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,OAAO;AAAA,IACP,QAAQ;AAAA,EACV;AAAA,EACA,YAAY,EAAE,UAAU,WAAW;AAAA,EACnC,YAAY;AAAA,IACV,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,QAAQ;AAAA,IAER,kBAAkB;AAAA,MAChB,cAAc,MAAM,MAAM;AAAA,IAC5B;AAAA,EACF;AAAA,EACA,kBAAkB;AAAA,IAChB,UAAU;AAAA,IACV,KAAK;AAAA,IACL,OAAO;AAAA,IACP,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,YAAY,MAAM,OAAO;AAAA,IACzB,cAAc,MAAM,MAAM;AAAA,EAC5B;AAAA,EACA,cAAc;AAAA,IACZ,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,UAAU;AAAA,IACV,WAAW;AAAA,IACX,SAAS;AAAA,IACT,QAAQ;AAAA,IAER,gBAAgB;AAAA,MACd,QAAQ;AAAA,MACR,OAAO;AAAA,MAEP,WAAW,EAAE,QAAQ,IAAI,OAAO,GAAG;AAAA,IACrC;AAAA,EACF;AACF,CAAC;"}

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

@@ -3,8 +3,8 @@ import { forwardRef } from "react";
 import MuiContainer from "@mui/material/Container";
 import { useTheme } from "@mui/material/styles";
 import useMediaQuery from "@mui/material/useMediaQuery";
+import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
-import { useDefaultProps } from "../hooks/useDefaultProps.js";
 import { useClasses, staticClasses } from "./Container.styles.js";
 const HvContainer = forwardRef(
   (props, ref) => {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Container.js","sources":["../../../src/Container/Container.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport MuiContainer, {\n ContainerProps as MuiContainerProps,\n} from \"@mui/material/Container\";\nimport { useTheme } from \"@mui/material/styles\";\nimport useMediaQuery from \"@mui/material/useMediaQuery\";\nimport { ~~theme~~ } from \"@hitachivantara/uikit-~~styles~~\";\n\nimport { ~~useDefaultProps~~ } from \"~~../hooks~~/~~useDefaultProps~~\";\~~nimport { ExtractNames } from~~ \~~"../utils/classes\";\~~nimport { staticClasses, useClasses } from \"./Container.styles\";\n\nexport { staticClasses as containerClasses };\n\nexport type HvContainerClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvContainerProps extends Omit<MuiContainerProps, \"classes\"> {\n /*\n The component used for the root node.\n * Either a string to use a DOM element or a component.\n /\n component?: React.ElementType;\n /\n Determine the max-width of the container.\n * The container width grows with the size of the screen.\n * Set to `false` to disable `maxWidth`.\n /\n maxWidth?: \"xs\" \| \"sm\" \| \"md\" \| \"lg\" \| \"xl\" \| false;\n /* If `true`, the left and right padding is removed. /\n disableGutters?: boolean;\n /\n Set the max-width to match the min-width of the current breakpoint.\n * This is useful if you'd prefer to design for a fixed set of sizes\n * instead of trying to accommodate a fully fluid viewport.\n * It's fluid by default.\n /\n fixed?: boolean;\n /* A Jss Object used to override or extend the styles applied to the component. /\n classes?: HvContainerClasses;\n}\n\n/* The container enables you to center your content horizontally and bound it to a specific breakpoint. */\nexport const HvContainer = forwardRef<HTMLDivElement, HvContainerProps>(\n (props, ref) => {\n const {\n maxWidth = false,\n classes: classesProp,\n className,\n fixed,\n disableGutters,\n ...others\n } = useDefaultProps(\"HvContainer\", props);\n\n const { classes, cx, css } = useClasses(classesProp);\n\n const muiTheme = useTheme();\n\n const upMd = useMediaQuery(muiTheme.breakpoints.up(\"md\"));\n\n const gutters = upMd\n ? {\n // Increases specificity\n [`&.${staticClasses.root}`]: {\n paddingLeft: theme.spacing(4),\n paddingRight: theme.spacing(4),\n },\n }\n : {\n // Increases specificity\n [`&.${staticClasses.root}`]: {\n paddingLeft: theme.space.sm,\n paddingRight: theme.space.sm,\n },\n };\n\n return (\n <MuiContainer\n className={cx({ [css(gutters)]: !disableGutters }, className)}\n classes={{\n root: classes.root,\n disableGutters: classes.disableGutters,\n fixed: classes.fixed,\n maxWidthXs: classes.maxWidthXs,\n maxWidthSm: classes.maxWidthSm,\n maxWidthMd: classes.maxWidthMd,\n maxWidthLg: classes.maxWidthLg,\n maxWidthXl: classes.maxWidthXl,\n }}\n ref={ref}\n maxWidth={maxWidth}\n fixed={fixed}\n disableGutters={disableGutters}\n {...others}\n />\n );\n },\n);\n"],"names":[],"mappings":";;;;;;;;~~AA0CO~~,MAAM,cAAc;AAAA,EACzB,CAAC,OAAO,QAAQ;AACR,UAAA;AAAA,MACJ,WAAW;AAAA,MACX,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IAAA,IACD,gBAAgB,eAAe,KAAK;AAExC,UAAM,EAAE,SAAS,IAAI,IAAI,IAAI,WAAW,WAAW;AAEnD,UAAM,WAAW;AAEjB,UAAM,OAAO,cAAc,SAAS,YAAY,GAAG,IAAI,CAAC;AAExD,UAAM,UAAU,OACZ;AAAA;AAAA,MAEE,CAAC,KAAK,cAAc,IAAI,EAAE,GAAG;AAAA,QAC3B,aAAa,MAAM,QAAQ,CAAC;AAAA,QAC5B,cAAc,MAAM,QAAQ,CAAC;AAAA,MAC/B;AAAA,IAAA,IAEF;AAAA;AAAA,MAEE,CAAC,KAAK,cAAc,IAAI,EAAE,GAAG;AAAA,QAC3B,aAAa,MAAM,MAAM;AAAA,QACzB,cAAc,MAAM,MAAM;AAAA,MAC5B;AAAA,IAAA;AAIJ,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,GAAG,EAAE,CAAC,IAAI,OAAO,CAAC,GAAG,CAAC,eAAe,GAAG,SAAS;AAAA,QAC5D,SAAS;AAAA,UACP,MAAM,QAAQ;AAAA,UACd,gBAAgB,QAAQ;AAAA,UACxB,OAAO,QAAQ;AAAA,UACf,YAAY,QAAQ;AAAA,UACpB,YAAY,QAAQ;AAAA,UACpB,YAAY,QAAQ;AAAA,UACpB,YAAY,QAAQ;AAAA,UACpB,YAAY,QAAQ;AAAA,QACtB;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACC,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;"}
1	+ {"version":3,"file":"Container.js","sources":["../../../src/Container/Container.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport MuiContainer, {\n ContainerProps as MuiContainerProps,\n} from \"@mui/material/Container\";\nimport { useTheme } from \"@mui/material/styles\";\nimport useMediaQuery from \"@mui/material/useMediaQuery\";\nimport {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { staticClasses, useClasses } from \"./Container.styles\";\n\nexport { staticClasses as containerClasses };\n\nexport type HvContainerClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvContainerProps extends Omit<MuiContainerProps, \"classes\"> {\n /*\n The component used for the root node.\n * Either a string to use a DOM element or a component.\n /\n component?: React.ElementType;\n /\n Determine the max-width of the container.\n * The container width grows with the size of the screen.\n * Set to `false` to disable `maxWidth`.\n /\n maxWidth?: \"xs\" \| \"sm\" \| \"md\" \| \"lg\" \| \"xl\" \| false;\n /* If `true`, the left and right padding is removed. /\n disableGutters?: boolean;\n /\n Set the max-width to match the min-width of the current breakpoint.\n * This is useful if you'd prefer to design for a fixed set of sizes\n * instead of trying to accommodate a fully fluid viewport.\n * It's fluid by default.\n /\n fixed?: boolean;\n /* A Jss Object used to override or extend the styles applied to the component. /\n classes?: HvContainerClasses;\n}\n\n/* The container enables you to center your content horizontally and bound it to a specific breakpoint. */\nexport const HvContainer = forwardRef<HTMLDivElement, HvContainerProps>(\n (props, ref) => {\n const {\n maxWidth = false,\n classes: classesProp,\n className,\n fixed,\n disableGutters,\n ...others\n } = useDefaultProps(\"HvContainer\", props);\n\n const { classes, cx, css } = useClasses(classesProp);\n\n const muiTheme = useTheme();\n\n const upMd = useMediaQuery(muiTheme.breakpoints.up(\"md\"));\n\n const gutters = upMd\n ? {\n // Increases specificity\n [`&.${staticClasses.root}`]: {\n paddingLeft: theme.spacing(4),\n paddingRight: theme.spacing(4),\n },\n }\n : {\n // Increases specificity\n [`&.${staticClasses.root}`]: {\n paddingLeft: theme.space.sm,\n paddingRight: theme.space.sm,\n },\n };\n\n return (\n <MuiContainer\n className={cx({ [css(gutters)]: !disableGutters }, className)}\n classes={{\n root: classes.root,\n disableGutters: classes.disableGutters,\n fixed: classes.fixed,\n maxWidthXs: classes.maxWidthXs,\n maxWidthSm: classes.maxWidthSm,\n maxWidthMd: classes.maxWidthMd,\n maxWidthLg: classes.maxWidthLg,\n maxWidthXl: classes.maxWidthXl,\n }}\n ref={ref}\n maxWidth={maxWidth}\n fixed={fixed}\n disableGutters={disableGutters}\n {...others}\n />\n );\n },\n);\n"],"names":[],"mappings":";;;;;;;;AA4CO,MAAM,cAAc;AAAA,EACzB,CAAC,OAAO,QAAQ;AACR,UAAA;AAAA,MACJ,WAAW;AAAA,MACX,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IAAA,IACD,gBAAgB,eAAe,KAAK;AAExC,UAAM,EAAE,SAAS,IAAI,IAAI,IAAI,WAAW,WAAW;AAEnD,UAAM,WAAW;AAEjB,UAAM,OAAO,cAAc,SAAS,YAAY,GAAG,IAAI,CAAC;AAExD,UAAM,UAAU,OACZ;AAAA;AAAA,MAEE,CAAC,KAAK,cAAc,IAAI,EAAE,GAAG;AAAA,QAC3B,aAAa,MAAM,QAAQ,CAAC;AAAA,QAC5B,cAAc,MAAM,QAAQ,CAAC;AAAA,MAC/B;AAAA,IAAA,IAEF;AAAA;AAAA,MAEE,CAAC,KAAK,cAAc,IAAI,EAAE,GAAG;AAAA,QAC3B,aAAa,MAAM,MAAM;AAAA,QACzB,cAAc,MAAM,MAAM;AAAA,MAC5B;AAAA,IAAA;AAIJ,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,GAAG,EAAE,CAAC,IAAI,OAAO,CAAC,GAAG,CAAC,eAAe,GAAG,SAAS;AAAA,QAC5D,SAAS;AAAA,UACP,MAAM,QAAQ;AAAA,UACd,gBAAgB,QAAQ;AAAA,UACxB,OAAO,QAAQ;AAAA,UACf,YAAY,QAAQ;AAAA,UACpB,YAAY,QAAQ;AAAA,UACpB,YAAY,QAAQ;AAAA,UACpB,YAAY,QAAQ;AAAA,UACpB,YAAY,QAAQ;AAAA,QACtB;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACC,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;"}

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

@@ -1,4 +1,4 @@
-import { createClasses } from "@hitachivantara/uikit-react-shared";
+import { createClasses } from "@hitachivantara/uikit-react-utils";
 const { staticClasses, useClasses } = createClasses("HvContainer", {
   root: {},
   disableGutters: {},

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Container.styles.js","sources":["../../../src/Container/Container.styles.tsx"],"sourcesContent":["import { createClasses } from \"~~../~~utils~~/classes~~\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvContainer\", {\n root: {},\n disableGutters: {},\n fixed: {},\n maxWidthXs: {},\n maxWidthSm: {},\n maxWidthMd: {},\n maxWidthLg: {},\n maxWidthXl: {},\n});\n"],"names":[],"mappings":";AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,eAAe;AAAA,EACxE,MAAM,CAAC;AAAA,EACP,gBAAgB,CAAC;AAAA,EACjB,OAAO,CAAC;AAAA,EACR,YAAY,CAAC;AAAA,EACb,YAAY,CAAC;AAAA,EACb,YAAY,CAAC;AAAA,EACb,YAAY,CAAC;AAAA,EACb,YAAY,CAAC;AACf,CAAC;"}
1	+ {"version":3,"file":"Container.styles.js","sources":["../../../src/Container/Container.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvContainer\", {\n root: {},\n disableGutters: {},\n fixed: {},\n maxWidthXs: {},\n maxWidthSm: {},\n maxWidthMd: {},\n maxWidthLg: {},\n maxWidthXl: {},\n});\n"],"names":[],"mappings":";AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,eAAe;AAAA,EACxE,MAAM,CAAC;AAAA,EACP,gBAAgB,CAAC;AAAA,EACjB,OAAO,CAAC;AAAA,EACR,YAAY,CAAC;AAAA,EACb,YAAY,CAAC;AAAA,EACb,YAAY,CAAC;AAAA,EACb,YAAY,CAAC;AAAA,EACb,YAAY,CAAC;AACf,CAAC;"}

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

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Children } from "react";
+import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { useControlled } from "../hooks/useControlled.js";
-import { useDefaultProps } from "../hooks/useDefaultProps.js";
 import { setId } from "../utils/setId.js";
 import { HvControlsContextProvider } from "./context/ControlsContext.js";
 import { useClasses } from "./Controls.styles.js";

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Controls.js","sources":["../../../src/Controls/Controls.tsx"],"sourcesContent":["import { Children } from \"react\";\n\nimport { ~~HvButton~~ } from \"~~../Button~~\";\nimport { ~~useControlled~~ } from \"../~~hooks/useControlled~~\";\nimport { ~~useDefaultProps~~ } from \"../hooks/~~useDefaultProps~~\";\nimport { HvMultiButton } from \"../MultiButton\";\nimport { HvTableInstance } from \"../Table/hooks/useTable\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { ~~ExtractNames } from \"../utils/classes\";\nimport {~~ setId } from \"../utils/setId\";\nimport { HvControlsContextProvider } from \"./context/ControlsContext\";\nimport { staticClasses, useClasses } from \"./Controls.styles\";\n\nexport { staticClasses as controlsClasses };\n\nexport type HvControlsClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvControlsViewConfiguration extends Record<string, any> {\n id?: string;\n label?: string;\n icon?: React.ReactNode;\n}\n\nexport interface HvControlsProps extends HvBaseProps {\n /*\n An instance of useHvTable or useTable used to manage the data\n * if this is not provided data sorting and search must be handled externally\n /\n callbacks?: {\n setSortBy?: HvTableInstance[\"setSortBy\"];\n setGlobalFilter?: HvTableInstance[\"setGlobalFilter\"];\n };\n /\n Views configuration required for the view buttons\n /\n views?: HvControlsViewConfiguration[];\n /\n What view is selected by default\n /\n defaultView?: string;\n /\n Sets the selected view to be the one specified\n * if specified the component is in a controlled state and it won't change it state\n * unless specified externally\n /\n selectedView?: string;\n /\n Callback called when the view switcher button is pressed\n /\n onViewChange?: (\n event: React.MouseEvent<HTMLButtonElement>,\n id: string,\n ) => void;\n /\n if `true` the button to switch views is not rendered\n /\n hideViewSwitcher?: boolean;\n /* A Jss Object used to override or extend the styles applied to the component. /\n classes?: HvControlsClasses;\n}\n\nexport const HvControls = (props: HvControlsProps) => {\n const {\n id,\n className,\n classes: classesProp,\n views,\n callbacks,\n selectedView,\n defaultView,\n children,\n hideViewSwitcher = false,\n onViewChange,\n } = useDefaultProps(\"HvControls\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n const [currentView, setCurrentView] = useControlled(\n selectedView,\n defaultView,\n );\n\n const onViewChangeHandler = (\n evt: React.MouseEvent<HTMLButtonElement>,\n btnId: any,\n ) => {\n setCurrentView(btnId);\n onViewChange?.(evt, btnId);\n };\n\n const onSearchHandler = (value: any) => callbacks?.setGlobalFilter?.(value);\n const onSortHandler = (value: any) =>\n callbacks?.setSortBy?.([\n {\n id: value?.accessor,\n desc: value?.desc,\n },\n ]);\n\n const childrenCount = Children.count(children);\n const childrenArray = Children.toArray(children);\n\n const childrenIndexCut =\n childrenCount > 0 ? Math.round(childrenCount 0.5) : 0;\n const leftChildren = childrenArray.slice(0, childrenIndexCut);\n const rightChildren = childrenArray.slice(\n childrenIndexCut,\n childrenCount \|\| 0,\n );\n\n return (\n <div id={id} className={cx(classes.root, className)}>\n <HvControlsContextProvider\n value={{\n onSearch: onSearchHandler,\n onSort: onSortHandler,\n }}\n >\n <div className={cx(classes.section, classes.leftSection)}>\n {leftChildren}\n </div>\n <div className={cx(classes.section, classes.rightSection)}>\n {rightChildren}\n {views && !hideViewSwitcher && views?.length > 0 && (\n <HvMultiButton id={setId(id, \"view-multi-button\")}>\n {views.map(({ id: btnId, icon, ...others }) => (\n <HvButton\n id={btnId}\n key={btnId}\n icon\n selected={currentView === btnId}\n onClick={(evt) => onViewChangeHandler(evt, btnId)}\n {...others}\n >\n {icon}\n </HvButton>\n ))}\n </HvMultiButton>\n )}\n </div>\n </HvControlsContextProvider>\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;~~AA6Da~~,MAAA,aAAa,CAAC,UAA2B;AAC9C,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,mBAAmB;AAAA,IACnB;AAAA,EAAA,IACE,gBAAgB,cAAc,KAAK;AAEvC,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,QAAA,CAAC,aAAa,cAAc,IAAI;AAAA,IACpC;AAAA,IACA;AAAA,EAAA;AAGI,QAAA,sBAAsB,CAC1B,KACA,UACG;AACH,mBAAe,KAAK;AACpB,mBAAe,KAAK,KAAK;AAAA,EAAA;AAG3B,QAAM,kBAAkB,CAAC,UAAe,WAAW,kBAAkB,KAAK;AAC1E,QAAM,gBAAgB,CAAC,UACrB,WAAW,YAAY;AAAA,IACrB;AAAA,MACE,IAAI,OAAO;AAAA,MACX,MAAM,OAAO;AAAA,IACf;AAAA,EAAA,CACD;AAEG,QAAA,gBAAgB,SAAS,MAAM,QAAQ;AACvC,QAAA,gBAAgB,SAAS,QAAQ,QAAQ;AAE/C,QAAM,mBACJ,gBAAgB,IAAI,KAAK,MAAM,gBAAgB,GAAG,IAAI;AACxD,QAAM,eAAe,cAAc,MAAM,GAAG,gBAAgB;AAC5D,QAAM,gBAAgB,cAAc;AAAA,IAClC;AAAA,IACA,iBAAiB;AAAA,EAAA;AAIjB,SAAA,oBAAC,SAAI,IAAQ,WAAW,GAAG,QAAQ,MAAM,SAAS,GAChD,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAO;AAAA,QACL,UAAU;AAAA,QACV,QAAQ;AAAA,MACV;AAAA,MAEA,UAAA;AAAA,QAAC,oBAAA,OAAA,EAAI,WAAW,GAAG,QAAQ,SAAS,QAAQ,WAAW,GACpD,UACH,aAAA,CAAA;AAAA,QACA,qBAAC,SAAI,WAAW,GAAG,QAAQ,SAAS,QAAQ,YAAY,GACrD,UAAA;AAAA,UAAA;AAAA,UACA,SAAS,CAAC,oBAAoB,OAAO,SAAS,KAC7C,oBAAC,eAAc,EAAA,IAAI,MAAM,IAAI,mBAAmB,GAC7C,UAAA,MAAM,IAAI,CAAC,EAAE,IAAI,OAAO,MAAM,GAAG,OAAA,MAChC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAI;AAAA,cAEJ,MAAI;AAAA,cACJ,UAAU,gBAAgB;AAAA,cAC1B,SAAS,CAAC,QAAQ,oBAAoB,KAAK,KAAK;AAAA,cAC/C,GAAG;AAAA,cAEH,UAAA;AAAA,YAAA;AAAA,YANI;AAAA,UAQR,CAAA,GACH;AAAA,QAAA,GAEJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAEJ,EAAA,CAAA;AAEJ;"}
1	+ {"version":3,"file":"Controls.js","sources":["../../../src/Controls/Controls.tsx"],"sourcesContent":["import { Children } from \"react\";\nimport {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvButton } from \"../Button\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { HvMultiButton } from \"../MultiButton\";\nimport { HvTableInstance } from \"../Table/hooks/useTable\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { setId } from \"../utils/setId\";\nimport { HvControlsContextProvider } from \"./context/ControlsContext\";\nimport { staticClasses, useClasses } from \"./Controls.styles\";\n\nexport { staticClasses as controlsClasses };\n\nexport type HvControlsClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvControlsViewConfiguration extends Record<string, any> {\n id?: string;\n label?: string;\n icon?: React.ReactNode;\n}\n\nexport interface HvControlsProps extends HvBaseProps {\n /*\n An instance of useHvTable or useTable used to manage the data\n * if this is not provided data sorting and search must be handled externally\n /\n callbacks?: {\n setSortBy?: HvTableInstance[\"setSortBy\"];\n setGlobalFilter?: HvTableInstance[\"setGlobalFilter\"];\n };\n /\n Views configuration required for the view buttons\n /\n views?: HvControlsViewConfiguration[];\n /\n What view is selected by default\n /\n defaultView?: string;\n /\n Sets the selected view to be the one specified\n * if specified the component is in a controlled state and it won't change it state\n * unless specified externally\n /\n selectedView?: string;\n /\n Callback called when the view switcher button is pressed\n /\n onViewChange?: (\n event: React.MouseEvent<HTMLButtonElement>,\n id: string,\n ) => void;\n /\n if `true` the button to switch views is not rendered\n /\n hideViewSwitcher?: boolean;\n /* A Jss Object used to override or extend the styles applied to the component. /\n classes?: HvControlsClasses;\n}\n\nexport const HvControls = (props: HvControlsProps) => {\n const {\n id,\n className,\n classes: classesProp,\n views,\n callbacks,\n selectedView,\n defaultView,\n children,\n hideViewSwitcher = false,\n onViewChange,\n } = useDefaultProps(\"HvControls\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n const [currentView, setCurrentView] = useControlled(\n selectedView,\n defaultView,\n );\n\n const onViewChangeHandler = (\n evt: React.MouseEvent<HTMLButtonElement>,\n btnId: any,\n ) => {\n setCurrentView(btnId);\n onViewChange?.(evt, btnId);\n };\n\n const onSearchHandler = (value: any) => callbacks?.setGlobalFilter?.(value);\n const onSortHandler = (value: any) =>\n callbacks?.setSortBy?.([\n {\n id: value?.accessor,\n desc: value?.desc,\n },\n ]);\n\n const childrenCount = Children.count(children);\n const childrenArray = Children.toArray(children);\n\n const childrenIndexCut =\n childrenCount > 0 ? Math.round(childrenCount 0.5) : 0;\n const leftChildren = childrenArray.slice(0, childrenIndexCut);\n const rightChildren = childrenArray.slice(\n childrenIndexCut,\n childrenCount \|\| 0,\n );\n\n return (\n <div id={id} className={cx(classes.root, className)}>\n <HvControlsContextProvider\n value={{\n onSearch: onSearchHandler,\n onSort: onSortHandler,\n }}\n >\n <div className={cx(classes.section, classes.leftSection)}>\n {leftChildren}\n </div>\n <div className={cx(classes.section, classes.rightSection)}>\n {rightChildren}\n {views && !hideViewSwitcher && views?.length > 0 && (\n <HvMultiButton id={setId(id, \"view-multi-button\")}>\n {views.map(({ id: btnId, icon, ...others }) => (\n <HvButton\n id={btnId}\n key={btnId}\n icon\n selected={currentView === btnId}\n onClick={(evt) => onViewChangeHandler(evt, btnId)}\n {...others}\n >\n {icon}\n </HvButton>\n ))}\n </HvMultiButton>\n )}\n </div>\n </HvControlsContextProvider>\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;AA+Da,MAAA,aAAa,CAAC,UAA2B;AAC9C,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,mBAAmB;AAAA,IACnB;AAAA,EAAA,IACE,gBAAgB,cAAc,KAAK;AAEvC,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,QAAA,CAAC,aAAa,cAAc,IAAI;AAAA,IACpC;AAAA,IACA;AAAA,EAAA;AAGI,QAAA,sBAAsB,CAC1B,KACA,UACG;AACH,mBAAe,KAAK;AACpB,mBAAe,KAAK,KAAK;AAAA,EAAA;AAG3B,QAAM,kBAAkB,CAAC,UAAe,WAAW,kBAAkB,KAAK;AAC1E,QAAM,gBAAgB,CAAC,UACrB,WAAW,YAAY;AAAA,IACrB;AAAA,MACE,IAAI,OAAO;AAAA,MACX,MAAM,OAAO;AAAA,IACf;AAAA,EAAA,CACD;AAEG,QAAA,gBAAgB,SAAS,MAAM,QAAQ;AACvC,QAAA,gBAAgB,SAAS,QAAQ,QAAQ;AAE/C,QAAM,mBACJ,gBAAgB,IAAI,KAAK,MAAM,gBAAgB,GAAG,IAAI;AACxD,QAAM,eAAe,cAAc,MAAM,GAAG,gBAAgB;AAC5D,QAAM,gBAAgB,cAAc;AAAA,IAClC;AAAA,IACA,iBAAiB;AAAA,EAAA;AAIjB,SAAA,oBAAC,SAAI,IAAQ,WAAW,GAAG,QAAQ,MAAM,SAAS,GAChD,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAO;AAAA,QACL,UAAU;AAAA,QACV,QAAQ;AAAA,MACV;AAAA,MAEA,UAAA;AAAA,QAAC,oBAAA,OAAA,EAAI,WAAW,GAAG,QAAQ,SAAS,QAAQ,WAAW,GACpD,UACH,aAAA,CAAA;AAAA,QACA,qBAAC,SAAI,WAAW,GAAG,QAAQ,SAAS,QAAQ,YAAY,GACrD,UAAA;AAAA,UAAA;AAAA,UACA,SAAS,CAAC,oBAAoB,OAAO,SAAS,KAC7C,oBAAC,eAAc,EAAA,IAAI,MAAM,IAAI,mBAAmB,GAC7C,UAAA,MAAM,IAAI,CAAC,EAAE,IAAI,OAAO,MAAM,GAAG,OAAA,MAChC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAI;AAAA,cAEJ,MAAI;AAAA,cACJ,UAAU,gBAAgB;AAAA,cAC1B,SAAS,CAAC,QAAQ,oBAAoB,KAAK,KAAK;AAAA,cAC/C,GAAG;AAAA,cAEH,UAAA;AAAA,YAAA;AAAA,YANI;AAAA,UAQR,CAAA,GACH;AAAA,QAAA,GAEJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAEJ,EAAA,CAAA;AAEJ;"}

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

@@ -1,4 +1,4 @@
-import { createClasses } from "@hitachivantara/uikit-react-shared";
+import { createClasses } from "@hitachivantara/uikit-react-utils";
 const { staticClasses, useClasses } = createClasses("HvControls", {
   root: {
     display: "inline-flex",

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Controls.styles.js","sources":["../../../src/Controls/Controls.styles.tsx"],"sourcesContent":["import { createClasses } from \"~~../~~utils~~/classes~~\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvControls\", {\n root: {\n display: \"inline-flex\",\n width: \"100%\",\n justifyContent: \"space-between\",\n },\n section: { display: \"inline-flex\", alignItems: \"flex-end\", gap: 10 },\n rightSection: {},\n leftSection: {},\n});\n"],"names":[],"mappings":";AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,cAAc;AAAA,EACvE,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,OAAO;AAAA,IACP,gBAAgB;AAAA,EAClB;AAAA,EACA,SAAS,EAAE,SAAS,eAAe,YAAY,YAAY,KAAK,GAAG;AAAA,EACnE,cAAc,CAAC;AAAA,EACf,aAAa,CAAC;AAChB,CAAC;"}
1	+ {"version":3,"file":"Controls.styles.js","sources":["../../../src/Controls/Controls.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvControls\", {\n root: {\n display: \"inline-flex\",\n width: \"100%\",\n justifyContent: \"space-between\",\n },\n section: { display: \"inline-flex\", alignItems: \"flex-end\", gap: 10 },\n rightSection: {},\n leftSection: {},\n});\n"],"names":[],"mappings":";AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,cAAc;AAAA,EACvE,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,OAAO;AAAA,IACP,gBAAgB;AAAA,EAClB;AAAA,EACA,SAAS,EAAE,SAAS,eAAe,YAAY,YAAY,KAAK,GAAG;AAAA,EACnE,cAAc,CAAC;AAAA,EACf,aAAa,CAAC;AAChB,CAAC;"}

package/dist/esm/Controls/LeftControl/LeftControl.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"LeftControl.js","sources":["../../../../src/Controls/LeftControl/LeftControl.tsx"],"sourcesContent":["import { useContext } from \"react\";\n\nimport { ~~HvInput,~~ ~~HvInputProps~~ } from \"~~../../Input~~\";\nimport { ~~HvBaseProps~~ } from \"../../~~types/generic~~\";\nimport { ~~ExtractNames~~ } from \"../../~~utils~~/~~classes~~\";\nimport { setId } from \"../../utils/setId\";\nimport { HvControlsContext } from \"../context/ControlsContext\";\nimport { staticClasses, useClasses } from \"./LeftControl.styles\";\n\nexport { staticClasses as leftControlClasses };\n\nexport type HvLeftControlClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvLeftControlProps extends HvBaseProps {\n /** if `true` the hide sort by dropdown is not rendered /\n hideSearch?: boolean;\n /* placeholder of the input /\n placeholder?: string;\n /* Callback called when a search action occurs /\n onSearch?: (\n event: React.ChangeEvent<HTMLInputElement \| HTMLTextAreaElement>,\n value: string,\n ) => void;\n /* Extra props passed to input /\n searchProps?: HvInputProps;\n /* A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvLeftControlClasses;\n}\n\nexport const HvLeftControl = ({\n id,\n classes: classesProp,\n className,\n children,\n placeholder = \"Search\",\n onSearch,\n hideSearch = false,\n searchProps,\n ...others\n}: HvLeftControlProps) => {\n const { classes, cx } = useClasses(classesProp);\n\n const { onSearch: onSearchHandler } = useContext(HvControlsContext);\n\n const onChangeFilter: HvInputProps[\"onChange\"] = (e, value) => {\n onSearch?.(e, value);\n onSearchHandler?.(value);\n };\n\n return (\n <div id={id} className={cx(classes.root, className)} {...others}>\n {!hideSearch && (\n <HvInput\n id={setId(id, \"search-input\")}\n type=\"search\"\n placeholder={placeholder}\n onChange={onChangeFilter}\n {...searchProps}\n />\n )}\n {children}\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;;;AA6BO,MAAM,gBAAgB,CAAC;AAAA,EAC5B;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA,aAAa;AAAA,EACb;AAAA,EACA,GAAG;AACL,MAA0B;AACxB,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE9C,QAAM,EAAE,UAAU,gBAAgB,IAAI,WAAW,iBAAiB;AAE5D,QAAA,iBAA2C,CAAC,GAAG,UAAU;AAC7D,eAAW,GAAG,KAAK;AACnB,sBAAkB,KAAK;AAAA,EAAA;AAIvB,SAAA,qBAAC,OAAI,EAAA,IAAQ,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAI,GAAG,QACtD,UAAA;AAAA,IAAA,CAAC,cACA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAI,MAAM,IAAI,cAAc;AAAA,QAC5B,MAAK;AAAA,QACL;AAAA,QACA,UAAU;AAAA,QACT,GAAG;AAAA,MAAA;AAAA,IACN;AAAA,IAED;AAAA,EACH,EAAA,CAAA;AAEJ;"}
1	+ {"version":3,"file":"LeftControl.js","sources":["../../../../src/Controls/LeftControl/LeftControl.tsx"],"sourcesContent":["import { useContext } from \"react\";\nimport { type ExtractNames } from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvInput, HvInputProps } from \"../../Input\";\nimport { HvBaseProps } from \"../../types/generic\";\nimport { setId } from \"../../utils/setId\";\nimport { HvControlsContext } from \"../context/ControlsContext\";\nimport { staticClasses, useClasses } from \"./LeftControl.styles\";\n\nexport { staticClasses as leftControlClasses };\n\nexport type HvLeftControlClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvLeftControlProps extends HvBaseProps {\n /** if `true` the hide sort by dropdown is not rendered /\n hideSearch?: boolean;\n /* placeholder of the input /\n placeholder?: string;\n /* Callback called when a search action occurs /\n onSearch?: (\n event: React.ChangeEvent<HTMLInputElement \| HTMLTextAreaElement>,\n value: string,\n ) => void;\n /* Extra props passed to input /\n searchProps?: HvInputProps;\n /* A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvLeftControlClasses;\n}\n\nexport const HvLeftControl = ({\n id,\n classes: classesProp,\n className,\n children,\n placeholder = \"Search\",\n onSearch,\n hideSearch = false,\n searchProps,\n ...others\n}: HvLeftControlProps) => {\n const { classes, cx } = useClasses(classesProp);\n\n const { onSearch: onSearchHandler } = useContext(HvControlsContext);\n\n const onChangeFilter: HvInputProps[\"onChange\"] = (e, value) => {\n onSearch?.(e, value);\n onSearchHandler?.(value);\n };\n\n return (\n <div id={id} className={cx(classes.root, className)} {...others}>\n {!hideSearch && (\n <HvInput\n id={setId(id, \"search-input\")}\n type=\"search\"\n placeholder={placeholder}\n onChange={onChangeFilter}\n {...searchProps}\n />\n )}\n {children}\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;;;AA6BO,MAAM,gBAAgB,CAAC;AAAA,EAC5B;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA,aAAa;AAAA,EACb;AAAA,EACA,GAAG;AACL,MAA0B;AACxB,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE9C,QAAM,EAAE,UAAU,gBAAgB,IAAI,WAAW,iBAAiB;AAE5D,QAAA,iBAA2C,CAAC,GAAG,UAAU;AAC7D,eAAW,GAAG,KAAK;AACnB,sBAAkB,KAAK;AAAA,EAAA;AAIvB,SAAA,qBAAC,OAAI,EAAA,IAAQ,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAI,GAAG,QACtD,UAAA;AAAA,IAAA,CAAC,cACA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAI,MAAM,IAAI,cAAc;AAAA,QAC5B,MAAK;AAAA,QACL;AAAA,QACA,UAAU;AAAA,QACT,GAAG;AAAA,MAAA;AAAA,IACN;AAAA,IAED;AAAA,EACH,EAAA,CAAA;AAEJ;"}

package/dist/esm/Controls/LeftControl/LeftControl.styles.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { createClasses } from "@hitachivantara/uikit-react-shared";
+import { createClasses } from "@hitachivantara/uikit-react-utils";
 const { staticClasses, useClasses } = createClasses("HvLeftControl", {
   root: { display: "inline-flex", gap: 10 }
 });

package/dist/esm/Controls/LeftControl/LeftControl.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"LeftControl.styles.js","sources":["../../../../src/Controls/LeftControl/LeftControl.styles.tsx"],"sourcesContent":["import { createClasses } from \"~~../../~~utils~~/classes~~\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvLeftControl\", {\n root: { display: \"inline-flex\", gap: 10 },\n});\n"],"names":[],"mappings":";AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,iBAAiB;AAAA,EAC1E,MAAM,EAAE,SAAS,eAAe,KAAK,GAAG;AAC1C,CAAC;"}
1	+ {"version":3,"file":"LeftControl.styles.js","sources":["../../../../src/Controls/LeftControl/LeftControl.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvLeftControl\", {\n root: { display: \"inline-flex\", gap: 10 },\n});\n"],"names":[],"mappings":";AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,iBAAiB;AAAA,EAC1E,MAAM,EAAE,SAAS,eAAe,KAAK,GAAG;AAC1C,CAAC;"}

package/dist/esm/Controls/RightControl/RightControl.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RightControl.js","sources":["../../../../src/Controls/RightControl/RightControl.tsx"],"sourcesContent":["import { useContext, useState } from \"react\";\n\nimport { ~~HvDropdown,~~ ~~HvDropdownProps~~ } from \"~~../../Dropdown~~\";\nimport { ~~HvListValue~~ } from \"../../~~List~~\";\nimport { ~~HvBaseProps~~ } from \"../../~~types/generic~~\";\nimport { ~~ExtractNames~~ } from \"../../~~utils~~/~~classes~~\";\nimport { setId } from \"../../utils/setId\";\nimport { HvControlsContext } from \"../context/ControlsContext\";\nimport { staticClasses, useClasses } from \"./RightControl.styles\";\n\nexport { staticClasses as rightControlClasses };\n\nexport type HvRightControlClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvRightListControls extends HvListValue {\n accessor: string;\n desc: boolean;\n}\n\nexport interface HvRightControlProps extends HvBaseProps {\n /** if `true` the hide sort by dropdown is not rendered /\n hideSortBy?: boolean;\n /* options for the dropdown to sort /\n values?: HvRightListControls[];\n /* Callback called when a sort action occurs /\n onSort?: (selected: HvRightListControls \| undefined) => void;\n /* Extra props passed to dropdown /\n sortProps?: HvDropdownProps;\n /* A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvRightControlClasses;\n}\n\nexport const HvRightControl = ({\n id,\n classes: classesProp,\n className,\n children,\n values,\n onSort,\n hideSortBy = false,\n sortProps,\n ...others\n}: HvRightControlProps) => {\n const { classes, cx } = useClasses(classesProp);\n\n const [dropDownValues, setDropdownValues] = useState(values);\n\n const { onSort: onSortHandler } = useContext(HvControlsContext);\n\n const handleChangeSort: HvDropdownProps[\"onChange\"] = (value: any) => {\n onSort?.(value);\n onSortHandler?.(value);\n // this should be changed when dropdown changes his \"values\" behavior\n setDropdownValues((prevValues) =>\n prevValues?.map((prevValue) => ({\n ...prevValue,\n selected: prevValue.id === value.id,\n })),\n );\n };\n\n return (\n <div id={id} className={cx(classes.root, className)} {...others}>\n {!hideSortBy && (\n <HvDropdown\n id={setId(id, \"sort-by-dropdown\")}\n values={dropDownValues}\n className={classes.sortDropdown}\n onChange={handleChangeSort}\n singleSelectionToggle={false}\n {...sortProps}\n />\n )}\n {children}\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;;;AAgCO,MAAM,iBAAiB,CAAC;AAAA,EAC7B;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb;AAAA,EACA,GAAG;AACL,MAA2B;AACzB,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE9C,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS,MAAM;AAE3D,QAAM,EAAE,QAAQ,cAAc,IAAI,WAAW,iBAAiB;AAExD,QAAA,mBAAgD,CAAC,UAAe;AACpE,aAAS,KAAK;AACd,oBAAgB,KAAK;AAErB;AAAA,MAAkB,CAAC,eACjB,YAAY,IAAI,CAAC,eAAe;AAAA,QAC9B,GAAG;AAAA,QACH,UAAU,UAAU,OAAO,MAAM;AAAA,MAAA,EACjC;AAAA,IAAA;AAAA,EACJ;AAIA,SAAA,qBAAC,OAAI,EAAA,IAAQ,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAI,GAAG,QACtD,UAAA;AAAA,IAAA,CAAC,cACA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAI,MAAM,IAAI,kBAAkB;AAAA,QAChC,QAAQ;AAAA,QACR,WAAW,QAAQ;AAAA,QACnB,UAAU;AAAA,QACV,uBAAuB;AAAA,QACtB,GAAG;AAAA,MAAA;AAAA,IACN;AAAA,IAED;AAAA,EACH,EAAA,CAAA;AAEJ;"}
1	+ {"version":3,"file":"RightControl.js","sources":["../../../../src/Controls/RightControl/RightControl.tsx"],"sourcesContent":["import { useContext, useState } from \"react\";\nimport { type ExtractNames } from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvDropdown, HvDropdownProps } from \"../../Dropdown\";\nimport { HvListValue } from \"../../List\";\nimport { HvBaseProps } from \"../../types/generic\";\nimport { setId } from \"../../utils/setId\";\nimport { HvControlsContext } from \"../context/ControlsContext\";\nimport { staticClasses, useClasses } from \"./RightControl.styles\";\n\nexport { staticClasses as rightControlClasses };\n\nexport type HvRightControlClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvRightListControls extends HvListValue {\n accessor: string;\n desc: boolean;\n}\n\nexport interface HvRightControlProps extends HvBaseProps {\n /** if `true` the hide sort by dropdown is not rendered /\n hideSortBy?: boolean;\n /* options for the dropdown to sort /\n values?: HvRightListControls[];\n /* Callback called when a sort action occurs /\n onSort?: (selected: HvRightListControls \| undefined) => void;\n /* Extra props passed to dropdown /\n sortProps?: HvDropdownProps;\n /* A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvRightControlClasses;\n}\n\nexport const HvRightControl = ({\n id,\n classes: classesProp,\n className,\n children,\n values,\n onSort,\n hideSortBy = false,\n sortProps,\n ...others\n}: HvRightControlProps) => {\n const { classes, cx } = useClasses(classesProp);\n\n const [dropDownValues, setDropdownValues] = useState(values);\n\n const { onSort: onSortHandler } = useContext(HvControlsContext);\n\n const handleChangeSort: HvDropdownProps[\"onChange\"] = (value: any) => {\n onSort?.(value);\n onSortHandler?.(value);\n // this should be changed when dropdown changes his \"values\" behavior\n setDropdownValues((prevValues) =>\n prevValues?.map((prevValue) => ({\n ...prevValue,\n selected: prevValue.id === value.id,\n })),\n );\n };\n\n return (\n <div id={id} className={cx(classes.root, className)} {...others}>\n {!hideSortBy && (\n <HvDropdown\n id={setId(id, \"sort-by-dropdown\")}\n values={dropDownValues}\n className={classes.sortDropdown}\n onChange={handleChangeSort}\n singleSelectionToggle={false}\n {...sortProps}\n />\n )}\n {children}\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;;;AAgCO,MAAM,iBAAiB,CAAC;AAAA,EAC7B;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb;AAAA,EACA,GAAG;AACL,MAA2B;AACzB,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE9C,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS,MAAM;AAE3D,QAAM,EAAE,QAAQ,cAAc,IAAI,WAAW,iBAAiB;AAExD,QAAA,mBAAgD,CAAC,UAAe;AACpE,aAAS,KAAK;AACd,oBAAgB,KAAK;AAErB;AAAA,MAAkB,CAAC,eACjB,YAAY,IAAI,CAAC,eAAe;AAAA,QAC9B,GAAG;AAAA,QACH,UAAU,UAAU,OAAO,MAAM;AAAA,MAAA,EACjC;AAAA,IAAA;AAAA,EACJ;AAIA,SAAA,qBAAC,OAAI,EAAA,IAAQ,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAI,GAAG,QACtD,UAAA;AAAA,IAAA,CAAC,cACA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAI,MAAM,IAAI,kBAAkB;AAAA,QAChC,QAAQ;AAAA,QACR,WAAW,QAAQ;AAAA,QACnB,UAAU;AAAA,QACV,uBAAuB;AAAA,QACtB,GAAG;AAAA,MAAA;AAAA,IACN;AAAA,IAED;AAAA,EACH,EAAA,CAAA;AAEJ;"}

package/dist/esm/Controls/RightControl/RightControl.styles.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { createClasses } from "@hitachivantara/uikit-react-shared";
+import { createClasses } from "@hitachivantara/uikit-react-utils";
 const { staticClasses, useClasses } = createClasses("HvRightControl", {
   root: { display: "inline-flex", gap: 10 },
   sortDropdown: { minWidth: 200 }

package/dist/esm/Controls/RightControl/RightControl.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RightControl.styles.js","sources":["../../../../src/Controls/RightControl/RightControl.styles.tsx"],"sourcesContent":["import { createClasses } from \"~~../../~~utils~~/classes~~\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvRightControl\", {\n root: { display: \"inline-flex\", gap: 10 },\n sortDropdown: { minWidth: 200 },\n});\n"],"names":[],"mappings":";AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,kBAAkB;AAAA,EAC3E,MAAM,EAAE,SAAS,eAAe,KAAK,GAAG;AAAA,EACxC,cAAc,EAAE,UAAU,IAAI;AAChC,CAAC;"}
1	+ {"version":3,"file":"RightControl.styles.js","sources":["../../../../src/Controls/RightControl/RightControl.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvRightControl\", {\n root: { display: \"inline-flex\", gap: 10 },\n sortDropdown: { minWidth: 200 },\n});\n"],"names":[],"mappings":";AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,kBAAkB;AAAA,EAC3E,MAAM,EAAE,SAAS,eAAe,KAAK,GAAG;AAAA,EACxC,cAAc,EAAE,UAAU,IAAI;AAChC,CAAC;"}

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

@@ -2,9 +2,9 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef, useRef, useEffect } from "react";
 import { useForkRef } from "@mui/material/utils";
 import { Calendar } from "@hitachivantara/uikit-react-icons";
+import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { isDate } from "../Calendar/utils.js";
 import { useControlled } from "../hooks/useControlled.js";
-import { useDefaultProps } from "../hooks/useDefaultProps.js";
 import { useLabels } from "../hooks/useLabels.js";
 import { useUniqueId } from "../hooks/useUniqueId.js";
 import { setId } from "../utils/setId.js";
@@ -22,7 +22,6 @@ import { HvInfoMessage } from "../Forms/InfoMessage/InfoMessage.js";
 import { HvBaseDropdown } from "../BaseDropdown/BaseDropdown.js";
 import { HvWarningText } from "../Forms/WarningText/WarningText.js";
 import { HvActionBar } from "../ActionBar/ActionBar.js";
-import { HvTypography } from "../Typography/Typography.js";
 const DEFAULT_LABELS = {
   /** Apply button label. */
   applyLabel: "Apply",
@@ -232,17 +231,8 @@ const HvDatePicker = forwardRef(
         )
       ] })
     ] });
-    const renderInput = (dateString) => {
-      return /* @__PURE__ */ jsx(
-        HvTypography,
-        {
-          className: cx(classes.inputText, { [classes.dateText]: dateString }),
-          variant: "label",
-          children: dateString || placeholder || ""
-        }
-      );
-    };
     const dateValue = rangeMode ? { startDate, endDate } : startDate;
+    const dateString = getDateLabel(dateValue, rangeMode, locale);
     const hasLabel = label != null;
     const hasDescription = description != null;
     const canShowError = ariaErrorMessage == null && (status !== void 0 && statusMessage !== void 0 || status === void 0 && required);
@@ -291,7 +281,10 @@ const HvDatePicker = forwardRef(
                 root: classes.dropdown,
                 panel: classes.panel,
                 header: cx({ [classes.dropdownHeaderInvalid]: isStateInvalid }),
-                headerOpen: classes.dropdownHeaderOpen
+                headerOpen: classes.dropdownHeaderOpen,
+                placeholder: cx(classes.inputText, {
+                  [classes.dateText]: dateString
+                })
               },
               readOnly,
               disabled,
@@ -302,14 +295,8 @@ const HvDatePicker = forwardRef(
               onToggle: handleToggle,
               onClickOutside: handleCalendarClose,
               onContainerCreation: focusOnContainer,
-              placeholder: renderInput(getDateLabel(dateValue, rangeMode, locale)),
-              adornment: /* @__PURE__ */ jsx(
-                Calendar,
-                {
-                  className: classes.icon,
-                  color: disabled ? "secondary_80" : void 0
-                }
-              ),
+              placeholder: dateString || placeholder || "",
+              adornment: /* @__PURE__ */ jsx(Calendar, { className: classes.icon, color: "currentcolor" }),
               popperProps: {
                 modifiers: [
                   { name: "preventOverflow", enabled: escapeWithReference }