@elicecontents/content-ui 0.0.0 → 1.0.0

package/cjs/hooks/useAIDTMediaQuery.js

@@ -0,0 +1,24 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var material = require('@mui/material');
+var breakpoints = require('../tokens/breakpoints/breakpoints.js');
+
+var useAIDTMediaQuery = function useAIDTMediaQuery() {
+  var theme = material.useTheme();
+  var isMobile = material.useMediaQuery(theme.breakpoints.down(breakpoints.breakpoints.xs)); // 390px 이하
+  var isMiniTablet = material.useMediaQuery(theme.breakpoints.down(breakpoints.breakpoints.sm)); // 512px 이하
+  var isTablet = material.useMediaQuery(theme.breakpoints.down(breakpoints.breakpoints.md)); // 768px 이하
+  var isNotebook = material.useMediaQuery(theme.breakpoints.down(breakpoints.breakpoints.lg)); // 1024px 이하
+  var isDesktop = material.useMediaQuery(theme.breakpoints.up(breakpoints.breakpoints.lg + 1)); // 1025px 이상
+  return {
+    isMobile: isMobile,
+    isMiniTablet: isMiniTablet,
+    isTablet: isTablet,
+    isNotebook: isNotebook,
+    isDesktop: isDesktop
+  };
+};
+
+exports.default = useAIDTMediaQuery;

package/cjs/icons/ArrowLeft.js

@@ -7,19 +7,19 @@ var jsxRuntime = require('react/jsx-runtime');
 
 var ArrowLeft = function ArrowLeft(_a) {
   var _a$size = _a.size,
-    size = _a$size === void 0 ? 16 : _a$size,
+    size = _a$size === void 0 ? 36 : _a$size,
     _a$color = _a.color,
     color = _a$color === void 0 ? 'currentColor' : _a$color,
     other = tslib.__rest(_a, ["size", "color"]);
   return jsxRuntime.jsx("svg", Object.assign({
-    height: size,
     width: size,
-    viewBox: "0 0 16 16",
+    height: size,
+    viewBox: "0 0 36 36",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
   }, other, {
     children: jsxRuntime.jsx("path", {
-      d: "M10.4986 2.3535C10.6938 2.15826 11.0104 2.15827 11.2056 2.35352L11.4414 2.58924C11.6366 2.7845 11.6366 3.1011 11.4413 3.29636L6.60933 8.12799L11.4414 12.9599C11.6366 13.1551 11.6366 13.4717 11.4414 13.667L11.2057 13.9027C11.0104 14.0979 10.6938 14.0979 10.4986 13.9027L5.19526 8.59939C4.95494 8.35934 4.93645 7.98118 5.1398 7.71965L5.2 7.65133L10.4986 2.3535Z",
+      d: "M22.1673 4.21094L24.2886 6.33226L12.621 17.9989L24.2886 29.6662L22.1673 31.7875L9.43934 19.0596C8.89861 18.5195 8.85702 17.6686 9.31456 17.0802L9.45 16.9264L22.1673 4.21094Z",
       fill: color
     })
   }));

package/cjs/icons/ArrowRight.js

@@ -7,27 +7,20 @@ var jsxRuntime = require('react/jsx-runtime');
 
 var ArrowRight = function ArrowRight(_a) {
   var _a$size = _a.size,
-    size = _a$size === void 0 ? 16 : _a$size,
+    size = _a$size === void 0 ? 36 : _a$size,
     _a$color = _a.color,
     color = _a$color === void 0 ? 'currentColor' : _a$color,
     other = tslib.__rest(_a, ["size", "color"]);
   return jsxRuntime.jsx("svg", Object.assign({
-    height: size,
     width: size,
-    viewBox: "0 0 16 16",
+    height: size,
+    viewBox: "0 0 36 36",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
   }, other, {
-    children: jsxRuntime.jsx("svg", {
-      width: "16",
-      height: "16",
-      viewBox: "0 0 16 16",
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg",
-      children: jsxRuntime.jsx("path", {
-        d: "M5.50144 13.7745C5.30617 13.9697 4.98961 13.9697 4.79436 13.7745L4.55865 13.5387C4.36338 13.3435 4.36338 13.0269 4.55866 12.8316L9.39067 7.99998L4.55864 3.1681C4.36338 2.97284 4.36337 2.65625 4.55864 2.46098L4.79433 2.22529C4.9896 2.03003 5.30618 2.03003 5.50144 2.22529L10.8047 7.52859C11.0451 7.76864 11.0635 8.14679 10.8602 8.40832L10.8 8.47665L5.50144 13.7745Z",
-        fill: color
-      })
+    children: jsxRuntime.jsx("path", {
+      d: "M13.8323 31.7875L11.7109 29.6662L23.3785 17.9995L11.7109 6.33226L13.8323 4.21094L26.5602 16.9389C27.1009 17.479 27.1425 18.3298 26.685 18.9183L26.5495 19.072L13.8323 31.7875Z",
+      fill: color
     })
   }));
 };

package/cjs/icons/MoreColumn.d.ts

@@ -0,0 +1,3 @@
+import { IconProps } from "./_types";
+declare const MoreColumn: ({ size, color, ...other }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export default MoreColumn;

package/cjs/icons/MoreColumn.js

@@ -0,0 +1,28 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+
+var MoreColumn = function MoreColumn(_a) {
+  var _a$size = _a.size,
+    size = _a$size === void 0 ? 6 : _a$size,
+    _a$color = _a.color,
+    color = _a$color === void 0 ? '#072567' : _a$color,
+    other = tslib.__rest(_a, ["size", "color"]);
+  return jsxRuntime.jsx("svg", Object.assign({
+    width: size,
+    height: size * (18 / 6),
+    viewBox: "0 0 6 18",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, other, {
+    children: jsxRuntime.jsx("path", {
+      d: "M3 13.5625C3.78125 13.5625 4.48438 13.9922 4.875 14.6562C5.26562 15.3594 5.26562 16.1797 4.875 16.8438C4.48438 17.5469 3.78125 17.9375 3 17.9375C2.17969 17.9375 1.47656 17.5469 1.08594 16.8438C0.695312 16.1797 0.695312 15.3594 1.08594 14.6562C1.47656 13.9922 2.17969 13.5625 3 13.5625ZM3 7.3125C3.78125 7.3125 4.48438 7.74219 4.875 8.40625C5.26562 9.10938 5.26562 9.92969 4.875 10.5938C4.48438 11.2969 3.78125 11.6875 3 11.6875C2.17969 11.6875 1.47656 11.2969 1.08594 10.5938C0.695312 9.92969 0.695312 9.10938 1.08594 8.40625C1.47656 7.74219 2.17969 7.3125 3 7.3125ZM5.1875 3.25C5.1875 4.07031 4.75781 4.77344 4.09375 5.16406C3.39062 5.55469 2.57031 5.55469 1.90625 5.16406C1.20312 4.77344 0.8125 4.07031 0.8125 3.25C0.8125 2.46875 1.20312 1.76562 1.90625 1.375C2.57031 0.984375 3.39062 0.984375 4.09375 1.375C4.75781 1.76562 5.1875 2.46875 5.1875 3.25Z",
+      fill: color
+    })
+  }));
+};
+
+exports.default = MoreColumn;

package/cjs/icons/QuestionBubble.d.ts

@@ -0,0 +1,3 @@
+import { IconProps } from "./_types";
+declare const QuestionBubble: ({ size, color, ...other }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export default QuestionBubble;

package/cjs/icons/QuestionBubble.js

@@ -0,0 +1,28 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+
+var QuestionBubble = function QuestionBubble(_a) {
+  var _a$size = _a.size,
+    size = _a$size === void 0 ? 24 : _a$size,
+    _a$color = _a.color,
+    color = _a$color === void 0 ? '#072567' : _a$color,
+    other = tslib.__rest(_a, ["size", "color"]);
+  return jsxRuntime.jsx("svg", Object.assign({
+    width: size,
+    height: size * (25 / 24),
+    viewBox: "0 0 24 25",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, other, {
+    children: jsxRuntime.jsx("path", {
+      d: "M0 3C0 1.35938 1.3125 0 3 0H21C22.6406 0 24 1.35938 24 3V16.5C24 18.1875 22.6406 19.5 21 19.5H14.4844L8.67188 23.8594C8.4375 24.0469 8.15625 24.0469 7.875 23.9531C7.64062 23.8125 7.5 23.5781 7.5 23.25V19.5H3C1.3125 19.5 0 18.1875 0 16.5V3ZM7.92188 5.53125V5.57812C7.73438 6.14062 8.01562 6.79688 8.625 7.03125C9.1875 7.21875 9.84375 6.89062 10.0312 6.32812L10.0781 6.28125C10.125 6.14062 10.2656 6 10.4062 6H13.125C13.5469 6 13.8281 6.32812 13.8281 6.75C13.8281 6.98438 13.7344 7.21875 13.5 7.35938L11.4375 8.53125C11.0625 8.71875 10.8281 9.09375 10.8281 9.51562V10.125C10.8281 10.7812 11.3438 11.25 11.9531 11.25C12.6094 11.25 13.0781 10.7812 13.0781 10.1719L14.625 9.28125C15.5156 8.76562 16.0781 7.78125 16.0781 6.70312C16.0781 5.10938 14.7656 3.75 13.125 3.75H10.4062C9.28125 3.75 8.29688 4.45312 7.92188 5.53125ZM13.5 14.25C13.5 13.4531 12.7969 12.75 12 12.75C11.1562 12.75 10.5 13.4531 10.5 14.25C10.5 15.0938 11.1562 15.75 12 15.75C12.7969 15.75 13.5 15.0938 13.5 14.25Z",
+      fill: color
+    })
+  }));
+};
+
+exports.default = QuestionBubble;

package/cjs/icons/SearchIcon.d.ts

@@ -0,0 +1,3 @@
+import { IconProps } from "./_types";
+declare const SearchIcon: ({ size, color, ...other }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export default SearchIcon;

package/cjs/icons/SearchIcon.js

@@ -0,0 +1,28 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+
+var SearchIcon = function SearchIcon(_a) {
+  var _a$size = _a.size,
+    size = _a$size === void 0 ? 24 : _a$size,
+    _a$color = _a.color,
+    color = _a$color === void 0 ? '#072567' : _a$color,
+    other = tslib.__rest(_a, ["size", "color"]);
+  return jsxRuntime.jsx("svg", Object.assign({
+    width: size,
+    height: size * (28 / 24),
+    viewBox: "0 0 24 28",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, other, {
+    children: jsxRuntime.jsx("path", {
+      d: "M6 2H13.5V8C13.5 8.84375 14.1562 9.5 15 9.5H21V23C21 24.6875 19.6406 26 18 26H6C4.3125 26 3 24.6875 3 23V5C3 3.35938 4.3125 2 6 2ZM15 2L21 8H15V2ZM15.75 16.25C15.75 13.7656 13.7344 11.75 11.25 11.75C8.76562 11.75 6.75 13.7656 6.75 16.25C6.75 18.7344 8.76562 20.75 11.25 20.75C12.0469 20.75 12.8438 20.5625 13.5 20.1406L15.3281 21.9688C15.75 22.3906 16.4531 22.3906 16.9219 21.9688C17.3438 21.5 17.3438 20.7969 16.9219 20.375L15.0938 18.5469C15.5156 17.8906 15.75 17.0938 15.75 16.25ZM11.25 18.5C10.4062 18.5 9.70312 18.0781 9.28125 17.375C8.85938 16.7188 8.85938 15.8281 9.28125 15.125C9.70312 14.4688 10.4062 14 11.25 14C12.0469 14 12.75 14.4688 13.1719 15.125C13.5938 15.8281 13.5938 16.7188 13.1719 17.375C12.75 18.0781 12.0469 18.5 11.25 18.5Z",
+      fill: color
+    })
+  }));
+};
+
+exports.default = SearchIcon;

package/cjs/icons/_types.d.ts

@@ -0,0 +1,4 @@
+export interface IconProps {
+    size?: number;
+    color?: string;
+}

package/cjs/icons/index.d.ts

@@ -8,3 +8,6 @@ export { default as SelectedRadio } from './SelectedRadio';
 export { default as UnselectedCheckbox } from './UnselectedCheckbox';
 export { default as UnselectedRadio } from './UnselectedRadio';
 export { default as Send } from './Send';
+export { default as QuestionBubble } from './QuestionBubble';
+export { default as SearchIcon } from './SearchIcon';
+export { default as MoreColumn } from './MoreColumn';

package/cjs/icons/index.js

@@ -10,6 +10,9 @@ var SelectedRadio = require('./SelectedRadio.js');
 var UnselectedCheckbox = require('./UnselectedCheckbox.js');
 var UnselectedRadio = require('./UnselectedRadio.js');
 var Send = require('./Send.js');
+var QuestionBubble = require('./QuestionBubble.js');
+var SearchIcon = require('./SearchIcon.js');
+var MoreColumn = require('./MoreColumn.js');
 
 
 
@@ -23,3 +26,6 @@ exports.SelectedRadio = SelectedRadio.default;
 exports.UnselectedCheckbox = UnselectedCheckbox.default;
 exports.UnselectedRadio = UnselectedRadio.default;
 exports.Send = Send.default;
+exports.QuestionBubble = QuestionBubble.default;
+exports.SearchIcon = SearchIcon.default;
+exports.MoreColumn = MoreColumn.default;

package/cjs/index.d.ts

@@ -1,3 +1,5 @@
 export * from './components';
 export * from './theme';
 export * from './tokens';
+export * from './icons';
+export * from './hooks';

package/cjs/index.js

@@ -16,9 +16,24 @@ var Textarea = require('./components/textarea/Textarea.js');
 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 createAIDTTheme = require('./theme/createAIDTTheme.js');
 var index = require('./tokens/colors/index.js');
 var breakpoints = require('./tokens/breakpoints/breakpoints.js');
+var ArrowLeft = require('./icons/ArrowLeft.js');
+var ArrowRight = require('./icons/ArrowRight.js');
+var Close = require('./icons/Close.js');
+var Micro = require('./icons/Micro.js');
+var Reset = require('./icons/Reset.js');
+var SelectedCheckbox = require('./icons/SelectedCheckbox.js');
+var SelectedRadio = require('./icons/SelectedRadio.js');
+var UnselectedCheckbox = require('./icons/UnselectedCheckbox.js');
+var UnselectedRadio = require('./icons/UnselectedRadio.js');
+var Send = require('./icons/Send.js');
+var QuestionBubble = require('./icons/QuestionBubble.js');
+var SearchIcon = require('./icons/SearchIcon.js');
+var MoreColumn = require('./icons/MoreColumn.js');
+require('@mui/material');
 var mint = require('./tokens/colors/mint.js');
 var bluepurple = require('./tokens/colors/bluepurple.js');
 var gray = require('./tokens/colors/gray.js');
@@ -48,9 +63,23 @@ exports.EliceTextarea = Textarea.default;
 exports.EliceTooltip = Tooltip.default;
 exports.AIDTTypography = AIDTTypography.default;
 exports.EliceImage = AdaptiveImage.default;
+exports.EliceSubButton = SubtitleButton.default;
 exports.createAIDTTheme = createAIDTTheme.createAIDTTheme;
 exports.colors = index;
 exports.breakpoints = breakpoints.breakpoints;
+exports.ArrowLeft = ArrowLeft.default;
+exports.ArrowRight = ArrowRight.default;
+exports.Close = Close.default;
+exports.Micro = Micro.default;
+exports.Reset = Reset.default;
+exports.SelectedCheckbox = SelectedCheckbox.default;
+exports.SelectedRadio = SelectedRadio.default;
+exports.UnselectedCheckbox = UnselectedCheckbox.default;
+exports.UnselectedRadio = UnselectedRadio.default;
+exports.Send = Send.default;
+exports.QuestionBubble = QuestionBubble.default;
+exports.SearchIcon = SearchIcon.default;
+exports.MoreColumn = MoreColumn.default;
 exports.mint = mint.mint;
 exports.bluepurple = bluepurple.bluepurple;
 exports.gray = gray.gray;

package/cjs/theme/createAIDTTheme.d.ts

@@ -1,5 +1,22 @@
+/// <reference types="react" />
 import type { PaletteMode, PaletteOptions, Theme } from '@mui/material';
 import type { TypographyFontFamilyType } from '../typography';
+declare module '@mui/material/styles' {
+    interface TypographyVariants {
+        pagination: React.CSSProperties;
+        buttoninput: React.CSSProperties;
+    }
+    interface TypographyVariantsOptions {
+        pagination?: React.CSSProperties;
+        buttoninput?: React.CSSProperties;
+    }
+}
+declare module '@mui/material/Typography' {
+    interface TypographyPropsVariantOverrides {
+        pagination: true;
+        buttoninput: true;
+    }
+}
 export interface MuiPalette {
     light: PaletteOptions;
     dark: PaletteOptions;

package/cjs/tokens/breakpoints/breakpoints.d.ts

@@ -1,5 +1,5 @@
 export declare const breakpoints: Readonly<{
-    xs: 0;
+    xs: 390;
     sm: 512;
     md: 768;
     lg: 1024;

package/cjs/tokens/breakpoints/breakpoints.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var breakpoints = Object.freeze({
-  xs: 0,
+  xs: 390,
   sm: 512,
   md: 768,
   lg: 1024,

package/cjs/typography/typography.d.ts

@@ -10,156 +10,68 @@ export declare const createAIDTTypography: (fontFamily: keyof typeof TYPOGRAPHY_
     }[];
     h1: {
         fontSize: string;
-        "@media (max-width:1279px)": {
-            fontSize: string;
-        };
-        "@media (max-height:800px)": {
-            fontSize: string;
-        };
-        "@media (max-width:1023px)": {
-            fontSize: string;
-        };
         fontWeight: number;
-        lineHeight: number;
-    };
-    h2: {
-        fontSize: string;
-        "@media (max-width:1279px)": {
+        lineHeight: string;
+        "@media (max-width:1200px)": {
             fontSize: string;
         };
-        "@media (max-height:800px)": {
+        "@media (max-width:512px)": {
             fontSize: string;
         };
-        "@media (max-width:1023px)": {
-            fontSize: string;
-        };
-        fontWeight: number;
-        lineHeight: number;
     };
-    h3: {
+    subtitle1: {
         fontSize: string;
-        "@media (max-width:1279px)": {
-            fontSize: string;
-        };
-        "@media (max-height:800px)": {
-            fontSize: string;
-        };
-        "@media (max-width:1023px)": {
-            fontSize: string;
-        };
         fontWeight: number;
-        lineHeight: number;
-    };
-    h4: {
-        fontSize: string;
-        "@media (max-width:1279px)": {
-            fontSize: string;
-        };
-        "@media (max-height:800px)": {
+        lineHeight: string;
+        "@media (max-width:1200px)": {
             fontSize: string;
         };
-        "@media (max-width:1023px)": {
+        "@media (max-width:512px)": {
             fontSize: string;
         };
-        fontWeight: number;
-        lineHeight: number;
     };
-    h5: {
+    subtitle2: {
         fontSize: string;
-        "@media (max-width:1279px)": {
-            fontSize: string;
-        };
-        "@media (max-height:800px)": {
-            fontSize: string;
-        };
-        "@media (max-width:1023px)": {
-            fontSize: string;
-        };
         fontWeight: number;
-        lineHeight: number;
-    };
-    h6: {
-        fontSize: string;
-        "@media (max-width:1279px)": {
+        lineHeight: string;
+        "@media (max-width:1200px)": {
             fontSize: string;
         };
-        "@media (max-height:800px)": {
+        "@media (max-width:512px)": {
             fontSize: string;
         };
-        "@media (max-width:1023px)": {
-            fontSize: string;
-        };
-        fontWeight: number;
-        lineHeight: number;
     };
-    subtitle1: {
+    body1: {
         fontSize: string;
-        "@media (max-width:1279px)": {
-            fontSize: string;
-        };
-        "@media (max-height:800px)": {
-            fontSize: string;
-        };
-        "@media (max-width:1023px)": {
-            fontSize: string;
-        };
         fontWeight: number;
-        lineHeight: number;
-    };
-    subtitle2: {
-        fontSize: string;
-        "@media (max-width:1279px)": {
-            fontSize: string;
-        };
-        "@media (max-height:800px)": {
+        lineHeight: string;
+        "@media (max-width:1200px)": {
             fontSize: string;
         };
-        "@media (max-width:1023px)": {
+        "@media (max-width:512px)": {
             fontSize: string;
         };
-        fontWeight: number;
-        lineHeight: number;
     };
-    body1: {
+    buttoninput: {
         fontSize: string;
-        "@media (max-width:1279px)": {
-            fontSize: string;
-        };
-        "@media (max-height:800px)": {
-            fontSize: string;
-        };
-        "@media (max-width:1023px)": {
-            fontSize: string;
-        };
         fontWeight: number;
-        lineHeight: number;
-    };
-    body2: {
-        fontSize: string;
-        "@media (max-width:1279px)": {
-            fontSize: string;
-        };
-        "@media (max-height:800px)": {
+        lineHeight: string;
+        "@media (max-width:1200px)": {
             fontSize: string;
         };
-        "@media (max-width:1023px)": {
+        "@media (max-width:512px)": {
             fontSize: string;
         };
-        fontWeight: number;
-        lineHeight: number;
     };
-    caption: {
+    pagination: {
         fontSize: string;
-        "@media (max-width:1279px)": {
-            fontSize: string;
-        };
-        "@media (max-height:800px)": {
+        fontWeight: number;
+        lineHeight: string;
+        "@media (max-width:1200px)": {
             fontSize: string;
         };
-        "@media (max-width:1023px)": {
+        "@media (max-width:512px)": {
             fontSize: string;
         };
-        fontWeight: number;
-        lineHeight: number;
     };
 };