colibri-ui 0.7.34 → 0.7.36

package/esm/Icons/Plus.js

@@ -1,6 +1,5 @@
 import { __rest, __assign } from 'tslib';
-import { jsx, jsxs } from '@emotion/react/jsx-runtime';
-import { forwardRef } from 'react';
+import React, { forwardRef } from 'react';
 
 var PlusIcon = /*#__PURE__*/forwardRef(function (_a, ref) {
   var _b = _a.fill,
@@ -10,24 +9,22 @@ var PlusIcon = /*#__PURE__*/forwardRef(function (_a, ref) {
     _d = _a.height,
     height = _d === void 0 ? 24 : _d,
     props = __rest(_a, ["fill", "width", "height"]);
-  return jsx("svg", __assign({
+  return /*#__PURE__*/React.createElement("svg", __assign({
     xmlns: "http://www.w3.org/2000/svg",
     fill: fill,
     width: width,
     height: height,
     ref: ref
   }, props, {
-    viewBox: "0 0 24 24",
-    children: jsxs("g", {
-      fill: fill,
-      fillRule: "evenodd",
-      children: [jsx("path", {
-        d: "M4 13h16v-2H4z"
-      }), jsx("path", {
-        d: "M11 4v16h2V4z"
-      })]
-    })
-  }));
+    viewBox: "0 0 24 24"
+  }), /*#__PURE__*/React.createElement("g", {
+    fill: fill,
+    fillRule: "evenodd"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M4 13h16v-2H4z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M11 4v16h2V4z"
+  })));
 });
 
 export { PlusIcon as default };

package/esm/Icons/Trash.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 import type { Props } from "./index.props";
-declare const _default: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<SVGSVGElement>>;
+declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<SVGSVGElement>>;
 export default _default;

package/esm/Icons/Trash.js

@@ -1,6 +1,5 @@
 import { __rest, __assign } from 'tslib';
-import { jsx } from '@emotion/react/jsx-runtime';
-import { forwardRef } from 'react';
+import React, { forwardRef } from 'react';
 
 var Trash = /*#__PURE__*/forwardRef(function (_a, ref) {
   var _b = _a.fill,
@@ -10,20 +9,19 @@ var Trash = /*#__PURE__*/forwardRef(function (_a, ref) {
     _d = _a.height,
     height = _d === void 0 ? 24 : _d,
     props = __rest(_a, ["fill", "width", "height"]);
-  return jsx("svg", __assign({
+  return /*#__PURE__*/React.createElement("svg", __assign({
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
     width: width,
     height: height,
     ref: ref
   }, props, {
-    viewBox: "0 0 24 24",
-    children: jsx("path", {
-      fillRule: "evenodd",
-      clipRule: "evenodd",
-      d: "M12.663 1.5h-1.326c-1.069 0-1.49.09-1.921.27-.432.181-.792.453-1.084.82-.292.365-.493.746-.784 1.774L7.368 5H5a1 1 0 0 0 0 2h.5l.844 12.666A2.5 2.5 0 0 0 8.84 22h6.322a2.5 2.5 0 0 0 2.495-2.334L18.5 7.001V7h.5a1 1 0 1 0 0-2h-2.367l-.18-.636c-.292-1.028-.493-1.409-.785-1.775a2.694 2.694 0 0 0-1.084-.819c-.431-.18-.852-.27-1.92-.27zm1.89 3.5l-.025-.09c-.203-.717-.29-.905-.424-1.074a.696.696 0 0 0-.292-.221c-.2-.084-.404-.115-1.149-.115h-1.326c-.745 0-.95.031-1.149.115a.696.696 0 0 0-.292.221c-.135.169-.221.357-.424 1.074L9.446 5h5.108zm1.943 2H7.505l.835 12.533a.5.5 0 0 0 .499.467h6.322a.5.5 0 0 0 .499-.467L16.496 7zM9.4 9.63a.85.85 0 0 1 1.699-.059l.272 7.795a.85.85 0 1 1-1.7.06L9.4 9.63zm4.381-.879a.85.85 0 0 0-.88.82l-.271 7.795a.85.85 0 1 0 1.699.06L14.6 9.63a.85.85 0 0 0-.82-.88z",
-      fill: fill
-    })
+    viewBox: "0 0 24 24"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M12.663 1.5h-1.326c-1.069 0-1.49.09-1.921.27-.432.181-.792.453-1.084.82-.292.365-.493.746-.784 1.774L7.368 5H5a1 1 0 0 0 0 2h.5l.844 12.666A2.5 2.5 0 0 0 8.84 22h6.322a2.5 2.5 0 0 0 2.495-2.334L18.5 7.001V7h.5a1 1 0 1 0 0-2h-2.367l-.18-.636c-.292-1.028-.493-1.409-.785-1.775a2.694 2.694 0 0 0-1.084-.819c-.431-.18-.852-.27-1.92-.27zm1.89 3.5l-.025-.09c-.203-.717-.29-.905-.424-1.074a.696.696 0 0 0-.292-.221c-.2-.084-.404-.115-1.149-.115h-1.326c-.745 0-.95.031-1.149.115a.696.696 0 0 0-.292.221c-.135.169-.221.357-.424 1.074L9.446 5h5.108zm1.943 2H7.505l.835 12.533a.5.5 0 0 0 .499.467h6.322a.5.5 0 0 0 .499-.467L16.496 7zM9.4 9.63a.85.85 0 0 1 1.699-.059l.272 7.795a.85.85 0 1 1-1.7.06L9.4 9.63zm4.381-.879a.85.85 0 0 0-.88.82l-.271 7.795a.85.85 0 1 0 1.699.06L14.6 9.63a.85.85 0 0 0-.82-.88z",
+    fill: fill
   }));
 });
 

package/esm/Icons/User.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 import type { Props } from "./index.props";
-declare const _default: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<SVGSVGElement>>;
+declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<SVGSVGElement>>;
 export default _default;

package/esm/Icons/User.js

@@ -1,6 +1,5 @@
 import { __rest, __assign } from 'tslib';
-import { jsxs, jsx } from '@emotion/react/jsx-runtime';
-import { forwardRef } from 'react';
+import React, { forwardRef } from 'react';
 
 var User = /*#__PURE__*/forwardRef(function (_a, ref) {
   var _b = _a.fill,
@@ -10,25 +9,24 @@ var User = /*#__PURE__*/forwardRef(function (_a, ref) {
     _d = _a.height,
     height = _d === void 0 ? 24 : _d,
     props = __rest(_a, ["fill", "width", "height"]);
-  return jsxs("svg", __assign({
+  return /*#__PURE__*/React.createElement("svg", __assign({
     xmlns: "http://www.w3.org/2000/svg",
     width: width,
     height: height,
     viewBox: "0 0 24 24",
     ref: ref
   }, props, {
-    fill: "none",
-    children: [jsx("path", {
-      stroke: fill,
-      strokeLinecap: "round",
-      strokeWidth: "1.6",
-      d: "M21.936 23.026a10.286 10.286 0 0 0-19.872 0"
-    }), jsx("path", {
-      stroke: fill,
-      strokeLinecap: "round",
-      strokeWidth: "1.6",
-      d: "M12 15.086a6.857 6.857 0 1 0 0-13.714 6.857 6.857 0 0 0 0 13.714Z"
-    })]
+    fill: "none"
+  }), /*#__PURE__*/React.createElement("path", {
+    stroke: fill,
+    strokeLinecap: "round",
+    strokeWidth: "1.6",
+    d: "M21.936 23.026a10.286 10.286 0 0 0-19.872 0"
+  }), /*#__PURE__*/React.createElement("path", {
+    stroke: fill,
+    strokeLinecap: "round",
+    strokeWidth: "1.6",
+    d: "M12 15.086a6.857 6.857 0 1 0 0-13.714 6.857 6.857 0 0 0 0 13.714Z"
   }));
 });
 

package/esm/Image/Image.module.scss.js

@@ -0,0 +1,8 @@
+import styleInject from '../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".Image-module_root__56rgX {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n}\n.Image-module_root__56rgX img {\n  width: 100%;\n  height: 100%;\n  visibility: visible;\n  font: 0/0 a;\n  border: 0;\n  object-fit: cover;\n  text-indent: -100rem;\n}\n.Image-module_root__56rgX img :-moz-broken {\n  opacity: 0;\n}";
+var styles = {"root":"Image-module_root__56rgX"};
+var stylesheet=".Image-module_root__56rgX {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n}\n.Image-module_root__56rgX img {\n  width: 100%;\n  height: 100%;\n  visibility: visible;\n  font: 0/0 a;\n  border: 0;\n  object-fit: cover;\n  text-indent: -100rem;\n}\n.Image-module_root__56rgX img :-moz-broken {\n  opacity: 0;\n}";
+styleInject(css_248z);
+
+export { styles as default, stylesheet };

package/esm/Image/index.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 import type { ImageProps } from "./index.props";
-declare const Image: import("react").ForwardRefExoticComponent<ImageProps & import("react").RefAttributes<HTMLImageElement>>;
+declare const Image: React.ForwardRefExoticComponent<ImageProps & React.RefAttributes<HTMLImageElement>>;
 export default Image;

package/esm/Image/index.js

@@ -1,8 +1,8 @@
 import { __rest, __assign } from 'tslib';
-import { jsxs, jsx } from '@emotion/react/jsx-runtime';
-import { forwardRef, useState, useCallback } from 'react';
+import React, { forwardRef, useState, useCallback } from 'react';
+import classNames from 'classnames';
 import generateUniqID from '../helpers/generateUniqID.js';
-import { BasePicture } from './styles.js';
+import styles from './Image.module.scss.js';
 
 var emptyImage = "data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=";
 var Image = /*#__PURE__*/forwardRef(function (_a, ref) {
@@ -17,12 +17,11 @@ var Image = /*#__PURE__*/forwardRef(function (_a, ref) {
     ariaLabel = _a.ariaLabel,
     _c = _a.sources,
     sources = _c === void 0 ? [] : _c,
-    testId = _a["data-testid"],
     _d = _a.alt,
     alt = _d === void 0 ? src : _d,
     width = _a.width,
     height = _a.height,
-    props = __rest(_a, ["className", "loading", "src", "fallbackSrc", "onClick", "srcSet", "sizes", "ariaLabel", "sources", "data-testid", "alt", "width", "height"]);
+    props = __rest(_a, ["className", "loading", "src", "fallbackSrc", "onClick", "srcSet", "sizes", "ariaLabel", "sources", "alt", "width", "height"]);
   var _e = useState(false),
     isFailed = _e[0],
     setFailed = _e[1];
@@ -38,25 +37,26 @@ var Image = /*#__PURE__*/forwardRef(function (_a, ref) {
   var handleError = useCallback(function () {
     setFailed(true);
   }, []);
-  return jsxs(BasePicture, {
-    "data-testid": testId,
+  return /*#__PURE__*/React.createElement("picture", {
     ref: ref,
-    children: [!!sources.length && sources.map(function (source, index) {
-      return jsx("source", __assign({}, source), generateUniqID(index));
-    }), jsx("img", __assign({
-      alt: alt,
-      style: sizeAttrs,
-      className: className,
-      loading: loading,
-      "aria-hidden": ariaLabel ? "false" : "true",
-      "aria-label": ariaLabel,
-      onClick: onClick,
-      onError: handleError,
-      src: isFailed && fallbackSrc ? fallbackSrc : imageSrc,
-      srcSet: imageSrcSet,
-      sizes: sizes
-    }, props))]
-  });
+    className: classNames(styles.root)
+  }, !!sources.length && sources.map(function (source, index) {
+    return /*#__PURE__*/React.createElement("source", __assign({
+      key: generateUniqID(index)
+    }, source));
+  }), /*#__PURE__*/React.createElement("img", __assign({
+    alt: alt,
+    style: sizeAttrs,
+    className: classNames(className),
+    loading: loading,
+    "aria-hidden": ariaLabel ? "false" : "true",
+    "aria-label": ariaLabel,
+    onClick: onClick,
+    onError: handleError,
+    src: isFailed && fallbackSrc ? fallbackSrc : imageSrc,
+    srcSet: imageSrcSet,
+    sizes: sizes
+  }, props)));
 });
 
 export { Image as default };

package/esm/Input/index.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 import type { InputProps } from "./index.props";
-declare const Input: import("react").ForwardRefExoticComponent<InputProps & import("react").RefAttributes<HTMLInputElement>>;
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
 export default Input;

package/esm/Input/index.js

@@ -1,9 +1,9 @@
-import { __rest, __assign } from 'tslib';
-import { jsx } from '@emotion/react/jsx-runtime';
-import { forwardRef } from 'react';
+import { __rest } from 'tslib';
+import React, { forwardRef } from 'react';
+import classNames from 'classnames';
 import FormField from '../base/FormField/index.js';
 import InputRoot from '../base/InputRoot/index.js';
-import { BaseInput } from '../base/InputRoot/styles.js';
+import BaseInput from '../base/BaseInput/index.js';
 
 var Input = /*#__PURE__*/forwardRef(function (_a, ref) {
   var className = _a.className,
@@ -18,29 +18,22 @@ var Input = /*#__PURE__*/forwardRef(function (_a, ref) {
     _c = _a.size,
     size = _c === void 0 ? "m" : _c,
     props = __rest(_a, ["className", "startIcon", "endIcon", "label", "hint", "error", "onChange", "variant", "size"]);
-  var onChangeHandler = function onChangeHandler(e) {
-    if (onChange) onChange(e, e.target.value);
-  };
-  return jsx(FormField, {
-    className: className,
+  return /*#__PURE__*/React.createElement(FormField, {
+    className: classNames(className),
     label: label,
     hint: hint,
-    error: error,
-    children: jsx(InputRoot, {
-      ref: ref,
-      startIcon: startIcon,
-      endIcon: endIcon,
-      variant: variant,
-      size: size,
-      disabled: !!props.disabled,
-      error: error,
-      children: jsx(BaseInput, __assign({
-        as: "input",
-        onChange: onChangeHandler,
-        type: "text"
-      }, props))
-    })
-  });
+    error: error
+  }, /*#__PURE__*/React.createElement(InputRoot, {
+    ref: ref,
+    startIcon: startIcon,
+    endIcon: endIcon,
+    variant: variant,
+    size: size,
+    disabled: !!props.disabled,
+    error: error
+  }, /*#__PURE__*/React.createElement(BaseInput, {
+    onChange: onChange
+  })));
 });
 
 export { Input as default };

package/esm/Input/index.props.d.ts

@@ -1,10 +1,10 @@
 import type { ChangeEvent, InputHTMLAttributes, ReactNode } from "react";
 import type { FormFieldProps } from "../base/FormField/index.props";
-import type { InputSize, InputVariant } from "../base/InputRoot/index.props";
+import type { Size, Variant } from "../base/InputRoot/index.props";
 export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "onChange" | "size">, Omit<FormFieldProps, "children"> {
     onChange?: (e: ChangeEvent<HTMLInputElement>, value: string) => void;
-    variant?: keyof InputVariant;
-    size?: InputSize;
+    variant?: Variant;
+    size?: Size;
     startIcon?: ReactNode;
     endIcon?: ReactNode;
     label?: ReactNode;

package/esm/Menu/Menu.module.scss.js

@@ -0,0 +1,8 @@
+import styleInject from '../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".Menu-module_menu__ZGJ-- {\n  margin: 0;\n  text-align: left;\n  padding: 0;\n  user-select: none;\n  color: var(--palette-black);\n  background: var(--palette-white);\n}";
+var styles = {"menu":"Menu-module_menu__ZGJ--"};
+var stylesheet=".Menu-module_menu__ZGJ-- {\n  margin: 0;\n  text-align: left;\n  padding: 0;\n  user-select: none;\n  color: var(--palette-black);\n  background: var(--palette-white);\n}";
+styleInject(css_248z);
+
+export { styles as default, stylesheet };

package/esm/Menu/components/MenuItem/MenuItem.module.scss.js

@@ -0,0 +1,8 @@
+import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".MenuItem-module_item__mGGLQ {\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  list-style: none;\n  padding: 8px 6px;\n  font-style: normal;\n  font-weight: 400;\n  font-size: 16px;\n  line-height: 22px;\n}\n.MenuItem-module_item__mGGLQ > * {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.MenuItem-module_variant_primary__k1zJe {\n  background-color: var(--palette-white);\n}\n.MenuItem-module_variant_primary__k1zJe:hover {\n  background-color: var(--palette-primary-2);\n}\n.MenuItem-module_variant_primary__k1zJe:active {\n  background-color: var(--palette-primary-2);\n}\n.MenuItem-module_variant_primary__k1zJe:focus, .MenuItem-module_variant_primary__k1zJe:focus-within {\n  background-color: var(--palette-primary-2);\n}\n\n.MenuItem-module_disabled__h3vqB {\n  cursor: not-allowed;\n  pointer-events: none;\n  color: var(--palette-bg-2);\n  background-color: var(--palette-white);\n}";
+var styles = {"item":"MenuItem-module_item__mGGLQ","variant_primary":"MenuItem-module_variant_primary__k1zJe","disabled":"MenuItem-module_disabled__h3vqB"};
+var stylesheet=".MenuItem-module_item__mGGLQ {\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  list-style: none;\n  padding: 8px 6px;\n  font-style: normal;\n  font-weight: 400;\n  font-size: 16px;\n  line-height: 22px;\n}\n.MenuItem-module_item__mGGLQ > * {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.MenuItem-module_variant_primary__k1zJe {\n  background-color: var(--palette-white);\n}\n.MenuItem-module_variant_primary__k1zJe:hover {\n  background-color: var(--palette-primary-2);\n}\n.MenuItem-module_variant_primary__k1zJe:active {\n  background-color: var(--palette-primary-2);\n}\n.MenuItem-module_variant_primary__k1zJe:focus, .MenuItem-module_variant_primary__k1zJe:focus-within {\n  background-color: var(--palette-primary-2);\n}\n\n.MenuItem-module_disabled__h3vqB {\n  cursor: not-allowed;\n  pointer-events: none;\n  color: var(--palette-bg-2);\n  background-color: var(--palette-white);\n}";
+styleInject(css_248z);
+
+export { styles as default, stylesheet };

package/esm/Menu/components/MenuItem/index.js

@@ -1,23 +1,28 @@
-import { jsx } from '@emotion/react/jsx-runtime';
-import { Item } from './styles.js';
+import React from 'react';
+import classNames from 'classnames/bind';
+import styles from './MenuItem.module.scss.js';
 
+var clx = classNames.bind(styles);
 var MenuItem = function MenuItem(_a) {
+  var _b;
   var className = _a.className,
-    _b = _a.isSelected,
-    isSelected = _b === void 0 ? false : _b,
-    _c = _a.variant,
-    variant = _c === void 0 ? "primary" : _c,
+    _c = _a.isSelected,
+    isSelected = _c === void 0 ? false : _c,
+    _d = _a.variant,
+    variant = _d === void 0 ? "primary" : _d,
     disabled = _a.disabled,
     onClick = _a.onClick,
     children = _a.children;
-  return jsx(Item, {
-    isSelected: isSelected,
-    disabled: disabled,
-    variant: variant,
-    onClick: onClick,
-    className: className,
-    children: children
-  });
+  return /*#__PURE__*/React.createElement("li", {
+    style: {
+      backgroundColor: isSelected ? "#B8D2FF" : ""
+    },
+    className: clx((_b = {
+      item: true,
+      disabled: disabled
+    }, _b["variant_".concat(variant)] = !!variant, _b), className),
+    onClick: onClick
+  }, children);
 };
 
 export { MenuItem as default };

package/esm/Menu/components/MenuItem/index.props.d.ts

@@ -1,23 +1,10 @@
-import type { CSSObject } from "@emotion/react";
 import type { ReactNode, MouseEvent } from "react";
 import type { MenuVariant } from "../../index.props";
-interface IStylesProps {
-    color?: CSSObject["color"];
-    backgroundColor: CSSObject["backgroundColor"];
-}
-export interface MenuItemPalette {
-    normal: IStylesProps;
-    hovered?: IStylesProps;
-    focused?: IStylesProps;
-    selected?: IStylesProps;
-    disabled?: IStylesProps;
-}
 export interface MenuItemProps {
     children: ReactNode;
     className?: string;
     isSelected?: boolean;
     onClick?: (e: MouseEvent) => void;
-    variant?: keyof MenuVariant;
+    variant?: MenuVariant;
     disabled?: boolean;
 }
-export {};

package/esm/Menu/index.js

@@ -1,7 +1,7 @@
-import { jsx } from '@emotion/react/jsx-runtime';
-import { useMemo, Children, isValidElement, cloneElement } from 'react';
+import React, { useMemo, Children, isValidElement, cloneElement } from 'react';
+import classNames from 'classnames';
 import MenuItem from './components/MenuItem/index.js';
-import { MenuList } from './styles.js';
+import styles from './Menu.module.scss.js';
 
 var Menu = function Menu(_a) {
   var selected = _a.selected,
@@ -26,10 +26,9 @@ var Menu = function Menu(_a) {
       return child;
     });
   }, [children, selected, onClick]);
-  return jsx(MenuList, {
-    className: className,
-    children: renderChild
-  });
+  return /*#__PURE__*/React.createElement("ul", {
+    className: classNames(styles.menu, className)
+  }, renderChild);
 };
 Menu.Item = MenuItem;
 

package/esm/Menu/index.props.d.ts

@@ -1,28 +1,10 @@
-import type { CSSObject } from "@emotion/react";
 import type { ReactElement, MouseEvent, FC } from "react";
 import type MenuItem from "./components/MenuItem";
-import type { MenuItemProps, MenuItemPalette } from "./components/MenuItem/index.props";
-export interface MenuPalette {
-    backgroundColor: CSSObject["backgroundColor"];
-    item: MenuItemPalette;
-}
-type VariantStyles = {
-    color?: CSSObject["color"];
-    backgroundColor?: CSSObject["backgroundColor"];
-};
-type VariantStates = {
-    normal?: VariantStyles;
-    hovered?: VariantStyles;
-    focused?: VariantStyles;
-    selected?: VariantStyles;
-    disabled?: VariantStyles;
-};
-export type MenuVariant = {
-    primary: VariantStates;
-};
+import type { MenuItemProps } from "./components/MenuItem/index.props";
+export type MenuVariant = "primary";
 type Props = {
     selected?: string[];
-    variant?: keyof MenuVariant;
+    variant?: MenuVariant;
     className?: string;
     onClick?: (key: string, e: MouseEvent) => void;
     children?: ReactElement<MenuItemProps> | ReactElement<MenuItemProps>[];

package/esm/Modal/Modal.module.scss.js

@@ -0,0 +1,8 @@
+import styleInject from '../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".Modal-module_root__hXsmO {\n  position: fixed;\n  top: 0;\n  bottom: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 1000;\n}\n\n.Modal-module_titleWrapper__V74OF {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  border-bottom: 1px solid var(--palette-bg-2);\n}\n\n.Modal-module_closeWrapper__DmIkN {\n  display: flex;\n  justify-content: flex-end;\n}\n\n.Modal-module_modalOverlay__rI8Wz {\n  position: fixed;\n  top: 0;\n  bottom: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(0, 0, 0, 0.25);\n}\n\n.Modal-module_modalWrapper__M8-7F {\n  overflow: hidden;\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  display: flex;\n  flex-direction: column;\n  background-color: var(--palette-white);\n}\n.Modal-module_modalWrapper_mobile__Py1hW {\n  height: 100%;\n  width: 100%;\n}\n.Modal-module_modalWrapper_desktop__xScot {\n  max-height: calc(100vh - 100px);\n  max-width: calc(100vw - 100px);\n  min-width: 515px;\n  border: solid 1px var(--palette-bg-2);\n  border-radius: 8px;\n}";
+var styles = {"root":"Modal-module_root__hXsmO","titleWrapper":"Modal-module_titleWrapper__V74OF","closeWrapper":"Modal-module_closeWrapper__DmIkN","modalOverlay":"Modal-module_modalOverlay__rI8Wz","modalWrapper":"Modal-module_modalWrapper__M8-7F","modalWrapper_mobile":"Modal-module_modalWrapper_mobile__Py1hW","modalWrapper_desktop":"Modal-module_modalWrapper_desktop__xScot"};
+var stylesheet=".Modal-module_root__hXsmO {\n  position: fixed;\n  top: 0;\n  bottom: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 1000;\n}\n\n.Modal-module_titleWrapper__V74OF {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  border-bottom: 1px solid var(--palette-bg-2);\n}\n\n.Modal-module_closeWrapper__DmIkN {\n  display: flex;\n  justify-content: flex-end;\n}\n\n.Modal-module_modalOverlay__rI8Wz {\n  position: fixed;\n  top: 0;\n  bottom: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(0, 0, 0, 0.25);\n}\n\n.Modal-module_modalWrapper__M8-7F {\n  overflow: hidden;\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  display: flex;\n  flex-direction: column;\n  background-color: var(--palette-white);\n}\n.Modal-module_modalWrapper_mobile__Py1hW {\n  height: 100%;\n  width: 100%;\n}\n.Modal-module_modalWrapper_desktop__xScot {\n  max-height: calc(100vh - 100px);\n  max-width: calc(100vw - 100px);\n  min-width: 515px;\n  border: solid 1px var(--palette-bg-2);\n  border-radius: 8px;\n}";
+styleInject(css_248z);
+
+export { styles as default, stylesheet };

package/esm/Modal/components/Close/Close.module.scss.js

@@ -0,0 +1,8 @@
+import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".Close-module_close__zHsuU {\n  cursor: pointer;\n  margin-right: 16px;\n}";
+var styles = {"close":"Close-module_close__zHsuU"};
+var stylesheet=".Close-module_close__zHsuU {\n  cursor: pointer;\n  margin-right: 16px;\n}";
+styleInject(css_248z);
+
+export { styles as default, stylesheet };

package/esm/Modal/components/Close/index.js

@@ -1,9 +1,13 @@
-import { jsx } from '@emotion/react/jsx-runtime';
-import { Root } from './styles.js';
+import React from 'react';
+import classNames from 'classnames';
+import '../../../Icons/index.js';
+import styles from './Close.module.scss.js';
+import CloseIcon from '../../../Icons/Close.js';
 
 var Close = function Close(_a) {
   var onClick = _a.onClick;
-  return jsx(Root, {
+  return /*#__PURE__*/React.createElement(CloseIcon, {
+    className: classNames(styles.close),
     onClick: onClick
   });
 };

package/esm/Modal/components/Content/Content.module.scss.js

@@ -0,0 +1,8 @@
+import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".Content-module_root__V5vMS {\n  overflow-y: auto;\n  display: flex;\n  min-height: 100%;\n  padding: 10px;\n}";
+var styles = {"root":"Content-module_root__V5vMS"};
+var stylesheet=".Content-module_root__V5vMS {\n  overflow-y: auto;\n  display: flex;\n  min-height: 100%;\n  padding: 10px;\n}";
+styleInject(css_248z);
+
+export { styles as default, stylesheet };

package/esm/Modal/components/Content/index.js

@@ -1,11 +1,12 @@
-import { jsx } from '@emotion/react/jsx-runtime';
-import { Wrapper } from './styles.js';
+import classNames from 'classnames';
+import React from 'react';
+import styles from './Content.module.scss.js';
 
 var Content = function Content(_a) {
   var children = _a.children;
-  return jsx(Wrapper, {
-    children: children
-  });
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles.root)
+  }, children);
 };
 
 export { Content as default };

package/esm/Modal/components/Title/Title.module.scss.js

@@ -0,0 +1,8 @@
+import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".Title-module_wrapper__b1LKk {\n  display: flex;\n  padding: 16px;\n}";
+var styles = {"wrapper":"Title-module_wrapper__b1LKk"};
+var stylesheet=".Title-module_wrapper__b1LKk {\n  display: flex;\n  padding: 16px;\n}";
+styleInject(css_248z);
+
+export { styles as default, stylesheet };

package/esm/Modal/components/Title/index.d.ts

@@ -1,7 +1,5 @@
-import type { CSSObject } from "@emotion/react";
 import type { FC, ReactNode } from "react";
 declare const Title: FC<{
     children: ReactNode;
-    justifyContent?: CSSObject["justifyContent"];
 }>;
 export default Title;

package/esm/Modal/components/Title/index.js

@@ -1,19 +1,17 @@
-import { jsx } from '@emotion/react/jsx-runtime';
+import React from 'react';
+import classNames from 'classnames/bind';
 import Typography from '../../../Typography/index.js';
-import { Wrapper } from './styles.js';
+import styles from './Title.module.scss.js';
 
+var clx = classNames.bind(styles);
 var Title = function Title(_a) {
-  var children = _a.children,
-    _b = _a.justifyContent,
-    justifyContent = _b === void 0 ? "flex-start" : _b;
-  return jsx(Typography, {
+  var children = _a.children;
+  return /*#__PURE__*/React.createElement(Typography, {
     tag: "h3",
-    size: "h3",
-    children: jsx(Wrapper, {
-      justifyContent: justifyContent,
-      children: children
-    })
-  });
+    size: "h3"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: clx(styles.wrapper)
+  }, children));
 };
 
 export { Title as default };