@pismo/marola 0.0.1-alpha.9 → 1.0.0-beta.0

package/dist/combineHooksSlotProps-DVjg9PRh.js

@@ -0,0 +1,80 @@
+import { f as E, b as a } from "./index-CH45lKw7.js";
+import * as r from "react";
+const f = {
+  blur: "list:blur",
+  focus: "list:focus",
+  itemClick: "list:itemClick",
+  itemHover: "list:itemHover",
+  itemsChange: "list:itemsChange",
+  keyDown: "list:keyDown",
+  resetHighlight: "list:resetHighlight",
+  highlightLast: "list:highlightLast",
+  textNavigation: "list:textNavigation",
+  clearSelection: "list:clearSelection"
+}, m = /* @__PURE__ */ r.createContext(null);
+process.env.NODE_ENV !== "production" && (m.displayName = "ListContext");
+function b(l) {
+  const {
+    handlePointerOverEvents: c = !1,
+    item: t
+  } = l, s = r.useContext(m);
+  if (!s)
+    throw new Error("useListItem must be used within a ListProvider");
+  const {
+    dispatch: n,
+    getItemState: u
+  } = s, {
+    highlighted: d,
+    selected: p,
+    focusable: g
+  } = u(t), v = r.useCallback((i) => (e) => {
+    var o;
+    if ((o = i.onClick) == null || o.call(i, e), !e.defaultPrevented) {
+      if (process.env.NODE_ENV !== "production" && t === void 0)
+        throw new Error(["MUI: The `item` provided to useListItem() is undefined.", "This should happen only during server-side rendering under React 17."].join(`
+`));
+      n({
+        type: f.itemClick,
+        item: t,
+        event: e
+      });
+    }
+  }, [n, t]), C = r.useCallback((i) => (e) => {
+    var o;
+    if ((o = i.onMouseOver) == null || o.call(i, e), !e.defaultPrevented) {
+      if (process.env.NODE_ENV !== "production" && t === void 0)
+        throw new Error(["MUI: The `item` provided to useListItem() is undefined.", "This should happen only during server-side rendering under React 17."].join(`
+`));
+      n({
+        type: f.itemHover,
+        item: t,
+        event: e
+      });
+    }
+  }, [n, t]);
+  let h;
+  return g && (h = d ? 0 : -1), {
+    getRootProps: (i = {}) => {
+      const e = E(i);
+      return a({}, i, {
+        onClick: v(e),
+        onPointerOver: c ? C(e) : void 0,
+        tabIndex: h
+      });
+    },
+    highlighted: d,
+    selected: p
+  };
+}
+function x(l, c) {
+  return function(s = {}) {
+    const n = a({}, s, l(s));
+    return a({}, n, c(n));
+  };
+}
+export {
+  f as L,
+  m as a,
+  x as c,
+  b as u
+};

package/dist/components/Advice/Advice.d.ts

@@ -1,16 +1,30 @@
 import { Icon } from '../Icon/Icon';
 import { ReactNode } from 'react';
 
-export type AdviceTypes = 'without-results' | 'no-permission';
+export type AdviceTypes = 'without-results' | 'no-permission' | 'no-items' | 'error-page';
 export type AdviceProps = {
+    /** Advice icon.
+     * This property uses the Icon Component Props
+     */
     icon?: React.ComponentProps<typeof Icon>;
+    /** Advice SVG icon */
     IconSvg?: React.FunctionComponent<React.SVGProps<SVGSVGElement> & {
         title?: string | undefined;
     }>;
+    /** Type of advice */
     type?: AdviceTypes;
-    content: ReactNode;
+    /** Advice content message */
+    content?: ReactNode;
+    title?: string;
+    description?: string;
+    /** Space seperated list of CSS classes to apply */
     className?: string;
+    /** ID that tests can use to get this component from the DOM */
     'data-testid'?: string;
 };
-declare const Advice: ({ icon, type, content, className, IconSvg, ...rest }: AdviceProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Advice component provide HTML with an icon and a message.
+ * Is commonly used to indicate No Permission and No Results.
+ */
+declare const Advice: ({ icon, type, content, title, description, className, IconSvg, ...rest }: AdviceProps) => import("react/jsx-runtime").JSX.Element;
 export { Advice };

package/dist/components/Advice/Advice.js

@@ -1,25 +1,47 @@
 import '../../assets/Advice.css';
-import { jsxs as m, jsx as t } from "react/jsx-runtime";
-import { c as y } from "../../clsx-DB4S2d7J.js";
-import { Icon as n } from "../Icon/Icon.js";
-const f = "_advice_1yug7_1", h = "_content_1yug7_7", l = {
-  advice: f,
-  content: h
-}, d = {
+import { jsxs as h, jsx as r } from "react/jsx-runtime";
+import { c as l } from "../../clsx-DB4S2d7J.js";
+import { Icon as i } from "../Icon/Icon.js";
+const n = "_advice_12o7p_56", d = "_content_12o7p_56", s = {
+  "u-typography-h1": "_u-typography-h1_12o7p_1",
+  "u-typography-h2": "_u-typography-h2_12o7p_8",
+  "u-typography-h3": "_u-typography-h3_12o7p_15",
+  "u-typography-h4": "_u-typography-h4_12o7p_22",
+  "u-typography-h5": "_u-typography-h5_12o7p_29",
+  "u-typography-h6": "_u-typography-h6_12o7p_36",
+  "u-typography-base": "_u-typography-base_12o7p_43",
+  "u-typography-base--xxl": "_u-typography-base--xxl_12o7p_48",
+  "u-typography-base--xl": "_u-typography-base--xl_12o7p_52",
+  "u-typography-base--lg": "_u-typography-base--lg_12o7p_56",
+  advice: n,
+  content: d,
+  "u-typography-base--sm": "_u-typography-base--sm_12o7p_61",
+  "u-typography-base--bold": "_u-typography-base--bold_12o7p_65",
+  "u-typography-base--strikethrough": "_u-typography-base--strikethrough_12o7p_69",
+  "u-typography-base--underlined": "_u-typography-base--underlined_12o7p_72",
+  "u-typography-base--strikethrough-underlined": "_u-typography-base--strikethrough-underlined_12o7p_75",
+  "content-no-items": "_content-no-items_12o7p_90"
+}, m = {
   "no-permission": "eye-slash",
+  "no-items": "",
+  "error-page": "circle-exclamation",
   "without-results": "folder-magnifying-glass"
-}, g = ({ icon: s, type: o, content: r, className: i, IconSvg: a, ...c }) => {
-  const e = {
-    color: (s == null ? void 0 : s.color) || "var(--accent)",
-    size: (s == null ? void 0 : s.size) || "3.375rem",
-    icon: d[o] || (s == null ? void 0 : s.icon) || "",
-    iconFamily: d[o] ? "fa/duotone" : (s == null ? void 0 : s.iconFamily) || "fa/duotone"
+}, v = ({ icon: p, type: o, content: e, title: y, description: _, className: g, IconSvg: t, ...u }) => {
+  const a = {
+    color: p != null && p.color ? p == null ? void 0 : p.color : o !== "error-page" ? "var(--accent)" : "var(--secondary-orange)",
+    size: (p == null ? void 0 : p.size) || "3.375rem",
+    icon: m[o] || (p == null ? void 0 : p.icon) || ""
   };
-  return /* @__PURE__ */ m("div", { className: y(l.advice, i), ...c, children: [
-    a ? /* @__PURE__ */ t(a, { style: { color: e.color, height: e.size, width: e.size } }) : /* @__PURE__ */ t(n, { ...e }),
-    typeof r == "string" ? /* @__PURE__ */ t("p", { children: r }) : /* @__PURE__ */ t("div", { className: l.content, children: r })
+  return /* @__PURE__ */ h("div", { className: l(s.advice, g), ...u, children: [
+    t && o !== "no-items" && o !== "error-page" && /* @__PURE__ */ r(t, { style: { color: a.color, height: a.size, width: a.size } }),
+    !t && o !== "no-items" && /* @__PURE__ */ r(i, { ...a }),
+    o !== "error-page" && o !== "no-items" ? typeof e == "string" ? /* @__PURE__ */ r("p", { children: e }) : /* @__PURE__ */ r("div", { className: s.content, children: e }) : /* @__PURE__ */ h("div", { className: s["content-no-items"], children: [
+      /* @__PURE__ */ r("h3", { children: y }),
+      /* @__PURE__ */ r("p", { children: _ }),
+      e
+    ] })
   ] });
 };
 export {
-  g as Advice
+  v as Advice
 };

package/dist/components/Advice/Advice.stories.d.ts

@@ -0,0 +1,18 @@
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: ({ icon, type, content, title, description, className, IconSvg, ...rest }: import('./Advice').AdviceProps) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const WithoutResults: Story;
+export declare const NoPermission: Story;
+export declare const CustomIcon: Story;
+export declare const CustomIconSVG: Story;
+export declare const NoItems: Story;
+export declare const ErrorPage: Story;

package/dist/components/Button/Button.d.ts

@@ -1,4 +1,5 @@
 import { Either } from '../../types/helpers';
+import { ButtonOwnProps as MUIButtonBaseProps } from '@mui/base';
 import { ReactNode } from 'react';
 
 type Variant = 'primary' | 'secondary' | 'quick';
@@ -7,12 +8,14 @@ type ButtonCoreProps = {
     loading?: boolean;
     /** Button to display and act in a disabled state */
     disabled?: boolean;
-    /** Space seperated list of CSS classes to apply */
+    /** Space separated list of CSS classes to apply */
     className?: string;
     /** Text or children to display */
     children: ReactNode;
-    /** Space seperated list of CSS classes to apply */
+    /** alternative style to use*/
     variant?: Variant;
+    /** mui base button props */
+    muiButtonBaseProps?: MUIButtonBaseProps;
 };
 interface ButtonPropsWithLink extends ButtonCoreProps {
     /** link for component to navigate to, if provide component will be an anchor */
@@ -20,7 +23,7 @@ interface ButtonPropsWithLink extends ButtonCoreProps {
 }
 interface ButtonPropsWithOnClick extends ButtonCoreProps {
     /** functionality to perform once clicked */
-    onClick: () => void;
+    onClick?: () => void;
     /** HTML type of button */
     type?: HTMLButtonElement['type'];
 }

package/dist/components/Button/Button.js

@@ -1,70 +1,65 @@
 import '../../assets/Button.css';
-import { jsx as e, jsxs as a } from "react/jsx-runtime";
-import { forwardRef as m, useMemo as c } from "react";
-import { c as y } from "../../clsx-DB4S2d7J.js";
-import { LoadingSpinner as g } from "../LoadingSpinner/LoadingSpinner.js";
-import { B as f } from "../../Button-B1umG8kJ.js";
-const k = "_h1_2qr61_1", p = "_h2_2qr61_11", w = "_h3_2qr61_21", x = "_h4_2qr61_31", N = "_body_2qr61_41", v = "_quote_2qr61_75", B = "_form__input_2qr61_98", j = "_form__hint_2qr61_103", S = "_form__label_2qr61_108", $ = "_form__dropdown_2qr61_113", C = "_table__header_2qr61_131", L = "_table__body_2qr61_136", M = "_button_2qr61_159", r = {
-  h1: k,
-  "h1--bold": "_h1--bold_2qr61_7",
-  h2: p,
-  "h2--bold": "_h2--bold_2qr61_17",
-  h3: w,
-  "h3--bold": "_h3--bold_2qr61_27",
-  h4: x,
-  "h4--bold": "_h4--bold_2qr61_37",
-  body: N,
-  "body--large": "_body--large_2qr61_46",
-  "body--medium": "_body--medium_2qr61_50",
-  "body--small": "_body--small_2qr61_54",
-  "body--tiny": "_body--tiny_2qr61_58",
-  "body--bold": "_body--bold_2qr61_62",
-  "body--strikethrough": "_body--strikethrough_2qr61_65",
-  "body--underlined": "_body--underlined_2qr61_68",
-  "body--strikethrough-underlined": "_body--strikethrough-underlined_2qr61_71",
-  quote: v,
-  "quote--large": "_quote--large_2qr61_80",
-  "quote--bold": "_quote--bold_2qr61_85",
-  "quote--strikethrough": "_quote--strikethrough_2qr61_88",
-  "quote--underlined": "_quote--underlined_2qr61_91",
-  "quote--strikethrough-underlined": "_quote--strikethrough-underlined_2qr61_94",
-  form__input: B,
-  form__hint: j,
-  form__label: S,
-  form__dropdown: $,
-  "form--bold": "_form--bold_2qr61_118",
-  "form--strikethrough": "_form--strikethrough_2qr61_121",
-  "form--underlined": "_form--underlined_2qr61_124",
-  "form--strikethrough-underlined": "_form--strikethrough-underlined_2qr61_127",
-  table__header: C,
-  table__body: L,
-  "table__body--secondary": "_table__body--secondary_2qr61_141",
-  "table--bold": "_table--bold_2qr61_146",
-  "table--strikethrough": "_table--strikethrough_2qr61_149",
-  "table--underlined": "_table--underlined_2qr61_152",
-  "table--strikethrough-underlined": "_table--strikethrough-underlined_2qr61_155",
-  button: M,
-  "button--bold": "_button--bold_2qr61_165",
-  "button--strikethrough": "_button--strikethrough_2qr61_168",
-  "button--underlined": "_button--underlined_2qr61_171",
-  "button--strikethrough-underlined": "_button--strikethrough-underlined_2qr61_174",
-  "button--primary": "_button--primary_2qr61_190",
-  "button--secondary": "_button--secondary_2qr61_209",
-  "button--quick": "_button--quick_2qr61_226",
-  "button__loading-container": "_button__loading-container_2qr61_249"
-}, E = m((n, d) => {
-  const { onClick: u, link: l, loading: b, children: o, type: i = "button", disabled: h, className: t, variant: _ = "primary" } = n, s = {
-    invert: _ === "secondary" || _ === "quick"
-  }, q = c(
-    () => y([r.button, r[`button--${_}`], t]),
-    [t, _]
+import { jsx as h, jsxs as l } from "react/jsx-runtime";
+import { forwardRef as d, useMemo as c } from "react";
+import { c as m } from "../../clsx-DB4S2d7J.js";
+import { LoadingSpinner as x } from "../LoadingSpinner/LoadingSpinner.js";
+import { B as f } from "../../Button-2b1peDFT.js";
+const k = "_button_1h876_56", o = {
+  "u-typography-h1": "_u-typography-h1_1h876_1",
+  "u-typography-h2": "_u-typography-h2_1h876_8",
+  "u-typography-h3": "_u-typography-h3_1h876_15",
+  "u-typography-h4": "_u-typography-h4_1h876_22",
+  "u-typography-h5": "_u-typography-h5_1h876_29",
+  "u-typography-h6": "_u-typography-h6_1h876_36",
+  "u-typography-base": "_u-typography-base_1h876_43",
+  "u-typography-base--xxl": "_u-typography-base--xxl_1h876_48",
+  "u-typography-base--xl": "_u-typography-base--xl_1h876_52",
+  "u-typography-base--lg": "_u-typography-base--lg_1h876_56",
+  button: k,
+  "u-typography-base--sm": "_u-typography-base--sm_1h876_60",
+  "u-typography-base--bold": "_u-typography-base--bold_1h876_64",
+  "u-typography-base--strikethrough": "_u-typography-base--strikethrough_1h876_67",
+  "u-typography-base--underlined": "_u-typography-base--underlined_1h876_70",
+  "u-typography-base--strikethrough-underlined": "_u-typography-base--strikethrough-underlined_1h876_73",
+  "button--primary": "_button--primary_1h876_86",
+  "button--secondary": "_button--secondary_1h876_105",
+  "button--quick": "_button--quick_1h876_122",
+  "button__loading-container": "_button__loading-container_1h876_145"
+}, P = d((p, y) => {
+  const {
+    onClick: _,
+    link: u,
+    loading: n,
+    children: a,
+    type: e = "button",
+    disabled: s,
+    className: r,
+    variant: t = "primary",
+    muiButtonBaseProps: g
+  } = p, i = {
+    invert: t === "secondary" || t === "quick"
+  }, b = c(
+    () => m([o.button, o[`button--${t}`], r]),
+    [r, t]
+  );
+  return /* @__PURE__ */ h(
+    f,
+    {
+      type: e,
+      href: u,
+      onClick: _,
+      disabled: s,
+      className: b,
+      ref: y,
+      ...g ?? {},
+      children: n ? /* @__PURE__ */ l("div", { className: o["button__loading-container"], children: [
+        /* @__PURE__ */ h(x, { ...i }),
+        a
+      ] }) : a
+    }
   );
-  return /* @__PURE__ */ e(f, { type: i, href: l, onClick: u, disabled: h, className: q, ref: d, children: b ? /* @__PURE__ */ a("div", { className: r["button__loading-container"], children: [
-    /* @__PURE__ */ e(g, { ...s }),
-    o
-  ] }) : o });
 });
 export {
-  E as Button,
-  E as default
+  P as Button,
+  P as default
 };

package/dist/components/Button/Button.stories.d.ts

@@ -11,18 +11,20 @@ declare const meta: {
         className?: string | undefined;
         children: import('react').ReactNode;
         variant?: ("primary" | "secondary" | "quick") | undefined;
+        muiButtonBaseProps?: import('@mui/base').ButtonOwnProps | undefined;
         type?: undefined;
         onClick?: undefined;
         ref?: import('react').LegacyRef<HTMLButtonElement> | undefined;
         key?: import('react').Key | null | undefined;
     } | {
-        onClick: () => void;
+        onClick?: (() => void) | undefined;
         type?: "button" | "submit" | "reset" | undefined;
         loading?: boolean | undefined;
         disabled?: boolean | undefined;
         className?: string | undefined;
         children: import('react').ReactNode;
         variant?: ("primary" | "secondary" | "quick") | undefined;
+        muiButtonBaseProps?: import('@mui/base').ButtonOwnProps | undefined;
         link?: undefined;
         ref?: import('react').LegacyRef<HTMLButtonElement> | undefined;
         key?: import('react').Key | null | undefined;

package/dist/components/Checkbox/Checkbox.d.ts

@@ -3,15 +3,32 @@ import { ReactNode } from 'react';
 type CheckboxTheme = 'light' | 'accent';
 type CheckboxSizes = 'small' | 'normal';
 type CheckboxProps = {
+    /** Space separated list of CSS classes to apply */
     className?: string;
+    /** ID that tests can use to get this component from the DOM */
     'data-testid'?: string;
+    /** Checkbox label */
     label?: ReactNode;
+    /** Checkbox theme */
     theme?: CheckboxTheme;
+    /** Checkbox size */
     size?: CheckboxSizes;
-    isChecked?: boolean;
+    /** Checkbox size */
+    checked?: boolean;
+    /** Indeterminate state */
     isIndeterminate?: boolean;
+    /** Name */
     name?: string;
+    /** Functionality to perform when the checkbox value change */
     onChange: (checked: boolean) => void;
+    /** Checkbox label */
+    children?: ReactNode;
+    /** Set the highlight of the label */
+    highlightLabel?: boolean;
 };
-declare const Checkbox: ({ className, label, name, theme, size, isChecked, onChange, isIndeterminate, ...rest }: CheckboxProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ *  Checkboxes allow the user to select one or more items from a set.
+ *  Checkboxes can be used to turn an option on or off.
+ */
+declare const Checkbox: ({ className, label, name, theme, size, checked, onChange, isIndeterminate, highlightLabel, ...rest }: CheckboxProps) => import("react/jsx-runtime").JSX.Element;
 export { Checkbox };

package/dist/components/Checkbox/Checkbox.js

@@ -1,48 +1,71 @@
 import '../../assets/Checkbox.css';
 import { jsxs as v, jsx as c } from "react/jsx-runtime";
-import * as m from "react";
-import { useState as i, useEffect as _ } from "react";
-import { c as p } from "../../clsx-DB4S2d7J.js";
-const u = (e) => /* @__PURE__ */ m.createElement("svg", { width: 14, height: 10, viewBox: "0 0 14 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ m.createElement("path", { d: "M13.7063 0.293438C14.0969 0.684062 14.0969 1.31531 13.7063 1.70594L5.70625 9.70594C5.31563 10.0966 4.68437 10.0966 4.29375 9.70594L0.292875 5.70594C-0.097625 5.31531 -0.097625 4.68406 0.292875 4.29344C0.683437 3.90281 1.31656 3.90281 1.70719 4.29344L4.97188 7.58406L12.2937 0.293438C12.6844 -0.0978125 13.3156 -0.0978125 13.7063 0.293438Z", fill: "#F7F7FC" })), y = "_checkmark_14khe_10", t = {
-  "checkbox-wrapper": "_checkbox-wrapper_14khe_1",
-  checkmark: y,
-  "checkmark--checked": "_checkmark--checked_14khe_22",
-  "checkmark--light-theme": "_checkmark--light-theme_14khe_25",
-  "checkmark--accent-theme": "_checkmark--accent-theme_14khe_32",
-  "checkmark--small-size": "_checkmark--small-size_14khe_39",
-  "checkmark--normal-size": "_checkmark--normal-size_14khe_46"
-}, z = (e) => /* @__PURE__ */ m.createElement("svg", { width: 10, height: 3, viewBox: "0 0 10 3", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ m.createElement("rect", { y: 0.5, width: 10, height: 2, rx: 1, fill: "#1897F3" })), S = ({
-  className: e,
-  label: g,
-  name: l,
-  theme: x = "accent",
-  size: w = "normal",
-  isChecked: h,
-  onChange: f,
-  isIndeterminate: k,
-  ...d
+import * as o from "react";
+import { useState as k, useEffect as i } from "react";
+import { c as s } from "../../clsx-DB4S2d7J.js";
+const N = (a) => /* @__PURE__ */ o.createElement("svg", { width: 14, height: 10, viewBox: "0 0 14 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...a }, /* @__PURE__ */ o.createElement("path", { d: "M13.7063 0.293438C14.0969 0.684062 14.0969 1.31531 13.7063 1.70594L5.70625 9.70594C5.31563 10.0966 4.68437 10.0966 4.29375 9.70594L0.292875 5.70594C-0.097625 5.31531 -0.097625 4.68406 0.292875 4.29344C0.683437 3.90281 1.31656 3.90281 1.70719 4.29344L4.97188 7.58406L12.2937 0.293438C12.6844 -0.0978125 13.3156 -0.0978125 13.7063 0.293438Z", fill: "#F7F7FC" })), z = "_label_18hen_64", E = "_checkmark_18hen_93", e = {
+  "u-typography-h1": "_u-typography-h1_18hen_1",
+  "u-typography-h2": "_u-typography-h2_18hen_8",
+  "u-typography-h3": "_u-typography-h3_18hen_15",
+  "u-typography-h4": "_u-typography-h4_18hen_22",
+  "u-typography-h5": "_u-typography-h5_18hen_29",
+  "u-typography-h6": "_u-typography-h6_18hen_36",
+  "u-typography-base": "_u-typography-base_18hen_43",
+  "u-typography-base--xxl": "_u-typography-base--xxl_18hen_48",
+  "u-typography-base--xl": "_u-typography-base--xl_18hen_52",
+  "u-typography-base--lg": "_u-typography-base--lg_18hen_56",
+  "u-typography-base--sm": "_u-typography-base--sm_18hen_60",
+  "u-typography-base--bold": "_u-typography-base--bold_18hen_64",
+  "checkbox-wrapper": "_checkbox-wrapper_18hen_64",
+  "label--highlighted": "_label--highlighted_18hen_64",
+  "u-typography-base--strikethrough": "_u-typography-base--strikethrough_18hen_67",
+  "u-typography-base--underlined": "_u-typography-base--underlined_18hen_70",
+  "u-typography-base--strikethrough-underlined": "_u-typography-base--strikethrough-underlined_18hen_73",
+  label: z,
+  "label--highlighted-checked": "_label--highlighted-checked_18hen_90",
+  checkmark: E,
+  "checkmark--checked": "_checkmark--checked_18hen_105",
+  "checkmark--light-theme": "_checkmark--light-theme_18hen_108",
+  "checkmark--accent-theme": "_checkmark--accent-theme_18hen_115",
+  "checkmark--small-size": "_checkmark--small-size_18hen_122",
+  "checkmark--normal-size": "_checkmark--normal-size_18hen_129"
+}, F = (a) => /* @__PURE__ */ o.createElement("svg", { width: 10, height: 3, viewBox: "0 0 10 3", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...a }, /* @__PURE__ */ o.createElement("rect", { y: 0.5, width: 10, height: 2, rx: 1, fill: "#1897F3" })), M = ({
+  className: a,
+  label: n,
+  name: m,
+  theme: u = "accent",
+  size: b = "normal",
+  checked: r,
+  onChange: d,
+  isIndeterminate: l,
+  highlightLabel: x = !1,
+  ...p
 }) => {
-  const [r, s] = i(h), [a, n] = i(k);
-  _(() => {
-    r !== h && s(h);
-  }, [h]), _(() => {
-    typeof k == "boolean" && n(k);
-  }, [k]);
-  const C = p(t["checkbox-wrapper"], e), b = p(
-    t.checkmark,
-    t[`checkmark--${x}-theme`],
-    t[`checkmark--${w}-size`],
-    (r || a) && t["checkmark--checked"]
-  );
+  const [h, g] = k(r), [t, y] = k(l);
+  i(() => {
+    r !== h && g(r);
+  }, [r]), i(() => {
+    typeof l == "boolean" && y(l);
+  }, [l]);
+  const C = s(e["checkbox-wrapper"], a), f = s(
+    e.checkmark,
+    e[`checkmark--${u}-theme`],
+    e[`checkmark--${b}-size`],
+    (h || t) && e["checkmark--checked"]
+  ), w = x && (p.children || n) ? s(
+    e.label,
+    e["label--highlighted"],
+    (h || t) && e["label--highlighted-checked"]
+  ) : e.label;
   return /* @__PURE__ */ v("div", { className: C, onClick: () => {
-    let o = !r;
-    a && (n(!1), o = !0), f(o), s(o);
-  }, ...d, children: [
-    /* @__PURE__ */ c("input", { name: l, type: "checkbox", checked: !a && r, readOnly: !0 }),
-    /* @__PURE__ */ c("span", { className: b, children: a ? /* @__PURE__ */ c(z, {}) : /* @__PURE__ */ c(u, {}) }),
-    /* @__PURE__ */ c("label", { htmlFor: l, children: g })
+    let _ = !h;
+    t && (y(!1), _ = !0), d(_), g(_);
+  }, ...p, children: [
+    /* @__PURE__ */ c("input", { name: m, type: "checkbox", checked: !t && h, readOnly: !0 }),
+    /* @__PURE__ */ c("span", { className: f, children: t ? /* @__PURE__ */ c(F, {}) : h && /* @__PURE__ */ c(N, {}) }),
+    /* @__PURE__ */ c("label", { className: w, children: p.children || n })
   ] });
 };
 export {
-  S as Checkbox
+  M as Checkbox
 };

package/dist/components/Checkbox/Checkbox.stories.d.ts

@@ -0,0 +1,31 @@
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: ({ className, label, name, theme, size, checked, onChange, isIndeterminate, highlightLabel, ...rest }: {
+        className?: string | undefined;
+        'data-testid'?: string | undefined;
+        label?: import('react').ReactNode;
+        theme?: ("light" | "accent") | undefined;
+        size?: ("small" | "normal") | undefined;
+        checked?: boolean | undefined;
+        isIndeterminate?: boolean | undefined;
+        name?: string | undefined;
+        onChange: (checked: boolean) => void;
+        children?: import('react').ReactNode;
+        highlightLabel?: boolean | undefined;
+    }) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const DefaultWithLabel: Story;
+export declare const LightTheme: Story;
+export declare const LightThemeIndeterminate: Story;
+export declare const LabelAsChildren: Story;
+export declare const HighlightLabel: Story;
+export declare const SmallSize: Story;

package/dist/components/Chip/Chip.d.ts

@@ -0,0 +1,39 @@
+import { IconProps } from '../../main';
+import { ReactElement, ReactNode } from 'react';
+
+export type Variant = 'default' | 'contained' | 'outlined';
+type ChipProps = {
+    /** Main content to display, typically just some text */
+    label: ReactNode;
+    /** Whether to show loading state (skeleton) */
+    loading?: boolean;
+    /** Left icon to display */
+    leftAdornment?: ChipAdornmentSlotProps;
+    /** Dataset test id only used for tests to reach in and grab the rendered DOM node of the chip wrapper */
+    'data-testid'?: string;
+    /** Functionality to perform when the main body of the chip is clicked */
+    onClickContent?: () => void;
+    /** If present an 'x' icon will be on the right side of the button when clicked whatever functionality is passed to
+     * this will be executed */
+    onClickRemove?: () => void;
+    /** Whether to show the button in a disabled state, user will be unable to interact with the chip */
+    disabled?: boolean;
+    /** Any additional classes to apply to the Chip wrapper */
+    className?: string;
+    /** Any additional classes to apply to the chip skeleton */
+    'className-skeleton'?: string;
+    /** Which style of chip to show */
+    variant?: Variant;
+    /** Dataset test id only used for tests, used to hook onto the loading skeleton component for this chip */
+    'data-testid-skeleton'?: string;
+};
+export type ChipAdornmentSlotProps = {
+    /** The Marola Icon to display */
+    icon: ReactElement<IconProps>;
+    /** Any additional classes to apply to icon */
+    className?: string;
+    /** Dataset test id only used for tests to reach in and grab the rendered DOM node of the icon */
+    'data-testid'?: string;
+};
+export declare const Chip: import('react').ForwardRefExoticComponent<ChipProps & import('react').RefAttributes<unknown>>;
+export {};

package/dist/components/Chip/Chip.js

@@ -0,0 +1,19 @@
+import "react/jsx-runtime";
+import "react";
+import "../../clsx-DB4S2d7J.js";
+import "../Icon/Icon.js";
+import "../Button/Button.js";
+import { C as j } from "../../Toggle-BCgIItCc.js";
+import "../Dialog/Backdrop.js";
+import "../Typography/Typography.js";
+import "../IconButton/IconButton.js";
+import "../Select/Select.js";
+import "../Skeleton/Skeleton.js";
+import "../Table/Table.js";
+import "../Tabs/Tabs.js";
+import "../../Group-B3p31ftp.js";
+import "../../contexts/SnackbarProvider/SnackbarProvider.js";
+import "../../Button-2b1peDFT.js";
+export {
+  j as Chip
+};