@uniformdev/design-system 20.50.2-alpha.109 → 20.50.2-alpha.117

package/dist/esm/index.js

@@ -1,4 +1,5 @@
-import "./chunk-6NI3O2RY.js";
+'use client';
+import "./chunk-ZICJ6DRF.js";
 
 // src/styles/Theme.tsx
 import { Fragment, jsx as jsx2, jsxs } from "@emotion/react/jsx-runtime";
@@ -1305,7 +1306,7 @@ function IconsProvider({ children }) {
   const [isLoading, setIsLoading] = useState(true);
   const [iconsMap, setIconsMap] = useState({});
   const initializeIconsMap = async () => {
-    const { importedIcons } = await import("./importedIcons-NFIA4IOK.js");
+    const { importedIcons } = await import("./importedIcons-ZMQQFG4N.js");
     setIconsMap({ ...importedIcons, ...customIcons });
     setIsLoading(false);
   };
@@ -7482,8 +7483,20 @@ var PageHeaderSection = ({
   level = 2,
   linkProps,
   linkManagerComponent,
+  afterTitle,
+  afterTitleGap = "sm",
+  afterTitleAlign = "center",
   ...htmlProps
 }) => {
+  const HeaderContent = () => {
+    if (afterTitle) {
+      return /* @__PURE__ */ jsxs37(HorizontalRhythm, { css: PageHeaderSectionTitle, gap: afterTitleGap, align: afterTitleAlign, children: [
+        /* @__PURE__ */ jsx55(Heading2, { level, ...htmlProps, "data-testid": "page-header-section", withMarginBottom: false, children: title }),
+        afterTitle
+      ] });
+    }
+    return /* @__PURE__ */ jsx55(Heading2, { level, css: PageHeaderSectionTitle, ...htmlProps, "data-testid": "page-header-section", children: title });
+  };
   if (linkText && linkProps && !linkManagerComponent) {
     throw Error("You must provide a linkManagerComponent");
   }
@@ -7502,7 +7515,7 @@ var PageHeaderSection = ({
           }
         )
       ] }) : null,
-      /* @__PURE__ */ jsx55(Heading2, { level, css: PageHeaderSectionTitle, ...htmlProps, "data-testid": "page-header-section", children: title }),
+      /* @__PURE__ */ jsx55(HeaderContent, {}),
       desc
     ] }),
     children ? /* @__PURE__ */ jsx55("div", { css: PageHeaderSectionChildContainer, children }) : null
@@ -13615,37 +13628,45 @@ var ObjectListSubText2 = ({ children, ...props }) => {
 import * as React20 from "react";
 import Paginate from "react-paginate";
 
-// src/components/Pagination/Pagniation.styles.ts
-import { css as css92 } from "@emotion/css";
-var wrapper = css92`
+// src/components/Pagination/Pagination.styles.ts
+import { css as css92 } from "@emotion/react";
+var container2 = "ud-pagination-container";
+var disabled = "ud-pagination-disabled";
+var disabledLink = "ud-pagination-disabled-link";
+var pageLink = "ud-pagination-page-link";
+var prevNextControls = "ud-pagination-prev-next";
+var active = "ud-pagination-active";
+var page = "ud-pagination-page";
+var paginationStyles = css92`
   display: inline-flex;
   max-width: 100%;
   overflow-x: auto;
-`;
-var container2 = css92`
-  align-items: center;
-  display: flex;
-`;
-var disabled = css92`
-  opacity: var(--opacity-50);
-`;
-var disabledLink = css92`
-  cursor: pointer-default;
-`;
-var pageLink = css92`
-  display: block;
-  padding: var(--spacing-sm) var(--spacing-base);
-`;
-var prevNextControls = css92`
-  padding: var(--spacing-sm) var(--spacing-base);
-`;
-var active = css92`
-  border-radius: var(--rounded-base);
-  background: var(--gray-200);
-`;
-var page = css92`
-  margin-left: var(--spacing-xs);
-  margin-right: var(--spacing-xs);
+
+  .${container2} {
+    align-items: center;
+    display: flex;
+  }
+  .${container2} .${disabled} {
+    opacity: var(--opacity-50);
+  }
+  .${container2} .${disabledLink} {
+    cursor: pointer-default;
+  }
+  .${container2} .${pageLink} {
+    display: block;
+    padding: var(--spacing-sm) var(--spacing-base);
+  }
+  .${container2} .${prevNextControls} {
+    padding: var(--spacing-sm) var(--spacing-base);
+  }
+  .${container2} .${active} {
+    border-radius: var(--rounded-base);
+    background: var(--gray-200);
+  }
+  .${container2} .${page} {
+    margin-left: var(--spacing-xs);
+    margin-right: var(--spacing-xs);
+  }
 `;
 
 // src/components/Pagination/usePaginationDisplayRange.ts
@@ -13747,7 +13768,7 @@ function Pagination({
   if (limit < 1 || pageCount <= 1) {
     return null;
   }
-  return /* @__PURE__ */ jsx122("div", { ref: containerRef, className: wrapper, children: /* @__PURE__ */ jsx122(
+  return /* @__PURE__ */ jsx122("div", { ref: containerRef, css: paginationStyles, children: /* @__PURE__ */ jsx122(
     Paginate,
     {
       forcePage: currentPage,
@@ -15749,7 +15770,6 @@ ParameterNumberSlider.displayName = "ParameterNumberSlider";
 ParameterNumberSliderInner.displayName = "ParameterNumberSliderInner";
 
 // src/components/ParameterInputs/ParameterRichText.tsx
-import { css as css107 } from "@emotion/react";
 import { ListItemNode, ListNode as ListNode3 } from "@lexical/list";
 import {
   CODE,
@@ -15931,245 +15951,252 @@ function DisableStylesPlugin() {
 }
 
 // src/components/ParameterInputs/rich-text/editorStyles.ts
-import { css as css102 } from "@emotion/css";
-var textBold = css102`
-  font-weight: 700;
-`;
-var textItalic = css102`
-  font-style: italic;
-`;
-var textUnderline = css102`
-  text-decoration: underline;
-`;
-var textStrikethrough = css102`
-  text-decoration: line-through;
-`;
-var textUnderlineStrikethrough = css102`
-  text-decoration: underline line-through;
-`;
-var textCode = css102`
-  background-color: var(--gray-100);
-  border-radius: var(--rounded-sm);
-  display: inline-block;
-  font-family: var(--ff-mono);
-  font-feature-settings: 'liga' 0;
-  font-variant-ligatures: none;
-  font-size: var(--fs-sm);
-  padding-left: var(--spacing-xs);
-  padding-right: var(--spacing-xs);
-`;
-var textSuperscript = css102`
-  vertical-align: super;
-  font-size: smaller;
-`;
-var textSubscript = css102`
-  vertical-align: sub;
-  font-size: smaller;
-`;
-var linkElement = css102`
-  ${link}
-  ${linkColorDefault}
-  text-decoration: underline;
-`;
-var h12 = css102`
-  font-size: clamp(1.35rem, var(--fluid-font-base), 1.7rem);
-`;
-var h22 = css102`
-  font-size: clamp(1.35rem, var(--fluid-font-base), 1.6rem);
-`;
-var h32 = css102`
-  font-size: clamp(1.25rem, var(--fluid-font-base), 1.5rem);
-`;
-var h42 = css102`
-  font-size: clamp(1.15rem, var(--fluid-font-base), 1.25rem);
-`;
-var h52 = css102`
-  font-size: clamp(var(--fs-base), var(--fluid-font-base), 1.15rem);
-`;
-var h62 = css102`
-  font-size: var(--fs-base);
-`;
-var heading1Element = css102`
-  ${h12}
-  ${commonHeadingAttr(true)}
-  ${commonLineHeight}
-`;
-var heading2Element = css102`
-  ${h22}
-  ${commonHeadingAttr(true)}
-  ${commonLineHeight}
-`;
-var heading3Element = css102`
-  ${h32}
-  ${commonHeadingAttr(true)}
-  ${commonLineHeight}
-`;
-var heading4Element = css102`
-  ${h42}
-  ${commonHeadingAttr(true)}
-  ${commonLineHeight}
-`;
-var heading5Element = css102`
-  ${h52}
-  ${commonHeadingAttr(true)}
-  ${commonLineHeight}
-`;
-var heading6Element = css102`
-  ${h62}
-  ${commonHeadingAttr(true)}
-  ${commonLineHeight}
-`;
-var paragraphElement = css102`
-  line-height: 1.5;
-  margin-bottom: var(--spacing-base);
-
-  &:last-child {
-    margin-bottom: 0;
+import { css as css102 } from "@emotion/react";
+var textBold = "ud-editor-text-bold";
+var textItalic = "ud-editor-text-italic";
+var textUnderline = "ud-editor-text-underline";
+var textStrikethrough = "ud-editor-text-strikethrough";
+var textUnderlineStrikethrough = "ud-editor-text-underline-strikethrough";
+var textCode = "ud-editor-text-code";
+var textSuperscript = "ud-editor-text-superscript";
+var textSubscript = "ud-editor-text-subscript";
+var linkElement = "ud-editor-link";
+var heading1Element = "ud-editor-h1";
+var heading2Element = "ud-editor-h2";
+var heading3Element = "ud-editor-h3";
+var heading4Element = "ud-editor-h4";
+var heading5Element = "ud-editor-h5";
+var heading6Element = "ud-editor-h6";
+var paragraphElement = "ud-editor-paragraph";
+var orderedListElement = "ud-editor-ol";
+var unorderedListElement = "ud-editor-ul";
+var listItemElement = "ud-editor-listitem";
+var nestedListItemElement = "ud-editor-nested-listitem";
+var blockquoteElement = "ud-editor-blockquote";
+var codeElement = "ud-editor-code";
+var tableElement = "ud-editor-table";
+var tableCellElement = "ud-editor-table-cell";
+var tableHeaderElement = "ud-editor-table-header";
+var editorThemeStyles = css102`
+  .${textBold} {
+    font-weight: 700;
+  }
+  .${textItalic} {
+    font-style: italic;
   }
-`;
-var orderedListElement = css102`
-  ${commonLineHeight}
-  display: block;
-  list-style: decimal;
-  list-style-position: outside;
-  margin-bottom: var(--spacing-base);
-  margin-top: 0;
-  padding: 0;
+  .${textUnderline} {
+    text-decoration: underline;
+  }
+  .${textStrikethrough} {
+    text-decoration: line-through;
+  }
+  .${textUnderlineStrikethrough} {
+    text-decoration: underline line-through;
+  }
+  .${textCode} {
+    background-color: var(--gray-100);
+    border-radius: var(--rounded-sm);
+    display: inline-block;
+    font-family: var(--ff-mono);
+    font-feature-settings: 'liga' 0;
+    font-variant-ligatures: none;
+    font-size: var(--fs-sm);
+    padding-left: var(--spacing-xs);
+    padding-right: var(--spacing-xs);
+  }
+  .${textSuperscript} {
+    vertical-align: super;
+    font-size: smaller;
+  }
+  .${textSubscript} {
+    vertical-align: sub;
+    font-size: smaller;
+  }
+  .${linkElement} {
+    ${link}
+    ${linkColorDefault}
+    text-decoration: underline;
+  }
+  .${heading1Element} {
+    font-size: clamp(1.35rem, var(--fluid-font-base), 1.7rem);
+    ${commonHeadingAttr(true)}
+    ${commonLineHeight}
+  }
+  .${heading2Element} {
+    font-size: clamp(1.35rem, var(--fluid-font-base), 1.6rem);
+    ${commonHeadingAttr(true)}
+    ${commonLineHeight}
+  }
+  .${heading3Element} {
+    font-size: clamp(1.25rem, var(--fluid-font-base), 1.5rem);
+    ${commonHeadingAttr(true)}
+    ${commonLineHeight}
+  }
+  .${heading4Element} {
+    font-size: clamp(1.15rem, var(--fluid-font-base), 1.25rem);
+    ${commonHeadingAttr(true)}
+    ${commonLineHeight}
+  }
+  .${heading5Element} {
+    font-size: clamp(var(--fs-base), var(--fluid-font-base), 1.15rem);
+    ${commonHeadingAttr(true)}
+    ${commonLineHeight}
+  }
+  .${heading6Element} {
+    font-size: var(--fs-base);
+    ${commonHeadingAttr(true)}
+    ${commonLineHeight}
+  }
+  .${paragraphElement} {
+    line-height: 1.5;
+    margin-bottom: var(--spacing-base);
 
-  &:last-child {
-    margin-bottom: 0;
+    &:last-child {
+      margin-bottom: 0;
+    }
   }
+  .${orderedListElement} {
+    ${commonLineHeight}
+    display: block;
+    list-style: decimal;
+    list-style-position: outside;
+    margin-bottom: var(--spacing-base);
+    margin-top: 0;
+    padding: 0;
 
-  ol {
-    list-style-type: upper-alpha;
+    &:last-child {
+      margin-bottom: 0;
+    }
 
     ol {
-      list-style-type: lower-alpha;
+      list-style-type: upper-alpha;
 
       ol {
-        list-style-type: upper-roman;
+        list-style-type: lower-alpha;
 
         ol {
-          list-style-type: lower-roman;
+          list-style-type: upper-roman;
+
+          ol {
+            list-style-type: lower-roman;
+          }
         }
       }
     }
   }
-`;
-var unorderedListElement = css102`
-  ${commonLineHeight}
-  display: block;
-  list-style: disc;
-  list-style-position: outside;
-  margin-bottom: var(--spacing-base);
-  margin-top: 0;
-  padding: 0;
-
-  &:last-child {
-    margin-bottom: 0;
-  }
+  .${unorderedListElement} {
+    ${commonLineHeight}
+    display: block;
+    list-style: disc;
+    list-style-position: outside;
+    margin-bottom: var(--spacing-base);
+    margin-top: 0;
+    padding: 0;
 
-  ul {
-    list-style-type: circle;
+    &:last-child {
+      margin-bottom: 0;
+    }
 
     ul {
-      list-style-type: square;
+      list-style-type: circle;
+
+      ul {
+        list-style-type: square;
+      }
     }
   }
-`;
-var listItemElement = css102`
-  margin-left: var(--spacing-md);
-`;
-var nestedListItemElement = css102`
-  list-style-type: none;
-`;
-var blockquoteElement = css102`
-  border-left: 0.25rem solid var(--gray-300);
-  color: var(--gray-600);
-  margin-bottom: var(--spacing-base);
-  padding-left: var(--spacing-base);
-
-  &:last-child {
-    margin-bottom: 0;
+  .${listItemElement} {
+    margin-left: var(--spacing-md);
   }
-`;
-var codeElement = css102`
-  background-color: var(--gray-100);
-  border-radius: var(--rounded-sm);
-  display: block;
-  font-family: var(--ff-mono);
-  font-feature-settings: 'liga' 0;
-  font-variant-ligatures: none;
-  font-size: var(--fs-sm);
-  margin-bottom: var(--spacing-base);
-  padding: var(--spacing-sm);
+  .${nestedListItemElement} {
+    list-style-type: none;
+  }
+  .${blockquoteElement} {
+    border-left: 0.25rem solid var(--gray-300);
+    color: var(--gray-600);
+    margin-bottom: var(--spacing-base);
+    padding-left: var(--spacing-base);
 
-  &:last-child {
-    margin-bottom: 0;
+    &:last-child {
+      margin-bottom: 0;
+    }
   }
-`;
-var tableElement = css102`
-  border-collapse: collapse;
-  border-spacing: 0;
-  border-color: var(--gray-300);
-  border-width: 1px;
-  border-style: solid;
-  margin-bottom: var(--spacing-base);
-  margin-top: 0;
+  .${codeElement} {
+    background-color: var(--gray-100);
+    border-radius: var(--rounded-sm);
+    display: block;
+    font-family: var(--ff-mono);
+    font-feature-settings: 'liga' 0;
+    font-variant-ligatures: none;
+    font-size: var(--fs-sm);
+    margin-bottom: var(--spacing-base);
+    padding: var(--spacing-sm);
 
-  &:last-child {
-    margin-bottom: 0;
+    &:last-child {
+      margin-bottom: 0;
+    }
   }
-`;
-var tableCellElement = css102`
-  background-color: var(--white);
-  border-color: var(--gray-300);
-  border-style: solid;
-  border-width: 1px;
-  box-sizing: unset;
-  min-width: 2rem;
-  outline: none;
-  padding: var(--spacing-sm);
-  position: relative;
-  text-align: start;
-  vertical-align: top;
-  width: 7rem;
+  .${tableElement} {
+    border-collapse: collapse;
+    border-spacing: 0;
+    border-color: var(--gray-300);
+    border-width: 1px;
+    border-style: solid;
+    margin-bottom: var(--spacing-base);
+    margin-top: 0;
 
-  /* Used by the table resizer plugin to not change the hovered cell immediately
-  upon going with the mouse over the neighboring cell */
-  &::after {
-    content: '';
-    height: 5px;
-    left: 0;
-    position: absolute;
-    top: 100%;
-    width: 100%;
-    z-index: 1;
+    &:last-child {
+      margin-bottom: 0;
+    }
   }
+  .${tableCellElement} {
+    background-color: var(--white);
+    border-color: var(--gray-300);
+    border-style: solid;
+    border-width: 1px;
+    box-sizing: unset;
+    min-width: 2rem;
+    outline: none;
+    padding: var(--spacing-sm);
+    position: relative;
+    text-align: start;
+    vertical-align: top;
+    width: 7rem;
 
-  &::before {
-    content: '';
-    width: 5px;
-    height: 100%;
-    position: absolute;
-    top: 0;
-    left: 100%;
-    z-index: 1;
+    &::after {
+      content: '';
+      height: 5px;
+      left: 0;
+      position: absolute;
+      top: 100%;
+      width: 100%;
+      z-index: 1;
+    }
+
+    &::before {
+      content: '';
+      width: 5px;
+      height: 100%;
+      position: absolute;
+      top: 0;
+      left: 100%;
+      z-index: 1;
+    }
+  }
+  .${tableHeaderElement} {
+    background-color: var(--gray-100);
+    border-color: var(--gray-300);
+    border-style: solid;
+    border-width: 1px;
+    box-sizing: unset;
+    font-weight: normal;
+    min-width: 2rem;
+    outline: none;
+    padding: var(--spacing-sm);
+    text-align: start;
+    vertical-align: top;
+    width: 7rem;
   }
-`;
-var tableHeaderElement = css102`
-  background-color: var(--gray-100);
-  border-color: var(--gray-300);
-  border-style: solid;
-  border-width: 1px;
-  box-sizing: unset;
-  font-weight: normal;
-  min-width: 2rem;
-  outline: none;
-  padding: var(--spacing-sm);
-  text-align: start;
-  vertical-align: top;
-  width: 7rem;
 `;
 
 // src/components/ParameterInputs/rich-text/ImprovedAssetSelectionPlugin.tsx
@@ -18248,41 +18275,8 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
 };
 var RichTextToolbar_default = RichTextToolbar;
 
-// src/components/ParameterInputs/ParameterRichText.tsx
-import { Fragment as Fragment21, jsx as jsx144, jsxs as jsxs97 } from "@emotion/react/jsx-runtime";
-var ParameterRichText = ({
-  label: label2,
-  labelLeadingIcon,
-  hiddenLabel,
-  id,
-  errorMessage,
-  caption,
-  errorTestId,
-  captionTestId,
-  menuItems,
-  children,
-  ...innerProps
-}) => {
-  return /* @__PURE__ */ jsxs97(
-    ParameterShell,
-    {
-      "data-testid": "parameter-richtext",
-      label: label2,
-      hiddenLabel,
-      labelLeadingIcon,
-      id,
-      errorMessage,
-      caption,
-      errorTestId,
-      captionTestId,
-      menuItems,
-      children: [
-        /* @__PURE__ */ jsx144(ParameterRichTextInner, { ...innerProps, children }),
-        menuItems ? /* @__PURE__ */ jsx144(ParameterMenuButton, { label: `${label2} menu`, children: /* @__PURE__ */ jsx144(Fragment21, { children: menuItems }) }) : null
-      ]
-    }
-  );
-};
+// src/components/ParameterInputs/styles/ParameterRichText.styles.ts
+import { css as css107 } from "@emotion/react";
 var editorContainerWrapper = css107`
   position: relative;
 
@@ -18364,6 +18358,42 @@ var editorInput = css107`
     outline: none;
   }
 `;
+
+// src/components/ParameterInputs/ParameterRichText.tsx
+import { Fragment as Fragment21, jsx as jsx144, jsxs as jsxs97 } from "@emotion/react/jsx-runtime";
+var ParameterRichText = ({
+  label: label2,
+  labelLeadingIcon,
+  hiddenLabel,
+  id,
+  errorMessage,
+  caption,
+  errorTestId,
+  captionTestId,
+  menuItems,
+  children,
+  ...innerProps
+}) => {
+  return /* @__PURE__ */ jsxs97(
+    ParameterShell,
+    {
+      "data-testid": "parameter-richtext",
+      label: label2,
+      hiddenLabel,
+      labelLeadingIcon,
+      id,
+      errorMessage,
+      caption,
+      errorTestId,
+      captionTestId,
+      menuItems,
+      children: [
+        /* @__PURE__ */ jsx144(ParameterRichTextInner, { ...innerProps, children }),
+        menuItems ? /* @__PURE__ */ jsx144(ParameterMenuButton, { label: `${label2} menu`, children: /* @__PURE__ */ jsx144(Fragment21, { children: menuItems }) }) : null
+      ]
+    }
+  );
+};
 var ParameterRichTextInner = ({
   value,
   editorFooter,
@@ -18429,7 +18459,7 @@ var ParameterRichTextInner = ({
     editable: !richTextProps.readOnly
   };
   return /* @__PURE__ */ jsxs97(Fragment21, { children: [
-    /* @__PURE__ */ jsx144("div", { css: [editorWrapper], className: editorWrapperClassName, children: /* @__PURE__ */ jsx144(LexicalComposer, { initialConfig: lexicalConfig, children: /* @__PURE__ */ jsx144(RichText, { ...richTextProps, children }) }) }),
+    /* @__PURE__ */ jsx144("div", { css: [editorWrapper, editorThemeStyles], className: editorWrapperClassName, children: /* @__PURE__ */ jsx144(LexicalComposer, { initialConfig: lexicalConfig, children: /* @__PURE__ */ jsx144(RichText, { ...richTextProps, children }) }) }),
     editorFooter ? editorFooter : null
   ] });
 };