@mailstep/design-system 0.12.0-beta.1 → 0.12.0-beta.2

package/package.json

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

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

@@ -42,7 +42,7 @@ const RowActionsCell = ({ actionColumnDefinition, rowData, addRowNumbers, rowInd
 	}, [onClick]);
 	return /* @__PURE__ */ jsxs(x.div, {
 		display: "flex",
-		gap: "12px",
+		gap: addRowNumbers ? "12px" : "18px",
 		pl: "4px",
 		pr: "4px",
 		children: [

package/ui/Blocks/CommonGrid/utils/index.js

@@ -38,7 +38,8 @@ const calculatePaginator = (page, rowsPerPage) => ({
 const ROW_NUMBER_DIGIT_WIDTH = 8;
 const CHECKBOX_WIDTH = 18;
 const ICON_BUTTON_WIDTH = 20;
-const ACTIONS_CELL_GAP = 12;
+const ACTIONS_CELL_GAP_WITH_ROW_NUMBERS = 12;
+const ACTIONS_CELL_GAP = 18;
 const ACTIONS_CELL_PADDING = 16;
 const getRowNumbersExtraWidth = (maxRowNumber = 0) => {
 	return String(maxRowNumber).length * ROW_NUMBER_DIGIT_WIDTH;
@@ -50,7 +51,8 @@ const getActionsColumnExtraWidth = ({ addRowNumbers, withCheckboxes, canRowEdit,
 	if (addRowNumbers) parts.push(getRowNumbersExtraWidth(maxRowNumber));
 	if (hasActionIcon) parts.push(ICON_BUTTON_WIDTH);
 	if (!parts.length) return 0;
-	const gaps = (parts.length - 1) * ACTIONS_CELL_GAP;
+	const gap = addRowNumbers ? ACTIONS_CELL_GAP_WITH_ROW_NUMBERS : ACTIONS_CELL_GAP;
+	const gaps = (parts.length - 1) * gap;
 	parts.push(ACTIONS_CELL_PADDING);
 	return sum(parts) + gaps;
 };

package/ui/Elements/Select/components/ChevronOption.js

@@ -12,7 +12,7 @@ const ChevronOption = (props) => {
 		...props,
 		children: [(showCheckbox || showToggle) && /* @__PURE__ */ jsxs(SelectedIndicator, { children: [showCheckbox && /* @__PURE__ */ jsx(Checkbox_default, {
 			checked: isSelected,
-			size: 2,
+			size: "14px",
 			readOnly: true
 		}), showToggle && /* @__PURE__ */ jsx(Toggle, {
 			name: "",

package/ui/Elements/Select/components/SelectAll.js

@@ -66,7 +66,7 @@ const SelectAll = ({ onCustomSelectAll, onCustomDeselectAll, value, options, max
 		children: [
 			(showCheckbox || showToggle) && /* @__PURE__ */ jsxs(SelectedIndicator, { children: [showCheckbox && /* @__PURE__ */ jsx(Checkbox_default, {
 				checked: isSelected,
-				size: 2,
+				size: "14px",
 				readOnly: true
 			}), showToggle && /* @__PURE__ */ jsx(Toggle, {
 				name: "",

package/ui/Forms/Checkbox/Checkbox.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import { type CheckboxProps } from './types';
-declare const _default: React.NamedExoticComponent<CheckboxProps>;
+declare const _default: import("react").NamedExoticComponent<CheckboxProps>;
 export default _default;

package/ui/Forms/Checkbox/Checkbox.js

@@ -1,14 +1,11 @@
 import { CheckIcon, CheckboxWrap, FakeInput, Label } from "./styles.js";
 import { memo, useId } from "react";
-import { th, useTheme } from "@xstyled/styled-components";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region packages/ui/Forms/Checkbox/Checkbox.tsx
-const Checkbox = ({ name, label, onChange, checked, defaultChecked, size = 4, className, disabled, inputRef, readOnly, minusIcon = false }) => {
-	const theme = useTheme();
-	const themeSize = th.fontSize(size)({ theme });
+const Checkbox = ({ name, label, onChange, checked, defaultChecked, size = "18px", className, disabled, inputRef, readOnly, minusIcon = false }) => {
 	const id = useId();
 	return /* @__PURE__ */ jsxs(CheckboxWrap, {
-		size: themeSize,
+		size,
 		className,
 		children: [
 			/* @__PURE__ */ jsx("input", {
@@ -26,10 +23,10 @@ const Checkbox = ({ name, label, onChange, checked, defaultChecked, size = 4, cl
 				id
 			}),
 			/* @__PURE__ */ jsx(FakeInput, {
-				size: themeSize,
+				size,
 				children: /* @__PURE__ */ jsx(CheckIcon, {
 					icon: minusIcon ? "minus" : "check",
-					size: themeSize
+					size
 				})
 			}),
 			label && /* @__PURE__ */ jsx(Label, {

package/ui/Forms/Checkbox/types.d.ts

@@ -8,7 +8,7 @@ export type CheckboxProps = {
     disabled?: boolean;
     color?: string;
     unsetColor?: string;
-    size?: number;
+    size?: string;
     className?: string;
     inputRef?: RefObject<HTMLInputElement>;
     readOnly?: boolean;