@stamcat/craftsman 0.0.27-alpha.17 → 0.0.27-alpha.18

package/AGENTS.md

@@ -6,6 +6,7 @@ Full guidance has been split out for progressive loading:
 
 - **Global guidelines** (exports, hard rules, code block rendering, style utilities, theme authoring, `isEmpty`, code gen patterns, fallback strategy): see the [craftsman-component-usage skill](.github/skills/craftsman-component-usage/SKILL.md).
 - **Component-specific guidelines** (props, behavior notes, examples): each component has its own `AGENTS.md` co-located with its source, for example [src/components/Button/AGENTS.md](src/components/Button/AGENTS.md).
+- **Device/browser detection** (prefer `react-device-detect` over custom user-agent/viewport checks): see the [craftsman-device-detection skill](.github/skills/craftsman-device-detection/SKILL.md).
 
 ## Quick Reference
 

package/Components.esm.js

@@ -16,13 +16,44 @@ 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 "./src/components/Icons/index.esm.js";
 //#region src/components/index.ts
-var v = /* @__PURE__ */ e({
+var N = /* @__PURE__ */ e({
 	Button: () => t,
 	Carousel: () => m,
 	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,
 	Input: () => n,
 	InputPassword: () => r,
 	InputPhone: () => f,
@@ -37,4 +68,4 @@ var v = /* @__PURE__ */ e({
 	Tooltip: () => _
 });
 //#endregion
-export { t as Button, m as Carousel, o as Checkbox, d as DatePicker, g as DateTimePicker, 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, v as components_exports };
+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 };

package/Utilities.esm.js

@@ -1,2 +1,2 @@
-import { formatTime as e, getAmPmLabels as t, getUnitLabel as n, is24HourFormat as r, isEmpty as i, isTouchDevice as a, validateEmail as o } from "./src/utilities/validations.esm.js";
-export { e as formatTime, t as getAmPmLabels, n as getUnitLabel, r as is24HourFormat, i as isEmpty, a as isTouchDevice, o as validateEmail };
+import { formatTime as e, getAmPmLabels as t, getUnitLabel as n, is24HourFormat as r, isEmpty as i, validateEmail as a } from "./src/utilities/validations.esm.js";
+export { e as formatTime, t as getAmPmLabels, n as getUnitLabel, r as is24HourFormat, i as isEmpty, a as validateEmail };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stamcat/craftsman",
-  "version": "0.0.27-alpha.17",
+  "version": "0.0.27-alpha.18",
   "type": "module",
   "description": "A powerful, lightweight framework for design systems",
   "repository": {
@@ -25,6 +25,7 @@
   "dependencies": {
     "@floating-ui/react-dom": "2.1.9",
     "clsx": "2.1.1",
+    "country-flag-icons": "1.6.20",
     "dompurify": "3.4.13",
     "embla-carousel-react": "8.6.0",
     "pure-react-carousel": "1.35.0",

package/src/components/Button/AGENTS.md

@@ -0,0 +1,64 @@
+# Button — Agent Usage Notes
+
+Import:
+
+```tsx
+import { Button } from "@stamcat/craftsman/Button";
+```
+
+Props:
+
+- Inherits all native `<button>` props.
+- `variant?: "primary" | "default" | "text"` (default: `"default"`)
+- `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"`).
+- `className` is preserved and merged after component classes.
+- Theme component overrides are selector-based CSS emitted by `ThemeProvider`; `theme.components.*` accepts JS style objects or raw CSS/Sass strings for the target selector.
+- 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:
+
+```tsx
+<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`).

package/src/components/Carousel/AGENTS.md

@@ -0,0 +1,41 @@
+# Carousel — Agent Usage Notes
+
+Import:
+
+```tsx
+import { Carousel } from "@stamcat/craftsman/Carousel";
+```
+
+Props:
+
+- Extends `EmblaOptionsType` from `embla-carousel`, except `slides`.
+- `slides?: React.ReactNode[]`
+- `className?: string`
+- `style?: React.CSSProperties`
+- `buttons?: boolean` (default: `true`)
+- `pagination?: "dots" | "numbers"` (default: `"dots"`)
+
+Behavior notes:
+
+- `slides` is an array prop; do not pass slide content as `children`.
+- Built on `embla-carousel-react`, so standard Embla options such as `loop`, `align`, `dragFree`, and `slidesToScroll` pass through.
+- Previous/next controls are built in and can be hidden with `buttons={false}`.
+- Pagination can render dots or the shared `Pagination` component in number mode.
+- Number pagination uses zero-based indexes internally, consistent with `Pagination`.
+- The component manages its own selected index from the Embla instance; there is no separate controlled index prop.
+
+Example:
+
+```tsx
+const slides = [
+  <figure key="one"><img src="/slide-1.jpg" alt="First slide" /></figure>,
+  <figure key="two"><img src="/slide-2.jpg" alt="Second slide" /></figure>,
+];
+
+<Carousel
+  slides={slides}
+  loop={false}
+  pagination="dots"
+  align="center"
+/>
+```

package/src/components/Checkbox/AGENTS.md

@@ -0,0 +1,32 @@
+# Checkbox — Agent Usage Notes
+
+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)}
+/>
+```

package/src/components/DatePicker/AGENTS.md

@@ -0,0 +1,36 @@
+# DatePicker — Agent Usage Notes
+
+Import:
+
+```tsx
+import { DatePicker } from "@stamcat/craftsman/DatePicker";
+```
+
+Props:
+
+- Extends `DatePickerProps` from `react-date-picker`.
+- `label?: string | ReactNode`
+- `labelPosition?: "top" | "left" | "bottom" | "right" | "inside" | "hidden"` (default: `"top"`)
+- `error?: string | boolean | ReactNode`
+- `required?: boolean`
+- `value?: Date | null`
+- `onChange?: (value: DatePickerProps["value"]) => void`
+
+Behavior notes:
+
+- Controlled component — parent owns `value` and `onChange`.
+- Calendar flyout renders below the input; ensure the container has at least 400px of vertical space.
+- Use `useState` to manage the selected date value.
+
+Example:
+
+```tsx
+const [date, setDate] = useState<Date | null>(null);
+
+<DatePicker
+  label="Appointment Date"
+  value={date}
+  onChange={setDate}
+  required
+/>
+```

package/src/components/DateTimePicker/AGENTS.md

@@ -0,0 +1,41 @@
+# DateTimePicker — Agent Usage Notes
+
+> Not yet part of the documented public export surface (see `craftsman-component-usage` skill's Known Limitations). Source path only — do not assume `@stamcat/craftsman/DateTimePicker` is published until confirmed in `exports.ts`.
+
+Import (source-relative, once exported):
+
+```tsx
+import { DateTimePicker } from "@stamcat/craftsman/DateTimePicker";
+```
+
+Props:
+
+- Extends `react-datetime-picker`'s `DateTimePickerProps` plus `LabeledInput` (`label`, `labelPosition`, `error`, `required`).
+- `id?: string`
+- `style?: React.CSSProperties`
+- `format?: 24 | 12` — hour format used by the custom time wheel display.
+- `labels?: { hour?: string; minute?: string }` — labels passed through to the time wheel.
+- `value` / `onChange` — standard `Date` value and change callback.
+
+Behavior notes:
+
+- Directly wraps `react-datetime-picker`, but replaces its native clock UI with the custom `TimePickerDisplay` wheel (shared with `TimePicker`); `isClockOpen` is always forced `false` on the underlying component.
+- Clicking/focusing a time sub-field opens the custom wheel only if `value` is already a valid `Date`. If no date is selected yet, focus is redirected to the date field so the calendar opens instead of the time wheel.
+- Clicking outside the wrapper (`pointerdown`) closes the time wheel.
+- Opening the calendar (`onCalendarOpen`) closes the time wheel so both widgets are never open simultaneously.
+- `onChangeTime` builds the resulting `Date` from the existing `value` if present, otherwise from `new Date()` (today), then sets hours/minutes on it before calling `onChange`.
+
+Example:
+
+```tsx
+<DateTimePicker
+  label="Appointment"
+  value={value}
+  onChange={setValue}
+  format={12}
+/>
+```
+
+Implementation caution:
+
+- Relies on `react-datetime-picker`'s rendered sub-input `name` attributes (`day`/`month`/`year` vs `hour12`/`hour24`/`minute`/`second`/`amPm`) to distinguish date vs. time fields for the focus-redirect behavior. Upgrading `react-datetime-picker` may require re-verifying these names.

package/src/components/DateTimePicker/DateTimePicker2.esm.js

@@ -4,75 +4,79 @@ import { InputWrapper as t } from "../Input/InputWrapper.esm.js";
 import './DateTimePicker.css';import '../DatePicker/ReactCalendar.css';/* empty css                              */
 import { resolveLocale as n } from "../TimePicker/utilities.esm.js";
 import { TimePickerDisplay as r } from "../TimePicker/TimePickerDisplay.esm.js";
+import { require_lib as i } from "../../../node_modules/react-device-detect/dist/lib.esm.js";
 /* empty css                   */
-import i from "clsx";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
-import { useEffect as s, useId as c, useRef as l, useState as u } from "react";
-import { FaRegCalendar as d, FaX as f } from "react-icons/fa6";
-import { DateTimePicker as p } from "react-datetime-picker";
+import a from "clsx";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { useEffect as c, useId as l, useRef as u, useState as d } from "react";
+import { FaRegCalendar as f, FaX as p } from "react-icons/fa6";
+import { DateTimePicker as m } from "react-datetime-picker";
 //#region src/components/DateTimePicker/DateTimePicker.tsx
-var m = ({ label: m, id: h, labelPosition: g = "top", required: _ = !1, error: v, style: y, className: b, locale: x, labels: S, format: C, value: w, onChange: T, ...E }) => {
-	let D = c(), O = h || D, k = l(null), [A, j] = u(!1), M = n(x);
-	s(() => {
-		if (!A) return;
+var h = i(), g = ({ label: i, id: g, labelPosition: _ = "top", required: v = !1, error: y, style: b, className: x, locale: S, labels: C, format: w, value: T, onChange: E, ...D }) => {
+	let O = l(), k = g || O, A = u(null), [j, M] = d(!1), N = n(S);
+	c(() => {
+		if (!j) return;
 		let e = (e) => {
 			let t = e.target;
-			k.current?.contains(t) || j(!1);
+			A.current?.contains(t) || M(!1);
 		};
 		return document.addEventListener("pointerdown", e, !0), () => {
 			document.removeEventListener("pointerdown", e, !0);
 		};
-	}, [A]);
-	let N = () => {
-		if (w instanceof Date) {
-			j(!0);
+	}, [j]);
+	let P = () => {
+		if (!h.isMobile && T instanceof Date) {
+			M(!0);
 			return;
 		}
-		(k.current?.querySelector("input[name=\"day\"]"))?.focus();
-	}, P = (e) => {
-		e.target instanceof HTMLInputElement && N();
+		(A.current?.querySelector("input[name=\"day\"]"))?.focus();
 	}, F = (e) => {
+		e.target instanceof HTMLInputElement && P();
+	}, I = (e) => {
+		h.isMobile && e.key === "Enter" && M(!1);
+	}, L = (e) => {
 		let [t, n] = e.split(":"), r = Number(t), i = Number(n);
 		if (Number.isNaN(r) || Number.isNaN(i)) return;
-		let a = w instanceof Date ? new Date(w) : /* @__PURE__ */ new Date();
-		a.setHours(r, i, 0, 0), T?.(a);
+		let a = T instanceof Date ? new Date(T) : /* @__PURE__ */ new Date();
+		a.setHours(r, i, 0, 0), E?.(a);
 	};
-	return /* @__PURE__ */ a("div", {
-		ref: k,
+	return /* @__PURE__ */ o("div", {
+		ref: A,
 		className: "dateTimePicker__wrapper",
-		children: /* @__PURE__ */ o(t, {
-			id: O,
-			onFocus: P,
-			className: i(b, "dateTimePicker"),
-			label: m,
-			labelPosition: g,
-			error: v,
-			required: _,
-			style: y,
-			value: w instanceof Date ? w.toISOString() : void 0,
-			children: [/* @__PURE__ */ a(p, {
+		onKeyDown: I,
+		children: /* @__PURE__ */ s(t, {
+			id: k,
+			onFocus: F,
+			className: a(x, "dateTimePicker"),
+			label: i,
+			labelPosition: _,
+			error: y,
+			required: v,
+			style: b,
+			value: T instanceof Date ? T.toISOString() : void 0,
+			children: [/* @__PURE__ */ o(m, {
 				isClockOpen: !1,
-				onClockOpen: N,
+				onClockOpen: P,
 				onClockClose: () => {},
-				onCalendarOpen: () => j(!1),
-				calendarIcon: /* @__PURE__ */ a(d, { size: 16 }),
-				clearIcon: /* @__PURE__ */ a(f, { size: 14 }),
-				value: w,
-				onChange: T,
-				...E
-			}), A && /* @__PURE__ */ a("div", {
+				onCalendarOpen: () => M(!1),
+				calendarIcon: /* @__PURE__ */ o(f, { size: 16 }),
+				clearIcon: /* @__PURE__ */ o(p, { size: 14 }),
+				value: T,
+				onChange: E,
+				...D
+			}), j && /* @__PURE__ */ o("div", {
 				className: "dateTimePicker__time-display",
-				children: /* @__PURE__ */ a(r, {
-					value: e(w, x),
-					onChange: F,
-					locale: M,
-					labels: S,
-					format: C,
-					visible: A
+				children: /* @__PURE__ */ o(r, {
+					value: e(T, S),
+					onChange: L,
+					locale: N,
+					labels: C,
+					format: w,
+					visible: j
 				})
 			})]
 		})
 	});
 };
 //#endregion
-export { m as DateTimePicker };
+export { g as DateTimePicker };

package/src/components/Icons/IconAmazonPay.d.ts

@@ -0,0 +1,2 @@
+import { SVGIconProps } from './types';
+export declare const IconAmazonPay: ({ width, ...props }: SVGIconProps) => import("react").JSX.Element;

package/src/components/Icons/IconAmazonPay.esm.js

@@ -0,0 +1,76 @@
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+//#region src/components/Icons/IconAmazonPay.tsx
+var n = ({ width: n = 40, ...r }) => /* @__PURE__ */ t("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	viewBox: "0 0 176.515 33.863",
+	width: n,
+	...r,
+	children: [/* @__PURE__ */ e("defs", { children: /* @__PURE__ */ e("clipPath", {
+		id: "_clipPath_YQXZfDyPH8PDg72bLQM3P9CWVeOJZUa0",
+		children: /* @__PURE__ */ e("rect", {
+			width: "176.515",
+			height: "33.863"
+		})
+	}) }), /* @__PURE__ */ t("g", {
+		clipPath: "url(#_clipPath_YQXZfDyPH8PDg72bLQM3P9CWVeOJZUa0)",
+		children: [
+			/* @__PURE__ */ e("path", {
+				d: " M 69.652 26.489 C 63.129 31.303 53.672 33.863 45.528 33.863 C 34.115 33.863 23.837 29.644 16.059 22.621 C 15.449 22.069 15.993 21.316 16.727 21.743 C 25.118 26.626 35.496 29.567 46.213 29.567 C 53.443 29.567 61.391 28.066 68.704 24.964 C 69.807 24.497 70.732 25.691 69.652 26.489 Z ",
+				fillRule: "evenodd",
+				fill: "rgb(247,156,52)"
+			}),
+			/* @__PURE__ */ e("path", {
+				d: " M 72.367 23.389 C 71.532 22.321 66.852 22.883 64.749 23.135 C 64.112 23.212 64.013 22.655 64.587 22.252 C 68.321 19.629 74.44 20.386 75.151 21.265 C 75.867 22.15 74.962 28.285 71.464 31.212 C 70.925 31.662 70.413 31.422 70.652 30.828 C 71.44 28.861 73.202 24.459 72.367 23.389 Z ",
+				fillRule: "evenodd",
+				fill: "rgb(247,156,52)"
+			}),
+			/* @__PURE__ */ e("path", {
+				d: " M 64.897 3.724 L 64.897 1.176 C 64.899 0.788 65.191 0.53 65.543 0.531 L 76.965 0.53 C 77.33 0.53 77.624 0.795 77.624 1.173 L 77.624 3.358 C 77.62 3.725 77.311 4.203 76.764 4.962 L 70.847 13.41 C 73.043 13.359 75.366 13.688 77.362 14.809 C 77.812 15.062 77.933 15.437 77.968 15.804 L 77.968 18.523 C 77.968 18.898 77.558 19.331 77.126 19.106 C 73.611 17.264 68.946 17.063 65.058 19.128 C 64.661 19.34 64.246 18.912 64.246 18.537 L 64.246 15.952 C 64.246 15.539 64.254 14.831 64.671 14.201 L 71.525 4.367 L 65.557 4.366 C 65.192 4.366 64.899 4.106 64.897 3.724 Z ",
+				fillRule: "evenodd",
+				fill: "rgb(51,62,71)"
+			}),
+			/* @__PURE__ */ e("path", {
+				d: " M 23.233 19.641 L 19.758 19.641 C 19.427 19.62 19.163 19.372 19.136 19.054 L 19.139 1.219 C 19.139 0.863 19.439 0.578 19.81 0.578 L 23.046 0.577 C 23.384 0.594 23.656 0.85 23.677 1.176 L 23.677 3.504 L 23.743 3.504 C 24.586 1.252 26.175 0.201 28.316 0.201 C 30.489 0.201 31.852 1.252 32.825 3.504 C 33.668 1.252 35.582 0.201 37.625 0.201 C 39.085 0.201 40.674 0.802 41.647 2.153 C 42.75 3.655 42.524 5.831 42.524 7.745 L 42.52 19 C 42.52 19.355 42.221 19.641 41.85 19.641 L 38.38 19.641 C 38.03 19.619 37.756 19.343 37.756 19.001 L 37.755 9.546 C 37.755 8.796 37.82 6.92 37.657 6.207 C 37.398 5.005 36.62 4.667 35.615 4.667 C 34.771 4.667 33.895 5.23 33.538 6.13 C 33.181 7.032 33.214 8.532 33.214 9.546 L 33.214 19 C 33.214 19.355 32.914 19.641 32.544 19.641 L 29.073 19.641 C 28.724 19.619 28.449 19.343 28.449 19.001 L 28.445 9.546 C 28.445 7.557 28.77 4.631 26.305 4.631 C 23.807 4.631 23.905 7.482 23.905 9.546 L 23.903 19 C 23.903 19.355 23.603 19.641 23.233 19.641 Z ",
+				fillRule: "evenodd",
+				fill: "rgb(51,62,71)"
+			}),
+			/* @__PURE__ */ e("path", {
+				d: " M 87.488 3.842 C 84.926 3.842 84.764 7.331 84.764 9.508 C 84.764 11.685 84.732 16.339 87.457 16.339 C 90.149 16.339 90.279 12.586 90.279 10.297 C 90.279 8.796 90.213 6.994 89.759 5.568 C 89.37 4.329 88.591 3.842 87.488 3.842 Z  M 87.457 0.201 C 92.614 0.201 95.403 4.631 95.403 10.26 C 95.403 15.7 92.322 20.017 87.457 20.017 C 82.396 20.017 79.639 15.588 79.639 10.072 C 79.639 4.517 82.428 0.201 87.457 0.201 Z ",
+				fillRule: "evenodd",
+				fill: "rgb(51,62,71)"
+			}),
+			/* @__PURE__ */ e("path", {
+				d: " M 102.092 19.641 L 98.629 19.641 C 98.282 19.619 98.006 19.343 98.006 19.001 L 98 1.16 C 98.03 0.833 98.318 0.578 98.668 0.578 L 101.891 0.577 C 102.195 0.593 102.445 0.799 102.509 1.076 L 102.509 3.804 L 102.574 3.804 C 103.548 1.364 104.909 0.201 107.309 0.201 C 108.866 0.201 110.391 0.764 111.364 2.303 C 112.272 3.729 112.272 6.13 112.272 7.857 L 112.272 19.08 C 112.234 19.396 111.95 19.641 111.606 19.641 L 108.123 19.641 C 107.801 19.621 107.542 19.384 107.504 19.08 L 107.504 9.397 C 107.504 7.445 107.732 4.592 105.331 4.592 C 104.488 4.592 103.709 5.155 103.32 6.018 C 102.833 7.107 102.768 8.195 102.768 9.397 L 102.768 19 C 102.762 19.355 102.462 19.641 102.092 19.641 Z ",
+				fillRule: "evenodd",
+				fill: "rgb(51,62,71)"
+			}),
+			/* @__PURE__ */ e("path", {
+				d: " M 59.294 19.597 C 59.065 19.803 58.734 19.817 58.474 19.678 C 57.32 18.719 57.113 18.276 56.482 17.362 C 54.575 19.305 53.224 19.888 50.753 19.888 C 47.828 19.888 45.552 18.082 45.552 14.472 C 45.552 11.651 47.081 9.733 49.258 8.793 C 51.143 7.965 53.776 7.815 55.792 7.589 L 55.792 7.138 C 55.792 6.309 55.857 5.333 55.369 4.618 C 54.946 3.978 54.134 3.715 53.419 3.715 C 52.093 3.715 50.916 4.394 50.626 5.801 C 50.565 6.114 50.337 6.425 50.023 6.441 L 46.654 6.076 C 46.37 6.011 46.054 5.783 46.135 5.349 C 46.9 1.32 50.498 0.064 53.768 0.03 L 54.026 0.03 C 55.7 0.051 57.838 0.51 59.14 1.759 C 60.831 3.339 60.667 5.445 60.667 7.74 L 60.667 13.153 C 60.667 14.782 61.344 15.496 61.979 16.373 C 62.202 16.69 62.251 17.065 61.968 17.297 C 61.258 17.892 59.997 18.987 59.304 19.605 L 59.294 19.597 Z  M 55.792 11.125 C 55.792 12.479 55.824 13.607 55.142 14.811 C 54.589 15.788 53.711 16.39 52.736 16.39 C 51.404 16.39 50.624 15.375 50.624 13.87 C 50.624 10.91 53.278 10.372 55.792 10.372 L 55.792 11.125 Z ",
+				fillRule: "evenodd",
+				fill: "rgb(51,62,71)"
+			}),
+			/* @__PURE__ */ e("path", {
+				d: " M 13.743 19.597 C 13.513 19.803 13.181 19.817 12.922 19.678 C 11.767 18.719 11.56 18.276 10.93 17.362 C 9.022 19.305 7.672 19.888 5.201 19.888 C 2.276 19.888 0 18.082 0 14.472 C 0 11.651 1.527 9.733 3.706 8.793 C 5.591 7.965 8.224 7.815 10.239 7.589 L 10.239 7.138 C 10.239 6.309 10.305 5.333 9.817 4.618 C 9.394 3.978 8.581 3.715 7.867 3.715 C 6.541 3.715 5.362 4.394 5.074 5.801 C 5.014 6.114 4.785 6.425 4.47 6.441 L 1.102 6.076 C 0.817 6.011 0.501 5.783 0.583 5.349 C 1.346 1.32 4.945 0.064 8.216 0.03 L 8.474 0.03 C 10.148 0.051 12.286 0.51 13.588 1.759 C 15.278 3.339 15.115 5.445 15.115 7.74 L 15.115 13.153 C 15.115 14.782 15.792 15.496 16.427 16.373 C 16.648 16.69 16.699 17.065 16.416 17.297 C 15.706 17.892 14.444 18.987 13.751 19.605 L 13.743 19.597 Z  M 10.239 11.125 C 10.239 12.479 10.272 13.607 9.589 14.811 C 9.037 15.788 8.159 16.39 7.183 16.39 C 5.851 16.39 5.071 15.375 5.071 13.87 C 5.071 10.91 7.726 10.372 10.239 10.372 L 10.239 11.125 Z ",
+				fillRule: "evenodd",
+				fill: "rgb(51,62,71)"
+			}),
+			/* @__PURE__ */ e("path", {
+				d: " M 159.773 26.039 C 159.773 25.587 159.773 25.181 159.773 24.729 C 159.773 24.356 159.956 24.099 160.345 24.122 C 161.071 24.225 162.098 24.328 162.827 24.178 C 163.779 23.98 164.462 23.305 164.866 22.38 C 165.435 21.078 165.812 20.028 166.05 19.339 L 158.821 1.431 C 158.699 1.127 158.663 0.563 159.27 0.563 L 161.797 0.563 C 162.279 0.563 162.475 0.869 162.583 1.169 L 167.824 15.715 L 172.827 1.169 C 172.929 0.871 173.134 0.563 173.612 0.563 L 175.995 0.563 C 176.598 0.563 176.564 1.126 176.444 1.431 L 169.273 19.898 C 168.345 22.356 167.109 26.271 164.325 26.951 C 162.929 27.316 161.168 27.184 160.134 26.751 C 159.873 26.62 159.773 26.27 159.773 26.039 Z ",
+				fillRule: "evenodd",
+				fill: "rgb(51,62,71)"
+			}),
+			/* @__PURE__ */ e("path", {
+				d: " M 156.402 18.55 C 156.402 18.883 156.129 19.156 155.794 19.156 L 154.012 19.156 C 153.627 19.156 153.364 18.878 153.315 18.55 L 153.136 17.337 C 152.317 18.03 151.312 18.639 150.222 19.063 C 148.126 19.877 145.71 20.012 143.662 18.754 C 142.181 17.845 141.395 16.068 141.395 14.235 C 141.395 12.817 141.832 11.411 142.801 10.39 C 144.094 8.995 145.968 8.31 148.231 8.31 C 149.598 8.31 151.554 8.471 152.977 8.936 L 152.977 6.495 C 152.977 4.013 151.932 2.939 149.177 2.939 C 147.071 2.939 145.46 3.257 143.218 3.954 C 142.859 3.966 142.649 3.693 142.649 3.36 L 142.649 1.968 C 142.649 1.634 142.934 1.311 143.243 1.213 C 144.844 0.515 147.112 0.08 149.523 0 C 152.666 0 156.402 0.709 156.402 5.543 L 156.402 18.55 Z  M 152.977 14.986 L 152.977 11.303 C 151.781 10.976 149.802 10.84 149.036 10.84 C 147.826 10.84 146.501 11.126 145.809 11.871 C 145.292 12.417 145.058 13.201 145.058 13.959 C 145.058 14.939 145.397 15.922 146.189 16.408 C 147.109 17.033 148.536 16.957 149.877 16.576 C 151.166 16.21 152.376 15.563 152.977 14.986 Z ",
+				fillRule: "evenodd",
+				fill: "rgb(51,62,71)"
+			}),
+			/* @__PURE__ */ e("path", {
+				d: " M 130.127 2.994 C 134.081 2.994 135.158 6.103 135.158 9.663 C 135.18 12.063 134.739 14.203 133.496 15.428 C 132.566 16.345 131.527 16.595 129.963 16.595 C 128.571 16.595 126.74 15.869 125.372 14.858 L 125.372 4.679 C 126.796 3.585 128.613 2.994 130.127 2.994 Z  M 124.766 26.678 L 122.379 26.678 C 122.045 26.678 121.772 26.405 121.772 26.072 C 121.772 17.782 121.772 9.491 121.772 1.201 C 121.772 0.868 122.045 0.595 122.379 0.595 L 124.206 0.595 C 124.59 0.595 124.853 0.873 124.902 1.201 L 125.094 2.504 C 126.805 0.985 129.008 0.011 131.107 0.011 C 136.986 0.011 138.919 4.855 138.919 9.892 C 138.919 15.281 135.962 19.611 130.961 19.611 C 128.855 19.611 126.886 18.834 125.372 17.484 L 125.372 26.072 C 125.372 26.405 125.099 26.678 124.766 26.678 Z ",
+				fillRule: "evenodd",
+				fill: "rgb(51,62,71)"
+			})
+		]
+	})]
+});
+//#endregion
+export { n as IconAmazonPay };

package/src/components/Icons/IconAmex.d.ts

@@ -0,0 +1,2 @@
+import { SVGIconProps } from './types';
+export declare const IconAmex: ({ width, ...props }: SVGIconProps) => import("react").JSX.Element;

package/src/components/Icons/IconAmex.esm.js

@@ -0,0 +1,87 @@
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+//#region src/components/Icons/IconAmex.tsx
+var n = ({ width: n = 40, ...r }) => /* @__PURE__ */ e("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	viewBox: "0 0 1000 997.51703",
+	width: n,
+	...r,
+	children: /* @__PURE__ */ t("g", {
+		transform: "translate(-55.5,-1002.3452)",
+		children: [
+			/* @__PURE__ */ e("path", {
+				fill: "#016fd0",
+				d: "m 55.5,1002.3454 997.5168,0 0,538.4893 -49.3744,77.1475 49.3744,68.6613 0,313.2187 -997.5168,0 0,-507.6304 L 86.358989,1456.744 55.5,1422.7991 Z"
+			}),
+			/* @__PURE__ */ e("path", {
+				fill: "#ffffff",
+				d: "m 249.14015,1697.4441 0,-156.6094 165.82027,0 17.79072,23.1924 18.37901,-23.1924 601.88665,0 0,145.8088 c 0,0 -15.7404,10.644 -33.9449,10.8006 l -333.27706,0 -20.05834,-24.6872 0,24.6872 -65.72965,0 0,-42.1418 c 0,0 -8.97877,5.8825 -28.39026,5.8825 l -22.37277,0 0,36.2593 -99.52024,0 -17.7653,-23.6898 -18.03807,23.6898 z"
+			}),
+			/* @__PURE__ */ e("path", {
+				fill: "#ffffff",
+				d: "m 55.5,1422.7991 37.393125,-87.1766 64.667505,0 21.22103,48.8328 0,-48.8328 80.38767,0 12.63289,35.2949 12.24716,-35.2949 360.8573,0 0,17.7439 c 0,0 18.96995,-17.7439 50.14586,-17.7439 l 117.08499,0.4092 20.85469,48.1937 0,-48.6029 67.27259,0 18.5154,27.6834 0,-27.6834 67.88977,0 0,156.6093 -67.88977,0 -17.74392,-27.7731 0,27.7731 -98.83835,0 -9.93959,-24.6872 -26.57108,0 -9.77781,24.6872 -67.02872,0 c -26.82589,0 -43.97406,-17.3816 -43.97406,-17.3816 l 0,17.3816 -101.06318,0 -20.05835,-24.6872 0,24.6872 -375.80462,0 -9.93274,-24.6872 -26.48635,0 -9.86254,24.6872 -46.1989,0 z"
+			}),
+			/* @__PURE__ */ e("path", {
+				fill: "#016fd0",
+				d: "m 106.12803,1354.9291 -50.435161,117.2641 32.835892,0 9.305914,-23.4816 54.099665,0 9.2577,23.4816 33.55915,0 -50.38695,-117.2641 -38.23621,0 z m 18.66004,27.2909 16.49028,41.0329 -33.02877,0 16.53849,-41.0329 z"
+			}),
+			/* @__PURE__ */ e("path", {
+				fill: "#016fd0",
+				d: "m 198.22282,1472.1735 0,-117.2642 46.66163,0.1733 27.13999,75.6045 26.4901,-75.7778 46.28848,0 0,117.2642 -29.31604,0 0,-86.4052 -31.07562,86.4052 -25.71023,0 -31.16227,-86.4052 0,86.4052 z"
+			}),
+			/* @__PURE__ */ e("path", {
+				fill: "#016fd0",
+				d: "m 364.86136,1472.1735 0,-117.2642 95.66287,0 0,26.2302 -66.03824,0 0,20.0583 64.49529,0 0,24.6872 -64.49529,0 0,20.8298 66.03824,0 0,25.4587 z"
+			}),
+			/* @__PURE__ */ e("path", {
+				fill: "#016fd0",
+				d: "m 477.49667,1354.9291 0,117.2641 29.31604,0 0,-41.6596 12.34359,0 35.15032,41.6596 35.82536,0 -38.57374,-43.2025 c 15.8309,-1.3359 32.16085,-14.9233 32.16085,-36.0182 0,-24.6765 -19.36827,-38.0434 -40.98459,-38.0434 l -65.23783,0 z m 29.31604,26.2301 33.51093,0 c 8.03881,0 13.88655,6.2882 13.88655,12.3436 0,7.7905 -7.57673,12.3436 -13.45259,12.3436 l -33.94489,0 0,-24.6872 z"
+			}),
+			/* @__PURE__ */ e("path", {
+				fill: "#016fd0",
+				d: "m 625.61982,1472.1735 -29.93322,0 0,-117.2642 29.93322,0 z"
+			}),
+			/* @__PURE__ */ e("path", {
+				fill: "#016fd0",
+				d: "m 696.59549,1472.1735 -6.4611,0 c -31.26172,0 -50.24229,-24.6292 -50.24229,-58.1499 0,-34.3488 18.76806,-59.1143 58.24634,-59.1143 l 32.40194,0 0,27.7731 -33.58657,0 c -16.026,0 -27.35994,12.5067 -27.35994,31.6305 0,22.7096 12.95987,32.2476 31.63047,32.2476 l 7.71474,0 z"
+			}),
+			/* @__PURE__ */ e("path", {
+				fill: "#016fd0",
+				d: "m 760.3868,1354.9291 -50.43515,117.2641 32.83589,0 9.30591,-23.4816 54.09967,0 9.25769,23.4816 33.55915,0 -50.38694,-117.2641 -38.23622,0 z m 18.66005,27.2909 16.49027,41.0329 -33.02876,0 16.53849,-41.0329 z"
+			}),
+			/* @__PURE__ */ e("path", {
+				fill: "#016fd0",
+				d: "m 852.43338,1472.1735 0,-117.2642 37.27187,0 47.59035,73.6759 0,-73.6759 29.31604,0 0,117.2642 -36.06644,0 -48.79578,-75.6045 0,75.6045 z"
+			}),
+			/* @__PURE__ */ e("path", {
+				fill: "#016fd0",
+				d: "m 269.1985,1677.3858 0,-117.2642 95.66286,0 0,26.2302 -66.03823,0 0,20.0583 64.49528,0 0,24.6872 -64.49528,0 0,20.8298 66.03823,0 0,25.4587 z"
+			}),
+			/* @__PURE__ */ e("path", {
+				fill: "#016fd0",
+				d: "m 737.94653,1677.3858 0,-117.2642 95.66287,0 0,26.2302 -66.03824,0 0,20.0583 64.1867,0 0,24.6872 -64.1867,0 0,20.8298 66.03824,0 0,25.4587 z"
+			}),
+			/* @__PURE__ */ e("path", {
+				fill: "#016fd0",
+				d: "m 368.57408,1677.3858 46.57779,-57.9089 -47.68678,-59.3553 36.93435,0 28.39991,36.6932 28.49635,-36.6932 35.48784,0 -47.05996,58.6321 46.66353,58.6321 -36.92851,0 -27.57537,-36.1148 -26.90518,36.1148 z"
+			}),
+			/* @__PURE__ */ e("path", {
+				fill: "#016fd0",
+				d: "m 499.86944,1560.1414 0,117.2641 30.08751,0 0,-37.0308 30.85899,0 c 26.11107,0 45.90274,-13.8524 45.90274,-40.7917 0,-22.3164 -15.52271,-39.4416 -42.09358,-39.4416 l -64.75566,0 z m 30.08751,26.5194 32.49837,0 c 8.43546,0 14.46515,5.1701 14.46515,13.5008 0,7.8262 -5.99925,13.5008 -14.56158,13.5008 l -32.40194,0 0,-27.0016 z"
+			}),
+			/* @__PURE__ */ e("path", {
+				fill: "#016fd0",
+				d: "m 619.44802,1560.1216 0,117.2642 29.31604,0 0,-41.6597 12.34359,0 35.15032,41.6597 35.82536,0 -38.57374,-43.2026 c 15.83089,-1.3361 32.16085,-14.9233 32.16085,-36.0183 0,-24.6764 -19.36827,-38.0433 -40.98459,-38.0433 l -65.23783,0 z m 29.31604,26.2302 33.51093,0 c 8.03881,0 13.88654,6.2881 13.88654,12.3435 0,7.7906 -7.57673,12.3436 -13.45259,12.3436 l -33.94488,0 0,-24.6871 z"
+			}),
+			/* @__PURE__ */ e("path", {
+				fill: "#016fd0",
+				d: "m 847.18735,1677.3858 0,-25.4587 58.67066,0 c 8.68115,0 12.44003,-4.6912 12.44003,-9.8363 0,-4.9296 -3.74703,-9.9134 -12.44003,-9.9134 l -26.5126,0 c -23.04571,0 -35.88042,-14.0409 -35.88042,-35.1214 0,-18.8023 11.75348,-36.9344 45.99918,-36.9344 l 57.08913,0 -12.3436,26.3844 -49.37438,0 c -9.43821,0 -12.3436,4.9526 -12.3436,9.6821 0,4.8612 3.59036,10.222 10.80065,10.222 l 27.77309,0 c 25.69029,0 36.83792,14.5724 36.83792,33.6556 0,20.5163 -12.42212,37.3201 -38.23646,37.3201 z"
+			}),
+			/* @__PURE__ */ e("path", {
+				fill: "#016fd0",
+				d: "m 954.78398,1677.3858 0,-25.4587 58.67062,0 c 8.6812,0 12.4401,-4.6912 12.4401,-9.8363 0,-4.9296 -3.7471,-9.9134 -12.4401,-9.9134 l -26.51256,0 c -23.04571,0 -35.88043,-14.0409 -35.88043,-35.1214 0,-18.8023 11.75348,-36.9344 45.99918,-36.9344 l 57.08911,0 -12.3436,26.3844 -49.37436,0 c -9.4382,0 -12.34359,4.9526 -12.34359,9.6821 0,4.8612 3.59035,10.222 10.80064,10.222 l 27.77311,0 c 25.6903,0 36.8379,14.5724 36.8379,33.6556 0,20.5163 -12.4221,37.3201 -38.2365,37.3201 z"
+			})
+		]
+	})
+});
+//#endregion
+export { n as IconAmex };

package/src/components/Icons/IconApplePay.d.ts

@@ -0,0 +1,2 @@
+import { SVGIconProps } from './types';
+export declare const IconApplePay: ({ width, ...props }: SVGIconProps) => import("react").JSX.Element;