@pismo/marola 0.0.1-alpha.15 → 0.0.1-alpha.17

package/dist/main.js

@@ -1,16 +1,16 @@
-import { Chip as t } from "./components/Chip/Chip.js";
-import { Advice as p } from "./components/Advice/Advice.js";
-import { Button as f } from "./components/Button/Button.js";
-import { Checkbox as n } from "./components/Checkbox/Checkbox.js";
+import { Advice as e } from "./components/Advice/Advice.js";
+import { Button as p } from "./components/Button/Button.js";
+import { Checkbox as f } from "./components/Checkbox/Checkbox.js";
+import { Chip as n } from "./components/Chip/Chip.js";
 import { Dialog as l } from "./components/Dialog/Dialog.js";
-import { FamilyAndIcons as T, Icon as s } from "./components/Icon/Icon.js";
-import { IconButton as g } from "./components/IconButton/IconButton.js";
-import { Input as S } from "./components/Input/Input.js";
+import { FamilyAndIcons as T, Icon as c } from "./components/Icon/Icon.js";
+import { IconButton as S } from "./components/IconButton/IconButton.js";
+import { Input as u } from "./components/Input/Input.js";
 import { InputSearch as d } from "./components/InputSearch/InputSearch.js";
 import { LoadingSpinner as I } from "./components/LoadingSpinner/LoadingSpinner.js";
 import { PageHeader as C } from "./components/PageHeader/PageHeader.js";
 import { Pagination as y, paginationDefaultTranslations as A } from "./components/Pagination/Pagination.js";
-import { Option as B, Select as v } from "./components/Select/Select.js";
+import { Select as B, SelectOption as v } from "./components/Select/Select.js";
 import { Skeleton as H, SkeletonCircle as L, SkeletonTable as O } from "./components/Skeleton/Skeleton.js";
 import { Snackbar as q } from "./components/Snackbar/Snackbar.js";
 import { SortTooltip as z, sortTooltipDefaultTranslations as E } from "./components/SortTooltip/SortTooltip.js";
@@ -22,28 +22,28 @@ import { Tooltip as W } from "./components/Tooltip/Tooltip.js";
 import { Typography as Y } from "./components/Typography/Typography.js";
 import { default as _ } from "./components/Dialog/Title.js";
 import { default as oo } from "./components/Dialog/Content.js";
-import { default as to } from "./components/Dialog/Actions.js";
+import { default as eo } from "./components/Dialog/Actions.js";
 import { Tab as po } from "./components/Tabs/Tab.js";
 import { TabPanel as fo } from "./components/Tabs/TabPanel.js";
 export {
-  to as Actions,
-  p as Advice,
-  f as Button,
-  n as Checkbox,
-  t as Chip,
+  eo as Actions,
+  e as Advice,
+  p as Button,
+  f as Checkbox,
+  n as Chip,
   oo as Content,
   l as Dialog,
   _ as DialogTitle,
   T as FamilyAndIcons,
-  s as Icon,
-  g as IconButton,
-  S as Input,
+  c as Icon,
+  S as IconButton,
+  u as Input,
   d as InputSearch,
   I as LoadingSpinner,
-  B as Option,
   C as PageHeader,
   y as Pagination,
-  v as Select,
+  B as Select,
+  v as SelectOption,
   H as Skeleton,
   L as SkeletonCircle,
   O as SkeletonTable,

package/dist/marola.css

@@ -0,0 +1 @@
+:root{--secondary-orange: #ffa945;--secondary-orange-rgb: 255, 169, 69;--secondary-orange-dark: #fe8d53;--secondary-orange-dark-rgb: 254, 141, 83;--secondary-orange-light: #525061;--secondary-orange-light-rgb: 82, 80, 97;--secondary-green: #99dec3;--secondary-green-rgb: 153, 222, 195;--secondary-green-dark: #6acbb1;--secondary-green-dark-rgb: 106, 203, 177;--secondary-green-darker: #31aa7e;--secondary-green-darker-rgb: 49, 170, 126;--secondary-green-light: #baedd9;--secondary-green-light-rgb: 186, 237, 217;--accent: #1897f3;--accent-rgb: 24, 151, 243;--accent-dark: #1672c7;--accent-dark-rgb: 22, 114, 199;--accent-light: #4fb1f9;--accent-light-rgb: 79, 177, 249;--accent-lighter: #8ae1fd;--accent-lighter-rgb: 138, 225, 253;--alert: #df4561;--alert-rgb: 223, 69, 97;--alert-dark: #bb2b45;--alert-dark-rgb: 187, 43, 69;--accent-alert-light: #f37c91;--accent-alert-light-rgb: 243, 124, 145;--cream: #fafafa;--cream-rgb: 250, 250, 250;--hover: #42b7ff;--hover-rgb: 66, 183, 255;--active: #0a75cc;--active-rgb: 10, 117, 204;--border: #d9d9d9;--border-rgb: 217, 217, 217}:root{--gray-100: #16161e;--gray-100-rgb: 22, 22, 30;--gray-95: #3f3d4b;--gray-95-rgb: 63, 61, 75;--gray-90: #525061;--gray-90-rgb: 82, 80, 97;--gray-75: #838192;--gray-75-rgb: 131, 129, 146;--gray-50: #bcbac8;--gray-50-rgb: 188, 186, 200;--gray-25: #dbdae2;--gray-25-rgb: 219, 218, 226;--gray-10: #ebeaf0;--gray-10-rgb: 235, 234, 240;--gray-5: #f7f7fc;--gray-5-rgb: 247, 247, 252;--black-100: #000000;--black-100-rgb: 0, 0, 0;--black-75: #616161;--black-75-rgb: 97, 97, 97;--black-50: #838192;--black-50-rgb: 131, 129, 146;--black-25: #bcbac8;--black-25-rgb: 188, 186, 200;--black-10: #ebeaf0;--black-10-rgb: 235, 234, 240;--white-100: #ffffff;--white-100-rgb: 255, 255, 255}:root{--heading-font-weight: 700;--heading-font-size-xl: 3.75rem;--heading-line-height-xl: 4.875rem;--heading-font-size-l: 3rem;--heading-line-height-l: 3.9375rem;--heading-font-size: 2.25rem;--heading-line-height: 2.875rem;--heading-font-size-s: 1.5rem;--heading-line-height-s: 2rem;--body-font-size: 1rem;--body-line-height: 1.3125rem;--body-weight: normal;--body-bold: bold;--body-font-size-large: 1.5rem;--body-line-height-large: 1.625rem;--body-font-size-medium: 1.125;--body-line-height-medium: 1rem;--body-font-size-small: .875rem;--body-line-height-small: 1.125rem;--body-font-size-tiny: .75rem;--body-line-height-tiny: 1rem;--quote-font-size-large: 1.5rem;--quote-line-height-large: 2rem;--quote-font-weight-large: normal;--quote-font-size: 1rem;--quote-line-height: 1.3125rem;--quote-font-weight: normal;--form-input-font-size: 1rem;--form-input-line-height: 1.3125rem;--form-input-font-weight: bold;--form-hint-font-size: .875rem;--form-hint-line-height: 1.3125rem;--form-hint-font-weight: normal;--form-label-font-size: .875rem;--form-label-line-height: 1.3125rem;--form-label-font-weight: normal;--form-dropdown-font-size: 1rem;--form-dropdown-line-height: 1.3125rem;--form-dropdown-font-weight: normal;--table-font-size: .875rem;--table-line-height: 1.0625rem;--table-header-font-weight: bold;--table-body-font-weight: normal;--table-body-secondary-line-height: 1.3125rem;--button-font-size: 1rem;--button-line-height: 1.25rem;--button-font-weight: bold;--font-size-small: .75rem;--font-weight-small: 400;--font-line-height-small: 1.25rem;--font-weight-700: 700}:root{--spacing: 8px;--border-radius: 6px;--border-radius-soft: 4px;--transition-soft: .3s;--transition-long: .75s}*{box-sizing:border-box}

package/dist/{useButton-Bc8IAgyk.js → useButton-DSAvAfH_.js}

@@ -1,6 +1,6 @@
 import { a as D } from "./objectWithoutPropertiesLoose-D7Cp0Pg_.js";
 import * as i from "react";
-import { u as S, e as k } from "./index-CqjC7P5Y.js";
+import { u as S, e as k } from "./index-CtPvew6C.js";
 import { u as _ } from "./useIsFocusVisible-BH4IAdcw.js";
 function v(p) {
   const {

package/dist/{useEventCallback-vAfOD-oT.js → useEventCallback-lXNMsMLa.js}

@@ -1,4 +1,4 @@
-import { P as a } from "./index-CqjC7P5Y.js";
+import { P as a } from "./index-CtPvew6C.js";
 import * as c from "react";
 import { u as m } from "./useEnhancedEffect-CJGo-L3B.js";
 function s(e, n) {

package/dist/{useList-ByMguSS_.js → useList-C5PBIv2I.js}

@@ -1,7 +1,7 @@
 import { a as p } from "./objectWithoutPropertiesLoose-D7Cp0Pg_.js";
 import * as f from "react";
-import { L as x } from "./combineHooksSlotProps-BHqhiBfc.js";
-import { u as re, e as ie } from "./index-CqjC7P5Y.js";
+import { L as x } from "./combineHooksSlotProps-D8j4htsd.js";
+import { u as re, e as ie } from "./index-CtPvew6C.js";
 function W(t, e, r = (n, l) => n === l) {
   return t.length === e.length && t.every((n, l) => r(n, e[l]));
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pismo/marola",
   "description": "CDX tribe component library",
-  "version": "0.0.1-alpha.15",
+  "version": "0.0.1-alpha.17",
   "type": "module",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",
@@ -31,7 +31,7 @@
     "coverage": "vitest run --coverage",
     "export-files": "node scripts/export-files.cjs",
     "prebuild": "yarn export-files",
-    "build": "tsc --p ./tsconfig-build.json && vite build",
+    "build": "tsc --p ./tsconfig-build.json && vite build && mv ./dist/assets/marola.css ./dist",
     "postbuild": "storybook build --disable-telemetry --output-dir build",
     "storybook": "storybook dev -p 6006"
   },

package/dist/SelectButton-DWtqAiwt.js

@@ -1,45 +0,0 @@
-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/_commonjsHelpers-CT_km90n.js

@@ -1,30 +0,0 @@
-var u = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {};
-function f(e) {
-  return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
-}
-function l(e) {
-  if (e.__esModule)
-    return e;
-  var r = e.default;
-  if (typeof r == "function") {
-    var t = function o() {
-      return this instanceof o ? Reflect.construct(r, arguments, this.constructor) : r.apply(this, arguments);
-    };
-    t.prototype = r.prototype;
-  } else
-    t = {};
-  return Object.defineProperty(t, "__esModule", { value: !0 }), Object.keys(e).forEach(function(o) {
-    var n = Object.getOwnPropertyDescriptor(e, o);
-    Object.defineProperty(t, o, n.get ? n : {
-      enumerable: !0,
-      get: function() {
-        return e[o];
-      }
-    });
-  }), t;
-}
-export {
-  l as a,
-  u as c,
-  f as g
-};

package/dist/components/Advice/Advice.stories.js

@@ -1,48 +0,0 @@
-import { Advice as o } from "./Advice.js";
-import * as e from "react";
-const n = (t) => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 576 512", "data-waves-icon": "fa/duotone/helmet-battle", fill: "currentColor", color: "currentColor", width: "1em", height: "1em", style: {
-  fill: "currentcolor",
-  color: "currentcolor",
-  width: "1em",
-  height: "1em"
-}, ...t }, /* @__PURE__ */ e.createElement("defs", null, /* @__PURE__ */ e.createElement("style", null, `
-      .fa-secondary {
-        opacity: .4
-      }
-    `)), /* @__PURE__ */ e.createElement("path", { className: "fa-primary", d: "M31.99 256c17.63 0 32.01-12.5 32.01-28V0L.9928 221.1C-4.132 238.9 11.24 256 31.99 256zM575 221.1L512 0v228c0 15.5 14.38 28 32 28C564.8 256 580.1 238.9 575 221.1zM159.1 192L159.1 224l96 32v256l64-.0022L320 256l96-32l.0008-31.1H159.1z" }), /* @__PURE__ */ e.createElement("path", { className: "fa-secondary", d: "M480 210.9C480 90.38 288 0 288 0S95.1 90.38 95.1 210.9c0 82.75-22.88 145.9-31.13 180.6c-3.375 14.5 3.625 29.38 16.38 35.25L255.1 512V256L159.1 224L159.1 192h256L416 224l-96 32l-.0009 255.1l174.9-85.25c12.63-5.875 19.75-20.75 16.25-35.25C502.9 356.8 480 293.6 480 210.9z" })), c = {
-  title: "Components/Advice",
-  component: o,
-  tags: ["autodocs"],
-  parameters: {
-    layout: "padded"
-  }
-}, a = {
-  args: {
-    type: "without-results",
-    content: "No Results"
-  }
-}, l = {
-  args: {
-    type: "no-permission",
-    content: "No Permission"
-  }
-}, r = {
-  name: "Custom Icons (Waves Icons)",
-  args: {
-    icon: { icon: "logo", iconFamily: "pi", color: "var(--secondary-orange)", size: "5rem" },
-    content: "Pismo"
-  }
-}, m = {
-  name: "Custom Icons (SVG)",
-  args: {
-    IconSvg: n,
-    content: "Ready for battle?"
-  }
-};
-export {
-  r as CustomIcon,
-  m as CustomIconSVG,
-  l as NoPermission,
-  a as WithoutResults,
-  c as default
-};

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

@@ -1,40 +0,0 @@
-import { jsx as t } from "react/jsx-runtime";
-import "../Chip/Chip.js";
-import { Button as i } from "./Button.js";
-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 k = {
-  title: "Components/Button",
-  component: i,
-  tags: ["autodocs"],
-  decorators: [
-    (o) => /* @__PURE__ */ t("div", { style: { padding: "1em" }, children: /* @__PURE__ */ t(o, {}) })
-  ],
-  argTypes: {
-    onClick: {
-      if: { arg: "link", exists: !1 }
-    },
-    type: {
-      control: { type: "text" },
-      if: { arg: "onClick", exists: !0 }
-    },
-    link: {
-      control: { type: "text" },
-      if: { arg: "onClick", exists: !1 }
-    }
-  }
-}, f = {
-  args: { children: "Button", onClick: () => alert("Button was clicked!") }
-}, g = {
-  args: { children: "Button", link: "https://marola.pismolabs.io" }
-};
-export {
-  g as Link,
-  f as Simple,
-  k as default
-};

package/dist/components/Chip/Chip.stories.js

@@ -1,59 +0,0 @@
-import { jsx as a } from "react/jsx-runtime";
-import { Chip as i } from "./Chip.js";
-import { Icon as e } from "../Icon/Icon.js";
-import "../Button/Button.js";
-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 f = {
-  title: "Components/Chip",
-  component: i,
-  tags: ["autodocs"],
-  decorators: [
-    (s) => /* @__PURE__ */ a("div", { style: { padding: "1em" }, children: /* @__PURE__ */ a(s, {}) })
-  ]
-}, r = {
-  args: {
-    label: "Example text"
-  }
-}, t = {
-  args: {
-    ...r == null ? void 0 : r.args,
-    onClickContent: () => alert("Button was clicked!")
-  }
-}, n = {
-  args: {
-    ...t == null ? void 0 : t.args,
-    onClickRemove: () => alert("Remove changes!")
-  }
-}, o = {
-  args: {
-    ...n == null ? void 0 : n.args,
-    leftAdornment: {
-      icon: /* @__PURE__ */ a(e, { icon: "calendar-days", color: "rgba(var(--gray-95-rgb), 0.45)", size: "1.125rem" })
-    }
-  }
-}, b = {
-  args: {
-    ...o == null ? void 0 : o.args,
-    variant: "outlined"
-  }
-}, j = {
-  args: {
-    ...o == null ? void 0 : o.args,
-    variant: "contained"
-  }
-};
-export {
-  t as Clickable,
-  n as ClickableWithRemove,
-  j as FullContained,
-  o as FullDefault,
-  b as FullOutlined,
-  r as Simple,
-  f as default
-};