@spscommerce/ds-react 5.20.0 → 5.20.3-ie

package/dist/out-tsc/card/SpsCard.examples.js

@@ -0,0 +1,98 @@
+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 SpsCardExamples = {
+    general: {
+        label: 'General Usage',
+        description: function (_a) {
+            var Link = _a.Link, NavigateTo = _a.NavigateTo;
+            return (React.createElement(React.Fragment, null,
+                React.createElement("h5", null, "Sizing and Layout"),
+                React.createElement("p", null,
+                    "All varieties of Cards should be placed on the SPS Grid (i.e. the width of a Card should span a specific number of grid columns). They should never be set to a custom width. See the ",
+                    React.createElement(Link, { to: "/style-and-layout/grid" }, "SPS Grid"),
+                    " and",
+                    ' ',
+                    React.createElement(Link, { to: "/style-and-layout/page-types" }, "Page Layouts"),
+                    " sections for more guidance on appropriate usage."),
+                React.createElement("p", null, "The height of a Card should typically be based on the content inside of it, but in specific cases a fixed height can be set. For these cases, content will scroll vertically inside of the container."),
+                React.createElement("h5", null, "Text Content"),
+                React.createElement("p", null,
+                    "The only text content that can exist outside of a Card is the",
+                    ' ',
+                    React.createElement(NavigateTo, { to: "page-title" }, "Page Title"),
+                    " component"),
+                React.createElement("p", null,
+                    "All other content should exist inside of a Card and should adhere to the SPS Design System ",
+                    React.createElement(Link, { to: "/style-and-layout/typography" }, "Typography"),
+                    " rules."),
+                React.createElement("h5", null, "Nesting"),
+                React.createElement("p", null, "Avoid nesting Cards inside of other Cards when possible. If nesting is necessary, avoid nesting more than one level deep (i.e. limit nesting to a Card inside of a Card).")));
+        },
+    },
+    basic: {
+        label: 'Basic card',
+        description: function () { return (React.createElement("p", null, "Basic Cards can include any type of general content, such as body copy, description lists, or more complex content such as forms.")); },
+        examples: {
+            basic: {
+                jsx: code(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n                    <SpsCardV2>\n                        <p>Business is changing... changing at the speed of information.</p>\n                    </SpsCardV2>\n                "], ["\n                    <SpsCardV2>\n                        <p>Business is changing... changing at the speed of information.</p>\n                    </SpsCardV2>\n                "]))),
+            },
+            sections: {
+                jsx: code(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n                    <SpsCardV2>\n                        <section>\n                            <h3>Description</h3>\n                            <p>\n                                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt\n                                ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco\n                                laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in\n                                voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat\n                                non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n                            </p>\n                        </section>\n                        <section>\n                            <h3>Usage Guidelines</h3>\n                            <p>\n                                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque\n                                laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi\n                                architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit\n                                aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione\n                                voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,\n                                consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et\n                                dolore magnam aliquam quaerat voluptatem.\n                            </p>\n                        </section>\n                    </SpsCardV2>\n                "], ["\n                    <SpsCardV2>\n                        <section>\n                            <h3>Description</h3>\n                            <p>\n                                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt\n                                ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco\n                                laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in\n                                voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat\n                                non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n                            </p>\n                        </section>\n                        <section>\n                            <h3>Usage Guidelines</h3>\n                            <p>\n                                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque\n                                laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi\n                                architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit\n                                aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione\n                                voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,\n                                consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et\n                                dolore magnam aliquam quaerat voluptatem.\n                            </p>\n                        </section>\n                    </SpsCardV2>\n                "]))),
+            },
+            nestedSections: {
+                jsx: code(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n                    <SpsCardV2>\n                        <section>\n                            <p>Card Header</p>\n                        </section>\n                        <section className=\"d-flex\">\n                            <section>\n                                <p>Section 1</p>\n                            </section>\n                            <section>\n                                <p>Section 2</p>\n                            </section>\n                            <section>\n                                <p>Section 3</p>\n                            </section>\n                        </section>\n                    </SpsCardV2>\n                "], ["\n                    <SpsCardV2>\n                        <section>\n                            <p>Card Header</p>\n                        </section>\n                        <section className=\"d-flex\">\n                            <section>\n                                <p>Section 1</p>\n                            </section>\n                            <section>\n                                <p>Section 2</p>\n                            </section>\n                            <section>\n                                <p>Section 3</p>\n                            </section>\n                        </section>\n                    </SpsCardV2>\n                "]))),
+            },
+        },
+    },
+    headers: {
+        label: 'Card + Header',
+        description: function () { return (React.createElement("p", null, "Headers can be attached to a Card to display a title (that describes the content inside the card) or add actions (buttons or links) that relate directly to the content inside of the card. Content is restricted to the left side (for titles) and right side (for actions) of the Header.")); },
+        examples: {
+            title: {
+                jsx: code(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n                    <SpsCardV2>\n                        <SpsCardV2Header className=\"sfg-row\">\n                            <div className=\"sfg-col-6\">\n                                <SpsCardV2Title>\n                                    <SpsI icon={SpsIcon.LIGHTBULB} />\n                                    Jabberwocky\n                                </SpsCardV2Title>\n                            </div>\n                            <div className=\"sfg-col-6 text-right\">\n                                <SpsButton\n                                    className=\"mr-2\"\n                                    kind={ButtonKind.LINK}\n                                >\n                                    Redefine\n                                </SpsButton>\n                                <SpsButton\n                                    kind={ButtonKind.ICON}\n                                    icon={SpsIcon.PRINTER}\n                                />\n                                <SpsButton\n                                    kind={ButtonKind.ICON}\n                                    icon={SpsIcon.DOWNLOAD_CLOUD}\n                                />\n                                <SpsButton\n                                    className=\"ml-2\"\n                                >\n                                    Innovate\n                                </SpsButton>\n                            </div>\n                        </SpsCardV2Header>\n                        <p>Whoever adapts first wins. In order to compete, we innovate; in order to innovate, we redefine; and how do we redefine? With a new definition!</p>\n                    </SpsCardV2>\n                "], ["\n                    <SpsCardV2>\n                        <SpsCardV2Header className=\"sfg-row\">\n                            <div className=\"sfg-col-6\">\n                                <SpsCardV2Title>\n                                    <SpsI icon={SpsIcon.LIGHTBULB} />\n                                    Jabberwocky\n                                </SpsCardV2Title>\n                            </div>\n                            <div className=\"sfg-col-6 text-right\">\n                                <SpsButton\n                                    className=\"mr-2\"\n                                    kind={ButtonKind.LINK}\n                                >\n                                    Redefine\n                                </SpsButton>\n                                <SpsButton\n                                    kind={ButtonKind.ICON}\n                                    icon={SpsIcon.PRINTER}\n                                />\n                                <SpsButton\n                                    kind={ButtonKind.ICON}\n                                    icon={SpsIcon.DOWNLOAD_CLOUD}\n                                />\n                                <SpsButton\n                                    className=\"ml-2\"\n                                >\n                                    Innovate\n                                </SpsButton>\n                            </div>\n                        </SpsCardV2Header>\n                        <p>Whoever adapts first wins. In order to compete, we innovate; in order to innovate, we redefine; and how do we redefine? With a new definition!</p>\n                    </SpsCardV2>\n                "]))),
+            },
+        },
+    },
+    footers: {
+        label: 'Card + Footer',
+        description: function () { return (React.createElement("p", null, "Footers can be attached to a Card to add secondary actions (buttons or links) that relate directly to the content inside of it, or other types of general content that may be applicable. Content can be placed in the middle or either side of the Footer.")); },
+        examples: {
+            basicFooter: {
+                jsx: code(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n                    <SpsCardV2>\n                        <p>Imagine a new way to do business that's faster than a cheetah. More powerful than... another cheetah! A way of doing business more magnificent than... a fish! Or a whale!</p>\n                        <SpsCardV2Footer className=\"sfg-row\">\n                            <div className=\"sfg-col-4\">\n                                <SpsButton\n                                    kind={ButtonKind.LINK}\n                                >\n                                    Manage Settings\n                                </SpsButton>\n                            </div>\n                            <div className=\"sfg-col-4\">\n                                Whales are not fish, but mammals like a Cheetah.\n                            </div>\n                            <div className=\"sfg-col-4 text-right\">\n                                <SpsButton>\n                                    Buy This\n                                </SpsButton>\n                            </div>\n                        </SpsCardV2Footer>\n                    </SpsCardV2>\n                "], ["\n                    <SpsCardV2>\n                        <p>Imagine a new way to do business that's faster than a cheetah. More powerful than... another cheetah! A way of doing business more magnificent than... a fish! Or a whale!</p>\n                        <SpsCardV2Footer className=\"sfg-row\">\n                            <div className=\"sfg-col-4\">\n                                <SpsButton\n                                    kind={ButtonKind.LINK}\n                                >\n                                    Manage Settings\n                                </SpsButton>\n                            </div>\n                            <div className=\"sfg-col-4\">\n                                Whales are not fish, but mammals like a Cheetah.\n                            </div>\n                            <div className=\"sfg-col-4 text-right\">\n                                <SpsButton>\n                                    Buy This\n                                </SpsButton>\n                            </div>\n                        </SpsCardV2Footer>\n                    </SpsCardV2>\n                "]))),
+            },
+        },
+    },
+    tabbed: {
+        label: 'Card + Tabs',
+        description: function () { return (React.createElement(React.Fragment, null,
+            React.createElement("p", null, "Use Tabs to combine multiple cards with unique but related content. Tabs can include optional details such as icons or tags."),
+            React.createElement("p", null,
+                React.createElement("code", null, "<Item>"),
+                " comes from the ",
+                React.createElement("code", null, "@react-stately/collections"),
+                "package, which is a peer dependency of our React components."))); },
+        examples: {
+            tabsOnly: {
+                jsx: code(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n                    <SpsCardV2>\n                        <SpsTabsV2>\n                            <Item\n                                key=\"tab1\"\n                                title=\"Trust\"\n                            >\n                                <p>So, what is it? What is it exactly that's going to revolutionize the way we do business?</p>\n                            </Item>\n                            <Item key=\"tab2\" title={\n                                <>\n                                    <span>Reliability</span>\n                                    <SpsTag kind={TagKind.KEY}>00</SpsTag>\n                                </>\n                            }>\n                                <p>Card with tabs, pane 2.</p>\n                            </Item>\n                            <Item key=\"tab3\" title={\n                                <>\n                                    <SpsI icon={SpsIcon.HEART} />\n                                    <span>The Future</span>\n                                </>\n                            }>\n                                <p>Card with tabs, pane 3.</p>\n                            </Item>\n                            <Item key=\"tab4\" title={\n                                <>\n                                    <SpsI icon={SpsIcon.HEART} />\n                                    <span>Bold</span>\n                                    <SpsTag kind={TagKind.KEY}>00</SpsTag>\n                                </>\n                            }>\n                                <p>Card with tabs, pane 4.</p>\n                            </Item>\n                        </SpsTabsV2>\n                    </SpsCardV2>\n                "], ["\n                    <SpsCardV2>\n                        <SpsTabsV2>\n                            <Item\n                                key=\"tab1\"\n                                title=\"Trust\"\n                            >\n                                <p>So, what is it? What is it exactly that's going to revolutionize the way we do business?</p>\n                            </Item>\n                            <Item key=\"tab2\" title={\n                                <>\n                                    <span>Reliability</span>\n                                    <SpsTag kind={TagKind.KEY}>00</SpsTag>\n                                </>\n                            }>\n                                <p>Card with tabs, pane 2.</p>\n                            </Item>\n                            <Item key=\"tab3\" title={\n                                <>\n                                    <SpsI icon={SpsIcon.HEART} />\n                                    <span>The Future</span>\n                                </>\n                            }>\n                                <p>Card with tabs, pane 3.</p>\n                            </Item>\n                            <Item key=\"tab4\" title={\n                                <>\n                                    <SpsI icon={SpsIcon.HEART} />\n                                    <span>Bold</span>\n                                    <SpsTag kind={TagKind.KEY}>00</SpsTag>\n                                </>\n                            }>\n                                <p>Card with tabs, pane 4.</p>\n                            </Item>\n                        </SpsTabsV2>\n                    </SpsCardV2>\n                "]))),
+            },
+            activeTabInput: {
+                jsx: code(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n                    <SpsCardV2>\n                        <SpsTabsV2 disabledKeys={[\"tab2\", \"tab3\"]}>\n                            <Item key=\"tab1\" title=\"Tab 1\">\n                                <p>Card with disabled tabs, pane 1.</p>\n                            </Item>\n                            <Item key=\"tab2\" title=\"Tab 2\">\n                            <p>Card with disabled tabs, pane 2.</p>\n                            </Item>\n                            <Item key=\"tab3\" title=\"Tab 3\">\n                                <p>Card with disabled tabs, pane 3.</p>\n                            </Item>\n                        </SpsTabsV2>\n                    </SpsCardV2>\n                "], ["\n                    <SpsCardV2>\n                        <SpsTabsV2 disabledKeys={[\"tab2\", \"tab3\"]}>\n                            <Item key=\"tab1\" title=\"Tab 1\">\n                                <p>Card with disabled tabs, pane 1.</p>\n                            </Item>\n                            <Item key=\"tab2\" title=\"Tab 2\">\n                            <p>Card with disabled tabs, pane 2.</p>\n                            </Item>\n                            <Item key=\"tab3\" title=\"Tab 3\">\n                                <p>Card with disabled tabs, pane 3.</p>\n                            </Item>\n                        </SpsTabsV2>\n                    </SpsCardV2>\n                "]))),
+            },
+        },
+    },
+    everything: {
+        label: 'Card + Header + Footer + Tabs',
+        description: function () { return (React.createElement("p", null, "Headers, Footers, and Tabs can be attached to Cards in any combination.")); },
+        examples: {
+            everything: {
+                jsx: code(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n                    <SpsCardV2>\n                        <SpsCardV2Header className=\"sfg-row\">\n                            <div className=\"sfg-col-6\">\n                                <SpsCardV2Title>\n                                    <SpsI className=\"gray500\" icon={SpsIcon.STATUS_OK} />\n                                    Panel_With_Cap\n                                </SpsCardV2Title>\n                            </div>\n                            <div className=\"sfg-col-6 text-right\">\n                                <SpsButton\n                                    className=\"mr-2\"\n                                    kind={ButtonKind.LINK}\n                                >\n                                    Redefine\n                                </SpsButton>\n                                <SpsButton\n                                    kind={ButtonKind.ICON}\n                                    icon={SpsIcon.PRINTER}\n                                />\n                                <SpsButton\n                                    kind={ButtonKind.ICON}\n                                    icon={SpsIcon.DOWNLOAD_CLOUD}\n                                />\n                                <SpsButton\n                                    className=\"ml-2\"\n                                >\n                                    Innovate\n                                </SpsButton>\n                            </div>\n                        </SpsCardV2Header>\n                        <SpsTabsV2>\n                            <Item key=\"tab1\" title=\"Trust\">\n                                <p>Simple... it's Jabberwocky.</p>\n                                <p>The game is changing right now.</p>\n                                <p>Coming in 2012.</p>\n                            </Item>\n                            <Item key=\"tab2\" title={\n                                <>\n                                    <span>Reliability</span>\n                                    <SpsTag kind={TagKind.KEY}>00</SpsTag>\n                                </>\n                            }>\n                                <p>Card with tabs, pane 2.</p>\n                            </Item>\n                            <Item key=\"tab3\" title={\n                                <>\n                                    <SpsI icon={SpsIcon.HEART} />\n                                    <span>The Future</span>\n                                </>\n                            }>\n                                <p>Card with tabs, pane 3.</p>\n                            </Item>\n                            <Item key=\"tab4\" title={\n                                <>\n                                    <SpsI icon={SpsIcon.HEART} />\n                                    <span>Bold</span>\n                                    <SpsTag kind={TagKind.KEY}>00</SpsTag>\n                                </>\n                            }>\n                                <p>Card with tabs, pane 4.</p>\n                            </Item>\n                        </SpsTabsV2>\n                        <SpsCardV2Footer>\n                            <div className=\"text-right\">\n                                <SpsButton\n                                    className=\"mr-2\"\n                                    kind={ButtonKind.LINK}\n                                >\n                                    Redefine\n                                </SpsButton>\n                                <SpsButton\n                                    kind={ButtonKind.ICON}\n                                    icon={SpsIcon.PRINTER}\n                                />\n                                <SpsButton\n                                    kind={ButtonKind.ICON}\n                                    icon={SpsIcon.DOWNLOAD_CLOUD}\n                                />\n                                <SpsButton\n                                    className=\"ml-2\"\n                                >\n                                    Innovate\n                                </SpsButton>\n                            </div>\n                        </SpsCardV2Footer>\n                    </SpsCardV2>\n                "], ["\n                    <SpsCardV2>\n                        <SpsCardV2Header className=\"sfg-row\">\n                            <div className=\"sfg-col-6\">\n                                <SpsCardV2Title>\n                                    <SpsI className=\"gray500\" icon={SpsIcon.STATUS_OK} />\n                                    Panel_With_Cap\n                                </SpsCardV2Title>\n                            </div>\n                            <div className=\"sfg-col-6 text-right\">\n                                <SpsButton\n                                    className=\"mr-2\"\n                                    kind={ButtonKind.LINK}\n                                >\n                                    Redefine\n                                </SpsButton>\n                                <SpsButton\n                                    kind={ButtonKind.ICON}\n                                    icon={SpsIcon.PRINTER}\n                                />\n                                <SpsButton\n                                    kind={ButtonKind.ICON}\n                                    icon={SpsIcon.DOWNLOAD_CLOUD}\n                                />\n                                <SpsButton\n                                    className=\"ml-2\"\n                                >\n                                    Innovate\n                                </SpsButton>\n                            </div>\n                        </SpsCardV2Header>\n                        <SpsTabsV2>\n                            <Item key=\"tab1\" title=\"Trust\">\n                                <p>Simple... it's Jabberwocky.</p>\n                                <p>The game is changing right now.</p>\n                                <p>Coming in 2012.</p>\n                            </Item>\n                            <Item key=\"tab2\" title={\n                                <>\n                                    <span>Reliability</span>\n                                    <SpsTag kind={TagKind.KEY}>00</SpsTag>\n                                </>\n                            }>\n                                <p>Card with tabs, pane 2.</p>\n                            </Item>\n                            <Item key=\"tab3\" title={\n                                <>\n                                    <SpsI icon={SpsIcon.HEART} />\n                                    <span>The Future</span>\n                                </>\n                            }>\n                                <p>Card with tabs, pane 3.</p>\n                            </Item>\n                            <Item key=\"tab4\" title={\n                                <>\n                                    <SpsI icon={SpsIcon.HEART} />\n                                    <span>Bold</span>\n                                    <SpsTag kind={TagKind.KEY}>00</SpsTag>\n                                </>\n                            }>\n                                <p>Card with tabs, pane 4.</p>\n                            </Item>\n                        </SpsTabsV2>\n                        <SpsCardV2Footer>\n                            <div className=\"text-right\">\n                                <SpsButton\n                                    className=\"mr-2\"\n                                    kind={ButtonKind.LINK}\n                                >\n                                    Redefine\n                                </SpsButton>\n                                <SpsButton\n                                    kind={ButtonKind.ICON}\n                                    icon={SpsIcon.PRINTER}\n                                />\n                                <SpsButton\n                                    kind={ButtonKind.ICON}\n                                    icon={SpsIcon.DOWNLOAD_CLOUD}\n                                />\n                                <SpsButton\n                                    className=\"ml-2\"\n                                >\n                                    Innovate\n                                </SpsButton>\n                            </div>\n                        </SpsCardV2Footer>\n                    </SpsCardV2>\n                "]))),
+            },
+        },
+    },
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
+//# sourceMappingURL=SpsCard.examples.js.map

package/dist/out-tsc/card/SpsCard.examples.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpsCard.examples.js","sourceRoot":"","sources":["../../../src/card/SpsCard.examples.tsx"],"names":[],"mappings":";;;;AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAG1C,MAAM,CAAC,IAAM,eAAe,GAAoB;IAC5C,OAAO,EAAE;QACL,KAAK,EAAE,eAAe;QACtB,WAAW,EAAE,UAAC,EAAoB;gBAAlB,IAAI,UAAA,EAAE,UAAU,gBAAA;YAAO,OAAA,CACnC;gBACI,oDAA0B;gBAC1B;;oBAG4B,oBAAC,IAAI,IAAC,EAAE,EAAC,wBAAwB,eAAgB;;oBAAK,GAAG;oBACjF,oBAAC,IAAI,IAAC,EAAE,EAAC,8BAA8B,mBAAoB;wEAE3D;gBACJ,uOAII;gBACJ,+CAAqB;gBACrB;;oBACkE,GAAG;oBACjE,oBAAC,UAAU,IAAC,EAAE,EAAC,YAAY,iBAAwB;iCACnD;gBACJ;;oBAEkB,oBAAC,IAAI,IAAC,EAAE,EAAC,8BAA8B,iBAAkB;8BACvE;gBACJ,0CAAgB;gBAChB,2MAII,CACL,CACN;QA/BsC,CA+BtC;KACJ;IACD,KAAK,EAAE;QACH,KAAK,EAAE,YAAY;QACnB,WAAW,EAAE,cAAM,OAAA,CACf,mKAGI,CACP,EALkB,CAKlB;QACD,QAAQ,EAAE;YACN,KAAK,EAAE;gBACH,GAAG,EAAE,IAAI,wPAAA,qLAIR,IAAA;aACJ;YACD,QAAQ,EAAE;gBACN,GAAG,EAAE,IAAI,y5DAAA,s1DAyBR,IAAA;aACJ;YACD,cAAc,EAAE;gBACZ,GAAG,EAAE,IAAI,gvBAAA,6qBAiBR,IAAA;aACJ;SACJ;KACJ;IACD,OAAO,EAAE;QACL,KAAK,EAAE,eAAe;QACtB,WAAW,EAAE,cAAM,OAAA,CACf,6TAKI,CACP,EAPkB,CAOlB;QACD,QAAQ,EAAE;YACN,KAAK,EAAE;gBACH,GAAG,EAAE,IAAI,qvDAAA,krDAiCR,IAAA;aACJ;SACJ;KACJ;IACD,OAAO,EAAE;QACL,KAAK,EAAE,eAAe;QACtB,WAAW,EAAE,cAAM,OAAA,CACf,6RAII,CACP,EANkB,CAMlB;QACD,QAAQ,EAAE;YACN,WAAW,EAAE;gBACT,GAAG,EAAE,IAAI,msCAAA,goCAqBR,IAAA;aACJ;SACJ;KACJ;IACD,MAAM,EAAE;QACJ,KAAK,EAAE,aAAa;QACpB,WAAW,EAAE,cAAM,OAAA,CACf;YACI,8JAGI;YACJ;gBACI,2CAAyB;;gBAAgB,+DAAuC;+EAEhF,CACL,CACN,EAXkB,CAWlB;QACD,QAAQ,EAAE;YACN,QAAQ,EAAE;gBACN,GAAG,EAAE,IAAI,8wDAAA,2sDAoCR,IAAA;aACJ;YACD,cAAc,EAAE;gBACZ,GAAG,EAAE,IAAI,kxBAAA,+sBAcR,IAAA;aACJ;SACJ;KACJ;IACD,UAAU,EAAE;QACR,KAAK,EAAE,+BAA+B;QACtC,WAAW,EAAE,cAAM,OAAA,CACf,yGAA8E,CACjF,EAFkB,CAElB;QACD,QAAQ,EAAE;YACN,UAAU,EAAE;gBACR,GAAG,EAAE,IAAI,swIAAA,msIAuFR,IAAA;aACJ;SACJ;KACJ;CACJ,CAAC"}

package/dist/out-tsc/card/SpsCard.js

@@ -0,0 +1,90 @@
+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;
+};
+/* eslint-disable */
+import { SpsIcon } from '@spscommerce/ds-shared';
+import clsx from 'clsx';
+import * as React from 'react';
+import * as PropTypes from '../prop-types';
+import { contentOf } from '../utils/contentOf';
+import { SpsCardHeader } from './SpsCardHeader';
+import { SpsCardTabbedPane } from './SpsCardTabbedPane';
+import { useTab } from './useTab';
+var propsDoc = {
+    activeTab: 'string',
+    footer: 'ReactNodeOrRenderFn',
+    headerContent: 'ReactNodeOrRenderFn',
+    headerIcon: 'SpsIcon',
+    headerTitle: 'string',
+};
+var propTypes = __assign(__assign({}, PropTypes.spsGlobalPropTypes), { activeTab: PropTypes.string, footer: PropTypes.nodeOrRenderFn, headerContent: PropTypes.nodeOrRenderFn, headerIcon: PropTypes.enumValue(SpsIcon), headerTitle: PropTypes.string });
+export function SpsCard(props) {
+    React.useEffect(function () {
+        console.log([
+            "App developers: There's a new card component! Update for improved performance,",
+            "fewer bugs, and increased flexibility. Reach out to the design system help Slack",
+            "channel if you have any questions!",
+        ].join(" "));
+    }, []);
+    var activeTab = props.activeTab, children = props.children, className = props.className, footer = props.footer, headerContent = props.headerContent, headerIcon = props.headerIcon, headerTitle = props.headerTitle, testId = props["data-testid"], unsafelyReplaceClassName = props.unsafelyReplaceClassName, rest = __rest(props, ["activeTab", "children", "className", "footer", "headerContent", "headerIcon", "headerTitle", 'data-testid', "unsafelyReplaceClassName"]);
+    // This used to be a prop but now we derive it
+    var isTabbedCard = React.Children.toArray(children).some(function (child) { return React.isValidElement(child) && child.type === SpsCardTabbedPane; });
+    var _a = __read(useTab(children, activeTab, isTabbedCard), 2), currentlyActiveTab = _a[0], setCurrentlyActiveTab = _a[1];
+    var classes = clsx(unsafelyReplaceClassName || 'sps-card', className);
+    return (React.createElement("div", __assign({}, rest, { className: classes, "data-testid": testId + "__card" }),
+        (headerTitle || headerContent) && (React.createElement(SpsCardHeader, { title: headerTitle, content: contentOf(headerContent), icon: headerIcon, "data-testid": testId + "__header" })),
+        isTabbedCard === true ? (React.createElement(React.Fragment, null,
+            React.createElement("nav", { className: "sps-nav sps-nav--tabs", role: "tablist", "data-testid": testId + "__tabs" }, React.Children.map(children, function (child, index) {
+                if (React.isValidElement(child)) {
+                    return React.cloneElement(child, {
+                        active: index === currentlyActiveTab.index,
+                        index: index,
+                        activateTab: setCurrentlyActiveTab,
+                        'data-testid': testId + "__tab",
+                    });
+                }
+            })),
+            React.createElement("div", { className: "sps-card__body", "data-testid": testId + "__body--tab-active" }, currentlyActiveTab.content))) : (React.createElement("div", { className: "sps-card__body", "data-testid": testId + "__body" }, children)),
+        footer && (React.createElement("div", { className: "sps-card__footer", "data-testid": testId + "__footer" }, contentOf(footer)))));
+}
+Object.assign(SpsCard, {
+    props: propsDoc,
+    propTypes: propTypes,
+    displayName: 'SpsCard',
+});
+//# sourceMappingURL=SpsCard.js.map

package/dist/out-tsc/card/SpsCard.js.map

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

package/dist/out-tsc/card/SpsCardHeader.d.ts

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

package/dist/out-tsc/card/SpsCardHeader.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 { SpsIcon } from "@spscommerce/ds-shared";
+import clsx from "clsx";
+import * as React from "react";
+import * as PropTypes from "../prop-types";
+var propsDoc = {
+    content: "ReactNodeLike",
+    icon: "SpsIcon",
+    title: "string",
+};
+var propTypes = __assign(__assign({}, PropTypes.spsGlobalPropTypes), { content: PropTypes.node, icon: PropTypes.enumValue(SpsIcon), title: PropTypes.string });
+export function SpsCardHeader(props) {
+    var content = props.content, className = props.className, icon = props.icon, title = props.title, testId = props["data-testid"], unsafelyReplaceClassName = props.unsafelyReplaceClassName, rest = __rest(props, ["content", "className", "icon", "title", "data-testid", "unsafelyReplaceClassName"]);
+    var classes = clsx(unsafelyReplaceClassName || "sps-card__header", className);
+    return (React.createElement("div", __assign({ className: classes, title: title }, rest),
+        React.createElement("div", { className: "sps-card__title" },
+            " ",
+            icon && React.createElement("i", { "aria-hidden": "true", className: "sps-icon sps-icon-" + icon }),
+            " ",
+            title),
+        React.createElement("div", { className: "sps-card__header-content" }, content)));
+}
+Object.assign(SpsCardHeader, {
+    props: propsDoc,
+    propTypes: propTypes,
+    displayName: "SpsCardHeader",
+});
+//# sourceMappingURL=SpsCardHeader.js.map

package/dist/out-tsc/card/SpsCardHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpsCardHeader.js","sourceRoot":"","sources":["../../../src/card/SpsCardHeader.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,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,OAAO,EAAE,eAAe;IACxB,IAAI,EAAE,SAAS;IACf,KAAK,EAAE,QAAQ;CAChB,CAAC;AAEF,IAAM,SAAS,yBACV,SAAS,CAAC,kBAAkB,KAC/B,OAAO,EAAE,SAAS,CAAC,IAAI,EACvB,IAAI,EAAE,SAAS,CAAC,SAAS,CAAU,OAAO,CAAC,EAC3C,KAAK,EAAE,SAAS,CAAC,MAAM,GACxB,CAAC;AAIF,MAAM,UAAU,aAAa,CAAC,KAAyB;IAEnD,IAAA,OAAO,GAOL,KAAK,QAPA,EACP,SAAS,GAMP,KAAK,UANE,EACT,IAAI,GAKF,KAAK,KALH,EACJ,KAAK,GAIH,KAAK,MAJF,EACU,MAAM,GAGnB,KAAK,eAHc,EACrB,wBAAwB,GAEtB,KAAK,yBAFiB,EACrB,IAAI,UACL,KAAK,EARH,oFAQL,CADQ,CACC;IAEV,IAAM,OAAO,GAAG,IAAI,CAClB,wBAAwB,IAAI,kBAAkB,EAC9C,SAAS,CACV,CAAC;IAEF,OAAO,CACL,sCAAK,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,IAAM,IAAI;QAC7C,6BAAK,SAAS,EAAC,iBAAiB;YAC7B,GAAG;YACH,IAAI,IAAI,0CAAe,MAAM,EAAC,SAAS,EAAE,uBAAqB,IAAM,GAAI;YACxE,GAAG;YACH,KAAK,CACF;QACN,6BAAK,SAAS,EAAC,0BAA0B,IAAE,OAAO,CAAO,CACrD,CACP,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,CAAC,aAAa,EAAE;IAC3B,KAAK,EAAE,QAAQ;IACf,SAAS,WAAA;IACT,WAAW,EAAE,eAAe;CAC7B,CAAC,CAAC"}

package/dist/out-tsc/card/SpsCardTabbedPane.d.ts

@@ -0,0 +1,19 @@
+import { SpsIcon, TagKind } from "@spscommerce/ds-shared";
+import * as PropTypes from "../prop-types";
+declare const propTypes: {
+    activateTab: PropTypes.Requireable<(...args: any[]) => any>;
+    active: PropTypes.Requireable<boolean>;
+    icon: PropTypes.Requireable<SpsIcon>;
+    label: PropTypes.Requireable<string>;
+    index: PropTypes.Requireable<number>;
+    tag: PropTypes.Requireable<string>;
+    tagKind: PropTypes.Requireable<TagKind>;
+    tagIcon: PropTypes.Requireable<SpsIcon>;
+    children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    className: PropTypes.Requireable<string>;
+    "data-testid": PropTypes.Requireable<string>;
+    unsafelyReplaceClassName: PropTypes.Requireable<string>;
+};
+export declare type SpsCardTabbedPaneProps = PropTypes.InferTS<typeof propTypes, HTMLAnchorElement>;
+export declare function SpsCardTabbedPane(props: SpsCardTabbedPaneProps): JSX.Element;
+export {};

package/dist/out-tsc/card/SpsCardTabbedPane.js

@@ -0,0 +1,63 @@
+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 { SpsIcon, TagKind } from "@spscommerce/ds-shared";
+import clsx from "clsx";
+import * as React from "react";
+import * as PropTypes from "../prop-types";
+import { SpsTag } from "../tag/SpsTag";
+var propsDoc = {
+    activateTab: "Function",
+    active: "boolean",
+    icon: "SpsIcon",
+    label: "string",
+    index: "number",
+    tag: "string",
+    tagKind: "TagKind",
+    tagIcon: "SpsIcon",
+};
+var propTypes = __assign(__assign({}, PropTypes.spsGlobalPropTypes), { activateTab: PropTypes.func, active: PropTypes.bool, icon: PropTypes.enumValue(SpsIcon), label: PropTypes.string, index: PropTypes.number, tag: PropTypes.string, tagKind: PropTypes.enumValue(TagKind), tagIcon: PropTypes.enumValue(SpsIcon) });
+export function SpsCardTabbedPane(props) {
+    var _this = this;
+    var activateTab = props.activateTab, active = props.active, children = props.children, className = props.className, label = props.label, icon = props.icon, id = props.id, index = props.index, tag = props.tag, tagKind = props.tagKind, tagIcon = props.tagIcon, testId = props["data-testid"], unsafelyReplaceClassName = props.unsafelyReplaceClassName, rest = __rest(props, ["activateTab", "active", "children", "className", "label", "icon", "id", "index", "tag", "tagKind", "tagIcon", "data-testid", "unsafelyReplaceClassName"]);
+    var onAnchorClick = function () {
+        activateTab(_this, index, children);
+    };
+    var handleKeyDown = function (event) {
+        if (event.key === "Enter" || event.key === " " || event.key === "Spacebar") {
+            event.preventDefault();
+            event.stopPropagation();
+            activateTab(_this, index, children);
+        }
+    };
+    var classes = clsx(unsafelyReplaceClassName || "sps-nav__item", "sps-nav__link", active && "active", className);
+    return (React.createElement("a", __assign({ className: classes, onClick: onAnchorClick, "data-toggle": "tab", id: id, role: "tab", "aria-controls": id }, rest, { tabIndex: 0, onKeyDown: handleKeyDown }),
+        icon && React.createElement("i", { className: "sps-icon sps-icon-" + icon }),
+        React.createElement("span", null, label),
+        tag && React.createElement(SpsTag, { kind: tagKind || TagKind.KEY, icon: tagIcon }, tag)));
+}
+Object.assign(SpsCardTabbedPane, {
+    props: propsDoc,
+    propTypes: propTypes,
+    displayName: "SpsCardTabbedPane",
+});
+//# sourceMappingURL=SpsCardTabbedPane.js.map

package/dist/out-tsc/card/SpsCardTabbedPane.js.map

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

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

@@ -0,0 +1,3 @@
+export * from "./SpsCard";
+export * from "./SpsCardTabbedPane";
+export * from "./SpsCard.examples";

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/card/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC"}

package/dist/out-tsc/card/useTab.d.ts

@@ -0,0 +1,18 @@
+export interface ActiveCardState {
+    index: any;
+    content: any;
+}
+export interface TabProps {
+    index: any;
+    active: any;
+    activateTab: any;
+    "data-testid"?: string;
+}
+export declare type TabHook = [ActiveCardState, any];
+/**
+ * A react hook for tabs
+ * @param children
+ * @param activeTab
+ * @param isTabbedCard
+ */
+export declare function useTab(children: any, activeTab: any, isTabbedCard: any): TabHook;

package/dist/out-tsc/card/useTab.js

@@ -0,0 +1,110 @@
+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;
+};
+var __values = (this && this.__values) || function(o) {
+    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+    if (m) return m.call(o);
+    if (o && typeof o.length === "number") return {
+        next: function () {
+            if (o && i >= o.length) o = void 0;
+            return { value: o && o[i++], done: !o };
+        }
+    };
+    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+};
+import * as React from "react";
+/**
+ * A react hook for tabs
+ * @param children
+ * @param activeTab
+ * @param isTabbedCard
+ */
+export function useTab(children, activeTab, isTabbedCard) {
+    // STATE: Currently active tab state
+    var _a = __read(React.useState({
+        index: 0,
+        content: null,
+    }), 2), currentlyActiveTab = _a[0], setCurrentlyActiveTab = _a[1];
+    // CALLBACK: Memoized callback that sets the active tab
+    var activateTab = React.useCallback(function (event, index, content) {
+        setCurrentlyActiveTab({ index: index, content: content });
+    }, []);
+    // EFFECT: Set up the initial tab state
+    React.useEffect(function () {
+        /**
+         * Set the initially displayed tab content
+         * @param childrenArr an array of children representing tabs
+         */
+        function setInitialTabContent(initialChildrenArray) {
+            var e_1, _a;
+            try {
+                for (var initialChildrenArray_1 = __values(initialChildrenArray), initialChildrenArray_1_1 = initialChildrenArray_1.next(); !initialChildrenArray_1_1.done; initialChildrenArray_1_1 = initialChildrenArray_1.next()) {
+                    var child = initialChildrenArray_1_1.value;
+                    var firstTab = child.props;
+                    setCurrentlyActiveTab(__assign(__assign({}, currentlyActiveTab), { content: firstTab.children }));
+                    break;
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (initialChildrenArray_1_1 && !initialChildrenArray_1_1.done && (_a = initialChildrenArray_1.return)) _a.call(initialChildrenArray_1);
+                }
+                finally { if (e_1) throw e_1.error; }
+            }
+        }
+        /**
+         * Set the currently active tab by id
+         * @param childrenArr an array of children representing tabs
+         * @param activeTabId the id to set as active
+         */
+        function setActiveTabById(availableChildrenArray, activeTabId) {
+            for (var index = 0; index <= availableChildrenArray.length; index += 1) {
+                var child = availableChildrenArray[index];
+                if (child
+                    && child.props
+                    && ((child.props.id && child.props.id === activeTabId)
+                        || (child.props.label && child.props.label === activeTabId))) {
+                    setCurrentlyActiveTab({
+                        content: child.props.children,
+                        index: index,
+                    });
+                    break;
+                }
+            }
+        }
+        var childrenAsArray = React.Children.toArray(children);
+        if (isTabbedCard && activeTab) {
+            setActiveTabById(childrenAsArray, activeTab);
+        }
+        else if (isTabbedCard) {
+            setInitialTabContent(childrenAsArray);
+        }
+    }, [activeTab, children]);
+    return [currentlyActiveTab, activateTab];
+}
+//# sourceMappingURL=useTab.js.map

package/dist/out-tsc/card/useTab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTab.js","sourceRoot":"","sources":["../../../src/card/useTab.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAe/B;;;;;GAKG;AACH,MAAM,UAAU,MAAM,CAAC,QAAQ,EAAE,SAAS,EAAE,YAAY;IACtD,oCAAoC;IAC9B,IAAA,KAAA,OAA8C,KAAK,CAAC,QAAQ,CAAkB;QAClF,KAAK,EAAE,CAAC;QACR,OAAO,EAAE,IAAI;KACd,CAAC,IAAA,EAHK,kBAAkB,QAAA,EAAE,qBAAqB,QAG9C,CAAC;IAEH,uDAAuD;IACvD,IAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CAAC,UAAC,KAAK,EAAE,KAAK,EAAE,OAAO;QAC1D,qBAAqB,CAAC,EAAE,KAAK,OAAA,EAAE,OAAO,SAAA,EAAE,CAAC,CAAC;IAC5C,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,uCAAuC;IACvC,KAAK,CAAC,SAAS,CACb;QACE;;;WAGG;QACH,SAAS,oBAAoB,CAAC,oBAAoB;;;gBAChD,KAAoB,IAAA,yBAAA,SAAA,oBAAoB,CAAA,0DAAA,4FAAE;oBAArC,IAAM,KAAK,iCAAA;oBACd,IAAM,QAAQ,GAAG,KAAK,CAAC,KAAK,CAAC;oBAC7B,qBAAqB,uBAChB,kBAAkB,KACrB,OAAO,EAAE,QAAQ,CAAC,QAAQ,IAC1B,CAAC;oBACH,MAAM;iBACP;;;;;;;;;QACH,CAAC;QAED;;;;WAIG;QACH,SAAS,gBAAgB,CAAC,sBAAsB,EAAE,WAAW;YAC3D,KAAK,IAAI,KAAK,GAAG,CAAC,EAAE,KAAK,IAAI,sBAAsB,CAAC,MAAM,EAAE,KAAK,IAAI,CAAC,EAAE;gBACtE,IAAM,KAAK,GAAG,sBAAsB,CAAC,KAAK,CAAC,CAAC;gBAC5C,IACE,KAAK;uBACU,KAAK,CAAC,KAAK;uBACX,CACD,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,IAAI,KAAK,CAAC,KAAK,CAAC,EAAE,KAAK,WAAW,CAAC;2BAC7C,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,KAAK,KAAK,WAAW,CAAC,CAC9D,EACb;oBACA,qBAAqB,CAAC;wBACpB,OAAO,EAAE,KAAK,CAAC,KAAK,CAAC,QAAQ;wBAC7B,KAAK,OAAA;qBACN,CAAC,CAAC;oBACH,MAAM;iBACP;aACF;QACH,CAAC;QAED,IAAM,eAAe,GAAG,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;QACzD,IAAI,YAAY,IAAI,SAAS,EAAE;YAC7B,gBAAgB,CAAC,eAAe,EAAE,SAAS,CAAC,CAAC;SAC9C;aAAM,IAAI,YAAY,EAAE;YACvB,oBAAoB,CAAC,eAAe,CAAC,CAAC;SACvC;IACH,CAAC,EACD,CAAC,SAAS,EAAE,QAAQ,CAAC,CACtB,CAAC;IAEF,OAAO,CAAC,kBAAkB,EAAE,WAAW,CAAC,CAAC;AAC3C,CAAC"}

package/dist/out-tsc/checkbox/SpsCheckbox.d.ts

@@ -0,0 +1,21 @@
+import * as React from "react";
+import * as PropTypes from "../prop-types";
+import type { SpsFormControl } from "../form/hooks/formControl";
+import type { SpsFormFieldMeta } from "../form/hooks/useSpsForm";
+declare const propTypes: {
+    checked: PropTypes.Requireable<boolean>;
+    disabled: PropTypes.Requireable<boolean>;
+    formControl: PropTypes.Requireable<SpsFormControl<boolean>>;
+    formMeta: PropTypes.Requireable<SpsFormFieldMeta<boolean>>;
+    indeterminate: PropTypes.Requireable<boolean>;
+    inline: PropTypes.Requireable<boolean>;
+    label: PropTypes.Requireable<string>;
+    onChange: PropTypes.Requireable<React.ChangeEventHandler<Element>>;
+    children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    className: PropTypes.Requireable<string>;
+    "data-testid": PropTypes.Requireable<string>;
+    unsafelyReplaceClassName: PropTypes.Requireable<string>;
+};
+export declare type SpsCheckboxProps = PropTypes.InferTS<typeof propTypes, HTMLInputElement>;
+export declare function SpsCheckbox({ checked: checkedProp, className, disabled, formControl, formMeta, id, indeterminate: indeterminateProp, inline, label, onChange, "data-testid": testId, unsafelyReplaceClassName, ...rest }: SpsCheckboxProps): JSX.Element;
+export {};

package/dist/out-tsc/checkbox/SpsCheckbox.examples.d.ts

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