@team-monolith/cds 1.122.6 → 1.123.1

package/dist/patterns/LexicalEditor/nodes/SheetSelectNode/SelectComponent/SettingForm/SettingForm.js

@@ -58,9 +58,9 @@ export function SettingForm(props) {
             return true;
         return getTexts(t, "errorDuplicateChoice")(duplicatedIndexes.map((i) => i + 1).join(","));
     }
-    return (_jsxs(Form, { onSubmit: handleSubmit(onSettingSubmit), children: [_jsxs(Title, { children: [_jsx(ListRadioIcon, { css: css `
-            width: 12px;
-            height: 12px;
+    return (_jsxs(Form, { onSubmit: handleSubmit(onSettingSubmit), children: [_jsxs(Title, { children: [_jsx(ListRadioIcon, { css: css `
+            width: 12px;
+            height: 12px;
           ` }), t("선택형 입력 칸", { context: "렉시컬 도구 설정창" })] }), _jsxs(Content, { children: [_jsxs(Left, { children: [_jsxs(FormArea, { children: [_jsx(Label, { children: t("선택지") }), fields.map((field, index) => (_jsx(FormSelection, { index: index, control: control, rules: {
                                             validate: {
                                                 validateRequired,
@@ -82,82 +82,82 @@ export function SettingForm(props) {
                                         },
                                         value: uid(),
                                     });
-                                }, disabled: fields.length >= 9 })] }), _jsxs(Right, { children: [_jsxs(FormArea, { children: [_jsx(Label, { children: t("다중 선택 허용 여부") }), _jsx(FormAllowMultipleAnswers, { control: control })] }), watch("allowMultipleAnswers") && (_jsxs(Alert, { children: [_jsx(AlarmWarningFillIcon, { css: css `
-                  min-width: 14px;
-                  width: 14px;
-                  height: 14px;
+                                }, disabled: fields.length >= 9 })] }), _jsxs(Right, { children: [_jsxs(FormArea, { children: [_jsx(Label, { children: t("다중 선택 허용 여부") }), _jsx(FormAllowMultipleAnswers, { control: control })] }), watch("allowMultipleAnswers") && (_jsxs(Alert, { children: [_jsx(AlarmWarningFillIcon, { css: css `
+                  min-width: 14px;
+                  width: 14px;
+                  height: 14px;
                 ` }), t("다중 선택을 허용한 문제에는 여러 선택지를 고를 수 있다는 안내가 제공됩니다.")] }))] })] }), _jsxs(Buttons, { children: [_jsx(Button, { color: "grey", size: "xsmall", label: t("닫기", { context: "렉시컬 도구 설정창" }), onClick: onClose }), _jsx(Button, { color: "primary", size: "xsmall", label: t("이대로 넣기", { context: "렉시컬 도구 설정창" }), bold: true, type: "submit" })] })] }));
 }
-const Form = styled.form(({ theme }) => css `
-    display: flex;
-    width: 620px;
-    flex-direction: column;
-    border-radius: 6px;
-    border: 1px solid ${theme.color.background.neutralAltActive};
-    background: ${theme.color.background.neutralBase};
-    box-shadow: ${shadows.shadow08};
+const Form = styled.form(({ theme }) => css `
+    display: flex;
+    width: 620px;
+    flex-direction: column;
+    border-radius: 6px;
+    border: 1px solid ${theme.color.background.neutralAltActive};
+    background: ${theme.color.background.neutralBase};
+    box-shadow: ${shadows.shadow08};
   `);
-const Title = styled.div(({ theme }) => css `
-    display: flex;
-    padding: 8px 12px;
-    gap: 4px;
-    align-items: center;
-    color: ${theme.color.foreground.neutralBase};
-    /* Default/Label/12px-Md */
-    font-family: ${theme.fontFamily.ui};
-    font-size: 12px;
-    font-style: normal;
-    font-weight: 500;
-    line-height: 16px; /* 133.333% */
+const Title = styled.div(({ theme }) => css `
+    display: flex;
+    padding: 8px 12px;
+    gap: 4px;
+    align-items: center;
+    color: ${theme.color.foreground.neutralBase};
+    /* Default/Label/12px-Md */
+    font-family: ${theme.fontFamily.ui};
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 16px; /* 133.333% */
   `);
-const Content = styled.div(({ theme }) => css `
-    display: flex;
-    border-top: 1px solid ${theme.color.background.neutralAltActive};
-    border-bottom: 1px solid ${theme.color.background.neutralAltActive};
+const Content = styled.div(({ theme }) => css `
+    display: flex;
+    border-top: 1px solid ${theme.color.background.neutralAltActive};
+    border-bottom: 1px solid ${theme.color.background.neutralAltActive};
   `);
-const Left = styled.div `
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  padding: 12px;
+const Left = styled.div `
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 12px;
 `;
-const Right = styled.div `
-  width: 240px;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  padding: 12px;
+const Right = styled.div `
+  width: 240px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 12px;
 `;
-const FormArea = styled.div `
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
+const FormArea = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
 `;
-const Label = styled.div(({ theme }) => css `
-    color: ${theme.color.foreground.neutralBaseDisabled};
-    /* Default/Label/12px-Md */
-    font-family: ${theme.fontFamily.ui};
-    font-size: 12px;
-    font-style: normal;
-    font-weight: 500;
-    line-height: 16px; /* 133.333% */
+const Label = styled.div(({ theme }) => css `
+    color: ${theme.color.foreground.neutralBaseDisabled};
+    /* Default/Label/12px-Md */
+    font-family: ${theme.fontFamily.ui};
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 16px; /* 133.333% */
   `);
-const Buttons = styled.div `
-  display: flex;
-  padding: 12px;
-  justify-content: flex-end;
-  align-items: center;
-  gap: 8px;
+const Buttons = styled.div `
+  display: flex;
+  padding: 12px;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 8px;
 `;
-const Alert = styled.div(({ theme }) => css `
-    display: flex;
-    gap: 4px;
-    color: ${theme.color.foreground.neutralBaseDisabled};
-    /* Default/Label/12px-Md */
-    font-family: ${theme.fontFamily.ui};
-    font-size: 12px;
-    font-style: normal;
-    font-weight: 500;
-    line-height: 16px; /* 133.333% */
+const Alert = styled.div(({ theme }) => css `
+    display: flex;
+    gap: 4px;
+    color: ${theme.color.foreground.neutralBaseDisabled};
+    /* Default/Label/12px-Md */
+    font-family: ${theme.fontFamily.ui};
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 16px; /* 133.333% */
   `);

package/dist/patterns/LexicalEditor/nodes/VideoNode/VideoComponent.js

@@ -18,10 +18,10 @@ import { useTranslation } from "react-i18next";
  * @returns
  */
 function VideoPlayer(props) {
-    return (_jsx(ReactPlayer, { css: css `
-        background: black;
-        max-width: 1200px;
-        aspect-ratio: 16 / 9;
+    return (_jsx(ReactPlayer, { css: css `
+        background: black;
+        max-width: 1200px;
+        aspect-ratio: 16 / 9;
       `, width: "100%" // 기본값 640px. emotion css보다 우선 적용되어 prop으로 지정함.
         , height: "auto" // 기본값 360px. emotion css보다 우선 적용되어 prop으로 지정함.
         , url: props.url, controls: true, config: {
@@ -58,7 +58,7 @@ export function VideoComponent({ src, nodeKey, }) {
     }
     return (_jsxs(_Fragment, { children: [_jsxs(EditContainer, { children: [_jsx(VideoPlayer, { url: src }), _jsx(SquareButton, { size: "small", color: "icon", icon: _jsx(Settings3FillIcon, {}), onClick: () => setOpen(true), "aria-label": t("동영상 수정하기") })] }), _jsx(InsertVideoDialog, { open: open, title: t("동영상 수정하기"), onClose: () => setOpen(false), videoProps: { src }, onChange: handleChange, onDelete: handleDelete })] }));
 }
-const EditContainer = styled.div `
-  display: flex;
-  gap: 4px;
+const EditContainer = styled.div `
+  display: flex;
+  gap: 4px;
 `;

package/dist/patterns/LexicalEditor/plugins/ComponentAdderPlugin/ComponentAdder.js

@@ -9,59 +9,59 @@ export const ComponentAdder = forwardRef(function ComponentAdder(props, ref) {
     const [editor] = useLexicalComposerContext();
     return (_jsxs(Container, { ref: ref, className: className, children: [_jsx(PlusContainer, { onClick: onPlusClick, children: editor._editable && _jsx(PlusIcon, {}) }), _jsx(MenuContainer, { draggable: true, onClick: onMenuClick, onDragStart: onMenuDragStart, onDragEnd: onMenuDragEnd, children: editor._editable && _jsx(MenuIcon, {}) })] }));
 });
-const Container = styled.div `
-  display: flex;
-  align-items: flex-start;
-  gap: 3px;
-
-  position: absolute;
-  left: 0;
-  top: 0;
-  will-change: transform;
+const Container = styled.div `
+  display: flex;
+  align-items: flex-start;
+  gap: 3px;
+
+  position: absolute;
+  left: 0;
+  top: 0;
+  will-change: transform;
 `;
-const PlusContainer = styled.div `
-  display: flex;
-  width: 26px;
-  height: 26px;
-  justify-content: center;
-  align-items: center;
-  border-radius: 5px;
-  background: ${({ theme }) => theme.color.foreground.neutralAlt};
-
-  cursor: pointer;
-
-  &:hover {
-    background-color: #eff2f5;
-  }
+const PlusContainer = styled.div `
+  display: flex;
+  width: 26px;
+  height: 26px;
+  justify-content: center;
+  align-items: center;
+  border-radius: 5px;
+  background: ${({ theme }) => theme.color.foreground.neutralAlt};
+
+  cursor: pointer;
+
+  &:hover {
+    background-color: #eff2f5;
+  }
 `;
-const PlusIcon = styled.div `
-  width: 24px;
-  height: 24px;
-  // svg는 hover 이벤트를 path마다 받아서 불편함
-  // Lexical에서 동일한 접근법을 사용하고 있음
-  background-image: url(${plus});
+const PlusIcon = styled.div `
+  width: 24px;
+  height: 24px;
+  // svg는 hover 이벤트를 path마다 받아서 불편함
+  // Lexical에서 동일한 접근법을 사용하고 있음
+  background-image: url(${plus});
 `;
-const MenuContainer = styled.div `
-  display: flex;
-  width: 26px;
-  height: 26px;
-  justify-content: center;
-  align-items: center;
-  border-radius: 5px;
-  background: ${({ theme }) => theme.color.foreground.neutralAlt};
-
-  cursor: grab;
-
-  &:active {
-    cursor: grabbing;
-  }
-
-  &:hover {
-    background-color: #eff2f5;
-  }
+const MenuContainer = styled.div `
+  display: flex;
+  width: 26px;
+  height: 26px;
+  justify-content: center;
+  align-items: center;
+  border-radius: 5px;
+  background: ${({ theme }) => theme.color.foreground.neutralAlt};
+
+  cursor: grab;
+
+  &:active {
+    cursor: grabbing;
+  }
+
+  &:hover {
+    background-color: #eff2f5;
+  }
 `;
-const MenuIcon = styled.div `
-  width: 24px;
-  height: 24px;
-  background-image: url(${menu});
+const MenuIcon = styled.div `
+  width: 24px;
+  height: 24px;
+  background-image: url(${menu});
 `;

package/dist/patterns/LexicalEditor/plugins/ComponentAdderPlugin/ComponentAdderPlugin.js

@@ -167,8 +167,8 @@ export function ComponentAdderPlugin(props) {
                     editor.dispatchCommand(INSERT_VIDEO_COMMAND, props);
                 }, shouldReset: true }), _jsx(UploadFileDialog, { open: fileOpen, onClose: () => setFileOpen(false), onChange: (props) => {
                     editor.dispatchCommand(UPLOAD_FILE_COMMAND, props);
-                } }), _jsx(LexicalNodeMenuPlugin, { nodeKey: nodeKey, anchorClassName: cssToClassName `
-          z-index: ${ZINDEX.DIALOG + 1};
+                } }), _jsx(LexicalNodeMenuPlugin, { nodeKey: nodeKey, anchorClassName: cssToClassName `
+          z-index: ${ZINDEX.DIALOG + 1};
         `, options: filteredOptions, menuRenderFn: (anchorElementRef, { selectedIndex, selectOptionAndCleanUp, setHighlightedIndex }) => anchorElementRef.current && filteredOptions.length
                     ? ReactDOM.createPortal(_jsx(ComponentPickerMenuList, { options: filteredOptions, selectedIndex: selectedIndex, selectOptionAndCleanUp: selectOptionAndCleanUp, setHighlightedIndex: setHighlightedIndex }), anchorElementRef.current)
                     : null, onSelectOption: onSelectOption, onClose: () => {
@@ -259,13 +259,13 @@ export function ComponentAdderPlugin(props) {
                             }));
                         }), onMenuDragStart: onDragStart, onMenuDragEnd: onDragEnd }), _jsx(TargetLine, { ref: targetLineRef })] }), anchorElem)] }));
 }
-const TargetLine = styled.div `
-  pointer-events: none;
-  background: deepskyblue;
-  height: 4px;
-  position: absolute;
-  left: 0;
-  top: 0;
-  opacity: 0;
-  will-change: transform;
+const TargetLine = styled.div `
+  pointer-events: none;
+  background: deepskyblue;
+  height: 4px;
+  position: absolute;
+  left: 0;
+  top: 0;
+  opacity: 0;
+  will-change: transform;
 `;

package/dist/patterns/LexicalEditor/plugins/ComponentAdderPlugin/menu.svg

@@ -1,8 +1,8 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
-  <path d="M9.41002 7.29999H9.40002" stroke="#363636" stroke-width="2.6" stroke-linecap="round"/>
-  <path d="M14.6 7.29999H14.59" stroke="#363636" stroke-width="2.6" stroke-linecap="round"/>
-  <path d="M9.31004 12H9.30005" stroke="#363636" stroke-width="2.6" stroke-linecap="round"/>
-  <path d="M14.6 12H14.59" stroke="#363636" stroke-width="2.6" stroke-linecap="round"/>
-  <path d="M9.41002 16.7H9.40002" stroke="#363636" stroke-width="2.6" stroke-linecap="round"/>
-  <path d="M14.6 16.7H14.59" stroke="#363636" stroke-width="2.6" stroke-linecap="round"/>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <path d="M9.41002 7.29999H9.40002" stroke="#363636" stroke-width="2.6" stroke-linecap="round"/>
+  <path d="M14.6 7.29999H14.59" stroke="#363636" stroke-width="2.6" stroke-linecap="round"/>
+  <path d="M9.31004 12H9.30005" stroke="#363636" stroke-width="2.6" stroke-linecap="round"/>
+  <path d="M14.6 12H14.59" stroke="#363636" stroke-width="2.6" stroke-linecap="round"/>
+  <path d="M9.41002 16.7H9.40002" stroke="#363636" stroke-width="2.6" stroke-linecap="round"/>
+  <path d="M14.6 16.7H14.59" stroke="#363636" stroke-width="2.6" stroke-linecap="round"/>
 </svg>

package/dist/patterns/LexicalEditor/plugins/ComponentAdderPlugin/plus.svg

@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
-  <path d="M12 7V12M12 12V17M12 12H17M12 12H7" stroke="#363636" stroke-width="2" stroke-linecap="round"/>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <path d="M12 7V12M12 12V17M12 12H17M12 12H7" stroke="#363636" stroke-width="2" stroke-linecap="round"/>
 </svg>

package/dist/patterns/LexicalEditor/plugins/ComponentPickerMenuPlugin/ComponentPickerMenuItem.js

@@ -4,38 +4,38 @@ export function ComponentPickerMenuItem(props) {
     const { index, isSelected, onClick, onMouseEnter, option } = props;
     return (_jsxs(ItemContainer, { tabIndex: -1, ref: option.setRefElement, role: "option", "aria-selected": isSelected, id: "typeahead-item-" + index, onMouseEnter: onMouseEnter, onClick: onClick, isSelected: isSelected, children: [_jsx(IconContainer, { className: option.iconContainerClassName, children: option.icon }), _jsx(Title, { children: option.title })] }, option.key));
 }
-const ItemContainer = styled.li `
-  display: flex;
-  padding: 3px 2px;
-  align-items: center;
-  gap: 10px;
-  width: 100%;
-  cursor: pointer;
-
-  ${({ isSelected }) => isSelected && "background: #eee;"}
+const ItemContainer = styled.li `
+  display: flex;
+  padding: 3px 2px;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  cursor: pointer;
+
+  ${({ isSelected }) => isSelected && "background: #eee;"}
 `;
-const IconContainer = styled.div `
-  display: flex;
-  width: 26px;
-  height: 26px;
-  justify-content: center;
-  align-items: center;
-
-  border-radius: 5px;
-
-  background: ${({ theme }) => theme.color.foreground.neutralAlt};
-  box-shadow: 0px 0px 0px 1px rgba(201, 201, 204, 0.48);
-
-  svg {
-    width: 18px;
-    height: 18px;
-  }
+const IconContainer = styled.div `
+  display: flex;
+  width: 26px;
+  height: 26px;
+  justify-content: center;
+  align-items: center;
+
+  border-radius: 5px;
+
+  background: ${({ theme }) => theme.color.foreground.neutralAlt};
+  box-shadow: 0px 0px 0px 1px rgba(201, 201, 204, 0.48);
+
+  svg {
+    width: 18px;
+    height: 18px;
+  }
 `;
-const Title = styled.span `
-  color: ${({ theme }) => theme.color.foreground.neutralBase};
-  font-family: ${({ theme }) => theme.fontFamily.ui};
-  font-size: 14px;
-  font-style: normal;
-  font-weight: 500;
-  line-height: 20px; /* 142.857% */
+const Title = styled.span `
+  color: ${({ theme }) => theme.color.foreground.neutralBase};
+  font-family: ${({ theme }) => theme.fontFamily.ui};
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 20px; /* 142.857% */
 `;

package/dist/patterns/LexicalEditor/plugins/ComponentPickerMenuPlugin/ComponentPickerMenuList.js

@@ -17,37 +17,37 @@ export function ComponentPickerMenuList(props) {
                     }, option: option }, option.key));
             }) }) }));
 }
-const Container = styled.div `
-  position: absolute;
-
-  display: flex;
-  width: 200px;
-  padding: 4px;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 5px;
-
-  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;
+
+  display: flex;
+  width: 200px;
+  padding: 4px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 5px;
+
+  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 ListContainer = styled.ul `
-  padding: 0;
-  list-style: none;
-  margin: 0;
-
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 1px;
-  align-self: stretch;
-
-  overflow-y: scroll;
-
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-  &::-webkit-scrollbar {
-    display: none;
-  }
+const ListContainer = styled.ul `
+  padding: 0;
+  list-style: none;
+  margin: 0;
+
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 1px;
+  align-self: stretch;
+
+  overflow-y: scroll;
+
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  &::-webkit-scrollbar {
+    display: none;
+  }
 `;

package/dist/patterns/LexicalEditor/plugins/ComponentPickerMenuPlugin/ComponentPickerMenuPlugin.js

@@ -131,11 +131,11 @@ function getSheetContextOptions(editor, theme, t) {
                 placeholder: "",
             }),
         }, t, theme),
-        new ComponentDrawerOption(t("활동지 메뉴구분선"), (_jsx("div", { css: css `
-            width: 100%;
-            height: 1px;
-            background: ${theme.color.background.neutralAltActive};
-            margin: 4px 0;
+        new ComponentDrawerOption(t("활동지 메뉴구분선"), (_jsx("div", { css: css `
+            width: 100%;
+            height: 1px;
+            background: ${theme.color.background.neutralAltActive};
+            margin: 4px 0;
           ` }))),
     ];
 }
@@ -175,11 +175,11 @@ function getQuizContextOptions(editor, theme, t) {
                 });
             },
         }, t, theme),
-        new ComponentDrawerOption(t("퀴즈 메뉴구분선"), (_jsx("div", { css: css `
-            width: 100%;
-            height: 1px;
-            background: ${theme.color.background.neutralAltActive};
-            margin: 4px 0;
+        new ComponentDrawerOption(t("퀴즈 메뉴구분선"), (_jsx("div", { css: css `
+            width: 100%;
+            height: 1px;
+            background: ${theme.color.background.neutralAltActive};
+            margin: 4px 0;
           ` }))),
     ];
 }
@@ -338,8 +338,8 @@ export function ComponentPickerMenuPlugin(props) {
                     editor.dispatchCommand(INSERT_VIDEO_COMMAND, props);
                 }, onClose: () => setVideoOpen(false), shouldReset: true }), _jsx(UploadFileDialog, { open: fileOpen, onClose: () => setFileOpen(false), onChange: (props) => {
                     editor.dispatchCommand(UPLOAD_FILE_COMMAND, props);
-                } }), _jsx(LexicalTypeaheadMenuPlugin, { onQueryChange: setQueryString, onSelectOption: onSelectOption, triggerFn: checkForTriggerMatch, options: options, anchorClassName: cssToClassName `
-          z-index: ${ZINDEX.DIALOG + 1};
+                } }), _jsx(LexicalTypeaheadMenuPlugin, { onQueryChange: setQueryString, onSelectOption: onSelectOption, triggerFn: checkForTriggerMatch, options: options, anchorClassName: cssToClassName `
+          z-index: ${ZINDEX.DIALOG + 1};
         `, menuRenderFn: (anchorElementRef, { selectedIndex, selectOptionAndCleanUp, setHighlightedIndex }) => anchorElementRef.current && options.length
                     ? ReactDOM.createPortal(_jsx(ComponentPickerMenuList, { options: options, selectedIndex: selectedIndex, selectOptionAndCleanUp: selectOptionAndCleanUp, setHighlightedIndex: setHighlightedIndex }), anchorElementRef.current)
                     : null })] }));

package/dist/patterns/LexicalEditor/plugins/ComponentPickerMenuPlugin/componentPickerOptionUtils.js

@@ -197,8 +197,8 @@ export function getQuoteColorOptions(editor, node, colorKey, t, theme) {
     const { title, iconColor, containerColor, keywords } = getColoredQuoteInfo(colorKey, t, theme);
     return new ComponentPickerOption(title, {
         icon: _jsx(InputMethodLineIcon, { color: iconColor }),
-        iconContainerClassName: css `
-      background: ${containerColor};
+        iconContainerClassName: css `
+      background: ${containerColor};
     `,
         keywords,
         onSelect: () => {