@invoicebox/ui 0.1.0-alpha.292 → 0.1.0-alpha.294

package/dist/esm/components/common/Arrow/components/StyledSvg/index.stories.js

@@ -0,0 +1,20 @@
+import { StyledSvg } from '.';
+var meta = {
+  title: 'common/Arrow/_components/StyledSvg',
+  component: StyledSvg,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered'
+  }
+};
+export default meta;
+export var Default = {
+  args: {
+    $isOpen: false,
+    $openColor: '#05b',
+    $closeColor: '#00b',
+    size: 10,
+    $padding: 7,
+    $defaultRotate: 0
+  }
+};

package/dist/esm/components/common/Arrow/components/Svg/index.js

@@ -0,0 +1,19 @@
+import React from 'react';
+export var Svg = function Svg(_ref) {
+  var className = _ref.className,
+    size = _ref.size;
+  return /*#__PURE__*/React.createElement("svg", {
+    className: className,
+    width: size,
+    height: size,
+    viewBox: "7 7 10 10",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M16.0846 9.95825L12.0013 14.0416L7.91797 9.95825",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }));
+};

package/dist/esm/components/common/Arrow/components/Svg/index.stories.js

@@ -0,0 +1,15 @@
+import { Svg } from '.';
+var meta = {
+  title: 'common/Arrow/_components/Svg',
+  component: Svg,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered'
+  }
+};
+export default meta;
+export var Default = {
+  args: {
+    size: 10
+  }
+};

package/dist/esm/components/common/Arrow/index.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { StyledSvg } from './components/StyledSvg';
+import { useComponentPalette } from '../../../palette';
+export var Arrow = function Arrow(_ref) {
+  var isOpen = _ref.isOpen,
+    _ref$innerSize = _ref.innerSize,
+    innerSize = _ref$innerSize === void 0 ? 10 : _ref$innerSize,
+    _ref$outterSize = _ref.outterSize,
+    outterSize = _ref$outterSize === void 0 ? 24 : _ref$outterSize,
+    _ref$defaultRotate = _ref.defaultRotate,
+    defaultRotate = _ref$defaultRotate === void 0 ? 0 : _ref$defaultRotate,
+    palette = _ref.palette;
+  var mergedPalette = useComponentPalette('arrow', palette);
+  return /*#__PURE__*/React.createElement(StyledSvg, {
+    $isOpen: isOpen,
+    $openColor: mergedPalette.open,
+    $closeColor: mergedPalette.close,
+    size: innerSize,
+    $padding: (outterSize - innerSize) / 2,
+    $defaultRotate: defaultRotate
+  });
+};

package/dist/esm/components/common/Arrow/index.stories.js

@@ -0,0 +1,15 @@
+import { Arrow } from '.';
+var meta = {
+  title: 'common/Arrow',
+  component: Arrow,
+  tags: ['autodocs']
+};
+export default meta;
+export var Default = {
+  args: {
+    isOpen: false,
+    innerSize: 10,
+    outterSize: 24,
+    defaultRotate: 0
+  }
+};

package/dist/esm/components/common/Arrow/palette.js

@@ -0,0 +1,7 @@
+import hexToRgba from '../../../utils/hexToRgba';
+export var generateArrowPalette = function generateArrowPalette(abstractPalette) {
+  return {
+    open: hexToRgba(abstractPalette.primary, 0.5),
+    close: hexToRgba(abstractPalette.primary, 0.5)
+  };
+};

package/dist/esm/components/common/BgCard/index.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import * as S from './styles';
+import { useComponentPalette } from '../../../palette';
+export var BgCard = function BgCard(_ref) {
+  var children = _ref.children,
+    _ref$isTopLeftBorderR = _ref.isTopLeftBorderRadius,
+    isTopLeftBorderRadius = _ref$isTopLeftBorderR === void 0 ? true : _ref$isTopLeftBorderR;
+  var palette = useComponentPalette('bgCard');
+  return /*#__PURE__*/React.createElement(S.Wrapper, {
+    $palette: palette,
+    $isTopLeftBorderRadius: isTopLeftBorderRadius
+  }, children);
+};

package/dist/esm/components/common/BgCard/index.stories.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { BgCard } from '.';
+var meta = {
+  title: 'common/BgCard',
+  component: BgCard,
+  tags: ['autodocs']
+};
+export default meta;
+export var Default = {
+  args: {
+    children: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null, "Some children"), /*#__PURE__*/React.createElement("div", null, "Some children")),
+    isTopLeftBorderRadius: true
+  }
+};

package/dist/esm/components/common/BgCard/palette.js

@@ -0,0 +1,5 @@
+export var generateBgCardPalette = function generateBgCardPalette(abstractPalette) {
+  return {
+    bg: abstractPalette.base
+  };
+};

package/dist/esm/components/common/BgCard/styles.js

@@ -0,0 +1,12 @@
+import styled, { css } from 'styled-components';
+import { breakpoints } from '../../../breakpoints';
+export var Wrapper = styled.div.withConfig({
+  displayName: "styles__Wrapper",
+  componentId: "sc-1vrvxit-0"
+})(["background-color:", ";position:relative;border-radius:20px;padding:30px;", " @media ", "{padding:16px;}"], function (_ref) {
+  var $palette = _ref.$palette;
+  return $palette.bg;
+}, function (_ref2) {
+  var $isTopLeftBorderRadius = _ref2.$isTopLeftBorderRadius;
+  return !$isTopLeftBorderRadius && css(["border-top-left-radius:0px;"]);
+}, breakpoints.md);

package/dist/esm/components/common/Calendar/docs.stories.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import Markdown from 'markdown-to-jsx';
+import { Typography } from '../Typography';
+var meta = {
+  title: 'common/Calendar'
+};
+export default meta;
+export var Installation = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement(Typography, {
+      variant: "bodyL"
+    }, /*#__PURE__*/React.createElement(Markdown, null, "\n### \u0423\u0441\u0442\u0430\u043D\u043E\u0432\u043A\u0430\n\n\u0418\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0435\u0442\u0441\u044F \u0431\u0438\u0431\u043B\u0438\u043E\u0442\u0435\u043A\u0430 [react-calendar](https://github.com/wojtekmaj/react-calendar).\n\u0414\u043B\u044F \u043A\u043E\u0440\u0440\u0435\u043A\u0442\u043D\u043E\u0439 \u0440\u0430\u0431\u043E\u0442\u044B \u043D\u0435\u043E\u0431\u0445\u043E\u0434\u0438\u043C\u043E \u043F\u043E\u0434\u043A\u043B\u044E\u0447\u0438\u0442\u044C \u0441\u0442\u0438\u043B\u0438.\n\n```ts\nimport 'react-calendar/dist/Calendar.css';\n```\n"));
+  }
+};

package/dist/esm/components/common/Calendar/index.js

@@ -0,0 +1,44 @@
+import React, { useCallback } from 'react';
+import { useComponentPalette } from '../../../palette';
+import { LibCalendar } from './styles';
+export var Calendar = function Calendar(_ref) {
+  var onChange = _ref.onChange,
+    value = _ref.value,
+    minDate = _ref.minDate,
+    maxDate = _ref.maxDate,
+    selectRange = _ref.selectRange,
+    onActiveStartDateChange = _ref.onActiveStartDateChange,
+    _ref$isLargeMobileSiz = _ref.isLargeMobileSize,
+    isLargeMobileSize = _ref$isLargeMobileSiz === void 0 ? false : _ref$isLargeMobileSiz;
+  var palette = useComponentPalette('calendar');
+  var handleChange = useCallback(function (newValue) {
+    if (selectRange) {
+      onChange(newValue);
+    } else {
+      onChange(newValue);
+    }
+  }, [onChange, selectRange]);
+  return /*#__PURE__*/React.createElement(LibCalendar, {
+    locale: "ru",
+    minDate: minDate,
+    maxDate: maxDate,
+    showNeighboringMonth: false,
+    minDetail: "month",
+    next2Label: null,
+    prev2Label: null,
+    onChange: handleChange,
+    value: value,
+    selectRange: selectRange,
+    onActiveStartDateChange: onActiveStartDateChange
+    // styles
+    ,
+    $arrow: palette.arrow,
+    $weekDay: palette.weekday,
+    $tile: palette.tile,
+    $tileActive: palette.tileActive,
+    $tileBgActive: palette.tileBgActive,
+    $tileBgRangeBetween: palette.tileBgRangeBetween,
+    $month: palette.month,
+    $isLargeMobileSize: isLargeMobileSize
+  });
+};

package/dist/esm/components/common/Calendar/index.stories.js

@@ -0,0 +1,69 @@
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+import React, { useCallback, useState } from 'react';
+import { action } from '@storybook/addon-actions';
+import { Calendar } from '.';
+import 'react-calendar/dist/Calendar.css';
+var meta = {
+  title: 'common/Calendar',
+  component: Calendar,
+  tags: ['autodocs']
+};
+export default meta;
+var Component = function Component(_ref) {
+  var maxDate = _ref.maxDate,
+    minDate = _ref.minDate;
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
+  var handleChange = useCallback(function (date) {
+    setValue(date);
+    action('change')(date);
+  }, []);
+  return /*#__PURE__*/React.createElement(Calendar, {
+    value: value,
+    onChange: handleChange,
+    maxDate: maxDate ? new Date(maxDate) : undefined,
+    minDate: minDate ? new Date(minDate) : undefined
+  });
+};
+var RangeComponent = function RangeComponent(_ref2) {
+  var maxDate = _ref2.maxDate,
+    minDate = _ref2.minDate;
+  var _useState3 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    value = _useState4[0],
+    setValue = _useState4[1];
+  var handleChange = useCallback(function (date) {
+    setValue(date);
+    action('change')(date);
+  }, []);
+  return /*#__PURE__*/React.createElement(Calendar, {
+    value: value,
+    onChange: handleChange,
+    maxDate: maxDate ? new Date(maxDate) : undefined,
+    minDate: minDate ? new Date(minDate) : undefined,
+    selectRange: true
+  });
+};
+var maxDate = new Date();
+maxDate.setMonth(maxDate.getMonth() + 1);
+var minDate = new Date();
+minDate.setMonth(minDate.getMonth() - 1);
+var generalProps = {
+  maxDate: maxDate,
+  minDate: minDate
+};
+export var Default = {
+  render: Component,
+  args: generalProps
+};
+export var Range = {
+  render: RangeComponent,
+  args: generalProps
+};

package/dist/esm/components/common/Calendar/palette.js

@@ -0,0 +1,12 @@
+import hexToRgba from '../../../utils/hexToRgba';
+export var generateCalendarPalette = function generateCalendarPalette(abstractPalette) {
+  return {
+    arrow: abstractPalette.primary,
+    weekday: hexToRgba(abstractPalette.primary, 0.4),
+    tile: hexToRgba(abstractPalette.primary, 0.7),
+    tileActive: abstractPalette.primary,
+    tileBgActive: abstractPalette.secondary,
+    tileBgRangeBetween: hexToRgba(abstractPalette.primary, 0.05),
+    month: abstractPalette.primary
+  };
+};

package/dist/esm/components/common/Calendar/styles.js

@@ -0,0 +1,34 @@
+import styled, { css } from 'styled-components';
+import CalendarFromLibrary from 'react-calendar';
+import { breakpoints } from '../../../breakpoints';
+var largeMobileStyles = css(["@media ", "{width:328px;}.react-calendar__navigation{@media ", "{margin-bottom:18px;}}.react-calendar__navigation__label{@media ", "{font-size:20px;font-weight:500;line-height:25px;}}.react-calendar__month-view__weekdays{@media ", "{margin-bottom:6px;}}.react-calendar__tile{@media ", "{height:48px;font-size:15px;font-weight:400;line-height:20px;border-radius:50%;}}"], breakpoints.sm, breakpoints.sm, breakpoints.sm, breakpoints.sm, breakpoints.sm);
+export var LibCalendar = styled(CalendarFromLibrary).withConfig({
+  displayName: "styles__LibCalendar",
+  componentId: "sc-1evd6f-0"
+})(["border:none;width:210px;min-width:210px;background:transparent;.react-calendar__navigation{margin-bottom:16px;height:28px;}.react-calendar__navigation__arrow{font-size:24px;background-color:transparent !important;color:", ";width:28px;height:28px;min-width:28px;display:flex;justify-content:center;align-items:center;}.react-calendar__navigation__arrow:disabled{opacity:0.4;cursor:default;}.react-calendar__navigation__arrow:hover:not([disabled]){opacity:0.6;}.react-calendar__navigation__label{font-size:14px;background-color:transparent !important;cursor:default;color:", ";}.react-calendar__month-view__weekdays__weekday{color:", ";font-size:12px;font-weight:400;line-height:18px;width:30px;height:22px;padding:0;display:flex;justify-content:center;align-items:center;}.react-calendar__month-view__weekdays__weekday abbr{text-decoration:none;}.react-calendar__tile{font-size:12px;color:", ";background-color:transparent !important;padding:0;border-radius:5px;margin-bottom:4px;height:22px;}.react-calendar__tile:disabled{opacity:0.4;cursor:default;}.react-calendar__tile:hover:not([disabled]){opacity:0.6;}.react-calendar__tile--active{background-color:", " !important;color:", ";}.react-calendar__tile--active:hover{opacity:1 !important;}", " ", ""], function (_ref) {
+  var $arrow = _ref.$arrow;
+  return $arrow;
+}, function (_ref2) {
+  var $month = _ref2.$month;
+  return $month;
+}, function (_ref3) {
+  var $weekDay = _ref3.$weekDay;
+  return $weekDay;
+}, function (_ref4) {
+  var $tile = _ref4.$tile;
+  return $tile;
+}, function (_ref5) {
+  var $tileBgActive = _ref5.$tileBgActive;
+  return $tileBgActive;
+}, function (_ref6) {
+  var $tileActive = _ref6.$tileActive;
+  return $tileActive;
+}, function (_ref7) {
+  var selectRange = _ref7.selectRange,
+    $tileBgActive = _ref7.$tileBgActive,
+    $tileBgRangeBetween = _ref7.$tileBgRangeBetween;
+  return selectRange && "\n            .react-calendar__tile--range {\n                border-radius: 0;\n            }\n\n            .react-calendar__tile--rangeBothEnds {\n                border-radius: 5px;\n            }\n            \n            .react-calendar__tile--active {\n                background-color: ".concat($tileBgRangeBetween, " !important;\n            }\n\n            .react-calendar__tile--rangeStart {\n                border-top-left-radius: 5px;\n                border-bottom-left-radius: 5px;\n                background-color: ").concat($tileBgActive, " !important;\n            }\n\n            .react-calendar__tile--rangeEnd {\n                border-top-right-radius: 5px;\n                border-bottom-right-radius: 5px;\n                background-color: ").concat($tileBgActive, " !important;\n            }\n    ");
+}, function (_ref8) {
+  var $isLargeMobileSize = _ref8.$isLargeMobileSize;
+  return $isLargeMobileSize && largeMobileStyles;
+});

package/dist/esm/components/common/Chip/index.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Wrapper } from './styles';
+import { Typography } from '../Typography';
+export var Chip = function Chip(_ref) {
+  var label = _ref.label,
+    bgColor = _ref.bgColor,
+    color = _ref.color,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'xs' : _ref$size;
+  return /*#__PURE__*/React.createElement(Wrapper, {
+    $color: color,
+    $backgroundColor: bgColor,
+    $size: size
+  }, typeof label === 'string' ? /*#__PURE__*/React.createElement(Typography, {
+    variant: "smallMedium"
+  }, label) : label);
+};

package/dist/esm/components/common/Chip/index.stories.js

@@ -0,0 +1,14 @@
+import { Chip } from '.';
+var meta = {
+  title: 'common/Chip',
+  component: Chip,
+  tags: ['autodocs']
+};
+export default meta;
+export var Default = {
+  args: {
+    label: 'Название',
+    color: 'blue',
+    bgColor: 'red'
+  }
+};

package/dist/esm/components/common/Chip/styles.js

@@ -0,0 +1,18 @@
+import styled from 'styled-components';
+var CHIP_PADDING_MAP = {
+  xxs: '0 4px',
+  xs: '4px 6px'
+};
+export var Wrapper = styled.div.withConfig({
+  displayName: "styles__Wrapper",
+  componentId: "sc-1v052gm-0"
+})(["display:inline-flex;align-items:center;gap:4px;padding:", ";color:", ";background-color:", ";border-radius:6px;white-space:nowrap;"], function (_ref) {
+  var $size = _ref.$size;
+  return CHIP_PADDING_MAP[$size];
+}, function (_ref2) {
+  var $color = _ref2.$color;
+  return $color;
+}, function (_ref3) {
+  var $backgroundColor = _ref3.$backgroundColor;
+  return $backgroundColor;
+});

package/dist/esm/components/common/Divider/index.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { useComponentPalette } from '../../../palette';
+import * as S from './styles';
+export var Divider = function Divider(_ref) {
+  var palette = _ref.palette,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? 1 : _ref$height;
+  var mergedPalette = useComponentPalette('divider', palette);
+  return /*#__PURE__*/React.createElement(S.Divider, {
+    $palette: mergedPalette,
+    $height: height
+  });
+};

package/dist/esm/components/common/Divider/index.stories.js

@@ -0,0 +1,8 @@
+import { Divider } from '.';
+var meta = {
+  title: 'common/Divider',
+  component: Divider,
+  tags: ['autodocs']
+};
+export default meta;
+export var Default = {};

package/dist/esm/components/common/Divider/palette.js

@@ -0,0 +1,5 @@
+export var generateDividerPalette = function generateDividerPalette(abstractPalette) {
+  return {
+    divider: abstractPalette.neutralUsual
+  };
+};

package/dist/esm/components/common/Divider/styles.js

@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+export var Divider = styled.hr.withConfig({
+  displayName: "styles__Divider",
+  componentId: "sc-13sr9hl-0"
+})(["width:100%;height:", "px;background-color:", ";margin:0;box-sizing:border-box;"], function (_ref) {
+  var $height = _ref.$height;
+  return $height;
+}, function (_ref2) {
+  var $palette = _ref2.$palette;
+  return $palette.divider;
+});

package/dist/esm/components/common/Drawer/index.js

@@ -0,0 +1,65 @@
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+import React, { useEffect, useState } from 'react';
+import * as S from './styles';
+import { Typography } from '../Typography';
+import { useComponentPalette } from '../../../palette';
+import { Sheet } from 'react-modal-sheet';
+export var Drawer = function Drawer(_ref) {
+  var isOpen = _ref.isOpen,
+    children = _ref.children,
+    title = _ref.title,
+    isErrorBorder = _ref.isErrorBorder,
+    onClose = _ref.onClose,
+    _ref$isPadding = _ref.isPadding,
+    isPadding = _ref$isPadding === void 0 ? true : _ref$isPadding,
+    borderColor = _ref.borderColor,
+    overflow = _ref.overflow,
+    onOpenEnd = _ref.onOpenEnd;
+  var palette = useComponentPalette('drawer');
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    shouldRender = _useState2[0],
+    setShouldRender = _useState2[1];
+
+  // delay for close drawer and unmount
+  useEffect(function () {
+    if (isOpen) {
+      setShouldRender(true);
+    } else {
+      var timer = setTimeout(function () {
+        return setShouldRender(false);
+      }, 300);
+      return function () {
+        return clearTimeout(timer);
+      };
+    }
+  }, [isOpen]);
+  if (!shouldRender) return null;
+  return /*#__PURE__*/React.createElement(Sheet, {
+    detent: "content",
+    isOpen: isOpen,
+    onClose: onClose,
+    onOpenEnd: onOpenEnd
+  }, /*#__PURE__*/React.createElement(S.StyledSheetContainer, {
+    $isErrorBorder: isErrorBorder,
+    $errorColor: palette.error,
+    $borderColor: borderColor,
+    $overflow: overflow
+  }, /*#__PURE__*/React.createElement(Sheet.Content, null, /*#__PURE__*/React.createElement(S.DragIndicatorWrapper, null, /*#__PURE__*/React.createElement(Sheet.DragIndicator, null)), title && /*#__PURE__*/React.createElement(S.Title, {
+    $bg: palette.titleBg
+  }, /*#__PURE__*/React.createElement(Typography, {
+    variant: "headline4"
+  }, title)), /*#__PURE__*/React.createElement(S.ChildrenWrapper, {
+    $isBorderRadius: !title,
+    $bgColor: palette.bg,
+    $isPadding: isPadding
+  }, children))), /*#__PURE__*/React.createElement(S.StyledSheetBackdrop, {
+    onTap: onClose,
+    $bgColor: palette.backdropBg
+  }));
+};

package/dist/esm/components/common/Drawer/index.stories.js

@@ -0,0 +1,77 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+import React, { useState } from 'react';
+import { action } from '@storybook/addon-actions';
+import { Drawer } from '.';
+var meta = {
+  title: 'common/Drawer',
+  component: Drawer,
+  tags: ['autodocs']
+};
+export default meta;
+var Counter = function Counter() {
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    count = _useState2[0],
+    setCount = _useState2[1];
+  return /*#__PURE__*/React.createElement("div", null, count, /*#__PURE__*/React.createElement("button", {
+    type: 'button',
+    onClick: function onClick() {
+      return setCount(function (prevState) {
+        return prevState + 1;
+      });
+    }
+  }, "Increment"));
+};
+function Render(args) {
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isOpen = _useState4[0],
+    setIsOpen = _useState4[1];
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Drawer, _extends({}, args, {
+    onClose: function onClose() {
+      return setIsOpen(false);
+    },
+    isOpen: isOpen
+  }), "Content", /*#__PURE__*/React.createElement(Counter, null)), /*#__PURE__*/React.createElement("button", {
+    type: 'button',
+    onClick: function onClick() {
+      return setIsOpen(true);
+    }
+  }, "Open"));
+}
+var commonArgs = {
+  children: 'Children',
+  isErrorBorder: false,
+  onClose: action('close'),
+  isPadding: false,
+  borderColor: undefined,
+  overflow: 'hidden'
+};
+export var Default = {
+  args: commonArgs,
+  render: Render
+};
+export var WithTitle = {
+  args: _objectSpread(_objectSpread({}, commonArgs), {}, {
+    title: 'Title'
+  }),
+  render: Render
+};
+export var Error = {
+  args: _objectSpread(_objectSpread({}, commonArgs), {}, {
+    isErrorBorder: true
+  }),
+  render: Render
+};

package/dist/esm/components/common/Drawer/palette.js

@@ -0,0 +1,14 @@
+import { transformColorByHsl } from '../../../utils/transformColorByHsl';
+import hexToRgba from '../../../utils/hexToRgba';
+export var generateDrawerPalette = function generateDrawerPalette(abstractPalette) {
+  return {
+    error: abstractPalette.error,
+    bg: abstractPalette.base,
+    backdropBg: hexToRgba(transformColorByHsl(abstractPalette.primary, {
+      hue: -3.3333333333333144,
+      saturation: -0.07435090479937062,
+      lightness: 0.08235294117647063
+    }), 0.5),
+    titleBg: abstractPalette.neutralUsual
+  };
+};

package/dist/esm/components/common/Drawer/styles.js

@@ -0,0 +1,45 @@
+import styled, { css } from 'styled-components';
+import { Sheet } from 'react-modal-sheet';
+export var Title = styled.div.withConfig({
+  displayName: "styles__Title",
+  componentId: "sc-1kysg49-0"
+})(["background-color:", ";padding:30px;position:relative;text-align:center;border-radius:10px 10px 0 0;"], function (_ref) {
+  var $bg = _ref.$bg;
+  return $bg;
+});
+export var DragIndicatorWrapper = styled.div.withConfig({
+  displayName: "styles__DragIndicatorWrapper",
+  componentId: "sc-1kysg49-1"
+})(["position:absolute;top:12px;left:50%;transform:translateX(-50%);"]);
+export var ChildrenWrapper = styled.div.withConfig({
+  displayName: "styles__ChildrenWrapper",
+  componentId: "sc-1kysg49-2"
+})(["", ";background-color:", ";", ""], function (_ref2) {
+  var $isPadding = _ref2.$isPadding;
+  return $isPadding && 'padding: 32px 16px 36px';
+}, function (_ref3) {
+  var $bgColor = _ref3.$bgColor;
+  return $bgColor;
+}, function (_ref4) {
+  var $isBorderRadius = _ref4.$isBorderRadius;
+  return $isBorderRadius && css(["border-radius:10px 10px 0 0;"]);
+});
+export var StyledSheetContainer = styled(Sheet.Container).withConfig({
+  displayName: "styles__StyledSheetContainer",
+  componentId: "sc-1kysg49-3"
+})(["box-shadow:none;border-radius:10px 10px 0 0;", " ", ""], function (_ref5) {
+  var $isErrorBorder = _ref5.$isErrorBorder,
+    $errorColor = _ref5.$errorColor,
+    $borderColor = _ref5.$borderColor;
+  return ($isErrorBorder || $borderColor) && css(["border-top:2px solid ", ";"], $borderColor || $errorColor);
+}, function (_ref6) {
+  var $overflow = _ref6.$overflow;
+  return $overflow === 'visible' && css(["overflow:visible;.react-modal-sheet-content-scroller{overflow-y:visible !important;}"]);
+});
+export var StyledSheetBackdrop = styled(Sheet.Backdrop).withConfig({
+  displayName: "styles__StyledSheetBackdrop",
+  componentId: "sc-1kysg49-4"
+})(["background-color:", " !important;"], function (_ref7) {
+  var $bgColor = _ref7.$bgColor;
+  return $bgColor;
+});