@temp-spotwork/ui 1.4.3

package/dist/components/molecules/dialog/dialog.js

@@ -0,0 +1,100 @@
+import { jsx as r, jsxs as e } from "react/jsx-runtime";
+import { R as w, P as C, O as H, C as $, T as I, D as _ } from "../../../index-C0ZrzaoZ.js";
+import "../../styles/tailwind-config/index.js";
+import { Typography as j } from "../../styles/typography/typography.js";
+import "../../styles/colors/colors.js";
+import "../../styles/colors/colormap.js";
+import { t as c } from "../../../bundle-mjs-CAy1p0fn.js";
+import { Icons as R } from "../../atoms/icons/icons.js";
+import "../../atoms/icons/iconsSVGs/Large/Profile.js";
+import "../../atoms/icons/iconsSVGs/Small/Profile.js";
+import "../../../index-fN7hCOo3.js";
+import "react";
+import "../../atoms/form/dateselect/dateselect.js";
+import "../../atoms/form/time-picker/time-picker.js";
+import "../../atoms/form/dropdown/dropdown.js";
+import "../filter/dropdown-selector/styles.js";
+import "../../atoms/form/dropdown-search/dropdown-search.js";
+import "../../../index-CYyrKZeH.js";
+import "../../atoms/form/textfield/textfield.js";
+import "../../atoms/form/stepper/stepper.js";
+import "../../atoms/form/textarea/textarea.js";
+import "../../atoms/form/timeselect/timeselect.js";
+import { Button as d } from "../button/button.js";
+import "../datatables/cell/cell.js";
+import "../dataviz/donut-chart/donut-chart.js";
+import "../../../react-spring_web.modern-BLL8Qmtg.js";
+import "../form/radiogroup/radiogroup.js";
+import "../../../card-Cc2Qkiqr.js";
+import { useUIElementSize as n } from "./use-ui-element-size.js";
+function mr({
+  children: f,
+  width: h,
+  open: x,
+  title: m,
+  subTitle: a,
+  cancelButtonText: u = "Cancel",
+  setClose: t,
+  actionButtons: l,
+  hasPadding: g = !0,
+  hasActionButtons: o = !0,
+  hasBottomBorder: b = !1
+}) {
+  const { ref: v, height: s } = n(), { ref: y, height: N } = n(), i = 15;
+  return /* @__PURE__ */ r(w, { open: x, onOpenChange: t, children: /* @__PURE__ */ e(C, { children: [
+    /* @__PURE__ */ r(H, { className: "fixed inset-0 bg-surface-subduedInverted bg-opacity-50 " }),
+    /* @__PURE__ */ e(
+      $,
+      {
+        className: "fixed top-1/2 left-1/2 max-w-full  transform -translate-x-1/2 -translate-y-1/2 rounded-xl bg-surface-default shadow-[0rem_0rem_1rem_0rem_#B0B0B0] focus:outline-none",
+        style: { width: h, maxHeight: `calc(100vh - ${i}rem)` },
+        children: [
+          /* @__PURE__ */ e(I, { className: "p-xl border-b border-bcolor-subdued", ref: v, children: [
+            /* @__PURE__ */ e("div", { className: "flex items-start justify-between gap-xxl ", children: [
+              /* @__PURE__ */ r(j, { swStyle: 8, children: m }),
+              /* @__PURE__ */ r(R, { button: !0, icon: "Cross", handleClick: t })
+            ] }),
+            a && /* @__PURE__ */ r("div", { children: a })
+          ] }),
+          /* @__PURE__ */ r(_, { className: "sr-only", children: m }),
+          /* @__PURE__ */ e("div", { children: [
+            /* @__PURE__ */ r(
+              "div",
+              {
+                style: {
+                  // Calculate max height based on viewport height minus spacing and measured header/footer heights
+                  maxHeight: o ? `calc(100vh - ${i}rem - ${s}px - ${N}px)` : `calc(100vh - ${i}rem - ${s}px)`
+                },
+                className: c("overflow-auto", g && "p-xl", !o && "rounded-b-xl"),
+                children: f
+              }
+            ),
+            o && /* @__PURE__ */ e(
+              "div",
+              {
+                ref: y,
+                className: c("flex justify-between p-xl", b && "border-t border-bcolor-subdued"),
+                children: [
+                  /* @__PURE__ */ r(
+                    d,
+                    {
+                      text: u,
+                      size: "large",
+                      variant: "tertiary",
+                      color: "affirmative",
+                      onClick: t
+                    }
+                  ),
+                  l && /* @__PURE__ */ r("div", { className: "flex gap-xl", children: l.map((p) => /* @__PURE__ */ r(d, { size: "large", ...p }, p.text)) })
+                ]
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  ] }) });
+}
+export {
+  mr as Dialog
+};

package/dist/components/molecules/dialog/index.d.ts

@@ -0,0 +1 @@
+export * from './dialog';

package/dist/components/molecules/dialog/index.js

@@ -0,0 +1,4 @@
+import { Dialog as a } from "./dialog.js";
+export {
+  a as Dialog
+};

package/dist/components/molecules/dialog/use-ui-element-size.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Custom hook that tracks the size (width and height) of a DOM element.
+ *
+ * This hook uses ResizeObserver to efficiently monitor size changes of the referenced element
+ * without relying on window resize events. It's useful for responsive layouts, dynamic sizing,
+ * or when you need to know the exact dimensions of a component.
+ *
+ * @returns {Object} An object containing:
+ *   - ref: React ref to attach to the target DOM element
+ *   - width: Current width of the element in pixels
+ *   - height: Current height of the element in pixels
+ *
+ * @example
+ * ```tsx
+ * const MyComponent = () => {
+ *   const { ref, width, height } = useUIElementSize()
+ *
+ *   return (
+ *     <div ref={ref}>
+ *       <p>Width: {width}px</p>
+ *       <p>Height: {height}px</p>
+ *     </div>
+ *   )
+ * }
+ * ```
+ */
+export declare const useUIElementSize: () => {
+    height: number;
+    width: number;
+    ref: import('react').RefObject<HTMLDivElement>;
+};

package/dist/components/molecules/dialog/use-ui-element-size.js

@@ -0,0 +1,24 @@
+import { useRef as f, useState as r, useEffect as s } from "react";
+const d = () => {
+  const e = f(null), [n, u] = r(!1), [i, o] = r({
+    height: 0,
+    width: 0
+  });
+  return s(() => {
+    if (!e.current) return;
+    const c = () => {
+      e.current && o({
+        height: e.current.offsetHeight,
+        width: e.current.offsetWidth
+      });
+    }, t = new ResizeObserver(c);
+    return t.observe(e.current), () => {
+      t.disconnect();
+    };
+  }, [n]), s(() => {
+    u(!0);
+  }, []), { ref: e, ...i };
+};
+export {
+  d as useUIElementSize
+};

package/dist/components/molecules/drawer/Drawer.stories.d.ts

@@ -0,0 +1,22 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Drawer } from './drawer';
+
+declare const meta: Meta<typeof Drawer>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Basic: Story;
+export declare const DynamicWidth: Story;
+export declare const FullFeatured: Story;
+export declare const DelayedWidthChange: Story;
+export declare const NoOverlay: Story;
+export declare const SlowTransition: Story;
+export declare const PercentageWidth: Story;
+export declare const LargeWidth: Story;
+export declare const WithTitleOnly: Story;
+export declare const WithSubheading: Story;
+export declare const WithMetadata: Story;
+export declare const WithActionBox: Story;
+export declare const WithCallToAction: Story;
+export declare const LongContent: Story;
+export declare const ScrollBehavior: Story;
+export declare const DisabledScroll: Story;

package/dist/components/molecules/drawer/Drawer.stories.js

@@ -0,0 +1,383 @@
+import { jsx as e, jsxs as n } from "react/jsx-runtime";
+import { useState as c } from "react";
+import { Button as s } from "../button/button.js";
+import { Icons as m } from "../../atoms/icons/icons.js";
+import "../../atoms/icons/iconsSVGs/Large/Profile.js";
+import "../../atoms/icons/iconsSVGs/Small/Profile.js";
+import { Typography as h } from "../../styles/typography/typography.js";
+import { Drawer as p } from "./drawer.js";
+const k = {
+  title: "@spotwork-ui/molecules/Drawer",
+  component: p,
+  parameters: {
+    layout: "fullscreen"
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    open: {
+      control: "boolean",
+      description: "Controls if the drawer is open or closed"
+    },
+    width: {
+      control: "text",
+      description: "Width of the drawer (can be px, %, rem, etc.)"
+    },
+    transitionDuration: {
+      control: { type: "number", min: 100, max: 2e3, step: 100 },
+      description: "Duration of the transition animation in milliseconds"
+    },
+    hasOverlayBg: {
+      control: "boolean",
+      description: "Whether to show a background overlay"
+    },
+    enableWidthTransition: {
+      control: "boolean",
+      description: "Enable smooth width transitions using useSpring"
+    },
+    preserveScrollPosition: {
+      control: "boolean",
+      description: "Preserve scroll position when drawer reopens"
+    },
+    scrollBehavior: {
+      control: { type: "select" },
+      options: ["auto", "smooth"],
+      description: "Scroll behavior for the content area"
+    },
+    enableScroll: {
+      control: "boolean",
+      description: "Enable or disable scrolling in the content area"
+    }
+  }
+}, d = ({ args: t }) => {
+  const [a, r] = c(!1);
+  return /* @__PURE__ */ n("div", { className: "p-4", children: [
+    /* @__PURE__ */ e(s, { text: "Open Drawer", onClick: () => r(!0) }),
+    /* @__PURE__ */ e(p, { ...t, width: t.width || "400px", open: a, setOpen: r, children: /* @__PURE__ */ n("div", { className: "p-4", children: [
+      /* @__PURE__ */ e(h, { swStyle: 6, children: "Drawer Content" }),
+      /* @__PURE__ */ e("p", { className: "mt-2", children: "This is the main content area of the drawer." })
+    ] }) })
+  ] });
+}, v = ({ args: t }) => {
+  const [a, r] = c(!1), [i, o] = c("400px"), l = () => {
+    o(i === "400px" ? "600px" : "400px");
+  };
+  return /* @__PURE__ */ n("div", { className: "p-4", children: [
+    /* @__PURE__ */ n("div", { className: "flex gap-2 mb-4", children: [
+      /* @__PURE__ */ e(s, { text: "Open Drawer", onClick: () => r(!0) }),
+      /* @__PURE__ */ e(s, { text: `Toggle Width (${i})`, onClick: l, variant: "secondary" })
+    ] }),
+    /* @__PURE__ */ e(p, { ...t, open: a, setOpen: r, width: i, children: /* @__PURE__ */ n("div", { className: "p-4", children: [
+      /* @__PURE__ */ e(h, { swStyle: 6, children: "Dynamic Width Drawer" }),
+      /* @__PURE__ */ n("p", { className: "mt-2", children: [
+        "Current width: ",
+        i
+      ] }),
+      /* @__PURE__ */ e("p", { className: "mt-2", children: "This drawer demonstrates smooth width transitions." })
+    ] }) })
+  ] });
+}, b = ({ args: t }) => {
+  const [a, r] = c(!1), i = /* @__PURE__ */ n("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ e(m, { icon: "Profile" }),
+    /* @__PURE__ */ e("span", { children: "John Doe" }),
+    /* @__PURE__ */ e("span", { className: "text-subdued", children: "•" }),
+    /* @__PURE__ */ e("span", { children: "Last updated 2 hours ago" })
+  ] }), o = /* @__PURE__ */ n("div", { className: "flex gap-2", children: [
+    /* @__PURE__ */ e(m, { icon: "Edit", button: !0 }),
+    /* @__PURE__ */ e(m, { icon: "CopyLarge", button: !0 }),
+    /* @__PURE__ */ e(m, { icon: "KebabMenu", button: !0 })
+  ] });
+  return /* @__PURE__ */ n("div", { className: "p-4", children: [
+    /* @__PURE__ */ e(s, { text: "Open Full Featured Drawer", onClick: () => r(!0) }),
+    /* @__PURE__ */ e(
+      p,
+      {
+        ...t,
+        width: t.width || "500px",
+        open: a,
+        setOpen: r,
+        title: "Project Details",
+        subheading: "Manage your project settings and configurations",
+        metadata: i,
+        actionBox: o,
+        buttonProps: {
+          text: "Save Changes",
+          onClick: () => console.log("Save clicked")
+        },
+        children: /* @__PURE__ */ n("div", { className: "p-4 space-y-4", children: [
+          /* @__PURE__ */ n("div", { children: [
+            /* @__PURE__ */ e(h, { swStyle: 6, children: "Project Information" }),
+            /* @__PURE__ */ e("p", { className: "mt-2 text-subdued", children: "This is a comprehensive example showing all drawer features including title, subheading, metadata, action buttons, and main content area." })
+          ] }),
+          /* @__PURE__ */ n("div", { className: "border-t pt-4", children: [
+            /* @__PURE__ */ e(h, { swStyle: 6, children: "Settings" }),
+            /* @__PURE__ */ n("div", { className: "mt-2 space-y-2", children: [
+              /* @__PURE__ */ n("div", { className: "flex justify-between", children: [
+                /* @__PURE__ */ e("span", { children: "Auto-save" }),
+                /* @__PURE__ */ e("span", { className: "text-subdued", children: "Enabled" })
+              ] }),
+              /* @__PURE__ */ n("div", { className: "flex justify-between", children: [
+                /* @__PURE__ */ e("span", { children: "Notifications" }),
+                /* @__PURE__ */ e("span", { className: "text-subdued", children: "Disabled" })
+              ] }),
+              /* @__PURE__ */ n("div", { className: "flex justify-between", children: [
+                /* @__PURE__ */ e("span", { children: "Theme" }),
+                /* @__PURE__ */ e("span", { className: "text-subdued", children: "Light" })
+              ] })
+            ] })
+          ] })
+        ] })
+      }
+    )
+  ] });
+}, y = ({ args: t }) => {
+  const [a, r] = c(!1), [i, o] = c("300px"), [l, g] = c(!1);
+  return console.log(i, "currentWidth"), /* @__PURE__ */ n("div", { className: "p-4", children: [
+    /* @__PURE__ */ e("div", { className: "flex gap-2 mb-4", children: /* @__PURE__ */ e(s, { text: "Start Width Animation", onClick: () => {
+      r(!0), g(!0), setTimeout(() => {
+        o("500px");
+      }, 1e3), setTimeout(() => {
+        o("700px");
+      }, 3e3), setTimeout(() => {
+        o("400px");
+      }, 5e3), setTimeout(() => {
+        g(!1);
+      }, 7e3);
+    } }) }),
+    /* @__PURE__ */ e(p, { ...t, open: a, setOpen: r, width: i, children: /* @__PURE__ */ n("div", { className: "p-4", children: [
+      /* @__PURE__ */ e(h, { swStyle: 6, children: "Delayed Width Animation" }),
+      /* @__PURE__ */ n("p", { className: "mt-2", children: [
+        "Current width: ",
+        /* @__PURE__ */ e("strong", { children: i })
+      ] }),
+      /* @__PURE__ */ e("p", { className: "mt-2", children: "This drawer demonstrates smooth width transitions that occur automatically after delays." }),
+      /* @__PURE__ */ n("div", { className: "mt-4 p-3 bg-gray-50 rounded", children: [
+        /* @__PURE__ */ e(h, { swStyle: 6, children: "Animation Status:" }),
+        /* @__PURE__ */ e("p", { className: "mt-1 text-sm", children: l ? "🔄 Animating..." : "⏸️ Animation complete" })
+      ] })
+    ] }) })
+  ] });
+}, I = {
+  render: (t) => /* @__PURE__ */ e(d, { args: t }),
+  args: {
+    width: "400px",
+    transitionDuration: 300,
+    hasOverlayBg: !0
+  }
+}, P = {
+  render: (t) => /* @__PURE__ */ e(v, { args: t }),
+  args: {
+    transitionDuration: 500,
+    hasOverlayBg: !0,
+    enableWidthTransition: !0
+  }
+}, L = {
+  render: (t) => /* @__PURE__ */ e(b, { args: t }),
+  args: {
+    width: "500px",
+    transitionDuration: 400,
+    hasOverlayBg: !0
+  }
+}, j = {
+  render: (t) => /* @__PURE__ */ e(y, { args: t }),
+  args: {
+    transitionDuration: 600,
+    hasOverlayBg: !0,
+    enableWidthTransition: !0
+  }
+}, F = {
+  render: (t) => /* @__PURE__ */ e(d, { args: t }),
+  args: {
+    width: "350px",
+    transitionDuration: 300,
+    hasOverlayBg: !1
+  }
+}, E = {
+  render: (t) => /* @__PURE__ */ e(d, { args: t }),
+  args: {
+    width: "450px",
+    transitionDuration: 1e3,
+    hasOverlayBg: !0
+  }
+}, q = {
+  render: (t) => /* @__PURE__ */ e(d, { args: t }),
+  args: {
+    width: "50%",
+    transitionDuration: 400,
+    hasOverlayBg: !0
+  }
+}, $ = {
+  render: (t) => /* @__PURE__ */ e(d, { args: t }),
+  args: {
+    width: "800px",
+    transitionDuration: 400,
+    hasOverlayBg: !0
+  }
+}, z = {
+  render: (t) => /* @__PURE__ */ e(d, { args: t }),
+  args: {
+    width: "400px",
+    title: "Simple Drawer",
+    transitionDuration: 300,
+    hasOverlayBg: !0
+  }
+}, M = {
+  render: (t) => /* @__PURE__ */ e(d, { args: t }),
+  args: {
+    width: "400px",
+    title: "Settings",
+    subheading: "Configure your application preferences",
+    transitionDuration: 300,
+    hasOverlayBg: !0
+  }
+}, U = {
+  render: (t) => /* @__PURE__ */ e(d, { args: t }),
+  args: {
+    width: "400px",
+    title: "User Profile",
+    metadata: /* @__PURE__ */ n("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ e(m, { icon: "Profile" }),
+      /* @__PURE__ */ e("span", { children: "Active User" })
+    ] }),
+    transitionDuration: 300,
+    hasOverlayBg: !0
+  }
+}, _ = {
+  render: (t) => /* @__PURE__ */ e(d, { args: t }),
+  args: {
+    width: "400px",
+    title: "Document Editor",
+    actionBox: /* @__PURE__ */ n("div", { className: "flex gap-2", children: [
+      /* @__PURE__ */ e(m, { icon: "CopyLarge", button: !0 }),
+      /* @__PURE__ */ e(m, { icon: "File", button: !0 })
+    ] }),
+    transitionDuration: 300,
+    hasOverlayBg: !0
+  }
+}, G = {
+  render: (t) => /* @__PURE__ */ e(d, { args: t }),
+  args: {
+    width: "400px",
+    title: "Confirm Action",
+    metadata: "Are you sure you want to proceed?",
+    buttonProps: {
+      children: "Confirm",
+      variant: "primary",
+      onClick: () => console.log("Confirmed")
+    },
+    transitionDuration: 300,
+    hasOverlayBg: !0
+  }
+}, x = ({ args: t }) => {
+  const [a, r] = c(!1), i = Array.from({ length: 50 }, (o, l) => /* @__PURE__ */ n("div", { className: "p-4 border-b border-gray-200", children: [
+    /* @__PURE__ */ n(h, { swStyle: 6, children: [
+      "Section ",
+      l + 1
+    ] }),
+    /* @__PURE__ */ e("p", { className: "mt-2", children: "This is a long content section to demonstrate scrolling behavior. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." }),
+    /* @__PURE__ */ n("div", { className: "mt-2 flex gap-2", children: [
+      /* @__PURE__ */ e(s, { text: "Action 1", variant: "secondary", size: "small" }),
+      /* @__PURE__ */ e(s, { text: "Action 2", variant: "secondary", size: "small" })
+    ] })
+  ] }, l));
+  return /* @__PURE__ */ n("div", { className: "p-4", children: [
+    /* @__PURE__ */ e(s, { text: "Open Drawer with Long Content", onClick: () => r(!0) }),
+    /* @__PURE__ */ e(p, { ...t, width: t.width || "500px", open: a, setOpen: r, children: /* @__PURE__ */ e("div", { className: "h-full", children: i }) })
+  ] });
+}, J = {
+  render: (t) => /* @__PURE__ */ e(x, { args: t }),
+  args: {
+    width: "500px",
+    title: "Long Content Drawer",
+    subheading: "This drawer contains a lot of content to test scrolling",
+    transitionDuration: 300,
+    hasOverlayBg: !0,
+    preserveScrollPosition: !0,
+    scrollBehavior: "smooth"
+  }
+}, f = ({ args: t }) => {
+  const [a, r] = c(!1), [i, o] = c("smooth"), l = Array.from({ length: 30 }, (g, u) => /* @__PURE__ */ n("div", { className: "p-4 border-b border-gray-200", children: [
+    /* @__PURE__ */ n(h, { swStyle: 6, children: [
+      "Section ",
+      u + 1
+    ] }),
+    /* @__PURE__ */ e("p", { className: "mt-2", children: "This section demonstrates different scroll behaviors. Try changing the scroll behavior and reopening the drawer." }),
+    /* @__PURE__ */ e("div", { className: "mt-2", children: /* @__PURE__ */ e(
+      s,
+      {
+        text: `Go to Section ${u + 10}`,
+        variant: "secondary",
+        size: "small",
+        onClick: () => {
+          const w = document.getElementById(`section-${u + 10}`);
+          w == null || w.scrollIntoView({ behavior: i });
+        }
+      }
+    ) })
+  ] }, u));
+  return /* @__PURE__ */ n("div", { className: "p-4", children: [
+    /* @__PURE__ */ n("div", { className: "flex gap-2 mb-4", children: [
+      /* @__PURE__ */ e(s, { text: "Open Drawer", onClick: () => r(!0) }),
+      /* @__PURE__ */ e(
+        s,
+        {
+          text: `Scroll: ${i}`,
+          variant: "secondary",
+          onClick: () => o(i === "smooth" ? "auto" : "smooth")
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e(p, { ...t, width: t.width || "500px", open: a, setOpen: r, scrollBehavior: i, children: /* @__PURE__ */ e("div", { className: "h-full", children: l }) })
+  ] });
+}, K = {
+  render: (t) => /* @__PURE__ */ e(f, { args: t }),
+  args: {
+    width: "500px",
+    title: "Scroll Behavior Demo",
+    subheading: "Test different scroll behaviors and position preservation",
+    transitionDuration: 300,
+    hasOverlayBg: !0,
+    preserveScrollPosition: !0,
+    enableScroll: !0
+  }
+}, D = ({ args: t }) => {
+  const [a, r] = c(!1), i = Array.from({ length: 20 }, (o, l) => /* @__PURE__ */ n("div", { className: "p-4 border-b border-gray-200", children: [
+    /* @__PURE__ */ n(h, { swStyle: 6, children: [
+      "Section ",
+      l + 1
+    ] }),
+    /* @__PURE__ */ e("p", { className: "mt-2", children: "This content would normally be scrollable, but scrolling is disabled in this drawer. You can only see the content that fits within the drawer height." })
+  ] }, l));
+  return /* @__PURE__ */ n("div", { className: "p-4", children: [
+    /* @__PURE__ */ e(s, { text: "Open Drawer with Disabled Scroll", onClick: () => r(!0) }),
+    /* @__PURE__ */ e(p, { ...t, width: t.width || "500px", open: a, setOpen: r, enableScroll: !1, children: /* @__PURE__ */ e("div", { className: "h-full", children: i }) })
+  ] });
+}, V = {
+  render: (t) => /* @__PURE__ */ e(D, { args: t }),
+  args: {
+    width: "500px",
+    title: "Disabled Scroll Drawer",
+    subheading: "This drawer has scrolling disabled - content is clipped to fit",
+    transitionDuration: 300,
+    hasOverlayBg: !0,
+    enableScroll: !1
+  }
+};
+export {
+  I as Basic,
+  j as DelayedWidthChange,
+  V as DisabledScroll,
+  P as DynamicWidth,
+  L as FullFeatured,
+  $ as LargeWidth,
+  J as LongContent,
+  F as NoOverlay,
+  q as PercentageWidth,
+  K as ScrollBehavior,
+  E as SlowTransition,
+  _ as WithActionBox,
+  G as WithCallToAction,
+  U as WithMetadata,
+  M as WithSubheading,
+  z as WithTitleOnly,
+  k as default
+};

package/dist/components/molecules/drawer/drawer.d.ts

@@ -0,0 +1,66 @@
+import { default as React } from 'react';
+import { ButtonProps } from '../../../main';
+
+export type DrawerProps = {
+    /**
+     * title of drawer, showed in the drawer header
+     */
+    title?: string;
+    /**
+     * If true, the component is shown.
+     */
+    open?: boolean;
+    /**
+     * Callback fired when the component requests to be closed.
+     */
+    setOpen?: (state: boolean) => void;
+    /**
+     * The content of the component.
+     */
+    children?: React.ReactNode;
+    /**
+     * hasMetadata
+     */
+    metadata?: React.ReactNode;
+    /**
+     * hasSubheading
+     */
+    subheading?: string;
+    /**
+     * has call to action
+     */
+    buttonProps?: ButtonProps;
+    /**
+     * the box can contain any buttons and icons and appear between the drawer title and the close button
+     */
+    actionBox?: React.ReactNode;
+    /**
+     * transition duration for content
+     */
+    transitionDuration?: number;
+    /**
+     * fixed with of content
+     */
+    width: string | number;
+    /**
+     * define overlay
+     */
+    hasOverlayBg?: boolean;
+    /**
+     * Enable smooth width transitions when width prop changes
+     */
+    enableWidthTransition?: boolean;
+    /**
+     * Preserve scroll position when drawer reopens
+     */
+    preserveScrollPosition?: boolean;
+    /**
+     * Custom scroll behavior ('auto', 'smooth')
+     */
+    scrollBehavior?: 'auto' | 'smooth';
+    /**
+     * Enable or disable scrolling in the content area
+     */
+    enableScroll?: boolean;
+};
+export declare function Drawer({ children, actionBox, title, open, setOpen, width, transitionDuration: transitionDurationProp, hasOverlayBg, metadata, subheading, buttonProps, enableWidthTransition, preserveScrollPosition, scrollBehavior, enableScroll, }: DrawerProps): import("react/jsx-runtime").JSX.Element;