@hazelcast/ui 4.0.1-canary.9 → 4.0.2

package/lib/components/Carousel.js

@@ -2,9 +2,9 @@ import React from 'react';
 import cn from 'classnames';
 import NukaCarousel from 'nuka-carousel';
 import { ChevronLeft, ChevronRight } from 'react-feather';
-import styleConsts from '../../styles/constants/export.module.scss';
-import styles from './Carousel.module.scss';
-export const Carousel = ({ children, color = styleConsts.colorPrimary, wrapperClassName, cellSpacing = 15, slidesToShow = 1, defaultControlsConfig, 'data-test': dataTest = 'carousel', ...props }) => {
+import { styleConstants } from '../utils/styleConstants';
+import styles from './Carousel.module.css';
+export const Carousel = ({ children, color = styleConstants.colorPrimary, wrapperClassName, cellSpacing = 15, slidesToShow = 1, defaultControlsConfig, 'data-test': dataTest = 'carousel', ...props }) => {
     var _a, _b, _c, _d, _e;
     return (React.createElement("div", { "data-test": dataTest, className: cn(wrapperClassName, styles.wrapper) },
         React.createElement(NukaCarousel, { slidesToShow: slidesToShow, defaultControlsConfig: {

package/lib/components/Carousel.js.map

@@ -1 +1 @@
-{"version":3,"file":"Carousel.js","sourceRoot":"","sources":["../../src/components/Carousel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqD,MAAM,OAAO,CAAA;AACzE,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,YAAoD,MAAM,eAAe,CAAA;AAChF,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AAIzD,OAAO,WAAW,MAAM,2CAA2C,CAAA;AACnE,OAAO,MAAM,MAAM,wBAAwB,CAAA;AA0B3C,MAAM,CAAC,MAAM,QAAQ,GAAsB,CAAC,EAC1C,QAAQ,EACR,KAAK,GAAG,WAAW,CAAC,YAAY,EAChC,gBAAgB,EAChB,WAAW,GAAG,EAAE,EAChB,YAAY,GAAG,CAAC,EAChB,qBAAqB,EACrB,WAAW,EAAE,QAAQ,GAAG,UAAU,EAClC,GAAG,KAAK,EACT,EAAE,EAAE;;IACH,OAAO,CACL,0CAAgB,QAAQ,EAAE,SAAS,EAAE,EAAE,CAAC,gBAAgB,EAAE,MAAM,CAAC,OAAO,CAAC;QACvE,oBAAC,YAAY,IACX,YAAY,EAAE,YAAY,EAC1B,qBAAqB,EAAE;gBACrB,cAAc,EAAE,MAAA,qBAAqB,aAArB,qBAAqB,uBAArB,qBAAqB,CAAE,iBAAiB,mCAAI,oBAAC,YAAY,IAAC,IAAI,EAAE,EAAE,EAAE,WAAW,EAAC,KAAK,EAAC,KAAK,EAAE,KAAK,GAAI;gBACtH,cAAc,EAAE,MAAA,qBAAqB,aAArB,qBAAqB,uBAArB,qBAAqB,CAAE,iBAAiB,mCAAI,oBAAC,WAAW,IAAC,IAAI,EAAE,EAAE,EAAE,WAAW,EAAC,KAAK,EAAC,KAAK,EAAE,KAAK,GAAI;gBACrH,mBAAmB,EAAE,EAAE,CAAC,qBAAqB,aAArB,qBAAqB,uBAArB,qBAAqB,CAAE,mBAAmB,EAAE,MAAM,CAAC,mBAAmB,CAAC;gBAC/F,mBAAmB,EAAE,EAAE,CAAC,qBAAqB,aAArB,qBAAqB,uBAArB,qBAAqB,CAAE,mBAAmB,EAAE,MAAM,CAAC,mBAAmB,CAAC;gBAC/F,eAAe,EAAE,MAAA,qBAAqB,aAArB,qBAAqB,uBAArB,qBAAqB,CAAE,eAAe,mCAAI,EAAE,UAAU,EAAE,MAAM,EAAE;gBACjF,eAAe,EAAE,MAAA,qBAAqB,aAArB,qBAAqB,uBAArB,qBAAqB,CAAE,eAAe,mCAAI,EAAE,UAAU,EAAE,MAAM,EAAE;gBACjF,mBAAmB,EAAE,EAAE,CAAC,qBAAqB,aAArB,qBAAqB,uBAArB,qBAAqB,CAAE,mBAAmB,EAAE,MAAM,CAAC,mBAAmB,CAAC;gBAC/F,eAAe,EAAE,MAAA,qBAAqB,aAArB,qBAAqB,uBAArB,qBAAqB,CAAE,eAAe,mCAAI;oBACzD,IAAI,EAAE,KAAK;iBACZ;gBACD,kBAAkB,EAAE,qBAAqB,aAArB,qBAAqB,uBAArB,qBAAqB,CAAE,kBAAkB;gBAC7D,iBAAiB,EAAE,qBAAqB,aAArB,qBAAqB,uBAArB,qBAAqB,CAAE,iBAAiB;gBAC3D,4BAA4B,EAAE,qBAAqB,aAArB,qBAAqB,uBAArB,qBAAqB,CAAE,4BAA4B;gBACjF,iBAAiB,EAAE,qBAAqB,aAArB,qBAAqB,uBAArB,qBAAqB,CAAE,iBAAiB;gBAC3D,iBAAiB,EAAE,qBAAqB,aAArB,qBAAqB,uBAArB,qBAAqB,CAAE,iBAAiB;aAC5D,EACD,WAAW,EAAE,WAAW,KACpB,KAAK,IAER,QAAQ,CACI,CACX,CACP,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"Carousel.js","sourceRoot":"","sources":["../../src/components/Carousel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqD,MAAM,OAAO,CAAA;AACzE,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,YAAoD,MAAM,eAAe,CAAA;AAChF,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AAIzD,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAA;AACxD,OAAO,MAAM,MAAM,uBAAuB,CAAA;AA0B1C,MAAM,CAAC,MAAM,QAAQ,GAAsB,CAAC,EAC1C,QAAQ,EACR,KAAK,GAAG,cAAc,CAAC,YAAY,EACnC,gBAAgB,EAChB,WAAW,GAAG,EAAE,EAChB,YAAY,GAAG,CAAC,EAChB,qBAAqB,EACrB,WAAW,EAAE,QAAQ,GAAG,UAAU,EAClC,GAAG,KAAK,EACT,EAAE,EAAE;;IACH,OAAO,CACL,0CAAgB,QAAQ,EAAE,SAAS,EAAE,EAAE,CAAC,gBAAgB,EAAE,MAAM,CAAC,OAAO,CAAC;QACvE,oBAAC,YAAY,IACX,YAAY,EAAE,YAAY,EAC1B,qBAAqB,EAAE;gBACrB,cAAc,EAAE,MAAA,qBAAqB,aAArB,qBAAqB,uBAArB,qBAAqB,CAAE,iBAAiB,mCAAI,oBAAC,YAAY,IAAC,IAAI,EAAE,EAAE,EAAE,WAAW,EAAC,KAAK,EAAC,KAAK,EAAE,KAAK,GAAI;gBACtH,cAAc,EAAE,MAAA,qBAAqB,aAArB,qBAAqB,uBAArB,qBAAqB,CAAE,iBAAiB,mCAAI,oBAAC,WAAW,IAAC,IAAI,EAAE,EAAE,EAAE,WAAW,EAAC,KAAK,EAAC,KAAK,EAAE,KAAK,GAAI;gBACrH,mBAAmB,EAAE,EAAE,CAAC,qBAAqB,aAArB,qBAAqB,uBAArB,qBAAqB,CAAE,mBAAmB,EAAE,MAAM,CAAC,mBAAmB,CAAC;gBAC/F,mBAAmB,EAAE,EAAE,CAAC,qBAAqB,aAArB,qBAAqB,uBAArB,qBAAqB,CAAE,mBAAmB,EAAE,MAAM,CAAC,mBAAmB,CAAC;gBAC/F,eAAe,EAAE,MAAA,qBAAqB,aAArB,qBAAqB,uBAArB,qBAAqB,CAAE,eAAe,mCAAI,EAAE,UAAU,EAAE,MAAM,EAAE;gBACjF,eAAe,EAAE,MAAA,qBAAqB,aAArB,qBAAqB,uBAArB,qBAAqB,CAAE,eAAe,mCAAI,EAAE,UAAU,EAAE,MAAM,EAAE;gBACjF,mBAAmB,EAAE,EAAE,CAAC,qBAAqB,aAArB,qBAAqB,uBAArB,qBAAqB,CAAE,mBAAmB,EAAE,MAAM,CAAC,mBAAmB,CAAC;gBAC/F,eAAe,EAAE,MAAA,qBAAqB,aAArB,qBAAqB,uBAArB,qBAAqB,CAAE,eAAe,mCAAI;oBACzD,IAAI,EAAE,KAAK;iBACZ;gBACD,kBAAkB,EAAE,qBAAqB,aAArB,qBAAqB,uBAArB,qBAAqB,CAAE,kBAAkB;gBAC7D,iBAAiB,EAAE,qBAAqB,aAArB,qBAAqB,uBAArB,qBAAqB,CAAE,iBAAiB;gBAC3D,4BAA4B,EAAE,qBAAqB,aAArB,qBAAqB,uBAArB,qBAAqB,CAAE,4BAA4B;gBACjF,iBAAiB,EAAE,qBAAqB,aAArB,qBAAqB,uBAArB,qBAAqB,CAAE,iBAAiB;gBAC3D,iBAAiB,EAAE,qBAAqB,aAArB,qBAAqB,uBAArB,qBAAqB,CAAE,iBAAiB;aAC5D,EACD,WAAW,EAAE,WAAW,KACpB,KAAK,IAER,QAAQ,CACI,CACX,CACP,CAAA;AACH,CAAC,CAAA"}

package/lib/components/Carousel.module.css

@@ -0,0 +1,53 @@
+.withError {
+  position: relative;
+  padding-bottom: calc(var(--hive-error-height) + var(--hive-grid));
+
+  .errorContainer {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    overflow: hidden;
+    height: var(--hive-error-height);
+    width: 100%;
+  }
+}
+
+.wrapper {
+  margin-left: calc(var(--hive-grid) * 10);
+  margin-right: calc(var(--hive-grid) * 10);
+  margin-bottom: calc(var(--hive-grid) * 2);
+}
+
+.nextButtonClassName {
+  left: calc(var(--hive-grid) * 12);
+}
+
+.prevButtonClassName {
+  right: calc(var(--hive-grid) * 12);
+}
+
+.nextButtonClassName,
+.prevButtonClassName {
+  padding: 0 !important;
+  position: relative;
+  height: 40px;
+
+  &:focus-visible {
+    box-shadow: 0 0 0 var(--hive-outline-width) var(--hive-color-accessibility-outline);
+  }
+}
+
+.pagingDotsClassName {
+  position: relative;
+  top: calc(var(--hive-grid) * 7);
+  margin-left: calc(var(--hive-grid) * 0.5);
+  margin-right: calc(var(--hive-grid) * 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: calc(var(--hive-grid) * 1.5);
+
+  &:focus-visible {
+    box-shadow: 0 0 0 var(--hive-outline-width) var(--hive-color-accessibility-outline);
+  }
+}

package/lib/components/CenteredLoader.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Loader } from './Loader';
-import styles from './CenteredLoader.module.scss';
+import styles from './CenteredLoader.module.css';
 export const CenteredLoader = ({ 'data-test': dataTest = 'centered-loader', ...props }) => (React.createElement("div", { className: styles.container, "data-test": dataTest },
     React.createElement(Loader, { ...props })));
 //# sourceMappingURL=CenteredLoader.js.map

package/lib/components/CenteredLoader.js.map

@@ -1 +1 @@
-{"version":3,"file":"CenteredLoader.js","sourceRoot":"","sources":["../../src/components/CenteredLoader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AAGjC,OAAO,EAAe,MAAM,EAAE,MAAM,UAAU,CAAA;AAE9C,OAAO,MAAM,MAAM,8BAA8B,CAAA;AAGjD,MAAM,CAAC,MAAM,cAAc,GAA4B,CAAC,EAAE,WAAW,EAAE,QAAQ,GAAG,iBAAiB,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE,CAAC,CAClH,6BAAK,SAAS,EAAE,MAAM,CAAC,SAAS,eAAa,QAAQ;IACnD,oBAAC,MAAM,OAAK,KAAK,GAAI,CACjB,CACP,CAAA"}
+{"version":3,"file":"CenteredLoader.js","sourceRoot":"","sources":["../../src/components/CenteredLoader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AAGjC,OAAO,EAAe,MAAM,EAAE,MAAM,UAAU,CAAA;AAE9C,OAAO,MAAM,MAAM,6BAA6B,CAAA;AAGhD,MAAM,CAAC,MAAM,cAAc,GAA4B,CAAC,EAAE,WAAW,EAAE,QAAQ,GAAG,iBAAiB,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE,CAAC,CAClH,6BAAK,SAAS,EAAE,MAAM,CAAC,SAAS,eAAa,QAAQ;IACnD,oBAAC,MAAM,OAAK,KAAK,GAAI,CACjB,CACP,CAAA"}

package/lib/components/{CenteredLoader.module.scss → CenteredLoader.module.css}

@@ -1,5 +1,3 @@
-@use '../../styles/constants' as c;
-
 .container {
   display: flex;
   justify-content: center;
@@ -7,5 +5,5 @@
   width: 100%;
   height: 100%;
   flex-grow: 1;
-  color: c.$colorTextSecondary;
+  color: var(--hive-color-text-secondary);
 }

package/lib/components/CircularProgressBar.js

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import useEffectOnce from 'react-use/lib/useEffectOnce';
-import styles from './CircularProgressBar.module.scss';
+import styles from './CircularProgressBar.module.css';
 export const size = 132;
 export const outerStrokeWidth = 6;
 export const innerStrokeWidth = 4;

package/lib/components/CircularProgressBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"CircularProgressBar.js","sourceRoot":"","sources":["../../src/components/CircularProgressBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAM,QAAQ,EAAE,MAAM,OAAO,CAAA;AAC3C,OAAO,aAAa,MAAM,6BAA6B,CAAA;AAEvD,OAAO,MAAM,MAAM,mCAAmC,CAAA;AAEtD,MAAM,CAAC,MAAM,IAAI,GAAG,GAAG,CAAA;AACvB,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,CAAA;AACjC,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,CAAA;AAUjC,MAAM,CAAC,MAAM,mBAAmB,GAAiC,CAAC,EAAE,QAAQ,EAAE,MAAM,GAAG,CAAC,EAAE,GAAG,GAAG,CAAC,EAAE,gBAAgB,GAAG,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE;IACpI,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAEnE,aAAa,CAAC,GAAG,EAAE;QACjB,IAAI,gBAAgB,EAAE,CAAC;YACrB,qBAAqB,CAAC,IAAI,CAAC,CAAA;QAC7B,CAAC;IACH,CAAC,CAAC,CAAA;IAEF,MAAM,MAAM,GAAG,IAAI,GAAG,CAAC,CAAA;IACvB,MAAM,MAAM,GAAG,IAAI,GAAG,CAAC,GAAG,gBAAgB,GAAG,CAAC,CAAA;IAC9C,MAAM,aAAa,GAAG,CAAC,GAAG,IAAI,CAAC,EAAE,GAAG,MAAM,CAAA;IAE1C,MAAM,0BAA0B,GAAG,gBAAgB,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAA;IACzF,MAAM,YAAY,GAAG,CAAC,aAAa,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,CAAA;IACxD,MAAM,uBAAuB,GAAG,GAAG,YAAY,KAAK,aAAa,EAAE,CAAA;IACnE,MAAM,wBAAwB,GAAG,CAAC,YAAY,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,GAAG,0BAA0B,CAAC,CAAA;IAE1F,OAAO,CACL,0CAAe,eAAe,EAAC,SAAS,EAAE,MAAM,CAAC,SAAS,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE;QAC9F,0CAAe,SAAS,EAAC,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,SAAS,EAAE,UAAU,MAAM,MAAM,EAAE;YAC9F,6CACY,6BAA6B,EACvC,SAAS,EAAE,MAAM,CAAC,qBAAqB,EACvC,EAAE,EAAE,MAAM,EACV,EAAE,EAAE,MAAM,EACV,CAAC,EAAE,MAAM,EACT,WAAW,EAAE,gBAAgB,EAC7B,eAAe,EAAE,YAAY,GAC7B;YACF,6CACY,6BAA6B,EACvC,SAAS,EAAE,MAAM,CAAC,qBAAqB,EACvC,EAAE,EAAE,MAAM,EACV,EAAE,EAAE,MAAM,EACV,CAAC,EAAE,MAAM,EACT,WAAW,EAAE,gBAAgB,EAC7B,eAAe,EAAE,YAAY,GAC7B;YACF,6CACY,qBAAqB,EAC/B,SAAS,EAAE,MAAM,CAAC,cAAc,EAChC,EAAE,EAAE,MAAM,EACV,EAAE,EAAE,MAAM,EACV,CAAC,EAAE,MAAM,EACT,WAAW,EAAE,gBAAgB,EAC7B,eAAe,EAAE,uBAAuB,EACxC,gBAAgB,EAAE,wBAAwB,GAC1C,CACE;QACN,0CAAe,UAAU,EAAC,SAAS,EAAE,MAAM,CAAC,SAAS,IAClD,IAAI,CACD,CACF,CACP,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"CircularProgressBar.js","sourceRoot":"","sources":["../../src/components/CircularProgressBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAM,QAAQ,EAAE,MAAM,OAAO,CAAA;AAC3C,OAAO,aAAa,MAAM,6BAA6B,CAAA;AAEvD,OAAO,MAAM,MAAM,kCAAkC,CAAA;AAErD,MAAM,CAAC,MAAM,IAAI,GAAG,GAAG,CAAA;AACvB,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,CAAA;AACjC,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,CAAA;AAUjC,MAAM,CAAC,MAAM,mBAAmB,GAAiC,CAAC,EAAE,QAAQ,EAAE,MAAM,GAAG,CAAC,EAAE,GAAG,GAAG,CAAC,EAAE,gBAAgB,GAAG,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE;IACpI,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAEnE,aAAa,CAAC,GAAG,EAAE;QACjB,IAAI,gBAAgB,EAAE,CAAC;YACrB,qBAAqB,CAAC,IAAI,CAAC,CAAA;QAC7B,CAAC;IACH,CAAC,CAAC,CAAA;IAEF,MAAM,MAAM,GAAG,IAAI,GAAG,CAAC,CAAA;IACvB,MAAM,MAAM,GAAG,IAAI,GAAG,CAAC,GAAG,gBAAgB,GAAG,CAAC,CAAA;IAC9C,MAAM,aAAa,GAAG,CAAC,GAAG,IAAI,CAAC,EAAE,GAAG,MAAM,CAAA;IAE1C,MAAM,0BAA0B,GAAG,gBAAgB,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAA;IACzF,MAAM,YAAY,GAAG,CAAC,aAAa,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,CAAA;IACxD,MAAM,uBAAuB,GAAG,GAAG,YAAY,KAAK,aAAa,EAAE,CAAA;IACnE,MAAM,wBAAwB,GAAG,CAAC,YAAY,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,GAAG,0BAA0B,CAAC,CAAA;IAE1F,OAAO,CACL,0CAAe,eAAe,EAAC,SAAS,EAAE,MAAM,CAAC,SAAS,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE;QAC9F,0CAAe,SAAS,EAAC,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,SAAS,EAAE,UAAU,MAAM,MAAM,EAAE;YAC9F,6CACY,6BAA6B,EACvC,SAAS,EAAE,MAAM,CAAC,qBAAqB,EACvC,EAAE,EAAE,MAAM,EACV,EAAE,EAAE,MAAM,EACV,CAAC,EAAE,MAAM,EACT,WAAW,EAAE,gBAAgB,EAC7B,eAAe,EAAE,YAAY,GAC7B;YACF,6CACY,6BAA6B,EACvC,SAAS,EAAE,MAAM,CAAC,qBAAqB,EACvC,EAAE,EAAE,MAAM,EACV,EAAE,EAAE,MAAM,EACV,CAAC,EAAE,MAAM,EACT,WAAW,EAAE,gBAAgB,EAC7B,eAAe,EAAE,YAAY,GAC7B;YACF,6CACY,qBAAqB,EAC/B,SAAS,EAAE,MAAM,CAAC,cAAc,EAChC,EAAE,EAAE,MAAM,EACV,EAAE,EAAE,MAAM,EACV,CAAC,EAAE,MAAM,EACT,WAAW,EAAE,gBAAgB,EAC7B,eAAe,EAAE,uBAAuB,EACxC,gBAAgB,EAAE,wBAAwB,GAC1C,CACE;QACN,0CAAe,UAAU,EAAC,SAAS,EAAE,MAAM,CAAC,SAAS,IAClD,IAAI,CACD,CACF,CACP,CAAA;AACH,CAAC,CAAA"}

package/lib/components/{CircularProgressBar.module.scss → CircularProgressBar.module.css}

@@ -1,23 +1,21 @@
-@use '../../styles/constants' as c;
-
 .container {
   position: relative;
 
   .backgroundOuterCircle {
     fill: none;
-    stroke: c.$colorNeutralLight;
+    stroke: var(--hive-color-neutral-light);
     stroke-linecap: round;
   }
 
   .backgroundInnerCircle {
     fill: none;
-    stroke: c.$colorNeutralLighter;
+    stroke: var(--hive-color-neutral-lighter);
     stroke-linecap: round;
   }
 
   .progressCircle {
     fill: none;
-    stroke: c.$colorSuccess;
+    stroke: var(--hive-color-success);
     stroke-linecap: round;
     transition: stroke-dashoffset 750ms ease-in-out;
   }
@@ -30,8 +28,10 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    color: c.$colorTextSecondary;
-
-    @include c.typographyH2;
+    color: var(--hive-color-text-secondary);
+    font-weight: var(--hive-font-weight-heading-regular);
+    font-size: var(--hive-font-size-h2);
+    letter-spacing: var(--hive-letter-spacing-h2);
+    line-height: var(--hive-line-height-h2);
   }
 }

package/lib/components/ContextMenu.js

@@ -3,7 +3,7 @@ import { createPortal } from 'react-dom';
 import cls from 'classnames';
 import useIsomorphicLayoutEffect from 'react-use/lib/useIsomorphicLayoutEffect';
 import { useRefValue } from '../hooks';
-import styles from './ContextMenu.module.scss';
+import styles from './ContextMenu.module.css';
 export const ContextMenu = ({ anchorElement, offset, items }) => {
     const rootEl = useRef(null);
     const [coords, setCoords] = useState(null);

package/lib/components/ContextMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContextMenu.js","sourceRoot":"","sources":["../../src/components/ContextMenu.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"ContextMenu.js","sourceRoot":"","sources":["../../src/components/ContextMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAa,WAAW,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACvE,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AACxC,OAAO,GAAG,MAAM,YAAY,CAAA;AAC5B,OAAO,yBAAyB,MAAM,yCAAyC,CAAA;AAE/E,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAEtC,OAAO,MAAM,MAAM,0BAA0B,CAAA;AAc7C,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAAE,aAAa,EAAE,MAAM,EAAE,KAAK,EAAoB,EAAE,EAAE;IAChF,MAAM,MAAM,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IAC3C,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAuC,IAAI,CAAC,CAAA;IAEhF,MAAM,SAAS,GAAG,WAAW,CAAC,MAAM,CAAC,CAAA;IAErC,MAAM,qBAAqB,GAAG,WAAW,CACvC,CAAC,CAAa,EAAE,EAAE;;QAChB,IAAI,CAAC,aAAa,IAAI,CAAC,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAc,CAAC,IAAI,CAAC,CAAC,MAAM,KAAK,aAAa,CAAC,EAAE,CAAC;YAChG,OAAM;QACR,CAAC;QACD,CAAC,CAAC,cAAc,EAAE,CAAA;QAElB,MAAM,aAAa,GAAG,SAAS,EAAE,CAAA;QACjC,MAAM,KAAK,GAAG,MAAA,MAAA,MAAM,CAAC,OAAO,0CAAE,WAAW,mCAAI,CAAC,CAAA;QAC9C,MAAM,MAAM,GAAG,MAAA,MAAA,MAAM,CAAC,OAAO,0CAAE,YAAY,mCAAI,CAAC,CAAA;QAChD,IAAI,IAAI,GAAG,CAAC,CAAC,KAAK,GAAG,CAAC,MAAA,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,IAAI,mCAAI,CAAC,CAAC,CAAA;QAC/C,IAAI,GAAG,GAAG,CAAC,CAAC,KAAK,GAAG,CAAC,MAAA,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,GAAG,mCAAI,CAAC,CAAC,CAAA;QAE7C,IAAI,IAAI,GAAG,KAAK,GAAG,MAAM,CAAC,OAAO,GAAG,QAAQ,CAAC,eAAe,CAAC,WAAW,EAAE,CAAC;YACzE,IAAI,GAAG,MAAM,CAAC,OAAO,GAAG,QAAQ,CAAC,eAAe,CAAC,WAAW,GAAG,KAAK,CAAA;QACtE,CAAC;QACD,IAAI,GAAG,GAAG,MAAM,GAAG,MAAM,CAAC,OAAO,GAAG,QAAQ,CAAC,eAAe,CAAC,YAAY,EAAE,CAAC;YAC1E,GAAG,GAAG,MAAM,CAAC,OAAO,GAAG,QAAQ,CAAC,eAAe,CAAC,YAAY,GAAG,MAAM,CAAA;QACvE,CAAC;QAED,SAAS,CAAC,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC,CAAA;IAC1B,CAAC,EACD,CAAC,SAAS,EAAE,SAAS,EAAE,aAAa,CAAC,CACtC,CAAA;IACD,MAAM,sBAAsB,GAAG,WAAW,CAAC,GAAG,EAAE;QAC9C,SAAS,CAAC,IAAI,CAAC,CAAA;IACjB,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAA;IAEf,yBAAyB,CAAC,GAAG,EAAE;QAC7B,IAAI,aAAa,EAAE,CAAC;YAClB,QAAQ,CAAC,IAAI,CAAC,gBAAgB,CAAC,aAAa,EAAE,qBAAqB,EAAE,KAAK,CAAC,CAAA;QAC7E,CAAC;QACD,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,IAAI,CAAC,mBAAmB,CAAC,aAAa,EAAE,qBAAqB,CAAC,CAAA;QACzE,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,qBAAqB,CAAC,CAAC,CAAA;IAC3B,yBAAyB,CAAC,GAAG,EAAE;QAC7B,IAAI,MAAM,EAAE,CAAC;YACX,QAAQ,CAAC,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,sBAAsB,EAAE,KAAK,CAAC,CAAA;QACxE,CAAC;QAED,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAE,sBAAsB,CAAC,CAAA;QACpE,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,MAAM,EAAE,sBAAsB,CAAC,CAAC,CAAA;IACpC,yBAAyB,CAAC,GAAG,EAAE;QAC7B,IAAI,MAAM,EAAE,CAAC;YACX,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,sBAAsB,CAAC,CAAA;YACzD,MAAM,CAAC,gBAAgB,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,CAAA;QACtE,CAAC;QAED,OAAO,GAAG,EAAE;YACV,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,sBAAsB,CAAC,CAAA;YAC5D,MAAM,CAAC,mBAAmB,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,CAAA;QACzE,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,MAAM,EAAE,sBAAsB,CAAC,CAAC,CAAA;IAEpC,OAAO,YAAY,CACjB,6BAAK,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,IAAI,SAAS,EAAE,SAAS,EAAE,GAAG,CAAC,MAAM,CAAC,IAAI,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,IACpG,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,KAAK,EAAE,EAAE,CAAC,CACrD,gCAAQ,GAAG,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,CAAC,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,EAAE,OAAO,EAAE,OAAO,IACzE,OAAO,CACD,CACV,CAAC,CACE,EACN,QAAQ,CAAC,IAAI,CACd,CAAA;AACH,CAAC,CAAA"}

package/lib/components/ContextMenu.module.css

@@ -0,0 +1,34 @@
+.root {
+  position: absolute;
+  padding: var(--hive-grid) 0;
+  background: var(--hive-color-neutral-white);
+  border-radius: var(--hive-border-radius);
+  border: var(--hive-border-width) solid var(--hive-color-neutral);
+  z-index: var(--hive-z-index-2000);
+  display: flex;
+  flex-direction: column;
+}
+
+.item {
+  flex-grow: 1;
+  flex-shrink: 0;
+  background: none;
+  padding: var(--hive-grid) calc(var(--hive-grid) * 4);
+  margin: 0;
+  cursor: pointer;
+  border: none;
+  text-align: left;
+
+  &:focus-visible {
+    box-shadow: inset 0 0 0 var(--hive-outline-width) var(--hive-color-accessibility-outline);
+  }
+
+  &:hover {
+    background: var(--hive-color-neutral);
+  }
+}
+
+.hidden {
+  top: -9999999999px;
+  left: -999999999px;
+}

package/lib/components/Dialog.js

@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 import cn from 'classnames';
 import { Modal } from './Modal';
-import styles from './Dialog.module.scss';
+import styles from './Dialog.module.css';
 export const DIALOG_AFFIRMATION_DEFAULT = 'Are you sure you wish to proceed?';
 /**
  * ### Purpose

package/lib/components/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../src/components/Dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAiB,OAAO,EAAE,MAAM,OAAO,CAAA;AACrD,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,EAAE,KAAK,EAAgC,MAAM,SAAS,CAAA;AAE7D,OAAO,MAAM,MAAM,sBAAsB,CAAA;AAEzC,MAAM,CAAC,MAAM,0BAA0B,GAAG,mCAAmC,CAAA;AAyB7E;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,MAAM,GAAoB,CAAC,EACtC,cAAc,EACd,YAAY,EACZ,WAAW,GAAG,0BAA0B,EACxC,cAAc,EACd,eAAe,EACf,cAAc,EACd,qBAAqB,EACrB,eAAe,EACf,GAAG,IAAI,EACR,EAAE,EAAE;IACH,MAAM,OAAO,GAAG,OAAO,CAAC,GAAG,EAAE;QAC3B,MAAM,KAAK,GACT,cAAc,IAAI,eAAe;YAC/B,CAAC,CAAC;gBACE;oBACE,SAAS,EAAE,CAAC,eAAe;oBAC3B,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS;oBAC7C,GAAG,CAAC,cAAc,IAAI,qBAAqB;wBACzC,CAAC,CAAC;4BACE,QAAQ,EAAE,cAAc;4BACxB,eAAe,EAAE,qBAAqB;yBACvC;wBACH,CAAC,CAAC;4BACE,QAAQ,EAAE,SAAS;4BACnB,eAAe,EAAE,SAAS;yBAC3B,CAAC;oBACN,OAAO,EAAE,eAAe;oBACxB,QAAQ,EAAE,cAAc;iBACzB;aACF;YACH,CAAC,CAAC,EAAE,CAAA;QAER,OAAO,KAAK,CAAA;IACd,CAAC,EAAE,CAAC,eAAe,EAAE,cAAc,EAAE,qBAAqB,EAAE,eAAe,EAAE,cAAc,CAAC,CAAC,CAAA;IAE7F,OAAO,CACL,oBAAC,KAAK,IACJ,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,EAC5C,eAAe,EAAE,MAAM,CAAC,YAAY,EACpC,aAAa,EAAE,MAAM,CAAC,UAAU,EAChC,gBAAgB,EAAE,MAAM,CAAC,kBAAkB,EAC3C,eAAe,EAAE,MAAM,CAAC,YAAY,EACpC,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,WAAW,EAClB,eAAe,EAAE,KAAK,KAClB,IAAI,IAEP,YAAY,CACP,CACT,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../src/components/Dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAiB,OAAO,EAAE,MAAM,OAAO,CAAA;AACrD,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,EAAE,KAAK,EAAgC,MAAM,SAAS,CAAA;AAE7D,OAAO,MAAM,MAAM,qBAAqB,CAAA;AAExC,MAAM,CAAC,MAAM,0BAA0B,GAAG,mCAAmC,CAAA;AAyB7E;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,MAAM,GAAoB,CAAC,EACtC,cAAc,EACd,YAAY,EACZ,WAAW,GAAG,0BAA0B,EACxC,cAAc,EACd,eAAe,EACf,cAAc,EACd,qBAAqB,EACrB,eAAe,EACf,GAAG,IAAI,EACR,EAAE,EAAE;IACH,MAAM,OAAO,GAAG,OAAO,CAAC,GAAG,EAAE;QAC3B,MAAM,KAAK,GACT,cAAc,IAAI,eAAe;YAC/B,CAAC,CAAC;gBACE;oBACE,SAAS,EAAE,CAAC,eAAe;oBAC3B,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS;oBAC7C,GAAG,CAAC,cAAc,IAAI,qBAAqB;wBACzC,CAAC,CAAC;4BACE,QAAQ,EAAE,cAAc;4BACxB,eAAe,EAAE,qBAAqB;yBACvC;wBACH,CAAC,CAAC;4BACE,QAAQ,EAAE,SAAS;4BACnB,eAAe,EAAE,SAAS;yBAC3B,CAAC;oBACN,OAAO,EAAE,eAAe;oBACxB,QAAQ,EAAE,cAAc;iBACzB;aACF;YACH,CAAC,CAAC,EAAE,CAAA;QAER,OAAO,KAAK,CAAA;IACd,CAAC,EAAE,CAAC,eAAe,EAAE,cAAc,EAAE,qBAAqB,EAAE,eAAe,EAAE,cAAc,CAAC,CAAC,CAAA;IAE7F,OAAO,CACL,oBAAC,KAAK,IACJ,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,EAC5C,eAAe,EAAE,MAAM,CAAC,YAAY,EACpC,aAAa,EAAE,MAAM,CAAC,UAAU,EAChC,gBAAgB,EAAE,MAAM,CAAC,kBAAkB,EAC3C,eAAe,EAAE,MAAM,CAAC,YAAY,EACpC,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,WAAW,EAClB,eAAe,EAAE,KAAK,KAClB,IAAI,IAEP,YAAY,CACP,CACT,CAAA;AACH,CAAC,CAAA"}

package/lib/components/{Dialog.module.scss → Dialog.module.css}

@@ -1,16 +1,14 @@
-@use '../../styles/constants' as c;
-
 .dialog {
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
 
-  // Note: Unset properties set by Modal
+  /* Note: Unset properties set by Modal */
   min-width: 0;
   max-width: none;
-  min-height: c.$dialogMinHeight;
+  min-height: var(--hive-dialog-min-height);
   max-height: none;
-  width: c.$dialogWidth;
+  width: var(--hive-dialog-width);
   padding-bottom: 0;
 
   .dialogBody {
@@ -30,31 +28,31 @@
 
     .dialogFooter {
       display: flex;
-      margin: (c.$grid * 5) (c.$grid * -5) 0 (c.$grid * -5);
+      margin: calc(var(--hive-grid) * 5) calc(var(--hive-grid) * -5) 0 calc(var(--hive-grid) * -5);
 
       & > button {
         flex: 1 1 auto;
         margin: 0 !important;
         max-width: none;
 
-        // Note: Unset border-radius for the buttons
+        /* Note: Unset border-radius for the buttons */
         border-radius: 0;
       }
 
-      // Note: In case there is only one button (Cancel)
+      /* Note: In case there is only one button (Cancel) */
       & > button:only-of-type {
-        border-bottom-left-radius: c.$borderRadius;
-        border-bottom-right-radius: c.$borderRadius;
+        border-bottom-left-radius: var(--hive-border-radius);
+        border-bottom-right-radius: var(--hive-border-radius);
       }
 
-      // Note: In case there are 2 buttons
+      /* Note: In case there are 2 buttons */
       & > button:not(:only-of-type) {
         &:nth-of-type(1) {
-          border-bottom-left-radius: c.$borderRadius;
+          border-bottom-left-radius: var(--hive-border-radius);
         }
 
         &:nth-of-type(2) {
-          border-bottom-right-radius: c.$borderRadius;
+          border-bottom-right-radius: var(--hive-border-radius);
         }
       }
     }

package/lib/components/EmptyState.js

@@ -4,7 +4,7 @@ import { ChevronRight } from 'react-feather';
 import { Button } from './Button';
 import { Link } from './Link';
 import { Icon } from './Icon';
-import styles from './EmptyState.module.scss';
+import styles from './EmptyState.module.css';
 /**
  * ### Purpose
  * Sometimes users performs an action, that yields an empty result. Such cases may be first use of a feature, view with no data, user cleared view or an error state.

package/lib/components/EmptyState.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmptyState.js","sourceRoot":"","sources":["../../src/components/EmptyState.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAA;AAC5C,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AAE5C,OAAO,EAAsC,MAAM,EAAE,MAAM,UAAU,CAAA;AACrE,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAC7B,OAAO,EAAE,IAAI,EAAa,MAAM,QAAQ,CAAA;AAGxC,OAAO,MAAM,MAAM,0BAA0B,CAAA;AA+C7C;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,UAAU,GAAwB,CAAC,EAC9C,WAAW,EAAE,QAAQ,EACrB,SAAS,GAAG,UAAU,EACtB,IAAI,GAAG,QAAQ,EACf,KAAK,EACL,WAAW,EACX,IAAI,EACJ,SAAS,EACT,SAAS,EACT,GAAG,gBAAgB,EACpB,EAAE,EAAE;IACH,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,aAAa,EAAE,YAAY,EAAE,SAAS,EAAE,GAAG,gBAAgB,CAAA;IAEvF,MAAM,QAAQ,GAAG,SAAS,KAAK,UAAU,IAAI,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAA;IAElF,OAAO,CACL,0CACa,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,uBAAuB,EAC9C,SAAS,EAAE,EAAE,CACX,MAAM,CAAC,SAAS,EAChB;YACE,CAAC,MAAM,CAAC,UAAU,CAAC,EAAE,SAAS,KAAK,YAAY;YAC/C,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,IAAI,KAAK,OAAO;SACjC,EACD,SAAS,CACV;QAED,oBAAC,IAAI,iBAAW,kBAAkB,EAAC,SAAS,EAAE,MAAM,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,IAAI,EAAE,QAAQ,GAAI;QAC/G,6BAAK,SAAS,EAAE,MAAM,CAAC,OAAO;YAC5B,0CAAe,mBAAmB,EAAC,SAAS,EAAE,MAAM,CAAC,KAAK,IACvD,KAAK,CACF;YACL,WAAW,IAAI,CACd,wCAAa,yBAAyB,EAAC,SAAS,EAAE,MAAM,CAAC,WAAW,IACjE,WAAW,CACV,CACL;YAEA,MAAM,CAAC,CAAC,CAAC,CACR,SAAS,KAAK,YAAY,IAAI,UAAU,KAAK,SAAS,CAAC,CAAC,CAAC,CACvD,oBAAC,IAAI,iBACO,kBAAkB,EAC5B,SAAS,EAAE,MAAM,CAAC,MAAM,EACxB,IAAI,EAAE,YAAY,EAClB,SAAS,EAAC,oBAAoB,EAC9B,IAAI,EAAE,UAAU,EAChB,MAAM,EAAE,YAAY,EACpB,GAAG,EAAE,SAAS,EACd,IAAI,EAAC,OAAO,IAEX,MAAM,CACF,CACR,CAAC,CAAC,CAAC,CACF,oBAAC,MAAM,iBAAW,oBAAoB,EAAC,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,EAAE,aAAa,IACpF,MAAM,CACA,CACV,CACF,CAAC,CAAC,CAAC,IAAI,CACJ,CACF,CACP,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"EmptyState.js","sourceRoot":"","sources":["../../src/components/EmptyState.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAA;AAC5C,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AAE5C,OAAO,EAAsC,MAAM,EAAE,MAAM,UAAU,CAAA;AACrE,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAC7B,OAAO,EAAE,IAAI,EAAa,MAAM,QAAQ,CAAA;AAGxC,OAAO,MAAM,MAAM,yBAAyB,CAAA;AA+C5C;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,UAAU,GAAwB,CAAC,EAC9C,WAAW,EAAE,QAAQ,EACrB,SAAS,GAAG,UAAU,EACtB,IAAI,GAAG,QAAQ,EACf,KAAK,EACL,WAAW,EACX,IAAI,EACJ,SAAS,EACT,SAAS,EACT,GAAG,gBAAgB,EACpB,EAAE,EAAE;IACH,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,aAAa,EAAE,YAAY,EAAE,SAAS,EAAE,GAAG,gBAAgB,CAAA;IAEvF,MAAM,QAAQ,GAAG,SAAS,KAAK,UAAU,IAAI,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAA;IAElF,OAAO,CACL,0CACa,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,uBAAuB,EAC9C,SAAS,EAAE,EAAE,CACX,MAAM,CAAC,SAAS,EAChB;YACE,CAAC,MAAM,CAAC,UAAU,CAAC,EAAE,SAAS,KAAK,YAAY;YAC/C,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,IAAI,KAAK,OAAO;SACjC,EACD,SAAS,CACV;QAED,oBAAC,IAAI,iBAAW,kBAAkB,EAAC,SAAS,EAAE,MAAM,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,IAAI,EAAE,QAAQ,GAAI;QAC/G,6BAAK,SAAS,EAAE,MAAM,CAAC,OAAO;YAC5B,0CAAe,mBAAmB,EAAC,SAAS,EAAE,MAAM,CAAC,KAAK,IACvD,KAAK,CACF;YACL,WAAW,IAAI,CACd,wCAAa,yBAAyB,EAAC,SAAS,EAAE,MAAM,CAAC,WAAW,IACjE,WAAW,CACV,CACL;YAEA,MAAM,CAAC,CAAC,CAAC,CACR,SAAS,KAAK,YAAY,IAAI,UAAU,KAAK,SAAS,CAAC,CAAC,CAAC,CACvD,oBAAC,IAAI,iBACO,kBAAkB,EAC5B,SAAS,EAAE,MAAM,CAAC,MAAM,EACxB,IAAI,EAAE,YAAY,EAClB,SAAS,EAAC,oBAAoB,EAC9B,IAAI,EAAE,UAAU,EAChB,MAAM,EAAE,YAAY,EACpB,GAAG,EAAE,SAAS,EACd,IAAI,EAAC,OAAO,IAEX,MAAM,CACF,CACR,CAAC,CAAC,CAAC,CACF,oBAAC,MAAM,iBAAW,oBAAoB,EAAC,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,EAAE,aAAa,IACpF,MAAM,CACA,CACV,CACF,CAAC,CAAC,CAAC,IAAI,CACJ,CACF,CACP,CAAA;AACH,CAAC,CAAA"}

package/lib/components/EmptyState.module.css

@@ -0,0 +1,96 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+
+  .content {
+    .title {
+      margin: calc(var(--hive-grid) * 4.5) 0 0 0;
+      font-family: var(--hive-font-family-text);
+      font-size: var(--hive-font-size-body-normal);
+      letter-spacing: var(--hive-letter-spacing-body-normal);
+      line-height: var(--hive-line-height-body-normal);
+    }
+
+    .description {
+      color: var(--hive-color-text-secondary);
+      margin: var(--hive-grid) 0 0 0;
+      font-family: var(--hive-font-family-text);
+      font-size: var(--hive-font-size-body-small);
+      letter-spacing: var(--hive-letter-spacing-body-small);
+      line-height: var(--hive-line-height-body-small);
+      font-weight: var(--hive-font-weight-text-regular);
+    }
+
+    .action {
+      flex: 1;
+      min-width: var(--hive-empty-state-button-min-width-normal);
+      margin-top: calc(var(--hive-grid) * 5);
+    }
+  }
+
+  &.large {
+    .content {
+      .title {
+        margin-top: calc(var(--hive-grid) * 5.5);
+      }
+
+      .description {
+        margin-top: calc(var(--hive-grid) * 2);
+        font-family: var(--hive-font-family-text);
+        font-size: var(--hive-font-size-body-normal);
+        letter-spacing: var(--hive-letter-spacing-body-normal);
+        line-height: var(--hive-line-height-body-normal);
+        font-weight: var(--hive-font-weight-text-regular);
+      }
+
+      .action {
+        min-width: var(--hive-empty-state-button-min-width-large);
+        margin-top: calc(var(--hive-grid) * 6);
+      }
+    }
+  }
+
+  &.horizontal {
+    flex: 1;
+    flex-direction: row;
+    text-align: start;
+
+    .icon {
+      flex: 0 0 auto;
+      align-self: flex-start;
+    }
+
+    .content {
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-start;
+      margin-left: calc(var(--hive-grid) * 2);
+
+      .title {
+        margin: 0;
+        font-family: var(--hive-font-family-text);
+        font-size: var(--hive-font-size-body-normal);
+        letter-spacing: var(--hive-letter-spacing-body-normal);
+        line-height: var(--hive-line-height-body-normal);
+      }
+
+      .description {
+        margin-top: var(--hive-grid);
+        font-family: var(--hive-font-family-text);
+        font-size: var(--hive-font-size-body-small);
+        letter-spacing: var(--hive-letter-spacing-body-small);
+        line-height: var(--hive-line-height-body-small);
+        font-weight: var(--hive-font-weight-text-regular);
+      }
+
+      .action {
+        align-self: flex-start;
+        min-width: auto;
+        margin: var(--hive-grid) 0 0 0;
+      }
+    }
+  }
+}

package/lib/components/Error.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import cn from 'classnames';
 import { TruncatedText } from './TruncatedText';
-import styles from './Error.module.scss';
+import styles from './Error.module.css';
 export const errorId = (inputId) => `${inputId}-error`;
 /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role */
 export const Error = ({ error, className, inputId, truncated, tooltipPlacement, 'data-test': dataTest = 'error' }) => (React.createElement("div", { role: "alert", id: errorId(inputId), "data-test": dataTest, className: cn(styles.container, error && styles.hasError, className) }, truncated ? React.createElement(TruncatedText, { text: error || '', tooltipPlacement: tooltipPlacement }) : error));

package/lib/components/Error.js.map

@@ -1 +1 @@
-{"version":3,"file":"Error.js","sourceRoot":"","sources":["../../src/components/Error.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,MAAM,YAAY,CAAA;AAG3B,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAG/C,OAAO,MAAM,MAAM,qBAAqB,CAAA;AAExC,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,OAAe,EAAU,EAAE,CAAC,GAAG,OAAO,QAAQ,CAAA;AAUtE,0GAA0G;AAC1G,MAAM,CAAC,MAAM,KAAK,GAAmB,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,WAAW,EAAE,QAAQ,GAAG,OAAO,EAAE,EAAE,EAAE,CAAC,CACpI,6BAAK,IAAI,EAAC,OAAO,EAAC,EAAE,EAAE,OAAO,CAAC,OAAO,CAAC,eAAa,QAAQ,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,KAAK,IAAI,MAAM,CAAC,QAAQ,EAAE,SAAS,CAAC,IAC9H,SAAS,CAAC,CAAC,CAAC,oBAAC,aAAa,IAAC,IAAI,EAAE,KAAK,IAAI,EAAE,EAAE,gBAAgB,EAAE,gBAAgB,GAAI,CAAC,CAAC,CAAC,KAAK,CACzF,CACP,CAAA"}
+{"version":3,"file":"Error.js","sourceRoot":"","sources":["../../src/components/Error.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,MAAM,YAAY,CAAA;AAG3B,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAG/C,OAAO,MAAM,MAAM,oBAAoB,CAAA;AAEvC,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,OAAe,EAAU,EAAE,CAAC,GAAG,OAAO,QAAQ,CAAA;AAUtE,0GAA0G;AAC1G,MAAM,CAAC,MAAM,KAAK,GAAmB,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,WAAW,EAAE,QAAQ,GAAG,OAAO,EAAE,EAAE,EAAE,CAAC,CACpI,6BAAK,IAAI,EAAC,OAAO,EAAC,EAAE,EAAE,OAAO,CAAC,OAAO,CAAC,eAAa,QAAQ,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,KAAK,IAAI,MAAM,CAAC,QAAQ,EAAE,SAAS,CAAC,IAC9H,SAAS,CAAC,CAAC,CAAC,oBAAC,aAAa,IAAC,IAAI,EAAE,KAAK,IAAI,EAAE,EAAE,gBAAgB,EAAE,gBAAgB,GAAI,CAAC,CAAC,CAAC,KAAK,CACzF,CACP,CAAA"}

package/lib/components/Error.module.css

@@ -0,0 +1,13 @@
+.container {
+  font-family: var(--hive-font-family-text);
+  font-size: var(--hive-font-size-body-small);
+  letter-spacing: var(--hive-letter-spacing-body-small);
+  line-height: var(--hive-line-height-body-small);
+  font-weight: var(--hive-font-weight-text-regular);
+  color: var(--hive-color-error);
+  display: none;
+
+  &.hasError {
+    display: block;
+  }
+}

package/lib/components/FieldHeader.d.ts

@@ -1,7 +1,6 @@
 import React, { CSSProperties } from 'react';
 import { HelpProps } from './Help';
 import { DataTestProp } from '../helpers/types';
-export type FieldHeaderSize = 'small' | 'medium' | 'large';
 export type FieldHeaderVariant = 'primary' | 'secondary';
 export type FieldHeaderLabelProps = {
     label?: string;
@@ -16,7 +15,6 @@ export type FieldHeaderNoLabelProps = {
     helperTextTooltipWordBreak: never;
 };
 export type FieldHeaderProps = {
-    size?: FieldHeaderSize;
     variant?: FieldHeaderVariant;
     id: string;
     showAriaLabel?: boolean;

package/lib/components/FieldHeader.js

@@ -2,14 +2,14 @@ import React from 'react';
 import cn from 'classnames';
 import { Label } from './Label';
 import { Help } from './Help';
-import styles from './FieldHeader.module.scss';
+import styles from './FieldHeader.module.css';
 export const FieldHeader = (props) => {
-    const { label, id, variant, helperText, size = 'medium', labelClassName, 'data-test': dataTest, showAriaLabel, helperTextTooltipWordBreak, } = props;
+    const { label, id, variant, helperText, labelClassName, 'data-test': dataTest, showAriaLabel, helperTextTooltipWordBreak } = props;
     if (showAriaLabel) {
         return null;
     }
     return label ? (React.createElement("div", { className: styles.root },
-        React.createElement(Label, { id: id, label: label, variant: variant, "data-test": dataTest ? `${dataTest}-label` : undefined, className: cn(styles.label, { [styles.small]: size === 'small' }, labelClassName) }),
+        React.createElement(Label, { id: id, label: label, variant: variant, "data-test": dataTest ? `${dataTest}-label` : undefined, className: cn(styles.label, styles.small, labelClassName) }),
         helperText && (React.createElement(Help, { parentId: id, helperText: helperText, className: styles.helperText, tooltipWordBreak: helperTextTooltipWordBreak, "data-test": dataTest ? `${dataTest}-helperText` : undefined })))) : null;
 };
 //# sourceMappingURL=FieldHeader.js.map

package/lib/components/FieldHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"FieldHeader.js","sourceRoot":"","sources":["../../src/components/FieldHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAA;AAC5C,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAC/B,OAAO,EAAE,IAAI,EAAa,MAAM,QAAQ,CAAA;AAGxC,OAAO,MAAM,MAAM,2BAA2B,CAAA;AAwB9C,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,KAAuB,EAAE,EAAE;IACrD,MAAM,EACJ,KAAK,EACL,EAAE,EACF,OAAO,EACP,UAAU,EACV,IAAI,GAAG,QAAQ,EACf,cAAc,EACd,WAAW,EAAE,QAAQ,EACrB,aAAa,EACb,0BAA0B,GAC3B,GAAG,KAAK,CAAA;IAET,IAAI,aAAa,EAAE,CAAC;QAClB,OAAO,IAAI,CAAA;IACb,CAAC;IAED,OAAO,KAAK,CAAC,CAAC,CAAC,CACb,6BAAK,SAAS,EAAE,MAAM,CAAC,IAAI;QAEzB,oBAAC,KAAK,IACJ,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,eACL,QAAQ,CAAC,CAAC,CAAC,GAAG,QAAQ,QAAQ,CAAC,CAAC,CAAC,SAAS,EACrD,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,IAAI,KAAK,OAAO,EAAE,EAAE,cAAc,CAAC,GACjF;QACD,UAAU,IAAI,CACb,oBAAC,IAAI,IACH,QAAQ,EAAE,EAAE,EACZ,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,MAAM,CAAC,UAAU,EAC5B,gBAAgB,EAAE,0BAA0B,eACjC,QAAQ,CAAC,CAAC,CAAC,GAAG,QAAQ,aAAa,CAAC,CAAC,CAAC,SAAS,GAC1D,CACH,CACG,CACP,CAAC,CAAC,CAAC,IAAI,CAAA;AACV,CAAC,CAAA"}
+{"version":3,"file":"FieldHeader.js","sourceRoot":"","sources":["../../src/components/FieldHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAA;AAC5C,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAC/B,OAAO,EAAE,IAAI,EAAa,MAAM,QAAQ,CAAA;AAGxC,OAAO,MAAM,MAAM,0BAA0B,CAAA;AAsB7C,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,KAAuB,EAAE,EAAE;IACrD,MAAM,EAAE,KAAK,EAAE,EAAE,EAAE,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,WAAW,EAAE,QAAQ,EAAE,aAAa,EAAE,0BAA0B,EAAE,GAAG,KAAK,CAAA;IAElI,IAAI,aAAa,EAAE,CAAC;QAClB,OAAO,IAAI,CAAA;IACb,CAAC;IAED,OAAO,KAAK,CAAC,CAAC,CAAC,CACb,6BAAK,SAAS,EAAE,MAAM,CAAC,IAAI;QAEzB,oBAAC,KAAK,IACJ,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,eACL,QAAQ,CAAC,CAAC,CAAC,GAAG,QAAQ,QAAQ,CAAC,CAAC,CAAC,SAAS,EACrD,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,cAAc,CAAC,GACzD;QACD,UAAU,IAAI,CACb,oBAAC,IAAI,IACH,QAAQ,EAAE,EAAE,EACZ,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,MAAM,CAAC,UAAU,EAC5B,gBAAgB,EAAE,0BAA0B,eACjC,QAAQ,CAAC,CAAC,CAAC,GAAG,QAAQ,aAAa,CAAC,CAAC,CAAC,SAAS,GAC1D,CACH,CACG,CACP,CAAC,CAAC,CAAC,IAAI,CAAA;AACV,CAAC,CAAA"}

package/lib/components/FieldHeader.module.css

@@ -0,0 +1,22 @@
+.root {
+  display: flex;
+  margin-bottom: var(--hive-grid);
+}
+
+.label {
+  flex-shrink: 0;
+  white-space: pre-wrap;
+
+  &.small {
+    font-family: var(--hive-font-family-text);
+    font-size: var(--hive-font-size-body-small);
+    letter-spacing: var(--hive-letter-spacing-body-small);
+    line-height: var(--hive-line-height-body-small);
+    font-weight: var(--hive-font-weight-text-regular);
+  }
+}
+
+.helperText {
+  flex-shrink: 0;
+  margin-top: calc(var(--hive-grid) * 0.5);
+}

package/lib/components/Help.js

@@ -3,13 +3,13 @@ import { HelpCircle } from 'react-feather';
 import cn from 'classnames';
 import { Icon } from './Icon';
 import { Tooltip } from './Tooltip';
-import styleConsts from '../../styles/constants/export.module.scss';
-import styles from './Help.module.scss';
+import { styleConstants } from '../utils/styleConstants';
+import styles from './Help.module.css';
 export const helpTooltipId = (inputId) => `${inputId}-help`;
 export const Help = ({ helperText, placement = 'top', parentId, className, tooltipWordBreak, size = 'small', 'data-test': dataTest = 'help', }) => {
     const tooltipId = helpTooltipId(parentId);
     return (React.createElement(Tooltip, { side: placement, content: helperText, id: tooltipId, wordBreak: tooltipWordBreak },
         React.createElement("div", { "data-test": dataTest, className: cn(styles.container, className) },
-            React.createElement(Icon, { ariaLabel: "Help", "aria-describedby": tooltipId, color: styleConsts.colorPrimary, icon: HelpCircle, className: styles.icon, size: size }))));
+            React.createElement(Icon, { ariaLabel: "Help", "aria-describedby": tooltipId, color: styleConstants.colorPrimary, icon: HelpCircle, className: styles.icon, size: size }))));
 };
 //# sourceMappingURL=Help.js.map

package/lib/components/Help.js.map

@@ -1 +1 @@
-{"version":3,"file":"Help.js","sourceRoot":"","sources":["../../src/components/Help.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0C,MAAM,OAAO,CAAA;AAC9D,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,EAAE,IAAI,EAAY,MAAM,QAAQ,CAAA;AACvC,OAAO,EAAE,OAAO,EAAe,MAAM,WAAW,CAAA;AAGhD,OAAO,WAAW,MAAM,2CAA2C,CAAA;AACnE,OAAO,MAAM,MAAM,oBAAoB,CAAA;AAEvC,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,OAAe,EAAU,EAAE,CAAC,GAAG,OAAO,OAAO,CAAA;AAW3E,MAAM,CAAC,MAAM,IAAI,GAAkB,CAAC,EAClC,UAAU,EACV,SAAS,GAAG,KAAK,EACjB,QAAQ,EACR,SAAS,EACT,gBAAgB,EAChB,IAAI,GAAG,OAAO,EACd,WAAW,EAAE,QAAQ,GAAG,MAAM,GAC/B,EAAE,EAAE;IACH,MAAM,SAAS,GAAG,aAAa,CAAC,QAAQ,CAAC,CAAA;IAEzC,OAAO,CACL,oBAAC,OAAO,IAAC,IAAI,EAAE,SAAS,EAAE,OAAO,EAAE,UAAU,EAAE,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,gBAAgB;QACvF,0CAAgB,QAAQ,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,SAAS,CAAC;YAClE,oBAAC,IAAI,IACH,SAAS,EAAC,MAAM,sBACE,SAAS,EAC3B,KAAK,EAAE,WAAW,CAAC,YAAY,EAC/B,IAAI,EAAE,UAAU,EAChB,SAAS,EAAE,MAAM,CAAC,IAAI,EACtB,IAAI,EAAE,IAAI,GACV,CACE,CACE,CACX,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"Help.js","sourceRoot":"","sources":["../../src/components/Help.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0C,MAAM,OAAO,CAAA;AAC9D,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,EAAE,IAAI,EAAY,MAAM,QAAQ,CAAA;AACvC,OAAO,EAAE,OAAO,EAAe,MAAM,WAAW,CAAA;AAGhD,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAA;AACxD,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,OAAe,EAAU,EAAE,CAAC,GAAG,OAAO,OAAO,CAAA;AAW3E,MAAM,CAAC,MAAM,IAAI,GAAkB,CAAC,EAClC,UAAU,EACV,SAAS,GAAG,KAAK,EACjB,QAAQ,EACR,SAAS,EACT,gBAAgB,EAChB,IAAI,GAAG,OAAO,EACd,WAAW,EAAE,QAAQ,GAAG,MAAM,GAC/B,EAAE,EAAE;IACH,MAAM,SAAS,GAAG,aAAa,CAAC,QAAQ,CAAC,CAAA;IAEzC,OAAO,CACL,oBAAC,OAAO,IAAC,IAAI,EAAE,SAAS,EAAE,OAAO,EAAE,UAAU,EAAE,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,gBAAgB;QACvF,0CAAgB,QAAQ,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,SAAS,CAAC;YAClE,oBAAC,IAAI,IACH,SAAS,EAAC,MAAM,sBACE,SAAS,EAC3B,KAAK,EAAE,cAAc,CAAC,YAAY,EAClC,IAAI,EAAE,UAAU,EAChB,SAAS,EAAE,MAAM,CAAC,IAAI,EACtB,IAAI,EAAE,IAAI,GACV,CACE,CACE,CACX,CAAA;AACH,CAAC,CAAA"}

package/lib/components/Help.module.css

@@ -0,0 +1,7 @@
+.container {
+  display: inline-flex;
+  vertical-align: middle;
+  line-height: 1;
+  padding-left: var(--hive-grid);
+  padding-right: var(--hive-grid);
+}

package/lib/components/Icon.js

@@ -1,9 +1,9 @@
 import React, { forwardRef } from 'react';
 import cn from 'classnames';
-import styleConsts from '../../styles/constants/export.module.scss';
-import styles from './Icon.module.scss';
+import { styleConstants } from '../utils/styleConstants';
+import styles from './Icon.module.css';
 export const Icon = forwardRef(({ color, icon: IconElement, ariaLabel, ariaLabelledBy, ariaHidden, className, containerClassName, size = 'medium', bold = false, role = 'img', 'data-test': dataTest, }, ref) => {
-    const iconStroke = bold ? styleConsts.iconStrokeWidthBold : styleConsts.iconStrokeWidth;
+    const iconStroke = bold ? styleConstants.iconStrokeWidthBold : styleConstants.iconStrokeWidth;
     const props = {
         'aria-label': ariaLabel || 'icon',
         'aria-labelledby': ariaLabelledBy,

package/lib/components/Icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.js","sourceRoot":"","sources":["../../src/components/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAM,UAAU,EAA2B,MAAM,OAAO,CAAA;AACtE,OAAO,EAAE,MAAM,YAAY,CAAA;AAI3B,OAAO,WAAW,MAAM,2CAA2C,CAAA;AACnE,OAAO,MAAM,MAAM,oBAAoB,CAAA;AAwCvC,MAAM,CAAC,MAAM,IAAI,GAAG,UAAU,CAC5B,CACE,EACE,KAAK,EACL,IAAI,EAAE,WAAW,EACjB,SAAS,EACT,cAAc,EACd,UAAU,EACV,SAAS,EACT,kBAAkB,EAClB,IAAI,GAAG,QAAQ,EACf,IAAI,GAAG,KAAK,EACZ,IAAI,GAAG,KAAK,EACZ,WAAW,EAAE,QAAQ,GACtB,EACD,GAAG,EACH,EAAE;IACF,MAAM,UAAU,GAAG,IAAI,CAAC,CAAC,CAAC,WAAW,CAAC,mBAAmB,CAAC,CAAC,CAAC,WAAW,CAAC,eAAe,CAAA;IAEvF,MAAM,KAAK,GAAyB;QAClC,YAAY,EAAE,SAAS,IAAI,MAAM;QACjC,iBAAiB,EAAE,cAAc;QACjC,aAAa,EAAE,UAAU;QACzB,KAAK;QACL,KAAK,EAAE,KAAK;QACZ,MAAM,EAAE,KAAK;QACb,SAAS,EAAE,EAAE,CACX;YACE,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,IAAI,KAAK,OAAO;YAChC,CAAC,MAAM,CAAC,WAAW,CAAC,EAAE,IAAI,KAAK,aAAa;YAC5C,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,IAAI,KAAK,QAAQ;YAClC,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,IAAI,KAAK,OAAO;YAChC,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,IAAI,KAAK,QAAQ;SACnC,EACD,SAAS,CACV;QACD,WAAW,EAAE,UAAU;KACxB,CAAA;IAED,OAAO,CACL,6BAAK,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,aAAa,EAAE,kBAAkB,CAAC,eAAa,QAAQ,EAAE,GAAG,EAAE,GAAG;QACzF,oBAAC,WAAW,IAAC,IAAI,EAAE,IAAI,KAAM,KAAK,GAAI,CAClC,CACP,CAAA;AACH,CAAC,CACF,CAAA;AACD,IAAI,CAAC,WAAW,GAAG,MAAM,CAAA"}
+{"version":3,"file":"Icon.js","sourceRoot":"","sources":["../../src/components/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAM,UAAU,EAA2B,MAAM,OAAO,CAAA;AACtE,OAAO,EAAE,MAAM,YAAY,CAAA;AAI3B,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAA;AACxD,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAwCtC,MAAM,CAAC,MAAM,IAAI,GAAG,UAAU,CAC5B,CACE,EACE,KAAK,EACL,IAAI,EAAE,WAAW,EACjB,SAAS,EACT,cAAc,EACd,UAAU,EACV,SAAS,EACT,kBAAkB,EAClB,IAAI,GAAG,QAAQ,EACf,IAAI,GAAG,KAAK,EACZ,IAAI,GAAG,KAAK,EACZ,WAAW,EAAE,QAAQ,GACtB,EACD,GAAG,EACH,EAAE;IACF,MAAM,UAAU,GAAG,IAAI,CAAC,CAAC,CAAC,cAAc,CAAC,mBAAmB,CAAC,CAAC,CAAC,cAAc,CAAC,eAAe,CAAA;IAE7F,MAAM,KAAK,GAAyB;QAClC,YAAY,EAAE,SAAS,IAAI,MAAM;QACjC,iBAAiB,EAAE,cAAc;QACjC,aAAa,EAAE,UAAU;QACzB,KAAK;QACL,KAAK,EAAE,KAAK;QACZ,MAAM,EAAE,KAAK;QACb,SAAS,EAAE,EAAE,CACX;YACE,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,IAAI,KAAK,OAAO;YAChC,CAAC,MAAM,CAAC,WAAW,CAAC,EAAE,IAAI,KAAK,aAAa;YAC5C,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,IAAI,KAAK,QAAQ;YAClC,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,IAAI,KAAK,OAAO;YAChC,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,IAAI,KAAK,QAAQ;SACnC,EACD,SAAS,CACV;QACD,WAAW,EAAE,UAAU;KACxB,CAAA;IAED,OAAO,CACL,6BAAK,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,aAAa,EAAE,kBAAkB,CAAC,eAAa,QAAQ,EAAE,GAAG,EAAE,GAAG;QACzF,oBAAC,WAAW,IAAC,IAAI,EAAE,IAAI,KAAM,KAAK,GAAI,CAClC,CACP,CAAA;AACH,CAAC,CACF,CAAA;AACD,IAAI,CAAC,WAAW,GAAG,MAAM,CAAA"}

package/lib/components/Icon.module.css

@@ -0,0 +1,31 @@
+.iconContainer {
+  display: inline-block;
+
+  /* Font-size reset in order break inheritance. */
+  font-size: 0;
+
+  .small {
+    width: var(--hive-icon-size-small);
+    height: var(--hive-icon-size-small);
+  }
+
+  .smallMedium {
+    width: var(--hive-icon-size-small-medium);
+    height: var(--hive-icon-size-small-medium);
+  }
+
+  .medium {
+    width: var(--hive-icon-size-medium);
+    height: var(--hive-icon-size-medium);
+  }
+
+  .large {
+    width: var(--hive-icon-size-large);
+    height: var(--hive-icon-size-large);
+  }
+
+  .xlarge {
+    width: var(--hive-icon-size-xlarge);
+    height: var(--hive-icon-size-xlarge);
+  }
+}