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

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

@@ -1,4 +1,4 @@
-import { default as React, ElementType, HTMLAttributes } from 'react';
+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';
@@ -11,4 +11,4 @@ export declare const Box: React.ForwardRefExoticComponent<MarginProps & PaddingP
     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;
+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.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/Button/Button.d.ts

@@ -1,4 +1,4 @@
-import { default as React, ButtonHTMLAttributes, FC, ReactNode } from 'react';
+import React, { ButtonHTMLAttributes, FC, ReactNode } from 'react';
 import { Icons } from '../Icon/iconsList';
 import { MarginProps } from '../utils/space';
 type Props = {

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":"AAAA,OAAO,KAAK,EAAE,EAAuC,UAAU,EAAE,MAAM,OAAO,CAAA;AAC9E,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAG/C,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,IAAI,IAAI,aAAa,EAAE,MAAM,SAAS,CAAA;AAG/C,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAClC,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAChC,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAA;AAyBzD,MAAM,CAAC,MAAM,MAAM,GAAoB,UAAU,CAG/C,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACf,MAAM,EACJ,QAAQ,EACR,EAAE,EACF,SAAS,GAAG,EAAE,EACd,QAAQ,GAAG,KAAK,EAChB,WAAW,EACX,OAAO,GAAG,KAAK,EACf,OAAO,GAAG,KAAK,EACf,SAAS,GAAG,KAAK,EACjB,aAAa,GAAG,KAAK,EACrB,OAAO,GAAG,KAAK,EACf,WAAW,GAAG,KAAK,EACnB,IAAI,EACJ,YAAY,GAAG,KAAK,EACpB,WAAW,GAAG,EAAE,EAChB,IAAI,EACJ,IAAI,EACJ,GAAG,UAAU,EACd,GAAG,KAAK,CAAA;IAET,OAAO,CACL,oBAAC,SAAS,IACR,WAAW,EAAC,QAAQ,EACpB,EAAE,EAAE,EAAE,EACN,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,IAAI,OAAO,EAC7B,OAAO,EAAE,WAAW,cACV,OAAO,cACP,OAAO,gBACL,SAAS,oBACL,aAAa,cACnB,OAAO,kBACH,WAAW,mBACV,YAAY,kBACb,WAAW,KACrB,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EAC1B,IAAI,EAAE,IAAI,KACN,UAAU,EACd,GAAG,EAAE,GAAG;QAEP,OAAO,IAAI,CACV,oBAAC,eAAe;YACd,oBAAC,MAAM,IAAC,KAAK,EAAE,WAAW,EAAE,MAAM,EAAC,IAAI,GAAG,CAC1B,CACnB;QACD,oBAAC,gBAAgB,aAAQ,IAAI,cAAY,OAAO;YAC7C,CAAC,YAAY,IAAI,IAAI,IAAI,CACxB,oBAAC,aAAa,qBACG,YAAY,EAC3B,MAAM,EAAE,IAAI,EACZ,IAAI,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,EAC3B,KAAK,EAAE,WAAW,GAClB,CACH;YACD,oBAAC,iBAAiB,IAAC,SAAS,EAAC,mBAAmB,IAC7C,QAAQ,CACS;YACnB,YAAY,IAAI,IAAI,IAAI,OAAO,IAAI,CAClC,oBAAC,aAAa,qBACG,YAAY,EAC3B,MAAM,EAAE,IAAI,EACZ,IAAI,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,EAC3B,KAAK,EAAE,WAAW,EAClB,SAAS,EAAC,eAAe,GACzB,CACH,CACgB,CACT,CACb,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAA;AAoB7B,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,CAC3B,CAAC,EACC,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,YAAY,EACZ,cAAc,EACd,QAAQ,EACR,YAAY,GACb,EAAE,EAAE,CAAC,GAAG,CAAA;;wBAEa,KAAK,CAAC,MAAM,CAAC,eAAe;;aAEvC,KAAK,CAAC,MAAM,CAAC,SAAS;;;;mBAIhB,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM;cAC7B,QAAQ,IAAI,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS;;;eAG/C,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG;aACxB,YAAY,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM;;MAE3C,iBAAiB;;MAEjB,QAAQ;IACV,GAAG,CAAA;eACQ,KAAK,CAAC,MAAM,CAAC,SAAS;;;4BAGT,CAAC,CAAC,QAAQ,IAAI,QAAQ,CAAC,IAAI,KAAK,CAAC,MAAM,CAAC,SAAS;;;4BAGjD,KAAK,CAAC,MAAM,CAAC,QAAQ;;KAE5C;MACC,UAAU;IACZ,GAAG,CAAA;0BACmB,KAAK,CAAC,MAAM,CAAC,OAAO;;;4BAGlB,CAAC,CAAC,QAAQ,IAAI,QAAQ,CAAC,IAAI,KAAK,CAAC,MAAM,CAAC,UAAU;;;4BAGlD,KAAK,CAAC,MAAM,CAAC,OAAO;;KAE3C;IACD,cAAc;IACd,GAAG,CAAA;0BACmB,KAAK,CAAC,MAAM,CAAC,KAAK;;;4BAGhB,CAAC,CAAC,QAAQ,IAAI,QAAQ,CAAC,IAAI,KAAK,CAAC,MAAM,CAAC,OAAO;;;4BAG/C,KAAK,CAAC,MAAM,CAAC,UAAU;;KAE9C;IACD,YAAY;IACZ,GAAG,CAAA;;;;;;;;;;;;KAYF;IACD,QAAQ;IACR,GAAG,CAAA;;;;;;;4BAOqB,CAAC,CAAC,QAAQ,IAAI,QAAQ,CAAC,IAAI,KAAK,CAAC,MAAM,CAAC,UAAU;;;;iBAI7D,KAAK,CAAC,MAAM,CAAC,MAAM;;KAE/B;GACF,CACF,CAAA;AAED,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;CASjC,CAAA;AAED,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAsC;;;qBAGpD,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,QAAQ,CAAC;aAC1D,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC;CACpD,CAAA;AAED,MAAM,aAAa,GAAG,MAAM,CAAC,aAAa,CAAC,CAGzC,CAAC,EAAE,aAAa,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;cACd,aAAa,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,YAAY;GACtD,CACF,CAAA;AAED,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAA;;;CAGnC,CAAA","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.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.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.js

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

package/dist/Card/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Card/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA","sourcesContent":["export { Card } from './Card'\n"]}

package/dist/CheckBox/CheckBox.d.ts

@@ -1,4 +1,4 @@
-import { default as React, ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 export type CheckBoxProps = {
     id?: string;
     checked: boolean;

package/dist/CheckBox/CheckBox.js

@@ -0,0 +1,107 @@
+import React, { forwardRef } from 'react';
+import styled from 'styled-components';
+import { focusOutline } from '../utils/focusOutline';
+import { Text } from '../Text';
+import { theme } from '../theme';
+import { useUniqueId } from '../utils/id';
+export const CheckBox = forwardRef(function CheckBox({ id: idProp, checked, children, toggle, error, errorMsg }, ref) {
+    const id = useUniqueId(idProp);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(BoxContainer, { id: id },
+            React.createElement(Text, { tag: "span", typo: "base", color: error ? 'strawberry' : 'liquorice' }, children),
+            React.createElement("input", { ref: ref, type: "checkbox", checked: checked, onChange: toggle }),
+            React.createElement(Checkmark, { "$error": error })),
+        error && errorMsg && React.createElement(ErrorBox, null, 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};
+`;
+//# sourceMappingURL=CheckBox.js.map

package/dist/CheckBox/CheckBox.js.map

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

package/dist/CheckBox/index.js

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

package/dist/CheckBox/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/CheckBox/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAA","sourcesContent":["export * from './CheckBox'\n"]}

package/dist/CheckBoxGroup/CheckBoxGroup.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Box } from '../Box';
+import { CheckBox } from '../CheckBox';
+export const CheckBoxGroup = ({ list, onToggle, isColumn = true, ...marginProps }) => (React.createElement(Container, { isColumn: isColumn }, list.map((item) => (React.createElement(CheckBox, { key: item.id, id: String(item.id), checked: item.checked, toggle: () => onToggle(item.id), ...marginProps }, item.label)))));
+const Container = styled(Box) `
+  display: flex;
+  flex-direction: ${(p) => (p.isColumn ? 'column' : 'row')};
+  gap: 16px;
+`;
+//# sourceMappingURL=CheckBoxGroup.js.map

package/dist/CheckBoxGroup/CheckBoxGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckBoxGroup.js","sourceRoot":"","sources":["../../src/CheckBoxGroup/CheckBoxGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AACjC,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AAgBtC,MAAM,CAAC,MAAM,aAAa,GAA2B,CAAC,EACpD,IAAI,EACJ,QAAQ,EACR,QAAQ,GAAG,IAAI,EACf,GAAG,WAAW,EACf,EAAE,EAAE,CAAC,CACJ,oBAAC,SAAS,IAAC,QAAQ,EAAE,QAAQ,IAC1B,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAClB,oBAAC,QAAQ,IACP,GAAG,EAAE,IAAI,CAAC,EAAE,EACZ,EAAE,EAAE,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,EACnB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,KAC3B,WAAW,IAEd,IAAI,CAAC,KAAK,CACF,CACZ,CAAC,CACQ,CACb,CAAA;AAED,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,CAAuB;;oBAEhC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC;;CAEzD,CAAA","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  value?: string | number\n}\n\ntype CheckBoxGroupProps = {\n  list: Item[]\n  onToggle: (id: number) => void\n  isColumn?: boolean\n} & MarginProps\n\nexport const CheckBoxGroup: FC<CheckBoxGroupProps> = ({\n  list,\n  onToggle,\n  isColumn = true,\n  ...marginProps\n}) => (\n  <Container isColumn={isColumn}>\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)<{ isColumn: boolean }>`\n  display: flex;\n  flex-direction: ${(p) => (p.isColumn ? 'column' : 'row')};\n  gap: 16px;\n`\n"]}

package/dist/CheckBoxGroup/index.js

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

package/dist/CheckBoxGroup/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/CheckBoxGroup/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAA","sourcesContent":["export * from './CheckBoxGroup'\n"]}

package/dist/Chip/Chip.d.ts

@@ -1,4 +1,4 @@
-import { default as React, ButtonHTMLAttributes, FC, ReactNode } from 'react';
+import React, { ButtonHTMLAttributes, FC, ReactNode } from 'react';
 import { Icons } from '../Icon/iconsList';
 import { MarginProps } from '../utils/space';
 type Props = {

package/dist/Chip/Chip.js

@@ -0,0 +1,53 @@
+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 { focusOutline } from '../utils/focusOutline';
+export const Chip = forwardRef(({ children, handleClick, primary = false, secondary = false, disabled = false, loading = false, icon, ...props }, ref) => (React.createElement(Container, { forwardedAs: "button", "$primary": primary, "$secondary": secondary, disabled: disabled || loading, "$loading": loading, onClick: handleClick, "$icon": icon, ...props, ref: ref, "aria-label": "chip-button" }, loading ? (React.createElement(Loader, { color: primary ? 'liquorice' : 'cream', height: "16" })) : (React.createElement(React.Fragment, null,
+    icon && (React.createElement(IconComponent, { render: icon, size: 16, color: primary ? 'liquorice' : 'cream' })),
+    React.createElement(ChildrenContainer, null, children))))));
+Chip.displayName = 'Chip';
+const Container = styled(Box)(({ $primary, $secondary, $icon, $loading, disabled }) => css `
+    ${focusOutline()}
+
+    align-items: center;
+    background-color: ${theme.colors.oatmeal};
+    border-radius: 100px;
+    border: 2px solid ${theme.colors.oatmeal};
+    color: ${theme.colors.liquorice};
+    display: flex;
+    font-size: 16px;
+    justify-content: ${$icon ? 'space-evenly' : 'center'};
+    line-height: 100%;
+    padding: 8px 16px 8px ${$icon ? '8px' : '16px'};
+    min-width: 98px;
+    min-height: 40px;
+    cursor: ${disabled || $loading ? 'not-allowed' : 'pointer'};
+    opacity: ${disabled ? '0.5' : '1'};
+
+    ${$primary &&
+    css `
+      &:hover {
+        border: ${!(disabled || $loading) &&
+        `2px solid ${theme.colors.mascarpone}`};
+        background-color: ${!(disabled || $loading) && theme.colors.mascarpone};
+      }
+    `}
+    ${$secondary &&
+    css `
+      color: ${theme.colors.cream};
+      background-color: ${theme.colors.liquorice};
+      border: 2px solid ${theme.colors.liquorice};
+      &:hover {
+        border: ${!(disabled || $loading) &&
+        `2px solid ${theme.colors.sesame}`};
+        background-color: ${!(disabled || $loading) && theme.colors.sesame};
+      }
+    `};
+  `);
+const ChildrenContainer = styled.div `
+  flex-grow: 1;
+`;
+//# sourceMappingURL=Chip.js.map

package/dist/Chip/Chip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chip.js","sourceRoot":"","sources":["../../src/Chip/Chip.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { ButtonHTMLAttributes, FC, ReactNode, forwardRef } from 'react'\nimport styled, { css } from 'styled-components'\n\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 { focusOutline } from '../utils/focusOutline'\nimport { MarginProps } from '../utils/space'\n\ninterface IButton {\n  $primary: boolean\n  $secondary: boolean\n  $icon?: Icons\n  $loading: boolean\n  disabled: boolean\n}\n\ntype Props = {\n  children: ReactNode\n  handleClick: (e: React.FormEvent<HTMLButtonElement>) => void\n  primary?: boolean\n  secondary?: boolean\n  icon?: Icons\n  disabled?: boolean\n  loading?: boolean\n} & MarginProps\n\nexport type ChipProps = Props & ButtonHTMLAttributes<HTMLButtonElement>\n\nexport const Chip: FC<ChipProps> = forwardRef<HTMLButtonElement, ChipProps>(\n  (\n    {\n      children,\n      handleClick,\n      primary = false,\n      secondary = false,\n      disabled = false,\n      loading = false,\n      icon,\n      ...props\n    },\n    ref,\n  ) => (\n    <Container\n      forwardedAs=\"button\"\n      $primary={primary}\n      $secondary={secondary}\n      disabled={disabled || loading}\n      $loading={loading}\n      onClick={handleClick}\n      $icon={icon}\n      {...props}\n      ref={ref}\n      aria-label=\"chip-button\"\n    >\n      {loading ? (\n        <Loader color={primary ? 'liquorice' : 'cream'} height=\"16\" />\n      ) : (\n        <>\n          {icon && (\n            <IconComponent\n              render={icon}\n              size={16}\n              color={primary ? 'liquorice' : 'cream'}\n            />\n          )}\n          <ChildrenContainer>{children}</ChildrenContainer>\n        </>\n      )}\n    </Container>\n  ),\n)\n\nChip.displayName = 'Chip'\n\nconst Container = styled(Box)<IButton>(\n  ({ $primary, $secondary, $icon, $loading, disabled }) => css`\n    ${focusOutline()}\n\n    align-items: center;\n    background-color: ${theme.colors.oatmeal};\n    border-radius: 100px;\n    border: 2px solid ${theme.colors.oatmeal};\n    color: ${theme.colors.liquorice};\n    display: flex;\n    font-size: 16px;\n    justify-content: ${$icon ? 'space-evenly' : 'center'};\n    line-height: 100%;\n    padding: 8px 16px 8px ${$icon ? '8px' : '16px'};\n    min-width: 98px;\n    min-height: 40px;\n    cursor: ${disabled || $loading ? 'not-allowed' : 'pointer'};\n    opacity: ${disabled ? '0.5' : '1'};\n\n    ${$primary &&\n    css`\n      &:hover {\n        border: ${!(disabled || $loading) &&\n        `2px solid ${theme.colors.mascarpone}`};\n        background-color: ${!(disabled || $loading) && theme.colors.mascarpone};\n      }\n    `}\n    ${$secondary &&\n    css`\n      color: ${theme.colors.cream};\n      background-color: ${theme.colors.liquorice};\n      border: 2px solid ${theme.colors.liquorice};\n      &:hover {\n        border: ${!(disabled || $loading) &&\n        `2px solid ${theme.colors.sesame}`};\n        background-color: ${!(disabled || $loading) && theme.colors.sesame};\n      }\n    `};\n  `,\n)\n\nconst ChildrenContainer = styled.div`\n  flex-grow: 1;\n`\n"]}

package/dist/Chip/index.js

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

package/dist/Chip/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Chip/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA","sourcesContent":["export { Chip } from './Chip'\n"]}

package/dist/CurrencyInput/CurrencyInput.d.ts

@@ -1,4 +1,4 @@
-import { default as React, FocusEvent, FormEvent } from 'react';
+import React, { FocusEvent, FormEvent } from 'react';
 import { CommonFieldProps } from '../fields/commonFieldTypes';
 export interface Props extends CommonFieldProps {
     placeholder: string;

package/dist/CurrencyInput/CurrencyInput.js

@@ -0,0 +1,51 @@
+import React, { forwardRef, } from 'react';
+import { Box } from '../Box';
+import { Field } from '../fields/Field';
+import { Input, StyledFrontIcon } from '../fields/components/CommonInput';
+import { useUniqueId } from '../utils/id';
+export const CurrencyInput = forwardRef(function CurrencyInput({ id: idProp, placeholder, name, value, decimalNumber = true, onChange, onInputChange, onBlur, min, max, disabled = false, error = false, fallbackStyle, ...fieldProps }, ref) {
+    const id = useUniqueId(idProp);
+    const frontIcon = 'pound-regular';
+    const formatCurrency = (value) => {
+        const decimalIndex = value.indexOf('.');
+        if (!decimalNumber) {
+            return Math.trunc(Number(value)).toString();
+        }
+        if (decimalIndex >= 0 && value.length > decimalIndex + 1) {
+            const fractionalString = value.substring(decimalIndex + 1).substring(0, 2);
+            return `${value.substring(0, decimalIndex)}.${fractionalString}`;
+        }
+        else {
+            return value;
+        }
+    };
+    const applyMinMax = (value) => {
+        const numberValue = Number(value);
+        if (min && numberValue < min)
+            return min.toString();
+        if (max && numberValue > max)
+            return max.toString();
+        return value;
+    };
+    const handleChange = (value) => {
+        if (onChange === undefined)
+            return;
+        const EMPTY_INPUT = '';
+        if (value === EMPTY_INPUT) {
+            onChange(value);
+        }
+        else {
+            const amount = formatCurrency(value);
+            const normalisedValue = applyMinMax(amount);
+            onChange(normalisedValue);
+        }
+    };
+    return (React.createElement(Field, { ...fieldProps, htmlFor: id, error: error },
+        React.createElement(Box, { flex: true, alignItems: "center", justifyContent: "flex-start" },
+            React.createElement(StyledFrontIcon, { "$disabled": disabled, render: frontIcon, color: "sesame" }),
+            React.createElement(Input, { ref: ref, "$error": error, disabled: disabled, type: "number", id: id, name: name, placeholder: placeholder, value: value, "$frontIcon": frontIcon, "$fallbackStyle": fallbackStyle, onChange: (e) => {
+                    onChange && handleChange(e.currentTarget.value);
+                    onInputChange && onInputChange(e);
+                }, onWheel: (e) => e.currentTarget.blur(), onBlur: onBlur }))));
+});
+//# sourceMappingURL=CurrencyInput.js.map