Merge pull request #112 from WestpacGEL/fix/102-selector-font-weight-…

…of-label-responsive-padding-maybe-it-is-connected-to-flexi-cell

fix(#102): selector font weight padding

packages/ui/src/components/selector/components/selector-label/index.ts

@@ -0,0 +1 @@
+export { SelectorLabel } from './selector-label.component.js';

packages/ui/src/components/selector/components/selector-label/selector-label.component.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+import { FlexiCellLabel, FlexiCellLabelProps } from '../../../../components/flexi-cell/index.js';
+
+import { styles } from './selector-label.styles.js';
+
+export function SelectorLabel({ className, ...props }: FlexiCellLabelProps) {
+  return <FlexiCellLabel {...props} className={styles({ className })} />;
+}

packages/ui/src/components/selector/components/selector-label/selector-label.styles.ts

@@ -0,0 +1,5 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv({
+  base: 'font-medium',
+});

packages/ui/src/components/selector/selector.component.tsx

@@ -7,11 +7,11 @@ import {
   FlexiCellCircle,
   FlexiCellFooter,
   FlexiCellHint,
-  FlexiCellLabel,
 } from '../flexi-cell/components/index.js';
 
 import { SelectorCheckboxGroup, SelectorRadioGroup } from './components/index.js';
 import { SelectorCheckboxGroupOption } from './components/selector-checkbox-group/components/index.js';
+import { SelectorLabel } from './components/selector-label/index.js';
 import { SelectorRadioGroupOption } from './components/selector-radio-group/components/index.js';
 import { type SelectorProps } from './selector.types.js';
 
@@ -29,6 +29,6 @@ Selector.Body = FlexiCellBody;
 Selector.Footer = FlexiCellFooter;
 Selector.Adornment = FlexiCellAdornment;
 Selector.Hint = FlexiCellHint;
-Selector.Label = FlexiCellLabel;
+Selector.Label = SelectorLabel;
 Selector.Button = FlexiCellButton;
 Selector.Circle = FlexiCellCircle;