@sprinklrjs/spaceweb 10.1.0

package/esm/video/Video.js

@@ -0,0 +1,38 @@
+import { __assign, __read, __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import _isFunction from 'lodash/isFunction';
+import _noop from 'lodash/noop';
+import { forwardRef, useState, useCallback } from 'react';
+import classNames from '../classNames';
+import { useOverrides, mergeOverrides } from '../overrides';
+import Play from '../icon/components/play-video';
+import VideoDisabled from '../icon/components/video-non-playable';
+import { Image } from '../image';
+import styled from '../style/styled';
+import useStyle from '../style/useStyle';
+var StyledRoot = styled('div');
+var StyledVideo = styled('video', { objectFit: 'cover' });
+var Video = forwardRef(function (props, ref) {
+    var overrides = props.overrides, children = props.children, _a = props.autoPlay, autoPlay = _a === void 0 ? false : _a, restProps = __rest(props, ["overrides", "children", "autoPlay"]);
+    var css = useStyle().css;
+    var _b = __read(useState(autoPlay), 2), played = _b[0], startPlay = _b[1];
+    var mergedOverrides = mergeOverrides({
+        Video: {
+            props: __assign({ controls: true }, restProps),
+        },
+    }, overrides || {});
+    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 onPlay = videoProps.onPlay;
+    var onClickPlay = useCallback(function (event) {
+        startPlay(true);
+        if (_isFunction(onPlay))
+            onPlay(event);
+    }, [onPlay]);
+    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(Image, __assign({}, videoProps, { src: videoProps.poster, alt: "Thumbnail", overrides: {
+                    Image: { style: videoProps.$style },
+                    Root: { style: rootProps.$style },
+                }, onClick: videoProps.disabled ? _noop : onClickPlay }), 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(Play, { className: "w-8 h-8 spr-icon-05", onClick: onClickPlay }, void 0)) }), void 0)] }), void 0));
+});
+Video.displayName = 'Video';
+export default Video;

package/esm/video/index.d.ts

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

package/esm/video/index.js

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

package/esm/video/types.d.ts

@@ -0,0 +1,17 @@
+import { ReactChildren } from 'react';
+import * as React from 'react';
+import { Override } from '../overrides';
+import { SpacewebComponentProps } from '../types';
+export declare type VideoOverrides = {
+    Root?: Override<{}>;
+    Video?: Override<{}>;
+};
+export declare type VideoProps = SpacewebComponentProps<React.VideoHTMLAttributes<HTMLVideoElement>> & {
+    children?: ReactChildren;
+    disabled?: boolean;
+    height?: number;
+    overrides?: VideoOverrides;
+    poster?: string;
+    src: string;
+    width?: number;
+};

package/esm/video/types.js

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

package/form-control/context.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+import { Intent } from '../types';
+export declare const formControlContext: import("react").Context<{
+    intent?: Intent | undefined;
+}>;
+export declare const FormControlProvider: import("react").Provider<{
+    intent?: Intent | undefined;
+}>;
+export declare const FormControlConsumer: import("react").Consumer<{
+    intent?: Intent | undefined;
+}>;
+export declare const useFormControl: () => {
+    intent?: Intent;
+};
+/**
+ * @param props
+ * uses form values to be passed using context to child components
+ * this hook can be scaled to incorporate multiple props
+ */
+export declare const useContextualFormProps: <T extends {
+    intent?: Intent;
+}>(props: T) => T;

package/form-control/context.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useContextualFormProps = exports.useFormControl = exports.FormControlConsumer = exports.FormControlProvider = exports.formControlContext = void 0;
+var tslib_1 = require("tslib");
+var react_1 = require("react");
+exports.formControlContext = (0, react_1.createContext)({ intent: 'default' });
+exports.formControlContext.displayName = 'FormControlContext';
+exports.FormControlProvider = exports.formControlContext.Provider;
+exports.FormControlConsumer = exports.formControlContext.Consumer;
+var useFormControl = function () { return (0, react_1.useContext)(exports.formControlContext); };
+exports.useFormControl = useFormControl;
+/**
+ * @param props
+ * uses form values to be passed using context to child components
+ * this hook can be scaled to incorporate multiple props
+ */
+var useContextualFormProps = function (props) {
+    var _a;
+    var contextProps = (0, exports.useFormControl)();
+    var intent = (_a = props.intent) !== null && _a !== void 0 ? _a : contextProps.intent;
+    return (0, tslib_1.__assign)((0, tslib_1.__assign)({}, props), { intent: intent });
+};
+exports.useContextualFormProps = useContextualFormProps;

package/form-control/form-control.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { FormControlProps } from './types';
+declare const FormControl: ({ overrides, label, caption, disabled, error, positive, htmlFor, children, intent, required, layout, $as, className, subText, subTextAsIcon, }: FormControlProps) => React.ReactElement;
+export { FormControl };

package/form-control/form-control.js

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormControl = void 0;
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var uniqueId_1 = (0, tslib_1.__importDefault)(require("lodash/uniqueId"));
+var react_1 = require("react");
+var React = (0, tslib_1.__importStar)(require("react"));
+var helpers_1 = require("../helpers");
+var stack_1 = require("../stack");
+var info_1 = (0, tslib_1.__importDefault)(require("../icon/components/info"));
+var error_clr_1 = (0, tslib_1.__importDefault)(require("../icon/components/error-clr"));
+var overrides_1 = require("../overrides");
+var tooltip_1 = require("../tooltip");
+var context_1 = require("./context");
+var styled_component_1 = require("./styled-component");
+function chooseRenderedHint(caption, error, positive, sharedProps) {
+    if (error && typeof error !== 'boolean') {
+        return typeof error === 'function' ? error(sharedProps) : error;
+    }
+    if (positive && typeof positive !== 'boolean') {
+        return typeof positive === 'function' ? positive(sharedProps) : positive;
+    }
+    if (caption) {
+        return typeof caption === 'function' ? caption(sharedProps) : caption;
+    }
+    return null;
+}
+var FormControl = function (_a) {
+    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_1.useRef)((0, uniqueId_1.default)('sw-id-'));
+    // First try to infer id from props or children. Create new id if needed.
+    var a11yFieldId = (0, react_1.useRef)(htmlFor || onlyChildProps.id || (0, uniqueId_1.default)('sw-id-'));
+    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 });
+    var hint = chooseRenderedHint(caption, error, positive, sharedProps);
+    var hintEl = intent === 'error' && (caption || error) ? ((0, jsx_runtime_1.jsxs)(stack_1.Stack, (0, tslib_1.__assign)({ direction: "horizontal", gap: 2, shrink: true }, { children: [(0, jsx_runtime_1.jsx)(error_clr_1.default, { size: 14 }, void 0), (0, jsx_runtime_1.jsx)(stack_1.StackItem, { children: hint }, void 0)] }), void 0)) : (hint);
+    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)({ "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)({ "data-spaceweb": "form-control-label", htmlFor: a11yFieldId.current }, 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)({}, 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) {
+                            if (!child)
+                                return null;
+                            var key = child.key || String(index);
+                            return React.cloneElement(child, {
+                                key: key,
+                                id: a11yFieldId.current,
+                                'aria-errormessage': error ? a11yCaptionId.current : null,
+                                'aria-describedby': caption || positive ? a11yCaptionId.current : null,
+                                'aria-required': required ? 'true' : 'false',
+                                disabled: onlyChildProps.disabled || disabled,
+                                error: typeof onlyChildProps.error !== 'undefined' ? onlyChildProps.error : error,
+                                positive: typeof onlyChildProps.positive !== 'undefined' ? onlyChildProps.positive : positive,
+                            });
+                        }), (caption || error || positive) && ((0, jsx_runtime_1.jsx)(Caption, (0, tslib_1.__assign)({ "data-spaceweb": "form-control-caption", id: a11yCaptionId.current }, sharedProps, captionProps, { children: hintEl }), void 0))] }), void 0)] }), void 0) }), void 0));
+};
+exports.FormControl = FormControl;

package/form-control/index.d.ts

@@ -0,0 +1,3 @@
+export type { FormControlOverrides, FormControlProps, layout } from './types';
+export { StyledLabel, StyledCaption, StyledControlContainer, StyledInfoIconContainer, StyledSubText, StyledRoot, StyledLabelContainer, StyledRequiredDot, } from './styled-component';
+export { FormControl } from './form-control';

package/form-control/index.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormControl = exports.StyledRequiredDot = exports.StyledLabelContainer = exports.StyledRoot = exports.StyledSubText = exports.StyledInfoIconContainer = exports.StyledControlContainer = exports.StyledCaption = exports.StyledLabel = void 0;
+var styled_component_1 = require("./styled-component");
+Object.defineProperty(exports, "StyledLabel", { enumerable: true, get: function () { return styled_component_1.StyledLabel; } });
+Object.defineProperty(exports, "StyledCaption", { enumerable: true, get: function () { return styled_component_1.StyledCaption; } });
+Object.defineProperty(exports, "StyledControlContainer", { enumerable: true, get: function () { return styled_component_1.StyledControlContainer; } });
+Object.defineProperty(exports, "StyledInfoIconContainer", { enumerable: true, get: function () { return styled_component_1.StyledInfoIconContainer; } });
+Object.defineProperty(exports, "StyledSubText", { enumerable: true, get: function () { return styled_component_1.StyledSubText; } });
+Object.defineProperty(exports, "StyledRoot", { enumerable: true, get: function () { return styled_component_1.StyledRoot; } });
+Object.defineProperty(exports, "StyledLabelContainer", { enumerable: true, get: function () { return styled_component_1.StyledLabelContainer; } });
+Object.defineProperty(exports, "StyledRequiredDot", { enumerable: true, get: function () { return styled_component_1.StyledRequiredDot; } });
+var form_control_1 = require("./form-control");
+Object.defineProperty(exports, "FormControl", { enumerable: true, get: function () { return form_control_1.FormControl; } });

package/form-control/package.json

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

package/form-control/styled-component.d.ts

@@ -0,0 +1,8 @@
+export declare const StyledSubText: import("../style/styled").StyledComponent;
+export declare const StyledInfoIconContainer: import("../style/styled").StyledComponent;
+export declare const StyledRequiredDot: import("../style/styled").StyledComponent;
+export declare const StyledRoot: import("../style/styled").StyledComponent;
+export declare const StyledCaption: import("../style/styled").StyledComponent;
+export declare const StyledLabelContainer: import("../style/styled").StyledComponent;
+export declare const StyledLabel: import("../style/styled").StyledComponent;
+export declare const StyledControlContainer: import("../style/styled").StyledComponent;

package/form-control/styled-component.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledControlContainer = exports.StyledLabel = exports.StyledLabelContainer = exports.StyledCaption = exports.StyledRoot = exports.StyledRequiredDot = exports.StyledInfoIconContainer = exports.StyledSubText = void 0;
+var style_1 = require("../style");
+var getIntentColor = function (_a, _b) {
+    var theme = _a.theme;
+    var $intent = _b.$intent;
+    switch ($intent) {
+        case 'success':
+            return { color: theme.spr.supportSuccess };
+        case 'warning':
+            return { color: theme.spr.supportWarning };
+        case 'error':
+            return { color: theme.spr.text01 };
+        case 'default':
+        default:
+            return { color: theme.spr.text02 };
+    }
+};
+exports.StyledSubText = (0, style_1.styled)('div', 'spr-text-02 typography-l3 mb-1');
+exports.StyledInfoIconContainer = (0, style_1.styled)('div', 'spr-ui-03 rounded-full flex items-center justify-center ml-2 flex-shrink-0', function (_a) {
+    var px2rem = _a.px2rem;
+    return ({ height: px2rem(14), width: px2rem(14) });
+});
+exports.StyledRequiredDot = (0, style_1.styled)('span', 'ml-1 spr-support-error rounded-full h-1 w-1 flex-shrink-0');
+exports.StyledRoot = (0, style_1.styled)('div', 'mb-4 flex', function (utils, _a) {
+    var $layout = _a.$layout;
+    return $layout === 'horizontal' ? 'flex-row items-baseline' : 'flex-col';
+});
+exports.StyledCaption = (0, style_1.styled)('div', 'typography-l2 my-1', getIntentColor);
+exports.StyledLabelContainer = (0, style_1.styled)('div', 'flex items-center my-1 w-full', function (utils, _a) {
+    var $layout = _a.$layout;
+    return $layout === 'horizontal' ? 'w-4/24 mr-2' : '';
+});
+exports.StyledLabel = (0, style_1.styled)('label', 'typography-l2 spr-text-02');
+exports.StyledControlContainer = (0, style_1.styled)('div', 'w-full');

package/form-control/types.d.ts

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { Override } from '../overrides';
+import { ClassName, Intent } from '../types';
+export declare type layout = 'vertical' | 'horizontal' | 'inline';
+export declare type FormControlOverrides = {
+    LabelContainer?: Override<Record<string, any>>;
+    Label?: Override<Record<string, any>>;
+    RequiredDot?: Override<Record<string, any>>;
+    Caption?: Override<Record<string, any>>;
+    ControlContainer?: Override<Record<string, any>>;
+    Root?: Override<Record<string, any>>;
+    SubText?: Override<Record<string, any>>;
+    InfoIconContainer?: Override<Record<string, any>>;
+    SubTextTooltip?: Override<Record<string, any>>;
+};
+export declare type FormControlProps = {
+    children: React.ReactElement;
+    disabled?: boolean;
+    label?: React.ReactNode;
+    /**
+     * Help text to render b/w Label and the form field.
+     */
+    subText?: React.ReactNode;
+    /**
+     * If true, render info icon and display subText in Tooltip
+     */
+    subTextAsIcon?: boolean;
+    caption?: React.ReactNode;
+    error?: boolean | React.ReactNode;
+    positive?: React.ReactNode;
+    htmlFor?: string;
+    className?: ClassName;
+    $as?: React.ElementType;
+    layout?: layout;
+    overrides?: FormControlOverrides;
+    required?: boolean;
+    intent?: Intent;
+};
+export declare type SharedProps = {
+    $disabled: boolean;
+    $error: boolean;
+    $positive: boolean;
+    $required: boolean;
+    $layout: layout;
+    $intent: Intent;
+};

package/form-control/types.js

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

package/grid/Col.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @author Ivan Torres
+ */
+import { PropsWithChildren, ReactElement } from 'react';
+import { ColProps } from './types';
+export declare const Col: {
+    (props: PropsWithChildren<ColProps>): ReactElement;
+    displayName: string;
+};
+export default Col;

package/grid/Col.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Col = void 0;
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * @author Ivan Torres
+ */
+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 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 Col = function (props) {
+    var theme = (0, useStyle_1.default)().theme;
+    var screens = theme.screens;
+    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));
+    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));
+        }
+    });
+    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));
+};
+exports.Col = Col;
+exports.Col.displayName = 'Col';
+exports.default = exports.Col;

package/grid/Grid.d.ts

@@ -0,0 +1,22 @@
+/**
+ * @author Ivan Torres
+ */
+import { ReactNode } from 'react';
+import { GridProps } from './types';
+export declare type Props = GridProps & {
+    children?: ReactNode | ReactNode[];
+};
+export declare const Grid: import("react").ForwardRefExoticComponent<Omit<import("react").AllHTMLAttributes<HTMLElement>, "style" | "className"> & {
+    $as?: import("react").ElementType<any> | undefined;
+    className?: import("..").Styles;
+    style?: import("..").Styles;
+} & import("./types").Grid & {
+    lg?: (number | import("./types").Grid) | undefined;
+    md?: (number | import("./types").Grid) | undefined;
+    sm?: (number | import("./types").Grid) | undefined;
+    xl?: (number | import("./types").Grid) | undefined;
+    xs?: (number | import("./types").Grid) | undefined;
+} & {
+    children?: ReactNode | ReactNode[];
+} & import("react").RefAttributes<HTMLDivElement>>;
+export default Grid;

package/grid/Grid.js

@@ -0,0 +1,62 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Grid = void 0;
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * @author Ivan Torres
+ */
+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");
+exports.Grid = (0, react_1.forwardRef)(function (props, ref) {
+    var theme = (0, useStyle_1.default)().theme;
+    var screens = theme.screens;
+    var className = props.className, cols = props.cols, rows = props.rows, gap = props.gap, colGap = props.colGap, rowGap = props.rowGap, style = props.style;
+    /* default settings */
+    var classList = ['grid'];
+    if (rows) {
+        classList.push("grid-rows-".concat(rows, " grid-flow-col"));
+    }
+    else {
+        classList.push("grid-cols-".concat(cols || 1, " grid-flow-row"));
+    }
+    if (colGap)
+        classList.push("gap-x-".concat(colGap));
+    if (rowGap)
+        classList.push("gap-y-".concat(rowGap));
+    if (gap && Number.isInteger(gap)) {
+        /* can't combine lang-hand and short-hand */
+        if (colGap) {
+            classList.push("gap-y-".concat(gap));
+        }
+        else if (rowGap) {
+            classList.push("gap-x-".concat(gap));
+        }
+        else {
+            classList.push("gap-".concat(gap));
+        }
+    }
+    var breakpoints = (0, react_1.useMemo)(function () { return Object.keys(screens); }, [screens]);
+    breakpoints.forEach(function (name) {
+        var breakpoint = props[name];
+        if (!breakpoint)
+            return;
+        if (Number.isInteger(breakpoint))
+            classList.push("".concat(name, ":grid-cols-").concat(breakpoint));
+        if (breakpoint.cols && !breakpoint.rows)
+            classList.push("".concat(name, ":grid-cols-").concat(breakpoint.cols));
+        if (breakpoint.rows && !breakpoint.cols)
+            classList.push("".concat(name, ":grid-rows-").concat(breakpoint.rows));
+        if (breakpoint.gap)
+            classList.push("".concat(name, ":gap-").concat(breakpoint.gap));
+        if (breakpoint.rowGap)
+            classList.push("".concat(name, ":gap-y-").concat(breakpoint.rowGap));
+        if (breakpoint.colGap)
+            classList.push("".concat(name, ":gap-x-").concat(breakpoint.colGap));
+    });
+    return ((0, jsx_runtime_1.jsx)(box_1.Box, (0, tslib_1.__assign)({}, (0, utils_1.filterOwnProps)(breakpoints, props), { className: [classList, className, style], ref: ref }, { children: props.children }), void 0));
+});
+exports.Grid.displayName = 'Grid';
+exports.default = exports.Grid;

package/grid/index.d.ts

@@ -0,0 +1,6 @@
+import { Grid } from './Grid';
+import { Col } from './Col';
+import { GridProps, ColProps } from './types';
+export { Col, Grid };
+export type { ColProps, GridProps };
+export default Grid;

package/grid/index.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Grid = exports.Col = void 0;
+var Grid_1 = require("./Grid");
+Object.defineProperty(exports, "Grid", { enumerable: true, get: function () { return Grid_1.Grid; } });
+var Col_1 = require("./Col");
+Object.defineProperty(exports, "Col", { enumerable: true, get: function () { return Col_1.Col; } });
+exports.default = Grid_1.Grid;

package/grid/package.json

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

package/grid/types.d.ts

@@ -0,0 +1,32 @@
+import { SpacewebComponentProps } from '../types';
+export declare type Grid = {
+    cols?: number;
+    rows?: number;
+    gap?: number;
+    colGap?: number;
+    rowGap?: number;
+};
+declare type Breakpoint = number | Grid;
+export declare type GridProps = SpacewebComponentProps & Grid & {
+    lg?: Breakpoint;
+    md?: Breakpoint;
+    sm?: Breakpoint;
+    xl?: Breakpoint;
+    xs?: Breakpoint;
+};
+export declare type Column = {
+    colSpan?: number;
+    colStart?: number;
+    colEnd?: number;
+    rowSpan?: number;
+    rowStart?: number;
+    rowEnd?: number;
+};
+export declare type ColProps = SpacewebComponentProps & Column & {
+    xs?: Column;
+    sm?: Column;
+    md?: Column;
+    lg?: Column;
+    xl?: Column;
+};
+export {};

package/grid/types.js

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

package/grid/utils.d.ts

@@ -0,0 +1 @@
+export declare const filterOwnProps: <T>(breakpoints: string[], props: T) => Partial<T>;

package/grid/utils.js

@@ -0,0 +1,31 @@
+"use strict";
+/* eslint import/prefer-default-export: 0 */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.filterOwnProps = void 0;
+var tslib_1 = require("tslib");
+var filterOwnProps = function (breakpoints, props) {
+    var gridProps = (0, tslib_1.__spreadArray)([
+        'children',
+        'className',
+        'cols',
+        'rows',
+        'colGap',
+        'gap',
+        'rowGap',
+        'style',
+        'colEnd',
+        'colSpan',
+        'colStart',
+        'rowEnd',
+        'rowSpan',
+        'rowStart'
+    ], (0, tslib_1.__read)(breakpoints), false);
+    return Object.entries(props).reduce(function (otherProps, _a) {
+        var _b;
+        var _c = (0, tslib_1.__read)(_a, 2), key = _c[0], val = _c[1];
+        if (gridProps.includes(key))
+            return otherProps;
+        return (0, tslib_1.__assign)((0, tslib_1.__assign)({}, otherProps), (_b = {}, _b[key] = val, _b));
+    }, {});
+};
+exports.filterOwnProps = filterOwnProps;

package/helpers/ClearIconButton.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { IconButtonProps } from '../button/IconButton';
+import { SharedProps } from '../select/types';
+declare const ClearIconButton: ({ size, $size, $isOpen, ...props }: IconButtonProps & Pick<SharedProps, '$size' | '$isOpen'>) => React.ReactElement;
+export default ClearIconButton;

package/helpers/ClearIconButton.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var IconButton_1 = (0, tslib_1.__importDefault)(require("../button/IconButton"));
+var close_1 = (0, tslib_1.__importDefault)(require("../icon/components/close"));
+var ClearIconButton = function (_a) {
+    var size = _a.size, $size = _a.$size, $isOpen = _a.$isOpen, props = (0, tslib_1.__rest)(_a, ["size", "$size", "$isOpen"]);
+    return ((0, jsx_runtime_1.jsx)(IconButton_1.default, (0, tslib_1.__assign)({}, props, { overrides: {
+            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' },
+            },
+        } }, { children: (0, jsx_runtime_1.jsx)(close_1.default, { size: 8 }, void 0) }), void 0));
+};
+exports.default = ClearIconButton;

package/helpers/baseui/useConvertOverrides.d.ts

@@ -0,0 +1,15 @@
+import { Override as BaseOverride, Overrides as BaseOverrides } from 'baseui/overrides';
+import { DependencyList } from 'react';
+import { OverrideObject, Overrides } from '../../overrides';
+import { StyleUtils } from '../../types';
+declare const convertOverrideObject: <T>(override: OverrideObject<T>, utils: StyleUtils) => BaseOverride<T>;
+declare const mergeAndConvertOverrides: <T>(target: Overrides<T>, source: Overrides<T> | undefined, utils: StyleUtils) => BaseOverrides<T>;
+/**
+ * Wraps on top of mergeOverrides from baseui
+ *
+ * This provides Space's `StyleUtils` as first argument to all style override's functions, and then the override properties.
+ * Merges 2 spaceweb overrides and converts them to baseui override object
+ * Useful when overriding baseui's component to create spaceweb component.
+ */
+declare const useConvertOverrides: <T>(target: Overrides<T>, source?: Overrides<T>, deps?: DependencyList) => BaseOverrides<T>;
+export { useConvertOverrides, mergeAndConvertOverrides, convertOverrideObject };

package/helpers/baseui/useConvertOverrides.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.convertOverrideObject = exports.mergeAndConvertOverrides = exports.useConvertOverrides = void 0;
+var tslib_1 = require("tslib");
+var reduce_1 = (0, tslib_1.__importDefault)(require("lodash/reduce"));
+var react_1 = require("react");
+var overrides_1 = require("../../overrides");
+var _getStyleWithProps_1 = (0, tslib_1.__importDefault)(require("../../style/_getStyleWithProps"));
+var useStyle_1 = (0, tslib_1.__importDefault)(require("../../style/useStyle"));
+var convertOverrideObject = function (override, utils) { return ((0, tslib_1.__assign)((0, tslib_1.__assign)({}, override), { style: function (props) { return (0, _getStyleWithProps_1.default)(utils, props, override.style); } })); };
+exports.convertOverrideObject = convertOverrideObject;
+var mergeAndConvertOverrides = function (target, source, utils) {
+    if (source === void 0) { source = {}; }
+    var mergedOverrides = (0, overrides_1.mergeOverrides)(target, source);
+    return (0, reduce_1.default)(mergedOverrides, function (acc, componentOverride, componentName) {
+        acc[componentName] = convertOverrideObject(componentOverride || {}, utils);
+        return acc;
+    }, {});
+};
+exports.mergeAndConvertOverrides = mergeAndConvertOverrides;
+/**
+ * Wraps on top of mergeOverrides from baseui
+ *
+ * This provides Space's `StyleUtils` as first argument to all style override's functions, and then the override properties.
+ * Merges 2 spaceweb overrides and converts them to baseui override object
+ * Useful when overriding baseui's component to create spaceweb component.
+ */
+var useConvertOverrides = function (target, source, deps) {
+    if (source === void 0) { source = {}; }
+    if (deps === void 0) { deps = []; }
+    var utils = (0, useStyle_1.default)();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    return (0, react_1.useMemo)(function () { return mergeAndConvertOverrides(target, source, utils); }, (0, tslib_1.__spreadArray)([source, target, utils], (0, tslib_1.__read)(deps), false));
+};
+exports.useConvertOverrides = useConvertOverrides;