@mailstep/design-system 0.6.75 → 0.6.76

package/package.json

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

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

@@ -9,7 +9,7 @@ export declare const ItemLabel: import("styled-components").StyledComponent<"div
     $isCompact?: boolean | undefined;
     isSubitem?: boolean | undefined;
 }, never>;
-export declare const ItemDropdownArrow: import("styled-components").StyledComponent<({ icon, fill, style, size, className, secondaryColor, fixedWidth, spinning, }: import("../..").IconProps) => JSX.Element, import("@xstyled/system").Theme, {
+export declare const ItemDropdownArrow: import("styled-components").StyledComponent<({ icon, fill, style, size, className, secondaryColor, fixedWidth, spinning }: import("../..").IconProps) => JSX.Element, import("@xstyled/system").Theme, {
     $lightMode?: boolean | undefined;
 }, never>;
 export declare const TooltipItemLabel: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;

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

@@ -3,7 +3,7 @@ export declare const StyledWrapper: import("styled-components").StyledComponent<
 export declare const LoadingIconWrapper: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
     $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, {
+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, {
     $addMarginRight?: boolean | undefined;
     $addMarginLeft?: boolean | undefined;
 }, never>;

package/ui/Elements/Icon/Icon.d.ts

@@ -4,5 +4,5 @@ import { IconProps } from './types';
 export declare const iconDictionary: {
     [name: string]: IconDefinition | [IconDefinition, FlipProp];
 };
-declare const Icon: ({ icon, fill, style, size, className, secondaryColor, fixedWidth, spinning, }: IconProps) => JSX.Element;
+declare const Icon: ({ icon, fill, style, size, className, secondaryColor, fixedWidth, spinning }: IconProps) => JSX.Element;
 export default Icon;

package/ui/Elements/Icon/Icon.js

@@ -4,109 +4,114 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
-import styled, { useTheme } from '@xstyled/styled-components';
-import { th } from '@xstyled/styled-components';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { library } from '@fortawesome/fontawesome-svg-core';
+import { faFacebookF } from '@fortawesome/free-brands-svg-icons/faFacebookF';
+import { faInstagram } from '@fortawesome/free-brands-svg-icons/faInstagram';
+import { faLinkedinIn } from '@fortawesome/free-brands-svg-icons/faLinkedinIn';
+import { faTwitter } from '@fortawesome/free-brands-svg-icons/faTwitter';
+import { faYoutube } from '@fortawesome/free-brands-svg-icons/faYoutube';
+import { faTriangleExclamation as fadTriangleExclamation } from '@fortawesome/pro-duotone-svg-icons/faTriangleExclamation';
 import { faCoffee as falCoffee } from '@fortawesome/pro-light-svg-icons/faCoffee';
+import { faHandHoldingBox } from '@fortawesome/pro-light-svg-icons/faHandHoldingBox';
 import { faPaperclip } from '@fortawesome/pro-light-svg-icons/faPaperclip';
 import { faStopwatch } from '@fortawesome/pro-light-svg-icons/faStopwatch';
-import { faHandHoldingBox } from '@fortawesome/pro-light-svg-icons/faHandHoldingBox';
 import { faArrowRightToBracket } from '@fortawesome/pro-regular-svg-icons/faArrowRightToBracket';
 import { faBell } from '@fortawesome/pro-regular-svg-icons/faBell';
+import { faBox as faBoxRegular } from '@fortawesome/pro-regular-svg-icons/faBox';
+import { faCalendar } from '@fortawesome/pro-regular-svg-icons/faCalendar';
+import { faCalendarPlus } from '@fortawesome/pro-regular-svg-icons/faCalendarPlus';
+import { faChevronDown } from '@fortawesome/pro-regular-svg-icons/faChevronDown';
+import { faChevronRight as farChevronRight } from '@fortawesome/pro-regular-svg-icons/faChevronRight';
+import { faChevronUp } from '@fortawesome/pro-regular-svg-icons/faChevronUp';
+import { faCircleArrowDown } from '@fortawesome/pro-regular-svg-icons/faCircleArrowDown';
+import { faCircleArrowRight } from '@fortawesome/pro-regular-svg-icons/faCircleArrowRight';
+import { faCircleQuestion } from '@fortawesome/pro-regular-svg-icons/faCircleQuestion';
+import { faClock } from '@fortawesome/pro-regular-svg-icons/faClock';
 import { faCoffee as farCoffee } from '@fortawesome/pro-regular-svg-icons/faCoffee';
 import { faCommentDots } from '@fortawesome/pro-regular-svg-icons/faCommentDots';
+import { faComments } from '@fortawesome/pro-regular-svg-icons/faComments';
 import { faCopy } from '@fortawesome/pro-regular-svg-icons/faCopy';
-import { faClock } from '@fortawesome/pro-regular-svg-icons/faClock';
-import { faChevronUp } from '@fortawesome/pro-regular-svg-icons/faChevronUp';
-import { faChevronDown } from '@fortawesome/pro-regular-svg-icons/faChevronDown';
-import { faChevronRight as farChevronRight } from '@fortawesome/pro-regular-svg-icons/faChevronRight';
 import { faEllipsisVertical } from '@fortawesome/pro-regular-svg-icons/faEllipsisVertical';
 import { faEnvelope as faEnvelopeLight } from '@fortawesome/pro-regular-svg-icons/faEnvelope';
 import { faEyeSlash } from '@fortawesome/pro-regular-svg-icons/faEyeSlash';
+import { faFaceMeh } from '@fortawesome/pro-regular-svg-icons/faFaceMeh';
 import { faFile } from '@fortawesome/pro-regular-svg-icons/faFile';
 import { faFileAlt } from '@fortawesome/pro-regular-svg-icons/faFileAlt';
+import { faFileLines } from '@fortawesome/pro-regular-svg-icons/faFileLines';
+import { faFileSearch } from '@fortawesome/pro-regular-svg-icons/faFileSearch';
+import { faFilter } from '@fortawesome/pro-regular-svg-icons/faFilter';
 import { faGear } from '@fortawesome/pro-regular-svg-icons/faGear';
-import { faShareSquare } from '@fortawesome/pro-regular-svg-icons/faShareSquare';
-import { faTriangleExclamation as farTriangleExclamation } from '@fortawesome/pro-regular-svg-icons/faTriangleExclamation';
-import { faCircleArrowDown } from '@fortawesome/pro-regular-svg-icons/faCircleArrowDown';
-import { faCircleArrowRight } from '@fortawesome/pro-regular-svg-icons/faCircleArrowRight';
-import { faPenToSquare } from '@fortawesome/pro-regular-svg-icons/faPenToSquare';
-import { faLock } from '@fortawesome/pro-regular-svg-icons/faLock';
-import { faCalendar } from '@fortawesome/pro-regular-svg-icons/faCalendar';
-import { faCalendarPlus } from '@fortawesome/pro-regular-svg-icons/faCalendarPlus';
-import { faSquareMinus } from '@fortawesome/pro-regular-svg-icons/faSquareMinus';
-import { faComments } from '@fortawesome/pro-regular-svg-icons/faComments';
-import { faFaceMeh } from '@fortawesome/pro-regular-svg-icons/faFaceMeh';
 import { faHand } from '@fortawesome/pro-regular-svg-icons/faHand';
 import { faLink } from '@fortawesome/pro-regular-svg-icons/faLink';
-import { faFileSearch } from '@fortawesome/pro-regular-svg-icons/faFileSearch';
-import { faFileLines } from '@fortawesome/pro-regular-svg-icons/faFileLines';
+import { faLock } from '@fortawesome/pro-regular-svg-icons/faLock';
+import { faPenToSquare } from '@fortawesome/pro-regular-svg-icons/faPenToSquare';
+import { faShareSquare } from '@fortawesome/pro-regular-svg-icons/faShareSquare';
+import { faSquareMinus } from '@fortawesome/pro-regular-svg-icons/faSquareMinus';
 import { faTrashCan } from '@fortawesome/pro-regular-svg-icons/faTrashCan';
-import { faCircleQuestion } from '@fortawesome/pro-regular-svg-icons/faCircleQuestion';
-import { faFilter } from '@fortawesome/pro-regular-svg-icons/faFilter';
-import { faAnglesRight } from '@fortawesome/pro-solid-svg-icons/faAnglesRight';
-import { faAngleRight } from '@fortawesome/pro-solid-svg-icons/faAngleRight';
+import { faTriangleExclamation as farTriangleExclamation } from '@fortawesome/pro-regular-svg-icons/faTriangleExclamation';
 import { faAngleLeft } from '@fortawesome/pro-solid-svg-icons/faAngleLeft';
+import { faAngleRight } from '@fortawesome/pro-solid-svg-icons/faAngleRight';
+import { faAnglesRight } from '@fortawesome/pro-solid-svg-icons/faAnglesRight';
+import { faArrowDownToBracket } from '@fortawesome/pro-solid-svg-icons/faArrowDownToBracket';
 import { faArrowLeft } from '@fortawesome/pro-solid-svg-icons/faArrowLeft';
+import { faArrowsRotate } from '@fortawesome/pro-solid-svg-icons/faArrowsRotate';
+import { faBadgeCheck } from '@fortawesome/pro-solid-svg-icons/faBadgeCheck';
 import { faBan } from '@fortawesome/pro-solid-svg-icons/faBan';
+import { faBox } from '@fortawesome/pro-solid-svg-icons/faBox';
+import { faBoxArchive } from '@fortawesome/pro-solid-svg-icons/faBoxArchive';
+import { faBoxCircleCheck } from '@fortawesome/pro-solid-svg-icons/faBoxCircleCheck';
 import { faBoxOpen } from '@fortawesome/pro-solid-svg-icons/faBoxOpen';
+import { faBoxesStacked } from '@fortawesome/pro-solid-svg-icons/faBoxesStacked';
+import { faUpDownLeftRight } from '@fortawesome/pro-solid-svg-icons/faUpDownLeftRight';
+import { faCamera } from '@fortawesome/pro-solid-svg-icons/faCamera';
 import { faCartArrowDown } from '@fortawesome/pro-solid-svg-icons/faCartArrowDown';
+import { faChartLine } from '@fortawesome/pro-solid-svg-icons/faChartLine';
+import { faCheck } from '@fortawesome/pro-solid-svg-icons/faCheck';
+import { faChevronDown as fasChevronDown } from '@fortawesome/pro-solid-svg-icons/faChevronDown';
+import { faChevronLeft } from '@fortawesome/pro-solid-svg-icons/faChevronLeft';
+import { faChevronRight as fasChevronRight } from '@fortawesome/pro-solid-svg-icons/faChevronRight';
+import { faChevronUp as fasChevronUp } from '@fortawesome/pro-solid-svg-icons/faChevronUp';
+import { faCircleCheck } from '@fortawesome/pro-solid-svg-icons/faCircleCheck';
+import { faCircleInfo } from '@fortawesome/pro-solid-svg-icons/faCircleInfo';
+import { faCircleXmark } from '@fortawesome/pro-solid-svg-icons/faCircleXmark';
 import { faCoffee as fasCoffee } from '@fortawesome/pro-solid-svg-icons/faCoffee';
-import { faFlag } from '@fortawesome/pro-solid-svg-icons/faFlag';
-import { faExchange } from '@fortawesome/pro-solid-svg-icons/faExchange';
+import { faComputerMouseScrollwheel } from '@fortawesome/pro-solid-svg-icons/faComputerMouseScrollwheel';
+import { faCrop } from '@fortawesome/pro-solid-svg-icons/faCrop';
+import { faCube } from '@fortawesome/pro-solid-svg-icons/faCube';
 import { faEquals } from '@fortawesome/pro-solid-svg-icons/faEquals';
+import { faExchange } from '@fortawesome/pro-solid-svg-icons/faExchange';
+import { faFlag } from '@fortawesome/pro-solid-svg-icons/faFlag';
+import { faGlobe } from '@fortawesome/pro-solid-svg-icons/faGlobe';
 import { faGreaterThanEqual } from '@fortawesome/pro-solid-svg-icons/faGreaterThanEqual';
 import { faHome } from '@fortawesome/pro-solid-svg-icons/faHome';
 import { faHouseUser } from '@fortawesome/pro-solid-svg-icons/faHouseUser';
 import { faLaptopCode } from '@fortawesome/pro-solid-svg-icons/faLaptopCode';
-import { faLuggageCart } from '@fortawesome/pro-solid-svg-icons/faLuggageCart';
 import { faLessThanEqual } from '@fortawesome/pro-solid-svg-icons/faLessThanEqual';
+import { faLocationCrosshairs } from '@fortawesome/pro-solid-svg-icons/faLocationCrosshairs';
+import { faLuggageCart } from '@fortawesome/pro-solid-svg-icons/faLuggageCart';
+import { faMinus } from '@fortawesome/pro-solid-svg-icons/faMinus';
 import { faNotEqual } from '@fortawesome/pro-solid-svg-icons/faNotEqual';
+import { faNoteSticky } from '@fortawesome/pro-solid-svg-icons/faNoteSticky';
 import { faPen } from '@fortawesome/pro-solid-svg-icons/faPen';
 import { faPeopleCarry as fasPeopleCarry } from '@fortawesome/pro-solid-svg-icons/faPeopleCarry';
+import { faPlus } from '@fortawesome/pro-solid-svg-icons/faPlus';
 import { faSearch } from '@fortawesome/pro-solid-svg-icons/faSearch';
+import { faShelves } from '@fortawesome/pro-solid-svg-icons/faShelves';
 import { faShippingFast } from '@fortawesome/pro-solid-svg-icons/faShippingFast';
+import { faSquareCheck } from '@fortawesome/pro-solid-svg-icons/faSquareCheck';
 import { faStore } from '@fortawesome/pro-solid-svg-icons/faStore';
 import { faTags } from '@fortawesome/pro-solid-svg-icons/faTags';
+import { faTriangleExclamation } from '@fortawesome/pro-solid-svg-icons/faTriangleExclamation';
 import { faTruck } from '@fortawesome/pro-solid-svg-icons/faTruck';
+import { faTruckRampBox } from '@fortawesome/pro-solid-svg-icons/faTruckRampBox';
 import { faUser } from '@fortawesome/pro-solid-svg-icons/faUser';
 import { faUsersGear } from '@fortawesome/pro-solid-svg-icons/faUsersGear';
 import { faWatch } from '@fortawesome/pro-solid-svg-icons/faWatch';
-import { faChartLine } from '@fortawesome/pro-solid-svg-icons/faChartLine';
-import { faCheck } from '@fortawesome/pro-solid-svg-icons/faCheck';
-import { faSquareCheck } from '@fortawesome/pro-solid-svg-icons/faSquareCheck';
-import { faXmark as fasXmark } from '@fortawesome/pro-solid-svg-icons/faXmark';
-import { faChevronLeft } from '@fortawesome/pro-solid-svg-icons/faChevronLeft';
-import { faNoteSticky } from '@fortawesome/pro-solid-svg-icons/faNoteSticky';
-import { faArrowDownToBracket } from '@fortawesome/pro-solid-svg-icons/faArrowDownToBracket';
-import { faPlus } from '@fortawesome/pro-solid-svg-icons/faPlus';
-import { faMinus } from '@fortawesome/pro-solid-svg-icons/faMinus';
-import { faChevronRight as fasChevronRight } from '@fortawesome/pro-solid-svg-icons/faChevronRight';
-import { faChevronDown as fasChevronDown } from '@fortawesome/pro-solid-svg-icons/faChevronDown';
-import { faChevronUp as fasChevronUp } from '@fortawesome/pro-solid-svg-icons/faChevronUp';
-import { faCircleInfo } from '@fortawesome/pro-solid-svg-icons/faCircleInfo';
-import { faCube } from '@fortawesome/pro-solid-svg-icons/faCube';
-import { faBoxArchive } from '@fortawesome/pro-solid-svg-icons/faBoxArchive';
-import { faLocationCrosshairs } from '@fortawesome/pro-solid-svg-icons/faLocationCrosshairs';
-import { faTruckRampBox } from '@fortawesome/pro-solid-svg-icons/faTruckRampBox';
-import { faGlobe } from '@fortawesome/pro-solid-svg-icons/faGlobe';
-import { faCircleCheck } from '@fortawesome/pro-solid-svg-icons/faCircleCheck';
-import { faCircleXmark } from '@fortawesome/pro-solid-svg-icons/faCircleXmark';
-import { faTriangleExclamation } from '@fortawesome/pro-solid-svg-icons/faTriangleExclamation';
-import { faBadgeCheck } from '@fortawesome/pro-solid-svg-icons/faBadgeCheck';
 import { faWebhook } from '@fortawesome/pro-solid-svg-icons/faWebhook';
-import { faTriangleExclamation as fadTriangleExclamation } from '@fortawesome/pro-duotone-svg-icons/faTriangleExclamation';
-import { faFacebookF } from '@fortawesome/free-brands-svg-icons/faFacebookF';
-import { faTwitter } from '@fortawesome/free-brands-svg-icons/faTwitter';
-import { faYoutube } from '@fortawesome/free-brands-svg-icons/faYoutube';
-import { faLinkedinIn } from '@fortawesome/free-brands-svg-icons/faLinkedinIn';
-import { faInstagram } from '@fortawesome/free-brands-svg-icons/faInstagram';
-import { faBox } from '@fortawesome/pro-solid-svg-icons/faBox';
-import { faBox as faBoxRegular } from '@fortawesome/pro-regular-svg-icons/faBox';
-import { faBoxCircleCheck } from '@fortawesome/pro-solid-svg-icons/faBoxCircleCheck';
-import { faShelves } from '@fortawesome/pro-solid-svg-icons/faShelves';
-import { faBoxesStacked } from '@fortawesome/pro-solid-svg-icons/faBoxesStacked';
+import { faXmark as fasXmark } from '@fortawesome/pro-solid-svg-icons/faXmark';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import styled, { useTheme } from '@xstyled/styled-components';
+import { th } from '@xstyled/styled-components';
 export var iconDictionary = {
     greaterThan: faAngleRight,
     startsWith: faAnglesRight,
@@ -116,6 +121,8 @@ export var iconDictionary = {
     edit: faPenToSquare,
     avatar: faUser,
     arrowLeft: faArrowLeft,
+    arrowsRotate: faArrowsRotate,
+    upDownLeftRight: faUpDownLeftRight,
     attachment: faPaperclip,
     dashboard: faChartLine,
     chevronUp: faChevronUp,
@@ -123,6 +130,7 @@ export var iconDictionary = {
     chevronRight: farChevronRight,
     clock: faClock,
     complaint: faFileAlt,
+    computerMouseScrollwheel: faComputerMouseScrollwheel,
     mailLight: faEnvelopeLight,
     eshop: faStore,
     expedition: faShippingFast,
@@ -163,6 +171,8 @@ export var iconDictionary = {
     import: faCircleArrowDown,
     export: faCircleArrowRight,
     check: faCheck,
+    camera: faCamera,
+    crop: faCrop,
     squareCheck: faSquareCheck,
     squareMinus: faSquareMinus,
     goLeft: faChevronLeft,
@@ -216,7 +226,7 @@ library.add(farCoffee, fasCoffee, falCoffee, faHandHoldingBox, faLuggageCart, fa
 var iconPrefixMap = {
     normal: 'far',
     light: 'fal',
-    solid: 'fas',
+    solid: 'fas'
 };
 var FaIconSizing = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n  --fa-secondary-color: ", ";\n  --fa-secondary-opacity: 1;\n  display: ", ";\n"], ["\n  ", "\n  --fa-secondary-color: ", ";\n  --fa-secondary-opacity: 1;\n  display: ", ";\n"])), function (_a) {
     var size = _a.size;

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

@@ -2,7 +2,7 @@
 import type { StoryObj } from '@storybook/react';
 declare const meta: {
     title: string;
-    component: ({ icon, fill, style, size, className, secondaryColor, fixedWidth, spinning, }: import("../types").IconProps) => JSX.Element;
+    component: ({ icon, fill, style, size, className, secondaryColor, fixedWidth, spinning }: import("../types").IconProps) => JSX.Element;
     tags: string[];
     argTypes: {};
 };

package/ui/Elements/Pagination/styled.d.ts

@@ -3,10 +3,10 @@ export declare const Wrapper: import("styled-components").StyledComponent<(props
 export declare const Btn: import("styled-components").StyledComponent<"button", import("@xstyled/system").Theme, {
     disabled: boolean;
 }, never>;
-export declare const ArrowIcon: import("styled-components").StyledComponent<({ icon, fill, style, size, className, secondaryColor, fixedWidth, spinning, }: import("../Icon").IconProps) => JSX.Element, import("@xstyled/system").Theme, {
+export declare const ArrowIcon: import("styled-components").StyledComponent<({ icon, fill, style, size, className, secondaryColor, fixedWidth, spinning }: import("../Icon").IconProps) => JSX.Element, import("@xstyled/system").Theme, {
     isActive: boolean;
 }, never>;
-export declare const GoIcon: import("styled-components").StyledComponent<({ icon, fill, style, size, className, secondaryColor, fixedWidth, spinning, }: import("../Icon").IconProps) => JSX.Element, import("@xstyled/system").Theme, {
+export declare const GoIcon: import("styled-components").StyledComponent<({ icon, fill, style, size, className, secondaryColor, fixedWidth, spinning }: import("../Icon").IconProps) => JSX.Element, import("@xstyled/system").Theme, {
     isActive: boolean;
 }, never>;
 export declare const DotsWrapper: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;

package/ui/Elements/Toggle/Toggle.js

@@ -25,16 +25,26 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import styled, { css } from '@xstyled/styled-components';
 import { FieldLabel } from '../Label';
 import { SpaceAroundWrap } from '../SpaceAround';
-var StyledSpaceAroundWrap = styled(SpaceAroundWrap)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
-    var $labelPosition = _a.$labelPosition;
-    return ($labelPosition === 'left' ? 'display: flex; align-items: center; margin-top: 1rem' : '');
+import styled, { css } from '@xstyled/styled-components';
+var isHorizontal = function (position) { return position && ['left', 'right'].includes(position); };
+var StyledSpaceAroundWrap = styled(SpaceAroundWrap)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: ", ";\n  justify-content: ", ";\n  ", "\n"], ["\n  display: flex;\n  flex-direction: ", ";\n  justify-content: ", ";\n  ", "\n"])), function (_a) {
+    var labelPosition = _a.labelPosition;
+    return labelPosition === 'left' ? 'row' : labelPosition === 'right' ? 'row-reverse' : 'column';
+}, function (_a) {
+    var labelPosition = _a.labelPosition;
+    return (labelPosition === 'right' ? 'flex-end' : 'flex-start');
+}, function (_a) {
+    var labelPosition = _a.labelPosition;
+    return (isHorizontal(labelPosition) ? 'margin-top: 1rem' : '');
 });
-var StyledFieldLabel = styled(FieldLabel)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
+var StyledFieldLabel = styled(FieldLabel)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  cursor: pointer;\n  ", "\n  ", "\n"], ["\n  cursor: pointer;\n  ", "\n  ", "\n"])), function (_a) {
+    var labelPosition = _a.labelPosition;
+    return (isHorizontal(labelPosition) ? 'margin-bottom: 0;' : '');
+}, function (_a) {
     var labelPosition = _a.labelPosition;
-    return (labelPosition === 'left' ? 'margin-bottom: 0; margin-right: 1rem;' : '');
+    return labelPosition === 'left' ? 'margin-right: 1rem;' : labelPosition === 'right' ? 'margin-left: 1rem;' : '';
 });
 var disabledStyles = css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  opacity: 0.4;\n"], ["\n  opacity: 0.4;\n"])));
 var StyledToggle = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  aspect-ratio: 1 / 1;\n  width: 100%;\n  height: 100%;\n  border-radius: 7px;\n  background-color: lightGray5;\n  border: 3px solid;\n  border-color: lightGray5;\n  position: relative;\n  transition: all 100ms ease-out;\n\n  ", "\n\n  input:checked + & {\n    background-color: red1;\n    border-color: red1;\n\n    & > span {\n      transform: translate(75%, -50%);\n      background-color: white;\n    }\n  }\n"], ["\n  aspect-ratio: 1 / 1;\n  width: 100%;\n  height: 100%;\n  border-radius: 7px;\n  background-color: lightGray5;\n  border: 3px solid;\n  border-color: lightGray5;\n  position: relative;\n  transition: all 100ms ease-out;\n\n  ", "\n\n  input:checked + & {\n    background-color: red1;\n    border-color: red1;\n\n    & > span {\n      transform: translate(75%, -50%);\n      background-color: white;\n    }\n  }\n"])), function (props) { return (props.disabled ? disabledStyles : ''); });
@@ -46,7 +56,7 @@ var HiddenInput = styled.input(templateObject_6 || (templateObject_6 = __makeTem
 var Wrapper = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  position: relative;\n  border-radius: 8px;\n  overflow: hidden;\n  flex-shrink: 0;\n  &[data-appearance='primary'] {\n    width: 24px;\n    height: 14px;\n    ", " {\n      height: 10px;\n    }\n  }\n  &[data-appearance='grid'] {\n    width: 28px;\n    height: 16px;\n    ", " {\n      height: 12px;\n    }\n  }\n"], ["\n  position: relative;\n  border-radius: 8px;\n  overflow: hidden;\n  flex-shrink: 0;\n  &[data-appearance='primary'] {\n    width: 24px;\n    height: 14px;\n    ", " {\n      height: 10px;\n    }\n  }\n  &[data-appearance='grid'] {\n    width: 28px;\n    height: 16px;\n    ", " {\n      height: 12px;\n    }\n  }\n"])), StyledDot, StyledDot);
 var Toggle = function (_a) {
     var onChange = _a.onChange, label = _a.label, name = _a.name, checked = _a.checked, defaultChecked = _a.defaultChecked, _b = _a.spaceAround, spaceAround = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.labelPosition, labelPosition = _d === void 0 ? 'default' : _d, _e = _a.variant, variant = _e === void 0 ? 'primary' : _e, _f = _a.spaceBetween, spaceBetween = _f === void 0 ? false : _f, readOnly = _a.readOnly, rest = __rest(_a, ["onChange", "label", "name", "checked", "defaultChecked", "spaceAround", "disabled", "labelPosition", "variant", "spaceBetween", "readOnly"]);
-    return (_jsxs(StyledSpaceAroundWrap, { spaceBetween: spaceBetween, spaceAround: spaceAround, "$labelPosition": labelPosition, children: [label && (_jsx(StyledFieldLabel, { htmlFor: name, labelPosition: labelPosition, children: label })), _jsxs(Wrapper, { "data-appearance": variant, children: [_jsx(HiddenInput, { name: name, type: "checkbox", checked: checked, "$enabled": !disabled, defaultChecked: defaultChecked, onChange: !disabled ? onChange : undefined, disabled: disabled, "data-cy": "".concat(name, "Switch"), readOnly: readOnly }), _jsx(StyledToggle, __assign({ active: !!checked, disabled: disabled }, rest, { children: _jsx(StyledDot, {}) }))] })] }));
+    return (_jsxs(StyledSpaceAroundWrap, { spaceBetween: spaceBetween, spaceAround: spaceAround, labelPosition: labelPosition, children: [label && (_jsx(StyledFieldLabel, { htmlFor: name, labelPosition: labelPosition, children: label })), _jsxs(Wrapper, { "data-appearance": variant, children: [_jsx(HiddenInput, { id: name, name: name, type: "checkbox", checked: checked, "$enabled": !disabled, defaultChecked: defaultChecked, onChange: !disabled ? onChange : undefined, disabled: disabled, "data-cy": "".concat(name, "Switch"), readOnly: readOnly }), _jsx(StyledToggle, __assign({ active: !!checked, disabled: disabled }, rest, { children: _jsx(StyledDot, {}) }))] })] }));
 };
 export default Toggle;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

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

@@ -11,4 +11,6 @@ type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
 export declare const Checked: Story;
 export declare const Disabled: Story;
+export declare const LabelRight: Story;
+export declare const LabelLeft: Story;
 export declare const VariantGrid: Story;

package/ui/Elements/Toggle/stories/Toggle.stories.js

@@ -8,24 +8,46 @@ var meta = {
 export default meta;
 export var Default = {
     args: {
+        name: 'name',
         label: 'Label',
+        onChange: console.log
     },
 };
 export var Checked = {
     args: {
+        name: 'name',
         label: 'Label',
         checked: true,
+        onChange: console.log
     },
 };
 export var Disabled = {
     args: {
+        name: 'name',
         label: 'Label',
         checked: true,
         disabled: true,
     },
 };
+export var LabelRight = {
+    args: {
+        name: 'name',
+        label: 'Label',
+        checked: true,
+        labelPosition: 'right'
+    },
+};
+export var LabelLeft = {
+    args: {
+        name: 'name',
+        label: 'Label',
+        checked: true,
+        labelPosition: 'left'
+    },
+};
 export var VariantGrid = {
     args: {
+        name: 'name',
         label: 'Label',
         checked: true,
         variant: 'grid',

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

@@ -6,6 +6,8 @@ type SpaceAroundProps = {
     marginLeft?: number;
 };
 type SpaceAround = boolean | SpaceAroundProps;
+export type LabelPosition = 'default' | 'left' | 'right';
+export type Variant = 'primary' | 'grid';
 export type Props = {
     onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
     label?: string;
@@ -15,8 +17,8 @@ export type Props = {
     spaceAround?: SpaceAround;
     spaceBetween?: boolean;
     disabled?: boolean;
-    labelPosition?: 'default' | 'left';
-    variant?: 'primary' | 'grid';
+    labelPosition?: LabelPosition;
+    variant?: Variant;
     readOnly?: boolean;
 };
 export {};

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

@@ -2,7 +2,7 @@
 export declare const FakeInput: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
     size: string | number;
 }, never>;
-export declare const CheckIcon: import("styled-components").StyledComponent<({ icon, fill, style, size, className, secondaryColor, fixedWidth, spinning, }: import("../../Elements/Icon").IconProps) => JSX.Element, import("@xstyled/system").Theme, {
+export declare const CheckIcon: import("styled-components").StyledComponent<({ icon, fill, style, size, className, secondaryColor, fixedWidth, spinning }: import("../../Elements/Icon").IconProps) => JSX.Element, import("@xstyled/system").Theme, {
     size: string | number;
 }, never>;
 export declare const CheckboxWrap: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {