@transferwise/components 0.0.0-experimental-9773c7e → 0.0.0-experimental-c0ebd4f

package/src/title/Title.test.story.tsx

@@ -1,5 +1,4 @@
 import { Typography } from '../common/propsValues/typography';
-import Modal from '../modal';
 import { lorem1000 } from '../test-utils';
 
 import Title from './Title';
@@ -7,19 +6,27 @@ import Title from './Title';
 export default {
   component: Title,
   title: 'Typography/Title/Tests',
+  args: {
+    children: lorem1000.replaceAll(' ', ''),
+  },
+  argTypes: {
+    as: {
+      table: {
+        disable: true,
+      },
+    },
+    type: {
+      table: {
+        disable: true,
+      },
+    },
+  },
 };
 
-export const Hyphenation = () => {
+export const Hyphenation = ({ children }: { children: string }) => {
   return (
-    <Modal
-      open
-      body={
-        <Title type={Typography.TITLE_SCREEN} style={{ maxWidth: '600px' }}>
-          This Screen Title is mostly one very long word and it hyphenates{' '}
-          {lorem1000.replaceAll(' ', '')}
-        </Title>
-      }
-      onClose={() => {}}
-    />
+    <Title type={Typography.TITLE_SCREEN} style={{ maxWidth: '600px', wordWrap: 'break-word' }}>
+      {` ${children}`}
+    </Title>
   );
 };

package/src/title/Title.tsx

@@ -28,6 +28,7 @@ type Props = LabelHTMLAttributes<HTMLHeadingElement | HTMLSpanElement | HTMLLabe
 function Title({ as, type = DEFAULT_TYPE, className, ...props }: Props) {
   const mapping = titleTypeMapping[type];
   const isTypeSupported = mapping !== undefined;
+
   if (isTypeSupported) {
     const HeaderTag = as ?? mapping;
     return <HeaderTag {...props} className={clsx(`np-text-${type}`, className)} />;

package/build/styles/item/Item.css

@@ -1,186 +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);
-  display: flex;
-  gap: 16px;
-  gap: var(--size-16);
-  align-items: center;
-  flex-direction: row;
-  cursor: pointer;
-}
-.np-item:hover {
-  background-color: var(--color-background-screen-hover);
-}
-.np-item:active {
-  background-color: var(--color-background-screen-active);
-}
-.np-item-media {
-  flex: 0 0 auto;
-  align-items: flex-start;
-}
-.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 - 1);
-  padding-top: calc(var(--size-4) - 1);
-  padding-bottom: calc(4px - 1);
-  padding-bottom: calc(var(--size-4) - 1);
-}
-.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,40 +0,0 @@
-import { ReactNode } from 'react';
-export type ItemTypes = 'none' | 'navigation' | 'radio' | 'checkbox' | 'switch' | 'button' | 'icon-button';
-export type Props = {
-    as?: 'li' | 'div' | 'span';
-    inverted?: boolean;
-    disabled?: boolean;
-    partialInteractivity?: 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: (props: import("./ItemImage").ItemImageProps) => 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;
-    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;AAW3E,MAAM,MAAM,SAAS,GACjB,MAAM,GACN,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,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,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;;;;;;;CAwFP,CAAC;AAWF,eAAe,IAAI,CAAC"}

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

@@ -1,9 +0,0 @@
-import { PropsWithChildren } from 'react';
-import { LinkProps } from '../link';
-export type ItemAdditionalInfoProps = PropsWithChildren<{
-    action?: Pick<LinkProps, 'href' | 'onClick' | 'target'> & {
-        label?: string;
-    };
-}>;
-export declare const AdditionalInfo: ({ children, action }: ItemAdditionalInfoProps) => import("react").JSX.Element;
-//# sourceMappingURL=ItemAdditionalInfo.d.ts.map

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

@@ -1,4 +0,0 @@
-import { CheckboxButtonProps } from '../checkboxButton/CheckboxButton';
-export type ItemCheckboxProps = Pick<CheckboxButtonProps, 'checked' | 'indeterminate' | 'onChange'>;
-export declare const Checkbox: (props: ItemCheckboxProps) => import("react").JSX.Element;
-//# sourceMappingURL=ItemCheckbox.d.ts.map

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":"AAEA,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,gCAQzD,CAAC"}

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

@@ -1,4 +0,0 @@
-import { IconButtonProps } from '../iconButton';
-export type ItemIconButtonProps = Pick<IconButtonProps, 'onClick' | 'href' | 'target'>;
-export declare const IconButton: (props: ItemIconButtonProps) => import("react").JSX.Element;
-//# sourceMappingURL=ItemIconButton.d.ts.map

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":"AACA,OAAO,EAA6B,eAAe,EAAE,MAAM,eAAe,CAAC;AAG3E,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,eAAe,EAAE,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAC,CAAC;AAEvF,eAAO,MAAM,UAAU,UAAoB,mBAAmB,gCAQ7D,CAAC"}

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

@@ -1,4 +0,0 @@
-import { ImageProps } from '../image/Image';
-export type ItemImageProps = Pick<ImageProps, 'src' | 'alt'>;
-export declare const Image: (props: ItemImageProps) => import("react").JSX.Element;
-//# sourceMappingURL=ItemImage.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"ItemImage.d.ts","sourceRoot":"","sources":["../../../src/item/ItemImage.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAkB,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAE5D,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,UAAU,EAAE,KAAK,GAAG,KAAK,CAAC,CAAC;AAE7D,eAAO,MAAM,KAAK,UAAoB,cAAc,gCAInD,CAAC"}

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

@@ -1,4 +0,0 @@
-import { ButtonProps } from '../button/Button.types';
-export type ItemNavigationProps = Pick<ButtonProps, 'onClick' | 'href'>;
-export declare const Navigation: ({ onClick }: ItemNavigationProps) => import("react").JSX.Element;
-//# sourceMappingURL=ItemNavigation.d.ts.map

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;AAIrD,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,MAAM,CAAC,CAAC;AAExE,eAAO,MAAM,UAAU,gBAAoC,mBAAmB,gCAQ7E,CAAC"}

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

@@ -1,5 +0,0 @@
-export type { Props as ItemProps } from './Item';
-export type { ItemAdditionalInfoProps } from './ItemAdditionalInfo';
-export type { ItemCheckboxProps } from './ItemCheckbox';
-export { default } from './Item';
-//# sourceMappingURL=index.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/item/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,KAAK,IAAI,SAAS,EAAE,MAAM,QAAQ,CAAC;AACjD,YAAY,EAAE,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AACpE,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC"}

package/build/types/item/prompt/Prompt.d.ts

@@ -1,12 +0,0 @@
-import { Sentiment } from '../../common';
-import { LinkProps } from '../../link';
-export type ItemPromptProps = {
-    type: `${Sentiment.POSITIVE | Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.WARNING}` | 'discount' | 'savings';
-    children: React.ReactNode;
-    action?: Pick<LinkProps, 'href' | 'target' | 'onClick'> & {
-        'aria-label'?: string;
-    };
-};
-export declare const ItemPrompt: ({ type, children, action }: ItemPromptProps) => import("react").JSX.Element;
-export default ItemPrompt;
-//# sourceMappingURL=Prompt.d.ts.map

package/build/types/item/prompt/Prompt.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Prompt.d.ts","sourceRoot":"","sources":["../../../../src/item/prompt/Prompt.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAGzC,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAGvC,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,EACA,GAAG,SAAS,CAAC,QAAQ,GAAG,SAAS,CAAC,QAAQ,GAAG,SAAS,CAAC,OAAO,GAAG,SAAS,CAAC,OAAO,EAAE,GACpF,UAAU,GACV,SAAS,CAAC;IACd,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,CAAC,EAAE,IAAI,CAAC,SAAS,EAAE,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAC,GAAG;QAAE,YAAY,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CACrF,CAAC;AAEF,eAAO,MAAM,UAAU,+BAAgC,eAAe,gCAyBrE,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/src/item/Item.css

@@ -1,186 +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);
-  display: flex;
-  gap: 16px;
-  gap: var(--size-16);
-  align-items: center;
-  flex-direction: row;
-  cursor: pointer;
-}
-.np-item:hover {
-  background-color: var(--color-background-screen-hover);
-}
-.np-item:active {
-  background-color: var(--color-background-screen-active);
-}
-.np-item-media {
-  flex: 0 0 auto;
-  align-items: flex-start;
-}
-.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 - 1);
-  padding-top: calc(var(--size-4) - 1);
-  padding-bottom: calc(4px - 1);
-  padding-bottom: calc(var(--size-4) - 1);
-}
-.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));
-}