@seeqdev/qomponents 0.0.14 → 0.0.16

package/README.md

@@ -30,6 +30,9 @@ yarn add @seeqdev/qomponents
 
 ## Getting started with Seeq qomponents
 
+Prefer a more complete example? <br/>Checkout the example folder provided.
+It includes a ready to run example application. Start with the readme in the example folder to get up and running!
+
 Here is an example of a basic app using the `Button` component:
 
 ```jsx
@@ -41,8 +44,79 @@ function App() {
 }
 ```
 
-To make sure all styles are properly applied be sure to inclue the qomponents css file in your main css file.
+To make sure all styles are properly applied be sure to include the qomponents css file in your main css file.
 
 ```css
 @import '@seeqdev/qomponents/dist/styles.css';
-```
+```
+
+<b>A note on CSS:</b> Seeq's qomponents come fully styled and ready to use. While it is tempting to use the
+available <i>extraClassNames</i> property to provide yet additional styling we strongly advise you to use this
+property to provide only width, margins and padding. This will ensure for a smooth upgrade experience when
+Seeq's look and feel changes.
+
+## Frequently asked questions
+
+<h3>1) I use webpack and I get a strange error once I added qomponents to my package.json!</h3>
+
+Webpack needs a little help :)  
+Add the following to the <code>rules</code> array in your <code>webpack.config</code>
+
+```
+  {
+   test: /@?(seeqdev).*\.(ts|js)x?$/, 
+   loader:'babel-loader'
+  }
+```
+
+<h3>2) How do I get my Button to be green?</h3>
+
+The colors of your qomponents are controlled by the "theme". </br>
+If you do not provide a theme your qomponents will use the default blue or also known as Topic-based theme.
+Themes are applied by adding the class of the desired theme to a wrapper of your application. The theme class can
+also be applied to the body tag.
+
+```html
+
+<div class="color_analysis">
+  ... your application here
+</div>
+
+```
+
+There are 3 themes available:
+
+| Theme    | Color  | Class          | Example                |
+|:---------|:-------|:---------------|:-----------------------|
+| Topic    | blue   | color_topic    | class="color_topic"    |
+| Analysis | green  | color_analysis | class="color_analysis" |
+| DataLab  | orange | color_datalab  | class="color_datalab"  |
+
+<h3>3) How do I use Fontawesome Icons?</h3>
+Before you can use Fontawesome icons you must install FontAwesome.
+
+```
+npm install --save @fortawesome/fontawesome-free
+```
+
+Once it's installed simply import the required css files. To import all variations of FontAwesome's Icons you can
+add the following import to your main css file:
+
+```
+@import "@fortawesome/fontawesome-free/css/all.css";
+```
+
+If your project only uses Classic Solid or (Sharp Solids, or any other one kind) it's better to import only the
+required css for that Icon type to keep your packages size small.<br/> Note: if you don't import "all" like shown above
+be sure to include <code>fontawesome.css</code> in addition to whatever Icon style you require.
+
+For Example:
+
+```
+@import "@fortawesome/fontawesome-free/css/fontawesome.css";
+@import "@fortawesome/fontawesome-free/css/solid.css";
+```
+
+<h3>4) How can I see all the props that are available?</h3>
+Take a look at the <code>.types.d.ts</code> files that can be found in the <code>dist/{component name}/</code>
+folder. This file contains all available properties including some descriptive text that tells you more about them.

package/dist/Button/Button.js

@@ -0,0 +1,71 @@
+import React from 'react';
+import '../styles.css';
+import { browserIsFirefox } from '../utils/browserId';
+import Tooltip from '../Tooltip';
+import Icon from '../Icon';
+/**
+ * All-in-one Button:
+ *  - use "variant" to achieve the desired style
+ *  - include tooltips and/or icons
+ */
+const Button = ({ onClick, label, variant = 'outline', type = 'button', size = 'sm', disabled, extraClassNames, id, testId, stopPropagation = true, tooltip, tooltipOptions, iconStyle = 'text', icon, iconColor, }) => {
+    const baseClasses = 'tw-py-1 tw-px-2.5 tw-rounded-sm focus:tw-ring-0 disabled:tw-pointer-events-none';
+    const baseClassesByVariant = {
+        'outline': 'tw-border-solid tw-border',
+        'theme': 'disabled:tw-bg-opacity-50',
+        'danger': 'tw-bg-sq-danger-color hover:tw-bg-sq-danger-color-hover disabled:tw-bg-opacity-50',
+        'theme-light': 'disabled:tw-bg-opacity-50',
+        'no-border': '',
+        'warning': 'tw-bg-sq-warning-color',
+    };
+    const textClassesByVariantLightTheme = {
+        'outline': 'tw-text-sq-text-color',
+        'theme': 'tw-text-white',
+        'theme-light': 'tw-text-white',
+        'danger': 'tw-text-white',
+        'no-border': 'tw-text-sq-text-color',
+        'warning': 'tw-text-white',
+    };
+    const textClassesByVariantDarkTheme = {
+        'outline': 'dark:tw-text-sq-dark-text',
+        'theme': 'dark:tw-text-white',
+        'theme-light': 'dark:tw-text-white',
+        'danger': 'dark:tw-text-white',
+        'no-border': 'dark:tw-text-sq-dark-text',
+        'warning': 'dark:tw-text-white',
+    };
+    const classesByVariantLightTheme = {
+        'outline': 'tw-border-sq-disabled-gray hover:tw-bg-sq-light-gray' +
+            ' focus:tw-bg-sq-dark-gray active:tw-bg-sq-dark-gray focus:tw-border-sq-color-dark active:tw-border-sq-color-dark',
+        'theme': 'tw-bg-sq-color-dark hover:tw-bg-sq-color-highlight',
+        'danger': '',
+        'theme-light': 'tw-bg-sq-icon hover:tw-bg-sq-link',
+        'no-border': '',
+        'warning': 'tw-bg-sq-warning-color',
+    };
+    const classesByVariantDarkTheme = {
+        'outline': 'dark:tw-border-sq-dark-disabled-gray dark:hover:tw-bg-sq-highlight-color-dark' +
+            ' dark:focus:tw-bg-sq-dark-gray dark:active:tw-bg-sq-dark-gray dark:focus:tw-border-sq-color-dark' +
+            ' dark:active:tw-border-sq-color-dark',
+        'theme': 'dark:tw-bg-sq-color-dark dark:hover:tw-bg-sq-color-highlight',
+        'danger': '',
+        'theme-light': 'dark:tw-bg-sq-icon-dark dark:hover:tw-bg-sq-link-dark',
+        'no-border': '',
+        'warning': '',
+    };
+    const sizeClasses = {
+        sm: 'tw-text-sm',
+        lg: 'tw-text-xl',
+    };
+    const appliedClasses = `${baseClasses} ${baseClassesByVariant[variant]} ${sizeClasses[size]} ${classesByVariantLightTheme[variant]} ${classesByVariantDarkTheme[variant]} ${textClassesByVariantLightTheme[variant]} ${textClassesByVariantDarkTheme[variant]} ${extraClassNames}`;
+    const button = (React.createElement("button", { id: id, disabled: disabled, "data-testid": testId, type: type === 'link' || (type === 'submit' && browserIsFirefox) ? 'button' : type, onClick: (e) => {
+            stopPropagation && e.stopPropagation();
+            onClick && onClick();
+        }, className: appliedClasses },
+        icon && (React.createElement(Icon, { icon: icon, type: iconStyle, color: iconColor, extraClassNames: label ?
+                `tw-mr-1 ${textClassesByVariantLightTheme[variant]}  ${textClassesByVariantDarkTheme[variant]}` : '', testId: `${id}_spinner` })),
+        label));
+    return tooltip ? (React.createElement(Tooltip, { text: tooltip, ...tooltipOptions }, button)) : (button);
+};
+export default Button;
+//# sourceMappingURL=Button.js.map

package/dist/Button/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../src/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,eAAe,CAAC;AACvB,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,OAAO,MAAM,YAAY,CAAC;AACjC,OAAO,IAAI,MAAM,SAAS,CAAC;AAE3B;;;;GAIG;AACH,MAAM,MAAM,GAAyC,CAAC,EACpD,OAAO,EACP,KAAK,EACL,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,QAAQ,EACf,IAAI,GAAG,IAAI,EACX,QAAQ,EACR,eAAe,EACf,EAAE,EACF,MAAM,EACN,eAAe,GAAG,IAAI,EACtB,OAAO,EACP,cAAc,EACd,SAAS,GAAG,MAAM,EAClB,IAAI,EACJ,SAAS,GACV,EAAE,EAAE;IACH,MAAM,WAAW,GAAG,iFAAiF,CAAC;IACtG,MAAM,oBAAoB,GAAG;QAC3B,SAAS,EACP,2BAA2B;QAC7B,OAAO,EAAE,2BAA2B;QACpC,QAAQ,EAAE,mFAAmF;QAC7F,aAAa,EAAE,2BAA2B;QAC1C,WAAW,EAAE,EAAE;QACf,SAAS,EAAE,wBAAwB;KACpC,CAAC;IACF,MAAM,8BAA8B,GAAG;QACrC,SAAS,EAAE,uBAAuB;QAClC,OAAO,EAAE,eAAe;QACxB,aAAa,EAAE,eAAe;QAC9B,QAAQ,EAAE,eAAe;QACzB,WAAW,EAAE,uBAAuB;QACpC,SAAS,EAAE,eAAe;KAC3B,CAAC;IACF,MAAM,6BAA6B,GAAG;QACpC,SAAS,EAAE,2BAA2B;QACtC,OAAO,EAAE,oBAAoB;QAC7B,aAAa,EAAE,oBAAoB;QACnC,QAAQ,EAAE,oBAAoB;QAC9B,WAAW,EAAE,2BAA2B;QACxC,SAAS,EAAE,oBAAoB;KAChC,CAAC;IAEF,MAAM,0BAA0B,GAAG;QACjC,SAAS,EACP,sDAAsD;YACtD,kHAAkH;QACpH,OAAO,EAAE,oDAAoD;QAC7D,QAAQ,EAAE,EAAE;QACZ,aAAa,EAAE,mCAAmC;QAClD,WAAW,EAAE,EAAE;QACf,SAAS,EAAE,wBAAwB;KACpC,CAAC;IAEF,MAAM,yBAAyB,GAAG;QAChC,SAAS,EACP,+EAA+E;YAC/E,kGAAkG;YAClG,sCAAsC;QACxC,OAAO,EAAE,8DAA8D;QACvE,QAAQ,EAAE,EAAE;QACZ,aAAa,EAAE,uDAAuD;QACtE,WAAW,EAAE,EAAE;QACf,SAAS,EAAE,EAAE;KACd,CAAC;IACF,MAAM,WAAW,GAAG;QAClB,EAAE,EAAE,YAAY;QAChB,EAAE,EAAE,YAAY;KACjB,CAAC;IACF,MAAM,cAAc,GAAG,GAAG,WAAW,IAAI,oBAAoB,CAAC,OAAO,CAAC,IAAI,WAAW,CAAC,IAAI,CAAC,IAAI,0BAA0B,CAAC,OAAO,CAAC,IAAI,yBAAyB,CAAC,OAAO,CAAC,IAAI,8BAA8B,CAAC,OAAO,CAAC,IAAI,6BAA6B,CAAC,OAAO,CAAC,IAAI,eAAe,EAAE,CAAC;IAEnR,MAAM,MAAM,GAAG,CACb,gCACE,EAAE,EAAE,EAAE,EACN,QAAQ,EAAE,QAAQ,iBACL,MAAM,EACnB,IAAI,EAAE,IAAI,KAAK,MAAM,IAAI,CAAC,IAAI,KAAK,QAAQ,IAAI,gBAAgB,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,EAClF,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;YACb,eAAe,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;YACvC,OAAO,IAAI,OAAO,EAAE,CAAC;QACvB,CAAC,EACD,SAAS,EAAE,cAAc;QACxB,IAAI,IAAI,CACP,oBAAC,IAAI,IACH,IAAI,EAAE,IAAI,EACV,IAAI,EAAE,SAAS,EACf,KAAK,EAAE,SAAS,EAChB,eAAe,EAAE,KAAK,CAAC,CAAC;gBACtB,WAAW,8BAA8B,CAAC,OAAO,CAAC,KAAK,6BAA6B,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,EACtG,MAAM,EAAE,GAAG,EAAE,UAAU,GACvB,CACH;QACA,KAAK,CACC,CACV,CAAC;IAEF,OAAO,OAAO,CAAC,CAAC,CAAC,CACf,oBAAC,OAAO,IAAC,IAAI,EAAE,OAAO,KAAM,cAAc,IACvC,MAAM,CACC,CACX,CAAC,CAAC,CAAC,CACF,MAAM,CACP,CAAC;AACJ,CAAC,CAAC;AACF,eAAe,MAAM,CAAC"}

package/dist/Button/Button.stories.d.ts

@@ -5,3 +5,4 @@ export default _default;
 export declare const AllButtonVariants: () => JSX.Element;
 export declare const ButtonWithTooltip: () => JSX.Element;
 export declare const ButtonWithIcon: () => JSX.Element;
+export declare const DisabledButton: () => JSX.Element;

package/dist/Button/Button.stories.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import Button from './Button';
+import { buttonVariants } from './Button.types';
+export default {
+    title: 'Button',
+};
+export const AllButtonVariants = () => {
+    const renderAllVariations = () => (React.createElement(React.Fragment, null, buttonVariants.map((variant) => (React.createElement("div", { key: `{variant_${variant}`, className: "tw-grid tw-grid-cols-2 tw-gap-4" },
+        React.createElement("div", { className: "tw-p-4" },
+            React.createElement(Button, { label: `Variant: ${variant}`, onClick: () => { }, variant: variant })),
+        React.createElement("div", { className: "tw-p-4 tw-dark tw-bg-sq-dark-background" },
+            React.createElement(Button, { label: `Variant: ${variant}`, onClick: () => { }, variant: variant })))))));
+    return (React.createElement("div", { className: "tw-grid tw-grid-cols-3 tw-gap-4" },
+        React.createElement("div", { className: "color_topic" },
+            React.createElement("b", null, "Topic Colors"),
+            renderAllVariations()),
+        React.createElement("div", { className: "color_analysis" },
+            React.createElement("b", null, "Analysis Colors"),
+            renderAllVariations()),
+        React.createElement("div", { className: "color_datalab" },
+            React.createElement("b", null, "Datalab Colors"),
+            renderAllVariations())));
+};
+export const ButtonWithTooltip = () => {
+    const renderButtonWithTooltip = () => (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: "tw-p-4" },
+            React.createElement(Button, { tooltip: "Helpful tooltip", variant: "theme", label: "Hover me" })),
+        React.createElement("div", { className: "tw-p-4 tw-dark tw-bg-sq-dark-background" },
+            React.createElement(Button, { tooltip: "Helpful tooltip", variant: "theme", label: "Hover me" }))));
+    return (React.createElement("div", { className: "tw-grid tw-grid-cols-3 tw-gap-4" },
+        React.createElement("div", { className: "color_topic" },
+            React.createElement("b", null, "Topic Colors"),
+            renderButtonWithTooltip()),
+        React.createElement("div", { className: "color_analysis" },
+            React.createElement("b", null, "Analysis Colors"),
+            renderButtonWithTooltip()),
+        React.createElement("div", { className: "color_datalab" },
+            React.createElement("b", null, "Datalab Colors"),
+            renderButtonWithTooltip())));
+};
+export const ButtonWithIcon = () => {
+    const renderButtonWithIcon = () => (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: "tw-p-4" },
+            React.createElement(Button, { icon: "fc-search-power", variant: "theme", label: "With Icon" })),
+        React.createElement("div", { className: "tw-p-4 tw-dark tw-bg-sq-dark-background" },
+            React.createElement(Button, { icon: "fc-search-power", variant: "theme", label: "With Icon" }))));
+    return (React.createElement("div", { className: "tw-grid tw-grid-cols-3 tw-gap-4" },
+        React.createElement("div", { className: "color_topic" },
+            React.createElement("b", null, "Topic Colors"),
+            renderButtonWithIcon()),
+        React.createElement("div", { className: "color_analysis" },
+            React.createElement("b", null, "Analysis Colors"),
+            renderButtonWithIcon()),
+        React.createElement("div", { className: "color_datalab" },
+            React.createElement("b", null, "Datalab Colors"),
+            renderButtonWithIcon())));
+};
+//# sourceMappingURL=Button.stories.js.map

package/dist/Button/Button.stories.js.map

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

package/dist/Button/Button.test.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import Button from './Button';
+describe('Button', () => {
+    class Context {
+        testId = 'buttonTestId';
+        label = 'button label';
+        props = {
+            label: this.label,
+            onClick: jest.fn(),
+            testId: this.testId,
+        };
+    }
+    let tc;
+    beforeEach(() => {
+        tc = new Context();
+    });
+    const renderButton = (props) => render(React.createElement(Button, { ...props }));
+    it('renders button label', () => {
+        renderButton(tc.props);
+        expect(screen.getByText(tc.label)).toBeInTheDocument();
+    });
+    it('calls on click', async () => {
+        renderButton(tc.props);
+        await userEvent.click(screen.getByTestId(tc.testId));
+        expect(tc.props.onClick).toHaveBeenCalled();
+    });
+    it('renders disabled button', () => {
+        renderButton({ ...tc.props, disabled: true });
+        expect(screen.getByText(tc.label)).toBeDisabled();
+    });
+    it('respects stopPropagation default', async () => {
+        const callOnPropagation = jest.fn();
+        render(React.createElement("div", { onClick: callOnPropagation },
+            React.createElement(Button, { ...tc.props })));
+        await userEvent.click(screen.getByTestId(tc.testId));
+        expect(callOnPropagation).not.toHaveBeenCalled();
+    });
+    it('propagates click event if not told not to', async () => {
+        const callOnPropagation = jest.fn();
+        render(React.createElement("div", { onClick: callOnPropagation },
+            React.createElement(Button, { ...{ ...tc.props, stopPropagation: false } })));
+        await userEvent.click(screen.getByTestId(tc.testId));
+        expect(callOnPropagation).toHaveBeenCalled();
+    });
+});
+//# sourceMappingURL=Button.test.js.map

package/dist/Button/Button.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.test.js","sourceRoot":"","sources":["../../src/Button/Button.test.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,2BAA2B,CAAC;AACnC,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,SAAS,MAAM,6BAA6B,CAAC;AAEpD,OAAO,MAAM,MAAM,UAAU,CAAC;AAG9B,QAAQ,CAAC,QAAQ,EAAE,GAAG,EAAE;IACtB,MAAM,OAAO;QACX,MAAM,GAAG,cAAc,CAAC;QACxB,KAAK,GAAG,cAAc,CAAC;QACvB,KAAK,GAAgB;YACnB,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,OAAO,EAAE,IAAI,CAAC,EAAE,EAAE;YAClB,MAAM,EAAE,IAAI,CAAC,MAAM;SACpB,CAAC;KACH;IAED,IAAI,EAAW,CAAC;IAChB,UAAU,CAAC,GAAG,EAAE;QACd,EAAE,GAAG,IAAI,OAAO,EAAE,CAAC;IACrB,CAAC,CAAC,CAAC;IAEH,MAAM,YAAY,GAAG,CAAC,KAAkB,EAAE,EAAE,CAAC,MAAM,CAAC,oBAAC,MAAM,OAAK,KAAK,GAAI,CAAC,CAAC;IAE3E,EAAE,CAAC,sBAAsB,EAAE,GAAG,EAAE;QAC9B,YAAY,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC;QACvB,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;IACzD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,gBAAgB,EAAE,KAAK,IAAI,EAAE;QAC9B,YAAY,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC;QACvB,MAAM,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC,WAAW,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;QACrD,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,gBAAgB,EAAE,CAAC;IAC9C,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,yBAAyB,EAAE,GAAG,EAAE;QACjC,YAAY,CAAC,EAAE,GAAG,EAAE,CAAC,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC;QAC9C,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,YAAY,EAAE,CAAC;IACpD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,kCAAkC,EAAE,KAAK,IAAI,EAAE;QAChD,MAAM,iBAAiB,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;QACpC,MAAM,CACJ,6BAAK,OAAO,EAAE,iBAAiB;YAC7B,oBAAC,MAAM,OAAK,EAAE,CAAC,KAAK,GAAI,CACpB,CACP,CAAC;QACF,MAAM,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC,WAAW,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;QACrD,MAAM,CAAC,iBAAiB,CAAC,CAAC,GAAG,CAAC,gBAAgB,EAAE,CAAC;IACnD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,2CAA2C,EAAE,KAAK,IAAI,EAAE;QACzD,MAAM,iBAAiB,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;QACpC,MAAM,CACJ,6BAAK,OAAO,EAAE,iBAAiB;YAC7B,oBAAC,MAAM,OAAK,EAAE,GAAG,EAAE,CAAC,KAAK,EAAE,eAAe,EAAE,KAAK,EAAE,GAAI,CACnD,CACP,CAAC;QACF,MAAM,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC,WAAW,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;QACrD,MAAM,CAAC,iBAAiB,CAAC,CAAC,gBAAgB,EAAE,CAAC;IAC/C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/dist/Button/Button.types.d.ts

@@ -36,4 +36,6 @@ export interface ButtonProps {
     tooltip?: string;
     /** options for the tooltip */
     tooltipOptions?: Omit<TooltipProps, 'text'>;
+    /** if provided, determines whether to prevent the blur event from occurring onMouseDown*/
+    preventBlur?: boolean;
 }

package/dist/Button/Button.types.js

@@ -0,0 +1,4 @@
+export const buttonTypes = ['button', 'reset', 'submit', 'link'];
+export const buttonSizes = ['sm', 'lg'];
+export const buttonVariants = ['outline', 'theme', 'theme-light', 'warning', 'danger', 'no-border'];
+//# sourceMappingURL=Button.types.js.map

package/dist/Button/Button.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.types.js","sourceRoot":"","sources":["../../src/Button/Button.types.ts"],"names":[],"mappings":"AAGA,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,CAAU,CAAC;AAC1E,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,IAAI,EAAE,IAAI,CAAU,CAAC;AACjD,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,SAAS,EAAE,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,QAAQ,EAAE,WAAW,CAAU,CAAC"}

package/dist/Button/index.js

@@ -0,0 +1,2 @@
+export { default } from "./Button";
+//# sourceMappingURL=index.js.map

package/dist/Button/index.js.map

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

package/dist/Checkbox/Checkbox.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import '../styles.css';
+const alignment = 'tw-flex tw-items-center';
+const labelClasses = 'tw-ml-1.5 tw-text-sm';
+const baseClasses = 'tw-border-1 tw-h-3.5 tw-w-3.5 focus:tw-ring-0 focus:tw-ring-offset-0 tw-outline-none focus:tw-outline-none' +
+    '  dark:tw-bg-sq-dark-background dark:tw-border-sq-dark-text dark:checked:tw-bg-sq-dark-text' +
+    '  checked:tw-text-sq-text-color' +
+    ' disabled:tw-text-sq-fairly-dark-gray';
+const checkboxClasses = `tw-form-checkbox tw-rounded ${baseClasses}`;
+const radioClasses = `tw-form-radio ${baseClasses}`;
+/**
+ * Checkbox and Radio Box Component.
+ */
+export const Checkbox = (props) => {
+    const { type = 'checkbox', value, disabled = false, label, onChange, onClick, onKeyDown, checked, defaultChecked, id, name, extraClassNames, extraLabelClassNames, testId, } = props;
+    const assignedId = id ?? 'checkbox_' + Math.random();
+    return (React.createElement("span", { className: `${alignment} ${extraClassNames}` },
+        React.createElement("input", { value: value, type: type, "data-testid": testId, name: name, id: assignedId, checked: checked, defaultChecked: defaultChecked, className: `${type === 'checkbox' ? checkboxClasses : radioClasses} ${disabled ? 'tw-cursor-not-allowed' : 'tw-cursor-pointer'}`, disabled: disabled, onClick: onClick, onChange: onChange, onKeyDown: onKeyDown }),
+        React.createElement("label", { htmlFor: assignedId, className: `${labelClasses} ${extraLabelClassNames} ${disabled
+                ? 'tw-cursor-not-allowed dark:tw-text-sq-fairly-dark-gray tw-text-sq-fairly-dark-gray'
+                : 'tw-cursor-pointer tw-text-sq-text-color dark:tw-text-sq-dark-text'}` }, label)));
+};
+//# sourceMappingURL=Checkbox.js.map

package/dist/Checkbox/Checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../src/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,eAAe,CAAC;AAEvB,MAAM,SAAS,GAAG,yBAAyB,CAAC;AAC5C,MAAM,YAAY,GAAG,sBAAsB,CAAC;AAE5C,MAAM,WAAW,GACf,4GAA4G;IAC5G,6FAA6F;IAC7F,iCAAiC;IACjC,uCAAuC,CAAC;AAE1C,MAAM,eAAe,GAAG,+BAA+B,WAAW,EAAE,CAAC;AAErE,MAAM,YAAY,GAAG,iBAAiB,WAAW,EAAE,CAAC;AAEpD;;GAEG;AACH,MAAM,CAAC,MAAM,QAAQ,GAA2C,CAAC,KAAK,EAAE,EAAE;IACxE,MAAM,EACJ,IAAI,GAAG,UAAU,EACjB,KAAK,EACL,QAAQ,GAAG,KAAK,EAChB,KAAK,EACL,QAAQ,EACR,OAAO,EACP,SAAS,EACT,OAAO,EACP,cAAc,EACd,EAAE,EACF,IAAI,EACJ,eAAe,EACf,oBAAoB,EACpB,MAAM,GACP,GAAG,KAAK,CAAC;IAEV,MAAM,UAAU,GAAG,EAAE,IAAI,WAAW,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC;IAErD,OAAO,CACL,8BAAM,SAAS,EAAE,GAAG,SAAS,IAAI,eAAe,EAAE;QAChD,+BACE,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,iBACG,MAAM,EACnB,IAAI,EAAE,IAAI,EACV,EAAE,EAAE,UAAU,EACd,OAAO,EAAE,OAAO,EAChB,cAAc,EAAE,cAAc,EAC9B,SAAS,EAAE,GAAG,IAAI,KAAK,UAAU,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,YAAY,IAChE,QAAQ,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,mBACvC,EAAE,EACF,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,GACpB;QACF,+BACE,OAAO,EAAE,UAAU,EACnB,SAAS,EAAE,GAAG,YAAY,IAAI,oBAAoB,IAChD,QAAQ;gBACN,CAAC,CAAC,oFAAoF;gBACtF,CAAC,CAAC,mEACN,EAAE,IACD,KAAK,CACA,CACH,CACR,CAAC;AACJ,CAAC,CAAC"}

package/dist/Checkbox/Checkbox.stories.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Checkbox } from './Checkbox';
+export default {
+    title: 'Checkbox',
+};
+export const AllCheckboxes = () => {
+    const getDisplay = (type) => (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: "tw-p-4" },
+            React.createElement(Checkbox, { value: "a", type: type, checked: true, label: 'with Label' })),
+        React.createElement("div", { className: "tw-p-4" },
+            React.createElement(Checkbox, { value: "d", type: type, checked: false, disabled: true, label: "Disabled" })),
+        React.createElement("div", { className: "tw-p-4" },
+            React.createElement(Checkbox, { value: "d", type: type, checked: true, disabled: true, label: "Disabled" })),
+        React.createElement("div", { className: "tw-p-4" },
+            React.createElement(Checkbox, { value: "b", type: type, checked: true })),
+        React.createElement("div", { className: "tw-p-4" },
+            React.createElement(Checkbox, { value: "c", type: type, checked: false }))));
+    const renderAllVariations = (type) => (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: "tw-p-4 light" }, getDisplay(type)),
+        React.createElement("div", { className: "tw-p-4 tw-dark tw-bg-sq-dark-background" }, getDisplay(type))));
+    return (React.createElement("div", { className: "tw-grid tw-grid-cols-2 tw-gap-4" },
+        React.createElement("div", null,
+            React.createElement("b", null, "Checkbox"),
+            renderAllVariations('checkbox')),
+        React.createElement("div", null,
+            React.createElement("b", null, "Radios"),
+            renderAllVariations('radio'))));
+};
+//# sourceMappingURL=Checkbox.stories.js.map

package/dist/Checkbox/Checkbox.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.stories.js","sourceRoot":"","sources":["../../src/Checkbox/Checkbox.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,eAAe;IACb,KAAK,EAAE,UAAU;CAClB,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,EAAE;IAChC,MAAM,UAAU,GAAG,CAAC,IAA0B,EAAE,EAAE,CAAC,CACjD;QACE,6BAAK,SAAS,EAAC,QAAQ;YACrB,oBAAC,QAAQ,IAAC,KAAK,EAAC,GAAG,EAAC,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,YAAY,GAAI,CAClE;QACN,6BAAK,SAAS,EAAC,QAAQ;YACrB,oBAAC,QAAQ,IAAC,KAAK,EAAC,GAAG,EAAC,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAC,UAAU,GAAG,CAC/E;QACN,6BAAK,SAAS,EAAC,QAAQ;YACrB,oBAAC,QAAQ,IAAC,KAAK,EAAC,GAAG,EAAC,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAC,UAAU,GAAG,CAC9E;QACN,6BAAK,SAAS,EAAC,QAAQ;YACrB,oBAAC,QAAQ,IAAC,KAAK,EAAC,GAAG,EAAC,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,GAAI,CAC7C;QACN,6BAAK,SAAS,EAAC,QAAQ;YACrB,oBAAC,QAAQ,IAAC,KAAK,EAAC,GAAG,EAAC,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,GAAI,CAC9C,CACL,CACJ,CAAC;IACF,MAAM,mBAAmB,GAAG,CAAC,IAA0B,EAAE,EAAE,CAAC,CAC1D;QACE,6BAAK,SAAS,EAAC,cAAc,IAAE,UAAU,CAAC,IAAI,CAAC,CAAO;QACtD,6BAAK,SAAS,EAAC,yCAAyC,IAAE,UAAU,CAAC,IAAI,CAAC,CAAO,CAChF,CACJ,CAAC;IAEF,OAAO,CACL,6BAAK,SAAS,EAAC,iCAAiC;QAC9C;YACE,0CAAe;YACd,mBAAmB,CAAC,UAAU,CAAC,CAC5B;QAEN;YACE,wCAAa;YACZ,mBAAmB,CAAC,OAAO,CAAC,CACzB,CACF,CACP,CAAC;AACJ,CAAC,CAAC"}

package/dist/Checkbox/Checkbox.test.js

@@ -0,0 +1,94 @@
+import React from 'react';
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import { Checkbox } from './Checkbox';
+import userEvent from '@testing-library/user-event';
+describe('Checkbox', () => {
+    class Context {
+        testId = 'checkboxTestId';
+        props = {
+            onChange: jest.fn(),
+            checked: false,
+            testId: this.testId,
+        };
+    }
+    let tc;
+    beforeEach(() => {
+        tc = new Context();
+    });
+    const renderCheckbox = (props) => render(React.createElement(Checkbox, { ...props }));
+    it('renders checkbox', () => {
+        renderCheckbox(tc.props);
+        expect(screen.getByTestId(tc.testId)).toBeInTheDocument();
+    });
+    it('renders radio', () => {
+        renderCheckbox({ ...tc.props, type: 'radio' });
+        expect(screen.getByTestId(tc.testId)).toHaveProperty('type', 'radio');
+    });
+    it('renders label', () => {
+        const label = 'look at this checkbox!';
+        renderCheckbox({ ...tc.props, label });
+        expect(screen.getByText(label)).toBeInTheDocument();
+    });
+    it('respects checked', () => {
+        renderCheckbox({ ...tc.props, checked: true });
+        expect(screen.getByTestId(tc.testId)).toBeChecked();
+    });
+    it('calls onChange handler', async () => {
+        const onChange = jest.fn();
+        renderCheckbox({ ...tc.props, onChange });
+        await userEvent.click(screen.getByTestId(tc.testId));
+        expect(onChange).toHaveBeenCalled();
+    });
+    it('calls onKeyDown handler', async () => {
+        const onKeyDown = jest.fn();
+        renderCheckbox({ ...tc.props, onKeyDown });
+        await userEvent.type(screen.getByTestId(tc.testId), 'a');
+        expect(onKeyDown).toHaveBeenCalled();
+    });
+    it('calls onClickHandler handler', async () => {
+        const onClick = jest.fn();
+        renderCheckbox({ ...tc.props, onClick });
+        await userEvent.click(screen.getByTestId(tc.testId));
+        expect(onClick).toHaveBeenCalled();
+    });
+    it('respects disabled', () => {
+        renderCheckbox({ ...tc.props, disabled: true });
+        expect(screen.getByTestId(tc.testId)).not.toBeEnabled();
+    });
+    it('renders label clickable', async () => {
+        const label = 'amazing checkbox';
+        const onClick = jest.fn();
+        renderCheckbox({ ...tc.props, label, onClick });
+        expect(screen.getByTestId(tc.testId)).not.toBeChecked();
+        await userEvent.click(screen.getByText(label));
+        expect(onClick).toHaveBeenCalled();
+    });
+    it('respects id', () => {
+        const id = 'checkboxId';
+        renderCheckbox({ ...tc.props, id });
+        expect(screen.getByTestId(tc.testId)).toHaveProperty('id', id);
+    });
+    it('respects name', () => {
+        const name = 'checkboxName';
+        renderCheckbox({ ...tc.props, name });
+        expect(screen.getByTestId(tc.testId)).toHaveProperty('name', name);
+    });
+    it('respects name', () => {
+        const value = 'priceless';
+        renderCheckbox({ ...tc.props, value });
+        expect(screen.getByTestId(tc.testId)).toHaveProperty('value', value);
+    });
+    it('applies extraClassNames', () => {
+        const extraClassNames = 'extra styling so fancy';
+        renderCheckbox({ ...tc.props, extraClassNames });
+        expect(screen.getByTestId(tc.testId).parentNode).toHaveClass(extraClassNames);
+    });
+    it('applies extraLabelClassNames', () => {
+        const extraLabelClassNames = 'special label';
+        const label = 'amazing checkbox';
+        renderCheckbox({ ...tc.props, extraLabelClassNames, label });
+        expect(screen.getByText(label)).toHaveClass(extraLabelClassNames);
+    });
+});
+//# sourceMappingURL=Checkbox.test.js.map

package/dist/Checkbox/Checkbox.test.js.map

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

package/dist/Checkbox/Checkbox.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Checkbox.types.js.map

package/dist/Checkbox/Checkbox.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.types.js","sourceRoot":"","sources":["../../src/Checkbox/Checkbox.types.ts"],"names":[],"mappings":""}

package/dist/Checkbox/index.js

@@ -0,0 +1,2 @@
+export { Checkbox as default } from './Checkbox';
+//# sourceMappingURL=index.js.map

package/dist/Checkbox/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Checkbox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,IAAI,OAAO,EAAE,MAAM,YAAY,CAAC"}

package/dist/Icon/Icon.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import '../styles.css';
+import Tooltip from '../Tooltip';
+/**
+ * Icon:
+ *  - access to Seeq custom icons by providing the desired icon
+ *  - leverage "type" to style your icon
+ */
+const Icon = ({ onClick, icon, type = 'theme', extraClassNames, id, large, small, color, testId, customId, tooltip, tooltipDelay, tooltipPlacement, number, hasExternalTooltipHandler = false, }) => {
+    if ((type === 'color' && (color === undefined || color === '')) || (color && type !== 'color')) {
+        const errorMessage = color === undefined || color === ''
+            ? 'Icon with type="color" must have prop color specified.'
+            : 'Icon with prop color must have type="color".';
+        return React.createElement("div", { className: "tw-text-sq-danger-color" }, errorMessage);
+    }
+    const colorClassesThemeLight = {
+        'theme': 'tw-text-sq-color-dark',
+        'white': 'tw-text-white',
+        'dark-gray': 'tw-text-sq-fairly-dark-gray',
+        'warning': 'tw-text-sq-warning-color',
+        'darkish-gray': 'tw-text-sq-darkish-gray',
+        'gray': 'tw-text-sq-disabled-gray',
+        'color': '',
+        'info': 'tw-text-sq-link',
+        'text': 'tw-text-sq-text-color',
+        'inherit': '',
+        'danger': 'tw-text-sq-danger-color',
+        'theme-light': 'tw-text-sq-color-light',
+        'success': 'tw-text-sq-success-color',
+    };
+    const colorClassesThemeDark = {
+        'theme': 'dark:tw-text-sq-color-dark-dark',
+        'white': '',
+        'dark-gray': 'tw-text-sq-fairly-dark-gray',
+        'warning': '',
+        'darkish-gray': 'tw-text-sq-darkish-gray',
+        'gray': 'dark:tw-text-sq-dark-disabled-gray',
+        'color': '',
+        'info': 'dark:tw-text-sq-link-dark',
+        'text': 'dark:tw-text-sq-dark-text',
+        'inherit': '',
+        'danger': 'tw-text-sq-danger-color',
+        'theme-light': 'tw-text-sq-color-light',
+        'success': 'tw-text-sq-success-color',
+    };
+    const iconPrefix = icon.startsWith('fc') ? 'fc' : 'fa';
+    const style = type === 'color' && color ? { color } : {};
+    const appliedClassNames = `${iconPrefix} ${icon} ${small ? 'fa-sm' : ''} ${large ? 'fa-lg' : ''} 
+  ${colorClassesThemeLight[type]} ${colorClassesThemeDark[type]} ${onClick ? 'cursor-pointer' : ''} ${extraClassNames}`;
+    const iconTag = (React.createElement("i", { className: appliedClassNames, style: style, onClick: onClick, "data-testid": testId, "data-customid": customId, id: id, "data-number": number }));
+    return !hasExternalTooltipHandler && tooltip && tooltip !== '' ? (React.createElement(Tooltip, { text: tooltip, delay: tooltipDelay, position: tooltipPlacement }, iconTag)) : (iconTag);
+};
+export default Icon;
+//# sourceMappingURL=Icon.js.map

package/dist/Icon/Icon.js.map

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

package/dist/Icon/Icon.stories.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import Icon from './Icon';
+import { iconTypes } from './Icon.types';
+export default {
+    title: 'Icons',
+};
+export const AllIcons = () => {
+    const renderAllVariations = () => {
+        return (React.createElement(React.Fragment, null,
+            React.createElement("br", null),
+            React.createElement("br", null),
+            iconTypes.map((iconType) => {
+                return (React.createElement("div", { key: `${iconType}` },
+                    React.createElement("b", null,
+                        "type=",
+                        iconType),
+                    React.createElement("br", null),
+                    React.createElement("div", null,
+                        React.createElement(Icon, { icon: "fc-announcements", small: true, extraClassNames: 'tw-p-2', type: iconType, color: iconType === 'color' ? 'purple' : undefined }),
+                        React.createElement(Icon, { icon: "fc-announcements", extraClassNames: 'tw-p-2', type: iconType, color: iconType === 'color' ? '#928378' : undefined }),
+                        React.createElement(Icon, { icon: "fc-announcements", large: true, extraClassNames: 'tw-p-2', type: iconType, color: iconType === 'color' ? 'pink' : undefined })),
+                    React.createElement("div", { className: "tw-dark tw-bg-sq-dark-background" },
+                        React.createElement(Icon, { icon: "fc-announcements", small: true, extraClassNames: 'tw-p-2', type: iconType, color: iconType === 'color' ? 'purple' : undefined }),
+                        React.createElement(Icon, { icon: "fc-announcements", extraClassNames: 'tw-p-2', type: iconType, color: iconType === 'color' ? '#928378' : undefined }),
+                        React.createElement(Icon, { icon: "fc-announcements", large: true, extraClassNames: 'tw-p-2', type: iconType, color: iconType === 'color' ? 'pink' : undefined })),
+                    React.createElement("br", null)));
+            })));
+    };
+    return (React.createElement("div", { className: "tw-grid tw-grid-cols-3 tw-gap-4" },
+        React.createElement("div", { className: "color_topic" },
+            React.createElement("b", null, "Topic Colors"),
+            renderAllVariations()),
+        React.createElement("div", { className: "color_analysis" },
+            React.createElement("b", null, "Analysis Colors"),
+            renderAllVariations()),
+        React.createElement("div", { className: "color_datalab" },
+            React.createElement("b", null, "Datalab Colors"),
+            renderAllVariations())));
+};
+//# sourceMappingURL=Icon.stories.js.map

package/dist/Icon/Icon.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.stories.js","sourceRoot":"","sources":["../../src/Icon/Icon.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,QAAQ,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,eAAe;IACb,KAAK,EAAE,OAAO;CACf,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAG,EAAE;IAC3B,MAAM,mBAAmB,GAAG,GAAG,EAAE;QAC/B,OAAO,CACL;YACE,+BAAM;YACN,+BAAM;YACL,SAAS,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE;gBAC1B,OAAO,CACL,6BAAK,GAAG,EAAE,GAAG,QAAQ,EAAE;oBACrB;;wBAAS,QAAQ,CAAK;oBACtB,+BAAM;oBACN;wBACE,oBAAC,IAAI,IACH,IAAI,EAAC,kBAAkB,EACvB,KAAK,EAAE,IAAI,EACX,eAAe,EAAE,QAAQ,EACzB,IAAI,EAAE,QAAQ,EACd,KAAK,EAAE,QAAQ,KAAK,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,GAClD;wBACF,oBAAC,IAAI,IACH,IAAI,EAAC,kBAAkB,EACvB,eAAe,EAAE,QAAQ,EACzB,IAAI,EAAE,QAAQ,EACd,KAAK,EAAE,QAAQ,KAAK,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,GACnD;wBACF,oBAAC,IAAI,IACH,IAAI,EAAC,kBAAkB,EACvB,KAAK,EAAE,IAAI,EACX,eAAe,EAAE,QAAQ,EACzB,IAAI,EAAE,QAAQ,EACd,KAAK,EAAE,QAAQ,KAAK,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,GAChD,CACE;oBACN,6BAAK,SAAS,EAAC,kCAAkC;wBAC/C,oBAAC,IAAI,IACH,IAAI,EAAC,kBAAkB,EACvB,KAAK,EAAE,IAAI,EACX,eAAe,EAAE,QAAQ,EACzB,IAAI,EAAE,QAAQ,EACd,KAAK,EAAE,QAAQ,KAAK,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,GAClD;wBACF,oBAAC,IAAI,IACH,IAAI,EAAC,kBAAkB,EACvB,eAAe,EAAE,QAAQ,EACzB,IAAI,EAAE,QAAQ,EACd,KAAK,EAAE,QAAQ,KAAK,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,GACnD;wBACF,oBAAC,IAAI,IACH,IAAI,EAAC,kBAAkB,EACvB,KAAK,EAAE,IAAI,EACX,eAAe,EAAE,QAAQ,EACzB,IAAI,EAAE,QAAQ,EACd,KAAK,EAAE,QAAQ,KAAK,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,GAChD,CACE;oBACN,+BAAM,CACF,CACP,CAAC;YACJ,CAAC,CAAC,CACD,CACJ,CAAC;IACJ,CAAC,CAAC;IACF,OAAO,CACL,6BAAK,SAAS,EAAC,iCAAiC;QAC9C,6BAAK,SAAS,EAAC,aAAa;YAC1B,8CAAmB;YAClB,mBAAmB,EAAE,CAClB;QAEN,6BAAK,SAAS,EAAC,gBAAgB;YAC7B,iDAAsB;YACrB,mBAAmB,EAAE,CAClB;QAEN,6BAAK,SAAS,EAAC,eAAe;YAC5B,gDAAqB;YACpB,mBAAmB,EAAE,CAClB,CACF,CACP,CAAC;AACJ,CAAC,CAAC"}