@elicecontents/content-ui 0.0.0

package/cjs/components/selection/Selection.js

@@ -0,0 +1,111 @@
+'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 tokenColorTemporary = require('../tokenColorTemporary.js');
+var SelectedCheckbox = require('../../icons/SelectedCheckbox.js');
+var UnselectedCheckbox = require('../../icons/UnselectedCheckbox.js');
+var SelectedRadio = require('../../icons/SelectedRadio.js');
+var UnselectedRadio = require('../../icons/UnselectedRadio.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 EliceToggleButton = /*#__PURE__*/_styled__default.default(material.ToggleButton, {
+  target: "el6845u0"
+})("production" === "production" ? {
+  name: "hq7xwg",
+  styles: "border:none;border-radius:1.25rem!important"
+} : {
+  name: "hq7xwg",
+  styles: "border:none;border-radius:1.25rem!important",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+var EliceSelection = function EliceSelection(_ref) {
+  var type = _ref.type,
+    options = _ref.options,
+    value = _ref.value,
+    setValue = _ref.setValue,
+    _ref$orientation = _ref.orientation,
+    orientation = _ref$orientation === void 0 ? 'vertical' : _ref$orientation,
+    disabled = _ref.disabled;
+  var theme = material.useTheme();
+  var handleSelectionChange = function handleSelectionChange(event, newValue) {
+    if (!newValue || disabled) return;
+    setValue(function (prevState) {
+      if (type === 'checkbox' && Array.isArray(prevState)) {
+        var newValuesArray = Array.isArray(newValue) ? newValue : [newValue]; // ✅ newValue가 배열인지 확인
+        var updatedValues = prevState.filter(function (v) {
+          return !newValuesArray.includes(v);
+        }) // 기존 선택된 값에서 제거
+        .concat(newValuesArray.filter(function (v) {
+          return !prevState.includes(v);
+        })); // 새로운 값 추가
+        return updatedValues;
+      } else {
+        return Array.isArray(newValue) ? [newValue[0]] : [newValue]; // ✅ `radio` 모드는 단일 값 변경
+      }
+    });
+  };
+  return jsxRuntime.jsx(material.ToggleButtonGroup, {
+    orientation: orientation,
+    value: value,
+    exclusive: type === 'radio',
+    onChange: handleSelectionChange,
+    sx: {
+      backgroundColor: 'transparent',
+      gap: '1rem',
+      '> button': {
+        padding: '0 !important',
+        '&:hover': {
+          backgroundColor: 'transparent !important'
+        }
+      },
+      '.Mui-selected': {
+        backgroundColor: 'transparent !important',
+        boxShadow: 'none !important'
+      }
+    },
+    children: options.map(function (option) {
+      var isSelected = value.includes(option.value);
+      return jsxRuntime.jsx(EliceToggleButton, {
+        value: option.value,
+        children: jsxRuntime.jsxs(material.Stack, {
+          direction: "row",
+          border: "1px solid",
+          borderColor: isSelected ? theme.palette.secondary.main : tokenColorTemporary.gray300Color,
+          borderRadius: "1.25rem",
+          padding: "1rem",
+          gap: "0.75rem",
+          height: "4rem",
+          width: "22rem",
+          maxWidth: "100%",
+          boxSizing: "border-box",
+          alignItems: "center",
+          bgcolor: disabled ? tokenColorTemporary.gray100Color : '#ffffff',
+          children: [isSelected && type === 'checkbox' && jsxRuntime.jsx(SelectedCheckbox.default, {
+            color: theme.palette.secondary.main
+          }), !isSelected && type === 'checkbox' && jsxRuntime.jsx(UnselectedCheckbox.default, {
+            color: tokenColorTemporary.gray300Color
+          }), isSelected && type === 'radio' && jsxRuntime.jsx(SelectedRadio.default, {
+            color: theme.palette.secondary.main
+          }), !isSelected && type === 'radio' && jsxRuntime.jsx(UnselectedRadio.default, {
+            color: tokenColorTemporary.gray300Color
+          }), jsxRuntime.jsx(material.Stack, {
+            color: isSelected ? theme.palette.secondary.main : disabled ? tokenColorTemporary.textQuaternaryColor : tokenColorTemporary.textTeriaryColor,
+            fontSize: "1.375rem",
+            fontWeight: 700,
+            children: option.content
+          })]
+        })
+      }, option.value);
+    })
+  });
+};
+
+exports.default = EliceSelection;

package/cjs/components/selection/index.d.ts

@@ -0,0 +1,2 @@
+export { default as EliceSelection } from './Selection';
+export type { EliceSelectionProps } from './Selection';

package/cjs/components/selection/index.js

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

package/cjs/components/table/Table.d.ts

@@ -0,0 +1,11 @@
+import type { DottedPaginationProps } from '../dotted-pagination/DottedPagination';
+export type EiceTableProps = {
+    type?: 'default' | 'single';
+    rows: object[];
+    columnNames: string[];
+    tableTitleProps?: any;
+    tableValueProps?: any;
+    pagination?: DottedPaginationProps;
+};
+declare const EliceTable: ({ type, rows, columnNames, tableTitleProps, tableValueProps, pagination, }: EiceTableProps) => import("react/jsx-runtime").JSX.Element;
+export default EliceTable;

package/cjs/components/table/Table.js

@@ -0,0 +1,155 @@
+'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 DottedPagination = require('../dotted-pagination/DottedPagination.js');
+var tokenColorTemporary = require('../tokenColorTemporary.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var _styled__default = /*#__PURE__*/_interopDefaultCompat(_styled);
+
+var StyledScrollBarStack = /*#__PURE__*/_styled__default.default(material.Stack, {
+  target: "eb6djt00"
+})("width:fit-content;max-width:100%;position:relative;overflow-x:auto;box-sizing:border-box;border-radius:1.375rem;gap:0;::-webkit-scrollbar{height:0.25rem;}::-webkit-scrollbar-track{background:", function (props) {
+  var _a;
+  return (_a = props.scrollbarTrackColor) !== null && _a !== void 0 ? _a : tokenColorTemporary.gray200Color;
+}, ";border-radius:0.5rem;}::-webkit-scrollbar-thumb{background:", function (props) {
+  var _a;
+  return (_a = props.scrollbarThumbColor) !== null && _a !== void 0 ? _a : tokenColorTemporary.main300Color;
+}, ";border-radius:0.5rem;}::-webkit-scrollbar-thumb:hover{background:", function (props) {
+  var _a;
+  return (_a = props.scrollbarHoverColor) !== null && _a !== void 0 ? _a : tokenColorTemporary.main400Color;
+}, ";}");
+var EliceTable = function EliceTable(_ref) {
+  var _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'default' : _ref$type,
+    rows = _ref.rows,
+    columnNames = _ref.columnNames,
+    tableTitleProps = _ref.tableTitleProps,
+    tableValueProps = _ref.tableValueProps,
+    pagination = _ref.pagination;
+  var theme = material.useTheme();
+  if (type === 'default') {
+    return jsxRuntime.jsxs(material.Stack, {
+      gap: "2.5rem",
+      alignItems: "center",
+      children: [jsxRuntime.jsx(StyledScrollBarStack, {
+        scrollbarThumbColor: theme.palette.primary.main,
+        scrollbarHoverColor: theme.palette.secondary.main,
+        border: "1px solid ".concat(tokenColorTemporary.gray50Color),
+        children: jsxRuntime.jsxs(material.Table, {
+          children: [jsxRuntime.jsx(material.TableHead, {
+            style: {
+              backgroundColor: theme.palette.primary.light
+            },
+            children: jsxRuntime.jsx(material.TableRow, {
+              children: columnNames.map(function (name, index) {
+                return jsxRuntime.jsx(material.TableCell, Object.assign({
+                  align: "center",
+                  style: {
+                    height: '3.625rem',
+                    minWidth: '13.5rem',
+                    padding: '1rem',
+                    boxSizing: 'border-box',
+                    borderBottom: "1px solid ".concat(theme.palette.secondary.main),
+                    borderRight: index < columnNames.length - 1 ? "1px solid ".concat(theme.palette.secondary.main) : 'none',
+                    fontSize: '1rem',
+                    fontWeight: 700,
+                    color: theme.palette.primary.dark
+                  }
+                }, tableTitleProps, {
+                  children: name
+                }));
+              })
+            })
+          }), jsxRuntime.jsx(material.TableBody, {
+            children: rows.map(function (row, index) {
+              return jsxRuntime.jsx(material.TableRow, {
+                children: Object.values(row).map(function (value, index) {
+                  return jsxRuntime.jsx(material.TableCell, Object.assign({
+                    component: "th",
+                    scope: "row",
+                    align: "center",
+                    style: {
+                      height: '3.625rem',
+                      minWidth: '13.5rem',
+                      padding: '1rem',
+                      boxSizing: 'border-box',
+                      borderBottom: "1px solid ".concat(theme.palette.secondary.main),
+                      borderRight: index < Object.values(row).length - 1 ? "1px solid ".concat(theme.palette.secondary.main) : 'none',
+                      fontSize: '1rem',
+                      fontWeight: 500,
+                      color: tokenColorTemporary.textTeriaryColor
+                    }
+                  }, tableValueProps, {
+                    children: value
+                  }));
+                })
+              }, "row".concat(index));
+            })
+          })]
+        })
+      }), pagination && jsxRuntime.jsx(DottedPagination.default, Object.assign({}, pagination))]
+    });
+  } else {
+    return jsxRuntime.jsxs(material.Stack, {
+      direction: "row",
+      boxSizing: "border-box",
+      borderRadius: "1.375rem",
+      border: "1px solid ".concat(theme.palette.secondary.main),
+      overflow: "hidden",
+      width: "fit-content",
+      children: [jsxRuntime.jsx(material.Stack, {
+        gap: 0,
+        style: {
+          backgroundColor: theme.palette.primary.light
+        },
+        children: columnNames.map(function (name, index) {
+          return jsxRuntime.jsx(material.TableCell, Object.assign({
+            align: "center",
+            style: {
+              height: '3.625rem',
+              minWidth: '13.5rem',
+              padding: '1rem',
+              boxSizing: 'border-box',
+              borderRight: "1px solid ".concat(theme.palette.secondary.main),
+              borderBottom: index < columnNames.length - 1 ? "1px solid ".concat(theme.palette.secondary.main) : 'none',
+              fontSize: '1rem',
+              fontWeight: 700,
+              color: theme.palette.primary.dark
+            }
+          }, tableTitleProps, {
+            children: name
+          }));
+        })
+      }), jsxRuntime.jsx(material.Stack, {
+        gap: 0,
+        children: Object.values(rows[0]).map(function (value, index) {
+          return jsxRuntime.jsx(material.TableCell, Object.assign({
+            component: "th",
+            scope: "row",
+            align: "center",
+            style: {
+              height: '3.625rem',
+              minWidth: '13.5rem',
+              padding: '1rem',
+              boxSizing: 'border-box',
+              borderBottom: index < Object.values(rows[0]).length - 1 ? "1px solid ".concat(theme.palette.secondary.main) : 'none',
+              fontSize: '1rem',
+              fontWeight: 500,
+              color: tokenColorTemporary.textTeriaryColor
+            }
+          }, tableValueProps, {
+            children: value
+          }));
+        })
+      })]
+    });
+  }
+};
+
+exports.default = EliceTable;

package/cjs/components/table/index.d.ts

@@ -0,0 +1,2 @@
+export { default as EliceTable } from './Table';
+export type { EiceTableProps } from './Table';

package/cjs/components/table/index.js

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

package/cjs/components/textarea/Textarea.d.ts

@@ -0,0 +1,3 @@
+import type { InputProps } from '@mui/material';
+declare const EliceTextarea: ({ rows, placeholder, ...rest }: InputProps) => import("react/jsx-runtime").JSX.Element;
+export default EliceTextarea;

package/cjs/components/textarea/Textarea.js

@@ -0,0 +1,58 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _styled = require('@emotion/styled/base');
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var material = require('@mui/material');
+var tokenColorTemporary = require('../tokenColorTemporary.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var _styled__default = /*#__PURE__*/_interopDefaultCompat(_styled);
+
+var StyledTextareaContainer = /*#__PURE__*/_styled__default.default(material.Stack, {
+  target: "eo1d81o1"
+})("border:1px solid ", function (props) {
+  var _a;
+  return (_a = props.borderColor) !== null && _a !== void 0 ? _a : tokenColorTemporary.main200Color;
+}, ";border-radius:1.5rem;padding:1.375rem 1.5rem;");
+var StyledTextarea = /*#__PURE__*/_styled__default.default(material.Input, {
+  target: "eo1d81o0"
+})("width:100%;border:none!important;background-color:#ffffff;font-size:", function (props) {
+  return props.fontSize;
+}, ";font-weight:", function (props) {
+  return props.fontWeight;
+}, ";line-height:", function (props) {
+  return props.lineHeight;
+}, ";outline:none;resize:none;color:", function (props) {
+  var _a;
+  return (_a = props.fontColor) !== null && _a !== void 0 ? _a : tokenColorTemporary.secondaryColor;
+}, ";::placeholder{color:", function (props) {
+  var _a;
+  return (_a = props.fontColor) !== null && _a !== void 0 ? _a : tokenColorTemporary.gray300Color;
+}, ";}::before{border:none;}:hover{::before{border:none!important;}}::after{border-bottom:none!important;}");
+var EliceTextarea = function EliceTextarea(_a) {
+  var _b, _c, _d;
+  var _a$rows = _a.rows,
+    rows = _a$rows === void 0 ? 5 : _a$rows,
+    _a$placeholder = _a.placeholder,
+    placeholder = _a$placeholder === void 0 ? 'Placeholder...' : _a$placeholder,
+    rest = tslib.__rest(_a, ["rows", "placeholder"]);
+  var theme = material.useTheme();
+  return jsxRuntime.jsx(StyledTextareaContainer, {
+    borderColor: theme.palette.secondary.main,
+    children: jsxRuntime.jsx(StyledTextarea, Object.assign({
+      multiline: true,
+      rows: rows,
+      placeholder: placeholder,
+      fontColor: theme.palette.secondary.main,
+      fontWeight: (_b = theme.typography.body1.fontWeight) !== null && _b !== void 0 ? _b : '700',
+      fontSize: (_c = theme.typography.body1.fontSize) !== null && _c !== void 0 ? _c : '1.375rem',
+      lineHeight: (_d = theme.typography.body1.lineHeight) !== null && _d !== void 0 ? _d : '1.925rem'
+    }, rest))
+  });
+};
+
+exports.default = EliceTextarea;

package/cjs/components/textarea/index.d.ts

@@ -0,0 +1 @@
+export { default as EliceTextarea } from './Textarea';

package/cjs/components/textarea/index.js

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

package/cjs/components/tokenColorTemporary.d.ts

@@ -0,0 +1,23 @@
+export declare const primaryColor = "#5D6BB3";
+export declare const secondaryColor = "#0A379B";
+export declare const blackColor = "#031234";
+export declare const main50Color = "#F4F6FF";
+export declare const main100Color = "#DFE1F0";
+export declare const main200Color = "#BEC4E1";
+export declare const main300Color = "#9EA6D1";
+export declare const main400Color = "#7D89C2";
+export declare const main950Color = "#072567";
+export declare const gray50Color = "#FAFAFD";
+export declare const gray100Color = "#F3F4FA";
+export declare const gray200Color = "#F1F1F6";
+export declare const gray300Color = "#D8D8E2";
+export declare const gray400Color = "#9B9BA9";
+export declare const textPrimaryColor = "#1E1E1E";
+export declare const textSecondaryColor = "#363643";
+export declare const textTeriaryColor = "#525265";
+export declare const textQuaternaryColor = "#9FA0B1";
+export declare const quaternaryColor = "#9FA0B1";
+export declare const point3Color = "#8F68F6";
+export declare const KeyElementaryBg = "#9BCAFF";
+export declare const KeyMiddleBg = "#B2B2B2";
+export declare const KeyHighBg = "#0A379B";

package/cjs/components/tokenColorTemporary.js

@@ -0,0 +1,40 @@
+'use strict';
+
+// This is using token colors of blue-purple theme of Elice UI Content
+// https://www.figma.com/design/dtsncp7RSV7wMqPf3jiCvf/Design-System?node-id=51-10973&node-type=SECTION&t=gCjy5t3c42ojVpyW-0
+// TODO: apply theme;
+var secondaryColor = '#0A379B';
+var main200Color = '#BEC4E1';
+var main300Color = '#9EA6D1';
+var main400Color = '#7D89C2';
+var gray50Color = '#FAFAFD';
+var gray100Color = '#F3F4FA';
+var gray200Color = '#F1F1F6';
+var gray300Color = '#D8D8E2';
+var gray400Color = '#9B9BA9';
+var textPrimaryColor = '#1E1E1E';
+var textSecondaryColor = '#363643';
+var textTeriaryColor = '#525265';
+var textQuaternaryColor = '#9FA0B1';
+var point3Color = '#8F68F6';
+var KeyElementaryBg = '#9BCAFF';
+var KeyMiddleBg = '#B2B2B2';
+var KeyHighBg = '#0A379B';
+
+exports.KeyElementaryBg = KeyElementaryBg;
+exports.KeyHighBg = KeyHighBg;
+exports.KeyMiddleBg = KeyMiddleBg;
+exports.gray100Color = gray100Color;
+exports.gray200Color = gray200Color;
+exports.gray300Color = gray300Color;
+exports.gray400Color = gray400Color;
+exports.gray50Color = gray50Color;
+exports.main200Color = main200Color;
+exports.main300Color = main300Color;
+exports.main400Color = main400Color;
+exports.point3Color = point3Color;
+exports.secondaryColor = secondaryColor;
+exports.textPrimaryColor = textPrimaryColor;
+exports.textQuaternaryColor = textQuaternaryColor;
+exports.textSecondaryColor = textSecondaryColor;
+exports.textTeriaryColor = textTeriaryColor;

package/cjs/components/tooltip/Tooltip.d.ts

@@ -0,0 +1,11 @@
+import type { TooltipProps } from '@mui/material';
+import type { ReactElement, ReactNode } from 'react';
+export interface EliceTooltipProps extends TooltipProps {
+    title: string | ReactNode;
+    isControl?: boolean;
+    children: ReactElement<any, any>;
+    initOpen?: boolean;
+    triggerAction?: 'default' | 'click';
+}
+declare const EliceTooltip: ({ title, initOpen, isControl, placement, triggerAction, children, ...rest }: EliceTooltipProps) => import("react/jsx-runtime").JSX.Element;
+export default EliceTooltip;

package/cjs/components/tooltip/Tooltip.js

@@ -0,0 +1,128 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var _styled = require('@emotion/styled/base');
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var material = require('@mui/material');
+var tokenColorTemporary = require('../tokenColorTemporary.js');
+var Close = require('../../icons/Close.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var _styled__default = /*#__PURE__*/_interopDefaultCompat(_styled);
+
+var StyledScrollBar = /*#__PURE__*/_styled__default.default(material.Typography, {
+  target: "e1h4eaj70"
+})("::-webkit-scrollbar{width:0.5rem;}::-webkit-scrollbar-track{display:none;}::-webkit-scrollbar-thumb{background:", tokenColorTemporary.main300Color, ";border-radius:0.5rem;}::-webkit-scrollbar-thumb:hover{background:", tokenColorTemporary.main400Color, ";}");
+var EliceTooltip = function EliceTooltip(_a) {
+  var title = _a.title,
+    _a$initOpen = _a.initOpen,
+    initOpen = _a$initOpen === void 0 ? false : _a$initOpen,
+    isControl = _a.isControl,
+    _a$placement = _a.placement,
+    placement = _a$placement === void 0 ? 'left' : _a$placement,
+    _a$triggerAction = _a.triggerAction,
+    triggerAction = _a$triggerAction === void 0 ? 'default' : _a$triggerAction,
+    children = _a.children,
+    rest = tslib.__rest(_a, ["title", "initOpen", "isControl", "placement", "triggerAction", "children"]);
+  var theme = material.useTheme();
+  var slotProps = {
+    tooltip: {
+      style: {
+        backgroundColor: theme.palette.primary.main,
+        borderRadius: '1rem',
+        padding: '0.75rem',
+        maxWidth: '15.7rem',
+        maxHeight: '16rem'
+      }
+    },
+    arrow: {
+      style: {
+        color: theme.palette.primary.main,
+        fontSize: '0.75rem'
+      }
+    }
+  };
+  var _useState = React.useState(initOpen),
+    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+    open = _useState2[0],
+    setOpen = _useState2[1];
+  return isControl ? jsxRuntime.jsx(material.Tooltip, Object.assign({
+    arrow: true,
+    title: jsxRuntime.jsxs(material.Stack, {
+      direction: "row",
+      gap: "0.625rem",
+      children: [jsxRuntime.jsx(Close.default, {
+        style: {
+          opacity: 0.7,
+          flexShrink: 0,
+          cursor: 'pointer'
+        },
+        onClick: function onClick() {
+          return setOpen(false);
+        }
+      }), jsxRuntime.jsx(StyledScrollBar, {
+        style: {
+          maxHeight: '15rem',
+          overflowY: 'auto'
+        },
+        children: jsxRuntime.jsx(material.Typography, {
+          variant: "subtitle2",
+          children: title
+        })
+      })]
+    }),
+    placement: placement,
+    open: open,
+    onOpen: function onOpen() {
+      if (triggerAction === 'default') {
+        setOpen(true);
+      }
+    },
+    onClick: function onClick() {
+      if (triggerAction === 'click') {
+        setOpen(true);
+      }
+    },
+    slotProps: slotProps,
+    style: {
+      cursor: triggerAction === 'click' ? 'pointer' : 'auto'
+    }
+  }, rest, {
+    children: jsxRuntime.jsx(material.Stack, {
+      position: "relative",
+      width: "fit-content",
+      height: "fit-content",
+      children: children
+    })
+  })) : jsxRuntime.jsx(material.Tooltip, Object.assign({
+    arrow: true,
+    title: jsxRuntime.jsx(StyledScrollBar, {
+      style: {
+        fontWeight: 700,
+        fontSize: '1.375rem',
+        maxHeight: '15rem',
+        overflowY: 'auto'
+      },
+      children: jsxRuntime.jsx(material.Typography, {
+        variant: "subtitle2",
+        children: title
+      })
+    }),
+    placement: placement,
+    slotProps: slotProps
+  }, rest, {
+    children: jsxRuntime.jsx(material.Stack, {
+      position: "relative",
+      width: "fit-content",
+      height: "fit-content",
+      children: children
+    })
+  }));
+};
+
+exports.default = EliceTooltip;

package/cjs/components/tooltip/index.d.ts

@@ -0,0 +1,2 @@
+export { default as EliceTooltip } from './Tooltip';
+export type { EliceTooltipProps } from './Tooltip';

package/cjs/components/tooltip/index.js

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

package/cjs/icons/ArrowLeft.d.ts

@@ -0,0 +1,6 @@
+declare const ArrowLeft: ({ size, color, ...other }: {
+    [x: string]: any;
+    size?: number | undefined;
+    color?: string | undefined;
+}) => import("react/jsx-runtime").JSX.Element;
+export default ArrowLeft;

package/cjs/icons/ArrowLeft.js

@@ -0,0 +1,28 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+
+var ArrowLeft = function ArrowLeft(_a) {
+  var _a$size = _a.size,
+    size = _a$size === void 0 ? 16 : _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",
+    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",
+      fill: color
+    })
+  }));
+};
+
+exports.default = ArrowLeft;

package/cjs/icons/ArrowRight.d.ts

@@ -0,0 +1,6 @@
+declare const ArrowRight: ({ size, color, ...other }: {
+    [x: string]: any;
+    size?: number | undefined;
+    color?: string | undefined;
+}) => import("react/jsx-runtime").JSX.Element;
+export default ArrowRight;