@transferwise/components 46.165.2 → 46.165.3

package/build/styles/styles/less/wells.css

@@ -1,43 +1,28 @@
 .well,
 .well-xs {
-  min-block-size: 24px;
   min-block-size: var(--size-24);
-  margin-block-end: 24px;
   margin-block-end: var(--size-24);
-  border-radius: 10px;
   border-radius: var(--radius-small);
-  border: solid 1px rgba(0,0,0,0.10196);
   border: solid 1px var(--color-border-neutral);
-  padding: 24px;
   padding: var(--size-24);
   box-shadow: none;
 }
 @media only screen and (min-width: 600px) {
   .well-sm {
-    min-block-size: 24px;
     min-block-size: var(--size-24);
-    margin-block-end: 24px;
     margin-block-end: var(--size-24);
-    border-radius: 10px;
     border-radius: var(--radius-small);
-    border: solid 1px rgba(0,0,0,0.10196);
     border: solid 1px var(--color-border-neutral);
-    padding: 24px;
     padding: var(--size-24);
     box-shadow: none;
   }
 }
 @media only screen and (min-width: 840px) {
   .well-md {
-    min-block-size: 24px;
     min-block-size: var(--size-24);
-    margin-block-end: 24px;
     margin-block-end: var(--size-24);
-    border-radius: 10px;
     border-radius: var(--radius-small);
-    border: solid 1px rgba(0,0,0,0.10196);
     border: solid 1px var(--color-border-neutral);
-    padding: 24px;
     padding: var(--size-24);
     box-shadow: none;
   }
@@ -45,15 +30,10 @@
 @media only screen and (min-width: 1160px) {
   .well-lg,
   .well-xl {
-    min-block-size: 24px;
     min-block-size: var(--size-24);
-    margin-block-end: 24px;
     margin-block-end: var(--size-24);
-    border-radius: 10px;
     border-radius: var(--radius-small);
-    border: solid 1px rgba(0,0,0,0.10196);
     border: solid 1px var(--color-border-neutral);
-    padding: 24px;
     padding: var(--size-24);
     box-shadow: none;
   }

package/build/types/Body/Body.d.ts

@@ -11,7 +11,7 @@ export type BodyProps = HTMLAttributes<HTMLSpanElement | HTMLParagraphElement> &
      */
     preserveNewlines?: boolean;
 };
-declare const Body: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLParagraphElement | HTMLSpanElement> & {
+declare const Body: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLSpanElement | HTMLParagraphElement> & {
     /** @default 'body-default' */
     type?: BodyTypes;
     /** @default 'div' */
@@ -21,6 +21,6 @@ declare const Body: import("react").ForwardRefExoticComponent<HTMLAttributes<HTM
      * @default false
      */
     preserveNewlines?: boolean;
-} & import("react").RefAttributes<HTMLDivElement | HTMLParagraphElement | HTMLSpanElement | null>>;
+} & import("react").RefAttributes<HTMLDivElement | HTMLSpanElement | HTMLParagraphElement | null>>;
 export default Body;
 //# sourceMappingURL=Body.d.ts.map

package/build/types/IconButton/IconButton.d.ts

@@ -16,6 +16,6 @@ declare const IconButton: import("react").ForwardRefExoticComponent<{
     /** @default 'default' */
     type?: "default" | "negative";
     'data-testid'?: string;
-} & Pick<AnchorHTMLAttributes<HTMLAnchorElement>, "onClick" | "target" | "href"> & Pick<ButtonHTMLAttributes<HTMLButtonElement>, "disabled" | "onClick"> & Pick<HTMLAttributes<HTMLDivElement>, "id" | "className" | "tabIndex" | "role" | "aria-label" | "children"> & import("react").RefAttributes<unknown>>;
+} & Pick<AnchorHTMLAttributes<HTMLAnchorElement>, "onClick" | "target" | "href"> & Pick<ButtonHTMLAttributes<HTMLButtonElement>, "disabled" | "onClick"> & Pick<HTMLAttributes<HTMLDivElement>, "children" | "className" | "id" | "tabIndex" | "role" | "aria-label"> & import("react").RefAttributes<unknown>>;
 export default IconButton;
 //# sourceMappingURL=IconButton.d.ts.map

package/build/types/MoneyInput/MoneyInput.d.ts

@@ -55,7 +55,6 @@ declare const _default: import("react").FC<{
     selectProps?: Partial<SelectInputProps<CurrencyOptionItem>> | undefined;
     amount: number | null;
     searchPlaceholder?: string | undefined;
-    decimals?: number | undefined;
     currencies: readonly CurrencyItem[];
     selectedCurrency: CurrencyOptionItem;
     onCurrencyChange?: ((value: CurrencyOptionItem) => void) | undefined;
@@ -67,6 +66,7 @@ declare const _default: import("react").FC<{
     }) => void) | undefined;
     customActionLabel?: import("react").ReactNode;
     onCustomAction?: (() => void) | undefined;
+    decimals?: number | undefined;
 }>;
 export default _default;
 //# sourceMappingURL=MoneyInput.d.ts.map

package/build/types/MoneyInput/MoneyInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MoneyInput.d.ts","sourceRoot":"","sources":["../../../src/MoneyInput/MoneyInput.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAc,KAAK,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAE9E,OAAO,EAGL,SAAS,EACT,UAAU,EACV,SAAS,EAEV,MAAM,WAAW,CAAC;AACnB,OAAO,EAAuB,wBAAwB,EAAE,MAAM,oBAAoB,CAAC;AAEnF,OAAO,EAKL,gBAAgB,EACjB,MAAM,uBAAuB,CAAC;AAO/B,MAAM,WAAW,kBAAkB;IACjC,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,MAAM,YAAY,GAAG,kBAAkB,GAAG,kBAAkB,CAAC;AAoDnE,MAAM,WAAW,eAAgB,SAAQ,qBAAqB;IAC5D,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,UAAU,EAAE,SAAS,YAAY,EAAE,CAAC;IACpC,gBAAgB,EAAE,kBAAkB,CAAC;IACrC,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACvD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;IAC1C,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAChD,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,WAAW,EAAE,MAAM,CAAC;QAAC,eAAe,EAAE,YAAY,EAAE,CAAA;KAAE,KAAK,IAAI,CAAC;IAC3F,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACpC,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACpC,WAAW,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC,CAAC;IAC5D;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,MAAM,kCAAkC,GAAG,eAAe,GAC9D,OAAO,CAAC,wBAAwB,CAAC,CAAC;;SA5B7B,MAAM;wBACS,MAAM;YAMnB,SAAS,GAAG,UAAU,GAAG,SAAS;kBAF3B,MAAM;iBAYP,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC;kBACrB,OAAO,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC;YAZnD,MAAM,GAAG,IAAI;wBAID,MAAM;eAcf,MAAM;gBAtBL,SAAS,YAAY,EAAE;sBACjB,kBAAkB;wBACjB,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI;sBAIrC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI;;sBAM9B,CAAC,KAAK,EAAE;QAAE,WAAW,EAAE,MAAM,CAAC;QAAC,eAAe,EAAE,YAAY,EAAE,CAAA;KAAE,KAAK,IAAI;;sBAEzE,MAAM,IAAI;;AAkb7B,wBAA2F"}
+{"version":3,"file":"MoneyInput.d.ts","sourceRoot":"","sources":["../../../src/MoneyInput/MoneyInput.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAc,KAAK,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAE9E,OAAO,EAGL,SAAS,EACT,UAAU,EACV,SAAS,EAEV,MAAM,WAAW,CAAC;AACnB,OAAO,EAAuB,wBAAwB,EAAE,MAAM,oBAAoB,CAAC;AAEnF,OAAO,EAKL,gBAAgB,EACjB,MAAM,uBAAuB,CAAC;AAO/B,MAAM,WAAW,kBAAkB;IACjC,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,MAAM,YAAY,GAAG,kBAAkB,GAAG,kBAAkB,CAAC;AAoDnE,MAAM,WAAW,eAAgB,SAAQ,qBAAqB;IAC5D,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,UAAU,EAAE,SAAS,YAAY,EAAE,CAAC;IACpC,gBAAgB,EAAE,kBAAkB,CAAC;IACrC,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACvD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;IAC1C,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAChD,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,WAAW,EAAE,MAAM,CAAC;QAAC,eAAe,EAAE,YAAY,EAAE,CAAA;KAAE,KAAK,IAAI,CAAC;IAC3F,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACpC,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACpC,WAAW,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC,CAAC;IAC5D;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,MAAM,kCAAkC,GAAG,eAAe,GAC9D,OAAO,CAAC,wBAAwB,CAAC,CAAC;;SA5B7B,MAAM;wBACS,MAAM;YAMnB,SAAS,GAAG,UAAU,GAAG,SAAS;kBAF3B,MAAM;iBAYP,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC;kBACrB,OAAO,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC;YAZnD,MAAM,GAAG,IAAI;wBAID,MAAM;gBARd,SAAS,YAAY,EAAE;sBACjB,kBAAkB;wBACjB,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI;sBAIrC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI;;sBAM9B,CAAC,KAAK,EAAE;QAAE,WAAW,EAAE,MAAM,CAAC;QAAC,eAAe,EAAE,YAAY,EAAE,CAAA;KAAE,KAAK,IAAI;;sBAEzE,MAAM,IAAI;eAQhB,MAAM;;AA0anB,wBAA2F"}

package/build/types/Title/Title.d.ts

@@ -10,7 +10,7 @@ export type TitleProps = LabelHTMLAttributes<HTMLHeadingElement | HTMLSpanElemen
      */
     type?: TitleTypes;
 };
-declare const Title: React.ForwardRefExoticComponent<React.LabelHTMLAttributes<HTMLHeadingElement | HTMLLabelElement | HTMLSpanElement> & React.LiHTMLAttributes<HTMLLIElement> & {
+declare const Title: React.ForwardRefExoticComponent<React.LabelHTMLAttributes<HTMLSpanElement | HTMLHeadingElement | HTMLLabelElement> & React.LiHTMLAttributes<HTMLLIElement> & {
     /**
      * Default value will based one `type` prop
      */
@@ -19,6 +19,6 @@ declare const Title: React.ForwardRefExoticComponent<React.LabelHTMLAttributes<H
      * Default value: {@link DEFAULT_TYPE}
      */
     type?: TitleTypes;
-} & React.RefAttributes<HTMLHeadingElement | HTMLLabelElement | HTMLLegendElement | HTMLLIElement | HTMLSpanElement>>;
+} & React.RefAttributes<HTMLSpanElement | HTMLHeadingElement | HTMLLabelElement | HTMLLegendElement | HTMLLIElement>>;
 export default Title;
 //# sourceMappingURL=Title.d.ts.map

package/build/types/Upload/Steps/UploadImageStep/UploadImageStep.d.ts

@@ -15,7 +15,7 @@ export default class UploadImageStep extends PureComponent<UploadImageStepProps>
     uploadInputRef: import("react").RefObject<HTMLInputElement>;
     onManualUpload: () => void;
     onKeyDown: (event: React.KeyboardEvent<HTMLLabelElement>) => void;
-    getImage: () => number | true | Iterable<import("react").ReactNode> | import("react").JSX.Element;
+    getImage: () => number | true | import("react").JSX.Element | Iterable<import("react").ReactNode>;
     render(): import("react").JSX.Element;
 }
 //# sourceMappingURL=UploadImageStep.d.ts.map

package/build/types/UploadInput/UploadItem/UploadItemLink.d.ts

@@ -5,5 +5,5 @@ export declare const UploadItemLink: import("react").ForwardRefExoticComponent<{
     singleFileUpload: boolean;
 } & {
     children?: import("react").ReactNode | undefined;
-} & import("react").RefAttributes<HTMLAnchorElement | HTMLDivElement>>;
+} & import("react").RefAttributes<HTMLDivElement | HTMLAnchorElement>>;
 //# sourceMappingURL=UploadItemLink.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "46.165.2",
+  "version": "46.165.3",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -59,7 +59,7 @@
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.3",
     "@testing-library/user-event": "^14.6.7",
-    "@transferwise/icons": "^4.5.0",
+    "@transferwise/icons": "^4.6.0",
     "@transferwise/less-config": "3.2.0",
     "@tsconfig/recommended": "^1.0.13",
     "@types/babel__core": "^7.20.5",
@@ -72,7 +72,7 @@
     "@types/react-dom": "^18.3.7",
     "@types/react-transition-group": "4.4.12",
     "@monaco-editor/react": "^4.7.0",
-    "monaco-editor": "^0.56.0",
+    "monaco-editor": "^0.57.0",
     "monaco-editor-webpack-plugin": "^7.1.1",
     "@wise/art": "^2.32.0",
     "@wise/components-theming": "1.10.3",
@@ -143,7 +143,7 @@
     "build:clean": "rm -rf lib build",
     "build:css-main": "gulp compileLess --dest=src",
     "build:css-utils": "npm-run-all build:css-utils:*",
-    "build:css-utils:copy-brand-assets": "cpx 'src/styles/img/**' build/styles/img && cpx 'src/styles/fonts/*' build/styles/fonts",
+    "build:css-utils:copy-brand-assets": "cpx 'src/styles/img/**' build/styles/img && cpx 'src/styles/fonts/**' build/styles/fonts",
     "build:css-utils:compile": "gulp compileLess --src='src/styles/less' --dest=build/styles/css",
     "build:css-utils:copy-vars": "gulp copyPropsAndVars --src='src/styles/props' --dest='build/styles/props' && gulp copyPropsAndVars --src='src/styles/variables' --dest='build/styles/less'",
     "build:crowdin-source-file": "formatjs extract 'src/**/*.messages.+(js|ts|tsx)' --out-file src/i18n/en.json --format simple && prettier --write src/i18n/*.json",

package/src/Accordion/Accordion.css

@@ -13,12 +13,8 @@
   color: #ffffff;
 }
 .np-accordion-item__content {
-  padding-block: 0 24px;
   padding-block: 0 var(--size-24);
-  padding-inline: 12px 12px;
   padding-inline: var(--size-12) var(--size-12);
-  border-block-end: 1px solid rgba(0,0,0,0.10196);
-  border-block-end: 1px solid #0000001a;
   border-block-end: 1px solid var(--color-border-neutral);
 }
 @media (min-width: 320.02px) {
@@ -27,7 +23,6 @@
   }
 }
 .np-accordion-item .np-option .np-option__title {
-  font-weight: 600;
   font-weight: var(--font-weight-semi-bold);
 }
 .np-theme-personal .np-accordion-item--with-media .media {
@@ -35,9 +30,7 @@
   align-items: center;
 }
 .np-theme-personal .np-accordion-item--with-icon .np-accordion-item__content {
-  padding-block: 0 16px;
   padding-block: 0 var(--size-16);
-  padding-inline: 56px;
   padding-inline: var(--size-56);
 }
 .np-theme-personal .np-accordion-item--with-icon .media {
@@ -45,32 +38,23 @@
   align-items: flex-start;
 }
 .np-theme-personal .np-accordion-item .decision__title {
-  font-size: 1.125rem;
   font-size: var(--font-size-18);
 }
 .np-theme-personal .np-accordion-item .np-option .np-option__title {
   margin-block-end: 0;
-  font-size: 1.125rem;
   font-size: var(--font-size-18);
-  letter-spacing: -0.01em;
   letter-spacing: var(--letter-spacing-negative-xs);
-  line-height: 1.5rem;
   line-height: var(--line-height-24);
 }
 .np-theme-personal .np-accordion-item .np-option .circle-sm {
   background-color: transparent;
-  inline-size: 24px;
   inline-size: var(--size-24);
-  block-size: 24px;
   block-size: var(--size-24);
   border-radius: 0;
 }
 .np-theme-personal .np-accordion-item__content {
-  padding-block: 0 16px;
   padding-block: 0 var(--size-16);
-  padding-inline: 16px 56px;
   padding-inline: var(--size-16) var(--size-56);
   border-block-end: none;
-  color: #5d7079;
   color: var(--color-content-secondary);
 }

package/src/AvatarLayout/AvatarLayout.css

@@ -9,8 +9,6 @@
 }
 .np-avatar-layout-diagonal-mask {
   --np-avatar-layout-mask-direction: right;
-  -webkit-mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) right calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
-          mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) right calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
   -webkit-mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) var(--np-avatar-layout-mask-direction) calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
           mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) var(--np-avatar-layout-mask-direction) calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
 }

package/src/AvatarView/AvatarView.css

@@ -5,12 +5,8 @@
 }
 .np-dot-mask {
   --np-dot-h-side: left;
-  -webkit-mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) left calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
-          mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) left calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
   -webkit-mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) var(--np-dot-h-side) calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
           mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) var(--np-dot-h-side) calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
-  -webkit-mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) left calc(100% - calc(var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
-          mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) left calc(100% - calc(var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
   -webkit-mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) var(--np-dot-h-side) calc(100% - calc(var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
           mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) var(--np-dot-h-side) calc(100% - calc(var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
 }
@@ -21,7 +17,6 @@
   position: absolute;
   inline-size: var(--np-dot-size);
   block-size: var(--np-dot-size);
-  border-radius: 9999px;
   border-radius: var(--radius-full);
   inset-inline-end: 0;
 }
@@ -29,19 +24,16 @@
   background-color: var(--color-sentiment-negative);
 }
 .np-dot-badge-online {
-  background-color: #00a2dd;
   background-color: var(--color-interactive-accent);
 }
 .np-avatar-view .np-avatar-view-content {
   --circle-border-color: var(--color-sentiment-border-overlay, var(--color-border-neutral));
-  color: #37517e;
   color: var(--color-sentiment-content-primary, var(--color-content-primary));
 }
 .np-avatar-view-interactive {
   cursor: pointer;
 }
 .np-avatar-view-interactive .np-circle {
-  background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
   color: var(--color-interactive-primary);
 }

package/src/AvatarView/Dot/Dot.css

@@ -5,12 +5,8 @@
 }
 .np-dot-mask {
   --np-dot-h-side: left;
-  -webkit-mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) left calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
-          mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) left calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
   -webkit-mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) var(--np-dot-h-side) calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
           mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) var(--np-dot-h-side) calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
-  -webkit-mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) left calc(100% - calc(var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
-          mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) left calc(100% - calc(var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
   -webkit-mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) var(--np-dot-h-side) calc(100% - calc(var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
           mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) var(--np-dot-h-side) calc(100% - calc(var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
 }
@@ -21,7 +17,6 @@
   position: absolute;
   inline-size: var(--np-dot-size);
   block-size: var(--np-dot-size);
-  border-radius: 9999px;
   border-radius: var(--radius-full);
   inset-inline-end: 0;
 }
@@ -29,6 +24,5 @@
   background-color: var(--color-sentiment-negative);
 }
 .np-dot-badge-online {
-  background-color: #00a2dd;
   background-color: var(--color-interactive-accent);
 }

package/src/Button/Button.css

@@ -153,11 +153,9 @@
   padding: var(--Button-medium-padding);
 }
 .wds-Button--medium:has(.wds-Button-avatars) {
-  padding-inline-start: 8px;
   padding-inline-start: var(--size-8);
 }
 .wds-Button--medium:has(.wds-Button-icon--end) {
-  padding-inline-end: 8px;
   padding-inline-end: var(--size-8);
 }
 .wds-Button--medium .wds-Button-icon--start {
@@ -167,11 +165,9 @@
   padding: var(--Button-small-padding);
 }
 .wds-Button--small:has(.wds-Button-icon--start) {
-  padding-inline-start: 8px;
   padding-inline-start: var(--size-8);
 }
 .wds-Button--small:has(.wds-Button-icon--end) {
-  padding-inline-end: 8px;
   padding-inline-end: var(--size-8);
 }
 .wds-Button--block {

package/src/Button/LegacyButton/LegacyButton.css

@@ -3,7 +3,6 @@
 }
 .np-btn.np-btn-block > span.btn-loader {
   position: absolute;
-  inset-inline-start: 24px;
   inset-inline-start: var(--size-24);
 }
 .np-btn.np-btn-xs > span.btn-loader {

package/src/Calendar/Calendar.css

@@ -2,16 +2,12 @@
 .wds-Calendar__option--month,
 .wds-Calendar__option--year {
   inline-size: 100%;
-  padding-block: 4px;
   padding-block: var(--size-4);
   padding-inline: 0;
   border: transparent;
-  border-radius: 10px;
   border-radius: var(--radius-small);
   background-color: transparent;
-  font-weight: 600;
   font-weight: var(--font-weight-semi-bold);
-  color: #37517e;
   color: var(--color-content-primary);
 }
 @media (max-width: 320px) {
@@ -33,7 +29,6 @@
 .wds-Calendar__option--month[aria-disabled="true"],
 .wds-Calendar__option--year[aria-disabled="true"] {
   --ring-outline-color: var(--color-sentiment-content-primary);
-  color: #768e9c;
   color: var(--color-content-tertiary);
   cursor: not-allowed;
 }
@@ -91,17 +86,12 @@
 .wds-Calendar__option--day[aria-disabled="true"].today,
 .wds-Calendar__option--month[aria-disabled="true"].today,
 .wds-Calendar__option--year[aria-disabled="true"].today {
-  text-decoration-color: #768e9c;
   text-decoration-color: var(--color-content-tertiary);
 }
 .wds-Calendar__option--day {
-  block-size: 40px;
   block-size: var(--size-40);
-  border-radius: 9999px;
   border-radius: var(--radius-full);
-  line-height: 40px;
   line-height: var(--size-40);
-  inline-size: 40px;
   inline-size: var(--size-40);
   padding: 0;
   display: inline-flex;
@@ -126,12 +116,10 @@
   background-color: initial;
 }
 .tw-date-lookup-calendar > tbody > tr > td.weekend button {
-  color: #5d7079;
   color: var(--color-content-secondary);
 }
 .tw-date-lookup-calendar > tbody > tr > td {
   border: none;
-  padding: 4px;
   padding: var(--size-4);
 }
 @media (max-width: 320px) {

package/src/Calendar/TableLink/TableLink.css

@@ -2,16 +2,12 @@
 .wds-Calendar__option--month,
 .wds-Calendar__option--year {
   inline-size: 100%;
-  padding-block: 4px;
   padding-block: var(--size-4);
   padding-inline: 0;
   border: transparent;
-  border-radius: 10px;
   border-radius: var(--radius-small);
   background-color: transparent;
-  font-weight: 600;
   font-weight: var(--font-weight-semi-bold);
-  color: #37517e;
   color: var(--color-content-primary);
 }
 @media (max-width: 320px) {
@@ -33,7 +29,6 @@
 .wds-Calendar__option--month[aria-disabled="true"],
 .wds-Calendar__option--year[aria-disabled="true"] {
   --ring-outline-color: var(--color-sentiment-content-primary);
-  color: #768e9c;
   color: var(--color-content-tertiary);
   cursor: not-allowed;
 }
@@ -91,17 +86,12 @@
 .wds-Calendar__option--day[aria-disabled="true"].today,
 .wds-Calendar__option--month[aria-disabled="true"].today,
 .wds-Calendar__option--year[aria-disabled="true"].today {
-  text-decoration-color: #768e9c;
   text-decoration-color: var(--color-content-tertiary);
 }
 .wds-Calendar__option--day {
-  block-size: 40px;
   block-size: var(--size-40);
-  border-radius: 9999px;
   border-radius: var(--radius-full);
-  line-height: 40px;
   line-height: var(--size-40);
-  inline-size: 40px;
   inline-size: var(--size-40);
   padding: 0;
   display: inline-flex;

package/src/Carousel/Carousel.css

@@ -8,14 +8,11 @@
   overflow-y: hidden;
   scroll-snap-type: x mandatory;
   scroll-behavior: smooth;
-  gap: 16px;
   gap: var(--size-16);
-  padding: 8px;
   padding: var(--size-8);
 }
 @media (max-width: 839.98px) {
   .carousel {
-    gap: 8px;
     gap: var(--size-8);
   }
 }
@@ -23,9 +20,7 @@
   display: flex;
   align-items: center;
   overflow: hidden;
-  min-block-size: 32px;
   min-block-size: var(--size-32);
-  padding-block-end: 16px;
   padding-block-end: var(--size-16);
 }
 .carousel__card,
@@ -43,9 +38,7 @@
   text-align: start;
   border: none;
   overflow: hidden;
-  background: rgba(134,167,189,0.10196);
   background: var(--color-background-neutral);
-  border-radius: 32px;
   border-radius: var(--size-32);
   scroll-snap-align: center;
   -webkit-scroll-snap-align: center;
@@ -64,7 +57,6 @@
   }
   .carousel {
     margin-block: 0;
-    margin-inline: calc(-1 * 8px);
     margin-inline: calc(-1 * var(--size-8));
   }
 }
@@ -97,25 +89,18 @@
 .carousel__card-content {
   block-size: 100%;
   font-weight: normal;
-  padding: 24px;
   padding: var(--size-24);
 }
 .carousel__indicators {
   display: flex;
   justify-content: center;
-  padding-block-start: 8px;
   padding-block-start: var(--size-8);
-  gap: 8px;
   gap: var(--size-8);
 }
 .carousel__indicator {
-  inline-size: 12px;
   inline-size: var(--size-12);
-  block-size: 12px;
   block-size: var(--size-12);
-  border-radius: 8px;
   border-radius: var(--size-8);
-  background: #c9cbce;
   background: var(--color-interactive-secondary);
   border: none;
   -webkit-appearance: none;
@@ -124,12 +109,10 @@
   transition: all 0.1s;
 }
 .carousel__indicator:hover {
-  inline-size: 16px;
   inline-size: var(--size-16);
 }
 .carousel__indicator--selected,
 .carousel__indicator--selected:hover {
   background: var(--color-interactive-primary);
-  inline-size: 24px;
   inline-size: var(--size-24);
 }

package/src/CheckboxButton/CheckboxButton.css

@@ -1,8 +1,6 @@
 .np-checkbox-button input[type="checkbox"] {
   position: absolute;
-  inline-size: 24px;
   inline-size: var(--size-24);
-  block-size: 24px;
   block-size: var(--size-24);
   opacity: 0;
 }
@@ -28,7 +26,6 @@
   block-size: 2px;
   inset-block-start: 55%;
   inset-inline-start: 50%;
-  background: #ffffff;
   background: var(--color-background-screen);
   transform: translate(-50%, -50%);
 }
@@ -36,6 +33,5 @@
   transform: translate(50%, -50%);
 }
 .np-tw-checkbox-indeterminate .has-error::after {
-  background-color: #e74848;
   background-color: var(--color-interactive-negative);
 }