@stamcat/craftsman 0.0.27-alpha.2 → 0.0.27-alpha.21

package/src/components/InputPhone/InputPhone.scss

@@ -0,0 +1,266 @@
+@use "../../styles/global/components/input";
+@use "../../styles/utilities/_functions" as u;
+@layer craftsman-component {
+    .inputPhone {
+        &[data-label-position="inside"] {
+            .input-label {
+                top: 15px;
+                left: 50px;
+            }
+        }
+
+        .react-international-phone-country-selector {
+            position: relative;
+        }
+
+        .react-international-phone-flag-emoji {
+            width: var(--react-international-phone-flag-width, 24px);
+            height: var(--react-international-phone-flag-height, 24px);
+            box-sizing: border-box;
+        }
+
+        .react-international-phone-country-selector-button {
+            display: flex;
+            height: var(--react-international-phone-height, 36px);
+            box-sizing: border-box;
+            align-items: center;
+            justify-content: center;
+            padding: 0;
+            border: 1px solid
+                var(
+                    --react-international-phone-country-selector-border-color,
+                    var(--react-international-phone-border-color, gainsboro)
+                );
+            margin: 0;
+            appearance: button;
+            -webkit-appearance: button;
+            background-color: var(
+                --react-international-phone-country-selector-background-color,
+                var(--react-international-phone-background-color, white)
+            );
+            cursor: pointer;
+            text-transform: none;
+            user-select: none;
+
+            &:hover {
+                background-color: var(--react-international-phone-country-selector-background-color-hover, whitesmoke);
+            }
+
+            &--hide-dropdown {
+                cursor: auto;
+
+                &:hover {
+                    background-color: transparent;
+                }
+            }
+
+            &--disabled {
+                background-color: var(
+                    --react-international-phone-disabled-country-selector-background-color,
+                    var(--react-international-phone-disabled-background-color, whitesmoke)
+                );
+                cursor: auto;
+
+                &:hover {
+                    background-color: var(
+                        --react-international-phone-disabled-country-selector-background-color,
+                        var(--react-international-phone-disabled-background-color, whitesmoke)
+                    );
+                }
+            }
+
+            &__button-content {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+            }
+
+            &__flag-emoji {
+                margin: 0 4px;
+
+                &--disabled {
+                    opacity: 0.75;
+                }
+            }
+
+            &__dropdown-arrow {
+                border-top: var(--react-international-phone-country-selector-arrow-size, 4px) solid
+                    var(--react-international-phone-country-selector-arrow-color, #777);
+                border-right: var(--react-international-phone-country-selector-arrow-size, 4px) solid transparent;
+                border-left: var(--react-international-phone-country-selector-arrow-size, 4px) solid transparent;
+                margin-right: 4px;
+                transition: all 0.1s ease-out;
+
+                &--active {
+                    transform: rotateX(180deg);
+                }
+
+                &--disabled {
+                    border-top-color: var(--react-international-phone-disabled-country-selector-arrow-color, #999);
+                }
+            }
+        }
+
+        .react-international-phone-country-selector-dropdown {
+            position: absolute;
+            z-index: 1000;
+            top: var(--react-international-phone-dropdown-top, 44px);
+            left: var(--react-international-phone-dropdown-left, 0);
+            display: flex;
+            width: 300px;
+            max-height: 200px;
+            flex-direction: column;
+            padding: 4px 0;
+            margin: 0;
+            background-color: var(
+                --react-international-phone-dropdown-item-background-color,
+                var(--react-international-phone-background-color, white)
+            );
+            box-shadow: var(--react-international-phone-dropdown-shadow, 2px 2px 16px rgba(0, 0, 0, 0.25));
+            color: var(
+                --react-international-phone-dropdown-item-text-color,
+                var(--react-international-phone-text-color, #222)
+            );
+            list-style: none;
+            overflow-y: scroll;
+
+            &__preferred-list-divider {
+                height: 1px;
+                border: none;
+                margin: var(--react-international-phone-dropdown-preferred-list-divider-margin, 0);
+                background: var(
+                    --react-international-phone-dropdown-preferred-list-divider-color,
+                    var(--react-international-phone-border-color, gainsboro)
+                );
+            }
+
+            &__list-item {
+                display: flex;
+                min-height: var(--react-international-phone-dropdown-item-height, 28px);
+                box-sizing: border-box;
+                align-items: center;
+                padding: 2px 8px;
+
+                &:hover {
+                    background-color: var(
+                        --react-international-phone-selected-dropdown-item-background-color,
+                        var(--react-international-phone-selected-dropdown-item-background-color, whitesmoke)
+                    );
+                    cursor: pointer;
+                }
+
+                &--selected,
+                &--focused {
+                    background-color: var(--react-international-phone-selected-dropdown-item-background-color, whitesmoke);
+                    color: var(
+                        --react-international-phone-selected-dropdown-item-text-color,
+                        var(--react-international-phone-text-color, #222)
+                    );
+
+                    .react-international-phone-country-selector-dropdown__list-item-dial-code {
+                        color: var(
+                            --react-international-phone-selected-dropdown-item-dial-code-color,
+                            var(--react-international-phone-dropdown-item-dial-code-color, gray)
+                        );
+                    }
+                }
+
+                &--focused {
+                    background-color: var(
+                        --react-international-phone-selected-dropdown-item-background-color,
+                        var(--react-international-phone-selected-dropdown-item-background-color, whitesmoke)
+                    );
+                }
+
+                &-flag-emoji {
+                    margin-right: 8px;
+                }
+
+                &-country-name {
+                    overflow: hidden;
+                    margin-right: 8px;
+                    font-size: var(--react-international-phone-dropdown-item-font-size, 14px);
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                }
+
+                &-dial-code {
+                    color: var(--react-international-phone-dropdown-item-dial-code-color, gray);
+                    font-size: var(--react-international-phone-dropdown-item-font-size, 14px);
+                }
+            }
+        }
+
+        .react-international-phone-dial-code-preview {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 0 8px;
+            border: 1px solid
+                var(
+                    --react-international-phone-dial-code-preview-border-color,
+                    var(--react-international-phone-border-color, gainsboro)
+                );
+            margin-right: -1px;
+            background-color: var(
+                --react-international-phone-dial-code-preview-background-color,
+                var(--react-international-phone-background-color, white)
+            );
+            color: var(
+                --react-international-phone-dial-code-preview-text-color,
+                var(--react-international-phone-text-color, #222)
+            );
+            font-size: var(
+                --react-international-phone-dial-code-preview-font-size,
+                var(--react-international-phone-font-size, 13px)
+            );
+
+            &--disabled {
+                background-color: var(
+                    --react-international-phone-dial-code-preview-disabled-background-color,
+                    var(--react-international-phone-disabled-background-color, whitesmoke)
+                );
+                color: var(
+                    --react-international-phone-dial-code-preview-disabled-text-color,
+                    var(--react-international-phone-disabled-text-color, #666)
+                );
+            }
+        }
+
+        .react-international-phone-input-container {
+            display: flex;
+
+            .react-international-phone-country-selector-button {
+                border-radius: var(--react-international-phone-border-radius, 4px);
+                margin-right: -1px;
+                border-bottom-right-radius: 0;
+                border-top-right-radius: 0;
+            }
+
+            .react-international-phone-input {
+                overflow: visible;
+                height: var(--react-international-phone-height, 36px);
+                box-sizing: border-box;
+                padding: 0 8px;
+                border: 1px solid var(--react-international-phone-border-color, gainsboro);
+                border-radius: var(--react-international-phone-border-radius, 4px);
+                margin: 0;
+                background-color: var(--react-international-phone-background-color, white);
+                border-bottom-left-radius: 0;
+                border-top-left-radius: 0;
+                color: var(--react-international-phone-text-color, #222);
+                font-family: inherit;
+                font-size: var(--react-international-phone-font-size, 13px);
+
+                &:focus {
+                    outline: none;
+                }
+
+                &--disabled {
+                    background-color: var(--react-international-phone-disabled-background-color, whitesmoke);
+                    color: var(--react-international-phone-disabled-text-color, #666);
+                }
+            }
+        }
+    }
+}

package/src/components/InputPhone/InputPhone2.esm.js

@@ -0,0 +1,27 @@
+"use client";
+import { InputWrapper as e } from "../Input/InputWrapper.esm.js";
+import './InputPhone.css';/* empty css               */
+import t from "clsx";
+import { jsx as n } from "react/jsx-runtime";
+import r, { useId as i } from "react";
+import { PhoneInput as a } from "react-international-phone";
+//#region src/components/InputPhone/InputPhone.tsx
+var o = ({ label: o, id: s, labelPosition: c = "top", required: l = !1, defaultCountry: u = "us", error: d, style: f, className: p, ...m }) => {
+	let h = i(), g = s || h, _ = r.useRef(null);
+	return /* @__PURE__ */ n(e, {
+		id: g,
+		className: t("inputPhone", p),
+		label: o,
+		labelPosition: c,
+		error: d,
+		required: l,
+		style: f,
+		children: /* @__PURE__ */ n(a, {
+			defaultCountry: u,
+			...m,
+			ref: _
+		})
+	});
+};
+//#endregion
+export { o as InputPhone };

package/src/components/Loader/AGENTS.md

@@ -0,0 +1,31 @@
+# Loader — Agent Usage Notes
+
+Import:
+
+```tsx
+import { Loader } from "@stamcat/craftsman/Loader";
+```
+
+Props:
+
+- Inherits all native `<div>` props.
+- `type` is required and must be one of:
+  - `"dots"`
+  - `"dots-trace"`
+  - `"dots-bounce"`
+  - `"dots-orbit"`
+  - `"dashes"`
+  - `"spinner"`
+  - `"swirl"`
+  - `"ball"`
+  - `"boxy"`
+  - `"factory"`
+- `color?: string` (default: `"black"`)
+- `width?: number` (optional, variant-dependent default behavior)
+- `styles?: React.CSSProperties` (inline style override)
+
+Example:
+
+```tsx
+<Loader type="spinner" color="var(--blue500)" width={40} aria-label="Loading" />
+```

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

@@ -1,8 +1,7 @@
-import { LoaderStyle } from '../styles/global/components/loaders';
+import { LoaderStyle } from './types';
 export type LoaderProps = React.ComponentProps<"div"> & {
     type: LoaderStyle;
     color?: string;
     width?: number;
-    styles?: React.CSSProperties;
 };
 export declare const Loader: React.FC<LoaderProps>;

package/src/components/Loader/Loader.esm.js

@@ -0,0 +1,19 @@
+"use client";
+import { loaders as e } from "./types.esm.js";
+import t from "./loaders.module.esm.js";
+import n from "clsx";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/components/Loader/Loader.tsx
+var i = (i) => {
+	let { type: a, color: o = "black", width: s, className: c, style: l, ...u } = i, d = e[a](o, s);
+	return /* @__PURE__ */ r("div", {
+		className: n("loader", t[a], c),
+		style: {
+			...d,
+			...l
+		},
+		...u
+	});
+};
+//#endregion
+export { i as Loader };

package/src/components/Loader/loaders.module.css

@@ -0,0 +1 @@
+@layer craftsman-base{._dots_mugu5_2{aspect-ratio:1;width:var(--_l5w);margin:0 var(--_l5w2);border-radius:50%;animation:1s linear infinite alternate _l5_mugu5_1}@keyframes _l5_mugu5_1{0%{box-shadow:var(--_l5w2) 0 var(--_l5c), var(--_l5w3) 0 color-mix(in srgb, var(--_l5c) 80%, white 75%);background:var(--_l5c)}33%{box-shadow:var(--_l5w2) 0 var(--_l5c), var(--_l5w3) 0 color-mix(in srgb, var(--_l5c) 80%, white 75%);background:color-mix(in srgb, var(--_l5c) 80%, white 75%)}66%{box-shadow:var(--_l5w2) 0 color-mix(in srgb, var(--_l5c) 80%, white 75%), var(--_l5w3) 0 var(--_l5c);background:color-mix(in srgb, var(--_l5c) 80%, white 75%)}to{box-shadow:var(--_l5w2) 0 color-mix(in srgb, var(--_l5c) 80%, white 75%), var(--_l5w3) 0 var(--_l5c);background:var(--_l5c)}}@keyframes _l3_mugu5_1{to{transform:rotate(1turn)}}._dots-trace_mugu5_41{width:var(--_dtw);aspect-ratio:4;background:radial-gradient(circle closest-side, var(--_dtc) 90%, #0000) 0/33.3333% 100% space;clip-path:inset(0 100% 0 0);animation:1s steps(4,end) infinite _l1_mugu5_1}@keyframes _l1_mugu5_1{to{clip-path:inset(0 -34% 0 0)}}._dots-orbit_mugu5_53{width:var(--_dow);aspect-ratio:1;background:var(--_doc);border-radius:50%;animation:2s linear infinite _l22-0_mugu5_1;display:grid}._dots-orbit_mugu5_53:before,._dots-orbit_mugu5_53:after{content:"";background:inherit;border-radius:50%;grid-area:1/1;margin:15%;animation:1s infinite _l22_mugu5_1;transform:rotate(0)translate(150%)}._dots-orbit_mugu5_53:after{animation-delay:-.5s}@keyframes _l22-0_mugu5_1{to{transform:rotate(1turn)}}@keyframes _l22_mugu5_1{to{transform:rotate(1turn)translate(150%)}}._dashes_mugu5_83{width:var(--_dshw);height:calc(var(--_dshw) * .3);background:linear-gradient(var(--_dshc) 0 0) left/var(--_dshw2) 4px, linear-gradient(var(--_dshc) 0 0) center/var(--_dshw2) 4px, linear-gradient(var(--_dshc) 0 0) right/var(--_dshw2) 4px;background-repeat:no-repeat;animation:1s linear infinite _dashes_mugu5_83}@keyframes _dashes_mugu5_83{0%{background-size:var(--_dshw2) 4px, var(--_dshw2) 4px, var(--_dshw2) 4px;opacity:1}33%{background-size:var(--_dshw2) var(--_dshw2), var(--_dshw2) 4px, var(--_dshw2) 4px;opacity:.7}66%{background-size:var(--_dshw2) 4px, var(--_dshw2) var(--_dshw2), var(--_dshw2) 4px;opacity:.7}to{background-size:var(--_dshw2) 4px, var(--_dshw2) 4px, var(--_dshw2) var(--_dshw2);opacity:1}}._spinner_mugu5_108{width:var(--_spnw);aspect-ratio:1;border:var(--_spnw2) solid color-mix(in srgb, var(--_spnc) 20%, transparent);border-right-color:var(--_spnc);border-radius:50%;animation:1s linear infinite _l2_mugu5_1}@keyframes _l2_mugu5_1{to{transform:rotate(1turn)}}._swirl_mugu5_121{width:var(--_swrlw);padding:var(--_swrlw2);aspect-ratio:1;background:var(--_swrlc);--_m:conic-gradient(#0000 10%,#000), linear-gradient(#000 0 0) content-box;-webkit-mask:var(--_m);-webkit-mask:var(--_m);mask:var(--_m);-webkit-mask-composite:source-out;border-radius:50%;animation:1s linear infinite _l3_mugu5_1;-webkit-mask-composite:source-out;mask-composite:subtract}._ball_mugu5_141{width:var(--_ballw);aspect-ratio:1;background:radial-gradient(farthest-side, var(--_ballc) 95%, #0000) 50% 1px/var(--_ballw2) var(--_ballw2) no-repeat, radial-gradient(farthest-side, #0000 calc(100% - var(--_ballw2)), #ccc 0);border-radius:50%;animation:2s linear infinite _l9_mugu5_1}@keyframes _l9_mugu5_1{to{transform:rotate(1turn)}}._boxy_mugu5_153{width:var(--_boxw);height:var(--_boxw2);background:linear-gradient(var(--_boxc) 0 0) left -25% top 0/20% 100% no-repeat #ddd;animation:1s steps(6,end) infinite _l7_mugu5_1;-webkit-mask:linear-gradient(90deg,#000 70%,#0000 0) 0/20% 100%}@keyframes _l7_mugu5_1{to{background-position:right -25% top 0}}}

package/src/components/Loader/loaders.module.esm.js

@@ -0,0 +1,21 @@
+import './loaders.module.css';//#region src/components/Loader/loaders.module.scss
+var e = "_dots_mugu5_2", t = "_l5_mugu5_1", n = "_dots-trace_mugu5_41", r = "_l1_mugu5_1", i = "_dots-orbit_mugu5_53", a = "_l22-0_mugu5_1", o = "_l22_mugu5_1", s = "_dashes_mugu5_83", c = "_spinner_mugu5_108", l = "_l2_mugu5_1", u = "_swirl_mugu5_121", d = "_l3_mugu5_1", f = "_ball_mugu5_141", p = "_l9_mugu5_1", m = "_boxy_mugu5_153", h = "_l7_mugu5_1", g = {
+	dots: e,
+	l5: t,
+	dotsTrace: n,
+	l1: r,
+	dotsOrbit: i,
+	l220: a,
+	l22: o,
+	dashes: s,
+	spinner: c,
+	l2: l,
+	swirl: u,
+	l3: d,
+	ball: f,
+	l9: p,
+	boxy: m,
+	l7: h
+};
+//#endregion
+export { f as ball, m as boxy, s as dashes, g as default, e as dots, i as dotsOrbit, n as dotsTrace, r as l1, l as l2, o as l22, a as l220, d as l3, t as l5, h as l7, p as l9, c as spinner, u as swirl };

package/src/{styles/global/components → components/Loader}/loaders.module.scss

@@ -1,3 +1,4 @@
+@layer craftsman-base {
 .dots {
     aspect-ratio: 1;
     border-radius: 50%;
@@ -243,4 +244,4 @@
 //   0%,70% {transform:translate(0)}
 //   100%  {transform:translate(200%)}
 // }
-
+}

package/src/components/Modal/AGENTS.md

@@ -0,0 +1,47 @@
+# Modal — Agent Usage Notes
+
+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>
+</>
+```

package/src/components/Modal/Modal.css

@@ -0,0 +1 @@
+.modal.wrapper,.modal .background{width:100%;height:100%;position:fixed;inset:0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes slideIn{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes slideOut{0%{transform:translateY(0)}to{transform:translateY(100%)}}@layer craftsman-component{.modal.wrapper{z-index:1000;justify-content:center;align-items:center;display:flex}.modal .background{z-index:1001;background-color:#00000080;animation-fill-mode:forwards}.modal .background[data-is-closing=true]{animation:.3s ease-in-out fadeOut}.modal .background[data-is-closing=false]{animation:.3s ease-in-out fadeIn}.modal .content{padding:var(--w-gutter);z-index:1002;background-color:var(--white);-webkit-overflow-scrolling:touch;touch-action:pan-y;max-height:80vh;animation-fill-mode:forwards;overflow-y:auto}.modal .content[data-is-closing=true]{animation:.3s ease-in-out slideOut}.modal .content[data-is-closing=false]{animation:.3s ease-in-out slideIn}.modal .content.panel{height:100%;position:fixed;top:0;right:0}.modal .content.dialog{border-radius:8px}.modal .content>header{width:100%;margin-bottom:calc(var(--w-gutter) * .5);justify-content:space-between;display:inline-flex}.modal .content>header>button:only-child{margin-left:auto}.modal .actionContainer{margin-top:calc(var(--w-gutter) * 2);background-color:var(--white);gap:var(--w-gutter);height:fit-content;display:flex}.modal .closeModal{border-radius:50%;justify-content:center;width:30px;height:30px;padding:0;text-decoration:none;display:inline-flex}@media (width>=0) and (width<=660px){.modal .content.panel,.modal .content.dialog{width:100%;height:100%}}@media (width>=660px){.modal .content.panel{width:calc((var(--w-column) * 4) + (var(--w-gutter) * 3))}.modal .content.dialog{width:calc((var(--w-column) * 6) + (var(--w-gutter) * 5))}}@media (width>=1040px){.modal .content.dialog{width:calc((var(--w-column) * 8) + (var(--w-gutter) * 7))}}}

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

@@ -8,7 +8,6 @@ export interface ModalProps extends React.ComponentPropsWithoutRef<"div"> {
     backgroundDismiss?: boolean;
     hideDismissIcon?: boolean;
     footer?: React.ReactNode;
-    styles?: React.CSSProperties;
 }
 type ModalState = {
     isClosing: boolean;

package/src/components/Modal/Modal.scss

@@ -0,0 +1,150 @@
+@use "../../styles/global/components/modal";
+@use "../../styles/utilities/_functions" as u;
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes slideIn {
+  from {
+    transform: translateY(100%);
+  }
+
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideOut {
+  from {
+    transform: translateY(0);
+  }
+
+  to {
+    transform: translateY(100%);
+  }
+}
+@layer craftsman-component {
+    .modal {
+        &.wrapper {
+            @extend %modal-overlay;
+            z-index: 1000;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+
+        .background {
+            @extend %modal-overlay;
+            z-index: 1001;
+            background-color: rgba(0, 0, 0, 0.5);
+            animation-fill-mode: forwards;
+
+            &[data-is-closing="true"] {
+                animation: fadeOut 0.3s ease-in-out;
+            }
+
+            &[data-is-closing="false"] {
+                animation: fadeIn 0.3s ease-in-out;
+            }
+        }
+
+        .content {
+            padding: #{u.width("gutter")};
+            z-index: 1002;
+            background-color: var(--white);
+            max-height: 80vh;
+            overflow-y: auto;
+            -webkit-overflow-scrolling: touch;
+            touch-action: pan-y;
+            animation-fill-mode: forwards;
+
+            &[data-is-closing="true"] {
+                animation: slideOut 0.3s ease-in-out;
+            }
+
+            &[data-is-closing="false"] {
+                animation: slideIn 0.3s ease-in-out;
+            }
+
+            &.panel {
+                position: fixed;
+                top: 0;
+                right: 0;
+                height: 100%;
+            }
+
+            &.dialog {
+                border-radius: 8px;
+            }
+
+            > header {
+                display: inline-flex;
+                width: 100%;
+                justify-content: space-between;
+                margin-bottom: #{u.width("gutter", 0.5)};
+
+                > button:only-child {
+                margin-left: auto;
+                }
+            }
+        }
+
+        .actionContainer {
+            margin-top: #{u.width("gutter", 2)};
+            background-color: var(--white);
+            height: fit-content;
+            display: flex;
+            gap: #{u.width("gutter")};
+        }
+        .closeModal {
+            text-decoration: none;
+            height: 30px;
+            width: 30px;
+            border-radius: 50%;
+            padding: 0;
+            display: inline-flex;
+            justify-content: center;
+        };
+
+        @include u.breakpoint(mobileOnly) {
+        .content.panel,
+        .content.dialog {
+            width: 100%;
+            height: 100%;
+        }
+        }
+
+        @include u.breakpoint(tablet) {
+        .content.panel {
+            width: #{u.width("column", 4)};
+        }
+
+        .content.dialog {
+            width: #{u.width("column", 6)};
+        }
+        }
+
+        @include u.breakpoint(desktop) {
+            .content.dialog {
+                width: #{u.width("column", 8)};
+            }
+        }
+    }
+}

package/src/components/Modal/Modal2.esm.js

@@ -0,0 +1,53 @@
+"use client";
+import { Button as e } from "../Button/Button.esm.js";
+import { color as t } from "../../styles/utilities/color.esm.js";
+import './Modal.css';/* empty css          */
+import n from "clsx";
+import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
+import o from "react";
+import { LuX as s } from "react-icons/lu";
+//#region src/components/Modal/Modal.tsx
+var c = class extends o.PureComponent {
+	state = { isClosing: !1 };
+	onDismiss = () => {
+		this.props.onDismiss && (this.setState({ isClosing: !0 }), setTimeout(() => {
+			this.props.onDismiss && this.props.onDismiss(), this.setState({ isClosing: !1 });
+		}, 280));
+	};
+	onClickBackground = () => {
+		(this.props.backgroundDismiss ?? !0) === !0 && this.onDismiss();
+	};
+	render() {
+		let o = this.props.type || "dialog";
+		return this.props.visible ? /* @__PURE__ */ a("div", {
+			className: n("modal", "wrapper", this.props.className),
+			style: this.props.style,
+			children: [/* @__PURE__ */ a("div", {
+				className: n("content", o),
+				"data-is-closing": this.state.isClosing,
+				children: [
+					/* @__PURE__ */ a("header", { children: [this.props.header && /* @__PURE__ */ i(r, { children: this.props.header }), !this.props.hideDismissIcon && /* @__PURE__ */ i(e, {
+						variant: "primary",
+						className: "closeModal",
+						onClick: this.onDismiss,
+						children: /* @__PURE__ */ i(s, {
+							fill: t("white"),
+							size: 18
+						})
+					})] }),
+					/* @__PURE__ */ i("section", { children: this.props.children }),
+					this.props.footer && /* @__PURE__ */ i("footer", {
+						className: "actionContainer",
+						children: this.props.footer
+					})
+				]
+			}), /* @__PURE__ */ i("div", {
+				className: "background",
+				"data-is-closing": this.state.isClosing,
+				onClick: this.onClickBackground
+			})]
+		}) : /* @__PURE__ */ i(r, {});
+	}
+};
+//#endregion
+export { c as Modal };