@fluidattacks/design 3.1.11 → 3.1.13

package/dist/index.js

@@ -1 +1,206 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('./assets/index.css');const e=require("./utils-C2whpEd3.js"),o=require("./styles-C2CoGJl7.js"),r=require("./components/accordion/index.js"),t=require("./components/alert/index.js"),n=require("./components/button/index.js"),s=require("./components/card/card-header/index.js"),i=require("./components/card/card-with-image/index.js"),p=require("./components/card/card-with-input/index.js"),u=require("./components/card/card-with-selector/index.js"),a=require("./components/card/card-with-switch/index.js"),x=require("./components/carousel/index.js"),d=require("./components/checkbox/index.js"),c=require("./index-TKLFHcRp.js"),m=require("./components/code-snippet/index.js"),l=require("./components/colors/index.js"),q=require("./components/confirm-dialog/index.js"),j=require("./components/container/index.js"),g=require("./components/divider/index.js"),C=require("./components/empty-state/index.js"),b=require("./components/file-preview/index.js"),h=require("./components/form/index.js"),S=require("./components/grid-container/index.js"),I=require("./components/group-selector/index.js"),f=require("./components/icon/index.js"),T=require("./components/icon-button/index.js"),B=require("./components/indicator-card/index.js"),v=require("./components/info-sidebar/index.js"),y=require("./components/inputs/fields/combobox/index.js"),L=require("./components/inputs/fields/date/index.js"),P=require("./components/inputs/fields/date-range/index.js"),w=require("./components/inputs/fields/date-time/index.js"),F=require("./components/inputs/fields/editable/index.js"),M=require("./components/inputs/fields/input/index.js"),O=require("./components/inputs/fields/input-file/index.js"),D=require("./components/inputs/fields/input-tags/index.js"),W=require("./components/inputs/fields/number/index.js"),k=require("./components/inputs/fields/number-range/index.js"),N=require("./components/inputs/fields/phone/index.js"),A=require("./components/inputs/fields/text-area/index.js"),H=require("./components/inputs/outline-container/index.js"),R=require("./components/interactive-card/index.js"),E=require("./components/language-selector/index.js"),G=require("./components/link/index.js"),U=require("./components/list-item/index.js"),z=require("./components/little-flag/index.js"),J=require("./components/loading/index.js"),K=require("./components/logo/index.js"),Q=require("./components/logo-carousel/index.js"),V=require("./components/lottie/index.js"),X=require("./components/menu/index.js"),Y=require("./components/message-banner/index.js"),Z=require("./components/modal/index.js"),$=require("./components/notification/index.js"),_=require("./components/notification-sign/index.js"),ee=require("./components/number-input/index.js"),oe=require("./components/oauth-selector/index.js"),re=require("./components/premium-feature/index.js"),te=require("./components/priority-score/index.js"),ne=require("./components/progress/index.js"),se=require("./components/pop-up/index.js"),ie=require("./components/radio-button/index.js"),pe=require("./components/scroll-button/index.js"),ue=require("./components/search/index.js"),ae=require("./components/search-bar/index.js"),xe=require("./components/severity-badge/index.js"),de=require("./components/severity-overview/index.js"),ce=require("./components/show-on-hover/index.js"),me=require("./components/slide-out-menu/index.js"),le=require("./components/slider/index.js"),qe=require("./components/step-lapse/index.js"),je=require("./components/table-button/index.js"),ge=require("./components/tabs/index.js"),Ce=require("./components/tag/index.js"),be=require("./components/timeline/index.js"),he=require("./components/toggle/index.js"),Se=require("./components/toggle-buttons/index.js"),Ie=require("./index-CmylnDrF.js"),fe=require("./components/tour/index.js"),Te=require("./components/typography/heading/index.js"),Be=require("./components/typography/span/index.js"),ve=require("./components/typography/text/index.js"),ye=require("./components/web-form/index.js"),Le=require("./use-carousel-64dKFW4E.js"),Pe=require("./use-click-outside-BqkLISED.js"),we=require("./use-cloudinary-image-YMMafagv.js"),Fe=require("./use-search-DeL4UDMh.js"),Me=require("./use-modal-_bYY6M_n.js"),Oe=require("./styles-BWVdbvFu.js"),De=require("./components/modal/modal-confirm/index.js"),We=require("./components/oauth-selector/option-container/index.js"),ke=require("./components/tabs/fixed-tabs/index.js"),Ne=require("./components/tabs/tab/index.js"),Ae=require("./index-CA_9DXWd.js");exports.variantBuilder=e.variantBuilder,exports.BaseButtonComponent=o.BaseButtonComponent,exports.BaseComponent=o.BaseComponent,exports.BaseSpanComponent=o.BaseSpanComponent,exports.BaseTextComponent=o.BaseTextComponent,exports.getStyledConfig=o.getStyledConfig,exports.hiddenProps=o.hiddenProps,exports.setBorder=o.setBorder,exports.setDisplay=o.setDisplay,exports.setInteraction=o.setInteraction,exports.setMargin=o.setMargin,exports.setPadding=o.setPadding,exports.setPosition=o.setPosition,exports.setText=o.setText,exports.Accordion=r.Accordion,exports.Alert=t.Alert,exports.Button=n.Button,exports.CardHeader=s.CardHeader,exports.CardWithImage=i.CardWithImage,exports.CardWithInput=p.CardWithInput,exports.CardWithSelector=u.CardWithSelector,exports.CardWithSwitch=a.CardWithSwitch,exports.Carousel=x.Carousel,exports.Checkbox=d.Checkbox,exports.CloudImage=c.MemoizedImage,exports.CodeSnippet=m.CodeSnippet,exports.CustomThemeProvider=l.CustomThemeProvider,exports.icons=l.icons,exports.theme=l.theme,exports.uniqueIcons=l.uniqueIcons,exports.useConfirmDialog=q.useConfirmDialog,exports.Container=j.Container,exports.Divider=g.Divider,exports.EmptyState=C.EmptyState,exports.FilePreview=b.FilePreview,exports.Form=h.Form,exports.GridContainer=S.GridContainer,exports.GroupSelector=I.GroupSelector,exports.Icon=f.Icon,exports.IconButton=T.IconButton,exports.IndicatorCard=B.IndicatorCard,exports.InfoSidebar=v.InfoSidebar,exports.ComboBox=y.ComboBox,exports.InputDate=L.InputDate,exports.InputDateRange=P.InputDateRange,exports.InputDateTime=w.InputDateTime,exports.Editable=F.Editable,exports.Input=M.Input,exports.InputFile=O.InputFile,exports.InputTags=D.InputTags,exports.InputNumber=W.InputNumber,exports.InputNumberRange=k.InputNumberRange,exports.PhoneInput=N.PhoneInput,exports.TextArea=A.TextArea,exports.OutlineContainer=H.OutlineContainer,exports.InteractiveCard=R.InteractiveCard,exports.LanguageSelector=E.LanguageSelector,exports.Link=G.Link,exports.ListItem=U.ListItem,exports.LittleFlag=z.LittleFlag,exports.Loading=J.Loading,exports.Logo=K.Logo,exports.LogoCarousel=Q.LogoCarousel,exports.Lottie=V.Lottie,exports.Menu=X.Menu,exports.MessageBanner=Y.MessageBanner,exports.Modal=Z.Modal,exports.Notification=$.Notification,exports.NotificationSign=_.NotificationSign,exports.NumberInput=ee.NumberInput,exports.OAuthSelector=oe.OAuthSelector,exports.PremiumFeature=re.PremiumFeature,exports.PriorityScore=te.PriorityScore,exports.Progress=ne.Progress,exports.PopUp=se.PopUp,exports.RadioButton=ie.RadioButton,exports.ScrollUpButton=pe.ScrollUpButton,exports.Search=ue.Search,exports.SearchBar=ae.SearchBar,exports.SeverityBadge=xe.SeverityBadge,exports.SeverityOverview=de.SeverityOverview,exports.ShowOnHover=ce.ShowOnHover,exports.SlideOutMenu=me.SlideOutMenu,exports.Slider=le.Slider,exports.StepLapse=qe.StepLapse,exports.TableButton=je.TableButton,exports.Tabs=ge.Tabs,exports.Tag=Ce.Tag,exports.TimeLine=be.TimeLine,exports.Toggle=he.Toggle,exports.ToggleButton=Se.ToggleButton,exports.Tooltip=Ie.Tooltip,exports.Tour=fe.Tour,exports.baseStep=fe.baseStep,exports.Heading=Te.Heading,exports.Span=Be.Span,exports.Text=ve.Text,exports.FormItem=ye.FormItem,exports.WebForm=ye.WebForm,exports.useCarousel=Le.useCarousel,exports.useClickOutside=Pe.useClickOutside,exports.useCloudinaryImage=we.useCloudinaryImage,exports.useDebouncedCallback=Fe.useDebouncedCallback,exports.useSearch=Fe.useSearch,exports.useModal=Me.useModal,exports.ListItemsWrapper=Oe.ListItemsWrapper,exports.ModalConfirm=De.ModalConfirm,exports.OptionContainer=We.OptionContainer,exports.FixedTabs=ke.FixedTabs,exports.Tab=Ne.Tab,exports.TimeLineCard=Ae.TimeLineCard;
+import { v as e } from "./utils-V0EumEPM.mjs";
+import { a as p, B as m, c as a, b as f, k as x, h as n, j as i, i as s, f as u, e as d, s as l, g as C, d as g } from "./styles-CplEd2kw.mjs";
+import { Accordion as I } from "./components/accordion/index.js";
+import { Alert as T } from "./components/alert/index.js";
+import { Button as b } from "./components/button/index.js";
+import { CardHeader as L } from "./components/card/card-header/index.js";
+import { CardWithImage as P } from "./components/card/card-with-image/index.js";
+import { CardWithInput as M } from "./components/card/card-with-input/index.js";
+import { CardWithSelector as D } from "./components/card/card-with-selector/index.js";
+import { CardWithSwitch as W } from "./components/card/card-with-switch/index.js";
+import { Carousel as N } from "./components/carousel/index.js";
+import { Checkbox as A } from "./components/checkbox/index.js";
+import { M as R } from "./index-maWH3JYC.mjs";
+import { CodeSnippet as G } from "./components/code-snippet/index.js";
+import { CustomThemeProvider as j, icons as q, theme as z, uniqueIcons as J } from "./components/colors/index.js";
+import { useConfirmDialog as Q } from "./components/confirm-dialog/index.js";
+import { Container as X } from "./components/container/index.js";
+import { Divider as Z } from "./components/divider/index.js";
+import { EmptyState as $ } from "./components/empty-state/index.js";
+import { FilePreview as ro } from "./components/file-preview/index.js";
+import { Form as to } from "./components/form/index.js";
+import { GridContainer as mo } from "./components/grid-container/index.js";
+import { GroupSelector as fo } from "./components/group-selector/index.js";
+import { Icon as no } from "./components/icon/index.js";
+import { IconButton as so } from "./components/icon-button/index.js";
+import { IndicatorCard as lo } from "./components/indicator-card/index.js";
+import { InfoSidebar as go } from "./components/info-sidebar/index.js";
+import { ComboBox as Io } from "./components/inputs/fields/combobox/index.js";
+import { InputDate as To } from "./components/inputs/fields/date/index.js";
+import { InputDateRange as bo } from "./components/inputs/fields/date-range/index.js";
+import { InputDateTime as Lo } from "./components/inputs/fields/date-time/index.js";
+import { Editable as Po } from "./components/inputs/fields/editable/index.js";
+import { Input as Mo } from "./components/inputs/fields/input/index.js";
+import { InputFile as Do } from "./components/inputs/fields/input-file/index.js";
+import { InputTags as Wo } from "./components/inputs/fields/input-tags/index.js";
+import { InputNumber as No } from "./components/inputs/fields/number/index.js";
+import { InputNumberRange as Ao } from "./components/inputs/fields/number-range/index.js";
+import { PhoneInput as Ro } from "./components/inputs/fields/phone/index.js";
+import { TextArea as Go } from "./components/inputs/fields/text-area/index.js";
+import { OutlineContainer as jo } from "./components/inputs/outline-container/index.js";
+import { InteractiveCard as zo } from "./components/interactive-card/index.js";
+import { LanguageSelector as Ko } from "./components/language-selector/index.js";
+import { Link as Vo } from "./components/link/index.js";
+import { ListItem as Yo } from "./components/list-item/index.js";
+import { LittleFlag as _o } from "./components/little-flag/index.js";
+import { Loading as or } from "./components/loading/index.js";
+import { Logo as er } from "./components/logo/index.js";
+import { LogoCarousel as pr } from "./components/logo-carousel/index.js";
+import { Lottie as ar } from "./components/lottie/index.js";
+import { Menu as xr } from "./components/menu/index.js";
+import { MessageBanner as ir } from "./components/message-banner/index.js";
+import { Modal as ur } from "./components/modal/index.js";
+import { Notification as lr } from "./components/notification/index.js";
+import { NotificationSign as gr } from "./components/notification-sign/index.js";
+import { NumberInput as Ir } from "./components/number-input/index.js";
+import { OAuthSelector as Tr } from "./components/oauth-selector/index.js";
+import { PremiumFeature as br } from "./components/premium-feature/index.js";
+import { PriorityScore as Lr } from "./components/priority-score/index.js";
+import { Progress as Pr } from "./components/progress/index.js";
+import { PopUp as Mr } from "./components/pop-up/index.js";
+import { RadioButton as Dr } from "./components/radio-button/index.js";
+import { ScrollUpButton as Wr } from "./components/scroll-button/index.js";
+import { Search as Nr } from "./components/search/index.js";
+import { SearchBar as Ar } from "./components/search-bar/index.js";
+import { SeverityBadge as Rr } from "./components/severity-badge/index.js";
+import { SeverityOverview as Gr } from "./components/severity-overview/index.js";
+import { ShowOnHover as jr } from "./components/show-on-hover/index.js";
+import { SlideOutMenu as zr } from "./components/slide-out-menu/index.js";
+import { Slider as Kr } from "./components/slider/index.js";
+import { StepLapse as Vr } from "./components/step-lapse/index.js";
+import { TableButton as Yr } from "./components/table-button/index.js";
+import { Tabs as _r } from "./components/tabs/index.js";
+import { Tag as oe } from "./components/tag/index.js";
+import { TimeLine as ee } from "./components/timeline/index.js";
+import { Toggle as pe } from "./components/toggle/index.js";
+import { ToggleButton as ae } from "./components/toggle-buttons/index.js";
+import { T as xe } from "./index-DwznImvK.mjs";
+import { Tour as ie, baseStep as se } from "./components/tour/index.js";
+import { Heading as de } from "./components/typography/heading/index.js";
+import { Span as Ce } from "./components/typography/span/index.js";
+import { Text as ce } from "./components/typography/text/index.js";
+import { FormItem as Se, WebForm as Te } from "./components/web-form/index.js";
+import { u as be } from "./use-carousel-CgAF78h3.mjs";
+import { u as Le } from "./use-click-outside-BUll8Ag-.mjs";
+import { u as Pe } from "./use-cloudinary-image-BCxwj15o.mjs";
+import { u as Me, a as ye } from "./use-search-Dj47QDw9.mjs";
+import { u as Oe } from "./use-modal-CtgexKnf.mjs";
+import { a as ke } from "./styles-Bdque9TT.mjs";
+import { ModalConfirm as we } from "./components/modal/modal-confirm/index.js";
+import { OptionContainer as He } from "./components/oauth-selector/option-container/index.js";
+import { FixedTabs as Ee } from "./components/tabs/fixed-tabs/index.js";
+import { Tab as Ue } from "./components/tabs/tab/index.js";
+import { a as qe } from "./index-C6LbClYh.mjs";
+import './assets/index.css';export {
+  I as Accordion,
+  T as Alert,
+  p as BaseButtonComponent,
+  m as BaseComponent,
+  a as BaseSpanComponent,
+  f as BaseTextComponent,
+  b as Button,
+  L as CardHeader,
+  P as CardWithImage,
+  M as CardWithInput,
+  D as CardWithSelector,
+  W as CardWithSwitch,
+  N as Carousel,
+  A as Checkbox,
+  R as CloudImage,
+  G as CodeSnippet,
+  Io as ComboBox,
+  X as Container,
+  j as CustomThemeProvider,
+  Z as Divider,
+  Po as Editable,
+  $ as EmptyState,
+  ro as FilePreview,
+  Ee as FixedTabs,
+  to as Form,
+  Se as FormItem,
+  mo as GridContainer,
+  fo as GroupSelector,
+  de as Heading,
+  no as Icon,
+  so as IconButton,
+  lo as IndicatorCard,
+  go as InfoSidebar,
+  Mo as Input,
+  To as InputDate,
+  bo as InputDateRange,
+  Lo as InputDateTime,
+  Do as InputFile,
+  No as InputNumber,
+  Ao as InputNumberRange,
+  Wo as InputTags,
+  zo as InteractiveCard,
+  Ko as LanguageSelector,
+  Vo as Link,
+  Yo as ListItem,
+  ke as ListItemsWrapper,
+  _o as LittleFlag,
+  or as Loading,
+  er as Logo,
+  pr as LogoCarousel,
+  ar as Lottie,
+  xr as Menu,
+  ir as MessageBanner,
+  ur as Modal,
+  we as ModalConfirm,
+  lr as Notification,
+  gr as NotificationSign,
+  Ir as NumberInput,
+  Tr as OAuthSelector,
+  He as OptionContainer,
+  jo as OutlineContainer,
+  Ro as PhoneInput,
+  Mr as PopUp,
+  br as PremiumFeature,
+  Lr as PriorityScore,
+  Pr as Progress,
+  Dr as RadioButton,
+  Wr as ScrollUpButton,
+  Nr as Search,
+  Ar as SearchBar,
+  Rr as SeverityBadge,
+  Gr as SeverityOverview,
+  jr as ShowOnHover,
+  zr as SlideOutMenu,
+  Kr as Slider,
+  Ce as Span,
+  Vr as StepLapse,
+  Ue as Tab,
+  Yr as TableButton,
+  _r as Tabs,
+  oe as Tag,
+  ce as Text,
+  Go as TextArea,
+  ee as TimeLine,
+  qe as TimeLineCard,
+  pe as Toggle,
+  ae as ToggleButton,
+  xe as Tooltip,
+  ie as Tour,
+  Te as WebForm,
+  se as baseStep,
+  x as getStyledConfig,
+  n as hiddenProps,
+  q as icons,
+  i as setBorder,
+  s as setDisplay,
+  u as setInteraction,
+  d as setMargin,
+  l as setPadding,
+  C as setPosition,
+  g as setText,
+  z as theme,
+  J as uniqueIcons,
+  be as useCarousel,
+  Le as useClickOutside,
+  Pe as useCloudinaryImage,
+  Q as useConfirmDialog,
+  Me as useDebouncedCallback,
+  Oe as useModal,
+  ye as useSearch,
+  e as variantBuilder
+};

package/dist/styles-B2N0JLw1.mjs

@@ -0,0 +1,114 @@
+import { styled as o } from "styled-components";
+import { v as n } from "./utils-V0EumEPM.mjs";
+import { a as t } from "./styles-CplEd2kw.mjs";
+import "react/jsx-runtime";
+const { getVariant: i } = n(
+  (a) => ({
+    ghost: `
+      background: transparent;
+      border: none;
+      color: ${a.palette.gray[800]};
+      --btn-padding-x: ${a.spacing[0.5]};
+      --btn-padding-y: ${a.spacing[0.625]};
+      --btn-spacing: ${a.spacing[0.25]};
+
+      &:disabled {
+        color: ${a.palette.gray[400]};
+        cursor: not-allowed;
+      }
+
+      &:hover:not([disabled]) {
+        background-color: ${a.palette.gray[100]};
+        color: ${a.palette.gray[800]};
+      }
+    `,
+    link: `
+      --btn-padding-x: 0;
+      --btn-padding-y: 0;
+      color: ${a.palette.gray[800]};
+
+      &:hover {
+        color: ${a.palette.gray[500]};
+      }
+    `,
+    primary: `
+      background: ${a.palette.primary[500]};
+      border: none;
+      color: ${a.palette.white};
+      --btn-spacing: ${a.spacing[0.25]};
+
+      &:disabled {
+        background: ${a.palette.gray[200]};
+        color: ${a.palette.gray[400]};
+        cursor: not-allowed;
+      }
+
+      &:hover:not([disabled]) {
+        background-color: ${a.palette.primary[700]};
+        color: ${a.palette.white};
+      }
+    `,
+    secondary: `
+      background: ${a.palette.gray[800]};
+      border: none;
+      color: ${a.palette.white};
+      --btn-spacing: ${a.spacing[0.25]};
+
+      &:disabled {
+        background: ${a.palette.gray[200]};
+        color: ${a.palette.gray[400]};
+        cursor: not-allowed;
+      }
+
+      &:hover:not([disabled]) {
+        background-color: ${a.palette.gray[600]};
+        color: ${a.palette.white};
+      }
+    `,
+    tertiary: `
+      background: transparent;
+      border: 1px solid ${a.palette.primary[500]};
+      color: ${a.palette.primary[500]};
+      --btn-spacing: ${a.spacing[0.25]};
+
+      &:disabled {
+        background: transparent;
+        border: 1px solid ${a.palette.gray[200]};
+        color: ${a.palette.gray[300]};
+        cursor: not-allowed;
+      }
+
+      &:hover:not([disabled]) {
+        background-color: ${a.palette.primary[500]};
+        color: ${a.palette.white};
+      }
+    `
+  })
+), c = o(t)`
+  ${({ theme: a, $variant: r }) => `
+    align-items: center;
+    border-radius: var(--btn-spacing);
+    cursor: pointer;
+    display: inline-flex;
+    font-family: ${a.typography.type.primary};
+    font-size: ${a.typography.text.sm};
+    font-weight: ${a.typography.weight.regular};
+    gap: var(--btn-spacing);
+    justify-content: center;
+    line-height: ${a.spacing[1.25]};
+    padding: var(--btn-padding-y) var(--btn-padding-x);
+    position: relative;
+    text-align: start;
+    transition: all 0.5s ease;
+    white-space: nowrap;
+
+    @media screen and (max-width: ${a.breakpoints.mobile}) {
+      ${r !== "link" ? `--btn-padding-y: ${a.spacing[1]}` : ""};
+    }
+
+    ${i(a, r ?? "primary")}
+  `}
+`;
+export {
+  c as S
+};

package/dist/styles-B64DVBIF.mjs

@@ -0,0 +1,115 @@
+import { styled as b } from "styled-components";
+import { b as c } from "./styles-CplEd2kw.mjs";
+import "react/jsx-runtime";
+const h = b(c)`
+  ${({
+  theme: t,
+  $bgGradient: n = "unset",
+  $color: i = t.palette.gray[800],
+  $display: a = "block",
+  $fontFamily: r = t.typography.type.primary,
+  $fontWeight: p = "bold",
+  $letterSpacing: e = 0,
+  $lineSpacing: l = 1.5,
+  $lineSpacingSm: g,
+  $size: o,
+  $sizeMd: y,
+  $sizeSm: d,
+  $textFill: $ = "unset",
+  $wordBreak: s = "normal"
+}) => `
+    background: ${n};
+    color: ${i};
+    display: ${a};
+    font-family: ${r};
+    font-size: ${t.typography.heading[o]};
+    font-weight: ${t.typography.weight[p]};
+    letter-spacing: ${e};
+    line-height: ${t.spacing[l]};
+    width: ${a === "block" ? "100%" : "auto"};
+    word-break: ${s};
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: ${$};
+
+    @media screen
+      and (min-width: ${t.breakpoints.mobile})
+      and (max-width: ${t.breakpoints.tablet})
+    {
+      font-size: ${t.typography.heading[y ?? o]};
+    }
+
+    @media screen and (max-width: ${t.breakpoints.mobile}) {
+      font-size: ${t.typography.heading[d ?? o]};
+      line-height: ${t.spacing[g ?? l]};
+    }
+  `}
+`, u = b(c)`
+  ${({
+  theme: t,
+  $bgGradient: n = "unset",
+  $color: i = t.palette.gray[600],
+  $display: a = "block",
+  $fontFamily: r = t.typography.type.primary,
+  $fontWeight: p = "regular",
+  $letterSpacing: e = 0,
+  $lineSpacing: l = 1.25,
+  $lineSpacingSm: g,
+  $size: o,
+  $sizeMd: y,
+  $sizeSm: d,
+  $textFill: $ = "unset",
+  $wordBreak: s = "normal"
+}) => `
+    background: ${n};
+    color: ${i};
+    display: ${a};
+    font-family: ${r};
+    font-size: ${t.typography.text[o]};
+    font-weight: ${t.typography.weight[p]};
+    letter-spacing: ${e};
+    line-height: ${t.spacing[l]};
+    width: ${a === "block" ? "100%" : "auto"};
+    word-break: ${s};
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: ${$};
+
+    @media screen
+      and (min-width: ${t.breakpoints.mobile})
+      and (max-width: ${t.breakpoints.tablet})
+    {
+      font-size: ${t.typography.text[y ?? o]};
+    }
+
+    @media screen and (max-width: ${t.breakpoints.mobile}) {
+      font-size: ${t.typography.text[d ?? o]};
+      line-height: ${t.spacing[g ?? l]};
+    }
+  `}
+`, x = b.span`
+  ${({
+  theme: t,
+  $color: n = t.palette.gray[600],
+  $content: i = void 0,
+  $display: a = "inline",
+  $fontWeight: r = "regular",
+  $size: p,
+  $lineSpacing: e = 1.25
+}) => `
+    color: ${n};
+    display: ${a};
+    font-family: ${t.typography.type.primary};
+    font-size: ${t.typography.text[p]};
+    font-weight: ${t.typography.weight[r]};
+    line-height: ${t.spacing[e]};
+    width: ${a === "block" ? "100%" : "auto"};
+
+    ${i === void 0 ? "" : `&::after { content: "${i}"; }`}
+  `}
+`;
+export {
+  h as S,
+  x as a,
+  u as b
+};

package/dist/{styles-BAhpqi6C.mjs → styles-BXFVwnWT.mjs}

@@ -1,15 +1,15 @@
-import { styled as n } from "styled-components";
-const e = n.div`
-  ${({ theme: n2 }) => `
+import { styled as i } from "styled-components";
+const a = i.div`
+  ${({ theme: t }) => `
     align-items: flex-start;
     display: inline-flex;
     flex-direction: column;
-    gap: ${n2.spacing[0.25]};
+    gap: ${t.spacing[0.25]};
     position: relative;
     width: 100%;
 
     label {
-      color: ${n2.palette.gray[800]};
+      color: ${t.palette.gray[800]};
     }
 
     &:has(input.date-input) {
@@ -30,38 +30,38 @@ const e = n.div`
     }
 
     > *:not(.error-msg) {
-      font-family: ${n2.typography.type.primary};
-      font-size: ${n2.typography.text.sm};
+      font-family: ${t.typography.type.primary};
+      font-size: ${t.typography.text.sm};
       font-style: normal;
-      font-weight: ${n2.typography.weight.regular};
-      line-height: ${n2.spacing[1.25]};
+      font-weight: ${t.typography.weight.regular};
+      line-height: ${t.spacing[1.25]};
     }
   `}
-`, t = n.div`
-  ${({ theme: n2 }) => `
+`, n = i.div`
+  ${({ theme: t }) => `
     align-items: center;
     display: flex;
-    border-radius: ${n2.spacing[0.5]};
+    border-radius: ${t.spacing[0.5]};
     border: 1px solid;
-    border-color: ${n2.palette.gray[300]};
-    color: ${n2.palette.gray[600]};
-    gap: ${n2.spacing[0.625]};
+    border-color: ${t.palette.gray[300]};
+    color: ${t.palette.gray[600]};
+    gap: ${t.spacing[0.625]};
     justify-content: space-between;
     height: 40px;
-    padding: ${n2.spacing[0.625]} ${n2.spacing[0.75]};
+    padding: ${t.spacing[0.625]} ${t.spacing[0.75]};
     width: 100%;
     white-space: nowrap;
 
     input, textarea {
       background: inherit;
-      color: ${n2.palette.gray[800]};
+      color: ${t.palette.gray[800]};
       cursor: inherit;
       outline: none;
       resize: none;
       width: 100%;
 
       &::placeholder {
-        color: ${n2.palette.gray[400]};
+        color: ${t.palette.gray[400]};
       }
 
       &:focus-visible {
@@ -94,7 +94,7 @@ const e = n.div`
     }
 
     textarea {
-      min-height: ${n2.spacing[6]};
+      min-height: ${t.spacing[6]};
     }
 
     span:not(.action) {
@@ -102,18 +102,18 @@ const e = n.div`
     }
 
     &.disabled {
-      background: ${n2.palette.gray[100]};
-      color: ${n2.palette.gray[400]};
+      background: ${t.palette.gray[100]};
+      color: ${t.palette.gray[400]};
       cursor: not-allowed;
     }
 
     &.error:not(.disabled) {
-      border: 1px solid ${n2.palette.error[500]};
+      border: 1px solid ${t.palette.error[500]};
     }
 
     &:focus-within:not(.disabled, .error) {
-      background: ${n2.palette.white};
-      border: 2px solid ${n2.palette.black};
+      background: ${t.palette.white};
+      border: 2px solid ${t.palette.black};
 
       button.action-btn {
         height: 36px;
@@ -122,12 +122,12 @@ const e = n.div`
     }
 
     &:hover:not(:focus-within, .disabled, .error) {
-      background: ${n2.palette.white};
-      border: 1px solid ${n2.palette.gray[600]};
+      background: ${t.palette.white};
+      border: 1px solid ${t.palette.gray[600]};
     }
   `}
 `;
 export {
-  t as S,
-  e as a
+  n as S,
+  a
 };