@hitachivantara/uikit-react-core 5.86.0 → 5.87.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 (19) hide show
  1. package/dist/cjs/ColorPicker/Fields/Fields.styles.cjs +3 -2
  2. package/dist/cjs/ColorPicker/PresetColors/PresetColors.styles.cjs +1 -1
  3. package/dist/cjs/ColorPicker/SavedColors/SavedColors.styles.cjs +2 -2
  4. package/dist/cjs/EmptyState/EmptyState.styles.cjs +1 -1
  5. package/dist/cjs/Tag/Tag.styles.cjs +1 -1
  6. package/dist/esm/ActionBar/ActionBar.js.map +1 -1
  7. package/dist/esm/ColorPicker/Fields/Fields.styles.js +3 -2
  8. package/dist/esm/ColorPicker/Fields/Fields.styles.js.map +1 -1
  9. package/dist/esm/ColorPicker/PresetColors/PresetColors.styles.js +1 -1
  10. package/dist/esm/ColorPicker/PresetColors/PresetColors.styles.js.map +1 -1
  11. package/dist/esm/ColorPicker/SavedColors/SavedColors.styles.js +2 -2
  12. package/dist/esm/ColorPicker/SavedColors/SavedColors.styles.js.map +1 -1
  13. package/dist/esm/EmptyState/EmptyState.styles.js +1 -1
  14. package/dist/esm/EmptyState/EmptyState.styles.js.map +1 -1
  15. package/dist/esm/Grid/Grid.js.map +1 -1
  16. package/dist/esm/Tag/Tag.styles.js +1 -1
  17. package/dist/esm/Tag/Tag.styles.js.map +1 -1
  18. package/dist/types/index.d.ts +3 -10
  19. package/package.json +6 -6
package/dist/cjs/ColorPicker/Fields/Fields.styles.cjs CHANGED
@@ -1,6 +1,7 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
3
  const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
4
+ const uikitStyles = require("@hitachivantara/uikit-styles");
4
5
  const name = "HvColorPicker-Fields";
5
6
  const { staticClasses, useClasses } = uikitReactUtils.createClasses(name, {
6
7
  fields: {
@@ -11,7 +12,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses(name, {
11
12
  },
12
13
  single: {
13
14
  maxWidth: "50px",
14
- paddingLeft: "4px",
15
+ paddingLeft: uikitStyles.theme.space.xxs,
15
16
  "& input": {
16
17
  marginLeft: 5,
17
18
  marginRight: 5
@@ -22,7 +23,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses(name, {
22
23
  },
23
24
  double: {
24
25
  maxWidth: "82px",
25
- paddingRight: "4px",
26
+ paddingRight: uikitStyles.theme.space.xxs,
26
27
  "& input": {
27
28
  textTransform: "uppercase",
28
29
  marginLeft: 5,
package/dist/cjs/ColorPicker/PresetColors/PresetColors.styles.cjs CHANGED
@@ -20,7 +20,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses(name, {
20
20
  swatchWrap: {
21
21
  width: "32px",
22
22
  height: "32px",
23
- margin: "4px",
23
+ margin: uikitStyles.theme.space.xxs,
24
24
  "& > span > div": {
25
25
  borderRadius: uikitStyles.theme.radii.base
26
26
  }
package/dist/cjs/ColorPicker/SavedColors/SavedColors.styles.cjs CHANGED
@@ -5,7 +5,7 @@ const uikitStyles = require("@hitachivantara/uikit-styles");
5
5
  const name = "HvColorPicker-SavedColors";
6
6
  const { staticClasses, useClasses } = uikitReactUtils.createClasses(name, {
7
7
  addButton: {
8
- margin: "4px",
8
+ margin: uikitStyles.theme.space.xxs,
9
9
  width: "32px",
10
10
  height: "32px"
11
11
  },
@@ -22,7 +22,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses(name, {
22
22
  swatchWrap: {
23
23
  width: "32px",
24
24
  height: "32px",
25
- margin: "4px",
25
+ margin: uikitStyles.theme.space.xxs,
26
26
  "& > span > div": {
27
27
  borderRadius: uikitStyles.theme.radii.base
28
28
  }
package/dist/cjs/EmptyState/EmptyState.styles.cjs CHANGED
@@ -18,7 +18,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvEmptyStat
18
18
  },
19
19
  iconContainer: {},
20
20
  titleContainer: {
21
- marginTop: "4px",
21
+ marginTop: uikitStyles.theme.space.xxs,
22
22
  marginBottom: uikitStyles.theme.space.sm
23
23
  },
24
24
  textContainer: {
package/dist/cjs/Tag/Tag.styles.cjs CHANGED
@@ -34,7 +34,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTag", {
34
34
  }
35
35
  },
36
36
  label: {
37
- padding: uikitStyles.theme.spacing(0, "4px"),
37
+ padding: uikitStyles.theme.spacing(0, "xxs"),
38
38
  color: "inherit"
39
39
  },
40
40
  deleteIcon: {
package/dist/esm/ActionBar/ActionBar.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ActionBar.js","sources":["../../../src/ActionBar/ActionBar.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseProps } from \"../types/generic\";\nimport { staticClasses, useClasses } from \"./ActionBar.styles\";\n\nexport { staticClasses as actionBarClasses };\n\nexport type HvActionBarClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvActionBarProps extends HvBaseProps {\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvActionBarClasses;\n}\n\nexport const HvActionBar = forwardRef<\n React.ComponentRef<\"div\">,\n HvActionBarProps\n>(function HvActionBar(props, ref) {\n const {\n classes: classesProp,\n className,\n children,\n ...others\n } = useDefaultProps(\"HvActionBar\", props);\n const { classes, cx } = useClasses(classesProp);\n\n return (\n <div ref={ref} className={cx(classes.root, className)} {...others}>\n {children}\n </div>\n );\n});\n"],"names":["HvActionBar"],"mappings":";;;;;AAkBO,MAAM,cAAc,WAGzB,SAASA,aAAY,OAAO,KAAK;AAC3B,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,eAAe,KAAK;AACxC,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAG5C,SAAA,oBAAC,OAAI,EAAA,KAAU,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAI,GAAG,QACxD,SACH,CAAA;AAEJ,CAAC;"}
1
+ {"version":3,"file":"ActionBar.js","sources":["../../../src/ActionBar/ActionBar.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseProps } from \"../types/generic\";\nimport { staticClasses, useClasses } from \"./ActionBar.styles\";\n\nexport { staticClasses as actionBarClasses };\n\nexport type HvActionBarClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvActionBarProps extends HvBaseProps {\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvActionBarClasses;\n}\n\n/**\n * The Action Bar accommodates all the actions related to a specific task on a screen or pattern.\n */\nexport const HvActionBar = forwardRef<\n React.ComponentRef<\"div\">,\n HvActionBarProps\n>(function HvActionBar(props, ref) {\n const {\n classes: classesProp,\n className,\n children,\n ...others\n } = useDefaultProps(\"HvActionBar\", props);\n const { classes, cx } = useClasses(classesProp);\n\n return (\n <div ref={ref} className={cx(classes.root, className)} {...others}>\n {children}\n </div>\n );\n});\n"],"names":["HvActionBar"],"mappings":";;;;;AAqBO,MAAM,cAAc,WAGzB,SAASA,aAAY,OAAO,KAAK;AAC3B,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,eAAe,KAAK;AACxC,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAG5C,SAAA,oBAAC,OAAI,EAAA,KAAU,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAI,GAAG,QACxD,SACH,CAAA;AAEJ,CAAC;"}
package/dist/esm/ColorPicker/Fields/Fields.styles.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import { createClasses } from "@hitachivantara/uikit-react-utils";
2
+ import { theme } from "@hitachivantara/uikit-styles";
2
3
  const name = "HvColorPicker-Fields";
3
4
  const { staticClasses, useClasses } = createClasses(name, {
4
5
  fields: {
@@ -9,7 +10,7 @@ const { staticClasses, useClasses } = createClasses(name, {
9
10
  },
10
11
  single: {
11
12
  maxWidth: "50px",
12
- paddingLeft: "4px",
13
+ paddingLeft: theme.space.xxs,
13
14
  "& input": {
14
15
  marginLeft: 5,
15
16
  marginRight: 5
@@ -20,7 +21,7 @@ const { staticClasses, useClasses } = createClasses(name, {
20
21
  },
21
22
  double: {
22
23
  maxWidth: "82px",
23
- paddingRight: "4px",
24
+ paddingRight: theme.space.xxs,
24
25
  "& input": {
25
26
  textTransform: "uppercase",
26
27
  marginLeft: 5,
package/dist/esm/ColorPicker/Fields/Fields.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Fields.styles.js","sources":["../../../../src/ColorPicker/Fields/Fields.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\n\nconst name = \"HvColorPicker-Fields\";\n\nexport const { staticClasses, useClasses } = createClasses(name, {\n fields: {\n width: \"100%\",\n display: \"flex\",\n paddingTop: \"18px\",\n marginRight: \"0px\",\n },\n single: {\n maxWidth: \"50px\",\n paddingLeft: \"4px\",\n \"& input\": {\n marginLeft: 5,\n marginRight: 5,\n },\n \"& label\": {\n paddingLeft: 5,\n },\n },\n double: {\n maxWidth: \"82px\",\n paddingRight: \"4px\",\n \"& input\": {\n textTransform: \"uppercase\",\n marginLeft: 5,\n marginRight: 5,\n },\n \"& label\": {\n paddingLeft: 5,\n },\n },\n});\n"],"names":[],"mappings":";AAEA,MAAM,OAAO;AAEN,MAAM,EAAE,eAAe,eAAe,cAAc,MAAM;AAAA,EAC/D,QAAQ;AAAA,IACN,OAAO;AAAA,IACP,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,aAAa;AAAA,EACf;AAAA,EACA,QAAQ;AAAA,IACN,UAAU;AAAA,IACV,aAAa;AAAA,IACb,WAAW;AAAA,MACT,YAAY;AAAA,MACZ,aAAa;AAAA,IACf;AAAA,IACA,WAAW;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,EAEjB;AAAA,EACA,QAAQ;AAAA,IACN,UAAU;AAAA,IACV,cAAc;AAAA,IACd,WAAW;AAAA,MACT,eAAe;AAAA,MACf,YAAY;AAAA,MACZ,aAAa;AAAA,IACf;AAAA,IACA,WAAW;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,EACf;AAEJ,CAAC;"}
1
+ {"version":3,"file":"Fields.styles.js","sources":["../../../../src/ColorPicker/Fields/Fields.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nconst name = \"HvColorPicker-Fields\";\n\nexport const { staticClasses, useClasses } = createClasses(name, {\n fields: {\n width: \"100%\",\n display: \"flex\",\n paddingTop: \"18px\",\n marginRight: \"0px\",\n },\n single: {\n maxWidth: \"50px\",\n paddingLeft: theme.space.xxs,\n \"& input\": {\n marginLeft: 5,\n marginRight: 5,\n },\n \"& label\": {\n paddingLeft: 5,\n },\n },\n double: {\n maxWidth: \"82px\",\n paddingRight: theme.space.xxs,\n \"& input\": {\n textTransform: \"uppercase\",\n marginLeft: 5,\n marginRight: 5,\n },\n \"& label\": {\n paddingLeft: 5,\n },\n },\n});\n"],"names":[],"mappings":";;AAGA,MAAM,OAAO;AAEN,MAAM,EAAE,eAAe,eAAe,cAAc,MAAM;AAAA,EAC/D,QAAQ;AAAA,IACN,OAAO;AAAA,IACP,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,aAAa;AAAA,EACf;AAAA,EACA,QAAQ;AAAA,IACN,UAAU;AAAA,IACV,aAAa,MAAM,MAAM;AAAA,IACzB,WAAW;AAAA,MACT,YAAY;AAAA,MACZ,aAAa;AAAA,IACf;AAAA,IACA,WAAW;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,EAEjB;AAAA,EACA,QAAQ;AAAA,IACN,UAAU;AAAA,IACV,cAAc,MAAM,MAAM;AAAA,IAC1B,WAAW;AAAA,MACT,eAAe;AAAA,MACf,YAAY;AAAA,MACZ,aAAa;AAAA,IACf;AAAA,IACA,WAAW;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,EACf;AAEJ,CAAC;"}
package/dist/esm/ColorPicker/PresetColors/PresetColors.styles.js CHANGED
@@ -18,7 +18,7 @@ const { staticClasses, useClasses } = createClasses(name, {
18
18
  swatchWrap: {
19
19
  width: "32px",
20
20
  height: "32px",
21
- margin: "4px",
21
+ margin: theme.space.xxs,
22
22
  "& > span > div": {
23
23
  borderRadius: theme.radii.base
24
24
  }
package/dist/esm/ColorPicker/PresetColors/PresetColors.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"PresetColors.styles.js","sources":["../../../../src/ColorPicker/PresetColors/PresetColors.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nconst name = \"HvColorPicker-PresetColors\";\n\nexport const { staticClasses, useClasses } = createClasses(name, {\n root: { width: \"232px\" },\n colors: {\n display: \"flex\",\n flexWrap: \"wrap\",\n position: \"relative\",\n width: \"calc(100% + 8px)\",\n margin: \"-4px -4px\",\n padding: 0,\n },\n title: {\n fontWeight: theme.fontWeights.semibold,\n marginBottom: 8,\n },\n swatchWrap: {\n width: \"32px\",\n height: \"32px\",\n margin: \"4px\",\n\n \"& > span > div\": {\n borderRadius: theme.radii.base,\n },\n },\n});\n"],"names":[],"mappings":";;AAGA,MAAM,OAAO;AAEN,MAAM,EAAE,eAAe,eAAe,cAAc,MAAM;AAAA,EAC/D,MAAM,EAAE,OAAO,QAAQ;AAAA,EACvB,QAAQ;AAAA,IACN,SAAS;AAAA,IACT,UAAU;AAAA,IACV,UAAU;AAAA,IACV,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,OAAO;AAAA,IACL,YAAY,MAAM,YAAY;AAAA,IAC9B,cAAc;AAAA,EAChB;AAAA,EACA,YAAY;AAAA,IACV,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,QAAQ;AAAA,IAER,kBAAkB;AAAA,MAChB,cAAc,MAAM,MAAM;AAAA,IAAA;AAAA,EAC5B;AAEJ,CAAC;"}
1
+ {"version":3,"file":"PresetColors.styles.js","sources":["../../../../src/ColorPicker/PresetColors/PresetColors.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nconst name = \"HvColorPicker-PresetColors\";\n\nexport const { staticClasses, useClasses } = createClasses(name, {\n root: { width: \"232px\" },\n colors: {\n display: \"flex\",\n flexWrap: \"wrap\",\n position: \"relative\",\n width: \"calc(100% + 8px)\",\n margin: \"-4px -4px\",\n padding: 0,\n },\n title: {\n fontWeight: theme.fontWeights.semibold,\n marginBottom: 8,\n },\n swatchWrap: {\n width: \"32px\",\n height: \"32px\",\n margin: theme.space.xxs,\n\n \"& > span > div\": {\n borderRadius: theme.radii.base,\n },\n },\n});\n"],"names":[],"mappings":";;AAGA,MAAM,OAAO;AAEN,MAAM,EAAE,eAAe,eAAe,cAAc,MAAM;AAAA,EAC/D,MAAM,EAAE,OAAO,QAAQ;AAAA,EACvB,QAAQ;AAAA,IACN,SAAS;AAAA,IACT,UAAU;AAAA,IACV,UAAU;AAAA,IACV,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,OAAO;AAAA,IACL,YAAY,MAAM,YAAY;AAAA,IAC9B,cAAc;AAAA,EAChB;AAAA,EACA,YAAY;AAAA,IACV,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,QAAQ,MAAM,MAAM;AAAA,IAEpB,kBAAkB;AAAA,MAChB,cAAc,MAAM,MAAM;AAAA,IAAA;AAAA,EAC5B;AAEJ,CAAC;"}
package/dist/esm/ColorPicker/SavedColors/SavedColors.styles.js CHANGED
@@ -3,7 +3,7 @@ import { theme } from "@hitachivantara/uikit-styles";
3
3
  const name = "HvColorPicker-SavedColors";
4
4
  const { staticClasses, useClasses } = createClasses(name, {
5
5
  addButton: {
6
- margin: "4px",
6
+ margin: theme.space.xxs,
7
7
  width: "32px",
8
8
  height: "32px"
9
9
  },
@@ -20,7 +20,7 @@ const { staticClasses, useClasses } = createClasses(name, {
20
20
  swatchWrap: {
21
21
  width: "32px",
22
22
  height: "32px",
23
- margin: "4px",
23
+ margin: theme.space.xxs,
24
24
  "& > span > div": {
25
25
  borderRadius: theme.radii.base
26
26
  }
package/dist/esm/ColorPicker/SavedColors/SavedColors.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SavedColors.styles.js","sources":["../../../../src/ColorPicker/SavedColors/SavedColors.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nconst name = \"HvColorPicker-SavedColors\";\n\nexport const { staticClasses, useClasses } = createClasses(name, {\n addButton: {\n margin: \"4px\",\n width: \"32px\",\n height: \"32px\",\n },\n root: {\n display: \"flex\",\n flexWrap: \"wrap\",\n position: \"relative\",\n alignItems: \"center\",\n padding: 0,\n width: \"calc(100% + 8px)\",\n margin: \"-4px -4px\",\n },\n swatchRoot: { position: \"relative\" },\n swatchWrap: {\n width: \"32px\",\n height: \"32px\",\n margin: \"4px\",\n\n \"& > span > div\": {\n borderRadius: theme.radii.base,\n },\n },\n removeButtonRoot: {\n position: \"absolute\",\n top: 0,\n right: 0,\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n height: 16,\n width: 16,\n background: theme.colors.atmo1,\n borderRadius: theme.radii.base,\n },\n removeButton: {\n height: 16,\n width: 16,\n minWidth: 16,\n minHeight: 16,\n padding: 0,\n margin: 0,\n\n \"& div > span\": {\n height: 16,\n width: 16,\n\n \"& > div\": { height: 16, width: 16 },\n },\n },\n});\n"],"names":[],"mappings":";;AAGA,MAAM,OAAO;AAEN,MAAM,EAAE,eAAe,eAAe,cAAc,MAAM;AAAA,EAC/D,WAAW;AAAA,IACT,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,QAAQ;AAAA,EACV;AAAA,EACA,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,UAAU;AAAA,IACV,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,OAAO;AAAA,IACP,QAAQ;AAAA,EACV;AAAA,EACA,YAAY,EAAE,UAAU,WAAW;AAAA,EACnC,YAAY;AAAA,IACV,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,QAAQ;AAAA,IAER,kBAAkB;AAAA,MAChB,cAAc,MAAM,MAAM;AAAA,IAAA;AAAA,EAE9B;AAAA,EACA,kBAAkB;AAAA,IAChB,UAAU;AAAA,IACV,KAAK;AAAA,IACL,OAAO;AAAA,IACP,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,YAAY,MAAM,OAAO;AAAA,IACzB,cAAc,MAAM,MAAM;AAAA,EAC5B;AAAA,EACA,cAAc;AAAA,IACZ,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,UAAU;AAAA,IACV,WAAW;AAAA,IACX,SAAS;AAAA,IACT,QAAQ;AAAA,IAER,gBAAgB;AAAA,MACd,QAAQ;AAAA,MACR,OAAO;AAAA,MAEP,WAAW,EAAE,QAAQ,IAAI,OAAO,GAAG;AAAA,IAAA;AAAA,EACrC;AAEJ,CAAC;"}
1
+ {"version":3,"file":"SavedColors.styles.js","sources":["../../../../src/ColorPicker/SavedColors/SavedColors.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nconst name = \"HvColorPicker-SavedColors\";\n\nexport const { staticClasses, useClasses } = createClasses(name, {\n addButton: {\n margin: theme.space.xxs,\n width: \"32px\",\n height: \"32px\",\n },\n root: {\n display: \"flex\",\n flexWrap: \"wrap\",\n position: \"relative\",\n alignItems: \"center\",\n padding: 0,\n width: \"calc(100% + 8px)\",\n margin: \"-4px -4px\",\n },\n swatchRoot: { position: \"relative\" },\n swatchWrap: {\n width: \"32px\",\n height: \"32px\",\n margin: theme.space.xxs,\n\n \"& > span > div\": {\n borderRadius: theme.radii.base,\n },\n },\n removeButtonRoot: {\n position: \"absolute\",\n top: 0,\n right: 0,\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n height: 16,\n width: 16,\n background: theme.colors.atmo1,\n borderRadius: theme.radii.base,\n },\n removeButton: {\n height: 16,\n width: 16,\n minWidth: 16,\n minHeight: 16,\n padding: 0,\n margin: 0,\n\n \"& div > span\": {\n height: 16,\n width: 16,\n\n \"& > div\": { height: 16, width: 16 },\n },\n },\n});\n"],"names":[],"mappings":";;AAGA,MAAM,OAAO;AAEN,MAAM,EAAE,eAAe,eAAe,cAAc,MAAM;AAAA,EAC/D,WAAW;AAAA,IACT,QAAQ,MAAM,MAAM;AAAA,IACpB,OAAO;AAAA,IACP,QAAQ;AAAA,EACV;AAAA,EACA,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,UAAU;AAAA,IACV,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,OAAO;AAAA,IACP,QAAQ;AAAA,EACV;AAAA,EACA,YAAY,EAAE,UAAU,WAAW;AAAA,EACnC,YAAY;AAAA,IACV,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,QAAQ,MAAM,MAAM;AAAA,IAEpB,kBAAkB;AAAA,MAChB,cAAc,MAAM,MAAM;AAAA,IAAA;AAAA,EAE9B;AAAA,EACA,kBAAkB;AAAA,IAChB,UAAU;AAAA,IACV,KAAK;AAAA,IACL,OAAO;AAAA,IACP,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,YAAY,MAAM,OAAO;AAAA,IACzB,cAAc,MAAM,MAAM;AAAA,EAC5B;AAAA,EACA,cAAc;AAAA,IACZ,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,UAAU;AAAA,IACV,WAAW;AAAA,IACX,SAAS;AAAA,IACT,QAAQ;AAAA,IAER,gBAAgB;AAAA,MACd,QAAQ;AAAA,MACR,OAAO;AAAA,MAEP,WAAW,EAAE,QAAQ,IAAI,OAAO,GAAG;AAAA,IAAA;AAAA,EACrC;AAEJ,CAAC;"}
package/dist/esm/EmptyState/EmptyState.styles.js CHANGED
@@ -16,7 +16,7 @@ const { staticClasses, useClasses } = createClasses("HvEmptyState", {
16
16
  },
17
17
  iconContainer: {},
18
18
  titleContainer: {
19
- marginTop: "4px",
19
+ marginTop: theme.space.xxs,
20
20
  marginBottom: theme.space.sm
21
21
  },
22
22
  textContainer: {
package/dist/esm/EmptyState/EmptyState.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"EmptyState.styles.js","sources":["../../../src/EmptyState/EmptyState.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvEmptyState\", {\n root: {\n width: \"100%\",\n height: \"100%\",\n display: \"flex\",\n justifyContent: \"center\",\n },\n container: { display: \"flex\", flexDirection: \"row\" },\n containerMessageOnly: {\n alignItems: \"center\",\n \"& $textContainer\": {\n marginLeft: 0,\n },\n },\n iconContainer: {},\n titleContainer: {\n marginTop: \"4px\",\n marginBottom: theme.space.sm,\n },\n textContainer: {\n background: \"transparent\",\n maxWidth: \"510px\",\n overflow: \"hidden\",\n },\n messageContainer: {},\n actionContainer: { marginTop: theme.space.sm },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,gBAAgB;AAAA,EACzE,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,gBAAgB;AAAA,EAClB;AAAA,EACA,WAAW,EAAE,SAAS,QAAQ,eAAe,MAAM;AAAA,EACnD,sBAAsB;AAAA,IACpB,YAAY;AAAA,IACZ,oBAAoB;AAAA,MAClB,YAAY;AAAA,IAAA;AAAA,EAEhB;AAAA,EACA,eAAe,CAAC;AAAA,EAChB,gBAAgB;AAAA,IACd,WAAW;AAAA,IACX,cAAc,MAAM,MAAM;AAAA,EAC5B;AAAA,EACA,eAAe;AAAA,IACb,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,UAAU;AAAA,EACZ;AAAA,EACA,kBAAkB,CAAC;AAAA,EACnB,iBAAiB,EAAE,WAAW,MAAM,MAAM,GAAG;AAC/C,CAAC;"}
1
+ {"version":3,"file":"EmptyState.styles.js","sources":["../../../src/EmptyState/EmptyState.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvEmptyState\", {\n root: {\n width: \"100%\",\n height: \"100%\",\n display: \"flex\",\n justifyContent: \"center\",\n },\n container: { display: \"flex\", flexDirection: \"row\" },\n containerMessageOnly: {\n alignItems: \"center\",\n \"& $textContainer\": {\n marginLeft: 0,\n },\n },\n iconContainer: {},\n titleContainer: {\n marginTop: theme.space.xxs,\n marginBottom: theme.space.sm,\n },\n textContainer: {\n background: \"transparent\",\n maxWidth: \"510px\",\n overflow: \"hidden\",\n },\n messageContainer: {},\n actionContainer: { marginTop: theme.space.sm },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,gBAAgB;AAAA,EACzE,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,gBAAgB;AAAA,EAClB;AAAA,EACA,WAAW,EAAE,SAAS,QAAQ,eAAe,MAAM;AAAA,EACnD,sBAAsB;AAAA,IACpB,YAAY;AAAA,IACZ,oBAAoB;AAAA,MAClB,YAAY;AAAA,IAAA;AAAA,EAEhB;AAAA,EACA,eAAe,CAAC;AAAA,EAChB,gBAAgB;AAAA,IACd,WAAW,MAAM,MAAM;AAAA,IACvB,cAAc,MAAM,MAAM;AAAA,EAC5B;AAAA,EACA,eAAe;AAAA,IACb,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,UAAU;AAAA,EACZ;AAAA,EACA,kBAAkB,CAAC;AAAA,EACnB,iBAAiB,EAAE,WAAW,MAAM,MAAM,GAAG;AAC/C,CAAC;"}
package/dist/esm/Grid/Grid.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Grid.js","sources":["../../../src/Grid/Grid.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport MuiGrid, { GridProps as MuiGridProps } from \"@mui/material/Grid\";\nimport {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { useWidth } from \"../hooks/useWidth\";\nimport { staticClasses, useClasses } from \"./Grid.styles\";\n\nexport { staticClasses as gridClasses };\n\nexport type HvGridClasses = ExtractNames<typeof useClasses>;\n\nconst BREAKPOINT_GUTTERS = {\n xs: 2,\n sm: 2,\n md: 4,\n lg: 4,\n xl: 4,\n};\n\nconst BREAKPOINT_COLUMNS = {\n xs: 4,\n sm: 8,\n md: 12,\n lg: 12,\n xl: 12,\n};\n\nexport type HvGridDirection =\n | \"row\"\n | \"row-reverse\"\n | \"column\"\n | \"column-reverse\";\n\nexport type HvGridSpacing =\n | \"xs\"\n | \"sm\"\n | \"md\"\n | \"lg\"\n | \"xl\"\n | \"auto\"\n | 1\n | 2\n | 3\n | 4\n | 5\n | 6\n | 7\n | 8\n | 9\n | 10;\n\nexport interface HvGridProps extends Omit<MuiGridProps, \"classes\" | \"columns\"> {\n /**\n * If `true`, the component will have the flex *container* behavior.\n * You should be wrapping *items* with a *container*.\n */\n container?: boolean;\n /**\n * If `true`, the component will have the flex *item* behavior.\n * You should be wrapping *items* with a *container*.\n */\n item?: boolean;\n /**\n * Defines the space between the type item component. It can only be used on a type container component.\n * Based in the 8x factor defined in the theme, it allows the definition of this factor based on the factor\n * (number between 0 and 10), breakpoint or auto.\n */\n spacing?: HvGridSpacing | number;\n /**\n * Defines the vertical space between the type item component. It can only be used on a type container component.\n * Based in the 8x factor defined in the theme, it allows the definition of this factor based on the factor\n * (number between 0 and 10), breakpoint or auto.\n * It overrides the value of the spacing prop.\n */\n rowSpacing?: HvGridSpacing | number;\n /**\n * Defines the horizontal space between the type item component. It can only be used on a type container component.\n * Based in the 8x factor defined in the theme, it allows the definition of this factor based on the factor\n * (number between 0 and 10), breakpoint or auto.\n * It overrides the value of the spacing prop.\n */\n columnSpacing?: HvGridSpacing | number;\n /**\n * The number of columns.\n * Defaults to a 12-column grid.\n * The value \"auto\" implements the Design System directives in terms of variable number of columns.\n * @default 12\n */\n columns?: \"auto\" | MuiGridProps[\"columns\"];\n /**\n * Defines the `flex-direction` style property.\n * It is applied for all screen sizes.\n */\n direction?: HvGridDirection;\n /**\n * Defines the `justify-content` style property.\n * It is applied for all screen sizes.\n */\n justify?:\n | \"flex-start\"\n | \"center\"\n | \"flex-end\"\n | \"space-between\"\n | \"space-around\"\n | \"space-evenly\";\n /**\n * Defines the number of grids the component is going to use.\n * It's applied for all the screen sizes with the lowest priority.\n */\n xs?: number | boolean;\n /**\n * Defines the number of grids the component is going to use.\n * It's applied for the `sm` breakpoint and wider screens if not overridden.\n */\n sm?: number | boolean;\n /**\n * Defines the number of grids the component is going to use.\n * It's applied for the `md` breakpoint and wider screens if not overridden.\n */\n md?: number | boolean;\n /**\n * Defines the number of grids the component is going to use.\n * It's applied for the `lg` breakpoint and wider screens if not overridden.\n */\n lg?: number | boolean;\n /**\n * Defines the number of grids the component is going to use.\n * It's applied for the `xl` breakpoint and wider screens.\n */\n xl?: number | boolean;\n /**\n * Defines the `flex-wrap` style property.\n * It's applied for all screen sizes.\n */\n wrap?: \"nowrap\" | \"wrap\" | \"wrap-reverse\";\n /**\n * If `true`, it sets `min-width: 0` on the item.\n * Refer to the limitations section of the documentation to better understand the use case.\n */\n zeroMinWidth?: boolean;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvGridClasses;\n}\n\nfunction getGridSpacing(spacing: HvGridProps[\"spacing\"]) {\n let gridSpacing: MuiGridProps[\"spacing\"];\n\n if (typeof spacing === \"string\") {\n if (spacing === \"auto\") {\n gridSpacing = BREAKPOINT_GUTTERS;\n } else {\n gridSpacing = BREAKPOINT_GUTTERS[spacing];\n }\n } else if (typeof spacing === \"object\") {\n gridSpacing = Object.keys(spacing).reduce<Record<string, number>>(\n (acc, bp) => {\n acc[bp] = BREAKPOINT_GUTTERS[spacing[bp]] ?? spacing[bp];\n return acc;\n },\n {},\n );\n } else if (spacing === 0) {\n gridSpacing = { xs: 0 };\n } else {\n gridSpacing = spacing;\n }\n\n return gridSpacing;\n}\n\nfunction getNumberOfColumns(columns: HvGridProps[\"columns\"]) {\n let numberOfColumns: MuiGridProps[\"columns\"];\n\n if (columns === \"auto\") {\n numberOfColumns = BREAKPOINT_COLUMNS;\n } else {\n numberOfColumns = columns;\n }\n\n return numberOfColumns;\n}\n\nfunction getContainerProps(\n spacing: HvGridProps[\"spacing\"],\n rowSpacing: HvGridProps[\"rowSpacing\"],\n columnSpacing: HvGridProps[\"columnSpacing\"],\n columns: HvGridProps[\"columns\"],\n) {\n const containerProps: Pick<\n MuiGridProps,\n \"container\" | \"spacing\" | \"rowSpacing\" | \"columnSpacing\" | \"columns\"\n > = { container: true };\n\n if (spacing != null) {\n containerProps.spacing = getGridSpacing(spacing);\n }\n if (rowSpacing != null) {\n containerProps.rowSpacing = getGridSpacing(rowSpacing);\n }\n if (columnSpacing != null) {\n containerProps.columnSpacing = getGridSpacing(columnSpacing);\n }\n if (columns != null) {\n containerProps.columns = getNumberOfColumns(columns);\n }\n\n return containerProps;\n}\n\nconst WidthGrid = forwardRef<\n // no-indent\n HTMLDivElement,\n HvGridProps\n>(function WidthGrid(props, ref) {\n const { container, spacing, rowSpacing, columnSpacing, columns, ...others } =\n props;\n\n const width = useWidth();\n\n const containerProps = container\n ? getContainerProps(\n spacing === \"auto\" ? width : spacing,\n rowSpacing === \"auto\" ? width : rowSpacing,\n columnSpacing === \"auto\" ? width : columnSpacing,\n columns,\n )\n : {};\n\n return <MuiGrid ref={ref} {...containerProps} {...others} />;\n});\n\n/**\n * The grid creates visual consistency between layouts while allowing flexibility\n * across a wide variety of designs. This component is based on a 12-column grid layout.\n *\n * It's based on the [Material UI Grid](https://mui.com/material-ui/react-grid/).\n *\n * The definitions were set following the Design System directives:\n *\n * | Breakpoint | Width (in px) | Gutters (in px) | Number of columns |\n * | ---------- | ------------- | --------------- | ----------------- |\n * | xs | [0-600[ | 16 | 4 |\n * | sm | [600-960[ | 16 | 8 |\n * | md | [960-1270[ | 32 | 12 |\n * | lg | [1270-1920[ | 32 | 12 |\n * | xl | [1920-...[ | 32 | 12 |\n *\n * However, the number of columns is set to 12 for all breakpoints, as it serves most\n * of the use cases and simplifies the implementation.\n * To opt-in to the Design System directives, you can set the `columns` prop to `auto`.\n *\n * Also, the Design System specifications are omissive about the horizontal gutters.\n * The HvGrid sets them to the same value as the vertical gutters, depending on the breakpoint.\n * It can be overridden by setting the `rowSpacing` prop.\n */\nexport const HvGrid = forwardRef<\n // no-indent\n HTMLDivElement,\n HvGridProps\n>(function HvGrid(props, ref) {\n const {\n item,\n container,\n spacing = \"auto\",\n rowSpacing,\n columnSpacing,\n columns,\n classes: classesProp,\n ...others\n } = useDefaultProps(\"HvGrid\", props);\n\n const { classes } = useClasses(classesProp);\n\n // Fixes MUI error when using spacings as objects and the grid is an item and container\n // When set to \"auto\", the spacing changes depending on the screen's breakpoint\n // The condition avoids using useWidth and re-rendering the component unnecessarily\n if (\n container &&\n item &&\n (spacing === \"auto\" || rowSpacing === \"auto\" || columnSpacing === \"auto\")\n ) {\n return (\n <WidthGrid\n ref={ref}\n classes={classes}\n item={item}\n container={container}\n spacing={spacing}\n rowSpacing={rowSpacing}\n columnSpacing={columnSpacing}\n columns={columns}\n {...others}\n />\n );\n }\n\n const containerProps = container\n ? getContainerProps(spacing, rowSpacing, columnSpacing, columns)\n : {};\n\n return (\n <MuiGrid\n ref={ref}\n classes={classes}\n item={item}\n {...containerProps}\n {...others}\n />\n );\n});\n"],"names":["WidthGrid","HvGrid"],"mappings":";;;;;;;AAcA,MAAM,qBAAqB;AAAA,EACzB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,qBAAqB;AAAA,EACzB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAuHA,SAAS,eAAe,SAAiC;AACnD,MAAA;AAEA,MAAA,OAAO,YAAY,UAAU;AAC/B,QAAI,YAAY,QAAQ;AACR,oBAAA;AAAA,IAAA,OACT;AACL,oBAAc,mBAAmB,OAAO;AAAA,IAAA;AAAA,EAC1C,WACS,OAAO,YAAY,UAAU;AACxB,kBAAA,OAAO,KAAK,OAAO,EAAE;AAAA,MACjC,CAAC,KAAK,OAAO;AACP,YAAA,EAAE,IAAI,mBAAmB,QAAQ,EAAE,CAAC,KAAK,QAAQ,EAAE;AAChD,eAAA;AAAA,MACT;AAAA,MACA,CAAA;AAAA,IACF;AAAA,EAAA,WACS,YAAY,GAAG;AACV,kBAAA,EAAE,IAAI,EAAE;AAAA,EAAA,OACjB;AACS,kBAAA;AAAA,EAAA;AAGT,SAAA;AACT;AAEA,SAAS,mBAAmB,SAAiC;AACvD,MAAA;AAEJ,MAAI,YAAY,QAAQ;AACJ,sBAAA;AAAA,EAAA,OACb;AACa,sBAAA;AAAA,EAAA;AAGb,SAAA;AACT;AAEA,SAAS,kBACP,SACA,YACA,eACA,SACA;AACM,QAAA,iBAGF,EAAE,WAAW,KAAK;AAEtB,MAAI,WAAW,MAAM;AACJ,mBAAA,UAAU,eAAe,OAAO;AAAA,EAAA;AAEjD,MAAI,cAAc,MAAM;AACP,mBAAA,aAAa,eAAe,UAAU;AAAA,EAAA;AAEvD,MAAI,iBAAiB,MAAM;AACV,mBAAA,gBAAgB,eAAe,aAAa;AAAA,EAAA;AAE7D,MAAI,WAAW,MAAM;AACJ,mBAAA,UAAU,mBAAmB,OAAO;AAAA,EAAA;AAG9C,SAAA;AACT;AAEA,MAAM,YAAY,WAIhB,SAASA,WAAU,OAAO,KAAK;AACzB,QAAA,EAAE,WAAW,SAAS,YAAY,eAAe,SAAS,GAAG,WACjE;AAEF,QAAM,QAAQ,SAAS;AAEvB,QAAM,iBAAiB,YACnB;AAAA,IACE,YAAY,SAAS,QAAQ;AAAA,IAC7B,eAAe,SAAS,QAAQ;AAAA,IAChC,kBAAkB,SAAS,QAAQ;AAAA,IACnC;AAAA,EAAA,IAEF,CAAC;AAEL,6BAAQ,SAAQ,EAAA,KAAW,GAAG,gBAAiB,GAAG,QAAQ;AAC5D,CAAC;AA0BM,MAAM,SAAS,WAIpB,SAASC,QAAO,OAAO,KAAK;AACtB,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,GAAG;AAAA,EAAA,IACD,gBAAgB,UAAU,KAAK;AAEnC,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAK1C,MACE,aACA,SACC,YAAY,UAAU,eAAe,UAAU,kBAAkB,SAClE;AAEE,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACC,GAAG;AAAA,MAAA;AAAA,IACN;AAAA,EAAA;AAIE,QAAA,iBAAiB,YACnB,kBAAkB,SAAS,YAAY,eAAe,OAAO,IAC7D,CAAC;AAGH,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MACH,GAAG;AAAA,IAAA;AAAA,EACN;AAEJ,CAAC;"}
1
+ {"version":3,"file":"Grid.js","sources":["../../../src/Grid/Grid.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport MuiGrid, { GridProps as MuiGridProps } from \"@mui/material/Grid\";\nimport {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { useWidth } from \"../hooks/useWidth\";\nimport { staticClasses, useClasses } from \"./Grid.styles\";\n\nexport { staticClasses as gridClasses };\n\nexport type HvGridClasses = ExtractNames<typeof useClasses>;\n\nconst BREAKPOINT_GUTTERS = {\n xs: 2,\n sm: 2,\n md: 4,\n lg: 4,\n xl: 4,\n};\n\nconst BREAKPOINT_COLUMNS = {\n xs: 4,\n sm: 8,\n md: 12,\n lg: 12,\n xl: 12,\n};\n\nexport type HvGridDirection =\n | \"row\"\n | \"row-reverse\"\n | \"column\"\n | \"column-reverse\";\n\nexport type HvGridSpacing =\n | \"xs\"\n | \"sm\"\n | \"md\"\n | \"lg\"\n | \"xl\"\n | \"auto\"\n | 1\n | 2\n | 3\n | 4\n | 5\n | 6\n | 7\n | 8\n | 9\n | 10;\n\nexport interface HvGridProps extends Omit<MuiGridProps, \"classes\" | \"columns\"> {\n /**\n * If `true`, the component will have the flex *container* behavior.\n * You should be wrapping *items* with a *container*.\n */\n container?: boolean;\n /**\n * If `true`, the component will have the flex *item* behavior.\n * You should be wrapping *items* with a *container*.\n */\n item?: boolean;\n /**\n * Defines the space between the type item component. It can only be used on a type container component.\n * Based in the 8x factor defined in the theme, it allows the definition of this factor based on the factor\n * (number between 0 and 10), breakpoint or auto.\n */\n spacing?: HvGridSpacing | number;\n /**\n * Defines the vertical space between the type item component. It can only be used on a type container component.\n * Based in the 8x factor defined in the theme, it allows the definition of this factor based on the factor\n * (number between 0 and 10), breakpoint or auto.\n * It overrides the value of the spacing prop.\n */\n rowSpacing?: HvGridSpacing | number;\n /**\n * Defines the horizontal space between the type item component. It can only be used on a type container component.\n * Based in the 8x factor defined in the theme, it allows the definition of this factor based on the factor\n * (number between 0 and 10), breakpoint or auto.\n * It overrides the value of the spacing prop.\n */\n columnSpacing?: HvGridSpacing | number;\n /**\n * The number of columns.\n * Defaults to a 12-column grid.\n * The value \"auto\" implements the Design System directives in terms of variable number of columns.\n * @default 12\n */\n columns?: \"auto\" | MuiGridProps[\"columns\"];\n /**\n * Defines the `flex-direction` style property.\n * It is applied for all screen sizes.\n */\n direction?: HvGridDirection;\n /**\n * Defines the `justify-content` style property.\n * It is applied for all screen sizes.\n */\n justify?:\n | \"flex-start\"\n | \"center\"\n | \"flex-end\"\n | \"space-between\"\n | \"space-around\"\n | \"space-evenly\";\n /**\n * Defines the number of grids the component is going to use.\n * It's applied for all the screen sizes with the lowest priority.\n */\n xs?: number | boolean;\n /**\n * Defines the number of grids the component is going to use.\n * It's applied for the `sm` breakpoint and wider screens if not overridden.\n */\n sm?: number | boolean;\n /**\n * Defines the number of grids the component is going to use.\n * It's applied for the `md` breakpoint and wider screens if not overridden.\n */\n md?: number | boolean;\n /**\n * Defines the number of grids the component is going to use.\n * It's applied for the `lg` breakpoint and wider screens if not overridden.\n */\n lg?: number | boolean;\n /**\n * Defines the number of grids the component is going to use.\n * It's applied for the `xl` breakpoint and wider screens.\n */\n xl?: number | boolean;\n /**\n * Defines the `flex-wrap` style property.\n * It's applied for all screen sizes.\n */\n wrap?: \"nowrap\" | \"wrap\" | \"wrap-reverse\";\n /**\n * If `true`, it sets `min-width: 0` on the item.\n * Refer to the limitations section of the documentation to better understand the use case.\n */\n zeroMinWidth?: boolean;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvGridClasses;\n}\n\nfunction getGridSpacing(spacing: HvGridProps[\"spacing\"]) {\n let gridSpacing: MuiGridProps[\"spacing\"];\n\n if (typeof spacing === \"string\") {\n if (spacing === \"auto\") {\n gridSpacing = BREAKPOINT_GUTTERS;\n } else {\n gridSpacing = BREAKPOINT_GUTTERS[spacing];\n }\n } else if (typeof spacing === \"object\") {\n gridSpacing = Object.keys(spacing).reduce<Record<string, number>>(\n (acc, bp) => {\n acc[bp] = BREAKPOINT_GUTTERS[spacing[bp]] ?? spacing[bp];\n return acc;\n },\n {},\n );\n } else if (spacing === 0) {\n gridSpacing = { xs: 0 };\n } else {\n gridSpacing = spacing;\n }\n\n return gridSpacing;\n}\n\nfunction getNumberOfColumns(columns: HvGridProps[\"columns\"]) {\n let numberOfColumns: MuiGridProps[\"columns\"];\n\n if (columns === \"auto\") {\n numberOfColumns = BREAKPOINT_COLUMNS;\n } else {\n numberOfColumns = columns;\n }\n\n return numberOfColumns;\n}\n\nfunction getContainerProps(\n spacing: HvGridProps[\"spacing\"],\n rowSpacing: HvGridProps[\"rowSpacing\"],\n columnSpacing: HvGridProps[\"columnSpacing\"],\n columns: HvGridProps[\"columns\"],\n) {\n const containerProps: Pick<\n MuiGridProps,\n \"container\" | \"spacing\" | \"rowSpacing\" | \"columnSpacing\" | \"columns\"\n > = { container: true };\n\n if (spacing != null) {\n containerProps.spacing = getGridSpacing(spacing);\n }\n if (rowSpacing != null) {\n containerProps.rowSpacing = getGridSpacing(rowSpacing);\n }\n if (columnSpacing != null) {\n containerProps.columnSpacing = getGridSpacing(columnSpacing);\n }\n if (columns != null) {\n containerProps.columns = getNumberOfColumns(columns);\n }\n\n return containerProps;\n}\n\nconst WidthGrid = forwardRef<\n // no-indent\n HTMLDivElement,\n HvGridProps\n>(function WidthGrid(props, ref) {\n const { container, spacing, rowSpacing, columnSpacing, columns, ...others } =\n props;\n\n const width = useWidth();\n\n const containerProps = container\n ? getContainerProps(\n spacing === \"auto\" ? width : spacing,\n rowSpacing === \"auto\" ? width : rowSpacing,\n columnSpacing === \"auto\" ? width : columnSpacing,\n columns,\n )\n : {};\n\n return <MuiGrid ref={ref} {...containerProps} {...others} />;\n});\n\n/**\n * The grid creates visual consistency between layouts while allowing flexibility\n * across a wide variety of designs. This component is based on a 12-column grid layout.\n *\n * It's based on the [Material UI Grid](https://mui.com/material-ui/react-grid/).\n *\n * However, the number of columns is set to 12 for all breakpoints, as it serves most\n * of the use cases and simplifies the implementation.\n * To opt-in to the Design System directives, you can set the `columns` prop to `auto`.\n *\n * Also, the Design System specifications are omissive about the horizontal gutters.\n * The HvGrid sets them to the same value as the vertical gutters, depending on the breakpoint.\n * It can be overridden by setting the `rowSpacing` prop.\n */\nexport const HvGrid = forwardRef<\n // no-indent\n HTMLDivElement,\n HvGridProps\n>(function HvGrid(props, ref) {\n const {\n item,\n container,\n spacing = \"auto\",\n rowSpacing,\n columnSpacing,\n columns,\n classes: classesProp,\n ...others\n } = useDefaultProps(\"HvGrid\", props);\n\n const { classes } = useClasses(classesProp);\n\n // Fixes MUI error when using spacings as objects and the grid is an item and container\n // When set to \"auto\", the spacing changes depending on the screen's breakpoint\n // The condition avoids using useWidth and re-rendering the component unnecessarily\n if (\n container &&\n item &&\n (spacing === \"auto\" || rowSpacing === \"auto\" || columnSpacing === \"auto\")\n ) {\n return (\n <WidthGrid\n ref={ref}\n classes={classes}\n item={item}\n container={container}\n spacing={spacing}\n rowSpacing={rowSpacing}\n columnSpacing={columnSpacing}\n columns={columns}\n {...others}\n />\n );\n }\n\n const containerProps = container\n ? getContainerProps(spacing, rowSpacing, columnSpacing, columns)\n : {};\n\n return (\n <MuiGrid\n ref={ref}\n classes={classes}\n item={item}\n {...containerProps}\n {...others}\n />\n );\n});\n"],"names":["WidthGrid","HvGrid"],"mappings":";;;;;;;AAcA,MAAM,qBAAqB;AAAA,EACzB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,qBAAqB;AAAA,EACzB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAuHA,SAAS,eAAe,SAAiC;AACnD,MAAA;AAEA,MAAA,OAAO,YAAY,UAAU;AAC/B,QAAI,YAAY,QAAQ;AACR,oBAAA;AAAA,IAAA,OACT;AACL,oBAAc,mBAAmB,OAAO;AAAA,IAAA;AAAA,EAC1C,WACS,OAAO,YAAY,UAAU;AACxB,kBAAA,OAAO,KAAK,OAAO,EAAE;AAAA,MACjC,CAAC,KAAK,OAAO;AACP,YAAA,EAAE,IAAI,mBAAmB,QAAQ,EAAE,CAAC,KAAK,QAAQ,EAAE;AAChD,eAAA;AAAA,MACT;AAAA,MACA,CAAA;AAAA,IACF;AAAA,EAAA,WACS,YAAY,GAAG;AACV,kBAAA,EAAE,IAAI,EAAE;AAAA,EAAA,OACjB;AACS,kBAAA;AAAA,EAAA;AAGT,SAAA;AACT;AAEA,SAAS,mBAAmB,SAAiC;AACvD,MAAA;AAEJ,MAAI,YAAY,QAAQ;AACJ,sBAAA;AAAA,EAAA,OACb;AACa,sBAAA;AAAA,EAAA;AAGb,SAAA;AACT;AAEA,SAAS,kBACP,SACA,YACA,eACA,SACA;AACM,QAAA,iBAGF,EAAE,WAAW,KAAK;AAEtB,MAAI,WAAW,MAAM;AACJ,mBAAA,UAAU,eAAe,OAAO;AAAA,EAAA;AAEjD,MAAI,cAAc,MAAM;AACP,mBAAA,aAAa,eAAe,UAAU;AAAA,EAAA;AAEvD,MAAI,iBAAiB,MAAM;AACV,mBAAA,gBAAgB,eAAe,aAAa;AAAA,EAAA;AAE7D,MAAI,WAAW,MAAM;AACJ,mBAAA,UAAU,mBAAmB,OAAO;AAAA,EAAA;AAG9C,SAAA;AACT;AAEA,MAAM,YAAY,WAIhB,SAASA,WAAU,OAAO,KAAK;AACzB,QAAA,EAAE,WAAW,SAAS,YAAY,eAAe,SAAS,GAAG,WACjE;AAEF,QAAM,QAAQ,SAAS;AAEvB,QAAM,iBAAiB,YACnB;AAAA,IACE,YAAY,SAAS,QAAQ;AAAA,IAC7B,eAAe,SAAS,QAAQ;AAAA,IAChC,kBAAkB,SAAS,QAAQ;AAAA,IACnC;AAAA,EAAA,IAEF,CAAC;AAEL,6BAAQ,SAAQ,EAAA,KAAW,GAAG,gBAAiB,GAAG,QAAQ;AAC5D,CAAC;AAgBM,MAAM,SAAS,WAIpB,SAASC,QAAO,OAAO,KAAK;AACtB,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,GAAG;AAAA,EAAA,IACD,gBAAgB,UAAU,KAAK;AAEnC,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAK1C,MACE,aACA,SACC,YAAY,UAAU,eAAe,UAAU,kBAAkB,SAClE;AAEE,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACC,GAAG;AAAA,MAAA;AAAA,IACN;AAAA,EAAA;AAIE,QAAA,iBAAiB,YACnB,kBAAkB,SAAS,YAAY,eAAe,OAAO,IAC7D,CAAC;AAGH,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MACH,GAAG;AAAA,IAAA;AAAA,EACN;AAEJ,CAAC;"}
package/dist/esm/Tag/Tag.styles.js CHANGED
@@ -32,7 +32,7 @@ const { staticClasses, useClasses } = createClasses("HvTag", {
32
32
  }
33
33
  },
34
34
  label: {
35
- padding: theme.spacing(0, "4px"),
35
+ padding: theme.spacing(0, "xxs"),
36
36
  color: "inherit"
37
37
  },
38
38
  deleteIcon: {
package/dist/esm/Tag/Tag.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Tag.styles.js","sources":["../../../src/Tag/Tag.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTag\", {\n root: {\n display: \"inline-flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n cursor: \"default\",\n color: theme.colors.base_dark,\n backgroundColor: \"var(--bgColor)\",\n height: 16,\n borderRadius: 0,\n maxWidth: 180,\n whiteSpace: \"nowrap\",\n\n \":hover, :focus\": {\n backgroundColor: \"var(--bgColor)\",\n },\n },\n categorical: {\n borderRadius: 8,\n \"& $label\": {\n color: theme.colors.secondary,\n },\n },\n\n disabled: {\n backgroundColor: theme.colors.atmo3,\n \":hover, :focus\": {\n backgroundColor: theme.colors.atmo3,\n },\n \"& $label\": {\n color: theme.colors.secondary_60,\n },\n },\n label: {\n padding: theme.spacing(0, \"4px\"),\n color: \"inherit\",\n },\n deleteIcon: {\n width: 16,\n height: 16,\n \"&:hover\": {\n backgroundColor: theme.colors.containerBackgroundHover,\n },\n },\n selected: {},\n clickable: {\n cursor: \"pointer\",\n },\n icon: {\n width: 12,\n height: 12,\n marginLeft: 2,\n },\n\n /** @deprecated use `root` instead */\n chipRoot: {},\n /** @deprecated unused */\n // TODO: redundant - use deleteIcon. remove in v6\n /** @deprecated */\n button: {},\n /** @deprecated */\n tagButton: {},\n // TODO: redundant - use $clickable or :not($disabled). remove in v6\n /** @deprecated */\n focusVisible: {},\n /** @deprecated */\n disabledDeleteIcon: {},\n /** @deprecated */\n categoricalFocus: {},\n /** @deprecated */\n categoricalDisabled: {},\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,SAAS;AAAA,EAClE,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,QAAQ;AAAA,IACR,OAAO,MAAM,OAAO;AAAA,IACpB,iBAAiB;AAAA,IACjB,QAAQ;AAAA,IACR,cAAc;AAAA,IACd,UAAU;AAAA,IACV,YAAY;AAAA,IAEZ,kBAAkB;AAAA,MAChB,iBAAiB;AAAA,IAAA;AAAA,EAErB;AAAA,EACA,aAAa;AAAA,IACX,cAAc;AAAA,IACd,YAAY;AAAA,MACV,OAAO,MAAM,OAAO;AAAA,IAAA;AAAA,EAExB;AAAA,EAEA,UAAU;AAAA,IACR,iBAAiB,MAAM,OAAO;AAAA,IAC9B,kBAAkB;AAAA,MAChB,iBAAiB,MAAM,OAAO;AAAA,IAChC;AAAA,IACA,YAAY;AAAA,MACV,OAAO,MAAM,OAAO;AAAA,IAAA;AAAA,EAExB;AAAA,EACA,OAAO;AAAA,IACL,SAAS,MAAM,QAAQ,GAAG,KAAK;AAAA,IAC/B,OAAO;AAAA,EACT;AAAA,EACA,YAAY;AAAA,IACV,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,WAAW;AAAA,MACT,iBAAiB,MAAM,OAAO;AAAA,IAAA;AAAA,EAElC;AAAA,EACA,UAAU,CAAC;AAAA,EACX,WAAW;AAAA,IACT,QAAQ;AAAA,EACV;AAAA,EACA,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,YAAY;AAAA,EACd;AAAA;AAAA,EAGA,UAAU,CAAC;AAAA;AAAA;AAAA;AAAA,EAIX,QAAQ,CAAC;AAAA;AAAA,EAET,WAAW,CAAC;AAAA;AAAA;AAAA,EAGZ,cAAc,CAAC;AAAA;AAAA,EAEf,oBAAoB,CAAC;AAAA;AAAA,EAErB,kBAAkB,CAAC;AAAA;AAAA,EAEnB,qBAAqB,CAAA;AACvB,CAAC;"}
1
+ {"version":3,"file":"Tag.styles.js","sources":["../../../src/Tag/Tag.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTag\", {\n root: {\n display: \"inline-flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n cursor: \"default\",\n color: theme.colors.base_dark,\n backgroundColor: \"var(--bgColor)\",\n height: 16,\n borderRadius: 0,\n maxWidth: 180,\n whiteSpace: \"nowrap\",\n\n \":hover, :focus\": {\n backgroundColor: \"var(--bgColor)\",\n },\n },\n categorical: {\n borderRadius: 8,\n \"& $label\": {\n color: theme.colors.secondary,\n },\n },\n\n disabled: {\n backgroundColor: theme.colors.atmo3,\n \":hover, :focus\": {\n backgroundColor: theme.colors.atmo3,\n },\n \"& $label\": {\n color: theme.colors.secondary_60,\n },\n },\n label: {\n padding: theme.spacing(0, \"xxs\"),\n color: \"inherit\",\n },\n deleteIcon: {\n width: 16,\n height: 16,\n \"&:hover\": {\n backgroundColor: theme.colors.containerBackgroundHover,\n },\n },\n selected: {},\n clickable: {\n cursor: \"pointer\",\n },\n icon: {\n width: 12,\n height: 12,\n marginLeft: 2,\n },\n\n /** @deprecated use `root` instead */\n chipRoot: {},\n /** @deprecated unused */\n // TODO: redundant - use deleteIcon. remove in v6\n /** @deprecated */\n button: {},\n /** @deprecated */\n tagButton: {},\n // TODO: redundant - use $clickable or :not($disabled). remove in v6\n /** @deprecated */\n focusVisible: {},\n /** @deprecated */\n disabledDeleteIcon: {},\n /** @deprecated */\n categoricalFocus: {},\n /** @deprecated */\n categoricalDisabled: {},\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,SAAS;AAAA,EAClE,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,QAAQ;AAAA,IACR,OAAO,MAAM,OAAO;AAAA,IACpB,iBAAiB;AAAA,IACjB,QAAQ;AAAA,IACR,cAAc;AAAA,IACd,UAAU;AAAA,IACV,YAAY;AAAA,IAEZ,kBAAkB;AAAA,MAChB,iBAAiB;AAAA,IAAA;AAAA,EAErB;AAAA,EACA,aAAa;AAAA,IACX,cAAc;AAAA,IACd,YAAY;AAAA,MACV,OAAO,MAAM,OAAO;AAAA,IAAA;AAAA,EAExB;AAAA,EAEA,UAAU;AAAA,IACR,iBAAiB,MAAM,OAAO;AAAA,IAC9B,kBAAkB;AAAA,MAChB,iBAAiB,MAAM,OAAO;AAAA,IAChC;AAAA,IACA,YAAY;AAAA,MACV,OAAO,MAAM,OAAO;AAAA,IAAA;AAAA,EAExB;AAAA,EACA,OAAO;AAAA,IACL,SAAS,MAAM,QAAQ,GAAG,KAAK;AAAA,IAC/B,OAAO;AAAA,EACT;AAAA,EACA,YAAY;AAAA,IACV,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,WAAW;AAAA,MACT,iBAAiB,MAAM,OAAO;AAAA,IAAA;AAAA,EAElC;AAAA,EACA,UAAU,CAAC;AAAA,EACX,WAAW;AAAA,IACT,QAAQ;AAAA,EACV;AAAA,EACA,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,YAAY;AAAA,EACd;AAAA;AAAA,EAGA,UAAU,CAAC;AAAA;AAAA;AAAA;AAAA,EAIX,QAAQ,CAAC;AAAA;AAAA,EAET,WAAW,CAAC;AAAA;AAAA;AAAA,EAGZ,cAAc,CAAC;AAAA;AAAA,EAEf,oBAAoB,CAAC;AAAA;AAAA,EAErB,kBAAkB,CAAC;AAAA;AAAA,EAEnB,qBAAqB,CAAA;AACvB,CAAC;"}
package/dist/types/index.d.ts CHANGED
@@ -1098,6 +1098,9 @@ export declare interface HvAccordionProps extends HvBaseProps<HTMLDivElement, "o
1098
1098
  disableEventHandling?: boolean;
1099
1099
  }
1100
1100
 
1101
+ /**
1102
+ * The Action Bar accommodates all the actions related to a specific task on a screen or pattern.
1103
+ */
1101
1104
  export declare const HvActionBar: ForwardRefExoticComponent<HvActionBarProps & RefAttributes<HTMLDivElement>>;
1102
1105
 
1103
1106
  export declare type HvActionBarClasses = ExtractNames<typeof useClasses_21>;
@@ -3784,16 +3787,6 @@ export declare type HvGlobalActionsVariant = "global" | "section";
3784
3787
  *
3785
3788
  * It's based on the [Material UI Grid](https://mui.com/material-ui/react-grid/).
3786
3789
  *
3787
- * The definitions were set following the Design System directives:
3788
- *
3789
- * | Breakpoint | Width (in px) | Gutters (in px) | Number of columns |
3790
- * | ---------- | ------------- | --------------- | ----------------- |
3791
- * | xs | [0-600[ | 16 | 4 |
3792
- * | sm | [600-960[ | 16 | 8 |
3793
- * | md | [960-1270[ | 32 | 12 |
3794
- * | lg | [1270-1920[ | 32 | 12 |
3795
- * | xl | [1920-...[ | 32 | 12 |
3796
- *
3797
3790
  * However, the number of columns is set to 12 for all breakpoints, as it serves most
3798
3791
  * of the use cases and simplifies the implementation.
3799
3792
  * To opt-in to the Design System directives, you can set the `columns` prop to `auto`.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hitachivantara/uikit-react-core",
3
- "version": "5.86.0",
3
+ "version": "5.87.0",
4
4
  "private": false,
5
5
  "author": "Hitachi Vantara UI Kit Team",
6
6
  "description": "Core React components for the NEXT Design System.",
@@ -32,10 +32,10 @@
32
32
  "dependencies": {
33
33
  "@emotion/cache": "^11.11.0",
34
34
  "@emotion/serialize": "^1.1.2",
35
- "@hitachivantara/uikit-react-icons": "^5.13.4",
36
- "@hitachivantara/uikit-react-shared": "^5.3.20",
37
- "@hitachivantara/uikit-react-utils": "^0.2.21",
38
- "@hitachivantara/uikit-styles": "^5.40.6",
35
+ "@hitachivantara/uikit-react-icons": "^5.13.5",
36
+ "@hitachivantara/uikit-react-shared": "^5.3.21",
37
+ "@hitachivantara/uikit-react-utils": "^0.2.22",
38
+ "@hitachivantara/uikit-styles": "^5.41.0",
39
39
  "@internationalized/date": "^3.2.0",
40
40
  "@mui/base": "^5.0.0-beta.40",
41
41
  "@popperjs/core": "^2.11.8",
@@ -62,7 +62,7 @@
62
62
  "access": "public",
63
63
  "directory": "package"
64
64
  },
65
- "gitHead": "b640963c1ededed00ec3f0f2bce7f7cdab8891c6",
65
+ "gitHead": "2210f928e5308348eed4e40b6949f980a8f2ecb6",
66
66
  "exports": {
67
67
  ".": {
68
68
  "types": "./dist/types/index.d.ts",