@caseparts-org/caseblocks 0.0.118 → 0.0.120

package/dist/assets/Modal.css

@@ -1 +1 @@
-._overlay_1du2l_1{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}._container_1du2l_11{background-color:var(--surface-surface-primary);color:var(--text-text-primary);border-radius:var(--border-radius-sm);box-shadow:0 4px 6px #0000001a;width:min(800px,92vw);max-height:80vh;display:flex;flex-direction:column;overflow:hidden}@media (max-width:767px){._container_1du2l_11{border-radius:0;width:100%;box-shadow:none;height:100dvh;max-height:100dvh}}._header_1du2l_30{position:sticky;top:0;display:flex;flex-direction:row;align-items:center;justify-content:space-between;background-color:var(--surface-surface-secondary);border-bottom:1px solid var(--border-border-secondary-btn);padding:var(--spacing-spacing-2xs);z-index:1}._closeButton_1du2l_43{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background:transparent;padding:var(--spacing-spacing-4xs);cursor:pointer;display:flex;align-items:center;justify-content:center;color:inherit;padding:0}._content_1du2l_56{overflow:auto;padding:var(--spacing-spacing-default)}@media (max-width:767px){._content_1du2l_56{padding:var(--spacing-spacing-2xs)}}._headerPlain_1du2l_64{background-color:transparent;border-bottom:none}
+._overlay_1mnoo_1{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}._container_1mnoo_11{background-color:var(--surface-surface-primary);color:var(--text-text-primary);border-radius:var(--border-radius-sm);box-shadow:0 4px 6px #0000001a;width:min(800px,92vw);max-height:80vh;display:flex;flex-direction:column;overflow:hidden}@media (max-width:767px){._container_1mnoo_11{border-radius:0;width:100%;box-shadow:none;height:100dvh;max-height:100dvh}}._toolbar_1mnoo_30{position:sticky;top:0;display:flex;flex-direction:row;align-items:center;justify-content:space-between;background-color:var(--surface-surface-secondary);border-bottom:1px solid var(--border-border-secondary-btn);padding:var(--spacing-spacing-2xs);gap:var(--spacing-spacing-2xs);z-index:1}._toolbarPlain_1mnoo_44{background-color:transparent;border-bottom:none}._headerGroup_1mnoo_49{display:flex;flex-direction:row;align-items:center;gap:var(--spacing-spacing-2xs);flex:1 1 0}._headerLeft_1mnoo_57{justify-content:flex-start}._headerRight_1mnoo_61{justify-content:flex-end}._closeButton_1mnoo_65{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background:transparent;padding:var(--spacing-spacing-4xs);cursor:pointer;display:flex;align-items:center;justify-content:center;color:inherit;padding:0}._content_1mnoo_78{overflow:auto;padding:var(--spacing-spacing-default)}@media (max-width:767px){._content_1mnoo_78{padding:var(--spacing-spacing-2xs)}}

package/dist/main-client.d.ts

@@ -24,6 +24,8 @@ export { AddToCart } from './molecules/AddToCart/AddToCart';
 export type { CategoryWithChildren as MainCategory, Category } from './molecules/CategoryNav/CategoryNav';
 export { Modal } from './molecules/Modal/Modal';
 export type { ModalProps } from './molecules/Modal/Modal';
+export { ImageViewer } from './molecules/ImageViewer/ImageViewer';
+export type { ImageViewerProps } from './molecules/ImageViewer/ImageViewer';
 export { MainNav } from './organisms/MainNav/MainNav';
 export type { MainNavProps } from './organisms/MainNav/MainNav';
 export { ChipSelector } from './organisms/ChipSelector/ChipSelector';

package/dist/main-client.js

@@ -6,17 +6,17 @@ import { Icon as l } from "./atoms/Icon/Icon.js";
 import { Root as d } from "./atoms/Root/Root.js";
 import { Separator as C } from "./atoms/Separator/Separator.js";
 import { Text as k } from "./atoms/Text/Text.js";
-import { Input as B } from "./atoms/Input/Input.js";
+import { Input as S } from "./atoms/Input/Input.js";
 import { Link as v } from "./atoms/Link/Link.js";
 import { linkClassName as L } from "./atoms/Link/linkClassName.js";
 import { configureLink as h, routerOverride as s } from "./atoms/Link/configureLink.js";
 import { LinkButton as F } from "./atoms/LinkButton/LinkButton.js";
 import { configureImage as N } from "./atoms/Image/configureImage.js";
-import { Logo as y } from "./molecules/Logo/Logo.js";
-import { SearchBox as w } from "./molecules/SearchBox/SearchBox.js";
-import { QuantityInput as G } from "./molecules/QuantityInput/QuantityInput.js";
-import { Pricing as Q } from "./molecules/Pricing/Pricing.js";
-import { Availability as V } from "./molecules/Availability/Availability.js";
+import { Logo as w } from "./molecules/Logo/Logo.js";
+import { SearchBox as H } from "./molecules/SearchBox/SearchBox.js";
+import { QuantityInput as z } from "./molecules/QuantityInput/QuantityInput.js";
+import { Pricing as O } from "./molecules/Pricing/Pricing.js";
+import { Availability as R } from "./molecules/Availability/Availability.js";
 import { Avatar as q } from "./molecules/Avatar/Avatar.js";
 import { BannerCard as E } from "./molecules/BannerCard/BannerCard.js";
 import { CardLink as K } from "./molecules/CardLink/CardLink.js";
@@ -32,47 +32,49 @@ import { ToggleView as io } from "./molecules/ToggleView/ToggleView.js";
 import { CartSlideInPanel as uo } from "./molecules/Cart/CartSlideInPanel.js";
 import { StatefulButton as Co } from "./molecules/StatefulButton/StatefulButton.js";
 import { AnimatedCheckMark as ko } from "./molecules/StatefulButton/AnimatedCheckmark.js";
-import { AddToCart as Bo } from "./molecules/AddToCart/AddToCart.js";
+import { AddToCart as So } from "./molecules/AddToCart/AddToCart.js";
 import { Modal as vo } from "./molecules/Modal/Modal.js";
-import { MainNav as Lo } from "./organisms/MainNav/MainNav.js";
-import { ChipSelector as ho } from "./organisms/ChipSelector/ChipSelector.js";
-import { Product as To } from "./organisms/Product/Product.js";
-import { Carousel as Mo } from "./organisms/Carousel/Carousel.js";
-import { Footer as bo } from "./organisms/Footer/Footer.js";
+import { ImageViewer as Lo } from "./molecules/ImageViewer/ImageViewer.js";
+import { MainNav as ho } from "./organisms/MainNav/MainNav.js";
+import { ChipSelector as To } from "./organisms/ChipSelector/ChipSelector.js";
+import { Product as Mo } from "./organisms/Product/Product.js";
+import { Carousel as bo } from "./organisms/Carousel/Carousel.js";
+import { Footer as yo } from "./organisms/Footer/Footer.js";
 export {
   fo as Account,
-  Bo as AddToCart,
+  So as AddToCart,
   ko as AnimatedCheckMark,
-  V as Availability,
+  R as Availability,
   q as Avatar,
   E as BannerCard,
   W as Breadcrumbs,
   e as Button,
   K as CardLink,
-  Mo as Carousel,
+  bo as Carousel,
   uo as CartSlideInPanel,
   ao as Chip,
-  ho as ChipSelector,
+  To as ChipSelector,
   f as Column,
   p as Flex,
-  bo as Footer,
+  yo as Footer,
   x as Grid,
   n as Head,
   _ as HorizontalScroll,
   l as Icon,
-  B as Input,
+  Lo as ImageViewer,
+  S as Input,
   v as Link,
   F as LinkButton,
-  y as Logo,
-  Lo as MainNav,
+  w as Logo,
+  ho as MainNav,
   vo as Modal,
   Y as NotFound,
   po as Popover,
-  Q as Pricing,
-  To as Product,
-  G as QuantityInput,
+  O as Pricing,
+  Mo as Product,
+  z as QuantityInput,
   d as Root,
-  w as SearchBox,
+  H as SearchBox,
   C as Separator,
   oo as SlideInPanel,
   Co as StatefulButton,

package/dist/molecules/Account/Account.js

@@ -1,4 +1,4 @@
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { jsx as n, jsxs as t } from "react/jsx-runtime";
 import { getHideAtStyles as m } from "../../atoms/HideAt.js";
 import { Icon as f } from "../../atoms/Icon/Icon.js";
 import { Text as c } from "../../atoms/Text/Text.js";
@@ -16,7 +16,7 @@ function y(i) {
   return i.account !== void 0;
 }
 function j(i) {
-  return i.isAccountLoading ? /* @__PURE__ */ t("div", { className: o.placeholder }) : y(i) ? /* @__PURE__ */ t(_, { ...i }) : /* @__PURE__ */ t(N, { ...i });
+  return i.isAccountLoading ? /* @__PURE__ */ n("div", { className: o.placeholder }) : y(i) ? /* @__PURE__ */ n(_, { ...i }) : /* @__PURE__ */ n(N, { ...i });
 }
 function _(i) {
   const {
@@ -27,17 +27,17 @@ function _(i) {
     isAccountLoading: h,
     ...l
   } = i;
-  return a ? /* @__PURE__ */ t(
+  return a ? /* @__PURE__ */ n(
     A,
     {
       position: "bottom right",
-      trigger: /* @__PURE__ */ n(
+      trigger: /* @__PURE__ */ t(
         "div",
         {
           className: g(o.loggedIn, m(s), r),
           ...l,
           children: [
-            /* @__PURE__ */ n(
+            /* @__PURE__ */ t(
               d,
               {
                 flexDirection: "column",
@@ -45,30 +45,30 @@ function _(i) {
                 hideAt: ["sm", "md"],
                 className: o.customer,
                 children: [
-                  /* @__PURE__ */ n(c, { size: "xxs", children: [
+                  /* @__PURE__ */ t(c, { size: "xxs", children: [
                     "Acct: ",
                     e == null ? void 0 : e.number
                   ] }),
-                  /* @__PURE__ */ n(c, { size: "sm", variant: "display", colorToken: "links", children: [
+                  /* @__PURE__ */ t(c, { size: "sm", variant: "display", colorToken: "links", children: [
                     "Hello ",
                     e == null ? void 0 : e.name
                   ] })
                 ]
               }
             ),
-            e.avatar ?? (e.initials ? /* @__PURE__ */ t(u, { initials: e.initials }) : null)
+            e.avatar ?? (e.initials ? /* @__PURE__ */ n(u, { initials: e.initials }) : null)
           ]
         }
       ),
       children: a
     }
-  ) : /* @__PURE__ */ n(
+  ) : /* @__PURE__ */ t(
     "div",
     {
       className: g(o.loggedIn, m(s), r),
       ...l,
       children: [
-        /* @__PURE__ */ n(
+        /* @__PURE__ */ t(
           d,
           {
             flexDirection: "column",
@@ -76,18 +76,15 @@ function _(i) {
             hideAt: ["sm", "md"],
             className: o.customer,
             children: [
-              /* @__PURE__ */ n(c, { size: "xxs", children: [
-                "Acct: ",
-                e == null ? void 0 : e.number
-              ] }),
-              /* @__PURE__ */ n(c, { size: "sm", variant: "display", colorToken: "links", children: [
+              /* @__PURE__ */ n(c, { size: "xxs", children: e == null ? void 0 : e.number }),
+              /* @__PURE__ */ t(c, { size: "sm", variant: "display", colorToken: "links", children: [
                 "Hello ",
                 e == null ? void 0 : e.name
               ] })
             ]
           }
         ),
-        e.avatar ?? (e.initials ? /* @__PURE__ */ t(u, { initials: e.initials }) : null)
+        e.avatar ?? (e.initials ? /* @__PURE__ */ n(u, { initials: e.initials }) : null)
       ]
     }
   );
@@ -101,7 +98,7 @@ function N(i) {
     isAccountLoading: h,
     ...l
   } = i;
-  return /* @__PURE__ */ n(
+  return /* @__PURE__ */ t(
     d,
     {
       flexDirection: "row",
@@ -113,7 +110,7 @@ function N(i) {
         r
       ),
       children: [
-        /* @__PURE__ */ t(
+        /* @__PURE__ */ n(
           p,
           {
             onClick: e,
@@ -123,7 +120,7 @@ function N(i) {
             children: "Sign In / Register"
           }
         ),
-        /* @__PURE__ */ t(f, { iconKey: "fa-kit fa-user-anon", size: "lg", hideAt: "lg" })
+        /* @__PURE__ */ n(f, { iconKey: "fa-kit fa-user-anon", size: "lg", hideAt: "lg" })
       ]
     }
   );

package/dist/molecules/ImageViewer/ImageViewer.d.ts

@@ -0,0 +1,8 @@
+export interface ImageViewerProps {
+    imgSrc: string;
+    zoomFactor?: number;
+    minZoomScale?: number;
+    maxZoomScale?: number;
+}
+export declare function ImageViewer({ imgSrc, zoomFactor, // Default 10% per wheel notch
+minZoomScale, maxZoomScale, }: ImageViewerProps): import("react/jsx-runtime").JSX.Element;

package/dist/molecules/ImageViewer/ImageViewer.js

@@ -0,0 +1,123 @@
+import { jsx as U } from "react/jsx-runtime";
+import { useRef as o, useEffect as Q } from "react";
+function Z({
+  imgSrc: j,
+  zoomFactor: O = 1.1,
+  // Default 10% per wheel notch
+  minZoomScale: x = 1,
+  maxZoomScale: z = 5
+  // 500%
+}) {
+  const D = o(null), a = o(null), d = o(null), h = o(1), g = o(0), p = o(0), P = o(null), y = o(!1), A = o(0), b = o(0), W = o(0), B = o(0), R = o(!1), u = o(/* @__PURE__ */ new Map()), T = o(0), q = o(1), L = o({ x: 0, y: 0 });
+  Q(() => {
+    const t = a.current, n = D.current;
+    if (!t || !n) return;
+    const s = () => {
+      const e = n.getBoundingClientRect();
+      t.height = e.height, t.width = e.width;
+      const c = t.getContext("2d");
+      c && (c.setTransform(1, 0, 0, 1, 0, 0), d.current = c, k());
+    };
+    s();
+    const r = new ResizeObserver(s);
+    return r.observe(n), s(), () => r.disconnect();
+  }, []);
+  const k = () => {
+    const t = a.current;
+    if (!d.current || !t) return;
+    d.current.clearRect(0, 0, t.width, t.height);
+    const n = new Image();
+    n.crossOrigin = "anonymous", n.src = j, n.onload = () => {
+      P.current = n, Y();
+    };
+  }, Y = () => {
+    const t = a.current, n = P.current;
+    if (!d.current || !t || !n) return;
+    const s = n.width / 2, r = n.height / 2, e = t.width / 2, c = t.height / 2, i = e - s, f = c - r;
+    h.current = 1, g.current = i, p.current = f, v();
+  }, E = (t) => {
+    const n = a.current;
+    if (!d.current || !n) return;
+    const s = t.deltaY < 0 ? O : 1 / O, r = h.current;
+    let e = r * s;
+    if (e = Math.max(x, Math.min(z, e)), h.current = e, e === x) {
+      Y();
+      return;
+    }
+    const { x: c, y: i } = X(t, n), f = (c - g.current) / r, w = (i - p.current) / r, m = c - f * e, l = i - w * e;
+    g.current = m, p.current = l, v();
+  }, H = (t) => {
+    var r;
+    const n = a.current;
+    if (!d.current || !n) return;
+    (r = a.current) == null || r.setPointerCapture(t.pointerId);
+    const s = X(t, n);
+    if (u.current.set(t.pointerId, s), u.current.size === 2) {
+      R.current = !0, y.current = !1;
+      const [e, c] = Array.from(u.current.values()), i = e.x - c.x, f = e.y - c.y, w = Math.sqrt(i * i + f * f);
+      T.current = w, q.current = h.current;
+      const m = (e.x + c.x) / 2, l = (e.y + c.y) / 2, M = (m - g.current) / h.current, C = (l - p.current) / h.current;
+      L.current = { x: M, y: C }, R.current = !0;
+    } else if (u.current.size === 1) {
+      const [e] = Array.from(u.current.values());
+      A.current = e.x, b.current = e.y, W.current = g.current, B.current = p.current, y.current = !0;
+    }
+  }, S = (t) => {
+    const n = a.current;
+    if (!d.current || !n) return;
+    const s = X(t, n);
+    if (u.current.has(t.pointerId)) {
+      if (u.current.set(t.pointerId, s), R.current && u.current.size === 2) {
+        const [r, e] = Array.from(u.current.values()), c = r.x - e.x, i = r.y - e.y, f = Math.sqrt(c * c + i * i), w = T.current;
+        if (w === 0) return;
+        const m = f / w;
+        let l = q.current * m;
+        if (l = Math.max(x, Math.min(z, l)), l === x) {
+          Y();
+          return;
+        }
+        const M = (r.x + e.x) / 2, C = (r.y + e.y) / 2, { x: G, y: J } = L.current, K = M - G * l, N = C - J * l;
+        h.current = l, g.current = K, p.current = N, v();
+      } else if (y.current && u.current.size === 1) {
+        const r = n.getBoundingClientRect(), e = t.clientX - r.left, c = t.clientY - r.top, i = e - A.current, f = c - b.current;
+        g.current = W.current + i, p.current = B.current + f, v();
+      }
+    }
+  }, I = (t) => {
+    u.current.delete(t.pointerId), u.current.size < 2 && (R.current = !1), u.current.size === 0 && (y.current = !1);
+    const n = a.current;
+    !d.current || !n || n.releasePointerCapture(t.pointerId);
+  }, V = I, F = I, X = (t, n) => {
+    const s = n.getBoundingClientRect();
+    return {
+      x: t.clientX - s.left,
+      y: t.clientY - s.top
+    };
+  }, v = () => {
+    const t = a.current, n = d.current, s = P.current;
+    !t || !n || !s || (n.setTransform(1, 0, 0, 1, 0, 0), n.clearRect(0, 0, t.width, t.height), n.setTransform(
+      h.current,
+      0,
+      0,
+      h.current,
+      g.current,
+      p.current
+    ), n.drawImage(s, 0, 0));
+  };
+  return /* @__PURE__ */ U("div", { ref: D, style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ U(
+    "canvas",
+    {
+      ref: a,
+      style: { width: "100%", height: "100%", display: "block", touchAction: "none" },
+      onWheel: E,
+      onPointerDown: H,
+      onPointerMove: S,
+      onPointerUp: I,
+      onPointerLeave: V,
+      onPointerCancel: F
+    }
+  ) });
+}
+export {
+  Z as ImageViewer
+};

package/dist/molecules/ImageViewer/ImageViewer.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { ImageViewer } from './ImageViewer';
+declare const meta: Meta<typeof ImageViewer>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/molecules/ImageViewer/ImageViewer.stories.js

@@ -0,0 +1,30 @@
+import { jsx as e } from "react/jsx-runtime";
+import { ImageViewer as o } from "./ImageViewer.js";
+const r = {
+  title: "Case Parts/Molecules/ImageViewer",
+  component: o,
+  parameters: {
+    layout: "fullscreen"
+  },
+  argTypes: {
+    imgSrc: { control: "text" },
+    zoomFactor: { control: { type: "number", min: 1, max: 2, step: 0.01 } },
+    minZoomScale: { control: { type: "number", min: 0.1, max: 2, step: 0.1 } },
+    maxZoomScale: { control: { type: "number", min: 2, max: 10, step: 0.5 } }
+  },
+  decorators: [
+    (t) => /* @__PURE__ */ e("div", { style: { height: "90dvh", width: "100%" }, children: /* @__PURE__ */ e(t, {}) })
+  ]
+}, c = {
+  name: "Default",
+  args: {
+    imgSrc: "https://cdnimg.webstaurantstore.com/images/products/large/573147/2989461.jpg",
+    zoomFactor: 1.1,
+    minZoomScale: 1,
+    maxZoomScale: 5
+  }
+};
+export {
+  c as Default,
+  r as default
+};

package/dist/molecules/Modal/Modal.d.ts

@@ -1,13 +1,29 @@
 import { default as React } from 'react';
 export type ModalHeaderSize = "sm" | "md" | "lg";
-export type ModalHeaderVariant = "default" | "plain";
+export type ModalTextVariant = "display" | "body";
+export type ModalToolbarVariant = "standard" | "plain";
 export interface ModalProps extends React.HTMLAttributes<HTMLDivElement> {
     isOpen: boolean;
-    caption?: string;
     onClose: () => void;
     closeOnOverlayClick?: boolean;
-    contentWrapperClassName?: string;
-    headerSize?: ModalHeaderSize;
-    headerVariant?: ModalHeaderVariant;
 }
-export declare function Modal({ isOpen, caption, onClose, closeOnOverlayClick, headerSize, headerVariant, className, contentWrapperClassName, children, ...otherProps }: ModalProps): import("react/jsx-runtime").JSX.Element | null;
+type ModalCompound = React.FC<ModalProps> & {
+    Toolbar: React.FC<ModalToolbarProps>;
+    Header: React.FC<ModalHeaderProps>;
+    CloseButton: React.FC<ModalCloseButtonProps>;
+    Content: React.FC<ModalContentProps>;
+};
+export interface ModalToolbarProps extends React.HTMLAttributes<HTMLDivElement> {
+    variant?: ModalToolbarVariant;
+}
+export interface ModalHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+    align?: "left" | "right";
+    size?: ModalHeaderSize;
+    variant?: ModalTextVariant;
+}
+export interface ModalCloseButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    size?: ModalHeaderSize;
+}
+export type ModalContentProps = React.HTMLAttributes<HTMLDivElement>;
+export declare const Modal: ModalCompound;
+export {};

package/dist/molecules/Modal/Modal.js

@@ -1,75 +1,67 @@
-import { jsx as a, jsxs as s } from "react/jsx-runtime";
-import { c as t } from "../../clsx-OuTLNxxd.js";
-import { Text as p } from "../../atoms/Text/Text.js";
-import { Icon as y } from "../../atoms/Icon/Icon.js";
-import '../../assets/Modal.css';const g = "_overlay_1du2l_1", x = "_container_1du2l_11", N = "_header_1du2l_30", T = "_closeButton_1du2l_43", k = "_content_1du2l_56", z = "_headerPlain_1du2l_64", e = {
-  overlay: g,
-  container: x,
-  header: N,
+import { jsx as r } from "react/jsx-runtime";
+import { c as a } from "../../clsx-OuTLNxxd.js";
+import { Text as _ } from "../../atoms/Text/Text.js";
+import { Icon as u } from "../../atoms/Icon/Icon.js";
+import '../../assets/Modal.css';const h = "_overlay_1mnoo_1", f = "_container_1mnoo_11", p = "_toolbar_1mnoo_30", b = "_toolbarPlain_1mnoo_44", g = "_headerGroup_1mnoo_49", v = "_headerLeft_1mnoo_57", y = "_headerRight_1mnoo_61", T = "_closeButton_1mnoo_65", x = "_content_1mnoo_78", n = {
+  overlay: h,
+  container: f,
+  toolbar: p,
+  toolbarPlain: b,
+  headerGroup: g,
+  headerLeft: v,
+  headerRight: y,
   closeButton: T,
-  content: k,
-  headerPlain: z
-}, B = {
+  content: x
+}, C = {
   sm: "sm",
   md: "md",
   lg: "lg"
-}, C = {
+}, z = {
   sm: "sm",
   md: "md",
   lg: "md"
-};
-function I({
-  isOpen: i,
-  caption: o,
-  onClose: l,
-  closeOnOverlayClick: d = !0,
-  headerSize: n = "md",
-  headerVariant: r = "default",
-  className: m,
-  contentWrapperClassName: u,
-  children: _,
-  ...h
-}) {
-  if (!i) return null;
-  const f = (c) => {
-    d && c.target === c.currentTarget && l();
-  }, v = r === "default" && !!o;
-  return /* @__PURE__ */ a("div", { className: t(e.overlay), onClick: f, children: /* @__PURE__ */ s("div", { className: t(e.container, m), role: "dialog", "aria-modal": "true", ...h, children: [
-    /* @__PURE__ */ s(
-      "div",
-      {
-        className: t(
-          e.header,
-          e[`header-${n}`],
-          r === "plain" && e.headerPlain
-        ),
-        children: [
-          v ? /* @__PURE__ */ a(
-            p,
-            {
-              as: "div",
-              size: B[n],
-              variant: "display",
-              className: e.caption,
-              children: o
-            }
-          ) : /* @__PURE__ */ a("div", { className: e.captionSpacer }),
-          /* @__PURE__ */ a(
-            "button",
-            {
-              type: "button",
-              className: e.closeButton,
-              "aria-label": "Close",
-              onClick: l,
-              children: /* @__PURE__ */ a(y, { iconKey: "fa-regular fa-xmark", size: C[n] })
-            }
-          )
-        ]
-      }
-    ),
-    /* @__PURE__ */ a("div", { className: t(e.content, u), children: _ })
-  ] }) });
-}
+}, c = ({
+  isOpen: o,
+  onClose: e,
+  closeOnOverlayClick: t = !0,
+  className: l,
+  children: s,
+  ...i
+}) => {
+  if (!o) return null;
+  const d = (m) => {
+    t && m.target === m.currentTarget && e();
+  };
+  return /* @__PURE__ */ r("div", { className: a(n.overlay), onClick: d, children: /* @__PURE__ */ r("div", { className: a(n.container, l), role: "dialog", "aria-modal": "true", ...i, children: s }) });
+}, B = ({ variant: o = "standard", className: e, children: t, ...l }) => /* @__PURE__ */ r(
+  "div",
+  {
+    className: a(n.toolbar, o === "plain" && n.toolbarPlain, e),
+    ...l,
+    children: t
+  }
+), N = ({
+  align: o = "left",
+  size: e = "md",
+  variant: t = "display",
+  className: l,
+  children: s,
+  ...i
+}) => {
+  const d = typeof s == "string";
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      className: a(n.headerGroup, o === "left" ? n.headerLeft : n.headerRight, l),
+      ...i,
+      children: d ? /* @__PURE__ */ r(_, { as: "div", size: C[e], variant: t, children: s }) : s
+    }
+  );
+}, G = ({ size: o = "md", className: e, ...t }) => /* @__PURE__ */ r("button", { type: "button", className: a(n.closeButton, e), "aria-label": "Close", ...t, children: /* @__PURE__ */ r(u, { iconKey: "fa-regular fa-xmark", size: z[o] }) }), L = ({ className: o, children: e, ...t }) => /* @__PURE__ */ r("div", { className: a(n.content, o), ...t, children: e });
+c.Toolbar = B;
+c.Header = N;
+c.CloseButton = G;
+c.Content = L;
 export {
-  I as Modal
+  c as Modal
 };

package/dist/molecules/Modal/Modal.stories.js

@@ -1,110 +1,81 @@
-import { jsx as e, jsxs as d } from "react/jsx-runtime";
-import { useState as l } from "react";
-import { Modal as a } from "./Modal.js";
-import { Text as n } from "../../atoms/Text/Text.js";
-import { Button as t } from "../../atoms/Button/Button.js";
-const S = {
+import { jsx as e, jsxs as n } from "react/jsx-runtime";
+import { useState as t } from "react";
+import { Modal as l } from "./Modal.js";
+import { Text as r } from "../../atoms/Text/Text.js";
+import { Button as s } from "../../atoms/Button/Button.js";
+const v = {
   title: "Case Parts/Molecules/Modal",
-  component: a,
+  component: l,
   argTypes: {
-    isOpen: {
-      control: { type: "boolean" },
-      description: "Controls visibility of the modal"
-    },
-    caption: {
-      control: { type: "text" },
-      description: "Caption text displayed in the header"
-    },
-    closeOnOverlayClick: {
-      control: { type: "boolean" },
-      description: "Close when clicking on overlay"
-    },
-    headerSize: {
-      control: { type: "radio" },
-      options: ["sm", "md", "lg"],
-      description: "Header size controlling caption and X icon"
-    },
-    headerVariant: {
-      control: { type: "radio" },
-      options: ["default", "plain"],
-      description: "Header variant: styled (default) or plain"
-    }
+    isOpen: { control: { type: "boolean" }, description: "Controls visibility of the modal" },
+    closeOnOverlayClick: { control: { type: "boolean" }, description: "Close when clicking on overlay" }
   },
-  args: {
-    isOpen: !0,
-    caption: "Sample Modal",
-    closeOnOverlayClick: !0,
-    headerSize: "md",
-    headerVariant: "default"
-  }
+  args: { isOpen: !0, closeOnOverlayClick: !0 }
 };
-function m(i) {
-  const [o, r] = l(!!i.isOpen);
-  return /* @__PURE__ */ d("div", { style: { padding: 24 }, children: [
-    /* @__PURE__ */ e(t, { variant: "primary", size: "md", onClick: () => r(!0), children: "Open Modal" }),
-    /* @__PURE__ */ d(
-      a,
-      {
-        isOpen: o,
-        caption: i.caption ?? "Sample Modal",
-        onClose: () => r(!1),
-        closeOnOverlayClick: i.closeOnOverlayClick ?? !0,
-        headerSize: i.headerSize ?? "md",
-        headerVariant: i.headerVariant ?? "default",
-        children: [
-          /* @__PURE__ */ e(n, { as: "p", size: "md", children: "This is a reusable modal with a non-scrollable header. Click the overlay or the X to close." }),
-          /* @__PURE__ */ e("div", { style: { height: 600 }, children: /* @__PURE__ */ e(n, { as: "p", size: "sm", children: "Scrollable content spacer..." }) })
-        ]
-      }
-    )
+function C(i) {
+  const [a, o] = t(!!i.isOpen);
+  return /* @__PURE__ */ n("div", { style: { padding: 24 }, children: [
+    /* @__PURE__ */ e(s, { variant: "primary", size: "md", onClick: () => o(!0), children: "Open Modal" }),
+    /* @__PURE__ */ n(l, { isOpen: a, onClose: () => o(!1), closeOnOverlayClick: i.closeOnOverlayClick ?? !0, children: [
+      /* @__PURE__ */ n(l.Toolbar, { children: [
+        /* @__PURE__ */ e(l.Header, { align: "left", size: "lg", variant: "display", children: "Sample Modal" }),
+        /* @__PURE__ */ e(l.Header, { align: "right", children: /* @__PURE__ */ e(l.CloseButton, { onClick: () => o(!1) }) })
+      ] }),
+      /* @__PURE__ */ n(l.Content, { children: [
+        /* @__PURE__ */ e(r, { as: "p", size: "md", children: "This is a reusable modal with a non-scrollable toolbar. Click the overlay or the X to close." }),
+        /* @__PURE__ */ e("div", { style: { height: 600 }, children: /* @__PURE__ */ e(r, { as: "p", size: "sm", children: "Scrollable content spacer..." }) })
+      ] })
+    ] })
   ] });
 }
-const C = {
-  render: (i) => /* @__PURE__ */ e(m, { ...i })
+const k = {
+  render: (i) => /* @__PURE__ */ e(C, { ...i })
 };
-function h() {
-  const [i, o] = l(!1), [r, s] = l(!1), [p, c] = l(!1);
-  return /* @__PURE__ */ d("div", { style: { display: "grid", gap: 12 }, children: [
-    /* @__PURE__ */ e(t, { variant: "secondary", size: "sm", onClick: () => o(!0), children: "Small Header" }),
-    /* @__PURE__ */ e(
-      a,
-      {
-        isOpen: i,
-        caption: "Small Header",
-        onClose: () => o(!1),
-        headerSize: "sm",
-        children: /* @__PURE__ */ e(n, { as: "p", size: "sm", children: "Small header modal content." })
-      }
-    ),
-    /* @__PURE__ */ e(t, { variant: "primary", size: "md", onClick: () => s(!0), children: "Medium Header" }),
-    /* @__PURE__ */ e(
-      a,
-      {
-        isOpen: r,
-        caption: "Medium Header",
-        onClose: () => s(!1),
-        headerSize: "md",
-        children: /* @__PURE__ */ e(n, { as: "p", size: "md", children: "Medium header modal content." })
-      }
-    ),
-    /* @__PURE__ */ e(t, { variant: "cta-primary", size: "lg", onClick: () => c(!0), children: "Large Header" }),
-    /* @__PURE__ */ e(
-      a,
-      {
-        isOpen: p,
-        caption: "Large Header",
-        onClose: () => c(!1),
-        headerSize: "lg",
-        children: /* @__PURE__ */ e(n, { as: "p", size: "lg", children: "Large header modal content." })
-      }
-    )
+function g() {
+  const [i, a] = t(!1), [o, d] = t(!1), [m, c] = t(!1), [p, h] = t(!1);
+  return /* @__PURE__ */ n("div", { style: { width: "200px", display: "grid", gap: 12 }, children: [
+    /* @__PURE__ */ e(s, { variant: "secondary", size: "sm", onClick: () => a(!0), children: "Small Header" }),
+    /* @__PURE__ */ n(l, { isOpen: i, onClose: () => a(!1), children: [
+      /* @__PURE__ */ n(l.Toolbar, { children: [
+        /* @__PURE__ */ e(l.Header, { align: "left", size: "sm", variant: "display", children: "Small Header" }),
+        /* @__PURE__ */ e(l.Header, { align: "right", children: /* @__PURE__ */ e(l.CloseButton, { size: "sm", onClick: () => a(!1) }) })
+      ] }),
+      /* @__PURE__ */ e(l.Content, { children: /* @__PURE__ */ e(r, { as: "p", size: "sm", children: "Small header modal content." }) })
+    ] }),
+    /* @__PURE__ */ e(s, { variant: "primary", size: "md", onClick: () => d(!0), children: "Medium Header" }),
+    /* @__PURE__ */ n(l, { isOpen: o, onClose: () => d(!1), children: [
+      /* @__PURE__ */ n(l.Toolbar, { children: [
+        /* @__PURE__ */ e(l.Header, { align: "left", size: "md", variant: "display", children: "Medium Header" }),
+        /* @__PURE__ */ e(l.Header, { align: "right", children: /* @__PURE__ */ e(l.CloseButton, { size: "md", onClick: () => d(!1) }) })
+      ] }),
+      /* @__PURE__ */ e(l.Content, { children: /* @__PURE__ */ e(r, { as: "p", size: "md", children: "Medium header modal content." }) })
+    ] }),
+    /* @__PURE__ */ e(s, { variant: "cta-primary", size: "lg", onClick: () => c(!0), children: "Large Header" }),
+    /* @__PURE__ */ n(l, { isOpen: m, onClose: () => c(!1), children: [
+      /* @__PURE__ */ n(l.Toolbar, { children: [
+        /* @__PURE__ */ e(l.Header, { align: "left", size: "lg", variant: "display", children: "Large Header" }),
+        /* @__PURE__ */ e(l.Header, { align: "right", children: /* @__PURE__ */ e(l.CloseButton, { size: "md", onClick: () => c(!1) }) })
+      ] }),
+      /* @__PURE__ */ e(l.Content, { children: /* @__PURE__ */ e(r, { as: "p", size: "lg", children: "Large header modal content." }) })
+    ] }),
+    /* @__PURE__ */ e(s, { variant: "tertiary", size: "md", onClick: () => h(!0), children: "Custom Toolbar" }),
+    /* @__PURE__ */ n(l, { isOpen: p, onClose: () => h(!1), children: [
+      /* @__PURE__ */ n(l.Toolbar, { children: [
+        /* @__PURE__ */ e(l.Header, { align: "left", size: "md", variant: "display", children: "Custom Toolbar" }),
+        /* @__PURE__ */ n(l.Header, { align: "right", children: [
+          /* @__PURE__ */ e("button", { onClick: () => alert("Sent!"), children: "Send Email" }),
+          /* @__PURE__ */ e(l.CloseButton, { size: "md", onClick: () => h(!1) })
+        ] })
+      ] }),
+      /* @__PURE__ */ e(l.Content, { children: /* @__PURE__ */ e(r, { as: "p", size: "md", children: "Modal with custom toolbar functions." }) })
+    ] })
   ] });
 }
-const v = {
-  render: () => /* @__PURE__ */ e(h, {})
+const b = {
+  render: () => /* @__PURE__ */ e(g, {})
 };
 export {
-  C as Basic,
-  v as Sizes,
-  S as default
+  k as Basic,
+  b as Sizes,
+  v as default
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@caseparts-org/caseblocks",
   "private": false,
-  "version": "0.0.118",
+  "version": "0.0.120",
   "type": "module",
   "module": "dist/main.js",
   "types": "dist/main.d.ts",