@seeqdev/qomponents 0.0.1 → 0.0.2

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/Button/Button.js

@@ -10,7 +10,15 @@ import Icon from '../Icon';
  */
 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',
@@ -18,25 +26,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);
 };

package/dist/Button/Button.js.map

@@ -1 +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,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,gBAAgB,GAAG;QACvB,SAAS,EACP,gFAAgF;YAChF,kHAAkH;QACpH,OAAO,EAAE,8EAA8E;QACvF,QAAQ,EAAE,mFAAmF;QAC7F,aAAa,EAAE,6DAA6D;QAC5E,WAAW,EAAE,EAAE;QACf,SAAS,EAAE,wBAAwB;KACpC,CAAC;IACF,MAAM,WAAW,GAAG;QAClB,EAAE,EAAE,YAAY;QAChB,EAAE,EAAE,YAAY;KACjB,CAAC;IACF,MAAM,cAAc,GAAG,GAAG,WAAW,IAAI,WAAW,CAAC,IAAI,CAAC,IAAI,gBAAgB,CAAC,OAAO,CAAC,IAAI,oBAAoB,CAAC,OAAO,CAAC,IAAI,eAAe,EAAE,CAAC;IAE9I,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,CAAC,WAAW,oBAAoB,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,EACxE,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"}
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../src/Button/Button.tsx"],"names":[],"mappings":"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"}

package/dist/Button/Button.stories.js

@@ -5,8 +5,11 @@ 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-p-4" },
-        React.createElement(Button, { label: `Variant: ${variant}`, onClick: () => { }, variant: variant }))))));
+    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"),
@@ -19,8 +22,11 @@ export const AllButtonVariants = () => {
             renderAllVariations())));
 };
 export const ButtonWithTooltip = () => {
-    const renderButtonWithTooltip = () => (React.createElement("div", { className: "tw-p-4" },
-        React.createElement(Button, { tooltip: "Helpful tooltip", variant: "theme", label: "Hover me" })));
+    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"),
@@ -33,8 +39,11 @@ export const ButtonWithTooltip = () => {
             renderButtonWithTooltip())));
 };
 export const ButtonWithIcon = () => {
-    const renderButtonWithIcon = () => (React.createElement("div", { className: "tw-p-4" },
-        React.createElement(Button, { icon: "fc-search-power", variant: "theme", label: "With Icon" })));
+    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"),

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

@@ -1 +1 @@
-{"version":3,"file":"Button.stories.js","sourceRoot":"","sources":["../../src/Button/Button.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,UAAU,CAAC;AAC9B,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAEhD,eAAe;IACb,KAAK,EAAE,QAAQ;CAChB,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,EAAE;IACpC,MAAM,mBAAmB,GAAG,GAAG,EAAE,CAAC,CAChC,0CACG,cAAc,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,CAC/B,6BAAK,GAAG,EAAE,YAAY,OAAO,EAAE,EAAE,SAAS,EAAC,QAAQ;QACjD,oBAAC,MAAM,IAAC,KAAK,EAAE,YAAY,OAAO,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,GAAE,CAAC,EAAE,OAAO,EAAE,OAAO,GAAI,CACzE,CACP,CAAC,CACD,CACJ,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;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,EAAE;IACpC,MAAM,uBAAuB,GAAG,GAAG,EAAE,CAAC,CACpC,6BAAK,SAAS,EAAC,QAAQ;QACrB,oBAAC,MAAM,IAAC,OAAO,EAAC,iBAAiB,EAAC,OAAO,EAAC,OAAO,EAAC,KAAK,EAAC,UAAU,GAAG,CACjE,CACP,CAAC;IACF,OAAO,CACL,6BAAK,SAAS,EAAC,iCAAiC;QAC9C,6BAAK,SAAS,EAAC,aAAa;YAC1B,8CAAmB;YAClB,uBAAuB,EAAE,CACtB;QAEN,6BAAK,SAAS,EAAC,gBAAgB;YAC7B,iDAAsB;YACrB,uBAAuB,EAAE,CACtB;QAEN,6BAAK,SAAS,EAAC,eAAe;YAC5B,gDAAqB;YACpB,uBAAuB,EAAE,CACtB,CACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,EAAE;IACjC,MAAM,oBAAoB,GAAG,GAAG,EAAE,CAAC,CACjC,6BAAK,SAAS,EAAC,QAAQ;QACrB,oBAAC,MAAM,IAAC,IAAI,EAAC,iBAAiB,EAAC,OAAO,EAAC,OAAO,EAAC,KAAK,EAAC,WAAW,GAAG,CAC/D,CACP,CAAC;IACF,OAAO,CACL,6BAAK,SAAS,EAAC,iCAAiC;QAC9C,6BAAK,SAAS,EAAC,aAAa;YAC1B,8CAAmB;YAClB,oBAAoB,EAAE,CACnB;QAEN,6BAAK,SAAS,EAAC,gBAAgB;YAC7B,iDAAsB;YACrB,oBAAoB,EAAE,CACnB;QAEN,6BAAK,SAAS,EAAC,eAAe;YAC5B,gDAAqB;YACpB,oBAAoB,EAAE,CACnB,CACF,CACP,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"Button.stories.js","sourceRoot":"","sources":["../../src/Button/Button.stories.tsx"],"names":[],"mappings":"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"}

package/dist/Icon/Icon.js

@@ -13,7 +13,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',
@@ -28,9 +28,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);
 };

package/dist/Icon/Icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.js","sourceRoot":"","sources":["../../src/Icon/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,eAAe,CAAC;AAEvB,OAAO,OAAO,MAAM,YAAY,CAAC;AAEjC;;;;GAIG;AACH,MAAM,IAAI,GAAuC,CAAC,EAChD,OAAO,EACP,IAAI,EACJ,IAAI,GAAG,OAAO,EACd,eAAe,EACf,EAAE,EACF,KAAK,EACL,KAAK,EACL,KAAK,EACL,MAAM,EACN,QAAQ,EACR,OAAO,EACP,YAAY,EACZ,gBAAgB,EAChB,MAAM,EACN,yBAAyB,GAAG,KAAK,GAClC,EAAE,EAAE;IACH,IAAI,CAAC,IAAI,KAAK,OAAO,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,KAAK,OAAO,CAAC,EAAE;QAC9F,MAAM,YAAY,GAChB,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,EAAE;YACjC,CAAC,CAAC,wDAAwD;YAC1D,CAAC,CAAC,8CAA8C,CAAC;QACrD,OAAO,6BAAK,SAAS,EAAC,yBAAyB,IAAE,YAAY,CAAO,CAAC;KACtE;IAED,MAAM,YAAY,GAAG;QACnB,OAAO,EAAE,uBAAuB;QAChC,OAAO,EAAE,eAAe;QACxB,WAAW,EAAE,6BAA6B;QAC1C,SAAS,EAAE,0BAA0B;QACrC,cAAc,EAAE,yBAAyB;QACzC,MAAM,EAAE,0BAA0B;QAClC,OAAO,EAAE,EAAE;QACX,MAAM,EAAE,iBAAiB;QACzB,MAAM,EAAE,uBAAuB;QAC/B,SAAS,EAAE,EAAE;QACb,QAAQ,EAAE,yBAAyB;QACnC,aAAa,EAAE,wBAAwB;QACvC,SAAS,EAAE,0BAA0B;KACtC,CAAC;IAEF,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC;IACvD,MAAM,KAAK,GAAG,IAAI,KAAK,OAAO,IAAI,KAAK,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;IACzD,MAAM,iBAAiB,GAAG,GAAG,UAAU,IAAI,IAAI,IAAI,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,IAAI,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,IAC7F,YAAY,CAAC,IAAI,CACnB,IAAI,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE,IAAI,eAAe,EAAE,CAAC;IAEzD,MAAM,OAAO,GAAG,CACd,2BACE,SAAS,EAAE,iBAAiB,EAC5B,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,iBACH,MAAM,mBACJ,QAAQ,EACvB,EAAE,EAAE,EAAE,iBACO,MAAM,GACnB,CACH,CAAC;IAEF,OAAO,CAAC,yBAAyB,IAAI,OAAO,IAAI,OAAO,KAAK,EAAE,CAAC,CAAC,CAAC,CAC/D,oBAAC,OAAO,IAAC,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,YAAY,EAAE,QAAQ,EAAE,gBAAgB,IACpE,OAAO,CACA,CACX,CAAC,CAAC,CAAC,CACF,OAAO,CACR,CAAC;AACJ,CAAC,CAAC;AACF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Icon.js","sourceRoot":"","sources":["../../src/Icon/Icon.tsx"],"names":[],"mappings":"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"}

package/dist/Icon/Icon.stories.js

@@ -15,9 +15,14 @@ export const AllIcons = () => {
                         "type=",
                         iconType),
                     React.createElement("br", 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", 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)));
             })));
     };

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

@@ -1 +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,oBAAC,IAAI,IACH,IAAI,EAAE,kBAAkB,EACxB,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;oBACF,oBAAC,IAAI,IACH,IAAI,EAAE,kBAAkB,EACxB,eAAe,EAAE,QAAQ,EACzB,IAAI,EAAE,QAAQ,EACd,KAAK,EAAE,QAAQ,KAAK,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,GACnD;oBACF,oBAAC,IAAI,IACH,IAAI,EAAE,kBAAkB,EACxB,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;oBACF,+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"}
+{"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,EAAE,kBAAkB,EACxB,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,EAAE,kBAAkB,EACxB,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,EAAE,kBAAkB,EACxB,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,EAAE,kBAAkB,EACxB,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,EAAE,kBAAkB,EACxB,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,EAAE,kBAAkB,EACxB,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"}

package/dist/TextField/TextField.js

@@ -33,13 +33,15 @@ export 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 }));
 });
 //# sourceMappingURL=TextField.js.map

package/dist/TextField/TextField.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.js","sourceRoot":"","sources":["../../src/TextField/TextField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE3D,OAAO,eAAe,CAAC;AAEvB;;GAEG;AACH,MAAM,CAAC,MAAM,SAAS,GAA4C,KAAK,CAAC,UAAU,CAChF,CAAC,KAAK,EAAE,GAAQ,EAAE,EAAE;IAClB,MAAM,EACJ,QAAQ,GAAG,KAAK,EAChB,QAAQ,EACR,OAAO,EACP,EAAE,EACF,IAAI,EACJ,IAAI,GAAG,IAAI,EACX,KAAK,EACL,WAAW,EACX,eAAe,EACf,MAAM,EACN,IAAI,GAAG,MAAM,GACd,GAAG,KAAK,CAAC;IAEV,MAAM,WAAW,GAAG,MAAM,CAA0B,IAAI,CAAC,CAAC;IAC1D,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAE3C,MAAM,UAAU,GAAG,CAAC,WAAgB,EAAE,EAAE;QACtC,IAAI,GAAG;YAAE,GAAG,CAAC,OAAO,GAAG,WAAW,CAAC;QACnC,WAAW,CAAC,OAAO,GAAG,WAAW,CAAC;IACpC,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,KAAK,GAAG,WAAW,CAAC,OAAuC,CAAC;QAClE,IAAI,KAAK;YAAE,KAAK,CAAC,iBAAiB,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACrD,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC;IAEzB,MAAM,YAAY,GAAG,CAAC,CAAM,EAAE,EAAE;QAC9B,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC;QACnC,QAAQ,IAAI,QAAQ,CAAC,CAAC,CAAC,CAAC;IAC1B,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb;;;WAGG;QACH,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,WAAW,CAAC,OAAO,EAAE,KAAK,IAAI,WAAW,CAAC,OAAO,EAAE;YACxG,4GAA4G;YAC5G,YAAY;YACZ,WAAW,CAAC,OAAO,CAAC,KAAK,GAAG,GAAG,KAAK,EAAE,CAAC;SACxC;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,MAAM,WAAW,GACf,8GAA8G;QAC9G,6FAA6F;QAC7F,qFAAqF,CAAC;IAExF,MAAM,WAAW,GAAG;QAClB,EAAE,EAAE,YAAY;QAChB,EAAE,EAAE,YAAY;KACjB,CAAC;IAEF,MAAM,cAAc,GAAG,GAAG,WAAW,IAAI,WAAW,CAAC,IAAI,CAAC,IAAI,eAAe,EAAE,CAAC;IAEhF,OAAO,CACL,+BACE,GAAG,EAAE,UAAU,iBACF,MAAM,EACnB,IAAI,EAAE,IAAI,EACV,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,cAAc,EACzB,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAC,MAAM,EACnB,QAAQ,EAAE,YAAY,EACtB,OAAO,EAAE,OAAO,GAChB,CACH,CAAC;AACJ,CAAC,CACF,CAAC"}
+{"version":3,"file":"TextField.js","sourceRoot":"","sources":["../../src/TextField/TextField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE3D,OAAO,eAAe,CAAC;AAEvB;;GAEG;AACH,MAAM,CAAC,MAAM,SAAS,GAA4C,KAAK,CAAC,UAAU,CAChF,CAAC,KAAK,EAAE,GAAQ,EAAE,EAAE;IAClB,MAAM,EACJ,QAAQ,GAAG,KAAK,EAChB,QAAQ,EACR,OAAO,EACP,EAAE,EACF,IAAI,EACJ,IAAI,GAAG,IAAI,EACX,KAAK,EACL,WAAW,EACX,eAAe,EACf,MAAM,EACN,IAAI,GAAG,MAAM,GACd,GAAG,KAAK,CAAC;IAEV,MAAM,WAAW,GAAG,MAAM,CAA0B,IAAI,CAAC,CAAC;IAC1D,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAE3C,MAAM,UAAU,GAAG,CAAC,WAAgB,EAAE,EAAE;QACtC,IAAI,GAAG;YAAE,GAAG,CAAC,OAAO,GAAG,WAAW,CAAC;QACnC,WAAW,CAAC,OAAO,GAAG,WAAW,CAAC;IACpC,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,KAAK,GAAG,WAAW,CAAC,OAAuC,CAAC;QAClE,IAAI,KAAK;YAAE,KAAK,CAAC,iBAAiB,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACrD,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC;IAEzB,MAAM,YAAY,GAAG,CAAC,CAAM,EAAE,EAAE;QAC9B,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC;QACnC,QAAQ,IAAI,QAAQ,CAAC,CAAC,CAAC,CAAC;IAC1B,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb;;;WAGG;QACH,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,WAAW,CAAC,OAAO,EAAE,KAAK,IAAI,WAAW,CAAC,OAAO,EAAE;YACxG,4GAA4G;YAC5G,YAAY;YACZ,WAAW,CAAC,OAAO,CAAC,KAAK,GAAG,GAAG,KAAK,EAAE,CAAC;SACxC;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,MAAM,WAAW,GACf,8GAA8G;QAC9G,kEAAkE,CAAC;IAErE,MAAM,SAAS,GAAG,8FAA8F;QAC9G,mFAAmF,CAAC;IACtF,MAAM,UAAU,GAAG,+GAA+G,CAAC;IAEnI,MAAM,WAAW,GAAG;QAClB,EAAE,EAAE,YAAY;QAChB,EAAE,EAAE,YAAY;KACjB,CAAC;IAEF,MAAM,cAAc,GAAG,GAAG,WAAW,IAAI,WAAW,CAAC,IAAI,CAAC,IAAI,eAAe,IAAI,UAAU,IAAI,SAAS,EAAE,CAAC;IAE3G,OAAO,CACL,+BACE,GAAG,EAAE,UAAU,iBACF,MAAM,EACnB,IAAI,EAAE,IAAI,EACV,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,cAAc,EACzB,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAC,MAAM,EACnB,QAAQ,EAAE,YAAY,EACtB,OAAO,EAAE,OAAO,GAChB,CACH,CAAC;AACJ,CAAC,CACF,CAAC"}

package/dist/TextField/TextField.stories.js

@@ -4,13 +4,21 @@ export default {
     title: 'TextField',
 };
 export const AllTextFields = () => {
-    const renderAllVariations = () => (React.createElement("div", { className: "tw-p-4" },
-        React.createElement("div", { className: "tw-p-4" },
-            React.createElement(TextField, { value: "value provided" })),
-        React.createElement("div", { className: "tw-p-4" },
-            React.createElement(TextField, { placeholder: "placeholder text" })),
-        React.createElement("div", { className: "tw-p-4" },
-            React.createElement(TextField, { value: "read-only", readonly: true }))));
+    const renderAllVariations = () => (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: "tw-p-4 light" },
+            React.createElement("div", { className: "tw-p-4" },
+                React.createElement(TextField, { value: "value provided" })),
+            React.createElement("div", { className: "tw-p-4" },
+                React.createElement(TextField, { placeholder: "placeholder text" })),
+            React.createElement("div", { className: "tw-p-4" },
+                React.createElement(TextField, { value: "read-only", readonly: true }))),
+        React.createElement("div", { className: "tw-p-4 tw-dark tw-bg-sq-dark-background" },
+            React.createElement("div", { className: "tw-p-4" },
+                React.createElement(TextField, { value: "value provided" })),
+            React.createElement("div", { className: "tw-p-4" },
+                React.createElement(TextField, { placeholder: "placeholder text" })),
+            React.createElement("div", { className: "tw-p-4" },
+                React.createElement(TextField, { value: "read-only", readonly: true })))));
     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"),

package/dist/TextField/TextField.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.stories.js","sourceRoot":"","sources":["../../src/TextField/TextField.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,eAAe;IACb,KAAK,EAAE,WAAW;CACnB,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,EAAE;IAChC,MAAM,mBAAmB,GAAG,GAAG,EAAE,CAAC,CAChC,6BAAK,SAAS,EAAC,QAAQ;QACrB,6BAAK,SAAS,EAAC,QAAQ;YACrB,oBAAC,SAAS,IAAC,KAAK,EAAC,gBAAgB,GAAG,CAChC;QACN,6BAAK,SAAS,EAAC,QAAQ;YACrB,oBAAC,SAAS,IAAC,WAAW,EAAC,kBAAkB,GAAG,CACxC;QACN,6BAAK,SAAS,EAAC,QAAQ;YACrB,oBAAC,SAAS,IAAC,KAAK,EAAC,WAAW,EAAC,QAAQ,EAAE,IAAI,GAAI,CAC3C,CACF,CACP,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"}
+{"version":3,"file":"TextField.stories.js","sourceRoot":"","sources":["../../src/TextField/TextField.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,eAAe;IACb,KAAK,EAAE,WAAW;CACnB,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,EAAE;IAChC,MAAM,mBAAmB,GAAG,GAAG,EAAE,CAAC,CAAC;QAC/B,6BAAK,SAAS,EAAC,cAAc;YAC3B,6BAAK,SAAS,EAAC,QAAQ;gBACrB,oBAAC,SAAS,IAAC,KAAK,EAAC,gBAAgB,GAAG,CAChC;YACN,6BAAK,SAAS,EAAC,QAAQ;gBACrB,oBAAC,SAAS,IAAC,WAAW,EAAC,kBAAkB,GAAG,CACxC;YACN,6BAAK,SAAS,EAAC,QAAQ;gBACrB,oBAAC,SAAS,IAAC,KAAK,EAAC,WAAW,EAAC,QAAQ,EAAE,IAAI,GAAI,CAC3C,CACF;QAEN,6BAAK,SAAS,EAAC,yCAAyC;YACtD,6BAAK,SAAS,EAAC,QAAQ;gBACrB,oBAAC,SAAS,IAAC,KAAK,EAAC,gBAAgB,GAAG,CAChC;YACN,6BAAK,SAAS,EAAC,QAAQ;gBACrB,oBAAC,SAAS,IAAC,WAAW,EAAC,kBAAkB,GAAG,CACxC;YACN,6BAAK,SAAS,EAAC,QAAQ;gBACrB,oBAAC,SAAS,IAAC,KAAK,EAAC,WAAW,EAAC,QAAQ,EAAE,IAAI,GAAI,CAC3C,CACF,CACL,CACJ,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"}

package/dist/index.d.ts

@@ -1,6 +1,8 @@
 import Button from './Button';
 import TextField from './TextField';
 import Tooltip from './Tooltip';
+import Icon from './Icon';
 export { Button };
 export { TextField };
 export { Tooltip };
+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,17 @@ 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 };
+export { Button, Icon, 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"],"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"],"names":[],"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,20 @@ 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 }));
 });
 
 exports.Button = Button;
+exports.Icon = Icon;
 exports.TextField = TextField;
 exports.Tooltip = Tooltip;
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.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":["useRef","useState","useEffect"],"mappings":"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"}
+{"version":3,"file":"index.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 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"],"names":["useRef","useState","useEffect"],"mappings":"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"}

package/dist/styles.css

@@ -1457,6 +1457,7 @@ video {
 
 :root {
         --sq-color-dark: 42, 92, 132;
+        --sq-color-dark-dark: 145, 180, 203;
         --sq-white: 255, 255, 255;
         --sq-color-highlight: 4, 145, 194;
         --sq-text-color: 58, 58, 58;
@@ -1470,26 +1471,37 @@ video {
         --sq-success-color: 114, 192, 44;
         --sq-icon: 4, 145, 194;
         --sq-link: 42, 92, 132;
+        --sq-dark-background: 36, 37, 37;
+        --sq-dark-text: 194, 188, 176;
+        --sq-dark-disabled-gray: 70, 73, 73;
+        --sq-highlight-color-dark: 36, 45, 49;
     }
 
 .color_topic {
         --sq-color-dark: 42, 92, 132;
+        --sq-color-dark-dark: 145, 180, 203;
         --sq-color-light: 237, 247, 246;
         --sq-color-highlight: 4, 145, 194;
         --sq-icon: 4, 145, 194;
         --sq-link: 42, 92, 132;
+        --sq-link-dark: 145, 180, 203;
+        --sq-icon-dark: 4, 145, 194;
     }
 
 .color_analysis {
         --sq-color-dark: 0, 121, 96;
+        --sq-color-dark-dark: 31, 207, 166;
         --sq-color-light: 237, 247, 246;
         --sq-color-highlight: 0, 153, 100;
         --sq-icon: 0, 160, 89;
         --sq-link: 0, 121, 96;
+        --sq-link-dark: 21, 99, 81;
+        --sq-icon-dark: 23, 126, 77;
     }
 
 .color_datalab {
         --sq-color-dark: 242, 103, 34;
+        --sq-color-dark-dark: 242, 103, 34;
         --sq-color-light: 237, 247, 246;
         --sq-color-highlight: 244, 123, 62;
         --sq-icon: 242, 103, 34;
@@ -1672,6 +1684,10 @@ video {
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.tw-grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
 .tw-grid-cols-3 {
     grid-template-columns: repeat(3, minmax(0, 1fr));
 }
@@ -1724,6 +1740,11 @@ video {
     background-color: rgba(var(--sq-danger-color), var(--tw-bg-opacity));
 }
 
+.tw-bg-sq-dark-background {
+    --tw-bg-opacity: 1;
+    background-color: rgba(var(--sq-dark-background), var(--tw-bg-opacity));
+}
+
 .tw-bg-sq-icon {
     --tw-bg-opacity: 1;
     background-color: rgba(var(--sq-icon), var(--tw-bg-opacity));
@@ -2031,3 +2052,93 @@ video {
     opacity: 1;
 }
 
+.tw-dark .dark\:tw-border-sq-dark-disabled-gray {
+    --tw-border-opacity: 1;
+    border-color: rgba(var(--sq-dark-disabled-gray), var(--tw-border-opacity));
+}
+
+.tw-dark .dark\:tw-bg-sq-color-dark {
+    --tw-bg-opacity: 1;
+    background-color: rgba(var(--sq-color-dark), var(--tw-bg-opacity));
+}
+
+.tw-dark .dark\:tw-bg-sq-dark-background {
+    --tw-bg-opacity: 1;
+    background-color: rgba(var(--sq-dark-background), var(--tw-bg-opacity));
+}
+
+.tw-dark .dark\:tw-bg-sq-icon-dark {
+    --tw-bg-opacity: 1;
+    background-color: rgba(var(--sq-icon-dark), var(--tw-bg-opacity));
+}
+
+.tw-dark .dark\:tw-text-sq-color-dark-dark {
+    --tw-text-opacity: 1;
+    color: rgba(var(--sq-color-dark-dark), var(--tw-text-opacity));
+}
+
+.tw-dark .dark\:tw-text-sq-dark-disabled-gray {
+    --tw-text-opacity: 1;
+    color: rgba(var(--sq-dark-disabled-gray), var(--tw-text-opacity));
+}
+
+.tw-dark .dark\:tw-text-sq-dark-text {
+    --tw-text-opacity: 1;
+    color: rgba(var(--sq-dark-text), var(--tw-text-opacity));
+}
+
+.tw-dark .dark\:tw-text-sq-link-dark {
+    --tw-text-opacity: 1;
+    color: rgba(var(--sq-link-dark), var(--tw-text-opacity));
+}
+
+.tw-dark .dark\:tw-text-white {
+    --tw-text-opacity: 1;
+    color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
+.tw-dark .dark\:hover\:tw-bg-sq-color-highlight:hover {
+    --tw-bg-opacity: 1;
+    background-color: rgba(var(--sq-color-highlight), var(--tw-bg-opacity));
+}
+
+.tw-dark .dark\:hover\:tw-bg-sq-highlight-color-dark:hover {
+    --tw-bg-opacity: 1;
+    background-color: rgba(var(--sq-highlight-color-dark), var(--tw-bg-opacity));
+}
+
+.tw-dark .dark\:hover\:tw-bg-sq-link-dark:hover {
+    --tw-bg-opacity: 1;
+    background-color: rgba(var(--sq-link-dark), var(--tw-bg-opacity));
+}
+
+.tw-dark .dark\:focus\:tw-border-sq-color-dark:focus {
+    --tw-border-opacity: 1;
+    border-color: rgba(var(--sq-color-dark), var(--tw-border-opacity));
+}
+
+.tw-dark .dark\:focus\:tw-border-sq-color-dark-dark:focus {
+    --tw-border-opacity: 1;
+    border-color: rgba(var(--sq-color-dark-dark), var(--tw-border-opacity));
+}
+
+.tw-dark .dark\:focus\:tw-bg-sq-dark-gray:focus {
+    --tw-bg-opacity: 1;
+    background-color: rgba(var(--sq-dark-gray), var(--tw-bg-opacity));
+}
+
+.tw-dark .dark\:active\:tw-border-sq-color-dark:active {
+    --tw-border-opacity: 1;
+    border-color: rgba(var(--sq-color-dark), var(--tw-border-opacity));
+}
+
+.tw-dark .dark\:active\:tw-border-sq-color-dark-dark:active {
+    --tw-border-opacity: 1;
+    border-color: rgba(var(--sq-color-dark-dark), var(--tw-border-opacity));
+}
+
+.tw-dark .dark\:active\:tw-bg-sq-dark-gray:active {
+    --tw-bg-opacity: 1;
+    background-color: rgba(var(--sq-dark-gray), var(--tw-bg-opacity));
+}
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seeqdev/qomponents",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",