@hitachivantara/uikit-react-core 5.18.0 → 5.18.1

package/dist/cjs/components/Accordion/Accordion.cjs

@@ -86,7 +86,7 @@ const HvAccordion = ({
       children: accordionButton
     });
     return result;
-  }, [classes, handleClick, handleKeyDown, label, accordionHeaderId, disabled, headingLevel, isOpen]);
+  }, [classes, handleClick, handleKeyDown, label, accordionHeaderId, disabled, headingLevel, isOpen, labelVariant]);
   return /* @__PURE__ */ jsxRuntime.jsxs(Accordion_styles.StyledRoot, {
     id,
     className: clsx.clsx(className, accordionClasses.default.root, classes == null ? void 0 : classes.root),

package/dist/cjs/components/Accordion/Accordion.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.cjs","sources":["../../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import React, {\n  SyntheticEvent,\n  useCallback,\n  useMemo,\n  HTMLAttributes,\n} from \"react\";\nimport { clsx } from \"clsx\";\nimport { useControlled } from \"@core/hooks\";\nimport { DropDownXS, DropUpXS } from \"@hitachivantara/uikit-react-icons\";\nimport { HvBaseProps } from \"@core/types\";\nimport { setId } from \"@core/utils\";\nimport { HvTypographyVariants } from \"@core/components\";\nimport { StyledContainer, StyledLabel, StyledRoot } from \"./Accordion.styles\";\nimport accordionClasses, { HvAccordionClasses } from \"./accordionClasses\";\n\nexport interface HvAccordionProps\n  extends HvBaseProps<HTMLDivElement, \"onChange\"> {\n  /**\n   * Id to be applied to the root node of the accordion.\n   */\n  id?: string;\n  /**\n   * Class names to be applied to the accordion.\n   */\n  className?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes?: HvAccordionClasses;\n  /**\n   * The accordion label button.\n   */\n  label?: string;\n  /**\n   * The function that will be executed whenever the accordion toggles it will receive the state of the accordion\n   */\n  onChange?: (event: React.SyntheticEvent, value: boolean) => void;\n  /**\n   * Whether the accordion is open or not, if this property is defined the accordion must be fully controlled.\n   */\n  expanded?: boolean;\n  /**\n   * When uncontrolled, defines the initial expanded state.\n   */\n  defaultExpanded?: boolean;\n  /**\n   * An object containing props to be passed onto container holding the accordion children.\n   */\n  containerProps?: HTMLAttributes<HTMLDivElement>;\n  /**\n   * Heading Level to apply to accordion button if ´undefined´ the button won't have a header wrapper.\n   */\n  headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;\n  /**\n   * Is the accordion disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Typography variant for the label.\n   */\n  labelVariant?: HvTypographyVariants;\n  /**\n   * Content to be rendered\n   */\n  children: React.ReactNode;\n}\n\n/**\n * A accordion is a design element that expands in place to expose hidden information.\n */\nexport const HvAccordion = ({\n  id,\n  className,\n  classes,\n  disabled = false,\n  label,\n  onChange,\n  children,\n  expanded,\n  headingLevel,\n  defaultExpanded = false,\n  containerProps,\n  labelVariant = \"label\",\n  ...others\n}: HvAccordionProps) => {\n  const [isOpen, setIsOpen] = useControlled(expanded, Boolean(defaultExpanded));\n\n  const handleAction = useCallback(\n    (event: SyntheticEvent) => {\n      if (!disabled) {\n        onChange?.(event, isOpen);\n        setIsOpen(!isOpen);\n        return true;\n      }\n      return false;\n    },\n    [disabled, onChange, isOpen, setIsOpen]\n  );\n\n  const handleClick = useCallback(\n    (event: SyntheticEvent) => {\n      handleAction(event);\n      event.preventDefault();\n      event.stopPropagation();\n    },\n    [handleAction]\n  );\n\n  const handleKeyDown = useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      let isEventHandled = false;\n      const { key } = event;\n\n      if (\n        event.altKey ||\n        event.ctrlKey ||\n        event.metaKey ||\n        event.currentTarget !== event.target\n      ) {\n        return;\n      }\n      switch (key) {\n        case \"Enter\":\n        case \" \":\n          isEventHandled = handleAction(event);\n          break;\n        default:\n          return;\n      }\n\n      if (isEventHandled) {\n        event.preventDefault();\n        event.stopPropagation();\n      }\n    },\n    [handleAction]\n  );\n\n  const accordionHeaderId = setId(id, \"button\");\n  const accordionContainer = setId(id, \"container\");\n  const accordionHeader = useMemo(() => {\n    const color = (disabled && [\"secondary_60\"]) || undefined;\n\n    const accordionButton = (\n      <StyledLabel\n        id={accordionHeaderId}\n        component=\"div\"\n        role=\"button\"\n        className={clsx(\n          accordionClasses.label,\n          classes?.label,\n          disabled && clsx(accordionClasses.disabled, classes?.disabled)\n        )}\n        disabled={disabled}\n        tabIndex={0}\n        onKeyDown={handleKeyDown}\n        onClick={handleClick}\n        variant={labelVariant}\n        aria-expanded={isOpen}\n        aria-disabled={disabled}\n      >\n        {isOpen ? <DropUpXS color={color} /> : <DropDownXS color={color} />}\n        {label}\n      </StyledLabel>\n    );\n    const result =\n      headingLevel === undefined ? (\n        accordionButton\n      ) : (\n        <StyledLabel component={`h${headingLevel}`} variant={labelVariant}>\n          {accordionButton}\n        </StyledLabel>\n      );\n    return result;\n  }, [\n    classes,\n    handleClick,\n    handleKeyDown,\n    label,\n    accordionHeaderId,\n    disabled,\n    headingLevel,\n    isOpen,\n  ]);\n\n  return (\n    <StyledRoot\n      id={id}\n      className={clsx(className, accordionClasses.root, classes?.root)}\n      {...others}\n    >\n      {accordionHeader}\n      <StyledContainer\n        id={accordionContainer}\n        role=\"region\"\n        aria-labelledby={accordionHeaderId}\n        className={clsx(\n          accordionClasses.container,\n          classes?.container,\n          !isOpen && clsx(accordionClasses.hidden, classes?.hidden)\n        )}\n        hidden={!isOpen}\n        {...containerProps}\n      >\n        {children}\n      </StyledContainer>\n    </StyledRoot>\n  );\n};\n"],"names":["HvAccordion","id","className","classes","disabled","label","onChange","children","expanded","headingLevel","defaultExpanded","containerProps","labelVariant","others","isOpen","setIsOpen","useControlled","Boolean","handleAction","useCallback","event","handleClick","preventDefault","stopPropagation","handleKeyDown","isEventHandled","key","altKey","ctrlKey","metaKey","currentTarget","target","accordionHeaderId","setId","accordionContainer","accordionHeader","useMemo","color","undefined","accordionButton","StyledLabel","component","role","clsx","accordionClasses","tabIndex","onKeyDown","onClick","variant","_jsx","DropUpXS","DropDownXS","result","StyledRoot","root","StyledContainer","container","hidden"],"mappings":";;;;;;;;;;AAsEO,MAAMA,cAAcA,CAAC;AAAA,EAC1BC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,WAAW;AAAA,EACXC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,kBAAkB;AAAA,EAClBC;AAAAA,EACAC,eAAe;AAAA,EACf,GAAGC;AACa,MAAM;AAChB,QAAA,CAACC,QAAQC,SAAS,IAAIC,cAAAA,cAAcR,UAAUS,QAAQP,eAAe,CAAC;AAEtEQ,QAAAA,eAAeC,kBACnB,CAACC,UAA0B;AACzB,QAAI,CAAChB,UAAU;AACbE,2CAAWc,OAAON;AAClBC,gBAAU,CAACD,MAAM;AACV,aAAA;AAAA,IACT;AACO,WAAA;AAAA,KAET,CAACV,UAAUE,UAAUQ,QAAQC,SAAS,CACxC;AAEMM,QAAAA,cAAcF,kBAClB,CAACC,UAA0B;AACzBF,iBAAaE,KAAK;AAClBA,UAAME,eAAe;AACrBF,UAAMG,gBAAgB;AAAA,EAAA,GAExB,CAACL,YAAY,CACf;AAEMM,QAAAA,gBAAgBL,kBACpB,CAACC,UAA+C;AAC9C,QAAIK,iBAAiB;AACf,UAAA;AAAA,MAAEC;AAAAA,IAAQN,IAAAA;AAGdA,QAAAA,MAAMO,UACNP,MAAMQ,WACNR,MAAMS,WACNT,MAAMU,kBAAkBV,MAAMW,QAC9B;AACA;AAAA,IACF;AACA,YAAQL,KAAG;AAAA,MACT,KAAK;AAAA,MACL,KAAK;AACHD,yBAAiBP,aAAaE,KAAK;AACnC;AAAA,MACF;AACE;AAAA,IACJ;AAEA,QAAIK,gBAAgB;AAClBL,YAAME,eAAe;AACrBF,YAAMG,gBAAgB;AAAA,IACxB;AAAA,EAAA,GAEF,CAACL,YAAY,CACf;AAEMc,QAAAA,oBAAoBC,MAAAA,MAAMhC,IAAI,QAAQ;AACtCiC,QAAAA,qBAAqBD,MAAAA,MAAMhC,IAAI,WAAW;AAC1CkC,QAAAA,kBAAkBC,MAAAA,QAAQ,MAAM;AACpC,UAAMC,QAASjC,YAAY,CAAC,cAAc,KAAMkC;AAE1CC,UAAAA,kDACHC,8BAAW;AAAA,MACVvC,IAAI+B;AAAAA,MACJS,WAAU;AAAA,MACVC,MAAK;AAAA,MACLxC,WAAWyC,KAAAA,KACTC,iBAAAA,QAAiBvC,OACjBF,mCAASE,OACTD,YAAYuC,KAAAA,KAAKC,iBAAAA,QAAiBxC,UAAUD,mCAASC,QAAQ,CAC/D;AAAA,MACAA;AAAAA,MACAyC,UAAU;AAAA,MACVC,WAAWtB;AAAAA,MACXuB,SAAS1B;AAAAA,MACT2B,SAASpC;AAAAA,MACT,iBAAeE;AAAAA,MACf,iBAAeV;AAAAA,MAASG,UAEvBO,CAAAA,SAASmC,2BAAAA,IAACC,0BAAQ;AAAA,QAACb;AAAAA,MAAAA,CAAe,IAAIY,2BAAAA,IAACE,4BAAU;AAAA,QAACd;AAAAA,MAAe,CAAA,GACjEhC,KAAK;AAAA,IAAA,CACK;AAEf,UAAM+C,SACJ3C,iBAAiB6B,SACfC,iDAECC,8BAAW;AAAA,MAACC,WAAY,IAAGhC;AAAAA,MAAgBuC,SAASpC;AAAAA,MAAaL,UAC/DgC;AAAAA,IAAAA,CACU;AAEVa,WAAAA;AAAAA,EAAAA,GACN,CACDjD,SACAkB,aACAG,eACAnB,OACA2B,mBACA5B,UACAK,cACAK,MAAM,CACP;AAED,yCACGuC,iBAAAA,YAAU;AAAA,IACTpD;AAAAA,IACAC,WAAWyC,KAAKzC,KAAAA,WAAW0C,iBAAiBU,QAAAA,MAAMnD,mCAASmD,IAAI;AAAA,IAAE,GAC7DzC;AAAAA,IAAMN,UAET4B,CAAAA,iBACDc,2BAAAA,IAACM,kCAAe;AAAA,MACdtD,IAAIiC;AAAAA,MACJQ,MAAK;AAAA,MACL,mBAAiBV;AAAAA,MACjB9B,WAAWyC,KAAAA,KACTC,iBAAAA,QAAiBY,WACjBrD,mCAASqD,WACT,CAAC1C,UAAU6B,KAAKC,KAAAA,iBAAAA,QAAiBa,QAAQtD,mCAASsD,MAAM,CAC1D;AAAA,MACAA,QAAQ,CAAC3C;AAAAA,MAAO,GACZH;AAAAA,MAAcJ;AAAAA,IAAAA,CAGH,CAAC;AAAA,EAAA,CACR;AAEhB;;"}
+{"version":3,"file":"Accordion.cjs","sources":["../../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import React, {\n  SyntheticEvent,\n  useCallback,\n  useMemo,\n  HTMLAttributes,\n} from \"react\";\nimport { clsx } from \"clsx\";\nimport { useControlled } from \"@core/hooks\";\nimport { DropDownXS, DropUpXS } from \"@hitachivantara/uikit-react-icons\";\nimport { HvBaseProps } from \"@core/types\";\nimport { setId } from \"@core/utils\";\nimport { HvTypographyVariants } from \"@core/components\";\nimport { StyledContainer, StyledLabel, StyledRoot } from \"./Accordion.styles\";\nimport accordionClasses, { HvAccordionClasses } from \"./accordionClasses\";\n\nexport interface HvAccordionProps\n  extends HvBaseProps<HTMLDivElement, \"onChange\"> {\n  /**\n   * Id to be applied to the root node of the accordion.\n   */\n  id?: string;\n  /**\n   * Class names to be applied to the accordion.\n   */\n  className?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes?: HvAccordionClasses;\n  /**\n   * The accordion label button.\n   */\n  label?: string;\n  /**\n   * The function that will be executed whenever the accordion toggles it will receive the state of the accordion\n   */\n  onChange?: (event: React.SyntheticEvent, value: boolean) => void;\n  /**\n   * Whether the accordion is open or not, if this property is defined the accordion must be fully controlled.\n   */\n  expanded?: boolean;\n  /**\n   * When uncontrolled, defines the initial expanded state.\n   */\n  defaultExpanded?: boolean;\n  /**\n   * An object containing props to be passed onto container holding the accordion children.\n   */\n  containerProps?: HTMLAttributes<HTMLDivElement>;\n  /**\n   * Heading Level to apply to accordion button if ´undefined´ the button won't have a header wrapper.\n   */\n  headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;\n  /**\n   * Is the accordion disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Typography variant for the label.\n   */\n  labelVariant?: HvTypographyVariants;\n  /**\n   * Content to be rendered\n   */\n  children: React.ReactNode;\n}\n\n/**\n * A accordion is a design element that expands in place to expose hidden information.\n */\nexport const HvAccordion = ({\n  id,\n  className,\n  classes,\n  disabled = false,\n  label,\n  onChange,\n  children,\n  expanded,\n  headingLevel,\n  defaultExpanded = false,\n  containerProps,\n  labelVariant = \"label\",\n  ...others\n}: HvAccordionProps) => {\n  const [isOpen, setIsOpen] = useControlled(expanded, Boolean(defaultExpanded));\n\n  const handleAction = useCallback(\n    (event: SyntheticEvent) => {\n      if (!disabled) {\n        onChange?.(event, isOpen);\n        setIsOpen(!isOpen);\n        return true;\n      }\n      return false;\n    },\n    [disabled, onChange, isOpen, setIsOpen]\n  );\n\n  const handleClick = useCallback(\n    (event: SyntheticEvent) => {\n      handleAction(event);\n      event.preventDefault();\n      event.stopPropagation();\n    },\n    [handleAction]\n  );\n\n  const handleKeyDown = useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      let isEventHandled = false;\n      const { key } = event;\n\n      if (\n        event.altKey ||\n        event.ctrlKey ||\n        event.metaKey ||\n        event.currentTarget !== event.target\n      ) {\n        return;\n      }\n      switch (key) {\n        case \"Enter\":\n        case \" \":\n          isEventHandled = handleAction(event);\n          break;\n        default:\n          return;\n      }\n\n      if (isEventHandled) {\n        event.preventDefault();\n        event.stopPropagation();\n      }\n    },\n    [handleAction]\n  );\n\n  const accordionHeaderId = setId(id, \"button\");\n  const accordionContainer = setId(id, \"container\");\n  const accordionHeader = useMemo(() => {\n    const color = (disabled && [\"secondary_60\"]) || undefined;\n\n    const accordionButton = (\n      <StyledLabel\n        id={accordionHeaderId}\n        component=\"div\"\n        role=\"button\"\n        className={clsx(\n          accordionClasses.label,\n          classes?.label,\n          disabled && clsx(accordionClasses.disabled, classes?.disabled)\n        )}\n        disabled={disabled}\n        tabIndex={0}\n        onKeyDown={handleKeyDown}\n        onClick={handleClick}\n        variant={labelVariant}\n        aria-expanded={isOpen}\n        aria-disabled={disabled}\n      >\n        {isOpen ? <DropUpXS color={color} /> : <DropDownXS color={color} />}\n        {label}\n      </StyledLabel>\n    );\n    const result =\n      headingLevel === undefined ? (\n        accordionButton\n      ) : (\n        <StyledLabel component={`h${headingLevel}`} variant={labelVariant}>\n          {accordionButton}\n        </StyledLabel>\n      );\n    return result;\n  }, [\n    classes,\n    handleClick,\n    handleKeyDown,\n    label,\n    accordionHeaderId,\n    disabled,\n    headingLevel,\n    isOpen,\n    labelVariant,\n  ]);\n\n  return (\n    <StyledRoot\n      id={id}\n      className={clsx(className, accordionClasses.root, classes?.root)}\n      {...others}\n    >\n      {accordionHeader}\n      <StyledContainer\n        id={accordionContainer}\n        role=\"region\"\n        aria-labelledby={accordionHeaderId}\n        className={clsx(\n          accordionClasses.container,\n          classes?.container,\n          !isOpen && clsx(accordionClasses.hidden, classes?.hidden)\n        )}\n        hidden={!isOpen}\n        {...containerProps}\n      >\n        {children}\n      </StyledContainer>\n    </StyledRoot>\n  );\n};\n"],"names":["HvAccordion","id","className","classes","disabled","label","onChange","children","expanded","headingLevel","defaultExpanded","containerProps","labelVariant","others","isOpen","setIsOpen","useControlled","Boolean","handleAction","useCallback","event","handleClick","preventDefault","stopPropagation","handleKeyDown","isEventHandled","key","altKey","ctrlKey","metaKey","currentTarget","target","accordionHeaderId","setId","accordionContainer","accordionHeader","useMemo","color","undefined","accordionButton","StyledLabel","component","role","clsx","accordionClasses","tabIndex","onKeyDown","onClick","variant","_jsx","DropUpXS","DropDownXS","result","StyledRoot","root","StyledContainer","container","hidden"],"mappings":"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"}

package/dist/cjs/components/AppSwitcher/AppSwitcher.cjs

@@ -21,14 +21,11 @@ const HvAppSwitcher = ({
   footer,
   isOpen
 }) => {
-  const actionClicked = (event, application) => {
-    onActionClickedCallback == null ? void 0 : onActionClickedCallback(event, application);
-  };
   const panelActions = React.useMemo(() => applications && (applications == null ? void 0 : applications.map((application) => {
     if (application.name) {
       return /* @__PURE__ */ jsxRuntime.jsx(Action.HvAppSwitcherAction, {
         application,
-        onClickCallback: actionClicked,
+        onClickCallback: onActionClickedCallback,
         isSelectedCallback: isActionSelectedCallback,
         classes: {
           root: clsx.clsx(classes == null ? void 0 : classes.item, appSwitcherClasses.default.item),
@@ -42,7 +39,7 @@ const HvAppSwitcher = ({
       }, application.id || `${application.name}_${application.url}`);
     }
     return void 0;
-  })), [applications]);
+  })), [applications, classes, isActionSelectedCallback, onActionClickedCallback]);
   return /* @__PURE__ */ jsxRuntime.jsxs(AppSwitcher_styles.StyledRoot, {
     id,
     className: clsx.clsx(className, appSwitcherClasses.default.root, classes == null ? void 0 : classes.root, appSwitcherClasses.default[layout], classes == null ? void 0 : classes[layout], isOpen && clsx.clsx(appSwitcherClasses.default.open, classes == null ? void 0 : classes.open), isOpen === false && clsx.clsx(appSwitcherClasses.default.closed, classes == null ? void 0 : classes.closed)),

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

@@ -1 +1 @@
-{"version":3,"file":"AppSwitcher.cjs","sources":["../../../../src/components/AppSwitcher/AppSwitcher.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { useMemo } from \"react\";\nimport { HvBaseProps } from \"@core/types\";\nimport { HvAppSwitcherAction } from \"./Action\";\nimport {\n  StyledRoot,\n  StyledTitle,\n  StyledActionsContainer,\n  StyledFooter,\n} from \"./AppSwitcher.styles\";\nimport TitleWithTooltip from \"./TitleWithTooltip\";\nimport appSwitcherClasses, { HvAppSwitcherClasses } from \"./appSwitcherClasses\";\n\nexport interface HvAppSwitcherActionApplication {\n  /** Id of the application. */\n  id?: string;\n  /** Name of the application, this is the value that will be displayed on the component. */\n  name: string;\n  /** URL with the icon location to be used to represent the application. iconUrl will only be used if no iconElement is provided. */\n  iconUrl?: string;\n  /** Element to be added as the icon representing the application. The iconElement will be the primary option to be displayed. */\n  iconElement?: React.ReactElement;\n  /** Small description of the application. */\n  description?: string;\n  /**  URL where the application is accessible. */\n  url?: string;\n  /** Defines if the application should be opened in the same tab or in a new one. */\n  target?: \"_top\" | \"_blank\";\n  /** If true, the item will be disabled. */\n  disabled?: boolean;\n  /** True when the application is selected, false otherwise. */\n  isSelected?: boolean;\n  /** The color of the application. */\n  color?: string;\n}\n\nexport interface HvAppSwitcherProps extends HvBaseProps {\n  /** Number of columns to render. One, two, or whatever fits the component's width. */\n  layout?: \"single\" | \"dual\" | \"fluid\";\n  /** Title to be displayed on the header of the component. */\n  title?: string;\n  /** The list of applications to be used to render the actions on the component. */\n  applications?: HvAppSwitcherActionApplication[];\n  /** Triggered when an action is clicked. */\n  onActionClickedCallback?: (\n    event: React.MouseEvent,\n    application: HvAppSwitcherActionApplication\n  ) => void;\n  /** Must return a boolean stating if the action element is selected or not. */\n  isActionSelectedCallback?: (\n    application: HvAppSwitcherActionApplication\n  ) => boolean;\n  /** Element to be added to the header container, if none is provided a label with the title will be added. */\n  header?: React.ReactNode;\n  /** Element to be added to the footer container. */\n  footer?: React.ReactNode;\n  /**\n   * Flag stating if the panel is opened or closed.\n   *\n   * @deprecated This logic should be external, i.e. using the HvAppSwitcher inside a Drawer component.\n   */\n  isOpen?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvAppSwitcherClasses;\n}\n\nexport const HvAppSwitcher = ({\n  id,\n  className,\n  classes,\n  layout = \"single\",\n  title,\n  applications,\n  onActionClickedCallback = () => {},\n  isActionSelectedCallback = () => false,\n  header,\n  footer,\n  isOpen,\n}: HvAppSwitcherProps) => {\n  const actionClicked = (\n    event: React.MouseEvent,\n    application: HvAppSwitcherActionApplication\n  ) => {\n    onActionClickedCallback?.(event, application);\n  };\n\n  const panelActions = useMemo(\n    () =>\n      applications &&\n      applications?.map((application) => {\n        if (application.name) {\n          return (\n            <HvAppSwitcherAction\n              key={application.id || `${application.name}_${application.url}`}\n              application={application}\n              onClickCallback={actionClicked}\n              isSelectedCallback={isActionSelectedCallback}\n              classes={{\n                root: clsx(classes?.item, appSwitcherClasses.item),\n                selected: clsx(\n                  classes?.itemSelected,\n                  appSwitcherClasses.itemSelected\n                ),\n                disabled: clsx(\n                  classes?.itemDisabled,\n                  appSwitcherClasses.itemDisabled\n                ),\n                typography: clsx(\n                  classes?.itemTrigger,\n                  appSwitcherClasses.itemTrigger\n                ),\n                icon: clsx(classes?.itemIcon, appSwitcherClasses.itemIcon),\n                title: clsx(classes?.itemTitle, appSwitcherClasses.itemTitle),\n                iconInfo: clsx(\n                  classes?.itemInfoIcon,\n                  appSwitcherClasses.itemInfoIcon\n                ),\n              }}\n            />\n          );\n        }\n\n        return undefined;\n      }),\n    [applications]\n  );\n\n  return (\n    <StyledRoot\n      id={id}\n      className={clsx(\n        className,\n        appSwitcherClasses.root,\n        classes?.root,\n        appSwitcherClasses[layout],\n        classes?.[layout],\n        isOpen && clsx(appSwitcherClasses.open, classes?.open),\n        isOpen === false && clsx(appSwitcherClasses.closed, classes?.closed)\n      )}\n      $open={!!isOpen}\n      $closed={isOpen === false}\n      $layout={layout}\n    >\n      {(header && (\n        <StyledTitle\n          component=\"div\"\n          variant=\"label\"\n          className={clsx(appSwitcherClasses.title, classes?.title)}\n        >\n          {header}\n        </StyledTitle>\n      )) ||\n        (title && (\n          <TitleWithTooltip\n            className={clsx(appSwitcherClasses.title, classes?.title)}\n            title={title}\n            type=\"appSwitcher\"\n          />\n        ))}\n      <StyledActionsContainer\n        disableGutters\n        className={clsx(\n          appSwitcherClasses.actionsContainer,\n          classes?.actionsContainer\n        )}\n      >\n        {panelActions}\n      </StyledActionsContainer>\n      {footer && (\n        <StyledFooter\n          component=\"div\"\n          variant=\"label\"\n          className={clsx(\n            appSwitcherClasses.footerContainer,\n            classes?.footerContainer\n          )}\n        >\n          {footer}\n        </StyledFooter>\n      )}\n    </StyledRoot>\n  );\n};\n"],"names":["HvAppSwitcher","id","className","classes","layout","title","applications","onActionClickedCallback","isActionSelectedCallback","header","footer","isOpen","actionClicked","event","application","panelActions","useMemo","map","name","HvAppSwitcherAction","onClickCallback","isSelectedCallback","root","clsx","item","appSwitcherClasses","selected","itemSelected","disabled","itemDisabled","typography","itemTrigger","icon","itemIcon","itemTitle","iconInfo","itemInfoIcon","url","undefined","StyledRoot","open","closed","$open","$closed","$layout","children","_jsx","StyledTitle","component","variant","TitleWithTooltip","type","StyledActionsContainer","disableGutters","actionsContainer","StyledFooter","footerContainer"],"mappings":"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"}
+{"version":3,"file":"AppSwitcher.cjs","sources":["../../../../src/components/AppSwitcher/AppSwitcher.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { useMemo } from \"react\";\nimport { HvBaseProps } from \"@core/types\";\nimport { HvAppSwitcherAction } from \"./Action\";\nimport {\n  StyledRoot,\n  StyledTitle,\n  StyledActionsContainer,\n  StyledFooter,\n} from \"./AppSwitcher.styles\";\nimport TitleWithTooltip from \"./TitleWithTooltip\";\nimport appSwitcherClasses, { HvAppSwitcherClasses } from \"./appSwitcherClasses\";\n\nexport interface HvAppSwitcherActionApplication {\n  /** Id of the application. */\n  id?: string;\n  /** Name of the application, this is the value that will be displayed on the component. */\n  name: string;\n  /** URL with the icon location to be used to represent the application. iconUrl will only be used if no iconElement is provided. */\n  iconUrl?: string;\n  /** Element to be added as the icon representing the application. The iconElement will be the primary option to be displayed. */\n  iconElement?: React.ReactElement;\n  /** Small description of the application. */\n  description?: string;\n  /**  URL where the application is accessible. */\n  url?: string;\n  /** Defines if the application should be opened in the same tab or in a new one. */\n  target?: \"_top\" | \"_blank\";\n  /** If true, the item will be disabled. */\n  disabled?: boolean;\n  /** True when the application is selected, false otherwise. */\n  isSelected?: boolean;\n  /** The color of the application. */\n  color?: string;\n}\n\nexport interface HvAppSwitcherProps extends HvBaseProps {\n  /** Number of columns to render. One, two, or whatever fits the component's width. */\n  layout?: \"single\" | \"dual\" | \"fluid\";\n  /** Title to be displayed on the header of the component. */\n  title?: string;\n  /** The list of applications to be used to render the actions on the component. */\n  applications?: HvAppSwitcherActionApplication[];\n  /** Triggered when an action is clicked. */\n  onActionClickedCallback?: (\n    event: React.MouseEvent,\n    application: HvAppSwitcherActionApplication\n  ) => void;\n  /** Must return a boolean stating if the action element is selected or not. */\n  isActionSelectedCallback?: (\n    application: HvAppSwitcherActionApplication\n  ) => boolean;\n  /** Element to be added to the header container, if none is provided a label with the title will be added. */\n  header?: React.ReactNode;\n  /** Element to be added to the footer container. */\n  footer?: React.ReactNode;\n  /**\n   * Flag stating if the panel is opened or closed.\n   *\n   * @deprecated This logic should be external, i.e. using the HvAppSwitcher inside a Drawer component.\n   */\n  isOpen?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvAppSwitcherClasses;\n}\n\nexport const HvAppSwitcher = ({\n  id,\n  className,\n  classes,\n  layout = \"single\",\n  title,\n  applications,\n  onActionClickedCallback = () => {},\n  isActionSelectedCallback = () => false,\n  header,\n  footer,\n  isOpen,\n}: HvAppSwitcherProps) => {\n  const panelActions = useMemo(\n    () =>\n      applications &&\n      applications?.map((application) => {\n        if (application.name) {\n          return (\n            <HvAppSwitcherAction\n              key={application.id || `${application.name}_${application.url}`}\n              application={application}\n              onClickCallback={onActionClickedCallback}\n              isSelectedCallback={isActionSelectedCallback}\n              classes={{\n                root: clsx(classes?.item, appSwitcherClasses.item),\n                selected: clsx(\n                  classes?.itemSelected,\n                  appSwitcherClasses.itemSelected\n                ),\n                disabled: clsx(\n                  classes?.itemDisabled,\n                  appSwitcherClasses.itemDisabled\n                ),\n                typography: clsx(\n                  classes?.itemTrigger,\n                  appSwitcherClasses.itemTrigger\n                ),\n                icon: clsx(classes?.itemIcon, appSwitcherClasses.itemIcon),\n                title: clsx(classes?.itemTitle, appSwitcherClasses.itemTitle),\n                iconInfo: clsx(\n                  classes?.itemInfoIcon,\n                  appSwitcherClasses.itemInfoIcon\n                ),\n              }}\n            />\n          );\n        }\n\n        return undefined;\n      }),\n    [applications, classes, isActionSelectedCallback, onActionClickedCallback]\n  );\n\n  return (\n    <StyledRoot\n      id={id}\n      className={clsx(\n        className,\n        appSwitcherClasses.root,\n        classes?.root,\n        appSwitcherClasses[layout],\n        classes?.[layout],\n        isOpen && clsx(appSwitcherClasses.open, classes?.open),\n        isOpen === false && clsx(appSwitcherClasses.closed, classes?.closed)\n      )}\n      $open={!!isOpen}\n      $closed={isOpen === false}\n      $layout={layout}\n    >\n      {(header && (\n        <StyledTitle\n          component=\"div\"\n          variant=\"label\"\n          className={clsx(appSwitcherClasses.title, classes?.title)}\n        >\n          {header}\n        </StyledTitle>\n      )) ||\n        (title && (\n          <TitleWithTooltip\n            className={clsx(appSwitcherClasses.title, classes?.title)}\n            title={title}\n            type=\"appSwitcher\"\n          />\n        ))}\n      <StyledActionsContainer\n        disableGutters\n        className={clsx(\n          appSwitcherClasses.actionsContainer,\n          classes?.actionsContainer\n        )}\n      >\n        {panelActions}\n      </StyledActionsContainer>\n      {footer && (\n        <StyledFooter\n          component=\"div\"\n          variant=\"label\"\n          className={clsx(\n            appSwitcherClasses.footerContainer,\n            classes?.footerContainer\n          )}\n        >\n          {footer}\n        </StyledFooter>\n      )}\n    </StyledRoot>\n  );\n};\n"],"names":["HvAppSwitcher","id","className","classes","layout","title","applications","onActionClickedCallback","isActionSelectedCallback","header","footer","isOpen","panelActions","useMemo","map","application","name","HvAppSwitcherAction","onClickCallback","isSelectedCallback","root","clsx","item","appSwitcherClasses","selected","itemSelected","disabled","itemDisabled","typography","itemTrigger","icon","itemIcon","itemTitle","iconInfo","itemInfoIcon","url","undefined","StyledRoot","open","closed","$open","$closed","$layout","children","_jsx","StyledTitle","component","variant","TitleWithTooltip","type","StyledActionsContainer","disableGutters","actionsContainer","StyledFooter","footerContainer"],"mappings":"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"}

package/dist/cjs/components/BaseInput/BaseInput.cjs

@@ -30,7 +30,7 @@ const baseInputStyles = /* @__PURE__ */ react.css({
   "input::-webkit-search-decoration,input::-webkit-search-cancel-button,input::-webkit-search-results-button,input::-webkit-search-results-decoration": {
     display: "none"
   }
-}, process.env.NODE_ENV === "production" ? "" : ";label:baseInputStyles;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQmFzZUlucHV0L0Jhc2VJbnB1dC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBdUJ3QiIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay9odi11aWtpdC1yZWFjdC9odi11aWtpdC1yZWFjdC9wYWNrYWdlcy9jb3JlL3NyYy9jb21wb25lbnRzL0Jhc2VJbnB1dC9CYXNlSW5wdXQudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgUmVmT2JqZWN0LCB1c2VDb250ZXh0IH0gZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQge1xuICBJbnB1dEJhc2VDb21wb25lbnRQcm9wcyBhcyBNdWlJbnB1dEJhc2VDb21wb25lbnRQcm9wcyxcbiAgSW5wdXRQcm9wcyBhcyBNdWlJbnB1dFByb3BzLFxuICBJbnB1dCBhcyBNdWlJbnB1dCxcbn0gZnJvbSBcIkBtdWkvbWF0ZXJpYWxcIjtcbmltcG9ydCB7IEh2QmFzZVByb3BzIH0gZnJvbSBcIkBjb3JlL3R5cGVzXCI7XG5pbXBvcnQgeyBFeHRyYWN0TmFtZXMgfSBmcm9tIFwiQGNvcmUvdXRpbHNcIjtcbmltcG9ydCB7XG4gIEh2Rm9ybUVsZW1lbnRDb250ZXh0LFxuICBIdkZvcm1FbGVtZW50RGVzY3JpcHRvcnNDb250ZXh0LFxuICBidWlsZEZvcm1FbGVtZW50UHJvcHNGcm9tQ29udGV4dCxcbiAgYnVpbGRBcmlhUHJvcHNGcm9tQ29udGV4dCxcbn0gZnJvbSBcIkBjb3JlL2NvbXBvbmVudHNcIjtcbmltcG9ydCB7IGNzcyBhcyBlbW90aW9uQ3NzLCBHbG9iYWwgfSBmcm9tIFwiQGVtb3Rpb24vcmVhY3RcIjtcbmltcG9ydCB7IHRoZW1lIH0gZnJvbSBcIkBoaXRhY2hpdmFudGFyYS91aWtpdC1zdHlsZXNcIjtcbmltcG9ydCB7IHN0YXRpY0NsYXNzZXMsIHVzZUNsYXNzZXMgfSBmcm9tIFwiLi9CYXNlSW5wdXQuc3R5bGVzXCI7XG5cbmV4cG9ydCB7IHN0YXRpY0NsYXNzZXMgYXMgYmFzZUlucHV0Q2xhc3NlcyB9O1xuXG5leHBvcnQgdHlwZSBIdkJhc2VJbnB1dENsYXNzZXMgPSBFeHRyYWN0TmFtZXM8dHlwZW9mIHVzZUNsYXNzZXM+O1xuXG4vLyBHbG9iYWwgc3R5bGVzIGZvciB0aGUgYmFzZSBpbnB1dC5cbmNvbnN0IGJhc2VJbnB1dFN0eWxlcyA9IGVtb3Rpb25Dc3Moe1xuICBcImlucHV0Oi13ZWJraXQtYXV0b2ZpbGxcIjoge1xuICAgIFdlYmtpdEJveFNoYWRvdzogYDAgMCAwcHggMTAwMHB4ICR7dGhlbWUuY29sb3JzLmF0bW8xfSBpbnNldGAsXG4gICAgV2Via2l0VGV4dEZpbGxDb2xvcjogdGhlbWUuY29sb3JzLnNlY29uZGFyeSxcbiAgfSxcblxuICAvLyBDbGVhcnMgbnVtYmVyIGlucHV0IHVwL2Rvd24gYXJyb3dzIGluIENocm9tZSBhbmQgRmlyZWZveFxuICBcImlucHV0Ojotd2Via2l0LW91dGVyLXNwaW4tYnV0dG9uLGlucHV0Ojotd2Via2l0LWlubmVyLXNwaW4tYnV0dG9uXCI6IHtcbiAgICBXZWJraXRBcHBlYXJhbmNlOiBcIm5vbmVcIixcbiAgICBtYXJnaW46IDAsXG4gIH0sXG4gIFwiaW5wdXRbdHlwZT1udW1iZXJdXCI6IHtcbiAgICBNb3pBcHBlYXJhbmNlOiBcInRleHRmaWVsZFwiLFxuICB9LFxuXG4gIC8vIENsZWFycyB0aW1lIGlucHV0IGNsb2NrIGluIENocm9tZVxuICBcImlucHV0Ojotd2Via2l0LWNhbGVuZGFyLXBpY2tlci1pbmRpY2F0b3JcIjoge1xuICAgIGRpc3BsYXk6IFwibm9uZVwiLFxuICB9LFxuXG4gIC8vIENsZWFycyBzZWFyY2ggaW5wdXQgY2xlYXIgYnV0dG9uIGluIENocm9tZVxuICBcImlucHV0Ojotd2Via2l0LXNlYXJjaC1kZWNvcmF0aW9uLGlucHV0Ojotd2Via2l0LXNlYXJjaC1jYW5jZWwtYnV0dG9uLGlucHV0Ojotd2Via2l0LXNlYXJjaC1yZXN1bHRzLWJ1dHRvbixpbnB1dDo6LXdlYmtpdC1zZWFyY2gtcmVzdWx0cy1kZWNvcmF0aW9uXCI6XG4gICAge1xuICAgICAgZGlzcGxheTogXCJub25lXCIsXG4gICAgfSxcbn0pO1xuXG5leHBvcnQgaW50ZXJmYWNlIEh2QmFzZUlucHV0UHJvcHNcbiAgZXh0ZW5kcyBPbWl0PE11aUlucHV0UHJvcHMsIFwib25DaGFuZ2VcIiB8IFwiY2xhc3Nlc1wiPixcbiAgICBIdkJhc2VQcm9wczxcbiAgICAgIEhUTUxEaXZFbGVtZW50LFxuICAgICAgfCBcIm9uQ2hhbmdlXCJcbiAgICAgIHwgXCJjb2xvclwiXG4gICAgICB8IFwib25CbHVyXCJcbiAgICAgIHwgXCJvbkZvY3VzXCJcbiAgICAgIHwgXCJvbkludmFsaWRcIlxuICAgICAgfCBcIm9uS2V5RG93blwiXG4gICAgICB8IFwib25LZXlVcFwiXG4gICAgPiB7XG4gIC8qKiBUaGUgaW5wdXQgbmFtZS4gKi9cbiAgbmFtZT86IHN0cmluZztcbiAgLyoqIFRoZSB2YWx1ZSBvZiB0aGUgaW5wdXQsIHdoZW4gY29udHJvbGxlZC4gKi9cbiAgdmFsdWU/OiBzdHJpbmc7XG4gIC8qKiBUaGUgaW5pdGlhbCB2YWx1ZSBvZiB0aGUgaW5wdXQsIHdoZW4gdW5jb250cm9sbGVkLiAqL1xuICBkZWZhdWx0VmFsdWU/OiBzdHJpbmc7XG4gIC8qKiBJZiBgdHJ1ZWAgdGhlIGlucHV0IGlzIGRpc2FibGVkLiAqL1xuICBkaXNhYmxlZD86IGJvb2xlYW47XG4gIC8qKiBJbmRpY2F0ZXMgdGhhdCB0aGUgaW5wdXQgaXMgbm90IGVkaXRhYmxlLiAqL1xuICByZWFkT25seT86IGJvb2xlYW47XG4gIC8qKiBJZiB0cnVlLCB0aGUgaW5wdXQgZWxlbWVudCB3aWxsIGJlIHJlcXVpcmVkLiAqL1xuICByZXF1aXJlZD86IGJvb2xlYW47XG4gIC8qKiBUaGUgZnVuY3Rpb24gdGhhdCB3aWxsIGJlIGV4ZWN1dGVkIG9uQ2hhbmdlLCBhbGxvd3MgbW9kaWZpY2F0aW9uIG9mIHRoZSBpbnB1dCxcbiAgICogaXQgcmVjZWl2ZXMgdGhlIHZhbHVlLiBJZiBhIG5ldyB2YWx1ZSBzaG91bGQgYmUgcHJlc2VudGVkIGl0IG11c3QgcmV0dXJuZWQgaXQuICovXG4gIG9uQ2hhbmdlPzogKFxuICAgIGV2ZW50OiBSZWFjdC5DaGFuZ2VFdmVudDxIVE1MSW5wdXRFbGVtZW50IHwgSFRNTFRleHRBcmVhRWxlbWVudD4sXG4gICAgdmFsdWU6IHN0cmluZ1xuICApID0+IHZvaWQ7XG4gIC8qKiBUaGUgaW5wdXQgdHlwZS4gKi9cbiAgdHlwZT86IHN0cmluZztcbiAgLyoqIExhYmVsIGluc2lkZSB0aGUgaW5wdXQgdXNlZCB0byBoZWxwIHVzZXIuICovXG4gIHBsYWNlaG9sZGVyPzogc3RyaW5nO1xuICAvKiogSWYgdHJ1ZSwgYSB0ZXh0YXJlYSBlbGVtZW50IHdpbGwgYmUgcmVuZGVyZWQuICovXG4gIG11bHRpbGluZT86IGJvb2xlYW47XG4gIC8qKiBJZiB0cnVlIGFuZCBtdWx0aWxpbmUgaXMgYWxzbyB0cnVlIHRoZSB0ZXh0YXJlYSBlbGVtZW50IHdpbGwgYmUgcmVzaXphYmxlLiAqL1xuICByZXNpemFibGU/OiBib29sZWFuO1xuICAvKiogRGVub3RlcyBpZiB0aGUgaW5wdXQgaXMgaW4gYW4gaW52YWxpZCBzdGF0ZS4gKi9cbiAgaW52YWxpZD86IGJvb2xlYW47XG4gIC8qKiBBdHRyaWJ1dGVzIGFwcGxpZWQgdG8gdGhlIGlucHV0IGVsZW1lbnQuICovXG4gIGlucHV0UHJvcHM/OiBNdWlJbnB1dEJhc2VDb21wb25lbnRQcm9wcztcbiAgLyoqIEFsbG93cyBwYXNzaW5nIGEgcmVmIHRvIHRoZSB1bmRlcmx5aW5nIGlucHV0ICovXG4gIGlucHV0UmVmPzogUmVmT2JqZWN0PEhUTUxFbGVtZW50PjtcbiAgLyoqIEEgSnNzIE9iamVjdCB1c2VkIHRvIG92ZXJyaWRlIG9yIGV4dGVuZCB0aGUgc3R5bGVzIGFwcGxpZWQgdG8gdGhlIGNvbXBvbmVudC4gKi9cbiAgY2xhc3Nlcz86IEh2QmFzZUlucHV0Q2xhc3Nlcztcbn1cblxuLyoqXG4gKiBBbiBJbnB1dCBjb21wb25lbnQgdGhhdCBvbmx5IHBvc3NlcyB0aGUgbW9zdCBiYXNpYyBmdW5jdGlvbmFsaXRpZXMuXG4gKiBJdCBzaG91bGQgYmUgdXNlZCBhbG9uZ3NpZGUgdGhlIG90aGVyIGZvcm0gZWxlbWVudHMgdG8gY29uc3RydWN0IGEgcHJvcGVyIGFjY2Vzc2libGUgZm9ybS5cbiAqL1xuZXhwb3J0IGNvbnN0IEh2QmFzZUlucHV0ID0gKHtcbiAgY2xhc3NlczogY2xhc3Nlc1Byb3AsXG4gIGNsYXNzTmFtZSA9IFwiXCIsXG4gIGlkLFxuICBuYW1lLFxuICB2YWx1ZSxcbiAgZGVmYXVsdFZhbHVlLFxuICByZXF1aXJlZCxcbiAgcmVhZE9ubHksXG4gIGRpc2FibGVkLFxuICBvbkNoYW5nZSxcbiAgdHlwZSA9IFwidGV4dFwiLFxuICBwbGFjZWhvbGRlcixcbiAgbXVsdGlsaW5lID0gZmFsc2UsXG4gIHJlc2l6YWJsZSA9IGZhbHNlLFxuICBpbnZhbGlkID0gZmFsc2UsXG4gIGlucHV0UmVmLFxuICBpbnB1dFByb3BzID0ge30sXG4gIC4uLm90aGVyc1xufTogSHZCYXNlSW5wdXRQcm9wcykgPT4ge1xuICBjb25zdCB7IGNsYXNzZXMsIGN4IH0gPSB1c2VDbGFzc2VzKGNsYXNzZXNQcm9wKTtcbiAgY29uc3QgZm9ybUVsZW1lbnRDb250ZXh0ID0gdXNlQ29udGV4dChIdkZvcm1FbGVtZW50Q29udGV4dCk7XG4gIGNvbnN0IGZvcm1FbGVtZW50UHJvcHMgPSBidWlsZEZvcm1FbGVtZW50UHJvcHNGcm9tQ29udGV4dChcbiAgICBuYW1lLFxuICAgIGRpc2FibGVkLFxuICAgIHJlYWRPbmx5LFxuICAgIHJlcXVpcmVkLFxuICAgIGZvcm1FbGVtZW50Q29udGV4dFxuICApO1xuXG4gIGNvbnN0IGxvY2FsSW52YWxpZCA9IGludmFsaWQgfHwgZm9ybUVsZW1lbnRQcm9wcy5zdGF0dXMgPT09IFwiaW52YWxpZFwiO1xuXG4gIGNvbnN0IGZvcm1FbGVtZW50RGVzY3JpcHRvcnNDb250ZXh0ID0gdXNlQ29udGV4dChcbiAgICBIdkZvcm1FbGVtZW50RGVzY3JpcHRvcnNDb250ZXh0XG4gICk7XG4gIGNvbnN0IGFyaWFQcm9wcyA9IGJ1aWxkQXJpYVByb3BzRnJvbUNvbnRleHQoXG4gICAgaW5wdXRQcm9wcyxcbiAgICBmb3JtRWxlbWVudERlc2NyaXB0b3JzQ29udGV4dCxcbiAgICBsb2NhbEludmFsaWQsXG4gICAgaWRcbiAgKTtcblxuICBjb25zdCBvbkNoYW5nZUhhbmRsZXIgPSAoXG4gICAgZXZlbnQ6IFJlYWN0LkNoYW5nZUV2ZW50PEhUTUxJbnB1dEVsZW1lbnQgfCBIVE1MVGV4dEFyZWFFbGVtZW50PlxuICApID0+IHtcbiAgICBvbkNoYW5nZT8uKGV2ZW50LCBldmVudC50YXJnZXQudmFsdWUpO1xuICB9O1xuXG4gIHJldHVybiAoXG4gICAgPD5cbiAgICAgIDxHbG9iYWwgc3R5bGVzPXtiYXNlSW5wdXRTdHlsZXN9IC8+XG4gICAgICA8ZGl2XG4gICAgICAgIGNsYXNzTmFtZT17Y3goY2xhc3Nlcy5yb290LCBjbGFzc05hbWUsIHtcbiAgICAgICAgICBbY2xhc3Nlcy5kaXNhYmxlZF06IGZvcm1FbGVtZW50UHJvcHMuZGlzYWJsZWQsXG4gICAgICAgICAgW2NsYXNzZXMuaW52YWxpZF06IGxvY2FsSW52YWxpZCxcbiAgICAgICAgICBbY2xhc3Nlcy5yZXNpemFibGVdOiBtdWx0aWxpbmUgJiYgcmVzaXphYmxlLFxuICAgICAgICAgIFtjbGFzc2VzLnJlYWRPbmx5XTogZm9ybUVsZW1lbnRQcm9wcy5yZWFkT25seSxcbiAgICAgICAgfSl9XG4gICAgICA+XG4gICAgICAgIDxNdWlJbnB1dFxuICAgICAgICAgIGlkPXtpZH1cbiAgICAgICAgICBuYW1lPXtmb3JtRWxlbWVudFByb3BzLm5hbWV9XG4gICAgICAgICAgdmFsdWU9e3ZhbHVlfVxuICAgICAgICAgIGRlZmF1bHRWYWx1ZT17ZGVmYXVsdFZhbHVlfVxuICAgICAgICAgIHR5cGU9e3R5cGV9XG4gICAgICAgICAgcGxhY2Vob2xkZXI9e3BsYWNlaG9sZGVyfVxuICAgICAgICAgIHJlYWRPbmx5PXshIWZvcm1FbGVtZW50UHJvcHMucmVhZE9ubHl9XG4gICAgICAgICAgZGlzYWJsZWQ9e2Zvcm1FbGVtZW50UHJvcHMuZGlzYWJsZWR9XG4gICAgICAgICAgb25DaGFuZ2U9e29uQ2hhbmdlSGFuZGxlcn1cbiAgICAgICAgICBjbGFzc05hbWU9e2N4KHtcbiAgICAgICAgICAgIFtjbGFzc2VzLmlucHV0Um9vdEludmFsaWRdOiBsb2NhbEludmFsaWQsXG4gICAgICAgICAgICBbY2xhc3Nlcy5pbnB1dFJvb3RSZWFkT25seV06IGZvcm1FbGVtZW50UHJvcHMucmVhZE9ubHksXG4gICAgICAgICAgfSl9XG4gICAgICAgICAgY2xhc3Nlcz17e1xuICAgICAgICAgICAgcm9vdDogY2xhc3Nlcy5pbnB1dFJvb3QsXG4gICAgICAgICAgICBmb2N1c2VkOiBjbGFzc2VzLmlucHV0Um9vdEZvY3VzZWQsXG4gICAgICAgICAgICBkaXNhYmxlZDogY2xhc3Nlcy5pbnB1dFJvb3REaXNhYmxlZCxcbiAgICAgICAgICAgIG11bHRpbGluZTogY2xhc3Nlcy5pbnB1dFJvb3RNdWx0aWxpbmUsXG4gICAgICAgICAgICBpbnB1dDogY3goY2xhc3Nlcy5pbnB1dCwge1xuICAgICAgICAgICAgICBbY2xhc3Nlcy5pbnB1dFJlc2l6YWJsZV06ICFmb3JtRWxlbWVudFByb3BzLmRpc2FibGVkICYmIHJlc2l6YWJsZSxcbiAgICAgICAgICAgICAgW2NsYXNzZXMuaW5wdXREaXNhYmxlZF06IGZvcm1FbGVtZW50UHJvcHMuZGlzYWJsZWQsXG4gICAgICAgICAgICAgIFtjbGFzc2VzLmlucHV0UmVhZE9ubHldOiBmb3JtRWxlbWVudFByb3BzLnJlYWRPbmx5LFxuICAgICAgICAgICAgfSksXG4gICAgICAgICAgfX1cbiAgICAgICAgICBpbnB1dFByb3BzPXt7XG4gICAgICAgICAgICAvLyBBdm9pZCB0aGUgcmVxdWlyZWQgYXR0cmlidXRlIGF0IHRoZSByb290IG5vZGVcbiAgICAgICAgICAgIHJlcXVpcmVkOiBmb3JtRWxlbWVudFByb3BzLnJlcXVpcmVkLFxuICAgICAgICAgICAgLi4uaW5wdXRQcm9wcyxcbiAgICAgICAgICAgIC4uLmFyaWFQcm9wcyxcbiAgICAgICAgICB9fVxuICAgICAgICAgIGlucHV0UmVmPXtpbnB1dFJlZn1cbiAgICAgICAgICBtdWx0aWxpbmU9e211bHRpbGluZX1cbiAgICAgICAgICByb3dzPXsxMH1cbiAgICAgICAgICB7Li4ub3RoZXJzfVxuICAgICAgICAvPlxuICAgICAgICB7IW11bHRpbGluZSAmJiAoXG4gICAgICAgICAgPGRpdiByb2xlPVwicHJlc2VudGF0aW9uXCIgY2xhc3NOYW1lPXtjbGFzc2VzLmlucHV0Qm9yZGVyQ29udGFpbmVyfSAvPlxuICAgICAgICApfVxuICAgICAgPC9kaXY+XG4gICAgPC8+XG4gICk7XG59O1xuIl19 */");
+}, process.env.NODE_ENV === "production" ? "" : ";label:baseInputStyles;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQmFzZUlucHV0L0Jhc2VJbnB1dC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBd0J3QiIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay9odi11aWtpdC1yZWFjdC9odi11aWtpdC1yZWFjdC9wYWNrYWdlcy9jb3JlL3NyYy9jb21wb25lbnRzL0Jhc2VJbnB1dC9CYXNlSW5wdXQudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgdXNlQ29udGV4dCB9IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IHtcbiAgSW5wdXRCYXNlQ29tcG9uZW50UHJvcHMgYXMgTXVpSW5wdXRCYXNlQ29tcG9uZW50UHJvcHMsXG4gIElucHV0UHJvcHMgYXMgTXVpSW5wdXRQcm9wcyxcbiAgSW5wdXQgYXMgTXVpSW5wdXQsXG4gIElucHV0QmFzZVByb3BzLFxufSBmcm9tIFwiQG11aS9tYXRlcmlhbFwiO1xuaW1wb3J0IHsgSHZCYXNlUHJvcHMgfSBmcm9tIFwiQGNvcmUvdHlwZXNcIjtcbmltcG9ydCB7IEV4dHJhY3ROYW1lcyB9IGZyb20gXCJAY29yZS91dGlsc1wiO1xuaW1wb3J0IHtcbiAgSHZGb3JtRWxlbWVudENvbnRleHQsXG4gIEh2Rm9ybUVsZW1lbnREZXNjcmlwdG9yc0NvbnRleHQsXG4gIGJ1aWxkRm9ybUVsZW1lbnRQcm9wc0Zyb21Db250ZXh0LFxuICBidWlsZEFyaWFQcm9wc0Zyb21Db250ZXh0LFxufSBmcm9tIFwiQGNvcmUvY29tcG9uZW50c1wiO1xuaW1wb3J0IHsgY3NzIGFzIGVtb3Rpb25Dc3MsIEdsb2JhbCB9IGZyb20gXCJAZW1vdGlvbi9yZWFjdFwiO1xuaW1wb3J0IHsgdGhlbWUgfSBmcm9tIFwiQGhpdGFjaGl2YW50YXJhL3Vpa2l0LXN0eWxlc1wiO1xuaW1wb3J0IHsgc3RhdGljQ2xhc3NlcywgdXNlQ2xhc3NlcyB9IGZyb20gXCIuL0Jhc2VJbnB1dC5zdHlsZXNcIjtcblxuZXhwb3J0IHsgc3RhdGljQ2xhc3NlcyBhcyBiYXNlSW5wdXRDbGFzc2VzIH07XG5cbmV4cG9ydCB0eXBlIEh2QmFzZUlucHV0Q2xhc3NlcyA9IEV4dHJhY3ROYW1lczx0eXBlb2YgdXNlQ2xhc3Nlcz47XG5cbi8vIEdsb2JhbCBzdHlsZXMgZm9yIHRoZSBiYXNlIGlucHV0LlxuY29uc3QgYmFzZUlucHV0U3R5bGVzID0gZW1vdGlvbkNzcyh7XG4gIFwiaW5wdXQ6LXdlYmtpdC1hdXRvZmlsbFwiOiB7XG4gICAgV2Via2l0Qm94U2hhZG93OiBgMCAwIDBweCAxMDAwcHggJHt0aGVtZS5jb2xvcnMuYXRtbzF9IGluc2V0YCxcbiAgICBXZWJraXRUZXh0RmlsbENvbG9yOiB0aGVtZS5jb2xvcnMuc2Vjb25kYXJ5LFxuICB9LFxuXG4gIC8vIENsZWFycyBudW1iZXIgaW5wdXQgdXAvZG93biBhcnJvd3MgaW4gQ2hyb21lIGFuZCBGaXJlZm94XG4gIFwiaW5wdXQ6Oi13ZWJraXQtb3V0ZXItc3Bpbi1idXR0b24saW5wdXQ6Oi13ZWJraXQtaW5uZXItc3Bpbi1idXR0b25cIjoge1xuICAgIFdlYmtpdEFwcGVhcmFuY2U6IFwibm9uZVwiLFxuICAgIG1hcmdpbjogMCxcbiAgfSxcbiAgXCJpbnB1dFt0eXBlPW51bWJlcl1cIjoge1xuICAgIE1vekFwcGVhcmFuY2U6IFwidGV4dGZpZWxkXCIsXG4gIH0sXG5cbiAgLy8gQ2xlYXJzIHRpbWUgaW5wdXQgY2xvY2sgaW4gQ2hyb21lXG4gIFwiaW5wdXQ6Oi13ZWJraXQtY2FsZW5kYXItcGlja2VyLWluZGljYXRvclwiOiB7XG4gICAgZGlzcGxheTogXCJub25lXCIsXG4gIH0sXG5cbiAgLy8gQ2xlYXJzIHNlYXJjaCBpbnB1dCBjbGVhciBidXR0b24gaW4gQ2hyb21lXG4gIFwiaW5wdXQ6Oi13ZWJraXQtc2VhcmNoLWRlY29yYXRpb24saW5wdXQ6Oi13ZWJraXQtc2VhcmNoLWNhbmNlbC1idXR0b24saW5wdXQ6Oi13ZWJraXQtc2VhcmNoLXJlc3VsdHMtYnV0dG9uLGlucHV0Ojotd2Via2l0LXNlYXJjaC1yZXN1bHRzLWRlY29yYXRpb25cIjpcbiAgICB7XG4gICAgICBkaXNwbGF5OiBcIm5vbmVcIixcbiAgICB9LFxufSk7XG5cbmV4cG9ydCBpbnRlcmZhY2UgSHZCYXNlSW5wdXRQcm9wc1xuICBleHRlbmRzIE9taXQ8TXVpSW5wdXRQcm9wcywgXCJvbkNoYW5nZVwiIHwgXCJjbGFzc2VzXCI+LFxuICAgIEh2QmFzZVByb3BzPFxuICAgICAgSFRNTERpdkVsZW1lbnQsXG4gICAgICB8IFwib25DaGFuZ2VcIlxuICAgICAgfCBcImNvbG9yXCJcbiAgICAgIHwgXCJvbkJsdXJcIlxuICAgICAgfCBcIm9uRm9jdXNcIlxuICAgICAgfCBcIm9uSW52YWxpZFwiXG4gICAgICB8IFwib25LZXlEb3duXCJcbiAgICAgIHwgXCJvbktleVVwXCJcbiAgICA+IHtcbiAgLyoqIFRoZSBpbnB1dCBuYW1lLiAqL1xuICBuYW1lPzogc3RyaW5nO1xuICAvKiogVGhlIHZhbHVlIG9mIHRoZSBpbnB1dCwgd2hlbiBjb250cm9sbGVkLiAqL1xuICB2YWx1ZT86IHN0cmluZztcbiAgLyoqIFRoZSBpbml0aWFsIHZhbHVlIG9mIHRoZSBpbnB1dCwgd2hlbiB1bmNvbnRyb2xsZWQuICovXG4gIGRlZmF1bHRWYWx1ZT86IHN0cmluZztcbiAgLyoqIElmIGB0cnVlYCB0aGUgaW5wdXQgaXMgZGlzYWJsZWQuICovXG4gIGRpc2FibGVkPzogYm9vbGVhbjtcbiAgLyoqIEluZGljYXRlcyB0aGF0IHRoZSBpbnB1dCBpcyBub3QgZWRpdGFibGUuICovXG4gIHJlYWRPbmx5PzogYm9vbGVhbjtcbiAgLyoqIElmIHRydWUsIHRoZSBpbnB1dCBlbGVtZW50IHdpbGwgYmUgcmVxdWlyZWQuICovXG4gIHJlcXVpcmVkPzogYm9vbGVhbjtcbiAgLyoqIFRoZSBmdW5jdGlvbiB0aGF0IHdpbGwgYmUgZXhlY3V0ZWQgb25DaGFuZ2UsIGFsbG93cyBtb2RpZmljYXRpb24gb2YgdGhlIGlucHV0LFxuICAgKiBpdCByZWNlaXZlcyB0aGUgdmFsdWUuIElmIGEgbmV3IHZhbHVlIHNob3VsZCBiZSBwcmVzZW50ZWQgaXQgbXVzdCByZXR1cm5lZCBpdC4gKi9cbiAgb25DaGFuZ2U/OiAoXG4gICAgZXZlbnQ6IFJlYWN0LkNoYW5nZUV2ZW50PEhUTUxJbnB1dEVsZW1lbnQgfCBIVE1MVGV4dEFyZWFFbGVtZW50PixcbiAgICB2YWx1ZTogc3RyaW5nXG4gICkgPT4gdm9pZDtcbiAgLyoqIFRoZSBpbnB1dCB0eXBlLiAqL1xuICB0eXBlPzogc3RyaW5nO1xuICAvKiogTGFiZWwgaW5zaWRlIHRoZSBpbnB1dCB1c2VkIHRvIGhlbHAgdXNlci4gKi9cbiAgcGxhY2Vob2xkZXI/OiBzdHJpbmc7XG4gIC8qKiBJZiB0cnVlLCBhIHRleHRhcmVhIGVsZW1lbnQgd2lsbCBiZSByZW5kZXJlZC4gKi9cbiAgbXVsdGlsaW5lPzogYm9vbGVhbjtcbiAgLyoqIElmIHRydWUgYW5kIG11bHRpbGluZSBpcyBhbHNvIHRydWUgdGhlIHRleHRhcmVhIGVsZW1lbnQgd2lsbCBiZSByZXNpemFibGUuICovXG4gIHJlc2l6YWJsZT86IGJvb2xlYW47XG4gIC8qKiBEZW5vdGVzIGlmIHRoZSBpbnB1dCBpcyBpbiBhbiBpbnZhbGlkIHN0YXRlLiAqL1xuICBpbnZhbGlkPzogYm9vbGVhbjtcbiAgLyoqIEF0dHJpYnV0ZXMgYXBwbGllZCB0byB0aGUgaW5wdXQgZWxlbWVudC4gKi9cbiAgaW5wdXRQcm9wcz86IE11aUlucHV0QmFzZUNvbXBvbmVudFByb3BzO1xuICAvKiogQWxsb3dzIHBhc3NpbmcgYSByZWYgdG8gdGhlIHVuZGVybHlpbmcgaW5wdXQgKi9cbiAgaW5wdXRSZWY/OiBJbnB1dEJhc2VQcm9wc1tcImlucHV0UmVmXCJdO1xuICAvKiogQSBKc3MgT2JqZWN0IHVzZWQgdG8gb3ZlcnJpZGUgb3IgZXh0ZW5kIHRoZSBzdHlsZXMgYXBwbGllZCB0byB0aGUgY29tcG9uZW50LiAqL1xuICBjbGFzc2VzPzogSHZCYXNlSW5wdXRDbGFzc2VzO1xufVxuXG4vKipcbiAqIEFuIElucHV0IGNvbXBvbmVudCB0aGF0IG9ubHkgcG9zc2VzIHRoZSBtb3N0IGJhc2ljIGZ1bmN0aW9uYWxpdGllcy5cbiAqIEl0IHNob3VsZCBiZSB1c2VkIGFsb25nc2lkZSB0aGUgb3RoZXIgZm9ybSBlbGVtZW50cyB0byBjb25zdHJ1Y3QgYSBwcm9wZXIgYWNjZXNzaWJsZSBmb3JtLlxuICovXG5leHBvcnQgY29uc3QgSHZCYXNlSW5wdXQgPSAoe1xuICBjbGFzc2VzOiBjbGFzc2VzUHJvcCxcbiAgY2xhc3NOYW1lID0gXCJcIixcbiAgaWQsXG4gIG5hbWUsXG4gIHZhbHVlLFxuICBkZWZhdWx0VmFsdWUsXG4gIHJlcXVpcmVkLFxuICByZWFkT25seSxcbiAgZGlzYWJsZWQsXG4gIG9uQ2hhbmdlLFxuICB0eXBlID0gXCJ0ZXh0XCIsXG4gIHBsYWNlaG9sZGVyLFxuICBtdWx0aWxpbmUgPSBmYWxzZSxcbiAgcmVzaXphYmxlID0gZmFsc2UsXG4gIGludmFsaWQgPSBmYWxzZSxcbiAgaW5wdXRSZWYsXG4gIGlucHV0UHJvcHMgPSB7fSxcbiAgLi4ub3RoZXJzXG59OiBIdkJhc2VJbnB1dFByb3BzKSA9PiB7XG4gIGNvbnN0IHsgY2xhc3NlcywgY3ggfSA9IHVzZUNsYXNzZXMoY2xhc3Nlc1Byb3ApO1xuICBjb25zdCBmb3JtRWxlbWVudENvbnRleHQgPSB1c2VDb250ZXh0KEh2Rm9ybUVsZW1lbnRDb250ZXh0KTtcbiAgY29uc3QgZm9ybUVsZW1lbnRQcm9wcyA9IGJ1aWxkRm9ybUVsZW1lbnRQcm9wc0Zyb21Db250ZXh0KFxuICAgIG5hbWUsXG4gICAgZGlzYWJsZWQsXG4gICAgcmVhZE9ubHksXG4gICAgcmVxdWlyZWQsXG4gICAgZm9ybUVsZW1lbnRDb250ZXh0XG4gICk7XG5cbiAgY29uc3QgbG9jYWxJbnZhbGlkID0gaW52YWxpZCB8fCBmb3JtRWxlbWVudFByb3BzLnN0YXR1cyA9PT0gXCJpbnZhbGlkXCI7XG5cbiAgY29uc3QgZm9ybUVsZW1lbnREZXNjcmlwdG9yc0NvbnRleHQgPSB1c2VDb250ZXh0KFxuICAgIEh2Rm9ybUVsZW1lbnREZXNjcmlwdG9yc0NvbnRleHRcbiAgKTtcbiAgY29uc3QgYXJpYVByb3BzID0gYnVpbGRBcmlhUHJvcHNGcm9tQ29udGV4dChcbiAgICBpbnB1dFByb3BzLFxuICAgIGZvcm1FbGVtZW50RGVzY3JpcHRvcnNDb250ZXh0LFxuICAgIGxvY2FsSW52YWxpZCxcbiAgICBpZFxuICApO1xuXG4gIGNvbnN0IG9uQ2hhbmdlSGFuZGxlcjogTXVpSW5wdXRQcm9wc1tcIm9uQ2hhbmdlXCJdID0gKGV2ZW50KSA9PiB7XG4gICAgb25DaGFuZ2U/LihldmVudCwgZXZlbnQudGFyZ2V0LnZhbHVlKTtcbiAgfTtcblxuICByZXR1cm4gKFxuICAgIDw+XG4gICAgICA8R2xvYmFsIHN0eWxlcz17YmFzZUlucHV0U3R5bGVzfSAvPlxuICAgICAgPGRpdlxuICAgICAgICBjbGFzc05hbWU9e2N4KGNsYXNzZXMucm9vdCwgY2xhc3NOYW1lLCB7XG4gICAgICAgICAgW2NsYXNzZXMuZGlzYWJsZWRdOiBmb3JtRWxlbWVudFByb3BzLmRpc2FibGVkLFxuICAgICAgICAgIFtjbGFzc2VzLmludmFsaWRdOiBsb2NhbEludmFsaWQsXG4gICAgICAgICAgW2NsYXNzZXMucmVzaXphYmxlXTogbXVsdGlsaW5lICYmIHJlc2l6YWJsZSxcbiAgICAgICAgICBbY2xhc3Nlcy5yZWFkT25seV06IGZvcm1FbGVtZW50UHJvcHMucmVhZE9ubHksXG4gICAgICAgIH0pfVxuICAgICAgPlxuICAgICAgICA8TXVpSW5wdXRcbiAgICAgICAgICBpZD17aWR9XG4gICAgICAgICAgbmFtZT17Zm9ybUVsZW1lbnRQcm9wcy5uYW1lfVxuICAgICAgICAgIHZhbHVlPXt2YWx1ZX1cbiAgICAgICAgICBkZWZhdWx0VmFsdWU9e2RlZmF1bHRWYWx1ZX1cbiAgICAgICAgICB0eXBlPXt0eXBlfVxuICAgICAgICAgIHBsYWNlaG9sZGVyPXtwbGFjZWhvbGRlcn1cbiAgICAgICAgICByZWFkT25seT17ISFmb3JtRWxlbWVudFByb3BzLnJlYWRPbmx5fVxuICAgICAgICAgIGRpc2FibGVkPXtmb3JtRWxlbWVudFByb3BzLmRpc2FibGVkfVxuICAgICAgICAgIG9uQ2hhbmdlPXtvbkNoYW5nZUhhbmRsZXJ9XG4gICAgICAgICAgY2xhc3NOYW1lPXtjeCh7XG4gICAgICAgICAgICBbY2xhc3Nlcy5pbnB1dFJvb3RJbnZhbGlkXTogbG9jYWxJbnZhbGlkLFxuICAgICAgICAgICAgW2NsYXNzZXMuaW5wdXRSb290UmVhZE9ubHldOiBmb3JtRWxlbWVudFByb3BzLnJlYWRPbmx5LFxuICAgICAgICAgIH0pfVxuICAgICAgICAgIGNsYXNzZXM9e3tcbiAgICAgICAgICAgIHJvb3Q6IGNsYXNzZXMuaW5wdXRSb290LFxuICAgICAgICAgICAgZm9jdXNlZDogY2xhc3Nlcy5pbnB1dFJvb3RGb2N1c2VkLFxuICAgICAgICAgICAgZGlzYWJsZWQ6IGNsYXNzZXMuaW5wdXRSb290RGlzYWJsZWQsXG4gICAgICAgICAgICBtdWx0aWxpbmU6IGNsYXNzZXMuaW5wdXRSb290TXVsdGlsaW5lLFxuICAgICAgICAgICAgaW5wdXQ6IGN4KGNsYXNzZXMuaW5wdXQsIHtcbiAgICAgICAgICAgICAgW2NsYXNzZXMuaW5wdXRSZXNpemFibGVdOiAhZm9ybUVsZW1lbnRQcm9wcy5kaXNhYmxlZCAmJiByZXNpemFibGUsXG4gICAgICAgICAgICAgIFtjbGFzc2VzLmlucHV0RGlzYWJsZWRdOiBmb3JtRWxlbWVudFByb3BzLmRpc2FibGVkLFxuICAgICAgICAgICAgICBbY2xhc3Nlcy5pbnB1dFJlYWRPbmx5XTogZm9ybUVsZW1lbnRQcm9wcy5yZWFkT25seSxcbiAgICAgICAgICAgIH0pLFxuICAgICAgICAgIH19XG4gICAgICAgICAgaW5wdXRQcm9wcz17e1xuICAgICAgICAgICAgLy8gQXZvaWQgdGhlIHJlcXVpcmVkIGF0dHJpYnV0ZSBhdCB0aGUgcm9vdCBub2RlXG4gICAgICAgICAgICByZXF1aXJlZDogZm9ybUVsZW1lbnRQcm9wcy5yZXF1aXJlZCxcbiAgICAgICAgICAgIC4uLmlucHV0UHJvcHMsXG4gICAgICAgICAgICAuLi5hcmlhUHJvcHMsXG4gICAgICAgICAgfX1cbiAgICAgICAgICBpbnB1dFJlZj17aW5wdXRSZWZ9XG4gICAgICAgICAgbXVsdGlsaW5lPXttdWx0aWxpbmV9XG4gICAgICAgICAgcm93cz17MTB9XG4gICAgICAgICAgey4uLm90aGVyc31cbiAgICAgICAgLz5cbiAgICAgICAgeyFtdWx0aWxpbmUgJiYgKFxuICAgICAgICAgIDxkaXYgcm9sZT1cInByZXNlbnRhdGlvblwiIGNsYXNzTmFtZT17Y2xhc3Nlcy5pbnB1dEJvcmRlckNvbnRhaW5lcn0gLz5cbiAgICAgICAgKX1cbiAgICAgIDwvZGl2PlxuICAgIDwvPlxuICApO1xufTtcbiJdfQ== */");
 const HvBaseInput = ({
   classes: classesProp,
   className = "",

package/dist/cjs/components/BaseInput/BaseInput.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"BaseInput.cjs","sources":["../../../../src/components/BaseInput/BaseInput.tsx"],"sourcesContent":["import { RefObject, useContext } from \"react\";\nimport {\n  InputBaseComponentProps as MuiInputBaseComponentProps,\n  InputProps as MuiInputProps,\n  Input as MuiInput,\n} from \"@mui/material\";\nimport { HvBaseProps } from \"@core/types\";\nimport { ExtractNames } from \"@core/utils\";\nimport {\n  HvFormElementContext,\n  HvFormElementDescriptorsContext,\n  buildFormElementPropsFromContext,\n  buildAriaPropsFromContext,\n} from \"@core/components\";\nimport { css as emotionCss, Global } from \"@emotion/react\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { staticClasses, useClasses } from \"./BaseInput.styles\";\n\nexport { staticClasses as baseInputClasses };\n\nexport type HvBaseInputClasses = ExtractNames<typeof useClasses>;\n\n// Global styles for the base input.\nconst baseInputStyles = emotionCss({\n  \"input:-webkit-autofill\": {\n    WebkitBoxShadow: `0 0 0px 1000px ${theme.colors.atmo1} inset`,\n    WebkitTextFillColor: theme.colors.secondary,\n  },\n\n  // Clears number input up/down arrows in Chrome and Firefox\n  \"input::-webkit-outer-spin-button,input::-webkit-inner-spin-button\": {\n    WebkitAppearance: \"none\",\n    margin: 0,\n  },\n  \"input[type=number]\": {\n    MozAppearance: \"textfield\",\n  },\n\n  // Clears time input clock in Chrome\n  \"input::-webkit-calendar-picker-indicator\": {\n    display: \"none\",\n  },\n\n  // Clears search input clear button in Chrome\n  \"input::-webkit-search-decoration,input::-webkit-search-cancel-button,input::-webkit-search-results-button,input::-webkit-search-results-decoration\":\n    {\n      display: \"none\",\n    },\n});\n\nexport interface HvBaseInputProps\n  extends Omit<MuiInputProps, \"onChange\" | \"classes\">,\n    HvBaseProps<\n      HTMLDivElement,\n      | \"onChange\"\n      | \"color\"\n      | \"onBlur\"\n      | \"onFocus\"\n      | \"onInvalid\"\n      | \"onKeyDown\"\n      | \"onKeyUp\"\n    > {\n  /** The input name. */\n  name?: string;\n  /** The value of the input, when controlled. */\n  value?: string;\n  /** The initial value of the input, when uncontrolled. */\n  defaultValue?: string;\n  /** If `true` the input is disabled. */\n  disabled?: boolean;\n  /** Indicates that the input is not editable. */\n  readOnly?: boolean;\n  /** If true, the input element will be required. */\n  required?: boolean;\n  /** The function that will be executed onChange, allows modification of the input,\n   * it receives the value. If a new value should be presented it must returned it. */\n  onChange?: (\n    event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,\n    value: string\n  ) => void;\n  /** The input type. */\n  type?: string;\n  /** Label inside the input used to help user. */\n  placeholder?: string;\n  /** If true, a textarea element will be rendered. */\n  multiline?: boolean;\n  /** If true and multiline is also true the textarea element will be resizable. */\n  resizable?: boolean;\n  /** Denotes if the input is in an invalid state. */\n  invalid?: boolean;\n  /** Attributes applied to the input element. */\n  inputProps?: MuiInputBaseComponentProps;\n  /** Allows passing a ref to the underlying input */\n  inputRef?: RefObject<HTMLElement>;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvBaseInputClasses;\n}\n\n/**\n * An Input component that only posses the most basic functionalities.\n * It should be used alongside the other form elements to construct a proper accessible form.\n */\nexport const HvBaseInput = ({\n  classes: classesProp,\n  className = \"\",\n  id,\n  name,\n  value,\n  defaultValue,\n  required,\n  readOnly,\n  disabled,\n  onChange,\n  type = \"text\",\n  placeholder,\n  multiline = false,\n  resizable = false,\n  invalid = false,\n  inputRef,\n  inputProps = {},\n  ...others\n}: HvBaseInputProps) => {\n  const { classes, cx } = useClasses(classesProp);\n  const formElementContext = useContext(HvFormElementContext);\n  const formElementProps = buildFormElementPropsFromContext(\n    name,\n    disabled,\n    readOnly,\n    required,\n    formElementContext\n  );\n\n  const localInvalid = invalid || formElementProps.status === \"invalid\";\n\n  const formElementDescriptorsContext = useContext(\n    HvFormElementDescriptorsContext\n  );\n  const ariaProps = buildAriaPropsFromContext(\n    inputProps,\n    formElementDescriptorsContext,\n    localInvalid,\n    id\n  );\n\n  const onChangeHandler = (\n    event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>\n  ) => {\n    onChange?.(event, event.target.value);\n  };\n\n  return (\n    <>\n      <Global styles={baseInputStyles} />\n      <div\n        className={cx(classes.root, className, {\n          [classes.disabled]: formElementProps.disabled,\n          [classes.invalid]: localInvalid,\n          [classes.resizable]: multiline && resizable,\n          [classes.readOnly]: formElementProps.readOnly,\n        })}\n      >\n        <MuiInput\n          id={id}\n          name={formElementProps.name}\n          value={value}\n          defaultValue={defaultValue}\n          type={type}\n          placeholder={placeholder}\n          readOnly={!!formElementProps.readOnly}\n          disabled={formElementProps.disabled}\n          onChange={onChangeHandler}\n          className={cx({\n            [classes.inputRootInvalid]: localInvalid,\n            [classes.inputRootReadOnly]: formElementProps.readOnly,\n          })}\n          classes={{\n            root: classes.inputRoot,\n            focused: classes.inputRootFocused,\n            disabled: classes.inputRootDisabled,\n            multiline: classes.inputRootMultiline,\n            input: cx(classes.input, {\n              [classes.inputResizable]: !formElementProps.disabled && resizable,\n              [classes.inputDisabled]: formElementProps.disabled,\n              [classes.inputReadOnly]: formElementProps.readOnly,\n            }),\n          }}\n          inputProps={{\n            // Avoid the required attribute at the root node\n            required: formElementProps.required,\n            ...inputProps,\n            ...ariaProps,\n          }}\n          inputRef={inputRef}\n          multiline={multiline}\n          rows={10}\n          {...others}\n        />\n        {!multiline && (\n          <div role=\"presentation\" className={classes.inputBorderContainer} />\n        )}\n      </div>\n    </>\n  );\n};\n"],"names":["baseInputStyles","emotionCss","WebkitBoxShadow","theme","colors","atmo1","WebkitTextFillColor","secondary","WebkitAppearance","margin","MozAppearance","display","process","env","NODE_ENV","HvBaseInput","classes","classesProp","className","id","name","value","defaultValue","required","readOnly","disabled","onChange","type","placeholder","multiline","resizable","invalid","inputRef","inputProps","others","cx","useClasses","formElementContext","useContext","HvFormElementContext","formElementProps","buildFormElementPropsFromContext","localInvalid","status","formElementDescriptorsContext","HvFormElementDescriptorsContext","ariaProps","buildAriaPropsFromContext","onChangeHandler","event","target","_Fragment","children","_jsx","Global","styles","_jsxs","root","MuiInput","inputRootInvalid","inputRootReadOnly","inputRoot","focused","inputRootFocused","inputRootDisabled","inputRootMultiline","input","inputResizable","inputDisabled","inputReadOnly","rows","role","inputBorderContainer"],"mappings":"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"}
+{"version":3,"file":"BaseInput.cjs","sources":["../../../../src/components/BaseInput/BaseInput.tsx"],"sourcesContent":["import { useContext } from \"react\";\nimport {\n  InputBaseComponentProps as MuiInputBaseComponentProps,\n  InputProps as MuiInputProps,\n  Input as MuiInput,\n  InputBaseProps,\n} from \"@mui/material\";\nimport { HvBaseProps } from \"@core/types\";\nimport { ExtractNames } from \"@core/utils\";\nimport {\n  HvFormElementContext,\n  HvFormElementDescriptorsContext,\n  buildFormElementPropsFromContext,\n  buildAriaPropsFromContext,\n} from \"@core/components\";\nimport { css as emotionCss, Global } from \"@emotion/react\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { staticClasses, useClasses } from \"./BaseInput.styles\";\n\nexport { staticClasses as baseInputClasses };\n\nexport type HvBaseInputClasses = ExtractNames<typeof useClasses>;\n\n// Global styles for the base input.\nconst baseInputStyles = emotionCss({\n  \"input:-webkit-autofill\": {\n    WebkitBoxShadow: `0 0 0px 1000px ${theme.colors.atmo1} inset`,\n    WebkitTextFillColor: theme.colors.secondary,\n  },\n\n  // Clears number input up/down arrows in Chrome and Firefox\n  \"input::-webkit-outer-spin-button,input::-webkit-inner-spin-button\": {\n    WebkitAppearance: \"none\",\n    margin: 0,\n  },\n  \"input[type=number]\": {\n    MozAppearance: \"textfield\",\n  },\n\n  // Clears time input clock in Chrome\n  \"input::-webkit-calendar-picker-indicator\": {\n    display: \"none\",\n  },\n\n  // Clears search input clear button in Chrome\n  \"input::-webkit-search-decoration,input::-webkit-search-cancel-button,input::-webkit-search-results-button,input::-webkit-search-results-decoration\":\n    {\n      display: \"none\",\n    },\n});\n\nexport interface HvBaseInputProps\n  extends Omit<MuiInputProps, \"onChange\" | \"classes\">,\n    HvBaseProps<\n      HTMLDivElement,\n      | \"onChange\"\n      | \"color\"\n      | \"onBlur\"\n      | \"onFocus\"\n      | \"onInvalid\"\n      | \"onKeyDown\"\n      | \"onKeyUp\"\n    > {\n  /** The input name. */\n  name?: string;\n  /** The value of the input, when controlled. */\n  value?: string;\n  /** The initial value of the input, when uncontrolled. */\n  defaultValue?: string;\n  /** If `true` the input is disabled. */\n  disabled?: boolean;\n  /** Indicates that the input is not editable. */\n  readOnly?: boolean;\n  /** If true, the input element will be required. */\n  required?: boolean;\n  /** The function that will be executed onChange, allows modification of the input,\n   * it receives the value. If a new value should be presented it must returned it. */\n  onChange?: (\n    event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,\n    value: string\n  ) => void;\n  /** The input type. */\n  type?: string;\n  /** Label inside the input used to help user. */\n  placeholder?: string;\n  /** If true, a textarea element will be rendered. */\n  multiline?: boolean;\n  /** If true and multiline is also true the textarea element will be resizable. */\n  resizable?: boolean;\n  /** Denotes if the input is in an invalid state. */\n  invalid?: boolean;\n  /** Attributes applied to the input element. */\n  inputProps?: MuiInputBaseComponentProps;\n  /** Allows passing a ref to the underlying input */\n  inputRef?: InputBaseProps[\"inputRef\"];\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvBaseInputClasses;\n}\n\n/**\n * An Input component that only posses the most basic functionalities.\n * It should be used alongside the other form elements to construct a proper accessible form.\n */\nexport const HvBaseInput = ({\n  classes: classesProp,\n  className = \"\",\n  id,\n  name,\n  value,\n  defaultValue,\n  required,\n  readOnly,\n  disabled,\n  onChange,\n  type = \"text\",\n  placeholder,\n  multiline = false,\n  resizable = false,\n  invalid = false,\n  inputRef,\n  inputProps = {},\n  ...others\n}: HvBaseInputProps) => {\n  const { classes, cx } = useClasses(classesProp);\n  const formElementContext = useContext(HvFormElementContext);\n  const formElementProps = buildFormElementPropsFromContext(\n    name,\n    disabled,\n    readOnly,\n    required,\n    formElementContext\n  );\n\n  const localInvalid = invalid || formElementProps.status === \"invalid\";\n\n  const formElementDescriptorsContext = useContext(\n    HvFormElementDescriptorsContext\n  );\n  const ariaProps = buildAriaPropsFromContext(\n    inputProps,\n    formElementDescriptorsContext,\n    localInvalid,\n    id\n  );\n\n  const onChangeHandler: MuiInputProps[\"onChange\"] = (event) => {\n    onChange?.(event, event.target.value);\n  };\n\n  return (\n    <>\n      <Global styles={baseInputStyles} />\n      <div\n        className={cx(classes.root, className, {\n          [classes.disabled]: formElementProps.disabled,\n          [classes.invalid]: localInvalid,\n          [classes.resizable]: multiline && resizable,\n          [classes.readOnly]: formElementProps.readOnly,\n        })}\n      >\n        <MuiInput\n          id={id}\n          name={formElementProps.name}\n          value={value}\n          defaultValue={defaultValue}\n          type={type}\n          placeholder={placeholder}\n          readOnly={!!formElementProps.readOnly}\n          disabled={formElementProps.disabled}\n          onChange={onChangeHandler}\n          className={cx({\n            [classes.inputRootInvalid]: localInvalid,\n            [classes.inputRootReadOnly]: formElementProps.readOnly,\n          })}\n          classes={{\n            root: classes.inputRoot,\n            focused: classes.inputRootFocused,\n            disabled: classes.inputRootDisabled,\n            multiline: classes.inputRootMultiline,\n            input: cx(classes.input, {\n              [classes.inputResizable]: !formElementProps.disabled && resizable,\n              [classes.inputDisabled]: formElementProps.disabled,\n              [classes.inputReadOnly]: formElementProps.readOnly,\n            }),\n          }}\n          inputProps={{\n            // Avoid the required attribute at the root node\n            required: formElementProps.required,\n            ...inputProps,\n            ...ariaProps,\n          }}\n          inputRef={inputRef}\n          multiline={multiline}\n          rows={10}\n          {...others}\n        />\n        {!multiline && (\n          <div role=\"presentation\" className={classes.inputBorderContainer} />\n        )}\n      </div>\n    </>\n  );\n};\n"],"names":["baseInputStyles","emotionCss","WebkitBoxShadow","theme","colors","atmo1","WebkitTextFillColor","secondary","WebkitAppearance","margin","MozAppearance","display","process","env","NODE_ENV","HvBaseInput","classes","classesProp","className","id","name","value","defaultValue","required","readOnly","disabled","onChange","type","placeholder","multiline","resizable","invalid","inputRef","inputProps","others","cx","useClasses","formElementContext","useContext","HvFormElementContext","formElementProps","buildFormElementPropsFromContext","localInvalid","status","formElementDescriptorsContext","HvFormElementDescriptorsContext","ariaProps","buildAriaPropsFromContext","onChangeHandler","event","target","_Fragment","children","_jsx","Global","styles","_jsxs","root","MuiInput","inputRootInvalid","inputRootReadOnly","inputRoot","focused","inputRootFocused","inputRootDisabled","inputRootMultiline","input","inputResizable","inputDisabled","inputReadOnly","rows","role","inputBorderContainer"],"mappings":"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"}

package/dist/cjs/components/Box/Box.cjs

@@ -3,7 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const React = require("react");
 const jsxRuntime = require("@emotion/react/jsx-runtime");
-const useSx = (sx) => {
+const sxFn = (sx) => {
   return typeof sx === "function" ? sx(uikitStyles.theme) : sx;
 };
 const HvBox = React.forwardRef(({
@@ -15,7 +15,7 @@ const HvBox = React.forwardRef(({
 }, ref) => {
   const Component = component || "div";
   return /* @__PURE__ */ jsxRuntime.jsx(Component, {
-    style: sx ? useSx(sx) : style,
+    style: sx ? sxFn(sx) : style,
     ref,
     ...restProps,
     children

package/dist/cjs/components/Box/Box.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Box.cjs","sources":["../../../../src/components/Box/Box.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\nimport { forwardRef } from \"react\";\nimport { PolymorphicComponentRef, PolymorphicRef } from \"@core/types\";\n\ntype SxProps = React.CSSProperties | ((theme) => React.CSSProperties);\n\ntype HvBaseProps<C extends React.ElementType> = PolymorphicComponentRef<\n  C,\n  { style?: React.CSSProperties; sx?: SxProps }\n>;\n\nexport type HvBoxProps = <C extends React.ElementType = \"div\">(\n  props: HvBaseProps<C>\n) => React.ReactElement | null;\n\nconst useSx = (sx: SxProps) => {\n  return typeof sx === \"function\" ? sx(theme) : sx;\n};\n\nexport const HvBox: HvBoxProps = forwardRef(\n  <C extends React.ElementType = \"div\">(\n    { style, component, sx, children, ...restProps }: HvBaseProps<C>,\n    ref?: PolymorphicRef<C>\n  ) => {\n    const Component = component || \"div\";\n\n    return (\n      <Component style={sx ? useSx(sx) : style} ref={ref} {...restProps}>\n        {children}\n      </Component>\n    );\n  }\n);\n"],"names":["useSx","sx","theme","HvBox","forwardRef","style","component","children","restProps","ref","Component"],"mappings":";;;;;AAeA,MAAMA,QAAQA,CAACC,OAAgB;AAC7B,SAAO,OAAOA,OAAO,aAAaA,GAAGC,YAAK,KAAA,IAAID;AAChD;AAEaE,MAAAA,QAAoBC,iBAC/B,CACE;AAAA,EAAEC;AAAAA,EAAOC;AAAAA,EAAWL;AAAAA,EAAIM;AAAAA,EAAU,GAAGC;AAA0B,GAC/DC,QACG;AACH,QAAMC,YAAYJ,aAAa;AAE/B,wCACGI,WAAS;AAAA,IAACL,OAAOJ,KAAKD,MAAMC,EAAE,IAAII;AAAAA,IAAOI;AAAAA,IAAS,GAAKD;AAAAA,IAASD;AAAAA,EAAAA,CAEtD;AAEf,CACF;;"}
+{"version":3,"file":"Box.cjs","sources":["../../../../src/components/Box/Box.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\nimport { forwardRef } from \"react\";\nimport { PolymorphicComponentRef, PolymorphicRef } from \"@core/types\";\n\ntype SxProps = React.CSSProperties | ((theme) => React.CSSProperties);\n\ntype HvBoxBaseProps<C extends React.ElementType> = PolymorphicComponentRef<\n  C,\n  { style?: React.CSSProperties; sx?: SxProps }\n>;\n\nexport type HvBoxProps = <C extends React.ElementType = \"div\">(\n  props: HvBoxBaseProps<C>\n) => React.ReactElement | null;\n\nconst sxFn = (sx: SxProps) => {\n  return typeof sx === \"function\" ? sx(theme) : sx;\n};\n\n/**\n * Customizable layout component that can be used to wrap other components.\n * It can be used to add styles to the wrapped components.\n * It can also be used to create a layout using the flexbox properties.\n */\nexport const HvBox: HvBoxProps = forwardRef(\n  <C extends React.ElementType = \"div\">(\n    { style, component, sx, children, ...restProps }: HvBoxBaseProps<C>,\n    ref?: PolymorphicRef<C>\n  ) => {\n    const Component = component || \"div\";\n\n    return (\n      <Component style={sx ? sxFn(sx) : style} ref={ref} {...restProps}>\n        {children}\n      </Component>\n    );\n  }\n);\n"],"names":["sxFn","sx","theme","HvBox","forwardRef","style","component","children","restProps","ref","Component"],"mappings":";;;;;AAeA,MAAMA,OAAOA,CAACC,OAAgB;AAC5B,SAAO,OAAOA,OAAO,aAAaA,GAAGC,YAAK,KAAA,IAAID;AAChD;AAOaE,MAAAA,QAAoBC,iBAC/B,CACE;AAAA,EAAEC;AAAAA,EAAOC;AAAAA,EAAWL;AAAAA,EAAIM;AAAAA,EAAU,GAAGC;AAA6B,GAClEC,QACG;AACH,QAAMC,YAAYJ,aAAa;AAE/B,wCACGI,WAAS;AAAA,IAACL,OAAOJ,KAAKD,KAAKC,EAAE,IAAII;AAAAA,IAAOI;AAAAA,IAAS,GAAKD;AAAAA,IAASD;AAAAA,EAAAA,CAErD;AAEf,CACF;;"}

package/dist/cjs/components/Carousel/Carousel.cjs

@@ -45,16 +45,16 @@ const HvCarousel = (props) => {
   });
   const [selectedIndex, setSelectedIndex] = React.useState((carouselOptions == null ? void 0 : carouselOptions.startIndex) ?? 0);
   const numSlides = React.Children.count(children);
-  const handlePrevious = () => {
+  const handlePrevious = React.useCallback(() => {
     controller == null ? void 0 : controller.scrollPrev();
-  };
-  const handleNext = () => {
+  }, [controller]);
+  const handleNext = React.useCallback(() => {
     controller == null ? void 0 : controller.scrollNext();
-  };
+  }, [controller]);
   const handleScroll = (index) => {
     controller == null ? void 0 : controller.scrollTo(index);
   };
-  const handleSelect = () => {
+  const handleSelect = React.useCallback(() => {
     var _a, _b, _c;
     if (!controller)
       return;
@@ -65,7 +65,7 @@ const HvCarousel = (props) => {
       block: "nearest"
     });
     onChange == null ? void 0 : onChange(slideIndex);
-  };
+  }, [controller, onChange]);
   React.useEffect(() => {
     if (!controller)
       return;
@@ -73,13 +73,13 @@ const HvCarousel = (props) => {
     return () => {
       controller.off("select", handleSelect);
     };
-  }, [controller]);
+  }, [controller, handleSelect]);
   React.useEffect(() => {
     if (!controller)
       return;
     controller.reInit();
     setSelectedIndex((currentIndex) => clamp(currentIndex, numSlides, 0));
-  }, [numSlides]);
+  }, [numSlides, controller]);
   const canPrev = (controller == null ? void 0 : controller.canScrollPrev()) ?? false;
   const canNext = (controller == null ? void 0 : controller.canScrollNext()) ?? false;
   const showTitle = !!title && (!xs || isFullscreen);

package/dist/cjs/components/Carousel/Carousel.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Carousel.cjs","sources":["../../../../src/components/Carousel/Carousel.tsx"],"sourcesContent":["import React, {\n  CSSProperties,\n  Children,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport useCarousel, { EmblaOptionsType } from \"embla-carousel-react\";\nimport {\n  Backwards,\n  Forwards,\n  Close,\n  Fullscreen,\n} from \"@hitachivantara/uikit-react-icons\";\nimport { HvButton, HvContainer, HvStack, HvTypography } from \"@core/components\";\nimport { HvBaseProps } from \"@core/types\";\nimport { ExtractNames } from \"@core/utils\";\n\nimport { staticClasses, useClasses } from \"./Carousel.styles\";\n\nconst clamp = (num: number, max: number, min = 0) =>\n  Math.min(Math.max(num, min), max);\n\nexport { staticClasses as carouselClasses };\n\nexport type HvCarouselClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCarouselProps\n  extends HvBaseProps<HTMLDivElement, \"title\" | \"onChange\"> {\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvCarouselClasses;\n  /** Height of the Slider container. If `undefined`, images will keep a 16/9 aspect-ratio */\n  height?: CSSProperties[\"height\"];\n  /** Width of the thumbnail. Height will try to maintain a 16/9 aspect-ratio */\n  thumbnailWidth?: CSSProperties[\"width\"];\n  /** Title of the carousel */\n  title?: React.ReactNode;\n  /** Content slides to be displayed. @see `<HvCarouselSlide />` */\n  children?: React.ReactNode;\n  /** Custom content to render in the actions area */\n  actions?: React.ReactNode;\n  /** Whether Carousel is in \"xs mode\" - to use in embedded contexts */\n  xs?: boolean;\n  /** Whether to show dots instead of arrow pagination. Defaults to true under 5 elements */\n  showDots?: boolean;\n  /** Whether to show the counter on the top-right corner of the active slide */\n  showCounter?: boolean;\n  /** Whether to show the back/forwards buttons over the active slide */\n  showSlideControls?: boolean;\n  /** Whether to enable the fullscreen toggle button */\n  showFullscreen?: boolean;\n  /** Whether to hide the thumbnails. Hidden by default in \"xs\" mode */\n  hideThumbnails?: boolean;\n  /** Carousel configuration options. @see https://www.embla-carousel.com/api/options/ */\n  carouselOptions?: EmblaOptionsType;\n  /** */\n  renderThumbnail?: (index: number) => React.ReactNode;\n  /** The callback fired when the active slide changes. */\n  onChange?: (index: number) => void;\n}\n\n/**\n * A Carousel is commonly used to browse images, it can also be used to browse any kind of content like text, video, or charts.\n * It allows you to focus on a particular content while having a notion of how many you have to explore.\n */\nexport const HvCarousel = (props: HvCarouselProps) => {\n  const {\n    className,\n    classes: classesProp,\n    height: heightProp = \"auto\",\n    thumbnailWidth = 90,\n    title,\n    children,\n    actions,\n    xs,\n    showDots: showDotsProp,\n    showCounter: showCounterProp,\n    showSlideControls,\n    showFullscreen: showFullscreenProp,\n    hideThumbnails: hideThumbnailsProp,\n    carouselOptions,\n    renderThumbnail,\n    onChange,\n    ...others\n  } = props;\n  const { classes, cx } = useClasses(classesProp);\n  const thumbnailsRef = useRef<HTMLDivElement>(null);\n  const [isFullscreen, setIsFullscreen] = useState(false);\n\n  const [containerRef, controller] = useCarousel({\n    align: \"start\",\n    loop: true,\n    ...carouselOptions,\n  });\n\n  const [selectedIndex, setSelectedIndex] = useState(\n    carouselOptions?.startIndex ?? 0\n  );\n\n  const numSlides = Children.count(children);\n\n  const handlePrevious = () => {\n    controller?.scrollPrev();\n  };\n\n  const handleNext = () => {\n    controller?.scrollNext();\n  };\n\n  const handleScroll = (index: number) => {\n    controller?.scrollTo(index);\n  };\n\n  const handleSelect = () => {\n    if (!controller) return;\n\n    const slideIndex = controller.selectedScrollSnap();\n    setSelectedIndex(slideIndex);\n\n    // scroll to thumbnail button\n    thumbnailsRef.current\n      ?.querySelectorAll(\"button\")\n      ?.[slideIndex]?.scrollIntoView({\n        behavior: \"smooth\",\n        block: \"nearest\",\n      });\n\n    onChange?.(slideIndex);\n  };\n\n  useEffect(() => {\n    if (!controller) return;\n\n    controller.on(\"select\", handleSelect);\n\n    return () => {\n      controller.off(\"select\", handleSelect);\n    };\n  }, [controller]);\n\n  useEffect(() => {\n    if (!controller) return;\n\n    controller.reInit();\n    setSelectedIndex((currentIndex) => clamp(currentIndex, numSlides, 0));\n  }, [numSlides]);\n\n  const canPrev = controller?.canScrollPrev() ?? false;\n  const canNext = controller?.canScrollNext() ?? false;\n  const showTitle = !!title && (!xs || isFullscreen);\n  const showFullscreen = showFullscreenProp ?? xs;\n  const height = isFullscreen ? \"100%\" : heightProp ?? \"auto\";\n  const showCounter = xs;\n  const hideThumbnails = hideThumbnailsProp ?? (xs && !isFullscreen);\n  const showThumbnails = !hideThumbnails && !!renderThumbnail;\n  const showDots = showDotsProp ?? numSlides <= 5;\n\n  return (\n    <HvContainer\n      className={cx(classes.root, className, {\n        [classes.xs]: xs,\n        [classes.fullscreen]: isFullscreen,\n      })}\n      {...others}\n    >\n      {showTitle && (\n        <HvTypography variant=\"title2\" className={classes.title}>\n          {title}\n        </HvTypography>\n      )}\n      <div className={classes.actions}>\n        {showFullscreen && (\n          <HvButton\n            icon\n            variant=\"secondaryGhost\"\n            onClick={() => setIsFullscreen((curr) => !curr)}\n            className={classes.closeButton}\n          >\n            {isFullscreen ? (\n              <Close aria-label=\"Close\" />\n            ) : (\n              <Fullscreen aria-label=\"Fullscreen\" />\n            )}\n          </HvButton>\n        )}\n        {actions}\n      </div>\n\n      <div className={classes.mainContainer}>\n        <div className={classes.controls}>\n          {showDots ? (\n            <div className={classes.dots}>\n              {Array.from(Array(numSlides)).map((el, index) => (\n                <span\n                  key={`circle-${index}`}\n                  className={cx(classes.dot, {\n                    [classes.dotSelected]: index === selectedIndex,\n                  })}\n                />\n              ))}\n            </div>\n          ) : (\n            <>\n              <HvButton\n                icon\n                disabled={!canPrev}\n                variant=\"secondaryGhost\"\n                aria-label=\"Backwards\"\n                onClick={handlePrevious}\n              >\n                <Backwards iconSize=\"XS\" />\n              </HvButton>\n              <div className={classes.pageCounter}>\n                {`${selectedIndex + 1} / ${numSlides}`}\n              </div>\n              <HvButton\n                icon\n                disabled={!canNext}\n                variant=\"secondaryGhost\"\n                aria-label=\"Forwards\"\n                onClick={handleNext}\n              >\n                <Forwards iconSize=\"XS\" />\n              </HvButton>\n            </>\n          )}\n        </div>\n\n        <div\n          className={cx(classes.main, {\n            [classes.mainXs]: xs,\n            [classes.mainFullscreen]: isFullscreen,\n          })}\n        >\n          {showCounter && (\n            <div className={classes.counterContainer}>\n              <span className={classes.counter}>\n                {`${selectedIndex + 1}/${numSlides}`}\n              </span>\n            </div>\n          )}\n\n          {showSlideControls && (\n            <div className={classes.slideControls}>\n              <HvButton\n                icon\n                disabled={!canPrev}\n                variant=\"secondary\"\n                aria-label=\"Backwards\"\n                onClick={handlePrevious}\n              >\n                <Backwards iconSize=\"XS\" />\n              </HvButton>\n              <HvButton\n                icon\n                disabled={!canNext}\n                variant=\"secondary\"\n                aria-label=\"Forwards\"\n                onClick={handleNext}\n              >\n                <Forwards iconSize=\"XS\" />\n              </HvButton>\n            </div>\n          )}\n\n          <div\n            ref={containerRef}\n            style={{ height }}\n            className={classes.slidesViewport}\n          >\n            <div className={classes.slidesContainer}>{children}</div>\n          </div>\n        </div>\n      </div>\n\n      {showThumbnails && (\n        <div ref={thumbnailsRef} className={classes.panel}>\n          <HvStack direction=\"row\" spacing=\"xs\">\n            {Array.from(Array(numSlides)).map((doc, i) => (\n              <HvButton\n                icon\n                variant=\"secondaryGhost\"\n                key={`button-${i}`}\n                style={{ width: thumbnailWidth }}\n                className={cx(classes.thumbnail, {\n                  [classes.thumbnailSelected]: i === selectedIndex,\n                })}\n                onClick={() => handleScroll(i)}\n              >\n                {renderThumbnail(i)}\n              </HvButton>\n            ))}\n          </HvStack>\n        </div>\n      )}\n    </HvContainer>\n  );\n};\n"],"names":["clamp","num","max","min","Math","HvCarousel","props","className","classes","classesProp","height","heightProp","thumbnailWidth","title","children","actions","xs","showDots","showDotsProp","showCounter","showCounterProp","showSlideControls","showFullscreen","showFullscreenProp","hideThumbnails","hideThumbnailsProp","carouselOptions","renderThumbnail","onChange","others","cx","useClasses","thumbnailsRef","useRef","isFullscreen","setIsFullscreen","useState","containerRef","controller","useCarousel","align","loop","selectedIndex","setSelectedIndex","startIndex","numSlides","Children","count","handlePrevious","scrollPrev","handleNext","scrollNext","handleScroll","index","scrollTo","handleSelect","slideIndex","selectedScrollSnap","current","querySelectorAll","scrollIntoView","behavior","block","useEffect","on","off","reInit","currentIndex","canPrev","canScrollPrev","canNext","canScrollNext","showTitle","showThumbnails","HvContainer","root","fullscreen","_jsx","HvTypography","variant","_jsxs","HvButton","icon","onClick","curr","closeButton","Close","Fullscreen","mainContainer","controls","dots","Array","from","map","el","dot","dotSelected","_Fragment","disabled","Backwards","iconSize","pageCounter","Forwards","main","mainXs","mainFullscreen","counterContainer","counter","slideControls","ref","style","slidesViewport","slidesContainer","panel","HvStack","direction","spacing","doc","i","width","thumbnail","thumbnailSelected"],"mappings":";;;;;;;;;;;;;AAoBA,MAAMA,QAAQA,CAACC,KAAaC,KAAaC,MAAM,MAC7CC,KAAKD,IAAIC,KAAKF,IAAID,KAAKE,GAAG,GAAGD,GAAG;AA4CrBG,MAAAA,aAAaA,CAACC,UAA2B;AAC9C,QAAA;AAAA,IACJC;AAAAA,IACAC,SAASC;AAAAA,IACTC,QAAQC,aAAa;AAAA,IACrBC,iBAAiB;AAAA,IACjBC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,UAAUC;AAAAA,IACVC,aAAaC;AAAAA,IACbC;AAAAA,IACAC,gBAAgBC;AAAAA,IAChBC,gBAAgBC;AAAAA,IAChBC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACA,GAAGC;AAAAA,EACDvB,IAAAA;AACE,QAAA;AAAA,IAAEE;AAAAA,IAASsB;AAAAA,EAAAA,IAAOC,gBAAAA,WAAWtB,WAAW;AACxCuB,QAAAA,gBAAgBC,aAAuB,IAAI;AACjD,QAAM,CAACC,cAAcC,eAAe,IAAIC,eAAS,KAAK;AAEtD,QAAM,CAACC,cAAcC,UAAU,IAAIC,6BAAY;AAAA,IAC7CC,OAAO;AAAA,IACPC,MAAM;AAAA,IACN,GAAGf;AAAAA,EAAAA,CACJ;AAED,QAAM,CAACgB,eAAeC,gBAAgB,IAAIP,MACxCV,UAAAA,mDAAiBkB,eAAc,CACjC;AAEMC,QAAAA,YAAYC,MAAAA,SAASC,MAAMjC,QAAQ;AAEzC,QAAMkC,iBAAiBA,MAAM;AAC3BV,6CAAYW;AAAAA,EAAW;AAGzB,QAAMC,aAAaA,MAAM;AACvBZ,6CAAYa;AAAAA,EAAW;AAGnBC,QAAAA,eAAeA,CAACC,UAAkB;AACtCf,6CAAYgB,SAASD;AAAAA,EAAK;AAG5B,QAAME,eAAeA,MAAM;;AACzB,QAAI,CAACjB;AAAY;AAEXkB,UAAAA,aAAalB,WAAWmB;AAC9Bd,qBAAiBa,UAAU;AAG3BxB,oCAAc0B,YAAd1B,mBACI2B,iBAAiB,cADrB3B,mBAEKwB,gBAFLxB,mBAEkB4B,eAAe;AAAA,MAC7BC,UAAU;AAAA,MACVC,OAAO;AAAA,IAAA;AAGXlC,yCAAW4B;AAAAA,EAAU;AAGvBO,QAAAA,UAAU,MAAM;AACd,QAAI,CAACzB;AAAY;AAEN0B,eAAAA,GAAG,UAAUT,YAAY;AAEpC,WAAO,MAAM;AACAU,iBAAAA,IAAI,UAAUV,YAAY;AAAA,IAAA;AAAA,EACvC,GACC,CAACjB,UAAU,CAAC;AAEfyB,QAAAA,UAAU,MAAM;AACd,QAAI,CAACzB;AAAY;AAEjBA,eAAW4B,OAAO;AAClBvB,qBAAkBwB,CAAiBnE,iBAAAA,MAAMmE,cAActB,WAAW,CAAC,CAAC;AAAA,EAAA,GACnE,CAACA,SAAS,CAAC;AAERuB,QAAAA,WAAU9B,yCAAY+B,oBAAmB;AACzCC,QAAAA,WAAUhC,yCAAYiC,oBAAmB;AAC/C,QAAMC,YAAY,CAAC,CAAC3D,UAAU,CAACG,MAAMkB;AACrC,QAAMZ,iBAAiBC,sBAAsBP;AACvCN,QAAAA,SAASwB,eAAe,SAASvB,cAAc;AACrD,QAAMQ,cAAcH;AACdQ,QAAAA,iBAAiBC,uBAAuBT,MAAM,CAACkB;AACrD,QAAMuC,iBAAiB,CAACjD,kBAAkB,CAAC,CAACG;AACtCV,QAAAA,WAAWC,gBAAgB2B,aAAa;AAE9C,yCACG6B,UAAAA,aAAW;AAAA,IACVnE,WAAWuB,GAAGtB,QAAQmE,MAAMpE,WAAW;AAAA,MACrC,CAACC,QAAQQ,EAAE,GAAGA;AAAAA,MACd,CAACR,QAAQoE,UAAU,GAAG1C;AAAAA,IAAAA,CACvB;AAAA,IAAE,GACCL;AAAAA,IAAMf,UAET0D,CAAAA,aACCK,2BAAAA,IAACC,yBAAY;AAAA,MAACC,SAAQ;AAAA,MAASxE,WAAWC,QAAQK;AAAAA,MAAMC,UACrDD;AAAAA,IAAAA,CACW,GAEhBmE,2BAAAA,KAAA,OAAA;AAAA,MAAKzE,WAAWC,QAAQO;AAAAA,MAAQD,UAC7BQ,CAAAA,kBACCuD,2BAAAA,IAACI,iBAAQ;AAAA,QACPC,MAAI;AAAA,QACJH,SAAQ;AAAA,QACRI,SAASA,MAAMhD,gBAAiBiD,CAAAA,SAAS,CAACA,IAAI;AAAA,QAC9C7E,WAAWC,QAAQ6E;AAAAA,QAAYvE,UAE9BoB,eACC2C,2BAAAA,IAACS,uBAAK;AAAA,UAAC,cAAW;AAAA,QAAA,CAAS,IAE3BT,2BAAAA,IAACU,4BAAU;AAAA,UAAC,cAAW;AAAA,QAAA,CAAc;AAAA,MAE/B,CAAA,GAEXxE,OAAO;AAAA,IAAA,CACL,GAELiE,2BAAAA,KAAA,OAAA;AAAA,MAAKzE,WAAWC,QAAQgF;AAAAA,MAAc1E,WACpC+D,2BAAAA,IAAA,OAAA;AAAA,QAAKtE,WAAWC,QAAQiF;AAAAA,QAAS3E,UAC9BG,WACC4D,2BAAAA,IAAA,OAAA;AAAA,UAAKtE,WAAWC,QAAQkF;AAAAA,UAAK5E,UAC1B6E,MAAMC,KAAKD,MAAM9C,SAAS,CAAC,EAAEgD,IAAI,CAACC,IAAIzC,UACrCwB,2BAAAA,IAAA,QAAA;AAAA,YAEEtE,WAAWuB,GAAGtB,QAAQuF,KAAK;AAAA,cACzB,CAACvF,QAAQwF,WAAW,GAAG3C,UAAUX;AAAAA,YAAAA,CAClC;AAAA,UAAE,GAHG,UAASW,OAIhB,CACF;AAAA,QAAA,CACE,IAEL2B,2BAAAA,KAAAiB,qBAAA;AAAA,UAAAnF,UAAA,CACE+D,2BAAAA,IAACI,iBAAQ;AAAA,YACPC,MAAI;AAAA,YACJgB,UAAU,CAAC9B;AAAAA,YACXW,SAAQ;AAAA,YACR,cAAW;AAAA,YACXI,SAASnC;AAAAA,YAAelC,yCAEvBqF,2BAAS;AAAA,cAACC,UAAS;AAAA,YAAA,CAAM;AAAA,UAAA,CAClB,GACVvB,2BAAAA,IAAA,OAAA;AAAA,YAAKtE,WAAWC,QAAQ6F;AAAAA,YAAYvF,UAChC,GAAE4B,gBAAgB,OAAOG;AAAAA,UAAAA,CACxB,GACLgC,2BAAAA,IAACI,iBAAQ;AAAA,YACPC,MAAI;AAAA,YACJgB,UAAU,CAAC5B;AAAAA,YACXS,SAAQ;AAAA,YACR,cAAW;AAAA,YACXI,SAASjC;AAAAA,YAAWpC,yCAEnBwF,0BAAQ;AAAA,cAACF,UAAS;AAAA,YAAA,CAAM;AAAA,UAAA,CACjB,CAAC;AAAA,QAAA,CACX;AAAA,MAAA,CAED,GAELpB,2BAAAA,KAAA,OAAA;AAAA,QACEzE,WAAWuB,GAAGtB,QAAQ+F,MAAM;AAAA,UAC1B,CAAC/F,QAAQgG,MAAM,GAAGxF;AAAAA,UAClB,CAACR,QAAQiG,cAAc,GAAGvE;AAAAA,QAAAA,CAC3B;AAAA,QAAEpB,UAAA,CAEFK,eACC0D,2BAAAA,IAAA,OAAA;AAAA,UAAKtE,WAAWC,QAAQkG;AAAAA,UAAiB5F,yCACvC,QAAA;AAAA,YAAMP,WAAWC,QAAQmG;AAAAA,YAAQ7F,UAC7B,GAAE4B,gBAAgB,KAAKG;AAAAA,UAAAA,CACrB;AAAA,QAAA,CACH,GAGNxB,qBACC2D,2BAAAA,KAAA,OAAA;AAAA,UAAKzE,WAAWC,QAAQoG;AAAAA,UAAc9F,UAAA,CACpC+D,2BAAAA,IAACI,iBAAQ;AAAA,YACPC,MAAI;AAAA,YACJgB,UAAU,CAAC9B;AAAAA,YACXW,SAAQ;AAAA,YACR,cAAW;AAAA,YACXI,SAASnC;AAAAA,YAAelC,yCAEvBqF,2BAAS;AAAA,cAACC,UAAS;AAAA,YAAA,CAAM;AAAA,UAAA,CAClB,GACVvB,2BAAAA,IAACI,iBAAQ;AAAA,YACPC,MAAI;AAAA,YACJgB,UAAU,CAAC5B;AAAAA,YACXS,SAAQ;AAAA,YACR,cAAW;AAAA,YACXI,SAASjC;AAAAA,YAAWpC,yCAEnBwF,0BAAQ;AAAA,cAACF,UAAS;AAAA,YAAA,CAAM;AAAA,UAAA,CACjB,CAAC;AAAA,QAAA,CACR,GAGPvB,2BAAAA,IAAA,OAAA;AAAA,UACEgC,KAAKxE;AAAAA,UACLyE,OAAO;AAAA,YAAEpG;AAAAA,UAAO;AAAA,UAChBH,WAAWC,QAAQuG;AAAAA,UAAejG,yCAElC,OAAA;AAAA,YAAKP,WAAWC,QAAQwG;AAAAA,YAAgBlG;AAAAA,UAAAA,CAAgB;AAAA,QAAA,CACrD,CAAC;AAAA,MAAA,CACH,CAAC;AAAA,IAAA,CACH,GAEJ2D,kBACCI,2BAAAA,IAAA,OAAA;AAAA,MAAKgC,KAAK7E;AAAAA,MAAezB,WAAWC,QAAQyG;AAAAA,MAAMnG,yCAC/CoG,eAAO;AAAA,QAACC,WAAU;AAAA,QAAMC,SAAQ;AAAA,QAAItG,UAClC6E,MAAMC,KAAKD,MAAM9C,SAAS,CAAC,EAAEgD,IAAI,CAACwB,KAAKC,MACtCzC,2BAAAA,IAACI,OAAAA,UAAQ;AAAA,UACPC,MAAI;AAAA,UACJH,SAAQ;AAAA,UAER+B,OAAO;AAAA,YAAES,OAAO3G;AAAAA,UAAe;AAAA,UAC/BL,WAAWuB,GAAGtB,QAAQgH,WAAW;AAAA,YAC/B,CAAChH,QAAQiH,iBAAiB,GAAGH,MAAM5E;AAAAA,UAAAA,CACpC;AAAA,UACDyC,SAASA,MAAM/B,aAAakE,CAAC;AAAA,UAAExG,UAE9Ba,gBAAgB2F,CAAC;AAAA,QAAC,GAPb,UAASA,GAQP,CACX;AAAA,MAAA,CACM;AAAA,IAAA,CACN,CACN;AAAA,EAAA,CACU;AAEjB;;;"}
+{"version":3,"file":"Carousel.cjs","sources":["../../../../src/components/Carousel/Carousel.tsx"],"sourcesContent":["import React, {\n  CSSProperties,\n  Children,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport useCarousel, { EmblaOptionsType } from \"embla-carousel-react\";\nimport {\n  Backwards,\n  Forwards,\n  Close,\n  Fullscreen,\n} from \"@hitachivantara/uikit-react-icons\";\nimport { HvButton, HvContainer, HvStack, HvTypography } from \"@core/components\";\nimport { HvBaseProps } from \"@core/types\";\nimport { ExtractNames } from \"@core/utils\";\n\nimport { staticClasses, useClasses } from \"./Carousel.styles\";\n\nconst clamp = (num: number, max: number, min = 0) =>\n  Math.min(Math.max(num, min), max);\n\nexport { staticClasses as carouselClasses };\n\nexport type HvCarouselClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCarouselProps\n  extends HvBaseProps<HTMLDivElement, \"title\" | \"onChange\"> {\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvCarouselClasses;\n  /** Height of the Slider container. If `undefined`, images will keep a 16/9 aspect-ratio */\n  height?: CSSProperties[\"height\"];\n  /** Width of the thumbnail. Height will try to maintain a 16/9 aspect-ratio */\n  thumbnailWidth?: CSSProperties[\"width\"];\n  /** Title of the carousel */\n  title?: React.ReactNode;\n  /** Content slides to be displayed. @see `<HvCarouselSlide />` */\n  children?: React.ReactNode;\n  /** Custom content to render in the actions area */\n  actions?: React.ReactNode;\n  /** Whether Carousel is in \"xs mode\" - to use in embedded contexts */\n  xs?: boolean;\n  /** Whether to show dots instead of arrow pagination. Defaults to true under 5 elements */\n  showDots?: boolean;\n  /** Whether to show the counter on the top-right corner of the active slide */\n  showCounter?: boolean;\n  /** Whether to show the back/forwards buttons over the active slide */\n  showSlideControls?: boolean;\n  /** Whether to enable the fullscreen toggle button */\n  showFullscreen?: boolean;\n  /** Whether to hide the thumbnails. Hidden by default in \"xs\" mode */\n  hideThumbnails?: boolean;\n  /** Carousel configuration options. @see https://www.embla-carousel.com/api/options/ */\n  carouselOptions?: EmblaOptionsType;\n  /** */\n  renderThumbnail?: (index: number) => React.ReactNode;\n  /** The callback fired when the active slide changes. */\n  onChange?: (index: number) => void;\n}\n\n/**\n * A Carousel is commonly used to browse images, it can also be used to browse any kind of content like text, video, or charts.\n * It allows you to focus on a particular content while having a notion of how many you have to explore.\n */\nexport const HvCarousel = (props: HvCarouselProps) => {\n  const {\n    className,\n    classes: classesProp,\n    height: heightProp = \"auto\",\n    thumbnailWidth = 90,\n    title,\n    children,\n    actions,\n    xs,\n    showDots: showDotsProp,\n    showCounter: showCounterProp,\n    showSlideControls,\n    showFullscreen: showFullscreenProp,\n    hideThumbnails: hideThumbnailsProp,\n    carouselOptions,\n    renderThumbnail,\n    onChange,\n    ...others\n  } = props;\n  const { classes, cx } = useClasses(classesProp);\n  const thumbnailsRef = useRef<HTMLDivElement>(null);\n  const [isFullscreen, setIsFullscreen] = useState(false);\n\n  const [containerRef, controller] = useCarousel({\n    align: \"start\",\n    loop: true,\n    ...carouselOptions,\n  });\n\n  const [selectedIndex, setSelectedIndex] = useState(\n    carouselOptions?.startIndex ?? 0\n  );\n\n  const numSlides = Children.count(children);\n\n  const handlePrevious = useCallback(() => {\n    controller?.scrollPrev();\n  }, [controller]);\n\n  const handleNext = useCallback(() => {\n    controller?.scrollNext();\n  }, [controller]);\n\n  const handleScroll = (index: number) => {\n    controller?.scrollTo(index);\n  };\n\n  const handleSelect = useCallback(() => {\n    if (!controller) return;\n\n    const slideIndex = controller.selectedScrollSnap();\n    setSelectedIndex(slideIndex);\n\n    // scroll to thumbnail button\n    thumbnailsRef.current\n      ?.querySelectorAll(\"button\")\n      ?.[slideIndex]?.scrollIntoView({\n        behavior: \"smooth\",\n        block: \"nearest\",\n      });\n\n    onChange?.(slideIndex);\n  }, [controller, onChange]);\n\n  useEffect(() => {\n    if (!controller) return;\n\n    controller.on(\"select\", handleSelect);\n\n    return () => {\n      controller.off(\"select\", handleSelect);\n    };\n  }, [controller, handleSelect]);\n\n  useEffect(() => {\n    if (!controller) return;\n\n    controller.reInit();\n    setSelectedIndex((currentIndex) => clamp(currentIndex, numSlides, 0));\n  }, [numSlides, controller]);\n\n  const canPrev = controller?.canScrollPrev() ?? false;\n  const canNext = controller?.canScrollNext() ?? false;\n  const showTitle = !!title && (!xs || isFullscreen);\n  const showFullscreen = showFullscreenProp ?? xs;\n  const height = isFullscreen ? \"100%\" : heightProp ?? \"auto\";\n  const showCounter = xs;\n  const hideThumbnails = hideThumbnailsProp ?? (xs && !isFullscreen);\n  const showThumbnails = !hideThumbnails && !!renderThumbnail;\n  const showDots = showDotsProp ?? numSlides <= 5;\n\n  return (\n    <HvContainer\n      className={cx(classes.root, className, {\n        [classes.xs]: xs,\n        [classes.fullscreen]: isFullscreen,\n      })}\n      {...others}\n    >\n      {showTitle && (\n        <HvTypography variant=\"title2\" className={classes.title}>\n          {title}\n        </HvTypography>\n      )}\n      <div className={classes.actions}>\n        {showFullscreen && (\n          <HvButton\n            icon\n            variant=\"secondaryGhost\"\n            onClick={() => setIsFullscreen((curr) => !curr)}\n            className={classes.closeButton}\n          >\n            {isFullscreen ? (\n              <Close aria-label=\"Close\" />\n            ) : (\n              <Fullscreen aria-label=\"Fullscreen\" />\n            )}\n          </HvButton>\n        )}\n        {actions}\n      </div>\n\n      <div className={classes.mainContainer}>\n        <div className={classes.controls}>\n          {showDots ? (\n            <div className={classes.dots}>\n              {Array.from(Array(numSlides)).map((el, index) => (\n                <span\n                  key={`circle-${index}`}\n                  className={cx(classes.dot, {\n                    [classes.dotSelected]: index === selectedIndex,\n                  })}\n                />\n              ))}\n            </div>\n          ) : (\n            <>\n              <HvButton\n                icon\n                disabled={!canPrev}\n                variant=\"secondaryGhost\"\n                aria-label=\"Backwards\"\n                onClick={handlePrevious}\n              >\n                <Backwards iconSize=\"XS\" />\n              </HvButton>\n              <div className={classes.pageCounter}>\n                {`${selectedIndex + 1} / ${numSlides}`}\n              </div>\n              <HvButton\n                icon\n                disabled={!canNext}\n                variant=\"secondaryGhost\"\n                aria-label=\"Forwards\"\n                onClick={handleNext}\n              >\n                <Forwards iconSize=\"XS\" />\n              </HvButton>\n            </>\n          )}\n        </div>\n\n        <div\n          className={cx(classes.main, {\n            [classes.mainXs]: xs,\n            [classes.mainFullscreen]: isFullscreen,\n          })}\n        >\n          {showCounter && (\n            <div className={classes.counterContainer}>\n              <span className={classes.counter}>\n                {`${selectedIndex + 1}/${numSlides}`}\n              </span>\n            </div>\n          )}\n\n          {showSlideControls && (\n            <div className={classes.slideControls}>\n              <HvButton\n                icon\n                disabled={!canPrev}\n                variant=\"secondary\"\n                aria-label=\"Backwards\"\n                onClick={handlePrevious}\n              >\n                <Backwards iconSize=\"XS\" />\n              </HvButton>\n              <HvButton\n                icon\n                disabled={!canNext}\n                variant=\"secondary\"\n                aria-label=\"Forwards\"\n                onClick={handleNext}\n              >\n                <Forwards iconSize=\"XS\" />\n              </HvButton>\n            </div>\n          )}\n\n          <div\n            ref={containerRef}\n            style={{ height }}\n            className={classes.slidesViewport}\n          >\n            <div className={classes.slidesContainer}>{children}</div>\n          </div>\n        </div>\n      </div>\n\n      {showThumbnails && (\n        <div ref={thumbnailsRef} className={classes.panel}>\n          <HvStack direction=\"row\" spacing=\"xs\">\n            {Array.from(Array(numSlides)).map((doc, i) => (\n              <HvButton\n                icon\n                variant=\"secondaryGhost\"\n                key={`button-${i}`}\n                style={{ width: thumbnailWidth }}\n                className={cx(classes.thumbnail, {\n                  [classes.thumbnailSelected]: i === selectedIndex,\n                })}\n                onClick={() => handleScroll(i)}\n              >\n                {renderThumbnail(i)}\n              </HvButton>\n            ))}\n          </HvStack>\n        </div>\n      )}\n    </HvContainer>\n  );\n};\n"],"names":["clamp","num","max","min","Math","HvCarousel","props","className","classes","classesProp","height","heightProp","thumbnailWidth","title","children","actions","xs","showDots","showDotsProp","showCounter","showCounterProp","showSlideControls","showFullscreen","showFullscreenProp","hideThumbnails","hideThumbnailsProp","carouselOptions","renderThumbnail","onChange","others","cx","useClasses","thumbnailsRef","useRef","isFullscreen","setIsFullscreen","useState","containerRef","controller","useCarousel","align","loop","selectedIndex","setSelectedIndex","startIndex","numSlides","Children","count","handlePrevious","useCallback","scrollPrev","handleNext","scrollNext","handleScroll","index","scrollTo","handleSelect","slideIndex","selectedScrollSnap","current","querySelectorAll","scrollIntoView","behavior","block","useEffect","on","off","reInit","currentIndex","canPrev","canScrollPrev","canNext","canScrollNext","showTitle","showThumbnails","HvContainer","root","fullscreen","_jsx","HvTypography","variant","_jsxs","HvButton","icon","onClick","curr","closeButton","Close","Fullscreen","mainContainer","controls","dots","Array","from","map","el","dot","dotSelected","_Fragment","disabled","Backwards","iconSize","pageCounter","Forwards","main","mainXs","mainFullscreen","counterContainer","counter","slideControls","ref","style","slidesViewport","slidesContainer","panel","HvStack","direction","spacing","doc","i","width","thumbnail","thumbnailSelected"],"mappings":"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"}

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

@@ -39,10 +39,10 @@ const Fields = ({
   const [internalRed, setInternalRed] = React.useState(rgb == null ? void 0 : rgb.r);
   const [internalGreen, setInternalGreen] = React.useState(rgb == null ? void 0 : rgb.g);
   const [internalBlue, setInternalBlue] = React.useState(rgb == null ? void 0 : rgb.b);
-  const hexInputRef = React.useRef();
-  const redInputRef = React.useRef();
-  const greenInputRef = React.useRef();
-  const blueInputRef = React.useRef();
+  const hexInputRef = React.useRef(null);
+  const redInputRef = React.useRef(null);
+  const greenInputRef = React.useRef(null);
+  const blueInputRef = React.useRef(null);
   React.useEffect(() => {
     if (document.activeElement !== hexInputRef.current) {
       setInternalHex(hex);
@@ -96,7 +96,7 @@ const Fields = ({
   return /* @__PURE__ */ jsxRuntime.jsxs("div", {
     className: cx(className, classes.fields),
     children: [/* @__PURE__ */ jsxRuntime.jsx(Input.HvInput, {
-      inputRef: hexInputRef,
+      ref: hexInputRef,
       className: classes.double,
       label: "HEX",
       value: internalHex == null ? void 0 : internalHex.replace("#", ""),
@@ -104,7 +104,7 @@ const Fields = ({
       onBlur: () => setInternalHex(hex),
       disableClear: true
     }), /* @__PURE__ */ jsxRuntime.jsx(Input.HvInput, {
-      inputRef: redInputRef,
+      ref: redInputRef,
       className: classes.single,
       label: "R",
       value: `${internalRed}`,
@@ -112,7 +112,7 @@ const Fields = ({
       onBlur: () => setInternalRed(rgb == null ? void 0 : rgb.r),
       disableClear: true
     }), /* @__PURE__ */ jsxRuntime.jsx(Input.HvInput, {
-      inputRef: greenInputRef,
+      ref: greenInputRef,
       className: classes.single,
       label: "G",
       value: `${internalGreen}`,
@@ -120,7 +120,7 @@ const Fields = ({
       onBlur: () => setInternalGreen(rgb == null ? void 0 : rgb.g),
       disableClear: true
     }), /* @__PURE__ */ jsxRuntime.jsx(Input.HvInput, {
-      inputRef: blueInputRef,
+      ref: blueInputRef,
       className: classes.single,
       label: "B",
       value: `${internalBlue}`,

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

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

@@ -25,10 +25,10 @@ const Picker = ({
   } = Picker_styles.useClasses(classesProp);
   const SaturationPointer = React.useCallback(() => /* @__PURE__ */ jsxRuntime.jsx("div", {
     className: classes == null ? void 0 : classes.saturationPointer
-  }), []);
+  }), [classes == null ? void 0 : classes.saturationPointer]);
   const HueSlider = React.useCallback(() => /* @__PURE__ */ jsxRuntime.jsx("div", {
     className: classes == null ? void 0 : classes.hueSlider
-  }), []);
+  }), [classes == null ? void 0 : classes.hueSlider]);
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [title && /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, {
       className: classes.title,

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 { 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 { ExtractNames } from \"@core/utils\";\nimport { staticClasses, useClasses } from \"./Picker.styles\";\nimport { Fields } from \"../Fields\";\n\nexport { staticClasses as colorPickerPickerClasses };\n\nexport type HvColorPickerPickerClasses = ExtractNames<typeof useClasses>;\n\nexport const Picker = ({\n  onChange,\n  rgb,\n  hsl,\n  hsv,\n  hex,\n  title,\n  classes: classesProp,\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  const { classes } = useClasses(classesProp);\n\n  const SaturationPointer = useCallback(\n    () => <div className={classes?.saturationPointer} />,\n    []\n  );\n\n  const HueSlider = useCallback(\n    () => <div className={classes?.hueSlider} />,\n    []\n  );\n\n  return (\n    <>\n      {title && (\n        <HvTypography className={classes.title} variant=\"caption1\">\n          {title}\n        </HvTypography>\n      )}\n      <div className={classes.pickers}>\n        <div className={classes.saturation}>\n          <Saturation\n            hsl={hsl}\n            hsv={hsv}\n            onChange={onChange}\n            pointer={SaturationPointer}\n          />\n        </div>\n        <div className={classes.hue}>\n          <Hue\n            direction={activeTheme?.colorPicker.hueDirection}\n            hsl={hsl}\n            onChange={onChange}\n            pointer={HueSlider}\n          />\n        </div>\n      </div>\n      <Fields\n        className={classes.fields}\n        rgb={rgb}\n        hex={hex}\n        onChange={onChange}\n      />\n    </>\n  );\n};\n\nexport default CustomPicker(Picker);\n"],"names":["Picker","onChange","rgb","hsl","hsv","hex","title","classes","classesProp","activeTheme","useTheme","useClasses","SaturationPointer","useCallback","_jsx","className","saturationPointer","HueSlider","hueSlider","_Fragment","children","HvTypography","variant","_jsxs","pickers","saturation","Saturation","pointer","hue","Hue","direction","colorPicker","hueDirection","Fields","fields","CustomPicker"],"mappings":";;;;;;;;;;AAmBO,MAAMA,SAASA,CAAC;AAAA,EACrBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,SAASC;AAYX,MAAM;AACE,QAAA;AAAA,IAAEC;AAAAA,MAAgBC,SAAS,SAAA;AAC3B,QAAA;AAAA,IAAEH;AAAAA,EAAAA,IAAYI,cAAAA,WAAWH,WAAW;AAE1C,QAAMI,oBAAoBC,MAAAA,YACxB,MAAMC,2BAAAA,IAAA,OAAA;AAAA,IAAKC,WAAWR,mCAASS;AAAAA,EAAAA,CAAoB,GACnD,CACF,CAAA;AAEA,QAAMC,YAAYJ,MAAAA,YAChB,MAAMC,2BAAAA,IAAA,OAAA;AAAA,IAAKC,WAAWR,mCAASW;AAAAA,EAAAA,CAAY,GAC3C,CACF,CAAA;AAEA,yCACEC,WAAAA,UAAA;AAAA,IAAAC,UACGd,CAAAA,SACCQ,2BAAAA,IAACO,yBAAY;AAAA,MAACN,WAAWR,QAAQD;AAAAA,MAAOgB,SAAQ;AAAA,MAAUF,UACvDd;AAAAA,IAAAA,CACW,GAEhBiB,2BAAAA,KAAA,OAAA;AAAA,MAAKR,WAAWR,QAAQiB;AAAAA,MAAQJ,WAC9BN,2BAAAA,IAAA,OAAA;AAAA,QAAKC,WAAWR,QAAQkB;AAAAA,QAAWL,yCAChCM,mBAAU;AAAA,UACTvB;AAAAA,UACAC;AAAAA,UACAH;AAAAA,UACA0B,SAASf;AAAAA,QAAAA,CACV;AAAA,MAAA,CACE,GACLE,2BAAAA,IAAA,OAAA;AAAA,QAAKC,WAAWR,QAAQqB;AAAAA,QAAIR,yCACzBS,YAAG;AAAA,UACFC,WAAWrB,2CAAasB,YAAYC;AAAAA,UACpC7B;AAAAA,UACAF;AAAAA,UACA0B,SAASV;AAAAA,QAAAA,CACV;AAAA,MAAA,CACE,CAAC;AAAA,IAAA,CACH,GACLH,2BAAAA,IAACmB,eAAM;AAAA,MACLlB,WAAWR,QAAQ2B;AAAAA,MACnBhC;AAAAA,MACAG;AAAAA,MACAJ;AAAAA,IAAAA,CACD,CAAC;AAAA,EAAA,CACF;AAEN;AAEA,MAAekC,WAAAA,WAAAA,aAAanC,MAAM;;;;"}
+{"version":3,"file":"Picker.cjs","sources":["../../../../../src/components/ColorPicker/Picker/Picker.tsx"],"sourcesContent":["import { 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 { ExtractNames } from \"@core/utils\";\nimport { staticClasses, useClasses } from \"./Picker.styles\";\nimport { Fields } from \"../Fields\";\n\nexport { staticClasses as colorPickerPickerClasses };\n\nexport type HvColorPickerPickerClasses = ExtractNames<typeof useClasses>;\n\nexport const Picker = ({\n  onChange,\n  rgb,\n  hsl,\n  hsv,\n  hex,\n  title,\n  classes: classesProp,\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  const { classes } = useClasses(classesProp);\n\n  const SaturationPointer = useCallback(\n    () => <div className={classes?.saturationPointer} />,\n    [classes?.saturationPointer]\n  );\n\n  const HueSlider = useCallback(\n    () => <div className={classes?.hueSlider} />,\n    [classes?.hueSlider]\n  );\n\n  return (\n    <>\n      {title && (\n        <HvTypography className={classes.title} variant=\"caption1\">\n          {title}\n        </HvTypography>\n      )}\n      <div className={classes.pickers}>\n        <div className={classes.saturation}>\n          <Saturation\n            hsl={hsl}\n            hsv={hsv}\n            onChange={onChange}\n            pointer={SaturationPointer}\n          />\n        </div>\n        <div className={classes.hue}>\n          <Hue\n            direction={activeTheme?.colorPicker.hueDirection}\n            hsl={hsl}\n            onChange={onChange}\n            pointer={HueSlider}\n          />\n        </div>\n      </div>\n      <Fields\n        className={classes.fields}\n        rgb={rgb}\n        hex={hex}\n        onChange={onChange}\n      />\n    </>\n  );\n};\n\nexport default CustomPicker(Picker);\n"],"names":["Picker","onChange","rgb","hsl","hsv","hex","title","classes","classesProp","activeTheme","useTheme","useClasses","SaturationPointer","useCallback","_jsx","className","saturationPointer","HueSlider","hueSlider","_Fragment","children","HvTypography","variant","_jsxs","pickers","saturation","Saturation","pointer","hue","Hue","direction","colorPicker","hueDirection","Fields","fields","CustomPicker"],"mappings":";;;;;;;;;;AAmBO,MAAMA,SAASA,CAAC;AAAA,EACrBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,SAASC;AAYX,MAAM;AACE,QAAA;AAAA,IAAEC;AAAAA,MAAgBC,SAAS,SAAA;AAC3B,QAAA;AAAA,IAAEH;AAAAA,EAAAA,IAAYI,cAAAA,WAAWH,WAAW;AAE1C,QAAMI,oBAAoBC,MAAAA,YACxB,MAAMC,2BAAAA,IAAA,OAAA;AAAA,IAAKC,WAAWR,mCAASS;AAAAA,EAAoB,CAAA,GACnD,CAACT,mCAASS,iBAAiB,CAC7B;AAEA,QAAMC,YAAYJ,MAAAA,YAChB,MAAMC,2BAAAA,IAAA,OAAA;AAAA,IAAKC,WAAWR,mCAASW;AAAAA,EAAY,CAAA,GAC3C,CAACX,mCAASW,SAAS,CACrB;AAEA,yCACEC,WAAAA,UAAA;AAAA,IAAAC,UACGd,CAAAA,SACCQ,2BAAAA,IAACO,yBAAY;AAAA,MAACN,WAAWR,QAAQD;AAAAA,MAAOgB,SAAQ;AAAA,MAAUF,UACvDd;AAAAA,IAAAA,CACW,GAEhBiB,2BAAAA,KAAA,OAAA;AAAA,MAAKR,WAAWR,QAAQiB;AAAAA,MAAQJ,WAC9BN,2BAAAA,IAAA,OAAA;AAAA,QAAKC,WAAWR,QAAQkB;AAAAA,QAAWL,yCAChCM,mBAAU;AAAA,UACTvB;AAAAA,UACAC;AAAAA,UACAH;AAAAA,UACA0B,SAASf;AAAAA,QAAAA,CACV;AAAA,MAAA,CACE,GACLE,2BAAAA,IAAA,OAAA;AAAA,QAAKC,WAAWR,QAAQqB;AAAAA,QAAIR,yCACzBS,YAAG;AAAA,UACFC,WAAWrB,2CAAasB,YAAYC;AAAAA,UACpC7B;AAAAA,UACAF;AAAAA,UACA0B,SAASV;AAAAA,QAAAA,CACV;AAAA,MAAA,CACE,CAAC;AAAA,IAAA,CACH,GACLH,2BAAAA,IAACmB,eAAM;AAAA,MACLlB,WAAWR,QAAQ2B;AAAAA,MACnBhC;AAAAA,MACAG;AAAAA,MACAJ;AAAAA,IAAAA,CACD,CAAC;AAAA,EAAA,CACF;AAEN;AAEA,MAAekC,WAAAA,WAAAA,aAAanC,MAAM;;;;"}