@kaizen/components 2.0.4 → 2.0.6

package/dist/cjs/src/RichTextEditor/RichTextEditor/RichTextEditor.cjs

@@ -24,10 +24,7 @@ var ProseMirrorKeymap = require('prosemirror-keymap');
 var ProseMirrorHistory = require('prosemirror-history');
 require('prosemirror-schema-list');
 var schema = require('./schema.cjs');
-var ToggleIconButton = require('./subcomponents/ToggleIconButton/ToggleIconButton.cjs');
-var Toolbar = require('./subcomponents/Toolbar/Toolbar.cjs');
-var ToolbarSection = require('./subcomponents/ToolbarSection/ToolbarSection.cjs');
-var controlmap = require('./utils/controlmap.cjs');
+var ToolbarControls = require('./subcomponents/ToolbarControls/ToolbarControls.cjs');
 var inputrules = require('./utils/inputrules.cjs');
 var keymap = require('./utils/keymap.cjs');
 var RichTextEditor_module = require('./RichTextEditor.module.scss.cjs');
@@ -130,7 +127,6 @@ var RichTextEditor = function (_a) {
   var editorRef = useRichTextEditorResult[0],
     editorState = useRichTextEditorResult[1],
     dispatchTransaction = useRichTextEditorResult[2];
-  var controlMap = controlmap.buildControlMap(schema$1, editorState, controls);
   // @todo: Fix if possible - avoiding breaking in eslint upgrade
   // eslint-disable-next-line react-hooks/rules-of-hooks
   React.useEffect(function () {
@@ -144,25 +140,14 @@ var RichTextEditor = function (_a) {
     labelText: labelText
   }), React__default.default.createElement("div", {
     className: classnames__default.default(RichTextEditor_module.editorWrapper, RichTextEditor_module[status])
-  }, controls && React__default.default.createElement(Toolbar.Toolbar, {
-    "aria-controls": editorId,
-    "aria-label": "Text formatting",
-    classNameOverride: RichTextEditor_module.toolbar
-  }, controlMap.map(function (section, index) {
-    return React__default.default.createElement(ToolbarSection.ToolbarSection, {
-      key: index
-    }, section.map(function (controlConfig, controlKeyIndex) {
-      return React__default.default.createElement(ToggleIconButton.ToggleIconButton, {
-        key: controlKeyIndex,
-        icon: controlConfig.icon,
-        disabled: controlConfig.disabled,
-        label: controlConfig.label,
-        isActive: controlConfig.isActive,
-        onClick: function () {
-          return dispatchTransaction(controlConfig.action);
-        }
-      });
-    }));
+  }, React__default.default.createElement("div", {
+    className: RichTextEditor_module.toolbarWrapper
+  }, React__default.default.createElement(ToolbarControls.ToolbarControls, {
+    editorId: editorId,
+    controls: controls,
+    editorState: editorState,
+    schema: schema$1,
+    dispatchTransaction: dispatchTransaction
   })), React__default.default.createElement("div", tslib.__assign({
     id: editorId,
     ref: editorRef,

package/dist/cjs/src/RichTextEditor/RichTextEditor/RichTextEditor.module.scss.cjs

@@ -4,8 +4,8 @@ var styles = {
   "editor": "RichTextEditor-module_editor__pVKqW",
   "hasToolbar": "RichTextEditor-module_hasToolbar__EBxnG",
   "editorLabel": "RichTextEditor-module_editorLabel__om-dJ",
+  "toolbarWrapper": "RichTextEditor-module_toolbarWrapper__wkBl-",
   "editorWrapper": "RichTextEditor-module_editorWrapper__5q3mG",
-  "toolbar": "RichTextEditor-module_toolbar__ceLvw",
   "error": "RichTextEditor-module_error__Xugz8",
   "caution": "RichTextEditor-module_caution__6q0z6",
   "rows1": "RichTextEditor-module_rows1__DDEf4",

package/dist/cjs/src/RichTextEditor/RichTextEditor/subcomponents/ToolbarControls/ToolbarControls.cjs

@@ -0,0 +1,51 @@
+'use strict';
+
+var React = require('react');
+var i18nReactIntl = require('@cultureamp/i18n-react-intl');
+var controlmap = require('../../utils/controlmap.cjs');
+var ToggleIconButton = require('../ToggleIconButton/ToggleIconButton.cjs');
+var Toolbar = require('../Toolbar/Toolbar.cjs');
+var ToolbarSection = require('../ToolbarSection/ToolbarSection.cjs');
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefault(React);
+var ToolbarControls = function (_a) {
+  var editorId = _a.editorId,
+    controls = _a.controls,
+    editorState = _a.editorState,
+    schema = _a.schema,
+    dispatchTransaction = _a.dispatchTransaction;
+  var controlMap = controlmap.useControlMap(schema, editorState, controls);
+  var formatMessage = i18nReactIntl.useIntl().formatMessage;
+  var handleControlClick = React.useCallback(function (action) {
+    dispatchTransaction(action);
+  }, [dispatchTransaction]);
+  if (controlMap.length <= 0) return null;
+  return React__default.default.createElement(Toolbar.Toolbar, {
+    "aria-controls": editorId,
+    "aria-label": formatMessage({
+      id: 'kz.rte.toolbar.aria_label',
+      defaultMessage: 'Text formatting',
+      description: 'Label for the text formatting toolbar in a Rich Text Editor'
+    })
+  }, controlMap.map(function (section, index) {
+    return React__default.default.createElement(ToolbarSection.ToolbarSection, {
+      key: index
+    }, section.map(function (controlConfig, controlKeyIndex) {
+      return React__default.default.createElement(ToggleIconButton.ToggleIconButton, {
+        key: controlKeyIndex,
+        icon: controlConfig.icon,
+        disabled: controlConfig.disabled,
+        label: controlConfig.label,
+        isActive: controlConfig.isActive,
+        onClick: function () {
+          return handleControlClick(controlConfig.action);
+        }
+      });
+    }));
+  }));
+};
+exports.ToolbarControls = ToolbarControls;

package/dist/cjs/src/RichTextEditor/RichTextEditor/utils/controlmap.cjs

@@ -2,6 +2,7 @@
 
 var tslib = require('tslib');
 var React = require('react');
+var i18nReactIntl = require('@cultureamp/i18n-react-intl');
 var Icon = require('../../../Icon/Icon.cjs');
 var listIsActive = require('../../utils/commands/listIsActive.cjs');
 var markIsActive = require('../../utils/commands/markIsActive.cjs');
@@ -170,8 +171,9 @@ var filterToolbarControls = function (groupedControls) {
   });
 };
 /** Builds an array of object used to map control configuration to rte toolbar buttons */
-var buildControlMap = function (schema, editorState, controls) {
+var useControlMap = function (schema, editorState, controls) {
   var _a, _b;
+  var formatMessage = i18nReactIntl.useIntl().formatMessage;
   if (!controls) return [];
   var controlGroupIndex = createControlGroupIndex(controls);
   var toolbarControls = createInitialControls(controlGroupIndex);
@@ -182,7 +184,11 @@ var buildControlMap = function (schema, editorState, controls) {
     toolbarControls[groupIndex].push({
       isActive: markIsActive.markIsActive(editorState, type),
       action: createToggleMarkCommand(type),
-      label: 'Bold',
+      label: formatMessage({
+        id: 'kz.rte.bold',
+        defaultMessage: 'Bold',
+        description: 'Label for the "Bold" button in a text editor'
+      }),
       icon: React__default.default.createElement(Icon.Icon, {
         name: "format_bold",
         isPresentational: true
@@ -195,7 +201,11 @@ var buildControlMap = function (schema, editorState, controls) {
     toolbarControls[groupIndex].push({
       isActive: markIsActive.markIsActive(editorState, type),
       action: createToggleMarkCommand(type),
-      label: 'Italic',
+      label: formatMessage({
+        id: 'kz.rte.italic',
+        defaultMessage: 'Italic',
+        description: 'Label for the "Italic" button in a text editor'
+      }),
       icon: React__default.default.createElement(Icon.Icon, {
         name: "format_italic",
         isPresentational: true
@@ -208,7 +218,11 @@ var buildControlMap = function (schema, editorState, controls) {
     toolbarControls[groupIndex].push({
       isActive: markIsActive.markIsActive(editorState, type),
       action: createToggleMarkCommand(type),
-      label: 'Underline',
+      label: formatMessage({
+        id: 'kz.rte.underline',
+        defaultMessage: 'Underline',
+        description: 'Label for the "Underline" button in a text editor'
+      }),
       icon: React__default.default.createElement(Icon.Icon, {
         name: "format_underlined",
         isPresentational: true
@@ -221,7 +235,11 @@ var buildControlMap = function (schema, editorState, controls) {
     toolbarControls[groupIndex].push({
       action: createToggleListCommand(type),
       isActive: listIsActive.listIsActive(editorState, type, listNodes),
-      label: 'Bullet List',
+      label: formatMessage({
+        id: 'kz.rte.bullet_list',
+        defaultMessage: 'Bullet list',
+        description: 'Label for the "Bullet list" button in a text editor'
+      }),
       icon: React__default.default.createElement(Icon.Icon, {
         name: "format_list_bulleted",
         isPresentational: true,
@@ -235,7 +253,11 @@ var buildControlMap = function (schema, editorState, controls) {
     toolbarControls[groupIndex].push({
       action: createToggleListCommand(type),
       isActive: listIsActive.listIsActive(editorState, type, listNodes),
-      label: 'Numbered List',
+      label: formatMessage({
+        id: 'kz.rte.numbered_list',
+        defaultMessage: 'Numbered list',
+        description: 'Label for the "Numbered list" button in a text editor'
+      }),
       icon: React__default.default.createElement(Icon.Icon, {
         name: "format_list_numbered",
         isPresentational: true,
@@ -249,7 +271,11 @@ var buildControlMap = function (schema, editorState, controls) {
       action: createLiftListCommand(),
       disabled: liftListIsDisabled(editorState),
       isActive: false,
-      label: 'Decrease indent',
+      label: formatMessage({
+        id: 'kz.rte.decrease_indent',
+        defaultMessage: 'Decrease indent',
+        description: 'Label for the "Decrease indent" button in a text editor'
+      }),
       icon: React__default.default.createElement(Icon.Icon, {
         name: "format_indent_decrease",
         isPresentational: true,
@@ -259,7 +285,11 @@ var buildControlMap = function (schema, editorState, controls) {
       action: createIndentListCommand(),
       disabled: indentListIsDisabled(editorState),
       isActive: false,
-      label: 'Increase indent',
+      label: formatMessage({
+        id: 'kz.rte.increase_indent',
+        defaultMessage: 'Increase indent',
+        description: 'Label for the "Increase indent" button in a text editor'
+      }),
       icon: React__default.default.createElement(Icon.Icon, {
         name: "format_indent_increase",
         isPresentational: true,
@@ -274,7 +304,11 @@ var buildControlMap = function (schema, editorState, controls) {
       action: createToggleMarkCommand(type),
       disabled: editorState.selection.empty,
       isActive: false,
-      label: 'Link',
+      label: formatMessage({
+        id: 'kz.rte.link',
+        defaultMessage: 'Link',
+        description: 'Label for the "Link" button in a text editor that allows the creation of hyperlinks in the text'
+      }),
       icon: React__default.default.createElement(Icon.Icon, {
         name: "add_link",
         isPresentational: true
@@ -283,4 +317,4 @@ var buildControlMap = function (schema, editorState, controls) {
   }
   return filterToolbarControls(toolbarControls);
 };
-exports.buildControlMap = buildControlMap;
+exports.useControlMap = useControlMap;

package/dist/cjs/src/SingleSelect/SingleSelect.cjs

@@ -31,6 +31,8 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 var classnames__default = /*#__PURE__*/_interopDefault(classnames);
 
 /**
+ * @deprecated SingleSelect is deprecated in v3 and will be replaced in v4.
+ *
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3081896474/Select Guidance} |
  * {@link https://cultureamp.design/?path=/docs/components-select--docs Storybook}
  */

package/dist/cjs/src/Tile/InformationTile/InformationTile.cjs

@@ -11,6 +11,8 @@ function _interopDefault(e) {
 var React__default = /*#__PURE__*/_interopDefault(React);
 
 /**
+ * @deprecated InformationTile is deprecated in v3 and will be removed in v4.
+ *
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3079077889/Tile#InformationTile%3A Guidance} |
  * {@link https://cultureamp.design/?path=/docs/components-tiles-informationtile--docs Storybook}
  */

package/dist/cjs/src/Tile/MultiActionTile/MultiActionTile.cjs

@@ -22,6 +22,8 @@ var renderActions = function (primaryAction, secondaryAction) {
   }, secondaryAction))), React__default.default.createElement(Button.Button, tslib.__assign({}, primaryAction)));
 };
 /**
+ * @deprecated MultiActionTile is deprecated in v3 and will be removed in v4.
+ *
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3079077889/Tile#MultiActionTile.1 Guidance} |
  * {@link https://cultureamp.design/?path=/docs/components-tiles-multiactiontile--docs Storybook}
  */

package/dist/cjs/src/Tile/TileGrid/TileGrid.cjs

@@ -13,6 +13,8 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 var classnames__default = /*#__PURE__*/_interopDefault(classnames);
 
 /**
+ * @deprecated TileGrid is deprecated in v3 and will be removed in v4.
+ *
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3079077889/Tile#TileGrid Guidance} |
  * {@link https://cultureamp.design/storybook/?path=/docs/components-tiles-tilegrid--docs Storybook}
  */

package/dist/esm/src/RichTextEditor/RichTextEditor/RichTextEditor.mjs

@@ -22,10 +22,7 @@ import * as ProseMirrorKeymap from 'prosemirror-keymap';
 import * as ProseMirrorHistory from 'prosemirror-history';
 import 'prosemirror-schema-list';
 import { createSchemaFromControls } from './schema.mjs';
-import { ToggleIconButton } from './subcomponents/ToggleIconButton/ToggleIconButton.mjs';
-import { Toolbar } from './subcomponents/Toolbar/Toolbar.mjs';
-import { ToolbarSection } from './subcomponents/ToolbarSection/ToolbarSection.mjs';
-import { buildControlMap } from './utils/controlmap.mjs';
+import { ToolbarControls } from './subcomponents/ToolbarControls/ToolbarControls.mjs';
 import { buildInputRules } from './utils/inputrules.mjs';
 import { buildKeymap } from './utils/keymap.mjs';
 import styles from './RichTextEditor.module.scss.mjs';
@@ -98,7 +95,6 @@ const RichTextEditor = /*#__PURE__*/function () {
     var editorRef = useRichTextEditorResult[0],
       editorState = useRichTextEditorResult[1],
       dispatchTransaction = useRichTextEditorResult[2];
-    var controlMap = buildControlMap(schema, editorState, controls);
     // @todo: Fix if possible - avoiding breaking in eslint upgrade
     // eslint-disable-next-line react-hooks/rules-of-hooks
     useEffect(function () {
@@ -112,26 +108,15 @@ const RichTextEditor = /*#__PURE__*/function () {
       labelText: labelText
     })), /*#__PURE__*/React.createElement("div", {
       className: classnames(styles.editorWrapper, styles[status])
-    }, controls && (/*#__PURE__*/React.createElement(Toolbar, {
-      "aria-controls": editorId,
-      "aria-label": "Text formatting",
-      classNameOverride: styles.toolbar
-    }, controlMap.map(function (section, index) {
-      return /*#__PURE__*/React.createElement(ToolbarSection, {
-        key: index
-      }, section.map(function (controlConfig, controlKeyIndex) {
-        return /*#__PURE__*/React.createElement(ToggleIconButton, {
-          key: controlKeyIndex,
-          icon: controlConfig.icon,
-          disabled: controlConfig.disabled,
-          label: controlConfig.label,
-          isActive: controlConfig.isActive,
-          onClick: function () {
-            return dispatchTransaction(controlConfig.action);
-          }
-        });
-      }));
-    }))), /*#__PURE__*/React.createElement("div", __assign({
+    }, /*#__PURE__*/React.createElement("div", {
+      className: styles.toolbarWrapper
+    }, /*#__PURE__*/React.createElement(ToolbarControls, {
+      editorId: editorId,
+      controls: controls,
+      editorState: editorState,
+      schema: schema,
+      dispatchTransaction: dispatchTransaction
+    })), /*#__PURE__*/React.createElement("div", __assign({
       id: editorId,
       ref: editorRef,
       className: classnames(styles.editor, styles["rows".concat(rows)], classNameOverride, controls != null && controls.length > 0 && styles.hasToolbar)

package/dist/esm/src/RichTextEditor/RichTextEditor/RichTextEditor.module.scss.mjs

@@ -2,8 +2,8 @@ var styles = {
   "editor": "RichTextEditor-module_editor__pVKqW",
   "hasToolbar": "RichTextEditor-module_hasToolbar__EBxnG",
   "editorLabel": "RichTextEditor-module_editorLabel__om-dJ",
+  "toolbarWrapper": "RichTextEditor-module_toolbarWrapper__wkBl-",
   "editorWrapper": "RichTextEditor-module_editorWrapper__5q3mG",
-  "toolbar": "RichTextEditor-module_toolbar__ceLvw",
   "error": "RichTextEditor-module_error__Xugz8",
   "caution": "RichTextEditor-module_caution__6q0z6",
   "rows1": "RichTextEditor-module_rows1__DDEf4",

package/dist/esm/src/RichTextEditor/RichTextEditor/subcomponents/ToolbarControls/ToolbarControls.mjs

@@ -0,0 +1,43 @@
+import React, { useCallback } from 'react';
+import { useIntl } from '@cultureamp/i18n-react-intl';
+import { useControlMap } from '../../utils/controlmap.mjs';
+import { ToggleIconButton } from '../ToggleIconButton/ToggleIconButton.mjs';
+import { Toolbar } from '../Toolbar/Toolbar.mjs';
+import { ToolbarSection } from '../ToolbarSection/ToolbarSection.mjs';
+var ToolbarControls = function (_a) {
+  var editorId = _a.editorId,
+    controls = _a.controls,
+    editorState = _a.editorState,
+    schema = _a.schema,
+    dispatchTransaction = _a.dispatchTransaction;
+  var controlMap = useControlMap(schema, editorState, controls);
+  var formatMessage = useIntl().formatMessage;
+  var handleControlClick = useCallback(function (action) {
+    dispatchTransaction(action);
+  }, [dispatchTransaction]);
+  if (controlMap.length <= 0) return null;
+  return /*#__PURE__*/React.createElement(Toolbar, {
+    "aria-controls": editorId,
+    "aria-label": formatMessage({
+      id: 'kz.rte.toolbar.aria_label',
+      defaultMessage: 'Text formatting',
+      description: 'Label for the text formatting toolbar in a Rich Text Editor'
+    })
+  }, controlMap.map(function (section, index) {
+    return /*#__PURE__*/React.createElement(ToolbarSection, {
+      key: index
+    }, section.map(function (controlConfig, controlKeyIndex) {
+      return /*#__PURE__*/React.createElement(ToggleIconButton, {
+        key: controlKeyIndex,
+        icon: controlConfig.icon,
+        disabled: controlConfig.disabled,
+        label: controlConfig.label,
+        isActive: controlConfig.isActive,
+        onClick: function () {
+          return handleControlClick(controlConfig.action);
+        }
+      });
+    }));
+  }));
+};
+export { ToolbarControls };

package/dist/esm/src/RichTextEditor/RichTextEditor/utils/controlmap.mjs

@@ -1,5 +1,6 @@
 import { __assign } from 'tslib';
 import React from 'react';
+import { useIntl } from '@cultureamp/i18n-react-intl';
 import { Icon } from '../../../Icon/Icon.mjs';
 import { listIsActive } from '../../utils/commands/listIsActive.mjs';
 import { markIsActive } from '../../utils/commands/markIsActive.mjs';
@@ -141,8 +142,9 @@ var filterToolbarControls = function (groupedControls) {
   });
 };
 /** Builds an array of object used to map control configuration to rte toolbar buttons */
-var buildControlMap = function (schema, editorState, controls) {
+var useControlMap = function (schema, editorState, controls) {
   var _a, _b;
+  var formatMessage = useIntl().formatMessage;
   if (!controls) return [];
   var controlGroupIndex = createControlGroupIndex(controls);
   var toolbarControls = createInitialControls(controlGroupIndex);
@@ -153,7 +155,11 @@ var buildControlMap = function (schema, editorState, controls) {
     toolbarControls[groupIndex].push({
       isActive: markIsActive(editorState, type),
       action: createToggleMarkCommand(type),
-      label: 'Bold',
+      label: formatMessage({
+        id: 'kz.rte.bold',
+        defaultMessage: 'Bold',
+        description: 'Label for the "Bold" button in a text editor'
+      }),
       icon: /*#__PURE__*/React.createElement(Icon, {
         name: "format_bold",
         isPresentational: true
@@ -166,7 +172,11 @@ var buildControlMap = function (schema, editorState, controls) {
     toolbarControls[groupIndex].push({
       isActive: markIsActive(editorState, type),
       action: createToggleMarkCommand(type),
-      label: 'Italic',
+      label: formatMessage({
+        id: 'kz.rte.italic',
+        defaultMessage: 'Italic',
+        description: 'Label for the "Italic" button in a text editor'
+      }),
       icon: /*#__PURE__*/React.createElement(Icon, {
         name: "format_italic",
         isPresentational: true
@@ -179,7 +189,11 @@ var buildControlMap = function (schema, editorState, controls) {
     toolbarControls[groupIndex].push({
       isActive: markIsActive(editorState, type),
       action: createToggleMarkCommand(type),
-      label: 'Underline',
+      label: formatMessage({
+        id: 'kz.rte.underline',
+        defaultMessage: 'Underline',
+        description: 'Label for the "Underline" button in a text editor'
+      }),
       icon: /*#__PURE__*/React.createElement(Icon, {
         name: "format_underlined",
         isPresentational: true
@@ -192,7 +206,11 @@ var buildControlMap = function (schema, editorState, controls) {
     toolbarControls[groupIndex].push({
       action: createToggleListCommand(type),
       isActive: listIsActive(editorState, type, listNodes),
-      label: 'Bullet List',
+      label: formatMessage({
+        id: 'kz.rte.bullet_list',
+        defaultMessage: 'Bullet list',
+        description: 'Label for the "Bullet list" button in a text editor'
+      }),
       icon: /*#__PURE__*/React.createElement(Icon, {
         name: "format_list_bulleted",
         isPresentational: true,
@@ -206,7 +224,11 @@ var buildControlMap = function (schema, editorState, controls) {
     toolbarControls[groupIndex].push({
       action: createToggleListCommand(type),
       isActive: listIsActive(editorState, type, listNodes),
-      label: 'Numbered List',
+      label: formatMessage({
+        id: 'kz.rte.numbered_list',
+        defaultMessage: 'Numbered list',
+        description: 'Label for the "Numbered list" button in a text editor'
+      }),
       icon: /*#__PURE__*/React.createElement(Icon, {
         name: "format_list_numbered",
         isPresentational: true,
@@ -220,7 +242,11 @@ var buildControlMap = function (schema, editorState, controls) {
       action: createLiftListCommand(),
       disabled: liftListIsDisabled(editorState),
       isActive: false,
-      label: 'Decrease indent',
+      label: formatMessage({
+        id: 'kz.rte.decrease_indent',
+        defaultMessage: 'Decrease indent',
+        description: 'Label for the "Decrease indent" button in a text editor'
+      }),
       icon: /*#__PURE__*/React.createElement(Icon, {
         name: "format_indent_decrease",
         isPresentational: true,
@@ -230,7 +256,11 @@ var buildControlMap = function (schema, editorState, controls) {
       action: createIndentListCommand(),
       disabled: indentListIsDisabled(editorState),
       isActive: false,
-      label: 'Increase indent',
+      label: formatMessage({
+        id: 'kz.rte.increase_indent',
+        defaultMessage: 'Increase indent',
+        description: 'Label for the "Increase indent" button in a text editor'
+      }),
       icon: /*#__PURE__*/React.createElement(Icon, {
         name: "format_indent_increase",
         isPresentational: true,
@@ -245,7 +275,11 @@ var buildControlMap = function (schema, editorState, controls) {
       action: createToggleMarkCommand(type),
       disabled: editorState.selection.empty,
       isActive: false,
-      label: 'Link',
+      label: formatMessage({
+        id: 'kz.rte.link',
+        defaultMessage: 'Link',
+        description: 'Label for the "Link" button in a text editor that allows the creation of hyperlinks in the text'
+      }),
       icon: /*#__PURE__*/React.createElement(Icon, {
         name: "add_link",
         isPresentational: true
@@ -254,4 +288,4 @@ var buildControlMap = function (schema, editorState, controls) {
   }
   return filterToolbarControls(toolbarControls);
 };
-export { buildControlMap };
+export { useControlMap };

package/dist/esm/src/SingleSelect/SingleSelect.mjs

@@ -22,6 +22,8 @@ import { transformSelectItemToCollectionElement } from './utils/transformSelectI
 import styles from './SingleSelect.module.scss.mjs';
 
 /**
+ * @deprecated SingleSelect is deprecated in v3 and will be replaced in v4.
+ *
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3081896474/Select Guidance} |
  * {@link https://cultureamp.design/?path=/docs/components-select--docs Storybook}
  */

package/dist/esm/src/Tile/InformationTile/InformationTile.mjs

@@ -3,6 +3,8 @@ import React from 'react';
 import { GenericTile } from '../subcomponents/GenericTile/GenericTile.mjs';
 
 /**
+ * @deprecated InformationTile is deprecated in v3 and will be removed in v4.
+ *
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3079077889/Tile#InformationTile%3A Guidance} |
  * {@link https://cultureamp.design/?path=/docs/components-tiles-informationtile--docs Storybook}
  */

package/dist/esm/src/Tile/MultiActionTile/MultiActionTile.mjs

@@ -14,6 +14,8 @@ var renderActions = function (primaryAction, secondaryAction) {
   }, secondaryAction)))), /*#__PURE__*/React.createElement(Button, __assign({}, primaryAction)));
 };
 /**
+ * @deprecated MultiActionTile is deprecated in v3 and will be removed in v4.
+ *
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3079077889/Tile#MultiActionTile.1 Guidance} |
  * {@link https://cultureamp.design/?path=/docs/components-tiles-multiactiontile--docs Storybook}
  */

package/dist/esm/src/Tile/TileGrid/TileGrid.mjs

@@ -4,6 +4,8 @@ import classnames from 'classnames';
 import styles from './TileGrid.module.scss.mjs';
 
 /**
+ * @deprecated TileGrid is deprecated in v3 and will be removed in v4.
+ *
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3079077889/Tile#TileGrid Guidance} |
  * {@link https://cultureamp.design/storybook/?path=/docs/components-tiles-tilegrid--docs Storybook}
  */

package/dist/styles.css

@@ -8094,7 +8094,6 @@
 @layer kz-components {
   .Toolbar-module_toolbar__ooRzV {
     display: block;
-    border-bottom: 2px solid var(--color-gray-500, #878792);
   }
 }
 /** THIS IS AN AUTOGENERATED FILE **/
@@ -8250,6 +8249,9 @@
     margin-bottom: var(--spacing-6, 0.375rem);
     display: inline-block;
   }
+  .RichTextEditor-module_toolbarWrapper__wkBl- {
+    border-bottom: inherit;
+  }
   /* stylelint-disable no-descending-specificity */
   .RichTextEditor-module_editorWrapper__5q3mG {
     position: relative;
@@ -8262,23 +8264,16 @@
   .RichTextEditor-module_editorWrapper__5q3mG:hover, .RichTextEditor-module_editorWrapper__5q3mG:focus-within {
     border-color: var(--color-gray-600, #524e56);
   }
-  .RichTextEditor-module_editorWrapper__5q3mG:hover .RichTextEditor-module_toolbar__ceLvw, .RichTextEditor-module_editorWrapper__5q3mG:focus-within .RichTextEditor-module_toolbar__ceLvw {
-    border-color: var(--color-gray-600, #524e56);
-  }
-  .RichTextEditor-module_editorWrapper__5q3mG.RichTextEditor-module_error__Xugz8,
-  .RichTextEditor-module_editorWrapper__5q3mG.RichTextEditor-module_error__Xugz8 .RichTextEditor-module_toolbar__ceLvw {
+  .RichTextEditor-module_editorWrapper__5q3mG.RichTextEditor-module_error__Xugz8 {
     border-color: var(--color-red-500, #c93b55);
   }
-  .RichTextEditor-module_editorWrapper__5q3mG.RichTextEditor-module_error__Xugz8:hover,
-  .RichTextEditor-module_editorWrapper__5q3mG.RichTextEditor-module_error__Xugz8:hover .RichTextEditor-module_toolbar__ceLvw {
+  .RichTextEditor-module_editorWrapper__5q3mG.RichTextEditor-module_error__Xugz8:hover {
     border-color: var(--color-red-600, #a82433);
   }
-  .RichTextEditor-module_editorWrapper__5q3mG.RichTextEditor-module_caution__6q0z6,
-  .RichTextEditor-module_editorWrapper__5q3mG.RichTextEditor-module_caution__6q0z6 .RichTextEditor-module_toolbar__ceLvw {
+  .RichTextEditor-module_editorWrapper__5q3mG.RichTextEditor-module_caution__6q0z6 {
     border-color: var(--color-yellow-600, #c68600);
   }
-  .RichTextEditor-module_editorWrapper__5q3mG.RichTextEditor-module_caution__6q0z6:hover,
-  .RichTextEditor-module_editorWrapper__5q3mG.RichTextEditor-module_caution__6q0z6:hover .RichTextEditor-module_toolbar__ceLvw {
+  .RichTextEditor-module_editorWrapper__5q3mG.RichTextEditor-module_caution__6q0z6:hover {
     border-color: var(--color-yellow-700, #876400);
   }
   .RichTextEditor-module_editor__pVKqW.RichTextEditor-module_rows1__DDEf4 > .ProseMirror {
@@ -11484,10 +11479,6 @@
 }
 
 @layer kz-components {
-  ul {
-    padding-inline-start: 0;
-  }
-
   .ListItem-module_listItem__xGr6A {
     font-family: var(--typography-paragraph-body-font-family);
     font-weight: var(--typography-paragraph-body-font-weight);

package/dist/types/RichTextEditor/RichTextEditor/RichTextEditor.d.ts

@@ -1,6 +1,6 @@
 import React, { type HTMLAttributes, type ReactNode } from 'react';
-import { type OverrideClassName } from "../../types/OverrideClassName";
-import { type EditorContentArray, type EditorRows, type ToolbarItems } from '../types';
+import type { OverrideClassName } from "../../types/OverrideClassName";
+import type { EditorContentArray, EditorRows, ToolbarItems } from '../types';
 import { ProseMirrorState } from '../utils/prosemirror';
 type BaseRichTextEditorProps = {
     id?: string;

package/dist/types/RichTextEditor/RichTextEditor/subcomponents/ToolbarControls/ToolbarControls.d.ts

@@ -0,0 +1,12 @@
+import type { ToolbarItems } from '../../../types';
+import type { CommandOrTransaction } from '../../../utils/core';
+import type { ProseMirrorModel, ProseMirrorState } from '../../../utils/prosemirror';
+type ToolbarControlsProps = {
+    editorId: string;
+    controls?: ToolbarItems[];
+    editorState: ProseMirrorState.EditorState;
+    schema: ProseMirrorModel.Schema<any, any>;
+    dispatchTransaction: (commandOrTransaction: CommandOrTransaction) => void;
+};
+export declare const ToolbarControls: ({ editorId, controls, editorState, schema, dispatchTransaction, }: ToolbarControlsProps) => JSX.Element | null;
+export {};

package/dist/types/RichTextEditor/RichTextEditor/subcomponents/ToolbarControls/index.d.ts

@@ -0,0 +1 @@
+export * from './ToolbarControls';

package/dist/types/RichTextEditor/RichTextEditor/utils/controlmap.d.ts

@@ -9,5 +9,5 @@ type ToolbarControl = {
     action: ProseMirrorState.Command;
 };
 /** Builds an array of object used to map control configuration to rte toolbar buttons */
-export declare const buildControlMap: (schema: ProseMirrorModel.Schema, editorState: ProseMirrorState.EditorState, controls?: ToolbarItems[]) => ToolbarControl[][];
+export declare const useControlMap: (schema: ProseMirrorModel.Schema, editorState: ProseMirrorState.EditorState, controls?: ToolbarItems[]) => ToolbarControl[][];
 export {};