npm - @hitachivantara/uikit-react-core - Versions diffs - 5.88.0 → 5.89.0 - Mend

@hitachivantara/uikit-react-core 5.88.0 → 5.89.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (86) hide show

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

@@ -2,7 +2,8 @@ import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
 const { useClasses, staticClasses } = createClasses("HvTypography", {
   root: {
-    fontFamily: theme.fontFamily.body
+    fontFamily: theme.fontFamily.body,
+    color: "inherit"
   },
   disabled: {
     color: theme.colors.secondary_60

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Typography.styles.js","sources":["../../../src/Typography/Typography.styles.ts"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\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 cursor: \"pointer\",\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: {},\n title1: {},\n title2: {},\n title3: {},\n title4: {},\n body: {},\n label: {},\n captionLabel: {},\n caption1: {},\n caption2: {},\n // legacy variants\n // TODO: remove (legacy or all variants) in v6 in favour of dynamic variants\n \"5xlTitle\": {},\n \"4xlTitle\": {},\n // @ts-ignore non-existent variant\n \"3xlTitle\": {},\n xxlTitle: {},\n xlTitle: {},\n lTitle: {},\n mTitle: {},\n sTitle: {},\n xsTitle: {},\n xxsTitle: {},\n sectionTitle: {\n textTransform: \"uppercase\",\n },\n highlightText: {},\n normalText: {},\n placeholderText: {},\n link: {\n cursor: \"pointer\",\n textDecoration: \"underline\",\n },\n disabledText: {},\n selectedNavText: {},\n vizText: {},\n vizTextDisabled: {},\n xsInlineLink: {},\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,YAAY,kBAAkB,cAAc,gBAAgB;AAAA,EACzE,MAAM;AAAA,IACJ,YAAY,MAAM,WAAW;AAAA,~~EAC/B~~;AAAA,EACA,UAAU;AAAA,IACR,OAAO,MAAM,OAAO;AAAA,EACtB;AAAA,EACA,QAAQ;AAAA,IACN,QAAQ;AAAA,IACR,OAAO,MAAM,OAAO;AAAA,IACpB,gBAAgB;AAAA,EAClB;AAAA,EACA,QAAQ;AAAA,IACN,UAAU;AAAA,IACV,cAAc;AAAA,IACd,YAAY;AAAA,EACd;AAAA;AAAA,EAEA,SAAS,CAAC;AAAA,EACV,QAAQ,CAAC;AAAA,EACT,QAAQ,CAAC;AAAA,EACT,QAAQ,CAAC;AAAA,EACT,QAAQ,CAAC;AAAA,EACT,MAAM,CAAC;AAAA,EACP,OAAO,CAAC;AAAA,EACR,cAAc,CAAC;AAAA,EACf,UAAU,CAAC;AAAA,EACX,UAAU,CAAC;AAAA;AAAA;AAAA,EAGX,YAAY,CAAC;AAAA,EACb,YAAY,CAAC;AAAA;AAAA,EAEb,YAAY,CAAC;AAAA,EACb,UAAU,CAAC;AAAA,EACX,SAAS,CAAC;AAAA,EACV,QAAQ,CAAC;AAAA,EACT,QAAQ,CAAC;AAAA,EACT,QAAQ,CAAC;AAAA,EACT,SAAS,CAAC;AAAA,EACV,UAAU,CAAC;AAAA,EACX,cAAc;AAAA,IACZ,eAAe;AAAA,EACjB;AAAA,EACA,eAAe,CAAC;AAAA,EAChB,YAAY,CAAC;AAAA,EACb,iBAAiB,CAAC;AAAA,EAClB,MAAM;AAAA,IACJ,QAAQ;AAAA,IACR,gBAAgB;AAAA,EAClB;AAAA,EACA,cAAc,CAAC;AAAA,EACf,iBAAiB,CAAC;AAAA,EAClB,SAAS,CAAC;AAAA,EACV,iBAAiB,CAAC;AAAA,EAClB,cAAc,CAAA;AAChB,CAAC;"}
1	+ {"version":3,"file":"Typography.styles.js","sources":["../../../src/Typography/Typography.styles.ts"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { useClasses, staticClasses } = createClasses(\"HvTypography\", {\n root: {\n fontFamily: theme.fontFamily.body,\n color: \"inherit\",\n },\n disabled: {\n color: theme.colors.secondary_60,\n },\n isLink: {\n cursor: \"pointer\",\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: {},\n title1: {},\n title2: {},\n title3: {},\n title4: {},\n body: {},\n label: {},\n captionLabel: {},\n caption1: {},\n caption2: {},\n // legacy variants\n // TODO: remove (legacy or all variants) in v6 in favour of dynamic variants\n \"5xlTitle\": {},\n \"4xlTitle\": {},\n // @ts-ignore non-existent variant\n \"3xlTitle\": {},\n xxlTitle: {},\n xlTitle: {},\n lTitle: {},\n mTitle: {},\n sTitle: {},\n xsTitle: {},\n xxsTitle: {},\n sectionTitle: {\n textTransform: \"uppercase\",\n },\n highlightText: {},\n normalText: {},\n placeholderText: {},\n link: {\n cursor: \"pointer\",\n textDecoration: \"underline\",\n },\n disabledText: {},\n selectedNavText: {},\n vizText: {},\n vizTextDisabled: {},\n xsInlineLink: {},\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,YAAY,kBAAkB,cAAc,gBAAgB;AAAA,EACzE,MAAM;AAAA,IACJ,YAAY,MAAM,WAAW;AAAA,IAC7B,OAAO;AAAA,EACT;AAAA,EACA,UAAU;AAAA,IACR,OAAO,MAAM,OAAO;AAAA,EACtB;AAAA,EACA,QAAQ;AAAA,IACN,QAAQ;AAAA,IACR,OAAO,MAAM,OAAO;AAAA,IACpB,gBAAgB;AAAA,EAClB;AAAA,EACA,QAAQ;AAAA,IACN,UAAU;AAAA,IACV,cAAc;AAAA,IACd,YAAY;AAAA,EACd;AAAA;AAAA,EAEA,SAAS,CAAC;AAAA,EACV,QAAQ,CAAC;AAAA,EACT,QAAQ,CAAC;AAAA,EACT,QAAQ,CAAC;AAAA,EACT,QAAQ,CAAC;AAAA,EACT,MAAM,CAAC;AAAA,EACP,OAAO,CAAC;AAAA,EACR,cAAc,CAAC;AAAA,EACf,UAAU,CAAC;AAAA,EACX,UAAU,CAAC;AAAA;AAAA;AAAA,EAGX,YAAY,CAAC;AAAA,EACb,YAAY,CAAC;AAAA;AAAA,EAEb,YAAY,CAAC;AAAA,EACb,UAAU,CAAC;AAAA,EACX,SAAS,CAAC;AAAA,EACV,QAAQ,CAAC;AAAA,EACT,QAAQ,CAAC;AAAA,EACT,QAAQ,CAAC;AAAA,EACT,SAAS,CAAC;AAAA,EACV,UAAU,CAAC;AAAA,EACX,cAAc;AAAA,IACZ,eAAe;AAAA,EACjB;AAAA,EACA,eAAe,CAAC;AAAA,EAChB,YAAY,CAAC;AAAA,EACb,iBAAiB,CAAC;AAAA,EAClB,MAAM;AAAA,IACJ,QAAQ;AAAA,IACR,gBAAgB;AAAA,EAClB;AAAA,EACA,cAAc,CAAC;AAAA,EACf,iBAAiB,CAAC;AAAA,EAClB,SAAS,CAAC;AAAA,EACV,iBAAiB,CAAC;AAAA,EAClB,cAAc,CAAA;AAChB,CAAC;"}

package/dist/esm/VerticalNavigation/NavigationSlider/NavigationSlider.styles.js CHANGED Viewed

@@ -12,9 +12,6 @@ const { staticClasses, useClasses } = createClasses(
       marginBottom: "8px",
       "& > button": {
         marginLeft: "auto"
-      },
-      "& .HvListItem-startAdornment .color0": {
-        fill: "currentColor"
       }
     },
     listItemSelected: {

package/dist/esm/VerticalNavigation/NavigationSlider/NavigationSlider.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NavigationSlider.styles.js","sources":["../../../../src/VerticalNavigation/NavigationSlider/NavigationSlider.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\n \"HvVerticalNavigationSlider\",\n {\n root: {\n display: \"flex\",\n alignItems: \"center\",\n borderLeft: `4px solid transparent`,\n minHeight: \"48px\",\n color: \"inherit\",\n marginBottom: \"8px\",\n \"& > button\": {\n marginLeft: \"auto\",\n },\n~~\n \"& .HvListItem-startAdornment .color0\": {\n fill: \"currentColor\",\n },\n~~ },\n listItemSelected: {\n background: theme.colors.atmo3,\n borderLeft: `4px solid ${theme.colors.secondary}`,\n },\n listItemFocus: {\n background: theme.colors.atmo3,\n },\n forwardButton: {\n color: \"inherit\",\n },\n listContainer: {},\n listItemDisabled: {},\n },\n);\n"],"names":[],"mappings":";;AAGa,MAAA,EAAE,eAAe,WAAA,IAAe;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,WAAW;AAAA,MACX,OAAO;AAAA,MACP,cAAc;AAAA,MACd,cAAc;AAAA,QACZ,YAAY;AAAA,~~MACd;AAAA,MAEA,wCAAwC;AAAA,QACtC,MAAM;AAAA,~~MAAA;AAAA,~~IAEV~~;AAAA,IACA,kBAAkB;AAAA,MAChB,YAAY,MAAM,OAAO;AAAA,MACzB,YAAY,aAAa,MAAM,OAAO,SAAS;AAAA,IACjD;AAAA,IACA,eAAe;AAAA,MACb,YAAY,MAAM,OAAO;AAAA,IAC3B;AAAA,IACA,eAAe;AAAA,MACb,OAAO;AAAA,IACT;AAAA,IACA,eAAe,CAAC;AAAA,IAChB,kBAAkB,CAAA;AAAA,EAAC;AAEvB;"}
1	+ {"version":3,"file":"NavigationSlider.styles.js","sources":["../../../../src/VerticalNavigation/NavigationSlider/NavigationSlider.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\n \"HvVerticalNavigationSlider\",\n {\n root: {\n display: \"flex\",\n alignItems: \"center\",\n borderLeft: `4px solid transparent`,\n minHeight: \"48px\",\n color: \"inherit\",\n marginBottom: \"8px\",\n \"& > button\": {\n marginLeft: \"auto\",\n },\n },\n listItemSelected: {\n background: theme.colors.atmo3,\n borderLeft: `4px solid ${theme.colors.secondary}`,\n },\n listItemFocus: {\n background: theme.colors.atmo3,\n },\n forwardButton: {\n color: \"inherit\",\n },\n listContainer: {},\n listItemDisabled: {},\n },\n);\n"],"names":[],"mappings":";;AAGa,MAAA,EAAE,eAAe,WAAA,IAAe;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,WAAW;AAAA,MACX,OAAO;AAAA,MACP,cAAc;AAAA,MACd,cAAc;AAAA,QACZ,YAAY;AAAA,MAAA;AAAA,IAEhB;AAAA,IACA,kBAAkB;AAAA,MAChB,YAAY,MAAM,OAAO;AAAA,MACzB,YAAY,aAAa,MAAM,OAAO,SAAS;AAAA,IACjD;AAAA,IACA,eAAe;AAAA,MACb,YAAY,MAAM,OAAO;AAAA,IAC3B;AAAA,IACA,eAAe;AAAA,MACb,OAAO;AAAA,IACT;AAAA,IACA,eAAe,CAAC;AAAA,IAChB,kBAAkB,CAAA;AAAA,EAAC;AAEvB;"}

package/dist/esm/VerticalNavigation/TreeView/TreeViewItem.styles.js CHANGED Viewed

@@ -40,7 +40,6 @@ const { staticClasses, useClasses } = createClasses(
       width: "100%",
       display: "flex",
       justifyContent: "flex-start",
-      color: "inherit",
       alignItems: "center",
       height: "32px",
       borderLeft: `4px solid transparent`,
@@ -126,9 +125,6 @@ const { staticClasses, useClasses } = createClasses(
     },
     icon: {
       display: "flex",
-      "& .color0": {
-        fill: "currentColor"
-      },
       "> div:first-of-type": {
         marginLeft: "var(--icon-margin-left)"
       },

package/dist/esm/VerticalNavigation/TreeView/TreeViewItem.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TreeViewItem.styles.js","sources":["../../../../src/VerticalNavigation/TreeView/TreeViewItem.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { avatarClasses } from \"../../Avatar\";\nimport { outlineStyles } from \"../../utils/focusUtils\";\n\nconst selected = {\n background: theme.colors.atmo3,\n borderLeft: `4px solid ${theme.colors.secondary}`,\n};\n\nconst hover = {\n background: theme.colors.containerBackgroundHover,\n};\n\nexport const { staticClasses, useClasses } = createClasses(\n \"HvVerticalNavigationTreeViewItem\",\n {\n node: {\n listStyle: \"none\",\n minHeight: \"32px\",\n \"&:not(:last-child)\": {\n marginBottom: \"8px\",\n },\n \"&$collapsed\": {\n \"&>$group\": {\n display: \"none\",\n },\n },\n \"&$expanded\": {\n \"&>$group\": {\n display: \"block\",\n },\n },\n \"&$link\": {\n textDecoration: \"none\",\n },\n \"&$hide\": {\n display: \"none\",\n },\n },\n content: {\n width: \"100%\",\n display: \"flex\",\n justifyContent: \"flex-start\",\n ~~color: \"inherit\",\n~~ alignItems: \"center\",\n height: \"32px\",\n borderLeft: `4px solid transparent`,\n paddingRight: theme.space.xs,\n \"&$minimized\": {\n justifyContent: \"center\",\n paddingRight: 0,\n },\n \"$expandable>&\": {\n fontWeight: 600,\n },\n \"$selected>&\": { ...selected },\n // hover\n \":not($disabled>&):not($selected>&):hover\": { ...hover },\n \":not($disabled)$selected>&:hover\": {},\n\n // focus\n \":not($disabled>&):not($selected>&):focus-visible\": { ...hover },\n \":not($disabled>&):not($selected>&).focus-visible\": { ...hover },\n\n \":focus-visible $focused>&\": {\n ...outlineStyles,\n },\n\n \".focus-visible $focused>&\": {\n ...outlineStyles,\n },\n \"$focused>&\": {\n ...hover,\n },\n\n \"&[disabled], &:active\": {\n outline: \"none\",\n },\n\n \"&:focus\": {\n outline: \"none\",\n },\n\n \"&:focus-visible\": {\n ...outlineStyles,\n },\n\n \"&.focus-visible\": {\n ...outlineStyles,\n },\n\n // cursor\n cursor: \"pointer\",\n \"& \": {\n cursor: \"pointer\",\n },\n\n \"$disabled>&\": {\n cursor: \"not-allowed\",\n \"& *\": {\n cursor: \"not-allowed\",\n },\n },\n },\n link: {},\n group: {\n margin: \"8px 0 0 0\",\n padding: 0,\n },\n disabled: {},\n expandable: {\n fontWeight: 600,\n },\n collapsed: {},\n expanded: {},\n selectable: {},\n unselectable: {},\n selected: {},\n unselected: {},\n focused: {},\n minimized: {},\n hide: {},\n label: {\n display: \"flex\",\n flexGrow: 1,\n maxWidth: \"100%\",\n },\n labelIcon: {\n maxWidth: \"calc(100% - 32px)\",\n },\n labelExpandable: {\n maxWidth: \"calc(100% - 32px)\",\n\n \"&$labelIcon\": {\n maxWidth: \"calc(100% - 64px)\",\n },\n },\n icon: {\n display: \"flex\",\n \"~~& .color0\": {\n fill: \"currentColor\",\n },\n \"~~> div:first-of-type\": {\n marginLeft: \"var(--icon-margin-left)\",\n },\n \"> div:nth-of-type(2)\": {\n width: \"14px\",\n marginLeft: \"auto\",\n },\n [`&& .${avatarClasses.root}`]: {\n fontSize: \"15px\",\n },\n },\n },\n);\n"],"names":["avatarClasses"],"mappings":";;;;;AAMA,MAAM,WAAW;AAAA,EACf,YAAY,MAAM,OAAO;AAAA,EACzB,YAAY,aAAa,MAAM,OAAO,SAAS;AACjD;AAEA,MAAM,QAAQ;AAAA,EACZ,YAAY,MAAM,OAAO;AAC3B;AAEa,MAAA,EAAE,eAAe,WAAA,IAAe;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,MAAM;AAAA,MACJ,WAAW;AAAA,MACX,WAAW;AAAA,MACX,sBAAsB;AAAA,QACpB,cAAc;AAAA,MAChB;AAAA,MACA,eAAe;AAAA,QACb,YAAY;AAAA,UACV,SAAS;AAAA,QAAA;AAAA,MAEb;AAAA,MACA,cAAc;AAAA,QACZ,YAAY;AAAA,UACV,SAAS;AAAA,QAAA;AAAA,MAEb;AAAA,MACA,UAAU;AAAA,QACR,gBAAgB;AAAA,MAClB;AAAA,MACA,UAAU;AAAA,QACR,SAAS;AAAA,MAAA;AAAA,IAEb;AAAA,IACA,SAAS;AAAA,MACP,OAAO;AAAA,MACP,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB,~~OAAO;AAAA,MACP,~~YAAY;AAAA,MACZ,QAAQ;AAAA,MACR,YAAY;AAAA,MACZ,cAAc,MAAM,MAAM;AAAA,MAC1B,eAAe;AAAA,QACb,gBAAgB;AAAA,QAChB,cAAc;AAAA,MAChB;AAAA,MACA,iBAAiB;AAAA,QACf,YAAY;AAAA,MACd;AAAA,MACA,eAAe,EAAE,GAAG,SAAS;AAAA;AAAA,MAE7B,4CAA4C,EAAE,GAAG,MAAM;AAAA,MACvD,oCAAoC,CAAC;AAAA;AAAA,MAGrC,oDAAoD,EAAE,GAAG,MAAM;AAAA,MAC/D,oDAAoD,EAAE,GAAG,MAAM;AAAA,MAE/D,8BAA8B;AAAA,QAC5B,GAAG;AAAA,MACL;AAAA,MAEA,6BAA6B;AAAA,QAC3B,GAAG;AAAA,MACL;AAAA,MACA,cAAc;AAAA,QACZ,GAAG;AAAA,MACL;AAAA,MAEA,yBAAyB;AAAA,QACvB,SAAS;AAAA,MACX;AAAA,MAEA,WAAW;AAAA,QACT,SAAS;AAAA,MACX;AAAA,MAEA,mBAAmB;AAAA,QACjB,GAAG;AAAA,MACL;AAAA,MAEA,mBAAmB;AAAA,QACjB,GAAG;AAAA,MACL;AAAA;AAAA,MAGA,QAAQ;AAAA,MACR,OAAO;AAAA,QACL,QAAQ;AAAA,MACV;AAAA,MAEA,eAAe;AAAA,QACb,QAAQ;AAAA,QACR,OAAO;AAAA,UACL,QAAQ;AAAA,QAAA;AAAA,MACV;AAAA,IAEJ;AAAA,IACA,MAAM,CAAC;AAAA,IACP,OAAO;AAAA,MACL,QAAQ;AAAA,MACR,SAAS;AAAA,IACX;AAAA,IACA,UAAU,CAAC;AAAA,IACX,YAAY;AAAA,MACV,YAAY;AAAA,IACd;AAAA,IACA,WAAW,CAAC;AAAA,IACZ,UAAU,CAAC;AAAA,IACX,YAAY,CAAC;AAAA,IACb,cAAc,CAAC;AAAA,IACf,UAAU,CAAC;AAAA,IACX,YAAY,CAAC;AAAA,IACb,SAAS,CAAC;AAAA,IACV,WAAW,CAAC;AAAA,IACZ,MAAM,CAAC;AAAA,IACP,OAAO;AAAA,MACL,SAAS;AAAA,MACT,UAAU;AAAA,MACV,UAAU;AAAA,IACZ;AAAA,IACA,WAAW;AAAA,MACT,UAAU;AAAA,IACZ;AAAA,IACA,iBAAiB;AAAA,MACf,UAAU;AAAA,MAEV,eAAe;AAAA,QACb,UAAU;AAAA,MAAA;AAAA,IAEd;AAAA,IACA,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,~~aAAa;AAAA,QACX,MAAM;AAAA,MACR;AAAA,MACA,~~uBAAuB;AAAA,QACrB,YAAY;AAAA,MACd;AAAA,MACA,wBAAwB;AAAA,QACtB,OAAO;AAAA,QACP,YAAY;AAAA,MACd;AAAA,MACA,CAAC,OAAOA,gBAAc,IAAI,EAAE,GAAG;AAAA,QAC7B,UAAU;AAAA,MAAA;AAAA,IACZ;AAAA,EACF;AAEJ;"}
1	+ {"version":3,"file":"TreeViewItem.styles.js","sources":["../../../../src/VerticalNavigation/TreeView/TreeViewItem.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { avatarClasses } from \"../../Avatar\";\nimport { outlineStyles } from \"../../utils/focusUtils\";\n\nconst selected = {\n background: theme.colors.atmo3,\n borderLeft: `4px solid ${theme.colors.secondary}`,\n};\n\nconst hover = {\n background: theme.colors.containerBackgroundHover,\n};\n\nexport const { staticClasses, useClasses } = createClasses(\n \"HvVerticalNavigationTreeViewItem\",\n {\n node: {\n listStyle: \"none\",\n minHeight: \"32px\",\n \"&:not(:last-child)\": {\n marginBottom: \"8px\",\n },\n \"&$collapsed\": {\n \"&>$group\": {\n display: \"none\",\n },\n },\n \"&$expanded\": {\n \"&>$group\": {\n display: \"block\",\n },\n },\n \"&$link\": {\n textDecoration: \"none\",\n },\n \"&$hide\": {\n display: \"none\",\n },\n },\n content: {\n width: \"100%\",\n display: \"flex\",\n justifyContent: \"flex-start\",\n alignItems: \"center\",\n height: \"32px\",\n borderLeft: `4px solid transparent`,\n paddingRight: theme.space.xs,\n \"&$minimized\": {\n justifyContent: \"center\",\n paddingRight: 0,\n },\n \"$expandable>&\": {\n fontWeight: 600,\n },\n \"$selected>&\": { ...selected },\n // hover\n \":not($disabled>&):not($selected>&):hover\": { ...hover },\n \":not($disabled)$selected>&:hover\": {},\n\n // focus\n \":not($disabled>&):not($selected>&):focus-visible\": { ...hover },\n \":not($disabled>&):not($selected>&).focus-visible\": { ...hover },\n\n \":focus-visible $focused>&\": {\n ...outlineStyles,\n },\n\n \".focus-visible $focused>&\": {\n ...outlineStyles,\n },\n \"$focused>&\": {\n ...hover,\n },\n\n \"&[disabled], &:active\": {\n outline: \"none\",\n },\n\n \"&:focus\": {\n outline: \"none\",\n },\n\n \"&:focus-visible\": {\n ...outlineStyles,\n },\n\n \"&.focus-visible\": {\n ...outlineStyles,\n },\n\n // cursor\n cursor: \"pointer\",\n \"& \": {\n cursor: \"pointer\",\n },\n\n \"$disabled>&\": {\n cursor: \"not-allowed\",\n \"& *\": {\n cursor: \"not-allowed\",\n },\n },\n },\n link: {},\n group: {\n margin: \"8px 0 0 0\",\n padding: 0,\n },\n disabled: {},\n expandable: {\n fontWeight: 600,\n },\n collapsed: {},\n expanded: {},\n selectable: {},\n unselectable: {},\n selected: {},\n unselected: {},\n focused: {},\n minimized: {},\n hide: {},\n label: {\n display: \"flex\",\n flexGrow: 1,\n maxWidth: \"100%\",\n },\n labelIcon: {\n maxWidth: \"calc(100% - 32px)\",\n },\n labelExpandable: {\n maxWidth: \"calc(100% - 32px)\",\n\n \"&$labelIcon\": {\n maxWidth: \"calc(100% - 64px)\",\n },\n },\n icon: {\n display: \"flex\",\n \"> div:first-of-type\": {\n marginLeft: \"var(--icon-margin-left)\",\n },\n \"> div:nth-of-type(2)\": {\n width: \"14px\",\n marginLeft: \"auto\",\n },\n [`&& .${avatarClasses.root}`]: {\n fontSize: \"15px\",\n },\n },\n },\n);\n"],"names":["avatarClasses"],"mappings":"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"}

package/dist/esm/index.js CHANGED Viewed

@@ -234,15 +234,17 @@ import { staticClasses as staticClasses96 } from "./Table/Table.styles.js";
 import { HvTable } from "./Table/Table.js";
 import { staticClasses as staticClasses97 } from "./Table/TableContainer/TableContainer.styles.js";
 import { HvTableContainer } from "./Table/TableContainer/TableContainer.js";
-import { staticClasses as staticClasses98 } from "./Table/TableBody/TableBody.styles.js";
+import { staticClasses as staticClasses98 } from "./Table/TableSection/TableSection.styles.js";
+import { HvTableSection } from "./Table/TableSection/TableSection.js";
+import { staticClasses as staticClasses99 } from "./Table/TableBody/TableBody.styles.js";
 import { HvTableBody } from "./Table/TableBody/TableBody.js";
-import { staticClasses as staticClasses99 } from "./Table/TableHead/TableHead.styles.js";
+import { staticClasses as staticClasses100 } from "./Table/TableHead/TableHead.styles.js";
 import { HvTableHead } from "./Table/TableHead/TableHead.js";
-import { staticClasses as staticClasses100 } from "./Table/TableHeader/TableHeader.styles.js";
+import { staticClasses as staticClasses101 } from "./Table/TableHeader/TableHeader.styles.js";
 import { HvTableHeader } from "./Table/TableHeader/TableHeader.js";
-import { staticClasses as staticClasses101 } from "./Table/TableRow/TableRow.styles.js";
+import { staticClasses as staticClasses102 } from "./Table/TableRow/TableRow.styles.js";
 import { HvTableRow } from "./Table/TableRow/TableRow.js";
-import { staticClasses as staticClasses102 } from "./Table/TableCell/TableCell.styles.js";
+import { staticClasses as staticClasses103 } from "./Table/TableCell/TableCell.styles.js";
 import { HvTableCell } from "./Table/TableCell/TableCell.js";
 import { useHvTableStyles } from "./Table/hooks/useHvTableStyles.js";
 import { useHvSortBy } from "./Table/hooks/useHvSortBy.js";
@@ -261,49 +263,48 @@ import { HvDateColumnCell } from "./Table/renderers/DateColumnCell.js";
 import { HvDropdownColumnCell } from "./Table/renderers/DropdownColumnCell.js";
 import { HvProgressColumnCell, normalizeProgressBar } from "./Table/renderers/ProgressColumnCell.js";
 import { HvSwitchColumnCell } from "./Table/renderers/SwitchColumnCell.js";
-import { staticClasses as staticClasses103 } from "./Tabs/Tabs.styles.js";
+import { staticClasses as staticClasses104 } from "./Tabs/Tabs.styles.js";
 import { HvTabs } from "./Tabs/Tabs.js";
-import { staticClasses as staticClasses104 } from "./Tabs/Tab/Tab.styles.js";
+import { staticClasses as staticClasses105 } from "./Tabs/Tab/Tab.styles.js";
 import { HvTab } from "./Tabs/Tab/Tab.js";
-import { staticClasses as staticClasses105 } from "./Tag/Tag.styles.js";
+import { staticClasses as staticClasses106 } from "./Tag/Tag.styles.js";
 import { HvTag } from "./Tag/Tag.js";
-import { staticClasses as staticClasses106 } from "./TagsInput/TagsInput.styles.js";
+import { staticClasses as staticClasses107 } from "./TagsInput/TagsInput.styles.js";
 import { HvTagsInput } from "./TagsInput/TagsInput.js";
-import { staticClasses as staticClasses107 } from "./TextArea/TextArea.styles.js";
+import { staticClasses as staticClasses108 } from "./TextArea/TextArea.styles.js";
 import { HvTextArea } from "./TextArea/TextArea.js";
-import { staticClasses as staticClasses108 } from "./TimeAgo/TimeAgo.styles.js";
+import { staticClasses as staticClasses109 } from "./TimeAgo/TimeAgo.styles.js";
 import { HvTimeAgo } from "./TimeAgo/TimeAgo.js";
-import { staticClasses as staticClasses109 } from "./TimePicker/TimePicker.styles.js";
+import { staticClasses as staticClasses110 } from "./TimePicker/TimePicker.styles.js";
 import { HvTimePicker } from "./TimePicker/TimePicker.js";
 import { HvToggleButton } from "./ToggleButton/ToggleButton.js";
-import { staticClasses as staticClasses110 } from "./Tooltip/Tooltip.styles.js";
+import { staticClasses as staticClasses111 } from "./Tooltip/Tooltip.styles.js";
 import { HvTooltip } from "./Tooltip/Tooltip.js";
-import { staticClasses as staticClasses111 } from "./TreeView/TreeView.styles.js";
+import { staticClasses as staticClasses112 } from "./TreeView/TreeView.styles.js";
 import { HvTreeView } from "./TreeView/TreeView.js";
-import { staticClasses as staticClasses112 } from "./TreeView/TreeItem/TreeItem.styles.js";
+import { staticClasses as staticClasses113 } from "./TreeView/TreeItem/TreeItem.styles.js";
 import { HvTreeItem } from "./TreeView/TreeItem/TreeItem.js";
 import { useHvTreeItem } from "./TreeView/TreeItem/useHvTreeItem.js";
-import { staticClasses as staticClasses113 } from "./VerticalNavigation/VerticalNavigation.styles.js";
+import { staticClasses as staticClasses114 } from "./VerticalNavigation/VerticalNavigation.styles.js";
 import { HvVerticalNavigation } from "./VerticalNavigation/VerticalNavigation.js";
-import { staticClasses as staticClasses114 } from "./VerticalNavigation/Header/Header.styles.js";
+import { staticClasses as staticClasses115 } from "./VerticalNavigation/Header/Header.styles.js";
 import { HvVerticalNavigationHeader } from "./VerticalNavigation/Header/Header.js";
-import { staticClasses as staticClasses115 } from "./VerticalNavigation/Actions/Actions.styles.js";
+import { staticClasses as staticClasses116 } from "./VerticalNavigation/Actions/Actions.styles.js";
 import { HvVerticalNavigationActions } from "./VerticalNavigation/Actions/Actions.js";
-import { staticClasses as staticClasses116 } from "./VerticalNavigation/Actions/Action.styles.js";
+import { staticClasses as staticClasses117 } from "./VerticalNavigation/Actions/Action.styles.js";
 import { HvVerticalNavigationAction } from "./VerticalNavigation/Actions/Action.js";
-import { staticClasses as staticClasses117 } from "./VerticalNavigation/Navigation/Navigation.styles.js";
+import { staticClasses as staticClasses118 } from "./VerticalNavigation/Navigation/Navigation.styles.js";
 import { HvVerticalNavigationTree } from "./VerticalNavigation/Navigation/Navigation.js";
-import { staticClasses as staticClasses118 } from "./VerticalNavigation/NavigationSlider/NavigationSlider.styles.js";
+import { staticClasses as staticClasses119 } from "./VerticalNavigation/NavigationSlider/NavigationSlider.styles.js";
 import { HvVerticalNavigationSlider } from "./VerticalNavigation/NavigationSlider/NavigationSlider.js";
-import { staticClasses as staticClasses119 } from "./VerticalNavigation/TreeView/TreeView.styles.js";
+import { staticClasses as staticClasses120 } from "./VerticalNavigation/TreeView/TreeView.styles.js";
 import { HvVerticalNavigationTreeView } from "./VerticalNavigation/TreeView/TreeView.js";
-import { staticClasses as staticClasses120 } from "./VerticalNavigation/TreeView/TreeViewItem.styles.js";
+import { staticClasses as staticClasses121 } from "./VerticalNavigation/TreeView/TreeViewItem.styles.js";
 import { HvVerticalNavigationTreeViewItem } from "./VerticalNavigation/TreeView/TreeViewItem.js";
 import { VerticalNavigationContext } from "./VerticalNavigation/VerticalNavigationContext.js";
-import { staticClasses as staticClasses121 } from "./TableSection/TableSection.styles.js";
-import { HvTableSection } from "./TableSection/TableSection.js";
 import { HvIconButton } from "./IconButton/IconButton.js";
-import { staticClasses as staticClasses122 } from "./Skeleton/Skeleton.styles.js";
+import { HvIconContainer, staticClasses as staticClasses122, staticClasses as staticClasses123, useClasses } from "./IconContainer/IconContainer.js";
+import { staticClasses as staticClasses124 } from "./Skeleton/Skeleton.styles.js";
 import { HvSkeleton } from "./Skeleton/Skeleton.js";
 import { EmotionContext, HvThemeContext, defaultCacheKey, defaultEmotionCache } from "@hitachivantara/uikit-react-shared";
 export {
@@ -374,6 +375,7 @@ export {
   HvHeaderMenuItem,
   HvHeaderNavigation,
   HvIconButton,
+  HvIconContainer,
   HvInfoMessage,
   HvInlineEditor,
   HvInput,
@@ -450,8 +452,8 @@ export {
   VerticalNavigationContext,
   staticClasses17 as accordionClasses,
   staticClasses18 as actionBarClasses,
-  staticClasses116 as actionClasses,
-  staticClasses115 as actionsClasses,
+  staticClasses117 as actionClasses,
+  staticClasses116 as actionsClasses,
   staticClasses19 as actionsGenericClasses,
   staticClasses7 as adornmentClasses,
   staticClasses21 as appSwitcherActionClasses,
@@ -541,6 +543,7 @@ export {
   hvSwitchColumn,
   hvTagColumn,
   hvTextColumn,
+  staticClasses122 as iconContainerClasses,
   iconVariant,
   increaseSize,
   staticClasses10 as infoMessageClasses,
@@ -585,39 +588,41 @@ export {
   setId,
   setUid,
   staticClasses89 as simpleGridClasses,
-  staticClasses122 as skeletonClasses,
+  staticClasses124 as skeletonClasses,
   staticClasses90 as sliderClasses,
   staticClasses91 as snackbarClasses,
   staticClasses92 as snackbarContentClasses,
   staticClasses93 as snackbarProviderClasses,
   staticClasses94 as stackClasses,
+  staticClasses123 as staticClasses,
   staticClasses14 as suggestionsClasses,
   staticClasses95 as switchClasses,
-  staticClasses104 as tabClasses,
-  staticClasses98 as tableBodyClasses,
-  staticClasses102 as tableCellClasses,
+  staticClasses105 as tabClasses,
+  staticClasses99 as tableBodyClasses,
+  staticClasses103 as tableCellClasses,
   staticClasses96 as tableClasses,
   staticClasses97 as tableContainerClasses,
-  staticClasses99 as tableHeadClasses,
-  staticClasses100 as tableHeaderClasses,
-  staticClasses101 as tableRowClasses,
-  staticClasses121 as tableSectionClasses,
-  staticClasses103 as tabsClasses,
-  staticClasses105 as tagClasses,
-  staticClasses106 as tagsInputClasses,
-  staticClasses107 as textAreaClasses,
+  staticClasses100 as tableHeadClasses,
+  staticClasses101 as tableHeaderClasses,
+  staticClasses102 as tableRowClasses,
+  staticClasses98 as tableSectionClasses,
+  staticClasses104 as tabsClasses,
+  staticClasses106 as tagClasses,
+  staticClasses107 as tagsInputClasses,
+  staticClasses108 as textAreaClasses,
   theme,
   themes,
-  staticClasses108 as timeAgoClasses,
-  staticClasses109 as timePickerClasses,
-  staticClasses110 as tooltipClasses,
-  staticClasses112 as treeItemClasses,
-  staticClasses111 as treeView2Classes,
-  staticClasses119 as treeViewClasses,
-  staticClasses120 as treeViewItemClasses,
+  staticClasses109 as timeAgoClasses,
+  staticClasses110 as timePickerClasses,
+  staticClasses111 as tooltipClasses,
+  staticClasses113 as treeItemClasses,
+  staticClasses112 as treeView2Classes,
+  staticClasses120 as treeViewClasses,
+  staticClasses121 as treeViewItemClasses,
   staticClasses as typographyClasses,
   typographyVariants,
   uniqueId,
+  useClasses,
   useClickOutside,
   useComputation,
   useControlled,
@@ -650,10 +655,10 @@ export {
   useTheme,
   useUniqueId,
   useWidth,
-  staticClasses113 as verticalNavigationClasses,
-  staticClasses114 as verticalNavigationHeaderClasses,
-  staticClasses118 as verticalNavigationSliderClasses,
-  staticClasses117 as verticalNavigationTreeClasses,
+  staticClasses114 as verticalNavigationClasses,
+  staticClasses115 as verticalNavigationHeaderClasses,
+  staticClasses119 as verticalNavigationSliderClasses,
+  staticClasses118 as verticalNavigationTreeClasses,
   staticClasses86 as verticalScrollListItemClasses,
   staticClasses11 as warningTextClasses,
   withTooltip,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/esm/utils/Callout.js ADDED Viewed

@@ -0,0 +1,132 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import SnackbarContent from "@mui/material/SnackbarContent";
+import { Close } from "@hitachivantara/uikit-react-icons";
+import { useDefaultProps, createClasses, useTheme } from "@hitachivantara/uikit-react-utils";
+import { theme } from "@hitachivantara/uikit-styles";
+import { iconVariant } from "./iconVariant.js";
+import { HvActionsGeneric } from "../ActionsGeneric/ActionsGeneric.js";
+import { HvButton } from "../Button/Button.js";
+const { useClasses, staticClasses } = createClasses("HvCallout", {
+  root: {
+    position: "relative",
+    boxShadow: "none",
+    flexWrap: "nowrap",
+    padding: 0
+  },
+  success: {
+    backgroundColor: theme.colors.positive_20
+  },
+  warning: {
+    backgroundColor: theme.colors.warning_20
+  },
+  error: {
+    backgroundColor: theme.colors.negative_20
+  },
+  default: {
+    backgroundColor: theme.colors.neutral_20
+  },
+  message: {
+    display: "flex",
+    alignItems: "center",
+    padding: 0,
+    color: theme.colors.base_dark
+  },
+  messageContent: {
+    textWrap: "balance",
+    overflow: "hidden",
+    wordBreak: "break-word"
+  },
+  messageIcon: {
+    "& svg .color0": {
+      fill: "inherit"
+    }
+  },
+  action: {
+    marginRight: 0
+  },
+  actionContent: {
+    display: "flex",
+    flexDirection: "column",
+    height: "100%",
+    justifyContent: "space-between",
+    gap: theme.space.xs
+  },
+  actionCustom: {
+    flex: "0 0 auto"
+  },
+  actionClose: {
+    alignSelf: "flex-end"
+  }
+});
+const HvCallout = forwardRef(function HvCallout2(props, ref) {
+  const {
+    id,
+    classes: classesProp,
+    className,
+    showClose,
+    showIcon,
+    customIcon,
+    variant = "default",
+    onClose,
+    actions,
+    onAction,
+    actionsPosition: actionsPositionProp = "auto",
+    children,
+    actionProps,
+    ...others
+  } = useDefaultProps("HvCallout", props);
+  const { classes, cx } = useClasses(classesProp, false);
+  const { activeTheme } = useTheme();
+  const icon = customIcon || showIcon && iconVariant(variant, "inherit");
+  const actionsPosition = actionsPositionProp === "auto" ? "inline" : actionsPositionProp;
+  const actionsContent = /* @__PURE__ */ jsx(
+    HvActionsGeneric,
+    {
+      id,
+      className: classes.actionCustom,
+      variant: showClose ? "semantic" : activeTheme?.snackbar.actionButtonVariant,
+      actions,
+      onAction
+    }
+  );
+  const showCustomActions = actions && actionsPosition === "bottom-right";
+  return /* @__PURE__ */ jsx(
+    SnackbarContent,
+    {
+      ref,
+      id,
+      classes: {
+        root: cx(classes.root, classes[variant], className),
+        message: classes.message,
+        action: classes.action
+      },
+      message: /* @__PURE__ */ jsxs(Fragment, { children: [
+        icon && /* @__PURE__ */ jsx("div", { className: classes.messageIcon, children: icon }),
+        /* @__PURE__ */ jsx("div", { className: classes.messageContent, children }),
+        actions && actionsPosition === "inline" && actionsContent
+      ] }),
+      action: (showClose || showCustomActions) && /* @__PURE__ */ jsxs("div", { className: classes.actionContent, children: [
+        showClose && /* @__PURE__ */ jsx(
+          HvButton,
+          {
+            icon: true,
+            className: classes.actionClose,
+            variant: "semantic",
+            "aria-label": "Close",
+            onClick: (evt) => onClose?.(evt, "clickaway"),
+            ...actionProps,
+            children: /* @__PURE__ */ jsx(Close, { size: "XS" })
+          }
+        ),
+        showCustomActions && actionsContent
+      ] }),
+      ...others
+    }
+  );
+});
+export {
+  HvCallout,
+  staticClasses,
+  useClasses
+};

package/dist/esm/utils/Callout.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Callout.js","sources":["../../../src/utils/Callout.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { SnackbarProps as MuiSnackbarProps } from \"@mui/material/Snackbar\";\nimport SnackbarContent, {\n type SnackbarContentProps as MuiSnackbarContentProps,\n} from \"@mui/material/SnackbarContent\";\nimport { Close } from \"@hitachivantara/uikit-react-icons\";\nimport {\n createClasses,\n useDefaultProps,\n useTheme,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { HvActionsGeneric, HvActionsGenericProps } from \"../ActionsGeneric\";\nimport { HvButton, HvButtonProps } from \"../Button\";\nimport { iconVariant } from \"./iconVariant\";\n\nexport const { useClasses, staticClasses } = createClasses(\"HvCallout\", {\n root: {\n position: \"relative\",\n boxShadow: \"none\",\n flexWrap: \"nowrap\",\n padding: 0,\n },\n success: {\n backgroundColor: theme.colors.positive_20,\n },\n warning: {\n backgroundColor: theme.colors.warning_20,\n },\n error: {\n backgroundColor: theme.colors.negative_20,\n },\n default: {\n backgroundColor: theme.colors.neutral_20,\n },\n message: {\n display: \"flex\",\n alignItems: \"center\",\n padding: 0,\n color: theme.colors.base_dark,\n },\n messageContent: {\n textWrap: \"balance\",\n overflow: \"hidden\",\n wordBreak: \"break-word\",\n },\n messageIcon: {\n \"& svg .color0\": {\n fill: \"inherit\",\n },\n },\n action: {\n marginRight: 0,\n },\n actionContent: {\n display: \"flex\",\n flexDirection: \"column\",\n height: \"100%\",\n justifyContent: \"space-between\",\n gap: theme.space.xs,\n },\n actionCustom: {\n flex: \"0 0 auto\",\n },\n actionClose: {\n alignSelf: \"flex-end\",\n },\n});\n\nexport type HvCalloutVariant = \"success\" | \"warning\" | \"error\" | \"default\";\n\nexport type HvCalloutActionPosition = \"auto\" | \"inline\" | \"bottom-right\";\n\nexport type HvCalloutClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCalloutProps\n extends Omit<MuiSnackbarContentProps, \"variant\" | \"classes\" | \"onClose\"> {\n /** The message to display. */\n children?: React.ReactNode;\n /** Variant of the snackbar. */\n variant?: HvCalloutVariant;\n /** Controls if the associated icon to the variant should be shown. */\n showIcon?: boolean;\n /** Controls whether to show the close icon */\n showClose?: boolean;\n /** Custom icon to replace the variant default. */\n customIcon?: React.ReactNode;\n /** @inheritdoc */\n onClose?: MuiSnackbarProps[\"onClose\"];\n /** Actions to display on the right side. */\n actions?: HvActionsGenericProps[\"actions\"];\n /**\n * The callback function called when an action is triggered, receiving `action` as parameter.\n *\n * @deprecated Use `onAction` instead.\n * */\n actionsCallback?: HvActionsGenericProps[\"actionsCallback\"];\n /** The callback function called when an action is triggered, receiving `action` as parameter. */\n onAction?: HvActionsGenericProps[\"onAction\"];\n /** The position property of the header. */\n actionsPosition?: HvCalloutActionPosition;\n /** The props to pass down to the Action Container. */\n actionProps?: Partial<HvButtonProps>;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvCalloutClasses;\n}\n\n/**\n * `HvCallout` is the internal content handler for the snackbars and banners. Might be promoted to a component.\n * @private @internal\n */\nexport const HvCallout = forwardRef<\n // no-indent\n HTMLDivElement,\n HvCalloutProps\n>(function HvCallout(props, ref) {\n const {\n id,\n classes: classesProp,\n className,\n showClose,\n showIcon,\n customIcon,\n variant = \"default\",\n onClose,\n actions,\n onAction,\n actionsPosition: actionsPositionProp = \"auto\",\n children,\n actionProps,\n ...others\n } = useDefaultProps(\"HvCallout\", props);\n const { classes, cx } = useClasses(classesProp, false);\n const { activeTheme } = useTheme();\n const icon = customIcon || (showIcon && iconVariant(variant, \"inherit\"));\n\n // TODO: consider making this flex-flow only, so it adapts according to the\n // content length, available space, number of actions, etc.\n const actionsPosition =\n actionsPositionProp === \"auto\" ? \"inline\" : actionsPositionProp;\n\n const actionsContent = (\n <HvActionsGeneric\n id={id}\n className={classes.actionCustom}\n variant={\n showClose\n ? \"semantic\"\n : (activeTheme?.snackbar.actionButtonVariant as any)\n }\n actions={actions}\n onAction={onAction}\n />\n );\n\n const showCustomActions = actions && actionsPosition === \"bottom-right\";\n\n return (\n <SnackbarContent\n ref={ref}\n id={id}\n classes={{\n root: cx(classes.root, classes[variant], className),\n message: classes.message,\n action: classes.action,\n }}\n message={\n <>\n {icon && <div className={classes.messageIcon}>{icon}</div>}\n <div className={classes.messageContent}>{children}</div>\n {actions && actionsPosition === \"inline\" && actionsContent}\n </>\n }\n action={\n (showClose || showCustomActions) && (\n <div className={classes.actionContent}>\n {showClose && (\n <HvButton\n icon\n className={classes.actionClose}\n variant=\"semantic\"\n aria-label=\"Close\"\n onClick={(evt) => onClose?.(evt, \"clickaway\")}\n {...actionProps}\n >\n <Close size=\"XS\" />\n </HvButton>\n )}\n {showCustomActions && actionsContent}\n </div>\n )\n }\n {...others}\n />\n );\n});\n"],"names":["HvCallout"],"mappings":"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"}