@mrshmllw/smores-react 6.0.1 → 6.0.2

package/dist/BrandCard/BrandCard.js

@@ -1,86 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import styled from 'styled-components';
-import { theme } from '../theme.js';
-import { Box } from '../Box/Box.js';
-import { Text } from '../Text/Text.js';
-
-const BrandCard = ({
-  title,
-  body,
-  visual,
-  visualHeight = "",
-  alignVisual,
-  visualBottom,
-  tag,
-  buttonAction,
-  fallbackStyle = false,
-  bgColour = "matcha",
-  maxWidth = "",
-  ...otherProps
-}) => {
-  return /* @__PURE__ */ jsxs(
-    Container,
-    {
-      maxWidth,
-      visual,
-      fallbackStyle,
-      bgColor: bgColour,
-      ...otherProps,
-      children: [
-        tag && /* @__PURE__ */ jsx(TagWrapper, { children: tag }),
-        visual && !visualBottom && /* @__PURE__ */ jsx(VisualWrapper, { visualHeight, children: /* @__PURE__ */ jsx(
-          Visual,
-          {
-            visualUrl: visual,
-            visualHeight,
-            alignVisual
-          }
-        ) }),
-        /* @__PURE__ */ jsx(Box, { flex: true, alignItems: "center", justifyContent: "space-between", mt: "16px", children: /* @__PURE__ */ jsx(Box, { flex: true, alignItems: "center", children: /* @__PURE__ */ jsxs(Box, { children: [
-          title && /* @__PURE__ */ jsx(Text, { typo: "hero-alternate", color: "liquorice", children: title }),
-          body && /* @__PURE__ */ jsx(Text, { typo: "body-regular", color: "liquorice", children: body })
-        ] }) }) }),
-        buttonAction && /* @__PURE__ */ jsx(Box, { mt: "16px", children: buttonAction }),
-        visual && visualBottom && /* @__PURE__ */ jsx(VisualWrapper, { visualHeight, mt: "16px", children: /* @__PURE__ */ jsx(
-          Visual,
-          {
-            visualUrl: visual,
-            visualHeight,
-            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%;"}
-`;
-
-export { BrandCard };
-//# sourceMappingURL=BrandCard.js.map

package/dist/BrandCard/BrandCard.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"BrandCard.js","sources":["../../src/BrandCard/BrandCard.tsx"],"sourcesContent":["import React, { FC, ReactNode } from 'react'\nimport styled from 'styled-components'\nimport { MarginProps } from '../utils/space'\nimport { Color, theme } from '../theme'\nimport { Box } from '../Box'\nimport { Text } from '../Text'\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  bgColour: 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  bgColour = 'matcha',\n  maxWidth = '',\n  ...otherProps\n}) => {\n  return (\n    <Container\n      maxWidth={maxWidth}\n      visual={visual}\n      fallbackStyle={fallbackStyle}\n      bgColor={bgColour}\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  visual?: string\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"],"names":[],"mappings":"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"}

package/dist/Button/Button.js

@@ -1,193 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import styled, { css } from 'styled-components';
-import { Box } from '../Box/Box.js';
-import { Icon } from '../Icon/Icon.js';
-import { Loader } from '../Loader/Loader.js';
-import { theme } from '../theme.js';
-import { focusOutlineStyle } from '../utils/focusOutline.js';
-
-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 /* @__PURE__ */ jsxs(
-    Container,
-    {
-      as: "button",
-      id,
-      className,
-      disabled: disabled || loading,
-      onClick: handleClick,
-      $loading: loading,
-      primary,
-      secondary,
-      fallbackStyle,
-      textBtn,
-      smallButton,
-      icon,
-      trailingIcon,
-      forcedWidth,
-      ...form ? { form } : {},
-      type,
-      ...otherProps,
-      ref,
-      children: [
-        loading && /* @__PURE__ */ jsx(LoaderContainer, { children: /* @__PURE__ */ jsx(Loader, { color: "liquorice", height: "16" }) }),
-        /* @__PURE__ */ jsxs(ContentContainer, { icon, $loading: loading, children: [
-          !trailingIcon && icon && /* @__PURE__ */ jsx(
-            IconContainer,
-            {
-              trailingIcon,
-              render: icon,
-              size: smallButton ? 16 : 24,
-              color: "liquorice"
-            }
-          ),
-          /* @__PURE__ */ jsx(ChildrenContainer, { className: "childrenContainer", children }),
-          trailingIcon && icon && textBtn && /* @__PURE__ */ jsx(
-            IconContainer,
-            {
-              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(Icon)(
-  ({ trailingIcon }) => css`
-    margin: ${trailingIcon ? "0 0 0 10px" : "0 10px 0 0"};
-  `
-);
-const ChildrenContainer = styled.div`
-  padding: 16px 0;
-  flex-grow: 1;
-`;
-
-export { Button };
-//# sourceMappingURL=Button.js.map

package/dist/Button/Button.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Button.js","sources":["../../src/Button/Button.tsx"],"sourcesContent":["import React, { ButtonHTMLAttributes, FC, ReactNode, forwardRef } from 'react'\nimport styled, { css } from 'styled-components'\n\nimport { Icons } from 'Icon/iconsList'\nimport { Box } from '../Box'\nimport { Icon as IconComponent } from '../Icon'\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      as=\"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      icon={icon}\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 = Required<\n  Pick<\n    ButtonProps,\n    | 'disabled'\n    | 'primary'\n    | 'secondary'\n    | 'forcedWidth'\n    | 'fallbackStyle'\n    | 'textBtn'\n    | 'trailingIcon'\n    | 'smallButton'\n  >\n> & {\n  $loading: NonNullable<ButtonProps['loading']>\n  icon?: Icons\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<\n  Pick<ButtonProps, 'icon'> & { $loading: boolean }\n>`\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)<Pick<ButtonProps, 'trailingIcon'>>(\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"],"names":["IconComponent"],"mappings":"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"}

package/dist/Card/Card.js

@@ -1,125 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { darken } from 'polished';
-import styled, { css } from 'styled-components';
-import { Box } from '../Box/Box.js';
-import { Icon } from '../Icon/Icon.js';
-import { Text } from '../Text/Text.js';
-import { theme } from '../theme.js';
-import { focusOutlineStyle } from '../utils/focusOutline.js';
-
-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 /* @__PURE__ */ jsxs(
-    Container,
-    {
-      className,
-      maxWidth,
-      marginX,
-      marginY,
-      narrow,
-      wide,
-      visual,
-      fallbackStyle,
-      isNotClickable,
-      onClick: cardOnClickAction,
-      tabIndex: isNotClickable ? void 0 : 0,
-      ...otherProps,
-      children: [
-        tag && visual && /* @__PURE__ */ jsx(TagWrapper, { children: tag }),
-        visual && /* @__PURE__ */ jsx(VisualWrapper, { visualHeight, children: /* @__PURE__ */ jsx(Visual, { visualUrl: visual, visualHeight }) }),
-        /* @__PURE__ */ jsxs(Box, { p: visual ? "16px" : { custom: "0px" }, children: [
-          /* @__PURE__ */ jsxs(Box, { flex: true, alignItems: "center", justifyContent: "space-between", children: [
-            /* @__PURE__ */ jsxs(Box, { flex: true, alignItems: "center", children: [
-              leadingIcon && /* @__PURE__ */ jsx(
-                Icon,
-                {
-                  mr: "12px",
-                  render: leadingIcon,
-                  size: 24,
-                  color: "liquorice"
-                }
-              ),
-              /* @__PURE__ */ jsxs(Box, { children: [
-                title && /* @__PURE__ */ jsx(Text, { typo: "headline-regular", color: "liquorice", children: title }),
-                body && /* @__PURE__ */ jsx(Text, { typo: "body-regular", color: "sesame", children: body })
-              ] })
-            ] }),
-            rightAction && rightAction
-          ] }),
-          /* @__PURE__ */ jsx(Box, { mt: addChildMargin ? "16px" : { custom: "0px" }, children }),
-          buttonAction && /* @__PURE__ */ jsx(Box, { mt: "16px", children: 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%;"}
-`;
-
-export { Card };
-//# sourceMappingURL=Card.js.map

package/dist/Card/Card.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Card.js","sources":["../../src/Card/Card.tsx"],"sourcesContent":["import { darken } from 'polished'\nimport React, { FC, MouseEventHandler, ReactNode } from 'react'\nimport styled, { css } from 'styled-components'\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 = Required<\n  Pick<\n    CardProps,\n    'maxWidth' | 'marginX' | 'marginY' | 'narrow' | 'wide' | 'fallbackStyle'\n  >\n> &\n  Partial<Pick<CardProps, 'visual'> & { isNotClickable: boolean }>\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"],"names":[],"mappings":"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"}

package/dist/CheckBox/CheckBox.js

@@ -1,129 +0,0 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import styled from 'styled-components';
-import { focusOutline } from '../utils/focusOutline.js';
-import { Text } from '../Text/Text.js';
-import { theme } from '../theme.js';
-import { useUniqueId } from '../utils/id.js';
-
-const CheckBox = forwardRef(
-  function CheckBox2({ id: idProp, checked, children, toggle, error, errorMsg }, ref) {
-    const id = useUniqueId(idProp);
-    return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsxs(BoxContainer, { id, children: [
-        /* @__PURE__ */ jsx(
-          Text,
-          {
-            tag: "span",
-            typo: "base",
-            color: error ? "strawberry" : "liquorice",
-            children
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            ref,
-            type: "checkbox",
-            checked,
-            onChange: toggle
-          }
-        ),
-        /* @__PURE__ */ jsx(Checkmark, { error })
-      ] }),
-      error && errorMsg && /* @__PURE__ */ jsx(ErrorBox, { children: errorMsg })
-    ] });
-  }
-);
-const Checkmark = styled.span`
-  position: absolute;
-  left: 0;
-  width: 24px;
-  height: 24px;
-  border: ${({ error }) => error ? `solid 2px ${theme.colors.strawberry}` : `solid 2px ${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: 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`
-  position: relative;
-  display: flex;
-  align-items: flex-start;
-  padding-left: 32px;
-  user-select: none;
-  cursor: pointer;
-
-  input {
-    position: absolute;
-    opacity: 0;
-    cursor: pointer;
-    background-color: ${theme.colors.cream};
-
-    &:checked ~ ${Checkmark} {
-      background-color: ${theme.colors.liquorice};
-      border: solid 2px ${theme.colors.liquorice};
-    }
-
-    &:checked ~ ${Checkmark}:before {
-      display: block;
-    }
-
-    &:checked ~ ${Checkmark}:after {
-      display: block;
-    }
-
-    ${focusOutline({ selector: `&:focus-visible ~ ${Checkmark}` })}
-  }
-
-  &:hover {
-    ${Checkmark} {
-      background-color: ${theme.colors.coconut};
-      border: solid 2px ${theme.colors.liquorice};
-    }
-  }
-
-  @media (min-width: 768px) {
-    padding-left: 32px;
-  }
-
-  span {
-    border-radius: 6px;
-  }
-`;
-const ErrorBox = styled.span`
-  padding-top: 8px;
-  font-size: 12px;
-  color: ${theme.colors.strawberry};
-`;
-
-export { CheckBox };
-//# sourceMappingURL=CheckBox.js.map

package/dist/CheckBox/CheckBox.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"CheckBox.js","sources":["../../src/CheckBox/CheckBox.tsx"],"sourcesContent":["import React, { forwardRef, ReactNode } from 'react'\nimport styled from 'styled-components'\nimport { focusOutline } from '../utils/focusOutline'\n\nimport { Text } from '../Text'\nimport { theme } from '../theme'\nimport { useUniqueId } from '../utils/id'\n\nexport type CheckBoxProps = {\n  id?: string\n  checked: boolean\n  children: ReactNode\n  toggle: () => void\n  error?: boolean\n  errorMsg?: string\n}\n\nexport const CheckBox = forwardRef<HTMLInputElement, CheckBoxProps>(\n  function CheckBox(\n    { id: idProp, checked, children, toggle, error, errorMsg },\n    ref,\n  ) {\n    const id = useUniqueId(idProp)\n    return (\n      <>\n        <BoxContainer id={id}>\n          <Text\n            tag=\"span\"\n            typo=\"base\"\n            color={error ? 'strawberry' : 'liquorice'}\n          >\n            {children}\n          </Text>\n\n          <input\n            ref={ref}\n            type=\"checkbox\"\n            checked={checked}\n            onChange={toggle}\n          />\n          <Checkmark error={error} />\n        </BoxContainer>\n        {error && errorMsg && <ErrorBox>{errorMsg}</ErrorBox>}\n      </>\n    )\n  },\n)\n\nconst Checkmark = styled.span<{ error?: boolean }>`\n  position: absolute;\n  left: 0;\n  width: 24px;\n  height: 24px;\n  border: ${({ error }) =>\n    error\n      ? `solid 2px ${theme.colors.strawberry}`\n      : `solid 2px ${theme.colors.liquorice}`};\n  box-sizing: border-box;\n  border-radius: 1px;\n\n  &:before {\n    content: '';\n    position: absolute;\n    display: none;\n    top: 9px;\n    left: 5px;\n    width: 3px;\n    height: 8px;\n    border-radius: 4px;\n    background-color: ${theme.colors.cream};\n    -webkit-transform: rotate(316deg);\n    -ms-transform: rotate(316deg);\n    transform: rotate(316deg);\n  }\n\n  &:after {\n    content: '';\n    position: absolute;\n    display: none;\n    top: 3px;\n    left: 11px;\n    width: 3px;\n    height: 15px;\n    border-radius: 4px;\n    background-color: ${theme.colors.cream};\n    -webkit-transform: rotate(43deg);\n    -ms-transform: rotate(43deg);\n    transform: rotate(43deg);\n  }\n`\n\nconst BoxContainer = styled.label`\n  position: relative;\n  display: flex;\n  align-items: flex-start;\n  padding-left: 32px;\n  user-select: none;\n  cursor: pointer;\n\n  input {\n    position: absolute;\n    opacity: 0;\n    cursor: pointer;\n    background-color: ${theme.colors.cream};\n\n    &:checked ~ ${Checkmark} {\n      background-color: ${theme.colors.liquorice};\n      border: solid 2px ${theme.colors.liquorice};\n    }\n\n    &:checked ~ ${Checkmark}:before {\n      display: block;\n    }\n\n    &:checked ~ ${Checkmark}:after {\n      display: block;\n    }\n\n    ${focusOutline({ selector: `&:focus-visible ~ ${Checkmark}` })}\n  }\n\n  &:hover {\n    ${Checkmark} {\n      background-color: ${theme.colors.coconut};\n      border: solid 2px ${theme.colors.liquorice};\n    }\n  }\n\n  @media (min-width: 768px) {\n    padding-left: 32px;\n  }\n\n  span {\n    border-radius: 6px;\n  }\n`\n\nconst ErrorBox = styled.span`\n  padding-top: 8px;\n  font-size: 12px;\n  color: ${theme.colors.strawberry};\n`\n"],"names":["CheckBox"],"mappings":";;;;;;;;AAiBO,MAAM,QAAW,GAAA,UAAA;AAAA,EACtB,SAASA,SACP,CAAA,EAAE,EAAI,EAAA,MAAA,EAAQ,OAAS,EAAA,QAAA,EAAU,MAAQ,EAAA,KAAA,EAAO,QAAS,EAAA,EACzD,GACA,EAAA;AACA,IAAM,MAAA,EAAA,GAAK,YAAY,MAAM,CAAA,CAAA;AAC7B,IAAA,uBAEI,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,sBAAA,IAAA,CAAC,gBAAa,EACZ,EAAA,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,IAAA;AAAA,UAAA;AAAA,YACC,GAAI,EAAA,MAAA;AAAA,YACJ,IAAK,EAAA,MAAA;AAAA,YACL,KAAA,EAAO,QAAQ,YAAe,GAAA,WAAA;AAAA,YAE7B,QAAA;AAAA,WAAA;AAAA,SACH;AAAA,wBAEA,GAAA;AAAA,UAAC,OAAA;AAAA,UAAA;AAAA,YACC,GAAA;AAAA,YACA,IAAK,EAAA,UAAA;AAAA,YACL,OAAA;AAAA,YACA,QAAU,EAAA,MAAA;AAAA,WAAA;AAAA,SACZ;AAAA,wBACA,GAAA,CAAC,aAAU,KAAc,EAAA,CAAA;AAAA,OAC3B,EAAA,CAAA;AAAA,MACC,KAAS,IAAA,QAAA,oBAAa,GAAA,CAAA,QAAA,EAAA,EAAU,QAAS,EAAA,QAAA,EAAA,CAAA;AAAA,KAC5C,EAAA,CAAA,CAAA;AAAA,GAEJ;AACF,EAAA;AAEA,MAAM,YAAY,MAAO,CAAA,IAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAAA,EAKb,CAAC,EAAE,KAAM,EAAA,KACjB,QACI,CAAa,UAAA,EAAA,KAAA,CAAM,MAAO,CAAA,UAAU,CACpC,CAAA,GAAA,CAAA,UAAA,EAAa,KAAM,CAAA,MAAA,CAAO,SAAS,CAAE,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAarB,EAAA,KAAA,CAAM,OAAO,KAAK,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAelB,EAAA,KAAA,CAAM,OAAO,KAAK,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAA,CAAA;AAO1C,MAAM,eAAe,MAAO,CAAA,KAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAYJ,EAAA,KAAA,CAAM,OAAO,KAAK,CAAA;AAAA;AAAA,gBAAA,EAExB,SAAS,CAAA;AAAA,wBACD,EAAA,KAAA,CAAM,OAAO,SAAS,CAAA;AAAA,wBACtB,EAAA,KAAA,CAAM,OAAO,SAAS,CAAA;AAAA;AAAA;AAAA,gBAAA,EAG9B,SAAS,CAAA;AAAA;AAAA;AAAA;AAAA,gBAAA,EAIT,SAAS,CAAA;AAAA;AAAA;AAAA;AAAA,IAAA,EAIrB,aAAa,EAAE,QAAA,EAAU,qBAAqB,SAAS,CAAA,CAAA,EAAI,CAAC,CAAA;AAAA;AAAA;AAAA;AAAA,IAAA,EAI5D,SAAS,CAAA;AAAA,wBACW,EAAA,KAAA,CAAM,OAAO,OAAO,CAAA;AAAA,wBACpB,EAAA,KAAA,CAAM,OAAO,SAAS,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAA,CAAA;AAahD,MAAM,WAAW,MAAO,CAAA,IAAA,CAAA;AAAA;AAAA;AAAA,SAGb,EAAA,KAAA,CAAM,OAAO,UAAU,CAAA;AAAA,CAAA;;;;"}

package/dist/CheckBoxGroup/CheckBoxGroup.js

@@ -1,28 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import styled from 'styled-components';
-import { Box } from '../Box/Box.js';
-import { CheckBox } from '../CheckBox/CheckBox.js';
-
-const CheckBoxGroup = ({
-  list,
-  onToggle,
-  ...marginProps
-}) => /* @__PURE__ */ jsx(Container, { children: list.map((item) => /* @__PURE__ */ jsx(
-  CheckBox,
-  {
-    id: String(item.id),
-    checked: item.checked,
-    toggle: () => onToggle(item.id),
-    ...marginProps,
-    children: item.label
-  },
-  item.id
-)) });
-const Container = styled(Box)`
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-`;
-
-export { CheckBoxGroup };
-//# sourceMappingURL=CheckBoxGroup.js.map

package/dist/CheckBoxGroup/CheckBoxGroup.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"CheckBoxGroup.js","sources":["../../src/CheckBoxGroup/CheckBoxGroup.tsx"],"sourcesContent":["import React, { FC } from 'react'\nimport styled from 'styled-components'\n\nimport { Box } from '../Box'\nimport { CheckBox } from '../CheckBox'\nimport { MarginProps } from '../utils/space'\n\ntype Item = {\n  id: number\n  label: string\n  checked: boolean\n}\n\ntype CheckBoxGroupProps = {\n  list: Item[]\n  onToggle: (id: number) => void\n} & MarginProps\n\nexport const CheckBoxGroup: FC<CheckBoxGroupProps> = ({\n  list,\n  onToggle,\n  ...marginProps\n}) => (\n  <Container>\n    {list.map((item) => (\n      <CheckBox\n        key={item.id}\n        id={String(item.id)}\n        checked={item.checked}\n        toggle={() => onToggle(item.id)}\n        {...marginProps}\n      >\n        {item.label}\n      </CheckBox>\n    ))}\n  </Container>\n)\n\nconst Container = styled(Box)`\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n`\n"],"names":[],"mappings":";;;;;AAkBO,MAAM,gBAAwC,CAAC;AAAA,EACpD,IAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG,WAAA;AACL,CAAA,qBACG,GAAA,CAAA,SAAA,EAAA,EACE,QAAK,EAAA,IAAA,CAAA,GAAA,CAAI,CAAC,IACT,qBAAA,GAAA;AAAA,EAAC,QAAA;AAAA,EAAA;AAAA,IAEC,EAAA,EAAI,MAAO,CAAA,IAAA,CAAK,EAAE,CAAA;AAAA,IAClB,SAAS,IAAK,CAAA,OAAA;AAAA,IACd,MAAQ,EAAA,MAAM,QAAS,CAAA,IAAA,CAAK,EAAE,CAAA;AAAA,IAC7B,GAAG,WAAA;AAAA,IAEH,QAAK,EAAA,IAAA,CAAA,KAAA;AAAA,GAAA;AAAA,EAND,IAAK,CAAA,EAAA;AAOZ,CACD,CACH,EAAA,EAAA;AAGF,MAAM,SAAA,GAAY,OAAO,GAAG,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA,CAAA;;;;"}