@mrshmllw/smores-react 2.19.2 → 3.0.0

package/dist/IconStrict/__tests__/IconStrict.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import 'jest-styled-components';
+import { IconStrict } from '../IconStrict';
+test('renders', () => {
+    const { container } = render(React.createElement(IconStrict, { render: "at", size: "48" }));
+    expect(container.firstChild).toMatchSnapshot();
+});
+//# sourceMappingURL=IconStrict.js.map

package/dist/IconStrict/__tests__/IconStrict.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconStrict.js","sourceRoot":"","sources":["../../../src/IconStrict/__tests__/IconStrict.js"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAA;AAC/C,OAAO,wBAAwB,CAAA;AAE/B,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAE1C,IAAI,CAAC,SAAS,EAAE,GAAG,EAAE;IACnB,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,oBAAC,UAAU,IAAC,MAAM,EAAC,IAAI,EAAC,IAAI,EAAC,IAAI,GAAG,CAAC,CAAA;IAClE,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,eAAe,EAAE,CAAA;AAChD,CAAC,CAAC,CAAA"}

package/dist/IconStrict/index.d.ts

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

package/dist/IconStrict/index.js

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

package/dist/IconStrict/index.js.map

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

package/dist/IconWrapper/IconWrapper.js

@@ -18,8 +18,8 @@ export const IconWrapper = (_a) => {
     return (React.createElement(Container, Object.assign({ className: className }, marginProps),
         children,
         React.createElement(IconContainer, { size: size, t: t, r: r, b: b, l: l },
-            render === 'included' && (React.createElement(Icon, { render: "included", size: size, color: "success" })),
-            render === 'excluded' && (React.createElement(Icon, { render: "excluded", size: size, color: "error" })))));
+            render === 'included' && (React.createElement(Icon, { render: "included", size: size, color: "apple" })),
+            render === 'excluded' && (React.createElement(Icon, { render: "excluded", size: size, color: "strawberry" })))));
 };
 const Container = styled(Box) `
   position: relative;

package/dist/IconWrapper/IconWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconWrapper.js","sourceRoot":"","sources":["../../src/IconWrapper/IconWrapper.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAwB,MAAM,OAAO,CAAA;AAC5C,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAE/C,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAmB9B,MAAM,CAAC,MAAM,WAAW,GAAyB,CAAC,EAUjD,EAAE,EAAE;QAV6C,EAChD,SAAS,GAAG,EAAE,EACd,QAAQ,EACR,IAAI,GAAG,EAAE,EACT,MAAM,GAAG,UAAU,EACnB,CAAC,GAAG,MAAM,EACV,CAAC,GAAG,MAAM,EACV,CAAC,GAAG,MAAM,EACV,CAAC,GAAG,MAAM,OAEX,EADI,WAAW,cATkC,+DAUjD,CADe;IACV,OAAA,CACJ,oBAAC,SAAS,kBAAC,SAAS,EAAE,SAAS,IAAM,WAAW;QAC7C,QAAQ;QACT,oBAAC,aAAa,IAAC,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC;YAC9C,MAAM,KAAK,UAAU,IAAI,CACxB,oBAAC,IAAI,IAAC,MAAM,EAAC,UAAU,EAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAC,SAAS,GAAG,CACvD;YACA,MAAM,KAAK,UAAU,IAAI,CACxB,oBAAC,IAAI,IAAC,MAAM,EAAC,UAAU,EAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAC,OAAO,GAAG,CACrD,CACa,CACN,CACb,CAAA;CAAA,CAAA;AAED,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;;;CAG5B,CAAA;AAUD,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAC9B,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;;;iBAGd,IAAI;cACP,IAAI;WACP,CAAC;aACC,CAAC;cACA,CAAC;YACH,CAAC;GACV,CACF,CAAA"}
+{"version":3,"file":"IconWrapper.js","sourceRoot":"","sources":["../../src/IconWrapper/IconWrapper.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAwB,MAAM,OAAO,CAAA;AAC5C,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAE/C,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAmB9B,MAAM,CAAC,MAAM,WAAW,GAAyB,CAAC,EAUjD,EAAE,EAAE;QAV6C,EAChD,SAAS,GAAG,EAAE,EACd,QAAQ,EACR,IAAI,GAAG,EAAE,EACT,MAAM,GAAG,UAAU,EACnB,CAAC,GAAG,MAAM,EACV,CAAC,GAAG,MAAM,EACV,CAAC,GAAG,MAAM,EACV,CAAC,GAAG,MAAM,OAEX,EADI,WAAW,cATkC,+DAUjD,CADe;IACV,OAAA,CACJ,oBAAC,SAAS,kBAAC,SAAS,EAAE,SAAS,IAAM,WAAW;QAC7C,QAAQ;QACT,oBAAC,aAAa,IAAC,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC;YAC9C,MAAM,KAAK,UAAU,IAAI,CACxB,oBAAC,IAAI,IAAC,MAAM,EAAC,UAAU,EAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAC,OAAO,GAAG,CACrD;YACA,MAAM,KAAK,UAAU,IAAI,CACxB,oBAAC,IAAI,IAAC,MAAM,EAAC,UAAU,EAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAC,YAAY,GAAG,CAC1D,CACa,CACN,CACb,CAAA;CAAA,CAAA;AAED,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;;;CAG5B,CAAA;AAUD,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAC9B,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;;;iBAGd,IAAI;cACP,IAAI;WACP,CAAC;aACC,CAAC;cACA,CAAC;YACH,CAAC;GACV,CACF,CAAA"}

package/dist/LabelledText/LabelledText.js

@@ -16,7 +16,7 @@ import { Box } from '../Box';
 export const LabelledText = (_a) => {
     var { label, children } = _a, marginProps = __rest(_a, ["label", "children"]);
     return (React.createElement(Container, Object.assign({}, marginProps),
-        React.createElement(Text, { tag: "label", color: "subtext", typo: "label" }, label),
+        React.createElement(Text, { tag: "label", color: "sesame", typo: "label" }, label),
         children));
 };
 const Container = styled(Box) `

package/dist/LabelledText/LabelledText.js.map

@@ -1 +1 @@
-{"version":3,"file":"LabelledText.js","sourceRoot":"","sources":["../../src/LabelledText/LabelledText.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAwB,MAAM,OAAO,CAAA;AAC5C,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAGtC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAO5B,MAAM,CAAC,MAAM,YAAY,GAA0B,CAAC,EAInD,EAAE,EAAE;QAJ+C,EAClD,KAAK,EACL,QAAQ,OAET,EADI,WAAW,cAHoC,qBAInD,CADe;IACV,OAAA,CACJ,oBAAC,SAAS,oBAAK,WAAW;QACxB,oBAAC,IAAI,IAAC,GAAG,EAAC,OAAO,EAAC,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,OAAO,IAC3C,KAAK,CACD;QAEN,QAAQ,CACC,CACb,CAAA;CAAA,CAAA;AAED,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;;;;;;;CAO5B,CAAA"}
+{"version":3,"file":"LabelledText.js","sourceRoot":"","sources":["../../src/LabelledText/LabelledText.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAwB,MAAM,OAAO,CAAA;AAC5C,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAGtC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAO5B,MAAM,CAAC,MAAM,YAAY,GAA0B,CAAC,EAInD,EAAE,EAAE;QAJ+C,EAClD,KAAK,EACL,QAAQ,OAET,EADI,WAAW,cAHoC,qBAInD,CADe;IACV,OAAA,CACJ,oBAAC,SAAS,oBAAK,WAAW;QACxB,oBAAC,IAAI,IAAC,GAAG,EAAC,OAAO,EAAC,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,OAAO,IAC1C,KAAK,CACD;QAEN,QAAQ,CACC,CACb,CAAA;CAAA,CAAA;AAED,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;;;;;;;CAO5B,CAAA"}

package/dist/Link/Link.d.ts

@@ -8,6 +8,9 @@ export type LinkProps = {
     children?: ReactNode;
     download?: boolean;
     typo?: LinkTypo;
+    highlight?: boolean;
+    iconToRender?: string;
+    isTrailingIcon?: boolean;
 };
 export declare const Link: FC<LinkProps>;
 /**

package/dist/Link/Link.js

@@ -4,15 +4,16 @@ import { darken } from 'polished';
 import { focusOutline } from '../utils/focusOutline';
 import { theme } from '../theme';
 import { Icon } from '../Icon';
-export const Link = ({ className, href, onClick, openInNewTab, download, children, typo = 'regular', }) => {
-    return (React.createElement(LinkWrapper, Object.assign({ href: href, className: className, onClick: onClick, download: download, typo: typo }, (openInNewTab && {
+export const Link = ({ className, href, onClick, openInNewTab, download, children, typo = 'regular', highlight = false, iconToRender = openInNewTab ? 'new-window' : '', isTrailingIcon = true, }) => {
+    return (React.createElement(LinkWrapper, Object.assign({ href: href, className: className, onClick: onClick, download: download, typo: typo, highlight: highlight }, (openInNewTab && {
         rel: 'noopener noreferrer',
         target: '_blank',
     })),
+        iconToRender && !isTrailingIcon && (React.createElement(Icon, { mt: { custom: '3px' }, mr: { custom: '4px' }, render: iconToRender, size: typo === 'regular' ? 14 : 12, color: highlight ? 'lollipop' : 'liquorice' })),
         children,
-        openInNewTab && (React.createElement(StyledIcon, { render: "new-window", size: typo === 'regular' ? 14 : 12, color: "primary" }))));
+        iconToRender && isTrailingIcon && (React.createElement(Icon, { mt: { custom: '3px' }, ml: { custom: '4px' }, render: iconToRender, size: typo === 'regular' ? 14 : 12, color: highlight ? 'lollipop' : 'liquorice' }))));
 };
-const LinkWrapper = styled.a(({ typo }) => css `
+const LinkWrapper = styled.a(({ typo, highlight }) => css `
       ${focusOutline()}
       display: inline-flex;
       flex-direction: row;
@@ -31,24 +32,24 @@ const LinkWrapper = styled.a(({ typo }) => css `
 
       font-weight: ${theme.font.weight.medium};
       text-decoration: underline;
-      color: ${theme.colors.primary};
+      color: ${highlight ? theme.colors.lollipop : theme.colors.liquorice};
 
       background: none;
       cursor: pointer;
 
       &:hover {
-        color: ${darken(0.1, theme.colors.primary)};
+        color: ${theme.colors.sesame};
 
         path {
-          fill: ${darken(0.1, theme.colors.primary)};
+          fill: ${theme.colors.sesame};
         }
       }
 
       &:active {
-        color: ${theme.colors.secondary};
+        color: ${theme.colors.liquorice};
 
         path {
-          fill: ${theme.colors.secondary};
+          fill: ${theme.colors.liquorice};
         }
       }
     `);
@@ -73,8 +74,4 @@ export const linkStyleOverride = ({ color }) => css `
     }
   }
 `;
-const StyledIcon = styled(Icon) `
-  margin-left: 4px;
-  margin-top: 3px;
-`;
 //# sourceMappingURL=Link.js.map

package/dist/Link/Link.js.map

@@ -1 +1 @@
-{"version":3,"file":"Link.js","sourceRoot":"","sources":["../../src/Link/Link.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2C,MAAM,OAAO,CAAA;AAC/D,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAEjC,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AACpD,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAChC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAc9B,MAAM,CAAC,MAAM,IAAI,GAAkB,CAAC,EAClC,SAAS,EACT,IAAI,EACJ,OAAO,EACP,YAAY,EACZ,QAAQ,EACR,QAAQ,EACR,IAAI,GAAG,SAAS,GACjB,EAAE,EAAE;IACH,OAAO,CACL,oBAAC,WAAW,kBACV,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,IACN,CAAC,YAAY,IAAI;QACnB,GAAG,EAAE,qBAAqB;QAC1B,MAAM,EAAE,QAAQ;KACjB,CAAC;QAED,QAAQ;QACR,YAAY,IAAI,CACf,oBAAC,UAAU,IACT,MAAM,EAAC,YAAY,EACnB,IAAI,EAAE,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,EAClC,KAAK,EAAC,SAAS,GACf,CACH,CACW,CACf,CAAA;AACH,CAAC,CAAA;AAED,MAAM,WAAW,GAAG,MAAM,CAAC,CAAC,CAC1B,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CACX,GAAG,CAAA;QACC,YAAY,EAAE;;;;QAId,IAAI,KAAK,SAAS;IACpB,GAAG,CAAA;;;OAGF;;QAEC,IAAI,KAAK,OAAO;IAClB,GAAG,CAAA;;;OAGF;;qBAEc,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM;;eAE9B,KAAK,CAAC,MAAM,CAAC,OAAO;;;;;;iBAMlB,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC;;;kBAGhC,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC;;;;;iBAKlC,KAAK,CAAC,MAAM,CAAC,SAAS;;;kBAGrB,KAAK,CAAC,MAAM,CAAC,SAAS;;;KAGnC,CACJ,CAAA;AAED;;;GAGG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,EAAE,KAAK,EAAqB,EAAE,EAAE,CAAC,GAAG,CAAA;MAChE,WAAW;aACJ,KAAK;;;cAGJ,KAAK;;;;eAIJ,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC;;;gBAGjB,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC;;;;CAIjC,CAAA;AAED,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;;CAG9B,CAAA"}
+{"version":3,"file":"Link.js","sourceRoot":"","sources":["../../src/Link/Link.tsx"],"names":[],"mappings":"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"}

package/dist/Link/Link.stories.d.ts

@@ -11,4 +11,6 @@ declare const _default: {
 };
 export default _default;
 export declare const Playground: any;
+export declare const Highlighted: any;
+export declare const LeadingIcon: any;
 export declare const InParagraph: any;

package/dist/Link/Link.stories.js

@@ -14,7 +14,11 @@ const linkArgs = {
 };
 export const Playground = Link.bind({});
 Playground.args = linkArgs;
-const ParagraphDemo = (props) => (React.createElement(Text, { tag: "p", color: "success" },
+export const Highlighted = Link.bind({});
+Highlighted.args = Object.assign(Object.assign({}, linkArgs), { highlight: true });
+export const LeadingIcon = Link.bind({});
+LeadingIcon.args = Object.assign(Object.assign({}, linkArgs), { iconToRender: 'new-window', isTrailingIcon: false });
+const ParagraphDemo = (props) => (React.createElement(Text, { tag: "p", color: "apple" },
     "Lorem Ipsum is simply dummy text of the printing and typesetting industry, more details ",
     React.createElement(Link, Object.assign({}, props)),
     ". Lorem Ipsum has been the industrys standard dummy text ever since the 1500s."));

package/dist/Link/Link.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Link.stories.js","sourceRoot":"","sources":["../../src/Link/Link.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAE9B,OAAO,EAAE,IAAI,EAAa,MAAM,QAAQ,CAAA;AAExC,eAAe;IACb,KAAK,EAAE,MAAM;IACb,SAAS,EAAE,IAAI;IACf,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE;CAC7C,CAAA;AAED,MAAM,QAAQ,GAAG;IACf,IAAI,EAAE,wBAAwB;IAC9B,YAAY,EAAE,IAAI;IAClB,QAAQ,EAAE,aAAa;IACvB,IAAI,EAAE,SAAS;CAChB,CAAA;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACvC,UAAU,CAAC,IAAI,GAAG,QAAQ,CAAA;AAE1B,MAAM,aAAa,GAAG,CAAC,KAAgB,EAAE,EAAE,CAAC,CAC1C,oBAAC,IAAI,IAAC,GAAG,EAAC,GAAG,EAAC,KAAK,EAAC,SAAS;;IAEd,oBAAC,IAAI,oBAAK,KAAK,EAAI;qFAE3B,CACR,CAAA;AAED,MAAM,CAAC,MAAM,WAAW,GAAG,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACjD,WAAW,CAAC,IAAI,mCACX,QAAQ,KACX,IAAI,EAAE,2CAA2C,EACjD,QAAQ,EAAE,MAAM,GACjB,CAAA"}
+{"version":3,"file":"Link.stories.js","sourceRoot":"","sources":["../../src/Link/Link.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAE9B,OAAO,EAAE,IAAI,EAAa,MAAM,QAAQ,CAAA;AAExC,eAAe;IACb,KAAK,EAAE,MAAM;IACb,SAAS,EAAE,IAAI;IACf,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE;CAC7C,CAAA;AAED,MAAM,QAAQ,GAAG;IACf,IAAI,EAAE,wBAAwB;IAC9B,YAAY,EAAE,IAAI;IAClB,QAAQ,EAAE,aAAa;IACvB,IAAI,EAAE,SAAS;CAChB,CAAA;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACvC,UAAU,CAAC,IAAI,GAAG,QAAQ,CAAA;AAE1B,MAAM,CAAC,MAAM,WAAW,GAAG,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,WAAW,CAAC,IAAI,mCACX,QAAQ,KACX,SAAS,EAAE,IAAI,GAChB,CAAA;AAED,MAAM,CAAC,MAAM,WAAW,GAAG,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,WAAW,CAAC,IAAI,mCACX,QAAQ,KACX,YAAY,EAAE,YAAY,EAC1B,cAAc,EAAE,KAAK,GACtB,CAAA;AAED,MAAM,aAAa,GAAG,CAAC,KAAgB,EAAE,EAAE,CAAC,CAC1C,oBAAC,IAAI,IAAC,GAAG,EAAC,GAAG,EAAC,KAAK,EAAC,OAAO;;IAEZ,oBAAC,IAAI,oBAAK,KAAK,EAAI;qFAE3B,CACR,CAAA;AAED,MAAM,CAAC,MAAM,WAAW,GAAG,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACjD,WAAW,CAAC,IAAI,mCACX,QAAQ,KACX,IAAI,EAAE,2CAA2C,EACjD,QAAQ,EAAE,MAAM,GACjB,CAAA"}

package/dist/Loader/Loader.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import { theme } from '../theme';
-export const Loader = ({ height, color = 'primary' }) => (React.createElement(LoaderSvg, { viewBox: "0 0 60 32", height: height, color: color },
+export const Loader = ({ height, color = 'marshmallowPink', }) => (React.createElement(LoaderSvg, { viewBox: "0 0 60 32", height: height, color: color },
     React.createElement("g", { transform: "translate(30,18.5455) translate(-30,-9)" },
         React.createElement(MarshOne, { id: "Marshmallow1", d: "M73.999,81.9767L73.6592,70.6087C73.6352,69.8071,73.1892,69.0806,72.4916,68.707C71.1747,68.0014,69.0105,67.648,66.0001,67.6467C62.9894,67.648,60.8254,68.0014,59.5084,68.707C58.8109,69.0806,58.3648,69.8071,58.3408,70.6087L58.001,81.9767C57.983,82.5754,58.2138,83.1538,58.6366,83.5705C60.0408,84.9546,62.4906,85.6467,65.986,85.6467C65.9907,85.6467,65.9953,85.6467,66.0001,85.6467C66.0047,85.6467,66.0094,85.6467,66.014,85.6467C69.5095,85.6467,71.9593,84.9546,73.3634,83.5705C73.7863,83.1538,74.0169,82.5754,73.999,81.9767", transform: "translate(-58,-67.6467)" }),
         React.createElement(MarshTwo, { id: "Marshmallow2", d: "M73.999,81.9767L73.6592,70.6087C73.6352,69.8071,73.1892,69.0806,72.4916,68.707C71.1747,68.0014,69.0105,67.648,66.0001,67.6467C62.9894,67.648,60.8254,68.0014,59.5084,68.707C58.8109,69.0806,58.3648,69.8071,58.3408,70.6087L58.001,81.9767C57.983,82.5754,58.2138,83.1538,58.6366,83.5705C60.0408,84.9546,62.4906,85.6467,65.986,85.6467C65.9907,85.6467,65.9953,85.6467,66.0001,85.6467C66.0047,85.6467,66.0094,85.6467,66.014,85.6467C69.5095,85.6467,71.9593,84.9546,73.3634,83.5705C73.7863,83.1538,74.0169,82.5754,73.999,81.9767", transform: "translate(-36,-67.6467)" }),

package/dist/Loader/Loader.js.map

@@ -1 +1 @@
-{"version":3,"file":"Loader.js","sourceRoot":"","sources":["../../src/Loader/Loader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AACjC,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,OAAO,EAAS,KAAK,EAAE,MAAM,UAAU,CAAA;AAOvC,MAAM,CAAC,MAAM,MAAM,GAAoB,CAAC,EAAE,MAAM,EAAE,KAAK,GAAG,SAAS,EAAE,EAAE,EAAE,CAAC,CACxE,oBAAC,SAAS,IAAC,OAAO,EAAC,WAAW,EAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK;IACzD,2BAAG,SAAS,EAAC,yCAAyC;QAEpD,oBAAC,QAAQ,IACP,EAAE,EAAC,cAAc,EACjB,CAAC,EAAC,wgBAAwgB,EAC1gB,SAAS,EAAC,yBAAyB,GACnC;QAEF,oBAAC,QAAQ,IACP,EAAE,EAAC,cAAc,EACjB,CAAC,EAAC,wgBAAwgB,EAC1gB,SAAS,EAAC,yBAAyB,GACnC;QAEF,oBAAC,UAAU,IACT,EAAE,EAAC,cAAc,EACjB,CAAC,EAAC,wgBAAwgB,EAC1gB,SAAS,EAAC,yBAAyB,GACnC,CACA,CACM,CACb,CAAA;AAQD,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAM;YACtB,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM;;;YAGf,CAAC,CAAC,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8NvC,CAAA;AAED,MAAM,QAAQ,GAAG,MAAM,CAAC,IAAI,CAAA;;;CAG3B,CAAA;AAED,MAAM,QAAQ,GAAG,MAAM,CAAC,IAAI,CAAA;;;CAG3B,CAAA;AAED,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAA;;;CAG7B,CAAA"}
+{"version":3,"file":"Loader.js","sourceRoot":"","sources":["../../src/Loader/Loader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AACjC,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,OAAO,EAAS,KAAK,EAAE,MAAM,UAAU,CAAA;AAOvC,MAAM,CAAC,MAAM,MAAM,GAAoB,CAAC,EACtC,MAAM,EACN,KAAK,GAAG,iBAAiB,GAC1B,EAAE,EAAE,CAAC,CACJ,oBAAC,SAAS,IAAC,OAAO,EAAC,WAAW,EAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK;IACzD,2BAAG,SAAS,EAAC,yCAAyC;QAEpD,oBAAC,QAAQ,IACP,EAAE,EAAC,cAAc,EACjB,CAAC,EAAC,wgBAAwgB,EAC1gB,SAAS,EAAC,yBAAyB,GACnC;QAEF,oBAAC,QAAQ,IACP,EAAE,EAAC,cAAc,EACjB,CAAC,EAAC,wgBAAwgB,EAC1gB,SAAS,EAAC,yBAAyB,GACnC;QAEF,oBAAC,UAAU,IACT,EAAE,EAAC,cAAc,EACjB,CAAC,EAAC,wgBAAwgB,EAC1gB,SAAS,EAAC,yBAAyB,GACnC,CACA,CACM,CACb,CAAA;AAQD,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAM;YACtB,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM;;;YAGf,CAAC,CAAC,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8NvC,CAAA;AAED,MAAM,QAAQ,GAAG,MAAM,CAAC,IAAI,CAAA;;;CAG3B,CAAA;AAED,MAAM,QAAQ,GAAG,MAAM,CAAC,IAAI,CAAA;;;CAG3B,CAAA;AAED,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAA;;;CAG7B,CAAA"}

package/dist/Loader/Loader.stories.d.ts

@@ -6,4 +6,4 @@ declare const _default: {
 };
 export default _default;
 export declare const Default: any;
-export declare const BigAndBlue: any;
+export declare const BigLoader: any;

package/dist/Loader/Loader.stories.js

@@ -9,9 +9,9 @@ export const Default = Template.bind({});
 Default.args = {
     height: 32,
 };
-export const BigAndBlue = Template.bind({});
-BigAndBlue.args = {
+export const BigLoader = Template.bind({});
+BigLoader.args = {
     height: 54,
-    color: 'secondary',
+    color: 'liquorice',
 };
 //# sourceMappingURL=Loader.stories.js.map

package/dist/Loader/Loader.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Loader.stories.js","sourceRoot":"","sources":["../../src/Loader/Loader.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,MAAM,EAAe,MAAM,UAAU,CAAA;AAE9C,eAAe;IACb,KAAK,EAAE,QAAQ;IACf,SAAS,EAAE,MAAM;CAClB,CAAA;AAED,MAAM,QAAQ,GAAG,CAAC,KAAkB,EAAE,EAAE,CAAC,oBAAC,MAAM,oBAAK,KAAK,EAAI,CAAA;AAE9D,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAExC,OAAO,CAAC,IAAI,GAAG;IACb,MAAM,EAAE,EAAE;CACX,CAAA;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAE3C,UAAU,CAAC,IAAI,GAAG;IAChB,MAAM,EAAE,EAAE;IACV,KAAK,EAAE,WAAW;CACnB,CAAA"}
+{"version":3,"file":"Loader.stories.js","sourceRoot":"","sources":["../../src/Loader/Loader.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,MAAM,EAAe,MAAM,UAAU,CAAA;AAE9C,eAAe;IACb,KAAK,EAAE,QAAQ;IACf,SAAS,EAAE,MAAM;CAClB,CAAA;AAED,MAAM,QAAQ,GAAG,CAAC,KAAkB,EAAE,EAAE,CAAC,oBAAC,MAAM,oBAAK,KAAK,EAAI,CAAA;AAE9D,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAExC,OAAO,CAAC,IAAI,GAAG;IACb,MAAM,EAAE,EAAE;CACX,CAAA;AAED,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAE1C,SAAS,CAAC,IAAI,GAAG;IACf,MAAM,EAAE,EAAE;IACV,KAAK,EAAE,WAAW;CACnB,CAAA"}

package/dist/Loader/__tests__/Loader.js

@@ -3,7 +3,7 @@ import { render } from '@testing-library/react';
 import 'jest-styled-components';
 import { Loader } from '../Loader';
 test('renders', () => {
-    const { container } = render(React.createElement(Loader, { color: "primary" }));
+    const { container } = render(React.createElement(Loader, { color: "marshmallowPink" }));
     expect(container.firstChild).toMatchSnapshot();
 });
 //# sourceMappingURL=Loader.js.map

package/dist/Loader/__tests__/Loader.js.map

@@ -1 +1 @@
-{"version":3,"file":"Loader.js","sourceRoot":"","sources":["../../../src/Loader/__tests__/Loader.js"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAA;AAC/C,OAAO,wBAAwB,CAAA;AAE/B,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAElC,IAAI,CAAC,SAAS,EAAE,GAAG,EAAE;IACnB,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,oBAAC,MAAM,IAAC,KAAK,EAAC,SAAS,GAAG,CAAC,CAAA;IACxD,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,eAAe,EAAE,CAAA;AAChD,CAAC,CAAC,CAAA"}
+{"version":3,"file":"Loader.js","sourceRoot":"","sources":["../../../src/Loader/__tests__/Loader.js"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAA;AAC/C,OAAO,wBAAwB,CAAA;AAE/B,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAElC,IAAI,CAAC,SAAS,EAAE,GAAG,EAAE;IACnB,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,oBAAC,MAAM,IAAC,KAAK,EAAC,iBAAiB,GAAG,CAAC,CAAA;IAChE,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,eAAe,EAAE,CAAA;AAChD,CAAC,CAAC,CAAA"}

package/dist/Modal/Modal.js

@@ -3,10 +3,10 @@ import styled, { css } from 'styled-components';
 import { theme } from '../theme';
 import { createPortal } from 'react-dom';
 import { Box } from '../Box';
-import { Icon } from '../Icon';
 import { Text } from '../Text';
 import useBodyScrollLock from './useBodyScrollLock';
-export const Modal = ({ title = '', icon = '', children, showModal = false, handleClick, drawer = true, cross = true, width, containerClass, portalContainer = document.body, }) => {
+import { IconStrict } from '../IconStrict';
+export const Modal = ({ title = '', children, showModal = false, handleClick, drawer = true, cross = true, width, containerClass, portalContainer = document.body, }) => {
     const modalRef = useRef(null);
     useBodyScrollLock({ node: modalRef.current, showModal });
     return createPortal(React.createElement(Wrapper, { showModal: showModal, ref: modalRef },
@@ -14,10 +14,8 @@ export const Modal = ({ title = '', icon = '', children, showModal = false, hand
         React.createElement(Container, { drawer: drawer, width: width || '460px', className: containerClass },
             React.createElement(Box, { flex: true, alignItems: "flex-start", justifyContent: "space-between", mb: "8px" },
                 React.createElement(TitleElements, { flex: true, direction: "column" },
-                    icon !== '' && (React.createElement(Icon, { render: icon, size: 42, color: "secondary", mb: "16px" })),
                     React.createElement(Text, { tag: "h2", typo: "heading-small", align: "left" }, title)),
-                cross && (React.createElement(IconContainer, { onClick: handleClick },
-                    React.createElement(Icon, { render: "cross", color: "secondary", size: 32 })))),
+                cross && (React.createElement(IconStrict, { render: "cross", backgroundColor: "oatmeal", handleClick: handleClick, size: 36 }))),
             React.createElement(Box, { flex: true, direction: "column" }, children))), portalContainer);
 };
 const Wrapper = styled(Box)(({ showModal }) => css `
@@ -33,7 +31,7 @@ const Wrapper = styled(Box)(({ showModal }) => css `
   `);
 const Overlay = styled.div `
   position: fixed;
-  background: ${theme.colors.secondary};
+  background: ${theme.colors.liquorice};
   cursor: pointer;
   opacity: 0.4;
   top: 0;
@@ -42,10 +40,9 @@ const Overlay = styled.div `
   right: 0;
 `;
 const Container = styled.div(({ drawer, width }) => css `
-    background: ${theme.colors.white};
-    border: 1px solid ${theme.colors.outline};
+    background: ${theme.colors.coconut};
     box-sizing: border-box;
-    border-radius: 8px;
+    border-radius: 16px;
     padding: 24px;
     width: 100%;
     max-width: ${width};
@@ -68,20 +65,6 @@ const Container = styled.div(({ drawer, width }) => css `
       }
     `}
   `);
-const IconContainer = styled.div `
-  cursor: pointer;
-  background: ${theme.colors.background};
-  border-radius: 32px;
-  margin-right: 8px;
-
-  &:hover {
-    background: ${theme.colors.background};
-  }
-
-  svg {
-    padding: 3px;
-  }
-`;
 const TitleElements = styled(Box) `
   align-self: center;
 `;

package/dist/Modal/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../src/Modal/Modal.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../src/Modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAiB,MAAM,EAAE,MAAM,OAAO,CAAA;AACpD,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAChC,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AAExC,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,iBAAiB,MAAM,qBAAqB,CAAA;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AA0B1C,MAAM,CAAC,MAAM,KAAK,GAAmB,CAAC,EACpC,KAAK,GAAG,EAAE,EACV,QAAQ,EACR,SAAS,GAAG,KAAK,EACjB,WAAW,EACX,MAAM,GAAG,IAAI,EACb,KAAK,GAAG,IAAI,EACZ,KAAK,EACL,cAAc,EACd,eAAe,GAAG,QAAQ,CAAC,IAAI,GAChC,EAAE,EAAE;IACH,MAAM,QAAQ,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IAE7C,iBAAiB,CAAC,EAAE,IAAI,EAAE,QAAQ,CAAC,OAAO,EAAE,SAAS,EAAE,CAAC,CAAA;IAExD,OAAO,YAAY,CACjB,oBAAC,OAAO,IAAC,SAAS,EAAE,SAAS,EAAE,GAAG,EAAE,QAAQ;QAC1C,oBAAC,OAAO,IAAC,OAAO,EAAE,WAAW,GAAI;QACjC,oBAAC,SAAS,IACR,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,IAAI,OAAO,EACvB,SAAS,EAAE,cAAc;YAEzB,oBAAC,GAAG,IACF,IAAI,QACJ,UAAU,EAAC,YAAY,EACvB,cAAc,EAAC,eAAe,EAC9B,EAAE,EAAC,KAAK;gBAER,oBAAC,aAAa,IAAC,IAAI,QAAC,SAAS,EAAC,QAAQ;oBACpC,oBAAC,IAAI,IAAC,GAAG,EAAC,IAAI,EAAC,IAAI,EAAC,eAAe,EAAC,KAAK,EAAC,MAAM,IAC7C,KAAK,CACD,CACO;gBACf,KAAK,IAAI,CACR,oBAAC,UAAU,IACT,MAAM,EAAC,OAAO,EACd,eAAe,EAAC,SAAS,EACzB,WAAW,EAAE,WAAW,EACxB,IAAI,EAAE,EAAE,GACR,CACH,CACG;YACN,oBAAC,GAAG,IAAC,IAAI,QAAC,SAAS,EAAC,QAAQ,IACzB,QAAQ,CACL,CACI,CACJ,EACV,eAAe,CAChB,CAAA;AACH,CAAC,CAAA;AAED,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAC,CACzB,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;eACT,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;;;;;;;;;GASvC,CACF,CAAA;AAED,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAA;;gBAEV,KAAK,CAAC,MAAM,CAAC,SAAS;;;;;;;CAOrC,CAAA;AAED,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAC1B,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;kBACV,KAAK,CAAC,MAAM,CAAC,OAAO;;;;;iBAKrB,KAAK;;;;;MAKhB,MAAM,KAAK,IAAI;IACjB,GAAG,CAAA;;;;;;;;;;;;KAYF;GACF,CACF,CAAA;AAED,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;;CAEhC,CAAA"}

package/dist/NumberInput/Collection.d.ts

@@ -0,0 +1,2 @@
+import { FC } from 'react';
+export declare const CollectionPage: FC;

package/dist/NumberInput/Collection.js

@@ -0,0 +1,97 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { Text } from '../Text';
+import { Box } from '../Box';
+import { NumberInput } from './NumberInput';
+import { noop } from '../utils/noop';
+import { SupportMessage } from '../SupportMessage';
+const variationList = [
+    {
+        id: 'days',
+        placeholder: '+44 7123 456789',
+        errorMsg: 'This field is required',
+        label: 'Phone number',
+        onChange: noop,
+        onInputChange: noop,
+        onBlur: noop,
+        value: '',
+    },
+];
+export const CollectionPage = () => {
+    const [, setValue] = useState('');
+    return (React.createElement(Box, { flex: true, direction: "column" }, variationList.map(({ id, placeholder, errorMsg, label }) => {
+        return (React.createElement(Box, { key: id, flex: true, direction: "column", mb: "32px" },
+            React.createElement(Title, { tag: "span", typo: "header-medium" }, "NumberInput variations"),
+            React.createElement(Row, { label: "Generic" },
+                React.createElement(NumberInput, { id: id, label: label, value: "", placeholder: placeholder, error: false, errorMsg: errorMsg, 
+                    // @ts-expect-error onChange type is too broad and should be handled differently
+                    onChange: setValue })),
+            React.createElement(Row, { label: "Fallback" },
+                React.createElement(NumberInput, { id: id, label: label, value: "", placeholder: placeholder, fallback: true, error: false, errorMsg: errorMsg, 
+                    // @ts-expect-error onChange type is too broad and should be handled differently
+                    onChange: setValue })),
+            React.createElement(Row, { label: "Disabled" },
+                React.createElement(NumberInput, { id: id, label: label, value: "", placeholder: placeholder, disabled: true, error: false, errorMsg: errorMsg, 
+                    // @ts-expect-error onChange type is too broad and should be handled differently
+                    onChange: setValue })),
+            React.createElement(Row, { label: "Required" },
+                React.createElement(NumberInput, { id: id, label: label, value: "", required: true, placeholder: placeholder, error: false, errorMsg: errorMsg, 
+                    // @ts-expect-error onChange type is too broad and should be handled differently
+                    onChange: setValue })),
+            React.createElement(Row, { label: "Leading Icon" },
+                React.createElement(NumberInput, { id: id, label: label, frontIcon: "iphone", value: "", placeholder: placeholder, error: false, errorMsg: errorMsg, 
+                    // @ts-expect-error onChange type is too broad and should be handled differently
+                    onChange: setValue })),
+            React.createElement(Row, { label: "Trailing Icon" },
+                React.createElement(NumberInput, { id: id, label: label, trailingIcon: "iphone", value: "", placeholder: placeholder, error: false, errorMsg: errorMsg, 
+                    // @ts-expect-error onChange type is too broad and should be handled differently
+                    onChange: setValue })),
+            React.createElement(Row, { label: "Stepper" },
+                React.createElement(NumberInput, { id: id, label: label, step: 10, value: "", placeholder: placeholder, error: false, errorMsg: errorMsg, 
+                    // @ts-expect-error onChange type is too broad and should be handled differently
+                    onChange: setValue })),
+            React.createElement(Row, { label: "Assistive text" },
+                React.createElement(NumberInput, { id: id, label: label, value: "", placeholder: placeholder, assistiveText: "Some assistive text", error: false, errorMsg: errorMsg, 
+                    // @ts-expect-error onChange type is too broad and should be handled differently
+                    onChange: setValue })),
+            React.createElement(Row, { label: "Completed" },
+                React.createElement(NumberInput, { id: id, label: label, value: "", placeholder: placeholder, error: false, completed: true, errorMsg: errorMsg, 
+                    // @ts-expect-error onChange type is too broad and should be handled differently
+                    onChange: setValue })),
+            React.createElement(Row, { label: "As title" },
+                React.createElement(NumberInput, { id: id, label: label, value: "", renderAsTitle: true, placeholder: placeholder, error: false, errorMsg: errorMsg, 
+                    // @ts-expect-error onChange type is too broad and should be handled differently
+                    onChange: setValue })),
+            React.createElement(Row, { label: "Error" },
+                React.createElement(NumberInput, { id: id, label: label, value: "", required: true, placeholder: placeholder, assistiveText: "Some assistive text", error: true, errorMsg: errorMsg, 
+                    // @ts-expect-error onChange type is too broad and should be handled differently
+                    onChange: setValue })),
+            React.createElement(Row, { label: "React element error" },
+                React.createElement(NumberInput, { id: id, label: label, required: true, value: "", placeholder: placeholder, error: true, errorMsg: React.createElement(SupportMessage, { type: "warning", description: "error!!" }), 
+                    // @ts-expect-error onChange type is too broad and should be handled differently
+                    onChange: setValue })),
+            React.createElement(Row, { label: "Fallback Error" },
+                React.createElement(NumberInput, { id: id, label: label, required: true, value: "", placeholder: placeholder, fallback: true, error: true, errorMsg: errorMsg, 
+                    // @ts-expect-error onChange type is too broad and should be handled differently
+                    onChange: setValue }))));
+    })));
+};
+const Row = ({ label, children, }) => {
+    return (React.createElement(RowWrapper, { mt: "32px" },
+        React.createElement(Box, { width: "140px" },
+            React.createElement(Text, { tag: "span", typo: "label-large" }, label)),
+        children));
+};
+const RowWrapper = styled(Box) `
+  display: flex;
+  flex-direction: row;
+  gap: 16px;
+`;
+const LABEL_WIDTH = '140px';
+const Title = styled(Text) `
+  margin-bottom: 12px;
+  font-size: 18px;
+  line-height: 20px;
+  margin-left: ${LABEL_WIDTH};
+`;
+//# sourceMappingURL=Collection.js.map

package/dist/NumberInput/Collection.js.map

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

package/dist/NumberInput/NumberInput.d.ts

@@ -1,21 +1,16 @@
 import React, { FocusEvent, FormEvent } from 'react';
 import { CommonFieldProps } from '../fields/commonFieldTypes';
 export interface Props extends CommonFieldProps {
-    type?: 'number' | 'tel';
+    type?: 'number';
     placeholder: string;
     name?: string;
     value: string;
     onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
-    trailingIcon?: string;
-    prefix?: string;
-    suffix?: string;
     min?: number;
     max?: number;
     strict?: boolean;
     roundCurrency?: boolean;
     step?: number;
-    disabled?: boolean;
-    outlined?: boolean;
 }
 /** on change or on input required */
 type InputProps = {

package/dist/NumberInput/NumberInput.js

@@ -12,13 +12,12 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React, { forwardRef, } from 'react';
 import styled from 'styled-components';
 import { Box } from '../Box';
-import { Text } from '../Text';
 import { Icon } from '../Icon';
 import { Field } from '../fields/Field';
-import { theme } from '../theme';
 import { useUniqueId } from '../utils/id';
+import { Input, StyledFrontIcon, StyledTrailingIcon, } from '../fields/components/CommonInput';
 export const NumberInput = forwardRef(function NumberInput(_a, ref) {
-    var { id: idProp, type = 'number', placeholder, name, value, trailingIcon, onChange, onInputChange, onBlur, prefix, suffix, roundCurrency, min = -999999, max = 999999, strict, step = 0, disabled = false, error = false, outlined = false } = _a, fieldProps = __rest(_a, ["id", "type", "placeholder", "name", "value", "trailingIcon", "onChange", "onInputChange", "onBlur", "prefix", "suffix", "roundCurrency", "min", "max", "strict", "step", "disabled", "error", "outlined"]);
+    var { id: idProp, type = 'number', placeholder, name, value, onChange, onInputChange, onBlur, roundCurrency, min = -999999, max = 999999, strict, step = 0, disabled = false, error = false, frontIcon, trailingIcon, fallback } = _a, fieldProps = __rest(_a, ["id", "type", "placeholder", "name", "value", "onChange", "onInputChange", "onBlur", "roundCurrency", "min", "max", "strict", "step", "disabled", "error", "frontIcon", "trailingIcon", "fallback"]);
     const id = useUniqueId(idProp);
     // Check whether the min/max value exists is within the specified range
     const isInRange = (value) => {
@@ -92,100 +91,25 @@ export const NumberInput = forwardRef(function NumberInput(_a, ref) {
             onChange(roundNumber(currentValue));
         }
     };
-    return (React.createElement(Field, Object.assign({}, fieldProps, { htmlFor: id, error: error, outlined: outlined }),
-        React.createElement(Box, { flex: true },
-            prefix && (React.createElement(SymbolText, { tag: "span", color: "secondary", outlined: outlined, prefix: prefix }, prefix)),
-            React.createElement(Input, { error: error, outlined: outlined, disabled: disabled, type: type, id: id, name: name, placeholder: placeholder, value: value, prefix: prefix, onChange: (e) => {
+    return (React.createElement(Field, Object.assign({}, fieldProps, { htmlFor: id, error: error }),
+        React.createElement(Box, { flex: true, alignItems: "center", justifyContent: "flex-start" },
+            frontIcon && (React.createElement(StyledFrontIcon, { disabled: disabled, render: frontIcon, color: "sesame" })),
+            React.createElement(Input, { ref: ref, error: error, disabled: disabled, type: type, id: id, name: name, placeholder: placeholder, value: value, frontIcon: frontIcon, step: step, fallback: fallback, onChange: (e) => {
                     onChange && handleChange(e.currentTarget.value);
                     onInputChange && onInputChange(e);
                 }, onBlur: onBlur }),
-            suffix && (React.createElement(SymbolText, { tag: "span", color: "secondary", outlined: outlined, suffix: suffix }, suffix)),
-            onChange && step > 0 && (React.createElement(Spinner, { outlined: outlined },
+            onChange && step > 0 && (React.createElement(Spinner, null,
                 React.createElement(SpinnerButton, { onClick: incrementValue, disabled: disabled },
-                    React.createElement(Icon, { render: "caret", rotate: 180, color: "subtext", size: 24 })),
+                    React.createElement(Icon, { render: "caret", rotate: 180, color: "sesame", size: 24 })),
                 React.createElement(SpinnerButton, { onClick: decrementValue, disabled: disabled },
-                    React.createElement(Icon, { render: "caret", color: "subtext", size: 24 })))),
-            trailingIcon && React.createElement(StyledIcon, { render: trailingIcon, color: "subtext" }))));
+                    React.createElement(Icon, { render: "caret", color: "sesame", size: 24 })))),
+            trailingIcon && !step && (React.createElement(StyledTrailingIcon, { disabled: disabled, render: trailingIcon, color: "sesame" })))));
 });
-const Input = styled.input `
-  font-family: 'Circular', san-serif;
-  border: none;
-  border-bottom: 1px solid;
-  border-color: ${({ error }) => theme.colors[`${error ? 'error' : 'outline'}`]};
-  color: ${({ error }) => theme.colors[`${error ? 'error' : 'secondary'}`]};
-  font-size: 16px;
-  width: 100%;
-  outline: none;
-  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
-  opacity: ${({ disabled }) => (disabled ? '0.5' : '1')};
-  padding: ${({ outlined }) => (outlined ? '17px 14px' : '1px 2px')};
-  padding-right: 60px;
-
-  &::placeholder {
-    color: ${theme.colors.subtext};
-  }
-
-  /* Remove the spinner on Firefox and Webkit browsers */
-  -moz-appearance: textfield;
-
-  &::-webkit-outer-spin-button,
-  &::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-  }
-
-  &:hover,
-  &:focus-within {
-    border-color: ${({ error }) => theme.colors[`${error ? 'error' : 'outline'}`]};
-  }
-
-  ${({ outlined, error }) => outlined &&
-    `
-      border: 2px solid ${error ? theme.colors.error : theme.colors.outline};
-      border-radius: 8px;
-      height: auto;
-    `}
-
-  ${({ value }) => value &&
-    value !== '' &&
-    `
-      border-color: ${theme.colors.outline};
-    `}
-
-    ${({ prefix }) => prefix &&
-    `
-      padding-left: 12px;
-      left: -10px;
-      position: relative;
-    `}
-`;
-const StyledIcon = styled(Icon) `
-  position: relative;
-  left: -24px;
-`;
-const SymbolText = styled(Text) `
-  font-family: 'Circular', san-serif;
-  font-size: 16px;
-  line-height: 19px;
-  position: relative;
-  z-index: 1;
-
-  ${({ outlined, prefix }) => outlined &&
-    `
-      top: 20px;
-      left: ${prefix ? '1px' : '0'};
-    `}
-
-  ${({ suffix, outlined }) => suffix &&
-    `
-      left: ${outlined ? '-25px' : '-10px'};
-    `}
-`;
 const Spinner = styled.div `
-  display: flex;
   position: relative;
-  top: ${({ outlined }) => (outlined ? '17px' : '-3px')};
-  left: -60px;
+  display: flex;
+  right: 58px;
+  margin-right: -58px;
 `;
 const SpinnerButton = styled.button `
   width: 24px;