@team-monolith/cds 1.121.0 → 1.121.1

package/dist/patterns/LexicalEditor/plugins/FloatingTextFormatToolbarPlugin/FloatingTextFormatPopup.js

@@ -19,41 +19,41 @@ export const FloatingTextFormatPopup = forwardRef(function FloatingTextFormatPop
                         editor.dispatchCommand(FORMAT_TEXT_COMMAND, "code");
                     }, active: Boolean(isCode), "aria-label": "Insert code block", children: _jsx(CodeFillIcon, {}) }), _jsx(IconButton, { type: "button", onClick: insertLink, active: Boolean(isLink), "aria-label": "Insert link", children: _jsx(LinkIcon, {}) })] })) }));
 });
-const Container = styled.div `
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 10;
-  will-change: transform;
-
-  display: inline-flex;
-  padding: 0px 4px;
-  align-items: flex-start;
-  gap: 4px;
-
-  border-radius: 8px;
-  border: 1px solid #e8e8eb;
-  background: ${({ theme }) => theme.color.background.neutralBase};
-  box-shadow: 0px 3px 15px -3px rgba(13, 20, 33, 0.13);
+const Container = styled.div `
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 10;
+  will-change: transform;
+
+  display: inline-flex;
+  padding: 0px 4px;
+  align-items: flex-start;
+  gap: 4px;
+
+  border-radius: 8px;
+  border: 1px solid #e8e8eb;
+  background: ${({ theme }) => theme.color.background.neutralBase};
+  box-shadow: 0px 3px 15px -3px rgba(13, 20, 33, 0.13);
 `;
-const IconButton = styled.button `
-  border: none;
-  outline: none;
-
-  display: flex;
-  padding: 8px 4px;
-  align-items: center;
-  gap: 4px;
-
-  background: #fff;
-
-  svg {
-    width: 18px;
-    height: 18px;
-    ${({ theme, active }) => active && `color: ${theme.color.foreground.primary};`}
-  }
-
-  &:hover {
-    background: ${({ theme }) => theme.color.background.neutralAlt};
-  }
+const IconButton = styled.button `
+  border: none;
+  outline: none;
+
+  display: flex;
+  padding: 8px 4px;
+  align-items: center;
+  gap: 4px;
+
+  background: #fff;
+
+  svg {
+    width: 18px;
+    height: 18px;
+    ${({ theme, active }) => active && `color: ${theme.color.foreground.primary};`}
+  }
+
+  &:hover {
+    background: ${({ theme }) => theme.color.background.neutralAlt};
+  }
 `;

package/dist/patterns/LexicalEditor/plugins/ParagraphPlaceholderPlugin/index.js

@@ -3,13 +3,13 @@ import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext
 import { $getSelection, $isParagraphNode, $isRangeSelection } from "lexical";
 import { css as cssToClassName } from "@emotion/css";
 import { useTheme } from "@emotion/react";
-const getPlaceholderClassName = (theme) => cssToClassName `
-  &::before {
-    position: absolute;
-    content: attr(data-placeholder);
-    color: ${theme.color.foreground.neutralBaseDisabled};
-    pointer-events: none;
-  }
+const getPlaceholderClassName = (theme) => cssToClassName `
+  &::before {
+    position: absolute;
+    content: attr(data-placeholder);
+    color: ${theme.color.foreground.neutralBaseDisabled};
+    pointer-events: none;
+  }
 `;
 export const ParagraphPlaceholderPlugin = ({ placeholder, }) => {
     const [editor] = useLexicalComposerContext();

package/dist/patterns/LexicalEditor/theme.js

@@ -1,297 +1,297 @@
 import { css } from "@emotion/css";
 export function getTheme(theme, editable) {
     return {
-        paragraph: css `
-      color: ${theme.color.foreground.neutralBase};
-
-      /* Default/Paragraph/16px-Rg */
-      font-family: ${theme.fontFamily.ui};
-      font-size: 16px;
-      font-style: normal;
-      font-weight: 400;
-      line-height: 24px; /* 150% */
+        paragraph: css `
+      color: ${theme.color.foreground.neutralBase};
+
+      /* Default/Paragraph/16px-Rg */
+      font-family: ${theme.fontFamily.ui};
+      font-size: 16px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 24px; /* 150% */
     `,
-        quote: css `
-      color: ${theme.color.container.marbleOnContainer};
-
-      /* Default/Paragraph/14px-Rg */
-      font-family: ${theme.fontFamily.ui};
-      font-size: 14px;
-      font-style: normal;
-      font-weight: 400;
-      line-height: 20px; /* 142.857% */
-
-      margin: 16px 0;
-      padding-left: 12px;
-      border-left: 4px solid ${theme.color.container.marbleContainer};
+        quote: css `
+      color: ${theme.color.container.marbleOnContainer};
+
+      /* Default/Paragraph/14px-Rg */
+      font-family: ${theme.fontFamily.ui};
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 20px; /* 142.857% */
+
+      margin: 16px 0;
+      padding-left: 12px;
+      border-left: 4px solid ${theme.color.container.marbleContainer};
     `,
         coloredQuote: {
-            grey: css `
-        color: ${theme.color.container.marbleOnContainer};
-
-        /* Default/Paragraph/14px-Rg */
-        font-family: ${theme.fontFamily.ui};
-        font-size: 14px;
-        font-style: normal;
-        font-weight: 400;
-        line-height: 20px; /* 142.857% */
-
-        margin: 16px 0;
-        padding-left: 12px;
-        border-left: 4px solid ${theme.color.container.marbleContainer};
+            grey: css `
+        color: ${theme.color.container.marbleOnContainer};
+
+        /* Default/Paragraph/14px-Rg */
+        font-family: ${theme.fontFamily.ui};
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 20px; /* 142.857% */
+
+        margin: 16px 0;
+        padding-left: 12px;
+        border-left: 4px solid ${theme.color.container.marbleContainer};
       `,
-            red: css `
-        color: ${theme.color.container.redOnContainer};
-
-        /* Default/Paragraph/14px-Rg */
-        font-family: ${theme.fontFamily.ui};
-        font-size: 14px;
-        font-style: normal;
-        font-weight: 400;
-        line-height: 20px; /* 142.857% */
-
-        margin: 16px 0;
-        padding-left: 12px;
-        border-left: 4px solid ${theme.color.container.redContainer};
+            red: css `
+        color: ${theme.color.container.redOnContainer};
+
+        /* Default/Paragraph/14px-Rg */
+        font-family: ${theme.fontFamily.ui};
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 20px; /* 142.857% */
+
+        margin: 16px 0;
+        padding-left: 12px;
+        border-left: 4px solid ${theme.color.container.redContainer};
       `,
-            yellow: css `
-        color: ${theme.color.container.yellowOnContainer};
-
-        /* Default/Paragraph/14px-Rg */
-        font-family: ${theme.fontFamily.ui};
-        font-size: 14px;
-        font-style: normal;
-        font-weight: 400;
-        line-height: 20px; /* 142.857% */
-
-        margin: 16px 0;
-        padding-left: 12px;
-        border-left: 4px solid ${theme.color.container.yellowContainer};
+            yellow: css `
+        color: ${theme.color.container.yellowOnContainer};
+
+        /* Default/Paragraph/14px-Rg */
+        font-family: ${theme.fontFamily.ui};
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 20px; /* 142.857% */
+
+        margin: 16px 0;
+        padding-left: 12px;
+        border-left: 4px solid ${theme.color.container.yellowContainer};
       `,
-            blue: css `
-        color: ${theme.color.container.blueOnContainer};
-
-        /* Default/Paragraph/14px-Rg */
-        font-family: ${theme.fontFamily.ui};
-        font-size: 14px;
-        font-style: normal;
-        font-weight: 400;
-        line-height: 20px; /* 142.857% */
-
-        margin: 16px 0;
-        padding-left: 12px;
-        border-left: 4px solid ${theme.color.container.blueContainer};
+            blue: css `
+        color: ${theme.color.container.blueOnContainer};
+
+        /* Default/Paragraph/14px-Rg */
+        font-family: ${theme.fontFamily.ui};
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 20px; /* 142.857% */
+
+        margin: 16px 0;
+        padding-left: 12px;
+        border-left: 4px solid ${theme.color.container.blueContainer};
       `,
-            green: css `
-        color: ${theme.color.container.greenOnContainer};
-
-        /* Default/Paragraph/14px-Rg */
-        font-family: ${theme.fontFamily.ui};
-        font-size: 14px;
-        font-style: normal;
-        font-weight: 400;
-        line-height: 20px; /* 142.857% */
-
-        margin: 16px 0;
-        padding-left: 12px;
-        border-left: 4px solid ${theme.color.container.greenContainer};
+            green: css `
+        color: ${theme.color.container.greenOnContainer};
+
+        /* Default/Paragraph/14px-Rg */
+        font-family: ${theme.fontFamily.ui};
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 20px; /* 142.857% */
+
+        margin: 16px 0;
+        padding-left: 12px;
+        border-left: 4px solid ${theme.color.container.greenContainer};
       `,
         },
         heading: {
-            h1: css `
-        color: ${theme.color.foreground.neutralBase};
-
-        /* Alt/Heading/32px-Hv */
-        font-family: ${theme.fontFamily.title};
-        font-size: 32px;
-        font-style: normal;
-        font-weight: 900;
-        line-height: 40px; /* 125% */
+            h1: css `
+        color: ${theme.color.foreground.neutralBase};
+
+        /* Alt/Heading/32px-Hv */
+        font-family: ${theme.fontFamily.title};
+        font-size: 32px;
+        font-style: normal;
+        font-weight: 900;
+        line-height: 40px; /* 125% */
       `,
-            h2: css `
-        color: ${theme.color.foreground.neutralBase};
-
-        /* Default/Heading/24px-Bd */
-        font-family: ${theme.fontFamily.ui};
-        font-size: 24px;
-        font-style: normal;
-        font-weight: 700;
-        line-height: 32px; /* 133.333% */
+            h2: css `
+        color: ${theme.color.foreground.neutralBase};
+
+        /* Default/Heading/24px-Bd */
+        font-family: ${theme.fontFamily.ui};
+        font-size: 24px;
+        font-style: normal;
+        font-weight: 700;
+        line-height: 32px; /* 133.333% */
       `,
-            h3: css `
-        color: ${theme.color.foreground.neutralBase};
-
-        /* Default/Paragraph/18px-Bd */
-        font-family: ${theme.fontFamily.ui};
-        font-size: 18px;
-        font-style: normal;
-        font-weight: 700;
-        line-height: 28px; /* 155.556% */
+            h3: css `
+        color: ${theme.color.foreground.neutralBase};
+
+        /* Default/Paragraph/18px-Bd */
+        font-family: ${theme.fontFamily.ui};
+        font-size: 18px;
+        font-style: normal;
+        font-weight: 700;
+        line-height: 28px; /* 155.556% */
       `,
         },
-        link: css `
-      color: ${theme.color.foreground.primary};
-      text-decoration: underline;
-      cursor: pointer;
+        link: css `
+      color: ${theme.color.foreground.primary};
+      text-decoration: underline;
+      cursor: pointer;
     `,
         list: {
             nested: {
-                listitem: css `
-          list-style-type: none;
-          &::before,
-          &::after {
-            display: none;
-          }
+                listitem: css `
+          list-style-type: none;
+          &::before,
+          &::after {
+            display: none;
+          }
         `,
             },
             olDepth: [
-                css `
-          padding: 0;
-          margin: 16px 0;
-          list-style-position: inside;
+                css `
+          padding: 0;
+          margin: 16px 0;
+          list-style-position: inside;
         `,
-                css `
-          padding: 0;
-          margin: 0;
-          list-style-type: upper-alpha;
-          list-style-position: inside;
+                css `
+          padding: 0;
+          margin: 0;
+          list-style-type: upper-alpha;
+          list-style-position: inside;
         `,
-                css `
-          padding: 0;
-          margin: 0;
-          list-style-type: lower-alpha;
-          list-style-position: inside;
+                css `
+          padding: 0;
+          margin: 0;
+          list-style-type: lower-alpha;
+          list-style-position: inside;
         `,
-                css `
-          padding: 0;
-          margin: 0;
-          list-style-type: upper-roman;
-          list-style-position: inside;
+                css `
+          padding: 0;
+          margin: 0;
+          list-style-type: upper-roman;
+          list-style-position: inside;
         `,
-                css `
-          padding: 0;
-          margin: 0;
-          list-style-type: lower-roman;
-          list-style-position: inside;
+                css `
+          padding: 0;
+          margin: 0;
+          list-style-type: lower-roman;
+          list-style-position: inside;
         `,
             ],
             ulDepth: [
-                css `
-          padding: 0;
-          margin: 16px 0;
-          list-style-position: inside;
+                css `
+          padding: 0;
+          margin: 16px 0;
+          list-style-position: inside;
         `,
-                css `
-          padding: 0;
-          margin: 0;
-          list-style-position: inside;
+                css `
+          padding: 0;
+          margin: 0;
+          list-style-position: inside;
         `,
-                css `
-          padding: 0;
-          margin: 0;
-          list-style-position: inside;
+                css `
+          padding: 0;
+          margin: 0;
+          list-style-position: inside;
         `,
-                css `
-          padding: 0;
-          margin: 0;
-          list-style-position: inside;
+                css `
+          padding: 0;
+          margin: 0;
+          list-style-position: inside;
         `,
-                css `
-          padding: 0;
-          margin: 0;
-          list-style-position: inside;
+                css `
+          padding: 0;
+          margin: 0;
+          list-style-position: inside;
         `,
             ],
-            listitem: css `
-        margin: 0 24px;
-
-        color: ${theme.color.foreground.neutralBase};
-
-        /* Default/Paragraph/16px-Rg */
-        font-family: ${theme.fontFamily.ui};
-        font-size: 16px;
-        font-style: normal;
-        font-weight: 400;
-        line-height: 24px; /* 150% */
+            listitem: css `
+        margin: 0 24px;
+
+        color: ${theme.color.foreground.neutralBase};
+
+        /* Default/Paragraph/16px-Rg */
+        font-family: ${theme.fontFamily.ui};
+        font-size: 16px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 24px; /* 150% */
       `,
         },
-        code: css `
-      margin: 16px 0;
-
-      display: block;
-      padding: 4px 8px;
-      border-radius: 6px;
-      background: ${theme.color.background.neutralAlt};
-
-      color: ${theme.color.foreground.neutralBase};
-
-      /* Mono/Paragraph/14px-Rg */
-      font-family: ${theme.fontFamily.code}, consolas, monospace;
-      font-size: 14px;
-      font-style: normal;
-      font-weight: 400;
-      line-height: 20px; /* 142.857% */
+        code: css `
+      margin: 16px 0;
+
+      display: block;
+      padding: 4px 8px;
+      border-radius: 6px;
+      background: ${theme.color.background.neutralAlt};
+
+      color: ${theme.color.foreground.neutralBase};
+
+      /* Mono/Paragraph/14px-Rg */
+      font-family: ${theme.fontFamily.code}, consolas, monospace;
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 20px; /* 142.857% */
     `,
         text: {
-            code: css `
-        padding: 4px 8px;
-        border-radius: 6px;
-        background: ${theme.color.background.neutralAlt};
-
-        color: ${theme.color.foreground.neutralBase};
-        /* Mono/Paragraph/14px-Rg */
-        font-family: ${theme.fontFamily.code}, consolas, monospace;
+            code: css `
+        padding: 4px 8px;
+        border-radius: 6px;
+        background: ${theme.color.background.neutralAlt};
+
+        color: ${theme.color.foreground.neutralBase};
+        /* Mono/Paragraph/14px-Rg */
+        font-family: ${theme.fontFamily.code}, consolas, monospace;
       `,
-            underline: css `
-        text-decoration: underline;
+            underline: css `
+        text-decoration: underline;
       `,
-            strikethrough: css `
-        text-decoration: line-through;
+            strikethrough: css `
+        text-decoration: line-through;
       `,
         },
-        problemInput: css `
-      display: flex;
-      flex-direction: column;
-      flex: 1;
-      gap: 4px;
-      margin-bottom: 8px;
+        problemInput: css `
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+      gap: 4px;
+      margin-bottom: 8px;
     `,
-        problemSelect: css `
-      display: flex;
-      flex-direction: column;
-      flex: 1;
-      gap: 4px;
-      margin-bottom: 8px;
+        problemSelect: css `
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+      gap: 4px;
+      margin-bottom: 8px;
     `,
-        sheetSelect: css `
-      display: flex;
-      flex-direction: column;
-      flex: 1;
-      gap: 4px;
-      margin-bottom: 8px;
+        sheetSelect: css `
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+      gap: 4px;
+      margin-bottom: 8px;
     `,
-        sheetInput: css `
-      display: flex;
-      flex-direction: column;
-      flex: 1;
-      gap: 4px;
-      margin-bottom: 8px;
+        sheetInput: css `
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+      gap: 4px;
+      margin-bottom: 8px;
     `,
-        layoutContainer: css `
-      display: grid;
-      gap: 24px;
+        layoutContainer: css `
+      display: grid;
+      gap: 24px;
     `,
         layoutItem: editable &&
-            css `
-        border: 1px dashed ${theme.color.background.neutralAltActive};
-        overflow: auto;
+            css `
+        border: 1px dashed ${theme.color.background.neutralAltActive};
+        overflow: auto;
       `,
-        selfEvaluation: css `
-      display: flex;
-      flex-direction: column;
-      flex: 1;
-      gap: 4px;
-      margin-bottom: 8px;
+        selfEvaluation: css `
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+      gap: 4px;
+      margin-bottom: 8px;
     `,
     };
 }

package/dist/patterns/SegmentedControl/SegmentedControlButton.js

@@ -48,15 +48,15 @@ export const SegmentedControlButton = React.forwardRef(function SegmentedControl
 });
 const StyledButton = styled(Button, {
     shouldForwardProp: (prop) => prop !== "isActive",
-})(({ isActive }) => css `
-    display: flex;
-    justify-content: center;
-    flex-grow: 1;
+})(({ isActive }) => css `
+    display: flex;
+    justify-content: center;
+    flex-grow: 1;
     ${isActive &&
-    `
-      box-shadow: ${shadows.shadow04};
-      span {
-        font-weight: 700;
-      }
-    `}
+    `
+      box-shadow: ${shadows.shadow04};
+      span {
+        font-weight: 700;
+      }
+    `}
   `);