@seeqdev/qomponents 0.0.0

package/README.md

@@ -0,0 +1,28 @@
+# Seeq Qomponents - UNDER CONSTRUCTION
+
+## Development
+
+Don't forget to add the component to your `index.ts` exports if you want the library to export the component!
+
+To develop a qomponent and use the benefits of hot-reload for quick preview you can run:
+
+```
+npm run dev
+```
+
+This will start Ladle and watch for changes in the qomponents directory.
+
+### Testing
+
+```
+npm run test
+```
+
+... or IntelliJ
+
+### Building
+
+Builds happen via gradle.
+
+
+

package/dist/Button/Button.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { ButtonProps } from './Button.types';
+import '../styles.css';
+declare const Button: React.FunctionComponent<ButtonProps>;
+export default Button;

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

@@ -0,0 +1,9 @@
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const AllButtons: () => JSX.Element;
+export declare const WithShortText: () => JSX.Element;
+export declare const WithLongText: () => JSX.Element;
+export declare const InTopic: () => JSX.Element;
+export declare const InAnalysis: () => JSX.Element;

package/dist/Button/Button.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

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

@@ -0,0 +1,24 @@
+export type ButtonType = 'button' | 'reset' | 'submit' | 'link';
+export type ButtonSize = 'sm' | 'lg';
+export type ButtonVariant = 'outline' | 'theme' | 'warning' | 'danger' | 'no-border' | 'theme-light';
+export interface ButtonProps {
+    /** function to call when clicking the button (takes no parameters) */
+    onClick?: () => any;
+    /** label translation key on the button (i.e. SUBMIT) */
+    label?: string;
+    variant?: ButtonVariant;
+    /** type of button (i.e button/submit/reset, default is button) */
+    type?: ButtonType;
+    /** size of the button (i.e. sm/lg, default is normal) */
+    size?: ButtonSize;
+    /** true if button should be disabled */
+    disabled?: boolean;
+    /** extra class names to be placed on the Icon component */
+    extraClassNames?: string;
+    /** id to place on the button element */
+    id?: string;
+    /** id that will be used in the data-testid attribute on the button element */
+    testId?: string;
+    /** if false, will not stopPropagation onClick **/
+    stopPropagation?: boolean;
+}

package/dist/Button/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./Button";

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+import Button from './Button';
+export { Button };

package/dist/index.esm.js

@@ -0,0 +1,54 @@
+import React from 'react';
+
+/**
+ * @exports the browser id (i.e., 'IE 11' 'Chrome 90')
+ * @see http://stackoverflow.com/questions/2400935/browser-detection-in-javascript
+ */
+const browserId = (function () {
+    let tem;
+    const ua = navigator.userAgent;
+    let M = ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
+    if (/trident/i.test(M[1])) {
+        tem = /\brv[ :]+(\d+)/g.exec(ua) || [];
+        return `IE ${tem[1] || ''}`;
+    }
+    if (M[1] === 'Chrome') {
+        tem = ua.match(/\b(OPR|Edge?)\/(\d+)/);
+        if (tem !== null) {
+            return tem.slice(1).join(' ').replace('OPR', 'Opera').replace('Edg ', 'Edge ');
+        }
+    }
+    M = M[2] ? [M[1], M[2]] : [navigator.appName, navigator.appVersion, '-?'];
+    if ((tem = ua.match(/version\/(\d+)/i)) !== null) {
+        M.splice(1, 1, tem[1]);
+    }
+    return M.join(' ');
+})();
+const browserName = browserId && browserId.split(' ', 2)[0];
+browserId && parseInt(browserId.split(' ', 2)[1], 10);
+const browserIsFirefox = browserId && browserName === 'Firefox';
+
+const Button = ({ onClick, label, variant = 'outline', type = 'button', size = 'sm', disabled, extraClassNames, id, testId, stopPropagation = true, }) => {
+    const baseClasses = 'py-1 px-3 rounded-sm focus:ring-0 disabled:pointer-events-none';
+    const classesByVariant = {
+        outline: 'text-sq-text-color border-sq-disabled-gray border-solid border hover:bg-sq-light-gray' +
+            ' focus:bg-sq-dark-gray active:bg-sq-dark-gray focus:border-sq-color-dark active:border-sq-color-dark',
+        theme: 'bg-sq-color-dark hover:bg-sq-color-highlight text-white disabled:bg-opacity-50',
+        danger: 'bg-sq-danger-color text-white hover:bg-sq-danger-color-hover disabled:bg-opacity-50',
+        'theme-light': 'bg-sq-icon text-white hover:bg-sq-link disabled:bg-opacity-50',
+        'no-border': '',
+        'warning': '',
+    };
+    const sizeClasses = {
+        sm: 'text-xs',
+        lg: 'text-xl',
+    };
+    const appliedClasses = baseClasses + ' ' + sizeClasses[size] + ' ' + classesByVariant[variant] + ' ' + extraClassNames;
+    return (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 }, label));
+};
+
+export { Button };
+//# sourceMappingURL=index.esm.js.map

package/dist/index.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":["../src/utils/browserId.ts","../src/Button/Button.tsx"],"sourcesContent":["/**\n * @exports the browser id (i.e., 'IE 11' 'Chrome 90')\n * @see http://stackoverflow.com/questions/2400935/browser-detection-in-javascript\n */\nexport const browserId: string = (function () {\n  let tem;\n  const ua = navigator.userAgent;\n  let M = ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\\/))\\/?\\s*(\\d+)/i) || [];\n  if (/trident/i.test(M[1])) {\n    tem = /\\brv[ :]+(\\d+)/g.exec(ua) || [];\n    return `IE ${tem[1] || ''}`;\n  }\n\n  if (M[1] === 'Chrome') {\n    tem = ua.match(/\\b(OPR|Edge?)\\/(\\d+)/);\n    if (tem !== null) {\n      return tem.slice(1).join(' ').replace('OPR', 'Opera').replace('Edg ', 'Edge ');\n    }\n  }\n\n  M = M[2] ? [M[1], M[2]] : [navigator.appName, navigator.appVersion, '-?'];\n  if ((tem = ua.match(/version\\/(\\d+)/i)) !== null) {\n    M.splice(1, 1, tem[1]);\n  }\n\n  return M.join(' ');\n})();\nexport const browserName = browserId && browserId.split(' ', 2)[0];\nexport const browserVersion = browserId && parseInt(browserId.split(' ', 2)[1], 10);\nexport const browserIsFirefox = browserId && browserName === 'Firefox';\nexport const browserIsEdgeBeforeChromium =\n  browserName && browserVersion && browserName === 'Edge' && browserVersion < 70;\n","import React from 'react';\nimport { ButtonProps } from './Button.types';\nimport '../styles.css';\nimport { browserIsFirefox } from '../utils/browserId';\n\nconst Button: React.FunctionComponent<ButtonProps> =\n  ({\n    onClick,\n    label,\n    variant = 'outline',\n    type = 'button',\n    size = 'sm',\n    disabled,\n    extraClassNames,\n    id,\n    testId,\n    stopPropagation = true,\n  }) => {\n    const baseClasses = 'py-1 px-3 rounded-sm focus:ring-0 disabled:pointer-events-none';\n    const classesByVariant = {\n      outline: 'text-sq-text-color border-sq-disabled-gray border-solid border hover:bg-sq-light-gray' +\n        ' focus:bg-sq-dark-gray active:bg-sq-dark-gray focus:border-sq-color-dark active:border-sq-color-dark',\n      theme: 'bg-sq-color-dark hover:bg-sq-color-highlight text-white disabled:bg-opacity-50',\n      danger: 'bg-sq-danger-color text-white hover:bg-sq-danger-color-hover disabled:bg-opacity-50',\n      'theme-light': 'bg-sq-icon text-white hover:bg-sq-link disabled:bg-opacity-50',\n      'no-border': '',\n      'warning': '',\n    };\n    const sizeClasses = {\n      sm: 'text-xs',\n      lg: 'text-xl',\n    };\n    const appliedClasses = baseClasses + ' ' + sizeClasses[size] + ' ' + classesByVariant[variant] + ' ' + extraClassNames;\n\n    return (\n      <button\n        id={id}\n        disabled={disabled}\n        data-testid={testId}\n        type={type === 'link' || (type === 'submit' && browserIsFirefox) ? 'button' : type}\n        onClick={(e) => {\n          stopPropagation && e.stopPropagation();\n          onClick && onClick();\n        }}\n        className={appliedClasses}>\n        {label}\n      </button>\n    );\n  };\nexport default Button;\n\n"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -0,0 +1,56 @@
+'use strict';
+
+var React = require('react');
+
+/**
+ * @exports the browser id (i.e., 'IE 11' 'Chrome 90')
+ * @see http://stackoverflow.com/questions/2400935/browser-detection-in-javascript
+ */
+const browserId = (function () {
+    let tem;
+    const ua = navigator.userAgent;
+    let M = ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
+    if (/trident/i.test(M[1])) {
+        tem = /\brv[ :]+(\d+)/g.exec(ua) || [];
+        return `IE ${tem[1] || ''}`;
+    }
+    if (M[1] === 'Chrome') {
+        tem = ua.match(/\b(OPR|Edge?)\/(\d+)/);
+        if (tem !== null) {
+            return tem.slice(1).join(' ').replace('OPR', 'Opera').replace('Edg ', 'Edge ');
+        }
+    }
+    M = M[2] ? [M[1], M[2]] : [navigator.appName, navigator.appVersion, '-?'];
+    if ((tem = ua.match(/version\/(\d+)/i)) !== null) {
+        M.splice(1, 1, tem[1]);
+    }
+    return M.join(' ');
+})();
+const browserName = browserId && browserId.split(' ', 2)[0];
+browserId && parseInt(browserId.split(' ', 2)[1], 10);
+const browserIsFirefox = browserId && browserName === 'Firefox';
+
+const Button = ({ onClick, label, variant = 'outline', type = 'button', size = 'sm', disabled, extraClassNames, id, testId, stopPropagation = true, }) => {
+    const baseClasses = 'py-1 px-3 rounded-sm focus:ring-0 disabled:pointer-events-none';
+    const classesByVariant = {
+        outline: 'text-sq-text-color border-sq-disabled-gray border-solid border hover:bg-sq-light-gray' +
+            ' focus:bg-sq-dark-gray active:bg-sq-dark-gray focus:border-sq-color-dark active:border-sq-color-dark',
+        theme: 'bg-sq-color-dark hover:bg-sq-color-highlight text-white disabled:bg-opacity-50',
+        danger: 'bg-sq-danger-color text-white hover:bg-sq-danger-color-hover disabled:bg-opacity-50',
+        'theme-light': 'bg-sq-icon text-white hover:bg-sq-link disabled:bg-opacity-50',
+        'no-border': '',
+        'warning': '',
+    };
+    const sizeClasses = {
+        sm: 'text-xs',
+        lg: 'text-xl',
+    };
+    const appliedClasses = baseClasses + ' ' + sizeClasses[size] + ' ' + classesByVariant[variant] + ' ' + extraClassNames;
+    return (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 }, label));
+};
+
+exports.Button = Button;
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../src/utils/browserId.ts","../src/Button/Button.tsx"],"sourcesContent":["/**\n * @exports the browser id (i.e., 'IE 11' 'Chrome 90')\n * @see http://stackoverflow.com/questions/2400935/browser-detection-in-javascript\n */\nexport const browserId: string = (function () {\n  let tem;\n  const ua = navigator.userAgent;\n  let M = ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\\/))\\/?\\s*(\\d+)/i) || [];\n  if (/trident/i.test(M[1])) {\n    tem = /\\brv[ :]+(\\d+)/g.exec(ua) || [];\n    return `IE ${tem[1] || ''}`;\n  }\n\n  if (M[1] === 'Chrome') {\n    tem = ua.match(/\\b(OPR|Edge?)\\/(\\d+)/);\n    if (tem !== null) {\n      return tem.slice(1).join(' ').replace('OPR', 'Opera').replace('Edg ', 'Edge ');\n    }\n  }\n\n  M = M[2] ? [M[1], M[2]] : [navigator.appName, navigator.appVersion, '-?'];\n  if ((tem = ua.match(/version\\/(\\d+)/i)) !== null) {\n    M.splice(1, 1, tem[1]);\n  }\n\n  return M.join(' ');\n})();\nexport const browserName = browserId && browserId.split(' ', 2)[0];\nexport const browserVersion = browserId && parseInt(browserId.split(' ', 2)[1], 10);\nexport const browserIsFirefox = browserId && browserName === 'Firefox';\nexport const browserIsEdgeBeforeChromium =\n  browserName && browserVersion && browserName === 'Edge' && browserVersion < 70;\n","import React from 'react';\nimport { ButtonProps } from './Button.types';\nimport '../styles.css';\nimport { browserIsFirefox } from '../utils/browserId';\n\nconst Button: React.FunctionComponent<ButtonProps> =\n  ({\n    onClick,\n    label,\n    variant = 'outline',\n    type = 'button',\n    size = 'sm',\n    disabled,\n    extraClassNames,\n    id,\n    testId,\n    stopPropagation = true,\n  }) => {\n    const baseClasses = 'py-1 px-3 rounded-sm focus:ring-0 disabled:pointer-events-none';\n    const classesByVariant = {\n      outline: 'text-sq-text-color border-sq-disabled-gray border-solid border hover:bg-sq-light-gray' +\n        ' focus:bg-sq-dark-gray active:bg-sq-dark-gray focus:border-sq-color-dark active:border-sq-color-dark',\n      theme: 'bg-sq-color-dark hover:bg-sq-color-highlight text-white disabled:bg-opacity-50',\n      danger: 'bg-sq-danger-color text-white hover:bg-sq-danger-color-hover disabled:bg-opacity-50',\n      'theme-light': 'bg-sq-icon text-white hover:bg-sq-link disabled:bg-opacity-50',\n      'no-border': '',\n      'warning': '',\n    };\n    const sizeClasses = {\n      sm: 'text-xs',\n      lg: 'text-xl',\n    };\n    const appliedClasses = baseClasses + ' ' + sizeClasses[size] + ' ' + classesByVariant[variant] + ' ' + extraClassNames;\n\n    return (\n      <button\n        id={id}\n        disabled={disabled}\n        data-testid={testId}\n        type={type === 'link' || (type === 'submit' && browserIsFirefox) ? 'button' : type}\n        onClick={(e) => {\n          stopPropagation && e.stopPropagation();\n          onClick && onClick();\n        }}\n        className={appliedClasses}>\n        {label}\n      </button>\n    );\n  };\nexport default Button;\n\n"],"names":[],"mappings":"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"}

package/dist/styles.css

@@ -0,0 +1,593 @@
+/*
+! tailwindcss v3.2.7 | MIT License | https://tailwindcss.com
+*//*
+1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
+2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
+*/
+
+*,
+::before,
+::after {
+  box-sizing: border-box; /* 1 */
+  border-width: 0; /* 2 */
+  border-style: solid; /* 2 */
+  border-color: #e5e7eb; /* 2 */
+}
+
+::before,
+::after {
+  --tw-content: '';
+}
+
+/*
+1. Use a consistent sensible line-height in all browsers.
+2. Prevent adjustments of font size after orientation changes in iOS.
+3. Use a more readable tab size.
+4. Use the user's configured `sans` font-family by default.
+5. Use the user's configured `sans` font-feature-settings by default.
+*/
+
+html {
+  line-height: 1.5; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+  -moz-tab-size: 4; /* 3 */
+  -o-tab-size: 4;
+     tab-size: 4; /* 3 */
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
+  font-feature-settings: normal; /* 5 */
+}
+
+/*
+1. Remove the margin in all browsers.
+2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
+*/
+
+body {
+  margin: 0; /* 1 */
+  line-height: inherit; /* 2 */
+}
+
+/*
+1. Add the correct height in Firefox.
+2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
+3. Ensure horizontal rules are visible by default.
+*/
+
+hr {
+  height: 0; /* 1 */
+  color: inherit; /* 2 */
+  border-top-width: 1px; /* 3 */
+}
+
+/*
+Add the correct text decoration in Chrome, Edge, and Safari.
+*/
+
+abbr:where([title]) {
+  -webkit-text-decoration: underline dotted;
+          text-decoration: underline dotted;
+}
+
+/*
+Remove the default font size and weight for headings.
+*/
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+/*
+Reset links to optimize for opt-in styling instead of opt-out.
+*/
+
+a {
+  color: inherit;
+  text-decoration: inherit;
+}
+
+/*
+Add the correct font weight in Edge and Safari.
+*/
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/*
+1. Use the user's configured `mono` font family by default.
+2. Correct the odd `em` font sizing in all browsers.
+*/
+
+code,
+kbd,
+samp,
+pre {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/*
+Add the correct font size in all browsers.
+*/
+
+small {
+  font-size: 80%;
+}
+
+/*
+Prevent `sub` and `sup` elements from affecting the line height in all browsers.
+*/
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/*
+1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
+2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
+3. Remove gaps between table borders by default.
+*/
+
+table {
+  text-indent: 0; /* 1 */
+  border-color: inherit; /* 2 */
+  border-collapse: collapse; /* 3 */
+}
+
+/*
+1. Change the font styles in all browsers.
+2. Remove the margin in Firefox and Safari.
+3. Remove default padding in all browsers.
+*/
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  font-weight: inherit; /* 1 */
+  line-height: inherit; /* 1 */
+  color: inherit; /* 1 */
+  margin: 0; /* 2 */
+  padding: 0; /* 3 */
+}
+
+/*
+Remove the inheritance of text transform in Edge and Firefox.
+*/
+
+button,
+select {
+  text-transform: none;
+}
+
+/*
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Remove default button styles.
+*/
+
+button,
+[type='button'],
+[type='reset'],
+[type='submit'] {
+  -webkit-appearance: button; /* 1 */
+  background-color: transparent; /* 2 */
+  background-image: none; /* 2 */
+}
+
+/*
+Use the modern Firefox focus style for all focusable elements.
+*/
+
+:-moz-focusring {
+  outline: auto;
+}
+
+/*
+Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
+*/
+
+:-moz-ui-invalid {
+  box-shadow: none;
+}
+
+/*
+Add the correct vertical alignment in Chrome and Firefox.
+*/
+
+progress {
+  vertical-align: baseline;
+}
+
+/*
+Correct the cursor style of increment and decrement buttons in Safari.
+*/
+
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/*
+1. Correct the odd appearance in Chrome and Safari.
+2. Correct the outline style in Safari.
+*/
+
+[type='search'] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/*
+Remove the inner padding in Chrome and Safari on macOS.
+*/
+
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/*
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Change font properties to `inherit` in Safari.
+*/
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/*
+Add the correct display in Chrome and Safari.
+*/
+
+summary {
+  display: list-item;
+}
+
+/*
+Removes the default spacing and border for appropriate elements.
+*/
+
+blockquote,
+dl,
+dd,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+figure,
+p,
+pre {
+  margin: 0;
+}
+
+fieldset {
+  margin: 0;
+  padding: 0;
+}
+
+legend {
+  padding: 0;
+}
+
+ol,
+ul,
+menu {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/*
+Prevent resizing textareas horizontally by default.
+*/
+
+textarea {
+  resize: vertical;
+}
+
+/*
+1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
+2. Set the default placeholder color to the user's configured gray 400 color.
+*/
+
+input::-moz-placeholder, textarea::-moz-placeholder {
+  opacity: 1; /* 1 */
+  color: #9ca3af; /* 2 */
+}
+
+input::placeholder,
+textarea::placeholder {
+  opacity: 1; /* 1 */
+  color: #9ca3af; /* 2 */
+}
+
+/*
+Set the default cursor for buttons.
+*/
+
+button,
+[role="button"] {
+  cursor: pointer;
+}
+
+/*
+Make sure disabled buttons don't get the pointer cursor.
+*/
+:disabled {
+  cursor: default;
+}
+
+/*
+1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
+2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
+   This can trigger a poorly considered lint error in some tools but is included by design.
+*/
+
+img,
+svg,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+  display: block; /* 1 */
+  vertical-align: middle; /* 2 */
+}
+
+/*
+Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
+*/
+
+img,
+video {
+  max-width: 100%;
+  height: auto;
+}
+
+/* Make elements with the HTML hidden attribute stay hidden by default */
+[hidden] {
+  display: none;
+}
+    :root {
+        --sq-color-dark: 42, 92, 132;
+        --sq-white: 255, 255, 255;
+        --sq-color-highlight: 4, 145, 194;
+        --sq-text-color: 58, 58, 58;
+        --sq-disabled-gray: 221, 225, 227;
+        --sq-light-gray: 241, 245, 247;
+        --sq-dark-gray: 226, 226, 226;
+        --sq-danger-color: 217, 83, 79;
+        --sq-icon: 4, 145, 194;
+        --sq-link: 42, 92, 132;
+    }
+
+    .color_topic {
+        --sq-color-dark: 42, 92, 132;
+        --sq-color-highlight: 4, 145, 194;
+        --sq-icon: 4, 145, 194;
+        --sq-link: 42, 92, 132;
+    }
+
+    .color_analysis {
+        --sq-color-dark: 66, 124, 99;
+        --sq-color-highlight: 66, 124, 99;
+        --sq-icon: 4, 145, 194;
+        --sq-link: 0, 121, 96;
+    }
+
+*, ::before, ::after {
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-pan-x:  ;
+  --tw-pan-y:  ;
+  --tw-pinch-zoom:  ;
+  --tw-scroll-snap-strictness: proximity;
+  --tw-ordinal:  ;
+  --tw-slashed-zero:  ;
+  --tw-numeric-figure:  ;
+  --tw-numeric-spacing:  ;
+  --tw-numeric-fraction:  ;
+  --tw-ring-inset:  ;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgb(59 130 246 / 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  --tw-blur:  ;
+  --tw-brightness:  ;
+  --tw-contrast:  ;
+  --tw-grayscale:  ;
+  --tw-hue-rotate:  ;
+  --tw-invert:  ;
+  --tw-saturate:  ;
+  --tw-sepia:  ;
+  --tw-drop-shadow:  ;
+  --tw-backdrop-blur:  ;
+  --tw-backdrop-brightness:  ;
+  --tw-backdrop-contrast:  ;
+  --tw-backdrop-grayscale:  ;
+  --tw-backdrop-hue-rotate:  ;
+  --tw-backdrop-invert:  ;
+  --tw-backdrop-opacity:  ;
+  --tw-backdrop-saturate:  ;
+  --tw-backdrop-sepia:  ;
+}
+
+::backdrop {
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-pan-x:  ;
+  --tw-pan-y:  ;
+  --tw-pinch-zoom:  ;
+  --tw-scroll-snap-strictness: proximity;
+  --tw-ordinal:  ;
+  --tw-slashed-zero:  ;
+  --tw-numeric-figure:  ;
+  --tw-numeric-spacing:  ;
+  --tw-numeric-fraction:  ;
+  --tw-ring-inset:  ;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgb(59 130 246 / 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  --tw-blur:  ;
+  --tw-brightness:  ;
+  --tw-contrast:  ;
+  --tw-grayscale:  ;
+  --tw-hue-rotate:  ;
+  --tw-invert:  ;
+  --tw-saturate:  ;
+  --tw-sepia:  ;
+  --tw-drop-shadow:  ;
+  --tw-backdrop-blur:  ;
+  --tw-backdrop-brightness:  ;
+  --tw-backdrop-contrast:  ;
+  --tw-backdrop-grayscale:  ;
+  --tw-backdrop-hue-rotate:  ;
+  --tw-backdrop-invert:  ;
+  --tw-backdrop-opacity:  ;
+  --tw-backdrop-saturate:  ;
+  --tw-backdrop-sepia:  ;
+}
+.rounded-sm {
+  border-radius: 0.125rem;
+}
+.border {
+  border-width: 1px;
+}
+.border-solid {
+  border-style: solid;
+}
+.border-sq-disabled-gray {
+  --tw-border-opacity: 1;
+  border-color: rgba(var(--sq-disabled-gray), var(--tw-border-opacity));
+}
+.bg-sq-color-dark {
+  --tw-bg-opacity: 1;
+  background-color: rgba(var(--sq-color-dark), var(--tw-bg-opacity));
+}
+.bg-sq-danger-color {
+  --tw-bg-opacity: 1;
+  background-color: rgba(var(--sq-danger-color), var(--tw-bg-opacity));
+}
+.bg-sq-icon {
+  --tw-bg-opacity: 1;
+  background-color: rgba(var(--sq-icon), var(--tw-bg-opacity));
+}
+.px-3 {
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+}
+.py-1 {
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+}
+.text-xl {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+}
+.text-xs {
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+.text-sq-text-color {
+  --tw-text-opacity: 1;
+  color: rgba(var(--sq-text-color), var(--tw-text-opacity));
+}
+.text-white {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+.outline {
+  outline-style: solid;
+}
+/* Heads up! Before these colors can be used you must also add them to the tailwind.config.cjs! */
+/* Make sure to keep these colors in sync with the webserver/_custom_variables.scss values to ensure cohesive UIs */
+.hover\:bg-sq-color-highlight:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgba(var(--sq-color-highlight), var(--tw-bg-opacity));
+}
+.hover\:bg-sq-danger-color-hover:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(212 59 55 / var(--tw-bg-opacity));
+}
+.hover\:bg-sq-light-gray:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgba(var(--sq-light-gray), var(--tw-bg-opacity));
+}
+.hover\:bg-sq-link:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgba(var(--sq-link), var(--tw-bg-opacity));
+}
+.focus\:border-sq-color-dark:focus {
+  --tw-border-opacity: 1;
+  border-color: rgba(var(--sq-color-dark), var(--tw-border-opacity));
+}
+.focus\:bg-sq-dark-gray:focus {
+  --tw-bg-opacity: 1;
+  background-color: rgba(var(--sq-dark-gray), var(--tw-bg-opacity));
+}
+.focus\:ring-0:focus {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+.active\:border-sq-color-dark:active {
+  --tw-border-opacity: 1;
+  border-color: rgba(var(--sq-color-dark), var(--tw-border-opacity));
+}
+.active\:bg-sq-dark-gray:active {
+  --tw-bg-opacity: 1;
+  background-color: rgba(var(--sq-dark-gray), var(--tw-bg-opacity));
+}
+.disabled\:pointer-events-none:disabled {
+  pointer-events: none;
+}
+.disabled\:bg-opacity-50:disabled {
+  --tw-bg-opacity: 0.5;
+}

package/dist/utils/browserId.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @exports the browser id (i.e., 'IE 11' 'Chrome 90')
+ * @see http://stackoverflow.com/questions/2400935/browser-detection-in-javascript
+ */
+export declare const browserId: string;
+export declare const browserName: string;
+export declare const browserVersion: number;
+export declare const browserIsFirefox: boolean;
+export declare const browserIsEdgeBeforeChromium: boolean;

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "@seeqdev/qomponents",
+  "version": "0.0.0",
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "TOOD"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "description": "A library that allows you to build native UIs ... TODO",
+  "scripts": {
+    "build": "rollup -c --bundleConfigAsCjs",
+    "watchRollup": "rollup -c --bundleConfigAsCjs --watch",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "dev": "ladle serve"
+  },
+  "author": "Seeq",
+  "license": "MIT",
+  "bugs": {
+    "url": "TODO"
+  },
+  "homepage": "TODO",
+  "peerDependencies": {
+    "react": ">=17.0.0",
+    "react-dom": ">=17.0.0"
+  },
+  "devDependencies": {
+    "@ladle/react": "2.9.0",
+    "@rollup/plugin-commonjs": "24.0.1",
+    "@rollup/plugin-node-resolve": "15.0.1",
+    "@testing-library/jest-dom": "5.16.5",
+    "@testing-library/react": "14.0.0",
+    "@types/jest": "29.4.0",
+    "@types/react": "18.0.28",
+    "@types/react-dom": "18.0.11",
+    "autoprefixer": "10.4.13",
+    "color": "4.2.3",
+    "identity-obj-proxy": "3.0.0",
+    "jest": "29.4.3",
+    "jest-environment-jsdom": "29.4.3",
+    "jest-junit": "15.0.0",
+    "jest-silent-reporter": "0.5.0",
+    "postcss-import": "^15.1.0",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "rollup": "3.17.2",
+    "rollup-plugin-copy": "3.4.0",
+    "rollup-plugin-peer-deps-external": "2.2.4",
+    "rollup-plugin-postcss": "4.0.2",
+    "rollup-plugin-typescript2": "0.34.1",
+    "tailwindcss": "3.2.7",
+    "ts-jest": "29.0.5",
+    "ts-node": "10.9.1",
+    "typescript": "4.9.5",
+    "typescript-strict-plugin": "2.1.0"
+  },
+  "dependencies": {
+    "postcss": "8.4.21"
+  }
+}