@canonical/react-ds-app-launchpad 0.9.0-experimental.9 → 0.9.1-experimental.0

package/dist/esm/ui/MarkdownEditor/common/Toolbar/Toolbar.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { ToolbarButton, ToolbarGroup, ToolbarSeparator, } from "./common/index.js";
+import "./styles.css";
+const componentCssClassName = "ds toolbar";
+/**
+ * A horizontal container that groups related controls in a toolbar.
+ */
+const Toolbar = (({ id, children, className, style, label }) => {
+    const toolbarRef = useRef(null);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: We want to reapply tabindex when children change
+    useEffect(() => {
+        if (!toolbarRef.current)
+            return;
+        const buttons = Array.from(toolbarRef.current.querySelectorAll("button"));
+        for (const button of buttons) {
+            button.setAttribute("tabindex", "-1");
+        }
+        const firstNode = buttons[0];
+        if (firstNode)
+            firstNode.setAttribute("tabindex", "0");
+    }, [children]);
+    const handleKeyDown = (event) => {
+        if (!toolbarRef.current)
+            return;
+        const target = event.target;
+        if (target.tagName !== "BUTTON")
+            return;
+        if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
+            event.preventDefault();
+            const buttons = Array.from(toolbarRef.current.querySelectorAll("button") ?? []);
+            const direction = event.key === "ArrowLeft" ? -1 : 1;
+            const currentIndex = buttons.indexOf(target);
+            let nextIndex = currentIndex + direction;
+            if (nextIndex < 0)
+                nextIndex = buttons.length - 1;
+            if (nextIndex >= buttons.length)
+                nextIndex = 0;
+            const currentButton = buttons[currentIndex];
+            const nextButton = buttons[nextIndex];
+            currentButton.setAttribute("tabindex", "-1");
+            nextButton.setAttribute("tabindex", "0");
+            nextButton.focus();
+        }
+    };
+    return (_jsx("div", { id: id, style: style, className: [componentCssClassName, className].filter(Boolean).join(" "), "aria-label": label, role: "toolbar", "aria-orientation": "horizontal", ref: toolbarRef, onKeyDown: handleKeyDown, children: children }));
+});
+Toolbar.Group = ToolbarGroup;
+Toolbar.Button = ToolbarButton;
+Toolbar.Separator = ToolbarSeparator;
+export default Toolbar;
+//# sourceMappingURL=Toolbar.js.map

package/dist/esm/ui/MarkdownEditor/common/Toolbar/Toolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toolbar.js","sourceRoot":"","sources":["../../../../../../src/ui/MarkdownEditor/common/Toolbar/Toolbar.tsx"],"names":[],"mappings":"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"}

package/dist/esm/ui/MarkdownEditor/common/Toolbar/common/Button/Button.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { Tooltip } from "react-tooltip";
+import "./styles.css";
+const componentCssClassName = "ds toolbar-button";
+/**
+ * An accessible button with tooltip support designed for use in toolbars.
+ */
+const ToolbarButton = ({ children, className, style, label, shortcut, ...buttonProps }) => {
+    const id = useId();
+    const tooltipMessage = shortcut ? `${label} (${shortcut})` : label;
+    const tooltipId = `${id}-tooltip`;
+    return (_jsxs(_Fragment, { children: [_jsx("button", { id: id, style: style, className: [componentCssClassName, className].filter(Boolean).join(" "), "aria-label": label, type: "button", "data-tooltip-id": tooltipId, "data-tooltip-content": tooltipMessage, "data-tooltip-place": "bottom", ...buttonProps, children: children }), _jsx(Tooltip, { id: tooltipId, style: {
+                    padding: "5px 10px",
+                    fontSize: "0.75em",
+                } })] }));
+};
+export default ToolbarButton;
+//# sourceMappingURL=Button.js.map

package/dist/esm/ui/MarkdownEditor/common/Toolbar/common/Button/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../../../../../src/ui/MarkdownEditor/common/Toolbar/common/Button/Button.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AAC9B,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,OAAO,cAAc,CAAC;AAGtB,MAAM,qBAAqB,GAAG,mBAAmB,CAAC;AAElD;;GAEG;AACH,MAAM,aAAa,GAAG,CAAC,EACrB,QAAQ,EACR,SAAS,EACT,KAAK,EACL,KAAK,EACL,QAAQ,EACR,GAAG,WAAW,EACK,EAAsB,EAAE;IAC3C,MAAM,EAAE,GAAG,KAAK,EAAE,CAAC;IAEnB,MAAM,cAAc,GAAG,QAAQ,CAAC,CAAC,CAAC,GAAG,KAAK,KAAK,QAAQ,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC;IACnE,MAAM,SAAS,GAAG,GAAG,EAAE,UAAU,CAAC;IAElC,OAAO,CACL,8BACE,iBACE,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,CAAC,qBAAqB,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,gBAC3D,KAAK,EACjB,IAAI,EAAC,QAAQ,qBACI,SAAS,0BACJ,cAAc,wBACjB,QAAQ,KACvB,WAAW,YAEd,QAAQ,GACF,EACT,KAAC,OAAO,IACN,EAAE,EAAE,SAAS,EACb,KAAK,EAAE;oBACL,OAAO,EAAE,UAAU;oBACnB,QAAQ,EAAE,QAAQ;iBACnB,GACD,IACD,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/esm/ui/MarkdownEditor/common/Toolbar/common/Button/index.js

@@ -0,0 +1,4 @@
+/* @canonical/generator-ds 0.9.0-experimental.4 */
+export { default as ToolbarButton } from "./Button.js";
+export * from "./types.js";
+//# sourceMappingURL=index.js.map

package/dist/esm/ui/MarkdownEditor/common/Toolbar/common/Button/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../src/ui/MarkdownEditor/common/Toolbar/common/Button/index.ts"],"names":[],"mappings":"AAAA,kDAAkD;AAClD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,aAAa,CAAC;AACvD,cAAc,YAAY,CAAC"}

package/dist/esm/ui/MarkdownEditor/common/Toolbar/common/Button/styles.css

@@ -0,0 +1,17 @@
+/* @canonical/generator-ds 0.9.0-experimental.4 */
+
+.ds.toolbar-button {
+  height: var(--markdown-editor-toolbar-button-size);
+  width: var(--markdown-editor-toolbar-button-size);
+  border: none;
+  background: none;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  &:hover,
+  &:focus {
+    background-color: var(--markdown-editor-toolbar-hover-background-color);
+  }
+}

package/dist/esm/ui/MarkdownEditor/common/Toolbar/common/Button/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/esm/ui/MarkdownEditor/common/Toolbar/common/Button/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../../../../src/ui/MarkdownEditor/common/Toolbar/common/Button/types.ts"],"names":[],"mappings":""}

package/dist/esm/ui/MarkdownEditor/common/Toolbar/common/Group/Group.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "./styles.css";
+const componentCssClassName = "ds toolbar-group";
+/**
+ * A container for grouping related controls within a toolbar.
+ */
+const ToolbarGroup = ({ id, children, className, style, label, }) => {
+    return (_jsx("div", { id: id, style: style, className: [componentCssClassName, className].filter(Boolean).join(" "), "aria-label": label, 
+        // biome-ignore lint/a11y/useSemanticElements: This element is a group of controls
+        role: "group", children: children }));
+};
+export default ToolbarGroup;
+//# sourceMappingURL=Group.js.map

package/dist/esm/ui/MarkdownEditor/common/Toolbar/common/Group/Group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Group.js","sourceRoot":"","sources":["../../../../../../../../src/ui/MarkdownEditor/common/Toolbar/common/Group/Group.tsx"],"names":[],"mappings":";AAGA,OAAO,cAAc,CAAC;AAEtB,MAAM,qBAAqB,GAAG,kBAAkB,CAAC;AAEjD;;GAEG;AACH,MAAM,YAAY,GAAG,CAAC,EACpB,EAAE,EACF,QAAQ,EACR,SAAS,EACT,KAAK,EACL,KAAK,GACa,EAAsB,EAAE;IAC1C,OAAO,CACL,cACE,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,CAAC,qBAAqB,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,gBAC3D,KAAK;QACjB,kFAAkF;QAClF,IAAI,EAAC,OAAO,YAEX,QAAQ,GACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/esm/ui/MarkdownEditor/common/Toolbar/common/Group/index.js

@@ -0,0 +1,4 @@
+/* @canonical/generator-ds 0.9.0-experimental.4 */
+export { default as ToolbarGroup } from "./Group.js";
+export * from "./types.js";
+//# sourceMappingURL=index.js.map

package/dist/esm/ui/MarkdownEditor/common/Toolbar/common/Group/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../src/ui/MarkdownEditor/common/Toolbar/common/Group/index.ts"],"names":[],"mappings":"AAAA,kDAAkD;AAClD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,YAAY,CAAC;AACrD,cAAc,YAAY,CAAC"}

package/dist/esm/ui/MarkdownEditor/common/Toolbar/common/Group/styles.css

@@ -0,0 +1,7 @@
+/* @canonical/generator-ds 0.9.0-experimental.4 */
+
+.ds.toolbar-group {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--markdown-editor-toolbar-buttons-gap);
+}

package/dist/esm/ui/MarkdownEditor/common/Toolbar/common/Group/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/esm/ui/MarkdownEditor/common/Toolbar/common/Group/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../../../../src/ui/MarkdownEditor/common/Toolbar/common/Group/types.ts"],"names":[],"mappings":""}

package/dist/esm/ui/MarkdownEditor/common/Toolbar/common/Separator/Separator.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "./styles.css";
+const componentCssClassName = "ds toolbar-separator";
+/**
+ * A visual separator between groups of controls in a toolbar.
+ */
+const ToolbarSeparator = ({ id, className, style, }) => {
+    return (
+    // biome-ignore lint/a11y/useFocusableInteractive: This element is not interactive
+    _jsx("div", { id: id, style: style, className: [componentCssClassName, className].filter(Boolean).join(" "), role: "separator", "aria-orientation": "horizontal" }));
+};
+export default ToolbarSeparator;
+//# sourceMappingURL=Separator.js.map

package/dist/esm/ui/MarkdownEditor/common/Toolbar/common/Separator/Separator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Separator.js","sourceRoot":"","sources":["../../../../../../../../src/ui/MarkdownEditor/common/Toolbar/common/Separator/Separator.tsx"],"names":[],"mappings":";AAEA,OAAO,cAAc,CAAC;AAGtB,MAAM,qBAAqB,GAAG,sBAAsB,CAAC;AAErD;;GAEG;AACH,MAAM,gBAAgB,GAAG,CAAC,EACxB,EAAE,EACF,SAAS,EACT,KAAK,GACiB,EAAsB,EAAE;IAC9C,OAAO;IACL,kFAAkF;IAClF,cACE,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,CAAC,qBAAqB,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EACvE,IAAI,EAAC,WAAW,sBACC,YAAY,GAC7B,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/esm/ui/MarkdownEditor/common/Toolbar/common/Separator/index.js

@@ -0,0 +1,4 @@
+/* @canonical/generator-ds 0.9.0-experimental.4 */
+export { default as ToolbarSeparator } from "./Separator.js";
+export * from "./types.js";
+//# sourceMappingURL=index.js.map

package/dist/esm/ui/MarkdownEditor/common/Toolbar/common/Separator/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../src/ui/MarkdownEditor/common/Toolbar/common/Separator/index.ts"],"names":[],"mappings":"AAAA,kDAAkD;AAClD,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAC7D,cAAc,YAAY,CAAC"}

package/dist/esm/ui/MarkdownEditor/common/Toolbar/common/Separator/styles.css

@@ -0,0 +1,7 @@
+/* @canonical/generator-ds 0.9.0-experimental.4 */
+
+.ds.toolbar-separator {
+  display: inline-block;
+  width: 1px;
+  background-color: var(--markdown-editor-toolbar-separator-color);
+}

package/dist/esm/ui/MarkdownEditor/common/Toolbar/common/Separator/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/esm/ui/MarkdownEditor/common/Toolbar/common/Separator/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../../../../src/ui/MarkdownEditor/common/Toolbar/common/Separator/types.ts"],"names":[],"mappings":""}

package/dist/esm/ui/MarkdownEditor/common/Toolbar/common/index.js

@@ -0,0 +1,4 @@
+export * from "./Button/index.js";
+export * from "./Group/index.js";
+export * from "./Separator/index.js";
+//# sourceMappingURL=index.js.map

package/dist/esm/ui/MarkdownEditor/common/Toolbar/common/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../src/ui/MarkdownEditor/common/Toolbar/common/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,sBAAsB,CAAC"}

package/dist/esm/ui/MarkdownEditor/common/Toolbar/index.js

@@ -0,0 +1,9 @@
+/* @canonical/generator-ds 0.9.0-experimental.4 */
+import Toolbar from "./Toolbar.js";
+import { ToolbarButton, ToolbarGroup, ToolbarSeparator, } from "./common/index.js";
+Toolbar.Group = ToolbarGroup;
+Toolbar.Button = ToolbarButton;
+Toolbar.Separator = ToolbarSeparator;
+export * from "./types.js";
+export { Toolbar };
+//# sourceMappingURL=index.js.map

package/dist/esm/ui/MarkdownEditor/common/Toolbar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/ui/MarkdownEditor/common/Toolbar/index.ts"],"names":[],"mappings":"AAAA,kDAAkD;AAClD,OAAO,OAAO,MAAM,cAAc,CAAC;AACnC,OAAO,EACL,aAAa,EACb,YAAY,EACZ,gBAAgB,GACjB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,CAAC,KAAK,GAAG,YAAY,CAAC;AAC7B,OAAO,CAAC,MAAM,GAAG,aAAa,CAAC;AAC/B,OAAO,CAAC,SAAS,GAAG,gBAAgB,CAAC;AAErC,cAAc,YAAY,CAAC;AAC3B,OAAO,EAAE,OAAO,EAAE,CAAC"}

package/dist/esm/ui/MarkdownEditor/common/Toolbar/styles.css

@@ -0,0 +1,16 @@
+/* @canonical/generator-ds 0.9.0-experimental.4 */
+
+.ds.toolbar {
+  display: none;
+
+  gap: var(--markdown-editor-toolbar-buttons-gap);
+  padding: var(--markdown-editor-toolbar-vert-padding)
+    var(--markdown-editor-toolbar-horizontal-padding);
+}
+
+@container (min-width: 410px) {
+  .ds.toolbar {
+    display: flex;
+    flex-wrap: wrap;
+  }
+}

package/dist/esm/ui/MarkdownEditor/common/Toolbar/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/esm/ui/MarkdownEditor/common/Toolbar/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../../src/ui/MarkdownEditor/common/Toolbar/types.ts"],"names":[],"mappings":""}

package/dist/esm/ui/MarkdownEditor/common/ViewModeTabs/ViewModeTabs.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useId, useRef } from "react";
+import "./styles.css";
+const componentCssClassName = "ds view-mode-tabs";
+const selectedTabCssClassName = "selected";
+const tabs = ["write", "preview"];
+/**
+ * A toggle interface for switching between write and preview modes.
+ */
+const ViewModeTabs = ({ className, style, editMode, onEditModeChange, ariaLabelMessage = "View Mode Tabs", }) => {
+    const id = useId();
+    const tabRefs = useRef([]);
+    const handleKeyDown = (event) => {
+        if (event.key === "Enter" || event.key === " ") {
+            onEditModeChange(event.currentTarget.dataset.tab, "keydown");
+        }
+        if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
+            const currentIndex = tabs.indexOf(editMode);
+            const nextIndex = currentIndex === 0 ? 1 : 0;
+            onEditModeChange(tabs[nextIndex], "keydown");
+            tabRefs.current[nextIndex]?.focus();
+            event.preventDefault();
+        }
+    };
+    return (_jsx("div", { id: id, style: style, className: [componentCssClassName, className].filter(Boolean).join(" "), role: "tablist", "aria-label": ariaLabelMessage, children: tabs.map((tab, index) => (_jsx("button", { type: "button", role: "tab", className: ["tab", editMode === tab && selectedTabCssClassName]
+                .filter(Boolean)
+                .join(" "), "aria-selected": editMode === tab, onClick: () => onEditModeChange(tab, "click"), onKeyDown: handleKeyDown, tabIndex: editMode === tab ? 0 : -1, "data-tab": tab, ref: (el) => {
+                if (el) {
+                    tabRefs.current[index] = el;
+                }
+            }, children: tab.charAt(0).toUpperCase() + tab.slice(1) }, `tab-${id}-${tab}`))) }));
+};
+export default ViewModeTabs;
+//# sourceMappingURL=ViewModeTabs.js.map

package/dist/esm/ui/MarkdownEditor/common/ViewModeTabs/ViewModeTabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ViewModeTabs.js","sourceRoot":"","sources":["../../../../../../src/ui/MarkdownEditor/common/ViewModeTabs/ViewModeTabs.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAEtC,OAAO,cAAc,CAAC;AAGtB,MAAM,qBAAqB,GAAG,mBAAmB,CAAC;AAClD,MAAM,uBAAuB,GAAG,UAAU,CAAC;AAC3C,MAAM,IAAI,GAAe,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC;AAE9C;;GAEG;AACH,MAAM,YAAY,GAAG,CAAC,EACpB,SAAS,EACT,KAAK,EACL,QAAQ,EACR,gBAAgB,EAChB,gBAAgB,GAAG,gBAAgB,GACjB,EAAsB,EAAE;IAC1C,MAAM,EAAE,GAAG,KAAK,EAAE,CAAC;IACnB,MAAM,OAAO,GAAG,MAAM,CAAsB,EAAE,CAAC,CAAC;IAEhD,MAAM,aAAa,GAAG,CAAC,KAA6C,EAAE,EAAE;QACtE,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;YAC/C,gBAAgB,CAAC,KAAK,CAAC,aAAa,CAAC,OAAO,CAAC,GAAe,EAAE,SAAS,CAAC,CAAC;QAC3E,CAAC;QACD,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,IAAI,KAAK,CAAC,GAAG,KAAK,YAAY,EAAE,CAAC;YAC5D,MAAM,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;YAC5C,MAAM,SAAS,GAAG,YAAY,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YAE7C,gBAAgB,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE,SAAS,CAAC,CAAC;YAC7C,OAAO,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE,KAAK,EAAE,CAAC;YACpC,KAAK,CAAC,cAAc,EAAE,CAAC;QACzB,CAAC;IACH,CAAC,CAAC;IAEF,OAAO,CACL,cACE,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,CAAC,qBAAqB,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EACvE,IAAI,EAAC,SAAS,gBACF,gBAAgB,YAE3B,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE,CAAC,CACxB,iBAEE,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,KAAK,EACV,SAAS,EAAE,CAAC,KAAK,EAAE,QAAQ,KAAK,GAAG,IAAI,uBAAuB,CAAC;iBAC5D,MAAM,CAAC,OAAO,CAAC;iBACf,IAAI,CAAC,GAAG,CAAC,mBACG,QAAQ,KAAK,GAAG,EAC/B,OAAO,EAAE,GAAG,EAAE,CAAC,gBAAgB,CAAC,GAAG,EAAE,OAAO,CAAC,EAC7C,SAAS,EAAE,aAAa,EACxB,QAAQ,EAAE,QAAQ,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,cACzB,GAAG,EACb,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE;gBACV,IAAI,EAAE,EAAE,CAAC;oBACP,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC;gBAC9B,CAAC;YACH,CAAC,YAEA,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,IAjBtC,OAAO,EAAE,IAAI,GAAG,EAAE,CAkBhB,CACV,CAAC,GACE,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/esm/ui/MarkdownEditor/common/ViewModeTabs/index.js

@@ -0,0 +1,4 @@
+/* @canonical/generator-ds 0.9.0-experimental.4 */
+export { default as ViewModeTabs } from "./ViewModeTabs.js";
+export * from "./types.js";
+//# sourceMappingURL=index.js.map

package/dist/esm/ui/MarkdownEditor/common/ViewModeTabs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/ui/MarkdownEditor/common/ViewModeTabs/index.ts"],"names":[],"mappings":"AAAA,kDAAkD;AAClD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAC5D,cAAc,YAAY,CAAC"}

package/dist/esm/ui/MarkdownEditor/common/ViewModeTabs/styles.css

@@ -0,0 +1,42 @@
+/* @canonical/generator-ds 0.9.0-experimental.4 */
+
+.ds.view-mode-tabs {
+  display: flex;
+
+  & > .tab {
+    padding: var(--markdown-editor-tabs-vert-padding)
+      var(--markdown-editor-tabs-horizontal-padding);
+    border: 1px solid var(--markdown-editor-tabs-inactive-border-color);
+    border-width: 1px 1px 0 1px;
+    color: var(--markdown-editor-tabs-inactive-color);
+    background-color: var(--markdown-editor-tabs-inactive-background-color);
+    cursor: pointer;
+
+    &:hover,
+    &:focus {
+      color: var(--markdown-editor-tabs-hover-color);
+      background-color: var(--markdown-editor-tabs-hover-background-color);
+    }
+    &:focus {
+      outline-offset: -6px;
+    }
+
+    &.selected {
+      color: var(--markdown-editor-editor-color);
+      border-color: var(--markdown-editor-editor-border-color);
+      background-color: var(--markdown-editor-editor-background-color);
+      position: relative;
+
+      /* hide the top border of the tab panel for the selected tab */
+      &::after {
+        content: "";
+        position: absolute;
+        bottom: -1px;
+        left: 0;
+        right: 0;
+        height: 1px;
+        background-color: var(--markdown-editor-editor-background-color);
+      }
+    }
+  }
+}

package/dist/esm/ui/MarkdownEditor/common/ViewModeTabs/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/esm/ui/MarkdownEditor/common/ViewModeTabs/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../../src/ui/MarkdownEditor/common/ViewModeTabs/types.ts"],"names":[],"mappings":""}

package/dist/esm/ui/MarkdownEditor/common/icons.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const ToolbarTitle = (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 16 17", width: "16", height: "17", children: [_jsx("title", { children: "title" }), _jsx("path", { fill: "currentColor", d: "M3.299 14V3h1.939v4.3h5.524V3h1.94v11h-1.94V8.96H5.238V14h-1.94Z" })] }));
+export const ToolbarBold = (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 16 17", width: "16", height: "17", children: [_jsx("title", { children: "bold" }), _jsx("path", { fill: "currentColor", d: "M6.982 14.5c-.34 0-.708-.011-1.104-.034a21.394 21.394 0 0 1-1.17-.102 9.836 9.836 0 0 1-1.087-.187V2.822c.317-.079.662-.141 1.035-.186A19.847 19.847 0 0 1 6.88 2.5c.928 0 1.76.096 2.495.289.735.192 1.324.52 1.765.984.441.464.662 1.098.662 1.901 0 .554-.141 1.035-.424 1.443-.272.407-.657.724-1.155.95.713.226 1.25.572 1.613 1.036.362.463.543 1.075.543 1.833 0 1.176-.447 2.065-1.34 2.664-.895.6-2.247.9-4.057.9Zm.101-1.562a7.75 7.75 0 0 0 1.68-.17c.51-.112.912-.316 1.206-.61.305-.294.458-.707.458-1.24 0-.735-.255-1.238-.764-1.51s-1.216-.407-2.121-.407H5.47v3.836c.192.022.43.045.713.068.283.022.583.034.9.034ZM5.471 7.49h1.782c.555 0 1.03-.05 1.426-.153.396-.101.701-.277.916-.526.215-.26.323-.61.323-1.052 0-.623-.255-1.058-.764-1.307-.498-.26-1.188-.39-2.07-.39-.317 0-.617.005-.9.016-.272.012-.51.034-.713.068V7.49Z" })] }));
+export const ToolbarItalic = (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 16 17", width: "16", height: "17", children: [_jsx("title", { children: "italic" }), _jsx("path", { fill: "currentColor", d: "m5.912 13 2.173-9H6.65l.162-1.5h4.838L11.49 4H10.04l-2.173 9H9.35l-.161 1.5H4.35l.161-1.5h1.401Z" })] }));
+export const ToolbarQuote = (_jsxs("svg", { viewBox: "0 0 16 17", width: "16", height: "17", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("title", { children: "quote" }), _jsx("path", { d: "M3.5 2.5H2V14.5H3.5V2.5Z", fill: "black" }), _jsx("path", { d: "M10 3.5H5V5H10V3.5Z", fill: "black" }), _jsx("path", { d: "M14 8H5V9.5H14V8Z", fill: "black" }), _jsx("path", { d: "M5 12.5H12V14H5V12.5Z", fill: "black" })] }));
+export const ToolbarCode = (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 17", width: "16", height: "17", fill: "none", children: [_jsx("title", { children: "code" }), _jsx("path", { fill: "currentColor", d: "m.99 8.5 4.773 4.773 1.06-1.06L3.111 8.5l3.712-3.712-1.06-1.061L.99 8.5ZM15.01 8.5l-4.772 4.773-1.061-1.06L12.889 8.5 9.177 4.788l1.06-1.061L15.012 8.5Z" })] }));
+export const ToolbarLink = (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 17", width: "16", height: "17", fill: "none", children: [_jsx("title", { children: "link" }), _jsx("path", { fill: "currentColor", d: "M8.781 5.272c.976.683 1.5 1.77 1.508 2.876l-.065.105c-.317.457-.88.637-1.308.4a.831.831 0 0 1-.162-.118A2.036 2.036 0 0 0 5.177 6.88l-.09.121-2.255 3.22a2.036 2.036 0 0 0 3.243 2.455l.092-.12.114-.163c.392.326.849.565 1.34.7l-.225.322A3.536 3.536 0 1 1 1.604 9.36L3.857 6.14a3.536 3.536 0 0 1 4.924-.868Zm4.747-3.042a3.536 3.536 0 0 1 .868 4.924l-2.253 3.218A3.536 3.536 0 0 1 5.71 8.365l.065-.105c.317-.458.88-.637 1.308-.4a.87.87 0 0 1 .162.117 2.036 2.036 0 0 0 3.577 1.656l.091-.12 2.254-3.219a2.036 2.036 0 0 0-3.243-2.457l-.092.122-.114.162a3.582 3.582 0 0 0-1.34-.7l.225-.323a3.536 3.536 0 0 1 4.925-.868Z" })] }));
+export const ToolbarUnorderedList = (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 17", width: "16", height: "17", fill: "none", children: [_jsx("title", { children: "unordered list" }), _jsx("path", { fill: "currentColor", d: "M3.5 12.5a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1A.5.5 0 0 1 2 14v-1a.5.5 0 0 1 .5-.5h1Zm9.5.25v1.5H6v-1.5h7ZM3.5 7.5A.5.5 0 0 1 4 8v1a.5.5 0 0 1-.5.5h-1A.5.5 0 0 1 2 9V8a.5.5 0 0 1 .5-.5h1Zm8.5.25v1.5H6v-1.5h6ZM3.5 2.5A.5.5 0 0 1 4 3v1a.5.5 0 0 1-.5.5h-1A.5.5 0 0 1 2 4V3a.5.5 0 0 1 .5-.5h1Zm10.5.25v1.5H6v-1.5h8Z" })] }));
+export const ToolbarOrderedList = (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 17", width: "16", height: "17", fill: "none", children: [_jsx("title", { children: "ordered list" }), _jsx("path", { fill: "currentColor", d: "M3.04 4.44v4.81h1.49V2.5H3.49a4.606 4.606 0 0 1-1.07.83c-.42.247-.827.45-1.22.61l.45 1.15c.16-.053.32-.113.48-.18.16-.067.317-.14.47-.22.16-.08.307-.163.44-.25ZM13.8 14v-1.5h-7V14h7ZM12.8 9.25v-1.5h-6v1.5h6ZM14.8 4.5V3h-8v1.5h8Z" })] }));
+//# sourceMappingURL=icons.js.map

package/dist/esm/ui/MarkdownEditor/common/icons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icons.js","sourceRoot":"","sources":["../../../../../src/ui/MarkdownEditor/common/icons.tsx"],"names":[],"mappings":";AAAA,MAAM,CAAC,MAAM,YAAY,GAAG,CAC1B,eACE,KAAK,EAAC,4BAA4B,EAClC,IAAI,EAAC,MAAM,EACX,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,aAEX,oCAAoB,EACpB,eACE,IAAI,EAAC,cAAc,EACnB,CAAC,EAAC,kEAAkE,GACpE,IACE,CACP,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,CACzB,eACE,KAAK,EAAC,4BAA4B,EAClC,IAAI,EAAC,MAAM,EACX,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,aAEX,mCAAmB,EACnB,eACE,IAAI,EAAC,cAAc,EACnB,CAAC,EAAC,szBAAszB,GACxzB,IACE,CACP,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,CAC3B,eACE,KAAK,EAAC,4BAA4B,EAClC,IAAI,EAAC,MAAM,EACX,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,aAEX,qCAAqB,EACrB,eACE,IAAI,EAAC,cAAc,EACnB,CAAC,EAAC,kGAAkG,GACpG,IACE,CACP,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,CAC1B,eACE,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,aAElC,oCAAoB,EACpB,eAAM,CAAC,EAAC,0BAA0B,EAAC,IAAI,EAAC,OAAO,GAAG,EAClD,eAAM,CAAC,EAAC,qBAAqB,EAAC,IAAI,EAAC,OAAO,GAAG,EAC7C,eAAM,CAAC,EAAC,mBAAmB,EAAC,IAAI,EAAC,OAAO,GAAG,EAC3C,eAAM,CAAC,EAAC,uBAAuB,EAAC,IAAI,EAAC,OAAO,GAAG,IAC3C,CACP,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,CACzB,eACE,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,IAAI,EAAC,MAAM,aAEX,mCAAmB,EACnB,eACE,IAAI,EAAC,cAAc,EACnB,CAAC,EAAC,0JAA0J,GAC5J,IACE,CACP,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,CACzB,eACE,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,IAAI,EAAC,MAAM,aAEX,mCAAmB,EACnB,eACE,IAAI,EAAC,cAAc,EACnB,CAAC,EAAC,smBAAsmB,GACxmB,IACE,CACP,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAClC,eACE,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,IAAI,EAAC,MAAM,aAEX,6CAA6B,EAC7B,eACE,IAAI,EAAC,cAAc,EACnB,CAAC,EAAC,yTAAyT,GAC3T,IACE,CACP,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAChC,eACE,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,IAAI,EAAC,MAAM,aAEX,2CAA2B,EAC3B,eACE,IAAI,EAAC,cAAc,EACnB,CAAC,EAAC,sOAAsO,GACxO,IACE,CACP,CAAC"}

package/dist/esm/ui/MarkdownEditor/common/index.js

@@ -0,0 +1,4 @@
+export * from "./Toolbar/index.js";
+export * from "./ViewModeTabs/index.js";
+export * as icons from "./icons.js";
+//# sourceMappingURL=index.js.map

package/dist/esm/ui/MarkdownEditor/common/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/ui/MarkdownEditor/common/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AAExC,OAAO,KAAK,KAAK,MAAM,YAAY,CAAC"}

package/dist/esm/ui/MarkdownEditor/hooks/index.js

@@ -0,0 +1,2 @@
+export { default as useEditor } from "./useEditor.js";
+//# sourceMappingURL=index.js.map

package/dist/esm/ui/MarkdownEditor/hooks/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/ui/MarkdownEditor/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,gBAAgB,CAAC"}