@scality/core-ui 0.115.0

package/dist/components/icon/Icon.component.js

@@ -0,0 +1,209 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState, } from 'react';
+import styled, { css } from 'styled-components';
+import { Loader } from '../loader/Loader.component';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { useQuery } from 'react-query';
+export const iconTable = {
+    Account: 'fas faWallet',
+    Backend: 'fas faNetworkWired',
+    Tape: 'fas faTape',
+    'Node-backend': 'fas faServer',
+    'Volume-backend': 'fas faHdd',
+    'Node-pdf': 'fas faDatabase',
+    'Volume-pdf': 'fas faCompactDisc',
+    Network: 'fas faProjectDiagram',
+    Bucket: 'fas faGlassWhiskey',
+    'Cloud-backend': 'fas faCloud',
+    Datacenter: 'fas faWarehouse',
+    'Simple-user': 'fas faUser',
+    User: 'fas faUserCog',
+    Group: 'fas faUsers',
+    Alert: 'fas faBell',
+    Bell: 'far faBell',
+    'Lat-menu': 'fas faBars',
+    Dashboard: 'fas faDesktop',
+    Workflow: 'fas faRoute',
+    Expiration: 'fas faStopwatch',
+    Replication: 'fas faCoins',
+    Transition: 'fas faRocket',
+    Discovery: 'fas faReply',
+    Metrics: 'fas faChartLine',
+    Edit: 'fas faEdit',
+    Logs: 'far faFileAlt',
+    Lock: 'fa faLock',
+    'Lock-open': 'fa faLockOpen',
+    'Create-add': 'fas faPlus',
+    Delete: 'fas faTrash',
+    Save: 'fas faSave',
+    'External-link': 'fas faExternalLinkAlt',
+    Link: 'fas faLink',
+    Unlink: 'fas faUnlink',
+    Close: 'fas faTimes',
+    'Dropdown-down': 'fas faCaretDown',
+    'Dropdown-up': 'fas faCaretUp',
+    Search: 'fas faSearch',
+    More: 'fas faEllipsisV',
+    Info: 'fas faQuestionCircle',
+    Sync: 'fas faSync',
+    Export: 'fas faFileExport',
+    Copy: 'far faClone',
+    'Simple-upload': 'fas faUpload',
+    Upload: 'fas faFileUpload',
+    'Add-plus': 'fas faPlusSquare',
+    Minus: 'fas faMinus',
+    'Remove-minus': 'fas faMinusSquare',
+    Sort: 'fas faSort',
+    'Sort-up': 'fas faSortUp',
+    'Sort-down': 'fas faSortDown',
+    Calendar: 'fas faCalendarWeek',
+    'Calendar-minus': 'fas faCalendarMinus',
+    'Arrow-up': 'fas faArrowUp',
+    'Arrow-down': 'fas faArrowDown',
+    'Arrow-right': 'fas faArrowRight',
+    'Arrow-left': 'fas faArrowLeft',
+    'Arrow-alt-circle-up': 'fas faArrowAltCircleUp',
+    Folder: 'far faFolder',
+    File: 'far faFile',
+    'File-invoice': 'fas faFileInvoice',
+    'Deletion-marker': 'fas faBan',
+    'Map-marker': 'fas faMapMarkerAlt',
+    Location: 'fas faMapMarkerAlt',
+    'Info-circle': 'fas faInfoCircle',
+    'Exclamation-triangle': 'fas faExclamationTriangle',
+    'Exclamation-circle': 'fas faExclamationCircle',
+    Exclamation: 'fas faExclamation',
+    Check: 'fas faCheck',
+    Protected: 'fas faShieldAlt',
+    'Chevron-left': 'fas faChevronLeft',
+    'Chevron-right': 'fas faChevronRight',
+    'Chevron-down': 'fas faChevronDown',
+    'Chevron-up': 'fas faChevronUp',
+    'Angle-right': 'fas faAngleRight',
+    'Angle-double-right': 'fas faAngleDoubleRight',
+    Language: 'fas faLanguage',
+    Theme: 'fas faPalette',
+    Documentation: 'fas faClipboardList',
+    Support: 'fas faComments',
+    EULA: 'fas faFileContract',
+    'Log-out': 'fas faSignOutAlt',
+    Hourglass: 'far faHourglass',
+    Pause: 'fas faPause',
+    'Pause-circle': 'far faPauseCircle',
+    'Play-circle': 'far faPlayCircle',
+    Upgrade: 'fas faLevelUpAlt',
+    Expansion: 'fas faExpandAlt',
+    Rebalance: 'fas faBalanceScale',
+    Maintenance: 'fas faHardHat',
+    Role: 'fas faHatCowboy',
+    'Change-erasure': 'fas faExchangeAlt',
+    'Circle-health': 'fas faCircle',
+    'Circle-empty': 'far faCircle',
+    'Dot-circle': 'fas faDotCircle',
+    'Check-circle': 'fas faCheckCircle',
+    'Times-circle': 'fas faTimesCircle',
+    Toolbox: 'fas faToolbox',
+    Cubes: 'fas faCubes',
+    'File-alt': 'fas faFilesAlt',
+    Policy: 'fas faFileSignature',
+    Pen: 'fa faPen',
+    Pencil: 'fas faPencilAlt',
+    Eye: 'fas faEye',
+    EyeSlash: 'fas faEyeSlash',
+    Snowflake: 'fas faSnowflake',
+    Key: 'fas faKey',
+    Filter: 'fas faFilter',
+    Download: 'fas faDownload',
+    Certificate: 'fas faCertificate',
+    Redo: 'fas faRedoAlt',
+    Eraser: 'fas faEraser',
+    'ID-card': 'fas faIdCard',
+    Setting: 'fas faCog', //TODO: Rename to Gear in FA v6 <i class="fa-sharp fa-solid fa-gear"></i>
+};
+const IconStyled = styled(FontAwesomeIcon) `
+  ${(props) => {
+    const theme = props.theme;
+    if (props.color && theme[props.color]) {
+        return css `
+        color: ${theme[props.color]};
+      `;
+    }
+}}
+`;
+const DelayedFallback = ({ children, ...rest }) => {
+    const [show, setShow] = useState(false);
+    useEffect(() => {
+        let timeout = setTimeout(() => setShow(true), 300);
+        return () => {
+            clearTimeout(timeout);
+        };
+    }, []);
+    return _jsx("i", { ...rest, children: show && children });
+};
+export const IconWrapper = styled.div `
+  ${(props) => {
+    const brand = props.theme;
+    return css `
+      color: ${brand.infoPrimary};
+      border: 1px solid ${brand.infoPrimary};
+      background: ${brand.backgroundLevel1};
+      ${props.size === 'lg'
+        ? `
+        width: 2.5rem;
+        height: 2.5rem;
+      `
+        : props.size === 'sm'
+            ? `
+        width: 1.75rem;
+        height: 1.75rem;
+      `
+            : props.size === 'xs'
+                ? `
+        width: 1.5rem;
+        height: 1.5rem;
+      `
+                : `
+        width: ${parseInt(props.size.replace('x', '')) * 2}rem;
+        height: ${parseInt(props.size.replace('x', '')) * 2}rem;
+      `}
+    `;
+}}
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 100%;
+`;
+function NonWrappedIcon({ name, size = '1x', color = undefined, ariaLabel = '', ...rest }) {
+    const iconInfo = iconTable[name];
+    if (!iconInfo)
+        throw new Error(`${name}: is not a valid icon.`);
+    const { data, status } = useQuery({
+        queryKey: ['icon', name],
+        queryFn: async () => {
+            const [iconType, iconClass] = iconInfo.split(' ');
+            try {
+                const fontAwesomeType = iconType === 'far'
+                    ? 'free-regular-svg-icons'
+                    : 'free-solid-svg-icons';
+                const icon = await import(`@fortawesome/${fontAwesomeType}/${iconClass}.js`);
+                return {
+                    default: ({ name, color, size, ariaLabel, ...rest }) => (_jsx(IconStyled, { color: color, icon: icon[iconClass], size: size, "aria-label": `${name} ${ariaLabel}`, ...rest })),
+                };
+            }
+            catch {
+                return {
+                    default: ({ name, ariaLabel }) => (_jsx(Loader, { size: "base", "aria-label": `${name} ${ariaLabel}` })),
+                };
+            }
+        },
+    });
+    return (_jsxs(_Fragment, { children: [(status === 'loading' || status === 'error') && (_jsx(DelayedFallback, { "aria-label": `${name} ${ariaLabel}`, children: _jsx(Loader, { size: "base" }) })), status === 'success' && (_jsx(data.default, { name: name, color: color, size: size, ariaLabel: ariaLabel, ...rest }))] }));
+}
+function Icon({ withWrapper, ...props }) {
+    if (withWrapper) {
+        return (_jsx(IconWrapper, { size: props.size || '1x', children: _jsx(NonWrappedIcon, { ...props }) }));
+    }
+    return _jsx(NonWrappedIcon, { ...props });
+}
+export { Icon };

package/dist/components/infomessage/InfoMessage.component.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+type Props = {
+    title: string | React.ReactNode;
+    content: React.ReactNode;
+    link?: string;
+};
+export declare const InfoMessage: ({ title, content, link }: Props) => JSX.Element;
+export {};
+//# sourceMappingURL=InfoMessage.component.d.ts.map

package/dist/components/infomessage/InfoMessage.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InfoMessage.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/infomessage/InfoMessage.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,KAAK,KAAK,GAAG;IACX,KAAK,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IAChC,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAYF,eAAO,MAAM,WAAW,6BAA8B,KAAK,gBAuB1D,CAAC"}

package/dist/components/infomessage/InfoMessage.component.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled, { useTheme } from 'styled-components';
+import { Stack } from '../../spacing';
+import { Icon } from '../icon/Icon.component';
+import { Link, Text } from '../text/Text.component';
+import { useComputeBackgroundColor } from './InfoMessageUtils';
+const InfoMessageContainer = styled.div `
+  background-color: ${(props) => props.theme.backgroundLevel2};
+  border-radius: 3px;
+  padding: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  color: white;
+`;
+export const InfoMessage = ({ title, content, link }) => {
+    const { containerRef, backgroundColor } = useComputeBackgroundColor();
+    const theme = useTheme();
+    return (_jsxs(InfoMessageContainer, { ref: containerRef, style: { backgroundColor: backgroundColor }, children: [_jsxs(Stack, { children: [_jsx(Icon, { name: "Info-circle", color: theme.infoPrimary, size: "lg" }), typeof title === 'string' ? _jsx(Text, { isEmphazed: true, children: title }) : title] }), _jsx(Text, { color: "textSecondary", isGentleEmphazed: true, children: content }), link && (_jsxs(Link, { href: link, target: "_blank", style: { alignSelf: 'flex-end' }, children: ["More infos ", _jsx(Icon, { name: "External-link" })] }))] }));
+};

package/dist/components/infomessage/InfoMessageUtils.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { DefaultTheme } from "styled-components";
+export declare const useComputeBackgroundColor: () => {
+    containerRef: import("react").MutableRefObject<HTMLDivElement | null>;
+    backgroundColor: string;
+};
+export declare const getBackgroundColor: (element: HTMLElement, theme: DefaultTheme) => any;
+//# sourceMappingURL=InfoMessageUtils.d.ts.map

package/dist/components/infomessage/InfoMessageUtils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InfoMessageUtils.d.ts","sourceRoot":"","sources":["../../../src/lib/components/infomessage/InfoMessageUtils.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAY,MAAM,mBAAmB,CAAC;AAI3D,eAAO,MAAM,yBAAyB;;;CAcnC,CAAC;AAEJ,eAAO,MAAM,kBAAkB,YAAa,WAAW,SAAS,YAAY,QAkBzE,CAAC"}

package/dist/components/infomessage/InfoMessageUtils.js

@@ -0,0 +1,32 @@
+import { useTheme } from "styled-components";
+import { hex2RGB } from "../../utils";
+import { useEffect, useRef, useState } from "react";
+export const useComputeBackgroundColor = () => {
+    const theme = useTheme();
+    const containerRef = useRef(null);
+    const [backgroundColor, setBackgroundColor] = useState('');
+    useEffect(() => {
+        containerRef.current &&
+            setBackgroundColor(getBackgroundColor(containerRef.current, theme));
+    }, [containerRef, theme]);
+    return {
+        containerRef,
+        backgroundColor,
+    };
+};
+export const getBackgroundColor = (element, theme) => {
+    if (element.parentElement) {
+        const parentElementBackgroundColor = window.getComputedStyle(element.parentElement)['background-color'];
+        if (/rgba\([0-9]+, [0-9]+, [0-9]+, 0\)/.test(parentElementBackgroundColor) || !window.getComputedStyle(element.parentElement)['background-color']) {
+            return getBackgroundColor(element.parentElement, theme);
+        }
+        else {
+            const rgbArray = hex2RGB(theme.backgroundLevel2);
+            if (`rgb(${rgbArray[0]}, ${rgbArray[1]}, ${rgbArray[2]})` ===
+                parentElementBackgroundColor) {
+                return theme.backgroundLevel3;
+            }
+        }
+    }
+    return theme.backgroundLevel2;
+};

package/dist/components/input/Input.component.d.ts

@@ -0,0 +1,24 @@
+import { ChangeEvent, HTMLAttributes, HTMLProps } from 'react';
+import { DebounceInputProps } from 'react-debounce-input';
+export type Item = {
+    label: string;
+    value: string | number;
+};
+type Items = Array<Item>;
+export type InputProps = {
+    value: any;
+    type?: string;
+    label?: string;
+    title?: string;
+    error?: string;
+    id?: string;
+    checked?: boolean;
+    onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+    options?: Items;
+    disabled?: boolean;
+    min?: string;
+    max?: string;
+} & HTMLProps<HTMLInputElement> & DebounceInputProps<HTMLInputElement, HTMLAttributes<HTMLInputElement>>;
+declare const Input: ({ label, id, error, type, disabled, ...rest }: InputProps) => JSX.Element;
+export { Input };
+//# sourceMappingURL=Input.component.d.ts.map

package/dist/components/input/Input.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/input/Input.component.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,SAAS,EAAU,MAAM,OAAO,CAAC;AACvE,OAAO,EAAiB,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAWzE,MAAM,MAAM,IAAI,GAAG;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB,CAAC;AACF,KAAK,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC;AACzB,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,EAAE,GAAG,CAAC;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACrD,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;CACd,GAAG,SAAS,CAAC,gBAAgB,CAAC,GAC7B,kBAAkB,CAAC,gBAAgB,EAAE,cAAc,CAAC,gBAAgB,CAAC,CAAC,CAAC;AAoHzE,QAAA,MAAM,KAAK,kDAAmD,UAAU,gBAuBvE,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,CAAC"}

package/dist/components/input/Input.component.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// @ts-nocheck
+import { useRef } from 'react';
+import { DebounceInput } from 'react-debounce-input';
+import { Checkbox } from '../checkbox/Checkbox.component';
+import { Icon } from '../icon/Icon.component';
+import { Select } from '../select/Select.component';
+import { TextArea } from '../textarea/TextArea.component';
+import { InputContainer, LabelStyle, InputErrorMessage, InputWrapper, } from './Input.component.style';
+const InputRenderer = ({ type, id, value, checked, onChange, options = [], min, max, ...rest }) => {
+    const inputEl = useRef(null);
+    const handleNumberClick = (e) => {
+        /*
+         ** Since react is using Synthetic event we have to do the following to be
+         ** able to programmatically dispatch the onChange event from the input
+         */
+        const valuePropDescriptor = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value');
+        if (valuePropDescriptor && inputEl.current) {
+            const nativeInputValueSetter = valuePropDescriptor.set;
+            if (nativeInputValueSetter) {
+                if (e.target.dataset.core === 'up')
+                    nativeInputValueSetter.call(inputEl.current, max
+                        ? max && parseInt(value) + 1 <= parseInt(max)
+                            ? parseInt(value) + 1
+                            : parseInt(value)
+                        : parseInt(value) + 1);
+                else
+                    nativeInputValueSetter.call(inputEl.current, min
+                        ? min && parseInt(value) - 1 >= parseInt(min)
+                            ? parseInt(value) - 1
+                            : parseInt(value)
+                        : parseInt(value) - 1);
+            }
+            const event = new Event('input', {
+                bubbles: true,
+            });
+            inputEl.current.dispatchEvent(event);
+        }
+    };
+    const input = {
+        select: (_jsx(Select, { id: id, value: value, onChange: onChange, options: options, ...rest })),
+        checkbox: (_jsx(Checkbox, { id: id, value: value, checked: !!checked, onChange: onChange, ...rest })),
+        textarea: _jsx(TextArea, { id: id, value: value, onChange: onChange, ...rest }),
+        number: (_jsxs("div", { className: "sc-number-input-wrapper", children: [_jsx("input", { className: "sc-input-type sc-number-input", type: "number", id: id, value: value, onChange: onChange, ref: inputEl, min: min, max: max, ...rest }), _jsxs("div", { className: "carets-wrapper", children: [_jsx(Icon, { name: "Dropdown-up", "data-core": "up", onClick: handleNumberClick }), _jsx(Icon, { name: "Dropdown-down", "data-core": "down", onClick: handleNumberClick })] })] })),
+        text: (_jsx(DebounceInput, { className: "sc-input-type", minLength: 1, debounceTimeout: 300, id: id, value: value, onChange: onChange, autoComplete: "off", ...rest })),
+    };
+    if (type)
+        return input[type];
+    else
+        return input.text;
+};
+const Input = ({ label, id, error, type, disabled, ...rest }) => {
+    return (_jsxs(InputContainer, { className: "sc-input", disabled: disabled, error: error, type: type, children: [label && (_jsx(LabelStyle, { htmlFor: id, className: "sc-input-label", children: label })), _jsxs(InputWrapper, { className: "sc-input-wrapper", children: [_jsx(InputRenderer, { id: id, type: type, disabled: disabled, ...rest }), error && (_jsx(InputErrorMessage, { className: "sc-input-error", children: error }))] })] }));
+};
+export { Input };

package/dist/components/input/Input.component.style.d.ts

@@ -0,0 +1,9 @@
+export declare const InputContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    disabled: boolean;
+    error: string;
+    type: string;
+}, never>;
+export declare const LabelStyle: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, {}, never>;
+export declare const InputErrorMessage: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
+export declare const InputWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+//# sourceMappingURL=Input.component.style.d.ts.map

package/dist/components/input/Input.component.style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.component.style.d.ts","sourceRoot":"","sources":["../../../src/lib/components/input/Input.component.style.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,cAAc;cACf,OAAO;WACV,MAAM;UACP,MAAM;SAsHb,CAAC;AACF,eAAO,MAAM,UAAU,2GAKtB,CAAC;AACF,eAAO,MAAM,iBAAiB,0GAI7B,CAAC;AACF,eAAO,MAAM,YAAY,yGAGxB,CAAC"}

package/dist/components/input/Input.component.style.js

@@ -0,0 +1,136 @@
+import styled, { css } from 'styled-components';
+import { spacing } from '../../spacing';
+import { fontSize } from '../../style/theme';
+import { getThemePropSelector } from '../../utils';
+export const InputContainer = styled.div `
+  display: inline-flex;
+  ${(props) => {
+    if (props.disabled) {
+        return css `
+        opacity: 0.3;
+        input,
+        textarea,
+        select,
+        i {
+          cursor: not-allowed;
+        }
+      `;
+    }
+}}
+  .sc-checkbox {
+    margin: ${spacing.r4} 0;
+  }
+
+  &.sc-select {
+    width: 200px;
+  }
+
+  input.sc-input-type {
+    ${(props) => {
+    const { backgroundLevel1, statusCritical, textSecondary, border } = props.theme;
+    return css `
+        background-color: ${backgroundLevel1};
+        color: ${textSecondary};
+        border: 1px solid ${props.error ? statusCritical : border};
+      `;
+}};
+    padding: 8px ${spacing.r8};
+    font-size: ${fontSize.base};
+    display: block;
+    border-radius: 4px;
+  }
+
+  input.sc-input-type:focus {
+    border-color: ${getThemePropSelector('selectedActive')};
+    outline: none;
+  }
+
+  input[type='number'] {
+    /* Adding a padding to make room for the custom absolute postionned arrows */
+    padding-right: 20px;
+    -moz-appearance: textfield; /*For FireFox*/
+
+    &::-webkit-inner-spin-button {
+      /*For Webkits like Chrome and Safari*/
+      -webkit-appearance: none;
+      margin: 0;
+    }
+  }
+
+  ${(props) => {
+    if (props.type === 'number')
+        return css `
+        .sc-input-wrapper {
+          .sc-number-input-wrapper {
+            position: relative;
+          }
+          align-items: baseline;
+          .carets-wrapper {
+            display: flex;
+            flex-direction: column;
+            ${(props) => {
+            const { textSecondary } = props.theme;
+            return css `
+                color: ${textSecondary};
+              `;
+        }};
+            position: absolute;
+            right: ${spacing.r4};
+            top: 50%;
+            transform: translate(-50%, -50%);
+
+            i {
+              font-size: 0.8em;
+              cursor: pointer;
+            }
+          }
+        }
+      `;
+}}
+
+  ${(props) => {
+    if (props.error) {
+        return css `
+        @keyframes shake {
+          from,
+          to {
+            transform: translate3d(0, 0, 0);
+          }
+
+          10%,
+          30%,
+          50%,
+          70%,
+          90% {
+            transform: translate3d(-5px, 0, 0);
+          }
+
+          20%,
+          40%,
+          60%,
+          80% {
+            transform: translate3d(5px, 0, 0);
+          }
+        }
+        animation-duration: 1s;
+        animation-fill-mode: both;
+        animation-name: shake;
+      `;
+    }
+}};
+`;
+export const LabelStyle = styled.label `
+  align-self: flex-start;
+  padding: ${spacing.r8};
+  font-size: ${fontSize.base};
+  color: ${getThemePropSelector('textPrimary')};
+`;
+export const InputErrorMessage = styled.span `
+  color: ${getThemePropSelector('statusCritical')};
+  margin: ${spacing.r4} 0;
+  font-size: ${fontSize.small};
+`;
+export const InputWrapper = styled.div `
+  display: flex;
+  flex-direction: column;
+`;

package/dist/components/inputlist/InputButtons.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import { CSSProperties } from 'styled-components';
+type AddButtonProps<T = unknown> = {
+    index: number;
+    items: Array<T>;
+    insertEntry: () => void;
+    disabled?: boolean;
+    iconStyle?: CSSProperties;
+};
+export declare const AddButton: ({ index, items, insertEntry, disabled, iconStyle, }: AddButtonProps) => JSX.Element;
+type SubButtonProps<T = unknown> = {
+    index: number;
+    items: Array<T>;
+    deleteEntry: (arg0: number) => void;
+    disabled?: boolean;
+    iconStyle?: CSSProperties;
+};
+export declare const SubButton: ({ index, items, deleteEntry, disabled, iconStyle, }: SubButtonProps) => JSX.Element;
+export {};
+//# sourceMappingURL=InputButtons.d.ts.map

package/dist/components/inputlist/InputButtons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputButtons.d.ts","sourceRoot":"","sources":["../../../src/lib/components/inputlist/InputButtons.tsx"],"names":[],"mappings":";AAAA,OAAe,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAgB1D,KAAK,cAAc,CAAC,CAAC,GAAG,OAAO,IAAI;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC;IAChB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,aAAa,CAAC;CAC3B,CAAC;AAEF,eAAO,MAAM,SAAS,wDAMnB,cAAc,gBA2ChB,CAAC;AACF,KAAK,cAAc,CAAC,CAAC,GAAG,OAAO,IAAI;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC;IAChB,WAAW,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,aAAa,CAAC;CAC3B,CAAC;AACF,eAAO,MAAM,SAAS,wDAMnB,cAAc,gBAuBhB,CAAC"}

package/dist/components/inputlist/InputButtons.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from 'styled-components';
+import { Button } from '../buttonv2/Buttonv2.component';
+import { useCallback, useMemo } from 'react';
+import { Box } from '../box/Box';
+import { Icon } from '../icon/Icon.component';
+const CustomButton = styled(Button) `
+  ${(props) => !props.isVisible
+    ? `
+        display: none;
+    `
+    : ''}
+`;
+const isEmptyItem = (item) => item.key === '' && item.value === '';
+export const AddButton = ({ index, items, insertEntry, disabled, iconStyle, }) => {
+    const itemsLength = items.length;
+    const itemsIndex = items[index];
+    const itemsIndexKey = items[index].key;
+    const itemsIndexValue = items[index].value;
+    const isDisabled = useMemo(() => {
+        if (itemsIndex && itemsIndexKey === '' && itemsIndexValue === '') {
+            return true;
+        }
+        return disabled || false;
+    }, [itemsIndex, itemsIndexKey, itemsIndexValue, disabled]);
+    const isVisible = useMemo(() => {
+        return !(itemsLength > 0 && index !== itemsLength - 1);
+    }, [itemsLength, index]);
+    const onClickFn = useCallback(() => {
+        if (!(itemsLength > 0 && index !== itemsLength - 1)) {
+            insertEntry();
+        }
+    }, [itemsLength, index, insertEntry]);
+    return (_jsxs(_Fragment, { children: [!isVisible && _jsx(Box, { ml: 16 }), _jsx(CustomButton, { isVisible: isVisible, type: "button", variant: "outline", disabled: isDisabled, name: `addbtn${index}`, id: `addbtn${index}`, onClick: onClickFn, "aria-label": `Add${index}`, tooltip: {
+                    overlay: 'Add',
+                    placement: 'top',
+                }, icon: _jsx(Icon, { name: "Add-plus" }) })] }));
+};
+export const SubButton = ({ index, items, deleteEntry, disabled, iconStyle, }) => {
+    let isDisabled = disabled || false;
+    if (items.length === 1 && isEmptyItem(items[0])) {
+        isDisabled = true;
+    }
+    return (_jsx(Button, { variant: "danger", type: "button", disabled: isDisabled, "aria-label": `Remove${index}`, name: `delbtn${index}`, id: `delbtn${index}`, onClick: () => deleteEntry(index), tooltip: {
+            overlay: 'Remove',
+            placement: 'top',
+        }, icon: _jsx(Icon, { name: "Remove-minus" }) }));
+};

package/dist/components/inputlist/InputList.component.d.ts

@@ -0,0 +1,27 @@
+import { HTMLProps } from 'react';
+import { RefCallBack } from 'react-hook-form';
+export type InputListProps<T> = Omit<HTMLProps<HTMLInputElement>, 'size'> & {
+    ref: RefCallBack;
+    min?: string | number;
+    max?: string | number;
+    maxLength?: number;
+    minLength?: number;
+    pattern?: string;
+    required?: boolean;
+    disabled?: boolean;
+    maxItems?: number;
+    value: T[];
+};
+export declare const InputList: import("react").ForwardRefExoticComponent<Omit<Omit<HTMLProps<HTMLInputElement>, "size"> & {
+    ref: RefCallBack;
+    min?: string | number | undefined;
+    max?: string | number | undefined;
+    maxLength?: number | undefined;
+    minLength?: number | undefined;
+    pattern?: string | undefined;
+    required?: boolean | undefined;
+    disabled?: boolean | undefined;
+    maxItems?: number | undefined;
+    value: (string | number | readonly string[] | undefined)[];
+}, "ref"> & import("react").RefAttributes<unknown>>;
+//# sourceMappingURL=InputList.component.d.ts.map

package/dist/components/inputlist/InputList.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputList.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/inputlist/InputList.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAc,MAAM,OAAO,CAAC;AAC9C,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAK9C,MAAM,MAAM,cAAc,CAAC,CAAC,IAAI,IAAI,CAAC,SAAS,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC,GAAG;IAC1E,GAAG,EAAE,WAAW,CAAC;IACjB,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,CAAC,EAAE,CAAC;CACZ,CAAC;AAgFF,eAAO,MAAM,SAAS;SA1Ff,WAAW;;;;;;;;;;mDA0FoC,CAAC"}

package/dist/components/inputlist/InputList.component.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { Box } from '../box/Box';
+import { Input } from '../inputv2/inputv2';
+import { AddButton, SubButton } from './InputButtons';
+function InternalInputList({ onChange, onBlur, min, max, maxLength, minLength, pattern, required, disabled, maxItems, value, name, ...rest }, _) {
+    const isMaxItemsReached = maxItems !== undefined && maxItems !== null && value.length === maxItems;
+    const insertEntry = () => {
+        if (!isMaxItemsReached) {
+            onChange === null || onChange === void 0 ? void 0 : onChange({
+                target: { value: [...(value !== null && value !== void 0 ? value : []), ''] },
+            });
+        }
+    };
+    const deleteEntry = (entryIndex) => {
+        const newValues = value.filter((_, index) => index !== entryIndex);
+        const updatedValues = newValues.length === 0 ? [''] : newValues;
+        onChange === null || onChange === void 0 ? void 0 : onChange({
+            target: { value: updatedValues },
+        });
+    };
+    return (_jsx(_Fragment, { children: value.map((val, index) => (_jsxs(Box, { display: "flex", gap: "0.25rem", alignItems: "center", children: [_jsx(Input, { id: `${name}[${index}]`, "aria-label": `${name}${index}`, size: "1/2", value: val, onChange: (evt) => {
+                        const tempValues = [...value];
+                        tempValues[index] = evt.target.value;
+                        onChange === null || onChange === void 0 ? void 0 : onChange({
+                            target: { value: tempValues },
+                        });
+                    }, ...rest }), _jsx(SubButton, { index: index, deleteEntry: deleteEntry, items: value, disabled: value.length === 1 && value[0] === '' }, `${name}-delete-${value.join(',') + index}`), _jsx(AddButton, { index: index, insertEntry: insertEntry, items: value, disabled: val === '' || isMaxItemsReached }, `${name}-add-${value.join(',') + index}`)] }, index))) }));
+}
+export const InputList = forwardRef(InternalInputList);