chore: adjust new tailwind version

package.json

@@ -98,7 +98,7 @@
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.2.0",
-    "eslint-plugin-tailwindcss": "^3.13.0",
+    "eslint-plugin-tailwindcss": "^3.14.0",
     "fast-glob": "^3.2.12",
     "filedirname": "^2.7.0",
     "gitdiff-parser": "^0.3.1",
@@ -135,7 +135,7 @@
     "stylelint-config-recommended": "^13.0.0",
     "stylelint-config-styled-components": "^0.1.1",
     "stylelint-config-tailwindcss": "^0.0.7",
-    "tailwindcss": "^3.3.3",
+    "tailwindcss": "^3.4.0",
     "ts-node": "^10.9.1",
     "tsc-files": "^1.1.3",
     "tsup": "^6.7.0",

packages/orbit-components/package.json

@@ -139,7 +139,7 @@
     "surge": "^0.23.0",
     "svg2ttf": "^6.0.0",
     "svgicons2svgfont": "^10.0.0",
-    "tailwindcss": "^3.3.2",
+    "tailwindcss": "^3.4.0",
     "ttf2woff2": "^4.0.1",
     "vite": "^4.4.12",
     "webpack": "^5.76.0",

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

@@ -147,7 +147,7 @@ const Alert = (props: Props) => {
             "me-xs m-0 shrink-0 leading-none",
             inlineActions && "flex items-center",
             ICON_COLOR[type],
-            "tb:me-xs tb:[&_svg]:w-icon-medium tb:[&_svg]:h-icon-medium",
+            "tb:me-xs tb:[&_svg]:size-icon-medium",
           )}
         >
           <StyledIcon type={type} icon={icon} />

packages/orbit-components/src/BadgeList/BadgeListItem/index.tsx

@@ -38,8 +38,8 @@ export const VerticalBadge = ({
   return (
     <div
       className={cx(
-        "me-xs h-icon-large w-icon-large rounded-circle flex shrink-0 items-center justify-center",
-        "[&_svg]:h-icon-small [&_svg]:w-icon-small",
+        "me-xs size-icon-large rounded-circle flex shrink-0 items-center justify-center",
+        "[&_svg]:size-icon-small",
         type && BACKGROUND[type],
       )}
       aria-hidden

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

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

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

@@ -32,7 +32,7 @@ const CountryFlag = ({ dataTest, size = SIZES.MEDIUM, id, ...props }: Props) =>
       })}
     >
       <img
-        className="block h-full w-full shrink-0"
+        className="block size-full shrink-0"
         key={code}
         alt={name}
         title={name}
@@ -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 h-full w-full" />
+      <div className="rounded-small shadow-country-flag absolute inset-0 block size-full" />
     </div>
   );
 };

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

@@ -88,7 +88,7 @@ const Dialog = ({
       id={id}
       className={cx([
         "font-base",
-        "h-full w-full",
+        "size-full",
         "p-md z-overlay box-border overflow-x-hidden bg-[rgba(0,0,0,0.5)]",
         "fixed inset-0",
         "duration-fast transition-opacity ease-in-out",

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

@@ -98,7 +98,7 @@ const Drawer = ({
         "orbit-drawer",
         "flex",
         "fixed inset-0",
-        "h-full w-full",
+        "size-full",
         "z-drawer",
         "duration-fast transition-colors ease-in-out",
         overlayShown ? "visible" : "invisible",
@@ -114,7 +114,7 @@ const Drawer = ({
         className={cx(
           "box-border block",
           "absolute inset-y-0",
-          "h-full w-full",
+          "size-full",
           "font-base",
           "overflow-y-auto",
           "overflow-x-hidden",

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

@@ -130,7 +130,7 @@ const ErrorFormTooltip = ({
           isVertical ? "bottom-xxxs" : "top-xxxs",
           inlineLabel && "rtl:start-0",
           isHelp ? "before:bg-blue-normal" : "before:bg-red-normal",
-          "before:h-xs before:w-xs before:absolute before:-translate-x-1/2 before:-translate-y-1/2 before:rotate-45",
+          "before:size-xs before:absolute before:-translate-x-1/2 before:-translate-y-1/2 before:rotate-45",
         )}
         ref={setArrowRef}
       />

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

@@ -52,8 +52,7 @@ const Prefix = ({ children }: { children: React.ReactNode }) => (
       "text-form-element-prefix-foreground",
       "ps-sm pointer-events-none z-[3] flex h-full items-center justify-center",
       "[&>svg]:text-icon-tertiary-foreground",
-      "[&_*_svg]:w-icon-medium [&>svg]:w-icon-medium",
-      "[&_*_svg]:h-icon-medium [&>svg]:h-icon-medium",
+      "[&_svg]:size-icon-medium",
       "[&_.orbit-button-primitive-icon]:text-icon-secondary-foreground",
     )}
   >
@@ -236,7 +235,7 @@ const InputField = React.forwardRef<HTMLInputElement, Props>((props, ref) => {
             "orbit-input-field-input",
             "font-base p-form-element-normal-padding",
             "z-[2] appearance-none border-none shadow-none",
-            "box-border h-full w-full min-w-0",
+            "box-border size-full min-w-0",
             "bg-transparent",
             "flex-1 basis-1/5",
             "[&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none",

packages/orbit-components/src/List/ListItem/index.tsx

@@ -12,7 +12,7 @@ const ListItem = ({ label, children, icon = <CircleSmall />, dataTest }: Props)
       className="orbit-list-item font-base mb-xxs flex last:m-0 last-of-type:m-0"
     >
       {icon && (
-        <div className="orbit-list-item-icon me-xs [&>.orbit-carrier-logo]:h-icon-small [&>.orbit-carrier-logo]:w-icon-small [&>.orbit-carrier-logo>img]:h-icon-small [&>.orbit-carrier-logo>img]:w-icon-small flex flex-none">
+        <div className="orbit-list-item-icon me-xs [&>.orbit-carrier-logo]:size-icon-small [&>.orbit-carrier-logo>img]:size-icon-small flex flex-none">
           {icon}
         </div>
       )}

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

@@ -58,7 +58,7 @@ const ListChoice = React.forwardRef<HTMLDivElement, Props>(
           <div
             className={cx(
               "me-xs h-icon-medium flex flex-none items-center self-start",
-              "[&_svg]:w-icon-medium [&_svg]:h-icon-medium [&_svg]:text-icon-primary-foreground [&_svg]:self-center",
+              "[&_svg]:size-icon-medium [&_svg]:text-icon-primary-foreground [&_svg]:self-center",
               "[&_svg]:duration-fast [&_svg]:transition-[color] [&_svg]:ease-in-out",
             )}
           >

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

@@ -10,7 +10,7 @@ import useTheme from "../hooks/useTheme";
 const CircleLoader = ({ animationDelay }: { animationDelay?: string }) => {
   return (
     <div
-      className="animate-loader rounded-circle bg-cloud-dark h-xs w-xs me-[6px] [&:nth-child(3)]:m-0"
+      className="animate-loader rounded-circle bg-cloud-dark size-xs me-[6px] [&:nth-child(3)]:m-0"
       style={{ animationDelay }}
     />
   );
@@ -58,7 +58,7 @@ const Loader = ({ type, customSize }) => {
   return (
     <svg
       viewBox="0 0 40 40"
-      className="orbit-loading-spinner animate-spinner h-xxl w-xxl"
+      className="orbit-loading-spinner animate-spinner size-xxl"
       stroke={type === TYPE_OPTIONS.BUTTON_LOADER ? "currentColor" : theme.orbit.paletteCloudDark}
     >
       <circle
@@ -95,7 +95,7 @@ const Loading = ({
             "overflow-hidden",
             "box-border",
             type === TYPE_OPTIONS.BUTTON_LOADER &&
-              "[&_.orbit-loading-spinner]:h-icon-medium [&_.orbit-loading-spinner]:w-icon-medium absolute start-0 top-0 h-full w-full justify-center",
+              "[&_.orbit-loading-spinner]:size-icon-medium absolute start-0 top-0 size-full justify-center",
             type === TYPE_OPTIONS.SEARCH_LOADER && "h-[40px] justify-start",
             type === TYPE_OPTIONS.INLINE_LOADER && "inline-flex min-h-[19px] justify-center",
             type !== TYPE_OPTIONS.INLINE_LOADER && "flex",

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

@@ -399,7 +399,7 @@ const Modal = React.forwardRef<Instance, Props>(
       <div
         className={cx(
           "orbit-modal-body",
-          "z-overlay font-base fixed inset-0 box-border h-full w-full overflow-x-hidden outline-none",
+          "z-overlay font-base fixed inset-0 box-border size-full overflow-x-hidden outline-none",
           !isMobileFullPage && "bg-[black]/50",
           "lm:overflow-y-auto lm:p-xxl lm:bg-[black]/50",
         )}

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

@@ -143,7 +143,7 @@ const PopoverContentWrapper = ({
           "block",
           "fixed",
           "inset-x-0 top-0",
-          "h-full w-full",
+          "size-full",
           "bg-ink-dark/60",
           "duration-normal transition-[opacity,transform] ease-in-out",
           "z-[999]",

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

@@ -62,7 +62,7 @@ const Radio = React.forwardRef<HTMLInputElement, Props>((props, ref) => {
             "orbit-radio-icon-container",
             "relative box-border",
             "flex flex-none items-center justify-center",
-            "rounded-circle h-icon-medium w-icon-medium",
+            "rounded-circle size-icon-medium",
             "duration-fast scale-100 transition-all ease-in-out",
             "lm:border border-[2px] border-solid",
             "active:scale-95",
@@ -74,7 +74,7 @@ const Radio = React.forwardRef<HTMLInputElement, Props>((props, ref) => {
         >
           <span
             className={cx(
-              "h-xs w-xs rounded-circle",
+              "size-xs rounded-circle",
               disabled ? "bg-cloud-light" : "bg-form-element-background",
               checked ? "visible" : "invisible",
             )}

packages/orbit-components/src/SegmentedSwitch/SwitchSegment/index.tsx

@@ -23,7 +23,7 @@ const SwitchSegment = ({
     <label className="orbit-switch-segment-label relative flex w-full">
       <input
         className={cx(
-          "sr-only absolute m-[-1px] h-[1px] w-[1px] overflow-hidden whitespace-nowrap border-0 p-0 focus:outline-none",
+          "sr-only absolute -m-px size-px overflow-hidden whitespace-nowrap border-0 p-0 focus:outline-none",
           "peer",
         )}
         name={name || "switch-segment"}

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

@@ -131,7 +131,7 @@ const Select = React.forwardRef<HTMLSelectElement, Props>((props, ref) => {
           </div>
         )}
 
-        <div className="relative z-[3] h-full w-full">
+        <div className="relative z-[3] size-full">
           {prefix && (
             <div className="px-sm pointer-events-none absolute top-0 z-[3] flex h-full items-center">
               {prefix}
@@ -158,7 +158,7 @@ const Select = React.forwardRef<HTMLSelectElement, Props>((props, ref) => {
               "pe-xxl",
               prefix ? "ps-[48px]" : "ps-sm",
               "shrink grow basis-1/5",
-              "h-full w-full",
+              "size-full",
               "border-0",
               customValueText && "!text-transparent",
               "duration-fast transition-shadow ease-in-out",

packages/orbit-components/src/Stepper/StepperStateless/index.tsx

@@ -17,7 +17,7 @@ const getMaxWidth = ({ maxWidth }: { maxWidth: string | number }) => {
 const stepperButtonMixin = ({ disabled, active }: { disabled: boolean; active?: boolean }) =>
   cx(
     "[&_svg]:p-xxxs",
-    "de:[&_svg]:h-icon-medium de:[&_svg]:w-icon-medium [&_svg]:h-icon-large [&_svg]:w-icon-large",
+    "de:[&_svg]:size-icon-medium [&_svg]:size-icon-large",
     "[&_svg]:rounded-circle",
     "focus:outline-0",
     "[&_svg]:focus:outline-blue-normal [&_svg]:focus:outline [&_svg]:focus:outline-2",

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

@@ -20,7 +20,7 @@ const Switch = React.forwardRef<HTMLInputElement, Props>(
         >
           <input
             className={cx(
-              "peer absolute inset-0 m-0 h-full w-full p-0 opacity-0",
+              "peer absolute inset-0 m-0 size-full p-0 opacity-0",
               !disabled && "cursor-pointer",
             )}
             ref={ref}
@@ -39,9 +39,9 @@ const Switch = React.forwardRef<HTMLInputElement, Props>(
           />
           <div
             className={cx(
-              "rounded-circle bg-white-normal duration-fast shadow-switch absolute box-border inline-flex h-[24px] w-[24px] items-center justify-center",
+              "rounded-circle bg-white-normal duration-fast shadow-switch absolute box-border inline-flex size-[24px] items-center justify-center",
               "peer-focus:outline-blue-normal peer-focus:outline peer-focus:outline-2",
-              "[&_svg]:h-icon-small [&_svg]:w-icon-small",
+              "[&_svg]:size-icon-small",
               !disabled && "active:shadow-action-active",
               !checked && (icon ? "[&_svg]:text-ink-normal" : "[&_svg]:text-cloud-dark"),
               checked

packages/orbit-components/src/Tile/components/TileWrapper/index.tsx

@@ -50,7 +50,7 @@ const TileWrapper = ({
     >
       {href ? (
         <a
-          className="text-ink-dark focus:outline-blue-normal focus:[&_.orbit-tile-header-icon-right]:text-ink-light-hover link:text-ink-dark link:font-medium visited:text-ink-dark block h-full w-full no-underline outline-none visited:font-medium focus:outline-2"
+          className="text-ink-dark focus:outline-blue-normal focus:[&_.orbit-tile-header-icon-right]:text-ink-light-hover link:text-ink-dark link:font-medium visited:text-ink-dark block size-full no-underline outline-none visited:font-medium focus:outline-2"
           target={href && external ? "_blank" : undefined}
           rel={href && external ? "noopener noreferrer" : undefined}
           href={href || undefined}

packages/orbit-components/src/Toast/ToastMessage.tsx

@@ -81,7 +81,7 @@ const ToastMessage = ({
         }}
       >
         <div
-          className="rounded-large bg-white-normal absolute left-0 top-0 z-[1] h-full w-full animate-[toast-light_var(--toast-message-duration)_linear] opacity-10 will-change-transform rtl:animate-[toast-light-rtl_var(--toast-message-duration)_linear]"
+          className="rounded-large bg-white-normal absolute left-0 top-0 z-[1] size-full animate-[toast-light_var(--toast-message-duration)_linear] opacity-10 will-change-transform rtl:animate-[toast-light-rtl_var(--toast-message-duration)_linear]"
           style={
             {
               "--toast-message-duration": `${dismissTimeout}ms`,

packages/orbit-components/src/primitives/BadgePrimitive/index.tsx

@@ -34,12 +34,7 @@ const BadgePrimitive = ({
     >
       {carriers && <CarrierLogo carriers={carriers} rounded size="medium" />}
       {icon && (
-        <div
-          className={cx(
-            "[&>svg]:h-icon-small [&>svg]:w-icon-small flex shrink-0",
-            Boolean(children) && "me-xxs",
-          )}
-        >
+        <div className={cx("[&>svg]:size-icon-small flex shrink-0", Boolean(children) && "me-xxs")}>
           {icon}
         </div>
       )}

packages/orbit-components/src/primitives/MobileDialogPrimitive/components/DialogContent.tsx

@@ -52,7 +52,7 @@ const DialogContent = ({
       {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
       <div
         className={cx(
-          "fixed inset-0 z-[10011] h-full w-full bg-[rgba(23,27,30,0.6)]",
+          "fixed inset-0 z-[10011] size-full bg-[rgba(23,27,30,0.6)]",
           "[transition:opacity_theme(transitionDuration.normal)_ease-in-out,_visibility_theme(transitionDuration.fast)_linear]",
           shown ? "visible opacity-100" : "duration-normal invisible opacity-0",
         )}

packages/orbit-components/src/primitives/TooltipPrimitive/components/TooltipContent.tsx

@@ -174,7 +174,7 @@ const TooltipContent = ({
         </div>
         <div
           className={cx(
-            "after:absolute after:h-0 after:w-0 after:border-solid",
+            "after:absolute after:size-0 after:border-solid",
             resolveArrowStyles({
               error,
               help,