@razorpay/blade 12.98.0 → 12.110.0

package/build/lib/web/production/components/Radio/RadioGroup/useRadioGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"useRadioGroup.js","sources":["../../../../../../../src/components/Radio/RadioGroup/useRadioGroup.ts"],"sourcesContent":["import React from 'react';\nimport type { RadioGroupProps } from './RadioGroup';\nimport type { RadioGroupContextType } from './RadioContext';\nimport isUndefined from '~utils/lodashButBetter/isUndefined';\nimport { useControllableState } from '~utils/useControllable';\nimport { useTheme } from '~components/BladeProvider';\nimport { useId } from '~utils/useId';\n\ntype UseRadioGroupProps = Pick<\n  RadioGroupProps,\n  | 'isDisabled'\n  | 'isRequired'\n  | 'labelPosition'\n  | 'validationState'\n  | 'name'\n  | 'value'\n  | 'defaultValue'\n  | 'onChange'\n  | 'necessityIndicator'\n  | 'size'\n>;\n\nexport type State = {\n  value: string;\n  setValue(value: string, event: React.ChangeEvent<Element>): void;\n  removeValue(): void;\n  isChecked(value: string): boolean;\n};\n\ntype UseRadioGroupReturn = {\n  state: State;\n  contextValue: RadioGroupContextType;\n  ids: { labelId: string };\n};\n\nconst useRadioGroup = ({\n  value,\n  defaultValue,\n  isDisabled,\n  isRequired,\n  labelPosition,\n  onChange,\n  validationState,\n  necessityIndicator,\n  name,\n  size,\n}: UseRadioGroupProps): UseRadioGroupReturn => {\n  const { platform } = useTheme();\n  const idBase = useId('radio-group');\n  const labelId = `${idBase}-label`;\n  const fallbackName = name ?? idBase;\n  const [checkedValue, setValue] = useControllableState({\n    value,\n    defaultValue,\n    onChange: (v, event) => {\n      onChange?.({ value: v, name: fallbackName, event });\n    },\n  });\n\n  const state = React.useMemo<State>(() => {\n    return {\n      value: checkedValue,\n      setValue(v, event): void {\n        if (isDisabled) {\n          return;\n        }\n\n        setValue(() => v, false, event);\n      },\n      removeValue(): void {\n        if (isDisabled) {\n          return;\n        }\n\n        setValue(undefined!);\n      },\n      isChecked(v: string): boolean {\n        if (isUndefined(v) || isUndefined(checkedValue)) return false;\n        return checkedValue === v;\n      },\n    };\n  }, [checkedValue, isDisabled, setValue]);\n\n  const contextValue = React.useMemo<RadioGroupContextType>(() => {\n    return {\n      necessityIndicator,\n      validationState,\n      isDisabled,\n      isRequired,\n      labelPosition: platform === 'onMobile' ? 'top' : labelPosition,\n      name: fallbackName,\n      state,\n      size,\n    };\n  }, [\n    validationState,\n    isDisabled,\n    isRequired,\n    platform,\n    labelPosition,\n    state,\n    fallbackName,\n    necessityIndicator,\n    size,\n  ]);\n\n  return { state, contextValue, ids: { labelId } };\n};\n\nexport { useRadioGroup };\n"],"names":["useRadioGroup","_ref","value","defaultValue","isDisabled","isRequired","labelPosition","onChange","validationState","necessityIndicator","name","size","_useTheme","useTheme","platform","idBase","useId","labelId","concat","fallbackName","_useControllableState","useControllableState","v","event","_useControllableState2","_slicedToArray","checkedValue","setValue","state","React","useMemo","_setValue","_x","_x2","apply","arguments","toString","removeValue","undefined","isChecked","isUndefined","contextValue","ids"],"mappings":"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"}
+{"version":3,"file":"useRadioGroup.js","sources":["../../../../../../../src/components/Radio/RadioGroup/useRadioGroup.ts"],"sourcesContent":["import React from 'react';\nimport type { RadioGroupProps } from './RadioGroup';\nimport type { RadioGroupContextType } from './RadioContext';\nimport isUndefined from '~utils/lodashButBetter/isUndefined';\nimport { useControllableState } from '~utils/useControllable';\nimport { useTheme } from '~components/BladeProvider';\nimport { useId } from '~utils/useId';\n\ntype UseRadioGroupProps = Pick<\n  RadioGroupProps,\n  | 'isDisabled'\n  | 'isRequired'\n  | 'labelPosition'\n  | 'validationState'\n  | 'name'\n  | 'value'\n  | 'defaultValue'\n  | 'onChange'\n  | 'necessityIndicator'\n  | 'size'\n  | 'orientation'\n>;\n\nexport type State = {\n  value: string;\n  setValue(value: string, event: React.ChangeEvent<Element>): void;\n  removeValue(): void;\n  isChecked(value: string): boolean;\n};\n\ntype UseRadioGroupReturn = {\n  state: State;\n  contextValue: RadioGroupContextType;\n  ids: { labelId: string };\n};\n\nconst useRadioGroup = ({\n  value,\n  defaultValue,\n  isDisabled,\n  isRequired,\n  labelPosition,\n  onChange,\n  validationState,\n  necessityIndicator,\n  name,\n  size,\n  orientation,\n}: UseRadioGroupProps): UseRadioGroupReturn => {\n  const { platform } = useTheme();\n  const idBase = useId('radio-group');\n  const labelId = `${idBase}-label`;\n  const fallbackName = name ?? idBase;\n  const [checkedValue, setValue] = useControllableState({\n    value,\n    defaultValue,\n    onChange: (v, event) => {\n      onChange?.({ value: v, name: fallbackName, event });\n    },\n  });\n\n  const state = React.useMemo<State>(() => {\n    return {\n      value: checkedValue,\n      setValue(v, event): void {\n        if (isDisabled) {\n          return;\n        }\n\n        setValue(() => v, false, event);\n      },\n      removeValue(): void {\n        if (isDisabled) {\n          return;\n        }\n\n        setValue(undefined!);\n      },\n      isChecked(v: string): boolean {\n        if (isUndefined(v) || isUndefined(checkedValue)) return false;\n        return checkedValue === v;\n      },\n    };\n  }, [checkedValue, isDisabled, setValue]);\n\n  const contextValue = React.useMemo<RadioGroupContextType>(() => {\n    return {\n      necessityIndicator,\n      validationState,\n      isDisabled,\n      isRequired,\n      labelPosition: platform === 'onMobile' ? 'top' : labelPosition,\n      name: fallbackName,\n      state,\n      size,\n      orientation,\n    };\n  }, [\n    validationState,\n    isDisabled,\n    isRequired,\n    platform,\n    labelPosition,\n    state,\n    fallbackName,\n    necessityIndicator,\n    size,\n    orientation,\n  ]);\n\n  return { state, contextValue, ids: { labelId } };\n};\n\nexport { useRadioGroup };\n"],"names":["useRadioGroup","_ref","value","defaultValue","isDisabled","isRequired","labelPosition","onChange","validationState","necessityIndicator","name","size","orientation","_useTheme","useTheme","platform","idBase","useId","labelId","concat","fallbackName","_useControllableState","useControllableState","v","event","_useControllableState2","_slicedToArray","checkedValue","setValue","state","React","useMemo","_setValue","_x","_x2","apply","arguments","toString","removeValue","undefined","isChecked","isUndefined","contextValue","ids"],"mappings":"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"}

package/build/lib/web/production/components/RollingText/RollingText.web.js

@@ -11,7 +11,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import useTheme from '../BladeProvider/useTheme.js';
 import { castWebType } from '../../utils/platform/castUtils.js';
 import { Box } from '../Box/Box.js';
-import { BaseMotionBox } from '../BaseMotion/BaseMotion.js';
+import { BaseMotionBox } from '../BaseMotion/BaseMotion.web.js';
 
 var ShimmerOverlay = function ShimmerOverlay() {
   var _useTheme = useTheme(),

package/build/lib/web/production/components/Scale/Scale.web.js

@@ -6,7 +6,7 @@ import '../../utils/index.js';
 import { jsx } from 'react/jsx-runtime';
 import useTheme from '../BladeProvider/useTheme.js';
 import { castWebType } from '../../utils/platform/castUtils.js';
-import { BaseMotionEnhancerBox } from '../BaseMotion/BaseMotion.js';
+import { BaseMotionEnhancerBox } from '../BaseMotion/BaseMotion.web.js';
 
 var Scale = function Scale(_ref) {
   var children = _ref.children,

package/build/lib/web/production/components/Slide/Slide.web.js

@@ -8,7 +8,7 @@ import '../../utils/index.js';
 import { jsx } from 'react/jsx-runtime';
 import useTheme from '../BladeProvider/useTheme.js';
 import { castWebType } from '../../utils/platform/castUtils.js';
-import { BaseMotionEntryExit } from '../BaseMotion/BaseMotion.js';
+import { BaseMotionEntryExit } from '../BaseMotion/BaseMotion.web.js';
 
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }

package/build/lib/web/production/components/SpotlightPopoverTour/Tour.web.js

@@ -11,6 +11,9 @@ import { useIsomorphicLayoutEffect } from '../../utils/useIsomorphicLayoutEffect
 import { jsxs, jsx } from 'react/jsx-runtime';
 import useTheme from '../BladeProvider/useTheme.js';
 
+var asHTMLElement = function asHTMLElement(el) {
+  return el;
+};
 var SpotlightPopoverTour = function SpotlightPopoverTour(_ref) {
   var _steps$activeStep;
   var steps = _ref.steps,
@@ -54,7 +57,6 @@ var SpotlightPopoverTour = function SpotlightPopoverTour(_ref) {
   var intersection = useIntersectionObserver(currentStepRef, {
     threshold: 0.5
   });
-
   // main step logic
   var totalSteps = steps.length;
   var currentStepData = useMemo(function () {
@@ -95,11 +97,12 @@ var SpotlightPopoverTour = function SpotlightPopoverTour(_ref) {
     });
   }, []);
   var updateMaskSize = useCallback(function () {
-    var _steps$activeStep2;
+    var _steps$activeStep2, _ref$current;
     var shouldSkipDelay = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
     var ref = refIdMap.get((_steps$activeStep2 = steps[activeStep]) === null || _steps$activeStep2 === void 0 ? void 0 : _steps$activeStep2.name);
-    if (!(ref !== null && ref !== void 0 && ref.current)) return;
-    var rect = ref.current.getBoundingClientRect();
+    var el = asHTMLElement((_ref$current = ref === null || ref === void 0 ? void 0 : ref.current) !== null && _ref$current !== void 0 ? _ref$current : null);
+    if (!el) return;
+    var rect = el.getBoundingClientRect();
     setSize({
       x: rect.x,
       y: rect.y,
@@ -116,14 +119,15 @@ var SpotlightPopoverTour = function SpotlightPopoverTour(_ref) {
     }
   }, [activeStep, refIdMap, setDelayedSize, steps]);
   var scrollToStep = useCallback(function () {
-    var _steps$delayedActiveS;
+    var _steps$delayedActiveS, _ref$current2;
     var ref = refIdMap.get((_steps$delayedActiveS = steps[delayedActiveStep]) === null || _steps$delayedActiveS === void 0 ? void 0 : _steps$delayedActiveS.name);
-    if (!(ref !== null && ref !== void 0 && ref.current)) return;
+    var el = asHTMLElement((_ref$current2 = ref === null || ref === void 0 ? void 0 : ref.current) !== null && _ref$current2 !== void 0 ? _ref$current2 : null);
+    if (!el) return;
 
     // If the element is already in view, don't scroll
     if (intersection !== null && intersection !== void 0 && intersection.isIntersecting) return;
     setIsScrolling(true);
-    smoothScroll(ref.current, {
+    smoothScroll(el, {
       behavior: 'smooth',
       block: 'center',
       inline: 'center'

package/build/lib/web/production/components/SpotlightPopoverTour/Tour.web.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tour.web.js","sources":["../../../../../../src/components/SpotlightPopoverTour/Tour.web.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-use-before-define */\n/* eslint-disable consistent-return */\n/* eslint-disable @typescript-eslint/explicit-function-return-type */\nimport React, { useState, useCallback, useMemo } from 'react';\nimport { FloatingPortal } from '@floating-ui/react';\nimport { TourContext } from './TourContext';\nimport { TourPopover } from './TourPopover';\nimport {\n  smoothScroll,\n  useDelayedState,\n  useIntersectionObserver,\n  useIsTransitioningBetweenSteps,\n  useLockBodyScroll,\n} from './utils';\nimport type { SpotlightPopoverTourMaskRect, SpotlightPopoverTourProps } from './types';\nimport { SpotlightPopoverTourMask } from './TourMask';\nimport { transitionDelay } from './tourTokens';\nimport { useTheme } from '~components/BladeProvider';\nimport { useIsomorphicLayoutEffect } from '~utils/useIsomorphicLayoutEffect';\n\nconst SpotlightPopoverTour = ({\n  steps,\n  activeStep,\n  isOpen,\n  onFinish,\n  onOpenChange,\n  onStepChange,\n  children,\n}: SpotlightPopoverTourProps): React.ReactElement => {\n  const { theme } = useTheme();\n  const [refIdMap, setRefIdMap] = useState(new Map<string, React.RefObject<HTMLElement>>());\n  const [size, setSize] = useState<SpotlightPopoverTourMaskRect>({\n    x: 0,\n    y: 0,\n    height: 0,\n    width: 0,\n  });\n\n  // delayed state is used to let the transition finish before reacting to the state changes\n  const [delayedActiveStep] = useDelayedState(activeStep, transitionDelay);\n  const [delayedSize, setDelayedSize] = useDelayedState(size, transitionDelay);\n  // keep track of when we are transitioning between steps\n  const isTransitioning = useIsTransitioningBetweenSteps(activeStep, transitionDelay);\n  const [isScrolling, setIsScrolling] = useState(false);\n\n  const currentStepRef = refIdMap.get(steps[activeStep]?.name);\n  const intersection = useIntersectionObserver(currentStepRef!, {\n    threshold: 0.5,\n  });\n\n  // main step logic\n  const totalSteps = steps.length;\n  const currentStepData = useMemo(() => {\n    return steps[activeStep];\n  }, [activeStep, steps]);\n\n  const goToStep = useCallback(\n    (step: number) => {\n      if (step < 0 || step >= steps.length) return;\n      onStepChange?.(step);\n    },\n    [onStepChange, steps.length],\n  );\n\n  const goToNext = useCallback(() => {\n    let nextState = activeStep + 1;\n    if (nextState >= steps.length) {\n      nextState = steps.length - 1;\n    }\n    onStepChange?.(nextState);\n  }, [activeStep, onStepChange, steps.length]);\n\n  const goToPrevious = useCallback(() => {\n    let nextState = activeStep - 1;\n    if (nextState < 0) {\n      nextState = 0;\n    }\n    onStepChange?.(nextState);\n  }, [activeStep, onStepChange]);\n\n  const stopTour = useCallback(() => {\n    onFinish?.();\n  }, [onFinish]);\n\n  const attachStep = useCallback((id: string, ref: React.RefObject<HTMLElement>) => {\n    if (!ref) return;\n    setRefIdMap((prev) => {\n      return new Map(prev).set(id, ref);\n    });\n  }, []);\n\n  const removeStep = useCallback((id: string) => {\n    setRefIdMap((prev) => {\n      const newMap = new Map(prev);\n      newMap.delete(id);\n      return newMap;\n    });\n  }, []);\n\n  const updateMaskSize = useCallback(\n    (shouldSkipDelay = false) => {\n      const ref = refIdMap.get(steps[activeStep]?.name);\n      if (!ref?.current) return;\n\n      const rect = ref.current.getBoundingClientRect();\n      setSize({\n        x: rect.x,\n        y: rect.y,\n        width: rect.width,\n        height: rect.height,\n      });\n      if (shouldSkipDelay) {\n        setDelayedSize({\n          x: rect.x,\n          y: rect.y,\n          width: rect.width,\n          height: rect.height,\n        });\n      }\n    },\n    [activeStep, refIdMap, setDelayedSize, steps],\n  );\n\n  const scrollToStep = useCallback(() => {\n    const ref = refIdMap.get(steps[delayedActiveStep]?.name);\n    if (!ref?.current) return;\n\n    // If the element is already in view, don't scroll\n    if (intersection?.isIntersecting) return;\n\n    setIsScrolling(true);\n    smoothScroll(ref.current, {\n      behavior: 'smooth',\n      block: 'center',\n      inline: 'center',\n    })\n      .then(() => {\n        // wait for the scroll to finish before updating the mask size\n        // We also don't want to delay the size update since its already delayed by the scroll\n        updateMaskSize(true);\n      })\n      .finally(() => {\n        setIsScrolling(false);\n      });\n  }, [delayedActiveStep, refIdMap, steps, updateMaskSize, intersection?.isIntersecting]);\n\n  // Update the size of the mask when the active step changes\n  useIsomorphicLayoutEffect(() => {\n    updateMaskSize();\n  }, [activeStep, updateMaskSize]);\n\n  // Scroll into view when the active step changes\n  useIsomorphicLayoutEffect(() => {\n    // We need to wait for the transition to finish before scrolling\n    // Otherwise the browser sometimes interrupts the scroll\n    const scrollDelay = 100;\n    setTimeout(() => {\n      if (!isOpen) return;\n      if (isTransitioning) return;\n      scrollToStep();\n    }, scrollDelay);\n  }, [isOpen, scrollToStep, isTransitioning]);\n\n  // reset the mask size when the tour is closed\n  useIsomorphicLayoutEffect(() => {\n    if (isOpen) {\n      // on initial mount, we don't want to delay the size update\n      updateMaskSize(true);\n      onOpenChange?.({ isOpen });\n    }\n    if (!isOpen) {\n      setSize({\n        x: 0,\n        y: 0,\n        width: 0,\n        height: 0,\n      });\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isOpen]);\n\n  useLockBodyScroll(isOpen);\n\n  const contextValue = useMemo(() => {\n    return { attachStep, removeStep };\n  }, [attachStep, removeStep]);\n\n  return (\n    <TourContext.Provider value={contextValue}>\n      <FloatingPortal>\n        {isOpen ? (\n          <SpotlightPopoverTourMask\n            isTransitioning={isTransitioning || isScrolling}\n            padding={theme.spacing[4]}\n            size={delayedSize}\n          />\n        ) : null}\n      </FloatingPortal>\n\n      {steps.map((step) => {\n        const isStepActive = currentStepData.name === step.name;\n        const attachTo = isStepActive ? currentStepRef : undefined;\n        // 1. only show popover if the tour is opened\n        // 2. only show the popover if the step is active\n        // 3. do not show the popover if we are transitioning between steps\n        //    this ensures popover suddenly doesn't jump to the next step,\n        //    instead it waits for the transition to finish\n        const isPopoverVisible = isOpen && isStepActive && !isTransitioning;\n\n        return (\n          <TourPopover\n            key={step.name}\n            isTransitioning={delayedActiveStep !== activeStep}\n            placement={step.placement}\n            isOpen={isPopoverVisible}\n            onOpenChange={onOpenChange}\n            title={step.title}\n            titleLeading={step.titleLeading}\n            content={step?.content?.({\n              activeStep: delayedActiveStep,\n              goToPrevious,\n              goToNext,\n              goToStep,\n              totalSteps,\n              stopTour,\n            })}\n            footer={step?.footer?.({\n              activeStep: delayedActiveStep,\n              goToPrevious,\n              goToNext,\n              goToStep,\n              totalSteps,\n              stopTour,\n            })}\n            attachTo={attachTo}\n          />\n        );\n      })}\n\n      {children}\n    </TourContext.Provider>\n  );\n};\n\nexport { SpotlightPopoverTour };\n"],"names":["SpotlightPopoverTour","_ref","_steps$activeStep","steps","activeStep","isOpen","onFinish","onOpenChange","onStepChange","children","_useTheme","useTheme","theme","_useState","useState","Map","_useState2","_slicedToArray","refIdMap","setRefIdMap","_useState3","x","y","height","width","_useState4","size","setSize","_useDelayedState","useDelayedState","transitionDelay","_useDelayedState2","delayedActiveStep","_useDelayedState3","_useDelayedState4","delayedSize","setDelayedSize","isTransitioning","useIsTransitioningBetweenSteps","_useState5","_useState6","isScrolling","setIsScrolling","currentStepRef","get","name","intersection","useIntersectionObserver","threshold","totalSteps","length","currentStepData","useMemo","goToStep","useCallback","step","goToNext","nextState","goToPrevious","stopTour","attachStep","id","ref","prev","set","removeStep","newMap","updateMaskSize","_steps$activeStep2","shouldSkipDelay","arguments","undefined","current","rect","getBoundingClientRect","scrollToStep","_steps$delayedActiveS","isIntersecting","smoothScroll","behavior","block","inline","then","useIsomorphicLayoutEffect","scrollDelay","setTimeout","useLockBodyScroll","contextValue","_jsxs","TourContext","Provider","value","_jsx","FloatingPortal","SpotlightPopoverTourMask","padding","spacing","map","_step$content","_step$footer","isStepActive","attachTo","isPopoverVisible","TourPopover","placement","title","titleLeading","content","call","footer"],"mappings":"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"}
+{"version":3,"file":"Tour.web.js","sources":["../../../../../../src/components/SpotlightPopoverTour/Tour.web.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-use-before-define */\n/* eslint-disable consistent-return */\n/* eslint-disable @typescript-eslint/explicit-function-return-type */\nimport React, { useState, useCallback, useMemo } from 'react';\nimport { FloatingPortal } from '@floating-ui/react';\nimport { TourContext } from './TourContext';\nimport type { TourElement } from './TourContext';\nimport { TourPopover } from './TourPopover';\nimport {\n  smoothScroll,\n  useDelayedState,\n  useIntersectionObserver,\n  useIsTransitioningBetweenSteps,\n  useLockBodyScroll,\n} from './utils';\nimport type { SpotlightPopoverTourMaskRect, SpotlightPopoverTourProps } from './types';\nimport { SpotlightPopoverTourMask } from './TourMask';\nimport { transitionDelay } from './tourTokens';\nimport { useTheme } from '~components/BladeProvider';\nimport { useIsomorphicLayoutEffect } from '~utils/useIsomorphicLayoutEffect';\n\nconst asHTMLElement = (el: TourElement | null): HTMLElement | null => el as HTMLElement | null;\n\nconst SpotlightPopoverTour = ({\n  steps,\n  activeStep,\n  isOpen,\n  onFinish,\n  onOpenChange,\n  onStepChange,\n  children,\n}: SpotlightPopoverTourProps): React.ReactElement => {\n  const { theme } = useTheme();\n  const [refIdMap, setRefIdMap] = useState(new Map<string, React.RefObject<TourElement>>());\n  const [size, setSize] = useState<SpotlightPopoverTourMaskRect>({\n    x: 0,\n    y: 0,\n    height: 0,\n    width: 0,\n  });\n\n  // delayed state is used to let the transition finish before reacting to the state changes\n  const [delayedActiveStep] = useDelayedState(activeStep, transitionDelay);\n  const [delayedSize, setDelayedSize] = useDelayedState(size, transitionDelay);\n  // keep track of when we are transitioning between steps\n  const isTransitioning = useIsTransitioningBetweenSteps(activeStep, transitionDelay);\n  const [isScrolling, setIsScrolling] = useState(false);\n\n  const currentStepRef = refIdMap.get(steps[activeStep]?.name);\n  const intersection = useIntersectionObserver(\n    (currentStepRef as React.RefObject<Element> | undefined)!,\n    {\n      threshold: 0.5,\n    },\n  );\n  // main step logic\n  const totalSteps = steps.length;\n  const currentStepData = useMemo(() => {\n    return steps[activeStep];\n  }, [activeStep, steps]);\n\n  const goToStep = useCallback(\n    (step: number) => {\n      if (step < 0 || step >= steps.length) return;\n      onStepChange?.(step);\n    },\n    [onStepChange, steps.length],\n  );\n\n  const goToNext = useCallback(() => {\n    let nextState = activeStep + 1;\n    if (nextState >= steps.length) {\n      nextState = steps.length - 1;\n    }\n    onStepChange?.(nextState);\n  }, [activeStep, onStepChange, steps.length]);\n\n  const goToPrevious = useCallback(() => {\n    let nextState = activeStep - 1;\n    if (nextState < 0) {\n      nextState = 0;\n    }\n    onStepChange?.(nextState);\n  }, [activeStep, onStepChange]);\n\n  const stopTour = useCallback(() => {\n    onFinish?.();\n  }, [onFinish]);\n\n  const attachStep = useCallback((id: string, ref: React.RefObject<TourElement>) => {\n    if (!ref) return;\n    setRefIdMap((prev) => {\n      return new Map(prev).set(id, ref);\n    });\n  }, []);\n\n  const removeStep = useCallback((id: string) => {\n    setRefIdMap((prev) => {\n      const newMap = new Map(prev);\n      newMap.delete(id);\n      return newMap;\n    });\n  }, []);\n\n  const updateMaskSize = useCallback(\n    (shouldSkipDelay = false) => {\n      const ref = refIdMap.get(steps[activeStep]?.name);\n      const el = asHTMLElement(ref?.current ?? null);\n      if (!el) return;\n\n      const rect = el.getBoundingClientRect();\n      setSize({\n        x: rect.x,\n        y: rect.y,\n        width: rect.width,\n        height: rect.height,\n      });\n      if (shouldSkipDelay) {\n        setDelayedSize({\n          x: rect.x,\n          y: rect.y,\n          width: rect.width,\n          height: rect.height,\n        });\n      }\n    },\n    [activeStep, refIdMap, setDelayedSize, steps],\n  );\n\n  const scrollToStep = useCallback(() => {\n    const ref = refIdMap.get(steps[delayedActiveStep]?.name);\n    const el = asHTMLElement(ref?.current ?? null);\n    if (!el) return;\n\n    // If the element is already in view, don't scroll\n    if (intersection?.isIntersecting) return;\n\n    setIsScrolling(true);\n    smoothScroll(el, {\n      behavior: 'smooth',\n      block: 'center',\n      inline: 'center',\n    })\n      .then(() => {\n        // wait for the scroll to finish before updating the mask size\n        // We also don't want to delay the size update since its already delayed by the scroll\n        updateMaskSize(true);\n      })\n      .finally(() => {\n        setIsScrolling(false);\n      });\n  }, [delayedActiveStep, refIdMap, steps, updateMaskSize, intersection?.isIntersecting]);\n\n  // Update the size of the mask when the active step changes\n  useIsomorphicLayoutEffect(() => {\n    updateMaskSize();\n  }, [activeStep, updateMaskSize]);\n\n  // Scroll into view when the active step changes\n  useIsomorphicLayoutEffect(() => {\n    // We need to wait for the transition to finish before scrolling\n    // Otherwise the browser sometimes interrupts the scroll\n    const scrollDelay = 100;\n    setTimeout(() => {\n      if (!isOpen) return;\n      if (isTransitioning) return;\n      scrollToStep();\n    }, scrollDelay);\n  }, [isOpen, scrollToStep, isTransitioning]);\n\n  // reset the mask size when the tour is closed\n  useIsomorphicLayoutEffect(() => {\n    if (isOpen) {\n      // on initial mount, we don't want to delay the size update\n      updateMaskSize(true);\n      onOpenChange?.({ isOpen });\n    }\n    if (!isOpen) {\n      setSize({\n        x: 0,\n        y: 0,\n        width: 0,\n        height: 0,\n      });\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isOpen]);\n\n  useLockBodyScroll(isOpen);\n\n  const contextValue = useMemo(() => {\n    return { attachStep, removeStep };\n  }, [attachStep, removeStep]);\n\n  return (\n    <TourContext.Provider value={contextValue}>\n      <FloatingPortal>\n        {isOpen ? (\n          <SpotlightPopoverTourMask\n            isTransitioning={isTransitioning || isScrolling}\n            padding={theme.spacing[4]}\n            size={delayedSize}\n          />\n        ) : null}\n      </FloatingPortal>\n\n      {steps.map((step) => {\n        const isStepActive = currentStepData.name === step.name;\n        const attachTo = isStepActive ? currentStepRef : undefined;\n        // 1. only show popover if the tour is opened\n        // 2. only show the popover if the step is active\n        // 3. do not show the popover if we are transitioning between steps\n        //    this ensures popover suddenly doesn't jump to the next step,\n        //    instead it waits for the transition to finish\n        const isPopoverVisible = isOpen && isStepActive && !isTransitioning;\n\n        return (\n          <TourPopover\n            key={step.name}\n            isTransitioning={delayedActiveStep !== activeStep}\n            placement={step.placement}\n            isOpen={isPopoverVisible}\n            onOpenChange={onOpenChange}\n            title={step.title}\n            titleLeading={step.titleLeading}\n            content={step?.content?.({\n              activeStep: delayedActiveStep,\n              goToPrevious,\n              goToNext,\n              goToStep,\n              totalSteps,\n              stopTour,\n            })}\n            footer={step?.footer?.({\n              activeStep: delayedActiveStep,\n              goToPrevious,\n              goToNext,\n              goToStep,\n              totalSteps,\n              stopTour,\n            })}\n            attachTo={attachTo as React.RefObject<HTMLElement> | undefined}\n          />\n        );\n      })}\n\n      {children}\n    </TourContext.Provider>\n  );\n};\n\nexport { SpotlightPopoverTour };\n"],"names":["asHTMLElement","el","SpotlightPopoverTour","_ref","_steps$activeStep","steps","activeStep","isOpen","onFinish","onOpenChange","onStepChange","children","_useTheme","useTheme","theme","_useState","useState","Map","_useState2","_slicedToArray","refIdMap","setRefIdMap","_useState3","x","y","height","width","_useState4","size","setSize","_useDelayedState","useDelayedState","transitionDelay","_useDelayedState2","delayedActiveStep","_useDelayedState3","_useDelayedState4","delayedSize","setDelayedSize","isTransitioning","useIsTransitioningBetweenSteps","_useState5","_useState6","isScrolling","setIsScrolling","currentStepRef","get","name","intersection","useIntersectionObserver","threshold","totalSteps","length","currentStepData","useMemo","goToStep","useCallback","step","goToNext","nextState","goToPrevious","stopTour","attachStep","id","ref","prev","set","removeStep","newMap","updateMaskSize","_steps$activeStep2","_ref$current","shouldSkipDelay","arguments","undefined","current","rect","getBoundingClientRect","scrollToStep","_steps$delayedActiveS","_ref$current2","isIntersecting","smoothScroll","behavior","block","inline","then","useIsomorphicLayoutEffect","scrollDelay","setTimeout","useLockBodyScroll","contextValue","_jsxs","TourContext","Provider","value","_jsx","FloatingPortal","SpotlightPopoverTourMask","padding","spacing","map","_step$content","_step$footer","isStepActive","attachTo","isPopoverVisible","TourPopover","placement","title","titleLeading","content","call","footer"],"mappings":"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"}

package/build/lib/web/production/components/SpotlightPopoverTour/TourContext.js

@@ -3,6 +3,12 @@ import '../../utils/logger/index.js';
 import { throwBladeError } from '../../utils/logger/logger.js';
 
 /* eslint-disable @typescript-eslint/no-empty-function */
+
+/**
+ * Tour step host element. Union (not Platform.Select) so shared context stays
+ * assignable under both web and native typecheck configs.
+ */
+
 var TourContext = /*#__PURE__*/React__default.createContext(null);
 var useTourContext = function useTourContext() {
   var context = React__default.useContext(TourContext);

package/build/lib/web/production/components/SpotlightPopoverTour/TourContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"TourContext.js","sources":["../../../../../../src/components/SpotlightPopoverTour/TourContext.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-empty-function */\nimport React from 'react';\nimport { throwBladeError } from '~utils/logger';\n\ntype TourContextProps = {\n  attachStep: (id: string, ref: React.RefObject<HTMLElement>) => void;\n  removeStep: (id: string) => void;\n} | null;\n\nconst TourContext = React.createContext<TourContextProps>(null);\n\nconst useTourContext = (): NonNullable<TourContextProps> => {\n  const context = React.useContext(TourContext);\n\n  if (!context) {\n    throwBladeError({\n      moduleName: 'Tour',\n      message: 'useTourContext must be used within Tour',\n    });\n  }\n\n  return context!;\n};\n\nexport { useTourContext, TourContext };\n"],"names":["TourContext","React","createContext","useTourContext","context","useContext","throwBladeError","moduleName","message"],"mappings":";;;;AAAA;AASA,IAAMA,WAAW,gBAAGC,cAAK,CAACC,aAAa,CAAmB,IAAI,EAAC;AAE/D,IAAMC,cAAc,GAAG,SAAjBA,cAAcA,GAAwC;AAC1D,EAAA,IAAMC,OAAO,GAAGH,cAAK,CAACI,UAAU,CAACL,WAAW,CAAC,CAAA;EAE7C,IAAI,CAACI,OAAO,EAAE;AACZE,IAAAA,eAAe,CAAC;AACdC,MAAAA,UAAU,EAAE,MAAM;AAClBC,MAAAA,OAAO,EAAE,yCAAA;AACX,KAAC,CAAC,CAAA;AACJ,GAAA;AAEA,EAAA,OAAOJ,OAAO,CAAA;AAChB;;;;"}
+{"version":3,"file":"TourContext.js","sources":["../../../../../../src/components/SpotlightPopoverTour/TourContext.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-empty-function */\nimport React from 'react';\nimport type { View } from 'react-native';\nimport { throwBladeError } from '~utils/logger';\n\n/**\n * Tour step host element. Union (not Platform.Select) so shared context stays\n * assignable under both web and native typecheck configs.\n */\ntype TourElement = HTMLElement | View;\n\ntype TourContextProps = {\n  attachStep: (id: string, ref: React.RefObject<TourElement>) => void;\n  removeStep: (id: string) => void;\n  /**\n   * Native-only optional registration for ScrollView/FlatList parents when fiber walk fails.\n   * Not part of the public consumer API.\n   */\n  registerScrollParent?: (scrollable: unknown) => void;\n  /**\n   * Native-only: notify tour to remask after a step layout change.\n   */\n  onStepLayout?: (id: string) => void;\n} | null;\n\nconst TourContext = React.createContext<TourContextProps>(null);\n\nconst useTourContext = (): NonNullable<TourContextProps> => {\n  const context = React.useContext(TourContext);\n\n  if (!context) {\n    throwBladeError({\n      moduleName: 'Tour',\n      message: 'useTourContext must be used within Tour',\n    });\n  }\n\n  return context!;\n};\n\nexport type { TourElement };\nexport { useTourContext, TourContext };\n"],"names":["TourContext","React","createContext","useTourContext","context","useContext","throwBladeError","moduleName","message"],"mappings":";;;;AAAA;;AAKA;AACA;AACA;AACA;;AAiBA,IAAMA,WAAW,gBAAGC,cAAK,CAACC,aAAa,CAAmB,IAAI,EAAC;AAE/D,IAAMC,cAAc,GAAG,SAAjBA,cAAcA,GAAwC;AAC1D,EAAA,IAAMC,OAAO,GAAGH,cAAK,CAACI,UAAU,CAACL,WAAW,CAAC,CAAA;EAE7C,IAAI,CAACI,OAAO,EAAE;AACZE,IAAAA,eAAe,CAAC;AACdC,MAAAA,UAAU,EAAE,MAAM;AAClBC,MAAAA,OAAO,EAAE,yCAAA;AACX,KAAC,CAAC,CAAA;AACJ,GAAA;AAEA,EAAA,OAAOJ,OAAO,CAAA;AAChB;;;;"}

package/build/lib/web/production/components/Stagger/Stagger.web.js

@@ -9,7 +9,7 @@ import { msToSeconds } from '../../utils/msToSeconds.js';
 import '../../utils/index.js';
 import { jsx } from 'react/jsx-runtime';
 import useTheme from '../BladeProvider/useTheme.js';
-import { BaseMotionBox } from '../BaseMotion/BaseMotion.js';
+import { BaseMotionBox } from '../BaseMotion/BaseMotion.web.js';
 
 var _excluded = ["children", "isVisible", "type", "shouldUnmountWhenHidden", "delay", "motionTriggers"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }

package/build/lib/web/production/components/StepGroup/tokens.js

@@ -8,6 +8,11 @@ var markerLineDotWidth = size['2'];
 var markerLineDotSpacing = size['4'];
 var markerLineWidth = size['2'];
 var itemTopMargin = size['6'];
+// Fixed length of a single horizontal connector segment (each side of the marker).
+// Native cannot flex-grow this segment because the horizontal ScrollView gives an
+// unbounded main axis, so the length is a definite token value instead. It is sized to
+// roughly half the horizontal item width so adjacent connectors read as a continuous line.
+var markerLineHorizontalLength = size['72'];
 
 /**
  * Returns the tokens that are related to marker line alignment and spacing
@@ -58,5 +63,5 @@ var itemLineGap = {
   large: 'spacing.3'
 };
 
-export { getMarkerLineSpacings, iconSizeTokens, itemLineGap, itemTopMargin, markerLineDotSpacing, markerLineDotWidth, markerLineWidth, stepItemHeaderTokens };
+export { getMarkerLineSpacings, iconSizeTokens, itemLineGap, itemTopMargin, markerLineDotSpacing, markerLineDotWidth, markerLineHorizontalLength, markerLineWidth, stepItemHeaderTokens };
 //# sourceMappingURL=tokens.js.map

package/build/lib/web/production/components/StepGroup/tokens.js.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.js","sources":["../../../../../../src/components/StepGroup/tokens.ts"],"sourcesContent":["import type { StepGroupProps } from './types';\nimport { size as sizeTokens } from '~tokens/global';\n\nconst markerLineDotWidth = sizeTokens['2'];\nconst markerLineDotSpacing = sizeTokens['4'];\nconst markerLineWidth = sizeTokens['2'];\nconst itemTopMargin = sizeTokens['6'];\n\n/**\n * Returns the tokens that are related to marker line alignment and spacing\n */\nconst getMarkerLineSpacings = (\n  size: NonNullable<StepGroupProps['size']>,\n): {\n  markerLeftAlignment: number;\n  markerTopAlignment: number;\n  markerBackgroundSize: number;\n  markerMargin: number;\n  indentationWidth: number;\n} => {\n  const LINE_SPACINGS = {\n    large: {\n      markerBackgroundSize: sizeTokens['24'],\n      markerMargin: sizeTokens['2'],\n      indentationWidth: sizeTokens['33'],\n      // eslint-disable-next-line @typescript-eslint/restrict-plus-operands\n    },\n    medium: {\n      markerBackgroundSize: sizeTokens['20'],\n      markerMargin: sizeTokens['2'],\n      indentationWidth: sizeTokens['31'],\n    },\n  } as const;\n\n  const markerLeftAlignment =\n    // eslint-disable-next-line @typescript-eslint/restrict-plus-operands\n    (LINE_SPACINGS[size].markerBackgroundSize + LINE_SPACINGS[size].markerMargin) / 2;\n\n  const markerTopAlignment =\n    (-1 *\n      // eslint-disable-next-line @typescript-eslint/restrict-plus-operands\n      (LINE_SPACINGS[size].markerBackgroundSize +\n        LINE_SPACINGS[size].markerMargin * 2 +\n        markerLineWidth)) /\n    2;\n  return {\n    ...LINE_SPACINGS[size],\n    markerLeftAlignment,\n    markerTopAlignment,\n  };\n};\n\nconst stepItemHeaderTokens = {\n  medium: {\n    title: 'medium',\n    description: 'small',\n    timestamp: 'small',\n  },\n  large: {\n    title: 'large',\n    description: 'medium',\n    timestamp: 'medium',\n  },\n} as const;\n\nconst iconSizeTokens = {\n  medium: 'small',\n  large: 'medium',\n} as const;\n\nconst itemLineGap = {\n  medium: 'spacing.2',\n  large: 'spacing.3',\n} as const;\n\nexport {\n  getMarkerLineSpacings,\n  stepItemHeaderTokens,\n  iconSizeTokens,\n  itemLineGap,\n  markerLineDotWidth,\n  markerLineDotSpacing,\n  markerLineWidth,\n  itemTopMargin,\n};\n"],"names":["markerLineDotWidth","sizeTokens","markerLineDotSpacing","markerLineWidth","itemTopMargin","getMarkerLineSpacings","size","LINE_SPACINGS","large","markerBackgroundSize","markerMargin","indentationWidth","medium","markerLeftAlignment","markerTopAlignment","_objectSpread","stepItemHeaderTokens","title","description","timestamp","iconSizeTokens","itemLineGap"],"mappings":";;;;;;AAGA,IAAMA,kBAAkB,GAAGC,IAAU,CAAC,GAAG,EAAC;AAC1C,IAAMC,oBAAoB,GAAGD,IAAU,CAAC,GAAG,EAAC;AAC5C,IAAME,eAAe,GAAGF,IAAU,CAAC,GAAG,EAAC;AACvC,IAAMG,aAAa,GAAGH,IAAU,CAAC,GAAG,EAAC;;AAErC;AACA;AACA;AACA,IAAMI,qBAAqB,GAAG,SAAxBA,qBAAqBA,CACzBC,MAAyC,EAOtC;AACH,EAAA,IAAMC,aAAa,GAAG;AACpBC,IAAAA,KAAK,EAAE;AACLC,MAAAA,oBAAoB,EAAER,IAAU,CAAC,IAAI,CAAC;AACtCS,MAAAA,YAAY,EAAET,IAAU,CAAC,GAAG,CAAC;MAC7BU,gBAAgB,EAAEV,IAAU,CAAC,IAAI,CAAA;AACjC;KACD;AACDW,IAAAA,MAAM,EAAE;AACNH,MAAAA,oBAAoB,EAAER,IAAU,CAAC,IAAI,CAAC;AACtCS,MAAAA,YAAY,EAAET,IAAU,CAAC,GAAG,CAAC;MAC7BU,gBAAgB,EAAEV,IAAU,CAAC,IAAI,CAAA;AACnC,KAAA;GACQ,CAAA;AAEV,EAAA,IAAMY,mBAAmB;AACvB;AACA,EAAA,CAACN,aAAa,CAACD,MAAI,CAAC,CAACG,oBAAoB,GAAGF,aAAa,CAACD,MAAI,CAAC,CAACI,YAAY,IAAI,CAAC,CAAA;EAEnF,IAAMI,kBAAkB,GACrB,CAAC,CAAC;AACD;AACCP,EAAAA,aAAa,CAACD,MAAI,CAAC,CAACG,oBAAoB,GACvCF,aAAa,CAACD,MAAI,CAAC,CAACI,YAAY,GAAG,CAAC,GACpCP,eAAe,CAAC,GACpB,CAAC,CAAA;AACH,EAAA,OAAAY,aAAA,CAAAA,aAAA,KACKR,aAAa,CAACD,MAAI,CAAC,CAAA,EAAA,EAAA,EAAA;AACtBO,IAAAA,mBAAmB,EAAnBA,mBAAmB;AACnBC,IAAAA,kBAAkB,EAAlBA,kBAAAA;AAAkB,GAAA,CAAA,CAAA;AAEtB,EAAC;AAED,IAAME,oBAAoB,GAAG;AAC3BJ,EAAAA,MAAM,EAAE;AACNK,IAAAA,KAAK,EAAE,QAAQ;AACfC,IAAAA,WAAW,EAAE,OAAO;AACpBC,IAAAA,SAAS,EAAE,OAAA;GACZ;AACDX,EAAAA,KAAK,EAAE;AACLS,IAAAA,KAAK,EAAE,OAAO;AACdC,IAAAA,WAAW,EAAE,QAAQ;AACrBC,IAAAA,SAAS,EAAE,QAAA;AACb,GAAA;AACF,EAAU;AAEV,IAAMC,cAAc,GAAG;AACrBR,EAAAA,MAAM,EAAE,OAAO;AACfJ,EAAAA,KAAK,EAAE,QAAA;AACT,EAAU;AAEV,IAAMa,WAAW,GAAG;AAClBT,EAAAA,MAAM,EAAE,WAAW;AACnBJ,EAAAA,KAAK,EAAE,WAAA;AACT;;;;"}
+{"version":3,"file":"tokens.js","sources":["../../../../../../src/components/StepGroup/tokens.ts"],"sourcesContent":["import type { StepGroupProps } from './types';\nimport { size as sizeTokens } from '~tokens/global';\n\nconst markerLineDotWidth = sizeTokens['2'];\nconst markerLineDotSpacing = sizeTokens['4'];\nconst markerLineWidth = sizeTokens['2'];\nconst itemTopMargin = sizeTokens['6'];\n// Fixed length of a single horizontal connector segment (each side of the marker).\n// Native cannot flex-grow this segment because the horizontal ScrollView gives an\n// unbounded main axis, so the length is a definite token value instead. It is sized to\n// roughly half the horizontal item width so adjacent connectors read as a continuous line.\nconst markerLineHorizontalLength = sizeTokens['72'];\n\n/**\n * Returns the tokens that are related to marker line alignment and spacing\n */\nconst getMarkerLineSpacings = (\n  size: NonNullable<StepGroupProps['size']>,\n): {\n  markerLeftAlignment: number;\n  markerTopAlignment: number;\n  markerBackgroundSize: number;\n  markerMargin: number;\n  indentationWidth: number;\n} => {\n  const LINE_SPACINGS = {\n    large: {\n      markerBackgroundSize: sizeTokens['24'],\n      markerMargin: sizeTokens['2'],\n      indentationWidth: sizeTokens['33'],\n      // eslint-disable-next-line @typescript-eslint/restrict-plus-operands\n    },\n    medium: {\n      markerBackgroundSize: sizeTokens['20'],\n      markerMargin: sizeTokens['2'],\n      indentationWidth: sizeTokens['31'],\n    },\n  } as const;\n\n  const markerLeftAlignment =\n    // eslint-disable-next-line @typescript-eslint/restrict-plus-operands\n    (LINE_SPACINGS[size].markerBackgroundSize + LINE_SPACINGS[size].markerMargin) / 2;\n\n  const markerTopAlignment =\n    (-1 *\n      // eslint-disable-next-line @typescript-eslint/restrict-plus-operands\n      (LINE_SPACINGS[size].markerBackgroundSize +\n        LINE_SPACINGS[size].markerMargin * 2 +\n        markerLineWidth)) /\n    2;\n  return {\n    ...LINE_SPACINGS[size],\n    markerLeftAlignment,\n    markerTopAlignment,\n  };\n};\n\nconst stepItemHeaderTokens = {\n  medium: {\n    title: 'medium',\n    description: 'small',\n    timestamp: 'small',\n  },\n  large: {\n    title: 'large',\n    description: 'medium',\n    timestamp: 'medium',\n  },\n} as const;\n\nconst iconSizeTokens = {\n  medium: 'small',\n  large: 'medium',\n} as const;\n\nconst itemLineGap = {\n  medium: 'spacing.2',\n  large: 'spacing.3',\n} as const;\n\nexport {\n  getMarkerLineSpacings,\n  stepItemHeaderTokens,\n  iconSizeTokens,\n  itemLineGap,\n  markerLineDotWidth,\n  markerLineDotSpacing,\n  markerLineWidth,\n  markerLineHorizontalLength,\n  itemTopMargin,\n};\n"],"names":["markerLineDotWidth","sizeTokens","markerLineDotSpacing","markerLineWidth","itemTopMargin","markerLineHorizontalLength","getMarkerLineSpacings","size","LINE_SPACINGS","large","markerBackgroundSize","markerMargin","indentationWidth","medium","markerLeftAlignment","markerTopAlignment","_objectSpread","stepItemHeaderTokens","title","description","timestamp","iconSizeTokens","itemLineGap"],"mappings":";;;;;;AAGA,IAAMA,kBAAkB,GAAGC,IAAU,CAAC,GAAG,EAAC;AAC1C,IAAMC,oBAAoB,GAAGD,IAAU,CAAC,GAAG,EAAC;AAC5C,IAAME,eAAe,GAAGF,IAAU,CAAC,GAAG,EAAC;AACvC,IAAMG,aAAa,GAAGH,IAAU,CAAC,GAAG,EAAC;AACrC;AACA;AACA;AACA;AACA,IAAMI,0BAA0B,GAAGJ,IAAU,CAAC,IAAI,EAAC;;AAEnD;AACA;AACA;AACA,IAAMK,qBAAqB,GAAG,SAAxBA,qBAAqBA,CACzBC,MAAyC,EAOtC;AACH,EAAA,IAAMC,aAAa,GAAG;AACpBC,IAAAA,KAAK,EAAE;AACLC,MAAAA,oBAAoB,EAAET,IAAU,CAAC,IAAI,CAAC;AACtCU,MAAAA,YAAY,EAAEV,IAAU,CAAC,GAAG,CAAC;MAC7BW,gBAAgB,EAAEX,IAAU,CAAC,IAAI,CAAA;AACjC;KACD;AACDY,IAAAA,MAAM,EAAE;AACNH,MAAAA,oBAAoB,EAAET,IAAU,CAAC,IAAI,CAAC;AACtCU,MAAAA,YAAY,EAAEV,IAAU,CAAC,GAAG,CAAC;MAC7BW,gBAAgB,EAAEX,IAAU,CAAC,IAAI,CAAA;AACnC,KAAA;GACQ,CAAA;AAEV,EAAA,IAAMa,mBAAmB;AACvB;AACA,EAAA,CAACN,aAAa,CAACD,MAAI,CAAC,CAACG,oBAAoB,GAAGF,aAAa,CAACD,MAAI,CAAC,CAACI,YAAY,IAAI,CAAC,CAAA;EAEnF,IAAMI,kBAAkB,GACrB,CAAC,CAAC;AACD;AACCP,EAAAA,aAAa,CAACD,MAAI,CAAC,CAACG,oBAAoB,GACvCF,aAAa,CAACD,MAAI,CAAC,CAACI,YAAY,GAAG,CAAC,GACpCR,eAAe,CAAC,GACpB,CAAC,CAAA;AACH,EAAA,OAAAa,aAAA,CAAAA,aAAA,KACKR,aAAa,CAACD,MAAI,CAAC,CAAA,EAAA,EAAA,EAAA;AACtBO,IAAAA,mBAAmB,EAAnBA,mBAAmB;AACnBC,IAAAA,kBAAkB,EAAlBA,kBAAAA;AAAkB,GAAA,CAAA,CAAA;AAEtB,EAAC;AAED,IAAME,oBAAoB,GAAG;AAC3BJ,EAAAA,MAAM,EAAE;AACNK,IAAAA,KAAK,EAAE,QAAQ;AACfC,IAAAA,WAAW,EAAE,OAAO;AACpBC,IAAAA,SAAS,EAAE,OAAA;GACZ;AACDX,EAAAA,KAAK,EAAE;AACLS,IAAAA,KAAK,EAAE,OAAO;AACdC,IAAAA,WAAW,EAAE,QAAQ;AACrBC,IAAAA,SAAS,EAAE,QAAA;AACb,GAAA;AACF,EAAU;AAEV,IAAMC,cAAc,GAAG;AACrBR,EAAAA,MAAM,EAAE,OAAO;AACfJ,EAAAA,KAAK,EAAE,QAAA;AACT,EAAU;AAEV,IAAMa,WAAW,GAAG;AAClBT,EAAAA,MAAM,EAAE,WAAW;AACnBJ,EAAAA,KAAK,EAAE,WAAA;AACT;;;;"}

package/build/lib/web/production/components/Table/Table.web.js

@@ -21,6 +21,7 @@ import '../../utils/logger/index.js';
 import { getBaseBoxStyles } from '../Box/BaseBox/baseBoxStyles.js';
 import '../Box/BaseBox/index.js';
 import '../Spinner/index.js';
+import '../Skeleton/index.js';
 import '../Box/styledProps/index.js';
 import '../../utils/metaAttribute/index.js';
 import '../../utils/assignWithoutSideEffects/index.js';
@@ -37,17 +38,19 @@ import useTheme from '../BladeProvider/useTheme.js';
 import { getTableBodyStyles } from './commonStyles/tableBodyStyles.js';
 import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
 import { makeMotionTime } from '../../utils/makeMotionTime/makeMotionTime.web.js';
+import { makeSpace } from '../../utils/makeSpace/makeSpace.js';
 import { makeBorderSize } from '../../utils/makeBorderSize/makeBorderSize.js';
 import { throwBladeError } from '../../utils/logger/logger.js';
 import { getStyledProps } from '../Box/styledProps/getStyledProps.js';
 import { metaAttribute } from '../../utils/metaAttribute/metaAttribute.web.js';
 import { MetaConstants } from '../../utils/metaAttribute/metaConstants.js';
 import { makeAnalyticsAttribute } from '../../utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js';
+import { Skeleton } from '../Skeleton/Skeleton.js';
 import { Spinner } from '../Spinner/Spinner/Spinner.js';
 import { makeAccessible } from '../../utils/makeAccessible/makeAccessible.web.js';
 import { assignWithoutSideEffects } from '../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';
 
-var _excluded = ["children", "data", "multiSelectTrigger", "selectionType", "onSelectionChange", "isHeaderSticky", "isFooterSticky", "isFirstColumnSticky", "rowDensity", "onSortChange", "sortFunctions", "toolbar", "pagination", "height", "showStripedRows", "gridTemplateColumns", "isLoading", "isRefreshing", "showBorderedCells", "defaultSelectedIds", "backgroundColor", "isGrouped"];
+var _excluded = ["children", "data", "multiSelectTrigger", "selectionType", "onSelectionChange", "isHeaderSticky", "isFooterSticky", "isFirstColumnSticky", "rowDensity", "onSortChange", "sortFunctions", "toolbar", "pagination", "height", "showStripedRows", "gridTemplateColumns", "isLoading", "isRefreshing", "showBorderedCells", "defaultSelectedIds", "backgroundColor", "isGrouped", "checkboxDisplay"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var rowSelectType = {
@@ -123,39 +126,70 @@ var RefreshWrapper = /*#__PURE__*/styled(BaseBox).withConfig({
     transition: "opacity ".concat(makeMotionTime(theme.motion.duration.quick), " ").concat(isRefreshSpinnerEntering ? theme.motion.easing.entrance : isRefreshSpinnerExiting ? theme.motion.easing.exit : '')
   };
 });
-var _Table = function _Table(_ref3) {
-  var children = _ref3.children,
-    data = _ref3.data,
-    _ref3$multiSelectTrig = _ref3.multiSelectTrigger,
-    multiSelectTrigger = _ref3$multiSelectTrig === void 0 ? 'row' : _ref3$multiSelectTrig,
-    _ref3$selectionType = _ref3.selectionType,
-    selectionType = _ref3$selectionType === void 0 ? 'none' : _ref3$selectionType,
-    onSelectionChange = _ref3.onSelectionChange,
-    isHeaderSticky = _ref3.isHeaderSticky,
-    isFooterSticky = _ref3.isFooterSticky,
-    isFirstColumnSticky = _ref3.isFirstColumnSticky,
-    _ref3$rowDensity = _ref3.rowDensity,
-    rowDensity = _ref3$rowDensity === void 0 ? 'normal' : _ref3$rowDensity,
-    onSortChange = _ref3.onSortChange,
-    sortFunctions = _ref3.sortFunctions,
-    toolbar = _ref3.toolbar,
-    pagination = _ref3.pagination,
-    height = _ref3.height,
-    showStripedRows = _ref3.showStripedRows,
-    gridTemplateColumns = _ref3.gridTemplateColumns,
-    _ref3$isLoading = _ref3.isLoading,
-    isLoading = _ref3$isLoading === void 0 ? false : _ref3$isLoading,
-    _ref3$isRefreshing = _ref3.isRefreshing,
-    isRefreshing = _ref3$isRefreshing === void 0 ? false : _ref3$isRefreshing,
-    _ref3$showBorderedCel = _ref3.showBorderedCells,
-    showBorderedCells = _ref3$showBorderedCel === void 0 ? false : _ref3$showBorderedCel,
-    _ref3$defaultSelected = _ref3.defaultSelectedIds,
-    defaultSelectedIds = _ref3$defaultSelected === void 0 ? [] : _ref3$defaultSelected,
-    _ref3$backgroundColor = _ref3.backgroundColor,
-    backgroundColor = _ref3$backgroundColor === void 0 ? tableBackgroundColor : _ref3$backgroundColor,
-    _ref3$isGrouped = _ref3.isGrouped,
-    isGrouped = _ref3$isGrouped === void 0 ? false : _ref3$isGrouped,
-    rest = _objectWithoutProperties(_ref3, _excluded);
+var SKELETON_ROW_COUNT = 7;
+var SKELETON_CELL_WIDTHS = {
+  first: '70%',
+  last: '50%',
+  middle: '75%',
+  headerFirst: '80%',
+  headerRest: '60%'
+};
+var StyledSkeletonRow = /*#__PURE__*/styled(BaseBox).withConfig({
+  displayName: "Tableweb__StyledSkeletonRow",
+  componentId: "h0v0s8-2"
+})(function (_ref3) {
+  var theme = _ref3.theme,
+    $columns = _ref3.$columns,
+    $isHeader = _ref3.$isHeader;
+  return {
+    display: 'grid',
+    gridTemplateColumns: "repeat(".concat($columns, ", minmax(100px, 1fr))"),
+    paddingLeft: makeSpace(theme.spacing[4]),
+    paddingRight: makeSpace(theme.spacing[4]),
+    paddingTop: makeSpace(theme.spacing[$isHeader ? 3 : 4]),
+    paddingBottom: makeSpace(theme.spacing[$isHeader ? 3 : 4]),
+    borderBottomWidth: makeSpace(theme.border.width.thin),
+    borderBottomColor: theme.colors.surface.border.gray.muted,
+    borderBottomStyle: 'solid',
+    gap: makeSpace(theme.spacing[4]),
+    alignItems: 'center'
+  };
+});
+var _Table = function _Table(_ref4) {
+  var children = _ref4.children,
+    data = _ref4.data,
+    _ref4$multiSelectTrig = _ref4.multiSelectTrigger,
+    multiSelectTrigger = _ref4$multiSelectTrig === void 0 ? 'row' : _ref4$multiSelectTrig,
+    _ref4$selectionType = _ref4.selectionType,
+    selectionType = _ref4$selectionType === void 0 ? 'none' : _ref4$selectionType,
+    onSelectionChange = _ref4.onSelectionChange,
+    isHeaderSticky = _ref4.isHeaderSticky,
+    isFooterSticky = _ref4.isFooterSticky,
+    isFirstColumnSticky = _ref4.isFirstColumnSticky,
+    _ref4$rowDensity = _ref4.rowDensity,
+    rowDensity = _ref4$rowDensity === void 0 ? 'normal' : _ref4$rowDensity,
+    onSortChange = _ref4.onSortChange,
+    sortFunctions = _ref4.sortFunctions,
+    toolbar = _ref4.toolbar,
+    pagination = _ref4.pagination,
+    height = _ref4.height,
+    showStripedRows = _ref4.showStripedRows,
+    gridTemplateColumns = _ref4.gridTemplateColumns,
+    _ref4$isLoading = _ref4.isLoading,
+    isLoading = _ref4$isLoading === void 0 ? false : _ref4$isLoading,
+    _ref4$isRefreshing = _ref4.isRefreshing,
+    isRefreshing = _ref4$isRefreshing === void 0 ? false : _ref4$isRefreshing,
+    _ref4$showBorderedCel = _ref4.showBorderedCells,
+    showBorderedCells = _ref4$showBorderedCel === void 0 ? false : _ref4$showBorderedCel,
+    _ref4$defaultSelected = _ref4.defaultSelectedIds,
+    defaultSelectedIds = _ref4$defaultSelected === void 0 ? [] : _ref4$defaultSelected,
+    _ref4$backgroundColor = _ref4.backgroundColor,
+    backgroundColor = _ref4$backgroundColor === void 0 ? tableBackgroundColor : _ref4$backgroundColor,
+    _ref4$isGrouped = _ref4.isGrouped,
+    isGrouped = _ref4$isGrouped === void 0 ? false : _ref4$isGrouped,
+    _ref4$checkboxDisplay = _ref4.checkboxDisplay,
+    checkboxDisplay = _ref4$checkboxDisplay === void 0 ? 'always' : _ref4$checkboxDisplay,
+    rest = _objectWithoutProperties(_ref4, _excluded);
   var _useTheme2 = useTheme(),
     theme = _useTheme2.theme,
     colorScheme = _useTheme2.colorScheme;
@@ -376,14 +410,16 @@ var _Table = function _Table(_ref3) {
       showBorderedCells: showBorderedCells,
       hasHoverActions: hasHoverActions,
       setHasHoverActions: setHasHoverActions,
+      multiSelectTrigger: multiSelectTrigger,
       columnCount: columnCount,
       gridTemplateColumns: gridTemplateColumns,
       isVirtualized: isVirtualized,
       tableData: data.nodes,
       isGrouped: isGrouped,
-      tableToolbarPlacement: (_toolbar$props$placem = toolbar === null || toolbar === void 0 || (_toolbar$props = toolbar.props) === null || _toolbar$props === void 0 ? void 0 : _toolbar$props.placement) !== null && _toolbar$props$placem !== void 0 ? _toolbar$props$placem : 'inline'
+      tableToolbarPlacement: (_toolbar$props$placem = toolbar === null || toolbar === void 0 || (_toolbar$props = toolbar.props) === null || _toolbar$props === void 0 ? void 0 : _toolbar$props.placement) !== null && _toolbar$props$placem !== void 0 ? _toolbar$props$placem : 'inline',
+      checkboxDisplay: checkboxDisplay
     };
-  }, [selectionType, selectedRows, totalItems, toggleRowSelectionById, toggleAllRowsSelection, deselectAllRows, gridTemplateColumns, rowDensity, toggleSort, columnCount, currentSortedState, setPaginationPage, setPaginationRowSize, currentPaginationState, showStripedRows, disabledRows, setDisabledRows, paginationType, setPaginationType, backgroundColor, headerRowDensity, setHeaderRowDensity, showBorderedCells, hasHoverActions, setHasHoverActions, isVirtualized, data, isGrouped]);
+  }, [selectionType, selectedRows, totalItems, toggleRowSelectionById, toggleAllRowsSelection, deselectAllRows, gridTemplateColumns, rowDensity, toggleSort, columnCount, currentSortedState, setPaginationPage, setPaginationRowSize, currentPaginationState, showStripedRows, disabledRows, setDisabledRows, paginationType, setPaginationType, backgroundColor, headerRowDensity, setHeaderRowDensity, showBorderedCells, hasHoverActions, setHasHoverActions, multiSelectTrigger, isVirtualized, data, isGrouped, checkboxDisplay]);
   return /*#__PURE__*/jsx(TableContext.Provider, {
     value: tableContext,
     children: /*#__PURE__*/jsx(TableSurface, {
@@ -395,21 +431,42 @@ var _Table = function _Table(_ref3) {
       // on ListViewSurface remain visible through the TableSurface.
       ,
       backgroundColor: isInsideListView ? 'transparent' : 'surface.background.gray.intense',
-      children: isLoading ? /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread(_objectSpread(_objectSpread({
-        display: "flex",
-        flex: 1,
-        alignItems: "center",
-        justifyContent: "center",
-        height: height,
-        paddingY: "spacing.11"
+      children: isLoading ? /*#__PURE__*/jsxs(BaseBox, _objectSpread(_objectSpread(_objectSpread(_objectSpread({
+        flex: 1
       }, getStyledProps(rest)), metaAttribute({
         name: MetaConstants.Table
       })), makeAnalyticsAttribute(rest)), {}, {
-        children: /*#__PURE__*/jsx(Spinner, {
-          accessibilityLabel: "Loading Table",
-          size: "large",
-          testID: "table-spinner"
-        })
+        testID: "table-skeleton",
+        children: [/*#__PURE__*/jsx(StyledSkeletonRow, {
+          $columns: columnCount || 5,
+          $isHeader: true,
+          children: Array.from({
+            length: columnCount || 5
+          }).map(function (_, i) {
+            return /*#__PURE__*/jsx(Skeleton, {
+              width: i === 0 ? SKELETON_CELL_WIDTHS.headerFirst : SKELETON_CELL_WIDTHS.headerRest,
+              height: "16px",
+              borderRadius: "medium"
+            }, i);
+          })
+        }), Array.from({
+          length: SKELETON_ROW_COUNT
+        }).map(function (_, rowIdx) {
+          return /*#__PURE__*/jsx(StyledSkeletonRow, {
+            $columns: columnCount || 5,
+            children: Array.from({
+              length: columnCount || 5
+            }).map(function (_, colIdx) {
+              var cols = columnCount || 5;
+              var width = colIdx === 0 ? SKELETON_CELL_WIDTHS.first : colIdx === cols - 1 ? SKELETON_CELL_WIDTHS.last : SKELETON_CELL_WIDTHS.middle;
+              return /*#__PURE__*/jsx(Skeleton, {
+                width: width,
+                height: "14px",
+                borderRadius: "medium"
+              }, colIdx);
+            })
+          }, rowIdx);
+        })]
       })) : /*#__PURE__*/jsxs(BaseBox, _objectSpread(_objectSpread(_objectSpread(_objectSpread({
         flex: 1,
         position: "relative"