@mrshmllw/smores-react 2.19.2 → 3.0.0

package/dist/Card/Card.js

@@ -13,16 +13,30 @@ import React from 'react';
 import styled from 'styled-components';
 import { theme } from '../theme';
 import { Box } from '../Box';
+import { Icon } from '../Icon';
+import { Text } from '../Text';
 export const Card = (_a) => {
-    var { children, className = '', maxWidth = '', marginX = '', marginY = '', narrow = false, wide = false } = _a, otherProps = __rest(_a, ["children", "className", "maxWidth", "marginX", "marginY", "narrow", "wide"]);
-    return (React.createElement(Container, Object.assign({ className: className, maxWidth: maxWidth, marginX: marginX, marginY: marginY, narrow: narrow, wide: wide }, otherProps), children));
+    var { children, leadingIcon, title, body, visual, tag, rightAction, buttonAction, fallback = false, visualHeight = '', className = '', maxWidth = '', marginX = '', marginY = '', narrow = false, wide = false } = _a, otherProps = __rest(_a, ["children", "leadingIcon", "title", "body", "visual", "tag", "rightAction", "buttonAction", "fallback", "visualHeight", "className", "maxWidth", "marginX", "marginY", "narrow", "wide"]);
+    const addChildMargin = (!!leadingIcon || !!title || !!body) && children;
+    return (React.createElement(Container, Object.assign({ className: className, maxWidth: maxWidth, marginX: marginX, marginY: marginY, narrow: narrow, wide: wide, visual: visual, fallback: fallback }, otherProps),
+        tag && visual && React.createElement(TagWrapper, null, tag),
+        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" },
+                    leadingIcon && (React.createElement(Icon, { mr: "12px", render: leadingIcon, size: 24, color: "liquorice" })),
+                    React.createElement(Box, null,
+                        title && (React.createElement(Text, { typo: "headline-regular", color: "liquorice" }, title)),
+                        body && (React.createElement(Text, { typo: "body-regular", color: "sesame" }, body)))),
+                rightAction && rightAction),
+            React.createElement(Box, { mt: addChildMargin ? '16px' : { custom: '0px' } }, children),
+            buttonAction && React.createElement(Box, { mt: "16px" }, buttonAction))));
 };
 const Container = styled(Box) `
-  background: ${theme.colors.white};
-  border: 1px solid ${theme.colors.outline};
+  background: ${({ fallback }) => fallback ? theme.colors.cream : theme.colors.custard};
   box-sizing: border-box;
-  box-shadow: 0px 4px 3px rgba(0, 0, 0, 0.08);
-  border-radius: 8px;
+  border-radius: 16px;
 
   max-width: ${(p) => p.maxWidth};
   margin-top: ${(p) => p.marginY};
@@ -30,10 +44,28 @@ const Container = styled(Box) `
   margin-bottom: ${(p) => p.marginY};
   margin-left: ${(p) => p.marginX};
 
-  padding: ${(p) => (p.narrow ? '16px' : p.wide ? '32px' : '24px')};
+  padding: ${({ visual }) => (visual ? '0px' : '16px')};
+  position: relative;
+  overflow: hidden;
+`;
+const TagWrapper = styled(Box) `
+  position: absolute;
+  top: 12px;
+  right: 12px;
+`;
+const VisualWrapper = styled(Box) `
+  width: 100%;
+  margin-top: -16px;
+
+  ${({ visualHeight }) => visualHeight && `height: ${visualHeight};`}
+`;
+const Visual = styled(Box) `
+  width: 100%;
+  background-image: url('${(p) => p.visualUrl}');
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center;
 
-  @media (min-width: 768px) {
-    padding: ${(p) => (p.narrow ? '24px' : p.wide ? '48px' : '32px')};
-  }
+  ${({ 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":";;;;;;;;;;;AAAA,OAAO,KAAwB,MAAM,OAAO,CAAA;AAC5C,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAChC,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAiB5B,MAAM,CAAC,MAAM,IAAI,GAAkB,CAAC,EASnC,EAAE,EAAE;QAT+B,EAClC,QAAQ,EACR,SAAS,GAAG,EAAE,EACd,QAAQ,GAAG,EAAE,EACb,OAAO,GAAG,EAAE,EACZ,OAAO,GAAG,EAAE,EACZ,MAAM,GAAG,KAAK,EACd,IAAI,GAAG,KAAK,OAEb,EADI,UAAU,cARqB,6EASnC,CADc;IACT,OAAA,CACJ,oBAAC,SAAS,kBACR,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,IAAI,IACN,UAAU,GAEb,QAAQ,CACC,CACb,CAAA;CAAA,CAAA;AAMD,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,CAAO;gBACpB,KAAK,CAAC,MAAM,CAAC,KAAK;sBACZ,KAAK,CAAC,MAAM,CAAC,OAAO;;;;;eAK3B,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ;gBAChB,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,OAAO;kBACd,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,OAAO;mBACf,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,OAAO;iBAClB,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,OAAO;;aAEpB,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;;;eAGnD,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;;CAEnE,CAAA"}
+{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../src/Card/Card.tsx"],"names":[],"mappings":"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"}

package/dist/Card/Card.stories.d.ts

@@ -6,7 +6,11 @@ declare const _default: {
 };
 export default _default;
 export declare const Default: any;
-export declare const MaxWidth: any;
-export declare const NarrowPadding: any;
-export declare const WidePadding: any;
-export declare const Margins: any;
+export declare const DefaultFallback: any;
+export declare const GenericChildCard: any;
+export declare const GenericCard: any;
+export declare const CardWithRightAction: any;
+export declare const CardWithRightActionLink: any;
+export declare const CardWithButton: any;
+export declare const CardWithImage: any;
+export declare const CardWithImageWithTag: any;

package/dist/Card/Card.stories.js

@@ -1,28 +1,84 @@
 import React from 'react';
 import { Card } from './Card';
 import { Text } from '../Text';
+import placeHolderSvg from './assets/placeHolderImage.svg';
+import { Tag } from '../Tag';
+import { Button } from '../Button';
+import { Icon } from '../Icon';
+import { Link } from '../Link';
 export default {
     title: 'Card',
     component: Card,
 };
-const Template = (props) => (React.createElement(Card, Object.assign({}, props),
-    React.createElement(Text, { tag: "h1" }, "Card with default padding")));
+const Template = (props) => React.createElement(Card, Object.assign({}, props));
 export const Default = Template.bind({});
-export const MaxWidth = Template.bind({});
-MaxWidth.args = {
-    maxWidth: '250px',
-};
-export const NarrowPadding = Template.bind({});
-NarrowPadding.args = {
-    narrow: true,
-};
-export const WidePadding = Template.bind({});
-WidePadding.args = {
-    wide: true,
-};
-export const Margins = Template.bind({});
-Margins.args = {
-    marginX: '50px',
-    marginY: '30px',
+Default.args = {
+    title: 'Card title',
+    body: 'Card description',
+    leadingIcon: 'copy',
+    maxWidth: '300px',
+};
+export const DefaultFallback = Template.bind({});
+DefaultFallback.args = {
+    title: 'Card title',
+    body: 'Card description',
+    leadingIcon: 'copy',
+    maxWidth: '300px',
+    fallback: true,
+};
+export const GenericChildCard = Template.bind({});
+GenericChildCard.args = {
+    children: React.createElement(Text, { tag: "h1" }, "Children here"),
+};
+export const GenericCard = Template.bind({});
+GenericCard.args = {
+    title: 'Card title',
+    body: 'Card description',
+    leadingIcon: 'copy',
+    maxWidth: '300px',
+};
+export const CardWithRightAction = Template.bind({});
+CardWithRightAction.args = {
+    title: 'Card title',
+    body: 'Card description',
+    leadingIcon: 'copy',
+    maxWidth: '300px',
+    rightAction: React.createElement(Icon, { render: "caret", color: "marzipan", rotate: -90 }),
+};
+export const CardWithRightActionLink = Template.bind({});
+CardWithRightActionLink.args = {
+    title: 'Card title',
+    body: 'Card description',
+    leadingIcon: 'copy',
+    maxWidth: '300px',
+    rightAction: (React.createElement(Link, { href: "", typo: "regular" }, "Action")),
+};
+export const CardWithButton = Template.bind({});
+CardWithButton.args = {
+    title: 'Card title',
+    body: 'Card description',
+    leadingIcon: 'copy',
+    maxWidth: '300px',
+    buttonAction: (React.createElement(Button, { primary: true, forcedWidth: "100%" }, "Default")),
+};
+export const CardWithImage = Template.bind({});
+CardWithImage.args = {
+    title: 'Card title',
+    body: 'Card description',
+    leadingIcon: 'copy',
+    maxWidth: '300px',
+    visualHeight: '120px',
+    visual: placeHolderSvg,
+};
+export const CardWithImageWithTag = Template.bind({});
+CardWithImageWithTag.args = {
+    title: 'Card title',
+    body: 'Card description',
+    leadingIcon: 'copy',
+    maxWidth: '300px',
+    visualHeight: '180px',
+    tag: React.createElement(Tag, { label: "default", bgColor: "feijoa", color: "cream" }),
+    buttonAction: (React.createElement(Button, { primary: true, forcedWidth: "100%" }, "Default")),
+    visual: placeHolderSvg,
 };
 //# sourceMappingURL=Card.stories.js.map

package/dist/Card/Card.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.stories.js","sourceRoot":"","sources":["../../src/Card/Card.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,IAAI,EAAa,MAAM,QAAQ,CAAA;AACxC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAE9B,eAAe;IACb,KAAK,EAAE,MAAM;IACb,SAAS,EAAE,IAAI;CAChB,CAAA;AAED,MAAM,QAAQ,GAAG,CAAC,KAAgB,EAAE,EAAE,CAAC,CACrC,oBAAC,IAAI,oBAAK,KAAK;IACb,oBAAC,IAAI,IAAC,GAAG,EAAC,IAAI,gCAAiC,CAC1C,CACR,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAExC,MAAM,CAAC,MAAM,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAEzC,QAAQ,CAAC,IAAI,GAAG;IACd,QAAQ,EAAE,OAAO;CAClB,CAAA;AAED,MAAM,CAAC,MAAM,aAAa,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAE9C,aAAa,CAAC,IAAI,GAAG;IACnB,MAAM,EAAE,IAAI;CACb,CAAA;AAED,MAAM,CAAC,MAAM,WAAW,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAE5C,WAAW,CAAC,IAAI,GAAG;IACjB,IAAI,EAAE,IAAI;CACX,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAExC,OAAO,CAAC,IAAI,GAAG;IACb,OAAO,EAAE,MAAM;IACf,OAAO,EAAE,MAAM;CAChB,CAAA"}
+{"version":3,"file":"Card.stories.js","sourceRoot":"","sources":["../../src/Card/Card.stories.tsx"],"names":[],"mappings":"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"}

package/dist/CheckBox/CheckBox.js

@@ -8,7 +8,7 @@ export const CheckBox = forwardRef(function CheckBox({ id: idProp, checked, chil
     const id = useUniqueId(idProp);
     return (React.createElement(React.Fragment, null,
         React.createElement(BoxContainer, { id: id },
-            React.createElement(Text, { tag: "span", typo: "base", color: error ? 'error' : 'secondary' }, children),
+            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 })),
         error && errorMsg && React.createElement(ErrorBox, null, errorMsg)));
@@ -19,24 +19,39 @@ const Checkmark = styled.span `
   width: 24px;
   height: 24px;
   border: ${({ error }) => error
-    ? `solid 1px ${theme.colors.error}`
-    : `solid 1px ${theme.colors.secondary}`};
+    ? `solid 1px ${theme.colors.strawberry}`
+    : `solid 1px ${theme.colors.liquorice}`};
   box-sizing: border-box;
   border-radius: 1px;
 
+  &:before {
+    content: '';
+    position: absolute;
+    display: none;
+    top: 9px;
+    left: 5px;
+    width: 3px;
+    height: 8px;
+    border-radius: 4px;
+    background-color: ${theme.colors.cream};
+    -webkit-transform: rotate(316deg);
+    -ms-transform: rotate(316deg);
+    transform: rotate(316deg);
+  }
+
   &:after {
     content: '';
     position: absolute;
     display: none;
     top: 3px;
-    left: 7px;
-    width: 5px;
-    height: 12px;
-    border: solid white;
-    border-width: 0 2px 2px 0;
-    -webkit-transform: rotate(45deg);
-    -ms-transform: rotate(45deg);
-    transform: rotate(45deg);
+    left: 11px;
+    width: 3px;
+    height: 15px;
+    border-radius: 4px;
+    background-color: ${theme.colors.cream};
+    -webkit-transform: rotate(43deg);
+    -ms-transform: rotate(43deg);
+    transform: rotate(43deg);
   }
 `;
 const BoxContainer = styled.label `
@@ -53,8 +68,12 @@ const BoxContainer = styled.label `
     cursor: pointer;
 
     &:checked ~ ${Checkmark} {
-      background-color: ${theme.colors.secondary};
-      border: solid 1px ${theme.colors.secondary};
+      background-color: ${theme.colors.liquorice};
+      border: solid 1px ${theme.colors.liquorice};
+    }
+
+    &:checked ~ ${Checkmark}:before {
+      display: block;
     }
 
     &:checked ~ ${Checkmark}:after {
@@ -66,18 +85,22 @@ const BoxContainer = styled.label `
 
   &:hover {
     ${Checkmark} {
-      background-color: ${theme.colors.background};
-      border: solid 1px ${theme.colors.secondary};
+      background-color: ${theme.colors.coconut};
+      border: solid 1px ${theme.colors.liquorice};
     }
   }
 
   @media (min-width: 768px) {
     padding-left: 32px;
   }
+
+  span {
+    border-radius: 4px;
+  }
 `;
 const ErrorBox = styled.span `
   padding-top: 8px;
   font-size: 12px;
-  color: ${theme.colors.error};
+  color: ${theme.colors.strawberry};
 `;
 //# sourceMappingURL=CheckBox.js.map

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,IAAC,GAAG,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,WAAW,IAC9D,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,KAAK,EAAE;IACnC,CAAC,CAAC,aAAa,KAAK,CAAC,MAAM,CAAC,SAAS,EAAE;;;;;;;;;;;;;;;;;;CAkB5C,CAAA;AAED,MAAM,YAAY,GAAG,MAAM,CAAC,KAAK,CAAA;;;;;;;;;;;;;kBAaf,SAAS;0BACD,KAAK,CAAC,MAAM,CAAC,SAAS;0BACtB,KAAK,CAAC,MAAM,CAAC,SAAS;;;kBAG9B,SAAS;;;;MAIrB,YAAY,CAAC,EAAE,QAAQ,EAAE,qBAAqB,SAAS,EAAE,EAAE,CAAC;;;;MAI5D,SAAS;0BACW,KAAK,CAAC,MAAM,CAAC,UAAU;0BACvB,KAAK,CAAC,MAAM,CAAC,SAAS;;;;;;;CAO/C,CAAA;AAED,MAAM,QAAQ,GAAG,MAAM,CAAC,IAAI,CAAA;;;WAGjB,KAAK,CAAC,MAAM,CAAC,KAAK;CAC5B,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,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;;;;;;;;;;;;;kBAaf,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

@@ -18,8 +18,8 @@ import { Loader } from '../Loader';
 import { focusOutline } from '../utils/focusOutline';
 export const Chip = forwardRef((_a, ref) => {
     var { children, handleClick, primary = false, secondary = false, disabled = false, loading = false, icon = '' } = _a, props = __rest(_a, ["children", "handleClick", "primary", "secondary", "disabled", "loading", "icon"]);
-    return (React.createElement(Container, Object.assign({ as: "button", primary: primary, secondary: secondary, disabled: disabled || loading, "$loading": loading, onClick: handleClick, icon: icon }, props, { ref: ref }), loading ? (React.createElement(Loader, { color: primary ? 'white' : 'primary', height: "16" })) : (React.createElement(React.Fragment, null,
-        icon && (React.createElement(IconComponent, { render: icon, size: 20, color: primary ? 'white' : 'primary' })),
+    return (React.createElement(Container, Object.assign({ 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,
+        icon && (React.createElement(IconComponent, { render: icon, size: 20, color: primary ? 'liquorice' : 'cream' })),
         React.createElement(ChildrenContainer, null, children)))));
 });
 Chip.displayName = 'Chip';
@@ -27,31 +27,37 @@ const Container = styled(Box)(({ primary, secondary, icon, $loading, disabled })
     ${focusOutline()}
 
     align-items: center;
-    background-color: ${theme.colors.primary};
+    background-color: ${theme.colors.oatmeal};
     border-radius: 100px;
-    border: 2px solid ${theme.colors.primary};
-    color: ${theme.colors.white};
+    border: 2px solid ${theme.colors.oatmeal};
+    color: ${theme.colors.liquorice};
     display: flex;
     font-size: 16px;
     justify-content: ${icon ? 'space-evenly' : 'center'};
     line-height: 100%;
     padding: 8px 16px 8px ${icon ? '8px' : '16px'};
     width: 98px;
+    min-height: 40px;
     cursor: ${disabled || $loading ? 'not-allowed' : 'pointer'};
     opacity: ${disabled ? '0.5' : '1'};
 
     ${primary &&
     css `
       &:hover {
-        background-color: ${(disabled || $loading) && theme.colors.primary};
+        border: ${!(disabled || $loading) &&
+        `2px solid ${theme.colors.mascarpone}`};
+        background-color: ${!(disabled || $loading) && theme.colors.mascarpone};
       }
     `}
     ${secondary &&
     css `
-      color: ${theme.colors.primary};
-      background-color: ${theme.colors.white};
+      color: ${theme.colors.cream};
+      background-color: ${theme.colors.liquorice};
+      border: 2px solid ${theme.colors.liquorice};
       &:hover {
-        background-color: ${!(disabled || $loading) && theme.colors.background};
+        border: ${!(disabled || $loading) &&
+        `2px solid ${theme.colors.sesame}`};
+        background-color: ${!(disabled || $loading) && theme.colors.sesame};
       }
     `};
   `);

package/dist/Chip/Chip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Chip.js","sourceRoot":"","sources":["../../src/Chip/Chip.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAuC,UAAU,EAAE,MAAM,OAAO,CAAA;AAC9E,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAE/C,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAChC,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,IAAI,IAAI,aAAa,EAAE,MAAM,SAAS,CAAA;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAClC,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AAuBpD,MAAM,CAAC,MAAM,IAAI,GAAkB,UAAU,CAC3C,CACE,EASC,EACD,GAAG,EACH,EAAE;QAXF,EACE,QAAQ,EACR,WAAW,EACX,OAAO,GAAG,KAAK,EACf,SAAS,GAAG,KAAK,EACjB,QAAQ,GAAG,KAAK,EAChB,OAAO,GAAG,KAAK,EACf,IAAI,GAAG,EAAE,OAEV,EADI,KAAK,cARV,kFASC,CADS;IAGP,OAAA,CACH,oBAAC,SAAS,kBACR,EAAE,EAAC,QAAQ,EACX,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,IAAI,OAAO,cACnB,OAAO,EACjB,OAAO,EAAE,WAAW,EACpB,IAAI,EAAE,IAAI,IACN,KAAK,IACT,GAAG,EAAE,GAAG,KAEP,OAAO,CAAC,CAAC,CAAC,CACT,oBAAC,MAAM,IAAC,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EAAE,MAAM,EAAC,IAAI,GAAG,CAC7D,CAAC,CAAC,CAAC,CACF;QACG,IAAI,IAAI,CACP,oBAAC,aAAa,IACZ,MAAM,EAAE,IAAI,EACZ,IAAI,EAAE,EAAE,EACR,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,GACpC,CACH;QACD,oBAAC,iBAAiB,QAAE,QAAQ,CAAqB,CAChD,CACJ,CACS,CACb,CAAA;CAAA,CACF,CAAA;AAED,IAAI,CAAC,WAAW,GAAG,MAAM,CAAA;AAEzB,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,CAC3B,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;MACrD,YAAY,EAAE;;;wBAGI,KAAK,CAAC,MAAM,CAAC,OAAO;;wBAEpB,KAAK,CAAC,MAAM,CAAC,OAAO;aAC/B,KAAK,CAAC,MAAM,CAAC,KAAK;;;uBAGR,IAAI,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,QAAQ;;4BAE3B,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM;;cAEnC,QAAQ,IAAI,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS;eAC/C,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG;;MAE/B,OAAO;IACT,GAAG,CAAA;;4BAEqB,CAAC,QAAQ,IAAI,QAAQ,CAAC,IAAI,KAAK,CAAC,MAAM,CAAC,OAAO;;KAErE;MACC,SAAS;IACX,GAAG,CAAA;eACQ,KAAK,CAAC,MAAM,CAAC,OAAO;0BACT,KAAK,CAAC,MAAM,CAAC,KAAK;;4BAEhB,CAAC,CAAC,QAAQ,IAAI,QAAQ,CAAC,IAAI,KAAK,CAAC,MAAM,CAAC,UAAU;;KAEzE;GACF,CACF,CAAA;AAED,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAA;;CAEnC,CAAA"}
+{"version":3,"file":"Chip.js","sourceRoot":"","sources":["../../src/Chip/Chip.tsx"],"names":[],"mappings":"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"}

package/dist/Datepicker/Datepicker.d.ts

@@ -4,6 +4,9 @@ export type DatepickerProps = {
     showDayLabels?: boolean;
     disableWeekend?: boolean;
     fromDate?: Date;
+    endingDate?: Date;
+    showYear?: boolean;
+    showSelectedDate?: boolean;
     range?: number;
     onDateSelect: (date: string) => void;
     onChange?: (value: Date) => void;

package/dist/Datepicker/Datepicker.js

@@ -11,7 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React, { useState } from 'react';
 import styled from 'styled-components';
-import { format, addDays, getMonth, getYear, eachMonthOfInterval, isSameDay, isWithinInterval, getDaysInMonth, isWeekend, } from 'date-fns';
+import { format, addDays, getMonth, getYear, eachMonthOfInterval, isSameDay, isWithinInterval, getDaysInMonth, isWeekend, isSameMonth, } from 'date-fns';
 import { Box } from '../Box';
 import { Text } from '../Text';
 import { Icon } from '../Icon';
@@ -19,6 +19,7 @@ import { theme } from '../theme';
 import { DatesList } from './DatesList';
 import { convertToUkDate } from '../utils/date';
 import { useControllableState } from '../utils/useControlledState';
+import { focusOutlineStyle } from '../utils/focusOutline';
 const getAvailableMonths = (startDate, endDate) => {
     const monthList = eachMonthOfInterval({
         start: startDate,
@@ -30,17 +31,20 @@ const getAvailableMonths = (startDate, endDate) => {
     }));
 };
 export const Datepicker = (_a) => {
-    var { showDayLabels = false, disableWeekend = true, range = 14, fromDate = new Date(), onDateSelect, onChange, value } = _a, marginProps = __rest(_a, ["showDayLabels", "disableWeekend", "range", "fromDate", "onDateSelect", "onChange", "value"]);
+    var { showDayLabels = false, disableWeekend = true, range = 14, fromDate = new Date(), endingDate, showYear = false, showSelectedDate = false, onDateSelect, onChange, value } = _a, marginProps = __rest(_a, ["showDayLabels", "disableWeekend", "range", "fromDate", "endingDate", "showYear", "showSelectedDate", "onDateSelect", "onChange", "value"]);
     // We want to make sure that the date is in the UK timezone,
     // this might need to be revisit when opening up to new countries
     const startDate = convertToUkDate(fromDate);
-    const endDate = addDays(startDate, range);
+    const endDate = endingDate ? endingDate : addDays(startDate, range);
     const availableMonths = getAvailableMonths(startDate, endDate);
+    const selectedDate = value !== null && value !== void 0 ? value : new Date();
     const [activeDay, setActiveDay] = useControllableState({
         initialState: undefined,
         stateProp: value,
     });
-    const [activeMonthIndex, setActiveMonth] = useState(0);
+    const [activeMonthIndex, setActiveMonth] = useState(showSelectedDate
+        ? availableMonths.findIndex((month) => isSameMonth(month.date, selectedDate))
+        : 0);
     const handleSelectEvent = (date) => {
         setActiveDay(date);
         onChange === null || onChange === void 0 ? void 0 : onChange(date);
@@ -65,11 +69,22 @@ export const Datepicker = (_a) => {
     };
     return (React.createElement(Container, Object.assign({ id: "datepicker" }, marginProps),
         React.createElement(Header, { flex: true, alignItems: "center", justifyContent: "space-between", direction: "row" },
-            React.createElement(Circle, { type: "button", disabled: activeMonthIndex === 0, onClick: () => setActiveMonth(activeMonthIndex - 1) },
-                React.createElement(Caret, { render: "caret", color: "white", size: 24, rotate: 90 })),
-            React.createElement(Heading, { tag: "h4", typo: "body-regular" }, availableMonths[activeMonthIndex].label),
-            React.createElement(Circle, { type: "button", disabled: activeMonthIndex === availableMonths.length - 1, onClick: () => setActiveMonth(activeMonthIndex + 1) },
-                React.createElement(Caret, { render: "caret", color: "white", size: 24, rotate: -90 }))),
+            React.createElement(Circle, { type: "button", disabled: activeMonthIndex === 0, onClick: () => setActiveMonth(activeMonthIndex - 1), onKeyDown: (e) => {
+                    if (e.key === 'Enter') {
+                        setActiveMonth(activeMonthIndex - 1);
+                    }
+                } },
+                React.createElement(Icon, { render: "caret", color: "cream", size: 18, rotate: 90 })),
+            React.createElement(Heading, { tag: "h4", typo: "body-regular" },
+                availableMonths[activeMonthIndex].label,
+                ' ',
+                showYear && `- ${getYear(availableMonths[activeMonthIndex].date)}`),
+            React.createElement(Circle, { type: "button", disabled: activeMonthIndex === availableMonths.length - 1, onClick: () => setActiveMonth(activeMonthIndex + 1), onKeyDown: (e) => {
+                    if (e.key === 'Enter') {
+                        setActiveMonth(activeMonthIndex + 1);
+                    }
+                } },
+                React.createElement(Icon, { render: "caret", color: "cream", size: 18, rotate: -90 }))),
         React.createElement(Box, { flex: true, alignItems: "center", justifyContent: "center" },
             React.createElement(DatesList, { items: generateDaysForMonth(availableMonths[activeMonthIndex].date), showDayLabels: showDayLabels, handleDateSelect: handleSelectEvent }))));
 };
@@ -77,16 +92,15 @@ const Container = styled(Box) `
   font-family: ${theme.font.system};
   display: inline-block;
   box-sizing: border-box;
-  background-color: ${theme.colors.white};
+  background-color: ${theme.colors.custard};
   outline: none;
-  border-radius: 8px;
-  box-shadow: inset 0 0 0 1px ${theme.colors.outline};
+  border-radius: 16px;
 `;
 const Header = styled(Box) `
-  color: ${theme.colors.secondary};
+  color: ${theme.colors.liquorice};
   user-select: none;
   padding: 16px;
-  border-bottom: 1px solid ${theme.colors.outline};
+  border-bottom: 1px solid ${theme.colors.oatmeal};
 
   span {
     font-size: 16px;
@@ -98,15 +112,13 @@ const Heading = styled(Text) `
   top: 2px;
   font-weight: ${theme.font.weight.medium};
 `;
-const Caret = styled(Icon) `
-  position: relative;
-  top: 0;
-  left: 4px;
-`;
 const Circle = styled.button `
-  background-color: ${theme.colors.secondary};
+  background-color: ${theme.colors.liquorice};
   height: 32px;
   width: 32px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   border-radius: 50%;
   border: none;
   padding: 0 !important;
@@ -116,5 +128,7 @@ const Circle = styled.button `
     opacity: 0.5;
     cursor: default;
   }
+
+  ${focusOutlineStyle}
 `;
 //# sourceMappingURL=Datepicker.js.map

package/dist/Datepicker/Datepicker.js.map

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

package/dist/Datepicker/DatesList.js

@@ -3,6 +3,7 @@ import styled from 'styled-components';
 import { getISODay } from 'date-fns';
 import { theme } from '../theme';
 import { Text } from '../Text';
+import { focusOutlineStyle } from '../utils/focusOutline';
 const getBlankDaysCount = (firstDayOfTheMonth) => {
     const dayOfTheWeek = getISODay(firstDayOfTheMonth);
     return dayOfTheWeek - 1;
@@ -12,14 +13,18 @@ export const DatesList = ({ items, handleDateSelect, showDayLabels, }) => {
     return (React.createElement(Container, null,
         showDayLabels &&
             daysOfTheWeek.map((day) => {
-                return (React.createElement(Text, { key: day, color: "subtext", typo: "label", mb: "24px" }, day));
+                return (React.createElement(Text, { key: day, color: "sesame", typo: "label", mb: "24px" }, day));
             }),
         Array(getBlankDaysCount(items[0].date))
             .fill(null)
-            .map((_, index) => (React.createElement(ListItem, { key: `blankItem-${index}`, disabled: true }))),
-        items.map((item, i) => (React.createElement(ListItem, { key: i, disabled: item.disabled, className: `ListItem ${item.active ? 'active' : ''}`, onClick: () => handleDateSelect(item.date), "data-testid": item.label }, item.label)))));
+            .map((_, index) => (React.createElement(ListButton, { key: `blankItem-${index}`, disabled: true }))),
+        items.map((item, i) => (React.createElement(ListButton, { key: i, disabled: item.disabled, className: `ListButton ${item.active ? 'active' : ''}`, onClick: () => handleDateSelect(item.date), onKeyDown: (e) => {
+                if (e.key === 'Enter') {
+                    handleDateSelect(item.date);
+                }
+            }, "data-testid": item.label }, item.label)))));
 };
-const Container = styled.ul `
+const Container = styled.div `
   justify-items: center;
   display: grid;
   grid-column-gap: 4px;
@@ -37,31 +42,34 @@ const Container = styled.ul `
     padding: 32px;
   }
 `;
-const ListItem = styled.li `
+const ListButton = styled.button `
   display: flex;
   align-items: center;
   justify-content: center;
-  border-radius: 4px;
+  border-radius: 8px;
   width: 32px;
   height: 32px;
   border: 1px solid transparent;
   font-weight: ${theme.font.weight.medium};
   font-size: 14px;
   line-height: 15px;
-  color: ${theme.colors.secondary};
+  color: ${theme.colors.liquorice};
   background-color: transparent;
   pointer-events: ${({ disabled }) => (disabled ? 'none' : '')};
   opacity: ${({ disabled }) => (disabled ? '0.2' : '1')};
   cursor: pointer;
 
   &:hover:not(.active) {
-    background-color: ${theme.colors.background};
+    color: ${theme.colors.custard};
+    background-color: ${theme.colors.liquorice};
   }
 
   &.active {
-    color: ${theme.colors.white};
-    background-color: ${theme.colors.secondary};
+    color: ${theme.colors.custard};
+    background-color: ${theme.colors.liquorice};
     cursor: default;
   }
+
+  ${focusOutlineStyle}
 `;
 //# sourceMappingURL=DatesList.js.map

package/dist/Datepicker/DatesList.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatesList.js","sourceRoot":"","sources":["../../src/Datepicker/DatesList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AACjC,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAEpC,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAGhC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAQ9B,MAAM,iBAAiB,GAAG,CAAC,kBAAwB,EAAE,EAAE;IACrD,MAAM,YAAY,GAAG,SAAS,CAAC,kBAAkB,CAAC,CAAA;IAClD,OAAO,YAAY,GAAG,CAAC,CAAA;AACzB,CAAC,CAAA;AAED,MAAM,aAAa,GAAG,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,CAAA;AAE1E,MAAM,CAAC,MAAM,SAAS,GAAc,CAAC,EACnC,KAAK,EACL,gBAAgB,EAChB,aAAa,GACd,EAAE,EAAE;IACH,OAAO,CACL,oBAAC,SAAS;QACP,aAAa;YACZ,aAAa,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE;gBACxB,OAAO,CACL,oBAAC,IAAI,IAAC,GAAG,EAAE,GAAG,EAAE,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,OAAO,EAAC,EAAE,EAAC,MAAM,IACnD,GAAG,CACC,CACR,CAAA;YACH,CAAC,CAAC;QACH,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;aACrC,IAAI,CAAC,IAAI,CAAC;aACV,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,CACjB,oBAAC,QAAQ,IAAC,GAAG,EAAE,aAAa,KAAK,EAAE,EAAE,QAAQ,SAAG,CACjD,CAAC;QACH,KAAK,CAAC,GAAG,CAAC,CAAC,IAAS,EAAE,CAAC,EAAE,EAAE,CAAC,CAC3B,oBAAC,QAAQ,IACP,GAAG,EAAE,CAAC,EACN,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,SAAS,EAAE,YAAY,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,EAAE,EACpD,OAAO,EAAE,GAAG,EAAE,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,iBAC7B,IAAI,CAAC,KAAK,IAEtB,IAAI,CAAC,KAAK,CACF,CACZ,CAAC,CACQ,CACb,CAAA;AACH,CAAC,CAAA;AAED,MAAM,SAAS,GAAG,MAAM,CAAC,EAAE,CAAA;;;;;;;;;;;;;;;;;CAiB1B,CAAA;AAMD,MAAM,QAAQ,GAAG,MAAM,CAAC,EAAE,CAAW;;;;;;;;iBAQpB,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM;;;WAG9B,KAAK,CAAC,MAAM,CAAC,SAAS;;oBAEb,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;aACjD,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC;;;;wBAI/B,KAAK,CAAC,MAAM,CAAC,UAAU;;;;aAIlC,KAAK,CAAC,MAAM,CAAC,KAAK;wBACP,KAAK,CAAC,MAAM,CAAC,SAAS;;;CAG7C,CAAA"}
+{"version":3,"file":"DatesList.js","sourceRoot":"","sources":["../../src/Datepicker/DatesList.tsx"],"names":[],"mappings":"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"}