@mrshmllw/smores-react 6.0.0 → 6.0.2

package/dist/src/Accordion/Accordion.js

@@ -0,0 +1,49 @@
+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';
+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';
+    const handleToggle = () => {
+        const nextOpenState = !isOpen;
+        onToggle?.(nextOpenState);
+        setIsOpen(nextOpenState);
+    };
+    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 })),
+        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]};`}
+
+    ${fullBorder &&
+    css `
+      border: 1px solid ${theme.colors[borderColor]};
+      border-radius: 16px;
+    `}
+
+    ${filledBackground &&
+    css `
+      background-color: ${theme.colors[backgroundColor]};
+    `}
+  `);
+const TitleContainer = styled.div `
+  display: flex;
+  flex-direction: column;
+`;
+const TopContainer = styled(Box) `
+  cursor: pointer;
+`;
+const CaretIcon = styled(Icon)(({ isOpen }) => css `
+    transform: ${isOpen ? 'rotate(180deg)' : 'rotate(0deg)'};
+    transition: transform 0.6s ease;
+  `);
+//# sourceMappingURL=Accordion.js.map

package/dist/src/Accordion/Accordion.js.map

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

package/dist/src/Accordion/index.js

@@ -0,0 +1,2 @@
+export * from './Accordion';
+//# sourceMappingURL=index.js.map

package/dist/src/Accordion/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Accordion/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA"}

package/dist/src/ActionDropdown/ActionDropdown.js

@@ -0,0 +1,62 @@
+import React, { useState } from 'react';
+import styled, { css } from 'styled-components';
+import { Box } from '../Box';
+import { Icon } from '../Icon';
+import { Text } from '../Text';
+import { List } from './List';
+import { theme } from '../theme';
+export const ActionDropdown = ({ id, className = '', label, value, list, onSelect, ...marginProps }) => {
+    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(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]};
+    position: relative;
+    width: 100%;
+    height: 48px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    text-align: center;
+    border-radius: 64px;
+    padding: 16px 16px 14px;
+    box-sizing: border-box;
+    user-select: none;
+  `);
+const SelectedOption = styled.span `
+  font-size: 14px;
+  font-weight: bold;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+const Container = styled(Box) `
+  position: relative;
+  display: block;
+  width: 210px;
+  height: 48px;
+  text-align: center;
+  cursor: pointer;
+  outline: none;
+  border-radius: 8px;
+`;
+const OuterContainer = styled.div(({ open }) => css `
+    position: absolute;
+    width: 100%;
+    border-radius: 12px;
+    margin-top: 8px;
+    display: ${open ? 'block' : 'none'};
+    max-height: ${open ? '235px' : '48px'};
+    background-color: ${theme.colors.custard};
+    overflow-y: ${open ? 'auto' : 'hidden'};
+    z-index: 4;
+    transition: all 0.2s ease-in-out;
+  `);
+//# sourceMappingURL=ActionDropdown.js.map

package/dist/src/ActionDropdown/ActionDropdown.js.map

@@ -0,0 +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"}

package/dist/src/ActionDropdown/List.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import styled from 'styled-components';
+import { theme } from '../theme';
+import { darken } from 'polished';
+export const List = ({ options, selectOption }) => (React.createElement(Container, null, options.map((option) => (React.createElement(ListItem, { key: option.value, onClick: () => selectOption(option) }, option.label)))));
+const Container = styled.ul `
+  padding: 0;
+  margin: 0;
+  max-height: 188px;
+`;
+const ListItem = styled.li `
+  padding: 16px 24px;
+  text-align: left;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  box-sizing: border-box;
+  font-size: 14px;
+  cursor: pointer;
+  color: ${theme.colors.liquorice};
+
+  &:hover {
+    background-color: ${darken(0.1, theme.colors.custard)};
+  }
+
+  &:last-child {
+    border-bottom: none;
+  }
+`;
+//# sourceMappingURL=List.js.map

package/dist/src/ActionDropdown/List.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"List.js","sourceRoot":"","sources":["../../../src/ActionDropdown/List.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AACjC,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,OAAO,EAAS,KAAK,EAAE,MAAM,UAAU,CAAA;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAcjC,MAAM,CAAC,MAAM,IAAI,GAAc,CAAC,EAAE,OAAO,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,CAC5D,oBAAC,SAAS,QACP,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CACvB,oBAAC,QAAQ,IAAC,GAAG,EAAE,MAAM,CAAC,KAAK,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,IAC7D,MAAM,CAAC,KAAK,CACJ,CACZ,CAAC,CACQ,CACb,CAAA;AAED,MAAM,SAAS,GAAG,MAAM,CAAC,EAAE,CAAA;;;;CAI1B,CAAA;AAED,MAAM,QAAQ,GAAG,MAAM,CAAC,EAAE,CAAA;;;;;;;;;WASf,KAAK,CAAC,MAAM,CAAC,SAAS;;;wBAGT,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC;;;;;;CAMxD,CAAA"}

package/dist/src/ActionDropdown/index.js

@@ -0,0 +1,2 @@
+export { ActionDropdown } from './ActionDropdown';
+//# sourceMappingURL=index.js.map

package/dist/src/ActionDropdown/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ActionDropdown/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA"}

package/dist/src/Banner/BannerContainer.js

@@ -0,0 +1,43 @@
+import React, { createContext, useState, useCallback, useContext, } from 'react';
+import styled from 'styled-components';
+import { BannerItem } from './BannerItem';
+export const BannerContext = createContext({
+    addBanner: () => {
+        throw new Error('Please add the BannerContainer to your application');
+    },
+});
+export const useBannerContext = () => useContext(BannerContext);
+export const BannerContainer = ({ children }) => {
+    let bannerId = 0;
+    const [banner, setBanner] = useState([]);
+    // create banner unique ID
+    const newBannerId = useCallback(() => {
+        const newId = `MM_BANNER_${bannerId}`;
+        bannerId++;
+        return newId;
+    }, [bannerId]);
+    const addBanner = (banner) => {
+        const newBanner = {
+            ...banner,
+            id: newBannerId(),
+        };
+        setBanner([newBanner]);
+    };
+    const deleteBanner = (id) => {
+        setBanner(banner.filter((banner) => banner.id !== id));
+    };
+    return (React.createElement(BannerContext.Provider, { value: {
+            addBanner,
+        } },
+        children,
+        React.createElement(BannerWrapper, null, banner.map((banner) => (React.createElement(BannerItem, { key: banner.id, ...banner, deleteBanner: deleteBanner }))))));
+};
+const BannerWrapper = styled.div `
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
+  z-index: 99;
+`;
+//# sourceMappingURL=BannerContainer.js.map

package/dist/src/Banner/BannerContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BannerContainer.js","sourceRoot":"","sources":["../../../src/Banner/BannerContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,aAAa,EAEb,QAAQ,EACR,WAAW,EAEX,UAAU,GACX,MAAM,OAAO,CAAA;AACd,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAGzC,MAAM,CAAC,MAAM,aAAa,GAAG,aAAa,CAAoB;IAC5D,SAAS,EAAE,GAAG,EAAE;QACd,MAAM,IAAI,KAAK,CAAC,oDAAoD,CAAC,CAAA;IACvE,CAAC;CACF,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,CAAA;AAE/D,MAAM,CAAC,MAAM,eAAe,GAAiC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC5E,IAAI,QAAQ,GAAG,CAAC,CAAA;IAChB,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAW,EAAE,CAAC,CAAA;IAElD,0BAA0B;IAC1B,MAAM,WAAW,GAAG,WAAW,CAAC,GAAG,EAAE;QACnC,MAAM,KAAK,GAAG,aAAa,QAAQ,EAAE,CAAA;QACrC,QAAQ,EAAE,CAAA;QACV,OAAO,KAAK,CAAA;IACd,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAA;IAEd,MAAM,SAAS,GAAG,CAAC,MAAoB,EAAE,EAAE;QACzC,MAAM,SAAS,GAAG;YAChB,GAAG,MAAM;YACT,EAAE,EAAE,WAAW,EAAE;SAClB,CAAA;QACD,SAAS,CAAC,CAAC,SAAS,CAAC,CAAC,CAAA;IACxB,CAAC,CAAA;IAED,MAAM,YAAY,GAAG,CAAC,EAAU,EAAE,EAAE;QAClC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,CAAA;IACxD,CAAC,CAAA;IAED,OAAO,CACL,oBAAC,aAAa,CAAC,QAAQ,IACrB,KAAK,EAAE;YACL,SAAS;SACV;QAEA,QAAQ;QACT,oBAAC,aAAa,QACX,MAAM,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CACtB,oBAAC,UAAU,IAAC,GAAG,EAAE,MAAM,CAAC,EAAE,KAAM,MAAM,EAAE,YAAY,EAAE,YAAY,GAAI,CACvE,CAAC,CACY,CACO,CAC1B,CAAA;AACH,CAAC,CAAA;AAED,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;CAO/B,CAAA"}

package/dist/src/Banner/BannerItem.js

@@ -0,0 +1,64 @@
+import { Box } from '../Box';
+import React from 'react';
+import styled, { css } from 'styled-components';
+import { Icon } from '../Icon';
+import { theme } from '../theme';
+import { Text } from '../Text';
+import { useTimeout } from '../hooks';
+const styles = {
+    upsell: {
+        iconColor: 'liquorice',
+        backgroundColor: theme.colors.marshmallowPink,
+        textColor: 'liquorice',
+    },
+    critical: {
+        iconColor: 'mascarpone',
+        backgroundColor: theme.colors.strawberry,
+        textColor: 'mascarpone',
+    },
+    general: {
+        iconColor: 'mascarpone',
+        backgroundColor: theme.colors.liquorice,
+        textColor: 'mascarpone',
+    },
+    success: {
+        iconColor: 'mascarpone',
+        backgroundColor: theme.colors.apple,
+        textColor: 'mascarpone',
+    },
+};
+export const BannerItem = ({ type, autoCloseTime = 4, id, message, topOffset, exploreAction, showExploreText, showExploreIcon, leadingIcon, canManuallyClose, showCloseIcon, deleteBanner, noTimeout, }) => {
+    const autoCloseBaner = () => {
+        if (noTimeout)
+            return;
+        if (type !== 'critical')
+            return deleteBanner(id);
+        else {
+            return;
+        }
+    };
+    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 },
+        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)),
+        React.createElement(Box, { flex: true, alignItems: "center" },
+            canManuallyClose && (React.createElement(GenericButton, { onClick: () => deleteBanner(id), "aria-label": `close banner ${message}` }, showCloseIcon ? (React.createElement(Icon, { render: "cross", size: 16, color: iconColor })) : (React.createElement(UnderlinedText, { tag: "span", typo: "desc-medium", color: textColor }, "Dismiss")))),
+            exploreAction && (React.createElement(GenericButton, { onClick: exploreAction, "aria-label": `cta ${message}` },
+                React.createElement(Box, { flex: true, alignItems: "center" },
+                    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 `
+    border-radius: 0px 0px 16px 16px;
+    background-color: ${styles[type].backgroundColor};
+  `);
+const GenericButton = styled.button `
+  cursor: pointer;
+`;
+const UnderlinedText = styled(Text) `
+  text-decoration: underline;
+`;
+//# sourceMappingURL=BannerItem.js.map

package/dist/src/Banner/BannerItem.js.map

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

package/dist/src/Banner/hooks.js

@@ -0,0 +1,6 @@
+import { useBannerContext } from './BannerContainer';
+export const useBanner = () => {
+    const { addBanner } = useBannerContext();
+    return { addBanner };
+};
+//# sourceMappingURL=hooks.js.map

package/dist/src/Banner/hooks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.js","sourceRoot":"","sources":["../../../src/Banner/hooks.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAA;AAEpD,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE;IAC5B,MAAM,EAAE,SAAS,EAAE,GAAG,gBAAgB,EAAE,CAAA;IAExC,OAAO,EAAE,SAAS,EAAE,CAAA;AACtB,CAAC,CAAA"}

package/dist/src/Banner/index.js

@@ -0,0 +1,3 @@
+export * from './BannerContainer';
+export * from './hooks';
+//# sourceMappingURL=index.js.map

package/dist/src/Banner/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Banner/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAA;AACjC,cAAc,SAAS,CAAA"}

package/dist/src/Banner/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/src/Banner/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/Banner/types.ts"],"names":[],"mappings":""}

package/dist/src/Box/Box.js

@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+import { flex } from '../utils/flex';
+import { measure } from '../utils/measure';
+import { margin, padding } from '../utils/space';
+export const Box = styled.div `
+  ${margin};
+  ${padding};
+  ${flex};
+  ${measure};
+`;
+//# sourceMappingURL=Box.js.map

package/dist/src/Box/Box.js.map

@@ -0,0 +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"}

package/dist/src/Box/index.js

@@ -0,0 +1,2 @@
+export { Box } from './Box';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Box/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA"}

package/dist/src/BrandCard/BrandCard.js

@@ -0,0 +1,48 @@
+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 },
+        tag && React.createElement(TagWrapper, null, tag),
+        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 })))));
+};
+const Container = styled(Box) `
+  background: ${({ fallbackStyle, bgColor }) => fallbackStyle ? theme.colors.cream : theme.colors[bgColor]};
+  box-sizing: border-box;
+  border-radius: 16px 16px 0px 0px;
+
+  padding: 16px;
+  position: relative;
+  overflow: hidden;
+`;
+const TagWrapper = styled(Box) `
+  position: absolute;
+  top: 16px;
+  right: 16px;
+`;
+const VisualWrapper = styled(Box) `
+  width: 100%;
+
+  ${({ visualHeight }) => visualHeight && `height: ${visualHeight};`}
+`;
+const Visual = styled(Box) `
+  width: 100%;
+  background-image: url('${(p) => p.visualUrl}');
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: ${({ alignVisual }) => alignVisual ? alignVisual : 'left'};
+
+  ${({ visualHeight }) => visualHeight ? `height: ${visualHeight};` : 'padding-top: 100%;'}
+`;
+//# sourceMappingURL=BrandCard.js.map

package/dist/src/BrandCard/BrandCard.js.map

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

package/dist/src/BrandCard/index.js

@@ -0,0 +1,2 @@
+export { BrandCard } from './BrandCard';
+//# sourceMappingURL=index.js.map

package/dist/src/BrandCard/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/BrandCard/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA"}

package/dist/src/Button/Button.js

@@ -0,0 +1,122 @@
+import React, { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import { Box } from '../Box';
+import { Icon as IconComponent } from '../Icon';
+import { Loader } from '../Loader';
+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 },
+        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(ChildrenContainer, { className: "childrenContainer" }, children),
+            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 `
+    position: relative;
+    background-color: ${theme.colors.marshmallowPink};
+    box-shadow: none;
+    color: ${theme.colors.liquorice};
+    padding: 0 20px;
+    outline: none;
+    border-radius: 10000px;
+    font-weight: ${theme.font.weight.medium};
+    cursor: ${disabled || $loading ? 'not-allowed' : 'pointer'};
+    line-height: 100%;
+    font-size: 16px;
+    opacity: ${disabled ? '0.5' : '1'};
+    width: ${forcedWidth ? forcedWidth : 'auto'};
+
+    ${focusOutlineStyle}
+
+    ${primary &&
+    css `
+      color: ${theme.colors.liquorice};
+
+      &:hover {
+        background-color: ${!(disabled || $loading) && theme.colors.bubblegum};
+      }
+      &:active {
+        background-color: ${theme.colors.lollipop};
+      }
+    `}
+    ${secondary &&
+    css `
+      background-color: ${theme.colors.oatmeal};
+
+      &:hover {
+        background-color: ${!(disabled || $loading) && theme.colors.mascarpone};
+      }
+      &:active {
+        background-color: ${theme.colors.custard};
+      }
+    `}
+  ${fallbackStyle &&
+    css `
+      background-color: ${theme.colors.cream};
+
+      &:hover {
+        background-color: ${!(disabled || $loading) && theme.colors.coconut};
+      }
+      &:active {
+        background-color: ${theme.colors.mascarpone};
+      }
+    `}
+  ${smallButton &&
+    css `
+      padding: 0 10px;
+      min-width: 54px;
+      font-size: 14px;
+
+      .childrenContainer {
+        padding: 9px 0;
+      }
+
+      span {
+        margin: 0 5px 0 0;
+      }
+    `}
+  ${textBtn &&
+    css `
+      background-color: transparent;
+      padding: 0;
+      border-radius: 0;
+      text-decoration: underline;
+
+      &:hover {
+        background-color: ${!(disabled || $loading) && theme.colors.fairyFloss};
+      }
+      &:active {
+        background-color: transparent;
+        color: ${theme.colors.sesame};
+      }
+    `}
+  `);
+const LoaderContainer = styled.div `
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+const ContentContainer = styled.div `
+  display: flex;
+  align-items: 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 ChildrenContainer = styled.div `
+  padding: 16px 0;
+  flex-grow: 1;
+`;
+//# sourceMappingURL=Button.js.map

package/dist/src/Button/Button.js.map

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

package/dist/src/Button/index.js

@@ -0,0 +1,2 @@
+export { Button } from './Button';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA"}

package/dist/src/Card/Card.js

@@ -0,0 +1,72 @@
+import { darken } from 'polished';
+import React from 'react';
+import styled, { css } from 'styled-components';
+import { Box } from '../Box';
+import { Icon } from '../Icon';
+import { Text } from '../Text';
+import { theme } from '../theme';
+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 },
+        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: ${({ 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};
+
+  padding: ${({ visual }) => (visual ? '0px' : '16px')};
+  position: relative;
+  overflow: hidden;
+
+  ${({ isNotClickable, fallbackStyle }) => !isNotClickable &&
+    css `
+      cursor: pointer;
+      &:hover {
+        background: ${darken(0.1, fallbackStyle ? theme.colors.cream : theme.colors.custard)};
+      }
+
+      ${focusOutlineStyle}
+    `};
+`;
+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;
+
+  ${({ visualHeight }) => visualHeight ? `height: ${visualHeight};` : 'padding-top: 100%;'}
+`;
+//# sourceMappingURL=Card.js.map

package/dist/src/Card/Card.js.map

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