@stamcat/craftsman 0.0.23-alpha.9 → 0.0.23

package/AGENTS.md

@@ -10,8 +10,12 @@ Use these imports:
 
 ```tsx
 import { Button } from "@stamcat/craftsman/Button";
+import { Checkbox } from "@stamcat/craftsman/Checkbox";
 import { Input } from "@stamcat/craftsman/Input";
+import { InputPassword } from "@stamcat/craftsman/InputPassword";
 import { Loader } from "@stamcat/craftsman/Loader";
+import { Modal } from "@stamcat/craftsman/Modal";
+import { RadioButton } from "@stamcat/craftsman/RadioButton";
 ```
 
 Do not assume a root export like `@stamcat/craftsman` unless that export is explicitly added to package `exports`.
@@ -37,12 +41,25 @@ Props:
 
 - Inherits all native `<button>` props.
 - `variant?: "primary" | "default" | "text"` (default: `"default"`)
-- `styles?: SerializedStyles` (Emotion override)
+- `size?: number` (default visual scale is `1`)
+- `styles?: React.CSSProperties` (inline style override)
 
 Behavior notes:
 
 - `type` defaults to `"button"`.
 - For `variant !== "default"`, variant is appended to `className` (for example `"primary"`).
+- Theme class merge: if `theme.components.button` is a string, it is appended to the class list.
+- `className` is preserved and merged after variant/theme classes.
+- If `children` is empty (per `isEmpty`), the component renders nothing.
+- `size` is clamped to `[0.1, 10]` before styling is applied.
+- When `size` is provided, Button scales:
+  - `border-radius: calc(var(--btn-border-radius) * size)`
+  - `padding: calc(var(--btn-pad-y) * size) calc(var(--btn-pad-x) * size)`
+  - `font-size: max(10px, calc(var(--w-text) * size))`
+- There is no dedicated icon/loading prop. Icons, loaders, and mixed content are passed as `children`.
+- Supports both real disable (`disabled={true}`) and style-only disable (`className="disabled"`).
+- Native button modes are supported (`type="button" | "submit" | "reset"`).
+- Accessibility props such as `aria-label` pass through unchanged.
 
 Example:
 
@@ -50,6 +67,33 @@ Example:
 <Button variant="primary" onClick={onSave}>Save</Button>
 ```
 
+Story-aligned usage examples:
+
+```tsx
+// Scaled compact button (size is clamped to [0.1, 10])
+<Button variant="primary" size={0.5}>Mini Action</Button>
+
+// Icon content
+<Button variant="primary">
+  <TruckIcon size={20} /> <span>Ship</span>
+</Button>
+
+// Loading content
+<Button aria-label="Saving">
+  <Loader type="boxy" width={32} color="#de13ca" />
+</Button>
+
+// Style-only disabled appearance while still allowing click handlers
+<Button className="disabled" onClick={onClick}>Disabled Look</Button>
+
+// Native submit behavior
+<Button type="submit" aria-label="Save form">Save</Button>
+```
+
+Implementation caution:
+
+- Size scaling depends on CSS variables provided by the package global styles (`--btn-border-radius`, `--btn-pad-y`, `--btn-pad-x`, `--w-text`).
+
 ### Input
 
 Import:
@@ -60,7 +104,19 @@ import { Input } from "@stamcat/craftsman/Input";
 
 Props:
 
-- Pure passthrough of native `<input>` props.
+- Inherits native `<input>` props.
+- `label?: string | ReactNode`
+- `labelPosition?: "top" | "left" | "bottom" | "right" | "inside" | "hidden"` (default: `"top"`)
+- `error?: string | boolean | ReactNode`
+- `required?: boolean`
+- `styles?: React.CSSProperties` (wrapper override)
+- `type?: TextInputType` (checkbox/radio excluded)
+
+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`.
 
 Example:
 
@@ -68,6 +124,160 @@ Example:
 <Input type="email" placeholder="you@company.com" required />
 ```
 
+### InputPassword
+
+Import:
+
+```tsx
+import { InputPassword } from "@stamcat/craftsman/InputPassword";
+```
+
+Props:
+
+- Extends `Input` props, with `type` constrained to password mode.
+- Includes all label, error, required, and wrapper style props from `Input`.
+
+Behavior notes:
+
+- Built on top of `Input` and adds an internal password visibility state.
+- Renders an in-field show/hide toggle button.
+- Toggle is accessible: real button element, keyboard operable, and updates `aria-label` + `aria-pressed`.
+- Use this component for password fields instead of `Input type="password"`.
+
+Example:
+
+```tsx
+<InputPassword
+  label="Password"
+  placeholder="Enter your password"
+  autoComplete="current-password"
+/>
+```
+
+### Checkbox
+
+Import:
+
+```tsx
+import { Checkbox } from "@stamcat/craftsman/Checkbox";
+```
+
+Props:
+
+- Extends `Input` props.
+- `type?: "checkbox"` (default: `"checkbox"`)
+- `labelPosition?: "left" | "right" | "top" | "bottom"` (default: `"right"`)
+
+Behavior notes:
+
+- `Checkbox` is a thin wrapper around `Input` with checkbox-specific guardrails.
+- The wrapper enforces checkbox type by default and narrows label position options to common checkbox layouts.
+- Controlled and uncontrolled patterns are both supported (`checked` + `onChange`, or `defaultChecked`).
+
+Example:
+
+```tsx
+<Checkbox
+  id="accept-terms"
+  name="terms"
+  value="accepted"
+  label="Accept terms"
+  checked={accepted}
+  onChange={(event) => setAccepted(event.currentTarget.checked)}
+/>
+```
+
+### RadioButton
+
+Import:
+
+```tsx
+import { RadioButton } from "@stamcat/craftsman/RadioButton";
+```
+
+Props:
+
+- Extends `Input` props.
+- `type?: "radio"` (default: `"radio"`)
+- `labelPosition?: "left" | "right"` (default: `"right"`)
+
+Behavior notes:
+
+- `RadioButton` is a thin wrapper around `Input` with radio-specific guardrails.
+- Group behavior is native HTML radio behavior: use a shared `name` across options.
+- Controlled and uncontrolled patterns are both supported (`checked` + `onChange`, or `defaultChecked`).
+
+Example:
+
+```tsx
+<>
+  <RadioButton
+    id="captain-kirk"
+    name="favorite-captain"
+    value="Kirk"
+    label="James T. Kirk"
+    checked={selected === "Kirk"}
+    onChange={(event) => setSelected(event.currentTarget.value)}
+  />
+  <RadioButton
+    id="captain-picard"
+    name="favorite-captain"
+    value="Picard"
+    label="Jean-Luc Picard"
+    checked={selected === "Picard"}
+    onChange={(event) => setSelected(event.currentTarget.value)}
+  />
+</>
+```
+
+### Modal
+
+Import:
+
+```tsx
+import { Modal } from "@stamcat/craftsman/Modal";
+```
+
+Props:
+
+- Inherits all native `<div>` props.
+- `visible?: boolean` (when falsy, component renders nothing)
+- `onDismiss?: () => void`
+- `type?: "dialog" | "panel"` (default: `"dialog"`)
+- `header?: string | React.ReactNode`
+- `backgroundDismiss?: boolean` (default behavior: `true`)
+- `hideDismissIcon?: boolean` (default behavior: close icon is shown)
+- `footer?: React.ReactNode`
+- `styles?: React.CSSProperties` (applies to outer modal wrapper)
+
+Behavior notes:
+
+- Modal is controlled; parent owns open/close state via `visible` and `onDismiss`.
+- Close icon and background click both dismiss through `onDismiss`.
+- Background dismiss only runs when `backgroundDismiss` is `true` or `undefined`.
+- Dismiss uses a short close animation before calling `onDismiss` (~280ms timeout).
+- `type="dialog"` renders centered responsive dialog sizing; `type="panel"` renders a right-side panel.
+- `footer` is rendered in an action row container below modal content.
+
+Example:
+
+```tsx
+const [open, setOpen] = useState(false);
+
+<>
+  <Button variant="primary" onClick={() => setOpen(true)}>Open</Button>
+  <Modal
+    visible={open}
+    onDismiss={() => setOpen(false)}
+    type="dialog"
+    header="Confirm Action"
+    footer={<><Button onClick={() => setOpen(false)}>Cancel</Button><Button variant="primary">Confirm</Button></>}
+  >
+    <p>Are you sure?</p>
+  </Modal>
+</>
+```
+
 ### Loader
 
 Import:
@@ -92,7 +302,7 @@ Props:
   - `"factory"`
 - `color?: string` (default: `"black"`)
 - `width?: number` (optional, variant-dependent default behavior)
-- `styles?: SerializedStyles` (Emotion override)
+- `styles?: React.CSSProperties` (inline style override)
 
 Example:
 
@@ -102,7 +312,7 @@ Example:
 
 ## Styling Expectations
 
-- Components are built with Emotion and class-based variant hooks.
+- Components are built with SCSS modules and class-based variant hooks.
 - If your app does not include this package's global CSS variable setup, visual output may differ.
 - Agents should avoid hard-coding assumptions about token names beyond what the consumer app already defines.
 
@@ -151,12 +361,12 @@ if (arr.length === 0) { ... }
 
 1. README is minimal; treat this guide as the source of truth for agent usage.
 2. Theme utilities exist in source but are not guaranteed public package exports.
-3. Additional components in source (for example `Progress`) may not yet be exported.
+3. `Progress` exists in source but is incomplete and intentionally omitted from this guide for now.
 
 ## Safe Fallback Strategy for Agents
 
 If uncertain about available exports:
 
-1. Use only `Button`, `Input`, and `Loader` from their component entry points.
+1. Use only `Button`, `Checkbox`, `Input`, `InputPassword`, `Loader`, `Modal`, and `RadioButton` from their component entry points.
 2. Do not invent package APIs.
 3. Prefer native HTML elements for anything not explicitly exported.

package/Components.d.ts

@@ -0,0 +1,2 @@
+export * from './src/components/index.js'
+export {}

package/Components.esm.js

@@ -1,5 +1,20 @@
-import { Button as e } from "./src/components/Button.esm.js";
-import { Input as t } from "./src/components/Input.esm.js";
-import { Loader as n } from "./src/components/Loader.esm.js";
-import { Modal as r } from "./src/components/Modal.esm.js";
-export { e as Button, t as Input, n as Loader, r as Modal };
+import { __exportAll as e } from "./_virtual/_rolldown/runtime.esm.js";
+import { Button as t } from "./src/components/Button.esm.js";
+import { Input as n } from "./src/components/Input.esm.js";
+import { InputPassword as r } from "./src/components/InputPassword.esm.js";
+import { Loader as i } from "./src/components/Loader.esm.js";
+import { RadioButton as a } from "./src/components/RadioButton.esm.js";
+import { Checkbox as o } from "./src/components/Checkbox.esm.js";
+import { Modal as s } from "./src/components/Modal.esm.js";
+//#region src/components/index.ts
+var c = /* @__PURE__ */ e({
+	Button: () => t,
+	Checkbox: () => o,
+	Input: () => n,
+	InputPassword: () => r,
+	Loader: () => i,
+	Modal: () => s,
+	RadioButton: () => a
+});
+//#endregion
+export { t as Button, o as Checkbox, n as Input, r as InputPassword, i as Loader, s as Modal, a as RadioButton, c as components_exports };

package/Styles.d.ts

@@ -0,0 +1,2 @@
+export * from './src/styles/index.js'
+export {}

package/Styles.esm.js

@@ -0,0 +1,8 @@
+import { defaultColors as e, defaultWidths as t } from "./src/styles/utilities/constants.esm.js";
+import { color as n, colors as r, hexToRgba as i } from "./src/styles/utilities/color.esm.js";
+import { BaseWidthSchema as a, BreakpointSchema as o, LayoutWidthsSchema as s, MaxScreenWidthSchema as c, ScreenWidthSchema as l, zLabelPosition as u, zTextInputExclusions as d, zTextInputType as f, zTextInputTypes as p } from "./src/styles/utilities/types.esm.js";
+import { breakpoint as m, media as h, width as g, widths as _ } from "./src/styles/utilities/layout.esm.js";
+import { themeBuilder as v } from "./src/styles/theme/theme.esm.js";
+import { globalStyles as y } from "./src/styles/global/globalStyles.esm.js";
+import { ThemeProvider as b } from "./src/styles/components/ThemeProvider.esm.js";
+export { a as BaseWidthSchema, o as BreakpointSchema, s as LayoutWidthsSchema, c as MaxScreenWidthSchema, l as ScreenWidthSchema, b as ThemeProvider, m as breakpoint, n as color, r as colors, e as defaultColors, t as defaultWidths, y as globalStyles, i as hexToRgba, h as media, v as themeBuilder, g as width, _ as widths, u as zLabelPosition, d as zTextInputExclusions, f as zTextInputType, p as zTextInputTypes };

package/Utilities.d.ts

@@ -0,0 +1,2 @@
+export * from './src/utilities/index.js'
+export {}

package/Utilities.esm.js

@@ -0,0 +1,2 @@
+import { isEmpty as e, validateEmail as t } from "./src/utilities/validations.esm.js";
+export { e as isEmpty, t as validateEmail };

package/_virtual/_rolldown/runtime.esm.js

@@ -0,0 +1,11 @@
+//#region \0rolldown/runtime.js
+var e = Object.defineProperty, t = (t, n) => {
+	let r = {};
+	for (var i in t) e(r, i, {
+		get: t[i],
+		enumerable: !0
+	});
+	return n || e(r, Symbol.toStringTag, { value: "Module" }), r;
+};
+//#endregion
+export { t as __exportAll };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stamcat/craftsman",
-  "version": "0.0.23-alpha.9",
+  "version": "0.0.23",
   "type": "module",
   "description": "A powerful, lightweight framework for design systems",
   "repository": {
@@ -16,17 +16,15 @@
   "bugs": {
     "url": "https://github.com/Stamcat/craftsman/issues"
   },
-  "types": "index.d.ts",
-  "main": "index.js",
+  "types": "./src/components/index.d.ts",
+  "main": "./Components.esm.js",
   "homepage": "https://github.com/Stamcat/craftsman#readme",
   "scripts": {
     "prepublishOnly": "node ./scripts/prepublishCheck.js"
   },
   "dependencies": {
-    "@emotion/react": "11.14.0",
-    "@emotion/styled": "11.14.1",
-    "dompurify": "3.4.11",
-    "emotion": "11.0.0",
+    "clsx": "2.1.1",
+    "dompurify": "3.4.12",
     "react": "19.2.7",
     "react-date-picker": "12.0.2",
     "react-datetime-picker": "7.0.2",
@@ -35,25 +33,54 @@
     "react-international-phone": "4.8.0",
     "react-toastify": "11.1.0",
     "sass-embedded": "1.100.0",
+    "typescript-plugin-css-modules": "5.2.0",
     "zod": "4.4.3"
   },
   "devDependencies": {},
+  "overrides": {
+    "postcss": "8.5.20",
+    "sharp": "0.35.3"
+  },
   "exports": {
+    ".": {
+      "types": "./src/components/index.d.ts",
+      "default": "./Components.esm.js"
+    },
+    "./styles": {
+      "types": "./src/styles/index.d.ts",
+      "default": "./Styles.esm.js"
+    },
+    "./utilities": {
+      "types": "./src/utilities/index.d.ts",
+      "default": "./Utilities.esm.js"
+    },
     "./Button": {
-      "types": "./Button.d.ts",
-      "default": "./Button.es.js"
+      "types": "./src/components/Button.d.ts",
+      "default": "./src/components/Button.esm.js"
     },
     "./Input": {
-      "types": "./Input.d.ts",
-      "default": "./Input.es.js"
+      "types": "./src/components/Input.d.ts",
+      "default": "./src/components/Input.esm.js"
+    },
+    "./InputPassword": {
+      "types": "./src/components/InputPassword.d.ts",
+      "default": "./src/components/InputPassword.esm.js"
     },
     "./Loader": {
-      "types": "./Loader.d.ts",
-      "default": "./Loader.es.js"
+      "types": "./src/components/Loader.d.ts",
+      "default": "./src/components/Loader.esm.js"
+    },
+    "./RadioButton": {
+      "types": "./src/components/RadioButton.d.ts",
+      "default": "./src/components/RadioButton.esm.js"
+    },
+    "./Checkbox": {
+      "types": "./src/components/Checkbox.d.ts",
+      "default": "./src/components/Checkbox.esm.js"
     },
     "./Modal": {
-      "types": "./Modal.d.ts",
-      "default": "./Modal.es.js"
+      "types": "./src/components/Modal.d.ts",
+      "default": "./src/components/Modal.esm.js"
     }
   }
 }

package/{components → src/components}/Button.d.ts

@@ -1,7 +1,7 @@
-import { SerializedStyles } from '@emotion/react';
 import { ButtonType } from '../styles/global/components/button';
 export type ButtonProps = React.ComponentProps<"button"> & {
     variant?: ButtonType;
-    styles?: SerializedStyles;
+    size?: number;
+    styles?: React.CSSProperties;
 };
 export declare const Button: React.FC<ButtonProps>;

package/src/components/Button.esm.js

@@ -1,20 +1,27 @@
-import { useTheme as e } from "@emotion/react";
-import t from "@emotion/styled";
-import { jsx as n } from "react/jsx-runtime";
+import { clsx as e } from "../../node_modules/clsx/dist/clsx.esm.js";
+import { isEmpty as t } from "../utilities/validations.esm.js";
+import { width as n } from "../styles/utilities/layout.esm.js";
+import "../../Styles.esm.js";
+import r from "./Button.module.esm.js";
+import { Fragment as i, jsx as a } from "react/jsx-runtime";
 //#region src/components/Button.tsx
-var r = t.button`
-    ${(e) => e.styles}
-`, i = (t) => {
-	let { type: i = "button", variant: a = "default", className: o, ...s } = t, c = e(), l = typeof c?.components?.button == "string" ? c.components.button : void 0;
-	return /* @__PURE__ */ n(r, {
-		type: i,
-		className: [
-			a === "default" ? void 0 : a,
-			l,
-			o
-		].filter(Boolean).join(" ") || void 0,
-		...s
+var o = (o) => {
+	let { type: s = "button", variant: c = "default", size: l, styles: u, className: d, style: f, ...p } = o, m = typeof l == "number" ? Math.min(10, Math.max(.1, l)) : void 0, h = t(u) ? void 0 : u, g = m ? {
+		borderRadius: `calc(var(--btn-border-radius) * ${m})`,
+		padding: `calc(var(--btn-pad-y) * ${m}) calc(var(--btn-pad-x) * ${m})`,
+		fontSize: `max(10px, calc(${n("text")} * ${m}))`
+	} : {};
+	return t(o.children) ? /* @__PURE__ */ a(i, {}) : /* @__PURE__ */ a("button", {
+		type: s,
+		"data-variant": c,
+		className: e(r.button, "button", d),
+		style: {
+			...g,
+			...h,
+			...f
+		},
+		...p
 	});
 };
 //#endregion
-export { i as Button };
+export { o as Button };

package/src/components/Button.module.css

@@ -0,0 +1 @@
+._text_1l9fp_1._button_1l9fp_1,[data-variant=text]._button_1l9fp_1{color:var(--blue500);background:0 0;border:none;padding:0}._text_1l9fp_1._button_1l9fp_1:not(:disabled):not(._disabled_1l9fp_7):hover,[data-variant=text]._button_1l9fp_1:not(:disabled):not(._disabled_1l9fp_7):hover{color:var(--teal700);cursor:pointer;background-color:#0000;text-decoration:underline}._button_1l9fp_1{--btn-pad-y:calc(var(--w-gutter,16px) * .5);--btn-pad-x:calc(var(--w-gutter,16px) * .75);--btn-border-radius:calc(var(--w-gutter,16px) * .75);color:var(--blue600);cursor:pointer;padding:var(--btn-pad-y) var(--btn-pad-x);border-radius:var(--btn-border-radius);border:none;border:1px solid var(--blue500);background-color:var(--white);flex-flow:wrap;align-items:center;font-weight:500;transition:all .125s;display:inline-flex}._button_1l9fp_1:not(:disabled):not(._disabled_1l9fp_7):hover{background-color:var(--teal200)}._button_1l9fp_1:disabled,._disabled_1l9fp_7._button_1l9fp_1{cursor:not-allowed;border-color:var(--gray200);color:var(--gray400)}._button_1l9fp_1:disabled._primary_1l9fp_39,._button_1l9fp_1:disabled[data-variant=primary],._disabled_1l9fp_7._primary_1l9fp_39._button_1l9fp_1,._disabled_1l9fp_7[data-variant=primary]._button_1l9fp_1{border-color:var(--gray200);background-color:var(--gray400);color:var(--gray200)}._primary_1l9fp_39._button_1l9fp_1,[data-variant=primary]._button_1l9fp_1{color:var(--white);background-color:var(--blue500)}._primary_1l9fp_39._button_1l9fp_1:not(:disabled):not(._disabled_1l9fp_7):hover,[data-variant=primary]._button_1l9fp_1:not(:disabled):not(._disabled_1l9fp_7):hover{background-color:var(--blue700)}

package/src/components/Button.module.esm.js

@@ -0,0 +1,9 @@
+import './Button.module.css';//#region src/components/Button.module.scss
+var e = "_text_1l9fp_1", t = "_button_1l9fp_1", n = "_disabled_1l9fp_7", r = "_primary_1l9fp_39", i = {
+	text: e,
+	button: t,
+	disabled: n,
+	primary: r
+};
+//#endregion
+export { t as button, i as default, n as disabled, r as primary, e as text };

package/src/components/Button.module.scss

@@ -0,0 +1,5 @@
+@use "../styles/global/components/button";
+
+.button {
+  @extend %button-styles;
+}

package/src/components/Checkbox.d.ts

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

package/src/components/Checkbox.esm.js

@@ -0,0 +1,10 @@
+import { Input as e } from "./Input.esm.js";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/components/Checkbox.tsx
+var n = ({ type: n = "checkbox", labelPosition: r = "right", ...i }) => /* @__PURE__ */ t(e, {
+	type: n,
+	labelPosition: r,
+	...i
+});
+//#endregion
+export { n as Checkbox };

package/src/components/Input.d.ts

@@ -0,0 +1,11 @@
+import { LabelPosition, TextInputType } from '../styles/utilities/types';
+export type InputProps = React.ComponentProps<"input"> & {
+    label?: string | React.ReactNode;
+    labelPosition?: LabelPosition;
+    error?: string | boolean | React.ReactNode;
+    required?: boolean;
+    styles?: React.CSSProperties;
+    endAdornment?: React.ReactNode;
+    type?: TextInputType;
+};
+export declare const Input: React.FC<InputProps>;

package/src/components/Input.esm.js

@@ -1,5 +1,40 @@
-import { jsx as e } from "react/jsx-runtime";
+import { clsx as e } from "../../node_modules/clsx/dist/clsx.esm.js";
+import { isEmpty as t } from "../utilities/validations.esm.js";
+import n from "./Input.module.esm.js";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { useId as a } from "react";
 //#region src/components/Input.tsx
-var t = (t) => /* @__PURE__ */ e("input", { ...t });
+var o = ({ label: o, id: s, labelPosition: c = "top", required: l = !1, type: u = "text", error: d, styles: f, className: p, style: m, endAdornment: h, ...g }) => {
+	let _ = a(), v = s || _, y = !t(g.value) || !t(g.defaultValue), b = t(f) ? void 0 : f, x = /* @__PURE__ */ i("span", {
+		className: n.inputField,
+		"data-has-end-adornment": !t(h),
+		children: [/* @__PURE__ */ r("input", {
+			id: v,
+			type: u,
+			className: n.input,
+			...g
+		}), !t(h) && /* @__PURE__ */ r("span", {
+			className: n.inputAdornment,
+			children: h
+		})]
+	});
+	return /* @__PURE__ */ i("div", {
+		"data-label-position": c,
+		"data-required": l,
+		"data-has-input": y,
+		className: e(n.wrapper, p),
+		style: {
+			...b,
+			...m
+		},
+		children: [t(o) ? x : /* @__PURE__ */ i("label", { children: [c !== "hidden" && /* @__PURE__ */ r("div", {
+			className: n.inputLabel,
+			children: o
+		}), x] }), !t(d) && /* @__PURE__ */ r("div", {
+			className: n.error,
+			children: d
+		})]
+	});
+};
 //#endregion
-export { t as Input };
+export { o as Input };

package/src/components/Input.module.css

@@ -0,0 +1 @@
+._wrapper_h3ihm_1[data-label-position=inside]{--react-international-phone-height:50px;--react-international-phone-border-radius:8px;--react-international-phone-border-color:silver;position:relative}._wrapper_h3ihm_1[data-label-position=inside]:focus-within ._inputLabel_h3ihm_8,._wrapper_h3ihm_1[data-label-position=inside][data-has-input=true] ._inputLabel_h3ihm_8{top:-.5rem;left:calc(var(--w-gutter,16px) * .25);font-size:calc(var(--w-text,14px) * .75)}._wrapper_h3ihm_1[data-label-position=inside]:has(._input_h3ihm_8:not(:placeholder-shown)) ._inputLabel_h3ihm_8{top:-.5rem;left:calc(var(--w-gutter,16px) * .25);font-size:calc(var(--w-text,14px) * .75)}._wrapper_h3ihm_1[data-label-position=inside]:has(._input_h3ihm_8:-webkit-autofill) ._inputLabel_h3ihm_8{top:-.5rem;left:calc(var(--w-gutter,16px) * .25);font-size:calc(var(--w-text,14px) * .75)}._wrapper_h3ihm_1 label ._inputLabel_h3ihm_8{margin-bottom:calc(var(--w-gutter,16px) * .25)}._wrapper_h3ihm_1[data-required=true] label ._inputLabel_h3ihm_8:after{content:"*";color:var(--red700)}._wrapper_h3ihm_1[data-label-position=left] label{align-items:center;display:inline-flex}._wrapper_h3ihm_1[data-label-position=left] label ._inputLabel_h3ihm_8{width:fit-content;margin-right:calc(var(--w-gutter,16px) * .75)}._wrapper_h3ihm_1[data-label-position=bottom] label{flex-direction:column-reverse;align-items:flex-start;display:inline-flex}._wrapper_h3ihm_1[data-label-position=bottom] label ._inputLabel_h3ihm_8{margin-bottom:0;margin-top:calc(var(--w-gutter,16px) * .25)}._wrapper_h3ihm_1[data-label-position=right] label{flex-direction:row-reverse;align-items:baseline;display:inline-flex}._wrapper_h3ihm_1[data-label-position=right] label ._inputLabel_h3ihm_8{margin-left:calc(var(--w-gutter,16px) * .25);margin-bottom:0}._wrapper_h3ihm_1[data-label-position=inside] ._inputLabel_h3ihm_8{background-color:var(--white);z-index:1;width:fit-content;top:calc(var(--w-gutter,16px) * .25);left:calc(var(--w-gutter,16px) * .25);pointer-events:none;padding:0 5px;transition:top .15s,left .15s,font-size .15s,color .15s;position:absolute}._wrapper_h3ihm_1[data-label-position=inside]>label>._inputField_h3ihm_58>._input_h3ihm_8,._wrapper_h3ihm_1[data-label-position=inside]>._input_h3ihm_8{transition:border-color .2s}._wrapper_h3ihm_1[data-label-position=inside]:focus-within ._inputLabel_h3ihm_8{color:var(--blue500)}._wrapper_h3ihm_1[data-label-position=inside]:focus-within ._input_h3ihm_8{border-color:var(--blue500)}._wrapper_h3ihm_1[data-label-position=inside]:focus-within ._input_h3ihm_8::placeholder{opacity:1}._wrapper_h3ihm_1[data-label-position=inside] ._input_h3ihm_8[type=tel]{width:100%}._wrapper_h3ihm_1[data-label-position=inside] ._input_h3ihm_8::placeholder{opacity:0;transition:opacity .2s}._inputField_h3ihm_58{align-items:center;display:inline-flex;position:relative}._inputField_h3ihm_58[data-has-end-adornment=true]>._input_h3ihm_8{width:100%;padding-right:calc(var(--w-gutter,16px) * .5 + 24px + var(--w-gutter,16px) * .5)}._inputAdornment_h3ihm_89{right:calc(var(--w-gutter,16px) * .5);z-index:1;align-items:center;margin-top:0;display:inline-flex;position:absolute;top:50%;transform:translateY(-50%)}._error_h3ihm_100{margin-top:calc(var(--w-gutter,16px) * .25);font-size:calc(var(--w-text,14px) * .75);color:var(--red600)}

package/src/components/Input.module.esm.js

@@ -0,0 +1,11 @@
+import './Input.module.css';//#region src/components/Input.module.scss
+var e = "_wrapper_h3ihm_1", t = "_inputLabel_h3ihm_8", n = "_input_h3ihm_8", r = "_inputField_h3ihm_58", i = "_inputAdornment_h3ihm_89", a = "_error_h3ihm_100", o = {
+	wrapper: e,
+	inputLabel: t,
+	input: n,
+	inputField: r,
+	inputAdornment: i,
+	error: a
+};
+//#endregion
+export { o as default, a as error, n as input, i as inputAdornment, r as inputField, t as inputLabel, e as wrapper };