@sprinklrjs/spaceweb 10.1.0

package/progress/linear/styled-component.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { StyleUtils } from '../../types';
+export declare const getProgressInlineStyles: ({ value, infinite, }: {
+    value?: number | undefined;
+    infinite?: boolean | undefined;
+}) => React.CSSProperties;
+export declare const StyledRoot: import("../../style/styled").StyledComponent;
+export declare const StyledBar: import("../../style/styled").StyledComponent;
+export declare const StyledProgress: import("../../style/styled").StyledComponent;
+export declare const StyledLabel: import("../../style/styled").StyledComponent;
+export declare const progressSegmentStyles: ({ direction }: StyleUtils, { $first, $last }: {
+    $first: any;
+    $last: any;
+}) => string[];

package/progress/linear/styled-component.js

@@ -0,0 +1,72 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.progressSegmentStyles = exports.StyledLabel = exports.StyledProgress = exports.StyledBar = exports.StyledRoot = exports.getProgressInlineStyles = void 0;
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var longHandHelpers_1 = require("../../helpers/longHandHelpers");
+var style_1 = require("../../style");
+var helper_1 = require("../helper");
+//Setting styles inline, in order prevent multiple styletron classes creation
+var BaseProgress = function (_a) {
+    var inlineStyles = _a.inlineStyles, props = (0, tslib_1.__rest)(_a, ["inlineStyles"]);
+    return ((0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ style: inlineStyles }, props), void 0));
+};
+var getProgressInlineStyles = function (_a) {
+    var value = _a.value, infinite = _a.infinite;
+    return (infinite ? {} : { width: "".concat(value, "%") });
+};
+exports.getProgressInlineStyles = getProgressInlineStyles;
+exports.StyledRoot = (0, style_1.styled)('div', 'w-full');
+exports.StyledBar = (0, style_1.styled)('div', 'w-full relative overflow-hidden flex', function (_a, _b) {
+    var theme = _a.theme, px2rem = _a.px2rem;
+    var $backgroundColor = _b.$backgroundColor;
+    return ((0, tslib_1.__assign)({ height: px2rem(6), backgroundColor: $backgroundColor || theme.spr.tag02 }, (0, longHandHelpers_1.borderRadius)(px2rem(3))));
+});
+exports.StyledProgress = (0, style_1.styled)(BaseProgress, 'h-full', function (_a, _b) {
+    var _c, _d, _e;
+    var theme = _a.theme, direction = _a.direction;
+    var $color = _b.$color, $intent = _b.$intent, $value = _b.$value, $infinite = _b.$infinite;
+    var progressStart = direction === 'rtl' ? 'right' : 'left';
+    var progressEnd = direction === 'rtl' ? 'left' : 'right';
+    return (0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)({ backgroundColor: $color || (0, helper_1.getIntentColor)($intent, theme), willChange: 'width' }, (0, longHandHelpers_1.borderRadius)('3px')), { transitionProperty: 'width', transitionTimingFunction: 'ease', transitionDuration: '400ms' }), ($infinite && {
+        width: '100%',
+        position: 'absolute',
+        animationDuration: '2.1s',
+        animationIterationCount: 'infinite',
+        animationTimingFunction: 'cubic-bezier(0.65, 0.815, 0.735, 0.395)',
+        animationName: {
+            '0%': (_c = {},
+                _c[progressStart] = '-200%',
+                _c[progressEnd] = '100%',
+                _c),
+            '60%': (_d = {},
+                _d[progressStart] = '107%',
+                _d[progressEnd] = '-8%',
+                _d),
+            '100%': (_e = {},
+                _e[progressStart] = '107%',
+                _e[progressEnd] = '-8%',
+                _e),
+        },
+    }));
+});
+exports.StyledLabel = (0, style_1.styled)('div', 'spr-text-02 mt-3 typography-l2', { fontVariantNumeric: 'tabular-nums' });
+var progressSegmentStyles = function (_a, _b) {
+    var direction = _a.direction;
+    var $first = _b.$first, $last = _b.$last;
+    var style = [];
+    if (direction === 'rtl') {
+        if (!$first)
+            style.push('rounded-r-0');
+        if (!$last)
+            style.push('rounded-l-0');
+    }
+    else {
+        if (!$first)
+            style.push('rounded-l-0');
+        if (!$last)
+            style.push('rounded-r-0');
+    }
+    return style;
+};
+exports.progressSegmentStyles = progressSegmentStyles;

package/progress/linear/types.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import { Override } from '../../overrides';
+import { ProgressProps, ProgressSharedProps } from '../types';
+export declare type LinearSharedProps = ProgressSharedProps;
+export declare type LinearProgressProps = ProgressProps & {
+    overrides?: {
+        Root?: Override<LinearSharedProps & Record<string, any>>;
+        Bar?: Override<LinearSharedProps & Record<string, any>>;
+        Progress?: Override<LinearSharedProps & Record<string, any>>;
+        Label?: Override<LinearSharedProps & Record<string, any>>;
+    };
+    label?: React.ReactNode | ((props: LinearSharedProps) => React.ReactNode);
+};
+export declare type ProgressSegmentProps = Pick<ProgressProps, 'className' | 'color' | 'intent' | 'value'> & {
+    overrides?: {
+        Progress?: Override<LinearSharedProps & Record<string, any>>;
+    };
+    first?: boolean;
+    last?: boolean;
+};

package/progress/linear/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/progress/package.json

@@ -0,0 +1,4 @@
+{
+  "sideEffects": false,
+  "module": "../esm/progress/index.js"
+}

package/progress/types.d.ts

@@ -0,0 +1,18 @@
+import { ClassName, Intent } from '../types';
+export declare type ProgressSharedProps = {
+    $color?: string;
+    $backgroundColor?: string;
+    $value: number;
+    $intent: Intent;
+    $withLabel: boolean;
+    $infinite?: boolean;
+};
+export declare type ProgressProps = {
+    className?: ClassName;
+    color?: string;
+    backgroundColor?: string;
+    value?: number;
+    intent?: Intent;
+    infinite?: boolean;
+};
+export type { Intent };

package/progress/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/radio/basewebAdapters.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { RadioOverrides, RadioGroupOverrides } from 'baseui/radio';
+import { RadioGroupProps, RadioProps, Size } from './types';
+import { Intent } from '../types';
+export declare const SpaceRadioContext: import("react").Context<{
+    size?: Size | undefined;
+    intent?: Intent | undefined;
+}>;
+export declare function useRadioGroupAdapter<T extends RadioGroupProps>(props: T): {
+    adaptedProps: Omit<T, 'size' | 'overrides' | 'className' | 'style' | 'intent'> & {
+        overrides?: RadioGroupOverrides;
+    };
+};
+export declare const useRadioAdapter: <T extends RadioProps>(props: T) => Omit<T, "style" | "className" | "$outlineColor" | "$outlineWidth" | "$outlineOffset" | "$outlineStyle"> & {
+    overrides: RadioOverrides;
+};

package/radio/basewebAdapters.js

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRadioAdapter = exports.useRadioGroupAdapter = exports.SpaceRadioContext = void 0;
+var tslib_1 = require("tslib");
+var react_1 = require("react");
+var helpers_1 = require("../helpers");
+var useConvertOverrides_1 = require("../helpers/baseui/useConvertOverrides");
+var styled_components_1 = require("./styled-components");
+var context_1 = require("../form-control/context");
+exports.SpaceRadioContext = (0, react_1.createContext)({
+    size: 'md',
+    intent: 'default',
+});
+exports.SpaceRadioContext.displayName = 'SpaceRadioContext';
+function useRadioGroupAdapter(props) {
+    var _a = (0, context_1.useContextualFormProps)(props), size = _a.size, className = _a.className, style = _a.style, overrides = _a.overrides, intent = _a.intent, restProps = (0, tslib_1.__rest)(_a, ["size", "className", "style", "overrides", "intent"]);
+    var convertOverrides = (0, useConvertOverrides_1.useConvertOverrides)({
+        RadioGroupRoot: {
+            style: [className, style],
+        },
+    }, overrides);
+    return { adaptedProps: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, restProps), { overrides: convertOverrides }) };
+}
+exports.useRadioGroupAdapter = useRadioGroupAdapter;
+var useRadioAdapter = function (props) {
+    var _a = (0, react_1.useContext)(exports.SpaceRadioContext), size = _a.size, intent = _a.intent;
+    var className = props.className, style = props.style, $outlineStyle = props.$outlineStyle, $outlineColor = props.$outlineColor, $outlineOffset = props.$outlineOffset, $outlineWidth = props.$outlineWidth, restProps = (0, tslib_1.__rest)(props, ["className", "style", "$outlineStyle", "$outlineColor", "$outlineOffset", "$outlineWidth"]);
+    var sharedProps = (0, helpers_1.add$props)({ size: size, intent: intent });
+    var overrides = (0, useConvertOverrides_1.useConvertOverrides)({
+        Root: {
+            style: [className, style, styled_components_1.getRootStyles],
+            props: sharedProps,
+        },
+        RadioMarkInner: {
+            style: styled_components_1.getRadioMarkInnerStyles,
+            props: sharedProps,
+        },
+        RadioMarkOuter: {
+            style: styled_components_1.getRadioMarkOuterStyles,
+            props: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, sharedProps), (0, helpers_1.add$props)({ $outlineStyle: $outlineStyle, $outlineColor: $outlineColor, $outlineOffset: $outlineOffset, $outlineWidth: $outlineWidth })),
+        },
+        Label: {
+            style: styled_components_1.getRadioLabelStyles,
+            props: sharedProps,
+        },
+        // https://prod-gitlab.sprinklr.com/sprinklr/frontend/spaceweb/-/issues/472 - baseui adds position absolute
+        Input: { style: { position: 'static' } },
+    }, props.overrides);
+    return (0, tslib_1.__assign)((0, tslib_1.__assign)({}, restProps), { overrides: overrides });
+};
+exports.useRadioAdapter = useRadioAdapter;

package/radio/index.d.ts

@@ -0,0 +1,3 @@
+export { Radio, RadioGroup } from './radio';
+export { StatefulRadioGroup, StatefulContainer, StyledRoot, StyledLabel, StyledInput, StyledDescription, StyledRadioMarkInner, StyledRadioMarkOuter, StyledRadioGroupRoot, ALIGN, } from 'baseui/radio';
+export * from './types';

package/radio/index.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ALIGN = exports.StyledRadioGroupRoot = exports.StyledRadioMarkOuter = exports.StyledRadioMarkInner = exports.StyledDescription = exports.StyledInput = exports.StyledLabel = exports.StyledRoot = exports.StatefulContainer = exports.StatefulRadioGroup = exports.RadioGroup = exports.Radio = void 0;
+var tslib_1 = require("tslib");
+var radio_1 = require("./radio");
+Object.defineProperty(exports, "Radio", { enumerable: true, get: function () { return radio_1.Radio; } });
+Object.defineProperty(exports, "RadioGroup", { enumerable: true, get: function () { return radio_1.RadioGroup; } });
+var radio_2 = require("baseui/radio");
+Object.defineProperty(exports, "StatefulRadioGroup", { enumerable: true, get: function () { return radio_2.StatefulRadioGroup; } });
+Object.defineProperty(exports, "StatefulContainer", { enumerable: true, get: function () { return radio_2.StatefulContainer; } });
+Object.defineProperty(exports, "StyledRoot", { enumerable: true, get: function () { return radio_2.StyledRoot; } });
+Object.defineProperty(exports, "StyledLabel", { enumerable: true, get: function () { return radio_2.StyledLabel; } });
+Object.defineProperty(exports, "StyledInput", { enumerable: true, get: function () { return radio_2.StyledInput; } });
+Object.defineProperty(exports, "StyledDescription", { enumerable: true, get: function () { return radio_2.StyledDescription; } });
+Object.defineProperty(exports, "StyledRadioMarkInner", { enumerable: true, get: function () { return radio_2.StyledRadioMarkInner; } });
+Object.defineProperty(exports, "StyledRadioMarkOuter", { enumerable: true, get: function () { return radio_2.StyledRadioMarkOuter; } });
+Object.defineProperty(exports, "StyledRadioGroupRoot", { enumerable: true, get: function () { return radio_2.StyledRadioGroupRoot; } });
+Object.defineProperty(exports, "ALIGN", { enumerable: true, get: function () { return radio_2.ALIGN; } });
+(0, tslib_1.__exportStar)(require("./types"), exports);

package/radio/package.json

@@ -0,0 +1,4 @@
+{
+  "sideEffects": false,
+  "module": "../esm/radio/index.js"
+}

package/radio/radio.d.ts

@@ -0,0 +1,10 @@
+import { ReactElement } from 'react';
+import { RadioGroupProps, RadioProps } from './types';
+export declare const Radio: {
+    (props: RadioProps): ReactElement;
+    displayName: string;
+};
+export declare const RadioGroup: {
+    (props: RadioGroupProps): ReactElement;
+    displayName: string;
+};

package/radio/radio.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RadioGroup = exports.Radio = void 0;
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var radio_1 = require("baseui/radio");
+var react_1 = require("react");
+var basewebAdapters_1 = require("./basewebAdapters");
+// @ts-ignore
+radio_1.Radio.displayName = 'BaseUIRadio';
+// @ts-ignore
+radio_1.RadioGroup.displayName = 'BaseUIRadioGroup';
+var Radio = function (props) {
+    var adaptedProps = (0, basewebAdapters_1.useRadioAdapter)(props);
+    return (0, jsx_runtime_1.jsx)(radio_1.Radio, (0, tslib_1.__assign)({}, adaptedProps), void 0);
+};
+exports.Radio = Radio;
+exports.Radio.displayName = 'Radio';
+var RadioGroup = function (props) {
+    var adaptedProps = (0, basewebAdapters_1.useRadioGroupAdapter)(props).adaptedProps;
+    var memoizedProviderValue = (0, react_1.useMemo)(function () { return ({ size: props.size || 'md', intent: props.intent || 'default' }); }, [
+        props.size,
+        props.intent,
+    ]);
+    return ((0, jsx_runtime_1.jsx)(basewebAdapters_1.SpaceRadioContext.Provider, (0, tslib_1.__assign)({ value: memoizedProviderValue }, { children: (0, jsx_runtime_1.jsx)(radio_1.RadioGroup, (0, tslib_1.__assign)({}, adaptedProps), void 0) }), void 0));
+};
+exports.RadioGroup = RadioGroup;
+exports.RadioGroup.displayName = 'RadioGroup';

package/radio/styled-components.d.ts

@@ -0,0 +1,7 @@
+import { StyleFn } from '../types';
+import { SharedProps } from './types';
+import { OutlineProps } from '../helpers/commonStyles';
+export declare const getRadioMarkInnerStyles: StyleFn<SharedProps>;
+export declare const getRadioMarkOuterStyles: StyleFn<SharedProps & OutlineProps>;
+export declare const getRadioLabelStyles: StyleFn<SharedProps>;
+export declare const getRootStyles: StyleFn<SharedProps>;

package/radio/styled-components.js

@@ -0,0 +1,145 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getRootStyles = exports.getRadioLabelStyles = exports.getRadioMarkOuterStyles = exports.getRadioMarkInnerStyles = void 0;
+var tslib_1 = require("tslib");
+var intentHelper_1 = require("../helpers/intentHelper");
+var commonStyles_1 = require("../helpers/commonStyles");
+var helpers_1 = require("../helpers");
+var getBorderColor = function (utils, props) {
+    var theme = utils.theme;
+    var $disabled = props.$disabled, $intent = props.$intent, $checked = props.$checked, $isHovered = props.$isHovered, $isFocusVisible = props.$isFocusVisible;
+    if ($disabled && $intent !== 'default')
+        return (0, helpers_1.hex2rgb)((0, intentHelper_1.intentColor)(utils, props), '0.5');
+    if (!$checked) {
+        if ($disabled)
+            return theme.spr.icon03;
+        if ($intent !== 'default')
+            return (0, intentHelper_1.intentColor)(utils, props);
+        if ($isHovered || $isFocusVisible)
+            return theme.spr.border06;
+        return theme.spr.border04;
+    }
+    if ($disabled) {
+        return (0, helpers_1.hex2rgb)(theme.spr.focus01, '0.5');
+    }
+    return (0, intentHelper_1.intentColor)(utils, props);
+};
+var getInnerColor = function (utils, props) {
+    var $disabled = props.$disabled, $checked = props.$checked;
+    if (!$checked)
+        return 'transparent';
+    if ($disabled) {
+        if ($checked)
+            return (0, helpers_1.hex2rgb)((0, intentHelper_1.intentColor)(utils, props), '0.5');
+        return 'transparent';
+    }
+    return (0, intentHelper_1.intentColor)(utils, props);
+};
+var getRadioMarkInnerStyles = function (utils, props) {
+    var px2rem = utils.px2rem;
+    var $size = props.$size;
+    var styles = {
+        backgroundColor: getInnerColor(utils, props),
+        height: px2rem(8),
+        width: px2rem(8),
+    };
+    switch ($size) {
+        case 'sm':
+            styles.height = styles.width = px2rem(6);
+            break;
+        case 'lg':
+            styles.height = styles.width = px2rem(10);
+            break;
+        default:
+            break;
+    }
+    return styles;
+};
+exports.getRadioMarkInnerStyles = getRadioMarkInnerStyles;
+var getRadioMarkOuterStyles = function (utils, props) {
+    var px2rem = utils.px2rem, theme = utils.theme;
+    var $checked = props.$checked, $size = props.$size, $isFocusVisible = props.$isFocusVisible, $outlineStyle = props.$outlineStyle, $outlineColor = props.$outlineColor, $outlineOffset = props.$outlineOffset, $outlineWidth = props.$outlineWidth;
+    var styles = (0, tslib_1.__assign)({ boxSizing: 'border-box', borderWidth: $checked ? px2rem(2) : px2rem(1), borderStyle: 'solid', backgroundColor: 'transparent', borderColor: getBorderColor(utils, props), height: px2rem(16), width: px2rem(16) }, ($isFocusVisible
+        ? (0, tslib_1.__assign)({ boxShadow: 'none', transitionDuration: '0ms' }, (0, commonStyles_1.getOutlineStyles)(utils, { $outlineStyle: $outlineStyle, $outlineColor: $outlineColor, $outlineOffset: $outlineOffset, $outlineWidth: $outlineWidth })) : {}));
+    switch ($size) {
+        case 'sm':
+            styles.height = styles.width = px2rem(14);
+            break;
+        case 'lg':
+            styles.height = styles.width = px2rem(18);
+            break;
+        default:
+            break;
+    }
+    return styles;
+};
+exports.getRadioMarkOuterStyles = getRadioMarkOuterStyles;
+var getRadioLabelStyles = function (_a, _b) {
+    var _c;
+    var direction = _a.direction, px2rem = _a.px2rem;
+    var $labelPosition = _b.$labelPosition, $size = _b.$size;
+    var paddingDirection;
+    switch ($labelPosition) {
+        case 'top':
+            paddingDirection = 'Bottom';
+            break;
+        case 'bottom':
+            paddingDirection = 'Top';
+            break;
+        case 'left':
+            paddingDirection = direction === 'rtl' ? 'Left' : 'Right';
+            break;
+        default:
+        case 'right':
+            paddingDirection = direction === 'rtl' ? 'Right' : 'Left';
+            break;
+    }
+    var styles = (_c = {
+            fontSize: px2rem(13)
+        },
+        _c["padding".concat(paddingDirection)] = px2rem(6),
+        _c.wordBreak = 'break-word',
+        _c);
+    switch ($size) {
+        case 'sm':
+            styles.fontSize = px2rem(12);
+            styles["padding".concat(paddingDirection)] = px2rem(6);
+            break;
+        case 'lg':
+            styles.fontSize = px2rem(14);
+            styles["padding".concat(paddingDirection)] = px2rem(8);
+            break;
+        default:
+            break;
+    }
+    return styles;
+};
+exports.getRadioLabelStyles = getRadioLabelStyles;
+var getRootStyles = function (_a, _b) {
+    var _c;
+    var direction = _a.direction, px2rem = _a.px2rem;
+    var $align = _b.$align, $hasDescription = _b.$hasDescription, $size = _b.$size;
+    var isHorizontal = $align === 'horizontal';
+    var directionMargin = direction === 'rtl' ? 'Left' : 'Right';
+    var styles = (_c = {},
+        _c["margin".concat(directionMargin)] = isHorizontal ? px2rem(30) : undefined,
+        _c.marginTop = px2rem(6),
+        _c.marginBottom = $hasDescription && !isHorizontal ? undefined : px2rem(6),
+        _c);
+    switch ($size) {
+        case 'md':
+            styles["margin".concat(directionMargin)] = isHorizontal ? px2rem(38) : undefined;
+            styles.marginTop = px2rem(8);
+            styles.marginBottom = $hasDescription && !isHorizontal ? undefined : px2rem(8);
+            break;
+        case 'lg':
+            styles["margin".concat(directionMargin)] = isHorizontal ? px2rem(46) : undefined;
+            styles.marginTop = px2rem(10);
+            styles.marginBottom = $hasDescription && !isHorizontal ? undefined : px2rem(10);
+            break;
+        default:
+            break;
+    }
+    return styles;
+};
+exports.getRootStyles = getRootStyles;

package/radio/types.d.ts

@@ -0,0 +1,37 @@
+import { RadioGroupProps as BaseRadioGroupProps, RadioProps as BaseRadioProps, RadioOverrides, RadioGroupOverrides } from 'baseui/radio';
+import { Intent, SpacewebComponentProps } from '../types';
+import { Override } from '../overrides';
+import { OutlineProps } from '../helpers/commonStyles';
+export declare type Alignment = 'horizontal' | 'vertical';
+export declare type LabelPosition = 'top' | 'right' | 'bottom' | 'left';
+export declare type Size = 'sm' | 'md' | 'lg';
+export declare type SharedProps = {
+    $align?: Alignment;
+    $checked?: boolean;
+    $disabled?: boolean;
+    $hasDescription?: boolean;
+    $isActive?: boolean;
+    $intent?: Intent;
+    $isFocused?: boolean;
+    $isFocusVisible?: boolean;
+    $isHovered?: boolean;
+    $labelPlacement?: string;
+    $required?: boolean;
+    $value?: string;
+    $size?: Size;
+    $labelPosition?: LabelPosition;
+};
+export declare type RadioProps = SpacewebComponentProps<Omit<BaseRadioProps, 'overrides' | 'isError'>> & {
+    size?: Size;
+    intent?: Intent;
+    overrides?: {
+        [key in keyof RadioOverrides]?: Override<SharedProps>;
+    };
+} & OutlineProps;
+export declare type RadioGroupProps = SpacewebComponentProps<Omit<BaseRadioGroupProps, 'overrides'>> & {
+    intent?: Intent;
+    size?: Size;
+    overrides?: {
+        [key in keyof RadioGroupOverrides]?: Override<SharedProps>;
+    };
+};

package/radio/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/search/index.d.ts

@@ -0,0 +1,2 @@
+export { Search } from './search';
+export * from './types';

package/search/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Search = void 0;
+var tslib_1 = require("tslib");
+var search_1 = require("./search");
+Object.defineProperty(exports, "Search", { enumerable: true, get: function () { return search_1.Search; } });
+(0, tslib_1.__exportStar)(require("./types"), exports);

package/search/package.json

@@ -0,0 +1,4 @@
+{
+  "sideEffects": false,
+  "module": "../esm/search/index.js"
+}

package/search/search.d.ts

@@ -0,0 +1,8 @@
+import { ReactElement } from 'react';
+import { IconButtonProps } from '../button/IconButton';
+import { SearchProps } from './types';
+export declare const ClearIconButton: ({ overrides, ...props }: IconButtonProps) => ReactElement;
+export declare const Search: {
+    ({ size, debounceInterval, placeholder, overrides, className, style, variant, ...props }: SearchProps): ReactElement;
+    displayName: string;
+};

package/search/search.js

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Search = exports.ClearIconButton = void 0;
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var pick_1 = (0, tslib_1.__importDefault)(require("lodash/pick"));
+var React = (0, tslib_1.__importStar)(require("react"));
+var react_1 = require("react");
+var box_1 = require("../box");
+var button_1 = require("../button");
+var helpers_1 = require("../helpers");
+var close_1 = (0, tslib_1.__importDefault)(require("../icon/components/close"));
+var search_1 = (0, tslib_1.__importDefault)(require("../icon/components/search"));
+var input_1 = require("../input");
+var overrides_1 = require("../overrides");
+var styled_components_1 = require("./styled-components");
+var SearchIconContainer = function (_a) {
+    var _b;
+    var size = _a.size, marginX = _a.marginX, className = _a.className, overrides = _a.overrides, props = (0, tslib_1.__rest)(_a, ["size", "marginX", "className", "overrides"]);
+    var _c = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.SearchIcon, search_1.default), 2), SearchIcon = _c[0], searchIconProps = _c[1];
+    var sharedProps = (0, pick_1.default)(props, ['$isFocused', '$disabled', '$required', '$bordered', '$variant', '$intent']);
+    return ((0, jsx_runtime_1.jsx)(box_1.Box, (0, tslib_1.__assign)({}, props, { className: ['flex items-center', { marginLeft: marginX, marginRight: marginX }, className] }, { children: (0, jsx_runtime_1.jsx)(SearchIcon, (0, tslib_1.__assign)({ size: size }, sharedProps, searchIconProps, { className: ['spr-icon-03', (_b = searchIconProps) === null || _b === void 0 ? void 0 : _b.className] }), void 0) }), void 0));
+};
+var ClearIconButton = function (_a) {
+    var overrides = _a.overrides, props = (0, tslib_1.__rest)(_a, ["overrides"]);
+    var mergedOverrides = (0, react_1.useMemo)(function () {
+        return (0, overrides_1.mergeOverrides)({
+            BaseButton: {
+                style: [
+                    'h-5 w-5 spr-text-02 hover:spr-text-01 focus:spr-text-01 hover:spr-ui-03 focus:spr-ui-03 bg-transparent',
+                    function (_a) {
+                        var px2rem = _a.px2rem;
+                        return ({ minWidth: px2rem(20) });
+                    },
+                ],
+                props: { type: 'button' },
+            },
+        }, overrides);
+    }, [overrides]);
+    return ((0, jsx_runtime_1.jsx)(button_1.IconButton, (0, tslib_1.__assign)({}, props, { overrides: mergedOverrides }, { children: (0, jsx_runtime_1.jsx)(close_1.default, { "data-testid": "search-clear", size: 10 }, void 0) }), void 0));
+};
+exports.ClearIconButton = ClearIconButton;
+var Search = function (_a) {
+    var _b = _a.size, size = _b === void 0 ? 'md' : _b, _c = _a.debounceInterval, debounceInterval = _c === void 0 ? 200 : _c, _d = _a.placeholder, placeholder = _d === void 0 ? 'Search' : _d, overrides = _a.overrides, className = _a.className, style = _a.style, _e = _a.variant, variant = _e === void 0 ? 'default' : _e, props = (0, tslib_1.__rest)(_a, ["size", "debounceInterval", "placeholder", "overrides", "className", "style", "variant"]);
+    var _f = styled_components_1.SIZES_STYLES_MAP[size], searchIconMarginX = _f.searchIconMarginX, searchIconSize = _f.iconSize, fontSize = _f.fontSize;
+    var mergedOverrides = React.useMemo(function () {
+        var sharedProps = (0, helpers_1.add$props)({ size: size, variant: variant });
+        return (0, overrides_1.mergeOverrides)({
+            Root: {
+                style: [styled_components_1.getRootStyles, className, style],
+                props: sharedProps,
+            },
+            InputContainer: {
+                style: styled_components_1.getInputContainerStyles,
+                props: sharedProps,
+            },
+            Input: {
+                style: ['px-0 py-0', { fontSize: fontSize, lineHeight: 1.5 }],
+                props: sharedProps,
+            },
+            Before: {
+                component: SearchIconContainer,
+                props: (0, tslib_1.__assign)((0, tslib_1.__assign)({ size: searchIconSize, marginX: searchIconMarginX }, sharedProps), { overrides: overrides }),
+            },
+            ClearIcon: exports.ClearIconButton,
+        }, overrides);
+    }, [overrides, size, className, style, variant, fontSize, searchIconSize, searchIconMarginX]);
+    return ((0, jsx_runtime_1.jsx)(input_1.Input, (0, tslib_1.__assign)({ "data-spaceweb": "Search", placeholder: placeholder, overrides: mergedOverrides, debounceInterval: debounceInterval }, props), void 0));
+};
+exports.Search = Search;
+exports.Search.displayName = 'Search';

package/search/styled-components.d.ts

@@ -0,0 +1,13 @@
+import { Styles } from '../types';
+import { Size } from './types';
+declare type SizeStyle = {
+    paddingX: string;
+    searchIconMarginX: string;
+    height: string;
+    fontSize: string;
+    iconSize: number;
+};
+export declare const SIZES_STYLES_MAP: Record<Size, SizeStyle>;
+export declare const getInputContainerStyles: Styles;
+export declare const getRootStyles: Styles;
+export {};