@pathscale/ui 1.2.5 → 1.2.7

package/dist/components/immersive-landing/components/PWAInstallPrompt.js

@@ -1,10 +1,10 @@
-import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
-import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
-import * as __WEBPACK_EXTERNAL_MODULE__button_index_js_573defba__ from "../../button/index.js";
-import * as __WEBPACK_EXTERNAL_MODULE__card_index_js_ff5173c9__ from "../../card/index.js";
-import * as __WEBPACK_EXTERNAL_MODULE__flex_index_js_42888a32__ from "../../flex/index.js";
-import * as __WEBPACK_EXTERNAL_MODULE__ImmersiveLanding_classes_js_45581556__ from "../ImmersiveLanding.classes.js";
-var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div><img>"), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<h3 id=pwa-install-title>"), _tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<p>"), _tmpl$4 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div role=dialog aria-modal=false aria-labelledby=pwa-install-title>");
+import { createComponent, insert, mergeProps, spread, template } from "solid-js/web";
+import { Show, createSignal, onCleanup, onMount } from "solid-js";
+import index_js_default from "../../button/index.js";
+import external_card_index_js_default from "../../card/index.js";
+import external_flex_index_js_default from "../../flex/index.js";
+import { CLASSES } from "../ImmersiveLanding.classes.js";
+var _tmpl$ = /*#__PURE__*/ template("<div><img>"), _tmpl$2 = /*#__PURE__*/ template("<h3 id=pwa-install-title>"), _tmpl$3 = /*#__PURE__*/ template("<p>"), _tmpl$4 = /*#__PURE__*/ template("<div role=dialog aria-modal=false aria-labelledby=pwa-install-title>");
 const DISMISS_DURATION = 604800000;
 const defaultTexts = {
     title: "Install App",
@@ -24,8 +24,8 @@ const PWAInstallPrompt = (props)=>{
             notNowButton: props.texts?.notNowButton ?? defaultTexts.notNowButton,
             closeLabel: props.texts?.closeLabel ?? defaultTexts.closeLabel
         });
-    const [deferredPrompt, setDeferredPrompt] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(null);
-    const [showPrompt, setShowPrompt] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(false);
+    const [deferredPrompt, setDeferredPrompt] = createSignal(null);
+    const [showPrompt, setShowPrompt] = createSignal(false);
     const checkDismissalStatus = ()=>{
         const dismissed = localStorage.getItem(STORAGE_KEY());
         if (!dismissed) return true;
@@ -66,36 +66,36 @@ const PWAInstallPrompt = (props)=>{
         setShowPrompt(false);
         setDeferredPrompt(null);
     };
-    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onMount)(()=>{
+    onMount(()=>{
         window.addEventListener("beforeinstallprompt", handleBeforeInstallPrompt);
         window.addEventListener("appinstalled", handleAppInstalled);
     });
-    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onCleanup)(()=>{
+    onCleanup(()=>{
         window.removeEventListener("beforeinstallprompt", handleBeforeInstallPrompt);
         window.removeEventListener("appinstalled", handleAppInstalled);
     });
-    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+    return createComponent(Show, {
         get when () {
             return showPrompt();
         },
         get children () {
             var _el$ = _tmpl$4();
-            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
-                    class: __WEBPACK_EXTERNAL_MODULE__ImmersiveLanding_classes_js_45581556__.CLASSES.pwaPrompt.dialog
+            spread(_el$, mergeProps(()=>({
+                    class: CLASSES.pwaPrompt.dialog
                 })), false, true);
-            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__card_index_js_ff5173c9__["default"], (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
+            insert(_el$, createComponent(external_card_index_js_default, mergeProps({
                 variant: "shadow"
             }, ()=>({
-                    class: __WEBPACK_EXTERNAL_MODULE__ImmersiveLanding_classes_js_45581556__.CLASSES.pwaPrompt.card
+                    class: CLASSES.pwaPrompt.card
                 }), {
                 get children () {
                     return [
-                        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__button_index_js_573defba__["default"], (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
+                        createComponent(index_js_default, mergeProps({
                             size: "sm",
                             variant: "ghost",
                             isIconOnly: true
                         }, ()=>({
-                                class: __WEBPACK_EXTERNAL_MODULE__ImmersiveLanding_classes_js_45581556__.CLASSES.pwaPrompt.closeButton
+                                class: CLASSES.pwaPrompt.closeButton
                             }), {
                             onClick: handleDismiss,
                             get ["aria-label"] () {
@@ -103,24 +103,24 @@ const PWAInstallPrompt = (props)=>{
                             },
                             children: "X"
                         })),
-                        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__card_index_js_ff5173c9__["default"].Body, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
-                                class: __WEBPACK_EXTERNAL_MODULE__ImmersiveLanding_classes_js_45581556__.CLASSES.pwaPrompt.body
+                        createComponent(external_card_index_js_default.Body, mergeProps(()=>({
+                                class: CLASSES.pwaPrompt.body
                             }), {
                             get children () {
-                                return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__flex_index_js_42888a32__["default"], (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
+                                return createComponent(external_flex_index_js_default, mergeProps({
                                     align: "start",
                                     gap: "md"
                                 }, ()=>({
-                                        class: __WEBPACK_EXTERNAL_MODULE__ImmersiveLanding_classes_js_45581556__.CLASSES.pwaPrompt.media
+                                        class: CLASSES.pwaPrompt.media
                                     }), {
                                     get children () {
                                         return [
                                             (()=>{
                                                 var _el$2 = _tmpl$(), _el$3 = _el$2.firstChild;
-                                                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$2, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
-                                                        class: __WEBPACK_EXTERNAL_MODULE__ImmersiveLanding_classes_js_45581556__.CLASSES.pwaPrompt.appIconWrap
+                                                spread(_el$2, mergeProps(()=>({
+                                                        class: CLASSES.pwaPrompt.appIconWrap
                                                     })), false, true);
-                                                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$3, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
+                                                spread(_el$3, mergeProps({
                                                     get src () {
                                                         return appIcon();
                                                     },
@@ -128,32 +128,32 @@ const PWAInstallPrompt = (props)=>{
                                                         return appName();
                                                     }
                                                 }, ()=>({
-                                                        class: __WEBPACK_EXTERNAL_MODULE__ImmersiveLanding_classes_js_45581556__.CLASSES.pwaPrompt.appIcon
+                                                        class: CLASSES.pwaPrompt.appIcon
                                                     })), false, false);
                                                 return _el$2;
                                             })(),
-                                            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__flex_index_js_42888a32__["default"], (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
+                                            createComponent(external_flex_index_js_default, mergeProps({
                                                 direction: "col",
                                                 gap: "sm"
                                             }, ()=>({
-                                                    class: __WEBPACK_EXTERNAL_MODULE__ImmersiveLanding_classes_js_45581556__.CLASSES.pwaPrompt.textWrap
+                                                    class: CLASSES.pwaPrompt.textWrap
                                                 }), {
                                                 get children () {
                                                     return [
                                                         (()=>{
                                                             var _el$4 = _tmpl$2();
-                                                            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$4, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
-                                                                    class: __WEBPACK_EXTERNAL_MODULE__ImmersiveLanding_classes_js_45581556__.CLASSES.pwaPrompt.title
+                                                            spread(_el$4, mergeProps(()=>({
+                                                                    class: CLASSES.pwaPrompt.title
                                                                 })), false, true);
-                                                            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$4, ()=>texts().title);
+                                                            insert(_el$4, ()=>texts().title);
                                                             return _el$4;
                                                         })(),
                                                         (()=>{
                                                             var _el$5 = _tmpl$3();
-                                                            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$5, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
-                                                                    class: __WEBPACK_EXTERNAL_MODULE__ImmersiveLanding_classes_js_45581556__.CLASSES.pwaPrompt.description
+                                                            spread(_el$5, mergeProps(()=>({
+                                                                    class: CLASSES.pwaPrompt.description
                                                                 })), false, true);
-                                                            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$5, ()=>texts().description);
+                                                            insert(_el$5, ()=>texts().description);
                                                             return _el$5;
                                                         })()
                                                     ];
@@ -164,25 +164,25 @@ const PWAInstallPrompt = (props)=>{
                                 }));
                             }
                         })),
-                        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__card_index_js_ff5173c9__["default"].Footer, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
-                                class: __WEBPACK_EXTERNAL_MODULE__ImmersiveLanding_classes_js_45581556__.CLASSES.pwaPrompt.footer
+                        createComponent(external_card_index_js_default.Footer, mergeProps(()=>({
+                                class: CLASSES.pwaPrompt.footer
                             }), {
                             get children () {
                                 return [
-                                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__button_index_js_573defba__["default"], (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
+                                    createComponent(index_js_default, mergeProps({
                                         variant: "primary"
                                     }, ()=>({
-                                            class: __WEBPACK_EXTERNAL_MODULE__ImmersiveLanding_classes_js_45581556__.CLASSES.pwaPrompt.action
+                                            class: CLASSES.pwaPrompt.action
                                         }), {
                                         onClick: handleInstall,
                                         get children () {
                                             return texts().installButton;
                                         }
                                     })),
-                                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__button_index_js_573defba__["default"], (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
+                                    createComponent(index_js_default, mergeProps({
                                         variant: "ghost"
                                     }, ()=>({
-                                            class: __WEBPACK_EXTERNAL_MODULE__ImmersiveLanding_classes_js_45581556__.CLASSES.pwaPrompt.action
+                                            class: CLASSES.pwaPrompt.action
                                         }), {
                                         onClick: handleDismiss,
                                         get children () {

package/dist/components/immersive-landing/index.js

@@ -1,15 +1,8 @@
 import "./ImmersiveLanding.css";
-import * as __WEBPACK_EXTERNAL_MODULE__ImmersiveLanding_js_2b17ea6a__ from "./ImmersiveLanding.js";
-import * as __WEBPACK_EXTERNAL_MODULE__useImmersiveLanding_js_66194376__ from "./useImmersiveLanding.js";
-import * as __WEBPACK_EXTERNAL_MODULE__ImmersiveLandingContext_js_0e3f38c0__ from "./ImmersiveLandingContext.js";
-import * as __WEBPACK_EXTERNAL_MODULE__components_CookieConsent_js_dd55e062__ from "./components/CookieConsent.js";
-import * as __WEBPACK_EXTERNAL_MODULE__components_PWAInstallPrompt_js_a5e100bf__ from "./components/PWAInstallPrompt.js";
-import * as __WEBPACK_EXTERNAL_MODULE__components_FirefoxPWABanner_js_46fc5861__ from "./components/FirefoxPWABanner.js";
-var __webpack_exports__CookieConsent = __WEBPACK_EXTERNAL_MODULE__components_CookieConsent_js_dd55e062__.CookieConsent;
-var __webpack_exports__FirefoxPWABanner = __WEBPACK_EXTERNAL_MODULE__components_FirefoxPWABanner_js_46fc5861__.FirefoxPWABanner;
-var __webpack_exports__ImmersiveLandingContext = __WEBPACK_EXTERNAL_MODULE__ImmersiveLandingContext_js_0e3f38c0__.ImmersiveLandingContext;
-var __webpack_exports__PWAInstallPrompt = __WEBPACK_EXTERNAL_MODULE__components_PWAInstallPrompt_js_a5e100bf__.PWAInstallPrompt;
-var __webpack_exports__default = __WEBPACK_EXTERNAL_MODULE__ImmersiveLanding_js_2b17ea6a__["default"];
-var __webpack_exports__useImmersiveLanding = __WEBPACK_EXTERNAL_MODULE__useImmersiveLanding_js_66194376__.useImmersiveLanding;
-var __webpack_exports__useImmersiveLandingContext = __WEBPACK_EXTERNAL_MODULE__ImmersiveLandingContext_js_0e3f38c0__.useImmersiveLandingContext;
-export { __webpack_exports__CookieConsent as CookieConsent, __webpack_exports__FirefoxPWABanner as FirefoxPWABanner, __webpack_exports__ImmersiveLandingContext as ImmersiveLandingContext, __webpack_exports__PWAInstallPrompt as PWAInstallPrompt, __webpack_exports__default as default, __webpack_exports__useImmersiveLanding as useImmersiveLanding, __webpack_exports__useImmersiveLandingContext as useImmersiveLandingContext };
+import external_ImmersiveLanding_js_default from "./ImmersiveLanding.js";
+import { useImmersiveLanding } from "./useImmersiveLanding.js";
+import { ImmersiveLandingContext, useImmersiveLandingContext } from "./ImmersiveLandingContext.js";
+import { CookieConsent } from "./components/CookieConsent.js";
+import { PWAInstallPrompt } from "./components/PWAInstallPrompt.js";
+import { FirefoxPWABanner } from "./components/FirefoxPWABanner.js";
+export { CookieConsent, FirefoxPWABanner, ImmersiveLandingContext, PWAInstallPrompt, external_ImmersiveLanding_js_default as default, useImmersiveLanding, useImmersiveLandingContext };

package/dist/components/immersive-landing/useImmersiveLanding.js

@@ -1,17 +1,17 @@
-import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
+import { createEffect, createSignal, onCleanup, onMount } from "solid-js";
 function useImmersiveLanding(options) {
     const { pages, initialPage = pages[0], currentPage: controlledPage, transitionDuration = 400, onNavigate, onNavigationComplete, enableScrollNavigation = true } = options;
     const isControlled = !!controlledPage;
-    const [internalPage, setInternalPage] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(initialPage);
-    const [isTransitioning, setIsTransitioning] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(false);
-    const [direction, setDirection] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(null);
+    const [internalPage, setInternalPage] = createSignal(initialPage);
+    const [isTransitioning, setIsTransitioning] = createSignal(false);
+    const [direction, setDirection] = createSignal(null);
     const activePage = isControlled ? controlledPage : internalPage;
     const currentIndex = ()=>pages.indexOf(activePage());
     const isFirstPage = ()=>0 === currentIndex();
     const isLastPage = ()=>currentIndex() === pages.length - 1;
     if (isControlled) {
         let prevPage = controlledPage();
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
+        createEffect(()=>{
             const next = controlledPage();
             if (next !== prevPage && !isTransitioning()) {
                 const fromIndex = pages.indexOf(prevPage);
@@ -57,7 +57,7 @@ function useImmersiveLanding(options) {
         const idx = currentIndex();
         if (idx > 0) navigateToInternal(pages[idx - 1]);
     };
-    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onMount)(()=>{
+    onMount(()=>{
         if ("undefined" == typeof window) return;
         if (!enableScrollNavigation) return;
         let scrollLocked = false;
@@ -128,7 +128,7 @@ function useImmersiveLanding(options) {
             passive: true
         });
         window.addEventListener("keydown", handleKeyDown);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onCleanup)(()=>{
+        onCleanup(()=>{
             window.removeEventListener("wheel", handleWheel);
             window.removeEventListener("touchstart", handleTouchStart);
             window.removeEventListener("touchend", handleTouchEnd);

package/dist/components/input/Input.css

@@ -1,155 +1,155 @@
-@layer components {
-  .input-root {
-    display: flex;
-    flex-direction: column;
-    gap: 0.375rem;
-    width: fit-content;
-  }
-
-  .input-root--full-width {
-    width: 100%;
-  }
-
-  .input-label {
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-    font-weight: 500;
-    color: var(--color-base-content);
-  }
-
-  .input-helper {
-    font-size: 0.75rem;
-    line-height: 1rem;
-    color: color-mix(in oklab, var(--color-base-content) 60%, transparent);
-  }
-
-  .input-helper--invalid {
-    color: var(--color-error);
-  }
-
-  .input-control {
-    position: relative;
-    display: flex;
-    width: fit-content;
-    min-width: 12rem;
-    align-items: center;
-    gap: 0.5rem;
-    border-radius: 0.75rem;
-    border: 1px solid var(--color-base-300);
-    background-color: var(--color-base-100);
-    color: var(--color-base-content);
-    box-shadow: 0 1px 0 oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset;
-    transition:
-      background-color 150ms ease,
-      border-color 150ms ease,
-      box-shadow 150ms ease;
-  }
-
-  @media (hover: hover) {
-    .input-control:hover:not(.input-control--disabled):not(.input-control--invalid):not(:focus-within) {
-      background-color: var(--color-base-200);
-      border-color: color-mix(in oklab, var(--color-base-content) 22%, transparent);
-    }
-  }
-
-  .input-control:focus-within {
-    border-color: var(--color-accent);
-    background-color: var(--color-base-100);
-    box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-accent) 24%, transparent);
-  }
-
-  .input-control--invalid,
-  .input-control[data-invalid="true"] {
-    border-color: var(--color-error);
-    background-color: var(--color-base-100);
-  }
-
-  .input-control--invalid:focus-within,
-  .input-control[data-invalid="true"]:focus-within {
-    box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-error) 24%, transparent);
-  }
-
-  .input-control--disabled,
-  .input-control[data-disabled="true"] {
-    cursor: not-allowed;
-    border-color: var(--color-base-300);
-    background-color: var(--color-base-200);
-    color: color-mix(in oklab, var(--color-base-content) 55%, transparent);
-    box-shadow: none;
-    opacity: 0.85;
-  }
-
-  .input-control--sm {
-    min-height: 2rem;
-    padding-inline: 0.625rem;
-    font-size: 0.75rem;
-  }
-
-  .input-control--md {
-    min-height: 2.5rem;
-    padding-inline: 0.75rem;
-    font-size: 0.875rem;
-  }
-
-  .input-control--lg {
-    min-height: 2.75rem;
-    padding-inline: 0.875rem;
-    font-size: 1rem;
-  }
-
-  .input-control--full-width {
-    width: 100%;
-    min-width: 0;
-  }
-
-  .input-field {
-    flex: 1 1 auto;
-    width: 100%;
-    min-width: 0;
-    border: 0;
-    background: transparent;
-    color: inherit;
-    font: inherit;
-    line-height: 1.4;
-    outline: none;
-    padding-block: 0;
-  }
-
-  .input-field::placeholder {
-    color: color-mix(in oklab, var(--color-base-content) 45%, transparent);
-  }
-
-  .input-field:disabled {
-    cursor: not-allowed;
-  }
-
-  .input__icon {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-    color: color-mix(in oklab, var(--color-base-content) 72%, transparent);
-    pointer-events: none;
-  }
-
-  .input__icon > :is(button, [role="button"], a, [tabindex]):not([tabindex="-1"]) {
-    pointer-events: auto;
-  }
-
-  .input__icon > * {
-    width: 1rem;
-    height: 1rem;
-  }
-
-  @media (max-width: 767px) {
-    .input-control--sm,
-    .input-control--md,
-    .input-control--lg {
-      font-size: 1rem;
-    }
-
-    .input-field {
-      font-size: 1rem;
-    }
-  }
-}
+@layer components {
+  .input-root {
+    display: flex;
+    flex-direction: column;
+    gap: 0.375rem;
+    width: fit-content;
+  }
+
+  .input-root--full-width {
+    width: 100%;
+  }
+
+  .input-label {
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    font-weight: 500;
+    color: var(--color-base-content);
+  }
+
+  .input-helper {
+    font-size: 0.75rem;
+    line-height: 1rem;
+    color: color-mix(in oklab, var(--color-base-content) 60%, transparent);
+  }
+
+  .input-helper--invalid {
+    color: var(--color-error);
+  }
+
+  .input-control {
+    position: relative;
+    display: flex;
+    width: fit-content;
+    min-width: 12rem;
+    align-items: center;
+    gap: 0.5rem;
+    border-radius: 0.75rem;
+    border: 1px solid var(--color-base-300);
+    background-color: var(--color-base-100);
+    color: var(--color-base-content);
+    box-shadow: 0 1px 0 oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset;
+    transition:
+      background-color 150ms ease,
+      border-color 150ms ease,
+      box-shadow 150ms ease;
+  }
+
+  @media (hover: hover) {
+    .input-control:hover:not(.input-control--disabled):not(.input-control--invalid):not(:focus-within) {
+      background-color: var(--color-base-200);
+      border-color: color-mix(in oklab, var(--color-base-content) 22%, transparent);
+    }
+  }
+
+  .input-control:focus-within {
+    border-color: var(--color-accent);
+    background-color: var(--color-base-100);
+    box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-accent) 24%, transparent);
+  }
+
+  .input-control--invalid,
+  .input-control[data-invalid="true"] {
+    border-color: var(--color-error);
+    background-color: var(--color-base-100);
+  }
+
+  .input-control--invalid:focus-within,
+  .input-control[data-invalid="true"]:focus-within {
+    box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-error) 24%, transparent);
+  }
+
+  .input-control--disabled,
+  .input-control[data-disabled="true"] {
+    cursor: not-allowed;
+    border-color: var(--color-base-300);
+    background-color: var(--color-base-200);
+    color: color-mix(in oklab, var(--color-base-content) 55%, transparent);
+    box-shadow: none;
+    opacity: 0.85;
+  }
+
+  .input-control--sm {
+    min-height: 2rem;
+    padding-inline: 0.625rem;
+    font-size: 0.75rem;
+  }
+
+  .input-control--md {
+    min-height: 2.5rem;
+    padding-inline: 0.75rem;
+    font-size: 0.875rem;
+  }
+
+  .input-control--lg {
+    min-height: 2.75rem;
+    padding-inline: 0.875rem;
+    font-size: 1rem;
+  }
+
+  .input-control--full-width {
+    width: 100%;
+    min-width: 0;
+  }
+
+  .input-field {
+    flex: 1 1 auto;
+    width: 100%;
+    min-width: 0;
+    border: 0;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    line-height: 1.4;
+    outline: none;
+    padding-block: 0;
+  }
+
+  .input-field::placeholder {
+    color: color-mix(in oklab, var(--color-base-content) 45%, transparent);
+  }
+
+  .input-field:disabled {
+    cursor: not-allowed;
+  }
+
+  .input__icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    color: color-mix(in oklab, var(--color-base-content) 72%, transparent);
+    pointer-events: none;
+  }
+
+  .input__icon > :is(button, [role="button"], a, [tabindex]):not([tabindex="-1"]) {
+    pointer-events: auto;
+  }
+
+  .input__icon > * {
+    width: 1rem;
+    height: 1rem;
+  }
+
+  @media (max-width: 767px) {
+    .input-control--sm,
+    .input-control--md,
+    .input-control--lg {
+      font-size: 1rem;
+    }
+
+    .input-field {
+      font-size: 1rem;
+    }
+  }
+}