@sprinklrjs/spaceweb 11.0.0 → 12.0.0-ci.0

package/esm/helpers/index.js

@@ -1,4 +1,5 @@
 import { __assign, __read } from "tslib";
+import { hexToRgb as hexToRgbArr } from './colors';
 /**
  * Omits properties that starts with `$` (Styletron)
  * @param $props properties
@@ -44,22 +45,23 @@ export var covertCSSVariablesToValue = function (value) {
     }
     return value;
 };
+export var themeTokenToHex = function (token) {
+    var hex = covertCSSVariablesToValue(token);
+    var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
+    var parsed = hex.replace(shorthandRegex, function (m, r, g, b) {
+        return r + r + g + g + b + b;
+    });
+    return parsed;
+};
 /**
  * Converts hexadecimal color to RGB or RGBA (if alpha is provided)
  * @param hex hexadecimal color
  * @param alpha opacity
  */
-export var hex2rgb = function (_hex, alpha) {
-    var hex = covertCSSVariablesToValue(_hex);
-    var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
-    var parsed = hex.replace(shorthandRegex, function (m, r, g, b) {
-        return r + r + g + g + b + b;
-    });
-    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(parsed);
-    if (result) {
-        return alpha
-            ? "rgba(".concat(parseInt(result[1], 16), ", ").concat(parseInt(result[2], 16), ", ").concat(parseInt(result[3], 16), ", ").concat(alpha, ")")
-            : "rgb(".concat(parseInt(result[1], 16), ", ").concat(parseInt(result[2], 16), ", ").concat(parseInt(result[3], 16), ")");
-    }
-    return null;
+export var hex2rgb = function (hex, alpha) {
+    var convertedHex = covertCSSVariablesToValue(hex);
+    if (!/^#[0-9a-f]{6}$/i.test(convertedHex))
+        return null;
+    var parsed = hexToRgbArr(convertedHex);
+    return alpha ? "rgba(".concat(parsed.join(', '), ", ").concat(alpha, ")") : "rgb(".concat(parsed.join(', '), ")");
 };

package/esm/helpers/styletron.d.ts

@@ -1,23 +0,0 @@
-/// <reference types="react" />
-/**
- * @deprecated use spaceweb/styled
- */
-export declare const styled: {
-    <C extends keyof JSX.IntrinsicElements | import("react").ComponentType<any>, P extends {}, Theme = ThemeT>(component: C, style: import("styletron-standard").StyleObject | ((props: Omit<P, "$theme"> & {
-        $theme: Theme;
-    }) => import("styletron-standard").StyleObject)): import("styletron-react").StyletronComponent<C, P>;
-    <C_1 extends keyof JSX.IntrinsicElements | import("react").ComponentType<any>>(component: C_1, style: import("styletron-standard").StyleObject): import("styletron-react").StyletronComponent<C_1, {}>;
-};
-/**
- * @deprecated
- */
-export declare const withStyle: {
-    <C extends import("styletron-react").StyletronComponent<any, any>, P extends {}, Theme = ThemeT>(component: C, style: import("styletron-standard").StyleObject | ((props: Omit<P, "$theme"> & {
-        $theme: Theme;
-    } & (C extends import("styletron-react").StyletronComponent<infer CC, infer PP> ? PP : never)) => import("styletron-standard").StyleObject)): C extends import("styletron-react").StyletronComponent<infer CC_1, infer PP_1> ? import("styletron-react").StyletronComponent<CC_1, P & PP_1> : never;
-    <C_1 extends import("styletron-react").StyletronComponent<any, any>>(component: C_1, style: import("styletron-standard").StyleObject): C_1;
-};
-/**
- * @deprecated use spaceweb/useStyle
- */
-export declare const useStyletron: () => [(a: import("styletron-standard").StyleObject) => string, ThemeT];

package/esm/helpers/styletron.js

@@ -1,13 +0,0 @@
-import { createThemedStyled, createThemedUseStyletron, createThemedWithStyle } from 'baseui';
-/**
- * @deprecated use spaceweb/styled
- */
-export var styled = createThemedStyled(); // remove once spaceweb/styled provides props to style callback
-/**
- * @deprecated
- */
-export var withStyle = createThemedWithStyle();
-/**
- * @deprecated use spaceweb/useStyle
- */
-export var useStyletron = createThemedUseStyletron();

package/esm/helpers/themeHelpers.d.ts

@@ -1,4 +1,6 @@
 import { Theme } from '@sprinklrjs/spaceweb-themes/types';
 import { Size } from '../types';
+export declare const isDarkTheme: (theme: any) => boolean;
 export declare const getComponentTheme: (theme: Theme, componentName: string) => any;
 export declare const getComponentSizeTheme: (theme: Theme, componentName: string, size: Size | undefined, defaultSize: Size) => any;
+export declare const getDefaultSize: (theme: Theme) => 'md' | 'xxxs';

package/esm/helpers/themeHelpers.js

@@ -1,5 +1,7 @@
+export var isDarkTheme = function (theme) { var _a; return (_a = theme === null || theme === void 0 ? void 0 : theme.name) === null || _a === void 0 ? void 0 : _a.includes('dark'); };
 export var getComponentTheme = function (theme, componentName) { return theme[componentName]; };
 var sizeAdapter = {
+    xxxxs: 'sizeXxxxs',
     xxxs: 'sizeXxxs',
     xxs: 'sizeXxs',
     xs: 'sizeXs',
@@ -17,3 +19,15 @@ export var getComponentSizeTheme = function (theme, componentName, size, default
     var componentTheme = (_a = getComponentTheme(theme, componentName)) !== null && _a !== void 0 ? _a : {};
     return (_b = componentTheme[sizeAdapter[size !== null && size !== void 0 ? size : defaultSize]]) !== null && _b !== void 0 ? _b : componentTheme[sizeAdapter[defaultSize]];
 };
+export var getDefaultSize = function (theme) {
+    switch (theme.density) {
+        case 'COMFORTABLE':
+            return 'md';
+        case 'SPACIOUS':
+            return 'md';
+        case 'COMPACT':
+            return 'xxxs';
+        default:
+            return 'md';
+    }
+};

package/esm/hooks/useAutoFocus.js

@@ -46,6 +46,12 @@ var useAutoFocus = function (_a) {
         try {
             refObj.current.focus({ preventScroll: true });
             refObj.current.setSelectionRange(position, position);
+            // moves cursor at the end of the text in input & textarea
+            // this would have been handled by browser, but we have to do it explicitly because of preventScroll option in ref.focus
+            if (position === refObj.current.value.length) {
+                refObj.current.scrollLeft = refObj.current.scrollWidth;
+                refObj.current.scrollTop = refObj.current.scrollHeight;
+            }
         }
         catch (err) {
             if (__DEV__) {

package/esm/hooks/useFocusVisible.js

@@ -1,6 +1,6 @@
 import { __read } from "tslib";
 import { useState, useCallback } from 'react';
-import { isFocusVisible } from 'baseui/utils/focusVisible';
+import { isFocusVisible } from '../baseui/utils/focusVisible';
 import useCombinedHandler from './useCombinedHandler';
 export var useFocusVisible = function (props) {
     var _a = __read(useState(false), 2), $isFocusVisible = _a[0], setIsFocusVisible = _a[1];

package/esm/hooks/useHasMounted.d.ts

@@ -0,0 +1,2 @@
+declare const useHasMounted: () => boolean;
+export { useHasMounted };

package/esm/hooks/useHasMounted.js

@@ -0,0 +1,11 @@
+import { __read } from "tslib";
+import { useEffect } from 'react';
+import { useTransitionState } from './useTransitionState';
+var useHasMounted = function () {
+    var _a = __read(useTransitionState(false), 2), hasMounted = _a[0], setHasMounted = _a[1];
+    useEffect(function () {
+        setHasMounted(true);
+    }, [setHasMounted]);
+    return hasMounted;
+};
+export { useHasMounted };

package/esm/hooks/useMatchMedia.js

@@ -26,11 +26,22 @@ var useMedia = function (query, defaultState) {
             }
             setState(!!mediaQueryList.matches);
         };
-        mediaQueryList.addEventListener('change', onChange);
+        // addListener is deprecated but older version of safari still have not implemented addEventListener so adding check
+        if ('addEventListener' in mediaQueryList) {
+            mediaQueryList.addEventListener('change', onChange);
+        }
+        else {
+            mediaQueryList.addListener(onChange);
+        }
         setState(mediaQueryList.matches);
         return function () {
             mounted = false;
-            mediaQueryList.removeEventListener('change', onChange);
+            if ('removeEventListener' in mediaQueryList) {
+                mediaQueryList.removeEventListener('change', onChange);
+            }
+            else {
+                mediaQueryList.removeListener(onChange);
+            }
         };
     }, [query]);
     return state;

package/esm/hooks/usePreferredReducedMotion.d.ts

@@ -0,0 +1,2 @@
+declare const usePreferredReducedMotion: () => boolean;
+export default usePreferredReducedMotion;

package/esm/hooks/usePreferredReducedMotion.js

@@ -0,0 +1,9 @@
+import { useMemo } from 'react';
+var usePreferredReducedMotion = function () {
+    return useMemo(function () {
+        return typeof window !== 'undefined' &&
+            'matchMedia' in window &&
+            window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    }, []);
+};
+export default usePreferredReducedMotion;

package/esm/hooks/useTransitionState.d.ts

@@ -0,0 +1,4 @@
+import { useState } from 'react';
+declare type UseTransitionState = typeof useState;
+export declare const useTransitionState: UseTransitionState;
+export {};

package/esm/hooks/useTransitionState.js

@@ -0,0 +1,21 @@
+import { __read, __spreadArray } from "tslib";
+import { useCallback, useState, startTransition } from 'react';
+// eslint-disable-next-line arrow-parens
+export var useTransitionState = function () {
+    var params = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        params[_i] = arguments[_i];
+    }
+    var _a = __read(useState.apply(void 0, __spreadArray([], __read(params), false)), 2), state = _a[0], setState = _a[1];
+    var setTransitionSet = useCallback(function (val) {
+        if (startTransition) {
+            startTransition(function () {
+                setState(val);
+            });
+        }
+        else {
+            setState(val);
+        }
+    }, []);
+    return [state, setTransitionSet];
+};

package/esm/hooks/useUniqueId.d.ts

@@ -1,3 +1,6 @@
+import * as React from 'react';
 declare const useUniqueId: () => string;
-export declare const getUniqueId: () => string;
+export declare const UniqueIdConsumer: ({ children }: {
+    children: (id: string) => React.ReactElement;
+}) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
 export default useUniqueId;

package/esm/hooks/useUniqueId.js

@@ -1,6 +1,8 @@
-import _uniqueId from 'lodash/uniqueId';
-import { useMemo } from 'react';
-var PREFIX = 'sw-id--';
-var useUniqueId = function () { return useMemo(function () { return _uniqueId(PREFIX); }, []); };
-export var getUniqueId = function () { return _uniqueId(PREFIX); };
+import { useUID as useReactUID } from 'react-uid';
+import * as React from 'react';
+var useUniqueId = React.useId ? function () { return React.useId(); } : function () { return useReactUID(); };
+export var UniqueIdConsumer = function (_a) {
+    var children = _a.children;
+    return children(useUniqueId());
+};
 export default useUniqueId;

package/esm/icon/components/alert-solid.js

@@ -1,6 +1,8 @@
 import { __assign } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useStyle } from '../../style';
 import Icon from '../icon';
 export default function AlertSolid(props) {
+    var _a = useStyle(), theme = _a.theme, isRTL = _a.isRTL;
     return (_jsx(Icon, __assign({ viewBox: "0 0 14 14", "data-icon-name": "AlertSolid" }, props, { children: _jsx("path", { d: "M7.063.012a6.994 6.994 0 1 0 6.994 6.994A6.996 6.996 0 0 0 7.063.012zm0 7.693a.701.701 0 0 1-.7-.699V4.21a.701.701 0 0 1 .7-.7.701.701 0 0 1 .7.7v2.797a.701.701 0 0 1-.7.7zm0 2.798a.701.701 0 0 1-.7-.7.701.701 0 0 1 .7-.699.701.701 0 0 1 .7.7.701.701 0 0 1-.7.699z" }, void 0) }), void 0));
 }

package/esm/icon/components/alert.js

@@ -1,6 +1,8 @@
 import { __assign } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useStyle } from '../../style';
 import Icon from '../icon';
 export default function Alert(props) {
+    var _a = useStyle(), theme = _a.theme, isRTL = _a.isRTL;
     return (_jsxs(Icon, __assign({ viewBox: "0 0 12 12", "data-icon-name": "Alert" }, props, { children: [_jsx("path", { d: "M5.904 6.5a.5.5 0 0 1-.5-.5V3.25a.5.5 0 1 1 1 0V6a.5.5 0 0 1-.5.5z" }, void 0), _jsx("circle", { cx: "5.904", cy: "8.161", r: ".589" }, void 0), _jsx("path", { d: "M6 12c-3.308 0-6-2.69-6-6s2.692-6 6-6 6 2.692 6 6-2.691 6-6 6zM6 1C3.244 1 1 3.243 1 6s2.244 5 5 5 5-2.243 5-5-2.243-5-5-5z" }, void 0)] }), void 0));
 }

package/esm/icon/components/calendar-solid.js

@@ -1,6 +1,8 @@
 import { __assign } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useStyle } from '../../style';
 import Icon from '../icon';
 export default function CalendarSolid(props) {
+    var _a = useStyle(), theme = _a.theme, isRTL = _a.isRTL;
     return (_jsx(Icon, __assign({ viewBox: "0 0 15 15", "data-icon-name": "CalendarSolid" }, props, { children: _jsx("path", { d: "M12.4 1.6c.9 0 1.7.8 1.7 1.7v1.2H0V3.3c0-.9.8-1.7 1.7-1.7h.9V0h1.6v1.6h5.6V0h1.6v1.6h1zM0 13.4V6.1h14.1v7.3c0 .9-.8 1.6-1.7 1.6H1.7C.8 15 0 14.3 0 13.4z" }, void 0) }), void 0));
 }

package/esm/icon/components/chevron-down.js

@@ -1,6 +1,8 @@
 import { __assign } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useStyle } from '../../style';
 import Icon from '../icon';
 export default function ChevronDown(props) {
+    var _a = useStyle(), theme = _a.theme, isRTL = _a.isRTL;
     return (_jsx(Icon, __assign({ viewBox: "0 0 14 14", "data-icon-name": "ChevronDown" }, props, { children: _jsx("path", { d: "M7 10.922a.84.84 0 01-.597-.248L.247 4.518a.843.843 0 111.194-1.192L7 8.884l5.56-5.558a.844.844 0 011.193 1.192l-6.156 6.156a.84.84 0 01-.597.248z" }, void 0) }), void 0));
 }

package/esm/icon/components/chevron-left.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { IconProps } from '../types';
+export default function ChevronLeft(props: IconProps): React.ReactElement;

package/esm/icon/components/chevron-left.js

@@ -0,0 +1,8 @@
+import { __assign } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useStyle } from '../../style';
+import Icon from '../icon';
+export default function ChevronLeft(props) {
+    var _a = useStyle(), theme = _a.theme, isRTL = _a.isRTL;
+    return (_jsx(Icon, __assign({ viewBox: "0 0 14 14", "data-icon-name": "ChevronLeft" }, props, { className: isRTL ? [{ transform: 'scaleX(-1)' }, props.className] : props.className }, { children: _jsx("path", { d: "M10.693 13.728a.931.931 0 00-.001-1.316L5.282 7l5.41-5.41A.93.93 0 009.379.271h-.001l-6.07 6.07a.931.931 0 000 1.316l6.069 6.07a.931.931 0 001.316 0z" }, void 0) }), void 0));
+}

package/esm/icon/components/chevron-right.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { IconProps } from '../types';
+export default function ChevronRight(props: IconProps): React.ReactElement;

package/esm/icon/components/chevron-right.js

@@ -0,0 +1,8 @@
+import { __assign } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useStyle } from '../../style';
+import Icon from '../icon';
+export default function ChevronRight(props) {
+    var _a = useStyle(), theme = _a.theme, isRTL = _a.isRTL;
+    return (_jsx(Icon, __assign({ viewBox: "0 0 14 14", "data-icon-name": "ChevronRight" }, props, { className: isRTL ? [{ transform: 'scaleX(-1)' }, props.className] : props.className }, { children: _jsx("path", { d: "M3.307.272a.931.931 0 00.001 1.316L8.718 7l-5.41 5.41a.93.93 0 001.313 1.318h.001l6.07-6.07a.931.931 0 000-1.316L4.623.272a.931.931 0 00-1.316 0z" }, void 0) }), void 0));
+}

package/esm/icon/components/close.js

@@ -1,6 +1,8 @@
 import { __assign } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useStyle } from '../../style';
 import Icon from '../icon';
 export default function Close(props) {
+    var _a = useStyle(), theme = _a.theme, isRTL = _a.isRTL;
     return (_jsx(Icon, __assign({ viewBox: "0 0 14 14", "data-icon-name": "Close" }, props, { children: _jsx("path", { d: "M12.8 12.7c.3-.3.3-.8 0-1L8 7l4.6-4.7c.3-.3.3-.8 0-1.1-.3-.3-.8-.3-1.1 0L6.9 6 2.3 1.3C2 1 1.5 1 1.2 1.3s-.3.7 0 1L5.9 7l-4.7 4.7c-.3.3-.3.8 0 1.1.3.3.8.3 1 0l4.7-4.7 4.7 4.6c.3.3.8.3 1.2 0z" }, void 0) }), void 0));
 }

package/esm/icon/components/error-clr.js

@@ -1,6 +1,8 @@
 import { __assign } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useStyle } from '../../style';
 import Icon from '../icon';
 export default function ErrorClr(props) {
+    var _a = useStyle(), theme = _a.theme, isRTL = _a.isRTL;
     return (_jsxs(Icon, __assign({ viewBox: "0 0 14 14", "data-icon-name": "ErrorClr" }, props, { children: [_jsx("path", { fill: "#FF6060", d: "M6.304 1.636c.385-.63 1.008-.63 1.391-.002l2.147 3.52 3.987 6.541c.385.63.097 1.142-.64 1.142H.81c-.737 0-1.024-.51-.639-1.142l6.133-10.06z" }, void 0), _jsx("path", { fill: "#FFF", d: "M6.69 9.895h.843v.841H6.69zm0-4.624h.843v3.783H6.69z" }, void 0)] }), void 0));
 }

package/esm/icon/components/error-solid.js

@@ -1,6 +1,8 @@
 import { __assign } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useStyle } from '../../style';
 import Icon from '../icon';
 export default function ErrorSolid(props) {
+    var _a = useStyle(), theme = _a.theme, isRTL = _a.isRTL;
     return (_jsx(Icon, __assign({ viewBox: "0 0 14 11.77", "data-icon-name": "ErrorSolid" }, props, { children: _jsx("path", { d: "M13.87 10.4 7.77.42a.9.9 0 0 0-1.54 0L.13 10.4a.9.9 0 0 0 .78 1.38h12.18a.9.9 0 0 0 .78-1.38zM6.49 3.44a.46.46 0 0 1 .51-.4.46.46 0 0 1 .5.4v2.83a.46.46 0 0 1-.5.4.46.46 0 0 1-.5-.4zM7 9.29a.76.76 0 1 1 .76-.76.76.76 0 0 1-.76.76z", fillRule: "evenodd" }, void 0) }), void 0));
 }

package/esm/icon/components/error.js

@@ -1,6 +1,8 @@
 import { __assign } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useStyle } from '../../style';
 import Icon from '../icon';
 export default function Error(props) {
+    var _a = useStyle(), theme = _a.theme, isRTL = _a.isRTL;
     return (_jsxs(Icon, __assign({ viewBox: "0 0 14 11.98", "data-icon-name": "Error" }, props, { children: [_jsx("path", { d: "M13.78 9.73L8.26.7a1.48 1.48 0 00-2.53 0L.22 9.73a1.48 1.48 0 001.26 2.25h11.04a1.48 1.48 0 001.26-2.25zm-1 1.2a.5.5 0 01-.26.06H1.48a.5.5 0 01-.42-.75l5.52-9.02A.5.5 0 017 1a.49.49 0 01.26.07.48.48 0 01.16.16l5.52 9.02a.5.5 0 01-.16.68z" }, void 0), _jsx("path", { d: "M7 7.6a.44.44 0 00.48-.37V4.55A.44.44 0 007 4.17a.44.44 0 00-.48.38v2.68A.44.44 0 007 7.6zM7 8.63a.72.72 0 10.72.72.72.72 0 00-.72-.72z" }, void 0)] }), void 0));
 }

package/esm/icon/components/imagePreview.js

@@ -1,6 +1,8 @@
 import { __assign } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useStyle } from '../../style';
 import Icon from '../icon';
 export default function ImagePreview(props) {
+    var _a = useStyle(), theme = _a.theme, isRTL = _a.isRTL;
     return (_jsxs(Icon, __assign({ viewBox: "0 0 14 14", "data-icon-name": "ImagePreview" }, props, { children: [_jsx("circle", { fillRule: "evenodd", clipRule: "evenodd", cx: "12.5", cy: "3.35", r: "1.5" }, void 0), _jsx("path", { d: "M9.33 14H0l3.87-5.5c.36-.52 1.29-.51 1.64 0L9.33 14zm1.52-.01l-1.52-2.18 1.2-1.4c.09-.13.25-.22.3-.19.11 0 .22.06.3.17L14 14h-3.15v-.01z" }, void 0)] }), void 0));
 }

package/esm/icon/components/info.js

@@ -1,6 +1,8 @@
 import { __assign } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useStyle } from '../../style';
 import Icon from '../icon';
 export default function Info(props) {
+    var _a = useStyle(), theme = _a.theme, isRTL = _a.isRTL;
     return (_jsx(Icon, __assign({ viewBox: "0 0 14 14", "data-icon-name": "Info" }, props, { children: _jsx("path", { d: "M9.627 11.36a.196.196 0 0 0-.245-.067c-.962.455-2.053.936-2.267.978a.189.189 0 0 1-.025-.029.256.256 0 0 1-.043-.157c0-.544.41-2.198 1.22-4.916.682-2.284.76-2.757.76-2.914a.742.742 0 0 0-.268-.592c-.166-.138-.4-.208-.692-.208-.488 0-1.052.185-1.727.566-.653.369-1.382.993-2.166 1.857a.196.196 0 0 0 .219.312c.275-.112 1.658-.678 1.86-.805.164-.104.307-.156.424-.156a.14.14 0 0 1 .01 0c.002.008.004.02.004.037 0 .119-.025.26-.073.418-1.179 3.819-1.751 6.16-1.751 7.156 0 .352.097.635.29.842.197.211.462.318.788.318.348 0 .77-.145 1.294-.444.506-.29 1.278-.925 2.36-1.944a.195.195 0 0 0 .028-.253zM9.589.297A.985.985 0 0 0 8.857 0c-.366 0-.684.144-.946.429a1.46 1.46 0 0 0-.389 1.021c0 .314.097.575.287.774a.96.96 0 0 0 .722.305c.35 0 .667-.153.94-.453a1.49 1.49 0 0 0 .406-1.033c0-.299-.097-.55-.288-.746z", fillRule: "evenodd", clipRule: "evenodd" }, void 0) }), void 0));
 }

package/esm/icon/components/noPreview.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { IconProps } from '../types';
+export default function NoPreview(props: IconProps): React.ReactElement;

package/esm/icon/components/noPreview.js

@@ -0,0 +1,8 @@
+import { __assign } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useStyle } from '../../style';
+import Icon from '../icon';
+export default function NoPreview(props) {
+    var _a = useStyle(), theme = _a.theme, isRTL = _a.isRTL;
+    return (_jsx(Icon, __assign({ viewBox: "0 0 14 14", "data-icon-name": "NoPreview" }, props, { children: _jsx("path", { d: "M7 3.67a3.143 3.143 0 013.03 4.11l1.946 1.947A7.51 7.51 0 0014 6.845 7.533 7.533 0 004.684 2.44l1.38 1.381A3.271 3.271 0 017 3.669zM1.088 1.543a.634.634 0 000 .897l1.254 1.254A7.568 7.568 0 000 6.85a7.509 7.509 0 009.743 4.251l1.73 1.73a.634.634 0 00.898-.896L1.99 1.544a.641.641 0 00-.903 0zM7 10.033A3.183 3.183 0 013.818 6.85a3.125 3.125 0 01.312-1.36l1 1a2.185 2.185 0 00-.04.362A1.907 1.907 0 007 8.761a1.715 1.715 0 00.363-.045l.999.999A3.063 3.063 0 017 10.033zM8.89 6.64a1.89 1.89 0 00-1.68-1.68z" }, void 0) }), void 0));
+}

package/esm/icon/components/overview.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { IconProps } from '../types';
+export default function Overview(props: IconProps): React.ReactElement;

package/esm/icon/components/overview.js

@@ -0,0 +1,8 @@
+import { __assign } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useStyle } from '../../style';
+import Icon from '../icon';
+export default function Overview(props) {
+    var _a = useStyle(), theme = _a.theme, isRTL = _a.isRTL;
+    return (_jsxs(Icon, __assign({ viewBox: "0 0 14 14", "data-icon-name": "Overview" }, props, { children: [_jsx("path", { d: "M7 4.955a1.91 1.91 0 101.91 1.91A1.907 1.907 0 007 4.954z" }, void 0), _jsx("path", { d: "M7 2.092a7.526 7.526 0 00-7 4.772 7.52 7.52 0 0014 0 7.526 7.526 0 00-7-4.772zm0 7.954a3.182 3.182 0 113.182-3.182A3.183 3.183 0 017 10.046z" }, void 0)] }), void 0));
+}

package/esm/icon/components/play-video.js

@@ -1,6 +1,8 @@
 import { __assign } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useStyle } from '../../style';
 import Icon from '../icon';
 export default function PlayVideo(props) {
+    var _a = useStyle(), theme = _a.theme, isRTL = _a.isRTL;
     return (_jsxs(Icon, __assign({ viewBox: "0 0 12 12", "data-icon-name": "PlayVideo" }, props, { children: [_jsx("path", { d: "M6 12c-3.309 0-6-2.691-6-6s2.691-6 6-6 6 2.691 6 6-2.691 6-6 6zM6 .5A5.506 5.506 0 00.5 6c0 3.032 2.467 5.5 5.5 5.5 3.032 0 5.5-2.468 5.5-5.5C11.5 2.967 9.032.5 6 .5z" }, void 0), _jsx("path", { d: "M4.624 3.906l3.533 2.04c.08.046.08.163 0 .21l-3.533 2.04a.121.121 0 01-.182-.106V4.011c0-.093.101-.152.182-.105z" }, void 0)] }), void 0));
 }

package/esm/icon/components/reset-color.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { IconProps } from '../types';
+export default function ResetColor(props: IconProps): React.ReactElement;

package/esm/icon/components/reset-color.js

@@ -0,0 +1,8 @@
+import { __assign } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useStyle } from '../../style';
+import Icon from '../icon';
+export default function ResetColor(props) {
+    var _a = useStyle(), theme = _a.theme, isRTL = _a.isRTL;
+    return (_jsx(Icon, __assign({ viewBox: "0 0 12 12", "data-icon-name": "ResetColor" }, props, { children: _jsx("path", { d: "M4.44444 1.66669L4.69634 1.30338C5.11546 0.698908 6.02178 0.738542 6.38652 1.3773L7.57013 3.45004C8.31387 4.7577 8.83652 6.0973 9.18519 7.22231L4.44444 1.66669ZM3.14308 4.28626L1.10565 1.99387C0.677217 1.51182 1.01942 0.749859 1.66434 0.749859C1.87784 0.749859 2.08116 0.841161 2.223 1.00074L10.8943 10.756C11.3227 11.238 10.9806 12 10.3357 12C10.1222 12 9.91885 11.9087 9.77701 11.7491L8.73097 10.5722C7.94302 11.4637 6.73598 12 5.6 12C3.68 12 1.6 10.5469 1.6 8.33438C1.6 6.89807 2.30094 5.71492 3.14308 4.28626Z" }, void 0) }), void 0));
+}

package/esm/icon/components/search.js

@@ -1,6 +1,8 @@
 import { __assign } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useStyle } from '../../style';
 import Icon from '../icon';
 export default function Search(props) {
+    var _a = useStyle(), theme = _a.theme, isRTL = _a.isRTL;
     return (_jsx(Icon, __assign({ viewBox: "0 0 12 12", "data-icon-name": "Search" }, props, { children: _jsx("path", { d: "M11.854 11.149L7.75 7.037a4.32 4.32 0 00.946-2.68A4.356 4.356 0 004.348 0a4.357 4.357 0 000 8.713 4.299 4.299 0 002.7-.969l4.102 4.11a.496.496 0 00.704 0 .5.5 0 000-.705zM4.348 7.716a3.36 3.36 0 010-6.719 3.36 3.36 0 010 6.719z" }, void 0) }), void 0));
 }

package/esm/icon/components/tick.js

@@ -1,6 +1,8 @@
 import { __assign } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useStyle } from '../../style';
 import Icon from '../icon';
 export default function Tick(props) {
+    var _a = useStyle(), theme = _a.theme, isRTL = _a.isRTL;
     return (_jsx(Icon, __assign({ viewBox: "0 0 14 14", "data-icon-name": "Tick" }, props, { children: _jsx("path", { d: "M4.792 12.037a.935.935 0 0 1-.657-.269L.28 7.975A.936.936 0 0 1 1.593 6.64L4.79 9.784l7.615-7.556a.936.936 0 0 1 1.32 1.329l-8.272 8.208a.935.935 0 0 1-.66.272z" }, void 0) }), void 0));
 }

package/esm/icon/components/tickCircle-solid.js

@@ -1,6 +1,8 @@
 import { __assign } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useStyle } from '../../style';
 import Icon from '../icon';
 export default function TickCircleSolid(props) {
+    var _a = useStyle(), theme = _a.theme, isRTL = _a.isRTL;
     return (_jsx(Icon, __assign({ viewBox: "0 0 14 14", "data-icon-name": "TickCircleSolid" }, props, { children: _jsx("path", { d: "m9.53 4.44-3.64 3.6-1.42-1.4a.72.72 0 1 0-1 1.03l1.92 1.9a.72.72 0 0 0 1.01 0l4.14-4.11a.72.72 0 1 0-1.01-1.02zM7 0a7 7 0 1 1-7 7 7 7 0 0 1 7-7z", fillRule: "evenodd" }, void 0) }), void 0));
 }

package/esm/icon/components/user.js

@@ -1,6 +1,8 @@
 import { __assign } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useStyle } from '../../style';
 import Icon from '../icon';
 export default function User(props) {
+    var _a = useStyle(), theme = _a.theme, isRTL = _a.isRTL;
     return (_jsxs(Icon, __assign({ viewBox: "0 0 14 14", "data-icon-name": "User" }, props, { children: [_jsx("path", { d: "M13.823 13.946c.003-.081.024-.159.024-.24a6.847 6.847 0 10-13.694-.001c0 .082.021.16.024.241z" }, void 0), _jsx("circle", { cx: "7", cy: "2.889", r: "2.835" }, void 0)] }), void 0));
 }

package/esm/icon/components/video-non-playable.js

@@ -1,6 +1,8 @@
 import { __assign } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useStyle } from '../../style';
 import Icon from '../icon';
 export default function VideoNonPlayable(props) {
+    var _a = useStyle(), theme = _a.theme, isRTL = _a.isRTL;
     return (_jsx(Icon, __assign({ viewBox: "0 0 14 14", "data-icon-name": "VideoNonPlayable" }, props, { children: _jsx("path", { d: "M1 3.72v6.56a.092.092 0 00.09.1h.75l-.57 1h-.18A1.095 1.095 0 010 10.28V3.72a1.095 1.095 0 011.09-1.1h5.17l-.57 1h-4.6a.092.092 0 00-.09.1zm13 5.55a.734.734 0 01-.73.73.721.721 0 01-.34-.09L10.47 8.8v1.48a1.095 1.095 0 01-1.09 1.1H3.65l-.91 1.63a.59.59 0 01-.52.31.603.603 0 01-.29-.08.578.578 0 01-.21-.2l.94-1.66.57-1 3.84-6.76.57-1L8.62.9a.191.191 0 00.03-.08.67.67 0 01.18.07.595.595 0 01.23.81l-.51.92h.83a1.095 1.095 0 011.09 1.1v1.46l2.45-1.12a.707.707 0 01.34-.08.721.721 0 01.73.73zM9.48 3.72a.1.1 0 00-.1-.1H7.99l-3.78 6.76h5.17a.1.1 0 00.1-.1zM13 5.13l-2.5 1.14v1.45L13 8.85z" }, void 0) }), void 0));
 }

package/esm/icon/constants.d.ts

@@ -0,0 +1,4 @@
+export declare const SVG_ICON_INTENTS: {
+    DEFAULT: string;
+    AI: string;
+};

package/esm/icon/constants.js

@@ -0,0 +1,4 @@
+export var SVG_ICON_INTENTS = {
+    DEFAULT: 'default',
+    AI: 'ai',
+};

package/esm/icon/icon.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { IconProps } from './types';
-declare const Icon: import("react").ForwardRefExoticComponent<Pick<IconProps, string> & import("react").RefAttributes<HTMLElement>>;
+declare const Icon: import("react").ForwardRefExoticComponent<Omit<IconProps, "ref"> & import("react").RefAttributes<HTMLElement>>;
 export default Icon;

package/esm/icon/icon.js

@@ -2,12 +2,13 @@ import { __assign, __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { StyledSvg } from './styled-components';
+import { SVG_ICON_INTENTS } from './constants';
 var Icon = forwardRef(function (props, ref) {
-    var children = props.children, title = props.title, size = props.size, restProps = __rest(props, ["children", "title", "size"]);
+    var children = props.children, intent = props.intent, title = props.title, size = props.size, className = props.className, restProps = __rest(props, ["children", "intent", "title", "size", "className"]);
     var sharedProps = {
         $size: size,
     };
-    return (_jsxs(StyledSvg, __assign({ "data-spaceweb": "icon", ref: ref }, sharedProps, restProps, { children: [title ? _jsx("title", { children: title }, void 0) : null, children] }), void 0));
+    return (_jsxs(StyledSvg, __assign({ className: [intent === SVG_ICON_INTENTS.AI ? { fill: 'url(#aiGradientID)' } : '', className], "data-spaceweb": "icon", ref: ref }, sharedProps, restProps, { children: [title ? _jsx("title", { children: title }, void 0) : null, children] }), void 0));
 });
 Icon.defaultProps = {
     size: 12,

package/esm/icon/types.d.ts

@@ -1,10 +1,14 @@
 import * as React from 'react';
 import { SpacewebComponentProps } from '../types';
+import { SVG_ICON_INTENTS } from './constants';
 export declare type Size = number;
+export declare type IntentType = (typeof SVG_ICON_INTENTS)[keyof typeof SVG_ICON_INTENTS];
 export declare type IconProps = SpacewebComponentProps<React.SVGAttributes<SVGSVGElement>> & {
     /** Size of element, will be passed to the svg width/height style. Can also be a value included in */
     size?: Size;
     /** Allows you to set the SVG `<title>` label, which is used for accessibility */
     title?: string;
+    intent?: IntentType;
     ref?: React.Ref<HTMLElement>;
+    animate?: boolean;
 } & Record<string, any>;

package/esm/index.d.ts

@@ -1,3 +1,5 @@
 export * from './classNames';
 export * from './spacewebProvider';
 export * from './types';
+import rtlCSSJS from 'rtl-css-js';
+export { rtlCSSJS };

package/esm/index.js

@@ -1,3 +1,5 @@
 export * from './classNames';
 export * from './spacewebProvider';
 export * from './types';
+import rtlCSSJS from 'rtl-css-js';
+export { rtlCSSJS };

package/esm/input/InputContainer.d.ts

@@ -0,0 +1,12 @@
+import { ReactElement, ReactNode } from 'react';
+import { ClassName } from '../types';
+import { FocusPosition, SharedProps } from './types';
+import { Override } from '../overrides';
+export declare const InputContainer: ({ autoFocus, children, overrides, className, }: {
+    autoFocus?: FocusPosition | undefined;
+    children: ReactNode;
+    overrides?: {
+        Root: Override<SharedProps>;
+    } | undefined;
+    className?: ClassName;
+} & Partial<SharedProps>) => ReactElement;

package/esm/input/InputContainer.js

@@ -0,0 +1,18 @@
+import { __assign, __read } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useState } from 'react';
+import { Box } from '../box';
+import { useOverrides } from '../overrides';
+import { getInputContainerStyles } from './styled-components';
+export var InputContainer = function (_a) {
+    var autoFocus = _a.autoFocus, children = _a.children, overrides = _a.overrides, className = _a.className;
+    var _b = __read(useState(autoFocus !== null && autoFocus !== void 0 ? autoFocus : false), 2), isFocused = _b[0], setIsFocused = _b[1];
+    var _c = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Root, Box), 2), Root = _c[0], rootProps = _c[1];
+    var handleFocus = useCallback(function () {
+        setIsFocused(true);
+    }, []);
+    var handleBlur = useCallback(function () {
+        setIsFocused(false);
+    }, []);
+    return (_jsx(Root, __assign({ className: [getInputContainerStyles, className], onFocus: handleFocus, onBlur: handleBlur, "$isFocused": isFocused }, rootProps, { children: children }), void 0));
+};

package/esm/input/basewebAdapters.d.ts

@@ -1,7 +1,7 @@
 import { InputProps, StatefulInputProps } from './types';
-import { BaseInputOverrides } from 'baseui/input';
+import { BaseInputOverrides } from '../baseui/input';
 declare type AdapterProps = Omit<InputProps | StatefulInputProps, 'autoFocus'>;
-declare const useInputBasewebAdapter: (props: AdapterProps) => Omit<AdapterProps, "size" | "style" | "className" | "overrides" | "variant" | "intent"> & {
+declare const useInputBasewebAdapter: (props: AdapterProps) => Omit<AdapterProps, "size" | "style" | "className" | "overrides" | "intent" | "variant"> & {
     overrides?: BaseInputOverrides | undefined;
 };
 export default useInputBasewebAdapter;