@elicecontents/content-ui 1.0.1 → 1.0.2-alpha.1

package/cjs/components/index.d.ts

@@ -17,3 +17,4 @@ export * from './tooltip';
 export * from './AIDTTypography';
 export * from './AdaptiveImage';
 export * from './subtitle-button';
+export * from './underline-textinput';

package/cjs/components/index.js

@@ -17,6 +17,7 @@ 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');
+var UnderlineTextInput = require('./underline-textinput/UnderlineTextInput.js');
 
 
 
@@ -37,3 +38,4 @@ exports.EliceTooltip = Tooltip.default;
 exports.AIDTTypography = AIDTTypography.default;
 exports.EliceImage = AdaptiveImage.default;
 exports.EliceSubButton = SubtitleButton.default;
+exports.UnderlineTextInput = UnderlineTextInput.default;

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

@@ -28,7 +28,7 @@ var LayoutHeaderSubTitle = function LayoutHeaderSubTitle(_ref) {
     menuOpen = _useState2[0],
     setMenuOpen = _useState2[1];
   var _useAIDTMediaQuery = useAIDTMediaQuery.default(),
-    isTablet = _useAIDTMediaQuery.isTablet; // ✅ 반응형 적용
+    isTablet = _useAIDTMediaQuery.isTablet;
   return jsxRuntime.jsx(material.Stack, {
     direction: "row",
     spacing: 2,

package/cjs/components/layout/Layout.d.ts

@@ -8,20 +8,25 @@ export interface EliceLayoutProps {
     allowPrev?: boolean;
     allowNext?: boolean;
 }
+type Alignment = "left" | "center" | "right";
 declare const EliceLayout: (({ children, onPrev, onNext, allowPrev, allowNext, backgroundImage, backgroundColor }: EliceLayoutProps) => import("react/jsx-runtime").JSX.Element) & {
     HeaderContainer: ({ children }: {
         children: React.ReactNode;
     }) => import("react/jsx-runtime").JSX.Element;
     HeaderTitle: ({ children, titleComponent }: import("./Header").LayoutHeaderTitleProps) => JSX.Element;
     HeaderSubTitle: ({ children }: import("./Header").LayoutHeaderSubTitleProps) => JSX.Element;
-    Subtitle: ({ children }: {
+    ContentContainer: ({ children }: {
         children: React.ReactNode;
     }) => import("react/jsx-runtime").JSX.Element;
-    ContentContainer: ({ children }: {
+    Subtitle: ({ children, alignment, justifyContent }: {
         children: React.ReactNode;
+        alignment?: Alignment | undefined;
+        justifyContent?: string | undefined;
     }) => import("react/jsx-runtime").JSX.Element;
-    Content: ({ children }: {
+    Content: ({ children, alignment, justifyContent }: {
         children: React.ReactNode;
+        alignment?: Alignment | undefined;
+        justifyContent?: string | undefined;
     }) => import("react/jsx-runtime").JSX.Element;
     FooterContainer: ({ children }: {
         children: React.ReactNode;

package/cjs/components/layout/Layout.js

@@ -27,7 +27,7 @@ var MainContainer = /*#__PURE__*/_styled__default.default(material.Stack, {
 })("width:100%;height:100vh;display:flex;flex-direction:column;padding:", function (_ref) {
   var isMiniTablet = _ref.isMiniTablet;
   return isMiniTablet ? "0 20px" : "0 40px";
-}, ";box-sizing:border-box;position:relative;overflow-y:none;background-image:", function (_ref2) {
+}, ";box-sizing:border-box;position:relative;overflow-y:hidden;background-image:", function (_ref2) {
   var backgroundImage = _ref2.backgroundImage;
   return backgroundImage ? "url(".concat(backgroundImage, ")") : "none";
 }, ";background-size:cover;background-position:center;background-color:", function (_ref3) {
@@ -56,26 +56,32 @@ var _FooterContainer = /*#__PURE__*/_styled__default.default(material.Stack, {
 });
 var SubtitleContainer = /*#__PURE__*/_styled__default.default(material.Stack, {
   target: "efnp08i3"
-})("height:80px;width:100%;padding:20px 40px;display:flex;background-color:", function (_ref4) {
-  var isSticky = _ref4.isSticky;
-  return isSticky ? "#fff" : "none";
-}, ";position:", function (_ref5) {
-  var isSticky = _ref5.isSticky;
-  return isSticky ? "sticky" : "none";
-}, ";top:", function (_ref6) {
+})("height:80px;width:100%;padding:20px 40px;display:flex;align-items:", function (_ref4) {
+  var alignment = _ref4.alignment;
+  return alignment;
+}, ";justify-content:", function (_ref5) {
+  var justifyContent = _ref5.justifyContent;
+  return justifyContent;
+}, ";background-color:", function (_ref6) {
   var isSticky = _ref6.isSticky;
-  return isSticky ? "0" : "auto";
-}, ";left:0;z-index:10;transition:all 0.2s ease-in-out;box-shadow:", function (_ref7) {
+  return isSticky ? "#fff" : "none";
+}, ";position:", function (_ref7) {
   var isSticky = _ref7.isSticky;
+  return isSticky ? "sticky" : "relative";
+}, ";top:", function (_ref8) {
+  var isSticky = _ref8.isSticky;
+  return isSticky ? "0" : "auto";
+}, ";left:0;z-index:10;transition:all 0.2s ease-in-out;box-shadow:", function (_ref9) {
+  var isSticky = _ref9.isSticky;
   return isSticky ? "0 2px 5px rgba(0, 0, 0, 0.1)" : "none";
 }, ";");
 var _ContentContainer = /*#__PURE__*/_styled__default.default(material.Stack, {
   target: "efnp08i2"
-})("flex:1;width:100%;max-height:calc(100vh - 74px - 92px);overflow-y:auto;min-height:0;position:relative;&::-webkit-scrollbar{width:8px;}&::-webkit-scrollbar-thumb{background-color:", function (_ref8) {
-  var theme = _ref8.theme;
+})("flex:1;width:100%;max-height:calc(100vh - 74px - 92px);overflow-y:auto;min-height:0;position:relative;&::-webkit-scrollbar{width:8px;}&::-webkit-scrollbar-thumb{background-color:", function (_ref10) {
+  var theme = _ref10.theme;
   return theme.palette.primary.main;
-}, ";border-radius:4px;}&::-webkit-scrollbar-track{background-color:", function (_ref9) {
-  var theme = _ref9.theme;
+}, ";border-radius:4px;}&::-webkit-scrollbar-track{background-color:", function (_ref11) {
+  var theme = _ref11.theme;
   return theme.palette.grey[300];
 }, ";border-radius:4px;}");
 var ScrollMoreButton = /*#__PURE__*/_styled__default.default(material.Button, {
@@ -90,22 +96,21 @@ var ScrollMoreButton = /*#__PURE__*/_styled__default.default(material.Button, {
 });
 var _Content = /*#__PURE__*/_styled__default.default(material.Stack, {
   target: "efnp08i0"
-})("production" === "production" ? {
-  name: "e7007z",
-  styles: "flex:1;width:100%;max-height:610px;min-height:0"
-} : {
-  name: "e7007z",
-  styles: "flex:1;width:100%;max-height:610px;min-height:0",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-var EliceLayout = Object.assign(function (_ref10) {
-  var children = _ref10.children,
-    onPrev = _ref10.onPrev,
-    onNext = _ref10.onNext,
-    allowPrev = _ref10.allowPrev,
-    allowNext = _ref10.allowNext,
-    backgroundImage = _ref10.backgroundImage,
-    backgroundColor = _ref10.backgroundColor;
+})("flex:1;width:100%;min-height:0;text-align:", function (_ref12) {
+  var alignment = _ref12.alignment;
+  return alignment;
+}, ";justify-content:", function (_ref13) {
+  var justifyContent = _ref13.justifyContent;
+  return justifyContent;
+}, ";");
+var EliceLayout = Object.assign(function (_ref14) {
+  var children = _ref14.children,
+    onPrev = _ref14.onPrev,
+    onNext = _ref14.onNext,
+    allowPrev = _ref14.allowPrev,
+    allowNext = _ref14.allowNext,
+    backgroundImage = _ref14.backgroundImage,
+    backgroundColor = _ref14.backgroundColor;
   var _useAIDTMediaQuery = useAIDTMediaQuery.default(),
     isTablet = _useAIDTMediaQuery.isTablet,
     isMiniTablet = _useAIDTMediaQuery.isMiniTablet;
@@ -131,28 +136,16 @@ var EliceLayout = Object.assign(function (_ref10) {
     })
   });
 }, {
-  HeaderContainer: function HeaderContainer(_ref11) {
-    var children = _ref11.children;
+  HeaderContainer: function HeaderContainer(_ref15) {
+    var children = _ref15.children;
     return jsxRuntime.jsx(_HeaderContainer, {
       children: children
     });
   },
   HeaderTitle: LayoutHeaderTitle.default,
   HeaderSubTitle: LayoutHeaderSubTitle.default,
-  Subtitle: function Subtitle(_ref12) {
-    var children = _ref12.children;
-    var context = React__default.default.useContext(EliceLayoutContext);
-    if (!context) {
-      throw new Error("EliceLayout components must be used within an EliceLayout provider.");
-    }
-    var isScrollActive = context.isScrollActive;
-    return jsxRuntime.jsx(SubtitleContainer, {
-      isSticky: isScrollActive,
-      children: children
-    });
-  },
-  ContentContainer: function ContentContainer(_ref13) {
-    var children = _ref13.children;
+  ContentContainer: function ContentContainer(_ref16) {
+    var children = _ref16.children;
     var theme = material.useTheme();
     var contentRef = React__default.default.useRef(null);
     var context = React__default.default.useContext(EliceLayoutContext);
@@ -164,8 +157,14 @@ var EliceLayout = Object.assign(function (_ref10) {
     React__default.default.useEffect(function () {
       var handleScroll = function handleScroll() {
         if (contentRef.current) {
-          var scrollTop = contentRef.current.scrollTop;
+          var _contentRef$current = contentRef.current,
+            scrollTop = _contentRef$current.scrollTop,
+            scrollHeight = _contentRef$current.scrollHeight,
+            clientHeight = _contentRef$current.clientHeight;
           setIsScrollActive(scrollTop > 10);
+          if (scrollHeight <= clientHeight) {
+            setIsScrollActive(false);
+          }
         }
       };
       var element = contentRef.current;
@@ -178,29 +177,54 @@ var EliceLayout = Object.assign(function (_ref10) {
           element.removeEventListener("scroll", handleScroll);
         }
       };
-    }, []);
+    }, [contentRef]);
     return jsxRuntime.jsxs(_ContentContainer, {
       ref: contentRef,
       theme: theme,
-      children: [children, !isScrollActive && jsxRuntime.jsx(ScrollMoreButton, {
+      children: [children, isScrollActive && jsxRuntime.jsx(ScrollMoreButton, {
         children: jsxRuntime.jsx(ScrollMoreIcon.default, {
           size: 32,
-          color: "white"
+          color: "white",
+          bgOpacity: 0.5
         })
       })]
     });
   },
-  Content: function Content(_ref14) {
-    var children = _ref14.children;
+  Subtitle: function Subtitle(_ref17) {
+    var children = _ref17.children,
+      _ref17$alignment = _ref17.alignment,
+      alignment = _ref17$alignment === void 0 ? "left" : _ref17$alignment,
+      _ref17$justifyContent = _ref17.justifyContent,
+      justifyContent = _ref17$justifyContent === void 0 ? "flex-start" : _ref17$justifyContent;
+    var context = React__default.default.useContext(EliceLayoutContext);
+    if (!context) {
+      throw new Error("EliceLayout components must be used within an EliceLayout provider.");
+    }
+    var isScrollActive = context.isScrollActive;
+    return jsxRuntime.jsx(SubtitleContainer, {
+      isSticky: isScrollActive,
+      alignment: alignment,
+      justifyContent: justifyContent,
+      children: children
+    });
+  },
+  Content: function Content(_ref18) {
+    var children = _ref18.children,
+      _ref18$alignment = _ref18.alignment,
+      alignment = _ref18$alignment === void 0 ? "left" : _ref18$alignment,
+      _ref18$justifyContent = _ref18.justifyContent,
+      justifyContent = _ref18$justifyContent === void 0 ? "flex-start" : _ref18$justifyContent;
     return jsxRuntime.jsx(_Content, {
+      alignment: alignment,
+      justifyContent: justifyContent,
       children: jsxRuntime.jsx(material.Typography, {
         variant: "body1",
         children: children
       })
     });
   },
-  FooterContainer: function FooterContainer(_ref15) {
-    var children = _ref15.children;
+  FooterContainer: function FooterContainer(_ref19) {
+    var children = _ref19.children;
     return jsxRuntime.jsx(_FooterContainer, {
       children: children
     });

package/cjs/components/pagination-button/PaginationButton.js

@@ -7,6 +7,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var ArrowLeft = require('../../icons/ArrowLeft.js');
 var ArrowRight = require('../../icons/ArrowRight.js');
 require('tslib');
+require('@mui/material');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 

package/cjs/components/underline-textinput/UnderlineTextInput.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export interface UnderlineTextInputProps {
+    badgeLabel?: string;
+    value: string;
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    placeholder?: string;
+}
+declare const UnderlineTextInput: React.FC<UnderlineTextInputProps>;
+export default UnderlineTextInput;

package/cjs/components/underline-textinput/UnderlineTextInput.js

@@ -0,0 +1,75 @@
+'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');
+var Badge = require('../badge/Badge.js');
+
+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 UnderlineTextInputContainer = /*#__PURE__*/_styled__default.default("div", {
+  target: "el3ahhd3"
+})("production" === "production" ? {
+  name: "phlljc",
+  styles: "display:flex;align-items:center;gap:8px;width:100%"
+} : {
+  name: "phlljc",
+  styles: "display:flex;align-items:center;gap:8px;width:100%",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+var UnderLineInputContent = /*#__PURE__*/_styled__default.default("div", {
+  target: "el3ahhd2"
+})("production" === "production" ? {
+  name: "1wmy9hl",
+  styles: "display:flex;flex-direction:column;flex:1"
+} : {
+  name: "1wmy9hl",
+  styles: "display:flex;flex-direction:column;flex:1",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+var InputText = /*#__PURE__*/_styled__default.default("input", {
+  target: "el3ahhd1"
+})("production" === "production" ? {
+  name: "fe82dm",
+  styles: "border:none;outline:none;font-size:16px;padding:8px 0;width:100%;background:transparent"
+} : {
+  name: "fe82dm",
+  styles: "border:none;outline:none;font-size:16px;padding:8px 0;width:100%;background:transparent",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+var UnderLineDivider = /*#__PURE__*/_styled__default.default("div", {
+  target: "el3ahhd0"
+})("width:100%;height:2px;background-color:", function (_ref) {
+  var theme = _ref.theme;
+  return theme.palette.primary.main;
+}, ";");
+var UnderlineTextInput = function UnderlineTextInput(_ref2) {
+  var _ref2$badgeLabel = _ref2.badgeLabel,
+    badgeLabel = _ref2$badgeLabel === void 0 ? "Badge" : _ref2$badgeLabel,
+    value = _ref2.value,
+    onChange = _ref2.onChange,
+    _ref2$placeholder = _ref2.placeholder,
+    placeholder = _ref2$placeholder === void 0 ? "Enter text..." : _ref2$placeholder;
+  var theme = material.useTheme();
+  return jsxRuntime.jsxs(UnderlineTextInputContainer, {
+    children: [jsxRuntime.jsx(Badge.default, {
+      label: badgeLabel,
+      color: "primary"
+    }), jsxRuntime.jsxs(UnderLineInputContent, {
+      children: [jsxRuntime.jsx(InputText, {
+        value: value,
+        onChange: onChange,
+        placeholder: placeholder
+      }), jsxRuntime.jsx(UnderLineDivider, {
+        theme: theme
+      })]
+    })]
+  });
+};
+
+exports.default = UnderlineTextInput;

package/cjs/components/underline-textinput/index.d.ts

@@ -0,0 +1,2 @@
+export { default as UnderlineTextInput } from './UnderlineTextInput';
+export type { UnderlineTextInputProps } from './UnderlineTextInput';

package/cjs/components/underline-textinput/index.js

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

package/cjs/icons/Numbers.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+interface NumbersIconProps {
+    value: number | string;
+    size?: number;
+    color?: string;
+    textColor?: string;
+    pathColor?: string;
+}
+declare const NumbersIcon: React.FC<NumbersIconProps>;
+export default NumbersIcon;

package/cjs/icons/Numbers.js

@@ -0,0 +1,63 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var material = require('@mui/material');
+
+// ✅ 숫자 및 문자별 `path` 값을 정적으로 저장
+var numberPaths = {
+  "1": "M25.7758 31.16H21.3838V16.376L16.9678 19.064V14.84L22.1038 11.864H25.7758V31.16Z",
+  "2": "M21.8238 27.368H30.0558V31.16H15.1278V27.824C17.4558 26.024 20.3358 23.624 22.2558 21.944C24.4158 20.072 25.4238 19.328 25.4238 17.672C25.4238 16.256 24.3198 15.296 22.5438 15.296C20.6238 15.296 19.3998 16.424 19.2798 18.296H14.8638C15.1038 14.216 18.1758 11.504 22.4718 11.504C27.1278 11.504 29.8398 13.832 29.8398 17.528C29.8398 20.168 28.1838 21.848 25.7838 24.152C24.6558 25.232 23.4558 26.216 21.8238 27.368Z",
+  "3": "M26.9678 20.936C28.8878 21.752 30.2078 23.312 30.2078 25.28C30.2078 28.952 26.6318 31.592 22.0478 31.592C17.5838 31.592 14.4398 28.856 14.0078 25.04H18.5918C18.8318 26.72 20.3438 27.824 22.1918 27.824C24.3038 27.824 25.7678 26.864 25.7678 25.304C25.7678 23.792 24.4238 23.048 21.7358 23.048H20.0798L20.0558 19.376H21.7358C23.7278 19.376 25.0478 18.608 25.0478 17.336C25.0478 16.064 23.8478 15.272 22.0718 15.272C20.0798 15.272 18.8318 16.328 18.6158 17.864H14.3438C14.8478 14.336 17.5838 11.504 22.1678 11.504C26.2478 11.504 29.4638 13.736 29.4638 16.952C29.4638 18.632 28.6478 20 26.9678 20.936Z",
+  "4": "M27.304 24.248H29.56V27.992H27.304V31.16H22.912V27.992H13.504L13.48 25.112L23.8 11.624H27.304V24.248ZM22.912 18.776L18.904 24.248H22.912V18.776Z",
+  "5": "M23.6721 18.344C27.7041 18.344 30.5361 20.768 30.5361 24.416C30.5361 28.616 27.5601 31.496 23.0961 31.496C18.8961 31.496 16.0641 29.312 15.2241 25.616H19.8801C20.1681 26.792 21.4401 27.704 23.0961 27.704C24.8721 27.704 26.1921 26.504 26.1921 24.656C26.1921 22.976 24.8961 21.8 22.8801 21.8C21.7521 21.8 20.5041 22.304 19.6161 23.288L15.8001 22.496L16.6641 11.864H29.1921V15.656H20.5041L20.2401 19.16C21.2721 18.632 22.4481 18.344 23.6721 18.344Z",
+  "6": "M22.1678 31.496C17.3198 31.496 14.0078 28.088 14.0078 21.464C14.0078 15.032 17.4398 11.504 22.4318 11.504C26.4638 11.504 29.2718 13.904 29.8238 17.048H25.5998C25.3358 15.896 24.0158 15.08 22.5758 15.08C20.2478 15.08 18.6878 16.664 18.3518 19.88C19.4318 18.968 20.7998 18.368 22.4318 18.368C27.1118 18.368 29.8478 20.816 29.8478 24.68C29.8478 28.352 26.7278 31.496 22.1678 31.496ZM22.2158 27.872C24.3278 27.872 25.7198 26.696 25.7198 24.848C25.7198 23.048 24.3758 21.848 22.3118 21.848C19.8398 21.848 18.6878 23.24 18.6878 24.848C18.8078 26.384 20.0798 27.872 22.2158 27.872Z",
+  "7": "M22.5359 32.16H17.9039L25.5839 16.656H15.6719V12.864H30.4799V15.576L22.5359 32.16Z",
+  "8": "M22.9278 31.688C18.1278 31.688 15.0078 29.216 15.0078 25.448C15.0078 23.552 15.8958 21.992 17.6718 20.96C16.3038 19.88 15.6558 18.488 15.6318 17C15.5838 13.616 18.3918 11.504 22.7838 11.504C27.1518 11.504 29.9838 13.52 29.9838 17C29.9838 18.392 29.3838 19.76 28.0638 20.816C29.9358 21.872 30.8718 23.48 30.8718 25.448C30.8718 29.216 27.7278 31.688 22.9278 31.688ZM22.7838 19.448C24.5838 19.448 25.7598 18.68 25.7598 17.408C25.7598 16.064 24.5838 15.32 22.7838 15.32C20.9838 15.32 19.8078 16.064 19.8078 17.408C19.8078 18.68 20.9838 19.448 22.7838 19.448ZM22.9518 27.848C24.9438 27.848 26.4318 26.72 26.4318 25.208C26.4318 23.744 24.9438 22.88 22.9518 22.88C20.9598 22.88 19.4718 23.744 19.4718 25.208C19.4718 26.72 20.9598 27.848 22.9518 27.848Z",
+  "9": "M22.6878 12.504C27.5358 12.504 30.8478 15.912 30.8478 22.536C30.8478 28.968 27.4158 32.496 22.4238 32.496C18.3918 32.496 15.5838 30.096 15.0318 26.952H19.2558C19.5198 28.104 20.8398 28.92 22.2798 28.92C24.6078 28.92 26.1678 27.336 26.5038 24.12C25.4238 25.032 24.0558 25.632 22.4238 25.632C17.7438 25.632 15.0078 23.184 15.0078 19.32C15.0078 15.648 18.1278 12.504 22.6878 12.504ZM22.6398 16.128C20.5278 16.128 19.1358 17.304 19.1358 19.152C19.1358 20.952 20.4798 22.152 22.5438 22.152C25.0158 22.152 26.1678 20.76 26.1678 19.152C26.0478 17.616 24.7758 16.128 22.6398 16.128Z",
+  "A": "M32 31.9756L27.3799 31.9758L26.1776 28.4636L18.8937 28.4639L17.6446 31.9763L13.0008 31.9765L20.2131 13.0005L25.0218 13.0003L32 31.9756ZM21.9106 20.0014L20.19 24.8338L24.9281 24.8336L23.2542 20.0013C22.9949 19.2706 22.877 18.6577 22.5941 17.9506C22.3348 18.6578 22.1699 19.2471 21.9106 20.0014Z",
+  "B": "M27.4281 21.5321C29.3345 22.087 30.9997 23.7761 30.9998 25.948C30.9999 29.3023 28.5145 31.4259 23.5434 31.4262L15.0009 31.4265L15 12.0007L23.5425 12.0003C28.0069 12.0001 30.2994 14.0753 30.2996 17.1883C30.2997 19.3843 29.2621 20.7598 27.4281 21.5321ZM22.867 15.7166L19.3921 15.7168L19.3923 20.0845L22.8672 20.0844C24.8701 20.0843 25.8595 19.2397 25.8594 17.6711C25.8594 16.4645 24.8458 15.7165 22.867 15.7166ZM19.3926 27.686L23.4467 27.6858C25.5461 27.6857 26.5596 26.8893 26.5596 25.5862C26.5595 24.1142 25.5701 23.3903 23.4465 23.3904L19.3924 23.3906L19.3926 27.686Z",
+  "C": "M23.5897 31.0006C18.2359 31.0008 15.0007 27.3331 15.0004 21.4781C15.0002 15.7826 18.349 12.0234 23.5888 12.0004C28.2591 12.0002 31.4943 14.9389 31.9729 18.903L27.7355 18.9031C27.4392 16.7616 25.7077 15.6226 23.5662 15.6227C20.7868 15.6228 19.1922 17.9239 19.1923 21.4323C19.1925 25.0319 20.7645 27.3556 23.6806 27.3555C25.9133 27.3554 27.4624 26.1251 27.7129 24.2114L31.9732 24.2112C31.6316 28.2436 28.1916 31.0004 23.5897 31.0006Z",
+  "D": "M21.3962 12.0004C27.7451 12.0002 31.3564 15.3043 31.3567 21.1812C31.3569 27.365 27.6516 30.9999 21.397 31.0002L15.0008 31.0004L15 12.0007L21.3962 12.0004ZM19.2963 27.2711L21.3968 27.271C25.126 27.2709 27.0141 25.1466 27.0139 21.1814C27.0137 17.5939 25.1491 15.7058 21.3963 15.706L19.2957 15.7061L19.2963 27.2711Z",
+  "E": "M20.3484 23.2524L20.3486 27.2897L29.9999 27.2892L30.0001 31.231L16.0009 31.2316L16 12.0006L29.7364 12L29.7366 15.7745L20.348 15.775L20.3482 19.4778L29.0201 19.4774L29.0202 23.252L20.3484 23.2524Z"
+};
+var NumbersIcon = function NumbersIcon(_ref) {
+  var value = _ref.value,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 45 : _ref$size,
+    color = _ref.color,
+    textColor = _ref.textColor,
+    _ref$pathColor = _ref.pathColor,
+    pathColor = _ref$pathColor === void 0 ? "#fff" : _ref$pathColor;
+  var theme = material.useTheme();
+  var path = numberPaths[value.toString()];
+  return jsxRuntime.jsxs("svg", {
+    width: size,
+    height: size,
+    viewBox: "0 0 45 45",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [jsxRuntime.jsx("circle", {
+      cx: "22.5",
+      cy: "22.5",
+      r: "22.5",
+      fill: color || theme.palette.primary.main
+    }), path ? jsxRuntime.jsx("path", {
+      d: path,
+      fill: pathColor || theme.palette.text.primary
+    }) : jsxRuntime.jsx("text", {
+      x: "50%",
+      y: "50%",
+      dominantBaseline: "middle",
+      textAnchor: "middle",
+      fontSize: size * 0.5,
+      fill: textColor || theme.palette.text.primary,
+      fontFamily: "Arial, sans-serif",
+      fontWeight: "bold",
+      children: value
+    })]
+  });
+};
+
+exports.default = NumbersIcon;

package/cjs/icons/ScrollMoreIcon.d.ts

@@ -2,6 +2,8 @@ import { IconProps } from "./_types";
 interface ScrollMoreIconProps extends IconProps {
     bgColor?: string;
     arrowColor?: string;
+    bgOpacity?: number;
+    arrowOpacity?: number;
 }
-declare const ScrollMoreIcon: ({ size, bgColor, arrowColor, ...other }: ScrollMoreIconProps) => import("react/jsx-runtime").JSX.Element;
+declare const ScrollMoreIcon: ({ size, bgColor, arrowColor, bgOpacity, arrowOpacity, ...other }: ScrollMoreIconProps) => import("react/jsx-runtime").JSX.Element;
 export default ScrollMoreIcon;

package/cjs/icons/ScrollMoreIcon.js

@@ -12,7 +12,11 @@ var ScrollMoreIcon = function ScrollMoreIcon(_a) {
     bgColor = _a$bgColor === void 0 ? "#7D89C2" : _a$bgColor,
     _a$arrowColor = _a.arrowColor,
     arrowColor = _a$arrowColor === void 0 ? "white" : _a$arrowColor,
-    other = tslib.__rest(_a, ["size", "bgColor", "arrowColor"]);
+    _a$bgOpacity = _a.bgOpacity,
+    bgOpacity = _a$bgOpacity === void 0 ? 1 : _a$bgOpacity,
+    _a$arrowOpacity = _a.arrowOpacity,
+    arrowOpacity = _a$arrowOpacity === void 0 ? 1 : _a$arrowOpacity,
+    other = tslib.__rest(_a, ["size", "bgColor", "arrowColor", "bgOpacity", "arrowOpacity"]);
   return jsxRuntime.jsxs("svg", Object.assign({
     width: size,
     height: size,
@@ -24,10 +28,12 @@ var ScrollMoreIcon = function ScrollMoreIcon(_a) {
       width: "36",
       height: "36",
       rx: "16",
-      fill: bgColor
+      fill: bgColor,
+      opacity: bgOpacity
     }), jsxRuntime.jsx("path", {
       d: "M17.1914 22.4336L12.6914 17.9336C12.375 17.6172 12.2695 17.125 12.4453 16.7031C12.6211 16.2812 13.043 16 13.5 16H22.5C22.957 16 23.3438 16.2812 23.5195 16.7031C23.6953 17.125 23.5898 17.6172 23.2734 17.9336L18.7734 22.4336C18.3516 22.8906 17.6133 22.8906 17.1914 22.4336Z",
-      fill: arrowColor
+      fill: arrowColor,
+      opacity: arrowOpacity
     })]
   }));
 };

package/cjs/icons/index.d.ts

@@ -11,3 +11,4 @@ export { default as Send } from './Send';
 export { default as QuestionBubble } from './QuestionBubble';
 export { default as SearchIcon } from './SearchIcon';
 export { default as MoreColumn } from './MoreColumn';
+export { default as NumbersIcon } from './Numbers';

package/cjs/icons/index.js

@@ -13,6 +13,7 @@ var Send = require('./Send.js');
 var QuestionBubble = require('./QuestionBubble.js');
 var SearchIcon = require('./SearchIcon.js');
 var MoreColumn = require('./MoreColumn.js');
+var Numbers = require('./Numbers.js');
 
 
 
@@ -29,3 +30,4 @@ exports.Send = Send.default;
 exports.QuestionBubble = QuestionBubble.default;
 exports.SearchIcon = SearchIcon.default;
 exports.MoreColumn = MoreColumn.default;
+exports.NumbersIcon = Numbers.default;

package/cjs/index.js

@@ -17,6 +17,7 @@ var Tooltip = require('./components/tooltip/Tooltip.js');
 var AIDTTypography = require('./components/AIDTTypography/AIDTTypography.js');
 var AdaptiveImage = require('./components/AdaptiveImage/AdaptiveImage.js');
 var SubtitleButton = require('./components/subtitle-button/SubtitleButton.js');
+var UnderlineTextInput = require('./components/underline-textinput/UnderlineTextInput.js');
 var createAIDTTheme = require('./theme/createAIDTTheme.js');
 var index = require('./tokens/colors/index.js');
 var breakpoints = require('./tokens/breakpoints/breakpoints.js');
@@ -33,6 +34,7 @@ var Send = require('./icons/Send.js');
 var QuestionBubble = require('./icons/QuestionBubble.js');
 var SearchIcon = require('./icons/SearchIcon.js');
 var MoreColumn = require('./icons/MoreColumn.js');
+var Numbers = require('./icons/Numbers.js');
 require('@mui/material');
 var mint = require('./tokens/colors/mint.js');
 var bluepurple = require('./tokens/colors/bluepurple.js');
@@ -64,6 +66,7 @@ exports.EliceTooltip = Tooltip.default;
 exports.AIDTTypography = AIDTTypography.default;
 exports.EliceImage = AdaptiveImage.default;
 exports.EliceSubButton = SubtitleButton.default;
+exports.UnderlineTextInput = UnderlineTextInput.default;
 exports.createAIDTTheme = createAIDTTheme.createAIDTTheme;
 exports.colors = index;
 exports.breakpoints = breakpoints.breakpoints;
@@ -80,6 +83,7 @@ exports.Send = Send.default;
 exports.QuestionBubble = QuestionBubble.default;
 exports.SearchIcon = SearchIcon.default;
 exports.MoreColumn = MoreColumn.default;
+exports.NumbersIcon = Numbers.default;
 exports.mint = mint.mint;
 exports.bluepurple = bluepurple.bluepurple;
 exports.gray = gray.gray;

package/cjs/palettes/index.d.ts

@@ -1,3 +1,3 @@
 export * from './eliceDefault';
-export * from './type1';
-export * from './type2';
+export * from './visang';
+export * from './miraeN';

package/cjs/palettes/index.js

@@ -1,11 +1,11 @@
 'use strict';
 
 var eliceDefault = require('./eliceDefault.js');
-var type1 = require('./type1.js');
-var type2 = require('./type2.js');
+var visang = require('./visang.js');
+var miraeN = require('./miraeN.js');
 
 
 
 exports.elicePalettes = eliceDefault.elicePalettes;
-exports.type1Palettes = type1.type1Palettes;
-exports.type2Palettes = type2.type2Palettes;
+exports.visangPalettes = visang.visangPalettes;
+exports.miraeNPalettes = miraeN.miraeNPalettes;

package/cjs/palettes/miraeN.d.ts

@@ -0,0 +1,2 @@
+import type { PublisherSubjects } from './types';
+export declare const miraeNPalettes: PublisherSubjects;

package/cjs/palettes/{type1.js → miraeN.js}

@@ -10,7 +10,7 @@ var purple = require('../tokens/colors/purple.js');
 var yellow = require('../tokens/colors/yellow.js');
 var bluesky = require('../tokens/colors/bluesky.js');
 
-var type1Palettes = {
+var miraeNPalettes = {
   korean: {
     elementary: {
       primary: bluepurple.bluepurple[300],
@@ -151,4 +151,4 @@ var type1Palettes = {
   }
 };
 
-exports.type1Palettes = type1Palettes;
+exports.miraeNPalettes = miraeNPalettes;

package/cjs/palettes/types.d.ts

@@ -18,4 +18,4 @@ export interface PublisherSubjects {
     science: SubjectLevels;
     socialStudy: SubjectLevels;
 }
-export type Publisher = 'elice' | 'type1' | 'type2';
+export type Publisher = 'elice' | 'visang' | 'miraeN';

package/cjs/palettes/visang.d.ts

@@ -0,0 +1,2 @@
+import type { PublisherSubjects } from './types';
+export declare const visangPalettes: PublisherSubjects;

package/cjs/palettes/{type2.js → visang.js}

@@ -10,7 +10,7 @@ var purple = require('../tokens/colors/purple.js');
 var yellow = require('../tokens/colors/yellow.js');
 var bluesky = require('../tokens/colors/bluesky.js');
 
-var type2Palettes = {
+var visangPalettes = {
   korean: {
     elementary: {
       primary: bluepurple.bluepurple[300],
@@ -151,4 +151,4 @@ var type2Palettes = {
   }
 };
 
-exports.type2Palettes = type2Palettes;
+exports.visangPalettes = visangPalettes;

package/cjs/theme/AIDTTheme.js

@@ -1,18 +1,18 @@
 'use strict';
 
 var eliceDefault = require('../palettes/eliceDefault.js');
-var type2 = require('../palettes/type2.js');
-var type1 = require('../palettes/type1.js');
+var miraeN = require('../palettes/miraeN.js');
+var visang = require('../palettes/visang.js');
 
 var getThemeColors = function getThemeColors(publisher, subject, level) {
   var _a;
   var AIDTThemeColors;
   switch (publisher) {
-    case 'type1':
-      AIDTThemeColors = type1.type1Palettes;
+    case 'visang':
+      AIDTThemeColors = visang.visangPalettes;
       break;
-    case 'type2':
-      AIDTThemeColors = type2.type2Palettes;
+    case 'miraeN':
+      AIDTThemeColors = miraeN.miraeNPalettes;
       break;
     default:
       AIDTThemeColors = eliceDefault.elicePalettes;