@uniformdev/design-system 19.92.3 → 19.95.0

package/dist/esm/index.js

@@ -16202,14 +16202,6 @@ import React19, { useEffect as useEffect10, useRef as useRef6 } from "react";
 
 // src/components/Modal/Modal.styles.ts
 import { css as css73 } from "@emotion/react";
-var modalWrapperStyles = css73`
-  position: fixed;
-  inset: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: var(--z-drawer);
-`;
 var modalStyles = css73`
   position: relative;
   max-width: calc(100% - var(--spacing-base) * 2);
@@ -16226,7 +16218,6 @@ var modalStyles = css73`
 var modalInnerStyles = css73`
   position: relative;
   width: 100%;
-  height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: stretch;
@@ -16320,25 +16311,32 @@ var Modal = React19.forwardRef(
           e.preventDefault();
         },
         ...modalProps,
-        children: /* @__PURE__ */ jsxs59("div", { css: modalInnerStyles, onClick: (e) => e.stopPropagation(), children: [
-          /* @__PURE__ */ jsxs59("div", { css: modalHeaderStyles, children: [
-            /* @__PURE__ */ jsx89("div", { css: modalHeaderHeaderStyles, children: header }),
-            /* @__PURE__ */ jsx89(
-              Button,
-              {
-                type: "button",
-                onClick: onRequestClose,
-                css: modalCloseButtonStyles,
-                title: "Close dialog",
-                buttonType: "ghost",
-                "data-testid": "close-dialog",
-                children: /* @__PURE__ */ jsx89(Icon, { icon: CgClose5, iconColor: "gray", size: 24 })
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx89("div", { css: [modalContentStyles, !withoutContentPadding ? null : { padding: 0 }], children }),
-          buttonGroup ? /* @__PURE__ */ jsx89(HorizontalRhythm, { children: buttonGroup }) : null
-        ] })
+        children: /* @__PURE__ */ jsxs59(
+          "div",
+          {
+            css: [modalInnerStyles, { height: height === "auto" ? "auto" : "100%" }],
+            onClick: (e) => e.stopPropagation(),
+            children: [
+              /* @__PURE__ */ jsxs59("div", { css: modalHeaderStyles, children: [
+                /* @__PURE__ */ jsx89("div", { css: modalHeaderHeaderStyles, children: header }),
+                /* @__PURE__ */ jsx89(
+                  Button,
+                  {
+                    type: "button",
+                    onClick: onRequestClose,
+                    css: modalCloseButtonStyles,
+                    title: "Close dialog",
+                    buttonType: "ghost",
+                    "data-testid": "close-dialog",
+                    children: /* @__PURE__ */ jsx89(Icon, { icon: CgClose5, iconColor: "gray", size: 24 })
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx89("div", { css: [modalContentStyles, !withoutContentPadding ? null : { padding: 0 }], children }),
+              buttonGroup ? /* @__PURE__ */ jsx89(HorizontalRhythm, { children: buttonGroup }) : null
+            ]
+          }
+        )
       }
     );
   }
@@ -16527,7 +16525,7 @@ var input2 = css76`
   appearance: none;
   box-sizing: border-box;
   background: var(--white);
-  border: 1px solid var(--white);
+  border: 1px solid var(--gray-200);
   border-radius: var(--rounded-sm);
   color: var(--gray-700);
   font-size: var(--fs-sm);
@@ -16548,11 +16546,15 @@ var input2 = css76`
   &:focus,
   &:focus-within {
     border-radius: var(--rounded-md);
-    box-shadow: none;
-    border: 1px solid var(--gray-300);
+    box-shadow: var(--elevation-100);
+    border: 1px solid var(--accent-dark-active);
     outline: none;
   }
 
+  &:hover {
+    border: 1px solid var(--accent-dark-hover);
+  }
+
   &:disabled,
   &:disabled::placeholder,
   &:disabled:hover {
@@ -16595,7 +16597,6 @@ var inputIcon2 = css76`
 `;
 var inputToggleLabel2 = css76`
   align-items: center;
-  background: var(--white);
   cursor: pointer;
   display: inline-flex;
   gap: var(--spacing-sm);
@@ -16606,10 +16607,10 @@ var inputToggleLabel2 = css76`
 `;
 var toggleInput2 = css76`
   appearance: none;
-  border: 1px solid var(--gray-300);
+  border: 1px solid var(--gray-200);
   background: var(--white);
-  width: var(--spacing-md);
-  height: var(--spacing-md);
+  width: var(--spacing-base);
+  height: var(--spacing-base);
   transition: background var(--duration-fast) var(--timing-ease-out),
     border-color var(--duration-fast) var(--timing-ease-out),
     color var(--duration-fast) var(--timing-ease-out);
@@ -16624,19 +16625,23 @@ var toggleInput2 = css76`
   }
 
   &:where([type='checkbox']) {
-    border-radius: var(--rounded-md);
+    border-radius: var(--rounded-sm);
   }
 
   &:checked,
   &:checked:hover,
   &:checked:focus {
-    background: var(--brand-secondary-3)
-      url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%0A%3E%3Cpath d='M10.5858 13.4142L7.75735 10.5858L6.34314 12L10.5858 16.2427L17.6568 9.1716L16.2426 7.75739L10.5858 13.4142Z' fill='%23fff' /%3E%3C/svg%3E")
+    background: var(--accent-dark-active)
+      url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%0A%3E%3Cpath d='M10.5858 13.4142L7.75735 10.5858L6.34314 12L10.5858 16.2427L17.6568 9.1716L16.2426 7.75739L10.5858 13.4142Z' fill='%23fff' /%3E%3C/svg%3E")
       no-repeat center center;
-    border-color: var(--brand-secondary-3);
+    border-color: var(--accent-dark-active);
     color: var(--white);
   }
 
+  &:hover {
+    border-color: var(--accent-dark-hover);
+  }
+
   &:disabled {
     cursor: not-allowed;
     color: var(--gray-400);
@@ -16644,7 +16649,7 @@ var toggleInput2 = css76`
   }
 `;
 var inlineLabel2 = css76`
-  padding-left: var(--spacing-lg);
+  padding-left: var(--spacing-md);
   font-size: var(--fs-sm);
   font-weight: var(--fw-regular);
   translate: 0 1px; // brings the span into central alignment
@@ -16689,9 +16694,9 @@ var dataConnectButton = css76`
   appearance: none;
   box-sizing: border-box;
   background-color: var(--white);
-  border: 1px solid var(--brand-secondary-3);
+  border: 1px solid var(--primary-action-default);
   border-radius: var(--rounded-md);
-  color: var(--brand-secondary-3);
+  color: var(--primary-action-default);
   display: flex;
   padding: var(--spacing-sm);
   position: relative;
@@ -16983,9 +16988,7 @@ var ParameterMenuButton = forwardRef12(
 import { css as css80 } from "@emotion/react";
 var emptyParameterShell = css80`
   border-radius: var(--rounded-sm);
-  background: var(--white);
   flex-grow: 1;
-  padding: var(--spacing-xs);
   position: relative;
   max-width: 100%;
 `;
@@ -18769,20 +18772,20 @@ var editorPlaceholder = css85`
 `;
 var editorInput = css85`
   background: var(--white);
-  border: 1px solid var(--white);
+  border: 1px solid var(--gray-200);
   border-radius: var(--rounded-sm);
   color: var(--gray-900);
   flex-grow: 1;
   font-size: var(--fs-base);
   line-height: 1.2;
   min-height: 2rem;
-  padding: var(--spacing-xs) var(--spacing-sm);
+  padding: var(--spacing-sm);
 
   &:focus,
   &:focus-within {
     border-radius: var(--rounded-md);
-    box-shadow: none;
-    border: 1px solid var(--gray-300);
+    box-shadow: var(--elevation-100);
+    border: 1px solid var(--accent-dark-hover);
     outline: none;
   }
 `;
@@ -18908,6 +18911,9 @@ var RichText = ({
       removeUpdateListener();
     };
   }, [editor, onChange]);
+  useEffect15(() => {
+    editor.setEditable(!readOnly);
+  }, [editor, readOnly]);
   return /* @__PURE__ */ jsxs71(Fragment18, { children: [
     readOnly ? null : /* @__PURE__ */ jsx106(RichTextToolbar_default, { config, customControls }),
     /* @__PURE__ */ jsxs71("div", { css: editorContainer, ref: editorContainerRef, "data-testid": "value-container", children: [

package/dist/index.js

@@ -17996,14 +17996,6 @@ var import_react99 = __toESM(require("react"));
 // src/components/Modal/Modal.styles.ts
 init_emotion_jsx_shim();
 var import_react98 = require("@emotion/react");
-var modalWrapperStyles = import_react98.css`
-  position: fixed;
-  inset: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: var(--z-drawer);
-`;
 var modalStyles = import_react98.css`
   position: relative;
   max-width: calc(100% - var(--spacing-base) * 2);
@@ -18020,7 +18012,6 @@ var modalStyles = import_react98.css`
 var modalInnerStyles = import_react98.css`
   position: relative;
   width: 100%;
-  height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: stretch;
@@ -18114,25 +18105,32 @@ var Modal = import_react99.default.forwardRef(
           e.preventDefault();
         },
         ...modalProps,
-        children: /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", { css: modalInnerStyles, onClick: (e) => e.stopPropagation(), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", { css: modalHeaderStyles, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("div", { css: modalHeaderHeaderStyles, children: header }),
-            /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
-              Button,
-              {
-                type: "button",
-                onClick: onRequestClose,
-                css: modalCloseButtonStyles,
-                title: "Close dialog",
-                buttonType: "ghost",
-                "data-testid": "close-dialog",
-                children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(Icon, { icon: import_CgClose6.CgClose, iconColor: "gray", size: 24 })
-              }
-            )
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("div", { css: [modalContentStyles, !withoutContentPadding ? null : { padding: 0 }], children }),
-          buttonGroup ? /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(HorizontalRhythm, { children: buttonGroup }) : null
-        ] })
+        children: /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(
+          "div",
+          {
+            css: [modalInnerStyles, { height: height === "auto" ? "auto" : "100%" }],
+            onClick: (e) => e.stopPropagation(),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", { css: modalHeaderStyles, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("div", { css: modalHeaderHeaderStyles, children: header }),
+                /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+                  Button,
+                  {
+                    type: "button",
+                    onClick: onRequestClose,
+                    css: modalCloseButtonStyles,
+                    title: "Close dialog",
+                    buttonType: "ghost",
+                    "data-testid": "close-dialog",
+                    children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(Icon, { icon: import_CgClose6.CgClose, iconColor: "gray", size: 24 })
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("div", { css: [modalContentStyles, !withoutContentPadding ? null : { padding: 0 }], children }),
+              buttonGroup ? /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(HorizontalRhythm, { children: buttonGroup }) : null
+            ]
+          }
+        )
       }
     );
   }
@@ -18332,7 +18330,7 @@ var input2 = import_react102.css`
   appearance: none;
   box-sizing: border-box;
   background: var(--white);
-  border: 1px solid var(--white);
+  border: 1px solid var(--gray-200);
   border-radius: var(--rounded-sm);
   color: var(--gray-700);
   font-size: var(--fs-sm);
@@ -18353,11 +18351,15 @@ var input2 = import_react102.css`
   &:focus,
   &:focus-within {
     border-radius: var(--rounded-md);
-    box-shadow: none;
-    border: 1px solid var(--gray-300);
+    box-shadow: var(--elevation-100);
+    border: 1px solid var(--accent-dark-active);
     outline: none;
   }
 
+  &:hover {
+    border: 1px solid var(--accent-dark-hover);
+  }
+
   &:disabled,
   &:disabled::placeholder,
   &:disabled:hover {
@@ -18400,7 +18402,6 @@ var inputIcon2 = import_react102.css`
 `;
 var inputToggleLabel2 = import_react102.css`
   align-items: center;
-  background: var(--white);
   cursor: pointer;
   display: inline-flex;
   gap: var(--spacing-sm);
@@ -18411,10 +18412,10 @@ var inputToggleLabel2 = import_react102.css`
 `;
 var toggleInput2 = import_react102.css`
   appearance: none;
-  border: 1px solid var(--gray-300);
+  border: 1px solid var(--gray-200);
   background: var(--white);
-  width: var(--spacing-md);
-  height: var(--spacing-md);
+  width: var(--spacing-base);
+  height: var(--spacing-base);
   transition: background var(--duration-fast) var(--timing-ease-out),
     border-color var(--duration-fast) var(--timing-ease-out),
     color var(--duration-fast) var(--timing-ease-out);
@@ -18429,19 +18430,23 @@ var toggleInput2 = import_react102.css`
   }
 
   &:where([type='checkbox']) {
-    border-radius: var(--rounded-md);
+    border-radius: var(--rounded-sm);
   }
 
   &:checked,
   &:checked:hover,
   &:checked:focus {
-    background: var(--brand-secondary-3)
-      url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%0A%3E%3Cpath d='M10.5858 13.4142L7.75735 10.5858L6.34314 12L10.5858 16.2427L17.6568 9.1716L16.2426 7.75739L10.5858 13.4142Z' fill='%23fff' /%3E%3C/svg%3E")
+    background: var(--accent-dark-active)
+      url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%0A%3E%3Cpath d='M10.5858 13.4142L7.75735 10.5858L6.34314 12L10.5858 16.2427L17.6568 9.1716L16.2426 7.75739L10.5858 13.4142Z' fill='%23fff' /%3E%3C/svg%3E")
       no-repeat center center;
-    border-color: var(--brand-secondary-3);
+    border-color: var(--accent-dark-active);
     color: var(--white);
   }
 
+  &:hover {
+    border-color: var(--accent-dark-hover);
+  }
+
   &:disabled {
     cursor: not-allowed;
     color: var(--gray-400);
@@ -18449,7 +18454,7 @@ var toggleInput2 = import_react102.css`
   }
 `;
 var inlineLabel2 = import_react102.css`
-  padding-left: var(--spacing-lg);
+  padding-left: var(--spacing-md);
   font-size: var(--fs-sm);
   font-weight: var(--fw-regular);
   translate: 0 1px; // brings the span into central alignment
@@ -18494,9 +18499,9 @@ var dataConnectButton = import_react102.css`
   appearance: none;
   box-sizing: border-box;
   background-color: var(--white);
-  border: 1px solid var(--brand-secondary-3);
+  border: 1px solid var(--primary-action-default);
   border-radius: var(--rounded-md);
-  color: var(--brand-secondary-3);
+  color: var(--primary-action-default);
   display: flex;
   padding: var(--spacing-sm);
   position: relative;
@@ -18801,9 +18806,7 @@ init_emotion_jsx_shim();
 var import_react109 = require("@emotion/react");
 var emptyParameterShell = import_react109.css`
   border-radius: var(--rounded-sm);
-  background: var(--white);
   flex-grow: 1;
-  padding: var(--spacing-xs);
   position: relative;
   max-width: 100%;
 `;
@@ -20562,20 +20565,20 @@ var editorPlaceholder = import_react121.css`
 `;
 var editorInput = import_react121.css`
   background: var(--white);
-  border: 1px solid var(--white);
+  border: 1px solid var(--gray-200);
   border-radius: var(--rounded-sm);
   color: var(--gray-900);
   flex-grow: 1;
   font-size: var(--fs-base);
   line-height: 1.2;
   min-height: 2rem;
-  padding: var(--spacing-xs) var(--spacing-sm);
+  padding: var(--spacing-sm);
 
   &:focus,
   &:focus-within {
     border-radius: var(--rounded-md);
-    box-shadow: none;
-    border: 1px solid var(--gray-300);
+    box-shadow: var(--elevation-100);
+    border: 1px solid var(--accent-dark-hover);
     outline: none;
   }
 `;
@@ -20701,6 +20704,9 @@ var RichText = ({
       removeUpdateListener();
     };
   }, [editor, onChange]);
+  (0, import_react122.useEffect)(() => {
+    editor.setEditable(!readOnly);
+  }, [editor, readOnly]);
   return /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)(import_jsx_runtime106.Fragment, { children: [
     readOnly ? null : /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(RichTextToolbar_default, { config, customControls }),
     /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("div", { css: editorContainer, ref: editorContainerRef, "data-testid": "value-container", children: [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/design-system",
-  "version": "19.92.3",
+  "version": "19.95.0",
   "description": "Uniform design system components",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "./dist/index.js",
@@ -23,8 +23,8 @@
     "@storybook/react": "6.5.16",
     "@types/react": "18.2.40",
     "@types/react-dom": "18.2.17",
-    "@uniformdev/canvas": "^19.92.3",
-    "@uniformdev/richtext": "^19.92.3",
+    "@uniformdev/canvas": "^19.95.0",
+    "@uniformdev/richtext": "^19.95.0",
     "autoprefixer": "10.4.16",
     "hygen": "6.2.11",
     "postcss": "8.4.32",
@@ -67,5 +67,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "7eeadbc2ffc4a2808ddbe8ef9258ae46504cec91"
+  "gitHead": "3e3fb19655bb28c5452cb98418d8c87bef0f853a"
 }