@hitachivantara/uikit-react-core 5.18.1 → 5.18.3

package/dist/esm/components/TimeAgo/TimeAgo.js

@@ -1,11 +1,12 @@
-import { clsx } from "clsx";
 import isEmpty from "lodash/isEmpty";
-import timeAgoClasses from "./timeAgoClasses.js";
+import { useClasses } from "./TimeAgo.styles.js";
+import { staticClasses } from "./TimeAgo.styles.js";
 import useTimeAgo from "./useTimeAgo.js";
 import { jsx, Fragment } from "@emotion/react/jsx-runtime";
 import { HvTypography } from "../Typography/Typography.js";
 const HvTimeAgo = ({
-  classes,
+  classes: classesProp,
+  className,
   timestamp,
   locale: localeProp = "en",
   component: Component = HvTypography,
@@ -15,21 +16,28 @@ const HvTimeAgo = ({
   justText = false,
   ...others
 }) => {
+  const {
+    classes,
+    cx
+  } = useClasses(classesProp);
   const locale = isEmpty(localeProp) ? "en" : localeProp;
   const timeAgo = useTimeAgo(timestamp, {
     locale,
     disableRefresh,
     showSeconds
   });
-  return justText && timestamp ? /* @__PURE__ */ jsx(Fragment, {
-    children: "timeAgo"
-  }) : /* @__PURE__ */ jsx(Component, {
-    className: clsx(classes == null ? void 0 : classes.root, timeAgoClasses.root),
+  if (justText && timestamp)
+    return /* @__PURE__ */ jsx(Fragment, {
+      children: timeAgo
+    });
+  return /* @__PURE__ */ jsx(Component, {
+    className: cx(classes.root, className),
     ...others,
     children: !timestamp ? emptyElement : timeAgo
   });
 };
 export {
-  HvTimeAgo
+  HvTimeAgo,
+  staticClasses as timeAgoClasses
 };
 //# sourceMappingURL=TimeAgo.js.map

package/dist/esm/components/TimeAgo/TimeAgo.js.map

@@ -1 +1 @@
-{"version":3,"file":"TimeAgo.js","sources":["../../../../src/components/TimeAgo/TimeAgo.tsx"],"sourcesContent":["import { HvTypography } from \"@core/components\";\nimport { HvBaseProps } from \"@core/types\";\nimport { clsx } from \"clsx\";\nimport isEmpty from \"lodash/isEmpty\";\nimport timeAgoClasses, { HvTimeAgoClasses } from \"./timeAgoClasses\";\nimport useTimeAgo from \"./useTimeAgo\";\n\nexport interface HvTimeAgoProps extends HvBaseProps<HTMLElement, \"children\"> {\n  /**\n   * The timestamp to format, in seconds or milliseconds.\n   * Defaults to `emptyElement` if value is null or 0\n   */\n  timestamp?: number;\n  /**\n   * The locale to be used. Should be on of the dayjs supported locales and explicitly imported\n   * @see https://day.js.org/docs/en/i18n/i18n\n   */\n  locale?: string;\n  /**\n   * The component used for the root node. Either a string to use a HTML element or a component.\n   * Defaults to `HvTypography`.\n   */\n  component?: React.ElementType<React.HTMLAttributes<HTMLElement>>;\n  /**\n   * The element to render when the timestamp is null or 0\n   * Defaults to `—` (Em Dash)\n   */\n  emptyElement?: React.ReactNode;\n  /**\n   * Disables periodic date refreshes\n   */\n  disableRefresh?: boolean;\n  /**\n   * Whether to show seconds in the rendered time\n   */\n  showSeconds?: boolean;\n  /**\n   * Whether the component should render just the string\n   * Consider using `useTimeAgo` instead\n   */\n  justText?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvTimeAgoClasses;\n}\n\n/**\n * The HvTimeAgo component implements the Design System relative time format guidelines.\n */\nexport const HvTimeAgo = ({\n  classes,\n  timestamp,\n  locale: localeProp = \"en\",\n  component: Component = HvTypography,\n  emptyElement = \"—\",\n  disableRefresh = false,\n  showSeconds = false,\n  justText = false,\n  ...others\n}: HvTimeAgoProps) => {\n  const locale = isEmpty(localeProp) ? \"en\" : localeProp;\n  const timeAgo = useTimeAgo(timestamp, {\n    locale,\n    disableRefresh,\n    showSeconds,\n  });\n\n  return justText && timestamp ? (\n    <>timeAgo</>\n  ) : (\n    <Component className={clsx(classes?.root, timeAgoClasses.root)} {...others}>\n      {!timestamp ? emptyElement : timeAgo}\n    </Component>\n  );\n};\n"],"names":["HvTimeAgo","classes","timestamp","locale","localeProp","component","Component","HvTypography","emptyElement","disableRefresh","showSeconds","justText","others","isEmpty","timeAgo","useTimeAgo","_jsx","_Fragment","children","className","clsx","root","timeAgoClasses"],"mappings":";;;;;;AAgDO,MAAMA,YAAYA,CAAC;AAAA,EACxBC;AAAAA,EACAC;AAAAA,EACAC,QAAQC,aAAa;AAAA,EACrBC,WAAWC,YAAYC;AAAAA,EACvBC,eAAe;AAAA,EACfC,iBAAiB;AAAA,EACjBC,cAAc;AAAA,EACdC,WAAW;AAAA,EACX,GAAGC;AACW,MAAM;AACpB,QAAMT,SAASU,QAAQT,UAAU,IAAI,OAAOA;AACtCU,QAAAA,UAAUC,WAAWb,WAAW;AAAA,IACpCC;AAAAA,IACAM;AAAAA,IACAC;AAAAA,EAAAA,CACD;AAEMC,SAAAA,YAAYT,YACjBc,oBAAAC,UAAA;AAAA,IAAAC,UAAE;AAAA,EAAA,CAAS,IAEXF,oBAACV,WAAS;AAAA,IAACa,WAAWC,KAAKnB,mCAASoB,MAAMC,eAAeD,IAAI;AAAA,IAAE,GAAKT;AAAAA,IAAMM,UACvE,CAAChB,YAAYM,eAAeM;AAAAA,EAAAA,CACpB;AAEf;"}
+{"version":3,"file":"TimeAgo.js","sources":["../../../../src/components/TimeAgo/TimeAgo.tsx"],"sourcesContent":["import { HvTypography } from \"@core/components\";\nimport { HvBaseProps } from \"@core/types\";\nimport isEmpty from \"lodash/isEmpty\";\nimport { ExtractNames } from \"@core/utils\";\nimport { staticClasses, useClasses } from \"./TimeAgo.styles\";\nimport useTimeAgo from \"./useTimeAgo\";\n\nexport { staticClasses as timeAgoClasses };\n\nexport type HvTimeAgoClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTimeAgoProps extends HvBaseProps<HTMLElement, \"children\"> {\n  /**\n   * The timestamp to format, in seconds or milliseconds.\n   * Defaults to `emptyElement` if value is null or 0\n   */\n  timestamp?: number;\n  /**\n   * The locale to be used. Should be on of the dayjs supported locales and explicitly imported\n   * @see https://day.js.org/docs/en/i18n/i18n\n   */\n  locale?: string;\n  /**\n   * The component used for the root node. Either a string to use a HTML element or a component.\n   * Defaults to `HvTypography`.\n   */\n  component?: React.ElementType<React.HTMLAttributes<HTMLElement>>;\n  /**\n   * The element to render when the timestamp is null or 0\n   * Defaults to `—` (Em Dash)\n   */\n  emptyElement?: React.ReactNode;\n  /**\n   * Disables periodic date refreshes\n   */\n  disableRefresh?: boolean;\n  /**\n   * Whether to show seconds in the rendered time\n   */\n  showSeconds?: boolean;\n  /**\n   * Whether the component should render just the string\n   * Consider using `useTimeAgo` instead\n   */\n  justText?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvTimeAgoClasses;\n}\n\n/**\n * The HvTimeAgo component implements the Design System relative time format guidelines.\n */\nexport const HvTimeAgo = ({\n  classes: classesProp,\n  className,\n  timestamp,\n  locale: localeProp = \"en\",\n  component: Component = HvTypography,\n  emptyElement = \"—\",\n  disableRefresh = false,\n  showSeconds = false,\n  justText = false,\n  ...others\n}: HvTimeAgoProps) => {\n  const { classes, cx } = useClasses(classesProp);\n  const locale = isEmpty(localeProp) ? \"en\" : localeProp;\n  const timeAgo = useTimeAgo(timestamp, {\n    locale,\n    disableRefresh,\n    showSeconds,\n  });\n\n  // eslint-disable-next-line react/jsx-no-useless-fragment\n  if (justText && timestamp) return <>{timeAgo}</>;\n\n  return (\n    <Component className={cx(classes.root, className)} {...others}>\n      {!timestamp ? emptyElement : timeAgo}\n    </Component>\n  );\n};\n"],"names":["HvTimeAgo","classes","classesProp","className","timestamp","locale","localeProp","component","Component","HvTypography","emptyElement","disableRefresh","showSeconds","justText","others","cx","useClasses","isEmpty","timeAgo","useTimeAgo","_Fragment","children","root"],"mappings":";;;;;;AAoDO,MAAMA,YAAYA,CAAC;AAAA,EACxBC,SAASC;AAAAA,EACTC;AAAAA,EACAC;AAAAA,EACAC,QAAQC,aAAa;AAAA,EACrBC,WAAWC,YAAYC;AAAAA,EACvBC,eAAe;AAAA,EACfC,iBAAiB;AAAA,EACjBC,cAAc;AAAA,EACdC,WAAW;AAAA,EACX,GAAGC;AACW,MAAM;AACd,QAAA;AAAA,IAAEb;AAAAA,IAASc;AAAAA,EAAAA,IAAOC,WAAWd,WAAW;AAC9C,QAAMG,SAASY,QAAQX,UAAU,IAAI,OAAOA;AACtCY,QAAAA,UAAUC,WAAWf,WAAW;AAAA,IACpCC;AAAAA,IACAM;AAAAA,IACAC;AAAAA,EAAAA,CACD;AAGD,MAAIC,YAAYT;AAAW,+BAAOgB,UAAA;AAAA,MAAAC,UAAGH;AAAAA,IAAAA,CAAU;AAE/C,6BACGV,WAAS;AAAA,IAACL,WAAWY,GAAGd,QAAQqB,MAAMnB,SAAS;AAAA,IAAE,GAAKW;AAAAA,IAAMO,UAC1D,CAACjB,YAAYM,eAAeQ;AAAAA,EAAAA,CACpB;AAEf;"}

package/dist/esm/components/TimeAgo/TimeAgo.styles.js

@@ -0,0 +1,12 @@
+import { createClasses } from "../../utils/classes.js";
+const {
+  staticClasses,
+  useClasses
+} = createClasses("HvTimeAgo", {
+  root: {}
+});
+export {
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=TimeAgo.styles.js.map

package/dist/esm/components/TimeAgo/TimeAgo.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimeAgo.styles.js","sources":["../../../../src/components/TimeAgo/TimeAgo.styles.ts"],"sourcesContent":["import { createClasses } from \"@core/utils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTimeAgo\", {\n  root: {},\n});\n"],"names":["staticClasses","useClasses","createClasses","root"],"mappings":";AAEa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,aAAa;AAAA,EACtEC,MAAM,CAAC;AACT,CAAC;"}

package/dist/esm/components/Typography/Typography.js

@@ -1,26 +1,10 @@
-import _styled from "@emotion/styled/base";
-import { forwardRef, useMemo } from "react";
-import { transientOptions } from "../../utils/transientOptions.js";
-import { theme } from "@hitachivantara/uikit-styles";
-import { clsx } from "clsx";
+import { forwardRef } from "react";
 import { mapVariant } from "./utils.js";
-import typographyClasses from "./typographyClasses.js";
+import { useClasses } from "./Typography.styles.js";
+import { staticClasses } from "./Typography.styles.js";
 import { jsx } from "@emotion/react/jsx-runtime";
 import { useTheme } from "../../hooks/useTheme.js";
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function(target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
+const typographyVariants = ["display", "title1", "title2", "title3", "title4", "body", "label", "caption1", "caption2"];
 const HvTypographyMap = {
   display: "h1",
   title1: "h1",
@@ -46,134 +30,40 @@ const HvTypographyMap = {
   vizTextDisabled: "p",
   xsInlineLink: "p"
 };
-const getStyledComponent = (c) => /* @__PURE__ */ _styled(c, process.env.NODE_ENV === "production" ? _extends({}, {
-  target: "e1tnpalo0"
-}, transientOptions) : _extends({}, {
-  target: "e1tnpalo0",
-  label: "getStyledComponent"
-}, transientOptions))(({
-  $variant,
-  $link = false,
-  $disabled = false,
-  $noWrap = false
-}) => ({
-  ...$variant === "display" && {
-    ...theme.typography.display
-  },
-  ...$variant === "title1" && {
-    ...theme.typography.title1
-  },
-  ...$variant === "title2" && {
-    ...theme.typography.title2
-  },
-  ...$variant === "title3" && {
-    ...theme.typography.title3
-  },
-  ...$variant === "title4" && {
-    ...theme.typography.title4
-  },
-  ...$variant === "body" && {
-    ...theme.typography.body
-  },
-  ...$variant === "label" && {
-    ...theme.typography.label
-  },
-  ...$variant === "caption1" && {
-    ...theme.typography.caption1
-  },
-  ...$variant === "caption2" && {
-    ...theme.typography.caption2
-  },
-  // LEGACY
-  ...$variant === "5xlTitle" && {
-    ...theme.typography["5xlTitle"]
-  },
-  ...$variant === "4xlTitle" && {
-    ...theme.typography["4xlTitle"]
-  },
-  ...$variant === "xxlTitle" && {
-    ...theme.typography.xxlTitle
-  },
-  ...$variant === "lTitle" && {
-    ...theme.typography.lTitle
-  },
-  ...$variant === "sTitle" && {
-    ...theme.typography.sTitle
-  },
-  ...$variant === "xxsTitle" && {
-    ...theme.typography.xxsTitle
-  },
-  ...$variant === "sectionTitle" && {
-    ...theme.typography.sectionTitle,
-    textTransform: "uppercase"
-  },
-  ...$variant === "placeholderText" && {
-    ...theme.typography.placeholderText
-  },
-  ...$variant === "link" && {
-    ...theme.typography.link,
-    textDecoration: "underline",
-    cursor: "pointer"
-  },
-  ...$variant === "disabledText" && {
-    ...theme.typography.disabledText
-  },
-  ...$variant === "selectedNavText" && {
-    ...theme.typography.selectedNavText
-  },
-  ...$variant === "vizTextDisabled" && {
-    ...theme.typography.vizTextDisabled
-  },
-  ...$variant === "xsInlineLink" && {
-    ...theme.typography.xsInlineLink
-  },
-  fontFamily: theme.fontFamily.body,
-  // ADDED PROPS
-  ...$link && {
-    color: theme.colors.primary,
-    textDecoration: "underline",
-    cursor: "pointer"
-  },
-  ...$disabled && {
-    color: theme.colors.secondary_60
-  },
-  ...$noWrap && {
-    overflow: "hidden",
-    textOverflow: "ellipsis",
-    whiteSpace: "nowrap"
-  }
-}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvVHlwb2dyYXBoeS9UeXBvZ3JhcGh5LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE2RUUiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvaHYtdWlraXQtcmVhY3QvaHYtdWlraXQtcmVhY3QvcGFja2FnZXMvY29yZS9zcmMvY29tcG9uZW50cy9UeXBvZ3JhcGh5L1R5cG9ncmFwaHkudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgZm9yd2FyZFJlZixcbiAgdXNlTWVtbyxcbiAgQ1NTUHJvcGVydGllcyxcbiAgQWxsSFRNTEF0dHJpYnV0ZXMsXG4gIFJlZixcbn0gZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQgeyBIdkJhc2VQcm9wcyB9IGZyb20gXCJAY29yZS90eXBlc1wiO1xuaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyB0cmFuc2llbnRPcHRpb25zIH0gZnJvbSBcIkBjb3JlL3V0aWxzL3RyYW5zaWVudE9wdGlvbnNcIjtcbmltcG9ydCB7IHRoZW1lIH0gZnJvbSBcIkBoaXRhY2hpdmFudGFyYS91aWtpdC1zdHlsZXNcIjtcbmltcG9ydCB7IGNsc3ggfSBmcm9tIFwiY2xzeFwiO1xuaW1wb3J0IHsgdXNlVGhlbWUgfSBmcm9tIFwiQGNvcmUvaG9va3NcIjtcbmltcG9ydCB7IG1hcFZhcmlhbnQgfSBmcm9tIFwiLi91dGlsc1wiO1xuaW1wb3J0IHR5cG9ncmFwaHlDbGFzc2VzLCB7IEh2VHlwb2dyYXBoeUNsYXNzZXMgfSBmcm9tIFwiLi90eXBvZ3JhcGh5Q2xhc3Nlc1wiO1xuXG5leHBvcnQgdHlwZSBIdlR5cG9ncmFwaHlWYXJpYW50cyA9XG4gIHwgXCJkaXNwbGF5XCJcbiAgfCBcInRpdGxlMVwiXG4gIHwgXCJ0aXRsZTJcIlxuICB8IFwidGl0bGUzXCJcbiAgfCBcInRpdGxlNFwiXG4gIHwgXCJib2R5XCJcbiAgfCBcImxhYmVsXCJcbiAgfCBcImNhcHRpb24xXCJcbiAgfCBcImNhcHRpb24yXCI7XG5cbi8qKiBAZGVwcmVjYXRlZCAqL1xuZXhwb3J0IHR5cGUgSHZUeXBvZ3JhcGh5TGVnYWN5VmFyaWFudHMgPVxuICB8IFwiNXhsVGl0bGVcIlxuICB8IFwiNHhsVGl0bGVcIlxuICB8IFwiM3hsVGl0bGVcIlxuICB8IFwieHhsVGl0bGVcIlxuICB8IFwieGxUaXRsZVwiXG4gIHwgXCJsVGl0bGVcIlxuICB8IFwibVRpdGxlXCJcbiAgfCBcInNUaXRsZVwiXG4gIHwgXCJ4c1RpdGxlXCJcbiAgfCBcInh4c1RpdGxlXCJcbiAgfCBcInNlY3Rpb25UaXRsZVwiXG4gIHwgXCJoaWdobGlnaHRUZXh0XCJcbiAgfCBcIm5vcm1hbFRleHRcIlxuICB8IFwicGxhY2Vob2xkZXJUZXh0XCJcbiAgfCBcImxpbmtcIlxuICB8IFwiZGlzYWJsZWRUZXh0XCJcbiAgfCBcInNlbGVjdGVkTmF2VGV4dFwiXG4gIHwgXCJ2aXpUZXh0XCJcbiAgfCBcInZpelRleHREaXNhYmxlZFwiXG4gIHwgXCJ4c0lubGluZUxpbmtcIjtcblxuY29uc3QgSHZUeXBvZ3JhcGh5TWFwID0ge1xuICBkaXNwbGF5OiBcImgxXCIsXG4gIHRpdGxlMTogXCJoMVwiLFxuICB0aXRsZTI6IFwiaDJcIixcbiAgdGl0bGUzOiBcImgzXCIsXG4gIHRpdGxlNDogXCJoNFwiLFxuICBib2R5OiBcInBcIixcbiAgbGFiZWw6IFwibGFiZWxcIixcbiAgY2FwdGlvbjE6IFwicFwiLFxuICBjYXB0aW9uMjogXCJwXCIsXG4gIC8vIExFR0FDWVxuICBcIjV4bFRpdGxlXCI6IFwiaDFcIixcbiAgXCI0eGxUaXRsZVwiOiBcImgxXCIsXG4gIHh4bFRpdGxlOiBcImgxXCIsXG4gIGxUaXRsZTogXCJoMlwiLFxuICBzVGl0bGU6IFwiaDRcIixcbiAgeHhzVGl0bGU6IFwiaDZcIixcbiAgc2VjdGlvblRpdGxlOiBcInBcIixcbiAgcGxhY2Vob2xkZXJUZXh0OiBcInBcIixcbiAgbGluazogXCJwXCIsXG4gIGRpc2FibGVkVGV4dDogXCJwXCIsXG4gIHNlbGVjdGVkTmF2VGV4dDogXCJwXCIsXG4gIHZpelRleHREaXNhYmxlZDogXCJwXCIsXG4gIHhzSW5saW5lTGluazogXCJwXCIsXG59IGFzIGNvbnN0O1xuXG5jb25zdCBnZXRTdHlsZWRDb21wb25lbnQgPSA8VCBleHRlbmRzIGtleW9mIEpTWC5JbnRyaW5zaWNFbGVtZW50cz4oYzogVCkgPT5cbiAgc3R5bGVkKFxuICAgIGMsXG4gICAgdHJhbnNpZW50T3B0aW9uc1xuICApKFxuICAgICh7XG4gICAgICAkdmFyaWFudCxcbiAgICAgICRsaW5rID0gZmFsc2UsXG4gICAgICAkZGlzYWJsZWQgPSBmYWxzZSxcbiAgICAgICRub1dyYXAgPSBmYWxzZSxcbiAgICB9OiB7XG4gICAgICAkdmFyaWFudDogSHZUeXBvZ3JhcGh5VmFyaWFudHMgfCBIdlR5cG9ncmFwaHlMZWdhY3lWYXJpYW50cztcbiAgICAgICRsaW5rPzogYm9vbGVhbjtcbiAgICAgICRkaXNhYmxlZD86IGJvb2xlYW47XG4gICAgICAkbm9XcmFwPzogYm9vbGVhbjtcbiAgICB9KSA9PiAoe1xuICAgICAgLi4uKCR2YXJpYW50ID09PSBcImRpc3BsYXlcIiAmJiB7XG4gICAgICAgIC4uLih0aGVtZS50eXBvZ3JhcGh5LmRpc3BsYXkgYXMgQ1NTUHJvcGVydGllcyksXG4gICAgICB9KSxcbiAgICAgIC4uLigkdmFyaWFudCA9PT0gXCJ0aXRsZTFcIiAmJiB7XG4gICAgICAgIC4uLih0aGVtZS50eXBvZ3JhcGh5LnRpdGxlMSBhcyBDU1NQcm9wZXJ0aWVzKSxcbiAgICAgIH0pLFxuICAgICAgLi4uKCR2YXJpYW50ID09PSBcInRpdGxlMlwiICYmIHtcbiAgICAgICAgLi4uKHRoZW1lLnR5cG9ncmFwaHkudGl0bGUyIGFzIENTU1Byb3BlcnRpZXMpLFxuICAgICAgfSksXG4gICAgICAuLi4oJHZhcmlhbnQgPT09IFwidGl0bGUzXCIgJiYge1xuICAgICAgICAuLi4odGhlbWUudHlwb2dyYXBoeS50aXRsZTMgYXMgQ1NTUHJvcGVydGllcyksXG4gICAgICB9KSxcbiAgICAgIC4uLigkdmFyaWFudCA9PT0gXCJ0aXRsZTRcIiAmJiB7XG4gICAgICAgIC4uLih0aGVtZS50eXBvZ3JhcGh5LnRpdGxlNCBhcyBDU1NQcm9wZXJ0aWVzKSxcbiAgICAgIH0pLFxuICAgICAgLi4uKCR2YXJpYW50ID09PSBcImJvZHlcIiAmJiB7XG4gICAgICAgIC4uLih0aGVtZS50eXBvZ3JhcGh5LmJvZHkgYXMgQ1NTUHJvcGVydGllcyksXG4gICAgICB9KSxcbiAgICAgIC4uLigkdmFyaWFudCA9PT0gXCJsYWJlbFwiICYmIHtcbiAgICAgICAgLi4uKHRoZW1lLnR5cG9ncmFwaHkubGFiZWwgYXMgQ1NTUHJvcGVydGllcyksXG4gICAgICB9KSxcbiAgICAgIC4uLigkdmFyaWFudCA9PT0gXCJjYXB0aW9uMVwiICYmIHtcbiAgICAgICAgLi4uKHRoZW1lLnR5cG9ncmFwaHkuY2FwdGlvbjEgYXMgQ1NTUHJvcGVydGllcyksXG4gICAgICB9KSxcbiAgICAgIC4uLigkdmFyaWFudCA9PT0gXCJjYXB0aW9uMlwiICYmIHtcbiAgICAgICAgLi4uKHRoZW1lLnR5cG9ncmFwaHkuY2FwdGlvbjIgYXMgQ1NTUHJvcGVydGllcyksXG4gICAgICB9KSxcbiAgICAgIC8vIExFR0FDWVxuICAgICAgLi4uKCR2YXJpYW50ID09PSBcIjV4bFRpdGxlXCIgJiYge1xuICAgICAgICAuLi4odGhlbWUudHlwb2dyYXBoeVtcIjV4bFRpdGxlXCJdIGFzIENTU1Byb3BlcnRpZXMpLFxuICAgICAgfSksXG4gICAgICAuLi4oJHZhcmlhbnQgPT09IFwiNHhsVGl0bGVcIiAmJiB7XG4gICAgICAgIC4uLih0aGVtZS50eXBvZ3JhcGh5W1wiNHhsVGl0bGVcIl0gYXMgQ1NTUHJvcGVydGllcyksXG4gICAgICB9KSxcbiAgICAgIC4uLigkdmFyaWFudCA9PT0gXCJ4eGxUaXRsZVwiICYmIHtcbiAgICAgICAgLi4uKHRoZW1lLnR5cG9ncmFwaHkueHhsVGl0bGUgYXMgQ1NTUHJvcGVydGllcyksXG4gICAgICB9KSxcbiAgICAgIC4uLigkdmFyaWFudCA9PT0gXCJsVGl0bGVcIiAmJiB7XG4gICAgICAgIC4uLih0aGVtZS50eXBvZ3JhcGh5LmxUaXRsZSBhcyBDU1NQcm9wZXJ0aWVzKSxcbiAgICAgIH0pLFxuICAgICAgLi4uKCR2YXJpYW50ID09PSBcInNUaXRsZVwiICYmIHtcbiAgICAgICAgLi4uKHRoZW1lLnR5cG9ncmFwaHkuc1RpdGxlIGFzIENTU1Byb3BlcnRpZXMpLFxuICAgICAgfSksXG4gICAgICAuLi4oJHZhcmlhbnQgPT09IFwieHhzVGl0bGVcIiAmJiB7XG4gICAgICAgIC4uLih0aGVtZS50eXBvZ3JhcGh5Lnh4c1RpdGxlIGFzIENTU1Byb3BlcnRpZXMpLFxuICAgICAgfSksXG4gICAgICAuLi4oJHZhcmlhbnQgPT09IFwic2VjdGlvblRpdGxlXCIgJiYge1xuICAgICAgICAuLi4odGhlbWUudHlwb2dyYXBoeS5zZWN0aW9uVGl0bGUgYXMgQ1NTUHJvcGVydGllcyksXG4gICAgICAgIHRleHRUcmFuc2Zvcm06IFwidXBwZXJjYXNlXCIsXG4gICAgICB9KSxcbiAgICAgIC4uLigkdmFyaWFudCA9PT0gXCJwbGFjZWhvbGRlclRleHRcIiAmJiB7XG4gICAgICAgIC4uLih0aGVtZS50eXBvZ3JhcGh5LnBsYWNlaG9sZGVyVGV4dCBhcyBDU1NQcm9wZXJ0aWVzKSxcbiAgICAgIH0pLFxuICAgICAgLi4uKCR2YXJpYW50ID09PSBcImxpbmtcIiAmJiB7XG4gICAgICAgIC4uLih0aGVtZS50eXBvZ3JhcGh5LmxpbmsgYXMgQ1NTUHJvcGVydGllcyksXG4gICAgICAgIHRleHREZWNvcmF0aW9uOiBcInVuZGVybGluZVwiLFxuICAgICAgICBjdXJzb3I6IFwicG9pbnRlclwiLFxuICAgICAgfSksXG4gICAgICAuLi4oJHZhcmlhbnQgPT09IFwiZGlzYWJsZWRUZXh0XCIgJiYge1xuICAgICAgICAuLi4odGhlbWUudHlwb2dyYXBoeS5kaXNhYmxlZFRleHQgYXMgQ1NTUHJvcGVydGllcyksXG4gICAgICB9KSxcbiAgICAgIC4uLigkdmFyaWFudCA9PT0gXCJzZWxlY3RlZE5hdlRleHRcIiAmJiB7XG4gICAgICAgIC4uLih0aGVtZS50eXBvZ3JhcGh5LnNlbGVjdGVkTmF2VGV4dCBhcyBDU1NQcm9wZXJ0aWVzKSxcbiAgICAgIH0pLFxuICAgICAgLi4uKCR2YXJpYW50ID09PSBcInZpelRleHREaXNhYmxlZFwiICYmIHtcbiAgICAgICAgLi4uKHRoZW1lLnR5cG9ncmFwaHkudml6VGV4dERpc2FibGVkIGFzIENTU1Byb3BlcnRpZXMpLFxuICAgICAgfSksXG4gICAgICAuLi4oJHZhcmlhbnQgPT09IFwieHNJbmxpbmVMaW5rXCIgJiYge1xuICAgICAgICAuLi4odGhlbWUudHlwb2dyYXBoeS54c0lubGluZUxpbmsgYXMgQ1NTUHJvcGVydGllcyksXG4gICAgICB9KSxcbiAgICAgIGZvbnRGYW1pbHk6IHRoZW1lLmZvbnRGYW1pbHkuYm9keSxcbiAgICAgIC8vIEFEREVEIFBST1BTXG4gICAgICAuLi4oJGxpbmsgJiYge1xuICAgICAgICBjb2xvcjogdGhlbWUuY29sb3JzLnByaW1hcnksXG4gICAgICAgIHRleHREZWNvcmF0aW9uOiBcInVuZGVybGluZVwiLFxuICAgICAgICBjdXJzb3I6IFwicG9pbnRlclwiLFxuICAgICAgfSksXG4gICAgICAuLi4oJGRpc2FibGVkICYmIHtcbiAgICAgICAgY29sb3I6IHRoZW1lLmNvbG9ycy5zZWNvbmRhcnlfNjAsXG4gICAgICB9KSxcbiAgICAgIC4uLigkbm9XcmFwICYmIHtcbiAgICAgICAgb3ZlcmZsb3c6IFwiaGlkZGVuXCIsXG4gICAgICAgIHRleHRPdmVyZmxvdzogXCJlbGxpcHNpc1wiLFxuICAgICAgICB3aGl0ZVNwYWNlOiBcIm5vd3JhcFwiLFxuICAgICAgfSksXG4gICAgfSlcbiAgKTtcblxuZXhwb3J0IGludGVyZmFjZSBIdlR5cG9ncmFwaHlQcm9wc1xuICBleHRlbmRzIE9taXQ8QWxsSFRNTEF0dHJpYnV0ZXM8SFRNTEVsZW1lbnQ+LCBcImRpc2FibGVkXCI+LFxuICAgIEh2QmFzZVByb3BzPEhUTUxFbGVtZW50PiB7XG4gIGNvbXBvbmVudD86IFJlYWN0LlJlYWN0Tm9kZSB8IFJlYWN0LkVsZW1lbnRUeXBlO1xuICAvKiogVXNlIHRoZSB2YXJpYW50IHByb3AgdG8gY2hhbmdlIHRoZSB2aXN1YWwgc3R5bGUgb2YgdGhlIFR5cG9ncmFwaHkuICovXG4gIHZhcmlhbnQ/OiBIdlR5cG9ncmFwaHlWYXJpYW50cyB8IEh2VHlwb2dyYXBoeUxlZ2FjeVZhcmlhbnRzO1xuICAvKiogSWYgYHRydWVgIHRoZSB0eXBvZ3JhcGh5IHdpbGwgZGlzcGxheSB0aGUgbG9vayBvZiBhIGxpbmsuICovXG4gIGxpbms/OiBib29sZWFuO1xuICAvKiogSWYgYHRydWVgIHRoZSB0eXBvZ3JhcGh5IHdpbGwgZGlzcGxheSB0aGUgbG9vayBvZiBhIGRpc2FibGVkIHN0YXRlLiAqL1xuICBkaXNhYmxlZD86IGJvb2xlYW47XG4gIC8qKiBJZiBgdHJ1ZWAsIHRoZSB0ZXh0IHdpbGwgaGF2ZSBhIGJvdHRvbSBtYXJnaW4uICovXG4gIHBhcmFncmFwaD86IGJvb2xlYW47XG4gIC8qKlxuICAgKiBJZiBgdHJ1ZWAsIHRoZSB0ZXh0IHdpbGwgbm90IHdyYXAsIGJ1dCBpbnN0ZWFkIHdpbGwgdHJ1bmNhdGUgd2l0aCBhIHRleHQgb3ZlcmZsb3cgZWxsaXBzaXMuXG4gICAqXG4gICAqIE5vdGUgdGhhdCB0ZXh0IG92ZXJmbG93IGNhbiBvbmx5IGhhcHBlbiB3aXRoIGJsb2NrIG9yIGlubGluZS1ibG9jayBsZXZlbCBlbGVtZW50c1xuICAgKiAodGhlIGVsZW1lbnQgbmVlZHMgdG8gaGF2ZSBhIHdpZHRoIGluIG9yZGVyIHRvIG92ZXJmbG93KS5cbiAgICovXG4gIG5vV3JhcD86IGJvb2xlYW47XG4gIC8qKiBBIEpzcyBPYmplY3QgdXNlZCB0byBvdmVycmlkZSBvciBleHRlbmQgdGhlIHN0eWxlcyBhcHBsaWVkIHRvIHRoZSBjb21wb25lbnQuICovXG4gIGNsYXNzZXM/OiBIdlR5cG9ncmFwaHlDbGFzc2VzO1xufVxuXG4vKipcbiAqIFR5cG9ncmFwaHkgY29tcG9uZW50IGlzIHVzZWQgdG8gcmVuZGVyIHRleHQgYW5kIHBhcmFncmFwaHMgd2l0aGluIGFuIGludGVyZmFjZS5cbiAqL1xuZXhwb3J0IGNvbnN0IEh2VHlwb2dyYXBoeSA9IGZvcndhcmRSZWYoXG4gIChwcm9wczogSHZUeXBvZ3JhcGh5UHJvcHMsIHJlZjogUmVmPEhUTUxFbGVtZW50PikgPT4ge1xuICAgIGNvbnN0IHtcbiAgICAgIGNoaWxkcmVuLFxuICAgICAgY2xhc3NOYW1lLFxuICAgICAgY29tcG9uZW50LFxuICAgICAgY2xhc3NlcyxcbiAgICAgIHZhcmlhbnQgPSBcImJvZHlcIixcbiAgICAgIGxpbmsgPSBmYWxzZSxcbiAgICAgIGRpc2FibGVkID0gZmFsc2UsXG4gICAgICBub1dyYXAgPSBmYWxzZSxcbiAgICAgIHBhcmFncmFwaCA9IGZhbHNlLFxuICAgICAgLi4ub3RoZXJzXG4gICAgfSA9IHByb3BzO1xuICAgIGNvbnN0IHsgYWN0aXZlVGhlbWUgfSA9IHVzZVRoZW1lKCk7XG5cbiAgICBjb25zdCBtYXBwZWRWYXJpYW50ID0gbWFwVmFyaWFudCh2YXJpYW50LCBhY3RpdmVUaGVtZT8ubmFtZSk7XG5cbiAgICBjb25zdCBjb21wID1cbiAgICAgIGNvbXBvbmVudCB8fCAocGFyYWdyYXBoID8gXCJwXCIgOiBIdlR5cG9ncmFwaHlNYXBbbWFwcGVkVmFyaWFudF0gfHwgXCJzcGFuXCIpO1xuXG4gICAgY29uc3QgU3R5bGVkQ29tcG9uZW50ID0gdXNlTWVtbyhcbiAgICAgICgpID0+IGdldFN0eWxlZENvbXBvbmVudChjb21wIHx8IFwicFwiKSxcbiAgICAgIFtjb21wXVxuICAgICk7XG5cbiAgICByZXR1cm4gKFxuICAgICAgPFN0eWxlZENvbXBvbmVudFxuICAgICAgICByZWY9e3JlZn1cbiAgICAgICAgY2xhc3NOYW1lPXtjbHN4KFxuICAgICAgICAgIGNsYXNzTmFtZSxcbiAgICAgICAgICBjbGFzc2VzPy5yb290LFxuICAgICAgICAgIHR5cG9ncmFwaHlDbGFzc2VzLnJvb3QsXG4gICAgICAgICAgY2xhc3Nlcz8uW3ZhcmlhbnRdLFxuICAgICAgICAgIHR5cG9ncmFwaHlDbGFzc2VzW3ZhcmlhbnRdLFxuICAgICAgICAgIG5vV3JhcCAmJiBjbHN4KHR5cG9ncmFwaHlDbGFzc2VzLm5vV3JhcCwgY2xhc3Nlcz8ubm9XcmFwKVxuICAgICAgICApfVxuICAgICAgICAkdmFyaWFudD17XG4gICAgICAgICAgbWFwcGVkVmFyaWFudCBhcyBIdlR5cG9ncmFwaHlWYXJpYW50cyB8IEh2VHlwb2dyYXBoeUxlZ2FjeVZhcmlhbnRzXG4gICAgICAgIH1cbiAgICAgICAgJGxpbms9e2xpbmt9XG4gICAgICAgICRkaXNhYmxlZD17ZGlzYWJsZWR9XG4gICAgICAgICRub1dyYXA9e25vV3JhcH1cbiAgICAgICAgey4uLm90aGVyc31cbiAgICAgID5cbiAgICAgICAge2NoaWxkcmVufVxuICAgICAgPC9TdHlsZWRDb21wb25lbnQ+XG4gICAgKTtcbiAgfVxuKTtcbiJdfQ== */");
 const HvTypography = forwardRef((props, ref) => {
   const {
-    children,
     className,
-    component,
-    classes,
-    variant = "body",
+    component: ComponentProp,
+    classes: classesProp,
+    variant: variantProp = "body",
     link = false,
     disabled = false,
     noWrap = false,
     paragraph = false,
     ...others
   } = props;
+  const {
+    classes,
+    cx
+  } = useClasses(classesProp);
   const {
     activeTheme
   } = useTheme();
-  const mappedVariant = mapVariant(variant, activeTheme == null ? void 0 : activeTheme.name);
-  const comp = component || (paragraph ? "p" : HvTypographyMap[mappedVariant] || "span");
-  const StyledComponent = useMemo(() => getStyledComponent(comp || "p"), [comp]);
-  return /* @__PURE__ */ jsx(StyledComponent, {
+  const variant = mapVariant(variantProp, activeTheme == null ? void 0 : activeTheme.name);
+  const Component = ComponentProp || paragraph && "p" || HvTypographyMap[variant] || "span";
+  return /* @__PURE__ */ jsx(Component, {
     ref,
-    className: clsx(className, classes == null ? void 0 : classes.root, typographyClasses.root, classes == null ? void 0 : classes[variant], typographyClasses[variant], noWrap && clsx(typographyClasses.noWrap, classes == null ? void 0 : classes.noWrap)),
-    $variant: mappedVariant,
-    $link: link,
-    $disabled: disabled,
-    $noWrap: noWrap,
-    ...others,
-    children
+    className: cx(classes.root, classes[variant], className, {
+      [classes.isLink]: link,
+      [classes.noWrap]: noWrap,
+      [classes.disabled]: disabled
+    }),
+    ...others
   });
 });
 export {
-  HvTypography
+  HvTypography,
+  staticClasses as typographyClasses,
+  typographyVariants
 };
 //# sourceMappingURL=Typography.js.map

package/dist/esm/components/Typography/Typography.js.map

@@ -1 +1 @@
-{"version":3,"file":"Typography.js","sources":["../../../../src/components/Typography/Typography.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useMemo,\n  CSSProperties,\n  AllHTMLAttributes,\n  Ref,\n} from \"react\";\nimport { HvBaseProps } from \"@core/types\";\nimport styled from \"@emotion/styled\";\nimport { transientOptions } from \"@core/utils/transientOptions\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { clsx } from \"clsx\";\nimport { useTheme } from \"@core/hooks\";\nimport { mapVariant } from \"./utils\";\nimport typographyClasses, { HvTypographyClasses } from \"./typographyClasses\";\n\nexport type HvTypographyVariants =\n  | \"display\"\n  | \"title1\"\n  | \"title2\"\n  | \"title3\"\n  | \"title4\"\n  | \"body\"\n  | \"label\"\n  | \"caption1\"\n  | \"caption2\";\n\n/** @deprecated */\nexport type HvTypographyLegacyVariants =\n  | \"5xlTitle\"\n  | \"4xlTitle\"\n  | \"3xlTitle\"\n  | \"xxlTitle\"\n  | \"xlTitle\"\n  | \"lTitle\"\n  | \"mTitle\"\n  | \"sTitle\"\n  | \"xsTitle\"\n  | \"xxsTitle\"\n  | \"sectionTitle\"\n  | \"highlightText\"\n  | \"normalText\"\n  | \"placeholderText\"\n  | \"link\"\n  | \"disabledText\"\n  | \"selectedNavText\"\n  | \"vizText\"\n  | \"vizTextDisabled\"\n  | \"xsInlineLink\";\n\nconst HvTypographyMap = {\n  display: \"h1\",\n  title1: \"h1\",\n  title2: \"h2\",\n  title3: \"h3\",\n  title4: \"h4\",\n  body: \"p\",\n  label: \"label\",\n  caption1: \"p\",\n  caption2: \"p\",\n  // LEGACY\n  \"5xlTitle\": \"h1\",\n  \"4xlTitle\": \"h1\",\n  xxlTitle: \"h1\",\n  lTitle: \"h2\",\n  sTitle: \"h4\",\n  xxsTitle: \"h6\",\n  sectionTitle: \"p\",\n  placeholderText: \"p\",\n  link: \"p\",\n  disabledText: \"p\",\n  selectedNavText: \"p\",\n  vizTextDisabled: \"p\",\n  xsInlineLink: \"p\",\n} as const;\n\nconst getStyledComponent = <T extends keyof JSX.IntrinsicElements>(c: T) =>\n  styled(\n    c,\n    transientOptions\n  )(\n    ({\n      $variant,\n      $link = false,\n      $disabled = false,\n      $noWrap = false,\n    }: {\n      $variant: HvTypographyVariants | HvTypographyLegacyVariants;\n      $link?: boolean;\n      $disabled?: boolean;\n      $noWrap?: boolean;\n    }) => ({\n      ...($variant === \"display\" && {\n        ...(theme.typography.display as CSSProperties),\n      }),\n      ...($variant === \"title1\" && {\n        ...(theme.typography.title1 as CSSProperties),\n      }),\n      ...($variant === \"title2\" && {\n        ...(theme.typography.title2 as CSSProperties),\n      }),\n      ...($variant === \"title3\" && {\n        ...(theme.typography.title3 as CSSProperties),\n      }),\n      ...($variant === \"title4\" && {\n        ...(theme.typography.title4 as CSSProperties),\n      }),\n      ...($variant === \"body\" && {\n        ...(theme.typography.body as CSSProperties),\n      }),\n      ...($variant === \"label\" && {\n        ...(theme.typography.label as CSSProperties),\n      }),\n      ...($variant === \"caption1\" && {\n        ...(theme.typography.caption1 as CSSProperties),\n      }),\n      ...($variant === \"caption2\" && {\n        ...(theme.typography.caption2 as CSSProperties),\n      }),\n      // LEGACY\n      ...($variant === \"5xlTitle\" && {\n        ...(theme.typography[\"5xlTitle\"] as CSSProperties),\n      }),\n      ...($variant === \"4xlTitle\" && {\n        ...(theme.typography[\"4xlTitle\"] as CSSProperties),\n      }),\n      ...($variant === \"xxlTitle\" && {\n        ...(theme.typography.xxlTitle as CSSProperties),\n      }),\n      ...($variant === \"lTitle\" && {\n        ...(theme.typography.lTitle as CSSProperties),\n      }),\n      ...($variant === \"sTitle\" && {\n        ...(theme.typography.sTitle as CSSProperties),\n      }),\n      ...($variant === \"xxsTitle\" && {\n        ...(theme.typography.xxsTitle as CSSProperties),\n      }),\n      ...($variant === \"sectionTitle\" && {\n        ...(theme.typography.sectionTitle as CSSProperties),\n        textTransform: \"uppercase\",\n      }),\n      ...($variant === \"placeholderText\" && {\n        ...(theme.typography.placeholderText as CSSProperties),\n      }),\n      ...($variant === \"link\" && {\n        ...(theme.typography.link as CSSProperties),\n        textDecoration: \"underline\",\n        cursor: \"pointer\",\n      }),\n      ...($variant === \"disabledText\" && {\n        ...(theme.typography.disabledText as CSSProperties),\n      }),\n      ...($variant === \"selectedNavText\" && {\n        ...(theme.typography.selectedNavText as CSSProperties),\n      }),\n      ...($variant === \"vizTextDisabled\" && {\n        ...(theme.typography.vizTextDisabled as CSSProperties),\n      }),\n      ...($variant === \"xsInlineLink\" && {\n        ...(theme.typography.xsInlineLink as CSSProperties),\n      }),\n      fontFamily: theme.fontFamily.body,\n      // ADDED PROPS\n      ...($link && {\n        color: theme.colors.primary,\n        textDecoration: \"underline\",\n        cursor: \"pointer\",\n      }),\n      ...($disabled && {\n        color: theme.colors.secondary_60,\n      }),\n      ...($noWrap && {\n        overflow: \"hidden\",\n        textOverflow: \"ellipsis\",\n        whiteSpace: \"nowrap\",\n      }),\n    })\n  );\n\nexport interface HvTypographyProps\n  extends Omit<AllHTMLAttributes<HTMLElement>, \"disabled\">,\n    HvBaseProps<HTMLElement> {\n  component?: React.ReactNode | React.ElementType;\n  /** Use the variant prop to change the visual style of the Typography. */\n  variant?: HvTypographyVariants | HvTypographyLegacyVariants;\n  /** If `true` the typography will display the look of a link. */\n  link?: boolean;\n  /** If `true` the typography will display the look of a disabled state. */\n  disabled?: boolean;\n  /** If `true`, the text will have a bottom margin. */\n  paragraph?: boolean;\n  /**\n   * If `true`, the text will not wrap, but instead will truncate with a text overflow ellipsis.\n   *\n   * Note that text overflow can only happen with block or inline-block level elements\n   * (the element needs to have a width in order to overflow).\n   */\n  noWrap?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvTypographyClasses;\n}\n\n/**\n * Typography component is used to render text and paragraphs within an interface.\n */\nexport const HvTypography = forwardRef(\n  (props: HvTypographyProps, ref: Ref<HTMLElement>) => {\n    const {\n      children,\n      className,\n      component,\n      classes,\n      variant = \"body\",\n      link = false,\n      disabled = false,\n      noWrap = false,\n      paragraph = false,\n      ...others\n    } = props;\n    const { activeTheme } = useTheme();\n\n    const mappedVariant = mapVariant(variant, activeTheme?.name);\n\n    const comp =\n      component || (paragraph ? \"p\" : HvTypographyMap[mappedVariant] || \"span\");\n\n    const StyledComponent = useMemo(\n      () => getStyledComponent(comp || \"p\"),\n      [comp]\n    );\n\n    return (\n      <StyledComponent\n        ref={ref}\n        className={clsx(\n          className,\n          classes?.root,\n          typographyClasses.root,\n          classes?.[variant],\n          typographyClasses[variant],\n          noWrap && clsx(typographyClasses.noWrap, classes?.noWrap)\n        )}\n        $variant={\n          mappedVariant as HvTypographyVariants | HvTypographyLegacyVariants\n        }\n        $link={link}\n        $disabled={disabled}\n        $noWrap={noWrap}\n        {...others}\n      >\n        {children}\n      </StyledComponent>\n    );\n  }\n);\n"],"names":["HvTypographyMap","display","title1","title2","title3","title4","body","label","caption1","caption2","xxlTitle","lTitle","sTitle","xxsTitle","sectionTitle","placeholderText","link","disabledText","selectedNavText","vizTextDisabled","xsInlineLink","getStyledComponent","c","process","env","NODE_ENV","_extends","target","transientOptions","$variant","$link","$disabled","$noWrap","theme","typography","textTransform","textDecoration","cursor","fontFamily","color","colors","primary","secondary_60","overflow","textOverflow","whiteSpace","HvTypography","forwardRef","props","ref","children","className","component","classes","variant","disabled","noWrap","paragraph","others","activeTheme","useTheme","mappedVariant","mapVariant","name","comp","StyledComponent","useMemo","clsx","root","typographyClasses"],"mappings":"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"}
+{"version":3,"file":"Typography.js","sources":["../../../../src/components/Typography/Typography.tsx"],"sourcesContent":["import { forwardRef, AllHTMLAttributes, Ref } from \"react\";\nimport { HvBaseProps } from \"@core/types\";\nimport { ExtractNames } from \"@core/utils\";\nimport { useTheme } from \"@core/hooks\";\nimport { mapVariant } from \"./utils\";\nimport { staticClasses, useClasses } from \"./Typography.styles\";\n\nexport { staticClasses as typographyClasses };\n\nexport type HvTypographyClasses = ExtractNames<typeof useClasses>;\n\nexport const typographyVariants = [\n  \"display\",\n  \"title1\",\n  \"title2\",\n  \"title3\",\n  \"title4\",\n  \"body\",\n  \"label\",\n  \"caption1\",\n  \"caption2\",\n] as const;\n\nexport type HvTypographyVariants = (typeof typographyVariants)[number];\n\n/** @deprecated */\nexport type HvTypographyLegacyVariants =\n  | \"5xlTitle\"\n  | \"4xlTitle\"\n  | \"3xlTitle\"\n  | \"xxlTitle\"\n  | \"xlTitle\"\n  | \"lTitle\"\n  | \"mTitle\"\n  | \"sTitle\"\n  | \"xsTitle\"\n  | \"xxsTitle\"\n  | \"sectionTitle\"\n  | \"highlightText\"\n  | \"normalText\"\n  | \"placeholderText\"\n  | \"link\"\n  | \"disabledText\"\n  | \"selectedNavText\"\n  | \"vizText\"\n  | \"vizTextDisabled\"\n  | \"xsInlineLink\";\n\nconst HvTypographyMap = {\n  display: \"h1\",\n  title1: \"h1\",\n  title2: \"h2\",\n  title3: \"h3\",\n  title4: \"h4\",\n  body: \"p\",\n  label: \"label\",\n  caption1: \"p\",\n  caption2: \"p\",\n  // LEGACY\n  \"5xlTitle\": \"h1\",\n  \"4xlTitle\": \"h1\",\n  xxlTitle: \"h1\",\n  lTitle: \"h2\",\n  sTitle: \"h4\",\n  xxsTitle: \"h6\",\n  sectionTitle: \"p\",\n  placeholderText: \"p\",\n  link: \"p\",\n  disabledText: \"p\",\n  selectedNavText: \"p\",\n  vizTextDisabled: \"p\",\n  xsInlineLink: \"p\",\n} as const;\n\nexport interface HvTypographyProps\n  extends Omit<AllHTMLAttributes<HTMLElement>, \"disabled\">,\n    HvBaseProps<HTMLElement> {\n  component?: React.ElementType;\n  /** Use the variant prop to change the visual style of the Typography. */\n  variant?: HvTypographyVariants | HvTypographyLegacyVariants;\n  /** If `true` the typography will display the look of a link. */\n  link?: boolean;\n  /** If `true` the typography will display the look of a disabled state. */\n  disabled?: boolean;\n  /** If `true`, the text will have a bottom margin. */\n  paragraph?: boolean;\n  /**\n   * If `true`, the text will not wrap, but instead will truncate with a text overflow ellipsis.\n   *\n   * Note that text overflow can only happen with block or inline-block level elements\n   * (the element needs to have a width in order to overflow).\n   */\n  noWrap?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvTypographyClasses;\n}\n\n/**\n * Typography component is used to render text and paragraphs within an interface.\n */\nexport const HvTypography = forwardRef(\n  (props: HvTypographyProps, ref: Ref<HTMLElement>) => {\n    const {\n      className,\n      component: ComponentProp,\n      classes: classesProp,\n      variant: variantProp = \"body\",\n      link = false,\n      disabled = false,\n      noWrap = false,\n      paragraph = false,\n      ...others\n    } = props;\n    const { classes, cx } = useClasses(classesProp);\n    const { activeTheme } = useTheme();\n\n    const variant = mapVariant(variantProp, activeTheme?.name);\n\n    const Component =\n      ComponentProp || (paragraph && \"p\") || HvTypographyMap[variant] || \"span\";\n\n    return (\n      <Component\n        ref={ref}\n        className={cx(classes.root, classes[variant], className, {\n          [classes.isLink]: link,\n          [classes.noWrap]: noWrap,\n          [classes.disabled]: disabled,\n        })}\n        {...others}\n      />\n    );\n  }\n);\n"],"names":["typographyVariants","HvTypographyMap","display","title1","title2","title3","title4","body","label","caption1","caption2","xxlTitle","lTitle","sTitle","xxsTitle","sectionTitle","placeholderText","link","disabledText","selectedNavText","vizTextDisabled","xsInlineLink","HvTypography","forwardRef","props","ref","className","component","ComponentProp","classes","classesProp","variant","variantProp","disabled","noWrap","paragraph","others","cx","useClasses","activeTheme","useTheme","mapVariant","name","Component","root","isLink"],"mappings":";;;;;;AAWaA,MAAAA,qBAAqB,CAChC,WACA,UACA,UACA,UACA,UACA,QACA,SACA,YACA,UAAU;AA4BZ,MAAMC,kBAAkB;AAAA,EACtBC,SAAS;AAAA,EACTC,QAAQ;AAAA,EACRC,QAAQ;AAAA,EACRC,QAAQ;AAAA,EACRC,QAAQ;AAAA,EACRC,MAAM;AAAA,EACNC,OAAO;AAAA,EACPC,UAAU;AAAA,EACVC,UAAU;AAAA;AAAA,EAEV,YAAY;AAAA,EACZ,YAAY;AAAA,EACZC,UAAU;AAAA,EACVC,QAAQ;AAAA,EACRC,QAAQ;AAAA,EACRC,UAAU;AAAA,EACVC,cAAc;AAAA,EACdC,iBAAiB;AAAA,EACjBC,MAAM;AAAA,EACNC,cAAc;AAAA,EACdC,iBAAiB;AAAA,EACjBC,iBAAiB;AAAA,EACjBC,cAAc;AAChB;AA4BO,MAAMC,eAAeC,WAC1B,CAACC,OAA0BC,QAA0B;AAC7C,QAAA;AAAA,IACJC;AAAAA,IACAC,WAAWC;AAAAA,IACXC,SAASC;AAAAA,IACTC,SAASC,cAAc;AAAA,IACvBf,OAAO;AAAA,IACPgB,WAAW;AAAA,IACXC,SAAS;AAAA,IACTC,YAAY;AAAA,IACZ,GAAGC;AAAAA,EACDZ,IAAAA;AACE,QAAA;AAAA,IAAEK;AAAAA,IAASQ;AAAAA,EAAAA,IAAOC,WAAWR,WAAW;AACxC,QAAA;AAAA,IAAES;AAAAA,MAAgBC,SAAS;AAEjC,QAAMT,UAAUU,WAAWT,aAAaO,2CAAaG,IAAI;AAEzD,QAAMC,YACJf,iBAAkBO,aAAa,OAAQlC,gBAAgB8B,OAAO,KAAK;AAErE,6BACGY,WAAS;AAAA,IACRlB;AAAAA,IACAC,WAAWW,GAAGR,QAAQe,MAAMf,QAAQE,OAAO,GAAGL,WAAW;AAAA,MACvD,CAACG,QAAQgB,MAAM,GAAG5B;AAAAA,MAClB,CAACY,QAAQK,MAAM,GAAGA;AAAAA,MAClB,CAACL,QAAQI,QAAQ,GAAGA;AAAAA,IAAAA,CACrB;AAAA,IAAE,GACCG;AAAAA,EAAAA,CACL;AAEL,CACF;"}

package/dist/esm/components/Typography/Typography.styles.js

@@ -0,0 +1,107 @@
+import { theme } from "@hitachivantara/uikit-styles";
+import { createClasses } from "../../utils/classes.js";
+const {
+  useClasses,
+  staticClasses
+} = createClasses("HvTypography", {
+  root: {
+    fontFamily: theme.fontFamily.body
+  },
+  disabled: {
+    color: theme.colors.secondary_60
+  },
+  isLink: {
+    color: theme.colors.primary,
+    textDecoration: "underline"
+  },
+  noWrap: {
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap"
+  },
+  // variants
+  display: {
+    ...theme.typography.display
+  },
+  title1: {
+    ...theme.typography.title1
+  },
+  title2: {
+    ...theme.typography.title2
+  },
+  title3: {
+    ...theme.typography.title3
+  },
+  title4: {
+    ...theme.typography.title4
+  },
+  body: {
+    ...theme.typography.body
+  },
+  label: {
+    ...theme.typography.label
+  },
+  caption1: {
+    ...theme.typography.caption1
+  },
+  caption2: {
+    ...theme.typography.caption2
+  },
+  // legacy variants
+  "5xlTitle": {
+    ...theme.typography["5xlTitle"]
+  },
+  "4xlTitle": {
+    ...theme.typography["4xlTitle"]
+  },
+  "3xlTitle": {
+    ...theme.typography["3xlTitle"]
+  },
+  xxlTitle: {
+    ...theme.typography.xxlTitle
+  },
+  xlTitle: {},
+  lTitle: {
+    ...theme.typography.lTitle
+  },
+  mTitle: {},
+  sTitle: {
+    ...theme.typography.sTitle
+  },
+  xsTitle: {},
+  xxsTitle: {
+    ...theme.typography.xxsTitle
+  },
+  sectionTitle: {
+    ...theme.typography.sectionTitle,
+    textTransform: "uppercase"
+  },
+  highlightText: {},
+  normalText: {},
+  placeholderText: {
+    ...theme.typography.placeholderText
+  },
+  link: {
+    ...theme.typography.link,
+    cursor: "pointer",
+    textDecoration: "underline"
+  },
+  disabledText: {
+    ...theme.typography.disabledText
+  },
+  selectedNavText: {
+    ...theme.typography.selectedNavText
+  },
+  vizText: {},
+  vizTextDisabled: {
+    ...theme.typography.vizTextDisabled
+  },
+  xsInlineLink: {
+    ...theme.typography.xsInlineLink
+  }
+});
+export {
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=Typography.styles.js.map

package/dist/esm/components/Typography/Typography.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Typography.styles.js","sources":["../../../../src/components/Typography/Typography.styles.ts"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\nimport { createClasses } from \"../../utils\";\n\nexport const { useClasses, staticClasses } = createClasses(\"HvTypography\", {\n  root: {\n    fontFamily: theme.fontFamily.body,\n  },\n  disabled: {\n    color: theme.colors.secondary_60,\n  },\n  isLink: {\n    color: theme.colors.primary,\n    textDecoration: \"underline\",\n  },\n  noWrap: {\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n  },\n  // variants\n  display: { ...theme.typography.display },\n  title1: { ...theme.typography.title1 },\n  title2: { ...theme.typography.title2 },\n  title3: { ...theme.typography.title3 },\n  title4: { ...theme.typography.title4 },\n  body: { ...theme.typography.body },\n  label: { ...theme.typography.label },\n  caption1: { ...theme.typography.caption1 },\n  caption2: { ...theme.typography.caption2 },\n  // legacy variants\n  \"5xlTitle\": { ...theme.typography[\"5xlTitle\"] },\n  \"4xlTitle\": { ...theme.typography[\"4xlTitle\"] },\n  \"3xlTitle\": { ...theme.typography[\"3xlTitle\"] },\n  xxlTitle: { ...theme.typography.xxlTitle },\n  xlTitle: {},\n  lTitle: { ...theme.typography.lTitle },\n  mTitle: {},\n  sTitle: { ...theme.typography.sTitle },\n  xsTitle: {},\n  xxsTitle: { ...theme.typography.xxsTitle },\n  sectionTitle: {\n    ...theme.typography.sectionTitle,\n    textTransform: \"uppercase\",\n  },\n  highlightText: {},\n  normalText: {},\n  placeholderText: { ...theme.typography.placeholderText },\n  link: {\n    ...theme.typography.link,\n    cursor: \"pointer\",\n    textDecoration: \"underline\",\n  },\n  disabledText: { ...theme.typography.disabledText },\n  selectedNavText: { ...theme.typography.selectedNavText },\n  vizText: {},\n  vizTextDisabled: { ...theme.typography.vizTextDisabled },\n  xsInlineLink: { ...theme.typography.xsInlineLink },\n});\n"],"names":["useClasses","staticClasses","createClasses","root","fontFamily","theme","body","disabled","color","colors","secondary_60","isLink","primary","textDecoration","noWrap","overflow","textOverflow","whiteSpace","display","typography","title1","title2","title3","title4","label","caption1","caption2","xxlTitle","xlTitle","lTitle","mTitle","sTitle","xsTitle","xxsTitle","sectionTitle","textTransform","highlightText","normalText","placeholderText","link","cursor","disabledText","selectedNavText","vizText","vizTextDisabled","xsInlineLink"],"mappings":";;AAGa,MAAA;AAAA,EAAEA;AAAAA,EAAYC;AAAc,IAAIC,cAAc,gBAAgB;AAAA,EACzEC,MAAM;AAAA,IACJC,YAAYC,MAAMD,WAAWE;AAAAA,EAC/B;AAAA,EACAC,UAAU;AAAA,IACRC,OAAOH,MAAMI,OAAOC;AAAAA,EACtB;AAAA,EACAC,QAAQ;AAAA,IACNH,OAAOH,MAAMI,OAAOG;AAAAA,IACpBC,gBAAgB;AAAA,EAClB;AAAA,EACAC,QAAQ;AAAA,IACNC,UAAU;AAAA,IACVC,cAAc;AAAA,IACdC,YAAY;AAAA,EACd;AAAA;AAAA,EAEAC,SAAS;AAAA,IAAE,GAAGb,MAAMc,WAAWD;AAAAA,EAAQ;AAAA,EACvCE,QAAQ;AAAA,IAAE,GAAGf,MAAMc,WAAWC;AAAAA,EAAO;AAAA,EACrCC,QAAQ;AAAA,IAAE,GAAGhB,MAAMc,WAAWE;AAAAA,EAAO;AAAA,EACrCC,QAAQ;AAAA,IAAE,GAAGjB,MAAMc,WAAWG;AAAAA,EAAO;AAAA,EACrCC,QAAQ;AAAA,IAAE,GAAGlB,MAAMc,WAAWI;AAAAA,EAAO;AAAA,EACrCjB,MAAM;AAAA,IAAE,GAAGD,MAAMc,WAAWb;AAAAA,EAAK;AAAA,EACjCkB,OAAO;AAAA,IAAE,GAAGnB,MAAMc,WAAWK;AAAAA,EAAM;AAAA,EACnCC,UAAU;AAAA,IAAE,GAAGpB,MAAMc,WAAWM;AAAAA,EAAS;AAAA,EACzCC,UAAU;AAAA,IAAE,GAAGrB,MAAMc,WAAWO;AAAAA,EAAS;AAAA;AAAA,EAEzC,YAAY;AAAA,IAAE,GAAGrB,MAAMc,WAAW,UAAU;AAAA,EAAE;AAAA,EAC9C,YAAY;AAAA,IAAE,GAAGd,MAAMc,WAAW,UAAU;AAAA,EAAE;AAAA,EAC9C,YAAY;AAAA,IAAE,GAAGd,MAAMc,WAAW,UAAU;AAAA,EAAE;AAAA,EAC9CQ,UAAU;AAAA,IAAE,GAAGtB,MAAMc,WAAWQ;AAAAA,EAAS;AAAA,EACzCC,SAAS,CAAC;AAAA,EACVC,QAAQ;AAAA,IAAE,GAAGxB,MAAMc,WAAWU;AAAAA,EAAO;AAAA,EACrCC,QAAQ,CAAC;AAAA,EACTC,QAAQ;AAAA,IAAE,GAAG1B,MAAMc,WAAWY;AAAAA,EAAO;AAAA,EACrCC,SAAS,CAAC;AAAA,EACVC,UAAU;AAAA,IAAE,GAAG5B,MAAMc,WAAWc;AAAAA,EAAS;AAAA,EACzCC,cAAc;AAAA,IACZ,GAAG7B,MAAMc,WAAWe;AAAAA,IACpBC,eAAe;AAAA,EACjB;AAAA,EACAC,eAAe,CAAC;AAAA,EAChBC,YAAY,CAAC;AAAA,EACbC,iBAAiB;AAAA,IAAE,GAAGjC,MAAMc,WAAWmB;AAAAA,EAAgB;AAAA,EACvDC,MAAM;AAAA,IACJ,GAAGlC,MAAMc,WAAWoB;AAAAA,IACpBC,QAAQ;AAAA,IACR3B,gBAAgB;AAAA,EAClB;AAAA,EACA4B,cAAc;AAAA,IAAE,GAAGpC,MAAMc,WAAWsB;AAAAA,EAAa;AAAA,EACjDC,iBAAiB;AAAA,IAAE,GAAGrC,MAAMc,WAAWuB;AAAAA,EAAgB;AAAA,EACvDC,SAAS,CAAC;AAAA,EACVC,iBAAiB;AAAA,IAAE,GAAGvC,MAAMc,WAAWyB;AAAAA,EAAgB;AAAA,EACvDC,cAAc;AAAA,IAAE,GAAGxC,MAAMc,WAAW0B;AAAAA,EAAa;AACnD,CAAC;"}

package/dist/esm/components/Typography/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../../../src/components/Typography/utils.ts"],"sourcesContent":["const mappableVariants = new Map([\n  [\"3xlTitle\", \"display\"],\n  [\"xlTitle\", \"title1\"],\n  [\"mTitle\", \"title2\"],\n  [\"xsTitle\", \"title3\"],\n  [\"highlightText\", \"label\"],\n  [\"normalText\", \"body\"],\n  [\"vizText\", \"caption1\"],\n]);\n\nconst isLegacyVariant = (variant: string) => {\n  return [\n    \"5xlTitle\",\n    \"4xlTitle\",\n    \"3xlTitle\",\n    \"xxlTitle\",\n    \"xlTitle\",\n    \"lTitle\",\n    \"mTitle\",\n    \"sTitle\",\n    \"xsTitle\",\n    \"xxsTitle\",\n    \"sectionTitle\",\n    \"highlightText\",\n    \"normalText\",\n    \"placeholderText\",\n    \"link\",\n    \"disabledText\",\n    \"selectedNavText\",\n    \"vizText\",\n    \"vizTextDisabled\",\n    \"xsInlineLink\",\n  ].includes(variant);\n};\n\nexport const mapVariant = (variant: string, theme?: string) => {\n  const mappedVariant = mappableVariants.get(variant);\n\n  if (theme !== \"ds3\") {\n    if (mappedVariant) {\n      // eslint-disable-next-line no-console\n      console.warn(\n        `The typography variant ${variant} is deprecated. You should use ${mappedVariant} instead.`\n      );\n      return mappedVariant;\n    }\n    if (isLegacyVariant(variant)) {\n      // eslint-disable-next-line no-console\n      console.warn(`The typography variant ${variant} is deprecated.`);\n    }\n  }\n\n  return variant;\n};\n"],"names":["mappableVariants","Map","isLegacyVariant","variant","includes","mapVariant","theme","mappedVariant","get","warn"],"mappings":"AAAA,MAAMA,mBAAmB,oBAAIC,IAAI,CAC/B,CAAC,YAAY,SAAS,GACtB,CAAC,WAAW,QAAQ,GACpB,CAAC,UAAU,QAAQ,GACnB,CAAC,WAAW,QAAQ,GACpB,CAAC,iBAAiB,OAAO,GACzB,CAAC,cAAc,MAAM,GACrB,CAAC,WAAW,UAAU,CAAC,CACxB;AAED,MAAMC,kBAAkBA,CAACC,YAAoB;AACpC,SAAA,CACL,YACA,YACA,YACA,YACA,WACA,UACA,UACA,UACA,WACA,YACA,gBACA,iBACA,cACA,mBACA,QACA,gBACA,mBACA,WACA,mBACA,cAAc,EACdC,SAASD,OAAO;AACpB;AAEaE,MAAAA,aAAaA,CAACF,SAAiBG,UAAmB;AACvDC,QAAAA,gBAAgBP,iBAAiBQ,IAAIL,OAAO;AAElD,MAAIG,UAAU,OAAO;AACnB,QAAIC,eAAe;AAETE,cAAAA,KACL,0BAAyBN,yCAAyCI,wBACrE;AACOA,aAAAA;AAAAA,IACT;AACIL,QAAAA,gBAAgBC,OAAO,GAAG;AAEpBM,cAAAA,KAAM,0BAAyBN,wBAAwB;AAAA,IACjE;AAAA,EACF;AAEOA,SAAAA;AACT;"}
+{"version":3,"file":"utils.js","sources":["../../../../src/components/Typography/utils.ts"],"sourcesContent":["import { HvTypographyLegacyVariants, HvTypographyVariants } from \".\";\n\ntype Variant = HvTypographyVariants | HvTypographyLegacyVariants;\n\nconst mappableVariants = new Map<Variant, HvTypographyVariants>([\n  [\"3xlTitle\", \"display\"],\n  [\"xlTitle\", \"title1\"],\n  [\"mTitle\", \"title2\"],\n  [\"xsTitle\", \"title3\"],\n  [\"highlightText\", \"label\"],\n  [\"normalText\", \"body\"],\n  [\"vizText\", \"caption1\"],\n]);\n\nconst isLegacyVariant = (variant: string) => {\n  return [\n    \"5xlTitle\",\n    \"4xlTitle\",\n    \"3xlTitle\",\n    \"xxlTitle\",\n    \"xlTitle\",\n    \"lTitle\",\n    \"mTitle\",\n    \"sTitle\",\n    \"xsTitle\",\n    \"xxsTitle\",\n    \"sectionTitle\",\n    \"highlightText\",\n    \"normalText\",\n    \"placeholderText\",\n    \"link\",\n    \"disabledText\",\n    \"selectedNavText\",\n    \"vizText\",\n    \"vizTextDisabled\",\n    \"xsInlineLink\",\n  ].includes(variant);\n};\n\nexport const mapVariant = (variant: Variant, theme?: string) => {\n  const mappedVariant = mappableVariants.get(variant);\n\n  if (theme !== \"ds3\") {\n    if (mappedVariant) {\n      // eslint-disable-next-line no-console\n      console.warn(\n        `The typography variant ${variant} is deprecated. You should use ${mappedVariant} instead.`\n      );\n      return mappedVariant;\n    }\n    if (isLegacyVariant(variant)) {\n      // eslint-disable-next-line no-console\n      console.warn(`The typography variant ${variant} is deprecated.`);\n    }\n  }\n\n  return variant;\n};\n"],"names":["mappableVariants","Map","isLegacyVariant","variant","includes","mapVariant","theme","mappedVariant","get","warn"],"mappings":"AAIA,MAAMA,mBAAmB,oBAAIC,IAAmC,CAC9D,CAAC,YAAY,SAAS,GACtB,CAAC,WAAW,QAAQ,GACpB,CAAC,UAAU,QAAQ,GACnB,CAAC,WAAW,QAAQ,GACpB,CAAC,iBAAiB,OAAO,GACzB,CAAC,cAAc,MAAM,GACrB,CAAC,WAAW,UAAU,CAAC,CACxB;AAED,MAAMC,kBAAkBA,CAACC,YAAoB;AACpC,SAAA,CACL,YACA,YACA,YACA,YACA,WACA,UACA,UACA,UACA,WACA,YACA,gBACA,iBACA,cACA,mBACA,QACA,gBACA,mBACA,WACA,mBACA,cAAc,EACdC,SAASD,OAAO;AACpB;AAEaE,MAAAA,aAAaA,CAACF,SAAkBG,UAAmB;AACxDC,QAAAA,gBAAgBP,iBAAiBQ,IAAIL,OAAO;AAElD,MAAIG,UAAU,OAAO;AACnB,QAAIC,eAAe;AAETE,cAAAA,KACL,0BAAyBN,yCAAyCI,wBACrE;AACOA,aAAAA;AAAAA,IACT;AACIL,QAAAA,gBAAgBC,OAAO,GAAG;AAEpBM,cAAAA,KAAM,0BAAyBN,wBAAwB;AAAA,IACjE;AAAA,EACF;AAEOA,SAAAA;AACT;"}

package/dist/esm/hooks/useWidth.js

@@ -6,7 +6,7 @@ const useWidth = () => {
   return keys.reduce((output, key) => {
     const matches = useMediaQuery(muiTheme.breakpoints.up(key));
     return !output && matches ? key : output;
-  }, "") || "xs";
+  }, null) || "xs";
 };
 export {
   useWidth

package/dist/esm/hooks/useWidth.js.map

@@ -1 +1 @@
-{"version":3,"file":"useWidth.js","sources":["../../../src/hooks/useWidth.ts"],"sourcesContent":["/* eslint-disable react-hooks/rules-of-hooks */\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { Breakpoint, useMediaQuery, useTheme } from \"@mui/material\";\n\nexport const useWidth = () => {\n  const muiTheme = useTheme();\n  const keys = Object.keys(theme.breakpoints.values).reverse();\n  return (\n    keys.reduce((output, key) => {\n      const matches = useMediaQuery(muiTheme.breakpoints.up(key as Breakpoint));\n\n      return !output && matches ? key : output;\n    }, \"\") || \"xs\"\n  );\n};\n"],"names":["useWidth","muiTheme","useTheme","keys","Object","theme","breakpoints","values","reverse","reduce","output","key","matches","useMediaQuery","up"],"mappings":";;AAIO,MAAMA,WAAWA,MAAM;AAC5B,QAAMC,WAAWC;AACjB,QAAMC,OAAOC,OAAOD,KAAKE,MAAMC,YAAYC,MAAM,EAAEC;AACnD,SACEL,KAAKM,OAAO,CAACC,QAAQC,QAAQ;AAC3B,UAAMC,UAAUC,cAAcZ,SAASK,YAAYQ,GAAGH,IAAkB;AAEjE,WAAA,CAACD,UAAUE,UAAUD,MAAMD;AAAAA,EAAAA,GACjC,EAAE,KAAK;AAEd;"}
+{"version":3,"file":"useWidth.js","sources":["../../../src/hooks/useWidth.ts"],"sourcesContent":["/* eslint-disable react-hooks/rules-of-hooks */\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { Breakpoint, useMediaQuery, useTheme } from \"@mui/material\";\n\nexport const useWidth = () => {\n  const muiTheme = useTheme();\n  const keys = Object.keys(theme.breakpoints.values).reverse() as Breakpoint[];\n\n  return (\n    keys.reduce<Breakpoint | null>((output, key) => {\n      const matches = useMediaQuery(muiTheme.breakpoints.up(key));\n\n      return !output && matches ? key : output;\n    }, null) || \"xs\"\n  );\n};\n"],"names":["useWidth","muiTheme","useTheme","keys","Object","theme","breakpoints","values","reverse","reduce","output","key","matches","useMediaQuery","up"],"mappings":";;AAIO,MAAMA,WAAWA,MAAM;AAC5B,QAAMC,WAAWC;AACjB,QAAMC,OAAOC,OAAOD,KAAKE,MAAMC,YAAYC,MAAM,EAAEC;AAEnD,SACEL,KAAKM,OAA0B,CAACC,QAAQC,QAAQ;AAC9C,UAAMC,UAAUC,cAAcZ,SAASK,YAAYQ,GAAGH,GAAG,CAAC;AAEnD,WAAA,CAACD,UAAUE,UAAUD,MAAMD;AAAAA,EAAAA,GACjC,IAAI,KAAK;AAEhB;"}