@mrshmllw/smores-react 10.7.0-crumbs-feature-vite-bundling.1 → 10.7.0

package/dist/Banner/BannerItem.js

@@ -0,0 +1,64 @@
+import React from 'react';
+import styled, { css } from 'styled-components';
+import { Box } from '../Box';
+import { Icon } from '../Icon';
+import { Text } from '../Text';
+import { useTimeout } from '../hooks';
+import { theme } from '../theme';
+const styles = {
+    upsell: {
+        iconColor: 'liquorice',
+        backgroundColor: theme.colors.marshmallowPink,
+        textColor: 'liquorice',
+    },
+    critical: {
+        iconColor: 'cream',
+        backgroundColor: theme.colors.strawberry,
+        textColor: 'cream',
+    },
+    general: {
+        iconColor: 'cream',
+        backgroundColor: theme.colors.liquorice,
+        textColor: 'cream',
+    },
+    success: {
+        iconColor: 'cream',
+        backgroundColor: theme.colors.apple,
+        textColor: 'cream',
+    },
+};
+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/Banner/BannerItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BannerItem.js","sourceRoot":"","sources":["../../src/Banner/BannerItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { FC } from 'react'\nimport styled, { css } from 'styled-components'\nimport { TransientProps } from 'utils/utilTypes'\nimport { Box } from '../Box'\nimport { Icon } from '../Icon'\nimport { Text } from '../Text'\nimport { useTimeout } from '../hooks'\nimport { Color, theme } from '../theme'\nimport { Banner } from './types'\n\ntype StylesItem = {\n  iconColor: Color\n  backgroundColor: string\n  textColor: Color\n}\n\ntype BannerType = 'upsell' | 'critical' | 'general' | 'success'\n\nconst styles: Record<BannerType, StylesItem> = {\n  upsell: {\n    iconColor: 'liquorice',\n    backgroundColor: theme.colors.marshmallowPink,\n    textColor: 'liquorice',\n  },\n  critical: {\n    iconColor: 'cream',\n    backgroundColor: theme.colors.strawberry,\n    textColor: 'cream',\n  },\n  general: {\n    iconColor: 'cream',\n    backgroundColor: theme.colors.liquorice,\n    textColor: 'cream',\n  },\n  success: {\n    iconColor: 'cream',\n    backgroundColor: theme.colors.apple,\n    textColor: 'cream',\n  },\n}\n\ninterface Props extends Banner {\n  deleteBanner: (id: string) => void\n}\n\nexport const BannerItem: FC<Props> = ({\n  type,\n  autoCloseTime = 4,\n  id,\n  message,\n  topOffset,\n  exploreAction,\n  showExploreText,\n  showExploreIcon,\n  leadingIcon,\n  canManuallyClose,\n  showCloseIcon,\n  deleteBanner,\n  noTimeout,\n}) => {\n  const autoCloseBaner = () => {\n    if (noTimeout) return\n    if (type !== 'critical') return deleteBanner(id)\n    else {\n      return\n    }\n  }\n  useTimeout(() => autoCloseBaner(), autoCloseTime * 1000)\n\n  const textColor = styles[type].textColor\n  const iconColor = styles[type].iconColor\n\n  return (\n    <BannerWrapper\n      p=\"24px\"\n      mt={{ custom: topOffset }}\n      key={id}\n      flex\n      justifyContent=\"space-between\"\n      $type={type}\n    >\n      <Box flex alignItems=\"center\">\n        {leadingIcon && (\n          <Icon mr=\"12px\" render={leadingIcon} size={24} color={iconColor} />\n        )}\n        <Text typo=\"headline-small\" color={textColor}>\n          {message}\n        </Text>\n      </Box>\n      <Box flex alignItems=\"center\">\n        {canManuallyClose && (\n          <GenericButton\n            onClick={() => deleteBanner(id)}\n            aria-label={`close banner ${message}`}\n          >\n            {showCloseIcon ? (\n              <Icon render=\"cross\" size={16} color={iconColor} />\n            ) : (\n              <UnderlinedText tag=\"span\" typo=\"desc-medium\" color={textColor}>\n                Dismiss\n              </UnderlinedText>\n            )}\n          </GenericButton>\n        )}\n        {exploreAction && (\n          <GenericButton onClick={exploreAction} aria-label={`cta ${message}`}>\n            <Box flex alignItems=\"center\">\n              {showExploreText && (\n                <UnderlinedText\n                  ml=\"12px\"\n                  tag=\"span\"\n                  typo=\"desc-medium\"\n                  color={textColor}\n                >\n                  Explore\n                </UnderlinedText>\n              )}\n              {showExploreIcon && (\n                <Icon\n                  render=\"arrow\"\n                  ml=\"12px\"\n                  size={24}\n                  color={iconColor}\n                  rotate={180}\n                />\n              )}\n            </Box>\n          </GenericButton>\n        )}\n      </Box>\n    </BannerWrapper>\n  )\n}\n\nconst BannerWrapper = styled(Box)<TransientProps<Pick<Banner, 'type'>>>(\n  ({ $type }) => css`\n    border-radius: 0px 0px 16px 16px;\n    background-color: ${styles[$type].backgroundColor};\n  `,\n)\n\nconst GenericButton = styled.button`\n  cursor: pointer;\n`\n\nconst UnderlinedText = styled(Text)`\n  text-decoration: underline;\n`\n"]}

package/dist/Banner/hooks.d.ts

@@ -0,0 +1,3 @@
+export declare const useBanner: () => {
+    addBanner: (banner: import("./types").CreateBanner) => void;
+};

package/dist/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/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","sourcesContent":["import { useBannerContext } from './BannerContainer'\n\nexport const useBanner = () => {\n  const { addBanner } = useBannerContext()\n\n  return { addBanner }\n}\n"]}

package/dist/Banner/index.d.ts

@@ -0,0 +1,2 @@
+export * from './BannerContainer';
+export * from './hooks';

package/dist/Banner/index.js

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

package/dist/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","sourcesContent":["export * from './BannerContainer'\nexport * from './hooks'\n"]}

package/dist/Banner/types.d.ts

@@ -0,0 +1,19 @@
+import { Icons } from '../Icon/iconsList';
+export interface Banner {
+    id: string;
+    message: string;
+    type: 'upsell' | 'critical' | 'general' | 'success';
+    topOffset: string;
+    exploreAction?: () => void;
+    showExploreText?: boolean;
+    showExploreIcon?: boolean;
+    autoCloseTime?: 4 | 5 | 6 | 7 | 8 | 9 | 10;
+    leadingIcon?: Icons;
+    canManuallyClose?: boolean;
+    showCloseIcon?: boolean;
+    noTimeout?: boolean;
+}
+export type CreateBanner = Omit<Banner, 'id'>;
+export interface BannerContextType {
+    addBanner: (banner: CreateBanner) => void;
+}

package/dist/Banner/types.js

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

package/dist/Banner/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/Banner/types.ts"],"names":[],"mappings":"","sourcesContent":["import { Icons } from '../Icon/iconsList'\n\nexport interface Banner {\n  id: string\n  message: string\n  type: 'upsell' | 'critical' | 'general' | 'success'\n  topOffset: string\n  exploreAction?: () => void\n  showExploreText?: boolean\n  showExploreIcon?: boolean\n  autoCloseTime?: 4 | 5 | 6 | 7 | 8 | 9 | 10\n  leadingIcon?: Icons\n  canManuallyClose?: boolean\n  showCloseIcon?: boolean\n  noTimeout?: boolean\n}\n\nexport type CreateBanner = Omit<Banner, 'id'>\n\nexport interface BannerContextType {\n  addBanner: (banner: CreateBanner) => void\n}\n"]}

package/dist/Box/Box.d.ts

@@ -0,0 +1,14 @@
+import React, { ElementType, 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> & {
+    as?: ElementType;
+    forwardedAs?: ElementType;
+};
+export type TransientBoxProps = TransientMarginProps & TransientPaddingProps & TransientFlexProps & TransientMeasureProps;
+export declare const Box: React.ForwardRefExoticComponent<MarginProps & PaddingProps & FlexProps & MeasureProps & React.HTMLAttributes<HTMLElement> & {
+    as?: ElementType;
+    forwardedAs?: ElementType;
+} & React.RefAttributes<HTMLDivElement>>;
+export declare const CustomBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, TransientBoxProps>> & string;

package/dist/Box/Box.js

@@ -0,0 +1,17 @@
+import React, { forwardRef } from 'react';
+import styled from 'styled-components';
+import { flex } from '../utils/flex';
+import { measure } from '../utils/measure';
+import { margin, padding, } from '../utils/space';
+export const Box = forwardRef(({ children, ...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 }, children));
+});
+Box.displayName = 'Box';
+export const CustomBox = styled.div `
+  ${margin};
+  ${padding};
+  ${flex};
+  ${measure};
+`;
+//# sourceMappingURL=Box.js.map

package/dist/Box/Box.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Box.js","sourceRoot":"","sources":["../../src/Box/Box.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAA+B,UAAU,EAAE,MAAM,OAAO,CAAA;AACtE,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,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;AAgBvB,MAAM,CAAC,MAAM,GAAG,GAAG,UAAU,CAC3B,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAC9B,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,QAAQ,CACC,CACb,CAAA;AACH,CAAC,CACF,CAAA;AACD,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","sourcesContent":["import React, { ElementType, HTMLAttributes, forwardRef } from 'react'\nimport styled from 'styled-components'\nimport { FlexProps, TransientFlexProps, flex } from '../utils/flex'\nimport { MeasureProps, TransientMeasureProps, measure } from '../utils/measure'\nimport {\n  MarginProps,\n  PaddingProps,\n  TransientMarginProps,\n  TransientPaddingProps,\n  margin,\n  padding,\n} from '../utils/space'\n\nexport type BoxProps = MarginProps &\n  PaddingProps &\n  FlexProps &\n  MeasureProps &\n  HTMLAttributes<HTMLElement> & {\n    as?: ElementType\n    forwardedAs?: ElementType\n  }\n\nexport type TransientBoxProps = TransientMarginProps &\n  TransientPaddingProps &\n  TransientFlexProps &\n  TransientMeasureProps\n\nexport const Box = forwardRef<HTMLDivElement, BoxProps>(\n  ({ children, ...props }, ref) => {\n    const {\n      m,\n      mx,\n      my,\n      ml,\n      mr,\n      mt,\n      mb,\n      p,\n      px,\n      py,\n      pl,\n      pr,\n      pt,\n      pb,\n      direction,\n      wrap,\n      flex,\n      flow,\n      justifyContent,\n      alignItems,\n      alignContent,\n      gap,\n      rowGap,\n      columnGap,\n      width,\n      maxWidth,\n      minWidth,\n      height,\n      maxHeight,\n      minHeight,\n      ...otherProps\n    } = props\n\n    return (\n      <CustomBox\n        ref={ref}\n        $m={m}\n        $mx={mx}\n        $my={my}\n        $ml={ml}\n        $mr={mr}\n        $mt={mt}\n        $mb={mb}\n        $p={p}\n        $px={px}\n        $py={py}\n        $pl={pl}\n        $pr={pr}\n        $pt={pt}\n        $pb={pb}\n        $direction={direction}\n        $wrap={wrap}\n        $flex={flex}\n        $flow={flow}\n        $justifyContent={justifyContent}\n        $alignItems={alignItems}\n        $alignContent={alignContent}\n        $gap={gap}\n        $rowGap={rowGap}\n        $columnGap={columnGap}\n        $width={width}\n        $maxWidth={maxWidth}\n        $minWidth={minWidth}\n        $height={height}\n        $maxHeight={maxHeight}\n        $minHeight={minHeight}\n        {...otherProps}\n      >\n        {children}\n      </CustomBox>\n    )\n  },\n)\nBox.displayName = 'Box'\n\nexport const CustomBox = styled.div<TransientBoxProps>`\n  ${margin};\n  ${padding};\n  ${flex};\n  ${measure};\n`\n"]}

package/dist/Box/index.d.ts

@@ -0,0 +1 @@
+export { Box } from './Box';

package/dist/Box/index.js

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

package/dist/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","sourcesContent":["export { Box } from './Box'\n"]}

package/dist/BrandCard/BrandCard.d.ts

@@ -0,0 +1,27 @@
+import { FC, ReactNode } from 'react';
+import { Color } from '../theme';
+import { MarginProps } from '../utils/space';
+export type BrandCardProps = {
+    /** generic card title */
+    title: string;
+    /** generic card body */
+    body: string;
+    /** card image */
+    visual: string;
+    /** alignment of the image */
+    alignVisual?: 'left' | 'right';
+    /** height of the image, leave this blank for 100% */
+    visualHeight?: string;
+    /** render image at bottom of card */
+    visualBottom?: boolean;
+    bgColor: Color;
+    /** card tag */
+    tag?: ReactNode;
+    /** primary button */
+    buttonAction?: ReactNode;
+    /** fallback color scheme */
+    fallbackStyle?: boolean;
+    /** margin */
+    maxWidth?: string;
+} & MarginProps;
+export declare const BrandCard: FC<BrandCardProps>;

package/dist/BrandCard/BrandCard.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Box } from '../Box';
+import { Text } from '../Text';
+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 }))),
+        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/BrandCard/BrandCard.js.map

@@ -0,0 +1 @@
+{"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","sourcesContent":["import React, { FC, ReactNode } from 'react'\nimport styled from 'styled-components'\nimport { Box } from '../Box'\nimport { Text } from '../Text'\nimport { Color, theme } from '../theme'\nimport { MarginProps } from '../utils/space'\n\nexport type BrandCardProps = {\n  /** generic card title */\n  title: string\n  /** generic card body */\n  body: string\n  /** card image */\n  visual: string\n  /** alignment of the image */\n  alignVisual?: 'left' | 'right'\n  /** height of the image, leave this blank for 100% */\n  visualHeight?: string\n  /** render image at bottom of card */\n  visualBottom?: boolean\n  bgColor: Color\n  /** card tag */\n  tag?: ReactNode\n  /** primary button */\n  buttonAction?: ReactNode\n  /** fallback color scheme */\n  fallbackStyle?: boolean\n  /** margin */\n  maxWidth?: string\n} & MarginProps\n\nexport const BrandCard: FC<BrandCardProps> = ({\n  title,\n  body,\n  visual,\n  visualHeight = '',\n  alignVisual,\n  visualBottom,\n  tag,\n  buttonAction,\n  fallbackStyle = false,\n  bgColor = 'matcha',\n  maxWidth = '',\n  ...otherProps\n}) => {\n  return (\n    <Container\n      maxWidth={maxWidth}\n      $fallbackStyle={fallbackStyle}\n      $bgColor={bgColor}\n      {...otherProps}\n    >\n      {tag && <TagWrapper>{tag}</TagWrapper>}\n      {visual && !visualBottom && (\n        <VisualWrapper $visualHeight={visualHeight}>\n          <Visual\n            $visualUrl={visual}\n            $visualHeight={visualHeight}\n            $alignVisual={alignVisual}\n          />\n        </VisualWrapper>\n      )}\n      <Box flex alignItems=\"center\" justifyContent=\"space-between\" mt=\"16px\">\n        <Box flex alignItems=\"center\">\n          <Box>\n            {title && (\n              <Text typo=\"hero-alternate\" color=\"liquorice\">\n                {title}\n              </Text>\n            )}\n            {body && (\n              <Text typo=\"body-regular\" color=\"liquorice\">\n                {body}\n              </Text>\n            )}\n          </Box>\n        </Box>\n      </Box>\n      {buttonAction && <Box mt=\"16px\">{buttonAction}</Box>}\n      {visual && visualBottom && (\n        <VisualWrapper $visualHeight={visualHeight} mt=\"16px\">\n          <Visual\n            $visualUrl={visual}\n            $visualHeight={visualHeight}\n            $alignVisual={alignVisual}\n          />\n        </VisualWrapper>\n      )}\n    </Container>\n  )\n}\n\nconst Container = styled(Box)<{\n  $fallbackStyle?: boolean\n  $bgColor: Color\n}>`\n  background: ${({ $fallbackStyle, $bgColor }) =>\n    $fallbackStyle ? theme.colors.cream : theme.colors[$bgColor]};\n  box-sizing: border-box;\n  border-radius: 16px 16px 0px 0px;\n\n  padding: 16px;\n  position: relative;\n  overflow: hidden;\n`\n\nconst TagWrapper = styled(Box)`\n  position: absolute;\n  top: 16px;\n  right: 16px;\n`\n\nconst VisualWrapper = styled(Box)<{ $visualHeight: string }>`\n  width: 100%;\n\n  ${({ $visualHeight }) => $visualHeight && `height: ${$visualHeight};`}\n`\n\nconst Visual = styled(Box)<{\n  $visualUrl: string\n  $visualHeight: string\n  $alignVisual?: string\n}>`\n  width: 100%;\n  background-image: url('${(p) => p.$visualUrl}');\n  background-size: contain;\n  background-repeat: no-repeat;\n  background-position: ${({ $alignVisual }) =>\n    $alignVisual ? $alignVisual : 'left'};\n\n  ${({ $visualHeight }) =>\n    $visualHeight ? `height: ${$visualHeight};` : 'padding-top: 100%;'}\n`\n"]}

package/dist/BrandCard/index.d.ts

@@ -0,0 +1 @@
+export { BrandCard } from './BrandCard';

package/dist/BrandCard/index.js

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

package/dist/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","sourcesContent":["export { BrandCard } from './BrandCard'\n"]}

package/dist/Button/Button.d.ts

@@ -0,0 +1,23 @@
+import React, { ButtonHTMLAttributes, FC, ReactNode } from 'react';
+import { Icons } from '../Icon/iconsList';
+import { MarginProps } from '../utils/space';
+type Props = {
+    children: ReactNode;
+    id?: string;
+    className?: string;
+    disabled?: boolean;
+    handleClick?: (e: React.FormEvent<HTMLButtonElement>) => void;
+    loading?: boolean;
+    primary?: boolean;
+    secondary?: boolean;
+    fallbackStyle?: boolean;
+    textBtn?: boolean;
+    smallButton?: boolean;
+    icon?: Icons;
+    trailingIcon?: boolean;
+    forcedWidth?: string;
+    form?: string;
+};
+export type ButtonProps = Props & MarginProps & Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color'>;
+export declare const Button: FC<ButtonProps>;
+export {};

package/dist/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, { 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(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/Button/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../src/Button/Button.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { ButtonHTMLAttributes, FC, ReactNode, forwardRef } from 'react'\nimport styled, { css } from 'styled-components'\n\nimport { TransientProps } from 'utils/utilTypes'\nimport { Box } from '../Box'\nimport { Icon as IconComponent } from '../Icon'\nimport { Icons } from '../Icon/iconsList'\n\nimport { Loader } from '../Loader'\nimport { theme } from '../theme'\nimport { focusOutlineStyle } from '../utils/focusOutline'\nimport { MarginProps } from '../utils/space'\n\ntype Props = {\n  children: ReactNode\n  id?: string\n  className?: string\n  disabled?: boolean\n  handleClick?: (e: React.FormEvent<HTMLButtonElement>) => void\n  loading?: boolean\n  primary?: boolean\n  secondary?: boolean\n  fallbackStyle?: boolean\n  textBtn?: boolean\n  smallButton?: boolean\n  icon?: Icons\n  trailingIcon?: boolean\n  forcedWidth?: string\n  form?: string\n}\n\nexport type ButtonProps = Props &\n  MarginProps &\n  Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color'>\n\nexport const Button: FC<ButtonProps> = forwardRef<\n  HTMLButtonElement,\n  ButtonProps\n>((props, ref) => {\n  const {\n    children,\n    id,\n    className = '',\n    disabled = false,\n    handleClick,\n    loading = false,\n    primary = false,\n    secondary = false,\n    fallbackStyle = false,\n    textBtn = false,\n    smallButton = false,\n    icon,\n    trailingIcon = false,\n    forcedWidth = '',\n    form,\n    type,\n    ...otherProps\n  } = props\n\n  return (\n    <Container\n      forwardedAs=\"button\"\n      id={id}\n      className={className}\n      disabled={disabled || loading}\n      onClick={handleClick}\n      $loading={loading}\n      $primary={primary}\n      $secondary={secondary}\n      $fallbackStyle={fallbackStyle}\n      $textBtn={textBtn}\n      $smallButton={smallButton}\n      $trailingIcon={trailingIcon}\n      $forcedWidth={forcedWidth}\n      {...(form ? { form } : {})}\n      type={type}\n      {...otherProps}\n      ref={ref}\n    >\n      {loading && (\n        <LoaderContainer>\n          <Loader color={'liquorice'} height=\"16\" />\n        </LoaderContainer>\n      )}\n      <ContentContainer $icon={icon} $loading={loading}>\n        {!trailingIcon && icon && (\n          <IconContainer\n            $trailingIcon={trailingIcon}\n            render={icon}\n            size={smallButton ? 16 : 24}\n            color={'liquorice'}\n          />\n        )}\n        <ChildrenContainer className=\"childrenContainer\">\n          {children}\n        </ChildrenContainer>\n        {trailingIcon && icon && textBtn && (\n          <IconContainer\n            $trailingIcon={trailingIcon}\n            render={icon}\n            size={smallButton ? 16 : 24}\n            color={'liquorice'}\n            className=\"iconContainer\"\n          />\n        )}\n      </ContentContainer>\n    </Container>\n  )\n})\n\nButton.displayName = 'Button'\n\ntype IButton = TransientProps<\n  Required<\n    Pick<\n      ButtonProps,\n      | 'primary'\n      | 'secondary'\n      | 'forcedWidth'\n      | 'fallbackStyle'\n      | 'textBtn'\n      | 'trailingIcon'\n      | 'smallButton'\n    >\n  >\n> & {\n  $loading: NonNullable<ButtonProps['loading']>\n  disabled: boolean\n}\n\nconst Container = styled(Box)<IButton>(\n  ({\n    disabled,\n    $loading,\n    $primary,\n    $secondary,\n    $forcedWidth,\n    $fallbackStyle,\n    $textBtn,\n    $smallButton,\n  }) => css`\n    position: relative;\n    background-color: ${theme.colors.marshmallowPink};\n    box-shadow: none;\n    color: ${theme.colors.liquorice};\n    padding: 0 20px;\n    outline: none;\n    border-radius: 10000px;\n    font-weight: ${theme.font.weight.medium};\n    cursor: ${disabled || $loading ? 'not-allowed' : 'pointer'};\n    line-height: 100%;\n    font-size: 16px;\n    opacity: ${disabled ? '0.5' : '1'};\n    width: ${$forcedWidth ? $forcedWidth : 'auto'};\n\n    ${focusOutlineStyle}\n\n    ${$primary &&\n    css`\n      color: ${theme.colors.liquorice};\n\n      &:hover {\n        background-color: ${!(disabled || $loading) && theme.colors.bubblegum};\n      }\n      &:active {\n        background-color: ${theme.colors.lollipop};\n      }\n    `}\n    ${$secondary &&\n    css`\n      background-color: ${theme.colors.oatmeal};\n\n      &:hover {\n        background-color: ${!(disabled || $loading) && theme.colors.mascarpone};\n      }\n      &:active {\n        background-color: ${theme.colors.custard};\n      }\n    `}\n  ${$fallbackStyle &&\n    css`\n      background-color: ${theme.colors.cream};\n\n      &:hover {\n        background-color: ${!(disabled || $loading) && theme.colors.coconut};\n      }\n      &:active {\n        background-color: ${theme.colors.mascarpone};\n      }\n    `}\n  ${$smallButton &&\n    css`\n      padding: 0 10px;\n      min-width: 54px;\n      font-size: 14px;\n\n      .childrenContainer {\n        padding: 9px 0;\n      }\n\n      span {\n        margin: 0 5px 0 0;\n      }\n    `}\n  ${$textBtn &&\n    css`\n      background-color: transparent;\n      padding: 0;\n      border-radius: 0;\n      text-decoration: underline;\n\n      &:hover {\n        background-color: ${!(disabled || $loading) && theme.colors.fairyFloss};\n      }\n      &:active {\n        background-color: transparent;\n        color: ${theme.colors.sesame};\n      }\n    `}\n  `,\n)\n\nconst LoaderContainer = styled.div`\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n`\n\nconst ContentContainer = styled.div<{ $loading: boolean; $icon?: Icons }>`\n  display: flex;\n  align-items: center;\n  justify-content: ${({ $icon }) => ($icon ? 'space-evenly' : 'center')};\n  opacity: ${({ $loading }) => ($loading ? '0' : '1')};\n`\n\nconst IconContainer = styled(IconComponent)<\n  TransientProps<Pick<ButtonProps, 'trailingIcon'>>\n>(\n  ({ $trailingIcon }) => css`\n    margin: ${$trailingIcon ? '0 0 0 10px' : '0 10px 0 0'};\n  `,\n)\n\nconst ChildrenContainer = styled.div`\n  padding: 16px 0;\n  flex-grow: 1;\n`\n"]}

package/dist/Button/index.d.ts

@@ -0,0 +1 @@
+export { Button } from './Button';

package/dist/Button/index.js

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

package/dist/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","sourcesContent":["export { Button } from './Button'\n"]}

package/dist/Card/Card.d.ts

@@ -0,0 +1,38 @@
+import { FC, MouseEventHandler, ReactNode } from 'react';
+import { Icons } from '../Icon/iconsList';
+import { MarginProps } from '../utils/space';
+export type CardProps = {
+    children?: ReactNode;
+    /** leading card icon */
+    leadingIcon?: Icons;
+    /** generic card title */
+    title?: string;
+    /** generic card body */
+    body?: string;
+    /** card image */
+    visual?: string;
+    /** height of the image */
+    visualHeight?: string;
+    /** card tag */
+    tag?: ReactNode;
+    /** action for a fully clickable card */
+    cardOnClickAction?: MouseEventHandler<HTMLDivElement>;
+    /** action to the right of the card, chevron, chip or link text */
+    rightAction?: ReactNode;
+    /** primary button */
+    buttonAction?: ReactNode;
+    /** fallback color scheme */
+    fallbackStyle?: boolean;
+    className?: string;
+    /** margin */
+    maxWidth?: string;
+    /** left-right margin */
+    marginX?: string;
+    /** top-bottom margin */
+    marginY?: string;
+    /** Narrow padding */
+    narrow?: boolean;
+    /** Wide padding */
+    wide?: boolean;
+} & MarginProps;
+export declare const Card: FC<CardProps>;

package/dist/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/Card/Card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../src/Card/Card.tsx"],"names":[],"mappings":"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","sourcesContent":["import { darken } from 'polished'\nimport React, { FC, MouseEventHandler, ReactNode } from 'react'\nimport styled, { css } from 'styled-components'\nimport { TransientProps } from 'utils/utilTypes'\nimport { Box } from '../Box'\nimport { Icon } from '../Icon'\nimport { Icons } from '../Icon/iconsList'\n\nimport { Text } from '../Text'\nimport { theme } from '../theme'\nimport { focusOutlineStyle } from '../utils/focusOutline'\nimport { MarginProps } from '../utils/space'\n\nexport type CardProps = {\n  children?: ReactNode\n  /** leading card icon */\n  leadingIcon?: Icons\n  /** generic card title */\n  title?: string\n  /** generic card body */\n  body?: string\n  /** card image */\n  visual?: string\n  /** height of the image */\n  visualHeight?: string\n  /** card tag */\n  tag?: ReactNode\n  /** action for a fully clickable card */\n  cardOnClickAction?: MouseEventHandler<HTMLDivElement>\n  /** action to the right of the card, chevron, chip or link text */\n  rightAction?: ReactNode\n  /** primary button */\n  buttonAction?: ReactNode\n  /** fallback color scheme */\n  fallbackStyle?: boolean\n  className?: string\n  /** margin */\n  maxWidth?: string\n  /** left-right margin */\n  marginX?: string\n  /** top-bottom margin */\n  marginY?: string\n  /** Narrow padding */\n  narrow?: boolean\n  /** Wide padding */\n  wide?: boolean\n} & MarginProps\n\nexport const Card: FC<CardProps> = ({\n  children,\n  leadingIcon,\n  title,\n  body,\n  visual,\n  tag,\n  cardOnClickAction,\n  rightAction,\n  buttonAction,\n  fallbackStyle = false,\n  visualHeight = '',\n  className = '',\n  maxWidth = '',\n  marginX = '',\n  marginY = '',\n  narrow = false,\n  wide = false,\n  ...otherProps\n}) => {\n  const addChildMargin = (!!leadingIcon || !!title || !!body) && children\n\n  const isNotClickable = !cardOnClickAction\n\n  return (\n    <Container\n      className={className}\n      $maxWidth={maxWidth}\n      $marginX={marginX}\n      $marginY={marginY}\n      $narrow={narrow}\n      $wide={wide}\n      $visual={visual}\n      $fallbackStyle={fallbackStyle}\n      $isNotClickable={isNotClickable}\n      onClick={cardOnClickAction}\n      tabIndex={isNotClickable ? undefined : 0}\n      {...otherProps}\n    >\n      {tag && visual && <TagWrapper>{tag}</TagWrapper>}\n      {visual && (\n        <VisualWrapper $visualHeight={visualHeight}>\n          <Visual $visualUrl={visual} $visualHeight={visualHeight} />\n        </VisualWrapper>\n      )}\n      <Box p={visual ? '16px' : { custom: '0px' }}>\n        <Box flex alignItems=\"center\" justifyContent=\"space-between\">\n          <Box flex alignItems=\"center\">\n            {leadingIcon && (\n              <Icon\n                mr=\"12px\"\n                render={leadingIcon}\n                size={24}\n                color=\"liquorice\"\n              />\n            )}\n            <Box>\n              {title && (\n                <Text typo=\"headline-regular\" color=\"liquorice\">\n                  {title}\n                </Text>\n              )}\n              {body && (\n                <Text typo=\"body-regular\" color=\"sesame\">\n                  {body}\n                </Text>\n              )}\n            </Box>\n          </Box>\n          {rightAction && rightAction}\n        </Box>\n        <Box mt={addChildMargin ? '16px' : { custom: '0px' }}>{children}</Box>\n        {buttonAction && <Box mt=\"16px\">{buttonAction}</Box>}\n      </Box>\n    </Container>\n  )\n}\n\ntype ICard = TransientProps<\n  Required<\n    Pick<\n      CardProps,\n      'maxWidth' | 'marginX' | 'marginY' | 'narrow' | 'wide' | 'fallbackStyle'\n    >\n  >\n> &\n  Partial<TransientProps<Pick<CardProps, 'visual'>>> & {\n    $isNotClickable?: boolean\n  }\n\nconst Container = styled(Box)<ICard>`\n  background: ${({ $fallbackStyle }) =>\n    $fallbackStyle ? theme.colors.cream : theme.colors.custard};\n  box-sizing: border-box;\n  border-radius: 16px;\n\n  max-width: ${(p) => p.$maxWidth};\n  margin-top: ${(p) => p.$marginY};\n  margin-right: ${(p) => p.$marginX};\n  margin-bottom: ${(p) => p.$marginY};\n  margin-left: ${(p) => p.$marginX};\n\n  padding: ${({ $visual }) => ($visual ? '0px' : '16px')};\n  position: relative;\n  overflow: hidden;\n\n  ${({ $isNotClickable, $fallbackStyle }) =>\n    !$isNotClickable &&\n    css`\n      cursor: pointer;\n      &:hover {\n        background: ${darken(\n          0.1,\n          $fallbackStyle ? theme.colors.cream : theme.colors.custard,\n        )};\n      }\n\n      ${focusOutlineStyle}\n    `};\n`\n\nconst TagWrapper = styled(Box)`\n  position: absolute;\n  top: 12px;\n  right: 12px;\n`\n\nconst VisualWrapper = styled(Box)<{ $visualHeight: string }>`\n  width: 100%;\n  margin-top: -16px;\n\n  ${({ $visualHeight }) => $visualHeight && `height: ${$visualHeight};`}\n`\n\nconst Visual = styled(Box)<{ $visualUrl: string; $visualHeight: string }>`\n  width: 100%;\n  background-image: url('${(p) => p.$visualUrl}');\n  background-size: cover;\n  background-repeat: no-repeat;\n  background-position: center;\n\n  ${({ $visualHeight }) =>\n    $visualHeight ? `height: ${$visualHeight};` : 'padding-top: 100%;'}\n`\n"]}

package/dist/Card/index.d.ts

@@ -0,0 +1 @@
+export { Card } from './Card';

package/dist/Card/index.js

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