From 29ddfa5ffa7091b4dee3724f7c12dfe66575915b Mon Sep 17 00:00:00 2001
From: Kenji Shiroma <kenjishiromajp@gmail.com>
Date: Wed, 11 Oct 2023 15:35:00 +1000
Subject: [PATCH] fix(#102): selector font weight padding

---
 .../selector/components/selector-label/index.ts          | 1 +
 .../selector-label/selector-label.component.tsx          | 9 +++++++++
 .../components/selector-label/selector-label.styles.ts   | 5 +++++
 .../ui/src/components/selector/selector.component.tsx    | 4 ++--
 4 files changed, 17 insertions(+), 2 deletions(-)
 create mode 100644 packages/ui/src/components/selector/components/selector-label/index.ts
 create mode 100644 packages/ui/src/components/selector/components/selector-label/selector-label.component.tsx
 create mode 100644 packages/ui/src/components/selector/components/selector-label/selector-label.styles.ts

diff --git a/packages/ui/src/components/selector/components/selector-label/index.ts b/packages/ui/src/components/selector/components/selector-label/index.ts
new file mode 100644
index 000000000..6d4937b2e
--- /dev/null
+++ b/packages/ui/src/components/selector/components/selector-label/index.ts
@@ -0,0 +1 @@
+export { SelectorLabel } from './selector-label.component.js';
diff --git a/packages/ui/src/components/selector/components/selector-label/selector-label.component.tsx b/packages/ui/src/components/selector/components/selector-label/selector-label.component.tsx
new file mode 100644
index 000000000..0f0c08cf8
--- /dev/null
+++ b/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 })} />;
+}
diff --git a/packages/ui/src/components/selector/components/selector-label/selector-label.styles.ts b/packages/ui/src/components/selector/components/selector-label/selector-label.styles.ts
new file mode 100644
index 000000000..493a73e2b
--- /dev/null
+++ b/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',
+});
diff --git a/packages/ui/src/components/selector/selector.component.tsx b/packages/ui/src/components/selector/selector.component.tsx
index 030dc5180..bcc579721 100644
--- a/packages/ui/src/components/selector/selector.component.tsx
+++ b/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;