@hitachivantara/uikit-react-core 5.24.2 → 5.24.4

package/dist/cjs/components/Header/Navigation/MenuItem/MenuItem.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"MenuItem.cjs","sources":["../../../../../../src/components/Header/Navigation/MenuItem/MenuItem.tsx"],"sourcesContent":["import React, { MouseEvent, useContext } from \"react\";\n\nimport { HvTypography } from \"@core/components/Typography\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { isKey } from \"@core/utils/keyboardUtils\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { FocusContext } from \"../utils/FocusContext\";\nimport { SelectionContext } from \"../utils/SelectionContext\";\nimport { useClasses, staticClasses } from \"./MenuItem.styles\";\nimport { HvHeaderNavigationItemProp } from \"../useSelectionPath\";\nimport { Bar } from \"../MenuBar/Bar\";\n\nexport { staticClasses as headerMenuItemClasses };\n\nexport type HvHeaderMenuItemClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvHeaderMenuItemProps\n  extends HvBaseProps<HTMLDivElement, \"onClick\"> {\n  item: HvHeaderNavigationItemProp;\n  type?: string;\n  onClick?: (event: MouseEvent, selection: HvHeaderNavigationItemProp) => void;\n  levels: number;\n  currentLevel: number;\n  classes?: HvHeaderMenuItemClasses;\n}\n\n// Traverse the tree of items and return the first href it finds\nconst traverseItem = (node: HvHeaderNavigationItemProp) => {\n  let href;\n  let target;\n\n  if (node?.href) {\n    href = node?.href;\n    target = node?.target;\n  } else if (node?.data != null && node?.data?.length > 0) {\n    let i = 0;\n    while (href == null && i < node.data.length) {\n      const childNavItem = traverseItem(node?.data[i]);\n      if (childNavItem?.href != null) {\n        href = childNavItem?.href;\n        target = childNavItem?.target;\n        break;\n      }\n\n      i += 1;\n    }\n  }\n\n  return { href, target };\n};\n\nexport const HvHeaderMenuItem = ({\n  id,\n  item,\n  type,\n  onClick,\n  levels,\n  currentLevel,\n  classes: classesProp,\n  className,\n}: HvHeaderMenuItemProps) => {\n  const { classes, cx } = useClasses(classesProp);\n\n  const selectionPath = useContext(SelectionContext);\n  const { dispatch } = useContext(FocusContext);\n\n  const { data } = item;\n  const hasSubLevel = data && data.length;\n  const isMenu = type === \"menu\";\n  const isSelected = selectionPath?.[isMenu ? 1 : 0] === item.id;\n  const isCurrent = isSelected\n    ? selectionPath?.length > (isMenu ? 2 : 1)\n      ? true\n      : \"page\"\n    : undefined;\n\n  const actionHandler = (event: any) => {\n    if (\n      event.type === \"click\" ||\n      isKey(event, \"Enter\") ||\n      isKey(event, \"Space\")\n    ) {\n      if (event.type === \"click\") {\n        event.currentTarget.blur();\n      }\n      onClick?.(event, item);\n    }\n  };\n\n  const handleFocus = (event: React.FocusEvent) => {\n    dispatch?.({ type: \"setItemFocused\", itemFocused: event.currentTarget });\n  };\n\n  const itemProps = {\n    onClick: actionHandler,\n    onKeyDown: actionHandler,\n    onFocus: handleFocus,\n  };\n\n  const label = (\n    <HvTypography\n      component=\"span\"\n      variant={isSelected ? \"label\" : \"body\"}\n      data-text={item.label}\n    >\n      {item.label}\n    </HvTypography>\n  );\n\n  let itemHref = item?.href;\n  let itemTarget = item?.target;\n\n  // apps should configure the href even on parent items without content\n  // so the fallback logic is theirs, but if not we'll do our best to find a link\n  if (item?.href == null) {\n    const { href, target } = traverseItem(item);\n    itemHref = href;\n    itemTarget = target;\n  }\n\n  return (\n    <li\n      id={id}\n      key={item.label}\n      className={cx(\n        classes.root,\n        {\n          [classes.menu]: isMenu,\n          [classes.menubar]: !isMenu,\n          [classes.selected]: !!isSelected,\n        },\n        className\n      )}\n    >\n      {itemHref ? (\n        <a\n          className={classes.link}\n          href={itemHref}\n          target={itemTarget}\n          {...itemProps}\n          aria-current={isCurrent}\n        >\n          {label}\n        </a>\n      ) : (\n        // keeping this code path for backwards compatibility, but\n        // shouldn't really be used as it's not accessible\n        <div\n          className={classes.button}\n          role=\"button\"\n          {...itemProps}\n          tabIndex={0}\n          aria-current={isCurrent}\n        >\n          {label}\n        </div>\n      )}\n      {hasSubLevel && currentLevel < levels && (\n        <Bar data={data} type=\"menu\">\n          {data.map((itm: HvHeaderNavigationItemProp) => (\n            <HvHeaderMenuItem\n              key={itm.id}\n              item={itm}\n              type=\"menu\"\n              onClick={onClick}\n              levels={levels}\n              currentLevel={currentLevel + 1}\n            />\n          ))}\n        </Bar>\n      )}\n    </li>\n  );\n};\n"],"names":["traverseItem","node","href","target","data","length","i","childNavItem","HvHeaderMenuItem","id","item","type","onClick","levels","currentLevel","classes","classesProp","className","cx","useClasses","selectionPath","useContext","SelectionContext","dispatch","FocusContext","hasSubLevel","isMenu","isSelected","isCurrent","undefined","actionHandler","event","isKey","currentTarget","blur","handleFocus","itemFocused","itemProps","onKeyDown","onFocus","label","HvTypography","component","variant","children","itemHref","itemTarget","root","menu","menubar","selected","_jsx","link","button","role","tabIndex","Bar","map","itm"],"mappings":"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"}
+{"version":3,"file":"MenuItem.cjs","sources":["../../../../../../src/components/Header/Navigation/MenuItem/MenuItem.tsx"],"sourcesContent":["import React, { MouseEvent, useContext } from \"react\";\n\nimport { HvTypography } from \"@core/components/Typography\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { isKey } from \"@core/utils/keyboardUtils\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { FocusContext } from \"../utils/FocusContext\";\nimport { SelectionContext } from \"../utils/SelectionContext\";\nimport { useClasses, staticClasses } from \"./MenuItem.styles\";\nimport { HvHeaderNavigationItemProp } from \"../useSelectionPath\";\nimport { Bar } from \"../MenuBar/Bar\";\n\nexport { staticClasses as headerMenuItemClasses };\n\nexport type HvHeaderMenuItemClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvHeaderMenuItemProps\n  extends HvBaseProps<HTMLDivElement, \"onClick\"> {\n  item: HvHeaderNavigationItemProp;\n  type?: string;\n  onClick?: (event: MouseEvent, selection: HvHeaderNavigationItemProp) => void;\n  levels: number;\n  currentLevel: number;\n  classes?: HvHeaderMenuItemClasses;\n}\n\n// Traverse the tree of items and return the first href it finds\nconst traverseItem = (node: HvHeaderNavigationItemProp) => {\n  let href;\n  let target;\n\n  if (node?.href) {\n    href = node?.href;\n    target = node?.target;\n  } else if (node?.data != null && node?.data?.length > 0) {\n    let i = 0;\n    while (href == null && i < node.data.length) {\n      const childNavItem = traverseItem(node?.data[i]);\n      if (childNavItem?.href != null) {\n        href = childNavItem?.href;\n        target = childNavItem?.target;\n        break;\n      }\n\n      i += 1;\n    }\n  }\n\n  return { href, target };\n};\n\nexport const HvHeaderMenuItem = ({\n  id,\n  item,\n  type,\n  onClick,\n  levels,\n  currentLevel,\n  classes: classesProp,\n  className,\n}: HvHeaderMenuItemProps) => {\n  const { classes, cx } = useClasses(classesProp);\n\n  const selectionPath = useContext(SelectionContext);\n\n  const { dispatch } = useContext(FocusContext);\n\n  const { data } = item;\n\n  const hasSubLevel = data && data.length;\n\n  const isMenu = type === \"menu\";\n\n  const isSelected = selectionPath?.[isMenu ? 1 : 0] === item.id;\n\n  // true: if the item is part of the selection path but is not the current page the user is seeing, i.e has more sub levels\n  // page: used when the selected item is actually the current page the user is seeing\n  const isCurrent = isSelected ? (hasSubLevel ? true : \"page\") : undefined;\n\n  const actionHandler = (event: any) => {\n    if (\n      event.type === \"click\" ||\n      isKey(event, \"Enter\") ||\n      isKey(event, \"Space\")\n    ) {\n      if (event.type === \"click\") {\n        event.currentTarget.blur();\n      }\n\n      onClick?.(event, item);\n    }\n  };\n\n  const handleFocus = (event: React.FocusEvent) => {\n    dispatch?.({ type: \"setItemFocused\", itemFocused: event.currentTarget });\n  };\n\n  const itemProps = {\n    onClick: actionHandler,\n    onKeyDown: actionHandler,\n    onFocus: handleFocus,\n  };\n\n  const label = (\n    <HvTypography\n      component=\"span\"\n      variant={isSelected ? \"label\" : \"body\"}\n      data-text={item.label}\n    >\n      {item.label}\n    </HvTypography>\n  );\n\n  let itemHref = item?.href;\n  let itemTarget = item?.target;\n\n  // apps should configure the href even on parent items without content\n  // so the fallback logic is theirs, but if not we'll do our best to find a link\n  if (item?.href == null) {\n    const { href, target } = traverseItem(item);\n    itemHref = href;\n    itemTarget = target;\n  }\n\n  return (\n    <li\n      id={id}\n      key={item.label}\n      className={cx(\n        classes.root,\n        {\n          [classes.menu]: isMenu,\n          [classes.menubar]: !isMenu,\n          [classes.selected]: !!isSelected,\n        },\n        className\n      )}\n    >\n      {itemHref ? (\n        <a\n          className={classes.link}\n          href={itemHref}\n          target={itemTarget}\n          {...itemProps}\n          aria-current={isCurrent}\n        >\n          {label}\n        </a>\n      ) : (\n        // keeping this code path for backwards compatibility, but\n        // shouldn't really be used as it's not accessible\n        <div\n          className={classes.button}\n          role=\"button\"\n          {...itemProps}\n          tabIndex={0}\n          aria-current={isCurrent}\n        >\n          {label}\n        </div>\n      )}\n      {/* Limits levels to no more than 2. More than that is not expected and not in DS. */}\n      {hasSubLevel && currentLevel < levels && currentLevel < 2 && (\n        <Bar data={data} type=\"menu\">\n          {data.map((itm: HvHeaderNavigationItemProp) => (\n            <HvHeaderMenuItem\n              key={itm.id}\n              item={itm}\n              type=\"menu\"\n              onClick={onClick}\n              levels={levels}\n              currentLevel={currentLevel + 1}\n            />\n          ))}\n        </Bar>\n      )}\n    </li>\n  );\n};\n"],"names":["traverseItem","node","href","target","data","length","i","childNavItem","HvHeaderMenuItem","id","item","type","onClick","levels","currentLevel","classes","classesProp","className","cx","useClasses","selectionPath","useContext","SelectionContext","dispatch","FocusContext","hasSubLevel","isMenu","isSelected","isCurrent","undefined","actionHandler","event","isKey","currentTarget","blur","handleFocus","itemFocused","itemProps","onKeyDown","onFocus","label","HvTypography","component","variant","children","itemHref","itemTarget","root","menu","menubar","selected","_jsx","link","button","role","tabIndex","Bar","map","itm"],"mappings":";;;;;;;;;;AA4BA,MAAMA,eAAeA,CAACC,SAAqC;;AACrDC,MAAAA;AACAC,MAAAA;AAEJ,MAAIF,6BAAMC,MAAM;AACdA,WAAOD,6BAAMC;AACbC,aAASF,6BAAME;AAAAA,EAAAA,YACNF,6BAAMG,SAAQ,UAAQH,kCAAMG,SAANH,mBAAYI,UAAS,GAAG;AACvD,QAAIC,IAAI;AACR,WAAOJ,QAAQ,QAAQI,IAAIL,KAAKG,KAAKC,QAAQ;AAC3C,YAAME,eAAeP,aAAaC,6BAAMG,KAAKE,EAAE;AAC3CC,WAAAA,6CAAcL,SAAQ,MAAM;AAC9BA,eAAOK,6CAAcL;AACrBC,iBAASI,6CAAcJ;AACvB;AAAA,MACF;AAEK,WAAA;AAAA,IACP;AAAA,EACF;AAEO,SAAA;AAAA,IAAED;AAAAA,IAAMC;AAAAA,EAAAA;AACjB;AAEO,MAAMK,mBAAmBA,CAAC;AAAA,EAC/BC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,SAASC;AAAAA,EACTC;AACqB,MAAM;AACrB,QAAA;AAAA,IAAEF;AAAAA,IAASG;AAAAA,EAAAA,IAAOC,gBAAAA,WAAWH,WAAW;AAExCI,QAAAA,gBAAgBC,iBAAWC,iBAAAA,gBAAgB;AAE3C,QAAA;AAAA,IAAEC;AAAAA,EAAAA,IAAaF,MAAAA,WAAWG,aAAAA,YAAY;AAEtC,QAAA;AAAA,IAAEpB;AAAAA,EAASM,IAAAA;AAEXe,QAAAA,cAAcrB,QAAQA,KAAKC;AAEjC,QAAMqB,SAASf,SAAS;AAExB,QAAMgB,cAAaP,+CAAgBM,SAAS,IAAI,QAAOhB,KAAKD;AAI5D,QAAMmB,YAAYD,aAAcF,cAAc,OAAO,SAAUI;AAEzDC,QAAAA,gBAAgBA,CAACC,UAAe;AAElCA,QAAAA,MAAMpB,SAAS,WACfqB,oBAAMD,OAAO,OAAO,KACpBC,cAAAA,MAAMD,OAAO,OAAO,GACpB;AACIA,UAAAA,MAAMpB,SAAS,SAAS;AAC1BoB,cAAME,cAAcC;MACtB;AAEAtB,yCAAUmB,OAAOrB;AAAAA,IACnB;AAAA,EAAA;AAGIyB,QAAAA,cAAcA,CAACJ,UAA4B;AACpC,yCAAA;AAAA,MAAEpB,MAAM;AAAA,MAAkByB,aAAaL,MAAME;AAAAA,IAAAA;AAAAA,EAAe;AAGzE,QAAMI,YAAY;AAAA,IAChBzB,SAASkB;AAAAA,IACTQ,WAAWR;AAAAA,IACXS,SAASJ;AAAAA,EAAAA;AAGLK,QAAAA,uCACHC,yBAAY;AAAA,IACXC,WAAU;AAAA,IACVC,SAAShB,aAAa,UAAU;AAAA,IAChC,aAAWjB,KAAK8B;AAAAA,IAAMI,UAErBlC,KAAK8B;AAAAA,EAAAA,CACM;AAGhB,MAAIK,WAAWnC,6BAAMR;AACrB,MAAI4C,aAAapC,6BAAMP;AAInBO,OAAAA,6BAAMR,SAAQ,MAAM;AAChB,UAAA;AAAA,MAAEA;AAAAA,MAAMC;AAAAA,IAAAA,IAAWH,aAAaU,IAAI;AAC/BR,eAAAA;AACEC,iBAAAA;AAAAA,EACf;AAEA,yCACE,MAAA;AAAA,IACEM;AAAAA,IAEAQ,WAAWC,GACTH,QAAQgC,MACR;AAAA,MACE,CAAChC,QAAQiC,IAAI,GAAGtB;AAAAA,MAChB,CAACX,QAAQkC,OAAO,GAAG,CAACvB;AAAAA,MACpB,CAACX,QAAQmC,QAAQ,GAAG,CAAC,CAACvB;AAAAA,OAExBV,SACF;AAAA,IAAE2B,UAAA,CAEDC,WACCM,2BAAAA,IAAA,KAAA;AAAA,MACElC,WAAWF,QAAQqC;AAAAA,MACnBlD,MAAM2C;AAAAA,MACN1C,QAAQ2C;AAAAA,MAAW,GACfT;AAAAA,MACJ,gBAAcT;AAAAA,MAAUgB,UAEvBJ;AAAAA,IAAAA,CACA;AAAA;AAAA;AAAA,qCAIH,OAAA;AAAA,QACEvB,WAAWF,QAAQsC;AAAAA,QACnBC,MAAK;AAAA,QAAQ,GACTjB;AAAAA,QACJkB,UAAU;AAAA,QACV,gBAAc3B;AAAAA,QAAUgB,UAEvBJ;AAAAA,MAAAA,CACE;AAAA,OAGNf,eAAeX,eAAeD,UAAUC,eAAe,oCACrD0C,SAAG;AAAA,MAACpD;AAAAA,MAAYO,MAAK;AAAA,MAAMiC,UACzBxC,KAAKqD,IAAI,CAACC,uCACRlD,kBAAgB;AAAA,QAEfE,MAAMgD;AAAAA,QACN/C,MAAK;AAAA,QACLC;AAAAA,QACAC;AAAAA,QACAC,cAAcA,eAAe;AAAA,MAAA,GALxB4C,IAAIjD,EAMV,CACF;AAAA,IAAA,CACE,CACN;AAAA,EAAA,GAhDIC,KAAK8B,KAiDR;AAER;;;"}

package/dist/cjs/components/Header/Navigation/Navigation.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Navigation.cjs","sources":["../../../../../src/components/Header/Navigation/Navigation.tsx"],"sourcesContent":["import { MouseEvent } from \"react\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { HvHeaderMenuBar, HvHeaderMenuBarProps } from \"./MenuBar\";\nimport { staticClasses, useClasses } from \"./Navigation.styles\";\nimport { FocusProvider } from \"./utils/FocusContext\";\nimport { SelectionContext } from \"./utils/SelectionContext\";\nimport {\n  HvHeaderNavigationItemProp,\n  useSelectionPath,\n} from \"./useSelectionPath\";\n\nexport { staticClasses as headerNavigationClasses };\n\nexport type HvHeaderNavigationClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvHeaderNavigationProps\n  extends HvBaseProps<HTMLDivElement, \"onClick\"> {\n  data: HvHeaderNavigationItemProp[];\n  selected?: string;\n  onClick?: (event: MouseEvent, selection: HvHeaderNavigationItemProp) => void;\n  classes?: HvHeaderNavigationClasses;\n  levels?: 1 | 2;\n}\n\nexport const HvHeaderNavigation = (props: HvHeaderNavigationProps) => {\n  const {\n    data,\n    selected,\n    onClick,\n    className,\n    classes: classesProp,\n    levels = 2,\n    ...others\n  } = useDefaultProps(\"HvHeaderNavigation\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const selectionPath = useSelectionPath(data, selected);\n\n  const handleClick: HvHeaderMenuBarProps[\"onClick\"] = (event, selection) => {\n    event.preventDefault();\n\n    onClick?.(event, selection);\n  };\n\n  return (\n    <SelectionContext.Provider value={selectionPath}>\n      <FocusProvider>\n        <nav className={cx(classes.root, className)} {...others}>\n          <HvHeaderMenuBar\n            data={data}\n            type=\"menubar\"\n            onClick={handleClick}\n            levels={levels}\n            currentLevel={1}\n          />\n        </nav>\n      </FocusProvider>\n    </SelectionContext.Provider>\n  );\n};\n"],"names":["HvHeaderNavigation","props","data","selected","onClick","className","classes","classesProp","levels","others","useDefaultProps","cx","useClasses","selectionPath","useSelectionPath","handleClick","event","selection","preventDefault","_jsx","SelectionContext","Provider","value","children","FocusProvider","root","HvHeaderMenuBar","type","currentLevel"],"mappings":";;;;;;;;;AA4BaA,MAAAA,qBAAqBA,CAACC,UAAmC;AAC9D,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,IACTC,SAAS;AAAA,IACT,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,sBAAsBT,KAAK;AAEzC,QAAA;AAAA,IAAEK;AAAAA,IAASK;AAAAA,EAAAA,IAAOC,kBAAAA,WAAWL,WAAW;AAExCM,QAAAA,gBAAgBC,iBAAAA,iBAAiBZ,MAAMC,QAAQ;AAE/CY,QAAAA,cAA+CA,CAACC,OAAOC,cAAc;AACzED,UAAME,eAAe;AAErBd,uCAAUY,OAAOC;AAAAA,EAAS;AAI1BE,SAAAA,2BAAAA,IAACC,kCAAiBC,UAAQ;AAAA,IAACC,OAAOT;AAAAA,IAAcU,yCAC7CC,4BAAa;AAAA,MAAAD,yCACZ,OAAA;AAAA,QAAKlB,WAAWM,GAAGL,QAAQmB,MAAMpB,SAAS;AAAA,QAAE,GAAKI;AAAAA,QAAMc,yCACpDG,yBAAe;AAAA,UACdxB;AAAAA,UACAyB,MAAK;AAAA,UACLvB,SAASW;AAAAA,UACTP;AAAAA,UACAoB,cAAc;AAAA,QAAA,CACf;AAAA,MAAA,CACE;AAAA,IAAA,CACQ;AAAA,EAAA,CACU;AAE/B;;;"}
+{"version":3,"file":"Navigation.cjs","sources":["../../../../../src/components/Header/Navigation/Navigation.tsx"],"sourcesContent":["import { MouseEvent } from \"react\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { HvHeaderMenuBar, HvHeaderMenuBarProps } from \"./MenuBar\";\nimport { staticClasses, useClasses } from \"./Navigation.styles\";\nimport { FocusProvider } from \"./utils/FocusContext\";\nimport { SelectionContext } from \"./utils/SelectionContext\";\nimport {\n  HvHeaderNavigationItemProp,\n  useSelectionPath,\n} from \"./useSelectionPath\";\n\nexport { staticClasses as headerNavigationClasses };\n\nexport type HvHeaderNavigationClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvHeaderNavigationProps\n  extends HvBaseProps<HTMLDivElement, \"onClick\"> {\n  data: HvHeaderNavigationItemProp[];\n  selected?: string;\n  onClick?: (event: MouseEvent, selection: HvHeaderNavigationItemProp) => void;\n  classes?: HvHeaderNavigationClasses;\n  /**\n   * The number of levels to show: the first level (1) or the first and second level (2).\n   *\n   * Defaults to `2`.\n   * */\n  levels?: 1 | 2;\n}\n\nexport const HvHeaderNavigation = (props: HvHeaderNavigationProps) => {\n  const {\n    data,\n    selected,\n    onClick,\n    className,\n    classes: classesProp,\n    levels = 2,\n    ...others\n  } = useDefaultProps(\"HvHeaderNavigation\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const selectionPath = useSelectionPath(data, selected);\n\n  const handleClick: HvHeaderMenuBarProps[\"onClick\"] = (\n    event: MouseEvent,\n    selection: HvHeaderNavigationItemProp\n  ) => {\n    event.preventDefault();\n\n    onClick?.(event, selection);\n  };\n\n  return (\n    <SelectionContext.Provider value={selectionPath}>\n      <FocusProvider>\n        <nav className={cx(classes.root, className)} {...others}>\n          <HvHeaderMenuBar\n            data={data}\n            type=\"menubar\"\n            onClick={handleClick}\n            levels={levels}\n            currentLevel={1}\n          />\n        </nav>\n      </FocusProvider>\n    </SelectionContext.Provider>\n  );\n};\n"],"names":["HvHeaderNavigation","props","data","selected","onClick","className","classes","classesProp","levels","others","useDefaultProps","cx","useClasses","selectionPath","useSelectionPath","handleClick","event","selection","preventDefault","_jsx","SelectionContext","Provider","value","children","FocusProvider","root","HvHeaderMenuBar","type","currentLevel"],"mappings":";;;;;;;;;AAiCaA,MAAAA,qBAAqBA,CAACC,UAAmC;AAC9D,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,IACTC,SAAS;AAAA,IACT,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,sBAAsBT,KAAK;AAEzC,QAAA;AAAA,IAAEK;AAAAA,IAASK;AAAAA,EAAAA,IAAOC,kBAAAA,WAAWL,WAAW;AAExCM,QAAAA,gBAAgBC,iBAAAA,iBAAiBZ,MAAMC,QAAQ;AAE/CY,QAAAA,cAA+CA,CACnDC,OACAC,cACG;AACHD,UAAME,eAAe;AAErBd,uCAAUY,OAAOC;AAAAA,EAAS;AAI1BE,SAAAA,2BAAAA,IAACC,kCAAiBC,UAAQ;AAAA,IAACC,OAAOT;AAAAA,IAAcU,yCAC7CC,4BAAa;AAAA,MAAAD,yCACZ,OAAA;AAAA,QAAKlB,WAAWM,GAAGL,QAAQmB,MAAMpB,SAAS;AAAA,QAAE,GAAKI;AAAAA,QAAMc,yCACpDG,yBAAe;AAAA,UACdxB;AAAAA,UACAyB,MAAK;AAAA,UACLvB,SAASW;AAAAA,UACTP;AAAAA,UACAoB,cAAc;AAAA,QAAA,CACf;AAAA,MAAA,CACE;AAAA,IAAA,CACQ;AAAA,EAAA,CACU;AAE/B;;;"}

package/dist/cjs/components/Header/Navigation/useSelectionPath.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useSelectionPath.cjs","sources":["../../../../../src/components/Header/Navigation/useSelectionPath.ts"],"sourcesContent":["import { useEffect, useState } from \"react\";\n\nexport interface HvHeaderNavigationItemProp {\n  id: string;\n  label: string;\n  path?: string;\n  href?: string;\n  target?: string;\n  data?: HvHeaderNavigationItemProp[];\n}\n\nconst getSelectionPath = (\n  data: HvHeaderNavigationItemProp[] | undefined,\n  selectedId: string,\n  selection: string[] = [],\n  idx: number = -1,\n  parent: HvHeaderNavigationItemProp[] = []\n): string[] => {\n  data?.forEach((item: HvHeaderNavigationItemProp, i) => {\n    const hasData = item.data && item.data.length;\n    const isSelected = item.id === selectedId;\n\n    if (isSelected)\n      selection.push(...(idx > -1 ? [parent[idx].id] : []), item.id);\n    if (hasData) getSelectionPath(item.data, selectedId, selection, i, data);\n  });\n\n  return selection;\n};\n\nexport const useSelectionPath = (data, selectedId): string[] => {\n  const [selectionPath, setSelectionPath] = useState<string[]>([]);\n\n  useEffect(() => {\n    const path = getSelectionPath(data, selectedId);\n    setSelectionPath(path);\n  }, [data, selectedId]);\n\n  return selectionPath;\n};\n"],"names":["getSelectionPath","data","selectedId","selection","idx","parent","forEach","item","i","hasData","length","isSelected","id","push","useSelectionPath","selectionPath","setSelectionPath","useState","useEffect","path"],"mappings":";;;AAWA,MAAMA,mBAAmBA,CACvBC,MACAC,YACAC,YAAsB,IACtBC,MAAc,IACdC,SAAuC,OAC1B;AACPC,+BAAAA,QAAQ,CAACC,MAAkCC,MAAM;AACrD,UAAMC,UAAUF,KAAKN,QAAQM,KAAKN,KAAKS;AACjCC,UAAAA,aAAaJ,KAAKK,OAAOV;AAE3BS,QAAAA;AACFR,gBAAUU,KAAK,GAAIT,MAAM,KAAK,CAACC,OAAOD,GAAG,EAAEQ,EAAE,IAAI,CAAE,GAAGL,KAAKK,EAAE;AAC3DH,QAAAA;AAAST,uBAAiBO,KAAKN,MAAMC,YAAYC,WAAWK,GAAGP,IAAI;AAAA,EAAA;AAGlEE,SAAAA;AACT;AAEaW,MAAAA,mBAAmBA,CAACb,MAAMC,eAAyB;AAC9D,QAAM,CAACa,eAAeC,gBAAgB,IAAIC,MAAAA,SAAmB,CAAE,CAAA;AAE/DC,QAAAA,UAAU,MAAM;AACRC,UAAAA,OAAOnB,iBAAiBC,MAAMC,UAAU;AAC9Cc,qBAAiBG,IAAI;AAAA,EAAA,GACpB,CAAClB,MAAMC,UAAU,CAAC;AAEda,SAAAA;AACT;;"}
+{"version":3,"file":"useSelectionPath.cjs","sources":["../../../../../src/components/Header/Navigation/useSelectionPath.ts"],"sourcesContent":["import { useEffect, useState } from \"react\";\n\nexport interface HvHeaderNavigationItemProp {\n  id: string;\n  label: string;\n  path?: string;\n  href?: string;\n  target?: string;\n  data?: HvHeaderNavigationItemProp[];\n}\n\nconst getSelectionPath = (\n  data: HvHeaderNavigationItemProp[] | undefined,\n  selectedId: string | undefined,\n  selection: string[] = [],\n  idx: number = -1,\n  parent: HvHeaderNavigationItemProp[] = []\n): string[] => {\n  data?.forEach((item: HvHeaderNavigationItemProp, i) => {\n    const hasData = item.data && item.data.length;\n\n    const isSelected = item.id === selectedId;\n\n    if (isSelected)\n      selection.push(...(idx > -1 ? [parent[idx].id] : []), item.id);\n\n    if (hasData) getSelectionPath(item.data, selectedId, selection, i, data);\n  });\n\n  return selection;\n};\n\nexport const useSelectionPath = (\n  data: HvHeaderNavigationItemProp[],\n  selectedId?: string\n): string[] => {\n  const [selectionPath, setSelectionPath] = useState<string[]>([]);\n\n  useEffect(() => {\n    const path = getSelectionPath(data, selectedId);\n\n    setSelectionPath(path);\n  }, [data, selectedId]);\n\n  return selectionPath;\n};\n"],"names":["getSelectionPath","data","selectedId","selection","idx","parent","forEach","item","i","hasData","length","isSelected","id","push","useSelectionPath","selectionPath","setSelectionPath","useState","useEffect","path"],"mappings":";;;AAWA,MAAMA,mBAAmBA,CACvBC,MACAC,YACAC,YAAsB,IACtBC,MAAc,IACdC,SAAuC,OAC1B;AACPC,+BAAAA,QAAQ,CAACC,MAAkCC,MAAM;AACrD,UAAMC,UAAUF,KAAKN,QAAQM,KAAKN,KAAKS;AAEjCC,UAAAA,aAAaJ,KAAKK,OAAOV;AAE3BS,QAAAA;AACFR,gBAAUU,KAAK,GAAIT,MAAM,KAAK,CAACC,OAAOD,GAAG,EAAEQ,EAAE,IAAI,CAAE,GAAGL,KAAKK,EAAE;AAE3DH,QAAAA;AAAST,uBAAiBO,KAAKN,MAAMC,YAAYC,WAAWK,GAAGP,IAAI;AAAA,EAAA;AAGlEE,SAAAA;AACT;AAEaW,MAAAA,mBAAmBA,CAC9Bb,MACAC,eACa;AACb,QAAM,CAACa,eAAeC,gBAAgB,IAAIC,MAAAA,SAAmB,CAAE,CAAA;AAE/DC,QAAAA,UAAU,MAAM;AACRC,UAAAA,OAAOnB,iBAAiBC,MAAMC,UAAU;AAE9Cc,qBAAiBG,IAAI;AAAA,EAAA,GACpB,CAAClB,MAAMC,UAAU,CAAC;AAEda,SAAAA;AACT;;"}

package/dist/cjs/components/Kpi/Kpi.cjs

@@ -1,10 +1,8 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const clsx = require("clsx");
 const useDefaultProps = require("../../hooks/useDefaultProps.cjs");
 const useLabels = require("../../hooks/useLabels.cjs");
 const Kpi_styles = require("./Kpi.styles.cjs");
-const kpiClasses = require("./kpiClasses.cjs");
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const Typography = require("../Typography/Typography.cjs");
 const DEFAULT_LABELS = {
@@ -21,51 +19,55 @@ const HvKpi = (props) => {
     indicatorUnitTextVariant = "title2",
     indicatorTextVariant = "title1",
     labels,
-    classes,
+    classes: classesProp,
     className,
     ...others
   } = useDefaultProps.useDefaultProps("HvKpi", props);
+  const {
+    classes,
+    cx
+  } = Kpi_styles.useClasses(classesProp);
   const mergedLabels = useLabels.useLabels(DEFAULT_LABELS, labels);
-  const InternalVisualComparison = typeof visualComparison === "string" ? Kpi_styles.StyledInternalVisualComparisonTypography : Kpi_styles.StyledInternalVisualComparisonDiv;
-  return /* @__PURE__ */ jsxRuntime.jsxs(Kpi_styles.StyledRoot, {
-    className: clsx.clsx(classes == null ? void 0 : classes.root, className, kpiClasses.default.root),
+  const InternalVisualComparison = typeof visualComparison === "string" ? Typography.HvTypography : "div";
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
+    className: cx(classes.root, className),
     ...others,
     children: [/* @__PURE__ */ jsxRuntime.jsx("div", {
       children: /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, {
         variant: "label",
         children: mergedLabels == null ? void 0 : mergedLabels.title
       })
-    }), /* @__PURE__ */ jsxRuntime.jsxs(Kpi_styles.StyledIndicatorsContainer, {
-      className: clsx.clsx(kpiClasses.default.indicatorsContainer, classes == null ? void 0 : classes.indicatorsContainer),
-      children: [visualIndicator && /* @__PURE__ */ jsxRuntime.jsx(Kpi_styles.StyledVisualIndicator, {
-        className: clsx.clsx(kpiClasses.default.visualIndicatorContainer, kpiClasses.default.spacingToTheRight, classes == null ? void 0 : classes.visualIndicatorContainer, classes == null ? void 0 : classes.spacingToTheRight),
+    }), /* @__PURE__ */ jsxRuntime.jsxs("div", {
+      className: classes.indicatorsContainer,
+      children: [visualIndicator && /* @__PURE__ */ jsxRuntime.jsx("div", {
+        className: cx(classes.visualIndicatorContainer, classes.spacingToTheRight),
         children: visualIndicator
-      }), (mergedLabels == null ? void 0 : mergedLabels.indicator) && /* @__PURE__ */ jsxRuntime.jsx(Kpi_styles.StyledIndicatorText, {
-        className: clsx.clsx(kpiClasses.default.spacingToTheRight, kpiClasses.default.indicatorText, classes == null ? void 0 : classes.spacingToTheRight, classes == null ? void 0 : classes.indicatorText),
+      }), (mergedLabels == null ? void 0 : mergedLabels.indicator) && /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, {
+        className: cx(classes.spacingToTheRight, classes.indicatorText),
         variant: indicatorTextVariant,
         children: mergedLabels.indicator
-      }), (mergedLabels == null ? void 0 : mergedLabels.unit) && /* @__PURE__ */ jsxRuntime.jsx(Kpi_styles.StyledIndicatorUnit, {
-        className: clsx.clsx(kpiClasses.default.indicatorUnit, classes == null ? void 0 : classes.indicatorUnit),
+      }), (mergedLabels == null ? void 0 : mergedLabels.unit) && /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, {
+        className: classes.indicatorUnit,
         variant: indicatorUnitTextVariant,
         children: mergedLabels.unit
       })]
-    }), visualComparison && /* @__PURE__ */ jsxRuntime.jsxs(Kpi_styles.StyledComparisonComposition, {
-      className: clsx.clsx(kpiClasses.default.comparisonComposition, classes == null ? void 0 : classes.comparisonComposition),
-      children: [trendIndicator && /* @__PURE__ */ jsxRuntime.jsx(Kpi_styles.StyledTrendIndicator, {
-        className: clsx.clsx(kpiClasses.default.trendLine, kpiClasses.default.spacingToTheRight, classes == null ? void 0 : classes.trendLine, classes == null ? void 0 : classes.spacingToTheRight),
+    }), visualComparison && /* @__PURE__ */ jsxRuntime.jsxs("div", {
+      className: classes.comparisonComposition,
+      children: [trendIndicator && /* @__PURE__ */ jsxRuntime.jsx("div", {
+        className: cx(classes.trendLine, classes.spacingToTheRight),
         children: trendIndicator
       }), /* @__PURE__ */ jsxRuntime.jsxs("div", {
-        children: [/* @__PURE__ */ jsxRuntime.jsx(Kpi_styles.StyledComparisonContainer, {
-          className: clsx.clsx(kpiClasses.default.comparisonContainer, classes == null ? void 0 : classes.comparisonContainer),
+        children: [/* @__PURE__ */ jsxRuntime.jsx("div", {
+          className: classes.comparisonContainer,
           children: /* @__PURE__ */ jsxRuntime.jsx(InternalVisualComparison, {
-            className: clsx.clsx(kpiClasses.default.comparisons, kpiClasses.default.spacingToTheRight, classes == null ? void 0 : classes.comparisons, classes == null ? void 0 : classes.spacingToTheRight),
+            className: cx(classes.comparisons, classes.spacingToTheRight),
             variant: "label",
             children: visualComparison
           })
-        }), /* @__PURE__ */ jsxRuntime.jsx(Kpi_styles.StyledComparisonContainer, {
-          className: clsx.clsx(kpiClasses.default.comparisonContainer, classes == null ? void 0 : classes.comparisonContainer),
+        }), /* @__PURE__ */ jsxRuntime.jsx("div", {
+          className: classes.comparisonContainer,
           children: /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, {
-            className: clsx.clsx(kpiClasses.default.comparisons, classes == null ? void 0 : classes.comparisons),
+            className: classes.comparisons,
             variant: "caption2",
             children: mergedLabels == null ? void 0 : mergedLabels.comparisonIndicatorInfo
           })
@@ -74,5 +76,6 @@ const HvKpi = (props) => {
     })]
   });
 };
+exports.kpiClasses = Kpi_styles.staticClasses;
 exports.HvKpi = HvKpi;
 //# sourceMappingURL=Kpi.cjs.map

package/dist/cjs/components/Kpi/Kpi.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Kpi.cjs","sources":["../../../../src/components/Kpi/Kpi.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { useLabels } from \"@core/hooks/useLabels\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { HvTypography } from \"@core/components/Typography\";\n\nimport {\n  StyledComparisonComposition,\n  StyledComparisonContainer,\n  StyledIndicatorsContainer,\n  StyledIndicatorText,\n  StyledIndicatorUnit,\n  StyledInternalVisualComparisonDiv,\n  StyledInternalVisualComparisonTypography,\n  StyledRoot,\n  StyledTrendIndicator,\n  StyledVisualIndicator,\n} from \"./Kpi.styles\";\nimport kpiClasses, { HvKpiClasses } from \"./kpiClasses\";\n\nexport interface HvKpiLabelProps {\n  /**\n   * The text at the top of the kpi.\n   */\n  title?: string;\n  /**\n   * The text in the middle of the kpi.\n   */\n  indicator?: string;\n  /**\n   * The text to the right of the indicator.\n   */\n  unit?: string;\n  /**\n   * The text to the right of the visual comparison.\n   */\n  comparisonIndicatorInfo?: string;\n}\n\nexport interface HvKpiProps extends HvBaseProps<HTMLDivElement, \"children\"> {\n  /**\n   * An Element that will be rendered to the left of the kpi indicator text.\n   */\n  trendIndicator?: React.ReactNode;\n  /**\n   * An Element that will be rendered to the left of the kpi indicator text.\n   */\n  visualIndicator?: React.ReactNode;\n  /**\n   * An Element that will be rendered below the kpi indicator text.\n   */\n  visualComparison?: React.ReactNode;\n  /**\n   * The object that contains the different labels inside the kpi.\n   */\n  labels?: HvKpiLabelProps;\n  /**\n   *  The typography variant used in the main text indicator of the KPI\n   */\n  indicatorTextVariant?: \"display\" | \"title1\" | \"title2\";\n  /**\n   *  The typography variant used in the main text indicator of the KPI\n   */\n  indicatorUnitTextVariant?: \"title2\" | \"body\";\n  /**\n   * A Jss Object used to override or extend the component styles applied.\n   */\n  classes?: HvKpiClasses;\n}\n\nconst DEFAULT_LABELS = {\n  title: \"\",\n  indicator: undefined,\n  unit: undefined,\n  comparisonIndicatorInfo: undefined,\n};\n\n/**\n * Key Performance Indicator is a type of performance measurement. It monitors a business indicator\n * and its success/failure against a given target. KPIs are the first item read on a dashboard.\n * Communicates simple, immediate and vital information for operational decision making.\n */\nexport const HvKpi = (props: HvKpiProps) => {\n  const {\n    trendIndicator = null,\n    visualIndicator = null,\n    visualComparison = null,\n    indicatorUnitTextVariant = \"title2\",\n    indicatorTextVariant = \"title1\",\n    labels,\n    classes,\n    className,\n    ...others\n  } = useDefaultProps(\"HvKpi\", props);\n\n  const mergedLabels = useLabels(DEFAULT_LABELS, labels);\n\n  const InternalVisualComparison =\n    typeof visualComparison === \"string\"\n      ? StyledInternalVisualComparisonTypography\n      : StyledInternalVisualComparisonDiv;\n\n  return (\n    <StyledRoot\n      className={clsx(classes?.root, className, kpiClasses.root)}\n      {...others}\n    >\n      <div>\n        <HvTypography variant=\"label\">{mergedLabels?.title}</HvTypography>\n      </div>\n      <StyledIndicatorsContainer\n        className={clsx(\n          kpiClasses.indicatorsContainer,\n          classes?.indicatorsContainer\n        )}\n      >\n        {visualIndicator && (\n          <StyledVisualIndicator\n            className={clsx(\n              kpiClasses.visualIndicatorContainer,\n              kpiClasses.spacingToTheRight,\n              classes?.visualIndicatorContainer,\n              classes?.spacingToTheRight\n            )}\n          >\n            {visualIndicator}\n          </StyledVisualIndicator>\n        )}\n        {mergedLabels?.indicator && (\n          <StyledIndicatorText\n            className={clsx(\n              kpiClasses.spacingToTheRight,\n              kpiClasses.indicatorText,\n              classes?.spacingToTheRight,\n              classes?.indicatorText\n            )}\n            variant={indicatorTextVariant}\n          >\n            {mergedLabels.indicator}\n          </StyledIndicatorText>\n        )}\n        {mergedLabels?.unit && (\n          <StyledIndicatorUnit\n            className={clsx(kpiClasses.indicatorUnit, classes?.indicatorUnit)}\n            variant={indicatorUnitTextVariant}\n          >\n            {mergedLabels.unit}\n          </StyledIndicatorUnit>\n        )}\n      </StyledIndicatorsContainer>\n      {visualComparison && (\n        <StyledComparisonComposition\n          className={clsx(\n            kpiClasses.comparisonComposition,\n            classes?.comparisonComposition\n          )}\n        >\n          {trendIndicator && (\n            <StyledTrendIndicator\n              className={clsx(\n                kpiClasses.trendLine,\n                kpiClasses.spacingToTheRight,\n                classes?.trendLine,\n                classes?.spacingToTheRight\n              )}\n            >\n              {trendIndicator}\n            </StyledTrendIndicator>\n          )}\n          <div>\n            <StyledComparisonContainer\n              className={clsx(\n                kpiClasses.comparisonContainer,\n                classes?.comparisonContainer\n              )}\n            >\n              <InternalVisualComparison\n                className={clsx(\n                  kpiClasses.comparisons,\n                  kpiClasses.spacingToTheRight,\n                  classes?.comparisons,\n                  classes?.spacingToTheRight\n                )}\n                variant=\"label\"\n              >\n                {visualComparison}\n              </InternalVisualComparison>\n            </StyledComparisonContainer>\n            <StyledComparisonContainer\n              className={clsx(\n                kpiClasses.comparisonContainer,\n                classes?.comparisonContainer\n              )}\n            >\n              <HvTypography\n                className={clsx(kpiClasses.comparisons, classes?.comparisons)}\n                variant=\"caption2\"\n              >\n                {mergedLabels?.comparisonIndicatorInfo}\n              </HvTypography>\n            </StyledComparisonContainer>\n          </div>\n        </StyledComparisonComposition>\n      )}\n    </StyledRoot>\n  );\n};\n"],"names":["DEFAULT_LABELS","title","indicator","undefined","unit","comparisonIndicatorInfo","HvKpi","props","trendIndicator","visualIndicator","visualComparison","indicatorUnitTextVariant","indicatorTextVariant","labels","classes","className","others","useDefaultProps","mergedLabels","useLabels","InternalVisualComparison","StyledInternalVisualComparisonTypography","StyledInternalVisualComparisonDiv","StyledRoot","clsx","root","kpiClasses","children","_jsx","HvTypography","variant","_jsxs","StyledIndicatorsContainer","indicatorsContainer","StyledVisualIndicator","visualIndicatorContainer","spacingToTheRight","StyledIndicatorText","indicatorText","StyledIndicatorUnit","indicatorUnit","StyledComparisonComposition","comparisonComposition","StyledTrendIndicator","trendLine","StyledComparisonContainer","comparisonContainer","comparisons"],"mappings":"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"}
+{"version":3,"file":"Kpi.cjs","sources":["../../../../src/components/Kpi/Kpi.tsx"],"sourcesContent":["import { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { useLabels } from \"@core/hooks/useLabels\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Kpi.styles\";\n\nexport { staticClasses as kpiClasses };\n\nexport type HvKpiClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvKpiLabelProps {\n  /**\n   * The text at the top of the kpi.\n   */\n  title?: string;\n  /**\n   * The text in the middle of the kpi.\n   */\n  indicator?: string;\n  /**\n   * The text to the right of the indicator.\n   */\n  unit?: string;\n  /**\n   * The text to the right of the visual comparison.\n   */\n  comparisonIndicatorInfo?: string;\n}\n\nexport interface HvKpiProps extends HvBaseProps<HTMLDivElement, \"children\"> {\n  /**\n   * An Element that will be rendered to the left of the kpi indicator text.\n   */\n  trendIndicator?: React.ReactNode;\n  /**\n   * An Element that will be rendered to the left of the kpi indicator text.\n   */\n  visualIndicator?: React.ReactNode;\n  /**\n   * An Element that will be rendered below the kpi indicator text.\n   */\n  visualComparison?: React.ReactNode;\n  /**\n   * The object that contains the different labels inside the kpi.\n   */\n  labels?: HvKpiLabelProps;\n  /**\n   *  The typography variant used in the main text indicator of the KPI\n   */\n  indicatorTextVariant?: \"display\" | \"title1\" | \"title2\";\n  /**\n   *  The typography variant used in the main text indicator of the KPI\n   */\n  indicatorUnitTextVariant?: \"title2\" | \"body\";\n  /**\n   * A Jss Object used to override or extend the component styles applied.\n   */\n  classes?: HvKpiClasses;\n}\n\nconst DEFAULT_LABELS = {\n  title: \"\",\n  indicator: undefined,\n  unit: undefined,\n  comparisonIndicatorInfo: undefined,\n};\n\n/**\n * Key Performance Indicator is a type of performance measurement. It monitors a business indicator\n * and its success/failure against a given target. KPIs are the first item read on a dashboard.\n * Communicates simple, immediate and vital information for operational decision making.\n */\nexport const HvKpi = (props: HvKpiProps) => {\n  const {\n    trendIndicator = null,\n    visualIndicator = null,\n    visualComparison = null,\n    indicatorUnitTextVariant = \"title2\",\n    indicatorTextVariant = \"title1\",\n    labels,\n    classes: classesProp,\n    className,\n    ...others\n  } = useDefaultProps(\"HvKpi\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const mergedLabels = useLabels(DEFAULT_LABELS, labels);\n\n  const InternalVisualComparison =\n    typeof visualComparison === \"string\" ? HvTypography : \"div\";\n\n  return (\n    <div className={cx(classes.root, className)} {...others}>\n      <div>\n        <HvTypography variant=\"label\">{mergedLabels?.title}</HvTypography>\n      </div>\n      <div className={classes.indicatorsContainer}>\n        {visualIndicator && (\n          <div\n            className={cx(\n              classes.visualIndicatorContainer,\n              classes.spacingToTheRight\n            )}\n          >\n            {visualIndicator}\n          </div>\n        )}\n        {mergedLabels?.indicator && (\n          <HvTypography\n            className={cx(classes.spacingToTheRight, classes.indicatorText)}\n            variant={indicatorTextVariant}\n          >\n            {mergedLabels.indicator}\n          </HvTypography>\n        )}\n        {mergedLabels?.unit && (\n          <HvTypography\n            className={classes.indicatorUnit}\n            variant={indicatorUnitTextVariant}\n          >\n            {mergedLabels.unit}\n          </HvTypography>\n        )}\n      </div>\n      {visualComparison && (\n        <div className={classes.comparisonComposition}>\n          {trendIndicator && (\n            <div className={cx(classes.trendLine, classes.spacingToTheRight)}>\n              {trendIndicator}\n            </div>\n          )}\n          <div>\n            <div className={classes.comparisonContainer}>\n              <InternalVisualComparison\n                className={cx(classes.comparisons, classes.spacingToTheRight)}\n                variant=\"label\"\n              >\n                {visualComparison}\n              </InternalVisualComparison>\n            </div>\n            <div className={classes.comparisonContainer}>\n              <HvTypography className={classes.comparisons} variant=\"caption2\">\n                {mergedLabels?.comparisonIndicatorInfo}\n              </HvTypography>\n            </div>\n          </div>\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":["DEFAULT_LABELS","title","indicator","undefined","unit","comparisonIndicatorInfo","HvKpi","props","trendIndicator","visualIndicator","visualComparison","indicatorUnitTextVariant","indicatorTextVariant","labels","classes","classesProp","className","others","useDefaultProps","cx","useClasses","mergedLabels","useLabels","InternalVisualComparison","HvTypography","root","children","_jsx","variant","_jsxs","indicatorsContainer","visualIndicatorContainer","spacingToTheRight","indicatorText","indicatorUnit","comparisonComposition","trendLine","comparisonContainer","comparisons"],"mappings":";;;;;;;AA8DA,MAAMA,iBAAiB;AAAA,EACrBC,OAAO;AAAA,EACPC,WAAWC;AAAAA,EACXC,MAAMD;AAAAA,EACNE,yBAAyBF;AAC3B;AAOaG,MAAAA,QAAQA,CAACC,UAAsB;AACpC,QAAA;AAAA,IACJC,iBAAiB;AAAA,IACjBC,kBAAkB;AAAA,IAClBC,mBAAmB;AAAA,IACnBC,2BAA2B;AAAA,IAC3BC,uBAAuB;AAAA,IACvBC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,SAASX,KAAK;AAE5B,QAAA;AAAA,IAAEO;AAAAA,IAASK;AAAAA,EAAAA,IAAOC,WAAAA,WAAWL,WAAW;AAExCM,QAAAA,eAAeC,UAAAA,UAAUtB,gBAAgBa,MAAM;AAErD,QAAMU,2BACJ,OAAOb,qBAAqB,WAAWc,WAAAA,eAAe;AAExD,yCACE,OAAA;AAAA,IAAKR,WAAWG,GAAGL,QAAQW,MAAMT,SAAS;AAAA,IAAE,GAAKC;AAAAA,IAAMS,WACrDC,2BAAAA,IAAA,OAAA;AAAA,MAAAD,yCACGF,yBAAY;AAAA,QAACI,SAAQ;AAAA,QAAOF,UAAEL,6CAAcpB;AAAAA,MAAAA,CAAoB;AAAA,IAAA,CAC9D,GACL4B,2BAAAA,KAAA,OAAA;AAAA,MAAKb,WAAWF,QAAQgB;AAAAA,MAAoBJ,UAAA,CACzCjB,mBACCkB,2BAAAA,IAAA,OAAA;AAAA,QACEX,WAAWG,GACTL,QAAQiB,0BACRjB,QAAQkB,iBACV;AAAA,QAAEN,UAEDjB;AAAAA,MACE,CAAA,IAENY,6CAAcnB,6CACZsB,WAAAA,cAAY;AAAA,QACXR,WAAWG,GAAGL,QAAQkB,mBAAmBlB,QAAQmB,aAAa;AAAA,QAC9DL,SAAShB;AAAAA,QAAqBc,UAE7BL,aAAanB;AAAAA,MACF,CAAA,IAEfmB,6CAAcjB,wCACZoB,WAAAA,cAAY;AAAA,QACXR,WAAWF,QAAQoB;AAAAA,QACnBN,SAASjB;AAAAA,QAAyBe,UAEjCL,aAAajB;AAAAA,MAAAA,CACF,CACf;AAAA,IAAA,CACE,GACJM,oBACCmB,2BAAAA,KAAA,OAAA;AAAA,MAAKb,WAAWF,QAAQqB;AAAAA,MAAsBT,UAAA,CAC3ClB,kBACCmB,2BAAAA,IAAA,OAAA;AAAA,QAAKX,WAAWG,GAAGL,QAAQsB,WAAWtB,QAAQkB,iBAAiB;AAAA,QAAEN,UAC9DlB;AAAAA,MAAAA,CACE,GAEPqB,2BAAAA,KAAA,OAAA;AAAA,QAAAH,WACEC,2BAAAA,IAAA,OAAA;AAAA,UAAKX,WAAWF,QAAQuB;AAAAA,UAAoBX,yCACzCH,0BAAwB;AAAA,YACvBP,WAAWG,GAAGL,QAAQwB,aAAaxB,QAAQkB,iBAAiB;AAAA,YAC5DJ,SAAQ;AAAA,YAAOF,UAEdhB;AAAAA,UAAAA,CACuB;AAAA,QAAA,CACvB,GACLiB,2BAAAA,IAAA,OAAA;AAAA,UAAKX,WAAWF,QAAQuB;AAAAA,UAAoBX,yCACzCF,yBAAY;AAAA,YAACR,WAAWF,QAAQwB;AAAAA,YAAaV,SAAQ;AAAA,YAAUF,UAC7DL,6CAAchB;AAAAA,UAAAA,CACH;AAAA,QAAA,CACX,CAAC;AAAA,MAAA,CACH,CAAC;AAAA,IAAA,CACH,CACN;AAAA,EAAA,CACE;AAET;;;"}

package/dist/cjs/components/Kpi/Kpi.styles.cjs

@@ -1,137 +1,52 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const _styled = require("@emotion/styled/base");
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const Typography = require("../Typography/Typography.cjs");
-const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
-const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
-function _EMOTION_STRINGIFIED_CSS_ERROR__() {
-  return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
-}
-const StyledRoot = /* @__PURE__ */ _styled__default.default("div", process.env.NODE_ENV === "production" ? {
-  target: "e70l5p69"
-} : {
-  target: "e70l5p69",
-  label: "StyledRoot"
-})(process.env.NODE_ENV === "production" ? {
-  name: "w1atjl",
-  styles: "width:100%;height:100%"
-} : {
-  name: "w1atjl",
-  styles: "width:100%;height:100%",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvS3BpL0twaS5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQU0wQiIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay9odi11aWtpdC1yZWFjdC9odi11aWtpdC1yZWFjdC9wYWNrYWdlcy9jb3JlL3NyYy9jb21wb25lbnRzL0twaS9LcGkuc3R5bGVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuXG5pbXBvcnQgeyB0aGVtZSB9IGZyb20gXCJAaGl0YWNoaXZhbnRhcmEvdWlraXQtc3R5bGVzXCI7XG5cbmltcG9ydCB7IEh2VHlwb2dyYXBoeSB9IGZyb20gXCJAY29yZS9jb21wb25lbnRzL1R5cG9ncmFwaHlcIjtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZFJvb3QgPSBzdHlsZWQoXCJkaXZcIikoe1xuICB3aWR0aDogXCIxMDAlXCIsXG4gIGhlaWdodDogXCIxMDAlXCIsXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZEluZGljYXRvcnNDb250YWluZXIgPSBzdHlsZWQoXCJkaXZcIikoe1xuICBkaXNwbGF5OiBcImlubGluZS1mbGV4XCIsXG4gIG1pbkhlaWdodDogXCIxNnB4XCIsXG4gIGFsaWduSXRlbXM6IFwiZmxleC1lbmRcIixcbn0pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkVmlzdWFsSW5kaWNhdG9yID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgZGlzcGxheTogXCJpbmxpbmUtZmxleFwiLFxuICBhbGlnbkl0ZW1zOiBcImNlbnRlclwiLFxuICBqdXN0aWZ5Q29udGVudDogXCJjZW50ZXJcIixcbiAgaGVpZ2h0OiBcIjQwcHhcIixcbiAgYmFja2dyb3VuZENvbG9yOiBcInRyYW5zcGFyZW50XCIsXG4gIG1hcmdpblJpZ2h0OiB0aGVtZS5zcGFjZS54cyxcbn0pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkSW5kaWNhdG9yVGV4dCA9IHN0eWxlZChIdlR5cG9ncmFwaHkpKHtcbiAgbWFyZ2luUmlnaHQ6IHRoZW1lLnNwYWNlLnhzLFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRJbmRpY2F0b3JVbml0ID0gc3R5bGVkKEh2VHlwb2dyYXBoeSkoe1xuICBhbGlnblNlbGY6IFwiZmxleC1lbmRcIixcbiAgcGFkZGluZ0JvdHRvbTogXCIzcHhcIixcbn0pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkQ29tcGFyaXNvbkNvbXBvc2l0aW9uID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgd2lkdGg6IFwiMTAwJVwiLFxuICBkaXNwbGF5OiBcImZsZXhcIixcbiAgZmxleERpcmVjdGlvbjogXCJyb3dcIixcbiAgZmxleFdyYXA6IFwid3JhcFwiLFxuICBhbGlnbkl0ZW1zOiBcImNlbnRlclwiLFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRUcmVuZEluZGljYXRvciA9IHN0eWxlZChcImRpdlwiKSh7XG4gIG1hcmdpblJpZ2h0OiB0aGVtZS5zcGFjZS54cyxcbiAgZmxvYXQ6IFwicmlnaHRcIixcbn0pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkQ29tcGFyaXNvbkNvbnRhaW5lciA9IHN0eWxlZChcImRpdlwiKSh7XG4gIG1pbkhlaWdodDogXCIxNnB4XCIsXG4gIGRpc3BsYXk6IFwiZmxleFwiLFxuICBhbGlnbkl0ZW1zOiBcImZsZXgtZW5kXCIsXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZEludGVybmFsVmlzdWFsQ29tcGFyaXNvbkRpdiA9IHN0eWxlZChcImRpdlwiKSh7XG4gIG1hcmdpblJpZ2h0OiB0aGVtZS5zcGFjZS54cyxcbn0pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkSW50ZXJuYWxWaXN1YWxDb21wYXJpc29uVHlwb2dyYXBoeSA9IHN0eWxlZChIdlR5cG9ncmFwaHkpKHtcbiAgbWFyZ2luUmlnaHQ6IHRoZW1lLnNwYWNlLnhzLFxufSk7XG4iXX0= */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+const classes = require("../../utils/classes.cjs");
+const {
+  staticClasses,
+  useClasses
+} = classes.createClasses("HvKpi", {
+  root: {
+    width: "100%",
+    height: "100%"
+  },
+  visualIndicatorContainer: {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    height: "40px",
+    backgroundColor: "transparent"
+  },
+  comparisons: {},
+  comparisonContainer: {
+    minHeight: "16px",
+    display: "flex",
+    alignItems: "flex-end"
+  },
+  comparisonComposition: {
+    width: "100%",
+    display: "flex",
+    flexDirection: "row",
+    flexWrap: "wrap",
+    alignItems: "center"
+  },
+  indicatorsContainer: {
+    display: "inline-flex",
+    minHeight: "16px",
+    alignItems: "flex-end"
+  },
+  indicatorText: {},
+  indicatorUnit: {
+    alignSelf: "flex-end",
+    paddingBottom: "3px"
+  },
+  spacingToTheRight: {
+    marginRight: uikitStyles.theme.space.xs
+  },
+  trendLine: {
+    float: "right"
+  }
 });
-const StyledIndicatorsContainer = /* @__PURE__ */ _styled__default.default("div", process.env.NODE_ENV === "production" ? {
-  target: "e70l5p68"
-} : {
-  target: "e70l5p68",
-  label: "StyledIndicatorsContainer"
-})(process.env.NODE_ENV === "production" ? {
-  name: "d0nhrh",
-  styles: "display:inline-flex;min-height:16px;align-items:flex-end"
-} : {
-  name: "d0nhrh",
-  styles: "display:inline-flex;min-height:16px;align-items:flex-end",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvS3BpL0twaS5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVd5QyIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay9odi11aWtpdC1yZWFjdC9odi11aWtpdC1yZWFjdC9wYWNrYWdlcy9jb3JlL3NyYy9jb21wb25lbnRzL0twaS9LcGkuc3R5bGVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuXG5pbXBvcnQgeyB0aGVtZSB9IGZyb20gXCJAaGl0YWNoaXZhbnRhcmEvdWlraXQtc3R5bGVzXCI7XG5cbmltcG9ydCB7IEh2VHlwb2dyYXBoeSB9IGZyb20gXCJAY29yZS9jb21wb25lbnRzL1R5cG9ncmFwaHlcIjtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZFJvb3QgPSBzdHlsZWQoXCJkaXZcIikoe1xuICB3aWR0aDogXCIxMDAlXCIsXG4gIGhlaWdodDogXCIxMDAlXCIsXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZEluZGljYXRvcnNDb250YWluZXIgPSBzdHlsZWQoXCJkaXZcIikoe1xuICBkaXNwbGF5OiBcImlubGluZS1mbGV4XCIsXG4gIG1pbkhlaWdodDogXCIxNnB4XCIsXG4gIGFsaWduSXRlbXM6IFwiZmxleC1lbmRcIixcbn0pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkVmlzdWFsSW5kaWNhdG9yID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgZGlzcGxheTogXCJpbmxpbmUtZmxleFwiLFxuICBhbGlnbkl0ZW1zOiBcImNlbnRlclwiLFxuICBqdXN0aWZ5Q29udGVudDogXCJjZW50ZXJcIixcbiAgaGVpZ2h0OiBcIjQwcHhcIixcbiAgYmFja2dyb3VuZENvbG9yOiBcInRyYW5zcGFyZW50XCIsXG4gIG1hcmdpblJpZ2h0OiB0aGVtZS5zcGFjZS54cyxcbn0pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkSW5kaWNhdG9yVGV4dCA9IHN0eWxlZChIdlR5cG9ncmFwaHkpKHtcbiAgbWFyZ2luUmlnaHQ6IHRoZW1lLnNwYWNlLnhzLFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRJbmRpY2F0b3JVbml0ID0gc3R5bGVkKEh2VHlwb2dyYXBoeSkoe1xuICBhbGlnblNlbGY6IFwiZmxleC1lbmRcIixcbiAgcGFkZGluZ0JvdHRvbTogXCIzcHhcIixcbn0pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkQ29tcGFyaXNvbkNvbXBvc2l0aW9uID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgd2lkdGg6IFwiMTAwJVwiLFxuICBkaXNwbGF5OiBcImZsZXhcIixcbiAgZmxleERpcmVjdGlvbjogXCJyb3dcIixcbiAgZmxleFdyYXA6IFwid3JhcFwiLFxuICBhbGlnbkl0ZW1zOiBcImNlbnRlclwiLFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRUcmVuZEluZGljYXRvciA9IHN0eWxlZChcImRpdlwiKSh7XG4gIG1hcmdpblJpZ2h0OiB0aGVtZS5zcGFjZS54cyxcbiAgZmxvYXQ6IFwicmlnaHRcIixcbn0pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkQ29tcGFyaXNvbkNvbnRhaW5lciA9IHN0eWxlZChcImRpdlwiKSh7XG4gIG1pbkhlaWdodDogXCIxNnB4XCIsXG4gIGRpc3BsYXk6IFwiZmxleFwiLFxuICBhbGlnbkl0ZW1zOiBcImZsZXgtZW5kXCIsXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZEludGVybmFsVmlzdWFsQ29tcGFyaXNvbkRpdiA9IHN0eWxlZChcImRpdlwiKSh7XG4gIG1hcmdpblJpZ2h0OiB0aGVtZS5zcGFjZS54cyxcbn0pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkSW50ZXJuYWxWaXN1YWxDb21wYXJpc29uVHlwb2dyYXBoeSA9IHN0eWxlZChIdlR5cG9ncmFwaHkpKHtcbiAgbWFyZ2luUmlnaHQ6IHRoZW1lLnNwYWNlLnhzLFxufSk7XG4iXX0= */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-const StyledVisualIndicator = /* @__PURE__ */ _styled__default.default("div", process.env.NODE_ENV === "production" ? {
-  target: "e70l5p67"
-} : {
-  target: "e70l5p67",
-  label: "StyledVisualIndicator"
-})({
-  display: "inline-flex",
-  alignItems: "center",
-  justifyContent: "center",
-  height: "40px",
-  backgroundColor: "transparent",
-  marginRight: uikitStyles.theme.space.xs
-}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvS3BpL0twaS5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWlCcUMiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvaHYtdWlraXQtcmVhY3QvaHYtdWlraXQtcmVhY3QvcGFja2FnZXMvY29yZS9zcmMvY29tcG9uZW50cy9LcGkvS3BpLnN0eWxlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcblxuaW1wb3J0IHsgdGhlbWUgfSBmcm9tIFwiQGhpdGFjaGl2YW50YXJhL3Vpa2l0LXN0eWxlc1wiO1xuXG5pbXBvcnQgeyBIdlR5cG9ncmFwaHkgfSBmcm9tIFwiQGNvcmUvY29tcG9uZW50cy9UeXBvZ3JhcGh5XCI7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRSb290ID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgd2lkdGg6IFwiMTAwJVwiLFxuICBoZWlnaHQ6IFwiMTAwJVwiLFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRJbmRpY2F0b3JzQ29udGFpbmVyID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgZGlzcGxheTogXCJpbmxpbmUtZmxleFwiLFxuICBtaW5IZWlnaHQ6IFwiMTZweFwiLFxuICBhbGlnbkl0ZW1zOiBcImZsZXgtZW5kXCIsXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZFZpc3VhbEluZGljYXRvciA9IHN0eWxlZChcImRpdlwiKSh7XG4gIGRpc3BsYXk6IFwiaW5saW5lLWZsZXhcIixcbiAgYWxpZ25JdGVtczogXCJjZW50ZXJcIixcbiAganVzdGlmeUNvbnRlbnQ6IFwiY2VudGVyXCIsXG4gIGhlaWdodDogXCI0MHB4XCIsXG4gIGJhY2tncm91bmRDb2xvcjogXCJ0cmFuc3BhcmVudFwiLFxuICBtYXJnaW5SaWdodDogdGhlbWUuc3BhY2UueHMsXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZEluZGljYXRvclRleHQgPSBzdHlsZWQoSHZUeXBvZ3JhcGh5KSh7XG4gIG1hcmdpblJpZ2h0OiB0aGVtZS5zcGFjZS54cyxcbn0pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkSW5kaWNhdG9yVW5pdCA9IHN0eWxlZChIdlR5cG9ncmFwaHkpKHtcbiAgYWxpZ25TZWxmOiBcImZsZXgtZW5kXCIsXG4gIHBhZGRpbmdCb3R0b206IFwiM3B4XCIsXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZENvbXBhcmlzb25Db21wb3NpdGlvbiA9IHN0eWxlZChcImRpdlwiKSh7XG4gIHdpZHRoOiBcIjEwMCVcIixcbiAgZGlzcGxheTogXCJmbGV4XCIsXG4gIGZsZXhEaXJlY3Rpb246IFwicm93XCIsXG4gIGZsZXhXcmFwOiBcIndyYXBcIixcbiAgYWxpZ25JdGVtczogXCJjZW50ZXJcIixcbn0pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkVHJlbmRJbmRpY2F0b3IgPSBzdHlsZWQoXCJkaXZcIikoe1xuICBtYXJnaW5SaWdodDogdGhlbWUuc3BhY2UueHMsXG4gIGZsb2F0OiBcInJpZ2h0XCIsXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZENvbXBhcmlzb25Db250YWluZXIgPSBzdHlsZWQoXCJkaXZcIikoe1xuICBtaW5IZWlnaHQ6IFwiMTZweFwiLFxuICBkaXNwbGF5OiBcImZsZXhcIixcbiAgYWxpZ25JdGVtczogXCJmbGV4LWVuZFwiLFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRJbnRlcm5hbFZpc3VhbENvbXBhcmlzb25EaXYgPSBzdHlsZWQoXCJkaXZcIikoe1xuICBtYXJnaW5SaWdodDogdGhlbWUuc3BhY2UueHMsXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZEludGVybmFsVmlzdWFsQ29tcGFyaXNvblR5cG9ncmFwaHkgPSBzdHlsZWQoSHZUeXBvZ3JhcGh5KSh7XG4gIG1hcmdpblJpZ2h0OiB0aGVtZS5zcGFjZS54cyxcbn0pO1xuIl19 */");
-const StyledIndicatorText = /* @__PURE__ */ _styled__default.default(Typography.HvTypography, process.env.NODE_ENV === "production" ? {
-  target: "e70l5p66"
-} : {
-  target: "e70l5p66",
-  label: "StyledIndicatorText"
-})({
-  marginRight: uikitStyles.theme.space.xs
-}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvS3BpL0twaS5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTBCbUMiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvaHYtdWlraXQtcmVhY3QvaHYtdWlraXQtcmVhY3QvcGFja2FnZXMvY29yZS9zcmMvY29tcG9uZW50cy9LcGkvS3BpLnN0eWxlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcblxuaW1wb3J0IHsgdGhlbWUgfSBmcm9tIFwiQGhpdGFjaGl2YW50YXJhL3Vpa2l0LXN0eWxlc1wiO1xuXG5pbXBvcnQgeyBIdlR5cG9ncmFwaHkgfSBmcm9tIFwiQGNvcmUvY29tcG9uZW50cy9UeXBvZ3JhcGh5XCI7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRSb290ID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgd2lkdGg6IFwiMTAwJVwiLFxuICBoZWlnaHQ6IFwiMTAwJVwiLFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRJbmRpY2F0b3JzQ29udGFpbmVyID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgZGlzcGxheTogXCJpbmxpbmUtZmxleFwiLFxuICBtaW5IZWlnaHQ6IFwiMTZweFwiLFxuICBhbGlnbkl0ZW1zOiBcImZsZXgtZW5kXCIsXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZFZpc3VhbEluZGljYXRvciA9IHN0eWxlZChcImRpdlwiKSh7XG4gIGRpc3BsYXk6IFwiaW5saW5lLWZsZXhcIixcbiAgYWxpZ25JdGVtczogXCJjZW50ZXJcIixcbiAganVzdGlmeUNvbnRlbnQ6IFwiY2VudGVyXCIsXG4gIGhlaWdodDogXCI0MHB4XCIsXG4gIGJhY2tncm91bmRDb2xvcjogXCJ0cmFuc3BhcmVudFwiLFxuICBtYXJnaW5SaWdodDogdGhlbWUuc3BhY2UueHMsXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZEluZGljYXRvclRleHQgPSBzdHlsZWQoSHZUeXBvZ3JhcGh5KSh7XG4gIG1hcmdpblJpZ2h0OiB0aGVtZS5zcGFjZS54cyxcbn0pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkSW5kaWNhdG9yVW5pdCA9IHN0eWxlZChIdlR5cG9ncmFwaHkpKHtcbiAgYWxpZ25TZWxmOiBcImZsZXgtZW5kXCIsXG4gIHBhZGRpbmdCb3R0b206IFwiM3B4XCIsXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZENvbXBhcmlzb25Db21wb3NpdGlvbiA9IHN0eWxlZChcImRpdlwiKSh7XG4gIHdpZHRoOiBcIjEwMCVcIixcbiAgZGlzcGxheTogXCJmbGV4XCIsXG4gIGZsZXhEaXJlY3Rpb246IFwicm93XCIsXG4gIGZsZXhXcmFwOiBcIndyYXBcIixcbiAgYWxpZ25JdGVtczogXCJjZW50ZXJcIixcbn0pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkVHJlbmRJbmRpY2F0b3IgPSBzdHlsZWQoXCJkaXZcIikoe1xuICBtYXJnaW5SaWdodDogdGhlbWUuc3BhY2UueHMsXG4gIGZsb2F0OiBcInJpZ2h0XCIsXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZENvbXBhcmlzb25Db250YWluZXIgPSBzdHlsZWQoXCJkaXZcIikoe1xuICBtaW5IZWlnaHQ6IFwiMTZweFwiLFxuICBkaXNwbGF5OiBcImZsZXhcIixcbiAgYWxpZ25JdGVtczogXCJmbGV4LWVuZFwiLFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRJbnRlcm5hbFZpc3VhbENvbXBhcmlzb25EaXYgPSBzdHlsZWQoXCJkaXZcIikoe1xuICBtYXJnaW5SaWdodDogdGhlbWUuc3BhY2UueHMsXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZEludGVybmFsVmlzdWFsQ29tcGFyaXNvblR5cG9ncmFwaHkgPSBzdHlsZWQoSHZUeXBvZ3JhcGh5KSh7XG4gIG1hcmdpblJpZ2h0OiB0aGVtZS5zcGFjZS54cyxcbn0pO1xuIl19 */");
-const StyledIndicatorUnit = /* @__PURE__ */ _styled__default.default(Typography.HvTypography, process.env.NODE_ENV === "production" ? {
-  target: "e70l5p65"
-} : {
-  target: "e70l5p65",
-  label: "StyledIndicatorUnit"
-})(process.env.NODE_ENV === "production" ? {
-  name: "1momlv3",
-  styles: "align-self:flex-end;padding-bottom:3px"
-} : {
-  name: "1momlv3",
-  styles: "align-self:flex-end;padding-bottom:3px",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvS3BpL0twaS5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQThCbUMiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvaHYtdWlraXQtcmVhY3QvaHYtdWlraXQtcmVhY3QvcGFja2FnZXMvY29yZS9zcmMvY29tcG9uZW50cy9LcGkvS3BpLnN0eWxlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcblxuaW1wb3J0IHsgdGhlbWUgfSBmcm9tIFwiQGhpdGFjaGl2YW50YXJhL3Vpa2l0LXN0eWxlc1wiO1xuXG5pbXBvcnQgeyBIdlR5cG9ncmFwaHkgfSBmcm9tIFwiQGNvcmUvY29tcG9uZW50cy9UeXBvZ3JhcGh5XCI7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRSb290ID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgd2lkdGg6IFwiMTAwJVwiLFxuICBoZWlnaHQ6IFwiMTAwJVwiLFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRJbmRpY2F0b3JzQ29udGFpbmVyID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgZGlzcGxheTogXCJpbmxpbmUtZmxleFwiLFxuICBtaW5IZWlnaHQ6IFwiMTZweFwiLFxuICBhbGlnbkl0ZW1zOiBcImZsZXgtZW5kXCIsXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZFZpc3VhbEluZGljYXRvciA9IHN0eWxlZChcImRpdlwiKSh7XG4gIGRpc3BsYXk6IFwiaW5saW5lLWZsZXhcIixcbiAgYWxpZ25JdGVtczogXCJjZW50ZXJcIixcbiAganVzdGlmeUNvbnRlbnQ6IFwiY2VudGVyXCIsXG4gIGhlaWdodDogXCI0MHB4XCIsXG4gIGJhY2tncm91bmRDb2xvcjogXCJ0cmFuc3BhcmVudFwiLFxuICBtYXJnaW5SaWdodDogdGhlbWUuc3BhY2UueHMsXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZEluZGljYXRvclRleHQgPSBzdHlsZWQoSHZUeXBvZ3JhcGh5KSh7XG4gIG1hcmdpblJpZ2h0OiB0aGVtZS5zcGFjZS54cyxcbn0pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkSW5kaWNhdG9yVW5pdCA9IHN0eWxlZChIdlR5cG9ncmFwaHkpKHtcbiAgYWxpZ25TZWxmOiBcImZsZXgtZW5kXCIsXG4gIHBhZGRpbmdCb3R0b206IFwiM3B4XCIsXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZENvbXBhcmlzb25Db21wb3NpdGlvbiA9IHN0eWxlZChcImRpdlwiKSh7XG4gIHdpZHRoOiBcIjEwMCVcIixcbiAgZGlzcGxheTogXCJmbGV4XCIsXG4gIGZsZXhEaXJlY3Rpb246IFwicm93XCIsXG4gIGZsZXhXcmFwOiBcIndyYXBcIixcbiAgYWxpZ25JdGVtczogXCJjZW50ZXJcIixcbn0pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkVHJlbmRJbmRpY2F0b3IgPSBzdHlsZWQoXCJkaXZcIikoe1xuICBtYXJnaW5SaWdodDogdGhlbWUuc3BhY2UueHMsXG4gIGZsb2F0OiBcInJpZ2h0XCIsXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZENvbXBhcmlzb25Db250YWluZXIgPSBzdHlsZWQoXCJkaXZcIikoe1xuICBtaW5IZWlnaHQ6IFwiMTZweFwiLFxuICBkaXNwbGF5OiBcImZsZXhcIixcbiAgYWxpZ25JdGVtczogXCJmbGV4LWVuZFwiLFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRJbnRlcm5hbFZpc3VhbENvbXBhcmlzb25EaXYgPSBzdHlsZWQoXCJkaXZcIikoe1xuICBtYXJnaW5SaWdodDogdGhlbWUuc3BhY2UueHMsXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZEludGVybmFsVmlzdWFsQ29tcGFyaXNvblR5cG9ncmFwaHkgPSBzdHlsZWQoSHZUeXBvZ3JhcGh5KSh7XG4gIG1hcmdpblJpZ2h0OiB0aGVtZS5zcGFjZS54cyxcbn0pO1xuIl19 */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-const StyledComparisonComposition = /* @__PURE__ */ _styled__default.default("div", process.env.NODE_ENV === "production" ? {
-  target: "e70l5p64"
-} : {
-  target: "e70l5p64",
-  label: "StyledComparisonComposition"
-})(process.env.NODE_ENV === "production" ? {
-  name: "3bv6ua",
-  styles: "width:100%;display:flex;flex-direction:row;flex-wrap:wrap;align-items:center"
-} : {
-  name: "3bv6ua",
-  styles: "width:100%;display:flex;flex-direction:row;flex-wrap:wrap;align-items:center",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvS3BpL0twaS5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQW1DMkMiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvaHYtdWlraXQtcmVhY3QvaHYtdWlraXQtcmVhY3QvcGFja2FnZXMvY29yZS9zcmMvY29tcG9uZW50cy9LcGkvS3BpLnN0eWxlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcblxuaW1wb3J0IHsgdGhlbWUgfSBmcm9tIFwiQGhpdGFjaGl2YW50YXJhL3Vpa2l0LXN0eWxlc1wiO1xuXG5pbXBvcnQgeyBIdlR5cG9ncmFwaHkgfSBmcm9tIFwiQGNvcmUvY29tcG9uZW50cy9UeXBvZ3JhcGh5XCI7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRSb290ID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgd2lkdGg6IFwiMTAwJVwiLFxuICBoZWlnaHQ6IFwiMTAwJVwiLFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRJbmRpY2F0b3JzQ29udGFpbmVyID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgZGlzcGxheTogXCJpbmxpbmUtZmxleFwiLFxuICBtaW5IZWlnaHQ6IFwiMTZweFwiLFxuICBhbGlnbkl0ZW1zOiBcImZsZXgtZW5kXCIsXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZFZpc3VhbEluZGljYXRvciA9IHN0eWxlZChcImRpdlwiKSh7XG4gIGRpc3BsYXk6IFwiaW5saW5lLWZsZXhcIixcbiAgYWxpZ25JdGVtczogXCJjZW50ZXJcIixcbiAganVzdGlmeUNvbnRlbnQ6IFwiY2VudGVyXCIsXG4gIGhlaWdodDogXCI0MHB4XCIsXG4gIGJhY2tncm91bmRDb2xvcjogXCJ0cmFuc3BhcmVudFwiLFxuICBtYXJnaW5SaWdodDogdGhlbWUuc3BhY2UueHMsXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZEluZGljYXRvclRleHQgPSBzdHlsZWQoSHZUeXBvZ3JhcGh5KSh7XG4gIG1hcmdpblJpZ2h0OiB0aGVtZS5zcGFjZS54cyxcbn0pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkSW5kaWNhdG9yVW5pdCA9IHN0eWxlZChIdlR5cG9ncmFwaHkpKHtcbiAgYWxpZ25TZWxmOiBcImZsZXgtZW5kXCIsXG4gIHBhZGRpbmdCb3R0b206IFwiM3B4XCIsXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZENvbXBhcmlzb25Db21wb3NpdGlvbiA9IHN0eWxlZChcImRpdlwiKSh7XG4gIHdpZHRoOiBcIjEwMCVcIixcbiAgZGlzcGxheTogXCJmbGV4XCIsXG4gIGZsZXhEaXJlY3Rpb246IFwicm93XCIsXG4gIGZsZXhXcmFwOiBcIndyYXBcIixcbiAgYWxpZ25JdGVtczogXCJjZW50ZXJcIixcbn0pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkVHJlbmRJbmRpY2F0b3IgPSBzdHlsZWQoXCJkaXZcIikoe1xuICBtYXJnaW5SaWdodDogdGhlbWUuc3BhY2UueHMsXG4gIGZsb2F0OiBcInJpZ2h0XCIsXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZENvbXBhcmlzb25Db250YWluZXIgPSBzdHlsZWQoXCJkaXZcIikoe1xuICBtaW5IZWlnaHQ6IFwiMTZweFwiLFxuICBkaXNwbGF5OiBcImZsZXhcIixcbiAgYWxpZ25JdGVtczogXCJmbGV4LWVuZFwiLFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRJbnRlcm5hbFZpc3VhbENvbXBhcmlzb25EaXYgPSBzdHlsZWQoXCJkaXZcIikoe1xuICBtYXJnaW5SaWdodDogdGhlbWUuc3BhY2UueHMsXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZEludGVybmFsVmlzdWFsQ29tcGFyaXNvblR5cG9ncmFwaHkgPSBzdHlsZWQoSHZUeXBvZ3JhcGh5KSh7XG4gIG1hcmdpblJpZ2h0OiB0aGVtZS5zcGFjZS54cyxcbn0pO1xuIl19 */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-const StyledTrendIndicator = /* @__PURE__ */ _styled__default.default("div", process.env.NODE_ENV === "production" ? {
-  target: "e70l5p63"
-} : {
-  target: "e70l5p63",
-  label: "StyledTrendIndicator"
-})({
-  marginRight: uikitStyles.theme.space.xs,
-  float: "right"
-}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvS3BpL0twaS5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTJDb0MiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvaHYtdWlraXQtcmVhY3QvaHYtdWlraXQtcmVhY3QvcGFja2FnZXMvY29yZS9zcmMvY29tcG9uZW50cy9LcGkvS3BpLnN0eWxlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcblxuaW1wb3J0IHsgdGhlbWUgfSBmcm9tIFwiQGhpdGFjaGl2YW50YXJhL3Vpa2l0LXN0eWxlc1wiO1xuXG5pbXBvcnQgeyBIdlR5cG9ncmFwaHkgfSBmcm9tIFwiQGNvcmUvY29tcG9uZW50cy9UeXBvZ3JhcGh5XCI7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRSb290ID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgd2lkdGg6IFwiMTAwJVwiLFxuICBoZWlnaHQ6IFwiMTAwJVwiLFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRJbmRpY2F0b3JzQ29udGFpbmVyID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgZGlzcGxheTogXCJpbmxpbmUtZmxleFwiLFxuICBtaW5IZWlnaHQ6IFwiMTZweFwiLFxuICBhbGlnbkl0ZW1zOiBcImZsZXgtZW5kXCIsXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZFZpc3VhbEluZGljYXRvciA9IHN0eWxlZChcImRpdlwiKSh7XG4gIGRpc3BsYXk6IFwiaW5saW5lLWZsZXhcIixcbiAgYWxpZ25JdGVtczogXCJjZW50ZXJcIixcbiAganVzdGlmeUNvbnRlbnQ6IFwiY2VudGVyXCIsXG4gIGhlaWdodDogXCI0MHB4XCIsXG4gIGJhY2tncm91bmRDb2xvcjogXCJ0cmFuc3BhcmVudFwiLFxuICBtYXJnaW5SaWdodDogdGhlbWUuc3BhY2UueHMsXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZEluZGljYXRvclRleHQgPSBzdHlsZWQoSHZUeXBvZ3JhcGh5KSh7XG4gIG1hcmdpblJpZ2h0OiB0aGVtZS5zcGFjZS54cyxcbn0pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkSW5kaWNhdG9yVW5pdCA9IHN0eWxlZChIdlR5cG9ncmFwaHkpKHtcbiAgYWxpZ25TZWxmOiBcImZsZXgtZW5kXCIsXG4gIHBhZGRpbmdCb3R0b206IFwiM3B4XCIsXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZENvbXBhcmlzb25Db21wb3NpdGlvbiA9IHN0eWxlZChcImRpdlwiKSh7XG4gIHdpZHRoOiBcIjEwMCVcIixcbiAgZGlzcGxheTogXCJmbGV4XCIsXG4gIGZsZXhEaXJlY3Rpb246IFwicm93XCIsXG4gIGZsZXhXcmFwOiBcIndyYXBcIixcbiAgYWxpZ25JdGVtczogXCJjZW50ZXJcIixcbn0pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkVHJlbmRJbmRpY2F0b3IgPSBzdHlsZWQoXCJkaXZcIikoe1xuICBtYXJnaW5SaWdodDogdGhlbWUuc3BhY2UueHMsXG4gIGZsb2F0OiBcInJpZ2h0XCIsXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZENvbXBhcmlzb25Db250YWluZXIgPSBzdHlsZWQoXCJkaXZcIikoe1xuICBtaW5IZWlnaHQ6IFwiMTZweFwiLFxuICBkaXNwbGF5OiBcImZsZXhcIixcbiAgYWxpZ25JdGVtczogXCJmbGV4LWVuZFwiLFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRJbnRlcm5hbFZpc3VhbENvbXBhcmlzb25EaXYgPSBzdHlsZWQoXCJkaXZcIikoe1xuICBtYXJnaW5SaWdodDogdGhlbWUuc3BhY2UueHMsXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZEludGVybmFsVmlzdWFsQ29tcGFyaXNvblR5cG9ncmFwaHkgPSBzdHlsZWQoSHZUeXBvZ3JhcGh5KSh7XG4gIG1hcmdpblJpZ2h0OiB0aGVtZS5zcGFjZS54cyxcbn0pO1xuIl19 */");
-const StyledComparisonContainer = /* @__PURE__ */ _styled__default.default("div", process.env.NODE_ENV === "production" ? {
-  target: "e70l5p62"
-} : {
-  target: "e70l5p62",
-  label: "StyledComparisonContainer"
-})(process.env.NODE_ENV === "production" ? {
-  name: "h0c07j",
-  styles: "min-height:16px;display:flex;align-items:flex-end"
-} : {
-  name: "h0c07j",
-  styles: "min-height:16px;display:flex;align-items:flex-end",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvS3BpL0twaS5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWdEeUMiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvaHYtdWlraXQtcmVhY3QvaHYtdWlraXQtcmVhY3QvcGFja2FnZXMvY29yZS9zcmMvY29tcG9uZW50cy9LcGkvS3BpLnN0eWxlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcblxuaW1wb3J0IHsgdGhlbWUgfSBmcm9tIFwiQGhpdGFjaGl2YW50YXJhL3Vpa2l0LXN0eWxlc1wiO1xuXG5pbXBvcnQgeyBIdlR5cG9ncmFwaHkgfSBmcm9tIFwiQGNvcmUvY29tcG9uZW50cy9UeXBvZ3JhcGh5XCI7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRSb290ID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgd2lkdGg6IFwiMTAwJVwiLFxuICBoZWlnaHQ6IFwiMTAwJVwiLFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRJbmRpY2F0b3JzQ29udGFpbmVyID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgZGlzcGxheTogXCJpbmxpbmUtZmxleFwiLFxuICBtaW5IZWlnaHQ6IFwiMTZweFwiLFxuICBhbGlnbkl0ZW1zOiBcImZsZXgtZW5kXCIsXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZFZpc3VhbEluZGljYXRvciA9IHN0eWxlZChcImRpdlwiKSh7XG4gIGRpc3BsYXk6IFwiaW5saW5lLWZsZXhcIixcbiAgYWxpZ25JdGVtczogXCJjZW50ZXJcIixcbiAganVzdGlmeUNvbnRlbnQ6IFwiY2VudGVyXCIsXG4gIGhlaWdodDogXCI0MHB4XCIsXG4gIGJhY2tncm91bmRDb2xvcjogXCJ0cmFuc3BhcmVudFwiLFxuICBtYXJnaW5SaWdodDogdGhlbWUuc3BhY2UueHMsXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZEluZGljYXRvclRleHQgPSBzdHlsZWQoSHZUeXBvZ3JhcGh5KSh7XG4gIG1hcmdpblJpZ2h0OiB0aGVtZS5zcGFjZS54cyxcbn0pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkSW5kaWNhdG9yVW5pdCA9IHN0eWxlZChIdlR5cG9ncmFwaHkpKHtcbiAgYWxpZ25TZWxmOiBcImZsZXgtZW5kXCIsXG4gIHBhZGRpbmdCb3R0b206IFwiM3B4XCIsXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZENvbXBhcmlzb25Db21wb3NpdGlvbiA9IHN0eWxlZChcImRpdlwiKSh7XG4gIHdpZHRoOiBcIjEwMCVcIixcbiAgZGlzcGxheTogXCJmbGV4XCIsXG4gIGZsZXhEaXJlY3Rpb246IFwicm93XCIsXG4gIGZsZXhXcmFwOiBcIndyYXBcIixcbiAgYWxpZ25JdGVtczogXCJjZW50ZXJcIixcbn0pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkVHJlbmRJbmRpY2F0b3IgPSBzdHlsZWQoXCJkaXZcIikoe1xuICBtYXJnaW5SaWdodDogdGhlbWUuc3BhY2UueHMsXG4gIGZsb2F0OiBcInJpZ2h0XCIsXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZENvbXBhcmlzb25Db250YWluZXIgPSBzdHlsZWQoXCJkaXZcIikoe1xuICBtaW5IZWlnaHQ6IFwiMTZweFwiLFxuICBkaXNwbGF5OiBcImZsZXhcIixcbiAgYWxpZ25JdGVtczogXCJmbGV4LWVuZFwiLFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRJbnRlcm5hbFZpc3VhbENvbXBhcmlzb25EaXYgPSBzdHlsZWQoXCJkaXZcIikoe1xuICBtYXJnaW5SaWdodDogdGhlbWUuc3BhY2UueHMsXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZEludGVybmFsVmlzdWFsQ29tcGFyaXNvblR5cG9ncmFwaHkgPSBzdHlsZWQoSHZUeXBvZ3JhcGh5KSh7XG4gIG1hcmdpblJpZ2h0OiB0aGVtZS5zcGFjZS54cyxcbn0pO1xuIl19 */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-const StyledInternalVisualComparisonDiv = /* @__PURE__ */ _styled__default.default("div", process.env.NODE_ENV === "production" ? {
-  target: "e70l5p61"
-} : {
-  target: "e70l5p61",
-  label: "StyledInternalVisualComparisonDiv"
-})({
-  marginRight: uikitStyles.theme.space.xs
-}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvS3BpL0twaS5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXNEaUQiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvaHYtdWlraXQtcmVhY3QvaHYtdWlraXQtcmVhY3QvcGFja2FnZXMvY29yZS9zcmMvY29tcG9uZW50cy9LcGkvS3BpLnN0eWxlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcblxuaW1wb3J0IHsgdGhlbWUgfSBmcm9tIFwiQGhpdGFjaGl2YW50YXJhL3Vpa2l0LXN0eWxlc1wiO1xuXG5pbXBvcnQgeyBIdlR5cG9ncmFwaHkgfSBmcm9tIFwiQGNvcmUvY29tcG9uZW50cy9UeXBvZ3JhcGh5XCI7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRSb290ID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgd2lkdGg6IFwiMTAwJVwiLFxuICBoZWlnaHQ6IFwiMTAwJVwiLFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRJbmRpY2F0b3JzQ29udGFpbmVyID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgZGlzcGxheTogXCJpbmxpbmUtZmxleFwiLFxuICBtaW5IZWlnaHQ6IFwiMTZweFwiLFxuICBhbGlnbkl0ZW1zOiBcImZsZXgtZW5kXCIsXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZFZpc3VhbEluZGljYXRvciA9IHN0eWxlZChcImRpdlwiKSh7XG4gIGRpc3BsYXk6IFwiaW5saW5lLWZsZXhcIixcbiAgYWxpZ25JdGVtczogXCJjZW50ZXJcIixcbiAganVzdGlmeUNvbnRlbnQ6IFwiY2VudGVyXCIsXG4gIGhlaWdodDogXCI0MHB4XCIsXG4gIGJhY2tncm91bmRDb2xvcjogXCJ0cmFuc3BhcmVudFwiLFxuICBtYXJnaW5SaWdodDogdGhlbWUuc3BhY2UueHMsXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZEluZGljYXRvclRleHQgPSBzdHlsZWQoSHZUeXBvZ3JhcGh5KSh7XG4gIG1hcmdpblJpZ2h0OiB0aGVtZS5zcGFjZS54cyxcbn0pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkSW5kaWNhdG9yVW5pdCA9IHN0eWxlZChIdlR5cG9ncmFwaHkpKHtcbiAgYWxpZ25TZWxmOiBcImZsZXgtZW5kXCIsXG4gIHBhZGRpbmdCb3R0b206IFwiM3B4XCIsXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZENvbXBhcmlzb25Db21wb3NpdGlvbiA9IHN0eWxlZChcImRpdlwiKSh7XG4gIHdpZHRoOiBcIjEwMCVcIixcbiAgZGlzcGxheTogXCJmbGV4XCIsXG4gIGZsZXhEaXJlY3Rpb246IFwicm93XCIsXG4gIGZsZXhXcmFwOiBcIndyYXBcIixcbiAgYWxpZ25JdGVtczogXCJjZW50ZXJcIixcbn0pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkVHJlbmRJbmRpY2F0b3IgPSBzdHlsZWQoXCJkaXZcIikoe1xuICBtYXJnaW5SaWdodDogdGhlbWUuc3BhY2UueHMsXG4gIGZsb2F0OiBcInJpZ2h0XCIsXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZENvbXBhcmlzb25Db250YWluZXIgPSBzdHlsZWQoXCJkaXZcIikoe1xuICBtaW5IZWlnaHQ6IFwiMTZweFwiLFxuICBkaXNwbGF5OiBcImZsZXhcIixcbiAgYWxpZ25JdGVtczogXCJmbGV4LWVuZFwiLFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRJbnRlcm5hbFZpc3VhbENvbXBhcmlzb25EaXYgPSBzdHlsZWQoXCJkaXZcIikoe1xuICBtYXJnaW5SaWdodDogdGhlbWUuc3BhY2UueHMsXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZEludGVybmFsVmlzdWFsQ29tcGFyaXNvblR5cG9ncmFwaHkgPSBzdHlsZWQoSHZUeXBvZ3JhcGh5KSh7XG4gIG1hcmdpblJpZ2h0OiB0aGVtZS5zcGFjZS54cyxcbn0pO1xuIl19 */");
-const StyledInternalVisualComparisonTypography = /* @__PURE__ */ _styled__default.default(Typography.HvTypography, process.env.NODE_ENV === "production" ? {
-  target: "e70l5p60"
-} : {
-  target: "e70l5p60",
-  label: "StyledInternalVisualComparisonTypography"
-})({
-  marginRight: uikitStyles.theme.space.xs
-}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvS3BpL0twaS5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTBEd0QiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvaHYtdWlraXQtcmVhY3QvaHYtdWlraXQtcmVhY3QvcGFja2FnZXMvY29yZS9zcmMvY29tcG9uZW50cy9LcGkvS3BpLnN0eWxlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcblxuaW1wb3J0IHsgdGhlbWUgfSBmcm9tIFwiQGhpdGFjaGl2YW50YXJhL3Vpa2l0LXN0eWxlc1wiO1xuXG5pbXBvcnQgeyBIdlR5cG9ncmFwaHkgfSBmcm9tIFwiQGNvcmUvY29tcG9uZW50cy9UeXBvZ3JhcGh5XCI7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRSb290ID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgd2lkdGg6IFwiMTAwJVwiLFxuICBoZWlnaHQ6IFwiMTAwJVwiLFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRJbmRpY2F0b3JzQ29udGFpbmVyID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgZGlzcGxheTogXCJpbmxpbmUtZmxleFwiLFxuICBtaW5IZWlnaHQ6IFwiMTZweFwiLFxuICBhbGlnbkl0ZW1zOiBcImZsZXgtZW5kXCIsXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZFZpc3VhbEluZGljYXRvciA9IHN0eWxlZChcImRpdlwiKSh7XG4gIGRpc3BsYXk6IFwiaW5saW5lLWZsZXhcIixcbiAgYWxpZ25JdGVtczogXCJjZW50ZXJcIixcbiAganVzdGlmeUNvbnRlbnQ6IFwiY2VudGVyXCIsXG4gIGhlaWdodDogXCI0MHB4XCIsXG4gIGJhY2tncm91bmRDb2xvcjogXCJ0cmFuc3BhcmVudFwiLFxuICBtYXJnaW5SaWdodDogdGhlbWUuc3BhY2UueHMsXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZEluZGljYXRvclRleHQgPSBzdHlsZWQoSHZUeXBvZ3JhcGh5KSh7XG4gIG1hcmdpblJpZ2h0OiB0aGVtZS5zcGFjZS54cyxcbn0pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkSW5kaWNhdG9yVW5pdCA9IHN0eWxlZChIdlR5cG9ncmFwaHkpKHtcbiAgYWxpZ25TZWxmOiBcImZsZXgtZW5kXCIsXG4gIHBhZGRpbmdCb3R0b206IFwiM3B4XCIsXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZENvbXBhcmlzb25Db21wb3NpdGlvbiA9IHN0eWxlZChcImRpdlwiKSh7XG4gIHdpZHRoOiBcIjEwMCVcIixcbiAgZGlzcGxheTogXCJmbGV4XCIsXG4gIGZsZXhEaXJlY3Rpb246IFwicm93XCIsXG4gIGZsZXhXcmFwOiBcIndyYXBcIixcbiAgYWxpZ25JdGVtczogXCJjZW50ZXJcIixcbn0pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkVHJlbmRJbmRpY2F0b3IgPSBzdHlsZWQoXCJkaXZcIikoe1xuICBtYXJnaW5SaWdodDogdGhlbWUuc3BhY2UueHMsXG4gIGZsb2F0OiBcInJpZ2h0XCIsXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZENvbXBhcmlzb25Db250YWluZXIgPSBzdHlsZWQoXCJkaXZcIikoe1xuICBtaW5IZWlnaHQ6IFwiMTZweFwiLFxuICBkaXNwbGF5OiBcImZsZXhcIixcbiAgYWxpZ25JdGVtczogXCJmbGV4LWVuZFwiLFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRJbnRlcm5hbFZpc3VhbENvbXBhcmlzb25EaXYgPSBzdHlsZWQoXCJkaXZcIikoe1xuICBtYXJnaW5SaWdodDogdGhlbWUuc3BhY2UueHMsXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZEludGVybmFsVmlzdWFsQ29tcGFyaXNvblR5cG9ncmFwaHkgPSBzdHlsZWQoSHZUeXBvZ3JhcGh5KSh7XG4gIG1hcmdpblJpZ2h0OiB0aGVtZS5zcGFjZS54cyxcbn0pO1xuIl19 */");
-exports.StyledComparisonComposition = StyledComparisonComposition;
-exports.StyledComparisonContainer = StyledComparisonContainer;
-exports.StyledIndicatorText = StyledIndicatorText;
-exports.StyledIndicatorUnit = StyledIndicatorUnit;
-exports.StyledIndicatorsContainer = StyledIndicatorsContainer;
-exports.StyledInternalVisualComparisonDiv = StyledInternalVisualComparisonDiv;
-exports.StyledInternalVisualComparisonTypography = StyledInternalVisualComparisonTypography;
-exports.StyledRoot = StyledRoot;
-exports.StyledTrendIndicator = StyledTrendIndicator;
-exports.StyledVisualIndicator = StyledVisualIndicator;
+exports.staticClasses = staticClasses;
+exports.useClasses = useClasses;
 //# sourceMappingURL=Kpi.styles.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Kpi.styles.cjs","sources":["../../../../src/components/Kpi/Kpi.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { HvTypography } from \"@core/components/Typography\";\n\nexport const StyledRoot = styled(\"div\")({\n  width: \"100%\",\n  height: \"100%\",\n});\n\nexport const StyledIndicatorsContainer = styled(\"div\")({\n  display: \"inline-flex\",\n  minHeight: \"16px\",\n  alignItems: \"flex-end\",\n});\n\nexport const StyledVisualIndicator = styled(\"div\")({\n  display: \"inline-flex\",\n  alignItems: \"center\",\n  justifyContent: \"center\",\n  height: \"40px\",\n  backgroundColor: \"transparent\",\n  marginRight: theme.space.xs,\n});\n\nexport const StyledIndicatorText = styled(HvTypography)({\n  marginRight: theme.space.xs,\n});\n\nexport const StyledIndicatorUnit = styled(HvTypography)({\n  alignSelf: \"flex-end\",\n  paddingBottom: \"3px\",\n});\n\nexport const StyledComparisonComposition = styled(\"div\")({\n  width: \"100%\",\n  display: \"flex\",\n  flexDirection: \"row\",\n  flexWrap: \"wrap\",\n  alignItems: \"center\",\n});\n\nexport const StyledTrendIndicator = styled(\"div\")({\n  marginRight: theme.space.xs,\n  float: \"right\",\n});\n\nexport const StyledComparisonContainer = styled(\"div\")({\n  minHeight: \"16px\",\n  display: \"flex\",\n  alignItems: \"flex-end\",\n});\n\nexport const StyledInternalVisualComparisonDiv = styled(\"div\")({\n  marginRight: theme.space.xs,\n});\n\nexport const StyledInternalVisualComparisonTypography = styled(HvTypography)({\n  marginRight: theme.space.xs,\n});\n"],"names":["StyledRoot","_styled","process","env","NODE_ENV","target","label","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","StyledIndicatorsContainer","StyledVisualIndicator","display","alignItems","justifyContent","height","backgroundColor","marginRight","theme","space","xs","StyledIndicatorText","HvTypography","StyledIndicatorUnit","StyledComparisonComposition","StyledTrendIndicator","float","StyledComparisonContainer","StyledInternalVisualComparisonDiv","StyledInternalVisualComparisonTypography"],"mappings":"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"}
+{"version":3,"file":"Kpi.styles.cjs","sources":["../../../../src/components/Kpi/Kpi.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvKpi\", {\n  root: { width: \"100%\", height: \"100%\" },\n  visualIndicatorContainer: {\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    height: \"40px\",\n    backgroundColor: \"transparent\",\n  },\n  comparisons: {},\n  comparisonContainer: {\n    minHeight: \"16px\",\n    display: \"flex\",\n    alignItems: \"flex-end\",\n  },\n  comparisonComposition: {\n    width: \"100%\",\n    display: \"flex\",\n    flexDirection: \"row\",\n    flexWrap: \"wrap\",\n    alignItems: \"center\",\n  },\n  indicatorsContainer: {\n    display: \"inline-flex\",\n    minHeight: \"16px\",\n    alignItems: \"flex-end\",\n  },\n  indicatorText: {},\n  indicatorUnit: { alignSelf: \"flex-end\", paddingBottom: \"3px\" },\n  spacingToTheRight: { marginRight: theme.space.xs },\n  trendLine: { float: \"right\" },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","width","height","visualIndicatorContainer","display","alignItems","justifyContent","backgroundColor","comparisons","comparisonContainer","minHeight","comparisonComposition","flexDirection","flexWrap","indicatorsContainer","indicatorText","indicatorUnit","alignSelf","paddingBottom","spacingToTheRight","marginRight","theme","space","xs","trendLine","float"],"mappings":";;;;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,SAAS;AAAA,EAClEC,MAAM;AAAA,IAAEC,OAAO;AAAA,IAAQC,QAAQ;AAAA,EAAO;AAAA,EACtCC,0BAA0B;AAAA,IACxBC,SAAS;AAAA,IACTC,YAAY;AAAA,IACZC,gBAAgB;AAAA,IAChBJ,QAAQ;AAAA,IACRK,iBAAiB;AAAA,EACnB;AAAA,EACAC,aAAa,CAAC;AAAA,EACdC,qBAAqB;AAAA,IACnBC,WAAW;AAAA,IACXN,SAAS;AAAA,IACTC,YAAY;AAAA,EACd;AAAA,EACAM,uBAAuB;AAAA,IACrBV,OAAO;AAAA,IACPG,SAAS;AAAA,IACTQ,eAAe;AAAA,IACfC,UAAU;AAAA,IACVR,YAAY;AAAA,EACd;AAAA,EACAS,qBAAqB;AAAA,IACnBV,SAAS;AAAA,IACTM,WAAW;AAAA,IACXL,YAAY;AAAA,EACd;AAAA,EACAU,eAAe,CAAC;AAAA,EAChBC,eAAe;AAAA,IAAEC,WAAW;AAAA,IAAYC,eAAe;AAAA,EAAM;AAAA,EAC7DC,mBAAmB;AAAA,IAAEC,aAAaC,YAAAA,MAAMC,MAAMC;AAAAA,EAAG;AAAA,EACjDC,WAAW;AAAA,IAAEC,OAAO;AAAA,EAAQ;AAC9B,CAAC;;;"}

package/dist/cjs/components/Link/Link.cjs

@@ -1,31 +1,34 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const clsx = require("clsx");
 const useDefaultProps = require("../../hooks/useDefaultProps.cjs");
 const Link_styles = require("./Link.styles.cjs");
-const linkClasses = require("./linkClasses.cjs");
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const HvLink = (props) => {
   const {
     onClick,
-    classes,
+    classes: classesProp,
     className,
     route,
     data,
     children,
     ...others
   } = useDefaultProps.useDefaultProps("HvLink", props);
+  const {
+    classes,
+    cx
+  } = Link_styles.useClasses(classesProp);
   const handleClick = (event) => {
     event.preventDefault();
     onClick == null ? void 0 : onClick(event, data);
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(Link_styles.StyledA, {
+  return /* @__PURE__ */ jsxRuntime.jsx("a", {
     href: route,
     onClick: onClick != null ? handleClick : void 0,
-    className: clsx.clsx(className, linkClasses.default.a, classes == null ? void 0 : classes.a),
+    className: cx(classes.a, className),
     ...others,
     children
   });
 };
+exports.linkClasses = Link_styles.staticClasses;
 exports.HvLink = HvLink;
 //# sourceMappingURL=Link.cjs.map

package/dist/cjs/components/Link/Link.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Link.cjs","sources":["../../../../src/components/Link/Link.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { MouseEventHandler } from \"react\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\n\nimport { StyledA } from \"./Link.styles\";\nimport linkClasses, { HvLinkClasses } from \"./linkClasses\";\n\nexport interface HvLinkProps extends HvBaseProps<HTMLAnchorElement, \"onClick\"> {\n  onClick?: (\n    event: MouseEventHandler<HTMLAnchorElement>,\n    data: any\n  ) => void | undefined;\n  route?: string;\n  data?: any;\n  children: any;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvLinkClasses;\n}\n\nexport const HvLink = (props: HvLinkProps) => {\n  const { onClick, classes, className, route, data, children, ...others } =\n    useDefaultProps(\"HvLink\", props);\n\n  const handleClick = (event) => {\n    event.preventDefault();\n\n    onClick?.(event, data);\n  };\n\n  return (\n    <StyledA\n      href={route}\n      onClick={onClick != null ? handleClick : undefined}\n      className={clsx(className, linkClasses.a, classes?.a)}\n      {...others}\n    >\n      {children}\n    </StyledA>\n  );\n};\n"],"names":["HvLink","props","onClick","classes","className","route","data","children","others","useDefaultProps","handleClick","event","preventDefault","StyledA","href","undefined","clsx","linkClasses","a"],"mappings":";;;;;;;AAsBaA,MAAAA,SAASA,CAACC,UAAuB;AACtC,QAAA;AAAA,IAAEC;AAAAA,IAASC;AAAAA,IAASC;AAAAA,IAAWC;AAAAA,IAAOC;AAAAA,IAAMC;AAAAA,IAAU,GAAGC;AAAAA,EAAAA,IAC7DC,gBAAgB,gBAAA,UAAUR,KAAK;AAEjC,QAAMS,cAAeC,CAAU,UAAA;AAC7BA,UAAMC,eAAe;AAErBV,uCAAUS,OAAOL;AAAAA,EAAI;AAGvB,wCACGO,YAAAA,SAAO;AAAA,IACNC,MAAMT;AAAAA,IACNH,SAASA,WAAW,OAAOQ,cAAcK;AAAAA,IACzCX,WAAWY,KAAKZ,KAAAA,WAAWa,YAAYC,QAAAA,GAAGf,mCAASe,CAAC;AAAA,IAAE,GAClDV;AAAAA,IAAMD;AAAAA,EAAAA,CAGH;AAEb;;"}
+{"version":3,"file":"Link.cjs","sources":["../../../../src/components/Link/Link.tsx"],"sourcesContent":["import { MouseEventHandler } from \"react\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Link.styles\";\n\nexport { staticClasses as linkClasses };\n\nexport type HvLinkClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvLinkProps extends HvBaseProps<HTMLAnchorElement, \"onClick\"> {\n  onClick?: (\n    event: MouseEventHandler<HTMLAnchorElement>,\n    data: any\n  ) => void | undefined;\n  route?: string;\n  data?: any;\n  children: any;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvLinkClasses;\n}\n\nexport const HvLink = (props: HvLinkProps) => {\n  const {\n    onClick,\n    classes: classesProp,\n    className,\n    route,\n    data,\n    children,\n    ...others\n  } = useDefaultProps(\"HvLink\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const handleClick = (event) => {\n    event.preventDefault();\n\n    onClick?.(event, data);\n  };\n\n  return (\n    <a\n      href={route}\n      onClick={onClick != null ? handleClick : undefined}\n      className={cx(classes.a, className)}\n      {...others}\n    >\n      {children}\n    </a>\n  );\n};\n"],"names":["HvLink","props","onClick","classes","classesProp","className","route","data","children","others","useDefaultProps","cx","useClasses","handleClick","event","preventDefault","href","undefined","a"],"mappings":";;;;;AAwBaA,MAAAA,SAASA,CAACC,UAAuB;AACtC,QAAA;AAAA,IACJC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,UAAUT,KAAK;AAE7B,QAAA;AAAA,IAAEE;AAAAA,IAASQ;AAAAA,EAAAA,IAAOC,YAAAA,WAAWR,WAAW;AAE9C,QAAMS,cAAeC,CAAU,UAAA;AAC7BA,UAAMC,eAAe;AAErBb,uCAAUY,OAAOP;AAAAA,EAAI;AAGvB,wCACE,KAAA;AAAA,IACES,MAAMV;AAAAA,IACNJ,SAASA,WAAW,OAAOW,cAAcI;AAAAA,IACzCZ,WAAWM,GAAGR,QAAQe,GAAGb,SAAS;AAAA,IAAE,GAChCI;AAAAA,IAAMD;AAAAA,EAAAA,CAGT;AAEP;;;"}

package/dist/cjs/components/Link/Link.styles.cjs

@@ -1,22 +1,21 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const _styled = require("@emotion/styled/base");
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const focusUtils = require("../../utils/focusUtils.cjs");
-const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
-const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
-const StyledA = /* @__PURE__ */ _styled__default.default("a", process.env.NODE_ENV === "production" ? {
-  target: "e18zed7a0"
-} : {
-  target: "e18zed7a0",
-  label: "StyledA"
-})({
-  ...uikitStyles.theme.typography.label,
-  textDecoration: "underline",
-  color: uikitStyles.theme.colors.primary,
-  "&:focus-visible": {
-    ...focusUtils.outlineStyles
+const classes = require("../../utils/classes.cjs");
+const {
+  staticClasses,
+  useClasses
+} = classes.createClasses("HvLink", {
+  a: {
+    ...uikitStyles.theme.typography.label,
+    textDecoration: "underline",
+    color: uikitStyles.theme.colors.primary,
+    "&:focus-visible": {
+      ...focusUtils.outlineStyles
+    }
   }
-}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvTGluay9MaW5rLnN0eWxlcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBUXVCIiwiZmlsZSI6Ii9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvTGluay9MaW5rLnN0eWxlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcblxuaW1wb3J0IHsgdGhlbWUgfSBmcm9tIFwiQGhpdGFjaGl2YW50YXJhL3Vpa2l0LXN0eWxlc1wiO1xuXG5pbXBvcnQgeyBDU1NQcm9wZXJ0aWVzIH0gZnJvbSBcInJlYWN0XCI7XG5cbmltcG9ydCB7IG91dGxpbmVTdHlsZXMgfSBmcm9tIFwiQGNvcmUvdXRpbHMvZm9jdXNVdGlsc1wiO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkQSA9IHN0eWxlZChcImFcIikoe1xuICAuLi4odGhlbWUudHlwb2dyYXBoeS5sYWJlbCBhcyBDU1NQcm9wZXJ0aWVzKSxcbiAgdGV4dERlY29yYXRpb246IFwidW5kZXJsaW5lXCIsXG4gIGNvbG9yOiB0aGVtZS5jb2xvcnMucHJpbWFyeSxcbiAgXCImOmZvY3VzLXZpc2libGVcIjogeyAuLi5vdXRsaW5lU3R5bGVzIH0sXG59KTtcbiJdfQ== */");
-exports.StyledA = StyledA;
+});
+exports.staticClasses = staticClasses;
+exports.useClasses = useClasses;
 //# sourceMappingURL=Link.styles.cjs.map