Chore/tag migration #73
Conversation
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. 🗂️ Base branches to auto review (5)
Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the WalkthroughThis pull request removes outdated configuration files and replaces them with new configuration files for ESLint, Parcel, PostCSS, Prettier, Vite, and Storybook. Many UI components and hooks have been refactored to transition from styled-components to utility-first CSS using Tailwind CSS. Several component properties were renamed for consistency (e.g., replacing “disabled” with “isDisabled”), and event handlers have been updated (from onClick to onPress). New Storybook stories and configuration files have been added to document components, and utility functions and type definitions have been introduced or updated in various parts of the project. Changes
Sequence Diagram(s)sequenceDiagram
participant U as User
participant App as App Component
participant D as Document Root
U->>App: Click "Toggle Theme" Button
App->>App: Execute changeTheme() to switch tailwindTheme
App->>D: Update document.documentElement class (light/dark)
D-->>App: Acknowledge theme update
Possibly related PRs
Suggested reviewers
Poem
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
Harman-singh-waraich
changed the base branch from
main
to
chore/tailwind-migration
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Caution
Inline review comments failed to post. This is likely due to GitHub's limits when posting large numbers of comments. If you are seeing this consistently it is likely a permissions issue. Please check "Moderation" -> "Code review limits" under your organization settings.
Actionable comments posted: 7
🔭 Outside diff range comments (2)
src/stories/displaySmall.stories.tsx (1)
1-28:⚠️ Potential issueFix naming inconsistencies in display component story
There are several naming inconsistencies in this file that need to be addressed:
- The file is named
displaySmall.stories.tsxbut importsSmallDisplayComponentfrom "../lib/display/large"- The story export is named
DisplayLarge(line 18) while the story title is "Display/DisplaySmall" (line 10)- There appears to be another story with the same export name
DisplayLargein a different fileTo resolve these inconsistencies:
- Verify the correct component path and update either the import or file name
- Make the export name consistent with the story title, likely changing:
-export const DisplayLarge: Story = { +export const DisplaySmall: Story = {
- Ensure this story is demonstrating the small display variant if that's what the filename suggests
src/lib/form/file-uploader.tsx (1)
94-94: 🛠️ Refactor suggestionUnaddressed TODO for proper typing
Line 94 contains a TODO comment regarding the typing of
fileInputRef. This should be addressed as part of the migration work.- const fileInputRef = useRef<any>(); //! type + const fileInputRef = useRef<HTMLInputElement>(null);
🧹 Nitpick comments (26)
src/stories/utils.tsx (1)
1-6: Consider aligning IPreviewArgs type structure with .storybook/preview.tsxThe new
IPreviewArgstype structure differs from the one in.storybook/preview.tsx. The one here neststhemeUIandbackgroundUIunder anargsproperty, while the one in preview.tsx has these properties directly on the type.// Current implementation in utils.tsx export type IPreviewArgs = { args: { themeUI: "light" | "dark"; backgroundUI: "white" | "light"; }; }; // From .storybook/preview.tsx export type IPreviewArgs = { themeUI: "light" | "dark"; backgroundUI: "white" | "light"; };Consider either aligning these type definitions for consistency or documenting why they have different structures if there's a specific reason.
src/hooks/use-focus-outside.tsx (1)
4-5: ESLint directive updated, but type safety could be improved.The ESLint rule update is appropriate, but the hook uses non-specific types (
anyandFunction) which bypass TypeScript's type safety features.Consider improving type safety with more specific types:
- // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type - function useFocusOutside(ref: any, callback: Function) { - useEffect(() => { - function handleEvent(event: any) { + function useFocusOutside( + ref: React.RefObject<HTMLElement>, + callback: () => void + ) { + useEffect(() => { + function handleEvent(event: MouseEvent | FocusEvent) {🧰 Tools
🪛 Biome (1.9.4)
[error] 5-5: Don't use 'Function' as a type.
Prefer explicitly define the function shape. This type accepts any function-like value, which can be a common source of bugs.
(lint/complexity/noBannedTypes)
vite.config.ts (1)
1-22: Vite configuration looks good, with a minor concern.The Vite configuration is properly set up for building a React component library with the necessary plugins. This is a good migration from Parcel.
The ESLint disable comment for the tailwindcss import suggests a potential resolution issue. Consider investigating why this import can't be resolved properly - it might indicate a missing type declaration or package.json configuration issue.
src/lib/messages/push.tsx (1)
75-76: Replace generic Function type with specific function signatureWhile the ESLint rule has been updated to the more specific
@typescript-eslint/no-unsafe-function-type, the code still uses the genericFunctiontype. This is generally discouraged for type safety reasons.Since the callback is used without parameters at line 100, consider using a more specific type:
- // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type - callback: Function; + callback: () => void;This will provide better type safety and IDE assistance without requiring the ESLint disable comment.
🧰 Tools
🪛 Biome (1.9.4)
[error] 76-76: Don't use 'Function' as a type.
Prefer explicitly define the function shape. This type accepts any function-like value, which can be a common source of bugs.
(lint/complexity/noBannedTypes)
src/lib/dropdown/button.tsx (1)
46-47: Use specific function signature instead of generic Function typeWhile the ESLint rule has been updated, the code still uses the generic
Functiontype which doesn't provide proper type safety.Since
setIsOpenis used with a boolean parameter at line 56, consider using a more specific type signature:- // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type - setIsOpen: Function; + setIsOpen: (isOpen: boolean) => void;This will provide better type checking and IDE support without requiring an ESLint disable comment.
🧰 Tools
🪛 Biome (1.9.4)
[error] 47-47: Don't use 'Function' as a type.
Prefer explicitly define the function shape. This type accepts any function-like value, which can be a common source of bugs.
(lint/complexity/noBannedTypes)
src/lib/pagination/tabs.tsx (1)
76-77: Consider using a specific function type rather thanFunctionThe ESLint rule is being updated from disabling
@typescript-eslint/ban-typesto@typescript-eslint/no-unsafe-function-type, which suggests awareness of the typing issue. However, using the genericFunctiontype is still not type-safe.Consider replacing it with a more specific function signature that accurately represents the callback's parameters and return type:
- // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type - callback: Function; + callback: (value: any) => void;This would improve type safety while still accommodating the current usage pattern in the component.
🧰 Tools
🪛 Biome (1.9.4)
[error] 77-77: Don't use 'Function' as a type.
Prefer explicitly define the function shape. This type accepts any function-like value, which can be a common source of bugs.
(lint/complexity/noBannedTypes)
src/lib/button/ButtonIcon.tsx (1)
1-25: Consider handling the case when both Icon and icon are undefined.The ButtonIcon component is well-structured and properly handles conditional rendering based on the button variant and state. However, there's no fallback when both
iconandIconare null/undefined, which could result in rendering nothing.const ButtonIcon: React.FC< Pick<ButtonProps, "Icon" | "icon" | "isDisabled" | "isLoading" | "variant"> > = ({ Icon, icon, isDisabled, isLoading, variant }) => { const isSecondary = variant === "secondary"; return ( - icon ?? - (Icon && ( + icon ?? (Icon ? ( <Icon className={cn( "button-svg", "mr-2 h-4 w-4", "fill-klerosUIComponentsWhiteBackground", isLoading && ["invisible"], isSecondary && ["fill-klerosUIComponentsPrimaryBlue"], isDisabled && ["fill-klerosUIComponentsStroke"], )} /> - )) + )) : null) ); };src/stories/accordion.stories.tsx (1)
18-42: Story structure is good, but consider diversifying demo content.The Accordion story setup is well-structured with proper theme configuration. However, for better demonstration value:
- Both accordion items have identical titles ("How it works?")
- The first item contains repetitive content with multiple newlines that may not demonstrate the component's capabilities effectively
export const DarkTheme: Story = { args: { className: "max-w-[80dvw]", items: [ { - title: "How it works?", + title: "How does it work?", body: ( <small className="text-klerosUIComponentsPrimaryText"> - {"hello\nhello\n\n\n\n\nhello"} + {"The accordion component allows users to expand and collapse content sections as needed.\nThis helps manage screen space effectively."} </small> ), }, { - title: "How it works?", + title: "When should I use it?", body: ( - <small className="text-klerosUIComponentsPrimaryText">hello</small> + <small className="text-klerosUIComponentsPrimaryText">Use accordions when you need to organize related information in a compact format that can be expanded when needed.</small> ), }, ], themeUI: "dark", backgroundUI: "light", }, };src/lib/container/box.tsx (1)
4-16: Consider making dimensions configurable instead of hardcoded.The Box component has been effectively refactored to use utility classes instead of styled-components. However, the hardcoded dimensions (
h-[200px] w-[328px]) reduce its flexibility when used in different contexts. Consider making these dimensions adjustable through props.-function Box({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) { +function Box({ + className, + width = "328px", + height = "200px", + ...props +}: React.HTMLAttributes<HTMLDivElement> & { + width?: string; + height?: string; +}) { return ( <div className={cn( - "bg-klerosUIComponentsMediumBlue h-[200px] w-[328px]", + "bg-klerosUIComponentsMediumBlue", + { [`h-[${height}]`]: height }, + { [`w-[${width}]`]: width }, "box-border rounded-[18px]", className, )} > {props.children} </div> ); }Note: The current implementation works well if you're always overriding the dimensions with className. If that's the intended usage pattern, this refactor might not be necessary.
src/lib/dropdown/simple-button.tsx (1)
69-70: Consider using a more specific function type signatureWhile updating the ESLint disable comment is appropriate, the underlying issue with using the generic
Functiontype still exists. This doesn't provide type safety for parameters or return values.- // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type - setIsOpen: Function; + setIsOpen: (isOpen: boolean) => void;🧰 Tools
🪛 Biome (1.9.4)
[error] 70-70: Don't use 'Function' as a type.
Prefer explicitly define the function shape. This type accepts any function-like value, which can be a common source of bugs.
(lint/complexity/noBannedTypes)
src/lib/accordion/index.tsx (1)
33-36: Fixed width could limit responsivenessWhile the migration to utility classes is good, the hardcoded width of
w-[1000px]may cause issues on smaller screens. Consider using a responsive width or making this configurable.- className={cn("box-border flex w-[1000px] flex-col", className)} + className={cn("box-border flex w-full max-w-[1000px] flex-col", className)}src/lib/form/file-uploader.tsx (1)
80-81: Updated ESLint rule for better type safetyThe ESLint comment was updated to use the more specific
@typescript-eslint/no-unsafe-function-typerule. However, it would be better to define a more specific type than using the genericFunctiontype.- // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type - callback: Function; + callback: (file: File) => void;🧰 Tools
🪛 Biome (1.9.4)
[error] 81-81: Don't use 'Function' as a type.
Prefer explicitly define the function shape. This type accepts any function-like value, which can be a common source of bugs.
(lint/complexity/noBannedTypes)
src/lib/dropdown/base-item.tsx (1)
84-85: Consider updating event handler to match other componentsFor consistency with other components that have been migrated to
react-aria-components(like the Button in App.tsx), consider updating this component to useonPressinstead ofonClick.- <Item - onKeyPress={(e) => (onClick && e.key === "Enter" ? onClick() : undefined)} - {...{ onClick, ...props }} - > + <Item + onPress={onClick} + {...props} + >src/lib/dot.tsx (1)
1-15: Good migration from styled-components to Tailwind CSSThe refactoring successfully transitions the component from styled-components to a functional component using Tailwind CSS classes, maintaining the same visual appearance while allowing for extensibility through the className prop.
Consider adding type validation or default value for the color prop to prevent potential rendering issues with invalid colors.
-interface DotProps { - color: string; - className?: string; -} +interface DotProps { + color: string; // Consider using a ColorType or providing validation + className?: string; +} + +function Dot({ color, className }: Readonly<DotProps>) {src/lib/container/modal.tsx (1)
1-23: Improved Modal component with react-aria for better accessibilityGood migration from styled-components to react-aria-components with Tailwind CSS, which enhances accessibility while maintaining styling capabilities.
The hard-coded dimensions (
h-[200px] w-[328px]) might limit the component's flexibility for different use cases. Consider making the dimensions customizable through props.-function Modal({ - className, - ...props -}: ModalOverlayProps & React.RefAttributes<HTMLDivElement>) { +interface ModalProps extends ModalOverlayProps, React.RefAttributes<HTMLDivElement> { + className?: string; + width?: string; + height?: string; +} + +function Modal({ + className, + width = "328px", + height = "200px", + ...props +}: ModalProps) { return ( <AriaModel className={cn( - "bg-klerosUIComponentsWhiteBackground h-[200px] w-[328px]", + "bg-klerosUIComponentsWhiteBackground", + `h-[${height}] w-[${width}]`, "rounded-base box-border", className, )} >src/stories/button.stories.tsx (1)
29-75: Comprehensive set of Button variants and statesThe stories provide excellent coverage of different button variants (primary, secondary, tertiary) and states (with icon, loading). Each example is configured with consistent theming.
To further enhance the documentation:
- Consider adding brief descriptions for each story explaining the intended use case for each button variant
- Add examples demonstrating other button states like hover, focus, or active
- Clarify whether the loading state automatically disables the button or if that's a separate concern
src/stories/Configure.mdx (3)
18-32: Consider using Tailwind classes instead of inline styles for RightArrowSince your project is migrating to Tailwind CSS, consider replacing the inline styles with Tailwind utility classes to maintain consistency with the rest of the codebase.
export const RightArrow = () => <svg viewBox="0 0 14 14" width="8px" height="14px" - style={{ - marginLeft: '4px', - display: 'inline-block', - shapeRendering: 'inherit', - verticalAlign: 'middle', - fill: 'currentColor', - 'path fill': 'currentColor' - }} + className="ml-1 inline-block align-middle fill-current" > <path d="m11.1 7.35-5.5 5.5a.5.5 0 0 1-.7-.7L10.04 7 4.9 1.85a.5.5 0 1 1 .7-.7l5.5 5.5c.2.2.2.5 0 .7Z" /> </svg>
200-200: Fix typo in sentenceThere's a grammatical error in this sentence - the word "on" seems out of place.
- <p>Follow guided walkthroughs on for key workflows.</p> + <p>Follow guided walkthroughs for key workflows.</p>
208-364: Consider extracting styles to a separate fileThe CSS styling in this file is quite extensive. If these styles are shared across multiple Storybook documentation files, consider extracting them to a separate CSS file to improve maintainability.
src/lib/display/small.tsx (2)
4-6: Streamline utility importsYou're importing both
cnandclsxutilities which serve similar purposes. Consider using only one for class name composition to maintain consistency.import React from "react"; import Card from "../container/card"; import { DisplayIconProps } from "./icon"; import { cn } from "../../utils"; import { Label } from "react-aria-components"; -import clsx from "clsx";Then update the Card component usage to use only
cn:- <Card className={clsx("h-[45px] w-full", "mt-4 flex items-center px-4")}> + <Card className={cn("h-[45px] w-full mt-4 flex items-center px-4")}>
26-34: Consider making width more flexibleThe fixed width and height constraints might limit component flexibility in different contexts. Consider making these dimensions responsive or accepting sizing props.
- <Card className={clsx("h-[45px] w-full", "mt-4 flex items-center px-4")}> + <Card className={cn("h-[45px] w-full mt-4 flex items-center px-4", { + "w-full": true, // Default width + // Add other conditional classes here + })}>src/lib/container/card.tsx (1)
9-24: Consider more flexible sizing optionsThe component has fixed dimensions (
h-[200px] w-[328px]) which might limit its reusability. Consider adding size variants or making the dimensions more flexible.function Card({ hover, round, className, ...props }: Readonly<CardProps>) { return ( <div className={cn( - "bg-klerosUIComponentsWhiteBackground box-border h-[200px] w-[328px]", + "bg-klerosUIComponentsWhiteBackground box-border", "border-klerosUIComponentsStroke hover-short-transition shadow-default border", hover && "hover:bg-klerosUIComponentsLightGrey hover:cursor-pointer", round ? "rounded-[18px]" : "rounded-base", className, )} {...props} > {props.children} </div> ); }This change allows the component to be sized through the
classNameprop, making it more flexible in different contexts.src/lib/display/icon.tsx (1)
3-5: Consolidate utility importsYou're importing both
cnandclsxutilities which serve similar purposes. Consider using only one to maintain consistency throughout the codebase.import React from "react"; import Card from "../container/card"; import { cn } from "../../utils"; -import clsx from "clsx"; import { Label } from "react-aria-components";Then update all className usages to use only
cn.package.json (1)
15-23: Updated and new scripts
You have replaced Parcel with Vite and Storybook. Usingrm -rf distmay cause cross-platform issues. Consider using a package likerimraffor cross-platform compatibility.- "clean": "rm -rf dist", + "clean": "rimraf dist",src/lib/breadcrumb.tsx (1)
8-9: Consider using a more specific type instead of FunctionThe
Functiontype is overly permissive and flagged by static analysis tools. Even with the ESLint disable comment, it's better to use a more specific type definition.- // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type - callback?: Function; + callback?: (value: any) => void;🧰 Tools
🪛 Biome (1.9.4)
[error] 9-9: Don't use 'Function' as a type.
Prefer explicitly define the function shape. This type accepts any function-like value, which can be a common source of bugs.
(lint/complexity/noBannedTypes)
src/styles/global.css (1)
111-195: Comprehensive theme mapping and animationsThe theme section:
- Maps CSS variables to themed variable names for easier reference
- Defines animations for fade-in and breathing effects
- Sets up common transition durations and easing functions
- Configures default shadow values
One suggestion: consider documenting the usage of these animations and transitions in a comment for other developers.
/* Animations */ + /* Usage: + * animation: var(--animate-fade-in); + * animation: var(--animate-breathing); + */ @keyframes fadeIn {
🛑 Comments failed to post (7)
eslint.config.mjs (1)
66-75: 💡 Verification agent
🧩 Analysis chain
React version might need an update
The settings correctly configure import resolution for various file extensions, but the React version specified is quite old (
^16.12.0), which may not match the current project version.
🏁 Script executed:
#!/bin/bash # Check the current React version in package.json grep -A 5 '"react":' package.json || grep -A 5 "\"react\":" package.jsonLength of output: 364
Action Required: Update ESLint React Version Setting
The ESLint configuration in
eslint.config.mjson lines 66–75 still specifies React version"^16.12.0", but the currentpackage.jsonshows the project is using React version"^18.0.0". Please update the ESLint config to match the installed version to maintain consistency and avoid any potential mismatches.
- File:
eslint.config.mjs(lines 66–75)- Change needed: Update
react.versionfrom"^16.12.0"to"^18.0.0"src/lib/form/slider/handle.tsx (1)
55-56:
⚠️ Potential issueRemove empty JSX fragment and handle potential undefined value
The ESLint disable comment for non-null assertion has been removed, but the code still uses a non-null assertion with
dragging!.toString()on line 56. This might now trigger ESLint warnings. The empty JSX fragment{}doesn't serve any purpose.Consider properly handling the potentially undefined value:
- {} - <StyledHandle dragging={dragging!.toString()} {...props} /> + <StyledHandle dragging={(dragging ?? false).toString()} {...props} />📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.<StyledHandle dragging={(dragging ?? false).toString()} {...props} />src/stories/modal.stories.tsx (1)
5-5:
⚠️ Potential issueIncorrect import path for ModalComponent
The Modal story is importing
ModalComponentfrom "../lib/container/box" which appears to be incorrect. A Modal component should be imported from a modal-related file, not a box component.-import ModalComponent from "../lib/container/box"; +import ModalComponent from "../lib/container/modal"; // or the correct path to modalVerify the correct import path for the Modal component to ensure the story is displaying the intended component.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.import ModalComponent from "../lib/container/modal"; // or the correct path to modalsrc/stories/displayLarge.stories.tsx (1)
1-27: 💡 Verification agent
🧩 Analysis chain
Storybook setup looks good but verify display component naming consistency.
This Storybook story file for the LargeDisplayComponent is well-structured with appropriate imports, metadata configuration, and story definition. The component is properly configured with theme, background, sizing, and content properties.
I noticed that in another file (
displaySmall.stories.tsx), there's also a story namedDisplayLargewith different property values. Consider verifying that the story naming is consistent across files to avoid confusion.
🏁 Script executed:
#!/bin/bash # Check for potential display component naming inconsistencies grep -r "export const DisplayLarge" --include="*.stories.tsx" src/Length of output: 216
Naming Inconsistency in Story Exports Detected
The story export name "DisplayLarge" appears in both
src/stories/displayLarge.stories.tsxandsrc/stories/displaySmall.stories.tsx, which can lead to confusion. Please verify whether the export indisplaySmall.stories.tsxshould be renamed (e.g., to "DisplaySmall") to reflect the intended component accurately.
- Files to review:
src/stories/displayLarge.stories.tsxsrc/stories/displaySmall.stories.tsxsrc/lib/form/file-uploader.tsx (1)
132-133: 🛠️ Refactor suggestion
Removed ESLint directive for non-null assertion
The ESLint directive for the non-null assertion was removed, which is good for code quality. However, it would be better to handle the null case explicitly to prevent potential runtime errors.
- setFileSelected(event.target.files![0]); + if (event.target.files && event.target.files.length > 0) { + setFileSelected(event.target.files[0]); + }📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.if (event.target.files && event.target.files.length > 0) { setFileSelected(event.target.files[0]); }src/stories/Configure.mdx (1)
29-29:
⚠️ Potential issueFix invalid CSS property
The property
'path fill'is not a valid CSS property. Thefillproperty is already applied to the SVG itself, so this line can be removed.style={{ marginLeft: '4px', display: 'inline-block', shapeRendering: 'inherit', verticalAlign: 'middle', fill: 'currentColor', - 'path fill': 'currentColor' }}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.style={{ marginLeft: '4px', display: 'inline-block', shapeRendering: 'inherit', verticalAlign: 'middle', fill: 'currentColor' }}src/lib/display/icon.tsx (1)
24-24:
⚠️ Potential issueFix typo in className
There's a typo in the class name
max--8which should bemax-h-8.- <Icon className="max--8 max-w-8" /> + <Icon className="max-h-8 max-w-8" />📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.<Icon className="max-h-8 max-w-8" />
|
Summary by CodeRabbit
New Features
Refactor & Style
Chores
PR-Codex overview
This PR focuses on refactoring and updating various components in the codebase, enhancing the design and functionality of form elements, displays, and messages while removing deprecated components.
Detailed summary
src/lib/form/field.tsx,radio.tsx,textarea.tsxtailwindcss-react-aria-componentsdependencysrc/lib/dot.tsx,ButtonIcon.tsx,accordion-item.tsx, etc.Box,Modal,Card,DisplayLarge,DisplaySmallfor improved structureTextField,NumberField,TextAreacomponentsRadioGroupfor better radio button managementAlert,Push,Copiable,Tooltipcomponents with updated designs