@onewelcome/react-lib-components 12.0.0 → 12.0.1

package/dist/components/Tiles/Tile.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tile.cjs.js","sources":["../../../src/components/Tiles/Tile.tsx"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\nimport React, {\n  ComponentPropsWithoutRef,\n  ComponentPropsWithRef,\n  ForwardRefRenderFunction,\n  ReactElement,\n  useState\n} from \"react\";\nimport { Icon, Icons } from \"../Icon/Icon\";\nimport classes from \"./Tile.module.scss\";\nimport readyClasses from \"../../readyclasses.module.scss\";\n\nimport { Props as ContextMenuProps } from \"../ContextMenu/ContextMenu\";\nimport { generateID } from \"../../util/helper\";\nimport { Props as IconButtonProps } from \"../Button/IconButton\";\n\ninterface ImageProps extends ComponentPropsWithoutRef<\"img\"> {\n  src: string;\n}\n\nexport interface Props extends ComponentPropsWithRef<\"div\"> {\n  title: string;\n  imageProps?: ImageProps;\n  enabled?: boolean;\n  loading?: boolean;\n  tileAction?: ReactElement<ContextMenuProps> | ReactElement<IconButtonProps>;\n}\n\nconst TileComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (\n  { title, imageProps, enabled, className, loading, tileAction, ...rest }: Props,\n  ref\n) => {\n  const [tileDescriptionID] = useState(generateID(20));\n\n  if (!title) {\n    throw new Error(\"Please make sure to pass a title prop to your Tile component.\");\n  }\n\n  const statusMessage = () => {\n    if (enabled) {\n      return \"Status: enabled\";\n    }\n\n    return \"Status: disabled\";\n  };\n\n  return (\n    <article\n      {...rest}\n      tabIndex={0}\n      aria-labelledby={tileDescriptionID}\n      ref={ref}\n      className={`${classes[\"tile\"]} ${loading ? classes[\"loading\"] : \"\"}`}\n    >\n      <header style={{ justifyContent: enabled === undefined ? \"flex-end\" : \"space-between\" }}>\n        {enabled === true && (\n          <Icon\n            color=\"var(--success)\"\n            icon={Icons.Checkmark}\n            className={`${classes[\"icon\"]} ${className ?? \"\"}`}\n          />\n        )}\n        {enabled === false && (\n          <Icon\n            color=\"var(--greyed-out)\"\n            icon={Icons.Forbidden}\n            className={`${classes[\"icon\"]} ${className ?? \"\"}`}\n          />\n        )}\n        {enabled !== undefined && (\n          <span id={tileDescriptionID} className={readyClasses[\"sr-only\"]}>\n            {`${title}. ${statusMessage()}`}\n          </span>\n        )}\n        {tileAction ?? null}\n      </header>\n      <div className={classes[\"content\"]}>\n        {imageProps && imageProps.src.length > 0 && (\n          <figure className={classes[\"image\"]}>{!loading && <img {...imageProps} alt=\"\" />}</figure>\n        )}\n        {(!imageProps || imageProps.src.length === 0) && (\n          <Icon className={classes[\"placeholder\"]} icon={Icons.Image} />\n        )}\n        <span className={classes[\"title\"]}>{title}</span>\n      </div>\n    </article>\n  );\n};\n\nexport const Tile = React.forwardRef(TileComponent);\n"],"names":["Tile","React","forwardRef","title","imageProps","enabled","className","loading","tileAction","rest","ref","tileDescriptionID","useState","generateID","Error","createElement","tabIndex","classes","default","style","justifyContent","Icon","color","icon","Icons","Checkmark","Forbidden","id","readyClasses","src","length","alt","Image"],"mappings":"0QAwGaA,EAAOC,EAAMC,YA7D6C,EACnEC,QAAOC,aAAYC,UAASC,YAAWC,UAASC,gBAAeC,GACjEC,KAEM,MAACC,GAAqBC,EAASA,SAAAC,EAAAA,WAAW,KAEhD,IAAKV,EACG,MAAA,IAAIW,MAAM,iEAYhB,OAAAb,EAAAc,cAAC,UAAA,IACKN,EACJO,SAAU,EACV,kBAAiBL,EACjBD,MACAJ,UAAW,GAAGW,EAAAC,QAAc,QAAKX,EAAUU,EAAAC,QAAiB,QAAI,MAEhEjB,EAAAc,cAAC,SAAO,CAAAI,MAAO,CAAEC,oBAA4B,IAAZf,EAAwB,WAAa,mBACvD,IAAZA,GACCJ,EAAAc,cAACM,EAAAA,KAAA,CACCC,MAAM,iBACNC,KAAMC,EAAMA,MAAAC,UACZnB,UAAW,GAAGW,UAAc,QAAKX,GAAa,QAGrC,IAAZD,GACCJ,EAAAc,cAACM,EAAAA,KAAA,CACCC,MAAM,oBACNC,KAAMC,EAAMA,MAAAE,UACZpB,UAAW,GAAGW,UAAc,QAAKX,GAAa,YAGrC,IAAZD,mBACE,OAAK,CAAAsB,GAAIhB,EAAmBL,UAAWsB,EAAAA,QAAa,YAClD,GAAGzB,MAhCRE,EACK,kBAGF,sBA+BFG,GAAc,MAEjBP,EAAAc,cAAC,OAAIT,UAAWW,EAAAA,QAAiB,SAC9Bb,GAAcA,EAAWyB,IAAIC,OAAS,mBACpC,SAAO,CAAAxB,UAAWW,EAAQC,QAAO,QAAKX,KAAYQ,cAAA,MAAA,IAAQX,EAAY2B,IAAI,QAE1E3B,GAAwC,IAA1BA,EAAWyB,IAAIC,SAC9B7B,EAAAc,cAACM,OAAK,CAAAf,UAAWW,EAAQC,QAAa,YAAGK,KAAMC,EAAAA,MAAMQ,UAEtDjB,cAAA,OAAA,CAAKT,UAAWW,EAAAA,QAAe,OAAId,IAExC"}

package/dist/components/Tiles/Tile.es.js

@@ -0,0 +1,48 @@
+import React, { useState } from "react";
+import { Icon, Icons } from "../Icon/Icon.es.js";
+import classes from "./Tile.module.scss.es.js";
+import readyclasses from "../../readyclasses.module.scss.es.js";
+import { generateID } from "../../util/helper.es.js";
+const TileComponent = ({ title, imageProps, enabled, className, loading, tileAction, ...rest }, ref) => {
+  const [tileDescriptionID] = useState(generateID(20));
+  if (!title) {
+    throw new Error("Please make sure to pass a title prop to your Tile component.");
+  }
+  const statusMessage = () => {
+    if (enabled) {
+      return "Status: enabled";
+    }
+    return "Status: disabled";
+  };
+  return /* @__PURE__ */ React.createElement(
+    "article",
+    {
+      ...rest,
+      tabIndex: 0,
+      "aria-labelledby": tileDescriptionID,
+      ref,
+      className: `${classes["tile"]} ${loading ? classes["loading"] : ""}`
+    },
+    /* @__PURE__ */ React.createElement("header", { style: { justifyContent: enabled === void 0 ? "flex-end" : "space-between" } }, enabled === true && /* @__PURE__ */ React.createElement(
+      Icon,
+      {
+        color: "var(--success)",
+        icon: Icons.Checkmark,
+        className: `${classes["icon"]} ${className ?? ""}`
+      }
+    ), enabled === false && /* @__PURE__ */ React.createElement(
+      Icon,
+      {
+        color: "var(--greyed-out)",
+        icon: Icons.Forbidden,
+        className: `${classes["icon"]} ${className ?? ""}`
+      }
+    ), enabled !== void 0 && /* @__PURE__ */ React.createElement("span", { id: tileDescriptionID, className: readyclasses["sr-only"] }, `${title}. ${statusMessage()}`), tileAction ?? null),
+    /* @__PURE__ */ React.createElement("div", { className: classes["content"] }, imageProps && imageProps.src.length > 0 && /* @__PURE__ */ React.createElement("figure", { className: classes["image"] }, !loading && /* @__PURE__ */ React.createElement("img", { ...imageProps, alt: "" })), (!imageProps || imageProps.src.length === 0) && /* @__PURE__ */ React.createElement(Icon, { className: classes["placeholder"], icon: Icons.Image }), /* @__PURE__ */ React.createElement("span", { className: classes["title"] }, title))
+  );
+};
+const Tile = React.forwardRef(TileComponent);
+export {
+  Tile
+};
+//# sourceMappingURL=Tile.es.js.map

package/dist/components/Tiles/Tile.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tile.es.js","sources":["../../../src/components/Tiles/Tile.tsx"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\nimport React, {\n  ComponentPropsWithoutRef,\n  ComponentPropsWithRef,\n  ForwardRefRenderFunction,\n  ReactElement,\n  useState\n} from \"react\";\nimport { Icon, Icons } from \"../Icon/Icon\";\nimport classes from \"./Tile.module.scss\";\nimport readyClasses from \"../../readyclasses.module.scss\";\n\nimport { Props as ContextMenuProps } from \"../ContextMenu/ContextMenu\";\nimport { generateID } from \"../../util/helper\";\nimport { Props as IconButtonProps } from \"../Button/IconButton\";\n\ninterface ImageProps extends ComponentPropsWithoutRef<\"img\"> {\n  src: string;\n}\n\nexport interface Props extends ComponentPropsWithRef<\"div\"> {\n  title: string;\n  imageProps?: ImageProps;\n  enabled?: boolean;\n  loading?: boolean;\n  tileAction?: ReactElement<ContextMenuProps> | ReactElement<IconButtonProps>;\n}\n\nconst TileComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (\n  { title, imageProps, enabled, className, loading, tileAction, ...rest }: Props,\n  ref\n) => {\n  const [tileDescriptionID] = useState(generateID(20));\n\n  if (!title) {\n    throw new Error(\"Please make sure to pass a title prop to your Tile component.\");\n  }\n\n  const statusMessage = () => {\n    if (enabled) {\n      return \"Status: enabled\";\n    }\n\n    return \"Status: disabled\";\n  };\n\n  return (\n    <article\n      {...rest}\n      tabIndex={0}\n      aria-labelledby={tileDescriptionID}\n      ref={ref}\n      className={`${classes[\"tile\"]} ${loading ? classes[\"loading\"] : \"\"}`}\n    >\n      <header style={{ justifyContent: enabled === undefined ? \"flex-end\" : \"space-between\" }}>\n        {enabled === true && (\n          <Icon\n            color=\"var(--success)\"\n            icon={Icons.Checkmark}\n            className={`${classes[\"icon\"]} ${className ?? \"\"}`}\n          />\n        )}\n        {enabled === false && (\n          <Icon\n            color=\"var(--greyed-out)\"\n            icon={Icons.Forbidden}\n            className={`${classes[\"icon\"]} ${className ?? \"\"}`}\n          />\n        )}\n        {enabled !== undefined && (\n          <span id={tileDescriptionID} className={readyClasses[\"sr-only\"]}>\n            {`${title}. ${statusMessage()}`}\n          </span>\n        )}\n        {tileAction ?? null}\n      </header>\n      <div className={classes[\"content\"]}>\n        {imageProps && imageProps.src.length > 0 && (\n          <figure className={classes[\"image\"]}>{!loading && <img {...imageProps} alt=\"\" />}</figure>\n        )}\n        {(!imageProps || imageProps.src.length === 0) && (\n          <Icon className={classes[\"placeholder\"]} icon={Icons.Image} />\n        )}\n        <span className={classes[\"title\"]}>{title}</span>\n      </div>\n    </article>\n  );\n};\n\nexport const Tile = React.forwardRef(TileComponent);\n"],"names":["readyClasses"],"mappings":";;;;;AA2CA,MAAM,gBAAiE,CACrE,EAAE,OAAO,YAAY,SAAS,WAAW,SAAS,YAAY,GAAG,KAAK,GACtE,QACG;AACH,QAAM,CAAC,iBAAiB,IAAI,SAAS,WAAW,EAAE,CAAC;AAEnD,MAAI,CAAC,OAAO;AACJ,UAAA,IAAI,MAAM,+DAA+D;AAAA,EAAA;AAGjF,QAAM,gBAAgB,MAAM;AAC1B,QAAI,SAAS;AACJ,aAAA;AAAA,IAAA;AAGF,WAAA;AAAA,EACT;AAGE,SAAA,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAG;AAAA,MACJ,UAAU;AAAA,MACV,mBAAiB;AAAA,MACjB;AAAA,MACA,WAAW,GAAG,QAAQ,MAAM,CAAC,IAAI,UAAU,QAAQ,SAAS,IAAI,EAAE;AAAA,IAAA;AAAA,IAElE,sBAAA,cAAC,UAAO,EAAA,OAAO,EAAE,gBAAgB,YAAY,SAAY,aAAa,gBAAA,EACnE,GAAA,YAAY,QACX,sBAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAM;AAAA,QACN,MAAM,MAAM;AAAA,QACZ,WAAW,GAAG,QAAQ,MAAM,CAAC,IAAI,aAAa,EAAE;AAAA,MAAA;AAAA,IAAA,GAGnD,YAAY,SACX,sBAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAM;AAAA,QACN,MAAM,MAAM;AAAA,QACZ,WAAW,GAAG,QAAQ,MAAM,CAAC,IAAI,aAAa,EAAE;AAAA,MAAA;AAAA,IAAA,GAGnD,YAAY,8CACV,QAAK,EAAA,IAAI,mBAAmB,WAAWA,aAAa,SAAS,EAC3D,GAAA,GAAG,KAAK,KAAK,cAAA,CAAe,EAC/B,GAED,cAAc,IACjB;AAAA,IACA,sBAAA,cAAC,SAAI,WAAW,QAAQ,SAAS,EAC9B,GAAA,cAAc,WAAW,IAAI,SAAS,yCACpC,UAAO,EAAA,WAAW,QAAQ,OAAO,EAAI,GAAA,CAAC,WAAY,sBAAA,cAAA,OAAA,EAAK,GAAG,YAAY,KAAI,GAAG,CAAA,CAAG,IAEjF,CAAC,cAAc,WAAW,IAAI,WAAW,MACzC,sBAAA,cAAC,MAAK,EAAA,WAAW,QAAQ,aAAa,GAAG,MAAM,MAAM,MAAO,CAAA,GAE7D,sBAAA,cAAA,QAAA,EAAK,WAAW,QAAQ,OAAO,EAAI,GAAA,KAAM,CAC5C;AAAA,EACF;AAEJ;AAEa,MAAA,OAAO,MAAM,WAAW,aAAa;"}

package/dist/components/Tiles/Tile.module.scss.cjs.js

@@ -0,0 +1,3 @@
+!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode('.Tile_sr-only_gFXfX{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.Tile_hidden_gFXfX{display:none}.Tile_slide-in_gFXfX{animation:Tile_slide-in_gFXfX .5s forwards}@media (prefers-reduced-motion: reduce){.Tile_slide-in_gFXfX{animation-duration:.1ms}}.Tile_slide-out_gFXfX{animation:Tile_slide-out_gFXfX .5s forwards}@media (prefers-reduced-motion: reduce){.Tile_slide-out_gFXfX{animation-duration:.1ms}}@keyframes Tile_slide-in_gFXfX{0%{transform:translateY(100vh)}to{transform:translateY(0)}}@keyframes Tile_slide-out_gFXfX{0%{transform:translateY(0)}to{transform:translateY(100vh)}}/*!\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the "License");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an "AS IS" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */.Tile_tile_gFXfX{border:1px solid var(--light-grey-border);border-radius:8px;box-sizing:border-box;padding:0 0 2rem;background-color:var(--light);font-family:var(--font-family);transition-property:box-shadow;transition-duration:.2s;transition-timing-function:ease-in-out}@media (prefers-reduced-motion: reduce){.Tile_tile_gFXfX{transition-duration:.1ms}}.Tile_tile_gFXfX:hover{box-shadow:0 3px 6px #0000004a}.Tile_tile_gFXfX header{display:flex;align-items:center}.Tile_tile_gFXfX header .Tile_icon_gFXfX{padding:0 1rem}.Tile_tile_gFXfX figure{margin:0 0 1rem;height:3rem}.Tile_tile_gFXfX figure img{vertical-align:top;height:3rem;width:auto}.Tile_tile_gFXfX .Tile_placeholder_gFXfX{font-size:3rem;margin:0 0 1rem;color:var(--greyed-out)}.Tile_tile_gFXfX .Tile_content_gFXfX{display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:default;padding:0 1rem}.Tile_tile_gFXfX.Tile_loading_gFXfX header{display:none}.Tile_tile_gFXfX.Tile_loading_gFXfX .Tile_image_gFXfX{margin-top:2.5rem;border-radius:.5rem;width:3rem;height:3rem;position:relative;overflow:hidden;background-color:var(--skeleton-background-color)}.Tile_tile_gFXfX.Tile_loading_gFXfX .Tile_image_gFXfX:after{position:absolute;top:0;right:0;bottom:0;left:0;transform:translate(-100%);background-image:linear-gradient(90deg,rgba(var(--skeleton-animation-color-rgb),0) 0,rgba(var(--skeleton-animation-color-rgb),.2) 20%,rgba(var(--skeleton-animation-color-rgb),.5) 60%,rgba(var(--skeleton-animation-color-rgb),0));content:"";animation:Tile_shimmer_gFXfX 2s infinite}@media (prefers-reduced-motion: reduce){.Tile_tile_gFXfX.Tile_loading_gFXfX .Tile_image_gFXfX:after{animation:none}}.Tile_tile_gFXfX.Tile_loading_gFXfX .Tile_title_gFXfX{color:transparent;display:inline-block;width:70%;border-radius:.5rem;position:relative;overflow:hidden;background-color:var(--skeleton-background-color)}.Tile_tile_gFXfX.Tile_loading_gFXfX .Tile_title_gFXfX:after{position:absolute;top:0;right:0;bottom:0;left:0;transform:translate(-100%);background-image:linear-gradient(90deg,rgba(var(--skeleton-animation-color-rgb),0) 0,rgba(var(--skeleton-animation-color-rgb),.2) 20%,rgba(var(--skeleton-animation-color-rgb),.5) 60%,rgba(var(--skeleton-animation-color-rgb),0));content:"";animation:Tile_shimmer_gFXfX 2s infinite}@media (prefers-reduced-motion: reduce){.Tile_tile_gFXfX.Tile_loading_gFXfX .Tile_title_gFXfX:after{animation:none}}@keyframes Tile_shimmer_gFXfX{to{transform:translate(100%)}}')),document.head.appendChild(e)}}catch(i){console.error("vite-plugin-css-injected-by-js",i)}}();
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e="Tile_tile_gFXfX",t="Tile_icon_gFXfX",l="Tile_placeholder_gFXfX",o="Tile_content_gFXfX",i="Tile_loading_gFXfX",r="Tile_image_gFXfX",_="Tile_title_gFXfX",g={tile:e,icon:t,placeholder:l,content:o,loading:i,image:r,title:_};exports.content=o,exports.default=g,exports.icon=t,exports.image=r,exports.loading=i,exports.placeholder=l,exports.tile=e,exports.title=_;
+//# sourceMappingURL=Tile.module.scss.cjs.js.map

package/dist/components/Tiles/Tile.module.scss.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tile.module.scss.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/Tiles/Tile.module.scss.es.js

@@ -0,0 +1,28 @@
+!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode('.Tile_sr-only_gFXfX{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.Tile_hidden_gFXfX{display:none}.Tile_slide-in_gFXfX{animation:Tile_slide-in_gFXfX .5s forwards}@media (prefers-reduced-motion: reduce){.Tile_slide-in_gFXfX{animation-duration:.1ms}}.Tile_slide-out_gFXfX{animation:Tile_slide-out_gFXfX .5s forwards}@media (prefers-reduced-motion: reduce){.Tile_slide-out_gFXfX{animation-duration:.1ms}}@keyframes Tile_slide-in_gFXfX{0%{transform:translateY(100vh)}to{transform:translateY(0)}}@keyframes Tile_slide-out_gFXfX{0%{transform:translateY(0)}to{transform:translateY(100vh)}}/*!\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the "License");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an "AS IS" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */.Tile_tile_gFXfX{border:1px solid var(--light-grey-border);border-radius:8px;box-sizing:border-box;padding:0 0 2rem;background-color:var(--light);font-family:var(--font-family);transition-property:box-shadow;transition-duration:.2s;transition-timing-function:ease-in-out}@media (prefers-reduced-motion: reduce){.Tile_tile_gFXfX{transition-duration:.1ms}}.Tile_tile_gFXfX:hover{box-shadow:0 3px 6px #0000004a}.Tile_tile_gFXfX header{display:flex;align-items:center}.Tile_tile_gFXfX header .Tile_icon_gFXfX{padding:0 1rem}.Tile_tile_gFXfX figure{margin:0 0 1rem;height:3rem}.Tile_tile_gFXfX figure img{vertical-align:top;height:3rem;width:auto}.Tile_tile_gFXfX .Tile_placeholder_gFXfX{font-size:3rem;margin:0 0 1rem;color:var(--greyed-out)}.Tile_tile_gFXfX .Tile_content_gFXfX{display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:default;padding:0 1rem}.Tile_tile_gFXfX.Tile_loading_gFXfX header{display:none}.Tile_tile_gFXfX.Tile_loading_gFXfX .Tile_image_gFXfX{margin-top:2.5rem;border-radius:.5rem;width:3rem;height:3rem;position:relative;overflow:hidden;background-color:var(--skeleton-background-color)}.Tile_tile_gFXfX.Tile_loading_gFXfX .Tile_image_gFXfX:after{position:absolute;top:0;right:0;bottom:0;left:0;transform:translate(-100%);background-image:linear-gradient(90deg,rgba(var(--skeleton-animation-color-rgb),0) 0,rgba(var(--skeleton-animation-color-rgb),.2) 20%,rgba(var(--skeleton-animation-color-rgb),.5) 60%,rgba(var(--skeleton-animation-color-rgb),0));content:"";animation:Tile_shimmer_gFXfX 2s infinite}@media (prefers-reduced-motion: reduce){.Tile_tile_gFXfX.Tile_loading_gFXfX .Tile_image_gFXfX:after{animation:none}}.Tile_tile_gFXfX.Tile_loading_gFXfX .Tile_title_gFXfX{color:transparent;display:inline-block;width:70%;border-radius:.5rem;position:relative;overflow:hidden;background-color:var(--skeleton-background-color)}.Tile_tile_gFXfX.Tile_loading_gFXfX .Tile_title_gFXfX:after{position:absolute;top:0;right:0;bottom:0;left:0;transform:translate(-100%);background-image:linear-gradient(90deg,rgba(var(--skeleton-animation-color-rgb),0) 0,rgba(var(--skeleton-animation-color-rgb),.2) 20%,rgba(var(--skeleton-animation-color-rgb),.5) 60%,rgba(var(--skeleton-animation-color-rgb),0));content:"";animation:Tile_shimmer_gFXfX 2s infinite}@media (prefers-reduced-motion: reduce){.Tile_tile_gFXfX.Tile_loading_gFXfX .Tile_title_gFXfX:after{animation:none}}@keyframes Tile_shimmer_gFXfX{to{transform:translate(100%)}}')),document.head.appendChild(e)}}catch(i){console.error("vite-plugin-css-injected-by-js",i)}}();
+const tile = "Tile_tile_gFXfX";
+const icon = "Tile_icon_gFXfX";
+const placeholder = "Tile_placeholder_gFXfX";
+const content = "Tile_content_gFXfX";
+const loading = "Tile_loading_gFXfX";
+const image = "Tile_image_gFXfX";
+const title = "Tile_title_gFXfX";
+const classes = {
+  tile,
+  icon,
+  placeholder,
+  content,
+  loading,
+  image,
+  title
+};
+export {
+  content,
+  classes as default,
+  icon,
+  image,
+  loading,
+  placeholder,
+  tile,
+  title
+};
+//# sourceMappingURL=Tile.module.scss.es.js.map

package/dist/components/Tiles/Tile.module.scss.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tile.module.scss.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;"}

package/dist/components/Tiles/Tiles.cjs.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),l=require("./Tiles.module.scss.cjs.js"),r=require("./Tile.cjs.js"),a=e.forwardRef((({children:a,className:i,loading:t=!1,...c},o)=>e.createElement("div",{...c,ref:o,className:`${l.default.tiles} ${i??""}`,"aria-live":"polite","aria-busy":t},t?[e.createElement(r.Tile,{key:"placeholder1",title:"placeholder",imageProps:{src:"placeholder"},loading:!0}),e.createElement(r.Tile,{key:"placeholder2",title:"placeholder",imageProps:{src:"placeholder"},loading:!0}),e.createElement(r.Tile,{key:"placeholder3",title:"placeholder",imageProps:{src:"placeholder"},loading:!0})]:a)));exports.Tiles=a;
+//# sourceMappingURL=Tiles.cjs.js.map

package/dist/components/Tiles/Tiles.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tiles.cjs.js","sources":["../../../src/components/Tiles/Tiles.tsx"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\nimport React, { ForwardRefRenderFunction, ComponentPropsWithRef, ReactNode } from \"react\";\nimport classes from \"./Tiles.module.scss\";\nimport { Tile } from \"./Tile\";\n\nexport interface Props extends ComponentPropsWithRef<\"div\"> {\n  children: ReactNode;\n  loading?: boolean;\n}\n\nconst TilesComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (\n  { children, className, loading = false, ...rest }: Props,\n  ref\n) => {\n  const renderChildren = () => {\n    if (loading) {\n      return [\n        <Tile\n          key=\"placeholder1\"\n          title=\"placeholder\"\n          imageProps={{ src: \"placeholder\" }}\n          loading={true}\n        />,\n        <Tile\n          key=\"placeholder2\"\n          title=\"placeholder\"\n          imageProps={{ src: \"placeholder\" }}\n          loading={true}\n        />,\n        <Tile\n          key=\"placeholder3\"\n          title=\"placeholder\"\n          imageProps={{ src: \"placeholder\" }}\n          loading={true}\n        />\n      ];\n    }\n\n    return children;\n  };\n\n  return (\n    <div\n      {...rest}\n      ref={ref}\n      className={`${classes[\"tiles\"]} ${className ?? \"\"}`}\n      aria-live=\"polite\"\n      aria-busy={loading}\n    >\n      {renderChildren()}\n    </div>\n  );\n};\n\nexport const Tiles = React.forwardRef(TilesComponent);\n"],"names":["Tiles","React","forwardRef","children","className","loading","rest","ref","createElement","classes","Tile","key","title","imageProps","src"],"mappings":"4KAqEaA,EAAQC,EAAMC,YA5C6C,EACpEC,WAAUC,YAAWC,WAAU,KAAUC,GAC3CC,IA8BEN,EAAAO,cAAC,MAAA,IACKF,EACJC,MACAH,UAAW,GAAGK,UAAe,SAAKL,GAAa,KAC/C,YAAU,SACV,YAAWC,GAhCTA,EACK,CACLJ,EAAAO,cAACE,EAAAA,KAAA,CACCC,IAAI,eACJC,MAAM,cACNC,WAAY,CAAEC,IAAK,eACnBT,SAAS,IAEXJ,EAAAO,cAACE,EAAAA,KAAA,CACCC,IAAI,eACJC,MAAM,cACNC,WAAY,CAAEC,IAAK,eACnBT,SAAS,IAEXJ,EAAAO,cAACE,EAAAA,KAAA,CACCC,IAAI,eACJC,MAAM,cACNC,WAAY,CAAEC,IAAK,eACnBT,SAAS,KAKRF"}

package/dist/components/Tiles/Tiles.es.js

@@ -0,0 +1,55 @@
+import React from "react";
+import classes from "./Tiles.module.scss.es.js";
+import { Tile } from "./Tile.es.js";
+const TilesComponent = ({ children, className, loading = false, ...rest }, ref) => {
+  const renderChildren = () => {
+    if (loading) {
+      return [
+        /* @__PURE__ */ React.createElement(
+          Tile,
+          {
+            key: "placeholder1",
+            title: "placeholder",
+            imageProps: { src: "placeholder" },
+            loading: true
+          }
+        ),
+        /* @__PURE__ */ React.createElement(
+          Tile,
+          {
+            key: "placeholder2",
+            title: "placeholder",
+            imageProps: { src: "placeholder" },
+            loading: true
+          }
+        ),
+        /* @__PURE__ */ React.createElement(
+          Tile,
+          {
+            key: "placeholder3",
+            title: "placeholder",
+            imageProps: { src: "placeholder" },
+            loading: true
+          }
+        )
+      ];
+    }
+    return children;
+  };
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ...rest,
+      ref,
+      className: `${classes["tiles"]} ${className ?? ""}`,
+      "aria-live": "polite",
+      "aria-busy": loading
+    },
+    renderChildren()
+  );
+};
+const Tiles = React.forwardRef(TilesComponent);
+export {
+  Tiles
+};
+//# sourceMappingURL=Tiles.es.js.map

package/dist/components/Tiles/Tiles.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tiles.es.js","sources":["../../../src/components/Tiles/Tiles.tsx"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\nimport React, { ForwardRefRenderFunction, ComponentPropsWithRef, ReactNode } from \"react\";\nimport classes from \"./Tiles.module.scss\";\nimport { Tile } from \"./Tile\";\n\nexport interface Props extends ComponentPropsWithRef<\"div\"> {\n  children: ReactNode;\n  loading?: boolean;\n}\n\nconst TilesComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (\n  { children, className, loading = false, ...rest }: Props,\n  ref\n) => {\n  const renderChildren = () => {\n    if (loading) {\n      return [\n        <Tile\n          key=\"placeholder1\"\n          title=\"placeholder\"\n          imageProps={{ src: \"placeholder\" }}\n          loading={true}\n        />,\n        <Tile\n          key=\"placeholder2\"\n          title=\"placeholder\"\n          imageProps={{ src: \"placeholder\" }}\n          loading={true}\n        />,\n        <Tile\n          key=\"placeholder3\"\n          title=\"placeholder\"\n          imageProps={{ src: \"placeholder\" }}\n          loading={true}\n        />\n      ];\n    }\n\n    return children;\n  };\n\n  return (\n    <div\n      {...rest}\n      ref={ref}\n      className={`${classes[\"tiles\"]} ${className ?? \"\"}`}\n      aria-live=\"polite\"\n      aria-busy={loading}\n    >\n      {renderChildren()}\n    </div>\n  );\n};\n\nexport const Tiles = React.forwardRef(TilesComponent);\n"],"names":[],"mappings":";;;AAyBA,MAAM,iBAAkE,CACtE,EAAE,UAAU,WAAW,UAAU,OAAO,GAAG,KAAK,GAChD,QACG;AACH,QAAM,iBAAiB,MAAM;AAC3B,QAAI,SAAS;AACJ,aAAA;AAAA,QACL,sBAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAI;AAAA,YACJ,OAAM;AAAA,YACN,YAAY,EAAE,KAAK,cAAc;AAAA,YACjC,SAAS;AAAA,UAAA;AAAA,QACX;AAAA,QACA,sBAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAI;AAAA,YACJ,OAAM;AAAA,YACN,YAAY,EAAE,KAAK,cAAc;AAAA,YACjC,SAAS;AAAA,UAAA;AAAA,QACX;AAAA,QACA,sBAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAI;AAAA,YACJ,OAAM;AAAA,YACN,YAAY,EAAE,KAAK,cAAc;AAAA,YACjC,SAAS;AAAA,UAAA;AAAA,QAAA;AAAA,MAEb;AAAA,IAAA;AAGK,WAAA;AAAA,EACT;AAGE,SAAA,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA,WAAW,GAAG,QAAQ,OAAO,CAAC,IAAI,aAAa,EAAE;AAAA,MACjD,aAAU;AAAA,MACV,aAAW;AAAA,IAAA;AAAA,IAEV,eAAe;AAAA,EAClB;AAEJ;AAEa,MAAA,QAAQ,MAAM,WAAW,cAAc;"}

package/dist/components/Tiles/Tiles.module.scss.cjs.js

@@ -0,0 +1,3 @@
+!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode('/*!\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the "License");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an "AS IS" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */.Tiles_tiles_gFXfX{display:grid;grid-gap:1rem;grid-template-columns:repeat(1,1fr)}@media screen and (min-width: 30em){.Tiles_tiles_gFXfX{grid-template-columns:repeat(auto-fit,minmax(14.5rem,1fr))}}')),document.head.appendChild(e)}}catch(n){console.error("vite-plugin-css-injected-by-js",n)}}();
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e="Tiles_tiles_gFXfX",t={tiles:e};exports.default=t,exports.tiles=e;
+//# sourceMappingURL=Tiles.module.scss.cjs.js.map

package/dist/components/Tiles/Tiles.module.scss.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tiles.module.scss.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/Tiles/Tiles.module.scss.es.js

@@ -0,0 +1,10 @@
+!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode('/*!\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the "License");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an "AS IS" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */.Tiles_tiles_gFXfX{display:grid;grid-gap:1rem;grid-template-columns:repeat(1,1fr)}@media screen and (min-width: 30em){.Tiles_tiles_gFXfX{grid-template-columns:repeat(auto-fit,minmax(14.5rem,1fr))}}')),document.head.appendChild(e)}}catch(n){console.error("vite-plugin-css-injected-by-js",n)}}();
+const tiles = "Tiles_tiles_gFXfX";
+const classes = {
+  tiles
+};
+export {
+  classes as default,
+  tiles
+};
+//# sourceMappingURL=Tiles.module.scss.es.js.map

package/dist/components/Tiles/Tiles.module.scss.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tiles.module.scss.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/components/Tooltip/Tooltip.cjs.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react"),e=require("../Icon/Icon.cjs.js"),o=require("./Tooltip.module.scss.cjs.js"),r=require("../../util/helper.cjs.js"),i=require("../../hooks/usePosition.cjs.js"),a=require("react-dom"),l=require("../../hooks/useGetDomRoot.cjs.js"),n={left:{placement:{horizontal:"left",vertical:"center"},offset:{left:0,right:12,top:0,bottom:0},transformOrigin:{horizontal:"right",vertical:"center"}},leftEnd:{placement:{horizontal:"left",vertical:"top"},offset:{left:0,right:12,top:-12,bottom:0},transformOrigin:{horizontal:"right",vertical:"top"}},leftStart:{placement:{horizontal:"left",vertical:"bottom"},offset:{left:0,right:12,top:0,bottom:-12},transformOrigin:{horizontal:"right",vertical:"bottom"}},right:{placement:{horizontal:"right",vertical:"center"},offset:{left:12,right:0,top:0,bottom:0},transformOrigin:{horizontal:"left",vertical:"center"}},rightEnd:{placement:{horizontal:"right",vertical:"top"},offset:{left:12,right:0,top:-12,bottom:0},transformOrigin:{horizontal:"left",vertical:"top"}},rightStart:{placement:{horizontal:"right",vertical:"bottom"},offset:{left:12,right:0,top:0,bottom:-12},transformOrigin:{horizontal:"left",vertical:"bottom"}},top:{placement:{horizontal:"center",vertical:"top"},offset:{left:0,right:0,top:0,bottom:12},transformOrigin:{horizontal:"center",vertical:"bottom"}},topEnd:{placement:{horizontal:"left",vertical:"top"},offset:{left:-12,right:0,top:0,bottom:12},transformOrigin:{horizontal:"left",vertical:"bottom"}},topStart:{placement:{horizontal:"right",vertical:"top"},offset:{left:0,right:-12,top:0,bottom:12},transformOrigin:{horizontal:"right",vertical:"bottom"}},bottom:{placement:{horizontal:"center",vertical:"bottom"},offset:{left:0,right:0,top:12,bottom:0},transformOrigin:{horizontal:"center",vertical:"top"}},bottomEnd:{placement:{horizontal:"left",vertical:"bottom"},offset:{left:-12,right:0,top:12,bottom:0},transformOrigin:{horizontal:"left",vertical:"top"}},bottomStart:{placement:{horizontal:"right",vertical:"bottom"},offset:{left:0,right:-12,top:12,bottom:0},transformOrigin:{horizontal:"right",vertical:"top"}}},s=t.forwardRef((({title:s,children:c,className:f,domRoot:m,label:p,location:u="right",position:h="center",color:g="black",icon:d,...b},v)=>{const[z]=t.useState(r.generateID()),[E,O]=t.useState(!1),[y,$]=t.useState(!1),j=v||t.createRef(),{root:N}=l.useGetDomRoot(m,j),S=t.useRef(null),q=t.useRef(null),I=t.useMemo((()=>"center"===h?u:`${u}${h.charAt(0).toUpperCase()+h.slice(1)}`),[u,h]),{top:L,bottom:R,right:k,left:M,calculatePosition:P}=i.usePosition({relativeElement:S,elementToBePositioned:q,placement:n[I].placement,offset:n[I].offset,transformOrigin:n[I].transformOrigin}),w=()=>{O(!0),requestAnimationFrame((()=>{$(!0)}))},x=()=>{$(!1)};t.useEffect((()=>{if(!y)return;const t=t=>{"Escape"===t.key&&x()};return document.addEventListener("keyup",t),()=>{document.removeEventListener("keyup",t)}}),[y]),t.useLayoutEffect((()=>{E&&P()}),[E]),t.useEffect((()=>{const t=q.current;if(!t||y)return;const e=t=>{"opacity"===t.propertyName&&O(!1)};return t.addEventListener("transitionend",e),()=>{t.removeEventListener("transitionend",e)}}),[y]);const A=`${o.default.tooltip} ${o.default[g]} ${y?o.default.visible:""} ${o.default[I.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g,"$1-$2").toLowerCase()]}`;return t.createElement("div",{...b,ref:j,className:`${o.default.wrapper} ${f??""}`},t.isValidElement(p)?t.cloneElement(p,{ref:S,onMouseEnter:w,onMouseLeave:x,onFocus:w,onBlur:x,"aria-describedby":z,tabIndex:0,className:o.default.label}):t.createElement("span",{className:o.default.label,tabIndex:0,onFocus:w,onBlur:x,"aria-describedby":z},p),t.createElement("div",{className:`${o.default["tooltip-wrapper"]}`},!t.isValidElement(p)&&t.createElement(e.Icon,{ref:S,tag:"div",onMouseEnter:w,onMouseLeave:x,icon:e.Icons.InfoCircle,"aria-describedby":z,className:`${o.default.icon}`}),E&&a.createPortal(t.createElement("div",{ref:q,style:{...b.style,top:L,left:M,right:k,bottom:R},id:z,className:A},s&&t.createElement("span",{className:o.default["tooltip-title"]},s),c),N)))}));exports.Tooltip=s;
+//# sourceMappingURL=Tooltip.cjs.js.map

package/dist/components/Tooltip/Tooltip.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.cjs.js","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\nimport React, {\n  ComponentPropsWithRef,\n  createRef,\n  ForwardRefRenderFunction,\n  ReactElement,\n  ReactNode,\n  RefObject,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState\n} from \"react\";\nimport { Icon, Icons } from \"../Icon/Icon\";\nimport classes from \"./Tooltip.module.scss\";\nimport { generateID } from \"../../util/helper\";\nimport { Offset, Placement, usePosition } from \"../../hooks/usePosition\";\nimport { createPortal } from \"react-dom\";\nimport { useGetDomRoot } from \"../../hooks/useGetDomRoot\";\n\nexport interface Props extends ComponentPropsWithRef<\"div\"> {\n  label: ReactNode;\n  title?: string;\n  children: ReactNode;\n  domRoot?: HTMLElement;\n  icon?: Icons;\n  location?: \"left\" | \"right\" | \"top\" | \"bottom\";\n  color?: \"black\" | \"blue\";\n  position?: \"start\" | \"center\" | \"end\";\n}\n\ninterface DefaultPosition {\n  placement: Placement;\n  offset: Offset;\n  transformOrigin: Placement;\n}\n\ntype Location = \"left\" | \"right\" | \"top\" | \"bottom\";\ntype Position = \"start\" | \"end\";\ntype LocationPosition = `${Location}${Capitalize<Position>}` | `${Location}`;\nconst locations: Record<LocationPosition, DefaultPosition> = {\n  left: {\n    placement: { horizontal: \"left\", vertical: \"center\" },\n    offset: { left: 0, right: 12, top: 0, bottom: 0 },\n    transformOrigin: { horizontal: \"right\", vertical: \"center\" }\n  },\n  leftEnd: {\n    placement: { horizontal: \"left\", vertical: \"top\" },\n    offset: { left: 0, right: 12, top: -12, bottom: 0 },\n    transformOrigin: { horizontal: \"right\", vertical: \"top\" }\n  },\n  leftStart: {\n    placement: { horizontal: \"left\", vertical: \"bottom\" },\n    offset: { left: 0, right: 12, top: 0, bottom: -12 },\n    transformOrigin: { horizontal: \"right\", vertical: \"bottom\" }\n  },\n  right: {\n    placement: { horizontal: \"right\", vertical: \"center\" },\n    offset: { left: 12, right: 0, top: 0, bottom: 0 },\n    transformOrigin: { horizontal: \"left\", vertical: \"center\" }\n  },\n  rightEnd: {\n    placement: { horizontal: \"right\", vertical: \"top\" },\n    offset: { left: 12, right: 0, top: -12, bottom: 0 },\n    transformOrigin: { horizontal: \"left\", vertical: \"top\" }\n  },\n  rightStart: {\n    placement: { horizontal: \"right\", vertical: \"bottom\" },\n    offset: { left: 12, right: 0, top: 0, bottom: -12 },\n    transformOrigin: { horizontal: \"left\", vertical: \"bottom\" }\n  },\n  top: {\n    placement: { horizontal: \"center\", vertical: \"top\" },\n    offset: { left: 0, right: 0, top: 0, bottom: 12 },\n    transformOrigin: { horizontal: \"center\", vertical: \"bottom\" }\n  },\n  topEnd: {\n    placement: { horizontal: \"left\", vertical: \"top\" },\n    offset: { left: -12, right: 0, top: 0, bottom: 12 },\n    transformOrigin: { horizontal: \"left\", vertical: \"bottom\" }\n  },\n  topStart: {\n    placement: { horizontal: \"right\", vertical: \"top\" },\n    offset: { left: 0, right: -12, top: 0, bottom: 12 },\n    transformOrigin: { horizontal: \"right\", vertical: \"bottom\" }\n  },\n  bottom: {\n    placement: { horizontal: \"center\", vertical: \"bottom\" },\n    offset: { left: 0, right: 0, top: 12, bottom: 0 },\n    transformOrigin: { horizontal: \"center\", vertical: \"top\" }\n  },\n  bottomEnd: {\n    placement: { horizontal: \"left\", vertical: \"bottom\" },\n    offset: { left: -12, right: 0, top: 12, bottom: 0 },\n    transformOrigin: { horizontal: \"left\", vertical: \"top\" }\n  },\n  bottomStart: {\n    placement: { horizontal: \"right\", vertical: \"bottom\" },\n    offset: { left: 0, right: -12, top: 12, bottom: 0 },\n    transformOrigin: { horizontal: \"right\", vertical: \"top\" }\n  }\n};\n\nconst TooltipComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (\n  {\n    title,\n    children,\n    className,\n    domRoot,\n    label,\n    location = \"right\",\n    position = \"center\",\n    color = \"black\",\n    icon,\n    ...rest\n  }: Props,\n  ref\n) => {\n  const [identifier] = useState(generateID());\n  const [shouldRender, setShouldRender] = useState(false);\n  const [visible, setVisible] = useState(false);\n  const wrappingDivRef = (ref as RefObject<HTMLDivElement>) || createRef<HTMLDivElement>();\n  const { root } = useGetDomRoot(domRoot, wrappingDivRef);\n\n  const relativeElement = useRef<HTMLDivElement>(null);\n  const elementToBePositioned = useRef<HTMLDivElement>(null);\n\n  const determinedLocation = useMemo(() => {\n    if (position === \"center\") {\n      return location;\n    }\n\n    return `${location}${position.charAt(0).toUpperCase() + position.slice(1)}` as LocationPosition;\n  }, [location, position]);\n\n  const { top, bottom, right, left, calculatePosition } = usePosition({\n    relativeElement: relativeElement,\n    elementToBePositioned: elementToBePositioned,\n    placement: locations[determinedLocation].placement,\n    offset: locations[determinedLocation].offset,\n    transformOrigin: locations[determinedLocation].transformOrigin\n  });\n\n  const show = () => {\n    setShouldRender(true);\n    requestAnimationFrame(() => {\n      setVisible(true);\n    });\n  };\n\n  const hide = () => {\n    setVisible(false);\n  };\n\n  useEffect(() => {\n    if (!visible) {\n      return;\n    }\n\n    const escapePressHandler = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") {\n        hide();\n      }\n    };\n\n    document.addEventListener(\"keyup\", escapePressHandler);\n\n    return () => {\n      document.removeEventListener(\"keyup\", escapePressHandler);\n    };\n  }, [visible]);\n\n  useLayoutEffect(() => {\n    if (shouldRender) {\n      calculatePosition();\n    }\n  }, [shouldRender]);\n\n  useEffect(() => {\n    const element = elementToBePositioned.current;\n\n    if (!element || visible) {\n      return;\n    }\n\n    const handleTransitionEnd = (event: TransitionEvent) => {\n      if (event.propertyName === \"opacity\") {\n        setShouldRender(false);\n      }\n    };\n\n    element.addEventListener(\"transitionend\", handleTransitionEnd);\n\n    return () => {\n      element.removeEventListener(\"transitionend\", handleTransitionEnd);\n    };\n  }, [visible]);\n\n  const renderChildren = () => {\n    if (React.isValidElement(label)) {\n      return React.cloneElement(label as ReactElement, {\n        ref: relativeElement,\n        onMouseEnter: show,\n        onMouseLeave: hide,\n        onFocus: show,\n        onBlur: hide,\n        \"aria-describedby\": identifier,\n        tabIndex: 0,\n        className: classes[\"label\"]\n      });\n    }\n\n    return (\n      <span\n        className={classes[\"label\"]}\n        tabIndex={0}\n        onFocus={show}\n        onBlur={hide}\n        aria-describedby={identifier}\n      >\n        {label}\n      </span>\n    );\n  };\n\n  const tooltipClasses = `${classes[\"tooltip\"]} ${classes[color]} ${\n    visible ? classes[\"visible\"] : \"\"\n  } ${classes[determinedLocation.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, \"$1-$2\").toLowerCase()]}`;\n\n  return (\n    <div {...rest} ref={wrappingDivRef} className={`${classes.wrapper} ${className ?? \"\"}`}>\n      {renderChildren()}\n      <div className={`${classes[\"tooltip-wrapper\"]}`}>\n        {!React.isValidElement(label) && (\n          <Icon\n            ref={relativeElement}\n            tag=\"div\"\n            onMouseEnter={show}\n            onMouseLeave={hide}\n            icon={Icons.InfoCircle}\n            aria-describedby={identifier}\n            className={`${classes.icon}`}\n          />\n        )}\n        {shouldRender &&\n          createPortal(\n            <div\n              ref={elementToBePositioned}\n              style={{\n                ...rest.style,\n                top: top,\n                left: left,\n                right: right,\n                bottom: bottom\n              }}\n              id={identifier}\n              className={tooltipClasses}\n            >\n              {title && <span className={classes[\"tooltip-title\"]}>{title}</span>}\n              {children}\n            </div>,\n            root\n          )}\n      </div>\n    </div>\n  );\n};\n\nexport const Tooltip = React.forwardRef(TooltipComponent);\n"],"names":["locations","left","placement","horizontal","vertical","offset","right","top","bottom","transformOrigin","leftEnd","leftStart","rightEnd","rightStart","topEnd","topStart","bottomEnd","bottomStart","Tooltip","React","forwardRef","title","children","className","domRoot","label","location","position","color","icon","rest","ref","identifier","useState","generateID","shouldRender","setShouldRender","visible","setVisible","wrappingDivRef","createRef","root","useGetDomRoot","relativeElement","useRef","elementToBePositioned","determinedLocation","useMemo","charAt","toUpperCase","slice","calculatePosition","usePosition","show","requestAnimationFrame","hide","useEffect","escapePressHandler","event","key","document","addEventListener","removeEventListener","useLayoutEffect","element","current","handleTransitionEnd","propertyName","tooltipClasses","classes","default","replace","toLowerCase","createElement","wrapper","isValidElement","cloneElement","onMouseEnter","onMouseLeave","onFocus","onBlur","tabIndex","Icon","tag","Icons","InfoCircle","createPortal","style","id"],"mappings":"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"}

package/dist/components/Tooltip/Tooltip.es.js

@@ -0,0 +1,207 @@
+import React, { useState, createRef, useRef, useMemo, useEffect, useLayoutEffect } from "react";
+import { Icon, Icons } from "../Icon/Icon.es.js";
+import classes from "./Tooltip.module.scss.es.js";
+import { generateID } from "../../util/helper.es.js";
+import { usePosition } from "../../hooks/usePosition.es.js";
+import { createPortal } from "react-dom";
+import { useGetDomRoot } from "../../hooks/useGetDomRoot.es.js";
+const locations = {
+  left: {
+    placement: { horizontal: "left", vertical: "center" },
+    offset: { left: 0, right: 12, top: 0, bottom: 0 },
+    transformOrigin: { horizontal: "right", vertical: "center" }
+  },
+  leftEnd: {
+    placement: { horizontal: "left", vertical: "top" },
+    offset: { left: 0, right: 12, top: -12, bottom: 0 },
+    transformOrigin: { horizontal: "right", vertical: "top" }
+  },
+  leftStart: {
+    placement: { horizontal: "left", vertical: "bottom" },
+    offset: { left: 0, right: 12, top: 0, bottom: -12 },
+    transformOrigin: { horizontal: "right", vertical: "bottom" }
+  },
+  right: {
+    placement: { horizontal: "right", vertical: "center" },
+    offset: { left: 12, right: 0, top: 0, bottom: 0 },
+    transformOrigin: { horizontal: "left", vertical: "center" }
+  },
+  rightEnd: {
+    placement: { horizontal: "right", vertical: "top" },
+    offset: { left: 12, right: 0, top: -12, bottom: 0 },
+    transformOrigin: { horizontal: "left", vertical: "top" }
+  },
+  rightStart: {
+    placement: { horizontal: "right", vertical: "bottom" },
+    offset: { left: 12, right: 0, top: 0, bottom: -12 },
+    transformOrigin: { horizontal: "left", vertical: "bottom" }
+  },
+  top: {
+    placement: { horizontal: "center", vertical: "top" },
+    offset: { left: 0, right: 0, top: 0, bottom: 12 },
+    transformOrigin: { horizontal: "center", vertical: "bottom" }
+  },
+  topEnd: {
+    placement: { horizontal: "left", vertical: "top" },
+    offset: { left: -12, right: 0, top: 0, bottom: 12 },
+    transformOrigin: { horizontal: "left", vertical: "bottom" }
+  },
+  topStart: {
+    placement: { horizontal: "right", vertical: "top" },
+    offset: { left: 0, right: -12, top: 0, bottom: 12 },
+    transformOrigin: { horizontal: "right", vertical: "bottom" }
+  },
+  bottom: {
+    placement: { horizontal: "center", vertical: "bottom" },
+    offset: { left: 0, right: 0, top: 12, bottom: 0 },
+    transformOrigin: { horizontal: "center", vertical: "top" }
+  },
+  bottomEnd: {
+    placement: { horizontal: "left", vertical: "bottom" },
+    offset: { left: -12, right: 0, top: 12, bottom: 0 },
+    transformOrigin: { horizontal: "left", vertical: "top" }
+  },
+  bottomStart: {
+    placement: { horizontal: "right", vertical: "bottom" },
+    offset: { left: 0, right: -12, top: 12, bottom: 0 },
+    transformOrigin: { horizontal: "right", vertical: "top" }
+  }
+};
+const TooltipComponent = ({
+  title,
+  children,
+  className,
+  domRoot,
+  label,
+  location = "right",
+  position = "center",
+  color = "black",
+  icon,
+  ...rest
+}, ref) => {
+  const [identifier] = useState(generateID());
+  const [shouldRender, setShouldRender] = useState(false);
+  const [visible, setVisible] = useState(false);
+  const wrappingDivRef = ref || createRef();
+  const { root } = useGetDomRoot(domRoot, wrappingDivRef);
+  const relativeElement = useRef(null);
+  const elementToBePositioned = useRef(null);
+  const determinedLocation = useMemo(() => {
+    if (position === "center") {
+      return location;
+    }
+    return `${location}${position.charAt(0).toUpperCase() + position.slice(1)}`;
+  }, [location, position]);
+  const { top, bottom, right, left, calculatePosition } = usePosition({
+    relativeElement,
+    elementToBePositioned,
+    placement: locations[determinedLocation].placement,
+    offset: locations[determinedLocation].offset,
+    transformOrigin: locations[determinedLocation].transformOrigin
+  });
+  const show = () => {
+    setShouldRender(true);
+    requestAnimationFrame(() => {
+      setVisible(true);
+    });
+  };
+  const hide = () => {
+    setVisible(false);
+  };
+  useEffect(() => {
+    if (!visible) {
+      return;
+    }
+    const escapePressHandler = (event) => {
+      if (event.key === "Escape") {
+        hide();
+      }
+    };
+    document.addEventListener("keyup", escapePressHandler);
+    return () => {
+      document.removeEventListener("keyup", escapePressHandler);
+    };
+  }, [visible]);
+  useLayoutEffect(() => {
+    if (shouldRender) {
+      calculatePosition();
+    }
+  }, [shouldRender]);
+  useEffect(() => {
+    const element = elementToBePositioned.current;
+    if (!element || visible) {
+      return;
+    }
+    const handleTransitionEnd = (event) => {
+      if (event.propertyName === "opacity") {
+        setShouldRender(false);
+      }
+    };
+    element.addEventListener("transitionend", handleTransitionEnd);
+    return () => {
+      element.removeEventListener("transitionend", handleTransitionEnd);
+    };
+  }, [visible]);
+  const renderChildren = () => {
+    if (React.isValidElement(label)) {
+      return React.cloneElement(label, {
+        ref: relativeElement,
+        onMouseEnter: show,
+        onMouseLeave: hide,
+        onFocus: show,
+        onBlur: hide,
+        "aria-describedby": identifier,
+        tabIndex: 0,
+        className: classes["label"]
+      });
+    }
+    return /* @__PURE__ */ React.createElement(
+      "span",
+      {
+        className: classes["label"],
+        tabIndex: 0,
+        onFocus: show,
+        onBlur: hide,
+        "aria-describedby": identifier
+      },
+      label
+    );
+  };
+  const tooltipClasses = `${classes["tooltip"]} ${classes[color]} ${visible ? classes["visible"] : ""} ${classes[determinedLocation.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase()]}`;
+  return /* @__PURE__ */ React.createElement("div", { ...rest, ref: wrappingDivRef, className: `${classes.wrapper} ${className ?? ""}` }, renderChildren(), /* @__PURE__ */ React.createElement("div", { className: `${classes["tooltip-wrapper"]}` }, !React.isValidElement(label) && /* @__PURE__ */ React.createElement(
+    Icon,
+    {
+      ref: relativeElement,
+      tag: "div",
+      onMouseEnter: show,
+      onMouseLeave: hide,
+      icon: Icons.InfoCircle,
+      "aria-describedby": identifier,
+      className: `${classes.icon}`
+    }
+  ), shouldRender && createPortal(
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        ref: elementToBePositioned,
+        style: {
+          ...rest.style,
+          top,
+          left,
+          right,
+          bottom
+        },
+        id: identifier,
+        className: tooltipClasses
+      },
+      title && /* @__PURE__ */ React.createElement("span", { className: classes["tooltip-title"] }, title),
+      children
+    ),
+    root
+  )));
+};
+const Tooltip = React.forwardRef(TooltipComponent);
+export {
+  Tooltip
+};
+//# sourceMappingURL=Tooltip.es.js.map

package/dist/components/Tooltip/Tooltip.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.es.js","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\nimport React, {\n  ComponentPropsWithRef,\n  createRef,\n  ForwardRefRenderFunction,\n  ReactElement,\n  ReactNode,\n  RefObject,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState\n} from \"react\";\nimport { Icon, Icons } from \"../Icon/Icon\";\nimport classes from \"./Tooltip.module.scss\";\nimport { generateID } from \"../../util/helper\";\nimport { Offset, Placement, usePosition } from \"../../hooks/usePosition\";\nimport { createPortal } from \"react-dom\";\nimport { useGetDomRoot } from \"../../hooks/useGetDomRoot\";\n\nexport interface Props extends ComponentPropsWithRef<\"div\"> {\n  label: ReactNode;\n  title?: string;\n  children: ReactNode;\n  domRoot?: HTMLElement;\n  icon?: Icons;\n  location?: \"left\" | \"right\" | \"top\" | \"bottom\";\n  color?: \"black\" | \"blue\";\n  position?: \"start\" | \"center\" | \"end\";\n}\n\ninterface DefaultPosition {\n  placement: Placement;\n  offset: Offset;\n  transformOrigin: Placement;\n}\n\ntype Location = \"left\" | \"right\" | \"top\" | \"bottom\";\ntype Position = \"start\" | \"end\";\ntype LocationPosition = `${Location}${Capitalize<Position>}` | `${Location}`;\nconst locations: Record<LocationPosition, DefaultPosition> = {\n  left: {\n    placement: { horizontal: \"left\", vertical: \"center\" },\n    offset: { left: 0, right: 12, top: 0, bottom: 0 },\n    transformOrigin: { horizontal: \"right\", vertical: \"center\" }\n  },\n  leftEnd: {\n    placement: { horizontal: \"left\", vertical: \"top\" },\n    offset: { left: 0, right: 12, top: -12, bottom: 0 },\n    transformOrigin: { horizontal: \"right\", vertical: \"top\" }\n  },\n  leftStart: {\n    placement: { horizontal: \"left\", vertical: \"bottom\" },\n    offset: { left: 0, right: 12, top: 0, bottom: -12 },\n    transformOrigin: { horizontal: \"right\", vertical: \"bottom\" }\n  },\n  right: {\n    placement: { horizontal: \"right\", vertical: \"center\" },\n    offset: { left: 12, right: 0, top: 0, bottom: 0 },\n    transformOrigin: { horizontal: \"left\", vertical: \"center\" }\n  },\n  rightEnd: {\n    placement: { horizontal: \"right\", vertical: \"top\" },\n    offset: { left: 12, right: 0, top: -12, bottom: 0 },\n    transformOrigin: { horizontal: \"left\", vertical: \"top\" }\n  },\n  rightStart: {\n    placement: { horizontal: \"right\", vertical: \"bottom\" },\n    offset: { left: 12, right: 0, top: 0, bottom: -12 },\n    transformOrigin: { horizontal: \"left\", vertical: \"bottom\" }\n  },\n  top: {\n    placement: { horizontal: \"center\", vertical: \"top\" },\n    offset: { left: 0, right: 0, top: 0, bottom: 12 },\n    transformOrigin: { horizontal: \"center\", vertical: \"bottom\" }\n  },\n  topEnd: {\n    placement: { horizontal: \"left\", vertical: \"top\" },\n    offset: { left: -12, right: 0, top: 0, bottom: 12 },\n    transformOrigin: { horizontal: \"left\", vertical: \"bottom\" }\n  },\n  topStart: {\n    placement: { horizontal: \"right\", vertical: \"top\" },\n    offset: { left: 0, right: -12, top: 0, bottom: 12 },\n    transformOrigin: { horizontal: \"right\", vertical: \"bottom\" }\n  },\n  bottom: {\n    placement: { horizontal: \"center\", vertical: \"bottom\" },\n    offset: { left: 0, right: 0, top: 12, bottom: 0 },\n    transformOrigin: { horizontal: \"center\", vertical: \"top\" }\n  },\n  bottomEnd: {\n    placement: { horizontal: \"left\", vertical: \"bottom\" },\n    offset: { left: -12, right: 0, top: 12, bottom: 0 },\n    transformOrigin: { horizontal: \"left\", vertical: \"top\" }\n  },\n  bottomStart: {\n    placement: { horizontal: \"right\", vertical: \"bottom\" },\n    offset: { left: 0, right: -12, top: 12, bottom: 0 },\n    transformOrigin: { horizontal: \"right\", vertical: \"top\" }\n  }\n};\n\nconst TooltipComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (\n  {\n    title,\n    children,\n    className,\n    domRoot,\n    label,\n    location = \"right\",\n    position = \"center\",\n    color = \"black\",\n    icon,\n    ...rest\n  }: Props,\n  ref\n) => {\n  const [identifier] = useState(generateID());\n  const [shouldRender, setShouldRender] = useState(false);\n  const [visible, setVisible] = useState(false);\n  const wrappingDivRef = (ref as RefObject<HTMLDivElement>) || createRef<HTMLDivElement>();\n  const { root } = useGetDomRoot(domRoot, wrappingDivRef);\n\n  const relativeElement = useRef<HTMLDivElement>(null);\n  const elementToBePositioned = useRef<HTMLDivElement>(null);\n\n  const determinedLocation = useMemo(() => {\n    if (position === \"center\") {\n      return location;\n    }\n\n    return `${location}${position.charAt(0).toUpperCase() + position.slice(1)}` as LocationPosition;\n  }, [location, position]);\n\n  const { top, bottom, right, left, calculatePosition } = usePosition({\n    relativeElement: relativeElement,\n    elementToBePositioned: elementToBePositioned,\n    placement: locations[determinedLocation].placement,\n    offset: locations[determinedLocation].offset,\n    transformOrigin: locations[determinedLocation].transformOrigin\n  });\n\n  const show = () => {\n    setShouldRender(true);\n    requestAnimationFrame(() => {\n      setVisible(true);\n    });\n  };\n\n  const hide = () => {\n    setVisible(false);\n  };\n\n  useEffect(() => {\n    if (!visible) {\n      return;\n    }\n\n    const escapePressHandler = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") {\n        hide();\n      }\n    };\n\n    document.addEventListener(\"keyup\", escapePressHandler);\n\n    return () => {\n      document.removeEventListener(\"keyup\", escapePressHandler);\n    };\n  }, [visible]);\n\n  useLayoutEffect(() => {\n    if (shouldRender) {\n      calculatePosition();\n    }\n  }, [shouldRender]);\n\n  useEffect(() => {\n    const element = elementToBePositioned.current;\n\n    if (!element || visible) {\n      return;\n    }\n\n    const handleTransitionEnd = (event: TransitionEvent) => {\n      if (event.propertyName === \"opacity\") {\n        setShouldRender(false);\n      }\n    };\n\n    element.addEventListener(\"transitionend\", handleTransitionEnd);\n\n    return () => {\n      element.removeEventListener(\"transitionend\", handleTransitionEnd);\n    };\n  }, [visible]);\n\n  const renderChildren = () => {\n    if (React.isValidElement(label)) {\n      return React.cloneElement(label as ReactElement, {\n        ref: relativeElement,\n        onMouseEnter: show,\n        onMouseLeave: hide,\n        onFocus: show,\n        onBlur: hide,\n        \"aria-describedby\": identifier,\n        tabIndex: 0,\n        className: classes[\"label\"]\n      });\n    }\n\n    return (\n      <span\n        className={classes[\"label\"]}\n        tabIndex={0}\n        onFocus={show}\n        onBlur={hide}\n        aria-describedby={identifier}\n      >\n        {label}\n      </span>\n    );\n  };\n\n  const tooltipClasses = `${classes[\"tooltip\"]} ${classes[color]} ${\n    visible ? classes[\"visible\"] : \"\"\n  } ${classes[determinedLocation.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, \"$1-$2\").toLowerCase()]}`;\n\n  return (\n    <div {...rest} ref={wrappingDivRef} className={`${classes.wrapper} ${className ?? \"\"}`}>\n      {renderChildren()}\n      <div className={`${classes[\"tooltip-wrapper\"]}`}>\n        {!React.isValidElement(label) && (\n          <Icon\n            ref={relativeElement}\n            tag=\"div\"\n            onMouseEnter={show}\n            onMouseLeave={hide}\n            icon={Icons.InfoCircle}\n            aria-describedby={identifier}\n            className={`${classes.icon}`}\n          />\n        )}\n        {shouldRender &&\n          createPortal(\n            <div\n              ref={elementToBePositioned}\n              style={{\n                ...rest.style,\n                top: top,\n                left: left,\n                right: right,\n                bottom: bottom\n              }}\n              id={identifier}\n              className={tooltipClasses}\n            >\n              {title && <span className={classes[\"tooltip-title\"]}>{title}</span>}\n              {children}\n            </div>,\n            root\n          )}\n      </div>\n    </div>\n  );\n};\n\nexport const Tooltip = React.forwardRef(TooltipComponent);\n"],"names":[],"mappings":"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"}

package/dist/components/Tooltip/Tooltip.module.scss.cjs.js

@@ -0,0 +1,3 @@
+!function(){"use strict";try{if("undefined"!=typeof document){var o=document.createElement("style");o.appendChild(document.createTextNode('.Tooltip_sr-only_gFXfX{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.Tooltip_hidden_gFXfX{display:none}.Tooltip_slide-in_gFXfX{animation:Tooltip_slide-in_gFXfX .5s forwards}@media (prefers-reduced-motion: reduce){.Tooltip_slide-in_gFXfX{animation-duration:.1ms}}.Tooltip_slide-out_gFXfX{animation:Tooltip_slide-out_gFXfX .5s forwards}@media (prefers-reduced-motion: reduce){.Tooltip_slide-out_gFXfX{animation-duration:.1ms}}@keyframes Tooltip_slide-in_gFXfX{0%{transform:translateY(100vh)}to{transform:translateY(0)}}@keyframes Tooltip_slide-out_gFXfX{0%{transform:translateY(0)}to{transform:translateY(100vh)}}/*!\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the "License");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an "AS IS" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */.Tooltip_wrapper_gFXfX{display:flex;align-items:center}.Tooltip_tooltip-wrapper_gFXfX .Tooltip_icon_gFXfX{margin-left:.5rem;color:var(--greyed-out);transition-property:all;transition-duration:.2s;transition-timing-function:ease-in-out}@media (prefers-reduced-motion: reduce){.Tooltip_tooltip-wrapper_gFXfX .Tooltip_icon_gFXfX{transition-duration:.1ms}}.Tooltip_tooltip-wrapper_gFXfX .Tooltip_icon_gFXfX:hover{color:var(--default)}.Tooltip_tooltip-wrapper_gFXfX .Tooltip_icon_gFXfX.Tooltip_error_gFXfX{color:var(--error)}.Tooltip_tooltip_gFXfX{position:fixed;font-size:var(--font-size-sub);line-height:1.33;border-radius:.125rem;padding:.75rem;color:var(--light);max-width:20.625rem;opacity:0;transform:scale(0);transform-origin:center center;pointer-events:none;box-shadow:0 .0625rem .3125rem #0105324d;word-break:break-word;z-index:var(--tooltip-index);transition-property:opacity,transform;transition-duration:.2s;transition-timing-function:ease-in-out}@media (prefers-reduced-motion: reduce){.Tooltip_tooltip_gFXfX{transition-duration:.1ms}}.Tooltip_tooltip_gFXfX.Tooltip_black_gFXfX{background-color:var(--tooltip-background-color)}.Tooltip_tooltip_gFXfX.Tooltip_black_gFXfX.Tooltip_top_gFXfX:after{width:0;height:0;border-style:solid;border-width:.25rem;border-color:transparent;border-top-color:var(--tooltip-background-color);position:absolute;left:50%;right:initial;transform:translate(-50%);top:100%;border-bottom-width:0}.Tooltip_tooltip_gFXfX.Tooltip_black_gFXfX.Tooltip_top-start_gFXfX:after{width:0;height:0;border-style:solid;border-width:.25rem;border-color:transparent;border-top-color:var(--tooltip-background-color);position:absolute;right:.75rem;left:initial;top:100%;border-bottom-width:0}.Tooltip_tooltip_gFXfX.Tooltip_black_gFXfX.Tooltip_top-end_gFXfX:after{width:0;height:0;border-style:solid;border-width:.25rem;border-color:transparent;border-top-color:var(--tooltip-background-color);position:absolute;left:1rem;right:initial;top:100%;border-bottom-width:0}.Tooltip_tooltip_gFXfX.Tooltip_black_gFXfX.Tooltip_bottom_gFXfX:after{width:0;height:0;border-style:solid;border-width:.25rem;border-color:transparent;border-bottom-color:var(--tooltip-background-color);position:absolute;left:50%;right:initial;transform:translate(-50%);bottom:100%;border-top-width:0}.Tooltip_tooltip_gFXfX.Tooltip_black_gFXfX.Tooltip_bottom-start_gFXfX:after{width:0;height:0;border-style:solid;border-width:.25rem;border-color:transparent;border-bottom-color:var(--tooltip-background-color);position:absolute;right:.75rem;left:initial;bottom:100%;border-top-width:0}.Tooltip_tooltip_gFXfX.Tooltip_black_gFXfX.Tooltip_bottom-end_gFXfX:after{width:0;height:0;border-style:solid;border-width:.25rem;border-color:transparent;border-bottom-color:var(--tooltip-background-color);position:absolute;left:1rem;right:initial;bottom:100%;border-top-width:0}.Tooltip_tooltip_gFXfX.Tooltip_black_gFXfX.Tooltip_left_gFXfX:after{width:0;height:0;border-style:solid;border-width:.25rem;border-color:transparent;border-left-color:var(--tooltip-background-color);position:absolute;top:50%;bottom:initial;transform:translateY(-50%);left:100%;border-right-width:0}.Tooltip_tooltip_gFXfX.Tooltip_black_gFXfX.Tooltip_left-start_gFXfX:after{width:0;height:0;border-style:solid;border-width:.25rem;border-color:transparent;border-left-color:var(--tooltip-background-color);position:absolute;bottom:.9375rem;top:initial;left:100%;border-right-width:0}.Tooltip_tooltip_gFXfX.Tooltip_black_gFXfX.Tooltip_left-end_gFXfX:after{width:0;height:0;border-style:solid;border-width:.25rem;border-color:transparent;border-left-color:var(--tooltip-background-color);position:absolute;top:.875rem;bottom:initial;left:100%;border-right-width:0}.Tooltip_tooltip_gFXfX.Tooltip_black_gFXfX.Tooltip_right_gFXfX:after{width:0;height:0;border-style:solid;border-width:.25rem;border-color:transparent;border-right-color:var(--tooltip-background-color);position:absolute;top:50%;bottom:initial;transform:translateY(-50%);right:100%;border-left-width:0}.Tooltip_tooltip_gFXfX.Tooltip_black_gFXfX.Tooltip_right-start_gFXfX:after{width:0;height:0;border-style:solid;border-width:.25rem;border-color:transparent;border-right-color:var(--tooltip-background-color);position:absolute;bottom:.9375rem;top:initial;right:100%;border-left-width:0}.Tooltip_tooltip_gFXfX.Tooltip_black_gFXfX.Tooltip_right-end_gFXfX:after{width:0;height:0;border-style:solid;border-width:.25rem;border-color:transparent;border-right-color:var(--tooltip-background-color);position:absolute;top:.875rem;bottom:initial;right:100%;border-left-width:0}.Tooltip_tooltip_gFXfX.Tooltip_blue_gFXfX{background-color:var(--color-blue-grey500)}.Tooltip_tooltip_gFXfX.Tooltip_blue_gFXfX.Tooltip_top_gFXfX:after{width:0;height:0;border-style:solid;border-width:.25rem;border-color:transparent;border-top-color:var(--color-blue-grey500);position:absolute;left:50%;right:initial;transform:translate(-50%);top:100%;border-bottom-width:0}.Tooltip_tooltip_gFXfX.Tooltip_blue_gFXfX.Tooltip_top-start_gFXfX:after{width:0;height:0;border-style:solid;border-width:.25rem;border-color:transparent;border-top-color:var(--color-blue-grey500);position:absolute;right:.75rem;left:initial;top:100%;border-bottom-width:0}.Tooltip_tooltip_gFXfX.Tooltip_blue_gFXfX.Tooltip_top-end_gFXfX:after{width:0;height:0;border-style:solid;border-width:.25rem;border-color:transparent;border-top-color:var(--color-blue-grey500);position:absolute;left:1rem;right:initial;top:100%;border-bottom-width:0}.Tooltip_tooltip_gFXfX.Tooltip_blue_gFXfX.Tooltip_bottom_gFXfX:after{width:0;height:0;border-style:solid;border-width:.25rem;border-color:transparent;border-bottom-color:var(--color-blue-grey500);position:absolute;left:50%;right:initial;transform:translate(-50%);bottom:100%;border-top-width:0}.Tooltip_tooltip_gFXfX.Tooltip_blue_gFXfX.Tooltip_bottom-start_gFXfX:after{width:0;height:0;border-style:solid;border-width:.25rem;border-color:transparent;border-bottom-color:var(--color-blue-grey500);position:absolute;right:.75rem;left:initial;bottom:100%;border-top-width:0}.Tooltip_tooltip_gFXfX.Tooltip_blue_gFXfX.Tooltip_bottom-end_gFXfX:after{width:0;height:0;border-style:solid;border-width:.25rem;border-color:transparent;border-bottom-color:var(--color-blue-grey500);position:absolute;left:1rem;right:initial;bottom:100%;border-top-width:0}.Tooltip_tooltip_gFXfX.Tooltip_blue_gFXfX.Tooltip_left_gFXfX:after{width:0;height:0;border-style:solid;border-width:.25rem;border-color:transparent;border-left-color:var(--color-blue-grey500);position:absolute;top:50%;bottom:initial;transform:translateY(-50%);left:100%;border-right-width:0}.Tooltip_tooltip_gFXfX.Tooltip_blue_gFXfX.Tooltip_left-start_gFXfX:after{width:0;height:0;border-style:solid;border-width:.25rem;border-color:transparent;border-left-color:var(--color-blue-grey500);position:absolute;bottom:.9375rem;top:initial;left:100%;border-right-width:0}.Tooltip_tooltip_gFXfX.Tooltip_blue_gFXfX.Tooltip_left-end_gFXfX:after{width:0;height:0;border-style:solid;border-width:.25rem;border-color:transparent;border-left-color:var(--color-blue-grey500);position:absolute;top:.875rem;bottom:initial;left:100%;border-right-width:0}.Tooltip_tooltip_gFXfX.Tooltip_blue_gFXfX.Tooltip_right_gFXfX:after{width:0;height:0;border-style:solid;border-width:.25rem;border-color:transparent;border-right-color:var(--color-blue-grey500);position:absolute;top:50%;bottom:initial;transform:translateY(-50%);right:100%;border-left-width:0}.Tooltip_tooltip_gFXfX.Tooltip_blue_gFXfX.Tooltip_right-start_gFXfX:after{width:0;height:0;border-style:solid;border-width:.25rem;border-color:transparent;border-right-color:var(--color-blue-grey500);position:absolute;bottom:.9375rem;top:initial;right:100%;border-left-width:0}.Tooltip_tooltip_gFXfX.Tooltip_blue_gFXfX.Tooltip_right-end_gFXfX:after{width:0;height:0;border-style:solid;border-width:.25rem;border-color:transparent;border-right-color:var(--color-blue-grey500);position:absolute;top:.875rem;bottom:initial;right:100%;border-left-width:0}.Tooltip_tooltip_gFXfX:after{content:""}.Tooltip_tooltip_gFXfX.Tooltip_visible_gFXfX{opacity:1;transform:scale(1)}.Tooltip_label_gFXfX:focus-visible{outline:.0313rem dashed var(--color-primary)}.Tooltip_tooltip-title_gFXfX{font-weight:500;font-size:var(--font-size-form-label);line-height:1.43;display:block;margin-bottom:.25rem}')),document.head.appendChild(o)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}}();
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t="Tooltip_hidden_gFXfX",o="Tooltip_wrapper_gFXfX",l="Tooltip_icon_gFXfX",e="Tooltip_error_gFXfX",p="Tooltip_tooltip_gFXfX",i="Tooltip_black_gFXfX",r="Tooltip_top_gFXfX",_="Tooltip_bottom_gFXfX",X="Tooltip_left_gFXfX",s="Tooltip_right_gFXfX",f="Tooltip_blue_gFXfX",g="Tooltip_visible_gFXfX",T="Tooltip_label_gFXfX",F={"sr-only":"Tooltip_sr-only_gFXfX",hidden:t,"slide-in":"Tooltip_slide-in_gFXfX","slide-out":"Tooltip_slide-out_gFXfX",wrapper:o,"tooltip-wrapper":"Tooltip_tooltip-wrapper_gFXfX",icon:l,error:e,tooltip:p,black:i,top:r,"top-start":"Tooltip_top-start_gFXfX","top-end":"Tooltip_top-end_gFXfX",bottom:_,"bottom-start":"Tooltip_bottom-start_gFXfX","bottom-end":"Tooltip_bottom-end_gFXfX",left:X,"left-start":"Tooltip_left-start_gFXfX","left-end":"Tooltip_left-end_gFXfX",right:s,"right-start":"Tooltip_right-start_gFXfX","right-end":"Tooltip_right-end_gFXfX",blue:f,visible:g,label:T,"tooltip-title":"Tooltip_tooltip-title_gFXfX"};exports.black=i,exports.blue=f,exports.bottom=_,exports.default=F,exports.error=e,exports.hidden=t,exports.icon=l,exports.label=T,exports.left=X,exports.right=s,exports.tooltip=p,exports.top=r,exports.visible=g,exports.wrapper=o;
+//# sourceMappingURL=Tooltip.module.scss.cjs.js.map

package/dist/components/Tooltip/Tooltip.module.scss.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.module.scss.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}