@stamcat/craftsman 0.0.31-beta.4 → 0.0.32

package/src/components/Textarea/Textarea.esm.js

@@ -1,18 +1,18 @@
 "use client";
 import { InputWrapper as e } from "../Input/InputWrapper.esm.js";
-import { jsx as t } from "react/jsx-runtime";
-import { useId as n } from "react";
+import { useId as t } from "react";
+import { jsx as n } from "react/jsx-runtime";
 //#region src/components/Textarea/Textarea.tsx
 var r = ({ labelPosition: r = "top", id: i, label: a, error: o, required: s, className: c, style: l, ...u }) => {
-	let d = n();
-	return /* @__PURE__ */ t(e, {
+	let d = t();
+	return /* @__PURE__ */ n(e, {
 		label: a,
 		className: c,
 		labelPosition: r,
 		error: o,
 		required: s,
 		style: l,
-		children: /* @__PURE__ */ t("textarea", {
+		children: /* @__PURE__ */ n("textarea", {
 			id: i || d,
 			className: "input",
 			...u

package/src/components/TimePicker/TimePicker.css

@@ -1 +1 @@
-@layer craftsman-base{.react-time-picker__wrapper:focus{box-shadow:none;outline:0}.react-time-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-time-picker__wrapper::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}[type=number].react-time-picker__wrapper::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}[type=number].react-time-picker__wrapper{appearance:textfield}.react-time-picker__wrapper:disabled,.disabled.react-time-picker__wrapper{border-color:var(--gray200);background-color:var(--gray100)}}.react-time-picker,.react-time-picker *,.react-time-picker :before,.react-time-picker :after{box-sizing:border-box}@layer craftsman-component{.react-time-picker{display:inline-flex;position:relative}.react-time-picker--disabled{color:#6d6d6d;background-color:#f0f0f0}.react-time-picker__wrapper{flex-grow:1;flex-shrink:0;padding:6px 8px;display:flex}.react-time-picker__inputGroup{box-sizing:content-box;flex-grow:1;padding:0 2px}.react-time-picker__inputGroup__divider{white-space:pre;padding:1px 0}.react-time-picker__inputGroup__divider,.react-time-picker__inputGroup__leadingZero{font:inherit;display:inline-block}.react-time-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-time-picker__inputGroup__input{min-width:calc(4ch + 2px)}.react-time-picker__inputGroup__input:disabled{background-color:unset}.react-time-picker__inputGroup__input::-webkit-outer-spin-button{appearance:none;margin:0}.react-time-picker__inputGroup__input::-webkit-inner-spin-button{appearance:none;margin:0}.react-time-picker__inputGroup__input--hasLeadingZero{margin-left:-.54em;padding-left:calc(1px + .54em)}.react-time-picker__button{border:0;padding:4px 4px 4px 7px}.react-time-picker__button:hover{background:0 0}.react-time-picker__wrapper{padding:6px 24px 6px 8px}.react-time-picker__inputGroup__input:invalid{background:#ff00001a}.react-time-picker__inputGroup__amPm{font:inherit;appearance:menulist}.react-time-picker__button:enabled{cursor:pointer}.react-time-picker__button:enabled:hover .react-time-picker__button__icon,.react-time-picker__button:enabled:focus .react-time-picker__button__icon{stroke:#0078d7}.react-time-picker__button:disabled .react-time-picker__button__icon{stroke:#6d6d6d}.react-time-picker__button svg{display:inherit}.react-time-picker__clock{z-index:1;background-color:#fff;border:thin solid #a0a096;width:200px;max-width:100vw;height:200px;padding:25px}.react-time-picker__clock--closed,.timePicker .react-time-picker__clock{display:none}.timePicker .timePicker__field{position:relative}.timePicker .timePicker__field .input-view-toggle{padding:4px;line-height:1;position:absolute;top:50%;right:4px;transform:translateY(-50%)}.timePicker__display{background-color:var(--white);border:1px solid var(--gray400);z-index:1;border-radius:8px;height:160px;display:inline-flex;position:relative}.timePicker__display:before,.timePicker__display:after{content:"";z-index:1;pointer-events:none;height:calc(50% - 16px);display:block;position:absolute;left:0;right:0}.timePicker__display:before{border-bottom:.5px solid rgba(var(--text-high-contrast-rgb-value), .3);background:linear-gradient(to top, rgba(var(--background-site-rgb-value), .65) 0%, rgba(var(--background-site-rgb-value), 1) 100%);top:-.5px}.timePicker__display:after{border-top:.5px solid rgba(var(--text-high-contrast-rgb-value), .3);background:linear-gradient(to bottom, rgba(var(--background-site-rgb-value), .65) 0%, rgba(var(--background-site-rgb-value), 1) 100%);bottom:-.5px}.timePicker__display .ios-picker{flex-direction:row;align-items:center;gap:6px;height:100%;padding:0 12px;font-size:16px;line-height:1;display:flex}.timePicker__display .ios-picker--disabled{pointer-events:none;opacity:.5}.timePicker__display .ios-picker__scene{touch-action:pan-x;align-items:center;min-width:30px;height:100%;display:flex;overflow:hidden}.timePicker__display .ios-picker__viewport{perspective:1000px;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-webkit-tap-highlight-color:transparent;width:100%;height:32px}.timePicker__display .ios-picker__viewport--perspective-left{perspective-origin:calc(50% + 130px);transform:translate(27px)}.timePicker__display .ios-picker__viewport--perspective-right{perspective-origin:calc(50% - 130px);transform:translate(-27px)}.timePicker__display .ios-picker__viewport--perspective-center{perspective-origin:50%}.timePicker__display .ios-picker__container{width:100%;height:100%;transform-style:preserve-3d;will-change:transform}.timePicker__display .ios-picker__slide{text-align:center;backface-visibility:hidden;opacity:0;justify-content:center;align-items:center;width:100%;height:100%;display:flex}.timePicker__display .ios-picker__label{white-space:nowrap;pointer-events:none;font-weight:700}}
+@layer craftsman-base{.react-time-picker__wrapper{color:var(--text);border:1px solid var(--gray400);padding:calc(var(--w-gutter) * .5);background-color:var(--white);border-radius:6px}.react-time-picker__wrapper:focus{box-shadow:none;outline:0}.react-time-picker__wrapper:hover{border-color:var(--gray500)}[type=number].react-time-picker__wrapper::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}[type=number].react-time-picker__wrapper::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}[type=number].react-time-picker__wrapper{appearance:textfield}.react-time-picker__wrapper:disabled,.disabled.react-time-picker__wrapper{border-color:var(--gray400);background-color:var(--gray100)}}.react-time-picker,.react-time-picker *,.react-time-picker :before,.react-time-picker :after{box-sizing:border-box}@layer craftsman-component{.react-time-picker{display:inline-flex;position:relative}.react-time-picker--disabled{color:#6d6d6d;background-color:#f0f0f0}.react-time-picker__wrapper{flex-grow:1;flex-shrink:0;padding:6px 8px;display:flex}.react-time-picker__inputGroup{box-sizing:content-box;flex-grow:1;padding:0 2px}.react-time-picker__inputGroup__divider{white-space:pre;padding:1px 0}.react-time-picker__inputGroup__divider,.react-time-picker__inputGroup__leadingZero{font:inherit;display:inline-block}.react-time-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-time-picker__inputGroup__input{min-width:calc(4ch + 2px)}.react-time-picker__inputGroup__input:disabled{background-color:unset}.react-time-picker__inputGroup__input::-webkit-outer-spin-button{appearance:none;margin:0}.react-time-picker__inputGroup__input::-webkit-inner-spin-button{appearance:none;margin:0}.react-time-picker__inputGroup__input--hasLeadingZero{margin-left:-.54em;padding-left:calc(1px + .54em)}.react-time-picker__button{border:0;padding:4px 4px 4px 7px}.react-time-picker__button:hover{background:0 0}.react-time-picker__wrapper{padding:6px 24px 6px 8px}.react-time-picker__inputGroup__input:invalid{background:#ff00001a}.react-time-picker__inputGroup__amPm{font:inherit;appearance:menulist}.react-time-picker__button:enabled{cursor:pointer}.react-time-picker__button:enabled:hover .react-time-picker__button__icon,.react-time-picker__button:enabled:focus .react-time-picker__button__icon{stroke:#0078d7}.react-time-picker__button:disabled .react-time-picker__button__icon{stroke:#6d6d6d}.react-time-picker__button svg{display:inherit}.react-time-picker__clock{z-index:1;background-color:#fff;border:thin solid #a0a096;width:200px;max-width:100vw;height:200px;padding:25px}.react-time-picker__clock--closed,.timePicker .react-time-picker__clock{display:none}.timePicker .timePicker__field{position:relative}.timePicker .timePicker__field .input-view-toggle{padding:4px;line-height:1;position:absolute;top:50%;right:4px;transform:translateY(-50%)}.timePicker__display{background-color:var(--white);border:1px solid var(--gray400);z-index:1;border-radius:8px;height:160px;display:inline-flex;position:relative}.timePicker__display:before,.timePicker__display:after{content:"";z-index:1;pointer-events:none;height:calc(50% - 16px);display:block;position:absolute;left:0;right:0}.timePicker__display:before{border-bottom:.5px solid rgba(var(--text-high-contrast-rgb-value), .3);background:linear-gradient(to top, rgba(var(--background-site-rgb-value), .65) 0%, rgba(var(--background-site-rgb-value), 1) 100%);top:-.5px}.timePicker__display:after{border-top:.5px solid rgba(var(--text-high-contrast-rgb-value), .3);background:linear-gradient(to bottom, rgba(var(--background-site-rgb-value), .65) 0%, rgba(var(--background-site-rgb-value), 1) 100%);bottom:-.5px}.timePicker__display .ios-picker{flex-direction:row;align-items:center;gap:6px;height:100%;padding:0 12px;font-size:16px;line-height:1;display:flex}.timePicker__display .ios-picker--disabled{pointer-events:none;opacity:.5}.timePicker__display .ios-picker__scene{touch-action:pan-x;align-items:center;min-width:30px;height:100%;display:flex;overflow:hidden}.timePicker__display .ios-picker__viewport{perspective:1000px;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-webkit-tap-highlight-color:transparent;width:100%;height:32px}.timePicker__display .ios-picker__viewport--perspective-left{perspective-origin:calc(50% + 130px);transform:translate(27px)}.timePicker__display .ios-picker__viewport--perspective-right{perspective-origin:calc(50% - 130px);transform:translate(-27px)}.timePicker__display .ios-picker__viewport--perspective-center{perspective-origin:50%}.timePicker__display .ios-picker__container{width:100%;height:100%;transform-style:preserve-3d;will-change:transform}.timePicker__display .ios-picker__slide{text-align:center;backface-visibility:hidden;opacity:0;justify-content:center;align-items:center;width:100%;height:100%;display:flex}.timePicker__display .ios-picker__label{white-space:nowrap;pointer-events:none;font-weight:700}}

package/src/components/TimePicker/{TimePicker2.esm.js → TimePicker.esm.js}

@@ -1,18 +1,18 @@
 "use client";
 import { Button as e } from "../Button/Button.esm.js";
 import { InputWrapper as t } from "../Input/InputWrapper.esm.js";
-import './TimePicker.css';/* empty css               */
+import './TimePicker.css';/* empty css                     */
 import { resolveLocale as n } from "./utilities.esm.js";
 import { TimePickerDisplay as r } from "./TimePickerDisplay.esm.js";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
-import { useEffect as o, useState as s } from "react";
-import { FaClock as c, FaRegClock as l, FaX as u } from "react-icons/fa6";
+import { useEffect as i, useState as a } from "react";
+import { FaClock as o, FaRegClock as s, FaX as c } from "react-icons/fa6";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
 import { autoUpdate as d, flip as f, offset as p, shift as m, useFloating as h } from "@floating-ui/react-dom";
 import { TimePicker as g } from "react-time-picker";
 import { isMobile as _ } from "react-device-detect";
 //#region src/components/TimePicker/TimePicker.tsx
 var v = (v) => {
-	let { labels: y, locale: b, format: x, value: S, onChange: C, label: w, labelPosition: T, error: E, required: D, name: O, ...k } = v, [A, j] = s(null), [M, N] = s(null), { floatingStyles: P } = h({
+	let { labels: y, locale: b, format: x, value: S, onChange: C, label: w, labelPosition: T, error: E, required: D, name: O, ...k } = v, [A, j] = a(null), [M, N] = a(null), { floatingStyles: P } = h({
 		placement: "bottom-start",
 		strategy: "absolute",
 		whileElementsMounted: d,
@@ -25,8 +25,8 @@ var v = (v) => {
 			reference: A,
 			floating: M
 		}
-	}), [F, I] = s(!1), L = n(b);
-	return o(() => {
+	}), [F, I] = a(!1), L = n(b);
+	return i(() => {
 		if (!F) return;
 		let e = (e) => {
 			A?.contains(e.target) || M?.contains(e.target) || I(!1);
@@ -38,7 +38,7 @@ var v = (v) => {
 		F,
 		A,
 		M
-	]), /* @__PURE__ */ a("div", {
+	]), /* @__PURE__ */ u("div", {
 		className: "timePicker",
 		ref: j,
 		onFocus: (e) => {
@@ -48,28 +48,28 @@ var v = (v) => {
 			e.key === "Enter" && I(!1);
 		},
 		children: [
-			O && /* @__PURE__ */ i("input", {
+			O && /* @__PURE__ */ l("input", {
 				type: "hidden",
 				name: O,
 				value: typeof S == "string" ? S : "",
 				readOnly: !0
 			}),
-			/* @__PURE__ */ i(t, {
+			/* @__PURE__ */ l(t, {
 				label: w,
 				labelPosition: T,
 				error: E,
 				required: D,
-				children: /* @__PURE__ */ a("div", {
+				children: /* @__PURE__ */ u("div", {
 					className: "timePicker__field",
-					children: [/* @__PURE__ */ i(g, {
+					children: [/* @__PURE__ */ l(g, {
 						...k,
 						value: S,
 						onChange: C,
 						locale: L,
 						required: D,
 						disableClock: !0,
-						clearIcon: /* @__PURE__ */ i(u, { size: 14 })
-					}), !_ && /* @__PURE__ */ i(e, {
+						clearIcon: /* @__PURE__ */ l(c, { size: 14 })
+					}), !_ && /* @__PURE__ */ l(e, {
 						type: "button",
 						variant: "text",
 						onClick: () => I((e) => !e),
@@ -77,11 +77,11 @@ var v = (v) => {
 						"aria-pressed": F,
 						disabled: v.disabled,
 						className: "input-view-toggle",
-						children: i(F ? c : l, { size: 16 })
+						children: l(F ? o : s, { size: 16 })
 					})]
 				})
 			}),
-			!_ && /* @__PURE__ */ i(r, {
+			!_ && /* @__PURE__ */ l(r, {
 				value: S,
 				onChange: (e) => C?.(e),
 				locale: L,

package/src/components/TimePicker/TimePickerDisplay.esm.js

@@ -1,8 +1,8 @@
 import { getAmPmLabels as e, getUnitLabel as t, is24HourFormat as n, isEmpty as r } from "../../utilities/validations.esm.js";
 import { padTime as i, parseTimeString as a, resolveLocale as o, resolveTimeFormat as s, to24Hour as c } from "./utilities.esm.js";
 import { IosPickerItem as l } from "./TimePickerWheel.esm.js";
-import { jsx as u, jsxs as d } from "react/jsx-runtime";
 import "react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
 //#region src/components/TimePicker/TimePickerDisplay.tsx
 var f = (e, t) => e ? t : void 0, p = (p) => {
 	let { value: m, onChange: h, locale: g, format: _, labels: v, visible: y = !1, floatingRef: b, style: x } = p, S = o(g), [C, w] = a(m), T = !r(m), E = s(_, n(S)), D = +(E === 12), O = E === 12 ? e(S) : null, k = +(C >= 12), A = E === 12 ? (C % 12 + 11) % 12 : C;

package/src/components/TimePicker/TimePickerWheel.esm.js

@@ -1,9 +1,9 @@
 "use client";
 import "./constants.esm.js";
 import { inactivateEmblaTransform as e, setContainerStyles as t, setSlideStyles as n, snapOnPointerUp as r } from "./utilities.esm.js";
-import i from "clsx";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
-import { useCallback as s, useEffect as c, useLayoutEffect as l, useRef as u } from "react";
+import { useCallback as i, useEffect as a, useLayoutEffect as o, useRef as s } from "react";
+import c from "clsx";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
 import d from "embla-carousel-react";
 //#region src/components/TimePicker/TimePickerWheel.tsx
 var f = (f) => {
@@ -12,11 +12,11 @@ var f = (f) => {
 		axis: "y",
 		dragFree: !0,
 		containScroll: !1
-	}), w = u(null), T = u(b);
-	l(() => {
+	}), w = s(null), T = s(b);
+	o(() => {
 		T.current = b;
 	});
-	let E = p * 20, D = g ? 0 : 20, O = s((e) => {
+	let E = p * 20, D = g ? 0 : 20, O = i((e) => {
 		t(e, (p * 20 - D) * e.scrollProgress()), e.slideNodes().forEach((t, r) => {
 			n(e, r, g, p, E);
 		});
@@ -26,32 +26,32 @@ var f = (f) => {
 		D,
 		E
 	]);
-	return c(() => {
+	return a(() => {
 		if (!C) return () => {};
 		let t = (e) => T.current?.(e.selectedScrollSnap());
 		return C.on("pointerUp", r), C.on("scroll", O), C.on("reInit", e), C.on("reInit", O), C.on("select", t), e(C), O(C), () => {
 			C.off("pointerUp", r), C.off("scroll", O), C.off("reInit", e), C.off("reInit", O), C.off("select", t);
 		};
-	}, [C, O]), c(() => {
+	}, [C, O]), a(() => {
 		!C || y === void 0 || C.selectedScrollSnap() !== y && C.scrollTo(y);
-	}, [C, y]), /* @__PURE__ */ o("div", {
-		className: i("ios-picker", { "ios-picker--disabled": x }),
+	}, [C, y]), /* @__PURE__ */ u("div", {
+		className: c("ios-picker", { "ios-picker--disabled": x }),
 		"aria-disabled": x,
-		children: [/* @__PURE__ */ a("div", {
+		children: [/* @__PURE__ */ l("div", {
 			className: "ios-picker__scene",
 			ref: w,
-			children: /* @__PURE__ */ a("div", {
+			children: /* @__PURE__ */ l("div", {
 				className: `ios-picker__viewport ios-picker__viewport--perspective-${m}`,
 				ref: S,
-				children: /* @__PURE__ */ a("div", {
+				children: /* @__PURE__ */ l("div", {
 					className: "ios-picker__container",
-					children: Array.from({ length: p }, (e, t) => /* @__PURE__ */ a("div", {
+					children: Array.from({ length: p }, (e, t) => /* @__PURE__ */ l("div", {
 						className: "ios-picker__slide",
 						children: v ? v[t] : t + _
 					}, t))
 				})
 			})
-		}), /* @__PURE__ */ a("div", {
+		}), /* @__PURE__ */ l("div", {
 			className: "ios-picker__label",
 			children: h
 		})]

package/src/components/Toggle/{Toggle2.esm.js → Toggle.esm.js}

@@ -1,6 +1,6 @@
 "use client";
-import { Input as e } from "../Input/Input2.esm.js";
-import './Toggle.css';/* empty css           */
+import { Input as e } from "../Input/Input.esm.js";
+import './Toggle.css';/* empty css                 */
 import t from "clsx";
 import { jsx as n } from "react/jsx-runtime";
 //#region src/components/Toggle/Toggle.tsx

package/src/components/Tooltip/{Tooltip2.esm.js → Tooltip.esm.js}

@@ -1,12 +1,12 @@
 "use client";
-import './Tooltip.css';/* empty css            */
-import e from "clsx";
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import { useEffect as r, useState as i } from "react";
+import './Tooltip.css';/* empty css                  */
+import { useEffect as e, useState as t } from "react";
+import n from "clsx";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
 import { autoUpdate as a, flip as o, offset as s, shift as c, useFloating as l } from "@floating-ui/react-dom";
 //#region src/components/Tooltip/Tooltip.tsx
 var u = (u) => {
-	let { showContent: d = "hover" } = u, [f, p] = i(null), [m, h] = i(null), { floatingStyles: g, placement: _ } = l({
+	let { showContent: d = "hover" } = u, [f, p] = t(null), [m, h] = t(null), { floatingStyles: g, placement: _ } = l({
 		placement: u.placement ?? "bottom-start",
 		strategy: u.strategy ?? "absolute",
 		whileElementsMounted: a,
@@ -19,8 +19,8 @@ var u = (u) => {
 			reference: f,
 			floating: m
 		}
-	}), [v, y] = i(!1);
-	return r(() => {
+	}), [v, y] = t(!1);
+	return e(() => {
 		if (!v || d !== "click") return;
 		let e = (e) => {
 			f?.contains(e.target) || m?.contains(e.target) || y(!1);
@@ -33,10 +33,10 @@ var u = (u) => {
 		d,
 		f,
 		m
-	]), /* @__PURE__ */ n("div", {
-		className: e("tooltip"),
-		children: [/* @__PURE__ */ t("div", {
-			className: e("tooltip__anchor"),
+	]), /* @__PURE__ */ i("div", {
+		className: n("tooltip"),
+		children: [/* @__PURE__ */ r("div", {
+			className: n("tooltip__anchor"),
 			ref: p,
 			onMouseEnter: () => {
 				d === "hover" && y(!0);
@@ -49,8 +49,8 @@ var u = (u) => {
 			},
 			style: u.anchorStyles,
 			children: u.anchor
-		}), v && /* @__PURE__ */ t("div", {
-			className: e("tooltip__floating"),
+		}), v && /* @__PURE__ */ r("div", {
+			className: n("tooltip__floating"),
 			ref: h,
 			"data-placement": _,
 			style: {

package/src/components/index.d.ts

@@ -1,3 +1,4 @@
+export { Accordion } from './Accordion/Accordion';
 export { Button } from './Button/Button';
 export { Input } from './Input/Input';
 export { InputPassword } from './InputPassword/InputPassword';

package/src/styles/global/components/_input.scss

@@ -2,19 +2,19 @@
 
 @layer craftsman-base {
 
-  %interactive-focus-reset {
-    &:focus {
-      outline: 0;
-      box-shadow: none;
-    }
-  }
-
   %input-base {
     color: var(--text);
     border-radius: 6px;
     border: 1px solid var(--gray400);
     padding: #{u.width("gutter", 0.5)};
     background-color: var(--white);
+    &:focus {
+      outline: 0;
+      box-shadow: none;
+    }
+    &:hover {
+        border-color: #{u.color("gray500")};
+    }
 
     &[type="number"]::-webkit-outer-spin-button,
     &[type="number"]::-webkit-inner-spin-button {
@@ -29,10 +29,9 @@
 
     &:disabled,
     &.disabled {
-      border-color: var(--gray200);
+      border-color: var(--gray400);
       background-color: var(--gray100);
     }
 
-    @extend %interactive-focus-reset;
   }
 }

package/src/styles/global/components/_select.scss

@@ -1,21 +1,16 @@
 @use "../../utilities/functions" as u;
+@use "./input";
+
 @layer craftsman-base {
     select,
     ::picker(select) {
         appearance: base-select;
-        background: #{u.color("white")};
-        color: #{u.color("text")};
-        border: 1px solid #{u.color("gray200")};
-        border-radius: 6px;
+        @extend %input-base;
+        
     }
     select {
-        padding: 10px 40px 10px 14px;
+        padding-right: 40px;
         position: relative;
-        &:hover,
-        &:focus {
-            outline: none;
-            border-color: #{u.color("gray200")};
-        }
         &:focus-visible {
             outline: none;
         }
@@ -28,25 +23,25 @@
             transition: 0.2s rotate;
             content: "";
             display: inline-block;
-            width: 10px;
-            height: 10px;
+            width: 7px;
+            height: 7px;
             border-style: solid;
             border-width: 0 2px 2px 0;
             transform: rotate(45deg);
             margin: 0px 2px 0 12px;
             position: absolute;
-            right: 16px;
-            top: 12px;
+            right: 14px;
+            top: 14px;
         }
         &:open::picker-icon {
-            margin-top: 6px;
+            margin-top: 4px;
             rotate: 180deg;
         }
         option {
             padding: #{u.width("gutter", 0.5)};
             &:hover,
             &:focus {
-                background: #{u.color("gray100")};
+                background: #{u.color("gray300")};
             }
             &::checkmark {
                 content: "";

package/src/utilities/types.d.ts

@@ -26,6 +26,7 @@ export declare const BreakpointSchema: z.ZodEnum<{
     desktopOnly: "desktopOnly";
 }>;
 export declare const LayoutWidthsSchema: z.ZodEnum<{
+    text: "text";
     gutter: "gutter";
     column: "column";
     tablet: "tablet";
@@ -34,7 +35,6 @@ export declare const LayoutWidthsSchema: z.ZodEnum<{
     mobileMax: "mobileMax";
     tabletMax: "tabletMax";
     desktopMax: "desktopMax";
-    text: "text";
 }>;
 export type BaseWidth = z.infer<typeof BaseWidthSchema>;
 export type ScreenWidth = z.infer<typeof ScreenWidthSchema>;
@@ -54,23 +54,23 @@ export declare const zTextInputType: z.ZodEnum<{
     number: "number";
     search: "search";
     month: "month";
+    time: "time";
+    image: "image";
     text: "text";
+    hidden: "hidden";
+    color: "color";
     checkbox: "checkbox";
     radio: "radio";
-    color: "color";
+    tel: "tel";
+    url: "url";
+    email: "email";
     date: "date";
+    submit: "submit";
+    reset: "reset";
     "datetime-local": "datetime-local";
-    email: "email";
     file: "file";
-    hidden: "hidden";
-    image: "image";
     password: "password";
     range: "range";
-    reset: "reset";
-    submit: "submit";
-    tel: "tel";
-    time: "time";
-    url: "url";
     week: "week";
 }>;
 export type TextInputType = z.infer<typeof zTextInputType>;
@@ -102,6 +102,7 @@ export declare const ButtonType: z.ZodEnum<{
 }>;
 export type ButtonType = z.infer<typeof ButtonType>;
 export declare const TextTags: z.ZodEnum<{
+    div: "div";
     h1: "h1";
     h2: "h2";
     h3: "h3";
@@ -109,14 +110,13 @@ export declare const TextTags: z.ZodEnum<{
     h5: "h5";
     p: "p";
     span: "span";
-    div: "div";
 }>;
 export type TextTags = z.infer<typeof TextTags>;
 export declare const TextType: z.ZodEnum<{
-    display: "display";
+    caption: "caption";
     heading: "heading";
+    display: "display";
     paragraph: "paragraph";
-    caption: "caption";
     "small-title": "small-title";
 }>;
 export type TextType = z.infer<typeof TextType>;
@@ -134,10 +134,10 @@ export declare const CarouselPageType: z.ZodEnum<{
 }>;
 export type CarouselPageType = z.infer<typeof CarouselPageType>;
 export declare const NoticeType: z.ZodEnum<{
+    none: "none";
     help: "help";
     info: "info";
     success: "success";
     error: "error";
-    none: "none";
 }>;
 export type NoticeType = z.infer<typeof NoticeType>;

package/src/components/DatePicker/DatePicker2.esm.js

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