@sprinklrjs/spaceweb 12.14.4 → 12.33.2

package/esm/transitions/grow/grow.js

@@ -0,0 +1,30 @@
+import { __assign, __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Transition } from '../transition/index';
+import { ENTERED, ENTERING, EXITED, EXITING } from 'react-transition-group/Transition';
+import { DEFAULT_DURATION, DEFAULT_TIMING_FUNCTION } from '../transition/constants';
+var Grow = function (_a) {
+    var _b;
+    var _c = _a.duration, duration = _c === void 0 ? DEFAULT_DURATION : _c, _d = _a.timingFunction, timingFunction = _d === void 0 ? DEFAULT_TIMING_FUNCTION : _d, children = _a.children, props = __rest(_a, ["duration", "timingFunction", "children"]);
+    var durationProp = typeof duration === 'number' ? { enter: duration, exit: duration } : duration;
+    var growStyles = (_b = {},
+        _b[ENTERING] = {
+            opacity: 1,
+            transform: 'scale(1)',
+            transition: "opacity ".concat(durationProp.enter, "ms ").concat(timingFunction, ",transform ").concat(durationProp.enter, "ms ").concat(timingFunction),
+        },
+        _b[ENTERED] = {},
+        _b[EXITING] = {
+            opacity: 0,
+            transform: 'scale(0.8)',
+            transition: "opacity ".concat(durationProp.exit, "ms ").concat(timingFunction, ",transform ").concat(durationProp.enter, "ms ").concat(timingFunction),
+        },
+        _b[EXITED] = {
+            opacity: 0,
+            transform: 'scale(0.8)',
+        },
+        _b);
+    return (_jsx(Transition, __assign({}, props, { animationStyles: growStyles, duration: duration }, { children: children }), void 0));
+};
+Grow.displayName = 'Grow';
+export default Grow;

package/esm/transitions/grow/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Grow } from './grow';
+export type { GrowProps } from './types';
+export type { TransitionCallbacks, Duration, TimingFunction } from '../transition/index';

package/esm/transitions/grow/index.js

@@ -0,0 +1 @@
+export { default as Grow } from './grow';

package/esm/transitions/grow/types.d.ts

@@ -0,0 +1,9 @@
+import { Override } from '../../overrides';
+import { TimingFunction, TransitionProps } from '../transition';
+export declare type GrowOverrides = {
+    Container?: Override<any>;
+};
+export declare type GrowProps = Omit<TransitionProps, 'overrides' | 'animationStyles'> & {
+    overrides?: GrowOverrides;
+    timingFunction?: TimingFunction;
+};

package/esm/transitions/grow/types.js

@@ -0,0 +1 @@
+export {};

package/esm/transitions/transition/constants.d.ts

@@ -0,0 +1,6 @@
+export declare const ENTERED = "entered";
+export declare const ENTERING = "entering";
+export declare const EXITING = "exiting";
+export declare const EXITED = "exited";
+export declare const DEFAULT_DURATION = 150;
+export declare const DEFAULT_TIMING_FUNCTION = "linear";

package/esm/transitions/transition/constants.js

@@ -0,0 +1,6 @@
+export var ENTERED = 'entered';
+export var ENTERING = 'entering';
+export var EXITING = 'exiting';
+export var EXITED = 'exited';
+export var DEFAULT_DURATION = 150;
+export var DEFAULT_TIMING_FUNCTION = 'linear';

package/esm/transitions/transition/helperFunction.d.ts

@@ -0,0 +1 @@
+export declare const forceReflow: (node: HTMLDivElement) => void;

package/esm/transitions/transition/helperFunction.js

@@ -0,0 +1,5 @@
+// reading a dimension prop will cause the browser to recalculate,
+// which will let our animations work
+export var forceReflow = function (node) {
+    node.scrollTop;
+};

package/esm/transitions/transition/index.d.ts

@@ -0,0 +1,4 @@
+export { default as Transition } from './transition';
+export { default as TransitionGroup } from './transitionGroup';
+export type { TransitionProps, TransitionSharedProps, AnimationStyles, TransitionCallbacks, Duration, TimingFunction, } from './types';
+export { ENTERED, ENTERING, EXITED, EXITING } from './constants';

package/esm/transitions/transition/index.js

@@ -0,0 +1,3 @@
+export { default as Transition } from './transition';
+export { default as TransitionGroup } from './transitionGroup';
+export { ENTERED, ENTERING, EXITED, EXITING } from './constants';

package/esm/transitions/transition/styled-component.d.ts

@@ -0,0 +1 @@
+export declare const StyledContainer: import("../../style/styled").StyledComponent;

package/esm/transitions/transition/styled-component.js

@@ -0,0 +1,24 @@
+var _a;
+import { styled } from '../../style';
+import { ENTERED, ENTERING, EXITED, EXITING } from 'react-transition-group/Transition';
+import { DEFAULT_TIMING_FUNCTION, DEFAULT_DURATION } from './constants';
+var defaultStyles = (_a = {},
+    _a[ENTERING] = {
+        opacity: 1,
+        transition: "opacity ".concat(DEFAULT_DURATION, "ms ").concat(DEFAULT_TIMING_FUNCTION),
+    },
+    _a[ENTERED] = {},
+    _a[EXITING] = {
+        opacity: 0,
+        transition: "opacity ".concat(DEFAULT_DURATION, "ms ").concat(DEFAULT_TIMING_FUNCTION),
+    },
+    _a[EXITED] = {
+        opacity: 0,
+    },
+    _a);
+export var StyledContainer = styled('div', function (_, _a) {
+    var $state = _a.$state, $animationStyles = _a.$animationStyles;
+    if ($animationStyles)
+        return $animationStyles[$state];
+    return defaultStyles[$state];
+});

package/esm/transitions/transition/transition.d.ts

@@ -0,0 +1,7 @@
+import { ReactElement } from 'react';
+import { TransitionProps } from './types';
+declare const Transition: {
+    ({ visible, children, duration, overrides, containerRef, onEnter, onExit, animationStyles, disableExitTransition, disableEnterTransition, enableAppearTransition, ...props }: TransitionProps): ReactElement;
+    displayName: string;
+};
+export default Transition;

package/esm/transitions/transition/transition.js

@@ -0,0 +1,34 @@
+import { __assign, __read, __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef } from 'react';
+import BaseTransition from 'react-transition-group/Transition';
+import { StyledContainer } from './styled-component';
+import { useOverrides } from '../../overrides';
+import { forceReflow } from './helperFunction';
+import useCombinedRefs from '../../hooks/useCombinedRef';
+import useCombinedHandler from '../../hooks/useCombinedHandler';
+import { DEFAULT_DURATION } from './constants';
+import usePreferredReducedMotion from '../../hooks/usePreferredReducedMotion';
+var Transition = function (_a) {
+    var _b = _a.visible, visible = _b === void 0 ? true : _b, children = _a.children, _c = _a.duration, duration = _c === void 0 ? DEFAULT_DURATION : _c, overrides = _a.overrides, _d = _a.containerRef, containerRef = _d === void 0 ? null : _d, onEnter = _a.onEnter, onExit = _a.onExit, _e = _a.animationStyles, animationStyles = _e === void 0 ? null : _e, _f = _a.disableExitTransition, disableExitTransition = _f === void 0 ? false : _f, _g = _a.disableEnterTransition, disableEnterTransition = _g === void 0 ? false : _g, _h = _a.enableAppearTransition, enableAppearTransition = _h === void 0 ? false : _h, props = __rest(_a, ["visible", "children", "duration", "overrides", "containerRef", "onEnter", "onExit", "animationStyles", "disableExitTransition", "disableEnterTransition", "enableAppearTransition"]);
+    var prefersReducedMotion = usePreferredReducedMotion();
+    var nodeRef = useRef(null);
+    var mergedRef = useCombinedRefs(nodeRef, containerRef);
+    var handleEnter = useCombinedHandler(function () {
+        if (nodeRef.current) {
+            forceReflow(nodeRef.current);
+        }
+    }, onEnter);
+    var handleExit = useCombinedHandler(function () {
+        if (nodeRef.current) {
+            forceReflow(nodeRef.current);
+        }
+    }, onExit);
+    var sharedProps = {
+        $animationStyles: animationStyles,
+    };
+    var _j = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Container, StyledContainer), 2), Container = _j[0], containerProps = _j[1];
+    return prefersReducedMotion ? (_jsx(Container, __assign({}, containerProps, sharedProps, { children: visible ? children : null }), void 0)) : (_jsx(BaseTransition, __assign({ in: visible }, props, { onEnter: handleEnter, onExit: handleExit, timeout: duration, nodeRef: nodeRef, enter: !disableEnterTransition, exit: !disableExitTransition, appear: enableAppearTransition }, { children: function (state) { return (_jsx(Container, __assign({ ref: mergedRef, "$state": state }, sharedProps, containerProps, { children: children }), void 0)); } }), void 0));
+};
+Transition.displayName = 'Transition';
+export default Transition;

package/esm/transitions/transition/transitionGroup.d.ts

@@ -0,0 +1,4 @@
+declare const TransitionGroupWrapper: ({ ...props }: {
+    [x: string]: any;
+}) => import("react/jsx-runtime").JSX.Element;
+export default TransitionGroupWrapper;

package/esm/transitions/transition/transitionGroup.js

@@ -0,0 +1,11 @@
+import { __assign, __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import usePreferredReducedMotion from '../../hooks/usePreferredReducedMotion';
+import { TransitionGroup } from 'react-transition-group';
+import { Box } from '../../box';
+var TransitionGroupWrapper = function (_a) {
+    var props = __rest(_a, []);
+    var prefersReduced = usePreferredReducedMotion();
+    return prefersReduced ? _jsx(Box, { children: props.children }, void 0) : _jsxs(TransitionGroup, __assign({}, props, { children: [" ", props.children] }), void 0);
+};
+export default TransitionGroupWrapper;

package/esm/transitions/transition/types.d.ts

@@ -0,0 +1,40 @@
+import React, { CSSProperties, ReactNode } from 'react';
+import { Override } from '../../overrides';
+import CSS from 'csstype';
+export declare type AnimationStatus = 'entered' | 'entering' | 'exited' | 'exiting';
+export declare type Duration = {
+    enter: number;
+    exit: number;
+};
+export declare type TimingFunction = CSSProperties['transitionTimingFunction'];
+export declare type TransitionSharedProps = {
+    $animationStyles?: AnimationStyles | null;
+};
+declare type TransitionOverrides = {
+    Container?: Override<TransitionSharedProps>;
+};
+export declare type TransitionCallbacks = {
+    onEnter?: (isAppearing: boolean) => void;
+    onEntering?: (isAppearing: boolean) => void;
+    onEntered?: (isAppearing: boolean) => void;
+    onExit?: () => void;
+    onExiting?: () => void;
+    onExited?: () => void;
+};
+export declare type TransitionProps = TransitionCallbacks & {
+    overrides?: TransitionOverrides;
+    containerRef?: React.Ref<HTMLElement>;
+    visible?: boolean;
+    children: ReactNode;
+    duration?: Duration | number;
+    enableAppearTransition?: boolean;
+    mountOnEnter?: boolean;
+    unmountOnExit?: boolean;
+    disableEnterTransition?: boolean;
+    disableExitTransition?: boolean;
+    animationStyles?: AnimationStyles | null;
+};
+export declare type AnimationStyles = {
+    [status in AnimationStatus]: CSS.Properties<string | number>;
+};
+export {};

package/esm/transitions/transition/types.js

@@ -0,0 +1 @@
+export {};

package/esm/truncateWithTooltip/TruncateWithTooltip.d.ts

@@ -0,0 +1,4 @@
+import { ReactElement } from 'react';
+import type { TruncateWithTooltipProps } from './types';
+declare const TruncateWithTooltip: import("react").MemoExoticComponent<({ children, tooltipClassName, prefixEl, suffixEl, overrides, maxLines, maxWidth, className, }: TruncateWithTooltipProps) => ReactElement>;
+export default TruncateWithTooltip;

package/esm/truncateWithTooltip/TruncateWithTooltip.js

@@ -0,0 +1,20 @@
+import { __assign, __read } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Libraries
+import { memo } from 'react';
+// Hooks
+import { useOverrides } from '../overrides';
+import { useTruncateWithTooltip } from './hooks/useTruncateWithTooltip';
+// Components
+import { Box } from '../box';
+import { StatefulTooltip } from '../tooltip';
+var INITIAL_STATE = { isOpen: true };
+var TruncateWithTooltip = memo(function (_a) {
+    var children = _a.children, tooltipClassName = _a.tooltipClassName, prefixEl = _a.prefixEl, suffixEl = _a.suffixEl, overrides = _a.overrides, maxLines = _a.maxLines, maxWidth = _a.maxWidth, _b = _a.className, className = _b === void 0 ? (maxLines !== null && maxLines !== void 0 ? maxLines : 1) > 1 ? 'break-words' : 'break-all' : _b;
+    var _c = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Tooltip, StatefulTooltip), 2), TooltipComponent = _c[0], tooltipProps = _c[1];
+    var _d = useTruncateWithTooltip(), onMouseEnter = _d.onMouseEnter, onMouseLeave = _d.onMouseLeave, renderTooltip = _d.renderTooltip, elementRef = _d.elementRef;
+    var el = (_jsxs(Box, __assign({ "data-testid": "content", className: [className, 'flex items-center', maxWidth ? { maxWidth: "".concat(maxWidth, "rem") } : undefined], onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave }, { children: [prefixEl, _jsx(Box, __assign({ ref: elementRef, className: [maxLines ? ['line-clamp-1 whitespace-normal', { WebkitLineClamp: maxLines }] : ['truncate']] }, { children: children }), void 0), suffixEl] }), void 0));
+    return renderTooltip ? (_jsx(TooltipComponent, __assign({ content: _jsx(Box, __assign({ "data-testid": "tooltip", className: tooltipClassName !== null && tooltipClassName !== void 0 ? tooltipClassName : 'max-w-2xl break-words' }, { children: children }), void 0), placement: "bottom", accessibilityType: "tooltip", initialState: INITIAL_STATE }, tooltipProps, { children: el }), void 0)) : (el);
+});
+TruncateWithTooltip.displayName = 'TruncateWithTooltip';
+export default TruncateWithTooltip;

package/esm/truncateWithTooltip/hooks/useTruncateWithTooltip.d.ts

@@ -0,0 +1,7 @@
+import { RefObject } from 'react';
+export declare const useTruncateWithTooltip: () => {
+    onMouseEnter: () => void;
+    onMouseLeave: () => void;
+    elementRef: RefObject<HTMLElement>;
+    renderTooltip: boolean;
+};

package/esm/truncateWithTooltip/hooks/useTruncateWithTooltip.js

@@ -0,0 +1,26 @@
+import { __read } from "tslib";
+import { useState, useCallback, useRef } from 'react';
+var DELAY = 200;
+export var useTruncateWithTooltip = function () {
+    var _a = __read(useState(false), 2), renderTooltip = _a[0], setRenderTooltip = _a[1];
+    var timeoutRef = useRef();
+    var elementRef = useRef(null);
+    var onMouseEnter = useCallback(function () {
+        timeoutRef.current = setTimeout(function () {
+            if (!elementRef.current) {
+                return;
+            }
+            var _a = elementRef.current, scrollWidth = _a.scrollWidth, clientWidth = _a.clientWidth, scrollHeight = _a.scrollHeight, clientHeight = _a.clientHeight;
+            if (scrollWidth > clientWidth || scrollHeight > clientHeight) {
+                setRenderTooltip(true);
+            }
+            else {
+                setRenderTooltip(false);
+            }
+        }, DELAY);
+    }, []);
+    var onMouseLeave = useCallback(function () {
+        clearTimeout(timeoutRef.current);
+    }, []);
+    return { onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, elementRef: elementRef, renderTooltip: renderTooltip };
+};

package/esm/truncateWithTooltip/index.d.ts

@@ -0,0 +1,2 @@
+export { default as TruncateWithTooltip } from './TruncateWithTooltip';
+export type { TruncateWithTooltipProps } from './types';

package/esm/truncateWithTooltip/index.js

@@ -0,0 +1 @@
+export { default as TruncateWithTooltip } from './TruncateWithTooltip';

package/esm/truncateWithTooltip/types.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import { ClassName } from '../types';
+import { TooltipProps } from '../tooltip';
+import { Override } from '../overrides';
+export declare type TruncateWithTooltipProps = {
+    className?: ClassName;
+    tooltipClassName?: ClassName;
+    prefixEl?: React.ReactElement | null;
+    suffixEl?: React.ReactElement | null;
+    children: string;
+    overrides?: {
+        Tooltip?: Override<TooltipProps & Record<string, any>>;
+    };
+} & ({
+    maxLines: number;
+    maxWidth?: never;
+} | {
+    maxWidth: number;
+    maxLines?: never;
+});

package/esm/truncateWithTooltip/types.js

@@ -0,0 +1 @@
+export {};

package/esm/types.d.ts

@@ -1,5 +1,4 @@
 import { AllHTMLAttributes, ElementType } from 'react';
-import { Theme as BaseTheme } from 'baseui/theme';
 import { StyleObject as StyletronStyleObject } from 'styletron-react';
 import { StandardEngine as StyletronStandardEngine } from 'styletron-standard';
 import { Direction, Theme, ThemeClassNames } from '@sprinklrjs/spaceweb-themes/types';
@@ -11,9 +10,7 @@ export declare type StandardEngine = StyletronStandardEngine;
  * TODO: Replace `any` for `unknown`, the change will cause several
  * components to fail.
  */
-export declare type StyleFn<P = any> = (utils: StyleUtils, props: {
-    $theme?: BaseTheme;
-} & P) => StyleObject | string | undefined;
+export declare type StyleFn<P = any> = (utils: StyleUtils, props: P) => StyleObject | string | undefined;
 declare type RecursiveArray<T> = Array<T | RecursiveArray<T>>;
 /**
  * CSS in JS object
@@ -64,7 +61,7 @@ export declare type Size = 'xxxxs' | 'xxxs' | 'xxs' | 'xs' | 'sm' | 'md' | 'lg'
 /**
  * Intent Options
  */
-export declare type Intent = 'default' | 'success' | 'warning' | 'error';
+export declare type Intent = 'default' | 'success' | 'warning' | 'error' | 'ai';
 /**
  * Gets Styletron's generated class names from `StyleArg`s
  */

package/esm/typography/Typography.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { TruncateWithTooltipProps } from '../truncateWithTooltip';
 declare const Typography: import("react").ForwardRefExoticComponent<Omit<import("react").AllHTMLAttributes<HTMLElement>, "style" | "className"> & {
     $as?: import("react").ElementType<any> | undefined;
     className?: import("..").Styles;
@@ -8,5 +9,10 @@ declare const Typography: import("react").ForwardRefExoticComponent<Omit<import(
 } & {
     variant?: import("./types").TypographyVariant | undefined;
     weight?: import("./types").FontWeight | undefined;
+    overrides?: {
+        TruncateWithTooltip?: import("../overrides").Override<TruncateWithTooltipProps & Record<string, any>> | undefined;
+    } | undefined;
+    maxLines?: number | undefined;
+    maxWidth?: number | undefined;
 } & import("react").RefAttributes<HTMLElement>>;
 export default Typography;

package/esm/typography/Typography.js

@@ -1,8 +1,11 @@
-import { __assign, __rest } from "tslib";
+import { __assign, __read, __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
+import _isNumber from 'lodash/isNumber';
 import { add$props } from '../helpers';
 import { StyledTypography } from './styled-components';
+import { TruncateWithTooltip as BaseTruncateWithTooltip } from '../truncateWithTooltip';
+import { useOverrides } from '../overrides';
 var defaultVariantToHTMLTagMapping = {
     h1: 'div',
     h2: 'div',
@@ -32,9 +35,11 @@ var defaultVariantToHTMLTagMapping = {
     'display-42': 'h1',
 };
 var Typography = forwardRef(function (_a, ref) {
-    var $as = _a.$as, _b = _a.variant, variant = _b === void 0 ? 'body-14' : _b, weight = _a.weight, restProps = __rest(_a, ["$as", "variant", "weight"]);
+    var $as = _a.$as, _b = _a.variant, variant = _b === void 0 ? 'body-14' : _b, weight = _a.weight, overrides = _a.overrides, children = _a.children, maxLines = _a.maxLines, maxWidth = _a.maxWidth, restProps = __rest(_a, ["$as", "variant", "weight", "overrides", "children", "maxLines", "maxWidth"]);
     var sharedProps = add$props({ variant: variant, weight: weight });
-    return (_jsx(StyledTypography, __assign({ ref: ref, "data-spaceweb": "typography-".concat(variant), "$as": $as || defaultVariantToHTMLTagMapping[variant] }, restProps, sharedProps), void 0));
+    var _c = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.TruncateWithTooltip, BaseTruncateWithTooltip), 2), TruncateWithTooltip = _c[0], truncateWithTooltipProps = _c[1];
+    var mergedTruncateWithTooltipProps = __assign(__assign(__assign({}, truncateWithTooltipProps), (_isNumber(maxWidth) && { maxWidth: maxWidth })), (_isNumber(maxLines) && { maxLines: maxLines }));
+    return (_jsx(StyledTypography, __assign({ ref: ref, "data-spaceweb": "typography-".concat(variant), "$as": $as || defaultVariantToHTMLTagMapping[variant] }, restProps, sharedProps, { children: _isNumber(maxWidth) || _isNumber(maxLines) ? (_jsx(TruncateWithTooltip, __assign({}, mergedTruncateWithTooltipProps, { children: children }), void 0)) : (children) }), void 0));
 });
 Typography.displayName = 'Typography';
 export default Typography;

package/esm/typography/types.d.ts

@@ -1,9 +1,15 @@
 import { PropsWithChildren } from 'react';
 import { SpacewebComponentProps } from '../types';
+import { Override } from '../overrides';
+import { TruncateWithTooltipProps } from '../truncateWithTooltip';
 export declare type TypographyVariant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'h7' | 'bl1' | 'bl2' | 'bl3' | 'bs1' | 'bs2' | 'bs3' | 'l1' | 'l2' | 'l3' | 'l4' | 'body-8' | 'body-10' | 'body-12' | 'body-13' | 'body-14' | 'body-16' | 'display-18' | 'display-20' | 'display-24' | 'display-28' | 'display-32' | 'display-40' | 'display-42';
 export declare type FontWeight = 'regular' | 'medium' | 'semibold' | 'bold';
 export declare type TypographyProps = PropsWithChildren<SpacewebComponentProps> & {
-    /** variant of typography element */
     variant?: TypographyVariant;
     weight?: FontWeight;
+    overrides?: {
+        TruncateWithTooltip?: Override<TruncateWithTooltipProps & Record<string, any>>;
+    };
+    maxLines?: number;
+    maxWidth?: number;
 };

package/esm/utils/intlNumberFormatUtils/index.js

@@ -32,5 +32,7 @@ export var getFormattedNumber = function (_a) {
             break;
         }
     }
-    return Intl.NumberFormat(locale, __assign({ minimumFractionDigits: 0, maximumFractionDigits: maximumFractionDigits, notation: notation }, numberOptions)).format(value);
+    return Intl.NumberFormat(locale, __assign({ minimumFractionDigits: 0, maximumFractionDigits: maximumFractionDigits, 
+        // @ts-ignore -- yarn migration
+        notation: notation }, numberOptions)).format(value);
 };

package/esm/video/Video.js

@@ -24,7 +24,8 @@ var Video = forwardRef(function (props, ref) {
     var _c = __read(useOverrides(mergedOverrides.Root, StyledRoot), 2), Root = _c[0], rootProps = _c[1];
     var _d = __read(useOverrides(mergedOverrides.Video, StyledVideo), 2), Vid = _d[0], videoProps = _d[1];
     var _e = __read(useOverrides(mergedOverrides.PlayButton, Play), 2), PlayButton = _e[0], playButtonProps = _e[1];
-    var _f = __read(useOverrides(mergedOverrides.PosterImage, Image), 2), PosterImage = _f[0], posterImageProps = _f[1];
+    var _f = __read(useOverrides(mergedOverrides.VideoDisabledIcon, VideoDisabled), 2), VideoDisabledIcon = _f[0], VideoDisabledIconProps = _f[1];
+    var _g = __read(useOverrides(mergedOverrides.PosterImage, Image), 2), PosterImage = _g[0], posterImageProps = _g[1];
     var onPlay = videoProps.onPlay;
     var onClickPlay = useCallback(function (event) {
         startPlay(true);
@@ -34,7 +35,7 @@ var Video = forwardRef(function (props, ref) {
     return played || !videoProps.poster ? (_jsx(Root, __assign({ "data-spaceweb": "video" }, rootProps, { children: _jsx(Vid, __assign({ ref: ref, "data-testid": "video" }, videoProps, { autoPlay: played }, { children: children }), void 0) }), void 0)) : (_jsxs(Root, __assign({ "data-spaceweb": "video" }, rootProps, { className: "flex items-center relative justify-center ".concat(classNames({ 'cursor-pointer': !videoProps.disabled })) }, { children: [_jsx(PosterImage, __assign({}, videoProps, { src: videoProps.poster, alt: "Thumbnail", overrides: {
                     Image: { style: videoProps.$style },
                     Root: { style: rootProps.$style },
-                }, onClick: videoProps.disabled ? _noop : onClickPlay }, posterImageProps), void 0), _jsx("div", __assign({ className: css('absolute') }, { children: videoProps.disabled ? (_jsx(VideoDisabled, { className: "w-8 h-8 cursor-not-allowed spr-icon-05" }, void 0)) : (_jsx(PlayButton, __assign({ className: "w-8 h-8 spr-icon-05", onClick: onClickPlay }, playButtonProps), void 0)) }), void 0)] }), void 0));
+                }, onClick: videoProps.disabled ? _noop : onClickPlay }, posterImageProps), void 0), _jsx("div", __assign({ className: css('absolute') }, { children: videoProps.disabled ? (_jsx(VideoDisabledIcon, __assign({ className: "w-8 h-8 cursor-not-allowed spr-icon-05" }, VideoDisabledIconProps), void 0)) : (_jsx(PlayButton, __assign({ className: "w-8 h-8 spr-icon-05", onClick: onClickPlay }, playButtonProps), void 0)) }), void 0)] }), void 0));
 });
 Video.displayName = 'Video';
 export default Video;

package/esm/video/types.d.ts

@@ -7,6 +7,7 @@ export declare type VideoOverrides = {
     Video?: Override<{}>;
     PlayButton?: Override<{}>;
     PosterImage?: Override<{}>;
+    VideoDisabledIcon?: Override<{}>;
 };
 export declare type VideoProps = SpacewebComponentProps<React.VideoHTMLAttributes<HTMLVideoElement>> & {
     children?: ReactChildren;

package/form-control/form-control.js

@@ -5,7 +5,6 @@ var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 var React = (0, tslib_1.__importStar)(require("react"));
-var react_uid_1 = require("react-uid");
 var helpers_1 = require("../helpers");
 var stack_1 = require("../stack");
 var info_1 = (0, tslib_1.__importDefault)(require("../icon/components/info"));
@@ -14,6 +13,7 @@ var overrides_1 = require("../overrides");
 var tooltip_1 = require("../tooltip");
 var context_1 = require("./context");
 var styled_component_1 = require("./styled-component");
+var useUniqueId_1 = (0, tslib_1.__importDefault)(require("../hooks/useUniqueId"));
 function chooseRenderedHint(caption, error, positive, sharedProps) {
     if (error && typeof error !== 'boolean') {
         return typeof error === 'function' ? error(sharedProps) : error;
@@ -29,10 +29,10 @@ function chooseRenderedHint(caption, error, positive, sharedProps) {
 var FormControl = (0, react_1.forwardRef)(function (_a, ref) {
     var overrides = _a.overrides, label = _a.label, caption = _a.caption, disabled = _a.disabled, error = _a.error, positive = _a.positive, htmlFor = _a.htmlFor, children = _a.children, intent = _a.intent, required = _a.required, layout = _a.layout, $as = _a.$as, className = _a.className, subText = _a.subText, subTextAsIcon = _a.subTextAsIcon;
     var onlyChildProps = React.Children.only(children).props;
-    var a11yCaptionId = (0, react_uid_1.useUID)();
-    var a11LabelId = (0, react_uid_1.useUID)();
-    var a11SubTextId = (0, react_uid_1.useUID)();
-    var fieldUniqueId = (0, react_uid_1.useUID)();
+    var a11yCaptionId = (0, useUniqueId_1.default)();
+    var a11LabelId = (0, useUniqueId_1.default)();
+    var a11SubTextId = (0, useUniqueId_1.default)();
+    var fieldUniqueId = (0, useUniqueId_1.default)();
     // First try to infer id from props or children. Create new id if needed.
     var a11yFieldId = htmlFor || onlyChildProps.id || fieldUniqueId;
     var sharedProps = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, (0, helpers_1.add$props)({ required: required, layout: layout, intent: intent, disabled: disabled })), { $error: !!error, $positive: !!positive, $hasSubText: !!subText, $subTextAsIcon: subTextAsIcon });
@@ -41,7 +41,8 @@ var FormControl = (0, react_1.forwardRef)(function (_a, ref) {
     var _b = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.LabelContainer, styled_component_1.StyledLabelContainer), 2), LabelContainer = _b[0], labelContainerProps = _b[1], _c = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Label, styled_component_1.StyledLabel), 2), Label = _c[0], labelProps = _c[1], _d = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.RequiredDot, styled_component_1.StyledRequiredDot), 2), RequiredDot = _d[0], requiredDotProps = _d[1], _e = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Root, styled_component_1.StyledRoot), 2), Root = _e[0], rootProps = _e[1], _f = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.SubText, styled_component_1.StyledSubText), 2), SubText = _f[0], subTextProps = _f[1], _g = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.InfoIconContainer, styled_component_1.StyledInfoIconContainer), 2), InfoIconContainer = _g[0], infoIconContainerProps = _g[1], _h = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.ControlContainer, styled_component_1.StyledControlContainer), 2), ControlContainer = _h[0], controlContainerProps = _h[1], _j = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Caption, styled_component_1.StyledCaption), 2), Caption = _j[0], captionProps = _j[1], _k = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.SubTextTooltip, tooltip_1.StatefulTooltip), 2), SubTextTooltip = _k[0], subTextTooltipProps = _k[1];
     var formControlProviderValue = (0, react_1.useMemo)(function () { return ({ intent: intent }); }, [intent]);
     var shouldRenderSubTextInTooltip = layout === 'horizontal' || subTextAsIcon;
-    return ((0, jsx_runtime_1.jsx)(context_1.FormControlProvider, (0, tslib_1.__assign)({ value: formControlProviderValue }, { children: (0, jsx_runtime_1.jsxs)(Root, (0, tslib_1.__assign)({ ref: ref, "data-testid": "form-control", "data-spaceweb": "form-control", className: className, "$as": $as }, sharedProps, rootProps, { children: [label && ((0, jsx_runtime_1.jsxs)(LabelContainer, (0, tslib_1.__assign)({ "data-testid": "form-control-label-container" }, sharedProps, labelContainerProps, { children: [(0, jsx_runtime_1.jsx)(Label, (0, tslib_1.__assign)({ id: a11LabelId, "data-spaceweb": "form-control-label", htmlFor: a11yFieldId }, sharedProps, labelProps, { children: typeof label === 'function' ? label(sharedProps) : label }), void 0), required && (0, jsx_runtime_1.jsx)(RequiredDot, (0, tslib_1.__assign)({ "data-testid": "form-required" }, requiredDotProps), void 0), subText && shouldRenderSubTextInTooltip ? ((0, jsx_runtime_1.jsx)(SubTextTooltip, (0, tslib_1.__assign)({ content: subText, size: "md" }, subTextTooltipProps, { children: (0, jsx_runtime_1.jsx)(InfoIconContainer, (0, tslib_1.__assign)({}, infoIconContainerProps, { children: (0, jsx_runtime_1.jsx)(info_1.default, { className: "h-2 w-2" }, void 0) }), void 0) }), void 0)) : null] }), void 0)), subText && !shouldRenderSubTextInTooltip ? ((0, jsx_runtime_1.jsx)(SubText, (0, tslib_1.__assign)({ id: a11SubTextId }, subTextProps, { children: typeof subText === 'function' ? subText(sharedProps) : subText }), void 0)) : null, (0, jsx_runtime_1.jsxs)(ControlContainer, (0, tslib_1.__assign)({ "data-spaceweb": "form-control-container" }, sharedProps, controlContainerProps, { children: [React.Children.map(children, function (child, index) {
+    var subTextToRender = typeof subText === 'function' ? subText(sharedProps) : subText;
+    return ((0, jsx_runtime_1.jsx)(context_1.FormControlProvider, (0, tslib_1.__assign)({ value: formControlProviderValue }, { children: (0, jsx_runtime_1.jsxs)(Root, (0, tslib_1.__assign)({ ref: ref, "data-testid": "form-control", "data-spaceweb": "form-control", className: className, "$as": $as }, sharedProps, rootProps, { children: [label && ((0, jsx_runtime_1.jsxs)(LabelContainer, (0, tslib_1.__assign)({ "data-testid": "form-control-label-container" }, sharedProps, labelContainerProps, { children: [(0, jsx_runtime_1.jsx)(Label, (0, tslib_1.__assign)({ id: a11LabelId, "data-spaceweb": "form-control-label", htmlFor: a11yFieldId }, sharedProps, labelProps, { children: typeof label === 'function' ? label(sharedProps) : label }), void 0), required && (0, jsx_runtime_1.jsx)(RequiredDot, (0, tslib_1.__assign)({ "data-testid": "form-required" }, requiredDotProps), void 0), subText && shouldRenderSubTextInTooltip ? ((0, jsx_runtime_1.jsx)(SubTextTooltip, (0, tslib_1.__assign)({ content: subTextToRender, size: "md" }, subTextTooltipProps, { children: (0, jsx_runtime_1.jsx)(InfoIconContainer, (0, tslib_1.__assign)({}, infoIconContainerProps, { children: (0, jsx_runtime_1.jsx)(info_1.default, { className: "h-2 w-2" }, void 0) }), void 0) }), void 0)) : null] }), void 0)), subText && !shouldRenderSubTextInTooltip ? ((0, jsx_runtime_1.jsx)(SubText, (0, tslib_1.__assign)({ id: a11SubTextId }, subTextProps, { children: subTextToRender }), void 0)) : null, (0, jsx_runtime_1.jsxs)(ControlContainer, (0, tslib_1.__assign)({ "data-spaceweb": "form-control-container" }, sharedProps, controlContainerProps, { children: [React.Children.map(children, function (child, index) {
                             if (!child)
                                 return null;
                             var key = child.key || String(index);

package/form-control/types.d.ts

@@ -16,16 +16,16 @@ export declare type FormControlOverrides = {
 export declare type FormControlProps = {
     children: React.ReactElement;
     disabled?: boolean;
-    label?: React.ReactNode;
+    label?: React.ReactNode | ((sharedProps: SharedProps) => React.ReactNode);
     /**
      * Help text to render b/w Label and the form field.
      */
-    subText?: React.ReactNode;
+    subText?: React.ReactNode | ((sharedProps: SharedProps) => React.ReactNode);
     /**
      * If true, render info icon and display subText in Tooltip
      */
     subTextAsIcon?: boolean;
-    caption?: React.ReactNode;
+    caption?: React.ReactNode | ((sharedProps: SharedProps) => React.ReactNode);
     error?: boolean | React.ReactNode;
     positive?: React.ReactNode;
     htmlFor?: string;
@@ -43,4 +43,6 @@ export declare type SharedProps = {
     $required: boolean;
     $layout: layout;
     $intent: Intent;
+    $hasSubText: boolean;
+    $subTextAsIcon?: boolean;
 };

package/grid/Col.js

@@ -10,24 +10,34 @@ var react_1 = require("react");
 var box_1 = require("../box");
 var useStyle_1 = (0, tslib_1.__importDefault)(require("../style/useStyle"));
 var utils_1 = require("./utils");
-var getClassList = function (column, breakpoint) {
-    if (column === void 0) { column = {}; }
+var getGridRange = function (column, breakpointMinWidth) {
+    var _a;
     var colSpan = column.colSpan, colStart = column.colStart, colEnd = column.colEnd, rowSpan = column.rowSpan, rowStart = column.rowStart, rowEnd = column.rowEnd;
-    var classList = [];
-    var prefix = breakpoint ? "".concat(breakpoint, ":") : '';
-    if (colEnd)
-        classList.push("".concat(prefix, "col-end-").concat(colEnd));
-    if (colSpan)
-        classList.push("".concat(prefix, "col-span-").concat(colSpan));
-    if (colStart)
-        classList.push("".concat(prefix, "col-start-").concat(colStart));
-    if (rowEnd)
-        classList.push("".concat(prefix, "row-end-").concat(rowEnd));
-    if (rowSpan)
-        classList.push("".concat(prefix, "row-span-").concat(rowSpan));
-    if (rowStart)
-        classList.push("".concat(prefix, "row-start-").concat(rowStart));
-    return classList;
+    var gridRangeStyle = {};
+    if (typeof colSpan === 'number') {
+        gridRangeStyle.gridColumnStart = "span ".concat(colSpan);
+        gridRangeStyle.gridColumnEnd = "span ".concat(colSpan);
+    }
+    if (typeof rowSpan === 'number') {
+        gridRangeStyle.gridRowStart = "span ".concat(rowSpan);
+        gridRangeStyle.gridRowEnd = "span ".concat(rowSpan);
+    }
+    if (typeof colStart === 'number') {
+        gridRangeStyle.gridColumnStart = colStart;
+    }
+    if (typeof colEnd === 'number') {
+        gridRangeStyle.gridColumnEnd = colEnd;
+    }
+    if (typeof rowStart === 'number') {
+        gridRangeStyle.gridRowStart = rowStart;
+    }
+    if (typeof rowEnd === 'number') {
+        gridRangeStyle.gridRowEnd = rowEnd;
+    }
+    return breakpointMinWidth
+        ? (_a = {},
+            _a["@media screen and (min-width: ".concat(breakpointMinWidth, ")")] = gridRangeStyle,
+            _a) : gridRangeStyle;
 };
 var Col = function (props) {
     var theme = (0, useStyle_1.default)().theme;
@@ -35,10 +45,10 @@ var Col = function (props) {
     var className = props.className, style = props.style, children = props.children;
     var classList = [];
     var breakpoints = (0, react_1.useMemo)(function () { return Object.keys(screens); }, [screens]);
-    classList = classList.concat.apply(classList, (0, tslib_1.__spreadArray)([], (0, tslib_1.__read)(getClassList(props)), false));
+    classList.push(getGridRange(props));
     breakpoints.forEach(function (breakpoint) {
         if (props[breakpoint]) {
-            classList = classList.concat.apply(classList, (0, tslib_1.__spreadArray)([], (0, tslib_1.__read)(getClassList(props[breakpoint], breakpoint)), false));
+            classList.push(getGridRange(props[breakpoint], screens[breakpoint]));
         }
     });
     return ((0, jsx_runtime_1.jsx)(box_1.Box, (0, tslib_1.__assign)({ "data-testid": "col" }, (0, utils_1.filterOwnProps)(breakpoints, props), { className: [classList, className, style] }, { children: children }), void 0));

package/helpers/commonStyles.d.ts

@@ -15,3 +15,4 @@ export declare type OutlineProps = {
 };
 export declare const getOutlineStyles: ({ theme }: StyleUtils, props?: OutlineProps | undefined) => StyleObject;
 export declare const getFocusVisibleStyles: (utils: StyleUtils, props?: OutlineProps | undefined) => StyleObject;
+export declare const accessibilityStyles: StyleObject;