@hitachivantara/uikit-react-core 5.14.1 → 5.15.0

package/dist/cjs/components/CheckBoxGroup/CheckBoxGroup.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"CheckBoxGroup.cjs","sources":["../../../../src/components/CheckBoxGroup/CheckBoxGroup.tsx"],"sourcesContent":["import { HvBaseProps } from \"@core/types\";\nimport { clsx } from \"clsx\";\nimport { useControlled, useUniqueId } from \"@core/hooks\";\nimport { multiSelectionEventHandler, setId } from \"@core/utils\";\nimport { HvCheckBox, HvInfoMessage, HvWarningText } from \"@core/components\";\nimport { Children, cloneElement, useCallback, useMemo, useRef } from \"react\";\nimport {\n  StyledFormElement,\n  StyledGroupContainer,\n  StyledLabel,\n} from \"./CheckBoxGroup.styles\";\nimport { HvFormStatus } from \"../Forms\";\nimport checkBoxGroupClasses, {\n  HvCheckBoxGroupClasses,\n} from \"./checkBoxGroupClasses\";\n\nconst computeSelectAllState = (selected, total) => {\n  if (selected === 0) {\n    return \"none\";\n  }\n\n  if (selected === total) {\n    return \"all\";\n  }\n\n  return \"some\";\n};\n\nconst getValueFromSelectedChildren = (children: React.ReactNode) => {\n  const selectedValues = Children.toArray(children)\n    .map((child: any) => {\n      const childIsControlled = child?.props?.checked !== undefined;\n      const childIsSelected = childIsControlled\n        ? child?.props?.checked\n        : child?.props?.defaultChecked;\n\n      return childIsSelected ? child?.props?.value : undefined;\n    })\n    .filter((v) => v !== undefined);\n\n  return selectedValues;\n};\n\nexport interface HvCheckBoxGroupProps\n  extends HvBaseProps<HTMLDivElement, \"onChange\"> {\n  /**\n   * The form element name.\n   *\n   * It is propagated to the children checkboxes, unless they already have one.\n   */\n  name?: string;\n  /**\n   * The value of the form element. An array of values represented in the child checkboxes.\n   *\n   * When defined the checkbox group state becomes controlled.\n   */\n  value?: any[];\n  /**\n   * When uncontrolled, defines the initial value.\n   */\n  defaultValue?: any[];\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  /**\n   * Provide additional descriptive text for the form element.\n   */\n  description?: React.ReactNode;\n  /**\n   * Indicates that the form element is disabled.\n   * If `true` the state is propagated to the children checkboxes.\n   */\n  disabled?: boolean;\n  /**\n   * Indicates that the form element is not editable.\n   * If `true` the state is propagated to the children checkboxes.\n   */\n  readOnly?: boolean;\n  /**\n   * Indicates that user input is required on the form element.\n   */\n  required?: boolean;\n  /**\n   * The status of the form element.\n   *\n   * Valid is correct, invalid is incorrect and standBy means no validations have run.\n   *\n   * When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n   * or \"invalid\" after any change to the state.\n   */\n  status?: HvFormStatus;\n  /**\n   * The error message to show when the validation status is \"invalid\".\n   *\n   * Defaults to \"Required\" when the status is uncontrolled and no `aria-errormessage` is provided.\n   */\n  statusMessage?: React.ReactNode;\n  /**\n   * The callback fired when the value changes.\n   */\n  onChange?: (event: React.ChangeEvent<HTMLInputElement>, value: any[]) => void;\n  /**\n   * Indicates whether the checkbox group's orientation is horizontal or vertical.\n   *\n   * Defaults to vertical.\n   */\n  orientation?: \"vertical\" | \"horizontal\";\n  /**\n   * Indicates if an additional select all checkbox should be shown.\n   */\n  showSelectAll?: boolean;\n  /**\n   * The label of the select all checkbox. Defaults to \"All\".\n   */\n  selectAllLabel?: string;\n  /**\n   * Custom label for select all checkbox conjunction\n   */\n  selectAllConjunctionLabel?: string;\n  /**\n   * A Jss Object used to override or extend the component styles applied.\n   */\n  classes?: HvCheckBoxGroupClasses;\n}\n\n/**\n * A checkbox group is a type of selection list that allows the user to select multiple options through the use of checkboxes.\n */\nexport const HvCheckBoxGroup = ({\n  id,\n  classes,\n  className,\n  children,\n  name,\n  label,\n  description,\n  status,\n  statusMessage,\n  defaultValue,\n  value: valueProp,\n  required = false,\n  readOnly = false,\n  disabled = false,\n  showSelectAll = false,\n  orientation = \"vertical\",\n  selectAllLabel = \"All\",\n  selectAllConjunctionLabel = \"/\",\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledBy,\n  \"aria-describedby\": ariaDescribedBy,\n  \"aria-errormessage\": ariaErrorMessage,\n  onChange,\n  ...others\n}: HvCheckBoxGroupProps) => {\n  const [value, setValue] = useControlled(\n    valueProp,\n    defaultValue !== undefined\n      ? defaultValue\n      : // When uncontrolled and no default value is given,\n        // extract the initial selected values from the children own state\n        () => getValueFromSelectedChildren(children)\n  );\n\n  const [validationState, setValidationState] = useControlled(\n    status,\n    \"standBy\"\n  );\n\n  const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n  const elementId = useUniqueId(id, \"hvcheckboxgroup\");\n\n  const selectionAnchor = useRef(undefined);\n\n  const [allValues, selectedState, selectedCount] = useMemo(() => {\n    const childValues: any[] = [];\n    const childSelectedState: boolean[] = [];\n    let childSelectedCounter = 0;\n\n    Children.toArray(children).forEach((child: any, i: number) => {\n      const childValue = child?.props?.value;\n      const childIsSelected = value.indexOf(childValue) !== -1;\n\n      childValues[i] = childValue;\n      childSelectedState[i] = childIsSelected;\n\n      if (childIsSelected) {\n        childSelectedCounter += 1;\n      }\n    });\n\n    return [childValues, childSelectedState, childSelectedCounter];\n  }, [children, value]);\n\n  const selectAllState = computeSelectAllState(\n    value.length,\n    selectedState.length\n  );\n\n  const onChildChangeInterceptor = useCallback(\n    (\n      index: number,\n      childOnChange: (\n        event: React.ChangeEvent<HTMLInputElement>,\n        isChecked: boolean\n      ) => void,\n      event: React.ChangeEvent<HTMLInputElement>,\n      isChecked: boolean\n    ) => {\n      const newValue = multiSelectionEventHandler(\n        event,\n        index,\n        selectionAnchor,\n        allValues,\n        selectedState,\n        isChecked\n      );\n\n      childOnChange?.(event, isChecked);\n\n      onChange?.(event, newValue);\n\n      setValue(() => {\n        // This will only run if uncontrolled\n\n        if (required && newValue.length === 0) {\n          setValidationState(\"invalid\");\n        } else {\n          setValidationState(\"valid\");\n        }\n\n        return newValue;\n      });\n    },\n    [allValues, onChange, required, selectedState, setValidationState, setValue]\n  );\n\n  const modifiedChildren = useMemo(() => {\n    return Children.map(children, (child: any, i: number) => {\n      const childIsSelected = selectedState[i];\n\n      return cloneElement(child, {\n        checked: childIsSelected,\n        name: child?.props?.name || name,\n        onChange: (\n          event: React.ChangeEvent<HTMLInputElement>,\n          isChecked: boolean\n        ) =>\n          onChildChangeInterceptor(i, child?.props?.onChange, event, isChecked),\n        disabled: disabled || child?.props?.disabled,\n        readOnly: readOnly || child?.props?.readOnly,\n      });\n    });\n  }, [\n    children,\n    disabled,\n    name,\n    onChildChangeInterceptor,\n    readOnly,\n    selectedState,\n  ]);\n\n  const handleSelectAll = (\n    event: React.ChangeEvent<HTMLInputElement>,\n    selectAllChecked: boolean\n  ) => {\n    let newValue: any[];\n    if (selectAllChecked) {\n      newValue = [...allValues];\n    } else {\n      newValue = [];\n    }\n\n    onChange?.(event, newValue);\n\n    setValue(() => {\n      // This will only run if uncontrolled\n      if (required && newValue.length === 0) {\n        setValidationState(\"invalid\");\n      } else {\n        setValidationState(\"valid\");\n      }\n\n      return newValue;\n    });\n  };\n\n  const selectAllLabelComponent =\n    selectedCount === 0 ? (\n      <>\n        <b>{selectAllLabel}</b>\n        {` (${Children.toArray(children).length})`}\n      </>\n    ) : (\n      <>\n        <b>{selectedCount}</b>\n        {` ${selectAllConjunctionLabel} ${Children.toArray(children).length}`}\n      </>\n    );\n\n  // The error message area will only be created if:\n  //   - an external element that provides an error message isn't identified via aria-errormessage AND\n  //   - both status and statusMessage properties are being controlled OR\n  //   - status is uncontrolled and required is true\n  const canShowError =\n    ariaErrorMessage == null &&\n    ((status !== undefined && statusMessage !== undefined) ||\n      (status === undefined && required));\n\n  const errorMessageId = canShowError\n    ? setId(elementId, \"error\")\n    : ariaErrorMessage;\n\n  return (\n    <StyledFormElement\n      id={id}\n      name={name}\n      status={validationState}\n      disabled={disabled}\n      required={required}\n      readOnly={readOnly}\n      className={clsx(className, classes?.root, checkBoxGroupClasses.root)}\n    >\n      {label && (\n        <StyledLabel\n          id={setId(elementId, \"label\")}\n          label={label}\n          className={clsx(classes?.label, checkBoxGroupClasses.label)}\n        />\n      )}\n\n      {description && (\n        <HvInfoMessage id={setId(elementId, \"description\")}>\n          {description}\n        </HvInfoMessage>\n      )}\n\n      <StyledGroupContainer\n        role=\"group\"\n        aria-label={ariaLabel}\n        aria-labelledby={\n          ariaLabelledBy || (label && setId(elementId, \"label\")) || undefined\n        }\n        aria-disabled={disabled ? true : undefined}\n        aria-invalid={validationState === \"invalid\" ? true : undefined}\n        aria-errormessage={\n          validationState === \"invalid\" ? errorMessageId : undefined\n        }\n        aria-describedby={\n          [description && setId(elementId, \"description\"), ariaDescribedBy]\n            .join(\" \")\n            .trim() || undefined\n        }\n        className={clsx(\n          classes?.group,\n          checkBoxGroupClasses.group,\n          orientation === \"vertical\" &&\n            clsx(classes?.vertical, checkBoxGroupClasses.vertical),\n          orientation === \"horizontal\" &&\n            clsx(classes?.horizontal, checkBoxGroupClasses.horizontal),\n          validationState === \"invalid\" &&\n            clsx(classes?.invalid, checkBoxGroupClasses.invalid)\n        )}\n        $vertical={orientation === \"vertical\"}\n        $horizontal={orientation === \"horizontal\"}\n        $invalid={validationState === \"invalid\"}\n        {...others}\n      >\n        {showSelectAll && (\n          <HvCheckBox\n            checked={selectAllState === \"all\"}\n            indeterminate={selectAllState === \"some\"}\n            label={selectAllLabelComponent}\n            disabled={disabled}\n            readOnly={readOnly}\n            className={clsx(classes?.selectAll, checkBoxGroupClasses.selectAll)}\n            onChange={handleSelectAll}\n          />\n        )}\n        {modifiedChildren}\n      </StyledGroupContainer>\n\n      {canShowError && (\n        <HvWarningText\n          id={setId(elementId, \"error\")}\n          disableBorder\n          className={clsx(classes?.error, checkBoxGroupClasses.error)}\n        >\n          {validationMessage}\n        </HvWarningText>\n      )}\n    </StyledFormElement>\n  );\n};\n"],"names":["computeSelectAllState","selected","total","getValueFromSelectedChildren","children","selectedValues","Children","toArray","map","child","childIsControlled","props","checked","undefined","childIsSelected","defaultChecked","value","filter","v","HvCheckBoxGroup","id","classes","className","name","label","description","status","statusMessage","defaultValue","valueProp","required","readOnly","disabled","showSelectAll","orientation","selectAllLabel","selectAllConjunctionLabel","ariaLabel","ariaLabelledBy","ariaDescribedBy","ariaErrorMessage","onChange","others","setValue","useControlled","validationState","setValidationState","validationMessage","elementId","useUniqueId","selectionAnchor","useRef","allValues","selectedState","selectedCount","useMemo","childValues","childSelectedState","childSelectedCounter","forEach","i","childValue","indexOf","selectAllState","length","onChildChangeInterceptor","useCallback","index","childOnChange","event","isChecked","newValue","multiSelectionEventHandler","modifiedChildren","cloneElement","handleSelectAll","selectAllChecked","selectAllLabelComponent","_jsxs","_Fragment","_jsx","canShowError","errorMessageId","setId","StyledFormElement","clsx","root","checkBoxGroupClasses","StyledLabel","HvInfoMessage","StyledGroupContainer","role","join","trim","group","vertical","horizontal","invalid","$vertical","$horizontal","$invalid","HvCheckBox","indeterminate","selectAll","HvWarningText","disableBorder","error"],"mappings":"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"}
+{"version":3,"file":"CheckBoxGroup.cjs","sources":["../../../../src/components/CheckBoxGroup/CheckBoxGroup.tsx"],"sourcesContent":["import { HvBaseProps } from \"@core/types\";\nimport { clsx } from \"clsx\";\nimport { useControlled, useUniqueId } from \"@core/hooks\";\nimport { multiSelectionEventHandler, setId } from \"@core/utils\";\nimport { HvCheckBox, HvInfoMessage, HvWarningText } from \"@core/components\";\nimport { Children, cloneElement, useCallback, useMemo, useRef } from \"react\";\nimport {\n  StyledFormElement,\n  StyledGroupContainer,\n  StyledLabel,\n} from \"./CheckBoxGroup.styles\";\nimport { HvFormStatus } from \"../Forms\";\nimport checkBoxGroupClasses, {\n  HvCheckBoxGroupClasses,\n} from \"./checkBoxGroupClasses\";\n\nconst computeSelectAllState = (selected, total) => {\n  if (selected === 0) {\n    return \"none\";\n  }\n\n  if (selected === total) {\n    return \"all\";\n  }\n\n  return \"some\";\n};\n\nconst getValueFromSelectedChildren = (children: React.ReactNode) => {\n  const selectedValues = Children.toArray(children)\n    .map((child: any) => {\n      const childIsControlled = child?.props?.checked !== undefined;\n      const childIsSelected = childIsControlled\n        ? child?.props?.checked\n        : child?.props?.defaultChecked;\n\n      return childIsSelected ? child?.props?.value : undefined;\n    })\n    .filter((v) => v !== undefined);\n\n  return selectedValues;\n};\n\nexport interface HvCheckBoxGroupProps\n  extends HvBaseProps<HTMLDivElement, \"onChange\"> {\n  /**\n   * The form element name.\n   *\n   * It is propagated to the children checkboxes, unless they already have one.\n   */\n  name?: string;\n  /**\n   * The value of the form element. An array of values represented in the child checkboxes.\n   *\n   * When defined the checkbox group state becomes controlled.\n   */\n  value?: any[];\n  /**\n   * When uncontrolled, defines the initial value.\n   */\n  defaultValue?: any[];\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  /**\n   * Provide additional descriptive text for the form element.\n   */\n  description?: React.ReactNode;\n  /**\n   * Indicates that the form element is disabled.\n   * If `true` the state is propagated to the children checkboxes.\n   */\n  disabled?: boolean;\n  /**\n   * Indicates that the form element is not editable.\n   * If `true` the state is propagated to the children checkboxes.\n   */\n  readOnly?: boolean;\n  /**\n   * Indicates that user input is required on the form element.\n   */\n  required?: boolean;\n  /**\n   * The status of the form element.\n   *\n   * Valid is correct, invalid is incorrect and standBy means no validations have run.\n   *\n   * When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n   * or \"invalid\" after any change to the state.\n   */\n  status?: HvFormStatus;\n  /**\n   * The error message to show when the validation status is \"invalid\".\n   *\n   * Defaults to \"Required\" when the status is uncontrolled and no `aria-errormessage` is provided.\n   */\n  statusMessage?: React.ReactNode;\n  /**\n   * The callback fired when the value changes.\n   */\n  onChange?: (event: React.ChangeEvent<HTMLInputElement>, value: any[]) => void;\n  /**\n   * Indicates whether the checkbox group's orientation is horizontal or vertical.\n   *\n   * Defaults to vertical.\n   */\n  orientation?: \"vertical\" | \"horizontal\";\n  /**\n   * Indicates if an additional select all checkbox should be shown.\n   */\n  showSelectAll?: boolean;\n  /**\n   * The label of the select all checkbox. Defaults to \"All\".\n   */\n  selectAllLabel?: string;\n  /**\n   * Custom label for select all checkbox conjunction\n   */\n  selectAllConjunctionLabel?: string;\n  /**\n   * A Jss Object used to override or extend the component styles applied.\n   */\n  classes?: HvCheckBoxGroupClasses;\n}\n\n/**\n * A checkbox group is a type of selection list that allows the user to select multiple options through the use of checkboxes.\n */\nexport const HvCheckBoxGroup = ({\n  id,\n  classes,\n  className,\n  children,\n  name,\n  label,\n  description,\n  status,\n  statusMessage,\n  defaultValue,\n  value: valueProp,\n  required = false,\n  readOnly = false,\n  disabled = false,\n  showSelectAll = false,\n  orientation = \"vertical\",\n  selectAllLabel = \"All\",\n  selectAllConjunctionLabel = \"/\",\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledBy,\n  \"aria-describedby\": ariaDescribedBy,\n  \"aria-errormessage\": ariaErrorMessage,\n  onChange,\n  ...others\n}: HvCheckBoxGroupProps) => {\n  const [value, setValue] = useControlled(\n    valueProp,\n    defaultValue !== undefined\n      ? defaultValue\n      : // When uncontrolled and no default value is given,\n        // extract the initial selected values from the children own state\n        () => getValueFromSelectedChildren(children)\n  );\n\n  const [validationState, setValidationState] = useControlled(\n    status,\n    \"standBy\"\n  );\n\n  const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n  const elementId = useUniqueId(id, \"hvcheckboxgroup\");\n\n  const selectionAnchor = useRef(undefined);\n\n  const [allValues, selectedState, selectedCount] = useMemo(() => {\n    const childValues: any[] = [];\n    const childSelectedState: boolean[] = [];\n    let childSelectedCounter = 0;\n\n    Children.toArray(children).forEach((child: any, i: number) => {\n      const childValue = child?.props?.value;\n      const childIsSelected = value.indexOf(childValue) !== -1;\n\n      childValues[i] = childValue;\n      childSelectedState[i] = childIsSelected;\n\n      if (childIsSelected) {\n        childSelectedCounter += 1;\n      }\n    });\n\n    return [childValues, childSelectedState, childSelectedCounter];\n  }, [children, value]);\n\n  const selectAllState = computeSelectAllState(\n    value.length,\n    selectedState.length\n  );\n\n  const onChildChangeInterceptor = useCallback(\n    (\n      index: number,\n      childOnChange: (\n        event: React.ChangeEvent<HTMLInputElement>,\n        isChecked: boolean\n      ) => void,\n      event: React.ChangeEvent<HTMLInputElement>,\n      isChecked: boolean\n    ) => {\n      const newValue = multiSelectionEventHandler(\n        event,\n        index,\n        selectionAnchor,\n        allValues,\n        selectedState,\n        isChecked\n      );\n\n      childOnChange?.(event, isChecked);\n\n      onChange?.(event, newValue);\n\n      setValue(() => {\n        // This will only run if uncontrolled\n\n        if (required && newValue.length === 0) {\n          setValidationState(\"invalid\");\n        } else {\n          setValidationState(\"valid\");\n        }\n\n        return newValue;\n      });\n    },\n    [allValues, onChange, required, selectedState, setValidationState, setValue]\n  );\n\n  const modifiedChildren = useMemo(() => {\n    return Children.map(children, (child: any, i: number) => {\n      const childIsSelected = selectedState[i];\n\n      return cloneElement(child, {\n        checked: childIsSelected,\n        name: child?.props?.name || name,\n        onChange: (\n          event: React.ChangeEvent<HTMLInputElement>,\n          isChecked: boolean\n        ) =>\n          onChildChangeInterceptor(i, child?.props?.onChange, event, isChecked),\n        disabled: disabled || child?.props?.disabled,\n        readOnly: readOnly || child?.props?.readOnly,\n      });\n    });\n  }, [\n    children,\n    disabled,\n    name,\n    onChildChangeInterceptor,\n    readOnly,\n    selectedState,\n  ]);\n\n  const handleSelectAll = (\n    event: React.ChangeEvent<HTMLInputElement>,\n    selectAllChecked: boolean\n  ) => {\n    let newValue: any[];\n    if (selectAllChecked) {\n      newValue = [...allValues];\n    } else {\n      newValue = [];\n    }\n\n    onChange?.(event, newValue);\n\n    setValue(() => {\n      // This will only run if uncontrolled\n      if (required && newValue.length === 0) {\n        setValidationState(\"invalid\");\n      } else {\n        setValidationState(\"valid\");\n      }\n\n      return newValue;\n    });\n  };\n\n  const selectAllLabelComponent =\n    selectedCount === 0 ? (\n      <>\n        <b>{selectAllLabel}</b>\n        {` (${Children.toArray(children).length})`}\n      </>\n    ) : (\n      <>\n        <b>{selectedCount}</b>\n        {` ${selectAllConjunctionLabel} ${Children.toArray(children).length}`}\n      </>\n    );\n\n  // The error message area will only be created if:\n  //   - an external element that provides an error message isn't identified via aria-errormessage AND\n  //   - both status and statusMessage properties are being controlled OR\n  //   - status is uncontrolled and required is true\n  const canShowError =\n    ariaErrorMessage == null &&\n    ((status !== undefined && statusMessage !== undefined) ||\n      (status === undefined && required));\n\n  const errorMessageId = canShowError\n    ? setId(elementId, \"error\")\n    : ariaErrorMessage;\n\n  return (\n    <StyledFormElement\n      id={id}\n      name={name}\n      status={validationState}\n      disabled={disabled}\n      required={required}\n      readOnly={readOnly}\n      className={clsx(className, classes?.root, checkBoxGroupClasses.root)}\n    >\n      {label && (\n        <StyledLabel\n          id={setId(elementId, \"label\")}\n          label={label}\n          className={clsx(classes?.label, checkBoxGroupClasses.label)}\n        />\n      )}\n\n      {description && (\n        <HvInfoMessage id={setId(elementId, \"description\")}>\n          {description}\n        </HvInfoMessage>\n      )}\n\n      <StyledGroupContainer\n        role=\"group\"\n        aria-label={ariaLabel}\n        aria-labelledby={\n          ariaLabelledBy || (label && setId(elementId, \"label\")) || undefined\n        }\n        aria-disabled={disabled ? true : undefined}\n        aria-invalid={validationState === \"invalid\" ? true : undefined}\n        aria-errormessage={\n          validationState === \"invalid\" ? errorMessageId : undefined\n        }\n        aria-describedby={\n          [description && setId(elementId, \"description\"), ariaDescribedBy]\n            .join(\" \")\n            .trim() || undefined\n        }\n        className={clsx(\n          classes?.group,\n          checkBoxGroupClasses.group,\n          orientation === \"vertical\" &&\n            clsx(classes?.vertical, checkBoxGroupClasses.vertical),\n          orientation === \"horizontal\" &&\n            clsx(classes?.horizontal, checkBoxGroupClasses.horizontal),\n          validationState === \"invalid\" &&\n            clsx(classes?.invalid, checkBoxGroupClasses.invalid)\n        )}\n        $vertical={orientation === \"vertical\"}\n        $horizontal={orientation === \"horizontal\"}\n        $invalid={validationState === \"invalid\"}\n        {...others}\n      >\n        {showSelectAll && (\n          <HvCheckBox\n            checked={selectAllState === \"all\"}\n            indeterminate={selectAllState === \"some\"}\n            label={selectAllLabelComponent}\n            disabled={disabled}\n            readOnly={readOnly}\n            className={clsx(classes?.selectAll, checkBoxGroupClasses.selectAll)}\n            onChange={handleSelectAll}\n          />\n        )}\n        {modifiedChildren}\n      </StyledGroupContainer>\n\n      {canShowError && (\n        <HvWarningText\n          id={setId(elementId, \"error\")}\n          disableBorder\n          className={clsx(classes?.error, checkBoxGroupClasses.error)}\n        >\n          {validationMessage}\n        </HvWarningText>\n      )}\n    </StyledFormElement>\n  );\n};\n"],"names":["computeSelectAllState","selected","total","getValueFromSelectedChildren","children","selectedValues","Children","toArray","map","child","childIsControlled","props","checked","undefined","childIsSelected","defaultChecked","value","filter","v","HvCheckBoxGroup","id","classes","className","name","label","description","status","statusMessage","defaultValue","valueProp","required","readOnly","disabled","showSelectAll","orientation","selectAllLabel","selectAllConjunctionLabel","ariaLabel","ariaLabelledBy","ariaDescribedBy","ariaErrorMessage","onChange","others","setValue","useControlled","validationState","setValidationState","validationMessage","elementId","useUniqueId","selectionAnchor","useRef","allValues","selectedState","selectedCount","useMemo","childValues","childSelectedState","childSelectedCounter","forEach","i","childValue","indexOf","selectAllState","length","onChildChangeInterceptor","useCallback","index","childOnChange","event","isChecked","newValue","multiSelectionEventHandler","modifiedChildren","cloneElement","handleSelectAll","selectAllChecked","selectAllLabelComponent","_jsxs","_Fragment","_jsx","canShowError","errorMessageId","setId","StyledFormElement","clsx","root","checkBoxGroupClasses","StyledLabel","HvInfoMessage","StyledGroupContainer","role","join","trim","group","vertical","horizontal","invalid","$vertical","$horizontal","$invalid","HvCheckBox","indeterminate","selectAll","HvWarningText","disableBorder","error"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"CheckBoxGroup.styles.cjs","sources":["../../../../src/components/CheckBoxGroup/CheckBoxGroup.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { HvFormElement, HvFormElementProps, HvLabel } from \"@core/components\";\nimport { transientOptions } from \"@core/utils/transientOptions\";\n\nexport const StyledFormElement = styled((props: HvFormElementProps) => (\n  <HvFormElement {...props} />\n))({\n  display: \"inline-block\",\n  padding: 0,\n  margin: 0,\n  overflow: \"hidden\",\n  verticalAlign: \"top\",\n});\n\nexport const StyledLabel = styled(HvLabel)({\n  marginBottom: theme.space.xs,\n});\n\nexport const StyledGroupContainer = styled(\n  \"div\",\n  transientOptions\n)(\n  ({\n    $vertical,\n    $horizontal,\n    $invalid,\n  }: {\n    $vertical: boolean;\n    $horizontal: boolean;\n    $invalid: boolean;\n  }) => ({\n    display: \"flex\",\n\n    ...($vertical && {\n      flexDirection: \"column\",\n\n      // Prevent the focus ring to be hidden by sibling hover background\n      \"&>*\": {\n        zIndex: 0,\n      },\n      \"&>*:focus-within\": {\n        zIndex: 1,\n      },\n      // IE fallback code (using focus-within-polyfill)\n      \"&>*.focus-within\": {\n        zIndex: 1,\n      },\n    }),\n\n    ...($horizontal && {\n      flexDirection: \"row\",\n      flexWrap: \"wrap\",\n\n      \"&>*:not(:first-of-type)\": {\n        marginLeft: theme.space.sm,\n      },\n    }),\n\n    ...($invalid && {\n      paddingBottom: theme.space.xs,\n      borderBottom: `1px solid ${theme.colors.negative}`,\n    }),\n  })\n);\n"],"names":["StyledFormElement","_styled","props","HvFormElement","process","env","NODE_ENV","target","label","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","StyledLabel","HvLabel","marginBottom","theme","space","xs","StyledGroupContainer","_extends","transientOptions","$vertical","$horizontal","$invalid","display","flexDirection","zIndex","flexWrap","marginLeft","sm","paddingBottom","borderBottom","colors","negative"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAKO,MAAMA,oBAAoBC,iCAAAA,QAAO,CAACC,yCACtCC,YAAAA,eAAa;AAAA,EAAA,GAAKD;AAAK,CAAA,GACzBE,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAACJ,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAG,MAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAD,MAAA;AAAA,EAAAC,QAAA;AAAA,EAAAC,KAAA;AAAA,EAAAC,UAAAC;AAAA,CAMA;AAEK,MAAMC,cAAqBC,iCAAAA,QAAAA,MAAAA,SAAOX,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAAE;AAAA,EACzCQ,cAAcC,YAAAA,MAAMC,MAAMC;AAC5B,GAACf,QAAAC,IAAAC,aAAC,eAAA,KAAA,y9EAAA;AAEWc,MAAAA,gEACX,OAAKhB,QAAAC,IAAAC,4BAAAe,SAAA,IAAA;AAAA,EAAAd,QAAA;AAAA,GACLe,iBAAgB,gBAAA,IAAAD,SAAA,IAAA;AAAA,EAAAd,QAAA;AAAA,EAAAC,OAAA;AAAA,GAAhBc,iBAAAA,gBAAgB,CACjB,EACC,CAAC;AAAA,EACCC;AAAAA,EACAC;AAAAA,EACAC;AAKF,OAAO;AAAA,EACLC,SAAS;AAAA,EAET,GAAIH,aAAa;AAAA,IACfI,eAAe;AAAA;AAAA,IAGf,OAAO;AAAA,MACLC,QAAQ;AAAA,IACV;AAAA,IACA,oBAAoB;AAAA,MAClBA,QAAQ;AAAA,IACV;AAAA;AAAA,IAEA,oBAAoB;AAAA,MAClBA,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EAEA,GAAIJ,eAAe;AAAA,IACjBG,eAAe;AAAA,IACfE,UAAU;AAAA,IAEV,2BAA2B;AAAA,MACzBC,YAAYb,YAAAA,MAAMC,MAAMa;AAAAA,IAC1B;AAAA,EACF;AAAA,EAEA,GAAIN,YAAY;AAAA,IACdO,eAAef,YAAAA,MAAMC,MAAMC;AAAAA,IAC3Bc,cAAe,aAAYhB,YAAAA,MAAMiB,OAAOC;AAAAA,EAC1C;AACF,IAAE/B,QAAAC,IAAAC,aACH,eAAA,KAAA,y9EAAA;;;;"}
+{"version":3,"file":"CheckBoxGroup.styles.cjs","sources":["../../../../src/components/CheckBoxGroup/CheckBoxGroup.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { HvFormElement, HvFormElementProps, HvLabel } from \"@core/components\";\nimport { transientOptions } from \"@core/utils/transientOptions\";\n\nexport const StyledFormElement = styled((props: HvFormElementProps) => (\n  <HvFormElement {...props} />\n))({\n  display: \"inline-block\",\n  padding: 0,\n  margin: 0,\n  overflow: \"hidden\",\n  verticalAlign: \"top\",\n});\n\nexport const StyledLabel = styled(HvLabel)({\n  marginBottom: theme.space.xs,\n});\n\nexport const StyledGroupContainer = styled(\n  \"div\",\n  transientOptions\n)(\n  ({\n    $vertical,\n    $horizontal,\n    $invalid,\n  }: {\n    $vertical: boolean;\n    $horizontal: boolean;\n    $invalid: boolean;\n  }) => ({\n    display: \"flex\",\n\n    ...($vertical && {\n      flexDirection: \"column\",\n\n      // Prevent the focus ring to be hidden by sibling hover background\n      \"&>*\": {\n        zIndex: 0,\n      },\n      \"&>*:focus-within\": {\n        zIndex: 1,\n      },\n      // IE fallback code (using focus-within-polyfill)\n      \"&>*.focus-within\": {\n        zIndex: 1,\n      },\n    }),\n\n    ...($horizontal && {\n      flexDirection: \"row\",\n      flexWrap: \"wrap\",\n\n      \"&>*:not(:first-of-type)\": {\n        marginLeft: theme.space.sm,\n      },\n    }),\n\n    ...($invalid && {\n      paddingBottom: theme.space.xs,\n      borderBottom: `1px solid ${theme.colors.negative}`,\n    }),\n  })\n);\n"],"names":["StyledFormElement","_styled","props","HvFormElement","process","env","NODE_ENV","target","label","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","StyledLabel","HvLabel","marginBottom","theme","space","xs","StyledGroupContainer","_extends","transientOptions","$vertical","$horizontal","$invalid","display","flexDirection","zIndex","flexWrap","marginLeft","sm","paddingBottom","borderBottom","colors","negative"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAKO,MAAMA,oBAAoBC,iCAAAA,QAAO,CAACC,yCACtCC,YAAAA,eAAa;AAAA,EAAA,GAAKD;AAAK,CAAG,GAC5BE,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAACJ,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAG,MAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAD,MAAA;AAAA,EAAAC,QAAA;AAAA,EAAAC,KAAA;AAAA,EAAAC,UAAAC;AAAA,CAMD;AAEM,MAAMC,cAAqBC,iCAAAA,QAAAA,MAAAA,SAAOX,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAAE;AAAA,EACzCQ,cAAcC,YAAAA,MAAMC,MAAMC;AAC5B,GAACf,QAAAC,IAAAC,aAAC,eAAA,KAAA,y9EAAA;AAEWc,MAAAA,gEACX,OAAKhB,QAAAC,IAAAC,4BAAAe,SAAA,IAAA;AAAA,EAAAd,QAAA;AAAA,GACLe,iBAAgB,gBAAA,IAAAD,SAAA,IAAA;AAAA,EAAAd,QAAA;AAAA,EAAAC,OAAA;AAAA,GAAhBc,iBAAAA,gBAAgB,CAClB,EACE,CAAC;AAAA,EACCC;AAAAA,EACAC;AAAAA,EACAC;AAKF,OAAO;AAAA,EACLC,SAAS;AAAA,EAET,GAAIH,aAAa;AAAA,IACfI,eAAe;AAAA;AAAA,IAGf,OAAO;AAAA,MACLC,QAAQ;AAAA,IACV;AAAA,IACA,oBAAoB;AAAA,MAClBA,QAAQ;AAAA,IACV;AAAA;AAAA,IAEA,oBAAoB;AAAA,MAClBA,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EAEA,GAAIJ,eAAe;AAAA,IACjBG,eAAe;AAAA,IACfE,UAAU;AAAA,IAEV,2BAA2B;AAAA,MACzBC,YAAYb,YAAAA,MAAMC,MAAMa;AAAAA,IAC1B;AAAA,EACF;AAAA,EAEA,GAAIN,YAAY;AAAA,IACdO,eAAef,YAAAA,MAAMC,MAAMC;AAAAA,IAC3Bc,cAAe,aAAYhB,YAAAA,MAAMiB,OAAOC;AAAAA,EAC1C;AACF,IAAE/B,QAAAC,IAAAC,0/EACJ;;;;"}

package/dist/cjs/components/ColorPicker/ColorPicker.cjs

@@ -113,31 +113,27 @@ const HvColorPicker = ({
           children: description
         })]
       }), /* @__PURE__ */ jsxRuntime.jsx(BaseDropdown.HvBaseDropdown, {
+        variableWidth: true,
         className,
         expanded: isOpen,
         onToggle: handleToggle,
         onContainerCreation: setFocusToContent,
         classes: {
-          root: iconOnly ? cx(colorPickerClasses.default.dropdownRootIconOnly, css(ColorPicker_styles.styles.dropdownRootIconOnly), classes == null ? void 0 : classes.dropdownRootIconOnly) : void 0
+          root: iconOnly ? cx(colorPickerClasses.default.dropdownRootIconOnly, css(ColorPicker_styles.styles.dropdownRootIconOnly), classes == null ? void 0 : classes.dropdownRootIconOnly) : void 0,
+          selection: cx(iconOnly && css({
+            padding: 0
+          }))
         },
         adornment: iconOnly && color ? /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Checkbox, {
-          className: cx(colorPickerClasses.default.headerColorIconOnly, css(ColorPicker_styles.styles.headerColorIconOnly), css({
-            "& svg:last-child": {
-              fill: color
-            }
-          }), classes == null ? void 0 : classes.headerColorIconOnly),
-          color: [color]
+          className: cx(colorPickerClasses.default.headerColorIconOnly, css(ColorPicker_styles.styles.headerColorIconOnly), classes == null ? void 0 : classes.headerColorIconOnly),
+          color: [color, "transparent"]
         }) : dropdownIcon === "colorPicker" ? /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.ColorPicker, {
           className: cx(colorPickerClasses.default.colorPickerIcon, css(ColorPicker_styles.styles.colorPickerIcon), classes == null ? void 0 : classes.colorPickerIcon)
         }) : void 0,
         placeholder: iconOnly ? void 0 : color ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
           children: [/* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Checkbox, {
-            className: cx(colorPickerClasses.default.headerColorIcon, css(ColorPicker_styles.styles.headerColorIcon), css({
-              "& svg:last-child": {
-                fill: color
-              }
-            }), classes == null ? void 0 : classes.headerColorIcon),
-            color: [color]
+            className: cx(colorPickerClasses.default.headerColorIcon, css(ColorPicker_styles.styles.headerColorIcon), classes == null ? void 0 : classes.headerColorIcon),
+            color: [color, "transparent"]
           }), /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, {
             className: cx(colorPickerClasses.default.headerColorValue, css(ColorPicker_styles.styles.headerColorValue), classes == null ? void 0 : classes.headerColorValue),
             variant: activeTheme == null ? void 0 : activeTheme.colorPicker.inputValueVariant,

package/dist/cjs/components/ColorPicker/ColorPicker.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.cjs","sources":["../../../../src/components/ColorPicker/ColorPicker.tsx"],"sourcesContent":["import {\n  HvBaseDropdown,\n  HvFormElement,\n  HvInfoMessage,\n  HvLabel,\n  HvPanel,\n  HvTypography,\n} from \"@core/components\";\nimport { ClassNames } from \"@emotion/react\";\nimport { Checkbox, ColorPicker } from \"@hitachivantara/uikit-react-icons\";\nimport { ColorState } from \"react-color\";\nimport { useControlled, useLabels, useTheme, useUniqueId } from \"@core/hooks\";\nimport { setId } from \"@core/utils\";\nimport { Picker } from \"./Picker\";\nimport { styles } from \"./ColorPicker.styles\";\nimport colorPickerClasses, { HvColorPickerClasses } from \"./colorPickerClasses\";\nimport { PresetColors } from \"./PresetColors\";\nimport { SavedColors } from \"./SavedColors\";\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 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?: {\n    recommendedColorsLabel?: string;\n    customColorsLabel?: string;\n  };\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;\n}\n\nconst DEFAULT_LABELS: HvColorPickerProps[\"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 = ({\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,\n  value,\n  onChange,\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}: HvColorPickerProps) => {\n  const { activeTheme } = useTheme();\n\n  const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n  const [isOpen, setIsOpen] = useControlled(expanded, Boolean(defaultExpanded));\n  const [color, setColor] = useControlled(value, defaultValue);\n  const [savedColors, setSavedColors] = useControlled(\n    savedColorsValue,\n    defaultSavedColorsValue\n  );\n  const elementId = useUniqueId(id, \"hvdropdown\");\n  const hasLabel = label != null;\n  const hasDescription = description != null;\n\n  const handleToggle = (_, open: boolean) => {\n    setIsOpen(open);\n  };\n\n  const handleSelect = (val: ColorState | { hex: string; source: string }) => {\n    onChange?.(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    <ClassNames>\n      {({ css, cx }) => (\n        <HvFormElement\n          id={id}\n          name={name}\n          disabled={disabled}\n          required={required}\n          className={cx(colorPickerClasses.root, className, classes?.root)}\n        >\n          {(hasLabel || hasDescription) && (\n            <div\n              className={cx(\n                colorPickerClasses.labelContainer,\n                css(styles.labelContainer),\n                classes?.labelContainer\n              )}\n            >\n              {hasLabel && (\n                <HvLabel\n                  id={setId(elementId, \"label\")}\n                  label={label}\n                  className={cx(\n                    colorPickerClasses.label,\n                    css(styles.label),\n                    classes?.label\n                  )}\n                />\n              )}\n\n              {hasDescription && (\n                <HvInfoMessage\n                  id={setId(elementId, \"description\")}\n                  className={cx(\n                    colorPickerClasses.description,\n                    classes?.description\n                  )}\n                >\n                  {description}\n                </HvInfoMessage>\n              )}\n            </div>\n          )}\n          <HvBaseDropdown\n            className={className}\n            expanded={isOpen}\n            onToggle={handleToggle}\n            onContainerCreation={setFocusToContent}\n            classes={{\n              root: iconOnly\n                ? cx(\n                    colorPickerClasses.dropdownRootIconOnly,\n                    css(styles.dropdownRootIconOnly),\n                    classes?.dropdownRootIconOnly\n                  )\n                : undefined,\n            }}\n            adornment={\n              iconOnly && color ? (\n                <Checkbox\n                  className={cx(\n                    colorPickerClasses.headerColorIconOnly,\n                    css(styles.headerColorIconOnly),\n                    css({\n                      \"& svg:last-child\": {\n                        fill: color,\n                      },\n                    }),\n                    classes?.headerColorIconOnly\n                  )}\n                  color={[color]}\n                />\n              ) : dropdownIcon === \"colorPicker\" ? (\n                <ColorPicker\n                  className={cx(\n                    colorPickerClasses.colorPickerIcon,\n                    css(styles.colorPickerIcon),\n                    classes?.colorPickerIcon\n                  )}\n                />\n              ) : undefined\n            }\n            placeholder={\n              iconOnly ? undefined : color ? (\n                <>\n                  <Checkbox\n                    className={cx(\n                      colorPickerClasses.headerColorIcon,\n                      css(styles.headerColorIcon),\n                      css({\n                        \"& svg:last-child\": {\n                          fill: color,\n                        },\n                      }),\n                      classes?.headerColorIcon\n                    )}\n                    color={[color]}\n                  />\n                  <HvTypography\n                    className={cx(\n                      colorPickerClasses.headerColorValue,\n                      css(styles.headerColorValue),\n                      classes?.headerColorValue\n                    )}\n                    variant={activeTheme?.colorPicker.inputValueVariant}\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\n              className={cx(\n                colorPickerClasses.panel,\n                css(styles.panel),\n                classes?.panel\n              )}\n            >\n              <div\n                className={cx(\n                  colorPickerClasses.colorPicker,\n                  css(styles.colorPicker),\n                  classes?.colorPicker\n                )}\n              >\n                {recommendedColorsPosition === \"top\" && (\n                  <PresetColors\n                    className={cx(\n                      colorPickerClasses.recommendedColorsRoot,\n                      (showCustomColors || showSavedColors) &&\n                        css({\n                          paddingBottom:\n                            activeTheme?.colorPicker\n                              .recommendedColorsBottomPadding,\n                        }),\n                      classes?.recommendedColorsRoot\n                    )}\n                    colors={recommendedColors}\n                    onClick={handleSelect}\n                    title={\n                      showLabels ? labels?.recommendedColorsLabel : undefined\n                    }\n                  />\n                )}\n                {showCustomColors && (\n                  <Picker\n                    classes={{\n                      fields:\n                        recommendedColorsPosition === \"bottom\" ||\n                        showSavedColors\n                          ? cx(\n                              colorPickerClasses.pickerFields,\n                              css(styles.pickerFields),\n                              classes?.pickerFields\n                            )\n                          : undefined,\n                    }}\n                    title={showLabels ? labels?.customColorsLabel : undefined}\n                    color={color}\n                    onChange={handleSelect}\n                  />\n                )}\n                {showSavedColors && (\n                  <SavedColors\n                    colors={savedColors}\n                    onAddColor={handleAddColor}\n                    onClickColor={handleSelect}\n                    onRemoveColor={handleRemoveColor}\n                    deleteButtonArialLabel={deleteSavedColorButtonArialLabel}\n                  />\n                )}\n                {recommendedColorsPosition === \"bottom\" && (\n                  <PresetColors\n                    colors={recommendedColors}\n                    onClick={handleSelect}\n                    title={\n                      showLabels ? labels?.recommendedColorsLabel : undefined\n                    }\n                  />\n                )}\n              </div>\n            </HvPanel>\n          </HvBaseDropdown>\n        </HvFormElement>\n      )}\n    </ClassNames>\n  );\n};\n"],"names":["DEFAULT_LABELS","recommendedColorsLabel","customColorsLabel","HvColorPicker","id","name","required","disabled","label","ariaLabel","ariaLabelledBy","description","ariaDescribedBy","className","classes","value","onChange","defaultValue","expanded","defaultExpanded","recommendedColorsPosition","recommendedColors","showLabels","labels","labelsProp","dropdownIcon","placeholder","iconOnly","showSavedColors","showCustomColors","savedColorsValue","defaultSavedColorsValue","onSavedColorAdded","onSavedColorRemoved","deleteSavedColorButtonArialLabel","activeTheme","useTheme","useLabels","isOpen","setIsOpen","useControlled","Boolean","color","setColor","savedColors","setSavedColors","elementId","useUniqueId","hasLabel","hasDescription","handleToggle","_","open","handleSelect","val","hex","handleAddColor","colorToAdd","handleRemoveColor","position","sColors","splice","setFocusToContent","containerRef","inputs","getElementsByTagName","length","focus","ClassNames","children","css","cx","HvFormElement","colorPickerClasses","root","labelContainer","styles","_jsx","HvLabel","setId","HvInfoMessage","HvBaseDropdown","onToggle","onContainerCreation","dropdownRootIconOnly","undefined","adornment","Checkbox","headerColorIconOnly","fill","ColorPicker","colorPickerIcon","_Fragment","headerColorIcon","HvTypography","headerColorValue","variant","colorPicker","inputValueVariant","join","trim","HvPanel","panel","PresetColors","recommendedColorsRoot","paddingBottom","recommendedColorsBottomPadding","colors","onClick","title","Picker","fields","pickerFields","SavedColors","onAddColor","onClickColor","onRemoveColor","deleteButtonArialLabel"],"mappings":"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"}
+{"version":3,"file":"ColorPicker.cjs","sources":["../../../../src/components/ColorPicker/ColorPicker.tsx"],"sourcesContent":["import {\n  HvBaseDropdown,\n  HvFormElement,\n  HvInfoMessage,\n  HvLabel,\n  HvPanel,\n  HvTypography,\n} from \"@core/components\";\nimport { ClassNames } from \"@emotion/react\";\nimport { Checkbox, ColorPicker } from \"@hitachivantara/uikit-react-icons\";\nimport { ColorState } from \"react-color\";\nimport { useControlled, useLabels, useTheme, useUniqueId } from \"@core/hooks\";\nimport { setId } from \"@core/utils\";\nimport { Picker } from \"./Picker\";\nimport { styles } from \"./ColorPicker.styles\";\nimport colorPickerClasses, { HvColorPickerClasses } from \"./colorPickerClasses\";\nimport { PresetColors } from \"./PresetColors\";\nimport { SavedColors } from \"./SavedColors\";\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 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?: {\n    recommendedColorsLabel?: string;\n    customColorsLabel?: string;\n  };\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;\n}\n\nconst DEFAULT_LABELS: HvColorPickerProps[\"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 = ({\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,\n  value,\n  onChange,\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}: HvColorPickerProps) => {\n  const { activeTheme } = useTheme();\n\n  const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n  const [isOpen, setIsOpen] = useControlled(expanded, Boolean(defaultExpanded));\n  const [color, setColor] = useControlled(value, defaultValue);\n  const [savedColors, setSavedColors] = useControlled(\n    savedColorsValue,\n    defaultSavedColorsValue\n  );\n  const elementId = useUniqueId(id, \"hvdropdown\");\n  const hasLabel = label != null;\n  const hasDescription = description != null;\n\n  const handleToggle = (_, open: boolean) => {\n    setIsOpen(open);\n  };\n\n  const handleSelect = (val: ColorState | { hex: string; source: string }) => {\n    onChange?.(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    <ClassNames>\n      {({ css, cx }) => (\n        <HvFormElement\n          id={id}\n          name={name}\n          disabled={disabled}\n          required={required}\n          className={cx(colorPickerClasses.root, className, classes?.root)}\n        >\n          {(hasLabel || hasDescription) && (\n            <div\n              className={cx(\n                colorPickerClasses.labelContainer,\n                css(styles.labelContainer),\n                classes?.labelContainer\n              )}\n            >\n              {hasLabel && (\n                <HvLabel\n                  id={setId(elementId, \"label\")}\n                  label={label}\n                  className={cx(\n                    colorPickerClasses.label,\n                    css(styles.label),\n                    classes?.label\n                  )}\n                />\n              )}\n\n              {hasDescription && (\n                <HvInfoMessage\n                  id={setId(elementId, \"description\")}\n                  className={cx(\n                    colorPickerClasses.description,\n                    classes?.description\n                  )}\n                >\n                  {description}\n                </HvInfoMessage>\n              )}\n            </div>\n          )}\n          <HvBaseDropdown\n            variableWidth\n            className={className}\n            expanded={isOpen}\n            onToggle={handleToggle}\n            onContainerCreation={setFocusToContent}\n            classes={{\n              root: iconOnly\n                ? cx(\n                    colorPickerClasses.dropdownRootIconOnly,\n                    css(styles.dropdownRootIconOnly),\n                    classes?.dropdownRootIconOnly\n                  )\n                : undefined,\n              selection: cx(iconOnly && css({ padding: 0 })),\n            }}\n            adornment={\n              iconOnly && color ? (\n                <Checkbox\n                  className={cx(\n                    colorPickerClasses.headerColorIconOnly,\n                    css(styles.headerColorIconOnly),\n                    classes?.headerColorIconOnly\n                  )}\n                  color={[color, \"transparent\"]}\n                />\n              ) : dropdownIcon === \"colorPicker\" ? (\n                <ColorPicker\n                  className={cx(\n                    colorPickerClasses.colorPickerIcon,\n                    css(styles.colorPickerIcon),\n                    classes?.colorPickerIcon\n                  )}\n                />\n              ) : undefined\n            }\n            placeholder={\n              iconOnly ? undefined : color ? (\n                <>\n                  <Checkbox\n                    className={cx(\n                      colorPickerClasses.headerColorIcon,\n                      css(styles.headerColorIcon),\n                      classes?.headerColorIcon\n                    )}\n                    color={[color, \"transparent\"]}\n                  />\n                  <HvTypography\n                    className={cx(\n                      colorPickerClasses.headerColorValue,\n                      css(styles.headerColorValue),\n                      classes?.headerColorValue\n                    )}\n                    variant={activeTheme?.colorPicker.inputValueVariant}\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\n              className={cx(\n                colorPickerClasses.panel,\n                css(styles.panel),\n                classes?.panel\n              )}\n            >\n              <div\n                className={cx(\n                  colorPickerClasses.colorPicker,\n                  css(styles.colorPicker),\n                  classes?.colorPicker\n                )}\n              >\n                {recommendedColorsPosition === \"top\" && (\n                  <PresetColors\n                    className={cx(\n                      colorPickerClasses.recommendedColorsRoot,\n                      (showCustomColors || showSavedColors) &&\n                        css({\n                          paddingBottom:\n                            activeTheme?.colorPicker\n                              .recommendedColorsBottomPadding,\n                        }),\n                      classes?.recommendedColorsRoot\n                    )}\n                    colors={recommendedColors}\n                    onClick={handleSelect}\n                    title={\n                      showLabels ? labels?.recommendedColorsLabel : undefined\n                    }\n                  />\n                )}\n                {showCustomColors && (\n                  <Picker\n                    classes={{\n                      fields:\n                        recommendedColorsPosition === \"bottom\" ||\n                        showSavedColors\n                          ? cx(\n                              colorPickerClasses.pickerFields,\n                              css(styles.pickerFields),\n                              classes?.pickerFields\n                            )\n                          : undefined,\n                    }}\n                    title={showLabels ? labels?.customColorsLabel : undefined}\n                    color={color}\n                    onChange={handleSelect}\n                  />\n                )}\n                {showSavedColors && (\n                  <SavedColors\n                    colors={savedColors}\n                    onAddColor={handleAddColor}\n                    onClickColor={handleSelect}\n                    onRemoveColor={handleRemoveColor}\n                    deleteButtonArialLabel={deleteSavedColorButtonArialLabel}\n                  />\n                )}\n                {recommendedColorsPosition === \"bottom\" && (\n                  <PresetColors\n                    colors={recommendedColors}\n                    onClick={handleSelect}\n                    title={\n                      showLabels ? labels?.recommendedColorsLabel : undefined\n                    }\n                  />\n                )}\n              </div>\n            </HvPanel>\n          </HvBaseDropdown>\n        </HvFormElement>\n      )}\n    </ClassNames>\n  );\n};\n"],"names":["DEFAULT_LABELS","recommendedColorsLabel","customColorsLabel","HvColorPicker","id","name","required","disabled","label","ariaLabel","ariaLabelledBy","description","ariaDescribedBy","className","classes","value","onChange","defaultValue","expanded","defaultExpanded","recommendedColorsPosition","recommendedColors","showLabels","labels","labelsProp","dropdownIcon","placeholder","iconOnly","showSavedColors","showCustomColors","savedColorsValue","defaultSavedColorsValue","onSavedColorAdded","onSavedColorRemoved","deleteSavedColorButtonArialLabel","activeTheme","useTheme","useLabels","isOpen","setIsOpen","useControlled","Boolean","color","setColor","savedColors","setSavedColors","elementId","useUniqueId","hasLabel","hasDescription","handleToggle","_","open","handleSelect","val","hex","handleAddColor","colorToAdd","handleRemoveColor","position","sColors","splice","setFocusToContent","containerRef","inputs","getElementsByTagName","length","focus","ClassNames","children","css","cx","HvFormElement","colorPickerClasses","root","labelContainer","styles","_jsx","HvLabel","setId","HvInfoMessage","HvBaseDropdown","variableWidth","onToggle","onContainerCreation","dropdownRootIconOnly","undefined","selection","padding","adornment","Checkbox","headerColorIconOnly","ColorPicker","colorPickerIcon","_Fragment","headerColorIcon","HvTypography","headerColorValue","variant","colorPicker","inputValueVariant","join","trim","HvPanel","panel","PresetColors","recommendedColorsRoot","paddingBottom","recommendedColorsBottomPadding","colors","onClick","title","Picker","fields","pickerFields","SavedColors","onAddColor","onClickColor","onRemoveColor","deleteButtonArialLabel"],"mappings":"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"}

package/dist/cjs/components/ColorPicker/ColorPicker.styles.cjs

@@ -8,7 +8,8 @@ const styles = {
   },
   label: {
     paddingBottom: "6px",
-    display: "block"
+    display: "block",
+    cursor: "pointer"
   },
   headerColorValue: {
     textTransform: "uppercase"
@@ -24,31 +25,17 @@ const styles = {
     minWidth: uikitStyles.theme.colorPicker.panelMinWidth,
     display: "flex",
     justifyContent: "center",
-    padding: uikitStyles.theme.colorPicker.panelPadding,
-    border: uikitStyles.theme.colorPicker.panelBorder,
-    borderRadius: uikitStyles.theme.colorPicker.panelBorderRadius
+    padding: uikitStyles.theme.colorPicker.panelPadding
   },
   colorPicker: {
     width: uikitStyles.theme.colorPicker.colorPickerWidth
   },
-  colorPickerIcon: {
-    position: "absolute",
-    pointerEvents: "none",
-    top: -1,
-    right: -1
-  },
+  colorPickerIcon: {},
   dropdownRootIconOnly: {
     width: 32,
     height: 32
   },
-  headerColorIconOnly: {
-    position: "absolute",
-    pointerEvents: "none",
-    top: -1,
-    right: -1,
-    width: 32,
-    height: 32
-  },
+  headerColorIconOnly: {},
   pickerFields: {
     paddingBottom: 20
   }

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

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.styles.cjs","sources":["../../../../src/components/ColorPicker/ColorPicker.styles.tsx"],"sourcesContent":["import { CSSInterpolation } from \"@emotion/serialize\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { HvColorPickerClasses } from \"./colorPickerClasses\";\n\nexport const styles: Partial<\n  Record<keyof HvColorPickerClasses, CSSInterpolation>\n> = {\n  labelContainer: {\n    display: \"flex\",\n    alignItems: \"flex-start\",\n  },\n  label: {\n    paddingBottom: \"6px\",\n    display: \"block\",\n  },\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: theme.colorPicker.panelMinWidth,\n    display: \"flex\",\n    justifyContent: \"center\",\n    padding: theme.colorPicker.panelPadding,\n    border: theme.colorPicker.panelBorder,\n    borderRadius: theme.colorPicker.panelBorderRadius,\n  },\n  colorPicker: {\n    width: theme.colorPicker.colorPickerWidth,\n  },\n  colorPickerIcon: {\n    position: \"absolute\",\n    pointerEvents: \"none\",\n    top: -1,\n    right: -1,\n  },\n  dropdownRootIconOnly: {\n    width: 32,\n    height: 32,\n  },\n  headerColorIconOnly: {\n    position: \"absolute\",\n    pointerEvents: \"none\",\n    top: -1,\n    right: -1,\n    width: 32,\n    height: 32,\n  },\n  pickerFields: { paddingBottom: 20 },\n};\n"],"names":["styles","labelContainer","display","alignItems","label","paddingBottom","headerColorValue","textTransform","headerColorIcon","width","marginLeft","panel","minWidth","theme","colorPicker","panelMinWidth","justifyContent","padding","panelPadding","border","panelBorder","borderRadius","panelBorderRadius","colorPickerWidth","colorPickerIcon","position","pointerEvents","top","right","dropdownRootIconOnly","height","headerColorIconOnly","pickerFields"],"mappings":";;;AAIO,MAAMA,SAET;AAAA,EACFC,gBAAgB;AAAA,IACdC,SAAS;AAAA,IACTC,YAAY;AAAA,EACd;AAAA,EACAC,OAAO;AAAA,IACLC,eAAe;AAAA,IACfH,SAAS;AAAA,EACX;AAAA,EACAI,kBAAkB;AAAA,IAChBC,eAAe;AAAA,EACjB;AAAA,EACAC,iBAAiB;AAAA,IACfC,OAAO;AAAA,IACP,SAAS;AAAA,MACPC,YAAY;AAAA,IACd;AAAA,EACF;AAAA,EACAC,OAAO;AAAA,IACLF,OAAO;AAAA,IACPG,UAAUC,YAAAA,MAAMC,YAAYC;AAAAA,IAC5Bb,SAAS;AAAA,IACTc,gBAAgB;AAAA,IAChBC,SAASJ,YAAAA,MAAMC,YAAYI;AAAAA,IAC3BC,QAAQN,YAAAA,MAAMC,YAAYM;AAAAA,IAC1BC,cAAcR,YAAAA,MAAMC,YAAYQ;AAAAA,EAClC;AAAA,EACAR,aAAa;AAAA,IACXL,OAAOI,YAAAA,MAAMC,YAAYS;AAAAA,EAC3B;AAAA,EACAC,iBAAiB;AAAA,IACfC,UAAU;AAAA,IACVC,eAAe;AAAA,IACfC,KAAK;AAAA,IACLC,OAAO;AAAA,EACT;AAAA,EACAC,sBAAsB;AAAA,IACpBpB,OAAO;AAAA,IACPqB,QAAQ;AAAA,EACV;AAAA,EACAC,qBAAqB;AAAA,IACnBN,UAAU;AAAA,IACVC,eAAe;AAAA,IACfC,KAAK;AAAA,IACLC,OAAO;AAAA,IACPnB,OAAO;AAAA,IACPqB,QAAQ;AAAA,EACV;AAAA,EACAE,cAAc;AAAA,IAAE3B,eAAe;AAAA,EAAG;AACpC;;"}
+{"version":3,"file":"ColorPicker.styles.cjs","sources":["../../../../src/components/ColorPicker/ColorPicker.styles.tsx"],"sourcesContent":["import { CSSInterpolation } from \"@emotion/serialize\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { HvColorPickerClasses } from \"./colorPickerClasses\";\n\nexport const styles: Partial<\n  Record<keyof HvColorPickerClasses, CSSInterpolation>\n> = {\n  labelContainer: {\n    display: \"flex\",\n    alignItems: \"flex-start\",\n  },\n  label: {\n    paddingBottom: \"6px\",\n    display: \"block\",\n    cursor: \"pointer\",\n  },\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: theme.colorPicker.panelMinWidth,\n    display: \"flex\",\n    justifyContent: \"center\",\n    padding: theme.colorPicker.panelPadding,\n  },\n  colorPicker: {\n    width: theme.colorPicker.colorPickerWidth,\n  },\n  colorPickerIcon: {},\n  dropdownRootIconOnly: {\n    width: 32,\n    height: 32,\n  },\n  headerColorIconOnly: {},\n  pickerFields: { paddingBottom: 20 },\n};\n"],"names":["styles","labelContainer","display","alignItems","label","paddingBottom","cursor","headerColorValue","textTransform","headerColorIcon","width","marginLeft","panel","minWidth","theme","colorPicker","panelMinWidth","justifyContent","padding","panelPadding","colorPickerWidth","colorPickerIcon","dropdownRootIconOnly","height","headerColorIconOnly","pickerFields"],"mappings":";;;AAIO,MAAMA,SAET;AAAA,EACFC,gBAAgB;AAAA,IACdC,SAAS;AAAA,IACTC,YAAY;AAAA,EACd;AAAA,EACAC,OAAO;AAAA,IACLC,eAAe;AAAA,IACfH,SAAS;AAAA,IACTI,QAAQ;AAAA,EACV;AAAA,EACAC,kBAAkB;AAAA,IAChBC,eAAe;AAAA,EACjB;AAAA,EACAC,iBAAiB;AAAA,IACfC,OAAO;AAAA,IACP,SAAS;AAAA,MACPC,YAAY;AAAA,IACd;AAAA,EACF;AAAA,EACAC,OAAO;AAAA,IACLF,OAAO;AAAA,IACPG,UAAUC,YAAAA,MAAMC,YAAYC;AAAAA,IAC5Bd,SAAS;AAAA,IACTe,gBAAgB;AAAA,IAChBC,SAASJ,YAAAA,MAAMC,YAAYI;AAAAA,EAC7B;AAAA,EACAJ,aAAa;AAAA,IACXL,OAAOI,YAAAA,MAAMC,YAAYK;AAAAA,EAC3B;AAAA,EACAC,iBAAiB,CAAC;AAAA,EAClBC,sBAAsB;AAAA,IACpBZ,OAAO;AAAA,IACPa,QAAQ;AAAA,EACV;AAAA,EACAC,qBAAqB,CAAC;AAAA,EACtBC,cAAc;AAAA,IAAEpB,eAAe;AAAA,EAAG;AACpC;;"}

package/dist/cjs/components/ColorPicker/Fields/Fields.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Fields.cjs","sources":["../../../../../src/components/ColorPicker/Fields/Fields.tsx"],"sourcesContent":["import { ClassNames } from \"@emotion/react\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { HvInput } from \"@core/components\";\nimport { HSLColor, HSVColor, RGBColor } from \"react-color\";\nimport * as color from \"react-color/lib/helpers/color\";\nimport { styles } from \"./Fields.styles\";\nimport colorPickerFieldsClasses, {\n  HvColorPickerFieldsClasses,\n} from \"./fieldsClasses\";\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 = ({\n  className,\n  onChange,\n  rgb,\n  hex,\n  classes,\n}: FieldsProps) => {\n  const [internalHex, setInternalHex] = useState<string | undefined>(hex);\n  const [internalRed, setInternalRed] = useState<number | undefined>(rgb?.r);\n  const [internalGreen, setInternalGreen] = useState<number | undefined>(\n    rgb?.g\n  );\n  const [internalBlue, setInternalBlue] = useState<number | undefined>(rgb?.b);\n\n  const hexInputRef = useRef();\n  const redInputRef = useRef();\n  const greenInputRef = useRef();\n  const blueInputRef = useRef();\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 = (\n    event: React.ChangeEvent<HTMLInputElement>,\n    value: string\n  ) => {\n    setInternalHex(value);\n    handleChange({ hex: value }, event);\n  };\n\n  const onChangeRbg = (\n    event: React.ChangeEvent<HTMLInputElement>,\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    <ClassNames>\n      {({ css, cx }) => (\n        <div\n          className={cx(\n            colorPickerFieldsClasses.fields,\n            css(styles.fields),\n            className,\n            classes?.fields\n          )}\n        >\n          <HvInput\n            inputRef={hexInputRef}\n            className={cx(\n              colorPickerFieldsClasses.double,\n              css(styles.double),\n              classes?.double\n            )}\n            label=\"HEX\"\n            value={internalHex?.replace(\"#\", \"\")}\n            onChange={onChangeHex}\n            onBlur={() => setInternalHex(hex)}\n            disableClear\n          />\n          <HvInput\n            inputRef={redInputRef}\n            className={cx(\n              colorPickerFieldsClasses.single,\n              css(styles.single),\n              classes?.single\n            )}\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            inputRef={greenInputRef}\n            className={cx(\n              colorPickerFieldsClasses.single,\n              css(styles.single),\n              classes?.single\n            )}\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            inputRef={blueInputRef}\n            className={cx(\n              colorPickerFieldsClasses.single,\n              css(styles.single),\n              classes?.single\n            )}\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    </ClassNames>\n  );\n};\n"],"names":["Fields","className","onChange","rgb","hex","classes","internalHex","setInternalHex","useState","internalRed","setInternalRed","r","internalGreen","setInternalGreen","g","internalBlue","setInternalBlue","b","hexInputRef","useRef","redInputRef","greenInputRef","blueInputRef","useEffect","document","activeElement","current","handleChange","data","event","color","isValidHex","source","onChangeHex","value","onChangeRbg","colorPart","Number","ClassNames","children","css","cx","colorPickerFieldsClasses","fields","styles","_jsx","HvInput","inputRef","double","label","replace","onBlur","disableClear","single"],"mappings":"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"}
+{"version":3,"file":"Fields.cjs","sources":["../../../../../src/components/ColorPicker/Fields/Fields.tsx"],"sourcesContent":["import { ClassNames } from \"@emotion/react\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { HvInput } from \"@core/components\";\nimport { HSLColor, HSVColor, RGBColor } from \"react-color\";\nimport * as color from \"react-color/lib/helpers/color\";\nimport { styles } from \"./Fields.styles\";\nimport colorPickerFieldsClasses, {\n  HvColorPickerFieldsClasses,\n} from \"./fieldsClasses\";\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 = ({\n  className,\n  onChange,\n  rgb,\n  hex,\n  classes,\n}: FieldsProps) => {\n  const [internalHex, setInternalHex] = useState<string | undefined>(hex);\n  const [internalRed, setInternalRed] = useState<number | undefined>(rgb?.r);\n  const [internalGreen, setInternalGreen] = useState<number | undefined>(\n    rgb?.g\n  );\n  const [internalBlue, setInternalBlue] = useState<number | undefined>(rgb?.b);\n\n  const hexInputRef = useRef();\n  const redInputRef = useRef();\n  const greenInputRef = useRef();\n  const blueInputRef = useRef();\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 = (\n    event: React.ChangeEvent<HTMLInputElement>,\n    value: string\n  ) => {\n    setInternalHex(value);\n    handleChange({ hex: value }, event);\n  };\n\n  const onChangeRbg = (\n    event: React.ChangeEvent<HTMLInputElement>,\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    <ClassNames>\n      {({ css, cx }) => (\n        <div\n          className={cx(\n            colorPickerFieldsClasses.fields,\n            css(styles.fields),\n            className,\n            classes?.fields\n          )}\n        >\n          <HvInput\n            inputRef={hexInputRef}\n            className={cx(\n              colorPickerFieldsClasses.double,\n              css(styles.double),\n              classes?.double\n            )}\n            label=\"HEX\"\n            value={internalHex?.replace(\"#\", \"\")}\n            onChange={onChangeHex}\n            onBlur={() => setInternalHex(hex)}\n            disableClear\n          />\n          <HvInput\n            inputRef={redInputRef}\n            className={cx(\n              colorPickerFieldsClasses.single,\n              css(styles.single),\n              classes?.single\n            )}\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            inputRef={greenInputRef}\n            className={cx(\n              colorPickerFieldsClasses.single,\n              css(styles.single),\n              classes?.single\n            )}\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            inputRef={blueInputRef}\n            className={cx(\n              colorPickerFieldsClasses.single,\n              css(styles.single),\n              classes?.single\n            )}\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    </ClassNames>\n  );\n};\n"],"names":["Fields","className","onChange","rgb","hex","classes","internalHex","setInternalHex","useState","internalRed","setInternalRed","r","internalGreen","setInternalGreen","g","internalBlue","setInternalBlue","b","hexInputRef","useRef","redInputRef","greenInputRef","blueInputRef","useEffect","document","activeElement","current","handleChange","data","event","color","isValidHex","source","onChangeHex","value","onChangeRbg","colorPart","Number","ClassNames","children","css","cx","colorPickerFieldsClasses","fields","styles","_jsx","HvInput","inputRef","double","label","replace","onBlur","disableClear","single"],"mappings":"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"}

package/dist/cjs/components/ColorPicker/Picker/Picker.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Picker.cjs","sources":["../../../../../src/components/ColorPicker/Picker/Picker.tsx"],"sourcesContent":["import { ClassNames } from \"@emotion/react\";\nimport { useCallback } from \"react\";\nimport { Saturation, Hue } from \"react-color/lib/components/common\";\nimport {\n  CustomPicker,\n  CustomPickerInjectedProps,\n  HSLColor,\n  HSVColor,\n  RGBColor,\n} from \"react-color\";\nimport { HvTypography } from \"@core/components\";\nimport { useTheme } from \"@core/hooks\";\nimport { styles } from \"./Picker.styles\";\nimport { Fields } from \"../Fields\";\nimport colorPickerPickerClasses, {\n  HvColorPickerPickerClasses,\n} from \"./pickerClasses\";\n\nexport const Picker = ({\n  onChange,\n  rgb,\n  hsl,\n  hsv,\n  hex,\n  title,\n  classes,\n}: {\n  classes?: HvColorPickerPickerClasses;\n  title?: string;\n} & CustomPickerInjectedProps<\n  | HSLColor\n  | HSVColor\n  | RGBColor\n  | {\n      source?: string;\n      hex?: string;\n    }\n>) => {\n  const { activeTheme } = useTheme();\n\n  const SaturationPointer = useCallback(\n    () => (\n      <ClassNames>\n        {({ css, cx }) => (\n          <div\n            className={cx(\n              colorPickerPickerClasses.saturationPointer,\n              css(styles.saturationPointer),\n              classes?.saturationPointer\n            )}\n          />\n        )}\n      </ClassNames>\n    ),\n    []\n  );\n\n  const HueSlider = useCallback(\n    () => (\n      <ClassNames>\n        {({ css, cx }) => (\n          <div\n            className={cx(\n              colorPickerPickerClasses.hueSlider,\n              css(styles.hueSlider),\n              classes?.hueSlider\n            )}\n          />\n        )}\n      </ClassNames>\n    ),\n    []\n  );\n\n  return (\n    <ClassNames>\n      {({ css, cx }) => (\n        <>\n          {title && (\n            <HvTypography\n              className={cx(\n                colorPickerPickerClasses.title,\n                css(styles.title),\n                classes?.title\n              )}\n              variant=\"caption1\"\n            >\n              {title}\n            </HvTypography>\n          )}\n          <div\n            className={cx(\n              colorPickerPickerClasses.pickers,\n              css(styles.pickers),\n              classes?.pickers\n            )}\n          >\n            <div\n              className={cx(\n                colorPickerPickerClasses.saturation,\n                css(styles.saturation),\n                classes?.saturation\n              )}\n            >\n              <Saturation\n                hsl={hsl}\n                hsv={hsv}\n                onChange={onChange}\n                pointer={SaturationPointer}\n              />\n            </div>\n            <div\n              className={cx(\n                colorPickerPickerClasses.hue,\n                css(styles.hue),\n                classes?.hue\n              )}\n            >\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={cx(colorPickerPickerClasses.fields, classes?.fields)}\n            rgb={rgb}\n            hex={hex}\n            onChange={onChange}\n          />\n        </>\n      )}\n    </ClassNames>\n  );\n};\n\nexport default CustomPicker(Picker);\n"],"names":["Picker","onChange","rgb","hsl","hsv","hex","title","classes","activeTheme","useTheme","SaturationPointer","useCallback","_jsx","ClassNames","children","css","cx","className","colorPickerPickerClasses","saturationPointer","styles","HueSlider","hueSlider","_Fragment","HvTypography","variant","_jsxs","pickers","saturation","Saturation","pointer","hue","Hue","direction","colorPicker","hueDirection","Fields","fields","CustomPicker"],"mappings":";;;;;;;;;;;;AAkBO,MAAMA,SAASA,CAAC;AAAA,EACrBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAYF,MAAM;AACE,QAAA;AAAA,IAAEC;AAAAA,MAAgBC,SAAU,SAAA;AAElC,QAAMC,oBAAoBC,MAAAA,YACxB,MACEC,2BAAAA,IAACC,MAAAA,YAAU;AAAA,IAAAC,UACRA,CAAC;AAAA,MAAEC;AAAAA,MAAKC;AAAAA,IAAAA,qCACP,OAAA;AAAA,MACEC,WAAWD,GACTE,cAAyBC,QAAAA,mBACzBJ,IAAIK,cAAAA,OAAOD,iBAAiB,GAC5BZ,mCAASY,iBAAiB;AAAA,IAAA,CAC1B;AAAA,EAAA,CAIT,GACD,CAAE,CAAA;AAGJ,QAAME,YAAYV,MAAAA,YAChB,MACEC,2BAAAA,IAACC,MAAAA,YAAU;AAAA,IAAAC,UACRA,CAAC;AAAA,MAAEC;AAAAA,MAAKC;AAAAA,IAAAA,qCACP,OAAA;AAAA,MACEC,WAAWD,GACTE,cAAyBI,QAAAA,WACzBP,IAAIK,cAAAA,OAAOE,SAAS,GACpBf,mCAASe,SAAS;AAAA,IAAA,CAClB;AAAA,EAAA,CAIT,GACD,CAAE,CAAA;AAGJ,wCACGT,MAAAA,YAAU;AAAA,IAAAC,UACRA,CAAC;AAAA,MAAEC;AAAAA,MAAKC;AAAAA,IAAAA,sCACPO,WAAAA,UAAA;AAAA,MAAAT,UACGR,CAAAA,SACCM,2BAAAA,IAACY,yBAAY;AAAA,QACXP,WAAWD,GACTE,cAAyBZ,QAAAA,OACzBS,IAAIK,cAAAA,OAAOd,KAAK,GAChBC,mCAASD,KAAK;AAAA,QAEhBmB,SAAQ;AAAA,QAAUX,UAEjBR;AAAAA,MAAAA,CAAK,GAGVoB,2BAAAA,KAAA,OAAA;AAAA,QACET,WAAWD,GACTE,cAAyBS,QAAAA,SACzBZ,IAAIK,cAAAA,OAAOO,OAAO,GAClBpB,mCAASoB,OAAO;AAAA,QAChBb,WAEFF,2BAAAA,IAAA,OAAA;AAAA,UACEK,WAAWD,GACTE,cAAyBU,QAAAA,YACzBb,IAAIK,cAAAA,OAAOQ,UAAU,GACrBrB,mCAASqB,UAAU;AAAA,UACnBd,yCAEDe,mBAAU;AAAA,YACT1B;AAAAA,YACAC;AAAAA,YACAH;AAAAA,YACA6B,SAASpB;AAAAA,UAAAA,CAAkB;AAAA,QAAA,CAC3B,GAEJE,2BAAAA,IAAA,OAAA;AAAA,UACEK,WAAWD,GACTE,cAAyBa,QAAAA,KACzBhB,IAAIK,cAAAA,OAAOW,GAAG,GACdxB,mCAASwB,GAAG;AAAA,UACZjB,yCAEDkB,YAAG;AAAA,YACFC,WAAWzB,2CAAa0B,YAAYC;AAAAA,YACpChC;AAAAA,YACAF;AAAAA,YACA6B,SAAST;AAAAA,UAAAA,CAAU;AAAA,QAAA,CAEjB,CAAA;AAAA,MAAA,CACF,GACNT,2BAAAA,IAACwB,eAAM;AAAA,QACLnB,WAAWD,GAAGE,cAAAA,QAAyBmB,QAAQ9B,mCAAS8B,MAAM;AAAA,QAC9DnC;AAAAA,QACAG;AAAAA,QACAJ;AAAAA,MAAAA,CACA,CAAA;AAAA,IAAA,CAAA;AAAA,EAAA,CAGK;AAEjB;AAEA,MAAeqC,WAAAA,WAAAA,aAAatC,MAAM;;;"}
+{"version":3,"file":"Picker.cjs","sources":["../../../../../src/components/ColorPicker/Picker/Picker.tsx"],"sourcesContent":["import { ClassNames } from \"@emotion/react\";\nimport { useCallback } from \"react\";\nimport { Saturation, Hue } from \"react-color/lib/components/common\";\nimport {\n  CustomPicker,\n  CustomPickerInjectedProps,\n  HSLColor,\n  HSVColor,\n  RGBColor,\n} from \"react-color\";\nimport { HvTypography } from \"@core/components\";\nimport { useTheme } from \"@core/hooks\";\nimport { styles } from \"./Picker.styles\";\nimport { Fields } from \"../Fields\";\nimport colorPickerPickerClasses, {\n  HvColorPickerPickerClasses,\n} from \"./pickerClasses\";\n\nexport const Picker = ({\n  onChange,\n  rgb,\n  hsl,\n  hsv,\n  hex,\n  title,\n  classes,\n}: {\n  classes?: HvColorPickerPickerClasses;\n  title?: string;\n} & CustomPickerInjectedProps<\n  | HSLColor\n  | HSVColor\n  | RGBColor\n  | {\n      source?: string;\n      hex?: string;\n    }\n>) => {\n  const { activeTheme } = useTheme();\n\n  const SaturationPointer = useCallback(\n    () => (\n      <ClassNames>\n        {({ css, cx }) => (\n          <div\n            className={cx(\n              colorPickerPickerClasses.saturationPointer,\n              css(styles.saturationPointer),\n              classes?.saturationPointer\n            )}\n          />\n        )}\n      </ClassNames>\n    ),\n    []\n  );\n\n  const HueSlider = useCallback(\n    () => (\n      <ClassNames>\n        {({ css, cx }) => (\n          <div\n            className={cx(\n              colorPickerPickerClasses.hueSlider,\n              css(styles.hueSlider),\n              classes?.hueSlider\n            )}\n          />\n        )}\n      </ClassNames>\n    ),\n    []\n  );\n\n  return (\n    <ClassNames>\n      {({ css, cx }) => (\n        <>\n          {title && (\n            <HvTypography\n              className={cx(\n                colorPickerPickerClasses.title,\n                css(styles.title),\n                classes?.title\n              )}\n              variant=\"caption1\"\n            >\n              {title}\n            </HvTypography>\n          )}\n          <div\n            className={cx(\n              colorPickerPickerClasses.pickers,\n              css(styles.pickers),\n              classes?.pickers\n            )}\n          >\n            <div\n              className={cx(\n                colorPickerPickerClasses.saturation,\n                css(styles.saturation),\n                classes?.saturation\n              )}\n            >\n              <Saturation\n                hsl={hsl}\n                hsv={hsv}\n                onChange={onChange}\n                pointer={SaturationPointer}\n              />\n            </div>\n            <div\n              className={cx(\n                colorPickerPickerClasses.hue,\n                css(styles.hue),\n                classes?.hue\n              )}\n            >\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={cx(colorPickerPickerClasses.fields, classes?.fields)}\n            rgb={rgb}\n            hex={hex}\n            onChange={onChange}\n          />\n        </>\n      )}\n    </ClassNames>\n  );\n};\n\nexport default CustomPicker(Picker);\n"],"names":["Picker","onChange","rgb","hsl","hsv","hex","title","classes","activeTheme","useTheme","SaturationPointer","useCallback","_jsx","ClassNames","children","css","cx","className","colorPickerPickerClasses","saturationPointer","styles","HueSlider","hueSlider","_Fragment","HvTypography","variant","_jsxs","pickers","saturation","Saturation","pointer","hue","Hue","direction","colorPicker","hueDirection","Fields","fields","CustomPicker"],"mappings":";;;;;;;;;;;;AAkBO,MAAMA,SAASA,CAAC;AAAA,EACrBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAYF,MAAM;AACE,QAAA;AAAA,IAAEC;AAAAA,MAAgBC,SAAS,SAAA;AAEjC,QAAMC,oBAAoBC,MAAAA,YACxB,MACEC,2BAAAA,IAACC,MAAAA,YAAU;AAAA,IAAAC,UACRA,CAAC;AAAA,MAAEC;AAAAA,MAAKC;AAAAA,IAAAA,qCACP,OAAA;AAAA,MACEC,WAAWD,GACTE,cAAyBC,QAAAA,mBACzBJ,IAAIK,cAAAA,OAAOD,iBAAiB,GAC5BZ,mCAASY,iBACX;AAAA,IAAA,CACD;AAAA,EAAA,CAEO,GAEd,CACF,CAAA;AAEA,QAAME,YAAYV,MAAAA,YAChB,MACEC,2BAAAA,IAACC,MAAAA,YAAU;AAAA,IAAAC,UACRA,CAAC;AAAA,MAAEC;AAAAA,MAAKC;AAAAA,IAAAA,qCACP,OAAA;AAAA,MACEC,WAAWD,GACTE,cAAyBI,QAAAA,WACzBP,IAAIK,cAAAA,OAAOE,SAAS,GACpBf,mCAASe,SACX;AAAA,IAAA,CACD;AAAA,EAAA,CAEO,GAEd,CACF,CAAA;AAEA,wCACGT,MAAAA,YAAU;AAAA,IAAAC,UACRA,CAAC;AAAA,MAAEC;AAAAA,MAAKC;AAAAA,IAAAA,sCACPO,WAAAA,UAAA;AAAA,MAAAT,UACGR,CAAAA,SACCM,2BAAAA,IAACY,yBAAY;AAAA,QACXP,WAAWD,GACTE,cAAyBZ,QAAAA,OACzBS,IAAIK,cAAAA,OAAOd,KAAK,GAChBC,mCAASD,KACX;AAAA,QACAmB,SAAQ;AAAA,QAAUX,UAEjBR;AAAAA,MAAAA,CACW,GAEhBoB,2BAAAA,KAAA,OAAA;AAAA,QACET,WAAWD,GACTE,cAAyBS,QAAAA,SACzBZ,IAAIK,cAAAA,OAAOO,OAAO,GAClBpB,mCAASoB,OACX;AAAA,QAAEb,WAEFF,2BAAAA,IAAA,OAAA;AAAA,UACEK,WAAWD,GACTE,cAAyBU,QAAAA,YACzBb,IAAIK,cAAAA,OAAOQ,UAAU,GACrBrB,mCAASqB,UACX;AAAA,UAAEd,yCAEDe,mBAAU;AAAA,YACT1B;AAAAA,YACAC;AAAAA,YACAH;AAAAA,YACA6B,SAASpB;AAAAA,UAAAA,CACV;AAAA,QAAA,CACE,GACLE,2BAAAA,IAAA,OAAA;AAAA,UACEK,WAAWD,GACTE,cAAyBa,QAAAA,KACzBhB,IAAIK,cAAAA,OAAOW,GAAG,GACdxB,mCAASwB,GACX;AAAA,UAAEjB,yCAEDkB,YAAG;AAAA,YACFC,WAAWzB,2CAAa0B,YAAYC;AAAAA,YACpChC;AAAAA,YACAF;AAAAA,YACA6B,SAAST;AAAAA,UAAAA,CACV;AAAA,QAAA,CACE,CAAC;AAAA,MAAA,CACH,GACLT,2BAAAA,IAACwB,eAAM;AAAA,QACLnB,WAAWD,GAAGE,cAAAA,QAAyBmB,QAAQ9B,mCAAS8B,MAAM;AAAA,QAC9DnC;AAAAA,QACAG;AAAAA,QACAJ;AAAAA,MAAAA,CACD,CAAC;AAAA,IAAA,CACF;AAAA,EAAA,CAEM;AAEhB;AAEA,MAAeqC,WAAAA,WAAAA,aAAatC,MAAM;;;"}

package/dist/cjs/components/ColorPicker/PresetColors/PresetColors.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"PresetColors.cjs","sources":["../../../../../src/components/ColorPicker/PresetColors/PresetColors.tsx"],"sourcesContent":["import { ClassNames } from \"@emotion/react\";\nimport { HvTypography } from \"@core/components\";\n// @types/react-color seems to be broken\n// @ts-ignore\nimport { Swatch } from \"react-color/lib/components/common\";\nimport { styles } from \"./PresetColors.styles\";\nimport colorPickerPresetColorsClasses, {\n  HvColorPickerPresetColorsClasses,\n} from \"./presetColorsClasses\";\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 = ({\n  onClick,\n  colors,\n  title,\n  className,\n  classes,\n}: PresetColorsProps) => {\n  const handleClick = (hex: string) => {\n    onClick({\n      hex,\n      source: \"hex\",\n    });\n  };\n\n  return (\n    <ClassNames>\n      {({ css, cx }) => (\n        <div\n          className={cx(\n            colorPickerPresetColorsClasses.root,\n            css(styles.root),\n            className,\n            classes?.root\n          )}\n        >\n          {title && (\n            <HvTypography\n              className={cx(\n                colorPickerPresetColorsClasses.title,\n                css(styles.title),\n                classes?.title\n              )}\n              variant=\"caption1\"\n            >\n              {title}\n            </HvTypography>\n          )}\n          <div\n            className={cx(\n              colorPickerPresetColorsClasses.colors,\n              css(styles.colors),\n              classes?.colors\n            )}\n          >\n            {colors.map((color, index) => {\n              return (\n                <div\n                  key={`recommended-color-${color}-${index}`}\n                  className={cx(\n                    colorPickerPresetColorsClasses.swatchWrap,\n                    css(styles.swatchWrap),\n                    classes?.swatchWrap\n                  )}\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            })}\n          </div>\n        </div>\n      )}\n    </ClassNames>\n  );\n};\n"],"names":["PresetColors","onClick","colors","title","className","classes","handleClick","hex","source","ClassNames","children","css","cx","colorPickerPresetColorsClasses","root","styles","_jsx","HvTypography","variant","map","color","index","swatchWrap","Swatch","focusStyle","boxShadow"],"mappings":";;;;;;;;AAkBO,MAAMA,eAAeA,CAAC;AAAA,EAC3BC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AACiB,MAAM;AACjBC,QAAAA,cAAcA,CAACC,QAAgB;AAC3B,YAAA;AAAA,MACNA;AAAAA,MACAC,QAAQ;AAAA,IAAA,CACT;AAAA,EAAA;AAGH,wCACGC,MAAAA,YAAU;AAAA,IAAAC,UACRA,CAAC;AAAA,MAAEC;AAAAA,MAAKC;AAAAA,IAAAA,sCACP,OAAA;AAAA,MACER,WAAWQ,GACTC,4BAA+BC,MAC/BH,IAAII,2BAAOD,IAAI,GACfV,WACAC,mCAASS,IAAI;AAAA,MACbJ,UAEDP,CAAAA,SACCa,2BAAAA,IAACC,yBAAY;AAAA,QACXb,WAAWQ,GACTC,oBAA+BV,QAAAA,OAC/BQ,IAAII,oBAAAA,OAAOZ,KAAK,GAChBE,mCAASF,KAAK;AAAA,QAEhBe,SAAQ;AAAA,QAAUR,UAEjBP;AAAAA,MAAAA,CAAK,GAGVa,2BAAAA,IAAA,OAAA;AAAA,QACEZ,WAAWQ,GACTC,oBAA+BX,QAAAA,QAC/BS,IAAII,oBAAAA,OAAOb,MAAM,GACjBG,mCAASH,MAAM;AAAA,QACfQ,UAEDR,OAAOiB,IAAI,CAACC,OAAOC,UAAU;AAC5B,gDACE,OAAA;AAAA,YAEEjB,WAAWQ,GACTC,oBAA+BS,QAAAA,YAC/BX,IAAII,oBAAAA,OAAOO,UAAU,GACrBjB,mCAASiB,UAAU;AAAA,YACnBZ,yCAEDa,eAAM;AAAA,cACLH;AAAAA,cACAnB,SAASK;AAAAA,cACTkB,YAAY;AAAA,gBACVC,WAAY,4CAA2CL;AAAAA,cACzD;AAAA,YAAA,CAAE;AAAA,UAAA,GAZE,qBAAoBA,SAASC,OAAO;AAAA,QAAA,CAgB/C;AAAA,MAAA,CACG,CAAA;AAAA,IAAA,CAAA;AAAA,EAAA,CAGC;AAEjB;;"}
+{"version":3,"file":"PresetColors.cjs","sources":["../../../../../src/components/ColorPicker/PresetColors/PresetColors.tsx"],"sourcesContent":["import { ClassNames } from \"@emotion/react\";\nimport { HvTypography } from \"@core/components\";\n// @types/react-color seems to be broken\n// @ts-ignore\nimport { Swatch } from \"react-color/lib/components/common\";\nimport { styles } from \"./PresetColors.styles\";\nimport colorPickerPresetColorsClasses, {\n  HvColorPickerPresetColorsClasses,\n} from \"./presetColorsClasses\";\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 = ({\n  onClick,\n  colors,\n  title,\n  className,\n  classes,\n}: PresetColorsProps) => {\n  const handleClick = (hex: string) => {\n    onClick({\n      hex,\n      source: \"hex\",\n    });\n  };\n\n  return (\n    <ClassNames>\n      {({ css, cx }) => (\n        <div\n          className={cx(\n            colorPickerPresetColorsClasses.root,\n            css(styles.root),\n            className,\n            classes?.root\n          )}\n        >\n          {title && (\n            <HvTypography\n              className={cx(\n                colorPickerPresetColorsClasses.title,\n                css(styles.title),\n                classes?.title\n              )}\n              variant=\"caption1\"\n            >\n              {title}\n            </HvTypography>\n          )}\n          <div\n            className={cx(\n              colorPickerPresetColorsClasses.colors,\n              css(styles.colors),\n              classes?.colors\n            )}\n          >\n            {colors.map((color, index) => {\n              return (\n                <div\n                  key={`recommended-color-${color}-${index}`}\n                  className={cx(\n                    colorPickerPresetColorsClasses.swatchWrap,\n                    css(styles.swatchWrap),\n                    classes?.swatchWrap\n                  )}\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            })}\n          </div>\n        </div>\n      )}\n    </ClassNames>\n  );\n};\n"],"names":["PresetColors","onClick","colors","title","className","classes","handleClick","hex","source","ClassNames","children","css","cx","colorPickerPresetColorsClasses","root","styles","_jsx","HvTypography","variant","map","color","index","swatchWrap","Swatch","focusStyle","boxShadow"],"mappings":";;;;;;;;AAkBO,MAAMA,eAAeA,CAAC;AAAA,EAC3BC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AACiB,MAAM;AACjBC,QAAAA,cAAcA,CAACC,QAAgB;AAC3B,YAAA;AAAA,MACNA;AAAAA,MACAC,QAAQ;AAAA,IAAA,CACT;AAAA,EAAA;AAGH,wCACGC,MAAAA,YAAU;AAAA,IAAAC,UACRA,CAAC;AAAA,MAAEC;AAAAA,MAAKC;AAAAA,IAAAA,sCACP,OAAA;AAAA,MACER,WAAWQ,GACTC,4BAA+BC,MAC/BH,IAAII,2BAAOD,IAAI,GACfV,WACAC,mCAASS,IACX;AAAA,MAAEJ,UAEDP,CAAAA,SACCa,2BAAAA,IAACC,yBAAY;AAAA,QACXb,WAAWQ,GACTC,oBAA+BV,QAAAA,OAC/BQ,IAAII,oBAAAA,OAAOZ,KAAK,GAChBE,mCAASF,KACX;AAAA,QACAe,SAAQ;AAAA,QAAUR,UAEjBP;AAAAA,MAAAA,CACW,GAEhBa,2BAAAA,IAAA,OAAA;AAAA,QACEZ,WAAWQ,GACTC,oBAA+BX,QAAAA,QAC/BS,IAAII,oBAAAA,OAAOb,MAAM,GACjBG,mCAASH,MACX;AAAA,QAAEQ,UAEDR,OAAOiB,IAAI,CAACC,OAAOC,UAAU;AAC5B,gDACE,OAAA;AAAA,YAEEjB,WAAWQ,GACTC,oBAA+BS,QAAAA,YAC/BX,IAAII,oBAAAA,OAAOO,UAAU,GACrBjB,mCAASiB,UACX;AAAA,YAAEZ,yCAEDa,eAAM;AAAA,cACLH;AAAAA,cACAnB,SAASK;AAAAA,cACTkB,YAAY;AAAA,gBACVC,WAAY,4CAA2CL;AAAAA,cACzD;AAAA,YAAA,CACD;AAAA,UAAA,GAbK,qBAAoBA,SAASC,OAchC;AAAA,QAAA,CAER;AAAA,MAAA,CACE,CAAC;AAAA,IAAA,CACH;AAAA,EAAA,CAEG;AAEhB;;"}

package/dist/cjs/components/ColorPicker/PresetColors/presetColorsClasses.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"presetColorsClasses.cjs","sources":["../../../../../src/components/ColorPicker/PresetColors/presetColorsClasses.ts"],"sourcesContent":["import { getClasses } from \"@core/utils\";\n\nexport interface HvColorPickerPresetColorsClasses {\n  root?: string;\n  colors?: string;\n  title?: string;\n  swatchWrap?: string;\n}\n\nconst classKeys: (keyof HvColorPickerPresetColorsClasses)[] = [\n  \"colors\",\n  \"root\",\n  \"swatchWrap\",\n  \"title\",\n];\n\nconst colorPickerPresetColorsClasses = getClasses(\n  classKeys,\n  \"HvColorPicker-PresetColors\"\n);\n\nexport default colorPickerPresetColorsClasses;\n"],"names":["classKeys","colorPickerPresetColorsClasses","getClasses"],"mappings":";;;AASA,MAAMA,YAAwD,CAC5D,UACA,QACA,cACA,OAAO;AAGT,MAAMC,iCAAiCC,QACrCF,WAAAA,WACA,4BAA4B;AAG9B,MAAA,mCAAeC;;"}
+{"version":3,"file":"presetColorsClasses.cjs","sources":["../../../../../src/components/ColorPicker/PresetColors/presetColorsClasses.ts"],"sourcesContent":["import { getClasses } from \"@core/utils\";\n\nexport interface HvColorPickerPresetColorsClasses {\n  root?: string;\n  colors?: string;\n  title?: string;\n  swatchWrap?: string;\n}\n\nconst classKeys: (keyof HvColorPickerPresetColorsClasses)[] = [\n  \"colors\",\n  \"root\",\n  \"swatchWrap\",\n  \"title\",\n];\n\nconst colorPickerPresetColorsClasses = getClasses(\n  classKeys,\n  \"HvColorPicker-PresetColors\"\n);\n\nexport default colorPickerPresetColorsClasses;\n"],"names":["classKeys","colorPickerPresetColorsClasses","getClasses"],"mappings":";;;AASA,MAAMA,YAAwD,CAC5D,UACA,QACA,cACA,OAAO;AAGT,MAAMC,iCAAiCC,QACrCF,WAAAA,WACA,4BACF;AAEA,MAAA,mCAAeC;;"}

package/dist/cjs/components/ColorPicker/SavedColors/SavedColors.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SavedColors.cjs","sources":["../../../../../src/components/ColorPicker/SavedColors/SavedColors.tsx"],"sourcesContent":["import { ClassNames } from \"@emotion/react\";\nimport { HvButton } from \"@core/components\";\nimport { CloseXS, Add } from \"@hitachivantara/uikit-react-icons\";\n// @types/react-color seems to be broken\n// @ts-ignore\nimport { Swatch } from \"react-color/lib/components/common\";\nimport { styles } from \"./SavedColors.styles\";\n\nimport colorPickerSavedColorsClasses, {\n  HvColorPickerSavedColorsClasses,\n} from \"./savedColorsClasses\";\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  deleteButtonArialLabel?: string;\n  classes?: HvColorPickerSavedColorsClasses;\n}\n\nexport const SavedColors = ({\n  colors,\n  onClickColor,\n  onAddColor,\n  onRemoveColor,\n  deleteButtonArialLabel,\n  classes,\n}: SavedColorsProps) => {\n  const handleClick = (hex: string) => {\n    onClickColor({\n      hex,\n      source: \"hex\",\n    });\n  };\n\n  return (\n    <ClassNames>\n      {({ css, cx }) => (\n        <div\n          className={cx(\n            colorPickerSavedColorsClasses.root,\n            css(styles.root),\n            classes?.root\n          )}\n        >\n          <HvButton\n            className={cx(\n              colorPickerSavedColorsClasses.addButton,\n              css(styles.addButton),\n              classes?.addButton\n            )}\n            variant=\"secondarySubtle\"\n            icon\n            onClick={onAddColor}\n          >\n            <Add />\n          </HvButton>\n          {colors.map((color, index) => {\n            return (\n              <div\n                key={`saved-color-${color}-${index}`}\n                className={cx(\n                  colorPickerSavedColorsClasses.swatchRoot,\n                  css(styles.swatchRoot),\n                  classes?.swatchRoot\n                )}\n              >\n                <div\n                  className={cx(\n                    colorPickerSavedColorsClasses.swatchWrap,\n                    css(styles.swatchWrap),\n                    classes?.swatchWrap\n                  )}\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                <div\n                  className={cx(\n                    colorPickerSavedColorsClasses.removeButtonRoot,\n                    css(styles.removeButtonRoot),\n                    classes?.removeButtonRoot\n                  )}\n                >\n                  <HvButton\n                    className={cx(\n                      colorPickerSavedColorsClasses.removeButton,\n                      css(styles.removeButton),\n                      classes?.removeButton\n                    )}\n                    variant=\"secondarySubtle\"\n                    onClick={() => onRemoveColor(color, index)}\n                    tabIndex={0}\n                    aria-label={deleteButtonArialLabel}\n                  >\n                    <CloseXS iconSize=\"XS\" />\n                  </HvButton>\n                </div>\n              </div>\n            );\n          })}\n        </div>\n      )}\n    </ClassNames>\n  );\n};\n"],"names":["SavedColors","colors","onClickColor","onAddColor","onRemoveColor","deleteButtonArialLabel","classes","handleClick","hex","source","ClassNames","children","css","cx","className","colorPickerSavedColorsClasses","root","styles","_jsx","HvButton","addButton","variant","icon","onClick","Add","map","color","index","swatchRoot","swatchWrap","Swatch","focusStyle","boxShadow","removeButtonRoot","removeButton","tabIndex","CloseXS","iconSize"],"mappings":";;;;;;;;;AAqBO,MAAMA,cAAcA,CAAC;AAAA,EAC1BC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AACgB,MAAM;AAChBC,QAAAA,cAAcA,CAACC,QAAgB;AACtB,iBAAA;AAAA,MACXA;AAAAA,MACAC,QAAQ;AAAA,IAAA,CACT;AAAA,EAAA;AAGH,wCACGC,MAAAA,YAAU;AAAA,IAAAC,UACRA,CAAC;AAAA,MAAEC;AAAAA,MAAKC;AAAAA,IAAAA,sCACP,OAAA;AAAA,MACEC,WAAWD,GACTE,mBAA8BC,QAAAA,MAC9BJ,IAAIK,mBAAAA,OAAOD,IAAI,GACfV,mCAASU,IAAI;AAAA,MACbL,UAAA,CAEFO,2BAAAA,IAACC,iBAAQ;AAAA,QACPL,WAAWD,GACTE,mBAA8BK,QAAAA,WAC9BR,IAAIK,mBAAAA,OAAOG,SAAS,GACpBd,mCAASc,SAAS;AAAA,QAEpBC,SAAQ;AAAA,QACRC,MAAI;AAAA,QACJC,SAASpB;AAAAA,QAAWQ,UAEpBO,2BAAAA,IAACM,gBAAG,KAAA,EAAA;AAAA,MACK,CAAA,GACVvB,OAAOwB,IAAI,CAACC,OAAOC,UAAU;AAC5B,+CACE,OAAA;AAAA,UAEEb,WAAWD,GACTE,mBAA8Ba,QAAAA,YAC9BhB,IAAIK,mBAAAA,OAAOW,UAAU,GACrBtB,mCAASsB,UAAU;AAAA,UACnBjB,WAEFO,2BAAAA,IAAA,OAAA;AAAA,YACEJ,WAAWD,GACTE,mBAA8Bc,QAAAA,YAC9BjB,IAAIK,mBAAAA,OAAOY,UAAU,GACrBvB,mCAASuB,UAAU;AAAA,YACnBlB,yCAEDmB,eAAM;AAAA,cACLJ;AAAAA,cACAH,SAAShB;AAAAA,cACTwB,YAAY;AAAA,gBACVC,WAAY,4CAA2CN;AAAAA,cACzD;AAAA,YAAA,CAAE;AAAA,UAAA,CACF,GAEJR,2BAAAA,IAAA,OAAA;AAAA,YACEJ,WAAWD,GACTE,mBAA8BkB,QAAAA,kBAC9BrB,IAAIK,mBAAAA,OAAOgB,gBAAgB,GAC3B3B,mCAAS2B,gBAAgB;AAAA,YACzBtB,yCAEDQ,iBAAQ;AAAA,cACPL,WAAWD,GACTE,mBAA8BmB,QAAAA,cAC9BtB,IAAIK,mBAAAA,OAAOiB,YAAY,GACvB5B,mCAAS4B,YAAY;AAAA,cAEvBb,SAAQ;AAAA,cACRE,SAASA,MAAMnB,cAAcsB,OAAOC,KAAK;AAAA,cACzCQ,UAAU;AAAA,cACV,cAAY9B;AAAAA,cAAuBM,yCAElCyB,yBAAO;AAAA,gBAACC,UAAS;AAAA,cAAA,CAAI;AAAA,YAAA,CAAG;AAAA,UAAA,CAEvB,CAAA;AAAA,QAAA,GA1CA,eAAcX,SAASC,OAAO;AAAA,MAAA,CA6CzC,CAAC;AAAA,IAAA,CAAA;AAAA,EAAA,CAGK;AAEjB;;"}
+{"version":3,"file":"SavedColors.cjs","sources":["../../../../../src/components/ColorPicker/SavedColors/SavedColors.tsx"],"sourcesContent":["import { ClassNames } from \"@emotion/react\";\nimport { HvButton } from \"@core/components\";\nimport { CloseXS, Add } from \"@hitachivantara/uikit-react-icons\";\n// @types/react-color seems to be broken\n// @ts-ignore\nimport { Swatch } from \"react-color/lib/components/common\";\nimport { styles } from \"./SavedColors.styles\";\n\nimport colorPickerSavedColorsClasses, {\n  HvColorPickerSavedColorsClasses,\n} from \"./savedColorsClasses\";\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  deleteButtonArialLabel?: string;\n  classes?: HvColorPickerSavedColorsClasses;\n}\n\nexport const SavedColors = ({\n  colors,\n  onClickColor,\n  onAddColor,\n  onRemoveColor,\n  deleteButtonArialLabel,\n  classes,\n}: SavedColorsProps) => {\n  const handleClick = (hex: string) => {\n    onClickColor({\n      hex,\n      source: \"hex\",\n    });\n  };\n\n  return (\n    <ClassNames>\n      {({ css, cx }) => (\n        <div\n          className={cx(\n            colorPickerSavedColorsClasses.root,\n            css(styles.root),\n            classes?.root\n          )}\n        >\n          <HvButton\n            className={cx(\n              colorPickerSavedColorsClasses.addButton,\n              css(styles.addButton),\n              classes?.addButton\n            )}\n            variant=\"secondarySubtle\"\n            icon\n            onClick={onAddColor}\n          >\n            <Add />\n          </HvButton>\n          {colors.map((color, index) => {\n            return (\n              <div\n                key={`saved-color-${color}-${index}`}\n                className={cx(\n                  colorPickerSavedColorsClasses.swatchRoot,\n                  css(styles.swatchRoot),\n                  classes?.swatchRoot\n                )}\n              >\n                <div\n                  className={cx(\n                    colorPickerSavedColorsClasses.swatchWrap,\n                    css(styles.swatchWrap),\n                    classes?.swatchWrap\n                  )}\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                <div\n                  className={cx(\n                    colorPickerSavedColorsClasses.removeButtonRoot,\n                    css(styles.removeButtonRoot),\n                    classes?.removeButtonRoot\n                  )}\n                >\n                  <HvButton\n                    className={cx(\n                      colorPickerSavedColorsClasses.removeButton,\n                      css(styles.removeButton),\n                      classes?.removeButton\n                    )}\n                    variant=\"secondarySubtle\"\n                    onClick={() => onRemoveColor(color, index)}\n                    tabIndex={0}\n                    aria-label={deleteButtonArialLabel}\n                  >\n                    <CloseXS iconSize=\"XS\" />\n                  </HvButton>\n                </div>\n              </div>\n            );\n          })}\n        </div>\n      )}\n    </ClassNames>\n  );\n};\n"],"names":["SavedColors","colors","onClickColor","onAddColor","onRemoveColor","deleteButtonArialLabel","classes","handleClick","hex","source","ClassNames","children","css","cx","className","colorPickerSavedColorsClasses","root","styles","_jsx","HvButton","addButton","variant","icon","onClick","Add","map","color","index","swatchRoot","swatchWrap","Swatch","focusStyle","boxShadow","removeButtonRoot","removeButton","tabIndex","CloseXS","iconSize"],"mappings":";;;;;;;;;AAqBO,MAAMA,cAAcA,CAAC;AAAA,EAC1BC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AACgB,MAAM;AAChBC,QAAAA,cAAcA,CAACC,QAAgB;AACtB,iBAAA;AAAA,MACXA;AAAAA,MACAC,QAAQ;AAAA,IAAA,CACT;AAAA,EAAA;AAGH,wCACGC,MAAAA,YAAU;AAAA,IAAAC,UACRA,CAAC;AAAA,MAAEC;AAAAA,MAAKC;AAAAA,IAAAA,sCACP,OAAA;AAAA,MACEC,WAAWD,GACTE,mBAA8BC,QAAAA,MAC9BJ,IAAIK,mBAAAA,OAAOD,IAAI,GACfV,mCAASU,IACX;AAAA,MAAEL,UAAA,CAEFO,2BAAAA,IAACC,iBAAQ;AAAA,QACPL,WAAWD,GACTE,mBAA8BK,QAAAA,WAC9BR,IAAIK,mBAAAA,OAAOG,SAAS,GACpBd,mCAASc,SACX;AAAA,QACAC,SAAQ;AAAA,QACRC,MAAI;AAAA,QACJC,SAASpB;AAAAA,QAAWQ,UAEpBO,2BAAAA,IAACM,gBAAK,KAAA,EAAA;AAAA,MACE,CAAA,GACTvB,OAAOwB,IAAI,CAACC,OAAOC,UAAU;AAC5B,+CACE,OAAA;AAAA,UAEEb,WAAWD,GACTE,mBAA8Ba,QAAAA,YAC9BhB,IAAIK,mBAAAA,OAAOW,UAAU,GACrBtB,mCAASsB,UACX;AAAA,UAAEjB,WAEFO,2BAAAA,IAAA,OAAA;AAAA,YACEJ,WAAWD,GACTE,mBAA8Bc,QAAAA,YAC9BjB,IAAIK,mBAAAA,OAAOY,UAAU,GACrBvB,mCAASuB,UACX;AAAA,YAAElB,yCAEDmB,eAAM;AAAA,cACLJ;AAAAA,cACAH,SAAShB;AAAAA,cACTwB,YAAY;AAAA,gBACVC,WAAY,4CAA2CN;AAAAA,cACzD;AAAA,YAAA,CACD;AAAA,UAAA,CACE,GACLR,2BAAAA,IAAA,OAAA;AAAA,YACEJ,WAAWD,GACTE,mBAA8BkB,QAAAA,kBAC9BrB,IAAIK,mBAAAA,OAAOgB,gBAAgB,GAC3B3B,mCAAS2B,gBACX;AAAA,YAAEtB,yCAEDQ,iBAAQ;AAAA,cACPL,WAAWD,GACTE,mBAA8BmB,QAAAA,cAC9BtB,IAAIK,mBAAAA,OAAOiB,YAAY,GACvB5B,mCAAS4B,YACX;AAAA,cACAb,SAAQ;AAAA,cACRE,SAASA,MAAMnB,cAAcsB,OAAOC,KAAK;AAAA,cACzCQ,UAAU;AAAA,cACV,cAAY9B;AAAAA,cAAuBM,yCAElCyB,yBAAO;AAAA,gBAACC,UAAS;AAAA,cAAA,CAAM;AAAA,YAAA,CAChB;AAAA,UAAA,CACP,CAAC;AAAA,QAAA,GA1CA,eAAcX,SAASC,OA2C1B;AAAA,MAAA,CAER,CAAC;AAAA,IAAA,CACC;AAAA,EAAA,CAEG;AAEhB;;"}

package/dist/cjs/components/ColorPicker/SavedColors/savedColorsClasses.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"savedColorsClasses.cjs","sources":["../../../../../src/components/ColorPicker/SavedColors/savedColorsClasses.ts"],"sourcesContent":["import { getClasses } from \"@core/utils\";\n\nexport interface HvColorPickerSavedColorsClasses {\n  root?: string;\n  addButton?: string;\n  removeButton?: string;\n  swatchRoot?: string;\n  removeButtonRoot?: string;\n  swatchWrap?: string;\n}\n\nconst classKeys: (keyof HvColorPickerSavedColorsClasses)[] = [\n  \"addButton\",\n  \"removeButton\",\n  \"removeButtonRoot\",\n  \"root\",\n  \"swatchRoot\",\n  \"swatchWrap\",\n];\n\nconst colorPickerSavedColorsClasses = getClasses(\n  classKeys,\n  \"HvColorPicker-SavedColors\"\n);\n\nexport default colorPickerSavedColorsClasses;\n"],"names":["classKeys","colorPickerSavedColorsClasses","getClasses"],"mappings":";;;AAWA,MAAMA,YAAuD,CAC3D,aACA,gBACA,oBACA,QACA,cACA,YAAY;AAGd,MAAMC,gCAAgCC,QACpCF,WAAAA,WACA,2BAA2B;AAG7B,MAAA,kCAAeC;;"}
+{"version":3,"file":"savedColorsClasses.cjs","sources":["../../../../../src/components/ColorPicker/SavedColors/savedColorsClasses.ts"],"sourcesContent":["import { getClasses } from \"@core/utils\";\n\nexport interface HvColorPickerSavedColorsClasses {\n  root?: string;\n  addButton?: string;\n  removeButton?: string;\n  swatchRoot?: string;\n  removeButtonRoot?: string;\n  swatchWrap?: string;\n}\n\nconst classKeys: (keyof HvColorPickerSavedColorsClasses)[] = [\n  \"addButton\",\n  \"removeButton\",\n  \"removeButtonRoot\",\n  \"root\",\n  \"swatchRoot\",\n  \"swatchWrap\",\n];\n\nconst colorPickerSavedColorsClasses = getClasses(\n  classKeys,\n  \"HvColorPicker-SavedColors\"\n);\n\nexport default colorPickerSavedColorsClasses;\n"],"names":["classKeys","colorPickerSavedColorsClasses","getClasses"],"mappings":";;;AAWA,MAAMA,YAAuD,CAC3D,aACA,gBACA,oBACA,QACA,cACA,YAAY;AAGd,MAAMC,gCAAgCC,QACpCF,WAAAA,WACA,2BACF;AAEA,MAAA,kCAAeC;;"}

package/dist/cjs/components/Container/Container.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Container.cjs","sources":["../../../../src/components/Container/Container.tsx"],"sourcesContent":["import { useTheme } from \"@mui/material/styles\";\nimport { ContainerProps as MuiContainerProps } from \"@mui/material/Container\";\nimport { forwardRef } from \"react\";\nimport { HvBaseProps } from \"@core/types\";\nimport { clsx } from \"clsx\";\nimport { StyledRoot } from \"./Container.styles\";\nimport containerClasses, { HvContainerClasses } from \"./containerClasses\";\n\nexport interface HvContainerProps\n  extends Omit<MuiContainerProps, \"classes\">,\n    HvBaseProps {\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\nexport const HvContainer = forwardRef<HTMLDivElement, HvContainerProps>(\n  ({ maxWidth = false, classes, className, fixed, ...others }, ref) => {\n    const muiTheme = useTheme();\n    return (\n      <StyledRoot\n        className={className}\n        classes={{\n          root: clsx(containerClasses.root, classes?.root),\n          disableGutters: clsx(\n            containerClasses.disableGutters,\n            classes?.disableGutters\n          ),\n          fixed: clsx(containerClasses.fixed, classes?.fixed),\n          maxWidthXs: clsx(containerClasses.maxWidthXs, classes?.maxWidthXs),\n          maxWidthSm: clsx(containerClasses.maxWidthSm, classes?.maxWidthSm),\n          maxWidthMd: clsx(containerClasses.maxWidthMd, classes?.maxWidthMd),\n          maxWidthLg: clsx(containerClasses.maxWidthLg, classes?.maxWidthLg),\n          maxWidthXl: clsx(containerClasses.maxWidthXl, classes?.maxWidthXl),\n        }}\n        $breakpoints={muiTheme.breakpoints}\n        ref={ref}\n        maxWidth={maxWidth}\n        fixed={fixed}\n        {...others}\n      />\n    );\n  }\n);\n"],"names":["HvContainer","forwardRef","maxWidth","classes","className","fixed","others","ref","muiTheme","useTheme","StyledRoot","root","clsx","containerClasses","disableGutters","maxWidthXs","maxWidthSm","maxWidthMd","maxWidthLg","maxWidthXl","$breakpoints","breakpoints"],"mappings":";;;;;;;;AAmCaA,MAAAA,cAAcC,iBACzB,CAAC;AAAA,EAAEC,WAAW;AAAA,EAAOC;AAAAA,EAASC;AAAAA,EAAWC;AAAAA,EAAO,GAAGC;AAAO,GAAGC,QAAQ;AACnE,QAAMC,WAAWC,OAAAA;AACjB,wCACGC,iBAAAA,YAAU;AAAA,IACTN;AAAAA,IACAD,SAAS;AAAA,MACPQ,MAAMC,KAAAA,KAAKC,iBAAAA,QAAiBF,MAAMR,mCAASQ,IAAI;AAAA,MAC/CG,gBAAgBF,KAAAA,KACdC,iBAAAA,QAAiBC,gBACjBX,mCAASW,cAAc;AAAA,MAEzBT,OAAOO,KAAAA,KAAKC,iBAAAA,QAAiBR,OAAOF,mCAASE,KAAK;AAAA,MAClDU,YAAYH,KAAAA,KAAKC,iBAAAA,QAAiBE,YAAYZ,mCAASY,UAAU;AAAA,MACjEC,YAAYJ,KAAAA,KAAKC,iBAAAA,QAAiBG,YAAYb,mCAASa,UAAU;AAAA,MACjEC,YAAYL,KAAAA,KAAKC,iBAAAA,QAAiBI,YAAYd,mCAASc,UAAU;AAAA,MACjEC,YAAYN,KAAAA,KAAKC,iBAAAA,QAAiBK,YAAYf,mCAASe,UAAU;AAAA,MACjEC,YAAYP,KAAAA,KAAKC,iBAAAA,QAAiBM,YAAYhB,mCAASgB,UAAU;AAAA,IACnE;AAAA,IACAC,cAAcZ,SAASa;AAAAA,IACvBd;AAAAA,IACAL;AAAAA,IACAG;AAAAA,IAAa,GACTC;AAAAA,EAAAA,CACJ;AAEN,CAAC;;"}
+{"version":3,"file":"Container.cjs","sources":["../../../../src/components/Container/Container.tsx"],"sourcesContent":["import { useTheme } from \"@mui/material/styles\";\nimport { ContainerProps as MuiContainerProps } from \"@mui/material/Container\";\nimport { forwardRef } from \"react\";\nimport { HvBaseProps } from \"@core/types\";\nimport { clsx } from \"clsx\";\nimport { StyledRoot } from \"./Container.styles\";\nimport containerClasses, { HvContainerClasses } from \"./containerClasses\";\n\nexport interface HvContainerProps\n  extends Omit<MuiContainerProps, \"classes\">,\n    HvBaseProps {\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\nexport const HvContainer = forwardRef<HTMLDivElement, HvContainerProps>(\n  ({ maxWidth = false, classes, className, fixed, ...others }, ref) => {\n    const muiTheme = useTheme();\n    return (\n      <StyledRoot\n        className={className}\n        classes={{\n          root: clsx(containerClasses.root, classes?.root),\n          disableGutters: clsx(\n            containerClasses.disableGutters,\n            classes?.disableGutters\n          ),\n          fixed: clsx(containerClasses.fixed, classes?.fixed),\n          maxWidthXs: clsx(containerClasses.maxWidthXs, classes?.maxWidthXs),\n          maxWidthSm: clsx(containerClasses.maxWidthSm, classes?.maxWidthSm),\n          maxWidthMd: clsx(containerClasses.maxWidthMd, classes?.maxWidthMd),\n          maxWidthLg: clsx(containerClasses.maxWidthLg, classes?.maxWidthLg),\n          maxWidthXl: clsx(containerClasses.maxWidthXl, classes?.maxWidthXl),\n        }}\n        $breakpoints={muiTheme.breakpoints}\n        ref={ref}\n        maxWidth={maxWidth}\n        fixed={fixed}\n        {...others}\n      />\n    );\n  }\n);\n"],"names":["HvContainer","forwardRef","maxWidth","classes","className","fixed","others","ref","muiTheme","useTheme","StyledRoot","root","clsx","containerClasses","disableGutters","maxWidthXs","maxWidthSm","maxWidthMd","maxWidthLg","maxWidthXl","$breakpoints","breakpoints"],"mappings":";;;;;;;;AAmCaA,MAAAA,cAAcC,iBACzB,CAAC;AAAA,EAAEC,WAAW;AAAA,EAAOC;AAAAA,EAASC;AAAAA,EAAWC;AAAAA,EAAO,GAAGC;AAAO,GAAGC,QAAQ;AACnE,QAAMC,WAAWC,OAAAA;AACjB,wCACGC,iBAAAA,YAAU;AAAA,IACTN;AAAAA,IACAD,SAAS;AAAA,MACPQ,MAAMC,KAAAA,KAAKC,iBAAAA,QAAiBF,MAAMR,mCAASQ,IAAI;AAAA,MAC/CG,gBAAgBF,KAAAA,KACdC,iBAAAA,QAAiBC,gBACjBX,mCAASW,cACX;AAAA,MACAT,OAAOO,KAAAA,KAAKC,iBAAAA,QAAiBR,OAAOF,mCAASE,KAAK;AAAA,MAClDU,YAAYH,KAAAA,KAAKC,iBAAAA,QAAiBE,YAAYZ,mCAASY,UAAU;AAAA,MACjEC,YAAYJ,KAAAA,KAAKC,iBAAAA,QAAiBG,YAAYb,mCAASa,UAAU;AAAA,MACjEC,YAAYL,KAAAA,KAAKC,iBAAAA,QAAiBI,YAAYd,mCAASc,UAAU;AAAA,MACjEC,YAAYN,KAAAA,KAAKC,iBAAAA,QAAiBK,YAAYf,mCAASe,UAAU;AAAA,MACjEC,YAAYP,KAAAA,KAAKC,iBAAAA,QAAiBM,YAAYhB,mCAASgB,UAAU;AAAA,IACnE;AAAA,IACAC,cAAcZ,SAASa;AAAAA,IACvBd;AAAAA,IACAL;AAAAA,IACAG;AAAAA,IAAa,GACTC;AAAAA,EAAAA,CACL;AAEL,CACF;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"Container.styles.cjs","sources":["../../../../src/components/Container/Container.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport {\n  Container as MuiContainer,\n  Breakpoints as MuiBreakpoints,\n} from \"@mui/material\";\nimport { transientOptions } from \"@core/utils/transientOptions\";\n\nexport const StyledRoot = styled(\n  MuiContainer,\n  transientOptions\n)(({ $breakpoints }: { $breakpoints: MuiBreakpoints }) => ({\n  paddingLeft: theme.space.sm,\n  paddingRight: theme.space.sm,\n  [$breakpoints.up(\"md\")]: {\n    paddingLeft: theme.spacing(4),\n    paddingRight: theme.spacing(4),\n  },\n}));\n"],"names":["StyledRoot","MuiContainer","process","env","NODE_ENV","_extends","target","transientOptions","label","$breakpoints","paddingLeft","theme","space","sm","paddingRight","up","spacing"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAQaA,MAAAA,sDACXC,SAAAA,WAAYC,QAAAC,IAAAC,4BAAAC,SAAA,IAAA;AAAA,EAAAC,QAAA;AAAA,GACZC,iBAAgB,gBAAA,IAAAF,SAAA,IAAA;AAAA,EAAAC,QAAA;AAAA,EAAAE,OAAA;AAAA,GAAhBD,iBAAAA,gBAAgB,CACjB,EAAC,CAAC;AAAA,EAAEE;AAA+C,OAAO;AAAA,EACzDC,aAAaC,YAAAA,MAAMC,MAAMC;AAAAA,EACzBC,cAAcH,YAAAA,MAAMC,MAAMC;AAAAA,EAC1B,CAACJ,aAAaM,GAAG,IAAI,CAAC,GAAG;AAAA,IACvBL,aAAaC,YAAAA,MAAMK,QAAQ,CAAC;AAAA,IAC5BF,cAAcH,YAAAA,MAAMK,QAAQ,CAAC;AAAA,EAC/B;AACF,IAAEd,QAAAC,IAAAC,aAAC,eAAA,KAAA,yuCAAA;;"}
+{"version":3,"file":"Container.styles.cjs","sources":["../../../../src/components/Container/Container.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport {\n  Container as MuiContainer,\n  Breakpoints as MuiBreakpoints,\n} from \"@mui/material\";\nimport { transientOptions } from \"@core/utils/transientOptions\";\n\nexport const StyledRoot = styled(\n  MuiContainer,\n  transientOptions\n)(({ $breakpoints }: { $breakpoints: MuiBreakpoints }) => ({\n  paddingLeft: theme.space.sm,\n  paddingRight: theme.space.sm,\n  [$breakpoints.up(\"md\")]: {\n    paddingLeft: theme.spacing(4),\n    paddingRight: theme.spacing(4),\n  },\n}));\n"],"names":["StyledRoot","MuiContainer","process","env","NODE_ENV","_extends","target","transientOptions","label","$breakpoints","paddingLeft","theme","space","sm","paddingRight","up","spacing"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAQaA,MAAAA,sDACXC,SAAAA,WAAYC,QAAAC,IAAAC,4BAAAC,SAAA,IAAA;AAAA,EAAAC,QAAA;AAAA,GACZC,iBAAgB,gBAAA,IAAAF,SAAA,IAAA;AAAA,EAAAC,QAAA;AAAA,EAAAE,OAAA;AAAA,GAAhBD,iBAAAA,gBAAgB,CAClB,EAAE,CAAC;AAAA,EAAEE;AAA+C,OAAO;AAAA,EACzDC,aAAaC,YAAAA,MAAMC,MAAMC;AAAAA,EACzBC,cAAcH,YAAAA,MAAMC,MAAMC;AAAAA,EAC1B,CAACJ,aAAaM,GAAG,IAAI,CAAC,GAAG;AAAA,IACvBL,aAAaC,YAAAA,MAAMK,QAAQ,CAAC;AAAA,IAC5BF,cAAcH,YAAAA,MAAMK,QAAQ,CAAC;AAAA,EAC/B;AACF,IAAEd,QAAAC,IAAAC,aAAC,eAAA,KAAA,yuCAAA;;"}

package/dist/cjs/components/Controls/Controls.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Controls.cjs","sources":["../../../../src/components/Controls/Controls.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { HvBaseProps, HvExtraProps } from \"@core/types\";\nimport { HvButton, HvMultiButton } from \"@core/components\";\nimport { setId } from \"@core/utils\";\nimport { useControlled } from \"@core/hooks\";\nimport { Children } from \"react\";\nimport { HvTableInstance } from \"@core/components/Table/hooks/useTable\";\nimport { HvControlsContextProvider } from \"./context/ControlsContext\";\nimport controlsClasses, { HvControlsClasses } from \"./controlClasses\";\nimport { StyledRoot, StyledSection } from \"./Controls.styles\";\n\nexport interface HvControlsViewConfiguration extends HvExtraProps {\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?: (event: Event, id: string) => 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 = ({\n  id,\n  className,\n  classes,\n  views,\n  callbacks,\n  selectedView,\n  defaultView,\n  children,\n  hideViewSwitcher = false,\n  onViewChange,\n}: HvControlsProps) => {\n  const [currentView, setCurrentView] = useControlled(\n    selectedView,\n    defaultView\n  );\n\n  const onViewChangeHandler = (evt, btnId) => {\n    setCurrentView(btnId);\n    onViewChange?.(evt, btnId);\n  };\n\n  const onSearchHandler = (value) => callbacks?.setGlobalFilter?.(value);\n  const onSortHandler = (value) =>\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    <StyledRoot\n      id={id}\n      className={clsx(className, controlsClasses.root, classes?.root)}\n    >\n      <HvControlsContextProvider\n        value={{\n          onSearch: onSearchHandler,\n          onSort: onSortHandler,\n        }}\n      >\n        <StyledSection\n          className={clsx(\n            classes?.section,\n            controlsClasses.section,\n            classes?.leftSection,\n            controlsClasses.leftSection\n          )}\n        >\n          {leftChildren}\n        </StyledSection>\n        <StyledSection\n          className={clsx(\n            classes?.section,\n            controlsClasses.section,\n            classes?.rightSection,\n            controlsClasses.rightSection\n          )}\n        >\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        </StyledSection>\n      </HvControlsContextProvider>\n    </StyledRoot>\n  );\n};\n"],"names":["HvControls","id","className","classes","views","callbacks","selectedView","defaultView","children","hideViewSwitcher","onViewChange","currentView","setCurrentView","useControlled","onViewChangeHandler","evt","btnId","onSearchHandler","value","setGlobalFilter","onSortHandler","setSortBy","accessor","desc","childrenCount","Children","count","childrenArray","toArray","childrenIndexCut","Math","round","leftChildren","slice","rightChildren","StyledRoot","clsx","controlsClasses","root","HvControlsContextProvider","onSearch","onSort","_jsx","StyledSection","section","leftSection","_jsxs","rightSection","length","HvMultiButton","setId","map","icon","others","HvButton","selected","onClick"],"mappings":";;;;;;;;;;;;AAoDO,MAAMA,aAAaA,CAAC;AAAA,EACzBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,mBAAmB;AAAA,EACnBC;AACe,MAAM;AACrB,QAAM,CAACC,aAAaC,cAAc,IAAIC,cAAAA,cACpCP,cACAC,WAAW;AAGPO,QAAAA,sBAAsBA,CAACC,KAAKC,UAAU;AAC1CJ,mBAAeI,KAAK;AACpBN,iDAAeK,KAAKC;AAAAA,EAAK;AAG3B,QAAMC,kBAAmBC,CAAAA,UAAAA;;AAAUb,wDAAWc,oBAAXd,mCAA6Ba;AAAAA;AAChE,QAAME,gBAAiBF,CAAAA;;AACrBb,wDAAWgB,cAAXhB,mCAAuB,CACrB;AAAA,MACEJ,IAAIiB,+BAAOI;AAAAA,MACXC,MAAML,+BAAOK;AAAAA,IACd,CAAA;AAAA;AAGCC,QAAAA,gBAAgBC,MAAAA,SAASC,MAAMlB,QAAQ;AACvCmB,QAAAA,gBAAgBF,MAAAA,SAASG,QAAQpB,QAAQ;AAE/C,QAAMqB,mBACJL,gBAAgB,IAAIM,KAAKC,MAAMP,gBAAgB,GAAG,IAAI;AACxD,QAAMQ,eAAeL,cAAcM,MAAM,GAAGJ,gBAAgB;AAC5D,QAAMK,gBAAgBP,cAAcM,MAClCJ,kBACAL,iBAAiB,CAAC;AAGpB,wCACGW,gBAAAA,YAAU;AAAA,IACTlC;AAAAA,IACAC,WAAWkC,KAAKlC,KAAAA,WAAWmC,eAAgBC,QAAAA,MAAMnC,mCAASmC,IAAI;AAAA,IAAE9B,0CAE/D+B,2CAAyB;AAAA,MACxBrB,OAAO;AAAA,QACLsB,UAAUvB;AAAAA,QACVwB,QAAQrB;AAAAA,MACV;AAAA,MAAEZ,UAAA,CAEFkC,2BAAAA,IAACC,+BAAa;AAAA,QACZzC,WAAWkC,KAAAA,KACTjC,mCAASyC,SACTP,eAAAA,QAAgBO,SAChBzC,mCAAS0C,aACTR,eAAAA,QAAgBQ,WAAW;AAAA,QAC3BrC,UAEDwB;AAAAA,MAAAA,CACa,GAChBc,2BAAAA,KAACH,+BAAa;AAAA,QACZzC,WAAWkC,KAAAA,KACTjC,mCAASyC,SACTP,eAAAA,QAAgBO,SAChBzC,mCAAS4C,cACTV,eAAAA,QAAgBU,YAAY;AAAA,QAC5BvC,WAED0B,eACA9B,SAAS,CAACK,qBAAoBL,+BAAO4C,UAAS,KAC7CN,2BAAAA,IAACO,2BAAa;AAAA,UAAChD,IAAIiD,MAAAA,MAAMjD,IAAI,mBAAmB;AAAA,UAAEO,UAC/CJ,MAAM+C,IAAI,CAAC;AAAA,YAAElD,IAAIe;AAAAA,YAAOoC;AAAAA,YAAM,GAAGC;AAAAA,UAAAA,qCAC/BC,OAAAA,UAAQ;AAAA,YACPrD,IAAIe;AAAAA,YAEJoC,MAAI;AAAA,YACJG,UAAU5C,gBAAgBK;AAAAA,YAC1BwC,SAAUzC,CAAAA,QAAQD,oBAAoBC,KAAKC,KAAK;AAAA,YAAE,GAC9CqC;AAAAA,YAAM7C,UAET4C;AAAAA,UAAI,GANApC,KAAK,CAQb;AAAA,QAAA,CAEJ,CAAA;AAAA,MAAA,CACa,CAAA;AAAA,IAAA,CAAA;AAAA,EAAA,CAEP;AAEjB;;"}
+{"version":3,"file":"Controls.cjs","sources":["../../../../src/components/Controls/Controls.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { HvBaseProps, HvExtraProps } from \"@core/types\";\nimport { HvButton, HvMultiButton } from \"@core/components\";\nimport { setId } from \"@core/utils\";\nimport { useControlled } from \"@core/hooks\";\nimport { Children } from \"react\";\nimport { HvTableInstance } from \"@core/components/Table/hooks/useTable\";\nimport { HvControlsContextProvider } from \"./context/ControlsContext\";\nimport controlsClasses, { HvControlsClasses } from \"./controlClasses\";\nimport { StyledRoot, StyledSection } from \"./Controls.styles\";\n\nexport interface HvControlsViewConfiguration extends HvExtraProps {\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?: (event: Event, id: string) => 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 = ({\n  id,\n  className,\n  classes,\n  views,\n  callbacks,\n  selectedView,\n  defaultView,\n  children,\n  hideViewSwitcher = false,\n  onViewChange,\n}: HvControlsProps) => {\n  const [currentView, setCurrentView] = useControlled(\n    selectedView,\n    defaultView\n  );\n\n  const onViewChangeHandler = (evt, btnId) => {\n    setCurrentView(btnId);\n    onViewChange?.(evt, btnId);\n  };\n\n  const onSearchHandler = (value) => callbacks?.setGlobalFilter?.(value);\n  const onSortHandler = (value) =>\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    <StyledRoot\n      id={id}\n      className={clsx(className, controlsClasses.root, classes?.root)}\n    >\n      <HvControlsContextProvider\n        value={{\n          onSearch: onSearchHandler,\n          onSort: onSortHandler,\n        }}\n      >\n        <StyledSection\n          className={clsx(\n            classes?.section,\n            controlsClasses.section,\n            classes?.leftSection,\n            controlsClasses.leftSection\n          )}\n        >\n          {leftChildren}\n        </StyledSection>\n        <StyledSection\n          className={clsx(\n            classes?.section,\n            controlsClasses.section,\n            classes?.rightSection,\n            controlsClasses.rightSection\n          )}\n        >\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        </StyledSection>\n      </HvControlsContextProvider>\n    </StyledRoot>\n  );\n};\n"],"names":["HvControls","id","className","classes","views","callbacks","selectedView","defaultView","children","hideViewSwitcher","onViewChange","currentView","setCurrentView","useControlled","onViewChangeHandler","evt","btnId","onSearchHandler","value","setGlobalFilter","onSortHandler","setSortBy","accessor","desc","childrenCount","Children","count","childrenArray","toArray","childrenIndexCut","Math","round","leftChildren","slice","rightChildren","StyledRoot","clsx","controlsClasses","root","HvControlsContextProvider","onSearch","onSort","_jsx","StyledSection","section","leftSection","_jsxs","rightSection","length","HvMultiButton","setId","map","icon","others","HvButton","selected","onClick"],"mappings":";;;;;;;;;;;;AAoDO,MAAMA,aAAaA,CAAC;AAAA,EACzBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,mBAAmB;AAAA,EACnBC;AACe,MAAM;AACrB,QAAM,CAACC,aAAaC,cAAc,IAAIC,cAAAA,cACpCP,cACAC,WACF;AAEMO,QAAAA,sBAAsBA,CAACC,KAAKC,UAAU;AAC1CJ,mBAAeI,KAAK;AACpBN,iDAAeK,KAAKC;AAAAA,EAAK;AAG3B,QAAMC,kBAAmBC,CAAAA,UAAAA;;AAAUb,wDAAWc,oBAAXd,mCAA6Ba;AAAAA;AAChE,QAAME,gBAAiBF,CAAAA;;AACrBb,wDAAWgB,cAAXhB,mCAAuB,CACrB;AAAA,MACEJ,IAAIiB,+BAAOI;AAAAA,MACXC,MAAML,+BAAOK;AAAAA,IACd,CAAA;AAAA;AAGCC,QAAAA,gBAAgBC,MAAAA,SAASC,MAAMlB,QAAQ;AACvCmB,QAAAA,gBAAgBF,MAAAA,SAASG,QAAQpB,QAAQ;AAE/C,QAAMqB,mBACJL,gBAAgB,IAAIM,KAAKC,MAAMP,gBAAgB,GAAG,IAAI;AACxD,QAAMQ,eAAeL,cAAcM,MAAM,GAAGJ,gBAAgB;AAC5D,QAAMK,gBAAgBP,cAAcM,MAClCJ,kBACAL,iBAAiB,CACnB;AAEA,wCACGW,gBAAAA,YAAU;AAAA,IACTlC;AAAAA,IACAC,WAAWkC,KAAKlC,KAAAA,WAAWmC,eAAgBC,QAAAA,MAAMnC,mCAASmC,IAAI;AAAA,IAAE9B,0CAE/D+B,2CAAyB;AAAA,MACxBrB,OAAO;AAAA,QACLsB,UAAUvB;AAAAA,QACVwB,QAAQrB;AAAAA,MACV;AAAA,MAAEZ,UAAA,CAEFkC,2BAAAA,IAACC,+BAAa;AAAA,QACZzC,WAAWkC,KAAAA,KACTjC,mCAASyC,SACTP,eAAAA,QAAgBO,SAChBzC,mCAAS0C,aACTR,eAAAA,QAAgBQ,WAClB;AAAA,QAAErC,UAEDwB;AAAAA,MAAAA,CACY,GACfc,2BAAAA,KAACH,+BAAa;AAAA,QACZzC,WAAWkC,KAAAA,KACTjC,mCAASyC,SACTP,eAAAA,QAAgBO,SAChBzC,mCAAS4C,cACTV,eAAAA,QAAgBU,YAClB;AAAA,QAAEvC,WAED0B,eACA9B,SAAS,CAACK,qBAAoBL,+BAAO4C,UAAS,KAC7CN,2BAAAA,IAACO,2BAAa;AAAA,UAAChD,IAAIiD,MAAAA,MAAMjD,IAAI,mBAAmB;AAAA,UAAEO,UAC/CJ,MAAM+C,IAAI,CAAC;AAAA,YAAElD,IAAIe;AAAAA,YAAOoC;AAAAA,YAAM,GAAGC;AAAAA,UAAAA,qCAC/BC,OAAAA,UAAQ;AAAA,YACPrD,IAAIe;AAAAA,YAEJoC,MAAI;AAAA,YACJG,UAAU5C,gBAAgBK;AAAAA,YAC1BwC,SAAUzC,CAAAA,QAAQD,oBAAoBC,KAAKC,KAAK;AAAA,YAAE,GAC9CqC;AAAAA,YAAM7C,UAET4C;AAAAA,UAAI,GANApC,KAOG,CACX;AAAA,QAAA,CACY,CAChB;AAAA,MAAA,CACY,CAAC;AAAA,IAAA,CACS;AAAA,EAAA,CACjB;AAEhB;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"Controls.styles.cjs","sources":["../../../../src/components/Controls/Controls.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\n\nexport const StyledRoot = styled(\"div\")({\n  display: \"inline-flex\",\n  width: \"100%\",\n  justifyContent: \"space-between\",\n});\n\nexport const StyledSection = styled(\"div\")({\n  display: \"inline-flex\",\n  alignItems: \"flex-end\",\n  gap: 10,\n});\n"],"names":["StyledRoot","_styled","process","env","NODE_ENV","target","label","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","StyledSection"],"mappings":";;;;;;;;AAEO,MAAMA,aAAoBC,iCAAA,QAAA,OAAKC,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAACJ,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAG,MAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAD,MAAA;AAAA,EAAAC,QAAA;AAAA,EAAAC,KAAA;AAAA,EAAAC,UAAAC;AAAA,CAIrC;AAEK,MAAMC,gBAAuBX,iCAAA,QAAA,OAAKC,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAACJ,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAG,MAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAD,MAAA;AAAA,EAAAC,QAAA;AAAA,EAAAC,KAAA;AAAA,EAAAC,UAAAC;AAAA,CAIxC;;;"}
+{"version":3,"file":"Controls.styles.cjs","sources":["../../../../src/components/Controls/Controls.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\n\nexport const StyledRoot = styled(\"div\")({\n  display: \"inline-flex\",\n  width: \"100%\",\n  justifyContent: \"space-between\",\n});\n\nexport const StyledSection = styled(\"div\")({\n  display: \"inline-flex\",\n  alignItems: \"flex-end\",\n  gap: 10,\n});\n"],"names":["StyledRoot","_styled","process","env","NODE_ENV","target","label","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","StyledSection"],"mappings":";;;;;;;;AAEO,MAAMA,aAAoBC,iCAAA,QAAA,OAAKC,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAACJ,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAG,MAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAD,MAAA;AAAA,EAAAC,QAAA;AAAA,EAAAC,KAAA;AAAA,EAAAC,UAAAC;AAAA,CAItC;AAEM,MAAMC,gBAAuBX,iCAAA,QAAA,OAAKC,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAACJ,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAG,MAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAD,MAAA;AAAA,EAAAC,QAAA;AAAA,EAAAC,KAAA;AAAA,EAAAC,UAAAC;AAAA,CAIzC;;;"}