@mailstep/design-system 0.6.10 → 0.6.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.6.10",
+  "version": "0.6.12",
   "license": "ISC",
   "type": "module",
   "main": "./ui/index.js",

package/ui/Blocks/CommonGrid/CommonGridContainer.js

@@ -61,6 +61,6 @@ var StyledCommonGrid = function (props) {
         gridSelectors: gridSelectors,
         onClose: onClose,
     }), columnsConfigValues = _d.columnsConfigValues, setColumnsConfigOptions = _d.setColumnsConfigOptions, onConfirmForm = _d.onConfirmForm, resetColumnConfig = _d.resetColumnConfig, handleDragEnd = _d.handleDragEnd, onCloseForm = _d.onCloseForm, displayColumnsDefinitions = _d.displayColumnsDefinitions, manageColumnsFormDefinitions = _d.manageColumnsFormDefinitions;
-    return (_jsxs(ContentContainer, { children: [_jsxs(CommonGridWrap, { children: [_jsx(HidePrint, { children: _jsxs(StyledButtonStrip, { className: "buttonsStrip", children: [!hideControlButtons && (_jsx(ControlButtons, { extraControlButtons: extraControlButtons, gridActions: gridActions, gridSelectors: gridSelectors, eshopSelect: eshopSelect })), _jsx(StyledColumnButton, { type: "button", sizing: "iconLg", appearance: "ghost", icon: _jsx(Settings2, {}), onClick: openManageColumnForm, children: _jsx(H6, { variant: "semiBold", children: _jsx(Trans, { id: "manageColumn.title", message: "Manage column" }) }) })] }) }), _jsx(CommonGridWithStyles, __assign({}, passDownProps, modifiedPassDownProps, { filters: filters, gridRef: gridRef, height: gridHeight, floatingButtonProps: floatingButtonProps, handleDragEnd: handleDragEnd(false), displayColumnsDefinitions: displayColumnsDefinitions, hasColouredRows: true }))] }), _jsx(HidePrint, { children: _jsxs(BottomWrapper, { ref: paginationRef, isFixed: !!gridHeight, children: [processCheckedValues && (_jsx(ActionHead, { rowsData: rowsData, onBatchAction: onBatchAction, gridActions: gridActions, gridSelectors: gridSelectors, actionColumn: actionColumnDefinition, processCheckedValues: processCheckedValues, processCheckedValuesTitle: processCheckedValuesTitle })), _jsxs(x.div, { display: "flex", justifyContent: "center", alignItems: "center", className: "paginatorWrapper", w: "100%", h: window.innerWidth > 1204 ? '60px' : '32px', children: [_jsx(Pagination, { page: gridSelectors === null || gridSelectors === void 0 ? void 0 : gridSelectors.page, itemCount: passDownProps === null || passDownProps === void 0 ? void 0 : passDownProps.totalRowsCount, itemPerPage: (gridSelectors === null || gridSelectors === void 0 ? void 0 : gridSelectors.rowsPerPage) || 10, onPageChange: gridActions === null || gridActions === void 0 ? void 0 : gridActions.setPage, customPaginationHandler: customPaginationHandler, radius: window.innerWidth < 768 ? 3 : 5, rate: window.innerWidth < 768 ? 1 : 4 }), _jsx(TablePagination, { gridActions: gridActions, gridSelectors: gridSelectors, customPaginationHandler: customPaginationHandler })] })] }) }), manageColumnFormVisible && (_jsx(Modal, { title: _jsx(Trans, { id: "manageColumn.title", message: "Manage columns" }), onClose: onCloseForm, onCancel: onCloseForm, onExtraAction: resetColumnConfig, onConfirm: onConfirmForm, width: "auto", minWidth: "350px", hasFooter: true, extraActionLabel: _jsx(Trans, { id: "dataGrid.buttonClearConfig", message: "Reset config" }), cancelLabel: _jsx(Trans, { id: "form.buttonCancel", message: "Cancel" }), confirmLabel: _jsx(Trans, { id: "form.buttonConfirm", message: "Confirm" }), children: _jsx(ManageColumnForm, { columns: manageColumnsFormDefinitions, columnsConfigValues: columnsConfigValues, setColumnsConfigOptions: setColumnsConfigOptions, handleDragEnd: handleDragEnd(true) }) }))] }));
+    return (_jsxs(ContentContainer, { children: [_jsxs(CommonGridWrap, { children: [_jsx(HidePrint, { children: _jsxs(StyledButtonStrip, { className: "buttonsStrip", children: [!hideControlButtons && (_jsx(ControlButtons, { extraControlButtons: extraControlButtons, gridActions: gridActions, gridSelectors: gridSelectors, eshopSelect: eshopSelect })), _jsx(StyledColumnButton, { type: "button", variant: "ghost", appearance: "primary", iconLeft: _jsx(Settings2, {}), onClick: openManageColumnForm, children: _jsx(H6, { variant: "semiBold", mt: 0, mb: 0, children: _jsx(Trans, { id: "manageColumn.title", message: "Manage column" }) }) })] }) }), _jsx(CommonGridWithStyles, __assign({}, passDownProps, modifiedPassDownProps, { filters: filters, gridRef: gridRef, height: gridHeight, floatingButtonProps: floatingButtonProps, handleDragEnd: handleDragEnd(false), displayColumnsDefinitions: displayColumnsDefinitions, hasColouredRows: true }))] }), _jsx(HidePrint, { children: _jsxs(BottomWrapper, { ref: paginationRef, isFixed: !!gridHeight, children: [processCheckedValues && (_jsx(ActionHead, { rowsData: rowsData, onBatchAction: onBatchAction, gridActions: gridActions, gridSelectors: gridSelectors, actionColumn: actionColumnDefinition, processCheckedValues: processCheckedValues, processCheckedValuesTitle: processCheckedValuesTitle })), _jsxs(x.div, { display: "flex", justifyContent: "center", alignItems: "center", className: "paginatorWrapper", w: "100%", h: window.innerWidth > 1204 ? '60px' : '32px', children: [_jsx(Pagination, { page: gridSelectors === null || gridSelectors === void 0 ? void 0 : gridSelectors.page, itemCount: passDownProps === null || passDownProps === void 0 ? void 0 : passDownProps.totalRowsCount, itemPerPage: (gridSelectors === null || gridSelectors === void 0 ? void 0 : gridSelectors.rowsPerPage) || 10, onPageChange: gridActions === null || gridActions === void 0 ? void 0 : gridActions.setPage, customPaginationHandler: customPaginationHandler, radius: window.innerWidth < 768 ? 3 : 5, rate: window.innerWidth < 768 ? 1 : 4 }), _jsx(TablePagination, { gridActions: gridActions, gridSelectors: gridSelectors, customPaginationHandler: customPaginationHandler })] })] }) }), manageColumnFormVisible && (_jsx(Modal, { title: _jsx(Trans, { id: "manageColumn.title", message: "Manage columns" }), onClose: onCloseForm, onCancel: onCloseForm, onExtraAction: resetColumnConfig, onConfirm: onConfirmForm, width: "auto", minWidth: "350px", hasFooter: true, extraActionLabel: _jsx(Trans, { id: "dataGrid.buttonClearConfig", message: "Reset config" }), cancelLabel: _jsx(Trans, { id: "form.buttonCancel", message: "Cancel" }), confirmLabel: _jsx(Trans, { id: "form.buttonConfirm", message: "Confirm" }), children: _jsx(ManageColumnForm, { columns: manageColumnsFormDefinitions, columnsConfigValues: columnsConfigValues, setColumnsConfigOptions: setColumnsConfigOptions, handleDragEnd: handleDragEnd(true) }) }))] }));
 };
 export default StyledCommonGrid;

package/ui/Blocks/CommonGrid/components/ActionHead/ActionHead.js

@@ -44,7 +44,7 @@ var ActionHead = function (_a) {
                             id: 'dataGrid.checkedRowsCount',
                             message: "Selected {checkedRowsCount} items",
                             values: { checkedRowsCount: checkedRowsCount },
-                        }) }), _jsxs(ButtonsWrap, { children: [_jsx(Button, { type: "button", onClick: checkAll, appearance: "secondaryLg", "data-cy": "checkAllBtn", disabled: checked, children: _jsx(Trans, { id: "dataGrid.checkAll", message: "Check all" }) }), processCheckedValues && (_jsx(Button, { type: "button", onClick: processCheckedValues, appearance: "primary", "data-cy": "exportBtn", disabled: !rowsData.length, children: processCheckedValuesTitle ? (processCheckedValuesTitle) : (_jsx(Trans, { id: "dataGrid.actionOptions.export", message: "Export" })) })), ((_b = actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.actionOptions) === null || _b === void 0 ? void 0 : _b.length) && (_jsx(ButtonMore, { items: actionsOptions, disabled: !enabledActions.length || !rowsData.length, dropdownPosition: "top" }))] })] }) })) }));
+                        }) }), _jsxs(ButtonsWrap, { children: [_jsx(Button, { type: "button", onClick: checkAll, appearance: "secondary", variant: "default", "data-cy": "checkAllBtn", disabled: checked, children: _jsx(Trans, { id: "dataGrid.checkAll", message: "Check all" }) }), processCheckedValues && (_jsx(Button, { type: "button", onClick: processCheckedValues, appearance: "primary", variant: 'default', "data-cy": "exportBtn", disabled: !rowsData.length, children: processCheckedValuesTitle ? (processCheckedValuesTitle) : (_jsx(Trans, { id: "dataGrid.actionOptions.export", message: "Export" })) })), ((_b = actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.actionOptions) === null || _b === void 0 ? void 0 : _b.length) && (_jsx(ButtonMore, { items: actionsOptions, disabled: !enabledActions.length || !rowsData.length, dropdownPosition: "top" }))] })] }) })) }));
 };
 export default ActionHead;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/ui/Blocks/CommonGrid/components/ButtonMore/ButtonMore.js

@@ -26,7 +26,7 @@ var ButtonMore = function (_a) {
     var handleClick = useCallback(function () {
         setActionsVisible(!actionsVisible);
     }, [actionsVisible]);
-    return (_jsxs(ButtonWrapper, { ref: ref, children: [_jsx(Button, { onClick: handleClick, icon: "ellipsisVertical", appearance: "secondaryLg", type: "button", sizing: "iconLg", "data-cy": "gridActionBtn", disabled: disabled }), _jsx(StyledDropdownMenu, { showMenu: actionsVisible, items: items, dropdownPosition: dropdownPosition })] }));
+    return (_jsxs(ButtonWrapper, { ref: ref, children: [_jsx(Button, { onClick: handleClick, icon: "ellipsisVertical", appearance: "secondary", variant: "icon", type: "button", "data-cy": "gridActionBtn", disabled: disabled }), _jsx(StyledDropdownMenu, { showMenu: actionsVisible, items: items, dropdownPosition: dropdownPosition })] }));
 };
 export default ButtonMore;
 var templateObject_1, templateObject_2;

package/ui/Blocks/CommonGrid/components/ControlButtons/ControlButtons.js

@@ -14,7 +14,7 @@ var ControlButtons = function (_a) {
     var resetFilters = gridActions.resetFilters;
     var filter = gridSelectors.filter;
     var filtersOn = !!filter && Object.values(filter).some(function (item) { var _a; return ((_a = item.value) === null || _a === void 0 ? void 0 : _a.value) !== '' && item.value !== ''; });
-    return (_jsxs(Row, { children: [eshopSelect && (_jsx(x.div, { children: _jsx(ExtraControlButtons, { extraControlButtons: eshopSelect, targetPosition: ExtraControlButtonPosition.TopRight }) })), _jsx(ExtraControlButtons, { extraControlButtons: extraControlButtons, targetPosition: ExtraControlButtonPosition.TopLeft }), _jsx(x.div, { children: filtersOn && (_jsx(Button, { type: "button", onClick: resetFilters, appearance: "secondaryLg", "data-cy": "resetFiltersBtn", children: _jsx(Trans, { id: "dataGrid.buttonClearSettings", message: "Reset filters" }) })) })] }));
+    return (_jsxs(Row, { children: [eshopSelect && (_jsx(x.div, { children: _jsx(ExtraControlButtons, { extraControlButtons: eshopSelect, targetPosition: ExtraControlButtonPosition.TopRight }) })), _jsx(ExtraControlButtons, { extraControlButtons: extraControlButtons, targetPosition: ExtraControlButtonPosition.TopLeft }), _jsx(x.div, { children: filtersOn && (_jsx(Button, { type: "button", onClick: resetFilters, variant: "default", appearance: "secondary", "data-cy": "resetFiltersBtn", children: _jsx(Trans, { id: "dataGrid.buttonClearSettings", message: "Reset filters" }) })) })] }));
 };
 export default ControlButtons;
 var templateObject_1;

package/ui/Blocks/CommonGrid/components/DataRow.js

@@ -105,6 +105,6 @@ var DataRow = function (_a) {
         return actionColumn ? __assign({}, getActionCellSizeProps(actionColumn)) : {};
     }, [actionColumn]);
     var displayReadEditCell = ((_c = actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.actionOptions) === null || _c === void 0 ? void 0 : _c.length) || (actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.canRowEdit) || (actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.canRowRead) || (actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.forceCheckboxes);
-    return (_jsxs(StyledDataRow, { className: rowClassName, hasRowClick: !!onRowClick, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, isEven: isEven, children: [actionColumn && (_jsxs(_Fragment, { children: [displayReadEditCell && (_jsxs(Cell, { className: "cell", style: actionColumnStyle, children: [((_d = actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.actionOptions) === null || _d === void 0 ? void 0 : _d.length) || (actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.forceCheckboxes) ? (_jsx(Checkbox, { checked: isChecked, onChange: onCheckboxChange, label: "" })) : null, _jsxs(x.div, { children: [(isFunction(actionColumn.canRowRead) ? actionColumn.canRowRead(rowData) : actionColumn.canRowRead) && (_jsx(RowActionComponent, __assign({}, rowActionProps('read'), { children: _jsx(Button, { type: "button", appearance: "primary", mb: "5px", ml: "5px", mr: "5px", className: "actionColumnButton", children: _jsx(EyeOpenIcon, { width: "16px", height: "16px" }) }) }))), (isFunction(actionColumn.canRowEdit) ? actionColumn.canRowEdit(rowData) : actionColumn.canRowEdit) && (_jsx(RowActionComponent, __assign({}, rowActionProps('edit'), { children: _jsx(Button, { type: "button", appearance: "primary", mt: "5px", mb: "5px", ml: "5px", mr: "5px", className: "actionColumnButton", children: _jsx(EditIcon, { width: "16px", height: "16px" }) }) })))] })] })), (actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.addRowNumbers) && (_jsx(Cell, { className: "cell", style: actionColumnStyle, children: _jsx(x.div, { children: rowIndex }) }))] })), columns.map(function (column, key) { return (_jsx(MemoDataCell, { column: column, rowData: rowData, onRowAction: handleRowAction, displayColumnWidth: displayColumnsWidth[column.name], group: groups === null || groups === void 0 ? void 0 : groups[key] }, column.name)); })] }));
+    return (_jsxs(StyledDataRow, { className: rowClassName, hasRowClick: !!onRowClick, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, isEven: isEven, children: [actionColumn && (_jsxs(_Fragment, { children: [displayReadEditCell && (_jsxs(Cell, { className: "cell", style: actionColumnStyle, children: [((_d = actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.actionOptions) === null || _d === void 0 ? void 0 : _d.length) || (actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.forceCheckboxes) ? (_jsx(Checkbox, { checked: isChecked, onChange: onCheckboxChange, label: "" })) : null, _jsxs(x.div, { children: [(isFunction(actionColumn.canRowRead) ? actionColumn.canRowRead(rowData) : actionColumn.canRowRead) && (_jsx(RowActionComponent, __assign({}, rowActionProps('read'), { children: _jsx(Button, { type: "button", variant: "default", appearance: "primary", children: _jsx(EyeOpenIcon, { width: "16px", height: "16px" }) }) }))), (isFunction(actionColumn.canRowEdit) ? actionColumn.canRowEdit(rowData) : actionColumn.canRowEdit) && (_jsx(RowActionComponent, __assign({}, rowActionProps('edit'), { children: _jsx(Button, { type: "button", variant: "default", appearance: "primary", children: _jsx(EditIcon, { width: "16px", height: "16px" }) }) })))] })] })), (actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.addRowNumbers) && (_jsx(Cell, { className: "cell", style: actionColumnStyle, children: _jsx(x.div, { children: rowIndex }) }))] })), columns.map(function (column, key) { return (_jsx(MemoDataCell, { column: column, rowData: rowData, onRowAction: handleRowAction, displayColumnWidth: displayColumnsWidth[column.name], group: groups === null || groups === void 0 ? void 0 : groups[key] }, column.name)); })] }));
 };
 export default DataRow;

package/ui/Blocks/CommonGrid/components/ExtraControlButtons/ExtraControlButtons.js

@@ -20,14 +20,14 @@ import DropdownSelect from '../../../../Elements/DropdownSelect';
 export var Row = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  & > * {\n    margin-right: 12px;\n  }\n  z-index: 2;\n"], ["\n  display: flex;\n  & > * {\n    margin-right: 12px;\n  }\n  z-index: 2;\n"])));
 var StyledButton = styled(Button)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: none;\n\n  @media (min-width: 1024px) {\n    display: block;\n  }\n"], ["\n  display: none;\n\n  @media (min-width: 1024px) {\n    display: block;\n  }\n"])));
 var ControlButton = function (_a) {
-    var node = _a.node, label = _a.label, style = _a.style, disabled = _a.disabled, onClick = _a.onClick, onSelect = _a.onSelect, options = _a.options, hideChevron = _a.hideChevron;
+    var node = _a.node, label = _a.label, appearance = _a.appearance, variant = _a.variant, disabled = _a.disabled, onClick = _a.onClick, onSelect = _a.onSelect, options = _a.options, hideChevron = _a.hideChevron;
     if (node)
         return _jsx(_Fragment, { children: node });
     if (options) {
-        return (_jsx(DropdownSelect, { label: label || '', appearance: style || 'secondary', options: options, showChevron: !hideChevron, onSelect: onSelect, disabled: disabled }));
+        return (_jsx(DropdownSelect, { label: label || '', appearance: appearance || 'secondary', variant: variant || 'default', options: options, showChevron: !hideChevron, onSelect: onSelect, disabled: disabled }));
     }
     else {
-        return (_jsx(StyledButton, { type: "button", onClick: onClick, disabled: disabled, appearance: style || 'secondary', children: label }));
+        return (_jsx(StyledButton, { type: "button", onClick: onClick, disabled: disabled, variant: variant || 'default', appearance: appearance || 'secondary', children: label }));
     }
 };
 var ExtraControlButtons = function (_a) {

package/ui/Blocks/CommonGrid/components/gridCells/ButtonInCell.js

@@ -12,5 +12,5 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx } from "react/jsx-runtime";
 import Button from '../../../../Elements/Button/Button';
 export var ButtonInCell = function (props) {
-    return _jsx(Button, __assign({}, props, { appearance: "secondaryLg", sizing: "grid" }));
+    return _jsx(Button, __assign({}, props, { appearance: "primary", variant: "link" }));
 };

package/ui/Blocks/CommonGrid/components/gridCells/EnumInCell.d.ts

@@ -4,6 +4,7 @@ type Props = {
     appearanceMap: Record<string, FlagAppearanceType>;
     enumObj: Record<string, () => string>;
     size?: 'default' | 'small' | 'wide' | 'fitContent';
+    onClick?: () => void;
 };
-export declare const EnumInCell: ({ value, enumObj, appearanceMap, size }: Props) => JSX.Element | null;
+export declare const EnumInCell: ({ value, enumObj, appearanceMap, size, onClick }: Props) => JSX.Element | null;
 export {};

package/ui/Blocks/CommonGrid/components/gridCells/EnumInCell.js

@@ -19,7 +19,7 @@ import styled from '@xstyled/styled-components';
 import HighlightBox from '../../../../Elements/HighlightBox';
 var Center = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  justify-content: flex-start;\n  width: 100%;\n"], ["\n  display: flex;\n  justify-content: flex-start;\n  width: 100%;\n"])));
 export var EnumInCell = function (_a) {
-    var value = _a.value, enumObj = _a.enumObj, appearanceMap = _a.appearanceMap, size = _a.size;
+    var value = _a.value, enumObj = _a.enumObj, appearanceMap = _a.appearanceMap, size = _a.size, onClick = _a.onClick;
     var finalLabel = useMemo(function () {
         return enumObj[value] ? enumObj[value]() : value;
     }, [enumObj, value]);
@@ -28,6 +28,6 @@ export var EnumInCell = function (_a) {
     }, [appearanceMap, value]);
     if (!finalLabel)
         return null;
-    return (_jsx(Center, { children: _jsx(HighlightBox, __assign({}, coloringProp, { size: size, prefix: "grid", children: finalLabel })) }));
+    return (_jsx(Center, { onClick: onClick, children: _jsx(HighlightBox, __assign({}, coloringProp, { size: size, prefix: "grid", children: finalLabel })) }));
 };
 var templateObject_1;

package/ui/Blocks/CommonGrid/index.d.ts

@@ -3,7 +3,6 @@ import withReduxActions from './HoC/withReduxActions';
 import reducer, { actionPrefix, createActions, createSelectors, createFullSelector, actionTypes } from './store';
 import useFloatingButton from './hooks/useFloatingButton';
 import * as Types from './types';
-export * from './StandardButtons';
 export * from './components/gridCells';
 import { useAddFilter } from './hooks/useAddFilter';
 import { useEvent } from './hooks/useEvent';

package/ui/Blocks/CommonGrid/index.js

@@ -3,7 +3,6 @@ import withReduxActions from './HoC/withReduxActions';
 import reducer, { actionPrefix, createActions, createSelectors, createFullSelector, actionTypes } from './store';
 import useFloatingButton from './hooks/useFloatingButton';
 import * as Types from './types';
-export * from './StandardButtons';
 export * from './components/gridCells';
 import { useAddFilter } from './hooks/useAddFilter';
 import { useEvent } from './hooks/useEvent';

package/ui/Blocks/CommonGrid/styles.d.ts

@@ -5,7 +5,7 @@ export declare const BottomWrapper: import("styled-components").StyledComponent<
 export declare const ContentContainer: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "color">) => import("react").ReactElement<any, "div">, import("@xstyled/system").Theme, import("@xstyled/system").SystemProps<import("@xstyled/system").Theme>, "color">;
 export declare const CommonGridWrap: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "color">) => import("react").ReactElement<any, "div">, import("@xstyled/system").Theme, import("@xstyled/system").SystemProps<import("@xstyled/system").Theme>, "color">;
 export declare const StyledButtonStrip: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "color">) => import("react").ReactElement<any, "div">, import("@xstyled/system").Theme, import("@xstyled/system").SystemProps<import("@xstyled/system").Theme>, "color">;
-export declare const StyledColumnButton: import("styled-components").StyledComponent<({ isLoading, loadingText, icon, appearance, disabled, sizing, buttonRef, onClick, fullWidth, ...props }: import("../../Elements/Button/types").Props) => JSX.Element, import("@xstyled/system").Theme, {}, never>;
+export declare const StyledColumnButton: import("styled-components").StyledComponent<({ isLoading, loadingText, icon, iconLeft, iconRight, variant, appearance, disabled, fullWidth, buttonRef, onClick, ...props }: import("../../Elements/Button/types").Props) => JSX.Element, import("@xstyled/system").Theme, {}, never>;
 export declare const CommonGridWithStyles: import("styled-components").StyledComponent<({ filters, handleDragEnd, gridSelectors, gridActions, isLoading, rowsData, hasColouredRows, columnsDefinitions, actionColumnDefinition, allowRowSelect, allowRowSelectOnAction, onRowAction, onRowEditClick, onRowReadClick, onRowClick, columnLayout, displayColumnsDefinitions, className, gridRef, minColumnWidth, errorMessage, floatingButtonProps, }: import("./types").CommonGridProps & {
     filters?: import("./types").FiltersConfig | undefined;
     handleDragEnd: (item: import("react-beautiful-dnd").DropResult) => void;

package/ui/Blocks/CommonGrid/types.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { AppearanceValue, VariantValue } from '../../Elements/Button/types';
 export declare const rowClassSymbol: unique symbol;
 type Option = {
     value: string | number;
@@ -274,7 +275,8 @@ export type ExtraControlButton = {
     onClick?: () => void;
     onSelect?: (value: string) => void;
     label?: string | JSX.Element;
-    style?: 'primary' | 'secondary';
+    appearance?: AppearanceValue;
+    variant?: VariantValue;
     options?: {
         label: string;
         value: string;

package/ui/Blocks/LightBox/LightBox.js

@@ -9,6 +9,6 @@ export var LightBox = function (_a) {
         return null;
     return (_jsx(Modal, { isShown: isLightBoxOpen, onClose: onCloseLightBox, variant: "mobileFullscreen", top: "10px", children: _jsx(Swiper, { initialSlide: initialSlide, slidesPerView: 1, autoHeight: true, children: images.map(function (item) {
                 var _a;
-                return (_jsx(SwiperSlide, { children: _jsxs(Container, { children: [_jsx(Image, { src: (_a = item.originalUrl) !== null && _a !== void 0 ? _a : item.url, loading: "lazy", alt: "" }), (item.date || item.description) && (_jsxs(Description, { children: [item.date, " ", item.description] })), !!item.withLightBoxAction && lightBoxAction && lightBoxActionTitle && (_jsx(ButtonContainer, { children: _jsx(Button, { onClick: lightBoxAction(item.id), appearance: "primaryLight", children: lightBoxActionTitle }) }))] }) }, item.id));
+                return (_jsx(SwiperSlide, { children: _jsxs(Container, { children: [_jsx(Image, { src: (_a = item.originalUrl) !== null && _a !== void 0 ? _a : item.url, loading: "lazy", alt: "" }), (item.date || item.description) && (_jsxs(Description, { children: [item.date, " ", item.description] })), !!item.withLightBoxAction && lightBoxAction && lightBoxActionTitle && (_jsx(ButtonContainer, { children: _jsx(Button, { onClick: lightBoxAction(item.id), appearance: "primary", variant: 'default', children: lightBoxActionTitle }) }))] }) }, item.id));
             }) }) }));
 };

package/ui/Blocks/Modal/Modal.js

@@ -32,5 +32,5 @@ export var Modal = memo(function (_a) {
     if (!isShown) {
         return null;
     }
-    return (_jsx(Portal, { children: _jsx(DialogOverlay, { backgroundColor: overlayColor, children: _jsxs(DialogWindow, { ref: dialogRef, style: dialogStyle, "$backgroundColor": background, top: top, "data-cy": "dialogWindow", onClick: closeEverywhere ? closeDialog : undefined, "$minWidth": minWidth, "$minHeight": minHeight, "$maxWidth": maxWidth, "$maxHeight": maxHeight, variant: variant, children: [title && hasHeader && (_jsx(HeaderContainer, { variant: variant, children: _jsxs(TitleContainer, { children: [titleIcon && (_jsx(x.div, { as: "span", className: "icon", children: typeof titleIcon === 'string' ? _jsx(Icon, { icon: titleIcon, fill: "blue2" }) : titleIcon })), variant == 'default' ? (_jsx(H2, { mt: 0, mb: 0, variant: "bold", children: title })) : (_jsx(H5, { mt: 0, mb: 0, variant: "bold", children: title }))] }) })), withCloseIcon && (_jsx(CloseButton, { onClick: closeDialog, "data-cy": "dialogCloseBtn", children: _jsx(Cancel, { width: "11px", height: "11px" }) })), _jsx(ContentContainer, { variant: variant, children: children }), hasFooter && (onExtraAction || onCancel || onConfirm) && (_jsxs(ButtonsContainer, { hasSpaceBetween: !!onExtraAction, children: [onExtraAction && (_jsx(Button, { type: "button", onClick: onExtraAction, isLoading: isLoading, "data-cy": "extraActionBtn", appearance: "ghostDanger", children: extraActionLabel })), _jsxs(ButtonsWrapper, { hasExtraAction: !!onExtraAction, hasBothButtons: !!onCancel && !!onConfirm, children: [onCancel && (_jsx(Button, { type: "button", onClick: onCancel, isLoading: isLoading, "data-cy": "cancelBtn", appearance: "primaryLight", children: cancelLabel ? cancelLabel : 'Cancel' })), onConfirm && (_jsx(Button, { type: "button", onClick: onDialogConfirmClick, isLoading: isLoading, disabled: isConfirmDisabled, "data-cy": "submitBtn", children: confirmLabel ? confirmLabel : 'Submit' }))] })] }))] }) }) }));
+    return (_jsx(Portal, { children: _jsx(DialogOverlay, { backgroundColor: overlayColor, children: _jsxs(DialogWindow, { ref: dialogRef, style: dialogStyle, "$backgroundColor": background, top: top, "data-cy": "dialogWindow", onClick: closeEverywhere ? closeDialog : undefined, "$minWidth": minWidth, "$minHeight": minHeight, "$maxWidth": maxWidth, "$maxHeight": maxHeight, variant: variant, children: [title && hasHeader && (_jsx(HeaderContainer, { variant: variant, children: _jsxs(TitleContainer, { children: [titleIcon && (_jsx(x.div, { as: "span", className: "icon", children: typeof titleIcon === 'string' ? _jsx(Icon, { icon: titleIcon, fill: "blue2" }) : titleIcon })), variant == 'default' ? (_jsx(H2, { mt: 0, mb: 0, variant: "bold", children: title })) : (_jsx(H5, { mt: 0, mb: 0, variant: "bold", children: title }))] }) })), withCloseIcon && (_jsx(CloseButton, { onClick: closeDialog, "data-cy": "dialogCloseBtn", children: _jsx(Cancel, { width: "11px", height: "11px" }) })), _jsx(ContentContainer, { variant: variant, children: children }), hasFooter && (onExtraAction || onCancel || onConfirm) && (_jsxs(ButtonsContainer, { hasSpaceBetween: !!onExtraAction, children: [onExtraAction && (_jsx(Button, { type: "button", onClick: onExtraAction, isLoading: isLoading, "data-cy": "extraActionBtn", appearance: "secondary", variant: 'ghost', children: extraActionLabel })), _jsxs(ButtonsWrapper, { hasExtraAction: !!onExtraAction, hasBothButtons: !!onCancel && !!onConfirm, children: [onCancel && (_jsx(Button, { type: "button", onClick: onCancel, isLoading: isLoading, "data-cy": "cancelBtn", appearance: "secondary", variant: 'default', children: cancelLabel ? cancelLabel : 'Cancel' })), onConfirm && (_jsx(Button, { type: "button", onClick: onDialogConfirmClick, isLoading: isLoading, disabled: isConfirmDisabled, "data-cy": "submitBtn", appearance: 'primary', variant: 'default', children: confirmLabel ? confirmLabel : 'Submit' }))] })] }))] }) }) }));
 });

package/ui/Elements/Button/Button.d.ts

@@ -1,3 +1,3 @@
 import { Props } from './types';
-declare const Button: ({ isLoading, loadingText, icon, appearance, disabled, sizing, buttonRef, onClick, fullWidth, ...props }: Props) => JSX.Element;
+declare const Button: ({ isLoading, loadingText, icon, iconLeft, iconRight, variant, appearance, disabled, fullWidth, buttonRef, onClick, ...props }: Props) => JSX.Element;
 export default Button;

package/ui/Elements/Button/Button.js

@@ -24,7 +24,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { StyledButton, LoadingIconWrapper, StyledIcon, StyledWrapper } from './styles';
 import { Spinner } from '../Spinner';
 var Button = function (_a) {
-    var isLoading = _a.isLoading, loadingText = _a.loadingText, icon = _a.icon, _b = _a.appearance, appearance = _b === void 0 ? 'primary' : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.sizing, sizing = _d === void 0 ? 'normal' : _d, buttonRef = _a.buttonRef, onClick = _a.onClick, _e = _a.fullWidth, fullWidth = _e === void 0 ? false : _e, props = __rest(_a, ["isLoading", "loadingText", "icon", "appearance", "disabled", "sizing", "buttonRef", "onClick", "fullWidth"]);
-    return (_jsx(StyledButton, __assign({}, props, { onClick: !disabled && !isLoading ? onClick : undefined, "data-appearance": appearance, "data-sizing": sizing, disabled: disabled, ref: buttonRef, fullWidth: fullWidth, children: _jsxs(StyledWrapper, { children: [icon && (typeof icon === 'string' ? _jsx(StyledIcon, { "$addMargin": !!props.children, icon: icon }) : icon), isLoading ? (_jsxs(_Fragment, { children: [_jsx(LoadingIconWrapper, { "$addMargin": !!loadingText || !!props.children, children: _jsx(Spinner, { variant: "sm" }) }), loadingText || loadingText === '' ? loadingText : 'Loading'] })) : (props.children)] }) })));
+    var isLoading = _a.isLoading, loadingText = _a.loadingText, icon = _a.icon, iconLeft = _a.iconLeft, iconRight = _a.iconRight, _b = _a.variant, variant = _b === void 0 ? 'default' : _b, _c = _a.appearance, appearance = _c === void 0 ? 'primary' : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.fullWidth, fullWidth = _e === void 0 ? false : _e, buttonRef = _a.buttonRef, onClick = _a.onClick, props = __rest(_a, ["isLoading", "loadingText", "icon", "iconLeft", "iconRight", "variant", "appearance", "disabled", "fullWidth", "buttonRef", "onClick"]);
+    return (_jsx(StyledButton, __assign({}, props, { onClick: !disabled && !isLoading ? onClick : undefined, "data-variant": variant, "data-appearance": appearance, disabled: disabled, iconPadding: !!icon && !props.children, ref: buttonRef, fullWidth: fullWidth, children: _jsxs(StyledWrapper, { children: [iconLeft && (typeof iconLeft === 'string' ? _jsx(StyledIcon, { "$addMarginRight": !!iconLeft, icon: iconLeft }) : iconLeft), isLoading ? (_jsxs(_Fragment, { children: [_jsx(LoadingIconWrapper, { "$addMarginRight": !!loadingText || !!props.children, children: _jsx(Spinner, { variant: "sm" }) }), loadingText || loadingText === '' ? loadingText : 'Loading'] })) : props.children ? (props.children) : (icon && (typeof icon === 'string' ? _jsx(StyledIcon, { icon: icon }) : icon)), iconRight && (typeof iconRight === 'string' ? _jsx(StyledIcon, { "$addMarginLeft": !!iconRight, icon: iconRight }) : iconRight)] }) })));
 };
 export default Button;

package/ui/Elements/Button/stories/Button.stories.d.ts

@@ -2,19 +2,21 @@
 import type { StoryObj } from '@storybook/react';
 declare const meta: {
     title: string;
-    component: ({ isLoading, loadingText, icon, appearance, disabled, sizing, buttonRef, onClick, fullWidth, ...props }: import("../types").Props) => JSX.Element;
+    component: ({ isLoading, loadingText, icon, iconLeft, iconRight, variant, appearance, disabled, fullWidth, buttonRef, onClick, ...props }: import("../types").Props) => JSX.Element;
     tags: string[];
     argTypes: {};
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
-export declare const Primary: Story;
-export declare const PrimaryLight: Story;
-export declare const Secondary: Story;
+export declare const DefaultPrimary: Story;
+export declare const DefaultSecondary: Story;
+export declare const DefaultTertiary: Story;
 export declare const Success: Story;
-export declare const Large: Story;
-export declare const Small: Story;
-export declare const DisabledPrimary: Story;
-export declare const DisabledSecondary: Story;
-export declare const Loading: Story;
-export declare const WithIcon: Story;
+export declare const OutlinePrimary: Story;
+export declare const OutlineSecondary: Story;
+export declare const GhostPrimary: Story;
+export declare const GhostSecondary: Story;
+export declare const LinkPrimary: Story;
+export declare const LinkSecondary: Story;
+export declare const Icon: Story;
+export declare const Floating: Story;

package/ui/Elements/Button/stories/Button.stories.js

@@ -6,65 +6,99 @@ var meta = {
     argTypes: {},
 };
 export default meta;
-export var Primary = {
+export var DefaultPrimary = {
     args: {
-        children: 'Primary',
+        children: 'Default primary ',
+        variant: 'default',
+        appearance: 'primary',
+        disabled: false,
     },
 };
-export var PrimaryLight = {
+export var DefaultSecondary = {
     args: {
-        children: 'Primary Light',
-        appearance: 'primaryLight',
+        children: 'Default secondary',
+        variant: 'default',
+        appearance: 'secondary',
+        disabled: false,
     },
 };
-export var Secondary = {
+export var DefaultTertiary = {
     args: {
-        children: 'Secondary',
-        appearance: 'secondary',
+        children: 'Default tertiary',
+        variant: 'default',
+        appearance: 'tertiary',
+        disabled: false,
     },
 };
 export var Success = {
     args: {
         children: 'Success',
-        appearance: 'success',
+        variant: 'success',
+        appearance: 'primary',
+        disabled: false,
     },
 };
-export var Large = {
+export var OutlinePrimary = {
     args: {
-        children: 'Large',
-        sizing: 'large',
+        children: 'Outline primary',
+        variant: 'outline',
+        appearance: 'primary',
+        disabled: false,
     },
 };
-export var Small = {
+export var OutlineSecondary = {
     args: {
-        children: 'Small',
-        sizing: 'normal',
+        children: 'Outline secondary',
+        variant: 'outline',
+        appearance: 'secondary',
+        disabled: false,
     },
 };
-export var DisabledPrimary = {
+export var GhostPrimary = {
     args: {
-        children: 'Disabled',
-        disabled: true,
+        children: 'Ghost primary',
+        variant: 'ghost',
+        appearance: 'primary',
+        disabled: false,
     },
 };
-export var DisabledSecondary = {
+export var GhostSecondary = {
     args: {
-        children: 'Disabled',
-        disabled: true,
+        children: 'Ghost secondary',
+        variant: 'ghost',
         appearance: 'secondary',
+        disabled: false,
+    },
+};
+export var LinkPrimary = {
+    args: {
+        children: 'Link primary',
+        variant: 'link',
+        appearance: 'primary',
+        disabled: false,
     },
 };
-export var Loading = {
+export var LinkSecondary = {
     args: {
+        children: 'Link secondary',
+        variant: 'link',
         appearance: 'secondary',
-        loadingText: 'Loading...',
-        isLoading: true,
+        disabled: false,
+    },
+};
+export var Icon = {
+    args: {
+        variant: 'icon',
+        appearance: 'primary',
+        icon: 'coffee',
+        disabled: false,
     },
 };
-export var WithIcon = {
+export var Floating = {
     args: {
-        label: 'Button',
-        children: 'Small',
+        variant: 'floating',
+        appearance: 'primary',
         icon: 'coffee',
+        disabled: false,
     },
 };

package/ui/Elements/Button/styles.d.ts

@@ -1,19 +1,16 @@
 /// <reference types="react" />
 export declare const StyledWrapper: import("styled-components").StyledComponent<"span", import("@xstyled/system").Theme, {}, never>;
 export declare const LoadingIconWrapper: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
-    $addMargin: boolean;
+    $addMarginRight: boolean;
 }, never>;
 export declare const StyledIcon: import("styled-components").StyledComponent<({ icon, fill, style, size, className, secondaryColor, fixedWidth, spinning, }: import("../Icon").IconProps) => JSX.Element, import("@xstyled/system").Theme, {
-    $addMargin: boolean;
+    $addMarginRight?: boolean | undefined;
+    $addMarginLeft?: boolean | undefined;
 }, never>;
 export declare const StyledButton: import("styled-components").StyledComponent<"button", import("@xstyled/system").Theme, {
     disabled: boolean;
-    columnAlign?: boolean | undefined;
     children?: any;
     onClick?: React.MouseEventHandler<HTMLButtonElement> | undefined;
-    fullWidth: boolean;
-    mt?: string | undefined;
-    mr?: string | undefined;
-    mb?: string | undefined;
-    ml?: string | undefined;
+    iconPadding?: boolean | undefined;
+    fullWidth?: boolean | undefined;
 }, never>;

package/ui/Elements/Button/styles.js

@@ -2,47 +2,31 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-import { th } from '@xstyled/styled-components';
-import styled from '@xstyled/styled-components';
+import styled, { th } from '@xstyled/styled-components';
 import { Icon } from '../Icon';
 export var StyledWrapper = styled.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"], ["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"])));
 export var LoadingIconWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  & svg {\n    margin-right: ", ";\n  }\n"], ["\n  & svg {\n    margin-right: ", ";\n  }\n"])), function (_a) {
-    var $addMargin = _a.$addMargin;
-    return ($addMargin ? '0.5em' : '0');
+    var $addMarginRight = _a.$addMarginRight;
+    return ($addMarginRight ? '8px' : '0');
 });
-export var StyledIcon = styled(Icon)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  & svg {\n    height: 1em;\n    margin-right: ", ";\n  }\n"], ["\n  & svg {\n    height: 1em;\n    margin-right: ", ";\n  }\n"])), function (_a) {
-    var $addMargin = _a.$addMargin;
-    return ($addMargin ? '0.5em' : '0');
+export var StyledIcon = styled(Icon)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  & svg {\n    margin-right: ", ";\n    margin-left: ", ";\n  }\n"], ["\n  & svg {\n    margin-right: ", ";\n    margin-left: ", ";\n  }\n"])), function (_a) {
+    var $addMarginRight = _a.$addMarginRight;
+    return ($addMarginRight ? '8px' : '0');
+}, function (_a) {
+    var $addMarginLeft = _a.$addMarginLeft;
+    return ($addMarginLeft ? '8px' : '0');
 });
-export var StyledButton = styled.button(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  width: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n  height: 2.5em;\n  border: slim;\n  text-align: center;\n  text-decoration: none;\n  display: ", ";\n  flex-direction: ", ";\n  align-items: ", ";\n  font-family: ", ";\n  font-weight: semiBold;\n  border-radius: lg;\n  cursor: pointer;\n  transition-duration: 0.1s;\n  align-items: center;\n  justify-content: center;\n  transition: all 300ms ease-out;\n  pointer-events: ", ";\n  opacity: ", ";\n\n  :disabled {\n    color: lightGray5;\n  }\n\n  :focus {\n    outline: none;\n  }\n\n  &[data-appearance='primary'] {\n    background-color: red1;\n    color: white;\n    border-color: red1;\n\n    @media (hover: hover) {\n      &:hover {\n        background-color: white;\n        color: red1;\n        border-color: red1;\n      }\n    }\n\n    :active {\n      background-color: red1;\n      color: red1;\n      border: none;\n    }\n\n    :disabled {\n      background-color: bgLightGray;\n      border-color: lightGray5;\n      color: gray3;\n    }\n  }\n\n  &[data-appearance='primaryLight'] {\n    color: red1;\n    background-color: red20;\n    border-color: red20;\n\n    @media (hover: hover) {\n      &:hover {\n        background-color: red1;\n        color: white;\n        border-color: red1;\n      }\n    }\n\n    :active {\n      background-color: red1;\n      color: white;\n      border-color: red1;\n    }\n\n    :disabled {\n      background-color: bgLightGray;\n      border-color: lightGray5;\n      color: gray3;\n    }\n  }\n\n  &[data-appearance='success'] {\n    background-color: successColor;\n    color: white;\n    border-color: successColor;\n\n    @media (hover: hover) {\n      &:hover {\n        background-color: white;\n        color: successColor;\n      }\n    }\n\n    :active {\n      background-color: white;\n      color: successColor;\n    }\n\n    :disabled {\n      background-color: bgLightGray;\n      border-color: lightGray5;\n      color: gray3;\n    }\n  }\n\n  &[data-appearance='ghost'] {\n    background-color: transparent;\n    color: typoPrimary;\n    border-color: transparent;\n\n    @media (hover: hover) {\n      &:hover {\n        background-color: neutral20;\n      }\n    }\n\n    :disabled {\n      opacity: 60%;\n    }\n  }\n\n  &[data-appearance='ghostDanger'] {\n    background-color: transparent;\n    color: red1;\n    border-color: transparent;\n\n    @media (hover: hover) {\n      &:hover {\n        background-color: neutral20;\n      }\n    }\n\n    :disabled {\n      opacity: 60%;\n    }\n  }\n\n  &[data-appearance='secondary'] {\n    background-color: white;\n    color: red1;\n    border-color: red1;\n\n    @media (hover: hover) {\n      &:hover {\n        background-color: red1;\n        color: white;\n        border-color: red1;\n      }\n    }\n\n    :active {\n      background-color: red1;\n      color: red1;\n      border-color: red1;\n    }\n\n    :disabled {\n      background-color: white;\n      border-color: lightGray7;\n    }\n  }\n\n  &[data-appearance='secondaryLg'] {\n    background-color: white;\n    color: typoPrimary;\n    border-color: blue2;\n\n    @media (hover: hover) {\n      &:hover {\n        background-color: blue2;\n        color: white;\n        border-color: blue2;\n      }\n    }\n\n    :active {\n      background-color: gray;\n      color: white;\n      border: none;\n    }\n\n    :disabled {\n      background-color: white;\n      border-color: bgLightGray1;\n    }\n  }\n\n  &[data-appearance='primaryLg'] {\n    background-color: blue2;\n    color: white;\n    border-color: blue2;\n\n    @media (hover: hover) {\n      &:hover {\n        background-color: white;\n        color: typoPrimary;\n        border-color: blue2;\n      }\n    }\n\n    :active {\n      background-color: gray;\n      color: white;\n      border: none;\n    }\n\n    :disabled {\n      background-color: bgLightGray1;\n      border-color: bgLightGray1;\n    }\n  }\n\n  &[data-appearance='minimal'] {\n    background-color: transparent;\n    border: none !important;\n    color: blue2;\n\n    :disabled {\n      color: blue2;\n    }\n  }\n\n  &[data-appearance='minimalRed'] {\n    background-color: transparent;\n    border: none !important;\n    color: red1;\n\n    @media (hover: hover) {\n      &:hover {\n        color: red3;\n        svg {\n          fill: red3 !important;\n        }\n      }\n    }\n\n    :disabled,\n    :active {\n      color: red3;\n      svg {\n        fill: red3 !important;\n      }\n    }\n  }\n\n  &[data-sizing='icon'] {\n    aspect-ratio: 4 / 3;\n    padding: 0.5em 0.875em;\n  }\n\n  &[data-sizing='iconLg'] {\n    min-width: 42px;\n    min-height: 38px;\n    padding: 0.5em 0.875em;\n    svg {\n      height: 16px;\n    }\n  }\n\n  &[data-sizing='normal'] {\n    min-width: 7rem;\n    padding: 12px 18px;\n    min-height: 38px;\n    line-height: 14px;\n    font-size: 14px;\n  }\n\n  &[data-sizing='large'] {\n    min-width: 12rem;\n    padding: 0.75em 1.5em;\n    min-height: 34px;\n    font-size: 12px;\n  }\n\n  &[data-sizing='grid'] {\n    min-width: 5rem;\n    padding: 0.5em 1.25em;\n    font-size: 10px;\n    border-radius: 5px;\n  }\n"], ["\n  width: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n  height: 2.5em;\n  border: slim;\n  text-align: center;\n  text-decoration: none;\n  display: ", ";\n  flex-direction: ", ";\n  align-items: ", ";\n  font-family: ", ";\n  font-weight: semiBold;\n  border-radius: lg;\n  cursor: pointer;\n  transition-duration: 0.1s;\n  align-items: center;\n  justify-content: center;\n  transition: all 300ms ease-out;\n  pointer-events: ", ";\n  opacity: ", ";\n\n  :disabled {\n    color: lightGray5;\n  }\n\n  :focus {\n    outline: none;\n  }\n\n  &[data-appearance='primary'] {\n    background-color: red1;\n    color: white;\n    border-color: red1;\n\n    @media (hover: hover) {\n      &:hover {\n        background-color: white;\n        color: red1;\n        border-color: red1;\n      }\n    }\n\n    :active {\n      background-color: red1;\n      color: red1;\n      border: none;\n    }\n\n    :disabled {\n      background-color: bgLightGray;\n      border-color: lightGray5;\n      color: gray3;\n    }\n  }\n\n  &[data-appearance='primaryLight'] {\n    color: red1;\n    background-color: red20;\n    border-color: red20;\n\n    @media (hover: hover) {\n      &:hover {\n        background-color: red1;\n        color: white;\n        border-color: red1;\n      }\n    }\n\n    :active {\n      background-color: red1;\n      color: white;\n      border-color: red1;\n    }\n\n    :disabled {\n      background-color: bgLightGray;\n      border-color: lightGray5;\n      color: gray3;\n    }\n  }\n\n  &[data-appearance='success'] {\n    background-color: successColor;\n    color: white;\n    border-color: successColor;\n\n    @media (hover: hover) {\n      &:hover {\n        background-color: white;\n        color: successColor;\n      }\n    }\n\n    :active {\n      background-color: white;\n      color: successColor;\n    }\n\n    :disabled {\n      background-color: bgLightGray;\n      border-color: lightGray5;\n      color: gray3;\n    }\n  }\n\n  &[data-appearance='ghost'] {\n    background-color: transparent;\n    color: typoPrimary;\n    border-color: transparent;\n\n    @media (hover: hover) {\n      &:hover {\n        background-color: neutral20;\n      }\n    }\n\n    :disabled {\n      opacity: 60%;\n    }\n  }\n\n  &[data-appearance='ghostDanger'] {\n    background-color: transparent;\n    color: red1;\n    border-color: transparent;\n\n    @media (hover: hover) {\n      &:hover {\n        background-color: neutral20;\n      }\n    }\n\n    :disabled {\n      opacity: 60%;\n    }\n  }\n\n  &[data-appearance='secondary'] {\n    background-color: white;\n    color: red1;\n    border-color: red1;\n\n    @media (hover: hover) {\n      &:hover {\n        background-color: red1;\n        color: white;\n        border-color: red1;\n      }\n    }\n\n    :active {\n      background-color: red1;\n      color: red1;\n      border-color: red1;\n    }\n\n    :disabled {\n      background-color: white;\n      border-color: lightGray7;\n    }\n  }\n\n  &[data-appearance='secondaryLg'] {\n    background-color: white;\n    color: typoPrimary;\n    border-color: blue2;\n\n    @media (hover: hover) {\n      &:hover {\n        background-color: blue2;\n        color: white;\n        border-color: blue2;\n      }\n    }\n\n    :active {\n      background-color: gray;\n      color: white;\n      border: none;\n    }\n\n    :disabled {\n      background-color: white;\n      border-color: bgLightGray1;\n    }\n  }\n\n  &[data-appearance='primaryLg'] {\n    background-color: blue2;\n    color: white;\n    border-color: blue2;\n\n    @media (hover: hover) {\n      &:hover {\n        background-color: white;\n        color: typoPrimary;\n        border-color: blue2;\n      }\n    }\n\n    :active {\n      background-color: gray;\n      color: white;\n      border: none;\n    }\n\n    :disabled {\n      background-color: bgLightGray1;\n      border-color: bgLightGray1;\n    }\n  }\n\n  &[data-appearance='minimal'] {\n    background-color: transparent;\n    border: none !important;\n    color: blue2;\n\n    :disabled {\n      color: blue2;\n    }\n  }\n\n  &[data-appearance='minimalRed'] {\n    background-color: transparent;\n    border: none !important;\n    color: red1;\n\n    @media (hover: hover) {\n      &:hover {\n        color: red3;\n        svg {\n          fill: red3 !important;\n        }\n      }\n    }\n\n    :disabled,\n    :active {\n      color: red3;\n      svg {\n        fill: red3 !important;\n      }\n    }\n  }\n\n  &[data-sizing='icon'] {\n    aspect-ratio: 4 / 3;\n    padding: 0.5em 0.875em;\n  }\n\n  &[data-sizing='iconLg'] {\n    min-width: 42px;\n    min-height: 38px;\n    padding: 0.5em 0.875em;\n    svg {\n      height: 16px;\n    }\n  }\n\n  &[data-sizing='normal'] {\n    min-width: 7rem;\n    padding: 12px 18px;\n    min-height: 38px;\n    line-height: 14px;\n    font-size: 14px;\n  }\n\n  &[data-sizing='large'] {\n    min-width: 12rem;\n    padding: 0.75em 1.5em;\n    min-height: 34px;\n    font-size: 12px;\n  }\n\n  &[data-sizing='grid'] {\n    min-width: 5rem;\n    padding: 0.5em 1.25em;\n    font-size: 10px;\n    border-radius: 5px;\n  }\n"])), function (_a) {
+export var StyledButton = styled.button(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  width: ", ";\n  font-weight: semiBold;\n  font-size: 14px;\n  font-family: ", ";\n  display: flex;\n  text-align: center;\n  align-items: center;\n  justify-content: center;\n  border-radius: 8px;\n  height: 38px;\n  border: none;\n  cursor: pointer;\n  transition-duration: 0.1s;\n  transition: all 300ms ease-out;\n  gap: 8px;\n  padding: ", ";\n  opacity: ", ";\n  cursor: ", ";\n\n  :focus {\n    outline: none;\n  }\n\n  &[data-variant='default'] {\n    &[data-appearance='primary'] {\n      background-color: red1;\n      color: white;\n      & svg {\n        stroke: white;\n      }\n\n      :not(:disabled) {\n        @media (hover: hover) {\n          :hover {\n            background-color: red80;\n          }\n        }\n      }\n    }\n\n    &[data-appearance='secondary'] {\n      background-color: neutral20;\n      color: typoPrimary;\n      & svg {\n        stroke: typoPrimary;\n      }\n\n      @media (hover: hover) {\n        :hover {\n          background-color: lightGray7;\n        }\n      }\n    }\n\n    &[data-appearance='tertiary'] {\n      background-color: red20;\n      color: red1;\n      & svg {\n        stroke: red1;\n      }\n\n      @media (hover: hover) {\n        :hover {\n          background-color: red30;\n        }\n      }\n    }\n  }\n\n  &[data-variant='success'] {\n    background-color: successColor;\n    color: white;\n    & svg {\n      stroke: white;\n    }\n\n    @media (hover: hover) {\n      :hover {\n        background-color: green70;\n      }\n    }\n  }\n  &[data-variant='outline'] {\n    background-color: white;\n    border: slim;\n    &[data-appearance='primary'] {\n      color: typoPrimary;\n      border-color: typoPrimary;\n      & svg {\n        stroke: typoPrimary;\n      }\n\n      @media (hover: hover) {\n        :hover {\n          background-color: neutral20;\n        }\n      }\n    }\n    &[data-appearance='secondary'] {\n      color: red1;\n      border-color: red1;\n      & svg {\n        stroke: red1;\n      }\n\n      @media (hover: hover) {\n        :hover {\n          background-color: red20;\n        }\n      }\n    }\n  }\n  &[data-variant='ghost'] {\n    background-color: white;\n    &[data-appearance='primary'] {\n      color: typoPrimary;\n      & svg {\n        stroke: typoPrimary;\n      }\n\n      @media (hover: hover) {\n        :hover {\n          background-color: neutral20;\n        }\n      }\n    }\n    &[data-appearance='secondary'] {\n      color: red1;\n      & svg {\n        stroke: red1;\n      }\n\n      @media (hover: hover) {\n        :hover {\n          background-color: red20;\n        }\n      }\n    }\n  }\n\n  &[data-variant='link'] {\n    background-color: transparent;\n    height: 20px;\n    &[data-appearance='primary'] {\n      color: typoPrimary;\n      & svg {\n        stroke: typoPrimary;\n      }\n\n      @media (hover: hover) {\n        :hover {\n          color: neutral500;\n          & svg {\n            stroke: neutral500;\n          }\n        }\n      }\n    }\n    &[data-appearance='secondary'] {\n      color: red1;\n      & svg {\n        stroke: red1;\n      }\n\n      @media (hover: hover) {\n        :hover {\n          color: red70;\n          & svg {\n            stroke: red70;\n          }\n        }\n      }\n    }\n  }\n\n  &[data-variant='icon'] {\n    width: 38px;\n    height: 38px;\n    gap: 10px;\n\n    &[data-appearance='primary'] {\n      background-color: red1;\n      color: white;\n      & svg {\n        stroke: white;\n      }\n      @media (hover: hover) {\n        :hover {\n          background-color: red70;\n        }\n      }\n    }\n\n    &[data-appearance='secondary'] {\n      background-color: neutral20;\n      color: typoPrimary;\n      & svg {\n        stroke: typoPrimary;\n      }\n      @media (hover: hover) {\n        :hover {\n          background-color: lightGray7;\n        }\n      }\n    }\n\n    &[data-appearance='tertiary'] {\n      background-color: red20;\n      color: red1;\n      & svg {\n        stroke: red1;\n      }\n      @media (hover: hover) {\n        :hover {\n          background-color: red30;\n        }\n      }\n    }\n\n    &[data-appearance='ghost'] {\n      background-color: transparent;\n      color: typoPrimary;\n      & svg {\n        stroke: typoPrimary;\n      }\n      @media (hover: hover) {\n        :hover {\n          color: neutral500;\n          & svg {\n            stroke: neutral500;\n          }\n        }\n      }\n    }\n  }\n\n  &[data-variant='floating'] {\n    &[data-appearance='primary'] {\n      width: 56px;\n      height: 56px;\n      background-color: red1;\n      color: white;\n      border-radius: 50%;\n      & svg {\n        stroke: white;\n      }\n      @media (hover: hover) {\n        :hover {\n          background-color: red70;\n        }\n      }\n    }\n  }\n"], ["\n  width: ", ";\n  font-weight: semiBold;\n  font-size: 14px;\n  font-family: ", ";\n  display: flex;\n  text-align: center;\n  align-items: center;\n  justify-content: center;\n  border-radius: 8px;\n  height: 38px;\n  border: none;\n  cursor: pointer;\n  transition-duration: 0.1s;\n  transition: all 300ms ease-out;\n  gap: 8px;\n  padding: ", ";\n  opacity: ", ";\n  cursor: ", ";\n\n  :focus {\n    outline: none;\n  }\n\n  &[data-variant='default'] {\n    &[data-appearance='primary'] {\n      background-color: red1;\n      color: white;\n      & svg {\n        stroke: white;\n      }\n\n      :not(:disabled) {\n        @media (hover: hover) {\n          :hover {\n            background-color: red80;\n          }\n        }\n      }\n    }\n\n    &[data-appearance='secondary'] {\n      background-color: neutral20;\n      color: typoPrimary;\n      & svg {\n        stroke: typoPrimary;\n      }\n\n      @media (hover: hover) {\n        :hover {\n          background-color: lightGray7;\n        }\n      }\n    }\n\n    &[data-appearance='tertiary'] {\n      background-color: red20;\n      color: red1;\n      & svg {\n        stroke: red1;\n      }\n\n      @media (hover: hover) {\n        :hover {\n          background-color: red30;\n        }\n      }\n    }\n  }\n\n  &[data-variant='success'] {\n    background-color: successColor;\n    color: white;\n    & svg {\n      stroke: white;\n    }\n\n    @media (hover: hover) {\n      :hover {\n        background-color: green70;\n      }\n    }\n  }\n  &[data-variant='outline'] {\n    background-color: white;\n    border: slim;\n    &[data-appearance='primary'] {\n      color: typoPrimary;\n      border-color: typoPrimary;\n      & svg {\n        stroke: typoPrimary;\n      }\n\n      @media (hover: hover) {\n        :hover {\n          background-color: neutral20;\n        }\n      }\n    }\n    &[data-appearance='secondary'] {\n      color: red1;\n      border-color: red1;\n      & svg {\n        stroke: red1;\n      }\n\n      @media (hover: hover) {\n        :hover {\n          background-color: red20;\n        }\n      }\n    }\n  }\n  &[data-variant='ghost'] {\n    background-color: white;\n    &[data-appearance='primary'] {\n      color: typoPrimary;\n      & svg {\n        stroke: typoPrimary;\n      }\n\n      @media (hover: hover) {\n        :hover {\n          background-color: neutral20;\n        }\n      }\n    }\n    &[data-appearance='secondary'] {\n      color: red1;\n      & svg {\n        stroke: red1;\n      }\n\n      @media (hover: hover) {\n        :hover {\n          background-color: red20;\n        }\n      }\n    }\n  }\n\n  &[data-variant='link'] {\n    background-color: transparent;\n    height: 20px;\n    &[data-appearance='primary'] {\n      color: typoPrimary;\n      & svg {\n        stroke: typoPrimary;\n      }\n\n      @media (hover: hover) {\n        :hover {\n          color: neutral500;\n          & svg {\n            stroke: neutral500;\n          }\n        }\n      }\n    }\n    &[data-appearance='secondary'] {\n      color: red1;\n      & svg {\n        stroke: red1;\n      }\n\n      @media (hover: hover) {\n        :hover {\n          color: red70;\n          & svg {\n            stroke: red70;\n          }\n        }\n      }\n    }\n  }\n\n  &[data-variant='icon'] {\n    width: 38px;\n    height: 38px;\n    gap: 10px;\n\n    &[data-appearance='primary'] {\n      background-color: red1;\n      color: white;\n      & svg {\n        stroke: white;\n      }\n      @media (hover: hover) {\n        :hover {\n          background-color: red70;\n        }\n      }\n    }\n\n    &[data-appearance='secondary'] {\n      background-color: neutral20;\n      color: typoPrimary;\n      & svg {\n        stroke: typoPrimary;\n      }\n      @media (hover: hover) {\n        :hover {\n          background-color: lightGray7;\n        }\n      }\n    }\n\n    &[data-appearance='tertiary'] {\n      background-color: red20;\n      color: red1;\n      & svg {\n        stroke: red1;\n      }\n      @media (hover: hover) {\n        :hover {\n          background-color: red30;\n        }\n      }\n    }\n\n    &[data-appearance='ghost'] {\n      background-color: transparent;\n      color: typoPrimary;\n      & svg {\n        stroke: typoPrimary;\n      }\n      @media (hover: hover) {\n        :hover {\n          color: neutral500;\n          & svg {\n            stroke: neutral500;\n          }\n        }\n      }\n    }\n  }\n\n  &[data-variant='floating'] {\n    &[data-appearance='primary'] {\n      width: 56px;\n      height: 56px;\n      background-color: red1;\n      color: white;\n      border-radius: 50%;\n      & svg {\n        stroke: white;\n      }\n      @media (hover: hover) {\n        :hover {\n          background-color: red70;\n        }\n      }\n    }\n  }\n"])), function (_a) {
     var fullWidth = _a.fullWidth;
     return (fullWidth ? '100%' : 'initial');
-}, function (_a) {
-    var mt = _a.mt;
-    return mt || 0;
-}, function (_a) {
-    var mr = _a.mr;
-    return mr || 0;
-}, function (_a) {
-    var mb = _a.mb;
-    return mb || 0;
-}, function (_a) {
-    var ml = _a.ml;
-    return ml || 0;
-}, function (_a) {
-    var columnAlign = _a.columnAlign;
-    return (columnAlign ? 'flex' : 'inline-flex');
-}, function (_a) {
-    var columnAlign = _a.columnAlign;
-    return (columnAlign ? 'column' : 'auto');
-}, function (_a) {
-    var columnAlign = _a.columnAlign;
-    return (columnAlign ? 'center' : 'auto');
 }, th('fonts.primary'), function (_a) {
+    var iconPadding = _a.iconPadding;
+    return (iconPadding ? '9px' : '7px 18px');
+}, function (_a) {
     var disabled = _a.disabled;
-    return (disabled ? 'none' : 'auto');
+    return (disabled ? 0.6 : 1);
 }, function (_a) {
     var disabled = _a.disabled;
-    return (disabled ? '0.6' : '1');
+    return (disabled ? 'default' : 'pointer');
 });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/ui/Elements/Button/types.d.ts

@@ -1,22 +1,19 @@
 /// <reference types="react" />
-export type SizingValue = 'icon' | 'iconLg' | 'normal' | 'large' | 'grid';
-export type AppearanceValue = 'primary' | 'primaryLight' | 'secondary' | 'primaryLg' | 'secondaryLg' | 'minimal' | 'minimalRed' | 'success' | 'ghost' | 'ghostDanger';
+export type VariantValue = 'default' | 'success' | 'outline' | 'ghost' | 'link' | 'icon' | 'floating';
+export type AppearanceValue = 'primary' | 'secondary' | 'tertiary' | 'ghost';
 export type Props = React.HTMLProps<HTMLButtonElement> & {
     children?: React.ReactNode;
     disabled?: boolean;
+    fullWidth?: boolean;
+    variant?: VariantValue;
     appearance?: AppearanceValue;
-    buttonRef?: any;
-    sizing?: SizingValue;
     isLoading?: boolean;
     name?: string;
     as?: string | React.ComponentType;
     loadingText?: string | JSX.Element;
-    columnAlign?: boolean;
     icon?: string | JSX.Element;
+    iconLeft?: string | JSX.Element;
+    iconRight?: string | JSX.Element;
+    buttonRef?: any;
     type?: 'button' | 'submit' | 'reset';
-    fullWidth?: boolean;
-    mt?: string;
-    mr?: string;
-    mb?: string;
-    ml?: string;
 };

package/ui/Elements/DropdownSelect/DropdownSelect.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { AppearanceValue } from '../Button/index';
+import { VariantValue, AppearanceValue } from '../Button/types';
 type Item = {
     label: string | JSX.Element;
     value: string;
@@ -8,6 +8,7 @@ type Item = {
 type DropdownSelectProps = {
     label: string | JSX.Element;
     appearance?: AppearanceValue;
+    variant?: VariantValue;
     options: Item[];
     showChevron?: boolean;
     onSelect?: (value: Item['value']) => void;
@@ -16,6 +17,6 @@ type DropdownSelectProps = {
     ButtonComponent?: React.FC;
 };
 export declare const CustomSelectButton: import("styled-components").StyledComponent<"button", import("@xstyled/system").Theme, {}, never>;
-declare const DropdownSelect: ({ label, appearance, options, showChevron, onSelect, disabled, icon, ButtonComponent, }: DropdownSelectProps) => JSX.Element;
+declare const DropdownSelect: ({ label, appearance, variant, options, showChevron, onSelect, disabled, icon, ButtonComponent, }: DropdownSelectProps) => JSX.Element;
 export default DropdownSelect;
 export type { Item as DropdownSelectItem };