@pismo/marola 0.0.1-alpha.19 → 0.0.1-alpha.2

package/dist/components/Dialog/Title.js

@@ -1,28 +1,13 @@
 import { jsxs as l, Fragment as s, jsx as e } from "react/jsx-runtime";
+import { s as r } from "../../Dialog.module-BO0mdB7d.js";
 import { Typography as a } from "../Typography/Typography.js";
-import { s as r } from "../../Dialog.module-B8COssqi.js";
-const n = ({ title: i, subTitle: t }) => /* @__PURE__ */ l(s, { children: [
-  /* @__PURE__ */ e(
-    a,
-    {
-      element: "h1",
-      elementProps: { id: "alert-dialog-title" },
-      variant: "h4",
-      className: r.dialog__title,
-      children: i
-    }
-  ),
+const n = ({
+  title: i,
+  subTitle: t
+}) => /* @__PURE__ */ l(s, { children: [
+  /* @__PURE__ */ e(a, { element: "h1", elementProps: { id: "alert-dialog-title" }, variant: "h4", className: r.dialog__title, children: i }),
   /* @__PURE__ */ e("hr", { className: r.dialog__divider, "aria-hidden": !0 }),
-  t && /* @__PURE__ */ e(
-    a,
-    {
-      element: "h2",
-      elementProps: { id: "alert-dialog-description" },
-      variant: "h4",
-      className: r.dialog__subtitle,
-      children: t
-    }
-  )
+  t && /* @__PURE__ */ e(a, { element: "h2", elementProps: { id: "alert-dialog-description" }, variant: "h4", className: r.dialog__subtitle, children: t })
 ] });
 export {
   n as default

package/dist/components/LoadingSpinner/LoadingSpinner.d.ts

@@ -1,7 +1,5 @@
 export interface LoadingSpinnerProps {
-    /** Whether to invert colours or not */
     invert?: boolean;
-    /** Space separated list of CSS classes to apply */
     classNames?: string;
 }
 export declare const LoadingSpinner: ({ invert, classNames }: LoadingSpinnerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/LoadingSpinner/LoadingSpinner.js

@@ -1,16 +1,17 @@
 import '../../assets/LoadingSpinner.css';
-import { jsxs as e, jsx as s } from "react/jsx-runtime";
-import { useMemo as o } from "react";
+import { jsxs as o, jsx as s } from "react/jsx-runtime";
+import { useMemo as e } from "react";
 import { c as t } from "../../clsx-DB4S2d7J.js";
 const n = {
-  "ls-ring": "_ls-ring_elvjz_1",
-  "ls-ring--invert": "_ls-ring--invert_elvjz_34"
-}, a = ({ invert: i = !1, classNames: r }) => {
-  const l = o(
-    () => t([n["ls-ring"]], { [n["ls-ring--invert"]]: i }, r),
-    [r, i]
-  );
-  return /* @__PURE__ */ e("div", { className: l, children: [
+  "ls-ring": "_ls-ring_19dsy_1",
+  "ls-ring--invert": "_ls-ring--invert_19dsy_34"
+}, c = ({ invert: i = !1, classNames: r }) => {
+  const l = e(() => t(
+    [n["ls-ring"]],
+    { [n["ls-ring--invert"]]: i },
+    r
+  ), [r, i]);
+  return /* @__PURE__ */ o("div", { className: l, children: [
     /* @__PURE__ */ s("div", {}),
     /* @__PURE__ */ s("div", {}),
     /* @__PURE__ */ s("div", {}),
@@ -18,6 +19,6 @@ const n = {
   ] });
 };
 export {
-  a as LoadingSpinner,
-  a as default
+  c as LoadingSpinner,
+  c as default
 };

package/dist/components/Typography/Typography.d.ts

@@ -1,33 +1,22 @@
-import { ComponentType, ElementType, HTMLAttributes, LabelHTMLAttributes, ReactNode } from 'react';
+import { ComponentType, ElementType, HTMLAttributes, ReactNode } from 'react';
 
-export type VariantType = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'body-large' | 'body-medium' | 'body' | 'body-small' | 'body-tiny' | 'quote-large' | 'quote' | 'form-input' | 'form-label' | 'form-hint' | 'form-dropdown' | 'table-header' | 'table-body' | 'table-body-secondary' | 'button' | 'link';
+export type VariantType = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "body-large" | "body-medium" | "body" | "body-small" | "body-tiny" | "quote-large" | "quote" | "form-input" | "form-label" | "form-hint" | "form-dropdown" | "table-header" | "table-body" | "table-body-secondary" | "button" | "link";
 export type CommonTypographyHTMLAttributes = HTMLAttributes<HTMLParagraphElement> & HTMLAttributes<HTMLHeadingElement> & HTMLAttributes<HTMLSpanElement> & HTMLAttributes<HTMLTableCellElement>;
 export type TypographyProps = {
-    /** Text or children to display */
     children: ReactNode;
-    /** The HTML element to render as on the DOM */
+    elementProps?: HTMLAttributes<CommonTypographyHTMLAttributes>;
+    dataTestId?: string;
     element?: ElementType;
-    /** Style to be visually displayed as  */
-    variant?: VariantType;
-    /** Space separated list of CSS classes to apply */
     className?: string;
-    /** Color to apply */
-    color?: string;
-    /** Whether to apply underline text decoration */
+    variant?: VariantType;
     underline?: boolean;
-    /** Whether to apply strikethrough text decoration */
     strikethrough?: boolean;
-    /** Whether to set a higher 'bold' font weight */
     bold?: boolean;
-    /** Additional props to pass down to native HTML element e.g. dataset attributes  */
-    elementProps?: HTMLAttributes<CommonTypographyHTMLAttributes> & LabelHTMLAttributes<HTMLLabelElement>;
-    /** ID that tests can use to get this component from the DOM */
-    ['data-testid']?: string;
 };
 /**
  * Typography component provide HTML 'element' field (default span) and override
  * element specific styling with 'variant'. 'className' to provide additional
  * styling. elementProps to provide additional HTML element attributes
  */
-export declare const Typography: import('react').ForwardRefExoticComponent<TypographyProps & import('react').RefAttributes<ElementType | ComponentType>>;
+export declare const Typography: import('react').ForwardRefExoticComponent<TypographyProps & import("react").RefAttributes<ElementType | ComponentType>>;
 export default Typography;

package/dist/components/Typography/Typography.js

@@ -1,94 +1,73 @@
 import '../../assets/Typography.css';
-import { jsx as f } from "react/jsx-runtime";
-import { forwardRef as y, useMemo as g } from "react";
-import { bemify as p, getBEMBase as q, getBEMBlock as M } from "../../utils/styleStrings.js";
-import { c as B } from "../../clsx-DB4S2d7J.js";
-const E = "_h1_1elsk_1", S = "_h2_1elsk_11", $ = "_h3_1elsk_21", w = "_h4_1elsk_31", v = "_body_1elsk_41", x = "_quote_1elsk_75", N = "_form__input_1elsk_98", T = "_form__hint_1elsk_103", j = "_form__label_1elsk_108", P = "_form__dropdown_1elsk_113", R = "_table__header_1elsk_131", U = "_table__body_1elsk_136", V = "_button_1elsk_159", W = "_SM_1elsk_178", t = {
-  h1: E,
-  "h1--bold": "_h1--bold_1elsk_7",
-  h2: S,
-  "h2--bold": "_h2--bold_1elsk_17",
-  h3: $,
-  "h3--bold": "_h3--bold_1elsk_27",
-  h4: w,
-  "h4--bold": "_h4--bold_1elsk_37",
-  body: v,
-  "body--large": "_body--large_1elsk_46",
-  "body--medium": "_body--medium_1elsk_50",
-  "body--small": "_body--small_1elsk_54",
-  "body--tiny": "_body--tiny_1elsk_58",
-  "body--bold": "_body--bold_1elsk_62",
-  "body--strikethrough": "_body--strikethrough_1elsk_65",
-  "body--underlined": "_body--underlined_1elsk_68",
-  "body--strikethrough-underlined": "_body--strikethrough-underlined_1elsk_71",
-  quote: x,
-  "quote--large": "_quote--large_1elsk_80",
-  "quote--bold": "_quote--bold_1elsk_85",
-  "quote--strikethrough": "_quote--strikethrough_1elsk_88",
-  "quote--underlined": "_quote--underlined_1elsk_91",
-  "quote--strikethrough-underlined": "_quote--strikethrough-underlined_1elsk_94",
-  form__input: N,
-  form__hint: T,
-  form__label: j,
-  form__dropdown: P,
-  "form--bold": "_form--bold_1elsk_118",
-  "form--strikethrough": "_form--strikethrough_1elsk_121",
-  "form--underlined": "_form--underlined_1elsk_124",
-  "form--strikethrough-underlined": "_form--strikethrough-underlined_1elsk_127",
-  table__header: R,
-  table__body: U,
-  "table__body--secondary": "_table__body--secondary_1elsk_141",
-  "table--bold": "_table--bold_1elsk_146",
-  "table--strikethrough": "_table--strikethrough_1elsk_149",
-  "table--underlined": "_table--underlined_1elsk_152",
-  "table--strikethrough-underlined": "_table--strikethrough-underlined_1elsk_155",
-  button: V,
-  "button--bold": "_button--bold_1elsk_165",
-  "button--strikethrough": "_button--strikethrough_1elsk_168",
-  "button--underlined": "_button--underlined_1elsk_171",
-  "button--strikethrough-underlined": "_button--strikethrough-underlined_1elsk_174",
-  SM: W,
-  "SM--bold": "_SM--bold_1elsk_183"
-}, z = ["form", "table"], A = (o) => {
-  const e = o.toString();
-  let _ = "body";
-  return e.match(/^h[1-4]/) ? _ = e : e.match(/^h[5-6]/) && (_ = "h4"), e === "th" && (_ = "table-header"), e === "td" && (_ = "table-body"), _;
-}, H = y((o, e) => {
+import { jsx as y } from "react/jsx-runtime";
+import { forwardRef as u, useMemo as c } from "react";
+import { c as f } from "../../clsx-DB4S2d7J.js";
+const p = "_h1_111i6_1", g = "_h2_111i6_11", k = "_h3_111i6_21", q = "_h4_111i6_31", T = "_body_111i6_41", w = "_quote_111i6_75", $ = "_form__input_111i6_86", x = "_form__hint_111i6_91", N = "_form__label_111i6_96", S = "_form__dropdown_111i6_101", v = "_table__header_111i6_107", E = "_table__body_111i6_112", V = "_button_111i6_123", r = {
+  h1: p,
+  "h1--bold": "_h1--bold_111i6_7",
+  h2: g,
+  "h2--bold": "_h2--bold_111i6_17",
+  h3: k,
+  "h3--bold": "_h3--bold_111i6_27",
+  h4: q,
+  "h4--bold": "_h4--bold_111i6_37",
+  body: T,
+  "body--large": "_body--large_111i6_46",
+  "body--medium": "_body--medium_111i6_50",
+  "body--small": "_body--small_111i6_54",
+  "body--tiny": "_body--tiny_111i6_58",
+  "body--bold": "_body--bold_111i6_62",
+  "body--strikethrough": "_body--strikethrough_111i6_65",
+  "body--underlined": "_body--underlined_111i6_68",
+  "body--strikethrough-underlined": "_body--strikethrough-underlined_111i6_71",
+  quote: w,
+  "quote--large": "_quote--large_111i6_80",
+  form__input: $,
+  form__hint: x,
+  form__label: N,
+  form__dropdown: S,
+  table__header: v,
+  table__body: E,
+  "table__body--secondary": "_table__body--secondary_111i6_117",
+  button: V
+}, j = (t) => {
+  const _ = t.toString();
+  let o = "body";
+  return _.match(/^h[1-4]/) ? o = _ : _.match(/^h[5-6]/) && (o = "h4"), _ === "th" && (o = "table-header"), _ === "td" && (o = "table-body"), o;
+}, I = (t) => {
+  let _ = t.replace(/form-/g, "form__");
+  return _ = _.replace(/table-/g, "table__"), _ = _.replace(new RegExp("(?<!-)-(?!-)", "g"), "--"), _;
+}, U = u((t, _) => {
   const {
-    children: _,
+    dataTestId: o,
+    children: s,
     className: n,
-    underline: d = !1,
-    element: b = "span",
-    bold: h = !1,
-    color: k,
-    variant: u = A(b),
-    strikethrough: l = !1,
-    elementProps: a
-  } = o, m = b, c = g(() => {
-    const r = p(u, z), i = q(r), s = M(r);
-    return B(
-      t[i],
-      { [t[`${r}`]]: r !== i },
-      n,
-      { [t[`${s}--bold`]]: h },
-      { [t[`${s}--underlined`]]: d },
-      { [t[`${s}--strikethrough`]]: l },
-      { [t[`${s}--strikethrough-underlined`]]: l && l && d }
-    );
-  }, [h, n, l, d, u]);
-  return /* @__PURE__ */ f(
-    m,
+    underline: l = !1,
+    element: i = "span",
+    bold: a = !1,
+    variant: e = j(i),
+    strikethrough: d = !1,
+    elementProps: b
+  } = t, h = i, m = c(() => f(
+    r[I(e)],
+    n,
+    { [r[`${e}--bold`]]: a },
+    { [r[`${e}--underlined`]]: l },
+    { [r[`${e}--strikethrough`]]: d },
+    { [r[`${e}--strikethrough-underlined`]]: d && d && l }
+  ), [a, n, d, l, e]);
+  return /* @__PURE__ */ y(
+    h,
     {
-      style: { color: k },
-      ref: e,
-      "data-testid": o["data-testid"],
-      ...a ?? {},
-      className: c,
-      children: _
+      ref: _,
+      "data-testid": o,
+      ...b != null && b,
+      className: m,
+      children: s
     }
   );
 });
 export {
-  H as Typography,
-  H as default
+  U as Typography,
+  U as default
 };

package/dist/main.d.ts

@@ -1,27 +1,5 @@
-/**
- * This file is automatically generated. Any changes will be lost.
- * run "yarn export-files" or "yarn build" to regenerate it.
- */
-export * from './components/Advice/Advice';
-export * from './components/Button/Button';
-export * from './components/Checkbox/Checkbox';
-export * from './components/Chip/Chip';
+
 export * from './components/Dialog/Dialog';
-export * from './components/Icon/Icon';
-export * from './components/IconButton/IconButton';
-export * from './components/Input/Input';
-export * from './components/InputSearch/InputSearch';
-export * from './components/LoadingSpinner/LoadingSpinner';
-export * from './components/PageHeader/PageHeader';
-export * from './components/Pagination/Pagination';
-export * from './components/Select/Select';
-export * from './components/Skeleton/Skeleton';
-export * from './components/Snackbar/Snackbar';
-export * from './components/SortTooltip/SortTooltip';
-export * from './components/Stepper/Stepper';
-export * from './components/Table/Table';
-export * from './components/Tabs/Tabs';
-export * from './components/TextDisplay/TextDisplay';
-export * from './components/Toggle/Toggle';
-export * from './components/Tooltip/Tooltip';
 export * from './components/Typography/Typography';
+export * from './components/LoadingSpinner/LoadingSpinner';
+export * from './components/CallToActionButton/CallToActionButton';

package/dist/main.js

@@ -1,64 +1,17 @@
-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 m } 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 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 D } from "./components/LoadingSpinner/LoadingSpinner.js";
-import { PageHeader as h } from "./components/PageHeader/PageHeader.js";
-import { Pagination as C, paginationDefaultTranslations as A } from "./components/Pagination/Pagination.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";
-import { Stepper as J } from "./components/Stepper/Stepper.js";
-import { Table as M } from "./components/Table/Table.js";
-import { Tabs as Q } from "./components/Tabs/Tabs.js";
-import { TextDisplay as U } from "./components/TextDisplay/TextDisplay.js";
-import { Toggle as W } from "./components/Toggle/Toggle.js";
-import { Tooltip as Y } from "./components/Tooltip/Tooltip.js";
-import { Typography as _ } from "./components/Typography/Typography.js";
-import { default as oo } from "./components/Dialog/Title.js";
-import { default as eo } from "./components/Dialog/Content.js";
-import { default as po } from "./components/Dialog/Actions.js";
-import { Tab as fo } from "./components/Tabs/Tab.js";
-import { TabPanel as mo } from "./components/Tabs/TabPanel.js";
+import './assets/main.css';
+import { Dialog as r } from "./components/Dialog/Dialog.js";
+import { Typography as a } from "./components/Typography/Typography.js";
+import { LoadingSpinner as p } from "./components/LoadingSpinner/LoadingSpinner.js";
+import { CallToActionButton as n } from "./components/CallToActionButton/CallToActionButton.js";
+import { default as m } from "./components/Dialog/Title.js";
+import { default as d } from "./components/Dialog/Content.js";
+import { default as s } from "./components/Dialog/Actions.js";
 export {
-  po as Actions,
-  e as Advice,
-  p as Button,
-  f as Checkbox,
-  m as Chip,
-  eo as Content,
-  l as Dialog,
-  oo as DialogTitle,
-  T as FamilyAndIcons,
-  s as Icon,
-  S as IconButton,
-  u as Input,
-  d as InputSearch,
-  D as LoadingSpinner,
-  h as PageHeader,
-  C as Pagination,
-  B as Select,
-  v as SelectOption,
-  H as Skeleton,
-  L as SkeletonCircle,
-  O as SkeletonTable,
-  q as Snackbar,
-  z as SortTooltip,
-  J as Stepper,
-  fo as Tab,
-  mo as TabPanel,
-  M as Table,
-  Q as Tabs,
-  U as TextDisplay,
-  W as Toggle,
-  Y as Tooltip,
-  _ as Typography,
-  A as paginationDefaultTranslations,
-  E as sortTooltipDefaultTranslations
+  s as Actions,
+  n as CallToActionButton,
+  d as Content,
+  r as Dialog,
+  m as DialogTitle,
+  p as LoadingSpinner,
+  a as Typography
 };

package/dist/types/helpers.d.ts

@@ -1,9 +1,10 @@
-/// <reference types="vite-plugin-svgr/client" />
-
 // Saves having to declare 'never' for every property that exists on the 'other' type
 // Creates a new type that 'only' has properties in the first type and not in the second, if the property does not
 // exist in the second type, it is given the value of 'never' so it can never be set
-type Only<T, U> = { [P in keyof T]: T[P] } & Omit<{ [P in keyof U]?: never }, keyof T>;
+type Only<T, U> = { [P in keyof T]: T[P] } & Omit<
+  { [P in keyof U]?: never },
+  keyof T
+>;
 
 // Usage MyNewType = Either<TypeA, TypeB>
 // Creates a new type via union based on two types
@@ -14,14 +15,6 @@ export type Either<T, U> = Only<T, U> | Only<U, T>;
 // note these arguments must be declared in MyType as optional '?'
 type RequireAllOrNone<T, U extends keyof T = never> = (
   | Required<Pick<T, U>> // Require all properties
-  | Partial<Record<U, never>> // Require none
-) &
-  Omit<T, U>; // remaining keys not listed in U
-
-// S = string, D = delimiter to split by. Then split S by D and return array of strings. "foo-bar-baz" = ["foo","bar","baz"]
-// Fallback if no '-' return [s] which is an array of the input string e.g. foo = [foo]
-type Split<S extends string, D extends string> = string extends S
-  ? string[]
-  : S extends `${infer T}${D}${infer Rest}`
-    ? [T, ...Split<Rest, D>]
-    : [S];
+  | Partial<Record<U, never>>
+  ) & // Require none
+  Omit<T, U>; // remaining keys not listed in U

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pismo/marola",
   "description": "CDX tribe component library",
-  "version": "0.0.1-alpha.19",
+  "version": "0.0.1-alpha.2",
   "type": "module",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",
@@ -17,78 +17,36 @@
   ],
   "scripts": {
     "dev": "vite",
-    "lint": "eslint . --report-unused-disable-directives --max-warnings 0",
-    "lint:fix": "yarn lint --fix",
-    "lint:scss": "stylelint \"**/*.scss\" --fix",
-    "prettier": "prettier . --write",
+    "build": "tsc --p ./tsconfig-build.json && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview",
-    "prepublishOnly": "npm run build",
-    "test": "yarn test:unit",
-    "test:unit": "vitest run",
-    "test:unit:visual": "vitest-preview",
-    "test:unit:watch": "vitest",
-    "test:e2e": "echo \"no test implemented\"",
-    "coverage": "vitest run --coverage",
-    "export-files": "node scripts/export-files.cjs",
-    "prebuild": "yarn export-files",
-    "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"
+    "prepublishOnly": "npm run build"
   },
   "peerDependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@ianvs/prettier-plugin-sort-imports": "^4.2.1",
-    "@storybook/addon-a11y": "^8.0.8",
-    "@storybook/addon-essentials": "^8.0.8",
-    "@storybook/addon-interactions": "^8.0.8",
-    "@storybook/addon-links": "^8.0.8",
-    "@storybook/addon-onboarding": "^8.0.8",
-    "@storybook/blocks": "^8.0.8",
-    "@storybook/react": "^8.0.8",
-    "@storybook/react-vite": "^8.0.8",
-    "@storybook/test": "^8.0.8",
-    "@testing-library/react": "^15.0.5",
     "@types/node": "^20.12.2",
     "@types/react": "^18.2.66",
     "@types/react-dom": "^18.2.22",
-    "@typescript-eslint/eslint-plugin": "^7.6.0",
-    "@typescript-eslint/parser": "^7.6.0",
+    "@typescript-eslint/eslint-plugin": "^7.2.0",
+    "@typescript-eslint/parser": "^7.2.0",
     "@vitejs/plugin-react": "^4.2.1",
     "clsx": "^2.1.0",
-    "commitlint": "^19.2.1",
-    "cypress": "^13.8.1",
     "eslint": "^8.57.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.6",
-    "eslint-plugin-simple-import-sort": "^12.0.0",
-    "eslint-plugin-storybook": "^0.8.0",
-    "glob": "^10.3.14",
-    "husky": "^9.0.11",
-    "jsdom": "^24.0.0",
-    "prettier": "^3.2.5",
+    "glob": "^10.3.12",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sass": "^1.72.0",
-    "storybook": "^8.0.8",
-    "stylelint": "^16.3.1",
-    "stylelint-config-recess-order": "^5.0.0",
-    "stylelint-config-standard-scss": "^13.1.0",
-    "stylelint-prettier": "^5.0.0",
     "typescript": "^5.2.2",
     "vite": "^5.2.0",
     "vite-plugin-dts": "^3.8.1",
-    "vite-plugin-lib-inject-css": "^2.0.1",
-    "vite-plugin-svgr": "^4.2.0",
-    "vitest": "^1.4.0",
-    "vitest-preview": "^0.0.1"
+    "vite-plugin-lib-inject-css": "^2.0.1"
   },
   "dependencies": {
-    "@mui/base": "^5.0.0-beta.40",
-    "@mui/material": "^5.15.15"
+    "@mui/base": "^5.0.0-beta.40"
   }
 }

package/src/playground/Playground.tsx

@@ -0,0 +1,58 @@
+import {CallToActionButton, LoadingSpinner, Typography} from '../../lib/main';
+
+import DialogExample from "./DialogExample.tsx";
+
+/**
+ * A playground that can be used to test and build components. Run `yarn dev` to launch this page
+ */
+const Playground = () => {
+    return <>
+        <DialogExample/>
+        <CallToActionButton variation="primary">Test Button</CallToActionButton>
+        <CallToActionButton variation="secondary">Test Button secondary</CallToActionButton>
+        <CallToActionButton variation="primary" isLoading>Test Button loading</CallToActionButton>
+        <CallToActionButton variation="secondary" isLoading>Test Button loading secondary</CallToActionButton>
+        <CallToActionButton variation="primary" disabled>Test Button disabled</CallToActionButton>
+        <CallToActionButton variation="secondary" disabled>Test Button disabled secondary</CallToActionButton>
+        <Typography element="p">abc</Typography>
+        <Typography element="h1" variant="form-hint">abc</Typography>
+        <Typography>regular</Typography>
+        {/*<Typography className={styles["test-red"]}>regular extra classes</Typography>*/}
+        <Typography variant="body" element="p">body explicit (element p) </Typography>
+        <Typography variant="body-large">body large </Typography>
+        <Typography variant="body-medium">body medium </Typography>
+        <Typography variant="body-small">body small </Typography>
+        <Typography variant="body-tiny">body tiny </Typography>
+        <Typography element="h1">h1</Typography>
+        <Typography element="h2">h2</Typography>
+        <Typography element="h3">h3</Typography>
+        <Typography element="h4">h4</Typography>
+        <Typography element="h5">h5 uses h4 style</Typography>
+        <Typography element="h6">h6 uses h4 style</Typography>
+        <Typography element="h1" variant="h4">h1 with h4 style</Typography>
+        <Typography element="h2" variant="h4">h2 with h4 style</Typography>
+        <Typography element="h3" variant="h4">h3 with h4 style</Typography>
+        <Typography variant="quote"> quote</Typography>
+        <Typography variant="quote-large"> large quote</Typography>
+        <Typography bold> bold</Typography>
+        <Typography strikethrough> strikethrough</Typography>
+        <Typography underline> underlined</Typography>
+        <Typography element="p" underline strikethrough>strikethrough and underlined paragraph</Typography>
+        <Typography variant="form-hint"> form-hint</Typography>
+        <Typography variant="form-label"> form-label</Typography>
+        <Typography variant="form-dropdown"> form-dropdown</Typography>
+        <Typography variant="form-input"> form-input</Typography>
+        <Typography variant="table-header"> default element table header explicit variant</Typography>
+        <Typography variant="table-body"> default element table body explicit variant</Typography>
+        <Typography variant="table-body-secondary"> default element but table body secondary explicit
+            variant</Typography>
+        <Typography element="th"> th </Typography>
+        <Typography element="td"> td</Typography>
+        <Typography element="li"> list item</Typography>
+        <Typography variant="button"> button</Typography>
+        <LoadingSpinner/>
+        <LoadingSpinner invert/>
+    </>;
+};
+
+export default Playground;