@transferwise/components 0.0.0-experimental-d7a6a12 → 0.0.0-experimental-c4fb7ee

package/build/divider/Divider.js

@@ -5,12 +5,13 @@ require('react');
 var jsxRuntime = require('react/jsx-runtime');
 
 const Divider = ({
-  as: Element = 'hr',
+  as = 'hr',
   className,
   testId,
   variant = 'section',
   ...props
 }) => {
+  const Element = as;
   const variantClass = variant && variant !== 'section' ? `wds-Divider--${variant}` : '';
   const dividerClasses = clsx.clsx('wds-Divider', variantClass, className);
   const commonProps = {

package/build/divider/Divider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Divider.js","sources":["../../src/divider/Divider.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React, { FunctionComponent } from 'react';\n\nexport interface DividerProps {\n  /** Option prop to specify DOM render element */\n  as?: 'hr' | 'div';\n\n  /** Optional prop to specify classNames onto the Divider */\n  className?: string;\n\n  /** Optional prop to specify the ID used for testing */\n  testId?: string;\n\n  /** Optional prop to specify the variant of the Divider */\n  variant?: 'content' | 'subsection' | 'section';\n}\n\n/**\n * Divider component\n *\n * The Divider component is used to visually separate different sections of content.\n * It can be rendered as a horizontal line and supports various styles such as\n * thick, dashed, and thin. Additionally, the Divider can include custom styles.\n *\n * @component\n * @param {'hr' | 'div'} [as='hr'] - Option prop to specify DOM render element.\n * @param {string} [className] - Optional prop to specify classNames onto the Divider.\n * @param {string} [testId] - Optional prop to specify the ID used for testing.\n * @param {'default' | 'thin' | 'dashed'} [variant='default'] - Optional prop to specify the variant of the Divider.\n *\n * @example\n * // Example usage:\n * import Divider from './Divider';\n *\n * function App() {\n *   return (\n *     <div>\n *       <p>Content above the divider</p>\n *       <Divider variant=\"content\" />\n *       <p>Content below the divider</p>\n *       <Divider variant=\"subsection\" />\n *     </div>\n *   );\n * }\n */\nconst Divider: FunctionComponent<DividerProps> = ({\n  as: Element = 'hr',\n  className,\n  testId,\n  variant = 'section',\n  ...props\n}) => {\n  const variantClass = variant && variant !== 'section' ? `wds-Divider--${variant}` : '';\n  const dividerClasses = clsx('wds-Divider', variantClass, className);\n\n  const commonProps = {\n    className: dividerClasses,\n    'data-testid': testId,\n  };\n\n  const divProps = {\n    ...commonProps,\n    'aria-orientation': 'horizontal',\n    role: 'separator',\n  };\n\n  const componentProps = Element === 'div' ? divProps : commonProps;\n\n  return <Element {...componentProps} {...props} />;\n};\n\nexport default Divider;\n"],"names":["Divider","as","Element","className","testId","variant","props","variantClass","dividerClasses","clsx","commonProps","divProps","role","componentProps","_jsx"],"mappings":";;;;;;AA6CMA,MAAAA,OAAO,GAAoCA,CAAC;EAChDC,EAAE,EAAEC,OAAO,GAAG,IAAI;EAClBC,SAAS;EACTC,MAAM;AACNC,EAAAA,OAAO,GAAG,SAAS;EACnB,GAAGC,KAAAA;AACJ,CAAA,KAAI;AACH,EAAA,MAAMC,YAAY,GAAGF,OAAO,IAAIA,OAAO,KAAK,SAAS,GAAG,CAAgBA,aAAAA,EAAAA,OAAO,CAAE,CAAA,GAAG,EAAE,CAAA;EACtF,MAAMG,cAAc,GAAGC,SAAI,CAAC,aAAa,EAAEF,YAAY,EAAEJ,SAAS,CAAC,CAAA;AAEnE,EAAA,MAAMO,WAAW,GAAG;AAClBP,IAAAA,SAAS,EAAEK,cAAc;AACzB,IAAA,aAAa,EAAEJ,MAAAA;GAChB,CAAA;AAED,EAAA,MAAMO,QAAQ,GAAG;AACf,IAAA,GAAGD,WAAW;AACd,IAAA,kBAAkB,EAAE,YAAY;AAChCE,IAAAA,IAAI,EAAE,WAAA;GACP,CAAA;EAED,MAAMC,cAAc,GAAGX,OAAO,KAAK,KAAK,GAAGS,QAAQ,GAAGD,WAAW,CAAA;EAEjE,oBAAOI,cAAA,CAACZ,OAAO,EAAA;AAAA,IAAA,GAAKW,cAAc;IAAA,GAAMP,KAAAA;AAAK,GAAC,CAAG,CAAA;AACnD;;;;"}
+{"version":3,"file":"Divider.js","sources":["../../src/divider/Divider.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React, { FunctionComponent } from 'react';\n\nexport interface DividerProps {\n  /** Option prop to specify DOM render element */\n  as?: 'hr' | 'div';\n\n  /** Optional prop to specify classNames onto the Divider */\n  className?: string;\n\n  /** Optional prop to specify the ID used for testing */\n  testId?: string;\n\n  /** Optional prop to specify the variant of the Divider */\n  variant?: 'content' | 'subsection' | 'section';\n}\n\n/**\n * Divider component\n *\n * The Divider component is used to visually separate different sections of content.\n * It can be rendered as a horizontal line and supports various styles such as\n * section, subsection, and content. Additionally, the Divider can include custom styles.\n *\n * @component\n * @param {'hr' | 'div'} [as='hr'] - Option prop to specify DOM render element.\n * @param {string} [className] - Optional prop to specify classNames onto the Divider.\n * @param {string} [testId] - Optional prop to specify the ID used for testing.\n * @param {'section' | 'subsection' | 'content'} [variant='section'] - Optional prop to specify the variant of the Divider.\n *\n * @example\n * // Example usage:\n * import Divider from './Divider';\n *\n * function App() {\n *   return (\n *     <div>\n *       <p>Content above the divider</p>\n *       <Divider variant=\"content\" />\n *       <p>Content below the divider</p>\n *       <Divider variant=\"subsection\" />\n *     </div>\n *   );\n * }\n */\nconst Divider: FunctionComponent<DividerProps> = ({\n  as = 'hr',\n  className,\n  testId,\n  variant = 'section',\n  ...props\n}) => {\n  const Element = as;\n  const variantClass = variant && variant !== 'section' ? `wds-Divider--${variant}` : '';\n  const dividerClasses = clsx('wds-Divider', variantClass, className);\n\n  const commonProps = {\n    className: dividerClasses,\n    'data-testid': testId,\n  };\n\n  const divProps = {\n    ...commonProps,\n    'aria-orientation': 'horizontal',\n    role: 'separator',\n  };\n\n  const componentProps = Element === 'div' ? divProps : commonProps;\n\n  return <Element {...componentProps} {...props} />;\n};\n\nexport default Divider;\n"],"names":["Divider","as","className","testId","variant","props","Element","variantClass","dividerClasses","clsx","commonProps","divProps","role","componentProps","_jsx"],"mappings":";;;;;;AA6CMA,MAAAA,OAAO,GAAoCA,CAAC;AAChDC,EAAAA,EAAE,GAAG,IAAI;EACTC,SAAS;EACTC,MAAM;AACNC,EAAAA,OAAO,GAAG,SAAS;EACnB,GAAGC,KAAAA;AAAK,CACT,KAAI;EACH,MAAMC,OAAO,GAAGL,EAAE,CAAA;AAClB,EAAA,MAAMM,YAAY,GAAGH,OAAO,IAAIA,OAAO,KAAK,SAAS,GAAG,CAAgBA,aAAAA,EAAAA,OAAO,CAAE,CAAA,GAAG,EAAE,CAAA;EACtF,MAAMI,cAAc,GAAGC,SAAI,CAAC,aAAa,EAAEF,YAAY,EAAEL,SAAS,CAAC,CAAA;AAEnE,EAAA,MAAMQ,WAAW,GAAG;AAClBR,IAAAA,SAAS,EAAEM,cAAc;AACzB,IAAA,aAAa,EAAEL,MAAAA;GAChB,CAAA;AAED,EAAA,MAAMQ,QAAQ,GAAG;AACf,IAAA,GAAGD,WAAW;AACd,IAAA,kBAAkB,EAAE,YAAY;AAChCE,IAAAA,IAAI,EAAE,WAAA;GACP,CAAA;EAED,MAAMC,cAAc,GAAGP,OAAO,KAAK,KAAK,GAAGK,QAAQ,GAAGD,WAAW,CAAA;EAEjE,oBAAOI,cAAA,CAACR,OAAO,EAAA;AAAA,IAAA,GAAKO,cAAc;IAAA,GAAMR,KAAAA;AAAK,GAAC,CAAG,CAAA;AACnD;;;;"}

package/build/divider/Divider.mjs

@@ -3,12 +3,13 @@ import 'react';
 import { jsx } from 'react/jsx-runtime';
 
 const Divider = ({
-  as: Element = 'hr',
+  as = 'hr',
   className,
   testId,
   variant = 'section',
   ...props
 }) => {
+  const Element = as;
   const variantClass = variant && variant !== 'section' ? `wds-Divider--${variant}` : '';
   const dividerClasses = clsx('wds-Divider', variantClass, className);
   const commonProps = {

package/build/divider/Divider.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Divider.mjs","sources":["../../src/divider/Divider.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React, { FunctionComponent } from 'react';\n\nexport interface DividerProps {\n  /** Option prop to specify DOM render element */\n  as?: 'hr' | 'div';\n\n  /** Optional prop to specify classNames onto the Divider */\n  className?: string;\n\n  /** Optional prop to specify the ID used for testing */\n  testId?: string;\n\n  /** Optional prop to specify the variant of the Divider */\n  variant?: 'content' | 'subsection' | 'section';\n}\n\n/**\n * Divider component\n *\n * The Divider component is used to visually separate different sections of content.\n * It can be rendered as a horizontal line and supports various styles such as\n * thick, dashed, and thin. Additionally, the Divider can include custom styles.\n *\n * @component\n * @param {'hr' | 'div'} [as='hr'] - Option prop to specify DOM render element.\n * @param {string} [className] - Optional prop to specify classNames onto the Divider.\n * @param {string} [testId] - Optional prop to specify the ID used for testing.\n * @param {'default' | 'thin' | 'dashed'} [variant='default'] - Optional prop to specify the variant of the Divider.\n *\n * @example\n * // Example usage:\n * import Divider from './Divider';\n *\n * function App() {\n *   return (\n *     <div>\n *       <p>Content above the divider</p>\n *       <Divider variant=\"content\" />\n *       <p>Content below the divider</p>\n *       <Divider variant=\"subsection\" />\n *     </div>\n *   );\n * }\n */\nconst Divider: FunctionComponent<DividerProps> = ({\n  as: Element = 'hr',\n  className,\n  testId,\n  variant = 'section',\n  ...props\n}) => {\n  const variantClass = variant && variant !== 'section' ? `wds-Divider--${variant}` : '';\n  const dividerClasses = clsx('wds-Divider', variantClass, className);\n\n  const commonProps = {\n    className: dividerClasses,\n    'data-testid': testId,\n  };\n\n  const divProps = {\n    ...commonProps,\n    'aria-orientation': 'horizontal',\n    role: 'separator',\n  };\n\n  const componentProps = Element === 'div' ? divProps : commonProps;\n\n  return <Element {...componentProps} {...props} />;\n};\n\nexport default Divider;\n"],"names":["Divider","as","Element","className","testId","variant","props","variantClass","dividerClasses","clsx","commonProps","divProps","role","componentProps","_jsx"],"mappings":";;;;AA6CMA,MAAAA,OAAO,GAAoCA,CAAC;EAChDC,EAAE,EAAEC,OAAO,GAAG,IAAI;EAClBC,SAAS;EACTC,MAAM;AACNC,EAAAA,OAAO,GAAG,SAAS;EACnB,GAAGC,KAAAA;AACJ,CAAA,KAAI;AACH,EAAA,MAAMC,YAAY,GAAGF,OAAO,IAAIA,OAAO,KAAK,SAAS,GAAG,CAAgBA,aAAAA,EAAAA,OAAO,CAAE,CAAA,GAAG,EAAE,CAAA;EACtF,MAAMG,cAAc,GAAGC,IAAI,CAAC,aAAa,EAAEF,YAAY,EAAEJ,SAAS,CAAC,CAAA;AAEnE,EAAA,MAAMO,WAAW,GAAG;AAClBP,IAAAA,SAAS,EAAEK,cAAc;AACzB,IAAA,aAAa,EAAEJ,MAAAA;GAChB,CAAA;AAED,EAAA,MAAMO,QAAQ,GAAG;AACf,IAAA,GAAGD,WAAW;AACd,IAAA,kBAAkB,EAAE,YAAY;AAChCE,IAAAA,IAAI,EAAE,WAAA;GACP,CAAA;EAED,MAAMC,cAAc,GAAGX,OAAO,KAAK,KAAK,GAAGS,QAAQ,GAAGD,WAAW,CAAA;EAEjE,oBAAOI,GAAA,CAACZ,OAAO,EAAA;AAAA,IAAA,GAAKW,cAAc;IAAA,GAAMP,KAAAA;AAAK,GAAC,CAAG,CAAA;AACnD;;;;"}
+{"version":3,"file":"Divider.mjs","sources":["../../src/divider/Divider.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React, { FunctionComponent } from 'react';\n\nexport interface DividerProps {\n  /** Option prop to specify DOM render element */\n  as?: 'hr' | 'div';\n\n  /** Optional prop to specify classNames onto the Divider */\n  className?: string;\n\n  /** Optional prop to specify the ID used for testing */\n  testId?: string;\n\n  /** Optional prop to specify the variant of the Divider */\n  variant?: 'content' | 'subsection' | 'section';\n}\n\n/**\n * Divider component\n *\n * The Divider component is used to visually separate different sections of content.\n * It can be rendered as a horizontal line and supports various styles such as\n * section, subsection, and content. Additionally, the Divider can include custom styles.\n *\n * @component\n * @param {'hr' | 'div'} [as='hr'] - Option prop to specify DOM render element.\n * @param {string} [className] - Optional prop to specify classNames onto the Divider.\n * @param {string} [testId] - Optional prop to specify the ID used for testing.\n * @param {'section' | 'subsection' | 'content'} [variant='section'] - Optional prop to specify the variant of the Divider.\n *\n * @example\n * // Example usage:\n * import Divider from './Divider';\n *\n * function App() {\n *   return (\n *     <div>\n *       <p>Content above the divider</p>\n *       <Divider variant=\"content\" />\n *       <p>Content below the divider</p>\n *       <Divider variant=\"subsection\" />\n *     </div>\n *   );\n * }\n */\nconst Divider: FunctionComponent<DividerProps> = ({\n  as = 'hr',\n  className,\n  testId,\n  variant = 'section',\n  ...props\n}) => {\n  const Element = as;\n  const variantClass = variant && variant !== 'section' ? `wds-Divider--${variant}` : '';\n  const dividerClasses = clsx('wds-Divider', variantClass, className);\n\n  const commonProps = {\n    className: dividerClasses,\n    'data-testid': testId,\n  };\n\n  const divProps = {\n    ...commonProps,\n    'aria-orientation': 'horizontal',\n    role: 'separator',\n  };\n\n  const componentProps = Element === 'div' ? divProps : commonProps;\n\n  return <Element {...componentProps} {...props} />;\n};\n\nexport default Divider;\n"],"names":["Divider","as","className","testId","variant","props","Element","variantClass","dividerClasses","clsx","commonProps","divProps","role","componentProps","_jsx"],"mappings":";;;;AA6CMA,MAAAA,OAAO,GAAoCA,CAAC;AAChDC,EAAAA,EAAE,GAAG,IAAI;EACTC,SAAS;EACTC,MAAM;AACNC,EAAAA,OAAO,GAAG,SAAS;EACnB,GAAGC,KAAAA;AAAK,CACT,KAAI;EACH,MAAMC,OAAO,GAAGL,EAAE,CAAA;AAClB,EAAA,MAAMM,YAAY,GAAGH,OAAO,IAAIA,OAAO,KAAK,SAAS,GAAG,CAAgBA,aAAAA,EAAAA,OAAO,CAAE,CAAA,GAAG,EAAE,CAAA;EACtF,MAAMI,cAAc,GAAGC,IAAI,CAAC,aAAa,EAAEF,YAAY,EAAEL,SAAS,CAAC,CAAA;AAEnE,EAAA,MAAMQ,WAAW,GAAG;AAClBR,IAAAA,SAAS,EAAEM,cAAc;AACzB,IAAA,aAAa,EAAEL,MAAAA;GAChB,CAAA;AAED,EAAA,MAAMQ,QAAQ,GAAG;AACf,IAAA,GAAGD,WAAW;AACd,IAAA,kBAAkB,EAAE,YAAY;AAChCE,IAAAA,IAAI,EAAE,WAAA;GACP,CAAA;EAED,MAAMC,cAAc,GAAGP,OAAO,KAAK,KAAK,GAAGK,QAAQ,GAAGD,WAAW,CAAA;EAEjE,oBAAOI,GAAA,CAACR,OAAO,EAAA;AAAA,IAAA,GAAKO,cAAc;IAAA,GAAMR,KAAAA;AAAK,GAAC,CAAG,CAAA;AACnD;;;;"}

package/build/types/divider/Divider.d.ts

@@ -14,13 +14,13 @@ export interface DividerProps {
  *
  * The Divider component is used to visually separate different sections of content.
  * It can be rendered as a horizontal line and supports various styles such as
- * thick, dashed, and thin. Additionally, the Divider can include custom styles.
+ * section, subsection, and content. Additionally, the Divider can include custom styles.
  *
  * @component
  * @param {'hr' | 'div'} [as='hr'] - Option prop to specify DOM render element.
  * @param {string} [className] - Optional prop to specify classNames onto the Divider.
  * @param {string} [testId] - Optional prop to specify the ID used for testing.
- * @param {'default' | 'thin' | 'dashed'} [variant='default'] - Optional prop to specify the variant of the Divider.
+ * @param {'section' | 'subsection' | 'content'} [variant='section'] - Optional prop to specify the variant of the Divider.
  *
  * @example
  * // Example usage:

package/build/types/divider/Divider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Divider.d.ts","sourceRoot":"","sources":["../../../src/divider/Divider.tsx"],"names":[],"mappings":"AACA,OAAc,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAEjD,MAAM,WAAW,YAAY;IAC3B,gDAAgD;IAChD,EAAE,CAAC,EAAE,IAAI,GAAG,KAAK,CAAC;IAElB,2DAA2D;IAC3D,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,uDAAuD;IACvD,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,0DAA0D;IAC1D,OAAO,CAAC,EAAE,SAAS,GAAG,YAAY,GAAG,SAAS,CAAC;CAChD;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,QAAA,MAAM,OAAO,EAAE,iBAAiB,CAAC,YAAY,CAwB5C,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Divider.d.ts","sourceRoot":"","sources":["../../../src/divider/Divider.tsx"],"names":[],"mappings":"AACA,OAAc,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAEjD,MAAM,WAAW,YAAY;IAC3B,gDAAgD;IAChD,EAAE,CAAC,EAAE,IAAI,GAAG,KAAK,CAAC;IAElB,2DAA2D;IAC3D,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,uDAAuD;IACvD,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,0DAA0D;IAC1D,OAAO,CAAC,EAAE,SAAS,GAAG,YAAY,GAAG,SAAS,CAAC;CAChD;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,QAAA,MAAM,OAAO,EAAE,iBAAiB,CAAC,YAAY,CAyB5C,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-d7a6a12",
+  "version": "0.0.0-experimental-c4fb7ee",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -92,9 +92,9 @@
     "rollup": "^4.18.1",
     "rollup-preserve-directives": "^1.1.1",
     "storybook": "^8.2.2",
+    "@transferwise/less-config": "3.1.0",
     "@transferwise/neptune-css": "14.18.0",
-    "@wise/components-theming": "1.6.0",
-    "@transferwise/less-config": "3.1.0"
+    "@wise/components-theming": "1.6.0"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3.7.0",

package/src/divider/Divider.tsx

@@ -20,13 +20,13 @@ export interface DividerProps {
  *
  * The Divider component is used to visually separate different sections of content.
  * It can be rendered as a horizontal line and supports various styles such as
- * thick, dashed, and thin. Additionally, the Divider can include custom styles.
+ * section, subsection, and content. Additionally, the Divider can include custom styles.
  *
  * @component
  * @param {'hr' | 'div'} [as='hr'] - Option prop to specify DOM render element.
  * @param {string} [className] - Optional prop to specify classNames onto the Divider.
  * @param {string} [testId] - Optional prop to specify the ID used for testing.
- * @param {'default' | 'thin' | 'dashed'} [variant='default'] - Optional prop to specify the variant of the Divider.
+ * @param {'section' | 'subsection' | 'content'} [variant='section'] - Optional prop to specify the variant of the Divider.
  *
  * @example
  * // Example usage:
@@ -44,12 +44,13 @@ export interface DividerProps {
  * }
  */
 const Divider: FunctionComponent<DividerProps> = ({
-  as: Element = 'hr',
+  as = 'hr',
   className,
   testId,
   variant = 'section',
   ...props
 }) => {
+  const Element = as;
   const variantClass = variant && variant !== 'section' ? `wds-Divider--${variant}` : '';
   const dividerClasses = clsx('wds-Divider', variantClass, className);