@hazelcast/ui 3.0.1-canary.0 → 3.0.1-canary.2

package/lib/components/Toast.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.js","sources":["../../src/components/Toast.tsx"],"sourcesContent":[null],"names":["ToastIcon","success","icon","CheckCircle","ariaLabel","info","Info","warning","AlertTriangle","critical","AlertCircle","Toast","type","content","dismissableByEscKey","closeToast","className","dataTest","closeByEsc","useCallback","nativeEvent","stopImmediatePropagation","useKey","escKeyFilterPredicate","options","once","React","createElement","cn","styles","toast","Icon","IconButton","kind","close","X","onClick"],"mappings":";;;;;;;;;;;AAmBO,MAAMA,SAAS,GAAgD;AACpEC,EAAAA,OAAO,EAAE;AACPC,IAAAA,IAAI,EAAEC,wBAAW;AACjBC,IAAAA,SAAS,EAAE;GACZ;AACDC,EAAAA,IAAI,EAAE;AACJH,IAAAA,IAAI,EAAEI,iBAAI;AACVF,IAAAA,SAAS,EAAE;GACZ;AACDG,EAAAA,OAAO,EAAE;AACPL,IAAAA,IAAI,EAAEM,0BAAa;AACnBJ,IAAAA,SAAS,EAAE;GACZ;AACDK,EAAAA,QAAQ,EAAE;AACRP,IAAAA,IAAI,EAAEQ,wBAAW;AACjBN,IAAAA,SAAS,EAAE;AACZ;;AAWH;;;;;;;;;AASG;AACI,MAAMO,KAAK,GAAmBA,CAAC;EACpCC,IAAI;EACJC,OAAO;AACPC,EAAAA,mBAAmB,GAAG,IAAI;EAC1BC,UAAU;EACVC,SAAS;EACT,WAAW,EAAEC,QAAQ,GAAG;AAAO,CAChC,KAAI;EACH,MAAM;IAAEf,IAAI;AAAEE,IAAAA;AAAS,GAAE,GAAGJ,SAAS,CAACY,IAAI,CAAC;AAE3C,EAAA,MAAMM,UAAU,GAAGC,iBAAW,CAC3BC,WAA0B,IAAI;AAC7B,IAAA,IAAIN,mBAAmB,EAAE;AACvBC,MAAAA,UAAU,KAAA,IAAA,IAAVA,UAAU,KAAA,MAAA,GAAA,MAAA,GAAVA,UAAU,EAAI;MACdK,WAAW,CAACC,wBAAwB,EAAE;AACxC,IAAA;AACF,EAAA,CAAC,EACD,CAACN,UAAU,EAAED,mBAAmB,CAAC,CAClC;AAEDQ,EAAAA,MAAM,CAACC,oCAAqB,EAAEL,UAAU,EAAE;AAAEM,IAAAA,OAAO,EAAE;AAAEC,MAAAA,IAAI,EAAE;AAAI;GAAI,EAAE,CAACP,UAAU,EAAEJ,mBAAmB,CAAC,CAAC;AAEzG,EAAA,oBACEY,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAA,IAAA,WAAA,EACaV,QAAQ;AACnBD,IAAAA,SAAS,EAAEY,EAAE,CACXC,oBAAM,CAACC,KAAK,EACZ;AACE,MAAA,CAACD,oBAAM,CAAC5B,OAAO,GAAGW,IAAI,KAAK,SAAS;AACpC,MAAA,CAACiB,oBAAM,CAACxB,IAAI,GAAGO,IAAI,KAAK,MAAM;AAC9B,MAAA,CAACiB,oBAAM,CAACtB,OAAO,GAAGK,IAAI,KAAK,SAAS;AACpC,MAAA,CAACiB,oBAAM,CAACpB,QAAQ,GAAGG,IAAI,KAAK;AAC7B,KAAA,EACDI,SAAS;AACV,GAAA,eAEDU,KAAA,CAAAC,aAAA,CAACI,oBAAI,EAAA;IAAA,WAAA,EAAY,CAAA,EAAGd,QAAQ,CAAA,KAAA,CAAO;AAAEb,IAAAA,SAAS,EAAEA,SAAS;AAAEF,IAAAA,IAAI,EAAEA,IAAI;IAAEc,SAAS,EAAEa,oBAAM,CAAC3B;AAAI,GAAA,CAAI,eACjGwB,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;IAAA,WAAA,EAAgB,CAAA,EAAGV,QAAQ,CAAA,QAAA,CAAU;IAAED,SAAS,EAAEa,oBAAM,CAAChB;GAAO,EAC7DA,OAAO,CACJ,EACLE,UAAU,kBACTW,KAAA,CAAAC,aAAA,CAACK,gCAAU;iBACE,CAAA,EAAGf,QAAQ,CAAA,MAAA,CAAQ;AAC9BgB,IAAAA,IAAI,EAAC,aAAa;IAClBjB,SAAS,EAAEa,oBAAM,CAACK,KAAK;AACvB9B,IAAAA,SAAS,EAAC,YAAY;AACtBF,IAAAA,IAAI,EAAEiC,cAAC;AACPC,IAAAA,OAAO,EAAErB;GAAU,CACnB,CACH,CACG;AAEV;;;;;"}
+{"version":3,"file":"Toast.js","sourceRoot":"","sources":["../../src/components/Toast.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAiB,WAAW,EAAE,MAAM,OAAO,CAAA;AACzD,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,WAAW,EAAE,IAAI,EAAoB,CAAC,EAAE,MAAM,eAAe,CAAA;AAClG,OAAO,MAAM,MAAM,sBAAsB,CAAA;AAGzC,OAAO,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAA;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAE7B,OAAO,MAAM,MAAM,qBAAqB,CAAA;AASxC,MAAM,CAAC,MAAM,SAAS,GAAgD;IACpE,OAAO,EAAE;QACP,IAAI,EAAE,WAAW;QACjB,SAAS,EAAE,mBAAmB;KAC/B;IACD,IAAI,EAAE;QACJ,IAAI,EAAE,IAAI;QACV,SAAS,EAAE,kBAAkB;KAC9B;IACD,OAAO,EAAE;QACP,IAAI,EAAE,aAAa;QACnB,SAAS,EAAE,uBAAuB;KACnC;IACD,QAAQ,EAAE;QACR,IAAI,EAAE,WAAW;QACjB,SAAS,EAAE,2BAA2B;KACvC;CACF,CAAA;AAUD;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,KAAK,GAAmB,CAAC,EACpC,IAAI,EACJ,OAAO,EACP,mBAAmB,GAAG,IAAI,EAC1B,UAAU,EACV,SAAS,EACT,WAAW,EAAE,QAAQ,GAAG,OAAO,GAChC,EAAE,EAAE;IACH,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,SAAS,CAAC,IAAI,CAAC,CAAA;IAE3C,MAAM,UAAU,GAAG,WAAW,CAC5B,CAAC,WAA0B,EAAE,EAAE;QAC7B,IAAI,mBAAmB,EAAE,CAAC;YACxB,UAAU,aAAV,UAAU,uBAAV,UAAU,EAAI,CAAA;YACd,WAAW,CAAC,wBAAwB,EAAE,CAAA;QACxC,CAAC;IACH,CAAC,EACD,CAAC,UAAU,EAAE,mBAAmB,CAAC,CAClC,CAAA;IAED,MAAM,CAAC,qBAAqB,EAAE,UAAU,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,UAAU,EAAE,mBAAmB,CAAC,CAAC,CAAA;IAEzG,OAAO,CACL,0CACa,QAAQ,EACnB,SAAS,EAAE,EAAE,CACX,MAAM,CAAC,KAAK,EACZ;YACE,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,IAAI,KAAK,SAAS;YACpC,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,IAAI,KAAK,MAAM;YAC9B,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,IAAI,KAAK,SAAS;YACpC,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,IAAI,KAAK,UAAU;SACvC,EACD,SAAS,CACV;QAED,oBAAC,IAAI,iBAAY,GAAG,QAAQ,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,CAAC,IAAI,GAAI;QACjG,0CAAgB,GAAG,QAAQ,UAAU,EAAE,SAAS,EAAE,MAAM,CAAC,OAAO,IAC7D,OAAO,CACJ;QACL,UAAU,IAAI,CACb,oBAAC,UAAU,iBACE,GAAG,QAAQ,QAAQ,EAC9B,IAAI,EAAC,aAAa,EAClB,SAAS,EAAE,MAAM,CAAC,KAAK,EACvB,SAAS,EAAC,YAAY,EACtB,IAAI,EAAE,CAAC,EACP,OAAO,EAAE,UAAU,GACnB,CACH,CACG,CACP,CAAA;AACH,CAAC,CAAA"}

package/lib/components/Toast.module.scss

@@ -0,0 +1,53 @@
+@use '../../styles/constants' as c;
+
+.toast {
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  border-radius: c.$borderRadiusToast;
+  max-width: c.$toastMaxWidth;
+  padding: c.$grid * 1.5 c.$grid * 2.5;
+
+  .icon {
+    flex: 0 0 auto;
+    margin-right: c.$grid * 2.5;
+  }
+
+  .content {
+    @include c.typographyBodyNormal;
+
+    word-break: break-word;
+  }
+
+  .close {
+    margin-left: c.$grid * 2.5;
+  }
+
+  &.success {
+    background-color: c.$colorSuccessLight;
+    color: c.$colorText;
+  }
+
+  &.info {
+    background-color: c.$colorInfoLight;
+    color: c.$colorText;
+
+    .icon {
+      color: c.$colorText;
+    }
+  }
+
+  &.warning {
+    background-color: c.$colorWarningLight;
+    color: c.$colorText;
+
+    .icon {
+      color: c.$colorText;
+    }
+  }
+
+  &.critical {
+    background-color: c.$colorErrorLight;
+    color: c.$colorText;
+  }
+}

package/lib/components/Toggle.js

@@ -1,72 +1,22 @@
-'use strict';
-
-var React = require('react');
-var cn = require('classnames');
-var reactUid = require('react-uid');
-var components_Error = require('./Error.js');
-var components_Help = require('./Help.js');
-var Toggle_module = require('./Toggle.module.scss.js');
-
-const Toggle = props => {
-  const {
-    name,
-    value,
-    onChange,
-    onBlur,
-    error,
-    checked,
-    label,
-    helperText,
-    disabled,
-    className,
-    classNameLabel,
-    'data-test': dataTest = 'toggle'
-  } = props;
-  const id = reactUid.useUID();
-  return /*#__PURE__*/React.createElement("div", {
-    className: cn(Toggle_module.default.wrapper, className, {
-      [Toggle_module.default.withError]: 'error' in props
-    }),
-    "data-test": dataTest
-  }, /*#__PURE__*/React.createElement("input", {
-    type: "checkbox",
-    id: id,
-    name: name,
-    checked: !!checked,
-    onChange: onChange,
-    onBlur: onBlur,
-    value: value,
-    disabled: disabled,
-    "aria-invalid": !!error,
-    "aria-describedby": helperText && components_Help.helpTooltipId(id),
-    "aria-errormessage": error && components_Error.errorId(id)
-  }), /*#__PURE__*/React.createElement("label", {
-    className: cn({
-      [Toggle_module.default.error]: !!error,
-      [Toggle_module.default.disabled]: disabled
-    }, classNameLabel),
-    htmlFor: id
-  }, label && (/*#__PURE__*/React.createElement("span", {
-    className: Toggle_module.default.labelText,
-    "data-test": `${dataTest}-label`
-  }, label)), /*#__PURE__*/React.createElement("span", {
-    className: Toggle_module.default.toggleTrack
-  }, /*#__PURE__*/React.createElement("span", {
-    className: Toggle_module.default.toggleTrackText,
-    "data-test": `${dataTest}-state`
-  }, checked ? 'ON' : 'OFF'))), helperText && /*#__PURE__*/React.createElement(components_Help.Help, {
-    parentId: id,
-    helperText: helperText,
-    className: Toggle_module.default.helperText,
-    "data-test": `${dataTest}-helperText`
-  }), /*#__PURE__*/React.createElement(components_Error.Error, {
-    "data-test": `${dataTest}-error`,
-    truncated: true,
-    error: error,
-    className: Toggle_module.default.errorContainer,
-    inputId: id
-  }));
+import React from 'react';
+import cn from 'classnames';
+import { useUID } from 'react-uid';
+import { Error, errorId } from './Error';
+import { Help, helpTooltipId } from './Help';
+import styles from './Toggle.module.scss';
+export const Toggle = (props) => {
+    const { name, value, onChange, onBlur, error, checked, label, helperText, disabled, className, classNameLabel, 'data-test': dataTest = 'toggle', } = props;
+    const id = useUID();
+    return (React.createElement("div", { className: cn(styles.wrapper, className, { [styles.withError]: 'error' in props }), "data-test": dataTest },
+        React.createElement("input", { type: "checkbox", id: id, name: name, checked: !!checked, onChange: onChange, onBlur: onBlur, value: value, disabled: disabled, "aria-invalid": !!error, "aria-describedby": helperText && helpTooltipId(id), "aria-errormessage": error && errorId(id) }),
+        React.createElement("label", { className: cn({
+                [styles.error]: !!error,
+                [styles.disabled]: disabled,
+            }, classNameLabel), htmlFor: id },
+            label && (React.createElement("span", { className: styles.labelText, "data-test": `${dataTest}-label` }, label)),
+            React.createElement("span", { className: styles.toggleTrack },
+                React.createElement("span", { className: styles.toggleTrackText, "data-test": `${dataTest}-state` }, checked ? 'ON' : 'OFF'))),
+        helperText && React.createElement(Help, { parentId: id, helperText: helperText, className: styles.helperText, "data-test": `${dataTest}-helperText` }),
+        React.createElement(Error, { "data-test": `${dataTest}-error`, truncated: true, error: error, className: styles.errorContainer, inputId: id })));
 };
-
-exports.Toggle = Toggle;
-//# sourceMappingURL=Toggle.js.map
+//# sourceMappingURL=Toggle.js.map

package/lib/components/Toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toggle.js","sources":["../../src/components/Toggle.tsx"],"sourcesContent":[null],"names":["Toggle","props","name","value","onChange","onBlur","error","checked","label","helperText","disabled","className","classNameLabel","dataTest","id","useUID","React","createElement","cn","styles","wrapper","withError","type","helpTooltipId","errorId","htmlFor","labelText","toggleTrack","toggleTrackText","Help","parentId","Error","truncated","errorContainer","inputId"],"mappings":";;;;;;;;;AA6BO,MAAMA,MAAM,GAAqBC,KAAK,IAAI;EAC/C,MAAM;IACJC,IAAI;IACJC,KAAK;IACLC,QAAQ;IACRC,MAAM;IACNC,KAAK;IACLC,OAAO;IACPC,KAAK;IACLC,UAAU;IACVC,QAAQ;IACRC,SAAS;IACTC,cAAc;IACd,WAAW,EAAEC,QAAQ,GAAG;AAAQ,GACjC,GAAGZ,KAAK;AACT,EAAA,MAAMa,EAAE,GAAGC,eAAM,EAAE;AAEnB,EAAA,oBACEC,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;IAAKN,SAAS,EAAEO,EAAE,CAACC,qBAAM,CAACC,OAAO,EAAET,SAAS,EAAE;AAAE,MAAA,CAACQ,qBAAM,CAACE,SAAS,GAAG,OAAO,IAAIpB;AAAK,KAAE,CAAC;AAAA,IAAA,WAAA,EAAaY;AAAQ,GAAA,eAE1GG,KAAA,CAAAC,aAAA,CAAA,OAAA,EAAA;AACEK,IAAAA,IAAI,EAAC,UAAU;AACfR,IAAAA,EAAE,EAAEA,EAAE;AACNZ,IAAAA,IAAI,EAAEA,IAAI;IACVK,OAAO,EAAE,CAAC,CAACA,OAAO;AAClBH,IAAAA,QAAQ,EAAEA,QAAQ;AAClBC,IAAAA,MAAM,EAAEA,MAAM;AACdF,IAAAA,KAAK,EAAEA,KAAK;AACZO,IAAAA,QAAQ,EAAEA,QAAQ;IAAA,cAAA,EACJ,CAAC,CAACJ,KAAK;AAAA,IAAA,kBAAA,EACHG,UAAU,IAAIc,6BAAa,CAACT,EAAE,CAAC;AAAA,IAAA,mBAAA,EAC9BR,KAAK,IAAIkB,wBAAO,CAACV,EAAE;AAAC,GAAA,CACvC,eAGFE,KAAA,CAAAC,aAAA,CAAA,OAAA,EAAA;IACEN,SAAS,EAAEO,EAAE,CACX;AACE,MAAA,CAACC,qBAAM,CAACb,KAAK,GAAG,CAAC,CAACA,KAAK;MACvB,CAACa,qBAAM,CAACT,QAAQ,GAAGA;KACpB,EACDE,cAAc,CACf;AACDa,IAAAA,OAAO,EAAEX;GAAE,EAEVN,KAAK,kBACJQ,KAAA,CAAAC,aAAA,CAAA,MAAA,EAAA;IAAMN,SAAS,EAAEQ,qBAAM,CAACO,SAAS;IAAA,WAAA,EAAa,GAAGb,QAAQ,CAAA,MAAA;GAAQ,EAC9DL,KAAK,CACD,CACR,eAEDQ,KAAA,CAAAC,aAAA,CAAA,MAAA,EAAA;IAAMN,SAAS,EAAEQ,qBAAM,CAACQ;AAAW,GAAA,eACjCX,KAAA,CAAAC,aAAA,CAAA,MAAA,EAAA;IAAMN,SAAS,EAAEQ,qBAAM,CAACS,eAAe;IAAA,WAAA,EAAa,GAAGf,QAAQ,CAAA,MAAA;AAAQ,GAAA,EACpEN,OAAO,GAAG,IAAI,GAAG,KAAK,CAClB,CACF,CACD,EAEPE,UAAU,iBAAIO,oBAACa,oBAAI,EAAA;AAACC,IAAAA,QAAQ,EAAEhB,EAAE;AAAEL,IAAAA,UAAU,EAAEA,UAAU;IAAEE,SAAS,EAAEQ,qBAAM,CAACV,UAAU;IAAA,WAAA,EAAa,GAAGI,QAAQ,CAAA,WAAA;AAAa,GAAA,CAAI,eAEhIG,KAAA,CAAAC,aAAA,CAACc,sBAAK,EAAA;IAAA,WAAA,EAAY,CAAA,EAAGlB,QAAQ,CAAA,MAAA,CAAQ;AAAEmB,IAAAA,SAAS,EAAA,IAAA;AAAC1B,IAAAA,KAAK,EAAEA,KAAK;IAAEK,SAAS,EAAEQ,qBAAM,CAACc,cAAc;AAAEC,IAAAA,OAAO,EAAEpB;AAAE,GAAA,CAAI,CAC5G;AAEV;;;;"}
+{"version":3,"file":"Toggle.js","sourceRoot":"","sources":["../../src/components/Toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAA;AAC1D,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAGlC,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,SAAS,CAAA;AACxC,OAAO,EAAE,IAAI,EAAa,aAAa,EAAE,MAAM,QAAQ,CAAA;AAEvD,OAAO,MAAM,MAAM,sBAAsB,CAAA;AAqBzC,MAAM,CAAC,MAAM,MAAM,GAAoB,CAAC,KAAK,EAAE,EAAE;IAC/C,MAAM,EACJ,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,MAAM,EACN,KAAK,EACL,OAAO,EACP,KAAK,EACL,UAAU,EACV,QAAQ,EACR,SAAS,EACT,cAAc,EACd,WAAW,EAAE,QAAQ,GAAG,QAAQ,GACjC,GAAG,KAAK,CAAA;IACT,MAAM,EAAE,GAAG,MAAM,EAAE,CAAA;IAEnB,OAAO,CACL,6BAAK,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE,OAAO,IAAI,KAAK,EAAE,CAAC,eAAa,QAAQ;QAE1G,+BACE,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,CAAC,CAAC,OAAO,EAClB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,kBACJ,CAAC,CAAC,KAAK,sBACH,UAAU,IAAI,aAAa,CAAC,EAAE,CAAC,uBAC9B,KAAK,IAAI,OAAO,CAAC,EAAE,CAAC,GACvC;QAGF,+BACE,SAAS,EAAE,EAAE,CACX;gBACE,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,KAAK;gBACvB,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,QAAQ;aAC5B,EACD,cAAc,CACf,EACD,OAAO,EAAE,EAAE;YAEV,KAAK,IAAI,CACR,8BAAM,SAAS,EAAE,MAAM,CAAC,SAAS,eAAa,GAAG,QAAQ,QAAQ,IAC9D,KAAK,CACD,CACR;YAED,8BAAM,SAAS,EAAE,MAAM,CAAC,WAAW;gBACjC,8BAAM,SAAS,EAAE,MAAM,CAAC,eAAe,eAAa,GAAG,QAAQ,QAAQ,IACpE,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAClB,CACF,CACD;QAEP,UAAU,IAAI,oBAAC,IAAI,IAAC,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,CAAC,UAAU,eAAa,GAAG,QAAQ,aAAa,GAAI;QAEhI,oBAAC,KAAK,iBAAY,GAAG,QAAQ,QAAQ,EAAE,SAAS,QAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,CAAC,cAAc,EAAE,OAAO,EAAE,EAAE,GAAI,CAC5G,CACP,CAAA;AACH,CAAC,CAAA"}

package/lib/components/Toggle.module.scss

@@ -0,0 +1,175 @@
+@use '../../styles/constants' as c;
+@use '../../styles/helpers' as h;
+@use 'sass:math';
+
+$height: c.$grid * 6;
+$width: c.$grid * 15;
+$labelMargin: c.$grid * 2.5;
+/* doiuse-disable calc */
+$trackBr: calc(#{$height} - #{c.$borderWidth * 2});
+/* doiuse-enable calc */
+$trackBgOn: c.$colorSuccess;
+$trackBgOff: c.$colorNeutral;
+$knobBgOn: c.$colorNeutralWhite;
+$knobBgOff: c.$colorNeutralLighter;
+$knobRadius: c.$grid * 5;
+/* stylelint-disable  length-zero-no-unit */
+$knobHorizontalOffset: math.max(c.$outlineWidth - c.$borderWidth, 0px);
+/* stylelint-enable */
+
+@keyframes switchOn {
+  from {
+    opacity: 0;
+    transform: translateY(-50%) translateX(100%);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(-50%);
+  }
+}
+
+@keyframes switchOff {
+  from {
+    opacity: 0;
+    transform: translateY(-50%) translateX(-100%);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(-50%);
+  }
+}
+
+.wrapper {
+  position: relative;
+
+  input {
+    @include h.visuallyHidden;
+  }
+
+  // faux wrapping label
+  label {
+    cursor: pointer;
+    display: inline-flex; // for aligning with the .labelText
+    align-items: center;
+    color: c.$colorText;
+    vertical-align: middle;
+
+    @include c.typographyBodySmall;
+
+    &.disabled {
+      cursor: not-allowed;
+      color: c.$colorNeutralLight;
+    }
+  }
+
+  // actual text label
+  .labelText {
+    margin-right: $labelMargin;
+  }
+
+  .helperText {
+    margin-left: c.$grid * 1.5;
+  }
+
+  // the `track` (default off state)
+  .toggleTrack {
+    display: inline-block;
+    height: $height;
+    width: $width;
+    background: $trackBgOff;
+    border-radius: $trackBr;
+    position: relative;
+    border: c.$borderWidth solid transparent;
+    box-sizing: border-box;
+    color: c.$colorNeutralWhite;
+
+    &::before {
+      content: '';
+      display: inline-block;
+      height: $knobRadius;
+      width: $knobRadius;
+      background: $knobBgOff;
+      border-radius: 50%;
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      /* doiuse-disable calc */
+      right: calc(#{$width} - #{c.$borderWidth * 2} - #{$knobRadius} - #{$knobHorizontalOffset});
+      /* doiuse-enable calc */
+      transition: right c.$transitionTimeMedium ease-in;
+    }
+  }
+
+  // track states
+  label.hover .toggleTrack,
+  label:hover .toggleTrack {
+    border-color: c.$colorPrimary;
+  }
+
+  label.error .toggleTrack {
+    border-color: c.$colorError;
+  }
+
+  label.disabled .toggleTrack {
+    background-color: c.$colorNeutralLight;
+    border-color: c.$colorNeutralLight;
+    box-shadow: none;
+    color: c.$colorNeutral;
+
+    &::before {
+      background: c.$colorNeutral;
+    }
+  }
+
+  label.focus .toggleTrack,
+  input:focus + label .toggleTrack {
+    @include h.outlineFormField;
+  }
+
+  // track ON state
+  input:checked + label .toggleTrack {
+    background: $trackBgOn;
+
+    &::before {
+      background: $knobBgOn;
+      right: $knobHorizontalOffset;
+    }
+  }
+
+  input:checked + label.disabled .toggleTrack {
+    background-color: c.$colorSuccessDark;
+    border-color: c.$colorNeutralLight;
+    box-shadow: none;
+    color: c.$colorNeutral;
+
+    &::before {
+      background-color: c.$colorNeutral;
+    }
+  }
+
+  .toggleTrackText {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  // the "OFF" text
+  input:not(:checked) + label .toggleTrackText {
+    animation: switchOff c.$transitionTimeMedium ease-in;
+    right: c.$grid * 2;
+    left: auto;
+    color: c.$colorTextSecondary;
+  }
+
+  // the "ON" text
+  input:checked + label .toggleTrackText {
+    animation: switchOn c.$transitionTimeMedium ease-in;
+    right: auto;
+    left: c.$grid * 1.5;
+    color: c.$colorNeutralWhite;
+  }
+}
+
+@include h.withError;

package/lib/components/ToggleFormik.js

@@ -1,28 +1,12 @@
-'use strict';
-
-var React = require('react');
-var formik = require('formik');
-var utils_formik = require('../utils/formik.js');
-var components_Toggle = require('./Toggle.js');
-
-const ToggleFormik = ({
-  name,
-  validate,
-  ...props
-}) => {
-  const [field, meta] = formik.useField({
-    name,
-    validate
-  });
-  return /*#__PURE__*/React.createElement(components_Toggle.Toggle, {
-    ...props,
-    name: name,
-    checked: field.value,
-    onChange: field.onChange,
-    onBlur: field.onBlur,
-    error: utils_formik.getFieldError(meta)
-  });
+import React from 'react';
+import { useField } from 'formik';
+import { getFieldError } from '../utils/formik';
+import { Toggle } from './Toggle';
+export const ToggleFormik = ({ name, validate, ...props }) => {
+    const [field, meta] = useField({
+        name,
+        validate,
+    });
+    return React.createElement(Toggle, { ...props, name: name, checked: field.value, onChange: field.onChange, onBlur: field.onBlur, error: getFieldError(meta) });
 };
-
-exports.ToggleFormik = ToggleFormik;
-//# sourceMappingURL=ToggleFormik.js.map
+//# sourceMappingURL=ToggleFormik.js.map

package/lib/components/ToggleFormik.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleFormik.js","sources":["../../src/components/ToggleFormik.tsx"],"sourcesContent":[null],"names":["ToggleFormik","name","validate","props","field","meta","useField","React","createElement","Toggle","checked","value","onChange","onBlur","error","getFieldError"],"mappings":";;;;;;;AAYO,MAAMA,YAAY,GAAGA,CAAmB;EAAEC,IAAI;EAAEC,QAAQ;EAAE,GAAGC;AAAK,CAAwB,KAAkB;AACjH,EAAA,MAAM,CAACC,KAAK,EAAEC,IAAI,CAAC,GAAGC,eAAQ,CAAU;IACtCL,IAAI;AACJC,IAAAA;AACD,GAAA,CAAC;AAEF,EAAA,oBAAOK,KAAA,CAAAC,aAAA,CAACC,wBAAM,EAAA;AAAA,IAAA,GAAKN,KAAK;AAAEF,IAAAA,IAAI,EAAEA,IAAI;IAAES,OAAO,EAAEN,KAAK,CAACO,KAAK;IAAEC,QAAQ,EAAER,KAAK,CAACQ,QAAQ;IAAEC,MAAM,EAAET,KAAK,CAACS,MAAM;IAAEC,KAAK,EAAEC,0BAAa,CAACV,IAAI;IAAK;AAC5I;;;;"}
+{"version":3,"file":"ToggleFormik.js","sourceRoot":"","sources":["../../src/components/ToggleFormik.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuB,MAAM,OAAO,CAAA;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA;AACjC,OAAO,EAAyB,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAGtE,OAAO,EAAE,MAAM,EAAoB,MAAM,UAAU,CAAA;AAOnD,MAAM,CAAC,MAAM,YAAY,GAAG,CAAmB,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAwB,EAAgB,EAAE;IACjH,MAAM,CAAC,KAAK,EAAE,IAAI,CAAC,GAAG,QAAQ,CAAU;QACtC,IAAI;QACJ,QAAQ;KACT,CAAC,CAAA;IAEF,OAAO,oBAAC,MAAM,OAAK,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,CAAC,KAAK,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,CAAC,MAAM,EAAE,KAAK,EAAE,aAAa,CAAC,IAAI,CAAC,GAAI,CAAA;AAC5I,CAAC,CAAA"}

package/lib/components/Tooltip.js

@@ -1,11 +1,8 @@
-'use strict';
-
-var React = require('react');
-var react = require('@floating-ui/react');
-var cn = require('classnames');
-var Tooltip_module = require('./Tooltip.module.scss.js');
-var utils_ssr = require('../utils/ssr.js');
-
+import React, { useRef, cloneElement, useState } from 'react';
+import { FloatingArrow, offset, useFloating, arrow, useHover, useInteractions, autoUpdate, autoPlacement as autoPlacementMiddleware, FloatingPortal, safePolygon, } from '@floating-ui/react';
+import cn from 'classnames';
+import styles from './Tooltip.module.scss';
+import { canUseDOM } from '../utils/ssr';
 /**
  * ### Purpose
  * Useful when you need to display additional information/actionable content.
@@ -22,75 +19,38 @@ var utils_ssr = require('../utils/ssr.js');
  * ### Usage
  * Wrap the target element with Tooltip component and use the "content" property to define what should be displayed inside the tooltip.
  */
-const Tooltip = ({
-  id,
-  content,
-  offset: offsetY = 10,
-  padding = 10,
-  placement = 'top',
-  visible: visibilityOverride,
-  children,
-  wordBreak,
-  zIndex = 20,
-  arrow: showArrow = true,
-  color,
-  autoPlacement = false,
-  className
-}) => {
-  const [isOpen, setIsOpen] = React.useState(false);
-  const arrowRef = React.useRef(null);
-  const {
-    refs,
-    floatingStyles,
-    context
-  } = react.useFloating({
-    strategy: 'absolute',
-    placement,
-    whileElementsMounted: react.autoUpdate,
-    open: isOpen,
-    onOpenChange: setIsOpen,
-    middleware: [...(autoPlacement ? [react.autoPlacement()] : []), react.offset(offsetY), ...(showArrow ? [react.arrow({
-      element: arrowRef,
-      padding
-    })] : [])]
-  });
-  const hover = react.useHover(context, {
-    handleClose: react.safePolygon()
-  });
-  const {
-    getReferenceProps,
-    getFloatingProps
-  } = react.useInteractions([hover]);
-  const isTooltipVisible = typeof visibilityOverride === 'boolean' ? visibilityOverride : isOpen;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.cloneElement(children(refs.setReference), {
-    ...getReferenceProps()
-  }), content !== undefined && isTooltipVisible && (/*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
-    ...(id && {
-      id
-    }),
-    className: cn(Tooltip_module.default.tooltipSr, className),
-    role: "tooltip",
-    "data-test": "tooltip-sr"
-  }, content), /*#__PURE__*/React.createElement(react.FloatingPortal, {
-    root: utils_ssr.canUseDOM ? document.body : null
-  }, /*#__PURE__*/React.createElement("span", {
-    ref: refs.setFloating,
-    className: cn(Tooltip_module.default.overlay, color && [Tooltip_module.default[color]], className),
-    style: {
-      ...floatingStyles,
-      ...{
-        zIndex: context ? zIndex + 1 : zIndex
-      },
-      wordBreak
-    },
-    "data-test": "tooltip-overlay",
-    ...getFloatingProps()
-  }, content, showArrow && /*#__PURE__*/React.createElement(react.FloatingArrow, {
-    ref: arrowRef,
-    context: context,
-    className: Tooltip_module.default.arrow
-  }))))));
+export const Tooltip = ({ id, content, offset: offsetY = 10, padding = 10, placement = 'top', visible: visibilityOverride, children, wordBreak, zIndex = 20, arrow: showArrow = true, color, autoPlacement = true, className, }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const arrowRef = useRef(null);
+    const { refs, floatingStyles, context } = useFloating({
+        strategy: 'absolute',
+        placement,
+        whileElementsMounted: autoUpdate,
+        open: isOpen,
+        onOpenChange: setIsOpen,
+        middleware: [
+            ...(autoPlacement ? [autoPlacementMiddleware()] : []),
+            offset(offsetY),
+            ...(showArrow
+                ? [
+                    arrow({
+                        element: arrowRef,
+                        padding,
+                    }),
+                ]
+                : []),
+        ],
+    });
+    const hover = useHover(context, { handleClose: safePolygon() });
+    const { getReferenceProps, getFloatingProps } = useInteractions([hover]);
+    const isTooltipVisible = typeof visibilityOverride === 'boolean' ? visibilityOverride : isOpen;
+    return (React.createElement(React.Fragment, null,
+        cloneElement(children(refs.setReference), { ...getReferenceProps() }),
+        content !== undefined && isTooltipVisible && (React.createElement(React.Fragment, null,
+            React.createElement("span", { ...(id && { id }), className: cn(styles.tooltipSr, className), role: "tooltip", "data-test": "tooltip-sr" }, content),
+            React.createElement(FloatingPortal, { root: canUseDOM ? document.body : null },
+                React.createElement("span", { ref: refs.setFloating, className: cn(styles.overlay, color && [styles[color]], className), style: { ...floatingStyles, ...{ zIndex: context ? zIndex + 1 : zIndex }, wordBreak }, "data-test": "tooltip-overlay", ...getFloatingProps() },
+                    content,
+                    showArrow && React.createElement(FloatingArrow, { ref: arrowRef, context: context, className: styles.arrow })))))));
 };
-
-exports.Tooltip = Tooltip;
-//# sourceMappingURL=Tooltip.js.map
+//# sourceMappingURL=Tooltip.js.map

package/lib/components/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sources":["../../src/components/Tooltip.tsx"],"sourcesContent":[null],"names":["Tooltip","id","content","offset","offsetY","padding","placement","visible","visibilityOverride","children","wordBreak","zIndex","arrow","showArrow","color","autoPlacement","className","isOpen","setIsOpen","useState","arrowRef","useRef","refs","floatingStyles","context","useFloating","strategy","whileElementsMounted","autoUpdate","open","onOpenChange","middleware","autoPlacementMiddleware","element","hover","useHover","handleClose","safePolygon","getReferenceProps","getFloatingProps","useInteractions","isTooltipVisible","React","createElement","Fragment","cloneElement","setReference","undefined","cn","styles","tooltipSr","role","FloatingPortal","root","canUseDOM","document","body","ref","setFloating","overlay","style","FloatingArrow"],"mappings":"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"}
+{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../src/components/Tooltip.tsx"],"names":[],"mappings":"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"}

package/lib/components/Tooltip.module.scss

@@ -0,0 +1,44 @@
+@use 'sass:math';
+@use '../../styles/constants' as c;
+@use '../../styles/helpers' as h;
+
+.tooltipSr {
+  @include h.visuallyHidden;
+}
+
+@mixin arrowPlacements($color) {
+  .arrow {
+    fill: $color;
+  }
+}
+
+.overlay {
+  @include c.typographyBodySmall;
+
+  position: relative;
+  max-width: c.$tooltipMaxWidth;
+  padding: c.$grid * 3;
+  background: c.$colorNeutralLighter;
+  border: c.$borderWidth solid c.$colorNeutralLight;
+  border-radius: c.$borderRadius;
+  color: c.$colorText;
+  word-break: break-all;
+
+  &.secondary {
+    border: none;
+    color: c.$colorNeutralWhite;
+    background-color: c.$colorTextSubdued;
+
+    @include arrowPlacements(c.$colorTextSubdued);
+  }
+
+  &.dark {
+    border: none;
+    color: c.$colorBrandText;
+    background-color: c.$colorBrandAccent;
+
+    @include arrowPlacements(c.$colorBrandAccent);
+  }
+
+  @include arrowPlacements(c.$colorNeutralLight);
+}