uikit-react-public 0.43.1 → 0.43.4

package/lib/components/Accordion/Accordion.Heading.tsx

@@ -48,8 +48,6 @@ const AccordionHeading: React.FC<AccordionHeadingProps> = ({
     text-decoration: none;
     box-sizing: border-box;
     width: 100%;
-    font-size: inherit;
-    line-height: inherit;
 
     &:hover {
       background-color: ${theme.colour.surface.brandHover};

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

@@ -8,7 +8,7 @@ exports[`Accordion > snapshot: no props 1`] = `
 >
   <h6
     aria-expanded="false"
-    class="ucl-uikit-heading ucl-uikit-accordion__heading css-db8j7j"
+    class="ucl-uikit-heading ucl-uikit-accordion__heading css-spdtpe"
     data-testid="ucl-uikit-accordion__heading"
     role="button"
     tabindex="0"
@@ -44,7 +44,7 @@ exports[`Accordion > snapshot: testId prop 1`] = `
 >
   <h6
     aria-expanded="false"
-    class="ucl-uikit-heading ucl-uikit-accordion__heading css-db8j7j"
+    class="ucl-uikit-heading ucl-uikit-accordion__heading css-spdtpe"
     data-testid="ucl-uikit-accordion__heading"
     role="button"
     tabindex="0"

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

@@ -43,7 +43,7 @@ exports[`Alert > snapshot: type=error 1`] = `
       </span>
     </h3>
     <p
-      class="ucl-uikit-paragrah ucl-uikit-alert__message css-1dosm7d"
+      class="ucl-uikit-paragraph ucl-uikit-alert__message css-1dosm7d"
       data-testid="ucl-uikit-alert__message"
     >
       The operation failed.
@@ -84,7 +84,7 @@ exports[`Alert > snapshot: type=info, no title 1`] = `
   </svg>
   <div>
     <p
-      class="ucl-uikit-paragrah ucl-uikit-alert__message css-1dosm7d"
+      class="ucl-uikit-paragraph ucl-uikit-alert__message css-1dosm7d"
       data-testid="ucl-uikit-alert__message"
     >
       This is an informational alert.
@@ -134,7 +134,7 @@ exports[`Alert > snapshot: type=success 1`] = `
       </span>
     </h3>
     <p
-      class="ucl-uikit-paragrah ucl-uikit-alert__message css-1dosm7d"
+      class="ucl-uikit-paragraph ucl-uikit-alert__message css-1dosm7d"
       data-testid="ucl-uikit-alert__message"
     >
       Your operation completed successfully.
@@ -181,7 +181,7 @@ exports[`Alert > snapshot: type=warning 1`] = `
       </span>
     </h3>
     <p
-      class="ucl-uikit-paragrah ucl-uikit-alert__message css-1dosm7d"
+      class="ucl-uikit-paragraph ucl-uikit-alert__message css-1dosm7d"
       data-testid="ucl-uikit-alert__message"
     >
       This operation may have unintended consequences.

package/lib/components/Avatar/Avatar.tsx

@@ -60,6 +60,9 @@ const Avatar = forwardRef<Ref, AvatarProps>(
       console.error('Avatar image failed to load', event);
       setImageError(true);
     };
+    const { smMedium, mdMedium, lgMedium } = theme.typography.body;
+    const initialsTypography =
+      size <= 32 ? smMedium : size <= 48 ? mdMedium : lgMedium;
 
     const baseStyle = css`
       display: flex;
@@ -74,8 +77,11 @@ const Avatar = forwardRef<Ref, AvatarProps>(
       height: ${size}px;
       color: ${theme.colour.text.brandPrimary};
       background-color: ${theme.colour.fill.brandSubtle};
-      font-family: ${theme.font.family.primary};
+      font-family: ${initialsTypography.fontFamily};
+      font-feature-settings: ${initialsTypography.fontSettings};
       font-size: ${fontSize}px;
+      font-weight: ${initialsTypography.fontWeight};
+      line-height: ${initialsTypography.lineHeight}%;
       cursor: pointer;
     `;
 

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

@@ -2,7 +2,7 @@
 
 exports[`Avatar > Snapshot: Default 1`] = `
 <button
-  class="ucl-uikit-avatar css-8z8m41"
+  class="ucl-uikit-avatar css-16zcktc"
   data-testid="ucl-uikit-avatar"
 >
   <svg
@@ -31,7 +31,7 @@ exports[`Avatar > Snapshot: Default 1`] = `
 
 exports[`Avatar > Snapshot: Default with disabled prop 1`] = `
 <button
-  class="ucl-uikit-avatar css-ucbqvu"
+  class="ucl-uikit-avatar css-evms17"
   data-testid="ucl-uikit-avatar"
   disabled=""
 >
@@ -61,7 +61,7 @@ exports[`Avatar > Snapshot: Default with disabled prop 1`] = `
 
 exports[`Avatar > Snapshot: icon variant with disabled prop 1`] = `
 <button
-  class="ucl-uikit-avatar css-ucbqvu"
+  class="ucl-uikit-avatar css-evms17"
   data-testid="ucl-uikit-avatar"
   disabled=""
 >
@@ -91,7 +91,7 @@ exports[`Avatar > Snapshot: icon variant with disabled prop 1`] = `
 
 exports[`Avatar > Snapshot: icon variant with no props 1`] = `
 <button
-  class="ucl-uikit-avatar css-8z8m41"
+  class="ucl-uikit-avatar css-16zcktc"
   data-testid="ucl-uikit-avatar"
 >
   <svg
@@ -120,7 +120,7 @@ exports[`Avatar > Snapshot: icon variant with no props 1`] = `
 
 exports[`Avatar > Snapshot: image variant with imageUrl and name props 1`] = `
 <button
-  class="ucl-uikit-avatar css-8z8m41"
+  class="ucl-uikit-avatar css-16zcktc"
   data-testid="ucl-uikit-avatar"
 >
   <img
@@ -134,7 +134,7 @@ exports[`Avatar > Snapshot: image variant with imageUrl and name props 1`] = `
 
 exports[`Avatar > Snapshot: image variant with imageUrl prop only 1`] = `
 <button
-  class="ucl-uikit-avatar css-8z8m41"
+  class="ucl-uikit-avatar css-16zcktc"
   data-testid="ucl-uikit-avatar"
 >
   <img
@@ -148,7 +148,7 @@ exports[`Avatar > Snapshot: image variant with imageUrl prop only 1`] = `
 
 exports[`Avatar > Snapshot: image variant with imageUrl, name and disabled props 1`] = `
 <button
-  class="ucl-uikit-avatar css-ucbqvu"
+  class="ucl-uikit-avatar css-evms17"
   data-testid="ucl-uikit-avatar"
   disabled=""
 >
@@ -163,7 +163,7 @@ exports[`Avatar > Snapshot: image variant with imageUrl, name and disabled props
 
 exports[`Avatar > Snapshot: image variant with name prop only 1`] = `
 <button
-  class="ucl-uikit-avatar css-8z8m41"
+  class="ucl-uikit-avatar css-16zcktc"
   data-testid="ucl-uikit-avatar"
 >
   <span
@@ -176,7 +176,7 @@ exports[`Avatar > Snapshot: image variant with name prop only 1`] = `
 
 exports[`Avatar > Snapshot: image variant with no props 1`] = `
 <button
-  class="ucl-uikit-avatar css-8z8m41"
+  class="ucl-uikit-avatar css-16zcktc"
   data-testid="ucl-uikit-avatar"
 >
   <svg
@@ -205,7 +205,7 @@ exports[`Avatar > Snapshot: image variant with no props 1`] = `
 
 exports[`Avatar > Snapshot: initials variant with name prop 1`] = `
 <button
-  class="ucl-uikit-avatar css-8z8m41"
+  class="ucl-uikit-avatar css-16zcktc"
   data-testid="ucl-uikit-avatar"
 >
   <span
@@ -218,7 +218,7 @@ exports[`Avatar > Snapshot: initials variant with name prop 1`] = `
 
 exports[`Avatar > Snapshot: initials variant with name prop and disabled prop 1`] = `
 <button
-  class="ucl-uikit-avatar css-ucbqvu"
+  class="ucl-uikit-avatar css-evms17"
   data-testid="ucl-uikit-avatar"
   disabled=""
 >
@@ -232,7 +232,7 @@ exports[`Avatar > Snapshot: initials variant with name prop and disabled prop 1`
 
 exports[`Avatar > Snapshot: initials variant with no props 1`] = `
 <button
-  class="ucl-uikit-avatar css-8z8m41"
+  class="ucl-uikit-avatar css-16zcktc"
   data-testid="ucl-uikit-avatar"
 >
   <svg

package/lib/components/Badge/Badge.tsx

@@ -2,6 +2,7 @@ import { css, cx } from '@emotion/css';
 import { useTheme } from '../../theme';
 
 import { Icon } from '../';
+import Text from '../Text';
 import type { SpecificIconProps } from '../Icon/Icon';
 import type { ThemeType } from '../../theme';
 
@@ -127,8 +128,7 @@ const Badge = ({
 }: BadgeProps) => {
   const [theme] = useTheme();
 
-  const badgeTypography =
-    size === 'large' ? theme.typography.body.sm : theme.typography.body.xs;
+  const textLevel = size === 'large' ? 'sm' : 'xs';
 
   const iconSize = size === 'large' ? 16 : 14;
 
@@ -148,12 +148,6 @@ const Badge = ({
     background-color: ${backgroundColor};
     border: ${border ?? 'none'};
 
-    font-family: ${badgeTypography.fontFamily};
-    font-feature-settings: ${badgeTypography.fontSettings};
-    font-size: ${badgeTypography.fontSize}px;
-    font-weight: ${badgeTypography.fontWeight};
-    line-height: ${badgeTypography.lineHeight}%;
-
     border-radius: 100px;
     white-space: nowrap;
     gap: 4px;
@@ -193,8 +187,9 @@ const Badge = ({
   const VariantIcon = VARIANT_ICON_MAP[variant];
 
   return (
-    <span
-      data-testid={testId}
+    <Text
+      level={textLevel}
+      testId={testId}
       className={style}
       {...props}
     >
@@ -212,7 +207,7 @@ const Badge = ({
         />
       )}
       {children}
-    </span>
+    </Text>
   );
 };
 

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

@@ -2,7 +2,7 @@
 
 exports[`Badge > snapshot: default 1`] = `
 <span
-  class="ucl-uikit-badge css-b76pju"
+  class="ucl-uikit-text ucl-uikit-badge css-1qd9y8u"
   data-testid="ucl-uikit-badge"
 >
   Default
@@ -11,7 +11,7 @@ exports[`Badge > snapshot: default 1`] = `
 
 exports[`Badge > snapshot: size=large 1`] = `
 <span
-  class="ucl-uikit-badge css-6n39yj"
+  class="ucl-uikit-text ucl-uikit-badge css-1j13tem"
   data-testid="ucl-uikit-badge"
 >
   Large
@@ -20,7 +20,7 @@ exports[`Badge > snapshot: size=large 1`] = `
 
 exports[`Badge > snapshot: statusIndicator 1`] = `
 <span
-  class="ucl-uikit-badge css-b76pju"
+  class="ucl-uikit-text ucl-uikit-badge css-1qd9y8u"
   data-testid="ucl-uikit-badge"
 >
   <span
@@ -33,7 +33,7 @@ exports[`Badge > snapshot: statusIndicator 1`] = `
 
 exports[`Badge > snapshot: variant=critical with icon 1`] = `
 <span
-  class="ucl-uikit-badge css-1oxz1ke"
+  class="ucl-uikit-text ucl-uikit-badge css-rkw7bu"
   data-testid="ucl-uikit-badge"
 >
   <svg
@@ -66,7 +66,7 @@ exports[`Badge > snapshot: variant=critical with icon 1`] = `
 
 exports[`Badge > snapshot: variant=disabled 1`] = `
 <span
-  class="ucl-uikit-badge css-psg0dk"
+  class="ucl-uikit-text ucl-uikit-badge css-a4ty56"
   data-testid="ucl-uikit-badge"
 >
   Disabled
@@ -75,7 +75,7 @@ exports[`Badge > snapshot: variant=disabled 1`] = `
 
 exports[`Badge > snapshot: variant=info with icon 1`] = `
 <span
-  class="ucl-uikit-badge css-37ncyr"
+  class="ucl-uikit-text ucl-uikit-badge css-9ddki6"
   data-testid="ucl-uikit-badge"
 >
   <svg
@@ -108,7 +108,7 @@ exports[`Badge > snapshot: variant=info with icon 1`] = `
 
 exports[`Badge > snapshot: variant=info-subtle 1`] = `
 <span
-  class="ucl-uikit-badge css-1x6sfca"
+  class="ucl-uikit-text ucl-uikit-badge css-1mmhjpi"
   data-testid="ucl-uikit-badge"
 >
   Info subtle
@@ -117,7 +117,7 @@ exports[`Badge > snapshot: variant=info-subtle 1`] = `
 
 exports[`Badge > snapshot: variant=success with icon 1`] = `
 <span
-  class="ucl-uikit-badge css-16a4ap6"
+  class="ucl-uikit-text ucl-uikit-badge css-1k9d7cn"
   data-testid="ucl-uikit-badge"
 >
   <svg
@@ -148,7 +148,7 @@ exports[`Badge > snapshot: variant=success with icon 1`] = `
 
 exports[`Badge > snapshot: variant=warning with icon 1`] = `
 <span
-  class="ucl-uikit-badge css-1o21lbi"
+  class="ucl-uikit-text ucl-uikit-badge css-1vsenfu"
   data-testid="ucl-uikit-badge"
 >
   <svg

package/lib/components/Breadcrumbs/Breadcrumbs.tsx

@@ -1,20 +1,39 @@
-import React, { HTMLAttributes } from 'react';
+import React, { HTMLAttributes, NamedExoticComponent, memo } from 'react';
 import { css, cx } from '@emotion/css';
-import { Icon } from '../';
+import { themes, useTheme } from '../../theme';
+import Icon from '../Icon';
+import BreadcrumbsNew, {
+  BaseBreadcrumbsItemProps,
+  BreadcrumbsCurrentProps,
+  BreadcrumbsLinkProps,
+  BreadcrumbsProps as BreadcrumbsNewProps,
+  BreadcrumbsSize,
+} from '../BreadcrumbsNew';
 import Breadcrumb from './Breadcrumb';
+import { BreadcrumbProps } from './Breadcrumb';
 
 const NAME = 'ucl-uikit-breadcrumbs';
 
-export interface BreadcrumbsProps extends HTMLAttributes<HTMLElement> {
+export interface LegacyBreadcrumbsProps extends HTMLAttributes<HTMLElement> {
   testId?: string;
 }
 
-const Breadcrumbs = ({
+export type BreadcrumbsProps = Omit<BreadcrumbsNewProps, 'children'> &
+  LegacyBreadcrumbsProps;
+
+export type {
+  BaseBreadcrumbsItemProps,
+  BreadcrumbsCurrentProps,
+  BreadcrumbsLinkProps,
+  BreadcrumbsSize,
+};
+
+const LegacyBreadcrumbsRoot = ({
   testId = NAME,
   className,
   children,
   ...props
-}: BreadcrumbsProps) => {
+}: LegacyBreadcrumbsProps) => {
   const separatorStyle = css`
     display: inline-flex;
     align-items: center;
@@ -55,6 +74,146 @@ const Breadcrumbs = ({
   );
 };
 
-Breadcrumbs.Breadcrumb = Breadcrumb;
+export interface LegacyBreadcrumbsComponent extends NamedExoticComponent<LegacyBreadcrumbsProps> {
+  Breadcrumb: typeof Breadcrumb;
+}
+
+export const LegacyBreadcrumbs = Object.assign(memo(LegacyBreadcrumbsRoot), {
+  Breadcrumb,
+}) as LegacyBreadcrumbsComponent;
+
+const Breadcrumbs = ({
+  size,
+  testId = NAME,
+  className,
+  children,
+  ...props
+}: BreadcrumbsProps) => {
+  const [theme] = useTheme();
+
+  if (theme === themes.default) {
+    return (
+      <LegacyBreadcrumbs
+        testId={testId}
+        className={className}
+        {...props}
+      >
+        {children}
+      </LegacyBreadcrumbs>
+    );
+  }
+
+  return (
+    <BreadcrumbsNew
+      size={size}
+      testId={testId}
+      className={className}
+      {...props}
+    >
+      {children}
+    </BreadcrumbsNew>
+  );
+};
+
+type BreadcrumbBridgeProps = BreadcrumbProps & {
+  separator?: boolean;
+  back?: boolean;
+  size?: BreadcrumbsSize;
+};
+
+const BreadcrumbBridge = ({
+  uri,
+  isActive,
+  component,
+  separator,
+  back,
+  size,
+  testId,
+  className,
+  children,
+  ...props
+}: BreadcrumbBridgeProps) => {
+  const [theme] = useTheme();
+
+  if (theme === themes.default) {
+    return (
+      <Breadcrumb
+        uri={uri}
+        isActive={isActive}
+        component={component}
+        testId={testId}
+        className={className}
+        {...props}
+      >
+        {children}
+      </Breadcrumb>
+    );
+  }
+
+  const activeBreadcrumb =
+    isActive ??
+    (typeof window !== 'undefined' && window.location.pathname === uri);
+
+  if (activeBreadcrumb) {
+    return (
+      <BreadcrumbsNew.Current
+        separator={separator}
+        size={size}
+        testId={testId}
+        className={className}
+        {...props}
+      >
+        {children}
+      </BreadcrumbsNew.Current>
+    );
+  }
+
+  if (component) {
+    return (
+      <BreadcrumbsNew.Link
+        separator={separator}
+        back={back}
+        size={size}
+        testId={testId}
+        className={className}
+        component={component}
+        to={uri}
+        {...props}
+      >
+        {children}
+      </BreadcrumbsNew.Link>
+    );
+  }
+
+  return (
+    <BreadcrumbsNew.Link
+      separator={separator}
+      back={back}
+      size={size}
+      testId={testId}
+      className={className}
+      href={uri}
+      {...props}
+    >
+      {children}
+    </BreadcrumbsNew.Link>
+  );
+};
+
+export interface BreadcrumbsComponent extends NamedExoticComponent<BreadcrumbsProps> {
+  Breadcrumb: typeof BreadcrumbBridge;
+  BaseItem: typeof BreadcrumbsNew.BaseItem;
+  Link: typeof BreadcrumbsNew.Link;
+  Current: typeof BreadcrumbsNew.Current;
+}
+
+const MemoBreadcrumbs = memo(Breadcrumbs);
+
+const BreadcrumbsWithSubComponents = Object.assign(MemoBreadcrumbs, {
+  Breadcrumb: BreadcrumbBridge,
+  BaseItem: BreadcrumbsNew.BaseItem,
+  Link: BreadcrumbsNew.Link,
+  Current: BreadcrumbsNew.Current,
+}) as BreadcrumbsComponent;
 
-export default Breadcrumbs;
+export default BreadcrumbsWithSubComponents;

package/lib/components/Breadcrumbs/index.ts

@@ -1,2 +1,5 @@
 export { default } from './Breadcrumbs';
+export { LegacyBreadcrumbs } from './Breadcrumbs';
 export type { BreadcrumbsProps } from './Breadcrumbs';
+/** @deprecated Use BreadcrumbsProps instead. LegacyBreadcrumbsProps only supports the default theme. */
+export type { LegacyBreadcrumbsProps } from './Breadcrumbs';

package/lib/components/Button/Button.tsx

@@ -127,6 +127,12 @@ const Button = <C extends ElementType = 'button'>({
 
   const resolvedVariant = normalizeVariantProp(variant, destructive);
   const resolvedSize = normalizeSizeprop(size);
+  const buttonTypography = {
+    xsmall: theme.typography.body.smMedium,
+    small: theme.typography.body.mdMedium,
+    medium: theme.typography.body.mdMedium,
+    large: theme.typography.body.lgMedium,
+  }[resolvedSize];
 
   const baseStyle = css`
     all: unset;
@@ -138,9 +144,11 @@ const Button = <C extends ElementType = 'button'>({
     position: relative;
     box-sizing: border-box;
     border-radius: ${theme.radius.r4};
-    font-family: ${theme.typography.body.md.fontFamily};
-    font-feature-settings: ${theme.typography.body.md.fontSettings};
-    font-weight: 500;
+    font-family: ${buttonTypography.fontFamily};
+    font-feature-settings: ${buttonTypography.fontSettings};
+    font-size: ${buttonTypography.fontSize}px;
+    font-weight: ${buttonTypography.fontWeight};
+    line-height: ${buttonTypography.lineHeight}%;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     outline: none;
@@ -164,25 +172,21 @@ const Button = <C extends ElementType = 'button'>({
   const sizeExtraSmallStyle = css`
     height: 32px;
     padding: 0 ${paddingPx}px;
-    font-size: 14px;
   `;
 
   const sizeSmallStyle = css`
     height: 40px;
     padding: 0 ${paddingPx}px;
-    font-size: 16px;
   `;
 
   const sizeMediumStyle = css`
     height: 48px;
     padding: 0 ${paddingPx}px;
-    font-size: 16px;
   `;
 
   const sizeLargeStyle = css`
     height: 56px;
     padding: 0 ${paddingPx}px;
-    font-size: 18px;
   `;
 
   const fullWidthStyle = css`

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

@@ -3,7 +3,7 @@
 exports[`Button > maps legacy destructive prop to destructive variants 1`] = `
 <button
   aria-disabled="false"
-  class="ucl-uikit-button css-rl1hmu"
+  class="ucl-uikit-button css-thupyi"
   data-testid="ucl-uikit-button"
 >
   Delete
@@ -13,7 +13,7 @@ exports[`Button > maps legacy destructive prop to destructive variants 1`] = `
 exports[`Button > maps legacy size default to medium 1`] = `
 <button
   aria-disabled="false"
-  class="ucl-uikit-button css-19pu3x7"
+  class="ucl-uikit-button css-5txlzw"
   data-testid="ucl-uikit-button"
 >
   Legacy default size
@@ -23,7 +23,7 @@ exports[`Button > maps legacy size default to medium 1`] = `
 exports[`Button > snapshot: 'as' prop with 'a' 1`] = `
 <a
   aria-disabled="false"
-  class="ucl-uikit-button css-19pu3x7"
+  class="ucl-uikit-button css-5txlzw"
   data-testid="ucl-uikit-button"
   href="https://ucl.ac.uk"
 >
@@ -34,7 +34,7 @@ exports[`Button > snapshot: 'as' prop with 'a' 1`] = `
 exports[`Button > snapshot: loading 1`] = `
 <button
   aria-disabled="false"
-  class="ucl-uikit-button css-16925p4"
+  class="ucl-uikit-button css-736ss2"
   data-testid="ucl-uikit-button"
   disabled=""
 >
@@ -67,7 +67,7 @@ exports[`Button > snapshot: loading 1`] = `
 exports[`Button > snapshot: no props 1`] = `
 <button
   aria-disabled="false"
-  class="ucl-uikit-button css-12mlzyd"
+  class="ucl-uikit-button css-5vh71f"
   data-testid="ucl-uikit-button"
 />
 `;
@@ -75,7 +75,7 @@ exports[`Button > snapshot: no props 1`] = `
 exports[`Button > snapshot: testId prop 1`] = `
 <button
   aria-disabled="false"
-  class="ucl-uikit-button css-12mlzyd"
+  class="ucl-uikit-button css-5vh71f"
   data-testid="test123"
 />
 `;
@@ -83,7 +83,7 @@ exports[`Button > snapshot: testId prop 1`] = `
 exports[`Button > snapshot: variant prop 1`] = `
 <button
   aria-disabled="false"
-  class="ucl-uikit-button css-ub9awk"
+  class="ucl-uikit-button css-25bhrl"
   data-testid="ucl-uikit-button"
 />
 `;
@@ -91,7 +91,7 @@ exports[`Button > snapshot: variant prop 1`] = `
 exports[`Button > snapshot: with icon 1`] = `
 <button
   aria-disabled="false"
-  class="ucl-uikit-button css-19pu3x7"
+  class="ucl-uikit-button css-5txlzw"
   data-testid="ucl-uikit-button"
 >
   <svg
@@ -119,7 +119,7 @@ exports[`Button > snapshot: with icon 1`] = `
 exports[`Button > snapshot: with icon and iconPosition right 1`] = `
 <button
   aria-disabled="false"
-  class="ucl-uikit-button css-19pu3x7"
+  class="ucl-uikit-button css-5txlzw"
   data-testid="ucl-uikit-button"
 >
   Download