@steroidsjs/bootstrap 3.0.0-beta.6 → 3.0.0-beta.61

package/form/SwitcherField/SwitcherFieldView.js

@@ -33,18 +33,23 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 exports.__esModule = true;
 var React = __importStar(require("react"));
-var get_1 = __importDefault(require("lodash-es/get"));
-var Button_1 = __importDefault(require("@steroidsjs/core/ui/form/Button"));
 var hooks_1 = require("@steroidsjs/core/hooks");
 function SwitcherFieldView(props) {
     var bem = (0, hooks_1.useBem)('SwitcherFieldView');
-    return (React.createElement("div", { className: bem(bem.block({
+    var prefix = (0, hooks_1.useUniqueId)('switcher');
+    var renderLabel = React.useCallback(function (item) {
+        if (typeof item.label === 'object') {
+            return props.selectedIds.includes(item.id) ? item.label.checked : item.label.unchecked;
+        }
+        return item.label;
+    }, [props.selectedIds]);
+    return (React.createElement("div", { className: bem(bem.block(), props.className), style: props.style }, props.items.map(function (switcher, switcherIndex) { return (React.createElement("label", { key: switcherIndex, className: bem.element('switcher', {
             size: props.size
-        }), props.className, 'btn-group') }, props.items.map(function (item) { return (React.createElement(Button_1["default"], __assign({ key: String(item[props.primaryKey]) }, props.buttonProps, { className: bem((0, get_1["default"])(props, 'buttonProps.className'), props.hoveredId === item[props.primaryKey] && 'hover', props.selectedIds.includes(item[props.primaryKey]) && 'active'), disabled: props.disabled, onClick: function () { return props.onItemSelect(item[props.primaryKey]); }, onMouseOver: function () { return props.onItemHover(item[props.primaryKey]); }, layout: false }), item.label)); })));
+        }), htmlFor: "".concat(prefix, "_").concat(switcher.id) },
+        React.createElement("input", __assign({}, props.inputProps, { id: "".concat(prefix, "_").concat(switcher.id), onChange: function () { return props.onItemSelect(switcher.id); }, checked: props.selectedIds.includes(switcher.id), className: bem.element('input') })),
+        React.createElement("span", { className: bem.element('slider') }),
+        React.createElement("span", { className: bem.element('label') }, renderLabel(switcher)))); })));
 }
 exports["default"] = SwitcherFieldView;

package/form/SwitcherField/SwitcherFieldView.scss

@@ -1,2 +1,189 @@
+:root {
+    --switcher-dot-disabled-color: #dbe2e6;
+    --switcher-slider-disabled-color: #f1f5f7;
+}
+
+html[data-theme="dark"] {
+    --switcher-dot-disabled-color: #4e4f57;
+    --switcher-slider-disabled-color: #5b5c6b;
+}
+
+$switcher-dot-disabled-color: var(--switcher-dot-disabled-color);
+$switcher-slider-disabled-color: var(--switcher-slider-disabled-color);
+
+$background-color-transition-timing: 150ms;
+
 .SwitcherFieldView {
-}
+    $root: &;
+    display: flex;
+    flex-flow: column nowrap;
+    align-items: flex-start;
+    row-gap: 10px;
+
+    &__switcher {
+        display: inline-flex;
+        column-gap: 12px;
+        align-items: center;
+        position: relative;
+        cursor: pointer;
+
+        $sizes: () !default;
+        $sizes: map-merge(
+            (
+                "lg": (
+                    "width": 40px,
+                    "height": 24px,
+                    "dotSize": 18px,
+                    "dotTranslateDefault": translateY(-50%) translateX(4px),
+                    "dotTranslateActive": translateY(-50%) translateX(16px),
+                    "font-size": $font-size-lg,
+                    "line-height": $line-height-lg,
+                ),
+                "md": (
+                    "width": 34px,
+                    "height": 20px,
+                    "dotSize": 14px,
+                    "dotTranslateDefault": translateY(-50%) translateX(3px),
+                    "dotTranslateActive": translateY(-50%) translateX(15px),
+                    "font-size": $font-size-base,
+                    "line-height": $line-height-base,
+                ),
+                "sm": (
+                    "width": 28px,
+                    "height": 16px,
+                    "dotSize": 12px,
+                    "dotTranslateDefault": translateY(-50%) translateX(2px),
+                    "dotTranslateActive": translateY(-50%) translateX(12px),
+                    "font-size": $font-size-sm,
+                    "line-height": $line-height-sm,
+                ),
+            ),
+            $sizes
+        );
+
+        &_size { 
+            @each $size, $sizeMap in $sizes { 
+                &_#{$size} {
+                    #{$root}__slider {
+                        width: map-get($sizeMap, width);
+                        height: map-get($sizeMap, height);
+    
+                        &::before {
+                            width: map-get($sizeMap, dotSize);
+                            height: map-get($sizeMap, dotSize);
+                            transform: map-get($sizeMap, dotTranslateDefault);
+                        }
+                    }
+    
+                    #{$root}__input:checked + #{$root}__slider {
+                        &::before {
+                            transform: map-get($sizeMap, dotTranslateActive);
+                        }
+                    }
+    
+                    #{$root}__label {
+                        font-size: map-get($sizeMap, font-size);
+                        line-height: map-get($sizeMap, line-height);
+                    }
+                }
+            }
+        }
+    }
+
+    &__input {
+        position: absolute;
+        cursor: pointer;
+        z-index: 3;
+        opacity: 0;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+
+        &:checked + #{$root}__slider {
+            background-color: $primary;
+            border-color: transparent;
+
+            &::before {
+                background-color: $white;
+            }
+
+            &::after {
+                border-color: $primary-light;
+            }
+        }
+
+        &:hover:not(:checked):not(:disabled) + #{$root}__slider {
+            &::before {
+                background-color: $gray-dark;
+            }
+        }
+
+        &:checked:hover + #{$root}__slider {
+            background-color: $primary-dark;
+        }
+
+        &:focus:not(:active) + #{$root}__slider {
+            &:after {
+                opacity: 1;
+            }
+        }
+
+        &:disabled {
+            cursor: not-allowed;
+        }
+
+        &:disabled ~ #{$root}__label {
+            color: $gray;
+        }
+
+        &:disabled + #{$root}__slider {
+            background-color: $switcher-slider-disabled-color;
+
+            &::before {
+                background-color: $switcher-dot-disabled-color;
+            }
+        }
+    }
+
+    &__slider {
+        width: 100%;
+        height: 100%;
+        position: relative;
+        display: inline-block;
+        border: 1px solid $gray;
+        border-radius: 200px;
+        transition: background-color $background-color-transition-timing ease-in-out;
+
+        &::after {
+            position: absolute;
+            content: "";
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            display: inline-block;
+            height: calc(100% + 2px);
+            width: calc(100% + 2px);
+            border-radius: inherit;
+            border: 4px solid $gray;
+            transform: translateX(-5px) translateY(-5px);
+            opacity: 0;
+            pointer-events: none;
+        }
+
+        &::before {
+            position: absolute;
+            content: "";
+            display: inline-block;
+            top: 50%;
+            border-radius: $radius-circle;
+            background-color: $gray;
+            transition: transform 100ms ease-in-out, background-color $background-color-transition-timing ease-in-out;
+        }
+    }
+
+    &__label {
+        color: $text-color;
+    }
+}

package/form/TextField/TextFieldView.d.ts

@@ -1,3 +1,2 @@
-import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
 import { ITextFieldViewProps } from '@steroidsjs/core/ui/form/TextField/TextField';
-export default function TextFieldView(props: ITextFieldViewProps & IBemHocOutput): JSX.Element;
+export default function TextFieldView(props: ITextFieldViewProps): JSX.Element;

package/form/TextField/TextFieldView.js

@@ -33,13 +33,21 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 exports.__esModule = true;
 var React = __importStar(require("react"));
 var hooks_1 = require("@steroidsjs/core/hooks");
+var Icon_1 = __importDefault(require("@steroidsjs/core/ui/content/Icon"));
 function TextFieldView(props) {
     var bem = (0, hooks_1.useBem)('TextFieldView');
-    return (React.createElement("textarea", __assign({ className: bem(bem.block({
+    return (React.createElement("div", { className: bem(bem.block({
+            hasErrors: !!props.errors,
+            filled: !!props.inputProps.value,
             size: props.size
-        }), 'form-control', 'form-control-' + props.size, !!props.errors && 'is-invalid', props.className) }, props.inputProps)));
+        }), props.className) },
+        React.createElement("textarea", __assign({ className: bem.element('textarea'), id: props.id }, props.inputProps)),
+        props.showClear && (React.createElement(Icon_1["default"], { className: bem.element('clear'), name: "cross_8x8", onClick: props.onClear }))));
 }
 exports["default"] = TextFieldView;

package/form/TextField/TextFieldView.scss

@@ -1,4 +1,146 @@
+:root {
+    --text-field-disabled-clear-color: #e5e9eb;
+    --text-field-active-clear-color: #323232;
+    --text-field-background-color: #ffffff;
+    --text-field-border-color: 
+}
+
+html[data-theme="dark"] {
+    --text-field-background-color: #414141;
+    --text-field-disabled-clear-color: #4e4f57;
+    --text-field-active-clear-color: #ffffff;
+}
+
+$text-field-background-color: var(--text-field-background-color);
+$text-field-disabled-clear-color: var(--text-field-disabled-clear-color);
+$text-field-active-clear-color: var(--text-field-active-clear-color);
+
 .TextFieldView {
-  min-height: 38px;
-  box-sizing: border-box;
+    $root: &;
+
+    position: relative;
+    font-family: $font-family-nunito;
+
+    &_hasErrors {
+        #{$root}__textarea {
+            border-color: $danger;
+        }
+    }
+
+    &__clear {
+        position: absolute;
+        width: 24px;
+        height: 24px;
+        z-index: 3;
+        top: 3%;
+        right: 10px;
+
+        transition: opacity 150ms ease-in-out;
+        opacity: 0;
+        pointer-events: none;
+
+        svg {
+            path {
+                stroke: $background-disabled-color;
+                stroke-width: 1.5px;
+            }
+        }
+
+        &:focus {
+            outline: none;
+        }
+    }
+
+    &__textarea {
+        width: 100%;
+        min-width: 240px;
+        min-height: 80px;
+        height: 80px;
+
+        border-radius: $radius-small;
+        background-color: $text-field-background-color;
+
+        padding: 5px 40px 8px 8px;
+
+        font-size: $font-size-sm;
+        font-weight: 400;
+        line-height: 24px;
+        z-index: 2;
+        outline: none;
+        color: $text-color;
+        border: 1px solid $border-color;
+
+        &::placeholder {
+            color: $placeholder-color;
+        }
+
+        &:hover {
+            border-color: $border-color-hover;
+        }
+
+        &:focus {
+            border: 4px solid $primary-light;
+        }
+
+        &:active {
+            border: 1px solid $primary;
+        }
+
+        &:disabled {
+            background-color: $background-disabled-color;
+            border: none;
+            resize: none;
+        }
+
+        &:disabled::placeholder {
+            color: $placeholder-disabled-color;
+        }
+
+        &:disabled + #{$root}__clear {
+            display: none;
+        }
+
+        &:not(:disabled):focus + #{$root}__clear {
+            svg {
+                path {
+                    stroke: $text-field-active-clear-color;
+                }
+            }
+        }
+    }
+
+    &_size {
+        &_lg {
+            #{$root}__textarea {
+                height: 130px;
+                min-height: 130px;
+                border-radius: $radius-large;
+                font-size: $font-size-lg;
+            }
+        }
+
+        &_md {
+            #{$root}__textarea {
+                height: 100px;
+                min-height: 100px;
+                border-radius: $radius-large;
+                font-size: $font-size-base;
+            }
+        }
+
+        &_sm {
+            #{$root}__textarea {
+                height: 80px;
+                border-radius: $radius-small;
+                font-size: $font-size-sm;
+            }
+        }
+    }
+
+    &_filled {
+        #{$root}__clear {
+            opacity: 1;
+            pointer-events: all;
+        }
+    }
 }

package/form/TimeField/TimeFieldView.d.ts

@@ -1,3 +1,2 @@
-import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
 import { ITimeFieldViewProps } from '@steroidsjs/core/ui/form/TimeField/TimeField';
-export default function TimeFieldView(props: ITimeFieldViewProps & IBemHocOutput): JSX.Element;
+export default function TimeFieldView(props: ITimeFieldViewProps): JSX.Element;

package/icons/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (customIcons: Record<string, any>) => {};
+export default _default;

package/icons/index.js

@@ -0,0 +1,103 @@
+"use strict";
+/* eslint-disable import/no-dynamic-require */
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+exports.__esModule = true;
+exports["default"] = (function (customIcons) {
+    // All icons
+    var icons = {};
+    var steroidsIcons = [
+        'add',
+        'add_square',
+        'arrow_down_18x18',
+        'arrow_down_24x24',
+        'arrow_drop_down_10x10',
+        'arrow_left_18x18',
+        'arrow_left_24x24',
+        'arrow_right_18x18',
+        'arrow_right_24x24',
+        'arrow_up_18x18',
+        'arrow_up_24x24',
+        'blank',
+        'calendar_check',
+        'chart',
+        'checkmark_12x12',
+        'checkmark_8x8',
+        'circle_cross_12x12',
+        'circle_cross_16x16',
+        'circle_cross_18x18',
+        'copy',
+        'cross_12x12',
+        'cross_8x8',
+        'default_16x16',
+        'default_24x24',
+        'cut',
+        'error_16x16',
+        'error_24x24',
+        'calendar_range',
+        'double_arrow_down',
+        'double_arrow_left',
+        'double_arrow_right',
+        'double_arrow_up',
+        'doughnut_chart',
+        'edit',
+        'expand_down',
+        'expand_left',
+        'expand_left_double',
+        'expand_right',
+        'expand_right_double',
+        'file_dock',
+        'filter',
+        'fluid',
+        'folder',
+        'group',
+        'home',
+        'img_box',
+        'import',
+        'info_16x16',
+        'info_24x24',
+        'loading_purple',
+        'loading_default',
+        'loading_icon_thick',
+        'map',
+        'menu_dots',
+        'menu_left',
+        'minis_sq',
+        'paste',
+        'pie_chart',
+        'pin',
+        'sad',
+        'search',
+        'setting_line',
+        'share',
+        'star',
+        'success_16x16',
+        'success_24x24',
+        'support',
+        'trash',
+        'upload',
+        'user',
+        'view_hide',
+        'warning_16x16',
+        'warning_24x24',
+        'clip',
+        'view',
+        'cross_4x4',
+        'expand_up',
+        'left_12x12',
+        'cancel_ellips',
+    ];
+    steroidsIcons.forEach(function (iconName) {
+        icons[iconName] = require("./svgs/".concat(iconName, ".svg"));
+    });
+    return __assign(__assign({}, icons), customIcons);
+});

package/icons/svgs/add.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 6L12 18" stroke="#323232" stroke-linecap="round"/>
+<path d="M18 12L6 12" stroke="#323232" stroke-linecap="round"/>
+</svg>

package/icons/svgs/add_square.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.5 11C3.5 9.10025 3.50106 7.72573 3.64199 6.67754C3.78098 5.64373 4.04772 5.00253 4.52513 4.52513C5.00253 4.04772 5.64373 3.78098 6.67754 3.64199C7.72573 3.50106 9.10025 3.5 11 3.5H13C14.8998 3.5 16.2743 3.50106 17.3225 3.64199C18.3563 3.78098 18.9975 4.04772 19.4749 4.52513C19.9523 5.00253 20.219 5.64373 20.358 6.67754C20.4989 7.72573 20.5 9.10025 20.5 11V13C20.5 14.8998 20.4989 16.2743 20.358 17.3225C20.219 18.3563 19.9523 18.9975 19.4749 19.4749C18.9975 19.9523 18.3563 20.219 17.3225 20.358C16.2743 20.4989 14.8998 20.5 13 20.5H11C9.10025 20.5 7.72573 20.4989 6.67754 20.358C5.64373 20.219 5.00253 19.9523 4.52513 19.4749C4.04772 18.9975 3.78098 18.3563 3.64199 17.3225C3.50106 16.2743 3.5 14.8998 3.5 13V11Z" stroke="#323232"/>
+<path d="M12 8L12 16" stroke="#323232" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M16 12L8 12" stroke="#323232" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/icons/svgs/arrow_down_18x18.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="3" y="3.86768" width="18" height="18" rx="6" fill="white"/>
+<path d="M8 10.8677L12 14.8677L16 10.8677" stroke="#323232" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/icons/svgs/arrow_down_24x24.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect y="0.867676" width="24" height="24" rx="8" fill="white"/>
+<path d="M8 10.8677L12 14.8677L16 10.8677" stroke="#323232" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/icons/svgs/arrow_drop_down_10x10.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.2318 14.0781L8.36682 10.6402C7.82405 9.98886 8.2872 9 9.13504 9L14.865 9C15.7128 9 16.176 9.98886 15.6332 10.6402L12.7682 14.0781C12.3684 14.5579 11.6316 14.5579 11.2318 14.0781Z" fill="#323232"/>
+</svg>

package/icons/svgs/arrow_left_18x18.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="3" y="3.86768" width="18" height="18" rx="6" fill="white"/>
+<path d="M14 8.86768L10 12.8677L14 16.8677" stroke="#323232" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/icons/svgs/arrow_left_24x24.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect y="0.867676" width="24" height="24" rx="8" fill="white"/>
+<path d="M14 8.86768L10 12.8677L14 16.8677" stroke="#323232" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/icons/svgs/arrow_right_18x18.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="3" y="3.86768" width="18" height="18" rx="6" fill="white"/>
+<path d="M10 16.8677L14 12.8677L10 8.86768" stroke="#323232" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/icons/svgs/arrow_right_24x24.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect y="0.867676" width="24" height="24" rx="8" fill="white"/>
+<path d="M10 16.8677L14 12.8677L10 8.86768" stroke="#323232" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/icons/svgs/arrow_up_18x18.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="3" y="3.86768" width="18" height="18" rx="6" fill="white"/>
+<path d="M16 14.8677L12 10.8677L8 14.8677" stroke="#323232" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/icons/svgs/arrow_up_24x24.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect y="0.867676" width="24" height="24" rx="8" fill="white"/>
+<path d="M16 14.8677L12 10.8677L8 14.8677" stroke="#323232" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/icons/svgs/blank.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.1716 21H9C7.11438 21 6.17157 21 5.58579 20.4142C5 19.8284 5 18.8856 5 17V7C5 5.11438 5 4.17157 5.58579 3.58579C6.17157 3 7.11438 3 9 3H15C16.8856 3 17.8284 3 18.4142 3.58579C19 4.17157 19 5.11438 19 7V14.1716C19 14.5803 19 14.7847 18.9239 14.9685C18.8478 15.1522 18.7032 15.2968 18.4142 15.5858L13.5858 20.4142C13.2968 20.7032 13.1522 20.8478 12.9685 20.9239C12.7847 21 12.5803 21 12.1716 21Z" stroke="#323232"/>
+<path d="M12 21V16.3333C12 15.2334 12 14.6834 12.3417 14.3417C12.6834 14 13.2334 14 14.3333 14H19" stroke="#323232"/>
+</svg>

package/icons/svgs/calendar_check.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.5 9.5V8.7C19.5 7.57989 19.5 7.01984 19.282 6.59202C19.0903 6.21569 18.7843 5.90973 18.408 5.71799C17.9802 5.5 17.4201 5.5 16.3 5.5H7.7C6.5799 5.5 6.01984 5.5 5.59202 5.71799C5.21569 5.90973 4.90973 6.21569 4.71799 6.59202C4.5 7.01984 4.5 7.57989 4.5 8.7V9.5M19.5 9.5V16.3C19.5 17.4201 19.5 17.9802 19.282 18.408C19.0903 18.7843 18.7843 19.0903 18.408 19.282C17.9802 19.5 17.4201 19.5 16.3 19.5H7.7C6.57989 19.5 6.01984 19.5 5.59202 19.282C5.21569 19.0903 4.90973 18.7843 4.71799 18.408C4.5 17.9802 4.5 17.4201 4.5 16.3V9.5M19.5 9.5H4.5" stroke="#323232"/>
+<path d="M8.5 3.5L8.5 7.5M15.5 3.5L15.5 7.5" stroke="#323232" stroke-linecap="round"/>
+<path d="M9 15.6364L10.8462 17L15 12" stroke="#323232" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/icons/svgs/calendar_range.svg

@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.5 9.5V8.7C19.5 7.57989 19.5 7.01984 19.282 6.59202C19.0903 6.21569 18.7843 5.90973 18.408 5.71799C17.9802 5.5 17.4201 5.5 16.3 5.5H7.7C6.5799 5.5 6.01984 5.5 5.59202 5.71799C5.21569 5.90973 4.90973 6.21569 4.71799 6.59202C4.5 7.01984 4.5 7.57989 4.5 8.7V9.5M19.5 9.5V16.3C19.5 17.4201 19.5 17.9802 19.282 18.408C19.0903 18.7843 18.7843 19.0903 18.408 19.282C17.9802 19.5 17.4201 19.5 16.3 19.5H7.7C6.57989 19.5 6.01984 19.5 5.59202 19.282C5.21569 19.0903 4.90973 18.7843 4.71799 18.408C4.5 17.9802 4.5 17.4201 4.5 16.3V9.5M19.5 9.5H4.5" stroke="#323232"/>
+<path d="M8.5 3.5L8.5 7.5M15.5 3.5L15.5 7.5" stroke="#323232" stroke-linecap="round"/>
+<path d="M8 12.5H10" stroke="#323232" stroke-linecap="round"/>
+<path d="M14 12.5H16" stroke="#323232" stroke-linecap="round"/>
+<path d="M8 16.5H10" stroke="#323232" stroke-linecap="round"/>
+<path d="M14 16.5H16" stroke="#323232" stroke-linecap="round"/>
+</svg>

package/icons/svgs/cancel_ellips.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12" cy="12" r="9" stroke="#323232"/>
+<path d="M18 18L6 6" stroke="#323232"/>
+</svg>

package/icons/svgs/chart.svg

@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 10L8 16" stroke="#323232" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12 12V16" stroke="#323232" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M16 8V16" stroke="#323232" stroke-linecap="round" stroke-linejoin="round"/>
+<rect x="3" y="4" width="18" height="16" rx="2" stroke="#323232"/>
+</svg>

package/icons/svgs/checkmark_12x12.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="3" y="3.86768" width="18" height="18" rx="9" fill="white"/>
+<path d="M15 10.8677L10.875 14.8677L9 13.0495" stroke="#323232" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/icons/svgs/checkmark_8x8.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="6" y="6.86768" width="12" height="12" rx="6" fill="white"/>
+<path d="M15 10.8677L10.875 14.8677L9 13.0495" stroke="#323232" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/icons/svgs/circle_cross_12x12.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="6" y="6.86768" width="12" height="12" rx="6" fill="white"/>
+<path d="M10 10.8677L14 14.8533M10 14.8677L14 10.8821" stroke="#323232" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/icons/svgs/circle_cross_16x16.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="4.5" y="4" width="16" height="16" rx="8" fill="#323232"/>
+<path d="M9.5 9L15.5 14.9784M9.5 15L15.5 9.02161" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/icons/svgs/circle_cross_18x18.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="3" y="3.86768" width="18" height="18" rx="9" fill="white"/>
+<path d="M9 9.86768L15 15.8461M9 15.8677L15 9.88928" stroke="#323232" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>