@elicecontents/content-ui 0.0.0 → 1.0.0

package/README.ko.md

@@ -0,0 +1,117 @@
+# AIDT 디자인 시스템
+
+이 문서는 AIDT 디자인 시스템를 통해 학습자료를 규격에 맞게 개발하는 것에 대한 가이드 라인을 제공합니다.
+
+요구사항이 있는 경우 Elice에 문의해주세요
+
+## 설치 방법
+
+외부 학습 설치방법은 npm package를 설치하는 방법을 권장드립니다. 해당 패키지는 웹 환경에서만 사용 가능합니다.
+
+```shell
+# npm
+npm install @elicecontents/content-ui --save
+
+# yarn
+yarn add @elicecontents/content-ui
+```
+
+## 📌 필수 Peer Dependencies
+
+이 패키지를 정상적으로 사용하려면 아래 **Peer Dependencies**가 프로젝트에 설치되어 있어야 합니다.  
+패키지를 사용하기 전에 반드시 해당 의존성이 설치되어 있는지 확인하세요.
+
+```json
+"peerDependencies": {
+  "@base-ui-components/react": "^1.0.0-alpha.6",
+  "@emotion/react": "^11.10.0",
+  "@emotion/styled": "^11.10.0",
+  "@mui/icons-material": "^5.14.10",
+  "@mui/material": "^5.14.10",
+  "@mui/x-data-grid": "^6.7.0",
+  "@mui/x-date-pickers": "^6.7.0",
+  "react": "^16.8.0  || ^17.0.0 || ^18.0.0",
+  "react-dom": "^16.8.0  || ^17.0.0 || ^18.0.0"
+}
+```
+
+## Peer Dependencies 설치 방법
+
+아래 명령어를 실행하여 필요한 의존성을 설치할 수 있습니다.
+
+```shell
+# npm 사용 시
+npm install @base-ui-components/react @emotion/react @emotion/styled \
+  @mui/icons-material @mui/material @mui/x-data-grid @mui/x-date-pickers \
+  react react-dom --save
+
+# yarn 사용 시
+yarn add @base-ui-components/react @emotion/react @emotion/styled \
+  @mui/icons-material @mui/material @mui/x-data-grid @mui/x-date-pickers \
+  react react-dom
+```
+### 📌 참고 사항
+- 이 패키지를 설치할 때, **peerDependencies는 자동으로 설치되지 않습니다**.
+- 프로젝트에서 필요한 의존성이 모두 설치되어 있는지 확인하세요.
+- 기존 프로젝트에 `react` 또는 `@mui/material`과 같은 라이브러리가 이미 설치되어 있다면 **버전 호환성을 확인한 후 설치**하는 것이 좋습니다.
+
+## 기본적인 테마 설정
+
+AIDT 디자인 시스템은 기본적인 디자인 틀을 갖고 있지만, 색상에 대한 기능이 따로 제공되어있습니다.
+
+
+### 📖 AIDT Theme 사용 가이드
+createAIDTTheme는 AIDT 디자인 시스템에 맞춰 MUI(Material-UI) 테마를 동적으로 생성하는 함수입니다.
+이 문서는 createAIDTTheme의 사용 방법과 예제 컴포넌트(Layout)을 설명합니다.
+MUI에서 ThemeProvider를 사용하여 createAIDTTheme를 적용할 수 있습니다
+
+```ts
+// createAIDTTheme 사용 예제
+import React from "react";
+import { ThemeProvider, CssBaseline } from "@mui/material";
+import { createAIDTTheme } from "@elicecontents/content-ui";
+
+const theme = createAIDTTheme({
+  paletteMode: "light", // 테마 모드
+  palettePublisher: "elice", // 브랜드
+  paletteSubject: "korean", // 과목
+  paletteLevel: "elementary", // 교육 단계 ('elementary', 'middle', 'high')
+  typographyFontFamily: "pretendard", // 기본 글꼴
+});
+
+const App = () => (
+  <ThemeProvider theme={theme}>
+    <CssBaseline />
+    <h1>Hello, AIDT Theme!</h1>
+  </ThemeProvider>
+);
+
+export default App;
+```
+
+위 코드가 적용되면, MUI의 기본 스타일이 AIDT 테마에 맞춰 변경됩니다.
+
+아래는 AIDT 테마를 적용한 기본적인 Layout 컴포넌트 예제입니다.
+기본적으로 `EliceLayout`은 합성 컴포넌트 방식으로 사용할 수 있습니다. 이를 통해 기본적인 UI의 틀을 구성할 수 있습니다.
+
+```ts
+// Layout 컴포넌트 예제
+<EliceLayout>
+  <EliceLayout.HeaderContainer>
+    <EliceLayout.HeaderTitle>제목</EliceLayout.HeaderTitle>
+    <EliceLayout.HeaderSubTitle>
+      ...
+    </EliceLayout.HeaderSubTitle>
+  </EliceLayout.HeaderContainer>
+
+  <EliceLayout.Content>
+    <Typography>내용 영역</Typography>
+  </EliceLayout.Content>
+
+  <EliceLayout.FooterContainer>
+    <EliceLayout.FooterPaging />
+    <EliceLayout.FooterSubmit />
+  </EliceLayout.FooterContainer>
+</EliceLayout>
+
+```

package/README.md

@@ -0,0 +1,117 @@
+# AIDT Design System
+
+This document provides guidelines for developing learning materials according to the AIDT design system.
+
+For any requirements, please contact Elice.
+
+## Installation
+
+For external learning material installation, we recommend installing the package via npm.  
+This package is intended for use in web environments only.
+
+```shell
+# npm
+npm install @elicecontents/content-ui --save
+
+# yarn
+yarn add @elicecontents/content-ui
+```
+## Peer Dependencies
+
+To ensure proper functionality, this package requires the following **peer dependencies** to be installed in your project.  
+Please make sure you have them installed before using the package.
+
+```json
+"peerDependencies": {
+  "@base-ui-components/react": "^1.0.0-alpha.6",
+  "@emotion/react": "^11.10.0",
+  "@emotion/styled": "^11.10.0",
+  "@mui/icons-material": "^5.14.10",
+  "@mui/material": "^5.14.10",
+  "@mui/x-data-grid": "^6.7.0",
+  "@mui/x-date-pickers": "^6.7.0",
+  "react": "^16.8.0  || ^17.0.0 || ^18.0.0",
+  "react-dom": "^16.8.0  || ^17.0.0 || ^18.0.0"
+}
+```
+
+## Installing Peer Dependencies
+If these dependencies are not already installed in your project, you can install them with the following command:
+
+```shell
+# Using npm
+npm install @base-ui-components/react @emotion/react @emotion/styled \
+  @mui/icons-material @mui/material @mui/x-data-grid @mui/x-date-pickers \
+  react react-dom --save
+
+# Using yarn
+yarn add @base-ui-components/react @emotion/react @emotion/styled \
+  @mui/icons-material @mui/material @mui/x-data-grid @mui/x-date-pickers \
+  react react-dom
+
+```
+
+### 📌 Note:
+- These dependencies are not automatically installed when you install this package.
+- Ensure they are installed in your project to avoid compatibility issues.
+- If your project already has a different version of react or @mui/material, check for compatibility before installing.
+
+## Basic Theme Configuration
+
+The AIDT design system provides a fundamental design framework and supports custom color configurations.
+
+### 📖 AIDT Theme Usage Guide
+
+`createAIDTTheme` dynamically generates a Material-UI (MUI) theme that aligns with the AIDT design system.  
+This guide explains how to use `createAIDTTheme` and provides a component example (`Layout`).  
+
+To apply `createAIDTTheme`, use `ThemeProvider` from MUI:
+
+```ts
+// Example usage of createAIDTTheme
+import React from "react";
+import { ThemeProvider, CssBaseline } from "@mui/material";
+import { createAIDTTheme } from "@elicecontents/content-ui";
+
+const theme = createAIDTTheme({
+  paletteMode: "light", // Theme mode
+  palettePublisher: "elice", // Brand
+  paletteSubject: "korean", // Subject
+  paletteLevel: "elementary", // Education level ('elementary', 'middle', 'high')
+  typographyFontFamily: "pretendard", // Default font
+});
+
+const App = () => (
+  <ThemeProvider theme={theme}>
+    <CssBaseline />
+    <h1>Hello, AIDT Theme!</h1>
+  </ThemeProvider>
+);
+
+export default App;
+```
+
+Once applied, MUI's default styles will be adapted to the AIDT theme.
+
+Below is an example of a basic `Layout` component with the AIDT theme.  
+`EliceLayout` follows a **composable component structure**, allowing for flexible UI composition.
+
+```ts
+// Layout component example
+<EliceLayout>
+  <EliceLayout.HeaderContainer>
+    <EliceLayout.HeaderTitle>Title</EliceLayout.HeaderTitle>
+    <EliceLayout.HeaderSubTitle>
+      ...
+    </EliceLayout.HeaderSubTitle>
+  </EliceLayout.HeaderContainer>
+
+  <EliceLayout.Content>
+    <Typography>Content area</Typography>
+  </EliceLayout.Content>
+
+  <EliceLayout.FooterContainer>
+    <EliceLayout.FooterPaging />
+    <EliceLayout.FooterSubmit />
+  </EliceLayout.FooterContainer>
+</EliceLayout>

package/cjs/_virtual/_rollupPluginBabelHelpers.js

@@ -55,6 +55,13 @@ function _nonIterableSpread() {
 function _slicedToArray(r, e) {
   return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
 }
+function _taggedTemplateLiteral(e, t) {
+  return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, {
+    raw: {
+      value: Object.freeze(t)
+    }
+  }));
+}
 function _toConsumableArray(r) {
   return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread();
 }
@@ -89,6 +96,7 @@ exports.iterableToArrayLimit = _iterableToArrayLimit;
 exports.nonIterableRest = _nonIterableRest;
 exports.nonIterableSpread = _nonIterableSpread;
 exports.slicedToArray = _slicedToArray;
+exports.taggedTemplateLiteral = _taggedTemplateLiteral;
 exports.toConsumableArray = _toConsumableArray;
 exports.toPrimitive = _toPrimitive;
 exports.toPropertyKey = _toPropertyKey;

package/cjs/components/button/Button.js

@@ -6,6 +6,7 @@ var tslib = require('tslib');
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var material = require('@mui/material');
+var useAIDTMediaQuery = require('../../hooks/useAIDTMediaQuery.js');
 
 var EliceButton = React.forwardRef(function (_a, ref) {
   var children = _a.children,
@@ -14,21 +15,24 @@ var EliceButton = React.forwardRef(function (_a, ref) {
     disabled = _a.disabled,
     rest = tslib.__rest(_a, ["children", "variant", "disabled"]);
   var theme = material.useTheme();
+  var _useAIDTMediaQuery = useAIDTMediaQuery.default(),
+    isMiniTablet = _useAIDTMediaQuery.isMiniTablet;
   return jsxRuntime.jsx(material.Button, Object.assign({
     ref: ref,
     variant: variant,
     disabled: disabled,
     sx: {
       width: 'fit-content',
-      borderRadius: '1rem',
-      padding: '0.75rem 1.25rem',
+      height: isMiniTablet ? '42px' : '56px',
+      borderRadius: isMiniTablet ? '12px' : '16px',
+      padding: isMiniTablet ? '8px 12px' : '12px 20px',
       color: disabled ? theme.palette.text.disabled : variant === 'outlined' ? theme.palette.primary.main : theme.palette.common.white,
       backgroundColor: variant === 'outlined' ? theme.palette.common.white : disabled ? theme.palette.grey[300] : theme.palette.primary.main,
       fontFamily: 'inherit'
     }
   }, rest, {
     children: jsxRuntime.jsx(material.Typography, {
-      variant: "subtitle1",
+      variant: "buttoninput",
       children: children
     })
   }));

package/cjs/components/chat/Chat.js

@@ -7,13 +7,14 @@ var _styled = require('@emotion/styled/base');
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var material = require('@mui/material');
+require('tslib');
+var Micro = require('../../icons/Micro.js');
+var Reset = require('../../icons/Reset.js');
+var Send = require('../../icons/Send.js');
 var IconButton = require('../icon-button/IconButton.js');
 var tokenColorTemporary = require('../tokenColorTemporary.js');
 var AssistantAvatar = require('./AssistantAvatar.js');
 var UserAvatar = require('./UserAvatar.js');
-var Micro = require('../../icons/Micro.js');
-var Reset = require('../../icons/Reset.js');
-var Send = require('../../icons/Send.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 

package/cjs/components/dotted-pagination/DottedPagination.js

@@ -4,9 +4,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var material = require('@mui/material');
-var tokenColorTemporary = require('../tokenColorTemporary.js');
 var ArrowLeft = require('../../icons/ArrowLeft.js');
 var ArrowRight = require('../../icons/ArrowRight.js');
+require('tslib');
+var tokenColorTemporary = require('../tokenColorTemporary.js');
 
 var EliceDottedPagination = function EliceDottedPagination(props) {
   var _props$currentPage = props.currentPage,

package/cjs/components/icon-button/IconButton.d.ts

@@ -2,6 +2,10 @@ import { type IconButtonProps } from '@mui/material';
 import type { ReactNode } from 'react';
 export interface EliceIconButtonProps extends IconButtonProps {
     children: ReactNode;
+    backgroundColor?: string;
+    width?: number;
+    height?: number;
+    borderRadius?: number;
 }
-declare const EliceIconButton: ({ children, disabled, ...rest }: EliceIconButtonProps) => import("react/jsx-runtime").JSX.Element;
+declare const EliceIconButton: ({ children, disabled, backgroundColor, width, height, borderRadius, ...rest }: EliceIconButtonProps) => import("react/jsx-runtime").JSX.Element;
 export default EliceIconButton;

package/cjs/components/icon-button/IconButton.js

@@ -6,21 +6,29 @@ var tslib = require('tslib');
 var jsxRuntime = require('react/jsx-runtime');
 var material = require('@mui/material');
 var tokenColorTemporary = require('../tokenColorTemporary.js');
+var useAIDTMediaQuery = require('../../hooks/useAIDTMediaQuery.js');
 
 var EliceIconButton = function EliceIconButton(_a) {
   var children = _a.children,
     disabled = _a.disabled,
-    rest = tslib.__rest(_a, ["children", "disabled"]);
+    backgroundColor = _a.backgroundColor,
+    width = _a.width,
+    height = _a.height,
+    borderRadius = _a.borderRadius,
+    rest = tslib.__rest(_a, ["children", "disabled", "backgroundColor", "width", "height", "borderRadius"]);
   var theme = material.useTheme();
+  var _useAIDTMediaQuery = useAIDTMediaQuery.default(),
+    isMiniTablet = _useAIDTMediaQuery.isMiniTablet;
   return jsxRuntime.jsx(material.IconButton, Object.assign({
     disabled: disabled,
     style: {
       flexShrink: 0,
-      height: '3.5rem',
-      width: '3.5rem',
+      height: height !== null && height !== void 0 ? height : '3.5rem',
+      width: width !== null && width !== void 0 ? width : '3.5rem',
       boxSizing: 'border-box',
-      backgroundColor: disabled ? tokenColorTemporary.gray300Color : theme.palette.primary.main,
-      borderRadius: '1rem',
+      backgroundColor: disabled ? tokenColorTemporary.gray300Color : backgroundColor ? backgroundColor : theme.palette.primary.main,
+      borderRadius: borderRadius !== null && borderRadius !== void 0 ? borderRadius : '1rem',
+      padding: isMiniTablet ? 8 : 10,
       color: disabled ? tokenColorTemporary.gray400Color : theme.palette.primary.light
     }
   }, rest, {

package/cjs/components/index.d.ts

@@ -16,3 +16,4 @@ export * from './textarea';
 export * from './tooltip';
 export * from './AIDTTypography';
 export * from './AdaptiveImage';
+export * from './subtitle-button';

package/cjs/components/index.js

@@ -16,6 +16,7 @@ var Textarea = require('./textarea/Textarea.js');
 var Tooltip = require('./tooltip/Tooltip.js');
 var AIDTTypography = require('./AIDTTypography/AIDTTypography.js');
 var AdaptiveImage = require('./AdaptiveImage/AdaptiveImage.js');
+var SubtitleButton = require('./subtitle-button/SubtitleButton.js');
 
 
 
@@ -35,3 +36,4 @@ exports.EliceTextarea = Textarea.default;
 exports.EliceTooltip = Tooltip.default;
 exports.AIDTTypography = AIDTTypography.default;
 exports.EliceImage = AdaptiveImage.default;
+exports.EliceSubButton = SubtitleButton.default;

package/cjs/components/layout/Footer/LayoutFooterPaging.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+export interface LayoutFooterPagingProps {
+    currentPage: number;
+    totalPage: number;
+}
+declare const LayoutFooterPaging: React.FC<LayoutFooterPagingProps>;
+export default LayoutFooterPaging;

package/cjs/components/layout/Footer/LayoutFooterPaging.js

@@ -0,0 +1,46 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _styled = require('@emotion/styled/base');
+var jsxRuntime = require('react/jsx-runtime');
+var material = require('@mui/material');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var _styled__default = /*#__PURE__*/_interopDefaultCompat(_styled);
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+var FooterPagination = /*#__PURE__*/_styled__default.default(material.Typography, {
+  target: "ecog5a41"
+})("production" === "production" ? {
+  name: "17qwk4",
+  styles: "padding:0 32px"
+} : {
+  name: "17qwk4",
+  styles: "padding:0 32px",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+var StyledCurrentPage = /*#__PURE__*/_styled__default.default("span", {
+  target: "ecog5a40"
+})("color:", function (_ref) {
+  var fontColor = _ref.fontColor;
+  return fontColor;
+}, ";");
+var LayoutFooterPaging = function LayoutFooterPaging(_ref2) {
+  var currentPage = _ref2.currentPage,
+    totalPage = _ref2.totalPage;
+  var theme = material.useTheme();
+  return jsxRuntime.jsxs(FooterPagination, {
+    variant: "pagination",
+    sx: {
+      color: "#D8D8E2"
+    },
+    children: [jsxRuntime.jsx(StyledCurrentPage, {
+      fontColor: theme.palette.primary.main,
+      children: currentPage
+    }), " ", "/ ", totalPage]
+  });
+};
+
+exports.default = LayoutFooterPaging;

package/cjs/components/layout/Footer/LayoutFooterSubmit.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const LayoutFooterSubmit: React.FC;
+export default LayoutFooterSubmit;

package/cjs/components/layout/Footer/LayoutFooterSubmit.js

@@ -0,0 +1,22 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var material = require('@mui/material');
+var Button = require('../../button/Button.js');
+
+var LayoutFooterSubmit = function LayoutFooterSubmit() {
+  return jsxRuntime.jsxs(material.Stack, {
+    direction: "row",
+    spacing: 1,
+    children: [jsxRuntime.jsx(Button.default, {
+      variant: "outlined",
+      children: "\uB2E4\uC2DC\uD558\uAE30"
+    }), jsxRuntime.jsx(Button.default, {
+      children: "\uC81C\uCD9C\uD558\uAE30"
+    })]
+  });
+};
+
+exports.default = LayoutFooterSubmit;

package/cjs/components/layout/Footer/index.d.ts

@@ -0,0 +1,3 @@
+export { default as LayoutFooterPaging } from './LayoutFooterPaging';
+export { default as LayoutFooterSubmit } from './LayoutFooterSubmit';
+export type { LayoutFooterPagingProps } from './LayoutFooterPaging';

package/cjs/components/layout/Footer/index.js

@@ -0,0 +1,9 @@
+'use strict';
+
+var LayoutFooterPaging = require('./LayoutFooterPaging.js');
+var LayoutFooterSubmit = require('./LayoutFooterSubmit.js');
+
+
+
+exports.LayoutFooterPaging = LayoutFooterPaging.default;
+exports.LayoutFooterSubmit = LayoutFooterSubmit.default;

package/cjs/components/layout/Header/LayoutHeaderSubTitle.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+export interface LayoutHeaderSubTitleProps {
+    children: React.ReactNode;
+}
+declare const LayoutHeaderSubTitle: ({ children }: LayoutHeaderSubTitleProps) => JSX.Element;
+export default LayoutHeaderSubTitle;

package/cjs/components/layout/Header/LayoutHeaderSubTitle.js

@@ -0,0 +1,63 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var menu = require('@base-ui-components/react/menu');
+var material = require('@mui/material');
+var IconButton = require('../../icon-button/IconButton.js');
+require('tslib');
+var MoreColumn = require('../../../icons/MoreColumn.js');
+var bluepurple = require('../../../tokens/colors/bluepurple.js');
+var useAIDTMediaQuery = require('../../../hooks/useAIDTMediaQuery.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+var _templateObject, _templateObject2, _templateObject3;
+var StyledPopup = material.styled(menu.Menu.Popup)(_templateObject || (_templateObject = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  min-width: 150px;\n  background: transparent;\n  padding-top: 10px;\n  border-radius: 8px;\n"])));
+var StyledMenuItem = material.styled(menu.Menu.Item)(_templateObject2 || (_templateObject2 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  flex-direction: column;\n"])));
+var StyledMoreTrigger = material.styled(menu.Menu.Trigger)(_templateObject3 || (_templateObject3 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  border: none;\n  background-color: #fff;\n  padding: 0;\n"])));
+var LayoutHeaderSubTitle = function LayoutHeaderSubTitle(_ref) {
+  var children = _ref.children;
+  var _useState = React.useState(false),
+    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+    menuOpen = _useState2[0],
+    setMenuOpen = _useState2[1];
+  var _useAIDTMediaQuery = useAIDTMediaQuery.default(),
+    isTablet = _useAIDTMediaQuery.isTablet; // ✅ 반응형 적용
+  return jsxRuntime.jsx(material.Stack, {
+    direction: "row",
+    spacing: 2,
+    alignItems: "center",
+    children: isTablet ? jsxRuntime.jsxs(menu.Menu.Root, {
+      open: menuOpen,
+      onOpenChange: setMenuOpen,
+      children: [jsxRuntime.jsx(StyledMoreTrigger, {
+        children: jsxRuntime.jsx(IconButton.default, {
+          width: 48,
+          height: 48,
+          backgroundColor: bluepurple.bluepurple[100],
+          borderRadius: 12,
+          children: jsxRuntime.jsx(MoreColumn.default, {})
+        })
+      }), jsxRuntime.jsx(menu.Menu.Portal, {
+        children: jsxRuntime.jsx(menu.Menu.Positioner, {
+          align: "start",
+          children: jsxRuntime.jsxs(StyledPopup, {
+            children: [jsxRuntime.jsx(menu.Menu.Arrow, {}), React__default.default.Children.map(children, function (child, index) {
+              return jsxRuntime.jsx(StyledMenuItem, {
+                children: child
+              }, index);
+            })]
+          })
+        })
+      })]
+    }) : children
+  });
+};
+
+exports.default = LayoutHeaderSubTitle;

package/cjs/components/layout/Header/LayoutHeaderTitle.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+export interface LayoutHeaderTitleProps {
+    children?: React.ReactNode;
+    titleComponent?: React.ReactNode;
+}
+declare const LayoutHeaderTitle: ({ children, titleComponent }: LayoutHeaderTitleProps) => JSX.Element;
+export default LayoutHeaderTitle;

package/cjs/components/layout/Header/LayoutHeaderTitle.js

@@ -0,0 +1,43 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _styled = require('@emotion/styled/base');
+var jsxRuntime = require('react/jsx-runtime');
+var material = require('@mui/material');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var _styled__default = /*#__PURE__*/_interopDefaultCompat(_styled);
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+var StyledTitle = /*#__PURE__*/_styled__default.default(material.Stack, {
+  target: "e1to23d41"
+})("flex-shrink:0;width:fit-content;background-color:", function (_ref) {
+  var bgColor = _ref.bgColor;
+  return bgColor;
+}, ";position:relative;top:auto;box-sizing:border-box;padding-top:17px;border-radius:0 0 26px 26px;");
+var Title = /*#__PURE__*/_styled__default.default(material.Typography, {
+  target: "e1to23d40"
+})("production" === "production" ? {
+  name: "v13ytb",
+  styles: "border-top:1px dashed #fff;height:100%;display:flex;justify-content:center;padding:11px 24px;text-align:center;color:#fff"
+} : {
+  name: "v13ytb",
+  styles: "border-top:1px dashed #fff;height:100%;display:flex;justify-content:center;padding:11px 24px;text-align:center;color:#fff",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+var LayoutHeaderTitle = function LayoutHeaderTitle(_ref2) {
+  var children = _ref2.children,
+    titleComponent = _ref2.titleComponent;
+  var theme = material.useTheme();
+  return jsxRuntime.jsx(StyledTitle, {
+    bgColor: theme.palette.secondary.main,
+    children: titleComponent ? titleComponent : typeof children === "string" ? jsxRuntime.jsx(Title, {
+      variant: "h1",
+      children: children
+    }) : children
+  });
+};
+
+exports.default = LayoutHeaderTitle;

package/cjs/components/layout/Header/index.d.ts

@@ -0,0 +1,4 @@
+export { default as LayoutHeaderSubTitle } from './LayoutHeaderSubTitle';
+export { default as LayoutHeaderTitle } from './LayoutHeaderTitle';
+export type { LayoutHeaderSubTitleProps } from './LayoutHeaderSubTitle';
+export type { LayoutHeaderTitleProps } from './LayoutHeaderTitle';

package/cjs/components/layout/Header/index.js

@@ -0,0 +1,9 @@
+'use strict';
+
+var LayoutHeaderSubTitle = require('./LayoutHeaderSubTitle.js');
+var LayoutHeaderTitle = require('./LayoutHeaderTitle.js');
+
+
+
+exports.LayoutHeaderSubTitle = LayoutHeaderSubTitle.default;
+exports.LayoutHeaderTitle = LayoutHeaderTitle.default;