@hazelcast/ui 1.3.3-next.8 → 2.0.1-canary.0

package/lib/components/AppSidebar/AppSidebarSection/AppSidebarSection.module.scss

@@ -0,0 +1,58 @@
+@use '../../../../styles/constants' as c;
+
+$transitionLength: 125ms;
+$sideBarMenuSectionTransitionMaxHeight: 1000px;
+
+.root {
+  display: flex;
+  gap: c.$grid * 2;
+  align-items: stretch;
+  flex-direction: column;
+  padding-top: c.$grid * 2;
+  border-top: 1px solid transparent;
+
+  h3 {
+    margin: 0;
+    color: c.$colorNeutralLight;
+    font-size: c.$fontSizeBodySmall;
+  }
+}
+
+.collapsed {
+  border-color: c.$colorNeutralLight;
+
+  h3 {
+    display: none;
+  }
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: c.$grid;
+}
+
+.icon {
+  margin-left: auto;
+  color: c.$colorNeutralLighter;
+}
+
+.toggle {
+  margin-bottom: c.$grid;
+
+  .adornment {
+    margin-right: -#{c.$grid * 1.5};
+  }
+}
+
+.transitionLeave {
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height $transitionLength ease-out;
+}
+
+.transitionEnter {
+  max-height: $sideBarMenuSectionTransitionMaxHeight;
+  overflow: visible;
+  transition: max-height $transitionLength ease-in;
+}

package/lib/components/AppSidebar/AppSidebarSection/AppSidebarSectionExpandable.d.ts

@@ -0,0 +1,12 @@
+import React, { ReactNode } from 'react';
+import { Icon as FeatherIcon } from 'react-feather';
+import { DataTestProp } from '../../../../src';
+export type AppSidebarSectionExpandableProps = {
+    id: string;
+    title: string;
+    active: boolean;
+    icon: FeatherIcon;
+    ariaLabel: string;
+    children: ReactNode;
+} & DataTestProp;
+export declare const AppSidebarSectionExpandable: ({ id, active, icon, title, ariaLabel, children, "data-test": dataTest, }: AppSidebarSectionExpandableProps) => React.JSX.Element;

package/lib/components/AppSidebar/AppSidebarSection/AppSidebarSectionExpandable.js

@@ -0,0 +1,54 @@
+import React, { useContext, useEffect, useRef } from 'react';
+import cn from 'classnames';
+import { ChevronDown, ChevronUp } from 'react-feather';
+import { useRefValue, createPersistedState } from '../../../hooks';
+import { Icon } from '../../Icon';
+import { AppSidebarItem } from '../AppSidebarItem';
+import { appSidebarContext } from '../appSidebarContext';
+import { appSidebarSectionContext } from './appSidebarSectionContext';
+import styles from './AppSidebarSection.module.scss';
+const kebabCase = (str) => str.toLowerCase().split(' ').join('-');
+export const AppSidebarSectionExpandable = ({ id, active, icon, title, ariaLabel, children, 'data-test': dataTest = 'sidebar-menu-section-title', }) => {
+    const rootEl = useRef(null);
+    const clicked = useRef(false);
+    const { isOpen, open: openSidebar } = useContext(appSidebarContext);
+    const usePersistedMenuStorageState = createPersistedState(`isOpen::${title}`);
+    const [open, setOpen] = usePersistedMenuStorageState(false);
+    const getIsActive = useRefValue(active);
+    const getSetOpen = useRefValue(setOpen);
+    const chevronButtonProps = open
+        ? { icon: ChevronUp, ariaLabel: 'Section Open' }
+        : { icon: ChevronDown, ariaLabel: 'Section Closed' };
+    const isSectionOpen = open && isOpen;
+    const handleClick = () => {
+        if (!isOpen) {
+            openSidebar();
+            setOpen(true);
+            clicked.current = true;
+        }
+        else {
+            setOpen(!open);
+            clicked.current = false;
+        }
+    };
+    const handleTransitionEnd = () => {
+        if (isOpen && active && rootEl.current && clicked.current) {
+            rootEl.current.scrollIntoView();
+            clicked.current = false;
+        }
+    };
+    useEffect(() => {
+        const cb = getSetOpen();
+        if (getIsActive() && cb) {
+            setTimeout(() => cb(true));
+        }
+    }, [getIsActive, getSetOpen]);
+    return (React.createElement("section", { ref: rootEl, "data-test": `sidebar-menu-section-${kebabCase(id)}` },
+        React.createElement(AppSidebarItem, { title: title, "aria-label": ariaLabel, icon: icon, iconAriaLabel: title, onClick: handleClick, active: active, className: styles.toggle, adornmentClassName: styles.adornment, adornment: React.createElement(Icon, { "data-test": "sidebar-menu-section-chevron", size: "medium", containerClassName: styles.icon, ...chevronButtonProps }), "data-test": dataTest }),
+        React.createElement(appSidebarSectionContext.Provider, { value: {} },
+            React.createElement("div", { onTransitionEnd: handleTransitionEnd, className: cn(styles.content, {
+                    [styles.transitionEnter]: isSectionOpen,
+                    [styles.transitionLeave]: !isSectionOpen,
+                }) }, children))));
+};
+//# sourceMappingURL=AppSidebarSectionExpandable.js.map

package/lib/components/AppSidebar/AppSidebarSection/AppSidebarSectionExpandable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppSidebarSectionExpandable.js","sourceRoot":"","sources":["../../../../src/components/AppSidebar/AppSidebarSection/AppSidebarSectionExpandable.tsx"],"names":[],"mappings":"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"}

package/lib/components/AppSidebar/AppSidebarSection/appSidebarSectionContext.d.ts

@@ -0,0 +1 @@
+export declare const appSidebarSectionContext: import("react").Context<object | null>;

package/lib/components/AppSidebar/AppSidebarSection/appSidebarSectionContext.js

@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+export const appSidebarSectionContext = createContext(null);
+//# sourceMappingURL=appSidebarSectionContext.js.map

package/lib/components/AppSidebar/AppSidebarSection/appSidebarSectionContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"appSidebarSectionContext.js","sourceRoot":"","sources":["../../../../src/components/AppSidebar/AppSidebarSection/appSidebarSectionContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAErC,MAAM,CAAC,MAAM,wBAAwB,GAAG,aAAa,CAAgB,IAAI,CAAC,CAAA"}

package/lib/components/AppSidebar/AppSidebarSection/index.d.ts

@@ -0,0 +1 @@
+export * from './AppSidebarSection';

package/lib/components/AppSidebar/AppSidebarSection/index.js

@@ -0,0 +1,2 @@
+export * from './AppSidebarSection';
+//# sourceMappingURL=index.js.map

package/lib/components/AppSidebar/AppSidebarSection/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/AppSidebar/AppSidebarSection/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAA"}

package/lib/components/AppSidebar/appSidebarContext.d.ts

@@ -0,0 +1,9 @@
+export interface AppSidebarContext {
+    isOpen: boolean;
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+    favorites: string[];
+    setFavorites: (cb: (value: string[]) => string[]) => void;
+}
+export declare const appSidebarContext: import("react").Context<AppSidebarContext>;

package/lib/components/AppSidebar/appSidebarContext.js

@@ -0,0 +1,11 @@
+import { createContext } from 'react';
+const noOp = () => undefined;
+export const appSidebarContext = createContext({
+    open: noOp,
+    close: noOp,
+    toggle: noOp,
+    isOpen: true,
+    favorites: [],
+    setFavorites: () => [],
+});
+//# sourceMappingURL=appSidebarContext.js.map

package/lib/components/AppSidebar/appSidebarContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"appSidebarContext.js","sourceRoot":"","sources":["../../../src/components/AppSidebar/appSidebarContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAErC,MAAM,IAAI,GAAe,GAAG,EAAE,CAAC,SAAS,CAAA;AAUxC,MAAM,CAAC,MAAM,iBAAiB,GAAG,aAAa,CAAoB;IAChE,IAAI,EAAE,IAAI;IACV,KAAK,EAAE,IAAI;IACX,MAAM,EAAE,IAAI;IACZ,MAAM,EAAE,IAAI;IACZ,SAAS,EAAE,EAAE;IACb,YAAY,EAAE,GAAG,EAAE,CAAC,EAAE;CACvB,CAAC,CAAA"}

package/lib/components/AppSidebar/index.d.ts

@@ -0,0 +1,5 @@
+export * from './AppSidebar';
+export * from './AppSidebarItem';
+export * from './AppSidebarSection';
+export * from './AppSidebarFavorites';
+export * from './AppSidebarMenuItemCounter';

package/lib/components/AppSidebar/index.js

@@ -0,0 +1,6 @@
+export * from './AppSidebar';
+export * from './AppSidebarItem';
+export * from './AppSidebarSection';
+export * from './AppSidebarFavorites';
+export * from './AppSidebarMenuItemCounter';
+//# sourceMappingURL=index.js.map

package/lib/components/AppSidebar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/AppSidebar/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA;AAC5B,cAAc,kBAAkB,CAAA;AAChC,cAAc,qBAAqB,CAAA;AACnC,cAAc,uBAAuB,CAAA;AACrC,cAAc,6BAA6B,CAAA"}

package/lib/{AutocompleteField.js → components/AutocompleteField.js}

@@ -6,7 +6,7 @@ import { Search, X } from 'react-feather';
 import useIsomorphicLayoutEffect from 'react-use/lib/useIsomorphicLayoutEffect';
 import styles from './AutocompleteField.module.scss';
 import { Error, errorId } from './Error';
-import { canUseDOM } from './utils/ssr';
+import { canUseDOM } from '../utils/ssr';
 import { IconButton } from './IconButton';
 import { FieldHeader } from './FieldHeader';
 /**
@@ -38,7 +38,6 @@ const DropdownIndicator = (props) => {
 // innerProps set event handling
 const ClearIndicator = ({ innerProps }) => {
     // Visually impaired people will use the keyboard (backspace) to remove the value. We do not want to confuse them by allowing to focus this button.
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
     return React.createElement(IconButton, { ...innerProps, icon: X, ariaHidden: true, kind: "primary", size: "medium", className: styles.clear, tabIndex: -1 });
 };
@@ -55,7 +54,7 @@ export const highlightOptionText = (labelText, inputValue) => {
             }), key: val + `${i}` }, val)))
         : labelText;
 };
-export const AutocompleteField = ({ 'data-test': dataTest, className, disabled, error, errorClassName, isClearable, label, labelClassName, helperText, size = 'medium', menuPortalTarget = 'body', name, onChange, onFocus, onBlur, onInputChange, options, required, value, placeholder = 'Search...', showAriaLabel = false, renderOption, openMenuOnClick = true, ...rest }) => {
+export const AutocompleteField = ({ 'data-test': dataTest = 'autocomplete-field', className, disabled, error, errorClassName, isClearable, label, labelClassName, helperText, size = 'medium', menuPortalTarget = 'body', name, onChange, onFocus, onBlur, onInputChange, options, required, value, placeholder = 'Search...', showAriaLabel = false, renderOption, openMenuOnClick = true, ...rest }) => {
     // when the user clicks on an input with the value, the value should disappear,
     // but then it should appear after the user selects something or blurs the input
     const [isValueHidden, setValueHidden] = useState(false);
@@ -114,7 +113,6 @@ export const AutocompleteField = ({ 'data-test': dataTest, className, disabled,
         // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-invalid_attribute
         'aria-errormessage': error && errorId(id),
         'aria-invalid': !!error,
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
         'aria-required': required,
         error,
@@ -149,11 +147,10 @@ export const AutocompleteField = ({ 'data-test': dataTest, className, disabled,
         // We can always add this class to the select itself because even if the menu container is any parent it won't break it
         // However, if it is the select itself, it will properly add necessary specificity level to the menu styles.
         styles.menuContainer, className) },
-        React.createElement(FieldHeader, { label: label, id: id, size: size, helperText: helperText, showAriaLabel: showAriaLabel, labelClassName: labelClassName }),
+        React.createElement(FieldHeader, { label: label, id: id, size: size, "data-test": dataTest, helperText: helperText, showAriaLabel: showAriaLabel, labelClassName: labelClassName }),
         React.createElement("div", { className: styles.selectBlock },
             React.createElement(ReactSelect, { onInputChange: onInputChange, formatOptionLabel: formatOptionLabelFn, styles: {
                     ...props.styles,
-                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                     // @ts-ignore
                     singleValue: (base) => {
                         var _a;
@@ -164,6 +161,6 @@ export const AutocompleteField = ({ 'data-test': dataTest, className, disabled,
                         });
                     },
                 }, ...props })),
-        React.createElement(Error, { truncated: true, error: error, className: cn(styles.errorContainer, errorClassName), inputId: id })));
+        React.createElement(Error, { "data-test": `${dataTest}-error`, truncated: true, error: error, className: cn(styles.errorContainer, errorClassName), inputId: id })));
 };
 //# sourceMappingURL=AutocompleteField.js.map

package/lib/components/AutocompleteField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AutocompleteField.js","sourceRoot":"","sources":["../../src/components/AutocompleteField.tsx"],"names":[],"mappings":"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"}

package/lib/{AutocompleteField.module.scss → components/AutocompleteField.module.scss}

@@ -1,5 +1,5 @@
-@use '../styles/constants' as c;
-@use '../styles/helpers' as h;
+@use '../../styles/constants' as c;
+@use '../../styles/helpers' as h;
 
 $selectHorizontalPadding: c.$grid * 3;
 $menuMargin: c.$grid * 3;

package/lib/{AutocompleteFieldFormik.d.ts → components/AutocompleteFieldFormik.d.ts}

@@ -1,6 +1,6 @@
 import { ReactElement } from 'react';
 import { AutocompleteFieldProps } from './AutocompleteField';
-import { FieldValidatorGeneric } from './utils/formik';
+import { FieldValidatorGeneric } from '../utils/formik';
 type AutocompleteFieldFormikProps = AutocompleteFieldProps & {
     validate?: FieldValidatorGeneric<string | null>;
     onChange?: (value: string | null) => void;

package/lib/{AutocompleteFieldFormik.js → components/AutocompleteFieldFormik.js}

@@ -1,7 +1,7 @@
 import React, { useCallback, useMemo } from 'react';
 import { useField } from 'formik';
 import { AutocompleteField } from './AutocompleteField';
-import { formikTouchAndUpdate, getFieldError } from './utils/formik';
+import { formikTouchAndUpdate, getFieldError } from '../utils/formik';
 export const AutocompleteFieldFormik = ({ name, validate, onChange, ...props }) => {
     const [{ value, onBlur }, meta, { setValue, setTouched }] = useField({
         name,

package/lib/components/AutocompleteFieldFormik.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AutocompleteFieldFormik.js","sourceRoot":"","sources":["../../src/components/AutocompleteFieldFormik.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAgB,WAAW,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA;AAEjC,OAAO,EAAE,iBAAiB,EAA0B,MAAM,qBAAqB,CAAA;AAC/E,OAAO,EAAyB,oBAAoB,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAO5F,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAgC,EAAgB,EAAE;IAC5H,MAAM,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC,GAAG,QAAQ,CAAgB;QAClF,IAAI;QACJ,QAAQ;KACT,CAAC,CAAA;IAEF,MAAM,cAAc,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,oBAAoB,CAAgB,QAAQ,EAAE,UAAU,CAAC,EAAE,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC,CAAA;IACvH,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,QAAgB,EAAE,EAAE;QACnB,IAAI,QAAQ,EAAE,CAAC;YACb,QAAQ,CAAC,QAAQ,CAAC,CAAA;QACpB,CAAC;QAED,cAAc,CAAC,QAAQ,CAAC,CAAA;IAC1B,CAAC,EACD,CAAC,cAAc,EAAE,QAAQ,CAAC,CAC3B,CAAA;IAED,OAAO,oBAAC,iBAAiB,OAAK,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,YAAY,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,aAAa,CAAC,IAAI,CAAC,GAAI,CAAA;AACvI,CAAC,CAAA"}

package/lib/{Badge.js → components/Badge.js}

@@ -12,14 +12,14 @@ export const BadgeIcon = {
         icon: CheckCircle,
         ariaLabel: 'Check circle icon',
     },
-    info: {
-        icon: Info,
-        ariaLabel: 'Info circle icon',
-    },
     warning: {
         icon: AlertTriangle,
         ariaLabel: 'Warning triangle icon',
     },
+    info: {
+        icon: Info,
+        ariaLabel: 'Info circle icon',
+    },
     critical: {
         icon: AlertCircle,
         ariaLabel: 'Info critical circle icon',

package/lib/components/Badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../src/components/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAA;AAC5C,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,WAAW,EAAE,IAAI,EAAoB,MAAM,eAAe,CAAA;AAE/F,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAE7B,OAAO,MAAM,MAAM,qBAAqB,CAAA;AASxC,MAAM,CAAC,MAAM,SAAS,GAAgD;IACpE,OAAO,EAAE;QACP,IAAI,EAAE,IAAI;QACV,SAAS,EAAE,kBAAkB;KAC9B;IACD,OAAO,EAAE;QACP,IAAI,EAAE,WAAW;QACjB,SAAS,EAAE,mBAAmB;KAC/B;IACD,OAAO,EAAE;QACP,IAAI,EAAE,aAAa;QACnB,SAAS,EAAE,uBAAuB;KACnC;IACD,IAAI,EAAE;QACJ,IAAI,EAAE,IAAI;QACV,SAAS,EAAE,kBAAkB;KAC9B;IACD,QAAQ,EAAE;QACR,IAAI,EAAE,WAAW;QACjB,SAAS,EAAE,2BAA2B;KACvC;CACF,CAAA;AAWD,MAAM,CAAC,MAAM,KAAK,GAAmB,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,GAAG,QAAQ,EAAE,SAAS,EAAE,EAAE,EAAE;IACrF,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,SAAS,CAAC,IAAI,CAAC,CAAA;IAE3C,OAAO,CACL,0CACY,iBAAiB,EAC3B,SAAS,EAAE,EAAE,CACX,MAAM,CAAC,KAAK,EACZ;YACE,SAAS;YACT,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,IAAI,KAAK,SAAS;YACpC,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,IAAI,KAAK,SAAS;YACpC,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,IAAI,KAAK,MAAM;YAC9B,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,IAAI,KAAK,SAAS;YACpC,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,IAAI,KAAK,UAAU;YACtC,OAAO;YACP,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,IAAI,KAAK,QAAQ;YAClC,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,IAAI,KAAK,OAAO;SACjC,EACD,SAAS,CACV;QAED,oBAAC,IAAI,iBACO,YAAY,EACtB,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,MAAM,CAAC,IAAI,EACtB,IAAI,EAAE,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,GAC5C;QACF,0CAAe,eAAe,EAAC,SAAS,EAAE,MAAM,CAAC,OAAO,IACrD,OAAO,CACJ,CACF,CACP,CAAA;AACH,CAAC,CAAA"}

package/lib/{Badge.module.scss → components/Badge.module.scss}

@@ -1,4 +1,4 @@
-@use '../styles/constants' as c;
+@use '../../styles/constants' as c;
 
 .badge {
   display: inline-flex;

package/lib/{Button.d.ts → components/Button.d.ts}

@@ -1,10 +1,10 @@
 import React, { ButtonHTMLAttributes, HTMLAttributes, ReactElement } from 'react';
-import { IconProps } from './Icon';
+import { IconProps, IconSize } from './Icon';
 import { TooltipProps } from './Tooltip';
 import { LinkRel, LinkTarget } from './Link';
-export type ButtonKind = 'primary' | 'secondary' | 'danger' | 'transparent';
+import { DataTestProp } from '../../src';
 export type ButtonVariant = 'contained' | 'outlined' | 'text';
-export type ButtonColor = 'primary' | 'secondary' | 'warning' | 'brand' | 'authPrimary' | 'authSecondary';
+export type ButtonColor = 'primary' | 'secondary' | 'warning' | 'brand' | 'authPrimary' | 'authSecondary' | 'light';
 export type ButtonSize = 'medium' | 'small';
 export type ButtonAccessibleIconLeftProps = {
     iconLeft: IconProps['icon'];
@@ -42,12 +42,9 @@ export type ButtonDisabledProps = {
 };
 export type ButtonOutlineType = 'outline' | 'inset';
 export type ButtonCommonProps = {
-    /**
-     * @deprecated Use variant + color instead
-     */
-    kind?: ButtonKind;
     children: string | ReactElement;
     size?: ButtonSize;
+    iconSize?: IconSize;
     color?: ButtonColor;
     capitalize?: boolean;
     bodyClassName?: string;
@@ -55,6 +52,9 @@ export type ButtonCommonProps = {
     outlineClassName?: string;
     outline?: ButtonOutlineType;
     tooltip?: string;
+    tooltipColor?: TooltipProps['color'];
+    active?: boolean;
+    truncate?: boolean;
 } & (ButtonDisabledProps | ButtonNotDisabledProps) & Pick<HTMLAttributes<HTMLAnchorElement | HTMLButtonElement>, 'className' | 'onClick' | 'tabIndex' | 'style'>;
 export type ButtonTypeAnchorProps = {
     component: 'a';
@@ -72,7 +72,7 @@ export type ButtonTypeButtonProps = {
     loading?: boolean;
 } & Pick<ButtonHTMLAttributes<HTMLButtonElement>, 'autoFocus' | 'type'>;
 export type ButtonTypeProps = ButtonTypeAnchorProps | ButtonTypeButtonProps;
-export type ButtonProps<T = ButtonTypeProps> = ButtonCommonProps & T & ButtonAccessibleIconLeftProps & ButtonAccessibleIconRightProps;
+export type ButtonProps<T = ButtonTypeProps> = ButtonCommonProps & T & ButtonAccessibleIconLeftProps & ButtonAccessibleIconRightProps & DataTestProp;
 /**
  * ### Purpose
  * Make it clear what users should do to continue with their main flow by using buttons to highlight the main actions they can take.

package/lib/{Button.js → components/Button.js}

@@ -8,31 +8,6 @@ import { Tooltip } from './Tooltip';
 import { Loader } from './Loader';
 import styles from './Button.module.scss';
 const capitalizeFirstCharacter = (str) => `${str[0].toUpperCase()}${str.slice(1)}`;
-const resolveButtonKindStyles = (kind) => {
-    switch (kind) {
-        case 'secondary':
-            return {
-                [styles.colorPrimary]: true,
-                [styles.variantOutlined]: true,
-            };
-        case 'transparent':
-            return {
-                [styles.colorPrimary]: true,
-                [styles.variantText]: true,
-            };
-        case 'danger': {
-            return {
-                [styles.colorSecondary]: true,
-                [styles.variantContained]: true,
-            };
-        }
-        default:
-            return {
-                [styles.colorPrimary]: true,
-                [styles.variantContained]: true,
-            };
-    }
-};
 /**
  * ### Purpose
  * Make it clear what users should do to continue with their main flow by using buttons to highlight the main actions they can take.
@@ -53,38 +28,35 @@ const resolveButtonKindStyles = (kind) => {
  * - **Danger**: Use danger button for potentially destructive actions.
  * - **Transparent**: Use for IconButton and similar use-cases.
  */
-export const Button = forwardRef(({ kind, component: Component = 'button', className, bodyClassName, outlineClassName, outline = 'outline', children, capitalize = true, 
+export const Button = forwardRef(({ component: Component = 'button', className, bodyClassName, outlineClassName, outline = 'outline', children, capitalize = true, 
 // Disabled tooltip
 disabled, disabledTooltip, disabledTooltipVisible, disabledTooltipPlacement, 
 // Left icon
 iconLeft, iconLeftAriaLabel, iconLeftColor, iconLeftClassName, 
 // Right icon
-iconRight, iconRightAriaLabel, iconRightColor, iconRightClassName, rel = 'noopener', target, type = 'button', loading, variant = 'contained', color = 'primary', tooltip, size = 'small', ...rest }, ref) => {
+iconRight, iconRightAriaLabel, iconRightColor, iconRightClassName, rel = 'noopener', target, type = 'button', loading, variant = 'contained', color = 'primary', tooltip, size = 'small', active, truncate = true, iconSize: propIconSize, tooltipColor, ...rest }, ref) => {
     const tooltipId = useUID();
-    const iconSize = size === 'medium' ? 'smallMedium' : 'small';
+    const iconSize = propIconSize || (size === 'medium' ? 'smallMedium' : 'small');
     const relFinal = Array.isArray(rel) ? rel.join(' ') : rel;
     const loadingAnimationOnRight = loading && iconRight && iconRightAriaLabel && !(iconLeft && iconLeftAriaLabel);
-    return (React.createElement(Tooltip, { id: tooltipId, content: disabled ? disabledTooltip : tooltip, visible: disabled && disabledTooltipVisible, placement: disabledTooltipPlacement }, (tooltipRef, onMouseEnter, onMouseLeave) => (React.createElement(Component, { "data-test": "button", className: cn(styles.button, {
-            ...(kind !== undefined
-                ? resolveButtonKindStyles(kind)
-                : {
-                    [styles[`color${capitalizeFirstCharacter(color)}`]]: true,
-                    [styles[`variant${capitalizeFirstCharacter(variant)}`]]: true,
-                }),
+    return (React.createElement(Tooltip, { id: tooltipId, color: tooltipColor, content: disabled ? disabledTooltip : tooltip, visible: disabled && disabledTooltipVisible, placement: disabledTooltipPlacement }, (tooltipRef, onMouseEnter, onMouseLeave) => (React.createElement(Component, { "data-test": "button", className: cn(styles.button, {
+            [styles[`color${capitalizeFirstCharacter(color)}`]]: true,
+            [styles[`variant${capitalizeFirstCharacter(variant)}`]]: true,
+            [styles.active]: active,
             [styles[size]]: size !== 'small',
         }, className), "aria-describedby": disabled ? tooltipId : undefined, disabled: disabled !== null && disabled !== void 0 ? disabled : loading, rel: Component === 'a' ? relFinal : undefined, target: Component === 'a' ? target : undefined, type: Component === 'button' ? type : undefined, ref: mergeRefs([ref, tooltipRef]), ...rest },
         React.createElement("span", { "data-test": "button-outline", className: cn(styles.outline, { [styles.inset]: outline === 'inset' }, outlineClassName) }),
         React.createElement("span", { className: cn(styles.body, bodyClassName), onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave },
             loading && !loadingAnimationOnRight && React.createElement(Loader, { className: styles.iconLeft, size: iconSize }),
             iconLeft && iconLeftAriaLabel && !loading && (React.createElement(Icon, { icon: iconLeft, ariaLabel: iconLeftAriaLabel, "data-test": "button-icon-left", className: cn(styles.iconLeft, iconLeftClassName), size: iconSize, color: iconLeftColor })),
-            React.createElement(TruncatedText, { text: capitalize && typeof children === 'string' ? children.toUpperCase() : children, 
+            truncate ? (React.createElement(TruncatedText, { text: capitalize && typeof children === 'string' ? children.toUpperCase() : children, 
                 /*
-                  If a button is disabled and text is long we don't want to show 2 popups.
-                  1. In case a button is disabled and no `disabledTooltipVisible` is enforced, we just hide truncated popup.
-                  2. In case a button is disabled and disabledTooltip is hidden with a false flag, there is a space to show
-                  the truncated popup -> setting it to undefined will leave the default behaviour.
-                */
-                tooltipVisible: disabled && disabledTooltipVisible !== false ? false : undefined }),
+                If a button is disabled and text is long we don't want to show 2 popups.
+                1. In case a button is disabled and no `disabledTooltipVisible` is enforced, we just hide truncated popup.
+                2. In case a button is disabled and disabledTooltip is hidden with a false flag, there is a space to show
+                the truncated popup -> setting it to undefined will leave the default behaviour.
+              */
+                tooltipVisible: disabled && disabledTooltipVisible !== false ? false : undefined })) : (children),
             loadingAnimationOnRight && React.createElement(Loader, { className: styles.iconRight, size: iconSize }),
             !loadingAnimationOnRight && iconRight && iconRightAriaLabel && (React.createElement(Icon, { icon: iconRight, ariaLabel: iconRightAriaLabel, "data-test": "button-icon-right", className: cn(styles.iconRight, iconRightClassName), size: iconSize, color: iconRightColor })))))));
 });

package/lib/components/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../src/components/Button.tsx"],"names":[],"mappings":"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"}

package/lib/{Button.module.scss → components/Button.module.scss}

@@ -1,5 +1,6 @@
-@use '../styles/constants' as c;
-@use '../styles/helpers' as h;
+@use 'sass:color';
+@use '../../styles/constants' as c;
+@use '../../styles/helpers' as h;
 
 @mixin buttonColor($color: c.$colorPrimary) {
   color: $color;
@@ -174,12 +175,12 @@
       &.hover,
       &:focus-visible,
       &.focus {
-        @include buttonColor(lighten(c.$colorBrand, 20%));
+        @include buttonColor(color.adjust(c.$colorBrand, $lightness: 20%));
       }
 
       &:active,
       &.active {
-        @include buttonColor(darken(c.$colorBrand, 10%));
+        @include buttonColor(color.adjust(c.$colorBrand, $lightness: -10%));
       }
 
       &.variantContained {
@@ -192,18 +193,18 @@
     }
 
     &AuthPrimary {
-      @include buttonColor(c.$authPrimary);
+      @include buttonColor(c.$colorBrandPrimary);
 
       &:hover,
       &.hover,
       &:focus-visible,
       &.focus {
-        @include buttonColor(lighten(c.$authPrimary, 10%));
+        @include buttonColor(color.adjust(c.$colorBrandPrimary, $lightness: 10%));
       }
 
       &:active,
       &.active {
-        @include buttonColor(darken(c.$authPrimary, 10%));
+        @include buttonColor(color.adjust(c.$colorBrandPrimary, $lightness: -10%));
       }
 
       &.variantContained {
@@ -216,7 +217,7 @@
     }
 
     &AuthSecondary {
-      @include buttonColor(c.$authSecondary);
+      @include buttonColor(c.$colorAuthSecondary);
 
       border-color: c.$colorNeutralWhite;
 
@@ -224,12 +225,12 @@
       &.hover,
       &:focus-visible,
       &.focus {
-        @include buttonColor(lighten(c.$authSecondary, 10%));
+        @include buttonColor(color.adjust(c.$colorAuthSecondary, $lightness: 10%));
       }
 
       &:active,
       &.active {
-        @include buttonColor(darken(c.$authSecondary, 10%));
+        @include buttonColor(color.adjust(c.$colorAuthSecondary, $lightness: -10%));
       }
 
       &.variantContained {
@@ -237,7 +238,7 @@
       }
 
       &.variantOutlined {
-        border-color: c.$authSecondary;
+        border-color: c.$colorAuthSecondary;
       }
 
       &:disabled {
@@ -245,6 +246,36 @@
         background-color: c.$colorNeutralWhite;
       }
     }
+
+    &Light {
+      @include buttonColor(c.$colorNeutralLighter);
+
+      border-color: c.$colorNeutralLighter;
+
+      &:hover,
+      &.hover,
+      &:focus-visible,
+      &.focus {
+        @include buttonColor(color.adjust(c.$colorBrandText, $lightness: 10%));
+      }
+
+      &:active,
+      &.active {
+        @include buttonColor(c.$colorBrandText);
+      }
+
+      &.variantContained {
+        color: c.$colorText;
+
+        &:disabled {
+          @include disabledButtonColor;
+        }
+      }
+
+      &:disabled {
+        @include buttonColor(c.$colorNeutralLight);
+      }
+    }
   }
 
   &.variant {
@@ -281,7 +312,6 @@
     }
 
     &Text {
-      color: inherit;
       background: none;
 
       &:hover,

package/lib/{Calendar → components/Calendar}/Calendar.d.ts

@@ -1,6 +1,7 @@
 import { FC } from 'react';
 import { ReactDatePickerProps } from 'react-datepicker';
-import { PortalContainer } from '../utils/portal';
+import { DataTestProp } from '../../../src';
+import { PortalContainer } from '../../utils/portal';
 export type CalendarSize = 'medium' | 'small';
 export type CalendarProps = {
     containerClassName?: string;
@@ -12,5 +13,5 @@ export type CalendarProps = {
     container?: PortalContainer;
     inPortal?: boolean;
     dateFormat?: string;
-} & Omit<ReactDatePickerProps, 'value' | 'onChange' | 'dateFormat'>;
+} & Omit<ReactDatePickerProps, 'value' | 'onChange' | 'dateFormat'> & DataTestProp;
 export declare const Calendar: FC<CalendarProps>;