trepur_components 2.3.26 → 2.3.27

package/lib/components/Collapsible/index.js

@@ -1,60 +1,63 @@
-import { jsx as a, jsxs as g } from "react/jsx-runtime";
-import { createContext as w, forwardRef as o, useState as H, useMemo as T, useContext as p } from "react";
-import { Icon as I } from "../Icon/index.js";
-import { Image as S } from "../Image/index.js";
-import { faChevronDown as j, faChevronUp as L } from "@fortawesome/fontawesome-free-solid";
-import k from "clsx";
-const n = w(null), c = o(({ id: e, className: l, children: t, loading: s, ...i }, v) => {
-  const [r, m] = H(!1), y = T(
+import { jsx as a, jsxs as w } from "react/jsx-runtime";
+import { createContext as H, forwardRef as s, useState as T, useMemo as I, useContext as p } from "react";
+import { Icon as S } from "../Icon/index.js";
+import { Image as j } from "../Image/index.js";
+import { faChevronDown as L, faChevronUp as k } from "@fortawesome/fontawesome-free-solid";
+import d from "clsx";
+const n = H(null), c = s(({ id: e, className: l, children: t, loading: o, ...i }, y) => {
+  const [r, m] = T(!1), g = I(
     () => ({
-      loading: s,
+      loading: o,
       expanded: r,
       setExpanded: m
     }),
-    [s, r, m]
+    [o, r, m]
   );
-  return /* @__PURE__ */ a(n.Provider, { value: y, children: /* @__PURE__ */ a(
+  return /* @__PURE__ */ a(n.Provider, { value: g, children: /* @__PURE__ */ a(
     "div",
     {
       id: e,
-      className: "w-full rounded-2xl bg-white hover:cursor-pointer",
-      ref: v,
+      className: d(
+        "w-full rounded-2xl bg-white hover:cursor-pointer",
+        l
+      ),
+      ref: y,
       ...i,
       children: t
     }
   ) });
-}), d = o(({ children: e, ...l }, t) => {
-  const { expanded: s, setExpanded: i } = p(n) || {};
-  return /* @__PURE__ */ g(
+}), x = s(({ children: e, ...l }, t) => {
+  const { expanded: o, setExpanded: i } = p(n) || {};
+  return /* @__PURE__ */ w(
     "div",
     {
       className: "flex h-24 pr-4 sm:pr-8",
-      onClick: () => i == null ? void 0 : i(!s),
+      onClick: () => i == null ? void 0 : i(!o),
       ref: t,
       ...l,
       children: [
         e,
-        /* @__PURE__ */ a("div", { className: "my-auto flex-none", children: /* @__PURE__ */ a(I, { icon: s ? j : L }) })
+        /* @__PURE__ */ a("div", { className: "my-auto flex-none", children: /* @__PURE__ */ a(S, { icon: o ? L : k }) })
       ]
     }
   );
-}), x = o(({ children: e, ...l }, t) => /* @__PURE__ */ a("div", { className: "mx-4 my-auto grid w-full", ref: t, ...l, children: e })), C = o(({ children: e, src: l, ...t }, s) => /* @__PURE__ */ a("div", { className: "aspect-square flex-none p-4", children: /* @__PURE__ */ a(S, { src: l, className: "h-full rounded-2xl", ...t }) })), b = o(({ ...e }, l) => /* @__PURE__ */ a(
+}), C = s(({ children: e, ...l }, t) => /* @__PURE__ */ a("div", { className: "mx-4 my-auto grid w-full", ref: t, ...l, children: e })), b = s(({ src: e, ...l }, t) => /* @__PURE__ */ a("div", { ref: t, className: "aspect-square flex-none p-4", children: /* @__PURE__ */ a(j, { src: e, className: "h-full rounded-2xl", ...l }) })), u = s(({ ...e }, l) => /* @__PURE__ */ a(
   "p",
   {
     className: "text-xxs text-light-grey truncate md:text-xs",
     ref: l,
     ...e
   }
-)), u = o(({ ...e }, l) => /* @__PURE__ */ a("p", { className: "md:text-md truncate text-sm", ref: l, ...e })), N = o(({ ...e }, l) => /* @__PURE__ */ a("p", { className: "truncate text-xs md:text-sm", ref: l, ...e })), f = o(({ children: e, ...l }, t) => {
-  const { expanded: s } = p(n) || {};
+)), N = s(({ ...e }, l) => /* @__PURE__ */ a("p", { className: "md:text-md truncate text-sm", ref: l, ...e })), f = s(({ ...e }, l) => /* @__PURE__ */ a("p", { className: "truncate text-xs md:text-sm", ref: l, ...e })), h = s(({ children: e, ...l }, t) => {
+  const { expanded: o } = p(n) || {};
   return /* @__PURE__ */ a(
     "div",
     {
-      className: k(
+      className: d(
         "w-auto overflow-scroll px-4 transition-max-height duration-300",
         {
-          "max-h-32": s,
-          "max-h-0": !s
+          "max-h-32": o,
+          "max-h-0": !o
         }
       ),
       ref: t,
@@ -62,25 +65,25 @@ const n = w(null), c = o(({ id: e, className: l, children: t, loading: s, ...i }
       children: e
     }
   );
-}), h = o(({ ...e }, l) => /* @__PURE__ */ a("p", { className: "text-xs md:text-sm", ref: l, ...e }));
+}), v = s(({ ...e }, l) => /* @__PURE__ */ a("p", { className: "text-xs md:text-sm", ref: l, ...e }));
 c.displayName = "Collapsible";
-d.displayName = "Collapsible.Header";
-f.displayName = "Collapsible.Content";
-C.displayName = "Collapsible.Image";
-b.displayName = "Collapsible.Label";
-u.displayName = "Collapsible.Title";
-N.displayName = "Collapsible.Subtitle";
-x.displayName = "Collapsible.HeaderContent";
-h.displayName = "Collapsible.Text";
+x.displayName = "Collapsible.Header";
+h.displayName = "Collapsible.Content";
+b.displayName = "Collapsible.Image";
+u.displayName = "Collapsible.Label";
+N.displayName = "Collapsible.Title";
+f.displayName = "Collapsible.Subtitle";
+C.displayName = "Collapsible.HeaderContent";
+v.displayName = "Collapsible.Text";
 const U = Object.assign(c, {
-  Header: d,
-  HeaderContent: x,
-  Image: C,
-  Label: b,
-  Title: u,
-  Subtitle: N,
-  Content: f,
-  Text: h
+  Header: x,
+  HeaderContent: C,
+  Image: b,
+  Label: u,
+  Title: N,
+  Subtitle: f,
+  Content: h,
+  Text: v
 });
 export {
   U as Collapsible

package/lib/components/DetailUpdater/DetailUpdater.stories.d.ts

@@ -3,15 +3,13 @@ import { DetailUpdater } from './';
 
 declare const meta: {
     title: string;
-    component: ({ id, className, title, description, expandText, collapseText, ctaText, onClick, onChange, children, onSubmit, onCancel, value, }: import('./').DetailUpdatesProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ id, className, title, description, expandText, collapseText, ctaText, children, onSubmit, onCancel, value }: import('./').DetailUpdatesProps) => import("react/jsx-runtime").JSX.Element;
     args: {
         title: string;
         description: string;
         expandText: string;
         collapseText: string;
         ctaText: string;
-        onClick: (fieldValues: any) => void;
-        onChange: (value: any) => void;
         children: import("react/jsx-runtime").JSX.Element;
     };
 };

package/lib/components/DetailUpdater/index.d.ts

@@ -1,4 +1,3 @@
-import { default as React } from 'react';
 
 export interface DetailUpdatesProps {
     id?: string;
@@ -8,11 +7,9 @@ export interface DetailUpdatesProps {
     expandText: string;
     collapseText: string;
     ctaText: string;
-    onClick?: (fieldValues: any) => void;
-    onChange?: (fieldValues: any) => void;
     children: React.ReactNode;
     onSubmit?: () => void;
     onCancel?: () => void;
     value?: string;
 }
-export declare const DetailUpdater: ({ id, className, title, description, expandText, collapseText, ctaText, onClick, onChange, children, onSubmit, onCancel, value, }: DetailUpdatesProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DetailUpdater: ({ id, className, title, description, expandText, collapseText, ctaText, children, onSubmit, onCancel, value }: DetailUpdatesProps) => import("react/jsx-runtime").JSX.Element;

package/lib/components/DetailUpdater/index.js

@@ -3,22 +3,20 @@ import { useState as x } from "react";
 import { Button as N } from "../Button/index.js";
 import { Card as g } from "../Card/index.js";
 import "../../node_modules/keen-slider/keen-slider.min.css.js";
-const D = ({
+const w = ({
   id: n,
   className: c,
   title: d,
-  description: o,
-  expandText: m,
+  description: m,
+  expandText: o,
   collapseText: p,
   ctaText: f,
-  onClick: k,
-  onChange: u,
   children: h,
   onSubmit: s,
-  onCancel: l,
+  onCancel: r,
   value: t
 }) => {
-  const [a, r] = x(!1);
+  const [a, l] = x(!1);
   return /* @__PURE__ */ i(g, { id: n, className: c, children: [
     !a && /* @__PURE__ */ i("div", { className: "mx-4 py-6", children: [
       /* @__PURE__ */ i("div", { className: "flex justify-between", children: [
@@ -28,9 +26,9 @@ const D = ({
           {
             className: "font-semiBold text-ink cursor-pointer underline",
             onClick: () => {
-              r(!0);
+              l(!0);
             },
-            children: m
+            children: o
           }
         )
       ] }),
@@ -44,20 +42,20 @@ const D = ({
           {
             className: "font-semiBold text-ink cursor-pointer underline",
             onClick: () => {
-              l == null || l(), r(!1);
+              r == null || r(), l(!1);
             },
             children: p
           }
         )
       ] }),
-      /* @__PURE__ */ e("p", { className: "text-light-grey", children: o }),
+      /* @__PURE__ */ e("p", { className: "text-light-grey", children: m }),
       /* @__PURE__ */ e("div", { className: "grid w-full grid-cols-1 gap-0 py-4 md:grid-cols-2 md:gap-4 lg:w-2/3", children: h }),
       /* @__PURE__ */ e(N, { variant: "secondary", onClick: () => {
-        s == null || s(), r(!1);
+        s == null || s(), l(!1);
       }, children: f })
     ] })
   ] });
 };
 export {
-  D as DetailUpdater
+  w as DetailUpdater
 };

package/lib/components/Dialog/Dialog.stories.d.ts

@@ -2,7 +2,7 @@ import { default as React } from 'react';
 
 declare const meta: {
     title: string;
-    component: ({ id, className, title, paragraph, dismissText, onDismissClick, primaryCta, secondaryCta, imageUrl, }: import('.').Props) => import("react/jsx-runtime").JSX.Element;
+    component: () => import("react/jsx-runtime").JSX.Element;
     args: {
         title: string;
         paragraph: string;

package/lib/components/Dialog/index.d.ts

@@ -1,6 +1,6 @@
 import { ButtonProps } from '../Button';
 
-export interface Props extends Partial<Pick<HTMLElement, 'className' | 'id'>> {
+export interface DialogProps extends Partial<Pick<HTMLElement, 'className' | 'id'>> {
     title: string;
     paragraph: string;
     dismissText: string;
@@ -9,4 +9,4 @@ export interface Props extends Partial<Pick<HTMLElement, 'className' | 'id'>> {
     secondaryCta?: ButtonProps;
     imageUrl?: string;
 }
-export declare const Dialog: ({ id, className, title, paragraph, dismissText, onDismissClick, primaryCta, secondaryCta, imageUrl, }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const Dialog: () => import("react/jsx-runtime").JSX.Element;

package/lib/components/Dialog/index.js

@@ -1,16 +1,6 @@
-import { jsx as a } from "react/jsx-runtime";
-import { Card as r } from "../Card/index.js";
-const n = ({
-  id: s,
-  className: i,
-  title: m,
-  paragraph: t,
-  dismissText: o,
-  onDismissClick: e,
-  primaryCta: p,
-  secondaryCta: l,
-  imageUrl: c
-}) => /* @__PURE__ */ a(r, { className: "max-w-[600px]" });
+import { jsx as r } from "react/jsx-runtime";
+import { Card as o } from "../Card/index.js";
+const t = () => /* @__PURE__ */ r(o, { className: "max-w-[600px]" });
 export {
-  n as Dialog
+  t as Dialog
 };

package/lib/components/Dropdown/index.js

@@ -1,66 +1,66 @@
-import { jsx as r, jsxs as u } from "react/jsx-runtime";
-import { createContext as f, forwardRef as a, useState as D, useRef as b, useMemo as x, useContext as l } from "react";
-import { Button as d } from "../Button/index.js";
+import { jsx as n, jsxs as w } from "react/jsx-runtime";
+import { createContext as f, forwardRef as r, useState as D, useRef as b, useMemo as x, useContext as a } from "react";
+import { Button as l } from "../Button/index.js";
 import { faChevronDown as y } from "@fortawesome/fontawesome-free-solid";
-import { useClickOutside as C } from "./utils.js";
-const i = f(null), c = a(({ children: e }) => {
-  const [n, t] = D(!1), s = b(null), o = x(
+import { useClickOutside as v } from "./utils.js";
+const s = f(null), d = r(({ children: t }) => {
+  const [o, e] = D(!1), i = b(null), u = x(
     () => ({
-      showDropdown: n,
-      setShowDropdown: t
+      showDropdown: o,
+      setShowDropdown: e
     }),
-    [n, t]
+    [o, e]
   );
-  return C(s, () => {
-    t(!1);
-  }), /* @__PURE__ */ r(i.Provider, { value: o, children: /* @__PURE__ */ r("div", { ref: s, className: "relative inline-block text-left", children: e }) });
-}), m = a(({ children: e }) => {
-  const { showDropdown: n, setShowDropdown: t } = l(i) || {};
-  return /* @__PURE__ */ u(d, { onClick: () => t == null ? void 0 : t(!n), children: [
-    e,
-    /* @__PURE__ */ r(d.Icon, { icon: y })
+  return v(i, () => {
+    e(!1);
+  }), /* @__PURE__ */ n(s.Provider, { value: u, children: /* @__PURE__ */ n("div", { ref: i, className: "relative inline-block text-left", children: t }) });
+}), c = r(({ children: t }) => {
+  const { showDropdown: o, setShowDropdown: e } = a(s) || {};
+  return /* @__PURE__ */ w(l, { onClick: () => e == null ? void 0 : e(!o), children: [
+    t,
+    /* @__PURE__ */ n(l.Icon, { icon: y })
   ] });
-}), p = a(
-  ({ children: e }) => {
-    const { showDropdown: n } = l(i) || {};
-    return n ? /* @__PURE__ */ r(
+}), m = r(
+  ({ children: t }) => {
+    const { showDropdown: o } = a(s) || {};
+    return o ? /* @__PURE__ */ n(
       "div",
       {
         className: "z-50 mt-2 w-48 rounded-lg border-2 bg-primary text-white",
         role: "menu",
         "aria-orientation": "vertical",
         "aria-labelledby": "menu-button",
-        children: /* @__PURE__ */ r("ul", { className: "py-1 text-sm", children: e })
+        children: /* @__PURE__ */ n("ul", { className: "py-1 text-sm", children: t })
       }
-    ) : /* @__PURE__ */ r("div", {});
+    ) : /* @__PURE__ */ n("div", {});
   }
-), w = a(
-  ({ children: e, onClick: n }) => {
-    const { showDropdown: t, setShowDropdown: s } = l(i) || {};
-    return /* @__PURE__ */ r(
+), p = r(
+  ({ children: t }) => {
+    const { setShowDropdown: o } = a(s) || {};
+    return /* @__PURE__ */ n(
       "li",
       {
         className: "px-4 py-2",
-        onClick: (o) => {
-          o == null || o.target, s == null || s(!1);
+        onClick: () => {
+          o == null || o(!1);
         },
-        onKeyDown: (o) => {
-          o.key === "Enter" && (o == null || o.target);
+        onKeyDown: (e) => {
+          e.key;
         },
-        children: e
+        children: t
       }
     );
   }
 );
-c.displayName = "Dropdown";
-m.displayName = "Dropdown.Label";
-p.displayName = "Dropdown.List";
-w.displayName = "Dropdown.Item";
-const g = Object.assign(c, {
-  Label: m,
-  List: p,
-  Item: w
+d.displayName = "Dropdown";
+c.displayName = "Dropdown.Label";
+m.displayName = "Dropdown.List";
+p.displayName = "Dropdown.Item";
+const I = Object.assign(d, {
+  Label: c,
+  List: m,
+  Item: p
 });
 export {
-  g as Dropdown
+  I as Dropdown
 };

package/lib/components/FileUploader/FilePreview.d.ts

@@ -4,5 +4,5 @@ interface FilePreviewProps {
     fileData?: any;
     onDismiss?: (e: any) => void;
 }
-export declare const FilePreview: ({ id, className, fileData, onDismiss, }: FilePreviewProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FilePreview: ({ id, className, fileData, onDismiss }: FilePreviewProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/components/FooterNav/index.js

@@ -1,29 +1,37 @@
-import { jsx as r } from "react/jsx-runtime";
-import { forwardRef as s } from "react";
-import n from "clsx";
-import { Icon as p } from "../Icon/index.js";
-const l = s(({ className: t, children: o, ...e }, a) => /* @__PURE__ */ r(
+import { jsx as a } from "react/jsx-runtime";
+import { forwardRef as n } from "react";
+import s from "clsx";
+import { Icon as N } from "../Icon/index.js";
+const l = n(({ className: o, children: e, ...t }, r) => /* @__PURE__ */ a(
   "div",
   {
-    className: n(
+    className: s(
       "border-lightest-grey fixed bottom-0 flex w-full justify-between border-t px-4",
-      t
+      o
     ),
-    ref: a,
-    ...e,
-    children: o
+    ref: r,
+    ...t,
+    children: e
   }
-)), m = s(({ className: t, children: o, href: e, onClick: a, ...N }) => /* @__PURE__ */ r(
+)), m = n(({ className: o, children: e, href: t, onClick: r, ...p }) => /* @__PURE__ */ a(
   "div",
   {
-    className: n(
+    className: s(
       "group w-full cursor-pointer py-2 text-center transition-all duration-500",
-      t
+      o
     ),
-    ...N,
-    children: /* @__PURE__ */ r("a", { href: e, onClick: a, children: o })
+    ...p,
+    children: /* @__PURE__ */ a("a", { href: t, onClick: r, children: e })
   }
-)), i = s(({ className: t, children: o, ...e }, a) => /* @__PURE__ */ r("p", { className: (n("font-regular pt-0.5 text-xs"), t), ...e, children: o })), c = s(({ className: t, icon: o, ...e }) => /* @__PURE__ */ r(p, { icon: o, ...e }));
+)), i = n(({ className: o, children: e, ...t }, r) => /* @__PURE__ */ a(
+  "p",
+  {
+    ref: r,
+    className: (s("font-regular pt-0.5 text-xs"), o),
+    ...t,
+    children: e
+  }
+)), c = n(({ icon: o, ...e }) => /* @__PURE__ */ a(N, { icon: o, ...e }));
 l.displayName = "FooterNav";
 m.displayName = "FooterNav.Item";
 c.displayName = "FooterNav.Icon";

package/lib/components/Form/Form.stories.d.ts

@@ -5,25 +5,10 @@ declare const meta: {
     title: string;
     component: ({ id, className, onSubmit, ref, components }: import('.').Props) => import("react/jsx-runtime").JSX.Element;
     argTypes: {
-        title: {
-            type: {
-                name: string;
-                required: boolean;
-            };
-            description: string;
-            table: {
-                type: {
-                    summary: string;
-                };
-                defaultValue: {
-                    summary: string;
-                };
-            };
-        };
         onSubmit: {
             type: {
-                name: string;
-                required: boolean;
+                name: "function";
+                required: false;
             };
             description: string;
             action: string;
@@ -38,7 +23,7 @@ declare const meta: {
         };
         ref: {
             type: {
-                name: string;
+                name: "other";
                 value: string;
             };
             description: string;
@@ -101,14 +86,10 @@ declare const meta: {
             htmlType: string;
             label: string;
             placeholder: string;
-            children: string;
-            className: string;
         } | {
             htmlType: string;
-            children: string;
             label?: undefined;
             placeholder?: undefined;
-            className?: undefined;
         })[];
     };
 };

package/lib/components/Input/index.js

@@ -1,82 +1,82 @@
 import { jsx as o, jsxs as I } from "react/jsx-runtime";
-import { createContext as b, forwardRef as a, useMemo as N, useRef as h, useContext as i } from "react";
+import { createContext as b, forwardRef as a, useMemo as N, useRef as y, useContext as d } from "react";
 import m from "clsx";
-const d = b(null), p = a(({ children: r, errors: t, placeholder: n, ...e }, l) => {
-  const s = N(
+const s = b(null), p = a(({ children: n, errors: e, placeholder: t, ...r }, l) => {
+  const f = N(
     () => ({
-      errors: t,
-      placeholder: n,
-      ...e
+      errors: e,
+      placeholder: t,
+      ...r
     }),
-    [t, e]
+    [e, r]
   );
-  return /* @__PURE__ */ o(d.Provider, { value: s, children: /* @__PURE__ */ o("div", { ref: l, children: r }) });
+  return /* @__PURE__ */ o(s.Provider, { value: f, children: /* @__PURE__ */ o("div", { ref: l, children: n }) });
 }), u = a(
-  ({ children: r, ...t }, n) => {
-    const e = h(null);
+  ({ children: n, ...e }, t) => {
+    const r = y(null);
     return /* @__PURE__ */ o(
       "div",
       {
         className: "mt-4 w-full",
         onClick: () => {
           var l;
-          return (l = e.current) == null ? void 0 : l.focus();
+          return (l = r.current) == null ? void 0 : l.focus();
         },
-        ref: n,
-        ...t,
-        children: r
+        ref: t,
+        ...e,
+        children: n
       }
     );
   }
-), c = a(({ className: r, children: t, required: n = !1 }, e) => /* @__PURE__ */ I(
+), i = a(({ className: n, children: e, required: t = !1 }, r) => /* @__PURE__ */ I(
   "div",
   {
-    ref: e,
-    className: m("flex px-1 text-sm font-normal leading-5", r),
+    ref: r,
+    className: m("flex px-1 text-sm font-normal leading-5", n),
     children: [
-      /* @__PURE__ */ o("p", { children: t }),
-      n && /* @__PURE__ */ o("p", { className: "text-sm font-normal", children: " *" })
+      /* @__PURE__ */ o("p", { children: e }),
+      t && /* @__PURE__ */ o("p", { className: "text-sm font-normal", children: " *" })
     ]
   }
-)), x = a(
-  ({ ...r }) => {
-    const { errors: t, placeholder: n } = i(d) || {};
+)), c = a(
+  ({ ...n }) => {
+    const { errors: e, placeholder: t } = d(s) || {};
     return /* @__PURE__ */ o(
       "input",
       {
-        placeholder: n,
+        placeholder: t,
         className: m(
           "text-ink text-md w-full rounded-md border border-gray-300 bg-white py-2 pl-4",
           {
-            "border-error border-2": t != null
+            "border-error border-2": e != null
           }
         ),
-        ...r
+        ...n
       }
     );
   }
-), f = a(({ children: r, ...t }, n) => {
-  const { errors: e } = i(d) || {};
+), x = a(({ ...n }, e) => {
+  const { errors: t } = d(s) || {};
   return /* @__PURE__ */ o(
     "div",
     {
-      ref: n,
+      ref: e,
       className: "text-md gap-y-2 pl-1 pt-2 font-semibold text-error-default",
-      ...t,
-      children: e == null ? void 0 : e.map((l, s) => /* @__PURE__ */ o("p", { children: l }, `error-msg-${s + 1}`))
+      ...n,
+      children: t == null ? void 0 : t.map((r, l) => /* @__PURE__ */ o("p", { children: r }, `error-msg-${l + 1}`))
     }
   );
 });
 p.displayName = "Input";
 u.displayName = "Input.Item";
-c.displayName = "Input.Label";
-x.displayName = "Input.Box";
-f.displayName = "Input.Validation";
+i.displayName = "Input.Label";
+c.displayName = "Input.Box";
+x.displayName = "Input.Validation";
 const C = Object.assign(p, {
   Item: u,
-  Label: c,
-  Box: x,
-  Validation: f
+  Label: i,
+  Box: c,
+  Validation: x
 });
 export {
   C as Input

package/lib/components/MenuButton/MenuButton.stories.d.ts

@@ -3,23 +3,8 @@ import { StoryObj } from '@storybook/react';
 
 declare const meta: {
     title: string;
-    component: ({ id, className, backgroundColour, menuItems, onClick, }: import('.').Props) => import("react/jsx-runtime").JSX.Element;
+    component: ({ id, className, menuItems, onClick }: import('.').Props) => import("react/jsx-runtime").JSX.Element;
     argTypes: {
-        backgroundColour: {
-            type: {
-                name: string;
-                required: boolean;
-            };
-            options: string[];
-            description: string;
-            table: {
-                type: {
-                    summary: string;
-                };
-            };
-            defaultValue: string;
-            control: string;
-        };
         menuItems: {
             description: string;
             control: string;
@@ -63,7 +48,6 @@ declare const meta: {
         };
     };
     args: {
-        backgroundColour: string;
         onClick: import('@storybook/addon-actions').HandlerFunction;
         menuItems: {
             name: string;