@mrshmllw/smores-react 6.2.1 → 7.0.0-crumbs-sc-v6.1

package/README.md

@@ -41,19 +41,33 @@ So to ensure our CHANGELOG.md is updated automatically and gets the changes we h
 #### Preview
 Before releasing, you may want to see the changes that will be included in the next version deployed on NPM, you can do so by:
 
-1. Checkout `main` and pull
-2. Run `npm run preview-release`, this will show both the updated CHANGELOG.md & the next version.
+1. Goto our [github workflows](https://github.com/marshmallow-insurance/smores-react/actions)
+2. Click `Preview Bump and Publish`
+3. Press `Run workflow` and select the `main` branch.
+4. Wait for the `Generate preview CHANGELOG.md` and look at the results!
 
 #### Releasing & Publishing
 When you're happy with your changes, you can release & publish your changes to NPM in one fell swoop by:
 
-1. Goto the [smores-repo](https://github.com/marshmallow-insurance/smores-react) and make sure you are on the `main` branch.
-2. Click `Actions`
-3. Click `Bump and Publish` and press `Run workflow`
-4. Wait for this to finish! 
+1. Goto our [github workflows](https://github.com/marshmallow-insurance/smores-react/actions)
+2. Click `Bump and Publish`
+3. Press `Run workflow` and select the `main` branch.
+4. Wait for release!
 
 Note: this workflow will fail if the package version is already on the latest, so you dont have to worry about deploying the same changes multiple times.
 
+#### Pre-Releases
+Not too different to your usual workflow!
+
+1. Checkout a new branch with the prefix `crumbs-<your-branch-name>`
+2. Open a PR and create your changes as normal using semantic-commits!
+3. Goto our [github workflows](https://github.com/marshmallow-insurance/smores-react/actions)
+4. Click `Bump and Publish` or `Preview Bump and Publish`
+5. Press `Run workflow` and select `crumbs-<your-branch-name>` branch.
+6. Wait for release!
+7. This can be done multiple times and it will increment your pre-release package version!
+8. When you're happy with the changes, simply squash and merge the PR and release `main`!
+
 ###### Tokens
 
 The `MARSHMALLOW_CI_PAT` has been created from the internal @marshmallow-ci GH account, it is due to expire on `27th November 2024` so will need regenerating once it does.

package/dist/Accordion/Accordion.js

@@ -2,8 +2,8 @@ import React, { useState } from 'react';
 import styled, { css } from 'styled-components';
 import { Box } from '../Box';
 import { Icon } from '../Icon';
-import { theme } from '../theme';
 import { Text } from '../Text';
+import { theme } from '../theme';
 export const Accordion = ({ title, children, onToggle, filledBackground, defaultIsOpen = false, borderTop = false, borderColor = 'oatmeal', backgroundColor = 'custard', subTitle, fullBorder = false, ...marginProps }) => {
     const [isOpen, setIsOpen] = useState(defaultIsOpen);
     const px = fullBorder ? '16px' : '0';
@@ -12,27 +12,27 @@ export const Accordion = ({ title, children, onToggle, filledBackground, default
         onToggle?.(nextOpenState);
         setIsOpen(nextOpenState);
     };
-    return (React.createElement(Wrapper, { borderTop: borderTop, fullBorder: fullBorder, filledBackground: filledBackground, borderColor: borderColor, backgroundColor: backgroundColor, ...marginProps },
+    return (React.createElement(Wrapper, { "$borderTop": borderTop, "$fullBorder": fullBorder, "$filledBackground": filledBackground, "$borderColor": borderColor, "$backgroundColor": backgroundColor, ...marginProps },
         React.createElement(TopContainer, { flex: true, alignItems: "center", justifyContent: "space-between", onClick: handleToggle, py: "16px", pr: "16px", pl: px },
             React.createElement(TitleContainer, null,
                 React.createElement(Text, { tag: "h2", typo: "headline-regular", color: "liquorice" }, title),
                 subTitle && (React.createElement(Text, { tag: "label", color: "liquorice", typo: "label", mt: { custom: 4 } }, subTitle))),
-            React.createElement(CaretIcon, { render: "caret", size: 24, color: "marzipan", isOpen: isOpen, borderTop: borderTop })),
+            React.createElement(CaretIcon, { render: "caret", size: 24, color: "marzipan", "$isOpen": isOpen, "$borderTop": borderTop })),
         isOpen && (React.createElement(Box, { pt: "12px", pb: "16px", px: px }, children))));
 };
-const Wrapper = styled(Box)(({ borderTop, fullBorder, filledBackground, borderColor = 'oatmeal', backgroundColor = 'custard', }) => css `
-    border-bottom: 1px solid ${theme.colors[borderColor]};
-    ${borderTop && `border-top: 1px solid ${theme.colors[borderColor]};`}
+const Wrapper = styled(Box)(({ $borderTop, $fullBorder, $filledBackground, $borderColor = 'oatmeal', $backgroundColor = 'custard', }) => css `
+    border-bottom: 1px solid ${theme.colors[$borderColor]};
+    ${$borderTop && `border-top: 1px solid ${theme.colors[$borderColor]};`}
 
-    ${fullBorder &&
+    ${$fullBorder &&
     css `
-      border: 1px solid ${theme.colors[borderColor]};
+      border: 1px solid ${theme.colors[$borderColor]};
       border-radius: 16px;
     `}
 
-    ${filledBackground &&
+    ${$filledBackground &&
     css `
-      background-color: ${theme.colors[backgroundColor]};
+      background-color: ${theme.colors[$backgroundColor]};
     `}
   `);
 const TitleContainer = styled.div `
@@ -42,8 +42,8 @@ const TitleContainer = styled.div `
 const TopContainer = styled(Box) `
   cursor: pointer;
 `;
-const CaretIcon = styled(Icon)(({ isOpen }) => css `
-    transform: ${isOpen ? 'rotate(180deg)' : 'rotate(0deg)'};
+const CaretIcon = styled(Icon)(({ $isOpen }) => css `
+    transform: ${$isOpen ? 'rotate(180deg)' : 'rotate(0deg)'};
     transition: transform 0.6s ease;
   `);
 //# sourceMappingURL=Accordion.js.map

package/dist/Accordion/Accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.js","sourceRoot":"","sources":["../../src/Accordion/Accordion.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Accordion.js","sourceRoot":"","sources":["../../src/Accordion/Accordion.tsx"],"names":[],"mappings":"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"}

package/dist/ActionDropdown/ActionDropdown.js

@@ -9,15 +9,15 @@ export const ActionDropdown = ({ id, className = '', label, value, list, onSelec
     const [open, setOpen] = useState(false);
     return (React.createElement(Container, { id: id, className: className, onClick: () => setOpen((currentOpen) => !currentOpen), ...marginProps },
         label && (React.createElement(Text, { tag: "label", color: "sesame", typo: "label" }, label)),
-        React.createElement(Label, { text: value.textColor ?? 'liquorice', bg: value.bgColor ?? 'sesame' },
+        React.createElement(Label, { "$text": value.textColor ?? 'liquorice', "$bg": value.bgColor ?? 'sesame' },
             React.createElement(SelectedOption, null, value.label),
             React.createElement(Icon, { render: "caret", color: value.textColor ?? 'sesame', size: 24, rotate: open ? 180 : 0 })),
         React.createElement(OuterContainer, { open: open },
             React.createElement(List, { options: list, selectOption: onSelect }))));
 };
-const Label = styled.div(({ text, bg }) => css `
-    color: ${theme.colors[text]};
-    background-color: ${theme.colors[bg]};
+const Label = styled.div(({ $text, $bg }) => css `
+    color: ${theme.colors[$text]};
+    background-color: ${theme.colors[$bg]};
     position: relative;
     width: 100%;
     height: 48px;

package/dist/ActionDropdown/ActionDropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionDropdown.js","sourceRoot":"","sources":["../../src/ActionDropdown/ActionDropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAM,QAAQ,EAAE,MAAM,OAAO,CAAA;AAC3C,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAE/C,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAkB,IAAI,EAAE,MAAM,QAAQ,CAAA;AAE7C,OAAO,EAAS,KAAK,EAAE,MAAM,UAAU,CAAA;AAgBvC,MAAM,CAAC,MAAM,cAAc,GAA4B,CAAC,EACtD,EAAE,EACF,SAAS,GAAG,EAAE,EACd,KAAK,EACL,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,GAAG,WAAW,EACf,EAAE,EAAE;IACH,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAEvC,OAAO,CACL,oBAAC,SAAS,IACR,EAAE,EAAE,EAAE,EACN,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC,WAAW,CAAC,KACjD,WAAW;QAEd,KAAK,IAAI,CACR,oBAAC,IAAI,IAAC,GAAG,EAAC,OAAO,EAAC,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,OAAO,IAC1C,KAAK,CACD,CACR;QAED,oBAAC,KAAK,IACJ,IAAI,EAAE,KAAK,CAAC,SAAS,IAAI,WAAW,EACpC,EAAE,EAAE,KAAK,CAAC,OAAO,IAAI,QAAQ;YAE7B,oBAAC,cAAc,QAAE,KAAK,CAAC,KAAK,CAAkB;YAC9C,oBAAC,IAAI,IACH,MAAM,EAAC,OAAO,EACd,KAAK,EAAE,KAAK,CAAC,SAAS,IAAI,QAAQ,EAClC,IAAI,EAAE,EAAE,EACR,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GACtB,CACI;QACR,oBAAC,cAAc,IAAC,IAAI,EAAE,IAAI;YACxB,oBAAC,IAAI,IAAC,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,QAAQ,GAAI,CAChC,CACP,CACb,CAAA;AACH,CAAC,CAAA;AAOD,MAAM,KAAK,GAAG,MAAM,CAAC,GAAG,CACtB,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;aACV,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC;wBACP,KAAK,CAAC,MAAM,CAAC,EAAE,CAAC;;;;;;;;;;;;GAYrC,CACF,CAAA;AAED,MAAM,cAAc,GAAG,MAAM,CAAC,IAAI,CAAA;;;;;;CAMjC,CAAA;AAED,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;;;;;;;;;CAS5B,CAAA;AAMD,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAC/B,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;;;;;eAKJ,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM;kBACpB,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM;wBACjB,KAAK,CAAC,MAAM,CAAC,OAAO;kBAC1B,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ;;;GAGvC,CACF,CAAA"}
+{"version":3,"file":"ActionDropdown.js","sourceRoot":"","sources":["../../src/ActionDropdown/ActionDropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAM,QAAQ,EAAE,MAAM,OAAO,CAAA;AAC3C,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAE/C,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAkB,IAAI,EAAE,MAAM,QAAQ,CAAA;AAE7C,OAAO,EAAS,KAAK,EAAE,MAAM,UAAU,CAAA;AAgBvC,MAAM,CAAC,MAAM,cAAc,GAA4B,CAAC,EACtD,EAAE,EACF,SAAS,GAAG,EAAE,EACd,KAAK,EACL,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,GAAG,WAAW,EACf,EAAE,EAAE;IACH,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAEvC,OAAO,CACL,oBAAC,SAAS,IACR,EAAE,EAAE,EAAE,EACN,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC,WAAW,CAAC,KACjD,WAAW;QAEd,KAAK,IAAI,CACR,oBAAC,IAAI,IAAC,GAAG,EAAC,OAAO,EAAC,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,OAAO,IAC1C,KAAK,CACD,CACR;QAED,oBAAC,KAAK,aACG,KAAK,CAAC,SAAS,IAAI,WAAW,SAChC,KAAK,CAAC,OAAO,IAAI,QAAQ;YAE9B,oBAAC,cAAc,QAAE,KAAK,CAAC,KAAK,CAAkB;YAC9C,oBAAC,IAAI,IACH,MAAM,EAAC,OAAO,EACd,KAAK,EAAE,KAAK,CAAC,SAAS,IAAI,QAAQ,EAClC,IAAI,EAAE,EAAE,EACR,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GACtB,CACI;QACR,oBAAC,cAAc,IAAC,IAAI,EAAE,IAAI;YACxB,oBAAC,IAAI,IAAC,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,QAAQ,GAAI,CAChC,CACP,CACb,CAAA;AACH,CAAC,CAAA;AAOD,MAAM,KAAK,GAAG,MAAM,CAAC,GAAG,CACtB,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;aACZ,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;wBACR,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC;;;;;;;;;;;;GAYtC,CACF,CAAA;AAED,MAAM,cAAc,GAAG,MAAM,CAAC,IAAI,CAAA;;;;;;CAMjC,CAAA;AAED,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;;;;;;;;;CAS5B,CAAA;AAMD,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAC/B,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;;;;;eAKJ,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM;kBACpB,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM;wBACjB,KAAK,CAAC,MAAM,CAAC,OAAO;kBAC1B,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ;;;GAGvC,CACF,CAAA"}

package/dist/Banner/BannerItem.js

@@ -1,10 +1,10 @@
-import { Box } from '../Box';
 import React from 'react';
 import styled, { css } from 'styled-components';
+import { Box } from '../Box';
 import { Icon } from '../Icon';
-import { theme } from '../theme';
 import { Text } from '../Text';
 import { useTimeout } from '../hooks';
+import { theme } from '../theme';
 const styles = {
     upsell: {
         iconColor: 'liquorice',
@@ -40,7 +40,7 @@ export const BannerItem = ({ type, autoCloseTime = 4, id, message, topOffset, ex
     useTimeout(() => autoCloseBaner(), autoCloseTime * 1000);
     const textColor = styles[type].textColor;
     const iconColor = styles[type].iconColor;
-    return (React.createElement(BannerWrapper, { p: "24px", mt: { custom: topOffset }, key: id, flex: true, justifyContent: "space-between", type: type },
+    return (React.createElement(BannerWrapper, { p: "24px", mt: { custom: topOffset }, key: id, flex: true, justifyContent: "space-between", "$type": type },
         React.createElement(Box, { flex: true, alignItems: "center" },
             leadingIcon && (React.createElement(Icon, { mr: "12px", render: leadingIcon, size: 24, color: iconColor })),
             React.createElement(Text, { typo: "headline-small", color: textColor }, message)),
@@ -51,9 +51,9 @@ export const BannerItem = ({ type, autoCloseTime = 4, id, message, topOffset, ex
                     showExploreText && (React.createElement(UnderlinedText, { ml: "12px", tag: "span", typo: "desc-medium", color: textColor }, "Explore")),
                     showExploreIcon && (React.createElement(Icon, { render: "arrow", ml: "12px", size: 24, color: iconColor, rotate: 180 }))))))));
 };
-const BannerWrapper = styled(Box)(({ type }) => css `
+const BannerWrapper = styled(Box)(({ $type }) => css `
     border-radius: 0px 0px 16px 16px;
-    background-color: ${styles[type].backgroundColor};
+    background-color: ${styles[$type].backgroundColor};
   `);
 const GenericButton = styled.button `
   cursor: pointer;

package/dist/Banner/BannerItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"BannerItem.js","sourceRoot":"","sources":["../../src/Banner/BannerItem.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"BannerItem.js","sourceRoot":"","sources":["../../src/Banner/BannerItem.tsx"],"names":[],"mappings":"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"}

package/dist/Box/Box.d.ts

@@ -1,5 +1,8 @@
-import { FlexProps } from '../utils/flex';
-import { MeasureProps } from '../utils/measure';
-import { MarginProps, PaddingProps } from '../utils/space';
-export type BoxProps = MarginProps & PaddingProps & FlexProps & MeasureProps;
-export declare const Box: import("styled-components").StyledComponent<"div", any, BoxProps, never>;
+import React, { HTMLAttributes } from 'react';
+import { FlexProps, TransientFlexProps } from '../utils/flex';
+import { MeasureProps, TransientMeasureProps } from '../utils/measure';
+import { MarginProps, PaddingProps, TransientMarginProps, TransientPaddingProps } from '../utils/space';
+export type BoxProps = MarginProps & PaddingProps & FlexProps & MeasureProps & HTMLAttributes<HTMLElement>;
+export type TransientBoxProps = TransientMarginProps & TransientPaddingProps & TransientFlexProps & TransientMeasureProps;
+export declare const Box: React.ForwardRefExoticComponent<MarginProps & PaddingProps & FlexProps & MeasureProps & React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLDivElement>>;
+export declare const CustomBox: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, TransientBoxProps>>;

package/dist/Box/Box.js

@@ -1,8 +1,14 @@
 import styled from 'styled-components';
+import React, { forwardRef } from 'react';
 import { flex } from '../utils/flex';
 import { measure } from '../utils/measure';
-import { margin, padding } from '../utils/space';
-export const Box = styled.div `
+import { margin, padding, } from '../utils/space';
+export const Box = forwardRef((props, ref) => {
+    const { m, mx, my, ml, mr, mt, mb, p, px, py, pl, pr, pt, pb, direction, wrap, flex, flow, justifyContent, alignItems, alignContent, gap, rowGap, columnGap, width, maxWidth, minWidth, height, maxHeight, minHeight, ...otherProps } = props;
+    return (React.createElement(CustomBox, { ref: ref, "$m": m, "$mx": mx, "$my": my, "$ml": ml, "$mr": mr, "$mt": mt, "$mb": mb, "$p": p, "$px": px, "$py": py, "$pl": pl, "$pr": pr, "$pt": pt, "$pb": pb, "$direction": direction, "$wrap": wrap, "$flex": flex, "$flow": flow, "$justifyContent": justifyContent, "$alignItems": alignItems, "$alignContent": alignContent, "$gap": gap, "$rowGap": rowGap, "$columnGap": columnGap, "$width": width, "$maxWidth": maxWidth, "$minWidth": minWidth, "$height": height, "$maxHeight": maxHeight, "$minHeight": minHeight, ...otherProps }, props.children));
+});
+Box.displayName = 'Box';
+export const CustomBox = styled.div `
   ${margin};
   ${padding};
   ${flex};

package/dist/Box/Box.js.map

@@ -1 +1 @@
-{"version":3,"file":"Box.js","sourceRoot":"","sources":["../../src/Box/Box.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,OAAO,EAAE,IAAI,EAAa,MAAM,eAAe,CAAA;AAC/C,OAAO,EAAE,OAAO,EAAgB,MAAM,kBAAkB,CAAA;AACxD,OAAO,EAAE,MAAM,EAAE,OAAO,EAA6B,MAAM,gBAAgB,CAAA;AAI3E,MAAM,CAAC,MAAM,GAAG,GAAG,MAAM,CAAC,GAAG,CAAU;IACnC,MAAM;IACN,OAAO;IACP,IAAI;IACJ,OAAO;CACV,CAAA"}
+{"version":3,"file":"Box.js","sourceRoot":"","sources":["../../src/Box/Box.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,OAAO,KAAK,EAAE,EAAkB,UAAU,EAAE,MAAM,OAAO,CAAA;AACzD,OAAO,EAAiC,IAAI,EAAE,MAAM,eAAe,CAAA;AACnE,OAAO,EAAuC,OAAO,EAAE,MAAM,kBAAkB,CAAA;AAC/E,OAAO,EAKL,MAAM,EACN,OAAO,GACR,MAAM,gBAAgB,CAAA;AAavB,MAAM,CAAC,MAAM,GAAG,GAAG,UAAU,CAA2B,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACrE,MAAM,EACJ,CAAC,EACD,EAAE,EACF,EAAE,EACF,EAAE,EACF,EAAE,EACF,EAAE,EACF,EAAE,EACF,CAAC,EACD,EAAE,EACF,EAAE,EACF,EAAE,EACF,EAAE,EACF,EAAE,EACF,EAAE,EACF,SAAS,EACT,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,cAAc,EACd,UAAU,EACV,YAAY,EACZ,GAAG,EACH,MAAM,EACN,SAAS,EACT,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,SAAS,EACT,SAAS,EACT,GAAG,UAAU,EACd,GAAG,KAAK,CAAA;IAET,OAAO,CACL,oBAAC,SAAS,IACR,GAAG,EAAE,GAAG,QACJ,CAAC,SACA,EAAE,SACF,EAAE,SACF,EAAE,SACF,EAAE,SACF,EAAE,SACF,EAAE,QACH,CAAC,SACA,EAAE,SACF,EAAE,SACF,EAAE,SACF,EAAE,SACF,EAAE,SACF,EAAE,gBACK,SAAS,WACd,IAAI,WACJ,IAAI,WACJ,IAAI,qBACM,cAAc,iBAClB,UAAU,mBACR,YAAY,UACrB,GAAG,aACA,MAAM,gBACH,SAAS,YACb,KAAK,eACF,QAAQ,eACR,QAAQ,aACV,MAAM,gBACH,SAAS,gBACT,SAAS,KACjB,UAAU,IAEb,KAAK,CAAC,QAAQ,CACL,CACb,CAAA;AACH,CAAC,CAAC,CAAA;AACF,GAAG,CAAC,WAAW,GAAG,KAAK,CAAA;AAEvB,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAmB;IAClD,MAAM;IACN,OAAO;IACP,IAAI;IACJ,OAAO;CACV,CAAA"}

package/dist/BrandCard/BrandCard.d.ts

@@ -1,6 +1,6 @@
 import { FC, ReactNode } from 'react';
-import { MarginProps } from '../utils/space';
 import { Color } from '../theme';
+import { MarginProps } from '../utils/space';
 export type BrandCardProps = {
     /** generic card title */
     title: string;
@@ -14,7 +14,7 @@ export type BrandCardProps = {
     visualHeight?: string;
     /** render image at bottom of card */
     visualBottom?: boolean;
-    bgColour: Color;
+    bgColor: Color;
     /** card tag */
     tag?: ReactNode;
     /** primary button */

package/dist/BrandCard/BrandCard.js

@@ -1,24 +1,24 @@
 import React from 'react';
 import styled from 'styled-components';
-import { theme } from '../theme';
 import { Box } from '../Box';
 import { Text } from '../Text';
-export const BrandCard = ({ title, body, visual, visualHeight = '', alignVisual, visualBottom, tag, buttonAction, fallbackStyle = false, bgColour = 'matcha', maxWidth = '', ...otherProps }) => {
-    return (React.createElement(Container, { maxWidth: maxWidth, visual: visual, fallbackStyle: fallbackStyle, bgColor: bgColour, ...otherProps },
+import { theme } from '../theme';
+export const BrandCard = ({ title, body, visual, visualHeight = '', alignVisual, visualBottom, tag, buttonAction, fallbackStyle = false, bgColor = 'matcha', maxWidth = '', ...otherProps }) => {
+    return (React.createElement(Container, { maxWidth: maxWidth, "$fallbackStyle": fallbackStyle, "$bgColor": bgColor, ...otherProps },
         tag && React.createElement(TagWrapper, null, tag),
-        visual && !visualBottom && (React.createElement(VisualWrapper, { visualHeight: visualHeight },
-            React.createElement(Visual, { visualUrl: visual, visualHeight: visualHeight, alignVisual: alignVisual }))),
+        visual && !visualBottom && (React.createElement(VisualWrapper, { "$visualHeight": visualHeight },
+            React.createElement(Visual, { "$visualUrl": visual, "$visualHeight": visualHeight, "$alignVisual": alignVisual }))),
         React.createElement(Box, { flex: true, alignItems: "center", justifyContent: "space-between", mt: "16px" },
             React.createElement(Box, { flex: true, alignItems: "center" },
                 React.createElement(Box, null,
                     title && (React.createElement(Text, { typo: "hero-alternate", color: "liquorice" }, title)),
                     body && (React.createElement(Text, { typo: "body-regular", color: "liquorice" }, body))))),
         buttonAction && React.createElement(Box, { mt: "16px" }, buttonAction),
-        visual && visualBottom && (React.createElement(VisualWrapper, { visualHeight: visualHeight, mt: "16px" },
-            React.createElement(Visual, { visualUrl: visual, visualHeight: visualHeight, alignVisual: alignVisual })))));
+        visual && visualBottom && (React.createElement(VisualWrapper, { "$visualHeight": visualHeight, mt: "16px" },
+            React.createElement(Visual, { "$visualUrl": visual, "$visualHeight": visualHeight, "$alignVisual": alignVisual })))));
 };
 const Container = styled(Box) `
-  background: ${({ fallbackStyle, bgColor }) => fallbackStyle ? theme.colors.cream : theme.colors[bgColor]};
+  background: ${({ $fallbackStyle, $bgColor }) => $fallbackStyle ? theme.colors.cream : theme.colors[$bgColor]};
   box-sizing: border-box;
   border-radius: 16px 16px 0px 0px;
 
@@ -34,15 +34,15 @@ const TagWrapper = styled(Box) `
 const VisualWrapper = styled(Box) `
   width: 100%;
 
-  ${({ visualHeight }) => visualHeight && `height: ${visualHeight};`}
+  ${({ $visualHeight }) => $visualHeight && `height: ${$visualHeight};`}
 `;
 const Visual = styled(Box) `
   width: 100%;
-  background-image: url('${(p) => p.visualUrl}');
+  background-image: url('${(p) => p.$visualUrl}');
   background-size: contain;
   background-repeat: no-repeat;
-  background-position: ${({ alignVisual }) => alignVisual ? alignVisual : 'left'};
+  background-position: ${({ $alignVisual }) => $alignVisual ? $alignVisual : 'left'};
 
-  ${({ visualHeight }) => visualHeight ? `height: ${visualHeight};` : 'padding-top: 100%;'}
+  ${({ $visualHeight }) => $visualHeight ? `height: ${$visualHeight};` : 'padding-top: 100%;'}
 `;
 //# sourceMappingURL=BrandCard.js.map

package/dist/BrandCard/BrandCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"BrandCard.js","sourceRoot":"","sources":["../../src/BrandCard/BrandCard.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"BrandCard.js","sourceRoot":"","sources":["../../src/BrandCard/BrandCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAA;AAC5C,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAS,KAAK,EAAE,MAAM,UAAU,CAAA;AA2BvC,MAAM,CAAC,MAAM,SAAS,GAAuB,CAAC,EAC5C,KAAK,EACL,IAAI,EACJ,MAAM,EACN,YAAY,GAAG,EAAE,EACjB,WAAW,EACX,YAAY,EACZ,GAAG,EACH,YAAY,EACZ,aAAa,GAAG,KAAK,EACrB,OAAO,GAAG,QAAQ,EAClB,QAAQ,GAAG,EAAE,EACb,GAAG,UAAU,EACd,EAAE,EAAE;IACH,OAAO,CACL,oBAAC,SAAS,IACR,QAAQ,EAAE,QAAQ,oBACF,aAAa,cACnB,OAAO,KACb,UAAU;QAEb,GAAG,IAAI,oBAAC,UAAU,QAAE,GAAG,CAAc;QACrC,MAAM,IAAI,CAAC,YAAY,IAAI,CAC1B,oBAAC,aAAa,qBAAgB,YAAY;YACxC,oBAAC,MAAM,kBACO,MAAM,mBACH,YAAY,kBACb,WAAW,GACzB,CACY,CACjB;QACD,oBAAC,GAAG,IAAC,IAAI,QAAC,UAAU,EAAC,QAAQ,EAAC,cAAc,EAAC,eAAe,EAAC,EAAE,EAAC,MAAM;YACpE,oBAAC,GAAG,IAAC,IAAI,QAAC,UAAU,EAAC,QAAQ;gBAC3B,oBAAC,GAAG;oBACD,KAAK,IAAI,CACR,oBAAC,IAAI,IAAC,IAAI,EAAC,gBAAgB,EAAC,KAAK,EAAC,WAAW,IAC1C,KAAK,CACD,CACR;oBACA,IAAI,IAAI,CACP,oBAAC,IAAI,IAAC,IAAI,EAAC,cAAc,EAAC,KAAK,EAAC,WAAW,IACxC,IAAI,CACA,CACR,CACG,CACF,CACF;QACL,YAAY,IAAI,oBAAC,GAAG,IAAC,EAAE,EAAC,MAAM,IAAE,YAAY,CAAO;QACnD,MAAM,IAAI,YAAY,IAAI,CACzB,oBAAC,aAAa,qBAAgB,YAAY,EAAE,EAAE,EAAC,MAAM;YACnD,oBAAC,MAAM,kBACO,MAAM,mBACH,YAAY,kBACb,WAAW,GACzB,CACY,CACjB,CACS,CACb,CAAA;AACH,CAAC,CAAA;AAED,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,CAG3B;gBACc,CAAC,EAAE,cAAc,EAAE,QAAQ,EAAE,EAAE,EAAE,CAC7C,cAAc,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC;;;;;;;CAO/D,CAAA;AAED,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;;;;CAI7B,CAAA;AAED,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAC,CAA2B;;;IAGxD,CAAC,EAAE,aAAa,EAAE,EAAE,EAAE,CAAC,aAAa,IAAI,WAAW,aAAa,GAAG;CACtE,CAAA;AAED,MAAM,MAAM,GAAG,MAAM,CAAC,GAAG,CAAC,CAIxB;;2BAEyB,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,UAAU;;;yBAGrB,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAC1C,YAAY,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM;;IAEpC,CAAC,EAAE,aAAa,EAAE,EAAE,EAAE,CACtB,aAAa,CAAC,CAAC,CAAC,WAAW,aAAa,GAAG,CAAC,CAAC,CAAC,oBAAoB;CACrE,CAAA"}

package/dist/Button/Button.js

@@ -7,16 +7,16 @@ import { theme } from '../theme';
 import { focusOutlineStyle } from '../utils/focusOutline';
 export const Button = forwardRef((props, ref) => {
     const { children, id, className = '', disabled = false, handleClick, loading = false, primary = false, secondary = false, fallbackStyle = false, textBtn = false, smallButton = false, icon, trailingIcon = false, forcedWidth = '', form, type, ...otherProps } = props;
-    return (React.createElement(Container, { as: "button", id: id, className: className, disabled: disabled || loading, onClick: handleClick, "$loading": loading, primary: primary, secondary: secondary, fallbackStyle: fallbackStyle, textBtn: textBtn, smallButton: smallButton, icon: icon, trailingIcon: trailingIcon, forcedWidth: forcedWidth, ...(form ? { form } : {}), type: type, ...otherProps, ref: ref },
+    return (React.createElement(Container, { forwardedAs: "button", id: id, className: className, disabled: disabled || loading, onClick: handleClick, "$loading": loading, "$primary": primary, "$secondary": secondary, "$fallbackStyle": fallbackStyle, "$textBtn": textBtn, "$smallButton": smallButton, "$trailingIcon": trailingIcon, "$forcedWidth": forcedWidth, ...(form ? { form } : {}), type: type, ...otherProps, ref: ref },
         loading && (React.createElement(LoaderContainer, null,
             React.createElement(Loader, { color: 'liquorice', height: "16" }))),
-        React.createElement(ContentContainer, { icon: icon, "$loading": loading },
-            !trailingIcon && icon && (React.createElement(IconContainer, { trailingIcon: trailingIcon, render: icon, size: smallButton ? 16 : 24, color: 'liquorice' })),
+        React.createElement(ContentContainer, { "$icon": icon, "$loading": loading },
+            !trailingIcon && icon && (React.createElement(IconContainer, { "$trailingIcon": trailingIcon, render: icon, size: smallButton ? 16 : 24, color: 'liquorice' })),
             React.createElement(ChildrenContainer, { className: "childrenContainer" }, children),
-            trailingIcon && icon && textBtn && (React.createElement(IconContainer, { trailingIcon: trailingIcon, render: icon, size: smallButton ? 16 : 24, color: 'liquorice', className: "iconContainer" })))));
+            trailingIcon && icon && textBtn && (React.createElement(IconContainer, { "$trailingIcon": trailingIcon, render: icon, size: smallButton ? 16 : 24, color: 'liquorice', className: "iconContainer" })))));
 });
 Button.displayName = 'Button';
-const Container = styled(Box)(({ disabled, $loading, primary, secondary, forcedWidth, fallbackStyle, textBtn, smallButton, }) => css `
+const Container = styled(Box)(({ disabled, $loading, $primary, $secondary, $forcedWidth, $fallbackStyle, $textBtn, $smallButton, }) => css `
     position: relative;
     background-color: ${theme.colors.marshmallowPink};
     box-shadow: none;
@@ -29,11 +29,11 @@ const Container = styled(Box)(({ disabled, $loading, primary, secondary, forcedW
     line-height: 100%;
     font-size: 16px;
     opacity: ${disabled ? '0.5' : '1'};
-    width: ${forcedWidth ? forcedWidth : 'auto'};
+    width: ${$forcedWidth ? $forcedWidth : 'auto'};
 
     ${focusOutlineStyle}
 
-    ${primary &&
+    ${$primary &&
     css `
       color: ${theme.colors.liquorice};
 
@@ -44,7 +44,7 @@ const Container = styled(Box)(({ disabled, $loading, primary, secondary, forcedW
         background-color: ${theme.colors.lollipop};
       }
     `}
-    ${secondary &&
+    ${$secondary &&
     css `
       background-color: ${theme.colors.oatmeal};
 
@@ -55,7 +55,7 @@ const Container = styled(Box)(({ disabled, $loading, primary, secondary, forcedW
         background-color: ${theme.colors.custard};
       }
     `}
-  ${fallbackStyle &&
+  ${$fallbackStyle &&
     css `
       background-color: ${theme.colors.cream};
 
@@ -66,7 +66,7 @@ const Container = styled(Box)(({ disabled, $loading, primary, secondary, forcedW
         background-color: ${theme.colors.mascarpone};
       }
     `}
-  ${smallButton &&
+  ${$smallButton &&
     css `
       padding: 0 10px;
       min-width: 54px;
@@ -80,7 +80,7 @@ const Container = styled(Box)(({ disabled, $loading, primary, secondary, forcedW
         margin: 0 5px 0 0;
       }
     `}
-  ${textBtn &&
+  ${$textBtn &&
     css `
       background-color: transparent;
       padding: 0;
@@ -109,11 +109,11 @@ const LoaderContainer = styled.div `
 const ContentContainer = styled.div `
   display: flex;
   align-items: center;
-  justify-content: ${({ icon }) => (icon ? 'space-evenly' : 'center')};
+  justify-content: ${({ $icon }) => ($icon ? 'space-evenly' : 'center')};
   opacity: ${({ $loading }) => ($loading ? '0' : '1')};
 `;
-const IconContainer = styled(IconComponent)(({ trailingIcon }) => css `
-    margin: ${trailingIcon ? '0 0 0 10px' : '0 10px 0 0'};
+const IconContainer = styled(IconComponent)(({ $trailingIcon }) => css `
+    margin: ${$trailingIcon ? '0 0 0 10px' : '0 10px 0 0'};
   `);
 const ChildrenContainer = styled.div `
   padding: 16px 0;

package/dist/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../src/Button/Button.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../src/Button/Button.tsx"],"names":[],"mappings":"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"}

package/dist/Card/Card.js

@@ -9,10 +9,10 @@ import { focusOutlineStyle } from '../utils/focusOutline';
 export const Card = ({ children, leadingIcon, title, body, visual, tag, cardOnClickAction, rightAction, buttonAction, fallbackStyle = false, visualHeight = '', className = '', maxWidth = '', marginX = '', marginY = '', narrow = false, wide = false, ...otherProps }) => {
     const addChildMargin = (!!leadingIcon || !!title || !!body) && children;
     const isNotClickable = !cardOnClickAction;
-    return (React.createElement(Container, { className: className, maxWidth: maxWidth, marginX: marginX, marginY: marginY, narrow: narrow, wide: wide, visual: visual, fallbackStyle: fallbackStyle, isNotClickable: isNotClickable, onClick: cardOnClickAction, tabIndex: isNotClickable ? undefined : 0, ...otherProps },
+    return (React.createElement(Container, { className: className, "$maxWidth": maxWidth, "$marginX": marginX, "$marginY": marginY, "$narrow": narrow, "$wide": wide, "$visual": visual, "$fallbackStyle": fallbackStyle, "$isNotClickable": isNotClickable, onClick: cardOnClickAction, tabIndex: isNotClickable ? undefined : 0, ...otherProps },
         tag && visual && React.createElement(TagWrapper, null, tag),
-        visual && (React.createElement(VisualWrapper, { visualHeight: visualHeight },
-            React.createElement(Visual, { visualUrl: visual, visualHeight: visualHeight }))),
+        visual && (React.createElement(VisualWrapper, { "$visualHeight": visualHeight },
+            React.createElement(Visual, { "$visualUrl": visual, "$visualHeight": visualHeight }))),
         React.createElement(Box, { p: visual ? '16px' : { custom: '0px' } },
             React.createElement(Box, { flex: true, alignItems: "center", justifyContent: "space-between" },
                 React.createElement(Box, { flex: true, alignItems: "center" },
@@ -25,25 +25,25 @@ export const Card = ({ children, leadingIcon, title, body, visual, tag, cardOnCl
             buttonAction && React.createElement(Box, { mt: "16px" }, buttonAction))));
 };
 const Container = styled(Box) `
-  background: ${({ fallbackStyle }) => fallbackStyle ? theme.colors.cream : theme.colors.custard};
+  background: ${({ $fallbackStyle }) => $fallbackStyle ? theme.colors.cream : theme.colors.custard};
   box-sizing: border-box;
   border-radius: 16px;
 
-  max-width: ${(p) => p.maxWidth};
-  margin-top: ${(p) => p.marginY};
-  margin-right: ${(p) => p.marginX};
-  margin-bottom: ${(p) => p.marginY};
-  margin-left: ${(p) => p.marginX};
+  max-width: ${(p) => p.$maxWidth};
+  margin-top: ${(p) => p.$marginY};
+  margin-right: ${(p) => p.$marginX};
+  margin-bottom: ${(p) => p.$marginY};
+  margin-left: ${(p) => p.$marginX};
 
-  padding: ${({ visual }) => (visual ? '0px' : '16px')};
+  padding: ${({ $visual }) => ($visual ? '0px' : '16px')};
   position: relative;
   overflow: hidden;
 
-  ${({ isNotClickable, fallbackStyle }) => !isNotClickable &&
+  ${({ $isNotClickable, $fallbackStyle }) => !$isNotClickable &&
     css `
       cursor: pointer;
       &:hover {
-        background: ${darken(0.1, fallbackStyle ? theme.colors.cream : theme.colors.custard)};
+        background: ${darken(0.1, $fallbackStyle ? theme.colors.cream : theme.colors.custard)};
       }
 
       ${focusOutlineStyle}
@@ -58,15 +58,15 @@ const VisualWrapper = styled(Box) `
   width: 100%;
   margin-top: -16px;
 
-  ${({ visualHeight }) => visualHeight && `height: ${visualHeight};`}
+  ${({ $visualHeight }) => $visualHeight && `height: ${$visualHeight};`}
 `;
 const Visual = styled(Box) `
   width: 100%;
-  background-image: url('${(p) => p.visualUrl}');
+  background-image: url('${(p) => p.$visualUrl}');
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center;
 
-  ${({ visualHeight }) => visualHeight ? `height: ${visualHeight};` : 'padding-top: 100%;'}
+  ${({ $visualHeight }) => $visualHeight ? `height: ${$visualHeight};` : 'padding-top: 100%;'}
 `;
 //# sourceMappingURL=Card.js.map

package/dist/Card/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../src/Card/Card.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../src/Card/Card.tsx"],"names":[],"mappings":"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"}

package/dist/CheckBox/CheckBox.js

@@ -10,7 +10,7 @@ export const CheckBox = forwardRef(function CheckBox({ id: idProp, checked, chil
         React.createElement(BoxContainer, { id: id },
             React.createElement(Text, { tag: "span", typo: "base", color: error ? 'strawberry' : 'liquorice' }, children),
             React.createElement("input", { ref: ref, type: "checkbox", checked: checked, onChange: toggle }),
-            React.createElement(Checkmark, { error: error })),
+            React.createElement(Checkmark, { "$error": error })),
         error && errorMsg && React.createElement(ErrorBox, null, errorMsg)));
 });
 const Checkmark = styled.span `
@@ -18,7 +18,7 @@ const Checkmark = styled.span `
   left: 0;
   width: 24px;
   height: 24px;
-  border: ${({ error }) => error
+  border: ${({ $error }) => $error
     ? `solid 2px ${theme.colors.strawberry}`
     : `solid 2px ${theme.colors.liquorice}`};
   box-sizing: border-box;

package/dist/CheckBox/CheckBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckBox.js","sourceRoot":"","sources":["../../src/CheckBox/CheckBox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAa,MAAM,OAAO,CAAA;AACpD,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AAEpD,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAChC,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AAWzC,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAChC,SAAS,QAAQ,CACf,EAAE,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,EAC1D,GAAG;IAEH,MAAM,EAAE,GAAG,WAAW,CAAC,MAAM,CAAC,CAAA;IAC9B,OAAO,CACL;QACE,oBAAC,YAAY,IAAC,EAAE,EAAE,EAAE;YAClB,oBAAC,IAAI,IACH,GAAG,EAAC,MAAM,EACV,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,WAAW,IAExC,QAAQ,CACJ;YAEP,+BACE,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,MAAM,GAChB;YACF,oBAAC,SAAS,IAAC,KAAK,EAAE,KAAK,GAAI,CACd;QACd,KAAK,IAAI,QAAQ,IAAI,oBAAC,QAAQ,QAAE,QAAQ,CAAY,CACpD,CACJ,CAAA;AACH,CAAC,CACF,CAAA;AAED,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAqB;;;;;YAKtC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CACtB,KAAK;IACH,CAAC,CAAC,aAAa,KAAK,CAAC,MAAM,CAAC,UAAU,EAAE;IACxC,CAAC,CAAC,aAAa,KAAK,CAAC,MAAM,CAAC,SAAS,EAAE;;;;;;;;;;;;;wBAarB,KAAK,CAAC,MAAM,CAAC,KAAK;;;;;;;;;;;;;;;wBAelB,KAAK,CAAC,MAAM,CAAC,KAAK;;;;;CAKzC,CAAA;AAED,MAAM,YAAY,GAAG,MAAM,CAAC,KAAK,CAAA;;;;;;;;;;;;wBAYT,KAAK,CAAC,MAAM,CAAC,KAAK;;kBAExB,SAAS;0BACD,KAAK,CAAC,MAAM,CAAC,SAAS;0BACtB,KAAK,CAAC,MAAM,CAAC,SAAS;;;kBAG9B,SAAS;;;;kBAIT,SAAS;;;;MAIrB,YAAY,CAAC,EAAE,QAAQ,EAAE,qBAAqB,SAAS,EAAE,EAAE,CAAC;;;;MAI5D,SAAS;0BACW,KAAK,CAAC,MAAM,CAAC,OAAO;0BACpB,KAAK,CAAC,MAAM,CAAC,SAAS;;;;;;;;;;;CAW/C,CAAA;AAED,MAAM,QAAQ,GAAG,MAAM,CAAC,IAAI,CAAA;;;WAGjB,KAAK,CAAC,MAAM,CAAC,UAAU;CACjC,CAAA"}
+{"version":3,"file":"CheckBox.js","sourceRoot":"","sources":["../../src/CheckBox/CheckBox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAa,MAAM,OAAO,CAAA;AACpD,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AAEpD,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAChC,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AAWzC,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAChC,SAAS,QAAQ,CACf,EAAE,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,EAC1D,GAAG;IAEH,MAAM,EAAE,GAAG,WAAW,CAAC,MAAM,CAAC,CAAA;IAC9B,OAAO,CACL;QACE,oBAAC,YAAY,IAAC,EAAE,EAAE,EAAE;YAClB,oBAAC,IAAI,IACH,GAAG,EAAC,MAAM,EACV,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,WAAW,IAExC,QAAQ,CACJ;YAEP,+BACE,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,MAAM,GAChB;YACF,oBAAC,SAAS,cAAS,KAAK,GAAI,CACf;QACd,KAAK,IAAI,QAAQ,IAAI,oBAAC,QAAQ,QAAE,QAAQ,CAAY,CACpD,CACJ,CAAA;AACH,CAAC,CACF,CAAA;AAED,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAsB;;;;;YAKvC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CACvB,MAAM;IACJ,CAAC,CAAC,aAAa,KAAK,CAAC,MAAM,CAAC,UAAU,EAAE;IACxC,CAAC,CAAC,aAAa,KAAK,CAAC,MAAM,CAAC,SAAS,EAAE;;;;;;;;;;;;;wBAarB,KAAK,CAAC,MAAM,CAAC,KAAK;;;;;;;;;;;;;;;wBAelB,KAAK,CAAC,MAAM,CAAC,KAAK;;;;;CAKzC,CAAA;AAED,MAAM,YAAY,GAAG,MAAM,CAAC,KAAK,CAAA;;;;;;;;;;;;wBAYT,KAAK,CAAC,MAAM,CAAC,KAAK;;kBAExB,SAAS;0BACD,KAAK,CAAC,MAAM,CAAC,SAAS;0BACtB,KAAK,CAAC,MAAM,CAAC,SAAS;;;kBAG9B,SAAS;;;;kBAIT,SAAS;;;;MAIrB,YAAY,CAAC,EAAE,QAAQ,EAAE,qBAAqB,SAAS,EAAE,EAAE,CAAC;;;;MAI5D,SAAS;0BACW,KAAK,CAAC,MAAM,CAAC,OAAO;0BACpB,KAAK,CAAC,MAAM,CAAC,SAAS;;;;;;;;;;;CAW/C,CAAA;AAED,MAAM,QAAQ,GAAG,MAAM,CAAC,IAAI,CAAA;;;WAGjB,KAAK,CAAC,MAAM,CAAC,UAAU;CACjC,CAAA"}

package/dist/Chip/Chip.js

@@ -5,11 +5,11 @@ import { Icon as IconComponent } from '../Icon';
 import { Loader } from '../Loader';
 import { theme } from '../theme';
 import { focusOutline } from '../utils/focusOutline';
-export const Chip = forwardRef(({ children, handleClick, primary = false, secondary = false, disabled = false, loading = false, icon, ...props }, ref) => (React.createElement(Container, { as: "button", primary: primary, secondary: secondary, disabled: disabled || loading, "$loading": loading, onClick: handleClick, icon: icon, ...props, ref: ref }, loading ? (React.createElement(Loader, { color: primary ? 'liquorice' : 'cream', height: "16" })) : (React.createElement(React.Fragment, null,
+export const Chip = forwardRef(({ children, handleClick, primary = false, secondary = false, disabled = false, loading = false, icon, ...props }, ref) => (React.createElement(Container, { forwardedAs: "button", "$primary": primary, "$secondary": secondary, disabled: disabled || loading, "$loading": loading, onClick: handleClick, "$icon": icon, ...props, ref: ref }, loading ? (React.createElement(Loader, { color: primary ? 'liquorice' : 'cream', height: "16" })) : (React.createElement(React.Fragment, null,
     icon && (React.createElement(IconComponent, { render: icon, size: 20, color: primary ? 'liquorice' : 'cream' })),
     React.createElement(ChildrenContainer, null, children))))));
 Chip.displayName = 'Chip';
-const Container = styled(Box)(({ primary, secondary, icon, $loading, disabled }) => css `
+const Container = styled(Box)(({ $primary, $secondary, $icon, $loading, disabled }) => css `
     ${focusOutline()}
 
     align-items: center;
@@ -19,15 +19,15 @@ const Container = styled(Box)(({ primary, secondary, icon, $loading, disabled })
     color: ${theme.colors.liquorice};
     display: flex;
     font-size: 16px;
-    justify-content: ${icon ? 'space-evenly' : 'center'};
+    justify-content: ${$icon ? 'space-evenly' : 'center'};
     line-height: 100%;
-    padding: 8px 16px 8px ${icon ? '8px' : '16px'};
+    padding: 8px 16px 8px ${$icon ? '8px' : '16px'};
     width: 98px;
     min-height: 40px;
     cursor: ${disabled || $loading ? 'not-allowed' : 'pointer'};
     opacity: ${disabled ? '0.5' : '1'};
 
-    ${primary &&
+    ${$primary &&
     css `
       &:hover {
         border: ${!(disabled || $loading) &&
@@ -35,7 +35,7 @@ const Container = styled(Box)(({ primary, secondary, icon, $loading, disabled })
         background-color: ${!(disabled || $loading) && theme.colors.mascarpone};
       }
     `}
-    ${secondary &&
+    ${$secondary &&
     css `
       color: ${theme.colors.cream};
       background-color: ${theme.colors.liquorice};