@proprioo/salatim 20.6.0 → 21.0.0

package/lib/ui/index.d.ts

@@ -11,12 +11,12 @@ export { default as AgentCard } from './src/agentCard/AgentCard';
 export { default as Autocomplete } from './src/autocomplete/Autocomplete';
 export { default as Block, BlockProps } from './src/block/Block';
 export { default as Burger, BurgerProps } from './src/burger/Burger';
-export { default as Button } from './src/button/Button';
+export { default as Button, ButtonProps } from './src/button/Button';
 export { default as ButtonRadioGroup, ButtonRadioGroupProps } from './src/buttonRadioGroup/ButtonRadioGroup';
 export { default as BlockCheckIcon } from './src/blockCheckIcon/BlockCheckIcon';
 export { default as BlockIcon } from './src/blockIcon/BlockIcon';
 export { default as Card, CardProps } from './src/card/Card';
-export { ButtonAppearance, ButtonColors, ButtonProps, ButtonSizes, IconPosition } from './src/button/Button.interfaces';
+export { ButtonAppearance, ButtonTheme, ButtonSizes, IconPosition } from './src/button/Button.interfaces';
 export { default as Checkbox } from './src/checkbox/Checkbox';
 export { default as DateInput, isValidDate } from './src/dateInput/DateInput';
 export { default as EmailInput } from './src/emailInput/EmailInput';

package/lib/ui/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Subtitle = exports.Option = exports.Toggle = exports.titles = exports.H6 = exports.H5 = exports.H4 = exports.H3 = exports.H2 = exports.H1 = exports.Radio = exports.NumberInput = exports.Loader = exports.InputLoading = exports.InputColors = exports.Input = exports.InputType = exports.Logo = exports.PanelOrientation = exports.PanelColorsTypes = exports.Panel = exports.useModal = exports.GmapsGeocode = exports.GmapsAutocomplete = exports.Fieldset = exports.EmailInput = exports.isValidDate = exports.DateInput = exports.Checkbox = exports.IconPosition = exports.ButtonSizes = exports.ButtonColors = exports.ButtonAppearance = exports.Card = exports.BlockIcon = exports.BlockCheckIcon = exports.ButtonRadioGroup = exports.Button = exports.Burger = exports.Block = exports.Autocomplete = exports.AgentCard = exports.AgentBanner = exports.AccordionPanel = exports.AccordionHeader = exports.AccordionItem = exports.Accordion = exports.AccordionItemColors = exports.geocodeByAddress = exports.PlacesAutocomplete = void 0;
+exports.Subtitle = exports.Option = exports.Toggle = exports.titles = exports.H6 = exports.H5 = exports.H4 = exports.H3 = exports.H2 = exports.H1 = exports.Radio = exports.NumberInput = exports.Loader = exports.InputLoading = exports.InputColors = exports.Input = exports.InputType = exports.Logo = exports.PanelOrientation = exports.PanelColorsTypes = exports.Panel = exports.useModal = exports.GmapsGeocode = exports.GmapsAutocomplete = exports.Fieldset = exports.EmailInput = exports.isValidDate = exports.DateInput = exports.Checkbox = exports.IconPosition = exports.ButtonSizes = exports.ButtonTheme = exports.ButtonAppearance = exports.Card = exports.BlockIcon = exports.BlockCheckIcon = exports.ButtonRadioGroup = exports.Button = exports.Burger = exports.Block = exports.Autocomplete = exports.AgentCard = exports.AgentBanner = exports.AccordionPanel = exports.AccordionHeader = exports.AccordionItem = exports.Accordion = exports.AccordionItemColors = exports.geocodeByAddress = exports.PlacesAutocomplete = void 0;
 exports.ShowMoreTextToggle = exports.Select = exports.Tooltip = exports.TextToggle = exports.Textarea = exports.TagBase = exports.Tag = exports.TagColorsTypes = exports.TagAppearance = void 0;
 var react_places_autocomplete_1 = require("react-places-autocomplete");
 Object.defineProperty(exports, "PlacesAutocomplete", { enumerable: true, get: function () { return __importDefault(react_places_autocomplete_1).default; } });
@@ -40,7 +40,7 @@ var Card_1 = require("./src/card/Card");
 Object.defineProperty(exports, "Card", { enumerable: true, get: function () { return __importDefault(Card_1).default; } });
 var Button_interfaces_1 = require("./src/button/Button.interfaces");
 Object.defineProperty(exports, "ButtonAppearance", { enumerable: true, get: function () { return Button_interfaces_1.ButtonAppearance; } });
-Object.defineProperty(exports, "ButtonColors", { enumerable: true, get: function () { return Button_interfaces_1.ButtonColors; } });
+Object.defineProperty(exports, "ButtonTheme", { enumerable: true, get: function () { return Button_interfaces_1.ButtonTheme; } });
 Object.defineProperty(exports, "ButtonSizes", { enumerable: true, get: function () { return Button_interfaces_1.ButtonSizes; } });
 Object.defineProperty(exports, "IconPosition", { enumerable: true, get: function () { return Button_interfaces_1.IconPosition; } });
 var Checkbox_1 = require("./src/checkbox/Checkbox");

package/lib/ui/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../packages/ui/index.ts"],"names":[],"mappings":";;;;;;;AACA,uEAImC;AAHjC,gJAAA,OAAO,OAAsB;AAE7B,6HAAA,gBAAgB,OAAA;AAGlB,6EAK8C;AAF5C,2HAAA,mBAAmB,OAAA;AAGrB,uDAAiE;AAAxD,uHAAA,OAAO,OAAa;AAC7B,+DAAyE;AAAhE,+HAAA,OAAO,OAAiB;AACjC,mEAA6E;AAApE,mIAAA,OAAO,OAAmB;AACnC,iEAA2E;AAAlE,iIAAA,OAAO,OAAkB;AAClC,6DAAuE;AAA9D,2HAAA,OAAO,OAAe;AAC/B,uDAAiE;AAAxD,uHAAA,OAAO,OAAa;AAC7B,gEAA0E;AAAjE,6HAAA,OAAO,OAAgB;AAChC,2CAAiE;AAAxD,+GAAA,OAAO,OAAS;AACzB,8CAAqE;AAA5D,iHAAA,OAAO,OAAU;AAC1B,8CAAwD;AAA/C,iHAAA,OAAO,OAAU;AAC1B,4EAGiD;AAF/C,qIAAA,OAAO,OAAoB;AAG7B,sEAAgF;AAAvE,iIAAA,OAAO,OAAkB;AAClC,uDAAiE;AAAxD,uHAAA,OAAO,OAAa;AAC7B,wCAA6D;AAApD,6GAAA,OAAO,OAAQ;AACxB,oEAMwC;AALtC,qHAAA,gBAAgB,OAAA;AAChB,iHAAA,YAAY,OAAA;AAEZ,gHAAA,WAAW,OAAA;AACX,iHAAA,YAAY,OAAA;AAEd,oDAA8D;AAArD,qHAAA,OAAO,OAAY;AAC5B,uDAA8E;AAArE,uHAAA,OAAO,OAAa;AAAE,wGAAA,WAAW,OAAA;AAC1C,0DAAoE;AAA3D,yHAAA,OAAO,OAAc;AAK9B,oDAA6E;AAApE,qHAAA,OAAO,OAAY;AAC5B,+EAGmD;AAFjD,uIAAA,OAAO,OAAqB;AAG9B,gEAGyC;AAFvC,6HAAA,OAAO,OAAgB;AAGzB,2CAI2B;AAHzB,kHAAA,OAAO,OAAY;AAIrB,2CAAqD;AAA5C,+GAAA,OAAO,OAAS;AACzB,iEAIsC;AAFpC,oHAAA,gBAAgB,OAAA;AAChB,oHAAA,gBAAgB,OAAA;AAGlB,wCAAkD;AAAzC,6GAAA,OAAO,OAAQ;AACxB,2CAA8C;AAArC,kGAAA,SAAS,OAAA;AAClB,uDAImC;AAHjC,mHAAA,OAAO,OAAS;AAIlB,+DAA4D;AAAnD,4GAAA,WAAW,OAAA;AACpB,gEAA0E;AAAjE,6HAAA,OAAO,OAAgB;AAChC,8CAAqE;AAA5D,iHAAA,OAAO,OAAU;AAC1B,6DAAuE;AAA9D,2HAAA,OAAO,OAAe;AAC/B,2CAAqD;AAA5C,+GAAA,OAAO,OAAS;AACzB,qCAA+C;AAAtC,yGAAA,OAAO,OAAM;AACtB,qCAA+C;AAAtC,yGAAA,OAAO,OAAM;AACtB,qCAA+C;AAAtC,yGAAA,OAAO,OAAM;AACtB,qCAA+C;AAAtC,yGAAA,OAAO,OAAM;AACtB,qCAA+C;AAAtC,yGAAA,OAAO,OAAM;AACtB,qCAA+C;AAAtC,yGAAA,OAAO,OAAM;AACtB,2CAA2C;AAAlC,+FAAA,MAAM,OAAA;AACf,8CAAqE;AAA5D,iHAAA,OAAO,OAAU;AAC1B,8CAAqE;AAA5D,iHAAA,OAAO,OAAU;AAC1B,oDAA6E;AAApE,qHAAA,OAAO,OAAY;AAC5B,mDAA+E;AAAtE,2GAAA,aAAa,OAAA;AAAE,4GAAA,cAAc,OAAA;AACtC,qCAA+C;AAAtC,2GAAA,OAAO,OAAO;AACvB,mDAA+C;AAAtC,qGAAA,OAAO,OAAA;AAChB,oDAA8D;AAArD,qHAAA,OAAO,OAAY;AAC5B,0DAAoE;AAA3D,yHAAA,OAAO,OAAc;AAC9B,iDAA2D;AAAlD,mHAAA,OAAO,OAAW;AAC3B,mEAG2C;AAFzC,wHAAA,OAAO,OAAU;AAGnB,kFAA4F;AAAnF,yIAAA,OAAO,OAAsB"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../packages/ui/index.ts"],"names":[],"mappings":";;;;;;;AACA,uEAImC;AAHjC,gJAAA,OAAO,OAAsB;AAE7B,6HAAA,gBAAgB,OAAA;AAGlB,6EAK8C;AAF5C,2HAAA,mBAAmB,OAAA;AAGrB,uDAAiE;AAAxD,uHAAA,OAAO,OAAa;AAC7B,+DAAyE;AAAhE,+HAAA,OAAO,OAAiB;AACjC,mEAA6E;AAApE,mIAAA,OAAO,OAAmB;AACnC,iEAA2E;AAAlE,iIAAA,OAAO,OAAkB;AAClC,6DAAuE;AAA9D,2HAAA,OAAO,OAAe;AAC/B,uDAAiE;AAAxD,uHAAA,OAAO,OAAa;AAC7B,gEAA0E;AAAjE,6HAAA,OAAO,OAAgB;AAChC,2CAAiE;AAAxD,+GAAA,OAAO,OAAS;AACzB,8CAAqE;AAA5D,iHAAA,OAAO,OAAU;AAC1B,8CAAqE;AAA5D,iHAAA,OAAO,OAAU;AAC1B,4EAGiD;AAF/C,qIAAA,OAAO,OAAoB;AAG7B,sEAAgF;AAAvE,iIAAA,OAAO,OAAkB;AAClC,uDAAiE;AAAxD,uHAAA,OAAO,OAAa;AAC7B,wCAA6D;AAApD,6GAAA,OAAO,OAAQ;AACxB,oEAKwC;AAJtC,qHAAA,gBAAgB,OAAA;AAChB,gHAAA,WAAW,OAAA;AACX,gHAAA,WAAW,OAAA;AACX,iHAAA,YAAY,OAAA;AAEd,oDAA8D;AAArD,qHAAA,OAAO,OAAY;AAC5B,uDAA8E;AAArE,uHAAA,OAAO,OAAa;AAAE,wGAAA,WAAW,OAAA;AAC1C,0DAAoE;AAA3D,yHAAA,OAAO,OAAc;AAK9B,oDAA6E;AAApE,qHAAA,OAAO,OAAY;AAC5B,+EAGmD;AAFjD,uIAAA,OAAO,OAAqB;AAG9B,gEAGyC;AAFvC,6HAAA,OAAO,OAAgB;AAGzB,2CAI2B;AAHzB,kHAAA,OAAO,OAAY;AAIrB,2CAAqD;AAA5C,+GAAA,OAAO,OAAS;AACzB,iEAIsC;AAFpC,oHAAA,gBAAgB,OAAA;AAChB,oHAAA,gBAAgB,OAAA;AAGlB,wCAAkD;AAAzC,6GAAA,OAAO,OAAQ;AACxB,2CAA8C;AAArC,kGAAA,SAAS,OAAA;AAClB,uDAImC;AAHjC,mHAAA,OAAO,OAAS;AAIlB,+DAA4D;AAAnD,4GAAA,WAAW,OAAA;AACpB,gEAA0E;AAAjE,6HAAA,OAAO,OAAgB;AAChC,8CAAqE;AAA5D,iHAAA,OAAO,OAAU;AAC1B,6DAAuE;AAA9D,2HAAA,OAAO,OAAe;AAC/B,2CAAqD;AAA5C,+GAAA,OAAO,OAAS;AACzB,qCAA+C;AAAtC,yGAAA,OAAO,OAAM;AACtB,qCAA+C;AAAtC,yGAAA,OAAO,OAAM;AACtB,qCAA+C;AAAtC,yGAAA,OAAO,OAAM;AACtB,qCAA+C;AAAtC,yGAAA,OAAO,OAAM;AACtB,qCAA+C;AAAtC,yGAAA,OAAO,OAAM;AACtB,qCAA+C;AAAtC,yGAAA,OAAO,OAAM;AACtB,2CAA2C;AAAlC,+FAAA,MAAM,OAAA;AACf,8CAAqE;AAA5D,iHAAA,OAAO,OAAU;AAC1B,8CAAqE;AAA5D,iHAAA,OAAO,OAAU;AAC1B,oDAA6E;AAApE,qHAAA,OAAO,OAAY;AAC5B,mDAA+E;AAAtE,2GAAA,aAAa,OAAA;AAAE,4GAAA,cAAc,OAAA;AACtC,qCAA+C;AAAtC,2GAAA,OAAO,OAAO;AACvB,mDAA+C;AAAtC,qGAAA,OAAO,OAAA;AAChB,oDAA8D;AAArD,qHAAA,OAAO,OAAY;AAC5B,0DAAoE;AAA3D,yHAAA,OAAO,OAAc;AAC9B,iDAA2D;AAAlD,mHAAA,OAAO,OAAW;AAC3B,mEAG2C;AAFzC,wHAAA,OAAO,OAAU;AAGnB,kFAA4F;AAAnF,yIAAA,OAAO,OAAsB"}

package/lib/ui/src/button/Button.d.ts

@@ -1,4 +1,17 @@
-import { FC } from 'react';
-import { ButtonProps } from './Button.interfaces';
+import { FC, MouseEvent, ReactElement } from 'react';
+import { ButtonAppearance, ButtonSizes, ButtonTheme, IconPosition } from './Button.interfaces';
+export interface ButtonProps {
+    label: string;
+    appearance?: ButtonAppearance;
+    disabled?: boolean;
+    icon?: ReactElement<Element>;
+    iconPosition?: IconPosition;
+    id?: string;
+    rounded?: boolean;
+    size?: ButtonSizes;
+    theme?: ButtonTheme;
+    type?: 'submit' | 'reset' | 'button';
+    onClick?(event: MouseEvent<HTMLElement>): void;
+}
 declare const Button: FC<ButtonProps>;
 export default Button;

package/lib/ui/src/button/Button.interfaces.d.ts

@@ -1,17 +1,10 @@
-import { MouseEvent, ReactElement } from 'react';
-export declare enum ButtonSizes {
-    BIG = "big",
-    LARGE = "large",
-    SMALL = "small",
-    FULL = "full"
-}
 export declare enum ButtonAppearance {
-    PRIMARY = "primary",
-    SECONDARY = "secondary",
+    BASIC = "basic",
     NO_APPEARANCE = "noAppearance",
-    BASIC = "basic"
+    PRIMARY = "primary",
+    SECONDARY = "secondary"
 }
-export declare enum ButtonColors {
+export declare enum ButtonTheme {
     BLACK = "black",
     BLUE = "blue",
     GREEN = "green",
@@ -20,20 +13,13 @@ export declare enum ButtonColors {
     RED = "red",
     WHITE = "white"
 }
+export declare enum ButtonSizes {
+    BIG = "big",
+    FULL = "full",
+    LARGE = "large",
+    SMALL = "small"
+}
 export declare enum IconPosition {
     LEFT = "left",
     RIGHT = "right"
 }
-export interface ButtonProps {
-    label: string;
-    appearance?: ButtonAppearance;
-    type?: 'submit' | 'reset' | 'button';
-    size?: ButtonSizes;
-    disabled?: boolean;
-    rounded?: boolean;
-    icon?: ReactElement<Element>;
-    iconPosition?: IconPosition;
-    theme?: ButtonColors;
-    id?: string;
-    onClick?(event: MouseEvent<HTMLElement>): void;
-}

package/lib/ui/src/button/Button.interfaces.js

@@ -1,30 +1,30 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.IconPosition = exports.ButtonColors = exports.ButtonAppearance = exports.ButtonSizes = void 0;
+exports.IconPosition = exports.ButtonSizes = exports.ButtonTheme = exports.ButtonAppearance = void 0;
+var ButtonAppearance;
+(function (ButtonAppearance) {
+    ButtonAppearance["BASIC"] = "basic";
+    ButtonAppearance["NO_APPEARANCE"] = "noAppearance";
+    ButtonAppearance["PRIMARY"] = "primary";
+    ButtonAppearance["SECONDARY"] = "secondary";
+})(ButtonAppearance = exports.ButtonAppearance || (exports.ButtonAppearance = {}));
+var ButtonTheme;
+(function (ButtonTheme) {
+    ButtonTheme["BLACK"] = "black";
+    ButtonTheme["BLUE"] = "blue";
+    ButtonTheme["GREEN"] = "green";
+    ButtonTheme["PINK"] = "pink";
+    ButtonTheme["ORANGE"] = "orange";
+    ButtonTheme["RED"] = "red";
+    ButtonTheme["WHITE"] = "white";
+})(ButtonTheme = exports.ButtonTheme || (exports.ButtonTheme = {}));
 var ButtonSizes;
 (function (ButtonSizes) {
     ButtonSizes["BIG"] = "big";
+    ButtonSizes["FULL"] = "full";
     ButtonSizes["LARGE"] = "large";
     ButtonSizes["SMALL"] = "small";
-    ButtonSizes["FULL"] = "full";
 })(ButtonSizes = exports.ButtonSizes || (exports.ButtonSizes = {}));
-var ButtonAppearance;
-(function (ButtonAppearance) {
-    ButtonAppearance["PRIMARY"] = "primary";
-    ButtonAppearance["SECONDARY"] = "secondary";
-    ButtonAppearance["NO_APPEARANCE"] = "noAppearance";
-    ButtonAppearance["BASIC"] = "basic";
-})(ButtonAppearance = exports.ButtonAppearance || (exports.ButtonAppearance = {}));
-var ButtonColors;
-(function (ButtonColors) {
-    ButtonColors["BLACK"] = "black";
-    ButtonColors["BLUE"] = "blue";
-    ButtonColors["GREEN"] = "green";
-    ButtonColors["PINK"] = "pink";
-    ButtonColors["ORANGE"] = "orange";
-    ButtonColors["RED"] = "red";
-    ButtonColors["WHITE"] = "white";
-})(ButtonColors = exports.ButtonColors || (exports.ButtonColors = {}));
 var IconPosition;
 (function (IconPosition) {
     IconPosition["LEFT"] = "left";

package/lib/ui/src/button/Button.interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.interfaces.js","sourceRoot":"","sources":["../../../../packages/ui/src/button/Button.interfaces.ts"],"names":[],"mappings":";;;AAEA,IAAY,WAKX;AALD,WAAY,WAAW;IACrB,0BAAW,CAAA;IACX,8BAAe,CAAA;IACf,8BAAe,CAAA;IACf,4BAAa,CAAA;AACf,CAAC,EALW,WAAW,GAAX,mBAAW,KAAX,mBAAW,QAKtB;AAED,IAAY,gBAKX;AALD,WAAY,gBAAgB;IAC1B,uCAAmB,CAAA;IACnB,2CAAuB,CAAA;IACvB,kDAA8B,CAAA;IAC9B,mCAAe,CAAA;AACjB,CAAC,EALW,gBAAgB,GAAhB,wBAAgB,KAAhB,wBAAgB,QAK3B;AAED,IAAY,YAQX;AARD,WAAY,YAAY;IACtB,+BAAe,CAAA;IACf,6BAAa,CAAA;IACb,+BAAe,CAAA;IACf,6BAAa,CAAA;IACb,iCAAiB,CAAA;IACjB,2BAAW,CAAA;IACX,+BAAe,CAAA;AACjB,CAAC,EARW,YAAY,GAAZ,oBAAY,KAAZ,oBAAY,QAQvB;AAED,IAAY,YAGX;AAHD,WAAY,YAAY;IACtB,6BAAa,CAAA;IACb,+BAAe,CAAA;AACjB,CAAC,EAHW,YAAY,GAAZ,oBAAY,KAAZ,oBAAY,QAGvB"}
+{"version":3,"file":"Button.interfaces.js","sourceRoot":"","sources":["../../../../packages/ui/src/button/Button.interfaces.ts"],"names":[],"mappings":";;;AAAA,IAAY,gBAKX;AALD,WAAY,gBAAgB;IAC1B,mCAAe,CAAA;IACf,kDAA8B,CAAA;IAC9B,uCAAmB,CAAA;IACnB,2CAAuB,CAAA;AACzB,CAAC,EALW,gBAAgB,GAAhB,wBAAgB,KAAhB,wBAAgB,QAK3B;AAED,IAAY,WAQX;AARD,WAAY,WAAW;IACrB,8BAAe,CAAA;IACf,4BAAa,CAAA;IACb,8BAAe,CAAA;IACf,4BAAa,CAAA;IACb,gCAAiB,CAAA;IACjB,0BAAW,CAAA;IACX,8BAAe,CAAA;AACjB,CAAC,EARW,WAAW,GAAX,mBAAW,KAAX,mBAAW,QAQtB;AAED,IAAY,WAKX;AALD,WAAY,WAAW;IACrB,0BAAW,CAAA;IACX,4BAAa,CAAA;IACb,8BAAe,CAAA;IACf,8BAAe,CAAA;AACjB,CAAC,EALW,WAAW,GAAX,mBAAW,KAAX,mBAAW,QAKtB;AAED,IAAY,YAGX;AAHD,WAAY,YAAY;IACtB,6BAAa,CAAA;IACb,+BAAe,CAAA;AACjB,CAAC,EAHW,YAAY,GAAZ,oBAAY,KAAZ,oBAAY,QAGvB"}

package/lib/ui/src/button/Button.js

@@ -18,17 +18,10 @@ const react_1 = __importDefault(require("react"));
 const Button_interfaces_1 = require("./Button.interfaces");
 const Button_styles_1 = require("./Button.styles");
 const Button = (_a) => {
-    var { label, rounded, icon, iconPosition, size, appearance, theme } = _a, rest = __rest(_a, ["label", "rounded", "icon", "iconPosition", "size", "appearance", "theme"]);
-    return (react_1.default.createElement(Button_styles_1.Layout, Object.assign({}, Object.assign(Object.assign({}, rest), { iconPosition, rounded, size, appearance, theme, icon }), { "aria-label": label }),
-        icon && (react_1.default.createElement(Button_styles_1.IconWrapper, { "data-test": iconPosition === Button_interfaces_1.IconPosition.LEFT ? 'icon-left' : 'icon-right', iconPosition: iconPosition, appearance: appearance, theme: theme, size: size }, icon)),
+    var { appearance = Button_interfaces_1.ButtonAppearance.PRIMARY, icon, iconPosition = Button_interfaces_1.IconPosition.RIGHT, label, rounded = false, size = Button_interfaces_1.ButtonSizes.LARGE, theme = Button_interfaces_1.ButtonTheme.ORANGE } = _a, rest = __rest(_a, ["appearance", "icon", "iconPosition", "label", "rounded", "size", "theme"]);
+    return (react_1.default.createElement(Button_styles_1.Layout, Object.assign({}, Object.assign({ appearance, icon, iconPosition, rounded, size, theme }, rest), { "aria-label": label }),
+        icon && (react_1.default.createElement(Button_styles_1.IconWrapper, Object.assign({}, { appearance, iconPosition, size, theme }, { "data-test": iconPosition === Button_interfaces_1.IconPosition.LEFT ? 'icon-left' : 'icon-right' }), icon)),
         !rounded && react_1.default.createElement(Button_styles_1.LabelLayout, { "data-test": "label" }, label)));
 };
-Button.defaultProps = {
-    size: Button_interfaces_1.ButtonSizes.LARGE,
-    appearance: Button_interfaces_1.ButtonAppearance.PRIMARY,
-    theme: Button_interfaces_1.ButtonColors.ORANGE,
-    rounded: false,
-    iconPosition: Button_interfaces_1.IconPosition.RIGHT
-};
 exports.default = Button;
 //# sourceMappingURL=Button.js.map

package/lib/ui/src/button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../packages/ui/src/button/Button.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,kDAAkC;AAElC,2DAM6B;AAC7B,mDAAmE;AAEnE,MAAM,MAAM,GAAoB,CAAC,EASnB,EAAE,EAAE;QATe,EAC/B,KAAK,EACL,OAAO,EACP,IAAI,EACJ,YAAY,EACZ,IAAI,EACJ,UAAU,EACV,KAAK,OAEO,EADT,IAAI,cARwB,2EAShC,CADQ;IACU,OAAA,CACjB,8BAAC,sBAAM,oDACI,IAAI,KAAE,YAAY,EAAE,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,IAAI,qBACvD,KAAK;QAEhB,IAAI,IAAI,CACP,8BAAC,2BAAW,iBAER,YAAY,KAAK,gCAAY,CAAC,IAAI,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,YAAY,EAEjE,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,IAET,IAAI,CACO,CACf;QACA,CAAC,OAAO,IAAI,8BAAC,2BAAW,iBAAW,OAAO,IAAE,KAAK,CAAe,CAC1D,CACV,CAAA;CAAA,CAAC;AAEF,MAAM,CAAC,YAAY,GAAG;IACpB,IAAI,EAAE,+BAAW,CAAC,KAAK;IACvB,UAAU,EAAE,oCAAgB,CAAC,OAAO;IACpC,KAAK,EAAE,gCAAY,CAAC,MAAM;IAC1B,OAAO,EAAE,KAAK;IACd,YAAY,EAAE,gCAAY,CAAC,KAAK;CACjC,CAAC;AAEF,kBAAe,MAAM,CAAC"}
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../packages/ui/src/button/Button.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,kDAA4D;AAE5D,2DAK6B;AAC7B,mDAAmE;AAgBnE,MAAM,MAAM,GAAoB,CAAC,EASnB,EAAE,EAAE;QATe,EAC/B,UAAU,GAAG,oCAAgB,CAAC,OAAO,EACrC,IAAI,EACJ,YAAY,GAAG,gCAAY,CAAC,KAAK,EACjC,KAAK,EACL,OAAO,GAAG,KAAK,EACf,IAAI,GAAG,+BAAW,CAAC,KAAK,EACxB,KAAK,GAAG,+BAAW,CAAC,MAAM,OAEd,EADT,IAAI,cARwB,2EAShC,CADQ;IACU,OAAA,CACjB,8BAAC,sBAAM,oCACC,UAAU,EAAE,IAAI,EAAE,YAAY,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,IAAK,IAAI,mBACvD,KAAK;QAEhB,IAAI,IAAI,CACP,8BAAC,2BAAW,oBACN,EAAE,UAAU,EAAE,YAAY,EAAE,IAAI,EAAE,KAAK,EAAE,iBAE3C,YAAY,KAAK,gCAAY,CAAC,IAAI,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,YAAY,KAGhE,IAAI,CACO,CACf;QACA,CAAC,OAAO,IAAI,8BAAC,2BAAW,iBAAW,OAAO,IAAE,KAAK,CAAe,CAC1D,CACV,CAAA;CAAA,CAAC;AAEF,kBAAe,MAAM,CAAC"}

package/lib/ui/src/button/Button.stories.js

@@ -5,60 +5,34 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const addon_actions_1 = require("@storybook/addon-actions");
-const react_2 = require("@storybook/react");
 const addon_knobs_1 = require("@storybook/addon-knobs");
+const react_2 = require("@storybook/react");
 const utils_1 = require("../../../utils");
 const icons_1 = __importDefault(require("../icons"));
 const Button_1 = __importDefault(require("./Button"));
 const Button_interfaces_1 = require("./Button.interfaces");
 const { Arrow } = icons_1.default;
-const knobs = () => {
-    return {
-        icon: react_1.default.createElement(Arrow, null),
-        label: (0, addon_knobs_1.text)('Label', 'Click me please'),
-        disabled: (0, addon_knobs_1.boolean)('Disabled', false),
-        rounded: (0, addon_knobs_1.boolean)('Rounded', false),
-        size: (0, addon_knobs_1.select)('Size', Button_interfaces_1.ButtonSizes, Button_interfaces_1.ButtonSizes.LARGE),
-        theme: (0, addon_knobs_1.select)('Color', Button_interfaces_1.ButtonColors, Button_interfaces_1.ButtonColors.ORANGE),
-        iconPosition: (0, addon_knobs_1.select)('Icon position', Button_interfaces_1.IconPosition, Button_interfaces_1.IconPosition.RIGHT),
-        onClick: (0, addon_actions_1.action)('onClick')
-    };
-};
-(0, react_2.storiesOf)('Button', module)
-    .add('Primary', () => {
-    const props = Object.assign(Object.assign({}, knobs()), { appearance: Button_interfaces_1.ButtonAppearance.PRIMARY });
-    const style = {
-        padding: '1em',
-        background: props.theme === Button_interfaces_1.ButtonColors.WHITE ? utils_1.colors.orange.base : 'transparent'
-    };
-    return (react_1.default.createElement("div", { style: style },
-        react_1.default.createElement(Button_1.default, Object.assign({}, props))));
-})
-    .add('Secondary', () => {
-    const props = Object.assign(Object.assign({}, knobs()), { appearance: Button_interfaces_1.ButtonAppearance.SECONDARY });
-    const style = {
-        padding: '1em',
-        background: props.theme === Button_interfaces_1.ButtonColors.WHITE ? utils_1.colors.orange.base : 'transparent'
-    };
-    return (react_1.default.createElement("div", { style: style },
-        react_1.default.createElement(Button_1.default, Object.assign({}, props))));
-})
-    .add('No Appearance', () => {
-    const props = Object.assign(Object.assign({}, knobs()), { appearance: Button_interfaces_1.ButtonAppearance.NO_APPEARANCE });
-    const style = {
-        padding: '1em',
-        background: props.theme === Button_interfaces_1.ButtonColors.WHITE ? utils_1.colors.orange.base : 'transparent'
-    };
-    return (react_1.default.createElement("div", { style: style },
-        react_1.default.createElement(Button_1.default, Object.assign({}, props))));
-})
-    .add('Basic', () => {
-    const props = Object.assign(Object.assign({}, knobs()), { appearance: Button_interfaces_1.ButtonAppearance.BASIC });
-    const style = {
-        padding: '1em',
-        background: props.theme === Button_interfaces_1.ButtonColors.WHITE ? utils_1.colors.orange.base : 'transparent'
-    };
-    return (react_1.default.createElement("div", { style: style },
-        react_1.default.createElement(Button_1.default, Object.assign({}, props))));
+const knobs = () => ({
+    disabled: (0, addon_knobs_1.boolean)('Disabled', false),
+    icon: react_1.default.createElement(Arrow, null),
+    iconPosition: (0, addon_knobs_1.select)('Icon position', Button_interfaces_1.IconPosition, Button_interfaces_1.IconPosition.RIGHT),
+    label: (0, addon_knobs_1.text)('Label', 'Click me please'),
+    rounded: (0, addon_knobs_1.boolean)('Rounded', false),
+    size: (0, addon_knobs_1.select)('Size', Button_interfaces_1.ButtonSizes, Button_interfaces_1.ButtonSizes.LARGE),
+    theme: (0, addon_knobs_1.select)('Theme', Button_interfaces_1.ButtonTheme, Button_interfaces_1.ButtonTheme.ORANGE),
+    onClick: (0, addon_actions_1.action)('onClick')
+});
+const getStyles = (theme) => ({
+    padding: '1em',
+    background: theme === Button_interfaces_1.ButtonTheme.WHITE ? utils_1.colors.orange.base : 'transparent'
 });
+(0, react_2.storiesOf)('Button', module)
+    .add('Primary', () => (react_1.default.createElement("div", { style: getStyles(knobs().theme) },
+    react_1.default.createElement(Button_1.default, Object.assign({}, Object.assign({}, knobs()), { appearance: Button_interfaces_1.ButtonAppearance.PRIMARY })))))
+    .add('Secondary', () => (react_1.default.createElement("div", { style: getStyles(knobs().theme) },
+    react_1.default.createElement(Button_1.default, Object.assign({}, Object.assign({}, knobs()), { appearance: Button_interfaces_1.ButtonAppearance.SECONDARY })))))
+    .add('No Appearance', () => (react_1.default.createElement("div", { style: getStyles(knobs().theme) },
+    react_1.default.createElement(Button_1.default, Object.assign({}, Object.assign({}, knobs()), { appearance: Button_interfaces_1.ButtonAppearance.NO_APPEARANCE })))))
+    .add('Basic', () => (react_1.default.createElement("div", { style: getStyles(knobs().theme) },
+    react_1.default.createElement(Button_1.default, Object.assign({}, Object.assign({}, knobs()), { appearance: Button_interfaces_1.ButtonAppearance.BASIC })))));
 //# sourceMappingURL=Button.stories.js.map

package/lib/ui/src/button/Button.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.stories.js","sourceRoot":"","sources":["../../../../packages/ui/src/button/Button.stories.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Button.stories.js","sourceRoot":"","sources":["../../../../packages/ui/src/button/Button.stories.tsx"],"names":[],"mappings":";;;;;AAAA,kDAA0B;AAE1B,4DAAkD;AAClD,wDAA+D;AAC/D,4CAA6C;AAE7C,0CAAwC;AACxC,qDAA6B;AAC7B,sDAA8B;AAC9B,2DAK6B;AAE7B,MAAM,EAAE,KAAK,EAAE,GAAG,eAAK,CAAC;AACxB,MAAM,KAAK,GAAG,GAAG,EAAE,CAAC,CAAC;IACnB,QAAQ,EAAE,IAAA,qBAAO,EAAC,UAAU,EAAE,KAAK,CAAC;IACpC,IAAI,EAAE,8BAAC,KAAK,OAAG;IACf,YAAY,EAAE,IAAA,oBAAM,EAAC,eAAe,EAAE,gCAAY,EAAE,gCAAY,CAAC,KAAK,CAAC;IACvE,KAAK,EAAE,IAAA,kBAAI,EAAC,OAAO,EAAE,iBAAiB,CAAC;IACvC,OAAO,EAAE,IAAA,qBAAO,EAAC,SAAS,EAAE,KAAK,CAAC;IAClC,IAAI,EAAE,IAAA,oBAAM,EAAC,MAAM,EAAE,+BAAW,EAAE,+BAAW,CAAC,KAAK,CAAC;IACpD,KAAK,EAAE,IAAA,oBAAM,EAAC,OAAO,EAAE,+BAAW,EAAE,+BAAW,CAAC,MAAM,CAAC;IACvD,OAAO,EAAE,IAAA,sBAAM,EAAC,SAAS,CAAC;CAC3B,CAAC,CAAC;AAEH,MAAM,SAAS,GAAG,CAAC,KAAkB,EAAE,EAAE,CAAC,CAAC;IACzC,OAAO,EAAE,KAAK;IACd,UAAU,EAAE,KAAK,KAAK,+BAAW,CAAC,KAAK,CAAC,CAAC,CAAC,cAAM,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,aAAa;CAC7E,CAAC,CAAC;AAEH,IAAA,iBAAS,EAAC,QAAQ,EAAE,MAAM,CAAC;KACxB,GAAG,CAAC,SAAS,EAAE,GAAG,EAAE,CAAC,CACpB,uCAAK,KAAK,EAAE,SAAS,CAAC,KAAK,EAAE,CAAC,KAAK,CAAC;IAClC,8BAAC,gBAAM,sCAAU,KAAK,EAAE,KAAI,UAAU,EAAE,oCAAgB,CAAC,OAAO,IAAI,CAChE,CACP,CAAC;KACD,GAAG,CAAC,WAAW,EAAE,GAAG,EAAE,CAAC,CACtB,uCAAK,KAAK,EAAE,SAAS,CAAC,KAAK,EAAE,CAAC,KAAK,CAAC;IAClC,8BAAC,gBAAM,sCAAU,KAAK,EAAE,KAAI,UAAU,EAAE,oCAAgB,CAAC,SAAS,IAAI,CAClE,CACP,CAAC;KACD,GAAG,CAAC,eAAe,EAAE,GAAG,EAAE,CAAC,CAC1B,uCAAK,KAAK,EAAE,SAAS,CAAC,KAAK,EAAE,CAAC,KAAK,CAAC;IAClC,8BAAC,gBAAM,sCAAU,KAAK,EAAE,KAAI,UAAU,EAAE,oCAAgB,CAAC,aAAa,IAAI,CACtE,CACP,CAAC;KACD,GAAG,CAAC,OAAO,EAAE,GAAG,EAAE,CAAC,CAClB,uCAAK,KAAK,EAAE,SAAS,CAAC,KAAK,EAAE,CAAC,KAAK,CAAC;IAClC,8BAAC,gBAAM,sCAAU,KAAK,EAAE,KAAI,UAAU,EAAE,oCAAgB,CAAC,KAAK,IAAI,CAC9D,CACP,CAAC,CAAC"}

package/lib/ui/src/button/Button.styles.d.ts

@@ -1,4 +1,4 @@
-import { ButtonProps } from './Button.interfaces';
+import { ButtonProps } from './Button';
 declare type LayoutProps = Pick<ButtonProps, 'appearance' | 'iconPosition' | 'rounded' | 'size' | 'theme' | 'icon'>;
 export declare const minusPadding: (padding: string) => string;
 export declare const LabelLayout: import("styled-components").StyledComponent<"div", any, {}, never>;

package/lib/ui/src/button/Button.styles.js

@@ -41,11 +41,10 @@ const COMMON_BUTTON = (0, styled_components_1.css) `
   }
 `;
 const primaryStyle = (0, styled_components_1.css) `
-  ${utils_1.ArchivoFont};
   ${COMMON_BUTTON};
   color: white;
 
-  ${(props) => props.theme === Button_interfaces_1.ButtonColors.GREEN
+  ${({ theme }) => theme === Button_interfaces_1.ButtonTheme.GREEN
     ? (0, styled_components_1.css) `
           background-color: ${utils_1.colors.green.base};
 
@@ -53,7 +52,7 @@ const primaryStyle = (0, styled_components_1.css) `
             background-color: ${utils_1.colors.green.base80};
           }
         `
-    : props.theme === Button_interfaces_1.ButtonColors.BLACK
+    : theme === Button_interfaces_1.ButtonTheme.BLACK
         ? (0, styled_components_1.css) `
           background-color: ${utils_1.colors.dark.base};
 
@@ -61,23 +60,25 @@ const primaryStyle = (0, styled_components_1.css) `
             background-color: ${utils_1.colors.dark.base60};
           }
         `
-        : props.theme === Button_interfaces_1.ButtonColors.BLUE
+        : theme === Button_interfaces_1.ButtonTheme.BLUE
             ? (0, styled_components_1.css) `
+          color: ${utils_1.colors.green.base};
           background-color: ${utils_1.colors.blue.base};
 
           :not(:disabled):hover {
             background-color: ${utils_1.colors.blue.base60};
           }
         `
-            : props.theme === Button_interfaces_1.ButtonColors.PINK
+            : theme === Button_interfaces_1.ButtonTheme.PINK
                 ? (0, styled_components_1.css) `
-          background-color: ${utils_1.colors.pink.base};
+          color: ${utils_1.colors.orange.base};
+          background-color: ${utils_1.colors.red.base5};
 
           :not(:disabled):hover {
             background-color: ${utils_1.colors.red.base10};
           }
         `
-                : props.theme === Button_interfaces_1.ButtonColors.RED
+                : theme === Button_interfaces_1.ButtonTheme.RED
                     ? (0, styled_components_1.css) `
           background-color: ${utils_1.colors.red.base};
 
@@ -85,7 +86,7 @@ const primaryStyle = (0, styled_components_1.css) `
             background-color: ${utils_1.colors.red.base80};
           }
         `
-                    : props.theme === Button_interfaces_1.ButtonColors.WHITE
+                    : theme === Button_interfaces_1.ButtonTheme.WHITE
                         ? (0, styled_components_1.css) `
           background-color: white;
           color: ${utils_1.colors.green.base};
@@ -103,16 +104,14 @@ const primaryStyle = (0, styled_components_1.css) `
         `};
 `;
 const secondaryStyle = (0, styled_components_1.css) `
-  ${utils_1.ArchivoFont};
   ${COMMON_BUTTON};
-
   border-color: currentColor;
 
   :disabled {
     border-color: transparent;
   }
 
-  ${(props) => props.theme === Button_interfaces_1.ButtonColors.GREEN
+  ${({ theme }) => theme === Button_interfaces_1.ButtonTheme.GREEN
     ? (0, styled_components_1.css) `
           color: ${utils_1.colors.green.base};
 
@@ -120,7 +119,7 @@ const secondaryStyle = (0, styled_components_1.css) `
             background-color: ${utils_1.colors.green.base20};
           }
         `
-    : props.theme === Button_interfaces_1.ButtonColors.BLACK
+    : theme === Button_interfaces_1.ButtonTheme.BLACK
         ? (0, styled_components_1.css) `
           color: ${utils_1.colors.dark.base};
 
@@ -128,7 +127,7 @@ const secondaryStyle = (0, styled_components_1.css) `
             background-color: ${(0, polished_1.transparentize)(0.8, utils_1.colors.dark.base60)};
           }
         `
-        : props.theme === Button_interfaces_1.ButtonColors.BLUE
+        : theme === Button_interfaces_1.ButtonTheme.BLUE
             ? (0, styled_components_1.css) `
           color: ${utils_1.colors.blue.base};
 
@@ -136,7 +135,7 @@ const secondaryStyle = (0, styled_components_1.css) `
             background-color: ${(0, polished_1.transparentize)(0.8, utils_1.colors.blue.base60)};
           }
         `
-            : props.theme === Button_interfaces_1.ButtonColors.PINK
+            : theme === Button_interfaces_1.ButtonTheme.PINK
                 ? (0, styled_components_1.css) `
           color: ${utils_1.colors.pink.base};
 
@@ -144,7 +143,7 @@ const secondaryStyle = (0, styled_components_1.css) `
             background-color: ${(0, polished_1.transparentize)(0.8, utils_1.colors.red.base10)};
           }
         `
-                : props.theme === Button_interfaces_1.ButtonColors.RED
+                : theme === Button_interfaces_1.ButtonTheme.RED
                     ? (0, styled_components_1.css) `
           color: ${utils_1.colors.red.base};
 
@@ -152,7 +151,7 @@ const secondaryStyle = (0, styled_components_1.css) `
             background-color: ${(0, polished_1.transparentize)(0.8, utils_1.colors.red.base60)};
           }
         `
-                    : props.theme === Button_interfaces_1.ButtonColors.WHITE
+                    : theme === Button_interfaces_1.ButtonTheme.WHITE
                         ? (0, styled_components_1.css) `
           color: white;
 
@@ -175,7 +174,6 @@ const secondaryStyle = (0, styled_components_1.css) `
         `};
 `;
 const noAppearanceStyle = (0, styled_components_1.css) `
-  ${utils_1.ArchivoFont};
   color: ${utils_1.colors.orange.base};
   min-height: 0;
   padding: 0;
@@ -192,7 +190,7 @@ const noAppearanceStyle = (0, styled_components_1.css) `
     box-shadow: unset;
   }
 
-  ${(props) => props.theme === Button_interfaces_1.ButtonColors.GREEN
+  ${({ theme }) => theme === Button_interfaces_1.ButtonTheme.GREEN
     ? (0, styled_components_1.css) `
           color: ${utils_1.colors.green.base};
 
@@ -200,7 +198,7 @@ const noAppearanceStyle = (0, styled_components_1.css) `
             color: ${utils_1.colors.green.base80};
           }
         `
-    : props.theme === Button_interfaces_1.ButtonColors.BLACK
+    : theme === Button_interfaces_1.ButtonTheme.BLACK
         ? (0, styled_components_1.css) `
           color: ${utils_1.colors.dark.base};
 
@@ -212,7 +210,7 @@ const noAppearanceStyle = (0, styled_components_1.css) `
             color: ${(0, polished_1.transparentize)(0.6, 'white')};
           }
         `
-        : props.theme === Button_interfaces_1.ButtonColors.BLUE
+        : theme === Button_interfaces_1.ButtonTheme.BLUE
             ? (0, styled_components_1.css) `
           color: ${utils_1.colors.blue.base};
 
@@ -220,7 +218,7 @@ const noAppearanceStyle = (0, styled_components_1.css) `
             color: ${utils_1.colors.blue.base80};
           }
         `
-            : props.theme === Button_interfaces_1.ButtonColors.PINK
+            : theme === Button_interfaces_1.ButtonTheme.PINK
                 ? (0, styled_components_1.css) `
           color: ${utils_1.colors.pink.base};
 
@@ -228,7 +226,7 @@ const noAppearanceStyle = (0, styled_components_1.css) `
             color: ${utils_1.colors.pink.base10};
           }
         `
-                : props.theme === Button_interfaces_1.ButtonColors.WHITE
+                : theme === Button_interfaces_1.ButtonTheme.WHITE
                     ? (0, styled_components_1.css) `
           color: white;
 
@@ -240,7 +238,7 @@ const noAppearanceStyle = (0, styled_components_1.css) `
             color: ${(0, polished_1.transparentize)(0.6, 'white')};
           }
         `
-                    : props.theme === Button_interfaces_1.ButtonColors.RED
+                    : theme === Button_interfaces_1.ButtonTheme.RED
                         ? (0, styled_components_1.css) `
           color: ${utils_1.colors.red.base};
 
@@ -349,7 +347,7 @@ exports.Layout = styled_components_1.default.button `
     fill: currentColor;
   }
 
-  ${(props) => props.size === Button_interfaces_1.ButtonSizes.FULL
+  ${({ size, icon, iconPosition }) => size === Button_interfaces_1.ButtonSizes.FULL
     ? (0, styled_components_1.css) `
           font-size: ${utils_1.fonts.base};
           min-height: ${(0, utils_1.convertPxToRem)(48)};
@@ -357,50 +355,50 @@ exports.Layout = styled_components_1.default.button `
           justify-content: center;
           padding: ${(0, exports.minusPadding)((0, utils_1.convertPxToRem)(4))} 0;
         `
-    : props.size === Button_interfaces_1.ButtonSizes.BIG
+    : size === Button_interfaces_1.ButtonSizes.BIG
         ? (0, styled_components_1.css) `
           font-size: ${utils_1.fonts.base};
           min-height: ${(0, utils_1.convertPxToRem)(48)};
           padding: ${(0, exports.minusPadding)((0, utils_1.convertPxToRem)(4))}
-            ${props.icon && props.iconPosition === Button_interfaces_1.IconPosition.RIGHT
+            ${icon && iconPosition === Button_interfaces_1.IconPosition.RIGHT
             ? 0
             : (0, exports.minusPadding)((0, utils_1.convertPxToRem)(24))}
             ${(0, exports.minusPadding)((0, utils_1.convertPxToRem)(4))}
-            ${props.icon && props.iconPosition === Button_interfaces_1.IconPosition.LEFT
+            ${icon && iconPosition === Button_interfaces_1.IconPosition.LEFT
             ? 0
             : (0, exports.minusPadding)((0, utils_1.convertPxToRem)(24))};
         `
-        : props.size === Button_interfaces_1.ButtonSizes.LARGE
+        : size === Button_interfaces_1.ButtonSizes.LARGE
             ? (0, styled_components_1.css) `
           font-size: ${utils_1.fonts.base};
           min-height: ${(0, utils_1.convertPxToRem)(40)};
           padding: ${(0, exports.minusPadding)((0, utils_1.convertPxToRem)(4))}
-            ${props.icon && props.iconPosition === Button_interfaces_1.IconPosition.RIGHT
+            ${icon && iconPosition === Button_interfaces_1.IconPosition.RIGHT
                 ? 0
                 : (0, exports.minusPadding)((0, utils_1.convertPxToRem)(24))}
             ${(0, exports.minusPadding)((0, utils_1.convertPxToRem)(4))}
-            ${props.icon && props.iconPosition === Button_interfaces_1.IconPosition.LEFT
+            ${icon && iconPosition === Button_interfaces_1.IconPosition.LEFT
                 ? 0
                 : (0, exports.minusPadding)((0, utils_1.convertPxToRem)(24))};
         `
             : (0, styled_components_1.css) `
           min-height: ${(0, utils_1.convertPxToRem)(32)};
           padding: ${(0, exports.minusPadding)((0, utils_1.convertPxToRem)(4))}
-            ${props.icon && props.iconPosition === Button_interfaces_1.IconPosition.RIGHT
+            ${icon && iconPosition === Button_interfaces_1.IconPosition.RIGHT
                 ? 0
                 : (0, exports.minusPadding)((0, utils_1.convertPxToRem)(16))}
             ${(0, exports.minusPadding)((0, utils_1.convertPxToRem)(4))}
-            ${props.icon && props.iconPosition === Button_interfaces_1.IconPosition.LEFT
+            ${icon && iconPosition === Button_interfaces_1.IconPosition.LEFT
                 ? 0
                 : (0, exports.minusPadding)((0, utils_1.convertPxToRem)(16))};
         `}
 
-  ${(props) => props.iconPosition === Button_interfaces_1.IconPosition.RIGHT &&
+  ${({ iconPosition }) => iconPosition === Button_interfaces_1.IconPosition.RIGHT &&
     (0, styled_components_1.css) `
       flex-direction: row-reverse;
     `}
     
-  ${(props) => props.rounded &&
+  ${({ rounded }) => rounded &&
     (0, styled_components_1.css) `
       border-radius: ${utils_1.radius.rounded};
       padding: 0;
@@ -411,30 +409,34 @@ exports.Layout = styled_components_1.default.button `
       }
     `}
 
-  ${(props) => props.rounded &&
-    props.appearance !== Button_interfaces_1.ButtonAppearance.NO_APPEARANCE &&
-    props.appearance !== Button_interfaces_1.ButtonAppearance.BASIC &&
+  ${({ rounded, size, appearance }) => rounded &&
+    appearance !== Button_interfaces_1.ButtonAppearance.NO_APPEARANCE &&
+    appearance !== Button_interfaces_1.ButtonAppearance.BASIC &&
     (0, styled_components_1.css) `
-      ${props.size === Button_interfaces_1.ButtonSizes.LARGE || props.size === Button_interfaces_1.ButtonSizes.FULL
-        ? `height: ${(0, utils_1.convertPxToRem)(40)}};
-      width: ${(0, utils_1.convertPxToRem)(40)}};`
-        : `height: ${(0, utils_1.convertPxToRem)(32)};
-      width: ${(0, utils_1.convertPxToRem)(32)};`}
+      ${size === Button_interfaces_1.ButtonSizes.LARGE || size === Button_interfaces_1.ButtonSizes.FULL
+        ? `
+          height: ${(0, utils_1.convertPxToRem)(40)}};
+          width: ${(0, utils_1.convertPxToRem)(40)}};
+        `
+        : `
+          height: ${(0, utils_1.convertPxToRem)(32)};
+          width: ${(0, utils_1.convertPxToRem)(32)};
+        `}
     `}
 
-  ${(props) => props.appearance === Button_interfaces_1.ButtonAppearance.PRIMARY
+  ${({ appearance }) => appearance === Button_interfaces_1.ButtonAppearance.PRIMARY
     ? (0, styled_components_1.css) `
           ${primaryStyle}
         `
-    : props.appearance === Button_interfaces_1.ButtonAppearance.SECONDARY
+    : appearance === Button_interfaces_1.ButtonAppearance.SECONDARY
         ? (0, styled_components_1.css) `
           ${secondaryStyle}
         `
-        : props.appearance === Button_interfaces_1.ButtonAppearance.NO_APPEARANCE
+        : appearance === Button_interfaces_1.ButtonAppearance.NO_APPEARANCE
             ? (0, styled_components_1.css) `
           ${noAppearanceStyle}
         `
-            : props.appearance === Button_interfaces_1.ButtonAppearance.BASIC &&
+            : appearance === Button_interfaces_1.ButtonAppearance.BASIC &&
                 (0, styled_components_1.css) `
           ${noAppearanceStyle}
           ${basicStyle}