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

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,133 @@
+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, useEffect, useRef, useState } from 'react';
+import * as S from './styles';
+import { Typography } from '../Typography';
+import { useComponentPalette } from '../../../palette';
+var ANIMATION_MS = 300;
+var DRAG_CLOSE_THRESHOLD = 80;
+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];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isEntered = _useState4[0],
+    setIsEntered = _useState4[1];
+  var _useState5 = useState(0),
+    _useState6 = _slicedToArray(_useState5, 2),
+    dragOffset = _useState6[0],
+    setDragOffset = _useState6[1];
+  var dragStartYRef = useRef(null);
+  var sheetRef = useRef(null);
+
+  // Монтируем при открытии, размонтируем после анимации закрытия (как раньше — задержка 300мс).
+  useEffect(function () {
+    if (isOpen) {
+      setShouldRender(true);
+    } else {
+      setIsEntered(false);
+      var timer = setTimeout(function () {
+        return setShouldRender(false);
+      }, ANIMATION_MS);
+      return function () {
+        return clearTimeout(timer);
+      };
+    }
+    return undefined;
+  }, [isOpen]);
+
+  // Запускаем enter-переход на кадр позже маунта: сначала лист за экраном (translateY 100%), затем 0.
+  useEffect(function () {
+    if (!shouldRender || !isOpen) return undefined;
+    var raf = requestAnimationFrame(function () {
+      return setIsEntered(true);
+    });
+    return function () {
+      return cancelAnimationFrame(raf);
+    };
+  }, [shouldRender, isOpen]);
+
+  // Блокируем скролл фона, пока боттомшит открыт (как делал react-modal-sheet).
+  useEffect(function () {
+    if (!shouldRender) return undefined;
+    var prev = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+    return function () {
+      document.body.style.overflow = prev;
+    };
+  }, [shouldRender]);
+  var handleTransitionEnd = useCallback(function (event) {
+    if (event.target !== sheetRef.current || event.propertyName !== 'transform') return;
+    if (isOpen && isEntered && onOpenEnd) onOpenEnd();
+  }, [isOpen, isEntered, onOpenEnd]);
+  var handlePointerDown = useCallback(function (event) {
+    var _event$currentTarget$, _event$currentTarget;
+    dragStartYRef.current = event.clientY;
+    (_event$currentTarget$ = (_event$currentTarget = event.currentTarget).setPointerCapture) === null || _event$currentTarget$ === void 0 || _event$currentTarget$.call(_event$currentTarget, event.pointerId);
+  }, []);
+  var handlePointerMove = useCallback(function (event) {
+    if (dragStartYRef.current === null) return;
+    var delta = event.clientY - dragStartYRef.current;
+    setDragOffset(delta > 0 ? delta : 0);
+  }, []);
+  var handlePointerUp = useCallback(function () {
+    if (dragStartYRef.current === null) return;
+    var offset = dragOffset;
+    dragStartYRef.current = null;
+    setDragOffset(0);
+    if (offset > DRAG_CLOSE_THRESHOLD) onClose();
+  }, [dragOffset, onClose]);
+  if (!shouldRender) return null;
+  var isDragging = dragOffset > 0;
+  var translateY = !isEntered ? '100%' : "".concat(dragOffset, "px");
+  return /*#__PURE__*/React.createElement(S.Root, {
+    role: "dialog",
+    "aria-modal": "true"
+  }, /*#__PURE__*/React.createElement(S.Backdrop, {
+    $bgColor: palette.backdropBg,
+    $isVisible: isEntered,
+    onClick: onClose
+  }), /*#__PURE__*/React.createElement(S.Sheet, {
+    ref: sheetRef,
+    style: {
+      transform: "translateY(".concat(translateY, ")")
+    },
+    $isDragging: isDragging,
+    $isErrorBorder: isErrorBorder,
+    $errorColor: palette.error,
+    $borderColor: borderColor,
+    $overflow: overflow,
+    onTransitionEnd: handleTransitionEnd
+  }, /*#__PURE__*/React.createElement(S.DragHandle, {
+    $bg: title ? palette.titleBg : palette.bg,
+    onPointerDown: handlePointerDown,
+    onPointerMove: handlePointerMove,
+    onPointerUp: handlePointerUp,
+    onPointerCancel: handlePointerUp
+  }, /*#__PURE__*/React.createElement(S.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)));
+};

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,61 @@
+import styled, { css } from 'styled-components';
+export var Root = styled.div.withConfig({
+  displayName: "styles__Root",
+  componentId: "sc-1kysg49-0"
+})(["position:fixed;inset:0;z-index:1000;display:flex;align-items:flex-end;justify-content:center;"]);
+export var Backdrop = styled.div.withConfig({
+  displayName: "styles__Backdrop",
+  componentId: "sc-1kysg49-1"
+})(["position:absolute;inset:0;background-color:", ";opacity:", ";transition:opacity 300ms ease;"], function (_ref) {
+  var $bgColor = _ref.$bgColor;
+  return $bgColor;
+}, function (_ref2) {
+  var $isVisible = _ref2.$isVisible;
+  return $isVisible ? 1 : 0;
+});
+export var Sheet = styled.div.withConfig({
+  displayName: "styles__Sheet",
+  componentId: "sc-1kysg49-2"
+})(["position:relative;width:100%;max-height:90vh;display:flex;flex-direction:column;box-shadow:none;border-radius:10px 10px 0 0;will-change:transform;transition:transform 300ms cubic-bezier(0.32,0.72,0,1);", " ", " ", ""], function (_ref3) {
+  var $isDragging = _ref3.$isDragging;
+  return $isDragging && css(["transition:none;"]);
+}, function (_ref4) {
+  var $isErrorBorder = _ref4.$isErrorBorder,
+    $errorColor = _ref4.$errorColor,
+    $borderColor = _ref4.$borderColor;
+  return ($isErrorBorder || $borderColor) && css(["border-top:2px solid ", ";"], $borderColor || $errorColor);
+}, function (_ref5) {
+  var $overflow = _ref5.$overflow;
+  return $overflow === 'visible' ? css(["overflow:visible;"]) : css(["overflow-y:auto;"]);
+});
+export var DragHandle = styled.div.withConfig({
+  displayName: "styles__DragHandle",
+  componentId: "sc-1kysg49-3"
+})(["position:relative;flex:0 0 auto;height:28px;background-color:", ";border-radius:10px 10px 0 0;touch-action:none;cursor:grab;&:active{cursor:grabbing;}"], function (_ref6) {
+  var $bg = _ref6.$bg;
+  return $bg;
+});
+export var DragIndicator = styled.div.withConfig({
+  displayName: "styles__DragIndicator",
+  componentId: "sc-1kysg49-4"
+})(["position:absolute;top:12px;left:50%;transform:translateX(-50%);width:40px;height:4px;border-radius:99px;background-color:rgba(53,63,71,0.2);"]);
+export var Title = styled.div.withConfig({
+  displayName: "styles__Title",
+  componentId: "sc-1kysg49-5"
+})(["background-color:", ";padding:30px;position:relative;text-align:center;border-radius:10px 10px 0 0;"], function (_ref7) {
+  var $bg = _ref7.$bg;
+  return $bg;
+});
+export var ChildrenWrapper = styled.div.withConfig({
+  displayName: "styles__ChildrenWrapper",
+  componentId: "sc-1kysg49-6"
+})(["", ";background-color:", ";", ""], function (_ref8) {
+  var $isPadding = _ref8.$isPadding;
+  return $isPadding && 'padding: 32px 16px 36px';
+}, function (_ref9) {
+  var $bgColor = _ref9.$bgColor;
+  return $bgColor;
+}, function (_ref10) {
+  var $isBorderRadius = _ref10.$isBorderRadius;
+  return $isBorderRadius && css(["border-radius:10px 10px 0 0;"]);
+});