@pismo/marola 0.0.1-alpha.11 → 0.0.1-alpha.12

package/dist/{Portal-BcdMtRGF.js → Portal-D__zvwbZ.js}

@@ -1,5 +1,5 @@
 import * as o from "react";
-import { r as P, a as y } from "./index-BNWbc5Kh.js";
+import { r as P, e as y } from "./index-BJ8HbRCy.js";
 import { u as T, s as a, P as i } from "./index-CqjC7P5Y.js";
 import { jsx as c } from "react/jsx-runtime";
 import { u as f } from "./useEnhancedEffect-CJGo-L3B.js";

package/dist/SelectButton-DWtqAiwt.js

@@ -0,0 +1,45 @@
+import './assets/SelectButton.css';
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import * as o from "react";
+import { forwardRef as x } from "react";
+import { c as p } from "./clsx-DB4S2d7J.js";
+import { Typography as w } from "./components/Typography/Typography.js";
+const d = "_select_yw431_1", m = "_select__listbox_yw431_4", u = "_select__listbox__option_yw431_12", y = "_select__listbox__option__icon_yw431_20", h = "_select__listbox__option__text_yw431_24", C = "_select__list__option__icon_yw431_44", _ = {
+  select: d,
+  select__listbox: m,
+  select__listbox__option: u,
+  select__listbox__option__icon: y,
+  select__listbox__option__text: h,
+  "select__listbox__option--disabled": "_select__listbox__option--disabled_yw431_27",
+  "select__listbox__option--selected": "_select__listbox__option--selected_yw431_36",
+  select__list__option__icon: C,
+  "select-button": "_select-button_yw431_49",
+  "select-button__text": "_select-button__text_yw431_62",
+  "select-button__text__prefix": "_select-button__text__prefix_yw431_69",
+  "select-button__icon": "_select-button__icon_yw431_72",
+  "select-button--active": "_select-button--active_yw431_78"
+}, f = (t) => /* @__PURE__ */ o.createElement("svg", { width: 16, height: 16, viewBox: "0 0 16 16", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ o.createElement("path", { d: "M2.11104 4.9999C2.36691 4.9999 2.62291 5.09756 2.81791 5.29287L8.11104 10.5843L13.4048 5.29053C13.7954 4.8999 14.4282 4.8999 14.8188 5.29053C15.2095 5.68115 15.2095 6.31396 14.8188 6.70459L8.81885 12.7046C8.42822 13.0952 7.79541 13.0952 7.40479 12.7046L1.40479 6.70459C1.01416 6.31396 1.01416 5.68115 1.40479 5.29053C1.59854 5.09678 1.85479 4.9999 2.11104 4.9999Z", fill: "currentColor" })), v = (t) => /* @__PURE__ */ o.createElement("svg", { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ o.createElement("path", { d: "M13.8889 11C13.633 11 13.377 10.9023 13.182 10.707L7.8889 5.41563L2.59515 10.7094C2.20453 11.1 1.57172 11.1 1.18109 10.7094C0.790466 10.3188 0.790466 9.68594 1.18109 9.29532L7.18109 3.29532C7.57172 2.90469 8.20453 2.90469 8.59515 3.29532L14.5952 9.29532C14.9858 9.68594 14.9858 10.3188 14.5952 10.7094C14.4014 10.9031 14.1452 11 13.8889 11Z", fill: "#3F3D4B", fillOpacity: 0.88 })), E = x((t, c) => {
+  const { children: n, type: i = "button", disabled: a, className: b, "data-testid": r } = t, s = t["aria-expanded"];
+  return /* @__PURE__ */ l(
+    "button",
+    {
+      className: p(b, s ? _["select-button--active"] : "", _["select-button"]),
+      type: i,
+      onClick: t.onClick,
+      disabled: a,
+      "data-testid": r,
+      ref: c,
+      children: [
+        /* @__PURE__ */ l("span", { className: _["select-button__text"], children: [
+          /* @__PURE__ */ e("span", { className: _["select-button__text__prefix"], children: t["aria-labelledby"] }),
+          /* @__PURE__ */ e(w, { element: "span", variant: "body-small", className: _["select-button__text__content"], children: n })
+        ] }),
+        /* @__PURE__ */ e("span", { className: _["select-button__icon"], children: s ? /* @__PURE__ */ e(v, {}) : /* @__PURE__ */ e(f, {}) })
+      ]
+    }
+  );
+});
+export {
+  E as B,
+  _ as s
+};

package/dist/Tabs.module-jkH1Qjn7.js

@@ -0,0 +1,22 @@
+import './assets/Tabs.css';
+import * as a from "react";
+const s = /* @__PURE__ */ a.createContext(null);
+process.env.NODE_ENV !== "production" && (s.displayName = "TabsContext");
+function b() {
+  const t = a.useContext(s);
+  if (t == null)
+    throw new Error("No TabsContext provided");
+  return t;
+}
+const _ = "_tabs_18ymz_1", e = "_tabs__tab_18ymz_5", o = {
+  tabs: _,
+  tabs__tab: e,
+  "tabs__tab--disabled": "_tabs__tab--disabled_18ymz_22",
+  "tabs__tab--selected": "_tabs__tab--selected_18ymz_31",
+  "tabs__tab-panel": "_tabs__tab-panel_18ymz_35"
+};
+export {
+  s as T,
+  o as s,
+  b as u
+};

package/dist/assets/SelectButton.css

@@ -0,0 +1 @@
+._select_yw431_1{background-color:red}._select__listbox_yw431_4{min-width:10.75rem;padding:.5rem;margin-top:.25rem;background-color:#fff;border-radius:var(--border-radius);box-shadow:0 6px 12px rgba(var(--black-100-rgb),20%)}._select__listbox__option_yw431_12{display:flex;padding:.625rem;color:rgba(var(--gray-95-rgb),88%);list-style:none;cursor:pointer;border-radius:var(--border-radius-soft)}._select__listbox__option__icon_yw431_20{display:flex;margin-right:.5rem}._select__listbox__option__text_yw431_24{font-weight:700}._select__listbox__option_yw431_12:hover:not(._select__listbox__option--disabled_yw431_27){padding:.625rem;color:var(--accent);background-color:rgba(var(--black-100-rgb),4%);border-radius:var(--border-radius-soft)}._select__listbox__option_yw431_12:active:not(._select__listbox__option--disabled_yw431_27){color:var(--accent-dark)}._select__listbox__option--selected_yw431_36{background-color:var(--accent-lighter)}._select__listbox__option--disabled_yw431_27{color:rgba(var(--gray-95-rgb),25%);cursor:default;border:transparent}._select__listbox__option--disabled_yw431_27 ._select__list__option__icon_yw431_44{color:rgba(var(--gray-95-rgb),25%);fill:rgba(var(--gray-95-rgb),25%)}._select-button_yw431_49{display:flex;align-items:center;justify-content:space-between;width:11.875rem;padding:.625rem 1rem;color:rgba(var(--gray-95-rgb),88%);cursor:pointer;background-color:var(--white-100);border:1px solid rgba(var(--black-100-rgb),6%);border-radius:var(--border-radius);outline:none}._select-button__text_yw431_62{width:100%;overflow:hidden;text-align:start;text-overflow:ellipsis;text-wrap:nowrap}._select-button__text__prefix_yw431_69{margin-right:.625rem}._select-button__icon_yw431_72{display:flex}._select-button__icon_yw431_72 svg{color:rgba(var(--gray-95-rgb),88%)}._select-button--active_yw431_78{border:1px solid var(--accent)}._select-button_yw431_49:disabled{color:rgba(var(--gray-95-rgb),25%);cursor:default;border:1px solid var(--gray-10)}._select-button_yw431_49:disabled ._select-button__icon_yw431_72 svg{color:rgba(var(--gray-95-rgb),25%)}._select-button_yw431_49:hover:not(._select-button_yw431_49:disabled){border:1px solid var(--gray-25)}._select-button_yw431_49:focus:not(._select-button_yw431_49:disabled),._select-button_yw431_49:active:not(._select-button_yw431_49:disabled){border:1px solid var(--accent)}

package/dist/combineHooksSlotProps-BHqhiBfc.js

@@ -0,0 +1,81 @@
+import { a as c } from "./objectWithoutPropertiesLoose-D7Cp0Pg_.js";
+import * as r from "react";
+import { e as E } from "./index-CqjC7P5Y.js";
+const m = {
+  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"
+}, f = /* @__PURE__ */ r.createContext(null);
+process.env.NODE_ENV !== "production" && (f.displayName = "ListContext");
+function H(l) {
+  const {
+    handlePointerOverEvents: a = !1,
+    item: t
+  } = l, s = r.useContext(f);
+  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: m.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: m.itemHover,
+        item: t,
+        event: e
+      });
+    }
+  }, [n, t]);
+  let h;
+  return g && (h = d ? 0 : -1), {
+    getRootProps: (i = {}) => {
+      const e = E(i);
+      return c({}, i, {
+        onClick: v(e),
+        onPointerOver: a ? C(e) : void 0,
+        tabIndex: h
+      });
+    },
+    highlighted: d,
+    selected: p
+  };
+}
+function b(l, a) {
+  return function(s = {}) {
+    const n = c({}, s, l(s));
+    return c({}, n, a(n));
+  };
+}
+export {
+  m as L,
+  f as a,
+  b as c,
+  H as u
+};

package/dist/components/Button/Button.stories.js

@@ -6,9 +6,10 @@ import "react";
 import "../Dialog/Backdrop.js";
 import "../Typography/Typography.js";
 import "../IconButton/IconButton.js";
+import "../Select/Select.js";
 import "../Table/Table.js";
 import "../Tabs/Tabs.js";
-const d = {
+const k = {
   title: "Components/Button",
   component: i,
   tags: ["autodocs"],
@@ -28,13 +29,13 @@ const d = {
       if: { arg: "onClick", exists: !1 }
     }
   }
-}, k = {
-  args: { children: "Button", onClick: () => alert("Button was clicked!") }
 }, f = {
+  args: { children: "Button", onClick: () => alert("Button was clicked!") }
+}, g = {
   args: { children: "Button", link: "https://marola.pismolabs.io" }
 };
 export {
-  f as Link,
-  k as Simple,
-  d as default
+  g as Link,
+  f as Simple,
+  k as default
 };

package/dist/components/Dialog/Dialog.js

@@ -1,15 +1,16 @@
 import { jsxs as $, jsx as S } from "react/jsx-runtime";
-import { default as $e } from "./Actions.js";
+import { default as Ye } from "./Actions.js";
 import oe from "./Backdrop.js";
 import re from "./CloseIconButton.js";
-import { default as ze } from "./Content.js";
+import { default as Ge } from "./Content.js";
 import { s as q } from "../../Dialog.module-CGVM5V_D.js";
 import se from "./Title.js";
 import { a as C, _ as ie } from "../../objectWithoutPropertiesLoose-D7Cp0Pg_.js";
 import * as f from "react";
 import { u as Z, P as i, e as ae, g as le, a as ce, b as z, c as de, d as ue } from "../../index-CqjC7P5Y.js";
-import { o as w, e as ee, a as fe, u as G } from "../../index-BNWbc5Kh.js";
-import { P as pe, H as be } from "../../Portal-BcdMtRGF.js";
+import { o as w, e as ee, u as G } from "../../useEventCallback-vAfOD-oT.js";
+import { P as fe, H as pe } from "../../Portal-D__zvwbZ.js";
+import { e as be } from "../../index-BJ8HbRCy.js";
 function X(...e) {
   return e.reduce((t, o) => o == null ? t : function(...s) {
     t.apply(this, s), o.apply(this, s);
@@ -187,7 +188,7 @@ process.env.NODE_ENV !== "production" && (W.propTypes = {
    */
   open: i.bool.isRequired
 });
-process.env.NODE_ENV !== "production" && (W.propTypes = fe(W.propTypes));
+process.env.NODE_ENV !== "production" && (W.propTypes = be(W.propTypes));
 function Re(e) {
   const t = w(e);
   return t.body === e ? Y(e).innerWidth > t.documentElement.clientWidth : e.scrollHeight > e.clientHeight;
@@ -478,7 +479,7 @@ const Oe = ["children", "closeAfterTransition", "container", "disableAutoFocus",
     className: H.backdrop,
     ownerState: F
   });
-  return !c && !I && (!M || y) ? null : /* @__PURE__ */ S(pe, {
+  return !c && !I && (!M || y) ? null : /* @__PURE__ */ S(fe, {
     ref: T,
     container: a,
     disablePortal: h,
@@ -518,7 +519,7 @@ process.env.NODE_ENV !== "production" && (ne.propTypes = {
    * By default, it uses the body of the top-level document object,
    * so it's simply `document.body` most of the time.
    */
-  container: i.oneOfType([be, i.func]),
+  container: i.oneOfType([pe, i.func]),
   /**
    * If `true`, the modal will not automatically shift focus to itself when it opens, and
    * replace it to the last focused element when it closes.
@@ -613,7 +614,7 @@ process.env.NODE_ENV !== "production" && (ne.propTypes = {
     root: i.elementType
   })
 });
-const je = ({
+const qe = ({
   children: e,
   dialogTitle: t,
   dialogSubtitle: o,
@@ -638,9 +639,9 @@ const je = ({
   }
 );
 export {
-  $e as Actions,
-  ze as Content,
-  je as Dialog,
+  Ye as Actions,
+  Ge as Content,
+  qe as Dialog,
   se as DialogTitle,
-  je as default
+  qe as default
 };

package/dist/components/Dialog/Dialog.stories.js

@@ -1,16 +1,17 @@
 import '../../assets/global.css';
 import { jsx as e, Fragment as r, jsxs as i } from "react/jsx-runtime";
-import { useState as m } from "react";
+import { useState as d } from "react";
 /* empty css                    */
 import { Button as l } from "../Button/Button.js";
 import { Dialog as a } from "./Dialog.js";
 import "../IconButton/IconButton.js";
 import { Typography as n } from "../Typography/Typography.js";
+import "../Select/Select.js";
 import "../Table/Table.js";
 import "../Tabs/Tabs.js";
 import s from "./Content.js";
 import c from "./Actions.js";
-const q = {
+const y = {
   title: "Components/Dialog",
   component: a,
   tags: ["autodocs"],
@@ -19,7 +20,7 @@ const q = {
   ]
 };
 function p(o) {
-  const [d, t] = m(!1);
+  const [m, t] = d(!1);
   return /* @__PURE__ */ i(r, { children: [
     /* @__PURE__ */ e(l, { onClick: () => t(!0), children: "Open" }),
     /* @__PURE__ */ e(
@@ -27,7 +28,7 @@ function p(o) {
       {
         dialogTitle: o.dialogTitle,
         dialogSubtitle: o.dialogSubtitle,
-        open: d,
+        open: m,
         onClose: () => {
           t(!1), o != null && o.onClose && (o == null || o.onClose());
         },
@@ -43,7 +44,7 @@ function p(o) {
     )
   ] });
 }
-const y = {
+const O = {
   render: p,
   args: {
     dialogTitle: "This is a dialog title",
@@ -54,6 +55,6 @@ const y = {
   }
 };
 export {
-  y as Simple,
-  q as default
+  O as Simple,
+  y as default
 };

package/dist/components/LoadingSpinner/LoadingSpinner.stories.js

@@ -7,9 +7,10 @@ import "../Dialog/Backdrop.js";
 import "../Typography/Typography.js";
 import "../IconButton/IconButton.js";
 import { LoadingSpinner as i } from "./LoadingSpinner.js";
+import "../Select/Select.js";
 import "../Table/Table.js";
 import "../Tabs/Tabs.js";
-const g = {
+const f = {
   title: "Components/LoadingSpinner",
   component: i,
   tags: ["autodocs"],
@@ -29,10 +30,10 @@ const g = {
       }
     )
   ]
-}, f = {
+}, h = {
   args: {}
 };
 export {
-  f as Simple,
-  g as default
+  h as Simple,
+  f as default
 };

package/dist/components/PageHeader/PageHeader.stories.js

@@ -1,6 +1,6 @@
 import { jsx as t, jsxs as n } from "react/jsx-runtime";
 import { Button as r } from "../Button/Button.js";
-import { T as e } from "../../Tab-CRwnhsj5.js";
+import { Tab as e } from "../Tabs/Tab.js";
 import { TabPanel as a } from "../Tabs/TabPanel.js";
 import { Tabs as o } from "../Tabs/Tabs.js";
 import { PageHeader as l } from "./PageHeader.js";
@@ -26,7 +26,7 @@ const g = {
     ...i.args,
     rightChildren: /* @__PURE__ */ t(r, { variant: "quick", onClick: () => alert("button clicked"), children: "Click me!" })
   }
-}, T = {
+}, p = {
   name: "With bottom children",
   args: {
     ...i.args,
@@ -43,7 +43,7 @@ const g = {
 export {
   c as Simple,
   i as WithBackLink,
-  T as WithBottomChildren,
+  p as WithBottomChildren,
   u as WithRightChildren,
   g as default
 };

package/dist/components/Select/Select.d.ts

@@ -0,0 +1,25 @@
+import { ReactNode } from 'react';
+
+type SelectOptionProps = {
+    disabled?: boolean;
+    value: string | number;
+    children: ReactNode;
+    icon?: ReactNode;
+    className?: string;
+    'data-testid'?: string;
+};
+type SelectProps = {
+    children: ReactNode;
+    disabled?: boolean;
+    placeholder?: string | number;
+    ariaLabelledby?: string;
+    onChange?: (value: number | string | null, event?: React.SyntheticEvent<Element, Event> | null) => void;
+    className?: string;
+    'data-testid'?: string;
+};
+export declare const Option: (props: SelectOptionProps) => import("react/jsx-runtime").JSX.Element;
+declare const Select: {
+    (props: SelectProps): import("react/jsx-runtime").JSX.Element;
+    Option: (props: SelectOptionProps) => import("react/jsx-runtime").JSX.Element;
+};
+export { Select };