@wistia/ui 0.26.16-beta.ce031f76.c2a6fdb → 0.26.16-beta.fc736a41.a79eb9e

package/dist/index.js

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.26.16-beta.ce031f76.c2a6fdb
+ * @license @wistia/ui v0.26.16-beta.fc736a41.a79eb9e
  *
  * Copyright (c) 2024-2026, Wistia, Inc. and its affiliates.
  *
@@ -62,7 +62,7 @@ const globalStyleAdjustmentsCss = css`
     -webkit-text-size-adjust: none;
     /* stylelint-disable-next-line plugin/use-baseline */
     text-size-adjust: none;
-    block-size: -webkit-fill-available; /* 4 */
+    height: -webkit-fill-available; /* 4 */
   }
 
   *,
@@ -80,8 +80,8 @@ const globalStyleAdjustmentsCss = css`
     -moz-osx-font-smoothing: grayscale; /* 1 */
     -webkit-font-smoothing: antialiased; /* 2 */
     line-height: 1.5; /* 2 */
-    min-block-size: 100vb; /* 3 */
-    min-block-size: -webkit-fill-available; /* 3 */
+    min-height: 100vh; /* 3 */
+    min-height: -webkit-fill-available; /* 3 */
   }
 
   /* Remove default margin in favour of better control in authored CSS */
@@ -133,7 +133,7 @@ const globalStyleAdjustmentsCss = css`
   /* Make images easier to work with */
   img,
   picture {
-    max-inline-size: 100%;
+    max-width: 100%;
     display: block;
   }
 
@@ -316,11 +316,6 @@ const typographyTokens = css`
   ${"--wui-typography-family-default: intervariable, sans-serif;\n--wui-typography-family-brand: 'GT Walsheim', sans-serif;\n--wui-typography-family-mono: 'IBM Plex Mono', monospace;\n\n/* Brand Weights */\n--wui-typography-weight-brand-bold: 600;\n--wui-typography-weight-brand-black: 700;\n\n/* Heading Hero */\n--wui-typography-heading-hero-family: var(--wui-typography-family-brand);\n--wui-typography-heading-hero-line-height: 58px;\n--wui-typography-heading-hero-size: 48px;\n--wui-typography-heading-hero-weight: var(\n  --wui-typography-weight-heading,\n  var(--wui-typography-weight-brand-black)\n);\n\n/* Heading 1 */\n--wui-typography-heading-1-family: var(--wui-typography-family-brand);\n--wui-typography-heading-1-line-height: 44px;\n--wui-typography-heading-1-size: 36px;\n--wui-typography-heading-1-weight: var(\n  --wui-typography-weight-heading,\n  var(--wui-typography-weight-brand-black)\n);\n\n/* Heading 2 */\n--wui-typography-heading-2-family: var(--wui-typography-family-brand);\n--wui-typography-heading-2-line-height: 38px;\n--wui-typography-heading-2-size: 32px;\n--wui-typography-heading-2-weight: var(\n  --wui-typography-weight-heading,\n  var(--wui-typography-weight-brand-black)\n);\n\n/* Heading 3 */\n--wui-typography-heading-3-family: var(--wui-typography-family-brand);\n--wui-typography-heading-3-line-height: 30px;\n--wui-typography-heading-3-size: 24px;\n--wui-typography-heading-3-weight: var(\n  --wui-typography-weight-heading,\n  var(--wui-typography-weight-brand-bold)\n);\n\n/* Heading 4 */\n--wui-typography-heading-4-family: var(--wui-typography-family-brand);\n--wui-typography-heading-4-line-height: 24px;\n--wui-typography-heading-4-size: 18px;\n--wui-typography-heading-4-weight: var(\n  --wui-typography-weight-heading,\n  var(--wui-typography-weight-brand-bold)\n);\n\n/* Heading 5 */\n--wui-typography-heading-5-family: var(--wui-typography-family-brand);\n--wui-typography-heading-5-line-height: 22px;\n--wui-typography-heading-5-size: 16px;\n--wui-typography-heading-5-weight: var(\n  --wui-typography-weight-heading,\n  var(--wui-typography-weight-brand-bold)\n);\n\n/* Heading 6 */\n--wui-typography-heading-6-family: var(--wui-typography-family-brand);\n--wui-typography-heading-6-line-height: 18px;\n--wui-typography-heading-6-size: 14px;\n--wui-typography-heading-6-weight: var(\n  --wui-typography-weight-heading,\n  var(--wui-typography-weight-brand-bold)\n);\n\n/* Body Weight */\n--wui-typography-weight-body: 425;\n--wui-typography-weight-body-bold: 700;\n\n/* Body 1 */\n--wui-typography-body-1-family: var(--wui-typography-family-default);\n--wui-typography-body-1-line-height: 30px;\n--wui-typography-body-1-size: 20px;\n--wui-typography-body-1-weight: var(--wui-typography-weight-body);\n--wui-typography-body-1-paragraph-spacing: 16px;\n\n/* Body 2 */\n--wui-typography-body-2-family: var(--wui-typography-family-default);\n--wui-typography-body-2-line-height: 26px;\n--wui-typography-body-2-size: 16px;\n--wui-typography-body-2-weight: var(--wui-typography-weight-body);\n--wui-typography-body-2-paragraph-spacing: 12px;\n\n/* Body 3 */\n--wui-typography-body-3-family: var(--wui-typography-family-default);\n--wui-typography-body-3-line-height: 22px;\n--wui-typography-body-3-size: 14px;\n--wui-typography-body-3-weight: var(--wui-typography-weight-body);\n--wui-typography-body-3-paragraph-spacing: 8px;\n\n/* Body 4 */\n--wui-typography-body-4-family: var(--wui-typography-family-default);\n--wui-typography-body-4-line-height: 18px;\n--wui-typography-body-4-size: 12px;\n--wui-typography-body-4-weight: var(--wui-typography-weight-body);\n--wui-typography-body-4-paragraph-spacing: 8px;\n\n/* Label Weight */\n--wui-typography-weight-label: 475;\n--wui-typography-weight-label-bold: 600;\n\n/* Label 1 */\n--wui-typography-label-1-family: var(--wui-typography-family-default);\n--wui-typography-label-1-line-height: 24px;\n--wui-typography-label-1-size: 18px;\n--wui-typography-label-1-weight: var(--wui-typography-weight-label);\n\n/* Label 2 */\n--wui-typography-label-2-family: var(--wui-typography-family-default);\n--wui-typography-label-2-line-height: 18px;\n--wui-typography-label-2-size: 16px;\n--wui-typography-label-2-weight: var(--wui-typography-weight-label);\n\n/* Label 3 */\n--wui-typography-label-3-family: var(--wui-typography-family-default);\n--wui-typography-label-3-line-height: 16px;\n--wui-typography-label-3-size: 14px;\n--wui-typography-label-3-weight: var(--wui-typography-weight-label);\n\n/* Label 4 */\n--wui-typography-label-4-family: var(--wui-typography-family-default);\n--wui-typography-label-4-line-height: 14px;\n--wui-typography-label-4-size: 12px;\n--wui-typography-label-4-weight: var(--wui-typography-weight-label);\n"}
 `;
 //#endregion
-//#region src/css/designTokens/zIndex.tsx
-const zIndexTokens = css`
-  ${"--wui-zindex-under: -1;\n--wui-zindex-backdrop: 500;\n--wui-zindex-menu: 500;\n--wui-zindex-modal: 500;\n--wui-zindex-popover: 500;\n--wui-zindex-select: 500;\n--wui-zindex-tooltip: 500;\n"}
-`;
-//#endregion
 //#region src/css/designTokens/elevation.tsx
 const elevationTokens = css`
   ${"--wui-elevation-01: 0px 4px 8px 0px var(--wui-color-drop-shadow);\n--wui-elevation-02: 0px 4px 24px 0px var(--wui-color-drop-shadow);\n"}
@@ -335,6 +330,7 @@ const motionTokens = css`
 const GlobalStyle = createGlobalStyle`
   ${globalStyleAdjustmentsCss}
   ${css`
+  ${"/* -------------------------------------------\n *  Autogenerated by ⛋ Terrazzo. DO NOT EDIT!\n * ------------------------------------------- */\n\n:root,\n[data-wui-theme='true'] {\n  --wui-zindex-under: -1;\n  --wui-zindex-backdrop: 500;\n  --wui-zindex-menu: 500;\n  --wui-zindex-modal: 500;\n  --wui-zindex-popover: 500;\n  --wui-zindex-select: 500;\n  --wui-zindex-tooltip: 500;\n}\n"}
   :root,
   [data-wui-theme='true'] {
     ${borderRadiusTokens}
@@ -350,7 +346,6 @@ const GlobalStyle = createGlobalStyle`
     ${elevationTokens}
     ${spacingTokens}
     ${typographyTokens}
-    ${zIndexTokens}
     ${motionTokens}
   }
 `}
@@ -371,11 +366,11 @@ const GlobalStyle = createGlobalStyle`
     cursor: inherit;
     display: block;
     position: absolute;
-    inset-block-start: 0;
-    inset-inline-start: 0;
+    top: 0;
+    left: 0;
     z-index: 0;
-    inline-size: 100%;
-    block-size: 100%;
+    width: 100%;
+    height: 100%;
   }
 `}
 `;
@@ -1859,7 +1854,7 @@ const ellipsisStyle = css`
   */
   @supports (background: - webkit-named-image(i)) {
     & > div > div:has(p) {
-      margin-block-start: 16px;
+      margin-top: 16px;
     }
 
     & > div > div > p {
@@ -1926,40 +1921,40 @@ const MessageWrapper = styled.div`
   flex-grow: 1;
   flex-shrink: 1;
   flex-basis: auto;
-  margin-inline-end: var(--wui-space-03);
+  margin-right: var(--wui-space-03);
 
   svg {
     align-self: center;
-    min-inline-size: 16px;
-    margin-inline-end: var(--wui-space-02); /* space between icon & message */
+    min-width: 16px;
+    margin-right: var(--wui-space-02); /* space between icon & message */
   }
 `;
 const ActionWrapper = styled.div`
   flex-grow: 0;
   flex-shrink: 0;
   flex-basis: auto;
-  margin-inline-end: var(--wui-space-03);
+  margin-right: var(--wui-space-03);
 `;
 const StyledToast = styled.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   display: flex;
   align-items: center;
   justify-content: space-between;
-  min-block-size: 56px;
-  inline-size: 356px;
+  min-height: 56px;
+  width: 356px;
   border-radius: var(--wui-border-radius-01);
   background-color: var(--wui-color-bg-surface);
   border: 1px solid var(--wui-color-border);
   color: var(--wui-color-text);
-  padding-block-start: var(--wui-space-02);
-  padding-inline-end: 0; /* padding here is on the left/right slots */
-  padding-block-end: var(--wui-space-02);
-  padding-inline-start: var(--wui-space-03);
+  padding-top: var(--wui-space-02);
+  padding-right: 0; /* padding here is on the left/right slots */
+  padding-bottom: var(--wui-space-02);
+  padding-left: var(--wui-space-03);
   box-shadow: var(--wui-elevation-02);
 
   svg {
-    block-size: 16px;
-    inline-size: 16px;
+    height: 16px;
+    width: 16px;
     flex: 0 0 16px;
   }
 `;
@@ -2018,7 +2013,7 @@ const buttonResetCss = css`
   justify-content: center;
   line-height: 1;
   padding: 0;
-  text-align: start;
+  text-align: left;
   text-decoration: none;
   vertical-align: middle;
 
@@ -2153,8 +2148,8 @@ const buttonBaseStyles = css`
   && {
     & svg {
       color: var(--button-color-icon);
-      inline-size: var(--button-icon-size);
-      block-size: var(--button-icon-size);
+      width: var(--button-icon-size);
+      height: var(--button-icon-size);
       flex: 0 0 var(--button-icon-size);
     }
   }
@@ -5478,7 +5473,7 @@ const iconInlineStyle = css`
     --wui-icon-inline-offset: 0.05em;
     --wui-icon-vertical-align: none;
 
-    inset-block-start: var(--wui-icon-inline-offset);
+    top: var(--wui-icon-inline-offset);
     position: relative;
   }
 `;
@@ -5488,8 +5483,8 @@ const StyledIcon = styled.svg`
   --wui-icon-vertical-align: middle;
 
   flex: 0 0 var(--wui-icon-size);
-  block-size: var(--wui-icon-size);
-  inline-size: var(--wui-icon-size);
+  height: var(--wui-icon-size);
+  width: var(--wui-icon-size);
 `;
 /**
 * A component that renders any of our available icons.
@@ -5568,8 +5563,8 @@ const StyledLink = styled.a`
 
   && {
     & svg {
-      inline-size: 14px;
-      block-size: 14px;
+      width: 14px;
+      height: 14px;
       flex: 0 0 14px;
     }
   }
@@ -5655,7 +5650,7 @@ const StyledButton$2 = styled.button`
   ${({ $size }) => buttonSizeStyles[$size]}
   ${({ $variant }) => buttonVariantsStyles[$variant]}
   ${({ $unstyled }) => !$unstyled && buttonBaseStyles}
-  inline-size: ${({ $fullWidth }) => $fullWidth ? "100%" : "fit-content"};
+  width: ${({ $fullWidth }) => $fullWidth ? "100%" : "fit-content"};
   text-align: center;
 `;
 const StyledButtonContent = styled.div`
@@ -5758,8 +5753,8 @@ const StyledActionButton = styled(Button)`
   grid-template-columns: 24px 1fr;
   grid-template-rows: 24px auto;
   gap: var(--wui-space-02);
-  inline-size: fit-content;
-  min-inline-size: 96px;
+  width: fit-content;
+  min-width: 96px;
   padding: var(--wui-space-03);
   background: var(--wui-color-bg-surface-secondary);
   row-gap: var(--wui-space-02);
@@ -5807,14 +5802,14 @@ const StyledActionButton = styled(Button)`
 const StyledMainIcon = styled.div`
   grid-column: 1;
   grid-row: 1;
-  inline-size: 24px;
-  block-size: 24px;
+  width: 24px;
+  height: 24px;
   transition: color var(--wui-motion-duration-02) var(--wui-motion-ease);
 
   && {
     & svg {
-      inline-size: 24px;
-      block-size: 24px;
+      width: 24px;
+      height: 24px;
       flex: 0 0 24px;
     }
   }
@@ -5822,7 +5817,7 @@ const StyledMainIcon = styled.div`
 const StyledSecondaryIcon = styled.div`
   grid-column: 2;
   grid-row: 1;
-  inline-size: 100%;
+  width: 100%;
   display: flex;
   justify-content: flex-end;
   transition: all var(--wui-motion-duration-02) var(--wui-motion-ease-out);
@@ -5842,8 +5837,8 @@ const StyledSecondaryIcon = styled.div`
 
   && {
     & svg {
-      inline-size: 24px;
-      block-size: 24px;
+      width: 24px;
+      height: 24px;
       flex: 0 0 24px;
     }
   }
@@ -5856,7 +5851,7 @@ const StyledLabel$3 = styled.span`
   color: ${({ $disabled }) => $disabled ? "var(--wui-color-text-disabled)" : "var(--wui-color-text)"};
   grid-column: 1 / -1;
   grid-row: 2;
-  text-align: start;
+  text-align: left;
 `;
 /**
 * Action Button component is used as one of a group of main actions on the page. It composes [Button](/components/Button).
@@ -6004,8 +5999,8 @@ const Initial = ({ initial }) => /* @__PURE__ */ jsxs("svg", {
 });
 const AvatarWrapper = styled.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
-  inline-size: ${({ $heightAndWidth }) => $heightAndWidth}px;
-  block-size: ${({ $heightAndWidth }) => $heightAndWidth}px;
+  width: ${({ $heightAndWidth }) => $heightAndWidth}px;
+  height: ${({ $heightAndWidth }) => $heightAndWidth}px;
   place-content: center;
   overflow: hidden;
   background-color: var(--wui-color-bg-fill);
@@ -6108,16 +6103,16 @@ const StyledBadge = styled.div`
   justify-content: center;
   line-height: var(--wui-typography-label-3-line-height);
   padding: var(--wui-space-01) var(--wui-space-02);
-  inline-size: fit-content;
-  block-size: fit-content;
+  width: fit-content;
+  height: fit-content;
   flex-grow: 0;
 
   /* Icon component size and color */
   && {
     & svg {
       color: var(--wui-color-icon);
-      block-size: 12px;
-      inline-size: 12px;
+      height: 12px;
+      width: 12px;
       flex: 0 0 12px;
     }
   }
@@ -6206,8 +6201,8 @@ const StyledBoxComponent = styled.div`
   flex-direction: ${({ $flexDirection }) => $flexDirection};
   flex-wrap: ${({ $wrapItems }) => $wrapItems ? "wrap" : "nowrap"};
   justify-content: ${({ $justifyContent }) => $justifyContent};
-  block-size: ${({ $height }) => $height ?? null};
-  inline-size: ${({ $width }) => $width ?? null};
+  height: ${({ $height }) => $height ?? null};
+  width: ${({ $width }) => $width ?? null};
   ${({ $fillBox: fill }) => getFillStyle(fill)};
   ${({ $fillViewport }) => getFillViewportStyle($fillViewport)};
   ${({ $flexMode }) => getFlexStyle($flexMode)};
@@ -6573,7 +6568,7 @@ const StyledText = styled.div`
       display: block;
 
       + p {
-        margin-block-start: var(--paragraph-spacing, var(--wui-space-04));
+        margin-top: var(--paragraph-spacing, var(--wui-space-04));
       }
     `}
 `;
@@ -6617,7 +6612,7 @@ const ButtonGroupComponent = styled.div`
   gap: var(--wui-space-02);
   align-items: center;
   justify-content: ${({ $align }) => getAlignment($align)};
-  inline-size: ${({ $fullWidth }) => $fullWidth ? "100%" : "auto"};
+  width: ${({ $fullWidth }) => $fullWidth ? "100%" : "auto"};
 
   ${mq.smAndUp} {
     flex-direction: row;
@@ -6625,7 +6620,7 @@ const ButtonGroupComponent = styled.div`
 
   &:not([data-wistia-ui-icon-button]) {
     ${mq.smAndDown} {
-      inline-size: 100%;
+      width: 100%;
     }
   }
 
@@ -6636,8 +6631,8 @@ const ButtonGroupComponent = styled.div`
       }
 
       [data-wistia-ui-icon-button] {
-        block-size: var(--icon-button-size-${$buttonSize});
-        inline-size: var(--icon-button-size-${$buttonSize});
+        height: var(--icon-button-size-${$buttonSize});
+        width: var(--icon-button-size-${$buttonSize});
       }
     `}
 `;
@@ -6667,8 +6662,8 @@ const StyledButton$1 = styled(Button)`
   --icon-button-size-xl: 48px;
 
   border-radius: 50%;
-  block-size: ${({ size }) => `var(--icon-button-size-${size})`};
-  inline-size: ${({ size }) => `var(--icon-button-size-${size})`};
+  height: ${({ size }) => `var(--icon-button-size-${size})`};
+  width: ${({ size }) => `var(--icon-button-size-${size})`};
   display: flex;
   justify-content: center;
   align-items: center;
@@ -6699,25 +6694,25 @@ const StyledBanner = styled.div`
   align-items: center;
   padding: var(--wui-space-04);
   gap: var(--wui-space-02) var(--wui-space-03);
-  inline-size: 100%;
+  width: 100%;
 
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
 `;
 const StyledIconContainer$1 = styled(Box)`
-  max-block-size: 44px;
+  max-height: 44px;
 `;
 const StyledTextContainer = styled(Box)`
   flex: 1 1 340px;
-  min-inline-size: 0;
-  max-inline-size: fit-content;
+  min-width: 0;
+  max-width: fit-content;
   flex-wrap: wrap;
 `;
 const StyledButtonGroup = styled(ButtonGroup)`
   flex-shrink: 0;
-  inline-size: auto;
-  max-inline-size: 100%;
+  width: auto;
+  max-width: 100%;
   flex-wrap: wrap;
-  min-inline-size: 0;
+  min-width: 0;
 `;
 /**
 * The `Banner` component is for displaying contextual information to the user such as alerts or feature announcements.
@@ -6828,7 +6823,7 @@ const BreadcrumbContent = styled.span`
   white-space: nowrap;
   display: block;
   text-overflow: ellipsis;
-  text-align: start;
+  text-align: left;
   flex: 0;
 `;
 const Breadcrumb = ({ icon, href, children, ...props }) => {
@@ -6861,8 +6856,8 @@ const StyledCard$1 = styled(Box)`
   outline-offset: -2px;
   border-radius: ${({ $borderRadius }) => `var(--wui-${$borderRadius})`};
   display: flex;
-  block-size: ${({ $height }) => $height};
-  inline-size: ${({ $width }) => $width};
+  height: ${({ $height }) => $height};
+  width: ${({ $width }) => $width};
 `;
 const prominenceMap = {
 	primary: {
@@ -6900,9 +6895,9 @@ Card.displayName = "Card_UI";
 //#region src/components/Center/Center.tsx
 const StyledCenter = styled.div`
   box-sizing: border-box;
-  margin-inline-start: auto;
-  margin-inline-end: auto;
-  max-inline-size: ${({ $maxWidth }) => $maxWidth};
+  margin-left: auto;
+  margin-right: auto;
+  max-width: ${({ $maxWidth }) => $maxWidth};
   ${({ $gutterWidth }) => $gutterWidth && `padding: 0 var(--wui-${$gutterWidth});`}
   ${({ $intrinsic }) => $intrinsic && `
     display: flex;
@@ -6982,7 +6977,7 @@ const StyledFormControlLabel = styled.label`
   display: flex;
   align-items: flex-start;
   gap: var(--wui-space-02);
-  inline-size: 100%;
+  width: 100%;
   color: var(--wui-color-tex);
   font-size: var(--wui-typography-label-3-size);
   font-weight: var(--wui-typography-label-3-weight);
@@ -7049,7 +7044,7 @@ const StyledLegend = styled.legend`
   display: flex;
   flex-direction: column;
   gap: var(--wui-space-01);
-  margin-block-end: var(--wui-space-02);
+  margin-bottom: var(--wui-space-02);
 `;
 /**
 * For grouping like form elements together.
@@ -7094,7 +7089,7 @@ const serializeFormData = (formData) => {
 const StyledForm = styled.form`
   --form-default-width: 690px;
 
-  max-inline-size: ${({ $fullWidth }) => $fullWidth ? "auto" : "var(--form-default-width)"};
+  max-width: ${({ $fullWidth }) => $fullWidth ? "auto" : "var(--form-default-width)"};
 `;
 const FormContext = createContext({
 	values: {},
@@ -7288,16 +7283,16 @@ const StyledCheckboxInput = styled.div`
   outline-style: solid;
   outline-offset: 1px;
   transition: all var(--wui-motion-duration-01) var(--wui-motion-ease);
-  margin-block-start: calc(calc(1lh - var(--wui-checkbox-size)) / 2);
-  inline-size: var(--wui-checkbox-size);
-  block-size: var(--wui-checkbox-size);
-  min-inline-size: var(--wui-checkbox-size);
-  min-block-size: var(--wui-checkbox-size);
+  margin-top: calc(calc(1lh - var(--wui-checkbox-size)) / 2);
+  width: var(--wui-checkbox-size);
+  height: var(--wui-checkbox-size);
+  min-width: var(--wui-checkbox-size);
+  min-height: var(--wui-checkbox-size);
 
   /* checkbox icon */
   svg {
-    inline-size: var(--wui-checkbox-icon-size);
-    block-size: var(--wui-checkbox-icon-size);
+    width: var(--wui-checkbox-icon-size);
+    height: var(--wui-checkbox-icon-size);
   }
 `;
 const StyledHiddenCheckboxInput = styled.input`
@@ -7896,7 +7891,7 @@ const requiredStyle = css`
   &::after {
     color: var(--wui-color-text-error);
     display: inline;
-    padding-inline-start: var(--wui-space-01);
+    padding-left: var(--wui-space-01);
     content: '*';
   }
 `;
@@ -7905,7 +7900,7 @@ const disabledStyle = css`
 `;
 const StyledLabel$2 = styled.label`
   display: block;
-  inline-size: 100%;
+  width: 100%;
   color: var(--wui-color-text);
   font-family: var(--wui-typography-heading-6-family);
   line-height: var(--wui-typography-heading-6-line-height);
@@ -7949,7 +7944,7 @@ const Container$9 = styled.div`
   grid-template-columns: minmax(0, 1fr);
 `;
 const LabelContainer$1 = styled.div`
-  padding-block-start: var(--wui-space-01);
+  padding-top: var(--wui-space-01);
 `;
 const ItemsContainer$1 = styled(RadioGroup$1)`
   display: flex;
@@ -7979,7 +7974,7 @@ ColorGrid.displayName = "ColorGrid_UI";
 //#region src/components/ColorPicker/ColorSwatch.tsx
 const ColorSwatchDiv = styled.div`
   aspect-ratio: 1;
-  inline-size: ${({ $diameterPx }) => `${$diameterPx}px`};
+  width: ${({ $diameterPx }) => `${$diameterPx}px`};
   border-radius: var(--wui-border-radius-rounded);
   box-shadow: inset 0 0 1px 0 var(--wui-color-border-secondary);
   display: flex;
@@ -7996,10 +7991,10 @@ const ColorSwatchDiv = styled.div`
 `;
 const DerivativeHalfCircle = styled.div`
   position: absolute;
-  inset-inline-end: 0;
-  inset-block-start: 0;
-  inline-size: 50%;
-  block-size: 100%;
+  right: 0;
+  top: 0;
+  width: 50%;
+  height: 100%;
   background-color: ${({ $color }) => $color};
   border-radius: 0 var(--wui-border-radius-rounded) var(--wui-border-radius-rounded) 0;
 `;
@@ -8087,7 +8082,7 @@ const StyledPopup$5 = styled(Tooltip$1.Popup)`
   animation-duration: var(--tooltip-animation-duration);
   animation-timing-function: var(--tooltip-animation-timing-function);
   will-change: transform, opacity;
-  max-inline-size: 30em;
+  max-width: 30em;
 
   &[data-closed] {
     animation-name: ${hide};
@@ -8113,22 +8108,22 @@ const StyledPopup$5 = styled(Tooltip$1.Popup)`
 `;
 const arrowEdgeCss = css`
   &[data-side='top'] {
-    inset-block-end: 0;
+    bottom: 0;
     transform: translateY(calc(100% - 2px));
   }
 
   &[data-side='bottom'] {
-    inset-block-start: 0;
+    top: 0;
     transform: translateY(calc(-100% + 2px)) rotate(180deg);
   }
 
   &[data-side='left'] {
-    inset-inline-end: 0;
+    right: 0;
     transform: translateX(calc(100% - 4px)) rotate(-90deg);
   }
 
   &[data-side='right'] {
-    inset-inline-start: 0;
+    left: 0;
     transform: translateX(calc(-100% + 4px)) rotate(90deg);
   }
 `;
@@ -8249,7 +8244,7 @@ const ItemsContainer = styled.div`
   flex-direction: column;
 `;
 const LabelContainer = styled.div`
-  padding-block-start: var(--wui-space-01);
+  padding-top: var(--wui-space-01);
 `;
 /**
 * Groups `ColorListOption` items under a labeled heading within a `ColorList`.
@@ -8386,7 +8381,7 @@ const StyledPopup$4 = styled(Popover$1.Popup)`
   outline: none;
   display: flex;
   flex-direction: column;
-  max-inline-size: ${278}px;
+  max-width: ${278}px;
   overflow: hidden;
 `;
 /**
@@ -8478,7 +8473,7 @@ const DefaultTriggerContentContainer = styled.div`
   display: flex;
   flex-direction: row;
   gap: var(--wui-space-02);
-  padding-inline-end: var(--wui-space-02);
+  padding-right: var(--wui-space-02);
 `;
 const DefaultTriggerContent = () => {
 	return /* @__PURE__ */ jsxs(DefaultTriggerContentContainer, { children: [/* @__PURE__ */ jsx(ValueSwatch, {}), /* @__PURE__ */ jsx(ValueNameOrHexCode, {})] });
@@ -8580,10 +8575,10 @@ const StyledSwitchWrapper = styled.div`
   user-select: none;
 `;
 const StyledSwitchTrack = styled.div`
-  inline-size: var(--wui-switch-width);
-  block-size: var(--wui-switch-height);
-  min-inline-size: var(--wui-switch-width);
-  min-block-size: var(--wui-switch-height);
+  width: var(--wui-switch-width);
+  height: var(--wui-switch-height);
+  min-width: var(--wui-switch-width);
+  min-height: var(--wui-switch-height);
   border-radius: var(--wui-border-radius-rounded);
   display: flex;
   align-items: center;
@@ -8595,7 +8590,7 @@ const StyledSwitchTrack = styled.div`
     background-color var(--wui-motion-duration-03) var(--wui-motion-ease-out),
     outline-color var(--wui-motion-duration-03) var(--wui-motion-ease-out);
   background-color: var(--wui-switch-background-color);
-  margin-block-start: calc(calc(1lh - var(--wui-switch-height)) / 2);
+  margin-top: calc(calc(1lh - var(--wui-switch-height)) / 2);
 `;
 const StyledSwitchThumb = styled.div`
   border-radius: var(--wui-border-radius-rounded);
@@ -8603,9 +8598,9 @@ const StyledSwitchThumb = styled.div`
   transition:
     margin var(--wui-motion-duration-03) var(--wui-motion-ease-out),
     background-color var(--wui-motion-duration-03) var(--wui-motion-ease-out);
-  inline-size: var(--wui-switch-thumb-size);
-  block-size: var(--wui-switch-thumb-size);
-  margin-inline-start: var(--wui-switch-thumb-position);
+  width: var(--wui-switch-thumb-size);
+  height: var(--wui-switch-thumb-size);
+  margin-left: var(--wui-switch-thumb-position);
 `;
 const StyledHiddenSwitchInput = styled.input`
   ${visuallyHiddenStyle}
@@ -8780,12 +8775,12 @@ const StyledInputContainer = styled.div`
   display: inline-flex;
   position: relative;
   ${inputStyles};
-  inline-size: ${({ $fullWidth }) => $fullWidth ? "100%" : "auto"};
-  block-size: ${({ $fullHeight, $isMultiline }) => $fullHeight && $isMultiline ? "100%" : "auto"};
+  width: ${({ $fullWidth }) => $fullWidth ? "100%" : "auto"};
+  height: ${({ $fullHeight, $isMultiline }) => $fullHeight && $isMultiline ? "100%" : "auto"};
 
   input,
   textarea {
-    inline-size: ${({ $fullWidth }) => $fullWidth ? "100%" : "auto"};
+    width: ${({ $fullWidth }) => $fullWidth ? "100%" : "auto"};
     ${({ $monospace }) => $monospace && "font-family: var(--wui-typography-family-mono);"}
   }
 
@@ -8793,7 +8788,7 @@ const StyledInputContainer = styled.div`
     --wui-input-line-height: var(--wui-typography-body-3-line-height);
 
     border-radius: var(--wui-input-multiline-border-radius);
-    block-size: ${({ $fullHeight }) => $fullHeight ? "100%" : "auto"};
+    height: ${({ $fullHeight }) => $fullHeight ? "100%" : "auto"};
 
     /* override height calculations when fullHeight is enabled */
     ${({ $fullHeight }) => $fullHeight && `
@@ -8840,9 +8835,9 @@ const StyledInputContainer = styled.div`
   [type='search'] {
     &::-webkit-search-cancel-button {
       appearance: none;
-      block-size: 16px;
-      inline-size: 16px;
-      margin-inline-end: -4px;
+      height: 16px;
+      width: 16px;
+      margin-right: -4px;
 
       /* css vars don't work in data URLs, so the stroke color value is hardcoded. if we support dark mode, we'll need to swap the background image based on the users preferred color scheme */
       background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 4L4 12M4 4L12 12' stroke='%2364646a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
@@ -8862,8 +8857,8 @@ const StyledInputContainer = styled.div`
     display: flex;
     align-items: center;
     position: absolute;
-    inset-block-start: 50%;
-    inset-inline-start: var(--wui-input-horizontal-padding);
+    top: 50%;
+    left: var(--wui-input-horizontal-padding);
     transform: translateY(-50%);
   }
 
@@ -8876,21 +8871,21 @@ const StyledInputContainer = styled.div`
 
   &:has(.wui-input-left-icon) input,
   &:has(.wui-input-left-icon) textarea {
-    padding-inline-start: 32px;
+    padding-left: 32px;
   }
 
   .wui-input-right-icon {
     display: flex;
     align-items: center;
     position: absolute;
-    inset-block-start: 50%;
-    inset-inline-end: var(--wui-input-horizontal-padding);
+    top: 50%;
+    right: var(--wui-input-horizontal-padding);
     transform: translateY(-50%);
   }
 
   &:has(.wui-input-right-icon) input,
   &:has(.wui-input-right-icon) textarea {
-    padding-inline-end: 32px;
+    padding-right: 32px;
   }
 `;
 /**
@@ -9060,8 +9055,8 @@ HexColorInput.displayName = "HexColorInput_UI";
 //#region src/components/ColorPicker/HSVHueCanvas.tsx
 const Canvas$1 = styled.canvas`
   display: block;
-  block-size: 100%;
-  inline-size: 100%;
+  height: 100%;
+  width: 100%;
 `;
 /**
 * Canvas component that draws a horizontal hue gradient.
@@ -9100,7 +9095,7 @@ const HSVHueCanvas = ({ hsv }) => {
 const Container$2 = styled.div`
   border-radius: var(--wui-border-radius-rounded);
   border: 1px solid var(--wui-color-border);
-  block-size: ${24}px;
+  height: ${24}px;
   overflow: hidden;
   padding: 0 var(--wui-space-03);
   position: relative;
@@ -9109,18 +9104,18 @@ const Root = styled(Slider$1.Root)`
   align-items: center;
   display: flex;
   position: absolute;
-  inset-block-start: 50%;
+  top: 50%;
   transform: translateY(-50%);
-  inline-size: calc(100% - var(--wui-space-05));
-  block-size: 16px;
+  width: calc(100% - var(--wui-space-05));
+  height: 16px;
 `;
 const Control = styled(Slider$1.Control)`
-  block-size: 100%;
+  height: 100%;
   touch-action: none;
-  inline-size: 100%;
+  width: 100%;
 `;
 const Track = styled(Slider$1.Track)`
-  inline-size: 100%;
+  width: 100%;
 `;
 const Thumb$1 = styled(Slider$1.Thumb)`
   position: relative;
@@ -9132,10 +9127,10 @@ const ThumbInner = styled.div`
   box-shadow:
     inset 0 0 0 1px var(--wui-color-border),
     inset 0 0 0 2px black;
-  block-size: 16px;
+  height: 16px;
   position: absolute;
   transform: translate(-50%, -50%);
-  inline-size: 16px;
+  width: 16px;
 
   ${Thumb$1}:focus-visible > & {
     box-shadow:
@@ -9218,7 +9213,7 @@ const drawSmoothCurve = (context, points) => {
 //#region src/components/ColorPicker/HSVSaturationValueCanvas.tsx
 const Canvas = styled.canvas`
   display: block;
-  inline-size: 100%;
+  width: 100%;
 `;
 const calculateContrastCurve = (width, height, hue, minimumContrastRatio, colorForComparison, limit, opacityForContrastCalculation) => {
 	const contrastPoints = [];
@@ -9327,11 +9322,11 @@ const Thumb = styled.button.attrs({ type: "button" })`
     inset 0 0 0 1px var(--wui-color-border),
     inset 0 0 0 2px black;
   cursor: pointer;
-  block-size: 16px;
+  height: 16px;
   outline: none;
   position: absolute;
   transform: translate(-50%, -50%);
-  inline-size: 16px;
+  width: 16px;
 
   &:focus-visible {
     box-shadow:
@@ -9518,8 +9513,8 @@ const TagLabel = styled.a`
   gap: var(--wui-space-01);
 
   svg {
-    block-size: 12px;
-    inline-size: 12px;
+    height: 12px;
+    width: 12px;
     flex: 0 0 12px;
   }
 
@@ -9529,7 +9524,7 @@ const TagLabel = styled.a`
   }
 
   &:not(:only-child) {
-    padding-inline-end: var(--wui-space-01);
+    padding-right: var(--wui-space-01);
   }
 
   &:is(a):hover {
@@ -9542,18 +9537,18 @@ const TagLabel = styled.a`
 `;
 const TagDivider = styled.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
-  border-inline-start: 1px solid var(--wui-color-border);
+  border-left: 1px solid var(--wui-color-border);
   display: flex;
-  block-size: 14px;
-  inline-size: 1px;
+  height: 14px;
+  width: 1px;
 `;
 const StyledRemoveButton = styled.button`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   all: unset;
   cursor: pointer;
   display: flex;
-  block-size: 22px;
-  inline-size: 12px;
+  height: 22px;
+  width: 12px;
   align-items: center;
   padding: 0 var(--wui-space-01);
   border-radius: var(--wui-border-radius-01);
@@ -9650,7 +9645,7 @@ const getDefaultTypographicElement = (variant) => {
 //#region src/components/Combobox/Combobox.tsx
 const ComboboxWrapper = styled.div`
   ${inputCss};
-  inline-size: ${({ $fullWidth }) => $fullWidth ? "100%" : "auto"};
+  width: ${({ $fullWidth }) => $fullWidth ? "100%" : "auto"};
   padding: var(--wui-input-vertical-padding) var(--wui-input-horizontal-padding);
   background-color: var(--wui-input-color-bg);
   border: none;
@@ -9666,7 +9661,7 @@ const ComboboxWrapper = styled.div`
   gap: var(--wui-space-01);
 
   > * {
-    inline-size: min-content !important;
+    width: min-content !important;
   }
 
   &:focus-within {
@@ -9700,7 +9695,7 @@ const ComboboxWrapper = styled.div`
 const ComboboxInput = styled(Ariakit.Combobox)`
   appearance: none;
   padding: 0;
-  inline-size: 100%;
+  width: 100%;
   border: 0 none;
   flex: 1;
 
@@ -9722,7 +9717,7 @@ const ComboboxPopover = styled(Ariakit.ComboboxPopover)`
 
   border-radius: var(--wui-border-radius-02);
   padding: var(--wui-space-02);
-  max-block-size: var(--wui-popover-max-height, 300px);
+  max-height: var(--wui-popover-max-height, 300px);
   background-color: var(--wui-color-bg-surface);
   box-shadow: var(--wui-elevation-01);
   border: 1px solid var(--wui-color-border);
@@ -9732,7 +9727,7 @@ const ComboboxPopover = styled(Ariakit.ComboboxPopover)`
   flex-direction: column;
   overflow: auto;
   overscroll-behavior: contain; /* stylelint-disable-line plugin/use-baseline */
-  margin-block-start: var(--wui-space-02);
+  margin-top: var(--wui-space-02);
 
   &[aria-busy='true'] {
     --item-opacity: 0.5;
@@ -9928,9 +9923,9 @@ const menuContentCss = css`
   background: var(--menu-bg);
   border-radius: var(--menu-border-radius);
   box-shadow: var(--menu-shadow);
-  max-block-size: var(--available-height);
-  min-inline-size: var(--menu-min-width);
-  max-inline-size: var(--menu-max-width);
+  max-height: var(--available-height);
+  min-width: var(--menu-min-width);
+  max-width: var(--menu-max-width);
   overflow: auto;
   padding: var(--menu-padding);
   transform-origin: var(--transform-origin);
@@ -9941,10 +9936,10 @@ const menuContentCss = css`
   }
 
   ${mq.smAndUp} {
-    inset-block-end: 0;
+    bottom: 0;
     padding: var(--menu-padding);
-    inset-inline-end: 0;
-    inset-block-start: 0;
+    right: 0;
+    top: 0;
     transform: initial;
   }
 
@@ -9954,7 +9949,7 @@ const menuContentCss = css`
 `;
 const MenuPopup = styled(Menu$1.Popup)`
   ${menuContentCss}
-  min-inline-size: var(--anchor-width);
+  min-width: var(--anchor-width);
 `;
 const DEFAULT_TRIGGER_PROPS = {};
 /**
@@ -10142,7 +10137,7 @@ const StyledDataCard = styled.div`
     color: transparent;
     user-select: none;
     border-radius: var(--wui-border-radius-01);
-    inline-size: fit-content;
+    width: fit-content;
   }
 
   &[data-click-region] {
@@ -10191,18 +10186,18 @@ const StyledLabel$1 = styled(Heading)`
   grid-area: label;
 
   &[data-wui-data-card-skeleton='true'] {
-    inline-size: 80px;
+    width: 80px;
   }
 
   button {
-    text-align: start;
+    text-align: left;
   }
 `;
 const StyledValue = styled(Heading)`
   grid-area: value;
 
   &[data-wui-data-card-skeleton='true'] {
-    inline-size: min(90%, 156px);
+    width: min(90%, 156px);
   }
 `;
 const StyledSlot = styled.div`
@@ -10213,8 +10208,8 @@ const StyledSlot = styled.div`
 `;
 const StyledDataCardTrendContainer = styled.div`
   position: absolute;
-  inset-block-end: var(--wui-space-01);
-  inset-inline-end: var(--wui-space-01);
+  bottom: var(--wui-space-01);
+  right: var(--wui-space-01);
 `;
 const StyledSubtitle = styled(Text)`
   grid-area: subtitle;
@@ -10285,9 +10280,9 @@ const StyledDataCards = styled(Box)`
   );
 
   > * {
-    min-inline-size: 120px;
+    min-width: 120px;
     flex-basis: var(--wui-data-cards-column-width, 0);
-    max-inline-size: ${({ $cardMaxWidth }) => $cardMaxWidth};
+    max-width: ${({ $cardMaxWidth }) => $cardMaxWidth};
   }
 `;
 /**
@@ -10341,7 +10336,7 @@ const StyledIconContainer = styled.div`
   display: flex;
   align-items: center;
   align-self: center;
-  block-size: 0;
+  height: 0;
 `;
 const DataCardHoverArrow = (props) => /* @__PURE__ */ jsx(StyledIconContainer, {
 	...props,
@@ -10365,7 +10360,7 @@ const StyledDataList = styled.dl`
     margin: 0;
     padding: 0;
     font-weight: var(--wui-datalist-label-prominence);
-    inline-size: var(--wui-datalist-label-max-width, auto);
+    width: var(--wui-datalist-label-max-width, auto);
   }
 
   dd {
@@ -10440,25 +10435,25 @@ const StyledArrowSvg = styled.svg`
 
   /* override inline positioning and rotate the arrow so the circle sits near the trigger and the stalk extends down toward the popup. */
   &[data-side='top'] {
-    inset-block-start: 100% !important;
+    top: 100% !important;
   }
 
   &[data-side='bottom'] {
-    inset-block-start: 0 !important;
+    top: 0 !important;
     transform: rotate(180deg);
     transform-origin: center 0;
   }
 
   &[data-side='left'] {
-    inset-inline-end: 0;
-    inset-inline-start: auto;
+    right: 0;
+    left: auto;
     transform: translateX(52px) rotate(-90deg);
     transform-origin: center center;
   }
 
   &[data-side='right'] {
-    inset-inline-start: 0;
-    inset-inline-end: auto;
+    left: 0;
+    right: auto;
     transform: translateX(-52px) rotate(90deg);
     transform-origin: center center;
   }
@@ -10536,8 +10531,8 @@ const StyledPopup$3 = styled(Popover$1.Popup)`
   ${({ $unstyled }) => !$unstyled && css`
       border-radius: var(--wui-border-radius-02);
       padding: var(--wui-space-04);
-      max-inline-size: var(--wui-popover-max-width, 320px);
-      max-block-size: var(--wui-popover-max-height, auto);
+      max-width: var(--wui-popover-max-width, 320px);
+      max-height: var(--wui-popover-max-height, auto);
       background-color: var(--wui-color-bg-surface);
       box-shadow: var(--wui-elevation-01);
       border: 1px solid var(--wui-color-border);
@@ -10550,8 +10545,8 @@ const StyledPopup$3 = styled(Popover$1.Popup)`
 
   [data-wui-popover-close] {
     position: absolute;
-    inset-block-start: var(--wui-space-02);
-    inset-inline-end: var(--wui-space-02);
+    top: var(--wui-space-02);
+    right: var(--wui-space-02);
   }
 `;
 /**
@@ -10661,8 +10656,8 @@ const StyledPopup$2 = styled(Popover$1.Popup)`
   ${({ $unstyled }) => !$unstyled && css`
       border-radius: var(--wui-border-radius-02);
       padding: var(--wui-space-04);
-      max-inline-size: var(--wui-popover-max-width);
-      max-block-size: var(--wui-popover-max-height);
+      max-width: var(--wui-popover-max-width);
+      max-height: var(--wui-popover-max-height);
       background-color: var(--wui-color-bg-surface);
       box-shadow: var(--wui-elevation-01);
       border: 1px solid var(--wui-color-border);
@@ -10671,8 +10666,8 @@ const StyledPopup$2 = styled(Popover$1.Popup)`
 
   [data-wui-popover-close] {
     position: absolute;
-    inset-block-start: var(--wui-space-02);
-    inset-inline-end: var(--wui-space-02);
+    top: var(--wui-space-02);
+    right: var(--wui-space-02);
   }
 `;
 const DEFAULT_SIDE_OFFSET = 8;
@@ -10836,9 +10831,9 @@ const StyledMobileTrigger = styled.button`
   align-items: center;
   justify-content: space-between;
   gap: var(--wui-space-02);
-  inline-size: 100%;
+  width: 100%;
   font-family: inherit;
-  text-align: start;
+  text-align: left;
   cursor: pointer;
 
   &:disabled {
@@ -11416,21 +11411,21 @@ DatePicker.displayName = "DatePicker_UI";
 //#endregion
 //#region src/components/Divider/Divider.tsx
 const horizontalBorderCss = css`
-  border-block-start-color: var(--wui-color-border);
-  border-block-start-style: solid;
-  border-block-start-width: 1px;
+  border-top-color: var(--wui-color-border);
+  border-top-style: solid;
+  border-top-width: 1px;
   clear: both; /* for horizontal dividers, ensure it clears any floats */
-  block-size: 0;
-  margin-inline-start: var(--wui-divider-inset);
-  margin-inline-end: var(--wui-divider-inset);
+  height: 0;
+  margin-left: var(--wui-divider-inset);
+  margin-right: var(--wui-divider-inset);
 `;
 const verticalBorderCss = css`
   background-color: var(--wui-color-border);
-  max-inline-size: 1px;
-  min-block-size: 100%;
-  inline-size: 1px;
-  margin-block-start: var(--wui-divider-inset);
-  margin-block-end: var(--wui-divider-inset);
+  max-width: 1px;
+  min-height: 100%;
+  width: 1px;
+  margin-top: var(--wui-divider-inset);
+  margin-bottom: var(--wui-divider-inset);
 `;
 const DividerComponent = styled.div`
   ${({ $orientation }) => {
@@ -11461,11 +11456,11 @@ Divider.displayName = "Divider_UI";
 //#region src/components/EditableHeading/EditableHeading.tsx
 const StyledInput$1 = styled(Input)`
   &:not([rows]) {
-    min-block-size: unset;
+    min-height: unset;
   }
 
   &:focus {
-    block-size: ${({ $height }) => `${$height}px !important`};
+    height: ${({ $height }) => `${$height}px !important`};
   }
 
   && {
@@ -11476,11 +11471,11 @@ const StyledInput$1 = styled(Input)`
     --wui-input-line-height: var(--line-height);
 
     font-family: var(--font-family);
-    inline-size: 100%;
+    width: 100%;
     padding: var(--wui-space-02);
     border: none;
-    block-size: ${({ $height }) => `${$height}px`};
-    min-block-size: ${({ $height }) => `${$height}px`};
+    height: ${({ $height }) => `${$height}px`};
+    min-height: ${({ $height }) => `${$height}px`};
     resize: none;
   }
 `;
@@ -11495,7 +11490,7 @@ const editableStyles = css`
   }
 `;
 const StyledHeading = styled(Heading)`
-  inline-size: 100%;
+  width: 100%;
   border-radius: var(--wui-border-radius-02);
   padding: var(--wui-space-02);
   overflow-wrap: anywhere;
@@ -11699,7 +11694,7 @@ const StyledEditableTextDisplay = styled.div`
       `;
 }}
   ${({ $minLines }) => isNotNil($minLines) && css`
-      min-block-size: calc(${$minLines}lh + calc(var(--wui-editable-text-padding) * 2));
+      min-height: calc(${$minLines}lh + calc(var(--wui-editable-text-padding) * 2));
     `}
   word-break: normal;
   overflow-wrap: anywhere;
@@ -12075,17 +12070,17 @@ const StyledFeatureCardImageContainer = styled.div`
 
   overflow: hidden;
   padding: var(--wui-space-04);
-  block-size: var(--wui-feature-card-image-height);
-  inline-size: var(--wui-feature-card-image-width);
+  height: var(--wui-feature-card-image-height);
+  width: var(--wui-feature-card-image-width);
   justify-self: stretch;
   align-self: stretch;
-  max-inline-size: 300px;
+  max-width: 300px;
 
   /* Make image container stretch full width in vertical layout and remove bottom padding */
   [data-wui-feature-card-orientation='vertical'] & {
-    max-inline-size: none;
-    inline-size: 100%;
-    padding-block-end: var(--wui-space-00);
+    max-width: none;
+    width: 100%;
+    padding-bottom: var(--wui-space-00);
   }
 
   /* In horizontal layout, make image height equal to the content height and apply aspect ratio */
@@ -12096,12 +12091,12 @@ const StyledFeatureCardImageContainer = styled.div`
 
     /* Handle image alignment and remove padding next to content */
     &[data-wui-feature-card-image='right'] {
-      padding-inline-start: var(--wui-space-00);
+      padding-left: var(--wui-space-00);
       order: 2;
     }
 
     &[data-wui-feature-card-image='left'] {
-      padding-inline-end: var(--wui-space-00);
+      padding-right: var(--wui-space-00);
     }
   }
 
@@ -12274,7 +12269,7 @@ const ErrorText = styled(Text)`
 const StyledErrorList = styled.ul`
   margin: 0;
   padding: 0;
-  padding-inline-start: var(--wui-space-04);
+  padding-left: var(--wui-space-04);
   display: flex;
   flex-direction: column;
   gap: var(--wui-space-01);
@@ -12444,7 +12439,7 @@ const StyledGrid = styled.div`
 
   display: grid;
   gap: var(--wui-grid-column-gap) var(--wui-grid-row-gap);
-  inline-size: 100%;
+  width: 100%;
 
   ${({ $maxColumns, $minChildWidth, $expandItems }) => getGridTemplateColumns($maxColumns, $minChildWidth, $expandItems)}
 `;
@@ -12514,8 +12509,8 @@ const StyledPopup$1 = styled(PreviewCard$1.Popup)`
   ${({ $unstyled, $paddingSize }) => !$unstyled && css`
       border-radius: var(--wui-border-radius-02);
       padding: var(--wui-${$paddingSize});
-      max-inline-size: var(--wui-preview-card-max-width, 320px);
-      max-block-size: var(--wui-preview-card-max-height, auto);
+      max-width: var(--wui-preview-card-max-width, 320px);
+      max-height: var(--wui-preview-card-max-height, auto);
       background-color: var(--wui-color-bg-surface);
       box-shadow: var(--wui-elevation-01);
       border: 1px solid var(--wui-color-border);
@@ -12559,8 +12554,8 @@ PreviewCard.displayName = "PreviewCard_UI";
 //#region src/components/InputClickToCopy/InputClickToCopy.tsx
 const StyledIconButton$1 = styled(IconButton)`
   /* override size for icon button since prop gets changed by Input */
-  block-size: var(--icon-button-size-sm);
-  inline-size: var(--icon-button-size-sm);
+  height: var(--icon-button-size-sm);
+  width: var(--icon-button-size-sm);
 
   /* override input padding variable since it is used for Input Icon positioning */
   --wui-input-horizontal-padding: 4px;
@@ -13317,8 +13312,8 @@ const InputDuration = ({ decimalUnitLength = 2, disabled = false, fullWidth = fa
 //#region src/components/InputPassword/InputPassword.tsx
 const StyledIconButton = styled(IconButton)`
   /* override size for icon button since prop gets changed by Input */
-  block-size: var(--icon-button-size-sm);
-  inline-size: var(--icon-button-size-sm);
+  height: var(--icon-button-size-sm);
+  width: var(--icon-button-size-sm);
 
   /* override input padding variable since it is used for Input Icon positioning */
   --wui-input-horizontal-padding: 4px;
@@ -13425,7 +13420,7 @@ const StyledKeyboardShortcut = styled.div`
 const StyledKey = styled.kbd`
   align-items: center;
   background: var(--wui-color-bg-surface-secondary);
-  border-block-end: 1px solid var(--wui-color-border-secondary);
+  border-bottom: 1px solid var(--wui-color-border-secondary);
   border-radius: 4px;
   color: var(--wui-color-text);
   display: flex;
@@ -13439,10 +13434,10 @@ const StyledKey = styled.kbd`
 
   /* Adds tabular numbers to ensure the width of the key is consistent */
   font-variant-numeric: slashed-zero tabular-nums;
-  block-size: 20px;
+  height: 20px;
   justify-content: center;
   line-height: 20px;
-  min-inline-size: 20px;
+  min-width: 20px;
   padding: 0 var(--wui-space-01);
 `;
 const Label$1 = styled.span`
@@ -13487,7 +13482,7 @@ KeyboardShortcut.displayName = "KeyboardShortcut_UI";
 //#endregion
 //#region src/components/List/ListItem.tsx
 const ListItemComponent = styled.li`
-  margin-block-end: var(--wui-space-02);
+  margin-bottom: var(--wui-space-02);
 `;
 const ListItem = ({ children }) => {
 	if (isNil(children)) return null;
@@ -13498,22 +13493,22 @@ ListItem.displayName = "ListItem_UI";
 //#region src/components/List/List.tsx
 const spacesStyle = css`
   overflow: hidden;
-  padding-inline-start: 0;
+  padding-left: 0;
   vertical-align: bottom;
 
   li {
     display: block;
-    float: inline-start;
+    float: left;
 
     &::after {
       content: ' ';
-      padding-inline-end: var(--wui-space-03);
+      padding-right: var(--wui-space-03);
     }
 
     &:last-child {
       &::after {
         content: '' !important;
-        padding-inline-end: 0;
+        padding-right: 0;
       }
     }
   }
@@ -13524,7 +13519,7 @@ const commasStyle = css`
   li {
     &::after {
       content: ',' !important;
-      padding-inline-end: var(--wui-space-01);
+      padding-right: var(--wui-space-01);
     }
   }
 `;
@@ -13534,8 +13529,8 @@ const slashesStyle = css`
   li {
     &::after {
       content: '/' !important;
-      padding-inline-start: var(--wui-space-01);
-      padding-inline-end: var(--wui-space-01);
+      padding-left: var(--wui-space-01);
+      padding-right: var(--wui-space-01);
     }
   }
 `;
@@ -13545,14 +13540,14 @@ const breadcrumbsStyle = css`
   li {
     &::after {
       content: '>' !important;
-      padding-inline-start: var(--wui-space-01);
-      padding-inline-end: var(--wui-space-01);
+      padding-left: var(--wui-space-01);
+      padding-right: var(--wui-space-01);
     }
   }
 `;
 const unbulletedStyle = css`
   list-style: none;
-  padding-inline-start: 0;
+  padding-left: 0;
 `;
 const ListComponent = styled.ul`
   list-style-position: outside;
@@ -13565,18 +13560,18 @@ const ListComponent = styled.ul`
   ${({ $variant }) => $variant === "breadcrumbs" && breadcrumbsStyle};
 
   > li:last-child {
-    margin-block-end: 0;
+    margin-bottom: 0;
   }
 
   ul,
   ol {
-    margin-block-start: var(--wui-space-01);
+    margin-top: var(--wui-space-01);
   }
 
   /* nested lists should not have bottom margins because their container <li> will have one */
   li ul,
   li ol {
-    margin-block-end: 0;
+    margin-bottom: 0;
   }
 `;
 const renderListComponent = (listItems, variant, { ...otherProps }) => {
@@ -13732,7 +13727,7 @@ const baseMarkdownCss = (textSize = "body2") => css`
     background-color: var(--wui-color-bg-surface-secondary);
     border-radius: var(--wui-border-radius-01);
     padding: 00.75em;
-    overflow-inline: auto;
+    overflow-x: auto;
   }
 
   pre code {
@@ -13744,13 +13739,13 @@ const baseMarkdownCss = (textSize = "body2") => css`
 
   hr {
     border: none;
-    border-block-start: 1px solid var(--wui-color-border);
+    border-top: 1px solid var(--wui-color-border);
     margin-block: calc(var(--wui-markdown-base-unit) * 1.5);
   }
 
   img {
-    max-inline-size: 100%;
-    block-size: auto;
+    max-width: 100%;
+    height: auto;
   }
 `;
 //#endregion
@@ -13796,7 +13791,7 @@ const StyledButton = styled(Button)`
   gap: var(--menu-item-inner-gap);
   padding: var(--menu-item-padding);
   border-radius: var(--wui-border-radius-01);
-  text-align: start;
+  text-align: left;
   color: var(--wui-color-text-button);
   font-size: var(--menu-label-font-size);
   font-weight: var(--menu-label-font-weight);
@@ -13824,25 +13819,25 @@ const StyledButton = styled(Button)`
   }
 `;
 const StyledLeftIconContainer = styled.div`
-  block-size: var(--menu-item-left-icon-size);
-  inline-size: var(--menu-item-left-icon-size);
+  height: var(--menu-item-left-icon-size);
+  width: var(--menu-item-left-icon-size);
 
   && {
     & svg {
-      block-size: var(--menu-item-left-icon-size);
-      inline-size: var(--menu-item-left-icon-size);
+      height: var(--menu-item-left-icon-size);
+      width: var(--menu-item-left-icon-size);
       flex: 0 0 var(--menu-item-left-icon-size);
     }
   }
 `;
 const StyledRightIconContainer = styled.div`
-  block-size: var(--menu-item-right-icon-size);
-  inline-size: var(--menu-item-right-icon-size);
+  height: var(--menu-item-right-icon-size);
+  width: var(--menu-item-right-icon-size);
 
   && {
     & svg {
-      block-size: var(--menu-item-right-icon-size);
-      inline-size: var(--menu-item-right-icon-size);
+      height: var(--menu-item-right-icon-size);
+      width: var(--menu-item-right-icon-size);
       flex: 0 0 var(--menu-item-right-icon-size);
     }
   }
@@ -13918,7 +13913,7 @@ const SubMenuPopup = styled(Menu$1.Popup)`
   }
 `;
 const StyledMobileSubMenuItems = styled.div`
-  margin-inline-start: var(--wui-space-04);
+  margin-left: var(--wui-space-04);
 `;
 const StyledSubTrigger = styled(Menu$1.SubmenuTrigger)`
   outline: none;
@@ -14164,26 +14159,26 @@ const MeterBarContainer = styled.div`
   overflow: hidden;
   background-color: var(--wui-color-bg-surface-secondary);
   border-radius: var(--wui-border-radius-rounded);
-  inline-size: 100%;
-  block-size: var(--meter-height);
+  width: 100%;
+  height: var(--meter-height);
   transform: translateZ(0);
 `;
 const MeterSegmentBar = styled.div`
   position: absolute;
-  inset-block-start: 0;
-  inset-inline-start: ${({ $offset }) => $offset}%;
-  inline-size: ${({ $width }) => $width}%;
-  block-size: 100%;
+  top: 0;
+  left: ${({ $offset }) => $offset}%;
+  width: ${({ $width }) => $width}%;
+  height: 100%;
   background-color: ${({ $color }) => `var(--wui-${$color})`};
 
   &:first-child {
-    border-start-start-radius: var(--wui-border-radius-rounded);
-    border-end-start-radius: var(--wui-border-radius-rounded);
+    border-top-left-radius: var(--wui-border-radius-rounded);
+    border-bottom-left-radius: var(--wui-border-radius-rounded);
   }
 
   &:last-child {
-    border-start-end-radius: var(--wui-border-radius-rounded);
-    border-end-end-radius: var(--wui-border-radius-rounded);
+    border-top-right-radius: var(--wui-border-radius-rounded);
+    border-bottom-right-radius: var(--wui-border-radius-rounded);
   }
 `;
 const MeterDescription = styled.div`
@@ -14203,8 +14198,8 @@ const MeterKeyItem = styled.div`
   gap: var(--wui-space-01);
 `;
 const MeterKeyColorIndicator = styled.div`
-  inline-size: 8px;
-  block-size: 8px;
+  width: 8px;
+  height: 8px;
   border-radius: 50%;
   background-color: ${({ $color }) => `var(--wui-${$color})`};
   flex-shrink: 0;
@@ -14309,20 +14304,20 @@ const Header = styled.header`
   display: flex;
   order: 1;
   padding: 0 var(--wui-space-05);
-  padding-block-end: 0;
+  padding-bottom: 0;
   gap: var(--wui-space-01);
   justify-content: ${({ $hideTitle }) => $hideTitle ? "flex-end" : "space-between"}; /* ensure ModalCloseButton is right-aligned */
 
   /* Dialog.Title creates an h2 element which inherits some margin */
   h2 {
     margin: 0;
-    padding-inline-end: ${({ $hideCloseButon }) => $hideCloseButon ? "0" : "var(--wui-space-03)"};
+    padding-right: ${({ $hideCloseButon }) => $hideCloseButon ? "0" : "var(--wui-space-03)"};
   }
 
   button {
     position: absolute;
-    inset-inline-end: var(--wui-space-03);
-    inset-block-start: var(--wui-space-03);
+    right: var(--wui-space-03);
+    top: var(--wui-space-03);
   }
 `;
 const Title = styled(Dialog.Title)`
@@ -14371,10 +14366,10 @@ const positionStyleMap = {
   --wui-modal-screen-offset: var(--wui-space-05);
   --wui-modal-translate-y: -50%;
 
-  block-size: auto;
-  max-block-size: calc(100vb - var(--wui-modal-screen-offset) * 2);
-  inset-block-start: 50%;
-  inset-inline-start: 50%;
+  height: auto;
+  max-height: calc(100vh - var(--wui-modal-screen-offset) * 2);
+  top: 50%;
+  left: 50%;
   transform: translateX(-50%) translateY(var(--wui-modal-translate-y));
   transform-origin: left center;
   animation: ${modalEnter} var(--wui-motion-duration-04) var(--wui-motion-ease-out);
@@ -14384,16 +14379,16 @@ const positionStyleMap = {
   }
 `,
 	"fixed-top": css`
-  --wui-modal-screen-offset-top: 15vb;
-  --wui-modal-screen-offset-bottom: 5vb;
+  --wui-modal-screen-offset-top: 15vh;
+  --wui-modal-screen-offset-bottom: 5vh;
   --wui-modal-translate-y: 0%;
 
-  block-size: auto;
-  max-block-size: calc(
-    100vb - var(--wui-modal-screen-offset-top) - var(--wui-modal-screen-offset-bottom)
+  height: auto;
+  max-height: calc(
+    100vh - var(--wui-modal-screen-offset-top) - var(--wui-modal-screen-offset-bottom)
   );
-  inset-block-start: var(--wui-modal-screen-offset-top);
-  inset-inline-start: 50%;
+  top: var(--wui-modal-screen-offset-top);
+  left: 50%;
   transform: translateX(-50%) translateY(var(--wui-modal-translate-y));
   transform-origin: left center;
   animation: ${modalEnter} var(--wui-motion-duration-04) var(--wui-motion-ease-out);
@@ -14405,9 +14400,9 @@ const positionStyleMap = {
 	"right-side-panel": css`
   --wui-modal-screen-offset: var(--wui-space-05);
 
-  block-size: calc(100vb - var(--wui-modal-screen-offset) * 2);
-  inset-block-start: var(--wui-modal-screen-offset);
-  inset-inline-end: var(--wui-modal-screen-offset);
+  height: calc(100vh - var(--wui-modal-screen-offset) * 2);
+  top: var(--wui-modal-screen-offset);
+  right: var(--wui-modal-screen-offset);
   animation: ${keyframes`
   from {
     opacity: 0;
@@ -14441,10 +14436,10 @@ const StyledModalContent = styled(Dialog.Popup)`
   display: flex;
   flex-direction: column;
   gap: var(--wui-space-03);
-  inset-block-start: 0;
-  inset-inline-start: 0;
-  inline-size: 100vi;
-  block-size: 100vb;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
   z-index: var(--wui-zindex-modal);
   box-sizing: border-box;
   padding: var(--wui-space-05) 0;
@@ -14452,10 +14447,10 @@ const StyledModalContent = styled(Dialog.Popup)`
 
   ${mq.smAndUp} {
     position: fixed;
-    inset-block-start: unset;
-    inset-inline-start: unset;
-    inline-size: calc(100vi - var(--wui-space-05) * 2);
-    max-inline-size: ${({ $width }) => $width ?? "532px"};
+    top: unset;
+    left: unset;
+    width: calc(100vw - var(--wui-space-05) * 2);
+    max-width: ${({ $width }) => $width ?? "532px"};
     border-radius: var(--wui-border-radius-03);
     animation-duration: var(--wui-motion-duration-03);
     animation-timing-function: var(--wui-motion-ease-out);
@@ -14515,9 +14510,9 @@ const ModalBody = styled.div`
 `;
 const ModalScrollArea = styled.div`
   order: 2;
-  max-block-size: 90vb;
-  overflow-block: auto;
-  block-size: 100%;
+  max-height: 90vh;
+  overflow-y: auto;
+  height: 100%;
 `;
 const ModalFooter = styled.footer`
   padding: 0 var(--wui-space-05);
@@ -14586,7 +14581,7 @@ const ProgressBarWrapper = styled.div`
   gap: var(--wui-space-02);
 `;
 const StyledTrack = styled(Progress.Track)`
-  block-size: 100%;
+  height: 100%;
   overflow: hidden;
 `;
 const ProgressBarLabel = styled.div`
@@ -14601,9 +14596,9 @@ const StyledProgressIndicator = styled(Progress.Indicator)`
   ${({ $colorScheme }) => getColorScheme($colorScheme)}
   background-color: var(--wui-color-bg-fill);
   display: block;
-  border-start-end-radius: var(--wui-border-radius-rounded);
-  border-end-end-radius: var(--wui-border-radius-rounded);
-  transition: inline-size 660ms cubic-bezier(0.65, 0, 0.35, 1);
+  border-top-right-radius: var(--wui-border-radius-rounded);
+  border-bottom-right-radius: var(--wui-border-radius-rounded);
+  transition: width 660ms cubic-bezier(0.65, 0, 0.35, 1);
 `;
 const StyledProgressBar = styled(Progress.Root)`
   ${({ $colorScheme }) => getColorScheme($colorScheme)}
@@ -14611,8 +14606,8 @@ const StyledProgressBar = styled(Progress.Root)`
   overflow: hidden;
   background-color: var(--wui-color-bg-surface-secondary);
   border-radius: var(--wui-border-radius-rounded);
-  inline-size: 100%;
-  block-size: var(--progress-bar-height);
+  width: 100%;
+  height: var(--progress-bar-height);
 
   /* Fix overflow clipping in Safari: https://gist.github.com/domske/b66047671c780a238b51c51ffde8d3a0 */
   transform: translateZ(0);
@@ -14690,25 +14685,25 @@ const StyledRadioWrapper = styled.div`
 `;
 const StyledRadioInput = styled.div`
   ${({ $size }) => getSizeCss($size)}
-  inline-size: var(--wui-radio-size);
-  block-size: var(--wui-radio-size);
-  min-inline-size: var(--wui-radio-size);
-  min-block-size: var(--wui-radio-size);
+  width: var(--wui-radio-size);
+  height: var(--wui-radio-size);
+  min-width: var(--wui-radio-size);
+  min-height: var(--wui-radio-size);
   background-color: var(--wui-radio-background-color);
   box-shadow: inset 0 0 0 1px var(--wui-radio-border-color);
   border-radius: 100%;
   position: relative;
   cursor: pointer;
   transition: box-shadow var(--wui-motion-duration-03) var(--wui-motion-ease);
-  margin-block-start: calc(calc(1lh - var(--wui-radio-size)) / 2);
+  margin-top: calc(calc(1lh - var(--wui-radio-size)) / 2);
 
   &::after {
     content: '';
     position: absolute;
-    inset-block-start: 50%;
-    inset-inline-start: 50%;
-    inline-size: 50%;
-    block-size: 50%;
+    top: 50%;
+    left: 50%;
+    width: 50%;
+    height: 50%;
     background-color: var(--wui-radio-icon-color);
     border-radius: 100%;
     transform: translate(-50%, -50%);
@@ -14793,9 +14788,9 @@ const imageCoverStyles = css`
   &::after {
     content: '';
     position: absolute;
-    inset-block-start: 0;
-    inline-size: 100%;
-    block-size: 100%;
+    top: 0;
+    width: 100%;
+    height: 100%;
     border-radius: var(--wui-radio-card-border-radius);
     box-shadow:
       inset 0 0 0 var(--wui-inset-shadow-width) var(--wui-radio-card-border-color),
@@ -14898,10 +14893,10 @@ const RadioCardIndicator = styled.div`
   /* TODO: figure out radio / checkbox / switch colors */
   --wui-radio-card-indicator-border-color: var(--wui-color-border-secondary-active);
 
-  inline-size: var(--wui-radio-card-indicator-size);
-  block-size: var(--wui-radio-card-indicator-size);
-  min-inline-size: var(--wui-radio-card-indicator-size);
-  min-block-size: var(--wui-radio-card-indicator-size);
+  width: var(--wui-radio-card-indicator-size);
+  height: var(--wui-radio-card-indicator-size);
+  min-width: var(--wui-radio-card-indicator-size);
+  min-height: var(--wui-radio-card-indicator-size);
   background-color: var(--wui-radio-card-indicator-background-color);
   box-shadow: inset 0 0 0 1px var(--wui-radio-card-indicator-border-color);
   border-radius: 100%;
@@ -14912,10 +14907,10 @@ const RadioCardIndicator = styled.div`
   &::after {
     content: '';
     position: absolute;
-    inset-block-start: 50%;
-    inset-inline-start: 50%;
-    inline-size: 0;
-    block-size: 0;
+    top: 50%;
+    left: 50%;
+    width: 0;
+    height: 0;
     background-color: var(--wui-radio-card-indicator-fill-color);
     border-radius: 100%;
     transform: translate(-50%, -50%);
@@ -14926,8 +14921,8 @@ const RadioCardIndicator = styled.div`
     --wui-radio-card-indicator-fill-color: var(--wui-color-focus-ring);
 
     &::after {
-      inline-size: calc(var(--wui-radio-card-indicator-size) / 2);
-      block-size: calc(var(--wui-radio-card-indicator-size) / 2);
+      width: calc(var(--wui-radio-card-indicator-size) / 2);
+      height: calc(var(--wui-radio-card-indicator-size) / 2);
     }
   }
 
@@ -14949,12 +14944,12 @@ const StyledCardIcon = styled.div`
 `;
 const StyledGatedIcon = styled.div`
   position: absolute;
-  inset-inline-end: 10px;
-  inset-block-start: 10px;
+  right: 10px;
+  top: 10px;
   z-index: 1;
 `;
 const StyledIndicatorContainer = styled.div`
-  block-size: ${({ $hasIcon }) => $hasIcon ? "24px" : "16px"};
+  height: ${({ $hasIcon }) => $hasIcon ? "24px" : "16px"};
   display: flex;
   align-items: center;
 `;
@@ -15045,8 +15040,8 @@ const Container = styled.div`
 `;
 const ScrollContainer = styled.div`
   overflow: ${({ $locked }) => $locked ? "hidden" : "auto"};
-  block-size: 100%;
-  inline-size: 100%;
+  height: 100%;
+  width: 100%;
 `;
 const Shadow = styled.div`
   pointer-events: none;
@@ -15057,31 +15052,31 @@ const Shadow = styled.div`
 `;
 const ShadowAtTop = styled(Shadow)`
   transform: translateY(-${SHADOW_SIZE_PX}px);
-  block-size: 0;
-  inset-inline-start: 0;
-  inset-inline-end: 0;
-  inset-block-start: 0;
+  height: 0;
+  left: 0;
+  right: 0;
+  top: 0;
 `;
 const ShadowAtBottom = styled(Shadow)`
   transform: translateY(${SHADOW_SIZE_PX}px);
-  inset-block-end: 0;
-  block-size: 0;
-  inset-inline-start: 0;
-  inset-inline-end: 0;
+  bottom: 0;
+  height: 0;
+  left: 0;
+  right: 0;
 `;
 const ShadowAtLeft = styled(Shadow)`
   transform: translateX(-${SHADOW_SIZE_PX}px);
-  inset-block-end: 0;
-  inset-inline-start: 0;
-  inset-block-start: 0;
-  inline-size: 0;
+  bottom: 0;
+  left: 0;
+  top: 0;
+  width: 0;
 `;
 const ShadowAtRight = styled(Shadow)`
   transform: translateX(${SHADOW_SIZE_PX}px);
-  inset-block-end: 0;
-  inset-inline-end: 0;
-  inset-block-start: 0;
-  inline-size: 0;
+  bottom: 0;
+  right: 0;
+  top: 0;
+  width: 0;
 `;
 /**
 * ScrollArea is a simple scrollable container with shadow effects to indicate
@@ -15172,12 +15167,12 @@ const selectedItemIndicatorStyles = css`
 `;
 const SelectedItemIndicatorDiv = styled.div`
   ${selectedItemIndicatorStyles}
-  inset-inline-start: 0;
+  left: 0;
   position: absolute;
-  inset-block-start: 50%;
+  top: 50%;
   transition:
     transform var(--wui-motion-duration-02) var(--wui-motion-ease-out),
-    inline-size var(--wui-motion-duration-02) var(--wui-motion-ease-out);
+    width var(--wui-motion-duration-02) var(--wui-motion-ease-out);
   z-index: var(--wui-zindex-under);
 `;
 const SelectedItemIndicator = () => {
@@ -15203,7 +15198,7 @@ const segmentedControlStyles = css`
   overflow: hidden;
   padding: 2px;
   position: relative;
-  inline-size: ${({ $fullWidth }) => $fullWidth ? "100%" : "auto"};
+  width: ${({ $fullWidth }) => $fullWidth ? "100%" : "auto"};
 `;
 const StyledSegmentedControl = styled(ToggleGroup)`
   ${segmentedControlStyles}
@@ -15252,8 +15247,8 @@ const segmentedControlItemStyles = css`
 
   /* Icon component */
   svg {
-    block-size: 16px;
-    inline-size: 16px;
+    height: 16px;
+    width: 16px;
     flex: 0 0 16px;
 
     /* add right margin if there's a label and an icon */
@@ -15359,13 +15354,13 @@ const StyledTrigger = styled(Select$1.Trigger)`
   outline: 1px solid var(--wui-input-color-border);
   outline-offset: -2px;
   border-radius: var(--wui-input-border-radius);
-  min-inline-size: 200px;
-  text-align: start;
+  min-width: 200px;
+  text-align: left;
   display: inline-flex;
   align-items: center;
   justify-content: space-between;
-  max-inline-size: 100%;
-  inline-size: ${({ $fullWidth = false }) => $fullWidth ? "100%" : "auto"};
+  max-width: 100%;
+  width: ${({ $fullWidth = false }) => $fullWidth ? "100%" : "auto"};
   font-size: var(--wui-input-font-size);
   line-height: var(--wui-input-line-height);
   color: var(--wui-input-color-text);
@@ -15417,8 +15412,8 @@ const StyledPopup = styled(Select$1.Popup)`
   border-radius: var(--wui-select-content-border-radius);
   box-shadow: var(--wui-elevation-01);
   padding: var(--wui-select-option-padding);
-  min-inline-size: var(--anchor-width);
-  max-block-size: var(--available-height);
+  min-width: var(--anchor-width);
+  max-height: var(--available-height);
 
   [role='separator'] {
     margin: var(--wui-space-02) 0;
@@ -15432,12 +15427,12 @@ const scrollButtonStyles = css`
 const StyledScrollDownArrow = styled(Select$1.ScrollDownArrow)`
   ${scrollButtonStyles}
   position: sticky !important;
-  inset-block-end: 0;
+  bottom: 0;
 `;
 const StyledScrollUpArrow = styled(Select$1.ScrollUpArrow)`
   ${scrollButtonStyles}
   position: sticky !important;
-  inset-block-start: 0;
+  top: 0;
 `;
 /**
 * Recursively extracts string text from a React children tree. Lets us build
@@ -15615,10 +15610,10 @@ const StyledSidebar = styled.nav`
 
   display: flex;
   flex-direction: column;
-  inline-size: 260px;
+  width: 260px;
   background: var(--wui-color-bg-surface);
   overflow: hidden;
-  border-inline-end: 1px solid var(--wui-color-border);
+  border-right: 1px solid var(--wui-color-border);
 `;
 const Sidebar = ({ children, ref, ...props }) => {
 	return /* @__PURE__ */ jsx(StyledSidebar, {
@@ -15632,7 +15627,7 @@ const Sidebar = ({ children, ref, ...props }) => {
 const StyledSidebarHeader = styled.div`
   display: flex;
   flex-direction: column;
-  inline-size: 100%;
+  width: 100%;
   padding-block: var(--wui-sidebar-padding-block);
   padding-inline: var(--wui-sidebar-padding-inline);
 `;
@@ -15648,7 +15643,7 @@ SidebarHeader.displayName = "SidebarHeader_UI";
 const StyledSidebarFooter = styled.div`
   display: flex;
   flex-direction: column;
-  inline-size: 100%;
+  width: 100%;
   padding-block: var(--wui-sidebar-padding-block);
   padding-inline: var(--wui-sidebar-padding-inline);
 `;
@@ -15662,7 +15657,7 @@ SidebarFooter.displayName = "SidebarFooter_UI";
 //#endregion
 //#region src/components/Sidebar/SidebarTitle.tsx
 const StyledSidebarTitle = styled(Heading)`
-  padding-inline-start: var(--wui-sidebar-item-inset);
+  padding-left: var(--wui-sidebar-item-inset);
 `;
 const SidebarTitle = ({ children }) => {
 	return /* @__PURE__ */ jsx(StyledSidebarTitle, {
@@ -15677,10 +15672,10 @@ const StyledSidebarContent = styled(ScrollArea)`
   display: flex;
   flex-direction: column;
   flex: 1 1 auto;
-  min-block-size: 0;
+  min-height: 0;
   gap: var(--wui-sidebar-group-gap);
-  padding-block-start: var(--wui-sidebar-content-top-padding);
-  padding-block-end: var(--wui-sidebar-content-bottom-padding);
+  padding-top: var(--wui-sidebar-content-top-padding);
+  padding-bottom: var(--wui-sidebar-content-bottom-padding);
   padding-inline: var(--wui-sidebar-padding-inline);
 `;
 const SidebarContent = ({ children }) => {
@@ -15695,9 +15690,9 @@ SidebarContent.displayName = "SidebarContent_UI";
 const StyledSidebarGroupLabel = styled.div`
   display: flex;
   align-items: center;
-  min-block-size: 24px;
+  min-height: 24px;
   padding-inline: var(--wui-sidebar-item-inset);
-  inline-size: 100%;
+  width: 100%;
   justify-content: space-between;
   gap: var(--wui-space-02);
 `;
@@ -15759,8 +15754,8 @@ const StyledSidebarButton = styled(Button)`
   --button-label-padding-horizontal: var(--wui-space-00);
 
   padding-inline: var(--wui-sidebar-item-inset);
-  text-align: start;
-  inline-size: 100%;
+  text-align: left;
+  width: 100%;
 
   &[aria-current] {
     ${pressedButtonVariant};
@@ -15797,7 +15792,7 @@ const SidebarSearchInput = ({ id, label = "Search navigation", ref, ...props })
 //#endregion
 //#region src/components/Slider/Slider.tsx
 const SliderContainer = styled.div`
-  inline-size: 100%;
+  width: 100%;
 
   --wui-slider-track-color: var(--wui-gray-6);
   --wui-slider-track-border-radius: var(--wui-border-radius-rounded);
@@ -15815,20 +15810,20 @@ const SliderContainer = styled.div`
   }
 `;
 const StyledSliderRoot = styled(Slider$1.Root)`
-  inline-size: 100%;
+  width: 100%;
 `;
 const StyledSliderControl = styled(Slider$1.Control)`
   display: flex;
   align-items: center;
   user-select: none;
   touch-action: none;
-  inline-size: 100%;
+  width: 100%;
 `;
 const StyledSliderTrack = styled(Slider$1.Track)`
   background-color: var(--wui-slider-track-color);
   border-radius: var(--wui-slider-track-border-radius);
-  inline-size: 100%;
-  block-size: 6px;
+  width: 100%;
+  height: 6px;
   position: relative;
 `;
 const StyledSliderIndicator = styled(Slider$1.Indicator)`
@@ -15840,14 +15835,14 @@ const StyledSliderThumb = styled(Slider$1.Thumb)`
   border-radius: var(--wui-border-radius-rounded);
   cursor: grab;
   display: block;
-  block-size: 16px;
+  height: 16px;
   outline-color: var(--wui-slider-thumb-border-color);
   outline-style: solid;
   outline-width: 1px;
   transition-duration: 70ms;
   transition-property: border-width, box-shadow, transform;
   transition-timing-function: var(--wui-motion-ease-out);
-  inline-size: 16px;
+  width: 16px;
 
   &:hover,
   &:active {
@@ -15902,14 +15897,14 @@ const StyledSplitButton = styled.span`
 
   &:has(:nth-child(2)) {
     & > [data-wui-button='true']:first-child {
-      border-start-end-radius: 0;
-      border-end-end-radius: 0;
-      padding-inline-end: 0;
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+      padding-right: 0;
     }
 
     & > [data-wui-button='true']:not(:first-child) {
-      border-start-start-radius: 0;
-      border-end-start-radius: 0;
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
       display: inline-flex;
     }
   }
@@ -15958,12 +15953,12 @@ SplitButton.displayName = "SplitButton_UI";
 //#endregion
 //#region src/components/Table/Table.tsx
 const StyledTable = styled.table`
-  inline-size: 100%;
+  width: 100%;
   border-collapse: collapse;
 
   ${({ $divided }) => $divided && css`
       tr {
-        border-block-end: 1px solid var(--wui-color-border);
+        border-bottom: 1px solid var(--wui-color-border);
       }
     `}
 
@@ -16000,7 +15995,7 @@ const TableSectionContext = createContext(null);
 //#endregion
 //#region src/components/Table/TableBody.tsx
 const StyledTableBody = styled.tbody`
-  inline-size: 100%;
+  width: 100%;
 `;
 const TableBody = ({ children, ...props }) => {
 	return /* @__PURE__ */ jsx(TableSectionContext, {
@@ -16016,7 +16011,7 @@ const TableBody = ({ children, ...props }) => {
 const sharedStyles = css`
   color: var(--wui-color-text);
   padding: var(--wui-space-02);
-  text-align: start;
+  text-align: left;
 `;
 const StyledTh = styled.th`
   ${sharedStyles}
@@ -16043,7 +16038,7 @@ const TableCell = ({ children, ...props }) => {
 //#endregion
 //#region src/components/Table/TableFoot.tsx
 const StyledTableFoot = styled.tfoot`
-  inline-size: 100%;
+  width: 100%;
 `;
 const TableFoot = ({ children, ...props }) => {
 	return /* @__PURE__ */ jsx(TableSectionContext, {
@@ -16057,7 +16052,7 @@ const TableFoot = ({ children, ...props }) => {
 //#endregion
 //#region src/components/Table/TableHead.tsx
 const StyledThead = styled.thead`
-  inline-size: 100%;
+  width: 100%;
 `;
 const TableHead = ({ children, ...props }) => {
 	return /* @__PURE__ */ jsx(TableSectionContext, {
@@ -16071,7 +16066,7 @@ const TableHead = ({ children, ...props }) => {
 //#endregion
 //#region src/components/Table/TableRow.tsx
 const StyledTableRow = styled.tr`
-  inline-size: 100%;
+  width: 100%;
 `;
 const TableRow = ({ children, ...props }) => {
 	return /* @__PURE__ */ jsx(StyledTableRow, {
@@ -16211,7 +16206,7 @@ const StyledThumbnailBadge = styled.div`
   align-items: center;
   background-color: rgb(0 0 0 / 50%);
   border-radius: var(--wui-border-radius-01);
-  inset-block-end: var(--wui-thumbnail-badge-offset, var(--wui-space-01));
+  bottom: var(--wui-thumbnail-badge-offset, var(--wui-space-01));
   color: var(--wui-color-text-on-fill);
   display: flex;
   font-size: var(--wui-typography-body-4-size);
@@ -16219,12 +16214,12 @@ const StyledThumbnailBadge = styled.div`
   gap: var(--wui-space-01);
   padding: 0 var(--wui-space-01);
   position: absolute;
-  inset-inline-end: var(--wui-thumbnail-badge-offset, var(--wui-space-01));
+  right: var(--wui-thumbnail-badge-offset, var(--wui-space-01));
   z-index: 1;
 
   svg {
-    block-size: 12px;
-    inline-size: 12px;
+    height: 12px;
+    width: 12px;
     flex: 0 0 12px;
 
     & path {
@@ -16243,9 +16238,9 @@ ThumbnailBadge.displayName = "ThumbnailBadge_UI";
 //#region src/components/Thumbnail/ThumbnailStoryboardViewer.tsx
 const ScrubLine = styled.div`
   position: absolute;
-  inset-block-start: 0;
-  block-size: 100%;
-  inline-size: 2px;
+  top: 0;
+  height: 100%;
+  width: 2px;
   background-color: var(--wui-color-bg-fill);
   z-index: 1;
 `;
@@ -16323,14 +16318,14 @@ const getAspectRatioValue = (aspectRatio) => {
 	return WIDE_ASPECT_RATIO;
 };
 const WideThumbnailImage = styled.img`
-  block-size: 100%;
+  height: 100%;
   object-fit: cover;
-  inline-size: 100%;
+  width: 100%;
 `;
 const SquareThumbnailImage = styled.img`
   backdrop-filter: blur(8px);
   object-fit: contain;
-  inline-size: 100%;
+  width: 100%;
 `;
 const ThumbnailImage = ({ thumbnailImageType, thumbnailUrl }) => {
 	if (thumbnailImageType === "wide") return /* @__PURE__ */ jsx(WideThumbnailImage, {
@@ -16347,7 +16342,7 @@ const ThumbnailImage = ({ thumbnailImageType, thumbnailUrl }) => {
 const StyledThumbnailContainer = styled.div`
   container-type: size;
   aspect-ratio: ${({ $aspectRatio }) => getAspectRatioValue($aspectRatio)};
-  inline-size: ${({ $width }) => $width};
+  width: ${({ $width }) => $width};
   display: flex;
   overflow: hidden;
   ${({ $isScrubbable }) => $isScrubbable && "cursor: pointer;"}
@@ -16360,13 +16355,13 @@ const StyledThumbnail = styled.div`
   background-position: center center;
   background-size: cover;
   display: flex;
-  inline-size: 100%;
+  width: 100%;
   overflow: hidden;
   position: relative;
 
   &,
   img {
-    border-radius: clamp(var(--wui-border-radius-01), 8cqb, var(--wui-border-radius-05));
+    border-radius: clamp(var(--wui-border-radius-01), 8cqh, var(--wui-border-radius-05));
   }
 
   @container (min-width: 200px) {
@@ -16481,14 +16476,14 @@ const Thumbnail = ({ gradientBackground = "defaultMidOne", thumbnailImageType =
 //#region src/components/ThumbnailCollage/ThumbnailCollage.tsx
 const ThumbnailCollageContainer = styled.div`
   container-type: size;
-  inline-size: 100%;
+  width: 100%;
   aspect-ratio: 16 / 9;
   display: flex;
 `;
 const StyledThumbnailCollage = styled.div`
   display: grid;
   gap: var(--wui-space-01);
-  inline-size: 100%;
+  width: 100%;
   grid-template-columns: 3fr 2fr;
   grid-template-rows: 1fr 1fr;
 
@@ -16525,8 +16520,8 @@ const StyledThumbnailCollage = styled.div`
   [data-wui-thumbnail-container] {
     container-type: unset;
     aspect-ratio: unset;
-    block-size: 100%;
-    inline-size: 100%;
+    height: 100%;
+    width: 100%;
   }
 `;
 const DEFAULT_CHILDREN = [];
@@ -16581,11 +16576,11 @@ const computedViewBox = (iconOnly) => {
 	return "0 0 144 31.47";
 };
 const WistiaLogoComponent = styled.svg`
-  block-size: ${({ height }) => `${height}px`};
+  height: ${({ height }) => `${height}px`};
 
   /* ensure it will always fit on mobile */
-  max-block-size: 22vi;
-  max-inline-size: 100%;
+  max-height: 22vw;
+  max-width: 100%;
 
   &:hover {
     & path {