@prosistemas/sca-web-kit 2.2.0 → 2.2.2

package/dist/components/layout/topnav/navlinks/resources/resources.module.scss

@@ -0,0 +1,132 @@
+.dropdown-content {
+  z-index: 2;
+  border-radius: 16px;
+  box-shadow: 0px 28px 58px 0px rgba(3, 0, 70, 0.3);
+  background: var(--neutral100);
+  color: var(--neutral600);
+
+  width: 901px;
+  padding: 16px;
+
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+
+  .links {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+
+    .dropdown-item-link {
+      .dropdown-item {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 6px;
+
+        padding: 16px;
+        font-size: 14px;
+        border-radius: 16px;
+        font-variation-settings: 'wght' 400;
+        transition: background 0.3s, font-variation-settings 0.3s;
+
+        cursor: pointer;
+        border: none;
+        outline: none;
+
+        .dropdown-icon {
+          color: transparent;
+          transition: color 0.3s;
+        }
+      }
+
+      .dropdown-item:hover {
+        background-color: #fff;
+        font-variation-settings: 'wght' 500;
+      }
+
+      .dropdown-item:hover .dropdown-icon {
+        color: var(--primary);
+      }
+    }
+  }
+
+  .cards-wrapper {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    width: 584px;
+    height: 455px;
+    flex-shrink: 0;
+    padding: 24px;
+    border-radius: 12px;
+    background: #fff;
+
+    .cards {
+      display: flex;
+      flex-wrap: nowrap;
+      justify-content: space-between;
+
+      .left-section,
+      .right-section {
+        height: 310px;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+      }
+
+      .left-section {
+        width: 248px;
+      }
+
+      .right-section {
+        width: 234px;
+      }
+    }
+
+    .button-wrapper {
+      width: 100%;
+
+      .button {
+        width: 100%;
+      }
+    }
+  }
+}
+
+.dropdown-content[data-state='closed'] {
+  animation: fadeSlideOut 0.3s forwards;
+  transform: translateY(-15px);
+  opacity: 0;
+}
+
+.dropdown-content[data-state='open'] {
+  animation: fadeSlideIn 0.3s;
+  transform: translateY(0);
+  opacity: 1;
+}
+
+@keyframes fadeSlideIn {
+  0% {
+    opacity: 0;
+    transform: translateY(-15px);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fadeSlideOut {
+  0% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  100% {
+    opacity: 0;
+    transform: translateY(-15px);
+  }
+}

package/dist/components/layout/topnav/navlinks/segments/segments.d.ts

@@ -0,0 +1,5 @@
+export default function Segments({ open, setOpen, handleOpen, }: {
+    open: boolean;
+    setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    handleOpen: () => void;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/layout/topnav/navlinks/segments/segments.js

@@ -0,0 +1,13 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
+import DropdownMenuTrigger from '../dropdown-menu-trigger/dropdown-menu-trigger';
+import styles from './segments.module.scss';
+import Card from '../card/card';
+import { Barbell, Lockers, PersonArmsSpread, PersonSimpleSwim, PersonSimpleTaiChi } from '@phosphor-icons/react';
+export default function Segments({ open, setOpen, handleOpen, }) {
+    const handleMouseExit = () => {
+        setOpen(false);
+    };
+    return (_jsxs(DropdownMenu.Root, { open: open, onOpenChange: setOpen, modal: false, children: [_jsx(DropdownMenuTrigger, { label: "Segmentos", open: open, setOpen: setOpen, handleMouseEnter: handleOpen }), _jsxs(DropdownMenu.Content, { onMouseLeave: handleMouseExit, className: styles['dropdown-content'], sideOffset: 44, children: [_jsxs("div", { className: styles['left'], children: [_jsx(Card, { label: "Academia", icon: Lockers }), _jsx(Card, { label: "Studio", icon: PersonArmsSpread }), _jsx(Card, { label: "Pilates", icon: PersonSimpleTaiChi })] }), _jsxs("div", { className: styles['right'], children: [_jsx(Card, { label: "Nata\u00E7\u00E3o", icon: PersonSimpleSwim }), _jsx(Card, { label: "Box Cross", icon: Barbell })] })] })] }));
+}

package/dist/components/layout/topnav/navlinks/segments/segments.module.scss

@@ -0,0 +1,62 @@
+.dropdown-content {
+  /* Pra garantir que n vai ficar por baixo do carrossel ;) */
+  z-index: 2;
+  /* min-width: 450px; */
+  padding: 24px;
+  border-radius: 16px;
+  box-shadow: 0px 28px 58px 0px rgba(3, 0, 70, 0.3);
+  background: var(--neutral100);
+  color: var(--neutral600);
+
+  display: flex;
+  justify-content: center;
+  flex-wrap: nowrap;
+  gap: 16px;
+}
+
+@keyframes fadeSlideIn {
+  0% {
+    opacity: 0;
+    transform: translateY(-15px);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fadeSlideOut {
+  0% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  100% {
+    opacity: 0;
+    transform: translateY(-15px);
+  }
+}
+
+.dropdown-content[data-state='closed'] {
+  animation: fadeSlideOut 0.3s forwards;
+  transform: translateY(-15px);
+  opacity: 0;
+}
+
+.dropdown-content[data-state='open'] {
+  animation: fadeSlideIn 0.3s;
+  transform: translateY(0);
+  opacity: 1;
+}
+
+.left .right {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px;
+}
+
+.left {
+  width: 150;
+}

package/dist/components/layout/topnav/navtrailing/navtrailing.d.ts

@@ -0,0 +1 @@
+export default function NavTrailing(): import("react/jsx-runtime").JSX.Element;

package/dist/components/layout/topnav/navtrailing/navtrailing.js

@@ -0,0 +1,8 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styles from './navtrailing.module.scss';
+import Button from '../../../ui/button/button';
+import { UserCircleIcon } from '@phosphor-icons/react';
+export default function NavTrailing() {
+    return (_jsxs("div", { className: styles['navtrailing'], children: [_jsxs("a", { href: 'https://app.sistemasca.com/login', target: '_blank', className: styles['login-wrapper'], children: [_jsx(UserCircleIcon, { size: 26, className: `${styles['icon']}` }), _jsx("p", { children: "Acessar conta" })] }), _jsx("a", { href: 'https://app.sistemasca.com/cadastro', target: '_blank', children: _jsx(Button, { label: "Teste agora", className: styles['outline-button'] }) })] }));
+}

package/dist/components/layout/topnav/navtrailing/navtrailing.module.scss

@@ -0,0 +1,51 @@
+.navtrailing {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 40px;
+
+  @media (max-width: 1330px) {
+    gap: 20px;
+  }
+
+  @media (max-width: 900px) {
+    display: none;
+  }
+
+  .login-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+
+    transition: color 0.3s;
+
+    .icon {
+      transition: color 0.3s;
+
+      @media (max-width: 1024px) {
+        display: none;
+      }
+    }
+  }
+
+  .login-wrapper:hover {
+    color: var(--auxiliary-orange);
+  }
+
+  .outline-button {
+    background-color: transparent;
+    border: solid 1px #fff;
+    transition: background-color 0.3s, border 0.3s;
+
+    @media (max-width: 1024px) {
+      font-size: 12px;
+      padding: 12px;
+    }
+  }
+
+  .outline-button:hover {
+    border: solid 1px transparent;
+    background-color: var(--auxiliary-orange);
+  }
+}

package/dist/components/layout/topnav/topnav.d.ts

@@ -0,0 +1 @@
+export default function TopNav(): import("react/jsx-runtime").JSX.Element;

package/dist/components/layout/topnav/topnav.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styles from './topnav.module.scss';
+import Link from 'next/link';
+import Image from 'next/image';
+import NavLinks from './navlinks/navlinks';
+import MobileNav from './mobile-nav/mobile-nav'; /* Renderizado apenas na versão mobile (<= 768px) */
+import NavTrailing from './navtrailing/navtrailing';
+export default function TopNav() {
+    return (_jsxs("header", { className: styles.navbar, children: [_jsx(Link, { href: "/", children: _jsx(Image, { src: "/logos/sca/sca-white.svg", width: 100, height: 50, alt: "Logo do Sistema SCA", className: styles['sca-logo'] }) }), _jsx(NavLinks, {}), _jsx(NavTrailing, {}), _jsx(MobileNav, {})] }));
+}

package/dist/components/layout/topnav/topnav.module.scss

@@ -0,0 +1,56 @@
+.navbar {
+  height: 112px;
+  width: 100%;
+  padding: 0 112px;
+
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  color: white;
+  font-size: 14px;
+  font-weight: 500;
+
+  @media (max-width: 1330px) {
+    padding: 0 64px;
+  }
+
+  @media (max-width: 768px) {
+    padding: 0 24px;
+  }
+
+  .sca-logo {
+    @media (max-width: 1024px) {
+      width: 50px;
+    }
+  }
+}
+
+.navlinks {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 40px;
+
+  @media (max-width: 1330px) {
+    gap: 20px;
+  }
+
+  @media (max-width: 1024px) {
+    font-size: 12px;
+  }
+
+  @media (max-width: 900px) {
+    display: none;
+  }
+}
+
+.plans-link,
+.blog-link {
+  transition: color 0.3s;
+}
+
+.plans-link:hover,
+.blog-link:hover {
+  color: var(--auxiliary-orange);
+}

package/dist/components/shared/feature-card/feature-card.d.ts

@@ -0,0 +1,13 @@
+interface InfoHeaderProps {
+    spanLabel?: string;
+    title: string;
+    subtitle?: string;
+    iconSubtitle?: string;
+    buttonLabel?: string;
+    className?: string;
+    titleClassName?: string;
+    subtitleClassName?: string;
+    dark?: boolean;
+}
+export default function InfoHeader({ spanLabel, title, subtitle, buttonLabel, className, titleClassName, subtitleClassName, dark, }: InfoHeaderProps): import("react/jsx-runtime").JSX.Element;
+export { };

package/dist/components/shared/feature-card/feature-card.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styles from './feature-card.module.scss';
+import SpanLabel from '../../ui/span-label/span-label';
+import Subtitle from '../../ui/subtitle/subtitle';
+import Button from '../../ui/button/button';
+import Title from '../../ui/title/title';
+export default function FeatureCard({ spanLabel, title, subtitle, buttonLabel, className = '', titleClassName = '', subtitleClassName = '', dark = false, }) {
+    return (_jsxs("div", { className: `${styles['feature-card']} ${className}`, children: [spanLabel && _jsx(SpanLabel, { label: spanLabel, dark: dark }), _jsx(Title, { className: titleClassName, text: title, dark: dark }), subtitle && (_jsx(Subtitle, { text: subtitle, className: subtitleClassName, dark: dark })), buttonLabel && (_jsx(Button, { label: buttonLabel, className: styles['button'] }))] }));
+}

package/dist/components/shared/feature-card/feature-card.module.scss

@@ -0,0 +1,15 @@
+.feature-card {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+
+  z-index: 1;
+  gap: 32px;
+
+  .button {
+    width: fit-content;
+    padding: 16px 42px;
+  }
+}

package/dist/components/shared/footer-banner/footer-banner.js

@@ -5,5 +5,5 @@ import Image from 'next/image';
 import InfoHeader from '../info-header/info-header';
 import { BrowsersIcon, CreditCardIcon, TimerIcon } from '@phosphor-icons/react/dist/ssr';
 export default function FooterBanner() {
-    return (_jsxs("div", { className: styles['footer-banner'], children: [_jsx(InfoHeader, { tagLabel: 'ILIMITADO', title: 'Não importa quantos alunos e alunas você vai ter, o preço não muda.', buttonLabel: 'Conhe\u00E7a agora!', buttonHref: 'https://app.sistemasca.com/cadastro', buttonTarget: '_blank', className: styles['footer-banner-info-header'], dark: true }), _jsxs("div", { className: styles['image-person-wrapper'], children: [_jsx(Image, { src: '/gym/stock-gym-blurred.webp', alt: 'Foto borrada de uma academia', className: styles['image'], fill: true }), _jsx(Image, { src: '/people/person_03.webp', alt: 'Foto de uma pessoa', className: styles['person'], width: 420, height: 420 })] }), _jsxs("div", { className: styles['bullet-list-wrapper'], children: [_jsx("p", { className: `${styles['title']} ${montserrat.className}`, children: "Teste gr\u00E1tis o SCA!" }), _jsxs("div", { className: styles['bullet-list'], children: [_jsxs("div", { className: styles['list-item'], children: [_jsx(CreditCardIcon, { size: 40, color: 'var(--neutral000)', weight: 'thin' }), _jsx("p", { className: styles['text'], children: "Voc\u00EA n\u00E3o precisa adicionar cart\u00E3o de cr\u00E9dito." })] }), _jsx("div", { className: styles['separator'] }), _jsxs("div", { className: styles['list-item'], children: [_jsx(BrowsersIcon, { size: 40, color: 'var(--neutral000)', weight: 'thin' }), _jsx("p", { className: styles['text'], children: "Tenha acesso a todas das funcionalidades." })] }), _jsx("div", { className: styles['separator'] }), _jsxs("div", { className: styles['list-item'], children: [_jsx(TimerIcon, { size: 40, color: 'var(--neutral000)', weight: 'thin' }), _jsx("p", { className: styles['text'], children: "Cadastre-se em segundos." })] })] })] })] }));
+    return (_jsxs("div", { className: styles['footer-banner'], children: [_jsx(InfoHeader, { tagLabel: 'ILIMITADO', title: 'Não importa quantos alunos e alunas você vai ter, o preço não muda.', buttonLabel: 'Conhe\u00E7a agora!', className: styles['footer-banner-info-header'], dark: true }), _jsxs("div", { className: styles['image-person-wrapper'], children: [_jsx(Image, { src: '/gym/stock-gym-blurred.webp', alt: 'Foto borrada de uma academia', className: styles['image'], fill: true }), _jsx(Image, { src: '/people/person_03.webp', alt: 'Foto de uma pessoa', className: styles['person'], width: 420, height: 420 })] }), _jsxs("div", { className: styles['bullet-list-wrapper'], children: [_jsx("p", { className: `${styles['title']} ${montserrat.className}`, children: "Teste gr\u00E1tis o SCA!" }), _jsxs("div", { className: styles['bullet-list'], children: [_jsxs("div", { className: styles['list-item'], children: [_jsx(CreditCardIcon, { size: 40, color: 'var(--neutral000)', weight: 'thin' }), _jsx("p", { className: styles['text'], children: "Voc\u00EA n\u00E3o precisa adicionar cart\u00E3o de cr\u00E9dito." })] }), _jsx("div", { className: styles['separator'] }), _jsxs("div", { className: styles['list-item'], children: [_jsx(BrowsersIcon, { size: 40, color: 'var(--neutral000)', weight: 'thin' }), _jsx("p", { className: styles['text'], children: "Tenha acesso a todas das funcionalidades." })] }), _jsx("div", { className: styles['separator'] }), _jsxs("div", { className: styles['list-item'], children: [_jsx(TimerIcon, { size: 40, color: 'var(--neutral000)', weight: 'thin' }), _jsx("p", { className: styles['text'], children: "Cadastre-se em segundos." })] })] })] })] }));
 }

package/dist/components/shared/newsletter-strip/newsletter-strip.d.ts

@@ -1,11 +1,11 @@
-export default function NewsletterStrip({ buttonLabel, onButtonClick, onFormSubmit, buttonLoading, buttonDisabled, emailValue, emailOnChange, nameValue, nameOnChange, }: {
+export default function NewsletterStrip({ buttonLabel, onButtonClick, onFormSubmit, buttonLoading, buttonDisabled, emailValue, onEmailChange, nameValue, onNameChange, }: {
     buttonLabel?: string;
     onButtonClick?: () => void;
     onFormSubmit?: (e: React.FormEvent<HTMLFormElement>) => void;
     buttonLoading?: boolean;
     buttonDisabled?: boolean;
     emailValue?: string;
-    emailOnChange?: React.ChangeEventHandler;
+    onEmailChange?: React.ChangeEventHandler<HTMLInputElement>;
     nameValue?: string;
-    nameOnChange?: React.ChangeEventHandler;
+    onNameChange?: React.ChangeEventHandler<HTMLInputElement>;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/components/shared/newsletter-strip/newsletter-strip.js

@@ -5,11 +5,6 @@ import scaGradientLogo from '@prosistemas/sca-web-kit/assets/logos/sca/sca-s-gra
 import InfoHeader from '../info-header/info-header';
 import Button from '../../ui/button/button';
 import { EnvelopeIcon } from '@phosphor-icons/react/dist/ssr';
-export default function NewsletterStrip({ buttonLabel, onButtonClick, onFormSubmit, buttonLoading = false, buttonDisabled = false, emailValue, emailOnChange, nameValue, nameOnChange,
-// email,
-// setEmailAction,
-// name,
-// setNameAction,
- }) {
-    return (_jsxs("div", { className: styles['newsletter-strip'], children: [_jsxs("div", { className: styles['left'], children: [_jsx(EnvelopeIcon, { color: 'white', weight: 'light', size: 48, className: styles['icon'] }), _jsx(InfoHeader, { title: 'Os melhores conte\u00FAdos de tecnologia e fitness', subtitle: 'Assine e receba novidades toda semana em sua caixa de entrada.', className: styles['feature-card'], titleClassName: styles['feature-card-title'], dark: true })] }), _jsxs("form", { className: styles['right'], onSubmit: onFormSubmit, children: [_jsx("input", { className: `${styles['name']} ${inter.className}`, id: "name", type: "text", name: "text", placeholder: "Insira seu nome", value: nameValue, onChange: nameOnChange, required: true }), _jsx("input", { className: `${styles['email']} ${inter.className}`, id: "email", type: "email", name: "email", placeholder: "Insira seu e-mail", value: emailValue, onChange: emailOnChange, required: true }), _jsx(Button, { className: styles['button'], onClick: onButtonClick, label: buttonLabel ?? "Assinar", loading: buttonLoading, disabled: buttonDisabled, type: 'submit' }), _jsx("div", { className: styles['blue-hue'] }), _jsx("img", { src: scaGradientLogo, alt: 'Logo do SCA', width: 243, height: 318, className: styles['background-logo'] })] })] }));
+export default function NewsletterStrip({ buttonLabel, onButtonClick, onFormSubmit, buttonLoading = false, buttonDisabled = false, emailValue, onEmailChange, nameValue, onNameChange, }) {
+    return (_jsxs("div", { className: styles['newsletter-strip'], children: [_jsxs("div", { className: styles['left'], children: [_jsx(EnvelopeIcon, { color: 'white', weight: 'light', size: 48, className: styles['icon'] }), _jsx(InfoHeader, { title: 'Os melhores conte\u00FAdos de tecnologia e fitness', subtitle: 'Assine e receba novidades toda semana em sua caixa de entrada.', className: styles['feature-card'], titleClassName: styles['feature-card-title'], dark: true })] }), _jsxs("form", { className: styles['right'], onSubmit: onFormSubmit, children: [_jsx("input", { className: `${styles['name']} ${inter.className}`, id: "name", type: "text", name: "text", placeholder: "Insira seu nome", value: nameValue, onChange: onNameChange, required: true }), _jsx("input", { className: `${styles['email']} ${inter.className}`, id: "email", type: "email", name: "email", placeholder: "Insira seu e-mail", value: emailValue, onChange: onEmailChange, required: true }), _jsx(Button, { className: styles['button'], onClick: onButtonClick, label: buttonLabel ?? "Assinar", loading: buttonLoading, disabled: buttonDisabled, type: 'submit' }), _jsx("div", { className: styles['blue-hue'] }), _jsx("img", { src: scaGradientLogo, alt: 'Logo do SCA', width: 243, height: 318, className: styles['background-logo'] })] })] }));
 }

package/dist/components/shared/success-cases/success-cases.d.ts

@@ -1,5 +1 @@
-export default function SuccessCases({ buttonHref, buttonInternalHref, buttonTarget, }: {
-    buttonHref?: string;
-    buttonInternalHref?: string;
-    buttonTarget?: React.HTMLAttributeAnchorTarget;
-}): import("react/jsx-runtime").JSX.Element;
+export default function SuccessCases(): import("react/jsx-runtime").JSX.Element;

package/dist/components/shared/success-cases/success-cases.js

@@ -4,6 +4,6 @@ import SuccessCasesSwiper from './success-cases-swiper/success-cases-swiper';
 import InfoHeader from '../info-header/info-header';
 import Button from '../../ui/button/button';
 import Stacks from '../../ui/stacks/stacks';
-export default function SuccessCases({ buttonHref, buttonInternalHref, buttonTarget, }) {
-    return (_jsxs("div", { className: styles['success-cases'], children: [_jsx(Stacks, {}), _jsxs("div", { className: styles['success-cases-wrapper'], children: [_jsxs("div", { className: styles['success-cases-title'], children: [_jsx(InfoHeader, { className: styles['title'], tagLabel: 'CASES DE SUCESSO', title: 'Essas pessoas confiam no nosso trabalho' }), _jsx(Button, { label: 'Leia outros cases de sucesso', className: styles['success-cases-button'], href: buttonHref, internalHref: buttonInternalHref, target: buttonTarget })] }), _jsx(SuccessCasesSwiper, {})] })] }));
+export default function SuccessCases() {
+    return (_jsxs("div", { className: styles['success-cases'], children: [_jsx(Stacks, {}), _jsxs("div", { className: styles['success-cases-wrapper'], children: [_jsxs("div", { className: styles['success-cases-title'], children: [_jsx(InfoHeader, { className: styles['title'], tagLabel: 'CASES DE SUCESSO', title: 'Essas pessoas confiam no nosso trabalho' }), _jsx(Button, { label: 'Leia outros cases de sucesso', className: styles['success-cases-button'] })] }), _jsx(SuccessCasesSwiper, {})] })] }));
 }

package/dist/components/ui/button/default-button.module.scss

@@ -0,0 +1,22 @@
+.button {
+  border: none;
+  outline: none;
+  border-radius: 8px;
+  background: var(--auxiliary-orange);
+  cursor: pointer;
+  padding: 16px;
+  color: #fff;
+  font-size: 16px;
+  font-variation-settings: 'wght' 600;
+  transition: background 0.3s, border 0.3s, opacity 0.3s;
+
+  .icon {
+    width: 16;
+    height: 16px;
+    position: absolute;
+  }
+}
+
+.button:hover {
+  background: var(--auxiliary-red);
+}

package/dist/components/ui/span-label/span-label.d.ts

@@ -0,0 +1,5 @@
+export default function SpanLabel({ label, className, dark, }: {
+    label: string;
+    className?: string;
+    dark?: boolean;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/span-label/span-label.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styles from './span-label.module.scss';
+import { montserrat } from '../../../fonts';
+export default function SpanLabel({ label, className = '', dark = false, }) {
+    const spanDarkStyle = !dark ? {} : {
+        border: '1px solid var(--dark900)',
+        background: 'var(--dark800)',
+        color: 'white',
+    };
+    return (_jsx("span", { style: spanDarkStyle, className: `
+        ${montserrat.className}
+        ${className} 
+        ${styles['span']}
+      `, children: label }));
+}

package/dist/components/ui/span-label/span-label.module.scss

@@ -0,0 +1,11 @@
+.span {
+  padding: 8px 16px;
+  width: fit-content;
+  border-radius: 50px;
+  background: var(--light100);
+  border: 1px solid var(--light200);
+
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--dark700);
+}