@transferwise/components 0.0.0-experimental-81baec1 → 0.0.0-experimental-76a7e6a

package/build/{mocks.mjs → mocks.esm.js}

@@ -31,4 +31,4 @@ function mockResizeObserver({ fn, stubGlobal = defaultStubGlobal }) {
 }
 
 export { mockMatchMedia, mockResizeObserver };
-//# sourceMappingURL=mocks.mjs.map
+//# sourceMappingURL=mocks.esm.js.map

package/build/mocks.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mocks.esm.js","sources":["../src/mocks.ts"],"sourcesContent":[null],"names":[],"mappings":"AAAA,MAAe,iBAAQ,GAAE,CAAA,IAAA,EAAA,KAAa,KAAK;AAE3C,IAAA,MAAU,CAAgB,cAAA,CAAA,UAAA,EAAA,IAAA,EAAA;AACxB,QAAI;QACM,QAAG,EAAA,IAAA;AACd,QAAA,UAAA,EAAA,IAAA;AAWD,QAAgB,YAAA,EAAA,IAAA;AAoBhB,KAAgB,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/types/common/hooks/useMedia.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useMedia.d.ts","sourceRoot":"","sources":["../../../../src/common/hooks/useMedia.ts"],"names":[],"mappings":"AAGA,wBAAgB,QAAQ,CAAC,KAAK,EAAE,MAAM,uBAYrC"}
+{"version":3,"file":"useMedia.d.ts","sourceRoot":"","sources":["../../../../src/common/hooks/useMedia.ts"],"names":[],"mappings":"AAEA,wBAAgB,QAAQ,CAAC,KAAK,EAAE,MAAM,uBAYrC"}

package/build/types/segmentedControl/SegmentedControl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../../src/segmentedControl/SegmentedControl.tsx"],"names":[],"mappings":";AAMA,KAAK,WAAW,GAAG;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAEhE,KAAK,OAAO,GAAG,WAAW,GAAG;IAAE,QAAQ,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAClD,KAAK,mBAAmB,GAAG,WAAW,GAAG;IAAE,QAAQ,EAAE,MAAM,CAAA;CAAE,CAAC;AAE9D,MAAM,MAAM,QAAQ,GAAG,SAAS,OAAO,EAAE,GAAG,SAAS,mBAAmB,EAAE,CAAC;AAE3E,KAAK,yBAAyB,GAAG;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,EAAE,MAAM,CAAC;IACrB,IAAI,EAAE,OAAO,GAAG,MAAM,CAAC;IACvB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC,CAAC;AAEF,KAAK,yBAAyB,GAAG;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,SAAS,mBAAmB,EAAE,CAAC;CAC1C,CAAC;AAEF,KAAK,0BAA0B,GAAG;IAChC,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,EAAE,SAAS,OAAO,EAAE,CAAC;CAC9B,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,yBAAyB,GAC3D,CAAC,yBAAyB,GAAG,0BAA0B,CAAC,CAAC;AAE3D,QAAA,MAAM,gBAAgB,sDAMnB,qBAAqB,gCAqIvB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../../src/segmentedControl/SegmentedControl.tsx"],"names":[],"mappings":";AAMA,KAAK,WAAW,GAAG;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAEhE,KAAK,OAAO,GAAG,WAAW,GAAG;IAAE,QAAQ,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAClD,KAAK,mBAAmB,GAAG,WAAW,GAAG;IAAE,QAAQ,EAAE,MAAM,CAAA;CAAE,CAAC;AAE9D,MAAM,MAAM,QAAQ,GAAG,SAAS,OAAO,EAAE,GAAG,SAAS,mBAAmB,EAAE,CAAC;AAE3E,KAAK,yBAAyB,GAAG;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,EAAE,MAAM,CAAC;IACrB,IAAI,EAAE,OAAO,GAAG,MAAM,CAAC;IACvB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC,CAAC;AAEF,KAAK,yBAAyB,GAAG;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,SAAS,mBAAmB,EAAE,CAAC;CAC1C,CAAC;AAEF,KAAK,0BAA0B,GAAG;IAChC,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,EAAE,SAAS,OAAO,EAAE,CAAC;CAC9B,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,yBAAyB,GAC3D,CAAC,yBAAyB,GAAG,0BAA0B,CAAC,CAAC;AAE3D,QAAA,MAAM,gBAAgB,sDAMnB,qBAAqB,gCAsIvB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-81baec1",
+  "version": "0.0.0-experimental-76a7e6a",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -13,24 +13,8 @@
     "*.css"
   ],
   "main": "./build/index.js",
-  "module": "./build/index.mjs",
+  "module": "./build/index.esm.js",
   "types": "./build/types/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./build/types/index.d.ts",
-      "import": "./build/index.mjs",
-      "require": "./build/index.js"
-    },
-    "./mocks": {
-      "types": "./build/mocks.d.ts",
-      "import": "./build/mocks.mjs",
-      "require": "./build/mocks.js"
-    },
-    "./build/*": "./build/*.js",
-    "./build/*.css": "./build/*.css",
-    "./build/*.json": "./build/*.json",
-    "./build/i18n": "./build/i18n"
-  },
   "files": [
     "build/",
     "src/",
@@ -91,18 +75,17 @@
     "jest-fetch-mock": "^3.0.3",
     "lodash.times": "^4.3.2",
     "react-intl": "^5.10.0",
-    "react-merge-refs": "^1.1.0",
     "rollup": "^3.28.1",
     "storybook": "^7.6.17",
     "@transferwise/less-config": "3.1.0",
     "@transferwise/neptune-css": "14.9.6",
-    "@wise/components-theming": "0.0.0-experimental-81baec1"
+    "@wise/components-theming": "1.0.0"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3.7.0",
     "@transferwise/neptune-css": "^14.9.6",
     "@wise/art": "^2.7.0",
-    "@wise/components-theming": "0.0.0-experimental-81baec1",
+    "@wise/components-theming": "^1.0.0",
     "react": ">=16.14",
     "react-dom": ">=16.14",
     "react-intl": "^5.10.0 || ^6"
@@ -118,7 +101,7 @@
     "@react-aria/overlays": "^3.17.0",
     "@react-spring/web": "~9.6.1",
     "@transferwise/formatting": "^2.1.0",
-    "@transferwise/neptune-validation": "0.0.0-experimental-81baec1",
+    "@transferwise/neptune-validation": "^3.1.0",
     "classnames": "^2.2.6",
     "commonmark": "0.29.1",
     "core-js": "^3.8.0",
@@ -128,6 +111,7 @@
     "lodash.topairs": "^4.3.0",
     "merge-props": "^6.0.0",
     "prop-types": "^15.7.2",
+    "react-merge-refs": "^1.1.0",
     "react-popper": "^2.3.0",
     "react-required-if": "^1.0.3",
     "react-transition-group": "^4.4.2",

package/src/common/hooks/useMedia.ts

@@ -1,5 +1,4 @@
-// eslint-disable-next-line import/extensions
-import { useSyncExternalStore } from 'use-sync-external-store/shim/index.js';
+import { useSyncExternalStore } from 'use-sync-external-store/shim';
 
 export function useMedia(query: string) {
   return useSyncExternalStore(

package/src/inputWithDisplayFormat/InputWithDisplayFormat.story.js

@@ -34,14 +34,15 @@ const Template = (args) => {
   const placeholder = args.pattern;
   const displayPattern = args.pattern;
   const label = args.label;
+  const id = label.replaceAll(' ', '-').toLowerCase();
 
   return (
     <>
-      <label id="template" htmlFor="template">
+      <label id="template" htmlFor={id}>
         {label}
       </label>
       <InputWithDisplayFormat
-        id="template"
+        id={id}
         placeholder={placeholder}
         displayPattern={displayPattern}
         className="form-control"

package/src/radio/Radio.story.tsx

@@ -44,7 +44,7 @@ export const Basic = () => {
         <Radio
           label={label}
           name="name"
-          id="id"
+          id="id1"
           checked={checked}
           disabled={disabled}
           secondary={secondary}
@@ -61,7 +61,7 @@ export const Basic = () => {
       <div className={`form-group  ${hasError ? 'has-error' : ''}`}>
         <Checkbox
           label={label}
-          id="test"
+          id="id2"
           checked={checked}
           disabled={disabled}
           secondary={secondary}
@@ -71,10 +71,9 @@ export const Basic = () => {
       <div className={`form-group  ${hasError ? 'has-error' : ''}`}>
         <Checkbox
           label={label}
-          id="test"
+          id="id3"
           checked={checked}
           disabled={disabled}
-          // secondary={secondary}
           onChange={() => setChecked(!checked)}
         />
       </div>

package/src/segmentedControl/SegmentedControl.tsx

@@ -101,6 +101,7 @@ const SegmentedControl = ({
         className={classNames('segmented-control__segments', {
           'segmented-control__segments--no-animate': !animate,
         })}
+        role={mode !== 'input' ? 'tablist' : undefined}
       >
         {segmentsWithRefs.map((segment) =>
           mode === 'input' ? (

package/src/switch/Switch.story.tsx

@@ -39,6 +39,9 @@ export const Disabled = () => {
 
   return (
     <div className="d-flex flex-column">
+      <label id="labelID" htmlFor="switchId">
+        A switch with a label
+      </label>
       <Switch
         checked={checked}
         disabled
@@ -53,7 +56,7 @@ export const Disabled = () => {
         disabled
         className="a-class-name"
         aria-labelledby="labelID"
-        id="switchId"
+        id="switchId1"
         onClick={() => setCheck(!checked)}
       />
     </div>