npm - @westpac/ui - Versions diffs - 0.27.0 → 0.28.0 - Mend

@westpac/ui 0.27.0 → 0.28.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 (88) hide show

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

@@ -3050,6 +3050,8 @@ video {
   border-width: 0;
 }.pointer-events-none {
   pointer-events: none;
+}.pointer-events-auto {
+  pointer-events: auto;
 }.visible {
   visibility: visible;
 }.static {
@@ -3186,6 +3188,8 @@ video {
   margin: 0rem;
 }.m-1 {
   margin: 0.375rem;
+}.m-auto {
+  margin: auto;
 }.-mx-1 {
   margin-left: -0.375rem;
   margin-right: -0.375rem;
@@ -3282,6 +3286,8 @@ video {
   margin-top: 0.1875rem;
 }.mt-1 {
   margin-top: 0.375rem;
+}.mt-1\.5 {
+  margin-top: 0.5625rem;
 }.mt-2 {
   margin-top: 0.75rem;
 }.mt-2\.5 {
@@ -3370,6 +3376,8 @@ video {
   height: 2.875rem;
 }.h-\[200px\] {
   height: 200px;
+}.h-\[22px\] {
+  height: 22px;
 }.h-\[24px\] {
   height: 24px;
 }.h-\[26px\] {
@@ -3388,6 +3396,8 @@ video {
   height: 41px;
 }.h-\[42px\] {
   height: 42px;
+}.h-\[43px\] {
+  height: 43px;
 }.h-\[44px\] {
   height: 44px;
 }.h-\[48px\] {
@@ -3469,6 +3479,8 @@ video {
   width: 1.81ex;
 }.w-\[10\.86ex\] {
   width: 10.86ex;
+}.w-\[105px\] {
+  width: 105px;
 }.w-\[10rem\] {
   width: 10rem;
 }.w-\[116px\] {
@@ -3767,6 +3779,8 @@ video {
   text-overflow: ellipsis;
 }.whitespace-nowrap {
   white-space: nowrap;
+}.whitespace-pre {
+  white-space: pre;
 }.whitespace-pre-wrap {
   white-space: pre-wrap;
 }.rounded {
@@ -6570,8 +6584,6 @@ video {
   }
 }@media not all and (min-width: 992px) {.max-md\:mb-7 {
     margin-bottom: 2.625rem;
-  }.max-md\:mr-1 {
-    margin-right: 0.375rem;
   }.max-md\:mt-0 {
     margin-top: 0rem;
   }.max-md\:mt-0\.5 {
@@ -6658,6 +6670,8 @@ video {
   }
 }@media (min-width: 576px) {.xsl\:pointer-events-none {
     pointer-events: none;
+  }.xsl\:pointer-events-auto {
+    pointer-events: auto;
   }.xsl\:fixed {
     position: fixed;
   }.xsl\:absolute {
@@ -6808,6 +6822,8 @@ video {
     display: inline-flex;
   }.xsl\:h-1 {
     height: 0.375rem;
+  }.xsl\:h-15 {
+    height: 5.625rem;
   }.xsl\:h-2 {
     height: 0.75rem;
   }.xsl\:h-3 {
@@ -6854,6 +6870,8 @@ video {
     width: 4.5rem;
   }.xsl\:w-14 {
     width: 5.25rem;
+  }.xsl\:w-15 {
+    width: 5.625rem;
   }.xsl\:w-2 {
     width: 0.75rem;
   }.xsl\:w-3 {
@@ -6904,6 +6922,9 @@ video {
     width: 9.05ex;
   }.xsl\:w-auto {
     width: auto;
+  }.xsl\:w-fit {
+    width: -moz-fit-content;
+    width: fit-content;
   }.xsl\:w-full {
     width: 100%;
   }.xsl\:min-w-\[11\.875rem\] {
@@ -7207,9 +7228,6 @@ video {
   }.xsl\:py-3 {
     padding-top: 1.125rem;
     padding-bottom: 1.125rem;
-  }.xsl\:py-\[0\.25rem\] {
-    padding-top: 0.25rem;
-    padding-bottom: 0.25rem;
   }.xsl\:py-\[0\.3125rem\] {
     padding-top: 0.3125rem;
     padding-bottom: 0.3125rem;
@@ -7745,6 +7763,8 @@ video {
     }
   }.sm\:pointer-events-none {
     pointer-events: none;
+  }.sm\:pointer-events-auto {
+    pointer-events: auto;
   }.sm\:fixed {
     position: fixed;
   }.sm\:absolute {
@@ -7909,6 +7929,8 @@ video {
     height: 0.375rem;
   }.sm\:h-11 {
     height: 4.125rem;
+  }.sm\:h-15 {
+    height: 5.625rem;
   }.sm\:h-2 {
     height: 0.75rem;
   }.sm\:h-3 {
@@ -7957,6 +7979,8 @@ video {
     width: 4.5rem;
   }.sm\:w-14 {
     width: 5.25rem;
+  }.sm\:w-15 {
+    width: 5.625rem;
   }.sm\:w-2 {
     width: 0.75rem;
   }.sm\:w-3 {
@@ -8007,6 +8031,9 @@ video {
     width: 9.05ex;
   }.sm\:w-auto {
     width: auto;
+  }.sm\:w-fit {
+    width: -moz-fit-content;
+    width: fit-content;
   }.sm\:w-full {
     width: 100%;
   }.sm\:min-w-\[11\.875rem\] {
@@ -8320,9 +8347,6 @@ video {
   }.sm\:py-3 {
     padding-top: 1.125rem;
     padding-bottom: 1.125rem;
-  }.sm\:py-\[0\.25rem\] {
-    padding-top: 0.25rem;
-    padding-bottom: 0.25rem;
   }.sm\:py-\[0\.3125rem\] {
     padding-top: 0.3125rem;
     padding-bottom: 0.3125rem;
@@ -8918,6 +8942,8 @@ video {
     }
   }.md\:pointer-events-none {
     pointer-events: none;
+  }.md\:pointer-events-auto {
+    pointer-events: auto;
   }.md\:fixed {
     position: fixed;
   }.md\:absolute {
@@ -9084,6 +9110,8 @@ video {
     display: none;
   }.md\:h-1 {
     height: 0.375rem;
+  }.md\:h-15 {
+    height: 5.625rem;
   }.md\:h-2 {
     height: 0.75rem;
   }.md\:h-3 {
@@ -9130,6 +9158,8 @@ video {
     width: 4.5rem;
   }.md\:w-14 {
     width: 5.25rem;
+  }.md\:w-15 {
+    width: 5.625rem;
   }.md\:w-2 {
     width: 0.75rem;
   }.md\:w-3 {
@@ -9180,6 +9210,9 @@ video {
     width: 9.05ex;
   }.md\:w-auto {
     width: auto;
+  }.md\:w-fit {
+    width: -moz-fit-content;
+    width: fit-content;
   }.md\:w-full {
     width: 100%;
   }.md\:min-w-\[11\.875rem\] {
@@ -9510,9 +9543,6 @@ video {
   }.md\:py-3 {
     padding-top: 1.125rem;
     padding-bottom: 1.125rem;
-  }.md\:py-\[0\.25rem\] {
-    padding-top: 0.25rem;
-    padding-bottom: 0.25rem;
   }.md\:py-\[0\.3125rem\] {
     padding-top: 0.3125rem;
     padding-bottom: 0.3125rem;
@@ -10101,6 +10131,8 @@ video {
     }
   }.lg\:pointer-events-none {
     pointer-events: none;
+  }.lg\:pointer-events-auto {
+    pointer-events: auto;
   }.lg\:fixed {
     position: fixed;
   }.lg\:absolute {
@@ -10251,6 +10283,8 @@ video {
     display: inline-flex;
   }.lg\:h-1 {
     height: 0.375rem;
+  }.lg\:h-15 {
+    height: 5.625rem;
   }.lg\:h-2 {
     height: 0.75rem;
   }.lg\:h-3 {
@@ -10297,6 +10331,8 @@ video {
     width: 4.5rem;
   }.lg\:w-14 {
     width: 5.25rem;
+  }.lg\:w-15 {
+    width: 5.625rem;
   }.lg\:w-2 {
     width: 0.75rem;
   }.lg\:w-3 {
@@ -10347,6 +10383,9 @@ video {
     width: 9.05ex;
   }.lg\:w-auto {
     width: auto;
+  }.lg\:w-fit {
+    width: -moz-fit-content;
+    width: fit-content;
   }.lg\:w-full {
     width: 100%;
   }.lg\:min-w-\[11\.875rem\] {
@@ -10663,9 +10702,6 @@ video {
   }.lg\:py-3 {
     padding-top: 1.125rem;
     padding-bottom: 1.125rem;
-  }.lg\:py-\[0\.25rem\] {
-    padding-top: 0.25rem;
-    padding-bottom: 0.25rem;
   }.lg\:py-\[0\.3125rem\] {
     padding-top: 0.3125rem;
     padding-bottom: 0.3125rem;
@@ -11227,6 +11263,8 @@ video {
     }
   }.xl\:pointer-events-none {
     pointer-events: none;
+  }.xl\:pointer-events-auto {
+    pointer-events: auto;
   }.xl\:fixed {
     position: fixed;
   }.xl\:absolute {
@@ -11372,6 +11410,8 @@ video {
     display: inline-flex;
   }.xl\:h-1 {
     height: 0.375rem;
+  }.xl\:h-15 {
+    height: 5.625rem;
   }.xl\:h-2 {
     height: 0.75rem;
   }.xl\:h-3 {
@@ -11418,6 +11458,8 @@ video {
     width: 4.5rem;
   }.xl\:w-14 {
     width: 5.25rem;
+  }.xl\:w-15 {
+    width: 5.625rem;
   }.xl\:w-2 {
     width: 0.75rem;
   }.xl\:w-3 {
@@ -11468,6 +11510,9 @@ video {
     width: 9.05ex;
   }.xl\:w-auto {
     width: auto;
+  }.xl\:w-fit {
+    width: -moz-fit-content;
+    width: fit-content;
   }.xl\:w-full {
     width: 100%;
   }.xl\:min-w-\[11\.875rem\] {
@@ -11766,9 +11811,6 @@ video {
   }.xl\:py-3 {
     padding-top: 1.125rem;
     padding-bottom: 1.125rem;
-  }.xl\:py-\[0\.25rem\] {
-    padding-top: 0.25rem;
-    padding-bottom: 0.25rem;
   }.xl\:py-\[0\.3125rem\] {
     padding-top: 0.3125rem;
     padding-bottom: 0.3125rem;

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

@@ -3050,6 +3050,8 @@ video {
   border-width: 0;
 }.pointer-events-none {
   pointer-events: none;
+}.pointer-events-auto {
+  pointer-events: auto;
 }.visible {
   visibility: visible;
 }.static {
@@ -3186,6 +3188,8 @@ video {
   margin: 0rem;
 }.m-1 {
   margin: 0.375rem;
+}.m-auto {
+  margin: auto;
 }.-mx-1 {
   margin-left: -0.375rem;
   margin-right: -0.375rem;
@@ -3282,6 +3286,8 @@ video {
   margin-top: 0.1875rem;
 }.mt-1 {
   margin-top: 0.375rem;
+}.mt-1\.5 {
+  margin-top: 0.5625rem;
 }.mt-2 {
   margin-top: 0.75rem;
 }.mt-2\.5 {
@@ -3370,6 +3376,8 @@ video {
   height: 2.875rem;
 }.h-\[200px\] {
   height: 200px;
+}.h-\[22px\] {
+  height: 22px;
 }.h-\[24px\] {
   height: 24px;
 }.h-\[26px\] {
@@ -3388,6 +3396,8 @@ video {
   height: 41px;
 }.h-\[42px\] {
   height: 42px;
+}.h-\[43px\] {
+  height: 43px;
 }.h-\[44px\] {
   height: 44px;
 }.h-\[48px\] {
@@ -3469,6 +3479,8 @@ video {
   width: 1.81ex;
 }.w-\[10\.86ex\] {
   width: 10.86ex;
+}.w-\[105px\] {
+  width: 105px;
 }.w-\[10rem\] {
   width: 10rem;
 }.w-\[116px\] {
@@ -3767,6 +3779,8 @@ video {
   text-overflow: ellipsis;
 }.whitespace-nowrap {
   white-space: nowrap;
+}.whitespace-pre {
+  white-space: pre;
 }.whitespace-pre-wrap {
   white-space: pre-wrap;
 }.rounded {
@@ -6570,8 +6584,6 @@ video {
   }
 }@media not all and (min-width: 992px) {.max-md\:mb-7 {
     margin-bottom: 2.625rem;
-  }.max-md\:mr-1 {
-    margin-right: 0.375rem;
   }.max-md\:mt-0 {
     margin-top: 0rem;
   }.max-md\:mt-0\.5 {
@@ -6658,6 +6670,8 @@ video {
   }
 }@media (min-width: 576px) {.xsl\:pointer-events-none {
     pointer-events: none;
+  }.xsl\:pointer-events-auto {
+    pointer-events: auto;
   }.xsl\:fixed {
     position: fixed;
   }.xsl\:absolute {
@@ -6808,6 +6822,8 @@ video {
     display: inline-flex;
   }.xsl\:h-1 {
     height: 0.375rem;
+  }.xsl\:h-15 {
+    height: 5.625rem;
   }.xsl\:h-2 {
     height: 0.75rem;
   }.xsl\:h-3 {
@@ -6854,6 +6870,8 @@ video {
     width: 4.5rem;
   }.xsl\:w-14 {
     width: 5.25rem;
+  }.xsl\:w-15 {
+    width: 5.625rem;
   }.xsl\:w-2 {
     width: 0.75rem;
   }.xsl\:w-3 {
@@ -6904,6 +6922,9 @@ video {
     width: 9.05ex;
   }.xsl\:w-auto {
     width: auto;
+  }.xsl\:w-fit {
+    width: -moz-fit-content;
+    width: fit-content;
   }.xsl\:w-full {
     width: 100%;
   }.xsl\:min-w-\[11\.875rem\] {
@@ -7207,9 +7228,6 @@ video {
   }.xsl\:py-3 {
     padding-top: 1.125rem;
     padding-bottom: 1.125rem;
-  }.xsl\:py-\[0\.25rem\] {
-    padding-top: 0.25rem;
-    padding-bottom: 0.25rem;
   }.xsl\:py-\[0\.3125rem\] {
     padding-top: 0.3125rem;
     padding-bottom: 0.3125rem;
@@ -7745,6 +7763,8 @@ video {
     }
   }.sm\:pointer-events-none {
     pointer-events: none;
+  }.sm\:pointer-events-auto {
+    pointer-events: auto;
   }.sm\:fixed {
     position: fixed;
   }.sm\:absolute {
@@ -7909,6 +7929,8 @@ video {
     height: 0.375rem;
   }.sm\:h-11 {
     height: 4.125rem;
+  }.sm\:h-15 {
+    height: 5.625rem;
   }.sm\:h-2 {
     height: 0.75rem;
   }.sm\:h-3 {
@@ -7957,6 +7979,8 @@ video {
     width: 4.5rem;
   }.sm\:w-14 {
     width: 5.25rem;
+  }.sm\:w-15 {
+    width: 5.625rem;
   }.sm\:w-2 {
     width: 0.75rem;
   }.sm\:w-3 {
@@ -8007,6 +8031,9 @@ video {
     width: 9.05ex;
   }.sm\:w-auto {
     width: auto;
+  }.sm\:w-fit {
+    width: -moz-fit-content;
+    width: fit-content;
   }.sm\:w-full {
     width: 100%;
   }.sm\:min-w-\[11\.875rem\] {
@@ -8320,9 +8347,6 @@ video {
   }.sm\:py-3 {
     padding-top: 1.125rem;
     padding-bottom: 1.125rem;
-  }.sm\:py-\[0\.25rem\] {
-    padding-top: 0.25rem;
-    padding-bottom: 0.25rem;
   }.sm\:py-\[0\.3125rem\] {
     padding-top: 0.3125rem;
     padding-bottom: 0.3125rem;
@@ -8918,6 +8942,8 @@ video {
     }
   }.md\:pointer-events-none {
     pointer-events: none;
+  }.md\:pointer-events-auto {
+    pointer-events: auto;
   }.md\:fixed {
     position: fixed;
   }.md\:absolute {
@@ -9084,6 +9110,8 @@ video {
     display: none;
   }.md\:h-1 {
     height: 0.375rem;
+  }.md\:h-15 {
+    height: 5.625rem;
   }.md\:h-2 {
     height: 0.75rem;
   }.md\:h-3 {
@@ -9130,6 +9158,8 @@ video {
     width: 4.5rem;
   }.md\:w-14 {
     width: 5.25rem;
+  }.md\:w-15 {
+    width: 5.625rem;
   }.md\:w-2 {
     width: 0.75rem;
   }.md\:w-3 {
@@ -9180,6 +9210,9 @@ video {
     width: 9.05ex;
   }.md\:w-auto {
     width: auto;
+  }.md\:w-fit {
+    width: -moz-fit-content;
+    width: fit-content;
   }.md\:w-full {
     width: 100%;
   }.md\:min-w-\[11\.875rem\] {
@@ -9510,9 +9543,6 @@ video {
   }.md\:py-3 {
     padding-top: 1.125rem;
     padding-bottom: 1.125rem;
-  }.md\:py-\[0\.25rem\] {
-    padding-top: 0.25rem;
-    padding-bottom: 0.25rem;
   }.md\:py-\[0\.3125rem\] {
     padding-top: 0.3125rem;
     padding-bottom: 0.3125rem;
@@ -10101,6 +10131,8 @@ video {
     }
   }.lg\:pointer-events-none {
     pointer-events: none;
+  }.lg\:pointer-events-auto {
+    pointer-events: auto;
   }.lg\:fixed {
     position: fixed;
   }.lg\:absolute {
@@ -10251,6 +10283,8 @@ video {
     display: inline-flex;
   }.lg\:h-1 {
     height: 0.375rem;
+  }.lg\:h-15 {
+    height: 5.625rem;
   }.lg\:h-2 {
     height: 0.75rem;
   }.lg\:h-3 {
@@ -10297,6 +10331,8 @@ video {
     width: 4.5rem;
   }.lg\:w-14 {
     width: 5.25rem;
+  }.lg\:w-15 {
+    width: 5.625rem;
   }.lg\:w-2 {
     width: 0.75rem;
   }.lg\:w-3 {
@@ -10347,6 +10383,9 @@ video {
     width: 9.05ex;
   }.lg\:w-auto {
     width: auto;
+  }.lg\:w-fit {
+    width: -moz-fit-content;
+    width: fit-content;
   }.lg\:w-full {
     width: 100%;
   }.lg\:min-w-\[11\.875rem\] {
@@ -10663,9 +10702,6 @@ video {
   }.lg\:py-3 {
     padding-top: 1.125rem;
     padding-bottom: 1.125rem;
-  }.lg\:py-\[0\.25rem\] {
-    padding-top: 0.25rem;
-    padding-bottom: 0.25rem;
   }.lg\:py-\[0\.3125rem\] {
     padding-top: 0.3125rem;
     padding-bottom: 0.3125rem;
@@ -11227,6 +11263,8 @@ video {
     }
   }.xl\:pointer-events-none {
     pointer-events: none;
+  }.xl\:pointer-events-auto {
+    pointer-events: auto;
   }.xl\:fixed {
     position: fixed;
   }.xl\:absolute {
@@ -11372,6 +11410,8 @@ video {
     display: inline-flex;
   }.xl\:h-1 {
     height: 0.375rem;
+  }.xl\:h-15 {
+    height: 5.625rem;
   }.xl\:h-2 {
     height: 0.75rem;
   }.xl\:h-3 {
@@ -11418,6 +11458,8 @@ video {
     width: 4.5rem;
   }.xl\:w-14 {
     width: 5.25rem;
+  }.xl\:w-15 {
+    width: 5.625rem;
   }.xl\:w-2 {
     width: 0.75rem;
   }.xl\:w-3 {
@@ -11468,6 +11510,9 @@ video {
     width: 9.05ex;
   }.xl\:w-auto {
     width: auto;
+  }.xl\:w-fit {
+    width: -moz-fit-content;
+    width: fit-content;
   }.xl\:w-full {
     width: 100%;
   }.xl\:min-w-\[11\.875rem\] {
@@ -11766,9 +11811,6 @@ video {
   }.xl\:py-3 {
     padding-top: 1.125rem;
     padding-bottom: 1.125rem;
-  }.xl\:py-\[0\.25rem\] {
-    padding-top: 0.25rem;
-    padding-bottom: 0.25rem;
   }.xl\:py-\[0\.3125rem\] {
     padding-top: 0.3125rem;
     padding-bottom: 0.3125rem;

package/dist/tailwind/themes/btpl.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import { type BrandConfig } from '../index.js';
2	+ export declare const theme: BrandConfig;

package/dist/tailwind/themes/btpl.js ADDED Viewed

@@ -0,0 +1,30 @@
+import { generateColorTints } from '../utils/generate-color-tints.js';
+export const theme = {
+    code: 'BTPL',
+    colors: {
+        ...generateColorTints({
+            background: '#F5F5F5',
+            border: '#D9D9D9',
+            heading: '#171717',
+            hero: '#00345A',
+            light: '#F9F9F9',
+            link: '#006DBC',
+            muted: '#666666',
+            neutral: '#2A2E42',
+            pop: '#672993',
+            primary: '#006DBC',
+            text: '#171717',
+            borderDark: '#949494',
+            focus: '#B470D7'
+        }),
+        pictogram: {
+            dark: '#00345A',
+            duo: {
+                highlight: '#006DBC',
+                outline: '#00345A'
+            }
+        }
+    },
+    brandFont: '',
+    name: 'BT Panorama'
+};

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@westpac/ui",
-  "version": "0.27.0",
+  "version": "0.28.0",
   "license": "MIT",
   "sideEffects": false,
   "type": "module",
@@ -258,8 +258,8 @@
     "vite": "^5.2.12",
     "vitest": "^0.30.1",
     "@westpac/test-config": "~0.0.0",
-    "@westpac/eslint-config": "~0.4.0",
-    "@westpac/ts-config": "~0.0.0"
+    "@westpac/ts-config": "~0.0.0",
+    "@westpac/eslint-config": "~0.4.0"
   },
   "dependencies": {
     "@duetds/date-picker": "~1.4.0",

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

@@ -6,7 +6,7 @@ export const styles = tv(
       base: 'typography-body-10 relative mb-4 xsl:flex',
       icon: 'float-left flex-none',
       body: 'relative flex-1 overflow-hidden xsl:top-[0.125rem] [&_a]:underline',
-      heading: 'typography-body-9 mb-2 font-bold',
+      heading: 'typography-body-9 mb-1 font-bold',
       close: 'absolute right-0.5 top-0.5 p-1 hover:opacity-80',
     },
     variants: {

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

@@ -101,16 +101,6 @@ export function Autocomplete<T extends object>({
     searchProps.value.length,
   ]);
-  const iconSize = useMemo(() => {
-    switch (size) {
-      case 'small':
-      case 'medium':
-        return 'small';
-      default:
-        return 'medium';
-    }
-  }, [size]);
   return (
     <div className={styles.base({ className })}>
       {props.label && <Label {...labelProps}>{props.label}</Label>}
@@ -120,9 +110,9 @@ export function Autocomplete<T extends object>({
       <div ref={outerRef} className={styles.outerWrapper()}>
         <div className={styles.iconWrapper()}>
           {loadingState ? (
-            <ProgressIndicator size={iconSize} color="muted" />
+            <ProgressIndicator size="small" color="muted" />
           ) : (
-            <SearchIcon aria-hidden size={iconSize} color="muted" />
+            <SearchIcon aria-hidden size="small" color="muted" />
           )}
         </div>
         <input

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

@@ -2,7 +2,7 @@ import { tv } from 'tailwind-variants';
 export const styles = tv(
   {
-    base: 'inline-block whitespace-nowrap border text-center',
+    base: 'inline-block w-fit whitespace-nowrap border text-center',
     variants: {
       color: {
         danger: 'border-danger bg-danger text-white',
@@ -24,7 +24,7 @@ export const styles = tv(
         'warning-inverted': 'border-none bg-white text-warning',
       },
       type: {
-        pill: 'typography-body-10 h-4 rounded-xl px-[0.4375rem] py-[0.25rem] font-medium leading-none',
+        pill: 'typography-body-10 flex h-4 w-fit items-center rounded-xl px-[0.4375rem] font-medium leading-none',
         default: 'h-[1.25rem] rounded-sm px-1 text-[0.75rem] leading-[1.125rem]',
       },
       soft: {