@kosdev-code/kos-ddk-components 0.1.0-dev.20 → 0.1.0-dev.21

package/components/index.d.ts

@@ -13,6 +13,7 @@ export * from './fuel-gauge';
 export * from './full-screen-modal';
 export * from './grid';
 export * from './info-card';
+export * from './info-message';
 export * from './info-table';
 export * from './input-card';
 export * from './input-range-with-unit-card';

package/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../packages/kos-ddk-components/src/components/index.ts"],"names":[],"mappings":"AACA,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC;AACpC,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,8BAA8B,CAAC;AAC7C,cAAc,uBAAuB,CAAC;AACtC,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,qBAAqB,CAAC;AACpC,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,wBAAwB,CAAC;AACvC,cAAc,UAAU,CAAC;AACzB,cAAc,uBAAuB,CAAC;AACtC,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC;AACvC,cAAc,WAAW,CAAC;AAC1B,cAAc,qBAAqB,CAAC;AACpC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,kBAAkB,CAAC;AACjC,cAAc,qBAAqB,CAAC;AACpC,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,sBAAsB,CAAC;AACrC,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,8BAA8B,CAAC;AAC7C,cAAc,yBAAyB,CAAC;AACxC,cAAc,mCAAmC,CAAC;AAClD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,kBAAkB,CAAC;AACjC,cAAc,QAAQ,CAAC;AACvB,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../packages/kos-ddk-components/src/components/index.ts"],"names":[],"mappings":"AACA,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC;AACpC,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,8BAA8B,CAAC;AAC7C,cAAc,uBAAuB,CAAC;AACtC,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,qBAAqB,CAAC;AACpC,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,wBAAwB,CAAC;AACvC,cAAc,UAAU,CAAC;AACzB,cAAc,uBAAuB,CAAC;AACtC,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC;AACvC,cAAc,WAAW,CAAC;AAC1B,cAAc,qBAAqB,CAAC;AACpC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,kBAAkB,CAAC;AACjC,cAAc,qBAAqB,CAAC;AACpC,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,sBAAsB,CAAC;AACrC,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,8BAA8B,CAAC;AAC7C,cAAc,yBAAyB,CAAC;AACxC,cAAc,mCAAmC,CAAC;AAClD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,kBAAkB,CAAC;AACjC,cAAc,QAAQ,CAAC;AACvB,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC"}

package/components/info-message/index.d.ts

@@ -0,0 +1,2 @@
+export * from './info-message';
+//# sourceMappingURL=index.d.ts.map

package/components/info-message/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../packages/kos-ddk-components/src/components/info-message/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC"}

package/components/info-message/info-message.d.ts

@@ -0,0 +1,8 @@
+import { CardProps } from '../../styles';
+import { ReactNode } from 'react';
+interface InfoProp extends CardProps {
+    children: ReactNode;
+}
+export declare const InfoMessage: ({ children, ...props }: InfoProp) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=info-message.d.ts.map

package/components/info-message/info-message.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"info-message.d.ts","sourceRoot":"","sources":["../../../../../packages/kos-ddk-components/src/components/info-message/info-message.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAmB,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAE/D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAyBvC,UAAU,QAAS,SAAQ,SAAS;IAClC,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,eAAO,MAAM,WAAW,GAAI,wBAAwB,QAAQ,qDAS3D,CAAC"}

package/components/modal/index.d.ts

@@ -2,4 +2,5 @@ export * from './content';
 export * from './footer';
 export * from './header';
 export * from './modal';
+export * from './modal-container';
 //# sourceMappingURL=index.d.ts.map

package/components/modal/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../packages/kos-ddk-components/src/components/modal/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../packages/kos-ddk-components/src/components/modal/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,mBAAmB,CAAC"}

package/components/modal/modal-container/index.d.ts

@@ -0,0 +1,2 @@
+export * from './modal-container';
+//# sourceMappingURL=index.d.ts.map

package/components/modal/modal-container/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../packages/kos-ddk-components/src/components/modal/modal-container/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC"}

package/components/modal/modal-container/modal-container.d.ts

@@ -0,0 +1,5 @@
+export declare const ModalContainer: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+//# sourceMappingURL=modal-container.d.ts.map

package/components/modal/modal-container/modal-container.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal-container.d.ts","sourceRoot":"","sources":["../../../../../../packages/kos-ddk-components/src/components/modal/modal-container/modal-container.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc;;;yGAO1B,CAAC"}

package/components/workflow-modal/workflow-modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"workflow-modal.d.ts","sourceRoot":"","sources":["../../../../../packages/kos-ddk-components/src/components/workflow-modal/workflow-modal.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,EAAkC,KAAK,UAAU,EAAE,MAAM,UAAU,CAAC;AAgB3E,MAAM,MAAM,MAAM,GACd,OAAO,GACP,qBAAqB,GACrB,aAAa,GACb,SAAS,GACT,kBAAkB,GAClB,UAAU,GACV,SAAS,CAAC;AA6Cd,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,UAAU,EAAE,UAAU,CAAC;IACtE,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,SAAS,CAAC,EAAE,GAAG,CAAC;IAChB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,aAAa,GAAI,+GAW3B,kBAAkB,qDAiCpB,CAAC"}
+{"version":3,"file":"workflow-modal.d.ts","sourceRoot":"","sources":["../../../../../packages/kos-ddk-components/src/components/workflow-modal/workflow-modal.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,EAML,KAAK,UAAU,EAChB,MAAM,UAAU,CAAC;AAalB,MAAM,MAAM,MAAM,GACd,OAAO,GACP,qBAAqB,GACrB,aAAa,GACb,SAAS,GACT,kBAAkB,GAClB,UAAU,GACV,SAAS,CAAC;AA6Cd,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,UAAU,EAAE,UAAU,CAAC;IACtE,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,SAAS,CAAC,EAAE,GAAG,CAAC;IAChB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,aAAa,GAAI,+GAW3B,kBAAkB,qDAiCpB,CAAC"}

package/index.cjs

@@ -97,7 +97,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);
@@ -189,7 +189,7 @@ const ActionItemButton = ({
   unitStyle = "external",
   unitValue,
   ...props
-}) => /* @__PURE__ */ jsxRuntime.jsxs(Container$a, { children: [
+}) => /* @__PURE__ */ jsxRuntime.jsxs(Container$9, { children: [
   unitStyle === "inline" ? /* @__PURE__ */ jsxRuntime.jsxs(
     ActionItemButtonStyles,
     {
@@ -349,7 +349,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%;
@@ -591,6 +591,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);
 `;
@@ -627,7 +638,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);
@@ -686,7 +697,7 @@ const StyledInput = styled.input`
   }
 `;
 const Input = React.forwardRef(
-  ({ error, isError, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(Container$8, { children: [
+  ({ error, isError, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(Container$7, { children: [
     error && /* @__PURE__ */ jsxRuntime.jsx(ErrorText, { children: error }),
     /* @__PURE__ */ jsxRuntime.jsx(StyledInput, { ref, isError: isError || !!error, ...props })
   ] })
@@ -1001,7 +1012,7 @@ const ContentStyle = styled.div`
 `;
 const Content$1 = ({ align, children, className, size }) => {
   const { componentModeOverride } = useComponentConfigurationContext();
-  return /* @__PURE__ */ jsxRuntime.jsx(Container$9, { size, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(Container$8, { size, children: /* @__PURE__ */ jsxRuntime.jsx(
     ContentStyle,
     {
       align,
@@ -1072,7 +1083,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;
@@ -4785,7 +4796,7 @@ const modalStyles = (mode, enableAnimation) => react.css`
     }
   }
 `;
-const ModalContainer = styled(Container$9)`
+const ModalContainer$1 = styled(Container$8)`
   align-items: center;
   display: flex;
   flex-direction: column;
@@ -4826,7 +4837,7 @@ const Modal = ({
           style,
           onPointerDown: () => mode !== "maximized" && closeOnShroudClick && onClose?.(),
           children: /* @__PURE__ */ jsxRuntime.jsx(
-            ModalContainer,
+            ModalContainer$1,
             {
               ...props,
               contain: mode !== "fullscreen",
@@ -4848,14 +4859,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;
@@ -4910,13 +4926,13 @@ const WorkflowModal = ({
 }) => {
   const { componentModeOverride } = useComponentConfigurationContext();
   return /* @__PURE__ */ jsxRuntime.jsx(
-    Modal,
+    WorkflowModalBase,
     {
       ...props,
       contain: componentModeOverride !== "compact",
       show,
       onClose,
-      children: /* @__PURE__ */ jsxRuntime.jsxs(Container$7, { children: [
+      children: /* @__PURE__ */ jsxRuntime.jsxs(ModalContainer, { children: [
         (showCloseButton && !!onClose || title) && /* @__PURE__ */ jsxRuntime.jsx(
           Header,
           {
@@ -4928,10 +4944,10 @@ const WorkflowModal = ({
             title
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx(Content$1, { children: /* @__PURE__ */ jsxRuntime.jsxs(WorkflowContent, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(WorkflowContent, { contain: componentModeOverride === "compact", children: [
           getIcon(status, iconStyle),
           information
-        ] }) }),
+        ] }),
         /* @__PURE__ */ jsxRuntime.jsx(Footer, { children: footer })
       ] })
     }
@@ -5904,6 +5920,33 @@ const InfoCardContainer = (props) => {
   const { t } = kosUiSdk.useKosTranslation("common");
   return /* @__PURE__ */ jsxRuntime.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(kosDdkStyles.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__ */ jsxRuntime.jsxs(InfoMessageCard, { ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(InfoMessageIcon, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(Message, { children })
+  ] });
+};
 var build$1 = { exports: {} };
 var build = build$1.exports;
 var hasRequiredBuild;
@@ -10747,7 +10790,7 @@ const Tabs = ({
   const TabContainerComponent = showBackground ? TabContainerWithBackground : TabContainer;
   const TabListComponent = contain ? TabListWithPadding : TabList;
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(TabContainerComponent, { children: /* @__PURE__ */ jsxRuntime.jsx(Container$9, { children: /* @__PURE__ */ jsxRuntime.jsx(TabListComponent, { children: tabs.map((tab) => {
+    /* @__PURE__ */ jsxRuntime.jsx(TabContainerComponent, { children: /* @__PURE__ */ jsxRuntime.jsx(Container$8, { children: /* @__PURE__ */ jsxRuntime.jsx(TabListComponent, { children: tabs.map((tab) => {
       const TabComponent = activeTabValue === tab.id ? ActiveTab : Tab;
       return /* @__PURE__ */ jsxRuntime.jsx(
         TabComponent,
@@ -10758,7 +10801,7 @@ const Tabs = ({
         tab.id
       );
     }) }) }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(TabContent, { children: /* @__PURE__ */ jsxRuntime.jsx(Container$9, { children: activeTabValue && tabMap[activeTabValue] && /* @__PURE__ */ jsxRuntime.jsx("section", { children: tabMap[activeTabValue].content }) }) })
+    /* @__PURE__ */ jsxRuntime.jsx(TabContent, { children: /* @__PURE__ */ jsxRuntime.jsx(Container$8, { children: activeTabValue && tabMap[activeTabValue] && /* @__PURE__ */ jsxRuntime.jsx("section", { children: tabMap[activeTabValue].content }) }) })
   ] });
 };
 const useNavigate = () => {
@@ -11068,7 +11111,7 @@ const ContainerStyles = styled.div`
 const TopNavigation = ({
   iconNavigationItems,
   navigationItems
-}) => /* @__PURE__ */ jsxRuntime.jsx(TopNavigationStyles, { children: /* @__PURE__ */ jsxRuntime.jsx(Container$9, { children: /* @__PURE__ */ jsxRuntime.jsxs(ContainerStyles, { children: [
+}) => /* @__PURE__ */ jsxRuntime.jsx(TopNavigationStyles, { children: /* @__PURE__ */ jsxRuntime.jsx(Container$8, { children: /* @__PURE__ */ jsxRuntime.jsxs(ContainerStyles, { children: [
   /* @__PURE__ */ jsxRuntime.jsx(TopNavigationButtonList, { items: navigationItems }),
   /* @__PURE__ */ jsxRuntime.jsx(TopNavigationIconButtonList, { items: iconNavigationItems })
 ] }) }) });
@@ -11078,7 +11121,7 @@ const viewStyles = react.css`
   gap: var(--ddk-component-view-gap);
   padding: var(--ddk-component-view-padding);
 `;
-const View = ({ children, contain = true, style }) => contain ? /* @__PURE__ */ jsxRuntime.jsx(Container$9, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { css: [viewStyles, style], children }) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { css: [viewStyles, style], children });
+const View = ({ children, contain = true, style }) => contain ? /* @__PURE__ */ jsxRuntime.jsx(Container$8, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { css: [viewStyles, style], children }) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { css: [viewStyles, style], children });
 const BackText = () => {
   const { t } = kosUiSdk.useKosTranslation("common");
   return t("close");
@@ -11130,7 +11173,7 @@ exports.ComponentConfigurationContext = ComponentConfigurationContext;
 exports.ComponentConfigurationProvider = ComponentConfigurationProvider;
 exports.ConfirmationModal = ConfirmationModalContainer;
 exports.ConfirmationModalContainer = ConfirmationModalContainer;
-exports.Container = Container$9;
+exports.Container = Container$8;
 exports.Content = Content$1;
 exports.DashboardCardContainer = DashboardCardContainer;
 exports.Description = Description$1;
@@ -11150,6 +11193,7 @@ exports.GreenTickIconStyle = GreenTickIconStyle;
 exports.Grid = Grid;
 exports.Header = Header;
 exports.Heading = Heading;
+exports.HeadingExtraLarge = HeadingExtraLarge;
 exports.HeadingLarge = HeadingLarge;
 exports.HeadingLargeInformation = HeadingLargeInformation;
 exports.HeadingMedium = HeadingMedium;
@@ -11160,6 +11204,7 @@ exports.InfoCard = InfoCardContainer;
 exports.InfoCardContainer = InfoCardContainer;
 exports.InfoCardHead = InfoCardHead;
 exports.InfoContainer = InfoContainer;
+exports.InfoMessage = InfoMessage;
 exports.InfoTable = InfoTable;
 exports.InformationIconStyle = InformationIconStyle;
 exports.Input = Input;
@@ -11182,6 +11227,7 @@ exports.LargeText = LargeText;
 exports.ListContainer = ListContainer;
 exports.MenuButton = MenuButton;
 exports.Modal = Modal;
+exports.ModalContainer = ModalContainer;
 exports.MultiDial = MultiDial;
 exports.MultiPicker = MultiPicker;
 exports.MultiPickerCard = MultiPickerCard;