@stamcat/craftsman 0.0.27-alpha.19 → 0.0.27-alpha.20

package/AGENTS.md

@@ -17,7 +17,9 @@ import { Button } from "@stamcat/craftsman/Button";
 import { Carousel } from "@stamcat/craftsman/Carousel";
 import { Checkbox } from "@stamcat/craftsman/Checkbox";
 import { DatePicker } from "@stamcat/craftsman/DatePicker";
+import { DateRangePicker } from "@stamcat/craftsman/DateRangePicker";
 import { Input } from "@stamcat/craftsman/Input";
+import { InputNumber } from "@stamcat/craftsman/InputNumber";
 import { InputPassword } from "@stamcat/craftsman/InputPassword";
 import { InputPhone } from "@stamcat/craftsman/InputPhone";
 import { Loader } from "@stamcat/craftsman/Loader";

package/Components.esm.js

@@ -10,62 +10,66 @@ import { Text as c } from "./src/components/Text/Text2.esm.js";
 import { Modal as l } from "./src/components/Modal/Modal2.esm.js";
 import { Select as u } from "./src/components/Select/Select.esm.js";
 import { DatePicker as d } from "./src/components/DatePicker/DatePicker2.esm.js";
-import { InputPhone as f } from "./src/components/InputPhone/InputPhone2.esm.js";
-import { Pagination as p } from "./src/components/Pagination/Pagination2.esm.js";
-import { Carousel as m } from "./src/components/Carousel/Carousel2.esm.js";
-import { TimePicker as h } from "./src/components/TimePicker/TimePicker2.esm.js";
-import { DateTimePicker as g } from "./src/components/DateTimePicker/DateTimePicker2.esm.js";
-import { Tooltip as _ } from "./src/components/Tooltip/Tooltip2.esm.js";
-import { IconAmazonPay as v } from "./src/components/Icons/IconAmazonPay.esm.js";
-import { IconAmex as y } from "./src/components/Icons/IconAmex.esm.js";
-import { IconApplePay as b } from "./src/components/Icons/IconApplePay.esm.js";
-import { IconDiscover as x } from "./src/components/Icons/IconDiscover.esm.js";
-import { IconGooglePay as S } from "./src/components/Icons/IconGooglePay.esm.js";
-import { IconMaestro as C } from "./src/components/Icons/IconMaestro.esm.js";
-import { IconMastercard as w } from "./src/components/Icons/IconMastercard.esm.js";
-import { IconPayPal as T } from "./src/components/Icons/IconPayPal.esm.js";
-import { IconSepa as E } from "./src/components/Icons/IconSepa.esm.js";
-import { IconShopPay as D } from "./src/components/Icons/IconShopPay.esm.js";
-import { IconSquare as O } from "./src/components/Icons/IconSquare.esm.js";
-import { IconStripe as k } from "./src/components/Icons/IconStripe.esm.js";
-import { IconUnionPay as A } from "./src/components/Icons/IconUnionPay.esm.js";
-import { IconVenmo as j } from "./src/components/Icons/IconVenmo.esm.js";
-import { IconVisa as M } from "./src/components/Icons/IconVisa.esm.js";
+import { DateRangePicker as f } from "./src/components/DateRangePicker/DateRangePicker2.esm.js";
+import { InputPhone as p } from "./src/components/InputPhone/InputPhone2.esm.js";
+import { InputNumber as m } from "./src/components/InputNumber/InputNumber2.esm.js";
+import { Pagination as h } from "./src/components/Pagination/Pagination2.esm.js";
+import { Carousel as g } from "./src/components/Carousel/Carousel2.esm.js";
+import { TimePicker as _ } from "./src/components/TimePicker/TimePicker2.esm.js";
+import { DateTimePicker as v } from "./src/components/DateTimePicker/DateTimePicker2.esm.js";
+import { Tooltip as y } from "./src/components/Tooltip/Tooltip2.esm.js";
+import { IconAmazonPay as b } from "./src/components/Icons/IconAmazonPay.esm.js";
+import { IconAmex as x } from "./src/components/Icons/IconAmex.esm.js";
+import { IconApplePay as S } from "./src/components/Icons/IconApplePay.esm.js";
+import { IconDiscover as C } from "./src/components/Icons/IconDiscover.esm.js";
+import { IconGooglePay as w } from "./src/components/Icons/IconGooglePay.esm.js";
+import { IconMaestro as T } from "./src/components/Icons/IconMaestro.esm.js";
+import { IconMastercard as E } from "./src/components/Icons/IconMastercard.esm.js";
+import { IconPayPal as D } from "./src/components/Icons/IconPayPal.esm.js";
+import { IconSepa as O } from "./src/components/Icons/IconSepa.esm.js";
+import { IconShopPay as k } from "./src/components/Icons/IconShopPay.esm.js";
+import { IconSquare as A } from "./src/components/Icons/IconSquare.esm.js";
+import { IconStripe as j } from "./src/components/Icons/IconStripe.esm.js";
+import { IconUnionPay as M } from "./src/components/Icons/IconUnionPay.esm.js";
+import { IconVenmo as N } from "./src/components/Icons/IconVenmo.esm.js";
+import { IconVisa as P } from "./src/components/Icons/IconVisa.esm.js";
 import "./src/components/Icons/index.esm.js";
 //#region src/components/index.ts
-var N = /* @__PURE__ */ e({
+var F = /* @__PURE__ */ e({
 	Button: () => t,
-	Carousel: () => m,
+	Carousel: () => g,
 	Checkbox: () => o,
 	DatePicker: () => d,
-	DateTimePicker: () => g,
-	IconAmazonPay: () => v,
-	IconAmex: () => y,
-	IconApplePay: () => b,
-	IconDiscover: () => x,
-	IconGooglePay: () => S,
-	IconMaestro: () => C,
-	IconMastercard: () => w,
-	IconPayPal: () => T,
-	IconSepa: () => E,
-	IconShopPay: () => D,
-	IconSquare: () => O,
-	IconStripe: () => k,
-	IconUnionPay: () => A,
-	IconVenmo: () => j,
-	IconVisa: () => M,
+	DateRangePicker: () => f,
+	DateTimePicker: () => v,
+	IconAmazonPay: () => b,
+	IconAmex: () => x,
+	IconApplePay: () => S,
+	IconDiscover: () => C,
+	IconGooglePay: () => w,
+	IconMaestro: () => T,
+	IconMastercard: () => E,
+	IconPayPal: () => D,
+	IconSepa: () => O,
+	IconShopPay: () => k,
+	IconSquare: () => A,
+	IconStripe: () => j,
+	IconUnionPay: () => M,
+	IconVenmo: () => N,
+	IconVisa: () => P,
 	Input: () => n,
+	InputNumber: () => m,
 	InputPassword: () => r,
-	InputPhone: () => f,
+	InputPhone: () => p,
 	Loader: () => i,
 	Modal: () => l,
-	Pagination: () => p,
+	Pagination: () => h,
 	RadioButton: () => a,
 	Select: () => u,
 	Text: () => c,
 	Textarea: () => s,
-	TimePicker: () => h,
-	Tooltip: () => _
+	TimePicker: () => _,
+	Tooltip: () => y
 });
 //#endregion
-export { t as Button, m as Carousel, o as Checkbox, d as DatePicker, g as DateTimePicker, v as IconAmazonPay, y as IconAmex, b as IconApplePay, x as IconDiscover, S as IconGooglePay, C as IconMaestro, w as IconMastercard, T as IconPayPal, E as IconSepa, D as IconShopPay, O as IconSquare, k as IconStripe, A as IconUnionPay, j as IconVenmo, M as IconVisa, n as Input, r as InputPassword, f as InputPhone, i as Loader, l as Modal, p as Pagination, a as RadioButton, u as Select, c as Text, s as Textarea, h as TimePicker, _ as Tooltip, N as components_exports };
+export { t as Button, g as Carousel, o as Checkbox, d as DatePicker, f as DateRangePicker, v as DateTimePicker, b as IconAmazonPay, x as IconAmex, S as IconApplePay, C as IconDiscover, w as IconGooglePay, T as IconMaestro, E as IconMastercard, D as IconPayPal, O as IconSepa, k as IconShopPay, A as IconSquare, j as IconStripe, M as IconUnionPay, N as IconVenmo, P as IconVisa, n as Input, m as InputNumber, r as InputPassword, p as InputPhone, i as Loader, l as Modal, h as Pagination, a as RadioButton, u as Select, c as Text, s as Textarea, _ as TimePicker, y as Tooltip, F as components_exports };

package/Styles.esm.js

@@ -1,7 +1,7 @@
-import { BaseWidthSchema as e, BreakpointSchema as t, ButtonType as n, CarouselPageType as r, LayoutWidthsSchema as i, MaxScreenWidthSchema as a, ScreenWidthSchema as o, TextSize as s, TextTags as c, TextType as l, zLabelPosition as u, zTextInputExclusions as d, zTextInputType as f, zTextInputTypes as p } from "./src/utilities/types.esm.js";
-import { defaultColors as m, defaultWidths as h } from "./src/styles/utilities/constants.esm.js";
-import { breakpoint as g, media as _, width as v, widths as y } from "./src/styles/utilities/layout.esm.js";
-import { color as b, colors as x, hexToRgba as S } from "./src/styles/utilities/color.esm.js";
-import { themeBuilder as C } from "./src/styles/theme/theme.esm.js";
-import { ThemeProvider as w } from "./src/styles/components/ThemeProvider.esm.js";
-export { e as BaseWidthSchema, t as BreakpointSchema, n as ButtonType, r as CarouselPageType, i as LayoutWidthsSchema, a as MaxScreenWidthSchema, o as ScreenWidthSchema, s as TextSize, c as TextTags, l as TextType, w as ThemeProvider, g as breakpoint, b as color, x as colors, m as defaultColors, h as defaultWidths, S as hexToRgba, _ as media, C as themeBuilder, v as width, y as widths, u as zLabelPosition, d as zTextInputExclusions, f as zTextInputType, p as zTextInputTypes };
+import { BaseWidthSchema as e, BreakpointSchema as t, ButtonType as n, CarouselPageType as r, LayoutWidthsSchema as i, MaxScreenWidthSchema as a, ScreenWidthSchema as o, TextSize as s, TextTags as c, TextType as l, zCheckboxLabelPosition as u, zLabelPosition as d, zRadioLabelPosition as f, zTextInputExclusions as p, zTextInputType as m, zTextInputTypes as h } from "./src/utilities/types.esm.js";
+import { defaultColors as g, defaultWidths as _ } from "./src/styles/utilities/constants.esm.js";
+import { breakpoint as v, media as y, width as b, widths as x } from "./src/styles/utilities/layout.esm.js";
+import { color as S, colors as C, hexToRgba as w } from "./src/styles/utilities/color.esm.js";
+import { themeBuilder as T } from "./src/styles/theme/theme.esm.js";
+import { ThemeProvider as E } from "./src/styles/components/ThemeProvider.esm.js";
+export { e as BaseWidthSchema, t as BreakpointSchema, n as ButtonType, r as CarouselPageType, i as LayoutWidthsSchema, a as MaxScreenWidthSchema, o as ScreenWidthSchema, s as TextSize, c as TextTags, l as TextType, E as ThemeProvider, v as breakpoint, S as color, C as colors, g as defaultColors, _ as defaultWidths, w as hexToRgba, y as media, T as themeBuilder, b as width, x as widths, u as zCheckboxLabelPosition, d as zLabelPosition, f as zRadioLabelPosition, p as zTextInputExclusions, m as zTextInputType, h as zTextInputTypes };

package/_virtual/_rolldown/runtime.esm.js

@@ -1,14 +1,23 @@
 //#region \0rolldown/runtime.js
-var e = Object.defineProperty, t = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t.exports), n = (t, n) => {
+var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescriptor, r = Object.getOwnPropertyNames, i = Object.getPrototypeOf, a = Object.prototype.hasOwnProperty, o = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t.exports), s = (e, n) => {
 	let r = {};
-	for (var i in t) e(r, i, {
-		get: t[i],
+	for (var i in e) t(r, i, {
+		get: e[i],
 		enumerable: !0
 	});
-	return n || e(r, Symbol.toStringTag, { value: "Module" }), r;
-}, r = /* @__PURE__ */ ((e) => typeof require < "u" ? require : typeof Proxy < "u" ? new Proxy(e, { get: (e, t) => (typeof require < "u" ? require : e)[t] }) : e)(function(e) {
+	return n || t(r, Symbol.toStringTag, { value: "Module" }), r;
+}, c = (e, i, o, s) => {
+	if (i && typeof i == "object" || typeof i == "function") for (var c = r(i), l = 0, u = c.length, d; l < u; l++) d = c[l], !a.call(e, d) && d !== o && t(e, d, {
+		get: ((e) => i[e]).bind(null, d),
+		enumerable: !(s = n(i, d)) || s.enumerable
+	});
+	return e;
+}, l = (n, r, a) => (a = n == null ? {} : e(i(n)), c(r || !n || !n.__esModule ? t(a, "default", {
+	value: n,
+	enumerable: !0
+}) : a, n)), u = /* @__PURE__ */ ((e) => typeof require < "u" ? require : typeof Proxy < "u" ? new Proxy(e, { get: (e, t) => (typeof require < "u" ? require : e)[t] }) : e)(function(e) {
 	if (typeof require < "u") return require.apply(this, arguments);
 	throw Error("Calling `require` for \"" + e + "\" in an environment that doesn't expose the `require` function. See https://rolldown.rs/in-depth/bundling-cjs#require-external-modules for more details.");
 });
 //#endregion
-export { t as __commonJSMin, n as __exportAll, r as __require };
+export { o as __commonJSMin, s as __exportAll, u as __require, l as __toESM };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stamcat/craftsman",
-  "version": "0.0.27-alpha.19",
+  "version": "0.0.27-alpha.20",
   "type": "module",
   "description": "A powerful, lightweight framework for design systems",
   "repository": {
@@ -24,6 +24,7 @@
   },
   "dependencies": {
     "@floating-ui/react-dom": "2.1.9",
+    "@wojtekmaj/react-daterange-picker": "7.1.0",
     "clsx": "2.1.1",
     "country-flag-icons": "1.6.20",
     "dompurify": "3.4.13",
@@ -111,10 +112,18 @@
       "types": "./src/components/DatePicker.d.ts",
       "default": "./src/components/DatePicker.esm.js"
     },
+    "./DateRangePicker": {
+      "types": "./src/components/DateRangePicker.d.ts",
+      "default": "./src/components/DateRangePicker.esm.js"
+    },
     "./InputPhone": {
       "types": "./src/components/InputPhone.d.ts",
       "default": "./src/components/InputPhone.esm.js"
     },
+    "./InputNumber": {
+      "types": "./src/components/InputNumber.d.ts",
+      "default": "./src/components/InputNumber.esm.js"
+    },
     "./Pagination": {
       "types": "./src/components/Pagination.d.ts",
       "default": "./src/components/Pagination.esm.js"

package/src/components/Carousel/Carousel.css

@@ -1 +1 @@
-@layer craftsman-base{.carousel{position:relative}.carousel__viewport{overflow:hidden}.carousel__container{touch-action:pan-y pinch-zoom;display:flex}.carousel__slide{flex:0 0 100%;min-width:0}.carousel__controls{justify-content:space-between;gap:calc(var(--w-gutter) * .5);margin-top:calc(var(--w-gutter) * .75);flex-flow:row;width:100%;display:inline-flex}.carousel__dots button{margin:0 calc(var(--w-gutter) * .125)}}
+@layer craftsman-component{.carousel{position:relative}.carousel__viewport{overflow:hidden}.carousel__container{touch-action:pan-y pinch-zoom;display:flex}.carousel__slide{flex:0 0 100%;min-width:0}.carousel__controls{justify-content:space-between;gap:calc(var(--w-gutter) * .5);margin-top:calc(var(--w-gutter) * .75);flex-flow:row;width:100%;display:inline-flex}.carousel__dots button{margin:0 calc(var(--w-gutter) * .125)}}

package/src/components/Carousel/Carousel.scss

@@ -1,6 +1,6 @@
 @use "../../styles/utilities/_functions" as u;
 
-@layer craftsman-base {
+@layer craftsman-component {
     .carousel {
         position: relative;
 

package/src/components/Checkbox/Checkbox.d.ts

@@ -1,6 +1,7 @@
 import { InputProps } from '../Input/Input';
+import { CheckboxLabelPosition } from '../../utilities/types';
 export type CheckboxProps = InputProps & {
     type?: "checkbox";
-    labelPosition?: "left" | "right" | "top" | "bottom";
+    labelPosition?: CheckboxLabelPosition;
 };
 export declare const Checkbox: React.FC<CheckboxProps>;

package/src/components/DatePicker/DatePicker.css

@@ -1 +1 @@
-@layer craftsman-base{.react-date-picker__wrapper:focus{box-shadow:none;outline:0}.react-date-picker__wrapper{color:var(--text);border:1px solid var(--gray400);padding:calc(var(--w-gutter) * .5);background-color:var(--white);border-radius:3px}[type=number].react-date-picker__wrapper::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}[type=number].react-date-picker__wrapper::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}[type=number].react-date-picker__wrapper{appearance:textfield}.react-date-picker__wrapper:disabled,.disabled.react-date-picker__wrapper{border-color:var(--gray200);background-color:var(--gray100)}.react-date-picker{display:inline-flex;position:relative}.react-date-picker--disabled{color:#6d6d6d;background-color:#f0f0f0}.react-date-picker__wrapper{flex-grow:1;flex-shrink:0;padding:6px 8px;display:flex}.react-date-picker__inputGroup{box-sizing:content-box;flex-grow:1;padding:0 2px}.react-date-picker__inputGroup__divider{white-space:pre;padding:1px 0}.react-date-picker__inputGroup__divider,.react-date-picker__inputGroup__leadingZero{font:inherit;display:inline-block}.react-date-picker__inputGroup__input{text-align:center;color:currentColor;min-width:calc(2ch + 1px);height:calc(100% - 2px);font:inherit;box-sizing:content-box;appearance:textfield;background:0 0;border:0;padding:1px;position:relative}.react-date-picker__inputGroup__input::-webkit-outer-spin-button{appearance:none;margin:0}.react-date-picker__inputGroup__input::-webkit-inner-spin-button{appearance:none;margin:0}.react-date-picker__inputGroup__input--hasLeadingZero{margin-left:-.54em;padding-left:calc(1px + .54em)}.react-date-picker__button{border:0;padding:4px 4px 4px 7px}.react-date-picker__button:hover{background:0 0}.react-date-picker__calendar{z-index:1;width:350px;max-width:100vw}.react-date-picker__calendar .react-calendar{border-width:thin}.react-date-picker__calendar--closed,.react-date-picker__clock--closed{display:none}.react-date-picker__calendar .react-date-picker__inputGroup__input:invalid{background:unset}}.react-date-picker,.react-date-picker *,.react-date-picker :before,.react-date-picker :after{box-sizing:border-box}
+@layer craftsman-base{.react-date-picker__wrapper:focus{box-shadow:none;outline:0}.react-date-picker__wrapper{color:var(--text);border:1px solid var(--gray400);padding:calc(var(--w-gutter) * .5);background-color:var(--white);border-radius:6px}[type=number].react-date-picker__wrapper::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}[type=number].react-date-picker__wrapper::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}[type=number].react-date-picker__wrapper{appearance:textfield}.react-date-picker__wrapper:disabled,.disabled.react-date-picker__wrapper{border-color:var(--gray200);background-color:var(--gray100)}.react-date-picker__calendar{z-index:1;width:350px;max-width:100vw}.react-date-picker__calendar .react-calendar{border-width:thin}.react-date-picker__calendar--closed,.react-date-picker__clock--closed{display:none}.react-date-picker__calendar .react-date-picker__inputGroup__input:invalid{background:unset}}.react-date-picker,.react-date-picker *,.react-date-picker :before,.react-date-picker :after{box-sizing:border-box}@layer craftsman-component{.react-date-picker{display:inline-flex;position:relative}.react-date-picker--disabled{color:#6d6d6d;background-color:#f0f0f0}.react-date-picker__wrapper{flex-grow:1;flex-shrink:0;padding:6px 8px;display:flex}.react-date-picker__inputGroup{box-sizing:content-box;flex-grow:1;padding:0 2px}.react-date-picker__inputGroup__divider{white-space:pre;padding:1px 0}.react-date-picker__inputGroup__divider,.react-date-picker__inputGroup__leadingZero{font:inherit;display:inline-block}.react-date-picker__inputGroup__input{text-align:center;color:currentColor;min-width:calc(2ch + 1px);height:calc(100% - 2px);font:inherit;box-sizing:content-box;appearance:textfield;background:0 0;border:0;padding:1px;position:relative}[name=year].react-date-picker__inputGroup__input{min-width:calc(4ch + 2px)}.react-date-picker__inputGroup__input:disabled{background-color:unset}.react-date-picker__inputGroup__input::-webkit-outer-spin-button{appearance:none;margin:0}.react-date-picker__inputGroup__input::-webkit-inner-spin-button{appearance:none;margin:0}.react-date-picker__inputGroup__input--hasLeadingZero{margin-left:-.54em;padding-left:calc(1px + .54em)}.react-date-picker__button{border:0;padding:4px 4px 4px 7px}.react-date-picker__button:hover{background:0 0}}

package/src/components/DatePicker/DatePicker.scss

@@ -1,7 +1,7 @@
 @use "../../styles/global/components/input";
 @use "../../styles/utilities/_functions" as u;
 @use "../../styles/utilities/_placeholders";
-@use "./_DateTimePicker";
+@use "./_DatePicker";
 @layer craftsman-base {
     .react-date-picker,
     .react-date-picker *,

package/src/components/DatePicker/ReactCalendar.css

@@ -1 +1 @@
-.react-calendar,.react-calendar *,.react-calendar :before,.react-calendar :after{box-sizing:border-box}@layer craftsman-base{.react-calendar{background:#fff;border:1px solid #a0a096;width:350px;max-width:100%;line-height:1.125em}.react-calendar--doubleView{width:700px}.react-calendar--doubleView .react-calendar__viewContainer{margin:-.5em;display:flex}.react-calendar--doubleView .react-calendar__viewContainer>*{width:50%;margin:.5em}.react-calendar button{border:0;outline:none;margin:0}.react-calendar button:enabled:hover{cursor:pointer}.react-calendar__navigation{height:44px;margin-bottom:1em;display:flex}.react-calendar__navigation button{background:0 0;min-width:44px}.react-calendar__navigation button:disabled{background-color:#f0f0f0}.react-calendar__navigation button:enabled:hover,.react-calendar__navigation button:enabled:focus{background-color:#e6e6e6}.react-calendar__month-view__weekdays{text-align:center;text-transform:uppercase;font:inherit;font-size:.75em;font-weight:700}.react-calendar__month-view__weekdays__weekday{padding:.5em}.react-calendar__month-view__weekNumbers .react-calendar__tile{font:inherit;justify-content:center;align-items:center;font-size:.75em;font-weight:700;display:flex}.react-calendar__month-view__days__day--weekend{color:#d10000}.react-calendar__month-view__days__day--neighboringMonth,.react-calendar__decade-view__years__year--neighboringDecade,.react-calendar__century-view__decades__decade--neighboringCentury{color:#757575}.react-calendar__year-view .react-calendar__tile,.react-calendar__decade-view .react-calendar__tile,.react-calendar__century-view .react-calendar__tile{padding:2em .5em}.react-calendar__tile{text-align:center;max-width:100%;font:inherit;background:0 0;padding:10px 6.6667px;font-size:.833em}.react-calendar__tile:disabled{color:#ababab;background-color:#f0f0f0}.react-calendar__month-view__days__day--neighboringMonth:disabled,.react-calendar__decade-view__years__year--neighboringDecade:disabled,.react-calendar__century-view__decades__decade--neighboringCentury:disabled{color:#cdcdcd}.react-calendar__tile:enabled:hover,.react-calendar__tile:enabled:focus{background-color:#e6e6e6}.react-calendar__tile--now{background:#ffff76}.react-calendar__tile--now:enabled:hover,.react-calendar__tile--now:enabled:focus{background:#ffffa9}.react-calendar__tile--hasActive{background:#76baff}.react-calendar__tile--hasActive:enabled:hover,.react-calendar__tile--hasActive:enabled:focus{background:#a9d4ff}.react-calendar__tile--active{color:#fff;background:#006edc}.react-calendar__tile--active:enabled:hover,.react-calendar__tile--active:enabled:focus{background:#1087ff}.react-calendar--selectRange .react-calendar__tile--hover{background-color:#e6e6e6}.react-calendar{border-color:var(--gray400)}.react-calendar button{justify-content:center}.react-calendar__month-view__days button.react-calendar__tile{height:50px}.react-calendar__month-view__days button.react-calendar__tile:hover,.react-calendar__month-view__days button.react-calendar__tile--active,.react-calendar__month-view__days button.react-calendar__tile--now{border-radius:50%}}
+.react-calendar,.react-calendar *,.react-calendar :before,.react-calendar :after{box-sizing:border-box}@layer craftsman-base{.react-calendar{background:#fff;border:1px solid #a0a096;width:350px;max-width:100%;line-height:1.125em}.react-calendar--doubleView{width:700px}.react-calendar--doubleView .react-calendar__viewContainer{margin:-.5em;display:flex}.react-calendar--doubleView .react-calendar__viewContainer>*{width:50%;margin:.5em}.react-calendar button{border:0;outline:none;margin:0}.react-calendar button:enabled:hover{cursor:pointer}.react-calendar__navigation{height:44px;margin-bottom:1em;display:flex}.react-calendar__navigation button{background:0 0;min-width:44px}.react-calendar__navigation button:disabled{background-color:#f0f0f0}.react-calendar__navigation button:enabled:hover,.react-calendar__navigation button:enabled:focus{background-color:#e6e6e6}.react-calendar__month-view__weekdays{text-align:center;text-transform:uppercase;font:inherit;font-size:.75em;font-weight:700}.react-calendar__month-view__weekdays__weekday{padding:.5em}.react-calendar__month-view__weekNumbers .react-calendar__tile{font:inherit;justify-content:center;align-items:center;font-size:.75em;font-weight:700;display:flex}.react-calendar__month-view__days__day--weekend{color:#d10000}.react-calendar__month-view__days__day--neighboringMonth,.react-calendar__decade-view__years__year--neighboringDecade,.react-calendar__century-view__decades__decade--neighboringCentury{color:#757575}.react-calendar__tile:disabled{color:#ababab;background-color:#f0f0f0}.react-calendar__month-view__days__day--neighboringMonth:disabled,.react-calendar__decade-view__years__year--neighboringDecade:disabled,.react-calendar__century-view__decades__decade--neighboringCentury:disabled{color:#cdcdcd}.react-calendar__tile:enabled:hover,.react-calendar__tile:enabled:focus{background-color:#e6e6e6}.react-calendar__tile--now{background:#ffff76}.react-calendar__tile--now:enabled:hover,.react-calendar__tile--now:enabled:focus{background:#ffffa9}.react-calendar__tile--hasActive{background:#76baff}.react-calendar__tile--hasActive:enabled:hover,.react-calendar__tile--hasActive:enabled:focus{background:#a9d4ff}.react-calendar__tile--active{color:#fff;background:#006edc}.react-calendar__tile--active:enabled:hover,.react-calendar__tile--active:enabled:focus{background:#1087ff}.react-calendar--selectRange .react-calendar__tile--hover{background-color:#e6e6e6}.react-calendar{border-color:var(--gray400)}.react-calendar button{border-radius:unset;justify-content:center;padding:12px 0}.react-calendar__year-view button,.react-calendar__decade-view button,.react-calendar__century-view button{padding:18px 0}}

package/src/components/DatePicker/ReactCalendar.scss

@@ -90,22 +90,6 @@
     .react-calendar__century-view__decades__decade--neighboringCentury {
         color: #757575;
     }
-
-    .react-calendar__year-view .react-calendar__tile,
-    .react-calendar__decade-view .react-calendar__tile,
-    .react-calendar__century-view .react-calendar__tile {
-        padding: 2em 0.5em;
-    }
-
-    .react-calendar__tile {
-        max-width: 100%;
-        padding: 10px 6.6667px;
-        background: none;
-        text-align: center;
-        font: inherit;
-        font-size: 0.833em;
-    }
-
     .react-calendar__tile:disabled {
         background-color: #f0f0f0;
         color: #ababab;
@@ -159,20 +143,15 @@
     .react-calendar button {
         justify-content: center;
     }
-    .react-calendar__month-view__days {
+    .react-calendar {
+        button {
+            border-radius: unset;
+            padding: 12px 0px;
+        }
+    }
+    .react-calendar__year-view, .react-calendar__decade-view, .react-calendar__century-view {
         button {
-            &.react-calendar__tile {
-                height: 50px;
-                &:hover {
-                    border-radius: 50%;
-                }
-                &--active {
-                    border-radius: 50%;
-                }
-                &--now {
-                    border-radius: 50%;
-                }
-            }
+            padding: 18px 0px;
         }
     }
 

package/src/components/DatePicker/{_DateTimePicker.scss → _DatePicker.scss}

@@ -2,7 +2,7 @@
 @use "../../styles/utilities/_functions" as u;
 @use "../../styles/utilities/_placeholders";
 
-@layer craftsman-base {
+@layer craftsman-component {
     %date-picker-styles {
         display: inline-flex;
         position: relative;
@@ -46,6 +46,12 @@
         -webkit-appearance: textfield;
         -moz-appearance: textfield;
         appearance: textfield;
+        &[name="year"] {
+            min-width: calc(4ch + 2px);
+        }
+        &:disabled {
+            background-color: unset;
+        }
     }
     %date-picker-input-spinner {
         -webkit-appearance: none;

package/src/components/DateRangePicker/AGENTS.md

@@ -0,0 +1,38 @@
+# DateRangePicker — Agent Usage Notes
+
+Import:
+
+```tsx
+import { DateRangePicker } from "@stamcat/craftsman/DateRangePicker";
+```
+
+Props:
+
+- Extends `DateRangePickerProps` from `@wojtekmaj/react-daterange-picker`.
+- `label?: string | ReactNode`
+- `labelPosition?: "top" | "left" | "bottom" | "right" | "inside" | "hidden"` (default: `"top"`)
+- `error?: string | boolean | ReactNode`
+- `required?: boolean`
+- `id?: string`
+- `style?: React.CSSProperties`
+- `value?` / `onChange?` — from the underlying library; `value` is typically a `[Date, Date] | null` tuple.
+
+Behavior notes:
+
+- This component directly wraps `react-daterange-picker`; consult that library's docs for range-selection edge cases.
+- `calendarIcon` and `clearIcon` default to `FaRegCalendar` / `FaX` but can be overridden since consumer props are spread after the defaults.
+- Controlled component — parent owns `value` and `onChange`.
+- Calendar flyout renders below the input; ensure the container has enough vertical space.
+
+Example:
+
+```tsx
+const [range, setRange] = useState<[Date, Date] | null>(null);
+
+<DateRangePicker
+  label="Stay Dates"
+  value={range}
+  onChange={setRange}
+  required
+/>
+```

package/src/components/DateRangePicker/DateRangePicker.css

@@ -0,0 +1 @@
+@layer craftsman-base{.react-daterange-picker__wrapper:focus{box-shadow:none;outline:0}.react-daterange-picker__wrapper{color:var(--text);border:1px solid var(--gray400);padding:calc(var(--w-gutter) * .5);background-color:var(--white);border-radius:6px}[type=number].react-daterange-picker__wrapper::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}[type=number].react-daterange-picker__wrapper::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}[type=number].react-daterange-picker__wrapper{appearance:textfield}.react-daterange-picker__wrapper:disabled,.disabled.react-daterange-picker__wrapper{border-color:var(--gray200);background-color:var(--gray100)}}.react-daterange-picker,.react-daterange-picker *,.react-daterange-picker :before,.react-daterange-picker :after{box-sizing:border-box}@layer craftsman-component{.react-daterange-picker{display:inline-flex;position:relative}.react-daterange-picker--disabled{color:#6d6d6d;background-color:#f0f0f0}.react-daterange-picker__wrapper{flex-grow:1;flex-shrink:0;padding:6px 8px;display:flex}.react-daterange-picker__inputGroup{box-sizing:content-box;flex-grow:1;padding:0 2px}.react-daterange-picker__inputGroup__divider{white-space:pre;padding:1px 0}.react-daterange-picker__inputGroup__divider,.react-daterange-picker__inputGroup__leadingZero{font:inherit;display:inline-block}.react-daterange-picker__inputGroup__input{text-align:center;color:currentColor;min-width:calc(2ch + 1px);height:calc(100% - 2px);font:inherit;box-sizing:content-box;appearance:textfield;background:0 0;border:0;padding:1px;position:relative}[name=year].react-daterange-picker__inputGroup__input{min-width:calc(4ch + 2px)}.react-daterange-picker__inputGroup__input:disabled{background-color:unset}.react-daterange-picker__inputGroup__input::-webkit-outer-spin-button{appearance:none;margin:0}.react-daterange-picker__inputGroup__input::-webkit-inner-spin-button{appearance:none;margin:0}.react-daterange-picker__inputGroup__input--hasLeadingZero{margin-left:-.54em;padding-left:calc(1px + .54em)}.react-daterange-picker__button{border:0;padding:4px 4px 4px 7px}.react-daterange-picker__button:hover{background:0 0}.react-daterange-picker__calendar{z-index:1;width:350px;max-width:100vw}.react-daterange-picker__calendar .react-calendar{border-width:thin}.react-daterange-picker__calendar--closed,.react-daterange-picker__clock--closed{display:none}.react-daterange-picker__calendar .react-daterange-picker__inputGroup__input:invalid{background:unset}}

package/src/components/DateRangePicker/DateRangePicker.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+import { LabeledInput } from '../Input/InputWrapper';
+import { DateRangePickerProps as ReactDateRangePickerProps } from '@wojtekmaj/react-daterange-picker';
+export type DateRangePickerProps = ReactDateRangePickerProps & LabeledInput & {
+    id?: string;
+    style?: React.CSSProperties;
+};
+export declare const DateRangePicker: React.FC<DateRangePickerProps>;

package/src/components/DateRangePicker/DateRangePicker.scss

@@ -0,0 +1,62 @@
+@use "../../styles/global/components/input";
+@use "../../styles/utilities/_functions" as u;
+@use "../../styles/utilities/_placeholders";
+@use "../DatePicker/_DatePicker";
+@layer craftsman-component {
+    .react-daterange-picker,
+    .react-daterange-picker *,
+    .react-daterange-picker *:before,
+    .react-daterange-picker *:after {
+        @extend %border-box;
+    }
+
+    .react-daterange-picker {
+        @extend %date-picker-styles;
+        &--disabled {
+            @extend %date-picker-disabled;
+        }
+        &__wrapper {
+            @extend %date-picker-wrapper;
+        }
+        &__inputGroup {
+            @extend %date-picker-input-group;
+        }
+        &__inputGroup__divider {
+            @extend %date-picker-divider;
+        }
+        &__inputGroup__divider,
+        &__inputGroup__leadingZero {
+            @extend %date-picker-leading-zero-divider;
+        }
+        &__inputGroup__input {
+            @extend %date-picker-group-input;
+        }
+        &__inputGroup__input::-webkit-outer-spin-button,
+        &__inputGroup__input::-webkit-inner-spin-button {
+            @extend %date-picker-input-spinner;
+        }
+        &__inputGroup__input--hasLeadingZero {
+            @extend %date-picker-input-leading-zero;
+        }
+        &__button {
+            @extend %date-picker-button;
+        }
+        &__calendar {
+            width: 350px;
+            max-width: 100vw;
+            z-index: 1;
+            .react-calendar {
+                    border-width: thin;
+            }
+        }
+        &__calendar--closed, &__clock--closed {
+            display: none;
+        }
+
+    }
+    .react-daterange-picker__calendar 
+    .react-daterange-picker__inputGroup__input:invalid {
+        background: unset;
+    }
+
+}

package/src/components/DateRangePicker/DateRangePicker2.esm.js

@@ -0,0 +1,29 @@
+"use client";
+import { InputWrapper as e } from "../Input/InputWrapper.esm.js";
+import './DateRangePicker.css';import '../DatePicker/ReactCalendar.css';/* empty css                              */
+/* empty css                    */
+import t from "../../../node_modules/@wojtekmaj/react-daterange-picker/dist/DateRangePicker.esm.js";
+import n from "clsx";
+import { jsx as r } from "react/jsx-runtime";
+import { useId as i } from "react";
+import { FaRegCalendar as a, FaX as o } from "react-icons/fa6";
+//#region src/components/DateRangePicker/DateRangePicker.tsx
+var s = ({ label: s, id: c, labelPosition: l = "top", required: u = !1, error: d, style: f, className: p, ...m }) => {
+	let h = i();
+	return /* @__PURE__ */ r(e, {
+		id: c || h,
+		className: n("dateRangePicker", p),
+		label: s,
+		labelPosition: l,
+		error: d,
+		required: u,
+		style: f,
+		children: /* @__PURE__ */ r(t, {
+			calendarIcon: /* @__PURE__ */ r(a, { size: 16 }),
+			clearIcon: /* @__PURE__ */ r(o, { size: 14 }),
+			...m
+		})
+	});
+};
+//#endregion
+export { s as DateRangePicker };

package/src/components/DateTimePicker/DateTimePicker.css

@@ -1 +1 @@
-@layer craftsman-base{.react-datetime-picker__wrapper:focus{box-shadow:none;outline:0}.react-datetime-picker__wrapper{color:var(--text);border:1px solid var(--gray400);padding:calc(var(--w-gutter) * .5);background-color:var(--white);border-radius:3px}[type=number].react-datetime-picker__wrapper::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}[type=number].react-datetime-picker__wrapper::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}[type=number].react-datetime-picker__wrapper{appearance:textfield}.react-datetime-picker__wrapper:disabled,.disabled.react-datetime-picker__wrapper{border-color:var(--gray200);background-color:var(--gray100)}.react-datetime-picker{display:inline-flex;position:relative}.react-datetime-picker--disabled{color:#6d6d6d;background-color:#f0f0f0}.react-datetime-picker__wrapper{flex-grow:1;flex-shrink:0;padding:6px 8px;display:flex}.react-datetime-picker__inputGroup{box-sizing:content-box;flex-grow:1;padding:0 2px}.react-datetime-picker__inputGroup__divider{white-space:pre;padding:1px 0}.react-datetime-picker__inputGroup__divider,.react-datetime-picker__inputGroup__leadingZero{font:inherit;display:inline-block}.react-datetime-picker__inputGroup__input{text-align:center;color:currentColor;min-width:calc(2ch + 1px);height:calc(100% - 2px);font:inherit;box-sizing:content-box;appearance:textfield;background:0 0;border:0;padding:1px;position:relative}.react-datetime-picker__inputGroup__input::-webkit-outer-spin-button{appearance:none;margin:0}.react-datetime-picker__inputGroup__input::-webkit-inner-spin-button{appearance:none;margin:0}.react-datetime-picker__inputGroup__input--hasLeadingZero{margin-left:-.54em;padding-left:calc(1px + .54em)}.react-datetime-picker__button{border:0;padding:4px 4px 4px 7px}.react-datetime-picker__button:hover{background:0 0}.react-datetime-picker__calendar--closed,.react-datetime-picker__clock--closed{display:none}.react-datetime-picker__calendar,.react-datetime-picker__clock{z-index:1}.react-datetime-picker__inputGroup__input:invalid{background:#ff00001a}.react-datetime-picker__inputGroup__amPm{font:inherit;appearance:menulist}.react-datetime-picker__calendar{width:350px;max-width:100vw}.react-datetime-picker__calendar .react-calendar{border-width:thin}.react-date-picker__inputGroup__input:invalid,.react-datetime-picker__inputGroup__input:invalid{background:unset}.dateTimePicker__time-display{margin-top:8px;display:flex}.dateTimePicker__wrapper{display:inline-block}}.react-datetime-picker,.react-datetime-picker *,.react-datetime-picker :before,.react-datetime-picker :after{box-sizing:border-box}
+@layer craftsman-base{.react-datetime-picker__wrapper:focus{box-shadow:none;outline:0}.react-datetime-picker__wrapper{color:var(--text);border:1px solid var(--gray400);padding:calc(var(--w-gutter) * .5);background-color:var(--white);border-radius:6px}[type=number].react-datetime-picker__wrapper::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}[type=number].react-datetime-picker__wrapper::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}[type=number].react-datetime-picker__wrapper{appearance:textfield}.react-datetime-picker__wrapper:disabled,.disabled.react-datetime-picker__wrapper{border-color:var(--gray200);background-color:var(--gray100)}}.react-datetime-picker,.react-datetime-picker *,.react-datetime-picker :before,.react-datetime-picker :after{box-sizing:border-box}@layer craftsman-component{.react-datetime-picker{display:inline-flex;position:relative}.react-datetime-picker--disabled{color:#6d6d6d;background-color:#f0f0f0}.react-datetime-picker__wrapper{flex-grow:1;flex-shrink:0;padding:6px 8px;display:flex}.react-datetime-picker__inputGroup{box-sizing:content-box;flex-grow:1;padding:0 2px}.react-datetime-picker__inputGroup__divider{white-space:pre;padding:1px 0}.react-datetime-picker__inputGroup__divider,.react-datetime-picker__inputGroup__leadingZero{font:inherit;display:inline-block}.react-datetime-picker__inputGroup__input{text-align:center;color:currentColor;min-width:calc(2ch + 1px);height:calc(100% - 2px);font:inherit;box-sizing:content-box;appearance:textfield;background:0 0;border:0;padding:1px;position:relative}[name=year].react-datetime-picker__inputGroup__input{min-width:calc(4ch + 2px)}.react-datetime-picker__inputGroup__input:disabled{background-color:unset}.react-datetime-picker__inputGroup__input::-webkit-outer-spin-button{appearance:none;margin:0}.react-datetime-picker__inputGroup__input::-webkit-inner-spin-button{appearance:none;margin:0}.react-datetime-picker__inputGroup__input--hasLeadingZero{margin-left:-.54em;padding-left:calc(1px + .54em)}.react-datetime-picker__button{border:0;padding:4px 4px 4px 7px}.react-datetime-picker__button:hover{background:0 0}.react-datetime-picker__calendar--closed,.react-datetime-picker__clock--closed{display:none}.react-datetime-picker__calendar,.react-datetime-picker__clock{z-index:1}.react-datetime-picker__inputGroup__input:invalid{background:#ff00001a}.react-datetime-picker__inputGroup__amPm{font:inherit;appearance:menulist}.react-datetime-picker__calendar{width:350px;max-width:100vw}.react-datetime-picker__calendar .react-calendar{border-width:thin}.react-date-picker__inputGroup__input:invalid,.react-datetime-picker__inputGroup__input:invalid{background:unset}.dateTimePicker__time-display{margin-top:8px;display:flex}.dateTimePicker__wrapper{display:inline-block}}

package/src/components/DateTimePicker/DateTimePicker.scss

@@ -1,8 +1,8 @@
 @use "../../styles/global/components/input";
 @use "../../styles/utilities/_functions" as u;
 @use "../../styles/utilities/_placeholders";
-@use "../DatePicker/_DateTimePicker";
-@layer craftsman-base {
+@use "../DatePicker/_DatePicker";
+@layer craftsman-component {
     .react-datetime-picker,
     .react-datetime-picker *,
     .react-datetime-picker *:before,

package/src/components/Input/AGENTS.md

@@ -21,6 +21,7 @@ Behavior notes:
 - `id` is preserved; if omitted, a stable React `useId` value is used.
 - Floating-label behavior is supported when `labelPosition="inside"`.
 - `endAdornment` exists as an internal extension point used by `InputPassword`; consumer apps should prefer `InputPassword` rather than wiring password toggles on `Input`.
+- `preAdornment` is an internal extension point used by `InputNumber` for its decrement button; consumer apps should prefer `InputNumber` rather than wiring stepper buttons on `Input` directly.
 
 Example:
 

package/src/components/Input/Input.css

@@ -1 +1 @@
-@layer craftsman-base{.input-wrapper label .input-label{margin-bottom:calc(var(--w-gutter) * .25)}.input-wrapper[data-required=true] label .input-label:after{content:"*";color:var(--red700)}.input-wrapper[data-label-position=left] label{align-items:center;display:inline-flex}.input-wrapper[data-label-position=left] label .input-label{width:fit-content;margin-right:calc(var(--w-gutter) * .75)}.input-wrapper[data-label-position=left].textarea label{align-items:flex-start}.input-wrapper[data-label-position=bottom] label{flex-direction:column-reverse;align-items:flex-start;display:inline-flex}.input-wrapper[data-label-position=bottom] label .input-label{margin-bottom:0;margin-top:calc(var(--w-gutter) * .25)}.input-wrapper[data-label-position=right] label{flex-direction:row-reverse;align-items:baseline;display:inline-flex}.input-wrapper[data-label-position=right] label .input-label{margin-left:calc(var(--w-gutter) * .25);margin-bottom:0}.input-wrapper[data-label-position=inside]{--react-international-phone-height:50px;--react-international-phone-border-radius:8px;--react-international-phone-border-color:silver;position:relative}.input-wrapper[data-label-position=inside] .input-label{background-color:var(--white);z-index:1;width:fit-content;top:calc(var(--w-gutter) * .25);left:calc(var(--w-gutter) * .25);pointer-events:none;padding:0 5px;transition:top .15s,left .15s,font-size .15s,color .15s;position:absolute}.input-wrapper[data-label-position=inside]>label>.input-field>.input,.input-wrapper[data-label-position=inside]>.input{transition:border-color .2s}.input-wrapper[data-label-position=inside]:focus-within .input-label{top:-.5rem;left:calc(var(--w-gutter) * .125);font-size:calc(var(--w-text) * .75);color:var(--blue500)}.input-wrapper[data-label-position=inside]:focus-within .input{border-color:var(--blue500)}.input-wrapper[data-label-position=inside]:focus-within .input::placeholder{opacity:1}.input-wrapper[data-label-position=inside][data-has-input=true] .input-label{top:-.5rem;left:calc(var(--w-gutter) * .125);font-size:calc(var(--w-text) * .75)}.input-wrapper[data-label-position=inside] .input[type=tel]{width:100%}.input-wrapper[data-label-position=inside] .input::placeholder{opacity:0;transition:opacity .2s}.input-wrapper .input-field{align-items:center;display:inline-flex;position:relative}.input-wrapper .input-field[data-has-end-adornment=true]>.input{width:100%;padding-right:calc(var(--w-gutter) * 1.5)}.input-wrapper .input-adornment{right:calc(var(--w-gutter) * .5);z-index:1;align-items:center;margin-top:0;display:inline-flex;position:absolute;top:50%;transform:translateY(-50%)}.input-wrapper .input-error{margin-top:calc(var(--w-gutter) * .25);font-size:calc(var(--w-text) * .75);color:var(--red600)}.input-wrapper .input-view-toggle{align-items:"center";padding:0;line-height:1;display:inline-flex}}
+@layer craftsman-base{.input-pre-adornment,.input-end-adornment{z-index:1;align-items:center;margin-top:0;display:inline-flex;position:absolute;top:50%;transform:translateY(-50%)}.input-wrapper label .input-label{margin-bottom:calc(var(--w-gutter) * .25)}.input-wrapper[data-required=true] label .input-label:after{content:"*";color:var(--red700)}.input-wrapper[data-label-position=left] label{align-items:center;display:inline-flex}.input-wrapper[data-label-position=left] label .input-label{width:fit-content;margin-right:calc(var(--w-gutter) * .75)}.input-wrapper[data-label-position=left].textarea label{align-items:flex-start}.input-wrapper[data-label-position=bottom] label{flex-direction:column-reverse;align-items:flex-start;display:inline-flex}.input-wrapper[data-label-position=bottom] label .input-label{margin-bottom:0;margin-top:calc(var(--w-gutter) * .25)}.input-wrapper[data-label-position=right] label{flex-direction:row-reverse;align-items:baseline;display:inline-flex}.input-wrapper[data-label-position=right] label .input-label{margin-left:calc(var(--w-gutter) * .25);margin-bottom:0}.input-wrapper[data-label-position=inside]{--react-international-phone-height:50px;--react-international-phone-border-radius:8px;--react-international-phone-border-color:silver;position:relative}.input-wrapper[data-label-position=inside] .input-label{background-color:var(--white);z-index:1;width:fit-content;top:calc(var(--w-gutter) * .45);left:calc(var(--w-gutter) * .25);pointer-events:none;padding:0 5px;transition:top .15s,left .15s,font-size .15s,color .15s;position:absolute}.input-wrapper[data-label-position=inside]>label>.input-field>.input,.input-wrapper[data-label-position=inside]>.input{transition:border-color .2s}.input-wrapper[data-label-position=inside]:focus-within .input-label{top:-.5rem;left:calc(var(--w-gutter) * .125);font-size:calc(var(--w-text) * .75);color:var(--blue500)}.input-wrapper[data-label-position=inside]:focus-within .input{border-color:var(--blue500)}.input-wrapper[data-label-position=inside]:focus-within .input::placeholder{opacity:1}.input-wrapper[data-label-position=inside][data-has-input=true] .input-label{top:-.5rem;left:calc(var(--w-gutter) * .125);font-size:calc(var(--w-text) * .75)}.input-wrapper[data-label-position=inside] .input[type=tel]{width:100%}.input-wrapper[data-label-position=inside] .input::placeholder{opacity:0;transition:opacity .2s}.input-field{align-items:center;display:inline-flex;position:relative}.input-field[data-has-end-adornment=true]>.input{padding-right:calc(var(--w-gutter) * 1.5)}.input-field[data-has-pre-adornment=true]>.input{padding-left:calc(var(--w-gutter) * 2.25)}.input-end-adornment{right:calc(var(--w-gutter) * .5)}.input-pre-adornment{left:calc(var(--w-gutter) * .5)}.input-error{margin-top:calc(var(--w-gutter) * .25);font-size:calc(var(--w-text) * .75);color:var(--red600)}.input-view-toggle{align-items:"center";padding:0;line-height:1;display:inline-flex}}