@stamcat/craftsman 0.0.23-alpha.25 → 0.0.23-alpha.28

package/AGENTS.md

@@ -10,9 +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`.
@@ -101,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?: SerializedStyles` (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:
 
@@ -109,6 +124,112 @@ 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:
@@ -246,6 +367,6 @@ if (arr.length === 0) { ... }
 
 If uncertain about available exports:
 
-1. Use only `Button`, `Input`, `Loader`, and `Modal` 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.esm.js

@@ -1,14 +1,20 @@
 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 { Loader as r } from "./src/components/Loader.esm.js";
-import { Modal as i } from "./src/components/Modal.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 a = /* @__PURE__ */ e({
+var c = /* @__PURE__ */ e({
 	Button: () => t,
+	Checkbox: () => o,
 	Input: () => n,
-	Loader: () => r,
-	Modal: () => i
+	InputPassword: () => r,
+	Loader: () => i,
+	Modal: () => s,
+	RadioButton: () => a
 });
 //#endregion
-export { t as Button, n as Input, r as Loader, i as Modal, a as components_exports };
+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.esm.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stamcat/craftsman",
-  "version": "0.0.23-alpha.25",
+  "version": "0.0.23-alpha.28",
   "type": "module",
   "description": "A powerful, lightweight framework for design systems",
   "repository": {
@@ -25,7 +25,7 @@
   "dependencies": {
     "@emotion/react": "11.14.0",
     "@emotion/styled": "11.14.1",
-    "dompurify": "3.4.11",
+    "dompurify": "3.4.12",
     "emotion": "11.0.0",
     "react": "19.2.7",
     "react-date-picker": "12.0.2",
@@ -39,7 +39,8 @@
   },
   "devDependencies": {},
   "overrides": {
-    "postcss": "8.5.20"
+    "postcss": "8.5.20",
+    "sharp": "0.35.3"
   },
   "exports": {
     ".": {
@@ -66,10 +67,22 @@
       "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": "./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": "./src/components/Modal.d.ts",
       "default": "./src/components/Modal.esm.js"

package/src/components/Button.esm.js

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

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

@@ -1,2 +1,12 @@
-export type InputProps = React.ComponentProps<"input">;
+import { SerializedStyles } from '@emotion/react';
+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?: SerializedStyles;
+    endAdornment?: React.ReactNode;
+    type?: TextInputType;
+};
 export declare const Input: React.FC<InputProps>;

package/src/components/Input.esm.js

@@ -1,5 +1,86 @@
-import { jsx as e } from "react/jsx-runtime";
+import { isEmpty as e } from "../utilities/validations.esm.js";
+import { color as t } from "../styles/utilities/color.esm.js";
+import { width as n } from "../styles/utilities/layout.esm.js";
+import { inputErrorStyles as r, inputFieldAdornmentStyles as i, insideLabelStyles as a } from "../styles/global/components/input.esm.js";
+import { css as o } from "@emotion/react";
+import s from "@emotion/styled";
+import { useId as c } from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
 //#region src/components/Input.tsx
-var t = (t) => /* @__PURE__ */ e("input", { ...t });
+var d = (e, r) => o`
+    label {
+        .input-label {
+            margin-bottom: ${n("gutter", .25)};
+            ${r && o`
+                ::after {
+                    content: "*";
+                    color: ${t("red700")};
+                }
+            `}
+        }
+    }
+
+    &[data-label-position="left"] label {
+        display: inline-flex;
+        align-items: center;
+        .input-label {
+            width: fit-content;
+            margin-right: ${n("gutter", .75)};
+        }
+    }
+
+    &[data-label-position="bottom"] label {
+        display: inline-flex;
+        flex-direction: column-reverse;
+        align-items: flex-start;
+        .input-label {
+            margin-bottom: 0;
+            margin-top: ${n("gutter", .25)};
+        }
+    }
+
+    &[data-label-position="right"] label {
+        display: inline-flex;
+        flex-direction: row-reverse;
+        align-items: center;
+        .input-label {
+            margin-left: ${n("gutter", .75)};
+        }
+    }
+
+    &[data-label-position="inside"] {
+        ${a(e)}
+    }
+`, f = s.div`
+    ${(e) => d(e.hasInput, e.required)}
+    ${(e) => e.hasEndAdornment && i}
+    ${(e) => e.styles}
+`, p = s.div`
+    ${r}
+`, m = ({ label: t, id: n, labelPosition: r = "top", required: i = !1, type: a = "text", error: o, styles: s, endAdornment: d, ...m }) => {
+	let h = c(), g = n || h, _ = !e(m.value) || !e(m.defaultValue), v = /* @__PURE__ */ u("span", {
+		className: "input-field",
+		"data-has-end-adornment": !e(d),
+		children: [/* @__PURE__ */ l("input", {
+			id: g,
+			type: a,
+			...m
+		}), !e(d) && /* @__PURE__ */ l("span", {
+			className: "input-adornment",
+			children: d
+		})]
+	});
+	return /* @__PURE__ */ u(f, {
+		"data-label-position": r,
+		hasEndAdornment: !e(d),
+		required: i,
+		hasInput: _,
+		styles: s,
+		children: [e(t) ? v : /* @__PURE__ */ u("label", { children: [r !== "hidden" && /* @__PURE__ */ l("div", {
+			className: "input-label",
+			children: t
+		}), v] }), !e(o) && /* @__PURE__ */ l(p, { children: o })]
+	});
+};
 //#endregion
-export { t as Input };
+export { m as Input };

package/src/components/InputPassword.d.ts

@@ -0,0 +1,6 @@
+import { TextInputType } from '../styles/utilities/types';
+import { InputProps } from './Input';
+export type InputPasswordProps = React.ComponentProps<"input"> & {} & Omit<InputProps, "type" | "endAdornment"> & {
+    type?: Extract<TextInputType, "password">;
+};
+export declare const InputPassword: React.FC<InputPasswordProps>;

package/src/components/InputPassword.esm.js

@@ -0,0 +1,33 @@
+import { Button as e } from "./Button.esm.js";
+import { Input as t } from "./Input.esm.js";
+import { css as n } from "@emotion/react";
+import { useState as r } from "react";
+import { jsx as i } from "react/jsx-runtime";
+import { ImEye as a, ImEyeBlocked as o } from "react-icons/im";
+//#region src/components/InputPassword.tsx
+var s = n`
+    padding: 0;
+    display: inline-flex;
+    align-items: center;
+    line-height: 1;
+`, c = ({ visible: t, onToggle: n }) => /* @__PURE__ */ i(e, {
+	type: "button",
+	variant: "text",
+	onClick: n,
+	"aria-label": t ? "Hide password" : "Show password",
+	"aria-pressed": t,
+	styles: s,
+	children: i(t ? a : o, { size: 16 })
+}), l = ({ type: e = "password", ...n }) => {
+	let [a, o] = r(!1), s = a ? "text" : e;
+	return /* @__PURE__ */ i(t, {
+		...n,
+		type: s,
+		endAdornment: /* @__PURE__ */ i(c, {
+			visible: a,
+			onToggle: () => o((e) => !e)
+		})
+	});
+};
+//#endregion
+export { l as InputPassword };

package/src/components/Modal.esm.js

@@ -1,41 +1,41 @@
-import { Button as e } from "./Button.esm.js";
-import { breakpoint as t } from "../styles/utilities/layout.esm.js";
-import { color as n } from "../styles/utilities/color.esm.js";
-import { css as r, keyframes as i } from "@emotion/react";
-import a from "@emotion/styled";
-import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
-import l from "react";
-import { LuX as u } from "react-icons/lu";
+import { color as e } from "../styles/utilities/color.esm.js";
+import { breakpoint as t, width as n } from "../styles/utilities/layout.esm.js";
+import { Button as r } from "./Button.esm.js";
+import { css as i, keyframes as a } from "@emotion/react";
+import o from "@emotion/styled";
+import s from "react";
+import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
+import { LuX as d } from "react-icons/lu";
 //#region src/components/Modal.tsx
-var d = i`
+var f = a`
   from {
     opacity: 0;
   }
   to {
     opacity: 1;
   }
-`, f = i`
+`, p = a`
   from {
     opacity: 1;
   }
   to {
     opacity: 0;
   }
-`, p = i`
+`, m = a`
   from {
     transform: translateY(100%);
   }
   to {
     transform: translateY(0);
   }
-`, m = i`
+`, h = a`
   from {
     transform: translateY(0);
   }
   to {
     transform: translateY(100%);
   }
-`, h = a.div`
+`, g = o.div`
     position: fixed;
     width: 100%;
     height: 100%;
@@ -48,9 +48,9 @@ var d = i`
     justify-content: center;
     align-items: center;
     ${(e) => e.styles}
-`, g = a.div`
+`, _ = o.div`
     background-color: rgba(0, 0, 0, 0.5);
-    animation: ${(e) => e.isClosing ? f : d} 0.3s ease-in-out;
+    animation: ${(e) => e.isClosing ? p : f} 0.3s ease-in-out;
     animation-fill-mode: forwards;
      position: fixed;
     width: 100%;
@@ -60,60 +60,63 @@ var d = i`
     right: 0;
     bottom: 0;
     z-index: 1001;
-`, _ = r`
+`, v = i`
     width: 100%;
     height: 100%;
-`, v = r`
-    width: calc(var(--w-column) * 4);
-`, y = r`
-    width: calc(var(--w-column) * 4);
-    ${t("tablet", r`
-        width: calc(var(--w-column) * 6);
+`, y = i`
+    width: ${n("column", 4)};
+`, b = i`
+    width: ${n("column", 4)};
+    ${t("tablet", i`
+        width: ${n("column", 6)};
     `)}
-    ${t("desktop", r`
-        width: calc(var(--w-column) * 8);
+    ${t("desktop", i`
+        width: ${n("column", 8)};
     `)}
-`, b = r`
+`, x = i`
     position: fixed;
     top: 0;
     right: 0;
     height: 100%;
-    ${t("mobileOnly", _)}
-    ${t("tablet", v)}
-`, x = r`
-    border-radius: 8px;
-    ${t("mobileOnly", _)}
+    ${t("mobileOnly", v)}
     ${t("tablet", y)}
-`, S = a.div`
-    padding: calc(var(--w-gutter));
+`, S = i`
+    border-radius: 8px;
+    ${t("mobileOnly", v)}
+    ${t("tablet", b)}
+`, C = o.div`
+    padding: ${n("gutter")};
     z-index: 1002;
-    background-color: var(--white);
+    background-color: ${e("white")};
     max-height: 80vh;
     overflow-y: auto;
     -webkit-overflow-scrolling: touch;
     touch-action: pan-y;
-    animation: ${(e) => e.isClosing ? m : p} 0.3s ease-in-out;
+    animation: ${(e) => e.isClosing ? h : m} 0.3s ease-in-out;
     animation-fill-mode: forwards;
-    ${(e) => e.type === "panel" && b}
-    ${(e) => e.type === "dialog" && x}
+    ${(e) => e.type === "panel" && x}
+    ${(e) => e.type === "dialog" && S}
     header {
         display: inline-flex;
         width: 100%;
         justify-content: space-between;
-        margin-bottom: calc(var(--w-gutter) * 0.5);
+        margin-bottom: ${n("gutter", .5)};
     }
-`, C = r`
+`, w = i`
     text-decoration: none;
-    height: 36px;
-    width: 36px;
+    height: 30px;
+    width: 30px;
     border-radius: 50%;
-`, w = a.footer`
-    margin-top: calc(var(--w-gutter) * 2);
-    background-color:var(--white);
+    padding: 0;
+    display: inline-flex;
+    justify-content: center;
+`, T = o.footer`
+    margin-top: ${n("gutter", 2)};
+    background-color: ${e("white")};
     height: fit-content;
     display: flex;
-    gap: var(--w-gutter);
-`, T = class extends l.PureComponent {
+    gap: ${n("gutter")};
+`, E = class extends s.PureComponent {
 	state = { isClosing: !1 };
 	onDismiss = () => {
 		this.props.onDismiss && (this.setState({ isClosing: !0 }), setTimeout(() => {
@@ -124,31 +127,30 @@ var d = i`
 		(this.props.backgroundDismiss || !0) === !0 && this.onDismiss();
 	};
 	render() {
-		return this.props.visible ? /* @__PURE__ */ c(h, {
+		return this.props.visible ? /* @__PURE__ */ u(g, {
 			styles: this.props.styles,
-			children: [/* @__PURE__ */ c(S, {
+			children: [/* @__PURE__ */ u(C, {
 				type: this.props.type || "dialog",
 				isClosing: this.state.isClosing,
 				children: [
-					/* @__PURE__ */ c("header", { children: [this.props.header && /* @__PURE__ */ s(o, { children: this.props.header }), !this.props.hideDismissIcon && /* @__PURE__ */ s(e, {
+					/* @__PURE__ */ u("header", { children: [this.props.header && /* @__PURE__ */ l(c, { children: this.props.header }), !this.props.hideDismissIcon && /* @__PURE__ */ l(r, {
 						variant: "primary",
-						styles: C,
+						styles: w,
 						onClick: this.onDismiss,
-						children: /* @__PURE__ */ s(u, {
-							fill: n("white"),
-							viewBox: "6 8 14 14",
-							size: 24
+						children: /* @__PURE__ */ l(d, {
+							fill: e("white"),
+							size: 18
 						})
 					})] }),
-					/* @__PURE__ */ s("section", { children: this.props.children }),
-					this.props.footer && /* @__PURE__ */ s(w, { children: this.props.footer })
+					/* @__PURE__ */ l("section", { children: this.props.children }),
+					this.props.footer && /* @__PURE__ */ l(T, { children: this.props.footer })
 				]
-			}), /* @__PURE__ */ s(g, {
+			}), /* @__PURE__ */ l(_, {
 				isClosing: this.state.isClosing,
 				onClick: this.onClickBackground
 			})]
-		}) : /* @__PURE__ */ s(o, {});
+		}) : /* @__PURE__ */ l(c, {});
 	}
 };
 //#endregion
-export { T as Modal };
+export { E as Modal };