@steroidsjs/bootstrap 3.0.0-beta.2 → 3.0.0-beta.21

package/form/ImageField/ImageFieldView.js

@@ -28,20 +28,20 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 exports.__esModule = true;
 var React = __importStar(require("react"));
 var hooks_1 = require("@steroidsjs/core/hooks");
-var Icon_1 = __importDefault(require("@steroidsjs/core/ui/icon/Icon"));
+var Icon_1 = __importDefault(require("@steroidsjs/core/ui/content/Icon"));
 function ImageFieldView(props) {
-    var bem = (0, hooks_1.useBem)("ImageFieldView");
+    var bem = (0, hooks_1.useBem)('ImageFieldView');
     var item = props.item;
-    return (React.createElement("div", { className: bem.block() }, !item || !item.image ? (React.createElement("button", { className: bem.element("button", {
+    return (React.createElement("div", { className: bem.block() }, !item || !item.image ? (React.createElement("button", { className: bem.element('button', {
             loading: item ? item.progress : false
         }), onClick: props.onClick },
-        !item || !item.progress ? (React.createElement(Icon_1["default"], { className: bem.element("button-icon"), name: 'plus' })) : (React.createElement("div", { className: bem.element("progress-bar") },
-            React.createElement("div", { className: bem.element("progress-slider"), style: {
+        !item || !item.progress ? (React.createElement(Icon_1["default"], { className: bem.element('button-icon'), name: 'plus' })) : (React.createElement("div", { className: bem.element('progress-bar') },
+            React.createElement("div", { className: bem.element('progress-slider'), style: {
                     width: "".concat(item ? item.progress.percent : 0, "%")
                 } }))),
-        React.createElement("span", { className: bem.element("button-label") }, !item || !item.progress ? props.label : "Uploading..."))) : (React.createElement("div", { className: bem.element("content") },
-        React.createElement("img", { className: bem.element("image"), src: item.image.url, width: item.image.width, height: item.image.height, alt: item.title }),
-        React.createElement("div", { className: bem.element("image-controls") },
-            React.createElement(Icon_1["default"], { className: bem.element("delete-icon"), name: 'trash', onClick: item.onRemove }))))));
+        React.createElement("span", { className: bem.element('button-label') }, !item || !item.progress ? props.label : 'Uploading...'))) : (React.createElement("div", { className: bem.element('content') },
+        React.createElement("img", { className: bem.element('image'), src: item.image.url, width: item.image.width, height: item.image.height, alt: item.title }),
+        React.createElement("div", { className: bem.element('image-controls') },
+            React.createElement(Icon_1["default"], { className: bem.element('delete-icon'), name: 'trash', onClick: item.onRemove }))))));
 }
 exports["default"] = ImageFieldView;

package/form/InputField/InputFieldView.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
 import { IInputFieldViewProps } from '@steroidsjs/core/ui/form/InputField/InputField';
 export default function InputFieldView(props: IInputFieldViewProps & IBemHocOutput): JSX.Element;

package/form/InputField/InputFieldView.scss

@@ -1,3 +1,5 @@
+$input-border-color: transparent;
+
 .InputFieldView {
   $root: &;
 
@@ -5,7 +7,6 @@
   flex-flow: row nowrap;
   align-items: stretch;
   padding: 0;
-  border: $input-border;
   border-radius: $input-border-radius;
 
   &_size {
@@ -100,7 +101,7 @@
   &__addon-before, &__addon-after {
     display: flex;
     align-items: center;
-    padding: 0 $input-addon-padding;
+    // padding: 0 $input-addon-padding;
 
     color: rgba(0, 0, 0, .85);
     text-align: center;
@@ -124,11 +125,11 @@
   }
 
   &__text-before {
-    padding-left: $input-text-padding;
+    // padding-left: $input-text-padding;
   }
 
   &__text-after {
-    padding-right: $input-text-padding;
+    // padding-right: $input-text-padding;
   }
 
 }

package/form/NumberField/NumberFieldView.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
 import { INumberFieldViewProps } from '@steroidsjs/core/ui/form/NumberField/NumberField';
 export default function NumberFieldView(props: INumberFieldViewProps & IBemHocOutput): JSX.Element;

package/form/NumberField/NumberFieldView.scss

@@ -4,7 +4,6 @@
   flex-flow: row nowrap;
   align-items: stretch;
   padding: 0;
-  border: $input-border;
 
   &:hover {
     border-color: $border-hover;

package/form/PasswordField/PasswordFieldView.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
 import { IPasswordFieldViewProps } from '@steroidsjs/core/ui/form/PasswordField/PasswordField';
 export default function PasswordFieldView(props: IPasswordFieldViewProps & IBemHocOutput): JSX.Element;

package/form/PasswordField/PasswordFieldView.js

@@ -38,19 +38,19 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 exports.__esModule = true;
 var React = __importStar(require("react"));
-var Icon_1 = __importDefault(require("@steroidsjs/core/ui/icon/Icon"));
+var Icon_1 = __importDefault(require("@steroidsjs/core/ui/content/Icon"));
 var hooks_1 = require("@steroidsjs/core/hooks");
 function PasswordFieldView(props) {
     var bem = (0, hooks_1.useBem)('PasswordFieldView');
-    return (React.createElement("div", { className: bem(bem.block(), props.className) },
-        React.createElement("div", { className: bem(bem.element('container', {
-                disabled: props.inputProps.disabled
-            }), 'form-control', 'form-control-' + props.size, !!props.errors && 'is-invalid') },
-            React.createElement("input", __assign({ className: bem(bem.element('input', {
-                    size: props.size
-                }), !!props.errors && 'is-invalid', props.className) }, props.inputProps)),
-            props.security && (React.createElement("button", { className: bem(bem.element('icon-eye')), onMouseDown: props.onShowPassword, onMouseUp: props.onHidePassword },
-                React.createElement(Icon_1["default"], { name: props.inputProps.type === 'password' ? 'securityEye' : 'securityEyeSlash' })))),
-        props.security && (React.createElement("div", { className: bem.element('security-bar', props.securityLevel) }))));
+    return (React.createElement("div", { className: bem(bem.block({
+            size: props.size,
+            filled: !!props.inputProps.value,
+            disabled: props.inputProps.disabled
+        }), props.className) },
+        React.createElement("div", { className: bem.element('container') },
+            React.createElement("input", __assign({ className: bem.element('input') }, props.inputProps)),
+            props.showSecurityIcon && (React.createElement("span", { className: bem(bem.element('icon-eye')), onMouseDown: props.onShowPassword, onMouseUp: props.onHidePassword },
+                React.createElement(Icon_1["default"], { name: props.inputProps.type === 'password' ? 'crossed-out-eye' : 'visible-eye' })))),
+        props.showSecurityBar && (React.createElement("div", { className: bem.element('security-bar', props.securityLevel) }))));
 }
 exports["default"] = PasswordFieldView;

package/form/PasswordField/PasswordFieldView.scss

@@ -1,76 +1,234 @@
+:root {
+    --security-bar-background: #eef1f2;
+    --eye-default-color: #eef1f2;
+    --eye-filled-color: #323232;
+}
+
+html[data-theme="dark"] {
+    --security-bar-background: #5b5c6b;
+    --eye-default-color: #5b5c6b;
+    --eye-filled-color: #ffffff;
+}
+
+$security-bar-background: var(--security-bar-background);
+$eye-default-color: var(--eye-default-color);
+$eye-filled-color: var(--eye-filled-color);
+
 .PasswordFieldView {
+    $root: &;
+
+    position: relative;
+    width: 200px;
+
+    line-height: 24px;
+    font-weight: $font-weight-normal;
+
+    &__container {
+        position: relative;
+        width: 200px;
+        height: 34px;
 
+        &::before {
+            position: absolute;
+            content: "";
+            width: 101.6666666667%;
+            height: 111.7647058824%;
+            top: 0;
+            left: 0;
 
-  &__container{
-    display: flex;
-    flex-flow: row nowrap;
-    align-items: stretch;
-    padding: 0;
+            border-radius: $radius-small;
 
-    &:focus-within{
-      outline: 0;
-      border-color: $border-action;
-      box-shadow: 0 0 0 0.2rem $border-typing;
+            border: 4px solid $primary-light;
+            transition: opacity 150ms ease-in-out;
+            opacity: 0;
+            pointer-events: none;
+            transform: translate(-0.8333333334%, -5.8823529412%);
+        }
+
+        &:focus-within:not(:active)::before {
+            opacity: 1;
+        }
     }
-    &.is-invalid:focus-within{
-      border-color: $border-error;
-      box-shadow: 0 0 0 0.2rem $back-error;
+
+    &__input {
+        width: 100%;
+        height: 100%;
+        border-radius: $radius-small;
+        border: 1px solid $border-color;
+        outline: none;
+        padding-left: 8px;
+        padding-right: 42px;
+
+        &::placeholder {
+            color: $placeholder-color;
+        }
+
+        &:hover {
+            border: 1px solid $border-color-hover;
+        }
+
+        &:not(:disabled):active {
+            border: 1px solid $primary;
+        }
+
+        &:disabled {
+            border: none;
+            background-color: $background-disabled-color;
+        }
     }
-    &_disabled {
-      color: rgba(0, 0, 0, .25);
-      background-color: $back-disabled;
-      cursor: not-allowed;
-      input {
-        cursor: inherit;
-      }
+
+    &_size {
+        &_lg {
+            #{$root}__container {
+                height: 56px;
+
+                &::before {
+                    border-radius: $radius-large;
+                }
+            }
+
+            #{$root}__input {
+                border-radius: $radius-large;
+            }
+
+            font-size: $font-size-lg;
+        }
+
+        &_md {
+            #{$root}__container {
+                height: 46px;
+
+                &::before {
+                    border-radius: $radius-large;
+                }
+            }
+
+            #{$root}__input {
+                border-radius: $radius-large;
+            }
+
+            font-size: $font-size-base;
+        }
+
+        &_sm {
+            #{$root}__container {
+                height: $input-height-sm;
+
+                &::before {
+                    border-radius: $radius-small;
+                }
+            }
+
+            #{$root}__input {
+                border-radius: $radius-small;
+            }
+
+            font-size: $font-size-sm;
+        }
     }
-  }
-
-  &__input {
-    flex-grow: 1;
-    border: none;
-    outline: none;
-    background-color: transparent;
-
-    padding: $input-padding-y $input-padding-x;
-  }
-
-  &__icon-eye {
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    padding-right: $input-padding-x;
-
-    opacity: .5;
-    transition: opacity .1s ease-in;
-    &:hover {
-      opacity: 1;
+
+    &__security-bar {
+        position: relative;
+        width: 100%;
+        height: 4px;
+        border-radius: 4px;
+        margin-top: 8px;
+
+        background-color: $security-bar-background;
+
+        &::before {
+            content: "";
+            position: absolute;
+            width: 0%;
+            height: 4px;
+            border-radius: 4px;
+            transition: width 1s ease-in-out;
+        }
+
+        &_danger::before {
+            width: 33%;
+            background-color: $danger;
+        }
+
+        &_warning::before {
+            width: 66%;
+            background-color: $warning;
+        }
+
+        &_success::before {
+            width: 100%;
+            background-color: $success;
+        }
     }
 
-    & > span{
-      display: flex;
-      align-items: center;
+    &__icon-eye {
+        outline: none;
+        border: none;
+
+        position: absolute;
+        right: 8px;
+        top: 50%;
+        transform: translateY(-50%);
     }
-  }
-
-  &__security-bar {
-    margin: 10px 0 0 ;
-    height: 4px;
-    width: 0;
-    border-radius: 3px;
-    transition: width 1s;
-
-    &_danger {
-      width: 33%;
-      background-color: $danger;
+
+    &__icon-eye {
+        svg {
+            path {
+                fill: $eye-default-color;
+
+                &:last-child {
+                    stroke: $eye-default-color;
+                }
+            }
+        }
+
+        &:active {
+            svg {
+                path {
+                    fill: inherit;
+                    stroke: $eye-default-color;
+                }
+                circle {
+                    stroke: $eye-default-color;
+                }
+            }
+        }
     }
-    &_warning {
-      width: 66%;
-      background-color: $warning;
+
+    &_filled {
+        #{$root}__icon-eye {
+            svg {
+                path {
+                    fill: $eye-filled-color;
+
+                    &:last-child {
+                        stroke: $eye-filled-color;
+                    }
+                }
+            }
+
+            &:active {
+                svg {
+                    path {
+                        fill: inherit;
+                        stroke: $eye-filled-color;
+                    }
+                    circle {
+                        stroke: $eye-filled-color;
+                    }
+                }
+            }
+        }
     }
-    &_success {
-      width: 100%;
-      background-color: $success;
+
+    &_disabled {
+        #{$root}__icon-eye,
+        #{$root}__security-bar {
+            opacity: 0;
+
+            &::before {
+                opacity: 0;
+            }
+        }
     }
-  }
-}
+}

package/form/RadioListField/RadioListFieldView.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
 import { IRadioListFieldViewProps } from '@steroidsjs/core/ui/form/RadioListField/RadioListField';
 export default function RadioListFieldView(props: IRadioListFieldViewProps & IBemHocOutput): JSX.Element;

package/form/RateField/RateFieldView.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { IRateFieldViewProps } from '@steroidsjs/core/ui/form/RateField/RateField';
 export default function RateFieldView(props: IRateFieldViewProps): JSX.Element;

package/form/RateField/RateFieldView.js

@@ -28,7 +28,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 exports.__esModule = true;
 var React = __importStar(require("react"));
 var hooks_1 = require("@steroidsjs/core/hooks");
-var Icon_1 = __importDefault(require("@steroidsjs/core/ui/icon/Icon"));
+var Icon_1 = __importDefault(require("@steroidsjs/core/ui/content/Icon"));
 function RateFieldView(props) {
     var bem = (0, hooks_1.useBem)('RateFieldView');
     return (React.createElement("div", { className: bem(bem.block(), props.className) }, props.items.map(function (item, index) { return (React.createElement("div", { key: index, className: bem.element('rate-item', {

package/form/ReCaptchaField/ReCaptchaFieldView.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
 import { IReCaptchaFieldViewProps } from '@steroidsjs/core/ui/form/ReCaptchaField/ReCaptchaField';
 export default function ReCaptchaFieldView(props: IReCaptchaFieldViewProps & IBemHocOutput): JSX.Element;

package/form/SliderField/SliderFieldView.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
 import { ISliderFieldViewProps } from '@steroidsjs/core/ui/form/SliderField/SliderField';
 export default function SliderFieldView(props: ISliderFieldViewProps & IBemHocOutput): JSX.Element;

package/form/SwitcherField/SwitcherFieldView.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
 import { ISwitcherFieldViewProps } from '@steroidsjs/core/ui/form/SwitcherField/SwitcherField';
 export default function SwitcherFieldView(props: ISwitcherFieldViewProps & IBemHocOutput): JSX.Element;

package/form/TextField/TextFieldView.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 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;

package/form/TimeField/TimeFieldView.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 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;

package/form/TimeField/TimeFieldView.js

@@ -40,7 +40,7 @@ exports.__esModule = true;
 var React = __importStar(require("react"));
 var react_1 = require("react");
 var hooks_1 = require("@steroidsjs/core/hooks");
-var Icon_1 = __importDefault(require("@steroidsjs/core/ui/icon/Icon"));
+var Icon_1 = __importDefault(require("@steroidsjs/core/ui/content/Icon"));
 var DropDown_1 = __importDefault(require("@steroidsjs/core/ui/content/DropDown"));
 var TimePanelView_1 = __importDefault(require("./TimePanelView"));
 function TimeFieldView(props) {

package/form/TimeField/TimePanelView.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ITimePanelViewProps } from '@steroidsjs/core/ui/form/TimeField/TimeField';
 declare function TimePanelView(props: ITimePanelViewProps): JSX.Element;
 declare namespace TimePanelView {

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

@@ -1,5 +1,6 @@
 "use strict";
 exports.__esModule = true;
+/* eslint-disable import/no-dynamic-require */
 var groupedIcons = {
     brands: [
         '500px', 'accessible-icon', 'accusoft', 'acquisitions-incorporated', 'adn', 'adversal',
@@ -52,7 +53,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',
@@ -238,12 +239,24 @@ exports["default"] = (function () {
         reject: 'times-circle',
         back: 'arrow-left',
         securityEye: 'eye',
-        securityEyeSlash: 'eye-slash',
-        success: 'check-circle',
-        info: 'info-circle',
-        warning: 'exclamation-circle',
-        error: 'times-circle'
+        securityEyeSlash: 'eye-slash'
     };
+    var steroidsIcons = [
+        'success',
+        'info',
+        'warning',
+        'error',
+        'close',
+        'default',
+        'badge-close',
+        'loader',
+        'accordion-chevron',
+        'visible-eye',
+        'crossed-out-eye',
+    ];
+    steroidsIcons.forEach(function (iconName) {
+        icons[iconName] = require("./svgs/".concat(iconName, ".svg"));
+    });
     Object.keys(coreIconsMap).forEach(function (name) {
         icons[name] = icons[coreIconsMap[name]];
     });

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/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/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/info.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_1063)">
+<circle cx="12.7461" cy="12" r="12" fill="#A7EFFF"/>
+<circle cx="12.7461" cy="7.25" r="0.75" transform="rotate(-180 12.7461 7.25)" fill="white"/>
+<line x1="12.7461" y1="16.75" x2="12.7461" y2="10.25" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
+</g>
+<defs>
+<clipPath id="clip0_126_1063">
+<rect width="24" height="24" fill="white" transform="translate(0.746094)"/>
+</clipPath>
+</defs>
+</svg>

package/icons/svgs/loader.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.07051 1.00041C5.8839 0.986525 4.71983 1.32482 3.72548 1.97252C2.73114 2.62022 1.9512 3.54823 1.48427 4.63919C1.01735 5.73016 0.884422 6.93509 1.1023 8.1016C1.32018 9.26812 1.87907 10.3438 2.70831 11.1927C3.53755 12.0416 4.59989 12.6255 5.76098 12.8706C6.92208 13.1157 8.12979 13.011 9.23139 12.5698C10.333 12.1285 11.279 11.3705 11.9498 10.3916C12.6206 9.41265 12.986 8.25681 12.9999 7.07021" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/icons/svgs/success.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="12" fill="#2BC945"/>
+<path d="M16.5 9L10.3125 15L7.5 12.2727" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/icons/svgs/visible-eye.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12" cy="12.4879" r="3.25" stroke="#323232" stroke-width="1.5"/>
+<path d="M20.188 11.4222C20.5762 11.8935 20.7703 12.1291 20.7703 12.4879C20.7703 12.8467 20.5762 13.0824 20.188 13.5536C18.7679 15.2778 15.6357 18.4879 12 18.4879C8.36427 18.4879 5.23206 15.2778 3.81197 13.5536C3.42381 13.0824 3.22973 12.8467 3.22973 12.4879C3.22973 12.1291 3.42381 11.8935 3.81197 11.4222C5.23206 9.69805 8.36427 6.48792 12 6.48792C15.6357 6.48792 18.7679 9.69805 20.188 11.4222Z" stroke="#323232" stroke-width="1.5"/>
+</svg>