@temp-spotwork/ui 1.4.8 → 1.5.0

package/dist/components/atoms/form/textarea/RichTextarea.stories.d.ts

@@ -0,0 +1,11 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { RichTextarea } from './rich-textarea';
+
+declare const meta: Meta<typeof RichTextarea>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;
+export declare const WithInitialFormatting: Story;
+export declare const ErrorState: Story;
+export declare const WarningState: Story;
+export declare const DisabledState: Story;

package/dist/components/atoms/form/textarea/RichTextarea.stories.js

@@ -0,0 +1,67 @@
+import n, { useState as l } from "react";
+import { RichTextarea as a } from "./rich-textarea.js";
+const c = {
+  title: "@spotwork-ui/RichTextarea",
+  component: a,
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["autodocs"],
+  args: {
+    value: "",
+    label: "Description",
+    placeholder: "Add content description",
+    helperText: "Use the toolbar to format text",
+    rows: 6,
+    onChange: () => {
+    }
+  }
+}, e = {
+  render: (t) => {
+    const [o, i] = l(t.value ?? "");
+    return n.createElement(
+      "div",
+      { style: { width: 520 } },
+      n.createElement(a, {
+        ...t,
+        value: o,
+        onChange: (r) => {
+          i(r), t.onChange(r);
+        }
+      })
+    );
+  }
+}, p = {
+  args: {
+    value: "<p><strong>Highlights</strong></p><ul><li>Rich text content</li><li><em>Italic details</em></li></ul>",
+    helperText: "Initial HTML content is supported."
+  },
+  render: e.render
+}, u = {
+  args: {
+    error: !0,
+    helperText: "Description is required"
+  },
+  render: e.render
+}, h = {
+  args: {
+    warning: !0,
+    helperText: "Description is getting too long"
+  },
+  render: e.render
+}, g = {
+  args: {
+    disabled: !0,
+    value: "<p>This content is read-only</p>",
+    helperText: "Disabled inputs cannot be edited"
+  },
+  render: e.render
+};
+export {
+  g as DisabledState,
+  u as ErrorState,
+  e as Primary,
+  h as WarningState,
+  p as WithInitialFormatting,
+  c as default
+};

package/dist/components/atoms/form/textarea/Textarea.stories.d.ts

@@ -5,3 +5,7 @@ declare const meta: Meta<typeof Textarea>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Primary: Story;
+export declare const WithInitialFormatting: Story;
+export declare const ErrorState: Story;
+export declare const WarningState: Story;
+export declare const DisabledState: Story;

package/dist/components/atoms/form/textarea/Textarea.stories.js

@@ -1,22 +1,67 @@
-import { f as o } from "../../../../index-CktvVE7I.js";
-import { Textarea as a } from "./textarea.js";
-const e = {
+import a, { useState as s } from "react";
+import { Textarea as n } from "./textarea.js";
+const c = {
   title: "@spotwork-ui/Textarea",
-  component: a,
+  component: n,
   parameters: {
     layout: "centered"
   },
   tags: ["autodocs"],
-  argTypes: {
-    backgroundColor: { control: "color" }
-  },
-  args: { onClick: o() }
-}, s = {
   args: {
-    label: "Textarea"
+    value: "",
+    label: "Description",
+    placeholder: "Add content description",
+    helperText: "Add helpful details",
+    rows: 6,
+    onChange: () => {
+    }
+  }
+}, e = {
+  render: (t) => {
+    const [o, i] = s(t.value ?? "");
+    return a.createElement(
+      "div",
+      { style: { width: 520 } },
+      a.createElement(n, {
+        ...t,
+        value: o,
+        onChange: (r) => {
+          i(r), t.onChange(r);
+        }
+      })
+    );
   }
+}, p = {
+  args: {
+    value: "This starts with pre-filled content.",
+    helperText: "Textarea accepts plain text values."
+  },
+  render: e.render
+}, u = {
+  args: {
+    error: !0,
+    helperText: "Description is required"
+  },
+  render: e.render
+}, h = {
+  args: {
+    warning: !0,
+    helperText: "Description is getting too long"
+  },
+  render: e.render
+}, g = {
+  args: {
+    disabled: !0,
+    value: "<p>This content is read-only</p>",
+    helperText: "Disabled inputs cannot be edited"
+  },
+  render: e.render
 };
 export {
-  s as Primary,
-  e as default
+  g as DisabledState,
+  u as ErrorState,
+  e as Primary,
+  h as WarningState,
+  p as WithInitialFormatting,
+  c as default
 };

package/dist/components/atoms/form/textarea/index.d.ts

@@ -1,2 +1,4 @@
 export { Textarea } from './textarea';
 export type { TextareaProps } from './textarea';
+export { RichTextarea } from './rich-textarea';
+export type { RichTextareaProps } from './rich-textarea';

package/dist/components/atoms/form/textarea/index.js

@@ -1,4 +1,6 @@
 import { Textarea as a } from "./textarea.js";
+import { RichTextarea as t } from "./rich-textarea.js";
 export {
+  t as RichTextarea,
   a as Textarea
 };

package/dist/components/atoms/form/textarea/rich-textarea.d.ts

@@ -0,0 +1,53 @@
+import { default as React } from 'react';
+
+export type RichTextareaProps = {
+    /**
+     * HTML value for rich text content
+     */
+    value: string;
+    /**
+     * placeholder
+     */
+    placeholder?: string;
+    /**
+     * inital amount of rows wants for the textarea
+     */
+    rows?: number;
+    /**
+     * The inital amount of columns wanted for the textarea
+     */
+    cols?: number;
+    /**
+     * the hint text that is at the bottom of the component
+     */
+    helperText?: string;
+    /**
+     * variable to determine error state
+     */
+    error?: boolean;
+    /**
+     * variable to determine warning state
+     */
+    warning?: boolean;
+    /**
+     * variable to determine disabled state
+     */
+    disabled?: boolean;
+    /**
+     * Returns editor content as HTML string
+     */
+    onChange: (value: string) => void;
+    /**
+     * The label that is placed at the top of the component
+     */
+    label?: string;
+    /**
+     * pass onBlur func
+     */
+    onBlur?: () => void;
+    /**
+     * optional?: autoFocus
+     */
+    autoFocus?: boolean;
+};
+export declare const RichTextarea: React.ForwardRefExoticComponent<RichTextareaProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/atoms/form/textarea/rich-textarea.js

@@ -0,0 +1,275 @@
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import R, { useState as L, useRef as A, useImperativeHandle as _, useEffect as w, useCallback as k } from "react";
+import { Icons as q } from "../../icons/icons.js";
+import "../../icons/iconsSVGs/Large/Profile.js";
+import "../../icons/iconsSVGs/Small/Profile.js";
+import { styles as O } from "./styles.js";
+import { c as p } from "../../../../index-fN7hCOo3.js";
+import { Typography as T } from "../../../styles/typography/typography.js";
+import { styleMap as E } from "../../../styles/typography/style.js";
+import { getLabelColor as D, getBorderClasses as j, getHelperTextColor as W } from "../utils-for-forms/state-functions.js";
+const d = ({
+  onClick: l,
+  active: c,
+  title: x,
+  children: u
+}) => /* @__PURE__ */ e(
+  "button",
+  {
+    type: "button",
+    title: x,
+    onMouseDown: (n) => {
+      n.preventDefault(), l();
+    },
+    style: {
+      width: 28,
+      height: 28,
+      border: "none",
+      borderRadius: 5,
+      cursor: "pointer",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      fontSize: 13,
+      fontFamily: "inherit",
+      background: c ? "#EEEDFE" : "transparent",
+      color: c ? "#534AB7" : "var(--color-text-secondary, #888)",
+      padding: 0,
+      flexShrink: 0
+    },
+    children: u
+  }
+), K = () => /* @__PURE__ */ e("b", { style: { fontWeight: 700, fontSize: 13 }, children: "B" }), G = () => /* @__PURE__ */ e("i", { style: { fontStyle: "italic", fontSize: 13 }, children: "I" }), J = () => /* @__PURE__ */ e("u", { style: { textDecoration: "underline", fontSize: 13 }, children: "U" }), P = () => /* @__PURE__ */ i("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: [
+  /* @__PURE__ */ e("circle", { cx: "2", cy: "4", r: "1.5", fill: "currentColor" }),
+  /* @__PURE__ */ e("rect", { x: "5", y: "3", width: "8", height: "2", rx: "1", fill: "currentColor" }),
+  /* @__PURE__ */ e("circle", { cx: "2", cy: "9", r: "1.5", fill: "currentColor" }),
+  /* @__PURE__ */ e("rect", { x: "5", y: "8", width: "8", height: "2", rx: "1", fill: "currentColor" })
+] }), Q = () => /* @__PURE__ */ i("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: [
+  /* @__PURE__ */ e("text", { x: "0", y: "6", fontSize: "6", fill: "currentColor", children: "1." }),
+  /* @__PURE__ */ e("rect", { x: "5", y: "3", width: "8", height: "2", rx: "1", fill: "currentColor" }),
+  /* @__PURE__ */ e("text", { x: "0", y: "11", fontSize: "6", fill: "currentColor", children: "2." }),
+  /* @__PURE__ */ e("rect", { x: "5", y: "8", width: "8", height: "2", rx: "1", fill: "currentColor" })
+] }), oe = R.forwardRef(
+  ({
+    value: l,
+    placeholder: c,
+    rows: x = 6,
+    helperText: u,
+    error: n = !1,
+    warning: f = !1,
+    disabled: t = !1,
+    label: H,
+    onChange: y,
+    onBlur: v,
+    autoFocus: g = !1
+  }, U) => {
+    const [C, b] = L(!1), [s, B] = L({
+      bold: !1,
+      italic: !1,
+      underline: !1,
+      insertUnorderedList: !1,
+      insertOrderedList: !1
+    }), o = A(null);
+    _(U, () => o.current, []);
+    const m = O(t), N = D(C, f, n, t), S = W(f, n, t), z = j(C, f, n, t);
+    w(() => {
+      const r = o.current;
+      r && r.innerHTML !== l && (r.innerHTML = l);
+    }, [l]), w(() => {
+      var r;
+      g && ((r = o.current) == null || r.focus());
+    }, [g]);
+    const h = k(() => {
+      B({
+        bold: document.queryCommandState("bold"),
+        italic: document.queryCommandState("italic"),
+        underline: document.queryCommandState("underline"),
+        insertUnorderedList: document.queryCommandState("insertUnorderedList"),
+        insertOrderedList: document.queryCommandState("insertOrderedList")
+      });
+    }, []), a = k(
+      (r) => {
+        var I;
+        t || ((I = o.current) == null || I.focus(), document.execCommand(r, !1, void 0), h(), o.current && y(o.current.innerHTML));
+      },
+      [t, y, h]
+    ), F = x * 24, M = l.replace(/<br\s*\/?>/gi, "").trim().length === 0;
+    return /* @__PURE__ */ i("div", { className: m.container, children: [
+      /* @__PURE__ */ e(
+        T,
+        {
+          swStyle: 3,
+          "data-testid": "labelTextarea",
+          color: N,
+          children: H
+        }
+      ),
+      /* @__PURE__ */ i("div", { className: p(m.subContainer), children: [
+        /* @__PURE__ */ i(
+          "div",
+          {
+            className: p(z, "w-full self-stretch"),
+            style: { borderRadius: "var(--border-radius-md, 6px)", overflow: "hidden" },
+            children: [
+              /* @__PURE__ */ i(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 2,
+                    padding: "6px 8px",
+                    borderBottom: "1px solid var(--color-border-tertiary, #d9d9d9)",
+                    background: "var(--color-background-secondary)",
+                    opacity: t ? 0.4 : 1,
+                    pointerEvents: t ? "none" : "auto"
+                  },
+                  children: [
+                    /* @__PURE__ */ e(
+                      d,
+                      {
+                        title: "Bold",
+                        active: s.bold,
+                        onClick: () => a("bold"),
+                        children: /* @__PURE__ */ e(K, {})
+                      }
+                    ),
+                    /* @__PURE__ */ e(
+                      d,
+                      {
+                        title: "Italic",
+                        active: s.italic,
+                        onClick: () => a("italic"),
+                        children: /* @__PURE__ */ e(G, {})
+                      }
+                    ),
+                    /* @__PURE__ */ e(
+                      d,
+                      {
+                        title: "Underline",
+                        active: s.underline,
+                        onClick: () => a("underline"),
+                        children: /* @__PURE__ */ e(J, {})
+                      }
+                    ),
+                    /* @__PURE__ */ e(
+                      "div",
+                      {
+                        style: {
+                          width: 1,
+                          height: 18,
+                          background: "var(--color-border-tertiary)",
+                          margin: "0 4px",
+                          flexShrink: 0
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ e(
+                      d,
+                      {
+                        title: "Bullet list",
+                        active: s.insertUnorderedList,
+                        onClick: () => a("insertUnorderedList"),
+                        children: /* @__PURE__ */ e(P, {})
+                      }
+                    ),
+                    /* @__PURE__ */ e(
+                      d,
+                      {
+                        title: "Numbered list",
+                        active: s.insertOrderedList,
+                        onClick: () => a("insertOrderedList"),
+                        children: /* @__PURE__ */ e(Q, {})
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ i(
+                "div",
+                {
+                  style: {
+                    position: "relative"
+                  },
+                  children: [
+                    M && c && /* @__PURE__ */ e(
+                      "div",
+                      {
+                        "aria-hidden": "true",
+                        className: p(E[5]),
+                        style: {
+                          position: "absolute",
+                          inset: "10px 12px auto 12px",
+                          color: "var(--color-text-tertiary)",
+                          pointerEvents: "none",
+                          lineHeight: 1.6
+                        },
+                        children: c
+                      }
+                    ),
+                    /* @__PURE__ */ e(
+                      "div",
+                      {
+                        ref: o,
+                        contentEditable: !t,
+                        "data-testid": "textarea",
+                        suppressContentEditableWarning: !0,
+                        className: p(
+                          m.textarea,
+                          E[5],
+                          "[&_ul]:list-disc [&_ol]:list-decimal [&_ul]:pl-6 [&_ol]:pl-6"
+                        ),
+                        style: {
+                          minHeight: F,
+                          padding: "10px 12px",
+                          outline: "none",
+                          border: "none",
+                          boxSizing: "border-box",
+                          lineHeight: 1.6,
+                          cursor: t ? "not-allowed" : "text",
+                          opacity: t ? 0.5 : 1
+                        },
+                        onFocus: () => b(!0),
+                        onBlur: () => {
+                          b(!1), v == null || v();
+                        },
+                        onInput: (r) => {
+                          t || y(r.target.innerHTML);
+                        },
+                        onKeyUp: h,
+                        onMouseUp: h
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        u && /* @__PURE__ */ i("div", { className: m.helperContainer, children: [
+          (n || f) && /* @__PURE__ */ e(
+            q,
+            {
+              disabled: !0,
+              icon: n ? "AlertSmall" : "WarningSmall",
+              color: S,
+              id: "IconHintTextarea"
+            }
+          ),
+          /* @__PURE__ */ e(
+            T,
+            {
+              "data-testid": "hintTextarea",
+              color: S,
+              children: u,
+              swStyle: 1
+            }
+          )
+        ] })
+      ] })
+    ] });
+  }
+);
+export {
+  oe as RichTextarea
+};

package/dist/components/atoms/form/textarea/textarea.js

@@ -51,11 +51,7 @@ const J = A.forwardRef(
             onChange: (N) => {
               !e && v(N.target.value);
             },
-            className: f(
-              g,
-              o.textarea,
-              H[5]
-            ),
+            className: f(g, o.textarea, H[5]),
             value: d,
             placeholder: x,
             rows: h,

package/dist/components/atoms/small-large-text/small-large-text.js

@@ -17,13 +17,14 @@ import "../../../index-CYyrKZeH.js";
 import "../form/textfield/textfield.js";
 import "../form/stepper/stepper.js";
 import "../form/textarea/textarea.js";
+import "../form/textarea/rich-textarea.js";
 import "../form/timeselect/timeselect.js";
 import "../../molecules/datatables/cell/cell.js";
 import "../../molecules/dataviz/donut-chart/donut-chart.js";
 import "../../../react-spring_web.modern-BLL8Qmtg.js";
 import "../../molecules/form/radiogroup/radiogroup.js";
 import "../../../card-Cc2Qkiqr.js";
-function F({ text: r, size: o = 300, isSmall: m = !0 }) {
+function G({ text: r, size: o = 300, isSmall: m = !0 }) {
   const [t, p] = c(m);
   return /* @__PURE__ */ n("div", { children: [
     /* @__PURE__ */ i(l, { swStyle: 3, color: "default", children: t ? `${r.slice(0, o)}${r.length > o ? "..." : ""}` : r }),
@@ -31,5 +32,5 @@ function F({ text: r, size: o = 300, isSmall: m = !0 }) {
   ] });
 }
 export {
-  F as SmallLargeText
+  G as SmallLargeText
 };

package/dist/components/molecules/alert/alert.js

@@ -19,6 +19,7 @@ import "../../../index-CYyrKZeH.js";
 import "../../atoms/form/textfield/textfield.js";
 import "../../atoms/form/stepper/stepper.js";
 import "../../atoms/form/textarea/textarea.js";
+import "../../atoms/form/textarea/rich-textarea.js";
 import "../../atoms/form/timeselect/timeselect.js";
 import { Button as b } from "../button/button.js";
 import "../datatables/cell/cell.js";
@@ -26,7 +27,7 @@ import "../dataviz/donut-chart/donut-chart.js";
 import "../../../react-spring_web.modern-BLL8Qmtg.js";
 import "../form/radiogroup/radiogroup.js";
 import "../../../card-Cc2Qkiqr.js";
-function rr({
+function er({
   children: p,
   width: c,
   open: d,
@@ -74,5 +75,5 @@ function rr({
   ] }) });
 }
 export {
-  rr as Alert
+  er as Alert
 };

package/dist/components/molecules/dialog/dialog.js

@@ -19,6 +19,7 @@ import "../../../index-CYyrKZeH.js";
 import "../../atoms/form/textfield/textfield.js";
 import "../../atoms/form/stepper/stepper.js";
 import "../../atoms/form/textarea/textarea.js";
+import "../../atoms/form/textarea/rich-textarea.js";
 import "../../atoms/form/timeselect/timeselect.js";
 import { Button as d } from "../button/button.js";
 import "../datatables/cell/cell.js";
@@ -43,7 +44,7 @@ function sr({
   contentMaxHeight: y,
   heightSpacingRem: N = 15
 }) {
-  const { ref: w, height: s } = n(), { ref: C, height: H } = n(), i = N;
+  const { ref: w, height: p } = n(), { ref: C, height: H } = n(), i = N;
   return /* @__PURE__ */ r($, { open: x, onOpenChange: t, children: /* @__PURE__ */ e(I, { children: [
     /* @__PURE__ */ r(_, { className: "fixed inset-0 bg-surface-subduedInverted bg-opacity-50 " }),
     /* @__PURE__ */ e(
@@ -66,7 +67,7 @@ function sr({
               {
                 style: {
                   // Calculate max height based on viewport height minus spacing and measured header/footer heights
-                  maxHeight: y ?? (o ? `calc(100vh - ${i}rem - ${s}px - ${H}px)` : `calc(100vh - ${i}rem - ${s}px)`)
+                  maxHeight: y ?? (o ? `calc(100vh - ${i}rem - ${p}px - ${H}px)` : `calc(100vh - ${i}rem - ${p}px)`)
                 },
                 className: c("overflow-auto", g && "p-xl", !o && "rounded-b-xl"),
                 children: f
@@ -88,7 +89,7 @@ function sr({
                       onClick: t
                     }
                   ),
-                  l && /* @__PURE__ */ r("div", { className: "flex gap-xl", children: l.map((p) => /* @__PURE__ */ r(d, { size: "large", ...p }, p.text)) })
+                  l && /* @__PURE__ */ r("div", { className: "flex gap-xl", children: l.map((s) => /* @__PURE__ */ r(d, { size: "large", ...s }, s.text)) })
                 ]
               }
             )

package/dist/components/molecules/drawer/drawer.js

@@ -19,17 +19,18 @@ import "../../../index-CYyrKZeH.js";
 import "../../atoms/form/textfield/textfield.js";
 import "../../atoms/form/stepper/stepper.js";
 import "../../atoms/form/textarea/textarea.js";
+import "../../atoms/form/textarea/rich-textarea.js";
 import "../../atoms/form/timeselect/timeselect.js";
 import { Button as L } from "../button/button.js";
 import "../datatables/cell/cell.js";
 import "../dataviz/donut-chart/donut-chart.js";
 import "../form/radiogroup/radiogroup.js";
 import "../../../card-Cc2Qkiqr.js";
-function vr({
+function gr({
   children: N,
   actionBox: b,
   title: l,
-  open: e,
+  open: o,
   setOpen: i,
   width: a,
   transitionDuration: c = 500,
@@ -42,7 +43,7 @@ function vr({
   scrollBehavior: D = "auto",
   enableScroll: s = !0
 }) {
-  const [n, T] = I(c), o = y(null), h = y(0), R = X(
+  const [n, T] = I(c), e = y(null), h = y(0), R = X(
     () => ({
       from: { opacity: 0, transform: `translateX(${a})` },
       enter: { opacity: 1, transform: "translateX(0%)" },
@@ -52,21 +53,21 @@ function vr({
       }
     }),
     [a, n]
-  ), B = E(e, R);
+  ), B = E(o, R);
   v(() => {
     T(c);
   }, [c]);
   const _ = F({
-    width: e ? a : 0,
+    width: o ? a : 0,
     config: { duration: n }
   });
   v(() => {
-    e && m && s && o.current && (o.current.scrollTop = h.current);
-  }, [e, m, s]);
+    o && m && s && e.current && (e.current.scrollTop = h.current);
+  }, [o, m, s]);
   const $ = () => {
-    m && s && o.current && (h.current = o.current.scrollTop), i == null || i(!1);
+    m && s && e.current && (h.current = e.current.scrollTop), i == null || i(!1);
   };
-  return /* @__PURE__ */ r(M, { open: e, onOpenChange: i, children: /* @__PURE__ */ r(q, { children: B(
+  return /* @__PURE__ */ r(M, { open: o, onOpenChange: i, children: /* @__PURE__ */ r(q, { children: B(
     (x, j) => j ? /* @__PURE__ */ t(k, { children: [
       /* @__PURE__ */ r(g.div, { style: { opacity: x.opacity }, children: /* @__PURE__ */ r(
         z,
@@ -105,10 +106,10 @@ function vr({
                   u && /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(L, { ...u }) })
                 ] })
               ] }),
-              e && /* @__PURE__ */ r(
+              o && /* @__PURE__ */ r(
                 "div",
                 {
-                  ref: o,
+                  ref: e,
                   className: `flex-1 ${s ? "overflow-y-auto overflow-x-hidden" : "overflow-hidden"}`,
                   style: { scrollBehavior: D },
                   children: N
@@ -122,5 +123,5 @@ function vr({
   ) }) });
 }
 export {
-  vr as Drawer
+  gr as Drawer
 };

package/dist/components/molecules/snackbar/Snackbar.stories.js

@@ -1,6 +1,6 @@
 import { jsx as t, jsxs as a } from "react/jsx-runtime";
 import { useState as l } from "react";
-import { S as r, P as c, V as d } from "../../../snackbar-BaF8Ts3S.js";
+import { S as r, P as c, V as d } from "../../../snackbar-CgqDB5xn.js";
 import { Button as h } from "../button/button.js";
 const w = {
   title: "@spotwork-ui/Snackbar",

package/dist/components/molecules/snackbar/index.js

@@ -1,4 +1,4 @@
-import { S as o } from "../../../snackbar-BaF8Ts3S.js";
+import { S as o } from "../../../snackbar-CgqDB5xn.js";
 export {
   o as Snackbar
 };

package/dist/components/molecules/snackbar/snackbar.js

@@ -1,5 +1,5 @@
 import "react/jsx-runtime";
-import { S as C } from "../../../snackbar-BaF8Ts3S.js";
+import { S as D } from "../../../snackbar-CgqDB5xn.js";
 import "../../styles/tailwind-config/index.js";
 import "../../styles/typography/typography.js";
 import "../../styles/colors/colors.js";
@@ -18,6 +18,7 @@ import "../../../index-CYyrKZeH.js";
 import "../../atoms/form/textfield/textfield.js";
 import "../../atoms/form/stepper/stepper.js";
 import "../../atoms/form/textarea/textarea.js";
+import "../../atoms/form/textarea/rich-textarea.js";
 import "../../atoms/form/timeselect/timeselect.js";
 import "../button/button.js";
 import "../datatables/cell/cell.js";
@@ -27,5 +28,5 @@ import "../form/radiogroup/radiogroup.js";
 import "../../../card-Cc2Qkiqr.js";
 import "./styles.js";
 export {
-  C as Snackbar
+  D as Snackbar
 };

package/dist/main.d.ts

@@ -46,6 +46,8 @@ export type { StepperProps } from './components/atoms/form/stepper';
 export { Tab } from './components/atoms/tab';
 export { Textarea } from './components/atoms/form/textarea';
 export type { TextareaProps } from './components/atoms/form/textarea';
+export { RichTextarea } from './components/atoms/form/textarea';
+export type { RichTextareaProps } from './components/atoms/form/textarea';
 export { Textfield } from './components/atoms/form/textfield';
 export type { TextfieldProps } from './components/atoms/form/textfield';
 export { Timeselect } from './components/atoms/form/timeselect';

package/dist/main.js

@@ -5,11 +5,11 @@ import { Badge as l } from "./components/atoms/badge/badge.js";
 import { LabelValuePair as d } from "./components/atoms/card-content/label-value-pair/label-value-pair.js";
 import { Note as b } from "./components/atoms/card-content/note/note.js";
 import { Chatheader as u } from "./components/atoms/conversation/chatheader/chatheader.js";
-import { ContextMenu as S } from "./components/molecules/navigation/context-menu/context-menu.js";
+import { ContextMenu as h } from "./components/molecules/navigation/context-menu/context-menu.js";
 import { Dateselect as T } from "./components/atoms/form/dateselect/dateselect.js";
 import { TimePicker as M } from "./components/atoms/form/time-picker/time-picker.js";
 import { RecurrenceDay as y } from "./components/atoms/daybubble/recurrence-day/recurrence-day.js";
-import { RecurrenceWeek as R } from "./components/atoms/form/recurrence-week/recurrence-week.js";
+import { RecurrenceWeek as k } from "./components/atoms/form/recurrence-week/recurrence-week.js";
 import { Checkbox as N } from "./components/atoms/form/checkbox/checkbox.js";
 import { Chips as L } from "./components/atoms/form/chips/chips.js";
 import { Dropdown as F } from "./components/atoms/form/dropdown/dropdown.js";
@@ -31,136 +31,138 @@ import { Switch as to } from "./components/atoms/form/switch/switch.js";
 import { Stepper as mo } from "./components/atoms/form/stepper/stepper.js";
 import { Tab as xo } from "./components/atoms/tab/tab.js";
 import { Textarea as io } from "./components/atoms/form/textarea/textarea.js";
-import { Textfield as lo } from "./components/atoms/form/textfield/textfield.js";
-import { Timeselect as co } from "./components/atoms/form/timeselect/timeselect.js";
-import { Typeahead as go } from "./components/atoms/form/typeahead/typeahead.js";
-import { Button as Co } from "./components/molecules/button/button.js";
-import { NotesAndHistory as ho } from "./components/molecules/card-content/notes-and-history/notes-and-history.js";
-import { CollapsibleCard as Do } from "./components/molecules/collapsible-card/collapsible-card.js";
-import { Contact as wo } from "./components/molecules/conversation/contact/contact.js";
-import { MessageEditor as ko } from "./components/molecules/conversation/message-editor/message-editor.js";
-import { MessageGroupComposer as Bo } from "./components/molecules/conversation/message-group-composer/message-group-composer.js";
-import { Cell as vo } from "./components/molecules/datatables/cell/cell.js";
-import { Row as Po } from "./components/molecules/datatables/row/row.js";
-import { RowHeader as Go } from "./components/molecules/datatables/row-header/row-header.js";
-import { DonutChart as Ao } from "./components/molecules/dataviz/donut-chart/donut-chart.js";
-import { DotMatrix as Io } from "./components/molecules/dataviz/dot-matrix/dot-matrix.js";
-import { ProgressBar as Wo } from "./components/molecules/dataviz/progress-bar/progress-bar.js";
-import { SingleStackedBar as _o } from "./components/molecules/dataviz/single-stacked-bar/single-stacked-bar.js";
-import { Legend as qo } from "./components/molecules/dataviz/legend/legend.js";
-import { Drawer as Ko } from "./components/molecules/drawer/drawer.js";
-import { DateSelector as Qo } from "./components/molecules/filter/date-selector/date-selector.js";
-import { DateRangeSelector as Xo } from "./components/molecules/filter/date-range-selector/date-range-selector.js";
-import { RangeSelector as Zo } from "./components/molecules/filter/range-selector/range-selector.js";
-import { Radiogroup as or } from "./components/molecules/form/radiogroup/radiogroup.js";
-import { Link as er } from "./components/molecules/link/link.js";
-import { Header as pr } from "./components/molecules/navigation/header/header.js";
-import { Sidebar as ar } from "./components/molecules/navigation/sidebar/sidebar.js";
-import { Content as fr } from "./components/molecules/notifications/content/content.js";
-import { S as nr, i as lr } from "./snackbar-BaF8Ts3S.js";
-import { Tooltip as dr } from "./components/atoms/tooltip/tooltip.js";
-import { TabGroup as br } from "./components/molecules/tab-group/tab-group.js";
-import { Menubar as ur } from "./components/molecules/navigation/menubar/menubar.js";
-import { ContextSearch as Sr } from "./components/molecules/filter/context-search/context-search.js";
-import { SmallLargeText as Tr } from "./components/atoms/small-large-text/small-large-text.js";
-import { HorizontalBorder as Mr } from "./components/atoms/horizontal-border/horizontal-border.js";
-import { Dialog as yr } from "./components/molecules/dialog/dialog.js";
-import { Alert as Rr } from "./components/molecules/alert/alert.js";
-import { c as Nr } from "./card-Cc2Qkiqr.js";
-import { Colors as Lr } from "./components/styles/colors/colors.js";
-import { apple as Fr, blueRibbon as Gr, borderColor as Hr, buttonBorder as Ar, buttonGlyph as zr, buttonSurface as Ir, cinnabar as Vr, crusta as Wr, glyph as Er, linkColors as _r, progressBar as jr, shadow as qr, sun as Jr, surface as Kr, woodsmoke as Or } from "./components/styles/colors/colormap.js";
-import { Typography as Ur } from "./components/styles/typography/typography.js";
-import { fontFamilyMap as Yr, fontSizeMap as Zr, fontWeightMap as $r, styleMap as oe, textTypeMap as re } from "./components/styles/typography/style.js";
-import { DashedLineSVG as te } from "./components/styles/dashedBorder/DashedLineSVG.js";
+import { RichTextarea as lo } from "./components/atoms/form/textarea/rich-textarea.js";
+import { Textfield as co } from "./components/atoms/form/textfield/textfield.js";
+import { Timeselect as go } from "./components/atoms/form/timeselect/timeselect.js";
+import { Typeahead as Co } from "./components/atoms/form/typeahead/typeahead.js";
+import { Button as So } from "./components/molecules/button/button.js";
+import { NotesAndHistory as Do } from "./components/molecules/card-content/notes-and-history/notes-and-history.js";
+import { CollapsibleCard as wo } from "./components/molecules/collapsible-card/collapsible-card.js";
+import { Contact as Ro } from "./components/molecules/conversation/contact/contact.js";
+import { MessageEditor as Bo } from "./components/molecules/conversation/message-editor/message-editor.js";
+import { MessageGroupComposer as vo } from "./components/molecules/conversation/message-group-composer/message-group-composer.js";
+import { Cell as Po } from "./components/molecules/datatables/cell/cell.js";
+import { Row as Go } from "./components/molecules/datatables/row/row.js";
+import { RowHeader as Ao } from "./components/molecules/datatables/row-header/row-header.js";
+import { DonutChart as Io } from "./components/molecules/dataviz/donut-chart/donut-chart.js";
+import { DotMatrix as Wo } from "./components/molecules/dataviz/dot-matrix/dot-matrix.js";
+import { ProgressBar as _o } from "./components/molecules/dataviz/progress-bar/progress-bar.js";
+import { SingleStackedBar as qo } from "./components/molecules/dataviz/single-stacked-bar/single-stacked-bar.js";
+import { Legend as Ko } from "./components/molecules/dataviz/legend/legend.js";
+import { Drawer as Qo } from "./components/molecules/drawer/drawer.js";
+import { DateSelector as Xo } from "./components/molecules/filter/date-selector/date-selector.js";
+import { DateRangeSelector as Zo } from "./components/molecules/filter/date-range-selector/date-range-selector.js";
+import { RangeSelector as or } from "./components/molecules/filter/range-selector/range-selector.js";
+import { Radiogroup as er } from "./components/molecules/form/radiogroup/radiogroup.js";
+import { Link as pr } from "./components/molecules/link/link.js";
+import { Header as ar } from "./components/molecules/navigation/header/header.js";
+import { Sidebar as fr } from "./components/molecules/navigation/sidebar/sidebar.js";
+import { Content as nr } from "./components/molecules/notifications/content/content.js";
+import { S as sr, i as dr } from "./snackbar-CgqDB5xn.js";
+import { Tooltip as br } from "./components/atoms/tooltip/tooltip.js";
+import { TabGroup as ur } from "./components/molecules/tab-group/tab-group.js";
+import { Menubar as hr } from "./components/molecules/navigation/menubar/menubar.js";
+import { ContextSearch as Tr } from "./components/molecules/filter/context-search/context-search.js";
+import { SmallLargeText as Mr } from "./components/atoms/small-large-text/small-large-text.js";
+import { HorizontalBorder as yr } from "./components/atoms/horizontal-border/horizontal-border.js";
+import { Dialog as kr } from "./components/molecules/dialog/dialog.js";
+import { Alert as Nr } from "./components/molecules/alert/alert.js";
+import { c as Lr } from "./card-Cc2Qkiqr.js";
+import { Colors as Fr } from "./components/styles/colors/colors.js";
+import { apple as Hr, blueRibbon as Ar, borderColor as zr, buttonBorder as Ir, buttonGlyph as Vr, buttonSurface as Wr, cinnabar as Er, crusta as _r, glyph as jr, linkColors as qr, progressBar as Jr, shadow as Kr, sun as Or, surface as Qr, woodsmoke as Ur } from "./components/styles/colors/colormap.js";
+import { Typography as Yr } from "./components/styles/typography/typography.js";
+import { fontFamilyMap as $r, fontSizeMap as oe, fontWeightMap as re, styleMap as ee, textTypeMap as te } from "./components/styles/typography/style.js";
+import { DashedLineSVG as me } from "./components/styles/dashedBorder/DashedLineSVG.js";
 export {
-  Rr as Alert,
+  Nr as Alert,
   i as Avatar,
   l as Badge,
-  Co as Button,
+  So as Button,
   V as Calendar,
-  Nr as Card,
-  vo as Cell,
+  Lr as Card,
+  Po as Cell,
   u as Chatheader,
   N as Checkbox,
   E as CheckboxFilter,
   L as Chips,
-  Do as CollapsibleCard,
-  Lr as Colors,
-  wo as Contact,
-  S as ContextMenu,
-  Sr as ContextSearch,
-  te as DashedLineSVG,
-  Xo as DateRangeSelector,
-  Qo as DateSelector,
+  wo as CollapsibleCard,
+  Fr as Colors,
+  Ro as Contact,
+  h as ContextMenu,
+  Tr as ContextSearch,
+  me as DashedLineSVG,
+  Zo as DateRangeSelector,
+  Xo as DateSelector,
   T as Dateselect,
-  yr as Dialog,
-  Ao as DonutChart,
-  Io as DotMatrix,
-  Ko as Drawer,
+  kr as Dialog,
+  Io as DonutChart,
+  Wo as DotMatrix,
+  Qo as Drawer,
   F as Dropdown,
   H as DropdownFilter,
   z as DropdownSearch,
   j as FormNavigation,
-  pr as Header,
-  Mr as HorizontalBorder,
+  ar as Header,
+  yr as HorizontalBorder,
   J as Icons,
   d as LabelValuePair,
-  qo as Legend,
-  er as Link,
-  ur as Menubar,
+  Ko as Legend,
+  pr as Link,
+  hr as Menubar,
   O as Message,
-  ko as MessageEditor,
-  Bo as MessageGroupComposer,
+  Bo as MessageEditor,
+  vo as MessageGroupComposer,
   U as Multiselect,
   Y as NavigationItem,
   b as Note,
-  ho as NotesAndHistory,
-  fr as NotificationContent,
-  Wo as ProgressBar,
+  Do as NotesAndHistory,
+  nr as NotificationContent,
+  _o as ProgressBar,
   $ as Radiobutton,
-  or as Radiogroup,
-  Zo as RangeSelector,
+  er as Radiogroup,
+  or as RangeSelector,
   y as RecurrenceDay,
-  R as RecurrenceWeek,
-  Po as Row,
-  Go as RowHeader,
+  k as RecurrenceWeek,
+  lo as RichTextarea,
+  Go as Row,
+  Ao as RowHeader,
   ro as SegmentedControl,
-  ar as Sidebar,
-  _o as SingleStackedBar,
-  Tr as SmallLargeText,
-  nr as Snackbar,
+  fr as Sidebar,
+  qo as SingleStackedBar,
+  Mr as SmallLargeText,
+  sr as Snackbar,
   mo as Stepper,
   to as Switch,
   xo as Tab,
-  br as TabGroup,
+  ur as TabGroup,
   io as Textarea,
-  lo as Textfield,
+  co as Textfield,
   M as TimePicker,
-  co as Timeselect,
-  lr as Toast,
-  dr as Tooltip,
+  go as Timeselect,
+  dr as Toast,
+  br as Tooltip,
   x as TooltipProvider,
-  go as Typeahead,
-  Ur as Typography,
-  Fr as apple,
-  Gr as blue_ribbon,
-  Hr as borderColor,
-  Ar as buttonBorder,
-  zr as buttonGlyph,
-  Ir as buttonSurface,
-  Vr as cinnabar,
-  Wr as crusta,
-  Yr as fontFamilyMap,
-  Zr as fontSizeMap,
-  $r as fontWeightMap,
-  Er as glyph,
-  _r as linkColors,
-  jr as progressBar,
-  qr as shadow,
-  oe as styleMap,
-  Jr as sun,
-  Kr as surface,
+  Co as Typeahead,
+  Yr as Typography,
+  Hr as apple,
+  Ar as blue_ribbon,
+  zr as borderColor,
+  Ir as buttonBorder,
+  Vr as buttonGlyph,
+  Wr as buttonSurface,
+  Er as cinnabar,
+  _r as crusta,
+  $r as fontFamilyMap,
+  oe as fontSizeMap,
+  re as fontWeightMap,
+  jr as glyph,
+  qr as linkColors,
+  Jr as progressBar,
+  Kr as shadow,
+  ee as styleMap,
+  Or as sun,
+  Qr as surface,
   m as tailwindConfig,
-  re as textTypeMap,
-  Or as woodsmoke
+  te as textTypeMap,
+  Ur as woodsmoke
 };

package/dist/{snackbar-BaF8Ts3S.js → snackbar-CgqDB5xn.js}

@@ -20,6 +20,7 @@ import "./index-CYyrKZeH.js";
 import "./components/atoms/form/textfield/textfield.js";
 import "./components/atoms/form/stepper/stepper.js";
 import "./components/atoms/form/textarea/textarea.js";
+import "./components/atoms/form/textarea/rich-textarea.js";
 import "./components/atoms/form/timeselect/timeselect.js";
 import { Button as De } from "./components/molecules/button/button.js";
 import "./components/molecules/datatables/cell/cell.js";
@@ -448,7 +449,7 @@ function z(t) {
   return t.some((o) => o === r ? !0 : (o.focus(), document.activeElement !== r));
 }
 var Ze = te, et = oe, ye = re, tt = ne, ot = se, rt = ae, nt = $;
-const Lt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const Mt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   Action: rt,
   Close: nt,
@@ -466,7 +467,7 @@ const Lt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   Viewport: et,
   createToastScope: Oe
 }, Symbol.toStringTag, { value: "Module" }));
-function Mt({
+function kt({
   title: t,
   open: r = !0,
   setOpen: o,
@@ -499,7 +500,7 @@ function Mt({
 }
 export {
   Ze as P,
-  Mt as S,
+  kt as S,
   et as V,
-  Lt as i
+  Mt as i
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@temp-spotwork/ui",
   "private": false,
-  "version": "1.4.8",
+  "version": "1.5.0",
   "type": "module",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",