@beequip/hexagon 0.22.1 → 0.22.3

package/README.md

@@ -45,8 +45,8 @@ All components in Hexagon can be previewed in our Storybook. Simply run `yarn st
 
 We use [Chromatic](https://www.chromatic.com/) to publish and review our Storybook. The CI is configured to automatically publish the Storybook and run Chromatic’s automation whenever you push code. 
 
-- [Library](http://www.chromatic.com/library?appId=5f7c9ca68ecdf800227af955) at Chromatic
-- Latest published [Storybook](https://develop--5f7c9ca68ecdf800227af955.chromatic.com)
+- [Library](https://www.chromatic.com/library?appId=688c82718f66d9984ca19d0d) at Chromatic
+- Latest published [Storybook](https://688c82718f66d9984ca19d0d-inrbsoohvl.chromatic.com/)
 
 ## Publishing
 

package/dist/assets/icons/ArrowLeft.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import { IconProps } from '../../theme/types';
 export declare const ArrowLeft: ({ width }: IconProps) => JSX.Element;

package/dist/assets/icons/ArrowRight.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import { IconProps } from '../../theme/types';
 export declare const ArrowRight: ({ width }: IconProps) => JSX.Element;

package/dist/assets/icons/CheckCircle.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import { IconProps } from '../../theme/types';
 export declare const CheckCircle: ({ width }: IconProps) => JSX.Element;

package/dist/assets/icons/Checkmark.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import { IconProps } from '../../theme/types';
 export declare const Checkmark: ({ width, color, }: IconProps) => JSX.Element;

package/dist/assets/icons/ChevronDown.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import { IconProps } from '../../theme/types';
 export declare const ChevronDown: ({ width, color, }: IconProps) => JSX.Element;

package/dist/assets/icons/ChevronLeft.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import { IconProps } from '../../theme/types';
 export declare const ChevronLeft: ({ width, color, }: IconProps) => JSX.Element;

package/dist/assets/icons/ChevronRight.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import { IconProps } from '../../theme/types';
 export declare const ChevronRight: ({ width, color, }: IconProps) => JSX.Element;

package/dist/assets/icons/ChevronUp.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import { IconProps } from '../../theme/types';
 export declare const ChevronUp: ({ width, color, }: IconProps) => JSX.Element;

package/dist/assets/icons/Cross.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import { IconProps } from '../../theme/types';
 export declare const Cross: ({ width, color, }: IconProps) => JSX.Element;

package/dist/assets/icons/ExclamationCircle.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import { IconProps } from '../../theme/types';
 export declare const ExclamationCircle: ({ width, color, }: IconProps) => JSX.Element;

package/dist/assets/icons/ExclamationTriangle.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import { IconProps } from '../../theme/types';
 export declare const ExclamationTriangle: ({ width, color, }: IconProps) => JSX.Element;

package/dist/assets/icons/InfoCircle.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import { IconProps } from '../../theme/types';
 export declare const InfoCircle: ({ width, color, text, id, ...rest }: IconProps) => JSX.Element;

package/dist/assets/icons/MessageSquareCheck.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import { IconProps } from '../../theme/types';
 export declare const MessageSquareCheck: ({ width, }: IconProps) => JSX.Element;

package/dist/assets/icons/MessageSquareDots.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import { IconProps } from '../../theme/types';
 export declare const MessageSquareDots: ({ width, }: IconProps) => JSX.Element;

package/dist/assets/icons/MinusCircle.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import { IconProps } from '../../theme/types';
 export declare const MinusCircle: ({ width, color, ...rest }: IconProps) => JSX.Element;

package/dist/assets/icons/PlusCircle.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import { IconProps } from '../../theme/types';
 export declare const PlusCircle: ({ width, color, ...rest }: IconProps) => JSX.Element;

package/dist/components/Autocomplete/Item/index.js

@@ -5,7 +5,8 @@ var tslib_1 = require("tslib");
 var React = require("react");
 var styles_1 = require("./styles");
 var AutocompleteItem = function (props) {
-    return (React.createElement(styles_1.StyledAutocompleteItem, tslib_1.__assign({}, props), props.children));
+    var highlighted = props.highlighted, noResults = props.noResults;
+    return (React.createElement(styles_1.StyledAutocompleteItem, tslib_1.__assign({}, props, { "$highlighted": highlighted, "$noResults": noResults }), props.children));
 };
 exports.AutocompleteItem = AutocompleteItem;
 //# sourceMappingURL=index.js.map

package/dist/components/Autocomplete/Item/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Autocomplete/Item/index.tsx"],"names":[],"mappings":";;;;AAAA,6BAA8B;AAC9B,mCAAiD;AAU1C,IAAM,gBAAgB,GAAG,UAAC,KAA4B;IACzD,OAAO,CACH,oBAAC,+BAAsB,uBAAK,KAAK,GAC5B,KAAK,CAAC,QAAQ,CACM,CAC5B,CAAA;AACL,CAAC,CAAA;AANY,QAAA,gBAAgB,oBAM5B"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Autocomplete/Item/index.tsx"],"names":[],"mappings":";;;;AAAA,6BAA8B;AAC9B,mCAAiD;AAU1C,IAAM,gBAAgB,GAAG,UAAC,KAA4B;IACjD,IAAA,WAAW,GAAgB,KAAK,YAArB,EAAE,SAAS,GAAK,KAAK,UAAV,CAAU;IAExC,OAAO,CACH,oBAAC,+BAAsB,uBACf,KAAK,oBACK,WAAW,gBACb,SAAS,KAEpB,KAAK,CAAC,QAAQ,CACM,CAC5B,CAAA;AACL,CAAC,CAAA;AAZY,QAAA,gBAAgB,oBAY5B"}

package/dist/components/Autocomplete/Item/styles.d.ts

@@ -1,4 +1,7 @@
 /// <reference types="react" />
 import { AutocompleteItemProps } from './index';
-export declare const StyledAutocompleteItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, AutocompleteItemProps>> & string;
+import { PrefixedPick } from '../../../types/styled-components';
+type StyledAutocompleteItemProps = PrefixedPick<AutocompleteItemProps, 'highlighted' | 'noResults'>;
+export declare const StyledAutocompleteItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledAutocompleteItemProps>> & string;
 export declare const StyledAutocompleteItemTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export {};

package/dist/components/Autocomplete/Item/styles.js

@@ -5,10 +5,10 @@ var tslib_1 = require("tslib");
 var index_1 = require("../../../theme/index");
 var styled_components_1 = require("styled-components");
 exports.StyledAutocompleteItem = styled_components_1.default.div(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", "px;\n    color: ", ";\n    padding: ", "px ", "px;\n    background: ", ";\n\n    &:hover {\n        cursor: ", ";\n    }\n"], ["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", "px;\n    color: ", ";\n    padding: ", "px ", "px;\n    background: ", ";\n\n    &:hover {\n        cursor: ", ";\n    }\n"])), function (props) { return props.theme.font.default; }, function (props) { return props.theme.font.sizes.s; }, function (props) { return props.theme.baseline * 3; }, function (props) {
-    return props.noResults ? props.theme.colors.text.light : 'inherit';
+    return props.$noResults ? props.theme.colors.text.light : 'inherit';
 }, index_1.baseline * 1.5, index_1.baseline, function (props) {
-    return props.highlighted ? props.theme.colors.grey[100] : 'white';
-}, function (props) { return (props.noResults ? 'default' : 'pointer'); });
+    return props.$highlighted ? props.theme.colors.grey[100] : 'white';
+}, function (props) { return (props.$noResults ? 'default' : 'pointer'); });
 exports.StyledAutocompleteItemTitle = styled_components_1.default.div(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n    font-family: ", ";\n    font-size: ", ";\n    font-weight: 400;\n    padding: 10px ", "px;\n    border-bottom: 1px solid ", ";\n    user-select: none;\n    text-transform: uppercase;\n    color: ", ";\n"], ["\n    font-family: ", ";\n    font-size: ", ";\n    font-weight: 400;\n    padding: 10px ", "px;\n    border-bottom: 1px solid ", ";\n    user-select: none;\n    text-transform: uppercase;\n    color: ", ";\n"])), function (props) { return props.theme.font.default; }, function (props) { return props.theme.font.sizes.s; }, index_1.baseline, function (props) { return props.theme.borderColor; }, function (props) { return props.theme.colors.grey[300]; });
 var templateObject_1, templateObject_2;
 //# sourceMappingURL=styles.js.map

package/dist/components/Autocomplete/Item/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/components/Autocomplete/Item/styles.ts"],"names":[],"mappings":";;;;AAAA,8CAA+C;AAC/C,uDAAsC;AAGzB,QAAA,sBAAsB,GAAG,2BAAM,CAAC,GAAG,4QAAuB,qBACpD,EAAmC,oBACrC,EAAmC,sBACjC,EAAmC,kBACzC,EACsD,kBACpD,EAAc,KAAM,EAAQ,uBACzB,EACgD,sCAGhD,EAAoD,YAErE,KAZkB,UAAC,KAAK,IAAK,OAAA,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,EAAxB,CAAwB,EACrC,UAAC,KAAK,IAAK,OAAA,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAxB,CAAwB,EACjC,UAAC,KAAK,IAAK,OAAA,KAAK,CAAC,KAAK,CAAC,QAAQ,GAAG,CAAC,EAAxB,CAAwB,EACzC,UAAC,KAAK;IACX,OAAA,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS;AAA3D,CAA2D,EACpD,gBAAQ,GAAG,GAAG,EAAM,gBAAQ,EACzB,UAAC,KAAK;IAChB,OAAA,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO;AAA1D,CAA0D,EAGhD,UAAC,KAAK,IAAK,OAAA,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,EAAzC,CAAyC,EAErE;AAEY,QAAA,2BAA2B,GAAG,2BAAM,CAAC,GAAG,6RAAA,qBAClC,EAAmC,oBACrC,EAAmC,8CAEhC,EAAQ,oCACG,EAAkC,wEAGpD,EAAuC,KACnD,KARkB,UAAC,KAAK,IAAK,OAAA,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,EAAxB,CAAwB,EACrC,UAAC,KAAK,IAAK,OAAA,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAxB,CAAwB,EAEhC,gBAAQ,EACG,UAAC,KAAK,IAAK,OAAA,KAAK,CAAC,KAAK,CAAC,WAAW,EAAvB,CAAuB,EAGpD,UAAC,KAAK,IAAK,OAAA,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,EAA5B,CAA4B,EACnD"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/components/Autocomplete/Item/styles.ts"],"names":[],"mappings":";;;;AAAA,8CAA+C;AAC/C,uDAAsC;AASzB,QAAA,sBAAsB,GAAG,2BAAM,CAAC,GAAG,4QAA6B,qBAC1D,EAAmC,oBACrC,EAAmC,sBACjC,EAAmC,kBACzC,EACuD,kBACrD,EAAc,KAAM,EAAQ,uBACzB,EACiD,sCAGjD,EAAqD,YAEtE,KAZkB,UAAC,KAAK,IAAK,OAAA,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,EAAxB,CAAwB,EACrC,UAAC,KAAK,IAAK,OAAA,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAxB,CAAwB,EACjC,UAAC,KAAK,IAAK,OAAA,KAAK,CAAC,KAAK,CAAC,QAAQ,GAAG,CAAC,EAAxB,CAAwB,EACzC,UAAC,KAAK;IACX,OAAA,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS;AAA5D,CAA4D,EACrD,gBAAQ,GAAG,GAAG,EAAM,gBAAQ,EACzB,UAAC,KAAK;IAChB,OAAA,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO;AAA3D,CAA2D,EAGjD,UAAC,KAAK,IAAK,OAAA,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,EAA1C,CAA0C,EAEtE;AAEY,QAAA,2BAA2B,GAAG,2BAAM,CAAC,GAAG,6RAAA,qBAClC,EAAmC,oBACrC,EAAmC,8CAEhC,EAAQ,oCACG,EAAkC,wEAGpD,EAAuC,KACnD,KARkB,UAAC,KAAK,IAAK,OAAA,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,EAAxB,CAAwB,EACrC,UAAC,KAAK,IAAK,OAAA,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAxB,CAAwB,EAEhC,gBAAQ,EACG,UAAC,KAAK,IAAK,OAAA,KAAK,CAAC,KAAK,CAAC,WAAW,EAAvB,CAAuB,EAGpD,UAAC,KAAK,IAAK,OAAA,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,EAA5B,CAA4B,EACnD"}

package/dist/components/Box/index.js

@@ -22,7 +22,8 @@ var mr = function (value, themeSpacing) {
 exports.mr = mr;
 var Box = function (_a) {
     var children = _a.children, _b = _a.bottom, bottom = _b === void 0 ? 3 : _b, props = tslib_1.__rest(_a, ["children", "bottom"]);
-    return (React.createElement(styles_1.StyledBox, tslib_1.__assign({ "data-hook": props.hook, bottom: bottom }, props), children));
+    var top = props.top, left = props.left, right = props.right, center = props.center, visible = props.visible;
+    return (React.createElement(styles_1.StyledBox, tslib_1.__assign({ "data-hook": props.hook, "$top": top, "$right": right, "$left": left, "$bottom": bottom, "$center": center, "$visible": visible }, props), children));
 };
 exports.Box = Box;
 //# sourceMappingURL=index.js.map

package/dist/components/Box/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Box/index.tsx"],"names":[],"mappings":";;;;AACA,mCAAoC;AACpC,6BAA8B;AAcvB,IAAM,EAAE,GAAG,UACd,KAAc,EACd,YAAgC;IAEhC,OAAO,sBAAe,YAAY,CAAC,KAAK,CAAC,OAAI,CAAA;AACjD,CAAC,CAAA;AALY,QAAA,EAAE,MAKd;AACM,IAAM,EAAE,GAAG,UACd,KAAc,EACd,YAAgC;IAEhC,OAAO,uBAAgB,YAAY,CAAC,KAAK,CAAC,OAAI,CAAA;AAClD,CAAC,CAAA;AALY,QAAA,EAAE,MAKd;AACM,IAAM,EAAE,GAAG,UACd,KAAc,EACd,YAAgC;IAEhC,OAAO,yBAAkB,YAAY,CAAC,KAAK,CAAC,OAAI,CAAA;AACpD,CAAC,CAAA;AALY,QAAA,EAAE,MAKd;AACM,IAAM,EAAE,GAAG,UACd,KAAc,EACd,YAAgC;IAEhC,OAAO,wBAAiB,YAAY,CAAC,KAAK,CAAC,OAAI,CAAA;AACnD,CAAC,CAAA;AALY,QAAA,EAAE,MAKd;AAEM,IAAM,GAAG,GAAG,UAAC,EAIT;IAHP,IAAA,QAAQ,cAAA,EACR,cAAU,EAAV,MAAM,mBAAG,CAAC,KAAA,EACP,KAAK,sBAHQ,sBAInB,CADW;IAER,OAAO,CACH,oBAAC,kBAAS,kCAAY,KAAK,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,IAAM,KAAK,GACtD,QAAQ,CACD,CACf,CAAA;AACL,CAAC,CAAA;AAVY,QAAA,GAAG,OAUf"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Box/index.tsx"],"names":[],"mappings":";;;;AACA,mCAAoC;AACpC,6BAA8B;AAcvB,IAAM,EAAE,GAAG,UACd,KAAc,EACd,YAAgC;IAEhC,OAAO,sBAAe,YAAY,CAAC,KAAK,CAAC,OAAI,CAAA;AACjD,CAAC,CAAA;AALY,QAAA,EAAE,MAKd;AACM,IAAM,EAAE,GAAG,UACd,KAAc,EACd,YAAgC;IAEhC,OAAO,uBAAgB,YAAY,CAAC,KAAK,CAAC,OAAI,CAAA;AAClD,CAAC,CAAA;AALY,QAAA,EAAE,MAKd;AACM,IAAM,EAAE,GAAG,UACd,KAAc,EACd,YAAgC;IAEhC,OAAO,yBAAkB,YAAY,CAAC,KAAK,CAAC,OAAI,CAAA;AACpD,CAAC,CAAA;AALY,QAAA,EAAE,MAKd;AACM,IAAM,EAAE,GAAG,UACd,KAAc,EACd,YAAgC;IAEhC,OAAO,wBAAiB,YAAY,CAAC,KAAK,CAAC,OAAI,CAAA;AACnD,CAAC,CAAA;AALY,QAAA,EAAE,MAKd;AAEM,IAAM,GAAG,GAAG,UAAC,EAIT;IAHP,IAAA,QAAQ,cAAA,EACR,cAAU,EAAV,MAAM,mBAAG,CAAC,KAAA,EACP,KAAK,sBAHQ,sBAInB,CADW;IAEA,IAAA,GAAG,GAAmC,KAAK,IAAxC,EAAE,IAAI,GAA6B,KAAK,KAAlC,EAAE,KAAK,GAAsB,KAAK,MAA3B,EAAE,MAAM,GAAc,KAAK,OAAnB,EAAE,OAAO,GAAK,KAAK,QAAV,CAAU;IAEnD,OAAO,CACH,oBAAC,kBAAS,kCACK,KAAK,CAAC,IAAI,UACf,GAAG,YACD,KAAK,WACN,IAAI,aACF,MAAM,aACN,MAAM,cACL,OAAO,IACb,KAAK,GAER,QAAQ,CACD,CACf,CAAA;AACL,CAAC,CAAA;AArBY,QAAA,GAAG,OAqBf"}

package/dist/components/Box/styles.d.ts

@@ -1,3 +1,6 @@
 /// <reference types="react" />
 import { BoxProps } from '.';
-export declare const StyledBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, BoxProps>> & string;
+import { PrefixedPick } from '../../types/styled-components';
+type StyledBoxProps = PrefixedPick<BoxProps, 'top' | 'right' | 'bottom' | 'left' | 'center' | 'visible'>;
+export declare const StyledBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledBoxProps>> & string;
+export {};

package/dist/components/Box/styles.js

@@ -5,10 +5,10 @@ var tslib_1 = require("tslib");
 var styled_components_1 = require("styled-components");
 var _1 = require(".");
 var index_1 = require("../../theme/index");
-exports.StyledBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    text-align: ", ";\n    display: ", ";\n    @media (min-width: ", "px) {\n        ", ";\n    }\n"], ["\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    text-align: ", ";\n    display: ", ";\n    @media (min-width: ", "px) {\n        ", ";\n    }\n"])), function (props) { return props.top && (0, _1.mt)(props.top, props.theme.spacing); }, function (props) { return props.right && (0, _1.mr)(props.right, props.theme.spacing); }, function (props) { return props.bottom && (0, _1.mb)(props.bottom, props.theme.spacing); }, function (props) { return props.left && (0, _1.ml)(props.left, props.theme.spacing); }, function (props) { return (props.center ? 'center' : 'inherit'); }, function (props) {
-    return props.visible && props.visible[0] === false ? 'none' : 'block';
+exports.StyledBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    text-align: ", ";\n    display: ", ";\n    @media (min-width: ", "px) {\n        ", ";\n    }\n"], ["\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    text-align: ", ";\n    display: ", ";\n    @media (min-width: ", "px) {\n        ", ";\n    }\n"])), function (props) { return props.$top && (0, _1.mt)(props.$top, props.theme.spacing); }, function (props) { return props.$right && (0, _1.mr)(props.$right, props.theme.spacing); }, function (props) { return props.$bottom && (0, _1.mb)(props.$bottom, props.theme.spacing); }, function (props) { return props.$left && (0, _1.ml)(props.$left, props.theme.spacing); }, function (props) { return (props.$center ? 'center' : 'inherit'); }, function (props) {
+    return props.$visible && props.$visible[0] === false ? 'none' : 'block';
 }, index_1.breakpoints.s, function (props) {
-    return props.visible && props.visible[1] === false
+    return props.$visible && props.$visible[1] === false
         ? 'display: none'
         : null;
 });

package/dist/components/Box/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/Box/styles.ts"],"names":[],"mappings":";;;;AAAA,uDAAsC;AACtC,sBAA4C;AAC5C,2CAA+C;AAElC,QAAA,SAAS,GAAG,2BAAM,CAAC,GAAG,8NAAU,QACvC,EAA0D,SAC1D,EAA8D,SAC9D,EAAgE,SAChE,EAA4D,qBAChD,EAAgD,kBACnD,EACuD,4BAC7C,EAAa,iBAC5B,EAGY,YAErB,KAbK,UAAC,KAAK,IAAK,OAAA,KAAK,CAAC,GAAG,IAAI,IAAA,KAAE,EAAC,KAAK,CAAC,GAAG,EAAE,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,EAA/C,CAA+C,EAC1D,UAAC,KAAK,IAAK,OAAA,KAAK,CAAC,KAAK,IAAI,IAAA,KAAE,EAAC,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,EAAnD,CAAmD,EAC9D,UAAC,KAAK,IAAK,OAAA,KAAK,CAAC,MAAM,IAAI,IAAA,KAAE,EAAC,KAAK,CAAC,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,EAArD,CAAqD,EAChE,UAAC,KAAK,IAAK,OAAA,KAAK,CAAC,IAAI,IAAI,IAAA,KAAE,EAAC,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,EAAjD,CAAiD,EAChD,UAAC,KAAK,IAAK,OAAA,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,EAArC,CAAqC,EACnD,UAAC,KAAK;IACb,OAAA,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;AAA9D,CAA8D,EAC7C,mBAAW,CAAC,CAAC,EAC5B,UAAC,KAAK;IACJ,OAAA,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,KAAK;QACvC,CAAC,CAAC,eAAe;QACjB,CAAC,CAAC,IAAI;AAFV,CAEU,EAErB"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/Box/styles.ts"],"names":[],"mappings":";;;;AAAA,uDAAsC;AACtC,sBAA4C;AAC5C,2CAA+C;AAQlC,QAAA,SAAS,GAAG,2BAAM,CAAC,GAAG,8NAAgB,QAC7C,EAA4D,SAC5D,EAAgE,SAChE,EAAkE,SAClE,EAA8D,qBAClD,EAAiD,kBACpD,EACyD,4BAC/C,EAAa,iBAC5B,EAGY,YAErB,KAbK,UAAC,KAAK,IAAK,OAAA,KAAK,CAAC,IAAI,IAAI,IAAA,KAAE,EAAC,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,EAAjD,CAAiD,EAC5D,UAAC,KAAK,IAAK,OAAA,KAAK,CAAC,MAAM,IAAI,IAAA,KAAE,EAAC,KAAK,CAAC,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,EAArD,CAAqD,EAChE,UAAC,KAAK,IAAK,OAAA,KAAK,CAAC,OAAO,IAAI,IAAA,KAAE,EAAC,KAAK,CAAC,OAAO,EAAE,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,EAAvD,CAAuD,EAClE,UAAC,KAAK,IAAK,OAAA,KAAK,CAAC,KAAK,IAAI,IAAA,KAAE,EAAC,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,EAAnD,CAAmD,EAClD,UAAC,KAAK,IAAK,OAAA,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,EAAtC,CAAsC,EACpD,UAAC,KAAK;IACb,OAAA,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;AAAhE,CAAgE,EAC/C,mBAAW,CAAC,CAAC,EAC5B,UAAC,KAAK;IACJ,OAAA,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,KAAK;QACzC,CAAC,CAAC,eAAe;QACjB,CAAC,CAAC,IAAI;AAFV,CAEU,EAErB"}

package/dist/components/Button/index.js

@@ -10,14 +10,14 @@ var styles_1 = require("./styles");
 var Button = function (_a) {
     var disabled = _a.disabled, loading = _a.loading, hook = _a.hook, nav = _a.nav, children = _a.children, link = _a.link, _b = _a.type, type = _b === void 0 ? 'button' : _b, _c = _a.kind, kind = _c === void 0 ? 'primary' : _c, _d = _a.size, size = _d === void 0 ? types_1.SIZE_MEDIUM : _d, rest = tslib_1.__rest(_a, ["disabled", "loading", "hook", "nav", "children", "link", "type", "kind", "size"]);
     return link ? (React.createElement(styles_1.StyledLinkButton, tslib_1.__assign({ disabled: disabled || loading, "data-hook": hook, type: type }, rest),
-        nav === 'previous' && (React.createElement(styles_1.StyledIcon, { nav: nav },
+        nav === 'previous' && (React.createElement(styles_1.StyledIcon, { "$nav": nav },
             React.createElement(ArrowLeft_1.ArrowLeft, { width: 16 }))),
         children,
-        nav === 'next' && React.createElement(ArrowRight_1.ArrowRight, { width: 16 }))) : (React.createElement(styles_1.StyledButton, tslib_1.__assign({ disabled: disabled || loading, "data-hook": hook, type: type, kind: kind, size: size }, rest), loading ? ('Aan het laden...') : (React.createElement(React.Fragment, null,
-        nav === 'previous' && (React.createElement(styles_1.StyledIcon, { nav: nav },
+        nav === 'next' && React.createElement(ArrowRight_1.ArrowRight, { width: 16 }))) : (React.createElement(styles_1.StyledButton, tslib_1.__assign({ disabled: disabled || loading, "data-hook": hook, type: type, "$kind": kind, "$size": size }, rest), loading ? ('Aan het laden...') : (React.createElement(React.Fragment, null,
+        nav === 'previous' && (React.createElement(styles_1.StyledIcon, { "$nav": nav },
             React.createElement(ArrowLeft_1.ArrowLeft, { width: 16 }))),
         children,
-        nav === 'next' && (React.createElement(styles_1.StyledIcon, { nav: nav },
+        nav === 'next' && (React.createElement(styles_1.StyledIcon, { "$nav": nav },
             React.createElement(ArrowRight_1.ArrowRight, { width: 16 })))))));
 };
 exports.Button = Button;

package/dist/components/Button/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Button/index.tsx"],"names":[],"mappings":";;;;AAAA,6BAA8B;AAC9B,0DAAwD;AACxD,4DAA0D;AAC1D,2CAAyE;AACzE,mCAAqE;AA8B9D,IAAM,MAAM,GAAG,UAAC,EAWT;IAVV,IAAA,QAAQ,cAAA,EACR,OAAO,aAAA,EACP,IAAI,UAAA,EACJ,GAAG,SAAA,EACH,QAAQ,cAAA,EACR,IAAI,UAAA,EACJ,YAAe,EAAf,IAAI,mBAAG,QAAQ,KAAA,EACf,YAAgB,EAAhB,IAAI,mBAAG,SAAS,KAAA,EAChB,YAAkB,EAAlB,IAAI,mBAAG,mBAAW,KAAA,EACf,IAAI,sBAVY,kFAWtB,CADU;IAEP,OAAO,IAAI,CAAC,CAAC,CAAC,CACV,oBAAC,yBAAgB,qBACb,QAAQ,EAAE,QAAQ,IAAI,OAAO,eAClB,IAAI,EACf,IAAI,EAAE,IAAI,IACN,IAAI;QAEP,GAAG,KAAK,UAAU,IAAI,CACnB,oBAAC,mBAAU,IAAC,GAAG,EAAE,GAAG;YAChB,oBAAC,qBAAS,IAAC,KAAK,EAAE,EAAE,GAAI,CACf,CAChB;QACA,QAAQ;QACR,GAAG,KAAK,MAAM,IAAI,oBAAC,uBAAU,IAAC,KAAK,EAAE,EAAE,GAAI,CAC7B,CACtB,CAAC,CAAC,CAAC,CACA,oBAAC,qBAAY,qBACT,QAAQ,EAAE,QAAQ,IAAI,OAAO,eAClB,IAAI,EACf,IAAI,EAAE,IAAI,EACV,IAAI,EAAE,IAAI,EACV,IAAI,EAAE,IAAI,IACN,IAAI,GAEP,OAAO,CAAC,CAAC,CAAC,CACP,kBAAkB,CACrB,CAAC,CAAC,CAAC,CACA;QACK,GAAG,KAAK,UAAU,IAAI,CACnB,oBAAC,mBAAU,IAAC,GAAG,EAAE,GAAG;YAChB,oBAAC,qBAAS,IAAC,KAAK,EAAE,EAAE,GAAI,CACf,CAChB;QACA,QAAQ;QACR,GAAG,KAAK,MAAM,IAAI,CACf,oBAAC,mBAAU,IAAC,GAAG,EAAE,GAAG;YAChB,oBAAC,uBAAU,IAAC,KAAK,EAAE,EAAE,GAAI,CAChB,CAChB,CACF,CACN,CACU,CAClB,CAAA;AACL,CAAC,CAAA;AAvDY,QAAA,MAAM,UAuDlB"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Button/index.tsx"],"names":[],"mappings":";;;;AAAA,6BAA8B;AAC9B,0DAAwD;AACxD,4DAA0D;AAC1D,2CAAyE;AACzE,mCAAqE;AA8B9D,IAAM,MAAM,GAAG,UAAC,EAWT;IAVV,IAAA,QAAQ,cAAA,EACR,OAAO,aAAA,EACP,IAAI,UAAA,EACJ,GAAG,SAAA,EACH,QAAQ,cAAA,EACR,IAAI,UAAA,EACJ,YAAe,EAAf,IAAI,mBAAG,QAAQ,KAAA,EACf,YAAgB,EAAhB,IAAI,mBAAG,SAAS,KAAA,EAChB,YAAkB,EAAlB,IAAI,mBAAG,mBAAW,KAAA,EACf,IAAI,sBAVY,kFAWtB,CADU;IAEP,OAAO,IAAI,CAAC,CAAC,CAAC,CACV,oBAAC,yBAAgB,qBACb,QAAQ,EAAE,QAAQ,IAAI,OAAO,eAClB,IAAI,EACf,IAAI,EAAE,IAAI,IACN,IAAI;QAEP,GAAG,KAAK,UAAU,IAAI,CACnB,oBAAC,mBAAU,YAAO,GAAG;YACjB,oBAAC,qBAAS,IAAC,KAAK,EAAE,EAAE,GAAI,CACf,CAChB;QACA,QAAQ;QACR,GAAG,KAAK,MAAM,IAAI,oBAAC,uBAAU,IAAC,KAAK,EAAE,EAAE,GAAI,CAC7B,CACtB,CAAC,CAAC,CAAC,CACA,oBAAC,qBAAY,qBACT,QAAQ,EAAE,QAAQ,IAAI,OAAO,eAClB,IAAI,EACf,IAAI,EAAE,IAAI,WACH,IAAI,WACJ,IAAI,IACP,IAAI,GAEP,OAAO,CAAC,CAAC,CAAC,CACP,kBAAkB,CACrB,CAAC,CAAC,CAAC,CACA;QACK,GAAG,KAAK,UAAU,IAAI,CACnB,oBAAC,mBAAU,YAAO,GAAG;YACjB,oBAAC,qBAAS,IAAC,KAAK,EAAE,EAAE,GAAI,CACf,CAChB;QACA,QAAQ;QACR,GAAG,KAAK,MAAM,IAAI,CACf,oBAAC,mBAAU,YAAO,GAAG;YACjB,oBAAC,uBAAU,IAAC,KAAK,EAAE,EAAE,GAAI,CAChB,CAChB,CACF,CACN,CACU,CAClB,CAAA;AACL,CAAC,CAAA;AAvDY,QAAA,MAAM,UAuDlB"}

package/dist/components/Button/styles.d.ts

@@ -1,8 +1,11 @@
 /// <reference types="react" />
 import { ButtonProps } from '.';
-import { LinkProps } from '../Link';
-export declare const StyledButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, ButtonProps>> & string;
-export declare const StyledLinkButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, Pick<LinkProps, "secondary" | "textDecoration">>> & string;
+import { StyledLinkProps } from '../Link/styles';
+import { PrefixedPick } from '../../types/styled-components';
+type StyledButtonProps = PrefixedPick<ButtonProps, 'kind' | 'size'>;
+export declare const StyledButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, StyledButtonProps>> & string;
+export declare const StyledLinkButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, StyledLinkProps>> & string;
 export declare const StyledIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    nav: 'previous' | 'next';
+    $nav: 'previous' | 'next';
 }>> & string;
+export {};

package/dist/components/Button/styles.js

@@ -6,42 +6,42 @@ var styled_components_1 = require("styled-components");
 var styled_map_1 = require("styled-map");
 var index_1 = require("../../theme/index");
 var styles_1 = require("../Link/styles");
-exports.StyledButton = styled_components_1.default.button(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n    appearance: none;\n    background: none;\n    border: none;\n    position: relative;\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    width: ", ";\n    padding: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    font-weight: ", ";\n    white-space: nowrap;\n    line-height: ", ";\n    box-shadow: ", ";\n    background: ", ";\n    border-radius: ", "px;\n    color: ", ";\n    opacity: ", ";\n    cursor: ", ";\n    &:hover,\n    &:focus {\n        outline: none;\n        background: ", ";\n        border-color: ", ";\n        color: ", ";\n    }\n    @media (min-width: ", "px) {\n        width: auto;\n        padding: ", ";\n    }\n"], ["\n    appearance: none;\n    background: none;\n    border: none;\n    position: relative;\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    width: ", ";\n    padding: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    font-weight: ", ";\n    white-space: nowrap;\n    line-height: ", ";\n    box-shadow: ", ";\n    background: ", ";\n    border-radius: ", "px;\n    color: ", ";\n    opacity: ", ";\n    cursor: ", ";\n    &:hover,\n    &:focus {\n        outline: none;\n        background: ", ";\n        border-color: ", ";\n        color: ", ";\n    }\n    @media (min-width: ", "px) {\n        width: auto;\n        padding: ", ";\n    }\n"])), (0, styled_map_1.default)('kind', {
+exports.StyledButton = styled_components_1.default.button(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n    appearance: none;\n    background: none;\n    border: none;\n    position: relative;\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    width: ", ";\n    padding: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    font-weight: ", ";\n    white-space: nowrap;\n    line-height: ", ";\n    box-shadow: ", ";\n    background: ", ";\n    border-radius: ", "px;\n    color: ", ";\n    opacity: ", ";\n    cursor: ", ";\n    &:hover,\n    &:focus {\n        outline: none;\n        background: ", ";\n        border-color: ", ";\n        color: ", ";\n    }\n    @media (min-width: ", "px) {\n        width: auto;\n        padding: ", ";\n    }\n"], ["\n    appearance: none;\n    background: none;\n    border: none;\n    position: relative;\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    width: ", ";\n    padding: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    font-weight: ", ";\n    white-space: nowrap;\n    line-height: ", ";\n    box-shadow: ", ";\n    background: ", ";\n    border-radius: ", "px;\n    color: ", ";\n    opacity: ", ";\n    cursor: ", ";\n    &:hover,\n    &:focus {\n        outline: none;\n        background: ", ";\n        border-color: ", ";\n        color: ", ";\n    }\n    @media (min-width: ", "px) {\n        width: auto;\n        padding: ", ";\n    }\n"])), (0, styled_map_1.default)('$kind', {
     primary: '100%',
     secondary: '100%',
     tertiary: '100%',
     ghost: 'auto',
 }), function (props) {
-    return (0, styled_map_1.default)('size', {
-        small: props.kind === 'none' ? 0 : "0 ".concat(props.theme.spacing[1], "px;"),
-        medium: props.kind === 'none' ? 0 : "0 ".concat(props.theme.spacing[2], "px;"),
-        large: props.kind === 'none' ? 0 : "0 ".concat(props.theme.spacing[3], "px;"),
+    return (0, styled_map_1.default)('$size', {
+        small: props.$kind === 'none' ? 0 : "0 ".concat(props.theme.spacing[1], "px;"),
+        medium: props.$kind === 'none' ? 0 : "0 ".concat(props.theme.spacing[2], "px;"),
+        large: props.$kind === 'none' ? 0 : "0 ".concat(props.theme.spacing[3], "px;"),
     });
 }, function (props) { return props.theme.font.default; }, function (props) {
-    return (0, styled_map_1.default)('size', {
+    return (0, styled_map_1.default)('$size', {
         small: props.theme.font.sizes.s,
         medium: props.theme.font.sizes.s,
         large: props.theme.font.sizes.m,
     });
-}, (0, styled_map_1.default)('size', {
+}, (0, styled_map_1.default)('$size', {
     small: 500,
     medium: 500,
     large: 500,
 }), function (props) {
-    return (0, styled_map_1.default)('size', {
+    return (0, styled_map_1.default)('$size', {
         small: "".concat(props.theme.spacing[4], "px"),
         medium: "".concat(props.theme.spacing[5], "px"),
         large: "".concat(props.theme.spacing[6], "px"),
     });
 }, function (props) {
     return props.disabled
-        ? (0, styled_map_1.default)('kind', {
+        ? (0, styled_map_1.default)('$kind', {
             primary: props.theme.colors.grey[200],
             secondary: props.theme.colors.grey[200],
             tertiary: props.theme.colors.grey[200],
             ghost: 'none',
         })
-        : (0, styled_map_1.default)('kind', {
+        : (0, styled_map_1.default)('$kind', {
             primary: '0 2px 4px rgba(45, 54, 66, 0.07), 0 1px 2px rgba(45, 54, 66, 0.07);',
             secondary: '0 2px 4px rgba(45, 54, 66, 0.07), 0 1px 2px rgba(45, 54, 66, 0.07);',
             tertiary: "inset 0 0 0 1px ".concat(props.theme.colors.primary, ";"),
@@ -49,13 +49,13 @@ exports.StyledButton = styled_components_1.default.button(templateObject_1 || (t
         });
 }, function (props) {
     return props.disabled
-        ? (0, styled_map_1.default)('kind', {
+        ? (0, styled_map_1.default)('$kind', {
             primary: props.theme.colors.grey[200],
             secondary: props.theme.colors.grey[200],
             tertiary: props.theme.colors.grey[200],
             ghost: 'transparent',
         })
-        : (0, styled_map_1.default)('kind', {
+        : (0, styled_map_1.default)('$kind', {
             primary: props.theme.colors.buttons.primary,
             secondary: props.theme.colors.buttons.secondary,
             tertiary: props.theme.colors.buttons.tertiary,
@@ -64,7 +64,7 @@ exports.StyledButton = styled_components_1.default.button(templateObject_1 || (t
 }, function (props) { return props.theme.borderRadius.button; }, function (props) {
     return props.disabled
         ? props.theme.colors.grey[300]
-        : (0, styled_map_1.default)('kind', {
+        : (0, styled_map_1.default)('$kind', {
             primary: 'white',
             secondary: 'white',
             tertiary: props.theme.colors.primary,
@@ -78,13 +78,13 @@ exports.StyledButton = styled_components_1.default.button(templateObject_1 || (t
     default: 'pointer',
 }), function (props) {
     return props.disabled
-        ? (0, styled_map_1.default)('kind', {
+        ? (0, styled_map_1.default)('$kind', {
             primary: props.theme.colors.grey[200],
             secondary: props.theme.colors.grey[200],
             tertiary: 'transparent',
             ghost: 'transparent',
         })
-        : (0, styled_map_1.default)('kind', {
+        : (0, styled_map_1.default)('$kind', {
             primary: props.theme.colors.buttons.primaryHover,
             secondary: props.theme.colors.buttons.secondaryHover,
             tertiary: props.theme.colors.buttons.tertiaryHover,
@@ -93,7 +93,7 @@ exports.StyledButton = styled_components_1.default.button(templateObject_1 || (t
 }, function (props) {
     return props.disabled
         ? props.theme.colors.grey[200]
-        : (0, styled_map_1.default)('kind', {
+        : (0, styled_map_1.default)('$kind', {
             primary: props.theme.colors.buttons.primaryHover,
             secondary: props.theme.colors.buttons.secondaryHover,
             tertiary: props.theme.colors.primary,
@@ -102,30 +102,30 @@ exports.StyledButton = styled_components_1.default.button(templateObject_1 || (t
 }, function (props) {
     return props.disabled
         ? props.theme.colors.grey[300]
-        : (0, styled_map_1.default)('kind', {
+        : (0, styled_map_1.default)('$kind', {
             primary: 'white',
             secondary: 'white',
             tertiary: props.theme.colors.primary,
             ghost: props.theme.colors.grey[600],
         });
 }, index_1.breakpoints.s, function (props) {
-    return (0, styled_map_1.default)('size', {
-        small: props.kind === 'none'
+    return (0, styled_map_1.default)('$size', {
+        small: props.$kind === 'none'
             ? 0
             : "0 ".concat(props.theme.spacing[1], "px;"),
-        medium: props.kind === 'none'
+        medium: props.$kind === 'none'
             ? 0
             : "0 ".concat(props.theme.spacing[2], "px;"),
-        large: props.kind === 'none'
+        large: props.$kind === 'none'
             ? 0
             : "0 ".concat(props.theme.spacing[3], "px;"),
     });
 });
 exports.StyledLinkButton = styled_components_1.default.button(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n    ", "\n    border: none\n    background: none\n    padding: 0\n    &:hover {\n        color: ", ";\n    }\n"], ["\n    ", "\n    border: none\n    background: none\n    padding: 0\n    &:hover {\n        color: ", ";\n    }\n"])), styles_1.linkStyles, function (props) {
-    return props.secondary
+    return props.$secondary
         ? props.theme.colors.grey[600]
         : props.theme.colors.links.hover;
 });
-exports.StyledIcon = styled_components_1.default.div(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject(["\n    ", "\n    ", "\n    ", "\n    ", "\n    svg {\n        position: relative;\n        top: 4px;\n    }\n"], ["\n    ", "\n    ", "\n    ", "\n    ", "\n    svg {\n        position: relative;\n        top: 4px;\n    }\n"])), function (props) { return (props.nav === 'previous' ? 'left: 16px' : 0); }, function (props) { return (props.nav === 'next' ? 'right: 16px' : 0); }, function (props) { return (props.nav === 'previous' ? 'margin-right: 8px' : 0); }, function (props) { return (props.nav === 'next' ? 'margin-left: 8px' : 0); });
+exports.StyledIcon = styled_components_1.default.div(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject(["\n    ", "\n    ", "\n    ", "\n    ", "\n    svg {\n        position: relative;\n        top: 4px;\n    }\n"], ["\n    ", "\n    ", "\n    ", "\n    ", "\n    svg {\n        position: relative;\n        top: 4px;\n    }\n"])), function (props) { return (props.$nav === 'previous' ? 'left: 16px' : 0); }, function (props) { return (props.$nav === 'next' ? 'right: 16px' : 0); }, function (props) { return (props.$nav === 'previous' ? 'margin-right: 8px' : 0); }, function (props) { return (props.$nav === 'next' ? 'margin-left: 8px' : 0); });
 var templateObject_1, templateObject_2, templateObject_3;
 //# sourceMappingURL=styles.js.map

package/dist/components/Button/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/Button/styles.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/Button/styles.ts"],"names":[],"mappings":";;;;AAAA,uDAAsC;AACtC,yCAAkC;AAElC,2CAA+C;AAC/C,yCAA4D;AAK/C,QAAA,YAAY,GAAG,2BAAM,CAAC,MAAM,8vBAAmB,4LAQ/C,EAKP,kBACS,EAQL,sBACS,EAAmC,oBACrC,EAKP,sBACS,EAIb,gDAEa,EAKT,qBACQ,EAeF,qBACE,EAaF,wBACK,EAA0C,kBAClD,EAQG,kBACD,EAGT,iBACQ,EAGR,8EAIgB,EAaF,2BACI,EAQJ,oBACH,EAQG,mCAEK,EAAa,gDAEnB,EAcL,YAEb,KAxIY,IAAA,oBAAS,EAAC,OAAO,EAAE;IACxB,OAAO,EAAE,MAAM;IACf,SAAS,EAAE,MAAM;IACjB,QAAQ,EAAE,MAAM;IAChB,KAAK,EAAE,MAAM;CAChB,CAAC,EACS,UAAC,KAAK;IACb,OAAA,IAAA,oBAAS,EAAC,OAAO,EAAE;QACf,KAAK,EACD,KAAK,CAAC,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,YAAK,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,QAAK;QACjE,MAAM,EACF,KAAK,CAAC,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,YAAK,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,QAAK;QACjE,KAAK,EACD,KAAK,CAAC,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,YAAK,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,QAAK;KACpE,CAAC;AAPF,CAOE,EACS,UAAC,KAAK,IAAK,OAAA,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,EAAxB,CAAwB,EACrC,UAAC,KAAK;IACf,OAAA,IAAA,oBAAS,EAAC,OAAO,EAAE;QACf,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC/B,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAChC,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAClC,CAAC;AAJF,CAIE,EACS,IAAA,oBAAS,EAAC,OAAO,EAAE;IAC9B,KAAK,EAAE,GAAG;IACV,MAAM,EAAE,GAAG;IACX,KAAK,EAAE,GAAG;CACb,CAAC,EAEa,UAAC,KAAK;IACjB,OAAA,IAAA,oBAAS,EAAC,OAAO,EAAE;QACf,KAAK,EAAE,UAAG,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,OAAI;QACpC,MAAM,EAAE,UAAG,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,OAAI;QACrC,KAAK,EAAE,UAAG,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,OAAI;KACvC,CAAC;AAJF,CAIE,EACQ,UAAC,KAAK;IAChB,OAAA,KAAK,CAAC,QAAQ;QACV,CAAC,CAAC,IAAA,oBAAS,EAAC,OAAO,EAAE;YACf,OAAO,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC;YACrC,SAAS,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC;YACvC,QAAQ,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC;YACtC,KAAK,EAAE,MAAM;SAChB,CAAC;QACJ,CAAC,CAAC,IAAA,oBAAS,EAAC,OAAO,EAAE;YACf,OAAO,EACH,qEAAqE;YACzE,SAAS,EACL,qEAAqE;YACzE,QAAQ,EAAE,0BAAmB,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,MAAG;YAC1D,KAAK,EAAE,MAAM;SAChB,CAAC;AAdR,CAcQ,EACE,UAAC,KAAK;IAChB,OAAA,KAAK,CAAC,QAAQ;QACV,CAAC,CAAC,IAAA,oBAAS,EAAC,OAAO,EAAE;YACf,OAAO,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC;YACrC,SAAS,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC;YACvC,QAAQ,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC;YACtC,KAAK,EAAE,aAAa;SACvB,CAAC;QACJ,CAAC,CAAC,IAAA,oBAAS,EAAC,OAAO,EAAE;YACf,OAAO,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,OAAO;YAC3C,SAAS,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,SAAS;YAC/C,QAAQ,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,QAAQ;YAC7C,KAAK,EAAE,aAAa;SACvB,CAAC;AAZR,CAYQ,EACK,UAAC,KAAK,IAAK,OAAA,KAAK,CAAC,KAAK,CAAC,YAAY,CAAC,MAAM,EAA/B,CAA+B,EAClD,UAAC,KAAK;IACX,OAAA,KAAK,CAAC,QAAQ;QACV,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC;QAC9B,CAAC,CAAC,IAAA,oBAAS,EAAC,OAAO,EAAE;YACf,OAAO,EAAE,OAAO;YAChB,SAAS,EAAE,OAAO;YAClB,QAAQ,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO;YACpC,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC;SACtC,CAAC;AAPR,CAOQ,EACD,IAAA,oBAAS,EAAC;IACjB,QAAQ,EAAE,GAAG;IACb,OAAO,EAAE,CAAC;CACb,CAAC,EACQ,IAAA,oBAAS,EAAC;IAChB,QAAQ,EAAE,aAAa;IACvB,OAAO,EAAE,SAAS;CACrB,CAAC,EAIgB,UAAC,KAAK;IAChB,OAAA,KAAK,CAAC,QAAQ;QACV,CAAC,CAAC,IAAA,oBAAS,EAAC,OAAO,EAAE;YACf,OAAO,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC;YACrC,SAAS,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC;YACvC,QAAQ,EAAE,aAAa;YACvB,KAAK,EAAE,aAAa;SACvB,CAAC;QACJ,CAAC,CAAC,IAAA,oBAAS,EAAC,OAAO,EAAE;YACf,OAAO,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,YAAY;YAChD,SAAS,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,cAAc;YACpD,QAAQ,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,aAAa;YAClD,KAAK,EAAE,aAAa;SACvB,CAAC;AAZR,CAYQ,EACI,UAAC,KAAK;IAClB,OAAA,KAAK,CAAC,QAAQ;QACV,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC;QAC9B,CAAC,CAAC,IAAA,oBAAS,EAAC,OAAO,EAAE;YACf,OAAO,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,YAAY;YAChD,SAAS,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,cAAc;YACpD,QAAQ,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO;YACpC,KAAK,EAAE,aAAa;SACvB,CAAC;AAPR,CAOQ,EACH,UAAC,KAAK;IACX,OAAA,KAAK,CAAC,QAAQ;QACV,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC;QAC9B,CAAC,CAAC,IAAA,oBAAS,EAAC,OAAO,EAAE;YACf,OAAO,EAAE,OAAO;YAChB,SAAS,EAAE,OAAO;YAClB,QAAQ,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO;YACpC,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC;SACtC,CAAC;AAPR,CAOQ,EAEK,mBAAW,CAAC,CAAC,EAEnB,UAAC,KAAK;IACb,OAAA,IAAA,oBAAS,EAAC,OAAO,EAAE;QACf,KAAK,EACD,KAAK,CAAC,KAAK,KAAK,MAAM;YAClB,CAAC,CAAC,CAAC;YACH,CAAC,CAAC,YAAK,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,QAAK;QAC1C,MAAM,EACF,KAAK,CAAC,KAAK,KAAK,MAAM;YAClB,CAAC,CAAC,CAAC;YACH,CAAC,CAAC,YAAK,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,QAAK;QAC1C,KAAK,EACD,KAAK,CAAC,KAAK,KAAK,MAAM;YAClB,CAAC,CAAC,CAAC;YACH,CAAC,CAAC,YAAK,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,QAAK;KAC7C,CAAC;AAbF,CAaE,EAEb;AAEY,QAAA,gBAAgB,GAAG,2BAAM,CAAC,MAAM,6LAAiB,QACxD,EAAU,0FAKC,EAG+B,YAE/C,KAVK,mBAAU,EAKC,UAAC,KAAK;IACX,OAAA,KAAK,CAAC,UAAU;QACZ,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC;QAC9B,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK;AAFpC,CAEoC,EAE/C;AAEY,QAAA,UAAU,GAAG,2BAAM,CAAC,GAAG,yLAA+B,QAC7D,EAAyD,QACzD,EAAsD,QACtD,EAAgE,QAChE,EAA2D,sEAKhE,KARK,UAAC,KAAK,IAAK,OAAA,CAAC,KAAK,CAAC,IAAI,KAAK,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,EAA9C,CAA8C,EACzD,UAAC,KAAK,IAAK,OAAA,CAAC,KAAK,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,EAA3C,CAA2C,EACtD,UAAC,KAAK,IAAK,OAAA,CAAC,KAAK,CAAC,IAAI,KAAK,UAAU,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC,CAAC,EAArD,CAAqD,EAChE,UAAC,KAAK,IAAK,OAAA,CAAC,KAAK,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,CAAC,EAAhD,CAAgD,EAKhE"}

package/dist/components/ButtonGroup/index.js

@@ -5,7 +5,7 @@ var React = require("react");
 var styles_1 = require("./styles");
 var ButtonGroup = function (_a) {
     var direction = _a.direction, children = _a.children;
-    return (React.createElement(styles_1.StyledButtonGroup, { direction: direction }, children));
+    return (React.createElement(styles_1.StyledButtonGroup, { "$direction": direction }, children));
 };
 exports.ButtonGroup = ButtonGroup;
 //# sourceMappingURL=index.js.map

package/dist/components/ButtonGroup/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ButtonGroup/index.tsx"],"names":[],"mappings":";;;AAAA,6BAA8B;AAC9B,mCAA4C;AAOrC,IAAM,WAAW,GAAG,UAAC,EAGT;QAFf,SAAS,eAAA,EACT,QAAQ,cAAA;IAER,OAAO,CACH,oBAAC,0BAAiB,IAAC,SAAS,EAAE,SAAS,IAAG,QAAQ,CAAqB,CAC1E,CAAA;AACL,CAAC,CAAA;AAPY,QAAA,WAAW,eAOvB"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ButtonGroup/index.tsx"],"names":[],"mappings":";;;AAAA,6BAA8B;AAC9B,mCAA4C;AAOrC,IAAM,WAAW,GAAG,UAAC,EAGT;QAFf,SAAS,eAAA,EACT,QAAQ,cAAA;IAER,OAAO,CACH,oBAAC,0BAAiB,kBAAa,SAAS,IAAG,QAAQ,CAAqB,CAC3E,CAAA;AACL,CAAC,CAAA;AAPY,QAAA,WAAW,eAOvB"}

package/dist/components/ButtonGroup/styles.d.ts

@@ -1,3 +1,6 @@
 /// <reference types="react" />
 import { ButtonGroupProps } from '.';
-export declare const StyledButtonGroup: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ButtonGroupProps>> & string;
+import { PrefixedPick } from '../../types/styled-components';
+type StyledButtonGroupProps = PrefixedPick<ButtonGroupProps, 'direction'>;
+export declare const StyledButtonGroup: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledButtonGroupProps>> & string;
+export {};

package/dist/components/ButtonGroup/styles.js

@@ -5,15 +5,15 @@ var tslib_1 = require("tslib");
 var styled_components_1 = require("styled-components");
 var theme_1 = require("../../theme");
 exports.StyledButtonGroup = styled_components_1.default.div(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n    display: flex;\n    flex-direction: ", ";\n\n    button + button {\n        ", ";\n    }\n\n    @media (min-width: ", "px) {\n        button + button {\n            margin-top: ", "px;\n            margin-left: ", "px;\n        }\n        align-items: flex-start;\n    }\n"], ["\n    display: flex;\n    flex-direction: ", ";\n\n    button + button {\n        ", ";\n    }\n\n    @media (min-width: ", "px) {\n        button + button {\n            margin-top: ", "px;\n            margin-left: ", "px;\n        }\n        align-items: flex-start;\n    }\n"])), function (props) {
-    return props.direction === 'column' ? 'column' : 'row';
+    return props.$direction === 'column' ? 'column' : 'row';
 }, function (props) {
-    return props.direction === 'column'
+    return props.$direction === 'column'
         ? "margin-top: ".concat(props.theme.baseline, "px")
         : "margin-left: ".concat(props.theme.baseline, "px");
 }, theme_1.breakpoints.xs, function (props) {
-    return props.direction === 'column' ? props.theme.baseline : 0;
+    return props.$direction === 'column' ? props.theme.baseline : 0;
 }, function (props) {
-    return props.direction === 'row' ? props.theme.baseline : 0;
+    return props.$direction === 'row' ? props.theme.baseline : 0;
 });
 var templateObject_1;
 //# sourceMappingURL=styles.js.map

package/dist/components/ButtonGroup/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/ButtonGroup/styles.ts"],"names":[],"mappings":";;;;AAAA,uDAAsC;AAEtC,qCAAyC;AAE5B,QAAA,iBAAiB,GAAG,2BAAM,CAAC,GAAG,mWAAkB,4CAEvC,EACiC,sCAG7C,EAGgD,qCAGjC,EAAc,4DAEb,EAC6C,gCAC5C,EACyC,2DAInE,KAnBqB,UAAC,KAAK;IACpB,OAAA,KAAK,CAAC,SAAS,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK;AAA/C,CAA+C,EAG7C,UAAC,KAAK;IACJ,OAAA,KAAK,CAAC,SAAS,KAAK,QAAQ;QACxB,CAAC,CAAC,sBAAe,KAAK,CAAC,KAAK,CAAC,QAAQ,OAAI;QACzC,CAAC,CAAC,uBAAgB,KAAK,CAAC,KAAK,CAAC,QAAQ,OAAI;AAF9C,CAE8C,EAGjC,mBAAW,CAAC,EAAE,EAEb,UAAC,KAAK;IAChB,OAAA,KAAK,CAAC,SAAS,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;AAAvD,CAAuD,EAC5C,UAAC,KAAK;IACjB,OAAA,KAAK,CAAC,SAAS,KAAK,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;AAApD,CAAoD,EAInE"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/ButtonGroup/styles.ts"],"names":[],"mappings":";;;;AAAA,uDAAsC;AAEtC,qCAAyC;AAK5B,QAAA,iBAAiB,GAAG,2BAAM,CAAC,GAAG,mWAAwB,4CAE7C,EACkC,sCAG9C,EAGgD,qCAGjC,EAAc,4DAEb,EAC8C,gCAC7C,EAC0C,2DAIpE,KAnBqB,UAAC,KAAK;IACpB,OAAA,KAAK,CAAC,UAAU,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK;AAAhD,CAAgD,EAG9C,UAAC,KAAK;IACJ,OAAA,KAAK,CAAC,UAAU,KAAK,QAAQ;QACzB,CAAC,CAAC,sBAAe,KAAK,CAAC,KAAK,CAAC,QAAQ,OAAI;QACzC,CAAC,CAAC,uBAAgB,KAAK,CAAC,KAAK,CAAC,QAAQ,OAAI;AAF9C,CAE8C,EAGjC,mBAAW,CAAC,EAAE,EAEb,UAAC,KAAK;IAChB,OAAA,KAAK,CAAC,UAAU,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;AAAxD,CAAwD,EAC7C,UAAC,KAAK;IACjB,OAAA,KAAK,CAAC,UAAU,KAAK,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;AAArD,CAAqD,EAIpE"}

package/dist/components/Card/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Spacing, TextAlignType } from '../../theme/types';
 import { BoxProps } from '../Box';
 export type CardProps = {
@@ -9,4 +10,4 @@ export type CardProps = {
     textAlign?: TextAlignType;
     overflow?: 'visible' | 'hidden' | 'scroll' | 'auto';
 } & BoxProps;
-export declare const Card: ({ hook, top, right, bottom, left, children, background, shadow, radius, px, py, ...rest }: CardProps) => JSX.Element;
+export declare const Card: ({ hook, top, right, bottom, left, children, background, shadow, radius, px, py, overflow, textAlign, ...rest }: CardProps) => JSX.Element;

package/dist/components/Card/index.js

@@ -6,9 +6,9 @@ var React = require("react");
 var Box_1 = require("../Box");
 var styles_1 = require("./styles");
 var Card = function (_a) {
-    var hook = _a.hook, top = _a.top, right = _a.right, bottom = _a.bottom, left = _a.left, children = _a.children, _b = _a.background, background = _b === void 0 ? 'white' : _b, shadow = _a.shadow, _c = _a.radius, radius = _c === void 0 ? 's' : _c, _d = _a.px, px = _d === void 0 ? 2 : _d, _e = _a.py, py = _e === void 0 ? 2 : _e, rest = tslib_1.__rest(_a, ["hook", "top", "right", "bottom", "left", "children", "background", "shadow", "radius", "px", "py"]);
+    var hook = _a.hook, top = _a.top, right = _a.right, bottom = _a.bottom, left = _a.left, children = _a.children, _b = _a.background, background = _b === void 0 ? 'white' : _b, shadow = _a.shadow, _c = _a.radius, radius = _c === void 0 ? 's' : _c, _d = _a.px, px = _d === void 0 ? 2 : _d, _e = _a.py, py = _e === void 0 ? 2 : _e, overflow = _a.overflow, textAlign = _a.textAlign, rest = tslib_1.__rest(_a, ["hook", "top", "right", "bottom", "left", "children", "background", "shadow", "radius", "px", "py", "overflow", "textAlign"]);
     return (React.createElement(Box_1.Box, { "data-hook": hook, top: top, right: right, bottom: bottom, left: left },
-        React.createElement(styles_1.StyledCard, tslib_1.__assign({ background: background, shadow: shadow, radius: radius, px: px, py: py }, rest), children)));
+        React.createElement(styles_1.StyledCard, tslib_1.__assign({ "$background": background, "$shadow": shadow, "$radius": radius, "$px": px, "$py": py, "$overflow": overflow, "$textAlign": textAlign }, rest), children)));
 };
 exports.Card = Card;
 //# sourceMappingURL=index.js.map

package/dist/components/Card/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Card/index.tsx"],"names":[],"mappings":";;;;AAAA,6BAA8B;AAE9B,8BAAsC;AACtC,mCAAqC;AAY9B,IAAM,IAAI,GAAG,UAAC,EAaT;IAZR,IAAA,IAAI,UAAA,EACJ,GAAG,SAAA,EACH,KAAK,WAAA,EACL,MAAM,YAAA,EACN,IAAI,UAAA,EACJ,QAAQ,cAAA,EACR,kBAAoB,EAApB,UAAU,mBAAG,OAAO,KAAA,EACpB,MAAM,YAAA,EACN,cAAY,EAAZ,MAAM,mBAAG,GAAG,KAAA,EACZ,UAAM,EAAN,EAAE,mBAAG,CAAC,KAAA,EACN,UAAM,EAAN,EAAE,mBAAG,CAAC,KAAA,EACH,IAAI,sBAZU,oGAapB,CADU;IAEP,OAAO,CACH,oBAAC,SAAG,iBACW,IAAI,EACf,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,IAAI;QAEV,oBAAC,mBAAU,qBACP,UAAU,EAAE,UAAU,EACtB,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,MAAM,EACd,EAAE,EAAE,EAAE,EACN,EAAE,EAAE,EAAE,IACF,IAAI,GAEP,QAAQ,CACA,CACX,CACT,CAAA;AACL,CAAC,CAAA;AAlCY,QAAA,IAAI,QAkChB"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Card/index.tsx"],"names":[],"mappings":";;;;AAAA,6BAA8B;AAE9B,8BAAsC;AACtC,mCAAqC;AAY9B,IAAM,IAAI,GAAG,UAAC,EAeT;IAdR,IAAA,IAAI,UAAA,EACJ,GAAG,SAAA,EACH,KAAK,WAAA,EACL,MAAM,YAAA,EACN,IAAI,UAAA,EACJ,QAAQ,cAAA,EACR,kBAAoB,EAApB,UAAU,mBAAG,OAAO,KAAA,EACpB,MAAM,YAAA,EACN,cAAY,EAAZ,MAAM,mBAAG,GAAG,KAAA,EACZ,UAAM,EAAN,EAAE,mBAAG,CAAC,KAAA,EACN,UAAM,EAAN,EAAE,mBAAG,CAAC,KAAA,EACN,QAAQ,cAAA,EACR,SAAS,eAAA,EACN,IAAI,sBAdU,6HAepB,CADU;IAEP,OAAO,CACH,oBAAC,SAAG,iBACW,IAAI,EACf,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,IAAI;QAEV,oBAAC,mBAAU,oCACM,UAAU,aACd,MAAM,aACN,MAAM,SACV,EAAE,SACF,EAAE,eACI,QAAQ,gBACP,SAAS,IACjB,IAAI,GAEP,QAAQ,CACA,CACX,CACT,CAAA;AACL,CAAC,CAAA;AAtCY,QAAA,IAAI,QAsChB"}

package/dist/components/Card/styles.d.ts

@@ -1,3 +1,6 @@
 /// <reference types="react" />
 import { CardProps } from '.';
-export declare const StyledCard: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, CardProps>> & string;
+import { PrefixedPick } from '../../types/styled-components';
+type StyledCardProps = PrefixedPick<CardProps, 'background' | 'px' | 'py' | 'radius' | 'shadow' | 'radius' | 'overflow' | 'textAlign'>;
+export declare const StyledCard: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledCardProps>> & string;
+export {};