nitro-web 0.0.31 → 0.0.33

package/client/index.ts

@@ -42,13 +42,12 @@ export { Checkbox } from '../components/partials/form/checkbox'
 export { Drop } from '../components/partials/form/drop'
 export { DropHandler } from '../components/partials/form/drop-handler'
 export { FormError } from '../components/partials/form/form-error'
-export { Field } from '../components/partials/form/input'
-export { FieldColor, type FieldColorProps } from '../components/partials/form/input-color'
-export { FieldCurrency, type FieldCurrencyProps } from '../components/partials/form/input-currency'
-export { FieldDate, type FieldDateProps } from '../components/partials/form/input-date'
+export { Field } from '../components/partials/form/field'
+export { FieldColor, type FieldColorProps } from '../components/partials/form/field-color'
+export { FieldCurrency, type FieldCurrencyProps } from '../components/partials/form/field-currency'
+export { FieldDate, type FieldDateProps } from '../components/partials/form/field-date'
 export { Location } from '../components/partials/form/location'
 export { Select, getSelectStyle } from '../components/partials/form/select'
-export { Toggle } from '../components/partials/form/toggle'
 
 // Component Other
 export { IsFirstRender } from '../components/partials/is-first-render'

package/components/dashboard/dashboard.tsx

@@ -27,6 +27,6 @@ export function Dashboard() {
 
 const style = css`
   .example-usage-of-tailwind-variable {
-    color: ${theme('colors.dark')};
+    color: ${theme('colors.primary')};
   }
 `

package/components/partials/element/accordion.tsx

@@ -80,7 +80,7 @@ export function Accordion({ children, className, expanded, onChange }: Accordion
   return (
     <div
       ref={el}
-      class={['accordion', className, state ? 'is-expanded' : ''].filter(o => o).join(' ')}
+      class={['accordion', className, state ? 'is-expanded' : ''].filter(o => o).join(' nitro-accordion')}
       onClick={onClick}
       css={style}
     >

package/components/partials/element/avatar.tsx

@@ -13,7 +13,7 @@ type AvatarProps = {
 }
 
 export function Avatar({ awsUrl, isRound, user, showPlaceholderImage, className }: AvatarProps) {
-  const classes = 'rounded-full w-[30px] h-[30px] object-cover transition-all duration-150 ease ' + (className || '')
+  const classes = 'rounded-full w-[30px] h-[30px] object-cover transition-all duration-150 ease nitro-avatar ' + (className || '')
 
   function getInitials(user: User) {
     const text = (user.firstName ? [user.firstName, user.lastName] : (user?.name||'').split(' ')).map((o) => o?.charAt(0))

package/components/partials/element/button.tsx

@@ -41,10 +41,10 @@ export function Button({
 
   // Button sizes
   const sizes = {
-    xs: 'px-2 py-1 text-xs rounded',
-    sm: 'px-2.5 py-1.5 text-sm rounded-md',
-    md: 'px-3 py-2 text-sm rounded-md',
-    lg: 'px-3.5 py-2.5 text-sm rounded-md',
+    xs: 'px-2 py-1 px-button-x-xs py-button-y-xs text-xs rounded',
+    sm: 'px-2.5 py-1.5 px-button-x-sm py-button-y-sm text-sm rounded-md',
+    md: 'px-3 py-2 px-button-x py-button-y text-sm rounded-md',
+    lg: 'px-3.5 py-2.5 px-button-x-lg py-button-y-lg text-sm rounded-md',
   }
 
   const contentLayout = `w-full gap-x-1.5 ${iconPosition == 'none' ? '' : 'inline-flex items-center justify-center'}`
@@ -57,7 +57,7 @@ export function Button({
   }
   
   return (
-    <button class={twMerge(`${base} ${colors[color]} ${sizes[size]} ${contentLayout} ${loading} ${className||''}`)} {...props}>
+    <button class={twMerge(`${base} ${colors[color]} ${sizes[size]} ${contentLayout} ${loading} nitro-button ${className||''}`)} {...props}>
       {IconLeft && getIcon(IconLeft)}
       {IconLeftEnd && getIcon(IconLeftEnd)}
       <span class={`${iconPosition == 'leftEnd' || iconPosition == 'rightEnd' ? 'flex-1' : ''}`}>{children}</span>

package/components/partials/element/calendar.tsx

@@ -83,12 +83,12 @@ export function Calendar({ mode='single', onChange, value, numberOfMonths, month
       range_middle: `${d.range_middle} rangemiddle`,
     },
     classNames: {
-      root: `${d.root} flex`,
+      root: `${d.root} flex nitro-calendar`,
       months: `${d.months} flex-nowrap`,
       month_caption: `${d.month_caption} text-2xs pl-2`,
       caption_label: `${d.caption_label} z-auto`,
-      button_previous: `${d.button_previous} size-8`,// [&:hover>svg]:fill-primary-dark`,
-      button_next: `${d.button_next} size-8`,// [&:hover>svg]:fill-primary-dark`,
+      button_previous: `${d.button_previous} size-8`,// [&:hover>svg]:fill-input-border-focus`,
+      button_next: `${d.button_next} size-8`,// [&:hover>svg]:fill-input-border-focus`,
       chevron: `${d.chevron} fill-black size-[18px]`,
 
       // Days
@@ -98,12 +98,12 @@ export function Calendar({ mode='single', onChange, value, numberOfMonths, month
 
       // States
       focused: `${d.focused} [&>button]:bg-gray-200 [&>button]:border-gray-200`,
-      range_start: `${d.range_start} [&>button]:!bg-primary-dark [&>button]:!border-primary-dark`,
-      range_end: `${d.range_end} [&>button]:!bg-primary-dark [&>button]:!border-primary-dark`,
+      range_start: `${d.range_start} [&>button]:!bg-input-border-focus [&>button]:!border-input-border-focus`,
+      range_end: `${d.range_end} [&>button]:!bg-input-border-focus [&>button]:!border-input-border-focus`,
       selected: `${d.selected} font-normal `
         + '[&:not(.rangemiddle)>button]:!text-white '
-        + '[&:not(.rangemiddle)>button]:!bg-primary-dark '
-        + '[&:not(.rangemiddle)>button]:!border-primary-dark ',
+        + '[&:not(.rangemiddle)>button]:!bg-input-border-focus '
+        + '[&:not(.rangemiddle)>button]:!border-input-border-focus ',
     },
   }
 

package/components/partials/element/dropdown.tsx

@@ -91,6 +91,7 @@ export const Dropdown = forwardRef(function Dropdown({
         (isHoverable ? ' is-hoverable' : '') +
         (isActive ? ' is-active' : '') +
         (!animate ? ' no-animation' : '') +
+        ' nitro-dropdown' +
         (className ? ` ${className}` : '')
       }
       onClick={(e) => e.stopPropagation()} // required for dropdowns inside row links

package/components/partials/element/github-link.tsx

@@ -9,7 +9,7 @@ export function GithubLink({ filename }: { filename: string }) {
   
   return (
     // <a href={link}>Go to Github</a>
-    <a href={link} className="fixed top-0 right-0">
+    <a href={link} className="fixed top-0 right-0 nitro-github">
       <GithubIcon />
     </a>
   )

package/components/partials/element/initials.tsx

@@ -20,6 +20,7 @@ export function Initials({ icon, isBig, isMedium, isSmall, isRound, className }:
         (isSmall ? ' is-small' : '') + 
         (isRound ? ' is-round' : '') + 
         (icon ? '' : ' is-empty') + 
+        ' nitro-initials' +
         (className ? ' ' + className : '')
       }
       style={icon ? {backgroundColor: icon?.hex + '15', color: icon?.hex} : {}}

package/components/partials/element/message.tsx

@@ -82,7 +82,7 @@ export function Message() {
       {/* Global notification live region, render this permanently at the end of the document */}
       <div
         aria-live="assertive"
-        className="pointer-events-none fixed inset-0 flex items-end px-4 py-6 sm:items-start sm:p-6 z-20"
+        className="pointer-events-none fixed inset-0 flex items-end px-4 py-6 sm:items-start sm:p-6 z-20 nitro-message"
       >
         <div className="flex w-full flex-col items-center space-y-4 sm:items-end">
           {/* Notification panel, dynamically insert this into the live region when it needs to be displayed */}

package/components/partials/element/modal.tsx

@@ -64,7 +64,7 @@ export function Modal({ show, setShow, children, maxWidth, minHeight, dismissabl
   return (
     <div 
       onClick={(e) => e.stopPropagation()} 
-      class={`fixed top-0 w-[100vw] h-[100vh] z-[700] ${_state.root}`}
+      class={`fixed top-0 w-[100vw] h-[100vh] z-[700] nitro-modal ${_state.root}`}
     >
       <div class={`!absolute inset-0 box-content bg-gray-500/70 transition-opacity ${_state.bg}`}></div>
       <div class={`relative h-[100vh] overflow-y-auto transition-[opacity,transform] ${_state.container}`}>

package/components/partials/element/sidebar.tsx

@@ -10,6 +10,7 @@ import {
   ArrowLeftCircleIcon,
   PaintBrushIcon,
 } from '@heroicons/react/24/outline'
+
 const sidebarWidth = 'lg:w-80'
 
 export type SidebarProps = {
@@ -27,7 +28,7 @@ export function Sidebar({ Logo, menu, links }: SidebarProps) {
   return (
     <>
       {/* mobile sidebar opened */}
-      <Dialog open={sidebarOpen} onClose={setSidebarOpen} className="relative z-50 lg:hidden">
+      <Dialog open={sidebarOpen} onClose={setSidebarOpen} className="relative z-50 lg:hidden nitro-sidebar">
         <DialogBackdrop
           transition
           className="fixed inset-0 bg-gray-900/80 transition-opacity duration-300 ease-linear data-[closed]:opacity-0"

package/components/partials/element/tooltip.tsx

@@ -11,7 +11,7 @@ type TooltipProps = {
 
 export function Tooltip({ text, children, className, classNamePopup, isSmall }: TooltipProps) {
   return (
-    <div class={`${className} relative inline-block align-middle`} css={style}>
+    <div class={`${className} relative inline-block align-middle nitro-tooltip`} css={style}>
       {
         text
         ? <>

package/components/partials/element/topbar.tsx

@@ -1,27 +1,15 @@
 type TopbarProps = {
   title: React.ReactNode
   subtitle?: React.ReactNode
-  submenu?: React.ReactNode
-  btns?: React.ReactNode
   className?: string
 }
 
-export function Topbar({ title, subtitle, submenu, btns, className }: TopbarProps) {
+export function Topbar({ title, subtitle, className }: TopbarProps) {
   return (
-    <div class={`flex justify-between items-end mb-6 ${className||''}`}>
-      <div class="flex flex-col min-h-12">
-        { subtitle && <div class="py-2 text-sm">{subtitle}</div>}
-        <div class="flex items-center py-2">
-          <h1 class="h1 mb-0">{title}</h1>
-        </div>
-        { 
-          submenu && 
-          <div class="pt-2 text-large weight-500">{submenu}</div>
-        }
-      </div>
-      <div class="">
-        {btns}
-      </div>
+    <div class={`flex flex-col min-h-12 gap-0.5 mb-6 nitro-topbar ${className||''}`}>
+      <div class="text-2xl font-bold">{title}</div>
+      { subtitle && <div class="text-sm text-muted-foreground">{subtitle}</div>}
+      {/* { submenu && <div class="pt-2 text-large weight-500">{submenu}</div> } */}
     </div>
   )
 }

package/components/partials/form/checkbox.tsx

@@ -32,7 +32,7 @@ export function Checkbox({ name, id, size='sm', subtext, text, type='checkbox',
   const _size = sizeMap[size]
 
   return (
-    <div className={`mt-input-before mb-input-after flex gap-3 ${props.className || ''}`}>
+    <div className={`mt-2.5 mb-6 mt-input-before mb-input-after flex gap-3 nitro-checkbox ${props.className || ''}`}>
       <div className="flex shrink-0 mt-[2px]">
         {
           type !== 'toggle'
@@ -42,7 +42,13 @@ export function Checkbox({ name, id, size='sm', subtext, text, type='checkbox',
                 id={id}
                 name={name}
                 type={type}
-                className={`${type === 'radio' ? 'rounded-full' : 'rounded'} col-start-1 row-start-1 appearance-none border border-gray-300 bg-white checked:border-primary checked:bg-primary indeterminate:border-primary indeterminate:bg-primary focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 forced-colors:appearance-auto`}
+                className={
+                  `${type === 'radio' ? 'rounded-full' : 'rounded'} col-start-1 row-start-1 appearance-none border border-gray-300 bg-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 forced-colors:appearance-auto ` + 
+                  // Default
+                  'checked:border-blue-600 checked:bg-blue-600 indeterminate:border-blue-600 indeterminate:bg-blue-600 focus-visible:outline-blue-600 ' +
+                  // Variable-selected color defined?
+                  'checked:!border-variable-selected checked:!bg-variable-selected indeterminate:!border-variable-selected indeterminate:!bg-variable-selected focus-visible:!outline-variable-selected'
+                }
               />
               <svg
                 fill="none"
@@ -89,7 +95,15 @@ export function Checkbox({ name, id, size='sm', subtext, text, type='checkbox',
               />
               <label 
                 for={id}
-                className={`col-start-1 row-start-1 relative ${_size.toggleWidth} ${_size.toggleHeight} bg-gray-200 peer-focus-visible:outline-none peer-focus-visible:ring-4 peer-focus-visible:ring-blue-300 dark:peer-focus-visible:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full ${_size.toggleAfterSize} after:transition-all dark:border-gray-600 peer-checked:bg-blue-600`}
+                className={
+                  `col-start-1 row-start-1 relative ${_size.toggleWidth} ${_size.toggleHeight} bg-gray-200 peer-focus-visible:outline-none peer-focus-visible:ring-4 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full ${_size.toggleAfterSize} after:transition-all ` +
+                  // Default
+                  'peer-focus-visible:ring-blue-300 peer-checked:bg-blue-600 ' +
+                  // Variable-selected color defined?
+                  'peer-focus-visible:!ring-variable-selected peer-checked:!bg-variable-selected '
+                  // Dark mode not used yet...
+                  // 'dark:peer-focus-visible:ring-blue-800 dark:bg-gray-700 dark:border-gray-600 '
+                }
               />
             </div>
         }

package/components/partials/form/drop.tsx

@@ -99,7 +99,7 @@ export function Drop({ awsUrl, className, id, name, onChange, multiple, state, .
   // }
 
   return (
-    <div class={`mt-input-before mb-input-after ${className || ''}`}>
+    <div class={`mt-2.5 mb-6 mt-input-before mb-input-after nitro-field nitro-drop ${className || ''}`}>
       <input 
         {...props}
         id={inputId}

package/components/partials/form/{input-currency.tsx → field-currency.tsx}

@@ -148,7 +148,7 @@ export function FieldCurrency({ config, currency='nzd', onChange, value, default
         defaultValue={defaultValue}
       />
       <span
-        class={`absolute top-[1px] bottom-0 left-3 inline-flex items-center select-none text-gray-500 text-sm sm:text-sm/6 ${dollars !== null && settings.prefix == '$' ? 'text-dark' : ''}`}
+        class={`absolute top-[1px] bottom-0 left-3 inline-flex items-center select-none text-gray-500 text-sm sm:text-sm/6 ${dollars !== null && settings.prefix == '$' ? 'text-foreground' : ''}`}
       >
         {settings.prefix || settings.suffix}
       </span>

package/components/partials/form/{input-date.tsx → field-date.tsx}

@@ -179,7 +179,7 @@ function TimePicker({ date, onChange }: TimePickerProps) {
                   key={item}
                   className={
                     'size-[33px] rounded-full flex justify-center items-center group-hover:bg-gray-100 '
-                    + (item === currentValue ? '!bg-primary-dark text-white' : '')
+                    + (item === currentValue ? '!bg-input-border-focus text-white' : '')
                   }
                   onClick={() => handleTimeChange(type, item)}
                 >

package/components/partials/form/{input.tsx → field.tsx}

@@ -46,7 +46,7 @@ export function Field({ state, icon, iconPos: ip, ...props }: FieldProps) {
   const iconPos = ip == 'left' || (type == 'color' && !ip) ? 'left' : 'right'
 
   if (!props.name) {
-    throw new Error('Input component requires a `name` prop')
+    throw new Error('Field component requires a `name` prop')
   }
   
   // Input type
@@ -58,7 +58,7 @@ export function Field({ state, icon, iconPos: ip, ...props }: FieldProps) {
   if (props.value) value = props.value as string
   else if (typeof state == 'object') value = util.deepFind(state, props.name) ?? ''
 
-  // Errors: find any that match this input path
+  // Errors: find any that match this field path
   for (const item of (state?.errors || [])) {
     if (util.isRegex(props.name) && (item.title || '').match(props.name)) error = item
     else if (item.title == props.name) error = item
@@ -126,22 +126,28 @@ export function Field({ state, icon, iconPos: ip, ...props }: FieldProps) {
 
 function FieldContainer({ children, className, error }: { children: React.ReactNode, className?: string, error?: Error }) {
   return (
-    <div css={style} className={`mt-input-before mb-input-after grid grid-cols-1 ${className || ''}`}>
+    <div css={style} className={`mt-2.5 mb-6 mt-input-before mb-input-after grid grid-cols-1 nitro-field ${className || ''}`}>
       {children}
-      {error && <div class="mt-1.5 text-xs text-danger">{error.detail}</div>}
+      {error && <div class="mt-1.5 text-xs text-danger nitro-error">{error.detail}</div>}
     </div>
   )
 }
 
 function getInputClasses({ error, Icon, iconPos, type }: { error: Error, Icon?: React.ReactNode, iconPos: string, type?: string }) {
-  const paddingLeft = type == 'color' ? 'sm:pl-9 pl-9' : 'sm:pl-8 pl-8'
-  const paddingRight = type == 'color' ? 'sm:pr-9 pr-9' : 'sm:pr-8 pr-8'
+  const pl = 'pl-3 pl-input-x'
+  const pr = 'pr-3 pr-input-x'
+  const py = 'py-2 py-input-y'
+  const plWithIcon = type == 'color' ? 'pl-9' : 'pl-8' // was sm:pl-8 pl-8, etc
+  const prWithIcon = type == 'color' ? 'pr-9' : 'pr-8'
   return (
-    'col-start-1 row-start-1 block w-full rounded-md bg-white py-2 text-sm leading-[1.65] outline outline-1 -outline-offset-1 ' +
+    `block ${py} col-start-1 row-start-1 w-full rounded-md bg-white text-sm leading-[1.65] outline outline-1 -outline-offset-1 ` +
     'placeholder:text-input-placeholder focus:outline focus:outline-2 focus:-outline-offset-2 ' +
-    (iconPos == 'right' && Icon ? `${paddingRight} pl-3 ` : (Icon ? `${paddingLeft} pr-3 ` : 'px-3 ')) +
-    (error ? 'text-red-900 outline-danger focus:outline-danger ' : 'text-input outline-input-border focus:outline-primary ') + 
-    (iconPos == 'right' ? 'justify-self-start ' : 'justify-self-end ')
+    (iconPos == 'right' && Icon ? `${pl} ${prWithIcon} ` : (Icon ? `${plWithIcon} ${pr} ` : `${pl} ${pr} `)) +
+    (error 
+      ? 'text-red-900 outline-danger focus:outline-danger ' 
+      : 'text-input outline-input-border focus:outline-input-border-focus ') + 
+    (iconPos == 'right' ? 'justify-self-start ' : 'justify-self-end ') + 
+    'nitro-input'
   )
 }
 

package/components/partials/form/form-error.tsx

@@ -18,7 +18,7 @@ export function FormError({ state, fields, className }: FormError) {
   return (
     <>
       {error ? (
-        <div class={`text-danger mt-1 text-sm ${className||''}`}>
+        <div class={`text-danger mt-1 text-sm nitro-error ${className||''}`}>
           {error.detail}
         </div>
       ) : null}

package/components/partials/form/select.tsx

@@ -58,7 +58,7 @@ export function Select({ inputId, minMenuWidth, name, prefix='', onChange, optio
   }
 
   return (
-    <div css={style} class="mt-input-before mb-input-after">
+    <div css={style} class="mt-2.5 mb-6 mt-input-before mb-input-after nitro-select">
       <ReactSelect
         /**
          * react-select prop quick reference (https://react-select.com/props#api):
@@ -238,10 +238,10 @@ const selectStyles = {
   // Input container
   control: {
     base: 'rounded-md bg-white hover:cursor-pointer text-sm leading-[1.65] outline outline-1 -outline-offset-1 outline-input-border',
-    focus: 'outline-2 -outline-offset-2 outline-primary',
+    focus: 'outline-2 -outline-offset-2 outline-input-border-focus',
     error: 'outline-danger',
   },
-  valueContainer: 'py-2 px-3 gap-1',
+  valueContainer: 'py-2 px-3 py-input-y px-input-x gap-1',
   // Input container objects
   input: {
     base: 'text-input',
@@ -249,7 +249,7 @@ const selectStyles = {
   },
   multiValue: 'bg-primary text-white rounded items-center pl-2 pr-1.5 gap-1.5',
   multiValueLabel: '',
-  multiValueRemove: 'border border-black/10 bg-clip-content bg-white rounded-md text-dark hover:bg-red-50',
+  multiValueRemove: 'border border-black/10 bg-clip-content bg-white rounded-md text-foreground hover:bg-red-50',
   placeholder: 'text-input-placeholder',
   singleValue: {
     base: 'text-input',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nitro-web",
-  "version": "0.0.31",
+  "version": "0.0.33",
   "repository": "github:boycce/nitro-web",
   "homepage": "https://boycce.github.io/nitro-web/",
   "description": "Nitro is a battle-tested, modular base project to turbocharge your projects, styled using Tailwind 🚀",

package/components/partials/form/toggle.tsx

@@ -1,54 +0,0 @@
-type ToggleProps = {
-  className?: string
-  id?: string
-  name: string
-  subtext?: string
-  text?: string
-  type?: 'checkbox'
-}
-
-export function Toggle({ name, id, subtext, text, type='checkbox', ...props }: ToggleProps) {
-  id = id || name
-  // https://tailwindui.com/components/application-ui/forms/checkboxes#component-744ed4fa65ba36b925701eb4da5c6e31
-  return (
-    <div className={`mt-input-before mb-input-after flex gap-3 ${props.className || ''}`}>
-      <div className="flex h-6 shrink-0 items-center">
-        <div className="group grid size-4 grid-cols-1">
-          <input
-            {...props}
-            id={id}
-            name={name}
-            type={type}
-            className="col-start-1 row-start-1 appearance-none rounded border border-gray-300 bg-white checked:border-indigo-600 checked:bg-indigo-600 indeterminate:border-indigo-600 indeterminate:bg-indigo-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 forced-colors:appearance-auto"
-          />
-          <svg
-            fill="none"
-            viewBox="0 0 14 14"
-            className="pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white group-has-[:disabled]:stroke-gray-950/25"
-          >
-            <path
-              d="M3 8L6 11L11 3.5"
-              strokeWidth={2}
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              className="opacity-0 group-has-[:checked]:opacity-100"
-            />
-            <path
-              d="M3 7H11"
-              strokeWidth={2}
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              className="opacity-0 group-has-[:indeterminate]:opacity-100"
-            />
-          </svg>
-        </div>
-      </div>
-      {text && <div className="text-sm/6">
-        <label for={id}>
-          <span className="font-medium text-gray-900">{text}</span>
-          <span className="ml-2 text-gray-500">{subtext}</span>
-        </label>
-      </div>}
-    </div>
-  )
-}