@obosbbl/grunnmuren-react 3.4.3 → 3.4.4

package/dist/index.mjs

@@ -95,7 +95,7 @@ const Footer = (props)=>/*#__PURE__*/ jsx("div", {
 
 const disclosureButtonVariants = cva({
     base: [
-        'inline-flex cursor-pointer items-center justify-between rounded-lg focus-visible:outline-current focus-visible:outline-focus',
+        'focus-visible:outline-focus inline-flex cursor-pointer items-center justify-between rounded-lg focus-visible:outline-current',
         // Ensure a minimum click area of 44x44px, while making it look like it only has the size of the content
         'p-2.5 focus-visible:outline-offset-[-0.625rem]',
         'data-accordion:-m-2.5'
@@ -109,7 +109,7 @@ const disclosureButtonVariants = cva({
      * When the button is without text, but with a single icon.
      * @default false
      */ isIconOnly: {
-            true: '[&>svg]:h-7 [&>svg]:w-7',
+            true: '[&>svg]:size-7',
             false: 'gap-2.5'
         }
     },
@@ -270,7 +270,7 @@ function Accordion(props) {
                     child,
                     index < childCount - 1 && // Margin is added to enable support for containers with a background color
                     /*#__PURE__*/ jsx("hr", {
-                        className: "mx-2 border-gray-light",
+                        className: "border-gray-light mx-2",
                         "aria-hidden": true
                     })
                 ]
@@ -300,7 +300,7 @@ function AccordionItem(props) {
                         level: 3,
                         _innerWrapper: (children)=>/*#__PURE__*/ jsx(DisclosureButton, {
                                 // Use outline with offset as focus indicator, this does not cover the left sky border on the expanded content and works with or without a background color on the accordion container
-                                className: "flex min-h-11 w-full gap-1.5 rounded-lg px-2 py-3.5 text-left focus-visible:outline-focus-inset!",
+                                className: "focus-visible:outline-focus-inset! flex min-h-11 w-full gap-1.5 rounded-lg px-2 py-3.5 text-left",
                                 type: "button",
                                 withChevron: true,
                                 id: buttonId,
@@ -394,21 +394,21 @@ const alertVariants = cva({
         // Icon styles:
         '[&:has([data-slot="heading"])>svg]:mt-0.5',
         // Heading styles:
-        '**:data-[slot="heading"]:font-medium **:data-[slot="heading"]:text-base **:data-[slot="heading"]:leading-7',
+        '**:data-[slot="heading"]:text-base **:data-[slot="heading"]:leading-7 **:data-[slot="heading"]:font-medium',
         // Content styles:
         '**:data-[slot="content"]:text-sm **:data-[slot="content"]:leading-6 [&:has([data-slot="heading"])_[data-slot="content"]]:col-span-full',
         // Footer styles:
-        '**:data-[slot="footer"]:col-span-full **:data-[slot="footer"]:font-light **:data-[slot="footer"]:text-xs **:data-[slot="footer"]:leading-6'
+        '**:data-[slot="footer"]:col-span-full **:data-[slot="footer"]:text-xs **:data-[slot="footer"]:leading-6 **:data-[slot="footer"]:font-light'
     ],
     variants: {
         /**
      * The variant of the alert
      * @default info
      */ variant: {
-            info: 'border-[#1A7FA7] bg-sky-light',
-            success: 'border-[#0F9B6E] bg-mint-light',
+            info: 'bg-sky-light border-[#1A7FA7]',
+            success: 'bg-mint-light border-[#0F9B6E]',
             warning: 'border-[#C57C13] bg-[#FFF2DE]',
-            danger: 'border-[#C0385D] bg-red-light'
+            danger: 'bg-red-light border-[#C0385D]'
         }
     },
     defaultVariants: {
@@ -449,15 +449,15 @@ const Alertbox = ({ children, role, className, icon, variant = 'info', isDismiss
             /*#__PURE__*/ jsx(Icon, {}),
             firstChild,
             isDismissable && /*#__PURE__*/ jsx("button", {
-                className: cx('-m-2 grid h-11 w-11 place-items-center rounded-xl', 'focus-visible:-outline-offset-8 cursor-pointer focus-visible:outline-focus'),
+                className: cx('-m-2 grid size-11 place-items-center rounded-xl', 'focus-visible:outline-focus cursor-pointer focus-visible:-outline-offset-8'),
                 onClick: close,
                 "aria-label": translations$1.close[locale],
                 type: "button",
                 children: /*#__PURE__*/ jsx(Close, {})
             }),
             isExpandable && /*#__PURE__*/ jsxs("button", {
-                className: cx('-my-3 relative col-span-full row-start-2 inline-flex max-w-fit cursor-pointer items-center gap-1 py-3 text-sm leading-6', // Focus styles:
-                'outline-none after:absolute after:right-0 after:bottom-3 after:left-0 after:h-0', 'focus-visible:after:h-0.5 focus-visible:after:bg-black'),
+                className: cx('relative col-span-full row-start-2 -my-3 inline-flex max-w-fit cursor-pointer items-center gap-1 py-3 text-sm/6', // Focus styles:
+                'outline-none after:absolute after:inset-x-0 after:bottom-3 after:h-0', 'focus-visible:after:h-0.5 focus-visible:after:bg-black'),
                 onClick: ()=>setIsExpanded((prevState)=>!prevState),
                 "aria-expanded": isExpanded,
                 "aria-controls": id,
@@ -493,7 +493,7 @@ const Avatar = ({ src, alt = '', className, onError, loading = 'lazy', ...rest }
             setHasError(true);
         }
     }) : /*#__PURE__*/ jsx("div", {
-        className: cx(className, baseClassName, 'grid place-items-center bg-gray-light text-gray-dark'),
+        className: cx(className, baseClassName, 'bg-gray-light text-gray-dark grid place-items-center'),
         children: /*#__PURE__*/ jsx(User, {
             className: "scale-[2.25]"
         })
@@ -501,7 +501,7 @@ const Avatar = ({ src, alt = '', className, onError, loading = 'lazy', ...rest }
 };
 
 const formField = cx('group flex flex-col gap-2');
-const formFieldError = cx('w-fit bg-red-light px-2 py-1 text-red text-sm leading-6', 'group-data-[slot=file-upload]:rounded-lg');
+const formFieldError = cx('bg-red-light text-red w-fit px-2 py-1 text-sm/6', 'group-data-[slot=file-upload]:rounded-lg');
 const input = cva({
     base: [
         // All inputs should always have a white background (this also ensures that type="search" on Safri doesn't get a gray background)
@@ -510,7 +510,7 @@ const input = cva({
         // Setting min-height to prevent the input from collapsing in Safari
         // Combining these with a padding-y as base classes makes it easier to standardize the height (44px) of all inputs
         'box-content min-h-6 py-2.5',
-        'rounded-md font-normal text-base leading-6 placeholder-[#727070] outline-hidden ring-1 ring-black',
+        'rounded-md text-base leading-6 font-normal placeholder-[#727070] ring-1 ring-black outline-hidden',
         // invalid styles
         'group-data-invalid:ring-focus group-data-invalid:ring-red',
         // Fix invisible ring on safari: https://github.com/tailwindlabs/tailwindcss.com/issues/1135
@@ -519,12 +519,12 @@ const input = cva({
     variants: {
         // Focus rings. Can either be :focus or :focus-visible based on the needs of the particular component.
         focusModifier: {
-            focus: 'focus:ring-focus group-data-invalid:focus:ring-3 group-data-invalid:focus:ring-red',
-            visible: 'data-focus-visible:ring-focus group-data-invalid:data-focus-visible:ring-3 group-data-invalid:data-focus-visible:ring-red'
+            focus: 'focus:ring-focus group-data-invalid:focus:ring-red group-data-invalid:focus:ring-3',
+            visible: 'data-focus-visible:ring-focus group-data-invalid:data-focus-visible:ring-red group-data-invalid:data-focus-visible:ring-3'
         },
         isGrouped: {
             false: 'px-3',
-            true: '!ring-0 flex-1'
+            true: 'flex-1 ring-0!'
         }
     },
     defaultVariants: {
@@ -533,11 +533,11 @@ const input = cva({
     }
 });
 const inputGroup = cx([
-    'inline-flex items-center gap-3 overflow-hidden rounded-md bg-white px-3 text-base ring-1 ring-black focus-within:ring-focus',
-    'group-data-invalid:ring-focus group-data-invalid:ring-red group-data-invalid:focus-within:ring-3 group-data-invalid:focus-within:ring-red'
+    'focus-within:ring-focus inline-flex items-center gap-3 overflow-hidden rounded-md bg-white px-3 text-base ring-1 ring-black',
+    'group-data-invalid:ring-focus group-data-invalid:ring-red group-data-invalid:focus-within:ring-red group-data-invalid:focus-within:ring-3'
 ]);
 const dropdown = {
-    popover: cx('data-entering:fade-in data-exiting:fade-out min-w-(--trigger-width) overflow-y-auto rounded-md border border-black bg-white shadow-sm data-entering:animate-in data-exiting:animate-out'),
+    popover: cx('data-entering:fade-in data-exiting:fade-out data-entering:animate-in data-exiting:animate-out min-w-(--trigger-width) overflow-y-auto rounded-md border border-black bg-white shadow-sm'),
     // overflow-x-hidden is needed to prevent visible vertical scrollbars from overflowing the border radius of the popover
     listbox: cx('max-h-100 overflow-x-hidden text-sm outline-hidden'),
     chevronIcon: cx('text-base transition-transform duration-150 group-data-open:rotate-180 motion-reduce:transition-none')
@@ -550,7 +550,7 @@ const animateIconVariants = cva({
             left: 'hover:*:[svg]:motion-safe:-translate-x-1',
             down: 'hover:*:[svg]:motion-safe:translate-y-1',
             up: 'hover:*:[svg]:motion-safe:-translate-y-1',
-            'up-right': 'hover:*:[svg]:motion-safe:-translate-y-0.5 hover:*:[svg]:motion-safe:translate-x-0.5'
+            'up-right': 'hover:*:[svg]:motion-safe:translate-x-0.5 hover:*:[svg]:motion-safe:-translate-y-0.5'
         }
     }
 });
@@ -562,7 +562,7 @@ function Backlink(props) {
     const { className, children, withUnderline, ref, ...restProps } = props;
     const _className = cx(className, animateIconVariants({
         animateIcon: 'left'
-    }), 'group flex max-w-fit cursor-pointer items-center gap-3 rounded-md p-2.5 font-normal no-underline focus-visible:outline-focus');
+    }), 'group focus-visible:outline-focus flex max-w-fit cursor-pointer items-center gap-3 rounded-md p-2.5 font-normal no-underline');
     const content = /*#__PURE__*/ jsxs(Fragment, {
         children: [
             /*#__PURE__*/ jsx(ChevronLeft, {
@@ -570,7 +570,7 @@ function Backlink(props) {
             }),
             /*#__PURE__*/ jsx("span", {
                 children: /*#__PURE__*/ jsx("span", {
-                    className: cx('border-transparent border-y transition-colors duration-300', withUnderline ? 'border-b-black' : 'group-hover:border-b-black'),
+                    className: cx('border-y border-transparent transition-colors duration-300', withUnderline ? 'border-b-black' : 'group-hover:border-b-black'),
                     children: children
                 })
             })
@@ -606,9 +606,9 @@ const badgeVariants = cva({
             'green-dark': 'bg-green-dark text-white'
         },
         size: {
-            small: 'description px-2 py-0.5 [&_svg]:h-4 [&_svg]:w-4',
-            medium: 'description px-2.5 py-1.5 [&_svg]:h-4 [&_svg]:w-4',
-            large: 'paragraph px-3 py-2 [&_svg]:h-5 [&_svg]:w-5'
+            small: 'description px-2 py-0.5 [&_svg]:size-4',
+            medium: 'description px-2.5 py-1.5 [&_svg]:size-4',
+            large: 'paragraph px-3 py-2 [&_svg]:size-5'
         }
     },
     defaultVariants: {
@@ -630,7 +630,7 @@ function Badge(props) {
 }
 
 const linkVariants = compose(animateIconVariants, cva({
-    base: 'inline-flex cursor-pointer items-center gap-1 font-medium hover:no-underline focus-visible:outline-current focus-visible:outline-focus-offset data-disabled:cursor-default data-disabled:font-normal data-disabled:no-underline'
+    base: 'focus-visible:outline-focus-offset inline-flex cursor-pointer items-center gap-1 font-medium hover:no-underline focus-visible:outline-current data-disabled:cursor-default data-disabled:font-normal data-disabled:no-underline'
 }));
 const Link = ({ animateIcon, children, className, '~iconRight': iconRight, ...props })=>{
     const locale = _useLocale();
@@ -662,7 +662,7 @@ function Breadcrumb(props) {
             href ? /*#__PURE__*/ jsx(Link, {
                 href: href,
                 // use outline instead of ring-3 for focus marker that can be offset without creating a white background between the focus marker and the element content
-                className: "rounded-xs font-normal hover:underline focus-visible:outline-focus group-last:no-underline",
+                className: "focus-visible:outline-focus rounded-xs font-normal group-last:no-underline hover:underline",
                 children: children
             }) : children,
             /*#__PURE__*/ jsx(ChevronRight, {
@@ -676,7 +676,7 @@ function Breadcrumbs(props) {
     const { className, children, ...restProps } = props;
     return /*#__PURE__*/ jsx(Breadcrumbs$1, {
         ...restProps,
-        className: cx(className, 'flex flex-wrap text-sm leading-6'),
+        className: cx(className, 'flex flex-wrap text-sm/6'),
         children: children
     });
 }
@@ -685,7 +685,7 @@ function Breadcrumbs(props) {
  * Figma: https://www.figma.com/file/9OvSg0ZXI5E1eQYi7AWiWn/Grunnmuren-2.0-%E2%94%82-Designsystem?node-id=30%3A2574&mode=dev
  */ const buttonVariants = compose(animateIconVariants, cva({
     base: [
-        'inline-flex min-h-[44px] cursor-pointer items-center justify-center whitespace-nowrap rounded-lg font-medium transition-colors duration-200 focus-visible:outline-focus-offset'
+        'focus-visible:outline-focus-offset inline-flex min-h-[44px] cursor-pointer items-center justify-center rounded-lg font-medium whitespace-nowrap transition-colors duration-200'
     ],
     variants: {
         /**
@@ -709,7 +709,7 @@ function Breadcrumbs(props) {
        * When the button is without text, but with a single icon.
        * @default false
        */ isIconOnly: {
-            true: 'p-2 [&>svg]:h-7 [&>svg]:w-7',
+            true: 'p-2 [&>svg]:size-7',
             false: 'gap-2.5 px-4 py-2'
         },
         // Make the content of the button transparent to hide it's content, but keep the button width
@@ -723,48 +723,48 @@ function Breadcrumbs(props) {
             color: 'blue',
             variant: 'primary',
             // Darken bg by 20% on hover. The color is manually crafted
-            className: 'bg-blue-dark text-white hover:bg-blue active:bg-[#0536A0] active:text-white [&_[role="progressbar"]]:text-white'
+            className: 'bg-blue-dark hover:bg-blue text-white active:bg-[#0536A0] active:text-white **:[[role="progressbar"]]:text-white'
         },
         {
             color: 'blue',
             variant: 'secondary',
-            className: 'text-blue-dark hover:border-transparent hover:bg-blue hover:text-blue-dark hover:text-white active:bg-[#0536A0] [&:hover_[role="progressbar"]]:text-white [&_[role="progressbar"]]:text-blue-dark'
+            className: 'text-blue-dark hover:bg-blue hover:text-blue-dark **:[[role="progressbar"]]:text-blue-dark hover:border-transparent hover:text-white active:bg-[#0536A0] [&:hover_[role="progressbar"]]:text-white'
         },
         {
             color: 'blue',
             variant: 'tertiary',
-            className: '[&_[role="progressbar"]]:text-black'
+            className: '**:[[role="progressbar"]]:text-black'
         },
         {
             color: 'mint',
             variant: 'primary',
             // Darken bg by 20% on hover. The color is manually crafted
-            className: 'bg-mint text-black hover:bg-[#8dd4bd] active:[#9ddac6] [&_[role="progressbar"]]:text-black'
+            className: 'bg-mint active:[#9ddac6] text-black hover:bg-[#8dd4bd] **:[[role="progressbar"]]:text-black'
         },
         {
             color: 'mint',
             variant: 'secondary',
-            className: 'text-mint hover:bg-mint hover:text-black [&:hover_[role="progressbar"]]:text-black [&_[role="progressbar"]]:text-mint'
+            className: 'text-mint hover:bg-mint **:[[role="progressbar"]]:text-mint hover:text-black [&:hover_[role="progressbar"]]:text-black'
         },
         {
             color: 'mint',
             variant: 'tertiary',
-            className: 'text-mint [&_[role="progressbar"]]:text-mint'
+            className: 'text-mint **:[[role="progressbar"]]:text-mint'
         },
         {
             color: 'white',
             variant: 'primary',
-            className: 'bg-white text-black hover:bg-sky active:bg-sky-light [&_[role="progressbar"]]:text-black'
+            className: 'hover:bg-sky active:bg-sky-light bg-white text-black **:[[role="progressbar"]]:text-black'
         },
         {
             color: 'white',
             variant: 'secondary',
-            className: 'text-white hover:bg-white hover:text-black [&:hover_[role="progressbar"]]:text-black [&_[role="progressbar"]]:text-white'
+            className: 'text-white hover:bg-white hover:text-black [&:hover_[role="progressbar"]]:text-black **:[[role="progressbar"]]:text-white'
         },
         {
             color: 'white',
             variant: 'tertiary',
-            className: 'text-white [&_[role="progressbar"]]:text-white'
+            className: 'text-white **:[[role="progressbar"]]:text-white'
         }
     ],
     defaultVariants: {
@@ -845,7 +845,7 @@ const cardVariants = cva({
         // **** Fail-safe for interactive elements ****
         // Make interactive elements clickable by themselves, while the rest of the card is clickable as a whole
         // The card is made clickable by a pseudo-element on the heading that covers the entire card
-        '[&:not(:has([data-slot="card-link"]_a))_a:not([data-slot="card-link"])]:relative [&_button]:relative [&_input]:relative',
+        '[&_button]:relative [&_input]:relative [&:not(:has([data-slot="card-link"]_a))_a:not([data-slot="card-link"])]:relative',
         // Our Button component has position: relative by default, so we need to override that if it is used in a CardLink (to make the entire card clickable)
         '[&_[data-slot="card-link"]_a]:static',
         // Place other interactive on top of the pseudo-element that makes the entire card clickable
@@ -876,7 +876,7 @@ const cardVariants = cva({
             subtle: [
                 'border-transparent',
                 // **** Media styles ****
-                '[&_[data-slot="media"]]:rounded-2xl'
+                '**:data-[slot="media"]:rounded-2xl'
             ],
             outlined: 'border border-black'
         },
@@ -887,7 +887,7 @@ const cardVariants = cva({
             vertical: [
                 'flex-col',
                 // **** Media ****
-                '[&_[data-slot="media"]]:rounded-t-2xl'
+                '**:data-[slot="media"]:rounded-t-2xl'
             ],
             horizontal: [
                 // Use more gap for horizontal cards that have media
@@ -895,7 +895,7 @@ const cardVariants = cva({
                 'has-data-[slot=media]:layout-gap-x not-has-data-[slot=media]:gap-x-4',
                 // **** With Media ****
                 '[&:has(>[data-slot="media"]:last-child)]:flex-col-reverse',
-                'has-data-[slot=media]:@2xl:!flex-row',
+                'has-data-[slot=media]:@2xl:flex-row!',
                 '*:data-[slot=media]:@2xl:h-fit',
                 'has-data-[slot=media]:*:@2xl:basis-1/2',
                 // Position media at the edges of the card
@@ -904,7 +904,7 @@ const cardVariants = cva({
                 '*:data-[slot=media]:last:@2xl:ml-0',
                 // Make sure the card link is clickable when the media is on the right side
                 // This is necessary because the media content is positioned after the card link in the DOM
-                '[&:has(>[data-slot="media"]:last-child)_[data-slot="card-link"]]:z-[1]',
+                '[&:has(>[data-slot="media"]:last-child)_[data-slot="card-link"]]:z-1',
                 // **** Without Media ****
                 'not-has-data-[slot=media]:@md:flex-row',
                 // Make the layout responsive: when the Content reaches a minimum width of 12rem, the layout switches to vertical. Also makes sure Content takes up the remaining space available.
@@ -925,7 +925,7 @@ const cardVariants = cva({
             className: [
                 // **** Media ****
                 // Some rounded corners are removed when the card is outlined
-                '[&_[data-slot="media"]]:rounded-t-2xl',
+                '**:data-[slot="media"]:rounded-t-2xl',
                 '*:data-[slot=media]:first:@2xl:rounded-tr-none *:data-[slot=media]:first:@2xl:rounded-bl-2xl',
                 '*:data-[slot=media]:last:@2xl:rounded-tl-none *:data-[slot=media]:last:@2xl:rounded-br-2xl',
                 // **** Badge ****
@@ -990,8 +990,8 @@ const cardLinkVariants = cva({
                 // **** Clickarea ****
                 'cursor-pointer',
                 'after:absolute',
-                'after:inset-[calc(theme(borderWidth.DEFAULT)*-1)]',
-                'after:rounded-[calc(theme(borderRadius.2xl)-theme(borderWidth.DEFAULT))]',
+                'after:-inset-px',
+                'after:rounded-[calc(var(--radius-2xl)-theme(borderWidth.DEFAULT))]',
                 // **** Focus ****
                 'focus-visible:outline-none',
                 'data-focus-visible:after:outline-focus',
@@ -1005,8 +1005,8 @@ const cardLinkVariants = cva({
                 // **** Clickarea ****
                 '[&_a]:after:cursor-pointer',
                 '[&_a]:after:absolute',
-                '[&_a]:after:inset-[calc(theme(borderWidth.DEFAULT)*-1)]',
-                '[&_a]:after:rounded-[calc(theme(borderRadius.2xl)-theme(borderWidth.DEFAULT))]',
+                '[&_a]:after:-inset-px',
+                '[&_a]:after:rounded-[calc(var(--radius-2xl)-theme(borderWidth.DEFAULT))]',
                 // **** Focus ****
                 '[&_a[data-focus-visible]]:outline-none',
                 '[&_a[data-focus-visible]]:after:outline-focus',
@@ -1047,20 +1047,20 @@ const HeroContext = /*#__PURE__*/ createContext(null);
 // Common variant for "standard" and "full-bleed" Hero variants
 const oneColumnLayout = [
     // Vertical spacing in the <Content>
-    'lg:*:data-[slot="content"]:gap-y-4',
+    'lg:*:data-[slot=content]:gap-y-4',
     // Main text content takes up 9 columns on medium screens and above
-    'lg:*:data-[slot="content"]:col-span-9',
+    'lg:*:data-[slot=content]:col-span-9',
     // Make sure other elements than <Content> and <Media> (i.e CTA) does not span the full width on small screens
-    '*:not-data-[slot="content"]:not-data-[slot="media"]:w-fit',
+    '*:not-data-[slot=content]:not-data-[slot=media]:w-fit',
     // Other elements than <Content> and <Media> (e.g. CTA, SVG logo or Badge) take up 3 columns on medium screens and above, and are right aligned
-    'lg:*:not-data-[slot="content"]:not-data-[slot="media"]:not-data-[slot="carousel"]:col-span-3 lg:*:not-data-[slot="content"]:not-data-[slot="media"]:justify-self-end',
+    'lg:*:not-data-[slot=content]:not-data-[slot=media]:not-data-[slot=carousel]:col-span-3 lg:*:not-data-[slot=content]:not-data-[slot=media]:justify-self-end',
     // <Media> and <Carousel> content takes up the full width on medium screens and above
-    'lg:*:data-[slot="media"]:col-span-full *:data-[slot="media"]:*:w-full',
-    'lg:*:data-[slot="carousel"]:col-span-full',
+    'lg:*:data-[slot=media]:col-span-full *:data-[slot=media]:*:w-full',
+    'lg:*:data-[slot=carousel]:col-span-full',
     // Aligns <Content> and any element beside it (e.g. <Media>, <Badge>, <CTA> etc.) to the bottom of the <Content> container
     'lg:items-end'
 ];
-const nonFullBleedAspectRatiosForSmallScreens = '*:data-[slot="media"]:*:aspect-[1/1] sm:*:data-[slot="media"]:*:aspect-4/3 md:*:data-[slot="media"]:*:aspect-3/2';
+const nonFullBleedAspectRatiosForSmallScreens = '*:data-[slot=media]:not-has-data-[slot=video]:*:aspect-[1/1] sm:*:data-[slot=media]:not-has-data-[slot=video]:*:aspect-4/3 md:*:data-[slot=media]:not-has-data-[slot=video]:*:aspect-3/2';
 const variants = cva({
     base: [
         'container px-0',
@@ -1068,14 +1068,14 @@ const variants = cva({
         'grid lg:grid-cols-12 lg:gap-x-12 xl:gap-x-16',
         'gap-y-10 lg:gap-y-12',
         // Enable vertical gap within <Content>
-        '*:data-[slot="content"]:grid',
+        '*:data-[slot=content]:grid',
         // Vertical spacing in the <Content>
-        '*:data-[slot="content"]:gap-y-3',
+        '*:data-[slot=content]:gap-y-3',
         // Make sure <Media> content fills any available vertical and horizontal space
-        '*:data-[slot="media"]:*:object-cover',
-        '*:data-[slot="carousel"]:overflow-hidden *:data-[slot="carousel"]:rounded-3xl',
+        '*:data-[slot=media]:*:object-cover',
+        '*:data-[slot=carousel]:overflow-hidden *:data-[slot=carousel]:rounded-3xl',
         // Make the carousel items full width, so we scroll one at a time
-        '**:data-[slot="carousel-item"]:basis-full'
+        '**:data-[slot=carousel-item]:basis-full'
     ],
     variants: {
         /**
@@ -1085,36 +1085,36 @@ const variants = cva({
             standard: [
                 oneColumnLayout,
                 nonFullBleedAspectRatiosForSmallScreens,
-                'lg:*:data-[slot="media"]:*:aspect-2/1'
+                'lg:*:data-[slot=media]:not-has-data-[slot=video]:*:aspect-2/1'
             ],
             'full-bleed': [
                 oneColumnLayout,
                 // Position the media and carousel content to fill the entire viewport width
-                '*:data-[slot="media"]:*:absolute *:data-[slot="media"]:*:left-0',
+                '*:data-[slot=media]:*:absolute *:data-[slot=media]:*:left-0',
                 // Special case for Carousel, where the Media is nested inside a CarouselItem
-                '*:data-[slot="carousel"]:**:data-[slot="media"]:w-full',
+                '*:data-[slot=carousel]:**:data-[slot=media]:w-full',
                 // Match the heights of the <Media> or <Carousel> wrapper for the Media content (e.g. image, VideoLoop, video etc.)
                 // This is necessary due to the absolute positioning of the media and carousel containers in this variant
                 // biome-ignore lint/nursery/useSortedClasses: biome is unable to sort the custom classes for 3xl and 4xl breakpoints
-                '**:data-[slot="media"]:h-80 sm:**:data-[slot="media"]:h-[25rem] md:**:data-[slot="media"]:h-[30rem] lg:**:data-[slot="media"]:h-[35rem] xl:**:data-[slot="media"]:h-[40rem] 2xl:**:data-[slot="media"]:h-[42rem] 3xl:**:data-[slot="media"]:h-[48rem] 4xl:**:data-[slot="media"]:h-[53rem]',
-                '**:data-[slot="media"]:*:h-[inherit]',
+                '3xl:**:data-[slot=media]:h-192 4xl:**:data-[slot=media]:h-212 **:data-[slot=media]:h-80 sm:**:data-[slot=media]:h-100 md:**:data-[slot=media]:h-120 lg:**:data-[slot=media]:h-140 xl:**:data-[slot=media]:h-160 2xl:**:data-[slot=media]:h-168',
+                '**:data-[slot=media]:*:h-[inherit]',
                 // biome-ignore lint/nursery/useSortedClasses: biome is unable to sort the custom classes for 3xl and 4xl breakpoints
-                '*:data-[slot="carousel"]:h-80 sm:*:data-[slot="carousel"]:h-[25rem] md:*:data-[slot="carousel"]:h-[30rem] lg:*:data-[slot="carousel"]:h-[35rem] xl:*:data-[slot="carousel"]:h-[40rem] 2xl:*:data-[slot="carousel"]:h-[42rem] 3xl:*:data-[slot="carousel"]:h-[48rem] 4xl:*:data-[slot="carousel"]:h-[53rem]',
-                '*:data-[slot="carousel"]:w-full!',
+                '3xl:*:data-[slot=carousel]:h-192 4xl:*:data-[slot=carousel]:h-212 *:data-[slot=carousel]:h-80 sm:*:data-[slot=carousel]:h-100 md:*:data-[slot=carousel]:h-120 lg:*:data-[slot=carousel]:h-140 xl:*:data-[slot=carousel]:h-160 2xl:*:data-[slot=carousel]:h-168',
+                '*:data-[slot=carousel]:w-full!',
                 // Override aspect ratio of the media and carousel-item slots (since we can not use aspect for full-bleed layout)
-                '**:data-[slot="carousel-item"]:data-[slot="media"]:*:aspect-none',
+                '**:data-[slot=carousel-item]:data-[slot=media]:*:aspect-none',
                 // break out the carousel out of the container
-                '**:data-[slot="carousel-items-container"]:absolute **:data-[slot="carousel-items-container"]:right-0 **:data-[slot="carousel-items-container"]:left-0 **:data-[slot="carousel-items-container"]:h-[inherit]',
+                '**:data-[slot=carousel-items-container]:absolute **:data-[slot=carousel-items-container]:inset-x-0 **:data-[slot=carousel-items-container]:h-[inherit]',
                 // Positions the carousel controls inside the carousel
-                '**:data-[slot="carousel-controls"]:z-10 **:data-[slot="carousel-controls"]:mb-4 *:data-[slot="carousel"]:flex *:data-[slot="carousel"]:items-end *:data-[slot="carousel"]:justify-end'
+                '*:data-[slot=carousel]:flex *:data-[slot=carousel]:items-end *:data-[slot=carousel]:justify-end **:data-[slot=carousel-controls]:z-10 **:data-[slot=carousel-controls]:mb-4'
             ],
             'two-column': [
                 'lg:items-center lg:*:col-span-6',
                 // Vertical spacing in the <Content>
-                'lg:*:data-[slot="content"]:gap-y-7',
+                'lg:*:data-[slot=content]:gap-y-7',
                 nonFullBleedAspectRatiosForSmallScreens,
                 // Set media aspect ratio to 1:1 (square)
-                'lg:*:data-[slot="media"]:*:aspect-square'
+                'lg:*:data-[slot=media]:not-has-data-[slot=video]:*:aspect-square'
             ]
         }
     },
@@ -1125,8 +1125,8 @@ const variants = cva({
                 'two-column'
             ],
             className: [
-                '*:data-[slot="media"]:*:rounded-3xl',
-                '**:data-[slot="carousel-controls"]:absolute *:data-[slot="carousel"]:relative **:data-[slot="carousel-controls"]:right-4 **:data-[slot="carousel-controls"]:bottom-4 **:data-[slot="carousel-container"]:rounded-3xl'
+                '*:data-[slot=media]:*:rounded-3xl',
+                '*:data-[slot=carousel]:relative **:data-[slot=carousel-container]:rounded-3xl **:data-[slot=carousel-controls]:absolute **:data-[slot=carousel-controls]:right-4 **:data-[slot=carousel-controls]:bottom-4'
             ]
         }
     ],
@@ -1369,7 +1369,7 @@ const Carousel = ({ autoPlayDelay, align = 'center', children, initialIndex = 0,
     } : {
         variant: 'tertiary'
     };
-    return(// biome-ignore lint/a11y/noStaticElementInteractions: This is just to enhance keyboard navigation, this is not a replacement for proper focusable elements inside the carousel
+    return(// oxlint-disable-next-line jsx-a11y/no-static-element-interactions
     /*#__PURE__*/ jsx("div", {
         ...rest,
         "data-orientation": orientation,
@@ -1470,7 +1470,7 @@ const carouselButtonIconSlotVariants = cva({
         {
             slot: 'prev',
             orientation: 'horizontal',
-            className: 'group-hover:motion-safe:-translate-x-1 rotate-180'
+            className: 'rotate-180 group-hover:motion-safe:-translate-x-1'
         },
         // vertical controls
         {
@@ -1481,7 +1481,7 @@ const carouselButtonIconSlotVariants = cva({
         {
             slot: 'prev',
             orientation: 'vertical',
-            className: 'group-hover:motion-safe:-translate-y-1 -rotate-90'
+            className: '-rotate-90 group-hover:motion-safe:-translate-y-1'
         }
     ]
 });
@@ -1532,7 +1532,7 @@ function ErrorMessage(props) {
 }
 
 const defaultClasses$1 = cx([
-    'group -mx-2.5 relative left-0 inline-flex max-w-fit cursor-pointer items-start gap-4 p-2.5 leading-7'
+    'group relative left-0 -mx-2.5 inline-flex max-w-fit cursor-pointer items-start gap-4 p-2.5 leading-7'
 ]);
 // Pulling this out into it's own component. Will probably export it in the future
 // so it can be used in other views, outside of an input of type checkbox, like in table rows.
@@ -1544,7 +1544,7 @@ function CheckmarkBox() {
             // For the ::before psuedo element the line height of the label is always 1em.
             // When we know the height of the label we use the height of the radio to push it down to align with the label's first line
             // TODO: 1.75 here is the unit less lineheight, altough we use 1.75rem as the line height, so there is a mismatch here. Revisit this when we've worked on typography in v2. Should this be a CSS custom property instead?
-            'mt-[calc((1em_*_1.75_-_24px)_/_2)] h-[24px] w-[24px]',
+            'mt-[calc((1em*1.75-24px)/2)] h-[24px] w-[24px]',
             // selected
             'group-data-selected:group-not-data-hovered:group-not-data-invalid:border-blue group-data-selected:group-not-data-hovered:group-not-data-invalid:bg-blue',
             'group-data-selected:group-not-data-hovered:group-data-invalid:border-red group-data-selected:group-not-data-hovered:group-data-invalid:bg-red',
@@ -1558,10 +1558,10 @@ function CheckmarkBox() {
             'group-data-hovered:group-data-selected:group-not-data-invalid:bg-blue-dark',
             // invalid - The border is 1 px thicker when invalid. We don't actually want to change the border width, as that causes the element's size to change
             // so we use an inner shadow of 1 px instead to pad the actual border
-            'group-data-invalid:border-red group-data-invalid:shadow-[inset_0_0_0_1px] group-data-invalid:shadow-red'
+            'group-data-invalid:border-red group-data-invalid:shadow-red group-data-invalid:shadow-[inset_0_0_0_1px]'
         ]),
         children: /*#__PURE__*/ jsx(Check, {
-            className: "h-full w-full opacity-0 group-data-invalid:group-data-hovered:group-data-selected:text-red group-data-selected:opacity-100"
+            className: "group-data-invalid:group-data-hovered:group-data-selected:text-red size-full opacity-0 group-data-selected:opacity-100"
         })
     });
 }
@@ -1627,7 +1627,7 @@ function Description(props) {
 function Label(props) {
     const { children, className, ...restProps } = props;
     return /*#__PURE__*/ jsx(Label$1, {
-        className: cx(className, 'font-medium leading-7'),
+        className: cx(className, 'leading-7 font-medium'),
         ...restProps,
         children: children
     });
@@ -1678,7 +1678,7 @@ const ListBoxItem = (props)=>{
     }
     return /*#__PURE__*/ jsx(ListBoxItem$1, {
         ...props,
-        className: cx(props.className, 'flex cursor-pointer px-6 py-3 leading-6 outline-none data-focused:bg-sky-lightest'),
+        className: cx(props.className, 'data-focused:bg-sky-lightest flex cursor-pointer px-6 py-3 leading-6 outline-none'),
         textValue: textValue,
         children: ({ isSelected })=>/*#__PURE__*/ jsxs(Fragment, {
                 children: [
@@ -1702,7 +1702,7 @@ const ListBoxItem = (props)=>{
  * This component can be used to label grouped items in a `ListBoxSection` with a heading
  */ const ListBoxHeader = (props)=>/*#__PURE__*/ jsx(Header, {
         ...props,
-        className: cx(props.className, 'mx-6 cursor-default py-2 font-medium text-blue-dark leading-6')
+        className: cx(props.className, 'text-blue-dark mx-6 cursor-default py-2 leading-6 font-medium')
     });
 
 function Combobox(props) {
@@ -2047,7 +2047,7 @@ const FileUpload = ({ children, files: _files, onChange, validate, isInvalid: _i
                                             className: "flex items-center gap-3",
                                             children: [
                                                 /*#__PURE__*/ jsx("div", {
-                                                    className: "footnote rounded-md border border-gray-light bg-gray-lightest px-2.5 py-2",
+                                                    className: "footnote border-gray-light bg-gray-lightest rounded-md border px-2.5 py-2",
                                                     children: getFileExtension(file)
                                                 }),
                                                 /*#__PURE__*/ jsxs("div", {
@@ -2068,8 +2068,8 @@ const FileUpload = ({ children, files: _files, onChange, validate, isInvalid: _i
                                         /*#__PURE__*/ jsx("button", {
                                             type: "button",
                                             "aria-label": translations.remove[locale],
-                                            className: cx('-m-2 grid h-11 w-11 shrink-0 cursor-pointer place-items-center rounded-xl', // Focus styles
-                                            'focus-visible:-outline-offset-8 focus-visible:outline-focus'),
+                                            className: cx('-m-2 grid size-11 shrink-0 cursor-pointer place-items-center rounded-xl', // Focus styles
+                                            'focus-visible:outline-focus focus-visible:-outline-offset-8'),
                                             onClick: ()=>{
                                                 // For controlled component
                                                 onChange?.((prevFiles)=>prevFiles.filter((_, index)=>index !== fileIndex));
@@ -2173,7 +2173,7 @@ const LinkListItem = ({ children, className, ...props })=>{
     const iconRight = childProps['~iconRight'] || childProps.download ? /*#__PURE__*/ jsx(Download, {}) : childProps.rel?.includes('external') ? /*#__PURE__*/ jsx(LinkExternal, {}) : /*#__PURE__*/ jsx(ArrowRight, {});
     return /*#__PURE__*/ jsx("li", {
         ...props,
-        className: cx(className, 'after:-top-px relative p-1.25 after:absolute after:right-0 after:left-0 after:h-px after:w-full after:bg-gray-light', '*:data-[slot=link]:paragraph', ...linkStyles),
+        className: cx(className, 'after:bg-gray-light relative p-1.25 after:absolute after:inset-x-0 after:-top-px after:h-px after:w-full', '*:data-[slot=link]:paragraph', ...linkStyles),
         "data-slot": "link-list-item",
         children: /*#__PURE__*/ isValidElement(child) && /*#__PURE__*/ cloneElement(child, {
             animateIcon,
@@ -2212,7 +2212,7 @@ const Modal = ({ isDismissable = true, isOpen, onOpenChange, defaultOpen, classN
                                         isDismissable && /*#__PURE__*/ jsx(Button, {
                                             slot: "close",
                                             variant: "tertiary",
-                                            className: "px-2.5! data-focus-visible:outline-focus-inset",
+                                            className: "data-focus-visible:outline-focus-inset px-2.5!",
                                             "aria-label": translations$1.close[locale],
                                             onPress: ()=>onOpenChange?.(false),
                                             children: /*#__PURE__*/ jsx(Close, {})
@@ -2241,7 +2241,7 @@ const Modal = ({ isDismissable = true, isOpen, onOpenChange, defaultOpen, classN
 const Dialog = ({ className, children, ...restProps })=>/*#__PURE__*/ jsx(Dialog$1, {
         ...restProps,
         className: cx(className, 'relative grid gap-y-5 outline-none', // Footer
-        '[&_[data-slot="footer"]]:flex [&_[data-slot="footer"]]:gap-x-2'),
+        '**:data-[slot="footer"]:flex **:data-[slot="footer"]:gap-x-2'),
         children: ({ close })=>/*#__PURE__*/ jsx(Provider, {
                 values: [
                     [
@@ -2330,23 +2330,23 @@ function NumberField(props) {
 }
 
 const defaultClasses = cx([
-    '-ml-2.5 relative inline-flex max-w-fit cursor-pointer items-start gap-4 py-2.5 pl-2.5 leading-7',
+    'relative -ml-2.5 inline-flex max-w-fit cursor-pointer items-start gap-4 py-2.5 pl-2.5 leading-7',
     // the radio button itself
     'before:flex-none before:rounded-full before:border-2 before:border-black',
     // to vertically align the radio we need to calculate the label's height, which is equal to it's font size multiplied by the line height.
     // For the ::before psuedo element the line height of the label is always 1em.
     // When we know the height of the label we use the height of the radio to push it down to align with the label's first line
     // TODO: 1.75 here is the unit less lineheight, altough we use 1.75rem as the line height, so there is a mismatch here. Revisit this when we've worked on typography in v2. Should this be a CSS custom property instead?
-    'before:mt-[calc((1em_*_1.75_-_24px)_/_2)] before:h-[24px] before:w-[24px]',
+    'before:mt-[calc((1em*1.75-24px)/2)] before:h-[24px] before:w-[24px]',
     // selected
-    'data-selected:before:border-black data-selected:before:bg-blue data-selected:before:shadow-[inset_0_0_0_4px_rgb(255,255,255)]',
+    'data-selected:before:bg-blue data-selected:before:border-black data-selected:before:shadow-[inset_0_0_0_4px_rgb(255,255,255)]',
     // hover
     'data-hovered:data-selected:before:border-blue-dark data-hovered:data-invalid:before:bg-red-light data-hovered:data-selected:before:bg-blue-dark data-hovered:before:border-blue data-hovered:before:bg-sky',
     // focus
     'data-focus-visible:before:ring-focus-offset',
     // invalid - The border is 1 px thicker when invalid. We don't actually want to change the border width, as that causes the element's size to change
     // so we use an inner outline to artifically pad the border
-    'data-invalid:data-selected:before:!bg-red data-invalid:before:border-red data-invalid:before:outline data-invalid:before:outline-[3px] data-invalid:before:outline-red data-invalid:before:outline-solid data-invalid:before:outline-offset-[-3px]'
+    'data-invalid:data-selected:before:bg-red! data-invalid:before:border-red data-invalid:before:outline-red data-invalid:before:outline data-invalid:before:outline-[3px] data-invalid:before:outline-offset-[-3px] data-invalid:before:outline-solid'
 ]);
 function Radio(props) {
     const { children, className, description, ...restProps } = props;
@@ -2417,7 +2417,7 @@ function Select(props) {
                 ref: ref,
                 children: [
                     /*#__PURE__*/ jsx(SelectValue, {
-                        className: "flex-1 truncate text-left data-[placeholder]:text-[#727070]"
+                        className: "flex-1 truncate text-left data-placeholder:text-[#727070]"
                     }),
                     /*#__PURE__*/ jsx(ChevronDown, {
                         className: dropdown.chevronIcon
@@ -2454,9 +2454,9 @@ const ProgressBar = ({ children, className, ...restProps })=>{
                         ...restArgs
                     }) : children,
                     /*#__PURE__*/ jsx("div", {
-                        className: "relative rounded border border-blue-dark bg-gray-light",
+                        className: "border-blue-dark bg-gray-light relative rounded border",
                         children: /*#__PURE__*/ jsx("div", {
-                            className: "h-1 rounded bg-blue-dark transition-all duration-300 ease-in-out",
+                            className: "bg-blue-dark h-1 rounded transition-all duration-300 ease-in-out",
                             style: {
                                 width: `${percentage}%`
                             }
@@ -2469,14 +2469,13 @@ const ProgressBar = ({ children, className, ...restProps })=>{
 
 function ScrollButton({ direction, onClick, isVisible, hasScrollingOccurred, className }) {
     const Icon = direction === 'left' ? ChevronLeft : ChevronRight;
-    return(// biome-ignore lint/a11y/useKeyWithClickEvents: This button is only for mouse interaction to help users scroll. Keyboard and screen reader users can navigate the content directly without needing these scroll helpers.
-    // biome-ignore lint/a11y/noStaticElementInteractions: This button is only for mouse interaction to help users scroll. Keyboard and screen reader users can navigate the content directly without needing these scroll helpers.
+    return(// oxlint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
     /*#__PURE__*/ jsx("div", {
         onClick: onClick,
         className: cx(// Base scroll button styling
         'flex cursor-pointer items-center justify-center', 'absolute top-0 size-11', 'group/scroll-button text-black', direction === 'left' ? 'bg-[linear-gradient(90deg,white,white_calc(100%-10px),transparent)]' : 'bg-[linear-gradient(90deg,transparent,white_calc(10px),white)]', // Animation
         hasScrollingOccurred && 'duration-100 ease-in motion-safe:transition-transform', // Hide/show animation
-        direction === 'left' ? !isVisible && '-translate-x-full pointer-events-none' : !isVisible && 'pointer-events-none translate-x-full', direction === 'left' ? '-left-3' : '-right-3', className),
+        direction === 'left' ? !isVisible && 'pointer-events-none -translate-x-full' : !isVisible && 'pointer-events-none translate-x-full', direction === 'left' ? '-left-3' : '-right-3', className),
         children: /*#__PURE__*/ jsx(Icon, {
             className: cx('motion-safe:transition-all', direction === 'left' ? 'group-hover/scroll-button:-translate-x-1' : 'group-hover/scroll-button:translate-x-1')
         })
@@ -2507,11 +2506,14 @@ function ScrollButton({ direction, onClick, isVisible, hasScrollingOccurred, cla
             }));
     }, []);
     const debouncedUpdateScrollState = useDebouncedCallback(updateScrollState, 100);
-    // Initial check and react to dependency changes
+    // The linter struggles here, so need to enable and disable to get it to pass...
+    // useEffect with a usecallback.....
+    // this feels wrong, but not touching this right now since we're just changing the lint setup
+    /* oxlint-disable react-hooks/exhaustive-deps */ // Initial check and react to dependency changes
     useEffect(updateScrollState, [
         ...scrollStateDeps
     ]);
-    useEffect(()=>{
+    /* oxlint-enable react-hooks/exhaustive-deps */ useEffect(()=>{
         const container = scrollContainerRef.current;
         if (!container) {
             return;
@@ -2744,7 +2746,7 @@ const TableScrollContainerContext = /*#__PURE__*/ createContext({
  */ function TableHeader({ className, children, ...restProps }) {
     return /*#__PURE__*/ jsx(TableHeader$1, {
         ...restProps,
-        className: cx(className, 'border-black border-b'),
+        className: cx(className, 'border-b border-black'),
         children: children
     });
 }
@@ -2752,14 +2754,14 @@ function TableColumn(props) {
     const { className, children, ...restProps } = props;
     return /*#__PURE__*/ jsx(Column, {
         ...restProps,
-        className: cx(className, 'px-4 py-3 text-left font-medium text-black text-sm', 'data-focus-visible:outline-focus-inset', '[&_:not([data-slot="table-column-resizer"]):focus-visible]:outline-focus-offset', 'min-w-fit whitespace-nowrap', 'has-data-[slot=table-column-resizer]:*:data-[slot=content]:flex has-data-[slot=table-column-resizer]:*:data-[slot=content]:justify-between has-data-[slot=table-column-resizer]:*:data-[slot=content]:gap-2'),
+        className: cx(className, 'px-4 py-3 text-left text-sm font-medium text-black', 'data-focus-visible:outline-focus-inset', '[&_:not([data-slot="table-column-resizer"]):focus-visible]:outline-focus-offset', 'min-w-fit whitespace-nowrap', 'has-data-[slot=table-column-resizer]:*:data-[slot=content]:flex has-data-[slot=table-column-resizer]:*:data-[slot=content]:justify-between has-data-[slot=table-column-resizer]:*:data-[slot=content]:gap-2'),
         "data-slot": "table-column",
         children: children
     });
 }
 const TableColumnResizer = ({ className, ...restProps })=>/*#__PURE__*/ jsx(ColumnResizer, {
         ...restProps,
-        className: cx(className, '-my-3 -mr-4.5 size-11 flex-none', 'cursor-ew-resize', 'relative after:absolute after:top-2 after:right-5 after:bottom-2 after:w-px after:bg-black', 'data-focused:after:outline-focus-offset'),
+        className: cx(className, '-my-3 -mr-4.5 size-11 flex-none', 'cursor-ew-resize', 'relative after:absolute after:inset-y-2 after:right-5 after:w-px after:bg-black', 'data-focused:after:outline-focus-offset'),
         "data-slot": "table-column-resizer"
     });
 /**
@@ -2785,7 +2787,7 @@ function TableCell(props) {
     const { className, children, ...restProps } = props;
     return /*#__PURE__*/ jsx(Cell, {
         ...restProps,
-        className: cx(className, 'px-4 py-3 text-black text-sm leading-relaxed', 'min-w-fit whitespace-nowrap', 'align-top', 'data-focus-visible:outline-focus-inset'),
+        className: cx(className, 'px-4 py-3 text-sm/relaxed text-black', 'min-w-fit whitespace-nowrap', 'align-top', 'data-focus-visible:outline-focus-inset'),
         "data-slot": "table-cell",
         children: children
     });
@@ -2908,7 +2910,7 @@ const tabsVariants = cva({
                 "data-scroll-animation": false,
                 className: cx(className, 'group/tablist', // Ensure the tab list is scrollable
                 'scrollbar-hidden overflow-x-auto', 'flex w-fit max-w-full', // Ensure tabs don't shrink and maintain min-width
-                '[&>*]:min-w-fit [&>*]:flex-shrink-0', // Divider line
+                '*:min-w-fit *:shrink-0', // Divider line
                 'border-gray-light', 'data-[orientation=horizontal]:border-b', 'data-[orientation=vertical]:border-r', // Selection highlight based on orientation
                 'data-[orientation=horizontal]:*:border-y-2', 'data-[orientation=horizontal]:*:data-selected:border-b-blue-dark', 'data-[orientation=vertical]:*:border-r-2', 'data-[orientation=vertical]:*:data-selected:border-r-blue-dark', // Flex direction based on orientation
                 'data-[orientation=vertical]:flex-col'),
@@ -2938,12 +2940,12 @@ const tabsVariants = cva({
     const { className, children, ...restProps } = props;
     return /*#__PURE__*/ jsx(Tab$1, {
         ...restProps,
-        className: cx(className, 'data-focus-visible:-outline-offset-10 data-focus-visible:outline-2 data-focus-visible:outline-black', 'description h-11 cursor-pointer border-transparent px-4 py-[0.71875rem] font-light', // Transition
+        className: cx(className, 'data-focus-visible:outline-focus data-focus-visible:-outline-offset-10', 'description h-11 cursor-pointer border-transparent px-4 py-[0.71875rem] font-light', // Transition
         'transition-colors duration-150 ease-out', // TODO: Should disabled tabs just be hidden?
         'data-disabled:cursor-not-allowed data-disabled:opacity-50', // Selection
-        'data-selected:font-medium data-selected:text-blue-dark', // Hover with layout shift prevention using pseudo-element
+        'data-selected:text-blue-dark data-selected:font-medium', // Hover with layout shift prevention using pseudo-element
         'after:invisible after:block after:h-0 after:overflow-hidden after:font-medium after:content-[attr(data-text)]', 'data-hovered:font-medium', // Pressed
-        'data-pressed:font-medium data-pressed:text-blue-dark'),
+        'data-pressed:text-blue-dark data-pressed:font-medium'),
         "data-text": typeof children === 'string' ? children : '',
         children: children
     });
@@ -2955,14 +2957,14 @@ const tabsVariants = cva({
     return /*#__PURE__*/ jsx(TabPanel$1, {
         ...restProps,
         shouldForceMount: true,
-        className: cx(className, 'flex-1 data-inert:hidden data-focus-visible:outline-focus-offset'),
+        className: cx(className, 'data-focus-visible:outline-focus-offset flex-1 data-inert:hidden'),
         children: children
     });
 }
 
 const tagVariants = cva({
     base: [
-        'relative flex cursor-pointer items-center gap-1 rounded-lg px-2 py-1 font-medium text-sm transition-colors duration-200',
+        'relative flex cursor-pointer items-center gap-1 rounded-lg px-2 py-1 text-sm font-medium transition-colors duration-200',
         // Resting
         'border-2 border-black bg-white text-black',
         //Focus
@@ -3021,7 +3023,7 @@ const tagVariants = cva({
                 children: [
                     children,
                     /*#__PURE__*/ jsx(Button$1, {
-                        className: "cursor-pointer outline-none after:absolute after:top-0 after:right-0 after:bottom-0 after:left-0",
+                        className: "cursor-pointer outline-none after:absolute after:inset-0",
                         slot: "remove",
                         children: /*#__PURE__*/ jsx(Close, {
                             className: "ml-1"
@@ -3151,12 +3153,13 @@ const VideoLoop = ({ src, format, alt, className })=>{
     ]);
     return /*#__PURE__*/ jsxs("div", {
         className: cx(className, 'relative', prefersReducedMotion === null && 'opacity-0'),
+        "data-slot": "video-loop",
         children: [
             /*#__PURE__*/ jsx("video", {
                 "aria-hidden": true,
                 ref: videoRef,
                 // cursor-pointer is not working on the button below, so we add it here for the same effect
-                className: "h-full max-h-[inherit] w-full cursor-pointer rounded-[inherit] object-cover",
+                className: "size-full max-h-[inherit] cursor-pointer rounded-[inherit] object-cover",
                 playsInline: true,
                 loop: prefersReducedMotion === false,
                 autoPlay: prefersReducedMotion === false,
@@ -3169,6 +3172,7 @@ const VideoLoop = ({ src, format, alt, className })=>{
                         setIsPlaying(false);
                     }
                 },
+                "data-slot": "video",
                 children: /*#__PURE__*/ jsx("source", {
                     src: src,
                     type: `video/${format}`
@@ -3176,10 +3180,11 @@ const VideoLoop = ({ src, format, alt, className })=>{
             }),
             prefersReducedMotion !== null && /*#__PURE__*/ jsx("button", {
                 "data-slot": "video-loop-button",
+                // oxlint-disable-next-line jsx-a11y/no-aria-hidden-on-focusable
                 "aria-hidden": true,
                 type: "button",
                 onClick: ()=>setShouldPlay((prevState)=>!prevState),
-                className: cx('absolute top-0 right-0 bottom-0 left-0 m-auto grid place-items-center', 'focus-visible:outline-focus focus-visible:outline-focus-offset', 'rounded-[inherit]', // Setting the opacity to 0 before applying the transition below will ensure the button only fades in after the video has started playing
+                className: cx('absolute inset-0 m-auto grid place-items-center', 'focus-visible:outline-focus focus-visible:outline-focus-offset', 'rounded-[inherit]', // Setting the opacity to 0 before applying the transition below will ensure the button only fades in after the video has started playing
                 shouldPlay && 'opacity-0', isPlaying && [
                     'transition-opacity duration-200',
                     // Only show the pause button when the video is hovered or focused
@@ -3187,7 +3192,7 @@ const VideoLoop = ({ src, format, alt, className })=>{
                     'hover:opacity-100'
                 ]),
                 children: /*#__PURE__*/ jsx("span", {
-                    className: "grid h-12 w-12 place-items-center rounded-full bg-white outline-hidden",
+                    className: "grid size-12 place-items-center rounded-full bg-white outline-hidden",
                     children: isPlaying ? /*#__PURE__*/ jsx(PlayerPause, {}) : /*#__PURE__*/ jsx(PlayerPlay, {})
                 })
             }),