@crystallize/design-system 1.11.0 → 1.11.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @crystallize/design-system
 
+## 1.11.2
+
+### Patch Changes
+
+- 3cfc9ede: Upgrade tailwindcss to version 3.3.0
+
+## 1.11.1
+
+### Patch Changes
+
+- 05f9beba: Add a new Info icon to design system.
+
 ## 1.11.0
 
 ### Minor Changes

package/dist/index.css

@@ -539,43 +539,34 @@ button {
 .relative {
   position: relative;
 }
-.top-2 {
-  top: 0.5rem;
-}
 .left-2 {
   left: 0.5rem;
 }
+.left-6 {
+  left: 1.5rem;
+}
+.right-10 {
+  right: 2.5rem;
+}
 .right-2 {
   right: 0.5rem;
 }
 .top-0 {
   top: 0px;
 }
-.left-6 {
-  left: 1.5rem;
-}
-.right-10 {
-  right: 2.5rem;
+.top-2 {
+  top: 0.5rem;
 }
 .z-50 {
   z-index: 50;
 }
-.my-6 {
-  margin-top: 1.5rem;
-  margin-bottom: 1.5rem;
-}
 .mx-auto {
   margin-left: auto;
   margin-right: auto;
 }
-.mt-8 {
-  margin-top: 2rem;
-}
-.mt-4 {
-  margin-top: 1rem;
-}
-.mt-2 {
-  margin-top: 0.5rem;
+.my-6 {
+  margin-top: 1.5rem;
+  margin-bottom: 1.5rem;
 }
 .mb-4 {
   margin-bottom: 1rem;
@@ -586,9 +577,18 @@ button {
 .mt-1 {
   margin-top: 0.25rem;
 }
+.mt-2 {
+  margin-top: 0.5rem;
+}
 .mt-3 {
   margin-top: 0.75rem;
 }
+.mt-4 {
+  margin-top: 1rem;
+}
+.mt-8 {
+  margin-top: 2rem;
+}
 .block {
   display: block;
 }
@@ -598,12 +598,12 @@ button {
 .inline {
   display: inline;
 }
-.flex {
-  display: flex;
-}
 .\!flex {
   display: flex !important;
 }
+.flex {
+  display: flex;
+}
 .table {
   display: table;
 }
@@ -625,48 +625,48 @@ button {
 .h-24 {
   height: 6rem;
 }
-.h-\[8px\] {
-  height: 8px;
+.h-5 {
+  height: 1.25rem;
+}
+.h-6 {
+  height: 1.5rem;
 }
 .h-\[44px\] {
   height: 44px;
 }
+.h-\[8px\] {
+  height: 8px;
+}
 .h-full {
   height: 100%;
 }
-.h-6 {
-  height: 1.5rem;
+.w-4 {
+  width: 1rem;
 }
-.h-5 {
-  height: 1.25rem;
+.w-5 {
+  width: 1.25rem;
 }
-.w-\[8px\] {
-  width: 8px;
+.w-6 {
+  width: 1.5rem;
 }
 .w-\[44px\] {
   width: 44px;
 }
+.w-\[8px\] {
+  width: 8px;
+}
 .w-full {
   width: 100%;
 }
-.w-6 {
-  width: 1.5rem;
-}
-.w-4 {
-  width: 1rem;
-}
-.w-5 {
-  width: 1.25rem;
-}
-.min-w-\[44px\] {
-  min-width: 44px;
-}
 .min-w-\[150px\] {
   min-width: 150px;
 }
 .min-w-\[200px\] {
   min-width: 200px;
 }
+.min-w-\[44px\] {
+  min-width: 44px;
+}
 .max-w-\[1100px\] {
   max-width: 1100px;
 }
@@ -688,15 +688,15 @@ button {
 .resize {
   resize: both;
 }
-.grid-cols-6 {
-  grid-template-columns: repeat(6, minmax(0, 1fr));
-}
 .grid-cols-10 {
   grid-template-columns: repeat(10, minmax(0, 1fr));
 }
 .grid-cols-5 {
   grid-template-columns: repeat(5, minmax(0, 1fr));
 }
+.grid-cols-6 {
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+}
 .grid-cols-\[1fr_1px_1fr\] {
   grid-template-columns: 1fr 1px 1fr;
 }
@@ -724,31 +724,26 @@ button {
 .justify-items-center {
   justify-items: center;
 }
-.gap-6 {
-  gap: 1.5rem;
+.gap-0 {
+  gap: 0px;
 }
-.gap-4 {
-  gap: 1rem;
+.gap-0\.5 {
+  gap: 0.125rem;
 }
 .gap-1 {
   gap: 0.25rem;
 }
-.gap-0\.5 {
-  gap: 0.125rem;
+.gap-4 {
+  gap: 1rem;
 }
-.gap-0 {
-  gap: 0px;
+.gap-6 {
+  gap: 1.5rem;
 }
 .space-x-2 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(0.5rem * var(--tw-space-x-reverse));
   margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
 }
-.space-y-4 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-y-reverse: 0;
-  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
-}
 .space-x-6 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(1.5rem * var(--tw-space-x-reverse));
@@ -759,6 +754,11 @@ button {
   margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
 }
+.space-y-4 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
+}
 .space-y-6 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
@@ -788,12 +788,12 @@ button {
 .rounded-sm {
   border-radius: 0.125rem;
 }
-.border-0 {
-  border-width: 0px;
-}
 .border {
   border-width: 1px;
 }
+.border-0 {
+  border-width: 0px;
+}
 .border-b {
   border-bottom-width: 1px;
 }
@@ -804,37 +804,37 @@ button {
   --tw-border-opacity: 1;
   border-color: rgb(var(--c-color-gray-100-800) / var(--tw-border-opacity));
 }
+.\!bg-purple-50-900 {
+  --tw-bg-opacity: 1 !important;
+  background-color: rgb(var(--c-color-purple-50-900) / var(--tw-bg-opacity)) !important;
+}
 .bg-gray {
   background-color: rgb(var(--c-color-gray));
 }
-.bg-gray-50-900 {
+.bg-gray-100-800 {
   --tw-bg-opacity: 1;
-  background-color: rgb(var(--c-color-gray-50-900) / var(--tw-bg-opacity));
+  background-color: rgb(var(--c-color-gray-100-800) / var(--tw-bg-opacity));
 }
-.bg-white {
+.bg-gray-50-900 {
   --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  background-color: rgb(var(--c-color-gray-50-900) / var(--tw-bg-opacity));
 }
 .bg-purple-50-900 {
   --tw-bg-opacity: 1;
   background-color: rgb(var(--c-color-purple-50-900) / var(--tw-bg-opacity));
 }
-.\!bg-purple-50-900 {
-  --tw-bg-opacity: 1 !important;
-  background-color: rgb(var(--c-color-purple-50-900) / var(--tw-bg-opacity)) !important;
-}
-.bg-gray-100-800 {
+.bg-white {
   --tw-bg-opacity: 1;
-  background-color: rgb(var(--c-color-gray-100-800) / var(--tw-bg-opacity));
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
-.bg-\[length\:18px_18px\] {
-  background-size: 18px 18px;
+.bg-\[length\:16px_16px\] {
+  background-size: 16px 16px;
 }
 .bg-\[length\:17px_17px\] {
   background-size: 17px 17px;
 }
-.bg-\[length\:16px_16px\] {
-  background-size: 16px 16px;
+.bg-\[length\:18px_18px\] {
+  background-size: 18px 18px;
 }
 .bg-\[length\:20px_20px\] {
   background-size: 20px 20px;
@@ -845,14 +845,18 @@ button {
 .bg-no-repeat {
   background-repeat: no-repeat;
 }
+.p-10 {
+  padding: 2.5rem;
+}
 .p-4 {
   padding: 1rem;
 }
 .p-\[5px\] {
   padding: 5px;
 }
-.p-10 {
-  padding: 2.5rem;
+.px-1 {
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
 }
 .px-3 {
   padding-left: 0.75rem;
@@ -862,21 +866,17 @@ button {
   padding-left: 1.5rem;
   padding-right: 1.5rem;
 }
-.py-2 {
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-}
-.px-1 {
-  padding-left: 0.25rem;
-  padding-right: 0.25rem;
+.py-0 {
+  padding-top: 0px;
+  padding-bottom: 0px;
 }
 .py-0\.5 {
   padding-top: 0.125rem;
   padding-bottom: 0.125rem;
 }
-.py-0 {
-  padding-top: 0px;
-  padding-bottom: 0px;
+.py-2 {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
 }
 .text-center {
   text-align: center;
@@ -899,6 +899,12 @@ button {
     "Segoe UI Symbol",
     "Noto Color Emoji";
 }
+.text-\[10px\] {
+  font-size: 10px;
+}
+.text-\[14px\] {
+  font-size: 14px;
+}
 .text-sm {
   font-size: 0.875rem;
   line-height: 1.25rem;
@@ -907,21 +913,15 @@ button {
   font-size: 0.75rem;
   line-height: 1rem;
 }
-.text-\[14px\] {
-  font-size: 14px;
-}
-.text-\[10px\] {
-  font-size: 10px;
-}
-.font-normal {
-  font-weight: 400;
-}
 .font-bold {
   font-weight: 700;
 }
 .font-medium {
   font-weight: 500;
 }
+.font-normal {
+  font-weight: 400;
+}
 .italic {
   font-style: italic;
 }
@@ -931,10 +931,6 @@ button {
 .text-gray {
   color: rgb(var(--c-color-gray));
 }
-.text-gray-700-200 {
-  --tw-text-opacity: 1;
-  color: rgb(var(--c-color-gray-700-200) / var(--tw-text-opacity));
-}
 .text-gray-300-600 {
   --tw-text-opacity: 1;
   color: rgb(var(--c-color-gray-300-600) / var(--tw-text-opacity));
@@ -943,6 +939,10 @@ button {
   --tw-text-opacity: 1;
   color: rgb(var(--c-color-gray-600-300) / var(--tw-text-opacity));
 }
+.text-gray-700-200 {
+  --tw-text-opacity: 1;
+  color: rgb(var(--c-color-gray-700-200) / var(--tw-text-opacity));
+}
 .text-pink-600-300 {
   --tw-text-opacity: 1;
   color: rgb(var(--c-color-pink-600-300) / var(--tw-text-opacity));
@@ -953,12 +953,12 @@ button {
 .opacity-100 {
   opacity: 1;
 }
-.opacity-60 {
-  opacity: 0.6;
-}
 .opacity-30 {
   opacity: 0.3;
 }
+.opacity-60 {
+  opacity: 0.6;
+}
 .opacity-80 {
   opacity: 0.8;
 }
@@ -1532,10 +1532,7 @@ button {
 }
 .c-dialog-overlay {
   position: fixed;
-  top: 0px;
-  right: 0px;
-  bottom: 0px;
-  left: 0px;
+  inset: 0px;
   z-index: 10;
   background-color: rgb(var(--c-color-overlay) / 0.3);
 }

package/dist/index.js

@@ -1563,7 +1563,7 @@ var Info = (0, import_react28.forwardRef)((delegated, ref) => {
       }),
       /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("path", {
         fillRule: "evenodd",
-        "clip-rule": "evenodd",
+        clipRule: "evenodd",
         d: "M18.253 3.85212C18.253 5.04383 17.2869 6.00991 16.0952 6.00991C14.9035 6.00991 13.9374 5.04383 13.9374 3.85212C13.9374 2.66041 14.9035 1.69434 16.0952 1.69434C17.2869 1.69434 18.253 2.66041 18.253 3.85212ZM16.0952 5.34999C16.9224 5.34999 17.5931 4.67937 17.5931 3.85212C17.5931 3.02487 16.9224 2.35425 16.0952 2.35425C15.2679 2.35425 14.5973 3.02487 14.5973 3.85212C14.5973 4.67937 15.2679 5.34999 16.0952 5.34999Z",
         fill: "#528693"
       }),
@@ -1573,7 +1573,7 @@ var Info = (0, import_react28.forwardRef)((delegated, ref) => {
       }),
       /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("path", {
         fillRule: "evenodd",
-        "clip-rule": "evenodd",
+        clipRule: "evenodd",
         d: "M11.2842 18.976L11.3049 18.9785C11.5112 19.0031 11.7201 18.9658 11.9049 18.8714C12.0891 18.7772 12.2409 18.6306 12.3411 18.4504C12.3471 18.4394 12.352 18.4277 12.3558 18.4158C12.3317 18.4124 12.3048 18.4091 12.2731 18.4053C12.0384 18.3881 11.8084 18.33 11.5936 18.2335C11.2334 18.0797 10.9456 17.7933 10.7906 17.433C10.6341 17.0694 10.6252 16.6594 10.7658 16.2894C10.9266 15.8663 11.1487 15.4689 11.4246 15.1101L11.6291 14.8181C11.6293 14.8178 11.629 14.8184 11.6291 14.8181C12.0038 14.2802 12.4092 13.763 12.8423 13.2707L12.9418 13.1535C12.9894 13.097 13.0361 13.0418 13.0821 12.9874C13.2314 12.8108 13.3734 12.6428 13.5141 12.4665L13.5237 12.4544L13.5339 12.4428C14.107 11.7899 14.5194 11.0128 14.7386 10.1733C14.8642 9.60674 14.7724 9.1134 14.5125 8.69961C14.2452 8.27422 13.7678 7.88337 13.0466 7.60647L13.0376 7.60304C12.2034 7.26882 11.3198 7.07373 10.4221 7.02572C10.2586 7.02444 10.0952 7.03841 9.93422 7.06745L9.91342 7.0712L9.89242 7.07362C9.77981 7.08656 9.67209 7.12639 9.57839 7.18964C9.48729 7.25113 9.41209 7.33296 9.35867 7.42842C9.35249 7.44171 9.33941 7.47402 9.32659 7.52286C9.31959 7.54951 9.31383 7.57671 9.30949 7.60325C9.36308 7.61115 9.41754 7.61364 9.47206 7.61055L9.51828 7.60793L9.63538 7.61773C9.79024 7.6263 9.94419 7.64682 10.0959 7.67913L10.1211 7.68451L10.1459 7.69185C10.6213 7.83272 11.1176 8.10198 11.3044 8.65041L11.3058 8.6547C11.4603 9.11879 11.309 9.5616 11.1547 9.87197C10.9947 10.194 10.7584 10.5161 10.546 10.7961C10.1932 11.2626 9.79323 11.726 9.4222 12.1559L9.4167 12.1622L9.30686 12.2896L9.29607 12.301C8.50411 13.1358 7.82119 14.0671 7.26353 15.0728C6.95101 15.7053 6.92585 16.2828 7.10297 16.7755C7.28379 17.2785 7.70442 17.772 8.42421 18.1631L8.42623 18.1642C9.29923 18.6426 10.2687 18.9197 11.2633 18.9749L11.2842 18.976ZM6.67909 14.7659C7.26511 13.7065 7.9836 12.7256 8.81732 11.8468L8.91693 11.7313C9.29243 11.2963 9.68044 10.8467 10.0199 10.3976C10.4486 9.83253 10.8215 9.28929 10.6797 8.86312C10.5968 8.6196 10.3605 8.44373 9.9584 8.32457C9.83715 8.29874 9.71404 8.28256 9.59022 8.27617L9.50938 8.26941C9.26232 8.2834 9.01575 8.23452 8.79281 8.12735C8.54248 7.93066 8.64731 7.36817 8.77404 7.12204C8.87835 6.92966 9.02762 6.76522 9.2092 6.64266C9.39077 6.5201 9.59929 6.44304 9.81707 6.41802C10.0235 6.38077 10.2331 6.36335 10.4429 6.36598C11.4176 6.41652 12.3773 6.6275 13.2831 6.9904C14.9259 7.62106 15.7097 8.86885 15.3801 10.3284C15.1357 11.2718 14.6733 12.1451 14.0299 12.8781C13.8828 13.0625 13.7326 13.2401 13.582 13.4182C13.5366 13.4719 13.4912 13.5256 13.4458 13.5795L13.3415 13.7024C12.9232 14.1775 12.5323 14.6759 12.1707 15.1952L11.9564 15.5012C11.7156 15.8119 11.5223 16.1565 11.3827 16.5237C11.303 16.7335 11.308 16.966 11.3968 17.1721C11.4855 17.3783 11.651 17.5421 11.8583 17.6289C12.0086 17.6973 12.1701 17.7377 12.335 17.748C12.5957 17.7793 12.8648 17.8126 12.9712 18.0603C13.0139 18.1752 13.0313 18.298 13.0223 18.4203C13.0133 18.5425 12.9781 18.6615 12.9191 18.769C12.7552 19.0647 12.5066 19.305 12.2052 19.459C11.9037 19.6131 11.563 19.6739 11.2267 19.6338C10.1339 19.5731 9.0685 19.2687 8.1091 18.743C6.45171 17.8422 5.90412 16.3181 6.67909 14.7659Z",
         fill: "#528693"
       })
@@ -3634,30 +3634,81 @@ var useSharedHistoryContext = () => {
 
 // src/rich-text-editor/i18n/index.tsx
 var import_react63 = require("react");
+
+// src/rich-text-editor/i18n/translations/en.ts
+var translations = {
+  actionClearTextFormatting: "Clear text formatting",
+  actionTextFormattingOptions: "Formatting options for additional text styles",
+  actionFormatAsStrongLabel: "Format text as bold",
+  actionFormatAsStrongTitle: "Bold (Ctrl+B)",
+  actionFormatAsStrongTitleApple: "Bold (\u2318B)",
+  actionFormatAsEmphasizedLabel: "Format text as italics",
+  actionFormatAsEmphasizedTitle: "Italic (Ctrl+I)",
+  actionFormatAsEmphasizedTitleApple: "Italic (\u2318I)",
+  actionFormatAsUnderlinedLabel: "Underline text",
+  actionFormatAsUnderlinedTitle: "Underlined (Ctrl+U)",
+  actionFormatAsUnderlinedTitleApple: "Underlined (\u2318U)",
+  actionFormatWithStrikethroughLabel: "Format text with a strikethrough",
+  actionFormatWithStrikethroughTitle: "Strikethrough",
+  actionFormatWithSubscriptLabel: "Format text as subscript",
+  actionFormatWithSubscriptTitle: "Subscript",
+  actionFormatWithSuperscriptLabel: "Format text as superscript",
+  actionFormatWithSuperscriptTitle: "Superscript",
+  actionInsertCodeBlock: "Insert code block",
+  actionInsertlink: "Insert link",
+  actionCopyJSON: "Copy JSON",
+  actionCopyCode: "Copy code",
+  actionClear: "Clear editor",
+  actionFormatCode: "Format code with Prettier",
+  actionTableInsertRowsAbove: "Insert row above",
+  actionTableInsertRowsAbove_plural: "Insert {{rows}} rows above",
+  actionTableInsertRowsBelow: "Insert row above",
+  actionTableInsertRowsBelow_plural: "Insert {{rows}} rows above",
+  actionTableInsertColumnsBefore: "Insert column left",
+  actionTableInsertColumnsBefore_plural: "Insert {{columns}} columns left",
+  actionTableInsertColumnsAfter: "Insert column right",
+  actionTableInsertColumnsAfter_plural: "Insert {{columns}} columns right",
+  actionTableAddRowHeader: "Add row header",
+  actionTableRemoveRowHeader: "Remove row header",
+  actionTableAddColumnHeader: "Add column header",
+  actionTableRemoveColumnHeader: "Remove column header",
+  actionTableDeleteColumn: "Delete column",
+  actionTableDeleteRow: "Delete row",
+  actionTableDeleteTable: "Delete table",
+  actionTableOpenOptions: "Open table options",
+  actionUndoLabel: "Undo",
+  actionUndoTitle: "Undo (Ctrl+Z)",
+  actionUndoTitleApple: "Undo (\u2318Z)",
+  actionRedoLabel: "Undo",
+  actionRedoTitle: "Undo (Ctrl+Y)",
+  actionRedoTitleApple: "Redo (\u2318Y)",
+  codeSelectLanguage: "Select language",
+  linkEditorLink: "Link",
+  linkEditorRel: "Rel",
+  linkEditorTarget: "Target",
+  linkEditorCommit: "Done",
+  linkEditorEdit: "Edit",
+  linkPreviewReplaceTextWithTitle: "Replace link text with its title",
+  horizontalRule: "Horizontal rule",
+  table: "Table",
+  insertTableTitle: "Insert table",
+  insertTableDescription: "Define your starting point of a table, you can add and remove columns and rows after creation.",
+  insertTableRows: "Rows",
+  insertTableColumns: "Columns",
+  insertTableCommit: "Insert table"
+};
+var en_default = translations;
+
+// src/rich-text-editor/i18n/index.tsx
 var import_jsx_runtime77 = require("react/jsx-runtime");
 var I18nContext = (0, import_react63.createContext)(null);
 function I18nProvider({
-  language,
   labelTranslations,
   children
 }) {
-  const [translations, setTranslations] = (0, import_react63.useState)(labelTranslations || null);
-  (0, import_react63.useEffect)(() => {
-    let unmounted = false;
-    (async function load() {
-      if (!labelTranslations) {
-        const resource = await import(`./translations/${language}.ts`);
-        if (!unmounted) {
-          setTranslations(resource.default);
-        }
-      }
-    })();
-    return () => {
-      unmounted = true;
-    };
-  }, [language, labelTranslations]);
+  const translations2 = labelTranslations || en_default;
   return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(I18nContext.Provider, {
-    value: translations,
+    value: translations2,
     children
   });
 }

package/dist/index.mjs

@@ -1503,7 +1503,7 @@ var Info = forwardRef28((delegated, ref) => {
       }),
       /* @__PURE__ */ jsx35("path", {
         fillRule: "evenodd",
-        "clip-rule": "evenodd",
+        clipRule: "evenodd",
         d: "M18.253 3.85212C18.253 5.04383 17.2869 6.00991 16.0952 6.00991C14.9035 6.00991 13.9374 5.04383 13.9374 3.85212C13.9374 2.66041 14.9035 1.69434 16.0952 1.69434C17.2869 1.69434 18.253 2.66041 18.253 3.85212ZM16.0952 5.34999C16.9224 5.34999 17.5931 4.67937 17.5931 3.85212C17.5931 3.02487 16.9224 2.35425 16.0952 2.35425C15.2679 2.35425 14.5973 3.02487 14.5973 3.85212C14.5973 4.67937 15.2679 5.34999 16.0952 5.34999Z",
         fill: "#528693"
       }),
@@ -1513,7 +1513,7 @@ var Info = forwardRef28((delegated, ref) => {
       }),
       /* @__PURE__ */ jsx35("path", {
         fillRule: "evenodd",
-        "clip-rule": "evenodd",
+        clipRule: "evenodd",
         d: "M11.2842 18.976L11.3049 18.9785C11.5112 19.0031 11.7201 18.9658 11.9049 18.8714C12.0891 18.7772 12.2409 18.6306 12.3411 18.4504C12.3471 18.4394 12.352 18.4277 12.3558 18.4158C12.3317 18.4124 12.3048 18.4091 12.2731 18.4053C12.0384 18.3881 11.8084 18.33 11.5936 18.2335C11.2334 18.0797 10.9456 17.7933 10.7906 17.433C10.6341 17.0694 10.6252 16.6594 10.7658 16.2894C10.9266 15.8663 11.1487 15.4689 11.4246 15.1101L11.6291 14.8181C11.6293 14.8178 11.629 14.8184 11.6291 14.8181C12.0038 14.2802 12.4092 13.763 12.8423 13.2707L12.9418 13.1535C12.9894 13.097 13.0361 13.0418 13.0821 12.9874C13.2314 12.8108 13.3734 12.6428 13.5141 12.4665L13.5237 12.4544L13.5339 12.4428C14.107 11.7899 14.5194 11.0128 14.7386 10.1733C14.8642 9.60674 14.7724 9.1134 14.5125 8.69961C14.2452 8.27422 13.7678 7.88337 13.0466 7.60647L13.0376 7.60304C12.2034 7.26882 11.3198 7.07373 10.4221 7.02572C10.2586 7.02444 10.0952 7.03841 9.93422 7.06745L9.91342 7.0712L9.89242 7.07362C9.77981 7.08656 9.67209 7.12639 9.57839 7.18964C9.48729 7.25113 9.41209 7.33296 9.35867 7.42842C9.35249 7.44171 9.33941 7.47402 9.32659 7.52286C9.31959 7.54951 9.31383 7.57671 9.30949 7.60325C9.36308 7.61115 9.41754 7.61364 9.47206 7.61055L9.51828 7.60793L9.63538 7.61773C9.79024 7.6263 9.94419 7.64682 10.0959 7.67913L10.1211 7.68451L10.1459 7.69185C10.6213 7.83272 11.1176 8.10198 11.3044 8.65041L11.3058 8.6547C11.4603 9.11879 11.309 9.5616 11.1547 9.87197C10.9947 10.194 10.7584 10.5161 10.546 10.7961C10.1932 11.2626 9.79323 11.726 9.4222 12.1559L9.4167 12.1622L9.30686 12.2896L9.29607 12.301C8.50411 13.1358 7.82119 14.0671 7.26353 15.0728C6.95101 15.7053 6.92585 16.2828 7.10297 16.7755C7.28379 17.2785 7.70442 17.772 8.42421 18.1631L8.42623 18.1642C9.29923 18.6426 10.2687 18.9197 11.2633 18.9749L11.2842 18.976ZM6.67909 14.7659C7.26511 13.7065 7.9836 12.7256 8.81732 11.8468L8.91693 11.7313C9.29243 11.2963 9.68044 10.8467 10.0199 10.3976C10.4486 9.83253 10.8215 9.28929 10.6797 8.86312C10.5968 8.6196 10.3605 8.44373 9.9584 8.32457C9.83715 8.29874 9.71404 8.28256 9.59022 8.27617L9.50938 8.26941C9.26232 8.2834 9.01575 8.23452 8.79281 8.12735C8.54248 7.93066 8.64731 7.36817 8.77404 7.12204C8.87835 6.92966 9.02762 6.76522 9.2092 6.64266C9.39077 6.5201 9.59929 6.44304 9.81707 6.41802C10.0235 6.38077 10.2331 6.36335 10.4429 6.36598C11.4176 6.41652 12.3773 6.6275 13.2831 6.9904C14.9259 7.62106 15.7097 8.86885 15.3801 10.3284C15.1357 11.2718 14.6733 12.1451 14.0299 12.8781C13.8828 13.0625 13.7326 13.2401 13.582 13.4182C13.5366 13.4719 13.4912 13.5256 13.4458 13.5795L13.3415 13.7024C12.9232 14.1775 12.5323 14.6759 12.1707 15.1952L11.9564 15.5012C11.7156 15.8119 11.5223 16.1565 11.3827 16.5237C11.303 16.7335 11.308 16.966 11.3968 17.1721C11.4855 17.3783 11.651 17.5421 11.8583 17.6289C12.0086 17.6973 12.1701 17.7377 12.335 17.748C12.5957 17.7793 12.8648 17.8126 12.9712 18.0603C13.0139 18.1752 13.0313 18.298 13.0223 18.4203C13.0133 18.5425 12.9781 18.6615 12.9191 18.769C12.7552 19.0647 12.5066 19.305 12.2052 19.459C11.9037 19.6131 11.563 19.6739 11.2267 19.6338C10.1339 19.5731 9.0685 19.2687 8.1091 18.743C6.45171 17.8422 5.90412 16.3181 6.67909 14.7659Z",
         fill: "#528693"
       })
@@ -3541,7 +3541,7 @@ function Tag({ children, className, variant, ...delegated }) {
 }
 
 // src/rich-text-editor/rich-text-editor.tsx
-import { useEffect as useEffect12, useRef as useRef5, useState as useState11 } from "react";
+import { useEffect as useEffect11, useRef as useRef5, useState as useState10 } from "react";
 import { AutoFocusPlugin } from "@lexical/react/LexicalAutoFocusPlugin";
 import { ClearEditorPlugin } from "@lexical/react/LexicalClearEditorPlugin";
 import { LexicalComposer } from "@lexical/react/LexicalComposer";
@@ -3573,31 +3573,82 @@ var useSharedHistoryContext = () => {
 };
 
 // src/rich-text-editor/i18n/index.tsx
-import { createContext as createContext2, useContext as useContext2, useEffect, useState } from "react";
+import { createContext as createContext2, useContext as useContext2 } from "react";
+
+// src/rich-text-editor/i18n/translations/en.ts
+var translations = {
+  actionClearTextFormatting: "Clear text formatting",
+  actionTextFormattingOptions: "Formatting options for additional text styles",
+  actionFormatAsStrongLabel: "Format text as bold",
+  actionFormatAsStrongTitle: "Bold (Ctrl+B)",
+  actionFormatAsStrongTitleApple: "Bold (\u2318B)",
+  actionFormatAsEmphasizedLabel: "Format text as italics",
+  actionFormatAsEmphasizedTitle: "Italic (Ctrl+I)",
+  actionFormatAsEmphasizedTitleApple: "Italic (\u2318I)",
+  actionFormatAsUnderlinedLabel: "Underline text",
+  actionFormatAsUnderlinedTitle: "Underlined (Ctrl+U)",
+  actionFormatAsUnderlinedTitleApple: "Underlined (\u2318U)",
+  actionFormatWithStrikethroughLabel: "Format text with a strikethrough",
+  actionFormatWithStrikethroughTitle: "Strikethrough",
+  actionFormatWithSubscriptLabel: "Format text as subscript",
+  actionFormatWithSubscriptTitle: "Subscript",
+  actionFormatWithSuperscriptLabel: "Format text as superscript",
+  actionFormatWithSuperscriptTitle: "Superscript",
+  actionInsertCodeBlock: "Insert code block",
+  actionInsertlink: "Insert link",
+  actionCopyJSON: "Copy JSON",
+  actionCopyCode: "Copy code",
+  actionClear: "Clear editor",
+  actionFormatCode: "Format code with Prettier",
+  actionTableInsertRowsAbove: "Insert row above",
+  actionTableInsertRowsAbove_plural: "Insert {{rows}} rows above",
+  actionTableInsertRowsBelow: "Insert row above",
+  actionTableInsertRowsBelow_plural: "Insert {{rows}} rows above",
+  actionTableInsertColumnsBefore: "Insert column left",
+  actionTableInsertColumnsBefore_plural: "Insert {{columns}} columns left",
+  actionTableInsertColumnsAfter: "Insert column right",
+  actionTableInsertColumnsAfter_plural: "Insert {{columns}} columns right",
+  actionTableAddRowHeader: "Add row header",
+  actionTableRemoveRowHeader: "Remove row header",
+  actionTableAddColumnHeader: "Add column header",
+  actionTableRemoveColumnHeader: "Remove column header",
+  actionTableDeleteColumn: "Delete column",
+  actionTableDeleteRow: "Delete row",
+  actionTableDeleteTable: "Delete table",
+  actionTableOpenOptions: "Open table options",
+  actionUndoLabel: "Undo",
+  actionUndoTitle: "Undo (Ctrl+Z)",
+  actionUndoTitleApple: "Undo (\u2318Z)",
+  actionRedoLabel: "Undo",
+  actionRedoTitle: "Undo (Ctrl+Y)",
+  actionRedoTitleApple: "Redo (\u2318Y)",
+  codeSelectLanguage: "Select language",
+  linkEditorLink: "Link",
+  linkEditorRel: "Rel",
+  linkEditorTarget: "Target",
+  linkEditorCommit: "Done",
+  linkEditorEdit: "Edit",
+  linkPreviewReplaceTextWithTitle: "Replace link text with its title",
+  horizontalRule: "Horizontal rule",
+  table: "Table",
+  insertTableTitle: "Insert table",
+  insertTableDescription: "Define your starting point of a table, you can add and remove columns and rows after creation.",
+  insertTableRows: "Rows",
+  insertTableColumns: "Columns",
+  insertTableCommit: "Insert table"
+};
+var en_default = translations;
+
+// src/rich-text-editor/i18n/index.tsx
 import { jsx as jsx77 } from "react/jsx-runtime";
 var I18nContext = createContext2(null);
 function I18nProvider({
-  language,
   labelTranslations,
   children
 }) {
-  const [translations, setTranslations] = useState(labelTranslations || null);
-  useEffect(() => {
-    let unmounted = false;
-    (async function load() {
-      if (!labelTranslations) {
-        const resource = await import(`./translations/${language}.ts`);
-        if (!unmounted) {
-          setTranslations(resource.default);
-        }
-      }
-    })();
-    return () => {
-      unmounted = true;
-    };
-  }, [language, labelTranslations]);
+  const translations2 = labelTranslations || en_default;
   return /* @__PURE__ */ jsx77(I18nContext.Provider, {
-    value: translations,
+    value: translations2,
     children
   });
 }
@@ -4067,7 +4118,7 @@ function LexicalAutoLinkPlugin() {
 }
 
 // src/rich-text-editor/plugins/CodeActionMenuPlugin/index.tsx
-import { useEffect as useEffect2, useRef, useState as useState4 } from "react";
+import { useEffect, useRef, useState as useState3 } from "react";
 import { $getNearestNodeFromDOMNode as $getNearestNodeFromDOMNode3 } from "lexical";
 import { createPortal } from "react-dom";
 import { useDebouncedCallback as useDebouncedCallback2 } from "use-debounce";
@@ -4076,13 +4127,13 @@ import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext
 
 // src/rich-text-editor/plugins/CodeActionMenuPlugin/components/CopyButton/index.tsx
 import "react";
-import { useState as useState2 } from "react";
+import { useState } from "react";
 import { $getNearestNodeFromDOMNode, $getSelection, $setSelection } from "lexical";
 import { useDebouncedCallback } from "use-debounce";
 import { $isCodeNode as $isCodeNode2 } from "@lexical/code";
 import { jsx as jsx79 } from "react/jsx-runtime";
 function CopyButton({ editor, getCodeDOMNode }) {
-  const [isCopyCompleted, setCopyCompleted] = useState2(false);
+  const [isCopyCompleted, setCopyCompleted] = useState(false);
   const tr = useTr();
   const removeSuccessIcon = useDebouncedCallback(() => {
     setCopyCompleted(false);
@@ -4123,7 +4174,7 @@ function CopyButton({ editor, getCodeDOMNode }) {
 
 // src/rich-text-editor/plugins/CodeActionMenuPlugin/components/PrettierButton/index.tsx
 import "react";
-import { useState as useState3 } from "react";
+import { useState as useState2 } from "react";
 import { $getNearestNodeFromDOMNode as $getNearestNodeFromDOMNode2 } from "lexical";
 import { $isCodeNode as $isCodeNode3 } from "@lexical/code";
 import { jsx as jsx80, jsxs as jsxs58 } from "react/jsx-runtime";
@@ -4166,8 +4217,8 @@ function getPrettierOptions(lang) {
   return options;
 }
 function PrettierButton({ lang, editor, getCodeDOMNode }) {
-  const [syntaxError, setSyntaxError] = useState3("");
-  const [tipsVisible, setTipsVisible] = useState3(false);
+  const [syntaxError, setSyntaxError] = useState2("");
+  const [tipsVisible, setTipsVisible] = useState2(false);
   const tr = useTr();
   async function handleClick() {
     const codeDOMNode = getCodeDOMNode();
@@ -4240,10 +4291,10 @@ import { Fragment as Fragment2, jsx as jsx81, jsxs as jsxs59 } from "react/jsx-r
 var CODE_PADDING = 8;
 function CodeActionMenuContainer({ anchorElem }) {
   const [editor] = useLexicalComposerContext();
-  const [lang, setLang] = useState4("");
-  const [isShown, setShown] = useState4(false);
-  const [shouldListenMouseMove, setShouldListenMouseMove] = useState4(true);
-  const [position, setPosition] = useState4({
+  const [lang, setLang] = useState3("");
+  const [isShown, setShown] = useState3(false);
+  const [shouldListenMouseMove, setShouldListenMouseMove] = useState3(true);
+  const [position, setPosition] = useState3({
     right: "0",
     top: "0"
   });
@@ -4282,7 +4333,7 @@ function CodeActionMenuContainer({ anchorElem }) {
       });
     }
   }, 50);
-  useEffect2(() => {
+  useEffect(() => {
     if (!shouldListenMouseMove) {
       return;
     }
@@ -4354,19 +4405,19 @@ function CodeActionMenuPlugin({
 }
 
 // src/rich-text-editor/plugins/CodeHighlightPlugin/index.ts
-import { useEffect as useEffect3 } from "react";
+import { useEffect as useEffect2 } from "react";
 import { registerCodeHighlighting } from "@lexical/code";
 import { useLexicalComposerContext as useLexicalComposerContext2 } from "@lexical/react/LexicalComposerContext";
 function CodeHighlightPlugin() {
   const [editor] = useLexicalComposerContext2();
-  useEffect3(() => {
+  useEffect2(() => {
     return registerCodeHighlighting(editor);
   }, [editor]);
   return null;
 }
 
 // src/rich-text-editor/plugins/FloatingLinkEditorPlugin/index.tsx
-import { useCallback, useEffect as useEffect5, useRef as useRef2, useState as useState6 } from "react";
+import { useCallback, useEffect as useEffect4, useRef as useRef2, useState as useState5 } from "react";
 import "react";
 import {
   $getSelection as $getSelection3,
@@ -4383,7 +4434,7 @@ import { useLexicalComposerContext as useLexicalComposerContext4 } from "@lexica
 import { $findMatchingParent, mergeRegister } from "@lexical/utils";
 
 // src/rich-text-editor/ui/LinkPreview.tsx
-import { Suspense, useEffect as useEffect4, useState as useState5 } from "react";
+import { Suspense, useEffect as useEffect3, useState as useState4 } from "react";
 import { $getSelection as $getSelection2, $isTextNode as $isTextNode3 } from "lexical";
 import { useLexicalComposerContext as useLexicalComposerContext3 } from "@lexical/react/LexicalComposerContext";
 import { Fragment as Fragment3, jsx as jsx82, jsxs as jsxs60 } from "react/jsx-runtime";
@@ -4410,12 +4461,12 @@ function useSuspenseRequest(url) {
 function LinkPreviewContent({
   url
 }) {
-  const [textContent, setTextContent] = useState5("");
+  const [textContent, setTextContent] = useState4("");
   const { preview } = useSuspenseRequest(url);
   const [editor] = useLexicalComposerContext3();
   const tr = useTr();
   const hasPreview = preview !== null && preview.google?.title;
-  useEffect4(() => {
+  useEffect3(() => {
     editor.update(() => {
       const sel = $getSelection2();
       const nodes = sel?.getNodes();
@@ -4578,11 +4629,11 @@ function FloatingLinkEditor({
 }) {
   const editorRef = useRef2(null);
   const inputRef = useRef2(null);
-  const [linkUrl, setLinkUrl] = useState6("");
-  const [rel, setRel] = useState6(null);
-  const [target, setTarget] = useState6(null);
-  const [isEditMode, setEditMode] = useState6(false);
-  const [lastSelection, setLastSelection] = useState6(null);
+  const [linkUrl, setLinkUrl] = useState5("");
+  const [rel, setRel] = useState5(null);
+  const [target, setTarget] = useState5(null);
+  const [isEditMode, setEditMode] = useState5(false);
+  const [lastSelection, setLastSelection] = useState5(null);
   const tr = useTr();
   const updateLinkEditor = useCallback(() => {
     const selection = $getSelection3();
@@ -4634,7 +4685,7 @@ function FloatingLinkEditor({
     }
     return true;
   }, [anchorElem, editor]);
-  useEffect5(() => {
+  useEffect4(() => {
     const scrollerElem = anchorElem.parentElement;
     const update = () => {
       editor.getEditorState().read(() => {
@@ -4652,7 +4703,7 @@ function FloatingLinkEditor({
       }
     };
   }, [anchorElem.parentElement, editor, updateLinkEditor]);
-  useEffect5(() => {
+  useEffect4(() => {
     return mergeRegister(
       editor.registerUpdateListener(({ editorState }) => {
         editorState.read(() => {
@@ -4680,12 +4731,12 @@ function FloatingLinkEditor({
       )
     );
   }, [editor, updateLinkEditor, setIsLink, isLink]);
-  useEffect5(() => {
+  useEffect4(() => {
     editor.getEditorState().read(() => {
       updateLinkEditor();
     });
   }, [editor, updateLinkEditor]);
-  useEffect5(() => {
+  useEffect4(() => {
     if (isEditMode && inputRef.current) {
       inputRef.current.focus();
     }
@@ -4792,8 +4843,8 @@ function FloatingLinkEditor({
   });
 }
 function useFloatingLinkEditorToolbar(editor, anchorElem) {
-  const [activeEditor, setActiveEditor] = useState6(editor);
-  const [isLink, setIsLink] = useState6(false);
+  const [activeEditor, setActiveEditor] = useState5(editor);
+  const [isLink, setIsLink] = useState5(false);
   const updateToolbar = useCallback(() => {
     const selection = $getSelection3();
     if ($isRangeSelection(selection)) {
@@ -4807,7 +4858,7 @@ function useFloatingLinkEditorToolbar(editor, anchorElem) {
       }
     }
   }, []);
-  useEffect5(() => {
+  useEffect4(() => {
     return editor.registerCommand(
       SELECTION_CHANGE_COMMAND,
       (_payload, newEditor) => {
@@ -4836,7 +4887,7 @@ function FloatingLinkEditorPlugin({
 }
 
 // src/rich-text-editor/plugins/FloatingTextFormatToolbarPlugin/index.tsx
-import { useCallback as useCallback2, useEffect as useEffect6, useRef as useRef3, useState as useState7 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect5, useRef as useRef3, useState as useState6 } from "react";
 import "react";
 import {
   $getSelection as $getSelection4,
@@ -4920,7 +4971,7 @@ function TextFormatFloatingToolbar({
       setFloatingElemPosition(rangeRect, popupCharStylesEditorElem, anchorElem);
     }
   }, [editor, anchorElem]);
-  useEffect6(() => {
+  useEffect5(() => {
     const scrollerElem = anchorElem.parentElement;
     const update = () => {
       editor.getEditorState().read(() => {
@@ -4938,7 +4989,7 @@ function TextFormatFloatingToolbar({
       }
     };
   }, [editor, updateTextFormatFloatingToolbar, anchorElem]);
-  useEffect6(() => {
+  useEffect5(() => {
     editor.getEditorState().read(() => {
       updateTextFormatFloatingToolbar();
     });
@@ -5052,15 +5103,15 @@ function TextFormatFloatingToolbar({
   });
 }
 function useFloatingTextFormatToolbar(editor, anchorElem) {
-  const [isText, setIsText] = useState7(false);
-  const [isLink, setIsLink] = useState7(false);
-  const [isBold, setIsBold] = useState7(false);
-  const [isItalic, setIsItalic] = useState7(false);
-  const [isUnderline, setIsUnderline] = useState7(false);
-  const [isStrikethrough, setIsStrikethrough] = useState7(false);
-  const [isSubscript, setIsSubscript] = useState7(false);
-  const [isSuperscript, setIsSuperscript] = useState7(false);
-  const [isCode, setIsCode] = useState7(false);
+  const [isText, setIsText] = useState6(false);
+  const [isLink, setIsLink] = useState6(false);
+  const [isBold, setIsBold] = useState6(false);
+  const [isItalic, setIsItalic] = useState6(false);
+  const [isUnderline, setIsUnderline] = useState6(false);
+  const [isStrikethrough, setIsStrikethrough] = useState6(false);
+  const [isSubscript, setIsSubscript] = useState6(false);
+  const [isSuperscript, setIsSuperscript] = useState6(false);
+  const [isCode, setIsCode] = useState6(false);
   const updatePopup = useCallback2(() => {
     editor.getEditorState().read(() => {
       if (editor.isComposing()) {
@@ -5097,13 +5148,13 @@ function useFloatingTextFormatToolbar(editor, anchorElem) {
       }
     });
   }, [editor]);
-  useEffect6(() => {
+  useEffect5(() => {
     document.addEventListener("selectionchange", updatePopup);
     return () => {
       document.removeEventListener("selectionchange", updatePopup);
     };
   }, [updatePopup]);
-  useEffect6(() => {
+  useEffect5(() => {
     return mergeRegister2(
       editor.registerUpdateListener(() => {
         updatePopup();
@@ -5161,7 +5212,7 @@ import {
   COMMAND_PRIORITY_CRITICAL as COMMAND_PRIORITY_CRITICAL2,
   INDENT_CONTENT_COMMAND
 } from "lexical";
-import { useEffect as useEffect7 } from "react";
+import { useEffect as useEffect6 } from "react";
 function getElementNodesInSelection(selection) {
   const nodesInSelection = selection.getNodes();
   if (nodesInSelection.length === 0) {
@@ -5198,7 +5249,7 @@ function isIndentPermitted(maxDepth) {
 }
 function ListMaxIndentLevelPlugin({ maxDepth }) {
   const [editor] = useLexicalComposerContext6();
-  useEffect7(() => {
+  useEffect6(() => {
     return editor.registerCommand(
       INDENT_CONTENT_COMMAND,
       () => !isIndentPermitted(maxDepth ?? 7),
@@ -5209,7 +5260,7 @@ function ListMaxIndentLevelPlugin({ maxDepth }) {
 }
 
 // src/rich-text-editor/plugins/MaxLengthPlugin/index.tsx
-import { useEffect as useEffect8 } from "react";
+import { useEffect as useEffect7 } from "react";
 import { $getSelection as $getSelection6, $isRangeSelection as $isRangeSelection4 } from "lexical";
 import { useLexicalComposerContext as useLexicalComposerContext7 } from "@lexical/react/LexicalComposerContext";
 import { trimTextContentFromAnchor } from "@lexical/selection";
@@ -5251,7 +5302,7 @@ ${content}
 // src/rich-text-editor/plugins/MaxLengthPlugin/index.tsx
 function MaxLengthPlugin({ maxLength }) {
   const [editor] = useLexicalComposerContext7();
-  useEffect8(() => {
+  useEffect7(() => {
     let lastRestoredEditorState = null;
     return editor.registerUpdateListener(({ editorState, prevEditorState }) => {
       editor.update(() => {
@@ -5281,7 +5332,7 @@ function MaxLengthPlugin({ maxLength }) {
 }
 
 // src/rich-text-editor/plugins/TabFocusPlugin/index.tsx
-import { useEffect as useEffect9 } from "react";
+import { useEffect as useEffect8 } from "react";
 import { $getSelection as $getSelection7, $isRangeSelection as $isRangeSelection5, $setSelection as $setSelection2, FOCUS_COMMAND } from "lexical";
 import { useLexicalComposerContext as useLexicalComposerContext8 } from "@lexical/react/LexicalComposerContext";
 var COMMAND_PRIORITY_LOW3 = 1;
@@ -5301,7 +5352,7 @@ function registerKeyTimeStampTracker() {
 }
 function TabFocusPlugin() {
   const [editor] = useLexicalComposerContext8();
-  useEffect9(() => {
+  useEffect8(() => {
     if (!hasRegisteredKeyDownListener) {
       registerKeyTimeStampTracker();
       hasRegisteredKeyDownListener = true;
@@ -5324,7 +5375,7 @@ function TabFocusPlugin() {
 }
 
 // src/rich-text-editor/plugins/TableActionMenuPlugin/index.tsx
-import { useCallback as useCallback3, useEffect as useEffect10, useRef as useRef4, useState as useState8 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect9, useRef as useRef4, useState as useState7 } from "react";
 import { $getRoot as $getRoot3, $getSelection as $getSelection8, $isRangeSelection as $isRangeSelection6, DEPRECATED_$isGridSelection } from "lexical";
 import { createPortal as createPortal4 } from "react-dom";
 import { useLexicalComposerContext as useLexicalComposerContext9 } from "@lexical/react/LexicalComposerContext";
@@ -5349,13 +5400,13 @@ import {
 import { Fragment as Fragment6, jsx as jsx86, jsxs as jsxs63 } from "react/jsx-runtime";
 function TableActionMenu({ tableCellNode: _tableCellNode, tableStats }) {
   const [editor] = useLexicalComposerContext9();
-  const [tableCellNode, updateTableCellNode] = useState8(_tableCellNode);
-  const [selectionCounts, updateSelectionCounts] = useState8({
+  const [tableCellNode, updateTableCellNode] = useState7(_tableCellNode);
+  const [selectionCounts, updateSelectionCounts] = useState7({
     columns: 1,
     rows: 1
   });
   const tr = useTr();
-  useEffect10(() => {
+  useEffect9(() => {
     return editor.registerMutationListener(TableCellNode2, (nodeMutations) => {
       const nodeUpdated = nodeMutations.get(tableCellNode.getKey()) === "updated";
       if (nodeUpdated) {
@@ -5365,7 +5416,7 @@ function TableActionMenu({ tableCellNode: _tableCellNode, tableStats }) {
       }
     });
   }, [editor, tableCellNode]);
-  useEffect10(() => {
+  useEffect9(() => {
     editor.getEditorState().read(() => {
       const selection = $getSelection8();
       if (DEPRECATED_$isGridSelection(selection)) {
@@ -5551,9 +5602,9 @@ function TableCellActionMenuContainer({ anchorElem }) {
   const [editor] = useLexicalComposerContext9();
   const tr = useTr();
   const menuButtonRef = useRef4(null);
-  const [isMenuOpen, setIsMenuOpen] = useState8(false);
-  const [tableCellNode, setTableMenuCellNode] = useState8(null);
-  const [tableStats, setTablestats] = useState8({ rows: 1, columns: 1 });
+  const [isMenuOpen, setIsMenuOpen] = useState7(false);
+  const [tableCellNode, setTableMenuCellNode] = useState7(null);
+  const [tableStats, setTablestats] = useState7({ rows: 1, columns: 1 });
   const moveMenu = useCallback3(() => {
     if (isMenuOpen) {
       return;
@@ -5597,14 +5648,14 @@ function TableCellActionMenuContainer({ anchorElem }) {
       setTableMenuCellNode(null);
     }
   }, [editor, isMenuOpen]);
-  useEffect10(() => {
+  useEffect9(() => {
     return editor.registerUpdateListener(() => {
       editor.getEditorState().read(() => {
         moveMenu();
       });
     });
   });
-  useEffect10(() => {
+  useEffect9(() => {
     const menuButtonDOM = menuButtonRef.current;
     if (menuButtonDOM != null && tableCellNode != null) {
       const tableCellNodeDOM = editor.getElementByKey(tableCellNode.getKey());
@@ -5650,7 +5701,7 @@ function TableActionMenuPlugin({
 }
 
 // src/rich-text-editor/plugins/ToolbarPlugin/index.tsx
-import { useCallback as useCallback4, useEffect as useEffect11, useState as useState10 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect10, useState as useState9 } from "react";
 import {
   $createParagraphNode as $createParagraphNode2,
   $getNodeByKey,
@@ -5748,12 +5799,12 @@ function ActionsPlugin({
 }
 
 // src/rich-text-editor/plugins/ToolbarPlugin/insert-table.tsx
-import { useState as useState9 } from "react";
+import { useState as useState8 } from "react";
 import { INSERT_TABLE_COMMAND } from "@lexical/table";
 import { Fragment as Fragment7, jsx as jsx88, jsxs as jsxs65 } from "react/jsx-runtime";
 function InsertTableDialog({ activeEditor }) {
-  const [rows, setRows] = useState9("5");
-  const [columns, setColumns] = useState9("5");
+  const [rows, setRows] = useState8("5");
+  const [columns, setColumns] = useState8("5");
   const tr = useTr();
   const onClick = () => {
     if (parseInt(rows) < 1 || parseInt(columns) < 1) {
@@ -6021,22 +6072,22 @@ function ToolbarPlugin({
   actionsMenuAppend
 }) {
   const [editor] = useLexicalComposerContext11();
-  const [activeEditor, setActiveEditor] = useState10(editor);
-  const [blockType, setBlockType] = useState10("paragraph");
-  const [selectedElementKey, setSelectedElementKey] = useState10(null);
-  const [isLink, setIsLink] = useState10(false);
-  const [isBold, setIsBold] = useState10(false);
-  const [isItalic, setIsItalic] = useState10(false);
-  const [isUnderline, setIsUnderline] = useState10(false);
-  const [isStrikethrough, setIsStrikethrough] = useState10(false);
-  const [isSubscript, setIsSubscript] = useState10(false);
-  const [isSuperscript, setIsSuperscript] = useState10(false);
-  const [isCode, setIsCode] = useState10(false);
-  const [canUndo, setCanUndo] = useState10(false);
-  const [canRedo, setCanRedo] = useState10(false);
+  const [activeEditor, setActiveEditor] = useState9(editor);
+  const [blockType, setBlockType] = useState9("paragraph");
+  const [selectedElementKey, setSelectedElementKey] = useState9(null);
+  const [isLink, setIsLink] = useState9(false);
+  const [isBold, setIsBold] = useState9(false);
+  const [isItalic, setIsItalic] = useState9(false);
+  const [isUnderline, setIsUnderline] = useState9(false);
+  const [isStrikethrough, setIsStrikethrough] = useState9(false);
+  const [isSubscript, setIsSubscript] = useState9(false);
+  const [isSuperscript, setIsSuperscript] = useState9(false);
+  const [isCode, setIsCode] = useState9(false);
+  const [canUndo, setCanUndo] = useState9(false);
+  const [canRedo, setCanRedo] = useState9(false);
   const tr = useTr();
-  const [codeLanguage, setCodeLanguage] = useState10("");
-  const [isEditable, setIsEditable] = useState10(() => editor.isEditable());
+  const [codeLanguage, setCodeLanguage] = useState9("");
+  const [isEditable, setIsEditable] = useState9(() => editor.isEditable());
   const updateToolbar = useCallback4(() => {
     const selection = $getSelection9();
     if ($isRangeSelection7(selection)) {
@@ -6084,7 +6135,7 @@ function ToolbarPlugin({
       }
     }
   }, [activeEditor]);
-  useEffect11(() => {
+  useEffect10(() => {
     return editor.registerCommand(
       SELECTION_CHANGE_COMMAND3,
       (_payload, newEditor) => {
@@ -6095,7 +6146,7 @@ function ToolbarPlugin({
       COMMAND_PRIORITY_CRITICAL3
     );
   }, [editor, updateToolbar]);
-  useEffect11(() => {
+  useEffect10(() => {
     return mergeRegister3(
       editor.registerEditableListener((editable) => {
         setIsEditable(editable);
@@ -6612,18 +6663,18 @@ function RichTextEditorWithoutContext({
     children: placeholderText ?? ""
   });
   const [editor] = useLexicalComposerContext12();
-  const [floatingAnchorElem, setFloatingAnchorElem] = useState11(null);
-  const [isSmallWidthViewport, setIsSmallWidthViewport] = useState11(false);
+  const [floatingAnchorElem, setFloatingAnchorElem] = useState10(null);
+  const [isSmallWidthViewport, setIsSmallWidthViewport] = useState10(false);
   const firstOnChangeTriggeredRef = useRef5(!autoFocus);
   const onRef = (_floatingAnchorElem) => {
     if (_floatingAnchorElem !== null) {
       setFloatingAnchorElem(_floatingAnchorElem);
     }
   };
-  useEffect12(() => {
+  useEffect11(() => {
     editor.setEditable(editable || false);
   }, [editable, editor]);
-  useEffect12(() => {
+  useEffect11(() => {
     const updateViewPortWidth = () => {
       const isNextSmallWidthViewport = window.matchMedia("(max-width: 1025px)").matches;
       if (isNextSmallWidthViewport !== isSmallWidthViewport) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crystallize/design-system",
-  "version": "1.11.0",
+  "version": "1.11.2",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -85,12 +85,12 @@
     "storybook": "7.0.0-beta.14",
     "storybook-addon-designs": "^6.3.1",
     "storybook-dark-mode": "^2.0.5",
-    "tailwindcss": "^3.2.4",
-    "tsconfig": "0.0.0",
+    "tailwindcss": "^3.3.0",
     "tsup": "^6.5.0",
     "typescript": "^4.9.4",
     "vite": "^4.1.1",
-    "vitest": "^0.29.1"
+    "vitest": "^0.29.1",
+    "tsconfig": "0.0.0"
   },
   "keywords": [
     "react",

package/src/iconography/info.tsx

@@ -20,7 +20,7 @@ export const Info = forwardRef<InfoRef, InfoProps>((delegated, ref) => {
       />
       <path
         fillRule="evenodd"
-        clip-rule="evenodd"
+        clipRule="evenodd"
         d="M18.253 3.85212C18.253 5.04383 17.2869 6.00991 16.0952 6.00991C14.9035 6.00991 13.9374 5.04383 13.9374 3.85212C13.9374 2.66041 14.9035 1.69434 16.0952 1.69434C17.2869 1.69434 18.253 2.66041 18.253 3.85212ZM16.0952 5.34999C16.9224 5.34999 17.5931 4.67937 17.5931 3.85212C17.5931 3.02487 16.9224 2.35425 16.0952 2.35425C15.2679 2.35425 14.5973 3.02487 14.5973 3.85212C14.5973 4.67937 15.2679 5.34999 16.0952 5.34999Z"
         fill="#528693"
       />
@@ -30,7 +30,7 @@ export const Info = forwardRef<InfoRef, InfoProps>((delegated, ref) => {
       />
       <path
         fillRule="evenodd"
-        clip-rule="evenodd"
+        clipRule="evenodd"
         d="M11.2842 18.976L11.3049 18.9785C11.5112 19.0031 11.7201 18.9658 11.9049 18.8714C12.0891 18.7772 12.2409 18.6306 12.3411 18.4504C12.3471 18.4394 12.352 18.4277 12.3558 18.4158C12.3317 18.4124 12.3048 18.4091 12.2731 18.4053C12.0384 18.3881 11.8084 18.33 11.5936 18.2335C11.2334 18.0797 10.9456 17.7933 10.7906 17.433C10.6341 17.0694 10.6252 16.6594 10.7658 16.2894C10.9266 15.8663 11.1487 15.4689 11.4246 15.1101L11.6291 14.8181C11.6293 14.8178 11.629 14.8184 11.6291 14.8181C12.0038 14.2802 12.4092 13.763 12.8423 13.2707L12.9418 13.1535C12.9894 13.097 13.0361 13.0418 13.0821 12.9874C13.2314 12.8108 13.3734 12.6428 13.5141 12.4665L13.5237 12.4544L13.5339 12.4428C14.107 11.7899 14.5194 11.0128 14.7386 10.1733C14.8642 9.60674 14.7724 9.1134 14.5125 8.69961C14.2452 8.27422 13.7678 7.88337 13.0466 7.60647L13.0376 7.60304C12.2034 7.26882 11.3198 7.07373 10.4221 7.02572C10.2586 7.02444 10.0952 7.03841 9.93422 7.06745L9.91342 7.0712L9.89242 7.07362C9.77981 7.08656 9.67209 7.12639 9.57839 7.18964C9.48729 7.25113 9.41209 7.33296 9.35867 7.42842C9.35249 7.44171 9.33941 7.47402 9.32659 7.52286C9.31959 7.54951 9.31383 7.57671 9.30949 7.60325C9.36308 7.61115 9.41754 7.61364 9.47206 7.61055L9.51828 7.60793L9.63538 7.61773C9.79024 7.6263 9.94419 7.64682 10.0959 7.67913L10.1211 7.68451L10.1459 7.69185C10.6213 7.83272 11.1176 8.10198 11.3044 8.65041L11.3058 8.6547C11.4603 9.11879 11.309 9.5616 11.1547 9.87197C10.9947 10.194 10.7584 10.5161 10.546 10.7961C10.1932 11.2626 9.79323 11.726 9.4222 12.1559L9.4167 12.1622L9.30686 12.2896L9.29607 12.301C8.50411 13.1358 7.82119 14.0671 7.26353 15.0728C6.95101 15.7053 6.92585 16.2828 7.10297 16.7755C7.28379 17.2785 7.70442 17.772 8.42421 18.1631L8.42623 18.1642C9.29923 18.6426 10.2687 18.9197 11.2633 18.9749L11.2842 18.976ZM6.67909 14.7659C7.26511 13.7065 7.9836 12.7256 8.81732 11.8468L8.91693 11.7313C9.29243 11.2963 9.68044 10.8467 10.0199 10.3976C10.4486 9.83253 10.8215 9.28929 10.6797 8.86312C10.5968 8.6196 10.3605 8.44373 9.9584 8.32457C9.83715 8.29874 9.71404 8.28256 9.59022 8.27617L9.50938 8.26941C9.26232 8.2834 9.01575 8.23452 8.79281 8.12735C8.54248 7.93066 8.64731 7.36817 8.77404 7.12204C8.87835 6.92966 9.02762 6.76522 9.2092 6.64266C9.39077 6.5201 9.59929 6.44304 9.81707 6.41802C10.0235 6.38077 10.2331 6.36335 10.4429 6.36598C11.4176 6.41652 12.3773 6.6275 13.2831 6.9904C14.9259 7.62106 15.7097 8.86885 15.3801 10.3284C15.1357 11.2718 14.6733 12.1451 14.0299 12.8781C13.8828 13.0625 13.7326 13.2401 13.582 13.4182C13.5366 13.4719 13.4912 13.5256 13.4458 13.5795L13.3415 13.7024C12.9232 14.1775 12.5323 14.6759 12.1707 15.1952L11.9564 15.5012C11.7156 15.8119 11.5223 16.1565 11.3827 16.5237C11.303 16.7335 11.308 16.966 11.3968 17.1721C11.4855 17.3783 11.651 17.5421 11.8583 17.6289C12.0086 17.6973 12.1701 17.7377 12.335 17.748C12.5957 17.7793 12.8648 17.8126 12.9712 18.0603C13.0139 18.1752 13.0313 18.298 13.0223 18.4203C13.0133 18.5425 12.9781 18.6615 12.9191 18.769C12.7552 19.0647 12.5066 19.305 12.2052 19.459C11.9037 19.6131 11.563 19.6739 11.2267 19.6338C10.1339 19.5731 9.0685 19.2687 8.1091 18.743C6.45171 17.8422 5.90412 16.3181 6.67909 14.7659Z"
         fill="#528693"
       />

package/src/rich-text-editor/i18n/index.tsx

@@ -1,5 +1,6 @@
-import { createContext, ReactNode, useContext, useEffect, useState } from 'react';
+import { createContext, ReactNode, useContext } from 'react';
 
+import labelTranslationEn from './translations/en';
 import type { I18N } from './types';
 
 const I18nContext = createContext<I18N | null>(null);
@@ -9,7 +10,6 @@ export type SupportedLanguages = 'en';
 export { default as labelTranslationEn } from './translations/en';
 
 export function I18nProvider({
-  language,
   labelTranslations,
   children,
 }: {
@@ -17,23 +17,24 @@ export function I18nProvider({
   labelTranslations?: I18N;
   children: ReactNode;
 }) {
-  const [translations, setTranslations] = useState<I18N | null>(labelTranslations || null);
+  const translations = labelTranslations || labelTranslationEn;
+  // const [translations, setTranslations] = useState<I18N>(labelTranslations || labelTranslationEn);
 
-  useEffect(() => {
-    let unmounted = false;
-    (async function load() {
-      if (!labelTranslations) {
-        const resource = await import(`./translations/${language}.ts`);
-        if (!unmounted) {
-          setTranslations(resource.default);
-        }
-      }
-    })();
+  // useEffect(() => {
+  //   let unmounted = false;
+  //   (async function load() {
+  //     if (language !== 'en') {
+  //       const resource = await import(`./translations/${language}.ts`);
+  //       if (!unmounted) {
+  //         setTranslations(resource.default);
+  //       }
+  //     }
+  //   })();
 
-    return () => {
-      unmounted = true;
-    };
-  }, [language, labelTranslations]);
+  //   return () => {
+  //     unmounted = true;
+  //   };
+  // }, [language, labelTranslations]);
 
   return <I18nContext.Provider value={translations}>{children}</I18nContext.Provider>;
 }