origam 2.2.1 → 2.3.0

package/dist/src/components/TextareaField/OrigamRichToolbar.vue

@@ -0,0 +1,284 @@
+<template>
+	<div
+			:class="toolbarClasses"
+			role="toolbar"
+			:aria-label="toolbarLabel"
+			:aria-disabled="disabled || undefined"
+			data-cy="origam-rich-toolbar"
+	>
+		<template
+				v-for="item in items"
+				:key="item"
+		>
+			<button
+					v-if="!isLink(item)"
+					type="button"
+					class="origam-rich-toolbar__btn"
+					:class="btnClassFor(item)"
+					:disabled="disabled || undefined"
+					:aria-label="labelFor(item)"
+					:aria-pressed="isActive(item) ? 'true' : 'false'"
+					:data-command="item"
+					:data-cy="`origam-rich-toolbar-${item}`"
+					@mousedown.prevent
+					@click="emit('format', item)"
+			>
+				<origam-icon :name="iconFor(item)"/>
+			</button>
+			<div
+					v-else
+					class="origam-rich-toolbar__link-host"
+			>
+				<button
+						type="button"
+						class="origam-rich-toolbar__btn"
+						:class="btnClassFor(item)"
+						:disabled="disabled || undefined"
+						:aria-label="labelFor(item)"
+						:aria-pressed="isActive(item) ? 'true' : 'false'"
+						:aria-expanded="linkPopoverOpen ? 'true' : 'false'"
+						:data-command="item"
+						data-cy="origam-rich-toolbar-link"
+						@mousedown.prevent
+						@click="openLinkPopover"
+				>
+					<origam-icon :name="iconFor(item)"/>
+				</button>
+				<div
+						v-if="linkPopoverOpen"
+						class="origam-rich-toolbar__link-popover"
+						data-cy="origam-rich-toolbar-link-popover"
+				>
+					<input
+							ref="linkInputRef"
+							v-model="linkInput"
+							type="url"
+							class="origam-rich-toolbar__link-input"
+							:placeholder="linkPlaceholder"
+							:aria-label="linkPlaceholder"
+							data-cy="origam-rich-toolbar-link-input"
+							@keydown.enter.prevent="applyLink"
+							@keydown.escape.prevent="closeLinkPopover"
+					>
+					<button
+							type="button"
+							class="origam-rich-toolbar__btn origam-rich-toolbar__link-apply"
+							:aria-label="linkApplyLabel"
+							data-cy="origam-rich-toolbar-link-apply"
+							@mousedown.prevent
+							@click="applyLink"
+					>
+						{{ linkApplyLabel }}
+					</button>
+				</div>
+			</div>
+		</template>
+	</div>
+</template>
+
+<script setup>
+import { computed, nextTick, ref } from "vue";
+import { OrigamIcon } from "../../components";
+import { useLocale } from "../../composables";
+import { MDI_ICONS, TEXTAREA_TOOLBAR_COMMAND, TEXTAREA_TOOLBAR_POSITION } from "../../enums";
+const props = defineProps({
+  items: { type: Array, required: true },
+  active: { type: Object, required: true },
+  position: { type: null, required: false, default: TEXTAREA_TOOLBAR_POSITION.TOP },
+  disabled: { type: Boolean, required: false, default: false }
+});
+const emit = defineEmits(["format"]);
+const { t } = useLocale();
+const linkPopoverOpen = ref(false);
+const linkInput = ref("");
+const linkInputRef = ref();
+const toolbarLabel = computed(() => t("origam.textarea.rich.toolbar.aria-label", "Text formatting"));
+const linkPlaceholder = computed(() => t("origam.textarea.rich.link.placeholder", "https://example.com"));
+const linkApplyLabel = computed(() => t("origam.textarea.rich.link.apply", "Apply"));
+const ICON_MAP = {
+  [TEXTAREA_TOOLBAR_COMMAND.BOLD]: MDI_ICONS.FORMAT_BOLD,
+  [TEXTAREA_TOOLBAR_COMMAND.ITALIC]: MDI_ICONS.FORMAT_ITALIC,
+  [TEXTAREA_TOOLBAR_COMMAND.UNDERLINE]: MDI_ICONS.FORMAT_UNDERLINE,
+  [TEXTAREA_TOOLBAR_COMMAND.LINK]: MDI_ICONS.LINK_VARIANT,
+  [TEXTAREA_TOOLBAR_COMMAND.LIST_BULLET]: MDI_ICONS.FORMAT_LIST_BULLETED,
+  [TEXTAREA_TOOLBAR_COMMAND.LIST_ORDERED]: MDI_ICONS.FORMAT_LIST_NUMBERED,
+  [TEXTAREA_TOOLBAR_COMMAND.HEADING]: MDI_ICONS.FORMAT_HEADER_1,
+  [TEXTAREA_TOOLBAR_COMMAND.HEADING_1]: MDI_ICONS.FORMAT_HEADER_1,
+  [TEXTAREA_TOOLBAR_COMMAND.HEADING_2]: MDI_ICONS.FORMAT_HEADER_2,
+  [TEXTAREA_TOOLBAR_COMMAND.HEADING_3]: MDI_ICONS.FORMAT_HEADER_3,
+  [TEXTAREA_TOOLBAR_COMMAND.CODE_INLINE]: MDI_ICONS.CODE_TAGS,
+  [TEXTAREA_TOOLBAR_COMMAND.CLEAR_FORMAT]: MDI_ICONS.FORMAT_CLEAR
+};
+const LABEL_KEY = {
+  [TEXTAREA_TOOLBAR_COMMAND.BOLD]: ["origam.textarea.rich.command.bold", "Bold"],
+  [TEXTAREA_TOOLBAR_COMMAND.ITALIC]: ["origam.textarea.rich.command.italic", "Italic"],
+  [TEXTAREA_TOOLBAR_COMMAND.UNDERLINE]: ["origam.textarea.rich.command.underline", "Underline"],
+  [TEXTAREA_TOOLBAR_COMMAND.LINK]: ["origam.textarea.rich.command.link", "Insert link"],
+  [TEXTAREA_TOOLBAR_COMMAND.LIST_BULLET]: ["origam.textarea.rich.command.list-bullet", "Bullet list"],
+  [TEXTAREA_TOOLBAR_COMMAND.LIST_ORDERED]: ["origam.textarea.rich.command.list-ordered", "Numbered list"],
+  [TEXTAREA_TOOLBAR_COMMAND.HEADING]: ["origam.textarea.rich.command.heading", "Heading"],
+  [TEXTAREA_TOOLBAR_COMMAND.HEADING_1]: ["origam.textarea.rich.command.heading-1", "Heading 1"],
+  [TEXTAREA_TOOLBAR_COMMAND.HEADING_2]: ["origam.textarea.rich.command.heading-2", "Heading 2"],
+  [TEXTAREA_TOOLBAR_COMMAND.HEADING_3]: ["origam.textarea.rich.command.heading-3", "Heading 3"],
+  [TEXTAREA_TOOLBAR_COMMAND.CODE_INLINE]: ["origam.textarea.rich.command.code-inline", "Inline code"],
+  [TEXTAREA_TOOLBAR_COMMAND.CLEAR_FORMAT]: ["origam.textarea.rich.command.clear-format", "Clear formatting"]
+};
+const toolbarClasses = computed(() => [
+  "origam-rich-toolbar",
+  `origam-rich-toolbar--${props.position}`
+]);
+const isLink = (item) => item === TEXTAREA_TOOLBAR_COMMAND.LINK;
+const isActive = (item) => {
+  switch (item) {
+    case TEXTAREA_TOOLBAR_COMMAND.BOLD:
+      return props.active.bold;
+    case TEXTAREA_TOOLBAR_COMMAND.ITALIC:
+      return props.active.italic;
+    case TEXTAREA_TOOLBAR_COMMAND.UNDERLINE:
+      return props.active.underline;
+    case TEXTAREA_TOOLBAR_COMMAND.CODE_INLINE:
+      return props.active.code;
+    case TEXTAREA_TOOLBAR_COMMAND.LINK:
+      return props.active.link;
+    case TEXTAREA_TOOLBAR_COMMAND.LIST_BULLET:
+      return props.active.listBullet;
+    case TEXTAREA_TOOLBAR_COMMAND.LIST_ORDERED:
+      return props.active.listOrdered;
+    case TEXTAREA_TOOLBAR_COMMAND.HEADING:
+    case TEXTAREA_TOOLBAR_COMMAND.HEADING_1:
+      return props.active.heading === 1;
+    case TEXTAREA_TOOLBAR_COMMAND.HEADING_2:
+      return props.active.heading === 2;
+    case TEXTAREA_TOOLBAR_COMMAND.HEADING_3:
+      return props.active.heading === 3;
+    default:
+      return false;
+  }
+};
+const btnClassFor = (item) => ({
+  "origam-rich-toolbar__btn--active": isActive(item)
+});
+const iconFor = (item) => ICON_MAP[item] ?? MDI_ICONS.FORMAT_BOLD;
+const labelFor = (item) => {
+  const entry = LABEL_KEY[item];
+  if (!entry) return item;
+  return t(entry[0], entry[1]);
+};
+const openLinkPopover = async () => {
+  linkPopoverOpen.value = !linkPopoverOpen.value;
+  if (!linkPopoverOpen.value) return;
+  linkInput.value = "";
+  await nextTick();
+  linkInputRef.value?.focus();
+};
+const closeLinkPopover = () => {
+  linkPopoverOpen.value = false;
+  linkInput.value = "";
+};
+const applyLink = () => {
+  const url = linkInput.value.trim();
+  if (url === "") {
+    closeLinkPopover();
+    return;
+  }
+  emit("format", TEXTAREA_TOOLBAR_COMMAND.LINK, url);
+  closeLinkPopover();
+};
+defineExpose({
+  openLinkPopover,
+  closeLinkPopover
+});
+</script>
+
+<style lang="scss" scoped>
+	.origam-rich-toolbar {
+		display: flex;
+		flex-wrap: wrap;
+		gap: var(--origam-textarea-field__rich-toolbar---gap);
+		padding: var(--origam-textarea-field__rich-toolbar---padding);
+		background-color: var(--origam-textarea-field__rich-toolbar---bg-color);
+		border: 1px solid var(--origam-textarea-field__rich-toolbar---border-color);
+		border-radius: var(--origam-textarea-field__rich-toolbar---border-radius);
+
+		&--floating {
+			position: sticky;
+			top: 0;
+			z-index: 1;
+		}
+
+		&__btn {
+			display: inline-flex;
+			align-items: center;
+			justify-content: center;
+			padding: var(--origam-textarea-field__rich-toolbar-btn---padding);
+			height: var(--origam-textarea-field__rich-toolbar-btn---size);
+			min-width: var(--origam-textarea-field__rich-toolbar-btn---size);
+			background-color: var(--origam-textarea-field__rich-toolbar-btn---bg-color);
+			color: var(--origam-textarea-field__rich-toolbar-btn---color);
+			border: 1px solid transparent;
+			border-radius: var(--origam-textarea-field__rich-toolbar-btn---border-radius);
+			cursor: pointer;
+			transition: background-color 0.15s ease, color 0.15s ease;
+
+			&:hover:not(:disabled) {
+				background-color: var(--origam-textarea-field__rich-toolbar-btn-hover---bg-color);
+				color: var(--origam-textarea-field__rich-toolbar-btn-hover---color);
+			}
+
+			&:focus-visible {
+				outline: 2px solid var(--origam-textarea-field__rich-toolbar-btn-focus---outline-color);
+				outline-offset: 2px;
+			}
+
+			&:disabled {
+				opacity: 0.4;
+				cursor: not-allowed;
+			}
+
+			&--active {
+				background-color: var(--origam-textarea-field__rich-toolbar-btn-active---bg-color);
+				color: var(--origam-textarea-field__rich-toolbar-btn-active---color);
+			}
+		}
+
+		&__link-host {
+			position: relative;
+			display: inline-flex;
+		}
+
+		&__link-popover {
+			position: absolute;
+			top: calc(100% + 4px);
+			left: 0;
+			display: flex;
+			gap: 4px;
+			padding: 6px;
+			background-color: var(--origam-textarea-field__rich-toolbar---bg-color);
+			border: 1px solid var(--origam-textarea-field__rich-toolbar---border-color);
+			border-radius: var(--origam-textarea-field__rich-toolbar---border-radius);
+			z-index: 2;
+		}
+
+		&__link-input {
+			padding: 4px 8px;
+			border: 1px solid var(--origam-textarea-field__rich-toolbar---border-color);
+			border-radius: var(--origam-textarea-field__rich-toolbar-btn---border-radius);
+			background-color: transparent;
+			color: inherit;
+			min-width: 200px;
+			font: inherit;
+
+			&:focus-visible {
+				outline: 2px solid var(--origam-textarea-field__rich-toolbar-btn-focus---outline-color);
+				outline-offset: 1px;
+			}
+		}
+
+		&__link-apply {
+			width: auto;
+			min-width: 0;
+			padding-inline: 10px;
+			font-size: 0.85em;
+		}
+	}
+</style>

package/dist/src/components/TextareaField/OrigamTextareaField.vue

@@ -79,7 +79,56 @@
 								name="default"
 								v-bind="{ref, ...fieldSlotProps}"
 						/>
+						<template v-if="isRichMode">
+							<slot
+									v-if="toolbarPosition !== TEXTAREA_TOOLBAR_POSITION.BOTTOM"
+									name="toolbar"
+									v-bind="toolbarSlotPayload"
+							>
+								<origam-rich-toolbar
+										v-if="hasToolbar"
+										:items="resolvedToolbar"
+										:active="richActive"
+										:position="toolbarPosition"
+										:disabled="isDisabled"
+										@format="handleRichFormat"
+								/>
+							</slot>
+							<div
+									ref="richHostRef"
+									class="origam-textarea-field__rich"
+									role="textbox"
+									aria-multiline="true"
+									:aria-disabled="isDisabled || undefined"
+									:aria-readonly="isReadonly || undefined"
+									:aria-label="placeholder || undefined"
+									:contenteditable="(!isDisabled && !isReadonly) ? 'true' : 'false'"
+									:data-empty="!hasRichContent"
+									:data-placeholder="placeholder || ''"
+									data-cy="origam-textarea-rich-host"
+									@input="handleRichInput"
+									@keydown="handleRichKeydown"
+									@paste="handleRichPaste"
+									@focus="handleFocus"
+									@blur="handleBlur"
+							/>
+							<slot
+									v-if="toolbarPosition === TEXTAREA_TOOLBAR_POSITION.BOTTOM"
+									name="toolbar"
+									v-bind="toolbarSlotPayload"
+							>
+								<origam-rich-toolbar
+										v-if="hasToolbar"
+										:items="resolvedToolbar"
+										:active="richActive"
+										:position="toolbarPosition"
+										:disabled="isDisabled"
+										@format="handleRichFormat"
+								/>
+							</slot>
+						</template>
 						<textarea
+								v-else
 								ref="textareaRef"
 								v-intersect="intersect"
 								:autofocus="autofocus"
@@ -96,7 +145,7 @@
 						/>
 					</div>
 					<div
-							v-if="!autoGrow && !noResize"
+							v-if="!autoGrow && !noResize && !isRichMode"
 							ref="verticalDragger"
 							class="origam-textarea-field__grip"
 					>
@@ -212,6 +261,7 @@ import {
   watchEffect
 } from "vue";
 import { OrigamCounter, OrigamField, OrigamInput } from "../../components";
+import OrigamRichToolbar from "./OrigamRichToolbar.vue";
 import {
   useAdjacent,
   useAdjacentInner,
@@ -221,11 +271,20 @@ import {
   useLocale,
   useProps,
   useStyle,
+  useTextareaRich,
   useVModel
 } from "../../composables";
+import { DEFAULT_TOOLBAR } from "../../consts";
 import { vIntersect } from "../../directives";
-import { AXIS, DENSITY, MDI_ICONS } from "../../enums";
-import { clamp, convertToUnit, filterInputAttrs, forwardRefs } from "../../utils";
+import {
+  AXIS,
+  DENSITY,
+  MDI_ICONS,
+  TEXTAREA_MODE,
+  TEXTAREA_OUTPUT,
+  TEXTAREA_TOOLBAR_POSITION
+} from "../../enums";
+import { clamp, convertToUnit, filterInputAttrs, forwardRefs, htmlToMarkdown, sanitizeHtml } from "../../utils";
 const _props = defineProps({
   autoGrow: { type: Boolean, required: false },
   autofocus: { type: Boolean, required: false },
@@ -241,6 +300,10 @@ const _props = defineProps({
   maxRows: { type: [Number, String], required: false },
   suffix: { type: String, required: false },
   modelModifiers: { type: [String, Boolean], required: false },
+  mode: { type: null, required: false, default: TEXTAREA_MODE.PLAIN },
+  output: { type: null, required: false, default: TEXTAREA_OUTPUT.HTML },
+  toolbar: { type: [Array, Boolean], required: false, default: () => DEFAULT_TOOLBAR },
+  toolbarPosition: { type: null, required: false, default: TEXTAREA_TOOLBAR_POSITION.TOP },
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
@@ -328,12 +391,71 @@ const _props = defineProps({
   prependIcon: { type: null, required: false }
 });
 const props = useDefaults(_props);
-const emits = defineEmits(["update:height", "click:control", "mousedown:control", "update:focused", "update:modelValue", "click:appendInner", "click:prependInner", "click:clear", "update:active", "click:append", "click:prepend"]);
+const emits = defineEmits(["update:height", "click:control", "mousedown:control", "format", "update:focused", "update:modelValue", "click:appendInner", "click:prependInner", "click:clear", "update:active", "click:append", "click:prepend"]);
 defineSlots();
 const slots = useSlots();
 const attrs = useAttrs();
 const { t } = useLocale();
 const model = useVModel(props, "modelValue");
+const isRichMode = computed(() => props.mode === TEXTAREA_MODE.RICH);
+const hasToolbar = computed(() => props.toolbar !== false && resolvedToolbar.value.length > 0);
+const resolvedToolbar = computed(() => {
+  if (props.toolbar === false) return [];
+  return Array.isArray(props.toolbar) ? props.toolbar : DEFAULT_TOOLBAR;
+});
+let isApplyingExternal = false;
+const richInitialHtml = computed(() => {
+  if (!isRichMode.value) return "";
+  const v = (model.value ?? "").toString();
+  return sanitizeHtml(v);
+});
+const rich = useTextareaRich({
+  disabled: () => !!attrs.disabled || !!props.readonly,
+  value: () => richInitialHtml.value,
+  onUpdate: (html) => {
+    if (isApplyingExternal) return;
+    const next = props.output === TEXTAREA_OUTPUT.MARKDOWN ? htmlToMarkdown(html) : html;
+    if (model.value !== next) model.value = next;
+  },
+  onFormat: (command, value) => {
+    emits("format", command, value);
+  }
+});
+const richHostRef = rich.hostRef;
+const richActive = rich.active;
+const handleRichInput = rich.onInput;
+const handleRichKeydown = rich.onKeydown;
+const handleRichPaste = rich.onPaste;
+const handleRichFormat = (command, value) => {
+  rich.format(command, value);
+};
+const hasRichContent = computed(() => {
+  const v = (model.value ?? "").toString().trim();
+  return v !== "";
+});
+const toolbarSlotPayload = computed(() => ({
+  format: rich.format,
+  isFormat: rich.isFormatActive,
+  items: resolvedToolbar.value,
+  active: richActive
+}));
+watch(() => model.value, (next) => {
+  if (!isRichMode.value || !richHostRef.value) return;
+  if (props.output === TEXTAREA_OUTPUT.MARKDOWN) {
+    if (!richHostRef.value.innerHTML) {
+      isApplyingExternal = true;
+      rich.setValue(sanitizeHtml((next ?? "").toString()));
+      isApplyingExternal = false;
+    }
+    return;
+  }
+  const cleaned = sanitizeHtml((next ?? "").toString());
+  if (richHostRef.value.innerHTML !== cleaned) {
+    isApplyingExternal = true;
+    rich.setValue(cleaned);
+    isApplyingExternal = false;
+  }
+});
 const {
   onClickAppendInner: handleClickAppendInner,
   onClickPrependInner: handleClickPrependInner
@@ -437,7 +559,7 @@ const maxHeight = computed(() => {
 });
 const controlHeight = shallowRef(0);
 const calculateInputHeight = () => {
-  if (!props.autoGrow) return;
+  if (!props.autoGrow || isRichMode.value) return;
   nextTick(() => {
     if (!textareaRef.value) return;
     const padding = getPadding(getComputedStyle(textareaRef.value));
@@ -622,5 +744,70 @@ defineExpose(forwardRefs({
 				background-color: color-mix(in srgb, currentColor 30%, transparent)
 			}
 		}
+
+		&__rich {
+			flex: 1 1 auto;
+			width: 100%;
+			min-height: var(--origam-textarea-field__rich-content---min-height);
+			padding: var(--origam-textarea-field__rich-content---padding);
+			outline: none;
+			line-height: var(--origam-textarea-field__rich-content---line-height);
+			color: inherit;
+			white-space: pre-wrap;
+			word-break: break-word;
+			overflow-wrap: anywhere;
+
+			&[data-empty="true"]::before {
+				content: attr(data-placeholder);
+				color: var(--origam-textarea-field__rich-content---placeholder-color);
+				pointer-events: none;
+			}
+
+			:deep(p) {
+				margin: 0 0 var(--origam-textarea-field__rich-content---paragraph-gap);
+			}
+
+			:deep(p:last-child) {
+				margin-bottom: 0;
+			}
+
+			:deep(a) {
+				color: var(--origam-textarea-field__rich-link---color);
+				text-decoration: var(--origam-textarea-field__rich-link---text-decoration);
+			}
+
+			:deep(code) {
+				background-color: var(--origam-textarea-field__rich-code-inline---bg-color);
+				color: var(--origam-textarea-field__rich-code-inline---color);
+				padding: 0.1em 0.35em;
+				border-radius: 3px;
+				font-family: var(--origam-font---code, ui-monospace, SFMono-Regular, monospace);
+				font-size: 0.92em;
+			}
+
+			:deep(ul),
+			:deep(ol) {
+				margin: 0 0 var(--origam-textarea-field__rich-content---paragraph-gap);
+				padding-inline-start: var(--origam-textarea-field__rich-list---padding-inline-start);
+			}
+
+			:deep(h1) {
+				font-size: var(--origam-textarea-field__rich-heading---font-size-h1);
+				font-weight: 700;
+				margin: 0 0 var(--origam-textarea-field__rich-content---paragraph-gap);
+			}
+
+			:deep(h2) {
+				font-size: var(--origam-textarea-field__rich-heading---font-size-h2);
+				font-weight: 700;
+				margin: 0 0 var(--origam-textarea-field__rich-content---paragraph-gap);
+			}
+
+			:deep(h3) {
+				font-size: var(--origam-textarea-field__rich-heading---font-size-h3);
+				font-weight: 600;
+				margin: 0 0 var(--origam-textarea-field__rich-content---paragraph-gap);
+			}
+		}
 	}
 </style>

package/dist/src/components/TextareaField/index.cjs

@@ -3,6 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "OrigamRichToolbar", {
+  enumerable: true,
+  get: function () {
+    return _OrigamRichToolbar.default;
+  }
+});
 Object.defineProperty(exports, "OrigamTextareaField", {
   enumerable: true,
   get: function () {
@@ -10,4 +16,5 @@ Object.defineProperty(exports, "OrigamTextareaField", {
   }
 });
 var _OrigamTextareaField = _interopRequireDefault(require("./OrigamTextareaField.vue"));
+var _OrigamRichToolbar = _interopRequireDefault(require("./OrigamRichToolbar.vue"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/dist/src/components/TextareaField/index.d.ts

@@ -1 +1,2 @@
 export { default as OrigamTextareaField } from './OrigamTextareaField.vue';
+export { default as OrigamRichToolbar } from './OrigamRichToolbar.vue';

package/dist/src/components/TextareaField/index.js

@@ -1 +1,2 @@
 export { default as OrigamTextareaField } from "./OrigamTextareaField.vue";
+export { default as OrigamRichToolbar } from "./OrigamRichToolbar.vue";

package/dist/src/components/index.cjs

@@ -69,6 +69,17 @@ Object.keys(_BottomNav).forEach(function (key) {
     }
   });
 });
+var _Bracket = require("./Bracket/index.cjs");
+Object.keys(_Bracket).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Bracket[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Bracket[key];
+    }
+  });
+});
 var _Breadcrumb = require("./Breadcrumb/index.cjs");
 Object.keys(_Breadcrumb).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -146,6 +157,28 @@ Object.keys(_Chip).forEach(function (key) {
     }
   });
 });
+var _ClientOnly = require("./ClientOnly/index.cjs");
+Object.keys(_ClientOnly).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ClientOnly[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ClientOnly[key];
+    }
+  });
+});
+var _Code = require("./Code/index.cjs");
+Object.keys(_Code).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Code[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Code[key];
+    }
+  });
+});
 var _ColorPicker = require("./ColorPicker/index.cjs");
 Object.keys(_ColorPicker).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -168,6 +201,17 @@ Object.keys(_ColorPickerField).forEach(function (key) {
     }
   });
 });
+var _CommandPalette = require("./CommandPalette/index.cjs");
+Object.keys(_CommandPalette).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _CommandPalette[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _CommandPalette[key];
+    }
+  });
+});
 var _ConfirmWrapper = require("./ConfirmWrapper/index.cjs");
 Object.keys(_ConfirmWrapper).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -674,6 +718,17 @@ Object.keys(_Snackbar).forEach(function (key) {
     }
   });
 });
+var _SnackbarStack = require("./SnackbarStack/index.cjs");
+Object.keys(_SnackbarStack).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _SnackbarStack[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _SnackbarStack[key];
+    }
+  });
+});
 var _Switch = require("./Switch/index.cjs");
 Object.keys(_Switch).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -707,6 +762,17 @@ Object.keys(_Table).forEach(function (key) {
     }
   });
 });
+var _Tabs = require("./Tabs/index.cjs");
+Object.keys(_Tabs).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Tabs[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Tabs[key];
+    }
+  });
+});
 var _TextareaField = require("./TextareaField/index.cjs");
 Object.keys(_TextareaField).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;