@via-profit/ui-kit 0.1.4 → 0.1.6

package/Calendar/index.d.ts

@@ -1,28 +1,28 @@
-import React from "react";
-import { CalendarBodyProps } from "./CalendarBody";
-import { CalendarCellProps } from "./CalendarCell";
-import { CalendarEmptyCellProps } from "./CalendarEmptyCell";
-import { CalendarPaperProps } from "./CalendarPaper";
-import { CalendarHeaderProps } from "./CalendarHeader";
-import { CalendarWeekRowProps } from "./CalendarWeekRow";
-import { CalendarDateContainerProps } from "./CalendarDateContainer";
-import { CalendarToolbarProps } from "./CalendarToolbar";
-import { CalendarYearsSelectorProps } from "./CalendarYearsSelector";
-import { CalendarMonthsSelectorProps } from "./CalendarMonthsSelector";
-import { CalendarMonthCellProps } from "./CalendarMonthCell";
-import { CalendarYearCellProps } from "./CalendarYearCell";
-import { CalendarDayBadgeProps } from "./CalendarDayBadge";
-import { CalendarFooterProps } from "./CalendarFooter";
-import { CalendarControlButtonProps } from "./CalendarControlButton";
-import { CalendarHeadingProps } from "./CalendarHeading";
-import { CalendarSubheadingProps } from "./CalendarSubheading";
-import { CalendarIconPrevProps } from "./CalendarIconPrev";
-import { CalendarIconNextProps } from "./IconChevronRight";
-import { CalendarWeekDaysBarProps, WeekNameLabelFormat } from "./CalendarWeekDaysBar";
-import { CalendarValue, WeekDayName } from "./use-calendar";
-import { CalendarView as CalendarViewName } from "./reducer";
-export * from "./use-calendar";
-export * from "./CalendarWeekDaysBar";
+import React from 'react';
+import { CalendarBodyProps } from './CalendarBody';
+import { CalendarCellProps } from './CalendarCell';
+import { CalendarEmptyCellProps } from './CalendarEmptyCell';
+import { CalendarPaperProps } from './CalendarPaper';
+import { CalendarHeaderProps } from './CalendarHeader';
+import { CalendarWeekRowProps } from './CalendarWeekRow';
+import { CalendarDateContainerProps } from './CalendarDateContainer';
+import { CalendarToolbarProps } from './CalendarToolbar';
+import { CalendarYearsSelectorProps } from './CalendarYearsSelector';
+import { CalendarMonthsSelectorProps } from './CalendarMonthsSelector';
+import { CalendarMonthCellProps } from './CalendarMonthCell';
+import { CalendarYearCellProps } from './CalendarYearCell';
+import { CalendarDayBadgeProps } from './CalendarDayBadge';
+import { CalendarFooterProps } from './CalendarFooter';
+import { CalendarControlButtonProps } from './CalendarControlButton';
+import { CalendarHeadingProps } from './CalendarHeading';
+import { CalendarSubheadingProps } from './CalendarSubheading';
+import { CalendarIconPrevProps } from './CalendarIconPrev';
+import { CalendarIconNextProps } from './IconChevronRight';
+import { CalendarWeekDaysBarProps, WeekNameLabelFormat } from './CalendarWeekDaysBar';
+import { CalendarValue, WeekDayName } from './use-calendar';
+import { CalendarView as CalendarViewName } from './reducer';
+export * from './use-calendar';
+export * from './CalendarWeekDaysBar';
 export type CalendarView = CalendarViewName;
 export type CalendarProps<Range extends boolean | undefined = undefined> = {
     readonly range?: Range;
@@ -82,7 +82,7 @@ export type CalendarProps<Range extends boolean | undefined = undefined> = {
      * Cell accent color\
      * **Default:** `primary`
      */
-    readonly accentColor?: "primary" | "secondary" | string;
+    readonly accentColor?: 'primary' | 'secondary' | string;
     /**
      * Tooltip for the Prev month button
      */
@@ -214,7 +214,7 @@ export interface CalendarOverrides {
 export type CalendarBadge = {
     readonly date: Date;
     readonly badgeContent: React.ReactNode;
-    readonly accentColor?: "primary" | "secondary" | string;
+    readonly accentColor?: 'primary' | 'secondary' | string;
 };
 declare const Calendar: <Range_1 extends boolean | undefined = undefined>(props: CalendarProps<Range_1>) => React.ReactNode;
 export default Calendar;

package/Calendar/index.js

@@ -43,9 +43,9 @@ const reducer_1 = require("./reducer");
 __exportStar(require("./use-calendar"), exports);
 __exportStar(require("./CalendarWeekDaysBar"), exports);
 const Calendar = (props) => {
-    const { minDate = new Date(new Date().getFullYear() - 100, 0, 1, 0, 0, 0), maxDate = new Date(new Date().getFullYear() + 100, 0, 1, 0, 0, 0), weekStartDay = "monday", locale = "ru-RU", displayLeadingZero = false, onChange, badges = [], value, defaultValue, markToday, weekDayLabelFormat = "short", accentColor = "primary", prevMonthButtonTooltip, nextMonthButtonTooltip, changeMonthButtonTooltip, changeYearButtonTooltip, initialView = (0, reducer_1.createDefaultState)(false).calendarCurrentView, resetButtonLabel, toodayButtonLabel, heading, subheading, footer, overrides, range = false } = props;
-    if (typeof value !== "undefined" && typeof onChange === "undefined") {
-        throw new Error("You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set either `onChange`.");
+    const { minDate = new Date(new Date().getFullYear() - 100, 0, 1, 0, 0, 0), maxDate = new Date(new Date().getFullYear() + 100, 0, 1, 0, 0, 0), weekStartDay = 'monday', locale = 'ru-RU', displayLeadingZero = false, onChange, badges = [], value, defaultValue, markToday, weekDayLabelFormat = 'short', accentColor = 'primary', prevMonthButtonTooltip, nextMonthButtonTooltip, changeMonthButtonTooltip, changeYearButtonTooltip, initialView = (0, reducer_1.createDefaultState)(false).calendarCurrentView, resetButtonLabel, toodayButtonLabel, heading, subheading, footer, overrides, range = false, } = props;
+    if (typeof value !== 'undefined' && typeof onChange === 'undefined') {
+        throw new Error('You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set either `onChange`.');
     }
     const overridesMap = react_1.default.useMemo(() => ({
         Body: (overrides === null || overrides === void 0 ? void 0 : overrides.Body) || CalendarBody_1.default,
@@ -67,48 +67,48 @@ const Calendar = (props) => {
         Subheading: (overrides === null || overrides === void 0 ? void 0 : overrides.Subheading) || CalendarSubheading_1.default,
         IconPrev: (overrides === null || overrides === void 0 ? void 0 : overrides.IconPrev) || CalendarIconPrev_1.default,
         IconNext: (overrides === null || overrides === void 0 ? void 0 : overrides.IconNext) || IconChevronRight_1.default,
-        WeekDaysBar: (overrides === null || overrides === void 0 ? void 0 : overrides.WeekDaysBar) || CalendarWeekDaysBar_1.default
+        WeekDaysBar: (overrides === null || overrides === void 0 ? void 0 : overrides.WeekDaysBar) || CalendarWeekDaysBar_1.default,
     }), [overrides]);
-    const realValue = react_1.default.useMemo(() => typeof value !== "undefined"
+    const realValue = react_1.default.useMemo(() => typeof value !== 'undefined'
         ? value
-        : typeof defaultValue !== "undefined"
+        : typeof defaultValue !== 'undefined'
             ? defaultValue
             : new Date(), [value, defaultValue]);
     const initialProps = react_1.default.useRef({
         value: realValue,
         badges,
-        initialView
+        initialView,
     });
     const initialState = Object.assign(Object.assign({}, (0, reducer_1.createDefaultState)(range)), { calendarValue: realValue, calendarDate: Array.isArray(realValue) ? realValue[0] : realValue, calendarCurrentView: initialView });
     const [state, dispatch] = react_1.default.useReducer(reducer_1.reducer, initialState);
-    const { isSameDay, getWeeks, getDayLabel, getMonthLabel, getYearLabel, getYearsRange, getMonthsRange } = (0, use_calendar_1.useCalendar)({
+    const { isSameDay, getWeeks, getDayLabel, getMonthLabel, getYearLabel, getYearsRange, getMonthsRange, } = (0, use_calendar_1.useCalendar)({
         minDate,
         maxDate,
         weekStartDay,
         locale,
-        displayLeadingZero
+        displayLeadingZero,
     });
     const { calendarCurrentView, calendarViewVariants, calendarValue, calendarDate } = state;
     /**
      * Prev and next month buttons
      */
     const handleChangeMonthClick = react_1.default.useCallback((type) => () => {
-        const newDate = type === "prev"
+        const newDate = type === 'prev'
             ? new Date(calendarDate.getFullYear(), calendarDate.getMonth() - 1, 1)
             : new Date(calendarDate.getFullYear(), calendarDate.getMonth() + 1, 1);
-        dispatch({ type: "setPartial", payload: { calendarDate: newDate } });
+        dispatch({ type: 'setPartial', payload: { calendarDate: newDate } });
     }, [calendarDate]);
     /**
      * Date props was changed
      */
     react_1.default.useEffect(() => {
-        if (typeof value !== "undefined") {
+        if (typeof value !== 'undefined') {
             dispatch({
-                type: "setPartial",
+                type: 'setPartial',
                 payload: {
-                    calendarValue: value
+                    calendarValue: value,
                     // calendarDate: Array.isArray(value) ? value[0] : value,
-                }
+                },
             });
         }
     }, [value, calendarValue, isSameDay, dispatch]);
@@ -116,12 +116,12 @@ const Calendar = (props) => {
      * Handle click on Day button
      */
     const handleCellDateClick = react_1.default.useCallback((selectedDate) => () => {
-        if (typeof onChange === "function") {
+        if (typeof onChange === 'function') {
             if (range) {
                 const [fromDate, toDate] = calendarValue;
                 dispatch({
-                    type: "setPartial",
-                    payload: { calendarDate: selectedDate }
+                    type: 'setPartial',
+                    payload: { calendarDate: selectedDate },
                 });
                 if (selectedDate.getTime() >= toDate.getTime()) {
                     onChange([fromDate, selectedDate]);
@@ -145,7 +145,7 @@ const Calendar = (props) => {
                         return;
                     }
                 }
-                throw new Error("Oooops. I don`t know whats is it");
+                throw new Error('Oooops. I don`t know whats is it');
             }
             else {
                 onChange(selectedDate);
@@ -153,10 +153,10 @@ const Calendar = (props) => {
         }
         if (!calendarValue) {
             dispatch({
-                type: "setPartial",
+                type: 'setPartial',
                 payload: {
-                    calendarValue: selectedDate
-                }
+                    calendarValue: selectedDate,
+                },
             });
         }
     }, [onChange, calendarValue, range]);
@@ -173,11 +173,11 @@ const Calendar = (props) => {
         newDate.setMilliseconds(0);
         if (calendarDate.getFullYear() !== newDate.getFullYear()) {
             dispatch({
-                type: "setPartial",
+                type: 'setPartial',
                 payload: {
                     calendarDate: newDate,
-                    calendarCurrentView: "days"
-                }
+                    calendarCurrentView: 'days',
+                },
             });
         }
     }, [calendarDate]);
@@ -193,11 +193,11 @@ const Calendar = (props) => {
         newDate.setMilliseconds(0);
         if (calendarDate.getMonth() !== newDate.getMonth()) {
             dispatch({
-                type: "setPartial",
+                type: 'setPartial',
                 payload: {
                     calendarDate: newDate,
-                    calendarCurrentView: "days"
-                }
+                    calendarCurrentView: 'days',
+                },
             });
         }
     }, [calendarDate]);
@@ -206,10 +206,10 @@ const Calendar = (props) => {
      */
     const handleChangeView = react_1.default.useCallback((selectedView) => () => {
         dispatch({
-            type: "setPartial",
+            type: 'setPartial',
             payload: {
-                calendarCurrentView: selectedView
-            }
+                calendarCurrentView: selectedView,
+            },
         });
     }, []);
     /**
@@ -217,14 +217,14 @@ const Calendar = (props) => {
      */
     const handleReset = react_1.default.useCallback(() => {
         dispatch({
-            type: "setPartial",
+            type: 'setPartial',
             payload: {
                 calendarCurrentView: initialProps.current.initialView,
                 calendarDate: initialProps.current.value,
-                calendarValue: initialProps.current.value
-            }
+                calendarValue: initialProps.current.value,
+            },
         });
-        if (typeof onChange === "function") {
+        if (typeof onChange === 'function') {
             onChange(initialProps.current.value);
         }
     }, [onChange]);
@@ -238,39 +238,41 @@ const Calendar = (props) => {
         today.setSeconds(0);
         today.setMilliseconds(0);
         dispatch({
-            type: "setPartial",
+            type: 'setPartial',
             payload: {
-                calendarDate: today
-            }
+                calendarDate: today,
+            },
         });
     }, []);
     return (react_1.default.createElement(overridesMap.Paper, null,
         react_1.default.createElement(overridesMap.Header, null,
-            typeof heading !== "undefined" && react_1.default.createElement(overridesMap.Heading, null, heading),
-            typeof subheading !== "undefined" && (react_1.default.createElement(overridesMap.Subheading, null, subheading)),
+            typeof heading !== 'undefined' && react_1.default.createElement(overridesMap.Heading, null, heading),
+            typeof subheading !== 'undefined' && (react_1.default.createElement(overridesMap.Subheading, null, subheading)),
             react_1.default.createElement(overridesMap.Toolbar, null,
-                react_1.default.createElement(overridesMap.ControlButton, { iconOnly: true, onClick: handleChangeMonthClick("prev"), title: prevMonthButtonTooltip, disabled: calendarCurrentView !== "days" },
+                react_1.default.createElement(overridesMap.ControlButton, { iconOnly: true, onClick: handleChangeMonthClick('prev'), title: prevMonthButtonTooltip, disabled: calendarCurrentView !== 'days' },
                     react_1.default.createElement(overridesMap.IconPrev, null)),
-                react_1.default.createElement(overridesMap.ControlButton, { title: changeMonthButtonTooltip, isActive: calendarCurrentView === "months", disabled: !calendarViewVariants.includes("months"), onClick: handleChangeView(calendarCurrentView === "months" ? "days" : "months") }, getMonthLabel(calendarDate)),
-                react_1.default.createElement(overridesMap.ControlButton, { isActive: calendarCurrentView === "years", disabled: !calendarViewVariants.includes("years"), title: changeYearButtonTooltip, onClick: handleChangeView(calendarCurrentView === "years" ? "days" : "years") }, getYearLabel(calendarDate)),
-                react_1.default.createElement(overridesMap.ControlButton, { iconOnly: true, onClick: handleChangeMonthClick("next"), title: nextMonthButtonTooltip, disabled: calendarCurrentView !== "days" },
+                react_1.default.createElement(overridesMap.ControlButton, { title: changeMonthButtonTooltip, isActive: calendarCurrentView === 'months', disabled: !calendarViewVariants.includes('months'), onClick: handleChangeView(calendarCurrentView === 'months' ? 'days' : 'months') }, getMonthLabel(calendarDate)),
+                react_1.default.createElement(overridesMap.ControlButton, { isActive: calendarCurrentView === 'years', disabled: !calendarViewVariants.includes('years'), title: changeYearButtonTooltip, onClick: handleChangeView(calendarCurrentView === 'years' ? 'days' : 'years') }, getYearLabel(calendarDate)),
+                react_1.default.createElement(overridesMap.ControlButton, { iconOnly: true, onClick: handleChangeMonthClick('next'), title: nextMonthButtonTooltip, disabled: calendarCurrentView !== 'days' },
                     react_1.default.createElement(overridesMap.IconNext, null)))),
-        react_1.default.createElement(overridesMap.WeekDaysBar, { locale: locale, week: getWeeks(calendarDate)[0], format: weekDayLabelFormat || "short" }),
+        react_1.default.createElement(overridesMap.WeekDaysBar, { locale: locale, week: getWeeks(calendarDate)[0], format: weekDayLabelFormat || 'short' }),
         react_1.default.createElement(overridesMap.Body, null,
-            calendarCurrentView === "years" && (react_1.default.createElement(overridesMap.YearsSelector, null, getYearsRange(minDate, maxDate).map(year => {
+            calendarCurrentView === 'years' && (react_1.default.createElement(overridesMap.YearsSelector, null, getYearsRange(minDate, maxDate).map(year => {
                 const a = Array.isArray(calendarValue) ? calendarValue : [calendarValue];
                 const isSelected = a.find(d => d.getFullYear() === year) !== undefined;
                 return (react_1.default.createElement(overridesMap.YearCell, { key: year, accentColor: accentColor, isSelected: isSelected, onClick: handleYearSelected(year) }, getYearLabel(new Date(year, calendarDate.getMonth(), calendarDate.getDate(), 0, 0, 0, 0))));
             }))),
-            calendarCurrentView === "months" && (react_1.default.createElement(overridesMap.MonthsSelector, null, getMonthsRange(minDate, maxDate).map(monthIndex => {
+            calendarCurrentView === 'months' && (react_1.default.createElement(overridesMap.MonthsSelector, null, getMonthsRange(minDate, maxDate).map(monthIndex => {
                 const a = Array.isArray(calendarValue) ? calendarValue : [calendarValue];
                 const isSelected = a.find(d => d.getMonth() === monthIndex) !== undefined;
                 return (react_1.default.createElement(overridesMap.MonthCell, { key: monthIndex, accentColor: accentColor, isSelected: isSelected, onClick: handleMonthSelected(monthIndex) }, getMonthLabel(new Date(calendarDate.getFullYear(), monthIndex, 1, 0, 0, 0, 0))));
             }))),
-            calendarCurrentView === "days" && (react_1.default.createElement(overridesMap.DateContainer, null, getWeeks(calendarDate).map(week => (react_1.default.createElement(overridesMap.WeekRow, { key: week.weekNumber.toString() }, week.days.map(day => {
+            calendarCurrentView === 'days' && (react_1.default.createElement(overridesMap.DateContainer, null, getWeeks(calendarDate).map(week => (react_1.default.createElement(overridesMap.WeekRow, { key: week.weekNumber.toString() }, week.days.map(day => {
                 if (day.date.getMonth() === calendarDate.getMonth()) {
                     const badge = badges.find(b => isSameDay(b.date, day.date));
-                    const a = Array.isArray(calendarValue) ? calendarValue : [calendarValue, calendarValue];
+                    const a = Array.isArray(calendarValue)
+                        ? calendarValue
+                        : [calendarValue, calendarValue];
                     const isSelected = isSameDay(a[0], day.date) || isSameDay(a[1], day.date);
                     const fill = Array.isArray(calendarValue)
                         ? day.date.getTime() > calendarValue[0].getTime() &&
@@ -278,15 +280,15 @@ const Calendar = (props) => {
                         : false;
                     return (react_1.default.createElement(overridesMap.Cell, { key: day.date.getTime(), isToday: markToday && day.isToday, isDisabled: day.isDisabled, accentColor: accentColor, isSelected: isSelected, onClick: handleCellDateClick(day.date), fill: fill },
                         getDayLabel(day.date),
-                        typeof badge !== "undefined" && (react_1.default.createElement(overridesMap.DayBadge, { badgeContent: badge.badgeContent, isToday: day.isToday, accentColor: badge.accentColor }))));
+                        typeof badge !== 'undefined' && (react_1.default.createElement(overridesMap.DayBadge, { badgeContent: badge.badgeContent, isToday: day.isToday, accentColor: badge.accentColor }))));
                 }
                 return react_1.default.createElement(overridesMap.EmptyCell, { key: day.date.getTime() });
             }))))))),
-        (typeof resetButtonLabel !== "undefined" ||
-            typeof toodayButtonLabel !== "undefined" ||
-            typeof footer !== "undefined") && (react_1.default.createElement(overridesMap.Footer, null,
-            typeof footer !== "undefined" && react_1.default.createElement(react_1.default.Fragment, null, footer),
-            typeof toodayButtonLabel !== "undefined" && (react_1.default.createElement(overridesMap.ControlButton, { onClick: handleToday }, toodayButtonLabel)),
-            typeof resetButtonLabel !== "undefined" && (react_1.default.createElement(overridesMap.ControlButton, { onClick: handleReset }, resetButtonLabel))))));
+        (typeof resetButtonLabel !== 'undefined' ||
+            typeof toodayButtonLabel !== 'undefined' ||
+            typeof footer !== 'undefined') && (react_1.default.createElement(overridesMap.Footer, null,
+            typeof footer !== 'undefined' && react_1.default.createElement(react_1.default.Fragment, null, footer),
+            typeof toodayButtonLabel !== 'undefined' && (react_1.default.createElement(overridesMap.ControlButton, { onClick: handleToday }, toodayButtonLabel)),
+            typeof resetButtonLabel !== 'undefined' && (react_1.default.createElement(overridesMap.ControlButton, { onClick: handleReset }, resetButtonLabel))))));
 };
 exports.default = Calendar;

package/Modal/BaseModal/ModalWrapper.js

@@ -113,7 +113,7 @@ const ModalWrapper = props => {
                     if (alreadyMounted) {
                         dispatch((0, context_1.actionSetState)({ isOpen: true }));
                     }
-                }, 15);
+                }, 120);
                 return;
             }
             /**

package/Modal/Drawer/DrawerContainer.d.ts

@@ -1,4 +1,21 @@
 import React from 'react';
-export type DrawerContainerProps = React.HTMLAttributes<HTMLDivElement>;
-declare const _default: React.ForwardRefExoticComponent<DrawerContainerProps & React.RefAttributes<HTMLDivElement>>;
+import { AnchorVariant } from './DrawerInner';
+export type DrawerContainerProps = React.HTMLAttributes<HTMLDivElement> & {
+    /**
+     * Drawer position\
+     * \
+     * **Varians:** `bottom` `right` `left` `top`\
+     * **Default:** `bottom`
+     */
+    readonly anchor: AnchorVariant;
+};
+declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    /**
+     * Drawer position\
+     * \
+     * **Varians:** `bottom` `right` `left` `top`\
+     * **Default:** `bottom`
+     */
+    readonly anchor: AnchorVariant;
+} & React.RefAttributes<HTMLDivElement>>;
 export default _default;

package/Modal/Drawer/DrawerContent.d.ts

@@ -1,4 +1,21 @@
 import React from 'react';
-export type DrawerContentProps = React.HTMLAttributes<HTMLDivElement>;
-declare const _default: React.ForwardRefExoticComponent<DrawerContentProps & React.RefAttributes<HTMLDivElement>>;
+import type { AnchorVariant } from './DrawerInner';
+export type DrawerContentProps = React.HTMLAttributes<HTMLDivElement> & {
+    /**
+     * Drawer position\
+     * \
+     * **Varians:** `bottom` `right` `left` `top`\
+     * **Default:** `bottom`
+     */
+    readonly anchor: AnchorVariant;
+};
+declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    /**
+     * Drawer position\
+     * \
+     * **Varians:** `bottom` `right` `left` `top`\
+     * **Default:** `bottom`
+     */
+    readonly anchor: AnchorVariant;
+} & React.RefAttributes<HTMLDivElement>>;
 export default _default;

package/Modal/Drawer/DrawerFooter.d.ts

@@ -1,4 +1,21 @@
 import React from 'react';
-export type DrawerFooterProps = React.HTMLAttributes<HTMLDivElement>;
-declare const _default: React.ForwardRefExoticComponent<DrawerFooterProps & React.RefAttributes<HTMLDivElement>>;
+import { AnchorVariant } from './DrawerInner';
+export type DrawerFooterProps = React.HTMLAttributes<HTMLDivElement> & {
+    /**
+     * Drawer position\
+     * \
+     * **Varians:** `bottom` `right` `left` `top`\
+     * **Default:** `bottom`
+     */
+    readonly anchor: AnchorVariant;
+};
+declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    /**
+     * Drawer position\
+     * \
+     * **Varians:** `bottom` `right` `left` `top`\
+     * **Default:** `bottom`
+     */
+    readonly anchor: AnchorVariant;
+} & React.RefAttributes<HTMLDivElement>>;
 export default _default;

package/Modal/Drawer/index.js

@@ -67,9 +67,9 @@ const Drawer = props => {
                     return (React.createElement(DrawerInner_1.default, Object.assign({ anchor: anchor, dialogID: dialogID, ref: ref }, props), children));
                 }),
             } }),
-            React.createElement(overridesMap.Container, null,
+            React.createElement(overridesMap.Container, { anchor: anchor },
                 hasHeader && (React.createElement(overridesMap.Header, { showCloseButton: showCloseButton, header: header, onRequestClose: onRequestClose }, toolbar)),
-                React.createElement(overridesMap.Content, null, children),
-                hasFooter && React.createElement(overridesMap.Footer, null, footer)))));
+                React.createElement(overridesMap.Content, { anchor: anchor }, children),
+                hasFooter && React.createElement(overridesMap.Footer, { anchor: anchor }, footer)))));
 };
 exports.default = Drawer;

package/Surface/SurfaceContainer.d.ts

@@ -1,8 +1,12 @@
 import React from 'react';
 export type SurfaceContainerProps = React.HTMLAttributes<HTMLDivElement> & {
     readonly inline?: boolean;
+    readonly rounded?: boolean;
+    readonly noPadding?: boolean;
 };
 declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
     readonly inline?: boolean | undefined;
+    readonly rounded?: boolean | undefined;
+    readonly noPadding?: boolean | undefined;
 } & React.RefAttributes<HTMLDivElement>>;
 export default _default;

package/Surface/SurfaceHeader.d.ts

@@ -1,4 +1,8 @@
 import React from 'react';
-export type SurfaceHeaderProps = React.HTMLAttributes<HTMLDivElement>;
-declare const _default: React.ForwardRefExoticComponent<SurfaceHeaderProps & React.RefAttributes<HTMLDivElement>>;
+export type SurfaceHeaderProps = React.HTMLAttributes<HTMLDivElement> & {
+    readonly noPadding?: boolean;
+};
+declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    readonly noPadding?: boolean | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
 export default _default;

package/Surface/SurfaceHeader.js

@@ -17,14 +17,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
 const StyledHeader = styled_1.default.div `
-  padding: 1rem 1rem 0 1rem;
+  padding: ${({ $noPadding }) => ($noPadding ? '0' : '1rem 1rem 0 1rem')};
   font-size: 1.3rem;
   font-weight: 600;
   border-top-left-radius: inherit;
   border-top-right-radius: inherit;
 `;
 const SurfaceHeader = (props, ref) => {
-    const { children } = props, nativeProps = __rest(props, ["children"]);
-    return (react_1.default.createElement(StyledHeader, Object.assign({}, nativeProps, { ref: ref }), children));
+    const { children, noPadding } = props, nativeProps = __rest(props, ["children", "noPadding"]);
+    return (react_1.default.createElement(StyledHeader, Object.assign({ "$noPadding": noPadding }, nativeProps, { ref: ref }), children));
 };
 exports.default = react_1.default.forwardRef(SurfaceHeader);

package/Surface/SurfaceSubheader.d.ts

@@ -1,4 +1,8 @@
 import React from 'react';
-export type SurfaceSubheaderProps = React.HTMLAttributes<HTMLDivElement>;
-declare const _default: React.ForwardRefExoticComponent<SurfaceSubheaderProps & React.RefAttributes<HTMLDivElement>>;
+export type SurfaceSubheaderProps = React.HTMLAttributes<HTMLDivElement> & {
+    readonly noPadding?: boolean;
+};
+declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    readonly noPadding?: boolean | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
 export default _default;

package/Surface/SurfaceSubheader.js

@@ -17,13 +17,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
 const StyledHeader = styled_1.default.div `
-  padding: 0.5em 1rem 0 1rem;
+  padding: ${({ $noPadding }) => ($noPadding ? '0' : '0.5em 1rem 0 1rem')};
   font-size: 0.9rem;
   font-weight: 200;
   color: ${({ theme }) => theme.color.textSecondary.toString()};
 `;
 const SurfaceSubheader = (props, ref) => {
-    const { children } = props, nativeProps = __rest(props, ["children"]);
-    return (react_1.default.createElement(StyledHeader, Object.assign({}, nativeProps, { ref: ref }), children));
+    const { children, noPadding } = props, nativeProps = __rest(props, ["children", "noPadding"]);
+    return (react_1.default.createElement(StyledHeader, Object.assign({ "$noPadding": noPadding }, nativeProps, { ref: ref }), children));
 };
 exports.default = react_1.default.forwardRef(SurfaceSubheader);

package/Surface/index.d.ts

@@ -22,6 +22,14 @@ export type SurfaceProps = React.HTMLAttributes<HTMLDivElement> & {
      * If true then surface will be inline-flex element, and the flex otherwise
      */
     readonly inline?: boolean;
+    /**
+     * The surface will be rounded
+     */
+    readonly rounded?: boolean;
+    /**
+     * If true then surface does not contin any paddings
+     */
+    readonly noPadding?: boolean;
     /**
      * Overridable components map
      */
@@ -67,6 +75,14 @@ declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTM
      * If true then surface will be inline-flex element, and the flex otherwise
      */
     readonly inline?: boolean | undefined;
+    /**
+     * The surface will be rounded
+     */
+    readonly rounded?: boolean | undefined;
+    /**
+     * If true then surface does not contin any paddings
+     */
+    readonly noPadding?: boolean | undefined;
     /**
      * Overridable components map
      */

package/Surface/index.js

@@ -44,7 +44,7 @@ const SurfaceSubheader_1 = __importDefault(require("./SurfaceSubheader"));
 const SurfaceContent_1 = __importDefault(require("./SurfaceContent"));
 const SurfaceFooter_1 = __importDefault(require("./SurfaceFooter"));
 const Surface = (props, ref) => {
-    const { children, header, subheader, footer, inline, overrides } = props, nativeProps = __rest(props, ["children", "header", "subheader", "footer", "inline", "overrides"]);
+    const { children, header, subheader, footer, inline, noPadding, overrides } = props, nativeProps = __rest(props, ["children", "header", "subheader", "footer", "inline", "noPadding", "overrides"]);
     const hasFooter = typeof footer !== 'undefined' && footer !== null;
     const hasHeader = typeof header !== 'undefined' && header !== null;
     const hasSubheader = typeof subheader !== 'undefined' && subheader !== null;
@@ -58,10 +58,10 @@ const Surface = (props, ref) => {
     if (!hasHeader && hasSubheader) {
         console.warn(`[@via-profit/ui-kit] Surface component. If you use a subheader, then you should add a header`);
     }
-    return (React.createElement(overridesMap.Container, Object.assign({}, nativeProps, { inline: inline, ref: ref }),
-        hasHeader && React.createElement(overridesMap.Header, null, header),
-        hasSubheader && React.createElement(overridesMap.Subheader, null, subheader),
-        React.createElement(overridesMap.Content, null, children),
-        hasFooter && React.createElement(overridesMap.Footer, null, footer)));
+    return (React.createElement(overridesMap.Container, Object.assign({}, nativeProps, { inline: inline, noPadding: noPadding, ref: ref }),
+        hasHeader && React.createElement(overridesMap.Header, { noPadding: noPadding }, header),
+        hasSubheader && (React.createElement(overridesMap.Subheader, { noPadding: noPadding }, subheader)),
+        React.createElement(overridesMap.Content, { noPadding: noPadding }, children),
+        hasFooter && React.createElement(overridesMap.Footer, { noPadding: noPadding }, footer)));
 };
 exports.default = React.forwardRef(Surface);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@via-profit/ui-kit",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "description": "UI Kit",
   "repository": {
     "type": "git",
@@ -22,10 +22,10 @@
     "access": "public"
   },
   "peerDependencies": {
-    "@emotion/react": "^11.10.6",
-    "@emotion/styled": "^11.10.6",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "@emotion/react": ">=11.10.6",
+    "@emotion/styled": ">=11.10.6",
+    "react": ">=18.2.0",
+    "react-dom": ">=18.2.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.23.4",