@hazelcast/ui 1.3.3-next.9 → 2.0.1-canary.1

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.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.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.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.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/components/AutocompleteField.js

@@ -0,0 +1,166 @@
+import React, { useMemo, useState } from 'react';
+import ReactSelect, { components } from 'react-select';
+import { useUID } from 'react-uid';
+import cn from 'classnames';
+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 { IconButton } from './IconButton';
+import { FieldHeader } from './FieldHeader';
+/**
+ * Transforms the value passed to the Autocomplete component so that it's in a format as underlying react-select expects
+ * @param value - single value or an array of values
+ * @param optionsMap - an object where option values are mapped to react-select expected objects
+ */
+export function getSelectedOptionFromValue({ value, optionsMap }) {
+    var _a;
+    let option = null;
+    if (value) {
+        option = (_a = optionsMap[value]) !== null && _a !== void 0 ? _a : { value: value, label: value };
+    }
+    return option;
+}
+const Input = (innerProps) => {
+    // autoComplete='off' is hard-coded inside SelectField, but doesn't work in Chrome.
+    // Having an invalid value hard-coded disabled it in all browsers.
+    const props = {
+        ...innerProps,
+        autoComplete: 'chrome-off',
+    };
+    return React.createElement(components.Input, { ...props });
+};
+const DropdownIndicator = (props) => {
+    return (React.createElement(components.DropdownIndicator, { ...props },
+        React.createElement(Search, { size: 20 })));
+};
+// 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.
+    // @ts-ignore
+    return React.createElement(IconButton, { ...innerProps, icon: X, ariaHidden: true, kind: "primary", size: "medium", className: styles.clear, tabIndex: -1 });
+};
+export const highlightOptionText = (labelText, inputValue) => {
+    const separator = '<%>';
+    const query = inputValue || '';
+    return query
+        ? labelText
+            .replace(new RegExp(query, 'ig'), `${separator}$&${separator}`)
+            .split(separator)
+            .filter((val) => val)
+            .map((val, i) => (React.createElement("span", { className: cn({
+                'hz-autocomplete-field__matched-option-text': val.toLowerCase() === query.toLowerCase(),
+            }), key: val + `${i}` }, val)))
+        : labelText;
+};
+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);
+    const id = useUID();
+    useIsomorphicLayoutEffect(() => {
+        const menuContainer = getMenuContainer(menuPortalTarget);
+        if (menuContainer && !menuContainer.className.includes(styles.menuContainer)) {
+            menuContainer.className = `${menuContainer.className} ${styles.menuContainer}`;
+        }
+    }, [menuPortalTarget]);
+    const optionsMap = React.useMemo(() => options.reduce((acc, option) => {
+        acc[`${option.value}`] = option;
+        return acc;
+    }, {}), [options]);
+    const selectedOption = useMemo(() => getSelectedOptionFromValue({ value, optionsMap }), [optionsMap, value]);
+    const onChangeFn = React.useCallback((option) => {
+        setValueHidden(false);
+        onChange(option === null ? null : option.value);
+    }, [onChange]);
+    const onFocusFn = React.useCallback((e) => {
+        if (onFocus) {
+            onFocus(e);
+        }
+        if (!openMenuOnClick) {
+            setValueHidden(true);
+        }
+    }, [onFocus, openMenuOnClick]);
+    const onBlurFn = React.useCallback((e) => {
+        if (onBlur) {
+            onBlur(e);
+        }
+        setValueHidden(false);
+    }, [onBlur]);
+    const formatOptionLabelFn = React.useCallback((option, labelMeta) => {
+        const { inputValue } = labelMeta;
+        let optionText = option.label;
+        if (inputValue) {
+            optionText = highlightOptionText(option.label, inputValue);
+        }
+        return renderOption ? renderOption(optionText, option, labelMeta) : optionText;
+    }, [renderOption]);
+    const getMenuContainer = (menuPortalTarget) => {
+        if (menuPortalTarget == 'body') {
+            // There is no document is SSR environment
+            return canUseDOM ? document.body : undefined;
+        }
+        if (menuPortalTarget == 'self') {
+            return undefined;
+        }
+        return menuPortalTarget;
+    };
+    const props = {
+        inputId: id,
+        className: 'hz-autocomplete-field',
+        classNamePrefix: 'hz-autocomplete-field',
+        // 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,
+        // @ts-ignore
+        'aria-required': required,
+        error,
+        isClearable: isClearable !== null && isClearable !== void 0 ? isClearable : false,
+        isDisabled: disabled,
+        isSearchable: true,
+        isMulti: false,
+        name: name,
+        value: selectedOption,
+        placeholder,
+        options,
+        onChange: onChangeFn,
+        onFocus: onFocusFn,
+        onBlur: onBlurFn,
+        menuPortalTarget: getMenuContainer(menuPortalTarget),
+        components: {
+            DropdownIndicator,
+            ClearIndicator,
+            Input,
+        },
+        openMenuOnClick,
+        ...rest,
+    };
+    return (React.createElement("div", { "data-test": dataTest, className: cn(styles.container, {
+            [styles.withError]: 'error' in props,
+            [styles.disabled]: disabled,
+            [styles.hasError]: error,
+            [styles.small]: size === 'small',
+            [styles.empty]: !value,
+        }, 
+        // Menu container is either this select itself or any other element
+        // 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, "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,
+                    // @ts-ignore
+                    singleValue: (base) => {
+                        var _a;
+                        return ({
+                            ...base,
+                            ...(_a = props.styles) === null || _a === void 0 ? void 0 : _a.singleValue,
+                            visibility: isValueHidden ? 'hidden' : 'visible',
+                        });
+                    },
+                }, ...props })),
+        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/components/AutocompleteField.module.scss

@@ -0,0 +1,164 @@
+@use '../../styles/constants' as c;
+@use '../../styles/helpers' as h;
+
+$selectHorizontalPadding: c.$grid * 3;
+$menuMargin: c.$grid * 3;
+$select: ':global .hz-autocomplete-field__control';
+$selectValueContainer: ':global .hz-autocomplete-field__value-container';
+
+.container {
+  .label {
+    display: block;
+    margin-bottom: c.$grid;
+
+    &.small {
+      @include c.typographyBodySmall;
+    }
+  }
+
+  &.small {
+    #{$selectValueContainer} {
+      padding: 0;
+    }
+
+    #{$select} {
+      min-height: c.$inputHeightSmall;
+    }
+  }
+
+  .helperText {
+    margin-left: c.$grid * 1.5;
+    display: block;
+  }
+
+  .clear {
+    margin-left: $selectHorizontalPadding;
+  }
+
+  :global .hz-autocomplete-field {
+    flex: 1 1 auto;
+
+    @include c.typographyBodySmall;
+  }
+
+  :global .hz-autocomplete-field__value-container {
+    padding: 0;
+  }
+
+  :global .hz-autocomplete-field__single-value {
+    color: c.$colorText;
+  }
+
+  :global .hz-autocomplete-field__indicator-separator {
+    display: none;
+  }
+
+  #{$select} {
+    cursor: pointer;
+    color: c.$colorText;
+    min-height: c.$inputHeight;
+    padding-left: c.$grid * 3;
+    padding-right: c.$grid * 2;
+    box-sizing: border-box;
+    border: c.$borderWidth solid c.$colorNeutralLight;
+    border-radius: c.$borderRadius;
+    background-color: c.$colorNeutralWhite;
+    transition: none;
+
+    &.hz-autocomplete-field__control--menu-is-open {
+      border-radius: c.$borderRadius c.$borderRadius 0 0;
+    }
+
+    .hz-autocomplete-field__dropdown-indicator {
+      color: c.$colorNeutralLight;
+      padding: 0 c.$grid * 0.5;
+    }
+  }
+
+  &.disabled {
+    #{$select} {
+      color: c.$colorTextSecondary;
+      background-color: c.$colorNeutral;
+      border-color: c.$colorNeutralLight;
+    }
+  }
+
+  &.hasError {
+    #{$select} {
+      border-color: c.$colorError;
+    }
+  }
+
+  // We target specifically #{$select} not to apply hover styles to the select when a helper icon is hovered
+  #{$select}:hover,
+  &.hover #{$select} {
+    border-color: c.$colorPrimary;
+    transition: none;
+  }
+
+  &.focus #{$select},
+  #{$select}.hz-autocomplete-field__control--is-focused {
+    @include h.outlineFormField;
+  }
+
+  .selectBlock {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    position: relative;
+  }
+}
+
+.menuContainer {
+  :global .hz-autocomplete-field__menu-portal {
+    z-index: c.$zIndex2000;
+  }
+
+  :global .hz-autocomplete-field__matched-option-text {
+    font-weight: bolder;
+    color: c.$colorText;
+  }
+
+  :global .hz-autocomplete-field__menu {
+    margin-top: 0;
+    margin-bottom: $menuMargin;
+    border: c.$borderWidth solid c.$colorNeutralLight;
+    border-radius: 0 0 c.$borderRadius c.$borderRadius;
+    background-color: c.$colorNeutralWhite;
+    overflow: hidden;
+    box-shadow: 0 c.$selectMenuShadowSize c.$selectMenuShadowBlur 0 c.$colorShadow;
+    z-index: c.$zIndex1000;
+
+    @include c.typographyBodySmall;
+
+    :global .hz-autocomplete-field__menu-list {
+      padding: 0;
+      color: c.$colorTextSecondary;
+    }
+
+    :global .hz-autocomplete-field__option,
+    :global .hz-autocomplete-field__menu-notice {
+      height: c.$grid * 8;
+      line-height: c.$grid * 8;
+      padding: 0 $selectHorizontalPadding;
+      background-color: transparent;
+
+      // Do not remove outline for high-contrast modes
+      // https://stackoverflow.com/a/52616313
+      outline: c.$outlineWidth solid transparent;
+      text-align: left;
+      white-space: pre;
+
+      &:global.hz-autocomplete-field__option--is-focused {
+        @include h.outlineSimple;
+      }
+
+      &:global.hz-autocomplete-field__option--is-selected {
+        color: c.$colorTextSecondary;
+        text-decoration: underline;
+      }
+    }
+  }
+}
+
+@include h.withError;

package/lib/components/AutocompleteFieldFormik.d.ts

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

package/lib/components/AutocompleteFieldFormik.js

@@ -0,0 +1,19 @@
+import React, { useCallback, useMemo } from 'react';
+import { useField } from 'formik';
+import { AutocompleteField } from './AutocompleteField';
+import { formikTouchAndUpdate, getFieldError } from '../utils/formik';
+export const AutocompleteFieldFormik = ({ name, validate, onChange, ...props }) => {
+    const [{ value, onBlur }, meta, { setValue, setTouched }] = useField({
+        name,
+        validate,
+    });
+    const setFormikValue = useMemo(() => formikTouchAndUpdate(setValue, setTouched), [setValue, setTouched]);
+    const handleChange = useCallback((newValue) => {
+        if (onChange) {
+            onChange(newValue);
+        }
+        setFormikValue(newValue);
+    }, [setFormikValue, onChange]);
+    return React.createElement(AutocompleteField, { ...props, value: value, onChange: handleChange, name: name, onBlur: onBlur, error: getFieldError(meta) });
+};
+//# sourceMappingURL=AutocompleteFieldFormik.js.map

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/components/Badge.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import cn from 'classnames';
+import { AlertTriangle, CheckCircle, AlertCircle, Info } from 'react-feather';
+import { Icon } from './Icon';
+import styles from './Badge.module.scss';
+export const BadgeIcon = {
+    neutral: {
+        icon: Info,
+        ariaLabel: 'Info circle icon',
+    },
+    success: {
+        icon: CheckCircle,
+        ariaLabel: 'Check circle icon',
+    },
+    warning: {
+        icon: AlertTriangle,
+        ariaLabel: 'Warning triangle icon',
+    },
+    info: {
+        icon: Info,
+        ariaLabel: 'Info circle icon',
+    },
+    critical: {
+        icon: AlertCircle,
+        ariaLabel: 'Info critical circle icon',
+    },
+};
+export const Badge = ({ type, content, size = 'normal', className }) => {
+    const { icon, ariaLabel } = BadgeIcon[type];
+    return (React.createElement("div", { "data-test": "badge-container", className: cn(styles.badge, {
+            // Colors
+            [styles.neutral]: type === 'neutral',
+            [styles.success]: type === 'success',
+            [styles.info]: type === 'info',
+            [styles.warning]: type === 'warning',
+            [styles.critical]: type === 'critical',
+            // Size
+            [styles.normal]: size === 'normal',
+            [styles.small]: size === 'small',
+        }, className) },
+        React.createElement(Icon, { "data-test": "badge-icon", ariaLabel: ariaLabel, icon: icon, className: styles.icon, size: size === 'normal' ? 'medium' : 'small' }),
+        React.createElement("div", { "data-test": "badge-content", className: styles.content }, content)));
+};
+//# sourceMappingURL=Badge.js.map

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/components/Badge.module.scss

@@ -0,0 +1,55 @@
+@use '../../styles/constants' as c;
+
+.badge {
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  border-radius: c.$borderRadiusBadge;
+
+  .content {
+    margin-left: c.$grid;
+  }
+
+  // Sizes
+  &.normal {
+    padding: c.$grid * 2 c.$grid * 3;
+
+    .content {
+      @include c.typographyBodyNormal;
+    }
+  }
+
+  &.small {
+    padding: c.$grid c.$grid * 2;
+
+    .content {
+      @include c.typographyBodySmall;
+    }
+  }
+
+  // Themes
+  &.neutral {
+    background-color: c.$colorNeutralLighter;
+    color: c.$colorText;
+  }
+
+  &.success {
+    background-color: c.$colorSuccess;
+    color: c.$colorNeutralWhite;
+  }
+
+  &.info {
+    background-color: c.$colorInfoLight;
+    color: c.$colorText;
+  }
+
+  &.warning {
+    background-color: c.$colorWarningLight;
+    color: c.$colorText;
+  }
+
+  &.critical {
+    background-color: c.$colorError;
+    color: c.$colorNeutralWhite;
+  }
+}