feat: update Tailwind classes for new border radius tokens

through the new transform.

Changes generated by running: 'node ../transforms/tokens-v16.mjs' from
the 'src' folder in packages/orbit-components.

BREAKING CHANGE: All the classes using normal border radius will now see
a 1px larger border radius through the Orbit Design Token update and
mapping between old tokens and new.

packages/orbit-components/src/Accordion/AccordionSection/index.tsx

@@ -29,7 +29,7 @@ const AccordionSection = ({
 
   return (
     <div
-      className="border-elevation-flat-border-color rounded-normal my-xs bg-elevation-flat relative w-full border border-solid"
+      className="border-elevation-flat-border-color rounded-100 my-xs bg-elevation-flat relative w-full border border-solid"
       data-test={dataTest}
     >
       <Loading loading={loading} type="boxLoader" dataTest={dataTest && `${dataTest}Loading`}>

packages/orbit-components/src/Alert/index.tsx

@@ -130,10 +130,10 @@ const Alert = (props: Props) => {
   return (
     <div
       className={cx(
-        "rounded-large text-ink-dark font-base text-normal p-sm relative box-border flex w-full border border-t-[3px] leading-normal",
+        "rounded-150 text-ink-dark font-base text-normal p-sm relative box-border flex w-full border border-t-[3px] leading-normal",
         closable && "pe-lg",
         "lm:border-s-[3px] lm:border-t",
-        "tb:rounded-normal",
+        "tb:rounded-100",
         suppressed ? "bg-cloud-light border-cloud-normal lm:border-t-cloud-normal" : COLORS[type],
         ACCENT_BORDER[type],
         spaceAfter && spaceAfterClasses[spaceAfter],

packages/orbit-components/src/Box/helpers/tailwindClasses.ts

@@ -104,44 +104,86 @@ export enum BORDER_RADIUS {
   NORMAL = "normal",
   LARGE = "large",
   CIRCLE = "circle",
+  NONE = "none",
+  FIFTY = "50",
+  ONE_HUNDRED = "100",
+  ONE_HUNDRER_FIFTY = "150",
+  THREE_HUNDRED = "300",
+  FOUR_HUNDRED = "400",
 }
 
 export const borderRadiusClasses: {
   [K in QUERIES | BORDER_RADIUS]: K extends QUERIES ? Record<BORDER_RADIUS, string> : string;
 } = {
-  [BORDER_RADIUS.SMALL]: "rounded-small",
-  [BORDER_RADIUS.NORMAL]: "rounded-normal",
-  [BORDER_RADIUS.LARGE]: "rounded-large",
+  [BORDER_RADIUS.SMALL]: "rounded-50",
+  [BORDER_RADIUS.NORMAL]: "rounded-100",
+  [BORDER_RADIUS.LARGE]: "rounded-150",
   [BORDER_RADIUS.CIRCLE]: "rounded-full",
+  [BORDER_RADIUS.NONE]: "rounded-none",
+  [BORDER_RADIUS.FIFTY]: "rounded-50",
+  [BORDER_RADIUS.ONE_HUNDRED]: "rounded-100",
+  [BORDER_RADIUS.ONE_HUNDRER_FIFTY]: "rounded-150",
+  [BORDER_RADIUS.THREE_HUNDRED]: "rounded-300",
+  [BORDER_RADIUS.FOUR_HUNDRED]: "rounded-400",
   [QUERIES.LARGEDESKTOP]: {
-    [BORDER_RADIUS.SMALL]: "ld:rounded-small",
-    [BORDER_RADIUS.NORMAL]: "ld:rounded-normal",
-    [BORDER_RADIUS.LARGE]: "ld:rounded-large",
+    [BORDER_RADIUS.SMALL]: "ld:rounded-50",
+    [BORDER_RADIUS.NORMAL]: "ld:rounded-100",
+    [BORDER_RADIUS.LARGE]: "ld:rounded-150",
     [BORDER_RADIUS.CIRCLE]: "ld:rounded-full",
+    [BORDER_RADIUS.NONE]: "ld:rounded-none",
+    [BORDER_RADIUS.FIFTY]: "ld:rounded-50",
+    [BORDER_RADIUS.ONE_HUNDRED]: "ld:rounded-100",
+    [BORDER_RADIUS.ONE_HUNDRER_FIFTY]: "ld:rounded-150",
+    [BORDER_RADIUS.THREE_HUNDRED]: "ld:rounded-300",
+    [BORDER_RADIUS.FOUR_HUNDRED]: "ld:rounded-400",
   },
   [QUERIES.DESKTOP]: {
-    [BORDER_RADIUS.SMALL]: "de:rounded-small",
-    [BORDER_RADIUS.NORMAL]: "de:rounded-normal",
-    [BORDER_RADIUS.LARGE]: "de:rounded-large",
+    [BORDER_RADIUS.SMALL]: "de:rounded-50",
+    [BORDER_RADIUS.NORMAL]: "de:rounded-100",
+    [BORDER_RADIUS.LARGE]: "de:rounded-150",
     [BORDER_RADIUS.CIRCLE]: "de:rounded-full",
+    [BORDER_RADIUS.NONE]: "de:rounded-none",
+    [BORDER_RADIUS.FIFTY]: "de:rounded-50",
+    [BORDER_RADIUS.ONE_HUNDRED]: "de:rounded-100",
+    [BORDER_RADIUS.ONE_HUNDRER_FIFTY]: "de:rounded-150",
+    [BORDER_RADIUS.THREE_HUNDRED]: "de:rounded-300",
+    [BORDER_RADIUS.FOUR_HUNDRED]: "de:rounded-400",
   },
   [QUERIES.TABLET]: {
-    [BORDER_RADIUS.SMALL]: "tb:rounded-small",
-    [BORDER_RADIUS.NORMAL]: "tb:rounded-normal",
-    [BORDER_RADIUS.LARGE]: "tb:rounded-large",
+    [BORDER_RADIUS.SMALL]: "tb:rounded-50",
+    [BORDER_RADIUS.NORMAL]: "tb:rounded-100",
+    [BORDER_RADIUS.LARGE]: "tb:rounded-150",
     [BORDER_RADIUS.CIRCLE]: "tb:rounded-full",
+    [BORDER_RADIUS.NONE]: "tb:rounded-none",
+    [BORDER_RADIUS.FIFTY]: "tb:rounded-50",
+    [BORDER_RADIUS.ONE_HUNDRED]: "tb:rounded-100",
+    [BORDER_RADIUS.ONE_HUNDRER_FIFTY]: "tb:rounded-150",
+    [BORDER_RADIUS.THREE_HUNDRED]: "tb:rounded-300",
+    [BORDER_RADIUS.FOUR_HUNDRED]: "tb:rounded-400",
   },
   [QUERIES.LARGEMOBILE]: {
-    [BORDER_RADIUS.SMALL]: "lm:rounded-small",
-    [BORDER_RADIUS.NORMAL]: "lm:rounded-normal",
-    [BORDER_RADIUS.LARGE]: "lm:rounded-large",
+    [BORDER_RADIUS.SMALL]: "lm:rounded-50",
+    [BORDER_RADIUS.NORMAL]: "lm:rounded-100",
+    [BORDER_RADIUS.LARGE]: "lm:rounded-150",
     [BORDER_RADIUS.CIRCLE]: "lm:rounded-full",
+    [BORDER_RADIUS.NONE]: "lm:rounded-none",
+    [BORDER_RADIUS.FIFTY]: "lm:rounded-50",
+    [BORDER_RADIUS.ONE_HUNDRED]: "lm:rounded-100",
+    [BORDER_RADIUS.ONE_HUNDRER_FIFTY]: "lm:rounded-150",
+    [BORDER_RADIUS.THREE_HUNDRED]: "lm:rounded-300",
+    [BORDER_RADIUS.FOUR_HUNDRED]: "lm:rounded-400",
   },
   [QUERIES.MEDIUMMOBILE]: {
-    [BORDER_RADIUS.SMALL]: "mm:rounded-small",
-    [BORDER_RADIUS.NORMAL]: "mm:rounded-normal",
-    [BORDER_RADIUS.LARGE]: "mm:rounded-large",
+    [BORDER_RADIUS.SMALL]: "mm:rounded-50",
+    [BORDER_RADIUS.NORMAL]: "mm:rounded-100",
+    [BORDER_RADIUS.LARGE]: "mm:rounded-150",
     [BORDER_RADIUS.CIRCLE]: "mm:rounded-full",
+    [BORDER_RADIUS.NONE]: "mm:rounded-none",
+    [BORDER_RADIUS.FIFTY]: "mm:rounded-50",
+    [BORDER_RADIUS.ONE_HUNDRED]: "mm:rounded-100",
+    [BORDER_RADIUS.ONE_HUNDRER_FIFTY]: "mm:rounded-150",
+    [BORDER_RADIUS.THREE_HUNDRED]: "mm:rounded-300",
+    [BORDER_RADIUS.FOUR_HUNDRED]: "mm:rounded-400",
   },
 };
 

packages/orbit-components/src/CallOutBanner/index.tsx

@@ -22,7 +22,7 @@ const CallOutBanner = ({
   // eslint-disable-next-line jsx-a11y/click-events-have-key-events
   <div
     className={cx(
-      "orbit-call-out-banner bg-white-normal rounded-small p-md lm:flex-row lm:p-lg flex flex-col items-start justify-start border border-solid text-start",
+      "orbit-call-out-banner bg-white-normal rounded-50 p-md lm:flex-row lm:p-lg flex flex-col items-start justify-start border border-solid text-start",
       onClick
         ? "shadow-action duration-fast hover:shadow-action-active active:shadow-action-active cursor-pointer border-transparent transition-shadow ease-in-out hover:outline-none active:outline-none"
         : "border-cloud-normal",

packages/orbit-components/src/Card/CardSection/index.tsx

@@ -55,7 +55,7 @@ export default function CardSection({
     <div
       className={cx(
         "duration-fast lm:border-x border-b transition-all ease-in-out",
-        opened && "my-xs rounded-normal shadow-action-active [&+*]:border-t",
+        opened && "my-xs rounded-100 shadow-action-active [&+*]:border-t",
         onClick != null && "hover:bg-white-normal-hover cursor-pointer",
       )}
       data-test={dataTest}

packages/orbit-components/src/Card/index.tsx

@@ -46,7 +46,7 @@ export default function Card({
     <div
       id={id}
       className={cx(
-        "orbit-card font-base bg-white-normal [&>*]:border-elevation-flat-border-color lm:[&>*:first-child]:rounded-t-normal lm:[&>*:last-child]:rounded-b-normal w-full [&>*:first-child]:border-t",
+        "orbit-card font-base bg-white-normal [&>*]:border-elevation-flat-border-color lm:[&>*:first-child]:rounded-t-100 lm:[&>*:last-child]:rounded-b-100 w-full [&>*:first-child]:border-t",
         spaceAfter != null && spaceAfterClasses[spaceAfter],
       )}
       data-test={dataTest}

packages/orbit-components/src/CarrierLogo/index.tsx

@@ -131,7 +131,7 @@ const CarrierLogo = ({
         <img
           className={cx(
             "max-w-none bg-transparent",
-            rounded ? "rounded-full" : "rounded-normal",
+            rounded ? "rounded-full" : "rounded-100",
             inlineStacked ? "not-first:-ms-xs border border-solid border-white" : "last:self-end",
             carriers.length > 1 && !inlineStacked
               ? [

packages/orbit-components/src/Checkbox/index.tsx

@@ -74,7 +74,7 @@ const Checkbox = React.forwardRef<HTMLInputElement, Props>((props, ref) => {
             "border border-solid",
             "flex shrink-0 grow-0 basis-auto items-center justify-center",
             "size-icon-medium",
-            "rounded-large de:rounded-normal",
+            "rounded-150 de:rounded-100",
             "duration-fast transition-all ease-in-out",
             "peer-focus:outline-blue-normal peer-focus:outline peer-focus:outline-2",
             "[&>svg]:size-icon-small [&>svg]:invisible peer-checked:[&>svg]:visible",

packages/orbit-components/src/CountryFlag/index.tsx

@@ -26,7 +26,7 @@ const CountryFlag = ({ dataTest, size = SIZES.MEDIUM, id, ...props }: Props) =>
 
   return (
     <div
-      className={cx("rounded-small bg-country-flag-background relative shrink-0 overflow-hidden", {
+      className={cx("rounded-50 bg-country-flag-background relative shrink-0 overflow-hidden", {
         "h-country-flag-small w-country-flag-small": size === SIZES.SMALL,
         "h-country-flag-medium w-country-flag-medium": size === SIZES.MEDIUM,
       })}
@@ -41,7 +41,7 @@ const CountryFlag = ({ dataTest, size = SIZES.MEDIUM, id, ...props }: Props) =>
         src={src}
         srcSet={srcSet}
       />
-      <div className="rounded-small shadow-country-flag absolute inset-0 block size-full" />
+      <div className="rounded-50 shadow-country-flag absolute inset-0 block size-full" />
     </div>
   );
 };

packages/orbit-components/src/Coupon/index.tsx

@@ -6,7 +6,7 @@ import type { Props } from "./types";
 
 const Coupon = ({ children, dataTest, id }: Props) => (
   <mark
-    className="orbit-coupon text-small border-cloud-dark py-xxxs px-xxs rounded-normal text-ink-dark inline border border-dashed bg-transparent font-medium uppercase tracking-[0.75px]"
+    className="orbit-coupon text-small border-cloud-dark py-xxxs px-xxs rounded-100 text-ink-dark inline border border-dashed bg-transparent font-medium uppercase tracking-[0.75px]"
     data-test={dataTest}
     id={id}
   >

packages/orbit-components/src/ErrorFormTooltip/Tooltip/index.tsx

@@ -113,13 +113,13 @@ const ErrorFormTooltip = ({
       data-test={dataTest}
       className={cx(
         "flex justify-between overflow-visible",
-        "rounded-large py-xs px-sm z-10 box-border",
+        "rounded-150 py-xs px-sm z-10 box-border",
         "max-h-none w-[min(calc(100%-20px),_100vw)]",
         isHelp ? "pe-sm bg-blue-normal" : "bg-red-normal",
         shown ? "visible opacity-100" : "invisible opacity-0",
         "duration-fast transition-[opacity,visibility] ease-in-out",
         "bottom-[var(--error-form-tooltip-bottom)] left-[var(--error-form-tooltip-left)] right-[var(--error-form-tooltip-right)] top-[var(--error-form-tooltip-top)] [position:var(--error-form-tooltip-position)] [transform:var(--error-form-tooltip-transform)]",
-        "lm:w-auto tb:rounded-normal",
+        "lm:w-auto tb:rounded-100",
         "[&>img]:max-w-full",
       )}
       style={cssVars as React.CSSProperties}

packages/orbit-components/src/HorizontalScroll/HorizontalScroll.ct-story.tsx

@@ -24,7 +24,7 @@ export default function HorizontalScrollVisualStory() {
     <div
       // eslint-disable-next-line react/no-array-index-key -- okay in constants
       key={key}
-      className="rounded-large h-form-box-normal px-md bg-product-normal text-white-foreground font-base flex items-center justify-center"
+      className="rounded-150 h-form-box-normal px-md bg-product-normal text-white-foreground font-base flex items-center justify-center"
     >
       {txt}
     </div>

packages/orbit-components/src/Icon/IconList.tsx

@@ -3,7 +3,7 @@ import * as React from "react";
 import * as Icons from "../icons";
 
 const IconList = () => (
-  <div className="rounded-large flex flex-row flex-wrap justify-between">
+  <div className="rounded-150 flex flex-row flex-wrap justify-between">
     {Object.keys(Icons)
       .filter(n => n !== "__namedExportsOrder")
       .map(icon => {
@@ -12,7 +12,7 @@ const IconList = () => (
         const iconName = `${icon}`;
         return (
           <div
-            className="gap-lg bg-white-normal mb-lg rounded-large border-cloud-normal px-lg flex w-full flex-row content-center items-center justify-start border border-solid"
+            className="gap-lg bg-white-normal mb-lg rounded-150 border-cloud-normal px-lg flex w-full flex-row content-center items-center justify-start border border-solid"
             style={{ minHeight: "80px" }}
             key={icon}
           >

packages/orbit-components/src/InputField/index.tsx

@@ -31,7 +31,7 @@ export const FakeInput = ({
       "h-form-box-normal text-form-element-normal z-[1]",
       "absolute left-0 top-0",
       "duration-fast transition-all ease-in-out",
-      "rounded-large tb:rounded-normal box-border w-full",
+      "rounded-150 tb:rounded-100 box-border w-full",
       "peer-focus:outline-blue-normal peer-focus:outline peer-focus:outline-2",
       error ? "shadow-form-element-error" : "shadow-form-element",
       disabled || readOnly

packages/orbit-components/src/InputFile/index.tsx

@@ -113,7 +113,7 @@ const InputFile = React.forwardRef<HTMLDivElement, Props>((props, ref) => {
           !disabled &&
             (error ? "hover:shadow-form-element-error-hover" : "hover:shadow-form-element-hover"),
           "duration-fast transition-shadow ease-in-out",
-          "rounded-normal",
+          "rounded-100",
           disabled
             ? "bg-form-element-disabled-background cursor-not-allowed"
             : "bg-form-element-background cursor-pointer",

packages/orbit-components/src/InputGroup/index.tsx

@@ -132,7 +132,7 @@ const InputGroup = React.forwardRef<HTMLDivElement, Props>(
 
         <div
           className={cx(
-            "text-normal h-form-box-normal duration-fast rounded-large tb:rounded-normal z-[1] w-full transition-shadow ease-in-out",
+            "text-normal h-form-box-normal duration-fast rounded-150 tb:rounded-100 z-[1] w-full transition-shadow ease-in-out",
             active && "outline-blue-normal outline outline-2",
             disabled ? "bg-form-element-disabled-background" : "bg-form-element-background",
             !errorReal && "shadow-form-element",

packages/orbit-components/src/InputSelect/index.tsx

@@ -394,7 +394,7 @@ const InputSelect = React.forwardRef<HTMLInputElement, Props>(
     const dropdown = isOpened && (
       <ul
         className={cx(
-          "font-base bg-white-normal lm:absolute lm:inset-x-0 lm:overflow-y-scroll lm:shadow-action lm:rounded-normal z-[3] flex w-full flex-col",
+          "font-base bg-white-normal lm:absolute lm:inset-x-0 lm:overflow-y-scroll lm:shadow-action lm:rounded-100 z-[3] flex w-full flex-col",
           label
             ? "lm:top-[calc(theme(height.form-box-normal)+theme(spacing.xl))]"
             : "lm:top-[calc(theme(height.form-box-normal)+theme(spacing.xs))]",

packages/orbit-components/src/Itinerary/ItinerarySegment/index.tsx

@@ -64,7 +64,7 @@ const ItinerarySegment = ({
   return (
     <div
       className={cx(
-        "rounded-large pb-sm px-0",
+        "rounded-150 pb-sm px-0",
         spaceAfter && spaceAfterClasses[spaceAfter],
         !noElevation && "shadow-fixed",
         actionable && !noElevation && "hover:shadow-action-active focus:shadow-action-active",

packages/orbit-components/src/Itinerary/ItineraryStatus/index.tsx

@@ -62,7 +62,7 @@ const ItineraryStatus = ({
   return (
     <div
       className={cx(
-        "rounded-large shadow-fixed box-border flex w-full flex-col border-0 border-s-[3px] border-solid",
+        "rounded-150 shadow-fixed box-border flex w-full flex-col border-0 border-s-[3px] border-solid",
         type && borderColorClasses[type],
         spaceAfter && spaceAfterClasses[spaceAfter],
         actionable && "hover:shadow-action-active",

packages/orbit-components/src/Popover/components/ContentWrapper.tsx

@@ -177,7 +177,7 @@ const PopoverContentWrapper = ({
           "lm:[position:var(--popper-position)]",
           "lm:[transform:var(--popper-transform)]",
           "lm:transition-[opacity] lm:duration-fast lm:ease-in-out",
-          "lm:rounded-normal",
+          "lm:rounded-100",
           "lm:shadow-raised",
           "lm:max-h-none",
           isInsideModal ? "lm:z-[1000]" : "lm:z-[var(--popover-zIndex)]",
@@ -210,7 +210,7 @@ const PopoverContentWrapper = ({
                 "max-h-[calc(var(--window-height)-var(--actions-height)-32px)]",
               noPadding ? "p-0" : "p-md",
               "lm:max-h-[var(--max-height)]",
-              "lm:rounded-normal",
+              "lm:rounded-100",
               "lm:bottom-auto",
               "lm:left-auto",
               "lm:relative",
@@ -238,7 +238,7 @@ const PopoverContentWrapper = ({
                 "[&_.orbit-button-primitive]:w-full [&_.orbit-button-primitive]:flex-auto",
                 "lm:relative",
                 "lm:bottom-auto lm:left-auto",
-                "lm:rounded-b-normal",
+                "lm:rounded-b-100",
                 "lm:[&_.orbit-button-primitive]:w-auto lm:[&_.orbit-button-primitive]:grow-0",
               )}
             >

packages/orbit-components/src/Select/index.tsx

@@ -162,7 +162,7 @@ const Select = React.forwardRef<HTMLSelectElement, Props>((props, ref) => {
               "border-0",
               customValueText && "!text-transparent",
               "duration-fast transition-shadow ease-in-out",
-              "rounded-large tb:rounded-normal",
+              "rounded-150 tb:rounded-100",
               "[&>option]:text-form-element-filled-foreground",
               "disabled:text-form-element-disabled-foreground disabled:cursor-not-allowed",
             )}

packages/orbit-components/src/SkipLink/index.tsx

@@ -12,7 +12,7 @@ const SkipLink = ({ links, buttonLabel, dataTest, id }: Props) => {
         links.map(({ href, name, onClick }, index) => {
           return (
             <a
-              className="orbit-skip-link ltr:left-md rtl:right-md top-md p-md bg-white-normal z-onTop font-base text-large rounded-normal text-ink-dark absolute underline [&:not(:focus)]:sr-only"
+              className="orbit-skip-link ltr:left-md rtl:right-md top-md p-md bg-white-normal z-onTop font-base text-large rounded-100 text-ink-dark absolute underline [&:not(:focus)]:sr-only"
               key={encodeURIComponent(name + index)}
               href={href}
               tabIndex={onClick && 0}

packages/orbit-components/src/Slider/components/Bar/index.tsx

@@ -27,7 +27,7 @@ export const calculateBarPosition = (
 const BarPart = ({ className, style }: { className: string; style?: React.CSSProperties }) => {
   return (
     <div
-      className={cx("h-xxs rounded-normal absolute top-1/2 -translate-y-1/2", className)}
+      className={cx("h-xxs rounded-100 absolute top-1/2 -translate-y-1/2", className)}
       style={style}
     />
   );

packages/orbit-components/src/Slider/index.tsx

@@ -362,7 +362,7 @@ const Slider = ({
           </Hide>
           <div
             className={cx(
-              "pb-xs tb:w-[calc(100%+48px)] tb:absolute tb:-bottom-md tb:-inset-x-lg tb:pt-sm tb:px-lg tb:pb-[48px] tb:rounded-normal tb:transition-opacity tb:ease-in-out tb:duration-fast tb:bg-white-normal tb:shadow-raised",
+              "pb-xs tb:w-[calc(100%+48px)] tb:absolute tb:-bottom-md tb:-inset-x-lg tb:pt-sm tb:px-lg tb:pb-[48px] tb:rounded-100 tb:transition-opacity tb:ease-in-out tb:duration-fast tb:bg-white-normal tb:shadow-raised",
               focused ? "tb:visible tb:opacity-100" : "tb:invisible tb:opacity-0",
             )}
           >

packages/orbit-components/src/Tabs/components/Tab/index.tsx

@@ -33,7 +33,7 @@ const Tab = ({
         "min-w-fit",
         "relative box-border",
         "font-base font-medium",
-        "rounded-t-normal",
+        "rounded-t-100",
         "duration-fast transition-colors ease-in-out",
         "px-md",
         compact ? "text-normal py-[5px] leading-normal" : "text-large leading-large py-[9px]",

packages/orbit-components/src/Tag/index.tsx

@@ -41,9 +41,9 @@ const Tag = React.forwardRef<HTMLDivElement, Props>(
       <div
         className={cx(
           "orbit-tag",
-          "font-base rounded-large p-xs box-border inline-flex items-center justify-center font-medium",
+          "font-base rounded-150 p-xs box-border inline-flex items-center justify-center font-medium",
           "duration-fast transition-[color,_background-color,_box-shadow] ease-in-out",
-          "tb:rounded-normal",
+          "tb:rounded-100",
           size === SIZES.SMALL && "text-small leading-small",
           size === SIZES.NORMAL && "text-normal leading-normal",
           !!(onClick || onRemove) &&

packages/orbit-components/src/Textarea/index.tsx

@@ -84,7 +84,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, Props>((props, ref) => {
         className={cx(
           "w-full appearance-none",
           "font-base text-normal p-sm leading-normal",
-          "rounded-normal relative box-border block overflow-auto",
+          "rounded-100 relative box-border block overflow-auto",
           "min-h-form-box-normal",
           "duration-fast transition-shadow ease-in-out",
           "border border-transparent",