Merge pull request #212 from LcsGrz/main

[FEATURE] Solucion basica con todos los requisitos

src/components/LcsGrz/Components/AboutMe/AboutMe.css

@@ -0,0 +1,13 @@
+.lcsgrz-am-container {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ padding: 0 20px;
+ border-radius: 16px;
+ color: #7b32d9;
+ border-width: 2px;
+ border-color: #7b32d9;
+ background-color: #7a32d912;
+ font-size: 32px;
+ font-weight: bold;
+}

src/components/LcsGrz/Components/AboutMe/AboutMe.jsx

@@ -0,0 +1,56 @@
+// @vendors
+import React from 'react'
+// @components
+import Divider from '../Divider/Divider'
+// @media
+import Email from './Media/Email'
+import Linkedin from './Media/Linkedin'
+import Github from './Media/Github'
+import Instagram from './Media/Instagram'
+// @styles
+import './AboutMe.css'
+
+// ─────────────── ∞ ───────────────
+
+const iconColor = '#7b32d9'
+const iconSize = 30
+const dividerWidth = 26
+
+// ─────────────── ∞ ───────────────
+
+export default function AboutMe() {
+ const openInNewTab = (url) => () => {
+ window.open(url, '_blank', 'noopener,noreferrer')
+ }
+
+ const sendEmail = () => {
+ navigator.clipboard.writeText('[email protected]')
+ window.open('mailto:[email protected]')
+ }
+
+ return (
+ <div className='lcsgrz-am-container'>
+ <Email size={iconSize} color={iconColor} onClick={sendEmail} />
+ <Divider width={dividerWidth} />
+ <Linkedin
+ size={iconSize}
+ color={iconColor}
+ onClick={openInNewTab('https://www.linkedin.com/in/lcsgrz/')}
+ />
+ <Divider width={dividerWidth} />
+ <label className='lcsgrz-am-label'>LCSGRZ</label>
+ <Divider width={dividerWidth} />
+ <Github
+ size={iconSize}
+ color={iconColor}
+ onClick={openInNewTab('https://github.com/LcsGrz')}
+ />
+ <Divider width={dividerWidth} />
+ <Instagram
+ size={iconSize}
+ color={iconColor}
+ onClick={openInNewTab('https://www.instagram.com/lcs.grz/')}
+ />
+ </div>
+ )
+}

src/components/LcsGrz/Components/AboutMe/Media/Email.jsx

@@ -0,0 +1,21 @@
+// @vendors
+import React from 'react'
+// @styles
+import './Media.css'
+
+// ─────────────── ∞ ───────────────
+
+export default ({ onClick, size, color }) => (
+ <svg
+ className='lcsgrz-ab-media'
+ version='1.1'
+ viewBox='0 0 41 40'
+ xmlns='http:https://www.w3.org/2000/svg'
+ width={size}
+ height={size}
+ onClick={onClick}
+ fill={color}
+ >
+ <path d='m20.5 0a20 20 0 0 0-20 20 20 20 0 0 0 20 20 20 20 0 0 0 20-20 20 20 0 0 0-20-20zm-12.02 11h24.039c0.36535 0 0.70817 0.098916 1.002 0.27148l-10.709 10.709c-0.56825 0.56825-1.3284 0.85352-2.3125 0.85352s-1.7442-0.28526-2.3125-0.85352l-10.709-10.709c0.29379-0.17257 0.6366-0.27148 1.002-0.27148zm-1.709 0.97852 8.0215 8.0215-8.0215 8.0215c-0.17257-0.29379-0.27148-0.6366-0.27148-1.002v-14.039c0-0.36535 0.098918-0.70817 0.27148-1.002zm27.457 0c0.17256 0.29379 0.27148 0.6366 0.27148 1.002v14.039c0 0.36535-0.098916 0.70817-0.27148 1.002l-8.0215-8.0215 8.0215-8.0215zm-18.729 8.7285 1.9805 1.9805c0.76508 0.76508 1.7814 1.1465 3.0195 1.1465s2.2545-0.3814 3.0195-1.1465l1.9805-1.9805 8.0215 8.0215c-0.29379 0.17256-0.6366 0.27148-1.002 0.27148h-24.039c-0.36535 0-0.70817-0.098919-1.002-0.27148l8.0215-8.0215z' />
+ </svg>
+)

src/components/LcsGrz/Components/AboutMe/Media/Github.jsx

@@ -0,0 +1,21 @@
+// @vendors
+import React from 'react'
+// @styles
+import './Media.css'
+
+// ─────────────── ∞ ───────────────
+
+export default ({ onClick, size, color }) => (
+ <svg
+ className='lcsgrz-ab-media'
+ version='1.1'
+ viewBox='0 0 16 16'
+ xmlns='http:https://www.w3.org/2000/svg'
+ width={size}
+ height={size}
+ onClick={onClick}
+ fill={color}
+ >
+ <path d='m6.6477 15.898c-2.8628-0.47992-5.3163-2.5892-6.2486-5.372-0.65339-1.9502-0.49708-4.2502 0.41216-6.0651 0.94247-1.8812 2.6708-3.3871 4.6475-4.0493 4.1743-1.3985 8.729 0.87993 10.132 5.0686 1.3938 4.1604-0.89101 8.7178-5.0731 10.119-1.1714 0.39246-2.6369 0.50562-3.8703 0.29886zm2.6242-1.3857 0.36111-0.07881-0.02194-1.3329c-0.02039-1.239-0.0327-1.3511-0.17458-1.5912-0.083916-0.14203-0.15261-0.28005-0.15261-0.30671 0-0.0267 0.20435-0.08723 0.45411-0.13463 1.6162-0.30659 2.4625-1.4422 2.4625-3.3043 0-0.77618-0.10151-1.2013-0.39858-1.6697-0.19422-0.30621-0.19892-0.33387-0.16701-0.98352 0.022764-0.46307 0.004139-0.76223-0.061462-0.97367-0.091884-0.29745-0.10109-0.30493-0.36103-0.29364-0.31375 0.013658-0.80894 0.2151-1.2343 0.50215l-0.30373 0.20498-0.50774-0.105c-0.64965-0.13435-1.6934-0.13435-2.343 0l-0.50774 0.105-0.30373-0.20498c-0.42532-0.28705-0.92051-0.48851-1.2343-0.50215-0.2599-0.011278-0.26911-0.0041389-0.36104 0.29364-0.065291 0.21145-0.084226 0.5106-0.061463 0.97367 0.031869 0.64965 0.027213 0.67731-0.16701 0.98351-0.2971 0.46838-0.39859 0.89352-0.39859 1.6697 0 1.8548 0.83607 2.9845 2.4418 3.2993 0.24249 0.0476 0.45064 0.09281 0.46257 0.10068 0.011899 0.0083-0.037767 0.13161-0.11043 0.27511-0.072637 0.14352-0.15301 0.35782-0.17856 0.47622-0.055151 0.25589-0.28881 0.36125-0.80088 0.36125-0.4446 0-0.77628-0.16715-0.99293-0.50038-0.44288-0.68122-1.0005-1.0734-1.3627-0.95841-0.20054 0.06363-0.17424 0.1257 0.20581 0.48552 0.23678 0.22418 0.4243 0.49588 0.60557 0.87744 0.41976 0.8835 0.88991 1.165 1.8333 1.0974l0.47394-0.03394v1.1932l0.3561 0.07015c0.19585 0.03859 0.44767 0.08404 0.55959 0.10102 0.33123 0.05026 1.5991-0.01102 1.989-0.09612z' />
+ </svg>
+)

src/components/LcsGrz/Components/AboutMe/Media/Instagram.jsx

@@ -0,0 +1,21 @@
+// @vendors
+import React from 'react'
+// @styles
+import './Media.css'
+
+// ─────────────── ∞ ───────────────
+
+export default ({ onClick, size, color }) => (
+ <svg
+ className='lcsgrz-ab-media'
+ version='1.1'
+ viewBox='0 0 19.2 19.2'
+ xmlns='http:https://www.w3.org/2000/svg'
+ width={size}
+ height={size}
+ onClick={onClick}
+ fill={color}
+ >
+ <path d='m9.5996 0a9.6 9.6 0 1 0 9.5996 9.5996 9.6 9.6 0 0 0-9.5996-9.5996zm0 4.5996c1.358 0 1.5285 0.00725 2.0625 0.03125a3.67 3.67 0 0 1 1.2129 0.23242 2.556 2.556 0 0 1 1.4629 1.4609 3.67 3.67 0 0 1 0.23242 1.2129c0.024 0.534 0.029297 0.7045 0.029297 2.0625 0 1.358-0.005297 1.5285-0.029297 2.0625a3.67 3.67 0 0 1-0.23242 1.2129 2.556 2.556 0 0 1-1.4629 1.4629 3.67 3.67 0 0 1-1.2129 0.23242c-0.534 0.024-0.7045 0.029297-2.0625 0.029297-1.358 0-1.5285-0.005297-2.0625-0.029297a3.67 3.67 0 0 1-1.2129-0.23242 2.556 2.556 0 0 1-1.4609-1.4629 3.67 3.67 0 0 1-0.23242-1.2129c-0.024-0.534-0.03125-0.7045-0.03125-2.0625 0-1.358 0.00725-1.5285 0.03125-2.0625a3.67 3.67 0 0 1 0.23242-1.2129 2.556 2.556 0 0 1 1.4609-1.4609 3.67 3.67 0 0 1 1.2129-0.23242c0.534-0.024 0.7045-0.03125 2.0625-0.03125zm0 0.90039c-1.335 0-1.4925 0.0052969-2.0195 0.029297a2.766 2.766 0 0 0-0.92969 0.17188 1.656 1.656 0 0 0-0.94922 0.95117 2.766 2.766 0 0 0-0.17188 0.92773c-0.024 0.527-0.029297 0.68453-0.029297 2.0195 0 1.335 0.0052969 1.4925 0.029297 2.0195a2.766 2.766 0 0 0 0.17188 0.92969 1.656 1.656 0 0 0 0.95117 0.94922 2.766 2.766 0 0 0 0.92773 0.17188c0.527 0.024 0.68453 0.029297 2.0195 0.029297 1.335 0 1.4925-0.005297 2.0195-0.029297a2.766 2.766 0 0 0 0.92969-0.17188 1.656 1.656 0 0 0 0.94922-0.94922 2.766 2.766 0 0 0 0.17188-0.92969c0.024-0.527 0.029297-0.68453 0.029297-2.0195 0-1.335-0.005297-1.4925-0.029297-2.0195a2.766 2.766 0 0 0-0.17188-0.92969 1.656 1.656 0 0 0-0.94922-0.94922 2.766 2.766 0 0 0-0.92969-0.17188c-0.527-0.024-0.68453-0.029297-2.0195-0.029297zm2.8984 0.87695a0.6 0.6 0 0 1 0.37109 0.55469 0.6 0.6 0 0 1-0.59961 0.59961 0.6 0.6 0 1 1 0.22852-1.1543zm-2.8984 0.6543a2.568 2.568 0 0 1 2.5684 2.5684 2.568 2.568 0 0 1-2.5684 2.5684 2.5684 2.5684 0 0 1 0-5.1367zm0 0.90234a1.667 1.667 0 0 0-1.666 1.666 1.667 1.667 0 0 0 1.666 1.668 1.667 1.667 0 0 0 1.668-1.668 1.667 1.667 0 0 0-1.668-1.666z' />
+ </svg>
+)

src/components/LcsGrz/Components/AboutMe/Media/Linkedin.jsx

@@ -0,0 +1,20 @@
+// @vendors
+import React from 'react'
+// @styles
+import './Media.css'
+
+// ─────────────── ∞ ───────────────
+
+export default ({ onClick, size, color }) => (
+ <svg
+ className='lcsgrz-ab-media'
+ xmlns='http:https://www.w3.org/2000/svg'
+ viewBox='0 0 50 50'
+ width={size}
+ height={size}
+ onClick={onClick}
+ fill={color}
+ >
+ <path d='M25,2C12.318,2,2,12.317,2,25s10.318,23,23,23s23-10.317,23-23S37.682,2,25,2z M18,35h-4V20h4V35z M16,17 c-1.105,0-2-0.895-2-2c0-1.105,0.895-2,2-2s2,0.895,2,2C18,16.105,17.105,17,16,17z M37,35h-4v-5v-2.5c0-1.925-1.575-3.5-3.5-3.5 S26,25.575,26,27.5V35h-4V20h4v1.816C27.168,20.694,28.752,20,30.5,20c3.59,0,6.5,2.91,6.5,6.5V35z' />
+ </svg>
+)

src/components/LcsGrz/Components/AboutMe/Media/Media.css

@@ -0,0 +1,3 @@
+.lcsgrz-ab-media {
+ cursor: pointer;
+}

src/components/LcsGrz/Components/CheckBox/CheckBox.css

@@ -0,0 +1,39 @@
+.lcsgrz-cb-container-checked {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ width: 100%;
+ padding: 12px;
+ border-radius: 10px;
+ font-size: 14px;
+ color: white;
+ background-color: #7b32d9;
+ border-width: 2px;
+ border-color: #7b32d9;
+}
+
+.lcsgrz-cb-container-unchecked {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ width: 100%;
+ padding: 12px;
+ border-radius: 10px;
+ font-size: 14px;
+ color: white;
+ border-width: 2px;
+ border-color: #7b32d9;
+ background-color: #7a32d932;
+}
+
+.lcsgrz-cb-label-box {
+ display: flex;
+ justify-content: flex-start;
+ align-items: center;
+ pointer-events: none;
+}
+
+.lcsgrz-cb-hint {
+ font-size: 11px;
+ pointer-events: none;
+}

src/components/LcsGrz/Components/CheckBox/CheckBox.jsx

@@ -0,0 +1,29 @@
+// @vendors
+import React from 'react'
+// @components
+import Divider from '../Divider/Divider'
+// @media
+import CheckMark from './Media/CheckMark'
+// @styles
+import './CheckBox.css'
+
+// ─────────────── ∞ ───────────────
+
+export default function CheckBox({ name, label, hint, onChange, isChecked, disabled }) {
+ return (
+ <button
+ className={isChecked ? 'lcsgrz-cb-container-checked' : 'lcsgrz-cb-container-unchecked'}
+ type='button'
+ onClick={onChange}
+ disabled={disabled}
+ name={name}
+ >
+ <div className='lcsgrz-cb-label-box'>
+ <label>{label}</label>
+ <Divider width={10} />
+ <label className='lcsgrz-cb-hint'>{hint}</label>
+ </div>
+ {isChecked && <CheckMark size={15} color='white' />}
+ </button>
+ )
+}

src/components/LcsGrz/Components/CheckBox/Media/CheckMark.jsx

@@ -0,0 +1,20 @@
+// @vendors
+import React from 'react'
+
+// ─────────────── ∞ ───────────────
+
+export default ({ size, color }) => (
+ <svg
+ version='1.1'
+ viewBox='0 0 119.9 89.723'
+ xmlns='http:https://www.w3.org/2000/svg'
+ width={size}
+ height={size}
+ fill={color}
+ >
+ <path
+ d='m39.379 89.584c-0.57664-0.13918-1.4823-0.48167-2.0127-0.76107-0.53033-0.2794-8.8775-7.6783-18.549-16.442-12.523-11.347-17.766-16.316-18.215-17.261-0.84934-1.7899-0.79362-4.5782 0.12758-6.3839 1.8233-3.5739 6.472-4.8681 9.8821-2.7513 0.6785 0.4212 7.5591 6.506 15.29 13.522 7.7311 7.0157 14.236 12.756 14.456 12.756 0.21964 0 14.322-14.578 31.338-32.396 40.889-42.815 37.054-38.941 39.18-39.573 3.3625-0.99856 6.9925 0.62215 8.4977 3.794 0.74395 1.5678 0.69743 4.2406-0.10386 5.9674-0.84446 1.8199-73.156 77.623-75.054 78.679-1.5893 0.88369-3.3871 1.1997-4.836 0.84992z'
+ stroke-width='.34948'
+ />
+ </svg>
+)

src/components/LcsGrz/Components/Divider/Divider.jsx

@@ -0,0 +1,8 @@
+// @vendors
+import React from 'react'
+
+// ─────────────── ∞ ───────────────
+
+export default function Divider({ height = 0, width = 0 }) {
+ return <div style={{ width, height }} />
+}

src/components/LcsGrz/Components/PasswordBox/Media/CopyIcon.jsx

@@ -0,0 +1,21 @@
+// @vendors
+import React from 'react'
+// @styles
+import './Media.css'
+
+// ─────────────── ∞ ───────────────
+
+export default ({ onClick, size, color }) => (
+ <div className='lcsgrz-pb-button' onClick={onClick}>
+ <svg
+ className='lcsgrz-pb-button-svg'
+ xmlns='http:https://www.w3.org/2000/svg'
+ viewBox='0 0 115.77 122.88'
+ width={size}
+ height={size}
+ fill={color}
+ >
+ <path d='M89.62,13.96v7.73h12.19h0.01v0.02c3.85,0.01,7.34,1.57,9.86,4.1c2.5,2.51,4.06,5.98,4.07,9.82h0.02v0.02 v73.27v0.01h-0.02c-0.01,3.84-1.57,7.33-4.1,9.86c-2.51,2.5-5.98,4.06-9.82,4.07v0.02h-0.02h-61.7H40.1v-0.02 c-3.84-0.01-7.34-1.57-9.86-4.1c-2.5-2.51-4.06-5.98-4.07-9.82h-0.02v-0.02V92.51H13.96h-0.01v-0.02c-3.84-0.01-7.34-1.57-9.86-4.1 c-2.5-2.51-4.06-5.98-4.07-9.82H0v-0.02V13.96v-0.01h0.02c0.01-3.85,1.58-7.34,4.1-9.86c2.51-2.5,5.98-4.06,9.82-4.07V0h0.02h61.7 h0.01v0.02c3.85,0.01,7.34,1.57,9.86,4.1c2.5,2.51,4.06,5.98,4.07,9.82h0.02V13.96L89.62,13.96z M79.04,21.69v-7.73v-0.02h0.02 c0-0.91-0.39-1.75-1.01-2.37c-0.61-0.61-1.46-1-2.37-1v0.02h-0.01h-61.7h-0.02v-0.02c-0.91,0-1.75,0.39-2.37,1.01 c-0.61,0.61-1,1.46-1,2.37h0.02v0.01v64.59v0.02h-0.02c0,0.91,0.39,1.75,1.01,2.37c0.61,0.61,1.46,1,2.37,1v-0.02h0.01h12.19V35.65 v-0.01h0.02c0.01-3.85,1.58-7.34,4.1-9.86c2.51-2.5,5.98-4.06,9.82-4.07v-0.02h0.02H79.04L79.04,21.69z M105.18,108.92V35.65v-0.02 h0.02c0-0.91-0.39-1.75-1.01-2.37c-0.61-0.61-1.46-1-2.37-1v0.02h-0.01h-61.7h-0.02v-0.02c-0.91,0-1.75,0.39-2.37,1.01 c-0.61,0.61-1,1.46-1,2.37h0.02v0.01v73.27v0.02h-0.02c0,0.91,0.39,1.75,1.01,2.37c0.61,0.61,1.46,1,2.37,1v-0.02h0.01h61.7h0.02 v0.02c0.91,0,1.75-0.39,2.37-1.01c0.61-0.61,1-1.46,1-2.37h-0.02V108.92L105.18,108.92z' />
+ </svg>
+ </div>
+)

src/components/LcsGrz/Components/PasswordBox/Media/HiddenIcon.jsx

@@ -0,0 +1,20 @@
+// @vendors
+import React from 'react'
+// @styles
+import './Media.css'
+
+// ─────────────── ∞ ───────────────
+
+export default ({ onClick, size, color }) => (
+ <svg
+ className='lcsgrz-pb-media'
+ xmlns='http:https://www.w3.org/2000/svg'
+ viewBox='0 0 122.88 53.37'
+ width={size}
+ height={size}
+ onClick={onClick}
+ fill={color}
+ >
+ <path d='M1.05,7.37A4.49,4.49,0,1,1,7.93,1.61a114.61,114.61,0,0,0,14.88,15C35.48,27,48.63,32.25,61.67,32.24S87.79,27,100.37,16.49A112.38,112.38,0,0,0,114.94,1.64a4.48,4.48,0,0,1,6.92,5.69,129.09,129.09,0,0,1-10,10.85l5.91,5.42a4.47,4.47,0,1,1-6,6.6l-6.59-6a86.1,86.1,0,0,1-13.43,9.06l3.73,8A4.48,4.48,0,0,1,87.35,45l-3.74-8a61.24,61.24,0,0,1-17.56,4V48.9a4.48,4.48,0,0,1-8.95,0V41A61.75,61.75,0,0,1,39.58,37l-3.76,8a4.48,4.48,0,1,1-8.11-3.79l3.74-8A88.78,88.78,0,0,1,18,24.2l-6.55,6a4.47,4.47,0,1,1-6-6.6l5.83-5.34A130.63,130.63,0,0,1,1.05,7.37Z' />
+ </svg>
+)

src/components/LcsGrz/Components/PasswordBox/Media/Media.css

@@ -0,0 +1,19 @@
+.lcsgrz-pb-media {
+ cursor: pointer;
+}
+
+.lcsgrz-pb-button-svg {
+ cursor: pointer;
+ pointer-events: none;
+}
+
+.lcsgrz-pb-button {
+ background-color: #7b32d9;
+ cursor: pointer;
+ height: 64px;
+ width: 64px;
+ border-radius: 8px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}

src/components/LcsGrz/Components/PasswordBox/Media/ReloadIcon.jsx

@@ -0,0 +1,21 @@
+// @vendors
+import React from 'react'
+// @styles
+import './Media.css'
+
+// ─────────────── ∞ ───────────────
+
+export default ({ onClick, size, color }) => (
+ <div className='lcsgrz-pb-button' onClick={onClick}>
+ <svg
+ className='lcsgrz-pb-button-svg'
+ xmlns='http:https://www.w3.org/2000/svg'
+ viewBox='0 0 112.62 120.72'
+ width={size}
+ height={size}
+ fill={color}
+ >
+ <path d='M11.64,100.12l-.4-.47-1.06,8.63a5.08,5.08,0,0,1-1.92,3.41A5.11,5.11,0,0,1,0,107L2.79,84.65v-.07a3.28,3.28,0,0,1,.08-.41h0A5.09,5.09,0,0,1,9,80.39q11.22,2.53,22.42,5.15a5,5,0,0,1,3.17,2.25,5.14,5.14,0,0,1,.64,3.84v0a5,5,0,0,1-2.25,3.16,5.08,5.08,0,0,1-3.83.65c-3.31-.75-6.62-1.52-9.92-2.28a40.71,40.71,0,0,0,2.84,3,50.09,50.09,0,0,0,26.23,13.49,48.67,48.67,0,0,0,14.71.34A47.35,47.35,0,0,0,77,106h0q2.52-1.19,4.83-2.54c1.56-.93,3.07-1.92,4.51-3a50.8,50.8,0,0,0,8.56-7.88,48.92,48.92,0,0,0,6.39-9.45l.56-1.1,10,2.69-.8,1.66a58.64,58.64,0,0,1-7.9,12.24,61.28,61.28,0,0,1-10.81,10.1c-1.68,1.23-3.46,2.4-5.32,3.5s-3.73,2.07-5.74,3a58,58,0,0,1-17,5,58.56,58.56,0,0,1-17.79-.39,60.21,60.21,0,0,1-31.58-16.26c-1.2-1.16-2.26-2.31-3.24-3.45ZM101,20.6l.4.47,1-8.63a5.11,5.11,0,1,1,10.14,1.26l-2.74,22.37,0,.07c0,.13,0,.27-.07.41h0a5.09,5.09,0,0,1-6.08,3.78c-7.47-1.69-15-3.4-22.42-5.15a5,5,0,0,1-3.16-2.25,5.1,5.1,0,0,1-.65-3.84v0a5,5,0,0,1,2.25-3.16,5.1,5.1,0,0,1,3.84-.65c3.31.75,6.61,1.52,9.92,2.28-.84-1-1.77-2-2.84-3.05a50.09,50.09,0,0,0-12.13-8.73A49.49,49.49,0,0,0,64.37,11a48.6,48.6,0,0,0-14.7-.34,47.26,47.26,0,0,0-14,4.1h0q-2.53,1.18-4.83,2.54c-1.57.93-3.07,1.92-4.52,3a50.34,50.34,0,0,0-8.55,7.88,48,48,0,0,0-6.39,9.45l-.57,1.1L.76,36l.8-1.66A58.9,58.9,0,0,1,9.46,22.1,61.63,61.63,0,0,1,20.27,12q2.54-1.85,5.32-3.5c1.81-1.06,3.73-2.07,5.74-3a58,58,0,0,1,17-5A58.56,58.56,0,0,1,66.16.89a59.77,59.77,0,0,1,17,5.74A60.4,60.4,0,0,1,97.75,17.15c1.19,1.16,2.26,2.31,3.24,3.45Z' />
+ </svg>
+ </div>
+)

src/components/LcsGrz/Components/PasswordBox/Media/VisibleIcon.jsx

@@ -0,0 +1,23 @@
+// @vendors
+import React from 'react'
+// @styles
+import './Media.css'
+
+// ─────────────── ∞ ───────────────
+
+export default ({ onClick, size, color }) => (
+ <svg
+ className='lcsgrz-pb-media'
+ xmlns='http:https://www.w3.org/2000/svg'
+ viewBox='0 0 122.88 68.18'
+ width={size}
+ height={size}
+ onClick={onClick}
+ fill={color}
+ >
+ <path
+ class='cls-1'
+ d='M61.44,13.81a20.31,20.31,0,1,1-14.34,6,20.24,20.24,0,0,1,14.34-6ZM1.05,31.31A106.72,106.72,0,0,1,11.37,20.43C25.74,7.35,42.08.36,59,0s34.09,5.92,50.35,19.32a121.91,121.91,0,0,1,12.54,12,4,4,0,0,1,.25,5,79.88,79.88,0,0,1-15.38,16.41A69.53,69.53,0,0,1,63.43,68.18,76,76,0,0,1,19.17,53.82,89.35,89.35,0,0,1,.86,36.44a3.94,3.94,0,0,1,.19-5.13Zm15.63-5A99.4,99.4,0,0,0,9.09,34,80.86,80.86,0,0,0,23.71,47.37,68.26,68.26,0,0,0,63.4,60.3a61.69,61.69,0,0,0,38.41-13.72,70.84,70.84,0,0,0,12-12.3,110.45,110.45,0,0,0-9.5-8.86C89.56,13.26,74.08,7.58,59.11,7.89S29.63,14.48,16.68,26.27Zm39.69-7.79a7.87,7.87,0,1,1-7.87,7.87,7.86,7.86,0,0,1,7.87-7.87Z'
+ />
+ </svg>
+)