@a-little-world/little-world-design-system 2.10.0

package/dist/cjs/components/Modal/Modal.js

@@ -0,0 +1,95 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BACKDROP_LABEL = void 0;
+const react_1 = __importStar(require("react"));
+const react_dom_1 = require("react-dom");
+const Button_1 = require("../Button/Button");
+const Icon_1 = require("../Icon");
+const styles_1 = require("./styles");
+exports.BACKDROP_LABEL = 'dialog backdrop';
+const ROOT_LABEL = '#root';
+const CLOSE_BUTTON_LABEL = 'dialog close button';
+const Modal = ({ children, createInPortal = true, open, onClose, locked, parent, className, }) => {
+    const [active, setActive] = (0, react_1.useState)(false);
+    const backdrop = (0, react_1.useRef)(null);
+    const el = (0, react_1.useMemo)(() => document.createElement('div'), []);
+    (0, react_1.useEffect)(() => {
+        const target = parent?.appendChild ? parent : document.body;
+        target.appendChild(el);
+        return () => {
+            target.removeChild(el);
+        };
+    }, [el, parent, className]);
+    (0, react_1.useEffect)(() => {
+        const { current } = backdrop;
+        const transitionEnd = () => setActive(open);
+        const keyHandler = (e) => !locked && e.key === 'Escape' && onClose();
+        const clickHandler = (e) => !locked && e.target === current && onClose();
+        let openTimeout;
+        if (current) {
+            current.addEventListener('transitionend', transitionEnd);
+            current.addEventListener('click', clickHandler);
+            window.addEventListener('keyup', keyHandler);
+        }
+        if (open) {
+            openTimeout = window.setTimeout(() => {
+                (document?.activeElement).blur();
+                setActive(open);
+                document.body.style.overflow = 'hidden';
+                document.querySelector(ROOT_LABEL)?.setAttribute('inert', 'true');
+                current?.focus();
+            }, 10);
+        }
+        return () => {
+            if (current) {
+                current.removeEventListener('transitionend', transitionEnd);
+                current.removeEventListener('click', clickHandler);
+            }
+            clearTimeout(openTimeout);
+            document.querySelector(ROOT_LABEL)?.removeAttribute('inert');
+            document.body.style.overflow = 'unset';
+            window.removeEventListener('keyup', keyHandler);
+        };
+    }, [open, locked, onClose]);
+    const Backdrop = (react_1.default.createElement(styles_1.BackdropContainer, { "aria-modal": true, "aria-label": exports.BACKDROP_LABEL, ref: backdrop, "$active": active && open },
+        !locked && (react_1.default.createElement(styles_1.CloseButton, { variation: Button_1.ButtonVariations.Icon, onClick: onClose },
+            react_1.default.createElement(Icon_1.CloseIcon, { label: CLOSE_BUTTON_LABEL, height: "24", width: "24" }))),
+        children));
+    if (open)
+        return createInPortal ? (0, react_dom_1.createPortal)(Backdrop, el) : Backdrop;
+    return null;
+};
+exports.default = Modal;

package/dist/cjs/components/Modal/styles.d.ts

@@ -0,0 +1,4 @@
+export declare const BackdropContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").DialogHTMLAttributes<HTMLDialogElement>, HTMLDialogElement>, {
+    $active: boolean;
+}>> & string;
+export declare const CloseButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../Button/Button").ButtonProps, never>> & string & Omit<import("react").FC<import("../Button/Button").ButtonProps>, keyof import("react").Component<any, {}, any>>;

package/dist/cjs/components/Modal/styles.js

@@ -0,0 +1,102 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CloseButton = exports.BackdropContainer = void 0;
+const styled_components_1 = __importStar(require("styled-components"));
+const Button_1 = __importDefault(require("../Button/Button"));
+exports.BackdropContainer = styled_components_1.default.dialog `
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: unset;
+  height: unset;
+  margin: 0;
+  padding: ${({ theme }) => theme.spacing.small};
+  border: none;
+  background-color: rgba(51, 51, 51, 0.3);
+  backdrop-filter: blur(8px);
+  opacity: 0;
+  transition: all 100ms cubic-bezier(0.4, 0, 0.2, 1);
+  transition-delay: 200ms;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  overflow: auto;
+  overscroll-behavior: contain;
+
+  > div {
+    transform: translateY(100px);
+    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
+    opacity: 0;
+  }
+
+  ${({ $active }) => $active &&
+    (0, styled_components_1.css) `
+      transition-duration: 250ms;
+      transition-delay: 0ms;
+      opacity: 1;
+
+      > div {
+        transform: translateY(0);
+        opacity: 1;
+        transition-delay: 150ms;
+        transition-duration: 350ms;
+      }
+    `}
+
+  @media (min-width: ${({ theme }) => theme.breakpoints.medium}) {
+    padding: ${({ theme }) => theme.spacing.large};
+  }
+`;
+exports.CloseButton = (0, styled_components_1.default)(Button_1.default) `
+  position: absolute;
+  top: ${({ theme }) => theme.spacing.xsmall};
+  right: ${({ theme }) => theme.spacing.xsmall};
+  z-index: 2;
+  padding: 7px;
+  background: ${({ theme }) => theme.color.surface.secondary};
+  border-radius: ${({ theme }) => theme.radius.full};
+
+  @media (min-width: ${({ theme }) => theme.breakpoints.medium}) {
+    top: ${({ theme }) => theme.spacing.medium};
+    right: ${({ theme }) => theme.spacing.medium};
+  }
+`;

package/dist/cjs/components/MultiCheckbox/MultiCheckbox.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+type MultiCheckboxProps = {
+    heading?: string;
+    options: {
+        label: string;
+        value: string;
+    }[];
+    onSelection: (selected: string[]) => void;
+    preSelected?: string[];
+    error?: string;
+    name: string;
+    readOnly?: boolean;
+};
+declare const MultiCheckbox: React.FC<MultiCheckboxProps>;
+export default MultiCheckbox;

package/dist/cjs/components/MultiCheckbox/MultiCheckbox.js

@@ -0,0 +1,61 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const styled_components_1 = require("styled-components");
+const Checkbox_1 = require("../Checkbox/Checkbox");
+const InputError_1 = __importDefault(require("../InputError/InputError"));
+const Label_1 = __importDefault(require("../Label/Label"));
+const styles_1 = require("./styles");
+const MultiCheckbox = ({ error, heading, preSelected, onSelection, options, name, readOnly, }) => {
+    const theme = (0, styled_components_1.useTheme)();
+    const [selected, setSelected] = (0, react_1.useState)(preSelected || []);
+    const onSelect = ({ state, value, }) => {
+        const oldValues = selected || [];
+        const newValues = state
+            ? [...oldValues, value]
+            : oldValues.filter(el => el !== value);
+        setSelected(newValues);
+        onSelection(newValues);
+    };
+    return (react_1.default.createElement("div", null,
+        heading && react_1.default.createElement(Label_1.default, { bold: true }, heading),
+        react_1.default.createElement(styles_1.MultiCheckboxWrapper, null, options.map(({ value, label }) => (react_1.default.createElement(Checkbox_1.CheckboxButton, { key: label, error: error, label: label, name: name, checked: selected.includes(value), onCheckedChange: state => onSelect({ value, state }), color: theme.color.surface.selected, value: value, readOnly: readOnly })))),
+        react_1.default.createElement(InputError_1.default, { visible: Boolean(error), textAlign: "left" }, error)));
+};
+exports.default = MultiCheckbox;

package/dist/cjs/components/MultiCheckbox/styles.d.ts

@@ -0,0 +1 @@
+export declare const MultiCheckboxWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/cjs/components/MultiCheckbox/styles.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MultiCheckboxWrapper = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+exports.MultiCheckboxWrapper = styled_components_1.default.div `
+  width: 100%;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: ${({ theme }) => theme.spacing.xxsmall};
+  margin-bottom: ${({ theme }) => theme.spacing.xxsmall};
+`;

package/dist/cjs/components/MultiDropdown/MultiDropdown.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import { DropdownProps } from '../Dropdown/Dropdown';
+interface DropdownInstanceProps extends Omit<DropdownProps, 'onValueChange'> {
+    lockedValue?: string;
+    dataField: string;
+    values: string[];
+    ariaLabel: string;
+    errors: string[];
+}
+type Props = {
+    addMoreLabel: string;
+    error?: string;
+    label?: string;
+    labelTooltip?: string;
+    locked?: boolean;
+    defaultSegments?: number;
+    maxSegments?: number;
+    onValueChange: (value: {
+        [x: string]: string;
+    }[]) => void;
+    firstDropdown: DropdownInstanceProps;
+    secondDropdown: DropdownInstanceProps;
+    restrictions?: {
+        [key: string]: string[];
+    };
+};
+declare const MultiDropdown: React.FC<Props>;
+export default MultiDropdown;

package/dist/cjs/components/MultiDropdown/MultiDropdown.js

@@ -0,0 +1,124 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const lodash_1 = require("lodash");
+const react_1 = __importStar(require("react"));
+const Button_1 = __importStar(require("../Button/Button"));
+const Dropdown_1 = __importDefault(require("../Dropdown/Dropdown"));
+const Icon_1 = require("../Icon");
+const Label_1 = __importDefault(require("../Label/Label"));
+const Text_1 = __importDefault(require("../Text/Text"));
+const styles_1 = require("./styles");
+const styled_components_1 = require("styled-components");
+const DELETE_SEGMENT = 'delete segment';
+const formatValues = (values, firstDataField, secondDataField) => values[0].reduce((newValues, firstVal, index) => {
+    // only push the value if both values exist
+    if (firstVal && values[1][index]) {
+        newValues.push({
+            [firstDataField]: firstVal,
+            [secondDataField]: values[1][index],
+        });
+    }
+    return newValues;
+}, []);
+const setDropdownValues = (firstDropdown, secondDropdown) => {
+    const first = (firstDropdown.lockedValue
+        ? [firstDropdown.lockedValue, ...(firstDropdown.values.slice(1) || [])]
+        : firstDropdown.values) || [];
+    const second = (secondDropdown.lockedValue
+        ? [secondDropdown.lockedValue, ...(secondDropdown.values.slice(1) || [])]
+        : secondDropdown.values) || [];
+    return [first, second];
+};
+const MultiDropdown = ({ addMoreLabel = 'Add more rows', label, labelTooltip, locked, firstDropdown, secondDropdown, onValueChange, defaultSegments = 1, maxSegments = 4, restrictions, }) => {
+    const [segments, setSegments] = (0, react_1.useState)(Math.max(firstDropdown?.values?.length ?? 0, secondDropdown?.values?.length ?? 0, defaultSegments));
+    const [values, setValues] = (0, react_1.useState)(setDropdownValues(firstDropdown, secondDropdown));
+    const theme = (0, styled_components_1.useTheme)();
+    (0, react_1.useEffect)(() => {
+        setValues(setDropdownValues(firstDropdown, secondDropdown));
+        setSegments(Math.max(firstDropdown?.values?.length ?? 0, secondDropdown?.values?.length ?? 0, defaultSegments));
+    }, [firstDropdown?.values, secondDropdown?.values]);
+    const handleValueChange = (value, position, index) => {
+        setValues(values => {
+            const newValues = [...values];
+            newValues[position][index] = value;
+            if (values[position || 0])
+                onValueChange(formatValues(newValues, firstDropdown.dataField, secondDropdown.dataField));
+            return newValues;
+        });
+    };
+    const handleDelete = (index) => {
+        setValues(values => {
+            const newValues = [...values];
+            (newValues[0].splice(index, 1),
+                newValues[1].splice(index, 1),
+                onValueChange(formatValues(newValues, firstDropdown.dataField, secondDropdown.dataField)));
+            return newValues;
+        });
+        setSegments(currentNumber => currentNumber - 1);
+    };
+    return (react_1.default.createElement(styles_1.MultiDropdownWrapper, null,
+        label && (react_1.default.createElement(Label_1.default, { bold: true, htmlFor: firstDropdown.label, marginBottom: theme.spacing.xsmall, tooltipText: labelTooltip }, label)),
+        Array(segments)
+            .fill('')
+            .map((_, index) => {
+            const isFirstSegment = index === 0;
+            const firstSegmentLockedVal1 = isFirstSegment
+                ? firstDropdown.lockedValue
+                : undefined;
+            const firstSegmentLockedVal2 = isFirstSegment
+                ? secondDropdown.lockedValue
+                : undefined;
+            const deletable = !!index && !locked;
+            return (react_1.default.createElement(styles_1.Segment, { "$locked": locked, key: `MultiDropdown Segment ${index}${values[0][index]}${values[1][index]}` },
+                react_1.default.createElement(Dropdown_1.default, { ariaLabel: firstDropdown.ariaLabel + index, placeholder: firstDropdown.placeholder, onValueChange: val => handleValueChange(val, 0, index), options: firstDropdown.options, value: values[0][index], lockedValue: firstSegmentLockedVal1 ||
+                        (locked ? values[0][index] : undefined), required: Boolean(values[1][index]), error: firstDropdown.errors?.[index] }),
+                react_1.default.createElement(Dropdown_1.default, { ariaLabel: secondDropdown.ariaLabel + index, placeholder: secondDropdown.placeholder, onValueChange: val => handleValueChange(val, 1, index), options: (0, lodash_1.isEmpty)(restrictions?.[values[0][index]])
+                        ? secondDropdown.options
+                        : secondDropdown.options.filter(option => restrictions?.[values[0][index]]?.includes(option.value)), value: values[1][index], lockedValue: firstSegmentLockedVal2 ||
+                        (locked ? values[1][index] : undefined), required: Boolean(values[0][index]), error: secondDropdown.errors?.[index] }),
+                deletable && (react_1.default.createElement(styles_1.DeleteButton, { variation: Button_1.ButtonVariations.Icon, onClick: () => handleDelete(index), size: Button_1.ButtonSizes.Small },
+                    react_1.default.createElement(Icon_1.TrashIcon, { label: DELETE_SEGMENT, color: "orange" })))));
+        }),
+        !locked && (react_1.default.createElement(styles_1.AddMore, null,
+            react_1.default.createElement(styles_1.AddMoreButton, { variation: Button_1.ButtonVariations.Icon, disabled: segments === maxSegments, onClick: () => setSegments(currentNumber => currentNumber + 1), size: Button_1.ButtonSizes.Small },
+                react_1.default.createElement(Icon_1.PlusIcon, { label: "add more dropdowns", width: 10 })),
+            react_1.default.createElement(Button_1.default, { variation: Button_1.ButtonVariations.Inline, disabled: segments === maxSegments, onClick: () => setSegments(currentNumber => currentNumber + 1) },
+                react_1.default.createElement(Text_1.default, null, addMoreLabel))))));
+};
+exports.default = MultiDropdown;

package/dist/cjs/components/MultiDropdown/styles.d.ts

@@ -0,0 +1,7 @@
+export declare const MultiDropdownWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const AddMore: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const AddMoreButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../Button/Button").ButtonProps, never>> & string & Omit<import("react").FC<import("../Button/Button").ButtonProps>, keyof import("react").Component<any, {}, any>>;
+export declare const Segment: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {
+    $locked?: boolean;
+}>> & string;
+export declare const DeleteButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../Button/Button").ButtonProps, never>> & string & Omit<import("react").FC<import("../Button/Button").ButtonProps>, keyof import("react").Component<any, {}, any>>;

package/dist/cjs/components/MultiDropdown/styles.js

@@ -0,0 +1,44 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DeleteButton = exports.Segment = exports.AddMoreButton = exports.AddMore = exports.MultiDropdownWrapper = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+const Button_1 = __importDefault(require("../Button/Button"));
+const styles_1 = require("../Dropdown/styles");
+exports.MultiDropdownWrapper = styled_components_1.default.div ``;
+exports.AddMore = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  gap: ${({ theme }) => theme.spacing.xxsmall};
+`;
+exports.AddMoreButton = (0, styled_components_1.default)(Button_1.default) `
+  color: ${({ theme }) => theme.color.text.highlight};
+
+  &:disabled {
+    color: ${({ theme }) => theme.color.text.disabled};
+  }
+`;
+exports.Segment = styled_components_1.default.section `
+  display: grid;
+  max-width: calc(
+    ${styles_1.DROPDOWN_MAX_WIDTH} * 2 + ${({ theme }) => theme.spacing.small}
+  );
+  grid-template-columns: ${({ $locked, theme }) => $locked
+    ? 'repeat(2, minmax(0, 1fr))'
+    : `repeat(2, minmax(0, 1fr)) minmax(
+      ${theme.spacing.medium},
+      auto
+    )`};
+  align-items: start;
+  gap: ${({ theme }) => theme.spacing.small};
+  margin-bottom: ${({ theme }) => theme.spacing.xxsmall};
+`;
+exports.DeleteButton = (0, styled_components_1.default)(Button_1.default) `
+  top: ${({ theme }) => theme.spacing.xxsmall};
+  margin-left: calc(
+    ${({ theme }) => theme.spacing.xxsmall} -
+      ${({ theme }) => theme.spacing.small}
+  );
+`;

package/dist/cjs/components/MultiSelection/MultiSelection.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+type Props = {
+    error?: string;
+    id: string;
+    label: string;
+    labelTooltip?: string;
+    options: {
+        tag: string;
+        value: string;
+    }[];
+    preSelected?: string[];
+    onSelection: (selected: string[]) => void;
+    withBackground?: boolean;
+};
+declare const MultiSelection: React.FC<Props>;
+export default MultiSelection;

package/dist/cjs/components/MultiSelection/MultiSelection.js

@@ -0,0 +1,62 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const styles_1 = require("./styles");
+const Label_1 = __importDefault(require("../Label/Label"));
+const InputError_1 = __importDefault(require("../InputError/InputError"));
+const MultiSelection = ({ error, label, labelTooltip, id, options, preSelected = [], onSelection, withBackground = true, }) => {
+    const [selected, setSelected] = (0, react_1.useState)([]);
+    (0, react_1.useEffect)(() => {
+        setSelected(preSelected);
+    }, [JSON.stringify([preSelected])]);
+    const handleOnClick = (newSelection) => {
+        setSelected(newSelection);
+        onSelection(newSelection);
+    };
+    return (react_1.default.createElement(styles_1.MultiSelectionWrapper, null,
+        label && (react_1.default.createElement(Label_1.default, { bold: true, htmlFor: id, tooltipText: labelTooltip }, label)),
+        react_1.default.createElement(styles_1.Options, { "$hasError": Boolean(error), "$withBackground": withBackground }, options.map(option => {
+            const isSelected = selected?.some(el => el === option.value);
+            return (react_1.default.createElement(styles_1.Option, { key: option.value, "$selected": isSelected, "$withBackground": withBackground, onClick: () => handleOnClick(isSelected
+                    ? selected.filter(el => el !== option.value)
+                    : [...selected, option.value]), type: "button" }, option.tag));
+        })),
+        react_1.default.createElement(InputError_1.default, { visible: Boolean(error) }, error)));
+};
+exports.default = MultiSelection;

package/dist/cjs/components/MultiSelection/styles.d.ts

@@ -0,0 +1,9 @@
+export declare const MultiSelectionWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const Options: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $hasError: boolean;
+    $withBackground: boolean;
+}>> & string;
+export declare const Option: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
+    $selected: boolean;
+    $withBackground: boolean;
+}>> & string;