@scality/core-ui 0.115.0

package/dist/components/notifications/Notifications.component.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { Props as NotificationProps } from './Notification.component';
+export declare const TOP_LEFT = "tl";
+export declare const TOP_RIGHT = "tr";
+export declare const BOTTOM_LEFT = "bl";
+export declare const BOTTOM_RIGHT = "br";
+type Position = typeof TOP_LEFT | typeof TOP_RIGHT | typeof BOTTOM_LEFT | typeof BOTTOM_RIGHT;
+type Props = {
+    position?: Position;
+    notifications: Array<NotificationProps>;
+    onDismiss: (arg0: string) => void;
+};
+declare function Notifications({ position, notifications, onDismiss, ...rest }: Props): JSX.Element;
+export { Notifications };
+//# sourceMappingURL=Notifications.component.d.ts.map

package/dist/components/notifications/Notifications.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Notifications.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/notifications/Notifications.component.tsx"],"names":[],"mappings":";AAGA,OAAO,EAEL,KAAK,IAAI,iBAAiB,EAC3B,MAAM,0BAA0B,CAAC;AAClC,eAAO,MAAM,QAAQ,OAAO,CAAC;AAC7B,eAAO,MAAM,SAAS,OAAO,CAAC;AAC9B,eAAO,MAAM,WAAW,OAAO,CAAC;AAChC,eAAO,MAAM,YAAY,OAAO,CAAC;AACjC,KAAK,QAAQ,GACT,OAAO,QAAQ,GACf,OAAO,SAAS,GAChB,OAAO,WAAW,GAClB,OAAO,YAAY,CAAC;AACxB,KAAK,KAAK,GAAG;IACX,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,aAAa,EAAE,KAAK,CAAC,iBAAiB,CAAC,CAAC;IACxC,SAAS,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC,CAAC;AAkCF,iBAAS,aAAa,CAAC,EAAE,QAAQ,EAAE,aAAa,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,eAgB5E;AAED,OAAO,EAAE,aAAa,EAAE,CAAC"}

package/dist/components/notifications/Notifications.component.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled, { css } from 'styled-components';
+import { spacing } from '../../spacing';
+import { zIndex } from '../../style/theme';
+import { Notification, } from './Notification.component';
+export const TOP_LEFT = 'tl';
+export const TOP_RIGHT = 'tr';
+export const BOTTOM_LEFT = 'bl';
+export const BOTTOM_RIGHT = 'br';
+const NotificationsContainer = styled.div `
+  position: fixed;
+  z-index: ${zIndex.notification};
+  margin: ${spacing.r24};
+  ${(props) => {
+    switch (props.position) {
+        case TOP_LEFT:
+            return css `
+          top: 0;
+          left: 0;
+        `;
+        case BOTTOM_RIGHT:
+            return css `
+          bottom: 0;
+          right: 0;
+        `;
+        case BOTTOM_LEFT:
+            return css `
+          bottom: 0;
+          left: 0;
+        `;
+        default:
+            return css `
+          top: 0;
+          right: 0;
+        `;
+    }
+}};
+`;
+function Notifications({ position, notifications, onDismiss, ...rest }) {
+    return (_jsx(NotificationsContainer, { className: "sc-notifications", position: position, ...rest, children: notifications.map((notification) => (_jsx(Notification, { ...notification, onDismiss: onDismiss }, notification.uid))) }));
+}
+export { Notifications };

package/dist/components/prettybytes/PrettyBytes.component.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+type Props = {
+    bytes?: number | null;
+    decimals?: number | null;
+    unit?: 'iB' | 'B';
+};
+declare function PrettyBytes({ bytes, decimals, unit }: Props): JSX.Element;
+export { PrettyBytes };
+//# sourceMappingURL=PrettyBytes.component.d.ts.map

package/dist/components/prettybytes/PrettyBytes.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PrettyBytes.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/prettybytes/PrettyBytes.component.tsx"],"names":[],"mappings":";AACA,KAAK,KAAK,GAAG;IACX,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,IAAI,CAAC,EAAE,IAAI,GAAG,GAAG,CAAC;CACnB,CAAC;AAEF,iBAAS,WAAW,CAAC,EAAE,KAAK,EAAE,QAAY,EAAE,IAAW,EAAE,EAAE,KAAK,eA6B/D;AAED,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/components/prettybytes/PrettyBytes.component.js

@@ -0,0 +1,24 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import prettyBytes from 'pretty-bytes';
+function PrettyBytes({ bytes, decimals = 0, unit = 'iB' }) {
+    if (bytes === undefined || bytes === null)
+        return _jsx(_Fragment, { children: "-" });
+    let fractionDigits = decimals;
+    if (!Number.isFinite(decimals) ||
+        (decimals !== undefined && decimals !== null && decimals < 0) ||
+        bytes < 1024)
+        fractionDigits = 0;
+    if (!Number.isFinite(bytes) || !bytes || bytes < 0)
+        return bytes === Infinity ||
+            bytes === -Infinity ||
+            (bytes === 0 && !Object.is(bytes, -0)) ? (_jsx(_Fragment, { children: "0 B" })) : (_jsx(_Fragment, { children: "-" }));
+    return (_jsx(_Fragment, { children: prettyBytes(bytes, {
+            locale: 'en',
+            binary: unit === 'iB',
+            minimumFractionDigits: fractionDigits !== null && fractionDigits !== void 0 ? fractionDigits : undefined,
+            maximumFractionDigits: fractionDigits !== null && fractionDigits !== void 0 ? fractionDigits : undefined,
+        })
+            .replace(/,/g, ' ')
+            .replace(/kiB/g, 'KiB') }));
+}
+export { PrettyBytes };

package/dist/components/progressbar/ProgressBar.component.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import { Size } from '../constants';
+export type ProgressBarProps = {
+    percentage: number;
+    size?: Size | 'custom';
+    color?: string;
+    backgroundColor?: string;
+    topLeftLabel?: string;
+    topRightLabel?: string;
+    bottomLeftLabel?: string;
+    bottomRightLabel?: string;
+    buildinLabel?: string;
+    isAnimation?: boolean;
+    height?: React.CSSProperties['height'];
+};
+declare function ProgressBar({ percentage, size, color, backgroundColor, topLeftLabel, topRightLabel, bottomLeftLabel, bottomRightLabel, buildinLabel, isAnimation, height, ...rest }: ProgressBarProps): JSX.Element;
+export { ProgressBar };
+//# sourceMappingURL=ProgressBar.component.d.ts.map

package/dist/components/progressbar/ProgressBar.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBar.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/progressbar/ProgressBar.component.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACpC,MAAM,MAAM,gBAAgB,GAAG;IAC7B,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,QAAQ,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;CACxC,CAAC;AAiIF,iBAAS,WAAW,CAAC,EACnB,UAAe,EACf,IAAa,EACb,KAAK,EACL,eAAe,EACf,YAAY,EACZ,aAAa,EACb,eAAe,EACf,gBAAgB,EAChB,YAAY,EACZ,WAAmB,EACnB,MAAM,EACN,GAAG,IAAI,EACR,EAAE,gBAAgB,eAqDlB;AAED,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/components/progressbar/ProgressBar.component.js

@@ -0,0 +1,129 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled, { css, useTheme } from 'styled-components';
+import { spacing } from '../../spacing';
+import { fontSize, fontWeight } from '../../style/theme';
+import { getThemePropSelector } from '../../utils';
+const Container = styled.div ``;
+const ProgressBarContainer = styled.div `
+  display: flex;
+  border-radius: 4px;
+  justify-content: space-between;
+  align-items: center;
+
+  ${(props) => {
+    switch (props.size) {
+        case 'smaller':
+            return css `
+          height: ${fontSize.smaller};
+          font-size: ${fontSize.smaller};
+        `;
+        case 'base':
+            return css `
+          height: ${fontSize.small};
+          font-size: ${fontSize.small};
+        `;
+        case 'large':
+            return css `
+          height: ${fontSize.base};
+          font-size: ${fontSize.base};
+        `;
+        case 'larger':
+            return css `
+          height: 20px;
+        `;
+        case 'custom':
+            return css `
+          height: ${props.height};
+          font-size: ${props.height};
+        `;
+        default:
+            return css `
+          height: ${fontSize.base};
+          font-size: ${fontSize.base};
+        `;
+    }
+}};
+
+  background-color: ${(props) => {
+    return props.backgroundColor;
+}};
+  /* Add the border for the progress bar when there is label inside.*/
+  ${(props) => {
+    if (props.buildinLabel) {
+        return css `
+        border: 1px solid;
+        border-color: ${getThemePropSelector('border')};
+      `;
+    }
+}};
+`;
+const TopLeftLabel = styled.span `
+  display: inline-block;
+  font-size: ${fontSize.large};
+  font-weight: ${fontWeight.bold};
+  color: ${getThemePropSelector('textPrimary')};
+`;
+const TopRightLabel = styled.span `
+  display: inline-block;
+  font-size: ${fontSize.small};
+  color: ${getThemePropSelector('textPrimary')};
+`;
+const BottomLabel = styled.span `
+  display: inline-block;
+  color: ${getThemePropSelector('textSecondary')};
+`;
+const TopLabelsContainer = styled.div `
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 0 0 ${spacing.r4} 0;
+`;
+const BottomLabelsContainer = styled(TopLabelsContainer) `
+  margin: ${spacing.r4} 0 0 0;
+  font-size: ${fontSize.smaller};
+`;
+const FilledAreaContainer = styled.div `
+  display: flex;
+  justify-content: flex-start;
+  border-radius: 4px;
+  height: 100%;
+  ${(props) => {
+    if (props.isAnimation) {
+        return css `
+      @keyframes widthAnimation {
+        from {
+          width: 0%;
+        }
+        to {
+          width: ${props.width} + "%";
+        }
+      }
+      animation-duration: 1s;
+      animation-fill-mode: both;
+      animation-name: widthAnimation;
+
+      background-color: ${props.color || props.theme.selectedActive}
+      width: ${props.width}%;
+    `;
+    }
+    else {
+        return css `
+        background-color: ${props.color || props.theme.selectedActive};
+        width: ${props.width}%;
+      `;
+    }
+}}
+`;
+const BuildinLabel = styled.div `
+  color: ${getThemePropSelector('textPrimary')};
+  padding-left: 5px;
+  white-space: nowrap;
+`;
+function ProgressBar({ percentage = 50, size = 'base', color, backgroundColor, topLeftLabel, topRightLabel, bottomLeftLabel, bottomRightLabel, buildinLabel, isAnimation = false, height, ...rest }) {
+    const theme = useTheme();
+    if (!backgroundColor) {
+        backgroundColor = theme.backgroundLevel2;
+    }
+    return (_jsxs(Container, { className: "sc-progressbar", ...rest, children: [(topLeftLabel || topRightLabel) && (_jsxs(TopLabelsContainer, { children: [topLeftLabel && (_jsx(TopLeftLabel, { className: "sc-progressbar-topLeftLabel", children: topLeftLabel })), topRightLabel && (_jsx(TopRightLabel, { className: "sc-progressbar-toprightlabel", children: topRightLabel }))] })), _jsx(ProgressBarContainer, { className: "sc-progressbarcontainer", size: size, buildinLabel: buildinLabel, backgroundColor: backgroundColor, height: height, children: _jsx(FilledAreaContainer, { color: color, width: percentage, isAnimation: isAnimation, children: _jsx(BuildinLabel, { children: buildinLabel }) }) }), (bottomLeftLabel || bottomRightLabel) && (_jsxs(BottomLabelsContainer, { children: [bottomLeftLabel && (_jsx(BottomLabel, { className: "sc-progressbar-bottomleftlabel", children: bottomLeftLabel })), bottomRightLabel && (_jsx(BottomLabel, { className: "sc-progressbar-bottomrightlabel", children: bottomRightLabel }))] }))] }));
+}
+export { ProgressBar };

package/dist/components/scrollbarwrapper/ScrollbarWrapper.component.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+type Props = {
+    children: React.ReactNode;
+};
+declare function ScrollbarWrapper({ children }: Props): JSX.Element;
+export { ScrollbarWrapper };
+//# sourceMappingURL=ScrollbarWrapper.component.d.ts.map

package/dist/components/scrollbarwrapper/ScrollbarWrapper.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollbarWrapper.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/scrollbarwrapper/ScrollbarWrapper.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,KAAK,KAAK,GAAG;IACX,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAmDF,iBAAS,gBAAgB,CAAC,EAAE,QAAQ,EAAE,EAAE,KAAK,eAO5C;AAED,OAAO,EAAE,gBAAgB,EAAE,CAAC"}

package/dist/components/scrollbarwrapper/ScrollbarWrapper.component.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { createGlobalStyle, css } from 'styled-components';
+const GlobalStyle = createGlobalStyle `
+${(props) => {
+    const brand = props.theme;
+    return css `
+    // Custom scrollbar
+    * {
+      // Chrome / Safari / Edge
+      ::-webkit-scrollbar {
+        width: 8px;
+        height: 8px;
+      }
+
+      ::-webkit-scrollbar-track {
+        background: ${brand.backgroundLevel3};
+      }
+
+      ::-webkit-scrollbar-thumb {
+        width: 4px;
+        height: 4px;
+        min-height: 20px;
+        background: ${brand.buttonSecondary};
+        border-radius: 4px;
+        -webkit-border-radius: 4px;
+        background-clip: padding-box;
+        border: 2px solid rgba(0, 0, 0, 0);
+      }
+
+      ::-webkit-scrollbar-thumb:vertical:hover,
+      ::-webkit-scrollbar-thumb:horizontal:hover {
+        background-color: rgba(89, 90, 120, 0.5);
+      }
+
+      ::-webkit-scrollbar-button {
+        width: 0;
+        height: 0;
+        display: none;
+      }
+      ::-webkit-scrollbar-corner {
+        background-color: transparent;
+      }
+
+      // Firefox
+      scrollbar-color: ${brand.buttonSecondary} ${brand.backgroundLevel3};
+      scrollbar-width: thin;
+    }
+  `;
+}}
+`;
+function ScrollbarWrapper({ children }) {
+    return (_jsxs(_Fragment, { children: [_jsx(GlobalStyle, {}), children] }));
+}
+export { ScrollbarWrapper };

package/dist/components/searchinput/SearchInput.component.d.ts

@@ -0,0 +1,12 @@
+import { ChangeEvent } from 'react';
+export type Props = {
+    placeholder?: string;
+    value: string;
+    onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+    onReset?: () => void;
+    disableToggle: boolean;
+    disabled?: boolean;
+};
+declare const SearchInput: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<unknown>>;
+export { SearchInput };
+//# sourceMappingURL=SearchInput.component.d.ts.map

package/dist/components/searchinput/SearchInput.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchInput.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/searchinput/SearchInput.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAgC,MAAM,OAAO,CAAC;AAMlE,MAAM,MAAM,KAAK,GAAG;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACrD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,aAAa,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AA6DF,QAAA,MAAM,WAAW,2FAqEhB,CAAC;AAEF,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/components/searchinput/SearchInput.component.js

@@ -0,0 +1,91 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useRef, useState } from 'react';
+import styled, { css } from 'styled-components';
+import { fontSize } from '../../style/theme';
+import { getThemePropSelector } from '../../utils';
+import { Icon } from '../icon/Icon.component';
+import { Input } from '../input/Input.component';
+const SearchInputContainer = styled.div `
+  position: relative;
+
+  ${(props) => {
+    if (props.disabled) {
+        return css `
+        i {
+          opacity: 0.3;
+          cursor: not-allowed;
+        }
+      `;
+    }
+}}
+
+  .sc-input {
+    display: block;
+    input[type='text'] {
+      width: ${(props) => (props.docked ? '40px' : '100%')};
+      box-sizing: border-box;
+      padding-left: ${(props) => (props.docked ? '28px' : '40px')};
+      transition: width 0.2s ease-in-out;
+    }
+  }
+`;
+const IconButton = styled.button `
+  position: absolute;
+  border: none;
+  outline: none;
+  top: 1px;
+  padding: 8px 12px;
+  border-radius: 5px;
+  font-size: ${fontSize.base};
+  color: ${getThemePropSelector('textSecondary')};
+  background-color: transparent;
+  ${(props) => {
+    // TODO
+    return (!props.disabled &&
+        css `
+        cursor: pointer;
+        &:hover {
+          color: ${getThemePropSelector('selectedActive')};
+        }
+      `);
+}};
+`;
+const SearchIcon = styled(IconButton) `
+  left: 1px;
+`;
+const ResetIcon = styled(IconButton) `
+  right: 1px;
+  visibility: ${(props) => (props.visible ? 'visible' : 'hidden')};
+  opacity: ${(props) => (props.visible ? 1 : 0)};
+  transition: opacity 0.5s ease-in-out;
+`;
+const SearchInput = forwardRef(({ disableToggle, placeholder, value, onChange, onReset, disabled, ...rest }, forwardedRef) => {
+    const [docked, setDocked] = useState(!disableToggle);
+    const myInputRef = useRef(null);
+    const toggle = () => {
+        if (!disableToggle) {
+            setDocked(!docked);
+            if (myInputRef.current) {
+                myInputRef.current.focus();
+            }
+        }
+    };
+    const reset = () => {
+        if (onReset) {
+            onReset();
+        }
+        if (!disableToggle) {
+            setDocked(true);
+        }
+    };
+    return (_jsxs(SearchInputContainer, { className: "sc-searchinput", disabled: disabled, docked: docked, ...rest, children: [_jsx(Input, { min: '1', type: "text", "aria-label": "search", name: "search", placeholder: placeholder, value: value, onChange: onChange, disabled: disabled, inputRef: (element) => {
+                    myInputRef.current = element;
+                    if (typeof forwardedRef === 'function') {
+                        forwardedRef(element);
+                    }
+                    else if (forwardedRef) {
+                        forwardedRef.current = element;
+                    }
+                } }), _jsx(SearchIcon, { onClick: toggle, disabled: !docked, children: _jsx(Icon, { name: "Search" }) }), _jsx(ResetIcon, { onClick: reset, visible: !!value && !docked && !!onReset, children: _jsx(Icon, { name: "Times-circle" }) })] }));
+});
+export { SearchInput };

package/dist/components/select/Select.component.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+export type Item = {
+    label: string;
+    value: string | number;
+};
+type Items = Array<Item>;
+type Props = {
+    id?: any;
+    options: Items;
+    formatOptionLabel?: (arg0: any) => JSX.Element;
+};
+declare function SelectBox({ options, formatOptionLabel, ...rest }: Props): JSX.Element;
+export declare const Select: typeof SelectBox;
+export {};
+//# sourceMappingURL=Select.component.d.ts.map

package/dist/components/select/Select.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/select/Select.component.tsx"],"names":[],"mappings":";AAKA,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,KAAK,KAAK,GAAG;IACX,EAAE,CAAC,EAAE,GAAG,CAAC;IACT,OAAO,EAAE,KAAK,CAAC;IACf,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,GAAG,CAAC,OAAO,CAAC;CAChD,CAAC;AAqEF,iBAAS,SAAS,CAAC,EAAE,OAAO,EAAE,iBAAiB,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,eAYhE;AAED,eAAO,MAAM,MAAM,kBAAY,CAAC"}

package/dist/components/select/Select.component.js

@@ -0,0 +1,71 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import ReactSelect from 'react-select';
+import styled from 'styled-components';
+import { fontSize, fontWeight, gray, zIndex } from '../../style/theme';
+import { getThemePropSelector } from '../../utils';
+const SelectContainer = styled.div `
+  font-size: ${fontSize.base};
+  .sc-select__control {
+    background-color: ${getThemePropSelector('backgroundLevel1')};
+    border-radius: 4px;
+    border: 1px solid ${getThemePropSelector('border')};
+    height: auto;
+
+    .sc-select__placeholder,
+    .sc-select__single-value {
+      color: ${getThemePropSelector('textSecondary')};
+    }
+    &.sc-select__control--is-focused {
+      border-color: ${getThemePropSelector('selectedActive')};
+      box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
+        0 0 0 1px rgba(0, 126, 255, 0.1);
+      outline: none;
+    }
+    .sc-select__indicator {
+      color: ${getThemePropSelector('textSecondary')};
+      &.sc-select__dropdown-indicator:hover {
+        color: ${getThemePropSelector('selectedActive')};
+      }
+      &.sc-select__clear-indicator:hover {
+        color: ${gray};
+      }
+    }
+    .sc-select__multi-value__remove {
+      border-radius: 0;
+      color: ${getThemePropSelector('textSecondary')};
+      background-color: ${getThemePropSelector('backgroundLevel4')};
+      &:hover {
+        color: ${gray};
+      }
+    }
+    .sc-select__multi-value__label {
+      border-radius: 0;
+      color: ${getThemePropSelector('selectedActive')};
+      background-color: ${getThemePropSelector('backgroundLevel4')};
+      vertical-align: initial;
+    }
+  }
+  .sc-select__menu {
+    background-color: ${getThemePropSelector('backgroundLevel1')};
+    color: ${getThemePropSelector('textSecondary')};
+    border: 1px solid ${getThemePropSelector('selectedActive')};
+    box-sizing: border-box;
+    overflow: hidden;
+    z-index: ${zIndex.dropdown};
+    .sc-select__option {
+      &.sc-select__option--is-focused {
+        background-color: ${getThemePropSelector('backgroundLevel1')};
+      }
+      &.sc-select__option--is-selected {
+        background-color: ${getThemePropSelector('backgroundLevel1')};
+        color: ${getThemePropSelector('selectedActive')};
+        font-weight: ${fontWeight.bold};
+      }
+    }
+  }
+`;
+const defaultFormatOptionLabel = ({ label, ...rest }) => (_jsx("div", { className: "sc-select-option-label", ...rest, children: label }));
+function SelectBox({ options, formatOptionLabel, ...rest }) {
+    return (_jsx(SelectContainer, { className: "sc-select-container", children: _jsx(ReactSelect, { className: "sc-select", classNamePrefix: "sc-select", options: options, formatOptionLabel: formatOptionLabel || defaultFormatOptionLabel, ...rest }) }));
+}
+export const Select = SelectBox;

package/dist/components/selectv2/SelectStyle.d.ts

@@ -0,0 +1,3 @@
+declare const SelectStyle: import("styled-components").StyledComponent<any, import("styled-components").DefaultTheme, any, any>;
+export { SelectStyle };
+//# sourceMappingURL=SelectStyle.d.ts.map

package/dist/components/selectv2/SelectStyle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectStyle.d.ts","sourceRoot":"","sources":["../../../src/lib/components/selectv2/SelectStyle.ts"],"names":[],"mappings":"AAMA,QAAA,MAAM,WAAW,sGAmQhB,CAAC;AACF,OAAO,EAAE,WAAW,EAAE,CAAC"}