@sprinklrjs/spaceweb 12.33.2 → 14.11.3

package/form-control/form-control.js

@@ -2,62 +2,79 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FormControl = void 0;
 var tslib_1 = require("tslib");
-var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
-var React = (0, tslib_1.__importStar)(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_2 = require("react");
+var React = 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 box_1 = require("../box");
+var info_icon_1 = tslib_1.__importDefault(require("./info-icon"));
+var warning_solid_1 = tslib_1.__importDefault(require("../icon/components/warning-solid"));
+var alert_solid_1 = tslib_1.__importDefault(require("../icon/components/alert-solid"));
+var tickCircle_solid_1 = tslib_1.__importDefault(require("../icon/components/tickCircle-solid"));
 var overrides_1 = require("../overrides");
 var tooltip_1 = require("../tooltip");
 var context_1 = require("./context");
 var styled_component_1 = require("./styled-component");
-var useUniqueId_1 = (0, tslib_1.__importDefault)(require("../hooks/useUniqueId"));
-function chooseRenderedHint(caption, error, positive, sharedProps) {
-    if (error && typeof error !== 'boolean') {
-        return typeof error === 'function' ? error(sharedProps) : error;
-    }
-    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 = (0, react_1.forwardRef)(function (_a, ref) {
-    var overrides = _a.overrides, label = _a.label, caption = _a.caption, disabled = _a.disabled, error = _a.error, positive = _a.positive, htmlFor = _a.htmlFor, children = _a.children, intent = _a.intent, required = _a.required, layout = _a.layout, $as = _a.$as, className = _a.className, subText = _a.subText, subTextAsIcon = _a.subTextAsIcon;
+var useUniqueId_1 = tslib_1.__importDefault(require("../hooks/useUniqueId"));
+var classNames_1 = tslib_1.__importDefault(require("../classNames"));
+var generalUtils_1 = require("../utils/generalUtils");
+var addConditionalIds = classNames_1.default;
+var intentToIconMap = {
+    error: alert_solid_1.default,
+    warning: warning_solid_1.default,
+    success: tickCircle_solid_1.default,
+};
+var renderWithIcon = function (intent, message) {
+    var IntentIcon = intentToIconMap[intent];
+    return ((0, jsx_runtime_1.jsxs)(stack_1.Stack, tslib_1.__assign({ direction: "horizontal", gap: 1, shrink: true }, { children: [IntentIcon ? (
+            // font-size * 1.5 = line-height
+            (0, jsx_runtime_1.jsx)(stack_1.StackItem, tslib_1.__assign({ style: { height: '1.5em' }, className: "flex items-center" }, { children: (0, jsx_runtime_1.jsx)(IntentIcon, { "$intent": intent, className: styled_component_1.getIntentColor, size: 14 }) }))) : null, (0, jsx_runtime_1.jsx)(stack_1.StackItem, { children: message })] })));
+};
+var FormControl = (0, react_2.forwardRef)(function (_a, ref) {
+    var _b = _a.size, size = _b === void 0 ? 'medium' : _b, overrides = _a.overrides, label = _a.label, caption = _a.caption, disabled = _a.disabled, error = _a.error, positive = _a.positive, htmlFor = _a.htmlFor, children = _a.children, _c = _a.intent, intent = _c === void 0 ? 'default' : _c, required = _a.required, _d = _a.layout, layout = _d === void 0 ? 'vertical' : _d, $as = _a.$as, className = _a.className, style = _a.style, subText = _a.subText, subTextAsIcon = _a.subTextAsIcon, disabledTooltip = _a.disabledTooltip;
     var onlyChildProps = React.Children.only(children).props;
     var a11yCaptionId = (0, useUniqueId_1.default)();
-    var a11LabelId = (0, useUniqueId_1.default)();
-    var a11SubTextId = (0, useUniqueId_1.default)();
+    var a11yErrorMessageId = (0, useUniqueId_1.default)();
+    var a11yLabelId = (0, useUniqueId_1.default)();
+    var a11ySubTextId = (0, useUniqueId_1.default)();
+    var a11yDisabledTooltipId = (0, useUniqueId_1.default)();
     var fieldUniqueId = (0, useUniqueId_1.default)();
+    var intentMessageNode = error !== null && error !== void 0 ? error : positive;
     // First try to infer id from props or children. Create new id if needed.
     var a11yFieldId = htmlFor || onlyChildProps.id || fieldUniqueId;
-    var sharedProps = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, (0, helpers_1.add$props)({ required: required, layout: layout, intent: intent, disabled: disabled })), { $error: !!error, $positive: !!positive, $hasSubText: !!subText, $subTextAsIcon: subTextAsIcon });
-    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;
+    var shouldDescribeSubText = !!subText && !shouldRenderSubTextInTooltip;
+    var sharedProps = tslib_1.__assign(tslib_1.__assign({}, (0, helpers_1.add$props)({ required: required, layout: layout, intent: intent, disabled: disabled, size: size })), { $hasSubText: !!subText, $subTextAsIcon: shouldRenderSubTextInTooltip });
+    var _e = tslib_1.__read((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.LabelContainer, styled_component_1.StyledLabelContainer), 2), LabelContainer = _e[0], labelContainerProps = _e[1], _f = tslib_1.__read((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Label, styled_component_1.StyledLabel), 2), Label = _f[0], labelProps = _f[1], _g = tslib_1.__read((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.RequiredDot, styled_component_1.StyledRequiredDot), 2), RequiredDot = _g[0], requiredDotProps = _g[1], _h = tslib_1.__read((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Root, styled_component_1.StyledRoot), 2), Root = _h[0], rootProps = _h[1], _j = tslib_1.__read((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.SubText, styled_component_1.StyledSubText), 2), SubText = _j[0], subTextProps = _j[1], _k = tslib_1.__read((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.ControlContainer, styled_component_1.StyledControlContainer), 2), ControlContainer = _k[0], controlContainerProps = _k[1], _l = tslib_1.__read((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Caption, styled_component_1.StyledCaption), 2), Caption = _l[0], captionProps = _l[1], _m = tslib_1.__read((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.ErrCaption, styled_component_1.StyledCaption), 2), ErrCaption = _m[0], errCaptionProps = _m[1], _o = tslib_1.__read((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.DisabledTooltip, tooltip_1.StatefulTooltip), 2), DisabledTooltip = _o[0], disabledTooltipProps = _o[1];
+    var formControlProviderValue = (0, react_2.useMemo)(function () { return ({ intent: intent }); }, [intent]);
+    var captionMessage = typeof caption === 'function' ? caption(sharedProps) : caption;
     var subTextToRender = typeof subText === 'function' ? subText(sharedProps) : subText;
-    return ((0, jsx_runtime_1.jsx)(context_1.FormControlProvider, (0, tslib_1.__assign)({ value: formControlProviderValue }, { children: (0, jsx_runtime_1.jsxs)(Root, (0, tslib_1.__assign)({ ref: ref, "data-testid": "form-control", "data-spaceweb": "form-control", className: className, "$as": $as }, sharedProps, rootProps, { children: [label && ((0, jsx_runtime_1.jsxs)(LabelContainer, (0, tslib_1.__assign)({ "data-testid": "form-control-label-container" }, sharedProps, labelContainerProps, { children: [(0, jsx_runtime_1.jsx)(Label, (0, tslib_1.__assign)({ id: a11LabelId, "data-spaceweb": "form-control-label", htmlFor: a11yFieldId }, sharedProps, labelProps, { children: typeof label === 'function' ? label(sharedProps) : label }), void 0), required && (0, jsx_runtime_1.jsx)(RequiredDot, (0, tslib_1.__assign)({ "data-testid": "form-required" }, requiredDotProps), void 0), subText && shouldRenderSubTextInTooltip ? ((0, jsx_runtime_1.jsx)(SubTextTooltip, (0, tslib_1.__assign)({ content: subTextToRender, size: "md" }, subTextTooltipProps, { children: (0, jsx_runtime_1.jsx)(InfoIconContainer, (0, tslib_1.__assign)({}, infoIconContainerProps, { children: (0, jsx_runtime_1.jsx)(info_1.default, { className: "h-2 w-2" }, void 0) }), void 0) }), void 0)) : null] }), void 0)), subText && !shouldRenderSubTextInTooltip ? ((0, jsx_runtime_1.jsx)(SubText, (0, tslib_1.__assign)({ id: a11SubTextId }, subTextProps, { children: subTextToRender }), void 0)) : null, (0, jsx_runtime_1.jsxs)(ControlContainer, (0, tslib_1.__assign)({ "data-spaceweb": "form-control-container" }, sharedProps, controlContainerProps, { children: [React.Children.map(children, function (child, index) {
-                            if (!child)
-                                return null;
-                            var key = child.key || String(index);
-                            return React.cloneElement(child, {
-                                key: key,
-                                id: a11yFieldId,
-                                'aria-errormessage': error ? a11yCaptionId : null,
-                                'aria-describedby': caption || positive || subText
-                                    ? "".concat(subText ? a11SubTextId : '', " ").concat(caption ? a11yCaptionId : '', " ")
-                                    : 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 }, sharedProps, captionProps, { children: hintEl }), void 0))] }), void 0)] }), void 0) }), void 0));
+    var labelNode = typeof label === 'function' ? label(sharedProps) : label;
+    var infoIconAriaLabel = (0, generalUtils_1.getTextFromNode)(labelNode) || undefined;
+    var invalidInput = !!(error || (intent === 'error' && captionMessage));
+    var shouldShowDisabledTooltip = disabled && disabledTooltip;
+    return ((0, jsx_runtime_1.jsx)(context_1.FormControlProvider, tslib_1.__assign({ value: formControlProviderValue }, { children: (0, jsx_runtime_1.jsxs)(Root, tslib_1.__assign({ ref: ref, "data-testid": "form-control", "data-spaceweb": "form-control", "$as": $as }, sharedProps, rootProps, { style: [style, rootProps === null || rootProps === void 0 ? void 0 : rootProps.style], className: [className, rootProps === null || rootProps === void 0 ? void 0 : rootProps.className] }, { children: [label && ((0, jsx_runtime_1.jsxs)(LabelContainer, tslib_1.__assign({ "data-testid": "form-control-label-container" }, sharedProps, labelContainerProps, { children: [(0, react_1.createElement)(Label, tslib_1.__assign({ id: a11yLabelId, "data-spaceweb": "form-control-label", htmlFor: a11yFieldId }, sharedProps, labelProps, { key: "CheckCompliance<FormControl>" }), labelNode), required && (0, jsx_runtime_1.jsx)(RequiredDot, tslib_1.__assign({ "data-testid": "form-required" }, requiredDotProps)), subText && shouldRenderSubTextInTooltip ? ((0, jsx_runtime_1.jsx)(info_icon_1.default, { content: subTextToRender, className: "ml-1", ariaLabel: infoIconAriaLabel, overrides: {
+                                SubTextTooltip: overrides === null || overrides === void 0 ? void 0 : overrides.SubTextTooltip,
+                                InfoIconContainer: overrides === null || overrides === void 0 ? void 0 : overrides.InfoIconContainer,
+                            } }, "CheckCompliance<FormControl>;SubText")) : null] }))), subText && !shouldRenderSubTextInTooltip ? ((0, jsx_runtime_1.jsx)(SubText, tslib_1.__assign({ id: a11ySubTextId }, sharedProps, subTextProps, { children: subTextToRender }))) : null, (0, react_1.createElement)(ControlContainer, tslib_1.__assign({ "data-spaceweb": "form-control-container", "data-sw-form-error": invalidInput }, sharedProps, controlContainerProps, { key: "CheckCompliance<FormControl>;ControlContainer" }),
+                    shouldShowDisabledTooltip && ((0, jsx_runtime_1.jsx)(box_1.Box, tslib_1.__assign({ id: a11yDisabledTooltipId, className: "sr-only", "data-spaceweb": "form-control-disabled-tooltip" }, { children: disabledTooltip }))),
+                    React.Children.map(children, function (child, index) {
+                        var _a;
+                        if (!child)
+                            return null;
+                        var key = child.key || String(index);
+                        var ariaDescribedBy = addConditionalIds((_a = {},
+                            _a[a11ySubTextId] = shouldDescribeSubText,
+                            _a[a11yCaptionId] = captionMessage,
+                            _a[a11yErrorMessageId] = intentMessageNode,
+                            _a[a11yDisabledTooltipId] = shouldShowDisabledTooltip,
+                            _a));
+                        var childElement = React.cloneElement(child, tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ key: key, id: a11yFieldId, 'aria-invalid': invalidInput }, (invalidInput ? { 'aria-errormessage': error ? a11yErrorMessageId : a11yCaptionId } : {})), { 'aria-labelledby': a11yLabelId }), (ariaDescribedBy ? { 'aria-describedby': ariaDescribedBy } : {})), { 'aria-required': required ? 'true' : 'false', size: onlyChildProps.size || size, disabled: onlyChildProps.disabled || disabled, required: onlyChildProps.required || required }));
+                        return shouldShowDisabledTooltip ? ((0, jsx_runtime_1.jsx)(DisabledTooltip, tslib_1.__assign({ content: disabledTooltip }, disabledTooltipProps, { children: (0, jsx_runtime_1.jsx)(box_1.Box, tslib_1.__assign({ className: "inline-block w-full" }, { children: childElement })) }), "disabled-tooltip-".concat(key))) : (childElement);
+                    }),
+                    captionMessage ? ((0, jsx_runtime_1.jsx)(Caption, tslib_1.__assign({ "data-spaceweb": "form-control-caption", id: a11yCaptionId }, sharedProps, captionProps, { children: renderWithIcon(intent, captionMessage) }))) : null,
+                    intentMessageNode ? ((0, jsx_runtime_1.jsx)(ErrCaption, tslib_1.__assign({ "data-spaceweb": "form-control-errormessage", id: a11yErrorMessageId }, sharedProps, { "$intent": error ? 'error' : 'success' }, errCaptionProps, { children: error ? renderWithIcon('error', intentMessageNode) : intentMessageNode }))) : null)] })) })));
 });
 exports.FormControl = FormControl;

package/form-control/index.d.ts

@@ -1,3 +1,6 @@
-export type { FormControlOverrides, FormControlProps, layout } from './types';
-export { StyledLabel, StyledCaption, StyledControlContainer, StyledInfoIconContainer, StyledSubText, StyledRoot, StyledLabelContainer, StyledRequiredDot, } from './styled-component';
+export type { FormControlOverrides, FormControlProps, layout, SharedProps } from './types';
+export { StyledLabel, StyledCaption, StyledControlContainer, 
+/** @deprecated Instead use the standard info-icon for focusable tooltips */
+DeprecatedStyledInfoIconContainer as StyledInfoIconContainer, StyledSubText, StyledRoot, StyledLabelContainer, StyledRequiredDot, } from './styled-component';
 export { FormControl } from './form-control';
+export { default as InfoIcon } from './info-icon';

package/form-control/index.js

@@ -1,14 +1,20 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 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;
+exports.InfoIcon = 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; } });
+/** @deprecated Instead use the standard info-icon for focusable tooltips */
+Object.defineProperty(exports, "StyledInfoIconContainer", { enumerable: true, get: function () { return styled_component_1.DeprecatedStyledInfoIconContainer; } });
 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; } });
+var info_icon_1 = require("./info-icon");
+Object.defineProperty(exports, "InfoIcon", { enumerable: true, get: function () { return __importDefault(info_icon_1).default; } });

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

@@ -0,0 +1,18 @@
+import React, { ReactNode } from 'react';
+import { TooltipProps } from '../tooltip';
+import { IconProps } from '../icon';
+import { ClassName } from '../types';
+import { FormControlOverrides } from '@sprinklrjs/spaceweb/form-control/types';
+type InfoIconOverrides = {
+    SubTextTooltip?: FormControlOverrides['SubTextTooltip'];
+    InfoIconContainer?: FormControlOverrides['InfoIconContainer'];
+};
+declare const InfoIcon: ({ content, iconSize, placement, overrides, ariaLabel, className, }: {
+    content: ReactNode;
+    iconSize?: IconProps['size'];
+    className?: ClassName;
+    placement?: TooltipProps['placement'];
+    overrides?: InfoIconOverrides | undefined;
+    ariaLabel?: string | undefined;
+}) => React.ReactElement;
+export default InfoIcon;

package/form-control/info-icon.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+// components
+var tooltip_1 = require("../tooltip");
+var alert_warning_1 = tslib_1.__importDefault(require("../icon/components/alert-warning"));
+var overrides_1 = require("../overrides");
+var styled_component_1 = require("./styled-component");
+var InfoIcon = function (_a) {
+    var content = _a.content, _b = _a.iconSize, iconSize = _b === void 0 ? 12 : _b, _c = _a.placement, placement = _c === void 0 ? 'right' : _c, overrides = _a.overrides, ariaLabel = _a.ariaLabel, className = _a.className;
+    var _d = tslib_1.__read((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.SubTextTooltip, tooltip_1.StatefulTooltip), 2), Tooltip = _d[0], tooltipProps = _d[1];
+    var _e = tslib_1.__read((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.InfoIconContainer, styled_component_1.InternalStyledInfoIconContainer), 2), Container = _e[0], containerProps = _e[1];
+    return ((0, jsx_runtime_1.jsx)(Tooltip, tslib_1.__assign({}, tooltipProps, { placement: placement, content: content }, { children: (0, jsx_runtime_1.jsx)(Container, tslib_1.__assign({ role: "button", "aria-label": ariaLabel, tabIndex: 0, className: className }, containerProps, { children: (0, jsx_runtime_1.jsx)(alert_warning_1.default, { size: iconSize }) })) })));
+};
+exports.default = InfoIcon;

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

@@ -1,8 +1,14 @@
-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;
+export declare const getIntentColor: ({ theme }: {
+    theme: any;
+}, { $intent }: {
+    $intent: any;
+}) => string;
+export declare const StyledSubText: import("../style").StyledComponent;
+export declare const InternalStyledInfoIconContainer: import("../style").StyledComponent;
+export declare const DeprecatedStyledInfoIconContainer: import("../style").StyledComponent;
+export declare const StyledRequiredDot: import("../style").StyledComponent;
+export declare const StyledRoot: import("../style").StyledComponent;
+export declare const StyledCaption: import("../style").StyledComponent;
+export declare const StyledLabelContainer: import("../style").StyledComponent;
+export declare const StyledLabel: import("../style").StyledComponent;
+export declare const StyledControlContainer: import("../style").StyledComponent;

package/form-control/styled-component.js

@@ -1,47 +1,57 @@
 "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;
+exports.StyledControlContainer = exports.StyledLabel = exports.StyledLabelContainer = exports.StyledCaption = exports.StyledRoot = exports.StyledRequiredDot = exports.DeprecatedStyledInfoIconContainer = exports.InternalStyledInfoIconContainer = exports.StyledSubText = exports.getIntentColor = void 0;
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var themeHelpers_1 = require("../helpers/themeHelpers");
 var style_1 = require("../style");
 var getIntentColor = function (_a, _b) {
     var theme = _a.theme;
     var $intent = _b.$intent;
+    var isDark = (0, themeHelpers_1.isDarkTheme)(theme);
     switch ($intent) {
         case 'success':
-            return { color: theme.spr.supportSuccess };
+            return 'spr-text-success';
         case 'warning':
-            return { color: theme.spr.supportWarning };
+            return "spr-icon-warning ".concat(isDark ? 'spr-text-inverse' : 'spr-text-secondary');
         case 'error':
-            return { color: theme.spr.text01 };
+            return 'spr-text-error';
         case 'default':
         default:
-            return { color: theme.spr.text02 };
+            return 'spr-text-02';
     }
 };
-exports.StyledSubText = (0, style_1.styled)('div', 'spr-text-02 mb-1', {
-    fontSize: '13px',
-    lineHeight: '16px',
-    fontWeight: 400,
-});
-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', 'spr-support-error rounded-full h-1 w-1 flex-shrink-0 ml-1');
+exports.getIntentColor = getIntentColor;
+exports.StyledSubText = (0, style_1.styled)('div', function (_, _a) {
+    var $disabled = _a.$disabled;
+    return ($disabled ? 'forced-colors:text-disabled spr-text-secondary' : '');
+}, 'mb-1 spr-text-02 text-13 leading-4 font-normal');
+var commonIconContainerClasses = 'flex items-center justify-center focus-visible:outline-2  focus-visible:outline-[--spr-focus-01] focus-visible:outline-offset-1' +
+    ' focus-visible:outline shrink-0 rounded-full';
+exports.InternalStyledInfoIconContainer = (0, style_1.styled)('div', commonIconContainerClasses, 'spr-bg-primary');
+exports.InternalStyledInfoIconContainer.__standard = 'Ignore';
+exports.DeprecatedStyledInfoIconContainer = (0, style_1.styled)('div', commonIconContainerClasses, 'spr-ui-03 ml-1 h-3 w-3');
+exports.DeprecatedStyledInfoIconContainer.__standard = 'Ignore';
+var RequiredDot = function (props) { return (0, jsx_runtime_1.jsx)("span", tslib_1.__assign({}, props, { children: "*" })); };
+exports.StyledRequiredDot = (0, style_1.styled)(RequiredDot, 'spr-text-error shrink-0 text-14 font-400 leading-150');
+exports.StyledRequiredDot.__standard = 'Ignore';
 exports.StyledRoot = (0, style_1.styled)('div', '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 mt-1', getIntentColor);
-exports.StyledLabelContainer = (0, style_1.styled)('div', 'flex items-center w-full', function (utils, _a) {
+exports.StyledCaption = (0, style_1.styled)('div', 'mt-1 text-14 font-400 leading-150 spr-text-primary', function (_, _a) {
+    var $disabled = _a.$disabled;
+    return $disabled ? 'forced-colors:text-disabled spr-text-secondary opacity-40' : '';
+});
+exports.StyledLabelContainer = (0, style_1.styled)('div', 'flex items-center w-full', function (_, _a) {
     var $layout = _a.$layout;
     return ($layout === 'horizontal' ? 'w-4/24 mr-2' : '');
-}, function (utils, _a) {
-    var $hasSubText = _a.$hasSubText, $subTextAsIcon = _a.$subTextAsIcon;
-    return (!$hasSubText || $subTextAsIcon ? 'mb-1' : '');
+}, function (_, _a) {
+    var $hasSubText = _a.$hasSubText, $subTextAsIcon = _a.$subTextAsIcon, $layout = _a.$layout;
+    return $layout !== 'horizontal' && (!$hasSubText || $subTextAsIcon) ? 'mb-1' : '';
 });
-exports.StyledLabel = (0, style_1.styled)('label', 'spr-text-02', {
-    fontSize: '14px',
-    lineHeight: '18px',
-    fontWeight: 400,
+exports.StyledLabel = (0, style_1.styled)('label', 'text-14 font-400 leading-150 spr-text-primary', function (_, _a) {
+    var $disabled = _a.$disabled;
+    return $disabled ? 'forced-colors:text-disabled spr-text-secondary opacity-40' : '';
 });
 exports.StyledControlContainer = (0, style_1.styled)('div', 'w-full');

package/form-control/types.d.ts

@@ -1,20 +1,25 @@
 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 = {
+import type { Override } from '../overrides';
+import { ClassName, Intent, Styles } from '../types';
+import { ElementType } from 'react';
+export type layout = 'vertical' | 'horizontal' | 'inline';
+export type Size = 'small' | 'medium';
+export type FormControlOverrides = {
     LabelContainer?: Override<Record<string, any>>;
     Label?: Override<Record<string, any>>;
     RequiredDot?: Override<Record<string, any>>;
     Caption?: Override<Record<string, any>>;
+    ErrCaption?: 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>>;
+    DisabledTooltip?: Override<Record<string, any>>;
 };
-export declare type FormControlProps = {
+export type FormControlProps = {
     children: React.ReactElement;
+    size?: Size;
     disabled?: boolean;
     label?: React.ReactNode | ((sharedProps: SharedProps) => React.ReactNode);
     /**
@@ -26,17 +31,20 @@ export declare type FormControlProps = {
      */
     subTextAsIcon?: boolean;
     caption?: React.ReactNode | ((sharedProps: SharedProps) => React.ReactNode);
-    error?: boolean | React.ReactNode;
+    error?: React.ReactNode;
     positive?: React.ReactNode;
     htmlFor?: string;
-    className?: ClassName;
-    $as?: React.ElementType;
+    /** @deprecated defaults to vertical */
     layout?: layout;
     overrides?: FormControlOverrides;
     required?: boolean;
     intent?: Intent;
+    disabledTooltip?: React.ReactNode;
+    $as?: ElementType;
+    className?: ClassName;
+    style?: Styles;
 };
-export declare type SharedProps = {
+export type SharedProps = {
     $disabled: boolean;
     $error: boolean;
     $positive: boolean;

package/grid/Col.d.ts

@@ -1,6 +1,3 @@
-/**
- * @author Ivan Torres
- */
 import { PropsWithChildren, ReactElement } from 'react';
 import { ColProps } from './types';
 export declare const Col: {

package/grid/Col.js

@@ -3,55 +3,62 @@ 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 useStyle_1 = tslib_1.__importDefault(require("../style/useStyle"));
 var utils_1 = require("./utils");
-var getGridRange = function (column, breakpointMinWidth) {
-    var _a;
+var getClassesAndVars = function (column, breakpoint) {
     var colSpan = column.colSpan, colStart = column.colStart, colEnd = column.colEnd, rowSpan = column.rowSpan, rowStart = column.rowStart, rowEnd = column.rowEnd;
-    var gridRangeStyle = {};
+    var classes = [];
+    var variables = {};
+    var updateColClasses = function (attrib, val) {
+        classes.push("".concat(breakpoint ? "".concat(breakpoint, ":") : '').concat(attrib, "-[--sw-").concat(attrib, "]"));
+        variables["--sw".concat(breakpoint ? "-".concat(breakpoint) : '', "-").concat(attrib)] = val;
+    };
     if (typeof colSpan === 'number') {
-        gridRangeStyle.gridColumnStart = "span ".concat(colSpan);
-        gridRangeStyle.gridColumnEnd = "span ".concat(colSpan);
+        updateColClasses('col-start', "span ".concat(colSpan));
+        updateColClasses('col-end', "span ".concat(colSpan));
     }
     if (typeof rowSpan === 'number') {
-        gridRangeStyle.gridRowStart = "span ".concat(rowSpan);
-        gridRangeStyle.gridRowEnd = "span ".concat(rowSpan);
+        updateColClasses('row-start', "span ".concat(rowSpan));
+        updateColClasses('row-end', "span ".concat(rowSpan));
     }
     if (typeof colStart === 'number') {
-        gridRangeStyle.gridColumnStart = colStart;
+        updateColClasses('col-start', colStart);
     }
     if (typeof colEnd === 'number') {
-        gridRangeStyle.gridColumnEnd = colEnd;
+        updateColClasses('col-end', colEnd);
     }
     if (typeof rowStart === 'number') {
-        gridRangeStyle.gridRowStart = rowStart;
+        updateColClasses('row-start', rowStart);
     }
     if (typeof rowEnd === 'number') {
-        gridRangeStyle.gridRowEnd = rowEnd;
+        updateColClasses('row-end', rowEnd);
     }
-    return breakpointMinWidth
-        ? (_a = {},
-            _a["@media screen and (min-width: ".concat(breakpointMinWidth, ")")] = gridRangeStyle,
-            _a) : gridRangeStyle;
+    return { classes: classes, variables: variables };
+};
+var mergeClassesAndVars = function (classesAndVars) {
+    return classesAndVars.reduce(function (acc, _a) {
+        var _b;
+        var classes = _a.classes, variables = _a.variables;
+        (_b = acc.classes).push.apply(_b, tslib_1.__spreadArray([], tslib_1.__read(classes), false));
+        Object.assign(acc.variables, variables);
+        return acc;
+    }, { classes: [], variables: {} });
 };
 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.push(getGridRange(props));
-    breakpoints.forEach(function (breakpoint) {
-        if (props[breakpoint]) {
-            classList.push(getGridRange(props[breakpoint], screens[breakpoint]));
-        }
-    });
-    return ((0, jsx_runtime_1.jsx)(box_1.Box, (0, tslib_1.__assign)({ "data-testid": "col" }, (0, utils_1.filterOwnProps)(breakpoints, props), { className: [classList, className, style] }, { children: children }), void 0));
+    var classesAndVars = getClassesAndVars(props);
+    var classesAndVarsForBreakpoints = breakpoints
+        .filter(function (breakpoint) { return props[breakpoint]; })
+        .map(function (breakpoint) { return getClassesAndVars(props[breakpoint], breakpoint); });
+    var _a = mergeClassesAndVars(tslib_1.__spreadArray([
+        classesAndVars
+    ], tslib_1.__read(classesAndVarsForBreakpoints), false)), gridClasses = _a.classes, gridVariables = _a.variables;
+    return ((0, jsx_runtime_1.jsx)(box_1.Box, tslib_1.__assign({ "data-testid": "col" }, (0, utils_1.filterOwnProps)(breakpoints, props), { className: [gridClasses, className], style: [gridVariables, style] }, { children: children })));
 };
 exports.Col = Col;
 exports.Col.displayName = 'Col';

package/grid/Grid.d.ts

@@ -3,12 +3,12 @@
  */
 import { ReactNode } from 'react';
 import { GridProps } from './types';
-export declare type Props = GridProps & {
+export 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;
+export declare const Grid: import("react").ForwardRefExoticComponent<Omit<import("react").AllHTMLAttributes<HTMLElement>, "className" | "style"> & {
+    $as?: import("react").ElementType | undefined;
+    className?: import("..").ClassName;
     style?: import("..").Styles;
 } & import("./types").Grid & {
     lg?: (number | import("./types").Grid) | undefined;
@@ -18,5 +18,5 @@ export declare const Grid: import("react").ForwardRefExoticComponent<Omit<import
     xs?: (number | import("./types").Grid) | undefined;
 } & {
     children?: ReactNode | ReactNode[];
-} & import("react").RefAttributes<HTMLDivElement>>;
+} & import("react").RefAttributes<HTMLElement>>;
 export default Grid;

package/grid/Grid.js

@@ -8,55 +8,72 @@ var jsx_runtime_1 = require("react/jsx-runtime");
  */
 var react_1 = require("react");
 var box_1 = require("../box");
-var useStyle_1 = (0, tslib_1.__importDefault)(require("../style/useStyle"));
+var useStyle_1 = tslib_1.__importDefault(require("../style/useStyle"));
 var utils_1 = require("./utils");
+var SW_SPACING_MULTIPLIER = 4;
 exports.Grid = (0, react_1.forwardRef)(function (props, ref) {
-    var theme = (0, useStyle_1.default)().theme;
+    var _a = (0, useStyle_1.default)(), theme = _a.theme, px2rem = _a.px2rem;
     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'];
+    var styleVariables = {};
     if (rows) {
-        classList.push("grid-rows-".concat(rows, " grid-flow-col"));
+        classList.push('grid-rows-[--sw-grid-rows] grid-flow-col');
+        styleVariables['--sw-grid-rows'] = rows.toString();
     }
     else {
-        classList.push("grid-cols-".concat(cols || 1, " grid-flow-row"));
+        classList.push('grid-cols-[--sw-grid-cols] grid-flow-row');
+        styleVariables['--sw-grid-cols'] = (cols || 1).toString();
     }
-    if (colGap)
-        classList.push("gap-x-".concat(colGap));
-    if (rowGap)
-        classList.push("gap-y-".concat(rowGap));
+    var scaledValue = function (value) { return px2rem(value * SW_SPACING_MULTIPLIER); };
     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));
-        }
+        classList.push('gap-x-[--sw-gap-x]');
+        styleVariables['--sw-gap-x'] = scaledValue(gap);
+        classList.push('gap-y-[--sw-gap-y]');
+        styleVariables['--sw-gap-y'] = scaledValue(gap);
+    }
+    if (colGap) {
+        classList.push('gap-x-[--sw-gap-x]');
+        styleVariables['--sw-gap-x'] = scaledValue(colGap);
+    }
+    if (rowGap) {
+        classList.push('gap-y-[--sw-gap-y]');
+        styleVariables['--sw-gap-y'] = scaledValue(rowGap);
     }
     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));
+        if (Number.isInteger(breakpoint)) {
+            classList.push("".concat(name, ":grid-cols-[--sw-grid-cols]"));
+            styleVariables["--sw-".concat(name, "-grid-cols")] = breakpoint;
+        }
+        if (breakpoint.cols && !breakpoint.rows) {
+            classList.push("".concat(name, ":grid-cols-[--sw-grid-cols]"));
+            styleVariables["--sw-".concat(name, "-grid-cols")] = breakpoint.cols;
+        }
+        if (breakpoint.rows && !breakpoint.cols) {
+            classList.push("".concat(name, ":grid-rows-[--sw-grid-rows]"));
+            styleVariables["--sw-".concat(name, "-grid-rows")] = breakpoint.rows;
+        }
+        if (breakpoint.gap) {
+            classList.push("".concat(name, ":gap-x-[--sw-gap-x]"));
+            styleVariables["--sw-".concat(name, "-gap-x")] = scaledValue(breakpoint.gap);
+            classList.push("".concat(name, ":gap-y-[--sw-gap-y]"));
+            styleVariables["--sw-".concat(name, "-gap-y")] = scaledValue(breakpoint.gap);
+        }
+        if (breakpoint.rowGap) {
+            classList.push("".concat(name, ":gap-y-[--sw-gap-y]"));
+            styleVariables["--sw-".concat(name, "-gap-y")] = scaledValue(breakpoint.rowGap);
+        }
+        if (breakpoint.colGap) {
+            classList.push("".concat(name, ":gap-x-[--sw-gap-x]"));
+            styleVariables["--sw-".concat(name, "-gap-x")] = scaledValue(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));
+    return ((0, jsx_runtime_1.jsx)(box_1.Box, tslib_1.__assign({}, (0, utils_1.filterOwnProps)(breakpoints, props), { className: [classList, className], style: [styleVariables, style], ref: ref }, { children: props.children })));
 });
 exports.Grid.displayName = 'Grid';
 exports.default = exports.Grid;