@spscommerce/ds-react 5.20.0 → 5.20.3-ie

package/dist/out-tsc/fieldset/SpsFieldset.examples.js

@@ -0,0 +1,54 @@
+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 SpsFieldsetExamples = {
+    basic: {
+        label: "Basic Fieldsets",
+        description: "info about basic fieldsets",
+        examples: {
+            basic: {
+                react: code(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n                    function DemoComponent() {\n                        const RADIO_OPTIONS = [\n                            { value: \"a\", label: \"Option A\" },\n                            { value: \"b\", label: \"Option B\" }\n                        ];\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            myFieldset: {\n                                foo: \"\",\n                                bar: \"\",\n                                baz: RADIO_OPTIONS[0].value\n                            }\n                        });\n\n                        return <>\n                            <SpsFieldset formMeta={formMeta.fields.myFieldset} legend=\"Fieldset Legend\" tooltip=\"Add a Tooltip\">\n                                <div className=\"sfg-row\">\n                                    <div className=\"sfg-col-4\">\n                                        <SpsLabel for={formMeta.fields.myFieldset.fields.foo}>Foo</SpsLabel>\n                                        <SpsTextInput formMeta={formMeta.fields.myFieldset.fields.foo}\n                                            value={formValue.myFieldset.foo}\n                                        ></SpsTextInput>\n                                    </div>\n                                    <div className=\"sfg-col-4\">\n                                        <SpsLabel for={formMeta.fields.myFieldset.fields.bar}>Bar</SpsLabel>\n                                        <SpsTextInput formMeta={formMeta.fields.myFieldset.fields.bar}\n                                            value={formValue.myFieldset.bar}\n                                        ></SpsTextInput>\n                                    </div>\n                                    <div className=\"sfg-col-4\">\n                                        <SpsLabel for={formMeta.fields.myFieldset.fields.baz}>Baz</SpsLabel>\n                                        {RADIO_OPTIONS.map(option => (\n                                            <SpsRadioButton key={option.value} name=\"baz\"\n                                                label={option.label} value={option.value}\n                                                formMeta={formMeta.fields.myFieldset.fields.baz}\n                                                checked={formValue.myFieldset.baz === option.value}\n                                            />\n                                        ))}\n                                    </div>\n                                </div>\n                            </SpsFieldset>\n                        </>\n                    }\n                "], ["\n                    function DemoComponent() {\n                        const RADIO_OPTIONS = [\n                            { value: \"a\", label: \"Option A\" },\n                            { value: \"b\", label: \"Option B\" }\n                        ];\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            myFieldset: {\n                                foo: \"\",\n                                bar: \"\",\n                                baz: RADIO_OPTIONS[0].value\n                            }\n                        });\n\n                        return <>\n                            <SpsFieldset formMeta={formMeta.fields.myFieldset} legend=\"Fieldset Legend\" tooltip=\"Add a Tooltip\">\n                                <div className=\"sfg-row\">\n                                    <div className=\"sfg-col-4\">\n                                        <SpsLabel for={formMeta.fields.myFieldset.fields.foo}>Foo</SpsLabel>\n                                        <SpsTextInput formMeta={formMeta.fields.myFieldset.fields.foo}\n                                            value={formValue.myFieldset.foo}\n                                        ></SpsTextInput>\n                                    </div>\n                                    <div className=\"sfg-col-4\">\n                                        <SpsLabel for={formMeta.fields.myFieldset.fields.bar}>Bar</SpsLabel>\n                                        <SpsTextInput formMeta={formMeta.fields.myFieldset.fields.bar}\n                                            value={formValue.myFieldset.bar}\n                                        ></SpsTextInput>\n                                    </div>\n                                    <div className=\"sfg-col-4\">\n                                        <SpsLabel for={formMeta.fields.myFieldset.fields.baz}>Baz</SpsLabel>\n                                        {RADIO_OPTIONS.map(option => (\n                                            <SpsRadioButton key={option.value} name=\"baz\"\n                                                label={option.label} value={option.value}\n                                                formMeta={formMeta.fields.myFieldset.fields.baz}\n                                                checked={formValue.myFieldset.baz === option.value}\n                                            />\n                                        ))}\n                                    </div>\n                                </div>\n                            </SpsFieldset>\n                        </>\n                    }\n                "]))),
+            },
+        },
+    },
+    b_nested: {
+        label: "Nested Fieldsets",
+        description: "info about nested fieldsets",
+        examples: {
+            nested: {
+                react: code(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n                    function DemoComponent() {\n                        const RADIO_OPTIONS = [\n                            { value: \"a\", label: \"Option A\" },\n                            { value: \"b\", label: \"Option B\" }\n                        ];\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            topFieldset: {\n                                foo: \"\",\n                                fsNested: {\n                                    bar: RADIO_OPTIONS[1].value,\n                                    fsNested2: {\n                                        baz: \"\"\n                                    }\n                                }\n                            }\n                        });\n\n                        return <>\n                            <SpsFieldset formMeta={formMeta.fields.topFieldset} legend=\"Fieldset Legend\">\n                                <div className=\"sfg-row\">\n                                    <div className=\"sfg-col-4\">\n                                        <SpsLabel for={formMeta.fields.topFieldset.fields.foo}>Foo</SpsLabel>\n                                        <SpsTextInput formMeta={formMeta.fields.topFieldset.fields.foo}\n                                            value={formValue.topFieldset.foo}\n                                            placeholder=\"Enter a thing\"\n                                        ></SpsTextInput>\n                                    </div>\n                                </div>\n                                <SpsFieldset formMeta={formMeta.fields.topFieldset.fields.fsNested} legend=\"Nested Fieldset\">\n                                    <div className=\"sfg-row\">\n                                        <div className=\"sfg-col-4\">\n                                            <SpsLabel for={formMeta.fields.topFieldset.fields.fsNested.fields.bar}>Bar</SpsLabel>\n                                            {RADIO_OPTIONS.map(option => (\n                                                <SpsRadioButton key={option.value} name=\"fsRadio\"\n                                                    label={option.label} value={option.value}\n                                                    formMeta={formMeta.fields.topFieldset.fields.fsNested.fields.bar}\n                                                    checked={formValue.topFieldset.fsNested.bar === option.value}\n                                                />\n                                            ))}\n                                        </div>\n                                    </div>\n                                    <SpsFieldset formMeta={formMeta.fields.topFieldset.fields.fsNested.fields.fsNested2} legend=\"Doubly Nested Fieldset\">\n                                        <div className=\"sfg-row\">\n                                            <div className=\"sfg-col-4\">\n                                                <SpsLabel for={formMeta.fields.topFieldset.fields.fsNested.fields.fsNested2.fields.baz}>Baz</SpsLabel>\n                                                <SpsTextInput formMeta={formMeta.fields.topFieldset.fields.fsNested.fields.fsNested2.fields.baz}\n                                                    value={formValue.topFieldset.fsNested.baz}\n                                                    placeholder=\"Enter a thing\"\n                                                ></SpsTextInput>\n                                            </div>\n                                        </div>\n                                    </SpsFieldset>\n                                </SpsFieldset>\n                            </SpsFieldset>\n                        </>\n                    }\n                "], ["\n                    function DemoComponent() {\n                        const RADIO_OPTIONS = [\n                            { value: \"a\", label: \"Option A\" },\n                            { value: \"b\", label: \"Option B\" }\n                        ];\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            topFieldset: {\n                                foo: \"\",\n                                fsNested: {\n                                    bar: RADIO_OPTIONS[1].value,\n                                    fsNested2: {\n                                        baz: \"\"\n                                    }\n                                }\n                            }\n                        });\n\n                        return <>\n                            <SpsFieldset formMeta={formMeta.fields.topFieldset} legend=\"Fieldset Legend\">\n                                <div className=\"sfg-row\">\n                                    <div className=\"sfg-col-4\">\n                                        <SpsLabel for={formMeta.fields.topFieldset.fields.foo}>Foo</SpsLabel>\n                                        <SpsTextInput formMeta={formMeta.fields.topFieldset.fields.foo}\n                                            value={formValue.topFieldset.foo}\n                                            placeholder=\"Enter a thing\"\n                                        ></SpsTextInput>\n                                    </div>\n                                </div>\n                                <SpsFieldset formMeta={formMeta.fields.topFieldset.fields.fsNested} legend=\"Nested Fieldset\">\n                                    <div className=\"sfg-row\">\n                                        <div className=\"sfg-col-4\">\n                                            <SpsLabel for={formMeta.fields.topFieldset.fields.fsNested.fields.bar}>Bar</SpsLabel>\n                                            {RADIO_OPTIONS.map(option => (\n                                                <SpsRadioButton key={option.value} name=\"fsRadio\"\n                                                    label={option.label} value={option.value}\n                                                    formMeta={formMeta.fields.topFieldset.fields.fsNested.fields.bar}\n                                                    checked={formValue.topFieldset.fsNested.bar === option.value}\n                                                />\n                                            ))}\n                                        </div>\n                                    </div>\n                                    <SpsFieldset formMeta={formMeta.fields.topFieldset.fields.fsNested.fields.fsNested2} legend=\"Doubly Nested Fieldset\">\n                                        <div className=\"sfg-row\">\n                                            <div className=\"sfg-col-4\">\n                                                <SpsLabel for={formMeta.fields.topFieldset.fields.fsNested.fields.fsNested2.fields.baz}>Baz</SpsLabel>\n                                                <SpsTextInput formMeta={formMeta.fields.topFieldset.fields.fsNested.fields.fsNested2.fields.baz}\n                                                    value={formValue.topFieldset.fsNested.baz}\n                                                    placeholder=\"Enter a thing\"\n                                                ></SpsTextInput>\n                                            </div>\n                                        </div>\n                                    </SpsFieldset>\n                                </SpsFieldset>\n                            </SpsFieldset>\n                        </>\n                    }\n                "]))),
+            },
+        },
+    },
+    c_optional: {
+        label: "Optional Fieldsets",
+        description: "info about optional fieldsets",
+        examples: {
+            optional: {
+                react: code(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n                    function DemoComponent() {\n                        const initValue = {\n                            optionalFieldset: {\n                                foo: \"\",\n                                bar: \"\",\n                            }\n                        };\n                        const { formValue, formMeta, updateForm } = useSpsForm(initValue);\n\n                        function handleToggle(isChecked) {\n                            console.log(isChecked ? \"optional fieldset visible\" : \"optional fieldset not visible\");\n                        }\n\n                        return <>\n                            <SpsFieldset legend=\"Fieldset Legend\" formMeta={formMeta.fields.optionalFieldset} optional enabled={false} onToggled={handleToggle}>\n                                <div className=\"sfg-row\">\n                                    <div className=\"sfg-col-4\">\n                                        <SpsLabel for={formMeta.fields.optionalFieldset.fields.foo}>Foo</SpsLabel>\n                                        <SpsTextInput formMeta={formMeta.fields.optionalFieldset.fields.foo}\n                                            value={formValue.optionalFieldset.foo}\n                                            placeholder=\"Enter a thing\"\n                                        ></SpsTextInput>\n                                    </div>\n                                    <div className=\"sfg-col-4\">\n                                        <SpsLabel for={formMeta.fields.optionalFieldset.fields.bar}>Bar</SpsLabel>\n                                        <SpsTextInput formMeta={formMeta.fields.optionalFieldset.fields.bar}\n                                            value={formValue.optionalFieldset.bar}\n                                            placeholder=\"Enter a thing\"\n                                        ></SpsTextInput>\n                                    </div>\n                                </div>\n                            </SpsFieldset>\n                        </>\n                    }\n                "], ["\n                    function DemoComponent() {\n                        const initValue = {\n                            optionalFieldset: {\n                                foo: \"\",\n                                bar: \"\",\n                            }\n                        };\n                        const { formValue, formMeta, updateForm } = useSpsForm(initValue);\n\n                        function handleToggle(isChecked) {\n                            console.log(isChecked ? \"optional fieldset visible\" : \"optional fieldset not visible\");\n                        }\n\n                        return <>\n                            <SpsFieldset legend=\"Fieldset Legend\" formMeta={formMeta.fields.optionalFieldset} optional enabled={false} onToggled={handleToggle}>\n                                <div className=\"sfg-row\">\n                                    <div className=\"sfg-col-4\">\n                                        <SpsLabel for={formMeta.fields.optionalFieldset.fields.foo}>Foo</SpsLabel>\n                                        <SpsTextInput formMeta={formMeta.fields.optionalFieldset.fields.foo}\n                                            value={formValue.optionalFieldset.foo}\n                                            placeholder=\"Enter a thing\"\n                                        ></SpsTextInput>\n                                    </div>\n                                    <div className=\"sfg-col-4\">\n                                        <SpsLabel for={formMeta.fields.optionalFieldset.fields.bar}>Bar</SpsLabel>\n                                        <SpsTextInput formMeta={formMeta.fields.optionalFieldset.fields.bar}\n                                            value={formValue.optionalFieldset.bar}\n                                            placeholder=\"Enter a thing\"\n                                        ></SpsTextInput>\n                                    </div>\n                                </div>\n                            </SpsFieldset>\n                        </>\n                    }\n                "]))),
+            },
+        },
+    },
+    d_validationOnField: {
+        label: "Validation on Field",
+        description: "info about validation on fields",
+        examples: {
+            validationOnField: {
+                react: code(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n                    function DemoComponent() {\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            myFieldset: {\n                                foo: \"\",\n                            }\n                        }, {\n                            \"myFieldset.foo\": [SpsValidators.required]\n                        })\n\n                        React.useEffect(() => {\n                            formMeta.markAsDirty();\n                        }, [])\n\n                        return <>\n                            <SpsFieldset formMeta={formMeta.fields.myFieldset} legend=\"Fieldset Legend\">\n                                <div className=\"sfg-row\">\n                                    <div className=\"sfg-col-4\">\n                                        <SpsLabel for={formMeta.fields.myFieldset.fields.foo}>Foo</SpsLabel>\n                                        <SpsTextInput formMeta={formMeta.fields.myFieldset.fields.foo}\n                                            value={formValue.myFieldset.foo}\n                                        ></SpsTextInput>\n                                    </div>\n                                </div>\n                            </SpsFieldset>\n                        </>\n                    }\n                "], ["\n                    function DemoComponent() {\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            myFieldset: {\n                                foo: \"\",\n                            }\n                        }, {\n                            \"myFieldset.foo\": [SpsValidators.required]\n                        })\n\n                        React.useEffect(() => {\n                            formMeta.markAsDirty();\n                        }, [])\n\n                        return <>\n                            <SpsFieldset formMeta={formMeta.fields.myFieldset} legend=\"Fieldset Legend\">\n                                <div className=\"sfg-row\">\n                                    <div className=\"sfg-col-4\">\n                                        <SpsLabel for={formMeta.fields.myFieldset.fields.foo}>Foo</SpsLabel>\n                                        <SpsTextInput formMeta={formMeta.fields.myFieldset.fields.foo}\n                                            value={formValue.myFieldset.foo}\n                                        ></SpsTextInput>\n                                    </div>\n                                </div>\n                            </SpsFieldset>\n                        </>\n                    }\n                "]))),
+            },
+        },
+    },
+    e_topFieldset: {
+        label: "Validation on Fieldset",
+        description: "info about validation on fieldsets",
+        examples: {
+            validationOnFieldset: {
+                react: code(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n                    function DemoComponent() {\n                        function mustSelectAColorValidator(value) {\n                            if (value.radio === \"b\") {\n                                if (value.colors.filter(Boolean).length === 0) {\n                                    return {\n                                        mustSelectAColor: true\n                                    };\n                                }\n                            }\n                            return null;\n                        };\n\n                        const COLOR_OPTIONS = [\"Red\", \"Orange\", \"Yellow\", \"Green\", \"Blue\", \"Indigo\", \"Violet\"];\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            topFieldset: {\n                                text: \"\",\n                                nestedFieldset: {\n                                    radio: \"b\",\n                                    colors: COLOR_OPTIONS.map(() => false)\n                                }\n                            }\n                        }, {\n                            \"topFieldset.nestedFieldset\": [mustSelectAColorValidator]\n                        });\n\n                        React.useEffect(() => {\n                            formMeta.fields.topFieldset.fields.nestedFieldset.fields.radio.markAsDirty();\n                        }, [])\n\n                        return (\n                            <SpsForm formMeta={formMeta}>\n                                <SpsFieldset formMeta={formMeta.fields.topFieldset} legend=\"Fieldset Legend\">\n                                    <div className=\"sfg-row\">\n                                        <div className=\"sfg-col-4\">\n                                            <SpsLabel for={formMeta.fields.topFieldset.fields.text}>Input</SpsLabel>\n                                            <SpsTextInput formMeta={formMeta.fields.topFieldset.fields.text}\n                                                value={formValue.topFieldset.text}\n                                                placeholder=\"Enter a thing\"\n                                            ></SpsTextInput>\n                                        </div>\n                                    </div>\n                                    <SpsFieldset formMeta={formMeta.fields.topFieldset.fields.nestedFieldset}\n                                        legend=\"Nested Fieldset\"\n                                        errors={() => formMeta.fields.topFieldset.fields.nestedFieldset.hasError(\"mustSelectAColor\")\n                                            && \"If you choose Option B, you must select at least one color.\"}\n                                    >\n                                        <div className=\"sfg-row\">\n                                            <div className=\"sfg-col-4\">\n                                                <SpsLabel for={formMeta.fields.topFieldset.fields.nestedFieldset.fields.radio}>Radio</SpsLabel>\n                                                <SpsRadioButton name=\"radio\" label=\"Option A\" value=\"a\"\n                                                    formMeta={formMeta.fields.topFieldset.fields.nestedFieldset.fields.radio}\n                                                    checked={formValue.topFieldset.nestedFieldset.radio === \"a\"}\n                                                />\n                                                <SpsRadioButton name=\"radio\" label=\"Option B\" value=\"b\"\n                                                    formMeta={formMeta.fields.topFieldset.fields.nestedFieldset.fields.radio}\n                                                    checked={formValue.topFieldset.nestedFieldset.radio === \"b\"}\n                                                />\n                                            </div>\n                                            <div className=\"sfg-col-8\">\n                                                <SpsLabel for={formMeta.fields.topFieldset.fields.nestedFieldset.fields.colors}>Colors</SpsLabel>\n                                                {COLOR_OPTIONS.map((color, index) =>\n                                                    <SpsCheckbox key={index} name=\"colors\" label={color}\n                                                        formMeta={formMeta.fields.topFieldset.fields.nestedFieldset.fields.colors[index]}\n                                                        checked={formValue.topFieldset.nestedFieldset.colors[index]}\n                                                    />\n                                                )}\n                                            </div>\n                                        </div>\n                                    </SpsFieldset>\n                                </SpsFieldset>\n                            </SpsForm>\n                        )\n                    }\n                "], ["\n                    function DemoComponent() {\n                        function mustSelectAColorValidator(value) {\n                            if (value.radio === \"b\") {\n                                if (value.colors.filter(Boolean).length === 0) {\n                                    return {\n                                        mustSelectAColor: true\n                                    };\n                                }\n                            }\n                            return null;\n                        };\n\n                        const COLOR_OPTIONS = [\"Red\", \"Orange\", \"Yellow\", \"Green\", \"Blue\", \"Indigo\", \"Violet\"];\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            topFieldset: {\n                                text: \"\",\n                                nestedFieldset: {\n                                    radio: \"b\",\n                                    colors: COLOR_OPTIONS.map(() => false)\n                                }\n                            }\n                        }, {\n                            \"topFieldset.nestedFieldset\": [mustSelectAColorValidator]\n                        });\n\n                        React.useEffect(() => {\n                            formMeta.fields.topFieldset.fields.nestedFieldset.fields.radio.markAsDirty();\n                        }, [])\n\n                        return (\n                            <SpsForm formMeta={formMeta}>\n                                <SpsFieldset formMeta={formMeta.fields.topFieldset} legend=\"Fieldset Legend\">\n                                    <div className=\"sfg-row\">\n                                        <div className=\"sfg-col-4\">\n                                            <SpsLabel for={formMeta.fields.topFieldset.fields.text}>Input</SpsLabel>\n                                            <SpsTextInput formMeta={formMeta.fields.topFieldset.fields.text}\n                                                value={formValue.topFieldset.text}\n                                                placeholder=\"Enter a thing\"\n                                            ></SpsTextInput>\n                                        </div>\n                                    </div>\n                                    <SpsFieldset formMeta={formMeta.fields.topFieldset.fields.nestedFieldset}\n                                        legend=\"Nested Fieldset\"\n                                        errors={() => formMeta.fields.topFieldset.fields.nestedFieldset.hasError(\"mustSelectAColor\")\n                                            && \"If you choose Option B, you must select at least one color.\"}\n                                    >\n                                        <div className=\"sfg-row\">\n                                            <div className=\"sfg-col-4\">\n                                                <SpsLabel for={formMeta.fields.topFieldset.fields.nestedFieldset.fields.radio}>Radio</SpsLabel>\n                                                <SpsRadioButton name=\"radio\" label=\"Option A\" value=\"a\"\n                                                    formMeta={formMeta.fields.topFieldset.fields.nestedFieldset.fields.radio}\n                                                    checked={formValue.topFieldset.nestedFieldset.radio === \"a\"}\n                                                />\n                                                <SpsRadioButton name=\"radio\" label=\"Option B\" value=\"b\"\n                                                    formMeta={formMeta.fields.topFieldset.fields.nestedFieldset.fields.radio}\n                                                    checked={formValue.topFieldset.nestedFieldset.radio === \"b\"}\n                                                />\n                                            </div>\n                                            <div className=\"sfg-col-8\">\n                                                <SpsLabel for={formMeta.fields.topFieldset.fields.nestedFieldset.fields.colors}>Colors</SpsLabel>\n                                                {COLOR_OPTIONS.map((color, index) =>\n                                                    <SpsCheckbox key={index} name=\"colors\" label={color}\n                                                        formMeta={formMeta.fields.topFieldset.fields.nestedFieldset.fields.colors[index]}\n                                                        checked={formValue.topFieldset.nestedFieldset.colors[index]}\n                                                    />\n                                                )}\n                                            </div>\n                                        </div>\n                                    </SpsFieldset>\n                                </SpsFieldset>\n                            </SpsForm>\n                        )\n                    }\n                "]))),
+            },
+        },
+    },
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
+//# sourceMappingURL=SpsFieldset.examples.js.map

package/dist/out-tsc/fieldset/SpsFieldset.examples.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpsFieldset.examples.js","sourceRoot":"","sources":["../../../src/fieldset/SpsFieldset.examples.ts"],"names":[],"mappings":";;;;AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAG1C,MAAM,CAAC,IAAM,mBAAmB,GAAoB;IAClD,KAAK,EAAE;QACL,KAAK,EAAE,iBAAiB;QACxB,WAAW,EAAE,4BAA4B;QACzC,QAAQ,EAAE;YACR,KAAK,EAAE;gBACL,KAAK,EAAE,IAAI,orFAAA,inFA2CF,IAAA;aACV;SACF;KACF;IACD,QAAQ,EAAE;QACR,KAAK,EAAE,kBAAkB;QACzB,WAAW,EAAE,6BAA6B;QAC1C,QAAQ,EAAE;YACR,MAAM,EAAE;gBACN,KAAK,EAAE,IAAI,4yHAAA,yuHAyDF,IAAA;aACV;SACF;KACF;IACD,UAAU,EAAE;QACV,KAAK,EAAE,oBAAoB;QAC3B,WAAW,EAAE,+BAA+B;QAC5C,QAAQ,EAAE;YACR,QAAQ,EAAE;gBACR,KAAK,EAAE,IAAI,woEAAA,qkEAmCF,IAAA;aACV;SACF;KACF;IACD,mBAAmB,EAAE;QACnB,KAAK,EAAE,qBAAqB;QAC5B,WAAW,EAAE,iCAAiC;QAC9C,QAAQ,EAAE;YACR,iBAAiB,EAAE;gBACjB,KAAK,EAAE,IAAI,83CAAA,2zCA2BF,IAAA;aACV;SACF;KACF;IACD,aAAa,EAAE;QACb,KAAK,EAAE,wBAAwB;QAC/B,WAAW,EAAE,oCAAoC;QACjD,QAAQ,EAAE;YACR,oBAAoB,EAAE;gBACpB,KAAK,EAAE,IAAI,o+JAAA,i6JA0EF,IAAA;aACV;SACF;KACF;CACF,CAAC"}

package/dist/out-tsc/fieldset/SpsFieldset.js

@@ -0,0 +1,99 @@
+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 __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;
+};
+import { TooltipKind, TooltipShowTrigger, SpsIcon as SpsIcons } from "@spscommerce/ds-shared";
+import clsx from "clsx";
+import * as React from "react";
+import * as PropTypes from "../prop-types";
+import { SpsTooltip, TooltipVisibility } from "../tooltip/SpsTooltip";
+import { contentOf } from "../utils/contentOf";
+import { SpsCheckbox } from "../checkbox/SpsCheckbox";
+import { SpsI } from "../icon/SpsIcon";
+var propsDoc = {
+    errors: "ReactNodeOrRenderFn",
+    formMeta: "SpsFormSetMeta<any>",
+    legend: "string",
+    optional: "boolean",
+    enabled: "boolean",
+    onToggled: "(isEnabled: boolean) => void",
+    tooltip: "string",
+};
+var propTypes = __assign(__assign({}, PropTypes.spsGlobalPropTypes), { errors: PropTypes.nodeOrRenderFn, formArray: PropTypes.impl(), formGroup: PropTypes.impl(), formMeta: PropTypes.impl(), legend: PropTypes.string, optional: PropTypes.bool, enabled: PropTypes.bool, onToggled: PropTypes.fun(), tooltip: PropTypes.string });
+export function SpsFieldset(_a) {
+    var children = _a.children, className = _a.className, errors = _a.errors, formArray = _a.formArray, formGroup = _a.formGroup, formMeta = _a.formMeta, legend = _a.legend, unsafelyReplaceClassName = _a.unsafelyReplaceClassName, _b = _a.optional, optional = _b === void 0 ? false : _b, enabled = _a.enabled, onToggled = _a.onToggled, tooltip = _a.tooltip, testId = _a["data-testid"];
+    var formControlSet = formGroup || formArray;
+    var legendElement = React.useRef(null);
+    var infoCircleElement = React.useRef(null);
+    var _c = __read(React.useState(TooltipVisibility.HIDDEN), 2), showTip = _c[0], setShowTip = _c[1];
+    var _d = __read(React.useState(false), 2), wasFocused = _d[0], setWasFocused = _d[1];
+    var _e = __read(React.useState(false), 2), isChecked = _e[0], setisChecked = _e[1];
+    React.useEffect(function () {
+        setisChecked(enabled);
+    }, [enabled]);
+    React.useEffect(function () {
+        if (typeof onToggled === "function") {
+            onToggled(isChecked);
+        }
+    }, [isChecked]);
+    React.useEffect(function () {
+        if (formControlSet || formMeta) {
+            var isFocused = (formControlSet && formControlSet.isFocused())
+                || (formMeta && formMeta.isFocused());
+            if (!wasFocused && isFocused) {
+                setShowTip(TooltipVisibility.VISIBLE);
+            }
+            else if (wasFocused && !isFocused) {
+                setShowTip(TooltipVisibility.HIDDEN);
+            }
+            setWasFocused(isFocused);
+        }
+    });
+    var fieldsetClasses = clsx(unsafelyReplaceClassName || "sps-fieldset", ((formControlSet && !formControlSet.isPristine() && formControlSet.invalid)
+        || (formMeta && (!formMeta.isValid() || !formMeta.contentsAreValid()))) && "sps-fieldset--error", className, optional && !isChecked && "sps-fieldset--collapsed");
+    function toggleTooltip() {
+        setShowTip(showTip === TooltipVisibility.VISIBLE
+            ? TooltipVisibility.HIDDEN : TooltipVisibility.VISIBLE);
+    }
+    return (React.createElement("div", { className: "sps-fieldset-container" },
+        React.createElement("fieldset", { className: fieldsetClasses, "data-testid": testId },
+            React.createElement("legend", { className: "sps-fieldset__legend", ref: legendElement, onMouseEnter: function () { return setShowTip(TooltipVisibility.VISIBLE); }, onMouseLeave: function () { return setShowTip(TooltipVisibility.DELAYED_HIDDEN); }, onClick: toggleTooltip },
+                optional && (React.createElement(SpsCheckbox, { checked: isChecked, className: "d-inline-flex", onChange: function () {
+                        setisChecked(!isChecked);
+                    }, "data-testid": testId + "__checkbox" })),
+                legend,
+                tooltip && (React.createElement("span", { className: "sps-fieldset__legend-icon", ref: infoCircleElement },
+                    React.createElement(SpsI, { icon: SpsIcons.INFO_CIRCLE, "data-testid": testId + "__info-icon" })))),
+            tooltip && (React.createElement(SpsTooltip, { for: infoCircleElement }, tooltip)),
+            React.createElement(SpsTooltip, { for: legendElement, kind: TooltipKind.ERROR, showOn: TooltipShowTrigger.MANUAL, isShown: showTip }, contentOf(errors)),
+            children)));
+}
+Object.assign(SpsFieldset, {
+    props: propsDoc,
+    propTypes: propTypes,
+    displayName: "SpsFieldset",
+});
+//# sourceMappingURL=SpsFieldset.js.map

package/dist/out-tsc/fieldset/SpsFieldset.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpsFieldset.js","sourceRoot":"","sources":["../../../src/fieldset/SpsFieldset.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAC9F,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,SAAS,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AACtE,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAKtD,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAEvC,IAAM,QAAQ,GAAG;IACf,MAAM,EAAE,qBAAqB;IAC7B,QAAQ,EAAE,qBAAqB;IAC/B,MAAM,EAAE,QAAQ;IAChB,QAAQ,EAAE,SAAS;IACnB,OAAO,EAAE,SAAS;IAClB,SAAS,EAAE,8BAA8B;IACzC,OAAO,EAAE,QAAQ;CAClB,CAAC;AAEF,IAAM,SAAS,yBACV,SAAS,CAAC,kBAAkB,KAC/B,MAAM,EAAE,SAAS,CAAC,cAAc,EAChC,SAAS,EAAE,SAAS,CAAC,IAAI,EAAqB,EAC9C,SAAS,EAAE,SAAS,CAAC,IAAI,EAAgB,EACzC,QAAQ,EAAE,SAAS,CAAC,IAAI,EAAuB,EAC/C,MAAM,EAAE,SAAS,CAAC,MAAM,EACxB,QAAQ,EAAE,SAAS,CAAC,IAAI,EACxB,OAAO,EAAE,SAAS,CAAC,IAAI,EACvB,SAAS,EAAE,SAAS,CAAC,GAAG,EAAgC,EACxD,OAAO,EAAE,SAAS,CAAC,MAAM,GAC1B,CAAC;AAIF,MAAM,UAAU,WAAW,CAAC,EAcT;QAbjB,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,MAAM,YAAA,EACN,SAAS,eAAA,EACT,SAAS,eAAA,EACT,QAAQ,cAAA,EACR,MAAM,YAAA,EACN,wBAAwB,8BAAA,EACxB,gBAAgB,EAAhB,QAAQ,mBAAG,KAAK,KAAA,EAChB,OAAO,aAAA,EACP,SAAS,eAAA,EACT,OAAO,aAAA,EACQ,MAAM,oBAAA;IAErB,IAAM,cAAc,GAAkB,SAAS,IAAI,SAAS,CAAC;IAE7D,IAAM,aAAa,GAA8C,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IACpF,IAAM,iBAAiB,GAA8C,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IAClF,IAAA,KAAA,OAAwB,KAAK,CAAC,QAAQ,CAAC,iBAAiB,CAAC,MAAM,CAAC,IAAA,EAA/D,OAAO,QAAA,EAAE,UAAU,QAA4C,CAAC;IACjE,IAAA,KAAA,OAA8B,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAA,EAAlD,UAAU,QAAA,EAAE,aAAa,QAAyB,CAAC;IACpD,IAAA,KAAA,OAA4B,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAA,EAAhD,SAAS,QAAA,EAAE,YAAY,QAAyB,CAAC;IAExD,KAAK,CAAC,SAAS,CAAC;QACd,YAAY,CAAC,OAAO,CAAC,CAAC;IACxB,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,KAAK,CAAC,SAAS,CAAC;QACd,IAAI,OAAO,SAAS,KAAK,UAAU,EAAE;YACnC,SAAS,CAAC,SAAS,CAAC,CAAC;SACtB;IACH,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,KAAK,CAAC,SAAS,CAAC;QACd,IAAI,cAAc,IAAI,QAAQ,EAAE;YAC9B,IAAM,SAAS,GAAG,CAAC,cAAc,IAAI,cAAc,CAAC,SAAS,EAAE,CAAC;mBACnD,CAAC,QAAQ,IAAI,QAAQ,CAAC,SAAS,EAAE,CAAC,CAAC;YAChD,IAAI,CAAC,UAAU,IAAI,SAAS,EAAE;gBAC5B,UAAU,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC;aACvC;iBAAM,IAAI,UAAU,IAAI,CAAC,SAAS,EAAE;gBACnC,UAAU,CAAC,iBAAiB,CAAC,MAAM,CAAC,CAAC;aACtC;YACD,aAAa,CAAC,SAAS,CAAC,CAAC;SAC1B;IACH,CAAC,CAAC,CAAC;IAEH,IAAM,eAAe,GAAG,IAAI,CAC1B,wBAAwB,IAAI,cAAc,EAC1C,CACE,CAAC,cAAc,IAAI,CAAC,cAAc,CAAC,UAAU,EAAE,IAAI,cAAc,CAAC,OAAO,CAAC;WACjE,CAAC,QAAQ,IAAI,CAAC,CAAC,QAAQ,CAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAC7E,IAAI,qBAAqB,EAC1B,SAAS,EACT,QAAQ,IAAI,CAAC,SAAS,IAAI,yBAAyB,CACpD,CAAC;IAEF,SAAS,aAAa;QACpB,UAAU,CAAC,OAAO,KAAK,iBAAiB,CAAC,OAAO;YAC9C,CAAC,CAAC,iBAAiB,CAAC,MAAM,CAAC,CAAC,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC;IAC5D,CAAC;IAED,OAAO,CACL,6BAAK,SAAS,EAAC,wBAAwB;QACrC,kCAAU,SAAS,EAAE,eAAe,iBAAe,MAAM;YACvD,gCACE,SAAS,EAAC,sBAAsB,EAChC,GAAG,EAAE,aAAa,EAClB,YAAY,EAAE,cAAM,OAAA,UAAU,CAAC,iBAAiB,CAAC,OAAO,CAAC,EAArC,CAAqC,EACzD,YAAY,EAAE,cAAM,OAAA,UAAU,CAAC,iBAAiB,CAAC,cAAc,CAAC,EAA5C,CAA4C,EAChE,OAAO,EAAE,aAAa;gBAErB,QAAQ,IAAI,CACX,oBAAC,WAAW,IACV,OAAO,EAAE,SAAS,EAClB,SAAS,EAAC,eAAe,EACzB,QAAQ,EAAE;wBACR,YAAY,CAAC,CAAC,SAAS,CAAC,CAAC;oBAC3B,CAAC,iBACe,MAAM,eAAY,GAClC,CACH;gBACA,MAAM;gBACN,OAAO,IAAI,CACV,8BAAM,SAAS,EAAC,2BAA2B,EAAC,GAAG,EAAE,iBAAiB;oBAChE,oBAAC,IAAI,IAAC,IAAI,EAAE,QAAQ,CAAC,WAAW,iBAAkB,MAAM,gBAAa,GAAI,CACpE,CACR,CACM;YACR,OAAO,IAAI,CACV,oBAAC,UAAU,IAAC,GAAG,EAAE,iBAAiB,IAC/B,OAAO,CACG,CACd;YACD,oBAAC,UAAU,IACT,GAAG,EAAE,aAAa,EAClB,IAAI,EAAE,WAAW,CAAC,KAAK,EACvB,MAAM,EAAE,kBAAkB,CAAC,MAAM,EACjC,OAAO,EAAE,OAAO,IAEf,SAAS,CAAC,MAAM,CAAC,CACP;YACZ,QAAQ,CACA,CACP,CACP,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,CAAC,WAAW,EAAE;IACzB,KAAK,EAAE,QAAQ;IACf,SAAS,WAAA;IACT,WAAW,EAAE,aAAa;CAC3B,CAAC,CAAC"}

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/fieldset/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,wBAAwB,CAAC"}

package/dist/out-tsc/filter-panel/SpsFilterPanel.d.ts

@@ -0,0 +1,10 @@
+import * as PropTypes from "../prop-types";
+declare const propTypes: {
+    children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    className: PropTypes.Requireable<string>;
+    "data-testid": PropTypes.Requireable<string>;
+    unsafelyReplaceClassName: PropTypes.Requireable<string>;
+};
+export declare type SpsFilterPanelProps = PropTypes.InferTS<typeof propTypes, HTMLDivElement>;
+export declare function SpsFilterPanel({ children, className, ...rest }: SpsFilterPanelProps): JSX.Element;
+export {};

package/dist/out-tsc/filter-panel/SpsFilterPanel.examples.d.ts

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

package/dist/out-tsc/filter-panel/SpsFilterPanel.examples.js

@@ -0,0 +1,31 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import * as React from "react";
+import { code } from "@spscommerce/utils";
+export var SpsFilterPanelExamples = {
+    generalUsage: {
+        label: "General Usage",
+        examples: {
+            general: {
+                react: code(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n                    function Component() {\n                        const initialValues = {\n                            colors: {\n                                red: false,\n                                blue: false,\n                                green: false,\n                            },\n                            options: {\n                                '1': false,\n                                '2': false,\n                                '3': false,\n                                '4': false,\n                                '5': false,\n                                '6': false,\n                                '7': false,\n                                '8': false,\n                                '9': false,\n                                '10': false,\n                            },\n                            radio: 'yes',          \n                        }\n\n                        const { formValue, formMeta, updateForm } = useSpsForm(initialValues);\n\n                        const handleClear = () => {\n                            updateForm(initialValues);\n                            formMeta.markAsPristine();\n                        }\n\n                        const [expanded, setExpanded] = React.useState(true);\n    \n                        const onExpand = () => {\n                            setExpanded(true);\n                        }\n                        \n                        const onCollapse = () => {\n                            setExpanded(false);\n                        }\n\n                        return (\n                            <div className=\"sfg-row\">\n                                <div className=\"sfg-col-4\">\n                                    <SpsForm formMeta={formMeta}>\n                                        <SpsFilterPanel>\n                                            <SpsFilterPanelCap onClear={handleClear}/>                              \n                                            <SpsFilterPanelSection title=\"Section one\">\n                                                {Object.keys(initialValues.colors).map((c) => (                                        \n                                                    <SpsCheckbox\n                                                        key={c}\n                                                        name={c}\n                                                        label={`${c[0].toUpperCase()}${c.slice(1)}`}\n                                                        checked={formValue.colors[c]}\n                                                        formMeta={formMeta.fields.colors.fields[c]}\n                                                    />                                        \n                                                ))}                                                \n                                            </SpsFilterPanelSection>\n                                            <SpsFilterPanelSection title=\"Section two\"\n                                                expanded={expanded}\n                                                onExpand={onExpand}\n                                                onCollapse={onCollapse}\n                                                heightPx={150}\n                                            >\n                                                {Object.keys(initialValues.options).map((o) => (                                        \n                                                    <SpsCheckbox\n                                                        key={o}\n                                                        name={`option_${o}`}\n                                                        label={`Option ${o}`}\n                                                        checked={formValue.options[o]}\n                                                        formMeta={formMeta.fields.options.fields[o]}\n                                                    />                                        \n                                                ))}\n                                            </SpsFilterPanelSection>\n                                            <SpsFilterPanelSection title=\"Section three\">                                            \n                                                <SpsRadioButton name=\"yes\" value=\"yes\" label=\"Yes\"\n                                                    formMeta={formMeta.fields.radio}\n                                                    checked={formValue.radio === \"yes\"}\n                                                ></SpsRadioButton>\n                                                <SpsRadioButton name=\"no\" value=\"no\" label=\"No\"\n                                                    formMeta={formMeta.fields.radio}\n                                                    checked={formValue.radio === \"no\"}\n                                                ></SpsRadioButton>                                           \n                                            </SpsFilterPanelSection>\n                                        </SpsFilterPanel>\n                                    </SpsForm>\n                                </div>\n                            </div>\n                        );\n                    }\n                "], ["\n                    function Component() {\n                        const initialValues = {\n                            colors: {\n                                red: false,\n                                blue: false,\n                                green: false,\n                            },\n                            options: {\n                                '1': false,\n                                '2': false,\n                                '3': false,\n                                '4': false,\n                                '5': false,\n                                '6': false,\n                                '7': false,\n                                '8': false,\n                                '9': false,\n                                '10': false,\n                            },\n                            radio: 'yes',          \n                        }\n\n                        const { formValue, formMeta, updateForm } = useSpsForm(initialValues);\n\n                        const handleClear = () => {\n                            updateForm(initialValues);\n                            formMeta.markAsPristine();\n                        }\n\n                        const [expanded, setExpanded] = React.useState(true);\n    \n                        const onExpand = () => {\n                            setExpanded(true);\n                        }\n                        \n                        const onCollapse = () => {\n                            setExpanded(false);\n                        }\n\n                        return (\n                            <div className=\"sfg-row\">\n                                <div className=\"sfg-col-4\">\n                                    <SpsForm formMeta={formMeta}>\n                                        <SpsFilterPanel>\n                                            <SpsFilterPanelCap onClear={handleClear}/>                              \n                                            <SpsFilterPanelSection title=\"Section one\">\n                                                {Object.keys(initialValues.colors).map((c) => (                                        \n                                                    <SpsCheckbox\n                                                        key={c}\n                                                        name={c}\n                                                        label={\\`\\${c[0].toUpperCase()}\\${c.slice(1)}\\`}\n                                                        checked={formValue.colors[c]}\n                                                        formMeta={formMeta.fields.colors.fields[c]}\n                                                    />                                        \n                                                ))}                                                \n                                            </SpsFilterPanelSection>\n                                            <SpsFilterPanelSection title=\"Section two\"\n                                                expanded={expanded}\n                                                onExpand={onExpand}\n                                                onCollapse={onCollapse}\n                                                heightPx={150}\n                                            >\n                                                {Object.keys(initialValues.options).map((o) => (                                        \n                                                    <SpsCheckbox\n                                                        key={o}\n                                                        name={\\`option_\\${o}\\`}\n                                                        label={\\`Option \\${o}\\`}\n                                                        checked={formValue.options[o]}\n                                                        formMeta={formMeta.fields.options.fields[o]}\n                                                    />                                        \n                                                ))}\n                                            </SpsFilterPanelSection>\n                                            <SpsFilterPanelSection title=\"Section three\">                                            \n                                                <SpsRadioButton name=\"yes\" value=\"yes\" label=\"Yes\"\n                                                    formMeta={formMeta.fields.radio}\n                                                    checked={formValue.radio === \"yes\"}\n                                                ></SpsRadioButton>\n                                                <SpsRadioButton name=\"no\" value=\"no\" label=\"No\"\n                                                    formMeta={formMeta.fields.radio}\n                                                    checked={formValue.radio === \"no\"}\n                                                ></SpsRadioButton>                                           \n                                            </SpsFilterPanelSection>\n                                        </SpsFilterPanel>\n                                    </SpsForm>\n                                </div>\n                            </div>\n                        );\n                    }\n                "]))),
+            },
+        },
+    },
+    filterBox: {
+        label: "Filter Box",
+        examples: {
+            withFormMeta: {
+                description: function () { return React.createElement("p", null, "Using formMeta prop"); },
+                react: code(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n                    function Component() {\n                        const initialValues = {\n                            colors: {\n                                red: false,\n                                blue: false,\n                                green: false,\n                            },\n                            options: {\n                                '1': false,\n                                '2': false,\n                                '3': false,\n                                '4': false,\n                                '5': false,\n                            },\n                            radio: 'yes',\n                            filterBoxValue: '',           \n                        }\n\n                        const { formValue, formMeta, updateForm } = useSpsForm(initialValues);\n\n                        const handleClear = () => {\n                            updateForm(initialValues);\n                            formMeta.markAsPristine();\n                        }\n\n                        const [expanded, setExpanded] = React.useState(true);\n    \n                        const onExpand = () => {\n                            setExpanded(true);\n                        }\n                        \n                        const onCollapse = () => {\n                            setExpanded(false);\n                        }\n                        \n                        return (\n                            <div className=\"sfg-row\">\n                                <div className=\"sfg-col-4\">\n                                    <SpsForm formMeta={formMeta}>\n                                        <SpsFilterPanel>\n                                            <SpsFilterPanelCap onClear={handleClear}/>\n                                            <SpsFilterPanelFilterBox\n                                                value={formValue.filterBoxValue}\n                                                formMeta={formMeta.fields.filterBoxValue}\n                                            />\n                                            <SpsFilterPanelSection title=\"Section one\">\n                                                {Object.keys(initialValues.colors)\n                                                    .filter((c) => c.toLowerCase()\n                                                        .includes(formValue\n                                                            .filterBoxValue\n                                                            .toLowerCase()\n                                                            )\n                                                        )\n                                                    .map((c) => (\n                                                        <SpsCheckbox\n                                                            key={c}\n                                                            name={c}\n                                                            label={`${c[0].toUpperCase()}${c.slice(1)}`}\n                                                            checked={formValue.colors[c]}\n                                                            formMeta={formMeta.fields.colors.fields[c]}\n                                                        />\n                                                    ))\n                                                }                                                \n                                            </SpsFilterPanelSection>\n                                            <SpsFilterPanelSection title=\"Section two\"\n                                            expanded={expanded}\n                                            onExpand={onExpand}\n                                            onCollapse={onCollapse}\n                                            >\n                                                {Object.keys(initialValues.options)\n                                                    .filter((o) => `Option ${o}`.toLowerCase()\n                                                        .includes(formValue\n                                                            .filterBoxValue\n                                                            .toLowerCase()\n                                                            )\n                                                        )\n                                                    .map((o) => (\n                                                        <SpsCheckbox\n                                                            key={o}\n                                                            name={`option_${o}`}\n                                                            label={`Option ${o}`}\n                                                            checked={formValue.options[o]}\n                                                            formMeta={formMeta.fields.options.fields[o]}\n                                                        />\n                                                    ))\n                                                }\n                                            </SpsFilterPanelSection>\n                                            <SpsFilterPanelSection title=\"Section three\">                                            \n                                                <SpsRadioButton name=\"yes\" value=\"yes\" label=\"Yes\"\n                                                    formMeta={formMeta.fields.radio}\n                                                    checked={formValue.radio === \"yes\"}\n                                                ></SpsRadioButton>\n                                                <SpsRadioButton name=\"no\" value=\"no\" label=\"No\"\n                                                    formMeta={formMeta.fields.radio}\n                                                    checked={formValue.radio === \"no\"}\n                                                ></SpsRadioButton>                                           \n                                            </SpsFilterPanelSection>\n                                        </SpsFilterPanel>\n                                    </SpsForm>\n                                </div>\n                            </div>\n                        );\n                    }\n                "], ["\n                    function Component() {\n                        const initialValues = {\n                            colors: {\n                                red: false,\n                                blue: false,\n                                green: false,\n                            },\n                            options: {\n                                '1': false,\n                                '2': false,\n                                '3': false,\n                                '4': false,\n                                '5': false,\n                            },\n                            radio: 'yes',\n                            filterBoxValue: '',           \n                        }\n\n                        const { formValue, formMeta, updateForm } = useSpsForm(initialValues);\n\n                        const handleClear = () => {\n                            updateForm(initialValues);\n                            formMeta.markAsPristine();\n                        }\n\n                        const [expanded, setExpanded] = React.useState(true);\n    \n                        const onExpand = () => {\n                            setExpanded(true);\n                        }\n                        \n                        const onCollapse = () => {\n                            setExpanded(false);\n                        }\n                        \n                        return (\n                            <div className=\"sfg-row\">\n                                <div className=\"sfg-col-4\">\n                                    <SpsForm formMeta={formMeta}>\n                                        <SpsFilterPanel>\n                                            <SpsFilterPanelCap onClear={handleClear}/>\n                                            <SpsFilterPanelFilterBox\n                                                value={formValue.filterBoxValue}\n                                                formMeta={formMeta.fields.filterBoxValue}\n                                            />\n                                            <SpsFilterPanelSection title=\"Section one\">\n                                                {Object.keys(initialValues.colors)\n                                                    .filter((c) => c.toLowerCase()\n                                                        .includes(formValue\n                                                            .filterBoxValue\n                                                            .toLowerCase()\n                                                            )\n                                                        )\n                                                    .map((c) => (\n                                                        <SpsCheckbox\n                                                            key={c}\n                                                            name={c}\n                                                            label={\\`\\${c[0].toUpperCase()}\\${c.slice(1)}\\`}\n                                                            checked={formValue.colors[c]}\n                                                            formMeta={formMeta.fields.colors.fields[c]}\n                                                        />\n                                                    ))\n                                                }                                                \n                                            </SpsFilterPanelSection>\n                                            <SpsFilterPanelSection title=\"Section two\"\n                                            expanded={expanded}\n                                            onExpand={onExpand}\n                                            onCollapse={onCollapse}\n                                            >\n                                                {Object.keys(initialValues.options)\n                                                    .filter((o) => \\`Option \\${o}\\`.toLowerCase()\n                                                        .includes(formValue\n                                                            .filterBoxValue\n                                                            .toLowerCase()\n                                                            )\n                                                        )\n                                                    .map((o) => (\n                                                        <SpsCheckbox\n                                                            key={o}\n                                                            name={\\`option_\\${o}\\`}\n                                                            label={\\`Option \\${o}\\`}\n                                                            checked={formValue.options[o]}\n                                                            formMeta={formMeta.fields.options.fields[o]}\n                                                        />\n                                                    ))\n                                                }\n                                            </SpsFilterPanelSection>\n                                            <SpsFilterPanelSection title=\"Section three\">                                            \n                                                <SpsRadioButton name=\"yes\" value=\"yes\" label=\"Yes\"\n                                                    formMeta={formMeta.fields.radio}\n                                                    checked={formValue.radio === \"yes\"}\n                                                ></SpsRadioButton>\n                                                <SpsRadioButton name=\"no\" value=\"no\" label=\"No\"\n                                                    formMeta={formMeta.fields.radio}\n                                                    checked={formValue.radio === \"no\"}\n                                                ></SpsRadioButton>                                           \n                                            </SpsFilterPanelSection>\n                                        </SpsFilterPanel>\n                                    </SpsForm>\n                                </div>\n                            </div>\n                        );\n                    }\n                "]))),
+            },
+            withOnFilterChange: {
+                description: function () { return React.createElement("p", null, "Using onFilterChange prop"); },
+                react: code(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n                    function Component() {\n                        const initialValues = {\n                            colors: {\n                                red: false,\n                                blue: false,\n                                green: false,\n                            },\n                            options: {\n                                '1': false,\n                                '2': false,\n                                '3': false,\n                                '4': false,\n                                '5': false,\n                            },\n                            radio: 'yes',\n                            filterBoxValue: '',           \n                        }\n\n                        const { formValue, formMeta, updateForm } = useSpsForm(initialValues);\n\n                        const handleClear = () => {\n                            updateForm(initialValues);\n                            formMeta.markAsPristine();\n                        }\n\n                        const [expanded, setExpanded] = React.useState(true);\n\n                        const onExpand = () => {\n                            setExpanded(true);\n                        }\n                        \n                        const onCollapse = () => {\n                            setExpanded(false);\n                        }\n\n                        const handleFilterChange = (e) => {\n                            updateForm({...formValue, filterBoxValue: e.target.value})\n                        }\n                        \n                        return (\n                            <div className=\"sfg-row\">\n                                <div className=\"sfg-col-4\">\n                                    <SpsForm formMeta={formMeta}>\n                                        <SpsFilterPanel>\n                                            <SpsFilterPanelCap onClear={handleClear}/>\n                                            <SpsFilterPanelFilterBox\n                                                value={formValue.filterBoxValue}\n                                                onFilterChange={handleFilterChange}\n                                            />\n                                            <SpsFilterPanelSection title=\"Section one\">\n                                                {Object.keys(initialValues.colors)\n                                                    .filter((c) => c.toLowerCase()\n                                                        .includes(formValue\n                                                            .filterBoxValue\n                                                            .toLowerCase()\n                                                            )\n                                                        )\n                                                    .map((c) => (\n                                                        <SpsCheckbox\n                                                            key={c}\n                                                            name={c}\n                                                            label={`${c[0].toUpperCase()}${c.slice(1)}`}\n                                                            checked={formValue.colors[c]}\n                                                            formMeta={formMeta.fields.colors.fields[c]}\n                                                        />\n                                                    ))\n                                                }                                                \n                                            </SpsFilterPanelSection>\n                                            <SpsFilterPanelSection title=\"Section two\"\n                                            expanded={expanded}\n                                            onExpand={onExpand}\n                                            onCollapse={onCollapse}\n                                            >\n                                                {Object.keys(initialValues.options)\n                                                    .filter((o) => `Option ${o}`.toLowerCase()\n                                                        .includes(formValue\n                                                            .filterBoxValue\n                                                            .toLowerCase()\n                                                            )\n                                                        )\n                                                    .map((o) => (\n                                                        <SpsCheckbox\n                                                            key={o}\n                                                            name={`option_${o}`}\n                                                            label={`Option ${o}`}\n                                                            checked={formValue.options[o]}\n                                                            formMeta={formMeta.fields.options.fields[o]}\n                                                        />\n                                                    ))\n                                                }\n                                            </SpsFilterPanelSection>\n                                            <SpsFilterPanelSection title=\"Section three\">                                            \n                                                <SpsRadioButton name=\"yes\" value=\"yes\" label=\"Yes\"\n                                                    formMeta={formMeta.fields.radio}\n                                                    checked={formValue.radio === \"yes\"}\n                                                ></SpsRadioButton>\n                                                <SpsRadioButton name=\"no\" value=\"no\" label=\"No\"\n                                                    formMeta={formMeta.fields.radio}\n                                                    checked={formValue.radio === \"no\"}\n                                                ></SpsRadioButton>                                           \n                                            </SpsFilterPanelSection>\n                                        </SpsFilterPanel>\n                                    </SpsForm>\n                                </div>\n                            </div>\n                        );\n                    }\n                "], ["\n                    function Component() {\n                        const initialValues = {\n                            colors: {\n                                red: false,\n                                blue: false,\n                                green: false,\n                            },\n                            options: {\n                                '1': false,\n                                '2': false,\n                                '3': false,\n                                '4': false,\n                                '5': false,\n                            },\n                            radio: 'yes',\n                            filterBoxValue: '',           \n                        }\n\n                        const { formValue, formMeta, updateForm } = useSpsForm(initialValues);\n\n                        const handleClear = () => {\n                            updateForm(initialValues);\n                            formMeta.markAsPristine();\n                        }\n\n                        const [expanded, setExpanded] = React.useState(true);\n\n                        const onExpand = () => {\n                            setExpanded(true);\n                        }\n                        \n                        const onCollapse = () => {\n                            setExpanded(false);\n                        }\n\n                        const handleFilterChange = (e) => {\n                            updateForm({...formValue, filterBoxValue: e.target.value})\n                        }\n                        \n                        return (\n                            <div className=\"sfg-row\">\n                                <div className=\"sfg-col-4\">\n                                    <SpsForm formMeta={formMeta}>\n                                        <SpsFilterPanel>\n                                            <SpsFilterPanelCap onClear={handleClear}/>\n                                            <SpsFilterPanelFilterBox\n                                                value={formValue.filterBoxValue}\n                                                onFilterChange={handleFilterChange}\n                                            />\n                                            <SpsFilterPanelSection title=\"Section one\">\n                                                {Object.keys(initialValues.colors)\n                                                    .filter((c) => c.toLowerCase()\n                                                        .includes(formValue\n                                                            .filterBoxValue\n                                                            .toLowerCase()\n                                                            )\n                                                        )\n                                                    .map((c) => (\n                                                        <SpsCheckbox\n                                                            key={c}\n                                                            name={c}\n                                                            label={\\`\\${c[0].toUpperCase()}\\${c.slice(1)}\\`}\n                                                            checked={formValue.colors[c]}\n                                                            formMeta={formMeta.fields.colors.fields[c]}\n                                                        />\n                                                    ))\n                                                }                                                \n                                            </SpsFilterPanelSection>\n                                            <SpsFilterPanelSection title=\"Section two\"\n                                            expanded={expanded}\n                                            onExpand={onExpand}\n                                            onCollapse={onCollapse}\n                                            >\n                                                {Object.keys(initialValues.options)\n                                                    .filter((o) => \\`Option \\${o}\\`.toLowerCase()\n                                                        .includes(formValue\n                                                            .filterBoxValue\n                                                            .toLowerCase()\n                                                            )\n                                                        )\n                                                    .map((o) => (\n                                                        <SpsCheckbox\n                                                            key={o}\n                                                            name={\\`option_\\${o}\\`}\n                                                            label={\\`Option \\${o}\\`}\n                                                            checked={formValue.options[o]}\n                                                            formMeta={formMeta.fields.options.fields[o]}\n                                                        />\n                                                    ))\n                                                }\n                                            </SpsFilterPanelSection>\n                                            <SpsFilterPanelSection title=\"Section three\">                                            \n                                                <SpsRadioButton name=\"yes\" value=\"yes\" label=\"Yes\"\n                                                    formMeta={formMeta.fields.radio}\n                                                    checked={formValue.radio === \"yes\"}\n                                                ></SpsRadioButton>\n                                                <SpsRadioButton name=\"no\" value=\"no\" label=\"No\"\n                                                    formMeta={formMeta.fields.radio}\n                                                    checked={formValue.radio === \"no\"}\n                                                ></SpsRadioButton>                                           \n                                            </SpsFilterPanelSection>\n                                        </SpsFilterPanel>\n                                    </SpsForm>\n                                </div>\n                            </div>\n                        );\n                    }\n                "]))),
+            },
+        },
+    },
+};
+var templateObject_1, templateObject_2, templateObject_3;
+//# sourceMappingURL=SpsFilterPanel.examples.js.map

package/dist/out-tsc/filter-panel/SpsFilterPanel.examples.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpsFilterPanel.examples.js","sourceRoot":"","sources":["../../../src/filter-panel/SpsFilterPanel.examples.tsx"],"names":[],"mappings":";;;;AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAE1C,MAAM,CAAC,IAAM,sBAAsB,GAAoB;IACrD,YAAY,EAAE;QACZ,KAAK,EAAE,eAAe;QACtB,QAAQ,EAAE;YACR,OAAO,EAAE;gBACP,KAAK,EAAE,IAAI,o1KAAA,qyKAyFF,IAAA;aACV;SACF;KACF;IACD,SAAS,EAAE;QACT,KAAK,EAAE,YAAY;QACnB,QAAQ,EAAE;YACR,YAAY,EAAE;gBACZ,WAAW,EAAE,cAAM,OAAA,qDAA0B,EAA1B,CAA0B;gBAC7C,KAAK,EAAE,IAAI,y1MAAA,gzMAwGF,IAAA;aACV;YACD,kBAAkB,EAAE;gBAClB,WAAW,EAAE,cAAM,OAAA,2DAAgC,EAAhC,CAAgC;gBACnD,KAAK,EAAE,IAAI,igNAAA,w9MA4GF,IAAA;aACV;SACF;KACF;CACF,CAAC"}

package/dist/out-tsc/filter-panel/SpsFilterPanel.js

@@ -0,0 +1,37 @@
+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 * as React from "react";
+import clsx from "clsx";
+import * as PropTypes from "../prop-types";
+var propsDoc = {};
+var propTypes = __assign({}, PropTypes.spsGlobalPropTypes);
+export function SpsFilterPanel(_a) {
+    var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
+    return (React.createElement("div", __assign({ className: clsx("sps-filter-panel", className) }, rest), children));
+}
+Object.assign(SpsFilterPanel, {
+    props: propsDoc,
+    propTypes: propTypes,
+    displayName: "SpsFilterPanel",
+});
+//# sourceMappingURL=SpsFilterPanel.js.map

package/dist/out-tsc/filter-panel/SpsFilterPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpsFilterPanel.js","sourceRoot":"","sources":["../../../src/filter-panel/SpsFilterPanel.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,SAAS,MAAM,eAAe,CAAC;AAE3C,IAAM,QAAQ,GAAG,EAAE,CAAC;AAEpB,IAAM,SAAS,gBACV,SAAS,CAAC,kBAAkB,CAChC,CAAC;AAIF,MAAM,UAAU,cAAc,CAAC,EAAqD;IAAnD,IAAA,QAAQ,cAAA,EAAE,SAAS,eAAA,EAAK,IAAI,cAA9B,yBAAgC,CAAF;IAC3D,OAAO,CACL,sCAAK,SAAS,EAAE,IAAI,CAAC,kBAAkB,EAAE,SAAS,CAAC,IAAM,IAAI,GAC1D,QAAQ,CACL,CACP,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,CAAC,cAAc,EAAE;IAC5B,KAAK,EAAE,QAAQ;IACf,SAAS,WAAA;IACT,WAAW,EAAE,gBAAgB;CAC9B,CAAC,CAAC"}

package/dist/out-tsc/filter-panel/SpsFilterPanelCap.d.ts

@@ -0,0 +1,11 @@
+import * as PropTypes from "../prop-types";
+declare const propTypes: {
+    onClear: PropTypes.Requireable<() => void>;
+    children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    className: PropTypes.Requireable<string>;
+    "data-testid": PropTypes.Requireable<string>;
+    unsafelyReplaceClassName: PropTypes.Requireable<string>;
+};
+export declare type SpsFilterPanelCapProps = PropTypes.InferTS<typeof propTypes, HTMLDivElement>;
+export declare function SpsFilterPanelCap({ children, className, onClear, ...rest }: SpsFilterPanelCapProps): JSX.Element;
+export {};

package/dist/out-tsc/filter-panel/SpsFilterPanelCap.js

@@ -0,0 +1,48 @@
+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 * as React from "react";
+import clsx from "clsx";
+import { ButtonKind, SpsIcon as SpsIconEnum, SpsIconSize } from "@spscommerce/ds-shared";
+import * as PropTypes from "../prop-types";
+import { SpsButton } from "../button";
+import { SpsI } from "../icon";
+import { I18nContext } from "../i18n";
+var propsDoc = {
+    onClear: "() => void",
+};
+var propTypes = __assign(__assign({}, PropTypes.spsGlobalPropTypes), { onClear: PropTypes.fun() });
+export function SpsFilterPanelCap(_a) {
+    var children = _a.children, className = _a.className, onClear = _a.onClear, rest = __rest(_a, ["children", "className", "onClear"]);
+    var t = React.useContext(I18nContext).t;
+    return (React.createElement("div", __assign({ className: clsx("sps-filter-panel__cap", className) }, rest),
+        React.createElement("div", { className: "sps-filter-panel__cap__title-wrapper" },
+            React.createElement(SpsI, { icon: SpsIconEnum.FILTER, size: SpsIconSize.SMALL }),
+            React.createElement("p", null, t("design-system:filterPanel.title"))),
+        React.createElement(SpsButton, { kind: ButtonKind.LINK, onClick: onClear }, t("design-system:filterPanel.clear"))));
+}
+Object.assign(SpsFilterPanelCap, {
+    props: propsDoc,
+    propTypes: propTypes,
+    displayName: "SpsFilterPanelCap",
+});
+//# sourceMappingURL=SpsFilterPanelCap.js.map

package/dist/out-tsc/filter-panel/SpsFilterPanelCap.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpsFilterPanelCap.js","sourceRoot":"","sources":["../../../src/filter-panel/SpsFilterPanelCap.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,UAAU,EAAE,OAAO,IAAI,WAAW,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AACzF,OAAO,KAAK,SAAS,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AACtC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAC/B,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAEtC,IAAM,QAAQ,GAAG;IACf,OAAO,EAAE,YAAY;CACtB,CAAC;AAEF,IAAM,SAAS,yBACV,SAAS,CAAC,kBAAkB,KAC/B,OAAO,EAAE,SAAS,CAAC,GAAG,EAAc,GACrC,CAAC;AAIF,MAAM,UAAU,iBAAiB,CAAC,EAKT;IAJvB,IAAA,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,OAAO,aAAA,EACJ,IAAI,cAJyB,oCAKjC,CADQ;IAEC,IAAA,CAAC,GAAK,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,EAAlC,CAAmC;IAE5C,OAAO,CACL,sCAAK,SAAS,EAAE,IAAI,CAAC,uBAAuB,EAAE,SAAS,CAAC,IAAM,IAAI;QAChE,6BAAK,SAAS,EAAC,sCAAsC;YACnD,oBAAC,IAAI,IAAC,IAAI,EAAE,WAAW,CAAC,MAAM,EAAE,IAAI,EAAE,WAAW,CAAC,KAAK,GAAI;YAC3D,+BAAI,CAAC,CAAC,iCAAiC,CAAC,CAAK,CACzC;QACN,oBAAC,SAAS,IAAC,IAAI,EAAE,UAAU,CAAC,IAAI,EAAE,OAAO,EAAE,OAAO,IAC/C,CAAC,CAAC,iCAAiC,CAAC,CAC3B,CACR,CACP,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,CAAC,iBAAiB,EAAE;IAC/B,KAAK,EAAE,QAAQ;IACf,SAAS,WAAA;IACT,WAAW,EAAE,mBAAmB;CACjC,CAAC,CAAC"}

package/dist/out-tsc/filter-panel/SpsFilterPanelFilterBox.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+import * as PropTypes from "../prop-types";
+import type { SpsFormArrayMeta, SpsFormGroupMeta } from "../form";
+declare const propTypes: {
+    value: PropTypes.Requireable<string>;
+    placeholder: PropTypes.Requireable<string>;
+    formMeta: PropTypes.Requireable<SpsFormArrayMeta<any> | SpsFormGroupMeta<any>>;
+    onFilterChange: PropTypes.Requireable<React.ChangeEventHandler<HTMLInputElement>>;
+    children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    className: PropTypes.Requireable<string>;
+    "data-testid": PropTypes.Requireable<string>;
+    unsafelyReplaceClassName: PropTypes.Requireable<string>;
+};
+export declare type SpsFilterPanelFilterBoxProps = PropTypes.InferTS<typeof propTypes, HTMLDivElement>;
+export declare function SpsFilterPanelFilterBox({ className, value, placeholder, formMeta, onFilterChange, ...rest }: SpsFilterPanelFilterBoxProps): JSX.Element;
+export {};

package/dist/out-tsc/filter-panel/SpsFilterPanelFilterBox.js

@@ -0,0 +1,49 @@
+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 * as React from "react";
+import clsx from "clsx";
+import { SpsIcon } from "@spscommerce/ds-shared";
+import * as PropTypes from "../prop-types";
+import { SpsTextInput } from "../text-input";
+import { I18nContext } from "../i18n";
+var propsDoc = {
+    value: "string",
+    placeholder: "string",
+    formMeta: "SpsFormArrayMeta<any> | SpsFormGroupMeta<any>",
+    onFilterChange: "ChangeEventHandler<HTMLInputElement>",
+};
+var propTypes = __assign(__assign({}, PropTypes.spsGlobalPropTypes), { value: PropTypes.string, placeholder: PropTypes.string, formMeta: PropTypes.oneOfType([
+        PropTypes.impl(), PropTypes.impl(),
+    ]), onFilterChange: PropTypes.fun() });
+export function SpsFilterPanelFilterBox(_a) {
+    var className = _a.className, value = _a.value, placeholder = _a.placeholder, formMeta = _a.formMeta, onFilterChange = _a.onFilterChange, rest = __rest(_a, ["className", "value", "placeholder", "formMeta", "onFilterChange"]);
+    var t = React.useContext(I18nContext).t;
+    return (React.createElement("div", __assign({ className: clsx("sps-filter-panel__filter-box", className) }, rest),
+        React.createElement(SpsTextInput, { value: value, icon: SpsIcon.FILTER, formMeta: formMeta, placeholder: placeholder || t("design-system:filterPanel.filterPlaceholder"), onChange: onFilterChange })));
+}
+Object.assign(SpsFilterPanelFilterBox, {
+    props: propsDoc,
+    propTypes: propTypes,
+    displayName: "SpsFilterPanelFilterBox",
+});
+//# sourceMappingURL=SpsFilterPanelFilterBox.js.map

package/dist/out-tsc/filter-panel/SpsFilterPanelFilterBox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpsFilterPanelFilterBox.js","sourceRoot":"","sources":["../../../src/filter-panel/SpsFilterPanelFilterBox.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,OAAO,KAAK,SAAS,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAE7C,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAEtC,IAAM,QAAQ,GAAG;IACf,KAAK,EAAE,QAAQ;IACf,WAAW,EAAE,QAAQ;IACrB,QAAQ,EAAE,+CAA+C;IACzD,cAAc,EAAE,sCAAsC;CACvD,CAAC;AAEF,IAAM,SAAS,yBACV,SAAS,CAAC,kBAAkB,KAC/B,KAAK,EAAE,SAAS,CAAC,MAAM,EACvB,WAAW,EAAE,SAAS,CAAC,MAAM,EAC7B,QAAQ,EAAE,SAAS,CAAC,SAAS,CAAC;QAC5B,SAAS,CAAC,IAAI,EAAyB,EAAE,SAAS,CAAC,IAAI,EAAyB;KACjF,CAAC,EACF,cAAc,EAAE,SAAS,CAAC,GAAG,EAA8C,GAC5E,CAAC;AAIF,MAAM,UAAU,uBAAuB,CAAC,EAOT;IAN7B,IAAA,SAAS,eAAA,EACT,KAAK,WAAA,EACL,WAAW,iBAAA,EACX,QAAQ,cAAA,EACR,cAAc,oBAAA,EACX,IAAI,cAN+B,mEAOvC,CADQ;IAEC,IAAA,CAAC,GAAK,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,EAAlC,CAAmC;IAE5C,OAAO,CACL,sCAAK,SAAS,EAAE,IAAI,CAAC,8BAA8B,EAAE,SAAS,CAAC,IAAM,IAAI;QACvE,oBAAC,YAAY,IACX,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,OAAO,CAAC,MAAM,EACpB,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,IAAI,CAAC,CAAC,6CAA6C,CAAC,EAC5E,QAAQ,EAAE,cAAc,GACxB,CACE,CACP,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,CAAC,uBAAuB,EAAE;IACrC,KAAK,EAAE,QAAQ;IACf,SAAS,WAAA;IACT,WAAW,EAAE,yBAAyB;CACvC,CAAC,CAAC"}

package/dist/out-tsc/filter-panel/SpsFilterPanelSection.d.ts

@@ -0,0 +1,16 @@
+import * as PropTypes from "../prop-types";
+declare const propTypes: {
+    title: PropTypes.Requireable<string>;
+    expanded: PropTypes.Requireable<boolean>;
+    heightPx: PropTypes.Requireable<number>;
+    heightRem: PropTypes.Requireable<number>;
+    onExpand: PropTypes.Requireable<() => void>;
+    onCollapse: PropTypes.Requireable<() => void>;
+    children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    className: PropTypes.Requireable<string>;
+    "data-testid": PropTypes.Requireable<string>;
+    unsafelyReplaceClassName: PropTypes.Requireable<string>;
+};
+export declare type SpsFilterPanelSectionProps = PropTypes.InferTS<typeof propTypes, HTMLDivElement>;
+export declare function SpsFilterPanelSection({ children, className, title, expanded, heightPx, heightRem, onExpand, onCollapse, ...rest }: SpsFilterPanelSectionProps): JSX.Element;
+export {};