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

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

@@ -0,0 +1,10 @@
+import React, { ReactNode } from 'react';
+export type CheckBoxProps = {
+    id?: string;
+    checked: boolean;
+    children: ReactNode;
+    toggle: () => void;
+    error?: boolean;
+    errorMsg?: string;
+};
+export declare const CheckBox: React.ForwardRefExoticComponent<CheckBoxProps & React.RefAttributes<HTMLInputElement>>;

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.d.ts

@@ -0,0 +1 @@
+export * from './CheckBox';

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.d.ts

@@ -0,0 +1,15 @@
+import { FC } from 'react';
+import { MarginProps } from '../utils/space';
+type Item = {
+    id: number;
+    label: string;
+    checked: boolean;
+    value?: string | number;
+};
+type CheckBoxGroupProps = {
+    list: Item[];
+    onToggle: (id: number) => void;
+    isColumn?: boolean;
+} & MarginProps;
+export declare const CheckBoxGroup: FC<CheckBoxGroupProps>;
+export {};

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.d.ts

@@ -0,0 +1 @@
+export * from './CheckBoxGroup';

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

@@ -0,0 +1,15 @@
+import React, { ButtonHTMLAttributes, FC, ReactNode } from 'react';
+import { Icons } from '../Icon/iconsList';
+import { MarginProps } from '../utils/space';
+type Props = {
+    children: ReactNode;
+    handleClick: (e: React.FormEvent<HTMLButtonElement>) => void;
+    primary?: boolean;
+    secondary?: boolean;
+    icon?: Icons;
+    disabled?: boolean;
+    loading?: boolean;
+} & MarginProps;
+export type ChipProps = Props & ButtonHTMLAttributes<HTMLButtonElement>;
+export declare const Chip: FC<ChipProps>;
+export {};

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.d.ts

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

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

@@ -0,0 +1,24 @@
+import React, { FocusEvent, FormEvent } from 'react';
+import { CommonFieldProps } from '../fields/commonFieldTypes';
+export interface Props extends CommonFieldProps {
+    placeholder: string;
+    name?: string;
+    value: string;
+    decimalNumber?: boolean;
+    onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
+    min?: number;
+    max?: number;
+}
+/** on change or on input required */
+type InputProps = {
+    /** on change is required and on input optional */
+    onChange: (e: string) => void;
+    onInputChange?: (e: FormEvent<HTMLInputElement>) => void;
+} | {
+    /** on input is required and on change optional */
+    onChange?: (e: string) => void;
+    onInputChange: (e: FormEvent<HTMLInputElement>) => void;
+};
+export type CurrencyInputProps = Props & InputProps;
+export declare const CurrencyInput: React.ForwardRefExoticComponent<CurrencyInputProps & React.RefAttributes<HTMLInputElement>>;
+export {};

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

package/dist/CurrencyInput/CurrencyInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CurrencyInput.js","sourceRoot":"","sources":["../../src/CurrencyInput/CurrencyInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, {\n  FocusEvent,\n  FormEvent,\n  ForwardedRef,\n  WheelEvent,\n  forwardRef,\n} from 'react'\n\nimport { Box } from '../Box'\nimport { Field } from '../fields/Field'\nimport { CommonFieldProps } from '../fields/commonFieldTypes'\n\nimport { Input, StyledFrontIcon } from '../fields/components/CommonInput'\nimport { useUniqueId } from '../utils/id'\n\nexport interface Props extends CommonFieldProps {\n  placeholder: string\n  name?: string\n  value: string\n  decimalNumber?: boolean\n  onBlur?: (e: FocusEvent<HTMLInputElement>) => void\n  min?: number\n  max?: number\n}\n\n/** on change or on input required */\ntype InputProps =\n  | {\n      /** on change is required and on input optional */\n      onChange: (e: string) => void\n      onInputChange?: (e: FormEvent<HTMLInputElement>) => void\n    }\n  | {\n      /** on input is required and on change optional */\n      onChange?: (e: string) => void\n      onInputChange: (e: FormEvent<HTMLInputElement>) => void\n    }\n\nexport type CurrencyInputProps = Props & InputProps\n\nexport const CurrencyInput = forwardRef(function CurrencyInput(\n  {\n    id: idProp,\n    placeholder,\n    name,\n    value,\n    decimalNumber = true,\n    onChange,\n    onInputChange,\n    onBlur,\n    min,\n    max,\n    disabled = false,\n    error = false,\n    fallbackStyle,\n    ...fieldProps\n  }: CurrencyInputProps,\n  ref: ForwardedRef<HTMLInputElement>,\n) {\n  const id = useUniqueId(idProp)\n  const frontIcon = 'pound-regular'\n\n  const formatCurrency = (value: string) => {\n    const decimalIndex = value.indexOf('.')\n\n    if (!decimalNumber) {\n      return Math.trunc(Number(value)).toString()\n    }\n\n    if (decimalIndex >= 0 && value.length > decimalIndex + 1) {\n      const fractionalString = value.substring(decimalIndex + 1).substring(0, 2)\n      return `${value.substring(0, decimalIndex)}.${fractionalString}`\n    } else {\n      return value\n    }\n  }\n\n  const applyMinMax = (value: string) => {\n    const numberValue = Number(value)\n    if (min && numberValue < min) return min.toString()\n    if (max && numberValue > max) return max.toString()\n    return value\n  }\n\n  const handleChange = (value: string) => {\n    if (onChange === undefined) return\n    const EMPTY_INPUT = ''\n\n    if (value === EMPTY_INPUT) {\n      onChange(value)\n    } else {\n      const amount = formatCurrency(value)\n      const normalisedValue = applyMinMax(amount)\n\n      onChange(normalisedValue)\n    }\n  }\n\n  return (\n    <Field {...fieldProps} htmlFor={id} error={error}>\n      <Box flex alignItems=\"center\" justifyContent=\"flex-start\">\n        <StyledFrontIcon\n          $disabled={disabled}\n          render={frontIcon}\n          color=\"sesame\"\n        />\n        <Input\n          ref={ref}\n          $error={error}\n          disabled={disabled}\n          type=\"number\"\n          id={id}\n          name={name}\n          placeholder={placeholder}\n          value={value}\n          $frontIcon={frontIcon}\n          $fallbackStyle={fallbackStyle}\n          onChange={(e: FormEvent<HTMLInputElement>) => {\n            onChange && handleChange(e.currentTarget.value)\n            onInputChange && onInputChange(e)\n          }}\n          onWheel={(e: WheelEvent<HTMLInputElement>) => e.currentTarget.blur()}\n          onBlur={onBlur}\n        />\n      </Box>\n    </Field>\n  )\n})\n"]}

package/dist/CurrencyInput/index.d.ts

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

package/dist/CurrencyInput/index.js

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

package/dist/CurrencyInput/index.js.map

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

package/dist/Datepicker/Datepicker.d.ts

@@ -0,0 +1,18 @@
+import { FC } from 'react';
+import { MarginProps } from '../utils/space';
+export type DatepickerProps = {
+    showDayLabels?: boolean;
+    disableWeekend?: boolean;
+    fromDate?: Date;
+    endingDate?: Date;
+    showYear?: boolean;
+    showSelectedDate?: boolean;
+    range?: number;
+    onDateSelect: (date: string) => void;
+    onChange?: (value: Date) => void;
+    value?: Date;
+    /** Disables all dates, defaults to false */
+    disabled?: boolean;
+    fallbackStyle?: boolean;
+} & MarginProps;
+export declare const Datepicker: FC<DatepickerProps>;

package/dist/Datepicker/Datepicker.js

@@ -0,0 +1,133 @@
+import { addDays, eachMonthOfInterval, format, getDaysInMonth, getMonth, getYear, isSameDay, isSameMonth, isWeekend, isWithinInterval, } from 'date-fns';
+import React, { useState } 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 { convertToUkDate } from '../utils/date';
+import { focusOutlineStyle } from '../utils/focusOutline';
+import { useControllableState } from '../utils/useControlledState';
+import { DatesList } from './DatesList';
+const getAvailableMonths = (startDate, endDate) => {
+    const monthList = eachMonthOfInterval({
+        start: startDate,
+        end: endDate,
+    });
+    return monthList.map((monthDate) => ({
+        date: monthDate,
+        label: format(monthDate, 'MMMM'),
+    }));
+};
+export const Datepicker = ({ showDayLabels = false, disableWeekend = true, range = 14, fromDate = new Date(), endingDate, showYear = false, showSelectedDate = false, onDateSelect, onChange, value, disabled, fallbackStyle = false, ...marginProps }) => {
+    // We want to make sure that the date is in the UK timezone,
+    // this might need to be revisit when opening up to new countries
+    const startDate = convertToUkDate(fromDate);
+    const endDate = endingDate ? endingDate : addDays(startDate, range);
+    const availableMonths = getAvailableMonths(startDate, endDate);
+    const selectedDate = value ?? new Date();
+    const [activeDay, setActiveDay] = useControllableState({
+        initialState: undefined,
+        stateProp: value,
+    });
+    const [activeMonthIndex, setActiveMonth] = useState(showSelectedDate
+        ? availableMonths.findIndex((month) => isSameMonth(month.date, selectedDate))
+        : 0);
+    const handleSelectEvent = (date) => {
+        setActiveDay(date);
+        onChange?.(date);
+        onDateSelect(format(date, 'yyyy-MM-dd'));
+    };
+    const generateDaysForMonth = (monthDate) => {
+        const daysInMonth = getDaysInMonth(monthDate);
+        const month = getMonth(monthDate);
+        const year = getYear(monthDate);
+        const filteredDays = [];
+        for (let i = 1; i <= daysInMonth; i += 1) {
+            const date = new Date(year, month, i);
+            filteredDays.push({
+                date,
+                label: format(date, 'dd'),
+                active: activeDay ? isSameDay(date, activeDay) : false,
+                disabled: disabled
+                    ? true
+                    : !isWithinInterval(date, { start: startDate, end: endDate }) ||
+                        (disableWeekend && isWeekend(date)),
+            });
+        }
+        return filteredDays;
+    };
+    return (React.createElement(Container, { id: "datepicker", ...marginProps, "$fallbackStyle": fallbackStyle },
+        React.createElement(Header, { flex: true, alignItems: "center", justifyContent: "space-between", direction: "row" },
+            React.createElement(Circle, { "aria-label": "previous-month", type: "button", "data-testid": "last-month", disabled: activeMonthIndex === 0, onClick: () => setActiveMonth(activeMonthIndex - 1), onKeyDown: (e) => {
+                    if (e.key === 'Enter') {
+                        setActiveMonth(activeMonthIndex - 1);
+                    }
+                } },
+                React.createElement(Icon, { render: "caret", color: "cream", size: 18, rotate: 90 })),
+            React.createElement(Heading, { tag: "h4", typo: "body-regular" },
+                availableMonths[activeMonthIndex]?.label,
+                ' ',
+                showYear && `- ${getYear(availableMonths[activeMonthIndex]?.date)}`),
+            React.createElement(Circle, { "aria-label": "next-month", type: "button", "data-testid": "next-month", disabled: activeMonthIndex === availableMonths.length - 1, onClick: () => setActiveMonth(activeMonthIndex + 1), onKeyDown: (e) => {
+                    if (e.key === 'Enter') {
+                        setActiveMonth(activeMonthIndex + 1);
+                    }
+                } },
+                React.createElement(Icon, { render: "caret", color: "cream", size: 18, rotate: -90 }))),
+        React.createElement(Box, { flex: true, alignItems: "center", justifyContent: "center" },
+            React.createElement(DatesList, { items: generateDaysForMonth(availableMonths[activeMonthIndex]?.date), showDayLabels: showDayLabels, handleDateSelect: handleSelectEvent }))));
+};
+const Container = styled(Box) `
+  font-family: ${theme.font.system};
+  display: inline-block;
+  box-sizing: border-box;
+  outline: none;
+  border-radius: 16px;
+
+  ${({ $fallbackStyle }) => {
+    return $fallbackStyle
+        ? css `
+          background-color: ${theme.colors.cream};
+        `
+        : css `
+          background-color: ${theme.colors.custard};
+        `;
+}}
+`;
+const Header = styled(Box) `
+  color: ${theme.colors.liquorice};
+  user-select: none;
+  padding: 16px;
+  border-bottom: 1px solid ${theme.colors.oatmeal};
+
+  span {
+    font-size: 16px;
+    line-height: 1;
+  }
+`;
+const Heading = styled(Text) `
+  position: relative;
+  top: 2px;
+  font-weight: ${theme.font.weight.medium};
+`;
+const Circle = styled.button `
+  background-color: ${theme.colors.liquorice};
+  height: 32px;
+  width: 32px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  border: none;
+  padding: 0 !important;
+  cursor: pointer;
+
+  :disabled {
+    opacity: 0.5;
+    cursor: default;
+  }
+
+  ${focusOutlineStyle}
+`;
+//# sourceMappingURL=Datepicker.js.map

package/dist/Datepicker/Datepicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Datepicker.js","sourceRoot":"","sources":["../../src/Datepicker/Datepicker.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  addDays,\n  eachMonthOfInterval,\n  format,\n  getDaysInMonth,\n  getMonth,\n  getYear,\n  isSameDay,\n  isSameMonth,\n  isWeekend,\n  isWithinInterval,\n} from 'date-fns'\nimport React, { FC, useState } from 'react'\nimport styled, { css } from 'styled-components'\n\nimport { Box } from '../Box'\nimport { Icon } from '../Icon'\nimport { Text } from '../Text'\nimport { theme } from '../theme'\n\nimport { convertToUkDate } from '../utils/date'\nimport { focusOutlineStyle } from '../utils/focusOutline'\nimport { MarginProps } from '../utils/space'\nimport { useControllableState } from '../utils/useControlledState'\nimport { DatesList } from './DatesList'\n\nconst getAvailableMonths = (startDate: Date, endDate: Date) => {\n  const monthList = eachMonthOfInterval({\n    start: startDate,\n    end: endDate,\n  })\n\n  return monthList.map((monthDate) => ({\n    date: monthDate,\n    label: format(monthDate, 'MMMM'),\n  }))\n}\n\nexport type DatepickerProps = {\n  showDayLabels?: boolean\n  disableWeekend?: boolean\n  fromDate?: Date\n  endingDate?: Date\n  showYear?: boolean\n  showSelectedDate?: boolean\n  range?: number\n  onDateSelect: (date: string) => void\n  onChange?: (value: Date) => void\n  value?: Date\n  /** Disables all dates, defaults to false */\n  disabled?: boolean\n  fallbackStyle?: boolean\n} & MarginProps\n\nexport const Datepicker: FC<DatepickerProps> = ({\n  showDayLabels = false,\n  disableWeekend = true,\n  range = 14,\n  fromDate = new Date(),\n  endingDate,\n  showYear = false,\n  showSelectedDate = false,\n  onDateSelect,\n  onChange,\n  value,\n  disabled,\n  fallbackStyle = false,\n  ...marginProps\n}) => {\n  // We want to make sure that the date is in the UK timezone,\n  // this might need to be revisit when opening up to new countries\n  const startDate = convertToUkDate(fromDate)\n  const endDate = endingDate ? endingDate : addDays(startDate, range)\n  const availableMonths = getAvailableMonths(startDate, endDate)\n\n  const selectedDate = value ?? new Date()\n\n  const [activeDay, setActiveDay] = useControllableState({\n    initialState: undefined,\n    stateProp: value,\n  })\n  const [activeMonthIndex, setActiveMonth] = useState(\n    showSelectedDate\n      ? availableMonths.findIndex((month) =>\n          isSameMonth(month.date, selectedDate),\n        )\n      : 0,\n  )\n\n  const handleSelectEvent = (date: Date) => {\n    setActiveDay(date)\n    onChange?.(date)\n    onDateSelect(format(date, 'yyyy-MM-dd'))\n  }\n\n  const generateDaysForMonth = (monthDate: Date) => {\n    const daysInMonth = getDaysInMonth(monthDate)\n    const month = getMonth(monthDate)\n    const year = getYear(monthDate)\n    const filteredDays = []\n\n    for (let i = 1; i <= daysInMonth; i += 1) {\n      const date = new Date(year, month, i)\n\n      filteredDays.push({\n        date,\n        label: format(date, 'dd'),\n        active: activeDay ? isSameDay(date, activeDay) : false,\n        disabled: disabled\n          ? true\n          : !isWithinInterval(date, { start: startDate, end: endDate }) ||\n            (disableWeekend && isWeekend(date)),\n      })\n    }\n\n    return filteredDays\n  }\n\n  return (\n    <Container id=\"datepicker\" {...marginProps} $fallbackStyle={fallbackStyle}>\n      <Header\n        flex\n        alignItems=\"center\"\n        justifyContent=\"space-between\"\n        direction=\"row\"\n      >\n        <Circle\n          aria-label=\"previous-month\"\n          type=\"button\"\n          data-testid=\"last-month\"\n          disabled={activeMonthIndex === 0}\n          onClick={() => setActiveMonth(activeMonthIndex - 1)}\n          onKeyDown={(e) => {\n            if (e.key === 'Enter') {\n              setActiveMonth(activeMonthIndex - 1)\n            }\n          }}\n        >\n          <Icon render=\"caret\" color=\"cream\" size={18} rotate={90} />\n        </Circle>\n\n        <Heading tag=\"h4\" typo=\"body-regular\">\n          {availableMonths[activeMonthIndex]?.label}{' '}\n          {showYear && `- ${getYear(availableMonths[activeMonthIndex]?.date)}`}\n        </Heading>\n\n        <Circle\n          aria-label=\"next-month\"\n          type=\"button\"\n          data-testid=\"next-month\"\n          disabled={activeMonthIndex === availableMonths.length - 1}\n          onClick={() => setActiveMonth(activeMonthIndex + 1)}\n          onKeyDown={(e) => {\n            if (e.key === 'Enter') {\n              setActiveMonth(activeMonthIndex + 1)\n            }\n          }}\n        >\n          <Icon render=\"caret\" color=\"cream\" size={18} rotate={-90} />\n        </Circle>\n      </Header>\n\n      <Box flex alignItems=\"center\" justifyContent=\"center\">\n        <DatesList\n          items={generateDaysForMonth(availableMonths[activeMonthIndex]?.date)}\n          showDayLabels={showDayLabels}\n          handleDateSelect={handleSelectEvent}\n        />\n      </Box>\n    </Container>\n  )\n}\n\nconst Container = styled(Box)<{ $fallbackStyle: boolean }>`\n  font-family: ${theme.font.system};\n  display: inline-block;\n  box-sizing: border-box;\n  outline: none;\n  border-radius: 16px;\n\n  ${({ $fallbackStyle }) => {\n    return $fallbackStyle\n      ? css`\n          background-color: ${theme.colors.cream};\n        `\n      : css`\n          background-color: ${theme.colors.custard};\n        `\n  }}\n`\n\nconst Header = styled(Box)`\n  color: ${theme.colors.liquorice};\n  user-select: none;\n  padding: 16px;\n  border-bottom: 1px solid ${theme.colors.oatmeal};\n\n  span {\n    font-size: 16px;\n    line-height: 1;\n  }\n`\n\nconst Heading = styled(Text)`\n  position: relative;\n  top: 2px;\n  font-weight: ${theme.font.weight.medium};\n`\n\nconst Circle = styled.button`\n  background-color: ${theme.colors.liquorice};\n  height: 32px;\n  width: 32px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: 50%;\n  border: none;\n  padding: 0 !important;\n  cursor: pointer;\n\n  :disabled {\n    opacity: 0.5;\n    cursor: default;\n  }\n\n  ${focusOutlineStyle}\n`\n"]}

package/dist/Datepicker/DatesList.d.ts

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+import { Day } from './types';
+type Props = {
+    items: Day[];
+    showDayLabels: boolean;
+    handleDateSelect: (date: Date) => void;
+};
+export declare const DatesList: FC<Props>;
+export {};