@spscommerce/ds-react 5.20.2 → 5.20.3-ie

package/dist/out-tsc/dropdown/SpsDropdown.examples.js

@@ -0,0 +1,95 @@
+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 SpsDropdownExamples = {
+    labelled: {
+        label: "Labelled",
+        examples: {
+            default: {
+                description: "<h3> Default Dropdown</h3>",
+                react: code(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n                function SpsDropdownBasicDefault(props) {\n                    const [action, updateAction] = useSpsAction({\n                        label: \"Option B\"\n                    }, () => console.log(\"Option B\"));\n                    return (\n                        <SpsDropdown id=\"regular\" label=\"Dropdown\" options={[\n                            [{ label: \"Option A\" }, () => console.log(\"Option A\")],\n                            action,\n                        ]}/>\n                    );\n                }\n            "], ["\n                function SpsDropdownBasicDefault(props) {\n                    const [action, updateAction] = useSpsAction({\n                        label: \"Option B\"\n                    }, () => console.log(\"Option B\"));\n                    return (\n                        <SpsDropdown id=\"regular\" label=\"Dropdown\" options={[\n                            [{ label: \"Option A\" }, () => console.log(\"Option A\")],\n                            action,\n                        ]}/>\n                    );\n                }\n            "]))),
+            },
+            key: {
+                description: "<h3> Key Dropdown</h3>",
+                react: code(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n                function SpsDropdownBasicKey(props) {\n                    return (\n                      <SpsDropdown\n                        label=\"Dropdown\"\n                        kind=\"key\"\n                        options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")]]}\n                      />\n                    );\n                  }\n            "], ["\n                function SpsDropdownBasicKey(props) {\n                    return (\n                      <SpsDropdown\n                        label=\"Dropdown\"\n                        kind=\"key\"\n                        options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")]]}\n                      />\n                    );\n                  }\n            "]))),
+            },
+            confirm: {
+                description: "<h3> Confirm Dropdown</h3>",
+                react: code(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n                function SpsDropdownBasicConfirm(props) {\n                    return (\n                      <SpsDropdown\n                        label=\"Dropdown\"\n                        kind=\"confirm\"\n                        options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")]]}\n                      />\n                    );\n                  }\n            "], ["\n                function SpsDropdownBasicConfirm(props) {\n                    return (\n                      <SpsDropdown\n                        label=\"Dropdown\"\n                        kind=\"confirm\"\n                        options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")]]}\n                      />\n                    );\n                  }\n            "]))),
+            },
+            delete: {
+                description: "<h3> Delete Dropdown</h3>",
+                react: code(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n                function SpsDropdownBasicDelete(props) {\n                    return (\n                      <SpsDropdown\n                        label=\"Dropdown\"\n                        kind=\"delete\"\n                        options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")]]}\n                      />\n                    );\n                  }\n            "], ["\n                function SpsDropdownBasicDelete(props) {\n                    return (\n                      <SpsDropdown\n                        label=\"Dropdown\"\n                        kind=\"delete\"\n                        options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")]]}\n                      />\n                    );\n                  }\n            "]))),
+            },
+        },
+    },
+    withIcon: {
+        label: "Labelled With Icon",
+        examples: {
+            default: {
+                description: "<h3> Default Dropdown With Icon</h3>",
+                react: code(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n                function SpsDropdownWithIconDefault(props) {\n                    const [action, updateAction] = useSpsAction(\n                      {\n                        label: \"Option B\"\n                      },\n                      () => console.log(\"Option B\")\n                    );\n                    return (\n                      <SpsDropdown\n                        label=\"Dropdown\"\n                        icon=\"drill\"\n                        options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")], action]}\n                      />\n                    );\n                  }\n            "], ["\n                function SpsDropdownWithIconDefault(props) {\n                    const [action, updateAction] = useSpsAction(\n                      {\n                        label: \"Option B\"\n                      },\n                      () => console.log(\"Option B\")\n                    );\n                    return (\n                      <SpsDropdown\n                        label=\"Dropdown\"\n                        icon=\"drill\"\n                        options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")], action]}\n                      />\n                    );\n                  }\n            "]))),
+            },
+            key: {
+                description: "<h3>Key Dropdown With Icon</h3>",
+                react: code(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n                function SpsDropdownWithIconKey(props) {\n                    return (\n                      <SpsDropdown\n                        label=\"Dropdown\"\n                        kind=\"key\"\n                        icon=\"key\"\n                        options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")]]}\n                      />\n                    );\n                  }\n            "], ["\n                function SpsDropdownWithIconKey(props) {\n                    return (\n                      <SpsDropdown\n                        label=\"Dropdown\"\n                        kind=\"key\"\n                        icon=\"key\"\n                        options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")]]}\n                      />\n                    );\n                  }\n            "]))),
+            },
+            confirm: {
+                description: "<h3> Confirm Dropdown With Icon</h3>",
+                react: code(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n                function SpsDropdownWithIconConfirm(props) {\n                    return (\n                      <SpsDropdown\n                        label=\"Dropdown\"\n                        kind=\"confirm\"\n                        icon=\"rocket\"\n                        options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")]]}\n                      />\n                    );\n                  }\n            "], ["\n                function SpsDropdownWithIconConfirm(props) {\n                    return (\n                      <SpsDropdown\n                        label=\"Dropdown\"\n                        kind=\"confirm\"\n                        icon=\"rocket\"\n                        options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")]]}\n                      />\n                    );\n                  }\n            "]))),
+            },
+            delete: {
+                description: "<h3> Delete Dropdown With Icon</h3>",
+                react: code(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n                function SpsDropdownWithIconDelete(props) {\n                    return (\n                      <SpsDropdown\n                        label=\"Dropdown\"\n                        kind=\"delete\"\n                        icon=\"trash\"\n                        options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")]]}\n                      />\n                    );\n                  }\n            "], ["\n                function SpsDropdownWithIconDelete(props) {\n                    return (\n                      <SpsDropdown\n                        label=\"Dropdown\"\n                        kind=\"delete\"\n                        icon=\"trash\"\n                        options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")]]}\n                      />\n                    );\n                  }\n            "]))),
+            },
+        },
+    },
+    withIconButton: {
+        label: " Icon Button Dropdown",
+        examples: {
+            default: {
+                description: "<h3> Default Icon Button Dropdown</h3>",
+                react: code(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n                function SpsDropdownBasicIcon(props) {\n                    return (\n                      <SpsDropdown\n                        kind=\"icon\"\n                        options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")]]}\n                      />\n                    );\n                  }\n            "], ["\n                function SpsDropdownBasicIcon(props) {\n                    return (\n                      <SpsDropdown\n                        kind=\"icon\"\n                        options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")]]}\n                      />\n                    );\n                  }\n            "]))),
+            },
+            custom: {
+                description: "<h3>Custom Icon</h3>",
+                react: code(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n                function SpsDropdownIconCustomIcon(props) {\n                    return (\n                      <SpsDropdown\n                        kind=\"icon\"\n                        icon=\"gear\"\n                        options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")]]}\n                      />\n                    );\n                  }\n            "], ["\n                function SpsDropdownIconCustomIcon(props) {\n                    return (\n                      <SpsDropdown\n                        kind=\"icon\"\n                        icon=\"gear\"\n                        options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")]]}\n                      />\n                    );\n                  }\n            "]))),
+            },
+        },
+    },
+    disabled: {
+        label: "Disabled",
+        examples: {
+            labelled: {
+                description: "<h3> Disabled Labelled Dropdown</h3>",
+                react: code(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n                function SpsDropdownDisabled(props) {\n                    return (\n                      <SpsDropdown\n                        id=\"disabled\"\n                        label=\"Dropdown\"\n                        icon=\"drill\"\n                        disabled\n                        options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")]]}\n                      />\n                    );\n                  }\n            "], ["\n                function SpsDropdownDisabled(props) {\n                    return (\n                      <SpsDropdown\n                        id=\"disabled\"\n                        label=\"Dropdown\"\n                        icon=\"drill\"\n                        disabled\n                        options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")]]}\n                      />\n                    );\n                  }\n            "]))),
+            },
+            iconButton: {
+                description: "<h3>Disabled Icon Button Dropdown</h3>",
+                react: code(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n                function SpsDropdownIconCustomIcon(props) {\n                    return (\n                      <SpsDropdown disabled\n                        kind=\"icon\"\n                        icon=\"gear\"\n                        options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")]]}\n                      />\n                    );\n                  }\n            "], ["\n                function SpsDropdownIconCustomIcon(props) {\n                    return (\n                      <SpsDropdown disabled\n                        kind=\"icon\"\n                        icon=\"gear\"\n                        options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")]]}\n                      />\n                    );\n                  }\n            "]))),
+            },
+        },
+    },
+    spinning: {
+        label: "Spinning",
+        examples: {
+            default: {
+                description: "<h3>Spinning Dropdown</h3>",
+                jsx: code(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n                        <SpsDropdown label=\"Dropdown\" options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")],]} spinning />\n                "], ["\n                        <SpsDropdown label=\"Dropdown\" options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")],]} spinning />\n                "]))),
+            },
+        },
+    },
+    checkbox: {
+        label: "Checkbox",
+        examples: {
+            default: {
+                description: "<h3>Dropdown With Checkbox</h3>",
+                react: code(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n                function DemoComponent() {\n                  const [checked, setChecked] = React.useState(false)\n                  const onChange = (x) => setChecked(!checked)\n                  const options = [\n                    [\n                      { label: \"Select All Results\", icon: SpsIcon.FILE_SIZE },\n                      () => {},\n                    ],\n                    [\n                      { label: \"Select This Page\", icon: SpsIcon.FILE_SOLID },\n                      () => {},\n                    ],\n                    [{ label: \"Select None\", icon: SpsIcon.BAN }, () => {}],\n                    [{ label: \"Select All Favorites\", icon: SpsIcon.STAR }, () => {}],\n                    [\n                      { label: \"Select All by Tag\u2026\", icon: SpsIcon.ITEM_TAG },\n                      () => {},\n                    ],\n                  ]\n                  const items = [\n                    {\n                      spine: 2,\n                      title: \"Seven Samurai\",\n                      year: 1954,\n                    },\n                    {\n                      spine: 29,\n                      title: \"Picnic at Hanging Rock\",\n                      year: 1975,\n                    },\n                    {\n                      spine: 62,\n                      title: \"The Passion of Joan of Arc\",\n                      year: 1928,\n                    },\n                  ]\n\n                  return (\n                    <SpsTable selectable={true}>\n                      <SpsTableHead>\n                        <SpsTableRow>\n                          <SpsTableHeader controlCell={true}>\n                            <SpsCheckboxDropdown\n                              checked={checked}\n                              onChange={onChange}\n                              options={options}\n                            />\n                          </SpsTableHeader>\n                          <SpsTableHeader>Spine</SpsTableHeader>\n                          <SpsTableHeader>Title</SpsTableHeader>\n                          <SpsTableHeader>Year</SpsTableHeader>\n                        </SpsTableRow>\n                      </SpsTableHead>\n                      <SpsTableBody>\n                        {items.map((row, index) => {\n                          return (\n                            <SpsTableRow key={index}>\n                              <SpsTableCell>\n                                <SpsCheckbox />\n                              </SpsTableCell>\n                              <SpsTableCell>{row[\"spine\"]}</SpsTableCell>\n                              <SpsTableCell>{row[\"title\"]}</SpsTableCell>\n                              <SpsTableCell>{row[\"year\"]}</SpsTableCell>\n                            </SpsTableRow>\n                          )\n                        })}\n                      </SpsTableBody>\n                    </SpsTable>\n                  )\n                }\n              "], ["\n                function DemoComponent() {\n                  const [checked, setChecked] = React.useState(false)\n                  const onChange = (x) => setChecked(!checked)\n                  const options = [\n                    [\n                      { label: \"Select All Results\", icon: SpsIcon.FILE_SIZE },\n                      () => {},\n                    ],\n                    [\n                      { label: \"Select This Page\", icon: SpsIcon.FILE_SOLID },\n                      () => {},\n                    ],\n                    [{ label: \"Select None\", icon: SpsIcon.BAN }, () => {}],\n                    [{ label: \"Select All Favorites\", icon: SpsIcon.STAR }, () => {}],\n                    [\n                      { label: \"Select All by Tag\u2026\", icon: SpsIcon.ITEM_TAG },\n                      () => {},\n                    ],\n                  ]\n                  const items = [\n                    {\n                      spine: 2,\n                      title: \"Seven Samurai\",\n                      year: 1954,\n                    },\n                    {\n                      spine: 29,\n                      title: \"Picnic at Hanging Rock\",\n                      year: 1975,\n                    },\n                    {\n                      spine: 62,\n                      title: \"The Passion of Joan of Arc\",\n                      year: 1928,\n                    },\n                  ]\n\n                  return (\n                    <SpsTable selectable={true}>\n                      <SpsTableHead>\n                        <SpsTableRow>\n                          <SpsTableHeader controlCell={true}>\n                            <SpsCheckboxDropdown\n                              checked={checked}\n                              onChange={onChange}\n                              options={options}\n                            />\n                          </SpsTableHeader>\n                          <SpsTableHeader>Spine</SpsTableHeader>\n                          <SpsTableHeader>Title</SpsTableHeader>\n                          <SpsTableHeader>Year</SpsTableHeader>\n                        </SpsTableRow>\n                      </SpsTableHead>\n                      <SpsTableBody>\n                        {items.map((row, index) => {\n                          return (\n                            <SpsTableRow key={index}>\n                              <SpsTableCell>\n                                <SpsCheckbox />\n                              </SpsTableCell>\n                              <SpsTableCell>{row[\"spine\"]}</SpsTableCell>\n                              <SpsTableCell>{row[\"title\"]}</SpsTableCell>\n                              <SpsTableCell>{row[\"year\"]}</SpsTableCell>\n                            </SpsTableRow>\n                          )\n                        })}\n                      </SpsTableBody>\n                    </SpsTable>\n                  )\n                }\n              "]))),
+            },
+        },
+    },
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14;
+//# sourceMappingURL=SpsDropdown.examples.js.map

package/dist/out-tsc/dropdown/SpsDropdown.examples.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpsDropdown.examples.js","sourceRoot":"","sources":["../../../src/dropdown/SpsDropdown.examples.ts"],"names":[],"mappings":";;;;AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAG1C,MAAM,CAAC,IAAM,mBAAmB,GAAoB;IAClD,QAAQ,EAAE;QACR,KAAK,EAAE,UAAU;QACjB,QAAQ,EAAE;YACR,OAAO,EAAE;gBACP,WAAW,EAAE,4BAA4B;gBACzC,KAAK,EAAE,IAAI,gnBAAA,6iBAYN,IAAA;aACN;YACD,GAAG,EAAE;gBACH,WAAW,EAAE,wBAAwB;gBACrC,KAAK,EAAE,IAAI,qcAAA,kYAUN,IAAA;aACN;YACD,OAAO,EAAE;gBACP,WAAW,EAAE,4BAA4B;gBACzC,KAAK,EAAE,IAAI,6cAAA,0YAUN,IAAA;aACN;YACD,MAAM,EAAE;gBACN,WAAW,EAAE,2BAA2B;gBACxC,KAAK,EAAE,IAAI,2cAAA,wYAUN,IAAA;aACN;SACF;KACF;IACD,QAAQ,EAAE;QACR,KAAK,EAAE,oBAAoB;QAC3B,QAAQ,EAAE;YACR,OAAO,EAAE;gBACP,WAAW,EAAE,sCAAsC;gBACnD,KAAK,EAAE,IAAI,usBAAA,ooBAgBN,IAAA;aACN;YACD,GAAG,EAAE;gBACH,WAAW,EAAE,iCAAiC;gBAC9C,KAAK,EAAE,IAAI,8eAAA,2aAWN,IAAA;aACN;YACD,OAAO,EAAE;gBACP,WAAW,EAAE,sCAAsC;gBACnD,KAAK,EAAE,IAAI,yfAAA,sbAWN,IAAA;aACN;YACD,MAAM,EAAE;gBACN,WAAW,EAAE,qCAAqC;gBAClD,KAAK,EAAE,IAAI,sfAAA,mbAWN,IAAA;aACN;SACF;KACF;IACD,cAAc,EAAE;QACd,KAAK,EAAE,uBAAuB;QAC9B,QAAQ,EAAE;YACR,OAAO,EAAE;gBACP,WAAW,EAAE,wCAAwC;gBACrD,KAAK,EAAE,IAAI,2ZAAA,wVASN,IAAA;aACN;YACD,MAAM,EAAE;gBACN,WAAW,EAAE,sBAAsB;gBACnC,KAAK,EAAE,IAAI,ycAAA,oYAUN,IAAA;aACN;SACF;KACF;IACD,QAAQ,EAAE;QACR,KAAK,EAAE,UAAU;QACjB,QAAQ,EAAE;YACR,QAAQ,EAAE;gBACR,WAAW,EAAE,sCAAsC;gBACnD,KAAK,EAAE,IAAI,ohBAAA,+cAYN,IAAA;aACN;YACD,UAAU,EAAE;gBACV,WAAW,EAAE,wCAAwC;gBACrD,KAAK,EAAE,IAAI,kdAAA,6YAUN,IAAA;aACN;SACF;KACF;IACD,QAAQ,EAAE;QACR,KAAK,EAAE,UAAU;QACjB,QAAQ,EAAE;YACR,OAAO,EAAE;gBACP,WAAW,EAAE,4BAA4B;gBACzC,GAAG,EAAE,IAAI,sOAAA,iKAEA,IAAA;aACV;SACF;KACF;IACD,QAAQ,EAAE;QACR,KAAK,EAAE,UAAU;QACjB,QAAQ,EAAE;YACR,OAAO,EAAE;gBACP,WAAW,EAAE,iCAAiC;gBAC9C,KAAK,EAAE,IAAI,2hGAAA,s9FAuEJ,IAAA;aACR;SACF;KACF;CACF,CAAC"}

package/dist/out-tsc/dropdown/SpsDropdown.js

@@ -0,0 +1,164 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+import { DropdownKind, SPS_ACTION_DEFAULTS, SpsIcon, Position, } from "@spscommerce/ds-shared";
+import clsx from "clsx";
+import * as React from "react";
+import { SpsOptionList } from "../option-list/SpsOptionList";
+import * as PropTypes from "../prop-types";
+import { I18nContext } from "../i18n";
+import { useElementId } from "../utils/useElementId";
+var propsDoc = {
+    alignLeft: "boolean",
+    disabled: "boolean",
+    icon: "SpsIcon",
+    kind: "DropdownKind",
+    label: "string",
+    options: "Array<SpsActionMethod | [SpsActionDescriptor, () => void]>",
+    spinning: "boolean",
+    spinningTitle: "string",
+    tallOptionList: "boolean",
+    onOpen: "() => void",
+    onClose: "() => void",
+    loading: "boolean",
+    maxHeightOptionListPx: "number",
+    maxHeightOptionListRem: "number",
+};
+var propTypes = __assign(__assign({}, PropTypes.spsGlobalPropTypes), { alignLeft: PropTypes.bool, disabled: PropTypes.bool, icon: PropTypes.enumValue(SpsIcon), kind: PropTypes.enumValue(DropdownKind), label: PropTypes.string, 
+    // eslint thinks there is a space between the name and open paren below for some reason
+    // eslint-disable-next-line no-spaced-func
+    options: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.any])).isRequired, spinning: PropTypes.bool, spinningTitle: PropTypes.string, tallOptionList: PropTypes.bool, onOpen: PropTypes.fun(), onClose: PropTypes.fun(), loading: PropTypes.bool, maxHeightOptionListPx: PropTypes.number, maxHeightOptionListRem: PropTypes.number });
+export function SpsDropdown(props) {
+    var alignLeft = props.alignLeft, className = props.className, disabled = props.disabled, iconProp = props.icon, idProp = props.id, kindProp = props.kind, label = props.label, _a = props.options, optionsProp = _a === void 0 ? [] : _a, tabIndex = props.tabIndex, spinning = props.spinning, spinningTitle = props.spinningTitle, tallOptionList = props.tallOptionList, unsafelyReplaceClassName = props.unsafelyReplaceClassName, onOpen = props.onOpen, onClose = props.onClose, loading = props.loading, maxHeightOptionListPx = props.maxHeightOptionListPx, maxHeightOptionListRem = props.maxHeightOptionListRem, rest = __rest(props, ["alignLeft", "className", "disabled", "icon", "id", "kind", "label", "options", "tabIndex", "spinning", "spinningTitle", "tallOptionList", "unsafelyReplaceClassName", "onOpen", "onClose", "loading", "maxHeightOptionListPx", "maxHeightOptionListRem"]);
+    var t = React.useContext(I18nContext).t;
+    var id = useElementId(idProp);
+    var _b = __read(React.useState(false), 2), isOpen = _b[0], setIsOpen = _b[1];
+    var _c = __read(React.useState(false), 2), opensUpward = _c[0], setOpensUpward = _c[1];
+    var _d = __read(React.useState(null), 2), keyDown = _d[0], setKeyDown = _d[1];
+    var options = optionsProp.map(function (o) { return (typeof o === "function"
+        ? o
+        : Object.assign(o[1], __assign(__assign({}, SPS_ACTION_DEFAULTS), o[0]))); });
+    var buttonId = id.current + "-button";
+    var menuId = id.current + "-menu";
+    var icon;
+    var kind;
+    if (label) {
+        kind = kindProp || DropdownKind.DEFAULT;
+        icon = iconProp;
+    }
+    else {
+        kind = DropdownKind.ICON;
+        icon = iconProp || SpsIcon.ELLIPSES;
+    }
+    var dropdownRef = React.useRef(null);
+    React.useEffect(function () {
+        if (isOpen && onOpen) {
+            onOpen();
+        }
+        else if (!isOpen && onClose) {
+            onClose();
+        }
+    }, [isOpen]);
+    function handleDocumentClick() {
+        setIsOpen(false);
+    }
+    function handleButtonClick(event) {
+        event.stopPropagation();
+        event.nativeEvent.stopImmediatePropagation();
+        event.preventDefault();
+        if (!disabled && !spinning) {
+            setIsOpen(!isOpen);
+        }
+    }
+    function handleSelfToggle(olIsOpen) {
+        setIsOpen(olIsOpen);
+    }
+    function handleOptionSelected() {
+        setIsOpen(false);
+    }
+    function handleKeyDown(event) {
+        if (!disabled) {
+            if (["Up",
+                "ArrowUp",
+                "Down",
+                "ArrowDown"].indexOf(event.key) > -1) {
+                event.preventDefault();
+            }
+            event.persist();
+            setKeyDown(event);
+        }
+    }
+    function handleDropdownOpened(event) {
+        if (event.detail !== id.current) {
+            setIsOpen(false);
+        }
+    }
+    React.useEffect(function () {
+        document.addEventListener("click", handleDocumentClick);
+        document.addEventListener("DropdownOpened", handleDropdownOpened);
+        return function () {
+            document.removeEventListener("click", handleDocumentClick);
+            document.removeEventListener("DropdownOpened", handleDropdownOpened);
+        };
+    }, []);
+    React.useEffect(function () {
+        if (isOpen) {
+            var event_1 = document.createEvent("CustomEvent");
+            event_1.initCustomEvent("DropdownOpened", false, false, id.current);
+            document.dispatchEvent(event_1);
+        }
+    }, [isOpen]);
+    var classes = clsx(unsafelyReplaceClassName || "sps-dropdown", isOpen && "sps-dropdown--open", isOpen && "z-stratum-dropdown", opensUpward && "sps-dropdown--opens-upward", !label && "sps-dropdown--no-label", disabled && "disabled", className);
+    var buttonClasses = clsx("sps-button", "sps-button--" + kind, disabled && "sps-button--disabled", spinning && "sps-button--spinning");
+    var positionOverride = kind === DropdownKind.ICON && !alignLeft
+        ? [Position.BOTTOM_RIGHT, Position.TOP_RIGHT]
+        : null;
+    return (React.createElement("div", __assign({}, rest, { id: id.current, className: classes, onKeyDown: handleKeyDown }),
+        React.createElement(SpsOptionList, { positionOverride: positionOverride, isOpen: isOpen, "aria-labelledby": buttonId, keyDown: keyDown, onOptionSelected: handleOptionSelected, id: menuId, attachTo: dropdownRef, onPositionFlip: setOpensUpward, onSelfToggle: handleSelfToggle, options: options, offsets: [0, 0], tall: tallOptionList, optionRole: "option", loading: loading, maxHeightPx: maxHeightOptionListPx, maxHeightRem: maxHeightOptionListRem }),
+        React.createElement("div", { onClick: handleButtonClick, className: buttonClasses, ref: dropdownRef },
+            React.createElement("button", { type: "button", id: buttonId, "aria-haspopup": "true", "aria-controls": menuId, "aria-expanded": isOpen ? true : null, tabIndex: tabIndex, disabled: disabled, onClick: handleButtonClick },
+                React.createElement("i", { className: clsx("sps-icon", "sps-icon-" + icon) }),
+                label && React.createElement("span", null, label),
+                spinning && (React.createElement("div", { className: "sps-spinner", key: 1 }, spinningTitle || t("design-system:button.spinningTitle")))))));
+}
+Object.assign(SpsDropdown, {
+    props: propsDoc,
+    propTypes: propTypes,
+    displayName: "SpsDropdown",
+});
+//# sourceMappingURL=SpsDropdown.js.map

package/dist/out-tsc/dropdown/SpsDropdown.js.map

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

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

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

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

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

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

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

package/dist/out-tsc/feedback-block/SpsFeedbackBlock.d.ts

@@ -0,0 +1,12 @@
+import { FeedbackBlockKind } from "@spscommerce/ds-shared";
+import * as PropTypes from "../prop-types";
+declare const propTypes: {
+    kind: PropTypes.Requireable<FeedbackBlockKind>;
+    children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    className: PropTypes.Requireable<string>;
+    "data-testid": PropTypes.Requireable<string>;
+    unsafelyReplaceClassName: PropTypes.Requireable<string>;
+};
+export declare type SpsFeedbackBlockProps = PropTypes.InferTS<typeof propTypes, HTMLDivElement>;
+export declare function SpsFeedbackBlock(props: SpsFeedbackBlockProps): JSX.Element;
+export {};

package/dist/out-tsc/feedback-block/SpsFeedbackBlock.examples.d.ts

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

package/dist/out-tsc/feedback-block/SpsFeedbackBlock.examples.js

@@ -0,0 +1,63 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+/* eslint-disable react/prop-types */
+/* eslint-disable react/jsx-one-expression-per-line */
+import { code } from "@spscommerce/utils";
+export var SpsFeedbackBlockExamples = {
+    standard: {
+        label: "Standard Size",
+        description: "Use Standard Size Feedback Blocks for the majority of cases. If a smaller or more subtle solution is needed, use the Micro Size Feedback Block.",
+        examples: {
+            error: {
+                description: "Error",
+                jsx: code(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n                    <SpsFeedbackBlock kind={FeedbackBlockKind.ERROR}>\n                        We are experiencing difficulties communicating to the server. Please try again later.\n                    </SpsFeedbackBlock>\n                "], ["\n                    <SpsFeedbackBlock kind={FeedbackBlockKind.ERROR}>\n                        We are experiencing difficulties communicating to the server. Please try again later.\n                    </SpsFeedbackBlock>\n                "]))),
+            },
+            info: {
+                description: "Information",
+                jsx: code(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n                    <SpsFeedbackBlock kind={FeedbackBlockKind.INFO}>\n                        FYI - This page has been updated. Click refresh to see the most recent version.\n                    </SpsFeedbackBlock>\n                "], ["\n                    <SpsFeedbackBlock kind={FeedbackBlockKind.INFO}>\n                        FYI - This page has been updated. Click refresh to see the most recent version.\n                    </SpsFeedbackBlock>\n                "]))),
+            },
+            proTip: {
+                description: "Pro Tip",
+                jsx: code(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n                    <SpsFeedbackBlock kind={FeedbackBlockKind.TIP}>\n                        Please Note: Click the Receive button above to check for new transactions from QuickBooks.\n                    </SpsFeedbackBlock>\n                "], ["\n                    <SpsFeedbackBlock kind={FeedbackBlockKind.TIP}>\n                        Please Note: Click the Receive button above to check for new transactions from QuickBooks.\n                    </SpsFeedbackBlock>\n                "]))),
+            },
+            success: {
+                description: "Success",
+                jsx: code(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n                    <SpsFeedbackBlock kind={FeedbackBlockKind.SUCCESS}>\n                        All items have been uploaded and are ready for export.\n                    </SpsFeedbackBlock>\n                "], ["\n                    <SpsFeedbackBlock kind={FeedbackBlockKind.SUCCESS}>\n                        All items have been uploaded and are ready for export.\n                    </SpsFeedbackBlock>\n                "]))),
+            },
+            warning: {
+                description: "Warning",
+                jsx: code(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n                    <SpsFeedbackBlock kind={FeedbackBlockKind.WARNING}>\n                        Warning! This order is missing a shipment date and is in jeopardy of being past due.\n                    </SpsFeedbackBlock>\n                "], ["\n                    <SpsFeedbackBlock kind={FeedbackBlockKind.WARNING}>\n                        Warning! This order is missing a shipment date and is in jeopardy of being past due.\n                    </SpsFeedbackBlock>\n                "]))),
+            },
+        },
+    },
+    micro: {
+        label: "Micro Size",
+        description: "Use Micro Size Feedback Blocks when a Standard Size Feedback Block is too large or too visually overwhelming.",
+        examples: {
+            error: {
+                description: "Error",
+                jsx: code(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n                    <SpsMicroBlock\n                        kind={FeedbackBlockKind.ERROR}\n                        message=\"We are experiencing difficulties communicating to the server. Please try again later.\"\n                    />\n                "], ["\n                    <SpsMicroBlock\n                        kind={FeedbackBlockKind.ERROR}\n                        message=\"We are experiencing difficulties communicating to the server. Please try again later.\"\n                    />\n                "]))),
+            },
+            info: {
+                description: "Information",
+                jsx: code(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n                    <SpsMicroBlock\n                        kind={FeedbackBlockKind.INFO}\n                        message=\"Refresh the page to see the most recent version.\"\n                    />\n                "], ["\n                    <SpsMicroBlock\n                        kind={FeedbackBlockKind.INFO}\n                        message=\"Refresh the page to see the most recent version.\"\n                    />\n                "]))),
+            },
+            proTip: {
+                description: "Pro Tip",
+                jsx: code(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n                    <SpsMicroBlock\n                        kind={FeedbackBlockKind.TIP}\n                        message=\"Tip: Click the Receive button to check for new transactions.\"\n                    />\n                "], ["\n                    <SpsMicroBlock\n                        kind={FeedbackBlockKind.TIP}\n                        message=\"Tip: Click the Receive button to check for new transactions.\"\n                    />\n                "]))),
+            },
+            success: {
+                description: "Success",
+                jsx: code(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n                    <SpsMicroBlock\n                        kind={FeedbackBlockKind.SUCCESS}\n                        message=\"All items have been uploaded and are ready for export.\"\n                    />\n                "], ["\n                    <SpsMicroBlock\n                        kind={FeedbackBlockKind.SUCCESS}\n                        message=\"All items have been uploaded and are ready for export.\"\n                    />\n                "]))),
+            },
+            warning: {
+                description: "Warning",
+                jsx: code(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n                    <SpsMicroBlock\n                        kind={FeedbackBlockKind.WARNING}\n                        message=\"This order is missing a shipment date.\"\n                    />\n                "], ["\n                    <SpsMicroBlock\n                        kind={FeedbackBlockKind.WARNING}\n                        message=\"This order is missing a shipment date.\"\n                    />\n                "]))),
+            },
+        },
+    },
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;
+//# sourceMappingURL=SpsFeedbackBlock.examples.js.map

package/dist/out-tsc/feedback-block/SpsFeedbackBlock.examples.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpsFeedbackBlock.examples.js","sourceRoot":"","sources":["../../../src/feedback-block/SpsFeedbackBlock.examples.tsx"],"names":[],"mappings":";;;;AAAA,qCAAqC;AACrC,sDAAsD;AACtD,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAG1C,MAAM,CAAC,IAAM,wBAAwB,GAAoB;IACvD,QAAQ,EAAE;QACR,KAAK,EAAE,eAAe;QACtB,WAAW,EACH,iJAAiJ;QACzJ,QAAQ,EAAE;YACR,KAAK,EAAE;gBACL,WAAW,EAAE,OAAO;gBACpB,GAAG,EAAE,IAAI,sTAAA,mPAIA,IAAA;aACV;YACD,IAAI,EAAE;gBACJ,WAAW,EAAE,aAAa;gBAC1B,GAAG,EAAE,IAAI,+SAAA,4OAIA,IAAA;aACV;YACD,MAAM,EAAE;gBACN,WAAW,EAAE,SAAS;gBACtB,GAAG,EAAE,IAAI,yTAAA,sPAIA,IAAA;aACV;YACD,OAAO,EAAE;gBACP,WAAW,EAAE,SAAS;gBACtB,GAAG,EAAE,IAAI,yRAAA,sNAIA,IAAA;aACV;YACD,OAAO,EAAE;gBACP,WAAW,EAAE,SAAS;gBACtB,GAAG,EAAE,IAAI,uTAAA,oPAIA,IAAA;aACV;SACF;KACF;IACD,KAAK,EAAE;QACL,KAAK,EAAE,YAAY;QACnB,WAAW,EACH,+GAA+G;QACvH,QAAQ,EAAE;YACR,KAAK,EAAE;gBACL,WAAW,EAAE,OAAO;gBACpB,GAAG,EAAE,IAAI,sUAAA,mQAKA,IAAA;aACV;YACD,IAAI,EAAE;gBACJ,WAAW,EAAE,aAAa;gBAC1B,GAAG,EAAE,IAAI,gSAAA,6NAKA,IAAA;aACV;YACD,MAAM,EAAE;gBACN,WAAW,EAAE,SAAS;gBACtB,GAAG,EAAE,IAAI,2SAAA,wOAKA,IAAA;aACV;YACD,OAAO,EAAE;gBACP,WAAW,EAAE,SAAS;gBACtB,GAAG,EAAE,IAAI,ySAAA,sOAKA,IAAA;aACV;YACD,OAAO,EAAE;gBACP,WAAW,EAAE,SAAS;gBACtB,GAAG,EAAE,IAAI,2RAAA,sNAKA,IAAA;aACV;SACF;KACF;CACF,CAAC"}

package/dist/out-tsc/feedback-block/SpsFeedbackBlock.js

@@ -0,0 +1,43 @@
+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 { FeedbackBlockIcons, FeedbackBlockKind } from "@spscommerce/ds-shared";
+import clsx from "clsx";
+import * as React from "react";
+import * as PropTypes from "../prop-types";
+var propsDoc = {
+    kind: "FeedbackBlockKind",
+};
+var propTypes = __assign(__assign({}, PropTypes.spsGlobalPropTypes), { kind: PropTypes.enumValue(FeedbackBlockKind) });
+export function SpsFeedbackBlock(props) {
+    var children = props.children, className = props.className, _a = props.kind, kind = _a === void 0 ? FeedbackBlockKind.TIP : _a, testId = props["data-testid"], unsafelyReplaceClassName = props.unsafelyReplaceClassName, rest = __rest(props, ["children", "className", "kind", "data-testid", "unsafelyReplaceClassName"]);
+    var classes = clsx(unsafelyReplaceClassName || "sps-feedback-block", "sps-feedback-block--" + kind, className);
+    return (React.createElement("div", __assign({ className: classes, role: "alert", "data-testid": testId }, rest),
+        React.createElement("i", { className: clsx("sps-icon", "sps-icon-" + FeedbackBlockIcons[kind]), "aria-hidden": "true" }),
+        React.createElement("span", { className: "sps-feedback-block__content", "data-testid": testId + "__text" }, children)));
+}
+Object.assign(SpsFeedbackBlock, {
+    props: propsDoc,
+    propTypes: propTypes,
+    displayName: "SpsFeedbackBlock",
+});
+//# sourceMappingURL=SpsFeedbackBlock.js.map

package/dist/out-tsc/feedback-block/SpsFeedbackBlock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpsFeedbackBlock.js","sourceRoot":"","sources":["../../../src/feedback-block/SpsFeedbackBlock.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAC/E,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,SAAS,MAAM,eAAe,CAAC;AAE3C,IAAM,QAAQ,GAAG;IACf,IAAI,EAAE,mBAAmB;CAC1B,CAAC;AAEF,IAAM,SAAS,yBACV,SAAS,CAAC,kBAAkB,KAC/B,IAAI,EAAE,SAAS,CAAC,SAAS,CAAoB,iBAAiB,CAAC,GAChE,CAAC;AAIF,MAAM,UAAU,gBAAgB,CAAC,KAA4B;IAEzD,IAAA,QAAQ,GAMN,KAAK,SANC,EACR,SAAS,GAKP,KAAK,UALE,EACT,KAIE,KAAK,KAJqB,EAA5B,IAAI,mBAAG,iBAAiB,CAAC,GAAG,KAAA,EACb,MAAM,GAGnB,KAAK,eAHc,EACrB,wBAAwB,GAEtB,KAAK,yBAFiB,EACrB,IAAI,UACL,KAAK,EAPH,4EAOL,CADQ,CACC;IAEV,IAAM,OAAO,GAAG,IAAI,CAClB,wBAAwB,IAAI,oBAAoB,EAChD,yBAAuB,IAAM,EAC7B,SAAS,CACV,CAAC;IAEF,OAAO,CACL,sCAAK,SAAS,EAAE,OAAO,EAAE,IAAI,EAAC,OAAO,iBAAc,MAAM,IAAM,IAAI;QACjE,2BAAG,SAAS,EAAE,IAAI,CAAC,UAAU,EAAE,cAAY,kBAAkB,CAAC,IAAI,CAAG,CAAC,iBAAc,MAAM,GAAG;QAC7F,8BAAM,SAAS,EAAC,6BAA6B,iBAAiB,MAAM,WAAQ,IAAG,QAAQ,CAAQ,CAC3F,CACP,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,CAAC,gBAAgB,EAAE;IAC9B,KAAK,EAAE,QAAQ;IACf,SAAS,WAAA;IACT,WAAW,EAAE,kBAAkB;CAChC,CAAC,CAAC"}

package/dist/out-tsc/feedback-block/index.d.ts

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

package/dist/out-tsc/feedback-block/index.js

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

package/dist/out-tsc/feedback-block/index.js.map

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

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

@@ -0,0 +1,22 @@
+import * as PropTypes from "../prop-types";
+import type { SpsFormArray } from "../form/hooks/formArray";
+import type { SpsFormGroup } from "../form/hooks/formGroup";
+import type { SpsFormSetMeta } from "../form/hooks/useSpsForm";
+declare const propTypes: {
+    errors: PropTypes.Requireable<PropTypes.ReactNodeOrRenderFn>;
+    formArray: PropTypes.Requireable<SpsFormArray<any>>;
+    formGroup: PropTypes.Requireable<SpsFormGroup>;
+    formMeta: PropTypes.Requireable<SpsFormSetMeta<any, import("../form/hooks/useSpsForm").InferredSpsFormMetaSetMembers<any>>>;
+    legend: PropTypes.Requireable<string>;
+    optional: PropTypes.Requireable<boolean>;
+    enabled: PropTypes.Requireable<boolean>;
+    onToggled: PropTypes.Requireable<(isEnabled: boolean) => void>;
+    tooltip: PropTypes.Requireable<string>;
+    children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    className: PropTypes.Requireable<string>;
+    "data-testid": PropTypes.Requireable<string>;
+    unsafelyReplaceClassName: PropTypes.Requireable<string>;
+};
+export declare type SpsFieldsetProps = PropTypes.InferTS<typeof propTypes, HTMLDivElement>;
+export declare function SpsFieldset({ children, className, errors, formArray, formGroup, formMeta, legend, unsafelyReplaceClassName, optional, enabled, onToggled, tooltip, "data-testid": testId }: SpsFieldsetProps): JSX.Element;
+export {};

package/dist/out-tsc/fieldset/SpsFieldset.examples.d.ts

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