@elicecontents/content-ui 0.0.0 → 1.0.0

package/es/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/es/icons/QuestionBubble.js

@@ -0,0 +1,24 @@
+import { __rest } from 'tslib';
+import { jsx } from '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 = __rest(_a, ["size", "color"]);
+  return 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: 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
+    })
+  }));
+};
+
+export { QuestionBubble as default };

package/es/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/es/icons/SearchIcon.js

@@ -0,0 +1,24 @@
+import { __rest } from 'tslib';
+import { jsx } from '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 = __rest(_a, ["size", "color"]);
+  return 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: 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
+    })
+  }));
+};
+
+export { SearchIcon as default };

package/es/icons/_types.d.ts

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

package/es/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/es/icons/index.js

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

package/es/index.d.ts

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

package/es/index.js

@@ -14,6 +14,20 @@ export { default as EliceTextarea } from './components/textarea/Textarea.js';
 export { default as EliceTooltip } from './components/tooltip/Tooltip.js';
 export { default as AIDTTypography } from './components/AIDTTypography/AIDTTypography.js';
 export { default as EliceImage } from './components/AdaptiveImage/AdaptiveImage.js';
+export { default as EliceSubButton } from './components/subtitle-button/SubtitleButton.js';
+export { default as ArrowLeft } from './icons/ArrowLeft.js';
+export { default as ArrowRight } from './icons/ArrowRight.js';
+export { default as Close } from './icons/Close.js';
+export { default as Micro } from './icons/Micro.js';
+export { default as Reset } from './icons/Reset.js';
+export { default as SelectedCheckbox } from './icons/SelectedCheckbox.js';
+export { default as SelectedRadio } from './icons/SelectedRadio.js';
+export { default as UnselectedCheckbox } from './icons/UnselectedCheckbox.js';
+export { default as UnselectedRadio } from './icons/UnselectedRadio.js';
+export { default as Send } from './icons/Send.js';
+export { default as QuestionBubble } from './icons/QuestionBubble.js';
+export { default as SearchIcon } from './icons/SearchIcon.js';
+export { default as MoreColumn } from './icons/MoreColumn.js';
 export { createAIDTTheme } from './theme/createAIDTTheme.js';
 export { mint } from './tokens/colors/mint.js';
 export { bluepurple } from './tokens/colors/bluepurple.js';

package/es/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/es/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/es/tokens/breakpoints/breakpoints.js

@@ -1,5 +1,5 @@
 var breakpoints = Object.freeze({
-  xs: 0,
+  xs: 390,
   sm: 512,
   md: 768,
   lg: 1024,

package/es/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;
     };
 };

package/es/typography/typography.js

@@ -10,12 +10,6 @@ var createAIDTTypography = function createAIDTTypography(fontFamily) {
       fontWeight: 900,
       fontDisplay: 'swap',
       src: "url('https://cdnjs.cloudflare.com/ajax/libs/pretendard/1.3.9/static/pretendard.css') format('woff2')"
-    }, {
-      fontFamily: 'Pretendard',
-      fontStyle: 'normal',
-      fontWeight: 800,
-      fontDisplay: 'swap',
-      src: "url('https://cdnjs.cloudflare.com/ajax/libs/pretendard/1.3.9/static/Pretendard-Bold.min.css') format('woff2')"
     }, {
       fontFamily: 'Pretendard',
       fontStyle: 'normal',
@@ -28,30 +22,12 @@ var createAIDTTypography = function createAIDTTypography(fontFamily) {
       fontWeight: 500,
       fontDisplay: 'swap',
       src: "url('https://cdnjs.cloudflare.com/ajax/libs/pretendard/1.3.9/static/Pretendard-Medium.min.css') format('woff2')"
-    }, {
-      fontFamily: 'Pretendard',
-      fontStyle: 'normal',
-      fontWeight: 400,
-      fontDisplay: 'swap',
-      src: "url('https://cdnjs.cloudflare.com/ajax/libs/pretendard/1.3.9/static/Pretendard-Regular.min.css') format('woff2')"
-    }, {
-      fontFamily: 'Pretendard',
-      fontStyle: 'normal',
-      fontWeight: 300,
-      fontDisplay: 'swap',
-      src: "url('https://cdnjs.cloudflare.com/ajax/libs/pretendard/1.3.9/static/Pretendard-Light.min.css') format('woff2')"
     }, {
       fontFamily: 'EliceDXNeolli',
       fontStyle: 'normal',
       fontWeight: 900,
       fontDisplay: 'swap',
       src: "url(https://cdn.jsdelivr.net/gh/fonts-archive/EliceDXNeolli/EliceDXNeolli-Bold.woff2) format('woff2')"
-    }, {
-      fontFamily: 'EliceDXNeolli',
-      fontStyle: 'normal',
-      fontWeight: 800,
-      fontDisplay: 'swap',
-      src: "url(https://cdn.jsdelivr.net/gh/fonts-archive/EliceDXNeolli/EliceDXNeolli-Bold.woff2) format('woff2')"
     }, {
       fontFamily: 'EliceDXNeolli',
       fontStyle: 'normal',
@@ -64,118 +40,61 @@ var createAIDTTypography = function createAIDTTypography(fontFamily) {
       fontWeight: 500,
       fontDisplay: 'swap',
       src: "url(https://cdn.jsdelivr.net/gh/fonts-archive/EliceDXNeolli/EliceDXNeolli-Medium.woff2) format('woff2')"
-    }, {
-      fontFamily: 'EliceDXNeolli',
-      fontStyle: 'normal',
-      fontWeight: 400,
-      fontDisplay: 'swap',
-      src: "url('https://cdn.jsdelivr.net/gh/fonts-archive/EliceDXNeolli/EliceDXNeolli-Medium.woff2') format('woff2')"
-    }, {
-      fontFamily: 'EliceDXNeolli',
-      fontStyle: 'normal',
-      fontWeight: 300,
-      fontDisplay: 'swap',
-      src: "url('https://cdn.jsdelivr.net/gh/fonts-archive/EliceDXNeolli/EliceDXNeolli-Light.woff2') format('woff2')"
     }],
-    h1: _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
-      fontSize: '3.5rem'
-    }, "@media (max-width:1279px)", {
-      fontSize: '2.75rem'
-    }), "@media (max-height:800px)", {
-      fontSize: '2rem'
-    }), "@media (max-width:1023px)", {
-      fontSize: '2rem'
-    }), "fontWeight", 800), "lineHeight", 1.18),
-    h2: _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
-      fontSize: '3rem'
-    }, "@media (max-width:1279px)", {
-      fontSize: '2.5rem'
-    }), "@media (max-height:800px)", {
-      fontSize: '1.75rem'
-    }), "@media (max-width:1023px)", {
-      fontSize: '1.75rem'
-    }), "fontWeight", 800), "lineHeight", 1.2),
-    h3: _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
-      fontSize: '2.25rem'
-    }, "@media (max-width:1279px)", {
-      fontSize: '2.25rem'
-    }), "@media (max-height:800px)", {
-      fontSize: '1.625rem'
-    }), "@media (max-width:1023px)", {
-      fontSize: '1.625rem'
-    }), "fontWeight", 800), "lineHeight", 1.2),
-    h4: _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
-      fontSize: '2rem'
-    }, "@media (max-width:1279px)", {
-      fontSize: '2rem'
-    }), "@media (max-height:800px)", {
-      fontSize: '1.5rem'
-    }), "@media (max-width:1023px)", {
-      fontSize: '1.5rem'
-    }), "fontWeight", 800), "lineHeight", 1.24),
-    h5: _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
-      fontSize: '1.75rem'
-    }, "@media (max-width:1279px)", {
-      fontSize: '1.75rem'
-    }), "@media (max-height:800px)", {
-      fontSize: '1.375rem'
-    }), "@media (max-width:1023px)", {
-      fontSize: '1.375rem'
-    }), "fontWeight", 800), "lineHeight", 1.28),
-    h6: _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
-      fontSize: '1.5rem'
-    }, "@media (max-width:1279px)", {
-      fontSize: '1.5rem'
-    }), "@media (max-height:800px)", {
-      fontSize: '1.25rem'
-    }), "@media (max-width:1023px)", {
-      fontSize: '1.25rem'
-    }), "fontWeight", 800), "lineHeight", 1.24),
-    subtitle1: _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
-      fontSize: '1.25rem'
-    }, "@media (max-width:1279px)", {
-      fontSize: '1.2rem'
-    }), "@media (max-height:800px)", {
-      fontSize: '1.125rem'
-    }), "@media (max-width:1023px)", {
-      fontSize: '1.125rem'
-    }), "fontWeight", 800), "lineHeight", 1.4),
-    subtitle2: _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
-      fontSize: '1.125rem'
-    }, "@media (max-width:1279px)", {
-      fontSize: '1.1rem'
-    }), "@media (max-height:800px)", {
-      fontSize: '1rem'
-    }), "@media (max-width:1023px)", {
-      fontSize: '1rem'
-    }), "fontWeight", 800), "lineHeight", 1.32),
-    body1: _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
-      fontSize: '1rem'
-    }, "@media (max-width:1279px)", {
-      fontSize: '1rem'
-    }), "@media (max-height:800px)", {
-      fontSize: '0.9375rem'
-    }), "@media (max-width:1023px)", {
-      fontSize: '0.9375rem'
-    }), "fontWeight", 500), "lineHeight", 1.48),
-    body2: _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
-      fontSize: '0.875rem'
-    }, "@media (max-width:1279px)", {
-      fontSize: '0.875rem'
-    }), "@media (max-height:800px)", {
-      fontSize: '0.8125rem'
-    }), "@media (max-width:1023px)", {
-      fontSize: '0.8125rem'
-    }), "fontWeight", 500), "lineHeight", 1.4),
-    caption: _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
-      fontSize: '0.75rem'
-    }, "@media (max-width:1279px)", {
-      fontSize: '0.75rem'
-    }), "@media (max-height:800px)", {
-      fontSize: '0.6875rem'
-    }), "@media (max-width:1023px)", {
-      fontSize: '0.6875rem'
-    }), "fontWeight", 500), "lineHeight", 1.32)
+    h1: _defineProperty(_defineProperty({
+      fontSize: '20px',
+      fontWeight: 700,
+      lineHeight: '140%'
+    }, "@media (max-width:1200px)", {
+      fontSize: '20px'
+    }), "@media (max-width:512px)", {
+      fontSize: '22px'
+    }),
+    subtitle1: _defineProperty(_defineProperty({
+      fontSize: '26px',
+      fontWeight: 700,
+      lineHeight: '140%'
+    }, "@media (max-width:1200px)", {
+      fontSize: '26px'
+    }), "@media (max-width:512px)", {
+      fontSize: '22px'
+    }),
+    subtitle2: _defineProperty(_defineProperty({
+      fontSize: '20px',
+      fontWeight: 700,
+      lineHeight: '140%'
+    }, "@media (max-width:1200px)", {
+      fontSize: '20px'
+    }), "@media (max-width:512px)", {
+      fontSize: '16px'
+    }),
+    body1: _defineProperty(_defineProperty({
+      fontSize: '20px',
+      fontWeight: 500,
+      lineHeight: '140%'
+    }, "@media (max-width:1200px)", {
+      fontSize: '20px'
+    }), "@media (max-width:512px)", {
+      fontSize: '16px'
+    }),
+    buttoninput: _defineProperty(_defineProperty({
+      fontSize: '20px',
+      fontWeight: 700,
+      lineHeight: '140%'
+    }, "@media (max-width:1200px)", {
+      fontSize: '20px'
+    }), "@media (max-width:512px)", {
+      fontSize: '16px'
+    }),
+    pagination: _defineProperty(_defineProperty({
+      fontSize: '32px',
+      fontWeight: 900,
+      lineHeight: '140%'
+    }, "@media (max-width:1200px)", {
+      fontSize: '32px'
+    }), "@media (max-width:512px)", {
+      fontSize: '24px'
+    })
   };
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elicecontents/content-ui",
-  "version": "0.0.0",
+  "version": "1.0.0",
   "description": "A set of UI components for creating content of Elice",
   "author": "Elice <contact@elice.io>",
   "license": "UNLICENSED",
@@ -28,6 +28,7 @@
     "clean": "del-cli \"buildcache/*\" \"es/*\" \"cjs/*\""
   },
   "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",