@kosdev-code/kos-ddk-components 3.0.6 → 3.0.7

package/index.js

@@ -79,7 +79,7 @@ const ActionItem = styled("div", {
   user-select: none;
   white-space: nowrap;
 `;
-const Container$a = styled.div`
+const Container$9 = styled.div`
   align-items: center;
   display: flex;
   gap: var(--ddk-component-action-item-button-container-gap);
@@ -171,7 +171,7 @@ const ActionItemButton = ({
   unitStyle = "external",
   unitValue,
   ...props
-}) => /* @__PURE__ */ jsxs(Container$a, { children: [
+}) => /* @__PURE__ */ jsxs(Container$9, { children: [
   unitStyle === "inline" ? /* @__PURE__ */ jsxs(
     ActionItemButtonStyles,
     {
@@ -331,7 +331,7 @@ const CardButton = styled(Card, {
     height: var(--ddk-component-card-button-svg-size);
   }
 `;
-const Container$9 = styled.div`
+const Container$8 = styled.div`
   display: flex;
   flex-direction: column;
   height: 100%;
@@ -573,6 +573,17 @@ const HeadingLarge = styled.div`
   letter-spacing: var(--ddk-component-typography-heading-large-letter-spacing);
   line-height: var(--ddk-component-typography-heading-large-line-height);
 `;
+const HeadingExtraLarge = styled.div`
+  color: var(--ddk-component-typography-heading-x-large-color);
+  font-family: var(--ddk-component-typography-heading-x-large-font-family);
+  font-size: var(--ddk-component-typography-heading-x-large-font-size);
+  font-style: var(--ddk-component-typography-heading-x-large-font-style);
+  font-weight: var(--ddk-component-typography-heading-x-large-font-weight);
+  letter-spacing: var(
+    --ddk-component-typography-heading-x-large-letter-spacing
+  );
+  line-height: var(--ddk-component-typography-heading-x-large-line-height);
+`;
 const HeadingMediumInformation = styled(HeadingMedium)`
   color: var(--ddk-component-typography-label-information-color);
 `;
@@ -609,7 +620,7 @@ const LabelInformationSmall = styled(LabelSmall)`
 const LabelInformationExtraSmall = styled(LabelExtraSmall)`
   color: var(--ddk-component-typography-label-information-color);
 `;
-const Container$8 = styled.div`
+const Container$7 = styled.div`
   align-items: var(--ddk-component-input-container-align-items);
   display: flex;
   flex-direction: var(--ddk-component-input-container-flex-direction);
@@ -668,7 +679,7 @@ const StyledInput = styled.input`
   }
 `;
 const Input = forwardRef(
-  ({ error, isError, ...props }, ref) => /* @__PURE__ */ jsxs(Container$8, { children: [
+  ({ error, isError, ...props }, ref) => /* @__PURE__ */ jsxs(Container$7, { children: [
     error && /* @__PURE__ */ jsx(ErrorText, { children: error }),
     /* @__PURE__ */ jsx(StyledInput, { ref, isError: isError || !!error, ...props })
   ] })
@@ -983,7 +994,7 @@ const ContentStyle = styled.div`
 `;
 const Content$1 = ({ align, children, className, size }) => {
   const { componentModeOverride } = useComponentConfigurationContext();
-  return /* @__PURE__ */ jsx(Container$9, { size, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Container$8, { size, children: /* @__PURE__ */ jsx(
     ContentStyle,
     {
       align,
@@ -1054,7 +1065,7 @@ const HeaderContainer = styled.div`
   display: flex;
   flex-direction: var(--ddk-component-modal-header-flex-direction);
   gap: var(--ddk-component-modal-header-gap);
-  height: var(--ddk-component-modal-header-height);
+  min-height: var(--ddk-component-modal-header-height);
   justify-content: space-between;
   padding: ${(props) => props.contain ? "var(--ddk-component-modal-header-padding-maximized)" : "var(--ddk-component-modal-header-padding)"};
   user-select: none;
@@ -4767,7 +4778,7 @@ const modalStyles = (mode, enableAnimation) => css`
     }
   }
 `;
-const ModalContainer = styled(Container$9)`
+const ModalContainer$1 = styled(Container$8)`
   align-items: center;
   display: flex;
   flex-direction: column;
@@ -4808,7 +4819,7 @@ const Modal = ({
           style,
           onPointerDown: () => mode !== "maximized" && closeOnShroudClick && onClose?.(),
           children: /* @__PURE__ */ jsx(
-            ModalContainer,
+            ModalContainer$1,
             {
               ...props,
               contain: mode !== "fullscreen",
@@ -4830,14 +4841,19 @@ const Modal = ({
     document.body
   );
 };
-const Container$7 = styled.div`
+const ModalContainer = styled.div`
   display: flex;
   flex-direction: column;
   overflow-y: auto;
   overflow-x: hidden;
-  gap: 40px;
+  gap: var(--ddk-component-base-modal-container-gap);
   height: 100%;
 `;
+const WorkflowModalBase = styled(Modal)`
+  --ddk-component-modal-min-height: var(
+    --ddk-component-workflow-modal-min-height
+  );
+`;
 const WorkflowContent = styled(Content$1)`
   align-items: center;
   gap: 24px;
@@ -4892,13 +4908,13 @@ const WorkflowModal = ({
 }) => {
   const { componentModeOverride } = useComponentConfigurationContext();
   return /* @__PURE__ */ jsx(
-    Modal,
+    WorkflowModalBase,
     {
       ...props,
       contain: componentModeOverride !== "compact",
       show,
       onClose,
-      children: /* @__PURE__ */ jsxs(Container$7, { children: [
+      children: /* @__PURE__ */ jsxs(ModalContainer, { children: [
         (showCloseButton && !!onClose || title) && /* @__PURE__ */ jsx(
           Header,
           {
@@ -4910,10 +4926,10 @@ const WorkflowModal = ({
             title
           }
         ),
-        /* @__PURE__ */ jsx(Content$1, { children: /* @__PURE__ */ jsxs(WorkflowContent, { children: [
+        /* @__PURE__ */ jsxs(WorkflowContent, { contain: componentModeOverride === "compact", children: [
           getIcon(status, iconStyle),
           information
-        ] }) }),
+        ] }),
         /* @__PURE__ */ jsx(Footer, { children: footer })
       ] })
     }
@@ -5886,6 +5902,33 @@ const InfoCardContainer = (props) => {
   const { t } = useKosTranslation("common");
   return /* @__PURE__ */ jsx(InfoCard, { unavailableText: t("unavailable"), ...props });
 };
+const InfoMessageCard = styled(Card)`
+  background-color: var(--ddk-semantic-color-system-orange-light);
+  border-color: var(--ddk-semantic-color-system-orange);
+  gap: var(--ddk-generic-padding-medium);
+  padding: var(--ddk-generic-padding-large) var(--ddk-generic-padding-x-large);
+  display: flex;
+  align-items: flex-start;
+  min-height: initial;
+`;
+const InfoMessageIcon = styled(ErrorIconWithBackground)`
+  background-color: var(--ddk-semantic-color-system-orange);
+  box-sizing: border-box;
+  width: var(--ddk-component-info-message-icon-width);
+  height: var(--ddk-component-info-message-icon-height);
+  padding: var(--ddk-component-info-message-icon-padding);
+`;
+const Message = styled(BodyLarge)`
+  color: var(--ddk-semantic-color-system-orange);
+  flex: 1;
+`;
+const InfoMessage = ({ children, ...props }) => {
+  const { componentModeOverride } = useComponentConfigurationContext();
+  return /* @__PURE__ */ jsxs(InfoMessageCard, { ...props, children: [
+    /* @__PURE__ */ jsx(InfoMessageIcon, {}),
+    /* @__PURE__ */ jsx(Message, { children })
+  ] });
+};
 var build$1 = { exports: {} };
 var build = build$1.exports;
 var hasRequiredBuild;
@@ -10729,7 +10772,7 @@ const Tabs = ({
   const TabContainerComponent = showBackground ? TabContainerWithBackground : TabContainer;
   const TabListComponent = contain ? TabListWithPadding : TabList;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(TabContainerComponent, { children: /* @__PURE__ */ jsx(Container$9, { children: /* @__PURE__ */ jsx(TabListComponent, { children: tabs.map((tab) => {
+    /* @__PURE__ */ jsx(TabContainerComponent, { children: /* @__PURE__ */ jsx(Container$8, { children: /* @__PURE__ */ jsx(TabListComponent, { children: tabs.map((tab) => {
       const TabComponent = activeTabValue === tab.id ? ActiveTab : Tab;
       return /* @__PURE__ */ jsx(
         TabComponent,
@@ -10740,7 +10783,7 @@ const Tabs = ({
         tab.id
       );
     }) }) }) }),
-    /* @__PURE__ */ jsx(TabContent, { children: /* @__PURE__ */ jsx(Container$9, { children: activeTabValue && tabMap[activeTabValue] && /* @__PURE__ */ jsx("section", { children: tabMap[activeTabValue].content }) }) })
+    /* @__PURE__ */ jsx(TabContent, { children: /* @__PURE__ */ jsx(Container$8, { children: activeTabValue && tabMap[activeTabValue] && /* @__PURE__ */ jsx("section", { children: tabMap[activeTabValue].content }) }) })
   ] });
 };
 const useNavigate = () => {
@@ -11050,7 +11093,7 @@ const ContainerStyles = styled.div`
 const TopNavigation = ({
   iconNavigationItems,
   navigationItems
-}) => /* @__PURE__ */ jsx(TopNavigationStyles, { children: /* @__PURE__ */ jsx(Container$9, { children: /* @__PURE__ */ jsxs(ContainerStyles, { children: [
+}) => /* @__PURE__ */ jsx(TopNavigationStyles, { children: /* @__PURE__ */ jsx(Container$8, { children: /* @__PURE__ */ jsxs(ContainerStyles, { children: [
   /* @__PURE__ */ jsx(TopNavigationButtonList, { items: navigationItems }),
   /* @__PURE__ */ jsx(TopNavigationIconButtonList, { items: iconNavigationItems })
 ] }) }) });
@@ -11060,7 +11103,7 @@ const viewStyles = css`
   gap: var(--ddk-component-view-gap);
   padding: var(--ddk-component-view-padding);
 `;
-const View = ({ children, contain = true, style }) => contain ? /* @__PURE__ */ jsx(Container$9, { children: /* @__PURE__ */ jsx("div", { css: [viewStyles, style], children }) }) : /* @__PURE__ */ jsx("div", { css: [viewStyles, style], children });
+const View = ({ children, contain = true, style }) => contain ? /* @__PURE__ */ jsx(Container$8, { children: /* @__PURE__ */ jsx("div", { css: [viewStyles, style], children }) }) : /* @__PURE__ */ jsx("div", { css: [viewStyles, style], children });
 const BackText = () => {
   const { t } = useKosTranslation("common");
   return t("close");
@@ -11113,7 +11156,7 @@ export {
   ComponentConfigurationProvider,
   ConfirmationModalContainer as ConfirmationModal,
   ConfirmationModalContainer,
-  Container$9 as Container,
+  Container$8 as Container,
   Content$1 as Content,
   DashboardCardContainer,
   Description$1 as Description,
@@ -11133,6 +11176,7 @@ export {
   Grid,
   Header,
   Heading,
+  HeadingExtraLarge,
   HeadingLarge,
   HeadingLargeInformation,
   HeadingMedium,
@@ -11143,6 +11187,7 @@ export {
   InfoCardContainer,
   InfoCardHead,
   InfoContainer,
+  InfoMessage,
   InfoTable,
   InformationIconStyle,
   Input,
@@ -11165,6 +11210,7 @@ export {
   ListContainer,
   MenuButton,
   Modal,
+  ModalContainer,
   MultiDial,
   MultiPicker,
   MultiPickerCard,