@clicoh/orion-library 1.0.18 → 1.1.0-beta.0

package/assets/css/base.css

@@ -45,12 +45,12 @@
   --color-success-dark-1: #264936;
 
   --color-info-1: #e9f2ff;
-  --color-info-2: #DBEAFE;
+  --color-info-2: #dbeafe;
   --color-info: #297eff;
   --color-info-dark: #5498ff;
   --color-info-dark-1: #233554;
-  --color-info-dark-2: #DBEAFE;
-  --color-info-dark-3: #1E40AF;
+  --color-info-dark-2: #dbeafe;
+  --color-info-dark-3: #1e40af;
 
   --color-teal-1: #e8fcfa;
   --color-teal: #25dec8;
@@ -66,7 +66,7 @@
   --color-pink: #f144d6;
   --color-pink-dark: #f144d6;
   --color-pink-dark-1: #222329;
-  --color-pink-light: #FCDDEC;
+  --color-pink-light: #fcddec;
 
   --color-violet-1: #fdf8fe;
   --color-violet: #c854e4;
@@ -103,16 +103,41 @@
   --body-bg-color: var(--color-white);
 }
 
-* {
-  outline: none;
+.dark {
+  --body-text-color: var(--color-white);
+  --body-bg-color: var(--color-black);
+  color-scheme: dark;
+}
+
+:focus-visible {
+  outline: 2px solid var(--color-lavender);
+  outline-offset: 2px;
+}
+
+.dark :focus-visible {
+  outline-color: var(--color-lavender-dark);
 }
 
 body {
   color: var(--body-text-color);
   background: var(--body-bg-color);
+  transition:
+    color 150ms ease,
+    background-color 150ms ease;
   @apply text-sm;
 }
 
+@media (prefers-reduced-motion: reduce) {
+  *,
+  ::before,
+  ::after {
+    scroll-behavior: auto !important;
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
 .Toastify__toast-icon {
   width: 24px;
   height: 24px;
@@ -121,3 +146,14 @@ body {
 .Toastify__close-button {
   align-self: center;
 }
+
+.dark .Toastify__toast {
+  --toastify-color-light: var(--color-black-1);
+  --toastify-text-color-light: var(--color-white);
+  background-color: var(--color-black-1);
+  color: var(--color-white);
+}
+
+.dark .Toastify__close-button {
+  color: var(--color-white);
+}

package/dist/components/00-base/RootLayout/RootLayout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RootLayout.d.ts","sourceRoot":"","sources":["../../../../src/components/00-base/RootLayout/RootLayout.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGlC,OAAO,iCAAiC,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAGlD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,EAAE,WAAW,GAAG,SAAS,CAmB/D"}
+{"version":3,"file":"RootLayout.d.ts","sourceRoot":"","sources":["../../../../src/components/00-base/RootLayout/RootLayout.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGlC,OAAO,iCAAiC,CAAC;AAEzC,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAGlD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,EAAE,WAAW,GAAG,SAAS,CAsB/D"}

package/dist/components/00-base/RootLayout/RootLayout.jsx

@@ -1,6 +1,7 @@
 import { ToastContainer } from 'react-toastify';
 import FaviconImg from '../../../../assets/favicon.ico';
 import '../../../../assets/css/base.css';
+import { ThemeProvider, ThemeScript } from '../../../hooks/useTheme';
 import { notoSans } from '../typography';
 /**
  * RootLayout component for rendering the root layout of the application.
@@ -21,15 +22,18 @@ import { notoSans } from '../typography';
  * @returns {ReactNode} The rendered RootLayout component.
  */
 export function RootLayout({ children }) {
-    return (<html lang="es" className={notoSans.className}>
+    return (<html lang="es" className={notoSans.className} suppressHydrationWarning>
       <head>
+        <ThemeScript />
         <link rel="shortcut icon" href={FaviconImg.src} type="image/x-icon" sizes="48x48"/>
         <meta name="author" content="clicOH"/>
         <link rel="author" href="https://clicoh.com"/>
       </head>
       <body className={'antialiased'}>
-        {children}
-        <ToastContainer />
+        <ThemeProvider>
+          {children}
+          <ToastContainer />
+        </ThemeProvider>
       </body>
     </html>);
 }

package/dist/components/00-base/RootLayout/RootLayout.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"RootLayout.jsx","sourceRoot":"","sources":["../../../../src/components/00-base/RootLayout/RootLayout.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,UAAU,MAAM,gCAAgC,CAAC;AACxD,OAAO,iCAAiC,CAAC;AAEzC,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,UAAU,UAAU,CAAC,EAAE,QAAQ,EAAe;IAClD,OAAO,CACL,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,QAAQ,CAAC,SAAS,CAAC,CAC5C;MAAA,CAAC,IAAI,CACH;QAAA,CAAC,IAAI,CACH,GAAG,CAAC,eAAe,CACnB,IAAI,CAAC,CAAC,UAAU,CAAC,GAAG,CAAC,CACrB,IAAI,CAAC,cAAc,CACnB,KAAK,CAAC,OAAO,EAEf;QAAA,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,EACpC;QAAA,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,IAAI,CAAC,oBAAoB,EAC9C;MAAA,EAAE,IAAI,CACN;MAAA,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,aAAa,CAAC,CAC7B;QAAA,CAAC,QAAQ,CACT;QAAA,CAAC,cAAc,CAAC,AAAD,EACjB;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC"}
+{"version":3,"file":"RootLayout.jsx","sourceRoot":"","sources":["../../../../src/components/00-base/RootLayout/RootLayout.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,UAAU,MAAM,gCAAgC,CAAC;AACxD,OAAO,iCAAiC,CAAC;AACzC,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAErE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,UAAU,UAAU,CAAC,EAAE,QAAQ,EAAe;IAClD,OAAO,CACL,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC,wBAAwB,CACrE;MAAA,CAAC,IAAI,CACH;QAAA,CAAC,WAAW,CAAC,AAAD,EACZ;QAAA,CAAC,IAAI,CACH,GAAG,CAAC,eAAe,CACnB,IAAI,CAAC,CAAC,UAAU,CAAC,GAAG,CAAC,CACrB,IAAI,CAAC,cAAc,CACnB,KAAK,CAAC,OAAO,EAEf;QAAA,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,EACpC;QAAA,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,IAAI,CAAC,oBAAoB,EAC9C;MAAA,EAAE,IAAI,CACN;MAAA,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,aAAa,CAAC,CAC7B;QAAA,CAAC,aAAa,CACZ;UAAA,CAAC,QAAQ,CACT;UAAA,CAAC,cAAc,CAAC,AAAD,EACjB;QAAA,EAAE,aAAa,CACjB;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC"}

package/dist/components/01-atoms/Badge/Badge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../../src/components/01-atoms/Badge/Badge.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvD,KAAK,UAAU,GAAG;IAChB,QAAQ,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,UAAU,GAAG,UAAU,CAAC;CAC9E,GAAG,cAAc,CAAC,eAAe,CAAC,CAAC;AAWpC;;;;;;;;;;;;;GAaG;AACH,wBAAgB,KAAK,CAAC,EACpB,QAAQ,EACR,QAAQ,EACR,GAAG,SAAS,EACb,EAAE,UAAU,GAAG,SAAS,CAexB"}
+{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../../src/components/01-atoms/Badge/Badge.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvD,KAAK,UAAU,GAAG;IAChB,QAAQ,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,UAAU,GAAG,UAAU,CAAC;CAC9E,GAAG,cAAc,CAAC,eAAe,CAAC,CAAC;AAuBpC;;;;;;;;;;;;;GAaG;AACH,wBAAgB,KAAK,CAAC,EACpB,QAAQ,EACR,QAAQ,EACR,GAAG,SAAS,EACb,EAAE,UAAU,GAAG,SAAS,CAexB"}

package/dist/components/01-atoms/Badge/Badge.jsx

@@ -1,12 +1,12 @@
 import clsx from 'clsx';
 import { Paragraph } from '../Paragraph';
 const styleMap = {
-    success: clsx('border-success before:bg-success'),
-    warning: clsx('border-warning before:bg-warning'),
-    error: clsx('border-error before:bg-error'),
-    info: clsx('border-info before:bg-info'),
-    progress: clsx('border-lavender before:bg-lavender'),
-    disabled: clsx('border-gray-1 before:bg-gray-1'),
+    success: clsx('border-success before:bg-success dark:border-success-dark dark:before:bg-success-dark'),
+    warning: clsx('border-warning before:bg-warning dark:border-warning-dark dark:before:bg-warning-dark'),
+    error: clsx('border-error before:bg-error dark:border-error-dark dark:before:bg-error-dark'),
+    info: clsx('border-info before:bg-info dark:border-info-dark dark:before:bg-info-dark'),
+    progress: clsx('border-lavender before:bg-lavender dark:border-lavender-dark dark:before:bg-lavender-dark'),
+    disabled: clsx('border-gray-1 before:bg-gray-1 dark:border-gray-2 dark:before:bg-gray-2'),
 };
 /**
  * Badge component used for indicating different statuses.
@@ -25,7 +25,7 @@ const styleMap = {
 export function Badge({ modifier, children, ...restProps }) {
     const className = clsx('relative inline-block rounded-full border py-1 pr-2 pl-6', 'before:absolute before:start-3 before:top-[50%] before:-mt-1 before:block before:h-[6px] before:w-[6px] before:rounded-full', styleMap[modifier], restProps.className);
     return (<span {...restProps} className={className}>
-      <Paragraph size="chips" className="text-nowrap">
+      <Paragraph size="chips" className="text-nowrap dark:text-white">
         {children}
       </Paragraph>
     </span>);

package/dist/components/01-atoms/Badge/Badge.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.jsx","sourceRoot":"","sources":["../../../../src/components/01-atoms/Badge/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAMzC,MAAM,QAAQ,GAA2C;IACvD,OAAO,EAAE,IAAI,CAAC,kCAAkC,CAAC;IACjD,OAAO,EAAE,IAAI,CAAC,kCAAkC,CAAC;IACjD,KAAK,EAAE,IAAI,CAAC,8BAA8B,CAAC;IAC3C,IAAI,EAAE,IAAI,CAAC,4BAA4B,CAAC;IACxC,QAAQ,EAAE,IAAI,CAAC,oCAAoC,CAAC;IACpD,QAAQ,EAAE,IAAI,CAAC,gCAAgC,CAAC;CACjD,CAAC;AAEF;;;;;;;;;;;;;GAaG;AACH,MAAM,UAAU,KAAK,CAAC,EACpB,QAAQ,EACR,QAAQ,EACR,GAAG,SAAS,EACD;IACX,MAAM,SAAS,GAAG,IAAI,CACpB,0DAA0D,EAC1D,6HAA6H,EAC7H,QAAQ,CAAC,QAAQ,CAAC,EAClB,SAAS,CAAC,SAAS,CACpB,CAAC;IAEF,OAAO,CACL,CAAC,IAAI,CAAC,IAAI,SAAS,CAAC,CAAC,SAAS,CAAC,CAAC,SAAS,CAAC,CACxC;MAAA,CAAC,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,aAAa,CAC7C;QAAA,CAAC,QAAQ,CACX;MAAA,EAAE,SAAS,CACb;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC"}
+{"version":3,"file":"Badge.jsx","sourceRoot":"","sources":["../../../../src/components/01-atoms/Badge/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAMzC,MAAM,QAAQ,GAA2C;IACvD,OAAO,EAAE,IAAI,CACX,uFAAuF,CACxF;IACD,OAAO,EAAE,IAAI,CACX,uFAAuF,CACxF;IACD,KAAK,EAAE,IAAI,CACT,+EAA+E,CAChF;IACD,IAAI,EAAE,IAAI,CACR,2EAA2E,CAC5E;IACD,QAAQ,EAAE,IAAI,CACZ,2FAA2F,CAC5F;IACD,QAAQ,EAAE,IAAI,CACZ,yEAAyE,CAC1E;CACF,CAAC;AAEF;;;;;;;;;;;;;GAaG;AACH,MAAM,UAAU,KAAK,CAAC,EACpB,QAAQ,EACR,QAAQ,EACR,GAAG,SAAS,EACD;IACX,MAAM,SAAS,GAAG,IAAI,CACpB,0DAA0D,EAC1D,6HAA6H,EAC7H,QAAQ,CAAC,QAAQ,CAAC,EAClB,SAAS,CAAC,SAAS,CACpB,CAAC;IAEF,OAAO,CACL,CAAC,IAAI,CAAC,IAAI,SAAS,CAAC,CAAC,SAAS,CAAC,CAAC,SAAS,CAAC,CACxC;MAAA,CAAC,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,6BAA6B,CAC7D;QAAA,CAAC,QAAQ,CACX;MAAA,EAAE,SAAS,CACb;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC"}

package/dist/components/01-atoms/Button/Button.jsx

@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 const styleMap = {
     principal: clsx('text-white not-disabled:hover:text-black not-disabled:active:text-black disabled:text-white [&:not(:disabled):not(:hover)]:focus:text-white', 'disabled:before:bg-gray-3 not-disabled:active:before:bg-gray-6 before:bg-black not-disabled:hover:before:bg-white [&:not(:disabled):not(:hover)]:focus:before:bg-black', 'disabled:after:bg-gray-3 [&:not(:disabled):not(:hover)]:focus:after:bg-clicoh not-disabled:hover:after:bg-clicoh not-disabled:active:after:bg-clicoh after:bg-black', 'dark:not-disabled:active:text-gray-6 dark:text-black dark:not-disabled:hover:text-white dark:disabled:text-white dark:[&:not(:disabled):not(:hover)]:focus:text-black', 'dark:disabled:before:bg-gray-1 dark:[&:not(:disabled):not(:hover)]:focus:before:bg-gray-5 dark:before:bg-white dark:not-disabled:hover:before:bg-black dark:not-disabled:active:before:bg-black', 'dark:disabled:after:bg-gray-1 dark:[&:not(:disabled):not(:hover)]:focus:after:bg-gray-5 dark:not-disabled:hover:after:bg-clicoh dark:not-disabled:active:after:bg-clicoh dark:after:bg-white'),
-    second: clsx('text-gray-1 disabled:text-gray-3 [&:not(:disabled):not(:hover)]:focus:text-gray-1 not-disabled:active:text-gray-5 not-disabled:hover:text-white', 'disable:before:bg-white [&:not(:disabled):not(:hover)]:focus:before:bg-gray-6 before:bg-white not-disabled:hover:before:bg-black not-disabled:active:before:bg-black', 'after:bg-gray-1 disabled:after:bg-gray-3 [&:not(:disabled):not(:hover)]:focus:after:bg-gray-1 not-disabled:hover:after:bg-black not-disabled:active:after:bg-black', 'dark:disabled:text-gray-2 dark:[&:not(:disabled):not(:hover)]:focus:text-gray-5 dark:text-white dark:not-disabled:hover:text-black dark:not-disabled:active:text-black', 'dark:disable:before:bg-white dark:not-disabled:active:before:bg-gray-6 dark:before:bg-black dark:not-disabled:hover:before:bg-white dark:[&:not(:disabled):not(:hover)]:focus:before:bg-black', 'dark:disabled:after:bg-gray-2 dark:[&:not(:disabled):not(:hover)]:focus:after:bg-gray-5 dark:not-disabled:active:after:bg-gray-6 dark:after:bg-white dark:not-disabled:hover:after:bg-white'),
+    second: clsx('text-gray-1 disabled:text-gray-3 [&:not(:disabled):not(:hover)]:focus:text-gray-1 not-disabled:active:text-gray-5 not-disabled:hover:text-white', 'disable:before:bg-white [&:not(:disabled):not(:hover)]:focus:before:bg-gray-6 before:bg-white not-disabled:hover:before:bg-black not-disabled:active:before:bg-black', 'after:bg-gray-1 disabled:after:bg-gray-3 [&:not(:disabled):not(:hover)]:focus:after:bg-gray-1 not-disabled:hover:after:bg-black not-disabled:active:after:bg-black', 'dark:disabled:text-gray-2 dark:[&:not(:disabled):not(:hover)]:focus:text-gray-5 dark:text-white dark:not-disabled:hover:text-black dark:not-disabled:active:text-black', 'dark:not-disabled:active:before:bg-gray-6 dark:before:bg-black dark:not-disabled:hover:before:bg-white dark:disabled:before:bg-white dark:[&:not(:disabled):not(:hover)]:focus:before:bg-black', 'dark:disabled:after:bg-gray-2 dark:[&:not(:disabled):not(:hover)]:focus:after:bg-gray-5 dark:not-disabled:active:after:bg-gray-6 dark:after:bg-white dark:not-disabled:hover:after:bg-white'),
     text: clsx('underline', 'text-black', 'disabled:text-gray-3', 'active:text-gray-1', 'not-disabled:hover:before:bg-gray-5', 'not-disabled:hover:after:bg-gray-5', 'dark:active:text-gray-7 dark:disabled:text-gray-1 dark:text-white', 'dark:not-disabled:hover:before:bg-gray-1', 'dark:not-disabled:hover:after:bg-gray-1'),
     action: clsx('disabled:text-gray-3 not-disabled:active:text-gray-5 text-black not-disabled:hover:text-white [&:not(:disabled):not(:hover)]:focus:text-black', '[&:not(:disabled):not(:hover)]:focus:before:bg-gray-5 before:bg-white not-disabled:hover:before:bg-black not-disabled:active:before:bg-black disabled:before:bg-white', 'after:bg-clicoh disabled:after:bg-gray-3 not-disabled:hover:after:bg-black not-disabled:hover:after:bg-none not-disabled:active:after:bg-black not-disabled:active:after:bg-none disabled:after:bg-none', 'dark:disabled:text-gray-2 dark:[&:not(:disabled):not(:hover)]:focus:text-gray-5 dark:text-white dark:not-disabled:hover:text-black dark:not-disabled:active:text-black', 'dark:not-disabled:active:before:bg-gray-5 dark:before:bg-black dark:not-disabled:hover:before:bg-white dark:disabled:before:bg-black dark:[&:not(:disabled):not(:hover)]:focus:before:bg-black', 'dark:after:bg-clicoh dark:disabled:after:bg-gray-2 dark:not-disabled:active:after:bg-gray-5 dark:not-disabled:hover:after:bg-white dark:not-disabled:hover:after:bg-none dark:not-disabled:active:after:bg-none dark:disabled:after:bg-none'),
 };
@@ -23,7 +23,7 @@ const styleMap = {
  * @returns {ReactNode} The rendered Button component.
  */
 export function Button({ modifier = 'principal', iconL, iconR, children, ...restProps }) {
-    const className = clsx('relative flex items-center justify-center py-[10px] text-center text-sm font-semibold', 'rounded-3xl border-2 border-transparent transition-colors', 'before:absolute before:inset-0 before:-z-10 before:block before:rounded-3xl before:transition-colors', 'after:absolute after:-inset-[2px] after:-z-20 after:block after:rounded-3xl after:transition-colors', iconL ? 'pl-4' : 'pl-6', iconR ? 'pr-4' : 'pr-6', styleMap[modifier], restProps.className);
+    const className = clsx('relative isolate flex items-center justify-center py-[10px] text-center text-sm font-semibold', 'rounded-3xl border-2 border-transparent transition-colors', 'before:absolute before:inset-0 before:-z-10 before:block before:rounded-3xl before:transition-colors', 'after:absolute after:-inset-[2px] after:-z-20 after:block after:rounded-3xl after:transition-colors', iconL ? 'pl-4' : 'pl-6', iconR ? 'pr-4' : 'pr-6', styleMap[modifier], restProps.className);
     return (<button {...restProps} className={className}>
       {!!iconL && <span className="pr-2 text-base">{iconL}</span>}
       <span>{children}</span>

package/dist/components/01-atoms/Button/Button.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"Button.jsx","sourceRoot":"","sources":["../../../../src/components/01-atoms/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AAWxB,MAAM,QAAQ,GAAoC;IAChD,SAAS,EAAE,IAAI,CACb,6IAA6I,EAC7I,wKAAwK,EACxK,qKAAqK,EACrK,uKAAuK,EACvK,iMAAiM,EACjM,8LAA8L,CAC/L;IACD,MAAM,EAAE,IAAI,CACV,iJAAiJ,EACjJ,sKAAsK,EACtK,oKAAoK,EACpK,wKAAwK,EACxK,+LAA+L,EAC/L,6LAA6L,CAC9L;IACD,IAAI,EAAE,IAAI,CACR,WAAW,EACX,YAAY,EACZ,sBAAsB,EACtB,oBAAoB,EACpB,qCAAqC,EACrC,oCAAoC,EACpC,mEAAmE,EACnE,0CAA0C,EAC1C,yCAAyC,CAC1C;IACD,MAAM,EAAE,IAAI,CACV,+IAA+I,EAC/I,uKAAuK,EACvK,yMAAyM,EACzM,wKAAwK,EACxK,gMAAgM,EAChM,6OAA6O,CAC9O;CACF,CAAC;AAEF;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,UAAU,MAAM,CAAC,EACrB,QAAQ,GAAG,WAAW,EACtB,KAAK,EACL,KAAK,EACL,QAAQ,EACR,GAAG,SAAS,EACA;IACZ,MAAM,SAAS,GAAG,IAAI,CACpB,uFAAuF,EACvF,2DAA2D,EAC3D,sGAAsG,EACtG,qGAAqG,EACrG,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,EACvB,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,EACvB,QAAQ,CAAC,QAAQ,CAAC,EAClB,SAAS,CAAC,SAAS,CACpB,CAAC;IAEF,OAAO,CACL,CAAC,MAAM,CAAC,IAAI,SAAS,CAAC,CAAC,SAAS,CAAC,CAAC,SAAS,CAAC,CAC1C;MAAA,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,CAC3D;MAAA,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,EAAE,IAAI,CACtB;MAAA,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,CAC7D;IAAA,EAAE,MAAM,CAAC,CACV,CAAC;AACJ,CAAC"}
+{"version":3,"file":"Button.jsx","sourceRoot":"","sources":["../../../../src/components/01-atoms/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AAWxB,MAAM,QAAQ,GAAoC;IAChD,SAAS,EAAE,IAAI,CACb,6IAA6I,EAC7I,wKAAwK,EACxK,qKAAqK,EACrK,uKAAuK,EACvK,iMAAiM,EACjM,8LAA8L,CAC/L;IACD,MAAM,EAAE,IAAI,CACV,iJAAiJ,EACjJ,sKAAsK,EACtK,oKAAoK,EACpK,wKAAwK,EACxK,gMAAgM,EAChM,6LAA6L,CAC9L;IACD,IAAI,EAAE,IAAI,CACR,WAAW,EACX,YAAY,EACZ,sBAAsB,EACtB,oBAAoB,EACpB,qCAAqC,EACrC,oCAAoC,EACpC,mEAAmE,EACnE,0CAA0C,EAC1C,yCAAyC,CAC1C;IACD,MAAM,EAAE,IAAI,CACV,+IAA+I,EAC/I,uKAAuK,EACvK,yMAAyM,EACzM,wKAAwK,EACxK,gMAAgM,EAChM,6OAA6O,CAC9O;CACF,CAAC;AAEF;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,UAAU,MAAM,CAAC,EACrB,QAAQ,GAAG,WAAW,EACtB,KAAK,EACL,KAAK,EACL,QAAQ,EACR,GAAG,SAAS,EACA;IACZ,MAAM,SAAS,GAAG,IAAI,CACpB,+FAA+F,EAC/F,2DAA2D,EAC3D,sGAAsG,EACtG,qGAAqG,EACrG,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,EACvB,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,EACvB,QAAQ,CAAC,QAAQ,CAAC,EAClB,SAAS,CAAC,SAAS,CACpB,CAAC;IAEF,OAAO,CACL,CAAC,MAAM,CAAC,IAAI,SAAS,CAAC,CAAC,SAAS,CAAC,CAAC,SAAS,CAAC,CAC1C;MAAA,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,CAC3D;MAAA,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,EAAE,IAAI,CACtB;MAAA,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,CAC7D;IAAA,EAAE,MAAM,CAAC,CACV,CAAC;AACJ,CAAC"}

package/dist/components/01-atoms/Checkbox/Checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../../src/components/01-atoms/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,KAAK,iBAAiB,EACtB,KAAK,cAAc,EACnB,KAAK,mBAAmB,EACxB,KAAK,SAAS,EAGf,MAAM,OAAO,CAAC;AAIf,KAAK,aAAa,GAAG;IACnB,QAAQ,CAAC,KAAK,EAAE,IAAI,CAAC,cAAc,CAAC,gBAAgB,CAAC,EAAE,IAAI,CAAC,CAAC;IAC7D,QAAQ,CAAC,QAAQ,EAAE,iBAAiB,CAClC,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,gBAAgB,CACjB,CAAC;IACF,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,QAAQ,EACR,UAAU,EACV,KAAK,GACN,EAAE,aAAa,GAAG,SAAS,CA6C3B"}
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../../src/components/01-atoms/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,KAAK,iBAAiB,EACtB,KAAK,cAAc,EACnB,KAAK,mBAAmB,EACxB,KAAK,SAAS,EAEf,MAAM,OAAO,CAAC;AAGf,KAAK,aAAa,GAAG;IACnB,QAAQ,CAAC,KAAK,EAAE,IAAI,CAAC,cAAc,CAAC,gBAAgB,CAAC,EAAE,IAAI,CAAC,CAAC;IAC7D,QAAQ,CAAC,QAAQ,EAAE,iBAAiB,CAClC,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,gBAAgB,CACjB,CAAC;IACF,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,QAAQ,EACR,UAAU,EACV,KAAK,GACN,EAAE,aAAa,GAAG,SAAS,CAsD3B"}

package/dist/components/01-atoms/Checkbox/Checkbox.jsx

@@ -1,7 +1,6 @@
 'use client';
 import clsx from 'clsx';
-import { useEffect, useState, } from 'react';
-import { generateUniqueId } from '../../../utils';
+import { useId, } from 'react';
 import { RenderErrorOrHelperText } from '../Input/utils/RenderErrorOrHelperText';
 /**
  * Checkbox component used for rendering a labeled checkbox with optional helper text and error message.
@@ -25,24 +24,31 @@ import { RenderErrorOrHelperText } from '../Input/utils/RenderErrorOrHelperText'
  * @returns {ReactNode} The rendered Checkbox component.
  */
 export function Checkbox({ label, checkbox, helperText, error, }) {
-    const [id, setId] = useState('');
-    const checkboxClasses = clsx('relative h-4 w-4 cursor-pointer border-2 outline-hidden', error && !checkbox.disabled ? 'accent-error' : 'accent-black', !checkbox.disabled &&
-        'hover:before:bg-opacity/15 before:absolute before:-top-1 before:-left-1 before:h-6 before:w-6 before:rounded-full before:bg-transparent before:transition hover:before:bg-black/15', checkbox.className);
+    const generatedId = useId();
+    const id = checkbox.id ?? generatedId;
+    const descriptionId = error || helperText ? `${id}-description` : undefined;
+    const describedBy = [checkbox['aria-describedby'], descriptionId].filter(Boolean).join(' ') ||
+        undefined;
+    const checkboxClasses = clsx('disabled:accent-gray-3 dark:disabled:accent-gray-2 relative h-4 w-4 cursor-pointer border-2 outline-hidden disabled:cursor-not-allowed', error && !checkbox.disabled
+        ? 'accent-error dark:accent-error-dark'
+        : 'accent-black dark:accent-white', !checkbox.disabled &&
+        'hover:before:bg-opacity/15 before:absolute before:-top-1 before:-left-1 before:h-6 before:w-6 before:rounded-full before:bg-transparent before:transition hover:before:bg-black/15 dark:hover:before:bg-white/15', checkbox.className);
     const labelProps = {
         htmlFor: id,
-        className: clsx('cursor-pointer p-2 text-sm', error ? 'text-error' : 'text-black', checkbox.disabled && 'text-gray-3', label?.className),
+        className: clsx('cursor-pointer p-2 text-sm', checkbox.disabled
+            ? 'text-gray-3 dark:text-gray-2 cursor-not-allowed'
+            : error
+                ? 'text-error dark:text-error-dark'
+                : 'text-black dark:text-white', label?.className),
     };
-    useEffect(() => {
-        setId(generateUniqueId());
-    }, []);
     return (<div className="w-full max-w-full">
       <div className="flex items-center px-2">
-        <input {...checkbox} id={id} type="checkbox" className={checkboxClasses}/>
+        <input {...checkbox} id={id} type="checkbox" className={checkboxClasses} aria-invalid={error ? true : checkbox['aria-invalid']} aria-describedby={describedBy}/>
         <label {...label} {...labelProps}>
           {label.children}
         </label>
       </div>
-      <RenderErrorOrHelperText disabled={checkbox.disabled} helperText={helperText} error={error}/>
+      <RenderErrorOrHelperText id={descriptionId} disabled={checkbox.disabled} helperText={helperText} error={error}/>
     </div>);
 }
 //# sourceMappingURL=Checkbox.jsx.map

package/dist/components/01-atoms/Checkbox/Checkbox.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.jsx","sourceRoot":"","sources":["../../../../src/components/01-atoms/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAKL,SAAS,EACT,QAAQ,GACT,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,uBAAuB,EAAE,MAAM,wCAAwC,CAAC;AAYjF;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,UAAU,QAAQ,CAAC,EACvB,KAAK,EACL,QAAQ,EACR,UAAU,EACV,KAAK,GACS;IACd,MAAM,CAAC,EAAE,EAAE,KAAK,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAEjC,MAAM,eAAe,GAAG,IAAI,CAC1B,yDAAyD,EACzD,KAAK,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,cAAc,EAC7D,CAAC,QAAQ,CAAC,QAAQ;QAChB,oLAAoL,EACtL,QAAQ,CAAC,SAAS,CACnB,CAAC;IAEF,MAAM,UAAU,GAA4C;QAC1D,OAAO,EAAE,EAAE;QACX,SAAS,EAAE,IAAI,CACb,4BAA4B,EAC5B,KAAK,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,YAAY,EACnC,QAAQ,CAAC,QAAQ,IAAI,aAAa,EAClC,KAAK,EAAE,SAAS,CACjB;KACF,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,KAAK,CAAC,gBAAgB,EAAE,CAAC,CAAC;IAC5B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,CAAC,GAAG,CAAC,SAAS,CAAC,mBAAmB,CAChC;MAAA,CAAC,GAAG,CAAC,SAAS,CAAC,wBAAwB,CACrC;QAAA,CAAC,KAAK,CACJ,IAAI,QAAQ,CAAC,CACb,EAAE,CAAC,CAAC,EAAE,CAAC,CACP,IAAI,CAAC,UAAU,CACf,SAAS,CAAC,CAAC,eAAe,CAAC,EAE7B;QAAA,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,CAAC,IAAI,UAAU,CAAC,CAC/B;UAAA,CAAC,KAAK,CAAC,QAAQ,CACjB;QAAA,EAAE,KAAK,CACT;MAAA,EAAE,GAAG,CACL;MAAA,CAAC,uBAAuB,CACtB,QAAQ,CAAC,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAC5B,UAAU,CAAC,CAAC,UAAU,CAAC,CACvB,KAAK,CAAC,CAAC,KAAK,CAAC,EAEjB;IAAA,EAAE,GAAG,CAAC,CACP,CAAC;AACJ,CAAC"}
+{"version":3,"file":"Checkbox.jsx","sourceRoot":"","sources":["../../../../src/components/01-atoms/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAKL,KAAK,GACN,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,uBAAuB,EAAE,MAAM,wCAAwC,CAAC;AAYjF;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,UAAU,QAAQ,CAAC,EACvB,KAAK,EACL,QAAQ,EACR,UAAU,EACV,KAAK,GACS;IACd,MAAM,WAAW,GAAG,KAAK,EAAE,CAAC;IAC5B,MAAM,EAAE,GAAG,QAAQ,CAAC,EAAE,IAAI,WAAW,CAAC;IACtC,MAAM,aAAa,GAAG,KAAK,IAAI,UAAU,CAAC,CAAC,CAAC,GAAG,EAAE,cAAc,CAAC,CAAC,CAAC,SAAS,CAAC;IAC5E,MAAM,WAAW,GACf,CAAC,QAAQ,CAAC,kBAAkB,CAAC,EAAE,aAAa,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;QACvE,SAAS,CAAC;IAEZ,MAAM,eAAe,GAAG,IAAI,CAC1B,wIAAwI,EACxI,KAAK,IAAI,CAAC,QAAQ,CAAC,QAAQ;QACzB,CAAC,CAAC,qCAAqC;QACvC,CAAC,CAAC,gCAAgC,EACpC,CAAC,QAAQ,CAAC,QAAQ;QAChB,kNAAkN,EACpN,QAAQ,CAAC,SAAS,CACnB,CAAC;IAEF,MAAM,UAAU,GAA4C;QAC1D,OAAO,EAAE,EAAE;QACX,SAAS,EAAE,IAAI,CACb,4BAA4B,EAC5B,QAAQ,CAAC,QAAQ;YACf,CAAC,CAAC,iDAAiD;YACnD,CAAC,CAAC,KAAK;gBACL,CAAC,CAAC,iCAAiC;gBACnC,CAAC,CAAC,4BAA4B,EAClC,KAAK,EAAE,SAAS,CACjB;KACF,CAAC;IAEF,OAAO,CACL,CAAC,GAAG,CAAC,SAAS,CAAC,mBAAmB,CAChC;MAAA,CAAC,GAAG,CAAC,SAAS,CAAC,wBAAwB,CACrC;QAAA,CAAC,KAAK,CACJ,IAAI,QAAQ,CAAC,CACb,EAAE,CAAC,CAAC,EAAE,CAAC,CACP,IAAI,CAAC,UAAU,CACf,SAAS,CAAC,CAAC,eAAe,CAAC,CAC3B,YAAY,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,cAAc,CAAC,CAAC,CACtD,gBAAgB,CAAC,CAAC,WAAW,CAAC,EAEhC;QAAA,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,CAAC,IAAI,UAAU,CAAC,CAC/B;UAAA,CAAC,KAAK,CAAC,QAAQ,CACjB;QAAA,EAAE,KAAK,CACT;MAAA,EAAE,GAAG,CACL;MAAA,CAAC,uBAAuB,CACtB,EAAE,CAAC,CAAC,aAAa,CAAC,CAClB,QAAQ,CAAC,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAC5B,UAAU,CAAC,CAAC,UAAU,CAAC,CACvB,KAAK,CAAC,CAAC,KAAK,CAAC,EAEjB;IAAA,EAAE,GAAG,CAAC,CACP,CAAC;AACJ,CAAC"}

package/dist/components/01-atoms/FileUpload/FileUpload.d.ts

@@ -24,6 +24,7 @@ type FileUploadRef = {
  * @param {string} [props.accept] - Optional string to specify the types of files that the input accepts.
  * @param {boolean} [props.disabled] - Optional boolean to specify whether it is enable or not
  * @param {string} [props.errorText] - Optional string to display when is an error
+ * @param {string} [props.removeButtonAriaLabel] - Accessible label for the selected file removal button.
  * @param {HTMLAttributes<HTMLDivElement>} restProps - Additional properties for the div element.
  *
  * @returns {ReactNode} The rendered FileUpload component.
@@ -36,6 +37,7 @@ export declare const FileUpload: import("react").ForwardRefExoticComponent<{
     helperText?: string;
     error?: string;
     supportText?: string;
+    removeButtonAriaLabel?: string;
 } & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<FileUploadRef>>;
 export {};
 //# sourceMappingURL=FileUpload.d.ts.map

package/dist/components/01-atoms/FileUpload/FileUpload.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FileUpload.d.ts","sourceRoot":"","sources":["../../../../src/components/01-atoms/FileUpload/FileUpload.tsx"],"names":[],"mappings":"AAGA,OAAO,EAEL,KAAK,iBAAiB,EAGtB,KAAK,cAAc,EACnB,KAAK,mBAAmB,EAOzB,MAAM,OAAO,CAAC;AAsBf,KAAK,aAAa,GAAG;IACnB,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,eAAO,MAAM,UAAU;YA1Cb,MAAM;mBACC,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI;YAClC,IAAI,CACV,iBAAiB,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,gBAAgB,CAAC,EAC1E,MAAM,CACP;eACU,OAAO;iBACL,MAAM;YACX,MAAM;kBACA,MAAM;kFAsLrB,CAAC"}
+{"version":3,"file":"FileUpload.d.ts","sourceRoot":"","sources":["../../../../src/components/01-atoms/FileUpload/FileUpload.tsx"],"names":[],"mappings":"AAGA,OAAO,EAEL,KAAK,iBAAiB,EAGtB,KAAK,cAAc,EACnB,KAAK,mBAAmB,EAOzB,MAAM,OAAO,CAAC;AAuBf,KAAK,aAAa,GAAG;IACnB,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,UAAU;YA5Cb,MAAM;mBACC,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI;YAClC,IAAI,CACV,iBAAiB,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,gBAAgB,CAAC,EAC1E,MAAM,CACP;eACU,OAAO;iBACL,MAAM;YACX,MAAM;kBACA,MAAM;4BACI,MAAM;kFA2M/B,CAAC"}

package/dist/components/01-atoms/FileUpload/FileUpload.jsx

@@ -30,14 +30,16 @@ import { Paragraph } from '../Paragraph';
  * @param {string} [props.accept] - Optional string to specify the types of files that the input accepts.
  * @param {boolean} [props.disabled] - Optional boolean to specify whether it is enable or not
  * @param {string} [props.errorText] - Optional string to display when is an error
+ * @param {string} [props.removeButtonAriaLabel] - Accessible label for the selected file removal button.
  * @param {HTMLAttributes<HTMLDivElement>} restProps - Additional properties for the div element.
  *
  * @returns {ReactNode} The rendered FileUpload component.
  */
-export const FileUpload = forwardRef(function ({ onFileSelect, accept, disabled, helperText, error, input, supportText, ...restProps }, ref) {
+export const FileUpload = forwardRef(function ({ onFileSelect, accept, disabled, helperText, error, input, supportText, removeButtonAriaLabel, ...restProps }, ref) {
     const [id, setId] = useState('');
     const [selectedFile, setSelectedFile] = useState(null);
     const fileInputRef = useRef(null);
+    const feedbackId = `${id}-feedback`;
     const handleDrag = useCallback((e) => {
         e.preventDefault();
         e.stopPropagation();
@@ -71,37 +73,39 @@ export const FileUpload = forwardRef(function ({ onFileSelect, accept, disabled,
     useEffect(() => {
         setId(generateUniqueId());
     }, []);
-    return (<div className="w-full max-w-full min-w-0">
-        <div {...restProps} onDragEnter={handleDrag} onDragOver={handleDrag} onDragLeave={handleDrag} onDrop={handleDrop} className={clsx('bg-gray-6 rounded-md border-2 border-dashed', error
-            ? 'border-error'
+    return (<div className="w-full max-w-full min-w-0 text-black dark:text-white">
+        <div {...restProps} onDragEnter={handleDrag} onDragOver={handleDrag} onDragLeave={handleDrag} onDrop={handleDrop} className={clsx('bg-gray-6 dark:bg-black-1 rounded-md border-2 border-dashed', error
+            ? 'border-error dark:border-error-dark'
             : !disabled
-                ? 'border-gray-3'
-                : 'border-gray-5 pointer-events-none select-none', restProps.className)}>
-          <input {...input} type="file" className="hidden" id={id} onChange={handleChange} ref={fileInputRef} accept={accept} disabled={disabled}/>
-          <label htmlFor={id} className="block cursor-pointer px-4 py-5">
+                ? 'border-gray-3 dark:border-gray-1'
+                : 'border-gray-5 dark:border-gray-1 pointer-events-none select-none', restProps.className)}>
+          <input {...input} type="file" className="peer sr-only" id={id} onChange={handleChange} ref={fileInputRef} accept={accept} disabled={disabled} aria-invalid={Boolean(error)} aria-describedby={error || helperText ? feedbackId : undefined}/>
+          <label htmlFor={id} className="peer-focus-visible:outline-lavender dark:peer-focus-visible:outline-lavender-dark block cursor-pointer rounded-md px-4 py-5 peer-focus-visible:outline-2">
             <Show>
               <Show.When isTrue={Boolean(selectedFile)}>
                 <div className="flex items-center justify-between gap-2">
-                  <CiFileOn size={32}/>
+                  <CiFileOn aria-hidden="true" size={32}/>
                   <div className="max-w-[calc(100%-64px-1rem)]">
                     <Paragraph size="subtitle-1" className="truncate">
                       {selectedFile?.name}
                     </Paragraph>
-                    <Paragraph size="body-2" className="text-gray-1">
+                    <Paragraph size="body-2" className="text-gray-1 dark:text-gray-2">
                       {calculateFileSize(selectedFile?.size)}
                     </Paragraph>
                   </div>
-                  <button className="cursor-pointer" onClick={(e) => {
+                  <button type="button" aria-label={removeButtonAriaLabel} className="hover:text-error dark:hover:text-error-dark cursor-pointer rounded-full transition-colors" disabled={disabled} onClick={(e) => {
             e.preventDefault();
             clearFile();
         }}>
-                    <MdDeleteOutline size={32}/>
+                    <MdDeleteOutline aria-hidden="true" size={32}/>
                   </button>
                 </div>
               </Show.When>
               <Show.Else>
-                <div className={clsx('flex flex-wrap items-center justify-center gap-2', disabled && 'text-gray-3', error ? 'text-error' : disabled && 'text-gray-3')}>
-                  <AiOutlineCloudUpload size={32}/>
+                <div className={clsx('flex flex-wrap items-center justify-center gap-2', disabled && 'text-gray-3 dark:text-gray-2', error
+            ? 'text-error dark:text-error-dark'
+            : disabled && 'text-gray-3 dark:text-gray-2')}>
+                  <AiOutlineCloudUpload aria-hidden="true" size={32}/>
                   <Paragraph size="subtitle-1" className="text-center">
                     <Show>
                       <Show.When isTrue={Boolean(supportText)}>
@@ -118,7 +122,9 @@ export const FileUpload = forwardRef(function ({ onFileSelect, accept, disabled,
             </Show>
           </label>
         </div>
-        <RenderErrorOrHelperText disabled={disabled} helperText={helperText} error={error}/>
+        <div id={feedbackId}>
+          <RenderErrorOrHelperText disabled={disabled} helperText={helperText} error={error} className={clsx(error && !disabled ? 'dark:text-error-dark' : 'dark:text-gray-2')}/>
+        </div>
       </div>);
 });
 FileUpload.displayName = 'FileUpload';

package/dist/components/01-atoms/FileUpload/FileUpload.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"FileUpload.jsx","sourceRoot":"","sources":["../../../../src/components/01-atoms/FileUpload/FileUpload.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"FileUpload.jsx","sourceRoot":"","sources":["../../../../src/components/01-atoms/FileUpload/FileUpload.tsx"],"names":[],"mappings":"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"}

package/dist/components/01-atoms/Input/Input.d.ts

@@ -8,6 +8,8 @@ type InputProps = {
     error?: string;
     iconL?: ReactNode;
     iconR?: ReactNode;
+    showPasswordAriaLabel?: string;
+    hidePasswordAriaLabel?: string;
 };
 /**
  * Input component for rendering a labeled input field with optional icons, helper text, and error message.
@@ -34,6 +36,6 @@ type InputProps = {
  *
  * @returns {ReactNode} The rendered Input component.
  */
-export declare function Input({ label, input, helperText, error, iconL, iconR, }: InputProps): ReactNode;
+export declare function Input({ label, input, helperText, error, iconL, iconR, showPasswordAriaLabel, hidePasswordAriaLabel, }: InputProps): ReactNode;
 export {};
 //# sourceMappingURL=Input.d.ts.map

package/dist/components/01-atoms/Input/Input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../../src/components/01-atoms/Input/Input.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,KAAK,iBAAiB,EACtB,KAAK,mBAAmB,EACxB,KAAK,SAAS,EAGf,MAAM,OAAO,CAAC;AAKf,KAAK,UAAU,GAAG;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE;QACL,IAAI,EAAE,IAAI,CACR,iBAAiB,CACf,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,gBAAgB,CACjB,CAAC,MAAM,CAAC,EACT,QAAQ,GAAG,UAAU,GAAG,OAAO,CAChC,CAAC;KACH,GAAG,IAAI,CACN,iBAAiB,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,gBAAgB,CAAC,EAC1E,aAAa,CACd,CAAC;IACF,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,KAAK,EACL,UAAU,EACV,KAAK,EACL,KAAK,EACL,KAAK,GACN,EAAE,UAAU,GAAG,SAAS,CAwDxB"}
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../../src/components/01-atoms/Input/Input.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,KAAK,iBAAiB,EACtB,KAAK,mBAAmB,EACxB,KAAK,SAAS,EAGf,MAAM,OAAO,CAAC;AAKf,KAAK,UAAU,GAAG;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE;QACL,IAAI,EAAE,IAAI,CACR,iBAAiB,CACf,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,gBAAgB,CACjB,CAAC,MAAM,CAAC,EACT,QAAQ,GAAG,UAAU,GAAG,OAAO,CAChC,CAAC;KACH,GAAG,IAAI,CACN,iBAAiB,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,gBAAgB,CAAC,EAC1E,aAAa,CACd,CAAC;IACF,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,qBAAqB,CAAC,EAAE,MAAM,CAAC;CAChC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,KAAK,EACL,UAAU,EACV,KAAK,EACL,KAAK,EACL,KAAK,EACL,qBAAqB,EACrB,qBAAqB,GACtB,EAAE,UAAU,GAAG,SAAS,CA+FxB"}

package/dist/components/01-atoms/Input/Input.jsx

@@ -1,7 +1,7 @@
 'use client';
 import clsx from 'clsx';
-import { useEffect, useState, } from 'react';
-import { generateUniqueId } from '../../../utils';
+import { useId, useState, } from 'react';
+import { FiEye, FiEyeOff } from 'react-icons/fi';
 import { generateBorder } from './utils/border';
 import { RenderErrorOrHelperText } from './utils/RenderErrorOrHelperText';
 /**
@@ -29,32 +29,42 @@ import { RenderErrorOrHelperText } from './utils/RenderErrorOrHelperText';
  *
  * @returns {ReactNode} The rendered Input component.
  */
-export function Input({ label, input, helperText, error, iconL, iconR, }) {
-    const [id, setId] = useState('');
-    const inputClasses = clsx('peer disabled:text-gray-3 h-full w-full rounded-full bg-transparent px-5 text-sm font-normal text-black outline-0 transition-all focus:text-black', input.className);
+export function Input({ label, input, helperText, error, iconL, iconR, showPasswordAriaLabel, hidePasswordAriaLabel, }) {
+    const generatedId = useId();
+    const [showPassword, setShowPassword] = useState(false);
+    const id = input.id ?? generatedId;
+    const descriptionId = error || helperText ? `${id}-description` : undefined;
+    const describedBy = [input['aria-describedby'], descriptionId].filter(Boolean).join(' ') ||
+        undefined;
+    const isPassword = input.type === 'password';
+    const effectiveType = isPassword && showPassword ? 'text' : input.type;
+    const inputClasses = clsx('peer disabled:text-gray-3 dark:disabled:text-gray-2 h-full w-full rounded-full bg-transparent px-5 text-sm font-normal text-black outline-0 transition-all focus:text-black dark:text-white dark:focus:text-white', input.className);
     const { labelProps, legendClasses, fieldsetClasses } = generateBorder(error);
-    if (id) {
-        input.id = id;
-        labelProps.htmlFor = id;
-    }
-    useEffect(() => {
-        setId(generateUniqueId());
-    }, []);
+    labelProps.htmlFor = id;
+    const rightSlot = isPassword ? (<button type="button" onClick={() => setShowPassword((prev) => !prev)} aria-pressed={showPassword} aria-label={showPassword ? hidePasswordAriaLabel : showPasswordAriaLabel} disabled={input.disabled} className={clsx('disabled:text-gray-3 dark:disabled:text-gray-2 flex cursor-pointer items-center justify-center rounded-full p-1 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-black/20 disabled:cursor-not-allowed dark:focus-visible:ring-white/30', error
+            ? 'text-error dark:text-error-dark'
+            : 'text-black dark:text-white')}>
+      {showPassword ? (<FiEyeOff size={18} aria-hidden="true"/>) : (<FiEye size={18} aria-hidden="true"/>)}
+    </button>) : (iconR);
     return (<div className="w-full max-w-full">
       <div className="relative h-9">
-        <input {...input} className={inputClasses} placeholder=" "/>
+        <input {...input} id={id} type={effectiveType} className={inputClasses} placeholder=" " aria-invalid={error ? true : input['aria-invalid']} aria-describedby={describedBy}/>
         <label {...labelProps}>{label}</label>
-        <fieldset className={fieldsetClasses}>
+        <fieldset aria-hidden="true" className={fieldsetClasses}>
           <legend className={legendClasses}>{label}</legend>
         </fieldset>
-        {!!iconL && (<span className={clsx('peer-disabled:text-gray-3 absolute top-3 left-1', error ? 'text-error' : 'text-black')}>
+        {!!iconL && (<span aria-hidden="true" className={clsx('peer-disabled:text-gray-3 dark:peer-disabled:text-gray-2 absolute top-3 left-1', error
+                ? 'text-error dark:text-error-dark'
+                : 'text-black dark:text-white')}>
             {iconL}
           </span>)}
-        {!!iconR && (<span className={clsx('peer-disabled:text-gray-3 absolute top-3 right-2', error ? 'text-error' : 'text-black')}>
-            {iconR}
+        {!!rightSlot && (<span className={clsx('peer-disabled:text-gray-3 dark:peer-disabled:text-gray-2 absolute top-2 right-2', error
+                ? 'text-error dark:text-error-dark'
+                : 'text-black dark:text-white')}>
+            {rightSlot}
           </span>)}
       </div>
-      <RenderErrorOrHelperText disabled={input.disabled} helperText={helperText} error={error} className="pl-6"/>
+      <RenderErrorOrHelperText id={descriptionId} disabled={input.disabled} helperText={helperText} error={error} className="pl-6"/>
     </div>);
 }
 //# sourceMappingURL=Input.jsx.map

package/dist/components/01-atoms/Input/Input.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"Input.jsx","sourceRoot":"","sources":["../../../../src/components/01-atoms/Input/Input.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAIL,SAAS,EACT,QAAQ,GACT,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAAE,uBAAuB,EAAE,MAAM,iCAAiC,CAAC;AAsB1E;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,MAAM,UAAU,KAAK,CAAC,EACpB,KAAK,EACL,KAAK,EACL,UAAU,EACV,KAAK,EACL,KAAK,EACL,KAAK,GACM;IACX,MAAM,CAAC,EAAE,EAAE,KAAK,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAEjC,MAAM,YAAY,GAAG,IAAI,CACvB,mJAAmJ,EACnJ,KAAK,CAAC,SAAS,CAChB,CAAC;IAEF,MAAM,EAAE,UAAU,EAAE,aAAa,EAAE,eAAe,EAAE,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;IAE7E,IAAI,EAAE,EAAE,CAAC;QACP,KAAK,CAAC,EAAE,GAAG,EAAE,CAAC;QACd,UAAU,CAAC,OAAO,GAAG,EAAE,CAAC;IAC1B,CAAC;IAED,SAAS,CAAC,GAAG,EAAE;QACb,KAAK,CAAC,gBAAgB,EAAE,CAAC,CAAC;IAC5B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,CAAC,GAAG,CAAC,SAAS,CAAC,mBAAmB,CAChC;MAAA,CAAC,GAAG,CAAC,SAAS,CAAC,cAAc,CAC3B;QAAA,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,CAAC,SAAS,CAAC,CAAC,YAAY,CAAC,CAAC,WAAW,CAAC,GAAG,EAC1D;QAAA,CAAC,KAAK,CAAC,IAAI,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,KAAK,CACrC;QAAA,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC,eAAe,CAAC,CACnC;UAAA,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,MAAM,CACnD;QAAA,EAAE,QAAQ,CACV;QAAA,CAAC,CAAC,CAAC,KAAK,IAAI,CACV,CAAC,IAAI,CACH,SAAS,CAAC,CAAC,IAAI,CACb,iDAAiD,EACjD,KAAK,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,YAAY,CACpC,CAAC,CAEF;YAAA,CAAC,KAAK,CACR;UAAA,EAAE,IAAI,CAAC,CACR,CACD;QAAA,CAAC,CAAC,CAAC,KAAK,IAAI,CACV,CAAC,IAAI,CACH,SAAS,CAAC,CAAC,IAAI,CACb,kDAAkD,EAClD,KAAK,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,YAAY,CACpC,CAAC,CAEF;YAAA,CAAC,KAAK,CACR;UAAA,EAAE,IAAI,CAAC,CACR,CACH;MAAA,EAAE,GAAG,CACL;MAAA,CAAC,uBAAuB,CACtB,QAAQ,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,CACzB,UAAU,CAAC,CAAC,UAAU,CAAC,CACvB,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,SAAS,CAAC,MAAM,EAEpB;IAAA,EAAE,GAAG,CAAC,CACP,CAAC;AACJ,CAAC"}
+{"version":3,"file":"Input.jsx","sourceRoot":"","sources":["../../../../src/components/01-atoms/Input/Input.tsx"],"names":[],"mappings":"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"}

package/dist/components/01-atoms/Input/utils/RenderErrorOrHelperText.d.ts

@@ -1,9 +1,11 @@
-interface RenderErrorOrHelperTextProps {
+import type { ReactNode } from 'react';
+type RenderErrorOrHelperTextProps = {
+    id?: string;
     error?: string;
     helperText?: string;
     disabled?: boolean;
     className?: string;
-}
-export declare function RenderErrorOrHelperText({ error, helperText, disabled, className, }: RenderErrorOrHelperTextProps): import("react").JSX.Element | null;
+};
+export declare function RenderErrorOrHelperText({ id, error, helperText, disabled, className, }: RenderErrorOrHelperTextProps): ReactNode;
 export {};
 //# sourceMappingURL=RenderErrorOrHelperText.d.ts.map

package/dist/components/01-atoms/Input/utils/RenderErrorOrHelperText.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RenderErrorOrHelperText.d.ts","sourceRoot":"","sources":["../../../../../src/components/01-atoms/Input/utils/RenderErrorOrHelperText.tsx"],"names":[],"mappings":"AAGA,UAAU,4BAA4B;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,uBAAuB,CAAC,EACtC,KAAK,EACL,UAAU,EACV,QAAQ,EACR,SAAS,GACV,EAAE,4BAA4B,sCAqB9B"}
+{"version":3,"file":"RenderErrorOrHelperText.d.ts","sourceRoot":"","sources":["../../../../../src/components/01-atoms/Input/utils/RenderErrorOrHelperText.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,KAAK,4BAA4B,GAAG;IAClC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,wBAAgB,uBAAuB,CAAC,EACtC,EAAE,EACF,KAAK,EACL,UAAU,EACV,QAAQ,EACR,SAAS,GACV,EAAE,4BAA4B,GAAG,SAAS,CAsB1C"}

package/dist/components/01-atoms/Input/utils/RenderErrorOrHelperText.jsx

@@ -1,14 +1,14 @@
 import clsx from 'clsx';
 import { Paragraph } from '../../Paragraph';
-export function RenderErrorOrHelperText({ error, helperText, disabled, className, }) {
+export function RenderErrorOrHelperText({ id, error, helperText, disabled, className, }) {
     if (!error && !helperText) {
         return null;
     }
-    return (<Paragraph className={clsx('pt-1.5', error && !disabled
+    return (<Paragraph id={id} className={clsx('pt-1.5', error && !disabled
             ? 'text-error dark:text-error-dark'
             : disabled
-                ? 'text-gray-3'
-                : 'text-gray-1', className)} size="body-2">
+                ? 'text-gray-3 dark:text-gray-2'
+                : 'text-gray-1 dark:text-gray-2', className)} size="body-2">
       {error && !disabled ? error : helperText}
     </Paragraph>);
 }

package/dist/components/01-atoms/Input/utils/RenderErrorOrHelperText.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"RenderErrorOrHelperText.jsx","sourceRoot":"","sources":["../../../../../src/components/01-atoms/Input/utils/RenderErrorOrHelperText.tsx"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAS5C,MAAM,UAAU,uBAAuB,CAAC,EACtC,KAAK,EACL,UAAU,EACV,QAAQ,EACR,SAAS,GACoB;IAC7B,IAAI,CAAC,KAAK,IAAI,CAAC,UAAU,EAAE,CAAC;QAC1B,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,CACL,CAAC,SAAS,CACR,SAAS,CAAC,CAAC,IAAI,CACb,QAAQ,EACR,KAAK,IAAI,CAAC,QAAQ;YAChB,CAAC,CAAC,iCAAiC;YACnC,CAAC,CAAC,QAAQ;gBACR,CAAC,CAAC,aAAa;gBACf,CAAC,CAAC,aAAa,EACnB,SAAS,CACV,CAAC,CACF,IAAI,CAAC,QAAQ,CAEb;MAAA,CAAC,KAAK,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,UAAU,CAC1C;IAAA,EAAE,SAAS,CAAC,CACb,CAAC;AACJ,CAAC"}
+{"version":3,"file":"RenderErrorOrHelperText.jsx","sourceRoot":"","sources":["../../../../../src/components/01-atoms/Input/utils/RenderErrorOrHelperText.tsx"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAU5C,MAAM,UAAU,uBAAuB,CAAC,EACtC,EAAE,EACF,KAAK,EACL,UAAU,EACV,QAAQ,EACR,SAAS,GACoB;IAC7B,IAAI,CAAC,KAAK,IAAI,CAAC,UAAU,EAAE,CAAC;QAC1B,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,CACL,CAAC,SAAS,CACR,EAAE,CAAC,CAAC,EAAE,CAAC,CACP,SAAS,CAAC,CAAC,IAAI,CACb,QAAQ,EACR,KAAK,IAAI,CAAC,QAAQ;YAChB,CAAC,CAAC,iCAAiC;YACnC,CAAC,CAAC,QAAQ;gBACR,CAAC,CAAC,8BAA8B;gBAChC,CAAC,CAAC,8BAA8B,EACpC,SAAS,CACV,CAAC,CACF,IAAI,CAAC,QAAQ,CAEb;MAAA,CAAC,KAAK,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,UAAU,CAC1C;IAAA,EAAE,SAAS,CAAC,CACb,CAAC;AACJ,CAAC"}

package/dist/components/01-atoms/Input/utils/border.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"border.d.ts","sourceRoot":"","sources":["../../../../../src/components/01-atoms/Input/utils/border.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,WAAY,MAAM;;kBACb,MAAM;mBAAa,MAAM;;;;CAuBxD,CAAC"}
+{"version":3,"file":"border.d.ts","sourceRoot":"","sources":["../../../../../src/components/01-atoms/Input/utils/border.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,WAAY,MAAM;;kBACb,MAAM;mBAAa,MAAM;;;;CAyBxD,CAAC"}

package/dist/components/01-atoms/Input/utils/border.js

@@ -1,9 +1,11 @@
 import clsx from 'clsx';
 export const generateBorder = (error) => {
     const labelProps = {
-        className: clsx('pointer-events-none absolute -top-2 left-[1.0625rem] truncate overflow-visible px-1 text-xs leading-tight transition-all select-none', 'peer-disabled:text-gray-3 peer-not-empty:-top-2 peer-not-empty:text-xs peer-placeholder-shown:top-2.5 peer-placeholder-shown:text-sm peer-placeholder-shown:leading-tight peer-autofill:-top-2 peer-autofill:text-xs peer-focus:-top-2 peer-focus:text-xs', error ? 'text-error' : 'text-black'),
+        className: clsx('pointer-events-none absolute -top-2 left-[1.0625rem] truncate overflow-visible px-1 text-xs leading-tight transition-all select-none', 'peer-disabled:text-gray-3 dark:peer-disabled:text-gray-2 peer-not-empty:-top-2 peer-not-empty:text-xs peer-placeholder-shown:top-2.5 peer-placeholder-shown:text-sm peer-placeholder-shown:leading-tight peer-autofill:-top-2 peer-autofill:text-xs peer-focus:-top-2 peer-focus:text-xs', error ? 'text-error dark:text-error-dark' : 'text-black dark:text-white'),
     };
-    const fieldsetClasses = clsx('pointer-events-none absolute -top-2 left-0 h-[calc(100%+.5rem)] w-full rounded-full border px-4', 'peer-disabled:border-gray-3 peer-not-empty:*:max-w-full peer-not-empty:*:px-1 peer-placeholder-shown:*:max-w-0 peer-placeholder-shown:*:px-0 peer-autofill:max-w-full peer-autofill:*:px-1 peer-focus:*:max-w-full peer-focus:*:px-1', error ? 'border-error' : 'border-black');
+    const fieldsetClasses = clsx('pointer-events-none absolute -top-2 left-0 h-[calc(100%+.5rem)] w-full rounded-full border px-4', 'peer-disabled:border-gray-3 dark:peer-disabled:border-gray-2 peer-not-empty:*:max-w-full peer-not-empty:*:px-1 peer-placeholder-shown:*:max-w-0 peer-placeholder-shown:*:px-0 peer-autofill:max-w-full peer-autofill:*:px-1 peer-focus:*:max-w-full peer-focus:*:px-1', error
+        ? 'border-error dark:border-error-dark'
+        : 'border-black dark:border-white');
     const legendClasses = clsx('invisible max-w-full px-1 text-left text-xs text-nowrap transition-all');
     return {
         labelProps,