@knapsack/sandbox-components 4.53.1--canary.3986.c6043f8.0

package/dist/react/accordion.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+type Panel = {
+    title: string;
+    content: React.ReactNode;
+    id: string;
+};
+type AccordionProps = {
+    panels?: Panel[];
+};
+/**
+ * @todo extract tailwind classes out to a css file
+ */
+export declare const Accordion: React.FC<AccordionProps>;
+export {};
+//# sourceMappingURL=accordion.d.ts.map

package/dist/react/accordion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../src/react/accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,KAAK,KAAK,GAAG;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,EAAE,EAAE,MAAM,CAAC;CACZ,CAAC;AAEF,KAAK,cAAc,GAAG;IACpB,MAAM,CAAC,EAAE,KAAK,EAAE,CAAC;CAClB,CAAC;AAsFF;;GAEG;AACH,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAgC9C,CAAC"}

package/dist/react/accordion.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+const defaultPanels = [
+    {
+        title: 'Panel 1',
+        content: (_jsxs("div", { children: [_jsx("h3", { className: "font-bold", children: "I am a panel" }), _jsx("p", { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nunc at pellentesque elementum, risus nisl cursus lacus, nec sagittis sem nunc a nunc. Sed id semper nunc. Sed auctor, nunc in cursus tincidunt, sem urna porttitor magna, ac faucibus est orci et nisl. Donec in nunc in turpis consectetur convallis at a nisl. Nullam non neque orci. Donec luctus, nunc at varius pharetra, risus mi aliquet ante, non venenatis mi est id enim." }), _jsx("p", { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nunc at pellentesque elementum, risus nisl cursus lacus, nec sagittis sem nunc a nunc. Sed id semper nunc. Sed auctor, nunc in cursus tincidunt, sem urna porttitor magna, ac faucibus est orci et nisl. Donec in nunc in turpis consectetur convallis at a nisl. Nullam non neque orci. Donec luctus, nunc at varius pharetra, risus mi aliquet ante, non venenatis mi est id enim." })] })),
+        id: 'panel-1',
+    },
+    {
+        title: 'Panel 2',
+        content: (_jsxs("div", { children: [_jsx("h3", { className: "font-bold", children: "I am a another panel" }), _jsx("p", { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nunc at pellentesque elementum, risus nisl cursus lacus, nec sagittis sem nunc a nunc. Sed id semper nunc. Sed auctor, nunc in cursus tincidunt, sem urna porttitor magna, ac faucibus est orci et nisl. Donec in nunc in turpis consectetur convallis at a nisl. Nullam non neque orci. Donec luctus, nunc at varius pharetra, risus mi aliquet ante, non venenatis mi est id enim." })] })),
+        id: 'panel-2',
+    },
+    {
+        title: 'Panel 3',
+        content: (_jsxs("div", { children: [_jsx("h3", { className: "font-bold", children: "Yup, you guessed it, another panel" }), _jsx("p", { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nunc at pellentesque elementum, risus nisl cursus lacus, nec sagittis sem nunc a nunc. Sed id semper nunc. Sed auctor, nunc in cursus tincidunt, sem urna porttitor magna, ac faucibus est orci et nisl. Donec in nunc in turpis consectetur convallis at a nisl. Nullam non neque orci. Donec luctus, nunc at varius pharetra, risus mi aliquet ante, non venenatis mi est id enim." }), _jsx("p", { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nunc at pellentesque elementum, risus nisl cursus lacus, nec sagittis sem nunc a nunc. Sed id semper nunc. Sed auctor, nunc in cursus tincidunt, sem urna porttitor magna, ac faucibus est orci et nisl. Donec in nunc in turpis consectetur convallis at a nisl. Nullam non neque orci. Donec luctus, nunc at varius pharetra, risus mi aliquet ante, non venenatis mi est id enim." }), _jsx("p", { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nunc at pellentesque elementum, risus nisl cursus lacus, nec sagittis sem nunc a nunc. Sed id semper nunc. Sed auctor, nunc in cursus tincidunt, sem urna porttitor magna, ac faucibus est orci et nisl. Donec in nunc in turpis consectetur convallis at a nisl. Nullam non neque orci. Donec luctus, nunc at varius pharetra, risus mi aliquet ante, non venenatis mi est id enim." })] })),
+        id: 'panel-3',
+    },
+];
+/**
+ * @todo extract tailwind classes out to a css file
+ */
+export const Accordion = ({ panels }) => {
+    const [openPanel, setOpenPanel] = useState(null);
+    const renderedPanels = panels || defaultPanels;
+    return (_jsx("div", { className: "w-screen p-2 bg-white rounded border border-slate-900 border-solid", children: renderedPanels.map((panel, index) => (_jsxs("div", { children: [_jsxs("div", { className: "flex justify-between items-center", children: [_jsx("h2", { className: "text-lg font-bold", children: panel.title }), _jsx("button", { type: "button", onClick: () => setOpenPanel(index === openPanel ? null : index), className: "p-1 rounded hover:bg-gray-200 focus:outline-none focus:ring", "aria-expanded": openPanel === index, children: openPanel === index ? 'Collapse' : 'Expand' })] }), openPanel === index && (_jsx("div", { className: `overflow-hidden transition-all ease-in-out duration-300 mt-2 bg-slate-100 ${openPanel === index ? 'h-auto' : 'h-0'}`, children: panel.content }))] }, panel.id))) }));
+};
+//# sourceMappingURL=accordion.js.map

package/dist/react/accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.js","sourceRoot":"","sources":["../../src/react/accordion.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAYxC,MAAM,aAAa,GAAY;IAC7B;QACE,KAAK,EAAE,SAAS;QAChB,OAAO,EAAE,CACP,0BACE,aAAI,SAAS,EAAC,WAAW,6BAAkB,EAC3C,qdAQI,EACJ,qdAQI,IACA,CACP;QACD,EAAE,EAAE,SAAS;KACd;IACD;QACE,KAAK,EAAE,SAAS;QAChB,OAAO,EAAE,CACP,0BACE,aAAI,SAAS,EAAC,WAAW,qCAA0B,EACnD,qdAQI,IACA,CACP;QACD,EAAE,EAAE,SAAS;KACd;IACD;QACE,KAAK,EAAE,SAAS;QAChB,OAAO,EAAE,CACP,0BACE,aAAI,SAAS,EAAC,WAAW,mDAAwC,EACjE,qdAQI,EACJ,qdAQI,EACJ,qdAQI,IACA,CACP;QACD,EAAE,EAAE,SAAS;KACd;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,SAAS,GAA6B,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE;IAChE,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAgB,IAAI,CAAC,CAAC;IAEhE,MAAM,cAAc,GAAG,MAAM,IAAI,aAAa,CAAC;IAC/C,OAAO,CACL,cAAK,SAAS,EAAC,oEAAoE,YAChF,cAAc,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CACpC,0BACE,eAAK,SAAS,EAAC,mCAAmC,aAChD,aAAI,SAAS,EAAC,mBAAmB,YAAE,KAAK,CAAC,KAAK,GAAM,EACpD,iBACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,EAC/D,SAAS,EAAC,6DAA6D,mBACxD,SAAS,KAAK,KAAK,YAEjC,SAAS,KAAK,KAAK,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,QAAQ,GACrC,IACL,EACL,SAAS,KAAK,KAAK,IAAI,CACtB,cACE,SAAS,EAAE,6EACT,SAAS,KAAK,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KACnC,EAAE,YAED,KAAK,CAAC,OAAO,GACV,CACP,KApBO,KAAK,CAAC,EAAE,CAqBZ,CACP,CAAC,GACE,CACP,CAAC;AACJ,CAAC,CAAC"}

package/dist/react/badge.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export type BadgeProps = {
+    type?: 'primary' | 'secondary' | 'tertiary';
+    children?: React.ReactNode | 'string';
+};
+export declare const Badge: React.FC<BadgeProps>;
+//# sourceMappingURL=badge.d.ts.map

package/dist/react/badge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../src/react/badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,MAAM,UAAU,GAAG;IACvB,IAAI,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC;IAC5C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,QAAQ,CAAC;CACvC,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CActC,CAAC"}

package/dist/react/badge.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from 'clsx';
+export const Badge = ({ children = 'ima badge', type = 'primary', }) => {
+    return (_jsx("span", { className: clsx({
+            badge: true,
+            [`badge--type-${type}`]: true,
+        }), children: children }));
+};
+//# sourceMappingURL=badge.js.map

package/dist/react/badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.js","sourceRoot":"","sources":["../../src/react/badge.tsx"],"names":[],"mappings":";AACA,OAAO,IAAI,MAAM,MAAM,CAAC;AAOxB,MAAM,CAAC,MAAM,KAAK,GAAyB,CAAC,EAC1C,QAAQ,GAAG,WAAW,EACtB,IAAI,GAAG,SAAS,GACjB,EAAE,EAAE;IACH,OAAO,CACL,eACE,SAAS,EAAE,IAAI,CAAC;YACd,KAAK,EAAE,IAAI;YACX,CAAC,eAAe,IAAI,EAAE,CAAC,EAAE,IAAI;SAC9B,CAAC,YAED,QAAQ,GACJ,CACR,CAAC;AACJ,CAAC,CAAC"}

package/dist/react/button.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+interface ButtonProps {
+    /**
+     * The button label
+     */
+    label?: string;
+    rounded?: boolean;
+    /**
+     * What color do you want it to be?
+     */
+    type?: 'primary' | 'secondary' | 'tertiary';
+    size?: 'small' | 'medium' | 'large';
+}
+export declare const Button: React.FC<ButtonProps>;
+export {};
+//# sourceMappingURL=button.d.ts.map

package/dist/react/button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/react/button.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,UAAU,WAAW;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC;IAC5C,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;CACrC;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAmBxC,CAAC"}

package/dist/react/button.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { clsx } from 'clsx';
+export const Button = ({ label = 'Button', rounded = false, type = 'primary', size = 'medium', }) => {
+    return (_jsx("button", { type: "button", className: clsx({
+            button: true,
+            'button--rounded': rounded,
+            [`button--size-${size}`]: true,
+            [`button--type-${type}`]: true,
+        }), children: label }));
+};
+//# sourceMappingURL=button.js.map

package/dist/react/button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../../src/react/button.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,MAAM,CAAC;AAgB5B,MAAM,CAAC,MAAM,MAAM,GAA0B,CAAC,EAC5C,KAAK,GAAG,QAAQ,EAChB,OAAO,GAAG,KAAK,EACf,IAAI,GAAG,SAAS,EAChB,IAAI,GAAG,QAAQ,GAChB,EAAE,EAAE;IACH,OAAO,CACL,iBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,IAAI,CAAC;YACd,MAAM,EAAE,IAAI;YACZ,iBAAiB,EAAE,OAAO;YAC1B,CAAC,gBAAgB,IAAI,EAAE,CAAC,EAAE,IAAI;YAC9B,CAAC,gBAAgB,IAAI,EAAE,CAAC,EAAE,IAAI;SAC/B,CAAC,YAED,KAAK,GACC,CACV,CAAC;AACJ,CAAC,CAAC"}

package/dist/react/card-base.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export declare const CardBase: React.VFC<{
+    title?: string;
+    imageSrc?: string;
+    footer?: React.ReactNode;
+}>;
+//# sourceMappingURL=card-base.d.ts.map

package/dist/react/card-base.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-base.d.ts","sourceRoot":"","sources":["../../src/react/card-base.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,GAAG,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B,CAiBA,CAAC"}

package/dist/react/card-base.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+export const CardBase = ({ footer, imageSrc, title }) => {
+    return (_jsxs("aside", { className: clsx({
+            card: true,
+        }), children: [title && _jsx("header", { children: title }), imageSrc && _jsx("img", { src: imageSrc, alt: "Placeholder" }), footer && (_jsxs("details", { children: [_jsx("summary", { children: "Footer" }), footer] }))] }));
+};
+//# sourceMappingURL=card-base.js.map

package/dist/react/card-base.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-base.js","sourceRoot":"","sources":["../../src/react/card-base.tsx"],"names":[],"mappings":";AACA,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,MAAM,CAAC,MAAM,QAAQ,GAIhB,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,EAAE;IACnC,OAAO,CACL,iBACE,SAAS,EAAE,IAAI,CAAC;YACd,IAAI,EAAE,IAAI;SACX,CAAC,aAED,KAAK,IAAI,2BAAS,KAAK,GAAU,EACjC,QAAQ,IAAI,cAAK,GAAG,EAAE,QAAQ,EAAE,GAAG,EAAC,aAAa,GAAG,EACpD,MAAM,IAAI,CACT,8BACE,uCAAyB,EACxB,MAAM,IACC,CACX,IACK,CACT,CAAC;AACJ,CAAC,CAAC"}

package/dist/react/card-template-demo.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const CardDemo1: () => JSX.Element;
+//# sourceMappingURL=card-template-demo.d.ts.map

package/dist/react/card-template-demo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-template-demo.d.ts","sourceRoot":"","sources":["../../src/react/card-template-demo.tsx"],"names":[],"mappings":";AAGA,eAAO,MAAM,SAAS,mBAUrB,CAAC"}

package/dist/react/card-template-demo.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card } from './card.js';
+import { Badge } from './badge.js';
+export const CardDemo1 = () => (_jsx(Card, { image: "wide", title: "Hello Card World!", footer: _jsxs("div", { children: [_jsx(Badge, { type: "primary", children: "4" }), " new messages"] }) }));
+//# sourceMappingURL=card-template-demo.js.map

package/dist/react/card-template-demo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-template-demo.js","sourceRoot":"","sources":["../../src/react/card-template-demo.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AACjC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAEnC,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,CAC7B,KAAC,IAAI,IACH,KAAK,EAAC,MAAM,EACZ,KAAK,EAAC,mBAAmB,EACzB,MAAM,EACJ,0BACE,KAAC,KAAK,IAAC,IAAI,EAAC,SAAS,kBAAU,qBAC3B,GAER,CACH,CAAC"}

package/dist/react/card.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export declare const Card: React.VFC<{
+    title?: string;
+    image?: 'none' | 'wide' | 'tall';
+    footer?: React.ReactNode;
+}>;
+//# sourceMappingURL=card.d.ts.map

package/dist/react/card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../src/react/card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,GAAG,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;IACjC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B,CAYA,CAAC"}

package/dist/react/card.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CardBase } from './card-base.js';
+export const Card = ({ footer, image = 'none', title }) => {
+    const imgUrl = (() => {
+        switch (image) {
+            case 'wide':
+                return 'https://knapsack.imgix.net/site/ks-sandbox/wide-rb9p92zdz3.png';
+            case 'tall':
+                return 'https://knapsack.imgix.net/site/ks-sandbox/tall-lllfl2y1nz.png';
+            case 'none':
+                return '';
+        }
+    })();
+    return _jsx(CardBase, { title: title, footer: footer, imageSrc: imgUrl });
+};
+//# sourceMappingURL=card.js.map

package/dist/react/card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.js","sourceRoot":"","sources":["../../src/react/card.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE1C,MAAM,CAAC,MAAM,IAAI,GAIZ,CAAC,EAAE,MAAM,EAAE,KAAK,GAAG,MAAM,EAAE,KAAK,EAAE,EAAE,EAAE;IACzC,MAAM,MAAM,GAAW,CAAC,GAAG,EAAE;QAC3B,QAAQ,KAAK,EAAE,CAAC;YACd,KAAK,MAAM;gBACT,OAAO,gEAAgE,CAAC;YAC1E,KAAK,MAAM;gBACT,OAAO,gEAAgE,CAAC;YAC1E,KAAK,MAAM;gBACT,OAAO,EAAE,CAAC;QACd,CAAC;IACH,CAAC,CAAC,EAAE,CAAC;IACL,OAAO,KAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAI,CAAC;AACtE,CAAC,CAAC"}

package/dist/react/grid.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface GridItemProps {
+    children: React.ReactNode;
+    gap?: 'small' | 'medium' | 'large';
+}
+export declare const Grid: React.FC<GridItemProps>;
+export {};
+//# sourceMappingURL=grid.d.ts.map

package/dist/react/grid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../../src/react/grid.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,UAAU,aAAa;IACrB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,GAAG,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;CACpC;AAED,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAWxC,CAAC"}

package/dist/react/grid.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from 'clsx';
+export const Grid = ({ children, gap = 'medium' }) => {
+    return (_jsx("div", { className: clsx({
+            grid: true,
+            [`grid--gap-${gap}`]: gap,
+        }), children: children }));
+};
+//# sourceMappingURL=grid.js.map

package/dist/react/grid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid.js","sourceRoot":"","sources":["../../src/react/grid.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AAQxB,MAAM,CAAC,MAAM,IAAI,GAA4B,CAAC,EAAE,QAAQ,EAAE,GAAG,GAAG,QAAQ,EAAE,EAAE,EAAE;IAC5E,OAAO,CACL,cACE,SAAS,EAAE,IAAI,CAAC;YACd,IAAI,EAAE,IAAI;YACV,CAAC,aAAa,GAAG,EAAE,CAAC,EAAE,GAAG;SAC1B,CAAC,YAED,QAAQ,GACL,CACP,CAAC;AACJ,CAAC,CAAC"}

package/dist/react/hero.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+interface HeroProps {
+    title?: string;
+    ctaLabel?: string;
+    imageUrl?: string;
+}
+/**
+ * @todo finish extracting tailwind classes out to a css file
+ */
+export declare const Hero: React.FC<HeroProps>;
+export {};
+//# sourceMappingURL=hero.d.ts.map

package/dist/react/hero.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hero.d.ts","sourceRoot":"","sources":["../../src/react/hero.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,UAAU,SAAS;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;GAEG;AACH,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAoDpC,CAAC"}

package/dist/react/hero.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+/**
+ * @todo finish extracting tailwind classes out to a css file
+ */
+export const Hero = ({ title = 'The most comprehensive & feature-rich Doodad UI Kit ever created', ctaLabel = 'See More', imageUrl = 'https://mdbcdn.b-cdn.net/img/new/slides/146.webp', }) => {
+    return (_jsx("div", { className: clsx({
+            hero: true,
+        }), style: {
+            backgroundImage: `url(${imageUrl})`,
+        }, children: _jsx("div", { className: clsx({
+                'top-0 right-0 bottom-0 left-0 h-full w-full overflow-hidden bg-[hsla(0,0%,0%,0.75)] bg-fixed': true, // purgecss: absolute top-0 right-0 bottom-0 left-0 h-full w-full overflow-hidden bg-[hsla(0,0%,0%,0.75)] bg-fixed
+            }), children: _jsx("div", { className: clsx({
+                    'flex h-full items-center justify-center': true, // purgecss: flex h-full items-center justify-center
+                }), children: _jsxs("div", { className: clsx({
+                        'px-6 text-center text-white md:px-12': true, // purgecss: px-6 text-center text-white md:px-12
+                    }), children: [_jsx("h1", { className: clsx({
+                                'mt-2 mb-16 text-5xl font-bold tracking-tight md:text-6xl xl:text-7xl': true, // purgecss: mt-2 mb-16 text-5xl font-bold tracking-tight md:text-6xl xl:text-7xl
+                            }), children: title }), _jsx("button", { type: "button", className: clsx({
+                                'rounded border-2 border-neutral-50 px-[46px] pt-[14px] pb-[12px] text-sm font-medium uppercase leading-normal text-neutral-50 transition duration-150 ease-in-out hover:border-neutral-100 hover:bg-neutral-100 hover:bg-opacity-10 hover:text-neutral-100 focus:border-neutral-100 focus:text-neutral-100 focus:outline-none focus:ring-0 active:border-neutral-200 active:text-neutral-200': true, // purgecss: rounded border-2 border-neutral-50 px-[46px] pt-[14px] pb-[12px] text-sm font-medium uppercase leading-normal text-neutral-50 transition duration-150 ease-in-out hover:border-neutral-100 hover:bg-neutral-100 hover:bg-opacity-10 hover:text-neutral-100 focus:border-neutral-100 focus:text-neutral-100 focus:outline-none focus:ring-0 active:border-neutral-200 active:text-neutral-200
+                            }), children: ctaLabel })] }) }) }) }));
+};
+//# sourceMappingURL=hero.js.map

package/dist/react/hero.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hero.js","sourceRoot":"","sources":["../../src/react/hero.tsx"],"names":[],"mappings":";AACA,OAAO,IAAI,MAAM,MAAM,CAAC;AAQxB;;GAEG;AACH,MAAM,CAAC,MAAM,IAAI,GAAwB,CAAC,EACxC,KAAK,GAAG,kEAAkE,EAC1E,QAAQ,GAAG,UAAU,EACrB,QAAQ,GAAG,kDAAkD,GAC9D,EAAE,EAAE;IACH,OAAO,CACL,cACE,SAAS,EAAE,IAAI,CAAC;YACd,IAAI,EAAE,IAAI;SACX,CAAC,EACF,KAAK,EAAE;YACL,eAAe,EAAE,OAAO,QAAQ,GAAG;SACpC,YAED,cACE,SAAS,EAAE,IAAI,CAAC;gBACd,8FAA8F,EAC5F,IAAI,EAAE,kHAAkH;aAC3H,CAAC,YAEF,cACE,SAAS,EAAE,IAAI,CAAC;oBACd,yCAAyC,EAAE,IAAI,EAAE,oDAAoD;iBACtG,CAAC,YAEF,eACE,SAAS,EAAE,IAAI,CAAC;wBACd,sCAAsC,EAAE,IAAI,EAAE,iDAAiD;qBAChG,CAAC,aAEF,aACE,SAAS,EAAE,IAAI,CAAC;gCACd,sEAAsE,EACpE,IAAI,EAAE,iFAAiF;6BAC1F,CAAC,YAED,KAAK,GACH,EACL,iBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,IAAI,CAAC;gCACd,8XAA8X,EAC5X,IAAI,EAAE,yYAAyY;6BAClZ,CAAC,YAED,QAAQ,GACF,IACL,GACF,GACF,GACF,CACP,CAAC;AACJ,CAAC,CAAC"}

package/dist/react/index.d.ts

@@ -0,0 +1,12 @@
+export * from './accordion.js';
+export * from './badge.js';
+export * from './button.js';
+export * from './card-base.js';
+export * from './card-template-demo.js';
+export * from './card.js';
+export * from './grid.js';
+export * from './hero.js';
+export * from './json-schema-playground.js';
+export * from './slot-references.js';
+export * from './starter-template.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/react/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/react/index.tsx"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,yBAAyB,CAAC;AACxC,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,6BAA6B,CAAC;AAC5C,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC"}

package/dist/react/index.js

@@ -0,0 +1,12 @@
+export * from './accordion.js';
+export * from './badge.js';
+export * from './button.js';
+export * from './card-base.js';
+export * from './card-template-demo.js';
+export * from './card.js';
+export * from './grid.js';
+export * from './hero.js';
+export * from './json-schema-playground.js';
+export * from './slot-references.js';
+export * from './starter-template.js';
+//# sourceMappingURL=index.js.map

package/dist/react/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/react/index.tsx"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,yBAAyB,CAAC;AACxC,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,6BAA6B,CAAC;AAC5C,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC"}

package/dist/react/json-schema-playground.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const JsonSchemaPlayground: React.VFC<Record<string, unknown>>;
+//# sourceMappingURL=json-schema-playground.d.ts.map

package/dist/react/json-schema-playground.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"json-schema-playground.d.ts","sourceRoot":"","sources":["../../src/react/json-schema-playground.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,GAAG,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAQnE,CAAC"}

package/dist/react/json-schema-playground.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const JsonSchemaPlayground = (props) => (_jsxs("div", { children: [_jsx("h1", { children: "JsonSchemaPlayground" }), _jsx("p", { children: "Props Data:" }), _jsx("pre", { children: JSON.stringify(props, null, 2) })] }));
+//# sourceMappingURL=json-schema-playground.js.map

package/dist/react/json-schema-playground.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"json-schema-playground.js","sourceRoot":"","sources":["../../src/react/json-schema-playground.tsx"],"names":[],"mappings":";AAEA,MAAM,CAAC,MAAM,oBAAoB,GAAuC,CACtE,KAAK,EACL,EAAE,CAAC,CACH,0BACE,gDAA6B,EAC7B,sCAAkB,EAClB,wBAAM,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC,GAAO,IACvC,CACP,CAAC"}

package/dist/react/slot-references.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Badge } from './badge.js';
+export declare const SlotReference: React.VFC<{
+    badge?: typeof Badge;
+    footer?: React.ReactNode;
+    text: string;
+}>;
+//# sourceMappingURL=slot-references.d.ts.map

package/dist/react/slot-references.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slot-references.d.ts","sourceRoot":"","sources":["../../src/react/slot-references.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAEnC,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,GAAG,CAAC;IAEpC,KAAK,CAAC,EAAE,OAAO,KAAK,CAAC;IACrB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,IAAI,EAAE,MAAM,CAAC;CACd,CAsBA,CAAC"}

package/dist/react/slot-references.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+export const SlotReference = ({ badge: TheBadge, text = 'Some Text', footer }) => {
+    return (_jsxs("div", { className: clsx({
+            'p-2': true, // purgecss: p-2
+            'bg-slate-400': true, // purgecss: bg-slate-400
+        }), children: [_jsxs("h3", { children: ["The ", _jsx("code", { children: "badge" }), " prop (Slot as a template Reference) used 3 times with different props:"] }), TheBadge && _jsx(TheBadge, { type: "primary", children: text }), TheBadge && _jsx(TheBadge, { type: "secondary", children: text }), TheBadge && _jsx(TheBadge, { type: "tertiary", children: text }), _jsx("hr", {}), _jsxs("h3", { children: ["The ", _jsx("code", { children: "footer" }), " prop (Slot as a traditional Demo):"] }), footer] }));
+};
+//# sourceMappingURL=slot-references.js.map

package/dist/react/slot-references.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slot-references.js","sourceRoot":"","sources":["../../src/react/slot-references.tsx"],"names":[],"mappings":";AACA,OAAO,IAAI,MAAM,MAAM,CAAC;AAGxB,MAAM,CAAC,MAAM,aAAa,GAKrB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,GAAG,WAAW,EAAE,MAAM,EAAE,EAAE,EAAE;IACvD,OAAO,CACL,eACE,SAAS,EAAE,IAAI,CAAC;YACd,KAAK,EAAE,IAAI,EAAE,gBAAgB;YAC7B,cAAc,EAAE,IAAI,EAAE,yBAAyB;SAChD,CAAC,aAEF,iCACM,mCAAkB,+EAEnB,EACJ,QAAQ,IAAI,KAAC,QAAQ,IAAC,IAAI,EAAC,SAAS,YAAE,IAAI,GAAY,EACtD,QAAQ,IAAI,KAAC,QAAQ,IAAC,IAAI,EAAC,WAAW,YAAE,IAAI,GAAY,EACxD,QAAQ,IAAI,KAAC,QAAQ,IAAC,IAAI,EAAC,UAAU,YAAE,IAAI,GAAY,EACxD,cAAM,EACN,iCACM,oCAAmB,2CACpB,EACJ,MAAM,IACH,CACP,CAAC;AACJ,CAAC,CAAC"}

package/dist/react/starter-template.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const StarterTemplate: React.VFC<{
+    subTitle?: string;
+}>;
+//# sourceMappingURL=starter-template.d.ts.map

package/dist/react/starter-template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"starter-template.d.ts","sourceRoot":"","sources":["../../src/react/starter-template.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,GAAG,CAAC;IACtC,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAWA,CAAC"}

package/dist/react/starter-template.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+export const StarterTemplate = ({ subTitle }) => {
+    return (_jsxs("aside", { className: clsx({
+            border: true, // purgecss: border
+        }), children: [_jsx("h2", { children: "I am the Starter Template" }), subTitle && _jsx("h3", { children: subTitle })] }));
+};
+//# sourceMappingURL=starter-template.js.map

package/dist/react/starter-template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"starter-template.js","sourceRoot":"","sources":["../../src/react/starter-template.tsx"],"names":[],"mappings":";AACA,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,MAAM,CAAC,MAAM,eAAe,GAEvB,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;IACpB,OAAO,CACL,iBACE,SAAS,EAAE,IAAI,CAAC;YACd,MAAM,EAAE,IAAI,EAAE,mBAAmB;SAClC,CAAC,aAEF,qDAAkC,EACjC,QAAQ,IAAI,uBAAK,QAAQ,GAAM,IAC1B,CACT,CAAC;AACJ,CAAC,CAAC"}

package/dist/web-components/button.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=button.d.ts.map

package/dist/web-components/button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/web-components/button.ts"],"names":[],"mappings":""}

package/dist/web-components/button.js

@@ -0,0 +1,41 @@
+class MyButton extends HTMLElement {
+    constructor() {
+        super();
+        this.buttonText = this.querySelector('slot')
+            .assignedNodes()[0]
+            .textContent.trim();
+        this.button = document.createElement('button');
+        this.button.id = 'my-button';
+        this.button.setAttribute('part', 'my-button');
+        this.button.textContent = this.buttonText;
+        this.button.addEventListener('click', this.handleClick.bind(this));
+        // Apply the styles to the button
+        this.applyStyles(this.button);
+        // Append the button to the shadow DOM
+        this.attachShadow({ mode: 'open' }).appendChild(this.button);
+    }
+    handleClick() {
+        console.log('Button clicked!');
+    }
+    applyStyles(element) {
+        const style = document.createElement('style');
+        style.textContent = `
+      #my-button {
+        background-color: #4CAF50;
+        border: none;
+        color: white;
+        padding: 15px 32px;
+        text-align: center;
+        text-decoration: none;
+        display: inline-block;
+        font-size: 16px;
+        margin: 4px 2px;
+        cursor: pointer;
+      }
+    `;
+        element.shadowRoot.appendChild(style);
+    }
+}
+customElements.define('my-button', MyButton);
+export {};
+//# sourceMappingURL=button.js.map

package/dist/web-components/button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../../src/web-components/button.ts"],"names":[],"mappings":"AAAA,MAAM,QAAS,SAAQ,WAAW;IAGhC;QACE,KAAK,EAAE,CAAC;QAER,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC;aACzC,aAAa,EAAE,CAAC,CAAC,CAAC;aAClB,WAAW,CAAC,IAAI,EAAE,CAAC;QAEtB,IAAI,CAAC,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QAC/C,IAAI,CAAC,MAAM,CAAC,EAAE,GAAG,WAAW,CAAC;QAC7B,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;QAC9C,IAAI,CAAC,MAAM,CAAC,WAAW,GAAG,IAAI,CAAC,UAAU,CAAC;QAC1C,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QAEnE,iCAAiC;QACjC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAE9B,sCAAsC;QACtC,IAAI,CAAC,YAAY,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC,WAAW,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAC/D,CAAC;IAED,WAAW;QACT,OAAO,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACjC,CAAC;IAED,WAAW,CAAC,OAAoB;QAC9B,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QAC9C,KAAK,CAAC,WAAW,GAAG;;;;;;;;;;;;;KAanB,CAAC;QACF,OAAO,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IACxC,CAAC;CACF;AAED,cAAc,CAAC,MAAM,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC"}

package/dist/web-components/index.d.ts

@@ -0,0 +1,2 @@
+import './button.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/web-components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/web-components/index.ts"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAC"}

package/dist/web-components/index.js

@@ -0,0 +1,2 @@
+import './button.js';
+//# sourceMappingURL=index.js.map

package/dist/web-components/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/web-components/index.ts"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAC"}

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@knapsack/sandbox-components",
+  "description": "",
+  "version": "4.53.1--canary.3986.c6043f8.0",
+  "type": "module",
+  "exports": {
+    "./css": "./dist/css/ks-sandbox-styles.css",
+    "./hbs/*": "./src/hbs/*",
+    "./html/*": "./src/html/*",
+    "./package": "./package.json",
+    "./package.json": "./package.json",
+    "./react": {
+      "types": "./dist/react/index.d.ts",
+      "default": "./dist/react/index.js"
+    },
+    "./twig/*": "./src/twig/*",
+    "./vue/*": "./src/vue/*",
+    "./web-components": {
+      "types": "./dist/web-components/index.d.ts",
+      "default": "./dist/web-components/index.js"
+    }
+  },
+  "sideEffects": false,
+  "scripts": {
+    "build": "run-p build:*",
+    "build:css": "postcss ./src/css/index.css --output ./dist/css/ks-sandbox-styles.css",
+    "build:ts": "tsc",
+    "clean": "rm -rf ./dist",
+    "lint": "eslint ./",
+    "start": "run-p watch:*",
+    "watch:css": "npm run build:css -- --watch",
+    "watch:ts": "npm run build:ts -- --watch --preserveWatchOutput"
+  },
+  "dependencies": {
+    "clsx": "^2.1.0",
+    "react": "^18.2.0",
+    "vue": "^3.2.47"
+  },
+  "devDependencies": {
+    "@knapsack/eslint-config-starter": "4.53.1--canary.3986.c6043f8.0",
+    "@knapsack/postcss-config-starter": "4.53.1--canary.3986.c6043f8.0",
+    "@knapsack/prettier-config": "4.53.1--canary.3986.c6043f8.0",
+    "@knapsack/sandbox-tokens": "4.53.1--canary.3986.c6043f8.0",
+    "@knapsack/typescript-config-starter": "4.53.1--canary.3986.c6043f8.0",
+    "@types/node": "^20.11.30",
+    "@types/react": "^18.0.27",
+    "eslint": "^8.57.0",
+    "npm-run-all2": "^5.0.2",
+    "postcss-cli": "^9.1.0",
+    "tailwindcss": "^3.1.7",
+    "typescript": "^5.4.3"
+  },
+  "license": "GPL-2.0-or-later",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "url": "https://github.com/knapsack-labs/app-monorepo",
+    "directory": "apps/ui/libs/sandbox-components",
+    "type": "git"
+  },
+  "gitHead": "c6043f82376003371b42ab2c1a35095facb998d9"
+}

package/postcss.config.cjs

@@ -0,0 +1,10 @@
+const { createPostCssConfig } = require('@knapsack/postcss-config-starter');
+const tailwind = require('tailwindcss');
+const twNesting = require('tailwindcss/nesting');
+const tailwindConfig = require('./tailwind.config.cjs');
+
+const config = createPostCssConfig({
+  plugins: [twNesting, tailwind(tailwindConfig)],
+});
+
+module.exports = config;

package/readme.md

@@ -0,0 +1 @@
+

package/tailwind.config.cjs

@@ -0,0 +1,52 @@
+// https://tailwindcss.com/docs/configuration
+module.exports = {
+  content: ['./src/**/*.{html,tsx,vue,twig}'],
+  // corePlugins: ['backgroundColor', 'text-color'],
+  // safelist: [
+  //   {
+  //     pattern: /bg-/,
+  //   },
+  // ],
+  theme: {
+    extend: {
+      colors: {
+        primary: {
+          100: '#bee3f8',
+          200: '#90cdf4',
+          300: '#63b3ed',
+          400: '#4299e1',
+          500: '#3182ce',
+          600: '#2b6cb0',
+          700: '#2c5282',
+          800: '#2a4365',
+          900: '#1A365D',
+        },
+
+        secondary: {
+          100: '#ccfbf1',
+          200: '#99f6e4',
+          300: '#5eead4',
+          400: '#2dd4bf',
+          500: '#14b8a6',
+          600: '#0d9488',
+          700: '#0f766e',
+          800: '#115e59',
+          900: '#134e4a',
+        },
+
+        tertiary: {
+          100: '#faf089',
+          200: '#f6e05e',
+          300: '#ecc94b',
+          400: '#d69e2e',
+          500: '#b7791f',
+          600: '#975a16',
+          700: '#744210',
+          800: '#5F370E',
+          900: '#4D2700',
+        },
+      },
+    },
+  },
+  plugins: [],
+};

package/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "@knapsack/typescript-config-starter/tsconfig.build.json",
+  "compilerOptions": {
+    "noImplicitAny": true,
+    "lib": ["es2020", "dom"],
+    "outDir": "./dist"
+  },
+  "include": ["./src"]
+}