fui-material 0.2.60 → 0.2.61

package/src/material/FGrid/css/bootstrap.min.css

@@ -1,7 +0,0 @@
-/*!
- * Generated using the Bootstrap Customizer (https://getbootstrap.com/docs/3.4/customize/)
- *//*!
- * Bootstrap v3.4.1 (https://getbootstrap.com/)
- * Copyright 2011-2019 Twitter, Inc.
- * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
- *//*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}html{font-size:10px;-webkit-tap-highlight-color:rgba(0,0,0,0)}body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;line-height:1.42857143;color:#333;background-color:#fff}input,button,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit}a{color:#337ab7;text-decoration:none}a:hover,a:focus{color:#23527c;text-decoration:underline}a:focus{outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}figure{margin:0}img{vertical-align:middle}.img-responsive{display:block;max-width:100%;height:auto}.img-rounded{border-radius:6px}.img-thumbnail{padding:4px;line-height:1.42857143;background-color:#fff;border:1px solid #ddd;border-radius:4px;-webkit-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out;display:inline-block;max-width:100%;height:auto}.img-circle{border-radius:50%}hr{margin-top:20px;margin-bottom:20px;border:0;border-top:1px solid #eee}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.sr-only-focusable:active,.sr-only-focusable:focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto}[role="button"]{cursor:pointer}.container{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}@media (min-width:768px){.container{width:750px}}@media (min-width:992px){.container{width:970px}}@media (min-width:1200px){.container{width:1170px}}.container-fluid{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}.row{margin-right:-15px;margin-left:-15px}.row-no-gutters{margin-right:0;margin-left:0}.row-no-gutters [class*="col-"]{padding-right:0;padding-left:0}.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12{position:relative;min-height:1px;padding-right:15px;padding-left:15px}.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12{float:left}.col-xs-12{width:100%}.col-xs-11{width:91.66666667%}.col-xs-10{width:83.33333333%}.col-xs-9{width:75%}.col-xs-8{width:66.66666667%}.col-xs-7{width:58.33333333%}.col-xs-6{width:50%}.col-xs-5{width:41.66666667%}.col-xs-4{width:33.33333333%}.col-xs-3{width:25%}.col-xs-2{width:16.66666667%}.col-xs-1{width:8.33333333%}.col-xs-pull-12{right:100%}.col-xs-pull-11{right:91.66666667%}.col-xs-pull-10{right:83.33333333%}.col-xs-pull-9{right:75%}.col-xs-pull-8{right:66.66666667%}.col-xs-pull-7{right:58.33333333%}.col-xs-pull-6{right:50%}.col-xs-pull-5{right:41.66666667%}.col-xs-pull-4{right:33.33333333%}.col-xs-pull-3{right:25%}.col-xs-pull-2{right:16.66666667%}.col-xs-pull-1{right:8.33333333%}.col-xs-pull-0{right:auto}.col-xs-push-12{left:100%}.col-xs-push-11{left:91.66666667%}.col-xs-push-10{left:83.33333333%}.col-xs-push-9{left:75%}.col-xs-push-8{left:66.66666667%}.col-xs-push-7{left:58.33333333%}.col-xs-push-6{left:50%}.col-xs-push-5{left:41.66666667%}.col-xs-push-4{left:33.33333333%}.col-xs-push-3{left:25%}.col-xs-push-2{left:16.66666667%}.col-xs-push-1{left:8.33333333%}.col-xs-push-0{left:auto}.col-xs-offset-12{margin-left:100%}.col-xs-offset-11{margin-left:91.66666667%}.col-xs-offset-10{margin-left:83.33333333%}.col-xs-offset-9{margin-left:75%}.col-xs-offset-8{margin-left:66.66666667%}.col-xs-offset-7{margin-left:58.33333333%}.col-xs-offset-6{margin-left:50%}.col-xs-offset-5{margin-left:41.66666667%}.col-xs-offset-4{margin-left:33.33333333%}.col-xs-offset-3{margin-left:25%}.col-xs-offset-2{margin-left:16.66666667%}.col-xs-offset-1{margin-left:8.33333333%}.col-xs-offset-0{margin-left:0}@media (min-width:768px){.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12{float:left}.col-sm-12{width:100%}.col-sm-11{width:91.66666667%}.col-sm-10{width:83.33333333%}.col-sm-9{width:75%}.col-sm-8{width:66.66666667%}.col-sm-7{width:58.33333333%}.col-sm-6{width:50%}.col-sm-5{width:41.66666667%}.col-sm-4{width:33.33333333%}.col-sm-3{width:25%}.col-sm-2{width:16.66666667%}.col-sm-1{width:8.33333333%}.col-sm-pull-12{right:100%}.col-sm-pull-11{right:91.66666667%}.col-sm-pull-10{right:83.33333333%}.col-sm-pull-9{right:75%}.col-sm-pull-8{right:66.66666667%}.col-sm-pull-7{right:58.33333333%}.col-sm-pull-6{right:50%}.col-sm-pull-5{right:41.66666667%}.col-sm-pull-4{right:33.33333333%}.col-sm-pull-3{right:25%}.col-sm-pull-2{right:16.66666667%}.col-sm-pull-1{right:8.33333333%}.col-sm-pull-0{right:auto}.col-sm-push-12{left:100%}.col-sm-push-11{left:91.66666667%}.col-sm-push-10{left:83.33333333%}.col-sm-push-9{left:75%}.col-sm-push-8{left:66.66666667%}.col-sm-push-7{left:58.33333333%}.col-sm-push-6{left:50%}.col-sm-push-5{left:41.66666667%}.col-sm-push-4{left:33.33333333%}.col-sm-push-3{left:25%}.col-sm-push-2{left:16.66666667%}.col-sm-push-1{left:8.33333333%}.col-sm-push-0{left:auto}.col-sm-offset-12{margin-left:100%}.col-sm-offset-11{margin-left:91.66666667%}.col-sm-offset-10{margin-left:83.33333333%}.col-sm-offset-9{margin-left:75%}.col-sm-offset-8{margin-left:66.66666667%}.col-sm-offset-7{margin-left:58.33333333%}.col-sm-offset-6{margin-left:50%}.col-sm-offset-5{margin-left:41.66666667%}.col-sm-offset-4{margin-left:33.33333333%}.col-sm-offset-3{margin-left:25%}.col-sm-offset-2{margin-left:16.66666667%}.col-sm-offset-1{margin-left:8.33333333%}.col-sm-offset-0{margin-left:0}}@media (min-width:992px){.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12{float:left}.col-md-12{width:100%}.col-md-11{width:91.66666667%}.col-md-10{width:83.33333333%}.col-md-9{width:75%}.col-md-8{width:66.66666667%}.col-md-7{width:58.33333333%}.col-md-6{width:50%}.col-md-5{width:41.66666667%}.col-md-4{width:33.33333333%}.col-md-3{width:25%}.col-md-2{width:16.66666667%}.col-md-1{width:8.33333333%}.col-md-pull-12{right:100%}.col-md-pull-11{right:91.66666667%}.col-md-pull-10{right:83.33333333%}.col-md-pull-9{right:75%}.col-md-pull-8{right:66.66666667%}.col-md-pull-7{right:58.33333333%}.col-md-pull-6{right:50%}.col-md-pull-5{right:41.66666667%}.col-md-pull-4{right:33.33333333%}.col-md-pull-3{right:25%}.col-md-pull-2{right:16.66666667%}.col-md-pull-1{right:8.33333333%}.col-md-pull-0{right:auto}.col-md-push-12{left:100%}.col-md-push-11{left:91.66666667%}.col-md-push-10{left:83.33333333%}.col-md-push-9{left:75%}.col-md-push-8{left:66.66666667%}.col-md-push-7{left:58.33333333%}.col-md-push-6{left:50%}.col-md-push-5{left:41.66666667%}.col-md-push-4{left:33.33333333%}.col-md-push-3{left:25%}.col-md-push-2{left:16.66666667%}.col-md-push-1{left:8.33333333%}.col-md-push-0{left:auto}.col-md-offset-12{margin-left:100%}.col-md-offset-11{margin-left:91.66666667%}.col-md-offset-10{margin-left:83.33333333%}.col-md-offset-9{margin-left:75%}.col-md-offset-8{margin-left:66.66666667%}.col-md-offset-7{margin-left:58.33333333%}.col-md-offset-6{margin-left:50%}.col-md-offset-5{margin-left:41.66666667%}.col-md-offset-4{margin-left:33.33333333%}.col-md-offset-3{margin-left:25%}.col-md-offset-2{margin-left:16.66666667%}.col-md-offset-1{margin-left:8.33333333%}.col-md-offset-0{margin-left:0}}@media (min-width:1200px){.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12{float:left}.col-lg-12{width:100%}.col-lg-11{width:91.66666667%}.col-lg-10{width:83.33333333%}.col-lg-9{width:75%}.col-lg-8{width:66.66666667%}.col-lg-7{width:58.33333333%}.col-lg-6{width:50%}.col-lg-5{width:41.66666667%}.col-lg-4{width:33.33333333%}.col-lg-3{width:25%}.col-lg-2{width:16.66666667%}.col-lg-1{width:8.33333333%}.col-lg-pull-12{right:100%}.col-lg-pull-11{right:91.66666667%}.col-lg-pull-10{right:83.33333333%}.col-lg-pull-9{right:75%}.col-lg-pull-8{right:66.66666667%}.col-lg-pull-7{right:58.33333333%}.col-lg-pull-6{right:50%}.col-lg-pull-5{right:41.66666667%}.col-lg-pull-4{right:33.33333333%}.col-lg-pull-3{right:25%}.col-lg-pull-2{right:16.66666667%}.col-lg-pull-1{right:8.33333333%}.col-lg-pull-0{right:auto}.col-lg-push-12{left:100%}.col-lg-push-11{left:91.66666667%}.col-lg-push-10{left:83.33333333%}.col-lg-push-9{left:75%}.col-lg-push-8{left:66.66666667%}.col-lg-push-7{left:58.33333333%}.col-lg-push-6{left:50%}.col-lg-push-5{left:41.66666667%}.col-lg-push-4{left:33.33333333%}.col-lg-push-3{left:25%}.col-lg-push-2{left:16.66666667%}.col-lg-push-1{left:8.33333333%}.col-lg-push-0{left:auto}.col-lg-offset-12{margin-left:100%}.col-lg-offset-11{margin-left:91.66666667%}.col-lg-offset-10{margin-left:83.33333333%}.col-lg-offset-9{margin-left:75%}.col-lg-offset-8{margin-left:66.66666667%}.col-lg-offset-7{margin-left:58.33333333%}.col-lg-offset-6{margin-left:50%}.col-lg-offset-5{margin-left:41.66666667%}.col-lg-offset-4{margin-left:33.33333333%}.col-lg-offset-3{margin-left:25%}.col-lg-offset-2{margin-left:16.66666667%}.col-lg-offset-1{margin-left:8.33333333%}.col-lg-offset-0{margin-left:0}}.clearfix:before,.clearfix:after,.container:before,.container:after,.container-fluid:before,.container-fluid:after,.row:before,.row:after{display:table;content:" "}.clearfix:after,.container:after,.container-fluid:after,.row:after{clear:both}.center-block{display:block;margin-right:auto;margin-left:auto}.pull-right{float:right !important}.pull-left{float:left !important}.hide{display:none !important}.show{display:block !important}.invisible{visibility:hidden}.text-hide{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0}.hidden{display:none !important}.affix{position:fixed}

package/src/material/FGrid/index.ts

@@ -1 +0,0 @@
-export { default } from "./FGrid";

package/src/material/FInputFileForm/FInputFileForm.css

@@ -1,95 +0,0 @@
-.custom-file {
-    position: relative;
-}
-
-.custom-file .custom-file-input:not([disabled]) {
-    cursor: pointer;
-}
-
-.custom-file .custom-file-input {
-    position: absolute;
-    z-index: 2;
-    width: 100%;
-    height: 100%;
-    margin: 0;
-    opacity: 0;
-}
-
-input[type="file"] {
-    display: block;
-}
-
-.custom-file.custom-file-dropzone .custom-file-label {
-    position: relative;
-    display: block;
-    background: rgba(47, 128, 237, 0.1);
-    border: 1px dashed #2F80ED;
-    border-radius: 8px;
-    padding: 20px;
-    padding-top: 10px;
-    text-align: center;
-    font-family: "SF UI Display", sans-serif;
-    font-size: 14px;
-    color: #7AAEF3;
-}
-
-.custom-file .custom-file-label {
-    cursor: pointer;
-    padding: 5px;
-}
-
-.custom-file.custom-file-dropzone .custom-file-label b, .custom-file.custom-file-dropzone .custom-file-label .svg-icon {
-    color: #2F80ED;
-}
-
-.custom-file .svg-icon {
-    color: #2F80ED;
-}
-
-.custom-file .svg-icon .icon-md, .svg-icon.lexicon-icon-md {
-    width: 32px;
-    height: 32px;
-}
-
-.custom-file svg:not(:root) {
-    overflow: hidden;
-}
-
-.custom-file .svg-icon {
-    display: inline-block;
-    fill: currentColor;
-    width: 22px;
-    height: 22px;
-    vertical-align: middle;
-}
-
-.custom-file.custom-file-dropzone .custom-file-label b, .custom-file.custom-file-dropzone .custom-file-label .svg-icon {
-    color: #2F80ED;
-}
-
-.custom-file b, strong {
-    font-weight: bold;
-}
-
-.custom-file.custom-file-dropzone .custom-file-label small {
-    font-size: 13px;
-}
-
-.custom-file small, .small {
-    font-size: 92%;
-}
-
-.custom-file small {
-    font-size: 80%;
-}
-
-.form-group .custom-files-preview {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    min-height: 34px;
-}
-
-.custom-file .hidden {
-    display: none !important;
-}

package/src/material/FInputFileForm/FInputFileForm.tsx

@@ -1,147 +0,0 @@
-import React, {FC, useEffect, useRef} from 'react';
-import "./FInputFileForm.css"
-
-export interface IFInputFileForm {
-    id?: string,
-    className?: string,
-    st?: React.CSSProperties,
-    dataMaxSize?: {
-        dimension: 'МБ' | 'КБ',
-        size: number
-    },
-    name?: string,
-    accept?: string,
-    multiple?: boolean,
-    onChange: (e: FileList) => void,
-    disabled?: boolean,
-    deleteFile?: boolean,
-    title?: string
-}
-
-const FInputFileForm: FC<IFInputFileForm> = ({
-                                                 id,
-                                                 className,
-                                                 st,
-                                                 dataMaxSize,
-                                                 name,
-                                                 accept,
-                                                 multiple = false,
-                                                 onChange,
-                                                 disabled = false,
-                                                 deleteFile,
-                                                 title
-                                             }) => {
-
-    let disabledColor: {
-        customFileLabel: React.CSSProperties | undefined,
-        svgIcon: React.CSSProperties | undefined,
-        span: React.CSSProperties | undefined,
-        b: React.CSSProperties | undefined,
-    } = {
-        customFileLabel: undefined,
-        svgIcon: undefined,
-        span: undefined,
-        b: undefined,
-    }
-
-    if (disabled) {
-        disabledColor = {
-            customFileLabel: {
-                backgroundColor: '#F3F3F3',
-                borderRadius: '8px',
-                border: '1px dashed #C4C4C4'
-            },
-            svgIcon: {
-                color: '#888888'
-            },
-            span: {
-                color: '#C4C4C4'
-            },
-            b: {
-                color: '#888888'
-            }
-        }
-    }
-
-    const inputRef = useRef<{
-        value: null | undefined
-    }>({
-        value: undefined
-    });
-
-    useEffect(() => {
-        if (deleteFile) {
-            inputRef.current.value = null
-        }
-    }, [deleteFile])
-
-    return (
-        <React.Fragment>
-            <div
-                className="custom-file custom-file-dropzone"
-                style={st}
-            >
-                <input
-                    accept={accept}
-                    type="file"
-                    className={`custom-file-input ${className !== undefined ? className : ''}`}
-                    name={name}
-                    id={id}
-                    title={title}
-                    data-max-size={dataMaxSize?.size}
-                    multiple={multiple}
-                    onChange={(e) => {
-
-                        if (e.target.files && e.target.files[0]) {
-
-                            let maximumSize: number | undefined = undefined
-
-                            if (dataMaxSize?.dimension === 'МБ') {
-                                maximumSize = dataMaxSize.size * 1024 * 1024 // Перевод из мегабайт в байты
-                            } else if (dataMaxSize?.dimension === 'КБ') (
-                                maximumSize = dataMaxSize.size * 1024 // Перевод из килобайт в байты
-                            )
-                            if (maximumSize !== undefined) {
-                                const dt = new DataTransfer()
-                                Object.values(e.target.files).forEach((file) => {
-                                    //@ts-ignore
-                                    if (file.size <= maximumSize) dt.items.add(file)
-                                })
-                                onChange(dt.files)
-                            } else {
-                                onChange(e.target.files)
-                            }
-                        }
-                    }}
-                    disabled={disabled}
-                    //@ts-ignore
-                    ref={inputRef}
-                />
-                <label
-                    className="custom-file-label"
-                    style={disabledColor.customFileLabel}
-                >
-                    <svg
-                        className="svg-icon icon-md"
-                        focusable="false"
-                        role="img"
-                        viewBox="0 0 36 35"
-                        style={disabledColor.svgIcon}
-                    >
-                        <path
-                            d="M19.035 16.465a1.458 1.458 0 0 0-2.041 0l-4.376 4.229a1.459 1.459 0 1 0 2.013 2.1l1.91-1.852v8.225a1.458 1.458 0 1 0 2.917 0v-8.152l1.881 1.895a1.459 1.459 0 0 0 2.071 0 1.457 1.457 0 0 0 0-2.07l-4.375-4.375z"/>
-                        <path
-                            d="M26.269 10.208a8.75 8.75 0 0 0-16.538 0 7.292 7.292 0 0 0-4.491 12.06 1.457 1.457 0 1 0 2.187-1.851 4.375 4.375 0 0 1 3.282-7.292h.145a1.458 1.458 0 0 0 1.459-1.167 5.833 5.833 0 0 1 11.433 0 1.458 1.458 0 0 0 1.458 1.167h.088a4.376 4.376 0 0 1 3.281 7.292 1.457 1.457 0 0 0 .131 2.07 1.458 1.458 0 0 0 1.563.235c.189-.085.357-.21.494-.366a7.292 7.292 0 0 0-4.492-12.148z"/>
-                    </svg>
-                    <br/>
-                    <span style={disabledColor.span}>
-                        <b style={disabledColor.b}>Выберите</b> или переместите файл для загрузки<br/> <small>Максимальный
-                    размер {dataMaxSize?.size} {dataMaxSize?.dimension}</small>
-                    </span>
-                </label>
-            </div>
-        </React.Fragment>
-    );
-};
-
-export default FInputFileForm;

package/src/material/FInputFileForm/index.ts

@@ -1 +0,0 @@
-export { default } from "./FInputFileForm"

package/src/material/FNative/FNative.css

@@ -1,41 +0,0 @@
-.f-form-native {
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-}
-
-.f-native-label {
-    padding-left: 11px;
-}
-
-.f-form-native .f-native {
-    min-width: 120px;
-    border: 1px solid rgba(0, 0, 0, 0.3);
-    appearance: none;
-    user-select: none;
-    border-radius: 4px;
-    cursor: pointer;
-    font: inherit;
-    letter-spacing: inherit;
-    color: currentcolor;
-    box-sizing: content-box;
-    background: none;
-    margin: 0px;
-    -webkit-tap-highlight-color: transparent;
-    display: block;
-    width: 100%;
-    animation-name: fui-auto-fill-cancel;
-    animation-duration: 10ms;
-    padding: 5.5px 14px;
-}
-
-.f-form-native .f-native:hover {
-    border-color: #2f80ed;
-}
-.f-form-native .f-native:focus-visible {
-    outline: 0;
-}
-
-.f-form-native .f-native option:active {
-    background-color: red;
-}

package/src/material/FNative/FNative.tsx

@@ -1,97 +0,0 @@
-import React, {FC} from "react"
-import "./FNative.css"
-
-export interface IFNative {
-    label: string,
-    id?: string,
-    className?: string,
-    st?: React.CSSProperties,
-    children?: React.ReactChild | React.ReactNode,
-    value?: string[] | number[],
-    singleChoice?: (element: string[]) => void,
-    multipleChoice?: (element: string[]) => void,
-    disabled?: boolean,
-    size?: number,
-    overflowX?: boolean,
-    width?: number | 'auto' | 'fit-content' | 'inherit' | 'initial' | 'max-content' | 'min-content' | 'revert' | 'unset' | '-webkit-fill-available'
-    fullWidth?: boolean
-}
-
-const FNative: FC<IFNative> = ({
-                                   label,
-                                   id,
-                                   className,
-                                   st,
-                                   children,
-                                   value,
-                                   singleChoice,
-                                   multipleChoice,
-                                   disabled,
-                                   size = 4,
-                                   overflowX,
-                                   width = '-webkit-fill-available',
-                                   fullWidth
-                               }) => {
-
-    const handleSingleChoice = (event: React.ChangeEvent<HTMLSelectElement>) => {
-        if (singleChoice) {
-            let a = []
-            a.push(event.target.value)
-            singleChoice(a)
-        }
-    }
-
-    const handlerMultipleChoice = (event: React.ChangeEvent<HTMLSelectElement>) => {
-        const {options} = event.target;
-        const value: string[] = [];
-        for (let i = 0, l = options.length; i < l; i += 1) {
-            if (options[i].selected) {
-                value.push(options[i].value);
-            }
-        }
-        if (multipleChoice) {
-            multipleChoice(value)
-        }
-    }
-
-    if (fullWidth) {
-        if (st === undefined) {
-            st = {
-                width: '100%'
-            }
-        } else {
-            st.width = '100%'
-        }
-    }
-
-    return (
-        <React.Fragment>
-            <div className={`f-form-native ${className !== undefined ? className : ''}`} style={st} id={id}>
-                <label className={'f-native-label'}>{label}</label>
-                <select
-                    style={{
-                        overflowX: overflowX ? 'auto' : 'hidden',
-                        width: width
-                    }}
-                    size={size}
-                    disabled={disabled}
-                    //@ts-ignore
-                    value={value}
-                    multiple={true}
-                    className={'f-native'}
-                    onChange={(event) => {
-                        if (singleChoice) {
-                            handleSingleChoice(event)
-                        } else if (multipleChoice) {
-                            handlerMultipleChoice(event)
-                        }
-                    }}>
-                    {children}
-                </select>
-            </div>
-        </React.Fragment>
-    )
-
-}
-
-export default FNative

package/src/material/FNative/index.ts

@@ -1 +0,0 @@
-export { default } from "./FNative";

package/src/material/FOpenImgFull/FOpenImgFull.css

@@ -1,10 +0,0 @@
-.fv-opn-img-full-body {
-    position: relative;
-    padding: 20px 30px 15px;
-}
-
-.fv-opn-img-full-body {
-    position: relative;
-    flex: 1 1 auto;
-    padding: var(--bs-modal-padding);
-}

package/src/material/FOpenImgFull/FOpenImgFull.tsx

@@ -1,109 +0,0 @@
-import React, {FC} from 'react';
-import {FStack, FDialog} from "../index";
-import './FOpenImgFull.css'
-import {FArrowIcon, FCloseIcon} from "../../icons";
-
-export interface IFOpenImgFull {
-    id?: string,
-    className?: string,
-    st?: React.CSSProperties,
-    imagesUrl: string[],
-    selectedImg: number,
-    handleClose?: () => void,
-    setSelectedImg: (number: number) => void,
-    openAndClose: boolean
-}
-
-const FOpenImgFull: FC<IFOpenImgFull> = ({
-                                             id,
-                                             className,
-                                             st,
-                                             imagesUrl,
-                                             selectedImg,
-                                             setSelectedImg,
-                                             handleClose,
-                                             openAndClose
-                                         }) => {
-
-    let style: React.CSSProperties = {
-        boxShadow: '2px 2px 10px 5px rgb(0 0 0 / 0%)',
-        backgroundColor: "inherit",
-        overflow: "inherit",
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        maxWidth: '80%',
-        maxHeight: '80%',
-        padding: '90px'
-    }
-
-    if (st !== undefined) {
-        style = Object.assign(style, st)
-    }
-
-    return (
-        <React.Fragment>
-            {imagesUrl.length !== 0 && selectedImg >= 0 && selectedImg < imagesUrl.length &&
-                <FDialog
-                    openAndClose={openAndClose}
-                    st={style}
-                    className={className}
-                    id={id}
-                >
-                    <div className={'fv-opn-img-full-body'}>
-                        <FStack
-                            direction={'row-reverse'}
-                            spacing={2}
-                        >
-                            <div
-                                style={{
-                                    position: 'fixed',
-                                    top: '70px',
-                                    right: '20px'
-                                }}
-                            >
-                                {handleClose !== undefined &&
-                                    <FCloseIcon
-                                        handleClose={() => {
-                                            handleClose()
-                                            document.body.style.overflow = 'auto'
-                                        }}
-                                    />
-                                }
-                            </div>
-                            <FStack direction={'row'} spacing={2} alignItems={'center'} justifyContent={'center'}>
-                                {selectedImg > 0 ?
-                                    <FArrowIcon
-                                        direction={'left'}
-                                        handleClick={() => setSelectedImg(selectedImg - 1)}
-                                    />
-                                    :
-                                    <div style={{width:'35px', height:'35px'}}>ㅤ</div>
-                                }
-                                <img
-                                    className={'open-full-img'}
-                                    src={imagesUrl[selectedImg]}
-                                    style={{
-                                        objectFit: 'contain',
-                                        width: '100%',
-                                        maxHeight: '80%',
-                                    }}
-                                />
-                                {selectedImg < imagesUrl.length - 1 ?
-                                    <FArrowIcon
-                                        direction={'right'}
-                                        handleClick={() => setSelectedImg(selectedImg + 1)}
-                                    />
-                                    :
-                                    <div style={{width:'35px', height:'35px'}}>ㅤ</div>
-                                }
-                            </FStack>
-                        </FStack>
-                    </div>
-                </FDialog>
-            }
-        </React.Fragment>
-    );
-};
-
-export default FOpenImgFull;

package/src/material/FOpenImgFull/index.ts

@@ -1 +0,0 @@
-export { default } from "./FOpenImgFull";

package/src/material/FPagination/FPagination.css

@@ -1,59 +0,0 @@
-.pagination-container {
-    display: flex;
-    list-style-type: none;
-}
-.pagination-container .pagination-item {
-    padding: 0 12px;
-    height: 32px;
-    text-align: center;
-    margin: auto 4px;
-    color: rgba(0, 0, 0, 0.87);
-    display: flex;
-    box-sizing: border-box;
-    align-items: center;
-    letter-spacing: 0.01071em;
-    border-radius: 4px;
-    line-height: 1.43;
-    font-size: 13px;
-    min-width: 32px;
-}
-.pagination-container .pagination-item.dots:hover {
-    background-color: transparent;
-    cursor: default;
-}
-.pagination-container .pagination-item:hover {
-    background-color: rgba(0, 0, 0, 0.04);
-    cursor: pointer;
-}
-.pagination-container .pagination-item.selected {
-    background-color: #2F80ED;
-    color: white;
-}
-.pagination-container .pagination-item .arrow::before {
-    position: relative;
-    /* top: 3pt; Uncomponent this to lower the icons as requested in components*/
-    content: '';
-    /* By using an em scale, the arrows will size with the font */
-    display: inline-block;
-    width: 0.4em;
-    height: 0.4em;
-    border-right: 0.12em solid rgba(0, 0, 0, 0.87);
-    border-top: 0.12em solid rgba(0, 0, 0, 0.87);
-}
-.pagination-container .pagination-item .arrow.left {
-    transform: rotate(-135deg) translate(-50%);
-}
-.pagination-container .pagination-item .arrow.right {
-    transform: rotate(45deg);
-}
-.pagination-container .pagination-item.disabled {
-    pointer-events: none;
-}
-.pagination-container .pagination-item.disabled .arrow::before {
-    border-right: 0.12em solid rgba(0, 0, 0, 0.43);
-    border-top: 0.12em solid rgba(0, 0, 0, 0.43);
-}
-.pagination-container .pagination-item.disabled:hover {
-    background-color: transparent;
-    cursor: default;
-}