@transferwise/components 0.0.0-experimental-4533565 → 0.0.0-experimental-feb2ddf

package/src/main.css

@@ -2648,7 +2648,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   border-radius: 9999px !important;
   border-radius: var(--radius-full) !important;
 }
-.np-item {
+.wds-list-item {
   padding: 16px;
   padding: var(--size-16);
   border-radius: 24px;
@@ -2658,63 +2658,63 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   gap: 16px;
   gap: var(--size-16);
 }
-.np-item-interactive {
+.wds-list-item-interactive {
   cursor: pointer;
 }
-.np-item-interactive:hover {
+.wds-list-item-interactive:hover {
   background-color: var(--color-background-screen-hover);
 }
-.np-item-interactive:active {
+.wds-list-item-interactive:active {
   background-color: var(--color-background-screen-active);
 }
-.np-item-media-image {
+.wds-list-item-media-image {
   width: var(--item-media-image-size);
   height: var(--item-media-image-size);
 }
-.np-item-body {
+.wds-list-item-body {
   width: 100%;
 }
-.np-item-title {
+.wds-list-item-title {
   color: #37517e;
   color: var(--color-content-primary);
 }
-.np-item-additional-info {
+.wds-list-item-additional-info {
   color: #768e9c;
   color: var(--color-content-tertiary);
 }
-.np-item-value {
+.wds-list-item-value {
   flex: 0 0 auto;
 }
-.np-item-control {
+.wds-list-item-control {
   flex: 0 0 auto;
 }
-.np-item-spotlight-active {
+.wds-list-item-spotlight-active {
   background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
 }
-.np-item-spotlight-active:hover {
+.wds-list-item-spotlight-active:hover {
   background-color: var(--color-background-neutral-hover);
 }
-.np-item-spotlight-active:active {
+.wds-list-item-spotlight-active:active {
   background-color: var(--color-background-neutral-active);
 }
-.np-item-spotlight-inactive {
+.wds-list-item-spotlight-inactive {
   background-color: rgba(134, 167, 189, 0.025);
   border: 1px dashed rgba(0,0,0,0.10196);
   border: 1px dashed var(--color-border-neutral);
 }
 @supports (color: color-mix(in lch, red, blue)) {
-.np-item-spotlight-inactive {
+.wds-list-item-spotlight-inactive {
   background-color: color-mix(in srgb, var(--color-background-neutral) 25%, transparent);
 }
 }
-.np-item-spotlight-inactive:hover {
+.wds-list-item-spotlight-inactive:hover {
   background-color: color-mix(in srgb, var(--color-background-neutral-hover) 25%, transparent);
 }
-.np-item-spotlight-inactive:active {
+.wds-list-item-spotlight-inactive:active {
   background-color: color-mix(in srgb, var(--color-background-neutral-active) 25%, transparent);
 }
-.np-item-prompt {
+.wds-list-item-prompt {
   display: inline-flex;
   padding-top: calc(8px / 2);
   padding-top: calc(var(--padding-x-small) / 2);
@@ -2729,7 +2729,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   word-break: break-word;
   word-wrap: break-word;
 }
-.np-item-prompt .np-prompt-icon {
+.wds-list-item-prompt .np-prompt-icon {
   padding-right: calc(12px / 2);
   padding-right: calc(var(--size-12) / 2);
   padding-top: calc(4px - 1px);
@@ -2737,103 +2737,103 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   padding-bottom: calc(4px - 1px);
   padding-bottom: calc(var(--size-4) - 1px);
 }
-.np-item-prompt .np-prompt-icon .tw-icon-tags,
-.np-item-prompt .np-prompt-icon .tw-icon-confetti {
+.wds-list-item-prompt .np-prompt-icon .tw-icon-tags,
+.wds-list-item-prompt .np-prompt-icon .tw-icon-confetti {
   color: var(--color-sentiment-positive-primary);
 }
-.np-item-prompt a {
+.wds-list-item-prompt a {
   text-underline-offset: calc(4px / 2);
   text-underline-offset: calc(var(--size-4) / 2);
 }
-.np-item-prompt.np-prompt-interactive {
+.wds-list-item-prompt.np-prompt-interactive {
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
   border: none;
 }
-.np-item-prompt.negative {
+.wds-list-item-prompt.negative {
   background-color: var(--color-sentiment-negative-secondary);
   color: var(--color-sentiment-negative-primary);
 }
-.np-item-prompt.negative a {
+.wds-list-item-prompt.negative a {
   color: var(--color-sentiment-negative-primary);
 }
-.np-item-prompt.negative a:hover {
+.wds-list-item-prompt.negative a:hover {
   color: var(--color-sentiment-negative-primary-hover);
 }
-.np-item-prompt.negative a:active {
+.wds-list-item-prompt.negative a:active {
   color: var(--color-sentiment-negative-primary-active);
 }
-.np-prompt-interactive.np-item-prompt.negative:hover {
+.np-prompt-interactive.wds-list-item-prompt.negative:hover {
   background-color: color-mix(in srgb, var(--color-sentiment-negative-secondary) 95%, var(--color-sentiment-negative-primary));
 }
-.np-prompt-interactive.np-item-prompt.negative:active {
+.np-prompt-interactive.wds-list-item-prompt.negative:active {
   background-color: color-mix(in srgb, var(--color-sentiment-negative-secondary) 90%, var(--color-sentiment-negative-primary));
 }
-.np-item-prompt.positive,
-.np-item-prompt.discount,
-.np-item-prompt.savings {
+.wds-list-item-prompt.positive,
+.wds-list-item-prompt.discount,
+.wds-list-item-prompt.savings {
   background-color: var(--color-sentiment-positive-secondary);
   color: var(--color-sentiment-positive-primary);
 }
-.np-item-prompt.positive a,
-.np-item-prompt.discount a,
-.np-item-prompt.savings a {
+.wds-list-item-prompt.positive a,
+.wds-list-item-prompt.discount a,
+.wds-list-item-prompt.savings a {
   color: var(--color-sentiment-positive-primary);
 }
-.np-item-prompt.positive a:hover,
-.np-item-prompt.discount a:hover,
-.np-item-prompt.savings a:hover {
+.wds-list-item-prompt.positive a:hover,
+.wds-list-item-prompt.discount a:hover,
+.wds-list-item-prompt.savings a:hover {
   color: var(--color-sentiment-positive-primary-hover);
 }
-.np-item-prompt.positive a:active,
-.np-item-prompt.discount a:active,
-.np-item-prompt.savings a:active {
+.wds-list-item-prompt.positive a:active,
+.wds-list-item-prompt.discount a:active,
+.wds-list-item-prompt.savings a:active {
   color: var(--color-sentiment-positive-primary-active);
 }
-.np-prompt-interactive.np-item-prompt.positive:hover,
-.np-prompt-interactive.np-item-prompt.discount:hover,
-.np-prompt-interactive.np-item-prompt.savings:hover {
+.np-prompt-interactive.wds-list-item-prompt.positive:hover,
+.np-prompt-interactive.wds-list-item-prompt.discount:hover,
+.np-prompt-interactive.wds-list-item-prompt.savings:hover {
   background-color: color-mix(in srgb, var(--color-sentiment-positive-secondary) 95%, var(--color-sentiment-positive-primary));
 }
-.np-prompt-interactive.np-item-prompt.positive:active,
-.np-prompt-interactive.np-item-prompt.discount:active,
-.np-prompt-interactive.np-item-prompt.savings:active {
+.np-prompt-interactive.wds-list-item-prompt.positive:active,
+.np-prompt-interactive.wds-list-item-prompt.discount:active,
+.np-prompt-interactive.wds-list-item-prompt.savings:active {
   background-color: color-mix(in srgb, var(--color-sentiment-positive-secondary) 90%, var(--color-sentiment-positive-primary));
 }
-.np-item-prompt.neutral {
+.wds-list-item-prompt.neutral {
   background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
   color: #37517e;
   color: var(--color-content-primary);
 }
-.np-item-prompt.neutral a {
+.wds-list-item-prompt.neutral a {
   color: #37517e;
   color: var(--color-content-primary);
 }
-.np-prompt-interactive.np-item-prompt.neutral:hover {
+.np-prompt-interactive.wds-list-item-prompt.neutral:hover {
   background-color: var(--color-background-neutral-hover);
 }
-.np-prompt-interactive.np-item-prompt.neutral:active {
+.np-prompt-interactive.wds-list-item-prompt.neutral:active {
   background-color: var(--color-background-neutral-active);
 }
-.np-item-prompt.warning {
+.wds-list-item-prompt.warning {
   background-color: var(--color-sentiment-warning-secondary);
   color: var(--color-sentiment-warning-content);
 }
-.np-item-prompt.warning a {
+.wds-list-item-prompt.warning a {
   color: var(--color-sentiment-warning-content);
 }
-.np-item-prompt.warning a:hover {
+.wds-list-item-prompt.warning a:hover {
   color: var(--color-sentiment-warning-content-hover);
 }
-.np-item-prompt.warning a:active {
+.wds-list-item-prompt.warning a:active {
   color: var(--color-sentiment-warning-content-active);
 }
-.np-prompt-interactive.np-item-prompt.warning:hover {
+.np-prompt-interactive.wds-list-item-prompt.warning:hover {
   background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 90%, var(--color-sentiment-warning-primary));
 }
-.np-prompt-interactive.np-item-prompt.warning:active {
+.np-prompt-interactive.wds-list-item-prompt.warning:active {
   background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 80%, var(--color-sentiment-warning-primary));
 }
 .np-field-control {
@@ -5353,6 +5353,9 @@ html:not([dir="rtl"]) .np-navigation-option {
   width: 50px;
   padding: 2px;
   border-radius: 16px;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
 }
 .np-switch:focus {
   outline: none;

package/src/main.less

@@ -39,7 +39,7 @@
 @import "./image/Image.less";
 @import "./info/Info.less";
 @import "./inputs/Input.less";
-@import "./item/Item.less";
+@import "./listItem/ListItem.less";
 @import "./field/Field.less";
 @import "./inputs/InputGroup.less";
 @import "./inputs/SelectInput.less";
@@ -78,7 +78,7 @@
 @import "./uploadInput/uploadItem/UploadItem.less";
 @import "./progress/Progress.less";
 @import "./progressBar/ProgressBar.less";
-@import "./listItem/ListItem.less";
+@import "./legacylistItem/LegacyListItem.less";
 
 // List all less files in src in alphabetical order: find -s src -type f -name '*.less' ! -name 'main.less'
 // Make sure you are not referencing main.less itself in this file!

package/src/phoneNumberInput/PhoneNumberInput.spec.tsx

@@ -159,11 +159,11 @@ describe('PhoneNumberInput', () => {
       });
     });
 
-    describe('when an invalid model is supplied', () => {
-      it('should not re-explode model', () => {
+    describe('when an partial model is supplied (with a matching prefix)', () => {
+      it('should set the select to the matching prefix and put the rest of the number in the suffix', () => {
         customRender({ initialValue: '+123' });
-        expect(getPrefixEl()).toHaveTextContent('+44');
-        expect(getInputEl()).toHaveValue('');
+        expect(getPrefixEl()).toHaveTextContent('+1');
+        expect(getInputEl()).toHaveValue('23');
       });
     });
   });

package/src/phoneNumberInput/PhoneNumberInput.story.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
+import { Field } from '../field/Field';
 import PhoneNumberInput from './PhoneNumberInput';
 
 const meta = {
@@ -22,3 +23,24 @@ export const Basic = {
     onChange: () => {},
   },
 } satisfies Story;
+
+export const InitialValue = () => {
+  const initialValues = [
+    undefined,
+    '+44',
+    '+441',
+    '+1',
+    '+12',
+    '+1234',
+    '+1264',
+    '+992',
+    '+9999',
+    '+99992',
+  ];
+
+  return initialValues.map((initialValue) => (
+    <Field key={initialValue} label={`With initialValue: ${JSON.stringify(initialValue ?? null)}`}>
+      <PhoneNumberInput initialValue={initialValue} placeholder="placeholder" onChange={() => {}} />
+    </Field>
+  ));
+};

package/src/phoneNumberInput/PhoneNumberInput.tsx

@@ -66,7 +66,7 @@ const PhoneNumberInput = ({
   const [internalValue, setInternalValue] = useState<PhoneNumber>(() => {
     const cleanValue = initialValue ? cleanNumber(initialValue) : null;
 
-    if (!cleanValue || !isValidPhoneNumber(cleanValue)) {
+    if (!cleanValue || !isValidPhoneNumber(cleanValue, 1)) {
       return {
         prefix: setDefaultPrefix(locale, countryCode),
         suffix: '',

package/src/phoneNumberInput/utils/isValidPhoneNumber/isValidPhoneNumber.ts

@@ -1,7 +1,8 @@
 /**
  *
  * @param phoneNumber
- * @returns True if number that starts with "+" and contains a mix of digits and spaces with at least 4 digits.
+ * @returns True if number that starts with "+" and contains a mix of digits and spaces with a configurable min length that defaults to 4.
  */
-export const isValidPhoneNumber = (phoneNumber: string) =>
-  /^\+[\d-\s]+$/.test(phoneNumber) && (phoneNumber.match(/\d+/g)?.join('').length ?? 0) >= 4;
+export const isValidPhoneNumber = (phoneNumber: string, minLength = 4) =>
+  /^\+[\d-\s]+$/.test(phoneNumber) &&
+  (phoneNumber.match(/\d+/g)?.join('').length ?? 0) >= minLength;

package/src/switch/Switch.css

@@ -4,6 +4,9 @@
   width: 50px;
   padding: 2px;
   border-radius: 16px;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
 }
 .np-switch:focus {
   outline: none;

package/src/switch/Switch.less

@@ -8,6 +8,7 @@
   width: 50px;
   padding: 2px;
   border-radius: 16px;
+  user-select: none;
 
   .focus-ring();
 

package/build/listItem/List.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"List.js","sources":["../../src/listItem/List.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nexport interface ListProps {\n  className?: string;\n  children?: React.ReactNode;\n}\n\nexport function List({ className, children }: ListProps) {\n  return <ul className={clsx(className, 'list-unstyled')}>{children}</ul>;\n}\n"],"names":["List","className","children","_jsx","clsx"],"mappings":";;;;;SAOgBA,IAAIA,CAAC;EAAEC,SAAS;AAAEC,EAAAA,QAAAA;AAAqB,CAAA,EAAA;AACrD,EAAA,oBAAOC,cAAA,CAAA,IAAA,EAAA;AAAIF,IAAAA,SAAS,EAAEG,SAAI,CAACH,SAAS,EAAE,eAAe,CAAE;AAAAC,IAAAA,QAAA,EAAEA,QAAAA;AAAQ,GAAK,CAAC,CAAA;AACzE;;;;"}

package/build/listItem/List.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"List.mjs","sources":["../../src/listItem/List.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nexport interface ListProps {\n  className?: string;\n  children?: React.ReactNode;\n}\n\nexport function List({ className, children }: ListProps) {\n  return <ul className={clsx(className, 'list-unstyled')}>{children}</ul>;\n}\n"],"names":["List","className","children","_jsx","clsx"],"mappings":";;;SAOgBA,IAAIA,CAAC;EAAEC,SAAS;AAAEC,EAAAA,QAAAA;AAAqB,CAAA,EAAA;AACrD,EAAA,oBAAOC,GAAA,CAAA,IAAA,EAAA;AAAIF,IAAAA,SAAS,EAAEG,IAAI,CAACH,SAAS,EAAE,eAAe,CAAE;AAAAC,IAAAA,QAAA,EAAEA,QAAAA;AAAQ,GAAK,CAAC,CAAA;AACzE;;;;"}

package/build/listItem/ListItem.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ListItem.js","sources":["../../src/listItem/ListItem.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ElementType, FC, ReactNode } from 'react';\n\nimport Body from '../body/Body';\n\nexport type ListItemProps = {\n  title: ReactNode;\n  value: ReactNode;\n  media?: ReactNode;\n  action?: ReactNode;\n  className?: string;\n  isContainerAligned?: boolean;\n  as?: ElementType;\n};\n\nconst ListItem: FC<ListItemProps> = ({\n  media,\n  action,\n  className,\n  title,\n  value,\n  isContainerAligned,\n  as = 'li',\n  ...rest\n}) => {\n  const Element = as;\n\n  return (\n    <Element\n      className={clsx('np-list-item d-flex align-items-center p-y-2', className, {\n        'p-x-2': !isContainerAligned,\n      })}\n      {...rest}\n    >\n      {media}\n\n      <div className={clsx('d-flex flex-column', { 'p-l-2': !!media, 'p-r-2': !!action })}>\n        <Body type=\"body-default\" className=\"text-secondary m-b-0\">\n          {title}\n        </Body>\n        {value && (\n          <Body type=\"body-large\" className=\"text-primary text-overflow-wrap m-b-0\">\n            {value}\n          </Body>\n        )}\n      </div>\n\n      {action ? <div className=\"np-list-item__action m-l-auto\">{action}</div> : null}\n    </Element>\n  );\n};\n\nexport default ListItem;\n"],"names":["ListItem","media","action","className","title","value","isContainerAligned","as","rest","Element","_jsxs","clsx","children","_jsx","Body","type"],"mappings":";;;;;;;;AAeMA,MAAAA,QAAQ,GAAsBA,CAAC;EACnCC,KAAK;EACLC,MAAM;EACNC,SAAS;EACTC,KAAK;EACLC,KAAK;EACLC,kBAAkB;AAClBC,EAAAA,EAAE,GAAG,IAAI;EACT,GAAGC,IAAAA;AACJ,CAAA,KAAI;EACH,MAAMC,OAAO,GAAGF,EAAE,CAAA;EAElB,oBACEG,eAAA,CAACD,OAAO,EAAA;AACNN,IAAAA,SAAS,EAAEQ,SAAI,CAAC,8CAA8C,EAAER,SAAS,EAAE;AACzE,MAAA,OAAO,EAAE,CAACG,kBAAAA;AACX,KAAA,CAAE;AAAA,IAAA,GACCE,IAAI;IAAAI,QAAA,EAAA,CAEPX,KAAK,eAENS,eAAA,CAAA,KAAA,EAAA;AAAKP,MAAAA,SAAS,EAAEQ,SAAI,CAAC,oBAAoB,EAAE;QAAE,OAAO,EAAE,CAAC,CAACV,KAAK;QAAE,OAAO,EAAE,CAAC,CAACC,MAAAA;AAAM,OAAE,CAAE;MAAAU,QAAA,EAAA,cAClFC,cAAA,CAACC,YAAI,EAAA;AAACC,QAAAA,IAAI,EAAC,cAAc;AAACZ,QAAAA,SAAS,EAAC,sBAAsB;AAAAS,QAAAA,QAAA,EACvDR,KAAAA;AAAK,OACF,CACN,EAACC,KAAK,iBACJQ,cAAA,CAACC,YAAI,EAAA;AAACC,QAAAA,IAAI,EAAC,YAAY;AAACZ,QAAAA,SAAS,EAAC,uCAAuC;AAAAS,QAAAA,QAAA,EACtEP,KAAAA;AAAK,OACF,CACP,CAAA;AAAA,KACE,CAEL,EAACH,MAAM,gBAAGW,cAAA,CAAA,KAAA,EAAA;AAAKV,MAAAA,SAAS,EAAC,+BAA+B;AAAAS,MAAAA,QAAA,EAAEV,MAAAA;KAAY,CAAC,GAAG,IAAI,CAAA;AAAA,GACvE,CAAC,CAAA;AAEd;;;;"}

package/build/listItem/ListItem.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"ListItem.mjs","sources":["../../src/listItem/ListItem.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ElementType, FC, ReactNode } from 'react';\n\nimport Body from '../body/Body';\n\nexport type ListItemProps = {\n  title: ReactNode;\n  value: ReactNode;\n  media?: ReactNode;\n  action?: ReactNode;\n  className?: string;\n  isContainerAligned?: boolean;\n  as?: ElementType;\n};\n\nconst ListItem: FC<ListItemProps> = ({\n  media,\n  action,\n  className,\n  title,\n  value,\n  isContainerAligned,\n  as = 'li',\n  ...rest\n}) => {\n  const Element = as;\n\n  return (\n    <Element\n      className={clsx('np-list-item d-flex align-items-center p-y-2', className, {\n        'p-x-2': !isContainerAligned,\n      })}\n      {...rest}\n    >\n      {media}\n\n      <div className={clsx('d-flex flex-column', { 'p-l-2': !!media, 'p-r-2': !!action })}>\n        <Body type=\"body-default\" className=\"text-secondary m-b-0\">\n          {title}\n        </Body>\n        {value && (\n          <Body type=\"body-large\" className=\"text-primary text-overflow-wrap m-b-0\">\n            {value}\n          </Body>\n        )}\n      </div>\n\n      {action ? <div className=\"np-list-item__action m-l-auto\">{action}</div> : null}\n    </Element>\n  );\n};\n\nexport default ListItem;\n"],"names":["ListItem","media","action","className","title","value","isContainerAligned","as","rest","Element","_jsxs","clsx","children","_jsx","Body","type"],"mappings":";;;;AAeMA,MAAAA,QAAQ,GAAsBA,CAAC;EACnCC,KAAK;EACLC,MAAM;EACNC,SAAS;EACTC,KAAK;EACLC,KAAK;EACLC,kBAAkB;AAClBC,EAAAA,EAAE,GAAG,IAAI;EACT,GAAGC,IAAAA;AACJ,CAAA,KAAI;EACH,MAAMC,OAAO,GAAGF,EAAE,CAAA;EAElB,oBACEG,IAAA,CAACD,OAAO,EAAA;AACNN,IAAAA,SAAS,EAAEQ,IAAI,CAAC,8CAA8C,EAAER,SAAS,EAAE;AACzE,MAAA,OAAO,EAAE,CAACG,kBAAAA;AACX,KAAA,CAAE;AAAA,IAAA,GACCE,IAAI;IAAAI,QAAA,EAAA,CAEPX,KAAK,eAENS,IAAA,CAAA,KAAA,EAAA;AAAKP,MAAAA,SAAS,EAAEQ,IAAI,CAAC,oBAAoB,EAAE;QAAE,OAAO,EAAE,CAAC,CAACV,KAAK;QAAE,OAAO,EAAE,CAAC,CAACC,MAAAA;AAAM,OAAE,CAAE;MAAAU,QAAA,EAAA,cAClFC,GAAA,CAACC,IAAI,EAAA;AAACC,QAAAA,IAAI,EAAC,cAAc;AAACZ,QAAAA,SAAS,EAAC,sBAAsB;AAAAS,QAAAA,QAAA,EACvDR,KAAAA;AAAK,OACF,CACN,EAACC,KAAK,iBACJQ,GAAA,CAACC,IAAI,EAAA;AAACC,QAAAA,IAAI,EAAC,YAAY;AAACZ,QAAAA,SAAS,EAAC,uCAAuC;AAAAS,QAAAA,QAAA,EACtEP,KAAAA;AAAK,OACF,CACP,CAAA;AAAA,KACE,CAEL,EAACH,MAAM,gBAAGW,GAAA,CAAA,KAAA,EAAA;AAAKV,MAAAA,SAAS,EAAC,+BAA+B;AAAAS,MAAAA,QAAA,EAAEV,MAAAA;KAAY,CAAC,GAAG,IAAI,CAAA;AAAA,GACvE,CAAC,CAAA;AAEd;;;;"}

package/build/styles/item/Item.css

@@ -1,188 +0,0 @@
-.np-item {
-  padding: 16px;
-  padding: var(--size-16);
-  border-radius: 24px;
-  border-radius: var(--radius-large);
-  background-color: #ffffff;
-  background-color: var(--color-background-screen);
-  gap: 16px;
-  gap: var(--size-16);
-}
-.np-item-interactive {
-  cursor: pointer;
-}
-.np-item-interactive:hover {
-  background-color: var(--color-background-screen-hover);
-}
-.np-item-interactive:active {
-  background-color: var(--color-background-screen-active);
-}
-.np-item-media-image {
-  width: var(--item-media-image-size);
-  height: var(--item-media-image-size);
-}
-.np-item-body {
-  width: 100%;
-}
-.np-item-title {
-  color: #37517e;
-  color: var(--color-content-primary);
-}
-.np-item-additional-info {
-  color: #768e9c;
-  color: var(--color-content-tertiary);
-}
-.np-item-value {
-  flex: 0 0 auto;
-}
-.np-item-control {
-  flex: 0 0 auto;
-}
-.np-item-spotlight-active {
-  background-color: rgba(134,167,189,0.10196);
-  background-color: var(--color-background-neutral);
-}
-.np-item-spotlight-active:hover {
-  background-color: var(--color-background-neutral-hover);
-}
-.np-item-spotlight-active:active {
-  background-color: var(--color-background-neutral-active);
-}
-.np-item-spotlight-inactive {
-  background-color: rgba(134, 167, 189, 0.025);
-  border: 1px dashed rgba(0,0,0,0.10196);
-  border: 1px dashed var(--color-border-neutral);
-}
-@supports (color: color-mix(in lch, red, blue)) {
-.np-item-spotlight-inactive {
-  background-color: color-mix(in srgb, var(--color-background-neutral) 25%, transparent);
-}
-}
-.np-item-spotlight-inactive:hover {
-  background-color: color-mix(in srgb, var(--color-background-neutral-hover) 25%, transparent);
-}
-.np-item-spotlight-inactive:active {
-  background-color: color-mix(in srgb, var(--color-background-neutral-active) 25%, transparent);
-}
-.np-item-prompt {
-  display: inline-flex;
-  padding-top: calc(8px / 2);
-  padding-top: calc(var(--padding-x-small) / 2);
-  padding-bottom: calc(8px / 2);
-  padding-bottom: calc(var(--padding-x-small) / 2);
-  padding-left: calc(8px - 1px);
-  padding-left: calc(var(--padding-x-small) - 1px);
-  padding-right: 8px;
-  padding-right: var(--padding-x-small);
-  border-radius: 10px;
-  border-radius: var(--radius-small);
-  word-break: break-word;
-  word-wrap: break-word;
-}
-.np-item-prompt .np-prompt-icon {
-  padding-right: calc(12px / 2);
-  padding-right: calc(var(--size-12) / 2);
-  padding-top: calc(4px - 1px);
-  padding-top: calc(var(--size-4) - 1px);
-  padding-bottom: calc(4px - 1px);
-  padding-bottom: calc(var(--size-4) - 1px);
-}
-.np-item-prompt .np-prompt-icon .tw-icon-tags,
-.np-item-prompt .np-prompt-icon .tw-icon-confetti {
-  color: var(--color-sentiment-positive-primary);
-}
-.np-item-prompt a {
-  text-underline-offset: calc(4px / 2);
-  text-underline-offset: calc(var(--size-4) / 2);
-}
-.np-item-prompt.np-prompt-interactive {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  cursor: pointer;
-  border: none;
-}
-.np-item-prompt.negative {
-  background-color: var(--color-sentiment-negative-secondary);
-  color: var(--color-sentiment-negative-primary);
-}
-.np-item-prompt.negative a {
-  color: var(--color-sentiment-negative-primary);
-}
-.np-item-prompt.negative a:hover {
-  color: var(--color-sentiment-negative-primary-hover);
-}
-.np-item-prompt.negative a:active {
-  color: var(--color-sentiment-negative-primary-active);
-}
-.np-prompt-interactive.np-item-prompt.negative:hover {
-  background-color: color-mix(in srgb, var(--color-sentiment-negative-secondary) 95%, var(--color-sentiment-negative-primary));
-}
-.np-prompt-interactive.np-item-prompt.negative:active {
-  background-color: color-mix(in srgb, var(--color-sentiment-negative-secondary) 90%, var(--color-sentiment-negative-primary));
-}
-.np-item-prompt.positive,
-.np-item-prompt.discount,
-.np-item-prompt.savings {
-  background-color: var(--color-sentiment-positive-secondary);
-  color: var(--color-sentiment-positive-primary);
-}
-.np-item-prompt.positive a,
-.np-item-prompt.discount a,
-.np-item-prompt.savings a {
-  color: var(--color-sentiment-positive-primary);
-}
-.np-item-prompt.positive a:hover,
-.np-item-prompt.discount a:hover,
-.np-item-prompt.savings a:hover {
-  color: var(--color-sentiment-positive-primary-hover);
-}
-.np-item-prompt.positive a:active,
-.np-item-prompt.discount a:active,
-.np-item-prompt.savings a:active {
-  color: var(--color-sentiment-positive-primary-active);
-}
-.np-prompt-interactive.np-item-prompt.positive:hover,
-.np-prompt-interactive.np-item-prompt.discount:hover,
-.np-prompt-interactive.np-item-prompt.savings:hover {
-  background-color: color-mix(in srgb, var(--color-sentiment-positive-secondary) 95%, var(--color-sentiment-positive-primary));
-}
-.np-prompt-interactive.np-item-prompt.positive:active,
-.np-prompt-interactive.np-item-prompt.discount:active,
-.np-prompt-interactive.np-item-prompt.savings:active {
-  background-color: color-mix(in srgb, var(--color-sentiment-positive-secondary) 90%, var(--color-sentiment-positive-primary));
-}
-.np-item-prompt.neutral {
-  background-color: rgba(134,167,189,0.10196);
-  background-color: var(--color-background-neutral);
-  color: #37517e;
-  color: var(--color-content-primary);
-}
-.np-item-prompt.neutral a {
-  color: #37517e;
-  color: var(--color-content-primary);
-}
-.np-prompt-interactive.np-item-prompt.neutral:hover {
-  background-color: var(--color-background-neutral-hover);
-}
-.np-prompt-interactive.np-item-prompt.neutral:active {
-  background-color: var(--color-background-neutral-active);
-}
-.np-item-prompt.warning {
-  background-color: var(--color-sentiment-warning-secondary);
-  color: var(--color-sentiment-warning-content);
-}
-.np-item-prompt.warning a {
-  color: var(--color-sentiment-warning-content);
-}
-.np-item-prompt.warning a:hover {
-  color: var(--color-sentiment-warning-content-hover);
-}
-.np-item-prompt.warning a:active {
-  color: var(--color-sentiment-warning-content-active);
-}
-.np-prompt-interactive.np-item-prompt.warning:hover {
-  background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 90%, var(--color-sentiment-warning-primary));
-}
-.np-prompt-interactive.np-item-prompt.warning:active {
-  background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 80%, var(--color-sentiment-warning-primary));
-}

package/build/types/item/Item.d.ts

@@ -1,43 +0,0 @@
-import { ReactNode } from 'react';
-export type ItemTypes = 'non-interactive' | 'navigation' | 'radio' | 'checkbox' | 'switch' | 'button' | 'icon-button';
-export type Props = {
-    as?: 'li' | 'div' | 'span';
-    inverted?: boolean;
-    disabled?: boolean;
-    spotlight?: 'active' | 'inactive';
-    title: ReactNode;
-    subtitle?: ReactNode;
-    additionalInfo?: ReactNode;
-    valueTitle?: ReactNode;
-    valueSubtitle?: ReactNode;
-    media?: ReactNode;
-    control?: ReactNode;
-    prompt?: ReactNode;
-};
-export type ItemContextData = {
-    setControlType: (type: ItemTypes) => void;
-    ids: {
-        label: string;
-        additionalInfo: string;
-        value: string;
-        control: string;
-        prompt: string;
-    };
-    props: Pick<Props, 'as' | 'disabled' | 'inverted'>;
-};
-export declare const ItemContext: import("react").Context<ItemContextData>;
-export declare const Item: {
-    ({ as: View, title, subtitle, additionalInfo, prompt, inverted, media, spotlight, valueTitle, valueSubtitle, control, disabled, }: Props): import("react").JSX.Element;
-    Image: ({ alt, size, ...props }: import("./ItemMedia").ItemImageProps) => import("react").JSX.Element;
-    AvatarView: ({ className, size, ...props }: import("./ItemMedia").ItemAvatarViewProps) => import("react").JSX.Element;
-    AvatarLayout: ({ className, size, ...props }: import("./ItemMedia").ItemAvatarLayoutProps) => import("react").JSX.Element;
-    AdditionalInfo: ({ children, action }: import("./ItemAdditionalInfo").ItemAdditionalInfoProps) => import("react").JSX.Element;
-    Checkbox: (props: import("./ItemCheckbox").ItemCheckboxProps) => import("react").JSX.Element;
-    IconButton: (props: import("./ItemIconButton").ItemIconButtonProps) => import("react").JSX.Element;
-    Navigation: ({ onClick }: import("./ItemNavigation").ItemNavigationProps) => import("react").JSX.Element;
-    Button: ({ priority, ...props }: import("./ItemButton").ItemButtonProps) => import("react").JSX.Element;
-    Switch: (props: import("..").SwitchProps) => import("react").JSX.Element;
-    Prompt: ({ type, children, action }: import("./prompt/Prompt").ItemPromptProps) => import("react").JSX.Element;
-};
-export default Item;
-//# sourceMappingURL=Item.d.ts.map

package/build/types/item/Item.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../../src/item/Item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,SAAS,EAA4B,MAAM,OAAO,CAAC;AAa3E,MAAM,MAAM,SAAS,GACjB,iBAAiB,GACjB,YAAY,GACZ,OAAO,GACP,UAAU,GACV,QAAQ,GACR,QAAQ,GACR,aAAa,CAAC;AAElB,MAAM,MAAM,KAAK,GAAG;IAClB,EAAE,CAAC,EAAE,IAAI,GAAG,KAAK,GAAG,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IAClC,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,cAAc,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IAC1C,GAAG,EAAE;QACH,KAAK,EAAE,MAAM,CAAC;QACd,cAAc,EAAE,MAAM,CAAC;QACvB,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,MAAM,CAAC;QAChB,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,GAAG,UAAU,GAAG,UAAU,CAAC,CAAC;CACpD,CAAC;AAIF,eAAO,MAAM,WAAW,0CAAuC,CAAC;AAEhE,eAAO,MAAM,IAAI;uIAad,KAAK;;;;;;;;;;;CAmGP,CAAC;AAeF,eAAe,IAAI,CAAC"}

package/build/types/item/ItemAdditionalInfo.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ItemAdditionalInfo.d.ts","sourceRoot":"","sources":["../../../src/item/ItemAdditionalInfo.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAc,MAAM,OAAO,CAAC;AAGtD,OAAa,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAG1C,MAAM,MAAM,uBAAuB,GAAG,iBAAiB,CAAC;IACtD,MAAM,CAAC,EAAE,IAAI,CAAC,SAAS,EAAE,MAAM,GAAG,SAAS,GAAG,QAAQ,CAAC,GAAG;QAAE,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CAC9E,CAAC,CAAC;AAEH,eAAO,MAAM,cAAc,yBAAmC,uBAAuB,gCAoBpF,CAAC"}

package/build/types/item/ItemButton.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ItemButton.d.ts","sourceRoot":"","sources":["../../../src/item/ItemButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAyB,cAAc,EAAE,MAAM,WAAW,CAAC;AAGlE,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,cAAc,EAAE,IAAI,GAAG,MAAM,GAAG,UAAU,CAAC,CAAC;AAE/E,eAAO,MAAM,MAAM,2BAA0C,eAAe,gCAY3E,CAAC"}

package/build/types/item/ItemCheckbox.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ItemCheckbox.d.ts","sourceRoot":"","sources":["../../../src/item/ItemCheckbox.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,mBAAmB,EAAE,MAAM,kCAAkC,CAAC;AAGvE,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,mBAAmB,EAAE,SAAS,GAAG,eAAe,GAAG,UAAU,CAAC,CAAC;AAEpG,eAAO,MAAM,QAAQ,UAAoB,iBAAiB,gCAIzD,CAAC"}

package/build/types/item/ItemIconButton.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ItemIconButton.d.ts","sourceRoot":"","sources":["../../../src/item/ItemIconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA6B,eAAe,EAAE,MAAM,eAAe,CAAC;AAE3E,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,eAAe,EAAE,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAC,GAAG;IACvF,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,UAAU,UAAoB,mBAAmB,gCAI7D,CAAC"}

package/build/types/item/ItemMedia.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ItemMedia.d.ts","sourceRoot":"","sources":["../../../src/item/ItemMedia.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA6B,eAAe,EAAE,MAAM,eAAe,CAAC;AAC3E,OAAO,EAA+B,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACjF,OAAO,EAAwB,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAGlE,KAAK,QAAQ,GAAG;IAAE,IAAI,CAAC,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAA;CAAE,CAAC;AAElD,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,eAAe,EAAE,MAAM,GAAG,aAAa,CAAC,GAAG,QAAQ,CAAC;AAE3F,eAAO,MAAM,UAAU,kCAAwC,mBAAmB,gCAQjF,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,IAAI,CAAC,iBAAiB,EAAE,MAAM,GAAG,aAAa,CAAC,GAAG,QAAQ,CAAC;AAE/F,eAAO,MAAM,YAAY,kCAAwC,qBAAqB,gCAQrF,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,UAAU,EAAE,SAAS,GAAG,QAAQ,GAAG,IAAI,GAAG,KAAK,CAAC,GAChF,QAAQ,GAAG;IACT,GAAG,CAAC,EAAE,MAAM,CAAC;CACd,CAAC;AAEJ;;GAEG;AACH,eAAO,MAAM,KAAK,4BAAuC,cAAc,gCAYtE,CAAC"}

package/build/types/item/ItemNavigation.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ItemNavigation.d.ts","sourceRoot":"","sources":["../../../src/item/ItemNavigation.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAGrD,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,MAAM,CAAC,CAAC;AAExE,eAAO,MAAM,UAAU,gBAAoC,mBAAmB,gCAI7E,CAAC"}

package/build/types/item/ItemSwitch.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ItemSwitch.d.ts","sourceRoot":"","sources":["../../../src/item/ItemSwitch.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAyB,WAAW,EAAE,MAAM,WAAW,CAAC;AAG/D,eAAO,MAAM,MAAM,UAAoB,WAAW,gCAIjD,CAAC"}