Merged in fix/STAY-135 (pull request #3368)

Fix/STAY-135 & STAY-127

* fix: make quantity and delivery separate steps in mobile

* fix: update design for delivery step in ancillary flow

* fix: add error state for missing time

* fix: only allow points or cash payment for ancillaries

* fix: break out stepper to design system

* fix: update design of select quantity step in add ancillaries flow

* fix: add error states for quantity

* fix: handle insufficient points case

* fix: update stepper to include optional disabledMessage tooltip

* fix: handle validations

* fix: change name to camel case


Approved-by: Bianca Widstam
Approved-by: Chuma Mcphoy (We Ahead)

packages/design-system/lib/components/Radio/Radio.tsx

@@ -9,9 +9,17 @@ interface RadioProps extends PropsWithChildren {
   id?: string
   isDisabled?: boolean
   color?: 'Burgundy'
+  wrapping?: boolean
 }
 
-export function Radio({ id, value, children, color, isDisabled }: RadioProps) {
+export function Radio({
+  id,
+  value,
+  children,
+  color,
+  isDisabled,
+  wrapping = true,
+}: RadioProps) {
   const inputId = id || `radio-${value}`
 
   const classNames = variants({
@@ -23,10 +31,13 @@ export function Radio({ id, value, children, color, isDisabled }: RadioProps) {
       id={inputId}
       value={value}
       isDisabled={isDisabled}
-      className={cx(styles.container, { [styles.disabled]: isDisabled })}
+      className={cx(styles.container, {
+        [styles.disabled]: isDisabled,
+        [styles.wrapping]: wrapping,
+      })}
     >
       <div className={`${styles.radio} ${classNames}`} />
-      <div>{children}</div>
+      {children && <div>{children}</div>}
     </AriaRadio>
   )
 }