@spscommerce/ds-react 5.20.0 → 5.20.3-ie

package/dist/out-tsc/label/SpsLabel.d.ts

@@ -0,0 +1,20 @@
+import { SpsIcon } from "@spscommerce/ds-shared";
+import * as PropTypes from "../prop-types";
+import type { SpsFormControl } from "../form/hooks/formControl";
+import { SpsFormMetaBase } from "../form/hooks/useSpsForm";
+declare const propTypes: {
+    description: PropTypes.Requireable<string>;
+    for: PropTypes.Validator<SpsFormMetaBase<any> | SpsFormControl<any>>;
+    stronglySuggested: PropTypes.Requireable<boolean>;
+    help: PropTypes.Requireable<PropTypes.ReactNodeOrRenderFn>;
+    helpIcon: PropTypes.Requireable<SpsIcon>;
+    helpIconColor: PropTypes.Requireable<string>;
+    errors: PropTypes.Requireable<PropTypes.ReactNodeOrRenderFn>;
+    children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    className: PropTypes.Requireable<string>;
+    "data-testid": PropTypes.Requireable<string>;
+    unsafelyReplaceClassName: PropTypes.Requireable<string>;
+};
+export declare type SpsLabelProps = PropTypes.InferTS<typeof propTypes, HTMLLabelElement>;
+export declare function SpsLabel({ children, className, description, for: forProp, stronglySuggested, help, helpIcon, helpIconColor, errors, unsafelyReplaceClassName, "data-testid": testId, ...rest }: SpsLabelProps): JSX.Element;
+export {};

package/dist/out-tsc/label/SpsLabel.examples.d.ts

@@ -0,0 +1,2 @@
+import type { DSReactExamples } from "@spscommerce/ds-shared";
+export declare const SpsLabelExamples: DSReactExamples;

package/dist/out-tsc/label/SpsLabel.examples.js

@@ -0,0 +1,65 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { code } from "@spscommerce/utils";
+export var SpsLabelExamples = {
+    basic: {
+        label: "Basic",
+        examples: {
+            basic: {
+                react: code(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n                    function DemoComponent() {\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            companyName: \"\"\n                        });\n\n                        return <>\n                            <SpsLabel for={formMeta.fields.companyName}>\n                                Company Name\n                            </SpsLabel>\n                            <SpsTextInput value={formValue.companyName}\n                                formMeta={formMeta.fields.companyName}\n                            ></SpsTextInput>\n                        </>;\n                    }\n                "], ["\n                    function DemoComponent() {\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            companyName: \"\"\n                        });\n\n                        return <>\n                            <SpsLabel for={formMeta.fields.companyName}>\n                                Company Name\n                            </SpsLabel>\n                            <SpsTextInput value={formValue.companyName}\n                                formMeta={formMeta.fields.companyName}\n                            ></SpsTextInput>\n                        </>;\n                    }\n                "]))),
+            },
+        },
+    },
+    b_suggested: {
+        label: "Strongly Suggested",
+        examples: {
+            basic: {
+                react: code(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n                    function DemoComponent() {\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            companyName: \"\"\n                        });\n\n                        return <>\n                            <SpsLabel for={formMeta.fields.companyName} stronglySuggested>\n                                Company Name\n                            </SpsLabel>\n                            <SpsTextInput value={formValue.companyName}\n                                formMeta={formMeta.fields.companyName}\n                            ></SpsTextInput>\n                        </>;\n                    }\n                "], ["\n                    function DemoComponent() {\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            companyName: \"\"\n                        });\n\n                        return <>\n                            <SpsLabel for={formMeta.fields.companyName} stronglySuggested>\n                                Company Name\n                            </SpsLabel>\n                            <SpsTextInput value={formValue.companyName}\n                                formMeta={formMeta.fields.companyName}\n                            ></SpsTextInput>\n                        </>;\n                    }\n                "]))),
+            },
+        },
+    },
+    c_required: {
+        label: "Required",
+        examples: {
+            basic: {
+                react: code(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n                    function DemoComponent() {\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            companyName: \"\"\n                        }, {\n                            \"companyName\": [SpsValidators.required]\n                        });\n\n                        return <>\n                            <SpsLabel for={formMeta.fields.companyName}\n                                errors={() => formMeta.fields.companyName.hasError(\"required\")\n                                    && \"Please enter a company name.\"}\n                            >\n                                Company Name\n                            </SpsLabel>\n                            <SpsTextInput formMeta={formMeta.fields.companyName}\n                                value={formValue.companyName}\n                            ></SpsTextInput>\n                        </>;\n                    }\n                "], ["\n                    function DemoComponent() {\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            companyName: \"\"\n                        }, {\n                            \"companyName\": [SpsValidators.required]\n                        });\n\n                        return <>\n                            <SpsLabel for={formMeta.fields.companyName}\n                                errors={() => formMeta.fields.companyName.hasError(\"required\")\n                                    && \"Please enter a company name.\"}\n                            >\n                                Company Name\n                            </SpsLabel>\n                            <SpsTextInput formMeta={formMeta.fields.companyName}\n                                value={formValue.companyName}\n                            ></SpsTextInput>\n                        </>;\n                    }\n                "]))),
+            },
+        },
+    },
+    d_help: {
+        label: "Help Information",
+        examples: {
+            a_defaultIcon: {
+                description: "<p>Default icon</p>",
+                react: code(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n                    function DemoComponent() {\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            companyName: \"\"\n                        });\n\n                        return <>\n                            <SpsLabel for={formMeta.fields.companyName}\n                                help=\"Pretend there's something helpful written here.\"\n                            >\n                                Company Name\n                            </SpsLabel>\n                            <SpsTextInput formMeta={formMeta.fields.companyName}\n                                value={formValue.companyName}\n                            ></SpsTextInput>\n                        </>;\n                    }\n                "], ["\n                    function DemoComponent() {\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            companyName: \"\"\n                        });\n\n                        return <>\n                            <SpsLabel for={formMeta.fields.companyName}\n                                help=\"Pretend there's something helpful written here.\"\n                            >\n                                Company Name\n                            </SpsLabel>\n                            <SpsTextInput formMeta={formMeta.fields.companyName}\n                                value={formValue.companyName}\n                            ></SpsTextInput>\n                        </>;\n                    }\n                "]))),
+            },
+            b_customIcon: {
+                description: "<p>Custom icon</p>",
+                react: code(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n                    function DemoComponent() {\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            companyName: \"\"\n                        });\n\n                        return <>\n                            <SpsLabel for={formMeta.fields.companyName}\n                                help=\"Pretend there's something helpful written here.\"\n                                helpIcon={SpsIcon.EXCHANGE} helpIconColor=\"red200\"\n                            >\n                                Company Name\n                            </SpsLabel>\n                            <SpsTextInput formMeta={formMeta.fields.companyName}\n                                value={formValue.companyName}\n                            ></SpsTextInput>\n                        </>;\n                    }\n                "], ["\n                    function DemoComponent() {\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            companyName: \"\"\n                        });\n\n                        return <>\n                            <SpsLabel for={formMeta.fields.companyName}\n                                help=\"Pretend there's something helpful written here.\"\n                                helpIcon={SpsIcon.EXCHANGE} helpIconColor=\"red200\"\n                            >\n                                Company Name\n                            </SpsLabel>\n                            <SpsTextInput formMeta={formMeta.fields.companyName}\n                                value={formValue.companyName}\n                            ></SpsTextInput>\n                        </>;\n                    }\n                "]))),
+            },
+        },
+    },
+    e_validation: {
+        label: "Validation",
+        examples: {
+            basic: {
+                react: code(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n                    function DemoComponent() {\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            companyName: \"Target\"\n                        }, {\n                            \"companyName\": [SpsValidators.minLength(7)]\n                        });\n\n                        React.useEffect(() => {\n                            // Make validation error visible for the purpose of this demo\n                            formMeta.markAsDirty();\n                        }, []);\n\n                        return <>\n                            <SpsLabel for={formMeta.fields.companyName}\n                                errors={() => formMeta.fields.companyName.hasError(\"minLength\")\n                                    && \"Company Name must be at least 7 characters.\"}\n                            >\n                                Company Name\n                            </SpsLabel>\n                            <SpsTextInput formMeta={formMeta.fields.companyName}\n                                value={formValue.companyName}\n                            ></SpsTextInput>\n                        </>;\n                    }\n                "], ["\n                    function DemoComponent() {\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            companyName: \"Target\"\n                        }, {\n                            \"companyName\": [SpsValidators.minLength(7)]\n                        });\n\n                        React.useEffect(() => {\n                            // Make validation error visible for the purpose of this demo\n                            formMeta.markAsDirty();\n                        }, []);\n\n                        return <>\n                            <SpsLabel for={formMeta.fields.companyName}\n                                errors={() => formMeta.fields.companyName.hasError(\"minLength\")\n                                    && \"Company Name must be at least 7 characters.\"}\n                            >\n                                Company Name\n                            </SpsLabel>\n                            <SpsTextInput formMeta={formMeta.fields.companyName}\n                                value={formValue.companyName}\n                            ></SpsTextInput>\n                        </>;\n                    }\n                "]))),
+            },
+        },
+    },
+    f_combinations: {
+        label: "Combinations",
+        examples: {
+            a_combo1: {
+                react: code(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n                    function DemoComponent() {\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            companyName: \"Target\"\n                        }, {\n                            \"companyName\": [SpsValidators.minLength(7)]\n                        });\n\n                        React.useEffect(() => {\n                            // Make validation error visible for the purpose of this demo\n                            formMeta.markAsDirty();\n                        }, []);\n\n                        return <>\n                            <SpsLabel for={formMeta.fields.companyName}\n                                stronglySuggested\n                                errors={() => formMeta.fields.companyName.hasError(\"minLength\")\n                                    && \"Company Name must be at least 7 characters.\"}\n                            >\n                                Company Name\n                            </SpsLabel>\n                            <SpsTextInput formMeta={formMeta.fields.companyName}\n                                value={formValue.companyName}\n                            ></SpsTextInput>\n                        </>;\n                    }\n                "], ["\n                    function DemoComponent() {\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            companyName: \"Target\"\n                        }, {\n                            \"companyName\": [SpsValidators.minLength(7)]\n                        });\n\n                        React.useEffect(() => {\n                            // Make validation error visible for the purpose of this demo\n                            formMeta.markAsDirty();\n                        }, []);\n\n                        return <>\n                            <SpsLabel for={formMeta.fields.companyName}\n                                stronglySuggested\n                                errors={() => formMeta.fields.companyName.hasError(\"minLength\")\n                                    && \"Company Name must be at least 7 characters.\"}\n                            >\n                                Company Name\n                            </SpsLabel>\n                            <SpsTextInput formMeta={formMeta.fields.companyName}\n                                value={formValue.companyName}\n                            ></SpsTextInput>\n                        </>;\n                    }\n                "]))),
+            },
+            b_combo2: {
+                react: code(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n                    function DemoComponent() {\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            companyName: \"\"\n                        }, {\n                            \"companyName\": [SpsValidators.required]\n                        });\n\n                        return <>\n                            <SpsLabel for={formMeta.fields.companyName}\n                                help=\"Pretend there's something helpful written here.\"\n                                errors={() => formMeta.fields.companyName.hasError(\"required\")\n                                    && \"Please enter a company name.\"}\n                            >\n                                Company Name\n                            </SpsLabel>\n                            <SpsTextInput formMeta={formMeta.fields.companyName}\n                                value={formValue.companyName}\n                            ></SpsTextInput>\n                        </>;\n                    }\n                "], ["\n                    function DemoComponent() {\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            companyName: \"\"\n                        }, {\n                            \"companyName\": [SpsValidators.required]\n                        });\n\n                        return <>\n                            <SpsLabel for={formMeta.fields.companyName}\n                                help=\"Pretend there's something helpful written here.\"\n                                errors={() => formMeta.fields.companyName.hasError(\"required\")\n                                    && \"Please enter a company name.\"}\n                            >\n                                Company Name\n                            </SpsLabel>\n                            <SpsTextInput formMeta={formMeta.fields.companyName}\n                                value={formValue.companyName}\n                            ></SpsTextInput>\n                        </>;\n                    }\n                "]))),
+            },
+        },
+    },
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
+//# sourceMappingURL=SpsLabel.examples.js.map

package/dist/out-tsc/label/SpsLabel.examples.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpsLabel.examples.js","sourceRoot":"","sources":["../../../src/label/SpsLabel.examples.ts"],"names":[],"mappings":";;;;AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAG1C,MAAM,CAAC,IAAM,gBAAgB,GAAoB;IAC/C,KAAK,EAAE;QACL,KAAK,EAAE,OAAO;QACd,QAAQ,EAAE;YACR,KAAK,EAAE;gBACL,KAAK,EAAE,IAAI,+tBAAA,4pBAeF,IAAA;aACV;SACF;KACF;IACD,WAAW,EAAE;QACX,KAAK,EAAE,oBAAoB;QAC3B,QAAQ,EAAE;YACR,KAAK,EAAE;gBACL,KAAK,EAAE,IAAI,ivBAAA,8qBAeF,IAAA;aACV;SACF;KACF;IACD,UAAU,EAAE;QACV,KAAK,EAAE,UAAU;QACjB,QAAQ,EAAE;YACR,KAAK,EAAE;gBACL,KAAK,EAAE,IAAI,8gCAAA,28BAoBF,IAAA;aACV;SACF;KACF;IACD,MAAM,EAAE;QACN,KAAK,EAAE,kBAAkB;QACzB,QAAQ,EAAE;YACR,aAAa,EAAE;gBACb,WAAW,EAAE,qBAAqB;gBAClC,KAAK,EAAE,IAAI,u1BAAA,oxBAiBF,IAAA;aACV;YACD,YAAY,EAAE;gBACZ,WAAW,EAAE,oBAAoB;gBACjC,KAAK,EAAE,IAAI,66BAAA,02BAkBF,IAAA;aACV;SACF;KACF;IACD,YAAY,EAAE;QACZ,KAAK,EAAE,YAAY;QACnB,QAAQ,EAAE;YACR,KAAK,EAAE;gBACL,KAAK,EAAE,IAAI,4wCAAA,ysCAyBF,IAAA;aACV;SACF;KACF;IACD,cAAc,EAAE;QACd,KAAK,EAAE,cAAc;QACrB,QAAQ,EAAE;YACR,QAAQ,EAAE;gBACR,KAAK,EAAE,IAAI,+zCAAA,4vCA0BF,IAAA;aACV;YACD,QAAQ,EAAE;gBACR,KAAK,EAAE,IAAI,wmCAAA,qiCAqBF,IAAA;aACV;SACF;KACF;CACF,CAAC"}

package/dist/out-tsc/label/SpsLabel.js

@@ -0,0 +1,223 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __values = (this && this.__values) || function(o) {
+    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+    if (m) return m.call(o);
+    if (o && typeof o.length === "number") return {
+        next: function () {
+            if (o && i >= o.length) o = void 0;
+            return { value: o && o[i++], done: !o };
+        }
+    };
+    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+};
+import { Position, SpsIcon, TooltipKind, TooltipShowTrigger, } from "@spscommerce/ds-shared";
+import clsx from "clsx";
+import * as React from "react";
+import * as PropTypes from "../prop-types";
+import { I18nContext } from "../i18n";
+import { SpsTooltip, toggleTooltipState, TooltipVisibility } from "../tooltip/SpsTooltip";
+import { contentOf } from "../utils/contentOf";
+import { SpsFormMetaBase } from "../form/hooks/useSpsForm";
+import { SpsFormComponentWrapper } from "../form/SpsFormComponentWrapper";
+import { PreventativeErrorKeys } from "../form/validation/types";
+var propsDoc = {
+    for: { type: "SpsFormMetaBase<any>", required: true },
+    description: "string",
+    stronglySuggested: "boolean",
+    help: "ReactNodeOrRenderFn",
+    helpIcon: "SpsIcon",
+    helpIconColor: "string",
+    errors: "ReactNodeOrRenderFn",
+};
+var propTypes = __assign(__assign({}, PropTypes.spsGlobalPropTypes), { description: PropTypes.string, for: PropTypes.oneOfType([
+        PropTypes.impl(), PropTypes.impl(),
+    ]).isRequired, stronglySuggested: PropTypes.bool, help: PropTypes.nodeOrRenderFn, helpIcon: PropTypes.enumValue(SpsIcon), helpIconColor: PropTypes.string, errors: PropTypes.nodeOrRenderFn });
+export function SpsLabel(_a) {
+    var children = _a.children, className = _a.className, description = _a.description, forProp = _a.for, stronglySuggested = _a.stronglySuggested, help = _a.help, _b = _a.helpIcon, helpIcon = _b === void 0 ? SpsIcon.QUESTION_CIRCLE : _b, _c = _a.helpIconColor, helpIconColor = _c === void 0 ? "blue200" : _c, errors = _a.errors, unsafelyReplaceClassName = _a.unsafelyReplaceClassName, testId = _a["data-testid"], rest = __rest(_a, ["children", "className", "description", "for", "stronglySuggested", "help", "helpIcon", "helpIconColor", "errors", "unsafelyReplaceClassName", "data-testid"]);
+    var t = React.useContext(I18nContext).t;
+    var errorIcon = React.useRef();
+    var suggestedIcon = React.useRef();
+    var helpIconRef = React.useRef();
+    var labelRef = React.useRef();
+    var _d = __read(React.useState(TooltipVisibility.HIDDEN), 2), showHelpTip = _d[0], setShowHelpTip = _d[1];
+    var _e = __read(React.useState(TooltipVisibility.HIDDEN), 2), showErrorTip = _e[0], setShowErrorTip = _e[1];
+    var _f = __read(React.useState(TooltipVisibility.HIDDEN), 2), showSuggestedTip = _f[0], setShowSuggestedTip = _f[1];
+    var _g = __read(React.useState(TooltipVisibility.HIDDEN), 2), showPreventativeErrorTip = _g[0], setShowPreventativeErrorTip = _g[1];
+    function hideTooltips() {
+        setShowHelpTip(TooltipVisibility.HIDDEN);
+        setShowErrorTip(TooltipVisibility.HIDDEN);
+        setShowSuggestedTip(TooltipVisibility.HIDDEN);
+        setShowPreventativeErrorTip(TooltipVisibility.HIDDEN);
+    }
+    function delayedHideTooltips() {
+        setShowHelpTip(TooltipVisibility.DELAYED_HIDDEN);
+        setShowErrorTip(TooltipVisibility.DELAYED_HIDDEN);
+        setShowSuggestedTip(TooltipVisibility.DELAYED_HIDDEN);
+    }
+    function handleSuggestedIconClick(event) {
+        event.preventDefault();
+        hideTooltips();
+        setShowSuggestedTip(toggleTooltipState(showSuggestedTip));
+    }
+    function getPriorityTooltip() {
+        if (forProp && ((forProp instanceof SpsFormMetaBase && forProp.isVisibilyInvalid())
+            || (!(forProp instanceof SpsFormMetaBase) && !forProp.isValid()))) {
+            return [showErrorTip, setShowErrorTip];
+        }
+        if (forProp && ((forProp instanceof SpsFormMetaBase && forProp.hasPreventativeErrors()))) {
+            return [showPreventativeErrorTip, setShowPreventativeErrorTip];
+        }
+        if (help) {
+            return [showHelpTip, setShowHelpTip];
+        }
+        if (stronglySuggested) {
+            return [showSuggestedTip, setShowSuggestedTip];
+        }
+        return [TooltipVisibility.HIDDEN, function () { }];
+    }
+    function handleLabelClick() {
+        hideTooltips();
+        var _a = __read(getPriorityTooltip(), 2), showPriorityTooltip = _a[0], setShowPriorityTooltip = _a[1];
+        setShowPriorityTooltip(toggleTooltipState(showPriorityTooltip));
+    }
+    function doShowPriorityTooltip() {
+        hideTooltips();
+        var _a = __read(getPriorityTooltip(), 2), setShowPriorityTooltip = _a[1];
+        setShowPriorityTooltip(TooltipVisibility.VISIBLE);
+    }
+    function handleHelpClick() {
+        hideTooltips();
+        setShowHelpTip(toggleTooltipState(showHelpTip));
+    }
+    React.useEffect(function () {
+        if (forProp) {
+            /* eslint-disable no-param-reassign */
+            forProp.onFocus = doShowPriorityTooltip;
+            forProp.onBlur = hideTooltips;
+            /* eslint-enable no-param-reassign */
+        }
+    }, [forProp]);
+    var classes = clsx(unsafelyReplaceClassName || "sps-form-group__label", className);
+    var _h = __read(forProp instanceof SpsFormMetaBase
+        ? [forProp, undefined]
+        : [undefined, forProp], 2), formMeta = _h[0], formControl = _h[1];
+    function builtinValidationErrors() {
+        var e_1, _a;
+        if (formMeta) {
+            try {
+                for (var _b = __values([
+                    "dateFormat",
+                    "dateRangeOrder",
+                    "dateValidity",
+                    "required",
+                ]), _c = _b.next(); !_c.done; _c = _b.next()) {
+                    var errType = _c.value;
+                    if (formMeta.hasError(errType)) {
+                        return t("design-system:label.errors." + errType, { context: formMeta.errors[errType] });
+                    }
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+                }
+                finally { if (e_1) throw e_1.error; }
+            }
+            if (formMeta.hasError("dateConstraint")) {
+                var errorMetadata = formMeta.errors.dateConstraint;
+                var whichExceeded = errorMetadata.minExceeded
+                    ? "min"
+                    : "max";
+                return t("design-system:label.errors.dateConstraint." + whichExceeded, { context: formMeta.errors.dateConstraint });
+            }
+        }
+        return null;
+    }
+    function builtinPreventativeErrors() {
+        var e_2, _a;
+        if (formMeta) {
+            try {
+                for (var PreventativeErrorKeys_1 = __values(PreventativeErrorKeys), PreventativeErrorKeys_1_1 = PreventativeErrorKeys_1.next(); !PreventativeErrorKeys_1_1.done; PreventativeErrorKeys_1_1 = PreventativeErrorKeys_1.next()) {
+                    var errType = PreventativeErrorKeys_1_1.value;
+                    if (formMeta.hasPreventativeError(errType)) {
+                        return t("design-system:label.preventativeErrors." + errType);
+                    }
+                }
+            }
+            catch (e_2_1) { e_2 = { error: e_2_1 }; }
+            finally {
+                try {
+                    if (PreventativeErrorKeys_1_1 && !PreventativeErrorKeys_1_1.done && (_a = PreventativeErrorKeys_1.return)) _a.call(PreventativeErrorKeys_1);
+                }
+                finally { if (e_2) throw e_2.error; }
+            }
+        }
+        return null;
+    }
+    React.useEffect(function () {
+        if (formMeta === null || formMeta === void 0 ? void 0 : formMeta.hasPreventativeErrors()) {
+            setShowPreventativeErrorTip(TooltipVisibility.VISIBLE);
+        }
+    }, [formMeta === null || formMeta === void 0 ? void 0 : formMeta.hasPreventativeErrors()]);
+    return (React.createElement(SpsFormComponentWrapper, { formMeta: formMeta, formControl: formControl },
+        React.createElement("label", __assign({ htmlFor: forProp && "id" in forProp ? forProp.id : undefined, className: classes, "data-testid": testId }, rest),
+            React.createElement("i", { ref: suggestedIcon, "data-testid": testId + "__suggested-icon", className: clsx("sps-icon", "sps-icon-exclamation-triangle", "orange200", "sps-form-group__label-suggested-icon", !stronglySuggested && "d-none"), onClick: handleSuggestedIconClick, onMouseEnter: function () {
+                    hideTooltips();
+                    setShowSuggestedTip(TooltipVisibility.VISIBLE);
+                }, onMouseLeave: delayedHideTooltips }),
+            React.createElement("i", { ref: errorIcon, "data-testid": testId + "__error-icon", className: clsx("sps-icon", "sps-icon-exclamation-circle", "sps-form-group__label--error-icon"), onClick: handleLabelClick, onMouseEnter: doShowPriorityTooltip, onMouseLeave: delayedHideTooltips }),
+            React.createElement("span", { ref: labelRef, className: "sps-form-group__label-content" }, children),
+            React.createElement("i", { ref: helpIconRef, "data-testid": testId + "__help-icon", className: clsx("sps-icon", "sps-icon-" + helpIcon, helpIconColor, !help && "d-none"), onClick: handleHelpClick, onMouseEnter: function () {
+                    hideTooltips();
+                    setShowHelpTip(TooltipVisibility.VISIBLE);
+                }, onMouseLeave: delayedHideTooltips })),
+        React.createElement(SpsTooltip, { kind: TooltipKind.DEFAULT, for: helpIconRef, showOn: TooltipShowTrigger.MANUAL, isShown: showHelpTip, altPosition: Position.TOP_MIDDLE }, contentOf(help)),
+        React.createElement(SpsTooltip, { kind: TooltipKind.ERROR, for: errorIcon, showOn: TooltipShowTrigger.MANUAL, isShown: showErrorTip, altPosition: Position.LEFT_MIDDLE }, contentOf(errors) || builtinValidationErrors()),
+        (formMeta === null || formMeta === void 0 ? void 0 : formMeta.hasPreventativeErrors()) && React.createElement(SpsTooltip, { kind: TooltipKind.WARNING, for: labelRef, showOn: TooltipShowTrigger.MANUAL, isShown: showPreventativeErrorTip, altPosition: Position.LEFT_MIDDLE }, contentOf(errors) || builtinPreventativeErrors()),
+        React.createElement(SpsTooltip, { kind: TooltipKind.DEFAULT, for: suggestedIcon, position: Position.TOP_LEFT, altPosition: Position.TOP_LEFT, offsets: [13, 20], showOn: TooltipShowTrigger.MANUAL, isShown: showSuggestedTip }, t("design-system:label.stronglySuggested")),
+        description && (React.createElement("div", { className: "sps-form-control__description", "data-testid": testId + "__description" }, description))));
+}
+Object.assign(SpsLabel, {
+    props: propsDoc,
+    propTypes: propTypes,
+    displayName: "SpsLabel",
+});
+//# sourceMappingURL=SpsLabel.js.map

package/dist/out-tsc/label/SpsLabel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpsLabel.js","sourceRoot":"","sources":["../../../src/label/SpsLabel.tsx"],"names":[],"mappings":"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"}

package/dist/out-tsc/label/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./SpsLabel";
+export * from "./SpsLabel.examples";

package/dist/out-tsc/label/index.js

@@ -0,0 +1,3 @@
+export * from "./SpsLabel";
+export * from "./SpsLabel.examples";
+//# sourceMappingURL=index.js.map

package/dist/out-tsc/label/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/label/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,qBAAqB,CAAC"}

package/dist/out-tsc/list-action-bar/SpsListActionBar.d.ts

@@ -0,0 +1,12 @@
+import * as PropTypes from "../prop-types";
+declare const propTypes: {
+    clearSelected: PropTypes.Validator<() => void>;
+    itemsSelected: PropTypes.Requireable<string | number>;
+    children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    className: PropTypes.Requireable<string>;
+    "data-testid": PropTypes.Requireable<string>;
+    unsafelyReplaceClassName: PropTypes.Requireable<string>;
+};
+export declare type SpsListActionBarProps = PropTypes.InferTS<typeof propTypes, HTMLDivElement>;
+export declare function SpsListActionBar(props: SpsListActionBarProps): JSX.Element;
+export {};

package/dist/out-tsc/list-action-bar/SpsListActionBar.examples.d.ts

@@ -0,0 +1,2 @@
+import type { DSReactExamples } from "@spscommerce/ds-shared";
+export declare const SpsListActionBarExamples: DSReactExamples;

package/dist/out-tsc/list-action-bar/SpsListActionBar.examples.js

@@ -0,0 +1,61 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+/* eslint-disable react/prop-types */
+/* eslint-disable react/jsx-one-expression-per-line */
+import * as React from "react";
+import { code } from "@spscommerce/utils";
+import { SpsTable, SpsTableHead, SpsTableHeader, SpsTableBody, SpsTableRow, SpsTableCell, } from "../table";
+import { SpsTag } from "../tag";
+export var SpsListActionBarExamples = {
+    general: {
+        label: "General Usage",
+        description: function (_a) {
+            var NavigateTo = _a.NavigateTo;
+            return (React.createElement(React.Fragment, null,
+                React.createElement("p", null, "The Action Bar is divided into three sections: Selection Counter, Action Buttons, and Clear Button. It spans the entire width of the browser window. The count in the Selection Counter persists across paginated views"),
+                React.createElement("p", null,
+                    "For more information on acceptable content varieties in the Action Buttons section, refer to the Button Groups section on the",
+                    " ",
+                    React.createElement(NavigateTo, { to: "button" }, "Buttons"),
+                    " page"),
+                React.createElement("img", { src: "assets/images/list-action-bar-example.svg", alt: "A List Action Bar with labels on each section", className: "w-100 mb-3" }),
+                React.createElement(SpsTable, null,
+                    React.createElement(SpsTableHead, null,
+                        React.createElement(SpsTableHeader, null, "Order"),
+                        React.createElement(SpsTableHeader, null, "Section"),
+                        React.createElement(SpsTableHeader, null, "Content Varieties")),
+                    React.createElement(SpsTableBody, null,
+                        React.createElement(SpsTableRow, null,
+                            React.createElement(SpsTableCell, null,
+                                React.createElement("span", { className: "sps-tag sps-tag--info" }, "1")),
+                            React.createElement(SpsTableCell, null, "Selection Counter"),
+                            React.createElement(SpsTableCell, null)),
+                        React.createElement(SpsTableRow, null,
+                            React.createElement(SpsTableCell, null,
+                                React.createElement("span", { className: "sps-tag sps-tag--info" }, "2")),
+                            React.createElement(SpsTableCell, null, "Action Buttons"),
+                            React.createElement(SpsTableCell, null)),
+                        React.createElement(SpsTableRow, null,
+                            React.createElement(SpsTableCell, null,
+                                React.createElement("span", { className: "sps-tag sps-tag--info" }, "3")),
+                            React.createElement(SpsTableCell, null, "Clear Button"),
+                            React.createElement(SpsTableCell, null,
+                                React.createElement(SpsTag, { className: "mr-1" }, "Basic Buttons"),
+                                React.createElement(SpsTag, { className: "mr-1" }, "Icon Buttons"),
+                                React.createElement(SpsTag, { className: "mr-1" }, "Text Buttons")))))));
+        },
+    },
+    actionBar: {
+        label: "Action Bar",
+        description: "This example makes use of the Text Buttons + Icon Buttons + Basic Buttons Group.",
+        examples: {
+            basic: {
+                react: code(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n                    function SpsActionBarExample() {\n                        const [itemsSelected, setItemsSelected] = React.useState(0);\n\n                        function handleClear() {\n                            setItemsSelected(0);\n                        }\n\n                        function showExample() {\n                            setItemsSelected(3);\n                        }\n\n                        return (\n                            <>\n                                <SpsButton kind={ButtonKind.LINK} onClick={showExample}>Show Action Bar</SpsButton>\n                                <SpsListActionBar itemsSelected={itemsSelected} clearSelected={handleClear}>\n                                    <SpsButton kind={ButtonKind.LINK}>Text Button</SpsButton>\n                                    <SpsVr style={{ marginLeft: \"15px\" }} />\n                                    <SpsButton kind={ButtonKind.ICON} icon={SpsIcon.PRINTER} aria-label=\"Print\" />\n                                    <SpsButton kind={ButtonKind.ICON} icon={SpsIcon.DOWNLOAD_CLOUD} aria-label=\"Download\" />\n                                    <SpsVr style={{ marginRight: \"15px\" }} />\n                                    <SpsButton className=\"mr-1\">Button</SpsButton>\n                                    <SpsButton kind={ButtonKind.KEY} className=\"mr-1\">Button</SpsButton>\n                                    <SpsButton kind={ButtonKind.CONFIRM} className=\"mr-1\">Button</SpsButton>\n                                </SpsListActionBar>\n                            </>\n                        )\n                    }\n                "], ["\n                    function SpsActionBarExample() {\n                        const [itemsSelected, setItemsSelected] = React.useState(0);\n\n                        function handleClear() {\n                            setItemsSelected(0);\n                        }\n\n                        function showExample() {\n                            setItemsSelected(3);\n                        }\n\n                        return (\n                            <>\n                                <SpsButton kind={ButtonKind.LINK} onClick={showExample}>Show Action Bar</SpsButton>\n                                <SpsListActionBar itemsSelected={itemsSelected} clearSelected={handleClear}>\n                                    <SpsButton kind={ButtonKind.LINK}>Text Button</SpsButton>\n                                    <SpsVr style={{ marginLeft: \"15px\" }} />\n                                    <SpsButton kind={ButtonKind.ICON} icon={SpsIcon.PRINTER} aria-label=\"Print\" />\n                                    <SpsButton kind={ButtonKind.ICON} icon={SpsIcon.DOWNLOAD_CLOUD} aria-label=\"Download\" />\n                                    <SpsVr style={{ marginRight: \"15px\" }} />\n                                    <SpsButton className=\"mr-1\">Button</SpsButton>\n                                    <SpsButton kind={ButtonKind.KEY} className=\"mr-1\">Button</SpsButton>\n                                    <SpsButton kind={ButtonKind.CONFIRM} className=\"mr-1\">Button</SpsButton>\n                                </SpsListActionBar>\n                            </>\n                        )\n                    }\n                "]))),
+            },
+        },
+    },
+};
+var templateObject_1;
+//# sourceMappingURL=SpsListActionBar.examples.js.map

package/dist/out-tsc/list-action-bar/SpsListActionBar.examples.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpsListActionBar.examples.js","sourceRoot":"","sources":["../../../src/list-action-bar/SpsListActionBar.examples.tsx"],"names":[],"mappings":";;;;AAAA,qCAAqC;AACrC,sDAAsD;AACtD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAE1C,OAAO,EACL,QAAQ,EACR,YAAY,EACZ,cAAc,EACd,YAAY,EACZ,WAAW,EACX,YAAY,GACb,MAAM,UAAU,CAAC;AAClB,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAEhC,MAAM,CAAC,IAAM,wBAAwB,GAAoB;IACvD,OAAO,EAAE;QACP,KAAK,EAAE,eAAe;QACtB,WAAW,EAAE,UAAC,EAAc;gBAAZ,UAAU,gBAAA;YAAO,OAAA,CAC/B;gBACE,yPAII;gBACJ;;oBAE+D,GAAG;oBAChE,oBAAC,UAAU,IAAC,EAAE,EAAC,QAAQ,cAAqB;4BAC1C;gBACJ,6BACE,GAAG,EAAC,2CAA2C,EAC/C,GAAG,EAAC,+CAA+C,EACnD,SAAS,EAAC,YAAY,GACtB;gBACF,oBAAC,QAAQ;oBACP,oBAAC,YAAY;wBACX,oBAAC,cAAc,gBAAuB;wBACtC,oBAAC,cAAc,kBAAyB;wBACxC,oBAAC,cAAc,4BAAmC,CACrC;oBACf,oBAAC,YAAY;wBACX,oBAAC,WAAW;4BACV,oBAAC,YAAY;gCACX,8BAAM,SAAS,EAAC,uBAAuB,QAAS,CACnC;4BACf,oBAAC,YAAY,4BAAiC;4BAC9C,oBAAC,YAAY,OAAG,CACJ;wBACd,oBAAC,WAAW;4BACV,oBAAC,YAAY;gCACX,8BAAM,SAAS,EAAC,uBAAuB,QAAS,CACnC;4BACf,oBAAC,YAAY,yBAA8B;4BAC3C,oBAAC,YAAY,OAAG,CACJ;wBACd,oBAAC,WAAW;4BACV,oBAAC,YAAY;gCACX,8BAAM,SAAS,EAAC,uBAAuB,QAAS,CACnC;4BACf,oBAAC,YAAY,uBAA4B;4BACzC,oBAAC,YAAY;gCACX,oBAAC,MAAM,IAAC,SAAS,EAAC,MAAM,oBAAuB;gCAC/C,oBAAC,MAAM,IAAC,SAAS,EAAC,MAAM,mBAAsB;gCAC9C,oBAAC,MAAM,IAAC,SAAS,EAAC,MAAM,mBAAsB,CACjC,CACH,CACD,CACN,CACV,CACJ;QApDgC,CAoDhC;KACF;IACD,SAAS,EAAE;QACT,KAAK,EAAE,YAAY;QACnB,WAAW,EACH,kFAAkF;QAC1F,QAAQ,EAAE;YACR,KAAK,EAAE;gBACL,KAAK,EAAE,IAAI,4rDAAA,ynDA4BF,IAAA;aACV;SACF;KACF;CACF,CAAC"}

package/dist/out-tsc/list-action-bar/SpsListActionBar.js

@@ -0,0 +1,59 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import clsx from "clsx";
+import * as React from "react";
+import { ButtonKind, SpsIcon } from "@spscommerce/ds-shared";
+import * as PropTypes from "../prop-types";
+import { I18nContext } from "../i18n";
+import { PortalContext } from "../utils/usePortal";
+import { SpsButton, } from "../button/SpsButton";
+var propsDoc = {
+    clearSelected: { type: "() => void", required: true },
+    itemsSelected: { type: "string | number", required: true },
+};
+var propTypes = __assign(__assign({}, PropTypes.spsGlobalPropTypes), { clearSelected: PropTypes.fun().isRequired, itemsSelected: PropTypes.oneOfType([PropTypes.string, PropTypes.number]) });
+export function SpsListActionBar(props) {
+    var itemsSelected = props.itemsSelected, clearSelected = props.clearSelected, children = props.children, className = props.className, testId = props["data-testid"], unsafelyReplaceClassName = props.unsafelyReplaceClassName, rest = __rest(props, ["itemsSelected", "clearSelected", "children", "className", "data-testid", "unsafelyReplaceClassName"]);
+    var t = React.useContext(I18nContext).t;
+    var handleClearClick = function () {
+        if (typeof clearSelected === "function") {
+            clearSelected();
+        }
+    };
+    var classes = clsx(unsafelyReplaceClassName || "sps-list-action-bar-container", "z-stratum-bar", className);
+    return ((!!itemsSelected && (React.createElement("div", __assign({ className: classes }, rest, { "data-testid": testId }),
+        React.createElement("div", { className: "sps-list-action-bar" },
+            React.createElement("div", { className: "sps-list-action-bar__details" },
+                React.createElement("span", { className: "sps-tag sps-tag--info", "data-testid": testId + "__badge" }, itemsSelected),
+                t("design-system:listActionBar.itemsSelected")),
+            React.createElement("div", { className: "sps-list-action-bar__actions" },
+                React.createElement(PortalContext.Provider, { value: { fixed: true } }, children)),
+            React.createElement("div", { className: "sps-list-action-bar__clear" },
+                React.createElement(SpsButton, { kind: ButtonKind.LINK, icon: SpsIcon.X, onClick: handleClearClick, "data-testid": testId + "__clear-button" }, t("design-system:listActionBar.clearSelected"))))))));
+}
+Object.assign(SpsListActionBar, {
+    props: propsDoc,
+    propTypes: propTypes,
+    displayName: "SpsListActionBar",
+});
+//# sourceMappingURL=SpsListActionBar.js.map

package/dist/out-tsc/list-action-bar/SpsListActionBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpsListActionBar.js","sourceRoot":"","sources":["../../../src/list-action-bar/SpsListActionBar.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAE7D,OAAO,KAAK,SAAS,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AACtC,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAEnD,OAAO,EACL,SAAS,GACV,MAAM,qBAAqB,CAAC;AAE7B,IAAM,QAAQ,GAAG;IACf,aAAa,EAAE,EAAE,IAAI,EAAE,YAAY,EAAE,QAAQ,EAAE,IAAI,EAAE;IACrD,aAAa,EAAE,EAAE,IAAI,EAAE,iBAAiB,EAAE,QAAQ,EAAE,IAAI,EAAE;CAC3D,CAAC;AAEF,IAAM,SAAS,yBACV,SAAS,CAAC,kBAAkB,KAC/B,aAAa,EAAE,SAAS,CAAC,GAAG,EAAc,CAAC,UAAU,EACrD,aAAa,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC,SAAS,CAAC,MAAM,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC,GACzE,CAAC;AAIF,MAAM,UAAU,gBAAgB,CAAC,KAA4B;IAEzD,IAAA,aAAa,GAOX,KAAK,cAPM,EACb,aAAa,GAMX,KAAK,cANM,EACb,QAAQ,GAKN,KAAK,SALC,EACR,SAAS,GAIP,KAAK,UAJE,EACM,MAAM,GAGnB,KAAK,eAHc,EACrB,wBAAwB,GAEtB,KAAK,yBAFiB,EACrB,IAAI,UACL,KAAK,EARH,sGAQL,CADQ,CACC;IAEF,IAAA,CAAC,GAAK,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,EAAlC,CAAmC;IAE5C,IAAM,gBAAgB,GAAG;QACvB,IAAI,OAAO,aAAa,KAAK,UAAU,EAAE;YACvC,aAAa,EAAE,CAAC;SACjB;IACH,CAAC,CAAC;IAEF,IAAM,OAAO,GAAG,IAAI,CAClB,wBAAwB,IAAI,+BAA+B,EAC3D,eAAe,EACf,SAAS,CACV,CAAC;IAEF,OAAO,CACL,CAAC,CAAC,CAAC,aAAa,IAAI,CAClB,sCAAK,SAAS,EAAE,OAAO,IAAM,IAAI,mBAAe,MAAM;QACpD,6BAAK,SAAS,EAAC,qBAAqB;YAClC,6BAAK,SAAS,EAAC,8BAA8B;gBAC3C,8BAAM,SAAS,EAAC,uBAAuB,iBAAiB,MAAM,YAAS,IAAG,aAAa,CAAQ;gBAC9F,CAAC,CAAC,2CAA2C,CAAC,CAC3C;YACN,6BAAK,SAAS,EAAC,8BAA8B;gBAC3C,oBAAC,aAAa,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,IAC3C,QAAQ,CACc,CACrB;YACN,6BAAK,SAAS,EAAC,4BAA4B;gBACzC,oBAAC,SAAS,IACR,IAAI,EAAE,UAAU,CAAC,IAAI,EACrB,IAAI,EAAE,OAAO,CAAC,CAAC,EACf,OAAO,EAAE,gBAAgB,iBACT,MAAM,mBAAgB,IAErC,CAAC,CAAC,2CAA2C,CAAC,CACrC,CACR,CACF,CACF,CACP,CAAC,CACH,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,CAAC,gBAAgB,EAAE;IAC9B,KAAK,EAAE,QAAQ;IACf,SAAS,WAAA;IACT,WAAW,EAAE,kBAAkB;CAChC,CAAC,CAAC"}

package/dist/out-tsc/list-action-bar/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./SpsListActionBar";
+export * from "./SpsListActionBar.examples";

package/dist/out-tsc/list-action-bar/index.js

@@ -0,0 +1,3 @@
+export * from "./SpsListActionBar";
+export * from "./SpsListActionBar.examples";
+//# sourceMappingURL=index.js.map

package/dist/out-tsc/list-action-bar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/list-action-bar/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,6BAA6B,CAAC"}

package/dist/out-tsc/list-toolbar/SpsListToolbar.d.ts

@@ -0,0 +1,27 @@
+import type { SpsTab } from "@spscommerce/ds-shared";
+import * as PropTypes from "../prop-types";
+declare const propTypes: {
+    activeTab: PropTypes.Requireable<SpsTab>;
+    advancedSearch: PropTypes.Requireable<PropTypes.InferProps<{
+        isOpen: PropTypes.Requireable<boolean>;
+        enteredFields: PropTypes.Requireable<number>;
+    }>>;
+    onToggleAdvancedSearch: PropTypes.Requireable<(boolean: any) => void>;
+    onTabChange: PropTypes.Requireable<(SpsTab: any) => void>;
+    title: PropTypes.Requireable<string>;
+    tabs: PropTypes.Requireable<SpsTab[]>;
+    onToolbarPinned: PropTypes.Requireable<(boolean: any) => void>;
+    selectable: PropTypes.Requireable<boolean>;
+    isSelected: PropTypes.Requireable<boolean>;
+    isIndeterminate: PropTypes.Requireable<boolean>;
+    onSelectionChange: PropTypes.Requireable<(boolean: any) => void>;
+    pinResultsBar: PropTypes.Requireable<boolean>;
+    pinToolbar: PropTypes.Requireable<boolean>;
+    children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    className: PropTypes.Requireable<string>;
+    "data-testid": PropTypes.Requireable<string>;
+    unsafelyReplaceClassName: PropTypes.Requireable<string>;
+};
+export declare type SpsListToolbarProps = PropTypes.InferTS<typeof propTypes, HTMLDivElement>;
+export declare function SpsListToolbar(props: SpsListToolbarProps): JSX.Element;
+export {};

package/dist/out-tsc/list-toolbar/SpsListToolbar.examples.d.ts

@@ -0,0 +1,3 @@
+import type { DSReactExamples } from "@spscommerce/ds-shared";
+export declare function ContentOrderExample(): JSX.Element;
+export declare const SpsListToolbarExamples: DSReactExamples;