@hazelcast/ui 1.3.3-next.3 → 1.3.3-next.30

package/lib/Tooltip.module.scss

@@ -9,65 +9,31 @@
 $tooltipArrowSize1-3: math.div(c.$tooltipArrowSize, 3);
 $tooltipArrowSize2-3: math.div(c.$tooltipArrowSize, 3) * 2;
 
-.overlay {
-  @include c.typographyBodySmall;
-
-  position: relative;
-  max-width: c.$tooltipMaxWidth;
-  padding: c.$grid * 3;
-  background: c.$colorNeutralLighter;
-  border: c.$borderWidth solid c.$colorNeutralLight;
-  border-radius: c.$borderRadius;
-  color: c.$colorText;
-  word-break: break-all;
-
-  &.hidden {
-    visibility: hidden;
-
-    // important is needed to override inline style
-    top: -99999px !important;
-    left: -99999px !important;
-  }
-
-  > .arrow {
-    position: absolute;
-    z-index: c.$zIndex100;
-    display: block;
-    width: c.$tooltipArrowSize;
-    height: c.$tooltipArrowSize;
-
-    &::before,
-    &::after {
-      content: '';
-      position: absolute;
-    }
-  }
-
-  &[data-popper-placement^='top'] {
+@mixin arrow($position, $color, $borderColor) {
+  @if $position == bottom {
     > .arrow {
-      bottom: 0;
+      top: 0;
 
       &::before,
       &::after {
         border-left: c.$tooltipArrowSize solid transparent;
         border-right: c.$tooltipArrowSize solid transparent;
-        top: 100%;
+        top: 0;
         left: 50%;
         margin-left: -(c.$tooltipArrowSize);
       }
 
       &::before {
-        border-top: c.$tooltipArrowSize solid c.$colorNeutralLight;
+        border-bottom: c.$tooltipArrowSize solid $color;
+        margin-top: -(c.$tooltipArrowSize);
       }
 
       &::after {
-        border-top: c.$tooltipArrowSize solid c.$colorNeutralLighter;
-        transform: translateY(-($tooltipArrowSize1-3));
+        border-bottom: c.$tooltipArrowSize solid $borderColor;
+        transform: translateY(-($tooltipArrowSize2-3));
       }
     }
-  }
-
-  &[data-popper-placement^='right'] {
+  } @else if $position == right {
     > .arrow {
       left: 0;
 
@@ -81,63 +47,129 @@ $tooltipArrowSize2-3: math.div(c.$tooltipArrowSize, 3) * 2;
       }
 
       &::before {
-        border-right: c.$tooltipArrowSize solid c.$colorNeutralLight;
+        border-right: c.$tooltipArrowSize solid $color;
         margin-left: -(c.$tooltipArrowSize);
       }
 
       &::after {
-        border-right: c.$tooltipArrowSize solid c.$colorNeutralLighter;
+        border-right: c.$tooltipArrowSize solid $borderColor;
         transform: translateX(-($tooltipArrowSize2-3));
       }
     }
-  }
-
-  &[data-popper-placement^='bottom'] {
+  } @else if $position == left {
     > .arrow {
-      top: 0;
+      right: 0;
 
       &::before,
       &::after {
-        border-left: c.$tooltipArrowSize solid transparent;
-        border-right: c.$tooltipArrowSize solid transparent;
-        top: 0;
-        left: 50%;
-        margin-left: -(c.$tooltipArrowSize);
+        border-top: c.$tooltipArrowSize solid transparent;
+        border-bottom: c.$tooltipArrowSize solid transparent;
+        top: 50%;
+        left: 100%;
+        margin-top: -(c.$tooltipArrowSize);
       }
 
       &::before {
-        border-bottom: c.$tooltipArrowSize solid c.$colorNeutralLight;
-        margin-top: -(c.$tooltipArrowSize);
+        border-left: c.$tooltipArrowSize solid $color;
       }
 
       &::after {
-        border-bottom: c.$tooltipArrowSize solid c.$colorNeutralLighter;
-        transform: translateY(-($tooltipArrowSize2-3));
+        border-left: c.$tooltipArrowSize solid $borderColor;
+        transform: translateX(-($tooltipArrowSize1-3));
       }
     }
-  }
-
-  &[data-popper-placement^='left'] {
+  } @else {
     > .arrow {
-      right: 0;
+      bottom: 0;
 
       &::before,
       &::after {
-        border-top: c.$tooltipArrowSize solid transparent;
-        border-bottom: c.$tooltipArrowSize solid transparent;
-        top: 50%;
-        left: 100%;
-        margin-top: -(c.$tooltipArrowSize);
+        border-left: c.$tooltipArrowSize solid transparent;
+        border-right: c.$tooltipArrowSize solid transparent;
+        top: 100%;
+        left: 50%;
+        margin-left: -(c.$tooltipArrowSize);
       }
 
       &::before {
-        border-left: c.$tooltipArrowSize solid c.$colorNeutralLight;
+        border-top: c.$tooltipArrowSize solid $color;
       }
 
       &::after {
-        border-left: c.$tooltipArrowSize solid c.$colorNeutralLighter;
-        transform: translateX(-($tooltipArrowSize1-3));
+        border-top: c.$tooltipArrowSize solid $borderColor;
+        transform: translateY(-($tooltipArrowSize1-3));
       }
     }
   }
 }
+
+@mixin arrowPlacements($color: c.$colorNeutralLight, $borderColor: c.$colorNeutralLighter) {
+  &[data-popper-placement^='top'] {
+    @include arrow(top, $color, $borderColor);
+  }
+
+  &[data-popper-placement^='right'] {
+    @include arrow(right, $color, $borderColor);
+  }
+
+  &[data-popper-placement^='bottom'] {
+    @include arrow(bottom, $color, $borderColor);
+  }
+
+  &[data-popper-placement^='left'] {
+    @include arrow(left, $color, $borderColor);
+  }
+}
+
+.overlay {
+  @include c.typographyBodySmall;
+
+  position: relative;
+  max-width: c.$tooltipMaxWidth;
+  padding: c.$grid * 3;
+  background: c.$colorNeutralLighter;
+  border: c.$borderWidth solid c.$colorNeutralLight;
+  border-radius: c.$borderRadius;
+  color: c.$colorText;
+  word-break: break-all;
+
+  &.hidden {
+    visibility: hidden;
+
+    // important is needed to override inline style
+    top: -99999px !important;
+    left: -99999px !important;
+  }
+
+  &.secondary {
+    border: none;
+    color: c.$colorNeutralWhite;
+    background-color: c.$colorTextSubdued;
+
+    @include arrowPlacements(c.$colorTextSubdued, transparent);
+  }
+
+  &.dark {
+    border: none;
+    color: c.$colorBrandText;
+    background-color: c.$colorBrandAccent;
+
+    @include arrowPlacements(c.$colorBrandAccent, transparent);
+  }
+
+  > .arrow {
+    position: absolute;
+    z-index: c.$zIndex100;
+    display: block;
+    width: c.$tooltipArrowSize;
+    height: c.$tooltipArrowSize;
+
+    &::before,
+    &::after {
+      content: '';
+      position: absolute;
+    }
+  }
+
+  @include arrowPlacements;
+}

package/lib/TruncatedText.d.ts

@@ -4,7 +4,9 @@ interface TruncatedTextProps {
     text: ReactText | ((...arg: unknown[]) => string) | ReactElement;
     forceUpdateToken?: ReactText | boolean;
     className?: string;
+    multiline?: boolean;
     tooltipVisible?: boolean;
+    tooltipClassName?: string;
     hoverAbleTooltip?: boolean;
     tooltipPlacement?: TooltipProps['placement'];
 }

package/lib/TruncatedText.js

@@ -5,7 +5,7 @@ import useIsomorphicLayoutEffect from 'react-use/lib/useIsomorphicLayoutEffect';
 import { useUID } from 'react-uid';
 import { Tooltip } from './Tooltip';
 import styles from './TruncatedText.module.scss';
-export const TruncatedText = ({ text, forceUpdateToken, className, tooltipVisible, tooltipPlacement = 'top', hoverAbleTooltip, }) => {
+export const TruncatedText = ({ text, forceUpdateToken, className, tooltipVisible, tooltipPlacement = 'top', hoverAbleTooltip, multiline, tooltipClassName, }) => {
     const textRef = useRef(null);
     const [tooltip, setTooltip] = useState();
     const idTooltip = useUID();
@@ -15,9 +15,9 @@ export const TruncatedText = ({ text, forceUpdateToken, className, tooltipVisibl
             return;
         }
         // https://codepen.io/triple-j/pen/wadKQB
-        setTooltip(span.offsetWidth < span.scrollWidth ? text : undefined);
+        setTooltip(span.offsetWidth < span.scrollWidth || span.offsetHeight < span.scrollHeight ? text : undefined);
     }, [text, forceUpdateToken]);
-    return (React.createElement(Tooltip, { id: idTooltip, content: tooltip, visible: tooltipVisible, placement: tooltipPlacement, updateToken: forceUpdateToken, hoverAbleTooltip: hoverAbleTooltip }, (ref) => (React.createElement("div", { ref: mergeRefs([textRef, ref]), className: cn(styles.truncatedText, className) },
+    return (React.createElement(Tooltip, { id: idTooltip, content: tooltip, visible: tooltipVisible, className: tooltipClassName, placement: tooltipPlacement, updateToken: forceUpdateToken, hoverAbleTooltip: hoverAbleTooltip }, (ref) => (React.createElement("div", { ref: mergeRefs([textRef, ref]), className: cn(styles.truncatedText, { [styles.multiline]: multiline }, className) },
         React.createElement("span", { "aria-labelledby": tooltip ? idTooltip : undefined }, text)))));
 };
 //# sourceMappingURL=TruncatedText.js.map

package/lib/TruncatedText.js.map

@@ -1 +1 @@
-{"version":3,"file":"TruncatedText.js","sourceRoot":"","sources":["../src/TruncatedText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAM,MAAM,EAAE,QAAQ,EAAuC,MAAM,OAAO,CAAA;AACxF,OAAO,SAAS,MAAM,kBAAkB,CAAA;AACxC,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,yBAAyB,MAAM,yCAAyC,CAAA;AAC/E,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAElC,OAAO,EAAE,OAAO,EAAgB,MAAM,WAAW,CAAA;AAEjD,OAAO,MAAM,MAAM,6BAA6B,CAAA;AAYhD,MAAM,CAAC,MAAM,aAAa,GAA2B,CAAC,EACpD,IAAI,EACJ,gBAAgB,EAChB,SAAS,EACT,cAAc,EACd,gBAAgB,GAAG,KAAK,EACxB,gBAAgB,GACjB,EAAE,EAAE;IACH,MAAM,OAAO,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IAC5C,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,EAA0B,CAAA;IAChE,MAAM,SAAS,GAAG,MAAM,EAAE,CAAA;IAE1B,yBAAyB,CAAC,GAAG,EAAE;QAC7B,MAAM,IAAI,GAAG,OAAO,CAAC,OAAO,CAAA;QAE5B,IAAI,IAAI,KAAK,IAAI,EAAE;YACjB,OAAM;SACP;QAED,yCAAyC;QACzC,UAAU,CAAC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAA;IACpE,CAAC,EAAE,CAAC,IAAI,EAAE,gBAAgB,CAAC,CAAC,CAAA;IAE5B,OAAO,CACL,oBAAC,OAAO,IACN,EAAE,EAAE,SAAS,EACb,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,cAAc,EACvB,SAAS,EAAE,gBAAgB,EAC3B,WAAW,EAAE,gBAAgB,EAC7B,gBAAgB,EAAE,gBAAgB,IAEjC,CAAC,GAAG,EAAE,EAAE,CAAC,CACR,6BAAK,GAAG,EAAE,SAAS,CAAC,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,aAAa,EAAE,SAAS,CAAC;QACjF,iDAAuB,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,IAAG,IAAI,CAAQ,CACjE,CACP,CACO,CACX,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"TruncatedText.js","sourceRoot":"","sources":["../src/TruncatedText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAM,MAAM,EAAE,QAAQ,EAAuC,MAAM,OAAO,CAAA;AACxF,OAAO,SAAS,MAAM,kBAAkB,CAAA;AACxC,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,yBAAyB,MAAM,yCAAyC,CAAA;AAC/E,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAElC,OAAO,EAAE,OAAO,EAAgB,MAAM,WAAW,CAAA;AAEjD,OAAO,MAAM,MAAM,6BAA6B,CAAA;AAchD,MAAM,CAAC,MAAM,aAAa,GAA2B,CAAC,EACpD,IAAI,EACJ,gBAAgB,EAChB,SAAS,EACT,cAAc,EACd,gBAAgB,GAAG,KAAK,EACxB,gBAAgB,EAChB,SAAS,EACT,gBAAgB,GACjB,EAAE,EAAE;IACH,MAAM,OAAO,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IAC5C,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,EAA0B,CAAA;IAChE,MAAM,SAAS,GAAG,MAAM,EAAE,CAAA;IAE1B,yBAAyB,CAAC,GAAG,EAAE;QAC7B,MAAM,IAAI,GAAG,OAAO,CAAC,OAAO,CAAA;QAE5B,IAAI,IAAI,KAAK,IAAI,EAAE;YACjB,OAAM;SACP;QAED,yCAAyC;QACzC,UAAU,CAAC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAA;IAC7G,CAAC,EAAE,CAAC,IAAI,EAAE,gBAAgB,CAAC,CAAC,CAAA;IAE5B,OAAO,CACL,oBAAC,OAAO,IACN,EAAE,EAAE,SAAS,EACb,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,cAAc,EACvB,SAAS,EAAE,gBAAgB,EAC3B,SAAS,EAAE,gBAAgB,EAC3B,WAAW,EAAE,gBAAgB,EAC7B,gBAAgB,EAAE,gBAAgB,IAEjC,CAAC,GAAG,EAAE,EAAE,CAAC,CACR,6BAAK,GAAG,EAAE,SAAS,CAAC,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,aAAa,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE,SAAS,EAAE,EAAE,SAAS,CAAC;QACpH,iDAAuB,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,IAAG,IAAI,CAAQ,CACjE,CACP,CACO,CACX,CAAA;AACH,CAAC,CAAA"}

package/lib/TruncatedText.module.scss

@@ -3,3 +3,7 @@
 .truncatedText {
   @include h.overflowEllipsis;
 }
+
+.multiline {
+  @include h.multilineOverflowEllipsis;
+}

package/lib/hooks/useOnClickOutside.d.ts

@@ -1,5 +1,5 @@
 type RefElement = HTMLElement | null | undefined;
-export declare const containsElement: (target: RefElement, element: Node) => boolean | undefined;
+export declare const containsElement: (target: RefElement, element: EventTarget | HTMLElement | null | undefined) => boolean | undefined;
 export declare const useOnClickOutside: (active: boolean, opts: {
     target: RefElement;
     handler: (event: Event) => void;

package/lib/hooks/useOnClickOutside.js

@@ -1,6 +1,12 @@
 import { useCallback, useEffect } from 'react';
 import { useRefValue } from './useRefValue';
-export const containsElement = (target, element) => target === null || target === void 0 ? void 0 : target.contains(element);
+export const containsElement = (target, element) => {
+    if (isNode(element)) {
+        return target === null || target === void 0 ? void 0 : target.contains(element);
+    }
+    return false;
+};
+const isNode = (element) => element != null && 'nodeType' in element;
 export const useOnClickOutside = (active, opts) => {
     const { target, handler, excludeElement } = opts;
     const getOutsideClickHandler = useRefValue(handler);

package/lib/hooks/useOnClickOutside.js.map

@@ -1 +1 @@
-{"version":3,"file":"useOnClickOutside.js","sourceRoot":"","sources":["../../src/hooks/useOnClickOutside.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAC9C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAI3C,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,MAAkB,EAAE,OAAa,EAAE,EAAE,CAAC,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,QAAQ,CAAC,OAAO,CAAC,CAAA;AAE/F,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAC/B,MAAe,EACf,IAA0F,EAC1F,EAAE;IACF,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,cAAc,EAAE,GAAG,IAAI,CAAA;IAChD,MAAM,sBAAsB,GAAG,WAAW,CAAC,OAAO,CAAC,CAAA;IAEnD,MAAM,QAAQ,GAAG,WAAW,CAC1B,CAAC,KAAY,EAAE,EAAE;QACf,MAAM,OAAO,GAAG,KAAK,CAAC,MAAc,CAAA;QAEpC,IAAI,CAAC,eAAe,CAAC,MAAM,EAAE,OAAO,CAAC,IAAI,CAAC,eAAe,CAAC,cAAc,EAAE,OAAO,CAAC,EAAE;YAClF,sBAAsB,EAAE,CAAC,KAAK,CAAC,CAAA;SAChC;IACH,CAAC,EACD,CAAC,MAAM,EAAE,cAAc,EAAE,sBAAsB,CAAC,CACjD,CAAA;IAED,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,MAAM,EAAE;YACV,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAA;YAChD,QAAQ,CAAC,gBAAgB,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAA;SAClD;aAAM;YACL,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAA;YACnD,QAAQ,CAAC,mBAAmB,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAA;SACrD;QAED,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAA;YACnD,QAAQ,CAAC,mBAAmB,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAA;QACtD,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC,CAAA;AACxB,CAAC,CAAA"}
+{"version":3,"file":"useOnClickOutside.js","sourceRoot":"","sources":["../../src/hooks/useOnClickOutside.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAE9C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAI3C,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,MAAkB,EAAE,OAAqD,EAAE,EAAE;IAC3G,IAAI,MAAM,CAAC,OAAO,CAAC,EAAE;QACnB,OAAO,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,QAAQ,CAAC,OAAO,CAAC,CAAA;KACjC;IAED,OAAO,KAAK,CAAA;AACd,CAAC,CAAA;AAED,MAAM,MAAM,GAAG,CAAC,OAAuC,EAAmB,EAAE,CAAC,OAAO,IAAI,IAAI,IAAI,UAAU,IAAI,OAAO,CAAA;AAErH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAC/B,MAAe,EACf,IAA0F,EAC1F,EAAE;IACF,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,cAAc,EAAE,GAAG,IAAI,CAAA;IAChD,MAAM,sBAAsB,GAAG,WAAW,CAAC,OAAO,CAAC,CAAA;IAEnD,MAAM,QAAQ,GAAG,WAAW,CAC1B,CAAC,KAAY,EAAE,EAAE;QACf,MAAM,OAAO,GAAG,KAAK,CAAC,MAAM,CAAA;QAE5B,IAAI,CAAC,eAAe,CAAC,MAAM,EAAE,OAAO,CAAC,IAAI,CAAC,eAAe,CAAC,cAAc,EAAE,OAAO,CAAC,EAAE;YAClF,sBAAsB,EAAE,CAAC,KAAK,CAAC,CAAA;SAChC;IACH,CAAC,EACD,CAAC,MAAM,EAAE,cAAc,EAAE,sBAAsB,CAAC,CACjD,CAAA;IAED,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,MAAM,EAAE;YACV,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAA;YAChD,QAAQ,CAAC,gBAAgB,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAA;SAClD;aAAM;YACL,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAA;YACnD,QAAQ,CAAC,mBAAmB,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAA;SACrD;QAED,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAA;YACnD,QAAQ,CAAC,mBAAmB,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAA;QACtD,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC,CAAA;AACxB,CAAC,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hazelcast/ui",
-  "version": "1.3.3-next.3+8237d83",
+  "version": "1.3.3-next.30+c8ba067",
   "description": "Hazelcast design system components",
   "author": "",
   "homepage": "https://github.com/hazelcast/frontend-shared#readme",
@@ -51,8 +51,8 @@
     "@headlessui/react": "^1.4.2",
     "@icons-pack/react-simple-icons": "^9.3.0",
     "@popperjs/core": "^2.11.7",
+    "@tanstack/react-table": "^8.20.5",
     "@types/react-modal": "3.16.0",
-    "@types/react-table": "^7.7.14",
     "classnames": "^2.3.2",
     "date-fns": "^2.29.3",
     "dequal": "^2.0.3",
@@ -68,13 +68,13 @@
     "react-resize-aware": "3.1.1",
     "react-select": "^5.8.0",
     "react-simple-timefield": "^3.3.1",
-    "react-table": "^7.8.0",
     "react-uid": "^2.3.2",
     "react-use": "^17.4.0",
-    "use-deep-compare": "^1.1.0"
+    "use-deep-compare": "^1.1.0",
+    "use-persisted-state": "^0.3.3"
   },
   "devDependencies": {
-    "@hazelcast/test-helpers": "^1.3.2",
+    "@hazelcast/test-helpers": "1.3.3-next.20",
     "@storybook/addon-docs": "^6.5.16",
     "@storybook/addons": "^6.5.16",
     "@storybook/builder-webpack5": "^6.5.16",
@@ -82,38 +82,45 @@
     "@storybook/preset-scss": "^1.0.3",
     "@storybook/react": "^6.5.16",
     "@storybook/theming": "^6.5.16",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.5.0",
+    "@testing-library/react": "^12.1.5",
+    "@testing-library/user-event": "^14.5.2",
     "@types/classnames": "^2.3.1",
     "@types/enzyme": "^3.10.12",
     "@types/jest-axe": "^3.5.3",
     "@types/react": "^17.0.45",
     "@types/react-datepicker": "^4.3.2",
     "@types/react-dom": "^17.0.17",
+    "@types/use-persisted-state": "^0.3.4",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
     "babel-loader": "^9.1.2",
-    "doiuse": "^4.4.1",
+    "doiuse": "^6.0.3",
     "enzyme": "^3.11.0",
     "jest-axe": "^8.0.0",
-    "loki": "^0.34.0",
-    "postcss": "^8.4.23",
-    "postcss-cli": "^9.1.0",
-    "postcss-reporter": "^7.0.5",
-    "postcss-scss": "^4.0.6",
+    "loki": "^0.35.1",
+    "postcss": "^8.4.47",
+    "postcss-cli": "^11.0.0",
+    "postcss-reporter": "^7.1.0",
+    "postcss-scss": "^4.0.9",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "storybook-addon-designs": "^6.3.1",
-    "stylelint": "^15.6.0",
-    "stylelint-config-standard": "^33.0.0",
-    "stylelint-config-standard-scss": "^9.0.0",
-    "stylelint-prettier": "^3.0.0",
-    "stylelint-scss": "^4.6.0",
-    "webpack": "^5.81.0",
+    "stylelint": "^16.9.0",
+    "stylelint-config-standard": "^36.0.1",
+    "stylelint-config-standard-scss": "^13.1.0",
+    "stylelint-prettier": "^5.0.2",
+    "stylelint-scss": "^6.7.0",
+    "webpack": "^5.95.0",
     "yup": "^0.32.11"
   },
   "peerDependencies": {
+    "@types/lodash": "^4.17.13",
     "@types/react": "^17 || ^18",
     "@types/react-dom": "^17 || ^18",
+    "lodash": "^4.17.21",
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "8237d835b6af6421bcf3e4e6d57403485afac1ff"
+  "gitHead": "c8ba067ba693224cad7692c23be5dc3c337d834c"
 }

package/styles/constants/_colors.scss

@@ -1,30 +1,54 @@
-// https://zeroheight.com/11d0e6dac/p/594529--colors
+// https://www.figma.com/design/uGTDLFJEVy4dCNIhlmTPRw/%F0%9F%90%9D-HIVE-3.0?node-id=1061-4605&p=f&t=7sJDCVUY4O5jNXma-0
 $colorPrimaryLight: #2d7de4 !default;
 $colorPrimary: #2160c0 !default;
 $colorPrimaryDark: #003b87 !default;
+
 $colorNeutralWhite: #fff !default;
-$colorNeutralLighter: #fafafa !default;
-$colorNeutralLight: #b7c1cb !default;
+
+$colorNeutralGray: #e9f0f9 !default;
+$colorNeutralGrayDarker: #ccdff5 !default;
+
 $colorNeutral: #dbdbdb !default;
+$colorNeutralLight: #b7c1cb !default;
+$colorNeutralLighter: #fafafa !default;
+
 $colorSuccess: #85da66 !default;
 $colorSuccessLight: #d5f0d1 !default;
-$colorSuccessDark: darken($colorSuccess, 10%) !default;
+$colorSuccessDark: #64d03c !default;
+$colorSuccessDarkest: #3b7044 !default;
+
 $colorInfo: #76e7e7 !default;
 $colorInfoLight: #d0f4f8 !default;
-$colorInfoDark: darken($colorInfo, 10%) !default;
+$colorInfoDark: #4adfdf !default;
+$colorInfoDarkest: #006585 !default;
+
 $colorWarning: #ffec44 !default;
 $colorWarningLight: #f9f6c7 !default;
-$colorWarningDark: darken($colorWarning, 15%) !default;
+$colorWarningDark: #f6dd00 !default;
+$colorWarningDarkest: #8b5d00 !default;
+
 $colorError: #dc084b !default;
 $colorErrorLight: #efb1c9 !default;
-$colorErrorDark: darken($colorError, 10%) !default;
+$colorErrorDark: #8f001d !default;
+
 $colorText: #061827 !default;
 $colorTextSecondary: #707482 !default;
-$colorTextSubdued: #69707d !default;
+$colorTextSubdued: $colorTextSecondary !default;
+
 $colorOverlayBackground: #f0f6ff !default;
 $colorAccessibilityOutline: #74f !default;
+
 $colorBrand: #00bac6 !default;
-$colorShadow: rgb(53 61 73 / 20%) !default;
-$colorMenuDark: #333 !default;
-$authPrimary: #c6ff3a !default;
-$authSecondary: #0b2b39 !default;
+$colorBrandText: #10a4b3 !default;
+$colorShadow: $colorNeutral !default;
+
+$colorMenuDark: $colorText !default;
+$colorAuthSecondary: #0b2b39 !default;
+
+$colorBrandPrimary: #c6ff3a !default;
+$colorBrandSecondary: #061727 !default;
+$colorBrandAccent: #122d45 !default;
+$colorBrandOcean: #0080a9 !default;
+$colorBrandRaspberry: #c91268 !default;
+$colorBrandCarrot: #f5911e !default;
+$colorBrandBlueberry: #0019fe !default;

package/styles/constants/_typography.scss

@@ -44,13 +44,6 @@ $lineHeightBodyTiny: normal !default;
   @return '';
 }
 
-@mixin typographyH1Hero($override: false) {
-  font-weight: $fontWeightHeadingRegular #{override($override)};
-  font-size: $fontSizeH4 #{override($override)};
-  letter-spacing: $letterSpacingH4 #{override($override)};
-  line-height: $lineHeightH4 #{override($override)};
-}
-
 @mixin typographyH1($override: false) {
   font-weight: $fontWeightHeadingRegular #{override($override)};
   font-size: $fontSizeH1 #{override($override)};

package/styles/helpers/_a11y.scss

@@ -36,3 +36,11 @@
   top: 1px;
   left: 1px;
 }
+
+@mixin focusOutlineSimple() {
+  &:focus-within {
+    outline: none;
+
+    @include outlineSimple;
+  }
+}

package/styles/helpers/_gradients.scss

@@ -1,11 +1,44 @@
 @use '../constants' as c;
 
-@mixin gradientLime {
-  background: c.$authPrimary;
-  background: linear-gradient(270deg, c.$authPrimary 0%, #00b8b8 100%);
+@mixin textGradient() {
+  /* doiuse-disable background-clip-text */
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  /* doiuse-enable background-clip-text */
 }
 
-@mixin gradientOcean {
-  background: c.$colorText;
-  background: linear-gradient(270deg, #0c6f8e 0%, #1b2939 100%);
+@mixin gradientLime($angle: 270deg) {
+  background: linear-gradient($angle, c.$colorBrandPrimary, #00b8b8);
+}
+
+@mixin textGradientLime($angle: 0deg) {
+  @include gradientLime($angle);
+  @include textGradient;
+}
+
+@mixin gradientOcean($angle: 270deg) {
+  background: linear-gradient($angle, #116884, c.$colorText);
+}
+
+@mixin textGradientOcean($angle: 0deg) {
+  @include gradientOcean($angle);
+  @include textGradient;
+}
+
+@mixin gradientSea($angle: 270deg) {
+  background: linear-gradient($angle, #0c6f8e, #08d1d1);
+}
+
+@mixin textGradientSea($angle: 0deg) {
+  @include gradientSea($angle);
+  @include textGradient;
+}
+
+@mixin gradientCitrus($angle: 90deg) {
+  background: linear-gradient($angle, c.$colorBrandRaspberry, c.$colorBrandCarrot);
+}
+
+@mixin textGradientCitrus($angle: 0deg) {
+  @include gradientCitrus($angle);
+  @include textGradient;
 }

package/styles/helpers/_text.scss

@@ -3,3 +3,12 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
+
+@mixin multilineOverflowEllipsis {
+  @supports (-webkit-line-clamp: 2) {
+    white-space: normal;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+  }
+}

package/styles/typography/ubuntu-mono.css

@@ -0,0 +1,31 @@
+@font-face {
+  font-family: 'Ubuntu Mono';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url('./fonts/UbuntuMono-Regular.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Ubuntu Mono';
+  font-style: italic;
+  font-display: swap;
+  font-weight: 400;
+  src: url('./fonts/UbuntuMono-Italic.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Ubuntu Mono';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 500;
+  src: url('./fonts/UbuntuMono-Bold.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Ubuntu Mono';
+  font-style: italic;
+  font-display: swap;
+  font-weight: 500;
+  src: url('./fonts/UbuntuMono-BoldItalic.woff2') format('woff2');
+}