@fullstackunicorn/create-root 1.0.29 → 2.0.0

package/assets/root.fullstackunicorn.dev/frontend/modals/languages/languages.js

@@ -1,81 +0,0 @@
-import { useState } from 'react'
-import { useNavigate } from '#@/imports/router.js'
-import { api } from '#@/client/@api.js'
-import { uri } from '#@/App.uri.js'
-import { tools } from '#@/base/language/@tools.js'
-import { useUrl, useHistory } from '#@/base/router/@use.js'
-import { useGetStatics, useSetVerbal } from '#@/base/statics/@use.js'
-import { useLanguage } from '#@/base/language/@use.js'
-import { useGetLookups } from '#@/base/lookups/@use.js'
-import { useSetAlerts } from '#@/base/alerts/@use.js'
-import { useModalClose } from '#@/base/modals/@use.js'
-import { Modal } from '#@/base/modals/Modal.js'
-import { SelectPage } from '#@/modules/modals/select/SelectPage.js'
-import { Actions } from '#@/modules/modals/select/Actions.js'
-import { useLanguagesData } from '#@/modals/languages/languages.api.js'
-
-const LanguagesModal = ({ id }) => {
-
-    const data = useLanguagesData()
-
-    const [value, setValue] = useState(data.current)
-
-    const statics = useGetStatics()
-    const { path } = useUrl()
-    const navigate = useNavigate()
-    const [history, setHistory] = useHistory()
-    const setVerbal = useSetVerbal()
-    const [language, setLanguage] = useLanguage()
-    const lookups = useGetLookups()
-    const setAlerts = useSetAlerts({})
-    const modalClose = useModalClose()
-
-    const isDisabled = value.slug === data.current.slug
-
-    const onSave = async () => {
-        if (value.slug === language.slug) return modalClose(id)
-        if (!data.itemLogic.options.includes(value.slug)) return
-
-        const localVerbal = await api.statics.get(uri.data.root.verbal, { lang: value.slug })
-
-        const result = {}
-        result.verbal = localVerbal['@data']
-        result.language = tools.getLanguage(value.slug, statics.logic)
-
-        if (!result.language || !result.verbal) {
-            return setAlerts({ id: 'no-language', params: { language: tools.getLanguageLabel(lookups, value.slug) } })
-        }
-
-        setHistory(tools.getNewHistory(history, value.slug))
-        setVerbal(result.verbal)
-        setLanguage(result.language)
-        navigate(`/${value.slug}/${path}`)
-    }
-
-    const onRestore = () => setValue(data.current)
-
-    return (
-        <Modal
-            id={id}
-            title={data.itemVerbal.title}
-            svg={statics.visual.svg.edit}
-            actions={
-                <Actions
-                    selected={value}
-                    onSave={onSave}
-                    onRestore={onRestore}
-                    isDisabled={isDisabled}
-                />
-            }
-        >
-            <SelectPage
-                itemLogic={data.itemLogic}
-                itemVerbal={data.itemVerbal}
-                selected={value}
-                setValue={setValue}
-            />
-        </Modal>
-    )
-}
-
-export const languages = (modal={}) => <LanguagesModal key={modal.id} {...modal}/>

package/assets/root.fullstackunicorn.dev/frontend/modules/base/Bottom.js

@@ -1,10 +0,0 @@
-import { BottomPod } from '#@/modules/base/Bottom.pod.js'
-
-export const Bottom = () => {
-
-    const year = new Date().getFullYear()
-    const minderable = { href: 'https://websites.minderable.com', text: 'Powered by Minderable' }
-    const text = `Copyright © ${year}`
-
-    return <BottomPod text={text} minderable={minderable} />
-}

package/assets/root.fullstackunicorn.dev/frontend/modules/base/Bottom.pod.js

@@ -1,37 +0,0 @@
-import { useStyle } from '#@/style/@use.js'
-import { View } from '#@/imports/core/View.js'
-import { Textline } from '#@/imports/core/Text.js'
-import { Href } from '#@/imports/core/Href.js'
-import { Link } from '#@/imports/core/Link.js'
-
-export const BottomPod = ({ text, minderable }) => {
-
-    const { s, c, f, t, F, B, S, I, H } = useStyle()
-
-    F.text = [s.fs14, s.lh24, s.fw400]
-
-    S.bottom = [s.row_cXcY, s.Xc]
-    S.box = [s.row_cXcY, s.Xc, s.Y48]
-    S.textBox = [s.row_cXcY, s.Y48]
-    S.text = [...F.text, c.item_NN_B400]
-    S.dotBox = [s.row_cXcY, s.Y48, s.X20]
-    S.dot = [s.XY4, s.radiusRound, c.base_NN_B400]
-
-    I.bottom = { marginTop: 'auto' }
-
-    return (
-        <View classes={S.bottom} inline={I.bottom}>
-            <View classes={S.box}>
-                <Link classes={S.textBox}>
-                    <Textline classes={S.text} text={text} />
-                </Link>
-                <View classes={S.dotBox}>
-                    <View classes={S.dot} />
-                </View>
-                <Href classes={S.textBox} linkTo={minderable.href} isExternal>
-                    <Textline classes={S.text} text={minderable.text} />
-                </Href>
-            </View>
-        </View>
-    )
-}

package/assets/root.fullstackunicorn.dev/frontend/modules/base/ComingSoon.js

@@ -1,7 +0,0 @@
-import { useGetStatics } from '#@/base/statics/@use.js'
-import { ComingSoonPod } from '#@/modules/base/ComingSoon.pod.js'
-
-export const ComingSoon = () => {
-    const statics = useGetStatics()
-    return <ComingSoonPod picture={statics.graphic.comingsoon} />
-}

package/assets/root.fullstackunicorn.dev/frontend/modules/base/ComingSoon.pod.js

@@ -1,17 +0,0 @@
-import { useStyle } from '#@/style/@use.js'
-import { View } from '#@/imports/core/View.js'
-import { Img } from '#@/imports/core/Img.js'
-
-export const ComingSoonPod = ({ picture }) => {
-
-    const { s, c, f, t, F, B, S, I, H } = useStyle()
-
-    S.box = [s.col_cXsY, s.XY100p, s.marginB8]
-    S.image = [s.X100p, s.radiusB16]
-
-    return (
-        <View classes={S.box}>
-            <Img classes={S.image} picture={picture} />
-        </View>
-    )
-}

package/assets/root.fullstackunicorn.dev/frontend/modules/base/ErrorPage.js

@@ -1,12 +0,0 @@
-import { Logo } from '#@/modules/trademarks/Logo.js'
-import { ErrorPagePod } from '#@/modules/base/ErrorPage.pod.js'
-
-export const ErrorPage = ({ title, text }) => {
-    return (
-        <ErrorPagePod
-            title={title}
-            text={text}
-            logo={<Logo />}
-        />
-    )
-}

package/assets/root.fullstackunicorn.dev/frontend/modules/base/ErrorPage.pod.js

@@ -1,23 +0,0 @@
-import { useStyle } from '#@/style/@use.js'
-import { View } from '#@/imports/core/View.js'
-import { Text } from '#@/imports/core/Text.js'
-
-export const ErrorPagePod = ({ logo, title, text }) => {
-
-    const { s, c, f, t, F, B, S, I, H } = useStyle()
-
-    S.box = [s.col, s.Xc]
-    S.title = [...t.root.main.title, s.paddingX6]
-    S.text = [...t.root.main.description]
-    S.boxText = [s.col_cY, s.paddingX6, s.marginT8]
-
-    return (
-        <View classes={S.box}>
-            {logo}
-            <Text classes={S.title} text={title} />
-            <View classes={S.boxText}>
-                <Text classes={S.text} font={f.f1} text={text} />
-            </View>
-        </View>
-    )
-}

package/assets/root.fullstackunicorn.dev/frontend/modules/base/PageTitle.js

@@ -1,3 +0,0 @@
-import { PageTitlePod } from '#@/modules/base/PageTitle.pod.js'
-
-export const PageTitle = ({ title }) => <PageTitlePod title={title} />

package/assets/root.fullstackunicorn.dev/frontend/modules/base/PageTitle.pod.js

@@ -1,19 +0,0 @@
-import { useStyle } from '#@/style/@use.js'
-import { View } from '#@/imports/core/View.js'
-import { Text } from '#@/imports/core/Text.js'
-
-export const PageTitlePod = ({ title }) => {
-
-    const { s, c, f, t, F, B, S, I, H } = useStyle()
-
-    S.textbox = [s.row_cXcY, s.Y48, s.X100p]
-    S.text = t.root.page.title
-
-    if (!title) return null
-
-    return (
-        <View classes={S.textbox}>
-            <Text classes={S.text} text={title} />
-        </View>
-    )
-}

package/assets/root.fullstackunicorn.dev/frontend/modules/buttons/IconTextButton.js

@@ -1,17 +0,0 @@
-import { useState } from 'react'
-import { IconTextButtonPod } from './IconTextButton.pod.js'
-
-export const IconTextButton = ({ svg, text, onPress }) => {
-
-    const [isHover, setIsHover ] = useState(false)
-
-    return (
-        <IconTextButtonPod 
-            svg={svg}
-            text={text}
-            onPress={onPress}
-            isHover={isHover}
-            setIsHover={setIsHover}
-        />
-    )
-}

package/assets/root.fullstackunicorn.dev/frontend/modules/buttons/IconTextButton.pod.js

@@ -1,24 +0,0 @@
-import { useStyle } from '#@/style/@use'
-import { Pressable } from '#@/imports/core/Pressable'
-import { Icon } from '#@/modules/core/Icon'
-import { Textline } from '#@/imports/core/Text'
-
-export const IconTextButtonPod = ({ onPress, svg, text, isHover, setIsHover}) => {
-
-    const { s, c, f, t, F, B, S, I, H } = useStyle()
-
-    F.text = [s.textS, s.fs16, s.lh24, s.fw500]
-
-    B.hover = isHover ? [c.item_C1_B100] : [c.item_NN_B400]
-
-    S.pressable = [s.row_cXcY, s.Y48, s.paddingS4, s.paddingE12, s.radius8, ...B.hover]
-    S.icon = [s.X40, s.Y48],
-    S.text = F.text
-
-    return (
-        <Pressable classes={S.pressable} onPress={onPress} setIsHover={setIsHover}>
-            <Icon classes={S.icon} svg={svg} />
-            <Textline classes={S.text} font={f.f1} text={text} />
-        </Pressable>
-    )
-}

package/assets/root.fullstackunicorn.dev/frontend/modules/buttons/TextButton.js

@@ -1,47 +0,0 @@
-import { useState } from 'react'
-import { TextButtonPod, TextButtonTextPod, TextButtonLinePod } from './TextButton.pod.js'
-
-export const TextButton = ({ onPress, isDisabled, svg, text, color, type='fill' }) => {
-
-    const [isHover, setIsHover] = useState()
-
-    if (type==='fill') {
-        return ( 
-            <TextButtonPod 
-                svg={svg}
-                isHover={isHover}
-                setIsHover={setIsHover}
-                text={text || 'missing_text'} 
-                color={color}
-                onPress={onPress} 
-                isDisabled={isDisabled}
-            />
-        )
-    }
-    if (type==='text') {
-        return ( 
-            <TextButtonTextPod 
-                svg={svg}
-                isHover={isHover}
-                setIsHover={setIsHover}
-                text={text || 'missing_text'} 
-                color={color}
-                onPress={onPress} 
-                isDisabled={isDisabled}
-            />
-        )
-    }
-    if (type==='line') {
-        return ( 
-            <TextButtonLinePod 
-                svg={svg}
-                isHover={isHover}
-                setIsHover={setIsHover}
-                text={text || 'missing_text'} 
-                color={color}
-                onPress={onPress} 
-                isDisabled={isDisabled}
-            />
-        )
-    }
-}

package/assets/root.fullstackunicorn.dev/frontend/modules/buttons/TextButton.pod.js

@@ -1,94 +0,0 @@
-import { useStyle } from '#@/style/@use'
-import { View } from '#@/imports/core/View'
-import { Icon } from '#@/modules/core/Icon'
-import { Pressable } from '#@/imports/core/Pressable'
-import { Textline } from '#@/imports/core/Text'
-
-export const TextButtonPod = ({ text, onPress=()=>{}, isHover, setIsHover, isDisabled, color='NN' }) => {
-
-    const { s, c, f, t, F, B, S, I, H } = useStyle()
-        
-    B.disabled = isDisabled ? [s.opacity30] : []
-
-    B.base = { }
-    B.base.C1 = isHover ? c.base_C1_B150 : c.base_C1
-    B.base.NN = isHover ? c.base_NN_B150 : c.base_NN
-    
-    S.button = [s.row_cXcY, s.Y40, s.radius12, s.paddingX12, ...B.disabled, B.base[color]]
-    S.text = [...t.root.button.text, s.row_cXcY, c.item_NN_W700]
-
-    if (isDisabled) return (
-        <View classes={S.button}>
-            <Textline classes={S.text} font={f.f1} text={text.up()}/>
-        </View>
-    ) 
-
-    return (
-        <Pressable classes={S.button} onPress={onPress} setIsHover={setIsHover}>
-            <Textline classes={S.text} font={f.f1} text={text.up()}/>
-        </Pressable>
-    )
-}
-
-export const TextButtonTextPod = ({ text, onPress=()=>{}, isHover, setIsHover, isDisabled, color='NN' }) => {
-
-    const { s, c, f, t, F, B, S, I, H } = useStyle()
-        
-    B.disabled = isDisabled ? [s.opacity30] : []
-
-    B.item = { }
-    B.item.C1 = isHover ? c.item_C1_B150 : c.item_C1
-    B.item.NN = isHover ? c.item_NN_B150 : c.item_NN
-    
-    S.button = [s.row_cXcY, s.Y40, s.radius12, s.paddingX12, ...B.disabled]
-    S.icon = [s.X40, s.Y48, B.item[color]],
-    S.text = [...t.root.button.text, s.row_cXcY, B.item[color]]
-
-    if (isDisabled) return (
-        <View classes={S.button}>
-            {!!svg ? <Icon classes={S.icon} svg={svg}/> : null}
-            <Textline classes={S.text} font={f.f1} text={text.up()}/>
-        </View>
-    ) 
-
-    return (
-        <Pressable classes={S.button} onPress={onPress} setIsHover={setIsHover}>
-            {!!svg ? <Icon classes={S.icon} svg={svg}/> : null}
-            <Textline classes={S.text} font={f.f1} text={text.up()}/>
-        </Pressable>
-    )
-}
-
-export const TextButtonLinePod = ({ svg, text, 
-    onPress=()=>{}, isHover, setIsHover, isDisabled, color='NN' }) => {
-
-    const { s, c, f, t, F, B, S, I, H } = useStyle()
-        
-    B.disabled = isDisabled ? [s.opacity30] : []
-
-    B.line = {}
-    B.line.C1 = isHover ? c.line_C1_B150 : c.line_C1,
-    B.line.NN = isHover ? c.line_NN_B150 : c.line_NN
-
-    B.item = { }
-    B.item.C1 = isHover ? c.item_C1_B150 : c.item_C1,
-    B.item.NN = isHover ? c.item_NN_B150 : c.item_NN
-    
-    S.button = [s.row_cXcY, s.Y40, s.radius12, s.paddingX12, s.border1, ...B.disabled, B.line[color]]
-    S.icon = [s.X40, s.Y48, B.item[color]],
-    S.text = [...t.root.button.text, s.row_cXcY, B.item[color]]
-
-    if (isDisabled) return (
-        <View classes={S.button}>
-            {!!svg ? <Icon classes={S.icon} svg={svg}/> : null}
-            <Textline classes={S.text} font={f.f1} text={text.up()}/>
-        </View>
-    ) 
-
-    return (
-        <Pressable classes={S.button} onPress={onPress} setIsHover={setIsHover}>
-            {!!svg ? <Icon classes={S.icon} svg={svg}/> : null}
-            <Textline classes={S.text} font={f.f1} text={text.up()}/>
-        </Pressable>
-    )
-}

package/assets/root.fullstackunicorn.dev/frontend/modules/cards/Account.js

@@ -1,27 +0,0 @@
-import { useState } from 'react'
-import { AccountPod } from '#@/modules/cards/Account.pod.js'
-
-export const Account = ({
-    logo_src, logo_alt, svg, onPress,
-    title, description, descriptionPress, label, onPressAction,
-}) => {
-
-    const [isHover, setIsHover] = useState(false)
-    const splitted = description.split('{{action}}')
-
-    return (
-        <AccountPod
-            title={title}
-            description={{ one: splitted[0].trim(), two: splitted[1].trim() }}
-            descriptionPress={descriptionPress}
-            label={label}
-            onPressAction={onPressAction}
-            logo_src={logo_src}
-            logo_alt={logo_alt}
-            svg={svg}
-            onPress={onPress}
-            isHover={isHover}
-            setIsHover={setIsHover}
-        />
-    )
-}

package/assets/root.fullstackunicorn.dev/frontend/modules/cards/Account.pod.js

@@ -1,58 +0,0 @@
-import { useStyle } from '#@/style/@use.js'
-import { View } from '#@/imports/core/View.js'
-import { Pressable } from '#@/imports/core/Pressable.js'
-import { ImgData } from '#@/imports/core/Img.js'
-import { Icon } from '#@/modules/core/Icon.js'
-import { Textline, Text } from '#@/imports/core/Text.js'
-
-export const AccountPod = ({
-    title,
-    description = {},
-    descriptionPress,
-    label,
-    onPressAction,
-    logo_src,
-    logo_alt,
-    svg,
-    onPress,
-    isHover,
-    setIsHover,
-}) => {
-
-    const { s, c, f, t, F, B, S, I, H } = useStyle()
-
-    B.hover = isHover ? c.base_C1_W600_50 : c.base_NN_W600_50
-
-    S.box = t.root.cards.box
-    S.top = t.root.cards.top
-    S.title = t.root.cards.title
-    S.wrap = [s.row]
-    S.descriptionOne = [...t.root.cards.description, s.paddingE5]
-    S.descriptionTwo = [...t.root.cards.description, s.paddingS5]
-    S.actionBox = []
-    S.descriptionPress = [...t.root.cards.text.description, c.item_C2]
-    S.pressable = [...t.root.cards.pressable, B.hover]
-    S.img = [s.row_cXcY, s.XY32, s.margin8, s.radius6]
-    S.label = [...t.root.cards.text.label, s.row_sXcY, s.Xr, c.item_NN_B400]
-    S.icon = t.root.cards.icon
-
-    return (
-        <View classes={S.box}>
-            <View classes={S.top}>
-                <Textline classes={S.title} font={f.f1} text={title} />
-                <View classes={S.wrap}>
-                    {description.one ? <Text classes={S.descriptionOne} font={f.f1} text={description.one} /> : null}
-                    <Pressable classes={S.actionBox} onPress={onPressAction}>
-                        <Text classes={S.descriptionPress} font={f.f1} text={descriptionPress} />
-                    </Pressable>
-                    {description.two ? <Text classes={S.descriptionTwo} font={f.f1} text={description.two} /> : null}
-                </View>
-            </View>
-            <Pressable classes={S.pressable} onPress={onPress} setIsHover={setIsHover}>
-                <ImgData classes={S.img} src={logo_src} alt={logo_alt} />
-                <Textline classes={S.label} font={f.f1} text={label} />
-                <Icon classes={S.icon} svg={svg} />
-            </Pressable>
-        </View>
-    )
-}

package/assets/root.fullstackunicorn.dev/frontend/modules/cards/Launcher.js

@@ -1,19 +0,0 @@
-import { useState } from 'react'
-import { LauncherPod } from '#@/modules/cards/Launcher.pod.js'
-
-export const Launcher = ({ svg, title, description, label, onPress }) => {
-
-    const [isHover, setIsHover] = useState(false)
-
-    return (
-        <LauncherPod
-            svg={svg}
-            title={title}
-            description={description}
-            label={label}
-            onPress={onPress}
-            isHover={isHover}
-            setIsHover={setIsHover}
-        />
-    )
-}

package/assets/root.fullstackunicorn.dev/frontend/modules/cards/Launcher.pod.js

@@ -1,37 +0,0 @@
-import { useStyle } from '#@/style/@use.js'
-import { View } from '#@/imports/core/View.js'
-import { Pressable } from '#@/imports/core/Pressable.js'
-import { Icon } from '#@/modules/core/Icon.js'
-import { Textline, Text } from '#@/imports/core/Text.js'
-
-export const LauncherPod = ({
-    svg, title, description, label,
-    isHover, setIsHover, onPress,
-}) => {
-
-    const { s, c, f, t, F, B, S, I, H } = useStyle()
-
-    B.hover = isHover ? c.base_C1_W600_50 : c.base_NN_W600_50
-
-    S.box = t.root.cards.box
-    S.top = t.root.cards.top
-    S.title = t.root.cards.title
-    S.description = t.root.cards.description
-    S.pressable = [...t.root.cards.pressable, B.hover]
-    S.icon = t.root.cards.icon
-    S.label = t.root.cards.label
-
-    return (
-        <View classes={S.box}>
-            <View classes={S.top}>
-                <Textline classes={S.title} font={f.f1} text={title} />
-                <Text classes={S.description} font={f.f1} text={description} />
-            </View>
-            <Pressable classes={S.pressable} onPress={onPress} setIsHover={setIsHover}>
-                <Icon classes={S.icon} svg={svg.logo} />
-                <Textline classes={S.label} font={f.f1} text={label} />
-                <Icon classes={S.icon} svg={svg.action} />
-            </Pressable>
-        </View>
-    )
-}

package/assets/root.fullstackunicorn.dev/frontend/modules/cards/Linker.js

@@ -1,20 +0,0 @@
-import { useState } from 'react'
-import { LinkerPod } from '#@/modules/cards/Linker.pod.js'
-
-export const Linker = ({ svg, title, description, label, onPress, linkTo }) => {
-
-    const [isHover, setIsHover] = useState(false)
-
-    return (
-        <LinkerPod
-            svg={svg}
-            title={title}
-            description={description}
-            label={label}
-            linkTo={linkTo}
-            onPress={onPress}
-            isHover={isHover}
-            setIsHover={setIsHover}
-        />
-    )
-}

package/assets/root.fullstackunicorn.dev/frontend/modules/cards/Linker.pod.js

@@ -1,37 +0,0 @@
-import { useStyle } from '#@/style/@use.js'
-import { Link } from '#@/modules/core/Link.js'
-import { View } from '#@/imports/core/View.js'
-import { Icon } from '#@/modules/core/Icon.js'
-import { Textline, Text } from '#@/imports/core/Text.js'
-
-export const LinkerPod = ({
-    svg, title, description, label,
-    isHover, onPress, linkTo,
-}) => {
-
-    const { s, c, f, t, F, B, S, I, H } = useStyle()
-
-    B.hover = isHover ? c.base_C1_W600_50 : c.base_NN_W600_50
-
-    S.box = t.root.cards.box
-    S.top = t.root.cards.top
-    S.title = t.root.cards.title
-    S.description = t.root.cards.description
-    S.pressable = [...t.root.cards.pressable, B.hover]
-    S.icon = t.root.cards.icon
-    S.label = t.root.cards.label
-
-    return (
-        <View classes={S.box}>
-            <View classes={S.top}>
-                <Textline classes={S.title} font={f.f1} text={title} />
-                <Text classes={S.description} font={f.f1} text={description} />
-            </View>
-            <Link classes={S.pressable} linkTo={linkTo} onPress={onPress}>
-                <Icon classes={S.icon} svg={svg.logo} />
-                <Textline classes={S.label} font={f.f1} text={label} />
-                <Icon classes={S.icon} svg={svg.action} />
-            </Link>
-        </View>
-    )
-}

package/assets/root.fullstackunicorn.dev/frontend/modules/cards/Slider.js

@@ -1,23 +0,0 @@
-import { useState } from 'react'
-import { SliderPod } from '#@/modules/cards/Slider.pod.js'
-
-export const Slider = ({
-    svg, title, description, label,
-    isTrue, setIsTrue,
-}) => {
-
-    const [isHover, setIsHover] = useState(false)
-
-    return (
-        <SliderPod
-            isTrue={isTrue}
-            setIsTrue={setIsTrue}
-            svg={svg}
-            title={title}
-            description={description}
-            label={label}
-            isHover={isHover}
-            setIsHover={setIsHover}
-        />
-    )
-}

package/assets/root.fullstackunicorn.dev/frontend/modules/cards/Slider.pod.js

@@ -1,39 +0,0 @@
-import { useStyle } from '#@/style/@use.js'
-import { Slider } from '#@/modules/core/Slider.js'
-import { Icon } from '#@/modules/core/Icon.js'
-import { View } from '#@/imports/core/View.js'
-import { Text, Textline } from '#@/imports/core/Text.js'
-import { Pressable } from '#@/imports/core/Pressable.js'
-
-export const SliderPod = ({
-    svg, title, description, label,
-    isHover, setIsHover, isTrue, setIsTrue,
-}) => {
-
-    const { s, c, f, t, F, B, S, I, H } = useStyle()
-
-    B.hover = isHover ? [c.base_C1_W600] : [c.base_NN_W650]
-
-    S.box = t.root.cards.box
-    S.top = t.root.cards.top
-    S.title = t.root.cards.title
-    S.description = t.root.cards.description
-    S.pressable = [...t.root.cards.pressable, ...B.hover]
-    S.icon = t.root.cards.icon
-    S.label = t.root.cards.label
-    S.slider = t.root.cards.slider
-
-    return (
-        <View classes={S.box}>
-            <View classes={S.top}>
-                <Textline classes={S.title} font={f.f1} text={title} />
-                <Text classes={S.description} font={f.f1} text={description} />
-            </View>
-            <Pressable classes={S.pressable} onPress={setIsTrue} setIsHover={setIsHover}>
-                <Icon classes={S.icon} svg={svg} />
-                <Textline classes={S.label} font={f.f1} text={label} />
-                <Slider classes={S.slider} isOn={isTrue} />
-            </Pressable>
-        </View>
-    )
-}