@steroidsjs/bootstrap 3.0.0-beta.4 → 3.0.0-beta.40

package/form/RadioField/RadioFieldView.scss

@@ -0,0 +1,226 @@
+:root {
+    --radio-hover-color: #651fff;
+}
+
+html[data-theme="dark"] {
+    --radio-hover-color: #6648a7;
+}
+
+$radio-hover-color: var(--radio-hover-color);
+
+.RadioFieldView {
+    position: relative;
+    box-sizing: border-box;
+
+    $root: &;
+
+    font-family: $font-family-nunito;
+    color: $text-color;
+    line-height: 24px;
+    font-weight: 400;
+    font-size: $font-size-sm;
+
+    &__ellipse {
+        position: absolute;
+        top: 50%;
+        left: 6px;
+        transform: translateY(-50%);
+        display: inline-block;
+        width: 12px;
+        height: 12px;
+        background-color: $primary;
+        border-radius: $radius-circle;
+        opacity: 0;
+        pointer-events: none;
+    }
+
+    &__label {
+        position: relative;
+    }
+
+    &__input {
+        position: absolute;
+        z-index: -1;
+        opacity: 0;
+    }
+
+    &__input + &__label {
+        position: relative;
+        display: inline-flex;
+        align-items: center;
+        user-select: none;
+        cursor: pointer;
+    }
+
+    //Custom Radio
+    &__input + label::before {
+        content: "";
+        display: inline-block;
+        width: 24px;
+        height: 24px;
+        border-radius: $radius-circle;
+        border: 1px solid $border-color;
+        margin-right: 8px;
+        cursor: pointer;
+
+        background-repeat: no-repeat;
+        background-position: 53% 50%;
+        background-size: 50% 50%;
+    }
+
+    &__input + &__label::after {
+        content: "";
+        width: 26px;
+        height: 26px;
+        position: absolute;
+        top: 0;
+        left: 0;
+        border: 4px solid $primary-light;
+        border-radius: $radius-circle;
+        pointer-events: none;
+        opacity: 0;
+
+        transform: translate(-12%, -12%);
+
+        transition: opacity 150ms ease-in-out;
+    }
+
+    &__input:not(:disabled):not(:checked):hover + &__label::before {
+        border-color: $border-color-hover;
+    }
+
+    &__input:not(:disabled):not(:checked):active + &__label::before {
+        border-color: $primary;
+    }
+
+    &__input:not(:disabled):focus + &__label::after {
+        opacity: 1;
+    }
+
+    &__input:not(:disabled):focus + &__label &__ellipse {
+        opacity: 1;
+    }
+
+    &__input:checked + &__label::before {
+        border: 1px solid $primary;
+    }
+    &__input:checked + &__label &__ellipse {
+        opacity: 1;
+    }
+
+    &__input:not(:disabled):checked:hover + &__label::before {
+        border-color: $primary-dark;
+    }
+
+    &__input:not(:disabled):checked:hover + &__label &__ellipse {
+        opacity: 1;
+        background-color: $radio-hover-color;
+    }
+
+    &__input:not(:disabled):checked:active + &__label::before {
+        border-color: $primary-light;
+    }
+
+    &__input:not(:disabled):checked:active + &__label &__ellipse {
+        opacity: 1;
+        background-color: $primary-light;
+    }
+
+    &__input:disabled + &__label {
+        cursor: not-allowed;
+        color: $placeholder-color;
+
+        &::before {
+            cursor: not-allowed;
+            background-color: $background-disabled-color;
+        }
+    }
+
+    &__input:disabled:checked + &__label::before {
+        cursor: not-allowed;
+
+        background-color: transparent;
+        border-color: $background-disabled-color;
+    }
+
+    &__input:disabled:checked + &__label &__ellipse {
+        background-color: $background-disabled-color;
+    }
+
+    &_hasError {
+        #{$root}__input:not(:disabled):not(:checked) + #{$root}__label {
+            color: $danger;
+
+            &::before {
+                border-color: $danger;
+            }
+        }
+    }
+
+    &_size {
+        &_lg {
+            #{$root}__label {
+                font-size: $font-size-lg;
+                line-height: 24px;
+
+                &::before {
+                    width: 22px;
+                    height: 22px;
+                }
+
+                &::after {
+                    width: 24px;
+                    height: 24px;
+                }
+            }
+        }
+
+        &_md {
+            #{$root}__label {
+                font-size: $font-size-base;
+                line-height: 22px;
+
+                &::before {
+                    width: 18px;
+                    height: 18px;
+                }
+
+                &::after {
+                    width: 20px;
+                    height: 20px;
+                    transform: translate(-14.5%, -10.5%);
+                }
+            }
+
+            #{$root}__ellipse {
+                width: 10px;
+                height: 10px;
+                left: 5px;
+            }
+        }
+
+        &_sm {
+            #{$root}__label {
+                font-size: $font-size-sm;
+                line-height: 18px;
+
+                &::before {
+                    width: 14px;
+                    height: 14px;
+                }
+
+                &::after {
+                    width: 16px;
+                    height: 16px;
+                    transform: translate(-16.5%, -12.5%);
+                }
+            }
+
+            #{$root}__ellipse {
+                width: 8px;
+                height: 8px;
+                left: 4px;
+            }
+        }
+    }
+}

package/form/RadioListField/RadioListFieldView.js

@@ -1,15 +1,4 @@
 "use strict";
-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);
-};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -41,12 +30,27 @@ var React = __importStar(require("react"));
 var hooks_1 = require("@steroidsjs/core/hooks");
 var useUniqueId_1 = __importDefault(require("@steroidsjs/core/hooks/useUniqueId"));
 function RadioListFieldView(props) {
+    var _a;
     var bem = (0, hooks_1.useBem)('RadioListFieldView');
     var prefix = (0, useUniqueId_1["default"])('radio');
-    return (React.createElement("div", { className: bem.block() }, props.items.map(function (item) { return (React.createElement("div", { key: typeof item.id !== 'boolean' ? item.id : (item.id ? 'true' : 'false'), className: 'custom-control custom-radio' },
-        React.createElement("input", __assign({}, props.inputProps, { id: "".concat(prefix, "_").concat(item.id), className: bem(bem.element('input'), 'custom-control-input', !!props.errors && 'is-invalid'), checked: props.selectedIds.includes(item.id), disabled: props.disabled || item.disabled, onChange: function () {
-                props.onItemSelect(item.id);
-            } })),
-        React.createElement("label", { className: 'custom-control-label', htmlFor: "".concat(prefix, "_").concat(item.id) }, item.label))); })));
+    return (React.createElement("div", { className: bem(bem.block((_a = {},
+            _a["".concat(props.orientation)] = !!props.orientation,
+            _a)), props.className) }, props.items.map(function (radio, radioIndex) { return props.renderRadio({
+        inputProps: {
+            name: "".concat(prefix, "_").concat(radio.id),
+            checked: null,
+            type: 'radio',
+            disabled: false,
+            onChange: function () {
+                props.onItemSelect(radio.id);
+            }
+        },
+        disabled: props.disabled,
+        checked: props.selectedIds.includes(radio.id),
+        label: radio.label,
+        id: "".concat(prefix, "_").concat(radio.id),
+        key: radioIndex,
+        size: props.size
+    }); })));
 }
 exports["default"] = RadioListFieldView;

package/form/RadioListField/RadioListFieldView.scss

@@ -1,3 +1,13 @@
 .RadioListFieldView {
+    display: flex;
 
-}
+    &_vertical {
+        flex-flow: column wrap;
+        row-gap: 8px;
+    }
+
+    &_horizontal {
+        flex-flow: row nowrap;
+        column-gap: 8px;
+    }
+}

package/form/ReCaptchaField/ReCaptchaFieldView.js

@@ -31,9 +31,9 @@ function ReCaptchaFieldView(props) {
     return (React.createElement("div", { className: bem.block() },
         React.createElement("small", { className: 'text-muted' },
             __('This site is protected by reCAPTCHA and the Google') + ' ',
-            React.createElement(nav_1.Link, { url: 'https://policies.google.com/privacy', target: '_blank', label: __('Privacy Policy'), layout: false }),
+            React.createElement(nav_1.Link, { url: 'https://policies.google.com/privacy', target: '_blank', label: __('Privacy Policy') }),
             ' ' + __('and') + ' ',
-            React.createElement(nav_1.Link, { url: 'https://policies.google.com/terms', target: '_blank', label: __('Terms of Service'), layout: false }),
+            React.createElement(nav_1.Link, { url: 'https://policies.google.com/terms', target: '_blank', label: __('Terms of Service') }),
             ' ' + __('apply'),
             ".")));
 }

package/form/SwitcherField/SwitcherFieldView.js

@@ -45,6 +45,6 @@ function SwitcherFieldView(props) {
     var bem = (0, hooks_1.useBem)('SwitcherFieldView');
     return (React.createElement("div", { className: bem(bem.block({
             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)); })));
+        }), 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]); } }), item.label)); })));
 }
 exports["default"] = SwitcherFieldView;

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: "field-close", onClick: props.onClear }))));
 }
 exports["default"] = TextFieldView;

package/form/TextField/TextFieldView.scss

@@ -1,4 +1,145 @@
+: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;
+            }
+        }
+
+        &: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/icons/index.d.ts

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

package/{icon/fontawesome.js → icons/index.js}

@@ -1,5 +1,17 @@
 "use strict";
+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;
+/* eslint-disable import/no-dynamic-require */
 var groupedIcons = {
     brands: [
         '500px', 'accessible-icon', 'accusoft', 'acquisitions-incorporated', 'adn', 'adversal',
@@ -52,7 +64,7 @@ var groupedIcons = {
         'strava', 'stripe', 'stripe-s', 'studiovinari', 'stumbleupon', 'stumbleupon-circle', 'superpowers',
         'supple', 'suse', 'swift', 'symfony', 'teamspeak', 'telegram', 'telegram-plane', 'tencent-weibo',
         'the-red-yeti', 'themeco', 'themeisle', 'think-peaks', 'tiktok', 'trade-federation', 'trello',
-        'tripadvisor', 'tumblr', 'tumblr-square', 'twitch', 'twitter', 'twitter-square', 'typo3', 'uber', 'ubuntu',
+        'tumblr', 'tumblr-square', 'twitch', 'twitter', 'twitter-square', 'typo3', 'uber', 'ubuntu',
         'uikit', 'umbraco', 'uniregistry', 'unity', 'unsplash', 'untappd', 'ups', 'usb', 'usps', 'ussunnah',
         'vaadin', 'viacoin', 'viadeo', 'viadeo-square', 'viber', 'vimeo', 'vimeo-square', 'vimeo-v', 'vine', 'vk',
         'vnv', 'vuejs', 'waze', 'weebly', 'weibo', 'weixin', 'whatsapp', 'whatsapp-square', 'whmcs', 'wikipedia-w',
@@ -220,12 +232,11 @@ var groupedIcons = {
         'yin-yang',
     ]
 };
-exports["default"] = (function () {
+exports["default"] = (function (customIcons) {
     // All icons
     var icons = {};
     Object.keys(groupedIcons).forEach(function (group) {
         groupedIcons[group].forEach(function (name) {
-            // eslint-disable-next-line import/no-dynamic-require
             icons[name] = require("@fortawesome/fontawesome-free/svgs/".concat(group, "/").concat(name, ".svg"));
         });
     });
@@ -239,16 +250,34 @@ exports["default"] = (function () {
         reject: 'times-circle',
         back: 'arrow-left',
         securityEye: 'eye',
-        securityEyeSlash: 'eye-slash',
-        success: './svgs/success.svg',
-        info: './svgs/info.svg',
-        warning: './svgs/warning.svg',
-        error: './svgs/error.svg',
-        close: './svgs/close.svg',
-        "default": './svgs/default.svg'
+        securityEyeSlash: 'eye-slash'
     };
+    var steroidsIcons = [
+        'success',
+        'info',
+        'warning',
+        'error',
+        'close',
+        'default',
+        'badge-close',
+        'loader',
+        'accordion-chevron',
+        'field-close',
+        'arrow',
+        'user',
+        'visible-eye',
+        'crossed-out-eye',
+        'dots',
+        'search',
+        'home',
+        'arrow-left',
+        'double-arrow-left',
+    ];
+    steroidsIcons.forEach(function (iconName) {
+        icons[iconName] = require("./svgs/".concat(iconName, ".svg"));
+    });
     Object.keys(coreIconsMap).forEach(function (name) {
         icons[name] = icons[coreIconsMap[name]];
     });
-    return icons;
+    return __assign(__assign({}, icons), customIcons);
 });

package/icons/svgs/accordion-chevron.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 width="24" height="24" rx="8" fill="white"/>
+<path d="M7.75829 10.9995L12.0009 15.2422L16.2426 11.0005" stroke="#323232" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/icons/svgs/arrow-left.svg

@@ -0,0 +1,3 @@
+<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.3535 8.58148L10.3535 12.5815L14.3535 16.5815" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/icons/svgs/arrow.svg

@@ -0,0 +1,3 @@
+<svg width="36" height="28" viewBox="0 0 36 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22.2417 16.3981L17.9991 12.1554L13.7574 16.3971" stroke="#414141" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/icons/svgs/badge-close.svg

@@ -0,0 +1,3 @@
+<svg width="17" height="17" viewBox="0 0 17 17" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.28906 6.5L10.2891 10.4856M6.28906 10.5L10.2891 6.51441" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/icons/svgs/close.svg

@@ -0,0 +1,4 @@
+<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.246094" y="0.5" width="16" height="16" rx="8" fill="#323232"/>
+<path d="M5.24609 5.5L11.2461 11.4784M5.24609 11.5L11.2461 5.52161" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/icons/svgs/crossed-out-eye.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.9202 13.2867C15.9725 13.0286 16 12.7615 16 12.4879C16 10.2788 14.2091 8.48792 12 8.48792C11.7264 8.48792 11.4593 8.51538 11.2012 8.56769L12.7295 10.096C13.5236 10.3379 14.15 10.9643 14.3919 11.7584L15.9202 13.2867ZM9.76246 11.3716C9.5945 11.7076 9.5 12.0867 9.5 12.4879C9.5 13.8686 10.6193 14.9879 12 14.9879C12.4012 14.9879 12.7803 14.8934 13.1163 14.7255L14.212 15.8212C13.5784 16.2424 12.8179 16.4879 12 16.4879C9.79086 16.4879 8 14.6971 8 12.4879C8 11.67 8.24547 10.9095 8.66676 10.2759L9.76246 11.3716Z" fill="#323232"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.7369 16.1634C19.5861 15.3972 20.278 14.625 20.7677 14.0304C20.7902 14.0031 20.8132 13.9755 20.8363 13.9476C21.1563 13.5626 21.521 13.1236 21.521 12.4879C21.521 11.8522 21.1563 11.4133 20.8363 11.0282C20.8132 11.0003 20.7902 10.9727 20.7677 10.9454C20.0353 10.0562 18.8506 8.7695 17.3636 7.6997C15.8826 6.63415 14.0377 5.73792 12.0007 5.73792C10.9236 5.73792 9.90014 5.98854 8.95578 6.3823L10.1221 7.5486C10.7332 7.35097 11.3622 7.23792 12.0007 7.23792C13.5996 7.23792 15.1386 7.94675 16.4876 8.91731C17.8307 9.88361 18.9222 11.0641 19.6099 11.899C19.8177 12.1514 19.92 12.2787 19.9814 12.3815C20.0213 12.4484 20.0212 12.4674 20.021 12.485L20.021 12.4879L20.021 12.4908C20.0212 12.5084 20.0213 12.5274 19.9814 12.5944C19.92 12.6971 19.8177 12.8245 19.6099 13.0768C19.1383 13.6493 18.4769 14.3843 17.6748 15.1013L18.7369 16.1634ZM8.64801 8.19585C8.25778 8.41127 7.87887 8.65471 7.51387 8.91731C6.17077 9.88361 5.07931 11.0641 4.39163 11.899C4.18379 12.1514 4.08145 12.2787 4.02013 12.3815C3.98021 12.4484 3.98034 12.4674 3.98046 12.485L3.98047 12.4879L3.98046 12.4908C3.98034 12.5084 3.98021 12.5274 4.02013 12.5944C4.08145 12.6971 4.18379 12.8245 4.39163 13.0768C5.0793 13.9117 6.17077 15.0922 7.51387 16.0585C8.86289 17.0291 10.4019 17.7379 12.0007 17.7379C13.5996 17.7379 15.1386 17.0291 16.4876 16.0585C16.4921 16.0553 16.4966 16.0521 16.501 16.0489L17.574 17.1219C17.5046 17.1737 17.4345 17.2252 17.3636 17.2761C15.8826 18.3417 14.0377 19.2379 12.0007 19.2379C9.96383 19.2379 8.11889 18.3417 6.63785 17.2761C5.15089 16.2063 3.96621 14.9197 3.2338 14.0304C3.21126 14.0031 3.18833 13.9755 3.16516 13.9476C2.8452 13.5626 2.48047 13.1236 2.48047 12.4879C2.48047 11.8522 2.8452 11.4133 3.16516 11.0282L3.16527 11.0281C3.1884 11.0003 3.21129 10.9727 3.2338 10.9454C3.96621 10.0562 5.15089 8.7695 6.63785 7.6997C6.92832 7.49072 7.23278 7.28825 7.54995 7.09778L8.64801 8.19585Z" fill="#323232"/>
+<path d="M5 2.48792L21 18.4879" stroke="#323232"/>
+</svg>

package/icons/svgs/default.svg

@@ -0,0 +1,11 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_126_1078)">
+<circle cx="12.7461" cy="12" r="12" fill="#E1E1E1"/>
+<path d="M15.7791 8.73626H15.7131M17.7571 8.73626L18.7461 9.1978L17.7571 9.65934M14.6582 11.5055C14.6582 12.6264 13.801 13.4835 12.6802 13.4835C11.5593 13.4835 8.52631 13.4835 6.74609 13.4835M15.3175 6.75824C16.5703 6.75824 17.6252 7.81318 17.6252 9.13187C17.6252 9.85714 17.2955 10.5824 16.7681 10.978C17.2955 11.6374 17.6252 12.4945 17.6252 13.4176C17.6252 15.5275 15.9769 17.2418 13.9329 17.2418C11.889 17.2418 10.0428 15.3297 8.39445 13.4176C9.64719 11.6374 13.5373 6.75824 15.3175 6.75824Z" stroke="white" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_126_1078">
+<rect width="24" height="24" fill="white" transform="translate(0.746094)"/>
+</clipPath>
+</defs>
+</svg>

package/icons/svgs/dots.svg

@@ -0,0 +1,5 @@
+<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="14.3535" y="2.58154" width="4" height="4" rx="2" transform="rotate(90 14.3535 2.58154)" fill="#323232"/>
+<rect x="14.3535" y="10.5815" width="4" height="4" rx="2" transform="rotate(90 14.3535 10.5815)" fill="#323232"/>
+<rect x="14.3535" y="18.5815" width="4" height="4" rx="2" transform="rotate(90 14.3535 18.5815)" fill="#323232"/>
+</svg>

package/icons/svgs/double-arrow-left.svg

@@ -0,0 +1,4 @@
+<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.8535 16.5815L7.85352 12.5815L11.8535 8.58148" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M16.8535 16.5815L12.8535 12.5815L16.8535 8.58148" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/icons/svgs/error.svg

@@ -0,0 +1,12 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_126_1073)">
+<path d="M12.746 24C11.9983 24 11.2394 23.8103 10.5698 23.4197L3.94064 19.5917C2.60142 18.8105 1.7644 17.3708 1.7644 15.8196V8.186C1.7644 6.63474 2.60142 5.19507 3.94064 4.41386L10.5698 0.58591C11.909 -0.195303 13.5719 -0.195303 14.9223 0.58591L21.5514 4.41386C22.8907 5.19507 23.7277 6.63474 23.7277 8.186V15.8196C23.7277 17.3708 22.8907 18.8105 21.5514 19.5917L14.9223 23.4197C14.2527 23.8103 13.4938 24 12.746 24Z" fill="#FB4E4E"/>
+<circle cx="12.7461" cy="16.75" r="0.75" fill="white"/>
+<line x1="12.7461" y1="7.25" x2="12.7461" y2="13.75" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
+</g>
+<defs>
+<clipPath id="clip0_126_1073">
+<rect width="24" height="24" fill="white" transform="translate(0.746094)"/>
+</clipPath>
+</defs>
+</svg>

package/icons/svgs/field-close.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16 8.69275L8 16.6927" stroke="#323232" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8 8.69275L16 16.6927" stroke="#323232" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/icons/svgs/home.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.35352 12.3655C5.35352 11.0077 5.35352 10.3289 5.62798 9.73213C5.90244 9.13539 6.41788 8.69358 7.44877 7.80997L8.44877 6.95282C10.3121 5.35569 11.2437 4.55713 12.3535 4.55713C13.4633 4.55713 14.3949 5.35569 16.2583 6.95282L17.2583 7.80997C18.2892 8.69358 18.8046 9.13539 19.0791 9.73213C19.3535 10.3289 19.3535 11.0077 19.3535 12.3655V16.6059C19.3535 18.4915 19.3535 19.4343 18.7677 20.0201C18.1819 20.6059 17.2391 20.6059 15.3535 20.6059H9.35352C7.4679 20.6059 6.52509 20.6059 5.9393 20.0201C5.35352 19.4343 5.35352 18.4915 5.35352 16.6059V12.3655Z" stroke="#323232"/>
+<path d="M14.8535 20.606V15.606C14.8535 15.0537 14.4058 14.606 13.8535 14.606H10.8535C10.3012 14.606 9.85352 15.0537 9.85352 15.606V20.606" stroke="#323232" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>