uikit-react-public 0.39.0 → 0.40.0

package/lib/components/Header/Header.tsx

@@ -37,10 +37,10 @@ const Header = ({
   ...props
 }: HeaderProps) => {
   const [theme] = useTheme();
+  const headerTitle = theme.typography.heading.lg.md;
 
   const baseStyle = css`
     background-color: ${theme.colour.surface.default};
-    font-family: ${theme.font.family.primary};
     font-synthesis: none;
     text-rendering: optimizeLegibility;
     -webkit-font-smoothing: antialiased;
@@ -84,8 +84,11 @@ const Header = ({
   const titleBaseStyle = css`
     display: none;
     margin: 0;
-    font-size: ${theme.font.size.f18};
-    font-weight: 700;
+    font-family: ${headerTitle.fontFamily};
+    font-feature-settings: ${headerTitle.fontSettings};
+    font-size: ${headerTitle.fontSize}px;
+    font-weight: ${headerTitle.fontWeight};
+    line-height: ${headerTitle.lineHeight}%;
     text-align: center;
 
     @media (min-width: ${theme.breakpoints.desktop}px) {

package/lib/components/Header/__tests__/__snapshots__/Header.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`Header > snapshot: variant=avatar 1`] = `
 <header
-  class="ucl-uikit-header css-u33frp"
+  class="ucl-uikit-header css-ijdzc5"
   data-testid="ucl-uikit-header"
 >
   <svg
@@ -21,7 +21,7 @@ exports[`Header > snapshot: variant=avatar 1`] = `
     />
   </svg>
   <div
-    class="css-bwc2r5"
+    class="css-2877v"
   >
     LIDS
   </div>
@@ -30,7 +30,7 @@ exports[`Header > snapshot: variant=avatar 1`] = `
 
 exports[`Header > snapshot: variant=breadcrumbs 1`] = `
 <header
-  class="ucl-uikit-header css-u33frp"
+  class="ucl-uikit-header css-ijdzc5"
   data-testid="ucl-uikit-header"
 >
   <svg
@@ -49,7 +49,7 @@ exports[`Header > snapshot: variant=breadcrumbs 1`] = `
     />
   </svg>
   <div
-    class="css-bwc2r5"
+    class="css-2877v"
   >
     LIDS
   </div>

package/lib/components/HeaderNew/Header.tsx

@@ -37,7 +37,6 @@ const Header = ({
   const baseStyle = css`
     position: relative;
     background-color: ${theme.colour.surface.primary};
-    font-family: ${theme.font.family.primary};
     font-synthesis: none;
     text-rendering: optimizeLegibility;
     -webkit-font-smoothing: antialiased;

package/lib/components/HeaderNew/__tests__/__snapshots__/Header.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`Header > snapshot: variant=avatar 1`] = `
 <header
-  class="ucl-uikit-header css-1nmwv3y"
+  class="ucl-uikit-header css-bf9n73"
   data-testid="ucl-uikit-header"
 >
   <div
@@ -41,7 +41,7 @@ exports[`Header > snapshot: variant=avatar 1`] = `
 
 exports[`Header > snapshot: variant=breadcrumbs 1`] = `
 <header
-  class="ucl-uikit-header css-1nmwv3y"
+  class="ucl-uikit-header css-bf9n73"
   data-testid="ucl-uikit-header"
 >
   <div

package/lib/components/Input/Input.tsx

@@ -41,6 +41,7 @@ const Input = forwardRef<Ref, InputProps>(
     ref
   ) => {
     const [theme] = useTheme();
+    const { md } = theme.typography.body;
 
     const { disabled: contextDisabled, id: contextId } = use(FieldContext);
     const disabled = props.disabled ?? contextDisabled;
@@ -50,10 +51,12 @@ const Input = forwardRef<Ref, InputProps>(
       height: 48px;
       width: 100%;
       padding: 0 ${theme.padding.p16};
-      line-height: ${theme.padding.p48};
+      line-height: ${md.lineHeight}%;
       box-sizing: border-box;
-      font-family: ${theme.font.family.primary};
-      font-size: ${theme.font.size.f16};
+      font-family: ${md.fontFamily};
+      font-feature-settings: ${md.fontSettings};
+      font-size: ${md.fontSize}px;
+      font-weight: ${md.fontWeight};
       color: ${theme.colour.text.default};
       background-color: ${theme.colour.fill.inverse};
       border: ${theme.border.b1} solid ${theme.colour.speciality.inputDefault};

package/lib/components/Input/__tests__/__snapshots__/Input.test.tsx.snap

@@ -5,7 +5,7 @@ exports[`Input > snapshot: no props 1`] = `
   class="ucl-uikit-input css-1bpb1dw"
 >
   <input
-    class="ucl-uikit-input__input css-1i2w3yn"
+    class="ucl-uikit-input__input css-10ijqev"
     data-testid="ucl-uikit-input"
     id=""
   />
@@ -17,7 +17,7 @@ exports[`Input > snapshot: placeholder prop 1`] = `
   class="ucl-uikit-input css-1bpb1dw"
 >
   <input
-    class="ucl-uikit-input__input css-1i2w3yn"
+    class="ucl-uikit-input__input css-10ijqev"
     data-testid="ucl-uikit-input"
     id=""
     placeholder="Type your value..."
@@ -30,7 +30,7 @@ exports[`Input > snapshot: testId prop 1`] = `
   class="ucl-uikit-input css-1bpb1dw"
 >
   <input
-    class="ucl-uikit-input__input css-1i2w3yn"
+    class="ucl-uikit-input__input css-10ijqev"
     data-testid="test123"
     id=""
   />
@@ -42,7 +42,7 @@ exports[`Input > snapshot: value prop 1`] = `
   class="ucl-uikit-input css-1bpb1dw"
 >
   <input
-    class="ucl-uikit-input__input css-1i2w3yn"
+    class="ucl-uikit-input__input css-10ijqev"
     data-testid="ucl-uikit-input"
     id=""
     value="abc"

package/lib/components/Label/Label.tsx

@@ -40,24 +40,24 @@ const Label = forwardRef<Ref, LabelProps>(
     disabled = disabled ?? contextDisabled;
     optional = optional ?? contextOptional;
     const htmlFor = props.htmlFor ?? contextId;
+    const { md, mdSemibold } = theme.typography.body;
 
     const baseStyle = css`
       width: 100%;
       color: ${theme.colour.text.default};
-      font-family: ${theme.font.family.primary};
-      font-size: ${theme.font.size.f16};
+      font-family: ${mdSemibold.fontFamily};
+      font-feature-settings: ${mdSemibold.fontSettings};
+      font-size: ${mdSemibold.fontSize}px;
+      font-weight: ${mdSemibold.fontWeight};
+      line-height: ${mdSemibold.lineHeight}%;
     `;
 
     const blockStyle = css`
       display: block;
-      font-weight: ${theme.font.weight.bold};
-      line-height: ${theme.font.lineHeight.h140};
     `;
 
     const inlineStyle = css`
       display: inline;
-      font-weight: ${theme.font.weight.regular};
-      line-height: ${theme.font.lineHeight.h150};
     `;
 
     const disabledStyle = css`
@@ -75,7 +75,7 @@ const Label = forwardRef<Ref, LabelProps>(
     );
 
     const optionalStyle = css`
-      font-weight: ${theme.font.weight.regular};
+      font-weight: ${md.fontWeight};
       font-style: italic;
     `;
 

package/lib/components/Label/__tests__/__snapshots__/Label.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`Label > snapshot: Only required prop (text) 1`] = `
 <label
-  class="ucl-uikit-label css-116lyj5"
+  class="ucl-uikit-label css-1dwdez8"
   data-testid="ucl-uikit-label"
   for=""
 >
@@ -12,7 +12,7 @@ exports[`Label > snapshot: Only required prop (text) 1`] = `
 
 exports[`Label > snapshot: className prop 1`] = `
 <label
-  class="ucl-uikit-label test-class-name css-116lyj5"
+  class="ucl-uikit-label test-class-name css-1dwdez8"
   data-testid="ucl-uikit-label"
   for=""
 >
@@ -22,7 +22,7 @@ exports[`Label > snapshot: className prop 1`] = `
 
 exports[`Label > snapshot: testId prop 1`] = `
 <label
-  class="ucl-uikit-label css-116lyj5"
+  class="ucl-uikit-label css-1dwdez8"
   data-testid="test123"
   for=""
 >
@@ -32,7 +32,7 @@ exports[`Label > snapshot: testId prop 1`] = `
 
 exports[`Label > snapshot: type prop with explicit block value 1`] = `
 <label
-  class="ucl-uikit-label css-116lyj5"
+  class="ucl-uikit-label css-1dwdez8"
   data-testid="ucl-uikit-label"
   for=""
 >
@@ -42,7 +42,7 @@ exports[`Label > snapshot: type prop with explicit block value 1`] = `
 
 exports[`Label > snapshot: type prop with inline value 1`] = `
 <label
-  class="ucl-uikit-label css-11raiub"
+  class="ucl-uikit-label css-6919uo"
   data-testid="ucl-uikit-label"
   for=""
 >
@@ -52,7 +52,7 @@ exports[`Label > snapshot: type prop with inline value 1`] = `
 
 exports[`Label > snapshot: with disabled prop 1`] = `
 <label
-  class="ucl-uikit-label css-h3b4e6"
+  class="ucl-uikit-label css-w430a2"
   data-testid="ucl-uikit-label"
   for=""
 >
@@ -62,7 +62,7 @@ exports[`Label > snapshot: with disabled prop 1`] = `
 
 exports[`Label > snapshot: with optional prop 1`] = `
 <label
-  class="ucl-uikit-label css-116lyj5"
+  class="ucl-uikit-label css-1dwdez8"
   data-testid="ucl-uikit-label"
   for=""
 >

package/lib/components/Link/BaseLink.tsx

@@ -9,11 +9,8 @@ import React, {
   useCallback,
 } from 'react';
 import { css, cx } from '@emotion/css';
-import { tokens } from 'design-system-foundations-public';
 import useTheme from '../../theme/useTheme';
 
-const { sans } = tokens.primitives.font.family;
-
 type AnchorishProps = {
   href?: string;
   onClick?: React.MouseEventHandler;
@@ -71,6 +68,8 @@ const BaseLink = forwardRef(function BaseLinkInner(
   ref: React.Ref<Element>
 ) {
   const [theme] = useTheme();
+  const { md, sm } = theme.typography.body;
+  const typography = size === 'small' ? sm : md;
   const Component = (component || 'a') as ElementType;
   const anchorProps = isAnchorProps(props) ? props : {};
   const { href, onClick, ...rest } = anchorProps;
@@ -87,8 +86,11 @@ const BaseLink = forwardRef(function BaseLinkInner(
   );
 
   const baseStyle = css`
-    font-family: ${sans.$value.family};
-    font-size: ${theme.font.size.f16};
+    font-family: ${typography.fontFamily};
+    font-feature-settings: ${typography.fontSettings};
+    font-size: ${typography.fontSize}px;
+    font-weight: ${typography.fontWeight};
+    line-height: ${typography.lineHeight}%;
 
     &:focus-visible {
       outline: none;
@@ -96,10 +98,6 @@ const BaseLink = forwardRef(function BaseLinkInner(
     }
   `;
 
-  const smallStyle = css`
-    font-size: ${theme.font.size.f14};
-  `;
-
   const disabledStyle = css`
     cursor: not-allowed;
     color: ${theme.colour.link.disabled};
@@ -110,13 +108,7 @@ const BaseLink = forwardRef(function BaseLinkInner(
     }
   `;
 
-  const style = cx(
-    NAME,
-    baseStyle,
-    size === 'small' && smallStyle,
-    disabled && disabledStyle,
-    className
-  );
+  const style = cx(NAME, baseStyle, disabled && disabledStyle, className);
 
   if (asChild) {
     const child = Children.only(children) as ReactElement<

package/lib/components/Link/__tests__/__snapshots__/link.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`Link > snapshot: no props 1`] = `
 <a
-  class="ucl-uikit-base-link ucl-uikit-link css-3wlbgk"
+  class="ucl-uikit-base-link ucl-uikit-link css-1s4qhyd"
   data-testid="ucl-uikit-link"
 >
   test
@@ -11,7 +11,7 @@ exports[`Link > snapshot: no props 1`] = `
 
 exports[`Link > snapshot: testId prop 1`] = `
 <a
-  class="ucl-uikit-base-link ucl-uikit-link css-3wlbgk"
+  class="ucl-uikit-base-link ucl-uikit-link css-1s4qhyd"
   data-testid="test123"
 >
    testidlink 

package/lib/components/Menu/Menu.tsx

@@ -1,6 +1,5 @@
 import { HTMLAttributes, memo } from 'react';
 import { css, cx } from '@emotion/css';
-import { useTheme } from '../../theme';
 import MenuProvider from './Menu.context';
 import MenuContent from './MenuContent';
 import MenuItem from './MenuItem';
@@ -27,11 +26,8 @@ const Menu = ({
   className,
   ...props
 }: MenuProps) => {
-  const [theme] = useTheme();
-
   const baseStyle = css`
     position: relative;
-    font-family: ${theme.font.family.primary};
   `;
 
   const style = cx(NAME, baseStyle, className);

package/lib/components/Menu/MenuItem.tsx

@@ -24,17 +24,19 @@ const MenuItem: React.FC<MenuItemProps> = ({
 }) => {
   const isClickable = !!onClick;
   const [theme] = useTheme();
+  const { mdSemibold, sm } = theme.typography.body;
+  const typography = secondary ? sm : mdSemibold;
 
   const baseStyle = css`
     height: 40px;
     margin-bottom: ${theme.margin.m16};
     display: flex;
     align-items: center;
-    font-family: ${theme.font.family.primary};
-    font-size: ${theme.font.size.f16};
-    font-weight: ${
-      secondary ? `${theme.font.weight.medium}` : `${theme.font.weight.bold}`
-    };
+    font-family: ${typography.fontFamily};
+    font-feature-settings: ${typography.fontSettings};
+    font-size: ${typography.fontSize}px;
+    font-weight: ${typography.fontWeight};
+    line-height: ${typography.lineHeight}%;
     color: ${theme.colour.text.secondary};
   `;
 

package/lib/components/Search/__tests__/__snapshots__/Search.test.tsx.snap

@@ -8,7 +8,7 @@ exports[`Search > snapshot: no props 1`] = `
     class="ucl-uikit-input css-1bpb1dw"
   >
     <input
-      class="ucl-uikit-input__input css-1g04erc"
+      class="ucl-uikit-input__input css-1jgqttg"
       data-testid="ucl-uikit-search"
       id=""
       placeholder=""
@@ -87,7 +87,7 @@ exports[`Search > snapshot: testId prop 1`] = `
     class="ucl-uikit-input css-1bpb1dw"
   >
     <input
-      class="ucl-uikit-input__input css-1g04erc"
+      class="ucl-uikit-input__input css-1jgqttg"
       data-testid="test123"
       id=""
       placeholder=""

package/lib/components/Select/__tests__/__snapshots__/Select.test.tsx.snap

@@ -4,13 +4,13 @@ exports[`Select > Snapshot: default 1`] = `
 <div
   aria-expanded="false"
   aria-haspopup="listbox"
-  class="ucl-uikit-select css-a6n340"
+  class="ucl-uikit-select css-1kou9w2"
   data-testid="ucl-uikit-select"
   role="combobox"
   tabindex="0"
 >
   <div
-    class="ucl-uikit-select__visible-field css-4o4quu"
+    class="ucl-uikit-select__visible-field css-1xmh36a"
     data-testid="ucl-uikit-select__visible-field"
   >
     <span

package/lib/components/Select/subcomponents/CustomOption.tsx

@@ -28,6 +28,7 @@ const CustomOption = <T extends string | number>({
       });
     }
   }, [isSelected]);
+  const { md } = theme.typography.body;
 
   const handleClick = (event: React.MouseEvent<HTMLDivElement>) => {
     onSelect(event, value, optionIndex);
@@ -45,9 +46,11 @@ const CustomOption = <T extends string | number>({
     min-height: 40px;
     box-sizing: border-box;
     padding: ${theme.padding.p8} ${theme.padding.p16};
-    font-family: ${theme.font.family.primary};
-    font-size: ${theme.font.size.f16};
-    line-height: ${theme.font.lineHeight.h140};
+    font-family: ${md.fontFamily};
+    font-feature-settings: ${md.fontSettings};
+    font-size: ${md.fontSize}px;
+    font-weight: ${md.fontWeight};
+    line-height: ${md.lineHeight}%;
     background-color: ${theme.colour.fill.inverse};
     overflow: hidden;
 

package/lib/components/Select/subcomponents/CustomSelect.tsx

@@ -585,6 +585,7 @@ const CustomSelect = <T extends string | number>({
       if (filterInputRef.current) filterInputRef.current.focus();
     }
   };
+  const { md } = theme.typography.body;
 
   const baseStyle = css`
     display: inline-flex;
@@ -599,8 +600,11 @@ const CustomSelect = <T extends string | number>({
     padding: 0 16px;
     background-color: ${theme.colour.fill.inverse};
     color: ${theme.colour.text.default};
-    font-family: ${theme.font.family.primary};
-    font-size: ${theme.font.size.f16};
+    font-family: ${md.fontFamily};
+    font-feature-settings: ${md.fontSettings};
+    font-size: ${md.fontSize}px;
+    font-weight: ${md.fontWeight};
+    line-height: ${md.lineHeight}%;
     border: ${theme.border.b1} solid ${theme.colour.speciality.inputDefault};
     cursor: pointer;
     user-select: none;

package/lib/components/Select/subcomponents/NativeSelect.tsx

@@ -32,13 +32,16 @@ const NativeSelect = ({
     ? theme.colour.icon.disabled
     : theme.colour.icon.default;
   const chevronDownSvg = chevronDownSvgDataUri(chevronColour);
+  const { md } = theme.typography.body;
 
   const baseStyle = css`
     padding: 0 ${theme.padding.p40} 0 ${theme.padding.p16};
     height: ${theme.padding.p48};
-    line-height: ${theme.font.lineHeight.h150};
-    font-family: ${theme.font.family.primary};
-    font-size: ${theme.font.size.f16};
+    font-family: ${md.fontFamily};
+    font-feature-settings: ${md.fontSettings};
+    font-size: ${md.fontSize}px;
+    font-weight: ${md.fontWeight};
+    line-height: ${md.lineHeight}%;
     background-color: ${theme.colour.fill.inverse};
     border: ${theme.border.b1} solid ${theme.colour.border.secondary};
     color: ${theme.colour.text.default};

package/lib/components/Select/subcomponents/VisibleField.tsx

@@ -33,6 +33,7 @@ const VisibleField = <T extends string | number>({
   children,
 }: VisibleFieldProps<T>) => {
   const [theme] = useTheme();
+  const { md } = theme.typography.body;
 
   const baseStyle = css`
     display: flex;
@@ -40,7 +41,11 @@ const VisibleField = <T extends string | number>({
     justify-content: space-between;
     gap: 8px;
     width: 100%;
-    line-height: ${theme.font.lineHeight.h150};
+    font-family: ${md.fontFamily};
+    font-feature-settings: ${md.fontSettings};
+    font-size: ${md.fontSize}px;
+    font-weight: ${md.fontWeight};
+    line-height: ${md.lineHeight}%;
   `;
 
   const style = cx(NAME, baseStyle, className);

package/lib/components/Sidebar/Sidebar.tsx

@@ -67,7 +67,6 @@ const Sidebar = ({
     background-color: ${theme.colour.surface.primary};
     border-right: ${theme.border.b1} solid ${theme.colour.border.subtle};
     color: ${theme.colour.text.default};
-    font-family: ${theme.font.family.primary};
     transition:
       width 160ms ease,
       padding 160ms ease;

package/lib/components/Sidebar/__tests__/__snapshots__/Sidebar.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`Sidebar > snapshot: defaultCollapsed prop true 1`] = `
 <aside
-  class="ucl-uikit-sidebar css-1r5qfp0"
+  class="ucl-uikit-sidebar css-1ewqq9w"
   data-collapsed="true"
   data-testid="ucl-uikit-sidebar"
 >
@@ -132,7 +132,7 @@ exports[`Sidebar > snapshot: defaultCollapsed prop true 1`] = `
 
 exports[`Sidebar > snapshot: no props 1`] = `
 <aside
-  class="ucl-uikit-sidebar css-syj6vq"
+  class="ucl-uikit-sidebar css-w7wkqi"
   data-collapsed="false"
   data-testid="ucl-uikit-sidebar"
 >

package/lib/components/StandaloneLink/__tests__/__snapshots__/StandaloneLink.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`Link > snapshot: no props 1`] = `
 <a
-  class="ucl-uikit-base-link ucl-uikit-standalone-link css-1x772n"
+  class="ucl-uikit-base-link ucl-uikit-standalone-link css-p4lxcl"
   data-testid="ucl-uikit-standalone-link"
 >
   test
@@ -11,7 +11,7 @@ exports[`Link > snapshot: no props 1`] = `
 
 exports[`Link > snapshot: testId prop 1`] = `
 <a
-  class="ucl-uikit-base-link ucl-uikit-standalone-link css-1x772n"
+  class="ucl-uikit-base-link ucl-uikit-standalone-link css-p4lxcl"
   data-testid="test123"
 >
    testidlink 

package/lib/components/Textarea/Textarea.tsx

@@ -24,6 +24,7 @@ export type Ref = HTMLTextAreaElement;
 const Textarea = forwardRef<Ref, TextareaProps>(
   ({ value, resize = 'vertical', testId = NAME, className, ...props }, ref) => {
     const [theme] = useTheme();
+    const { md } = theme.typography.body;
 
     const {
       disabled: contextDisabled,
@@ -40,11 +41,13 @@ const Textarea = forwardRef<Ref, TextareaProps>(
     }, [value, setCharCount]);
 
     const baseStyle = css`
-      line-height: ${theme.font.lineHeight.h150};
+      line-height: 150%;
       box-sizing: border-box;
       padding: ${theme.padding.p16};
-      font-family: ${theme.font.family.primary};
-      font-size: ${theme.font.size.f16};
+      font-family: ${md.fontFamily};
+      font-feature-settings: ${md.fontSettings};
+      font-size: ${md.fontSize}px;
+      font-weight: ${md.fontWeight};
       color: ${theme.colour.text.default};
       background-color: ${theme.colour.fill.inverse};
       border: ${theme.border.b1} solid ${theme.colour.speciality.inputDefault};

package/lib/components/Textarea/__tests__/__snapshots__/Textarea.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`Textarea > snapshot: Disabled 1`] = `
 <textarea
-  class="ucl-uikit-textarea css-5yxu02"
+  class="ucl-uikit-textarea css-oemvy2"
   data-testid="ucl-uikit-textarea"
   disabled=""
   id=""
@@ -11,7 +11,7 @@ exports[`Textarea > snapshot: Disabled 1`] = `
 
 exports[`Textarea > snapshot: Placeholder 1`] = `
 <textarea
-  class="ucl-uikit-textarea css-10cs6nh"
+  class="ucl-uikit-textarea css-1eo4yl8"
   data-testid="ucl-uikit-textarea"
   id=""
   placeholder="test"
@@ -20,7 +20,7 @@ exports[`Textarea > snapshot: Placeholder 1`] = `
 
 exports[`Textarea > snapshot: custom test id 1`] = `
 <textarea
-  class="ucl-uikit-textarea css-10cs6nh"
+  class="ucl-uikit-textarea css-1eo4yl8"
   data-testid="custom-test-id"
   id=""
 />
@@ -28,7 +28,7 @@ exports[`Textarea > snapshot: custom test id 1`] = `
 
 exports[`Textarea > snapshot: minimal props 1`] = `
 <textarea
-  class="ucl-uikit-textarea css-10cs6nh"
+  class="ucl-uikit-textarea css-1eo4yl8"
   data-testid="ucl-uikit-textarea"
   id=""
 />

package/lib/components/Timepicker/Timepicker.tsx

@@ -27,13 +27,17 @@ const Timepicker = ({
   ...props
 }: TimepickerProps) => {
   const [theme] = useTheme();
+  const { md } = theme.typography.body;
 
   const baseStyle = css`
     color: ${theme.colour.text.default};
     border-radius: ${theme.radius.r4};
-    font-size: ${theme.font.size.f24};
+    font-family: ${md.fontFamily};
+    font-feature-settings: ${md.fontSettings};
+    font-size: ${md.fontSize}px;
+    font-weight: ${md.fontWeight};
+    line-height: ${md.lineHeight}%;
     border-color: ${theme.colour.border.primary};
-    font-family: ${theme.font.family.primary};
     padding: ${theme.padding.p4};
 
     &:focus-within {

package/lib/components/Timepicker/__tests__/__snapshots__/Timepicker.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`Timepicker > snapshot 1`] = `
 <input
-  class="ucl-uikit-timepicker css-4iq7dt"
+  class="ucl-uikit-timepicker css-74plpz"
   data-testid="ucl-uikit-timepicker"
   type="time"
   value=""
@@ -11,7 +11,7 @@ exports[`Timepicker > snapshot 1`] = `
 
 exports[`Timepicker > snapshot: testID prop 1`] = `
 <input
-  class="ucl-uikit-timepicker css-4iq7dt"
+  class="ucl-uikit-timepicker css-74plpz"
   data-testid="testId"
   type="time"
   value=""