@transferwise/components 0.0.0-experimental-fe4398d → 0.0.0-experimental-5308dce

package/build/checkboxButton/CheckboxButton.js

@@ -23,11 +23,13 @@ const CheckboxButton = /*#__PURE__*/React.forwardRef(function CheckboxButton({
       disabled: disabled,
       checked: checked,
       onChange: onChange
-    }), /*#__PURE__*/jsxRuntime.jsx("span", {
+    }), /*#__PURE__*/jsxRuntime.jsxs("span", {
       className: "tw-checkbox-button",
-      children: /*#__PURE__*/jsxRuntime.jsx("span", {
+      children: [/*#__PURE__*/jsxRuntime.jsx("span", {
         className: "tw-checkbox-check"
-      })
+      }), /*#__PURE__*/jsxRuntime.jsx("span", {
+        className: "tw-checkbox-indeterminate"
+      })]
     })]
   });
 });

package/build/checkboxButton/CheckboxButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxButton.js","sources":["../../src/checkboxButton/CheckboxButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { InputHTMLAttributes, forwardRef } from 'react';\n\nimport { useInputAttributes } from '../inputs/contexts';\n\nexport type CheckboxButtonProps = InputHTMLAttributes<HTMLInputElement>;\n\nconst CheckboxButton = forwardRef<HTMLInputElement, CheckboxButtonProps>(function CheckboxButton(\n  { checked, className, disabled, onChange, ...rest },\n  reference,\n) {\n  const inputAttributes = useInputAttributes();\n\n  return (\n    <span className={clsx('np-checkbox-button', className, disabled && 'disabled')}>\n      <input\n        {...inputAttributes}\n        {...rest}\n        ref={reference}\n        type=\"checkbox\"\n        disabled={disabled}\n        checked={checked}\n        onChange={onChange}\n      />\n      <span className=\"tw-checkbox-button\">\n        <span className=\"tw-checkbox-check\" />\n      </span>\n    </span>\n  );\n});\n\nexport default CheckboxButton;\n"],"names":["CheckboxButton","forwardRef","checked","className","disabled","onChange","rest","reference","inputAttributes","useInputAttributes","_jsxs","clsx","children","_jsx","ref","type"],"mappings":";;;;;;;AAOA,MAAMA,cAAc,gBAAGC,gBAAU,CAAwC,SAASD,cAAcA,CAC9F;EAAEE,OAAO;EAAEC,SAAS;EAAEC,QAAQ;EAAEC,QAAQ;EAAE,GAAGC,IAAAA;AAAI,CAAE,EACnDC,SAAS,EAAA;AAET,EAAA,MAAMC,eAAe,GAAGC,2BAAkB,EAAE,CAAA;AAE5C,EAAA,oBACEC,eAAA,CAAA,MAAA,EAAA;IAAMP,SAAS,EAAEQ,SAAI,CAAC,oBAAoB,EAAER,SAAS,EAAEC,QAAQ,IAAI,UAAU,CAAE;AAAAQ,IAAAA,QAAA,gBAC7EC,cAAA,CAAA,OAAA,EAAA;AAAA,MAAA,GACML,eAAe;AAAA,MAAA,GACfF,IAAI;AACRQ,MAAAA,GAAG,EAAEP,SAAU;AACfQ,MAAAA,IAAI,EAAC,UAAU;AACfX,MAAAA,QAAQ,EAAEA,QAAS;AACnBF,MAAAA,OAAO,EAAEA,OAAQ;AACjBG,MAAAA,QAAQ,EAAEA,QAAAA;KAEZ,CAAA,eAAAQ,cAAA,CAAA,MAAA,EAAA;AAAMV,MAAAA,SAAS,EAAC,oBAAoB;AAAAS,MAAAA,QAAA,eAClCC,cAAA,CAAA,MAAA,EAAA;AAAMV,QAAAA,SAAS,EAAC,mBAAA;OAClB,CAAA;AAAA,KAAM,CACR,CAAA;AAAA,GAAM,CAAC,CAAA;AAEX,CAAC;;;;"}
+{"version":3,"file":"CheckboxButton.js","sources":["../../src/checkboxButton/CheckboxButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { InputHTMLAttributes, forwardRef } from 'react';\n\nimport { useInputAttributes } from '../inputs/contexts';\n\nexport type CheckboxButtonProps = InputHTMLAttributes<HTMLInputElement>;\n\nconst CheckboxButton = forwardRef<HTMLInputElement, CheckboxButtonProps>(function CheckboxButton(\n  { checked, className, disabled, onChange, ...rest },\n  reference,\n) {\n  const inputAttributes = useInputAttributes();\n\n  return (\n    <span className={clsx('np-checkbox-button', className, disabled && 'disabled')}>\n      <input\n        {...inputAttributes}\n        {...rest}\n        ref={reference}\n        type=\"checkbox\"\n        disabled={disabled}\n        checked={checked}\n        onChange={onChange}\n      />\n      <span className=\"tw-checkbox-button\">\n        <span className=\"tw-checkbox-check\" />\n        <span className=\"tw-checkbox-indeterminate\" />\n      </span>\n    </span>\n  );\n});\n\nexport default CheckboxButton;\n"],"names":["CheckboxButton","forwardRef","checked","className","disabled","onChange","rest","reference","inputAttributes","useInputAttributes","_jsxs","clsx","children","_jsx","ref","type"],"mappings":";;;;;;;AAOA,MAAMA,cAAc,gBAAGC,gBAAU,CAAwC,SAASD,cAAcA,CAC9F;EAAEE,OAAO;EAAEC,SAAS;EAAEC,QAAQ;EAAEC,QAAQ;EAAE,GAAGC,IAAAA;AAAI,CAAE,EACnDC,SAAS,EAAA;AAET,EAAA,MAAMC,eAAe,GAAGC,2BAAkB,EAAE,CAAA;AAE5C,EAAA,oBACEC,eAAA,CAAA,MAAA,EAAA;IAAMP,SAAS,EAAEQ,SAAI,CAAC,oBAAoB,EAAER,SAAS,EAAEC,QAAQ,IAAI,UAAU,CAAE;AAAAQ,IAAAA,QAAA,gBAC7EC,cAAA,CAAA,OAAA,EAAA;AAAA,MAAA,GACML,eAAe;AAAA,MAAA,GACfF,IAAI;AACRQ,MAAAA,GAAG,EAAEP,SAAU;AACfQ,MAAAA,IAAI,EAAC,UAAU;AACfX,MAAAA,QAAQ,EAAEA,QAAS;AACnBF,MAAAA,OAAO,EAAEA,OAAQ;AACjBG,MAAAA,QAAQ,EAAEA,QAAAA;KAEZ,CAAA,eAAAK,eAAA,CAAA,MAAA,EAAA;AAAMP,MAAAA,SAAS,EAAC,oBAAoB;AAAAS,MAAAA,QAAA,gBAClCC,cAAA,CAAA,MAAA,EAAA;AAAMV,QAAAA,SAAS,EAAC,mBAAA;OAChB,CAAA,eAAAU,cAAA,CAAA,MAAA,EAAA;AAAMV,QAAAA,SAAS,EAAC,2BAAA;AAA2B,OAC7C,CAAA,CAAA;AAAA,KAAM,CACR,CAAA;AAAA,GAAM,CAAC,CAAA;AAEX,CAAC;;;;"}

package/build/checkboxButton/CheckboxButton.mjs

@@ -21,11 +21,13 @@ const CheckboxButton = /*#__PURE__*/forwardRef(function CheckboxButton({
       disabled: disabled,
       checked: checked,
       onChange: onChange
-    }), /*#__PURE__*/jsx("span", {
+    }), /*#__PURE__*/jsxs("span", {
       className: "tw-checkbox-button",
-      children: /*#__PURE__*/jsx("span", {
+      children: [/*#__PURE__*/jsx("span", {
         className: "tw-checkbox-check"
-      })
+      }), /*#__PURE__*/jsx("span", {
+        className: "tw-checkbox-indeterminate"
+      })]
     })]
   });
 });

package/build/checkboxButton/CheckboxButton.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxButton.mjs","sources":["../../src/checkboxButton/CheckboxButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { InputHTMLAttributes, forwardRef } from 'react';\n\nimport { useInputAttributes } from '../inputs/contexts';\n\nexport type CheckboxButtonProps = InputHTMLAttributes<HTMLInputElement>;\n\nconst CheckboxButton = forwardRef<HTMLInputElement, CheckboxButtonProps>(function CheckboxButton(\n  { checked, className, disabled, onChange, ...rest },\n  reference,\n) {\n  const inputAttributes = useInputAttributes();\n\n  return (\n    <span className={clsx('np-checkbox-button', className, disabled && 'disabled')}>\n      <input\n        {...inputAttributes}\n        {...rest}\n        ref={reference}\n        type=\"checkbox\"\n        disabled={disabled}\n        checked={checked}\n        onChange={onChange}\n      />\n      <span className=\"tw-checkbox-button\">\n        <span className=\"tw-checkbox-check\" />\n      </span>\n    </span>\n  );\n});\n\nexport default CheckboxButton;\n"],"names":["CheckboxButton","forwardRef","checked","className","disabled","onChange","rest","reference","inputAttributes","useInputAttributes","_jsxs","clsx","children","_jsx","ref","type"],"mappings":";;;;;AAOA,MAAMA,cAAc,gBAAGC,UAAU,CAAwC,SAASD,cAAcA,CAC9F;EAAEE,OAAO;EAAEC,SAAS;EAAEC,QAAQ;EAAEC,QAAQ;EAAE,GAAGC,IAAAA;AAAI,CAAE,EACnDC,SAAS,EAAA;AAET,EAAA,MAAMC,eAAe,GAAGC,kBAAkB,EAAE,CAAA;AAE5C,EAAA,oBACEC,IAAA,CAAA,MAAA,EAAA;IAAMP,SAAS,EAAEQ,IAAI,CAAC,oBAAoB,EAAER,SAAS,EAAEC,QAAQ,IAAI,UAAU,CAAE;AAAAQ,IAAAA,QAAA,gBAC7EC,GAAA,CAAA,OAAA,EAAA;AAAA,MAAA,GACML,eAAe;AAAA,MAAA,GACfF,IAAI;AACRQ,MAAAA,GAAG,EAAEP,SAAU;AACfQ,MAAAA,IAAI,EAAC,UAAU;AACfX,MAAAA,QAAQ,EAAEA,QAAS;AACnBF,MAAAA,OAAO,EAAEA,OAAQ;AACjBG,MAAAA,QAAQ,EAAEA,QAAAA;KAEZ,CAAA,eAAAQ,GAAA,CAAA,MAAA,EAAA;AAAMV,MAAAA,SAAS,EAAC,oBAAoB;AAAAS,MAAAA,QAAA,eAClCC,GAAA,CAAA,MAAA,EAAA;AAAMV,QAAAA,SAAS,EAAC,mBAAA;OAClB,CAAA;AAAA,KAAM,CACR,CAAA;AAAA,GAAM,CAAC,CAAA;AAEX,CAAC;;;;"}
+{"version":3,"file":"CheckboxButton.mjs","sources":["../../src/checkboxButton/CheckboxButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { InputHTMLAttributes, forwardRef } from 'react';\n\nimport { useInputAttributes } from '../inputs/contexts';\n\nexport type CheckboxButtonProps = InputHTMLAttributes<HTMLInputElement>;\n\nconst CheckboxButton = forwardRef<HTMLInputElement, CheckboxButtonProps>(function CheckboxButton(\n  { checked, className, disabled, onChange, ...rest },\n  reference,\n) {\n  const inputAttributes = useInputAttributes();\n\n  return (\n    <span className={clsx('np-checkbox-button', className, disabled && 'disabled')}>\n      <input\n        {...inputAttributes}\n        {...rest}\n        ref={reference}\n        type=\"checkbox\"\n        disabled={disabled}\n        checked={checked}\n        onChange={onChange}\n      />\n      <span className=\"tw-checkbox-button\">\n        <span className=\"tw-checkbox-check\" />\n        <span className=\"tw-checkbox-indeterminate\" />\n      </span>\n    </span>\n  );\n});\n\nexport default CheckboxButton;\n"],"names":["CheckboxButton","forwardRef","checked","className","disabled","onChange","rest","reference","inputAttributes","useInputAttributes","_jsxs","clsx","children","_jsx","ref","type"],"mappings":";;;;;AAOA,MAAMA,cAAc,gBAAGC,UAAU,CAAwC,SAASD,cAAcA,CAC9F;EAAEE,OAAO;EAAEC,SAAS;EAAEC,QAAQ;EAAEC,QAAQ;EAAE,GAAGC,IAAAA;AAAI,CAAE,EACnDC,SAAS,EAAA;AAET,EAAA,MAAMC,eAAe,GAAGC,kBAAkB,EAAE,CAAA;AAE5C,EAAA,oBACEC,IAAA,CAAA,MAAA,EAAA;IAAMP,SAAS,EAAEQ,IAAI,CAAC,oBAAoB,EAAER,SAAS,EAAEC,QAAQ,IAAI,UAAU,CAAE;AAAAQ,IAAAA,QAAA,gBAC7EC,GAAA,CAAA,OAAA,EAAA;AAAA,MAAA,GACML,eAAe;AAAA,MAAA,GACfF,IAAI;AACRQ,MAAAA,GAAG,EAAEP,SAAU;AACfQ,MAAAA,IAAI,EAAC,UAAU;AACfX,MAAAA,QAAQ,EAAEA,QAAS;AACnBF,MAAAA,OAAO,EAAEA,OAAQ;AACjBG,MAAAA,QAAQ,EAAEA,QAAAA;KAEZ,CAAA,eAAAK,IAAA,CAAA,MAAA,EAAA;AAAMP,MAAAA,SAAS,EAAC,oBAAoB;AAAAS,MAAAA,QAAA,gBAClCC,GAAA,CAAA,MAAA,EAAA;AAAMV,QAAAA,SAAS,EAAC,mBAAA;OAChB,CAAA,eAAAU,GAAA,CAAA,MAAA,EAAA;AAAMV,QAAAA,SAAS,EAAC,2BAAA;AAA2B,OAC7C,CAAA,CAAA;AAAA,KAAM,CACR,CAAA;AAAA,GAAM,CAAC,CAAA;AAEX,CAAC;;;;"}

package/build/main.css

@@ -796,7 +796,8 @@ div.critical-comms .critical-comms-body {
 .np-checkbox-button input[type="checkbox"]:not(:disabled) {
   cursor: pointer;
 }
-.np-checkbox-button .tw-checkbox-check {
+.np-checkbox-button .tw-checkbox-check,
+.np-checkbox-button .tw-checkbox-indeterminate {
   pointer-events: none;
 }
 .checkbox .np-checkbox-button input[type="checkbox"] {
@@ -5450,278 +5451,280 @@ html:not([dir="rtl"]) .np-navigation-option {
 .upload-error-message .alert {
   min-width: 100px;
 }
-.np-upload-input__upload-button {
-  position: relative;
-  padding: 16px;
-  padding: var(--size-16);
-  display: flex;
-  align-items: center;
-  margin: 0;
-  border-bottom-left-radius: 10px;
-  border-bottom-left-radius: var(--radius-small);
-  border-bottom-right-radius: 10px;
-  border-bottom-right-radius: var(--radius-small);
-  border: var(--outerBorder);
-  cursor: pointer;
-}
-.np-upload-input__upload-button .np-upload-input__title {
-  color: var(--color-content-link);
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-  text-underline-offset: 0.3em;
-}
-.np-upload-input__upload-button .np-upload-input__title + .np-upload-input__text {
-  margin-top: 4px;
-  margin-top: var(--size-4);
-  line-height: 22px;
-}
-.np-upload-input__upload-button .np-upload-input__icon {
-  padding-right: 16px;
-  padding-right: var(--size-16);
-  color: var(--color-interactive-primary);
+.np-upload-button-container {
+  border-style: solid;
 }
-.np-upload-input__upload-button::before {
-  display: block;
-  position: absolute;
-  height: 1px;
-  background-color: rgba(0,0,0,0.10196);
-  background-color: var(--color-border-neutral);
-  content: " ";
-  left: 16px;
-  left: var(--size-16);
-  width: calc(100% - 2 * 16px);
-  width: calc(100% - 2 * var(--size-16));
-  top: 0;
+.np-upload-button-container .droppable-card-content {
+  display: flex;
 }
-.np-upload-input__upload-button.is-dropping .np-upload-input__icon,
-.np-upload-input__upload-button.is-dropping .np-upload-input__item-content {
-  display: none;
+.np-upload-button-container.droppable-dropping {
+  border-color: #c9cbce !important;
+  border-color: var(--color-interactive-secondary) !important;
 }
-.np-upload-input__upload-button:focus-within,
-.np-upload-input__upload-button:focus-visible {
-  outline: var(--ring-outline-color) solid 3px;
-  outline-offset: -3px;
+.np-upload-button-container.droppable-dropping:before {
+  z-index: 2;
 }
-.np-upload-input__upload-button-input {
-  position: absolute;
+.np-upload-button-container input[type="file"] {
   opacity: 0;
   z-index: -1;
+  position: absolute;
 }
-.np-upload-input__upload-button-input:focus {
-  outline: none;
-}
-.np-upload-input__upload-button .np-upload-input__drop-file-overlay {
-  display: flex;
-  flex: 1;
-  padding: 13px 0 !important;
-  background-color: transparent;
-  transition: transform 0.3s ease;
-  position: relative;
-}
-.np-upload-input__upload-button--enabled.is-dropping,
-.np-upload-input__upload-button--enabled:hover,
-.np-upload-input__upload-button--enabled:active {
-  background: rgba(134,167,189,0.10196);
-  background: var(--color-background-neutral);
+.np-upload-button-container .np-upload-button {
+  border: none;
 }
-.np-upload-input__upload-button--enabled.is-dropping::before,
-.np-upload-input__upload-button--enabled:hover::before,
-.np-upload-input__upload-button--enabled:active::before {
+.np-upload-button {
   width: 100%;
-  left: 0;
-}
-.np-upload-input__upload-button--disabled {
-  cursor: inherit;
-}
-.np-upload-input__upload-button--withEntries {
-  border-top-width: 0;
-}
-.np-upload-input__upload-button--withoutEntries {
-  border-top: var(--outerBorder);
-  border-radius: 10px;
-  border-radius: var(--radius-small);
+  border-top: 1px solid transparent;
+  padding: 16px;
+  padding: var(--padding-small);
+  border-radius: 0;
 }
-.np-upload-input {
-  --outerBorder: 1px solid var(--color-interactive-secondary);
-  border-radius: 10px;
-  border-radius: var(--radius-small);
-  overflow: hidden;
+label.np-upload-button:not(.disabled):hover,
+label.np-upload-button:not(.disabled):active {
+  background-color: var(--color-background-screen-hover);
 }
-.np-upload-input .np-upload-input__items,
-.np-upload-input .np-upload-input__file-upload {
-  margin: 0;
+.disabled label.np-upload-button:not(.disabled):hover,
+.disabled label.np-upload-button:not(.disabled):active {
+  background-color: transparent;
 }
-.np-upload-input .np-upload-input__items:only-child .np-upload-input__item {
-  border-radius: 10px;
-  border-radius: var(--radius-small);
-  border-bottom: var(--outerBorder);
+.np-upload-button .media {
+  align-items: flex-start;
 }
-.np-upload-input .np-upload-input__items:has(.np-upload-input__item:last-child.is-interactive:hover) + .np-upload-input__uploader .np-upload-input__upload-button::before {
-  left: 0;
-  width: 100%;
-  top: 0;
+@media (max-width: 320px) {
+  .np-upload-icon {
+    padding-left: 0;
+  }
 }
-.np-upload-input__item {
-  position: relative;
-  padding: 16px;
-  padding: var(--size-16);
-  display: flex;
-  align-items: flex-start;
-  border-left: var(--outerBorder);
-  border-right: var(--outerBorder);
+.np-upload-input.form-control {
+  height: auto;
+  padding: 0;
+  padding: initial;
 }
-.np-upload-input__item:first-child {
-  border-top: var(--outerBorder);
+.np-upload-input > div:first-child,
+.np-upload-input > div:first-child .np-upload-item--single-file,
+.np-upload-input > div:first-child .np-upload-item--link {
   border-top-left-radius: 10px;
   border-top-left-radius: var(--radius-small);
   border-top-right-radius: 10px;
   border-top-right-radius: var(--radius-small);
 }
-.np-upload-input__item + .np-upload-input__item:before {
-  content: " ";
-  display: block;
-  position: absolute;
-  height: 1px;
-  left: 16px;
-  left: var(--size-16);
-  width: calc(100% - 2 * 16px);
-  width: calc(100% - 2 * var(--size-16));
-  top: 0;
-  background: rgba(0,0,0,0.10196);
-  background: var(--color-border-neutral);
+.np-upload-input > div:last-child {
+  border-bottom-left-radius: 10px;
+  border-bottom-left-radius: var(--radius-small);
+  border-bottom-right-radius: 10px;
+  border-bottom-right-radius: var(--radius-small);
 }
-.np-upload-input__item .np-upload-input__item-content {
+.np-theme-personal .np-upload-input.disabled .btn {
+  cursor: inherit;
+}
+.np-theme-personal .np-upload-input .np-upload-icon {
+  color: var(--color-interactive-primary);
+}
+.np-theme-personal .np-upload-input .media-body {
   padding-right: 32px;
   padding-right: var(--size-32);
-  flex: 1;
+  color: var(--color-content-link);
+  white-space: break-spaces;
 }
 @media (max-width: 320px) {
-  .np-upload-input__item .np-upload-input__item-content {
+  .np-theme-personal .np-upload-input .media-body {
     padding-right: 64px;
     padding-right: var(--size-64);
   }
 }
-.np-upload-input__item .np-upload-input__title,
-.np-upload-input__item .np-upload-input__text {
-  margin: 0;
-  -moz-text-align-last: left;
-       text-align-last: left;
-  color: #5d7079;
-  color: var(--color-content-secondary);
+.np-theme-personal .np-upload-input .media-body .np-text-body-large-bold {
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+  text-underline-offset: 0.3em;
 }
-.np-upload-input__item .np-upload-input__title + .np-upload-input__text {
-  margin-top: 4px;
-  margin-top: var(--size-4);
+.np-theme-personal .np-upload-input .media-body .np-text-body-default,
+.np-theme-personal .np-upload-input .media-body .np-upload-description,
+.np-theme-personal .np-upload-input .media-body .text-positive {
+  color: #5d7079 !important;
+  color: var(--color-content-secondary) !important;
 }
-.np-upload-input__item .np-upload-input__icon {
-  padding-right: 16px;
-  padding-right: var(--size-16);
+.np-theme-personal .np-upload-input .media-body .text-negative {
+  color: var(--color-sentiment-negative) !important;
 }
-.np-upload-input__item .np-upload-input__item-link,
-.np-upload-input__item .np-upload-input__item-container {
-  align-items: flex-start;
-  display: flex;
-  width: 100%;
+.np-theme-personal .np-upload-input-errors {
+  list-style: none;
+  padding-left: 0;
 }
-.np-upload-input__item .np-upload-input__item-action {
-  --iconSize: var(--size-24);
-  --clickArea: 44px;
+.np-theme-personal .np-upload-input-errors li {
+  position: relative;
+  padding-left: 16px;
+  padding-left: var(--size-16);
+}
+@media (max-width: 320px) {
+  .np-theme-personal .np-upload-input-errors li {
+    padding-left: 32px;
+    padding-left: var(--size-32);
+  }
+}
+.np-theme-personal .np-upload-input-errors li:before {
+  content: '•';
   position: absolute;
-  right: 16px;
-  right: var(--size-16);
-  top: 16px;
-  top: var(--size-16);
+  display: block;
+  left: 0;
+}
+.np-theme-personal .np-upload-input .status-circle {
+  width: 24px;
+  width: var(--size-x-small);
+  height: 24px;
+  height: var(--size-x-small);
 }
 @media (max-width: 320px) {
-  .np-upload-input__item .np-upload-input__item-action {
-    --iconSize: var(--size-48);
+  .np-theme-personal .np-upload-input .status-circle {
+    width: 48px;
+    width: var(--size-large);
+    height: 48px;
+    height: var(--size-large);
   }
 }
-.np-upload-input__item .np-upload-input__item-action :before {
-  content: '';
+.np-upload-item {
+  border: 1px solid #c9cbce;
+  border: 1px solid var(--color-interactive-secondary);
+  position: relative;
+}
+.np-upload-item:first-child ~ div:not(.np-upload-item--link):before,
+.np-upload-item:not(:first-child).np-upload-item--link .np-upload-item__link:before,
+.np-upload-item.np-upload-item--link:hover .np-upload-item__link:after {
   display: block;
-  width: var(--clickArea);
-  height: var(--clickArea);
-  border-radius: 50%;
   position: absolute;
-  inset: calc((var(--clickArea) - var(--iconSize)) * -0.5);
+  height: 1px;
+  background-color: rgba(0,0,0,0.10196);
+  background-color: var(--color-border-neutral);
+  content: " ";
+  left: 16px;
+  left: var(--size-16);
+  width: calc(100% - 2 * 16px);
+  width: calc(100% - 2 * var(--size-16));
 }
-.np-upload-input__item .np-upload-input__item-action .np-upload-input__item-button {
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-  height: var(--iconSize);
-  width: var(--iconSize);
-  padding: 0 4px;
-  padding: 0 var(--size-4);
-  border-radius: 50%;
-  border: 0;
-  background-color: rgba(134,167,189,0.10196);
-  background-color: var(--color-background-neutral);
-  color: var(--color-interactive-primary);
-  transition: color, background-color 0.15s ease-in-out;
-  outline-offset: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+.np-upload-item:first-child ~ div:not(.np-upload-item--link):before,
+.np-upload-item:not(:first-child).np-upload-item--link .np-upload-item__link:before {
+  top: 0;
 }
-.np-upload-input__item .np-upload-input__item-action .np-upload-input__item-button:hover {
-  background-color: var(--color-sentiment-negative);
-  color: var(--color-contrast-overlay) !important;
+.np-upload-item.np-upload-item--link:hover .np-upload-item__link:after {
+  bottom: -1px;
 }
-.np-upload-input__item .np-upload-input__item-action .np-upload-input__item-button:active {
-  background-color: var(--color-background-neutral-active);
+.np-upload-item:first-child ~ div {
+  border-top: 1px;
 }
-.np-upload-input__item.is-interactive {
-  padding: 0;
+.np-upload-item:not(:first-child) .np-upload-item__link:hover {
+  border-top-color: rgba(0,0,0,0.10196);
+  border-top-color: var(--color-border-neutral);
 }
-.np-upload-input__item.is-interactive:hover:not(:has(.np-upload-input__item-button:hover)):before,
-.np-upload-input__item.is-interactive:hover:not(:has(.np-upload-input__item-button:hover)) + .np-upload-input__item:before {
-  width: 100%;
-  left: 0;
+.np-upload-item:not(:last-child) {
+  border-bottom: 0;
 }
-.np-upload-input__item.is-interactive .np-upload-input__item-link {
-  padding: 16px;
-  padding: var(--size-16);
+.np-upload-item.np-upload-item--link:hover + .np-upload-item:before,
+.np-upload-item.np-upload-item--link:hover + .np-upload-button-container:before,
+.np-upload-item.np-upload-item--link:hover + .np-upload-item .np-upload-item__link:before,
+.np-upload-item.np-upload-item--link:hover + .np-upload-button-container .np-upload-item__link:before {
+  display: none;
+}
+.np-upload-button-container:hover:before,
+.np-upload-button-container.droppable-dropping:before {
+  left: 0 !important;
+  width: 100% !important;
+}
+.np-upload-button-container:has(:focus-visible) {
+  outline: var(--ring-outline-color) solid var(--ring-outline-width);
+  outline-offset: var(--ring-outline-offset);
+  border-color: transparent;
+  outline-offset: -3px;
+}
+.np-upload-item--single-file:focus-visible,
+.np-upload-item__link:focus-visible,
+.np-upload-button-container:has(:focus-visible) {
+  outline-width: 3px;
+}
+.np-upload-item--link a {
+  flex: 1;
   -webkit-text-decoration: none;
   text-decoration: none;
-  border-radius: inherit;
   border-top: 1px solid transparent;
-  background-clip: padding-box;
+  border-radius: inherit;
 }
-.np-upload-input__item.is-interactive .np-upload-input__item-link:focus-visible {
+.np-upload-item--link a:focus-visible {
   outline-offset: -2px;
-  outline-width: 3px;
 }
-.np-upload-input__item.is-interactive .np-upload-input__item-link:hover,
-.np-upload-input__item.is-interactive .np-upload-input__item-link:active {
+.np-upload-item--link a:hover:before {
+  display: none !important;
+}
+.np-upload-item--link a:hover:after {
+  left: 0 !important;
+  width: 100% !important;
+}
+.np-upload-item--link a:hover,
+.np-upload-item--link a:active {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+.np-upload-item--link a:hover .np-upload-button,
+.np-upload-item--link a:active .np-upload-button {
   background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
+  border-radius: inherit;
 }
-.np-upload-input__item.is-interactive:first-child .np-upload-input__item-link {
-  border-top-width: 0;
-}
-.np-upload-input__item .np-upload-input-errors {
-  padding-left: 0;
-  list-style-type: "";
+.np-upload-item--link:first-of-type a {
+  border-top: 0;
 }
-.np-upload-input__item .np-upload-input-errors > li {
+.np-upload-item__body {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
   position: relative;
-  padding-left: 16px;
-  padding-left: var(--size-16);
+  border-radius: inherit;
 }
-.np-upload-input__item .np-upload-input-errors > li::before {
-  content: '•';
+.np-upload-item__remove-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  align-self: flex-start;
   position: absolute;
-  display: block;
-  left: 0;
+  height: 24px;
+  height: var(--size-24);
+  min-height: 0;
+  width: 24px;
+  width: var(--size-24);
+  padding: 0;
+  border-radius: 50% !important;
+  outline-offset: 0 !important;
+  background-color: rgba(134,167,189,0.10196);
+  background-color: var(--color-background-neutral);
+  border: none;
+  color: var(--color-interactive-primary);
+  right: 16px;
+  right: var(--size-16);
+  top: 16px;
+  top: var(--size-16);
+  transition: color, background-color 0.15s ease-in-out;
 }
 @media (max-width: 320px) {
-  .np-upload-input__item .np-upload-input-errors > li {
-    padding-left: 32px;
-    padding-left: var(--size-32);
+  .np-upload-item__remove-button {
+    top: 16px;
+    top: var(--size-16);
+    right: 16px;
+    right: var(--size-16);
+    height: 48px;
+    height: var(--size-48);
+    width: 48px;
+    width: var(--size-48);
   }
 }
+.np-upload-item__remove-button:hover {
+  background-color: var(--color-sentiment-negative);
+  color: var(--color-contrast-overlay) !important;
+}
+.np-upload-item__remove-button:before {
+  display: block;
+  width: 44px;
+  height: 44px;
+  content: '';
+  border-radius: 50%;
+  position: absolute;
+}
 .np-progress {
   border-radius: 10px;
   border-radius: var(--radius-small);

package/build/styles/checkboxButton/CheckboxButton.css

@@ -9,7 +9,8 @@
 .np-checkbox-button input[type="checkbox"]:not(:disabled) {
   cursor: pointer;
 }
-.np-checkbox-button .tw-checkbox-check {
+.np-checkbox-button .tw-checkbox-check,
+.np-checkbox-button .tw-checkbox-indeterminate {
   pointer-events: none;
 }
 .checkbox .np-checkbox-button input[type="checkbox"] {