@seeqdev/qomponents 0.0.1 → 0.0.3

package/README.md

@@ -1,28 +1,48 @@
-# Seeq Qomponents - UNDER CONSTRUCTION
+<!-- markdownlint-disable-next-line -->
+<p align="center">
+  <img width="150" src="https://seeq.com/sites/default/files/seeq-content/seeq-logo-blue-web-33h.svg" alt="Seeq logo">
+</p>
+<h1 align="center">qomponents</h1>
 
-## Development
 
-Don't forget to add the component to your `index.ts` exports if you want the library to export the component!
+Seeq qomponents are a collection of UI components, including a Button, a TextField, an Icon, as well as a Tooltip
+React component (more coming soon!)
 
-To develop a qomponent and use the benefits of hot-reload for quick preview you can run:
+These components are used by Seeq's application and are made publicly available for Developers who want to expand
+the Seeq eco-system with their own plugins and add-ons without having to worry about creating a cohesive Seeq UX
+experience. Every component comes fully styled (and with dark mode support).
 
-```
-npm run dev
-```
+## Installation
 
-This will start Ladle and watch for changes in the qomponents directory.
+Seeq qomponents are available on npm.
 
-### Testing
+**npm:**
 
+```sh
+npm install @seeqdev/qomponents
 ```
-npm run test
+
+**yarn:**
+
+```sh
+yarn add @seeqdev/qomponents
 ```
 
-... or IntelliJ
+## Getting started with Seeq qomponents
 
-### Building
+Here is an example of a basic app using the `Button` component:
 
-Builds happen via gradle.
+```jsx
+import * as React from 'react';
+import {Button} from '@seeqdev/qomponents';
 
+function App() {
+  return <Button variant="theme" label="Seeq Rocks" />;
+}
+```
 
+To make sure all styles are properly applied be sure to inclue the qomponents css file in your main css file.
 
+```css
+@import '@seeqdev/qomponents/dist/styles.css';
+```

package/dist/Checkbox/Checkbox.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { CheckboxProps } from './Checkbox.types';
+import '../styles.css';
+/**
+ * Checkbox and Radio Box Component.
+ */
+export declare const Checkbox: React.FunctionComponent<CheckboxProps>;

package/dist/Checkbox/Checkbox.stories.d.ts

@@ -0,0 +1,5 @@
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const AllCheckboxes: () => JSX.Element;

package/dist/Checkbox/Checkbox.test.d.ts

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

package/dist/Checkbox/Checkbox.types.d.ts

@@ -0,0 +1,15 @@
+export interface CheckboxProps {
+    extraClassNames?: string;
+    extraLabelClassNames?: string;
+    type?: 'radio' | 'checkbox';
+    id?: string;
+    name?: string;
+    checked: boolean;
+    value?: string | number;
+    label?: string | React.ReactNode;
+    onChange?: React.ChangeEventHandler<FormControlElement>;
+    onKeyDown?: React.KeyboardEventHandler<FormControlElement>;
+    onClick?: React.MouseEventHandler<FormControlElement>;
+    disabled?: boolean;
+    testId?: string;
+}

package/dist/Checkbox/index.d.ts

@@ -0,0 +1 @@
+export { Checkbox as default } from './Checkbox';

package/dist/TextArea/TextArea.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { TextAreaProps } from './TextArea.types';
+import '../styles.css';
+/**
+ * TextArea.
+ */
+export declare const TextArea: React.FunctionComponent<TextAreaProps>;

package/dist/TextArea/TextArea.stories.d.ts

@@ -0,0 +1,5 @@
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const AllTextAreas: () => JSX.Element;

package/dist/TextArea/TextArea.test.d.ts

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

package/dist/TextArea/TextArea.types.d.ts

@@ -0,0 +1,26 @@
+export interface TextAreaProps {
+    /** extra class names to be placed on the TextArea component */
+    extraClassNames?: string;
+    /** id of TextArea */
+    id?: string;
+    /** name of TextArea */
+    name?: string;
+    /** function that will be called when TextArea value changes */
+    onChange?: React.ChangeEventHandler<FormControlElement>;
+    /** function that will be called on key up within the TextArea */
+    onKeyUp?: React.KeyboardEventHandler<FormControlElement>;
+    /** placeholder text displayed when TextArea is empty */
+    placeholder?: string;
+    /** set readonly to true if TextArea can not be edited */
+    readonly?: boolean;
+    /** specifies the visible number of lines in the TextArea */
+    rows?: number;
+    /** specifies the visible width of the TextArea */
+    cols?: number;
+    /** set this to true to focus the TextArea when page loads */
+    autofocus?: boolean;
+    /** id that will be used in the data-testid attribute on the TextArea */
+    testId?: string;
+    /** value of the TextArea */
+    value?: string | string[] | number;
+}

package/dist/TextArea/index.d.ts

@@ -0,0 +1 @@
+export { TextArea as default } from './TextArea';

package/dist/TextField/TextField.types.d.ts

@@ -1,4 +1,3 @@
-declare type FormControlElement = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
 export interface TextFieldProps {
     readonly?: boolean;
     onChange?: React.ChangeEventHandler<FormControlElement>;
@@ -13,4 +12,3 @@ export interface TextFieldProps {
     testId?: string;
     ref?: any;
 }
-export {};

package/dist/index.d.ts

@@ -1,6 +1,12 @@
 import Button from './Button';
 import TextField from './TextField';
+import Checkbox from './Checkbox';
+import TextArea from './TextArea';
 import Tooltip from './Tooltip';
+import Icon from './Icon';
 export { Button };
 export { TextField };
+export { TextArea };
 export { Tooltip };
+export { Checkbox };
+export { Icon };

package/dist/index.esm.js

@@ -69,7 +69,7 @@ const Icon = ({ onClick, icon, type = 'theme', extraClassNames, id, large, small
             : 'Icon with prop color must have type="color".';
         return React.createElement("div", { className: "tw-text-sq-danger-color" }, errorMessage);
     }
-    const colorClasses = {
+    const colorClassesThemeLight = {
         'theme': 'tw-text-sq-color-dark',
         'white': 'tw-text-white',
         'dark-gray': 'tw-text-sq-fairly-dark-gray',
@@ -84,9 +84,25 @@ const Icon = ({ onClick, icon, type = 'theme', extraClassNames, id, large, small
         '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' : ''} ${colorClasses[type]} ${onClick ? 'cursor-pointer' : ''} ${extraClassNames}`;
+    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);
 };
@@ -98,7 +114,15 @@ const Icon = ({ onClick, icon, type = 'theme', extraClassNames, id, large, small
  */
 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 textClassesByVariant = {
+    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',
@@ -106,25 +130,44 @@ const Button = ({ onClick, label, variant = 'outline', type = 'button', size = '
         'no-border': 'tw-text-sq-text-color',
         'warning': 'tw-text-white',
     };
-    const classesByVariant = {
-        'outline': 'tw-border-sq-disabled-gray tw-border-solid tw-border hover:tw-bg-sq-light-gray' +
+    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 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': 'tw-bg-sq-icon hover:tw-bg-sq-link disabled:tw-bg-opacity-50',
+        '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} ${sizeClasses[size]} ${classesByVariant[variant]} ${textClassesByVariant[variant]} ${extraClassNames}`;
+    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 ${textClassesByVariant[variant]}` : '', testId: `${id}_spinner` })),
+        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);
 };
@@ -162,15 +205,51 @@ const TextField = React.forwardRef((props, ref) => {
         }
     }, [value]);
     const baseClasses = 'tw-height-34 tw-leading-normal tw-outline-none tw-py-1 tw-px-3 tw-rounded-sm disabled:tw-pointer-events-none' +
-        ' disabled:tw-cursor-not-allowed tw-p-1 tw-border-sq-disabled-gray tw-border-solid tw-border' +
-        ' tw-text-sq-text-color focus:tw-border-sq-color-dark active:tw-border-sq-color-dark';
+        ' disabled:tw-cursor-not-allowed tw-p-1 tw-border-solid tw-border';
+    const darkTheme = 'dark:tw-border-sq-dark-disabled-gray dark:tw-bg-sq-dark-background dark:tw-text-sq-dark-text' +
+        ' dark:focus:tw-border-sq-color-dark-dark dark:active:tw-border-sq-color-dark-dark';
+    const lightTheme = 'tw-border-sq-disabled-gray tw-text-sq-text-color focus:tw-border-sq-color-dark active:tw-border-sq-color-dark';
     const sizeClasses = {
         sm: 'tw-text-sm',
         lg: 'tw-text-xl',
     };
-    const appliedClasses = `${baseClasses} ${sizeClasses[size]} ${extraClassNames}`;
+    const appliedClasses = `${baseClasses} ${sizeClasses[size]} ${extraClassNames} ${lightTheme} ${darkTheme}`;
     return (React.createElement("input", { ref: setAllRefs, "data-testid": testId, name: name, id: id, type: type, value: value, className: appliedClasses, placeholder: placeholder, disabled: readonly, autoComplete: "none", onChange: handleChange, onKeyUp: onKeyUp }));
 });
 
-export { Button, TextField, Tooltip };
+const alignment = 'tw-flex tw-items-center';
+const labelClasses = 'tw-ml-1.5 tw-text-sm';
+const baseClasses$1 = '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$1}`;
+const radioClasses = `tw-form-radio ${baseClasses$1}`;
+/**
+ * Checkbox and Radio Box Component.
+ */
+const Checkbox = (props) => {
+    const { type = 'checkbox', value, disabled = false, label, onChange, onClick, onKeyDown, checked, 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, 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)));
+};
+
+const baseClasses = 'tw-leading-normal tw-outline-none tw-py-1 tw-px-3 tw-rounded-sm' +
+    ' disabled:tw-cursor-not-allowed tw-p-1 tw-border-solid tw-border';
+const darkTheme = 'dark:tw-border-sq-dark-disabled-gray dark:tw-bg-sq-dark-background dark:tw-text-sq-dark-text' +
+    ' dark:focus:tw-border-sq-color-dark-dark dark:active:tw-border-sq-color-dark-dark';
+const lightTheme = 'tw-border-sq-disabled-gray tw-text-sq-text-color focus:tw-border-sq-color-dark active:tw-border-sq-color-dark';
+/**
+ * TextArea.
+ */
+const TextArea = ({ readonly = false, onChange, onKeyUp, id, name, rows = 3, cols = undefined, value, placeholder, extraClassNames, testId, autofocus = false, }) => {
+    const appliedClasses = `${baseClasses} ${extraClassNames} ${lightTheme} ${darkTheme}`;
+    return (React.createElement("textarea", { "data-testid": testId, name: name, id: id, value: value, className: appliedClasses, placeholder: placeholder, disabled: readonly, onChange: onChange, onKeyUp: onKeyUp, rows: rows, cols: cols, autoFocus: autofocus }));
+};
+
+export { Button, Checkbox, Icon, TextArea, TextField, Tooltip };
 //# sourceMappingURL=index.esm.js.map

package/dist/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":["../src/utils/browserId.ts","../src/Tooltip/Tooltip.types.ts","../src/Tooltip/Tooltip.tsx","../src/Icon/Icon.tsx","../src/Button/Button.tsx","../src/TextField/TextField.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","export const DEFAULT_TOOL_TIP_DELAY = 1000;\nexport const tooltipPositions = ['top', 'left', 'right', 'bottom'] as const;\n\nexport type TooltipPosition = typeof tooltipPositions[number];\n\nexport interface TooltipProps {\n  position?: TooltipPosition;\n  children?: JSX.Element | string;\n  text: JSX.Element | string;\n  delay?: number;\n}\n","import React from 'react';\nimport '../styles.css';\nimport { DEFAULT_TOOL_TIP_DELAY, TooltipProps } from './Tooltip.types';\n\n/**\n * This component displays a Tooltip for the provided children.\n */\nexport const Tooltip: React.FunctionComponent<TooltipProps> = ({\n  position = 'bottom',\n  children,\n  text,\n  delay = DEFAULT_TOOL_TIP_DELAY,\n}) => {\n  const arrowBaseClasses = \"before:tw-content-[''] before:tw-absolute before:tw-border-8\";\n  const centerArrowVertically = 'before:tw-top-1/2 before:-tw-translate-y-1/2';\n  const centerArrowHorizontally = 'before:tw-left-1/2 before:-tw-translate-x-1/2';\n  const arrowRight = `${arrowBaseClasses} ${centerArrowVertically} before:tw-right-[100%] before:tw-border-y-transparent \n  before:tw-border-l-transparent before:tw-border-r-black`;\n\n  const arrowLeft = `${arrowBaseClasses} ${centerArrowVertically} before:tw-left-[100%] before:tw-border-y-transparent\n   before:tw-border-l-black before:tw-border-r-transparent`;\n\n  const arrowBottom = `${arrowBaseClasses} ${centerArrowHorizontally} before:-tw-top-4 before:tw-border-b-black \n  before:tw-border-r-transparent before:tw-border-l-transparent before:tw-border-t-transparent`;\n  const arrowTop = `${arrowBaseClasses} ${centerArrowHorizontally} before:-tw-bottom-4 before:tw-border-b-transparent \n  before:tw-border-t-black before:tw-border-l-transparent before:tw-border-r-transparent`;\n\n  const placements = {\n    top: `-tw-top-2 -tw-translate-y-full tw-left-1/2 -tw-translate-x-1/2 ${arrowTop}`,\n    left: `-tw-translate-x-full -tw-left-3 -tw-translate-y-1/2 tw-top-1/2 ${arrowLeft}`,\n    right: `tw-translate-x-full -tw-right-3 -tw-translate-y-1/2 tw-top-1/2 ${arrowRight}`,\n    bottom: `-tw-bottom-2 tw-translate-y-full tw-left-1/2 -tw-translate-x-1/2 ${arrowBottom}`,\n  };\n\n  return (\n    <div className=\"tw-group tw-relative tw-inline-block\">\n      {children}\n      <div\n        className={`tw-z-50 tw-whitespace-nowrap tw-hidden group-hover:tw-inline-block group-hover:tw-delay-[${delay}ms] \n        tw-absolute tw-opacity-0 group-hover:tw-opacity-100 tw-rounded tw-bg-black tw-p-2 tw-text-xs tw-text-white ${placements[position]}`}>\n        {text}\n      </div>\n    </div>\n  );\n};\n","import React from 'react';\nimport '../styles.css';\nimport { IconProps } from './Icon.types';\nimport Tooltip from '../Tooltip';\n\n/**\n * Icon:\n *  - access to Seeq custom icons by providing the desired icon\n *  - leverage \"type\" to style your icon\n */\nconst Icon: React.FunctionComponent<IconProps> = ({\n  onClick,\n  icon,\n  type = 'theme',\n  extraClassNames,\n  id,\n  large,\n  small,\n  color,\n  testId,\n  customId,\n  tooltip,\n  tooltipDelay,\n  tooltipPlacement,\n  number,\n  hasExternalTooltipHandler = false,\n}) => {\n  if ((type === 'color' && (color === undefined || color === '')) || (color && type !== 'color')) {\n    const errorMessage =\n      color === undefined || color === ''\n        ? 'Icon with type=\"color\" must have prop color specified.'\n        : 'Icon with prop color must have type=\"color\".';\n    return <div className=\"tw-text-sq-danger-color\">{errorMessage}</div>;\n  }\n\n  const colorClasses = {\n    'theme': 'tw-text-sq-color-dark',\n    'white': 'tw-text-white',\n    'dark-gray': 'tw-text-sq-fairly-dark-gray',\n    'warning': 'tw-text-sq-warning-color',\n    'darkish-gray': 'tw-text-sq-darkish-gray',\n    'gray': 'tw-text-sq-disabled-gray',\n    'color': '',\n    'info': 'tw-text-sq-link',\n    'text': 'tw-text-sq-text-color',\n    'inherit': '',\n    'danger': 'tw-text-sq-danger-color',\n    'theme-light': 'tw-text-sq-color-light',\n    'success': 'tw-text-sq-success-color',\n  };\n\n  const iconPrefix = icon.startsWith('fc') ? 'fc' : 'fa';\n  const style = type === 'color' && color ? { color } : {};\n  const appliedClassNames = `${iconPrefix} ${icon} ${small ? 'fa-sm' : ''} ${large ? 'fa-lg' : ''} ${\n    colorClasses[type]\n  } ${onClick ? 'cursor-pointer' : ''} ${extraClassNames}`;\n\n  const iconTag = (\n    <i\n      className={appliedClassNames}\n      style={style}\n      onClick={onClick}\n      data-testid={testId}\n      data-customid={customId}\n      id={id}\n      data-number={number}\n    />\n  );\n\n  return !hasExternalTooltipHandler && tooltip && tooltip !== '' ? (\n    <Tooltip text={tooltip} delay={tooltipDelay} position={tooltipPlacement}>\n      {iconTag}\n    </Tooltip>\n  ) : (\n    iconTag\n  );\n};\nexport default Icon;\n","import React from 'react';\nimport { ButtonProps } from './Button.types';\nimport '../styles.css';\nimport { browserIsFirefox } from '../utils/browserId';\nimport Tooltip from '../Tooltip';\nimport Icon from '../Icon';\n\n/**\n * All-in-one Button:\n *  - use \"variant\" to achieve the desired style\n *  - include tooltips and/or icons\n */\nconst Button: React.FunctionComponent<ButtonProps> = ({\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  tooltip,\n  tooltipOptions,\n  iconStyle = 'text',\n  icon,\n  iconColor,\n}) => {\n  const baseClasses = 'tw-py-1 tw-px-2.5 tw-rounded-sm focus:tw-ring-0 disabled:tw-pointer-events-none';\n  const textClassesByVariant = {\n    'outline': 'tw-text-sq-text-color',\n    'theme': 'tw-text-white',\n    'theme-light': 'tw-text-white',\n    'danger': 'tw-text-white',\n    'no-border': 'tw-text-sq-text-color',\n    'warning': 'tw-text-white',\n  };\n  const classesByVariant = {\n    'outline':\n      'tw-border-sq-disabled-gray tw-border-solid tw-border hover:tw-bg-sq-light-gray' +\n      ' focus:tw-bg-sq-dark-gray active:tw-bg-sq-dark-gray focus:tw-border-sq-color-dark active:tw-border-sq-color-dark',\n    'theme': 'tw-bg-sq-color-dark hover:tw-bg-sq-color-highlight disabled:tw-bg-opacity-50',\n    'danger': 'tw-bg-sq-danger-color hover:tw-bg-sq-danger-color-hover disabled:tw-bg-opacity-50',\n    'theme-light': 'tw-bg-sq-icon hover:tw-bg-sq-link disabled:tw-bg-opacity-50',\n    'no-border': '',\n    'warning': 'tw-bg-sq-warning-color',\n  };\n  const sizeClasses = {\n    sm: 'tw-text-sm',\n    lg: 'tw-text-xl',\n  };\n  const appliedClasses = `${baseClasses} ${sizeClasses[size]} ${classesByVariant[variant]} ${textClassesByVariant[variant]} ${extraClassNames}`;\n\n  const button = (\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      {icon && (\n        <Icon\n          icon={icon}\n          type={iconStyle}\n          color={iconColor}\n          extraClassNames={label ? `tw-mr-1 ${textClassesByVariant[variant]}` : ''}\n          testId={`${id}_spinner`}\n        />\n      )}\n      {label}\n    </button>\n  );\n\n  return tooltip ? (\n    <Tooltip text={tooltip} {...tooltipOptions}>\n      {button}\n    </Tooltip>\n  ) : (\n    button\n  );\n};\nexport default Button;\n","import React, { useEffect, useRef, useState } from 'react';\nimport { TextFieldProps } from './TextField.types';\nimport '../styles.css';\n\n/**\n * Textfield.\n */\nexport const TextField: React.FunctionComponent<TextFieldProps> = React.forwardRef<HTMLInputElement, TextFieldProps>(\n  (props, ref: any) => {\n    const {\n      readonly = false,\n      onChange,\n      onKeyUp,\n      id,\n      name,\n      size = 'sm',\n      value,\n      placeholder,\n      extraClassNames,\n      testId,\n      type = 'text',\n    } = props;\n\n    const internalRef = useRef<HTMLInputElement | null>(null);\n    const [cursor, setCursor] = useState(null);\n\n    const setAllRefs = (receivedRef: any) => {\n      if (ref) ref.current = receivedRef;\n      internalRef.current = receivedRef;\n    };\n\n    useEffect(() => {\n      const input = internalRef.current! as unknown as HTMLInputElement;\n      if (input) input.setSelectionRange(cursor, cursor);\n    }, [ref, cursor, value]);\n\n    const handleChange = (e: any) => {\n      setCursor(e.target.selectionStart);\n      onChange && onChange(e);\n    };\n\n    useEffect(() => {\n      /**\n       * we need to change the value only if it's different since the internal state of \"input\" will change it anyway\n       * this will only be the case when the value has been changed externally via store (undo / redo)\n       */\n      if (value !== null && value !== undefined && value !== internalRef.current?.value && internalRef.current) {\n        // we need to use this method because using the value props directly will switch the input to a \"controlled\"\n        // component\n        internalRef.current.value = `${value}`;\n      }\n    }, [value]);\n\n    const baseClasses =\n      'tw-height-34 tw-leading-normal tw-outline-none tw-py-1 tw-px-3 tw-rounded-sm disabled:tw-pointer-events-none' +\n      ' disabled:tw-cursor-not-allowed tw-p-1 tw-border-sq-disabled-gray tw-border-solid tw-border' +\n      ' tw-text-sq-text-color focus:tw-border-sq-color-dark active:tw-border-sq-color-dark';\n\n    const sizeClasses = {\n      sm: 'tw-text-sm',\n      lg: 'tw-text-xl',\n    };\n\n    const appliedClasses = `${baseClasses} ${sizeClasses[size]} ${extraClassNames}`;\n\n    return (\n      <input\n        ref={setAllRefs}\n        data-testid={testId}\n        name={name}\n        id={id}\n        type={type}\n        value={value}\n        className={appliedClasses}\n        placeholder={placeholder}\n        disabled={readonly}\n        autoComplete=\"none\"\n        onChange={handleChange}\n        onKeyUp={onKeyUp}\n      />\n    );\n  },\n);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.esm.js","sources":["../src/utils/browserId.ts","../src/Tooltip/Tooltip.types.ts","../src/Tooltip/Tooltip.tsx","../src/Icon/Icon.tsx","../src/Button/Button.tsx","../src/TextField/TextField.tsx","../src/Checkbox/Checkbox.tsx","../src/TextArea/TextArea.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","export const DEFAULT_TOOL_TIP_DELAY = 1000;\nexport const tooltipPositions = ['top', 'left', 'right', 'bottom'] as const;\n\nexport type TooltipPosition = typeof tooltipPositions[number];\n\nexport interface TooltipProps {\n  position?: TooltipPosition;\n  children?: JSX.Element | string;\n  text: JSX.Element | string;\n  delay?: number;\n}\n","import React from 'react';\nimport '../styles.css';\nimport { DEFAULT_TOOL_TIP_DELAY, TooltipProps } from './Tooltip.types';\n\n/**\n * This component displays a Tooltip for the provided children.\n */\nexport const Tooltip: React.FunctionComponent<TooltipProps> = ({\n  position = 'bottom',\n  children,\n  text,\n  delay = DEFAULT_TOOL_TIP_DELAY,\n}) => {\n  const arrowBaseClasses = \"before:tw-content-[''] before:tw-absolute before:tw-border-8\";\n  const centerArrowVertically = 'before:tw-top-1/2 before:-tw-translate-y-1/2';\n  const centerArrowHorizontally = 'before:tw-left-1/2 before:-tw-translate-x-1/2';\n  const arrowRight = `${arrowBaseClasses} ${centerArrowVertically} before:tw-right-[100%] before:tw-border-y-transparent \n  before:tw-border-l-transparent before:tw-border-r-black`;\n\n  const arrowLeft = `${arrowBaseClasses} ${centerArrowVertically} before:tw-left-[100%] before:tw-border-y-transparent\n   before:tw-border-l-black before:tw-border-r-transparent`;\n\n  const arrowBottom = `${arrowBaseClasses} ${centerArrowHorizontally} before:-tw-top-4 before:tw-border-b-black \n  before:tw-border-r-transparent before:tw-border-l-transparent before:tw-border-t-transparent`;\n  const arrowTop = `${arrowBaseClasses} ${centerArrowHorizontally} before:-tw-bottom-4 before:tw-border-b-transparent \n  before:tw-border-t-black before:tw-border-l-transparent before:tw-border-r-transparent`;\n\n  const placements = {\n    top: `-tw-top-2 -tw-translate-y-full tw-left-1/2 -tw-translate-x-1/2 ${arrowTop}`,\n    left: `-tw-translate-x-full -tw-left-3 -tw-translate-y-1/2 tw-top-1/2 ${arrowLeft}`,\n    right: `tw-translate-x-full -tw-right-3 -tw-translate-y-1/2 tw-top-1/2 ${arrowRight}`,\n    bottom: `-tw-bottom-2 tw-translate-y-full tw-left-1/2 -tw-translate-x-1/2 ${arrowBottom}`,\n  };\n\n  return (\n    <div className=\"tw-group tw-relative tw-inline-block\">\n      {children}\n      <div\n        className={`tw-z-50 tw-whitespace-nowrap tw-hidden group-hover:tw-inline-block group-hover:tw-delay-[${delay}ms] \n        tw-absolute tw-opacity-0 group-hover:tw-opacity-100 tw-rounded tw-bg-black tw-p-2 tw-text-xs tw-text-white ${placements[position]}`}>\n        {text}\n      </div>\n    </div>\n  );\n};\n","import React from 'react';\nimport '../styles.css';\nimport { IconProps } from './Icon.types';\nimport Tooltip from '../Tooltip';\n\n/**\n * Icon:\n *  - access to Seeq custom icons by providing the desired icon\n *  - leverage \"type\" to style your icon\n */\nconst Icon: React.FunctionComponent<IconProps> = ({\n  onClick,\n  icon,\n  type = 'theme',\n  extraClassNames,\n  id,\n  large,\n  small,\n  color,\n  testId,\n  customId,\n  tooltip,\n  tooltipDelay,\n  tooltipPlacement,\n  number,\n  hasExternalTooltipHandler = false,\n}) => {\n  if ((type === 'color' && (color === undefined || color === '')) || (color && type !== 'color')) {\n    const errorMessage =\n      color === undefined || color === ''\n        ? 'Icon with type=\"color\" must have prop color specified.'\n        : 'Icon with prop color must have type=\"color\".';\n    return <div className=\"tw-text-sq-danger-color\">{errorMessage}</div>;\n  }\n\n  const colorClassesThemeLight = {\n    'theme': 'tw-text-sq-color-dark',\n    'white': 'tw-text-white',\n    'dark-gray': 'tw-text-sq-fairly-dark-gray',\n    'warning': 'tw-text-sq-warning-color',\n    'darkish-gray': 'tw-text-sq-darkish-gray',\n    'gray': 'tw-text-sq-disabled-gray',\n    'color': '',\n    'info': 'tw-text-sq-link',\n    'text': 'tw-text-sq-text-color',\n    'inherit': '',\n    'danger': 'tw-text-sq-danger-color',\n    'theme-light': 'tw-text-sq-color-light',\n    'success': 'tw-text-sq-success-color',\n  };\n\n  const colorClassesThemeDark = {\n    'theme': 'dark:tw-text-sq-color-dark-dark',\n    'white': '',\n    'dark-gray': 'tw-text-sq-fairly-dark-gray',\n    'warning': '',\n    'darkish-gray': 'tw-text-sq-darkish-gray',\n    'gray': 'dark:tw-text-sq-dark-disabled-gray',\n    'color': '',\n    'info': 'dark:tw-text-sq-link-dark',\n    'text': 'dark:tw-text-sq-dark-text',\n    'inherit': '',\n    'danger': 'tw-text-sq-danger-color',\n    'theme-light': 'tw-text-sq-color-light',\n    'success': 'tw-text-sq-success-color',\n  };\n\n  const iconPrefix = icon.startsWith('fc') ? 'fc' : 'fa';\n  const style = type === 'color' && color ? { color } : {};\n  const appliedClassNames = `${iconPrefix} ${icon} ${small ? 'fa-sm' : ''} ${large ? 'fa-lg' : ''} \n  ${colorClassesThemeLight[type]} ${colorClassesThemeDark[type]} ${onClick ? 'cursor-pointer' : ''} ${extraClassNames}`;\n\n  const iconTag = (\n    <i\n      className={appliedClassNames}\n      style={style}\n      onClick={onClick}\n      data-testid={testId}\n      data-customid={customId}\n      id={id}\n      data-number={number}\n    />\n  );\n\n  return !hasExternalTooltipHandler && tooltip && tooltip !== '' ? (\n    <Tooltip text={tooltip} delay={tooltipDelay} position={tooltipPlacement}>\n      {iconTag}\n    </Tooltip>\n  ) : (\n    iconTag\n  );\n};\nexport default Icon;\n","import React from 'react';\nimport { ButtonProps } from './Button.types';\nimport '../styles.css';\nimport { browserIsFirefox } from '../utils/browserId';\nimport Tooltip from '../Tooltip';\nimport Icon from '../Icon';\n\n/**\n * All-in-one Button:\n *  - use \"variant\" to achieve the desired style\n *  - include tooltips and/or icons\n */\nconst Button: React.FunctionComponent<ButtonProps> = ({\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  tooltip,\n  tooltipOptions,\n  iconStyle = 'text',\n  icon,\n  iconColor,\n}) => {\n  const baseClasses = 'tw-py-1 tw-px-2.5 tw-rounded-sm focus:tw-ring-0 disabled:tw-pointer-events-none';\n  const baseClassesByVariant = {\n    'outline':\n      'tw-border-solid tw-border',\n    'theme': 'disabled:tw-bg-opacity-50',\n    'danger': 'tw-bg-sq-danger-color hover:tw-bg-sq-danger-color-hover disabled:tw-bg-opacity-50',\n    'theme-light': 'disabled:tw-bg-opacity-50',\n    'no-border': '',\n    'warning': 'tw-bg-sq-warning-color',\n  };\n  const textClassesByVariantLightTheme = {\n    'outline': 'tw-text-sq-text-color',\n    'theme': 'tw-text-white',\n    'theme-light': 'tw-text-white',\n    'danger': 'tw-text-white',\n    'no-border': 'tw-text-sq-text-color',\n    'warning': 'tw-text-white',\n  };\n  const textClassesByVariantDarkTheme = {\n    'outline': 'dark:tw-text-sq-dark-text',\n    'theme': 'dark:tw-text-white',\n    'theme-light': 'dark:tw-text-white',\n    'danger': 'dark:tw-text-white',\n    'no-border': 'dark:tw-text-sq-dark-text',\n    'warning': 'dark:tw-text-white',\n  };\n\n  const classesByVariantLightTheme = {\n    'outline':\n      'tw-border-sq-disabled-gray hover:tw-bg-sq-light-gray' +\n      ' focus:tw-bg-sq-dark-gray active:tw-bg-sq-dark-gray focus:tw-border-sq-color-dark active:tw-border-sq-color-dark',\n    'theme': 'tw-bg-sq-color-dark hover:tw-bg-sq-color-highlight',\n    'danger': '',\n    'theme-light': 'tw-bg-sq-icon hover:tw-bg-sq-link',\n    'no-border': '',\n    'warning': 'tw-bg-sq-warning-color',\n  };\n\n  const classesByVariantDarkTheme = {\n    'outline':\n      'dark:tw-border-sq-dark-disabled-gray dark:hover:tw-bg-sq-highlight-color-dark' +\n      ' dark:focus:tw-bg-sq-dark-gray dark:active:tw-bg-sq-dark-gray dark:focus:tw-border-sq-color-dark' +\n      ' dark:active:tw-border-sq-color-dark',\n    'theme': 'dark:tw-bg-sq-color-dark dark:hover:tw-bg-sq-color-highlight',\n    'danger': '',\n    'theme-light': 'dark:tw-bg-sq-icon-dark dark:hover:tw-bg-sq-link-dark',\n    'no-border': '',\n    'warning': '',\n  };\n  const sizeClasses = {\n    sm: 'tw-text-sm',\n    lg: 'tw-text-xl',\n  };\n  const appliedClasses = `${baseClasses} ${baseClassesByVariant[variant]} ${sizeClasses[size]} ${classesByVariantLightTheme[variant]} ${classesByVariantDarkTheme[variant]} ${textClassesByVariantLightTheme[variant]} ${textClassesByVariantDarkTheme[variant]} ${extraClassNames}`;\n\n  const button = (\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      {icon && (\n        <Icon\n          icon={icon}\n          type={iconStyle}\n          color={iconColor}\n          extraClassNames={label ?\n            `tw-mr-1 ${textClassesByVariantLightTheme[variant]}  ${textClassesByVariantDarkTheme[variant]}` : ''}\n          testId={`${id}_spinner`}\n        />\n      )}\n      {label}\n    </button>\n  );\n\n  return tooltip ? (\n    <Tooltip text={tooltip} {...tooltipOptions}>\n      {button}\n    </Tooltip>\n  ) : (\n    button\n  );\n};\nexport default Button;\n","import React, { useEffect, useRef, useState } from 'react';\nimport { TextFieldProps } from './TextField.types';\nimport '../styles.css';\n\n/**\n * Textfield.\n */\nexport const TextField: React.FunctionComponent<TextFieldProps> = React.forwardRef<HTMLInputElement, TextFieldProps>(\n  (props, ref: any) => {\n    const {\n      readonly = false,\n      onChange,\n      onKeyUp,\n      id,\n      name,\n      size = 'sm',\n      value,\n      placeholder,\n      extraClassNames,\n      testId,\n      type = 'text',\n    } = props;\n\n    const internalRef = useRef<HTMLInputElement | null>(null);\n    const [cursor, setCursor] = useState(null);\n\n    const setAllRefs = (receivedRef: any) => {\n      if (ref) ref.current = receivedRef;\n      internalRef.current = receivedRef;\n    };\n\n    useEffect(() => {\n      const input = internalRef.current! as unknown as HTMLInputElement;\n      if (input) input.setSelectionRange(cursor, cursor);\n    }, [ref, cursor, value]);\n\n    const handleChange = (e: any) => {\n      setCursor(e.target.selectionStart);\n      onChange && onChange(e);\n    };\n\n    useEffect(() => {\n      /**\n       * we need to change the value only if it's different since the internal state of \"input\" will change it anyway\n       * this will only be the case when the value has been changed externally via store (undo / redo)\n       */\n      if (value !== null && value !== undefined && value !== internalRef.current?.value && internalRef.current) {\n        // we need to use this method because using the value props directly will switch the input to a \"controlled\"\n        // component\n        internalRef.current.value = `${value}`;\n      }\n    }, [value]);\n\n    const baseClasses =\n      'tw-height-34 tw-leading-normal tw-outline-none tw-py-1 tw-px-3 tw-rounded-sm disabled:tw-pointer-events-none' +\n      ' disabled:tw-cursor-not-allowed tw-p-1 tw-border-solid tw-border';\n\n    const darkTheme = 'dark:tw-border-sq-dark-disabled-gray dark:tw-bg-sq-dark-background dark:tw-text-sq-dark-text' +\n      ' dark:focus:tw-border-sq-color-dark-dark dark:active:tw-border-sq-color-dark-dark';\n    const lightTheme = 'tw-border-sq-disabled-gray tw-text-sq-text-color focus:tw-border-sq-color-dark active:tw-border-sq-color-dark';\n\n    const sizeClasses = {\n      sm: 'tw-text-sm',\n      lg: 'tw-text-xl',\n    };\n\n    const appliedClasses = `${baseClasses} ${sizeClasses[size]} ${extraClassNames} ${lightTheme} ${darkTheme}`;\n\n    return (\n      <input\n        ref={setAllRefs}\n        data-testid={testId}\n        name={name}\n        id={id}\n        type={type}\n        value={value}\n        className={appliedClasses}\n        placeholder={placeholder}\n        disabled={readonly}\n        autoComplete=\"none\"\n        onChange={handleChange}\n        onKeyUp={onKeyUp}\n      />\n    );\n  },\n);\n","import React from 'react';\nimport { CheckboxProps } from './Checkbox.types';\nimport '../styles.css';\n\nconst alignment = 'tw-flex tw-items-center';\nconst labelClasses = 'tw-ml-1.5 tw-text-sm';\n\nconst baseClasses =\n  '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' +\n  '  dark:tw-bg-sq-dark-background dark:tw-border-sq-dark-text dark:checked:tw-bg-sq-dark-text' +\n  '  checked:tw-text-sq-text-color' +\n  ' disabled:tw-text-sq-fairly-dark-gray';\n\nconst checkboxClasses = `tw-form-checkbox tw-rounded ${baseClasses}`;\n\nconst radioClasses = `tw-form-radio ${baseClasses}`;\n\n/**\n * Checkbox and Radio Box Component.\n */\nexport const Checkbox: React.FunctionComponent<CheckboxProps> = (props) => {\n  const {\n    type = 'checkbox',\n    value,\n    disabled = false,\n    label,\n    onChange,\n    onClick,\n    onKeyDown,\n    checked,\n    id,\n    name,\n    extraClassNames,\n    extraLabelClassNames,\n    testId,\n  } = props;\n\n  const assignedId = id ?? 'checkbox_' + Math.random();\n\n  return (\n    <span className={`${alignment} ${extraClassNames}`}>\n      <input\n        value={value}\n        type={type}\n        data-testid={testId}\n        name={name}\n        id={assignedId}\n        checked={checked}\n        className={`${type === 'checkbox' ? checkboxClasses : radioClasses} ${\n          disabled ? 'tw-cursor-not-allowed' : 'tw-cursor-pointer'\n        }`}\n        disabled={disabled}\n        onClick={onClick}\n        onChange={onChange}\n        onKeyDown={onKeyDown}\n      />\n      <label\n        htmlFor={assignedId}\n        className={`${labelClasses} ${extraLabelClassNames} ${\n          disabled\n            ? 'tw-cursor-not-allowed dark:tw-text-sq-fairly-dark-gray tw-text-sq-fairly-dark-gray'\n            : 'tw-cursor-pointer tw-text-sq-text-color dark:tw-text-sq-dark-text'\n        }`}>\n        {label}\n      </label>\n    </span>\n  );\n};\n","import React from 'react';\nimport { TextAreaProps } from './TextArea.types';\nimport '../styles.css';\n\nconst baseClasses =\n  'tw-leading-normal tw-outline-none tw-py-1 tw-px-3 tw-rounded-sm' +\n  ' disabled:tw-cursor-not-allowed tw-p-1 tw-border-solid tw-border';\n\nconst darkTheme =\n  'dark:tw-border-sq-dark-disabled-gray dark:tw-bg-sq-dark-background dark:tw-text-sq-dark-text' +\n  ' dark:focus:tw-border-sq-color-dark-dark dark:active:tw-border-sq-color-dark-dark';\nconst lightTheme =\n  'tw-border-sq-disabled-gray tw-text-sq-text-color focus:tw-border-sq-color-dark active:tw-border-sq-color-dark';\n\n/**\n * TextArea.\n */\nexport const TextArea: React.FunctionComponent<TextAreaProps> = ({\n  readonly = false,\n  onChange,\n  onKeyUp,\n  id,\n  name,\n  rows = 3,\n  cols = undefined,\n  value,\n  placeholder,\n  extraClassNames,\n  testId,\n  autofocus = false,\n}) => {\n  const appliedClasses = `${baseClasses} ${extraClassNames} ${lightTheme} ${darkTheme}`;\n\n  return (\n    <textarea\n      data-testid={testId}\n      name={name}\n      id={id}\n      value={value}\n      className={appliedClasses}\n      placeholder={placeholder}\n      disabled={readonly}\n      onChange={onChange}\n      onKeyUp={onKeyUp}\n      rows={rows}\n      cols={cols}\n      autoFocus={autofocus}\n    />\n  );\n};\n"],"names":["baseClasses"],"mappings":"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"}

package/dist/index.js

@@ -71,7 +71,7 @@ const Icon = ({ onClick, icon, type = 'theme', extraClassNames, id, large, small
             : 'Icon with prop color must have type="color".';
         return React.createElement("div", { className: "tw-text-sq-danger-color" }, errorMessage);
     }
-    const colorClasses = {
+    const colorClassesThemeLight = {
         'theme': 'tw-text-sq-color-dark',
         'white': 'tw-text-white',
         'dark-gray': 'tw-text-sq-fairly-dark-gray',
@@ -86,9 +86,25 @@ const Icon = ({ onClick, icon, type = 'theme', extraClassNames, id, large, small
         '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' : ''} ${colorClasses[type]} ${onClick ? 'cursor-pointer' : ''} ${extraClassNames}`;
+    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);
 };
@@ -100,7 +116,15 @@ const Icon = ({ onClick, icon, type = 'theme', extraClassNames, id, large, small
  */
 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 textClassesByVariant = {
+    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',
@@ -108,25 +132,44 @@ const Button = ({ onClick, label, variant = 'outline', type = 'button', size = '
         'no-border': 'tw-text-sq-text-color',
         'warning': 'tw-text-white',
     };
-    const classesByVariant = {
-        'outline': 'tw-border-sq-disabled-gray tw-border-solid tw-border hover:tw-bg-sq-light-gray' +
+    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 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': 'tw-bg-sq-icon hover:tw-bg-sq-link disabled:tw-bg-opacity-50',
+        '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} ${sizeClasses[size]} ${classesByVariant[variant]} ${textClassesByVariant[variant]} ${extraClassNames}`;
+    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 ${textClassesByVariant[variant]}` : '', testId: `${id}_spinner` })),
+        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);
 };
@@ -164,17 +207,56 @@ const TextField = React.forwardRef((props, ref) => {
         }
     }, [value]);
     const baseClasses = 'tw-height-34 tw-leading-normal tw-outline-none tw-py-1 tw-px-3 tw-rounded-sm disabled:tw-pointer-events-none' +
-        ' disabled:tw-cursor-not-allowed tw-p-1 tw-border-sq-disabled-gray tw-border-solid tw-border' +
-        ' tw-text-sq-text-color focus:tw-border-sq-color-dark active:tw-border-sq-color-dark';
+        ' disabled:tw-cursor-not-allowed tw-p-1 tw-border-solid tw-border';
+    const darkTheme = 'dark:tw-border-sq-dark-disabled-gray dark:tw-bg-sq-dark-background dark:tw-text-sq-dark-text' +
+        ' dark:focus:tw-border-sq-color-dark-dark dark:active:tw-border-sq-color-dark-dark';
+    const lightTheme = 'tw-border-sq-disabled-gray tw-text-sq-text-color focus:tw-border-sq-color-dark active:tw-border-sq-color-dark';
     const sizeClasses = {
         sm: 'tw-text-sm',
         lg: 'tw-text-xl',
     };
-    const appliedClasses = `${baseClasses} ${sizeClasses[size]} ${extraClassNames}`;
+    const appliedClasses = `${baseClasses} ${sizeClasses[size]} ${extraClassNames} ${lightTheme} ${darkTheme}`;
     return (React.createElement("input", { ref: setAllRefs, "data-testid": testId, name: name, id: id, type: type, value: value, className: appliedClasses, placeholder: placeholder, disabled: readonly, autoComplete: "none", onChange: handleChange, onKeyUp: onKeyUp }));
 });
 
+const alignment = 'tw-flex tw-items-center';
+const labelClasses = 'tw-ml-1.5 tw-text-sm';
+const baseClasses$1 = '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$1}`;
+const radioClasses = `tw-form-radio ${baseClasses$1}`;
+/**
+ * Checkbox and Radio Box Component.
+ */
+const Checkbox = (props) => {
+    const { type = 'checkbox', value, disabled = false, label, onChange, onClick, onKeyDown, checked, 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, 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)));
+};
+
+const baseClasses = 'tw-leading-normal tw-outline-none tw-py-1 tw-px-3 tw-rounded-sm' +
+    ' disabled:tw-cursor-not-allowed tw-p-1 tw-border-solid tw-border';
+const darkTheme = 'dark:tw-border-sq-dark-disabled-gray dark:tw-bg-sq-dark-background dark:tw-text-sq-dark-text' +
+    ' dark:focus:tw-border-sq-color-dark-dark dark:active:tw-border-sq-color-dark-dark';
+const lightTheme = 'tw-border-sq-disabled-gray tw-text-sq-text-color focus:tw-border-sq-color-dark active:tw-border-sq-color-dark';
+/**
+ * TextArea.
+ */
+const TextArea = ({ readonly = false, onChange, onKeyUp, id, name, rows = 3, cols = undefined, value, placeholder, extraClassNames, testId, autofocus = false, }) => {
+    const appliedClasses = `${baseClasses} ${extraClassNames} ${lightTheme} ${darkTheme}`;
+    return (React.createElement("textarea", { "data-testid": testId, name: name, id: id, value: value, className: appliedClasses, placeholder: placeholder, disabled: readonly, onChange: onChange, onKeyUp: onKeyUp, rows: rows, cols: cols, autoFocus: autofocus }));
+};
+
 exports.Button = Button;
+exports.Checkbox = Checkbox;
+exports.Icon = Icon;
+exports.TextArea = TextArea;
 exports.TextField = TextField;
 exports.Tooltip = Tooltip;
 //# sourceMappingURL=index.js.map