npm - @westpac/ui - Versions diffs - 0.7.1 → 0.8.0 - Mend

@westpac/ui 0.7.1 → 0.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (350) hide show

package/dist/css/westpac-ui.min.css CHANGED Viewed

@@ -1499,6 +1499,10 @@ video {
   --colors-pictogram-dark: 0, 0, 0;
   --colors-pictogram-duo-highlight: 145, 151, 154;
   --colors-pictogram-duo-outline: 0, 0, 0;
+}body {
+  font-size: 0.875rem;
+  line-height: 1.428571429;
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
 }*, ::before, ::after {
   --tw-border-spacing-x: 0;
   --tw-border-spacing-y: 0;
@@ -1692,6 +1696,14 @@ video {
   font-size: 0.875rem;
   line-height: 1.4;
   font-family: var(--fontFamily-brand-0), var(--fontFamily-brand-1), var(--fontFamily-brand-2), var(--fontFamily-brand-3), var(--fontFamily-brand-4), var(--fontFamily-brand-5), var(--fontFamily-brand-6), var(--fontFamily-brand-7), var(--fontFamily-brand-8), var(--fontFamily-brand-9);
+}.typography-body-11 {
+  font-size: 0.875rem;
+  line-height: 1.428571429;
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+}.typography-brand-11 {
+  font-size: 0.875rem;
+  line-height: 1.428571429;
+  font-family: var(--fontFamily-brand-0), var(--fontFamily-brand-1), var(--fontFamily-brand-2), var(--fontFamily-brand-3), var(--fontFamily-brand-4), var(--fontFamily-brand-5), var(--fontFamily-brand-6), var(--fontFamily-brand-7), var(--fontFamily-brand-8), var(--fontFamily-brand-9);
 }.form-control::-webkit-outer-spin-button,.form-control::-webkit-inner-spin-button {
   margin: 0;
   -webkit-appearance: none;
@@ -2150,8 +2162,6 @@ video {
   margin-left: -1px;
 }.ml-\[0\.4em\] {
   margin-left: 0.4em;
-}.mr-0 {
-  margin-right: 0;
 }.mr-1 {
   margin-right: 0.375rem;
 }.mr-2 {
@@ -2164,8 +2174,8 @@ video {
   margin-right: 0.25rem;
 }.mr-\[0\.4em\] {
   margin-right: 0.4em;
-}.mr-\[0\.5rem\] {
-  margin-right: 0.5rem;
+}.mr-\[0\.5em\] {
+  margin-right: 0.5em;
 }.mt-0 {
   margin-top: 0;
 }.mt-1 {
@@ -2184,8 +2194,6 @@ video {
   margin-top: 0.875rem;
 }.mt-\[0\.9375rem\] {
   margin-top: 0.9375rem;
-}.mt-\[mr-0\.25rem\] {
-  margin-top: mr-0.25rem;
 }.box-border {
   box-sizing: border-box;
 }.box-content {
@@ -2602,8 +2610,6 @@ video {
   border-radius: 2.5rem;
 }.rounded-\[2\.875rem\] {
   border-radius: 2.875rem;
-}.rounded-\[3px\] {
-  border-radius: 3px;
 }.rounded-full {
   border-radius: 9999px;
 }.rounded-none {
@@ -2612,9 +2618,6 @@ video {
   border-radius: 0.125rem;
 }.rounded-xl {
   border-radius: 0.75rem;
-}.rounded-l {
-  border-top-left-radius: 0.25rem;
-  border-bottom-left-radius: 0.25rem;
 }.rounded-l-\[0\.1875rem\] {
   border-top-left-radius: 0.1875rem;
   border-bottom-left-radius: 0.1875rem;
@@ -3548,14 +3551,64 @@ video {
   padding-left: 1.1875rem;
 }.pr-1 {
   padding-right: 0.375rem;
+}.pr-10 {
+  padding-right: 3.75rem;
+}.pr-11 {
+  padding-right: 4.125rem;
+}.pr-12 {
+  padding-right: 4.5rem;
+}.pr-13 {
+  padding-right: 4.875rem;
+}.pr-14 {
+  padding-right: 5.25rem;
+}.pr-15 {
+  padding-right: 5.625rem;
+}.pr-16 {
+  padding-right: 6rem;
+}.pr-17 {
+  padding-right: 6.375rem;
+}.pr-18 {
+  padding-right: 6.75rem;
+}.pr-19 {
+  padding-right: 7.125rem;
 }.pr-2 {
   padding-right: 0.75rem;
+}.pr-20 {
+  padding-right: 7.5rem;
+}.pr-21 {
+  padding-right: 7.875rem;
+}.pr-22 {
+  padding-right: 8.25rem;
+}.pr-23 {
+  padding-right: 8.625rem;
+}.pr-24 {
+  padding-right: 9rem;
+}.pr-25 {
+  padding-right: 9.375rem;
+}.pr-26 {
+  padding-right: 9.75rem;
+}.pr-27 {
+  padding-right: 10.125rem;
+}.pr-28 {
+  padding-right: 10.5rem;
+}.pr-29 {
+  padding-right: 10.875rem;
 }.pr-3 {
   padding-right: 1.125rem;
+}.pr-30 {
+  padding-right: 11.25rem;
+}.pr-4 {
+  padding-right: 1.5rem;
 }.pr-5 {
   padding-right: 1.875rem;
 }.pr-6 {
   padding-right: 2.25rem;
+}.pr-7 {
+  padding-right: 2.625rem;
+}.pr-8 {
+  padding-right: 3rem;
+}.pr-9 {
+  padding-right: 3.375rem;
 }.pr-\[0\.5625rem\] {
   padding-right: 0.5625rem;
 }.pr-\[0\.9375rem\] {
@@ -3630,8 +3683,12 @@ video {
   line-height: 1.5;
 }.leading-\[1\.685rem\] {
   line-height: 1.685rem;
+}.leading-loose {
+  line-height: 1.428571429;
 }.leading-none {
   line-height: 1;
+}.leading-normal {
+  line-height: 1.4;
 }.leading-tight {
   line-height: 1.2;
 }.\!text-text {
@@ -3822,10 +3879,6 @@ video {
   outline-color: rgb(var(--colors-focus));
 }.select-caret {
   background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='8' style='color: rgb(89,87,103);'><path fill='currentColor' d='M0 0l7 8 7-8z'/></svg>");
-}body {
-  font-size: 0.875rem;
-  line-height: 1.4;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
 }.read-only\:form-control-disabled:-moz-read-only {
   cursor: not-allowed;
   border-style: dashed;
@@ -4565,6 +4618,8 @@ video {
 }.before\:first\:hidden:first-child::before {
   content: var(--tw-content);
   display: none;
+}.last\:mb-0:last-child {
+  margin-bottom: 0;
 }.last\:border-b-0:last-child {
   border-bottom-width: 0px;
 }.last\:border-r-0:last-child {
@@ -4706,17 +4761,17 @@ video {
   pointer-events: none;
 }.disabled\:opacity-50:disabled {
   opacity: 0.5;
-}.group\/buttons:first-child .group-first\/buttons\:rounded-l {
-  border-top-left-radius: 0.25rem;
-  border-bottom-left-radius: 0.25rem;
+}.group\/buttons:first-child .group-first\/buttons\:rounded-l-\[0\.1875rem\] {
+  border-top-left-radius: 0.1875rem;
+  border-bottom-left-radius: 0.1875rem;
 }.group\/panel:first-child .group-first\/panel\:px-4 {
   padding-left: 1.5rem;
   padding-right: 1.5rem;
 }.group\/panel:first-child .group-first\/panel\:pt-4 {
   padding-top: 1.5rem;
-}.group\/buttons:last-child .group-last\/buttons\:rounded-r {
-  border-top-right-radius: 0.25rem;
-  border-bottom-right-radius: 0.25rem;
+}.group\/buttons:last-child .group-last\/buttons\:rounded-r-\[0\.1875rem\] {
+  border-top-right-radius: 0.1875rem;
+  border-bottom-right-radius: 0.1875rem;
 }.group\/checkbox-option:hover .group-hover\/checkbox-option\:translate-x-1 {
   --tw-translate-x: 0.375rem;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -5087,6 +5142,8 @@ video {
     justify-content: space-between;
   }.xsl\:gap-4 {
     gap: 1.5rem;
+  }.xsl\:gap-5 {
+    gap: 1.875rem;
   }.xsl\:gap-\[2px\] {
     gap: 2px;
   }.xsl\:self-center {
@@ -5097,8 +5154,8 @@ video {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-  }.xsl\:rounded {
-    border-radius: 0.25rem;
+  }.xsl\:rounded-\[0\.1875rem\] {
+    border-radius: 0.1875rem;
   }.xsl\:rounded-\[0\.625rem\] {
     border-radius: 0.625rem;
   }.xsl\:rounded-\[1\.5rem\] {
@@ -5117,15 +5174,9 @@ video {
     border-radius: 0.125rem;
   }.xsl\:rounded-xl {
     border-radius: 0.75rem;
-  }.xsl\:rounded-l {
-    border-top-left-radius: 0.25rem;
-    border-bottom-left-radius: 0.25rem;
   }.xsl\:rounded-l-\[0\.1875rem\] {
     border-top-left-radius: 0.1875rem;
     border-bottom-left-radius: 0.1875rem;
-  }.xsl\:rounded-r {
-    border-top-right-radius: 0.25rem;
-    border-bottom-right-radius: 0.25rem;
   }.xsl\:rounded-r-\[0\.1875rem\] {
     border-top-right-radius: 0.1875rem;
     border-bottom-right-radius: 0.1875rem;
@@ -5320,8 +5371,6 @@ video {
     padding-top: 0.5625rem;
   }.xsl\:pt-\[0\.625rem\] {
     padding-top: 0.625rem;
-  }.xsl\:pt-\[0\.875rem\] {
-    padding-top: 0.875rem;
   }.xsl\:text-\[0\.75rem\] {
     font-size: 0.75rem;
   }.xsl\:font-bold {
@@ -5921,6 +5970,8 @@ video {
     justify-content: space-between;
   }.sm\:gap-4 {
     gap: 1.5rem;
+  }.sm\:gap-5 {
+    gap: 1.875rem;
   }.sm\:gap-\[2px\] {
     gap: 2px;
   }.sm\:self-center {
@@ -5931,8 +5982,8 @@ video {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-  }.sm\:rounded {
-    border-radius: 0.25rem;
+  }.sm\:rounded-\[0\.1875rem\] {
+    border-radius: 0.1875rem;
   }.sm\:rounded-\[0\.625rem\] {
     border-radius: 0.625rem;
   }.sm\:rounded-\[1\.5rem\] {
@@ -5951,15 +6002,9 @@ video {
     border-radius: 0.125rem;
   }.sm\:rounded-xl {
     border-radius: 0.75rem;
-  }.sm\:rounded-l {
-    border-top-left-radius: 0.25rem;
-    border-bottom-left-radius: 0.25rem;
   }.sm\:rounded-l-\[0\.1875rem\] {
     border-top-left-radius: 0.1875rem;
     border-bottom-left-radius: 0.1875rem;
-  }.sm\:rounded-r {
-    border-top-right-radius: 0.25rem;
-    border-bottom-right-radius: 0.25rem;
   }.sm\:rounded-r-\[0\.1875rem\] {
     border-top-right-radius: 0.1875rem;
     border-bottom-right-radius: 0.1875rem;
@@ -6160,8 +6205,6 @@ video {
     padding-top: 0.5625rem;
   }.sm\:pt-\[0\.625rem\] {
     padding-top: 0.625rem;
-  }.sm\:pt-\[0\.875rem\] {
-    padding-top: 0.875rem;
   }.sm\:align-middle {
     vertical-align: middle;
   }@media (min-width: 768px) {.sm\:sm\:align-middle {
@@ -6767,6 +6810,8 @@ video {
     gap: 1.125rem;
   }.md\:gap-4 {
     gap: 1.5rem;
+  }.md\:gap-5 {
+    gap: 1.875rem;
   }.md\:gap-\[2px\] {
     gap: 2px;
   }.md\:self-center {
@@ -6777,8 +6822,8 @@ video {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-  }.md\:rounded {
-    border-radius: 0.25rem;
+  }.md\:rounded-\[0\.1875rem\] {
+    border-radius: 0.1875rem;
   }.md\:rounded-\[0\.625rem\] {
     border-radius: 0.625rem;
   }.md\:rounded-\[1\.5rem\] {
@@ -6797,15 +6842,9 @@ video {
     border-radius: 0.125rem;
   }.md\:rounded-xl {
     border-radius: 0.75rem;
-  }.md\:rounded-l {
-    border-top-left-radius: 0.25rem;
-    border-bottom-left-radius: 0.25rem;
   }.md\:rounded-l-\[0\.1875rem\] {
     border-top-left-radius: 0.1875rem;
     border-bottom-left-radius: 0.1875rem;
-  }.md\:rounded-r {
-    border-top-right-radius: 0.25rem;
-    border-bottom-right-radius: 0.25rem;
   }.md\:rounded-r-\[0\.1875rem\] {
     border-top-right-radius: 0.1875rem;
     border-bottom-right-radius: 0.1875rem;
@@ -7001,8 +7040,6 @@ video {
     padding-top: 0.5625rem;
   }.md\:pt-\[0\.625rem\] {
     padding-top: 0.625rem;
-  }.md\:pt-\[0\.875rem\] {
-    padding-top: 0.875rem;
   }.md\:text-\[0\.75rem\] {
     font-size: 0.75rem;
   }.md\:font-bold {
@@ -7608,6 +7645,8 @@ video {
     justify-content: space-between;
   }.lg\:gap-4 {
     gap: 1.5rem;
+  }.lg\:gap-5 {
+    gap: 1.875rem;
   }.lg\:gap-\[2px\] {
     gap: 2px;
   }.lg\:self-center {
@@ -7618,8 +7657,8 @@ video {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-  }.lg\:rounded {
-    border-radius: 0.25rem;
+  }.lg\:rounded-\[0\.1875rem\] {
+    border-radius: 0.1875rem;
   }.lg\:rounded-\[0\.625rem\] {
     border-radius: 0.625rem;
   }.lg\:rounded-\[1\.5rem\] {
@@ -7638,15 +7677,9 @@ video {
     border-radius: 0.125rem;
   }.lg\:rounded-xl {
     border-radius: 0.75rem;
-  }.lg\:rounded-l {
-    border-top-left-radius: 0.25rem;
-    border-bottom-left-radius: 0.25rem;
   }.lg\:rounded-l-\[0\.1875rem\] {
     border-top-left-radius: 0.1875rem;
     border-bottom-left-radius: 0.1875rem;
-  }.lg\:rounded-r {
-    border-top-right-radius: 0.25rem;
-    border-bottom-right-radius: 0.25rem;
   }.lg\:rounded-r-\[0\.1875rem\] {
     border-top-right-radius: 0.1875rem;
     border-bottom-right-radius: 0.1875rem;
@@ -7842,8 +7875,6 @@ video {
     padding-top: 0.5625rem;
   }.lg\:pt-\[0\.625rem\] {
     padding-top: 0.625rem;
-  }.lg\:pt-\[0\.875rem\] {
-    padding-top: 0.875rem;
   }.lg\:text-\[0\.75rem\] {
     font-size: 0.75rem;
   }.lg\:font-bold {
@@ -8435,6 +8466,8 @@ video {
     justify-content: space-between;
   }.xl\:gap-4 {
     gap: 1.5rem;
+  }.xl\:gap-5 {
+    gap: 1.875rem;
   }.xl\:gap-\[2px\] {
     gap: 2px;
   }.xl\:self-center {
@@ -8445,8 +8478,8 @@ video {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-  }.xl\:rounded {
-    border-radius: 0.25rem;
+  }.xl\:rounded-\[0\.1875rem\] {
+    border-radius: 0.1875rem;
   }.xl\:rounded-\[0\.625rem\] {
     border-radius: 0.625rem;
   }.xl\:rounded-\[1\.5rem\] {
@@ -8465,15 +8498,9 @@ video {
     border-radius: 0.125rem;
   }.xl\:rounded-xl {
     border-radius: 0.75rem;
-  }.xl\:rounded-l {
-    border-top-left-radius: 0.25rem;
-    border-bottom-left-radius: 0.25rem;
   }.xl\:rounded-l-\[0\.1875rem\] {
     border-top-left-radius: 0.1875rem;
     border-bottom-left-radius: 0.1875rem;
-  }.xl\:rounded-r {
-    border-top-right-radius: 0.25rem;
-    border-bottom-right-radius: 0.25rem;
   }.xl\:rounded-r-\[0\.1875rem\] {
     border-top-right-radius: 0.1875rem;
     border-bottom-right-radius: 0.1875rem;
@@ -8663,8 +8690,6 @@ video {
     padding-top: 0.5625rem;
   }.xl\:pt-\[0\.625rem\] {
     padding-top: 0.625rem;
-  }.xl\:pt-\[0\.875rem\] {
-    padding-top: 0.875rem;
   }.xl\:text-\[0\.75rem\] {
     font-size: 0.75rem;
   }.xl\:font-bold {

package/dist/stories/foundation/spacing.stories.d.ts ADDED Viewed

@@ -0,0 +1,15 @@
+import { type Meta } from '@storybook/react';
+declare const meta: Meta;
+export default meta;
+/**
+ * Margin scale
+ */
+export declare const MarginScale: () => import("react/jsx-runtime").JSX.Element;
+/**
+ * Padding scale
+ */
+export declare const PaddingScale: () => import("react/jsx-runtime").JSX.Element;
+/**
+ * Gap scale
+ */
+export declare const GapScale: () => import("react/jsx-runtime").JSX.Element;

package/dist/stories/foundation/typography.stories.d.ts CHANGED Viewed

@@ -9,3 +9,7 @@ export declare const BrandFont: () => import("react/jsx-runtime").JSX.Element;
  * Body fonts
  */
 export declare const BodyFont: () => import("react/jsx-runtime").JSX.Element;
+/**
+ * Line height
+ */
+export declare const LineHeight: () => import("react/jsx-runtime").JSX.Element;

package/dist/tailwind/__mocks__/utils.constants.d.ts CHANGED Viewed

@@ -39,6 +39,7 @@ export declare const EXPECTED_SPACING: {
 export declare const EXPECTED_FONT_SIZES_VARS: {
     'body-1': string;
     'body-10': string;
+    'body-11': string;
     'body-2': string;
     'body-3': string;
     'body-4': string;
@@ -49,6 +50,7 @@ export declare const EXPECTED_FONT_SIZES_VARS: {
     'body-9': string;
     'brand-1': string;
     'brand-10': string;
+    'brand-11': string;
     'brand-2': string;
     'brand-3': string;
     'brand-4': string;

package/dist/tailwind/__mocks__/utils.constants.js CHANGED Viewed

@@ -39,6 +39,7 @@ export const EXPECTED_SPACING = {
 export const EXPECTED_FONT_SIZES_VARS = {
     'body-1': '3.75rem',
     'body-10': '0.875rem',
+    'body-11': '0.875rem',
     'body-2': '3.375rem',
     'body-3': '3rem',
     'body-4': '2.625rem',
@@ -49,6 +50,7 @@ export const EXPECTED_FONT_SIZES_VARS = {
     'body-9': '1rem',
     'brand-1': '3.75rem',
     'brand-10': '0.875rem',
+    'brand-11': '0.875rem',
     'brand-2': '3.375rem',
     'brand-3': '3rem',
     'brand-4': '2.625rem',

package/dist/tailwind/constants/typography.d.ts CHANGED Viewed

@@ -41,4 +41,8 @@ export declare const FONT_SIZES: {
         fontSize: string;
         lineHeight: string;
     };
+    11: {
+        fontSize: string;
+        lineHeight: string;
+    };
 };

package/dist/tailwind/constants/typography.js CHANGED Viewed

@@ -53,5 +53,9 @@ export const FONT_SIZES = {
     10: {
         fontSize: '0.875rem',
         lineHeight: 'normal'
+    },
+    11: {
+        fontSize: '0.875rem',
+        lineHeight: 'loose'
     }
 };

package/dist/tailwind/tailwind-plugin.js CHANGED Viewed

@@ -42,7 +42,8 @@ export const WestpacUIKitBasePlugin = plugin(({ addComponents , addUtilities , a
         extend: {
             lineHeight: {
                 tight: '1.2',
-                normal: '1.4'
+                normal: '1.4',
+                loose: '1.428571429'
             },
             borderWidth: {
                 5: '0.3125rem'
@@ -123,6 +124,10 @@ export const WestpacUIKitBasePlugin = plugin(({ addComponents , addUtilities , a
             10: {
                 fontSize: '0.875rem',
                 lineHeight: 'normal'
+            },
+            11: {
+                fontSize: '0.875rem',
+                lineHeight: 'loose'
             }
         },
         formControl: {

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@westpac/ui",
-  "version": "0.7.1",
+  "version": "0.8.0",
   "license": "MIT",
   "sideEffects": false,
   "type": "module",
@@ -44,7 +44,7 @@
     "!stories",
     "!vitest.setup.ts",
     "!vitest.config.ts",
-    "!**/*.{test,spec}.{ts,tsx,js,jsx}"
+    "!**/*.{test,spec,stories}.{ts,tsx,js,jsx}"
   ],
   "devDependencies": {
     "@react-types/tabs": "~3.3.0",

package/src/components/accordion/accordion.styles.ts CHANGED Viewed

@@ -5,7 +5,7 @@ export const styles = tv(
     base: 'flex flex-col border border-border text-text',
     variants: {
       rounded: {
-        true: 'overflow-hidden rounded',
+        true: 'overflow-hidden rounded-[0.1875rem]',
       },
     },
   },

package/src/components/button/button.styles.ts CHANGED Viewed

@@ -6,7 +6,7 @@ import { tv } from 'tailwind-variants';
 export const styles = tv(
   {
     slots: {
-      base: 'inline-flex items-center justify-center rounded leading-[1.5] transition-[background] disabled:pointer-events-none disabled:opacity-50 group-[.add-on-after]:rounded-l-none group-[.add-on-before]:rounded-r-none',
+      base: 'inline-flex items-center justify-center rounded-[0.1875rem] leading-[1.5] transition-[background] disabled:pointer-events-none disabled:opacity-50 group-[.add-on-after]:rounded-l-none group-[.add-on-before]:rounded-r-none',
       iconBefore: '',
       iconAfter: '',
       dropdown: 'ml-[0.4em]',

package/src/components/button-dropdown/components/panel/panel.styles.ts CHANGED Viewed

@@ -4,7 +4,7 @@ import { tv } from 'tailwind-variants';
 export const styles = tv(
   {
     slots: {
-      base: 'mt-[0.1875rem] rounded-[3px] border border-border bg-white p-2 shadow-[0_0.375rem_0.75rem_rgba(0,0,0,0.175)]',
+      base: 'mt-[0.1875rem] rounded-[0.1875rem] border border-border bg-white p-2 shadow-[0_0.375rem_0.75rem_rgba(0,0,0,0.175)]',
       dialog: '',
     },
     variants: {

package/src/components/button-group/components/button/button.styles.ts CHANGED Viewed

@@ -5,7 +5,7 @@ export const styles = tv(
     slots: {
       base: '',
       button:
-        'rounded-none hover:cursor-pointer group-first/buttons:rounded-l group-last/buttons:rounded-r group-[:not(:first-child)]/buttons:border-l-0 active-theme-rams:border-b-primary active-theme-rams:before:hidden',
+        'rounded-none hover:cursor-pointer group-first/buttons:rounded-l-[0.1875rem] group-last/buttons:rounded-r-[0.1875rem] group-[:not(:first-child)]/buttons:border-l-0 active-theme-rams:border-b-primary active-theme-rams:before:hidden',
     },
     variants: {
       isDisabled: {

package/src/components/checkbox-group/components/checkbox/checkbox.styles.ts CHANGED Viewed

@@ -8,7 +8,7 @@ export const styles = tv(
       textWrapper: 'flex flex-col justify-center',
       labelText: 'typography-body-10 py-[2px] pl-1',
       hintText: 'typography-body-10 pl-1 text-muted',
-      checkbox: 'flex shrink-0 items-center justify-center rounded border border-hero',
+      checkbox: 'flex shrink-0 items-center justify-center rounded-[0.1875rem] border border-hero',
     },
     variants: {
       isDisabled: {

package/src/components/error-message/error-message.styles.ts CHANGED Viewed

@@ -2,8 +2,9 @@ import { tv } from 'tailwind-variants';
 export const styles = tv({
   slots: {
-    base: 'typography-body-10 flex items-center text-danger',
+    base: 'typography-body-11 flex items-center text-danger',
     list: 'mb-2 flex flex-col gap-1',
-    icon: 'mr-[0.5rem] mt-[mr-0.25rem] align-top',
+    // below should be em rather than rem based on old GEL
+    icon: 'mr-[0.5em] align-top',
   },
 });

package/src/components/flexi-cell/flexi-cell.styles.ts CHANGED Viewed

@@ -10,7 +10,7 @@ export const styles = tv(
     variants: {
       withBorder: {
         true: {
-          base: 'rounded border border-borderDark',
+          base: 'rounded-[0.1875rem] border border-borderDark',
         },
         false: {},
       },

package/src/components/form/components/form-group/form-group.styles.ts CHANGED Viewed

@@ -2,7 +2,7 @@ import { tv } from 'tailwind-variants';
 export const styles = tv(
   {
-    base: '',
+    base: 'last:mb-0',
     variants: {
       inline: {
         true: 'sm:inline-block sm:align-middle',

package/src/components/form/form.component.tsx CHANGED Viewed

@@ -14,9 +14,9 @@ const FormContext = createContext<FormContextValue | null>(null);
 export const useFormContext = () => useContext(FormContext) || {};
-export function Form({ children, size = 'medium', spacing = 'medium', inline = false, ...props }: FormProps) {
+export function Form({ children, spacing = 'medium', inline = false, ...props }: FormProps) {
   return (
-    <FormContext.Provider value={{ inline, size, spacing }}>
+    <FormContext.Provider value={{ inline, spacing }}>
       <form {...props}>{children}</form>
     </FormContext.Provider>
   );

package/src/components/form/form.types.ts CHANGED Viewed

@@ -5,10 +5,6 @@ export type FormContextValue = {
    * Whether form is inline
    */
   inline?: boolean;
-  /**
-   * Size of Form
-   */
-  size?: 'small' | 'medium' | 'large';
   /**
    * Spacing of Form
    */

package/src/components/form-hint/form-hint.styles.ts CHANGED Viewed

@@ -2,7 +2,7 @@ import { tv } from 'tailwind-variants';
 export const styles = tv(
   {
-    base: 'typography-body-10 mb-2 text-muted',
+    base: 'typography-body-11 mb-2 text-muted',
     variants: {
       spacing: {
         medium: '-mt-1 mb-2',

package/src/components/form-label/form-label.styles.ts CHANGED Viewed

@@ -2,7 +2,7 @@ import { tv } from 'tailwind-variants';
 export const styles = tv(
   {
-    base: 'typography-body-9 block font-medium',
+    base: 'typography-body-9 leading-loose block font-medium',
     variants: {
       spacing: {
         medium: '',

package/src/components/pagination/components/pagination-item/pagination-item.styles.ts CHANGED Viewed

@@ -5,11 +5,11 @@ export const styles = tv(
     base: 'typography-body-10 relative block border border-border px-2 py-[0.5625rem] text-center text-text transition-colors',
     variants: {
       firstItem: {
-        true: 'rounded-l',
+        true: 'rounded-l-[0.1875rem]',
         false: 'ml-[-1px]',
       },
       lastItem: {
-        true: 'rounded-r',
+        true: 'rounded-r-[0.1875rem]',
         false: '',
       },
       active: {

package/src/components/pictogram/components/decorative/wbc-bank-card-pictogram.tsx CHANGED Viewed

@@ -1,3 +1,5 @@
+'use client';
 import { clsx } from 'clsx';
 import React from 'react';